/* ==========================================================================
   ACCUEIL — port des sections 5 à 12b du design, hero et console du
   sélecteur d'après la maquette du 20 septembre 2026.
   Chargée sur la page d'accueil seulement, par inc/assets.php, après
   composants.css qui porte tout ce que les pages partagent (section, boutons,
   carte, pilule, carte produit, menu déroulant).

   Sections 0 à 9 : les jetons locaux, puis un bloc de l'accueil chacune,
   dans l'ordre de la page. Section 10 : les points de rupture.

   Mêmes règles que header.css : aucune couleur, ombre, rayon, police ni
   espacement en dur ; jetons :root de style.css, jetons locaux --ac-*
   pour les dimensions que le design écrit en dur.

   Points de rupture : 1100 est porté par --section-y (style.css) ; 1024
   met le hero sur une colonne et le bouton de la console sous ses champs ;
   768 resserre la plaque, les badges flottants et la console ; 640 met les
   badges de confiance et les groupes sur deux colonnes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. JETONS LOCAUX DE L'ACCUEIL
   -------------------------------------------------------------------------- */
:root {
    /* Badge flottant : hero (deux) et carte de preuve (un) */
    --ac-plate:          32px;   /* plaque d'icône                          */
    --ac-badge-blur:     16px;   /* flou du verre dépoli                    */
    --ac-badge-saturate:  1.3;   /* saturation derrière le verre            */
    --ac-badge-float:     6px;   /* amplitude du flottement                 */
    --ac-badge-float-a:   6s;    /* durée du flottement, badge stock        */
    --ac-badge-float-b:   7s;    /* … badge expédition                      */
    --ac-badge-stock-x:  10px;   /* débord du badge stock sur le bord gauche */
    --ac-badge-stock-y:   6px;   /* … hauteur au-dessus du bord bas         */
    --ac-badge-ship-x:    2px;   /* débord du badge expédition, bord droit  */
    --ac-badge-ship-y:    2px;   /* … distance au bord haut                 */
    --ac-badge-x-sm:      4px;   /* débords des deux badges sous 768 px     */
    --ac-badge-y-sm:      8px;
    --ac-proof-badge-x:  12px;   /* débord du badge de la carte de preuve   */

    /* Hero : fond (halos et trame de points) */
    --ac-aurora-blur:    70px;   /* flou des halos vert et bleu             */
    --ac-warm-blur:      60px;   /* flou du halo chaud                      */
    --ac-aurora-a:       16s;    /* durée du mouvement du halo vert         */
    --ac-aurora-b:       20s;    /* … du halo bleu                          */
    --ac-halo-a-size:    60vw;   /* halo vert : taille, plafond, position   */
    --ac-halo-a-max:    860px;
    --ac-halo-a-x:      -16vw;   /* depuis la droite                        */
    --ac-halo-a-y:      -34vw;   /* depuis le haut                          */
    --ac-halo-a-dx:      -8vw;   /* fin du mouvement : déplacement, échelle */
    --ac-halo-a-dy:      10vw;
    --ac-halo-a-scale:   1.12;
    --ac-halo-b-size:    48vw;   /* halo bleu                               */
    --ac-halo-b-max:    700px;
    --ac-halo-b-x:      -14vw;   /* depuis la gauche                        */
    --ac-halo-b-y:      -28vw;   /* depuis le bas                           */
    --ac-halo-b-dx:      10vw;
    --ac-halo-b-dy:      -8vw;
    --ac-halo-b-scale:   1.08;
    --ac-warm-size:      32vw;   /* halo chaud                              */
    --ac-warm-max:      480px;
    --ac-warm-x:          46%;   /* depuis la gauche                        */
    --ac-warm-y:        -22vw;   /* depuis le bas                           */
    --ac-grid-step:      24px;   /* pas de la trame de points               */
    --ac-grid-dot:        1px;   /* rayon d'un point                        */
    --ac-grid-dot-fade: 1.2px;   /* fin du fondu du point                   */

    /* Hero : texte et illustration */
    --ac-lede-w:        560px;   /* largeur maximale de l'accroche          */
    --ac-em-pad:        .04em;   /* réserve à droite du dégradé du h1       */
    --ac-art-max-w:     440px;   /* largeur maximale de l'illustration      */
    --ac-art-opacity:     .9;    /* opacité de l'illustration               */
    --ac-panel-blur:     18px;   /* flou de la plaque de verre              */
    --ac-panel-tilt:     2deg;   /* inclinaison de la plaque                */
    --ac-panel-tilt-sm:  1deg;   /* … sous 1024 px                          */
    --ac-panel-lift:      4px;   /* relèvement de la plaque au survol       */
    --ac-panel-inset:    14px;   /* retrait du cadre pointillé              */

    /* Console du sélecteur (maquette du 20 septembre) */
    --ac-console-w:    1100px;   /* largeur maximale de la console          */
    --ac-field-h:        68px;   /* hauteur d'un champ                      */
    --ac-field-h-sm:     60px;   /* … sous 768 px                           */
    --ac-go-h-sm:        56px;   /* bouton sous 1024 px                     */
    --ac-go-min-w:      200px;   /* largeur minimale du bouton              */
    --ac-go-shift:        3px;   /* glissement de la flèche au survol       */
    --ac-go-stroke:         2;   /* trait de la flèche du bouton            */
    --ac-step:           28px;   /* pastille numérotée                      */
    --ac-step-line:     1.5px;   /* sa bordure                              */
    --ac-check-w:         6px;   /* coche dans la pastille : largeur        */
    --ac-check-h:        11px;   /* … hauteur                               */
    --ac-check-lift:      1px;   /* … remontée optique                      */
    --ac-caret:          12px;   /* boîte du chevron                        */
    --ac-caret-stroke:      3;   /* trait du chevron : 3 dans une boîte de 24 rendue à 12 = 1,5 px */
    --ac-menu-left:      54px;   /* débord du menu déroulant : gauche       */
    --ac-menu-right:     13px;   /* … droite                                */
    --ac-menu-left-sm:   46px;   /* … gauche sous 768 px                    */
    --ac-menu-max-h:    300px;   /* hauteur maximale du menu                */
    --ac-pulse:          1.6s;   /* impulsion de l'étape suggérée : durée   */
    --ac-pulse-delay:      1s;   /* … après le chargement                   */
    --ac-pulse-count:       3;   /* … nombre de battements                  */
    --ac-pulse-spread:   12px;   /* … rayon atteint                         */
    --ac-trust-stroke:    2.2;   /* trait de la coche de la ligne de confiance */

    /* Badges de confiance */
    --ac-badge-basis:   260px;   /* largeur de départ d'un badge            */
    --ac-badge-max-w:   300px;
    --ac-badge-min-h:    96px;
    --ac-plate-w:        80px;   /* plaque d'icône en chevron               */
    --ac-plate-h-sm:     44px;   /* plaque pleine largeur, sous 640 px      */
    --ac-badge-icon-sm:  24px;   /* icône de la plaque, sous 640 px         */
    --ac-badge-lift:      1px;   /* soulèvement au survol                   */

    /* Groupes de produits */
    --ac-group-min:     200px;   /* largeur minimale d'une tuile            */
    --ac-group-icon:     56px;   /* icône dans la tuile                     */
    --ac-group-icon-sm:  44px;   /* … sous 640 px                           */

    /* Bande compte pro */
    --ac-trade-col-min: 320px;   /* colonne de la bande                     */
    --ac-reason-min:    220px;   /* colonne d'une raison                    */
    --ac-reason-icon:    36px;   /* plaque d'icône d'une raison             */
    --ac-trade-h2-tablet: 26px;  /* h2 sous 1024 px (32 et 24 ont un jeton) */
    --ac-cta-tall-h:     48px;   /* grand bouton de la bande                */
    --ac-price-thumb:    56px;   /* vignette de la carte de preuve          */
    --ac-price-thumb-in: 32px;   /* bloc d'attente dans la vignette         */

    /* Comment ça marche */
    --ac-step-min:      240px;   /* colonne d'une étape                     */
    --ac-step-num:       36px;   /* pastille numérotée                      */

    /* Avis */
    --ac-quote-min:     280px;   /* colonne d'un témoignage                 */
    --ac-avatar:         36px;
    --ac-stars-gap:       2px;

    /* Articles */
    --ac-insight-min:   320px;   /* colonne de la grille d'articles         */
    --ac-thumb:          88px;   /* vignette d'un article en liste          */
    --ac-thumb-in:       56px;   /* bloc d'attente dans la vignette         */

    /* FAQ */
    --ac-faq-max-w:     820px;
    --ac-faq-p-max-w:   680px;
    --ac-chevron:        10px;   /* flèche de summary                       */
    --ac-chevron-line:  1.5px;

    /* Empilement dans le hero, cohérent avec --z-dd : 20 (composants.css) */
    --z-hero:             2;     /* la section au-dessus de ce qui suit     */
    --z-hero-bg:         -1;     /* halos et trame, sous le contenu         */
    --z-hero-art:         1;
    --z-float:            2;     /* badges flottants, sur l'illustration    */
    --z-hero-copy:        5;
    --z-finder:          30;     /* console et ses menus, au-dessus de tout */
}

