/* ═══════════════════════════════════════════════════════════════════════
   LE DESIGN DU SITE AK CENTER — reparti de zéro le 19/08/2026.

   La mise en page suit la maquette validée (boutique de meubles) : ses
   proportions, ses espacements, ses formes. Les COULEURS, elles, sont celles
   d'AK — décision du 19/08 : « la structure, mais aux couleurs AK ».

   Le design arrive SECTION PAR SECTION. Chaque section a son bloc ci-dessous,
   dans l'ordre de la page, et rien n'est écrit d'avance.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ JETONS ═════════════════════════════════════════════════════════════

   ── LA TRADUCTION DES COULEURS DE LA MAQUETTE ──

   La maquette pose un vert forêt (boutons, pied, titres) et un jaune ambre
   (accents, badges, bannière promotionnelle) sur fond crème.

   Le vert devient une ENCRE chaude, presque noire. Pas un orange foncé : deux
   oranges de valeurs différentes se disputeraient l'attention, et l'accent
   perdrait exactement ce qui en fait un accent. C'est le parti déjà pris dans
   l'application — neutre partout, orange à un seul endroit à la fois.

   Le jaune ambre devient l'ORANGE AK, #F85000, sans transiger : c'est la
   couleur de la maison, la même que l'application et l'ERP.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* L'accent, et lui seul. */
    --orange:        #F85000;
    --orange-fonce:  #D14400;   /* survol, état pressé */
    /* L'ORANGE QUAND IL PORTE DU TEXTE. Mesuré : #F85000 ne donne que 3,42:1
       sur blanc — il échoue dès qu'on le met sur un mot de treize pixels. Et
       #BC3C00, qui passe le jour (5,55), tombe à 3,24 la nuit. Aucune valeur
       fixe ne tient les deux. Ce jeton bascule donc comme --vert et --rouge :
       foncé sur fond clair, vif sur fond sombre. Même teinte, deux clartés. */
    --orange-lisible: #BC3C00;
    --orange-doux:   #FFF1EA;   /* aplats très clairs, pastilles */

    /* L'encre — remplace le vert forêt de la maquette. Chaude, jamais
       bleutée : un gris neutre à côté d'un orange saturé paraît sale. */
    --encre:         #1A1512;
    --encre-2:       #4A413C;
    --g1:            #6B615B;
    --g2:            #9A918B;
    --g3:            #C4BCB6;

    /* Les fonds. Le crème de la maquette, réchauffé du côté de l'orange. */
    --creme:         #F8F5F2;
    --blanc:         #FFFFFF;
    --trait:         #ECE6E1;
    /* Le trait APPUYÉ — bordures de boutons creux, séparateurs à souligner.
       Il manquait : `.ak-cta--creux` le demandait, et une variable inconnue
       invalide TOUTE la déclaration `border`. Le bouton n'avait donc aucune
       bordure, sans la moindre erreur pour le dire. Vu sur la capture. */
    --trait-fort:    #D6CEC7;
    /* LE FILET TEINTÉ D'ORANGE — 16/09/2026, sa demande sur le menu
       « Catégories » : « les barres de séparation légèrement orange ».
       ⚠ LÉGÈREMENT, donc pas `--orange` ni même `--orange-doux` : le premier
       fait un souligné de titre, le second (#FFF1EA) disparaît sur du blanc à
       1 px. C'est l'orange de marque ramené à 22 % sur le crème — on le voit
       comme une chaleur, pas comme un trait de couleur. */
    --trait-or:      #F7D8C7;

    /* LE BLANC QUI NE BASCULE JAMAIS.
       `--blanc` est une SURFACE : en mode sombre elle devient sombre. Mais le
       texte posé sur l'orange, sur l'encre ou sur une photo doit rester blanc
       dans les deux modes — sinon le bouton « Faire réparer » écrirait en noir
       sur orange la nuit. Deux rôles, deux jetons : c'est le piège numéro un
       d'un thème sombre, et il ne se voit qu'une fois les deux modes côte à
       côte. */
    --sur-couleur:   #FFFFFF;

    /* LA SURFACE QUI RESTE SOMBRE DANS LES DEUX MODES.
       Symétrique du piège précédent : `--encre` est une ENCRE, et plusieurs
       éléments s'en servaient comme d'un FOND — le bandeau de contact, les
       pastilles de qualité, les numéros d'étapes, le bouton « Ajouter ».
       En mode sombre l'encre devient claire : ces fonds seraient passés au
       blanc, avec leur texte blanc dessus. Ils prennent donc un jeton qui ne
       bascule pas. */
    --fond-sombre:   #1A1512;
    --fond-sombre-2: #4A413C;

    /* Le verre dépoli des cartouches flottantes et de la barre au
       défilement. Écrit en dur, il restait blanc la nuit — avec du texte
       clair dessus, donc illisible. */
    --verre:         rgba(255, 255, 255, .94);

    /* La hauteur de la barre de navigation. Nommée parce que le héros doit
       remonter dessous d'exactement cette valeur. */
    --h-entete:      84px;

    /* ── LE MOUVEMENT ────────────────────────────────────────────────────
       Trois durées, deux courbes, et rien d'autre. La feuille en comptait
       DOUZE de durée et deux écritures de la même courbe : un site animé au
       coup par coup, où deux gestes identiques ne durent pas pareil. L'œil
       ne sait pas nommer ce défaut, mais il le sent — c'est ce qui sépare
       « ça bouge » de « c'est réglé ».

       · vif    — ce qu'on déclenche soi-même et qui doit répondre tout de
                  suite : survol, pression, changement de couleur.
       · moyen  — ce qui se déplace ou change de taille : cartes qui se
                  soulèvent, panneaux qui s'ouvrent.
       · ample  — ce qui entre en scène : révélations au défilement, zooms
                  d'images.

       Les deux courbes disent la direction : ce qui ARRIVE décélère (on le
       rattrape du regard), ce qui PART accélère (on le laisse filer). */
    --t-vif:         160ms;
    --t-moyen:       260ms;
    --t-ample:       420ms;
    --t-lent:        700ms;   /* révélations et zooms d'images */

    /* ⚠ Ces deux valeurs ne doivent JAMAIS passer par un remplacement en
       masse : un `var(--e-sortie)` dans sa propre déclaration se référence
       lui-même, la variable devient vide, et toutes les transitions
       retombent silencieusement sur `ease`. Constaté à la mesure : la courbe
       calculée valait « ease » partout. */
    --e-sortie:      cubic-bezier(.22, .7, .24, 1);
    --e-entree:      cubic-bezier(.55, 0, .85, .35);

    /* LE FOND DES PHOTOS DU CATALOGUE — mesuré, pas choisi.
       Les quatre coins des photos produit valent #E6E6E6 (230,230,230),
       identique d'un article à l'autre : elles sont normalisées à la source.
       Poser cette teinte derrière une photo `contain` rend le remplissage
       INVISIBLE — c'est ce qui permet un cadre portrait sans rogner le
       produit. */
    --fond-photo:    #E6E6E6;

    /* Les couleurs de sens — distinctes de l'accent, sans quoi « en stock »
       et « promotion » se ressembleraient. */
    --vert:          #17803D;
    --vert-doux:     #E8F5EC;
    --rouge-doux:    #FBE9E7;
    --rouge:         #C4322A;
    /* L'AMBRE — ce qui ATTEND quelque chose : un devis à valider, un
       règlement à faire. Il manquait : le vert dit « c'est bon », le rouge
       « c'est refusé », mais rien ne disait « à vous de jouer ». */
    --ambre:         #9A6700;
    --ambre-doux:    #FFF6E5;

    /* ── LA TRAME ──
       1320 px : la largeur de la maquette une fois ramenée à l'échelle 1.
       À confirmer sur le fichier source, que je n'ai pas encore. */
    --large:         1320px;
    --gouttiere:     24px;

    /* ── L'ÉCHELLE D'ESPACEMENT ──
       Multiples de 4. Une échelle évite les « 13 px ici, 15 px là » qui font
       qu'une page paraît bricolée sans qu'on sache dire pourquoi. */
    --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
    --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;

    /* LA HAUTEUR DE L'EN-TÊTE COLLANT — 14/09/2026.
       `.ak-entete` est en `position: sticky; top: 0` : il SURPLOMBE le contenu.
       Tout ce qui colle en dessous doit donc démarrer après lui, sinon il le
       recouvre. Mesuré au navigateur : 85 px. Écrit ici plutôt que recopié à
       chaque usage — c'était un nombre deviné (104) dans la fiche produit, et
       61 px du visuel passaient sous la barre. */
    --haut-entete: 85px;

    /* ── LES ARRONDIS ──
       La maquette est très arrondie : pastilles pleines sur les boutons,
       coins généreux sur les cartes. */
    --r-carte:   20px;
    --r-champ:   12px;
    --r-pastille: 999px;

    --ombre-carte: 0 1px 2px rgba(26, 21, 18, .04),
                   0 12px 32px -16px rgba(26, 21, 18, .16);

    /* ── LES CINQ TEINTES DE RANG — 12/09/2026 ────────────────────────────
       La boutique explique désormais ses écarts de prix, et la qualité d'une
       pièce se lit en étoiles. Chaque barreau a sa teinte, et CHACUNE VIENT DU
       MOT : l'or de l'Original, le bleu acier du platine, le turquoise du
       diamant, le cuivre de Premium, le gris de la copie. Personne n'a à les
       apprendre, et aucune n'est arbitraire.

       Platinum et Original Recyclé partagent le barreau 4, donc la teinte :
       c'est le NIVEAU qui se colore, pas le nom. Six couleurs pour cinq rangs
       auraient fait croire à six rangs.

       Deux jetons par barreau — l'encre et l'aplat — que la bulle et l'étoile
       qu'elle contient se partagent. */
    --rang5-e: #8A6212;  --rang5-f: #FBF1DC;   /* Original         */
    --rang4-e: #2F5D82;  --rang4-f: #E7EFF7;   /* Platinum, Recyclé */
    --rang3-e: #1B6B6B;  --rang3-f: #E2F1F1;   /* Diamant          */
    --rang2-e: #8A4B24;  --rang2-f: #FAEADF;   /* Premium          */
    --rang1-e: #5E5751;  --rang1-f: #EFEBE7;   /* Copy AAA         */

    /* Le LCD a SA famille, et une seule pour toutes les technologies : elle dit
       « technologie d'affichage », pas « niveau ». Cinq teintes de plus auraient
       fait deux échelles concurrentes sur la même ligne, et aucune des deux
       n'aurait été lue. */
    --lcd-e:   #4B3F8F;  --lcd-f:   #EFECFB;

    /* La garantie est le SEUL des traits du bas qui porte un jugement : il
       rassure, ou il alerte. Les deux autres décrivent. */
    --gar-e:   #1F6B45;
}

/* ═══════════════════════════════════════════════════════════════════════
   LE MODE SOMBRE — 20/08/2026
   ═══════════════════════════════════════════════════════════════════════

   Rien n'est repeint : on redéfinit les MÊMES jetons. C'est tout l'intérêt
   d'avoir posé trente-deux variables plutôt que sept cents couleurs.

   ── TROIS ÉTATS, PAS DEUX ──

   Le visiteur peut n'avoir rien choisi : son système décide alors
   (`prefers-color-scheme`). S'il a choisi, l'attribut `data-theme` sur la
   racine tranche — et il doit gagner DANS LES DEUX SENS, d'où le
   `:not([data-theme="light"])` sur la règle du système. Sans lui, un
   visiteur qui force le mode clair depuis un système sombre resterait
   sombre.

   ── CE QUI NE BASCULE PAS, ET POURQUOI ──

   `--fond-photo` reste clair : les 380 photos du catalogue sont des
   détourages sur blanc. Une tuile sombre derrière un détourage blanc fait
   un trou au milieu de la carte — c'est le défaut qu'on a déjà corrigé une
   fois sur la carte « Écrans & batteries ». Les vraies boutiques gardent
   leur plaque produit claire de nuit ; ce n'est pas un oubli, c'est la
   seule façon d'afficher des photos détourées sur blanc.

   `--orange` ne bouge pas non plus : c'est la marque. Seul `--orange-doux`
   s'assombrit, sinon les pastilles deviendraient des lampes.
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Les couleurs de SENS s'éclaircissent : #17803D sur du sombre
           tombe à 3,6:1, mesuré. Un « En stock » qu'on peine à lire est un
           « En stock » qui ne rassure pas. */
        --vert:         #4ADE80;

        /* LES TEINTES DE RANG BASCULENT AUSSI. Un aplat #FBF1DC derrière un
           texte clair, la nuit, c'est une lampe ; et l'encre #8A6212 sur du
           sombre tombe sous le seuil de lecture. On inverse donc les deux :
           l'encre s'éclaircit, l'aplat s'assombrit, la teinte reste la même. */
        --rang5-e: #E3B961;  --rang5-f: #3A2F14;
        --rang4-e: #8FBEE4;  --rang4-f: #16283A;
        --rang3-e: #79CFCF;  --rang3-f: #122E2E;
        --rang2-e: #E0A176;  --rang2-f: #3A251A;
        --rang1-e: #BDB4AC;  --rang1-f: #2A2622;
        --lcd-e:   #B6AAF2;  --lcd-f:   #241E3D;
        --gar-e:   #63C795;
        --vert-doux:    #10291A;
        --rouge:        #FF7A70;
        --rouge-doux:   #2E1512;
        --ambre:        #F5C451;
        --ambre-doux:   #2B2008;
        --verre:        rgba(26, 22, 20, .92);
        --encre:        #F4F0ED;
        --encre-2:      #CFC6C0;
        --g1:           #A79E97;
        --g2:           #7E7570;
        --g3:           #4C443F;

        --creme:        #100D0C;
        --blanc:        #1A1614;
        --trait:        #2B2522;
        --trait-fort:   #3D3531;
        --trait-or:     #4A2A1A;

        --orange-doux:  #2A1710;
        --orange-lisible: #F85000;   /* 5,25:1 sur --blanc de nuit */
    }
}

:root[data-theme="dark"] {
        /* Les couleurs de SENS s'éclaircissent : #17803D sur du sombre
           tombe à 3,6:1, mesuré. Un « En stock » qu'on peine à lire est un
           « En stock » qui ne rassure pas. */
        --vert:         #4ADE80;

        /* LES TEINTES DE RANG BASCULENT AUSSI. Un aplat #FBF1DC derrière un
           texte clair, la nuit, c'est une lampe ; et l'encre #8A6212 sur du
           sombre tombe sous le seuil de lecture. On inverse donc les deux :
           l'encre s'éclaircit, l'aplat s'assombrit, la teinte reste la même. */
        --rang5-e: #E3B961;  --rang5-f: #3A2F14;
        --rang4-e: #8FBEE4;  --rang4-f: #16283A;
        --rang3-e: #79CFCF;  --rang3-f: #122E2E;
        --rang2-e: #E0A176;  --rang2-f: #3A251A;
        --rang1-e: #BDB4AC;  --rang1-f: #2A2622;
        --lcd-e:   #B6AAF2;  --lcd-f:   #241E3D;
        --gar-e:   #63C795;
        --vert-doux:    #10291A;
        --rouge:        #FF7A70;
        --rouge-doux:   #2E1512;
        --ambre:        #F5C451;
        --ambre-doux:   #2B2008;
        --verre:        rgba(26, 22, 20, .92);
    --encre:        #F4F0ED;
    --encre-2:      #CFC6C0;
    --g1:           #A79E97;
    --g2:           #7E7570;
    --g3:           #4C443F;

    --creme:        #100D0C;
    --blanc:        #1A1614;
    --trait:        #2B2522;
    --trait-fort:   #3D3531;
    --trait-or:     #4A2A1A;

    --orange-doux:  #2A1710;
    --orange-lisible: #F85000;   /* 5,25:1 sur --blanc de nuit */
}

/* ── CE QUE LES JETONS NE SUFFISENT PAS À RÉGLER ── */

/* Les logos des marques sont des tracés SOMBRES sur fond transparent ou
   blanc : de nuit, ils disparaissent. On les inverse, et on annule la
   teinte que l'inversion donnerait aux logos en couleur. */


/* ── CE QUE LES JETONS SEULS NE RÈGLENT PAS — corrigé le 20/08 après audit ──

   Un agent a passé les huit pages dans les deux modes et rapporté douze
   défauts. Tous relèvent du même malentendu : une valeur choisie pour son
   RÔLE en mode clair (« un fond sombre », « un vert de validation ») cesse
   de jouer ce rôle quand tout le reste bascule autour d'elle.

   Le cas d'école : `.ak-cta--sombre` était un bouton sombre sur page claire.
   La nuit, la page devient sombre et le bouton garde sa couleur — mesuré à
   1,008:1 contre le fond, c'est-à-dire invisible. Un bouton « sombre » ne
   veut rien dire ; ce qu'on voulait, c'est un bouton CONTRASTÉ. */
:root[data-theme="dark"] {
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="light"] { color-scheme: light; }

/* Les surfaces qui doivent RESTER contrastées, et non rester sombres. */
:root[data-theme="dark"] .ak-cta--sombre,
:root[data-theme="dark"] .ak-bouton,
:root[data-theme="dark"] .ak-etape span,
:root[data-theme="dark"] .ak-temoin__petale,
:root[data-theme="dark"] .ak-magasin {
    background: var(--encre);
    color: var(--creme);
}
:root[data-theme="dark"] .ak-cta--sombre:hover,
:root[data-theme="dark"] .ak-bouton:hover,
:root[data-theme="dark"] .ak-magasin:hover { background: var(--encre-2); }

/* Le bandeau de contact se confondait avec l'en-tête (1,008:1). Il descend
   d'un cran sous le fond de page pour retrouver son rôle de bande. */
:root[data-theme="dark"] .ak-bandeau { background: #070505; }

/* La frise : les fichiers ont un fond BLANC opaque, et l'inversion le
   rendait noir. Plutôt qu'inverser, on rend la plaque blanche — la même
   réponse que pour les photos du catalogue et les pastilles du héros. */
:root[data-theme="dark"] .ak-marques__lot img {
    filter: none;
    background: var(--sur-couleur);
    border-radius: 8px;
    padding: 4px 8px;
    opacity: 1;
}
:root[data-theme="dark"] .ak-marques__lot img:hover { opacity: 1; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ak-cta--sombre,
    :root:not([data-theme="light"]) .ak-bouton,
    :root:not([data-theme="light"]) .ak-etape span,
    :root:not([data-theme="light"]) .ak-temoin__petale,
    :root:not([data-theme="light"]) .ak-magasin {
        background: var(--encre);
        color: var(--creme);
    }
    :root:not([data-theme="light"]) .ak-cta--sombre:hover,
    :root:not([data-theme="light"]) .ak-bouton:hover,
    :root:not([data-theme="light"]) .ak-magasin:hover { background: var(--encre-2); }
    :root:not([data-theme="light"]) .ak-bandeau { background: #070505; }
    :root:not([data-theme="light"]) .ak-marques__lot img {
        filter: none;
        background: var(--sur-couleur);
        border-radius: 8px;
        padding: 4px 8px;
        opacity: 1;   /* pleine couleur la nuit aussi — 22/08/2026 */
    }
    :root:not([data-theme="light"]) .ak-marques__lot img:hover { opacity: 1; }
}


/* ── CE QUE LA PREMIÈRE SÉRIE DE CORRECTIFS A CASSÉ — 20/08, seconde passe ──
   Une contre-vérification a montré que trois de mes règles de nuit, écrites
   avec une spécificité plus forte, avaient écrasé des intentions du mode
   clair : le bouton en attente redevenait actif, l'étape 1 perdait son
   orange, le survol du bouton ordinaire aussi. Une règle de thème doit
   redéfinir une COULEUR, jamais annuler une distinction. */
/* ⚠ CE BLOC EST HORS DE SA REQUÊTE MÉDIA.
   `:root:not([data-theme="light"])` matche aussi quand AUCUN thème n'est
   choisi — c'est-à-dire pour la quasi-totalité des visiteurs, de jour. Avec
   0-3-0 de spécificité contre 0-1-0, il écrase la règle de base : changer la
   couleur du bouton en attente plus bas dans la feuille n'avait aucun effet.
   Constaté le 24/08 en mesurant le rendu (#9A918B au lieu du #6B615B posé).
   On aligne donc la valeur ici aussi ; déplacer le bloc dans la requête média
   serait le vrai remède, mais il porte d'autres règles et cela dépasse cette
   section. */
:root[data-theme="dark"] .ak-magasin--attente,
:root:not([data-theme="light"]) .ak-magasin--attente {
    background: transparent;
    color: var(--g1);
    border: 1.5px dashed var(--trait-fort);
}
:root[data-theme="dark"] .ak-magasin--attente:hover,
:root:not([data-theme="light"]) .ak-magasin--attente:hover { background: transparent; }

:root[data-theme="dark"] .ak-etape:first-child span,
:root:not([data-theme="light"]) .ak-etape:first-child span {
    background: var(--orange);
    color: var(--sur-couleur);
}

:root[data-theme="dark"] .ak-bouton:hover,
:root:not([data-theme="light"]) .ak-bouton:hover { background: var(--orange); color: var(--sur-couleur); }

/* Le bandeau : 1,13:1 contre l'en-tête, c'est mieux que 1,008 mais ça ne
   fait toujours pas une frontière. Un filet la dessine, lui. */
:root[data-theme="dark"] .ak-bandeau,
:root:not([data-theme="light"]) .ak-bandeau { border-bottom: 1px solid var(--trait); }

/* La frise reste EN COULEUR la nuit aussi — 22/08/2026. La règle qui la
   grisait a été retirée : la plaque blanche posée sous chaque logo en mode
   sombre suffit à les détacher du fond, sans leur retirer ce qui les rend
   reconnaissables. */

/* Le chevron du tri est une image écrite en dur, tracée en #1A1512 : elle
   disparaissait sur un champ sombre. Une seconde image, claire, pour la
   nuit. */
:root[data-theme="dark"] .ak-tri select,
:root:not([data-theme="light"]) .ak-tri select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F4F0ED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* LE LOGO AK CHANGE DE FICHIER, IL NE S'INVERSE PAS.
   Un `invert()` sur la marque tuerait l'orange. La version blanche existe
   déjà — elle avait été faite pour l'ancien pied sombre — on s'en sert. */
.ak-logo--nuit { display: none; }
:root[data-theme="dark"] .ak-logo--jour { display: none; }
:root[data-theme="dark"] .ak-logo--nuit { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ak-logo--jour { display: none; }
    :root:not([data-theme="light"]) .ak-logo--nuit { display: block; }
}
/* …sauf au survol de la frise, où la marque reprend ses couleurs : c'est le
   geste qu'on a construit, il ne doit pas se perdre la nuit. */

/* Le bouton de bascule, dans l'en-tête. */
.ak-theme {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: none;
    border-radius: var(--r-pastille);
    background: transparent;
    color: var(--encre);
    cursor: pointer;
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-theme:hover { background: var(--creme); color: var(--orange); }
.ak-theme .ak-lune { display: none; }
:root[data-theme="dark"] .ak-theme .ak-lune { display: block; }
:root[data-theme="dark"] .ak-theme .ak-soleil { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ak-theme .ak-lune { display: block; }
    :root:not([data-theme="light"]) .ak-theme .ak-soleil { display: none; }
}



/* ═══ SOCLE ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* Autorise l'animation vers une hauteur `auto` — utilisé par le dépliage
   des questions. Sans effet là où ce n'est pas reconnu. */
:root { interpolate-size: allow-keywords; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /* URBANIST — une géométrique, comme la maquette. Inter est humaniste :
       ses titres n'avaient pas la même allure. Le repli reste la police
       système, affichée le temps du chargement (`font-display: swap`). */
    font-family: Urbanist, system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--encre);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
    /* Aucune page ne doit défiler latéralement — c'est le défaut qui se voit
       le plus sur un téléphone et qu'on remarque le moins en le construisant.
     *
     * `clip` ET NON `hidden`, et ce n'est pas un détail : `overflow: hidden`
     * fait du corps un conteneur de défilement, ce qui CASSE `position:
     * sticky` sur ses descendants — l'en-tête aurait cessé de tenir en haut
     * de l'écran, sans rien dans la console pour l'expliquer. `clip` coupe le
     * débordement sans créer ce conteneur. */
    overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
    margin: 0;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* La trame : un seul conteneur, partout. Des largeurs recopiées section par
   section finissent toujours par diverger d'un pixel ou deux, et les blocs ne
   s'alignent plus verticalement. */
.ak-large {
    width: 100%;
    max-width: calc(var(--large) + var(--gouttiere) * 2);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}

/* ═══ ACCESSIBILITÉ ══════════════════════════════════════════════════════ */

/* Invisible tant qu'on ne l'atteint pas au clavier. Sans lui, naviguer au
   clavier oblige à traverser tout le menu à chaque page. */
.saut-au-contenu {
    position: absolute;
    left: -9999px;
}
.saut-au-contenu:focus {
    left: var(--e4);
    top: var(--e4);
    z-index: 999;
    padding: var(--e3) var(--e5);
    background: var(--fond-sombre);
    color: var(--sur-couleur);
    border-radius: var(--r-champ);
}

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Lu par les lecteurs d'écran, invisible à l'œil. */
.lecture-seule {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 1 · LE BANDEAU DE CONTACT
   ═══════════════════════════════════════════════════════════════════════

   Trois zones, comme la maquette : un contact à gauche, un message au
   centre, un troisième bloc à droite.

   ── CE QUI CHANGE PAR RAPPORT À LA MAQUETTE, ET POURQUOI ──

   La maquette met « Sign up and GET 25% OFF your first order » au centre.
   AK n'a pas cette remise, et ce site a déjà retiré trois éléments du
   gabarit d'origine parce qu'ils faisaient semblant — un compte à rebours
   sans échéance, une infolettre qui ne collectait rien. On n'en réintroduit
   pas un quatrième. Le centre porte donc ce qui est vrai et vaut d'être dit :
   le diagnostic gratuit et la garantie.

   À droite, la maquette aligne des icônes de réseaux sociaux. AK n'en a
   aucun d'enregistré : une icône qui ne mène nulle part est le même défaut.
   La place tient les HORAIRES, qui occupent le même poids visuel et
   renseignent vraiment. Les icônes reviendront le jour où les comptes
   existeront.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-bandeau {
    background: var(--fond-sombre);
    color: var(--sur-couleur);
    font-size: 13px;
    line-height: 1.4;
}

.ak-bandeau > .ak-large {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e5);
    min-height: 44px;
}

.ak-bandeau a { color: inherit; }

.ak-bandeau__contact,
.ak-bandeau__horaires {
    display: flex;
    align-items: center;
    gap: var(--e2);
    white-space: nowrap;
    color: rgba(255, 255, 255, .78);
}

.ak-bandeau__contact strong {
    color: var(--sur-couleur);
    font-weight: 600;
}

.ak-bandeau__contact svg,
.ak-bandeau__horaires svg { flex: none; opacity: .7; }

/* Le message du centre. Il disparaît avant les deux autres quand la place
   manque : le numéro de téléphone est ce qu'on vient chercher en premier. */
.ak-bandeau__mot {
    display: flex;
    align-items: center;
    gap: var(--e3);
    text-align: center;
}

.ak-bandeau__mot em {
    font-style: normal;
    color: rgba(255, 255, 255, .78);
}

/* Le seul orange du bandeau — un lien, pas un bouton : à cette taille, un
   bouton plein ferait une tache et volerait l'attention au menu juste
   dessous. */
.ak-bandeau__lien {
    color: var(--orange);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.ak-bandeau__lien:hover { color: var(--sur-couleur); }

@media (max-width: 1100px) {
    .ak-bandeau__horaires { display: none; }
}
@media (max-width: 760px) {
    .ak-bandeau > .ak-large { justify-content: center; }
    .ak-bandeau__mot { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 2 · L'EN-TÊTE
   ═══════════════════════════════════════════════════════════════════════

   Refait le 19/08/2026 sur sa demande : « le logo AK sans écriture, l'en-tête
   pro avec les mêmes icônes que l'image ».

   Trois zones comme la maquette — la marque, le menu, les quatre actions.
   Fond blanc, un trait fin en bas, et la barre reste en haut au défilement :
   sur une boutique, atteindre le panier ne doit jamais demander de remonter.

   ── LA MARQUE SEULE ──

   Le logo à texte (620 × 120, « AK CENTER · RÉPARATION · PIÈCES ») est
   remplacé par la marque nue. Elle est plus lisible à 40 px de haut, elle ne
   se déforme pas au téléphone, et elle laisse au menu la place qu'il lui
   faut. Le fichier d'origine pesait 488 Ko : il a été rogné sur ses pixels
   utiles, recentré dans un carré et décliné en 96 et 192 px.

   ── LES QUATRE ICÔNES ──

   Recherche, favoris, panier, compte — les mêmes que la maquette, au même
   endroit, dans le même style : trait fin, sans cercle autour, sans aplat.
   Elles sont dessinées dans le HTML : le thème retiré chargeait une police
   d'icônes entière pour une poignée de glyphes.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-entete {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--blanc);
    border-bottom: 1px solid var(--trait);
    transition: background var(--t-moyen) var(--e-sortie), border-color var(--t-moyen) var(--e-sortie), box-shadow var(--t-moyen) var(--e-sortie);
}

/* ── TRANSPARENT EN HAUT, BLANC DÈS QU'ON DÉFILE ──
   Uniquement sur les pages qui commencent par un héros teinté (`ak-corps-heros`) :
   ailleurs, la barre surplomberait du contenu et deviendrait illisible.

   La classe `est-defile` est posée par un script de six lignes ; en son
   absence — script bloqué, navigateur ancien — la barre reste simplement
   blanche, c'est-à-dire l'état d'avant. Un effet décoratif ne doit jamais
   pouvoir rendre une navigation invisible. */
body.ak-corps-heros .ak-entete {
    background: transparent;
    border-bottom-color: transparent;
}
/* Transparent ne suffit pas : sous la barre il y avait le fond du corps,
   blanc, et non le héros — la barre restait donc visiblement plus claire.
   Le héros est REMONTÉ sous elle, et rend en padding la hauteur qu'il prend
   en marge. Vu à l'écran ; aucun outil ne l'aurait signalé. */
body.ak-corps-heros .ak-heros {
    margin-top: calc(var(--h-entete) * -1);
    padding-top: var(--h-entete);
}
body.ak-corps-heros .ak-entete.est-defile {
    background: var(--verre);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--trait);
    box-shadow: 0 6px 24px -18px rgba(26,21,18,.5);
}

.ak-entete > .ak-large {
    display: flex;
    align-items: center;
    gap: var(--e6);
    min-height: 84px;
}

/* ── La marque ── */
.ak-entete__logo {
    flex: none;
    display: block;
    line-height: 0;   /* sans quoi la ligne de base ajoute 4 px sous l'image */
}
.ak-entete__logo img {
    /* 56 px dans une barre de 84 : la marque respire sans toucher les bords.
       Elle était à 42 — trop discrète pour une marque qui porte seule
       l'identité, puisqu'il n'y a plus de texte à côté d'elle. */
    width: 56px;
    height: 56px;
    transition: transform var(--t-vif) var(--e-sortie);
}
.ak-entete__logo:hover img { transform: scale(1.06); }

/* ── Le menu ── */
.ak-menu {
    display: flex;
    align-items: center;
    gap: var(--e6);
    margin-inline: auto;   /* centré, quelles que soient les largeurs autour */
}

.ak-menu a {
    position: relative;
    padding-block: var(--e3);
    font-size: 15px;
    font-weight: 500;
    color: var(--encre-2);
    white-space: nowrap;
    transition: color var(--t-vif) var(--e-sortie);
}
.ak-menu a:hover { color: var(--encre); }

/* LA PAGE COURANTE SE SIGNALE PAR SON POIDS, PAS PAR UN TRAIT.
 *
 * Elle portait un soulignement orange. Retiré le 19/08/2026 : dans un menu
 * dont les entrées sont grises, la SEULE qui soit noire et grasse se
 * distingue déjà sans qu'on ait à tracer quoi que ce soit. Le trait faisait
 * un second signal pour la même information — et il attirait l'œil sur la
 * page où l'on est déjà, plutôt que sur celles où l'on peut aller. */
.ak-menu a[aria-current="page"] { color: var(--encre); font-weight: 700; }

/* ── Les quatre actions ──
   Espacées serré, comme la maquette : elles forment un GROUPE, et un écart
   trop large les ferait lire comme quatre éléments sans rapport. */
.ak-actions {
    display: flex;
    align-items: center;
    gap: var(--e1);
    flex: none;
}

.ak-action {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    border-radius: var(--r-pastille);
    color: var(--encre);
    cursor: pointer;
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-action:hover { background: var(--creme); color: var(--orange); }

/* Le compteur du panier. Il ne s'affiche QUE s'il y a quelque chose dedans —
   un « 0 » permanent est du bruit, et il fait douter de ce qu'on a mis. */
.ak-action__compte {
    position: absolute;
    top: 4px; right: 2px;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    display: grid;
    place-items: center;
    background: var(--orange);
    color: var(--sur-couleur);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--r-pastille);
    border: 2px solid var(--blanc);
}

/* ── LA RECHERCHE ──
   Une ICÔNE dans la barre ; le champ se déplie dessous au clic — sa demande
   du 19/08, après avoir essayé le champ posé en permanence.

   Le champ garde l'allure de sa capture : pastille grise, loupe dedans à
   gauche, sans bordure au repos. Ce qui change, c'est OÙ il vit — replié,
   il ne dispute plus sa place au menu, qui tient alors entier bien plus bas
   en largeur.

   Piloté par une case à cocher : aucun JavaScript, donc la recherche
   s'ouvre même si un script casse plus haut dans la page. */
#ak-recherche-ouverte {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
}
#ak-recherche-ouverte:focus-visible ~ .ak-entete .ak-recherche__bouton {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

.ak-recherche {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    /* La gouttière EST portée par le panneau, pas par le formulaire : sans
       elle, le champ touchait les bords de l'écran dès que la fenêtre passait
       sous 1 368 px, et ne s'alignait plus sur le logo ni sur le menu. */
    padding: var(--e4) var(--gouttiere);
    background: var(--blanc);
    border-bottom: 1px solid var(--trait);
    box-shadow: var(--ombre-carte);
    /* Vraiment fermé : `display:none` le retire de l'ordre de tabulation, ce
       qu'une simple opacité ne fait pas. */
    display: none;
}
#ak-recherche-ouverte:checked ~ .ak-entete .ak-recherche { display: block; }

/* Le formulaire s'aligne sur la trame de la page, pas sur les bords de
   l'écran : sans ce conteneur, le champ courait d'un bord à l'autre et ne
   tombait plus sous rien. */
.ak-recherche form {
    display: flex;
    align-items: center;
    gap: var(--e2);
    width: 100%;
    max-width: var(--large);
    margin-inline: auto;
    height: 52px;
    padding-inline: var(--e5) var(--e3);
    background: var(--creme);
    border: 1.5px solid transparent;
    border-radius: var(--r-pastille);
    transition: border-color var(--t-vif) var(--e-sortie), background var(--t-vif) var(--e-sortie);
}
.ak-recherche form:focus-within {
    background: var(--blanc);
    border-color: var(--g3);
}

/* La loupe est DANS le champ, à gauche. Un repère, pas une commande : le
   formulaire se valide avec Entrée. */
.ak-recherche__loupe {
    flex: none;
    color: var(--g1);
    display: grid;
    place-items: center;
}

.ak-recherche input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    /* 16 px : en dessous, iOS zoome sur le champ à la mise au point. */
    font-size: 16px;
    color: var(--encre);
}
.ak-recherche input::placeholder { color: var(--g2); }

/* Le bouton d'envoi n'existe qu'au clavier : à l'œil, la pastille se valide
   avec Entrée. Le retirer complètement empêcherait d'envoyer sans souris. */
.ak-recherche button {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
}
.ak-recherche button:focus-visible {
    position: static;
    width: auto; height: 38px;
    margin: 0; padding-inline: var(--e5);
    clip-path: none;
    border: none;
    border-radius: var(--r-pastille);
    background: var(--orange);
    color: var(--sur-couleur);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* L'icône bascule : loupe fermée, croix ouverte — on voit comment refermer. */
.ak-recherche__bouton .ak-ico-fermer { display: none; }
#ak-recherche-ouverte:checked ~ .ak-entete .ak-recherche__bouton .ak-ico-loupe { display: none; }
#ak-recherche-ouverte:checked ~ .ak-entete .ak-recherche__bouton .ak-ico-fermer { display: block; }
#ak-recherche-ouverte:checked ~ .ak-entete .ak-recherche__bouton { color: var(--orange); }

/* ── Le menu au téléphone ── */
.ak-burger { display: none; }

/* LA CASE QUI PILOTE LE MENU — cachée à l'œil, PAS au clavier.
 *
 * Écrite d'abord en `display:none`, ce qui la retirait de l'ordre de
 * tabulation : un `<label>` n'est pas focalisable, donc plus personne ne
 * pouvait ouvrir le menu au clavier. Elle est maintenant simplement
 * escamotée — on peut l'atteindre avec Tab et la basculer avec Espace. */
#ak-menu-ouvert {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
}
#ak-menu-ouvert:focus-visible ~ .ak-entete .ak-burger {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

/* ── LES LARGEURS INTERMÉDIAIRES ──
   La recherche étant repliée en icône à toutes les largeurs, il ne reste que
   le menu à ménager : on resserre ses écarts avant de le faire disparaître
   derrière un bouton. C'est lui qui dit ce que le site propose, il part en
   dernier. */
@media (max-width: 1120px) {
    .ak-entete > .ak-large { gap: var(--e5); }
    .ak-menu { gap: var(--e5); }
}

@media (max-width: 699.98px) {
    .ak-entete > .ak-large { min-height: 68px; gap: var(--e3); }

    .ak-burger {
        display: grid;
        place-items: center;
        width: 44px; height: 44px;
        border: none; background: transparent;
        border-radius: var(--r-pastille);
        cursor: pointer;
        order: -1;              /* à gauche de la marque */
    }

    /* `auto` des DEUX côtés : la marque se centre entre le bouton du menu et
       les actions. Écrit `auto 0`, elle était plaquée contre les icônes. */
    .ak-entete__logo { margin-inline: auto; }
    /* 44 px au téléphone, dans une barre de 68 : le même rapport qu'en
       grand écran. Une taille figée aurait mangé la barre. */
    .ak-entete__logo img { width: 44px; height: 44px; }

    /* ANCRÉ SOUS L'EN-TÊTE, PAS À UNE DISTANCE FIXE DU HAUT.
     * Écrit d'abord `position: fixed; top: 68px`, ce qui ne valait que
     * l'en-tête collé en haut. En haut de page, le bandeau occupe encore ses
     * 44 px : le menu recouvrait alors l'en-tête. */
    .ak-menu {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: var(--e2) var(--gouttiere) var(--e5);
        background: var(--blanc);
        border-bottom: 1px solid var(--trait);
        box-shadow: var(--ombre-carte);
        /* Fermé par défaut, et vraiment fermé : `display:none` le retire de
           l'ordre de tabulation, ce qu'une simple opacité ne fait pas. */
        display: none;
    }
    /* `.ak-entete` et non `.ak-large` : la case est sœur de l'EN-TÊTE, et
       `.ak-large` vit à l'intérieur. Le sélecteur d'origine ne désignait
       rien — le menu ne s'ouvrait jamais. */
    #ak-menu-ouvert:checked ~ .ak-entete .ak-menu { display: flex; }

    /* LES DEUX PANNEAUX TOMBENT AU MÊME ENDROIT — `top: 100%` de l'en-tête.
       Ouverts ensemble, ils se superposaient. Deux cases indépendantes ne
       peuvent pas se fermer l'une l'autre en CSS ; on tranche donc par
       l'ordre : la recherche, ouverte, masque le menu. Cette règle vient
       APRÈS celle du dessus, à spécificité égale — c'est elle qui gagne. */
    #ak-recherche-ouverte:checked ~ .ak-entete .ak-menu { display: none; }

    .ak-menu a {
        padding-block: var(--e4);
        font-size: 16px;
        border-bottom: 1px solid var(--trait);
    }
    .ak-menu a:last-child { border-bottom: none; }
    .ak-menu a[aria-current="page"]::after { display: none; }
    .ak-menu a[aria-current="page"] { color: var(--orange); }

    .ak-action { width: 40px; height: 40px; }

    /* Le repli de la recherche est déjà posé à 1040 px — ici on n'ajuste que
       ce qui change avec le bouton du menu. */
}

/* ═══════════════════════════════════════════════════════════════════════
   LE BANDEAU DE TITRE DE PAGE
   ═══════════════════════════════════════════════════════════════════════

   Le gris clair de la maquette, le titre au centre, le fil d'Ariane dessous.
   Il sert toutes les pages intérieures — boutique, contact, favoris — et non
   la seule vitrine : une page sur deux qui aurait son propre en-tête ferait
   un site qui change de règle en cours de route.

   Le semis de points de la maquette est dessiné en CSS et non en image : il
   suit la couleur du fond, ne pèse rien, et ne se pixellise pas.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-titre-page {
    position: relative;
    overflow: hidden;
    background: var(--creme);
    padding-block: var(--e9) var(--e8);
    text-align: center;
}

.ak-titre-page h1 {
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -.03em;
}

.ak-fil {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--e2);
    margin-top: var(--e3);
    font-size: 14.5px;
    color: var(--g1);
}
.ak-fil a:hover { color: var(--orange); }
.ak-fil [aria-current] { color: var(--encre); font-weight: 600; }
.ak-fil .sep { color: var(--g3); }

/* Les deux semis de points, à gauche et à droite du titre. `radial-gradient`
   répété : aucun fichier, aucune requête, et la taille suit le zoom. */
.ak-titre-page::before,
.ak-titre-page::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 190px;
    height: 120px;
    transform: translateY(-50%);
    background-image: radial-gradient(var(--g3) 1.6px, transparent 1.6px);
    background-size: 18px 18px;
    opacity: .55;
    pointer-events: none;
}
.ak-titre-page::before { left: -30px; }
.ak-titre-page::after  { right: -30px; }

@media (max-width: 860px) {
    .ak-titre-page { padding-block: var(--e7) var(--e6); }
    /* Les semis disparaissent : à cette largeur ils passent sous le titre et
       le rendent illisible. */
    .ak-titre-page::before,
    .ak-titre-page::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LA VITRINE — colonne de filtres + grille
   ═══════════════════════════════════════════════════════════════════════ */

.ak-vitrine {
    display: grid;
    grid-template-columns: 236px 1fr;
    gap: var(--e8);
    align-items: start;
    padding-block: var(--e8) var(--e9);
}

/* ── LA COLONNE DE FILTRES ──
   Collante : sur une grille de douze produits, elle sortirait de l'écran dès
   la deuxième rangée, et il faudrait remonter pour changer d'avis. */
/* TOUT LE FILTRE TIENT SUR LA PAGE — sa demande du 19/08/2026.
 *
 * La colonne était bornée en hauteur et défilait DANS elle-même. Deux
 * défilements imbriqués : celui de la page et celui de la colonne. Le second
 * ne se voit pas — sa barre est masquée — et il cachait des options. Constaté
 * sur la capture : la liste des rayons s'arrêtait à sept sur neuf, « Tablet
 * Battery » et « Tablet Screen » étaient invisibles, et rien ne le signalait.
 *
 * Elle reste COLLANTE : elle suit la lecture de la grille sans qu'on ait à
 * remonter pour changer d'avis. Quand elle est plus haute que l'écran, elle
 * défile simplement avec la page — on finit toujours par tout voir. */
.ak-filtres {
    position: sticky;
    top: 104px;   /* la hauteur de l'en-tête collé, plus une respiration */
}

.ak-filtres > h2 {
    font-size: 19px;
    font-weight: 700;
    padding-bottom: var(--e4);
    border-bottom: 1px solid var(--trait);
}

.ak-filtre {
    padding-block: var(--e5);
    border-bottom: 1px solid var(--trait);
}
.ak-filtre:last-child { border-bottom: none; }

.ak-filtre > h3 {
    font-size: 15.5px;
    font-weight: 700;
    margin-bottom: var(--e3);
}

/* La liste des cases. Plus de plafond de hauteur : voir `.ak-filtres`.
   Elle est de toute façon COURTE, parce qu'elle est dynamique — les options
   qui ne ramènent rien disparaissent d'elles-mêmes. C'est le filtrage qui
   raccourcit la liste, pas une fenêtre qui la cache. */
.ak-filtre__liste {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* CHAQUE CASE EST UN LIEN, pas une case à cocher.
 *
 * C'est ce qui fait tenir la colonne SANS JavaScript : cliquer change
 * l'adresse, le serveur refiltre, et la sélection se partage, se met en
 * favori, se défait avec le bouton Retour. Une vraie case aurait exigé un
 * script pour envoyer le formulaire, et la page serait morte sans lui. */
.ak-case {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: 5px 0;
    font-size: 14.5px;
    color: var(--encre-2);
    transition: color var(--t-vif) var(--e-sortie);
}
.ak-case:hover { color: var(--encre); }

.ak-case__boite {
    flex: none;
    width: 17px; height: 17px;
    border: 1.5px solid var(--g3);
    border-radius: 5px;
    display: grid;
    place-items: center;
    color: transparent;
    transition: background var(--t-vif) var(--e-sortie), border-color var(--t-vif) var(--e-sortie);
}
.ak-case[aria-pressed="true"] .ak-case__boite {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--sur-couleur);
}
.ak-case[aria-pressed="true"] { color: var(--encre); font-weight: 600; }

.ak-case__nombre {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--g2);
    font-variant-numeric: tabular-nums;
}

/* ═══ LES CARACTÉRISTIQUES DU RAYON — 14/09/2026 ═════════════════════════
 *
 * Sa demande : « la page de catégorie doit filtrer sur la base des
 * spécifications et champs de la catégorie ». Le panneau se coupe donc en
 * deux : au-dessus ce qui vaut pour n'importe quel article, en dessous ce que
 * SEUL ce rayon sait dire.
 *
 * LE TRAIT PORTE TOUTE L'IDÉE, et c'est pour ça qu'il est en couleur : sans
 * lui, on ne comprend pas pourquoi la colonne change en changeant de rayon. */
.ak-filtre--bascule {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-block: var(--e4) 0;
    border-bottom: none;
}
.ak-bascule__trait {
    flex: none;
    width: 22px; height: 2px;
    border-radius: 2px;
    background: var(--orange);
}
.ak-bascule__mot {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--orange);
}

/* LES COLORIS SONT DES PASTILLES, PAS UNE LISTE.
 *
 * Vingt coloris en cases à cocher feraient une colonne plus haute que la
 * grille qu'elle filtre. Ils sont regroupés par COULEUR DE BASE côté ERP —
 * « un technicien demande un écran noir, jamais un écran Phantom Black » —
 * ce qui ramène trente-quatre entrées à vingt. */
.ak-teintes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.ak-teinte {
    display: grid;
    place-items: center;
    gap: 3px;
}
.ak-teinte__rond {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--trait);
    box-shadow: inset 0 0 0 2px #fff;
    transition: box-shadow var(--t-vif) var(--e-sortie);
}
/* Un coloris sans code hexa se dessine en damier : la donnée MANQUE, et un
   rond gris se lirait comme « gris ». Trois coloris sont dans ce cas. */
.ak-teinte--sans .ak-teinte__rond {
    background: repeating-conic-gradient(var(--trait) 0 25%, #fff 0 50%) 50% / 8px 8px;
}
.ak-teinte[aria-pressed="true"] .ak-teinte__rond {
    border-color: var(--orange);
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--orange);
}
.ak-teinte__n {
    font-size: 10px;
    color: var(--g2);
    font-variant-numeric: tabular-nums;
}
.ak-teinte[aria-pressed="true"] .ak-teinte__n { color: var(--encre); font-weight: 700; }

/* Le nom du coloris reste lisible par les lecteurs d'écran : une pastille
   muette n'annoncerait qu'un nombre. */
.ak-caché {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* La pastille de couleur devant une marque — le seul rappel visuel possible
   quand on n'a pas de logo à cette taille. */
.ak-case__point {
    flex: none;
    width: 10px; height: 10px;
    border-radius: 99px;
    background: var(--g3);
}

/* ── LE BOUTON ORDINAIRE ──
   Né comme le « Appliquer » du filtre Prix, retiré le 19/08/2026. Il sert
   maintenant les boutons de la grille vide (« Réessayer », « Voir tout le
   catalogue ») et porte donc un nom qui ne renvoie plus à un filtre disparu. */
.ak-bouton {
    display: inline-block;
    height: 44px;
    padding-inline: var(--e6);
    border: none;
    border-radius: var(--r-pastille);
    background: var(--fond-sombre);
    color: var(--sur-couleur);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 44px;
    cursor: pointer;
    transition: background var(--t-vif) var(--e-sortie);
}
.ak-bouton:hover { background: var(--orange); }

/* ── L'APPEL À L'ACTION — la famille de boutons de TOUT le site ──
   Elle vit ICI, avec les composants partagés, et non dans la section qui l'a
   vue naître.

   Elle était née dans le bloc du héros ; refaire le héros le 19/08 l'a
   emportée avec lui, et sept pages ont perdu leurs boutons d'un coup — la
   commande, le panier, la connexion, la fiche produit. Aucune erreur, aucun
   journal : un bouton sans règle reste un lien, simplement nu. Un composant
   utilisé partout ne doit jamais dépendre de la section où il est apparu. */
.ak-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    /* 48 et non 54 : à sa demande, le bouton était trop grand — il pesait
       plus lourd que le titre au lieu de le suivre. */
    height: 48px;
    padding-inline: var(--e5);
    border: none;
    border-radius: var(--r-pastille);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie), border-color var(--t-vif) var(--e-sortie), box-shadow var(--t-vif) var(--e-sortie), transform var(--t-vif) var(--e-sortie);
}
/* L'OMBRE DU BOUTON, comme celle de la photo — sa demande.
   Teintée d'orange, pas grise : une ombre neutre sous un aplat saturé
   paraît sale. Elle est basse et large, donc lue comme de la lumière,
   pas comme un contour. */
.ak-cta--plein {
    background: var(--orange);
    color: var(--sur-couleur);
    box-shadow: 0 10px 22px -14px rgba(248,80,0,.7);
}
.ak-cta--plein:hover {
    background: var(--orange-fonce);
    box-shadow: 0 16px 30px -14px rgba(248,80,0,.78);
    transform: translateY(-1px);
}

/* Le second bouton est CREUX, jamais d'une seconde couleur pleine : deux
   aplats côte à côte se disputent le clic, et on ne sait plus lequel est
   l'action principale. */
.ak-cta--creux {
    background: transparent;
    color: var(--encre);
    border: 1.5px solid var(--trait-fort);
}
.ak-cta--creux:hover { border-color: var(--encre); background: var(--blanc); }

/* Pleine largeur — le bouton qui termine une colonne : « Commander »,
   « Recevoir le code », « Valider ma commande ». */
.ak-cta--large {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: var(--e5);
}

/* ── LA BARRE D'OUTILS ── */
.ak-outils {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e5);
    flex-wrap: wrap;
    margin-bottom: var(--e5);
}
.ak-outils__compte { font-size: 14.5px; color: var(--g1); }
.ak-outils__compte strong { color: var(--encre); font-weight: 600; }

.ak-tri {
    display: flex;
    align-items: center;
    gap: var(--e3);
    font-size: 14.5px;
    color: var(--g1);
}
.ak-tri select {
    height: 44px;
    padding-inline: var(--e4) var(--e7);
    border: 1.5px solid var(--trait);
    border-radius: var(--r-pastille);
    background: var(--blanc);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--encre);
    cursor: pointer;
    outline: none;
    /* Le chevron du système varie d'un navigateur à l'autre : on le dessine. */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A1512' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--e4) center;
}
.ak-tri select:focus { border-color: var(--g3); }

/* ── LES FILTRES ACTIFS ──
   Des pastilles orange, comme la maquette. Chacune est un lien qui RETIRE son
   filtre : c'est le seul endroit où l'on voit d'un coup ce qui restreint la
   liste, et le seul où l'on peut le défaire sans chercher dans la colonne. */
.ak-actifs {
    display: flex;
    align-items: center;
    gap: var(--e2);
    flex-wrap: wrap;
    margin-bottom: var(--e5);
}
.ak-actifs__titre {
    font-size: 14px;
    font-weight: 600;
    color: var(--g1);
    margin-right: var(--e2);
}
.ak-actif {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    height: 32px;
    padding-inline: var(--e4) var(--e3);
    background: var(--orange);
    color: var(--sur-couleur);
    border-radius: var(--r-pastille);
    font-size: 13px;
    font-weight: 600;
    transition: background var(--t-vif) var(--e-sortie);
}
.ak-actif:hover { background: var(--orange-fonce); }
.ak-actif svg { opacity: .85; }

.ak-actifs__vider {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--encre);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ak-actifs__vider:hover { color: var(--orange); }

/* ═══════════════════════════════════════════════════════════════════════
   LA GRILLE DE PRODUITS
   ═══════════════════════════════════════════════════════════════════════

   Trois colonnes, comme la maquette. `auto-fill` avec un minimum plutôt
   qu'un nombre figé : la grille se réorganise seule aux largeurs
   intermédiaires, sans qu'on ait à poser un palier par taille d'écran.
   ═══════════════════════════════════════════════════════════════════════ */

/* LE NOMBRE DE COLONNES EST DÉCIDÉ, PAS SUBI — sa demande du 19/08/2026 :
   quatre sur ordinateur, trois sur tablette, deux sur téléphone.

   `repeat(N, …)` et non `auto-fill` : ce dernier fabriquait le nombre de
   colonnes qui tenait dans la largeur — quatre ici, trois là — sans qu'on
   l'ait choisi, et la composition changeait d'un écran à l'autre sans
   raison. Douze articles par page divisent proprement par 4, 3 et 2 : aucune
   rangée incomplète, quelle que soit la taille de l'écran. */
.ak-grille {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e5);
}

/* Tablette — trois. Le palier est à 1 100 px et non à 980 : entre les deux,
   la colonne de filtres est encore là, et quatre cartes dans l'espace qui
   reste tomberaient sous 200 px de large. */
@media (max-width: 1100px) {
    .ak-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* LA CARTE EST UNE COLONNE, et c'est ce qui aligne les prix d'une rangée
   depuis le 12/09/2026 — voir `.ak-produit__nom` juste en dessous pour
   l'histoire de cette bascule. La grille étirant déjà ses cartes à la hauteur
   de la plus haute, il suffit de pousser la ligne de prix vers le bas. */
.ak-produit { position: relative; display: flex; flex-direction: column; }

/* Le cadre de l'image : gris clair, très arrondi, CARRÉ. Le carré n'est pas
   un choix esthétique — les photos du catalogue font toutes 1024 × 1024, et
   un cadre d'un autre rapport les rognerait ou les tasserait. */
/* LE CADRE NE PORTE NI FOND NI MARGE — sa remarque du 19/08/2026 :
   « les images produits ont déjà des fonds ».
   C'est juste, et vérifiable : les 381 photos du catalogue sont des prises de
   vue sur fond blanc, normalisées en 1024 × 1024. Poser un aplat gris derrière
   et une marge autour ajoutait un second cadre à l'intérieur du premier —
   l'image paraissait plus petite qu'elle n'est, et flottait au milieu. */
.ak-produit__cadre {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--r-carte);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.ak-produit__cadre img {
    width: 100%;
    height: 100%;
    /* `cover` : la photo remplit le carré. Elle est déjà carrée à la source,
       donc rien n'est rogné — `contain` laisserait des bandes le jour où une
       photo échapperait à la normalisation. */
    object-fit: cover;
    transition: transform var(--t-ample) var(--e-sortie);
}

/* Le fond ne sert plus qu'au repli sans photo, qui, lui, a besoin d'une
   surface pour se voir. */
.ak-produit__sans-image { background: var(--creme); width: 100%; height: 100%; }
.ak-produit:hover .ak-produit__cadre img { transform: scale(1.05); }

/* Le repli quand un produit n'a pas de photo. Il ne devrait pas arriver — la
   vitrine exige une image — mais un fichier peut manquer sur le CDN, et un
   cadre vide se lit comme une page cassée. */
.ak-produit__sans-image {
    color: var(--g3);
    display: grid;
    place-items: center;
    gap: var(--e2);
    font-size: 12.5px;
}

/* ── LA PASTILLE DE QUALITÉ ──
   La maquette met ici « 50% off ». Le catalogue n'a AUCUNE remise renseignée
   — un seul produit porte un `compare_at_price`, et il n'est même pas
   supérieur au prix. Afficher une réduction inventée sur un produit réel est
   exactement ce que ce site s'interdit.
   La place tient donc la QUALITÉ, qui est renseignée sur les 381 articles et
   qui est la première question qu'on pose au comptoir : origine ou copie. */
.ak-produit__qualite {
    position: absolute;
    top: var(--e3);
    left: var(--e3);
    z-index: 2;
    padding: 5px var(--e3);
    background: var(--fond-sombre);
    color: var(--sur-couleur);
    border-radius: var(--r-pastille);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .01em;
}
/* TOUTES LES PASTILLES SONT SOMBRES.
 *
 * L'origine était en vert, pour la distinguer. Vu sur la capture : la page
 * portait alors trois couleurs — l'orange de la marque, l'encre, et ce vert —
 * et le vert n'appartenait à rien. La maquette n'en a qu'une, sombre, sur
 * toutes les cartes. La qualité est une INFORMATION, pas une emphase. */

/* ── LES ACTIONS AU SURVOL ──
   Trois boutons ronds blancs, comme la maquette. Ils apparaissent au survol
   en grand écran ; au toucher, ils restent VISIBLES — il n'y a pas de survol
   sur un téléphone, et des commandes qui n'apparaissent jamais n'existent
   pas. */
.ak-produit__actions {
    position: absolute;
    top: var(--e3);
    right: var(--e3);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    opacity: 0;
    transform: translateX(6px);
    transition: opacity var(--t-vif) var(--e-sortie), transform var(--t-vif) var(--e-sortie);
}
.ak-produit:hover .ak-produit__actions,
.ak-produit:focus-within .ak-produit__actions {
    opacity: 1;
    transform: none;
}
@media (hover: none) {
    .ak-produit__actions { opacity: 1; transform: none; }
}

.ak-produit__action {
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    background: var(--blanc);
    color: var(--encre);
    border: none;
    border-radius: var(--r-pastille);
    box-shadow: 0 2px 8px rgba(26,21,18,.14);
    cursor: pointer;
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-produit__action:hover { background: var(--orange); color: var(--sur-couleur); }

/* ── LE TEXTE DE LA CARTE ── */
.ak-produit__info { padding-top: var(--e3); display: flex; flex-direction: column; flex: 1; }

/* LA REMISE, qui n'avait AUCUNE règle et sortait donc sans style — relevé à la
   vérification du 12/09. Elle prend le coin haut-gauche de la photo, libéré le
   même jour par la pastille de qualité qui est descendue sous l'image. Mêmes
   mesures que son équivalent de la vitrine (`.bv-v__remise`) : deux badges de
   remise qui ne se ressemblent pas sur deux pages du même site se remarquent
   tout de suite. */
.ak-produit__remise {
    position: absolute;
    top: var(--e3);
    inset-inline-start: var(--e3);
    z-index: 2;
    padding: 3px 9px;
    border-radius: var(--r-pastille);
    background: var(--orange);
    color: var(--sur-couleur);
    font-size: 10.5px;
    font-weight: 800;
}

/* ═══ CE QUI EXPLIQUE L'ÉCART DE PRIX — 12/09/2026 ═══════════════════════
   Deux lignes de natures différentes, et c'est tout le dessin : au-dessus du
   nom ce que la pièce EST — son rang et son LCD, les deux traits qui portent
   l'écart de prix ; sous le nom ce qu'on EMPORTE — le cadre, le coloris et la
   garantie.

   La ligne du haut prend la place de l'ancien rayon, qui répétait ce que le
   filtre disait déjà. La carte ne gagne donc qu'UNE ligne. */
.ak-qualite {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: var(--e3);
}

/* LA BULLE DE RANG. Discrète et sans gras : en aplat sombre sur la photo, elle
   était la première chose que l'œil rencontrait — avant le produit lui-même.
   Sa teinte vient du barreau, donc du mot ; elle ne se choisit pas. */
.ak-rang {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--r-pastille);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .15px;
    white-space: nowrap;
}
.ak-rang--5 { background: var(--rang5-f); color: var(--rang5-e); }
.ak-rang--4 { background: var(--rang4-f); color: var(--rang4-e); }
.ak-rang--3 { background: var(--rang3-f); color: var(--rang3-e); }
.ak-rang--2 { background: var(--rang2-f); color: var(--rang2-e); }
.ak-rang--1 { background: var(--rang1-f); color: var(--rang1-e); }

/* UNE ÉTOILE ET LE CHIFFRE, jamais cinq alignées. Cinq étoiles prennent
   cinquante pixels et se comptent au lieu de se lire ; « ★ 4/5 » tient en
   vingt-huit et dit l'échelle à voix haute. Chiffres TABULAIRES, sans quoi un
   « 1 » et un « 4 » n'ont pas la même largeur et les bulles d'une grille ne
   s'alignent plus d'une carte à l'autre. */
.ak-etoile {
    display: inline-flex;
    align-items: baseline;
    gap: 2.5px;
    font-variant-numeric: tabular-nums;
}
.ak-etoile__sym {
    width: 13px;
    height: 13px;
    fill: currentColor;
    flex: 0 0 auto;
    align-self: center;
    margin-inline-end: .5px;
}
.ak-etoile b { font-weight: 800; }
.ak-etoile i { font-style: normal; font-size: .82em; opacity: .62; margin-inline-start: -1.5px; }

/* LE LCD A SA PROPRE FAMILLE DE COULEUR, et une seule pour toutes les
   technologies : elle dit « technologie d'affichage », pas « niveau ». Cinq
   teintes de plus auraient fait deux échelles concurrentes sur la même ligne. */
.ak-lcd {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--r-pastille);
    background: var(--lcd-f);
    color: var(--lcd-e);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── CE QU'ON EMPORTE ─────────────────────────────────────────────────────
   Du texte et des marqueurs, PAS des puces encadrées : trois puces, ce sont
   trois boîtes et trois bordures que l'œil compte avant de les lire — c'est ce
   qui rendait la carte illisible au premier essai. Chaque marqueur touche son
   mot ; un marqueur qui flotte n'est pas un marqueur, c'est une tache. */
.ak-traits {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    /* SERRÉE CONTRE LE NOM : elle le décrit, elle ne lui succède pas. Huit
       pixels l'en détachaient assez pour qu'elle se lise comme un bloc à part. */
    margin-top: var(--e1);
    font-size: 11.5px;
    line-height: 1.4;
}
.ak-traits__sep { color: var(--g3); }
.ak-trait {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--encre-2);
}
.ak-trait svg { flex: 0 0 auto; opacity: .7; }

/* La garantie est le SEUL des trois qui porte un jugement : elle rassure, ou
   elle alerte. Les deux autres décrivent. D'où la seule couleur de la ligne. */
.ak-trait--gar { color: var(--gar-e); }
.ak-trait--gar svg { opacity: 1; }
.ak-trait--gar.est-sans { color: var(--g2); }

/* LA PASTILLE DE COULEUR : un anneau posé À L'INTÉRIEUR, jamais une bordure.
   Une bordure agrandit le rond et fait déborder la ligne d'un pixel ; l'ombre
   intérieure cerne aussi bien le blanc que le noir sans rien décaler.

   Elle est TOUJOURS dessinée, hachurée quand la teinte est inconnue — 24 des
   51 coloris du référentiel n'en ont pas. Ne rien afficher creusait un trou
   dans l'alignement d'une carte à l'autre. */
.ak-coul {
    flex: 0 0 auto;
    /* ONZE PIXELS, COMME LES DEUX MARQUEURS VOISINS. À douze, le rond noir d'un
       écran pesait visiblement plus que le cadre et le bouclier qui l'encadrent,
       et la ligne penchait au milieu. */
    width: 11px;
    height: 11px;
    border-radius: var(--r-pastille);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22);
}
.ak-coul--inconnue {
    background: repeating-linear-gradient(45deg,
        var(--trait), var(--trait) 3px, var(--trait-fort) 3px, var(--trait-fort) 6px);
}

/* La maquette met ici « ★ 4.9 ». AK n'a AUCUN avis saisi — en afficher un
   serait mentir sur un produit réel, et l'application avait déjà retiré les
   notes pour cette raison. La place tient le nombre de ventes, qui se
   compte. */
.ak-produit__vendus {
    display: flex;
    align-items: center;
    gap: 4px;
    /* POUSSÉ À DROITE DE LA LIGNE DE QUALITÉ. Il occupait le bout de l'ancienne
       ligne de rayon, qui portait un `space-between` ; celle-ci aligne ses
       éléments à gauche, et sans cette marge automatique le compteur viendrait
       se coller à la puce du LCD comme s'il en faisait partie. */
    margin-inline-start: auto;
    font-size: 11.5px;
    color: var(--g1);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ak-produit__nom {
    display: block;
    margin-top: 3px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--encre);
    /* DEUX LIGNES AU PLUS — et plus « toujours deux », depuis le 12/09/2026.
     *
     * La hauteur était RÉSERVÉE, occupée ou non : un nom d'une seule ligne
     * laissait une ligne vide, et c'est ce qui alignait les prix d'une rangée.
     * Tant que le prix suivait le nom, on ne voyait rien.
     *
     * Depuis que la ligne des traits s'intercale entre les deux, cette ligne
     * vide s'est retrouvée AU MILIEU de la carte : « Screen Camon 50 Pro (4G) »,
     * un grand blanc, puis « Sans cadre · Noir · 30 jours ». Sa remarque du
     * 12/09 : « il y a trop d'espace entre le titre et le Sans cadre ».
     *
     * L'alignement des prix n'est pas perdu pour autant — il est simplement
     * obtenu autrement : la carte est une colonne, la ligne de prix prend
     * `margin-top: auto`, et le mou se range SOUS les traits, là où personne ne
     * le voit, au lieu de s'ouvrir entre le nom et ce qui le décrit. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ak-produit:hover .ak-produit__nom { color: var(--orange); }

.ak-produit__ligne-prix {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e3);
    /* LE PRIX TOMBE AU BAS DE LA CARTE, et toute la rangée s'aligne sans que
       rien ne soit réservé plus haut. C'est ce qui remplace la réservation de
       deux lignes sur le nom, retirée le 12/09 — le mou se range ici, sous les
       traits, au lieu de s'ouvrir entre le nom et ce qui le décrit.
       `padding-top` et non `margin-top` : la marge automatique tient déjà le
       bas, elle ne peut pas servir en même temps d'écart minimal. */
    margin-top: auto;
    padding-top: var(--e2);
}

.ak-produit__prix {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* LA DISPONIBILITÉ NE SE DIT QUE QUAND ELLE MANQUE — 12/09/2026.
   « Sur commande » s'affichait sur 99 % des cartes : à force d'être partout, il
   ne disait plus rien. Et « En stock » en vert attirait l'œil sur une évidence.
   Le silence vaut désormais disponible, et seul le manque se signale.

   Le modificateur `--stock` est parti avec : plus personne ne l'écrivait. */
.ak-produit__dispo {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rouge);
    white-space: nowrap;
}

/* ── LA GRILLE VIDE ── */
.ak-vide {
    padding: var(--e9) var(--e5);
    text-align: center;
    border: 1.5px dashed var(--trait);
    border-radius: var(--r-carte);
}
.ak-vide h3 { font-size: 19px; margin-bottom: var(--e2); }
.ak-vide p { color: var(--g1); margin-bottom: var(--e4); }

/* ── LA PAGINATION ──
   Ronde, la page courante en orange plein — la maquette la met en ambre, ce
   qui est notre accent. Les flèches restent en place quand elles sont
   inactives plutôt que de disparaître : une barre qui change de largeur
   d'une page à l'autre fait sauter le bas de page. */
/* ═══ LE DÉFILEMENT INFINI — 07/10/2026 ═══════════════════════════════════
   Le balisage et le script sont dans pages/boutique. La classe `ak-infini`
   n'est posée QUE par le script : sans lui, la pagination numérotée reste. */
.ak-infini .ak-pages { display: none; }

/* Sous la grille : où l'on en est, d'un coup d'œil — le compte, une barre
   fine, et le bouton quand les chargements automatiques ont fini. */
.ak-suite { display: grid; justify-items: center; gap: var(--e3); margin-top: var(--e7); text-align: center; }
.ak-suite__guet { height: 1px; margin-top: -1px; }
.ak-suite__compte { margin: 0; font-size: 13px; font-weight: 600; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.ak-suite__barre { width: 180px; height: 3px; border-radius: 3px; background: var(--trait); overflow: hidden; }
.ak-suite__barre i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--orange);
    transition: width var(--t-lent) var(--e-sortie); }
.ak-suite__plus { margin-top: var(--e2); }
.ak-suite.est-fini .ak-suite__barre i { background: var(--vert); }
.ak-suite__avant { display: flex; margin: 0 auto var(--e6); }

/* Les cartes fantômes : la forme d'une carte (photo carrée, deux lignes),
   et une lueur qui passe — on voit que ça vient, et OÙ ça viendra. */
.ak-squelette { display: grid; gap: var(--e2); align-content: start; }
.ak-squelette > span { display: block; height: 12px; border-radius: 6px; background: var(--trait); }
.ak-squelette > span:last-child { width: 45%; }
.ak-squelette > .ak-squelette__img { height: auto; aspect-ratio: 1; border-radius: var(--r-carte); margin-bottom: var(--e1); }
.ak-squelette > span { position: relative; overflow: hidden; }
.ak-squelette > span::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    animation: ak-lueur 1.3s ease-in-out infinite; }
:root[data-theme="dark"] .ak-squelette > span::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ak-squelette > span::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
}
@keyframes ak-lueur { to { transform: translateX(100%); } }

/* Les cartes du lot entrent l'une après l'autre, 45 ms d'écart. */
.ak-arrive { animation: ak-carte-arrive .55s var(--e-sortie) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes ak-carte-arrive { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
    .ak-arrive, .ak-squelette > span::after { animation: none; }
    .ak-suite__barre i { transition: none; }
}

.ak-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    margin-top: var(--e8);
}
.ak-pages a, .ak-pages span {
    min-width: 40px; height: 40px;
    padding-inline: var(--e2);
    display: grid;
    place-items: center;
    border-radius: var(--r-pastille);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--encre-2);
    font-variant-numeric: tabular-nums;
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-pages a:hover { background: var(--creme); color: var(--encre); }
.ak-pages [aria-current="page"] { background: var(--orange); color: var(--sur-couleur); }
.ak-pages .inactif { color: var(--g3); cursor: default; }
.ak-pages .points { color: var(--g2); }

/* ═══════════════════════════════════════════════════════════════════════
   LES TROIS GARANTIES
   ═══════════════════════════════════════════════════════════════════════
   Le bandeau de la maquette, sous la grille. Les textes disent ce qui est
   vrai chez AK — pas « livraison offerte dès 180 $ », qui n'existe pas.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-garanties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--e6);
    padding-block: var(--e7);
    border-top: 1px solid var(--trait);
}
.ak-garantie {
    display: flex;
    align-items: center;
    gap: var(--e4);
}
.ak-garantie__ico {
    flex: none;
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
    background: var(--orange-doux);
    color: var(--orange);
    border-radius: var(--r-champ);
}
.ak-garantie h3 { font-size: 16px; font-weight: 700; }
.ak-garantie p { font-size: 13.5px; color: var(--g1); margin-top: 2px; }

/* ── LA VITRINE AU TÉLÉPHONE ──
   La colonne de filtres passe DERRIÈRE UN BOUTON. L'empiler au-dessus de la
   grille aurait mis cinq écrans de cases avant le premier produit — c'est
   ainsi qu'on fait fuir un visiteur venu voir des articles. */
.ak-filtres__bouton { display: none; }

/* LA CASE QUI PILOTE LES FILTRES — escamotée À TOUTES LES LARGEURS.
 *
 * Elle n'était cachée que dans le bloc téléphone : en grand écran, une petite
 * case à cocher flottait au-dessus de la grille, sans étiquette et sans effet.
 * Vu sur la capture — c'est le genre de défaut qu'on ne trouve qu'en
 * REGARDANT la page. */
#ak-filtres-ouverts {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

@media (max-width: 980px) {
    .ak-vitrine { grid-template-columns: 1fr; gap: var(--e5); }

    .ak-filtres__bouton {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--e2);
        width: 100%;
        height: 46px;
        border: 1.5px solid var(--trait);
        border-radius: var(--r-pastille);
        background: var(--blanc);
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        color: var(--encre);
        cursor: pointer;
    }

    .ak-filtres {
        position: static;
        max-height: none;
        overflow: visible;
        display: none;
        padding: var(--e5);
        border: 1px solid var(--trait);
        border-radius: var(--r-carte);
    }
    #ak-filtres-ouverts:checked ~ .ak-vitrine .ak-filtres { display: block; }

}

@media (max-width: 560px) {
    /* Téléphone — deux. Une seule colonne donnerait des cartes énormes et
       six écrans de défilement pour douze articles. */
    .ak-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }

    /* LES TROIS BOUTONS FLOTTANTS DISPARAISSENT SUR TÉLÉPHONE.
     *
     * Ils n'apparaissent au survol qu'en grand écran ; faute de survol, la
     * règle `@media (hover: none)` les laissait visibles en permanence — et
     * sur une carte deux fois plus petite, ils recouvraient un tiers de la
     * photo. Vu sur la capture.
     *
     * On ne perd rien : toucher la carte ouvre la fiche, où ces trois actions
     * sont présentes en grand et sans ambiguïté. Trois cibles de 34 px
     * empilées dans un coin n'étaient de toute façon pas praticables au
     * pouce. */
    .ak-produit__actions { display: none; }
    .ak-produit__nom { font-size: 14px; }
    .ak-produit__prix { font-size: 15.5px; }
    .ak-outils { gap: var(--e3); }
    .ak-tri { width: 100%; }
    .ak-tri select { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 15 · LE PIED DE PAGE
   ═══════════════════════════════════════════════════════════════════════

   Repris le 19/08/2026 : « un peu vilain, améliore ça ».

   Le défaut n'était pas la mise en page — les colonnes étaient alignées — mais
   la HIÉRARCHIE. Les titres de colonnes étaient blancs, gras, à 16 px : au
   même poids visuel que les liens qu'ils coiffent, et presque au même que le
   nom de la maison. L'œil ne trouvait donc aucune structure, et l'ensemble se
   lisait comme une liste de mots posés en grille.

   Trois corrections, et rien d'autre :
     · les titres passent en PETITES CAPITALES grises, espacées — ils
       nomment sans réclamer d'attention, comme dans la référence ;
     · les liens se resserrent — trente-cinq pixels entre deux entrées d'une
       même colonne les faisaient paraître sans rapport ;
     · un filet sépare le corps de la barre basse, qui arrivait sans
       transition.
   ═══════════════════════════════════════════════════════════════════════ */

/* LE PIED ÉTAIT TROP NOIR — 19/08/2026, son constat.
 *
 * Il portait `--encre` (#1A1512), la couleur du TEXTE. Une encre est faite
 * pour être lue à côté d'un fond, pas pour couvrir un cinquième de la page :
 * à cette surface, elle se lit comme un trou noir en bas du site.
 *
 * Un brun chaud plus clair, éclairci d'un cran, garde la même famille sans
 * la lourdeur. Le texte remonte d'autant : sur un fond moins profond, un
 * gris à 66 % passait pour délavé. */
/* ═══════════════════════════════════════════════════════════════════════
   LE PIED DE PAGE, EN CLAIR — 20/08/2026
   ═══════════════════════════════════════════════════════════════════════

   Il était #2A2320, un bloc sombre de six cents pixels qui refermait la
   page comme une porte. En clair, il la termine au lieu de la couper : le
   crème descend du corps, un filet marque la séparation, et l'orange ne
   sert plus qu'aux survols et à la marque.

   ── CE QUI CHANGE VRAIMENT ──

   Pas seulement le fond. Sur sombre, la hiérarchie se fait par l'OPACITÉ du
   blanc — 88 %, 74 %, 50 %. En clair, l'opacité ternit sans structurer : ce
   sont donc des teintes nommées (encre, g1, g2) qui reprennent le travail.
   Traduire un thème sombre en baissant simplement la luminosité donne
   toujours une page grise et molle.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ UN PIED SOMBRE — 22/08/2026, sa demande ═════════════════════════
   Il prend `--fond-sombre`, le jeton qui NE BASCULE PAS avec le thème :
   `--encre` deviendrait clair la nuit et le pied repasserait en blanc au
   milieu d'une page noire. Même piège que pour le bandeau de contact et les
   pastilles du héros, déjà réglé ainsi ailleurs dans cette feuille.

   Tout ce qui s'y pose prend donc des couleurs FIXES elles aussi : un gris
   clair sur fond sombre reste lisible dans les deux modes, ce qu'aucun jeton
   de texte ne garantit ici. */
.ak-pied {
    background: var(--fond-sombre);
    border-top: 0;
    color: rgba(255,255,255,.62);
    font-size: 14.5px;
}
/* Le logo blanc, toujours : le pied est sombre dans les deux thèmes, et la
   version « jour » y disparaîtrait. */
.ak-pied .ak-logo--jour { display: none; }
.ak-pied .ak-logo--nuit { display: block; }

/* ═══ LE PIED — refait le 22/08/2026 ══════════════════════════════════════
   Deux blocs, et rien de plus : QUI NOUS SOMMES à gauche, COMMENT NOUS
   JOINDRE à droite, puis une barre fine pour la navigation et le légal.
   Quatre colonnes et seize liens s'étalaient là où personne ne lit.
   ════════════════════════════════════════════════════════════════════════ */
.ak-pied__haut {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--e7);
    align-items: start;
    padding-block: var(--e7) var(--e6);
}

/* LE LOGO EST UN LIEN, il doit le montrer. Discrètement : c'est un retour à
   l'accueil, pas une action. */
.ak-pied__logo { display: inline-block; border-radius: 12px;
    transition: opacity var(--t-vif) var(--e-sortie), transform var(--t-vif) var(--e-sortie); }
.ak-pied__logo:hover { opacity: .82; transform: translateY(-1px); }
.ak-pied__logo:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.ak-pied__identite img { width: 72px; height: 72px; }
.ak-pied__identite p {
    margin: var(--e4) 0 0;
    max-width: 34ch;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,.55);
}

.ak-pied__reseaux { display: flex; gap: var(--e2); margin-top: var(--e5); }
.ak-pied__reseaux a {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--r-pastille);
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.72);
    transition: color var(--t-vif) var(--e-sortie), border-color var(--t-vif) var(--e-sortie),
                background var(--t-vif) var(--e-sortie), transform var(--t-vif) var(--e-sortie);
}
/* ── CHAQUE RÉSEAU DANS SA COULEUR ── 24/08/2026, sa demande.
   Au repos le glyphe prend la teinte de la marque, la pastille reste discrète.
   Au survol, la pastille se remplit de cette teinte et le glyphe passe au ton
   qui s'y lit — blanc sur le bleu de Facebook, sombre sur le vert de WhatsApp
   et le cyan de TikTok, où le blanc tombe à 1,98 et 1,38 de contraste.
   Les cinq teintes tiennent au-dessus de 3:1 sur le fond sombre du pied. */
.ak-pied__reseaux a[data-res] { color: var(--teinte, rgba(255,255,255,.72)); }
.ak-pied__reseaux a[data-res="whatsapp"]  { --teinte: #25D366; --sur-teinte: #0B2E17; }
.ak-pied__reseaux a[data-res="facebook"]  { --teinte: #1877F2; --sur-teinte: #FFFFFF; }
.ak-pied__reseaux a[data-res="instagram"] { --teinte: #E1306C; --sur-teinte: #FFFFFF; }
.ak-pied__reseaux a[data-res="tiktok"]    { --teinte: #25F4EE; --sur-teinte: #06201F; }
.ak-pied__reseaux a[data-res="linkedin"]  { --teinte: #0A66C2; --sur-teinte: #FFFFFF; }

.ak-pied__reseaux a:hover {
    color: var(--sur-teinte, var(--sur-couleur));
    border-color: var(--teinte, var(--orange));
    background: var(--teinte, var(--orange));
    transform: translateY(-2px);
}
/* INSTAGRAM N'A PAS UNE COULEUR, IL EN A QUATRE. Son dégradé ne sert qu'au
   survol : au repos, le rose seul suffit à le désigner sans faire tache. */
.ak-pied__reseaux a[data-res="instagram"]:hover {
    background: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 50%, #6228D7 100%);
    border-color: #EE2A7B;
}
/* Le clavier voit ce que la souris voit. */
.ak-pied__reseaux a:focus-visible {
    outline: 2px solid var(--teinte, var(--orange));
    outline-offset: 2px;
}

/* LE TÉLÉPHONE PORTE LE PIED. Sur un service de réparation, on descend
   jusqu'ici pour appeler — pas pour relire une liste de liens. */
.ak-pied__joindre { text-align: right; }
.ak-pied__joindre .oeil {
    display: block;
    font-size: 11px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--orange);
}
.ak-pied__joindre .tel {
    display: inline-block; margin-top: var(--e2);
    font-size: clamp(22px, 2.4vw, 30px); font-weight: 800;
    letter-spacing: -.03em; color: var(--sur-couleur); text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: color var(--t-vif) var(--e-sortie);
}
.ak-pied__joindre .tel:hover { color: var(--orange); }

/* LE SECOND NUMÉRO PREND SA PROPRE LIGNE — 14/09/2026.
 *
 * `.tel` est en `inline-block` : deux numéros se seraient posés côte à côte
 * tant qu'il restait de la place, puis seraient passés à la ligne à une
 * largeur imprévisible. Un numéro coupé en deux morceaux ne se lit pas.
 *
 * MÊME TAILLE QUE LE PREMIER — sa correction du 14/09. Je l'avais dessiné un
 * cran plus petit pour alléger le bloc ; ce sont deux lignes de l'agence, on y
 * répond pareil, et les hiérarchiser laissait croire à un numéro de repli.
 * Seule la ligne change, donc — pas le poids. */
.ak-pied__joindre .tel--second {
    display: block;
    margin-top: 2px;
}
.ak-pied__joindre .ou {
    margin: var(--e3) 0 0;
    display: flex; align-items: center; justify-content: flex-end;
    gap: 7px; flex-wrap: wrap;
    font-size: 13.5px; color: rgba(255,255,255,.58);
}
.ak-pied__joindre .ou svg { color: rgba(255,255,255,.38); flex: none; }
.ak-pied__joindre .ou .sep { color: rgba(255,255,255,.25); }

/* ── LES MAGASINS DANS LE PIED ── 24/08/2026, à la place du bouton WhatsApp.
   Même dessin que dans les sections de téléchargement, mais en plus discret :
   ici on ne relance pas l'argument, on laisse une porte ouverte à qui descend
   jusqu'en bas. D'où le contour plutôt que le plein. */
.ak-pied__apps { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e5); justify-content: flex-end; }
.ak-pied__app {
    display: inline-flex; align-items: center; gap: var(--e2);
    padding: 8px 16px;
    border-radius: var(--r-pastille);
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06); color: var(--sur-couleur);
    text-decoration: none; text-align: left;
    transition: border-color var(--t-vif) var(--e-sortie), background var(--t-vif) var(--e-sortie);
}
.ak-pied__app:hover { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.11); }
.ak-pied__app small { display: block; font-size: 10.5px; opacity: .62; line-height: 1.3; }
.ak-pied__app strong { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
/* Le magasin sans lien le dit, et ne se clique pas. */
.ak-pied__app--attente { color: rgba(255,255,255,.5); border-style: dashed; background: transparent; cursor: default; }
.ak-pied__app--attente:hover { background: transparent; border-color: rgba(255,255,255,.16); }
/* Les logos sont ceux des sections de téléchargement : posés en masque, ils
   prennent la couleur du texte — blanche ici, sans une règle de plus. */
.ak-pied__app .ak-magasin__logo { width: 20px; height: 20px; }

/* La barre du bas : navigation, légal, mention — sur une seule ligne
   quand la place le permet. */
.ak-pied__bas {
    display: flex; align-items: center; gap: var(--e4) var(--e6);
    flex-wrap: wrap;
    padding-block: var(--e4) var(--e5);
    border-top: 1px solid rgba(255,255,255,.10);
    font-size: 13px;
}
.ak-pied__liens, .ak-pied__legal { display: flex; gap: var(--e4); flex-wrap: wrap; }
.ak-pied__liens a, .ak-pied__legal a {
    text-decoration: none;
    transition: color var(--t-vif) var(--e-sortie);
}
.ak-pied__liens a { font-weight: 600; color: rgba(255,255,255,.86); }
.ak-pied__liens a:hover, .ak-pied__legal a:hover { color: var(--orange); }
.ak-pied__legal { margin-left: auto; }
.ak-pied__legal a { color: rgba(255,255,255,.46); }
/* La mention était à 34 % de blanc : 3,1 de contraste sur ce fond, sous le
   seuil de 4,5 exigé pour un texte de cette taille. Un pied soigné dont les
   petits caractères ne se lisent pas n'est pas soigné. Remontée à 50 %. */
.ak-pied__droits { margin: 0; width: 100%; color: rgba(255,255,255,.5); font-size: 12.5px; }

@media (max-width: 900px) {
    .ak-pied__haut { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
    .ak-pied__joindre { text-align: left; }
    .ak-pied__joindre .ou { justify-content: flex-start; }
    /* Le pied passe à gauche en dessous de cette largeur : les boutons des
       magasins doivent suivre, sinon ils restaient collés à droite quand le
       numéro et l'adresse étaient à gauche — 520 px d'écart, mesuré. */
    .ak-pied__apps { justify-content: flex-start; }
}
@media (max-width: 560px) {
    .ak-pied__bas { flex-direction: column; align-items: flex-start; gap: var(--e3); }
    .ak-pied__legal { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LE MENU DÉROULANT DES CATÉGORIES — 19/08/2026
   ═══════════════════════════════════════════════════════════════════════

   « Astuces » cède sa place à « Catégories », qui ouvre au survol sur les
   trois grandes familles et leur contenu.

   ── SANS JAVASCRIPT, ET ATTEIGNABLE AU CLAVIER ──

   `:hover` ouvre le panneau ; `:focus-within` fait la même chose quand on
   arrive par la touche Tab. Sans cette seconde règle, l'entrée serait
   inatteignable autrement qu'à la souris — un menu de navigation, c'est
   précisément ce qu'on ne peut pas se permettre d'y laisser.

   ── LE DÉLAI DE FERMETURE ──

   Le panneau est collé à son déclencheur, sans espace entre les deux : un
   interstice d'un seul pixel referme le menu pendant qu'on descend vers lui,
   et c'est le défaut le plus rageant des menus au survol.
   ═══════════════════════════════════════════════════════════════════════ */

/* ⚠ LE PANNEAU S'ANCRE SUR LE CONTENEUR DE L'EN-TÊTE, PAS SUR SON
   DÉCLENCHEUR — et c'est la seule façon qu'il ne déborde pas. « Catégories »
   tombe à ~640 px du bord ; un panneau posé à `left: 0` DE CE MOT sortait de
   l'écran sur un portable. Le déclencheur est donc en `static` — le survol ne
   dépend pas du positionnement — et `.ak-entete`, déjà `sticky`, sert de
   repère. Surtout PAS un `position: relative` sur `.ak-large` : il réancrerait
   le tiroir de recherche, qui est lui aussi en `position: absolute`. */
.ak-menu__deroulant { position: static; }

/* ⚠ CES TROIS RÈGLES APPARTIENNENT AU DÉCLENCHEUR, PAS AU PANNEAU — et elles
   ont été emportées le 15/09 en remplaçant le bloc, parce qu'elles vivaient
   dedans. Sans le `flex`, « Catégories » se décalait de 5 px dans la barre et
   son chevron retombait SOUS le mot, aligné à gauche ; sur téléphone, le
   `justify-content` ne s'appliquant plus, son filet de séparation ne faisait
   que 97 px au lieu de la pleine largeur du tiroir.
   Remplacer un bloc, c'est aussi vérifier ce qu'il contenait d'étranger. */
.ak-menu__declencheur { display: flex; align-items: center; gap: 5px; }
.ak-menu__chevron { transition: transform var(--t-vif) var(--e-sortie); }
.ak-menu__deroulant:hover .ak-menu__chevron,
.ak-menu__deroulant:focus-within .ak-menu__chevron { transform: rotate(180deg); }

.ak-panneau {
    position: absolute;
    top: 100%;
    /* Le bord gauche du CONTENU se calcule au lieu d'être emprunté : la
       gouttière tant que l'écran est étroit, la marge de centrage dès que le
       conteneur atteint sa largeur maximale. */
    left: max(var(--gouttiere), calc((100% - var(--large) - var(--gouttiere) * 2) / 2 + var(--gouttiere)));
    transform: translateY(6px);
    z-index: 200;
    width: 900px;
    max-width: calc(100% - var(--gouttiere) * 2);
    padding: var(--e5);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    box-shadow: 0 2px 6px rgba(26,21,18,.04), 0 16px 32px -18px rgba(26,21,18,.20);

    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-vif) var(--e-sortie), transform var(--t-vif) var(--e-sortie), visibility var(--t-vif) var(--e-sortie);
}
.ak-menu__deroulant:hover .ak-panneau,
.ak-menu__deroulant:focus-within .ak-panneau { opacity: 1; visibility: visible; transform: translateY(0); }

/* ⚠ LE PANNEAU DÉSARME LES RÈGLES DE LA BARRE — piège rencontré deux fois.
   `.ak-menu a` pèse UNE CLASSE ET UN ÉLÉMENT (0,1,1) ; les règles à une seule
   classe (0,1,0) perdaient sur chaque propriété partagée : `white-space:
   nowrap` empêchait les noms de se couper, `padding-block` gonflait chaque
   ligne. Un sélecteur de MÊME poids, placé plus bas, rend la main.
   ⚠ Et il ne touche PAS à la typographie : `font-size: inherit` y écrasait à
   son tour les tailles posées plus bas. */
.ak-panneau a {
    position: static;
    padding-block: 0;
    white-space: normal;
}

/* Escamotées, pas en `display:none` : une case absente du rendu sort aussi de
   la tabulation. Elles ne servent qu'au téléphone. */
.ak-pn-dd { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }

/* ── LA GRILLE ──
   `auto-fit` et non un nombre figé : quatre racines sont garnies aujourd'hui,
   douze existent en base. L'ancien menu déclarait `repeat(3, 1fr)` pour quatre
   familles, et la quatrième tombait seule en laissant deux tiers de vide. */
.ak-pn-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: var(--e5); }
.ak-pn-col { min-width: 0; }

.ak-panneau .ak-pn-tete {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2);
    padding-bottom: 7px; margin-bottom: var(--e2); border-bottom: 1px solid var(--trait-or);
    font-size: 14px; font-weight: 800; color: var(--encre);
}
.ak-panneau .ak-pn-tete:hover { color: var(--orange); }
.ak-pn-tete > span { min-width: 0; }
.ak-pn-tete i, .ak-pn-liste i, .ak-pn-bascule i { flex: none; font-style: normal; font-weight: 600;
                                                  color: var(--g2); font-variant-numeric: tabular-nums; }
.ak-pn-tete i { font-size: 11.5px; }

.ak-pn-liste { list-style: none; margin: 0; padding: 0; }
.ak-pn-liste > li + li { margin-top: 2px; }
.ak-panneau .ak-pn-liste a {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2);
    padding: 3px 0; font-size: 13px; color: var(--encre-2);
    transition: color var(--t-vif) var(--e-sortie);
}
.ak-panneau .ak-pn-liste a:hover { color: var(--orange); }
.ak-pn-liste i { font-size: 11.5px; }

/* L'ICÔNE D'UN SOUS-RAYON — 16/09/2026, sa demande.
   `flex: none` : sans lui elle se laisse écraser par le nom qui la suit, et
   passe de 16 px à 11 sur « Batteries de téléphone » — la colonne n'aligne
   plus rien. `align-self: center` parce que le lien est aligné sur la LIGNE
   DE BASE (le décompte doit s'asseoir sur celle du nom) : une icône posée sur
   une ligne de base pend sous le texte.
   Elle est plus PÂLE que le nom : c'est un repère qu'on balaie, pas une
   information de plus à lire — et au survol elle rejoint l'orange du lien,
   sans une règle supplémentaire (`currentColor`). */
.ak-pn-ico { flex: none; align-self: center; color: var(--g2);
    transition: color var(--t-vif) var(--e-sortie); }
.ak-panneau .ak-pn-liste a:hover .ak-pn-ico { color: inherit; }
/* ⚠ `flex: 1` DEPUIS QUE L'ICÔNE EXISTE — 16/09/2026. Le lien est en
   `space-between` : à deux enfants (nom, décompte) il collait le nom à gauche.
   L'icône en fait TROIS, et `space-between` a poussé le nom au milieu de la
   colonne, à distance égale de l'icône et du chiffre. Le nom doit donc
   réclamer la place libre pour que le décompte reparte à droite.
   `min-width: 0` reste, sans quoi « Batteries de téléphone » refuserait de se
   couper et déborderait sur la colonne voisine. */
.ak-pn-liste span { min-width: 0; flex: 1 1 auto; }

.ak-panneau .ak-pn-tout {
    display: flex; align-items: center; gap: 6px; margin-top: var(--e5); padding-top: var(--e4);
    border-top: 1px solid var(--trait-or); font-size: 13px; font-weight: 600; color: var(--orange);
}
.ak-panneau .ak-pn-tout:hover { color: var(--orange-fonce); }

/* La bascule et le retour n'existent que sur téléphone : sur ordinateur la
   grille montre tout, il n'y a rien à ouvrir ni d'où revenir. */
.ak-pn-bascule, .ak-pn-retour { display: none; }

/* Là où il était écrit, ce bloc était écrasé par la coquille téléphone
   réécrite en fin de feuille (« L'EN-TÊTE REPRIS AU PIXEL », 15/10) : à poids
   égal, la dernière règle gagne. Il vit donc maintenant TOUT EN BAS du fichier,
   après elle. Cherche « DEUX PANNEAUX, ET DES ACCORDÉONS ». */



/* ═══════════════════════════════════════════════════════════════════════
   SECTION 3 · LE HÉROS — refait le 19/08/2026 d'après sa maquette
   ═══════════════════════════════════════════════════════════════════════

   Sa demande : le discours à gauche — étiquette, grand titre, deux lignes,
   deux appels à l'action, les avis — et à droite la photo d'un réparateur.

   ── CE QUI FAIT LE « WAOU » À DROITE ──

   Pas un effet : une CONSTRUCTION. La photo est posée dans un cadre portrait
   très arrondi, avec un aplat orange glissé derrière et un halo dessous. Par
   dessus flottent deux cartouches de verre qui portent des faits VÉRIFIABLES,
   tirés de la base — le nombre de pièces en vitrine, le diagnostic gratuit.

   C'est ce qui distingue un héros d'une simple image : le regard trouve la
   photo, puis deux informations, et sait où cliquer. Une photo seule, aussi
   belle soit-elle, ne dit rien de la maison.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-heros {
    position: relative;
    overflow: hidden;
    background: var(--creme);
}

/* Le semis de points, en haut à droite. Dessiné en CSS : aucun fichier, il
   suit le zoom et ne se pixellise pas. */
.ak-heros::before {
    content: '';
    position: absolute;
    top: -20px; right: -40px;
    width: 320px; height: 200px;
    background-image: radial-gradient(var(--g3) 1.6px, transparent 1.6px);
    background-size: 20px 20px;
    opacity: .5;
    pointer-events: none;
}

.ak-heros > .ak-large {
    position: relative;
    display: grid;
    /* `minmax(0, 1fr)` et non `1fr` : une piste de grille prend par défaut la
       largeur MINIMALE de son contenu, si bien qu'un élément indéformable
       (ici la rangée de logos) élargit toute la colonne. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e8);
    align-items: center;
    padding-block: var(--e8);
}

/* ── L'ÉTIQUETTE ── */
.ak-heros__oeil {
    display: inline-flex;
    align-items: center;
    gap: var(--e3);
    padding: 7px var(--e5) 7px 7px;
    background: var(--blanc);
    border-radius: var(--r-pastille);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--encre);
    /* Une ombre FINE, et un liseré d'un demi-point : c'est le liseré qui
       détache la pastille du crème, pas l'ombre. Une ombre épaisse à sa
       place aurait fait une tache grise. */
    border: 1px solid rgba(26,21,18,.04);
    box-shadow: 0 1px 1px rgba(26,21,18,.04), 0 10px 22px -16px rgba(26,21,18,.28);
}
.ak-heros__oeil span {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: var(--r-pastille);
    background: var(--orange-doux);
    color: var(--orange);
}

/* ── LE TITRE ──
   Deux teintes, comme la maquette : l'encre pose la phrase, l'orange
   souligne ce qu'on vend. Un titre d'une seule couleur à cette taille
   devient un mur. */
.ak-heros h1 {
    margin-top: var(--e5);
    font-size: clamp(36px, 4.6vw, 63px);
    font-weight: 800;
    /* Un cran plus serré, et l'interligne descendu sous 1 : à cette taille,
       l'espace ENTRE les lignes se voit plus que les lettres elles-mêmes.
       C'est ce resserrement qui distingue un titre composé d'un titre posé. */
    letter-spacing: -.048em;
    line-height: .99;
    text-wrap: balance;
}
.ak-heros h1 em { font-style: normal; color: var(--orange); }

.ak-heros__texte {
    margin-top: var(--e4);
    /* 46 signes par ligne : en dessous, l'œil saute trop souvent ; au-delà,
       il perd le début de la ligne suivante. */
    max-width: 46ch;
    font-size: 16.5px;
    line-height: 1.62;
    color: var(--g1);
}

/* ── LES DEUX APPELS À L'ACTION ──
   Un plein, un souligné — la hiérarchie de la maquette. Deux boutons pleins
   côte à côte se disputent le clic et on ne sait plus lequel est l'action
   principale. */
.ak-heros__boutons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e5);
    margin-top: var(--e6);
}
.ak-lien-fort {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--encre);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1.5px;
    transition: color var(--t-vif) var(--e-sortie);
}
.ak-lien-fort:hover { color: var(--orange); }

/* ── LA LIGNE D'AVIS, sous les appels à l'action ──
   Sa maquette : des portraits ronds qui se chevauchent, une pastille « + »,
   puis la note en gras et le nombre de clients dessous.

   Le chevauchement se lit ici, alors qu'il avait été abandonné pour les
   logos de marques : un VISAGE à demi couvert se reconnaît encore, un mot
   comme « SAMSUNG » perd sa dernière lettre. Même geste, deux contenus, deux
   réponses. */
.ak-preuve {
    display: flex;
    align-items: center;
    gap: var(--e4);
    margin-top: var(--e7);
}
.ak-preuve__gens { display: flex; }
.ak-preuve__gens > * {
    width: 48px; height: 48px;
    border-radius: var(--r-pastille);
    border: 3px solid var(--blanc);
    object-fit: cover;
    background: var(--trait);
}
.ak-preuve__gens > * + * { margin-left: -15px; }
/* La pastille neutre, tant qu'aucun portrait n'est fourni. */
.ak-preuve__gens-vide {
    display: grid;
    place-items: center;
    color: var(--g2);
}
.ak-preuve__plus {
    display: grid;
    place-items: center;
    background: var(--orange) !important;
    color: var(--sur-couleur);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
.ak-preuve__mot strong {
    display: block;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}
.ak-preuve__mot small { display: block; font-size: 14px; color: var(--g1); }

/* 19/10/2026 — sa demande : « juste les chiffres en gras - et ajoute 99% de
   satisfaction », sur une ligne séparée par des points. (Le fond blanc, lui,
   se règle plus bas : voir « `.ak-preuve` DÉSIGNE DEUX COMPOSANTS ».)

   `flex-basis` 12em : sous cette place, la ligne passe sous les ronds au lieu
   de s'écraser à côté (≤ 560 px, la rangée passe à la ligne). */
.ak-preuve__ligne {
    flex: 1 1 12em;
    min-width: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--g1);
}
.ak-preuve__ligne strong {
    font-weight: 800;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.ak-preuve__sep { color: var(--g2); padding-inline: .2em; }

/* ── LA COLONNE DE DROITE ── */
.ak-scene {
    position: relative;
    /* Bridé, et mesuré sur la capture : sans cette limite le cadre 4/5
       atteignait 790 px de haut et le héros dépassait l'écran.

       `width: 100%` n'est PAS décoratif. Le cadre ne contient qu'un enfant
       positionné en absolu : sa largeur intrinsèque vaut donc zéro. Et une
       marge automatique sur un élément de grille annule l'étirement — la
       colonne s'effondrait à 0 px de large, photo comprise, sans rien dans
       la console. Vu à l'écran, jamais dans un journal. */
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
}

/* L'aplat glissé derrière la photo, et le halo sous l'ensemble. Sans eux,
   une photo posée sur du crème paraît découpée et collée. */
.ak-scene::before {
    content: '';
    position: absolute;
    inset: 26px -26px -26px 26px;
    /* UN CADRE, PLUS UN APLAT. Le rose plein derrière la photo se lisait
       comme une ombre teintée, un peu sale sur le crème. Un trait fin décalé
       fait le même travail — dire que la photo est POSÉE sur quelque chose —
       avec le dixième de la matière. Le voile de couleur reste, mais très
       en dessous du seuil de tache. */
    background: rgba(248,80,0,.045);
    border: 1.5px solid rgba(248,80,0,.28);
    border-radius: 34px;
}
.ak-scene::after {
    content: '';
    position: absolute;
    inset: -6% -12% -12% -6%;
    z-index: -1;
    background: radial-gradient(55% 50% at 50% 55%, rgba(248,80,0,.16), transparent 72%);
}

.ak-scene__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 32px;
    overflow: hidden;
    /* Le repli tant qu'aucune photo n'est déposée — un dégradé de marque
       plutôt qu'un rectangle vide, pour que le panneau reste habité. */
    background:
        radial-gradient(110% 80% at 25% 12%, rgba(248,80,0,.3), transparent 62%),
        linear-gradient(160deg, #241C18 0%, var(--fond-sombre) 65%);
    /* Basse et très diffuse : la photo doit paraître POSÉE, pas décollée. */
    /* Le liseré intérieur d'un point : sur un fond clair, un bord de photo
       sans arête paraît flou. Il ne se voit pas, il se sent. */
    box-shadow: 0 26px 56px -38px rgba(26,21,18,.55),
                inset 0 0 0 1px rgba(26,21,18,.08);
}
.ak-scene__photo picture { display: contents; }
.ak-scene__photo img { width: 100%; height: 100%; object-fit: cover; }

.ak-scene__marque {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.ak-scene__marque img { width: 110px; height: 110px; object-fit: contain; opacity: .92; }

/* ── LES CARTOUCHES FLOTTANTES ──
   Elles portent des faits COMPTÉS, pas des slogans. C'est ce qui les rend
   légitimes : une pastille « Qualité garantie » posée sur une photo n'est
   qu'un autocollant ; « 380 pièces en stock » se vérifie. */
.ak-flottant {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    background: var(--verre);
    backdrop-filter: blur(12px);
    border: 1px solid var(--trait);
    border-radius: var(--r-champ);
    box-shadow: 0 2px 4px rgba(26,21,18,.04), 0 14px 32px -20px rgba(26,21,18,.4);
    transition: transform var(--t-moyen) var(--e-sortie), box-shadow var(--t-moyen) var(--e-sortie);
}
.ak-flottant__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--r-pastille);
    background: var(--orange-doux);
    color: var(--orange);
}
.ak-flottant strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--encre);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.ak-flottant small { display: block; font-size: 12.5px; color: var(--g1); }

.ak-flottant--haut  { top: 9%;  left: -7%; }
.ak-flottant--bas   { bottom: 11%; right: -5%; }

/* ── L'ARRIVÉE ──
   Chaque élément monte de quatorze pixels en apparaissant, l'un après
   l'autre. Quatorze, pas quarante : un mouvement qu'on remarque est un
   mouvement raté. Le décalage suit l'ordre de lecture — étiquette, titre,
   phrase, boutons, preuve — de sorte que l'animation raconte le même
   parcours que la mise en page.

   `both` retient l'état de départ : sans lui, tout s'affiche une fraction
   de seconde avant de sauter à sa place. */
@keyframes ak-monte {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.ak-heros__oeil,
.ak-heros h1,
.ak-heros__texte,
.ak-heros__boutons,
.ak-preuve,
.ak-scene,
.ak-flottant {
    animation: ak-monte .62s var(--e-sortie) both;
}
.ak-heros h1        { animation-delay: .06s; }
.ak-heros__texte    { animation-delay: .12s; }
.ak-heros__boutons  { animation-delay: .18s; }
.ak-preuve          { animation-delay: .24s; }
.ak-scene           { animation-delay: .08s; }
.ak-flottant--haut  { animation-delay: .36s; }
.ak-flottant--bas   { animation-delay: .44s; }

/* Qui a demandé moins de mouvement n'en reçoit aucun — et surtout garde la
   page entière visible : `both` sans animation laisserait tout à zéro. */
@media (prefers-reduced-motion: reduce) {
    .ak-heros__oeil, .ak-heros h1, .ak-heros__texte, .ak-heros__boutons,
    .ak-preuve, .ak-scene, .ak-flottant { animation: none; }
}

/* ── LES SURVOLS ──
   Trois gestes, tous sous les quatre pixels. Le cadre respire, les
   cartouches se soulèvent, un logo se lève quand on le vise. */
.ak-scene__photo img { transition: transform var(--t-lent) var(--e-sortie); }
.ak-scene:hover .ak-scene__photo img { transform: scale(1.035); }
.ak-scene:hover .ak-flottant--haut { transform: translateY(-3px); }
.ak-scene:hover .ak-flottant--bas  { transform: translateY(3px); }

/* Le lien souligné : le trait s'écarte du mot au survol au lieu de changer
   de couleur seulement. */
.ak-lien-fort { text-decoration-color: var(--trait-fort); transition: color var(--t-vif) var(--e-sortie), text-underline-offset var(--t-vif) var(--e-sortie), text-decoration-color var(--t-vif) var(--e-sortie); }
.ak-lien-fort:hover { text-underline-offset: 7px; text-decoration-color: var(--orange); }

@media (max-width: 1040px) {
    .ak-heros > .ak-large {
        grid-template-columns: 1fr;
        gap: var(--e7);
        padding-block: var(--e7);
    }
    .ak-scene { max-width: 460px; margin-inline: auto; }
    .ak-scene::before { inset: 20px -20px -20px 20px; }
    .ak-flottant--haut { left: -4%; }
    .ak-flottant--bas  { right: -2%; }
}

@media (max-width: 560px) {
    .ak-heros::before { display: none; }
    /* LA RANGÉE DE LOGOS DÉBORDAIT — mesuré : la colonne du héros gonflait à
       432 px sur un écran de 390, et le titre comme les boutons se faisaient
       couper à droite. Une rangée flexible ne descend jamais sous sa largeur
       minimale, et une piste de grille `1fr` la suit. On l'autorise donc à
       passer à la ligne, et les logos rapetissent. */
    .ak-preuve { flex-wrap: wrap; gap: var(--e3); }
    .ak-preuve__gens > * { width: 40px; height: 40px; }
    .ak-heros h1 { font-size: clamp(30px, 8vw, 40px); }
    .ak-heros__boutons .ak-cta { width: 100%; justify-content: center; }
    /* Les cartouches rentrent dans le cadre : débordantes, elles sortaient
       de l'écran et provoquaient un défilement latéral. */
    .ak-flottant--haut { left: var(--e3); top: var(--e4); }
    .ak-flottant--bas  { right: var(--e3); bottom: var(--e4); }
    .ak-flottant { padding: var(--e2) var(--e3); }
    .ak-flottant strong { font-size: 13.5px; }
    .ak-flottant small  { font-size: 11.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 4 · LA BANDE DE SERVICES — d'après sa maquette du 19/08/2026
   ═══════════════════════════════════════════════════════════════════════

   Trois promesses en ligne, chacune : une icône bicolore, un titre gras,
   une ligne d'explication. Disposition et rythme repris au pixel près.

   L'ICÔNE BICOLORE est le seul vrai morceau de dessin ici. La maquette pose
   un tracé vert par-dessus une pastille ambre décalée. Aux couleurs AK, le
   tracé prend l'encre et la pastille l'orange — c'est le même contraste
   (un trait sombre, une tache chaude) transposé, et non deux couleurs
   prises au hasard.

   La pastille est en `::before` : aucun fichier, aucune image, elle suit la
   taille du texte et reste nette à tous les zooms.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-services {
    background: var(--blanc);
    border-bottom: 1px solid var(--trait);
}
.ak-services > .ak-large {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e6);
    padding-block: var(--e6);
}

.ak-service {
    display: flex;
    align-items: center;
    gap: var(--e4);
    justify-content: center;
}

.ak-service__ico {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    color: var(--encre);
}
/* La pastille orange, décalée sous le tracé — comme la maquette. */
.ak-service__ico::before {
    content: '';
    position: absolute;
    /* Mesuré sur sa maquette : la pastille fait un peu plus de la moitié du
       tracé et dépasse par le bas. Plus grosse, elle avale le dessin — vu à
       l'écran au premier essai. */
    right: 5px; bottom: 1px;
    width: 26px; height: 26px;
    border-radius: var(--r-pastille);
    background: var(--orange);
}
.ak-service__ico svg {
    position: relative;   /* au-dessus de la pastille */
    /* Un poil plus épais que le trait courant du site : à 40 px, 1.5 px
       paraît fragile à côté d'un aplat plein. */
    stroke-width: 1.7;
}

.ak-service strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--encre);
}
.ak-service small {
    display: block;
    margin-top: 3px;
    font-size: 14.5px;
    color: var(--g1);
}

@media (max-width: 900px) {
    .ak-services > .ak-large {
        grid-template-columns: 1fr;
        gap: var(--e4);
        padding-block: var(--e5);
    }
    /* En colonne, on aligne à gauche : trois blocs centrés les uns sous les
       autres donnent trois axes de lecture différents. */
    .ak-service { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 5 · LA BANNIÈRE ACCESSOIRES ET SA RANGÉE — 19/08/2026
   ═══════════════════════════════════════════════════════════════════════

   D'après sa maquette : une bannière CARRÉE à gauche, et à droite un titre,
   un lien de sortie, puis une rangée d'articles qui défile.

   Une seule bannière, et la rangée montre la MÊME famille qu'elle : la
   bannière dit « Accessoires », les vignettes sont des accessoires. Une
   rangée qui promet une famille et en montre une autre est un défaut
   d'étiquetage, pas un choix éditorial.

   ── LE DÉFILEMENT SANS UNE LIGNE DE SCRIPT ──

   `overflow-x: auto` et `scroll-snap` suffisent : la rangée se pousse au
   doigt sur téléphone, à la molette ou au pavé sur ordinateur, et chaque
   vignette vient se caler proprement. Un carrousel en JavaScript aurait
   ajouté trois cents lignes pour le même geste — et cesserait de marcher le
   jour où le script casse.

   ⚠ NOMS. Une première version s'appelait `.ak-vitrine` : la boutique porte
   déjà cette classe (sa mise en page « filtres + grille »), et la mienne,
   écrite plus bas, l'écrasait — boutique compressée, textes chevauchants.
   Une feuille unique est un espace de noms unique.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-bandes { background: var(--blanc); }

.ak-bandes > .ak-large {
    display: grid;
    /* Le carré à gauche garde une taille lisible sans manger la rangée ;
       `minmax(0, 1fr)` évite que les vignettes, indéformables, élargissent
       leur piste au-delà de l'écran. */
    grid-template-columns: minmax(240px, 24%) minmax(0, 1fr);
    gap: var(--e6);
    align-items: start;
    padding-block: var(--e8);
}

/* ── LA BANNIÈRE CARRÉE ── */
.ak-bande {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 1;
    overflow: hidden;
    padding: var(--e5);
    border-radius: var(--r-carte);
    background: var(--blanc);
    transition: transform var(--t-moyen) var(--e-sortie), box-shadow var(--t-moyen) var(--e-sortie);
}
.ak-bande picture { display: contents; }
.ak-bande__fond {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    transform-origin: 50% 75%;
    transition: transform var(--t-lent) var(--e-sortie);
}
/* Le voile : sans lui, le texte blanc devient illisible dès qu'une zone
   claire de la photo passe dessous — et sur celle-ci, elle passe. */
.ak-bande::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(178deg,
        rgba(26,21,18,.06) 0%, rgba(26,21,18,.34) 34%,
        rgba(26,21,18,.74) 68%, rgba(26,21,18,.94) 100%);
}
.ak-bande__oeil {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #FF8A4C;
}
.ak-bande__titre {
    margin-top: 5px;
    font-size: clamp(23px, 1.9vw, 29px);
    font-weight: 800;
    letter-spacing: -.038em;
    line-height: 1.03;
    color: var(--sur-couleur);
}
.ak-bande__mot {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,.8);
}
.ak-bande__fleche {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    margin-top: var(--e4);
    border-radius: var(--r-pastille);
    background: var(--orange);
    color: var(--sur-couleur);
    box-shadow: 0 10px 22px -12px rgba(248,80,0,.9);
    transition: transform var(--t-moyen) var(--e-sortie);
}
.ak-bande:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -30px rgba(26,21,18,.55); }
.ak-bande:hover .ak-bande__fond { transform: scale(1.055); }
.ak-bande:hover .ak-bande__fleche { transform: translateX(4px); }
.ak-bande:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; }

/* ── LA TÊTE DE RANGÉE ── */
.ak-rangee__tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e4);
    margin-bottom: var(--e5);
}
.ak-rangee__tete h2 {
    font-size: clamp(22px, 1.9vw, 28px);
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--encre);
}
.ak-rangee__tete a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--encre);
    transition: color var(--t-vif) var(--e-sortie);
}
.ak-rangee__tete a:hover { color: var(--orange); }
/* Le décalage se fait sur la FLÈCHE, en `transform` : animer le `gap` du
   lien remettait toute la ligne en page à chaque image. */
.ak-rangee__tete a svg { transition: transform var(--t-vif) var(--e-sortie); }
.ak-rangee__tete a:hover svg { transform: translateX(4px); }

/* ── LA RANGÉE QUI DÉFILE ── */
.ak-rail {
    display: flex;
    gap: var(--e4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    /* AUCUNE BARRE DE DÉFILEMENT — sa demande.
       La rangée avance seule toutes les trois secondes, se pousse au doigt,
       à la molette et au pavé : la barre n'apprenait rien et coupait la
       composition d'un trait gris. Le défilement, lui, reste entier —
       on cache la barre, jamais la fonction. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ak-rail::-webkit-scrollbar { display: none; }

.ak-tuile {
    flex: 0 0 auto;
    width: 168px;
    scroll-snap-align: start;
}
.ak-tuile__cadre {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: 14px;
    /* `--fond-photo` est la valeur MESURÉE aux quatre coins des photos du
       catalogue : le fond de la tuile et celui de la photo se confondent,
       et le produit paraît détouré sans l'être. */
    background: var(--fond-photo);
    overflow: hidden;
}
.ak-tuile__cadre img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 11%;
    transition: transform var(--t-ample) var(--e-sortie);
}
.ak-tuile:hover .ak-tuile__cadre img { transform: scale(1.07); }

.ak-tuile__coeur {
    position: absolute;
    top: 8px; right: 8px;
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 9px;
    background: var(--verre);
    color: var(--g1);
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-tuile__coeur:hover { background: var(--blanc); color: var(--orange); }

.ak-tuile__prix {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    margin-top: var(--e3);
    font-variant-numeric: tabular-nums;
}
.ak-tuile__prix strong {
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--encre);
}
/* Le prix barré ne paraît QUE s'il existe dans la fiche. Sur 380 articles,
   un seul en porte un — un prix rayé inventé est la plus vieille ficelle du
   commerce, et la plus vite repérée. */
.ak-tuile__prix s {
    font-size: 13.5px;
    color: var(--g2);
    text-decoration-thickness: 1.5px;
}
.ak-tuile__nom {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--g1);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── L'APPARITION AU DÉFILEMENT ──
   L'état caché n'est posé que si le script tourne (`.ak-js`, ajouté par lui
   dès sa première ligne). Script bloqué, la section reste simplement fixe et
   visible — jamais un bloc invisible. */
.ak-js .ak-revele {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--t-lent) var(--e-sortie), transform .7s var(--e-sortie);
}
.ak-js .ak-revele.est-vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .ak-js .ak-revele { opacity: 1; transform: none; transition: none; }
    .ak-bande, .ak-bande__fond, .ak-bande__fleche { transition: none; }
    .ak-rail { scroll-behavior: auto; }
}

@media (max-width: 900px) {
    .ak-bandes > .ak-large {
        /* `minmax(0, 1fr)` et NON `1fr`. Une piste `1fr` prend pour minimum
           la largeur de son contenu : la rangée de douze vignettes mesure
           1 950 px, la piste s'y étendait, et la bannière — qui partage la
           même colonne — avec elle. Mesuré : 1 952 px de large sur un écran
           de 390. Le défilement horizontal ne fonctionne que si la piste
           accepte d'être plus étroite que ce qu'elle contient. */
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e5);
        padding-block: var(--e7);
    }
    /* Même raison, un cran plus bas : l'enveloppe de la rangée ne doit pas
       se laisser pousser par elle. */
    .ak-bandes > .ak-large > * { min-width: 0; }
    /* En colonne, le carré n'a plus de raison d'être carré : il deviendrait
       une image immense sur un téléphone. */
    .ak-bande { aspect-ratio: 16 / 10; padding: var(--e4); }
    .ak-tuile { width: 148px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 6 · LES PRESTATIONS DE RÉPARATION — 19/08/2026
   ═══════════════════════════════════════════════════════════════════════

   Sa demande : 30 % à gauche pour un titre et un bouton, 70 % à droite pour
   des bannières carrées — écran, batterie, vitre arrière, plaquette.

   ── POURQUOI CETTE SECTION EST CLAIRE ET NON SOMBRE ──

   Juste au-dessus, la bannière « Accessoires » est une photo sombre. Deux
   blocs sombres l'un sous l'autre auraient fait un mur ; en clair, la page
   reprend son souffle et les quatre prestations se lisent comme une liste,
   pas comme quatre affiches.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-presta {
    background: var(--creme);
    border-top: 1px solid var(--trait);
}
.ak-presta > .ak-large {
    display: grid;
    /* 30 / 70, sa mesure. `space-between` met le reste dans la gouttière. */
    grid-template-columns: 30% 66%;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--e8);
}
.ak-presta > .ak-large > * { min-width: 0; }

/* ── LA COLONNE DE GAUCHE ── */
.ak-presta__oeil {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--orange);
}
.ak-presta h2 {
    margin-top: var(--e3);
    font-size: clamp(26px, 2.5vw, 38px);
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: 1.04;
    color: var(--encre);
    text-wrap: balance;
}
.ak-presta__mot {
    margin-top: var(--e4);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--g1);
    max-width: 34ch;
}
.ak-presta .ak-cta { margin-top: var(--e5); }

/* ── LES QUATRE CARRÉS ──
   REFAITS le 19/08 : la première version posait quatre PHOTOS du catalogue.
   Elles n'avaient ni la même nature ni la même échelle — deux téléphones
   détourés, une batterie minuscule, une photo d'outils plein cadre sur fond
   sombre. Aucun cadrage ne rattrape ça : quatre sujets photographiés dans
   quatre intentions différentes ne forment pas une rangée.

   Des icônes DESSINÉES, elles, partagent la même grille, la même épaisseur
   de trait et le même poids optique — la cohérence est dans le dessin, pas
   dans le recadrage. Deux d'entre elles (vitre arrière, plaquette)
   n'existaient pas dans le jeu : elles ont été tracées à la même norme,
   24 × 24, trait de 1,5, extrémités arrondies. */
/* CARRÉES, comme il l'a demandé au départ. Ce n'était pas le carré le
   problème, c'étaient les photos : quatre sujets photographiés dans quatre
   intentions différentes. La forme revient donc, avec le dessin en plus. */
.ak-presta__lot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e4);
}

.ak-presta-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1;
    gap: var(--e4);
    padding: var(--e5);
    border-radius: 20px;
    background: var(--blanc);
    transition: transform var(--t-moyen) var(--e-sortie), box-shadow var(--t-moyen) var(--e-sortie);
}
.ak-presta-carte:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 40px -28px rgba(26,21,18,.5);
}
.ak-presta-carte:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; }

/* La pastille de l'icône reprend le langage de la bande de services : un
   tracé sombre sur un aplat orange clair, qui se retourne au survol. */
.ak-presta-carte__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--orange-doux);
    color: var(--encre);
    transition: background var(--t-moyen) var(--e-sortie), color var(--t-moyen) var(--e-sortie);
}
.ak-presta-carte__ico svg { stroke-width: 1.6; }
.ak-presta-carte:hover .ak-presta-carte__ico { background: var(--orange); color: var(--sur-couleur); }

.ak-presta-carte strong {
    display: block;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.028em;
    line-height: 1.25;
    color: var(--encre);
}
.ak-presta-carte small {
    display: block;
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--g1);
}

/* La flèche reste discrète : elle marque le lien sans concurrencer le
   titre, et ne s'anime qu'au survol de sa carte. */
.ak-presta-carte__fleche {
    position: absolute;
    top: var(--e5); right: var(--e5);
    color: var(--g3);
    transition: color var(--t-vif) var(--e-sortie), transform var(--t-moyen) var(--e-sortie);
}
.ak-presta-carte:hover .ak-presta-carte__fleche { color: var(--orange); transform: translateX(3px); }

@media (max-width: 1100px) {
    .ak-presta > .ak-large {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e6);
        align-items: start;
    }
    .ak-presta__mot { max-width: none; }
}

@media (max-width: 1100px) {
    .ak-presta__lot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    /* Sous 560 px, le carré tomberait à 150 px de côté : la carte s'allonge
       et l'icône passe à côté du texte. */
    .ak-presta__lot { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
    .ak-presta-carte {
        flex-direction: row;
        align-items: center;
        aspect-ratio: auto;
        padding: var(--e4);
    }
    .ak-presta > .ak-large { padding-block: var(--e7); }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTIONS 8 À 12 · LES OUTILS ET LES REPÈRES — 20/08/2026
   ═══════════════════════════════════════════════════════════════════════

   Cinq blocs ajoutés d'un coup, et une seule règle pour tous : rien n'y est
   décidé par le site. Les prix viennent du référentiel des pannes de l'ERP,
   les ventes du journal des ventes, les marques du référentiel, le lien de
   l'application des réglages. Le jour où l'atelier change un prix, la page
   change avec lui.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LA FRISE DES MARQUES ──
   Une bande basse, juste sous les services. En gris, elle répond à la
   question « vous faites du Tecno ? » sans prendre la place d'une section.
   La couleur ne revient qu'au survol : dix-huit logos en couleur sur une
   même ligne, c'est un patchwork. */
.ak-marques {
    background: var(--blanc);
    border-bottom: 1px solid var(--trait);
}
.ak-marques > .ak-large {
    display: flex;
    align-items: center;
    gap: var(--e6);
    padding-block: var(--e4);
}

/* ── LA FRISE DÉFILE, SANS UNE LIGNE DE SCRIPT ──
   La liste est écrite DEUX FOIS dans la page ; on translate la première de
   sa propre largeur plus la gouttière, et au moment où elle a fini son
   voyage la seconde occupe exactement sa place. L'œil ne voit aucune
   couture, et la boucle ne « saute » jamais — c'est ce décalage d'une
   gouttière que la plupart des frises oublient.

   La copie est marquée `aria-hidden` : un lecteur d'écran n'a aucune raison
   d'annoncer dix-huit marques deux fois.

   Les bords s'effacent en fondu (`mask-image`) : sans lui, les logos
   apparaissent et disparaissent d'un coup contre le bord, ce qui trahit le
   truc et fait saccadé même quand ça ne l'est pas. */
.ak-marques__piste {
    display: flex;
    gap: var(--e6);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ak-marques__lot {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--e6);
    animation: ak-frise 38s linear infinite;
}
@keyframes ak-frise {
    to { transform: translateX(calc(-100% - var(--e6))); }
}
/* On s'arrête quand on la survole : un logo qu'on veut lire ne doit pas
   fuir sous le curseur. */
/* WCAG 2.2.2 exige un moyen d'arrêter un mouvement de plus de cinq
   secondes DANS la page. Le survol n'en est pas un pour qui navigue au
   clavier : le focus arrête donc la frise, lui aussi. */
.ak-marques__piste:hover .ak-marques__lot,
.ak-marques__piste:focus-within .ak-marques__lot { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .ak-marques__lot { animation: none; }
    .ak-marques__piste { overflow-x: auto; scrollbar-width: none; }
}
/* Des logos PLUS GRANDS dans une bande qui reste basse : c'est le contraste
   entre les deux qui donne la ligne longue et fine. Élargir la bande aurait
   fait une section de plus ; élargir les logos seuls suffit. */
/* LES LOGOS EN COULEUR — 22/08/2026, sa demande.
   Ils étaient désaturés au repos, la couleur ne venant qu'au survol : un
   geste qui ne se découvre qu'à la souris, donc jamais sur téléphone, où
   se lit pourtant l'essentiel du trafic. Les marques sont reconnues à leur
   couleur — le bleu de Samsung, le rouge d'Itel — et c'est précisément ce
   que cette frise est là pour dire. Reste le grandissement au survol, qui
   marque le geste sans rien cacher. */
.ak-marques__lot img {
    flex: none;
    width: 116px; height: 52px;
    object-fit: contain;
    transition: opacity var(--t-moyen) var(--e-sortie), transform var(--t-moyen) var(--e-sortie);
}
.ak-marques__lot img:hover { opacity: 1; transform: scale(1.06); }

/* ── COMMENT ÇA SE PASSE ──
   Quatre étapes reliées par un filet. Le filet n'est pas décoratif : c'est
   lui qui dit que l'ordre compte, là où quatre cartes séparées diraient que
   ce sont quatre options. */
.ak-etapes { background: var(--blanc); }
.ak-etapes > .ak-large { padding-block: var(--e8); }
.ak-etapes__tete { max-width: 46ch; }
.ak-etapes__tete h2 {
    margin-top: var(--e3);
    font-size: clamp(26px, 2.5vw, 38px);
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: 1.05;
    color: var(--encre);
}
.ak-etapes__lot {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e5);
    margin-top: var(--e7);
}
/* Le filet passe DERRIÈRE les numéros, à leur hauteur. */
.ak-etapes__lot::before {
    content: '';
    position: absolute;
    top: 22px; left: 8%; right: 8%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--trait-fort) 0 6px, transparent 6px 12px);
}
.ak-etape { position: relative; }
.ak-etape span {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: var(--r-pastille);
    background: var(--fond-sombre);
    color: var(--sur-couleur);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    /* Un anneau de la couleur du fond, pour que le filet s'interrompe
       proprement derrière le numéro plutôt que de le traverser. */
    box-shadow: 0 0 0 6px var(--blanc);
}
.ak-etape:first-child span { background: var(--orange); }
.ak-etape strong {
    display: block;
    margin-top: var(--e4);
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.028em;
    color: var(--encre);
}
.ak-etape small {
    display: block;
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--g1);
}

/* ── LE BANDEAU DE L'APPLICATION ── 24/08/2026, troisième état : SANS FOND.
   La photo est détourée : elle n'a plus besoin d'un panneau sombre pour cacher
   le sien. On retire donc tout — carte, crème, noir — et l'appareil se pose
   directement sur la page. C'est ce que le détourage permet, et rien d'autre
   ne le permettrait : sur fond blanc, une photo à fond noir serait un timbre.

   ⚠ L'ÉCRAN DU TÉLÉPHONE EST BLANC (#FFFFFF), la page aussi. L'écran se fond
   donc dans le papier, et c'est le châssis noir — 21:1 de contraste — qui
   dessine l'appareil. Voulu : le logo paraît posé sur la page. Si l'écran doit
   se détacher, il faudra une capture d'écran à la place du démarrage. */
.ak-appli { background: var(--creme); padding-block: var(--e7); }
/* LA MAIN SORT DU BAS DE LA SECTION.
   Le détourage se termine par une coupe FRANCHE : 420 px de matière pleine sur
   la dernière ligne, le poignet tranché à l'horizontale par le cadre de la
   photo. Sur le panneau sombre, noir sur noir, on ne la voyait pas ; sur le
   crème, c'est un trait net au milieu du vide. On ne la masque pas, on
   l'UTILISE : l'image descend jusqu'au bord de la section, et la coupe devient
   la limite entre le crème et le pied de page. La main entre alors dans le
   champ par le bas, ce qui est exactement ce que la photo raconte. */
.ak-appli--visuel {
    padding-bottom: 0;
    /* LES MAINS PASSENT DERRIÈRE LE PIED — sa correction du 24/08.
       Elles passaient DEVANT : il fallait alors fondre leur bas pour cacher la
       coupe franche du détourage, et veiller à ne pas recouvrir le numéro de
       téléphone. Derrière, c'est le pied lui-même qui les coupe, d'un bord net
       et voulu : la main entre sous la bande sombre comme sous une table. Plus
       rien à masquer, plus rien à éviter.
       La section garde `overflow: visible` pour la laisser descendre, mais
       cesse de passer devant. */
    position: relative;
    z-index: 0;
    overflow: visible;
    /* ⚠ MAIS PAS SUR LES CÔTÉS — 06/10/2026. La lueur violette (plus bas)
       déborde de 12 % à droite : sur téléphone, l'accueil et /reparation
       faisaient 437 px de large pour un écran de 390, et le navigateur
       annulait toute transition entre ces pages et les autres (« Viewport
       size changed »). `clip` et non `hidden` : il coupe les côtés sans
       transformer la section en zone de défilement, et laisse la main
       descendre derrière le pied. */
    overflow-x: clip;
}
/* Le pied recouvre. Il vient après dans le document, mais un `z-index` posé
   ailleurs peut renverser cet ordre : on l'affirme ici plutôt que de compter
   dessus. */
.ak-pied { position: relative; z-index: 2; }
.ak-appli__carte {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e5);
    align-items: center;
    position: relative;
}

/* ── LE FOND ÉPOUSE LA MAIN ── 24/08/2026, sa demande.
   La main est éclairée d'un violet froid — relevé dans l'image elle-même :
   #131125, #413768, #4E3F71, #594D82, #72659C — et elle se posait sur un crème
   chaud sans rien qui les relie. Deux univers de lumière côte à côte, et
   l'objet paraît collé.
   Une lueur prise dans SA propre palette, très diluée, tombe derrière lui : le
   crème vire imperceptiblement vers le violet à mesure qu'on s'approche de la
   main. Ce n'est pas une décoration, c'est la lumière de la photo qui déborde
   sur la page. Le texte, lui, reste sur le crème pur — la lueur meurt bien
   avant lui. */
.ak-appli--visuel .ak-appli__carte::before {
    content: '';
    position: absolute;
    /* Elle déborde en bas et à droite : la main y entre, et la lueur doit
       l'accompagner jusque dans le pied de page. */
    inset: -10% -12% -30% 34%;
    background:
        radial-gradient(58% 52% at 62% 62%, rgba(89, 77, 130, .20) 0%, rgba(89, 77, 130, 0) 68%),
        radial-gradient(38% 34% at 58% 82%, rgba(19, 17, 37, .14) 0%, rgba(19, 17, 37, 0) 70%);
    filter: blur(6px);
    pointer-events: none;
    z-index: 0;
}
/* Le contenu passe devant la lueur. */
.ak-appli__mot, .ak-appli__visuel { position: relative; z-index: 1; }
.ak-appli--visuel .ak-appli__carte {
    /* UNE MESURE PLUS COURTE QUE LE RESTE DU SITE, et c'est voulu.
       Les sections de contenu s'étalent sur 1 320 px parce qu'elles portent des
       grilles de cartes. Ici il n'y a que deux objets : une phrase et un
       appareil. Étalés sur 1 320, ils se regardaient de loin — 420 px d'encre
       à gauche, 440 à droite, et un couloir vide entre les deux. Ramenés à
       1 120, ils se répondent. */
    max-width: 1280px;
    margin-inline: auto;
    /* L'appareil est le sujet de la section : à 340 px dans une largeur de
       1 320, il faisait figurine. Un tiers de la largeur lui rend son rang. */
    /* 56 % à l'image — sa demande du 24/08 : « agrandis bien ».
       La borne n'est plus la grille mais le TITRE : à 42 px, « Suivez votre
       réparation » demande environ 470 px d'encre, et la colonne de gauche ne
       doit pas descendre sous ça sans le faire retomber sur trois lignes. */
    grid-template-columns: minmax(0, 1fr) minmax(320px, 56%);
    gap: var(--e5);
    gap: var(--e6);
    /* Le texte se centre, l'image se cale en bas : alignés tous deux en bas,
       ils laissaient 150 px de vide au-dessus de la phrase, dans le coin le
       plus lu de la section. */
    align-items: center;
}
/* Le texte porte sa propre respiration basse, puisque la section n'en a plus. */
.ak-appli--visuel .ak-appli__mot { padding-block: var(--e6) var(--e7); }

/* L'ORANGE DE MARQUE NE SE LIT PAS EN PETIT SUR CLAIR.
   #F85000 sur le crème donne 3,15 de contraste — le seuil est 4,5 pour un
   texte de 11 px, et celui-ci en fait 11. Assombri de 20 %, il passe à 4,68
   sans cesser d'être l'orange AK : à cette taille, l'œil lit une teinte, pas
   un code. Sur fond sombre, l'orange plein reste employé — il y vaut 5,29.
   ⚠ `.ak-presta__oeil` porte le même défaut, sur toutes les sections claires
   du site. Non touché ici : c'est une décision de charte, pas de section. */
.ak-appli p.ak-appli__oeil {
    font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #C64000; margin: 0; max-width: none;
}
.ak-appli h2 {
    margin-top: var(--e3);
    font-size: clamp(26px, 3.2vw, 42px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.06;
    color: var(--encre);
}
.ak-appli p {
    margin-top: var(--e3);
    max-width: 46ch;
    /* 15 px sous un titre de 42 px : le saut était trop grand, la phrase
       paraissait une légende. Un cran plus haut la remet au rang d'argument. */
    font-size: 16.5px;
    line-height: 1.62;
    color: var(--g1);
}
.ak-appli__mot { padding-block: var(--e6) 0; }
.ak-appli__boutons { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }

/* Sur fond clair, le pavé reprend le sombre : c'est le contraste qui fait le
   bouton, pas sa couleur. */
.ak-magasin {
    display: inline-flex;
    align-items: center;
    gap: var(--e3);
    height: 56px;
    padding-inline: var(--e5);
    border-radius: 14px;
    background: var(--fond-sombre);
    color: var(--sur-couleur);
    transition: background var(--t-vif) var(--e-sortie), transform var(--t-vif) var(--e-sortie);
}
.ak-magasin:hover { background: var(--fond-sombre-2); transform: translateY(-2px); }
/* LE LOGO DU MAGASIN, EN MASQUE.
   Les fichiers sont des WebP monochromes à fond transparent : posés en image,
   ils garderaient leur bleu nuit d'origine — invisible sur le bouton sombre,
   trop lourd sur le bouton en attente. Posés en MASQUE, ils prennent la
   couleur du texte, exactement comme les icônes dessinées du site. C'est la
   même règle pour tout le monde, et le survol la suit sans une ligne de plus. */
.ak-magasin__logo {
    width: 24px; height: 24px; flex: none;
    background-color: currentColor;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain;    mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.ak-magasin__logo--play {
    -webkit-mask-image: url("/assets/img/logo-play-store.webp");
            mask-image: url("/assets/img/logo-play-store.webp");
}
.ak-magasin__logo--apple {
    -webkit-mask-image: url("/assets/img/logo-app-store.webp");
            mask-image: url("/assets/img/logo-app-store.webp");
}
.ak-magasin small { display: block; font-size: 11px; opacity: .7; }
.ak-magasin strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
/* Le magasin sans lien : il le dit, et ne se clique pas. Un bouton qui ne mène
   nulle part est pire que pas de bouton. */
/* `--g2` DONNAIT 2,84 DE CONTRASTE SUR LE CRÈME — mesuré. Sous le seuil de 4,5
   pour un texte, et même sous celui de 3 pour un pictogramme : « App Store »
   ne se lisait pas, et le logo qui en hérite la couleur pas davantage. `--g1`
   monte à 5,55 tout en restant nettement en retrait du bouton plein — c'est le
   contraste avec l'autre bouton qui dit « pas encore », pas l'illisibilité. */
.ak-magasin--attente {
    background: transparent;
    color: var(--g1);
    border: 1.5px dashed var(--trait-fort);
    cursor: default;
}
.ak-magasin--attente:hover { background: transparent; transform: none; }

/* ── LE VISUEL ──
   Rien derrière lui : ni cadre, ni halo, ni ombre portée. Une ombre inventerait
   un sol que la photo n'a pas — la main vient du bas du champ, elle ne repose
   sur rien. */
/* LE DÉBORD. Le poignet descend de 72 px DANS le pied de page : c'est là que
   sa coupe se termine, dans le sombre, et le fondu des 90 dernières lignes de
   l'image achève de l'y dissoudre. Une valeur en pixels et non en pourcentage :
   un pourcentage de marge se calcule sur la LARGEUR du parent, pas sur la
   hauteur — il aurait varié au gré de la colonne. */
.ak-appli__visuel { justify-self: end; align-self: end; width: 100%; max-width: 520px;
    /* ELLE SORT AUSSI PAR LE HAUT — sa demande du 24/08.
       Le haut de l'appareil dépasse dans le blanc de la section précédente :
       l'objet cesse d'être rangé dans sa bande, il la traverse de part en part.
       La borne est mesurée, pas choisie : sous la colonne de l'image, la
       section du dessus porte des noms de produits à 64 px de son bord bas
       (accueil) et du texte de FAQ à 75 px (page réparation). 60 px — sa
       valeur du 24/08 — passent encore, mais de peu : 4 px séparent le haut de
       l'appareil des noms de produits de l'accueil. Au-delà on mordrait.

       La valeur en vaut 108 : calée en bas de sa rangée, l'image doit d'abord
       absorber les 48 px de remplissage haut de la section avant de commencer à
       en sortir. À -40 elle ne faisait que raccourcir la section sans jamais la
       dépasser — mesuré, 8 px encore À L'INTÉRIEUR. */
    margin-top: -108px;
    /* Elle déborde de la gouttière à droite : le sujet gagne 40 px sans les
       prendre au texte, et l'appareil cesse d'être rangé dans une colonne. */
    margin-right: calc(var(--gouttiere) * -1);
    /* 96 px sous la bande, puisque c'est elle qui coupe désormais. La borne
       n'est plus le texte du pied — il est au-dessus — mais la lisibilité de
       ce qu'on montre : au-delà, on cacherait la main plus qu'on ne la
       ferait entrer. */
    margin-bottom: -96px;
    /* ELLE NE DOIT RIEN INTERCEPTER. Passée devant le pied, elle recouvrait la
       boîte du numéro de téléphone — l'action principale du pied. Même
       invisible à cet endroit, une image capte les clics : le lien `tel:`
       devenait inutilisable sur toute la largeur du poignet. */
    pointer-events: none; }
.ak-appli__visuel picture, .ak-appli__visuel img {
    display: block;
    width: 100%;
    height: auto;
}
/* CHAQUE VISUEL SELON SA FORME.
   Les deux n'ont pas le même rapport : l'accueil porte un PORTRAIT (668 × 996),
   la page réparation un CARRÉ (2110 × 2042). Une seule largeur pour les deux
   donnait 1 029 px de haut au portrait — une section de 981 px, presque un
   écran entier pour un argument secondaire — quand le carré se contentait
   de 668.
   Borner par la hauteur (`max-height` + `width: auto`) semblait plus élégant :
   c'était un piège. Avec `srcset`, `width: auto` fait retomber le navigateur
   sur la taille NATIVE de la source qu'il a choisie — l'image passait de 682 à
   384 px selon la largeur de fenêtre, sans logique visible. On garde donc une
   largeur pilotée, et c'est la PAGE qui dit laquelle. */
.ak-appli--carre .ak-appli__visuel { max-width: 760px; }

/* ── L'ENTRÉE DU TÉLÉPHONE ── 24/08/2026, sa demande d'une belle animation.
   Le geste est celui de la photo : une main QUI LÈVE un téléphone. L'appareil
   monte donc de plus bas et plus longtemps que le reste (56 px en 1,1 s contre
   14 px en 420 ms pour le texte), et part 180 ms APRÈS lui — on lit d'abord la
   promesse, l'objet arrive ensuite. L'échelle légèrement réduite au départ
   ajoute la profondeur sans se voir.

   La courbe est plus « lancée » que celle du site : elle démarre vite et
   s'installe longuement, ce qui donne le poids d'un objet qu'on soulève,
   là où la courbe générique convient à un bloc de texte qui se pose. */
.ak-js .ak-appli__visuel {
    opacity: 0;
    transform: translateY(56px) scale(.965);
    transition: opacity .85s var(--e-sortie) .18s,
                transform 1.1s cubic-bezier(.16, .84, .28, 1) .18s;
    will-change: transform, opacity;
}
.ak-js .ak-appli__visuel.est-vu { opacity: 1; transform: none; }

/* Une fois posé, il RESPIRE. Huit pixels sur six secondes : à peine
   perceptible, et c'est la condition pour que ce ne soit pas kitsch — une main
   qui tient un téléphone n'est jamais parfaitement immobile. L'animation vit
   sur le <picture>, pas sur le conteneur, pour ne pas écraser la transformation
   de l'entrée. `will-change` retombe une fois l'entrée finie : le laisser
   réserverait une couche de composition pour rien, sur toutes les pages. */
.ak-js .ak-appli__visuel.est-vu { will-change: auto; }
/* LA RESPIRATION NE REMONTE PLUS. Elle levait l'image de 8 px à mi-course :
   comme le bas de la photo était calé PILE sur la limite, ces 8 px découvraient
   une bande de crème sous le poignet et rendaient la coupe visible une seconde
   sur trois — c'est ce qu'il a vu. Le mouvement se fait maintenant vers le
   BAS : le point haut du souffle est la position de repos, et le poignet
   s'enfonce dans le sombre au lieu d'en sortir. */
.ak-js .ak-appli__visuel.est-vu picture {
    animation: ak-respire 6s cubic-bezier(.45, 0, .55, 1) 1.35s infinite;
}
@keyframes ak-respire {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* QUI DEMANDE MOINS DE MOUVEMENT N'EN REÇOIT AUCUN — pas même la respiration,
   qui est justement le genre d'animation continue que ce réglage vise. */
@media (prefers-reduced-motion: reduce) {
    .ak-js .ak-appli__visuel { opacity: 1; transform: none; transition: none; }
    .ak-js .ak-appli__visuel.est-vu picture { animation: none; }
}

@media (max-width: 1000px) {
    /* Empilé, le visuel passe DESSOUS : on lit d'abord ce que l'application
       fait, on la voit ensuite. L'inverse ferait défiler une photo avant
       d'avoir donné une raison de la regarder. */
    .ak-appli--visuel .ak-appli__carte { grid-template-columns: minmax(0, 1fr); }
    .ak-appli--visuel .ak-appli__mot { padding-block: 0 var(--e6); }
    /* Débord réduit à proportion : l'image est plus petite, 72 px y mordraient
       trop haut dans le pied. */
    /* `.ak-appli--carre .ak-appli__visuel` vaut 0-2-0 contre 0-1-0 pour cette
       règle : sans le même préfixe, le carré gardait ses 760 px en mobile et
       s'affichait PLUS GRAND à 760 px de fenêtre qu'à 1 280. */
    /* `margin-top: 0` : le débord par le haut n'a de sens qu'en deux colonnes.
       Empilée, l'image se retrouve SOUS les boutons — les -96 px la faisaient
       remonter de 32 px dessus, mesuré à 900, 760 et 400 px de large. */
    .ak-appli__visuel,
    .ak-appli--carre .ak-appli__visuel { justify-self: center; max-width: 420px;
        margin-top: var(--e5); margin-bottom: -56px; margin-right: 0; }
}

@media (max-width: 1000px) {
    .ak-etapes__lot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e6); }
    .ak-etapes__lot::before { display: none; }
    .ak-appli > .ak-large { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
    .ak-etapes__lot { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION 7 · LES TÉMOIGNAGES — d'après sa maquette du 19/08/2026
   ═══════════════════════════════════════════════════════════════════════

   Disposition reprise au trait : un filet et un mot en surtitre, un grand
   titre en deux teintes, deux cartes blanches. Dans chacune, un pétale
   sombre porte le portrait, le nom et le métier s'alignent à droite, les
   étoiles dessous, et un guillemet en pastille marque le coin.

   ⚠ La section ne paraît QUE si `config('site.temoignages')` est rempli.
   Vérifié : AK n'a aucun avis saisi nulle part. Deux clients inventés avec
   leur métier, leur note et leur visage, c'est la chose la plus facile à
   démentir sur un site de quartier.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-avis-sec {
    background: var(--creme);
    text-align: center;
}
.ak-avis-sec > .ak-large { padding-block: var(--e8); }

.ak-avis-sec__oeil {
    display: inline-flex;
    align-items: center;
    gap: var(--e3);
    font-size: 15px;
    font-weight: 600;
    color: var(--g1);
}
/* Le filet de la maquette : une barre courte, à gauche du mot. */
.ak-avis-sec__oeil::before {
    content: '';
    width: 26px; height: 2px;
    background: var(--orange);
    border-radius: 2px;
}

.ak-avis-sec h2 {
    margin-top: var(--e3);
    font-size: clamp(28px, 3.1vw, 46px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.04;
    color: var(--encre);
}
.ak-avis-sec h2 em { font-style: normal; color: var(--orange); }

/* ── LA RANGÉE DE CARTES ──
   Deux visibles à la fois ; au-delà, la rangée défile, sans barre, comme
   celle des accessoires. */
.ak-avis-sec .ak-rail {
    margin-top: var(--e7);
    gap: var(--e5);
    text-align: left;
    /* Deux pixels de marge intérieure : sans eux, l'ombre des cartes se
       faisait couper au bord du cadre de défilement. */
    padding: 2px;
}
.ak-temoin {
    flex: 0 0 auto;
    width: calc((100% - var(--e5)) / 2);
    scroll-snap-align: start;
    background: var(--blanc);
    border-radius: 22px;
    box-shadow: 0 2px 4px rgba(26,21,18,.03), 0 18px 40px -32px rgba(26,21,18,.45);
    overflow: hidden;
}

.ak-temoin__tete {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--e5);
    padding-right: var(--e5);
}

/* LE PÉTALE. C'est le geste de la maquette : un aplat sombre qui part du
   coin haut-gauche et s'arrondit franchement en bas à droite, avec le
   portrait posé dedans. Un simple rond n'aurait pas la même tenue. */
.ak-temoin__petale {
    flex: none;
    display: grid;
    place-items: center;
    padding: var(--e4);
    background: var(--fond-sombre);
    border-radius: 0 0 96px 0;
}
.ak-temoin__petale img,
.ak-temoin__petale span {
    width: 92px; height: 92px;
    border-radius: var(--r-pastille);
    border: 3px solid var(--sur-couleur);
    object-fit: cover;
}
/* Sans portrait : les initiales. Une silhouette générique ferait plus faux
   qu'un vide assumé. */
.ak-temoin__petale span {
    display: grid;
    place-items: center;
    background: var(--fond-sombre-2);
    color: var(--sur-couleur);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.ak-temoin__nom {
    display: block;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--encre);
}
.ak-temoin__role {
    display: block;
    margin-top: 2px;
    font-size: 14.5px;
    color: var(--g1);
}

.ak-temoin__notes {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: var(--e3);
    color: var(--orange);
}
.ak-temoin__notes .eteinte { color: var(--g3); }
.ak-temoin__notes strong {
    margin-left: 6px;
    font-size: 15px;
    font-weight: 800;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}

/* Le guillemet en pastille, calé en haut à droite. */
.ak-temoin__guillemet {
    position: absolute;
    top: var(--e5); right: var(--e5);
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    border-radius: var(--r-pastille);
    background: var(--creme);
    color: var(--g2);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 40px;
    line-height: 0;
    padding-top: 18px;
}

.ak-temoin__texte {
    padding: var(--e5);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--g1);
}

@media (max-width: 900px) {
    .ak-avis-sec > .ak-large { padding-block: var(--e7); }
    /* Une carte à la fois : deux moitiés sur un téléphone donneraient deux
       colonnes de six mots. */
    .ak-temoin { width: 86%; }
    .ak-temoin__petale { border-radius: 0 0 72px 0; padding: var(--e3); }
    .ak-temoin__petale img, .ak-temoin__petale span { width: 72px; height: 72px; }
    .ak-temoin__guillemet { width: 42px; height: 42px; font-size: 32px; padding-top: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CE QUI RESTE DE L'ANCIENNE FICHE PRODUIT — 13/10/2026
   ═══════════════════════════════════════════════════════════════════════

   La fiche a été refaite le 13/10 (bloc « LA FICHE PRODUIT REFAITE », en fin
   de feuille) et son ancien habillage retiré à sa demande : 850 lignes, dont
   125 règles que plus aucune page ni aucun script n'emploie. Ne restent que
   trois morceaux encore servis : la visionneuse, que la fiche refaite reprend
   telle quelle ; les pastilles, de la demande de réparation et du SAV ; le
   texte riche, des pages légales. */

/* ══ LA VISIONNEUSE ══════════════════════════════════════════════════════
 * Plein écran, fond sombre, molette pour zoomer, glisser pour déplacer,
 * flèches et clavier pour changer de photo. Elle est le zoom du TACTILE, où
 * le survol n'existe pas. */
.ak-loupe {
    position: fixed; inset: 0; z-index: 200;
    display: none; place-items: center;
    background: rgba(12, 10, 9, .93);
    backdrop-filter: blur(2px);
}
.ak-loupe[open] { display: grid; }
.ak-loupe__scene {
    width: min(94vw, 1100px); height: min(88vh, 1100px);
    display: grid; place-items: center; overflow: hidden;
    touch-action: none;
}
.ak-loupe__scene img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    transform: scale(var(--k, 1)) translate(var(--tx, 0px), var(--ty, 0px));
    transition: transform .12s linear;
    cursor: zoom-in; user-select: none;
}
.ak-loupe__scene.est-grossi img { cursor: grab; }
.ak-loupe__scene.est-tire img { cursor: grabbing; transition: none; }
.ak-loupe__bouton {
    position: absolute; z-index: 2;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(255, 255, 255, .12); color: #fff;
    transition: background var(--t-vif) var(--e-sortie);
}
.ak-loupe__bouton:hover { background: rgba(255, 255, 255, .24); }
.ak-loupe__bouton[disabled] { opacity: 0; pointer-events: none; }
.ak-loupe__fermer { top: 18px; right: 18px; }
.ak-loupe__prec { left: 18px; top: 50%; translate: 0 -50%; }
.ak-loupe__suiv { right: 18px; top: 50%; translate: 0 -50%; }
.ak-loupe__compte {
    position: absolute; bottom: 20px; left: 50%; translate: -50% 0;
    color: rgba(255, 255, 255, .72); font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

/* Les pastilles de choix — demande de réparation, SAV. */
.ak-pastilles { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ── LE TEXTE D'UNE DESCRIPTION ──
   Elle vient de l'ERP en HTML simple — des paragraphes, des listes, du gras.
   On l'habille ICI plutôt que dans le contenu : une description qui porterait
   sa propre mise en forme ne suivrait pas la charte, et survivrait à tout
   changement de design. C'est exactement le défaut qu'on a retiré des textes
   repris de l'ancien site, dont les couleurs étaient écrites en dur.

   ⚠ Ce bloc avait disparu en réécrivant la fiche d'après la maquette : les
   listes s'affichaient alors sans puce ni retrait, collées à la marge. */
.ak-texte {
    max-width: 72ch;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--encre-2);
}
.ak-texte p { margin-bottom: var(--e4); }
.ak-texte p:last-child { margin-bottom: 0; }
.ak-texte strong, .ak-texte b { color: var(--encre); font-weight: 700; }
.ak-texte ul, .ak-texte ol {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    margin-bottom: var(--e4);
}
.ak-texte li { position: relative; padding-left: var(--e5); }
.ak-texte li::before {
    content: '';
    position: absolute;
    left: 0; top: .62em;
    width: 6px; height: 6px;
    border-radius: 99px;
    background: var(--orange);
}
.ak-texte h3, .ak-texte h4 {
    font-size: 17px;
    margin-block: var(--e5) var(--e3);
}

/* ═══════════════════════════════════════════════════════════════════════
   LA CONNEXION — pleine page, reprise le 19/08/2026 (« un peu fade »)
   ═══════════════════════════════════════════════════════════════════════

   La première version était juste : pleine page, photo à gauche, formulaire
   à droite. Mais PLATE — deux rectangles côte à côte, un formulaire perdu au
   milieu d'un grand blanc, aucune profondeur.

   Ce qui la relève, et pourquoi chaque chose :

     · UNE COUPE ASYMÉTRIQUE (55/45) plutôt que deux moitiés égales. Deux
       rectangles identiques n'ont pas de sujet ; ici la photo domine et le
       formulaire se pose à côté.

     · DE LA PROFONDEUR. Le côté du formulaire est sur fond crème, et le
       formulaire lui-même sur une carte blanche qui flotte. Un champ posé à
       même le fond n'a rien pour se détacher.

     · UN COIN ARRONDI CÔTÉ PHOTO, qui la fait chevaucher le fond. C'est ce
       détail-là qui distingue une mise en page composée de deux blocs
       accolés.

     · DE L'ÉCHELLE. Le titre passe de 30 à 44 px, avec un interlettrage
       serré. Sur une page qui ne fait qu'une chose, elle peut se permettre
       d'être grande.

     · UN VOILE SUR LA PHOTO, du transparent vers le sombre en bas. Sans lui,
       le logo blanc disparaît sur les zones claires — et le bord bas de la
       photo coupe net.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LA PAGE TIENT DANS L'ÉCRAN, SANS DÉFILEMENT ──
   Sa demande : « pas de défilement, tout doit être fixe ».
   C'est juste pour une page qui ne fait qu'une chose — voir le bouton sans
   descendre est la moitié du travail d'un écran de connexion.

   `100dvh` et non `100vh` : sur un téléphone, `vh` compte la hauteur SANS
   les barres du navigateur, donc la page dépasse toujours d'une centaine de
   pixels et défile quand même. `dvh` suit la hauteur réelle.

   Le contenu est calibré pour tenir dès 640 px de haut. En dessous — un
   écran vraiment court, ou un zoom élevé — la colonne du formulaire défile
   seule plutôt que de couper le bouton : un formulaire qu'on ne peut pas
   valider serait pire qu'un défilement. */
body.ak-nue {
    background: var(--creme);
    height: 100dvh;
    overflow: hidden;
}

.ak-nue__page {
    display: grid;
    grid-template-columns: 55fr 45fr;
    height: 100dvh;
}

/* ── LA PHOTO ── */
.ak-nue__photo {
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* Le fond de repli pendant le chargement — et tant que la photo n'a pas
       été déposée. Un dégradé plutôt qu'un aplat : le panneau reste habité
       même sans image. */
    background:
        radial-gradient(120% 90% at 20% 10%, rgba(248,80,0,.22), transparent 60%),
        linear-gradient(160deg, #241C18 0%, var(--fond-sombre) 60%);
    border-radius: 0 var(--r-carte) var(--r-carte) 0;
}
.ak-nue__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Le sujet est dans le tiers bas : on cadre dessus plutôt qu'au centre,
       sinon le visage sort du champ sur un écran large. */
    object-position: center 38%;
}

/* Le voile. Il ne sert pas à assombrir pour le plaisir : le logo blanc doit
   rester lisible quelle que soit la photo déposée un jour. */
.ak-nue__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(26,21,18,.42) 0%, rgba(26,21,18,0) 34%,
        rgba(26,21,18,0) 62%, rgba(26,21,18,.46) 100%);
    pointer-events: none;
}

.ak-nue__logo {
    position: absolute;
    top: var(--e6); left: var(--e6);
    z-index: 2;
}
.ak-nue__logo img { width: 54px; height: 54px; }

/* ── LE CÔTÉ DU FORMULAIRE ── */
/* ── LE CÔTÉ DU FORMULAIRE ──
   Il porte un halo très doux derrière la carte. Sans lui, le crème est un
   aplat mort et la carte semble collée dessus ; avec, elle a l'air posée
   dans un espace. */
.ak-nue__forme {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--e5) var(--e6);
    /* Le filet de sécurité : il ne se déclenche qu'en dessous de la hauteur
       calibrée. Voir plus haut. */
    overflow-y: auto;

    /* LA CARTE CHEVAUCHE LA PHOTO.
     *
     * C'est le changement qui règle le « deux rectangles côte à côte » : la
     * carte s'avance sur la photo et enjambe la couture. Deux plans au lieu
     * de deux blocs — et l'œil comprend tout de suite lequel est le sujet.
     *
     * Une marge NÉGATIVE plutôt qu'un déplacement : la colonne se rétrécit
     * vraiment, donc rien ne déborde à droite. */
    margin-left: -72px;
}

.ak-nue__forme::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(60% 50% at 60% 45%, rgba(248, 80, 0, .07), transparent 70%);
    pointer-events: none;
}

/* La carte qui flotte. C'est elle qui donne la profondeur : un formulaire
   posé à même le fond n'a rien pour se détacher. */
.ak-nue__boite {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    /* Les marges suivent la hauteur de l'écran : généreuses quand il y a de
       la place, resserrées quand il n'y en a plus. C'est ce qui permet de
       tenir sans défilement d'un portable de 640 px à un grand écran. */
    padding: clamp(var(--e5), 4vh, var(--e7)) var(--e6);
    background: var(--blanc);
    border-radius: var(--r-carte);
    box-shadow:
        0 1px 2px rgba(26,21,18,.04),
        0 12px 24px -12px rgba(26,21,18,.10),
        0 40px 64px -32px rgba(26,21,18,.20);
}

/* L'étiquette au-dessus du titre : elle situe la page en un mot, là où une
   phrase de plus aurait alourdi. */
.ak-nue__oeil {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    padding: 5px var(--e3) 5px 5px;
    background: var(--orange-doux);
    color: var(--orange);
    border-radius: var(--r-pastille);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
}
.ak-nue__oeil span {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: var(--r-pastille);
    background: var(--blanc);
}

.ak-nue__boite h1 {
    margin-top: var(--e3);
    font-size: clamp(28px, 3.4vh + 1vw, 42px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.02;
}
.ak-nue__boite > p {
    margin-top: var(--e3);
    font-size: 15px;
    line-height: 1.6;
    color: var(--g1);
}

/* ── LE CHAMP DU NUMÉRO ──
   Le drapeau et l'indicatif sont FIXES : l'indicatif ne se tape pas, et le
   mettre en préfixe évite qu'on l'écrive une fois sur deux. Le drapeau est
   dessiné en SVG — aucun fichier, net à toute taille, et il ne dépend pas
   des émojis du système, qui n'affichent pas les drapeaux sur Windows. */
.ak-tel {
    display: flex;
    align-items: center;
    gap: var(--e3);
    height: 62px;
    padding-inline: var(--e4);
    border: 1.5px solid var(--trait);
    border-radius: var(--r-champ);
    background: var(--creme);
    transition: border-color var(--t-vif) var(--e-sortie), background var(--t-vif) var(--e-sortie), box-shadow var(--t-vif) var(--e-sortie);
}
/* L'anneau au focus, plutôt qu'un simple changement de bordure : sur un
   champ unique, il faut que le curseur se voie de loin. */
.ak-tel:focus-within {
    border-color: var(--orange);
    background: var(--blanc);
    box-shadow: 0 0 0 4px rgba(248, 80, 0, .12);
}
.ak-tel__pays {
    display: flex;
    align-items: center;
    gap: var(--e2);
    flex: none;
    padding-right: var(--e3);
    border-right: 1.5px solid var(--trait);
    font-size: 15px;
    font-weight: 700;
    color: var(--encre);
}
.ak-tel__pays svg { border-radius: 3px; display: block; }
/* `input[type="tel"]` ET NON `input` SEUL.
 *
 * Le champ portait DEUX bordures — une boîte dans une boîte, vue sur sa
 * capture. La règle générique `.ak-champ input[type="tel"]` du tunnel de
 * commande a une spécificité de (0,2,1) ; `.ak-tel input` n'en avait que
 * (0,1,1) et perdait, quel que soit l'ordre dans le fichier. L'attribut
 * remet les deux à égalité, et celle-ci vient après.
 *
 * C'est le piège classique d'une feuille qui grandit : deux composants qui
 * ne se connaissent pas visent le même élément. */
.ak-tel input[type="tel"] {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}
.ak-tel input[type="tel"]:focus { border: none; box-shadow: none; }
.ak-tel input::placeholder { color: var(--g3); font-weight: 500; letter-spacing: .03em; }

/* ── LE CANAL — un sélecteur segmenté ──
   Deux cases bordées côte à côte faisaient deux boutons qui se ressemblaient
   trop. Un seul contenant, deux segments, celui qui est choisi en plein : on
   voit d'un coup que les deux s'excluent. */
.ak-canal-ligne {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--creme);
    border-radius: var(--r-pastille);
}
.ak-canal-ligne label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    height: 46px;
    border-radius: var(--r-pastille);
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--g1);
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie), box-shadow var(--t-vif) var(--e-sortie);
}
.ak-canal-ligne input { position: absolute; opacity: 0; width: 0; height: 0; }
.ak-canal-ligne label:hover { color: var(--encre); }
.ak-canal-ligne label:has(input:checked) {
    background: var(--blanc);
    color: var(--orange);
    box-shadow: 0 1px 2px rgba(26,21,18,.06), 0 4px 10px -4px rgba(26,21,18,.18);
}
.ak-canal-ligne label:has(input:focus-visible) {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

/* Le champ du code : six chiffres, larges et espacés. */
.ak-code {
    width: 100%;
    height: 72px;
    padding: 0 var(--e4);
    border: 1.5px solid var(--trait);
    border-radius: var(--r-champ);
    background: var(--creme);
    font-family: inherit;
    font-size: 30px;
    font-weight: 800;
    text-align: center;
    letter-spacing: .38em;
    text-indent: .38em;   /* recentre : l'interlettrage pousse à droite */
    color: var(--encre);
    outline: none;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--t-vif) var(--e-sortie), background var(--t-vif) var(--e-sortie), box-shadow var(--t-vif) var(--e-sortie);
}
.ak-code:focus {
    border-color: var(--orange);
    background: var(--blanc);
    box-shadow: 0 0 0 4px rgba(248, 80, 0, .12);
}

.ak-nue__pied {
    margin-top: var(--e4);
    padding-top: var(--e4);
    border-top: 1px solid var(--trait);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--g1);
}
.ak-nue__pied a { color: var(--orange); font-weight: 600; }

/* La ligne de confiance, tout en bas de la carte. Trois faits courts : sur
   une page qui demande un numéro de téléphone, dire ce qu'on en fait n'est
   pas du décor. */
.ak-nue__confiance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e2) var(--e4);
    margin-top: var(--e5);
    font-size: 12.5px;
    color: var(--g2);
}
.ak-nue__confiance span { display: inline-flex; align-items: center; gap: 5px; }
.ak-nue__confiance svg { color: var(--vert); }

/* ── QUAND L'ÉCRAN EST COURT ──
   La page doit tenir SANS DÉFILEMENT, y compris sur un portable de 640 px de
   haut ou sur un grand écran zoomé. Plutôt que de laisser le navigateur
   trancher — il coupe le bas, donc le bouton —, on décide de l'ordre dans
   lequel les choses cèdent :

     1. les respirations se resserrent ;
     2. l'ÉTIQUETTE part — elle situe la page, elle ne la fait pas marcher ;
     3. la LIGNE DE CONFIANCE part — elle rassure, elle n'est pas nécessaire
        pour se connecter.

   Le champ, le canal et le bouton ne cèdent JAMAIS : ce sont eux, la page. */
@media (max-height: 780px) {
    .ak-nue__forme { padding-block: var(--e3); }
    .ak-nue__boite { padding-block: var(--e5); }
    .ak-nue__boite > p { margin-top: var(--e2); font-size: 14px; }
    .ak-nue__boite .ak-champ { margin-bottom: var(--e4); }
    .ak-nue__pied { margin-top: var(--e3); padding-top: var(--e3); font-size: 13px; }
    .ak-nue__confiance { margin-top: var(--e4); }
}

@media (max-height: 700px) {
    .ak-nue__oeil { display: none; }
    .ak-nue__boite h1 { margin-top: 0; }
    .ak-tel { height: 56px; }
    .ak-canal-ligne label { height: 42px; }
    .ak-nue__boite .ak-cta { height: 50px; }
}

@media (max-height: 620px) {
    .ak-nue__confiance { display: none; }
    .ak-nue__boite > p { display: none; }
}

@media (max-width: 900px) {
    /* LA PHOTO DEVIENT UN BANDEAU, pas une moitié d'écran — et la page doit
       TOUJOURS tenir sans défilement. Les deux lignes se partagent donc la
       hauteur : la photo prend ce qui reste, le formulaire prend ce qu'il
       lui faut. */
    .ak-nue__page { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
    .ak-nue__photo { min-height: 130px; border-radius: 0 0 var(--r-carte) var(--r-carte); }
    /* LE CADRAGE CHANGE AVEC LA FORME DU PANNEAU.
       En colonne, la photo est haute et le visage tombe bien à 38 %. En
       bande, c'est une tranche : à 38 % on ne voit que le haut du crâne. On
       descend sur la main et le téléphone, qui se lisent même sur 130 px. */
    .ak-nue__photo img { object-position: center 62%; }
    /* Pas de chevauchement en colonne : il n'y a plus de couture à enjamber,
       et une marge négative y mangerait le bord de l'écran. */
    .ak-nue__forme {
        margin-left: 0;
        padding: var(--e4) var(--gouttiere) var(--e5);
        justify-content: flex-start;
    }
    .ak-nue__boite {
        padding: var(--e5);
        box-shadow: 0 1px 2px rgba(26,21,18,.04), 0 12px 28px -14px rgba(26,21,18,.16);
    }
    .ak-nue__logo { top: var(--e4); left: var(--gouttiere); }
    .ak-nue__logo img { width: 46px; height: 46px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   NOUS CONTACTER — 19/08/2026
   ═══════════════════════════════════════════════════════════════════════

   Sa demande : uniquement l'adresse, le téléphone et les réseaux à gauche,
   une image à droite.

   ── LA COMPOSITION ──

   Asymétrique, 45 / 55 : l'image domine, le contenu se pose à côté. Deux
   moitiés égales n'ont pas de sujet — c'est ce qui rendait la connexion
   fade avant qu'on la reprenne.

   Les coordonnées ne sont pas une LISTE mais des CARTES : chacune porte son
   icône, sa valeur et son geste — appeler, ouvrir l'itinéraire, écrire. Une
   adresse qu'on ne peut que lire oblige à la recopier dans une autre
   application.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-contact {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: var(--e8);
    align-items: center;
    padding-block: var(--e9);
}

.ak-contact__oeil {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    padding: 5px var(--e4) 5px 5px;
    background: var(--orange-doux);
    color: var(--orange);
    border-radius: var(--r-pastille);
    font-size: 12.5px;
    font-weight: 700;
}
.ak-contact__oeil span {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: var(--r-pastille);
    background: var(--blanc);
}

/* LE TITRE PREND SA PLACE — 19/08/2026.
 *
 * Il plafonnait à 48 px. Sur une page qui ne porte que trois coordonnées, la
 * colonne de gauche est aux trois quarts vide : le titre peut, et doit,
 * occuper ce vide. C'est lui qui donne son ton à la page, pas la liste.
 *
 * L'interlettrage se resserre à mesure qu'il grossit : à cette taille, un
 * espacement normal fait paraître les mots dispersés. */
.ak-contact h1 {
    margin-top: var(--e4);
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .98;
}
.ak-contact h1 em { font-style: normal; color: var(--orange); }

.ak-contact__intro {
    margin-top: var(--e4);
    max-width: 42ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--g1);
}

/* ── LES COORDONNÉES, SANS CADRE ──
   Elles étaient dans trois boîtes bordées — « les cards me dérangent un
   peu ». Il a raison : trois rectangles gris empilés sous un grand titre
   font retomber la page, et l'encadré n'apporte rien qu'un filet ne dise
   mieux.

   Traitement éditorial : un intitulé en petites capitales, la valeur en
   grand, un simple filet entre chaque. Ce qui SE PASSE au survol remplace le
   cadre — une barre orange pousse à gauche, la ligne avance, la flèche
   apparaît. Le mouvement dit « cliquable » là où la bordure ne disait rien. */
/* AUCUN SÉPARATEUR — son constat du 19/08/2026.
   Les filets faisaient revenir la grille qu'on venait de retirer avec les
   cadres : trois lignes soulignées, c'est encore un tableau. Ce qui sépare
   maintenant, c'est l'ESPACE, et ce qui rassemble, c'est l'alignement. */
.ak-coordonnees {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--e6);
}

.ak-coordonnee {
    display: flex;
    align-items: center;
    gap: var(--e4);
    padding: var(--e4) var(--e3);
    transition: transform var(--t-vif) var(--e-sortie);
}

/* ── LE SURVOL, SANS BARRE NI APLAT ──
   Il portait une barre orange à gauche et un fond teinté : deux marques pour
   dire une seule chose, et la barre remettait un bord là où on venait de
   retirer les cadres.

   Ce qui bouge maintenant, c'est ce qui PORTE l'information :
     · l'icône s'allume dans un disque orange très pâle ;
     · l'intitulé passe à l'orange ;
     · la flèche entre par la droite.
   La ligne entière glisse de trois pixels — assez pour qu'on la sente
   vivante, trop peu pour qu'on la voie bouger. */
.ak-coordonnee:hover { transform: translateX(3px); }

.ak-coordonnee__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: var(--r-pastille);
    background: transparent;
    color: var(--g2);
    transition: background var(--t-moyen) var(--e-sortie), color var(--t-moyen) var(--e-sortie);
}
.ak-coordonnee:hover .ak-coordonnee__ico {
    background: var(--orange-doux);
    color: var(--orange);
}

.ak-coordonnee small {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g2);
    transition: color var(--t-moyen) var(--e-sortie);
}
.ak-coordonnee:hover small { color: var(--orange); }

.ak-coordonnee strong {
    display: block;
    margin-top: 3px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--encre);
    line-height: 1.25;
}

.ak-coordonnee > svg:last-child {
    flex: none;
    margin-left: auto;
    color: var(--orange);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--t-moyen) var(--e-sortie), transform var(--t-moyen) var(--e-sortie);
}
.ak-coordonnee:hover > svg:last-child { opacity: 1; transform: none; }

/* ── LES RÉSEAUX ── */
.ak-reseaux {
    display: flex;
    align-items: center;
    gap: var(--e4);
    margin-top: var(--e6);
}
.ak-reseaux > p {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g2);
    white-space: nowrap;
}
.ak-reseaux__liste { display: flex; flex-wrap: wrap; gap: var(--e2); }
.ak-reseaux__liste a {
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pastille);
    background: var(--creme);
    color: var(--encre);
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie), transform var(--t-vif) var(--e-sortie);
}
.ak-reseaux__liste a:hover {
    background: var(--orange);
    color: var(--sur-couleur);
    transform: translateY(-3px);
}

/* ── L'IMAGE, DANS UN CADRE DÉCALÉ ──
   Un liseré orange glissé derrière la photo, en biais de seize pixels. C'est
   un procédé d'édition : il donne de la profondeur sans ombre lourde, et il
   fait entrer l'accent de la marque dans une zone qui n'en avait aucun.

   Le bloc était auparavant une photo posée dans un rectangle arrondi —
   correct, mais muet. */
/* LE CADRE SE DESSINE SUR LA PHOTO, PAS SUR LA COLONNE.
 *
 * La photo est bornée en hauteur, donc plus étroite que la colonne qui la
 * contient : le liseré, tracé sur celle-ci, dépassait de cent cinquante
 * pixels à droite et flottait dans le vide. On borne donc le conteneur à la
 * largeur que la photo occupe réellement — 5/6 de sa hauteur maximale. */
.ak-contact__cadre {
    position: relative;
    width: 100%;
    max-width: 550px;      /* 660 × 5/6 */
    margin-left: auto;
}
/* UN BLOC PLEIN GLISSÉ DERRIÈRE, ET NON UN FILET.
 *
 * Le liseré de deux pixels se lisait comme un trait oublié : trop fin pour
 * faire une forme, trop visible pour disparaître. Un aplat doux dans la
 * couleur de la marque donne du volume, tient le regard sous la photo, et
 * porte l'accent sans le crier.
 *
 * Un halo l'accompagne : sans lui, la photo posée sur du blanc paraît
 * découpée et collée. */
.ak-contact__cadre::before {
    content: '';
    position: absolute;
    inset: 26px -26px -26px 26px;
    background: var(--orange-doux);
    border-radius: 30px;
    pointer-events: none;
}
.ak-contact__cadre::after {
    content: '';
    position: absolute;
    inset: -8% -14% -14% -8%;
    z-index: -1;
    background: radial-gradient(55% 50% at 45% 50%, rgba(248,80,0,.14), transparent 72%);
    pointer-events: none;
}

.ak-contact__image {
    position: relative;
    aspect-ratio: 5 / 6;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(110% 80% at 25% 15%, rgba(248,80,0,.28), transparent 62%),
        linear-gradient(160deg, #241C18 0%, var(--fond-sombre) 65%);
    box-shadow: 0 24px 60px -30px rgba(26,21,18,.4);
}
.ak-contact__image picture,
.ak-nue__photo picture { display: contents; }
.ak-contact__image img { width: 100%; height: 100%; object-fit: cover; }

.ak-contact__image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 1.6px);
    background-size: 22px 22px;
    pointer-events: none;
}
.ak-contact__image:has(img)::before { display: none; }

.ak-contact__marque {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1;
}
.ak-contact__marque img { width: 96px; height: 96px; object-fit: contain; opacity: .9; }

/* Le voile du bas, pour que les horaires se lisent sur n'importe quelle
   photo déposée un jour. */
.ak-contact__image::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 48%;
    background: linear-gradient(180deg, transparent, rgba(26,21,18,.72));
    pointer-events: none;
}

/* ── LES HORAIRES, À MÊME LA PHOTO ──
   Le médaillon blanc était une carte de plus, et elle masquait le tiers bas
   de l'image. Le texte est maintenant posé sur le voile : rien à cacher,
   rien à encadrer. */
.ak-horaires {
    position: absolute;
    left: var(--e5); right: var(--e5); bottom: var(--e5);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--e3);
    color: var(--sur-couleur);
}
.ak-horaires__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--r-pastille);
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
}
.ak-horaires small {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
}
.ak-horaires strong {
    display: block;
    margin-top: 1px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

@media (max-width: 940px) {
    .ak-contact { grid-template-columns: 1fr; gap: var(--e6); padding-block: var(--e7); }
    /* L'image passe SOUS les coordonnées : on vient chercher un numéro, pas
       une photographie. */
    .ak-contact__cadre { order: 2; }
    .ak-contact__cadre::before { display: none; }   /* pas de place pour le décalage */
    .ak-contact__image { aspect-ratio: 16 / 11; max-height: none; }
    .ak-contact__texte { order: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESTITUÉ LE 19/08/2026 — ce bloc avait disparu.

   Trente classes posées dans le panier, la commande et la confirmation
   n'avaient plus AUCUNE règle : les trois pages de la transaction étaient
   nues. Emportées par une réécriture de section voisine, sans erreur, sans
   trace — une page sans CSS s'affiche toujours, simplement laide.

   Depuis, un contrôle compare les classes des vues à celles de la feuille
   (voir la note en tête de fichier). C'est ce contrôle qui a trouvé ceci.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   LE PANIER, LA COMMANDE, LA CONFIRMATION — 19/08/2026
   ═══════════════════════════════════════════════════════════════════════

   Trois pages de transaction. Elles fonctionnaient déjà ; il leur manquait
   le design. Une régression y coûte une commande, pas un pixel — chaque
   champ, chaque route et chaque garde du formulaire ont été repris à
   l'identique.

   Une composition commune : le travail à gauche, un RÉCAPITULATIF COLLANT à
   droite. C'est la disposition qu'on attend d'une caisse, et le collant n'est
   pas décoratif : sur un panier de huit articles, le total sort de l'écran et
   il faut redescendre pour savoir ce qu'on paie.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-caisse {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--e7);
    align-items: start;
    padding-block: var(--e7) var(--e9);
}

/* ── LE RÉCAPITULATIF ── */
.ak-recap {
    position: sticky;
    top: 104px;
    padding: var(--e5);
    background: var(--creme);
    border-radius: var(--r-carte);
}
.ak-recap h2 {
    font-size: 18px;
    font-weight: 700;
    padding-bottom: var(--e4);
    border-bottom: 1px solid var(--trait);
}
.ak-recap__ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e4);
    padding-block: var(--e3);
    font-size: 14.5px;
    color: var(--g1);
}
.ak-recap__ligne strong { color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; }

.ak-recap__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e4);
    margin-top: var(--e3);
    padding-top: var(--e4);
    border-top: 1.5px solid var(--trait-fort);
}
.ak-recap__total span { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--g1); }
.ak-recap__total strong {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.ak-recap__note {
    margin-top: var(--e3);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--g2);
}


/* ── LES LIGNES DU PANIER ── */
.ak-panier__lignes { display: flex; flex-direction: column; }

.ak-ligne {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: var(--e4);
    align-items: center;
    padding-block: var(--e5);
    border-bottom: 1px solid var(--trait);
}
.ak-ligne:first-child { padding-top: 0; }

.ak-ligne__photo {
    width: 96px; height: 96px;
    border-radius: var(--r-champ);
    overflow: hidden;
    background: var(--fond-photo);
}
.ak-ligne__photo img { width: 100%; height: 100%; object-fit: contain; }

.ak-ligne__nom {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--encre);
}
.ak-ligne__nom:hover { color: var(--orange); }
.ak-ligne__meta {
    margin-top: 3px;
    font-size: 13px;
    color: var(--g1);
    font-variant-numeric: tabular-nums;
}

.ak-ligne__droite {
    display: flex;
    align-items: center;
    gap: var(--e5);
}

/* La quantité. Le champ s'envoie tout seul quand JavaScript est là ; sans
   lui, la touche Entrée fait le même travail, et le bouton de secours
   apparaît. */
.ak-qte {
    display: flex;
    align-items: center;
    gap: var(--e2);
}
.ak-qte input {
    width: 68px;
    height: 42px;
    padding-inline: var(--e3);
    border: 1.5px solid var(--trait);
    border-radius: var(--r-champ);
    background: var(--blanc);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: var(--encre);
    outline: none;
    font-variant-numeric: tabular-nums;
}
.ak-qte input:focus { border-color: var(--g3); }

.ak-ligne__soustotal {
    min-width: 100px;
    text-align: right;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.ak-ligne__retirer {
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    border-radius: var(--r-pastille);
    color: var(--g2);
    cursor: pointer;
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-ligne__retirer:hover { background: var(--rouge-doux); color: var(--rouge); }

/* ── LE FORMULAIRE DE COMMANDE ── */
.ak-champ { margin-bottom: var(--e5); }
.ak-champ > label {
    display: block;
    margin-bottom: var(--e2);
    font-size: 14px;
    font-weight: 600;
    color: var(--encre);
}
.ak-champ input[type="text"],
.ak-champ input[type="tel"],
.ak-champ textarea {
    width: 100%;
    padding: var(--e4);
    border: 1.5px solid var(--trait);
    border-radius: var(--r-champ);
    background: var(--blanc);
    font-family: inherit;
    /* 16 px : en dessous, iOS zoome sur le champ à la mise au point. */
    font-size: 16px;
    color: var(--encre);
    outline: none;
    transition: border-color var(--t-vif) var(--e-sortie);
}
.ak-champ input:focus, .ak-champ textarea:focus { border-color: var(--g3); }
.ak-champ textarea { min-height: 96px; resize: vertical; }

.ak-champ__erreur {
    display: block;
    margin-top: var(--e2);
    font-size: 13px;
    font-weight: 600;
    color: var(--rouge);
}
.ak-champ__aide { display: block; margin-top: var(--e2); font-size: 13px; color: var(--g1); }

.ak-bloc {
    padding: var(--e5);
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    margin-bottom: var(--e5);
}
.ak-bloc > h2 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: var(--e5);
}

/* ── L'ADRESSE ET SES SUGGESTIONS ── */
.ak-adresse { position: relative; }
.ak-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 30;
    max-height: 260px;
    overflow-y: auto;
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--r-champ);
    box-shadow: var(--ombre-carte);
}
.ak-suggestions[hidden] { display: none; }
.ak-suggestion {
    display: block;
    width: 100%;
    padding: var(--e3) var(--e4);
    border: none;
    border-bottom: 1px solid var(--trait);
    background: transparent;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}
.ak-suggestion:last-child { border-bottom: none; }
.ak-suggestion:hover, .ak-suggestion:focus-visible { background: var(--creme); }
.ak-suggestion strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--encre); }
.ak-suggestion span { display: block; font-size: 12.5px; color: var(--g2); }

.ak-adresse__ok {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin-top: var(--e2);
    font-size: 13px;
    font-weight: 600;
    color: var(--vert);
}
.ak-adresse__ok[hidden] { display: none; }

/* ── LE CHOIX DU PAIEMENT ── */
.ak-paiement { display: flex; flex-direction: column; gap: var(--e3); }
.ak-paiement label {
    display: flex;
    align-items: center;
    gap: var(--e4);
    padding: var(--e4);
    border: 1.5px solid var(--trait);
    border-radius: var(--r-champ);
    cursor: pointer;
    transition: border-color var(--t-vif) var(--e-sortie), background var(--t-vif) var(--e-sortie);
}
.ak-paiement label:hover { border-color: var(--g3); }
.ak-paiement input { accent-color: var(--orange); width: 18px; height: 18px; flex: none; }
.ak-paiement label:has(input:checked) {
    border-color: var(--orange);
    background: var(--orange-doux);
}
.ak-paiement strong { display: block; font-size: 15px; font-weight: 700; }
.ak-paiement small { display: block; font-size: 13px; color: var(--g1); }

/* ── LE RÉCAPITULATIF COMPACT DE LA COMMANDE ── */
.ak-recap__article {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding-block: var(--e3);
    border-bottom: 1px solid var(--trait);
    font-size: 13.5px;
}
.ak-recap__article:last-of-type { border-bottom: none; }
.ak-recap__article img {
    width: 48px; height: 48px;
    flex: none;
    border-radius: 10px;
    object-fit: contain;
    background: var(--fond-photo);
}
.ak-recap__article b { display: block; font-weight: 600; color: var(--encre); }
.ak-recap__article span { color: var(--g2); }
.ak-recap__article em {
    margin-left: auto;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── LA CONFIRMATION ── */
.ak-merci {
    max-width: 560px;
    margin-inline: auto;
    padding-block: var(--e9);
    text-align: center;
}
.ak-merci__sceau {
    width: 84px; height: 84px;
    margin-inline: auto;
    display: grid;
    place-items: center;
    border-radius: var(--r-pastille);
    background: var(--vert-doux);
    color: var(--vert);
}
.ak-merci h1 {
    margin-top: var(--e5);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -.03em;
}
.ak-merci__texte {
    margin-top: var(--e3);
    font-size: 16px;
    color: var(--g1);
    line-height: 1.6;
}
.ak-merci__fiche {
    margin-top: var(--e6);
    padding: var(--e5);
    background: var(--creme);
    border-radius: var(--r-carte);
    text-align: left;
}
.ak-merci__boutons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e3);
    margin-top: var(--e6);
}

@media (max-width: 940px) {
    .ak-caisse { grid-template-columns: 1fr; gap: var(--e5); }
    .ak-recap { position: static; }
}
@media (max-width: 620px) {
    .ak-ligne { grid-template-columns: 72px 1fr; gap: var(--e3); }
    .ak-ligne__photo { width: 72px; height: 72px; }
    .ak-ligne__droite { grid-column: 1 / -1; justify-content: space-between; gap: var(--e3); }
}
/* ═══════════════════════════════════════════════════════════════════════
   LE CHAT FLOTTANT — 20/08/2026
   ═══════════════════════════════════════════════════════════════════════

   Il parle à la MÊME boîte de réception que l'application : un visiteur du
   site et un visiteur de l'app arrivent au même endroit, avec la même
   fusion WhatsApp et les mêmes notifications. Rien n'a été dupliqué côté
   ERP, le site s'est branché sur ce qui existait.

   ── POURQUOI IL NE S'OUVRE PAS TOUT SEUL ──

   Aucune ouverture automatique, aucun message d'accroche au bout de dix
   secondes. Un panneau qui surgit pendant qu'on lit un prix est la première
   chose qu'on ferme, et la deuxième qu'on n'ouvrira plus.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-chat {
    position: fixed;
    right: clamp(14px, 2vw, 26px);
    bottom: clamp(14px, 2vw, 26px);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--e3);
}

/* ── LA BULLE ── */
.ak-chat__bulle {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border: none;
    border-radius: var(--r-pastille);
    background: var(--orange);
    color: var(--sur-couleur);
    cursor: pointer;
    box-shadow: 0 12px 28px -10px rgba(248,80,0,.7);
    transition: transform var(--t-vif) var(--e-sortie), background var(--t-vif) var(--e-sortie);
}
.ak-chat__bulle:hover { background: var(--orange-fonce); transform: translateY(-2px); }
.ak-chat__bulle .ak-chat__fermer { display: none; }
.ak-chat.est-ouvert .ak-chat__bulle .ak-chat__parler { display: none; }
.ak-chat.est-ouvert .ak-chat__bulle .ak-chat__fermer { display: block; }

/* La pastille des non-lus. Elle ne paraît que s'il y a vraiment quelque
   chose à lire — un « 0 » permanent est du bruit. */
/* `display: grid` battait l'attribut `hidden` du navigateur : la pastille
   affichait « 0 » en permanence. Un attribut qui dit « caché » doit cacher. */
.ak-chat__compte[hidden] { display: none; }
.ak-chat__compte {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 22px; height: 22px;
    padding-inline: 5px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pastille);
    border: 2px solid var(--blanc);
    background: var(--encre);
    color: var(--creme);
    font-size: 11.5px;
    font-weight: 800;
}

/* ── LE PANNEAU ── */
.ak-chat__boite {
    display: none;
    flex-direction: column;
    width: min(380px, calc(100vw - 28px));
    height: min(560px, calc(100vh - 120px));
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 70px -30px rgba(26,21,18,.55);
}
.ak-chat.est-ouvert .ak-chat__boite { display: flex; }

.ak-chat__tete {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e4) var(--e5);
    background: var(--fond-sombre);
    color: var(--sur-couleur);
}
.ak-chat__tete img { width: 38px; height: 38px; border-radius: var(--r-pastille); }
.ak-chat__tete strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.ak-chat__tete small { display: block; font-size: 12px; color: rgba(255,255,255,.6); }

/* ── LE FIL ── */
.ak-chat__fil {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--e4);
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    background: var(--creme);
    scrollbar-width: thin;
    scrollbar-color: var(--trait-fort) transparent;
}
.ak-chat__mot {
    max-width: 82%;
    padding: 9px var(--e4);
    border-radius: 16px;
    font-size: 14.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* Le mien à droite, en orange ; le leur à gauche, sur une surface. C'est la
   convention de toutes les messageries : la contredire oblige à lire les
   noms pour savoir qui parle. */
.ak-chat__mot--moi {
    align-self: flex-end;
    background: var(--orange);
    color: var(--sur-couleur);
    border-bottom-right-radius: 5px;
}
.ak-chat__mot--eux {
    align-self: flex-start;
    background: var(--blanc);
    border: 1px solid var(--trait);
    color: var(--encre);
    border-bottom-left-radius: 5px;
}
.ak-chat__mot img {
    display: block;
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 6px;
}
.ak-chat__mot a { text-decoration: underline; text-underline-offset: 3px; }
.ak-chat__pied-mot {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: .62;
    text-align: right;
}

.ak-chat__vide {
    margin: auto;
    padding: var(--e5);
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--g1);
}
.ak-chat__vide strong { display: block; margin-bottom: 6px; color: var(--encre); font-size: 15px; }

/* ── L'IDENTIFICATION, après le premier message ── */
/* IL PREND LE TIERS DU PANNEAU, IL NE LE PRENDRA PLUS.
   Sur sa capture, le bloc du numéro poussait la conversation hors de vue et
   restait là indéfiniment. Il tient maintenant sur deux lignes, et il se
   ferme : une demande qu'on ne peut pas écarter n'est plus une demande,
   c'est un péage. */
.ak-chat__ident {
    position: relative;
    display: none;
    padding: var(--e3) var(--e4);
    border-top: 1px solid var(--trait);
    background: var(--blanc);
}
.ak-chat__ident.est-visible { display: block; }
.ak-chat__ident p {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--g1);
    margin-bottom: 7px;
    /* La place du lien « Plus tard », réservée en dur : mesurée sur le rendu,
       la marge symbolique laissait le texte passer dessous. */
    padding-right: 76px;
}
/* `.ak-chat__ident button` (0,2,0) battait `.ak-chat__ident-plus-tard`
   (0,1,0) : le lien discret héritait du bouton plein et se posait en pastille
   sombre par-dessus le texte. Vu sur sa capture. */
.ak-chat__ident .ak-chat__ident-plus-tard {
    position: absolute;
    top: 6px; right: 8px;
    padding: 2px 6px;
    border: none;
    background: none;
    color: var(--g2);
    font-family: inherit;
    font-size: 11.5px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.ak-chat__ident .ak-chat__ident-plus-tard:hover { color: var(--orange); }
.ak-chat__ident-champs { display: flex; gap: 6px; }
.ak-chat__ident input {
    min-width: 0;
    flex: 1;
    height: 38px;
    padding-inline: var(--e3);
    border: 1px solid var(--trait);
    border-radius: 11px;
    background: var(--creme);
    color: var(--encre);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.ak-chat__ident input:focus { border-color: var(--orange); }
.ak-chat__ident button {
    flex: none;
    height: 38px;
    padding-inline: var(--e4);
    border: none;
    border-radius: 11px;
    background: var(--encre);
    color: var(--creme);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

/* ── LE COMPOSEUR ── */
.ak-chat__ecrire {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: var(--e3);
    border-top: 1px solid var(--trait);
    background: var(--blanc);
}
.ak-chat__ecrire textarea {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    max-height: 120px;
    padding: 11px var(--e3);
    border: 1px solid var(--trait);
    border-radius: 12px;
    background: var(--creme);
    color: var(--encre);
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.4;
    resize: none;
    outline: none;
    /* Le champ grandit tout seul jusqu'à 120 px : la barre de défilement n'a
       donc jamais rien à faire dedans. Sous Windows elle s'affichait quand
       même, flèches comprises, en plein milieu de la zone de frappe. */
    overflow-y: auto;
    scrollbar-width: none;
}
.ak-chat__ecrire textarea::-webkit-scrollbar { display: none; }
.ak-chat__ecrire textarea:focus { border-color: var(--orange); }
.ak-chat__ecrire button,
.ak-chat__ecrire label {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--g1);
    cursor: pointer;
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-chat__ecrire label:hover { background: var(--creme); color: var(--orange); }
.ak-chat__envoi { background: var(--orange) !important; color: var(--sur-couleur); }
.ak-chat__envoi:hover { background: var(--orange-fonce) !important; }
.ak-chat__envoi:disabled { opacity: .45; cursor: default; }

.ak-chat__joint {
    display: none;
    padding: 0 var(--e3) var(--e3);
    font-size: 12.5px;
    color: var(--g1);
    background: var(--blanc);
}
.ak-chat__joint.est-visible { display: block; }

@media (max-width: 480px) {
    .ak-chat__boite { height: min(72vh, calc(100vh - 96px)); }
}

/* ── LE CHAT, SECONDE PASSE : LINA, LA PRÉSENCE ET LE MOUVEMENT ──────────
   20/08/2026.

   Trois principes tiennent tout ce qui suit :

   1. ATTIRER SANS HARCELER. La bulle bat UNE fois, l'invitation paraît UNE
      fois, et le navigateur s'en souvient. Un widget qui relance à chaque
      page est la première chose qu'on ferme et la dernière qu'on rouvre.
   2. NE RIEN PROMETTRE QU'ON NE TIENNE. Le point vert n'est pas décoratif :
      il se calcule sur les horaires de l'ERP. Hors ouverture, il est gris et
      le dit.
   3. LE MOUVEMENT SERT LA LECTURE. Le panneau s'ouvre DEPUIS la bulle, les
      messages montent de six pixels, les points d'écriture disent qu'une
      réponse arrive. Rien ne bouge sans raison, et tout s'arrête si le
      visiteur a demandé moins d'animations.
   ─────────────────────────────────────────────────────────────────────── */

/* ── LE BATTEMENT D'APPEL, une seule fois ── */
@keyframes ak-chat-appel {
    0%, 100% { box-shadow: 0 12px 28px -10px rgba(248,80,0,.7), 0 0 0 0 rgba(248,80,0,.5); }
    50%      { box-shadow: 0 12px 28px -10px rgba(248,80,0,.7), 0 0 0 14px rgba(248,80,0,0); }
}
.ak-chat__bulle.appelle { animation: ak-chat-appel 1.6s ease-out 3; }

/* ── L'INVITATION DE LINA ── */
.ak-chat__invite {
    position: relative;
    display: none;
    align-items: center;
    gap: var(--e3);
    max-width: 268px;
    padding: var(--e3) var(--e4) var(--e3) var(--e3);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: 16px 16px 4px 16px;
    box-shadow: 0 16px 34px -20px rgba(26,21,18,.5);
    cursor: pointer;
    animation: ak-chat-monte .42s var(--e-sortie) both;
}
.ak-chat__invite.est-visible { display: flex; }
.ak-chat__invite img { width: 38px; height: 38px; border-radius: var(--r-pastille); flex: none; }
.ak-chat__invite strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--encre); }
.ak-chat__invite small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--g1); }
.ak-chat__invite-fermer {
    position: absolute;
    top: -7px; right: -7px;
    width: 22px; height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid var(--trait);
    border-radius: var(--r-pastille);
    background: var(--blanc);
    color: var(--g1);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

@keyframes ak-chat-monte {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ── L'OUVERTURE DU PANNEAU, depuis la bulle ── */
@keyframes ak-chat-ouvre {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
.ak-chat.est-ouvert .ak-chat__boite {
    transform-origin: 100% 100%;
    animation: ak-chat-ouvre .3s var(--e-sortie) both;
}
.ak-chat__mot { animation: ak-chat-monte .28s var(--e-sortie) both; }

/* ── LA TÊTE : LINA, ET SA PRÉSENCE ── */
.ak-chat__tete { position: relative; }
.ak-chat__portrait { position: relative; flex: none; }
.ak-chat__pastille {
    position: absolute;
    right: -1px; bottom: -1px;
    width: 12px; height: 12px;
    border-radius: var(--r-pastille);
    border: 2px solid var(--fond-sombre);
    background: var(--g2);
}
.ak-chat__pastille.est-ouvert { background: #3FD07A; }
.ak-chat__tete small { display: flex; align-items: center; gap: 5px; }

/* ── LES POINTS D'ÉCRITURE ── */
.ak-chat__ecrit {
    align-self: flex-start;
    display: none;
    gap: 4px;
    padding: 12px var(--e4);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: 16px 16px 16px 5px;
}
.ak-chat__ecrit.est-visible { display: flex; }
.ak-chat__ecrit i {
    width: 6px; height: 6px;
    border-radius: var(--r-pastille);
    background: var(--g2);
    animation: ak-chat-point 1.2s ease-in-out infinite;
}
.ak-chat__ecrit i:nth-child(2) { animation-delay: .18s; }
.ak-chat__ecrit i:nth-child(3) { animation-delay: .36s; }
@keyframes ak-chat-point {
    0%, 60%, 100% { transform: none; opacity: .45; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* ── LES RACCOURCIS ──
   Trois questions qu'on pose vraiment au comptoir. Ils disparaissent dès que
   la conversation a commencé : des suggestions au milieu d'un échange sont
   du bruit. */
/* Le mot d'accueil est écrit dans la page, indenté comme du HTML lisible —
   et `pre-wrap`, indispensable pour les messages tapés, rendait cette
   indentation à l'écran. Elle seule revient à la ligne normalement. */
#ak-chat-accueil { white-space: normal; }

.ak-chat__raccourcis {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--e3);
}
.ak-chat__raccourcis button {
    padding: 7px var(--e3);
    border: 1px solid var(--trait);
    border-radius: 99px;
    background: var(--blanc);
    color: var(--encre);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie), transform var(--t-vif) var(--e-sortie);
}
.ak-chat__raccourcis button:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-1px); }

/* ── LE SÉPARATEUR DE JOUR ── */
.ak-chat__jour {
    align-self: center;
    padding: 3px var(--e3);
    border-radius: 99px;
    background: var(--blanc);
    border: 1px solid var(--trait);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--g1);
}

/* ── L'ACCUSÉ DE LECTURE ── */
.ak-chat__vu { margin-left: 5px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .ak-chat__bulle.appelle,
    .ak-chat.est-ouvert .ak-chat__boite,
    .ak-chat__mot,
    .ak-chat__invite { animation: none; }
    .ak-chat__ecrit i { animation: none; }
}

/* ── LE CHAT, TROISIÈME PASSE : LINA A UN VISAGE ─────────────────────────
   20/08/2026. Sa demande : « plus pro — l'en-tête, les icônes,
   l'interaction ». Le portrait est une photo de banque d'images, à
   remplacer par celle d'une personne de l'équipe quand il y en aura une :
   un seul fichier à déposer. */

.ak-chat__tete { gap: var(--e4); }
.ak-chat__portrait img {
    width: 42px; height: 42px;
    border-radius: var(--r-pastille);
    object-fit: cover;
    /* Un anneau clair détache le portrait du fond sombre de l'en-tête. */
    border: 2px solid rgba(255,255,255,.18);
}
.ak-chat__qui { flex: 1; min-width: 0; }
.ak-chat__qui strong { font-size: 16px; letter-spacing: -.025em; }
.ak-chat__reduire {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,.09);
    color: var(--sur-couleur);
    cursor: pointer;
    transition: background var(--t-vif) var(--e-sortie);
}
.ak-chat__reduire:hover { background: rgba(255,255,255,.2); }

/* ── LA LIGNE : frimousse + bulle ── */
/* `display: flex` battait l'attribut `hidden` : les points d'écriture
   restaient à l'écran sous le mot d'accueil. Le même piège que la pastille
   des non-lus, deux heures plus tôt — il se referme partout où une règle
   d'affichage croise un attribut du navigateur. */
.ak-chat__ligne[hidden] { display: none; }
.ak-chat__ligne {
    display: flex;
    /* La frimousse se cale en HAUT de la bulle : sur un message long, calée
       en bas, elle paraissait appartenir au message suivant. */
    align-items: flex-start;
    gap: 8px;
    max-width: 100%;
}
.ak-chat__ligne--moi { justify-content: flex-end; }
.ak-chat__ligne .ak-chat__mot { max-width: none; }
.ak-chat__ligne:not(.ak-chat__ligne--moi) .ak-chat__mot { max-width: 82%; }

.ak-chat__frimousse {
    flex: none;
    width: 30px; height: 30px;
    border-radius: var(--r-pastille);
    object-fit: cover;
}
/* Quand la personne a un nom, c'est son initiale — jamais le visage de Lina
   sur les mots de quelqu'un d'autre. */
.ak-chat__frimousse--lettre {
    display: grid;
    place-items: center;
    background: var(--encre);
    color: var(--creme);
    font-size: 13px;
    font-weight: 800;
}

/* ── LE CHAMP FERMÉ PENDANT QU'ON DEMANDE LE NUMÉRO ── */
.ak-chat__ecrire textarea:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.ak-chat__ident.est-visible ~ .ak-chat__ecrire { background: var(--creme); }

/* L'icône d'envoi est un avion : une flèche disait « suivant », pas
   « envoyer ». */
.ak-chat__envoi svg { transform: translateX(-1px); }

/* ═══════════════════════════════════════════════════════════════════════
   LA PAGE RÉPARATION — 20/08/2026
   ═══════════════════════════════════════════════════════════════════════

   Elle était un formulaire de neuf champs, sans style, avec des classes
   Bootstrap qui n'existent plus. Elle devient une page qui EXPLIQUE avant
   de demander : ce qu'on répare, à quel prix, comment ça se passe, ce qu'on
   a en stock pour votre marque — et le formulaire en bas, où tous les
   boutons descendent.

   Le formulaire n'a pas changé d'un champ : mêmes noms, mêmes valeurs,
   mêmes gardes côté serveur. Seule sa robe est neuve.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · LE HÉROS DE PAGE, REFAIT LE 20/08 ──
   « Trop vilain, aucun style » — et c'était juste : deux colonnes, du texte
   à gauche, une photo à droite, aucune tenue.

   Il devient une BANDE PLEINE : la photo d'atelier occupe toute la largeur,
   un voile la fait passer de l'encre au transparent, le discours se pose
   dessus. C'est la composition qu'on donne à une page qui doit convaincre —
   et elle ne ressemble à aucune autre section du site, ce qui est le rôle
   d'un héros de page. */
.ak-rep-heros {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--fond-sombre);
}
.ak-rep-heros__fond {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    /* La source est un portrait 4:5 : dans une bande large, tout cadrage
       serre. On remonte le point d'intérêt pour garder le visage ET
       l'établi, plutôt qu'un gros plan sur un col de polo. */
    object-position: 58% 26%;
}
.ak-rep-heros picture { display: contents; }
/* Le voile part de la gauche, là où le texte se pose, et s'efface sur la
   photo. Un voile uniforme aurait éteint l'image ; celui-ci ne noircit que
   ce qui doit porter des mots. */
.ak-rep-heros::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(96deg, rgba(16,13,12,.96) 0%, rgba(16,13,12,.9) 34%,
                        rgba(16,13,12,.55) 62%, rgba(16,13,12,.25) 100%);
}
.ak-rep-heros > .ak-large {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--e7);
    align-items: end;
    padding-block: var(--e9) var(--e8);
    min-height: 520px;
}
.ak-rep-heros__oeil {
    display: inline-flex;
    align-items: center;
    gap: var(--e3);
    padding: 7px var(--e4) 7px 7px;
    border-radius: var(--r-pastille);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
    font-size: 13px;
    font-weight: 600;
    color: var(--sur-couleur);
}
.ak-rep-heros__oeil span {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: var(--r-pastille);
    background: var(--orange);
    color: var(--sur-couleur);
}
.ak-rep-heros h1 {
    margin-top: var(--e5);
    max-width: 16ch;
    font-size: clamp(34px, 4.4vw, 60px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
    color: var(--sur-couleur);
}
.ak-rep-heros h1 em { font-style: normal; color: #FF8A4C; }
.ak-rep-heros__mot {
    margin-top: var(--e4);
    max-width: 44ch;
    font-size: 16.5px;
    line-height: 1.6;
    color: rgba(255,255,255,.76);
}
.ak-rep-heros__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e4);
    margin-top: var(--e6);
}
.ak-rep-heros__actions .ak-lien-fort { color: var(--sur-couleur); }
.ak-rep-heros__actions .ak-lien-fort:hover { color: #FF8A4C; }

/* La carte des promesses, posée dans le coin bas droit : elle donne au
   héros son second pôle, et évite que la moitié droite ne soit qu'une
   photo. */
.ak-rep-promesses {
    display: flex;
    flex-direction: column;
    gap: var(--e4);
    width: 300px;
    padding: var(--e5);
    border-radius: 20px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(14px);
}
.ak-rep-promesses li {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255,255,255,.82);
}
.ak-rep-promesses li strong { display: block; color: var(--sur-couleur); font-weight: 700; }
.ak-rep-promesses li svg { flex: none; margin-top: 2px; color: #FF8A4C; }

@media (max-width: 900px) {
    .ak-rep-heros > .ak-large {
        grid-template-columns: minmax(0, 1fr);
        padding-block: var(--e8) var(--e7);
        min-height: 0;
    }
    .ak-rep-promesses { width: 100%; }
    .ak-rep-heros::before { background: linear-gradient(180deg, rgba(16,13,12,.88), rgba(16,13,12,.96)); }
}

/* ── 2 · LES PRESTATIONS CHIFFRÉES ── */
.ak-tarifs { background: var(--blanc); }
.ak-tarifs > .ak-large { padding-block: var(--e8); }
.ak-tarifs__lot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e4);
    margin-top: var(--e6);
}
.ak-tarif {
    display: flex;
    flex-direction: column;
    padding: var(--e5);
    border: 1px solid var(--trait);
    border-radius: 20px;
    background: var(--blanc);
    transition: transform var(--t-moyen) var(--e-sortie), box-shadow var(--t-moyen) var(--e-sortie), border-color var(--t-moyen) var(--e-sortie);
}
.ak-tarif:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 22px 40px -28px rgba(26,21,18,.5);
}
.ak-tarif__ico {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 15px;
    background: var(--orange-doux);
    color: var(--encre);
    transition: background var(--t-moyen) var(--e-sortie), color var(--t-moyen) var(--e-sortie);
}
.ak-tarif:hover .ak-tarif__ico { background: var(--orange); color: var(--sur-couleur); }
.ak-tarif strong {
    display: block;
    margin-top: var(--e4);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.028em;
    color: var(--encre);
}
.ak-tarif small {
    display: block;
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--g1);
}
/* Le prix se détache du reste : c'est la ligne qu'on cherche. */
.ak-tarif__prix {
    margin-top: auto;
    padding-top: var(--e4);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}
.ak-tarif__prix em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--g2);
}

/* ── 3 · LES ÉTAPES EN CARTES ──
   Sur l'accueil, quatre numéros reliés par un filet suffisent : c'est un
   rappel. Ici, c'est le cœur du sujet — chaque étape mérite sa carte, avec
   la place d'expliquer ce qui s'y passe. */
.ak-pas-lot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e4);
    margin-top: var(--e6);
}
.ak-pas {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--e5);
    border-radius: 20px;
    background: var(--blanc);
    border: 1px solid var(--trait);
    transition: transform var(--t-moyen) var(--e-sortie), box-shadow var(--t-moyen) var(--e-sortie), border-color var(--t-moyen) var(--e-sortie);
}
.ak-pas:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 22px 40px -28px rgba(26,21,18,.5);
}
.ak-pas__num {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 13px;
    background: var(--orange-doux);
    color: var(--orange);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ak-pas strong {
    display: block;
    margin-top: var(--e4);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.028em;
    color: var(--encre);
}
.ak-pas small {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--g1);
}
/* La flèche qui relie une carte à la suivante — elle dit l'ordre, ce que
   quatre cartes alignées ne disent pas. */
.ak-pas:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 40px; right: calc(var(--e4) * -1);
    width: var(--e4); height: 1px;
    background: var(--trait-fort);
}

@media (max-width: 1000px) {
    .ak-pas-lot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ak-pas:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
    .ak-pas-lot { grid-template-columns: minmax(0, 1fr); }
}

/* ── 4 · VOTRE APPAREIL ── */
.ak-appareil { background: var(--creme); border-block: 1px solid var(--trait); }
.ak-appareil > .ak-large { padding-block: var(--e8); }
.ak-appareil__marques {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3);
    margin-top: var(--e6);
}
.ak-marque-tuile {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: 10px var(--e4) 10px 10px;
    border: 1.5px solid var(--trait);
    border-radius: 14px;
    background: var(--blanc);
    cursor: pointer;
    transition: border-color var(--t-vif) var(--e-sortie), transform var(--t-vif) var(--e-sortie), box-shadow var(--t-vif) var(--e-sortie);
}
.ak-marque-tuile img {
    width: 46px; height: 30px;
    object-fit: contain;
    /* La plaque reste blanche la nuit : les logos sont des tracés sombres. */
    background: var(--sur-couleur);
    border-radius: 7px;
    padding: 2px 4px;
}
.ak-marque-tuile span { font-size: 14.5px; font-weight: 700; color: var(--encre); }
.ak-marque-tuile small { font-size: 12.5px; color: var(--g2); }
.ak-marque-tuile:hover { border-color: var(--trait-fort); transform: translateY(-2px); }
.ak-marque-tuile.est-choisie {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-doux);
}

.ak-appareil__resultat { margin-top: var(--e6); }
.ak-appareil__rayons {
    display: flex;
    gap: var(--e3);
    margin-bottom: var(--e5);
}
.ak-appareil__rayons button {
    padding: 8px var(--e4);
    border: 1.5px solid var(--trait);
    border-radius: 99px;
    background: var(--blanc);
    color: var(--encre);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-appareil__rayons button.est-choisi { border-color: var(--orange); color: var(--orange); }

.ak-piece-lot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e4);
}
.ak-piece {
    display: flex;
    flex-direction: column;
    padding: var(--e4);
    border-radius: 18px;
    background: var(--blanc);
    border: 1px solid var(--trait);
}
.ak-piece__cadre {
    aspect-ratio: 1;
    border-radius: 12px;
    background: var(--fond-photo);
    overflow: hidden;
}
.ak-piece__cadre img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.ak-piece strong {
    display: block;
    margin-top: var(--e3);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--encre);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ak-piece__prix {
    margin-top: 6px;
    font-size: 15.5px;
    font-weight: 800;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}
.ak-piece__poser {
    margin-top: var(--e3);
    padding: 8px;
    border: 1.5px solid var(--trait);
    border-radius: 10px;
    background: transparent;
    color: var(--encre);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-piece__poser:hover { border-color: var(--orange); color: var(--orange); }
.ak-appareil__mot { font-size: 14px; color: var(--g1); }

/* ── 6 · LES QUESTIONS ── */
.ak-faq { background: var(--blanc); }
.ak-faq > .ak-large {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: var(--e7);
    padding-block: var(--e8);
    align-items: start;
}
/* ── LE PORTRAIT DE LA COLONNE ──
   Il ouvre la colonne des questions. Le cadre est arrondi comme les cartes
   du site, l'aplat orange décalé derrière reprend le geste du héros — c'est
   ce qui fait qu'une photo posée sur du blanc n'a pas l'air découpée. */
.ak-faq__portrait {
    position: relative;
    /* Agrandi le 22/08/2026, sa demande. Le portrait est ce qui dit
       « quelqu'un répond » : à 220 px il se lisait comme une vignette. */
    max-width: 264px;
    margin-bottom: var(--e5);
}
.ak-faq__portrait::before {
    content: '';
    position: absolute;
    inset: 16px -16px -16px 16px;
    background: var(--orange-doux);
    border-radius: 22px;
}
.ak-faq__portrait picture { display: contents; }
.ak-faq__portrait img {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 20px;
}
.ak-faq__portrait figcaption {
    position: relative;
    margin-top: var(--e3);
}
.ak-faq__portrait strong {
    display: block;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--encre);
}
.ak-faq__portrait small { display: block; font-size: 13px; color: var(--g1); }

.ak-faq__liste { border-top: 1px solid var(--trait); }

/* La réponse se déplie au lieu d'apparaître d'un coup. `interpolate-size`
   permet enfin d'animer vers `auto` : les navigateurs qui ne le connaissent
   pas ouvrent sèchement, ce qui reste correct. */
@media (prefers-reduced-motion: no-preference) {
    .ak-faq details::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size var(--t-moyen) var(--e-sortie), content-visibility var(--t-moyen) allow-discrete var(--e-sortie);
    }
    .ak-faq details[open]::details-content { block-size: auto; }
}
.ak-faq details { border-bottom: 1px solid var(--trait); }
.ak-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    padding: var(--e5) 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--encre);
    cursor: pointer;
    list-style: none;
}
.ak-faq summary::-webkit-details-marker { display: none; }
/* LES CHEVRONS, À LA PLACE DU PLUS ET DU MOINS — 22/08/2026, ses icônes.
   Le dessin vit DANS la feuille, en URI : une pastille de vingt-huit pixels
   ne vaut pas un aller-retour réseau, et les deux fichiers restent dans
   `assets/img/` pour qui voudrait les reprendre.
   Deux tracés distincts plutôt qu'une rotation : ce sont les deux icônes
   qu'il a choisies, et le chevron du haut n'est pas exactement l'autre
   retourné — sa pointe est posée plus haut dans la boîte. */
.ak-faq summary::after {
    content: '';
    flex: none;
    width: 28px; height: 28px;
    border-radius: var(--r-pastille);
    background-color: var(--creme);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F85000'%3E%3Cpath d='M22.586,5.929l-9.879,9.879a1.021,1.021,0,0,1-1.414,0L1.42,5.934.006,7.348l9.873,9.874a3.075,3.075,0,0,0,4.243,0L24,7.343Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
    transition: background-color var(--t-vif) var(--e-sortie);
}
.ak-faq details[open] summary::after {
    background-color: var(--orange);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M22.586,18.148,12.707,8.269a1.021,1.021,0,0,0-1.414,0L1.42,18.142.006,16.728,9.879,6.855a3.073,3.073,0,0,1,4.243,0L24,16.734Z'/%3E%3C/svg%3E");
}
.ak-faq details p {
    padding-bottom: var(--e5);
    max-width: 62ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--g1);
}

/* ── 7 · LA DEMANDE ── */
.ak-demande { background: var(--creme); border-top: 1px solid var(--trait); }
.ak-demande > .ak-large {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--e6);
    align-items: start;
    padding-block: var(--e8);
}
.ak-bloc-champ {
    padding: var(--e6);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: 20px;
    margin-bottom: var(--e4);
}
.ak-bloc-champ h2 {
    display: flex;
    align-items: center;
    gap: var(--e3);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.028em;
    color: var(--encre);
    margin-bottom: var(--e5);
}
.ak-bloc-champ h2 i {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: var(--r-pastille);
    background: var(--fond-sombre);
    /* `--creme` devient presque noir en mode sombre : le chiffre disparaissait
       sur son propre fond, mesuré à 1,07:1 par la vérification du 20/08. Le
       blanc qui ne bascule pas règle les deux modes d'un coup. */
    color: var(--sur-couleur);
    font-style: normal;
    font-size: 13px;
    font-weight: 800;
}
.ak-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.ak-etiquette {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--encre);
}
.ak-saisie {
    width: 100%;
    height: 48px;
    padding-inline: var(--e4);
    border: 1.5px solid var(--trait);
    border-radius: var(--r-champ);
    background: var(--creme);
    color: var(--encre);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color var(--t-vif) var(--e-sortie), background var(--t-vif) var(--e-sortie);
}
textarea.ak-saisie { height: auto; padding-block: 12px; resize: vertical; line-height: 1.55; }
.ak-saisie:focus { border-color: var(--orange); background: var(--blanc); }
.ak-saisie--faute { border-color: var(--rouge); }
.ak-faute { display: block; margin-top: 5px; font-size: 12.5px; color: var(--rouge); }
.ak-aide { display: block; margin-top: 5px; font-size: 12.5px; color: var(--g2); }

/* Les pastilles cliquables : le bouton disparaît, l'étiquette prend l'état.
   Plus lisible au pouce qu'une case à cocher, et c'est la même mécanique
   que sur l'ancienne page — elle marchait, on la garde. */
.ak-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.ak-pastille-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.ak-pastille-choix span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px var(--e4);
    border: 1.5px solid var(--trait);
    border-radius: 99px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--encre);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--t-vif) var(--e-sortie), background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-pastille-choix span:hover { border-color: var(--trait-fort); }
.ak-pastille-choix input:checked + span {
    border-color: var(--orange);
    background: var(--orange-doux);
    color: var(--orange-fonce);
}
.ak-pastille-choix input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ── LE RÉCAPITULATIF COLLANT ── */
.ak-recap-dem {
    position: sticky;
    top: calc(var(--h-entete) + var(--e4));
    padding: var(--e5);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: 20px;
}
.ak-recap-dem h2 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g2);
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--trait);
}
.ak-recap-dem__ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e4);
    padding-block: var(--e3);
    font-size: 14px;
    color: var(--g1);
    border-bottom: 1px solid var(--trait);
}
.ak-recap-dem__ligne strong { color: var(--encre); font-weight: 700; text-align: right; }
.ak-recap-dem__prix {
    margin-top: var(--e4);
    padding: var(--e4);
    border-radius: 14px;
    background: var(--orange-doux);
}
.ak-recap-dem__prix strong {
    display: block;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}
.ak-recap-dem__prix small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--g1); }
.ak-recap-dem__promesses { margin-top: var(--e4); display: flex; flex-direction: column; gap: 9px; }
.ak-recap-dem__promesses li {
    display: flex;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--g1);
}
.ak-recap-dem__promesses svg { flex: none; margin-top: 2px; color: var(--vert); }

@media (max-width: 1100px) {
    .ak-rep-heros > .ak-large,
    .ak-faq > .ak-large { grid-template-columns: minmax(0, 1fr); }
    .ak-demande > .ak-large { grid-template-columns: minmax(0, 1fr); }
    .ak-recap-dem { position: static; }
    .ak-tarifs__lot,
    .ak-piece-lot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .ak-tarifs__lot { grid-template-columns: minmax(0, 1fr); }
    .ak-piece-lot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
    .ak-duo { grid-template-columns: 1fr; }
    .ak-bloc-champ { padding: var(--e5); }
}

/* ── LA PAGE RÉPARATION, SECONDE PASSE — 20/08/2026 ──────────────────────
   Quatre finitions, chacune parce qu'un endroit de la page ne travaillait
   pas assez fort. */

/* 1. L'ÉTAT DE L'ATELIER, dans le héros. Le point se calcule sur les
      horaires de l'ERP : ouvert, il est vert et dit « on décroche » ;
      fermé, il est gris et dit à quelle heure on rouvre. Une page qui
      pousse à appeler doit dire si quelqu'un décroche. */
.ak-rep-heros__etat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--e5);
    font-size: 13.5px;
    color: rgba(255,255,255,.72);
}
.ak-rep-heros__etat b {
    width: 8px; height: 8px;
    border-radius: var(--r-pastille);
    background: var(--g2);
}
.ak-rep-heros__etat.est-ouvert b {
    background: #3FD07A;
    box-shadow: 0 0 0 4px rgba(63,208,122,.2);
}

/* 2. LE PRIX PREND LE DESSUS dans les carrés de pannes. Il était en gris,
      à la taille d'une note de bas de page : c'est pourtant la ligne qu'on
      cherche. */
.ak-presta-carte small b {
    display: block;
    margin-bottom: 2px;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}

/* 3. CHAQUE ÉTAPE PORTE SON DESSIN. Un numéro dit l'ordre, il ne dit pas
      ce qui se passe ; l'icône, si — et l'œil la saisit avant le titre. */
.ak-pas__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
}
.ak-pas__ico { color: var(--g3); transition: color var(--t-moyen) var(--e-sortie); }
.ak-pas:hover .ak-pas__ico { color: var(--orange); }


/* ═══════════════════════════════════════════════════════════════════════
   LE MOUVEMENT DU SITE — passe d'ensemble, 20/08/2026
   ═══════════════════════════════════════════════════════════════════════

   Ce bloc ne décore pas : chaque geste répond à une question que le
   visiteur se pose sans la formuler. « Ai-je cliqué ? » « Est-ce que ça
   charge ? » « Où suis-je arrivé ? » Une interface muette laisse ces
   questions sans réponse, et c'est ce qui donne l'impression qu'elle est
   lente alors qu'elle ne l'est pas.

   Tout ce qui suit s'éteint sous `prefers-reduced-motion`. Sans exception :
   pour une partie des gens, le mouvement n'est pas un agrément, c'est un
   malaise physique.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LE PASSAGE D'UNE PAGE À L'AUTRE ──
   Le site est multi-pages : chaque lien provoquait un clignotement blanc.
   `@view-transition` fait fondre l'ancienne page dans la nouvelle, sans une
   ligne de script et sans transformer le site en application. Les
   navigateurs qui ne connaissent pas la règle l'ignorent et gardent le
   comportement d'avant. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: ak-part var(--t-vif) var(--e-entree) both; }
::view-transition-new(root) { animation: ak-arrive var(--t-moyen) var(--e-sortie) both; }
@keyframes ak-part   { to   { opacity: 0; } }
@keyframes ak-arrive { from { opacity: 0; transform: translateY(8px); } }

/* L'en-tête et le pied ne participent pas au fondu : ils sont communs aux
   deux pages, les faire disparaître pour les refaire apparaître donnerait
   un battement à chaque clic. */
.ak-entete { view-transition-name: ak-entete; }
.ak-pied   { view-transition-name: ak-pied; }
/* La bulle du chat non plus — 06/10/2026 : elle est fixe, au même coin sur
   toutes les pages. Elle s'éteignait et remontait de 8 px à chaque clic. */
.ak-chat   { view-transition-name: ak-chat; }

/* ── LE RETOUR — 06/10/2026 ──
   Sur « Précédent », la page revient d'en haut : on referme ce qu'on vient
   d'ouvrir. C'est le script du gabarit qui pose le type `retour`. Un
   navigateur qui ne connaît pas `:active-view-transition-type` jette la règle
   entière, et garde l'entrée par le bas. */
html:active-view-transition-type(retour)::view-transition-new(root) { animation-name: ak-revient; }
@keyframes ak-revient { from { opacity: 0; transform: translateY(-8px); } }

/* ── LA PHOTO QUI VOLE — 06/10/2026 ──
   La photo de la carte cliquée va se poser à la place de la grande photo de
   la fiche, et revient au retour. Le nom n'est posé que le temps du trajet,
   par le script du gabarit ; il n'existe nulle part en dur.

   Plus long que le fondu de la page (420 ms contre 260) : la page doit être
   là quand la photo s'y pose, pas l'inverse. Courbe à départ vif et arrivée
   très douce — l'objet est lancé, puis il se pose. */
::view-transition-group(ak-photo) {
    animation-duration: var(--t-ample);
    animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}
/* Les deux photos d'un même article, à deux tailles : on les superpose
   entières plutôt que de laisser l'une étirée sous l'autre. */
::view-transition-old(ak-photo),
::view-transition-new(ak-photo) {
    height: 100%;
    object-fit: contain;
    animation-duration: var(--t-ample);
}

/* ── LA BARRE NE SE RESSERRE PLUS — mesuré, puis retiré le 20/08 ──
   L'idée était bonne, le prix ne l'était pas. `.ak-entete` est `sticky`,
   donc DANS le flux : animer sa hauteur remontait tout le document de 16 px
   dès qu'on quittait le haut de page, et coûtait 313 remises en page pour
   douze allers-retours — une par image d'animation. Seize pixels gagnés
   contre un saut du contenu sous les yeux du lecteur : le calcul ne se
   défend pas. Le remplissage de blanc au défilement, lui, reste. */

/* ── LA PRESSION ──
   Un bouton qui ne bouge pas sous le doigt laisse croire que le clic n'a
   pas pris — et on clique deux fois. Deux pixels suffisent à répondre. */
/* Ces trois-là n'avaient pas `transform` dans leur liste de transitions :
   le bouton sautait puis resautait au lieu de s'enfoncer. */
.ak-bouton, .ak-chat__envoi, .ak-tuile__cadre { transition-property: background, color, border-color, box-shadow, outline-color, transform; }

.ak-cta:active,
.ak-bouton:active,
.ak-magasin:active,
.ak-chat__bulle:active,
.ak-chat__envoi:active { transform: translateY(2px) scale(.985); }
.ak-tuile:active .ak-tuile__cadre,
.ak-presta-carte:active,
.ak-bande:active { transform: translateY(-1px) scale(.995); }

/* ── LE BOUTON QUI TRAVAILLE ──
   Entre le clic et la page suivante, il peut s'écouler deux secondes sur un
   réseau mobile. Sans signe, on reclique. Le libellé s'efface, un anneau
   tourne, et le bouton refuse les clics suivants — c'est le script du
   gabarit qui pose la classe. */
.ak-cta.est-en-cours,
.ak-bouton.est-en-cours { position: relative; color: transparent !important; pointer-events: none; }
.ak-cta.est-en-cours svg,
.ak-bouton.est-en-cours svg { opacity: 0; }
.ak-cta.est-en-cours::after,
.ak-bouton.est-en-cours::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: var(--sur-couleur);
    border-radius: var(--r-pastille);
    animation: ak-tourne .6s linear infinite;
}
.ak-cta--creux.est-en-cours::after { border-color: var(--trait-fort); border-top-color: var(--orange); }
@keyframes ak-tourne { to { transform: rotate(360deg); } }

/* ── LES IMAGES N'APPARAISSENT PLUS D'UN COUP ──
   Une photo différée surgit à la fin de son téléchargement, en pleine page
   déjà lue. Un fondu de deux dixièmes suffit à ce que l'œil l'accepte au
   lieu de la subir. L'état d'attente n'est posé QUE par le script : sans
   lui, aucune image n'est cachée. */
.ak-js img.ak-img-attend { opacity: 0; }
.ak-js img.ak-img-posee  { animation: ak-fondu var(--t-moyen) var(--e-sortie) both; }
@keyframes ak-fondu { from { opacity: 0; } to { opacity: 1; } }

/* ── LA RÉVÉLATION EN CASCADE ──
   Les enfants d'un groupe révélé arrivent l'un après l'autre, 60 ms
   d'écart. Au-delà de six, on cesse d'échelonner : un dixième élément qui
   attend six dixièmes de seconde n'est plus une cascade, c'est une file. */
/* Les enfants ont leur PROPRE entrée — sans cela le délai retombait sur la
   seule transition qu'ils possèdent, leur survol : mesuré, huit cartes de
   l'accueil répondaient avec 180 ms de retard. Et le parent retire la classe
   une fois l'entrée jouée (voir le gabarit), pour que plus aucun délai ne
   traîne sur les gestes suivants. */
/* LA CASCADE N'A JAMAIS CASCADÉ — corrigé le 24/08/2026.
   La déclaration portait CINQ valeurs par transition : propriété, durée,
   courbe, délai, PUIS une seconde courbe. Le raccourci `transition` n'en
   accepte que quatre ; la déclaration entière était donc invalide et le
   navigateur la jetait. Mesuré sur les trois groupes de l'accueil :
   `transition-duration: 0s`, `transition-delay: 0s`, `transition-property: all`.
   Les enfants n'entraient pas en cascade — ils n'entraient pas du tout, ils
   apparaissaient d'un coup. Le `--i` posé par le script ne servait à rien. */
.ak-js .ak-revele--cascade > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--t-ample) var(--e-sortie) calc(var(--i, 0) * 60ms),
                transform var(--t-ample) var(--e-sortie) calc(var(--i, 0) * 60ms);
}
.ak-js .ak-revele--cascade.est-vu > * { opacity: 1; transform: none; }
/* Le groupe lui-même ne bouge plus : ce sont ses enfants qui entrent. */
.ak-js .ak-revele--cascade { opacity: 1; transform: none; }

/* ── L'ANNEAU DE FOCUS ──
   Il doit se voir immédiatement : personne ne navigue au clavier pour
   attendre une animation. On l'affiche net, on n'anime que sa couleur. */
:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; }
/* Pas de transition sur l'anneau : `transition` est un RACCOURCI, et toute
   règle de classe portant `transition` effaçait cette liste — la règle
   n'agissait que sur les éléments qui n'ont aucune autre transition.
   Un anneau de focus doit de toute façon paraître sur-le-champ : personne ne
   navigue au clavier pour attendre un fondu. */

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .ak-entete > .ak-large,
    .ak-entete__logo img { transition: none; }
    .ak-cta:active, .ak-bouton:active, .ak-magasin:active,
    .ak-tuile:active .ak-tuile__cadre, .ak-presta-carte:active, .ak-bande:active { transform: none; }
    .ak-js img.ak-img-attend { opacity: 1; }
    .ak-js img.ak-img-posee { animation: none; }
    /* Sous `reduce`, l'anneau ne tourne pas : cacher le libellé laisserait
       un bouton muet à ceux-là mêmes qu'on voulait ménager. On garde le mot
       et on l'estompe. */
    .ak-cta.est-en-cours, .ak-bouton.est-en-cours { color: inherit !important; opacity: .6; }
    .ak-cta.est-en-cours::after, .ak-bouton.est-en-cours::after { display: none; }
}


/* ── À L'IMPRESSION ──
   Six sections sur huit de la page Réparation sortaient BLANCHES : elles
   attendent leur révélation au défilement, et une imprimante ne défile pas.
   Le « Enregistrer en PDF » d'un devis en dépendait aussi. */
@media print {
    .ak-js .ak-revele,
    .ak-js .ak-revele--cascade > * { opacity: 1 !important; transform: none !important; }
    .ak-chat, .ak-bandeau, .ak-marques, .ak-theme { display: none !important; }
    .ak-entete { position: static; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
    body { background: #fff; }
}


/* ═══════════════════════════════════════════════════════════════════════
   L'ESPACE CLIENT — posé le 21/08/2026, redessiné le même jour.
   ═══════════════════════════════════════════════════════════════════════

   ── CE QU'IL REMPLACE ──

   Les trois pages du compte étaient restées sur les classes de l'ANCIEN thème,
   jetées le 19/08 : elles s'affichaient SANS AUCUN STYLE. C'était la première
   chose qu'un client voyait après s'être connecté.

   ── LES NOMS SONT PRÉFIXÉS `ak-tb-`, ET C'EST UNE LEÇON ──

   La première version de ce bloc a repris quatre noms qui existaient déjà
   ailleurs dans cette feuille : `.ak-tuile` (les raccourcis de l'accueil),
   `.ak-etat` (la pastille « En stock » de la boutique), `.ak-fiche` (la fiche
   produit) et `.ak-fil` (le fil d'Ariane). Écrites PLUS BAS, mes règles
   gagnaient — et cassaient la boutique et la page produit sans toucher à une
   ligne de leur code.

   Tout ce qui appartient au tableau de bord porte donc `ak-tb-`. Une feuille
   de six mille lignes n'a pas de portée locale : le préfixe EST la portée.

   ── LA COLONNE RESTE CLAIRE — 21/08/2026, sa demande ──

   Elle est passée en sombre le temps d'un essai : « le truc noir ne me plaît
   pas ». Elle revient donc au blanc du reste du site, et la hiérarchie se fait
   autrement — par le filet, l'ombre portée et l'aplat orange doux de l'entrée
   active. Le reste de la seconde passe est conservé : les icônes enfermées,
   les chiffres en chasse fixe, le chevron qui avance au survol, les anneaux
   de focus.
   ═══════════════════════════════════════════════════════════════════════ */

.ak-tb {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: var(--e5);
    align-items: start;
    max-width: 1280px;
    margin-inline: auto;
    padding: var(--e5) var(--gouttiere) var(--e8);
}

/* ── LA COLONNE ──
   Collante : sur une liste de douze réparations, la navigation ne doit pas
   partir en haut de page. */
.ak-tb__cote {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    padding: var(--e5) var(--e4) var(--e4);
    box-shadow: var(--ombre-carte);
}

.ak-tb__qui { display: flex; align-items: center; gap: var(--e3); padding-inline: var(--e2); }

/* L'INITIALE PLUTÔT QU'UNE SILHOUETTE GRISE. Personne n'a de photo chez nous ;
   une lettre dit au moins de qui il s'agit. L'anneau orange la rattache à la
   maison sans peindre un disque entier. */
.ak-tb__jeton {
    width: 42px; height: 42px; flex: 0 0 42px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--orange-doux);
    box-shadow: inset 0 0 0 1.5px rgba(248, 80, 0, .28);
    color: var(--orange);
    font-size: 16px; font-weight: 800;
    overflow: hidden;
}
.ak-tb__jeton img { width: 100%; height: 100%; object-fit: cover; }
.ak-tb__nom { font-size: 14.5px; font-weight: 700; color: var(--encre); line-height: 1.25; }
.ak-tb__tel { font-size: 12.5px; color: var(--g1); margin-top: 2px; }

.ak-tb__menu { display: flex; flex-direction: column; gap: 2px; margin-top: var(--e5); }

.ak-tb__lien {
    position: relative;
    display: flex; align-items: center; gap: var(--e3);
    padding: 10px var(--e3);
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    color: var(--encre-2);
    text-decoration: none;
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-tb__lien:hover { background: var(--creme); color: var(--encre); }
.ak-tb__lien svg { flex: 0 0 18px; opacity: .75; }

/* L'ACTIF SE VOIT SANS SE CRIER : un aplat orange très clair et l'encre de la
   maison. Un aplat orange SATURÉ dans une colonne de huit entrées ferait de la
   navigation le sujet de la page. */
.ak-tb__lien.est-actif {
    background: var(--orange-doux);
    color: var(--orange);
    font-weight: 700;
}
.ak-tb__lien.est-actif svg { opacity: 1; }

/* Le compteur d'une entrée — messages non lus, réparations en cours. */
.ak-tb__compte {
    margin-left: auto;
    min-width: 21px; height: 20px;
    display: inline-grid; place-items: center;
    padding-inline: 6px;
    border-radius: var(--r-pastille);
    background: var(--orange); color: var(--sur-couleur);
    font-size: 11.5px; font-weight: 800;
}
/* Sur l'entrée active, l'aplat est déjà orange : la pastille s'inverse. */
.ak-tb__lien.est-actif .ak-tb__compte { background: var(--orange); }

.ak-tb__pied { margin-top: auto; padding-top: var(--e5); border-top: 1px solid var(--trait); }
.ak-tb__aide {
    background: var(--creme);
    border-radius: var(--r-champ);
    padding: var(--e3) var(--e4);
    font-size: 12.5px; color: var(--g1); line-height: 1.55;
}
.ak-tb__aide strong { display: block; color: var(--encre); font-size: 13px; margin-bottom: 3px; }
.ak-tb__aide a { color: var(--orange); font-weight: 700; text-decoration: none; }
.ak-tb__aide a:hover { text-decoration: underline; }

.ak-tb__sortie {
    display: flex; align-items: center; gap: var(--e2);
    width: 100%; margin-top: var(--e3);
    padding: 10px var(--e3);
    background: none; border: none;
    border-radius: 10px;
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    color: var(--g1); cursor: pointer;
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-tb__sortie:hover { background: var(--creme); color: var(--encre); }
.ak-tb__cote :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ── L'EN-TÊTE DU CONTENU ── */
.ak-tb__entete {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--e4); flex-wrap: wrap;
    margin-bottom: var(--e5);
}
.ak-tb__jour {
    display: block;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--g2); margin-bottom: 6px;
}
.ak-tb__titre { font-size: clamp(23px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.025em; color: var(--encre); line-height: 1.15; }
.ak-tb__titre em { font-style: normal; color: var(--orange); }
.ak-tb__sous { font-size: 14px; color: var(--g1); margin-top: 6px; }

/* ── LES TUILES DE TÊTE ──
   Trois chiffres, pas dix : ce qu'on vient vérifier en ouvrant son compte. */
.ak-tb__tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: var(--e4);
    margin-bottom: var(--e5);
}
.ak-tb-tuile {
    display: block;
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    padding: var(--e4);
    text-decoration: none;
    transition: transform var(--t-vif) var(--e-sortie), box-shadow var(--t-vif) var(--e-sortie), border-color var(--t-vif) var(--e-sortie);
}
a.ak-tb-tuile:hover {
    transform: translateY(-2px);
    border-color: var(--trait-fort);
    box-shadow: 0 18px 36px -22px rgba(26, 21, 18, .35);
}

/* L'ŒIL DE LA TUILE : l'icône dans un carré doux, le mot à côté. Une icône
   nue posée sur du blanc flotte ; enfermée, elle devient un repère. */
.ak-tb-tuile__oeil {
    display: flex; align-items: center; gap: var(--e2);
    font-size: 12.5px; font-weight: 600; color: var(--g1);
}
.ak-tb-tuile__oeil svg {
    box-sizing: content-box;
    padding: 6px;
    border-radius: 9px;
    background: var(--creme);
    color: var(--encre-2);
}
.ak-tb-tuile__chiffre {
    font-size: 32px; font-weight: 800; letter-spacing: -.035em;
    color: var(--encre); line-height: 1.05; margin-top: var(--e4);
    font-variant-numeric: tabular-nums;
}
.ak-tb-tuile__mot { font-size: 13px; color: var(--g1); margin-top: 3px; }

/* LA TUILE D'ACCENT — une seule par page, celle qui décide si on reste.
   Le halo n'est pas un décor : il donne du relief à un aplat qui, plat,
   paraîtrait un bloc de couleur posé là. */
.ak-tb-tuile--accent {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(135deg, var(--orange) 0%, var(--orange-fonce) 100%);
    border-color: transparent;
    box-shadow: 0 16px 34px -18px rgba(248, 80, 0, .85);
}
.ak-tb-tuile--accent .ak-tb-tuile__oeil,
.ak-tb-tuile--accent .ak-tb-tuile__chiffre,
.ak-tb-tuile--accent .ak-tb-tuile__mot { color: var(--sur-couleur); position: relative; }
.ak-tb-tuile--accent .ak-tb-tuile__oeil svg { background: rgba(255,255,255,.18); color: var(--sur-couleur); }
.ak-tb-tuile--accent .ak-tb-tuile__mot { opacity: .88; }
a.ak-tb-tuile--accent:hover { box-shadow: 0 22px 44px -18px rgba(248, 80, 0, .95); }

/* ── LES CARTES DE CONTENU ── */
.ak-tb__grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--e4); align-items: start; }
.ak-tb__pile { display: flex; flex-direction: column; gap: var(--e4); }

.ak-carte-tb {
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    overflow: hidden;
}
.ak-carte-tb__tete {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
    padding: var(--e4) var(--e5);
    border-bottom: 1px solid var(--trait);
}
.ak-carte-tb__tete h2 { font-size: 15px; font-weight: 800; color: var(--encre); letter-spacing: -.01em; }
.ak-carte-tb__tout {
    font-size: 12.5px; font-weight: 700; color: var(--orange);
    text-decoration: none; white-space: nowrap;
    padding: 4px 10px; border-radius: var(--r-pastille);
    transition: background var(--t-vif) var(--e-sortie);
}
.ak-carte-tb__tout:hover { background: var(--orange-doux); }
.ak-carte-tb__corps { padding: var(--e5); }
.ak-carte-tb__corps--serre { padding: var(--e2) 0; }

/* ── UNE LIGNE DE LISTE — réparation, commande, favori ──
   Toute la ligne est cliquable, et le chevron le dit. Il avance au survol :
   un mouvement de deux pixels suffit à faire comprendre qu'on peut entrer. */
.ak-ligne-tb {
    display: flex; align-items: center; gap: var(--e4);
    padding: var(--e3) var(--e5);
    text-decoration: none;
    transition: background var(--t-vif) var(--e-sortie);
}
a.ak-ligne-tb:hover { background: var(--creme); }
a.ak-ligne-tb:hover .ak-ligne-tb__fleche { transform: translateX(3px); color: var(--orange); }
.ak-ligne-tb + .ak-ligne-tb { border-top: 1px solid var(--trait); }
.ak-ligne-tb__vignette {
    width: 46px; height: 46px; flex: 0 0 46px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: var(--creme); color: var(--g1);
    font-size: 15px; font-weight: 800;
    overflow: hidden;
    /* Un liseré INTÉRIEUR : sur une photo de produit sur fond blanc, sans lui
       la vignette n'a pas de bord et le contenu paraît flotter. */
    box-shadow: inset 0 0 0 1px rgba(26, 21, 18, .07);
}
.ak-ligne-tb__vignette img { width: 100%; height: 100%; object-fit: cover; }
.ak-ligne-tb__corps { min-width: 0; flex: 1; }
.ak-ligne-tb__nom { display: block; font-size: 14.5px; font-weight: 700; color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-ligne-tb__detail { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; font-size: 12.5px; color: var(--g1); margin-top: 4px; }
.ak-ligne-tb__prix { font-size: 14.5px; font-weight: 800; color: var(--encre); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ak-ligne-tb__du { font-size: 12px; font-weight: 700; color: var(--orange); white-space: nowrap; }
.ak-ligne-tb__fleche {
    color: var(--g3); flex: 0 0 auto;
    transition: transform var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}

/* ── L'ÉTAT, EN PASTILLE ──
   Une seule forme pour tous les états ; c'est la couleur qui parle. */
.ak-tb-etat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3.5px 9px;
    border-radius: var(--r-pastille);
    font-size: 11px; font-weight: 800; white-space: nowrap;
    letter-spacing: .01em;
    background: var(--creme); color: var(--encre-2);
}
.ak-tb-etat::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ak-tb-etat--attente { background: var(--ambre-doux);  color: var(--ambre); }
.ak-tb-etat--marche  { background: var(--orange-doux); color: var(--orange); }
.ak-tb-etat--fini    { background: var(--vert-doux);   color: var(--vert); }
.ak-tb-etat--stop    { background: var(--rouge-doux);  color: var(--rouge); }

/* ── LE VIDE, QUI PROPOSE QUELQUE CHOSE ──
   « Aucune commande » tout seul est un cul-de-sac. */
.ak-vide-tb { text-align: center; padding: var(--e6) var(--e5); }
.ak-vide-tb__rond {
    width: 62px; height: 62px; margin: 0 auto var(--e4);
    display: grid; place-items: center;
    border-radius: 50%; background: var(--creme); color: var(--g2);
    box-shadow: inset 0 0 0 1px rgba(26, 21, 18, .05);
}
.ak-vide-tb h3 { font-size: 15.5px; font-weight: 800; color: var(--encre); }
.ak-vide-tb p { font-size: 13.5px; color: var(--g1); margin: var(--e2) auto var(--e4); max-width: 34ch; line-height: 1.55; }

/* ── LA BARRE DE PROGRESSION ── */
.ak-jauge { height: 6px; border-radius: var(--r-pastille); background: var(--trait); overflow: hidden; margin-top: var(--e3); }
.ak-jauge span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--orange-fonce)); transition: width .5s var(--e-sortie); }

/* ── SUR PETIT ÉCRAN ──
   La colonne devient une barre sombre dont les entrées défilent. Un tiroir
   aurait caché la navigation derrière un geste ; ici elle reste visible. */
@media (max-width: 1023px) {
    .ak-tb { grid-template-columns: minmax(0, 1fr); gap: var(--e4); padding-top: var(--e4); }
    .ak-tb__cote { position: static; padding: var(--e4); }
    .ak-tb__menu {
        flex-direction: row; gap: var(--e2); margin-top: var(--e4);
        overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    }
    .ak-tb__menu::-webkit-scrollbar { display: none; }
    .ak-tb__lien { white-space: nowrap; border: 1px solid var(--trait); }
    .ak-tb__lien.est-actif { border-color: transparent; }
    .ak-tb__pied { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e4); padding-top: var(--e4); }
    .ak-tb__aide { display: none; }
    .ak-tb__sortie { margin-top: 0; width: auto; }
    .ak-tb__grille { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .ak-carte-tb__tete, .ak-carte-tb__corps { padding-inline: var(--e4); }
    .ak-ligne-tb { padding-inline: var(--e4); gap: var(--e3); }
    .ak-tb-tuile__chiffre { font-size: 27px; }
    .ak-tb__entete { align-items: flex-start; }
}

/* ── LE DEVIS, DANS L'ESPACE CLIENT ──
   Une ligne de devis est une DÉCISION : on la garde ou on la retire. Elle se
   dessine donc comme un choix — une carte qui s'allume quand elle est retenue —
   et non comme une ligne de tableau. */
.ak-devis-ligne {
    display: block;
    border: 1.5px solid var(--trait);
    border-radius: var(--r-champ);
    padding: var(--e4);
    transition: border-color var(--t-vif) var(--e-sortie), background var(--t-vif) var(--e-sortie);
}
.ak-devis-ligne + .ak-devis-ligne { margin-top: var(--e3); }
.ak-devis-ligne:has(.ak-devis-case:checked) { border-color: var(--orange); background: var(--orange-doux); }
.ak-devis-tete { display: flex; align-items: flex-start; gap: var(--e3); cursor: pointer; }
.ak-devis-case { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: var(--orange); }
.ak-devis-nom { font-size: 14.5px; font-weight: 700; color: var(--encre); display: block; }
.ak-devis-aide { font-size: 12.5px; color: var(--g1); display: block; margin-top: 2px; line-height: 1.45; }
.ak-devis-prix { font-size: 14.5px; font-weight: 800; color: var(--encre); white-space: nowrap; }

.ak-devis-choix { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px dashed var(--trait-fort); }
.ak-devis-choix > p { font-size: 11.5px; font-weight: 700; color: var(--g1); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--e2); }
.ak-devis-option { display: flex; align-items: center; gap: var(--e2); padding: 7px 0; cursor: pointer; font-size: 13.5px; color: var(--encre-2); }
.ak-devis-option input { accent-color: var(--orange); }
.ak-devis-option span:first-of-type { flex: 1; }
.ak-devis-option b { font-weight: 700; color: var(--encre); }

.ak-devis-total {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--trait);
}
.ak-devis-total span { font-size: 15px; font-weight: 700; color: var(--encre); }
.ak-devis-total strong { font-size: 24px; font-weight: 800; color: var(--orange); letter-spacing: -.02em; }

.ak-devis-refus {
    display: block; width: 100%; margin-top: var(--e3);
    background: none; border: none; padding: var(--e2);
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--g1);
    cursor: pointer; text-align: center;
}
.ak-devis-refus:hover { color: var(--rouge); }

/* Le code de retrait : c'est un mot de passe, il se lit de loin. */
.ak-code-retrait {
    font-size: 30px; font-weight: 800; letter-spacing: .18em;
    color: var(--orange); font-variant-numeric: tabular-nums;
}

/* Une paire « étiquette / valeur » dans une carte du tableau de bord. */
.ak-paire { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); padding: 7px 0; }
.ak-paire + .ak-paire { border-top: 1px solid var(--trait); }
.ak-paire dt { font-size: 13px; color: var(--g1); }
.ak-paire dd { font-size: 14px; font-weight: 700; color: var(--encre); margin: 0; text-align: right; }
.ak-paire dd.est-du { color: var(--orange); font-size: 16px; }

/* Le fil des messages — même carte, deux camps. */
.ak-tb-fil { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e5); max-height: 60vh; overflow-y: auto; }
.ak-bulle { max-width: 78%; padding: 10px var(--e4); border-radius: 16px; font-size: 14px; line-height: 1.5; }
.ak-bulle--eux { align-self: flex-start; background: var(--creme); color: var(--encre); border-bottom-left-radius: 5px; }
.ak-bulle--moi { align-self: flex-end; background: var(--orange); color: var(--sur-couleur); border-bottom-right-radius: 5px; }
.ak-bulle__heure { display: block; font-size: 11px; opacity: .7; margin-top: 4px; }
.ak-ecrire { display: flex; gap: var(--e3); padding: var(--e4) var(--e5); border-top: 1px solid var(--trait); }
.ak-ecrire .ak-saisie { flex: 1; }

/* Dans l'espace client, la bulle de chat s'efface : le menu porte déjà
   « Messages », et elle recouvrait le coin des cartes. */
.ak-compte .ak-chat { display: none; }

/* ── LA FICHE TECHNIQUE, LA GALERIE ET LE PARCOURS — 21/08/2026 ──
   Ajoutés avec le dossier complet d'une réparation : la page n'en montrait
   que cinq champs sur une trentaine. */

/* CE QUI EST VALIDÉ SE VOIT AUTANT QUE CE QUI CLOCHE : une fiche qui ne
   listerait que les défauts laisserait croire que le reste n'a pas été
   regardé. Deux couleurs, aucune phrase. */
.ak-tb-fiche { display: flex; flex-wrap: wrap; gap: var(--e2); }
.ak-tb-fiche__point {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 11px;
    border-radius: var(--r-champ);
    font-size: 12.5px; font-weight: 600;
    background: var(--creme); color: var(--encre-2);
}
.ak-tb-fiche__point small { display: block; font-size: 10.5px; font-weight: 500; color: var(--g2); margin-top: 1px; }
.ak-tb-fiche__point.est-ok { background: var(--vert-doux); color: var(--vert); }
.ak-tb-fiche__point.est-ok small { color: currentColor; opacity: .7; }
.ak-tb-fiche__point.est-ko { background: var(--rouge-doux); color: var(--rouge); }
.ak-tb-fiche__point.est-ko small { color: currentColor; opacity: .7; }
.ak-tb-fiche__point svg { flex: 0 0 14px; }

/* La galerie : des carrés réguliers, parce qu'une photo d'atelier arrive dans
   tous les formats et qu'une grille irrégulière se lit mal. */
.ak-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--e2); }
.ak-galerie__vue {
    display: block; aspect-ratio: 1;
    border-radius: var(--r-champ); overflow: hidden;
    background: var(--creme);
    box-shadow: inset 0 0 0 1px rgba(26, 21, 18, .07);
    transition: transform var(--t-vif) var(--e-sortie);
}
.ak-galerie__vue:hover { transform: scale(1.03); }
.ak-galerie__vue img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Le parcours : une colonne de dates, reliées par un filet. Pas de carte par
   étape — quatre cartes pour quatre dates, c'est trois de trop. */
.ak-chrono { list-style: none; margin: 0; padding: 0; position: relative; }
.ak-chrono li { position: relative; padding: 0 0 var(--e4) var(--e5); }
.ak-chrono li:last-child { padding-bottom: 0; }
.ak-chrono li::before {
    content: ''; position: absolute; left: 3px; top: 4px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-doux);
}
.ak-chrono li:not(:last-child)::after {
    content: ''; position: absolute; left: 7px; top: 16px; bottom: 2px;
    width: 1.5px; background: var(--trait);
}
.ak-chrono strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--encre); }
.ak-chrono span { display: block; font-size: 12.5px; color: var(--g1); margin-top: 2px; }

/* ── LE COMPTE DANS L'EN-TÊTE — 21/08/2026 ──
   Connecté, on voit sa photo et un menu au survol. Une silhouette grise
   identique pour tout le monde ne dit pas si l'on est reconnu. */
.ak-moi { position: relative; }
.ak-moi__bouton {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    padding: 0; border: none; cursor: pointer;
    border-radius: 50%;
    background: var(--orange-doux);
    box-shadow: inset 0 0 0 1.5px rgba(248, 80, 0, .28);
    color: var(--orange);
    font-family: inherit; font-size: 15px; font-weight: 800;
    overflow: hidden;
    transition: box-shadow var(--t-vif) var(--e-sortie);
}
.ak-moi__bouton img { width: 100%; height: 100%; object-fit: cover; }
.ak-moi:hover .ak-moi__bouton,
.ak-moi__bouton:focus-visible { box-shadow: inset 0 0 0 2px var(--orange); outline: none; }

/* LE MENU S'OUVRE AU SURVOL ET AU CLIC.
   Au survol seul, il serait inatteignable au doigt ; au clic seul, il
   demanderait un geste de plus à la souris. Les deux, et le clavier ferme
   avec Échap. */
.ak-moi__menu {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 232px;
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    box-shadow: 0 20px 44px -20px rgba(26, 21, 18, .3);
    padding: var(--e2);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--t-vif) var(--e-sortie), transform var(--t-vif) var(--e-sortie), visibility var(--t-vif);
    z-index: 60;
}
.ak-moi:hover .ak-moi__menu,
.ak-moi:focus-within .ak-moi__menu,
.ak-moi.est-ouvert .ak-moi__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.ak-moi__qui { padding: var(--e3) var(--e3) var(--e2); border-bottom: 1px solid var(--trait); margin-bottom: var(--e2); }
.ak-moi__qui strong { display: block; font-size: 14px; font-weight: 700; color: var(--encre); }
.ak-moi__qui span { display: block; font-size: 12.5px; color: var(--g1); margin-top: 2px; }

.ak-moi__menu a,
.ak-moi__menu button {
    display: flex; align-items: center; gap: var(--e3);
    width: 100%; padding: 9px var(--e3);
    border: none; background: none;
    border-radius: 10px;
    font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
    color: var(--encre-2); text-decoration: none; cursor: pointer;
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-moi__menu a:hover, .ak-moi__menu button:hover { background: var(--creme); color: var(--encre); }
.ak-moi__menu svg { opacity: .7; flex: 0 0 16px; }
.ak-moi__menu form { margin: var(--e2) 0 0; padding-top: var(--e2); border-top: 1px solid var(--trait); }
.ak-moi__menu form button { color: var(--g1); }
.ak-moi__menu form button:hover { color: var(--rouge); }

/* ── LA NOTE, EN ÉTOILES — 21/08/2026 ──
   Cinq boutons radio retournés : le CSS colore l'étoile survolée et toutes
   celles qui la précèdent. Aucun JavaScript, et ça marche au clavier. */
.ak-notes { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.ak-notes input { position: absolute; opacity: 0; width: 0; height: 0; }
.ak-notes label { cursor: pointer; color: var(--g3); line-height: 0; transition: color var(--t-vif) var(--e-sortie), transform var(--t-vif) var(--e-sortie); }
.ak-notes label:hover, .ak-notes label:hover ~ label,
.ak-notes input:checked ~ label { color: var(--orange); }
.ak-notes label:hover { transform: scale(1.12); }
.ak-notes input:focus-visible + label { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* ── CHOISIR UN LIEU SUR LA CARTE — 21/08/2026 ── */
.ak-lieu { position: relative; }
.ak-lieu__barre { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e2); flex-wrap: wrap; }
.ak-lieu__position {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--trait-fort); border-radius: var(--r-pastille);
    background: var(--blanc); color: var(--encre-2);
    font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: border-color var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-lieu__position:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.ak-lieu__position:disabled { opacity: .6; cursor: progress; }
.ak-lieu__ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--vert); }

/* LA CARTE N'APPARAÎT QU'UNE FOIS LE LIEU CHOISI : une carte vide centrée sur
   rien n'aide personne, et elle coûte une requête. */
.ak-lieu__carte {
    height: 220px; margin-top: var(--e3);
    border-radius: var(--r-champ);
    border: 1px solid var(--trait);
    overflow: hidden;
    background: var(--creme);
}
.ak-lieu__carte[hidden] { display: none; }

/* La carte du suivi : plus haute que celle d'un formulaire — on la regarde,
   on n'y clique pas. */
.ak-suivi-carte { height: 320px; background: var(--creme); }
@media (max-width: 700px) { .ak-suivi-carte { height: 240px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   LA SECONDE VAGUE DE L'ESPACE CLIENT — 21/08/2026, contrôle de parité.

   Carnet d'adresses, notifications, détail de commande, replis. Tout est
   préfixé `ak-` et, pour ce qui touche au tableau de bord, `ak-*-tb` : le
   préfixe EST la portée. C'est la leçon du 21/08, où un `.ak-tuile` générique
   a repeint la boutique sans que personne l'ait demandé.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── UN AVIS EN HAUT DE PAGE ──
   « Enregistré », « retiré », « impossible ». Il vit une seconde et doit se
   lire sans être cherché : d'où la barre de couleur à gauche plutôt qu'un
   simple texte vert perdu dans la page. */
.ak-avis-tb {
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e3) var(--e4);
    margin-bottom: var(--e4);
    border-radius: var(--r-champ);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--g3);
    background: var(--blanc);
    font-size: 13.5px; font-weight: 600; color: var(--encre);
}
.ak-avis-tb--ok    { border-left-color: var(--vert);  background: var(--vert-doux);  color: var(--vert); }
.ak-avis-tb--faute { border-left-color: var(--rouge); background: var(--rouge-doux); color: var(--rouge); }

/* ── LE BOUTON DE RETRAIT D'UNE LIGNE ──
   Discret au repos, rouge au survol : détruire ne doit jamais être le geste
   le plus visible d'une ligne, mais doit être sans ambiguïté une fois visé. */
.ak-ligne-tb__retirer {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex: 0 0 34px;
    border: 1px solid var(--trait); border-radius: 10px;
    background: transparent; color: var(--g3);
    cursor: pointer;
    transition: color var(--t-vif) var(--e-sortie), border-color var(--t-vif) var(--e-sortie),
                background var(--t-vif) var(--e-sortie);
}
.ak-ligne-tb__retirer:hover { color: var(--rouge); border-color: var(--rouge); background: var(--rouge-doux); }

/* ── UNE LIGNE QUI EST UN BOUTON ──
   Les notifications s'envoient en POST (marquer lu) : c'est donc un <button>
   et non un <a>, qui n'hérite d'aucun style de lien. On lui rend la mise en
   page d'une ligne, largeur comprise. */
.ak-ligne-tb--bouton {
    width: 100%; border: 0; background: transparent;
    text-align: left; font: inherit; cursor: pointer;
}
.ak-ligne-tb--bouton:hover { background: var(--creme); }
/* NON LUE : le fond très pâle fait le travail à lui seul dans une liste — le
   point à droite ne sert qu'à trancher les cas isolés. */
.ak-ligne-tb--neuve { background: var(--orange-doux); }
.ak-ligne-tb--neuve .ak-ligne-tb__nom { font-weight: 800; }
.ak-ligne-tb--neuve:hover { background: var(--orange-doux); filter: brightness(.985); }
.ak-ligne-tb__cote {
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    flex: 0 0 auto;
}
.ak-ligne-tb__quand { font-size: 11.5px; color: var(--g1); white-space: nowrap; }
.ak-ligne-tb__point { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

/* ── UNE CARTE QUI SE REPLIE ──
   « J'ai le code d'un ami », « Modifier ma collecte », « Changer de numéro » :
   des gestes rares, qui ne doivent pas encombrer la page de ceux qui viennent
   pour autre chose. Le marqueur natif est retiré au profit d'un chevron. */
.ak-repli > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.ak-repli > summary::-webkit-details-marker { display: none; }
.ak-repli > summary::after {
    content: ""; flex: 0 0 auto;
    width: 8px; height: 8px;
    border-right: 2px solid var(--g3); border-bottom: 2px solid var(--g3);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--t-vif) var(--e-sortie);
}
.ak-repli[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ak-repli > summary:hover { background: var(--creme); }

/* ── LE PARCOURS D'UNE COMMANDE ──
   Trois jalons, horizontaux : reçue, en préparation, livrée. La barre relie
   les ronds pour qu'on lise une progression et non trois états séparés. */
.ak-frise { display: flex; list-style: none; margin: 0; padding: 0; }
.ak-frise__pas { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ak-frise__pas::before {
    content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px;
    background: var(--trait);
}
.ak-frise__pas:first-child::before { display: none; }
.ak-frise__pas--fait::before { background: var(--orange); }
.ak-frise__rond {
    position: relative; z-index: 1;
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--creme); color: transparent;
    box-shadow: inset 0 0 0 2px var(--trait);
}
.ak-frise__pas--fait .ak-frise__rond { background: var(--orange); color: #fff; box-shadow: none; }
.ak-frise__mot { font-size: 11.5px; font-weight: 700; color: var(--g1); text-align: center; }
.ak-frise__pas--fait .ak-frise__mot { color: var(--encre); }

/* ── LA DÉCOMPOSITION D'UN TOTAL ──
   Chiffres alignés à droite en chasse fixe : c'est ce qui rend une addition
   vérifiable d'un coup d'œil. */
.ak-compte-ligne {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
    padding: 7px 0;
    font-size: 13.5px; color: var(--g1);
}
.ak-compte-ligne > :last-child { font-weight: 700; color: var(--encre); font-variant-numeric: tabular-nums; }
.ak-compte-ligne--total {
    border-top: 1px solid var(--trait); margin-top: var(--e2); padding-top: var(--e3);
    font-size: 15px; font-weight: 700; color: var(--encre);
}
.ak-compte-ligne--total > :last-child { font-size: 17px; font-weight: 800; }
.ak-compte-ligne--du > :last-child { color: var(--orange); font-size: 16px; font-weight: 800; }

/* ── LES PIÈCES JOINTES DU FIL — 21/08/2026, après contrôle.
   La vue n'affichait que le texte : cinq messages n'ayant qu'une photo
   s'affichaient en bulles vides. Une image se montre, un vocal se joue, un
   document se nomme — et une position mène à la carte. */
.ak-bulle__photo { display: block; margin-bottom: 6px; border-radius: 12px; overflow: hidden; max-width: 240px; }
.ak-bulle__photo img { display: block; width: 100%; height: auto; }
.ak-bulle__media { display: block; width: 100%; max-width: 240px; margin-bottom: 6px; }
.ak-bulle__piece {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 6px; padding: 7px 11px;
    border-radius: 10px;
    /* Le fond emprunte à la bulle qui la porte : une pastille blanche sur une
       bulle orange se lirait comme un élément d'une autre page. */
    background: rgba(255, 255, 255, .18);
    font-size: 12.5px; font-weight: 700; text-decoration: none; color: inherit;
}
.ak-bulle--eux .ak-bulle__piece { background: rgba(26, 21, 18, .06); }
.ak-bulle__piece:hover { text-decoration: underline; }

/* LE TROMBONE — même hauteur que le champ, pour que la barre reste une ligne. */
.ak-ecrire__trombone {
    display: grid; place-items: center;
    width: 44px; height: 44px; flex: 0 0 44px;
    border: 1px solid var(--trait); border-radius: var(--r-champ);
    color: var(--g1); cursor: pointer;
    transition: color var(--t-vif) var(--e-sortie), border-color var(--t-vif) var(--e-sortie);
}
.ak-ecrire__trombone:hover { color: var(--orange); border-color: var(--orange); }
.ak-ecrire__choix { padding: 0 var(--e5) var(--e3); font-size: 12px; font-weight: 700; color: var(--orange); }
.ak-ecrire__choix[hidden] { display: none; }

/* ── LE TRAIT ENTRE DEUX NOTIFICATIONS — après contrôle.
   Chaque ligne est enveloppée dans son propre <form> (elle poste « marquer
   lu »), si bien que `.ak-ligne-tb + .ak-ligne-tb` ne se déclenchait jamais :
   les notifications se touchaient sans séparation, seules de tout le compte à
   le faire. On recolle le trait sur le formulaire. */
.ak-carte-tb__corps--serre > form + form .ak-ligne-tb { border-top: 1px solid var(--trait); }

/* Un bouton-ligne doit s'enfoncer comme les autres : sans retour visuel, un
   clic sur réseau lent se répète. */
.ak-ligne-tb--bouton:active,
.ak-ligne-tb__retirer:active { transform: scale(.995); }

/* ── LES PAGES D'ERREUR — 21/08/2026, après contrôle.
   Le site rendait les gabarits d'usine de Laravel, en anglais et sans en-tête.
   Une impasse doit proposer une sortie : trois liens et un numéro. */
.ak-egaree { text-align: center; padding-block: var(--e9) var(--e8); max-width: 620px; }
.ak-egaree__rond {
    display: grid; place-items: center;
    width: 76px; height: 76px; margin: 0 auto var(--e5);
    border-radius: 50%; background: var(--orange-doux); color: var(--orange);
}
.ak-egaree h1 {
    font-size: clamp(26px, 3vw, 38px); font-weight: 800;
    letter-spacing: -.042em; line-height: 1.08; color: var(--encre);
}
.ak-egaree > p { margin-top: var(--e4); font-size: 15px; line-height: 1.65; color: var(--g1); }
.ak-egaree__gestes { display: flex; gap: var(--e3); flex-wrap: wrap; justify-content: center; margin-top: var(--e6); }
.ak-egaree__aide { margin-top: var(--e6); font-size: 13.5px; color: var(--g1); }
.ak-egaree__aide a { color: var(--orange); font-weight: 700; text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════
   LES PAGES LÉGALES — 22/08/2026
   Confidentialité, conditions, suppression de compte. Trois pages qu'on
   lit rarement mais qu'on doit pouvoir PARCOURIR : d'où le sommaire collant
   à gauche, et des sections numérotées auxquelles on peut renvoyer par
   ancre. Tout est bâti sur les jetons existants, donc le mode sombre suit
   sans une seule règle de plus.
   ══════════════════════════════════════════════════════════════════════ */
.ak-legal {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: var(--e8);
    align-items: start;
    padding-block: var(--e7) var(--e9);
}
.ak-legal__sommaire { position: sticky; top: 96px; }
.ak-legal__sommaire h2 {
    font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--g2); margin-bottom: var(--e4);
}
.ak-legal__sommaire ol { list-style: none; display: flex; flex-direction: column; gap: var(--e1); }
.ak-legal__sommaire a {
    display: block; padding: 7px 10px; margin-left: -10px;
    border-radius: 9px; font-size: 13.5px; line-height: 1.4;
    color: var(--g1); text-decoration: none;
    transition: background .15s, color .15s;
}
.ak-legal__sommaire a:hover { background: var(--orange-doux); color: var(--orange); }

.ak-legal__corps > section { scroll-margin-top: 96px; }
.ak-legal__corps > section + section { margin-top: var(--e7); }
.ak-legal__corps h2 {
    display: flex; align-items: baseline; gap: var(--e3);
    font-size: 20px; font-weight: 800; letter-spacing: -.025em;
    color: var(--encre); margin-bottom: var(--e4);
}
/* Le numéro appartient à la section, pas au titre : il se recopie mal, et
   un lecteur d'écran n'a pas à l'annoncer comme un mot. */
.ak-legal__corps h2::before {
    content: counter(ak-legal-n); counter-increment: ak-legal-n;
    flex: none; display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--orange-doux); color: var(--orange);
    font-size: 12.5px; font-weight: 800;
}
.ak-legal__corps { counter-reset: ak-legal-n; }

/* L'encadré d'avertissement — sobre, jamais rouge : rien ici n'est une
   erreur, c'est une conséquence qu'on annonce avant qu'elle arrive. */
.ak-legal__note {
    margin-block: var(--e5);
    padding: var(--e5);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--orange);
    border-radius: var(--r-champ);
    background: var(--blanc);
    font-size: 14.5px; line-height: 1.65; color: var(--encre-2);
}
.ak-legal__note strong { color: var(--encre); }

/* Le tableau « ce qui part / ce qui reste ». Il porte l'essentiel de la
   page de suppression : c'est la promesse exacte, ligne par ligne. */
.ak-legal__table { width: 100%; border-collapse: collapse; margin-block: var(--e5); font-size: 14.5px; }
.ak-legal__table th {
    text-align: left; padding: var(--e3) var(--e4);
    font-size: 11.5px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--g1);
    border-bottom: 1px solid var(--trait-fort);
}
.ak-legal__table td { padding: var(--e4); border-bottom: 1px solid var(--trait); color: var(--encre-2); vertical-align: top; }
.ak-legal__table tr:last-child td { border-bottom: none; }
.ak-legal__table td:first-child { color: var(--encre); font-weight: 600; }
.ak-legal__oui, .ak-legal__non { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.ak-legal__oui { color: var(--vert); }   /* jeton, pas une valeur en dur : il bascule en mode sombre */
.ak-legal__non { color: var(--g1); }

/* Le pavé d'action de la page de suppression. */
.ak-legal__geste {
    margin-top: var(--e6); padding: var(--e6);
    border-radius: var(--r-carte); background: var(--creme);
    border: 1px solid var(--trait);
}
.ak-legal__geste h3 { font-size: 17px; font-weight: 800; color: var(--encre); margin-bottom: var(--e2); }
.ak-legal__geste p { font-size: 14.5px; line-height: 1.65; color: var(--g1); margin-bottom: var(--e5); }
.ak-legal__geste .ak-cta { text-decoration: none; }

.ak-legal__maj {
    margin-top: var(--e8); padding-top: var(--e5);
    border-top: 1px solid var(--trait);
    font-size: 13px; color: var(--g2);
}

@media (max-width: 900px) {
    .ak-legal { grid-template-columns: 1fr; gap: var(--e5); padding-block: var(--e6) var(--e8); }
    .ak-legal__sommaire { position: static; }
    .ak-legal__sommaire ol { flex-direction: row; flex-wrap: wrap; gap: var(--e2); }
    .ak-legal__sommaire a { margin-left: 0; background: var(--creme); font-size: 13px; }
    /* Un tableau à deux colonnes tient encore ; on le laisse défiler seul
       plutôt que d'imposer une barre horizontale à toute la page. */
    .ak-legal__corps { overflow-x: auto; }
}

/* ═══ `hidden` DOIT CACHER, SANS EXCEPTION — 22/08/2026 ════════════════
   Toute règle qui pose un `display:` bat l'attribut `hidden` : même
   spécificité, et elle passe après dans la feuille. Le site corrigeait le
   piège classe par classe — six `[hidden]` posés à la main — et en avait
   oublié une : `.ak-lieu__ok` affichait « ✓ Lieu retenu » alors que rien
   n'était retenu, jusqu'à ce que « Terminer » réponde le contraire.
   Une règle générale vaut mieux que six rustines et une oubliée. */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   LA DEMANDE EN QUATRE TEMPS — 22/08/2026, maquette validée.
   Même idiome que la création de fiche dans l'ERP : un fil, des pastilles,
   une seule étape ouverte, et ce qui est validé se replie en UNE ligne qui
   dit sa substance. C'est ce repli qui raccourcit l'écran.
   ═══════════════════════════════════════════════════════════════════════ */
.ak-dem-frise { position: relative; display: flex; flex-direction: column; }
.ak-dem-etape { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 0 15px;
            position: relative; padding-bottom: var(--e4); }
.ak-dem-etape::before { content: ''; position: absolute; left: 16.5px; top: 34px; bottom: 0;
                    width: 1.5px; background: var(--trait); }
.ak-dem-etape:last-child::before { display: none; }
.ak-dem-etape.faite::before { background: color-mix(in srgb, var(--orange) 40%, var(--trait)); }

.ak-dem-noeud { width: 34px; height: 34px; border-radius: var(--r-pastille); display: grid;
            place-items: center; font-size: 13px; font-weight: 700; background: var(--blanc);
            border: 1.5px solid var(--trait); color: var(--g2);
            transition: background var(--t-vif) var(--e-sortie), border-color var(--t-vif) var(--e-sortie),
                        color var(--t-vif) var(--e-sortie), box-shadow var(--t-vif) var(--e-sortie); }
.ak-dem-etape.active .ak-dem-noeud { background: var(--orange); border-color: var(--orange);
                             color: var(--sur-couleur); box-shadow: 0 0 0 4px var(--orange-doux); }
.ak-dem-etape.faite .ak-dem-noeud { background: var(--orange-doux); border-color: transparent; color: var(--orange); }

.ak-dem-tete { display: flex; align-items: baseline; gap: var(--e3); min-height: 34px;
                 flex-wrap: wrap; cursor: pointer; }
.ak-dem-titre { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--encre); }
.ak-dem-etape.attente .ak-dem-titre { color: var(--g2); font-weight: 600; }
.ak-dem-note { font-size: 13px; color: var(--g2); }
.ak-dem-req { color: var(--orange); }

.ak-dem-repli { display: none; margin-top: 2px; align-items: center; gap: var(--e2); flex-wrap: wrap;
            font-size: 14px; color: var(--encre-2); background: var(--blanc);
            border: 1px solid var(--trait); border-radius: var(--r-champ);
            padding: 10px 14px; cursor: pointer; width: 100%; text-align: left; font-family: inherit; }
.ak-dem-etape.faite .ak-dem-repli { display: flex; }
.ak-dem-etape.active .ak-dem-repli { display: none; }
.ak-dem-repli:hover { border-color: color-mix(in srgb, var(--orange) 40%, var(--trait)); }
.ak-dem-repli b { color: var(--encre); font-weight: 700; }
.ak-dem-repli .modif { margin-left: auto; font-size: 13px; color: var(--orange); font-weight: 600; }

.ak-dem-panneau { display: none; margin-top: var(--e3); background: var(--blanc);
              border-radius: var(--r-carte); box-shadow: var(--ombre-flottante, 0 1px 2px rgba(20,20,30,.04), 0 6px 20px rgba(20,20,30,.06));
              padding: var(--e5); }
.ak-dem-etape.active .ak-dem-panneau { display: block; }

.ak-dem-pied { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e5);
                 padding-top: var(--e4); border-top: 1px solid var(--trait); flex-wrap: wrap; }
.ak-dem-pied-note { font-size: 13px; color: var(--rouge, #DC2626); font-weight: 600; }

.ak-dem-lien { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--orange);
                background: none; border: 0; padding: 6px 0; cursor: pointer;
                display: inline-flex; align-items: center; gap: 6px; }
.ak-dem-lien:hover { text-decoration: underline; }

/* ── Les menus à logos ── */
.ak-dem-menu { position: relative; }
.ak-dem-menu-btn { width: 100%; display: flex; align-items: center; gap: var(--e2); font: inherit;
               font-size: 15px; text-align: left; cursor: pointer; background: var(--creme);
               border: 1px solid transparent; border-radius: var(--r-champ);
               padding: 10px 14px; color: var(--g2); min-height: 48px; }
.ak-dem-menu-btn.rempli { color: var(--encre); font-weight: 600; }
.ak-dem-menu-btn:disabled { cursor: not-allowed; opacity: .65; }
.ak-dem-menu-btn .chev { margin-left: auto; display: inline-flex; color: var(--g2);
                     transition: transform var(--t-vif) var(--e-sortie); }
.ak-dem-menu.ouvert .ak-dem-menu-btn { border-color: var(--orange); background: var(--blanc); }
.ak-dem-menu.ouvert .ak-dem-menu-btn .chev { transform: rotate(180deg); }
/* ⚠ PLUS DE `nowrap` NI D'ELLIPSE — 16/09/2026.
   Le nom du modèle était coupé par « … » : mesuré, cela n'arrivait qu'entre
   ~625 et ~715 px de fenêtre (le champ est alors sur deux colonnes et trop
   court), mais dans cette bande le client ne pouvait plus vérifier ce qu'il
   avait choisi — « Apple Watch Series 4 (40mm) » devenait « Apple Watch
   Series … ». Il se replie donc sur DEUX lignes au plus : 27 caractères au
   pire dans le référentiel, jamais trois lignes. */
.ak-dem-menu-val { display: flex; align-items: center; gap: var(--e2); min-width: 0;
               white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.ak-dem-menu-val img { width: 22px; height: 22px; object-fit: contain; flex: none; }

.ak-dem-menu-liste { display: none; position: absolute; z-index: 60; top: calc(100% + 5px); left: 0; right: 0;
                 background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-champ);
                 box-shadow: 0 6px 24px rgba(20,20,30,.12); padding: 7px; max-height: 340px; overflow-y: auto; }
.ak-dem-menu.ouvert .ak-dem-menu-liste { display: block; }
.ak-dem-menu-liste .ak-saisie { margin-bottom: 7px; }

.ak-dem-opt { display: flex; align-items: center; gap: 11px; padding: 8px 10px;
          border-radius: 9px; cursor: pointer; }
.ak-dem-opt:hover { background: var(--creme); }
.ak-dem-opt.on { background: var(--orange-doux); }
.ak-dem-opt.on .nm { color: var(--orange); font-weight: 700; }
.ak-dem-opt.vide { cursor: default; color: var(--g2); font-size: 13.5px; }
.ak-dem-opt img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.ak-dem-opt .nm { font-size: 14.5px; font-weight: 600; color: var(--encre); }
.ak-dem-opt .cpt { margin-left: auto; font-size: 12px; color: var(--g2); }
/* ⚠ `flex`, PAS `grid` — même bogue que la boîte à photo ci-dessous, même
   correction : dans une grille, le `height: 100%` de l'image se résout contre
   une rangée indéfinie, retombe sur `auto`, et l'image dépasse. Mesuré ici :
   40 × 53 dans une case de 40 × 40, soit 13 px de photo coupés sur chaque
   modèle en portrait. */
.ak-dem-opt .vign { width: 40px; height: 40px; flex: none; border-radius: 8px; background: var(--creme);
                display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ak-dem-opt .vign img { width: 100%; height: 100%; object-fit: contain; }
/* Un modèle sans photo garde sa case : une grille qui saute d'une ligne à
   l'autre se parcourt deux fois plus mal qu'une grille régulière. */
.ak-dem-opt .vign.sans::after { content: ''; width: 16px; height: 24px; border: 1.5px solid var(--g3);
                            border-radius: 3px; }

/* ── LA CARTE DU MODÈLE RETENU — 16/09/2026 ──────────────────────────────
   Le champ disait le modèle en une ligne de texte ; il le MONTRE désormais :
   vignette, marque en petit, nom entier sur deux lignes au plus. C'est le
   bouton lui-même qui porte la carte — cliquer dessus rouvre la liste, donc
   « changer » n'a pas besoin d'un second bouton (et un bouton dans un bouton
   n'existe pas en HTML).
   Pourquoi ici et pas seulement dans le récapitulatif : sur téléphone, le
   récapitulatif passe SOUS le formulaire — la photo n'est plus sous les yeux
   au moment où l'on choisit. */
.ak-dem-menu-btn--carte { gap: 11px; padding: 8px 12px; }
.ak-dem-menu-btn--carte .vign { width: 42px; height: 42px; flex: none; border-radius: 9px;
                            background: var(--blanc); border: 1px solid var(--trait);
                            display: flex; align-items: center; justify-content: center;
                            overflow: hidden; }
.ak-dem-menu-btn--carte .vign img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
/* Un modèle sans photo garde sa case, comme dans la liste. */
.ak-dem-menu-btn--carte .vign.sans::after { content: ''; width: 15px; height: 22px;
                            border: 1.5px solid var(--g3); border-radius: 3px; }
.ak-dem-menu-btn--carte .txt { min-width: 0; text-align: start; }
.ak-dem-menu-btn--carte .mq { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
                          text-transform: uppercase; color: var(--g2); }
.ak-dem-menu-btn--carte .nm { display: block; font-size: 15px; font-weight: 700; color: var(--encre);
                          line-height: 1.25; overflow-wrap: anywhere; }

/* ── LA LIGNE MARQUE / MODÈLE : UN TIERS, DEUX TIERS — 16/09/2026 ────────
   19 marques, huit caractères au plus (« Motorola »), et un logo pour la
   reconnaître : la marque n'a pas besoin de la moitié de la ligne. Le modèle,
   lui, va jusqu'à 27 caractères. Classe PROPRE à cette étape — `.ak-duo` sert
   partout ailleurs sur le site, et il n'a rien demandé.
   ⚠ La bascule en une colonne doit être REDITE ici : la règle générique
   `@media (max-width:1025px) .ak-duo` vit 1 100 lignes plus haut, et une
   @media ne pèse pas plus lourd qu'une autre règle — sans ce rappel, la ligne
   resterait en deux colonnes sur téléphone. */
.ak-duo--appareil { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 1025px) { .ak-duo--appareil { grid-template-columns: minmax(0, 1fr); } }

/* ── Le schéma de déverrouillage ── */
.ak-dem-schema-boite { margin-top: var(--e4); padding: var(--e5); border: 1px solid var(--trait);
                   border-radius: var(--r-champ); background: var(--creme); text-align: center; }
.ak-dem-schema { width: 190px; height: 190px; margin: 0 auto; position: relative;
             touch-action: none; cursor: crosshair; }
.ak-dem-schema svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ak-dem-schema .pt { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px;
                 border-radius: 50%; background: var(--blanc); border: 2px solid var(--trait-fort); }
.ak-dem-schema .pt.on { background: var(--orange); border-color: var(--orange);
                    box-shadow: 0 0 0 6px var(--orange-doux); }
.ak-dem-schema-lu { margin-top: var(--e3); font-size: 13.5px; font-weight: 600;
                color: var(--encre-2); min-height: 20px; }
.ak-dem-schema-lu span { color: var(--g2); font-weight: 500; }

/* ── Les photos ── */
.ak-dem-photos { display: block; border: 1.5px dashed var(--trait-fort); border-radius: var(--r-champ);
                  background: var(--creme); padding: var(--e6) var(--e5); text-align: center; cursor: pointer;
                  transition: border-color var(--t-vif) var(--e-sortie), background var(--t-vif) var(--e-sortie); }
.ak-dem-photos:hover, .ak-dem-photos.survol { border-color: var(--orange); background: var(--orange-doux); }
.ak-dem-photos .ico { display: inline-flex; color: var(--orange); }
.ak-dem-photos strong { display: block; font-size: 15px; margin-top: 6px; color: var(--encre); }
.ak-dem-photos small { display: block; font-size: 13px; color: var(--g2); margin-top: 4px;
                        max-width: 46ch; margin-inline: auto; line-height: 1.5; }
.ak-dem-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr));
                gap: var(--e3); margin-top: var(--e3); align-items: start; }
.ak-dem-vignette { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
               background: var(--creme); border: 1px solid var(--trait); }
.ak-dem-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-dem-vignette .num { position: absolute; bottom: 5px; left: 6px; font-size: 10.5px; font-weight: 700;
                    color: #fff; background: rgba(0,0,0,.55); padding: 1px 7px; border-radius: 99px; }
.ak-dem-vignettes .ak-dem-lien { grid-column: 1 / -1; justify-self: start; }

/* ── L'agence et la localisation ── */
.ak-dem-agence { display: flex; align-items: flex-start; gap: var(--e4); padding: var(--e4);
                   border: 1px solid var(--trait); border-radius: var(--r-champ); background: var(--creme); }
.ak-dem-agence .broche { display: inline-flex; color: var(--orange); flex: none; }
.ak-dem-agence strong { display: block; font-size: 14.5px; color: var(--encre); }
.ak-dem-agence span { font-size: 13px; color: var(--g1); }
.ak-dem-lieu-actions { display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e3); }
.ak-dem-lieu-btn { font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 10px 14px;
               border-radius: var(--r-champ); border: 1px solid var(--trait); background: var(--blanc);
               color: var(--encre-2); display: inline-flex; align-items: center; gap: var(--e2); }
.ak-dem-lieu-btn:hover { border-color: var(--orange); color: var(--orange); }
.ak-dem-lieu-btn:disabled { opacity: .6; cursor: wait; }
.ak-dem-quartiers { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--e3); }
.ak-dem-quartiers button { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
                       padding: 7px 13px; border-radius: var(--r-pastille); border: 1px solid var(--trait);
                       background: var(--blanc); color: var(--g1); }
.ak-dem-quartiers button:hover { border-color: var(--orange); color: var(--orange); }

/* ── Le récapitulatif ── */
/* ⚠ `flex`, PAS `grid` — LA CAUSE DU ROGNAGE, mesurée le 16/09/2026.
   L'appareil apparaissait coupé en bas. Ce n'était ni le format de la boîte,
   ni `aspect-ratio` : dans une GRILLE, le pourcentage de hauteur de l'item se
   résout contre une rangée INDÉFINIE. `height: 100%` retombait donc sur
   `auto`, l'image se dessinait à sa proportion naturelle (228 × 302 dans une
   boîte de 230 × 145), dépassait, et `overflow: hidden` la coupait sans un
   mot — `object-fit: contain` n'avait jamais eu son mot à dire.
   La même boîte en `block` ou en `flex` : 228 × 143, contenue. Et la boîte
   VIDE garde sa hauteur, ce que ne fait pas la piste « ratio porté par
   l'image », qui l'effondre.
   LE CADRE PASSE DE 16/10 À CARRÉ : sur 815 photos du référentiel, 392 sont
   carrées (48 %), 385 portrait (47 %), 38 paysage (5 %) — un cadre paysage
   ne convenait qu'à un vingtième d'entre elles.
   ⚠ Le même motif (`grid` + image en `height: 100%`) vit sur d'autres
   sélecteurs de ce fichier : ils rognent de la même façon, et ils attendent
   leur tour. */
/* ⚠ UN CARRÉ SE PLAFONNE, SINON IL SUIT LA FENÊTRE. Sous 1 025 px le
   récapitulatif passe pleine largeur : mesuré, la boîte atteignait 802 × 802
   à 900 px de large — un carré haut comme l'écran, avec une photo de 160 px
   étirée à 776. Le 16/10 masquait le problème en aplatissant la boîte. On la
   borne donc, et on la centre. */
.ak-dem-photo { aspect-ratio: 1; max-width: 340px; margin-inline: auto;
               border-radius: 14px; background: var(--creme);
               border: 1px dashed var(--trait); display: flex; align-items: center;
               justify-content: center; padding: 12px;
               margin-bottom: var(--e3); overflow: hidden; color: var(--g3); }
.ak-dem-photo img { width: 100%; height: 100%; object-fit: contain; }
.ak-dem-nom { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--encre); }
.ak-dem-nom.vide { color: var(--g2); font-weight: 500; font-size: 14.5px; }
.ak-dem-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e2); }
.ak-dem-puce { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pastille);
           background: var(--creme); color: var(--encre-2); }
.ak-dem-puce.accent { background: var(--orange-doux); color: var(--orange); }
.ak-dem-prix { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--trait); }
.ak-dem-prix .val { font-size: 23px; font-weight: 800; letter-spacing: -.03em; color: var(--encre); }
.ak-dem-prix .val.vide { color: var(--g2); font-weight: 500; font-size: 15px; }
.ak-dem-prix .dev { font-size: 13px; color: var(--g2); margin-left: 6px; }
.ak-dem-prix small { display: block; font-size: 12.5px; color: var(--g2); margin-top: 5px; line-height: 1.5; }

.ak-dem-vu { display: grid; gap: 1px; }
.ak-dem-vu:not(:empty) { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--trait); }
.ak-dem-vu-groupe { padding: 9px 0 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
                text-transform: uppercase; color: var(--g2); }
.ak-dem-vu-groupe:first-child { padding-top: 0; }
.ak-dem-vu-ligne { display: flex; align-items: baseline; gap: var(--e3); padding: 5px 7px;
               font-size: 13.5px; border-radius: 8px; cursor: pointer; }
.ak-dem-vu-ligne:hover { background: var(--creme); }
.ak-dem-vu-ligne .k { color: var(--g2); flex: none; }
.ak-dem-vu-ligne .v { margin-left: auto; color: var(--encre); font-weight: 600; text-align: right; }
.ak-dem-vu-vide { margin: var(--e4) 0 0; padding-top: var(--e3); border-top: 1px solid var(--trait);
              font-size: 13px; color: var(--g2); line-height: 1.55; }
.ak-dem-envoi { display: grid; gap: var(--e2); margin-top: var(--e5); }
.ak-dem-envoi .ak-cta { width: 100%; justify-content: center; }
.ak-dem-envoi p { margin: 0; font-size: 12.5px; color: var(--g2); text-align: center; line-height: 1.5; }

@media (max-width: 860px) {
    .ak-dem-panneau { padding: var(--e4); }
    .ak-dem-etape { grid-template-columns: 30px minmax(0,1fr); gap: 0 10px; }
    .ak-dem-etape::before { left: 14.5px; }
    .ak-dem-noeud { width: 30px; height: 30px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   LA PAGE DE REMERCIEMENT — 22/08/2026.
   Elle vivait encore en classes Bootstrap de l'ancien gabarit, qui ne sont
   plus dans cette feuille : le client tombait sur du texte nu après avoir
   rempli quatre étapes. Le dernier écran d'un parcours est celui qu'on
   retient.
   ══════════════════════════════════════════════════════════════════════ */
.ak-merci { background: var(--creme); }
.ak-merci > .ak-large { padding-block: var(--e8); display: grid; place-items: center; }
.ak-merci__carte {
    width: 100%; max-width: 640px;
    background: var(--blanc); border-radius: var(--r-carte);
    box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 6px 24px rgba(20,20,30,.07);
    padding: var(--e7) var(--e6) var(--e6);
    text-align: center;
}
.ak-merci__sceau {
    display: grid; place-items: center;
    width: 66px; height: 66px; margin: 0 auto var(--e5);
    border-radius: 50%; background: var(--vert-doux); color: var(--vert);
}
.ak-merci__carte h1 {
    margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 800;
    letter-spacing: -.04em; line-height: 1.1; color: var(--encre);
}
.ak-merci__mot {
    margin: var(--e3) auto 0; max-width: 48ch;
    font-size: 15px; line-height: 1.6; color: var(--g1);
}

/* La référence : le seul élément qu'on recopie. */
.ak-merci__ref {
    margin-top: var(--e6); padding: var(--e4) var(--e5);
    border: 1px dashed var(--trait-fort); border-radius: var(--r-champ);
    background: var(--creme);
    display: flex; align-items: center; justify-content: center;
    gap: var(--e4); flex-wrap: wrap;
}
.ak-merci__ref .lab { font-size: 12.5px; font-weight: 700; color: var(--g1); }
.ak-merci__ref strong {
    font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--orange);
    font-variant-numeric: tabular-nums;
}
.ak-merci__copier {
    font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
    padding: 6px 13px; border-radius: var(--r-pastille);
    border: 1px solid var(--trait-fort); background: var(--blanc); color: var(--encre-2);
}
.ak-merci__copier:hover { border-color: var(--orange); color: var(--orange); }
.ak-merci__aide { margin: var(--e2) 0 0; font-size: 12.5px; color: var(--g2); }

/* Ce qu'on a compris de sa demande. */
.ak-merci__recu {
    margin: var(--e6) 0 0; text-align: left;
    border: 1px solid var(--trait); border-radius: var(--r-champ); overflow: hidden;
}
.ak-merci__recu > div {
    display: flex; align-items: baseline; gap: var(--e4);
    padding: 11px var(--e4); font-size: 14px;
}
.ak-merci__recu > div + div { border-top: 1px solid var(--trait); }
.ak-merci__recu dt { color: var(--g2); flex: none; margin: 0; }
.ak-merci__recu dd { margin: 0 0 0 auto; color: var(--encre); font-weight: 600; text-align: right; }

/* Ce qui va se passer, dans l'ordre. */
.ak-merci__suite { margin: var(--e6) 0 0; padding: 0; list-style: none; text-align: left; display: grid; gap: var(--e4); }
.ak-merci__suite li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: var(--e4); align-items: start; }
.ak-merci__suite .n {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50%; background: var(--orange-doux); color: var(--orange);
    font-size: 13px; font-weight: 800;
}
.ak-merci__suite strong { display: block; font-size: 14.5px; color: var(--encre); }
.ak-merci__suite small { display: block; margin-top: 3px; font-size: 13px; color: var(--g1); line-height: 1.55; }

.ak-merci__gestes { margin-top: var(--e7); display: flex; gap: var(--e3); justify-content: center; flex-wrap: wrap; }
.ak-merci__joindre { margin: var(--e5) 0 0; font-size: 13px; color: var(--g2); }
.ak-merci__joindre a { color: var(--orange); font-weight: 700; text-decoration: none; }

@media (max-width: 620px) {
    .ak-merci__carte { padding: var(--e6) var(--e4) var(--e5); }
    .ak-merci__recu > div { flex-direction: column; gap: 2px; }
    .ak-merci__recu dd { margin-left: 0; text-align: left; }
    .ak-merci__gestes .ak-cta { width: 100%; justify-content: center; }
}


/* ═══ RÉGLAGES DU 22/08/2026 — sa relecture du formulaire ═══════════════ */

/* LE LIEU ET LA CARTE CÔTE À CÔTE.
   À la verticale, la carte poussait le champ « repère » hors de l'écran : on
   tapait une adresse sans voir le point qu'elle posait. */
.ak-dem-collecte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--e5);
    align-items: start;
}
.ak-dem-collecte__carte { position: sticky; top: var(--e4); }
.ak-dem-collecte__carte .ak-lieu__carte {
    display: block; width: 100%; min-height: 300px; height: 100%;
    border-radius: var(--r-champ); overflow: hidden;
}
.ak-dem-collecte__carte .ak-lieu__carte[hidden] { display: none !important; }
@media (max-width: 900px) {
    .ak-dem-collecte { grid-template-columns: minmax(0, 1fr); }
    .ak-dem-collecte__carte { position: static; }
    .ak-dem-collecte__carte .ak-lieu__carte { min-height: 220px; }
}

/* LE RÉCAPITULATIF TIENT SOUS LES YEUX.
   Il grandissait avec la saisie jusqu'à dépasser l'écran : on le perdait au
   moment précis où il servait. Il reste maintenant accroché en haut, borné à
   la hauteur de la fenêtre, et défile en lui-même s'il déborde. */
.ak-demande .ak-recap-dem {
    position: sticky;
    top: var(--e4);
    max-height: calc(100vh - var(--e6));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--trait-fort) transparent;
}
.ak-demande .ak-recap-dem::-webkit-scrollbar { width: 6px; }
.ak-demande .ak-recap-dem::-webkit-scrollbar-thumb {
    background: var(--trait-fort); border-radius: 99px;
}
@media (max-width: 1040px) {
    .ak-demande .ak-recap-dem { position: static; max-height: none; overflow: visible; }
}

.ak-dem-carte-vide {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--e3); text-align: center;
    min-height: 300px; margin: 0; padding: var(--e5);
    border: 1.5px dashed var(--trait-fort); border-radius: var(--r-champ);
    background: var(--creme); color: var(--g2); font-size: 13px; line-height: 1.55;
}
.ak-dem-carte-vide svg { color: var(--g3); }
.ak-dem-carte-vide span { max-width: 34ch; }
@media (max-width: 900px) { .ak-dem-carte-vide { min-height: 150px; } }


/* ═══════════════════════════════════════════════════════════════════════
   LA VITRINE DE LA BOUTIQUE — 24/08/2026, troisième écriture
   ═══════════════════════════════════════════════════════════════════════
   Disposition de la référence qu'il a donnée : une page en fond clair, des
   PANNEAUX BLANCS arrondis posés dessus, un par section. Dense, bas de
   plafond, beaucoup d'articles par écran.

   On lui emprunte la DISPOSITION, pas les couleurs : sa référence est en gris
   froid (#F2F2F5), la charte AK est chaude. Le crème du site fait le fond, le
   blanc fait les panneaux — même écart de valeur, autre température. */

.bv { background: var(--creme); padding-block: var(--e5) var(--e7); }
.bv-pile { display: grid; gap: var(--e4); }

/* LE PANNEAU. C'est lui qui fait le dessin : un peu de blanc, un rayon
   généreux, et l'ombre la plus discrète possible — la référence n'en met
   presque pas, et c'est ce qui la garde nette. */
.bv-carte { background: var(--blanc); border-radius: var(--r-carte);
    padding: var(--e5); }

/* ── L'ENTÊTE D'UN PANNEAU ── */
.bv-tete { display: flex; align-items: center; justify-content: space-between;
    gap: var(--e4); margin-bottom: var(--e4); flex-wrap: wrap; }
.bv-tete h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.03em; color: var(--encre); }
.bv-tete p { margin: 3px 0 0; font-size: 13px; color: var(--g1); }
.bv-oeil { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: #C64000; }

/* La pastille sombre de la référence : elle dit « il y en a d'autres », sans
   se prendre pour l'action principale de la page. */
.bv-pastille { display: inline-flex; align-items: center; flex: none;
    padding: 9px 18px; border-radius: var(--r-pastille);
    background: var(--fond-sombre); color: var(--sur-couleur);
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
    transition: background var(--t-vif) var(--e-sortie); }
.bv-pastille:hover { background: var(--fond-sombre-2); }
.bv-pastille--orange { background: var(--orange); }
.bv-pastille--orange:hover { background: #D24500; }

/* ── L'ENTRÉE ── */
.bv-entree { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
    gap: var(--e6); align-items: center; padding: var(--e6); }
.bv-entree h1 { margin: var(--e3) 0 0; font-size: clamp(24px, 2.9vw, 38px);
    font-weight: 800; letter-spacing: -.04em; line-height: 1.08; color: var(--encre); }
.bv-entree h1 em { font-style: normal; color: var(--orange); }
.bv-entree__phrase { margin: var(--e4) 0 0; max-width: 44ch; font-size: 14.5px;
    line-height: 1.6; color: var(--g1); }
.bv-entree__gestes { display: flex; align-items: center; gap: var(--e4);
    margin-top: var(--e5); flex-wrap: wrap; }
.bv-entree__n { font-size: 12.5px; color: var(--g2); }
/* Le visuel n'est pas une décoration : il occupe la place de l'image à venir,
   à ses proportions, pour que rien ne bouge le jour du dépôt. */
.bv-entree__visuel { aspect-ratio: 16 / 10; border-radius: 16px;
    background: linear-gradient(140deg, rgba(248,80,0,.13), rgba(26,21,18,.08)); }
@media (max-width: 860px) {
    .bv-entree { grid-template-columns: minmax(0, 1fr); padding: var(--e5); }
    .bv-entree__visuel { display: none; }
}

/* ── LES VIGNETTES ──
   Carré gris, produit au centre, prix en gras. `--fond-photo` est la valeur
   mesurée aux quatre coins des photos du catalogue : le fond de la vignette et
   celui de la photo se confondent, et le produit paraît détouré sans l'être. */
.bv-grille { display: grid; gap: var(--e4) var(--e3);
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.bv-v__cadre { position: relative; display: grid; place-items: center; aspect-ratio: 1;
    border-radius: 12px; background: var(--fond-photo); overflow: hidden; }
.bv-v__cadre img { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
.bv-v__vide { color: var(--g2); }
.bv-v__remise { position: absolute; top: 7px; left: 7px; padding: 2px 7px;
    border-radius: var(--r-pastille); background: var(--orange); color: var(--sur-couleur);
    font-size: 10.5px; font-weight: 800; }
.bv-v__coeur { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px;
    border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.9); color: var(--g1);
    opacity: 0; transition: opacity var(--t-vif) var(--e-sortie); }
.bv-v:hover .bv-v__coeur { opacity: 1; }
.bv-v__prix { margin: 9px 0 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bv-v__prix strong { font-size: 14px; font-weight: 800; color: var(--encre); }
.bv-v__prix s { font-size: 12px; color: var(--g2); }
/* Le nom tient sur deux lignes et se coupe : les libellés du catalogue vont
   jusqu'à quatre-vingts caractères, et une vignette sur trois deviendrait deux
   fois plus haute que ses voisines. */
.bv-v__nom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--g1); }
.bv-v__nom:hover { color: var(--orange); }

/* ── LES BONNES AFFAIRES ── */
.bv-flash { display: grid; grid-template-columns: minmax(190px, 22%) minmax(0, 1fr);
    gap: var(--e5); align-items: start; }
.bv-flash__tuile { display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 200px; height: 100%; padding: var(--e5); border-radius: 14px;
    background: var(--fond-sombre); color: var(--sur-couleur); }
.bv-flash__tuile strong { display: block; margin-top: 6px; font-size: 22px;
    font-weight: 800; letter-spacing: -.03em; }
.bv-flash__mot { display: block; margin-top: 8px; font-size: 12.5px;
    line-height: 1.5; color: rgba(255,255,255,.62); }
.bv-chrono { display: flex; align-items: baseline; gap: 3px; margin-top: var(--e4);
    font-variant-numeric: tabular-nums; }
.bv-chrono b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.bv-chrono i { font-style: normal; opacity: .35; }
@media (max-width: 760px) { .bv-flash { grid-template-columns: minmax(0, 1fr); } }

/* ── LES RAYONS ── */
/* La colonne de gauche se cale en HAUT, pas au centre : la grille des rayons
   fait deux rangées, et un titre flottant à mi-hauteur face à elle donnait
   l'impression d'un bloc mal posé. */
.bv-rayons-sec { display: grid; grid-template-columns: minmax(160px, 19%) minmax(0, 1fr);
    gap: var(--e5); align-items: start; }
.bv-rayons-sec h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.03em; color: var(--encre); }
.bv-rayons-sec p { margin: 6px 0 var(--e4); font-size: 13px; line-height: 1.5; color: var(--g1); }
.bv-rayons { display: grid; gap: var(--e4) var(--e3);
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.bv-rayon { display: block; text-align: center; }
.bv-rayon__cadre { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px;
    background: var(--fond-photo); overflow: hidden; color: var(--g2);
    transition: transform var(--t-vif) var(--e-sortie); }
.bv-rayon__cadre img { width: 100%; height: 100%; object-fit: contain; padding: 14%; }
.bv-rayon:hover .bv-rayon__cadre { transform: translateY(-3px); }
.bv-rayon__nom { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--encre); }
.bv-rayon__n { display: block; margin-top: 1px; font-size: 11.5px; color: var(--g2); }
/* Un rayon désert le dit et se retire du regard, sans disparaître : il annonce
   ce que la maison fera, pas ce qu'elle a. */
.bv-rayon--vide .bv-rayon__cadre { opacity: .38; }
.bv-rayon--vide .bv-rayon__nom { color: var(--g1); font-weight: 600; }
@media (max-width: 860px) { .bv-rayons-sec { grid-template-columns: minmax(0, 1fr); } }

/* ── LES BANNIÈRES ── */
.bv-pubs { display: grid; gap: var(--e4); }
.bv-pubs--duo   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bv-pubs--trio  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bv-pubs--large { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .bv-pubs--duo, .bv-pubs--trio { grid-template-columns: minmax(0, 1fr); } }
.bv-pub { position: relative; isolation: isolate; display: flex; flex-direction: column;
    justify-content: flex-end; overflow: hidden; border-radius: var(--r-carte);
    padding: var(--e5); min-height: 168px; color: var(--sur-couleur);
    background: var(--teinte, var(--fond-sombre));
    transition: transform var(--t-vif) var(--e-sortie); }
.bv-pubs--large .bv-pub { min-height: 190px; }
.bv-pub:hover { transform: translateY(-2px); }
.bv-pub img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* LE VOILE EST OBLIGATOIRE, pas décoratif : sans lui, un texte blanc posé sur
   une photo qu'on ne choisit pas devient illisible dès qu'elle est claire. */
.bv-pub::after { content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.06) 100%); }
/* Sans photo, le voile n'a rien à assombrir : il s'efface pour ne pas noircir
   l'aplat de la charte. */
.bv-pub--sans-image::after { background: linear-gradient(130deg, rgba(255,255,255,.08), rgba(0,0,0,.14)); }

/* ── L'AFFICHE DÉPOSÉE DANS LE TABLEAU DE BORD — 16/09/2026 ──────────────
   Sa demande : trois images qu'il dépose lui-même (Paramètres > Site web), et
   « l'image seule » — elle porte son titre, gravé dedans.

   Donc NI VOILE, NI MARGE : les deux servaient à poser du texte blanc sur une
   photo qu'on ne choisissait pas. Sur une affiche composée exprès, le voile ne
   fait que la ternir.

   ⚠ LE RAPPORT EST IMPOSÉ ICI, PAS DEVINÉ DE L'IMAGE. Trois affiches de
   rapports différents feraient trois cartes de hauteurs différentes sur la
   même ligne — et c'est la ligne, pas la carte, qu'on regarde. 16:9, le
   format que l'écran de dépôt annonce (900 × 506) — sauf le trio, passé en
   carré le 13/10/2026 (voir « LE TRIO EN CARRÉ » juste après).

   `display: block` et non le flex des cartes de couleur : l'image n'est plus
   un fond en `position: absolute` derrière du texte, elle EST la carte. */
.bv-pub--affiche { display: block; padding: 0; min-height: 0;
    aspect-ratio: 16 / 9; background: var(--creme); }
.bv-pub--affiche::after { content: none; }
.bv-pub--affiche img { position: static; width: 100%; height: 100%;
    object-fit: cover; display: block; z-index: auto; }

/* ── LE TRIO EN CARRÉ — 13/10/2026 ───────────────────────────────────────
   Sa demande : « propose-moi quelque chose de mieux ici, tu peux agrandir les
   cards », puis, le soir même, « Carré ». Trois affiches 1:1 (900 × 900
   dans l'ERP) : 429 × 429 sur ordinateur, au lieu de bandeaux de 168 px.

   SUR TÉLÉPHONE, UNE RANGÉE QU'ON FAIT GLISSER, PAS UNE PILE : la suivante
   dépasse et dit qu'il y a une suite. À 86 %, la carte fait 294 px, assez
   pour que le plus petit texte de l'affiche (40 px sur 900) passe 12 px.
   PLAFONNÉE À 360 PX : sans plafond, une tablette de 860 px affichait une
   seule carte de 698 px, plus haute que l'écran (constat du vérificateur).

   La rangée déborde de la GOUTTIÈRE de la page (`--gouttiere`, celle de
   `.ak-large`) : la carte suivante sort par le bord de l'écran au lieu
   d'être coupée net 8 px avant. Seules les AFFICHES changent de format :
   les cartes de couleur du repli gardent leur bandeau de 168 px. */
.bv-pubs--trio .bv-pub--affiche { aspect-ratio: 1 / 1; }
@media (max-width: 860px) {
    .bv-pubs--trio { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86%, 360px);
        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: calc(var(--gouttiere) * -1); padding-inline: var(--gouttiere);
        scroll-padding-inline: var(--gouttiere); }
    .bv-pubs--trio::-webkit-scrollbar { display: none; }
    .bv-pubs--trio > * { scroll-snap-align: start; }
}
.bv-pub b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.bv-pub small { display: block; margin-top: 6px; max-width: 34ch; font-size: 12.5px;
    line-height: 1.5; color: rgba(255,255,255,.76); }
.bv-pub__geste { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--e4);
    font-size: 12.5px; font-weight: 700; }
.bv-pub__geste svg { transition: transform var(--t-vif) var(--e-sortie); }
.bv-pub:hover .bv-pub__geste svg { transform: translateX(4px); }

/* ═══ 40 · DEVENIR AMBASSADEUR ════════════════════════════════════════════

   Reconstruite le 27/08/2026 sur la logique de la maquette de référence, un
   premier jet ayant produit exactement le gabarit qu'on voit partout. Ce que
   la maquette fait, et que je ne faisais pas :

   1. AUCUN TITRE COLORÉ. Pas un mot en couleur dans ses six titres. J'en
      mettais un par section : le procédé s'annule dès la deuxième fois.

   2. AUCUNE BORDURE. Ses blocs sont des APLATS posés sur du blanc. Un
      rectangle cerné d'un trait gris est la signature du gabarit.

   3. LES MAQUETTES DÉBORDENT. Les téléphones sortent du panneau, les cartes
      sortent de la bande noire. C'est ce dépassement qui fait la profondeur —
      pas les ombres portées, que j'empilais à onze exemplaires.

   4. L'ACCENT VIT EN GRANDS APLATS. Un champ orange énorme, et le reste au
      repos. Je le distribuais en lavis pâles dans les coins, ce qui donne
      des taches sans donner de couleur.

   Deux règles qui en découlent et qui tiennent tout le fichier :
   — le fond de page reste le BLANC du site, les sections y posent des
     panneaux ; c'est l'inverse de cartes claires sur fond crème ;
   — les surfaces fixes (l'orange du héros, le noir du relevé) gardent leurs
     couleurs dans les deux thèmes, donc leurs couleurs de texte sont écrites
     en dur — les prendre aux jetons donnerait de l'encre claire sur orange
     dès qu'un visiteur est en thème sombre.

   ── SUR LES CONTRASTES ──
   L'encre PLEINE sur #F85000 donne 5,29:1, conforme jusqu'au corps de texte.
   Ce qui échoue, c'est l'opacité : à 78 % elle tombe à 4,0, et le blanc n'y
   donne que 3,42. La hiérarchie se fait donc à la graisse et à la taille,
   jamais à l'alpha, et jamais en blanc sur l'orange.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LE VOCABULAIRE ──
   Une seule échelle de titres pour toute la page, et des marges de section
   généreuses : c'est le blanc qui fait respirer la maquette, avant toute
   autre chose. */
/* L'ESPACE EST CE QUI FAIT RESPIRER LA MAQUETTE, avant toute autre chose.
   96 px fixes suffisaient sur un portable et serraient sur un grand écran :
   la marge suit maintenant la largeur, de 64 à 136 px. */
.amb-sec { padding-block: clamp(64px, 8.5vw, 136px); }

.amb-sec h2 {
    margin: 0 0 var(--e4);
    font-size: clamp(30px, 3.8vw, 48px); line-height: 1.02;
    letter-spacing: -.042em; text-wrap: balance;
}

.amb-btn {
    display: inline-flex; align-items: center; gap: var(--e2);
    height: 54px; padding-inline: var(--e6);
    border-radius: var(--r-pastille);
    background: #1A1512; color: #FFF;
    font-size: 14.5px; font-weight: 600; text-decoration: none;
    transition: transform var(--t-vif) var(--e-sortie), background var(--t-vif) var(--e-sortie);
}
.amb-btn:hover { background: #000; color: #FFF; transform: translateY(-2px); }
.amb-btn svg { transition: transform var(--t-vif) var(--e-sortie); }
.amb-btn:hover svg { transform: translateX(4px); }
/* Sur le noir, l'inverse : bouton clair, texte encre. */
.amb-btn--clair { background: #FFF; color: #1A1512; }
.amb-btn--clair:hover { background: var(--orange); color: #1A1512; }

/* ═══ 1 · LE HÉROS ════════════════════════════════════════════════════════
   Un panneau orange arrondi dans la largeur du site, et la capture qui en
   SORT par le bas. Le débordement est obtenu par une marge négative sur la
   colonne de droite : la ligne de grille se raccourcit d'autant, le panneau
   se referme dessus, et l'image le dépasse. La section réserve la place en
   bas pour que rien ne chevauche la suivante. */
.amb-heros { padding: var(--e5) 0 calc(var(--e9) + 24px); }
.amb-heros__pan {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    gap: var(--e6); align-items: end;
    padding: var(--e9) var(--e8) 0;
    border-radius: 32px;
    /* #D14400 — le jeton --orange-fonce de la marque — et non #F85000.
       Le blanc ne donne que 3,42:1 sur l'orange vif : le titre passerait au
       seuil des très grands textes, mais le paragraphe, les chiffres et le
       lien du bas échoueraient tous. Sur #D14400 il donne 4,63, conforme
       jusqu'au corps de texte. Les deux encres ne peuvent pas cohabiter sur
       un même aplat : c'est l'une OU l'autre, et c'est le blanc. */
    background: #D14400;
}
/* LE BOUTON DU HÉROS PASSE EN CLAIR.
   Un pavé noir sur #D14400 ne donne que 2,03:1 de contraste de SURFACE — en
   dessous des 3:1 qu'un élément d'interface doit atteindre pour être
   identifiable. Le bouton blanc en donne 4,63, et il sort mieux sur l'orange
   profond. C'est déjà la règle de la bande noire. */
.amb-heros .amb-btn {
    background: #FFF; color: #1A1512;
    /* Une ombre portée courte et très diluée : elle décolle le bouton de
       l'aplat sans se voir comme une ombre. Le décalage vertical vaut la
       moitié du flou — au-delà, elle se lit comme un objet qui flotte. */
    box-shadow: 0 6px 18px -6px rgba(70, 20, 0, .45);
}
.amb-heros .amb-btn:hover {
    background: #1A1512; color: #FFF;
    box-shadow: 0 10px 24px -8px rgba(70, 20, 0, .55);
}

/* LE GRAIN.
   Un aplat de cette taille en couleur saturée fait deux choses désagréables :
   il montre les paliers de dégradé du panneau sur les écrans 6 bits, et il a
   l'air d'un remplissage plutôt que d'une matière. Une trame de bruit à 4 %
   règle les deux — c'est le détail qu'on ne voit pas et qui se sent.

   La tuile fait 140 px et se répète : `feTurbulence` sur toute la surface
   coûterait cher à rastériser, et le résultat serait identique. */
.amb-heros__pan::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    border-radius: inherit; pointer-events: none;
    opacity: .045; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* L'ARRIÈRE-PLAN A SON PROPRE CADRE DE ROGNAGE.
   Le panneau, lui, doit rester ouvert pour laisser la capture le déborder par
   le bas : on ne peut donc pas y poser un `overflow: hidden`. Ce calque le
   fait à sa place, et hérite du rayon pour épouser les angles. */
.amb-fond {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden; border-radius: inherit; pointer-events: none;
}
.amb-fond svg { display: block; width: 100%; height: 100%; }

.amb-heros__mots, .amb-app { position: relative; z-index: 1; }
.amb-heros__mots { padding-bottom: var(--e9); color: #FFF; }

/* L'entrée est échelonnée, pas simultanée. Elle est en `@keyframes` et non
   en transition pilotée par un script : le héros est au-dessus de la ligne
   de flottaison, il n'a rien à attendre, et le faire dépendre de JavaScript
   c'est accepter qu'il reste vide si le script tombe. `both` retient les
   deux états, sans quoi chaque bloc clignoterait le temps de son délai. */
@keyframes amb-monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.amb-heros__mots > * { animation: amb-monte .8s var(--e-sortie) both; }
.amb-heros__mots > *:nth-child(1) { animation-delay: .05s; }
.amb-heros__mots > *:nth-child(2) { animation-delay: .15s; }
.amb-heros__mots > *:nth-child(3) { animation-delay: .25s; }
.amb-heros__mots > *:nth-child(4) { animation-delay: .35s; }
.amb-heros__mots > *:nth-child(5) { animation-delay: .45s; }

/* Titre entièrement noir : le mot accentué en couleur est le réflexe que la
   maquette n'a nulle part. `balance` évite le mot solitaire en fin de bloc. */
/* PAS DE PLAFOND EN `ch` ICI. J'en avais posé un à 13ch, plus étroit que
   « gagner de l'argent. » (19 signes) : la coupure tombait forcément au
   milieu de la locution, et `balance` ne peut rien rattraper d'un plafond
   trop serré. C'est la colonne de la grille qui donne la mesure, et
   `balance` égalise ce qui reste. */
.amb-heros h1 {
    margin: 0 0 var(--e5);
    font-size: clamp(40px, 5.2vw, 68px); line-height: .98; letter-spacing: -.048em;
    text-wrap: balance; color: #FFF;
}
.amb-heros__mots > p {
    margin: 0 0 var(--e6); max-width: 40ch;
    font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6; color: #FFF;
}
.amb-heros__pied { margin: var(--e6) 0 var(--e5) !important; font-size: 13px; font-weight: 500; }

/* Le soulignement se dessine au survol au lieu d'être là en permanence : un
   trait posé sous un lien secondaire l'alourdit, un trait qui vient à la
   rencontre du curseur le signale sans le crier. Il est en `box-shadow` et
   non en `border-bottom` — une bordure décalerait la ligne de base. */
.amb-descente {
    display: inline-flex; align-items: center; gap: 7px;
    padding-bottom: 3px;
    font-size: 13.5px; font-weight: 600; color: #FFF; text-decoration: none;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .45);
    transition: box-shadow var(--t-vif) var(--e-sortie);
}
.amb-descente:hover { color: #FFF; box-shadow: inset 0 -2px 0 #FFF; }
.amb-descente svg { transition: transform var(--t-vif) var(--e-sortie); }
.amb-descente:hover svg { transform: translateY(3px); }
/* L'ancre s'arrête SOUS l'en-tête, qui est collant et haut de 84 px. Mes
   32 px auraient posé le titre de section derrière la barre. */
#marche { scroll-margin-top: calc(var(--h-entete) + var(--e5)); }
.amb-heros__pied b { font-weight: 700; font-variant-numeric: tabular-nums; }
.amb-heros__pied i { font-style: normal; margin-inline: 6px; }

/* Le trait de la maquette : noir, épais, sûr de lui. Il se dessine tout seul.
   `pathLength="1"` renormalise les tracés, ce qui permet d'animer leur
   pointillé avec des 0 et des 1 sans connaître leur longueur en pixels. */
@keyframes amb-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* LA PLACE DU TRAIT EST LE COULOIR VIDE, PAS LA CAPTURE.
   À 47 % il partait du milieu du panneau et sa pointe retombait SUR l'écran
   des téléphones : un gribouillage par-dessus le produit qu'on est en train
   de montrer. Il recule à 34 % et rétrécit, pour tenir dans la bande d'orange
   qui sépare le bouton des maquettes. Il part de l'appel à l'action et
   désigne l'application — c'est tout ce qu'on lui demande. */
.amb-trait {
    position: absolute; z-index: 2; left: 34%; bottom: 31%;
    width: 158px; height: 71px; color: rgba(255, 255, 255, .62);
    pointer-events: none;
}
.amb-trait path { stroke-dasharray: 1; stroke-dashoffset: 1;
                  animation: amb-trace 1.1s var(--e-sortie) .6s both; }
.amb-trait path:last-child { animation-duration: .25s; animation-delay: 1.6s; }

/* ── LA CAPTURE QUI DÉBORDE ──
   Deux animations qui se suivent sur le même objet : l'entrée puis la
   flottaison. Elles ne peuvent pas cohabiter sur `transform` — la seconde
   écraserait la première. D'où l'entrée portée par le conteneur et la
   boucle par l'image. */
@keyframes amb-entre  { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes amb-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
.amb-app {
    position: relative; align-self: end; min-width: 0;
    margin-bottom: -72px;            /* c'est CE dépassement qui fait la profondeur */
    animation: amb-entre 1s var(--e-sortie) .3s both;
}
.amb-capture {
    display: block; width: 100%; height: auto;
    filter: drop-shadow(0 40px 60px rgba(26, 21, 18, .28));
    animation: amb-flotte 7s ease-in-out 1.3s infinite;
}

/* La notification arrive en dernier, et dépasse légèrement sa taille avant de
   retomber : c'est ce dépassement qui la fait ressembler à une notification
   qui tombe plutôt qu'à un bloc qui s'affiche. */
@keyframes amb-tombe {
      0% { opacity: 0; transform: translateY(-16px) scale(.9); }
     60% { opacity: 1; transform: translateY(3px)   scale(1.03); }
    100% { opacity: 1; transform: none; }
}
@keyframes amb-halo {
      0% { box-shadow: 0 0 0 0 rgba(248, 80, 0, .5); }
    70%, 100% { box-shadow: 0 0 0 13px rgba(248, 80, 0, 0); }
}
/* LA NOTIFICATION MORD LE BORD, ELLE NE COUVRE PAS L'ÉCRAN.
   À -18 % elle recouvrait la ligne « 1 article · En attente » de la capture.
   À -40 % elle sort dans l'orange et ne chevauche plus que la tranche du
   téléphone — ce qui est le geste voulu : une carte qui flotte AU-DESSUS de
   l'appareil, pas un cache posé dessus. */
.amb-notif {
    position: absolute; z-index: 3; left: -40%; bottom: 29%;
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e3) var(--e4) var(--e3) var(--e3);
    border-radius: var(--r-champ);
    background: #FFF; box-shadow: 0 20px 46px -22px rgba(26, 21, 18, .5);
    animation: amb-tombe .7s var(--e-sortie) 1.2s both;
}
.amb-notif__pt { position: relative; flex: 0 0 34px; width: 34px; height: 34px;
                 border-radius: 50%; background: #FFF1EA; }
.amb-notif__pt::after { content: ''; position: absolute; inset: 0; margin: auto;
                        width: 9px; height: 9px; border-radius: 50%; background: #F85000;
                        animation: amb-halo 2.8s ease-out 2.2s infinite; }
.amb-notif b { display: block; font-size: 15px; font-weight: 700; color: #BC3C00; letter-spacing: -.02em; }
.amb-notif span { display: block; font-size: 11.5px; color: #6B615B; white-space: nowrap; }

/* ═══ 2 · COMMENT ÇA MARCHE ═══════════════════════════════════════════════
   Plus de cartes. Le titre tient dans une colonne étroite à gauche, les
   trois temps se suivent à droite, séparés par des filets d'un cheveu.

   POURQUOI DES LIGNES ET NON TROIS COLONNES ÉGALES : une séquence se lit
   dans le sens de la lecture. Trois colonnes côte à côte demandent au regard
   de sauter, et donnent à trois moments successifs l'air d'être simultanés.
   C'est aussi la construction du bloc « Advantages » de la maquette.

   UN FILET N'EST PAS UNE BORDURE. Il sépare, il n'entoure pas : c'est ce qui
   le distingue du rectangle cerné qu'on trouve dans tous les gabarits. */
/* UN FILET COMMUN TIENT LES DEUX COLONNES.
   Au premier jet, le titre flottait à 230 px de la liste sans qu'aucun trait
   ne les relie : deux blocs posés côte à côte, pas une mise en page. Le filet
   du haut et celui du bas appartiennent maintenant au CONTENEUR — ils
   traversent toute la largeur, titre compris — et seules les séparations
   intérieures restent sur les lignes. La colonne se rapproche aussi (30 % →
   24 %) et l'écart tombe à 48 px : elle accompagne la liste au lieu de la
   regarder de loin. */
.amb-marche {
    display: grid; grid-template-columns: minmax(0, 27%) minmax(0, 1fr);
    gap: var(--e7);
    padding-block: var(--e6);
    border-block: 1px solid var(--trait);
}
/* LA COLONNE DE GAUCHE TIENT. Elle reste en place pendant que les trois
   temps défilent à côté — le titre accompagne la lecture au lieu de la
   quitter à la première ligne. `--topbar-h` n'existe pas ici : la marge haute
   se cale sur l'espace de section, ce qui suffit à dégager l'en-tête. */
/* La colonne de gauche tient en place pendant que les trois temps défilent
   à côté : le titre accompagne la lecture au lieu de la quitter à la première
   ligne. Le décalage se cale sur --h-entete, l'en-tête du site étant collant
   et haut de 84 px. */
.amb-marche__tete { position: sticky; top: calc(var(--h-entete) + var(--e5)); align-self: start; }
/* LE TITRE DE CETTE SECTION EST PLUS GRAND QUE LA RÈGLE COMMUNE.
   Il ouvre la seule colonne de la page qui ne contient que du texte : à
   48 px, il n'y tenait pas sa place et la colonne paraissait vide. 56 px lui
   font trois lignes courtes, ce qui remplit la mesure au lieu de la subir.
   La colonne s'élargit de trois points pour l'accueillir, et le bouton. */
.amb-marche__tete h2 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -.045em; }
.amb-marche__tete p { margin: 0; max-width: 30ch; font-size: 15px;
                      line-height: 1.6; color: var(--g1); }
.amb-marche__tete .amb-btn { margin-top: var(--e6); }
.amb-marche__liste { list-style: none; margin: 0; padding: 0; }

/* La troisième colonne est bornée : en `auto`, le jeton de preuve s'ancrait
   au bord droit et laissait un couloir vide de plusieurs centaines de pixels
   entre le texte et lui sur un grand écran. */
.amb-pas {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 190px);
    gap: var(--e5); align-items: start;
    padding: var(--e6) 0;
    border-top: 1px solid var(--trait);
}
/* Les filets extérieurs sont ceux du conteneur, et ils courent sur toute la
   largeur. Les redoubler ici donnerait un trait double aux deux bouts. */
.amb-pas:first-child { border-top: 0; padding-top: 0; }
.amb-pas:last-child  { padding-bottom: 0; }
/* Le jeton se cale sur la FIN du filet plutôt que sur le début de sa colonne :
   c'est ce qui donne un bord droit net au lieu d'une frange irrégulière, les
   trois pastilles n'ayant pas la même largeur. */
.amb-pas__vu { justify-self: end; text-align: right; padding-top: 2px; }

/* Le chiffre est posé nu, pas dans une pastille ronde colorée : c'est le
   motif le plus recopié des gabarits, et la maquette n'en a aucun. En chasse
   tabulaire pour que les trois s'alignent exactement. */
/* ALIGNEMENT OPTIQUE. Un chiffre posé sur la ligne de texte paraît rentré :
   sa hampe n'a pas de jambage et son œil est plus haut. Deux pixels de
   remontée le remettent d'aplomb avec le titre qu'il numérote. */
.amb-pas__n {
    margin-top: -2px;
    font-size: 30px; font-weight: 700; line-height: .9; letter-spacing: -.05em;
    color: var(--orange-lisible); font-variant-numeric: tabular-nums;
}
.amb-pas__q h3 { margin: 0 0 var(--e2); font-size: 20px; letter-spacing: -.03em; }
.amb-pas__q p  { margin: 0; max-width: 52ch; font-size: 14.5px; line-height: 1.62;
                 color: var(--encre-2); }

/* ── LA COLONNE DE DONNÉES ──
   Plus de pastilles. Une pastille grise est un composant d'interface : posée
   trois fois à l'identique dans du vide, elle ne prouve rien et n'indique
   aucune progression. Chaque étape porte maintenant sa valeur, ferrée sur la
   fin du filet — descripteur discret au-dessus, valeur en gros dessous.

   C'est aussi ce qui donne à la page sa TROISIÈME voix typographique : le
   titre, le texte courant, et les chiffres. Une page qui n'en a que deux
   paraît toujours plate. */
.amb-vu__q { display: block; margin-bottom: 3px;
             font-size: 12.5px; line-height: 1.35; color: var(--g1); }
.amb-vu__v { display: block;
             font-size: 22px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1;
             color: var(--encre); font-variant-numeric: tabular-nums; }
/* Le lien n'est pas un montant : il garde la chasse fixe et descend d'un cran
   — l'aligner sur la taille des chiffres lui donnerait une importance qu'il
   n'a pas, et le couperait sur un écran étroit. */
.amb-vu__v--code { font-family: ui-monospace, monospace; font-size: 16px; font-weight: 500;
                   letter-spacing: -.01em; color: var(--encre-2); }
.amb-vu__v--code b { font-weight: 700; color: var(--orange-lisible); }
/* #17803D tombe à 3,6:1 de nuit — le site a déjà un --vert qui s'éclaircit
   pour ça, on s'en sert plutôt que de refaire le même choix. */
.amb-vu__v--gain { color: var(--vert); }

/* ═══ 3 · LE RELEVÉ ═══════════════════════════════════════════════════════
   Le panneau noir de la maquette. Les cartes de gains en sortent par la
   droite : même geste que la capture du héros, et la seule raison pour
   laquelle ce bloc ne ressemble pas à une bannière. */
.amb-noir {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
    gap: var(--e8); align-items: center;
    padding: var(--e9) var(--e8);
    border-radius: 32px; background: #1A1512;
}
.amb-noir__mots h2 { margin: 0 0 var(--e4); max-width: 14ch;
                     font-size: clamp(28px, 3.4vw, 44px); line-height: 1.04;
                     letter-spacing: -.04em; color: #FFF; }
.amb-noir__mots p  { margin: 0 0 var(--e6); max-width: 40ch; font-size: 15.5px;
                     line-height: 1.62; color: rgba(255, 255, 255, .74); }

/* ── LE RELEVÉ DU MOIS ──
   Une seule carte. Les deux bandeaux de résumé qui la surmontaient sont
   partis : ils répétaient en gros les montants que la courbe porte déjà, et
   leur format très large les faisait ressembler à des barres de chargement.

   Surface fixe : blanche dans les deux thèmes, couleurs écrites en dur. */
.amb-pile { position: relative; }

.amb-pile__c {
    position: relative; z-index: 2;
    padding: var(--e6); border-radius: 20px;
    background: #FFF; color: #1A1512;
    box-shadow: 0 34px 74px -32px rgba(0, 0, 0, .9);
}
.amb-pile__tete {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4);
    font-size: 12px; color: #7A736E;
}
.amb-pile__tete span:first-child { font-weight: 700; letter-spacing: .07em;
                                   text-transform: uppercase; color: #1A1512; }
.amb-pile__tot {
    margin: var(--e3) 0 0;
    font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; line-height: 1;
    letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.amb-pile__tot span { font-size: .52em; font-weight: 600; color: #6B615B; }

/* ── LA COURBE CHIFFRÉE ──
   Le tracé occupe un repère de 240 × 96 étiré à la largeur disponible, et
   chaque point est posé au pourcentage exact de sa coordonnée. Les deux
   systèmes se correspondent donc à toute largeur — et ils ne peuvent plus
   diverger, puisque PHP calcule les points du tracé À PARTIR des mêmes
   pourcentages que les pastilles.

   LES DEUX REPÈRES ONT LA MÊME HAUTEUR. Le conteneur faisait 112 px et le SVG
   96 : les pastilles, placées en pourcentage du conteneur, tombaient 13 px
   sous le tracé, placé en pourcentage du repère. Une seule hauteur, et le SVG
   la remplit — sinon les deux systèmes de coordonnées ne parlent pas de la
   même chose.

   168 px, et non 96 : six points au lieu de trois, et chaque montant posé
   au-dessus du sien. À 96 px, le plus haut serait sorti par le haut. */
.amb-courbe { position: relative; height: 168px; margin: var(--e6) 0 var(--e8); color: #F85000; }
.amb-courbe svg { display: block; width: 100%; height: 100%; }

/* LES PASTILLES SONT EN HTML, PAS DANS LE SVG. `preserveAspectRatio="none"`
   étire le repère à la largeur disponible : un `<circle>` y deviendrait une
   ellipse. Elles sont centrées sur leur point par une MARGE négative et non
   par `transform` — le placement doit survivre à l'animation d'entrée, qui,
   elle, ne touche qu'à l'opacité. */
.amb-pt {
    --x: 0%; --y: 0%;                /* réécrits en ligne, un couple par point */
    position: absolute; left: var(--x); top: var(--y);
    width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
    border-radius: 50%; background: #FFF; box-shadow: 0 0 0 2.5px #F85000;
}
.amb-pt.est-vif { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
                  background: #F85000; box-shadow: 0 0 0 3px #FFF, 0 0 0 5.5px #F85000; }
.amb-pt b {
    position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%);
    font-size: 11.5px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap;
    color: #6B615B; font-variant-numeric: tabular-nums;
}
.amb-pt.est-vif b { font-size: 13px; bottom: 15px; color: #1A1512; }
/* Les deux extrêmes rentrent vers l'intérieur : centrés, ils sortiraient de
   la carte. */
.amb-pt:first-of-type b { left: -4px; transform: none; }
.amb-pt:last-of-type  b { left: auto; right: -5px; transform: none; }

/* LES MOIS SONT SUR LEUR PROPRE LIGNE DE BASE, mais au MÊME `--x` que leur
   point. Un `space-between` sur six libellés les aurait répartis à intervalle
   régulier — ce qui n'est pas la même chose que sous les points : seuls les
   deux extrêmes auraient coïncidé. */
.amb-mois {
    --x: 0%;
    position: absolute; left: var(--x); top: 100%; transform: translateX(-50%);
    margin-top: 12px; font-size: 11px; color: #7A736E; white-space: nowrap;
}
.amb-mois:first-of-type { left: 0; transform: none; }
.amb-mois:last-of-type  { left: auto; right: 0; transform: none; }

.amb-pile__delta { display: block; margin-top: var(--e4);
                   font-style: normal; font-size: 13px; font-weight: 700; color: #17803D; }

/* La courbe et ses points paraissent quand la section entre.

   PLUS DE TRACÉ AU POINTILLÉ ICI. Il exigeait `pathLength` pour se normaliser,
   or `pathLength` et `non-scaling-stroke` se contredisent sous un repère
   étiré : le trait s'arrêtait avant son dernier point. Un fondu fait le même
   service sans rien casser.

   L'entrée ne touche QU'À L'OPACITÉ : `amb-monte` anime aussi `transform`, et
   l'employer ici écraserait le centrage des pastilles et le décalage des deux
   montants extrêmes — ils sauteraient à l'atterrissage. */
@keyframes amb-parait { from { opacity: 0; } to { opacity: 1; } }
.ak-js .amb-pile .amb-courbe svg { opacity: 0; }
.ak-js .amb-pile.est-vu .amb-courbe svg { animation: amb-parait .7s var(--e-sortie) .1s both; }
.ak-js .amb-pile .amb-pt { opacity: 0; }
.ak-js .amb-pile.est-vu .amb-pt { animation: amb-parait .45s var(--e-sortie) both; }
.ak-js .amb-pile.est-vu .amb-pt:nth-of-type(1) { animation-delay: .4s; }
.ak-js .amb-pile.est-vu .amb-pt:nth-of-type(2) { animation-delay: .65s; }
.ak-js .amb-pile.est-vu .amb-pt:nth-of-type(3) { animation-delay: .9s; }

/* LA SÉLECTION PREND LA COULEUR DE LA MARQUE. Détail minuscule, mais c'est
   ce qui distingue une page tenue d'une page livrée. Sur l'aplat elle
   s'inverse — du blanc surligné en encre — puisque le texte y est blanc.
   Cette règle avait disparu avec le simulateur, dont elle suivait le bloc. */
.amb-sec ::selection   { background: var(--orange); color: #1A1512; }
.amb-heros ::selection { background: #FFF; color: #1A1512; }

/* ── ADAPTATIONS ──
   Deux ruptures. À 1024 px les paires côte à côte se rangent l'une sous
   l'autre ; à 640 px tout passe en colonne unique. Ce qui n'a plus la place
   de déborder sort, plutôt que de créer un défilement latéral. */
@media (max-width: 1024px) {
    .amb-heros__pan {
        grid-template-columns: 1fr; gap: 0;
        padding: var(--e8) var(--e6) 0; border-radius: 26px;
    }
    .amb-heros__mots { padding-bottom: var(--e7); }
    .amb-heros h1 { max-width: none; }
    .amb-trait { display: none; }
    .amb-app { max-width: 520px; margin-inline: auto; margin-bottom: -56px; }
    .amb-notif { left: 0; bottom: 22%; }

    /* Empilée, la colonne de titre n'a plus rien à accompagner : collée, elle
       resterait plaquée en haut pendant tout le défilement. Et le filet du
       haut, qui la séparait de la liste quand elles étaient côte à côte, la
       couperait maintenant de son propre titre : il passe sur la liste. */
    .amb-marche { grid-template-columns: 1fr; gap: var(--e6); padding-block: 0; border-block: 0; }
    .amb-marche__tete { position: static; }
    .amb-marche__liste { padding-block: var(--e5); border-block: 1px solid var(--trait); }
    .amb-noir   { grid-template-columns: 1fr; padding: var(--e8) var(--e6); }
}
@media (max-width: 640px) {
    .amb-sec { padding-block: var(--e8); }
    .amb-heros { padding-bottom: var(--e8); }
    .amb-heros__pan { padding: var(--e7) var(--e5) 0; }
    /* La carte n'a plus de marge où déborder : elle repasse dans le flux,
       au-dessus de la capture, et sa légende cesse d'être insécable. */
    .amb-notif { position: static; width: max-content; max-width: 100%; margin: 0 0 var(--e5); }
    .amb-notif span { white-space: normal; }

    /* Le chiffre passe au-dessus du texte : trois colonnes dans 320 px
       réduiraient le libellé à un mot par ligne. */
    /* Le chiffre passe au-dessus du texte : trois colonnes dans 320 px
       réduiraient le libellé à un mot par ligne. Et le jeton reprend le bord
       gauche — ferré à droite, seul sous son paragraphe, il paraîtrait
       détaché de l'étape qu'il illustre. */
    .amb-pas { grid-template-columns: 1fr; gap: var(--e3); }
    .amb-pas__vu { justify-self: start; text-align: left; }
    .amb-descente { font-size: 13px; }
    .amb-pas__vu { padding-top: var(--e2); }
}

/* Rien de tout cela n'est négociable pour la lecture : mouvement coupé,
   chaque élément reprend sa place et son opacité pleine, et les tracés
   apparaissent d'un coup, entiers. */
@media (prefers-reduced-motion: reduce) {
    .amb-heros__mots > *, .amb-app, .amb-capture, .amb-notif, .amb-notif__pt::after {
        animation: none; opacity: 1; transform: none;
    }
    .amb-trait path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
    /* Le tracé et ses points doivent être là, entiers : sans animation, un
       `opacity: 0` initial resterait à zéro pour toujours. */
    .ak-js .amb-pile .amb-courbe svg,
    .ak-js .amb-pile.est-vu .amb-courbe svg,
    .ak-js .amb-pile .amb-pt,
    .ak-js .amb-pile.est-vu .amb-pt { opacity: 1; animation: none; }
    .amb-btn, .amb-btn svg, .amb-descente, .amb-descente svg { transition: none; }
    .amb-btn:hover { transform: none; }
    .amb-descente:hover svg { transform: none; }
}

/* ═══ 41 · LA CANDIDATURE AMBASSADEUR ══════════════════════════════════════
   Une colonne, centrée, sur du blanc.

   ── CE QUE LA PREMIÈRE VERSION FAISAIT DE TROP ─────────────────────────
   Elle posait le formulaire à côté d'un panneau orange qui reprenait trois
   arguments de la page précédente. Or on n'arrive ici qu'en ayant cliqué :
   ces arguments sont déjà acceptés, et les répéter pendant qu'on saisit son
   numéro n'ajoute rien — sinon du bruit. Un formulaire de candidature n'a
   pas à vendre. La seule chose élégante à faire, à ce stade, est de
   s'effacer et de laisser remplir.

   ── D'OÙ VIENT LE CARACTÈRE, PUISQU'IL NE VIENT PLUS DE LA COULEUR ─────
   De l'espace et de la mesure. La colonne est étroite (520 px), les marges
   larges, l'échelle typographique franche entre le titre et les intitulés.
   Un seul accent coloré sur la page : l'anneau de mise au point d'un champ.
   ═══════════════════════════════════════════════════════════════════════ */
.cnd { padding-block: clamp(40px, 6vw, 88px) clamp(64px, 9vw, 136px); }
/* 520 px, soit un peu moins que la mesure de lecture : un formulaire n'est
   pas un texte, et des champs plus larges paraissent toujours vides. */
.cnd__in { width: 100%; max-width: 520px; margin-inline: auto; padding-inline: var(--gouttiere); }

.cnd__retour {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: var(--e7);
    font-size: 13.5px; font-weight: 600; color: var(--g1); text-decoration: none;
    transition: color var(--t-vif) var(--e-sortie);
}
.cnd__retour:hover { color: var(--encre); }
.cnd__retour svg { transition: transform var(--t-vif) var(--e-sortie); }
.cnd__retour:hover svg { transform: translateX(-3px); }

.cnd h1 {
    margin: 0 0 var(--e2);
    font-size: clamp(30px, 4vw, 44px); line-height: 1.02;
    letter-spacing: -.045em; text-wrap: balance;
}
.cnd__sous { margin: 0 0 var(--e8); font-size: 16px; line-height: 1.55; color: var(--g1); }

/* ── LES CHAMPS ──
   Plus d'air entre eux qu'ailleurs sur le site : c'est ce qui sépare un
   formulaire d'un questionnaire. Les intitulés descendent d'un cran et
   passent au gris — le champ vide est déjà le signal, l'intitulé n'a pas à
   crier par-dessus. */
.cnd .ak-champ { margin-bottom: var(--e6); }
.cnd .ak-champ > label { margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--g1); }
.cnd .ak-champ input, .cnd .ak-champ select { padding-block: 14px; }
.cnd .ak-champ input:focus, .cnd .ak-champ select:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 16%, transparent);
}
.cnd__paire { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); }

/* Les listes déroulantes reprennent l'habillage des champs texte : sans cela,
   elles arrivent au style natif du système et jurent au milieu du reste. La
   flèche est dessinée, `appearance: none` retirant aussi celle du navigateur. */
.ak-champ select {
    width: 100%; padding: var(--e4); padding-right: 42px;
    border: 1.5px solid var(--trait); border-radius: var(--r-champ);
    background-color: var(--blanc); font-family: inherit; font-size: 16px;
    color: var(--encre); outline: none; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B615B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right var(--e4) center;
    transition: border-color var(--t-vif) var(--e-sortie), box-shadow var(--t-vif) var(--e-sortie);
}

/* LE PIÈGE À ROBOTS.
   `position: absolute` hors écran plutôt que `display: none` : certains
   robots ignorent les champs masqués mais remplissent ceux qui sont
   simplement déplacés. Le HTML porte `aria-hidden` et `tabindex="-1"` — le
   cacher à l'œil seulement piégerait les aveugles avec les robots. */
.cnd__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Le repli est séparé du reste par un filet : ce qui est au-dessus est
   demandé, ce qui est en dessous est offert. */
.cnd__plus { margin: 0 0 var(--e7); padding-top: var(--e5); border-top: 1px solid var(--trait); }
.cnd__plus summary {
    cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--encre-2);
    list-style-position: inside;
}
.cnd__plus summary:hover { color: var(--encre); }
.cnd__plus[open] summary { margin-bottom: var(--e5); }

.cnd__btn {
    display: inline-flex; align-items: center; gap: var(--e2);
    height: 54px; padding-inline: var(--e7); border: 0;
    border-radius: var(--r-pastille);
    background: #1A1512; color: #FFF; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 600; text-decoration: none;
    transition: transform var(--t-vif) var(--e-sortie), background var(--t-vif) var(--e-sortie);
}
.cnd__btn:hover { background: #000; color: #FFF; transform: translateY(-2px); }
.cnd__btn svg { transition: transform var(--t-vif) var(--e-sortie); }
.cnd__btn:hover svg { transform: translateX(4px); }

.cnd__legal { margin: var(--e5) 0 0; font-size: 12.5px; line-height: 1.5; color: var(--g2); }

/* ── L'ÉCRAN DE RÉUSSITE ──
   Le titre, une ligne, un bouton. La version précédente numérotait trois
   étapes ; c'était trois lignes pour dire ce que celle-ci dit en une, sur une
   page qu'on regarde trois secondes. */
.cnd--merci { padding-block: clamp(72px, 11vw, 160px); }
.cnd__coche {
    display: inline-grid; place-items: center; width: 52px; height: 52px;
    margin-bottom: var(--e6); border-radius: 50%;
    background: var(--vert-doux); color: var(--vert);
}
.cnd--merci .cnd__sous { margin-bottom: var(--e7); }
.cnd__sorties { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; }

@media (max-width: 560px) {
    .cnd__paire { grid-template-columns: 1fr; gap: 0; }
    .cnd__btn { width: 100%; justify-content: center; padding-inline: var(--e5); }
}
@media (prefers-reduced-motion: reduce) {
    .cnd__btn, .cnd__btn svg, .cnd__retour, .cnd__retour svg, .ak-champ select { transition: none; }
    .cnd__btn:hover, .cnd__btn:hover svg, .cnd__retour:hover svg { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA TÊTE DE LA BOUTIQUE — 12/09/2026.

   Trois sections remplacent l'ancienne entrée, l'ancien bandeau « bonnes
   affaires » et l'ancienne grille de rayons :

     1 · une BANNIÈRE, dont l'image vient des réglages de l'ERP ;
     2 · un VISUEL CARRÉ + un bloc « Offres du jour » à compte à rebours ;
     3 · les RAYONS, en rangée qui défile.

   ── CE QU'IL A TRANCHÉ, DANS L'ORDRE ──

   · Sa référence pose des vignettes de 90 px : une photo, un prix. Sa consigne
     du même jour dit l'inverse — « les titres, les premium, les couleurs, les
     amoled, les garanties ». Ce sont donc les CARTES COMPLÈTES du site
     (`.ak-produit`), et elles demandent bien plus de place.
   · Deux blocs côte à côte n'en montraient alors que deux chacun : « retire À
     découvrir, on garde uniquement Offres du jour avec le chrono ».
   · « L'arrière-plan principal est blanc » : les panneaux crème disparaissent,
     ce qui ressort sont les cadres crème des photos — comme sur sa référence.
   · « On va garder uniquement 5 produits sur la ligne afin que l'image soit en
     dimension 1:1. » C'est CE NOMBRE qui commande toute la géométrie ci-dessous.

   ── LA GÉOMÉTRIE, ET POURQUOI CES CHIFFRES-LÀ ──

   Le contenu fait 1 320 px. Le visuel est un CARRÉ, donc sa largeur est aussi
   sa hauteur ; pour qu'il finisse à la même ligne que les cartes, il faut que
   cette hauteur soit celle d'une carte — sa photo carrée plus ses 175 px de
   texte (rang, nom, traits, garantie, prix).

     visuel = carte + texte    et    5 cartes + 4 gouttières = 1320 − visuel − 24

   Et le visuel doit couvrir TOUT le bloc, entête compris — c'est ce que montre
   sa référence, où l'image commence au niveau du titre et finit au niveau des
   prix. La contrainte s'écrit donc, avec les valeurs MESURÉES sur la page :

     visuel = entête (37,4) + gouttière (16) + photo + texte de carte (68,3)
     — le texte, c'est 12 + nom sur deux lignes (35,1) + 4 + prix (23,3) ;
       inverser le nom et le prix échange deux marges et ne change pas la somme
     5 photos + 4 gouttières de 16 = 1320 − visuel − 24

   Une seule solution : **visuel 295 px, photos 187**. L'entête a fondu quand le
   compteur est parti se poser sur l'image : il ne reste que le titre. Ces nombres ne sont pas
   choisis, ils se déduisent — et il faut les refaire dès que l'entête ou la
   carte changent de hauteur. C'est pourquoi la hauteur du nom est réservée
   juste au-dessus : sinon un seul nom trop long les fausse.

   Préfixe `bq-`, et il EST la portée : un nom générique repeindrait la boutique
   entière, on l'a déjà payé une fois.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LA BANNIÈRE ────────────────────────────────────────────────────
   Un RATIO, jamais une hauteur fixe : c'est la hauteur fixe du thème
   d'origine qui rognait les bannières tantôt sur les côtés, tantôt en haut. */
/* LE RATIO EST CELUI DE SON IMAGE, 1600 × 568, et pas un 3:1 arrondi : à
   deux pour cent près, le cadrage automatique aurait mangé une bande en haut
   et en bas — assez pour raboter le haut des lettres du titre. Un cadre taillé
   sur l'image ne rogne rien du tout. */
.bq-banniere { border-radius: var(--r-carte); overflow: hidden;
    aspect-ratio: 1600 / 568; background: var(--trait); }
.bq-banniere img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══════════════════════════════════════════════════════════════════════
   LA BANNIÈRE DE L'APPLICATION — 06/10/2026
   ═══════════════════════════════════════════════════════════════════════
   Remplace l'image de lancement en haut de /boutique (balisage :
   partiels/bq-appli). Même cadre que l'image qu'elle remplace — ratio
   1 600 × 568, `--r-carte` — pour que rien ne bouge en dessous.

   Les mesures sont en `cqw`, centièmes de la largeur du CADRE : la bannière
   garde ses proportions de 1 320 px jusqu'à la tablette ; sous 640 px de
   cadre, elle prend la mise en page du téléphone.

   Le fond est sombre dans les deux thèmes, et c'est voulu : la main du
   détourage est éclairée d'un violet froid, réglé pour un fond nuit. Sur le
   crème, elle paraissait collée. */
.bq-appli-hote { container-type: inline-size; }
.bq-appli {
    --e-pose: cubic-bezier(.2, .8, .2, 1);
    --e-ressort: cubic-bezier(.34, 1.56, .64, 1);
    position: relative; isolation: isolate; overflow: hidden;
    aspect-ratio: 1600 / 568; border-radius: var(--r-carte);
    display: grid; grid-template-columns: 52% 48%;
    background: #0D0A09; color: #fff;
}
.bq-appli *, .bq-appli *::before, .bq-appli *::after { box-sizing: border-box; }

/* Le fond : deux lueurs (l'orange de la marque, le violet de la photo) et
   une trame effacée vers les bords. La lueur orange respire, très lentement. */
.bq-appli__fond { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(28% 60% at 88% 26%, rgba(98, 84, 150, .40), transparent 70%); }
.bq-appli__fond::before { content: ''; position: absolute; inset: 0;
    background: radial-gradient(36% 70% at 76% 60%, rgba(248, 80, 0, .38), transparent 70%);
    animation: bq-appli-souffle 9s ease-in-out infinite alternate; }
.bq-appli__fond::after { content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(55% 80% at 72% 50%, #000, transparent 75%);
            mask-image: radial-gradient(55% 80% at 72% 50%, #000, transparent 75%); }
@keyframes bq-appli-souffle { from { opacity: .75; } to { opacity: 1; } }

/* ── Le texte ── */
.bq-appli__texte { align-self: center; position: relative; z-index: 2; padding: 0 2cqw 0 6.2cqw; }
.bq-appli__sur { margin: 0 0 1.5cqw; color: #FF8A3D;
    font-size: clamp(11px, .98cqw, 13px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bq-appli__titre { margin: 0; color: #fff; font-size: clamp(30px, 4.4cqw, 60px); font-weight: 800;
    line-height: 1.03; letter-spacing: -.035em; }
/* Chaque ligne a sa fenêtre : à l'entrée, le texte monte DEDANS au lieu de
   flotter dans le vide. Le petit débord bas garde les jambages (ç, p). */
.bq-appli__l { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.bq-appli__l > span { display: block; }
.bq-appli__titre em { font-style: normal; color: var(--orange);
    background: linear-gradient(92deg, #FF8A3D, #F85000 60%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bq-appli__mot { margin: 1.5cqw 0 2.4cqw; max-width: 30em; color: rgba(255,255,255,.66);
    font-size: clamp(14px, 1.3cqw, 18px); line-height: 1.5; }
.bq-appli__magasins { display: flex; flex-wrap: wrap; gap: .9cqw; }
.bq-appli__store {
    display: inline-flex; align-items: center; gap: .65em;
    padding: .62em 1.2em .62em .9em; border-radius: 12px;
    background: #000; color: #fff; text-decoration: none;
    border: 1px solid rgba(255,255,255,.2);
    font-size: clamp(12px, 1.06cqw, 15px);
    transition: transform .25s var(--e-pose), box-shadow .25s var(--e-pose), border-color .25s;
}
a.bq-appli__store:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.34);
    box-shadow: 0 14px 28px -12px rgba(248, 80, 0, .55); }
a.bq-appli__store:active { transform: translateY(0) scale(.98); }
.bq-appli__store--attente { opacity: .55; }
.bq-appli__store svg { width: 1.7em; height: 1.7em; flex: none; }
.bq-appli__store > span { display: grid; line-height: 1.05; }
.bq-appli__store small { font-size: .66em; opacity: .8; }
.bq-appli__store b { font-size: 1.12em; letter-spacing: -.01em; }

/* ── Le visuel ── */
.bq-appli__visuel { position: relative; z-index: 1;
    transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px), 0);
    transition: transform .7s var(--e-pose); }
.bq-appli__main { position: absolute; right: 18%; bottom: -36%; height: 130%; aspect-ratio: 668 / 996; }
.bq-appli__main > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,.5)); }

/* ── L'écran vivant ── posé sur l'écran vide de la photo (x 194–537,
   y 32–774 sur 668 × 996). Sa largeur vaut 100cqw de son propre cadre :
   tout ce qu'il contient grandit avec lui. */
.bq-ecran { position: absolute; left: 29.04%; top: 3.21%; width: 51.5%; height: 74.6%;
    border-radius: 11.5% / 5.3%; overflow: hidden; container-type: inline-size;
    background: #F6F3F0; color: #1A1514; }
.bq-ecran__ile { position: absolute; z-index: 5; left: 34.6%; width: 30.8%; top: 3.1cqw; height: 8.6cqw;
    border-radius: 99px; background: #050505; }
.bq-ecran__haut { padding: 4cqw 6cqw 12cqw; text-align: center; color: #fff;
    background: linear-gradient(160deg, #FF6A1A, #F85000 55%, #E04600); }
.bq-ecran__haut, .bq-ecran__corps { transition: opacity .22s ease; }
.bq-ecran--reprise .bq-ecran__haut, .bq-ecran--reprise .bq-ecran__corps { opacity: .25; }
.bq-ecran__barre { display: flex; justify-content: space-between; align-items: center; height: 10cqw; padding: 0 3cqw; font-size: 4.6cqw; }
.bq-ecran__barre span { display: flex; gap: 1cqw; align-items: flex-end; }
.bq-ecran__barre i { width: 1.2cqw; background: #fff; border-radius: 1px; }
.bq-ecran__barre i:nth-child(1) { height: 1.8cqw; }
.bq-ecran__barre i:nth-child(2) { height: 2.6cqw; }
.bq-ecran__barre i:nth-child(3) { height: 3.4cqw; }
.bq-ecran__barre em { width: 6cqw; height: 3cqw; margin-left: 1.2cqw; border: .5cqw solid #fff; border-radius: 1cqw;
    background: linear-gradient(90deg, #fff 70%, transparent 70%); }
.bq-ecran__nav { display: flex; align-items: center; gap: 2.4cqw; margin: 2.5cqw 0 3cqw; font-size: 5cqw; font-weight: 700; }
.bq-ecran__nav span { font-size: 7cqw; line-height: 1; opacity: .9; }
.bq-ecran__anneau { position: relative; width: 44cqw; aspect-ratio: 1; margin: 0 auto; }
.bq-ecran__anneau svg { width: 100%; height: 100%; rotate: -90deg; }
.bq-ecran__anneau circle { fill: none; stroke-width: 7; }
.bq-ecran__piste { stroke: rgba(255,255,255,.22); }
.bq-ecran__trait { stroke: #fff; stroke-linecap: round; stroke-dasharray: 251.3; stroke-dashoffset: 41.9;
    transition: stroke-dashoffset 1.1s var(--e-pose); }
.bq-ecran__anneau > div { position: absolute; inset: 0; display: grid; place-content: center; line-height: 1.05; }
.bq-ecran__anneau b { font-size: 10cqw; font-weight: 800; letter-spacing: -.03em; }
.bq-ecran__anneau small { font-size: 3.8cqw; opacity: .85; }
.bq-ecran__statut { display: inline-flex; align-items: center; gap: 1.6cqw; margin: 3.4cqw 0 0; padding: 1.4cqw 3.6cqw;
    border-radius: 99px; background: rgba(255,255,255,.2); font-size: 4.3cqw; font-weight: 700; }
.bq-ecran__statut i { width: 2cqw; height: 2cqw; border-radius: 50%; background: #fff; }
.bq-ecran__puces { display: flex; justify-content: center; gap: 1.8cqw; margin: 2.6cqw 0 0; }
.bq-ecran__puces span { padding: .9cqw 3cqw; border-radius: 99px; background: rgba(255,255,255,.16); font-size: 3.7cqw; font-weight: 600; }
.bq-ecran__corps { min-height: 120cqw; margin-top: -7cqw; padding: 6cqw 7cqw; border-radius: 7cqw 7cqw 0 0; background: #fff; }
.bq-ecran__titre { display: block; margin-bottom: 3.4cqw; font-size: 5.2cqw; }
.bq-ecran__frise { list-style: none; margin: 0; padding: 0; }
.bq-ecran__frise li { position: relative; display: flex; align-items: center; gap: 3.6cqw; height: 10.4cqw;
    font-size: 4.6cqw; font-weight: 600; color: #B4ACA7; transition: color .5s; }
.bq-ecran__frise li::before { content: ''; position: absolute; left: 2.3cqw; top: 7.6cqw; width: .7cqw; height: 5.6cqw;
    border-radius: 1cqw; background: #EDE8E4; transition: background .5s; }
.bq-ecran__frise li:last-child::before { display: none; }
.bq-ecran__frise i { position: relative; flex: none; width: 5.3cqw; height: 5.3cqw; border-radius: 50%;
    border: .7cqw solid #E2DCD7; background: #fff; transition: background .5s var(--e-pose), border-color .5s var(--e-pose); }
.bq-ecran__frise li.fait { color: #1A1514; }
.bq-ecran__frise li.fait::before { background: var(--orange); }
.bq-ecran__frise li.fait i { background: var(--orange); border-color: var(--orange); }
.bq-ecran__frise li.fait i::after { content: ''; position: absolute; left: 30%; top: 16%; width: 26%; height: 48%;
    border: solid #fff; border-width: 0 .7cqw .7cqw 0; rotate: 45deg; }
.bq-ecran__frise li.encours { color: var(--orange); font-weight: 800; }
.bq-ecran__frise li.encours i { border-color: var(--orange); animation: bq-ecran-pouls 1.6s ease-out infinite; }
.bq-ecran__frise li.encours i::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: var(--orange); }
@keyframes bq-ecran-pouls { 0% { box-shadow: 0 0 0 0 rgba(248,80,0,.5); } 70%, 100% { box-shadow: 0 0 0 2.6cqw rgba(248,80,0,0); } }
.bq-ecran__notif { position: absolute; z-index: 6; left: 3.5cqw; right: 3.5cqw; top: 3cqw;
    display: flex; align-items: center; gap: 3cqw; padding: 3.4cqw; border-radius: 6.5cqw;
    background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 4cqw 10cqw -3cqw rgba(0,0,0,.35);
    transform: translateY(-130%); opacity: 0; transition: transform .7s var(--e-ressort), opacity .3s; }
.bq-ecran__notif.est-la { transform: none; opacity: 1; }
.bq-ecran__notif img { flex: none; width: 10cqw; height: 10cqw; padding: 1.2cqw; border-radius: 2.6cqw; background: var(--orange); }
.bq-ecran__notif div { display: grid; line-height: 1.2; text-align: left; }
.bq-ecran__notif small { font-size: 3cqw; letter-spacing: .03em; color: #8a817c; }
.bq-ecran__notif b { font-size: 4.3cqw; }
.bq-ecran__notif span { font-size: 3.7cqw; color: #4a423e; }

/* ── LA TABLETTE (cadre de 641 à 900 px) ── l'image en 2,8:1 n'y laissait
   que 250 px de haut : on rend de la hauteur au texte. */
@container (max-width: 900px) {
    .bq-appli { aspect-ratio: 16 / 8; grid-template-columns: 58% 42%; }
    .bq-appli__main { right: 4%; }
}

/* ── LE TÉLÉPHONE (cadre ≤ 640 px) ── le texte en haut ; le téléphone sort
   par la droite et le bas, sous le titre. Le paragraphe et les badges
   s'arrêtent avant lui. */
@container (max-width: 640px) {
    .bq-appli { aspect-ratio: auto; min-height: 430px; grid-template-columns: 100%; }
    .bq-appli__texte { align-self: start; padding: 26px 20px 28px; }
    .bq-appli__sur { margin-bottom: 12px; font-size: 10.5px; }
    .bq-appli__titre { font-size: clamp(26px, 7.6cqw, 32px); }
    .bq-appli__mot, .bq-appli__magasins { max-width: 60%; }
    .bq-appli__mot { margin: 12px 0 18px; font-size: 13.5px; }
    .bq-appli__magasins { flex-direction: column; align-items: flex-start; gap: 8px; }
    .bq-appli__store { font-size: 12px; }
    .bq-appli__visuel { position: absolute; inset: 0; }
    .bq-appli__main { right: -130px; bottom: -110px; height: 470px; }
}

/* ── L'ENTRÉE ── les états d'attente ne sont posés que par le script
   (`anime`) : sans lui, rien n'est caché. */
.bq-appli.anime .bq-appli__sur, .bq-appli.anime .bq-appli__mot, .bq-appli.anime .bq-appli__magasins > * {
    opacity: 0; transform: translateY(14px); }
.bq-appli.anime .bq-appli__l > span { transform: translateY(108%); }
.bq-appli.anime .bq-appli__main { opacity: 0; translate: 0 48px; }
.bq-appli.est-entre .bq-appli__sur, .bq-appli.est-entre .bq-appli__mot, .bq-appli.est-entre .bq-appli__magasins > * {
    opacity: 1; transform: none; transition: opacity .7s var(--e-pose), transform .9s var(--e-pose); }
.bq-appli.est-entre .bq-appli__l > span { transform: none; transition: transform 1s var(--e-pose); }
.bq-appli.est-entre .bq-appli__sur { transition-delay: .05s; }
.bq-appli.est-entre .bq-appli__l:nth-child(1) > span { transition-delay: .12s; }
.bq-appli.est-entre .bq-appli__l:nth-child(2) > span { transition-delay: .22s; }
.bq-appli.est-entre .bq-appli__mot { transition-delay: .38s; }
.bq-appli.est-entre .bq-appli__magasins > :nth-child(1) { transition-delay: .48s; }
.bq-appli.est-entre .bq-appli__magasins > :nth-child(2) { transition-delay: .56s; }
.bq-appli.est-entre .bq-appli__main { opacity: 1; translate: 0 0;
    transition: opacity .9s var(--e-pose) .15s, translate 1.2s var(--e-pose) .15s; }

@media (prefers-reduced-motion: reduce) {
    .bq-appli *, .bq-appli *::before, .bq-appli *::after { animation: none !important; transition: none !important; }
    .bq-appli__visuel { transform: none; }
}

/* ── 2 · LE VISUEL ET LE BLOC D'OFFRES ─────────────────────────────────── */
.bq-duo { display: grid; align-items: start; gap: var(--e5);
    grid-template-columns: 295px minmax(0, 1fr); }
/* Rien de déposé dans les réglages : la colonne du visuel disparaît au lieu
   de laisser un aplat vide, et le bloc prend toute la largeur. */
.bq-duo--nu { grid-template-columns: minmax(0, 1fr); }

/* LA MÊME SECTION, EN MIROIR — sa demande du 12/09 pour les Back Glass.
   Les colonnes s'inversent, et `order` remet le visuel à droite SANS toucher
   au balisage : dans le code les articles restent avant l'image, donc ils se
   lisent et s'atteignent en premier — au clavier comme à la voix. Un balisage
   retourné aurait donné l'image d'abord à qui ne voit pas la page. */
/* MÊME MESURE QUE LA SECTION DES OFFRES, et ce n'est pas une coïncidence : le
   jour où les pastilles sombres sont devenues du texte, l'entête des offres a
   perdu les quatorze pixels que la pastille lui donnait — exactement ce qui
   séparait déjà les deux sections. Les deux carrés se sont rejoints à 295, et
   c'est mieux ainsi : deux carrés de tailles différentes sur la même page se
   remarquent. */
.bq-duo--miroir { grid-template-columns: minmax(0, 1fr) 295px; }
.bq-duo--miroir .bq-promo { order: 2; }
.bq-duo--miroir .bq-bloc { order: 1; }

/* LE VISUEL EST UN CARRÉ — sa demande, et c'est `aspect-ratio` qui le tient,
   quelle que soit la largeur. `align-self: start` l'empêche d'être étiré par
   la hauteur de la rangée : étiré, il cesserait d'être carré.
   ⚠ CE QUE ÇA SUPPOSE DE SON CÔTÉ : une image CARRÉE, 800 × 800. Celles
   déposées aujourd'hui font 360 × 224 (format de l'application) et se font
   donc rogner sur les côtés tant qu'il n'en dépose pas une taillée pour ici. */
.bq-promo { position: relative; display: block; align-self: start;
    aspect-ratio: 1; border-radius: 16px; overflow: hidden;
    background: var(--orange-doux); }
.bq-promo img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; }

/* L'EMPLACEMENT CARRÉ EN ATTENTE — 16/09/2026, la section Batteries.
   Tant que rien n'est déposé dans Paramètres > Site web, le cadre RESTE : le
   retirer rendrait la section pleine largeur, donc plus du tout les deux
   colonnes demandées. Il montre sa mesure sans se faire passer pour une image
   cassée — même dessin que les deux cadres 1300 × 650 plus haut. */
.bq-promo--vide { display: grid; place-items: center; align-content: center; gap: 7px;
    background: var(--creme); color: var(--g3); border: 1px dashed var(--trait-fort); }
.bq-promo--vide span { font-size: 11px; font-weight: 700; letter-spacing: .1em;
    color: var(--g2); }

/* ── LE GESTE « VOIR » ──────────────────────────────────────────────────
   Sa demande du 12/09 : « les boutons voir doivent être plus légers, juste du
   texte ». Les pastilles sombres partaient chacune avec un aplat d'encre : à
   quatre sur la page, elles pesaient autant que les titres qu'elles
   accompagnaient, et l'œil les comptait avant de les lire.

   Elles deviennent du texte et un chevron — l'idiome que le site emploie déjà
   sur ses bandeaux (« Découvrir › »). Le chevron reste parce qu'un mot seul,
   posé en bout de ligne sans rien, ne se donne pas pour un lien. */
.bq-voir { display: inline-flex; align-items: center; gap: 5px; flex: none;
    font-size: 13.5px; font-weight: 600; color: var(--encre-2);
    white-space: nowrap; transition: color var(--t-vif, .18s) ease; }
.bq-voir::after { content: '›'; font-size: 17px; font-weight: 700; line-height: 0;
    transform: translateY(-1px); transition: transform var(--t-vif, .18s) ease; }
.bq-voir:hover { color: var(--orange-lisible); }
.bq-voir:hover::after { transform: translate(3px, -1px); }

.bq-bloc { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }

/* ── LA CARTE ALLÉGÉE DU RUBAN ──────────────────────────────────────────
   Sa demande : « retire tout et garde juste l'image, le prix et le nom — mais
   le nom plus fin ». Trois éléments, dans cet ordre.

   LE NOM EN GRAISSE NORMALE, et c'est la correction qui compte : en gras il se
   disputait le regard avec le prix, et cinq noms gras alignés se lisent comme
   un mur. En 400, il se lit après le prix — ce qui est l'ordre dans lequel on
   regarde une rangée d'offres. */
/* ⚠ L'IMAGE DIRECTEMENT, SANS FOND — sa correction du 12/09 : « pas besoin
   de fond pour les images, utiliser les images directement ».
   La photo était posée en `contain` avec 10 % de marge sur un aplat crème :
   deux fonds l'un sur l'autre, puisque les photos du catalogue ont déjà leur
   propre fond de studio. Elle remplit désormais le cadre.

   ET ELLE N'EST PAS ROGNÉE POUR AUTANT : les photos du catalogue sont CARRÉES
   (1024 × 1024, vérifié), et le cadre l'est aussi — `cover` n'a donc rien à
   couper. Le crème ne subsiste que derrière une carte SANS photo, où il évite
   un trou dans la rangée. */
.bq-c__cadre { position: relative; display: grid; place-items: center;
    aspect-ratio: 1; border-radius: 14px; background: var(--creme); overflow: hidden; }
.bq-c__cadre img { width: 100%; height: 100%; object-fit: cover; padding: 0; }
.bq-c__prix { margin: 2px 0 0; display: flex; align-items: baseline;
    gap: 7px; flex-wrap: wrap; }
.bq-c__prix strong { font-size: 15px; font-weight: 800; color: var(--encre); }
.bq-c__prix s { font-size: 12.5px; color: var(--g2); }

/* LA REMISE, POSÉE SUR LA PHOTO. En haut à GAUCHE : le regard entre par là, et
   c'est le coin que les photos du catalogue laissent libre — leurs logos de
   marque sont en haut à droite. L'orange de la marque, et rien d'autre : c'est
   le seul aplat coloré de la rangée, donc le seul que l'œil accroche. */
.bq-c__remise { position: absolute; top: 9px; inset-inline-start: 9px;
    padding: 4px 9px; border-radius: 999px; background: var(--orange);
    color: var(--sur-couleur); font-size: 11px; font-weight: 800;
    letter-spacing: -.01em; line-height: 1.3;
    box-shadow: 0 4px 12px -4px rgba(248, 80, 0, .5); }
/* LA HAUTEUR DU NOM EST RÉSERVÉE — deux lignes, toujours, même pour un nom
   court. Sans ça la carte la plus haute commande la rangée, la rangée commande
   la hauteur du bloc, et le bloc commande la taille du carré : un seul nom qui
   passe à la ligne décalait tout le calcul de quatorze pixels. Réservée, la
   géométrie ci-dessous est exacte et ne bouge plus avec le catalogue. */
.bq-c__nom { display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px;
    height: 2.7em; font-size: 13px; font-weight: 400; line-height: 1.35;
    color: var(--g1); }
.bq-c__nom:hover { color: var(--orange-lisible); }

.bq-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: start; gap: var(--e4); margin-bottom: var(--e2); }
.bq-bloc .bq-tete { margin-bottom: 0; }
.bq-tete h2 { margin: 0; font-size: 23px; font-weight: 800;
    letter-spacing: -.035em; line-height: 1.05; color: var(--encre); }
.bq-tete__phrase { margin: 9px 0 0; font-size: 13px; line-height: 1.45; color: var(--g1); }

/* ── LE COMPTE À REBOURS ────────────────────────────────────────────────
   Sa référence pose quatre cases violettes ; il a tranché TROIS — heures,
   minutes, secondes — le compteur repartant chaque nuit, une case de jours
   afficherait 00 en permanence.

   REFAIT TROIS FOIS LE 12/09, et la dernière version est la bonne :
     1. « très attractif » → dégradé d'orange, ombre colorée, secondes qui
        battent. Trop : la couleur criait et le battement n'apprenait rien.
     2. « premium, épuré, séduisant » → trois cases d'encre, un seul accent.
     3. « mettre ça dans l'image 1:1, en bas, en fond blanc bien rond ».

   LA TROISIÈME RÉSOUT CE QUE LES DEUX PREMIÈRES CHERCHAIENT. Le compteur
   n'avait pas à se battre pour exister au milieu d'un entête : posé sur
   l'affiche, il devient l'échéance DE cette offre, et une carte blanche sur un
   fond jaune saturé ressort sans avoir besoin d'un seul artifice. Plus de
   dégradé, plus de halo, plus d'animation — l'encre sur blanc, et l'orange sur
   les seules secondes, qui sont le seul chiffre qui bouge.

   Chiffres TABULAIRES : sans ça un « 1 » et un « 4 » n'ont pas la même
   largeur, et les cases sautillent à chaque seconde. */
.bq-chrono { position: absolute; inset-inline: 14px; bottom: 14px;
    display: grid; grid-template-columns: repeat(3, 1fr);
    padding: 11px 8px 10px; border-radius: 22px; background: var(--blanc);
    box-shadow: 0 12px 30px -12px rgba(26, 21, 18, .38); }
.bq-chrono__case { display: grid; justify-items: center; gap: 3px; min-width: 0; }
.bq-chrono__case b { font-size: 25px; font-weight: 700; line-height: 1;
    letter-spacing: -.045em; color: var(--encre); font-variant-numeric: tabular-nums; }
.bq-chrono__case small { font-size: 8.5px; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--g2); }

/* L'unique accent. Orange vif et non l'orange « lisible » : à 25 px et en
   graisse 700, le seuil de contraste est celui des GRANDS TEXTES, que #F85000
   passe — et c'est cette teinte-là qui est la marque. */
.bq-chrono__case--sec b { color: var(--orange); }

/* LE REPLI : pas de visuel déposé, donc rien sur quoi se poser. Le compteur
   revient dans l'entête, et il lui faut alors un filet — une carte blanche sur
   une page blanche ne se voit pas. */
.bq-chrono--nu { position: static; inset: auto; margin-top: 16px;
    display: inline-grid; grid-auto-flow: column; gap: 4px;
    border: 1px solid var(--trait); box-shadow: none; padding: 11px 18px 10px; }
.bq-chrono--nu .bq-chrono__case { min-width: 64px; }

/* ── LE RUBAN QUI DÉFILE ────────────────────────────────────────────────
   `--vis` porte le nombre de cartes visibles et la largeur s'en déduit : un
   seul nombre à changer par palier, jamais une largeur à recalculer.

   LA BARRE DE DÉFILEMENT EST MASQUÉE, et ce n'est pas de la coquetterie : sur
   Windows elle prend 15 px SOUS les cartes et décale la ligne de prix. Les
   flèches la remplacent. */
.bq-strip { position: relative; --centre: 87px; }
.bq-strip--rayons { --centre: 75px; }
.bq-lot { --vis: 5; --gap-lot: var(--e4);
    display: grid; grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--vis) - 1) * var(--gap-lot)) / var(--vis));
    gap: var(--gap-lot); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; }
.bq-lot::-webkit-scrollbar { display: none; }
.bq-lot > * { scroll-snap-align: start; }

/* Les flèches, posées au centre de la PHOTO et non du bloc : le nom, les
   traits et le prix tireraient le centre vers le bas et elles pendraient. */
.bq-fleche { position: absolute; top: var(--centre); transform: translateY(-50%);
    width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--trait-fort); border-radius: 50%; background: var(--blanc);
    color: var(--encre); cursor: pointer; box-shadow: 0 2px 10px rgba(26,21,18,.13);
    transition: background .18s ease; z-index: 2; }
.bq-fleche:hover { background: var(--creme); }
.bq-fleche--g { inset-inline-start: -14px; }
.bq-fleche--d { inset-inline-end: -14px; }
.bq-fleche[hidden] { display: none; }

/* ── LES DEUX BANNIÈRES ─────────────────────────────────────────────────
   Deux cadres côte à côte, en 2:1. Rien d'autre : l'image porte son message,
   son prix et son bouton dans ses pixels — c'est lui qui la compose, et il la
   remplace sans qu'une ligne de code bouge.

   2:1 ET PAS 16:9 : à 648 px de large, un 16:9 fait 365 px de haut et les deux
   bannières mangent alors plus d'écran que la section des offres au-dessus.
   Le 2:1 les tient à 324. */
.bq-pubs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e5); }
.bq-pub { position: relative; display: block; aspect-ratio: 2 / 1;
    border-radius: var(--r-carte); overflow: hidden; background: var(--creme); }
.bq-pub img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* L'emplacement en attente : il montre la place et sa mesure, sans se faire
   passer pour une image cassée. */
.bq-pub--vide { display: grid; place-items: center; align-content: center; gap: 8px;
    color: var(--g3); border: 1px dashed var(--trait-fort); }
.bq-pub--vide span { font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
    color: var(--g2); }

/* Sous 680 px elles s'empilent : deux bannières de 170 px de large ne montrent
   plus rien de ce qu'elles portent. */
@media (max-width: 680px) {
    .bq-pubs { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
}

/* ── LE RANG ET LE LCD POSÉS SUR LA PHOTO ───────────────────────────────
   Sa demande du 12/09 : « uniquement ici, mets Amoled et Premium dans
   l'image ». Uniquement dans la rangée des écrans, donc — dans la LISTE de la
   boutique ces deux mentions restent sous la photo, alignées d'une carte à
   l'autre, ce qu'elles cesseraient d'être posées sur des photos différentes.

   ⚠ LE VOILE BLANC N'EST PAS UN ORNEMENT. Les bulles de rang sont des aplats
   TRÈS CLAIRS (5 % d'encre) : posées telles quelles sur une photo de studio
   elle aussi très claire, elles disparaissaient. Un dégradé qui monte du bas
   de l'image les rattrape sans assombrir le produit, qui, lui, est au centre.

   Le cadre de la photo rogne ce qui dépasse (`overflow: hidden`), donc la
   bande s'arrête proprement sur les coins arrondis. */
.ak-produit--qualite-sur-image .ak-produit__cadre { position: relative; }
.ak-produit--qualite-sur-image .ak-produit__cadre::after {
    content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 42%;
    background: linear-gradient(to top, rgba(255,255,255,.96) 18%, rgba(255,255,255,0));
    pointer-events: none; }
.ak-produit--qualite-sur-image .ak-qualite {
    position: absolute; inset-inline: 10px; bottom: 9px; z-index: 2;
    margin: 0; }

/* SUR TÉLÉPHONE, LES DEUX BULLES SE REPLIENT SUR DEUX LIGNES — la carte y fait
   156 px et « ★ 5/5 Origine » plus « Amoled » en demandent 167. Deux lignes
   mangent alors le tiers bas de la photo. On resserre : moins de remplissage,
   un corps un demi-point plus petit, et elles repassent côte à côte. */
@media (max-width: 680px) {
    .ak-produit--qualite-sur-image .ak-qualite { inset-inline: 7px; bottom: 7px; gap: 4px; }
    .ak-produit--qualite-sur-image .ak-rang { padding: 2px 6px; font-size: 10px; gap: 3px; }
    .ak-produit--qualite-sur-image .ak-lcd { padding: 2px 6px; font-size: 10px; }
    .ak-produit--qualite-sur-image .ak-etoile i { display: none; }
}

/* ── 3 · LES RAYONS ─────────────────────────────────────────────────────
   Le NOM TIENT SUR UNE LIGNE et se coupe aux points de suspension : le passer
   sur deux ferait respirer les tuiles de façon inégale d'un rayon à l'autre. */
.bq-lot--rayons { --vis: 8; }

/* LE RUBAN PLEINE LARGEUR — celui qui n'a pas de visuel à sa gauche.
   SIX cartes, sa demande du 12/09. Elles portent ici tous les détails — rang,
   LCD, cadre, coloris, garantie —, donc elles ont besoin de plus de place que
   les cartes allégées de la promotion : à sept, la ligne des traits passait sur
   trois lignes et les cartes cessaient d'être comparables entre elles. */
.bq-lot--large { --vis: 6; }
.bq-r { text-align: center; }
.bq-r__cadre { display: grid; place-items: center; aspect-ratio: 1;
    border-radius: 14px; background: var(--creme); overflow: hidden; }
/* Même traitement pour les rayons : la photo remplit sa tuile. Le crème
   reste derrière les huit rayons sans article, où il porte le sac gris. */
.bq-r__cadre img { width: 100%; height: 100%; object-fit: cover; padding: 0; }
.bq-r__vide { color: var(--g2); display: grid; place-items: center; }
.bq-r__nom { display: block; margin-top: 12px; font-size: 14.5px; font-weight: 800;
    color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-r__n { display: block; margin-top: 3px; font-size: 12.5px; color: var(--g1); }
.bq-r:hover .bq-r__nom { color: var(--orange-lisible); }

/* ── LE FOND PASSE AU BLANC ─────────────────────────────────────────────
   La vitrine posait des PANNEAUX blancs sur un fond crème. Sa demande le
   renverse : le fond principal est blanc.

   Les panneaux deviennent donc invisibles — blanc sur blanc — et c'est bien ce
   qu'on veut : ce qui ressort, ce sont les cadres CRÈME des photos, exactement
   comme sur sa référence, où les vignettes grises se détachent sur du blanc.

   DEUX CONSÉQUENCES QUI NE SE DEVINENT PAS :
   · leur remplissage latéral n'a plus de raison d'être et décalait le contenu
     de 24 px par rapport à la bannière, qui, elle, prend toute la largeur ;
   · sans panneau, deux sections se touchent. Un filet les sépare, comme sur sa
     référence — jamais au-dessus de la première, qui séparerait d'un vide. */
.bv { background: var(--blanc); }
.bv-carte { background: transparent; border-radius: 0; padding: var(--e5) 0 0; }
.bv-pile > .bv-carte + .bv-carte,
.bv-pile > .bv-pubs + .bv-carte { border-top: 1px solid var(--trait); }

/* ⚠ LA PILE DE LA VITRINE DOIT AVOIR UNE COLONNE DÉCLARÉE — 12/09/2026.
 *
 * `.bv-pile` est une grille écrite sans `grid-template-columns`. CSS lui en
 * fabrique alors une implicite, en `auto` — c'est-à-dire à la largeur du
 * CONTENU LE PLUS LARGE, sans plafond. Tant que la page ne portait que des
 * grilles souples, personne ne l'a vu.
 *
 * Les rubans qui défilent ont une largeur intrinsèque bien plus grande que
 * l'écran : la colonne est montée à 2 024 px et TOUTE LA PAGE a débordé,
 * bannière comprise. Le `overflow-x: auto` des rubans n'y suffit pas — il
 * borne ce qui DÉPASSE, pas ce que la grille demande comme largeur. Seul
 * `minmax(0, 1fr)` autorise la colonne à être plus étroite que son contenu.
 */
.bv-pile { grid-template-columns: minmax(0, 1fr); }

/* ═══ LES PALIERS ══════════════════════════════════════════════════════════
   ⚠ ILS DOIVENT RESTER LES DERNIERS À PARLER, ET DANS CET ORDRE. Une règle de
   colonnes écrite plus bas dans la feuille l'emporte, à spécificité égale, sur
   celle d'un palier plus étroit écrit plus haut. J'ai cassé le téléphone une
   fois exactement comme ça : un `max-width: 1200px` ajouté en fin de feuille
   s'appliquait aussi à 390 px et gagnait contre le palier `680px` — le visuel
   gardait ses 350 px et les cartes tombaient à 45. */

/* Cinq cartes ne tiennent que sur un grand écran : à 1 100 px elles feraient
   123 px, très en dessous des 163 px sur lesquels la carte a été éprouvée. */
@media (max-width: 1250px) {
    .bq-duo { grid-template-columns: 300px minmax(0, 1fr); }
    .bq-duo--miroir { grid-template-columns: minmax(0, 1fr) 300px; }
    .bq-lot { --vis: 4; }
    .bq-lot--large { --vis: 5; }
    .bq-lot--rayons { --vis: 6; }
}

@media (max-width: 1000px) {
    .bq-duo { grid-template-columns: 250px minmax(0, 1fr); }
    .bq-duo--miroir { grid-template-columns: minmax(0, 1fr) 250px; }
    .bq-lot { --vis: 3; }
    .bq-lot--large { --vis: 4; }
    .bq-lot--rayons { --vis: 5; }
}

/* ═══ LE TÉLÉPHONE ═════════════════════════════════════════════════════════
   Tout se met en pile. Trois points qui ne se devinent pas :

   · LA BANNIÈRE CHANGE DE RATIO. Un 3:1 sur 358 px de large fait 119 px de
     haut — une fente où aucun texte ne tient. Elle passe en 16:9, ce qui
     suppose une SECONDE image cadrée pour le téléphone. Leçon du 14/08.
   · LE VISUEL CESSE D'ÊTRE CARRÉ. Empilé, il n'a plus de hauteur de rangée à
     suivre ; un carré de 358 px de côté mangerait la moitié du premier écran.
   · LES CARTES PASSENT EN GRILLE DE DEUX, comme le reste de la boutique sur
     téléphone, et on n'en garde que quatre : au-delà, la page descendrait sur
     plusieurs écrans avant d'atteindre les rayons. Les rayons, EUX, gardent
     leur défilement — douze en grille de deux feraient six rangées. */
@media (max-width: 680px) {
    /* ⚠ LA BANNIÈRE SE CADRE SUR SON TEXTE, PAS SUR SON CENTRE.
       Son image fait 2,82:1 ; dans un 16:9 de 358 px elle n'en montre que 63 %,
       et centrée elle rognait « LANCEMENT DE LA » d'un côté et les boutons des
       magasins de l'autre — il restait un bandeau joli et muet. Calée à gauche,
       on garde le titre, la phrase, les deux boutons et le logo ; c'est le
       personnage qu'on perd, et c'est le bon échange sur un téléphone.

       Le vrai remède reste une SECONDE IMAGE cadrée pour le mobile, texte
       replié et centré. C'est la leçon du 14/08, et elle n'a pas changé. */
    .bq-banniere { aspect-ratio: 16 / 9; }
    .bq-banniere img { object-position: left center; }
    .bq-duo, .bq-duo--nu, .bq-duo--miroir { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
    /* Sur téléphone, le visuel repasse AVANT les articles : il tient lieu de
       titre illustré, et le miroir n'a plus de sens dans une pile. */
    .bq-duo--miroir .bq-promo { order: 0; }
    /* LE VISUEL RESTE CARRÉ SUR TÉLÉPHONE. Il l'était en 16:9 du temps où il
       n'existait qu'une image paysage à y mettre ; depuis qu'il en dépose une
       en 1:1, ce cadre lui coupait le haut et le bas — sur une affiche « 30 %
       OFF », c'est le message qu'on rogne. */
    .bq-promo { aspect-ratio: 1; align-self: auto; }
    .bq-tete, .bq-bloc .bq-tete { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
    .bq-tete h2 { font-size: 21px; }
    .bq-tete__gestes { justify-content: space-between; }
    .bq-lot { grid-auto-flow: row; grid-auto-columns: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    .bq-lot > :nth-child(n+5) { display: none; }
    .bq-strip > .bq-fleche { display: none; }
    /* 106 px, mesuré : trois rayons tiennent dans les 342 px utiles d'un
       téléphone de 390. Plus large, il n'en passait que deux — et une rangée
       qui n'en montre que deux ne se lit plus comme une rangée. */
    .bq-lot--rayons { grid-auto-flow: column; grid-auto-columns: 106px;
        grid-template-columns: none; --gap-lot: var(--e3); overflow-x: auto; }
    .bq-lot--rayons > :nth-child(n+5) { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES TROIS VITRINES DE SOUS-RAYON — 18/09/2026

   Sa demande : « Cable et chargeur — Enceinte Audio — PowerBank », au-dessus
   de la section Accessoires. Dessin repris de sa référence du 16/09 et validé
   en maquette (`dev.ak-trading.co/maquettes/boutique-vitrines`).

   ── POURQUOI CE BLOC A LE DROIT D'ÊTRE ÉCRIT APRÈS LES PALIERS ──

   L'avertissement du dessus tient toujours : une règle écrite plus bas gagne,
   à spécificité égale, contre un palier écrit plus haut. Il ne mord que sur des
   sélecteurs PARTAGÉS. Ici, rien de commun — `.vt-*` n'existe nulle part
   ailleurs dans la feuille, et aucun palier du dessus ne le nomme. Le bloc est
   clos : base, puis ses propres paliers, du large vers l'étroit.

   ── LA GÉOMÉTRIE, ET D'OÙ VIENNENT LES CHIFFRES ──

   ⚠ CES CHIFFRES ONT ÉTÉ REFAITS LE 18/09 au soir, après « réduis les espaces ».
   Les anciens (gouttières de 45, colonnes de 410, 130 + 20 + 130 = 280) traînaient
   encore ici alors que le code disait autre chose — un commentaire périmé se
   relit comme un fait et fait recalculer faux.

   Le contenu fait 1 320 px. Deux gouttières de 32 le coupent en trois colonnes
   de 418,7. Dedans, le visuel et les cartes se partagent 418,7 − 18 d'écart dans
   le rapport 190/194 : **visuel 198,2, carte 202,4**, dont 106 px reviennent au
   texte une fois les 24 de marge, les 64 de vignette et les 8 d'écart retirés.

   (Le rapport de sa référence était 210/197, relevé sur une image de 1 407 px ;
   sur la trame plus étroite du site il ne laissait que 55 px au texte.)

   La hauteur du visuel n'est pas la sienne : il tient celle des DEUX cartes
   réunies, **130 + 16 + 130 = 276**. C'est ce qui donne son aplomb à la colonne,
   et ce qui commande le format demandé dans Paramètres > Site web : 198,2 / 276
   = **0,718**, et 600 × 840 vaut 0,714 — un demi pour cent d'écart, invisible.

   ⚠ Ce rapport n'est juste QU'À la largeur maximale. Le visuel s'étrécit avec la
   fenêtre pendant que sa hauteur reste accrochée aux 276 px des cartes : 0,69 à
   1 320 px de fenêtre, 0,65 à 1 251. C'est `cover` qui absorbe, et c'est pourquoi
   l'écran de dépôt demande un sujet CENTRÉ.

   DEUX ARRONDIS, ET ILS NE SONT PAS LE MÊME. Les CADRES — le visuel et les
   deux cartes — gardent 14 px : c'est ce qu'il a vu en disant « c'est propre ».
   Ce qu'il demandait d'arrondir le 18/09, ce sont les VIGNETTES DE PRODUIT, et
   elles seules. Je les avais confondus une première fois et j'avais arrondi les
   cadres : les remettre était la correction, pas un revirement.

   12 px sur une vignette de 84. Ça se voit parce que les photos du catalogue
   sont des carrés PLEINS, 1024 × 1024 sur fond gris — vérifié sur six d'entre
   elles. Sur une photo détourée en transparence, le même arrondi ne montrerait
   rien : il rogne la BOÎTE, et `contain` laisse alors les coins vides.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠ `minmax(0, 1fr)` ET NON `1fr`. Une colonne de grille vaut `auto` par
   défaut, c'est-à-dire la largeur de son contenu le plus large, SANS plafond.
   Un nom d'article qui ne se coupe pas suffit alors à pousser la rangée — et
   c'est exactement ce qui avait mis la pile de la vitrine à 2 024 px le 12/09,
   bannière comprise. */
/* ⚠ GOUTTIÈRE 32 ET NON 45 — sa demande du 18/09, « réduis les espaces ».
   Ce n'est pas qu'une question de goût : les 13 px repris à chaque gouttière
   partent dans les colonnes, et donc dans le TEXTE des cartes, qui passe de 92 à
   106 px. Le resserrement et la lisibilité tirent ici dans le même sens. */
.vt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }

/* LE TRAIT VERTICAL vient de sa référence, et il est LÉGÈREMENT ORANGE —
   `--trait-or`, sa demande du 18/09 « un peu plus de couleur ». Ce jeton existe
   pour ça : c'est l'orange de marque ramené à 22 % sur le crème, né de sa
   consigne « les barres de séparation légèrement orange » du mega menu. Ni
   `--orange` ni `--orange-doux` : le premier crie sur un filet d'un pixel.
   En `::before` posé DANS la gouttière, et non en `border-inline-start` sur la colonne : une bordure
   mangerait de la largeur utile et rendrait les trois colonnes inégales — 418,
   395 et 417 px, mesuré. Trois colonnes qui ne font pas la même largeur se
   voient au premier coup d'œil sur les visuels. */
.vt-col { min-width: 0; position: relative; }
.vt-col + .vt-col::before { content: ''; position: absolute; inset-block: 0;
    inset-inline-start: -16px; border-inline-start: 1px solid var(--trait-or); }

.vt-col__titre { margin: 0 0 14px; font-size: 22px; font-weight: 800;
    letter-spacing: -.02em; line-height: 1.2; color: var(--encre);
    display: flex; align-items: center; gap: 9px; }
/* LA BARRE ORANGE DU TITRE — le SEUL orange saturé de la section, et la charte
   le veut ainsi : « neutre partout, orange à un seul endroit à la fois ». Elle
   relie les trois colonnes sans rien dire, et laisse le prix en encre comme sur
   toutes les autres cartes du site. */
.vt-col__titre::before { content: ''; flex: none; width: 4px; height: 17px;
    border-radius: 2px; background: var(--orange); }
.vt-col__titre a:hover { color: var(--orange-lisible); }

/* LE VISUEL OCCUPE LES DEUX RANGÉES : les deux cartes gardent alors leur propre
   hauteur sans que l'image les suive. */
/* ⚠ 190/194 ET NON LE 210/197 DE SA RÉFÉRENCE — corrigé le 18/09 après mesure.
   Ses proportions sont relevées sur une image de 1 407 px, où la colonne fait
   472. La trame du site en donne 410, et sur cette largeur-là il ne restait que
   **55 px** au texte une fois la vignette et les marges retirées : le nom se
   réduisait à six caractères coupés en milieu de mot, exactement le défaut que
   sa référence montre et que le commentaire du dessous dit refuser.
   Le VISUEL garde sa largeur à 4 px près — 190 au lieu de 198 — pour que le
   format demandé dans l'ERP (600 × 840) reste juste. Ce sont la vignette et les
   marges intérieures qui paient, voir `.vt-art`. */
.vt-duo { display: grid; grid-template-columns: minmax(0, 190fr) minmax(0, 194fr);
    grid-template-rows: auto auto; gap: 16px 18px; }

.vt-visuel { grid-row: 1 / span 2; position: relative; overflow: hidden;
    border-radius: 14px; background: var(--creme); min-height: 276px; }
.vt-visuel img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; }
/* ⚠ LE REPLI SE CADRE AUTREMENT QUE SA PHOTO — 18/09.
   Tant qu'aucune image n'est déposée, le cadre montre la photo du catalogue, et
   elle porte le même bandeau noir incrusté. Dans un cadre PORTRAIT, `cover` ne
   rogne que les côtés : le bandeau restait donc visible, coupé en plein mot —
   « 6909 », « K 22 » sur sa capture. On zoome de 35 % en accrochant le haut, ce
   qui le pousse hors du champ tout en gardant le produit entier (mesuré : il
   occupe y 7→79 %, il finit à 279 px sur les 280 du cadre).
   Sa photo d'ambiance, elle, n'a rien à rogner — d'où la classe. */
.vt-visuel--repli img { transform: scale(1.35); transform-origin: center 20%; }
/* LE CADRE VIDE NE DIT RIEN AU VISITEUR. Il n'apparaît que si l'ERP n'a ni
   image déposée NI article photographié à mettre en repli — c'est-à-dire
   jamais en pratique. Un aplat crème, pas un pointillé « 600 × 840 » : la
   mesure est un message d'atelier, elle se lit dans l'ERP. */
.vt-visuel--vide { background: var(--creme); }

/* ── LA CARTE D'ARTICLE ──
   Le nom à GAUCHE, la vignette à DROITE : l'inverse de toutes les autres cartes
   du site, et c'est la référence qui le veut. Ici la photo accompagne un mot.

   ⚠ `box-sizing` EST GLOBAL SUR LE SITE, contrairement à la maquette : les
   130 px comprennent donc les 18 de remplissage. Ne pas remettre 166. */
.vt-art { display: flex; align-items: center; justify-content: space-between;
    gap: 8px; min-height: 130px; padding: 12px;
    border-radius: 14px;
    /* L'APLAT TRÈS CLAIR DE LA CHARTE, pas le crème neutre — sa demande du
       18/09. `--orange-doux` est né pour ça (« aplats très clairs, pastilles ») :
       il réchauffe la carte sans entrer en concurrence avec la barre du titre. */
    background: var(--orange-doux);
    transition: background .18s ease, transform .18s ease; }
/* ⚠ LE NOM NE VIRE PAS À L'ORANGE AU SURVOL, et c'est mesuré, pas frileux :
   #BC3C00 sur #F7D8C7 donne **4,12:1**, sous le seuil AA de 4,5 pour du 13 px —
   et 3,75:1 la nuit. Le fond qui se fonce et la carte qui se soulève disent déjà
   « c'est cliquable » ; une couleur qu'on lit moins bien ne l'ajoute pas, elle
   la retire. Le titre de colonne, lui, garde son orange : il est posé sur du
   blanc, où le même ton donne 6,4:1. */
.vt-art:hover { background: var(--trait-or); transform: translateY(-1px); }
/* LE MOT — le nom, puis le prix dessous. Sa demande du 18/09 : « et toujours
   afficher le prix ». Sa référence n'en montrait aucun, et la section était
   dessinée sans ; mais toutes les autres cartes du site en portent un, et une
   boutique qui n'en affiche pas oblige à ouvrir la fiche pour le savoir.

   ⚠ LE NOM PERD UNE LIGNE AU PASSAGE, de trois à deux. La carte fait 130 px de
   haut pour que les DEUX cartes tiennent la hauteur du visuel ; le prix prend la
   troisième ligne. Garder trois lignes de nom aurait poussé la carte à 152 et
   fait dépasser la colonne de son image. */
.vt-art__mot { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
/* ⚠ `nowrap` + coupe : SANS EUX LE PRIX PASSAIT SOUS LA VIGNETTE. Mesuré le
   18/09 entre 1 001 et 1 280 px — la boîte du texte tombait à 42 px, « 7 000 F »
   en demande 55, et le débordement était PEINT PAR-DESSOUS l'image, qui vient
   après dans le balisage. Il ne restait à l'écran que « 7 ». Un prix tronqué à
   son premier chiffre est pire qu'un prix absent. */
.vt-art__prix { min-width: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em;
    color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* LE PRIX BARRÉ n'est là que s'il existe. La boutique ne porte aucune promotion
   aujourd'hui — mais un prix promotionnel affiché SEUL se lit comme un prix
   normal, et c'est la règle de toutes les cartes du site. */
.vt-art__avant { font-size: 12.5px; font-weight: 600; color: var(--g2);
    text-decoration: line-through; margin-inline-start: 6px; }
.vt-art__nom { min-width: 0; font-size: 13px; font-weight: 700;
    line-height: 1.25; color: var(--encre);
    /* TROIS LIGNES, RENDUES AVEC LE CORPS — 18/09, sa relecture. À 15 px il
       n'en tenait que deux, et « SPEAKER AK BLUETOOTH (100W) + 2 micros » se
       réduisait à « SPEAKER AK… ». À 13 px les trois lignes rentrent dans les
       130 px de la carte (28 de marge + 49 de texte + 6 + 18 de prix = 101) et
       le nom passe en entier dans la plupart des cas. Sa référence coupe
       « Perfumes » en « Perfu / mes » au milieu d'un mot : c'est le défaut d'un
       cadre trop étroit pour son texte, pas un effet à reproduire.
       ⚠ Les noms du catalogue AK sont longs et en capitales — « SPEAKER AK
       BLUETOOTH (100W) + 2 micros ». La coupe se verra. */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    /* ⚠ `anywhere` N'EST PAS UN CAPRICE : « ADAPTER+CABLE » est UN SEUL MOT pour
       le navigateur — aucune espace, et le « + » ne coupe pas. Plus large que
       les 92 px de la boîte, il ne revenait pas à la ligne : il sortait, et
       `overflow: hidden` le TRANCHAIT en plein milieu. On lisait
       « ADAPTER+CABI », qui se prend pour une faute de frappe. Revenir à la
       ligne au milieu d'un mot est laid ; se faire couper sans rien dire l'est
       davantage, parce que rien n'indique qu'il manque quelque chose. */
    overflow-wrap: anywhere; hyphens: none; }
/* ── LA VIGNETTE, ET POURQUOI ELLE EST ROGNÉE — 18/09/2026 ──
   64 et non 84 : les vingt pixels rendus au texte font la différence entre
   « ADAPTE… » et « ADAPTER+CABLE 20W… ».

   ⚠ ET LE CADRE ROGNE, il ne contient plus. Mesuré sur les photos du catalogue
   (1 024 × 1 024, toutes bâties sur le même gabarit) : le produit n'occupe que
   x 26→74 % et y 7→79 %, et un BANDEAU NOIR incrusté — « AK 10 · 3 Cables Power
   Bank » — court de 82 à 92 %. En `contain`, on affichait donc un objet de 31 px
   dans un cadre de 64, surmonté d'une tache noire illisible.

   On montre la fenêtre x 14→86 %, y 5→77 % : carrée (donc sans déformation),
   elle contient TOUT le produit et laisse le bandeau dehors. 100/72 = 139 % de
   grossissement, décalé de 19 % à gauche et 7 % en haut — ces trois nombres se
   déduisent de la fenêtre, ils ne se règlent pas à l'œil.

   Le produit passe de 31 à 43 px. Le cadre VIDE reste, tel quel, le repli de
   l'article sans photo : c'est le même aplat crème, sans rien dedans. */
/* ⚠ LA VIGNETTE RESTE NEUTRE, elle ne suit PAS la carte : les photos du
   catalogue sont détourées sur un gris froid, et ce gris posé sur un aplat rosé
   paraît sale. C'est la mise en garde écrite en tête de la feuille, à propos des
   gris neutres à côté d'un orange saturé. */
.vt-art__vig { flex: none; width: 64px; height: 64px; overflow: hidden;
    border-radius: 12px; background: var(--creme); display: block; }
/* ⚠ `max-width: none` — SANS LUI TOUT CE QUI PRÉCÈDE EST ANNULÉ. La feuille
   pose `img, svg, video { max-width: 100% }` tout en haut (ligne 509), et cette
   règle-là plafonne le `width: 139%` à 64 px : l'image rendait 64 × 89 au lieu
   de 89 × 89, le décalage de -19 % la poussait hors du cadre, et il restait
   **12 px d'aplat vide à droite de chaque vignette** — 19 % — pendant que le
   produit se faisait rogner à gauche. Mesuré sur les six vignettes, aux neuf
   largeurs. Les trois nombres du commentaire ci-dessus décrivent une fenêtre qui
   n'existait pas : un agrandissement qui dépasse son cadre doit DIRE qu'il a le
   droit de dépasser. */
.vt-art__vig img { width: 139%; height: 139%; max-width: none; margin: -7% 0 0 -19%;
    object-fit: cover; display: block; }

/* ── LE CONTENEUR DE L'ACCUEIL ──
   La boutique enveloppe ce même partiel d'un `.bv-carte` — fond transparent et
   filet de séparation, parce que sa page est une PILE de sections collées.
   L'accueil, lui, alterne des bandes qui respirent : fond blanc et 64 px, comme
   `.ak-bandes` et `.ak-marques` juste au-dessus et juste en dessous. Deux
   habillages, un seul dessin intérieur. */
.ak-vitrines { background: var(--blanc); }
.ak-vitrines > .ak-large { padding-block: var(--e8); }

/* ── SOUS 1 250 px : LES TROIS VITRINES S'EMPILENT ──
   ⚠ CE PALIER ÉTAIT À 1 000 px, ET C'ÉTAIT UN TROU. Entre 1 001 et 1 280 px la
   page gardait ses trois colonnes alors que la trame était déjà retombée à
   1 232 px : la carte descendait à 174 px, le texte à 42, et le NOM DISPARAISSAIT
   entièrement. Aucune règle ne couvrait cette bande — c'est la largeur d'un
   portable de 13 pouces. Trouvé à la capture, invisible au code.

   Empilées, les colonnes ne reprennent PAS le partage 190/194 : sur 1 200 px il
   donnerait un visuel de 595 px de large sur 280 de haut, soit du 2,8:1 pour une
   image composée en 5:7. Le visuel prend une largeur FIXE et redevient carré ;
   ce sont les cartes qui héritent de tout l'espace gagné. */
@media (max-width: 1250px) {
    .vt { grid-template-columns: minmax(0, 1fr); row-gap: var(--e5); }
    .vt-col + .vt-col { padding-block-start: var(--e5); border-top: 1px solid var(--trait-or); }
    .vt-col + .vt-col::before { content: none; }
    .vt-duo { grid-template-columns: 280px minmax(0, 1fr); }
    .vt-visuel { min-height: 276px; }
}

/* ── TÉLÉPHONE : le visuel passe au-dessus ──
   À 390 px, le côte-à-côte donnerait 170 px au visuel et 170 à la carte : le
   nom y tomberait sur quatre lignes et la vignette de 84 px mangerait la moitié
   de la carte. Le visuel prend donc toute la largeur, et les deux articles se
   rangent dessous — côte à côte, parce qu'ils sont deux.

   ⚠ LE 16:9 ROGNE UN PORTRAIT DE HAUT EN BAS. C'est la contrepartie assumée,
   et c'est pourquoi l'écran de dépôt demande un sujet centré. */
@media (max-width: 680px) {
    .vt-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e2); }
    .vt-visuel { grid-row: auto; grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 9; }
    .vt-art { flex-direction: column; align-items: flex-start; gap: var(--e2);
        min-height: 0; padding: var(--e3); }
    .vt-art__nom { font-size: 13px; }
    .vt-art__vig { width: 100%; height: 86px; }
    .vt-col__titre { font-size: 21px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA BULLE DE COULEUR — 18/09/2026, sa décision (piste B de la maquette)

   « Je pensais à une bulle avec la couleur et le texte à l'intérieur, mais il
   faut des couleurs qui vont avec la couleur de l'écriture et la bulle. »

   ⚠ CETTE FEUILLE NE CALCULE RIEN, ET C'EST LE POINT. Les quatre teintes
   arrivent de l'ERP dans des propriétés personnalisées, déjà mesurées : le fond
   est la couleur mélangée à la carte, le texte la même couleur poussée jusqu'à
   passer 4,5:1 sur ce fond — le seuil du W3C pour du petit texte.

   `color-mix()` aurait donné un fond juste ici même, mais aucune GARANTIE sur
   le texte : on aurait mélangé sans savoir si le résultat se lit. Et surtout
   c'eût été une SECONDE source de couleur, celle qu'on a passé la journée du
   18/09 à supprimer. Une seule décision, un seul endroit : l'ERP.
   ═══════════════════════════════════════════════════════════════════════════ */
.ak-coul-bulle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px 3px 7px; border-radius: 999px;
    font-size: 11px; font-weight: 600; line-height: 1.45; white-space: nowrap;
    background: var(--bulle); color: var(--texte);
}
/* LE POINT DE COULEUR PURE. Le texte a été assombri pour se lire : il ne dit
   donc plus la teinte exacte. Le point la redonne — sans lui, un « Jaune »
   écrit en ocre foncé ne se lit plus comme du jaune. */
.ak-coul-bulle i { width: 8px; height: 8px; border-radius: 50%; flex: none;
    display: block; background: var(--pur); }

/* ⚠ LE LISERÉ N'EST PAS DÉCORATIF, et il ne se met pas au jugé : l'ERP le
   demande quand le fond de la bulle ne se distingue plus de la carte (moins de
   1,10 de contraste). Sur « Blanc » et « Crème », sans lui, il n'y a tout
   simplement plus de bulle. Huit couleurs sur vingt-six sont dans ce cas —
   trouvé à la capture, pas au calcul. */
.ak-coul-bulle--liseree { box-shadow: inset 0 0 0 1px rgba(26, 21, 18, .16); }
.ak-coul-bulle--liseree i { box-shadow: inset 0 0 0 1px rgba(26, 21, 18, .22); }

/* ── LA NUIT ──
   La carte passe de #FFFFFF à #1A1614 : une bulle calculée sur du blanc y
   serait délavée et son texte assombri illisible. L'ERP rend donc DEUX jeux,
   tous deux mesurés — l'aplat de nuit est plus franc (22 % contre 14) pour
   exister sur du sombre, et le texte s'ÉCLAIRCIT au lieu de s'assombrir.

   Les deux écritures, comme partout dans cette feuille : la bascule manuelle
   (`data-theme`) doit l'emporter dans les deux sens sur la préférence système. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ak-coul-bulle {
        background: var(--bulle-nuit); color: var(--texte-nuit);
    }
    :root:not([data-theme="light"]) .ak-coul-bulle--liseree { box-shadow: inset 0 0 0 1px rgba(244, 240, 237, .20); }
    :root:not([data-theme="light"]) .ak-coul-bulle--liseree i { box-shadow: inset 0 0 0 1px rgba(244, 240, 237, .28); }
}
:root[data-theme="dark"] .ak-coul-bulle {
    background: var(--bulle-nuit); color: var(--texte-nuit);
}
:root[data-theme="dark"] .ak-coul-bulle--liseree { box-shadow: inset 0 0 0 1px rgba(244, 240, 237, .20); }
:root[data-theme="dark"] .ak-coul-bulle--liseree i { box-shadow: inset 0 0 0 1px rgba(244, 240, 237, .28); }

/* ═══════════════════════════════════════════════════════════════════════════
   « QUELQU'UN VIENT DE… » — 18/09/2026, la preuve sociale

   Sa demande, sur la capture d'un autre site : « exactement ce dispositif de
   preuve sociale. On affiche les réparations et les achats. »

   ⚠ EN BAS À GAUCHE, ET C'EST UNE CONTRAINTE, PAS UN GOÛT : le chat occupe
   déjà le coin bas-droit. Deux pastilles flottantes du même côté se
   recouvriraient, et c'est le chat qu'on perdrait — celui qui rapporte.
   ═══════════════════════════════════════════════════════════════════════════ */
.ak-preuve-sociale {
    position: fixed; z-index: 60;
    left: var(--gouttiere); bottom: var(--gouttiere);
    width: 340px; max-width: calc(100vw - var(--gouttiere) * 2);
    /* La pile ne doit pas intercepter les clics quand elle est vide, ni sur ses
       marges : seule la bulle est cliquable. */
    pointer-events: none;
}
.ak-preuve {
    pointer-events: auto;
    display: flex; align-items: center; gap: 11px;
    background: var(--blanc); border-radius: 14px; padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(26, 21, 18, .05), 0 14px 34px -14px rgba(26, 21, 18, .28);
    position: relative;
    /* L'ENTRÉE VIENT DU BAS, comme une notification du système. `translateY`
       et non `bottom` : la première se compose sur le GPU, la seconde fait
       recalculer la mise en page à chaque image. */
    opacity: 0; transform: translateY(14px);
    transition: opacity .32s var(--e-sortie, ease), transform .32s var(--e-sortie, ease);
}
.ak-preuve.est-vue { opacity: 1; transform: none; }

.ak-preuve__vign { width: 48px; height: 48px; border-radius: 10px; flex: none;
    overflow: hidden; background: var(--creme); display: grid; place-items: center;
    color: var(--g2); }
.ak-preuve__vign img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-preuve__mot { min-width: 0; flex: 1 1 auto; }
/* LA PASTILLE DE GENRE : on sait de quoi il s'agit sans lire la phrase. */
.ak-preuve__genre { display: inline-flex; align-items: center; padding: 2px 6px;
    border-radius: 999px; margin-bottom: 3px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ak-preuve__genre--atelier  { background: var(--orange-doux); color: var(--orange-lisible); }
.ak-preuve__genre--boutique { background: var(--vert-doux, rgba(23,128,61,.10)); color: var(--vert, #17803D); }
.ak-preuve__titre { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.35;
    color: var(--encre);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ak-preuve__quand { margin: 2px 0 0; font-size: 11px; color: var(--g1); }

/* LA CROIX N'EST PAS OPTIONNELLE : une notification qu'on ne peut pas faire
   taire devient une gêne à la troisième. Elle range le dispositif pour toute
   la visite, pas seulement pour cette bulle — voir le script. */
.ak-preuve__x { position: absolute; top: 7px; inset-inline-end: 8px;
    width: 18px; height: 18px; border: 0; border-radius: 50%; background: none;
    color: var(--g3); cursor: pointer; display: grid; place-items: center;
    font-size: 10px; line-height: 1; padding: 0; }
.ak-preuve__x:hover { background: var(--creme); color: var(--encre); }
.ak-preuve__x:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ── TÉLÉPHONE ──
   Pleine largeur moins les marges. ⚠ ET REMONTÉE AU-DESSUS DE LA BARRE DU BAS
   quand la page en porte une : une notification qui couvre le panier coûte une
   commande. `env(safe-area-inset-bottom)` pour les téléphones à encoche. */
@media (max-width: 680px) {
    .ak-preuve-sociale { left: 12px; right: 12px; width: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    .ak-preuve__titre { font-size: 12px; }
}

/* ── CE QUI BOUGE PEUT SE TAIRE ──
   Une bulle qui glisse dans le champ de vision est exactement ce que
   `prefers-reduced-motion` demande d'éviter. Elle paraît quand même : c'est
   l'entrée qu'on supprime, pas l'information. */
@media (prefers-reduced-motion: reduce) {
    .ak-preuve { transition: none; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LA PAGE CARRIÈRES — 28/09/2026 au soir, sa demande : « l'adapter au
   design du site web ; plus épuré, plus pro, haut de gamme ».
   La page reprend le héros, la scène, les cartouches, les boutons et les
   étapes du site tels quels. Ne vivent ici que ce qui n'existait pas : le
   bouton FR / EN, la ligne de faits, et la carte d'un poste.
   Tout passe par les jetons : le mode sombre suit sans une ligne de plus.
   ═══════════════════════════════════════════════════════════════════════ */
.ak-cr-oeil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.ak-cr-oeil .ak-heros__oeil { white-space: nowrap; }
.ak-cr-oeil__mot { font-weight: inherit; }

/* Le choix de langue — discret : il ne sert qu'aux candidats de l'étranger. */
.ak-cr-langue {
    display: inline-flex;
    padding: 3px;
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--r-pastille);
}
.ak-cr-langue button {
    min-width: 40px;
    height: 32px;
    padding-inline: var(--e3);
    border: 0;
    border-radius: var(--r-pastille);
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--g1);
    cursor: pointer;
    transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-cr-langue button:hover { color: var(--encre); }
/* `--encre` / `--blanc` et non `--fond-sombre` : la langue choisie doit
   s'inverser avec le thème, sinon la nuit elle est sombre sur sombre. */
.ak-cr-langue button[aria-pressed="true"] { background: var(--encre); color: var(--blanc); }
.ak-cr-langue button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Les faits, sous les boutons : deux, pas plus — le reste est dans les cartouches. */
.ak-cr-faits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3) var(--e6);
    margin-top: var(--e7);
    padding: 0;
    list-style: none;
    font-size: 14.5px;
    color: var(--g1);
}
.ak-cr-faits li { display: inline-flex; align-items: center; gap: var(--e2); }
.ak-cr-faits svg { color: var(--orange); flex: none; }

/* La photo est en paysage, le cadre du site en portrait : on garde la
   conseillère, qui est à droite de l'image. */
.ak-cr-scene .ak-scene__photo img { object-position: 66% center; }

/* ── LES POSTES ── */
.ak-cr-postes { background: var(--blanc); border-top: 1px solid var(--trait); }
.ak-cr-postes > .ak-large {
    /* La construction de la section « Réparation » du site : le titre à
       gauche, les cartes à droite. Pleine largeur, une carte de poste
       laissait un grand vide entre le texte et les boutons. */
    display: grid;
    grid-template-columns: 30% 66%;
    justify-content: space-between;
    align-items: start;
    padding-block: var(--e8);
}
.ak-cr-postes > .ak-large > * { min-width: 0; }
.ak-cr-tete { max-width: 52ch; }
.ak-cr-tete h2,
.ak-cr-etapes .ak-etapes__tete h2 {
    margin-top: var(--e3);
    font-size: clamp(26px, 2.5vw, 38px);
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: 1.05;
    color: var(--encre);
}
.ak-cr-tete > p:last-child,
.ak-cr-etapes__mot {
    margin-top: var(--e3);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--g1);
}
.ak-cr-liste { display: grid; gap: var(--e4); }
.ak-cr-postes .ak-cr-aucun { margin-top: 0; }

.ak-cr-poste {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: var(--e5);
    align-items: center;
    padding: var(--e6);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    transition: border-color var(--t-moyen) var(--e-sortie), box-shadow var(--t-moyen) var(--e-sortie), transform var(--t-moyen) var(--e-sortie);
}
.ak-cr-poste:hover {
    border-color: var(--trait-fort);
    box-shadow: 0 2px 4px rgba(26,21,18,.03), 0 18px 40px -28px rgba(26,21,18,.35);
    transform: translateY(-2px);
}
.ak-cr-poste__ico {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    align-self: start;
    border-radius: 16px;
    background: var(--orange-doux);
    color: var(--orange);
}
.ak-cr-poste h3 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
    color: var(--encre);
}
.ak-cr-poste h3 a { color: inherit; text-decoration: none; transition: color var(--t-vif) var(--e-sortie); }
.ak-cr-poste h3 a:hover { color: var(--orange-lisible); }
.ak-cr-poste__meta {
    display: flex;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 14px;
    color: var(--g1);
}
/* Le point suit le mot au lieu de le précéder : passé à la ligne, il reste en
   fin de ligne et aucune ligne ne commence par un point. */
.ak-cr-poste__meta span:not(:last-child)::after { content: '·'; margin-inline: var(--e2); color: var(--g3); }
.ak-cr-poste__paie { margin-top: var(--e3); font-size: 14.5px; color: var(--g1); }
.ak-cr-poste__paie strong {
    margin-inline-end: 6px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}
/* L'espace qui suit le point, dans la vue, est le seul endroit où la ligne
   peut se couper : « par semaine · » d'un côté, « soit 140 000 F par mois » de l'autre. */
.ak-cr-poste__sep { margin-inline-start: var(--e2); color: var(--g3); }
.ak-cr-poste__comp { display: flex; flex-wrap: wrap; margin-top: 6px; font-size: 13.5px; color: var(--g1); }
.ak-cr-poste__comp span { white-space: nowrap; }
.ak-cr-poste__comp span:not(:last-child)::after { content: '·'; margin-inline: 6px; color: var(--g3); }
.ak-cr-insecable { white-space: nowrap; }
.ak-cr-poste__actions { display: flex; flex-direction: column; align-items: center; gap: var(--e3); }
.ak-cr-poste__actions .ak-lien-fort { font-size: 14.5px; }
.ak-cr-poste__second { display: flex; align-items: center; gap: var(--e3); }
.ak-cr-partager {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    padding: 0;
    border: 1px solid var(--trait);
    border-radius: var(--r-pastille);
    background: var(--blanc);
    color: var(--g1);
    cursor: pointer;
    transition: border-color var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie);
}
.ak-cr-partager:hover { border-color: var(--orange); color: var(--orange); }
.ak-cr-partager:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.ak-cr-aucun {
    display: grid;
    gap: var(--e2);
    margin-top: var(--e7);
    padding: var(--e7) var(--e5);
    text-align: center;
    border: 1px dashed var(--trait-fort);
    border-radius: var(--r-carte);
    color: var(--g1);
}
.ak-cr-aucun strong { font-size: 18px; color: var(--encre); }

/* ── LES ÉTAPES, à trois temps et sur le crème ── */
.ak-cr-etapes { background: var(--creme); border-top: 1px solid var(--trait); }
.ak-cr-etapes .ak-etapes__lot { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e7); }
/* Le pointillé va du premier numéro au dernier, pas au-delà. */
.ak-cr-etapes .ak-etapes__lot::before { left: 22px; right: calc((100% - 2 * var(--e7)) / 3 - 22px); }
.ak-cr-etapes .ak-etape span { box-shadow: 0 0 0 6px var(--creme); }
.ak-cr-etapes .ak-etape small { max-width: 36ch; }

@media (max-width: 1040px) {
    .ak-cr-postes > .ak-large { grid-template-columns: minmax(0, 1fr); gap: var(--e7); }
}
@media (max-width: 1000px) {
    .ak-cr-etapes .ak-etapes__lot { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
}
@media (max-width: 760px) {
    .ak-cr-poste { grid-template-columns: 48px minmax(0, 1fr); gap: var(--e4); padding: var(--e5); }
    .ak-cr-poste__ico { width: 48px; height: 48px; border-radius: 14px; }
    .ak-cr-poste__actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
}
@media (max-width: 560px) {
    .ak-cr-postes > .ak-large { padding-block: var(--e7); }
    .ak-cr-poste__actions { flex-direction: column; align-items: stretch; text-align: center; }
    .ak-cr-poste__actions .ak-cta { justify-content: center; }
    .ak-cr-poste__second { justify-content: center; }
    .ak-cr-partager { width: 44px; height: 44px; }
    .ak-cr-faits { margin-top: var(--e6); }
    .ak-cr-oeil { gap: var(--e2); }
    .ak-cr-oeil .ak-heros__oeil { font-size: 13px; gap: var(--e2); padding-inline-end: var(--e4); }
    .ak-cr-oeil .ak-heros__oeil > span { width: 28px; height: 28px; }
    .ak-cr-langue button { min-width: 36px; height: 30px; padding-inline: var(--e2); }
}
@media (prefers-reduced-motion: reduce) {
    .ak-cr-poste, .ak-cr-poste:hover { transition: none; transform: none; }
}

/* ── LA PAGE D'UNE OFFRE (28/09/2026) ─────────────────────────────────────
   L'en-tête sur le crème (plus de bande sombre), le détail en blocs séparés
   d'un filet, la carte récapitulative collante à droite, la barre du bas
   sur téléphone. */
.ak-cr-o-tete { background: var(--creme); border-bottom: 1px solid var(--trait); }
.ak-cr-o-tete > .ak-large { padding-block: var(--e7) var(--e8); }
.ak-cr-fil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
    margin-bottom: var(--e6);
    font-size: 14px;
    color: var(--g1);
}
.ak-cr-fil a { color: var(--g1); text-decoration: none; transition: color var(--t-vif) var(--e-sortie); }
.ak-cr-fil a:hover { color: var(--orange-lisible); }
.ak-cr-fil > span:first-of-type { display: inline-flex; color: var(--g3); }
.ak-cr-o-tete h1 {
    margin-top: var(--e3);
    max-width: 18ch;
    font-size: clamp(34px, 4.4vw, 58px);
    font-weight: 800;
    letter-spacing: -.048em;
    line-height: 1;
    color: var(--encre);
    text-wrap: balance;
}
.ak-cr-o-meta {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--e4);
    font-size: 16px;
    color: var(--g1);
}
.ak-cr-o-meta span:not(:last-child)::after { content: '·'; margin-inline: var(--e3); color: var(--g3); }
.ak-cr-o-boutons { margin-top: var(--e6); }

.ak-cr-pourvu {
    display: flex;
    gap: var(--e3);
    align-items: flex-start;
    max-width: 62ch;
    margin-top: var(--e6);
    padding: var(--e4) var(--e5);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--r-champ);
    font-size: 15px;
    line-height: 1.55;
    color: var(--encre-2);
}
.ak-cr-pourvu > span { flex: none; color: var(--orange); margin-top: 1px; }
.ak-cr-pourvu b { color: var(--encre); }
.ak-cr-pourvu a { color: var(--orange-lisible); font-weight: 700; }

.ak-cr-o-corps { background: var(--blanc); }
.ak-cr-o-corps > .ak-large {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--e8);
    align-items: start;
    padding-block: var(--e7) var(--e8);
}
.ak-cr-o-bloc { padding-block: var(--e6); }
.ak-cr-o-bloc + .ak-cr-o-bloc { border-top: 1px solid var(--trait); }
.ak-cr-o-bloc:first-child { padding-top: 0; }
.ak-cr-o-bloc h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.2;
    color: var(--encre);
}
.ak-cr-o-bloc > p:not(.ak-cr-pastilles) {
    margin-top: var(--e3);
    max-width: 68ch;
    font-size: 16px;
    line-height: 1.7;
    color: var(--encre-2);
}
.ak-cr-points, .ak-cr-coches { display: grid; gap: var(--e3); margin-top: var(--e4); padding: 0; list-style: none; }
.ak-cr-points li, .ak-cr-coches li { display: flex; gap: var(--e3); font-size: 16px; line-height: 1.55; color: var(--encre-2); }
.ak-cr-points li::before {
    content: '';
    flex: none;
    width: 6px; height: 6px;
    margin-top: .62em;
    border-radius: 50%;
    background: var(--orange);
}
.ak-cr-coches li svg { flex: none; margin-top: 2px; color: var(--orange); }
.ak-cr-pastilles { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }
.ak-cr-pastilles span {
    padding: 7px var(--e4);
    background: var(--creme);
    border: 1px solid var(--trait);
    border-radius: var(--r-pastille);
    font-size: 14px;
    font-weight: 600;
    color: var(--encre-2);
}

/* La carte suit le défilement : le prix et « Postuler » restent en vue. */
.ak-cr-o-carte {
    position: sticky;
    top: calc(var(--h-entete) + var(--e5));
    padding: var(--e5);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    box-shadow: 0 2px 4px rgba(26,21,18,.03), 0 22px 44px -32px rgba(26,21,18,.35);
}
.ak-cr-o-carte__tete { display: flex; align-items: center; gap: var(--e3); padding-bottom: var(--e4); border-bottom: 1px solid var(--trait); }
.ak-cr-o-carte__tete .ak-cr-poste__ico { width: 48px; height: 48px; border-radius: 14px; align-self: center; }
.ak-cr-o-carte__tete strong { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; color: var(--encre); }
.ak-cr-o-carte__tete small { display: block; font-size: 13px; color: var(--g1); }
.ak-cr-o-remu { padding-block: var(--e5) var(--e4); }
.ak-cr-o-remu small { display: block; font-size: 12.5px; font-weight: 600; color: var(--g1); }
.ak-cr-o-remu strong {
    display: block;
    margin-top: var(--e1);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.1;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}
.ak-cr-o-remu strong span { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--g1); }
.ak-cr-o-remu .ak-cr-o-remu__note { font-size: 17px; letter-spacing: -.02em; line-height: 1.35; }
.ak-cr-o-remu p { margin-top: var(--e2); font-size: 14px; line-height: 1.5; color: var(--g1); text-wrap: pretty; }
.ak-cr-o-lignes { margin: 0; border-top: 1px solid var(--trait); }
.ak-cr-o-lignes > div {
    display: flex;
    justify-content: space-between;
    gap: var(--e3);
    padding-block: 11px;
    border-bottom: 1px solid var(--trait);
    font-size: 14.5px;
}
.ak-cr-o-lignes dt { display: inline-flex; align-items: center; gap: var(--e2); color: var(--g1); }
.ak-cr-o-lignes dt svg { color: var(--orange); }
.ak-cr-o-lignes dd { margin: 0; font-weight: 700; color: var(--encre); text-align: end; }
.ak-cr-o-carte__cta { width: 100%; justify-content: center; margin-top: var(--e5); }
.ak-cr-o-carte__pied { display: flex; justify-content: space-between; gap: var(--e3); margin-top: var(--e4); }
.ak-cr-o-lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--g1);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--t-vif) var(--e-sortie);
}
.ak-cr-o-lien:hover { color: var(--orange-lisible); }
.ak-cr-o-lien:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; }

/* La barre du bas : téléphone seulement. */
.ak-cr-barre { display: none; }
@media (max-width: 900px) {
    .ak-cr-o-corps > .ak-large { grid-template-columns: minmax(0, 1fr); gap: var(--e7); }
    .ak-cr-o-carte { position: static; }
    .ak-cr-barre {
        position: fixed;
        z-index: 70;
        left: 0; right: 0; bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--e3);
        padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom, 0px));
        background: var(--verre);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--trait);
    }
    .ak-cr-barre p { font-size: 13px; color: var(--g1); line-height: 1.3; }
    .ak-cr-barre strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--encre); font-variant-numeric: tabular-nums; }
    .ak-cr-barre .ak-cta { flex: none; height: 46px; }
    /* La page garde la place de la barre, et le chat comme la bulle
       « quelqu'un vient de… » montent au-dessus d'elle au lieu de la couvrir. */
    .ak-cr-avec-barre { padding-bottom: 76px; }
    .ak-cr-avec-barre .ak-chat,
    .ak-cr-avec-barre .ak-preuve-sociale { bottom: calc(76px + var(--e3) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
    .ak-cr-o-tete > .ak-large { padding-block: var(--e6) var(--e7); }
    .ak-cr-fil { margin-bottom: var(--e5); }
    .ak-cr-o-meta { font-size: 15px; }
    .ak-cr-o-boutons .ak-cta { width: 100%; justify-content: center; }
    .ak-cr-o-carte { padding: var(--e4); }
}

/* ═══════════════════════════════════════════════════════════════════════
   LA FICHE PRODUIT REFAITE — 13/10/2026
   ═══════════════════════════════════════════════════════════════════════

   Portée de la maquette validée (`/maquettes/fiche-produit` dans l'ERP) puis
   « met ça en place ». Tout est préfixé `fp-` : rien ici ne touche une autre
   page. L'ancien habillage (`.ak-fiche`, `.ak-visuel`…) a été retiré le même
   soir ; voir « CE QUI RESTE DE L'ANCIENNE FICHE PRODUIT ».

   ── DES REQUÊTES DE CONTENEUR, COMME DANS LA MAQUETTE ──
   La fiche est un conteneur (`.fp`) : les bascules se lisent sur SA largeur.
   Revers connu : un conteneur devient le bloc conteneur des `position: fixed`
   qu'il contient. La barre du bas et la visionneuse vivent donc HORS de `.fp`.

   ── CE QUI COLLE SE CALE SOUS L'EN-TÊTE ──
   `.ak-entete` colle en haut (`--haut-entete`) : la galerie et la barre des
   rubriques démarrent sous lui, et les ancres s'arrêtent sous les deux.
   `--fp-haut` est sa hauteur MESURÉE par la page : 85 px sur ordinateur, 69
   sur téléphone, où `--haut-entete` laissait un jour de 16 px. */

:root {
    --wa:      #128C4A;   /* WhatsApp, lisible sur blanc */
    --wa-doux: #E7F6EC;
    --fp-nuit: #15110F;   /* les panneaux sombres fixes : tuile vedette, atelier, fiche d'identité */
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --wa: #4ADE80; --wa-doux: #0F2418; --fp-nuit: #0C0A09; }
}
:root[data-theme="dark"] { --wa: #4ADE80; --wa-doux: #0F2418; --fp-nuit: #0C0A09; }

.fp { container: fp / inline-size; padding-bottom: var(--e8); }
.fp :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 8px; }

/* Les rangs : l'encre et l'aplat de chaque barreau, déjà jetons du site. */
.fp-r5 { --e: var(--rang5-e); --f: var(--rang5-f); }
.fp-r4 { --e: var(--rang4-e); --f: var(--rang4-f); }
.fp-r3 { --e: var(--rang3-e); --f: var(--rang3-f); }
.fp-r2 { --e: var(--rang2-e); --f: var(--rang2-f); }
.fp-r1 { --e: var(--rang1-e); --f: var(--rang1-f); }
.fp-etoiles { display: inline-flex; gap: 1px; color: var(--e, var(--rang5-e)); }
.fp-etoiles i { display: inline-flex; }
.fp-etoiles .off { color: var(--g3); }

/* Le fil d'Ariane */
.fp-fil { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--g1); padding: 18px 0 16px; }
.fp-fil a:hover { color: var(--encre); }
.fp-fil b { color: var(--encre); font-weight: 600; }
.fp-fil i { font-style: normal; color: var(--g3); }

/* ═══ LE HAUT DE LA FICHE ═══ */
.fp-hero { display: grid; gap: 22px; padding-bottom: 56px; }
@container fp (min-width: 700px)  { .fp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } }
@container fp (min-width: 1080px) { .fp-hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; } }

/* — La galerie — */
.fp-galerie { display: grid; gap: 12px; position: relative; min-width: 0; }
@container fp (min-width: 700px)  { .fp-galerie { position: sticky; top: calc(var(--fp-haut, var(--haut-entete)) + 20px); } }
@container fp (min-width: 1080px) { .fp-galerie { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; } }
.fp-vignettes { display: none; }
@container fp (min-width: 700px)  { .fp-vignettes { display: flex; gap: 10px; order: 2; } }
@container fp (min-width: 1080px) { .fp-vignettes { flex-direction: column; order: 0; } }
.fp-vign { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 16px; border: 1px solid var(--trait); background: var(--fond-photo); overflow: hidden; padding: 0; cursor: pointer; opacity: .62; transition: opacity .2s, box-shadow .2s; }
.fp-vign:hover { opacity: 1; }
.fp-vign.est-active { opacity: 1; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 4px var(--encre); }
.fp-vign img { width: 100%; height: 100%; object-fit: cover; }
.fp-vign--id { opacity: .88; background: var(--fp-nuit); color: #F4F0ED; display: grid; place-items: center; font-weight: 800; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; text-align: center; }
.fp-vign--id b { display: block; font-size: 13px; color: #FFB38A; letter-spacing: 0; text-transform: none; }

.fp-scene { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--fond-photo); margin: 0 calc(var(--gouttiere) * -1); container: scene / inline-size; isolation: isolate; }
@container fp (min-width: 700px) { .fp-scene { margin: 0; border-radius: 28px; } }
.fp-piste { display: flex; height: 100%; transition: transform .42s var(--e-sortie); touch-action: pan-y; }
.fp-piste.est-tiree { transition: none; }
.fp-vue { flex: 0 0 100%; height: 100%; margin: 0; overflow: hidden; cursor: zoom-in; user-select: none; }
.fp-vue img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--e-sortie); transform-origin: var(--zx, 50%) var(--zy, 50%); -webkit-user-drag: none; }
.fp-vue.est-zoom img { transform: scale(2.1); }
.fp-scene__rang { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: 99px; background: var(--f); color: var(--e); font-size: 12.5px; font-weight: 800; box-shadow: 0 4px 14px -6px rgba(0,0,0,.25); transition: opacity .2s; }
.fp-scene__actions { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 8px; }
.fp-rond { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.9); color: #1A1512; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 18px -8px rgba(0,0,0,.35); cursor: pointer; transition: transform .16s; }
.fp-rond:active { transform: scale(.94); }
.fp-scene__bas { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.fp-pastille-verre { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 99px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #1A1512; font-size: 12.5px; font-weight: 700; border: 0; cursor: pointer; font-variant-numeric: tabular-nums; transition: opacity .2s; }
.fp-points { display: flex; gap: 6px; margin: 0 auto; }
.fp-points i { width: 7px; height: 7px; border-radius: 99px; background: rgba(26,21,18,.25); transition: width .25s var(--e-sortie), background .25s; }
.fp-points i.est-actif { width: 20px; background: #1A1512; }
.fp-scene__compte { display: none; }
@container fp (min-width: 700px) { .fp-points { display: none; } .fp-scene__compte { display: inline-flex; } }
.fp-fleche { position: absolute; top: 50%; z-index: 2; margin-top: -22px; opacity: 0; transition: opacity .2s, transform .16s; }
.fp-fleche--g { left: 14px; } .fp-fleche--d { right: 14px; }
.fp-fleche:disabled { opacity: 0 !important; pointer-events: none; }
@media (hover: hover) { .fp-scene:hover .fp-fleche { opacity: 1; } }
/* Sur la fiche d'identité, le rang est déjà écrit et il n'y a pas de photo à agrandir. */
.fp-scene.est-id .fp-scene__rang, .fp-scene.est-id [data-agrandir] { opacity: 0; pointer-events: none; }

/* — La fiche d'identité (dernière vue) — */
.fp-vue--id { cursor: default; }
.fp-id { position: relative; overflow: hidden; height: 100%; padding: 12cqi 7cqi 11cqi; display: flex; flex-direction: column; color: #F4F0ED;
    background: radial-gradient(90% 70% at 92% 4%, rgba(248,80,0,.42), transparent 60%), radial-gradient(60% 50% at 0% 100%, rgba(248,80,0,.12), transparent 70%), #15110F; }

/* LE PRODUIT EN FILIGRANE — 13/10/2026, sa demande : « mettre le produit en
   arrière-plan transparent pour qu'on puisse le voir ».
   ⚠ LES PHOTOS DU CATALOGUE N'ONT PAS DE FOND TRANSPARENT : elles sont posées
   sur un gris clair (231,231,231 sur l'article mesuré). Baisser simplement
   l'opacité dessinerait donc un RECTANGLE gris au milieu d'une carte presque
   noire. Trois réglages l'évitent :
     · `mix-blend-mode: screen` ne garde que ce qui est PLUS CLAIR que la carte —
       le fond gris devient une lueur, jamais un bloc ;
     · le masque radial dissout les quatre bords, il ne reste qu'un halo centré
       sur l'objet (les photos du catalogue le cadrent au centre) ;
     · `grayscale` empêche la couleur de l'objet de concurrencer l'orange de la
       charte, et `contrast` recreuse la silhouette que l'opacité aplatit.
   Le texte repasse au-dessus par `z-index` : la carte reste lisible, c'est elle
   qu'on partage. */
.fp-id__fond { position: absolute; left: 68%; top: 44%; width: 86%; height: auto;
    transform: translate(-50%, -50%); opacity: .13; pointer-events: none; user-select: none;
    filter: grayscale(1) contrast(1.15) brightness(.8); mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 18%, rgba(0,0,0,.34) 46%, transparent 74%);
            mask-image: radial-gradient(closest-side at 50% 50%, #000 18%, rgba(0,0,0,.34) 46%, transparent 74%); }
.fp-id > *:not(.fp-id__fond) { position: relative; z-index: 1; }
/* Le halo ne doit pas noyer le grand mot : un voile sombre le remonte. */
.fp-id__grand { text-shadow: 0 2px 14px rgba(21,17,15,.55); }
.fp-id__haut { display: flex; align-items: center; justify-content: space-between; }
.fp-id__haut img { width: 8cqi; height: 8cqi; }
.fp-id__haut span { font-size: 2.3cqi; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #A79E97; }
.fp-id__type { margin: auto 0 0; font-size: 2.6cqi; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FFB38A; }
.fp-id__grand { margin: .6cqi 0 0; font-size: 13.5cqi; line-height: .92; font-weight: 800; letter-spacing: -.045em; }
/* Le nom d'un article tient rarement en un mot : il descend d'un cran. */
.fp-id__grand--long { font-size: 7.4cqi; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.fp-id__pour { margin: 2cqi 0 0; font-size: 4.6cqi; font-weight: 600; color: #CFC6C0; }
.fp-id__traits { display: grid; grid-template-columns: 1fr 1fr; gap: 2.8cqi 4cqi; margin: 5cqi 0 0; padding-top: 4.5cqi; border-top: 1px solid rgba(244,240,237,.14); }
.fp-id__traits div { display: flex; flex-direction: column; gap: .6cqi; }
.fp-id__traits dt { font-size: 2.2cqi; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7E7570; }
.fp-id__traits dd { margin: 0; font-size: 3.6cqi; font-weight: 700; display: flex; align-items: center; gap: 1.4cqi; }
.fp-id__traits .fp-pt { width: 2.8cqi; height: 2.8cqi; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.fp-id__traits .fp-etoiles { --e: #E3B961; }
.fp-id__traits .fp-etoiles .off { color: #4C443F; }
.fp-id__traits .fp-etoiles svg { width: 3cqi; height: 3cqi; }
.fp-id__ref { margin: 5cqi 0 0; display: flex; justify-content: space-between; font-size: 2.4cqi; color: #7E7570; font-weight: 600; letter-spacing: .04em; }

/* — Le panneau d'achat — */
.fp-achat { display: flex; flex-direction: column; min-width: 0; }
.fp-surtitre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--g1); }
.fp-marque { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--trait-fort); color: var(--encre); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.fp-titre { margin: 12px 0 10px; font-size: 30px; line-height: 1.06; font-weight: 800; letter-spacing: -.028em; }
@container fp (min-width: 1080px) { .fp-titre { font-size: 42px; } }
.fp-sous { margin: 0 0 16px; font-size: 15.5px; line-height: 1.55; color: var(--encre-2); max-width: 52ch; text-wrap: pretty; }
.fp-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fp-puce { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: var(--f, var(--creme)); color: var(--e, var(--encre-2)); }
.fp-puce--lcd { --f: var(--lcd-f); --e: var(--lcd-e); }
.fp-puce--gar { --f: var(--vert-doux); --e: var(--gar-e); }
.fp-ref { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; border: 0; background: none; padding: 6px 4px; color: var(--g1); font-size: 12.5px; font-weight: 600; cursor: pointer; position: relative; }
.fp-ref:hover { color: var(--encre); }
.fp-copie-ok { position: absolute; bottom: calc(100% + 4px); right: 0; background: var(--encre); color: var(--blanc); font-size: 11.5px; font-weight: 700; padding: 4px 8px; border-radius: 6px; opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; pointer-events: none; white-space: nowrap; }
.est-copie .fp-copie-ok { opacity: 1; transform: none; }
.fp-filet { height: 1px; background: var(--trait); margin: 22px 0; }
.fp-prix { margin: 0; font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fp-prix s { font-size: 18px; font-weight: 600; color: var(--g2); letter-spacing: 0; }
@container fp (min-width: 1080px) { .fp-prix { font-size: 46px; } }
.fp-prix-note { margin: 8px 0 0; font-size: 13.5px; color: var(--g1); }
.fp-prix-note a, .fp-etiquette a, .fp-compat__corps a, .fp-faq details > div a, .fp-lien { color: var(--encre-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.fp-liv { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: var(--vert-doux); }
.fp-liv__ico { flex: 0 0 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--blanc); color: var(--vert); }
.fp-liv__txt { flex: 1; min-width: 0; }
.fp-liv__txt b { display: block; font-size: 15px; font-weight: 800; color: var(--encre); }
.fp-liv__txt span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--g1); line-height: 1.45; }
.fp-liv__txt span b { display: inline; font-size: inherit; color: var(--encre); font-variant-numeric: tabular-nums; }
.fp-liv__txt .fp-statut { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 3px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--g1); }
.fp-statut i { width: 7px; height: 7px; border-radius: 50%; background: var(--ambre); }
.fp-statut--stock i { background: var(--vert); }

.fp-etiquette { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 24px 0 10px; font-size: 14px; font-weight: 800; }
.fp-etiquette a, .fp-etiquette small { font-size: 13px; font-weight: 600; color: var(--g1); }
.fp-qualites { display: grid; gap: 8px; }
.fp-q { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 13px 16px; border-radius: 16px; border: 1.5px solid var(--trait-fort); color: var(--encre); transition: border-color .16s; }
.fp-q:hover { border-color: var(--g2); }
.fp-q.est-courante { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.fp-q__rond { grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--g3); }
.fp-q.est-courante .fp-q__rond { border: 6px solid var(--encre); }
.fp-q__nom { font-weight: 800; font-size: 15px; }
.fp-q__prix { font-weight: 800; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.fp-q__gar { grid-column: 3; text-align: right; font-size: 12.5px; color: var(--g1); font-weight: 600; }
.fp-q .fp-etoiles { grid-column: 2; }
.fp-q-note { display: flex; gap: 8px; align-items: center; margin: 8px 2px 0; font-size: 13px; color: var(--g1); }
.fp-teintes { display: flex; flex-wrap: wrap; gap: 14px 10px; }
.fp-teinte { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 68px; color: var(--encre); font-size: 12.5px; font-weight: 700; text-align: center; }
.fp-teinte i { width: 40px; height: 40px; border-radius: 50%; margin-bottom: 4px; box-shadow: inset 0 0 0 1px rgba(128,128,128,.35), 0 0 0 3px var(--blanc), 0 0 0 4px var(--trait-fort); transition: box-shadow .16s; }
.fp-teinte:hover i { box-shadow: inset 0 0 0 1px rgba(128,128,128,.35), 0 0 0 3px var(--blanc), 0 0 0 4px var(--g2); }
.fp-teinte.est-courante i { box-shadow: inset 0 0 0 1px rgba(128,128,128,.35), 0 0 0 3px var(--blanc), 0 0 0 5px var(--encre); }
.fp-teinte small { font-size: 11.5px; color: var(--g1); font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-segments { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-segment { display: inline-flex; flex-direction: column; gap: 1px; padding: 10px 16px; border-radius: 14px; border: 1.5px solid var(--trait-fort); color: var(--encre); font-weight: 800; font-size: 14px; transition: border-color .16s; }
.fp-segment:hover { border-color: var(--g2); }
.fp-segment small { font-size: 12px; color: var(--g1); font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-segment.est-courante { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.fp-config { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fp-fait { padding: 12px 14px; border-radius: 16px; background: var(--creme); }
.fp-fait small { display: block; font-size: 12px; color: var(--g1); font-weight: 600; }
.fp-fait b { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 14.5px; font-weight: 800; }
.fp-fait b i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(128,128,128,.4); }

.fp-compat { margin-top: 12px; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; }
.fp-compat summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.fp-compat summary::-webkit-details-marker { display: none; }
.fp-compat__ok { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--vert-doux); color: var(--vert); }
.fp-compat summary > span:not(.fp-compat__ok) { flex: 1; min-width: 0; font-size: 14px; color: var(--encre-2); }
.fp-compat summary > span b { color: var(--encre); }
.fp-compat summary > em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--encre); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.fp-compat summary > em svg { transition: transform .25s var(--e-sortie); }
.fp-compat[open] summary > em svg { transform: rotate(180deg); }
.fp-compat__corps { padding: 2px 16px 16px 56px; font-size: 13.5px; color: var(--g1); }
.fp-compat__corps ol { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; color: var(--encre-2); list-style: decimal; }
.fp-compat__corps a { color: var(--wa); }

.fp-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 24px; }
.fp-actions .fp-btn--orange { grid-column: 1 / -1; }
.fp-qte { display: flex; align-items: center; height: 56px; border: 1.5px solid var(--trait-fort); border-radius: 99px; padding: 0 6px; }
.fp-qte button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.fp-qte button:hover { background: var(--creme); }
.fp-qte input { width: 30px; border: 0; background: none; text-align: center; font-weight: 800; font-size: 16px; color: var(--encre); -moz-appearance: textfield; appearance: textfield; }
.fp-qte input::-webkit-outer-spin-button, .fp-qte input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fp-btn { height: 56px; padding: 0 22px; border-radius: 99px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 15.5px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: transform .16s var(--e-sortie), background .2s, box-shadow .2s; }
.fp-btn:active { transform: scale(.98); }
.fp-btn--encre { background: var(--encre); color: var(--blanc); }
.fp-btn--encre:hover { background: var(--encre-2); }
.fp-btn--orange { background: var(--orange); color: #fff; box-shadow: 0 12px 26px -14px rgba(248,80,0,.85); }
.fp-btn--orange:hover { background: var(--orange-fonce); }
.fp-ajoute { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--vert); }
.fp-ajoute a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.fp-wa { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 16px; border-radius: 18px; background: var(--wa-doux); color: var(--encre); transition: transform .16s; }
.fp-wa:hover { transform: translateY(-1px); }
.fp-wa__ico { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: #fff; }
:root[data-theme="dark"] .fp-wa__ico { color: #0C0A09; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fp-wa__ico { color: #0C0A09; } }
.fp-wa > span:not(.fp-wa__ico) { flex: 1; min-width: 0; font-size: 13px; color: var(--g1); line-height: 1.4; }
.fp-wa > span b { display: block; font-size: 14.5px; color: var(--encre); }
.fp-wa > svg { color: var(--wa); flex: 0 0 auto; }

.fp-assur { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 22px; background: var(--trait); border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; }
.fp-assur > div { display: flex; gap: 10px; align-items: flex-start; padding: 14px; background: var(--blanc); }
.fp-assur svg { flex: 0 0 auto; color: var(--orange-lisible); margin-top: 1px; }
.fp-assur b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.25; }
.fp-assur small { display: block; font-size: 12.5px; color: var(--g1); margin-top: 2px; line-height: 1.35; }
.fp-paie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; font-size: 12.5px; color: var(--g1); font-weight: 600; }
.fp-paie > span:first-child { margin-right: 4px; }
.fp-op { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--trait); color: var(--encre-2); font-weight: 700; }
.fp-op i { width: 9px; height: 9px; border-radius: 3px; }

/* ═══ LA BARRE QUI SUIT ═══ */
.fp-nav { position: sticky; top: var(--fp-haut, var(--haut-entete)); z-index: 20; background: var(--verre); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.fp-nav .ak-large { display: flex; align-items: center; gap: 16px; height: 56px; }
.fp-nav__liens { position: relative; display: flex; gap: 2px; height: 100%; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; margin: 0 calc(var(--gouttiere) * -1); padding: 0 var(--gouttiere); }
@container fp (min-width: 700px) { .fp-nav__liens { margin: 0; padding: 0; } }
.fp-nav__liens::-webkit-scrollbar { display: none; }
.fp-nav__liens a { display: flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--g1); white-space: nowrap; transition: color .2s; }
.fp-nav__liens a:hover, .fp-nav__liens a.est-actif { color: var(--encre); }
.fp-nav__trait { position: absolute; left: 0; bottom: -1px; height: 2px; width: 1px; background: var(--encre); border-radius: 2px; transform-origin: 0 0; transition: transform .32s var(--e-sortie); opacity: 0; }
.fp-nav__achat { display: none; align-items: center; gap: 12px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .22s, transform .22s var(--e-sortie); }
@container fp (min-width: 1080px) { .fp-nav__achat { display: flex; } }
.fp-nav.est-compact .fp-nav__achat { opacity: 1; transform: none; pointer-events: auto; }
.fp-nav__achat img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; background: var(--fond-photo); }
.fp-nav__achat span { display: flex; flex-direction: column; line-height: 1.2; }
.fp-nav__achat span b { font-size: 13.5px; font-weight: 800; }
.fp-nav__achat span small { font-size: 12px; color: var(--g1); font-weight: 600; }
.fp-nav__achat > b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fp-nav__achat .fp-btn { height: 40px; padding: 0 18px; font-size: 14px; }

/* ═══ LES SECTIONS ═══ */
.fp-sec { padding-top: 64px; scroll-margin-top: calc(var(--fp-haut, var(--haut-entete)) + 56px); }
@container fp (min-width: 1080px) { .fp-sec { padding-top: 88px; } }
.fp-oeil { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-lisible); }
.fp-sec h2 { margin: 8px 0 0; font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; }
@container fp (min-width: 1080px) { .fp-sec h2 { font-size: 38px; } }
.fp-chapo { margin: 10px 0 0; font-size: 16px; color: var(--g1); max-width: 62ch; text-wrap: pretty; }

/* — L'essentiel — */
.fp-bento { display: grid; gap: 12px; margin-top: 28px; }
@container fp (min-width: 700px)  { .fp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container fp (min-width: 1080px) { .fp-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(176px, auto); } }
.fp-tuile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 24px; background: var(--creme); min-height: 168px; overflow: hidden; }
.fp-tuile__ico { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--blanc); color: var(--encre); margin-bottom: auto; }
.fp-tuile small { font-size: 12.5px; font-weight: 700; color: var(--g1); margin-top: 18px; }
.fp-tuile b { font-size: 22px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.fp-tuile p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--g1); }
.fp-tuile--une { background: var(--fp-nuit); color: #F4F0ED; }
:root[data-theme="dark"] .fp-tuile--une { box-shadow: inset 0 0 0 1px var(--trait); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fp-tuile--une { box-shadow: inset 0 0 0 1px var(--trait); } }
@container fp (min-width: 700px)  { .fp-tuile--une { grid-column: span 2; } }
@container fp (min-width: 1080px) { .fp-tuile--une { grid-row: span 2; padding: 32px; } }
.fp-tuile--une::after { content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -18%; top: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(248,80,0,.45), transparent 65%); pointer-events: none; }
.fp-tuile--une .fp-tuile__ico { background: rgba(244,240,237,.1); color: #FFB38A; }
.fp-tuile--une small { color: #A79E97; }
.fp-tuile--une b { font-size: 52px; letter-spacing: -.045em; line-height: .95; }
@container fp (min-width: 1080px) { .fp-tuile--une b { font-size: 84px; } }
.fp-tuile.fp-r5, .fp-tuile.fp-r4, .fp-tuile.fp-r3, .fp-tuile.fp-r2, .fp-tuile.fp-r1 { background: var(--f); }
.fp-tuile.fp-r5 .fp-tuile__ico, .fp-tuile.fp-r4 .fp-tuile__ico, .fp-tuile.fp-r3 .fp-tuile__ico, .fp-tuile.fp-r2 .fp-tuile__ico, .fp-tuile.fp-r1 .fp-tuile__ico { color: var(--e); }
.fp-tuile--gar { background: var(--vert-doux); }
.fp-tuile--gar .fp-tuile__ico { color: var(--gar-e); }
.fp-tuile .fp-lien { color: inherit; }
.fp-mot { display: grid; gap: 12px; margin-top: 28px; padding: 28px; border-radius: 24px; border: 1px solid var(--trait); }
@container fp (min-width: 1080px) { .fp-mot { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; padding: 36px 40px; } }
.fp-mot__texte { font-size: 15.5px; color: var(--encre-2); line-height: 1.65; }
.fp-mot__texte p { margin: 0 0 10px; }
.fp-mot__texte ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; list-style: disc; }

/* — Les caractéristiques — */
.fp-groupes { display: grid; gap: 12px; margin-top: 28px; }
@container fp (min-width: 700px)  { .fp-groupes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container fp (min-width: 1080px) { .fp-groupes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fp-groupe { border: 1px solid var(--trait); border-radius: 24px; padding: 6px 22px 10px; }
.fp-groupe h3 { margin: 0; padding: 16px 0 10px; font-size: 15px; font-weight: 800; }
.fp-groupe dl { margin: 0; }
.fp-groupe dl > div { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--trait); font-size: 14.5px; min-height: 48px; }
.fp-groupe dt { color: var(--g1); }
.fp-groupe dd { margin: 0; font-weight: 700; text-align: right; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.fp-copier { border: 0; background: var(--creme); color: var(--g1); width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; position: relative; }
.fp-copier:hover { color: var(--encre); }

/* — L'échelle des qualités — */
.fp-echelle { margin-top: 28px; border: 1px solid var(--trait); border-radius: 24px; overflow: hidden; }
.fp-barreau { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom dispo" "gar gar"; gap: 12px 16px; align-items: center; padding: 18px 20px; border-top: 1px solid var(--trait); position: relative; }
.fp-barreau:first-child { border-top: 0; }
@container fp (min-width: 700px) { .fp-barreau { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "nom gar dispo"; padding: 20px 24px; } }
.fp-barreau.est-courant { background: var(--f); }
.fp-barreau.est-courant::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--e); }
.fp-barreau__nom { grid-area: nom; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fp-barreau__nom b { font-size: 16px; font-weight: 800; }
.fp-barreau__nom b span { color: var(--g1); font-weight: 600; }
.fp-barreau__gar { grid-area: gar; display: flex; align-items: center; gap: 12px; }
.fp-barreau__gar > i { flex: 1; height: 8px; border-radius: 99px; background: var(--trait); overflow: hidden; }
.fp-barreau__gar > i::before { content: ""; display: block; height: 100%; width: var(--w); background: var(--e); border-radius: 99px; }
.fp-barreau__gar > b { flex: 0 0 96px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fp-barreau__dispo { grid-area: dispo; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.fp-barreau__dispo a { font-weight: 800; font-size: 14.5px; display: inline-flex; align-items: center; gap: 4px; }
.fp-barreau__dispo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fp-barreau__dispo a small { color: var(--g1); font-weight: 600; font-size: 12.5px; }
.fp-barreau__dispo em { font-style: normal; font-size: 13px; color: var(--g2); }
.fp-ici { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--encre); color: var(--blanc); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.fp-legende { margin: 12px 4px 0; font-size: 13px; color: var(--g1); }

/* — La compatibilité — */
.fp-compatib { display: grid; gap: 12px; margin-top: 28px; }
@container fp (min-width: 700px) { .fp-compatib { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.fp-modele { padding: 28px; border-radius: 24px; background: var(--creme); display: flex; flex-direction: column; gap: 6px; }
.fp-modele__ok { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--vert); color: #fff; margin-bottom: 18px; }
:root[data-theme="dark"] .fp-modele__ok { color: #0C0A09; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fp-modele__ok { color: #0C0A09; } }
.fp-modele small { font-size: 13px; font-weight: 700; color: var(--g1); }
.fp-modele b { font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.fp-modele p { margin: 12px 0 0; font-size: 14px; color: var(--g1); }
.fp-verif { padding: 28px; border-radius: 24px; border: 1px solid var(--trait); }
.fp-verif h3 { margin: 0 0 16px; font-size: 18px; font-weight: 800; }
.fp-verif ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: fpe; }
.fp-verif li { counter-increment: fpe; display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--encre-2); }
.fp-verif li::before { content: counter(fpe); flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--creme); color: var(--encre); font-weight: 800; font-size: 14px; }
.fp-verif li b { color: var(--encre); }
.fp-verif .fp-wa { margin-top: 20px; }

/* — La pose à l'atelier — */
.fp-atelier { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 28px; overflow: hidden; background: var(--fp-nuit); color: #F4F0ED; position: relative; scroll-margin-top: calc(var(--fp-haut, var(--haut-entete)) + 72px); }
@container fp (min-width: 700px)  { .fp-atelier { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
@container fp (min-width: 1080px) { .fp-atelier { margin-top: 88px; } }
:root[data-theme="dark"] .fp-atelier { box-shadow: inset 0 0 0 1px var(--trait); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fp-atelier { box-shadow: inset 0 0 0 1px var(--trait); } }
.fp-atelier__photo { aspect-ratio: 4 / 3; overflow: hidden; }
@container fp (min-width: 700px) { .fp-atelier__photo { aspect-ratio: auto; order: 2; min-height: 420px; } }
.fp-atelier__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.fp-atelier__txt { padding: 32px 26px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
@container fp (min-width: 1080px) { .fp-atelier__txt { padding: 56px; } }
.fp-atelier .fp-oeil { color: #FF8A4C; }
.fp-atelier h2 { margin: 0; font-size: 30px; line-height: 1.08; font-weight: 800; letter-spacing: -.028em; color: #fff; }
@container fp (min-width: 1080px) { .fp-atelier h2 { font-size: 42px; } }
.fp-atelier p { margin: 0; font-size: 16px; line-height: 1.6; color: #CFC6C0; max-width: 46ch; }
.fp-atelier__liste { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; font-size: 14.5px; color: #F4F0ED; }
.fp-atelier__liste li { display: flex; gap: 10px; align-items: center; }
.fp-atelier__liste svg { color: #FF8A4C; }
.fp-atelier__bas { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 10px; }
.fp-atelier .fp-btn { white-space: normal; height: auto; min-height: 56px; padding: 14px 24px; text-align: center; line-height: 1.25; }
.fp-atelier__bas small { font-size: 13px; color: #A79E97; display: flex; gap: 6px; align-items: center; }

/* — Livraison, paiement, garantie — */
.fp-trois { display: grid; gap: 12px; margin-top: 28px; }
@container fp (min-width: 700px) { .fp-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fp-carte { padding: 26px; border-radius: 24px; border: 1px solid var(--trait); display: flex; flex-direction: column; gap: 8px; }
.fp-carte__ico { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--orange-doux); color: var(--orange-lisible); margin-bottom: 10px; }
.fp-carte h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.fp-carte p { margin: 0; font-size: 14.5px; color: var(--g1); line-height: 1.55; }
.fp-carte ul { margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid var(--trait); display: grid; gap: 8px; font-size: 14px; color: var(--encre-2); }
.fp-carte li { display: flex; gap: 8px; align-items: flex-start; }
.fp-carte li svg { flex: 0 0 auto; color: var(--vert); margin-top: 2px; }

/* — Questions & avis — */
.fp-qa { display: grid; gap: 24px; margin-top: 28px; }
@container fp (min-width: 1080px) { .fp-qa { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; align-items: start; } }
.fp-faq { border-top: 1px solid var(--trait); }
.fp-faq details { border-bottom: 1px solid var(--trait); }
.fp-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 2px; font-size: 16.5px; font-weight: 700; cursor: pointer; }
.fp-faq summary::-webkit-details-marker { display: none; }
.fp-faq summary i { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--creme); transition: transform .25s var(--e-sortie), background .2s; }
.fp-faq details[open] summary i { transform: rotate(45deg); background: var(--encre); color: var(--blanc); }
.fp-faq details > div { padding: 0 48px 22px 2px; font-size: 15px; line-height: 1.65; color: var(--g1); }
.fp-faq details > div a { color: var(--encre); font-weight: 700; }
.fp-avis { padding: 28px; border-radius: 24px; background: var(--creme); }
.fp-avis h3 { margin: 0; font-size: 18px; font-weight: 800; }
.fp-avis__note { display: flex; align-items: center; gap: 14px; margin: 18px 0 14px; }
.fp-avis__note > b { font-size: 44px; line-height: 1; font-weight: 800; color: var(--g3); }
.fp-avis__note > span { display: flex; flex-direction: column; gap: 4px; }
.fp-avis__note small { color: var(--g1); font-weight: 600; font-size: 13px; }
.fp-avis__note .fp-etoiles .off { color: var(--trait-fort); }
.fp-avis p { margin: 0 0 18px; font-size: 14.5px; color: var(--g1); line-height: 1.55; }
.fp-avis .fp-btn { width: 100%; height: auto; min-height: 50px; padding: 12px 18px; white-space: normal; text-align: center; background: var(--blanc); color: var(--encre); border: 1.5px solid var(--trait-fort); font-size: 14.5px; }
.fp-avis .fp-btn svg { color: var(--wa); flex: 0 0 auto; }

/* — Les rangées d'articles (la carte de la boutique, `partiels/carte-produit`) — */
.fp-entete-sec { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.fp-fleches { display: none; gap: 8px; }
@container fp (min-width: 700px) { .fp-fleches { display: flex; } }
.fp-fleches button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--trait-fort); background: var(--blanc); color: var(--encre); display: grid; place-items: center; cursor: pointer; }
.fp-fleches button:hover { border-color: var(--encre); }
.fp-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin-top: 28px; }
@container fp (min-width: 700px) { .fp-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; } }
.fp-rangee { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 12px; margin: 28px calc(var(--gouttiere) * -1) 0; padding: 0 var(--gouttiere) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gouttiere); scrollbar-width: none; overscroll-behavior-x: contain; }
.fp-rangee::-webkit-scrollbar { display: none; }
@container fp (min-width: 700px)  { .fp-rangee { grid-auto-columns: calc((100% - 3 * 16px) / 3.4); gap: 16px; margin: 28px 0 0; padding: 0 0 6px; scroll-padding: 0; } }
@container fp (min-width: 1080px) { .fp-rangee { grid-auto-columns: calc((100% - 4 * 16px) / 5); } }
.fp-rangee > * { scroll-snap-align: start; min-width: 0; }
.fp-grille > *, .fp-rangee > * { min-width: 0; }

/* ═══ LA BARRE DU BAS — téléphone et tablette ═══
   Fixe et HORS de `.fp` ; elle n'entre qu'une fois le bouton d'achat dépassé.
   Le chat et la bulle « quelqu'un vient de… » montent alors au-dessus d'elle,
   comme sur la page d'une offre d'emploi (`.ak-cr-avec-barre`). */
.fp-bas { display: none; }
@media (max-width: 1079px) {
    .fp-bas { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--verre);
        backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
        border-top: 1px solid var(--trait); transform: translateY(110%); transition: transform .28s var(--e-sortie); }
    .fp-bas.est-visible { transform: none; }
    /* La page garde la place de la barre : sans elle, le bas du pied de page
       (Conditions, Confidentialité, ©) passait dessous, une fois tout en bas. */
    .fp-page { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .fp-page .ak-chat, .fp-page .ak-preuve-sociale { transition: bottom .28s var(--e-sortie); }
    .fp-avec-barre .ak-chat,
    .fp-avec-barre .ak-preuve-sociale { bottom: calc(76px + var(--e3) + env(safe-area-inset-bottom, 0px)); }
}
.fp-bas__prix { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; min-width: 0; }
.fp-bas__prix b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fp-bas__prix small { font-size: 12px; color: var(--g1); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-bas .fp-btn { height: 50px; padding: 0 20px; font-size: 15px; }
.fp-bas__wa { flex: 0 0 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--wa-doux); color: var(--wa); }

/* — Le partage — */
.fp-partage { position: absolute; top: 64px; right: 12px; z-index: 4; min-width: 220px; padding: 6px; border-radius: 16px; background: var(--blanc); box-shadow: 0 18px 50px -12px rgba(0,0,0,.35); border: 1px solid var(--trait); display: none; }
.fp-partage.est-ouvert { display: grid; }
.fp-partage a, .fp-partage button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--encre); cursor: pointer; text-align: left; position: relative; }
.fp-partage a:hover, .fp-partage button:hover { background: var(--creme); }

/* — La visionneuse passe AU-DESSUS de tout — sa demande du 13/10 au soir.
   Elle et la bulle de discussion avaient le même rang (200), et la bulle,
   écrite plus loin dans la page, gagnait : on la voyait par-dessus la photo
   agrandie. Au-dessus aussi de la barre du bas et de la bulle « quelqu'un
   vient de… ». */
.fp-page .ak-loupe { z-index: 300; }

@media (prefers-reduced-motion: reduce) {
    .fp *, .fp *::before, .fp *::after, .fp-bas { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA COQUILLE REFAITE POUR LE TÉLÉPHONE ET LA TABLETTE — 14/10/2026

   Sortie de la maquette `/maquettes/site-v2` (ERP). Sa demande : « un design
   propre, haut niveau, orienté mobile et tablette — toutes les pages et tous
   les menus », puis « vas-y, mets ça en place ».

   ── POURQUOI CE BLOC EST EN FIN DE FICHIER ──

   La feuille est rangée DANS L'ORDRE DE LA PAGE, section par section. Ce
   chantier-ci n'est pas une section : il traverse l'en-tête, le menu, le pied
   et chaque page. Le découper en huit retouches dispersées aurait rendu le
   retour en arrière impossible. Il tient donc d'un seul tenant, et se retire
   d'un seul tenant. Les deux SEULES modifications faites ailleurs sont deux
   bornes de requête de média passées de 940 px à 699,98 px (lignes 968 et
   2407) : c'est ce qui rend la navigation au clair sur tablette, et aucune
   réécriture n'aurait pu le faire proprement depuis ici.

   ── LES CINQ CHOIX QUE J'AI TRANCHÉS, FAUTE DE RÉPONSE, TOUS RÉVERSIBLES ──

   1. BARRE DU BAS : variante A, « plate ». C'est la règle de la maison —
      neutre partout, orange à un seul endroit à la fois. Pour la variante B,
      ajouter `ak-bb--relief` sur le <nav> de `partiels/barre-bas.blade.php`.
   2. LE BANDEAU NOIR DISPARAÎT SOUS 700 PX. Il coûtait 44 px sur un écran de
      844, pour un numéro qui figure dans le menu, dans le pied, et derrière le
      bouton d'appel. Il est GARDÉ dès 700 px, où il ne coûte rien.
   3. « SUIVRE MA COMMANDE » n'est pas ajouté à la navigation : il n'existe
      aujourd'hui dans aucun menu, et l'y mettre demande une page qui n'est pas
      encore refaite. Signalé, pas fait.
   4. TABLETTE EN PAYSAGE : au-delà de 940 px, rien ne change — c'est la mise
      en page d'ordinateur, déjà en place.
   5. LES PAGES CARRIÈRES gardent leur habillage à part : elles ne passent pas
      par `layouts/site`, et les y faire entrer est un chantier à soi seul.

   ── CE QUI CHANGE, EN TROIS LIGNES ──

   · Sous 700 px : l'en-tête tombe de 128 px à 56, de sept cibles de 36 px à
     cinq de 44 ; le menu devient un panneau avec un voile ; une barre du bas
     porte les cinq destinations.
   · De 700 à 940 px : le burger DISPARAÎT. Les rubriques passent en clair et
     « Catégories » retrouve son panneau à colonnes — jusqu'ici la tablette
     affichait le menu du téléphone étiré, avec 60 % de vide à droite.
   · Au-delà : rien ne bouge.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La case des catégories : escamotée, pas en `display:none` — une case absente
   du rendu sort aussi de l'ordre de tabulation, et le panneau deviendrait
   inatteignable au clavier. Même traitement que `#ak-menu-ouvert`. */
#ak-cat-ouvert {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
}
#ak-cat-ouvert:focus-visible ~ .ak-entete .ak-cat-tap {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}
/* Il ne paraît que de 700 à 940 px (plus bas). Ailleurs, il n'existe pas. */
.ak-cat-tap { display: none; }

/* ── CE QUI N'EXISTE QU'AU TÉLÉPHONE — 16/10/2026 ──
   Fermés par défaut et rouverts dans le bloc « DEUX PANNEAUX, ET DES
   ACCORDÉONS », tout en bas. Sans cela, « Se connecter » paraîtrait en clair
   dans la barre du bureau, où le compte est déjà à droite, et le compte des
   rayons s'inviterait dans le déclencheur du panneau de la tablette. */
.ak-menu__connexion, .ak-cat-tap__nb, .ak-pn-barre { display: none; }

/* La barre du bas n'existe QUE sur téléphone. Déclarée cachée ici, montrée
   plus bas : l'oubli inverse l'aurait fait paraître sur les écrans où l'on a
   déjà tout en haut. */
.ak-bb { display: none; }

/* Le voile aussi : hors du téléphone, le menu ne s'ouvre pas en panneau. */
.ak-voile { display: none; }

/* ═══ DE 700 À 940 PX — LA TABLETTE ═══════════════════════════════════════
   Le gros du travail est fait par les deux bornes déplacées : à cette largeur,
   le menu et le panneau « Catégories » reprennent leur forme d'ordinateur. Il
   ne reste qu'à les faire tenir. */
@media (min-width: 700px) and (max-width: 940px) {

    /* Le menu doit loger cinq rubriques, quatre actions et la marque dans
       834 px. On resserre les écarts et la taille AVANT de renoncer à quoi que
       ce soit : une rubrique retirée est une page que le visiteur ne voit plus. */
    /* Même respiration qu'au téléphone : 72 + 10. */
    .ak-entete > .ak-large { gap: var(--e3); min-height: 82px; padding-block: 5px; }
    .ak-menu { gap: 2px; }
    .ak-menu > a, .ak-menu__declencheur { font-size: 14px; padding-inline: 8px; }

    /* « Nous contacter » a quitté la barre à TOUTE cette largeur depuis le
       15/10 (proposition T2) : la règle qui ne le retirait que sous 820 px
       vivait encore ici, avec son commentaire devenu faux. Retirée. */

    /* Le panneau des catégories est dessiné pour 900 px ; il en reste 786 à
       834. `max-width` le ramène déjà, mais ses colonnes de 178 px tombaient
       alors à trois par rangée avec un blanc à droite — 150 px en donnent
       quatre, qui est le nombre de rayons garnis. */
    .ak-pn-grille { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e4); }
    .ak-panneau { padding: var(--e4); }

    /* ── LE PANNEAU S'OUVRE À LA TAPE, PAS AU SURVOL ──
       C'est LE défaut que cette tranche de largeur introduisait : le panneau
       des catégories ne se montre qu'au `:hover`, et une tablette n'a pas de
       survol. Le panneau ne se serait jamais ouvert, et la tape sur le lien
       serait partie sur /boutique.

       Le lien cède donc la place à un <label> — même dessin, même place, mais
       il coche une case au lieu de naviguer. Le lien reste dans le document
       partout ailleurs : c'est lui que suivent les robots. */
    .ak-menu__declencheur { display: none; }
    .ak-cat-tap {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 44px;
        padding-inline: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--encre);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    #ak-cat-ouvert:checked ~ .ak-entete .ak-cat-tap { color: var(--orange-lisible); }
    #ak-cat-ouvert:checked ~ .ak-entete .ak-cat-tap .ak-menu__chevron { transform: rotate(180deg); }
    .ak-cat-tap .ak-menu__chevron { transition: transform var(--t-vif) var(--e-sortie); }

    /* ⚠ LE SURVOL EST DÉSARMÉ ICI, et il le faut : sur un ordinateur rétréci à
       cette largeur, le panneau se serait ouvert au passage de la souris ET à
       la tape, donc il se serait rouvert tout seul après qu'on l'a fermé. */
    .ak-menu__deroulant:hover .ak-panneau { opacity: 0; visibility: hidden; transform: translateY(6px); }
    #ak-cat-ouvert:checked ~ .ak-entete .ak-panneau,
    .ak-menu__deroulant:focus-within .ak-panneau { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ═══ SOUS 700 PX — LE TÉLÉPHONE ══════════════════════════════════════════ */
@media (max-width: 699.98px) {

    /* ── 1. LE BANDEAU NOIR S'EN VA ──
       44 px de haut sur un écran de 844, pour un numéro qu'on retrouve dans le
       menu, dans le pied et dans la barre d'appel. C'est le quart du chemin
       jusqu'au premier mot de la page. */
    .ak-bandeau { display: none; }

    /* ── 2. L'EN-TÊTE : 56 PX, CINQ CIBLES DE 44 ──
       Il en portait sept de 36, collées : le pouce en visait une et en touchait
       deux. Le panier descend dans la barre du bas, les favoris passent dans le
       menu du compte (voir `layouts/site.blade.php`). */
    /* 5 px au-dessus et au-dessous du contenu — sa demande du 15/10.
       ⚠ `box-sizing: border-box` étant global, la `min-height` comprend le
       remplissage : elle passe de 56 à 66 pour que les 56 px de contenu
       restent, sinon on aurait serré au lieu d'aérer. */
    .ak-entete > .ak-large { min-height: 66px; padding-block: 5px; gap: var(--e2); }
    .ak-entete__logo img { width: 36px; height: 36px; }

    /* 44 px, et c'est un plancher, pas une préférence : sous cette taille une
       cible se rate. La règle d'au-dessus les posait à 40. */
    .ak-action, .ak-burger, .ak-moi__bouton { width: 44px; height: 44px; }

    /* Les deux qui descendent. Visés par leur `aria-label` plutôt que par une
       classe ajoutée : le libellé EST déjà ce qui les distingue, et une classe
       de plus aurait pu partir à la première retouche du gabarit. */
    .ak-actions .ak-action[aria-label="Mes favoris"],
    .ak-actions .ak-action[aria-label="Panier"] { display: none; }

    /* ── 3. LE MENU DEVIENT UN PANNEAU ──
       Il s'ouvrait sur toute la largeur, sans rien derrière : on ne pouvait le
       refermer qu'en retrouvant le burger, et la page restait lisible dessous
       comme si on pouvait la toucher.

       ⚠ `visibility` ET NON `display`. La règle d'origine fermait le menu avec
       `display: none` — volontairement, pour le sortir de la tabulation. Mais
       une boîte qui n'existe pas ne se transforme pas : aucun glissement
       possible. `visibility: hidden` le sort AUSSI de la tabulation, et lui,
       s'anime. */
    .ak-menu {
        display: flex;
        visibility: hidden;
        width: min(88%, 360px);
        right: auto;
        /* ⚠ Suit la hauteur de l'en-tête : 66 px depuis le 15/10. Laissée à 56,
           le panneau dépassait l'écran de 10 px par le bas. */
        height: calc(100dvh - 66px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--e3) var(--gouttiere) var(--e7);
        border-bottom: none;
        border-right: 1px solid var(--trait);
        transform: translateX(-100%);
        transition: transform var(--t-moyen) var(--e-sortie),
                    visibility var(--t-moyen) var(--e-sortie);
    }
    #ak-menu-ouvert:checked ~ .ak-entete .ak-menu { visibility: visible; transform: none; }
    /* La recherche ouverte referme le menu — la règle existait, écrite en
       `display`. Elle est réécrite dans le même langage que ci-dessus, sinon
       les deux se contredisent et le menu reste ouvert derrière le champ. */
    #ak-recherche-ouverte:checked ~ .ak-entete .ak-menu {
        visibility: hidden; transform: translateX(-100%);
    }

    /* Des rubriques qu'un pouce atteint : 52 px, et le filet orangé du panneau
       « Catégories », qui était resté gris ici. */
    .ak-menu > a, .ak-menu__declencheur {
        min-height: 52px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--trait-or);
        font-size: 15.5px;
    }

    /* ── 4. LE VOILE ──
       Sous l'en-tête (z-index 100) et sous le panneau, au-dessus de tout le
       reste. Il ne grise donc pas la barre du haut : le burger devenu croix
       doit rester net, c'est lui qui referme. */
    .ak-voile {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99;
        background: rgba(26, 21, 18, .42);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--t-moyen) var(--e-sortie),
                    visibility var(--t-moyen) var(--e-sortie);
    }
    #ak-menu-ouvert:checked ~ .ak-voile { opacity: 1; visibility: visible; }

    /* Le burger dit ce qu'un second appui va faire. */
    .ak-burger__croix { display: none; }
    #ak-menu-ouvert:checked ~ .ak-entete .ak-burger__traits { display: none; }
    #ak-menu-ouvert:checked ~ .ak-entete .ak-burger__croix  { display: block; }

    /* ── 5. LA BARRE DU BAS ──
       Cinq destinations, comme l'application. `env(safe-area-inset-bottom)`
       n'est pas une précaution d'école : sur un iPhone sans bouton, le trait
       du bas mange 34 px, et les libellés tomberaient dessous. */
    .ak-bb {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 150;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: color-mix(in srgb, var(--blanc) 94%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--trait);
    }
    .ak-bb__e {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--g1);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color var(--t-vif) var(--e-sortie);
    }
    /* `--orange-lisible` et non `--orange` : mesuré, #F85000 ne donne que
       3,42:1 sur blanc, et ce libellé fait 10,5 px. C'est le jeton qui existe
       exactement pour ça, et il bascule la nuit. */
    .ak-bb__e[aria-current="page"] { color: var(--orange-lisible); }
    .ak-bb__ico { position: relative; display: grid; place-items: center; }
    .ak-bb__mot { font-size: 10.5px; font-weight: 600; letter-spacing: -.01em; }
    .ak-bb__pastille {
        position: absolute;
        top: -4px;
        inset-inline-end: -8px;
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--orange);
        color: var(--sur-couleur);
        font-size: 9.5px;
        font-weight: 700;
        font-style: normal;
        line-height: 15px;
        text-align: center;
    }

    /* ── 6. CE QUE LA BARRE RECOUVRIRAIT ──
       Le pied de page finissait sous elle, et les deux bulles flottantes se
       posaient dessus. Chacun remonte d'exactement sa hauteur. */
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
    .ak-chat { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
    .ak-preuve-sociale { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

    /* La barre d'action collante des pages qui en ont une (panier, fiche
       produit) se pose SUR la barre du bas, jamais dessous. */
    .ak-barre-collante, .ak-action-collante { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* Le mouvement réduit : le panneau n'arrive plus en glissant, il est là.
   Posé hors de la requête de média pour couvrir les deux largeurs. */
@media (prefers-reduced-motion: reduce) {
    .ak-menu, .ak-voile { transition: none; }
}

/* À l'impression, ni barre du bas ni voile — la règle existante retire déjà le
   chat, le bandeau et le thème, celle-ci complète la liste. */
@media print {
    .ak-bb, .ak-voile { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   L'EN-TÊTE REPRIS AU PIXEL — 15/10/2026

   Sortie de la maquette `/maquettes/site-entete`. Ses quatre réponses :
     1 · téléphone  → proposition A, épuré (burger · logo · loupe · thème)
     2 · tablette   → proposition T2, le compte devient un bouton NOMMÉ
     3 · le logo    → 39 px (36 + 3)
     4 · le thème   → reste dans la barre, comme en A

   ── CE QUI EST MESURÉ, ET QUI COMMANDE TOUT LE BLOC ──

   Relevé en ligne le 15/10 à 390 px : burger 24→68 · logo 129→165 ·
   icônes 226→366. Le centre du logo tombait à 147 pour un milieu d'écran à
   195 : 48 px de travers.

   ⚠ CE N'ÉTAIT PAS UN RÉGLAGE RATÉ, et c'est pour ça qu'on ne le corrige pas
   avec une marge. Le logo était posé en `margin-inline: auto` : il se centrait
   ENTRE ses deux voisins, 44 px de burger d'un côté, 140 px d'icônes de
   l'autre. Les 48 px sont exactement la moitié de la différence.

   ⚠ ET RETIRER LE PROFIL N'AURAIT PAS SUFFI : les icônes tombent à 92 px, le
   logo se serait recalé à 171 — encore 24 px de travers. Les deux demandes ne
   se remplacent pas, elles s'ajoutent. D'où un logo SORTI DU FLUX et centré
   sur `.ak-entete`, qui fait toute la largeur de l'écran.

   Bénéfice qu'on ne voit qu'avec le temps : il ne bougera plus JAMAIS. Une
   icône qui s'ajoute, une pastille de panier qui apparaît — le logo reste à
   195. Avec `margin: auto`, il glissait à chaque fois.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le mot du bouton de compte n'existe que sur tablette. Déclaré caché ici :
   l'oubli inverse l'aurait fait paraître sur téléphone et sur ordinateur. */
.ak-action__mot { display: none; }

/* ═══ TÉLÉPHONE — PROPOSITION A ═══════════════════════════════════════════ */
@media (max-width: 699.98px) {

    /* ── LE LOGO, AU MILIEU DE L'ÉCRAN ──
       Le parent de référence est `.ak-entete` et non `.ak-large` : l'en-tête
       occupe toute la largeur (0→390), le conteneur a des gouttières. Et
       `.ak-entete` est déjà `position: sticky`, donc déjà un bloc de
       référence — rien à ajouter ailleurs, donc rien à casser : le menu et la
       recherche, qui s'ancrent eux aussi dessus, ne bougent pas d'un pixel. */
    .ak-entete__logo {
        position: absolute;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        margin-inline: 0;        /* annule le `auto` qui le faisait pencher */
    }
    /* 36 + 3, sa décision. */
    .ak-entete__logo img { width: 39px; height: 39px; }
    /* Le survol agrandissait déjà l'image ; la translation du parent ne doit
       pas être écrasée, d'où un `scale` posé sur l'IMAGE et non sur le lien. */
    .ak-entete__logo:hover img { transform: scale(1.06); }

    /* ── LES ICÔNES REPRENNENT LE BORD ──
       C'était le `margin-inline: auto` du logo qui poussait les actions à
       droite. Il n'est plus dans le flux : sans cette ligne, elles seraient
       venues se coller au burger. Le défaut ne se voit qu'au rendu. */
    .ak-actions { margin-inline-start: auto; }

    /* ── LE PROFIL S'EN VA ──
       Sa demande. Il reste atteignable : « Compte » est la 5ᵉ entrée de la
       barre du bas, posée le 14/10. Visés par leur `aria-label` plutôt que par
       une classe : le libellé EST ce qui les distingue. */
    .ak-actions .ak-action[aria-label="Se connecter"],
    .ak-actions .ak-moi { display: none; }
}

/* ═══ TABLETTE — PROPOSITION T2 ═══════════════════════════════════════════ */
@media (min-width: 700px) and (max-width: 940px) {

    /* « Nous contacter » quitte la barre pour laisser la place au bouton
       nommé — c'est le prix de T2, et il était annoncé. La rubrique reste
       dans le pied de page et dans le menu, sur chaque page.
       ⚠ Cette règle remplace celle du 14/10 qui ne la retirait que sous
       820 px ; elle vaut désormais sur toute la tranche. */
    .ak-menu > a[href$="/nous-contacter"] { display: none; }

    /* Les favoris quittent la barre : ils vivent derrière la connexion, donc
       dans le compte — où le menu du 14/10 les a déjà mis. */
    .ak-actions .ak-action[aria-label="Mes favoris"] { display: none; }

    /* ── LE COMPTE PREND SON NOM ──
       Un rond muet ne dit pas ce qu'il ouvre. Le même contrôle, avec son mot :
       « Se connecter » quand personne ne l'est, « Mon compte » sinon.
       L'avatar reste chez celui qui est connecté — c'est lui qui dit qu'on
       est reconnu, et une icône générique le perdrait. */
    .ak-action__mot { display: inline; white-space: nowrap; }

    .ak-actions .ak-action--compte {
        width: auto;
        height: 40px;
        gap: 7px;
        padding-inline: 14px;
        grid-auto-flow: column;
        border-radius: var(--r-pastille);
        /* ⚠ `--fond-sombre` ET NON `--encre`. L'encre bascule la nuit (#F4F0ED) ;
           posée en FOND sous du blanc, elle donnait 1,13:1 — illisible. Ce
           jeton-ci est une SURFACE qui reste sombre dans les deux modes.
           Mesuré après correction : 16,4:1 le jour comme la nuit. */
        background: var(--fond-sombre);
        color: var(--sur-couleur);
        font-size: 13.5px;
        font-weight: 700;
        margin-inline-start: 4px;
    }
    .ak-actions .ak-action--compte:hover { background: var(--fond-sombre-2); color: var(--sur-couleur); }
    .ak-actions .ak-action--compte svg { width: 18px; height: 18px; }

    .ak-moi__bouton {
        width: auto;
        height: 40px;
        gap: 8px;
        padding: 0 14px 0 4px;
        grid-auto-flow: column;
        align-items: center;
        border-radius: var(--r-pastille);
        /* Même fond que le bouton du visiteur déconnecté : les deux disent la
           même chose au même endroit, ils ne peuvent pas être de deux couleurs.
           Et surtout — l'orange sur orange-doux ne donnait que 3,10:1 : ça
           passait pour UNE INITIALE, pas pour un mot. */
        background: var(--fond-sombre);
        color: var(--sur-couleur);
        box-shadow: none;
        font-size: 13.5px;
        font-weight: 700;
    }
    .ak-moi:hover .ak-moi__bouton,
    .ak-moi__bouton:focus-visible { background: var(--fond-sombre-2); box-shadow: none; }
    /* L'avatar garde sa rondeur DANS la pastille : étiré, il déformerait le
       visage — c'est la première chose qu'on remarque sur une photo. */
    .ak-moi__bouton img,
    .ak-moi__bouton > span:first-child {
        width: 32px; height: 32px;
        border-radius: 50%;
        display: grid; place-items: center;
        object-fit: cover;
    }
    /* L'initiale reprend le rond orange qu'elle avait AVANT la pastille :
       sans lui, elle se dissoudrait dans le fond sombre. */
    .ak-moi__bouton > span:first-child {
        background: var(--orange-doux);
        color: var(--orange-lisible);
        font-size: 14px;
    }

    /* ⚠ SOUS 790 PX, LE MOT REPART. Mesuré : marque 56 + navigation 364 +
       trois icônes 132 + bouton nommé 130 = 706 px pour 652 disponibles à
       700 px. Le bouton redevient rond — la barre tient, et rien ne déborde.
       C'est la seule largeur où T2 cède, et elle ne correspond à aucune
       tablette courante (l'iPad commence à 768). */
    @media (max-width: 789.98px) {
        .ak-action__mot { display: none; }
        .ak-actions .ak-action--compte {
            width: 44px; padding-inline: 0; gap: 0;
            background: transparent; color: var(--encre);
            margin-inline-start: 0;
        }
        .ak-actions .ak-action--compte:hover { background: var(--creme); color: var(--orange); }
        .ak-actions .ak-action--compte svg { width: 22px; height: 22px; }
        .ak-moi__bouton { width: 38px; height: 38px; padding: 0; gap: 0; }
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE HÉROS DE L'ACCUEIL, SUR TÉLÉPHONE — 15/10/2026

   Sortie de la maquette `/maquettes/site-heros`, proposition **C1**, avec ses
   cinq corrections : marge externe de 15 px et coins arrondis sur l'image,
   titre sur trois lignes et plus grand, phrase sous le titre retirée, bloc de
   preuve portant les réparations et les clients, bouton plus petit.

   ── CE QUI A ÉTÉ MESURÉ AVANT, ET QUI JUSTIFIE TOUT ──

   Le héros faisait **1 134 px, soit 1,34 écran**. La photo — la meilleure image
   du site — ne commençait qu'à 642 px : sur un écran de 844, on n'en voyait que
   les 200 premiers pixels, et il fallait défiler pour la découvrir.
   Ici, le héros fait EXACTEMENT un écran, et la photo occupe tout ce qui reste.

   ── POURQUOI LA TAILLE DU TITRE SUIT L'ÉCRAN ──

   Les trois lignes sont POSÉES (`<br>` dans la vue, sa demande). Une taille
   figée aurait donc débordé : « N°1 de la réparation » est la ligne la plus
   longue. Mesuré ligne par ligne de 320 à 430 px — trois lignes, aucun
   débordement. C'est la seule façon d'avoir à la fois des coupures choisies et
   un titre qui tient partout.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 699.98px) {

    /* ⚠ `--h-entete` VAUT 84 PX DANS LES JETONS, ET LA BARRE EN FAIT 66 ICI.
       Le héros remonte sous l'en-tête de cette valeur et la rend en
       remplissage : avec 84, il y avait 18 px de décalage, invisibles tant
       qu'on ne calculait pas une hauteur au pixel. Redéfini SUR LE HÉROS et
       non sur `:root` : la variable sert aussi à des blocs collants ailleurs,
       et ce chantier-ci ne les concerne pas. */
    .ak-heros {
        --h-entete: 66px;
        height: 100dvh;
    }
    /* Le semis de points en haut à droite : il tombait derrière le titre.
       Sur un écran de 390 px, il salit au lieu de décorer. */
    .ak-heros::before { display: none; }

    /* UNE COLONNE QUI REMPLIT L'ÉCRAN. `display: contents` sur la boîte du
       discours : ses enfants deviennent enfants de la colonne, sans toucher
       au balisage — donc sans rien casser sur l'ordinateur. */
    .ak-heros > .ak-large {
        display: flex;
        flex-direction: column;
        height: 100%;
        gap: 0;
        padding-block: var(--e5) 0;
        /* ⚠ La règle de base pose `align-items: center` pour les deux colonnes
           de l'ordinateur. En colonne, « center » interdit l'étirement : la
           photo se laissait dimensionner par son rapport 4/5 (295 px au lieu
           de 360) et les marges négatives restaient sans effet. */
        align-items: stretch;
        /* 18 et non 24 : c'est la gouttière sur laquelle le titre a été
           mesuré. Avec 24, il restait 272 px utiles à 320 px d'écran pour une
           ligne qui en demande 275 — quatre lignes au lieu de trois. */
        padding-inline: 18px;
    }
    .ak-heros > .ak-large > div:first-child { display: contents; }

    /* ⚠ DANS UNE COLONNE FLEX, UN ENFANT `inline-flex` S'ÉTIRE sur toute la
       largeur. Sans ces `align-self`, la pastille et le bouton refaisaient
       390 px — exactement ce qu'on cherchait à retirer. */
    .ak-heros__oeil { align-self: flex-start; margin-bottom: var(--e3); }

    .ak-heros h1 {
        font-size: clamp(33px, 11.6vw, 52px);
        line-height: 1.04;
        letter-spacing: -.03em;
        margin-bottom: var(--e5);
    }

    /* LE BOUTON PLUS PETIT — sa demande. Il quitte la pleine largeur (une
       règle plus haut la lui donnait sous 560 px) : un bouton qui barre
       l'écran pèse autant que le titre. */
    .ak-heros__boutons { margin-top: 0; gap: var(--e4); align-self: flex-start; }
    .ak-heros__boutons .ak-cta { width: auto; height: 44px; padding-inline: var(--e4);
                                 font-size: 14.5px; justify-content: center; }
    /* « Voir la boutique » descend dans la barre du bas, où elle vit déjà en
       permanence. Deux appels à l'action l'un sur l'autre se partagent
       l'attention ; celui qu'on garde fait vivre l'atelier. */
    .ak-heros__boutons .ak-lien-fort { display: none; }

    /* ── LE BLOC DE PREUVE ──
       Le dessin ne change pas, seulement l'échelle : 48 px de portrait dans
       un héros d'une page entière, 34 px dans un héros d'un écran. */
    .ak-heros .ak-preuve { margin-top: var(--e5); gap: var(--e3); }
    .ak-heros .ak-preuve__gens > * { width: 34px; height: 34px; border-width: 2px; border-color: var(--creme); }
    .ak-heros .ak-preuve__gens > * + * { margin-left: -11px; }
    .ak-heros .ak-preuve__plus { font-size: 15px; }
    .ak-heros .ak-preuve__mot strong { font-size: 15.5px; letter-spacing: -.012em; }
    .ak-heros .ak-preuve__mot small { font-size: 12.5px; }
    .ak-heros .ak-preuve__ligne { font-size: 13.5px; line-height: 1.45; }

    /* ── LA PHOTO PREND TOUT CE QUI RESTE ──
       `flex: 1` et `min-height: 0` : sans le second, un enfant flex refuse de
       descendre sous la hauteur de son contenu, et la colonne dépassait
       l'écran. Le défaut ne se voit qu'une fois la page mesurée.

       ⚠ LA MARGE DE 15 PX SE CALCULE, elle ne s'écrit pas : le conteneur a
       déjà une gouttière de 24 px, il faut donc ressortir l'image de 9. Écrite
       en dur, le jour où la gouttière change, la marge devient fausse sans que
       personne ne s'en aperçoive. */
    .ak-scene {
        flex: 1;
        min-height: 0;
        max-width: none;
        /* ⚠ `width: 100%` VIENT DE LA RÈGLE DE BASE, ET IL ANNULE LES MARGES
           NÉGATIVES. Un élément flex dont la taille transversale est DÉFINIE
           ne s'étire plus : il restait à 354 px, collé à 18, et l'image ne
           ressortait pas de ses 3 px. Mesuré trois fois avant de comprendre —
           la marge calculée était bien de −3 px, elle n'avait simplement aucun
           effet. En `auto`, l'élément s'étire et les marges reprennent la main. */
        width: auto;
        /* 15 px depuis le bord de l'écran : le conteneur en a 18, l'image
           ressort donc de 3. Les deux valeurs sont liées — si la gouttière du
           héros change, celle-ci doit changer avec. */
        margin: var(--e5) -3px 0;
    }
    /* L'aplat orange décalé et le halo : ils débordaient de l'image une fois
       celle-ci posée à 15 px du bord, et ils avaient été dessinés pour une
       photo centrée dans une colonne. */
    .ak-scene::before, .ak-scene::after { display: none; }
    .ak-scene__photo {
        height: 100%;
        aspect-ratio: auto;
        border-radius: 22px;
    }
    /* Les deux cartouches flottantes quittent le héros : elles disaient
       « 2 719 pièces en stock » et « devis avant intervention », que la
       section des services et le bandeau du haut disent déjà. Sur un héros
       d'un seul écran, elles couvraient le visage du technicien. */
    .ak-flottant { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ⚠ `.ak-preuve` DÉSIGNE DEUX COMPOSANTS DIFFÉRENTS — trouvé le 15/10/2026.

   · Le bloc de preuve du HÉROS (ligne ~2649), avec ses portraits qui se
     chevauchent, posé dans la page.
   · La bulle flottante « quelqu'un vient de… » (ligne ~9725), qui arrive en
     bas de l'écran comme une notification.

   La seconde est écrite PLUS BAS, donc elle gagne : le bloc du héros héritait
   de son fond blanc, de son ombre, de son rayon — et surtout de son
   `opacity: 0; transform: translateY(14px)`, qui attend une classe
   `.est-vue` que le héros ne reçoit jamais.

   ⚠ LE DÉFAUT NE SE VOYAIT PAS : l'animation de révélation du héros
   rallumait l'opacité au passage. Mais `prefers-reduced-motion: reduce`
   désarme cette animation — et alors le bloc restait à opacité 0, donc
   INVISIBLE. Mesuré au navigateur : opacité 1 en temps normal, 0 en mouvement
   réduit. Il était là avant ce chantier, avec « 18 marques ».

   On rend donc au héros ce qui lui appartient. Renommer l'une des deux classes
   serait plus propre, mais touche deux composants et se demande d'abord.
   ═══════════════════════════════════════════════════════════════════════════ */
.ak-heros .ak-preuve {
    opacity: 1;
    transform: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    pointer-events: auto;
}
/* ═══════════════════════════════════════════════════════════════════════════
   LES ÉCRANS COURTS — 15/10/2026, trouvé à la vérification.

   « Le héros tient en un écran » suppose qu'il y ait un écran à remplir. Sur un
   appareil bas, le compte ne tombe plus : la pastille, un titre de quatre
   lignes, le bouton et le bloc de preuve prennent à eux seuls ~430 px, et
   c'est la photo — le seul élément élastique — qui paie la différence.

   MESURÉ : à 320×568, la photo tombait à 34 px de haut et **zéro visible**, la
   barre du bas couvrant les 61 derniers pixels. Le héros n'avait plus d'image
   du tout. À 375×667 — un iPhone SE ou 8, courant ici — il n'en restait que
   92 px.

   Entre « un seul écran » et « une photo », on garde la photo : sous 740 px de
   haut, le héros a le droit de déborder un peu. C'est un arbitrage, pas un
   réglage — et il ne concerne QUE les écrans courts : à 390×844 et au-dessus,
   rien ne change, le héros fait toujours un écran pile.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 699.98px) and (max-height: 740px) {
    .ak-heros { height: auto; min-height: 100dvh; }
    .ak-heros > .ak-large { height: auto; min-height: calc(100dvh - var(--h-entete));
                            padding-block: var(--e3) 0; }
    /* `flex: none` et une hauteur ferme : sans conteneur à remplir, `flex: 1`
       laisserait la photo reprendre son rapport 4/5 et le héros s'envolerait. */
    .ak-scene { flex: none; height: 220px; margin-top: var(--e3); }

    /* ── CE QU'ON SACRIFIE POUR QUE LA PHOTO REMONTE ──
       Faire déborder le héros ne suffisait pas : la photo restait sous le pli.
       On rend donc de la place en haut.
       · La pastille « AK Centre de Réparation » part : 60 px pour une mention
         que le logo, le pied et l'adresse disent déjà.
       · Le titre descend d'un cran — il garde ses quatre lignes, elles sont
         simplement plus courtes.
       Ensemble, ils rendent ~110 px à la photo. */
    .ak-heros__oeil { display: none; }
    .ak-heros h1 { font-size: clamp(26px, 8.8vw, 34px); margin-bottom: var(--e4); }
    .ak-heros .ak-preuve { margin-top: var(--e4); }
}

/* LE FOND BLANC SUR ORDINATEUR — retiré le 19/10/2026, sa décision : « retire
   le fond blanc ». Jusque-là, une règle au-dessus de 700 px le remettait,
   parce que le retirer était une décision de design pas encore prise. */

/* ═══════════════════════════════════════════════════════════════════════════
   LA FRISE DES MARQUES — 15/10/2026, seconde version

   Sa correction : « afficher tous les logos en même temps sur mobile, et sur
   ordinateur ça scrolle comme hier ».

   Donc : AU-DESSUS DE 700 PX ON NE TOUCHE À RIEN — la frise défile comme
   avant, avec la règle d'origine écrite plus haut dans ce fichier. Elle porte
   simplement 21 logos au lieu de 16.

   SOUS 700 PX, elle cesse d'être une piste : la seconde copie disparaît, la
   première passe à la ligne, et les 21 logos sont tous là, sans mouvement.

   ⚠ POURQUOI `flex-wrap` ET NON UNE GRILLE. 21 ne se divise proprement par
   aucun nombre de colonnes raisonnable : à quatre colonnes il reste un logo
   seul sur la dernière ligne. En passage à la ligne centré, la dernière ligne
   se centre d'elle-même, et le compte peut changer sans que rien ne casse.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 699.98px) {
    .ak-marques > .ak-large { padding-block: var(--e5); }
    .ak-marques__piste {
        overflow: visible;
        /* Le fondu des bords n'a plus d'objet : rien ne sort du cadre. */
        -webkit-mask-image: none;
        mask-image: none;
    }
    .ak-marques__lot {
        /* ⚠ `flex: none` EST CE QUI FAIT MARCHER LE DÉFILEMENT, et c'est aussi
           ce qui empêchait le passage à la ligne : un élément flex qui refuse
           de rétrécir garde sa largeur maximale — 21 logos sur une ligne, soit
           1 554 px, et toute la page débordait. Mesuré : la fenêtre annonçait
           1 440 px au lieu de 360. Il doit donc reprendre la largeur de son
           conteneur pour avoir une raison de se replier. */
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: center;
        /* 8 px et non 12 : à 12, cinq cases de 60 demandent 348 px pour les
           342 disponibles à 390 — on tombait à QUATRE par rangée, donc quatre
           rangées, et la bande passait de 206 à 273 px. Quatre pixels. */
        gap: var(--e2);
        animation: none;
    }
    /* La copie ne sert qu'au défilement sans couture. Ici, elle ferait
       quarante-deux logos. */
    .ak-marques__lot + .ak-marques__lot { display: none; }
    /* ⚠ LES FICHIERS SONT CARRÉS (300 × 300), LA CASE NE L'ÉTAIT PAS.
       Avec `object-fit: contain`, un logo carré dans une case de 72 × 34 ne se
       peint qu'en 34 × 34 : il occupait 47 % de sa case, et la moitié de la
       largeur restait vide. Mesuré sur les treize. Une case plus HAUTE et
       moins LARGE donne le même encombrement et un logo bien plus grand.
       Seul Nokia n'est pas carré (300 × 169) ; 60 de large lui suffisent. */
    .ak-marques__lot img { width: 60px; height: 50px; object-fit: contain; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES VITRINES : LA CATÉGORIE À GAUCHE, LES PRODUITS À DROITE — 15/10/2026

   Sa demande, puis « celui du milieu inversé ».

   ── CE QUI SE PASSAIT ──
   La composition existait déjà, mais sous 680 px le visuel passait EN HAUT,
   pleine largeur, et les deux articles en dessous : les trois vitrines
   faisaient alors 1 484 px de haut sur un téléphone.

   ⚠ CE PARTIEL SERT AUSSI À /boutique. Le changement y vaut donc aussi —
   c'est voulu, les deux pages montrent la même chose et doivent la montrer
   pareil.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    /* 44 % n'est pas choisi au hasard : sous 150 px l'image de catégorie ne
       montre plus rien, et au-dessus de 170 les deux cartes deviennent trop
       étroites pour leur prix. */
    .vt-duo { grid-template-columns: 44% minmax(0, 1fr); gap: var(--e2); }
    .vt-visuel {
        grid-row: 1 / span 2;
        grid-column: auto;
        min-height: 150px;
        aspect-ratio: auto;     /* annule le 16/9 de la règle d'empilement */
    }
    /* Les articles redeviennent des lignes : nom et prix à gauche, vignette à
       droite — c'est la composition d'origine, celle qui se lit en diagonale. */
    .vt-art { flex-direction: row; align-items: center; gap: var(--e2); }
    .vt-art__vig { width: 62px; height: 62px; }
    .vt-art__nom { font-size: 12.5px; }

    /* ── LA VITRINE DU MILIEU EST INVERSÉE — sa demande ──
       L'œil repart de l'autre côté à chaque rangée au lieu de longer une
       colonne d'images.
       ⚠ EN `grid-column`, PAS EN BALISAGE : le document garde son ordre
       (catégorie puis articles), donc la tabulation et le lecteur d'écran ne
       changent pas. Seul l'œil voit le miroir. */
    .vt-col:nth-child(2) .vt-duo { grid-template-columns: minmax(0, 1fr) 44%; }
    .vt-col:nth-child(2) .vt-visuel { grid-column: 2 / 3; }
}

/* L'INVERSION VAUT AUSSI DE 681 À 1 250 PX. Dans cette tranche, les trois
   vitrines sont empilées l'une sous l'autre et chaque duo est côte à côte :
   c'est exactement la situation du téléphone, donc exactement la même raison
   de faire repartir l'œil de l'autre côté.
   Au-delà de 1 250 px, les trois sont des COLONNES voisines et non des
   rangées : inverser celle du milieu n'y voudrait plus rien dire. */
@media (min-width: 681px) and (max-width: 1250px) {
    .vt-col:nth-child(2) .vt-duo { grid-template-columns: minmax(0, 1fr) 280px; }
    .vt-col:nth-child(2) .vt-visuel { grid-column: 2 / 3; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES QUATRE RÉPARATIONS, EN CARRÉS — 16/10/2026

   Sa demande : « sur mobile, 4 cartes carrées, deux lignes deux colonnes »,
   et « pas trop de texte au niveau du titre et de la description ».

   Les quatre viennent maintenant de l'ERP (voir `Support\Prestations`) :
   Écran, Batterie, Back glass & Housing, Diagnostic au 16/10. Les titres sont
   donc COURTS par nature — un ou deux mots — là où ils étaient des phrases
   (« Remplacement vitre arrière »).

   ⚠ `aspect-ratio: 1` ET NON UNE HAUTEUR FIXE. Deux cartes de la même rangée
   doivent finir ensemble, et un carré doit rester carré de 320 à 430 px. Une
   hauteur en pixels aurait donné des rectangles sur les écrans larges.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 699.98px) {
    .ak-presta__lot {
        display: grid;
        /* ⚠ `minmax(0, 1fr)` ET NON `1fr`. La minimale AUTOMATIQUE d'une colonne
           de grille est la largeur de son contenu le plus large : « Changement
           d'écran » mesure 156 px et forçait des pistes de 188 et 469 px pour
           342 px de place. Mesuré le 16/10 : /reparation se traînait de 23 px à
           390 (413 de large) et de 135 px à 320 (455). `minmax(0, …)` rend le
           droit de rapetisser, et le texte passe à la ligne comme il doit. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--e3);
    }
    .ak-presta-carte {
        position: relative;
        display: flex;
        flex-direction: column;
        aspect-ratio: 1;
        padding: var(--e4);
        gap: 0;
    }
    .ak-presta-carte__ico { width: 44px; height: 44px; border-radius: 13px; }
    .ak-presta-carte__ico svg { width: 24px; height: 24px; }
    /* `margin-top: auto` pousse le texte en bas du carré : l'icône reste en
       haut, le nom se cale sur la même ligne d'une carte à l'autre quelle que
       soit la longueur du mot. */
    .ak-presta-carte > span:nth-child(2) { margin-top: auto; display: grid; gap: 2px; }
    .ak-presta-carte strong { font-size: 15px; font-weight: 800; line-height: 1.2;
                              letter-spacing: -.015em; }
    .ak-presta-carte small { font-size: 11.5px; line-height: 1.35; color: var(--g1); }
    /* La flèche monte dans le coin : au bas d'un carré, elle poussait le nom
       sur trois lignes. */
    .ak-presta-carte__fleche {
        position: absolute;
        top: var(--e4);
        inset-inline-end: var(--e4);
        color: var(--g3);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES LOGOS, EN GRAND — 16/10/2026

   Même raison qu'au téléphone : les fichiers sont carrés, la case ne l'était
   pas. En 116 × 52, un logo carré se peignait en 52 × 52 et laissait 64 px de
   vide à côté de lui. La case se resserre sur ce qu'elle montre : le logo
   garde sa taille, la piste en fait tenir davantage, et la frise respire.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
    .ak-marques__lot img { width: 64px; height: 52px; object-fit: contain; }
}


/* ═══════════════════════════════════════════════════════════════════════
   AU TÉLÉPHONE — DEUX PANNEAUX, ET DES ACCORDÉONS
   REFAIT LE 16/10/2026, ses décisions : « je veux juste le Logo, l'Accueil,
   Réparation, Boutique, Catégories, Se connecter ; les catégories ouvrent une
   page avec un retour en arrière qui liste les catégories en accordéons », puis
   « B » (les grandes lettres), « bouton » (Se connecter), « un rayon à la fois ».

   CE QUI CHANGE DU 15/09. On ne QUITTAIT plus la liste des rayons pour entrer
   dans l'un d'eux ; maintenant la liste reste et le rayon se déplie dessous. Le
   défaut réglé est mesuré : les rayons commençaient à 640 px dans le tiroir,
   sous le pli d'un écran de 844 — on ouvrait le menu et on ne les voyait pas.
   Les voici tous les sept d'un coup, dans un panneau qui leur appartient.

   « UN RAYON À LA FOIS » NE COÛTE RIEN : les rayons sont pilotés par un groupe
   de boutons radio (`name="ak-cat"`), et des radios sont exclusifs par nature.
   Pas une ligne de script, et le clavier les parcourt aux flèches.

   ⚠ Un radio ne se décoche pas en le retapant : le rayon ouvert reste ouvert
   tant qu'on n'en ouvre pas un autre. C'est le prix de l'exclusivité sans
   script, et il est faible — il y a toujours exactement un rayon ouvert.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 699.98px) {

    /* ── 1. LE TIROIR DEVIENT UNE FENÊTRE À DEUX PANNEAUX ──
       `overflow: hidden` et non plus `auto` : ce n'est plus le tiroir qui
       défile, c'est chaque panneau pour soi. Sans cela le panneau des
       catégories, posé en absolu, sortirait par le bas au lieu d'être contenu. */
    .ak-menu {
        overflow: hidden;
        padding: 0;
        /* ⚠ LE TIROIR S'ARRÊTE AU-DESSUS DE LA BARRE DU BAS.
           Mesuré sur la vraie page le 16/10 : le tiroir descendait jusqu'à 760
           pour un écran de 760, et la barre du bas (fixe, z-index 150, 60 px)
           recouvrait entièrement le bouton « Se connecter » — posé à 682-738,
           donc invisible. La barre n'est pas grisée par le voile, c'est voulu :
           elle reste utilisable. Le tiroir doit donc lui laisser la place.
           `env()` repris tel quel de `.ak-bb` : sur un iPhone sans bouton, le
           trait du bas mange 34 px de plus. */
        height: calc(100dvh - 66px - 60px - env(safe-area-inset-bottom, 0px));
    }

    /* La bulle du chat flotte à z-index 200 — au-dessus du tiroir ET du voile.
       Ouvert, le menu doit être seul : une pastille orange posée sur « Boutique »
       invite à un geste qui n'ouvrira pas ce qu'on regarde. */
    #ak-menu-ouvert:checked ~ .ak-chat { display: none; }

    /* Le conteneur du déroulant ne forme plus de boîte : son déclencheur
       appartient au panneau 1, son panneau EST le panneau 2. `display: contents`
       les rend tous deux enfants du tiroir — sans dupliquer un seul lien, et
       c'est ce qui compte : le balisage reste unique pour les deux formats. */
    .ak-menu__deroulant { display: contents; }

    /* ── 2. PANNEAU 1 · LES GRANDES LETTRES ──
       `margin-top: auto` sur la première rubrique pousse les quatre vers le bas.
       Ce n'est pas un effet de style : le haut d'un écran de six pouces ne
       s'atteint qu'à deux mains, et les quatre entrées tiennent désormais dans
       les 300 derniers pixels. Le blanc du haut devient de l'air, pas un oubli. */
    .ak-menu > a:not(.ak-menu__connexion), .ak-cat-tap {
        min-height: 74px;
        display: flex; align-items: center; gap: 10px;
        margin: 0 var(--gouttiere); padding: 0;
        border-bottom: none; border-top: 1px solid var(--trait);
        font-size: 30px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1;
        color: var(--encre);
    }
    .ak-menu > a:not(.ak-menu__connexion):first-of-type { margin-top: auto; border-top: none; }
    .ak-cat-tap { cursor: pointer; }
    /* Le lien reste dans le balisage — c'est lui que suivent les robots — mais
       au téléphone c'est le `<label>` qui agit : un lien emmènerait sur
       /boutique au lieu d'ouvrir le panneau. */
    .ak-menu__declencheur { display: none; }

    /* La page où l'on est porte UN POINT, pas un pavé de couleur : à 30 px le
       mot est déjà assez fort, un fond plein l'écraserait. */
    .ak-menu > a[aria-current="page"] { color: var(--orange-lisible); }
    .ak-menu > a[aria-current="page"]::after {
        content: ''; width: 8px; height: 8px; flex: none; margin-left: auto;
        border-radius: 50%; background: var(--orange);
    }

    /* « Catégories » est la SEULE entrée qui ouvre au lieu d'emmener ailleurs.
       Son chevron le dit — et les trois autres n'en ont pas, exprès. */
    .ak-cat-tap .ak-menu__chevron {
        display: block; flex: none; color: var(--orange);
        transform: rotate(-90deg);
    }
    .ak-cat-tap__nb {
        display: block; margin-left: auto; font-size: 13px; font-weight: 600;
        letter-spacing: 0; color: var(--g1);
    }

    /* ── 3. « SE CONNECTER », EN BOUTON ──
       Sa décision du 16/10 : un bouton, pas une ligne de liste. C'est une
       action, pas une destination, et elle doit se détacher des quatre
       rubriques au lieu de se confondre avec elles.

       ⚠ LA PAIRE `--encre` / `--blanc`, ET RIEN D'AUTRE. Les deux basculent
       ENSEMBLE : le bouton est donc toujours l'INVERSE de la page — pastille
       sombre et texte blanc le jour, pastille claire et texte sombre la nuit.
       Mesuré : 18,1:1 le jour, 15,9:1 la nuit, pour le texte comme pour la
       limite du bouton (WCAG 1.4.11 demande 3:1 sur cette limite-là).

       J'avais d'abord écrit `--fond-sombre`, qui ne bascule jamais, pour fuir
       le blanc-sur-blanc trouvé le 15/10 sur la pastille de la tablette. Il
       produisait l'inverse exact : la nuit, #1A1512 sur un tiroir #1A1614, soit
       1,01:1 — le bouton redevenait une ligne de texte centrée, c'est-à-dire
       précisément ce qu'il avait refusé. Un jeton figé ne règle pas un problème
       de bascule, il le déplace dans l'autre mode. */
    /* ⚠ `.ak-menu a.ak-menu__connexion` ET NON `.ak-menu__connexion` SEUL.
       Mesuré sur la vraie page : `.ak-menu a` (0,2,0) impose `--encre-2` et
       battait ma classe (0,1,0) — le mot « Se connecter » sortait en gris
       foncé sur fond noir, soit 1,4:1, illisible. Même famille que le piège
       `.bq-scene a` du 12/09 et `.sv-page a` du 15/10. */
    .ak-menu a.ak-menu__connexion {
        flex: none;
        display: flex; align-items: center; justify-content: center; gap: 9px;
        min-height: 52px; margin: 16px var(--gouttiere) 22px;
        border-radius: 14px; border: none;
        background: var(--encre); color: var(--blanc);
        font-size: 16px; font-weight: 750; letter-spacing: -.01em;
    }

    /* ── 4. PANNEAU 2 · LES CATÉGORIES ──
       Il COUVRE le panneau 1 au lieu de le pousser : on garde le repère de
       l'endroit d'où l'on vient, et le retour ramène exactement là. */
    .ak-panneau {
        position: absolute; inset: 0; z-index: 2;
        display: flex; flex-direction: column;
        width: auto; max-width: none; padding: 0;
        background: var(--blanc); border: none; box-shadow: none;
        opacity: 1; visibility: hidden;
        transform: translateX(100%);
        transition: transform var(--t-moyen) var(--e-sortie),
                    visibility var(--t-moyen) var(--e-sortie);
    }
    /* ⚠ LA RÈGLE DU SURVOL DU BUREAU ATTEINT AUSSI LE TÉLÉPHONE. Elle pèse
       (0,3,0) et rouvrirait le panneau au premier effleurement, ou le fermerait
       dès qu'un lien prend le foyer. Celle-ci pèse (1,2,0) — l'identifiant
       l'emporte sur trois classes — et tranche dans les deux sens. */
    #ak-cat-ouvert:checked ~ .ak-entete .ak-panneau { visibility: visible; transform: none; }
    .ak-menu__deroulant:hover .ak-panneau,
    .ak-menu__deroulant:focus-within .ak-panneau { visibility: hidden; transform: translateX(100%); }

    /* L'en-tête du panneau : retour à gauche, fermeture à droite. 44 px de
       cible — sous cela, un pouce rate le bouton. */
    .ak-pn-barre {
        display: flex; flex: none; align-items: center; gap: 4px;
        height: 60px; padding-inline: 8px;
        border-bottom: 1px solid var(--trait);
    }
    .ak-pn-barre b {
        flex: 1; text-align: center; font-size: 16.5px; font-weight: 800;
        letter-spacing: -.015em; color: var(--encre);
    }
    .ak-pn-arriere {
        display: grid; place-items: center; width: 44px; height: 44px; flex: none;
        border-radius: 12px; color: var(--encre); cursor: pointer;
    }
    .ak-pn-arriere:hover { background: var(--creme); }

    /* La liste des rayons défile seule, entre l'en-tête et le bouton du bas. */
    .ak-pn-grille { display: block; flex: 1; min-height: 0; overflow-y: auto;
                    overscroll-behavior: contain; padding: 6px 12px 8px; }

    /* ── 5. LES ACCORDÉONS ──
       La bascule RESTE visible quand son rayon est ouvert : c'est ce qui
       distingue un accordéon d'un parcours en deux temps. Le rayon ouvert
       pousse les suivants vers le bas, il ne les recouvre pas — on ne perd
       jamais sa place. */
    .ak-pn-bascule {
        display: flex; align-items: center; gap: 12px;
        min-height: 58px; padding: 0 8px 0 4px;
        border-bottom: 1px solid var(--trait);
        border-radius: 12px 12px 0 0; cursor: pointer;
    }
    .ak-pn-col:last-child .ak-pn-bascule { border-bottom: none; }
    .ak-pn-bascule > span { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700;
                            letter-spacing: -.012em; color: var(--encre); }
    .ak-pn-bascule i { flex: none; font-size: 12.5px; font-weight: 700; color: var(--g1);
                       font-style: normal; font-variant-numeric: tabular-nums; }
    .ak-pn-chev { flex: none; color: var(--g1); transform: rotate(90deg);
                  transition: transform var(--t-vif) var(--e-sortie); }

    /* Le retour par rayon n'a plus lieu d'être : la flèche est dans l'en-tête
       du panneau, une fois, au même endroit pour les sept. */
    .ak-pn-retour { display: none; }
    .ak-panneau .ak-pn-tete, .ak-panneau .ak-pn-liste { display: none; }

    /* Le rayon ouvert : sa liste paraît, son chevron se retourne, son nom passe
       à l'orange lisible. */
    .ak-pn-dd--1:checked  ~ .ak-pn-grille .ak-pn-col--1  .ak-pn-liste,
    .ak-pn-dd--2:checked  ~ .ak-pn-grille .ak-pn-col--2  .ak-pn-liste,
    .ak-pn-dd--3:checked  ~ .ak-pn-grille .ak-pn-col--3  .ak-pn-liste,
    .ak-pn-dd--4:checked  ~ .ak-pn-grille .ak-pn-col--4  .ak-pn-liste,
    .ak-pn-dd--5:checked  ~ .ak-pn-grille .ak-pn-col--5  .ak-pn-liste,
    .ak-pn-dd--6:checked  ~ .ak-pn-grille .ak-pn-col--6  .ak-pn-liste,
    .ak-pn-dd--7:checked  ~ .ak-pn-grille .ak-pn-col--7  .ak-pn-liste,
    .ak-pn-dd--8:checked  ~ .ak-pn-grille .ak-pn-col--8  .ak-pn-liste,
    .ak-pn-dd--9:checked  ~ .ak-pn-grille .ak-pn-col--9  .ak-pn-liste,
    .ak-pn-dd--10:checked  ~ .ak-pn-grille .ak-pn-col--10  .ak-pn-liste,
    .ak-pn-dd--11:checked  ~ .ak-pn-grille .ak-pn-col--11  .ak-pn-liste,
    .ak-pn-dd--12:checked  ~ .ak-pn-grille .ak-pn-col--12  .ak-pn-liste { display: block; }
    .ak-pn-dd--1:checked  ~ .ak-pn-grille .ak-pn-col--1  .ak-pn-tete,
    .ak-pn-dd--2:checked  ~ .ak-pn-grille .ak-pn-col--2  .ak-pn-tete,
    .ak-pn-dd--3:checked  ~ .ak-pn-grille .ak-pn-col--3  .ak-pn-tete,
    .ak-pn-dd--4:checked  ~ .ak-pn-grille .ak-pn-col--4  .ak-pn-tete,
    .ak-pn-dd--5:checked  ~ .ak-pn-grille .ak-pn-col--5  .ak-pn-tete,
    .ak-pn-dd--6:checked  ~ .ak-pn-grille .ak-pn-col--6  .ak-pn-tete,
    .ak-pn-dd--7:checked  ~ .ak-pn-grille .ak-pn-col--7  .ak-pn-tete,
    .ak-pn-dd--8:checked  ~ .ak-pn-grille .ak-pn-col--8  .ak-pn-tete,
    .ak-pn-dd--9:checked  ~ .ak-pn-grille .ak-pn-col--9  .ak-pn-tete,
    .ak-pn-dd--10:checked  ~ .ak-pn-grille .ak-pn-col--10  .ak-pn-tete,
    .ak-pn-dd--11:checked  ~ .ak-pn-grille .ak-pn-col--11  .ak-pn-tete,
    .ak-pn-dd--12:checked  ~ .ak-pn-grille .ak-pn-col--12  .ak-pn-tete { display: inline-flex; }
    .ak-pn-dd--1:checked  ~ .ak-pn-grille .ak-pn-col--1  .ak-pn-chev,
    .ak-pn-dd--2:checked  ~ .ak-pn-grille .ak-pn-col--2  .ak-pn-chev,
    .ak-pn-dd--3:checked  ~ .ak-pn-grille .ak-pn-col--3  .ak-pn-chev,
    .ak-pn-dd--4:checked  ~ .ak-pn-grille .ak-pn-col--4  .ak-pn-chev,
    .ak-pn-dd--5:checked  ~ .ak-pn-grille .ak-pn-col--5  .ak-pn-chev,
    .ak-pn-dd--6:checked  ~ .ak-pn-grille .ak-pn-col--6  .ak-pn-chev,
    .ak-pn-dd--7:checked  ~ .ak-pn-grille .ak-pn-col--7  .ak-pn-chev,
    .ak-pn-dd--8:checked  ~ .ak-pn-grille .ak-pn-col--8  .ak-pn-chev,
    .ak-pn-dd--9:checked  ~ .ak-pn-grille .ak-pn-col--9  .ak-pn-chev,
    .ak-pn-dd--10:checked  ~ .ak-pn-grille .ak-pn-col--10  .ak-pn-chev,
    .ak-pn-dd--11:checked  ~ .ak-pn-grille .ak-pn-col--11  .ak-pn-chev,
    .ak-pn-dd--12:checked  ~ .ak-pn-grille .ak-pn-col--12  .ak-pn-chev { transform: rotate(-90deg); color: var(--orange); }
    .ak-pn-dd--1:checked  ~ .ak-pn-grille .ak-pn-col--1  .ak-pn-bascule > span,
    .ak-pn-dd--2:checked  ~ .ak-pn-grille .ak-pn-col--2  .ak-pn-bascule > span,
    .ak-pn-dd--3:checked  ~ .ak-pn-grille .ak-pn-col--3  .ak-pn-bascule > span,
    .ak-pn-dd--4:checked  ~ .ak-pn-grille .ak-pn-col--4  .ak-pn-bascule > span,
    .ak-pn-dd--5:checked  ~ .ak-pn-grille .ak-pn-col--5  .ak-pn-bascule > span,
    .ak-pn-dd--6:checked  ~ .ak-pn-grille .ak-pn-col--6  .ak-pn-bascule > span,
    .ak-pn-dd--7:checked  ~ .ak-pn-grille .ak-pn-col--7  .ak-pn-bascule > span,
    .ak-pn-dd--8:checked  ~ .ak-pn-grille .ak-pn-col--8  .ak-pn-bascule > span,
    .ak-pn-dd--9:checked  ~ .ak-pn-grille .ak-pn-col--9  .ak-pn-bascule > span,
    .ak-pn-dd--10:checked  ~ .ak-pn-grille .ak-pn-col--10  .ak-pn-bascule > span,
    .ak-pn-dd--11:checked  ~ .ak-pn-grille .ak-pn-col--11  .ak-pn-bascule > span,
    .ak-pn-dd--12:checked  ~ .ak-pn-grille .ak-pn-col--12  .ak-pn-bascule > span { color: var(--orange-lisible); }
    .ak-pn-dd--1:checked  ~ .ak-pn-grille .ak-pn-col--1  .ak-pn-bascule,
    .ak-pn-dd--2:checked  ~ .ak-pn-grille .ak-pn-col--2  .ak-pn-bascule,
    .ak-pn-dd--3:checked  ~ .ak-pn-grille .ak-pn-col--3  .ak-pn-bascule,
    .ak-pn-dd--4:checked  ~ .ak-pn-grille .ak-pn-col--4  .ak-pn-bascule,
    .ak-pn-dd--5:checked  ~ .ak-pn-grille .ak-pn-col--5  .ak-pn-bascule,
    .ak-pn-dd--6:checked  ~ .ak-pn-grille .ak-pn-col--6  .ak-pn-bascule,
    .ak-pn-dd--7:checked  ~ .ak-pn-grille .ak-pn-col--7  .ak-pn-bascule,
    .ak-pn-dd--8:checked  ~ .ak-pn-grille .ak-pn-col--8  .ak-pn-bascule,
    .ak-pn-dd--9:checked  ~ .ak-pn-grille .ak-pn-col--9  .ak-pn-bascule,
    .ak-pn-dd--10:checked  ~ .ak-pn-grille .ak-pn-col--10  .ak-pn-bascule,
    .ak-pn-dd--11:checked  ~ .ak-pn-grille .ak-pn-col--11  .ak-pn-bascule,
    .ak-pn-dd--12:checked  ~ .ak-pn-grille .ak-pn-col--12  .ak-pn-bascule { border-bottom-color: transparent; }

    /* ⚠ L'ORDRE DU BALISAGE N'EST PAS L'ORDRE VOULU. Le balisage sert les deux
       formats : sur ordinateur `.ak-pn-tete` est l'EN-TÊTE de la colonne et doit
       donc précéder la liste. Au téléphone c'est la SORTIE du rayon, et elle se
       lit après ses sous-rayons — « voilà les trois, et voilà les 1 270 ».
       `order` le dit sans toucher au balisage, donc sans dupliquer un lien. */
    .ak-pn-col { display: flex; flex-direction: column; }
    .ak-pn-bascule { order: 0; }
    .ak-panneau .ak-pn-liste { order: 1; }
    .ak-panneau .ak-pn-tete  { order: 2; }

    /* Le corps ouvert s'aligne sous le TEXTE du rayon et non sous son bord :
       ce décrochement est ce qui dit « ceci appartient à celui du dessus ». */
    .ak-panneau .ak-pn-liste { padding-left: 16px; }
    .ak-panneau .ak-pn-liste a { padding: 10px 8px; font-size: 14.5px; font-weight: 600;
                                 border-bottom: none; border-radius: 10px; color: var(--g1); }
    .ak-pn-liste > li + li { margin-top: 0; }
    .ak-pn-liste i { font-size: 12px; color: var(--g1); }

    /* La sortie du rayon : son propre lien, en pastille, après ses sous-rayons.
       Le sous-rayon n'est pas le seul chemin — le rayon entier reste à un doigt. */
    .ak-panneau .ak-pn-tete {
        align-self: flex-start;
        align-items: center; gap: 7px; margin: 8px 0 18px 16px; padding: 7px 12px;
        border-radius: 9px; background: var(--orange-doux); color: var(--orange-lisible);
        font-size: 13px; font-weight: 750;
    }
    .ak-panneau .ak-pn-tete i { color: inherit; opacity: .75; font-size: 12px; }

    /* ── 6. LE PIED DU PANNEAU ──
       « Voir tout le catalogue » ne dépend plus d'un rayon choisi : il est
       toujours là, posé au même endroit, et un dégradé le décolle de la liste
       pour qu'une ligne coupée se lise comme « ça continue » et non comme un
       défaut d'affichage. */
    .ak-panneau .ak-pn-tout {
        position: relative; flex: none; display: flex; align-items: center;
        justify-content: center; gap: 8px; min-height: 52px;
        margin: 0 var(--gouttiere) 20px; border-radius: 14px;
        border: 1.5px solid var(--encre); color: var(--encre);
        font-size: 15.5px; font-weight: 750;
    }
    .ak-panneau .ak-pn-tout::before {
        content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 34px;
        pointer-events: none;
        background: linear-gradient(to top, var(--blanc), transparent);
    }

    /* ── 7. L'ÉCRAN COURT ──
       Quatre rubriques de 74 px plus le bouton font 390 px : sous 560 px de
       fenêtre il n'en reste plus assez, `margin-top: auto` s'effondre et le
       bouton sort du tiroir par le bas (mesuré : +15 px à 320×480). Ce n'est
       pas un cas d'école — `100dvh` rétrécit dès que les barres du navigateur
       reparaissent. Les lettres rapetissent, et tout rentre. */
    @media (max-height: 560px) {
        .ak-menu > a:not(.ak-menu__connexion), .ak-cat-tap {
            min-height: 54px; font-size: 22px;
        }
        .ak-menu a.ak-menu__connexion { min-height: 46px; margin-block: 10px 14px; }
    }

    /* Le foyer clavier doit se voir, sinon l'accordéon n'existe que pour le doigt. */
    .ak-pn-dd:focus-visible ~ .ak-pn-grille .ak-pn-bascule { outline: 2px solid var(--orange); outline-offset: -2px; }
    .ak-menu > a .ak-menu__chevron { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LA LUEUR DE LA FICHE CONTACT — 16/10/2026

   /nous-contacter traînait la page vers la droite À TOUTES LES LARGEURS : 14 px
   à 320, 24 à 390, 53 de 700 à 1280, 17 à 1440. Un défaut ancien, antérieur au
   chantier du menu, et qui donc existait aussi sur ordinateur.

   LA CAUSE, prouvée en neutralisant la règle dans le navigateur (414 → 390) :
   `.ak-contact__cadre::after`, une lueur décorative posée à `inset: -8% -14%
   -14% -8%`. Son jumeau `::before` a bien reçu un `display: none` au téléphone
   (ligne ~4739) ; celui-là a été oublié, et ses 14 % de débordement à droite
   n'ont jamais été rattrapés par personne.

   POURQUOI ROGNER PLUTÔT QUE RÉDUIRE L'INSET. Le dégradé est
   `radial-gradient(55% 50% at 45% 50%, …, transparent 72%)` : il atteint la
   transparence à 84,6 % de la largeur de sa boîte, et le bord droit de la carte
   est à 88,5 %. Ce qui dépasse est donc DÉJÀ invisible — le rogner ne retire
   rien à l'œil, tandis que toucher à l'`inset` déplacerait la géométrie du
   dégradé, donc la lueur elle-même.

   ⚠ `clip` ET NON `hidden`. `hidden` fabriquerait un conteneur de défilement,
   ce qui casse `position: sticky` chez les descendants ; `clip` ne crée rien et
   laisse l'axe vertical en `visible`. Et c'est posé sur `.ak-large`, dont la
   boîte de remplissage s'arrête PILE au bord de l'écran : le décalage de 26 px
   de `::before`, lui, reste visible sur ordinateur.
   ═══════════════════════════════════════════════════════════════════════════ */
.ak-large--contact { overflow-x: clip; }