/* --------------------------------------------------------------------------
   1. BADGE FLOTTANT : preuve chiffrée en verre dépoli, posée sur
   l'illustration du hero (deux, qui flottent) et sur la carte de preuve
   de la bande compte pro (un, immobile). Le parent est positionné.
   Gabarit : template-parts/accueil/float-badge.php.
   -------------------------------------------------------------------------- */
.float-badge {
    position: absolute;
    z-index: var(--z-float);
    display: flex;
    align-items: center;
    gap: var(--sp-10);
    padding: var(--sp-10) var(--sp-14) var(--sp-10) var(--sp-10);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--ac-badge-blur)) saturate(var(--ac-badge-saturate));
    backdrop-filter: blur(var(--ac-badge-blur)) saturate(var(--ac-badge-saturate));
    border: var(--cp-line) solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
}

.float-badge--stock {
    left: calc(-1 * var(--ac-badge-stock-x));
    bottom: var(--ac-badge-stock-y);
    animation: hero-float var(--ac-badge-float-a) ease-in-out infinite;
}

.float-badge--ship {
    right: calc(-1 * var(--ac-badge-ship-x));
    top: var(--ac-badge-ship-y);
    animation: hero-float var(--ac-badge-float-b) ease-in-out infinite reverse;
}

/* Flottement vertical lent ; coupé par prefers-reduced-motion (style.css). */
@keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(-1 * var(--ac-badge-float))); }
}

.float-badge strong {
    display: block;
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    color: var(--ink);
    line-height: var(--lh-title);
}

.float-badge span {
    display: block;
    font-size: var(--fs-12);
    color: var(--grey);
    line-height: var(--lh-badge);
}

/* Plaque d'icône : le design l'écrit en style en ligne, ici une classe,
   avec une teinte pastel par modificateur. Sélecteurs à deux classes :
   « .float-badge span » ci-dessus (0,1,1) battait la plaque (display en
   bloc, icône grise). */
.float-badge .float-badge__icon {
    width: var(--ac-plate);
    height: var(--ac-plate);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    line-height: 0;
}

.float-badge .float-badge__icon svg {
    display: block;
    flex: none;
}

.float-badge .float-badge__icon--orange { background: var(--pastel-orange-bg); color: var(--pastel-orange-ink); }
.float-badge .float-badge__icon--green  { background: var(--pastel-green-bg);  color: var(--pastel-green-ink); }

/* --------------------------------------------------------------------------
   2. HERO (design 5) — template-parts/accueil/hero.php
   « Console de recherche » : fond clair et vibrant, texte à gauche, plaque
   de verre à droite, et la console du sélecteur sur toute la largeur
   sous les deux colonnes (template-parts/accueil/finder.php).
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    z-index: var(--z-hero);
    isolation: isolate;
    color: var(--ink);
    background: linear-gradient(135deg, var(--hero-mint) 0%, var(--hero-teal) 42%, var(--hero-sky) 100%);
    border-bottom: var(--cp-line) solid var(--line-strong);
}

/* Fond décoratif : deux halos qui dérivent lentement, un halo chaud, une
   trame de points fondue vers les bords. Hors flux, jamais cliquable. */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: var(--z-hero-bg);
    overflow: hidden;
    pointer-events: none;
}

.hero__bg::before,
.hero__bg::after {
    content: "";
    position: absolute;
    border-radius: var(--round);
    filter: blur(var(--ac-aurora-blur));
    will-change: transform;
}

.hero__bg::before {
    width: var(--ac-halo-a-size);
    height: var(--ac-halo-a-size);
    max-width: var(--ac-halo-a-max);
    max-height: var(--ac-halo-a-max);
    right: var(--ac-halo-a-x);
    top: var(--ac-halo-a-y);
    background: radial-gradient(circle, var(--aurora-green) 0%, var(--aurora-green-soft) 45%, transparent 70%);
    animation: aurora-a var(--ac-aurora-a) ease-in-out infinite alternate;
}

.hero__bg::after {
    width: var(--ac-halo-b-size);
    height: var(--ac-halo-b-size);
    max-width: var(--ac-halo-b-max);
    max-height: var(--ac-halo-b-max);
    left: var(--ac-halo-b-x);
    bottom: var(--ac-halo-b-y);
    background: radial-gradient(circle, var(--aurora-blue) 0%, var(--aurora-blue-soft) 45%, transparent 70%);
    animation: aurora-b var(--ac-aurora-b) ease-in-out infinite alternate;
}

.hero__bg-warm {
    position: absolute;
    width: var(--ac-warm-size);
    height: var(--ac-warm-size);
    max-width: var(--ac-warm-max);
    max-height: var(--ac-warm-max);
    left: var(--ac-warm-x);
    bottom: var(--ac-warm-y);
    border-radius: var(--round);
    background: radial-gradient(circle, var(--aurora-warm) 0%, transparent 65%);
    filter: blur(var(--ac-warm-blur));
}

/* Trame de points, fondue vers les bords par un masque radial (le masque
   ne garde que l'opacité : la couleur du dégradé est sans effet). */
.hero__bg-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--hero-dot) var(--ac-grid-dot), transparent var(--ac-grid-dot-fade));
    background-size: var(--ac-grid-step) var(--ac-grid-step);
    -webkit-mask-image: radial-gradient(60% 80% at 50% 45%, var(--ink) 10%, transparent 100%);
    mask-image: radial-gradient(60% 80% at 50% 45%, var(--ink) 10%, transparent 100%);
}

@keyframes aurora-a {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(var(--ac-halo-a-dx), var(--ac-halo-a-dy)) scale(var(--ac-halo-a-scale)); }
}

@keyframes aurora-b {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(var(--ac-halo-b-dx), var(--ac-halo-b-dy)) scale(var(--ac-halo-b-scale)); }
}

/* Grille : texte et illustration côte à côte, la console sur toute la
   largeur en dessous. */
.hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "copy art"
        "finder finder";
    column-gap: var(--sp-56);
    row-gap: var(--sp-32);
    align-items: center;
    padding: var(--sp-44) var(--gutter) var(--sp-52);
}

.hero__col {
    grid-area: copy;
    position: relative;
    z-index: var(--z-hero-copy);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.hero h1 {
    font-size: var(--fs-hero);
    font-weight: var(--fw-heavy);
    line-height: var(--lh-hero);
    letter-spacing: var(--ls-hero);
    text-wrap: balance;
    color: var(--ink);
}

/* La partie mise en avant du titre (balise <em> du réglage) : dégradé vert
   → pétrole dans les lettres. */
.hero h1 em {
    font-style: normal;
    background: linear-gradient(92deg, var(--action) 0%, var(--petrol) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding-right: var(--ac-em-pad);
}

.hero__lede {
    margin-top: var(--sp-12);
    font-size: var(--fs-17);
    line-height: var(--lh-body);
    color: var(--grey);
    max-width: var(--ac-lede-w);
    text-wrap: pretty;
}

.hero__lede strong {
    color: var(--ink);
    font-weight: var(--fw-semibold);
}

/* Illustration : plaque de verre dépoli légèrement inclinée, cadre
   pointillé intérieur, redressée et relevée au survol ; les badges
   flottants (section 1) débordent de la colonne, d'où ses marges. */
.hero__art {
    grid-area: art;
    position: relative;
    z-index: var(--z-hero-art);
    min-width: 0;
    padding: var(--sp-12) var(--sp-8) var(--sp-12) var(--sp-16);
}

.hero__art-panel {
    position: relative;
    border-radius: var(--radius-3xl);
    padding: var(--sp-32);
    min-height: 0;
    aspect-ratio: 2 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--glass-bg) 0%, var(--glass-bg-end) 100%);
    border: var(--cp-line) solid var(--glass-border);
    box-shadow: var(--shadow-glass);
    -webkit-backdrop-filter: blur(var(--ac-panel-blur));
    backdrop-filter: blur(var(--ac-panel-blur));
    transform: rotate(var(--ac-panel-tilt));
    transition: transform var(--ease-panel);
}

.hero__art:hover .hero__art-panel {
    transform: rotate(0) translateY(calc(-1 * var(--ac-panel-lift)));
}

.hero__art-panel::before {
    content: "";
    position: absolute;
    inset: var(--ac-panel-inset);
    border: var(--cp-line) dashed var(--hero-dash);
    border-radius: var(--radius-xl);
    pointer-events: none;
}

.hero__art-panel img {
    width: 100%;
    max-width: var(--ac-art-max-w);
    height: auto;
    position: relative;
    opacity: var(--ac-art-opacity);
}

/* Console du sélecteur : sur toute la largeur sous les deux colonnes,
   au-dessus de tout le reste (ses menus déroulent par-dessus les badges). */
.finder-wrap {
    grid-area: finder;
    position: relative;
    z-index: var(--z-finder);
    width: 100%;
    max-width: var(--ac-console-w);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- 2b. La console : carte blanche à anneau vert, trois champs bordés
   avec la pastille numérotée et le menu à deux lignes, le grand bouton.
   Le PHP rend un <label> et un <select> par champ (repli sans JavaScript,
   voir plus bas) ; finder.js les habille du menu du design (.dd, règles
   communes dans composants.css section 5b) avec le libellé dans le bouton.
   ---------------------------------------------------------------------------- */
.finder {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: var(--sp-12);
    align-items: stretch;
    padding: var(--sp-14);
    background: var(--paper);
    border: var(--cp-line) solid var(--line);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-console);
    transition: box-shadow var(--ease);
}

.finder:focus-within {
    box-shadow: var(--shadow-console-focus);
}

/* Un champ : boîte bordée sur fond gris clair, blanche au survol et au
   focus, anneau vert quand un de ses contrôles a le focus. */
.finder__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-14);
    min-width: 0;
    height: var(--ac-field-h);
    padding: 0 var(--sp-14) 0 var(--sp-16);
    border: var(--cp-line) solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--bench);
    text-align: left;
    transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

.finder__field:hover {
    border-color: var(--slate);
    background: var(--paper);
}

.finder__field:focus-within {
    border-color: var(--action);
    background: var(--paper);
    box-shadow: 0 0 0 var(--cp-focus-ring) var(--field-halo);
}

/* Champ désactivé (taxonomie vide) : état absent du design, composé des
   jetons ; pas de survol, pas de suggestion. */
.finder__field:has(:disabled),
.finder__field:has(:disabled):hover {
    background: var(--chrome);
    border-color: var(--line-strong);
    cursor: default;
}

/* Étape 1 suggérée tant que rien n'est choisi : bordure verte et trois
   battements de la pastille. « Rempli » se lit sur le bouton du menu
   (data-filled, posé par menu-deroulant.js) ou, sans JavaScript, sur
   l'option choisie du <select>. Le premier div de la console est bien le
   premier champ : les champs cachés du formulaire viennent après. */
.finder:not(:has([data-filled], .finder__select option:checked:not([value=""]))) .finder__field:first-of-type:not(:has(:disabled)) {
    border-color: var(--action);
}

.finder:not(:has([data-filled], .finder__select option:checked:not([value=""]))) .finder__field:first-of-type:not(:has(:disabled)) .finder__step {
    animation: cue-pulse var(--ac-pulse) ease-out var(--ac-pulse-delay) var(--ac-pulse-count);
}

@keyframes cue-pulse {
    0%   { box-shadow: 0 0 0 0 var(--cue-pulse); }
    100% { box-shadow: 0 0 0 var(--ac-pulse-spread) transparent; }
}

/* Pastille numérotée : cerclée de vert, puis pleine avec une coche une
   fois le champ rempli. */
.finder__step {
    width: var(--ac-step);
    height: var(--ac-step);
    flex: none;
    border-radius: var(--pill);
    border: var(--ac-step-line) solid var(--action);
    color: var(--action);
    background: var(--paper);
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ease), color var(--ease);
}

.finder__field:has([data-filled], .finder__select option:checked:not([value=""])) .finder__step {
    background: var(--action);
    color: var(--paper);
    font-size: 0;
}

/* La coche : deux bords d'un rectangle tourné. */
.finder__field:has([data-filled], .finder__select option:checked:not([value=""])) .finder__step::after {
    content: "";
    width: var(--ac-check-w);
    height: var(--ac-check-h);
    border: solid var(--paper);
    border-width: 0 var(--cp-line-thick) var(--cp-line-thick) 0;
    transform: translateY(calc(-1 * var(--ac-check-lift))) rotate(45deg);
}

/* Le contrôle : libellé, <select> natif, puis le menu que finder.js insère.
   Il prend toute la place à droite de la pastille. */
.finder__control {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--cp-line-thick);
}

/* Petit libellé en capitales : visible sans JavaScript ; avec le menu du
   design, il est dans le bouton (.dd__label) et celui-ci ne sert plus
   qu'aux lecteurs d'écran (il nomme le <select> masqué). */
.finder__label {
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--grey);
}

.finder__control:has(.dd) .finder__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Repli sans JavaScript : le <select> natif, nu dans la boîte du champ,
   même taille de texte que la valeur du menu, le chevron du thème posé à
   droite. Avec JavaScript, finder.js le masque (attribut hidden). */
.finder__select {
    display: block;
    width: 100%;
    padding: 0 calc(var(--ac-caret) + var(--sp-8)) 0 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-16);
    line-height: var(--lh-body);
    color: var(--grey);
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

.finder__select:has(option:checked:not([value=""])) {
    color: var(--ink);
    font-weight: var(--fw-medium);
}

.finder__select option {
    color: var(--ink);
    font-weight: var(--fw-normal);
}

.finder__select:disabled {
    cursor: default;
}

.finder__caret {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--ac-caret);
    height: var(--ac-caret);
    pointer-events: none;
    color: var(--grey);
    display: flex;
}

.finder__caret svg {
    width: 100%;
    height: 100%;
    stroke-width: var(--ac-caret-stroke);
}

/* Le menu du design dans le champ : bouton nu (la boîte, c'est le champ),
   libellé au-dessus de la valeur, chevron gris qui passe au vert à
   l'ouverture. Les états redisent fond et couleur à cause du CSS de
   GeneratePress sur button:hover et button:focus (composants.css 5b). */
.finder .dd__toggle,
.finder .dd__toggle:hover,
.finder .dd__toggle:focus,
.finder .dd__toggle:focus-visible,
.finder .dd.is-open .dd__toggle {
    height: var(--cp-select-h);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    box-shadow: none;
    outline: none;
}

.finder .dd__toggle:disabled {
    cursor: default;
}

.finder .dd__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cp-line-thick);
    min-width: 0;
}

.finder .dd__label {
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--grey);
}

.finder .dd__value {
    font-size: var(--fs-16);
    color: var(--grey);
    max-width: 100%;
}

.finder .dd__toggle[data-filled] .dd__value {
    color: var(--ink);
    font-weight: var(--fw-medium);
}

/* Chevron : gris au repos et rempli, vert à l'ouverture (composants.css le
   tourne de 180°). Fichier caret-wide.svg (boîte 24, rendu à 12 px). */
.finder .dd__caret {
    width: var(--ac-caret);
    height: var(--ac-caret);
    margin-left: var(--sp-8);
    color: var(--grey);
    stroke-width: var(--ac-caret-stroke);
}

.finder .dd.is-open .dd__caret {
    color: var(--action);
}

/* Le panneau du menu s'aligne sur les bords du champ, pas sur ceux du
   bouton : il déborde à gauche de la pastille et de l'espace, à droite du
   padding du champ. */
.finder .dd__menu {
    left: calc(-1 * var(--ac-menu-left));
    right: calc(-1 * var(--ac-menu-right));
    top: calc(100% + var(--sp-14));
    border-radius: var(--radius-md);
    max-height: var(--ac-menu-max-h);
    box-shadow: var(--shadow-lift);
}

/* Le bouton : aussi haut que les champs, ombre verte, flèche qui glisse au
   survol. Sélecteurs groupés pour reprendre la main sur le CSS inline de
   GeneratePress (button:hover, button:focus). */
.finder__go,
.finder__go:hover,
.finder__go:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-10);
    height: var(--ac-field-h);
    min-width: var(--ac-go-min-w);
    padding: 0 var(--sp-28) 0 var(--sp-26);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--action);
    color: var(--paper);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow-go);
    transition: background var(--ease), transform var(--ease-press), box-shadow var(--ease);
}

.finder__go svg {
    stroke-width: var(--ac-go-stroke);
    transition: transform var(--ease);
}

.finder__go:hover {
    background: var(--action-lift);
    box-shadow: var(--shadow-go-lift);
}

.finder__go:hover svg {
    transform: translateX(var(--ac-go-shift));
}

.finder__go:active {
    transform: scale(.97);
}

/* Ligne de confiance sous la console : trois preuves cochées, sur une
   ligne discrète (template-parts/accueil/finder.php). */
.finder__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-8) var(--sp-28);
    margin-top: var(--sp-18);
    font-size: var(--fs-13);
    color: var(--grey);
}

.finder__trust li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
}

.finder__trust svg {
    flex: none;
    color: var(--action);
    stroke-width: var(--ac-trust-stroke);
}

.finder__trust strong {
    color: var(--ink);
    font-weight: var(--fw-medium);
}

/* --------------------------------------------------------------------------
   3. BADGES DE CONFIANCE (design 7) — template-parts/accueil/badges.php
   -------------------------------------------------------------------------- */
.badges {
    background: linear-gradient(180deg, var(--badges-top) 0%, var(--paper) 100%);
    border-bottom: var(--cp-line) solid var(--line-strong);
}

.badges__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--sp-16);
    padding-block: var(--sp-32);
}

.badge {
    flex: 1 1 var(--ac-badge-basis);
    max-width: var(--ac-badge-max-w);
    display: flex;
    align-items: center;
    gap: var(--sp-16);
    min-height: var(--ac-badge-min-h);
    background: var(--paper);
    border: var(--cp-line) solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    transition: transform var(--ease), box-shadow var(--ease);
}

.badge:hover {
    transform: translateY(calc(-1 * var(--ac-badge-lift)));
    box-shadow: var(--shadow-lift);
}

/* Plaque d'icône découpée en chevron : le motif qui pointe vers le texte.
   Teinte par position, en modificateur (style en ligne dans le design). */
.badge__plate {
    width: var(--ac-plate-w);
    align-self: stretch;
    flex: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: var(--sp-8);
    clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
}

.badge__plate--slate  { background: var(--pastel-slate-bg);  color: var(--pastel-slate-ink); }
.badge__plate--green  { background: var(--pastel-green-bg);  color: var(--pastel-green-ink); }
.badge__plate--orange { background: var(--pastel-orange-bg); color: var(--pastel-orange-ink); }
.badge__plate--amber  { background: var(--pastel-amber-bg);  color: var(--pastel-amber-ink); }

.badge__body {
    padding-right: var(--sp-16);
    min-width: 0;
}

.badge h3 {
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    line-height: var(--lh-title);
    text-wrap: pretty;
}

.badge p {
    margin-top: var(--cp-line-thick);
    font-size: var(--fs-13);
    color: var(--grey);
    line-height: var(--lh-small);
}

/* --------------------------------------------------------------------------
   4. GROUPES DE PRODUITS (design 9) — template-parts/accueil/groups.php
   Une tuile pastel 4:3 par entrée du menu principal, teinte par position.
   -------------------------------------------------------------------------- */
.groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--ac-group-min), 1fr));
    gap: var(--sp-16);
}

/* La tuile entière est un lien : texte encre, jamais souligné. */
.group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    color: var(--ink);
}

.group:hover {
    color: var(--ink);
    text-decoration: none;
}

.group__tile {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--ease), box-shadow var(--ease);
}

.group:hover .group__tile {
    transform: translateY(calc(-1 * var(--cp-lift)));
    box-shadow: var(--shadow-lift);
}

.group__tile svg {
    width: var(--ac-group-icon);
    height: var(--ac-group-icon);
    flex: none;   /* la tuile est un conteneur flex : l'icône ne rétrécit jamais */
}

.tile--slate  { background: var(--pastel-slate-bg);  color: var(--pastel-slate-ink); }
.tile--green  { background: var(--pastel-green-bg);  color: var(--pastel-green-ink); }
.tile--orange { background: var(--pastel-orange-bg); color: var(--pastel-orange-ink); }
.tile--amber  { background: var(--pastel-amber-bg);  color: var(--pastel-amber-ink); }
.tile--grey   { background: var(--pastel-grey-bg);   color: var(--pastel-grey-ink); }

.group h3 {
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
}

.group p {
    margin-top: var(--cp-line-thick);
    font-size: var(--fs-13);
    color: var(--grey);
}

/* --------------------------------------------------------------------------
   5. BANDE COMPTE PRO (design 10) — template-parts/accueil/trade.php
   -------------------------------------------------------------------------- */
.trade {
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--pastel-slate-bg) 0%, var(--paper) 70%);
    padding: var(--sp-48);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ac-trade-col-min), 1fr));
    gap: var(--sp-48);
    align-items: center;
}

.trade__col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-28);
    min-width: 0;
}

.trade h2 {
    margin-top: var(--sp-12);
    font-size: var(--fs-32);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    text-wrap: pretty;
}

.trade__lede {
    margin-top: var(--sp-8);
    font-size: var(--fs-15);
    color: var(--grey);
}

.trade__reasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ac-reason-min), 1fr));
    gap: var(--sp-20) var(--sp-24);
}

.reason {
    display: flex;
    gap: var(--sp-12);
    min-width: 0;
}

.reason__icon {
    width: var(--ac-reason-icon);
    height: var(--ac-reason-icon);
    flex: none;
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--slate);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-icon);
}

.reason h3 {
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
}

.reason p {
    margin-top: var(--cp-line-thick);
    font-size: var(--fs-13);
    color: var(--grey);
    line-height: var(--lh-body);
}

.trade__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-20);
    flex-wrap: wrap;
}

/* Grand bouton de la bande : style en ligne dans le design, ici une classe. */
.trade__cta {
    height: var(--ac-cta-tall-h);
    padding: 0 var(--sp-28);
    font-size: var(--fs-15);
}

/* Indice du compte en attente, à côté de son bouton contour (état que la
   maquette ne dessine pas : composé des éléments des cartes produit). */
.trade__hint {
    font-size: var(--fs-13);
    color: var(--grey);
}

.trade__link {
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
}

.trade__link:hover {
    color: var(--action);
    text-decoration: none;
}

/* Carte de preuve : légèrement inclinée, se redresse au survol. */
.trade__proof {
    position: relative;
    padding: var(--sp-24) 0 var(--sp-32);
    min-width: 0;
}

.price-card {
    border-radius: var(--radius-md);
    padding: var(--sp-20);
    transform: rotate(-1deg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
}

.price-card:hover {
    transform: rotate(0) translateY(calc(-1 * var(--cp-lift)));
    box-shadow: var(--shadow-lift);
}

.price-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
}

.price-card__thumb {
    width: var(--ac-price-thumb);
    height: var(--ac-price-thumb);
    flex: none;
    border-radius: var(--radius);
    background: var(--bench);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.price-card__thumb > span {
    width: var(--ac-price-thumb-in);
    height: var(--ac-price-thumb-in);
    background: var(--placeholder);
    border-radius: var(--radius-xs);
}

.price-card__thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.price-card h3 {
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    line-height: var(--lh-card);
}

.price-card h3 a {
    color: var(--ink);
}

.price-card h3 a:hover {
    color: var(--action);
    text-decoration: none;
}

/* SKU de la carte de preuve : mono, comme toutes les références du thème.
   Les quatre déclarations typographiques viennent de composants.css, où
   elles servaient la carte produit ; la carte produit n'affiche plus de
   SKU visible, la bande compte pro est le seul endroit qui en montre un. */
.price-card__sku {
    margin-top: var(--cp-line-thick);
    min-height: 0;
    font-family: var(--mono);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    color: var(--grey);
}

.price-card__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    padding-top: var(--sp-16);
    border-top: var(--cp-line) solid var(--chrome);
}

.price-card__key {
    font-size: var(--fs-11);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--grey);
}

.price-card__key--trade {
    color: var(--action);
}

.price-card__locked {
    font-size: var(--fs-16);
    color: var(--locked);
    margin-top: var(--sp-4);
}

.price-card__value {
    font-size: var(--fs-24);
    font-weight: var(--fw-medium);
    color: var(--action);
    margin-top: var(--sp-4);
}

/* Badge flottant de la carte de preuve, position du design. */
.float-badge--proof {
    left: calc(-1 * var(--ac-proof-badge-x));
    bottom: 0;
}

/* --------------------------------------------------------------------------
   6. COMMENT ÇA MARCHE (design 10b) — template-parts/accueil/how.php
   -------------------------------------------------------------------------- */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ac-step-min), 1fr));
    gap: var(--sp-16);
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.step {
    padding: var(--sp-24);
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    position: relative;
}

.step__num {
    width: var(--ac-step-num);
    height: var(--ac-step-num);
    border-radius: var(--pill);
    background: var(--pastel-green-bg);
    color: var(--action);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.step h3 {
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
}

.step p {
    font-size: var(--fs-14);
    color: var(--grey);
    line-height: var(--lh-lede);
}

.step__meta {
    font-size: var(--fs-12);
    color: var(--action);
}

/* --------------------------------------------------------------------------
   7. AVIS (design 11) — template-parts/accueil/reviews.php
   -------------------------------------------------------------------------- */
.rating-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-10);
    height: var(--touch);
    padding: 0 var(--sp-16);
    border-radius: var(--pill);
    background: var(--paper);
    border: var(--cp-line) solid var(--line);
    box-shadow: var(--shadow-flat);
}

.rating-pill__score {
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
}

.rating-pill__count {
    font-size: var(--fs-12);
    color: var(--grey);
    white-space: nowrap;
}

.stars {
    display: flex;
    gap: var(--ac-stars-gap);
}

.quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ac-quote-min), 1fr));
    gap: var(--sp-16);
}

.quote {
    border-color: transparent;
    padding: var(--sp-24);
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
}

.quote__mark {
    opacity: .55;
}

/* Teinte du guillemet et de l'avatar par position, comme les styles en
   ligne du design. */
.quote--slate  .quote__mark, .quote--slate  .avatar { color: var(--pastel-slate-ink); }
.quote--green  .quote__mark, .quote--green  .avatar { color: var(--pastel-green-ink); }
.quote--orange .quote__mark, .quote--orange .avatar { color: var(--pastel-orange-ink); }
.quote--slate  .avatar { background: var(--pastel-slate-bg); }
.quote--green  .avatar { background: var(--pastel-green-bg); }
.quote--orange .avatar { background: var(--pastel-orange-bg); }

.quote blockquote {
    font-size: var(--fs-15);
    line-height: var(--lh-lede);
    text-wrap: pretty;
    flex: 1;
}

.quote figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
}

.quote__who {
    display: flex;
    align-items: center;
    gap: var(--sp-10);
}

.avatar {
    width: var(--ac-avatar);
    height: var(--ac-avatar);
    flex: none;
    border-radius: var(--pill);
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote__name {
    display: block;
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
}

.quote__shop {
    display: block;
    font-size: var(--fs-12);
    color: var(--grey);
}

/* --------------------------------------------------------------------------
   8. ARTICLES (design 12) — template-parts/accueil/insights.php
   -------------------------------------------------------------------------- */
.insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ac-insight-min), 1fr));
    gap: var(--sp-16);
}

.article-lead {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--ink);
}

.article-lead__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
}

.article-lead__link:hover {
    color: inherit;
    text-decoration: none;
}

.article-lead__media {
    aspect-ratio: 16 / 9;
    background: var(--bench);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.article-lead__media > span {
    width: 60%;
    height: 60%;
    background: var(--placeholder);
    border-radius: var(--radius-sm);
}

.article-lead__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-lead__body {
    padding: var(--sp-24);
    display: flex;
    flex-direction: column;
    gap: var(--sp-10);
}

.article-lead h3 {
    font-size: var(--fs-20);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h3);
    text-wrap: pretty;
}

.article-lead p {
    font-size: var(--fs-14);
    color: var(--grey);
    line-height: var(--lh-lede);
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    font-size: var(--fs-13);
    color: var(--action);
}

.article-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
}

.article-row {
    padding: var(--sp-16);
    display: flex;
    gap: var(--sp-16);
    align-items: center;
    color: var(--ink);
}

.article-row__link {
    display: flex;
    gap: var(--sp-16);
    align-items: center;
    flex: 1;
    min-width: 0;
    color: inherit;
}

.article-row__link:hover {
    color: inherit;
    text-decoration: none;
}

.article-row__thumb {
    width: var(--ac-thumb);
    height: var(--ac-thumb);
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--bench);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.article-row__thumb > span {
    width: var(--ac-thumb-in);
    height: var(--ac-thumb-in);
    background: var(--placeholder);
    border-radius: var(--radius-xs);
}

.article-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-row__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    min-width: 0;
}

.article-row h3 {
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    line-height: var(--lh-card);
}

/* --------------------------------------------------------------------------
   9. FAQ (design 12b) — template-parts/accueil/faq.php, <details> natifs
   -------------------------------------------------------------------------- */
.faq {
    max-width: var(--ac-faq-max-w);
}

.faq details {
    border-bottom: var(--cp-line) solid var(--line);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
    padding: var(--sp-18) 0;
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

/* Chevron dessiné en CSS : deux bords d'un carré tourné. */
.faq summary::after {
    content: "";
    width: var(--ac-chevron);
    height: var(--ac-chevron);
    flex: none;
    border-right: var(--ac-chevron-line) solid var(--grey);
    border-bottom: var(--ac-chevron-line) solid var(--grey);
    transform: rotate(45deg);
    transition: transform var(--ease);
}

.faq details[open] summary::after {
    transform: rotate(-135deg);
}

.faq p {
    padding: 0 0 var(--sp-18);
    font-size: var(--fs-14);
    color: var(--grey);
    line-height: var(--lh-faq);
    max-width: var(--ac-faq-p-max-w);
}

/* --------------------------------------------------------------------------
   10. POINTS DE RUPTURE
   -------------------------------------------------------------------------- */

/* Grilles de produits de l'accueil : cinq cartes par ligne, sur toute la
   largeur du contenu. La grille elle-même est partagée (composants.css
   section 5a) ; seul le nombre de colonnes est propre à la page, parce
   qu'ici aucune barre de filtres ne prend de place. Points de rupture de
   la maquette de l'accueil : trois colonnes sous 1100 px, écart resserré
   sous 768 px, deux colonnes sous 640 px. */
.product-grid {
    --grid-cols: 5;
}

@media (max-width: 1100px) {

    .product-grid {
        --grid-cols: 3;
    }
}

@media (max-width: 768px) {

    .product-grid {
        gap: var(--sp-12);
    }
}

@media (max-width: 640px) {

    .product-grid {
        --grid-cols: 2;
    }
}

/* Sous 1024 px : le hero passe sur une colonne, texte puis illustration
   puis console ; la plaque s'incline moins. */
@media (max-width: 1024px) {

    .hero__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "art"
            "finder";
        row-gap: var(--sp-28);
        padding: var(--sp-36) var(--gutter) var(--sp-44);
    }

    .hero__art {
        padding: var(--sp-8) var(--sp-8) var(--sp-4);
    }

    .hero__art-panel {
        padding: var(--sp-32) var(--sp-28);
        aspect-ratio: 2 / 1;
        transform: rotate(var(--ac-panel-tilt-sm));
    }

    /* Console : trois champs sur la ligne, le bouton en dessous, sur toute
       la largeur. */
    .finder {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .finder__go {
        grid-column: 1 / -1;
        height: var(--ac-go-h-sm);
    }

    /* Bande compte pro plus serrée, carte de preuve droite. */
    .trade {
        padding: var(--sp-32);
    }

    .trade h2 {
        font-size: var(--ac-trade-h2-tablet);
    }

    .price-card {
        transform: none;
    }
}

/* Sous 768 px : plaque et badges flottants plus serrés, titre à 36 px,
   sélecteur sur une colonne. */
@media (max-width: 768px) {

    .hero__art-panel {
        padding: var(--sp-28) var(--sp-20);
        border-radius: var(--radius-xl);
    }

    .float-badge {
        padding: var(--sp-8) var(--sp-10);
        gap: var(--sp-8);
    }

    .float-badge--stock {
        left: calc(-1 * var(--ac-badge-x-sm));
        bottom: calc(-1 * var(--ac-badge-y-sm));
    }

    .float-badge--ship {
        right: calc(-1 * var(--ac-badge-x-sm));
        top: calc(-1 * var(--ac-badge-y-sm));
    }

    .hero h1 {
        font-size: var(--fs-36);
    }

    /* Console sur une colonne, plus serrée ; menu et ligne de confiance
       ajustés. */
    .finder {
        grid-template-columns: 1fr;
        padding: var(--sp-8);
        gap: var(--sp-8);
        border-radius: var(--radius-lg);
    }

    .finder__field {
        height: var(--ac-field-h-sm);
    }

    .finder__go {
        height: var(--ac-go-h-sm);
    }

    .finder .dd__menu {
        left: calc(-1 * var(--ac-menu-left-sm));
    }

    .finder__trust {
        gap: var(--sp-6) var(--sp-18);
        font-size: var(--fs-12);
    }

    .trade {
        padding: var(--sp-24);
        border-radius: var(--radius-md);
    }

    .trade h2 {
        font-size: var(--fs-24);
    }
}

/* Sous 640 px : badges de confiance sur deux colonnes, chaque badge en
   colonne : la plaque d'icône occupe toute la largeur, sans chevron, le
   texte dessous. */
@media (max-width: 640px) {

    .badges__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-10);
        padding-block: var(--sp-20);
    }

    .badge {
        max-width: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        min-height: 0;
    }

    .badge__plate {
        width: 100%;
        height: var(--ac-plate-h-sm);
        align-self: auto;
        padding: 0 0 0 var(--sp-12);
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        clip-path: none;
        justify-content: flex-start;
    }

    .badge__plate svg {
        width: var(--ac-badge-icon-sm);
        height: var(--ac-badge-icon-sm);
    }

    .badge__body {
        padding: var(--sp-10) var(--sp-12) var(--sp-12);
    }

    .badge h3 {
        font-size: var(--fs-14);
    }

    .badge p {
        font-size: var(--fs-12);
    }

    /* Groupes de produits : deux tuiles par ligne, plus basses (3:2), icône
       et textes plus petits. */
    .groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-12);
    }

    .group {
        gap: var(--sp-8);
    }

    .group__tile {
        aspect-ratio: 3 / 2;
    }

    .group__tile svg {
        width: var(--ac-group-icon-sm);
        height: var(--ac-group-icon-sm);
    }

    .group h3 {
        font-size: var(--fs-14);
    }

    .group p {
        font-size: var(--fs-12);
    }
}