/* FICHIER GÉNÉRÉ : NE PAS MODIFIER À LA MAIN.
   ---------------------------------------------------------------------
   Produit par  : scripts/design-system/importer.ts
   Source       : project/colors_and_type.css
   Dépôt        : libetlou-git/design-system
   Commit       : 61f580c2f4fad579e8d1425520d423f49649b86d
   ---------------------------------------------------------------------
   Seuls les **jetons** de la source sont recopiés : le bloc `:root` et sa
   surcharge `@media (min-width: 768px)`. L'import laisse volontairement de
   côté, et il ne faut pas les rajouter ici :

     - le `@import` de Google Fonts en tête de la source. Le site auto-héberge
       ses polices depuis `/assets/fonts/` et porte un bandeau de consentement :
       une ressource tierce chargée sans consentement est un problème, pas un
       détail. Les `@font-face` du site restent dans `src/site/site.css` ;
     - les vingt blocs `@font-face` de la source, qui visent `./fonts/*.woff2`
       du dépôt design system, chemins qui n'existent pas ici ;
     - les styles d'éléments qui suivent les jetons dans la source : le site a
       ses propres sélecteurs.

   Les `#fff` des `color-mix()` ci-dessous sont l'opérande d'éclaircissement
   du design system, pas une couleur d'interface : le gardien
   `test/site-couleurs.test.ts` les tolère à cette place et nulle part ailleurs.

   Les corrections de contraste de la recette d'Alban (note 286 : les teintes
   500 ne tiennent pas les 4,5 pour 1 du WCAG en petit texte) ne se posent pas
   ici mais dans la surcouche de `src/site/site.css`, pour que ce fichier
   reste la copie fidèle de la source. Elles sont à reporter côté design
   system : voir `docs/wiki-a-reporter.md`.

   Pour réimporter après un nouvel export de Morgane, voir
   `docs/recette-design/design-system.md`. */

:root {
  /* ---- Brand colors (from Figma "Couleurs" page) ------------------- */
  /* Foundations — never use pure black or pure white */
  --ll-craie:        #363530;  /* main text & ink                     */
  --ll-blanc-casse:  #FAF4EA;  /* default page background             */

  /* Action — Citron vert (CTAs, emphasis) */
  --ll-citron-vert:  #CFD71E;  /* exact value from Figma              */

  /* Pastel palette (illustrative, decorative) */
  --ll-jasmin:       #F3DA8E;  /* warm yellow                         */
  --ll-carotte:      #F49619;  /* orange — heavy use in Figma (227×)  */
  --ll-ciel:         #8FB8E3;  /* sky blue — used in butterfly logo   */
  --ll-lila:         #BAB4DA;  /* lilac                               */
  --ll-framboise:    #ED8AB8;  /* raspberry pink                      */

  /* ---- Semantic colors -------------------------------------------- */
  --color-bg:           var(--ll-blanc-casse);
  --color-bg-raised:    var(--ll-blanc-100); /* card surface — Blanc cassé 100 (#FCFAF6) */
  --color-bg-sunken:    #F2EBDD;            /* pressed / sunken state */
  --color-fg:           var(--ll-craie);
  --color-fg-muted:     #7A7972;            /* 60% craie              */
  --color-fg-soft:      #A8A69E;            /* placeholder / hint     */
  --color-border:       #E6DFCE;            /* subtle dividers        */
  --color-border-strong:#363530;            /* outlined chips / cards */
  --color-border-card:       var(--ll-craie-50);  /* card stroke — Craie 50 (#C6C6C5) */
  --color-border-card-hover: var(--ll-craie-400); /* card stroke on hover — Craie 400 (#363530) */

  --color-accent:       var(--ll-citron-vert);
  --color-accent-fg:    var(--ll-craie);    /* text on lime           */

  --color-success:      var(--ll-citron-400); /* succès = Citron vert (seul vert de la charte) */
  --color-warning:      var(--ll-carotte-400);
  --color-danger:       var(--ll-carotte-400); /* error/danger = Carotte (aucun rouge hors-charte) */

  /* =================================================================
     TINT SCALES (50 → 500) — calées sur la structure du Figma officiel
     "Colors" (Neutral / Primary / Secondary / Success / Error / Tertiary).
     Les ANCRES 400 conservent les valeurs actuelles du projet ; les
     teintes 300→50 sont dérivées par color-mix vers le blanc, et les
     "ink" (texte sur tag) vers la Craie. Échelle unique, partagée par
     toutes les surfaces de composants.
     ================================================================= */

  /* Blanc cassé (neutral light) */
  --ll-blanc-400: var(--ll-blanc-casse);   /* #FAF4EA — fond global   */
  --ll-blanc-200: #FBF7F1;
  --ll-blanc-100: #FCFAF6;
  --ll-blanc-50:  #FEFCFA;

  /* Craie (neutral ink) */
  --ll-craie-400: #363530;                 /* texte & stroke          */
  --ll-craie-300: #454845;
  --ll-craie-200: #696B68;                 /* disabled bg             */
  --ll-craie-100: #949593;
  --ll-craie-50:  #C6C6C5;                 /* stroke card / bloc      */

  /* Citron vert — RÔLE PRIMAIRE / ACTION (swap : remplace le Ciel) */
  --ll-citron-400: var(--ll-citron-vert);  /* #CFD71E                 */
  --ll-citron-300: color-mix(in srgb, var(--ll-citron-vert) 74%, #fff);
  --ll-citron-200: color-mix(in srgb, var(--ll-citron-vert) 54%, #fff);
  --ll-citron-100: color-mix(in srgb, var(--ll-citron-vert) 34%, #fff);
  --ll-citron-50:  color-mix(in srgb, var(--ll-citron-vert) 17%, #fff);
  --ll-citron-500: #929D30;                /* Figma — ink / texte tag */
  --ll-citron-ink: var(--ll-citron-500);

  /* Ciel — DÉCORATIF + ÉTATS D'INTERACTION (logo, illustrations, focus, sélection) */
  --ll-ciel-400: var(--ll-ciel);           /* #8FB8E3                 */
  --ll-ciel-300: color-mix(in srgb, var(--ll-ciel) 76%, #fff);
  --ll-ciel-200: color-mix(in srgb, var(--ll-ciel) 56%, #fff);
  --ll-ciel-100: color-mix(in srgb, var(--ll-ciel) 35%, #fff);
  --ll-ciel-50:  color-mix(in srgb, var(--ll-ciel) 18%, #fff);
  --ll-ciel-500: #399BD5;                  /* Figma — ink / texte tag */
  --ll-ciel-ink: var(--ll-ciel-500);

  /* Jasmin — RÔLE SECONDAIRE (bouton secondaire) */
  --ll-jasmin-400: var(--ll-jasmin);       /* #F3DA8E                 */
  --ll-jasmin-300: color-mix(in srgb, var(--ll-jasmin) 76%, #fff);
  --ll-jasmin-200: color-mix(in srgb, var(--ll-jasmin) 56%, #fff);
  --ll-jasmin-100: color-mix(in srgb, var(--ll-jasmin) 35%, #fff);
  --ll-jasmin-50:  color-mix(in srgb, var(--ll-jasmin) 18%, #fff);
  --ll-jasmin-500: #AE985A;                /* Figma — ink / texte tag */
  --ll-jasmin-ink: var(--ll-jasmin-500);

  /* Carotte — RÔLE ERROR / EMERGENCY */
  --ll-carotte-400: var(--ll-carotte);     /* #F49619                 */
  --ll-carotte-300: color-mix(in srgb, var(--ll-carotte) 76%, #fff);
  --ll-carotte-200: color-mix(in srgb, var(--ll-carotte) 56%, #fff);
  --ll-carotte-100: color-mix(in srgb, var(--ll-carotte) 35%, #fff);
  --ll-carotte-50:  color-mix(in srgb, var(--ll-carotte) 18%, #fff);
  --ll-carotte-500: #DC7E2A;               /* Figma — ink / texte tag */
  --ll-carotte-ink: var(--ll-carotte-500);

  /* Framboise — TERTIAIRE / tag */
  --ll-framboise-400: var(--ll-framboise); /* #ED8AB8                 */
  --ll-framboise-300: color-mix(in srgb, var(--ll-framboise) 76%, #fff);
  --ll-framboise-200: color-mix(in srgb, var(--ll-framboise) 56%, #fff);
  --ll-framboise-100: color-mix(in srgb, var(--ll-framboise) 35%, #fff);
  --ll-framboise-50:  color-mix(in srgb, var(--ll-framboise) 18%, #fff);
  --ll-framboise-500: #DD70A4;             /* Figma — ink / texte tag */
  --ll-framboise-ink: var(--ll-framboise-500);

  /* Lila — TERTIAIRE / tag */
  --ll-lila-400: var(--ll-lila);           /* #BAB4DA                 */
  --ll-lila-300: color-mix(in srgb, var(--ll-lila) 76%, #fff);
  --ll-lila-200: color-mix(in srgb, var(--ll-lila) 56%, #fff);
  --ll-lila-100: color-mix(in srgb, var(--ll-lila) 35%, #fff);
  --ll-lila-50:  color-mix(in srgb, var(--ll-lila) 18%, #fff);
  --ll-lila-500: #938FAF;                  /* Figma — ink / texte tag */
  --ll-lila-ink: var(--ll-lila-500);

  /* =================================================================
     SEMANTIC ROLES (boutons & contrôles) — structure du Figma, mais
     PRIMARY swappé du Ciel vers le Citron vert (action color marque).
     Ciel n'apparaît plus sur aucune affordance d'action.
     ================================================================= */
  --role-primary:          var(--ll-citron-400);   /* était Ciel 400  */
  --role-primary-press:    var(--ll-citron-200);   /* était Ciel 200  */
  --role-primary-fg:       var(--ll-craie-400);    /* texte sur lime  */
  --role-secondary:        var(--ll-jasmin-400);
  --role-secondary-press:  var(--ll-jasmin-200);
  --role-secondary-fg:     var(--ll-craie-400);
  --role-error:            var(--ll-carotte-400);
  --role-disabled-bg:      var(--ll-craie-200);
  --role-disabled-fg:      var(--ll-blanc-50);
  --role-control-on:       var(--ll-ciel-400);     /* sélection : toggle/radio/checkbox actifs (Ciel) */
  --role-control-press:    var(--ll-ciel-200);
  --role-focus-ring:       var(--ll-ciel-400);      /* focus des champs & contrôles (Ciel) */

  /* ---- Typography (Figma "Typography" — échelle RESPONSIVE) -------
     Source de vérité : Design System Lib et Lou 2026, frame Typography.
     DEUX paliers explicites définis dans le Figma :
       • base            → valeurs MOBILE
       • @media ≥768px   → valeurs DESKTOP (override de :root, dans le
                           bloc juste après la fermeture de :root)
     Comfortaa  = police UI (textes, sous-titres).
     Neulis Neue = display & accent (titres, CTA, boutons).           */
  --font-sans:    "Comfortaa", ui-rounded, system-ui, -apple-system,
                  "Segoe UI", Roboto, sans-serif;
  --font-display: "Neulis Neue", "Comfortaa", ui-sans-serif,
                  system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Échelle MOBILE (base) — taille / interligne ------------------- */
  --fs-hero:    35px;  --lh-hero:    42px;  /* Neulis Neue Regular   */
  --fs-h1:      22px;  --lh-h1:      26px;  /* Neulis Neue Regular   */
  --fs-exergue: 20px;  --lh-exergue: 24px;  /* Neulis Neue Medium    */
  --fs-h2:      16px;  --lh-h2:      19px;  /* Comfortaa Bold        */
  --fs-h3:      14px;  --lh-h3:      18px;  /* Comfortaa Bold        */
  --fs-base:    12px;  --lh-base:    16px;  /* Body — Comfortaa Reg. */
  --fs-small:   12px;  --lh-small:   14px;  /* Small body            */
  --fs-mini:    10px;  --lh-mini:    12px;  /* Mini body — Regular   */
  --fs-chip:    12px;  --lh-chip:    12px;  /* Filter chip           */
  --fw-chip:    600; /* @kind font */         /* SemiBold en mobile    */
  --fs-btn-sm:   8px;  --lh-btn-sm:  12px;  /* Small button          */
  --fs-btn:     12px;  --lh-btn:     16px;  /* Button                */
  --fs-btn-lg:  16px;  --lh-btn-lg:  20px;  /* Big button            */

  /* Tailles poster hors-spec (non responsives) ------------------- */
  --fs-display: 48px;       /* extra-large display (posters)         */
  --fs-mega:    80px;       /* = Hero desktop / mega-display         */

  /* Interlignes ratio (héritage — toujours disponibles) ---------- */
  --lh-tight:   1.1;  /* @kind font */
  --lh-snug:    1.2;  /* @kind font */
  --lh-normal:  1.33; /* @kind font */
  --lh-relaxed: 1.5;  /* @kind font */

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-cap:    0.08em;  /* CTA uppercase                        */

  /* Weights */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* ---- Spacing (4 px base, 8 px rhythm) --------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Radii — generous & friendly -------------------------------- */
  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --radius-2xl:   48px;
  --radius-pill:  999px;

  /* ---- Shadow — UN SEUL ombrage, doux & teinté Craie ---------------
     Usage unique : ÉLÉVATION d'un élément qui se détache du fond —
     survol d'une carte/tuile cliquable, image flottante (hero),
     surface superposée (menu déroulant, modale, toast).
     Tout le reste (cartes au repos, champs, chips, sections) s'appuie
     sur la BORDURE (Craie 50) et les aplats — jamais sur une ombre. */
  --shadow: 0 6px 22px rgba(54, 53, 48, 0.10),
            0 2px 6px  rgba(54, 53, 48, 0.05);

  /* ---- Motion ----------------------------------------------------- */
  /* --ease-soft = easing PAR DÉFAUT (transitions standard, hover/press).
     --ease-out réservé aux entrées/apparitions ; --ease-bounce aux
     micro-rebonds (ajout panier, ouverture de carte). */
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */ /* défaut */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */

  /* ---- Layout ----------------------------------------------------- */
  --container-max: 1440px;
  --container-pad: clamp(20px, 4vw, 48px);
}

@media (min-width: 768px) {
  :root {
    --fs-hero:    80px;  --lh-hero:    90px;  /* Neulis Neue Regular */
    --fs-h1:      36px;  --lh-h1:      42px;  /* Neulis Neue Regular */
    --fs-exergue: 28px;  --lh-exergue: 34px;  /* Neulis Neue Medium  */
    --fs-h2:      22px;  --lh-h2:      26px;  /* Comfortaa Bold      */
    --fs-h3:      18px;  --lh-h3:      22px;  /* Comfortaa Bold      */
    --fs-base:    14px;  --lh-base:    20px;  /* Body — Comfortaa    */
    --fs-small:   12px;  --lh-small:   16px;  /* Small body          */
    --fs-mini:    10px;  --lh-mini:    14px;  /* Mini body — Regular */
    --fs-chip:    10px;  --lh-chip:    14px;  /* Filter chip         */
    --fw-chip:    400; /* @kind font */         /* Regular en desktop  */
    --fs-btn-sm:  12px;  --lh-btn-sm:  14px;  /* Small button        */
    --fs-btn:     14px;  --lh-btn:     16px;  /* Button              */
    --fs-btn-lg:  18px;  --lh-btn-lg:  20px;  /* Big button          */
  }
}

/* Jetons de taille et de position des stickers du site.
   ---------------------------------------------------------------------
   Ce fichier est écrit à la main, et c'est voulu : les stickers sont un
   réglage **du site**, pas de la charte. Le design system livre les couleurs,
   la typographie, les espacements et les rayons ; il ne dit rien de l'endroit
   où l'autocollant « Lib et Lou family » croise la bande des marques sur
   l'accueil. Ces jetons ne peuvent donc pas aller dans `colors-et-types.css`,
   qui est généré depuis la source de Morgane et vérifié par empreinte.

   Pourquoi des jetons alors qu'une valeur en dur suffisait : la recette du
   1er octobre 2026 a nommé deux cas que Morgane doit pouvoir régler elle-même,
   sans attendre personne, par le panneau de réglages (`/recette/reglages`,
   piste 7 du rapport du 3 octobre 2026) :

     - le sticker « Lib et Lou family » est trop gros et empiète sur la bande
       des marques juste au-dessus ;
     - le sticker « max de choix » (l'illustration « MAX DE CHOIX, MAX DE
       FUN » entre « Comment ça marche » et « Vos jeux préférés ») doit être
       à cheval sur la limite entre les deux aplats, ni au-dessus, ni en
       dessous.

   « Trop gros » et « à cheval » sont des grandeurs : elles se règlent au
   curseur. Tant qu'elles étaient écrites dans `accueil.css`, chaque
   demi-centimètre coûtait une demande, une branche et une relecture.

   Chaque sticker a huit jetons, parce que sa largeur et son retrait sont
   fluides (`clamp(mini, fluide, maxi)`, note 377 d'Alban : une largeur à
   paliers faisait sauter la taille et recouvrir le texte entre deux paliers).
   On règle donc les trois bornes séparément :

     -largeur-mini / -fluide / -maxi : la largeur du sticker ;
     -bord-mini / -fluide / -maxi    : son retrait au bord de la page (à
                                       gauche pour « family », à droite pour
                                       « max de choix ») ;
     -decalage                       : de combien de sa propre hauteur il
                                       remonte au-dessus de la limite. C'est
                                       le « à cheval » ;
     -rotation                       : son inclinaison.

   Les valeurs ci-dessous sont celles que l'accueil sert depuis la recette du
   2 octobre 2026 (note 411, détaillée bloc par bloc). Un réglage de Morgane
   n'atterrit jamais ici, il atterrit dans `reglages.css`, chargé après. */

:root {
  /* Sticker « Lib et Lou family », à cheval sur la limite marques vers avis.
     Recette du 02/10/2026 (cas 1, note 411) : « trop gros, il empiète sur les
     marques qui défilent ». Il passe de 200 à 140 px au plus et remonte de 45 %
     de sa hauteur au lieu de 52 % : le haut du sticker s'arrête désormais sous
     la ligne des logos, avec une vingtaine de pixels d'air sur ordinateur. */
  --sticker-family-largeur-mini:    88px;
  --sticker-family-largeur-fluide:  10vw;
  --sticker-family-largeur-maxi:   140px;
  --sticker-family-bord-mini:        8px;
  --sticker-family-bord-fluide:      5vw;
  --sticker-family-bord-maxi:       80px;
  --sticker-family-decalage:       -45%;
  --sticker-family-rotation:        -8deg;

  /* Sticker « max de choix » (illustration `frame-181.png`, « MAX DE CHOIX,
     MAX DE FUN »), à cheval sur la limite « Comment ça marche » (blanc cassé)
     vers « Vos jeux préférés du moment » (bleu ciel). Recette du 02/10/2026
     (cas 1, note 411). Ces jetons visaient jusqu'ici l'autocollant rose de la
     bande médias, par erreur d'identification : ils pilotent désormais le bon
     sticker, et l'autocollant rose a ses propres jetons ci-dessous. Un
     décalage de -50 % pose exactement la moitié du sticker de chaque côté. */
  --sticker-choix-largeur-mini:    110px;
  --sticker-choix-largeur-fluide:   13vw;
  --sticker-choix-largeur-maxi:    180px;
  --sticker-choix-bord-mini:        16px;
  --sticker-choix-bord-fluide:       6vw;
  --sticker-choix-bord-maxi:        90px;
  --sticker-choix-decalage:        -50%;
  --sticker-choix-rotation:         -6deg;

  /* Autocollant rose de la bande médias, à cheval sur la limite formules
     vers médias : les valeurs qu'il avait avant, inchangées. */
  --sticker-medias-largeur-mini:     84px;
  --sticker-medias-largeur-fluide:   13vw;
  --sticker-medias-largeur-maxi:    190px;
  --sticker-medias-bord-mini:         8px;
  --sticker-medias-bord-fluide:       6vw;
  --sticker-medias-bord-maxi:        90px;
  --sticker-medias-decalage:        -55%;
  --sticker-medias-rotation:          0deg;
}

/* FICHIER GÉNÉRÉ : NE PAS MODIFIER À LA MAIN.
   ---------------------------------------------------------------------
   Produit par  : scripts/design-system/importer.ts
   Source       : project/design-system/ds-sheet.css
   Dépôt        : libetlou-git/design-system
   Commit       : 61f580c2f4fad579e8d1425520d423f49649b86d
   Familles     : .stars
   ---------------------------------------------------------------------
   Les règles des composants de la charte que le site emploie tels quels,
   recopiées de la planche sans retouche. Servi dans `/site.css` juste
   après les jetons, donc avant les feuilles du site : une page qui doit
   adapter un composant (une taille d'étoile, par exemple) le fait dans sa
   propre feuille, par-dessus, jamais ici.

   Pour ajouter une famille de classes, allonger `PREFIXES_COMPOSANTS` dans
   l'importeur et rejouer `bun run design-system:importer`. Voir
   `docs/recette-design/design-system.md`. */

.stars { display:inline-flex; gap:5px; align-items:center; }
.stars .star { width:26px; height:26px; display:block; flex:none; transition: fill var(--dur-fast) var(--ease-soft); }
.stars--carotte .star { fill: color-mix(in srgb, var(--ll-craie-400) 22%, transparent); }
.stars--carotte .star.is-on { fill: var(--ll-carotte-400); }
.stars--jasmin .star { fill: color-mix(in srgb, var(--ll-craie-400) 28%, transparent); }
.stars--jasmin .star.is-on { fill: var(--ll-jasmin-400); }

/* Feuille de style du site public : palette, typographie et sections,
   d'après la charte relevée sur libetlou.com. */

/* ---------- Polices auto-hébergées ----------
   Les graisses de la charte (`colors_and_type.css` du dépôt design-system,
   copiées telles quelles depuis `project/fonts/`), servies depuis
   `/assets/fonts/` et jamais par Google Fonts (bandeau de consentement).

   Neulis Neue (titres, boutons, exergues) : une face par graisse, de Light
   300 à Black 900 ; les italiques de la charte ne sont pas servies, aucun
   écran ne les emploie.

   Comfortaa (texte courant) : le fichier est une police **variable** (axe
   400 à 700). Une seule face par sous-ensemble, déclarée sur toute la plage,
   pour que le SemiBold 600 des puces (`--fw-chip`) et le Medium 500 soient
   rendus pour de vrai ; deux faces figées 400 et 700 faisaient retomber le
   600 en gras. `--fw-light` (300) n'existe pas dans ce fichier et s'affiche
   en 400. Socle du lot 1 de la recette d'Alban, cas 243, note 701. */
@font-face {
  font-family: "Neulis Neue";
  src: url("/assets/fonts/neulis-neue-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Neue";
  src: url("/assets/fonts/neulis-neue-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Neue";
  src: url("/assets/fonts/neulis-neue-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Neue";
  src: url("/assets/fonts/neulis-neue-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Neue";
  src: url("/assets/fonts/neulis-neue-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Neue";
  src: url("/assets/fonts/neulis-neue-extra-bold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Neue";
  src: url("/assets/fonts/neulis-neue-black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Comfortaa";
  src: url("/assets/fonts/comfortaa-400-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Comfortaa";
  src: url("/assets/fonts/comfortaa-400-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Surcouche de la charte : les teintes de texte (note 286) -------
   Les jetons de la charte arrivent **avant** cette feuille, par
   `src/site/design-system/colors-et-types.css`, fichier généré depuis
   `project/colors_and_type.css` du dépôt `libetlou-git/design-system` (lot L3
   de la recette design, #348). Ce fichier ne se retouche pas : il est la copie
   fidèle de la source, et `test/site-couleurs.test.ts` le vérifie par une
   empreinte. Une couleur qui manque se demande au design system par une issue
   « [Design system] », elle ne s'invente pas dans une feuille du site.

   Trois règles de la charte valent pour tout le site :
   - **jamais de noir ni de blanc purs**, ni en couleur, ni en ombre ;
   - **Citron vert** pour l'action et la validation (c'est le seul vert) ;
     **Carotte** pour l'erreur et le refus (il n'y a pas de rouge) ;
     **Ciel** pour la sélection, le survol et le focus ;
   - **Jasmin** en bouton secondaire, **Framboise** et **Lila** en tags ;
     aucun pastel en bouton primaire.

   Ce bloc est la **seule** correction que le site pose par-dessus la charte,
   et c'est la recette d'Alban du 01/10/2026 (note 286) qui l'a demandée :
   « aucune teinte de la charte ne passe ce seuil en petit texte, ni pour
   l'erreur, ni pour la validation. Il manque une teinte foncée à ces deux
   familles. » Les teintes 500 de la source plafonnent autour de 2,7 pour 1 sur
   le blanc cassé, très en dessous des 4,5 pour 1 exigés par le WCAG en petit
   texte. Chaque 600 ci-dessous garde la teinte et la saturation de sa famille ;
   seule sa luminosité descend, jusqu'à passer le seuil sur les trois fonds du
   site (blanc cassé, blanc 100, fond creusé). Les aplats (pastilles, bandeaux)
   gardent le 400 : seul le **texte** passe au 600, par `--ll-*-ink`.

   Ces jetons sont à reporter côté design system, où nous n'avons pas le droit
   d'écriture : c'est noté dans `docs/wiki-a-reporter.md`. Le jour où Morgane
   les intègre, ce bloc disparaît et l'import suffit. */
:root {
  --ll-citron-600: #676B0F;    /* 5,21 pour 1 sur le blanc cassé */
  --ll-ciel-600: #2A68AA;      /* 5,25 */
  --ll-jasmin-600: #7F630D;    /* 5,20 */
  --ll-carotte-600: #925607;   /* 5,40 */
  --ll-framboise-600: #C31E6A; /* 5,17 */
  --ll-lila-600: #685BAE;      /* 5,19 */

  --ll-citron-ink: var(--ll-citron-600);
  --ll-ciel-ink: var(--ll-ciel-600);
  --ll-jasmin-ink: var(--ll-jasmin-600);
  --ll-carotte-ink: var(--ll-carotte-600);
  --ll-framboise-ink: var(--ll-framboise-600);
  --ll-lila-ink: var(--ll-lila-600);

  /* Rôles de texte : ils portent un message, donc ils visent la teinte de
     texte accessible et jamais l'aplat (note 286). Un fond d'alerte se prend
     dans les niveaux 50 et 100 de la même famille, comme `.cmd-verrous`. */
  --color-success: var(--ll-citron-ink);
  --color-warning: var(--ll-carotte-ink);
  --color-danger:  var(--ll-carotte-ink);
}

/* ---------- Palette du site : des alias sur les jetons ----------
   Les noms historiques restent, pour ne pas réécrire tout le site d'un coup
   (ticket #299) : ils ne portent plus de valeur, seulement un jeton. Vingt-
   quatre feuilles les emploient, et un renommage massif noierait la vraie
   correction dans du bruit : les alias sont donc voulus, et ils ne sont que
   des alias. Aucune valeur ne se pose ici. */
:root {
  --craie: var(--ll-craie-400);          /* texte principal */
  --beige: var(--ll-blanc-400);          /* fond principal */
  --blanc: var(--ll-blanc-100);
  --citron-vert: var(--ll-citron-400);   /* accent CTA */
  /* Le design system n'a pas de « citron foncé » : il a un Citron 500
     (`#929D30`, teinte de tag) et une teinte de texte `--ll-citron-ink`. Les
     quatre emplois du site sont du **texte** ou un trait (`.funnel-remise`,
     `.pt-stock.est-dispo`, l'`outline` de la formule choisie) plus un aplat
     d'étape courante qui porte du texte clair. Le 500 plafonne à 2,71 pour 1
     sur le blanc cassé : il ne peut pas porter du petit texte. L'alias vise
     donc l'encre, qui passe les 4,5 pour 1 ; l'aplat d'étape s'en trouve
     seulement plus foncé, et son texte clair y gagne (5,46 pour 1). */
  --citron-fonce: var(--ll-citron-ink);
  --ciel: var(--ll-ciel-400);            /* fond footer */
  --lila: var(--ll-lila-400);
  --carotte: var(--ll-carotte-400);      /* bandeau annonce */
  --framboise: var(--ll-framboise-400);  /* fond header */
  --jasmin: var(--ll-jasmin-400);
  --gris-bordure: var(--color-border);   /* trait discret de la charte */
  /* Teinte d'ombre : la Craie à 10 %, l'ombre de la charte. Les feuilles
     composent leur propre décalage avec elle (`box-shadow: … var(--ombre)`). */
  --ombre: color-mix(in srgb, var(--ll-craie) 10%, transparent);
  --police-titre: "Neulis Neue", "Comfortaa", system-ui, sans-serif;
  --police-corps: "Comfortaa", system-ui, sans-serif;
  /* La famille à chasse fixe du design system (`--font-mono`) : un code de
     parrainage se lit et se recopie caractère par caractère (lot L7). */
  --police-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--police-corps);
  font-size: 14px;
  line-height: 1.5;
  background: var(--beige);
  color: var(--craie);
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
main { display: block; }
section { padding: 48px 20px; }
.seul-mobile { display: none; }

h1, h2, h3 { margin: 0 0 12px; }
.titre-hero {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.2;
}
.titre-section {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.2;
  text-align: center;
}
.titre-section p { margin: 0; }
.sous-titre-section {
  font-family: var(--police-corps);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 24px;
}
.texte-section { max-width: 720px; margin: 0 auto 24px; }
.mot-couleur { color: var(--citron-fonce); }
.mot-decore { position: relative; display: inline-block; }
.mot-decore img {
  position: absolute; left: 0; bottom: -0.08em; width: 100%; height: auto;
  pointer-events: none;
}

/* ---------- Boutons pilule ----------
   Gabarit de la charte (planche « Buttons » de `ds-sheet.css` et échelle
   « Font size » de `colors_and_type.css`) : Neulis Neue, capitales, capsule,
   12/16 en mobile et 14/16 en ordinateur par `--fs-btn` / `--lh-btn`.
   Graisse : la planche dit Medium (500), mais toutes les pages de la
   consolidation la forcent en **Bold** (`.btn{font-weight:700}` dans leur
   en-tête) ; le site suit la charte rendue, et l'écart est remonté à Alban.
   Survol, focus et appui ont le même rendu : l'aplat passe au ton `press` de
   son rôle (Citron 200 pour le principal, Jasmin 200 pour le secondaire),
   jamais un filtre de luminosité. Désactivé : Craie 200 sur Blanc 50.
   Socle du lot 1 de la recette d'Alban, cas 243, note 701. */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  padding: 12px 24px;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}
.btn:focus-visible { outline: 2px solid var(--ll-ciel-400); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--role-disabled-bg); color: var(--role-disabled-fg);
  border-color: transparent; cursor: not-allowed;
}
/* `btn--lg` de la charte : 16/20 en mobile, 18/20 en ordinateur. */
.btn-grand { font-size: var(--fs-btn-lg); line-height: var(--lh-btn-lg); padding: 18px 40px; }
.btn-principal { background: var(--role-primary); color: var(--craie); }
.btn-principal:hover, .btn-principal:active, .btn-principal:focus-visible {
  background: var(--role-primary-press); color: var(--ll-craie-400);
}
.btn-secondaire { background: var(--blanc); color: var(--craie); border: 1px solid var(--craie); }
/* Même bouton, fond **transparent** : il prend la couleur de ce qu'il y a
   derrière au lieu d'y poser une pastille blanche (recette d'Alban du
   02/10/2026, note 359). Il ne redéfinit ni la police, ni la taille, ni les
   marges intérieures : `.btn` les tient, donc le gabarit reste celui de
   `.btn-principal`, et seul le fond les distingue. */
.btn-contour { background: transparent; color: var(--craie); border: 1px solid var(--craie); }
.lien-souligne { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Bouton tertiaire du design system (`btn--tertiary`, planche Buttons) : sans
   fond, souligné Ciel 400 comme un lien, Ciel 200 au survol (recette d'Alban,
   note 401). C'est un vrai bouton : il garde le clavier et le focus visible. */
.btn-tertiaire {
  display: inline-block; background: transparent; border: none; cursor: pointer;
  padding: 6px 4px; color: var(--craie);
  font-family: var(--police-corps); font-weight: 700; font-size: 14px;
  text-transform: none; letter-spacing: 0;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--ll-ciel-400);
}
.btn-tertiaire:hover, .btn-tertiaire:active { text-decoration-color: var(--ll-ciel-200); }
.btn-tertiaire:focus-visible { outline: 2px solid var(--ll-ciel); outline-offset: 2px; border-radius: 4px; }

.btn-header {
  text-transform: none; letter-spacing: 0; font-size: 15px;
  border-radius: 999px; padding: 10px 24px;
}
.btn-jasmin { background: var(--role-secondary); color: var(--role-secondary-fg); }
.btn-jasmin:hover, .btn-jasmin:active, .btn-jasmin:focus-visible {
  background: var(--role-secondary-press); color: var(--ll-craie-400);
}

.fond-jasmin { background: var(--jasmin); }
.fond-lila { background: var(--lila); }

/* ---------- Bandeau aperçu brouillons (back office) ---------- */
.bandeau-apercu {
  background: var(--craie); color: var(--blanc);
  text-align: center; padding: 8px 16px; font-size: 13px;
}
.bandeau-apercu a { color: var(--jasmin); }

/* ---------- Bandeau d'annonce + header ---------- */
.bandeau-annonce {
  position: relative;
  background: var(--carotte);
  color: var(--craie);
  text-align: center;
  padding: 15px 44px;
  font-weight: 700;
  font-size: 14px;
}
.bandeau-annonce[hidden] { display: none; }
.bandeau-annonce a { text-decoration: none; color: inherit; }
/* Cas 254 : avec un lien, tout le bandeau est cliquable (le lien s'étend sur
   la bande) ; la croix reste au-dessus et ne suit pas le lien. Sans croix,
   le texte reprend toute la largeur. */
.bandeau-annonce-lien::after { content: ""; position: absolute; inset: 0; }
.bandeau-annonce-lien:focus-visible { outline: 2px solid var(--craie); outline-offset: 2px; }
.bandeau-annonce-fixe { padding-left: 16px; padding-right: 16px; }
.bandeau-fermer {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  z-index: 1;
  background: none; border: none; font-size: 20px; line-height: 1;
  color: inherit; cursor: pointer;
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--beige);
}
.header-barre {
  display: flex; align-items: center; gap: 24px;
  max-width: 1400px; margin: 0 auto; padding: 20px 24px;
}
.header-logo img { height: 34px; width: auto; display: block; }
.header-nav {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  margin-left: auto;
}
.header-nav a {
  text-decoration: none; font-weight: 500; font-size: 15px;
}
.header-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.header-actions { display: flex; gap: 10px; align-items: center; }
.burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.burger span {
  display: block; width: 24px; height: 3px; margin: 5px 0;
  background: var(--craie); border-radius: 2px;
}
/* Le burger disparaît tant que le panneau est ouvert : la croix du panneau
   prend le relais. Deux classes contre une : la règle l'emporte sur le
   `display: block` du média sans dépendre de l'ordre des règles. */
body.menu-ouvert .burger { display: none; }

/* ---------- Menu mobile : tiroir en overlay (ticket #12) ----------
   Panneau et voile sont en `position: fixed` : ils recouvrent la page au lieu
   de la pousser vers le bas, et le contenu ne bouge pas d'un pixel à
   l'ouverture. L'état vit dans la classe `menu-ouvert` posée sur le <body> par
   site.js ; sans JS elle n'arrive jamais et le tiroir reste hors écran. */
.menu-voile {
  position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, var(--ll-craie) 50%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
body.menu-ouvert .menu-voile { opacity: 1; visibility: visible; }

.menu-mobile {
  position: fixed; top: 0; right: 0; z-index: 100;
  width: 80%; max-width: 420px; height: 100%;
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 24px 24px; background: var(--beige);
  box-shadow: -8px 0 24px var(--ombre);
  overflow-y: auto;
  /* `visibility` évite qu'un lien hors écran reste atteignable au clavier. */
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s;
}
body.menu-ouvert .menu-mobile { transform: none; visibility: visible; }
/* Le corps ne défile plus derrière le tiroir. */
body.menu-ouvert { overflow: hidden; }

.menu-fermer {
  align-self: flex-end; background: none; border: none; cursor: pointer;
  font-size: 32px; line-height: 1; padding: 0 4px; color: var(--craie);
}
.menu-mobile-liens { display: flex; flex-direction: column; gap: 14px; }
.menu-mobile a { text-decoration: none; font-weight: 700; font-size: 16px; }
/* Les boutons sont en haut du panneau, sous la croix : « Je m'abonne »
   d'abord (recette d'Alban du 28/09/2026, note 131). */
.menu-mobile-actions {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 8px;
}
.menu-mobile-pied {
  border-top: 1px solid var(--gris-bordure);
  margin-top: 20px; padding-top: 16px; text-align: center;
}
.menu-mobile-sociaux { display: flex; gap: 14px; justify-content: center; }
.menu-mobile-social { display: inline-flex; color: var(--craie); }
.menu-mobile-soutien { margin: 14px 0 8px; font-size: 12px; }
.menu-mobile-partenaires {
  display: flex; gap: 16px; align-items: center; justify-content: center;
}
.menu-mobile-partenaires img { height: 34px; width: auto; }
/* Ticket #653 : le logo de la Région est un trait blanc, illisible sur le
   panneau clair du menu ; il passe en trait noir ici. Le pied de page, sur
   fond Ciel, garde le logo blanc. */
.menu-mobile-partenaires .logo-region { filter: brightness(0); }
.menu-mobile-copyright { margin: 14px 0 0; font-size: 12px; }

/* ---------- Footer ---------- */
/* Recette d'Alban du 25/09/2026 (cas 1 et 5) : le pied de page « mord » sur
   le bloc du dessus de la hauteur de ses arrondis, et il est compact. Le
   dernier bloc de la page prolonge son propre fond sous les coins arrondis
   par une bordure transparente (le fond se peint sous la bordure) : plus de
   beige qui dénote derrière les coins, quelle que soit la couleur du bloc.
   Le dernier *enfant*, pas la dernière <section> (retouche du cas 10) : sur le
   catalogue, les pages marque et le blog, le dernier bloc est une <div> de
   grille, et la dernière section est l'en-tête du haut. La bordure creusait
   alors 40 px sous la phrase de recherche, et le pied de page mordait sur les
   vignettes du bas. « Dernier » veut dire dernier affiché : un <script>, un
   <dialog> ou un bloc [hidden] posé après lui ne compte pas. */
main > :not(script, template, dialog, [hidden]):not(:has(~ :not(script, template, dialog, [hidden]))) {
  border-bottom: 40px solid transparent;
}
.site-footer {
  background: var(--ciel);
  border-radius: 40px 40px 0 0;
  margin-top: -40px;
  position: relative;
  padding: 32px 24px 20px;
  text-align: center;
}
.site-footer > .footer-logo { display: block; margin: 0 auto 20px; }
.footer-colonnes {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px 40px;
  max-width: 1100px; margin: 0 auto; align-items: center;
}
.footer-liens { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 0 auto; }
.footer-liens a {
  font-size: 14px; font-weight: 500; text-decoration: none;
  width: fit-content;
}
.footer-liens a:hover { text-decoration: underline; text-underline-offset: 4px; }

.footer-centre { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.footer-logo { max-height: 48px; width: auto; }
.footer-sociaux { display: flex; gap: 14px; }
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--craie);
}
.footer-social svg { width: 28px; height: 28px; }
.footer-partenaires { display: flex; gap: 16px; align-items: center; }
.footer-partenaires img { max-height: 36px; width: auto; }
.footer-baseline { font-weight: 500; font-size: 15px; margin: 0; }
.footer-copyright { font-size: 13px; margin: 0; }

/* ---------- Formulaires ---------- */
input[type="text"], input[type="email"] {
  font-family: var(--police-corps);
  font-size: 14px;
  color: var(--craie);
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: 20px;
  padding: 10px 18px;
}
.formulaire-message {
  margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--craie);
}

/* ---------- Héros génériques ---------- */
.hero-ciel { background: var(--ciel); }
.hero-lila { background: var(--lila); }
.cc-hero, .pro-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
  padding: 56px 20px;
}
.hero-texte { max-width: 520px; margin-left: auto; }
.hero-visuel img { border-radius: 24px; display: block; }
.hero-surtitre { font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.hero-baseline { margin: 0 0 20px; }

/* ---------- Page contact ---------- */
.contact-hero { text-align: center; max-width: 720px; margin: 0 auto; padding-top: 32px; }
.contact-retour { display: inline-block; margin-bottom: 24px; }
.contact-oeil { width: 140px; display: block; margin: 0 auto 16px; }
.contact-intro { margin: 24px 0; }
.contact-moyens {
  display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px;
}
.contact-moyen { display: flex; align-items: center; gap: 12px; }
.contact-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; color: var(--craie);
}
.contact-pastille-chat { background: var(--ciel); }
.contact-pastille-mail { background: var(--carotte); }

/* ---------- Page informations légales ---------- */
.legal-hero {
  background: var(--lila); text-align: center; padding: 48px 20px 32px;
}
.legal-hero img { width: 120px; margin-bottom: 8px; }
.legal-onglets {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  border-bottom: 1px solid var(--gris-bordure);
  padding: 16px 20px 0; background: var(--blanc);
}
.onglet {
  font-family: var(--police-corps); font-weight: 700; font-size: 14px;
  color: var(--craie); background: none; border: none; cursor: pointer;
  padding: 10px 16px; border-bottom: 3px solid transparent;
}
.onglet.actif { border-bottom-color: var(--citron-fonce); }
.legal-contenu { max-width: 860px; margin: 0 auto; padding: 32px 20px 64px; }
.legal-maj { font-size: 12px; opacity: 0.8; }

/* ---------- Page carte-cadeau ---------- */
.cc-activation { margin-top: 16px; font-size: 13px; }

.bandeau-defilant { overflow: hidden; padding: 24px 0; }
.bandeau-piste {
  display: flex; gap: 56px; width: max-content;
  animation: defilement 30s linear infinite;
}
.bandeau-carte {
  display: inline-flex; align-items: center; gap: 56px;
  font-family: var(--police-titre);
  font-weight: 500; font-size: 19px; letter-spacing: 0.5px; white-space: nowrap;
}
.bandeau-picto {
  width: 11px; height: 11px; border-radius: 50%; background: var(--citron-vert);
  flex: none;
}
@keyframes defilement {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau-piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

.cc-choix { text-align: center; }
.cc-vignettes {
  display: flex; gap: 24px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin: 32px 0;
}
.cc-vignette {
  width: 260px; padding: 28px 20px; border-radius: 50%;
  aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
}
.cc-vignette img { width: 70px; }
.cc-vignette h3 { font-family: var(--police-titre); font-size: 20px; margin: 0; }
.cc-vignette p { margin: 0; font-size: 13px; }
.cc-vignette-lila { background: var(--lila); }
.cc-vignette-carotte { background: var(--carotte); }
.cc-ou { font-family: var(--police-titre); font-size: 22px; font-weight: 700; }

.cc-comparatif {
  position: relative; display: flex; gap: 32px; align-items: center;
  justify-content: center; flex-wrap: wrap;
}
.cc-comparatif-illu { max-width: 320px; }
.cc-comparatif-texte { text-align: center; }
.cc-sticker-365 {
  position: absolute; right: 6%; bottom: 8%; width: 110px;
}

.cc-ccm, .cc-avantages, .cc-photos { text-align: center; }
.cc-etapes, .cc-avantages-liste {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px; max-width: 1000px; margin: 0 auto 32px;
}
.cc-etape img { height: 90px; width: auto; }
.cc-etape h3, .cc-avantage h3 {
  font-family: var(--police-corps); font-size: 14px; font-weight: 700; margin: 12px 0 6px;
}
.cc-etape p, .cc-avantage p { margin: 0; font-size: 12px; }
.cc-avantage img { border-radius: 16px; }
.cc-vague { line-height: 0; }
.cc-vague img { width: 100%; display: block; }

.cc-photos-grille {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.cc-photos-grille img {
  width: 180px; height: 180px; object-fit: cover; border-radius: 16px;
}

.bloc-faq-appel { text-align: center; background: var(--beige); }

/* ---------- Page active-cadeau ---------- */
.ac-fond { background: var(--lila) center top / cover no-repeat; }
.ac-hero {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.ac-form { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.ac-liberte {
  margin-top: 24px; padding-top: 8px;
}
.ac-liberte h2 { font-family: var(--police-corps); font-size: 14px; font-weight: 700; }
.ac-liberte-liste p { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.coche { flex: none; }
.ac-hero-photo { border-radius: 24px; }

.ac-etapes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  max-width: 1100px; margin: 0 auto;
}
.ac-etape {
  background: color-mix(in srgb, var(--ll-blanc-100) 90%, transparent); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.ac-etape-num {
  font-family: var(--police-titre); font-size: 28px; font-weight: 700; margin: 0;
}
.ac-etape-num span { font-size: 16px; opacity: 0.6; }
.ac-ou { margin: 0; font-weight: 700; }
.ac-note { font-size: 11px; opacity: 0.8; }

.ac-catalogue { text-align: center; }
.ac-catalogue-illu { width: 140px; margin-bottom: 8px; }

/* ---------- Blocs partagés ---------- */
.bloc-ccm { text-align: center; background: var(--beige); }
.ccm-etapes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px; max-width: 1000px; margin: 0 auto 32px;
}
.ccm-etape img { height: 90px; width: auto; }
.ccm-etape p { font-size: 13px; }

.bloc-newsletter { text-align: center; background: var(--beige); }
.newsletter-visuel { width: 110px; margin-bottom: 8px; }
.newsletter-texte { max-width: 560px; margin: 0 auto 24px; }
/* Champ et bouton côte à côte, centrés ; consentement et message sur leur
   propre ligne, centrés eux aussi (recette d'Alban, cas 1). En téléphone, le
   champ prend la largeur et le bouton passe dessous. */
.newsletter-form {
  display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap;
  max-width: 560px; margin: 0 auto;
}
.newsletter-form input { min-width: 260px; flex: 1 1 260px; }
.newsletter-form .newsletter-consentement,
.newsletter-form .formulaire-message { flex: 1 0 100%; text-align: center; }

/* ---------- Page espace pro ---------- */
.pro-badges {
  display: flex; gap: 40px; justify-content: center; flex-wrap: wrap;
}
.badge-reassurance { text-align: center; width: 200px; }
.badge-reassurance img { height: 80px; width: auto; }
.badge-reassurance p { font-weight: 700; font-size: 14px; }

.pro-tranquillite, .pro-avantages, .pro-clients { text-align: center; }
.pro-avantages { position: relative; }
.pro-avantages-deco { width: 120px; margin-bottom: 8px; }
.pro-avantages-visuel { max-width: 900px; width: 100%; margin: 24px auto 0; }
.pro-clients .titre-section { margin-top: 24px; }

.pro-formule {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.pro-formule-visuel { position: relative; }
.pro-formule-photo { border-radius: 24px; display: block; }
.pro-formule-deco {
  position: absolute; width: 110px; right: -20px; bottom: -20px;
}
.pro-formule-texte .titre-section,
.pro-formule-texte .sous-titre-section { text-align: left; }
.pro-formule-texte .texte-section { margin: 0 0 24px; }
.pro-bandeau-large { display: block; width: 100%; }


/* ---------- Formulaires publics, consentement, 404 (ticket #97) ---------- */

/* Le champ piège : masqué à l'oeil, sorti du flux, de la tabulation et de
   l'arbre d'accessibilité. `display:none` seul suffirait à un gestionnaire de
   mots de passe pour le remplir, ce qui ferait rejeter l'envoi d'un humain. */
.champ-piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire-message {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
.formulaire-message-ok { color: var(--ll-citron-ink); font-weight: 700; }
.formulaire-message-ko { color: var(--ll-carotte-ink); }

.newsletter-consentement {
  max-width: 520px;
  margin: 10px auto 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.75;
}

/* --- Formulaire de contact. */
.contact-formulaire { max-width: 620px; margin: 0 auto; }
.contact-formulaire form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.contact-formulaire label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.contact-formulaire input,
.contact-formulaire textarea {
  font: inherit;
  font-weight: 400;
  padding: 12px 14px;
  border: 1px solid var(--gris-bordure);
  border-radius: 12px;
  background: var(--blanc);
  color: inherit;
}
.contact-formulaire textarea { resize: vertical; min-height: 140px; }
.contact-formulaire input:focus-visible,
.contact-formulaire textarea:focus-visible { outline: 2px solid var(--craie); outline-offset: 1px; }
.contact-formulaire button { align-self: flex-start; }
.contact-mention { font-size: 12px; line-height: 1.5; opacity: 0.75; margin: 0; }
.contact-formulaire-sous-titre { font-size: 14px; opacity: 0.8; }

/* --- Bandeau de consentement. Il se pose au-dessus de tout le reste, mais
   sans voile modal : le site reste lisible pendant le choix, ce qui est
   précisément ce que la CNIL demande de ne pas empêcher. */
/* Recette d'Alban du 02/10/2026 (note 287, cas 7) : « on part sur l'esthétique
   du bandeau Cookiebot pour le moment ». D'où la barre pleine largeur collée
   en bas, sans coins arrondis ni marges flottantes, la marque à gauche, le
   texte au centre et la colonne des gestes à droite derrière un filet. Les
   couleurs et les polices restent celles du design system. */
.cookies-bandeau {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--beige);
  border-top: 1px solid var(--gris-bordure);
  box-shadow: 0 -6px 24px var(--ombre);
}
.cookies-bandeau[hidden] { display: none; }
.cookies-corps {
  max-width: 1360px;
  margin: 0 auto;
  padding: 20px 24px;
  display: grid;
  /* La colonne de la marque garde sa place même sans logo réglé : sans elle,
     les deux blocs suivants remontent d'une colonne et la colonne des gestes
     se retrouve écrasée. */
  /* 300 px : « Paramétrer mes choix », le plus long des trois libellés, tient
     sur une seule ligne, donc les trois boutons ont la même hauteur. */
  grid-template-columns: auto minmax(0, 1fr) 300px;
  align-items: start;
  gap: 20px 28px;
  max-height: 70vh;
  overflow-y: auto;
}
.cookies-marque img { display: block; width: auto; height: 40px; }
.cookies-texte h2 { margin: 0 0 8px; font-size: 18px; }
.cookies-texte p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.cookies-texte > :last-child { margin-bottom: 0; }

/* Les trois gestes, dans l'ordre demandé par Alban le 02/10/2026 (note 359) :
   « Tout accepter », « Paramétrer mes choix », « Tout refuser ». Tous les
   trois sont de vrais boutons, de même largeur, de même hauteur et de même
   police : c'est `.btn` qui tient la taille et la police, et aucune des deux
   variantes ne les redéfinit. Seul le fond change.

   Refuser ne doit jamais devenir le parcours dégradé au premier remaniement de
   cette feuille : c'est l'exigence de la CNIL, et le gardien FR-WF-global-06
   de `test/site-formulaires.test.ts` lit ce fichier pour s'en assurer. Le
   filet reprend celui de la colonne de droite de Cookiebot. */
.cookies-gestes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 28px;
  border-left: 1px solid var(--gris-bordure);
}
.cookies-actions { display: flex; flex-direction: column; gap: 10px; }
/* Les marges intérieures sont réduites **pour les trois à la fois** : le
   gabarit reste commun, c'est ce qui compte, et le libellé le plus long tient
   sur une ligne. */
.cookies-actions .btn { text-align: center; width: 100%; padding-left: 14px; padding-right: 14px; }

.cookies-liens { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 12px 0 0 !important; font-size: 13px; }
.cookies-lien,
.footer-lien-bouton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.cookies-detail { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.cookies-detail[hidden] { display: none; }
.cookies-finalite { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.cookies-finalite input { margin-top: 3px; }
.cookies-finalite input:disabled + span { opacity: 0.7; }

/* --- Page introuvable. */
/* Reprise de la 404 de libetlou.com (recette d'Alban, note 85) : fond orange
   sur toute la largeur jusqu'au pied de page, illustration « 404 », titre et
   texte centrés, puis les deux boutons. */
section.page-introuvable { text-align: center; background: var(--carotte); padding: 40px 20px 96px; }
section.page-introuvable > * { max-width: 620px; margin-left: auto; margin-right: auto; }
.introuvable-illustration { display: block; width: 100%; max-width: 480px; height: auto; margin-bottom: 24px; }
section.page-introuvable h1 {
  font-family: var(--police-titre); font-weight: 400; font-size: clamp(24px, 3vw, 36px); line-height: 1.25;
}
.introuvable-texte { font-size: 15px; line-height: 1.5; max-width: 440px; margin-bottom: 28px; }
.introuvable-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* En dessous de la largeur d'une tablette, la colonne des gestes passe sous le
   texte et le filet devient une ligne de séparation horizontale ; la marque
   disparaît, elle est déjà dans l'en-tête de la page. */
@media (max-width: 900px) {
  .cookies-corps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cookies-marque { display: none; }
  .cookies-gestes { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--gris-bordure); }
}
@media (max-width: 560px) {
  .cookies-corps { padding: 16px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .header-nav { display: none; }
  .header-actions { display: none; }
  /* Consolidation (composant En-tête) : en mobile, le cœur et le panier
     restent dans la barre, à gauche du ☰, comme la maquette. */
  .burger { display: block; margin-left: 0; }
}
@media (min-width: 1101px) {
  /* Au-delà du burger, ni tiroir ni voile : la barre desktop suffit. */
  .menu-mobile, .menu-voile { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-mobile, .menu-voile { transition: none; }
}
@media (max-width: 900px) {
  .cc-hero, .pro-hero, .ac-hero, .pro-formule { grid-template-columns: 1fr; }
  .hero-texte { margin-left: 0; }
  .cc-etapes, .cc-avantages-liste { grid-template-columns: 1fr; }
  .ccm-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Pied de page téléphone : les deux listes de liens côte à côte, logos
     et mentions dessous, au lieu de tout empiler. */
  .footer-colonnes { grid-template-columns: 1fr 1fr; gap: 16px 12px; justify-items: center; align-items: start; }
  .footer-centre { grid-column: 1 / -1; grid-row: 2; }
  .footer-liens, .footer-liens:last-child { align-items: center; }
  .footer-liens a, .footer-lien-bouton { font-size: 13px; }
  .seul-desktop { display: none; }
  .seul-mobile { display: block; }
}
@media (max-width: 560px) {
  section { padding: 36px 16px; }
  /* Recette du 02/10/2026 (cas 242, note 417) : en téléphone, les quatre
     pictos de « Comment ça marche » restent sur deux colonnes. */
  .ac-etapes { grid-template-columns: 1fr; }
  .cc-photos-grille img { width: 140px; height: 140px; }
  .cc-sticker-365 { position: static; margin-top: 16px; }
}

/* ---------- Panier flottant (ticket #99) ---------- */
.btn-panier { position: relative; }
/* Pastilles (nombre d'articles du panier, points d'attention du compte) :
   Carotte et Craie, les couleurs d'alerte de la charte (recette d'Alban du
   28/09/2026, note 131 ; voir docs/charte-graphique.md). */
.pastille { display: inline-block; min-width: 1.5em; padding: 0 5px; border-radius: 999px; background: var(--carotte); color: var(--craie); font-family: var(--police-corps); font-weight: 700; font-size: 11px; line-height: 1.5em; text-align: center; letter-spacing: 0; }
.pastille[hidden] { display: none; }
.panier-compteur { margin-left: 6px; }
.panier-flottant { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--blanc); box-shadow: -8px 0 30px color-mix(in srgb, var(--ll-craie) 18%, transparent); z-index: 60; display: flex; flex-direction: column; }
.panier-flottant[hidden] { display: none; }
/* Cas 297 (note 1098) : en mobile, un ajout réussi n'ouvre plus le panier,
   il s'annonce par ce message bref et une pulsation de la pastille. */
.panier-bref {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 420px; margin: 0 auto; padding: 10px 10px 10px 18px; border-radius: 999px;
  background: var(--ll-craie-400); color: var(--blanc); font-weight: 700; font-size: 15px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ll-craie) 25%, transparent);
}
.panier-bref[hidden] { display: none; }
.panier-bref button {
  border: none; border-radius: 999px; padding: 6px 16px; cursor: pointer;
  background: var(--ll-citron-400); color: var(--ll-craie-400); font: inherit;
}
.panier-bref-visible { animation: panier-bref-entree .25s ease-out; }
@keyframes panier-bref-entree { from { opacity: 0; transform: translateY(12px); } }
.panier-compteur-pulse { animation: panier-compteur-pulse .5s ease-out; }
@keyframes panier-compteur-pulse { 50% { transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .panier-bref-visible, .panier-compteur-pulse { animation: none; } }
.panier-flottant-tete { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--gris-bordure); }
/* Écran 01 du lot L8 (ticket #307) : le titre du panneau porte le chariot de
   l'en-tête, dans la couleur de marque de la maquette (Framboise en tag). */
.panier-flottant-tete h2 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.panier-flottant-tete h2 .icone-entete { color: var(--ll-framboise-400); flex: none; }
.panier-fermer { border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.panier-flottant-corps { padding: 16px 20px; overflow: auto; flex: 1; }
/* La phrase de tête de l'écran 01 : « N jeux dans votre panier, dont X inclus
   dans votre formule ». */
.panier-resume { margin: 0 0 14px; line-height: 1.5; }
.panier-lignes { list-style: none; margin: 0 0 16px; padding: 0; }
.panier-ligne { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gris-bordure); }
.panier-lignes .panier-ligne:last-child { border-bottom: 0; }
.panier-ligne img { border-radius: 10px; object-fit: cover; width: 56px; height: 56px; flex: none; }
.panier-ligne a { flex: 1; }
.panier-ligne.est-indisponible a { text-decoration: line-through; color: var(--ll-craie-100); }
.panier-indispo { color: var(--ll-carotte-ink); font-size: .85em; }
/* Note 374 d'Alban (cas 52) : « Cet article compte xN » est en Carotte dans
   le panier, comme sur la vignette du catalogue et sur la fiche produit. La
   teinte employée est l'encre de la famille (`--ll-carotte-ink`), seule à
   tenir 4,5 pour 1 en petit texte sur les fonds du site (note 286). */
.panier-coeff { font-size: .85em; font-weight: 700; color: var(--ll-carotte-ink); }
/* Le « Retirer » d'une ligne est une corbeille depuis le lot L8 : une cible de
   44 px, le nom du jeu dans l'`aria-label`, et le Craie de la charte (le
   Carotte est réservé à l'erreur, et un retrait voulu n'en est pas une). */
.panier-retirer { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 999px; background: none; color: var(--ll-craie-200); cursor: pointer; }
.panier-retirer:hover, .panier-retirer:focus-visible { color: var(--craie); background: var(--color-bg-sunken); }
.panier-message { margin: 0 0 12px; color: var(--ll-craie-300); }
.panier-info { color: var(--ll-carotte-ink); }
.panier-total { font-weight: 600; text-align: right; margin: 0 0 16px; }
/* Les points bonus d'un abonné, même à 0 (recette d'Alban du 29/09/2026,
   cas 57), en carte Lila depuis l'écran 01 du lot L8 : la tirelire, « Ma
   cagnotte », puis le nombre de points bonus. Le Lila est un aplat de tag de
   la charte, et le texte dessus reste en Craie, à 8,4 pour 1. */
.panier-cagnotte { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; background: var(--ll-lila-400); color: var(--craie); }
.panier-cagnotte-icone { flex: none; }
.panier-cagnotte-texte { min-width: 0; }
.panier-cagnotte p { margin: 0 0 2px; }
.panier-cagnotte p:last-child { margin: 0; }
.panier-cagnotte-titre { font-size: 1.05em; }
/* CO-01 (issue #3, cas 243) : l'encart « N jeux à la maison » ou « Retour
   déclaré », carte cerclée de Craie sous la cagnotte, lien vers RE-01. */
.panier-maison { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; border: 1.5px solid var(--craie); background: var(--blanc); color: var(--craie); }
.panier-maison-icone { flex: none; margin-top: 2px; }
.panier-maison-texte { min-width: 0; }
.panier-maison p { margin: 0 0 6px; font-size: .92em; }
.panier-maison .panier-maison-titre { font-size: 1.05em; }
.panier-maison-lien { display: inline-block; margin-top: 2px; font-weight: 700; color: var(--craie); text-decoration: underline; text-decoration-color: var(--ll-ciel-400); text-underline-offset: 4px; }
body.panier-ouvert { overflow: hidden; }
/* Bandeau d'état en haut du panier (recettes du 25/09 et du 28/09/2026, cas 53) :
   pourquoi le client ne peut pas commander, et le bouton qui le débloque. */
.panier-bandeau-etat { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--carotte); color: var(--craie); }
.panier-bandeau-etat p { margin: 0 0 10px; font-weight: 700; }
.panier-bandeau-etat .btn-principal { background: var(--blanc); }
.panier-bandeau-etat .panier-deja-abonne { margin: 10px 0 0; font-weight: normal; font-size: .9em; }
.panier-bandeau-etat .panier-deja-abonne a { color: inherit; font-weight: 700; }
.panier-note-prospect { margin: 0 0 12px; font-size: .85em; color: var(--craie); opacity: .8; }
/* Une ligne (cas 52) : le nom, la marque dessous, le coefficient en toutes lettres. */
.panier-ligne-texte { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.panier-marque { font-size: .85em; color: var(--craie); opacity: .75; }
/* « Vider » reste aligné à droite dans tous les états du panier, seul ou à côté
   de « Commander » (recette d'Alban du 29/09/2026, note 220, cas 53). */
.panier-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 16px; }
.panier-actions > :first-child:not(:last-child) { margin-right: auto; }
/* Écran 01 du lot L8 : « Valider mon panier » tient toute la largeur du
   panneau, « Vider » reste un geste discret à côté. Dans le panneau flottant,
   le bloc est collé en bas, comme la maquette. */
.panier-valider { flex: 1 1 100%; text-align: center; order: -1; }
.panier-flottant .panier-actions { position: sticky; bottom: 0; margin: 0 -20px -16px; padding: 16px 20px; background: var(--blanc); border-top: 1px solid var(--gris-bordure); }
/* Sous « Valider mon panier », « Vider » reste disponible mais ne lui dispute
   pas l'attention : la maquette ne dessine qu'un bouton à cet endroit. */
.panier-actions .panier-valider + [data-panier-vider] { margin: 0 auto; border: 0; background: none; padding: 0; text-decoration: underline; font-size: .95em; color: var(--ll-craie-200); }
.panier-actions .panier-valider + [data-panier-vider]:hover { color: var(--craie); }
/* Le compteur « − n + » d'un jeu déjà au panier (cas 50). */
[data-panier-ajout][hidden] { display: none; }
.btn.panier-quantite { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 10em; padding: 4px 6px; font-size: 15px; }
.panier-quantite button { border: 0; background: none; color: inherit; font: inherit; font-size: 20px; line-height: 1; padding: 2px 12px; cursor: pointer; }
.panier-quantite-n { min-width: 1.5em; text-align: center; }
/* Décision d'Alban n° 141 : au maximum par jeu, ou sans stock, le « + »
   reste à sa place (note 183), grisé, et son infobulle dit pourquoi. */
.panier-quantite .panier-quantite-max { opacity: .35; cursor: not-allowed; }
/* La même chose sur une ligne de la fenêtre « Mon Lib et Lou », en pastille. */
.panier-ligne-quantite { display: inline-flex; align-items: center; flex: none; gap: 2px; border: 1px solid var(--gris-bordure); border-radius: 999px; font-size: 15px; }
.panier-ligne-quantite button { padding: 6px 10px; font-size: 18px; }

/* ---------- Écran 02 des maquettes : la commande en cartes (lot L8, #307) ----
   Chaque étape est une carte posée sur le fond de page : jeux choisis,
   cagnotte, livraison, paiement, récapitulatif. Les rayons, l'ombre et les
   couleurs viennent des jetons de la charte, jamais de la maquette. */
.cmd-retour { margin: 0 0 4px; }
.cmd-retour a { display: inline-flex; align-items: center; gap: 6px; color: var(--craie); text-decoration: none; }
.cmd-retour a:hover { text-decoration: underline; }
.cmd-carte { margin: 0 0 16px; padding: 18px 20px; border-radius: 18px; background: var(--color-bg-raised); box-shadow: var(--shadow); }
.cmd-carte > h2 { font-size: 1.1rem; margin: 0 0 12px; }
.cmd-icone { flex: none; color: var(--craie); }
/* La carte Lila de la cagnotte : un aplat de tag de la charte, texte en Craie. */
.cmd-carte-lila { background: var(--ll-lila-400); box-shadow: none; }
.cmd-carte-tete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cmd-carte-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cmd-carte-detail { color: var(--ll-craie-300); }
.cmd-carte-lila .cmd-carte-detail { color: var(--craie); opacity: .85; }
.cmd-carte-aide { margin: 10px 0 0; }
/* La carte repliable des jeux choisis : « N jeux sélectionnés » et, dessous,
   « X dans la formule · Y en plus ». */
.cmd-repli > summary { list-style: none; cursor: pointer; }
.cmd-repli > summary::-webkit-details-marker { display: none; }
.cmd-repli-tete { display: flex; align-items: center; gap: 14px; }
.cmd-repli-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cmd-repli-detail { color: var(--ll-craie-300); }
.cmd-chevron { flex: none; color: var(--ll-craie-200); transition: transform .15s ease; }
.cmd-repli[open] .cmd-chevron { transform: rotate(180deg); }
.cmd-repli[open] .cmd-repli-tete { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--gris-bordure); }
/* Le compteur « − n + » de la cagnotte (note 304 d'Alban du 02/10/2026). */
.cmd-points { margin: 0; display: flex; align-items: center; gap: 8px; flex: none; }
.cmd-pas { width: 38px; height: 38px; flex: none; border: 0; border-radius: 999px; background: var(--ll-blanc-50); color: var(--craie); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.cmd-pas[hidden] { display: none; }
.cmd-pas:disabled { opacity: .45; cursor: not-allowed; }
/* Note 431 (cas 57) : le nombre de points est un texte, pas un champ ; seuls « − » et « + » le changent. */
.cmd-points-valeur { min-width: 2ch; text-align: center; font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.cmd-points-aide, .cmd-points-reste { margin: 12px 0 0; }
.cmd-carte-lila .cmd-points-reste { font-weight: 700; }
.cmd-points-reste { font-weight: 600; }
/* La carte « Paiement » : un résumé fixe, avec son bouton de renvoi. */
.cmd-resume-fixe { cursor: default; }
.cmd-resume-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cmd-resume-titre { font-weight: 700; }
/* Le récapitulatif chiffré, puis le total et la confirmation. */
.cmd-recap-lignes { list-style: none; margin: 0 0 14px; padding: 0; }
.cmd-recap-ligne { display: grid; grid-template-columns: 1.6em 1fr auto; align-items: baseline; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; }
.cmd-recap-ligne.est-cagnotte { background: var(--ll-lila-400); }
.cmd-recap-nb { font-weight: 700; }
.cmd-recap-valeur { white-space: nowrap; }
.cmd-recap-valeur.est-offert { color: var(--ll-citron-ink); }
.cmd-recap-ligne.est-cagnotte .cmd-recap-valeur { color: var(--craie); font-weight: 600; }
.cmd-recap-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var(--gris-bordure); font-size: 1.05rem; }
.cmd-recap-total strong { font-size: 1.5rem; }
.cmd-recap .cmd-valider { margin: 0; }
.cmd-recap .cmd-valider .btn { width: 100%; }
/* Mobile : les cartes se resserrent. Le récapitulatif, lui, devient la barre
   de commande collée en bas (décision n° 77, plus bas). */
@media (max-width: 700px) {
  .cmd-carte { padding: 16px; border-radius: 16px; }
  /* La carte Paiement et le résumé d'adresse : sur un écran étroit, le bouton
     « Modifier » passe sous le texte plutôt que de l'écraser en une colonne
     d'un mot (note 303 d'Alban du 02/10/2026 : aérer le bloc d'adresse). */
  /* Sous 420 px, « Utiliser ma cagnotte » se coupait en deux et son compteur
     comprimait le texte : le compteur passe sur sa propre ligne. */
  .cmd-carte-lila .cmd-carte-texte { flex-basis: 100%; }
  .cmd-carte-lila .cmd-points { margin-left: auto; }
  .cmd-resume { flex-wrap: wrap; }
  .cmd-resume .cmd-modifier { margin-left: auto; }
  .cmd-resume-corps { flex-basis: 100%; }
}

/* La barre de commande du téléphone (décision d'Alban n° 77 du 06/10/2026).
   Sur ordinateur, ou sans JavaScript, la barre n'existe pas : le récapitulatif
   reste la dernière carte du fil. Sous 720 px, le script pose `est-barre` :
   la carte se colle en bas de l'écran, repliée sur « Total 5,99 € » et
   « Confirmer », avec le lien souligné « Afficher les détails ». La page
   réserve en bas la hauteur de la barre repliée (`--cmd-barre-hauteur`,
   mesurée par le script) : le bloc Paiement et son bouton restent toujours
   visibles au bout du défilement. */
.cmd-recap-barre { display: none; }
@media (max-width: 720px) {
  body.a-barre-commande { padding-bottom: calc(var(--cmd-barre-hauteur, 112px) + 16px); }
  .cmd-formulaire section.cmd-recap.est-barre {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0; border-top: 1px solid var(--gris-bordure); box-shadow: var(--shadow);
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px;
    max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
  }
  .cmd-recap.est-barre > * { grid-column: 1 / -1; }
  .cmd-recap.est-barre .cmd-recap-barre { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; grid-column: 1; min-width: 0; }
  .cmd-recap-barre-total { margin: 0; font-size: 1.05rem; }
  .cmd-recap-barre-total strong { font-size: 1.3rem; margin-left: 4px; }
  .cmd-recap-details { border: 0; background: none; padding: 4px 0; font: inherit; font-size: .95rem; color: var(--craie); text-decoration: underline; cursor: pointer; }
  .cmd-recap.est-barre .cmd-valider { grid-column: 2; grid-row: 1; }
  .cmd-recap.est-barre .cmd-valider .btn { width: auto; }
  /* Repliée : rien que la ligne du total et le bouton. */
  .cmd-recap.est-barre:not(.est-deplie) > h2,
  .cmd-recap.est-barre:not(.est-deplie) > .cmd-recap-lignes,
  .cmd-recap.est-barre:not(.est-deplie) > .cmd-recap-total,
  .cmd-recap.est-barre:not(.est-deplie) > .cmd-avertissement { display: none; }
  /* Dépliée : le détail complet, le lien « Masquer les détails » en tête et
     la confirmation pleine largeur en bas, comme sur ordinateur. */
  .cmd-recap.est-barre.est-deplie .cmd-recap-barre { grid-column: 1 / -1; }
  .cmd-recap.est-barre.est-deplie .cmd-recap-barre-total { display: none; }
  .cmd-recap.est-barre.est-deplie .cmd-valider { grid-column: 1 / -1; grid-row: auto; }
  .cmd-recap.est-barre.est-deplie .cmd-valider .btn { width: 100%; }
  .cmd-recap.est-barre.est-deplie > h2 { margin-top: 4px; }
  /* Pendant une saisie (recherche d'adresse), le clavier prend déjà la
     moitié de l'écran : la barre s'efface le temps de taper. */
  .cmd-formulaire:has(input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus, textarea:focus) .cmd-recap.est-barre { display: none; }
}

/* ---------- Écrans 03 et 04 des maquettes : confirmation et avis (#307) ---- */
.cmd-fin { max-width: 44rem; margin: 0 auto; text-align: center; }
.cmd-fin-titre { margin: 0 0 12px; }
.cmd-fin-accroche { margin: 0 0 10px; font-weight: 700; font-size: 1.05rem; }
.cmd-fin-detail { margin: 0 0 24px; color: var(--ll-craie-200); }
.cmd-fin-actions { margin: 24px 0 0; }
.cmd-fin .cmd-carte { text-align: left; }
/* Le suivi en quatre étapes : une pastille Citron pour ce qui est fait, un
   cercle creux pour la suite, reliés par un trait pointillé. */
.cmd-suivi-titre { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin: 0 0 16px; }
.cmd-suivi-etapes { list-style: none; margin: 0; padding: 0; }
.cmd-suivi-etape { position: relative; display: flex; gap: 14px; padding: 0 0 20px; }
.cmd-suivi-etape:last-child { padding-bottom: 0; }
.cmd-suivi-etape::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 0; border-left: 2px dashed var(--ll-craie-50); }
.cmd-suivi-etape:last-child::before { display: none; }
.cmd-suivi-pastille { position: relative; z-index: 1; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 999px; border: 2px solid var(--ll-craie-50); background: var(--color-bg-raised); }
.cmd-suivi-etape.est-faite .cmd-suivi-pastille { background: var(--citron-vert); border-color: var(--citron-vert); }
.cmd-suivi-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmd-suivi-detail { color: var(--ll-craie-200); }
.cmd-suivi-adresse { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--gris-bordure); }
.cmd-suivi-adresse span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* « Le geste malin » : la carte Lila de la maquette. */
.cmd-geste { display: flex; align-items: flex-start; gap: 14px; }
.cmd-geste .cmd-carte-texte { gap: 4px; }
/* Écran 04 : la demande d'avis. */
.cmd-avis-ignorer { margin: 0 0 8px; text-align: right; }
.cmd-avis-etoile { margin: 0 0 8px; }
.cmd-etoile { color: var(--ll-jasmin-400); }
/* Note 926 d'Alban (cas 54) : le remerciement remplace le formulaire, en
   carte bien visible, pour qu'on voie tout de suite que l'envoi a marché. */
.cmd-avis-merci {
  display: flex; align-items: center; gap: 14px; margin: 24px auto 0; max-width: 34rem;
  padding: 18px 20px; text-align: left; border-radius: 18px;
  background: var(--ll-citron-vert); color: var(--ll-craie);
}
.cmd-avis-merci-picto {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--ll-blanc-100); color: var(--ll-craie);
}
.cmd-avis-merci-texte { display: flex; flex-direction: column; gap: 4px; }
.cmd-avis-merci-texte strong { font-size: 17px; }
.cmd-avis-merci:focus { outline: none; }
.cmd-avis-form { margin: 24px auto 0; max-width: 34rem; text-align: left; }
.cmd-avis-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--gris-bordure); border-radius: 12px; font: inherit; background: var(--color-bg-raised); resize: vertical; }
.cmd-avis-form .btn { width: 100%; }
.cmd-avis-plateformes { margin: 28px auto 0; max-width: 34rem; padding-top: 24px; border-top: 1px solid var(--gris-bordure); }
.cmd-avis-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 14px 0 0; }
.cmd-avis-boutons .btn { flex: 1 1 12rem; }
.cmd-avis .cmd-fin-actions { padding-top: 24px; border-top: 1px solid var(--gris-bordure); }
.cmd-avis .cmd-fin-actions .btn { width: 100%; max-width: 34rem; }

/* ---------- Page de commande (ticket #99) ---------- */
.cmd-formulaire section { margin: 0 0 28px; padding: 0 0 20px; border-bottom: 1px solid var(--gris-bordure); }
/* Une carte de l'écran 02 porte déjà son fond et son ombre : le trait et le
   creux hérités du formulaire d'origine lui ajoutaient une bande vide. */
.cmd-formulaire section.cmd-carte { margin: 0 0 16px; padding: 18px 20px; border-bottom: 0; }
.cmd-formulaire h2 { font-size: 1.15rem; margin: 0 0 12px; }
.cmd-verrous { padding: 14px 18px; margin-bottom: 24px; border-radius: 10px; background: var(--ll-carotte-50); border: 1px solid var(--ll-carotte-100); }
.cmd-verrous ul { margin: 0; padding-left: 20px; }
.cmd-verrou { margin: 4px 0; color: var(--craie); }
.cmd-quota { font-weight: 600; }
.cmd-adresse, .cmd-option { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.cmd-nouvelle-adresse { margin-top: 10px; }
.cmd-nouvelle-adresse summary { cursor: pointer; font-weight: 600; }
.cmd-relais { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--blanc); }
.cmd-relais-liste { list-style: none; margin: 8px 0; padding: 0; max-height: 260px; overflow: auto; }
.cmd-relais-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--gris-bordure); border-radius: 8px; background: var(--blanc); cursor: pointer; margin-bottom: 6px; }
.cmd-relais-liste li.est-choisi .cmd-relais-item { border-color: var(--citron-vert); background: var(--ll-citron-50); }
/* Décision d'Alban n° 60 : le dernier point de retrait utilisé est proposé en
   premier, avec son étiquette. Il n'est pas enregistré dans le carnet. */
.cmd-relais-liste li.est-dernier .cmd-relais-item { border-color: var(--ll-ciel); }
.cmd-relais-etiquette { display: block; font-size: 0.8rem; color: var(--ll-ciel-ink); margin-bottom: 2px; }
.cmd-relais-choisi { font-weight: 600; color: var(--ll-citron-ink); }
/* La page du supplément (recette d'Alban du 14/10/2026, cas 57, note 832) :
   une carte comme le récapitulatif de la page de commande, la référence sous
   le titre, et sur téléphone le total et « Valider mon paiement » collés en
   bas de l'écran, comme la barre de la page de commande. */
.cmd-paiement-supplement { max-width: 640px; }
.cmd-paiement-supplement h1 { margin-bottom: 4px; }
.cmd-supplement-ref { margin: 0 0 20px; color: var(--ll-craie-300); }
.cmd-supplement .cmd-recap-total { margin-bottom: 0; }
.cmd-supplement .cmd-avertissement { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--ll-jasmin-50); line-height: 1.5; }
.cmd-supplement-payer { margin: 20px 0 0; }
.cmd-supplement-payer .btn { width: 100%; }
.cmd-supplement-barre-total { display: none; }
@media (max-width: 720px) {
  .cmd-paiement-supplement { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .cmd-supplement-payer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg-raised); border-radius: 18px 18px 0 0; border-top: 1px solid var(--gris-bordure); box-shadow: var(--shadow);
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  }
  .cmd-supplement-barre-total { display: block; margin: 0; font-size: 1.05rem; }
  .cmd-supplement-barre-total strong { font-size: 1.3rem; margin-left: 4px; }
  .cmd-supplement-payer .btn { width: auto; }
}
/* « Retour » de la page du supplément : un bouton de formulaire, dessiné
   comme le lien « Précédent » de la page de commande. */
.cmd-retour-bouton { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--craie); cursor: pointer; }
.cmd-retour-bouton:hover { text-decoration: underline; }
/* Cas 57, note 833 : une commande attend son supplément, le panier est vide. */
.cmd-attente-paiement p { margin: 0 0 12px; }
.cmd-attente-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cmd-attente-actions form { margin: 0; }
/* Recette d'Alban du 02/10/2026 (note 304, cas 57) : le client choisit combien
   de points de sa cagnotte il dépense, au lieu de tout ou rien. */
/* Les règles du compteur de points vivent plus haut, avec les cartes de
   l'écran 02 (lot L8) : celles d'ici le remettaient en grille et cassaient le
   « − n + » sur un écran de téléphone. */
@media (max-width: 600px) {
  .cmd-points { grid-template-columns: 1fr; }
  .cmd-points input[type="number"] { max-width: 8em; }
}
.cmd-avertissement { color: var(--craie); margin: 8px 0 0; }
.cmd-valider .btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Livraison (recette d'Alban, note 137) : le dernier choix résumé sur une
   ligne avec « Modifier » à droite, le relais fermé en rouge, et la recherche
   d'adresse de la Base Adresse Nationale sous la ligne d'adresse. */
.cmd-choix-livraison h3 { font-size: 1rem; margin: 18px 0 8px; }
.cmd-edition > summary { list-style: none; }
.cmd-edition > summary::-webkit-details-marker { display: none; }
/* Recette d'Alban du 02/10/2026 (note 303, cas 54) : le résumé n'est plus une
   seule ligne « nom, rue, ville, mode, point relais » ; chaque information a
   la sienne, et le bloc respire. */
.cmd-resume { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--gris-bordure); border-radius: 10px; background: var(--blanc); cursor: pointer; }
.cmd-resume .cmd-modifier { flex: none; white-space: nowrap; }
.cmd-resume-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 6px; }
.cmd-resume-ligne { display: block; line-height: 1.45; }
.cmd-resume-ligne:first-child { font-weight: 600; }
.cmd-modifier { flex: none; }
.cmd-modifier-fermer, .cmd-edition[open] .cmd-modifier-ouvrir { display: none; }
.cmd-edition[open] .cmd-modifier-fermer { display: inline; }
.cmd-alerte { color: var(--ll-carotte-ink); font-weight: 600; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--carotte); border-radius: 10px; background: var(--blanc); }
.cmd-recherche-adresse { position: relative; }
.cmd-suggestions { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: 8px; box-shadow: 0 4px 12px var(--ombre); max-height: 260px; overflow: auto; }
.cmd-suggestion { padding: 8px 12px; cursor: pointer; }
.cmd-suggestion:hover, .cmd-suggestion[aria-selected="true"] { background: var(--beige); }
/* Les modes de livraison en sections (note 137) : titre et délai à gauche,
   tarif à droite ; la section cochée est bordée, le choix du relais y loge. */
.cmd-mode { margin: 0 0 10px; border: 1px solid var(--gris-bordure); border-radius: 10px; background: var(--blanc); }
.cmd-mode:has(input[name="mode"]:checked) { border-color: var(--craie); }
.cmd-mode-tete { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; cursor: pointer; }
.cmd-mode-tete input { margin-top: 3px; }
.cmd-mode-titre { flex: 1; min-width: 0; }
.cmd-mode-delai { font-weight: 400; }
.cmd-mode-tarif { flex: none; font-weight: 700; white-space: nowrap; }
.cmd-mode-aide { margin: -4px 14px 12px 38px; font-size: .9em; }
/* Cas 62, note 924 : le mode de livraison attend l'adresse enregistrée. */
.cmd-livraison-attente { margin: 0; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--ll-craie-50); color: var(--ll-craie-300); font-weight: 700; }
.cmd-mode .cmd-relais { margin: 0 14px 14px; }
/* Cas 198 (note 559) : le surcoût ou le blocage de la zone de destination,
   sous le titre du mode ; un mode bloqué est grisé et ne se choisit plus. */
.cmd-mode-zone { margin: -4px 14px 12px 38px; font-size: .9em; font-weight: 600; color: var(--ll-carotte-ink); }
.cmd-mode-zone.est-bloque { color: var(--craie); font-weight: 400; }
.cmd-mode:has(input[name="mode"]:disabled) .cmd-mode-tete { opacity: .55; cursor: not-allowed; }
@media (max-width: 600px) {
  .cmd-mode-tete { flex-wrap: wrap; }
  .cmd-mode-tarif { flex-basis: 100%; padding-left: 23px; }
}

/* « Vos articles » (recette d'Alban du 01/10/2026, note 263) : le bloc est
   désormais posé hors du formulaire de commande, pour que les boutons de
   chaque ligne soient de vrais formulaires ; il garde la même séparation que
   les autres sections de la page. Chaque ligne porte à droite le compteur
   « − n + », « Retirer » et l'ajout à la liste de souhaits, et le compteur du
   quota est aligné à droite. */
.cmd-panier { margin: 0 0 28px; padding: 0 0 20px; border-bottom: 1px solid var(--gris-bordure); }
.cmd-panier h2 { font-size: 1.15rem; margin: 0 0 12px; }
/* Cas 57, note 830 : devenu une carte (écran 02), le groupe du panier garde
   les marges intérieures de la carte de la cagnotte juste dessous ; la règle
   ci-dessus, d'avant les cartes, collait le texte aux bords. */
section.cmd-carte.cmd-panier { margin: 0 0 16px; padding: 18px 20px; border-bottom: 0; }
.cmd-quota { font-weight: 600; text-align: right; }
.cmd-quota-annuel { text-align: right; }
/* Note 1400 d'Alban (cas 92) : le compteur expliqué et le jeu du coffret à renvoyer. */
.cmd-coffret { text-align: right; }
.cmd-article { align-items: flex-start; gap: 12px; padding: 12px 0; }
.cmd-article .panier-ligne-texte { align-self: center; }
.cmd-article-titre { display: block; }
/* Recette d'Alban du 02/10/2026 (note 303, cas 54) : « Ajouter à ma liste de
   souhaits » passe **sous** le compteur et le bouton « Retirer ». La colonne
   des actions empile donc les gestes puis l'envie, alignés à droite. */
.cmd-article-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cmd-article-gestes { display: flex; align-items: center; gap: 8px 14px; }
.cmd-article .cmd-quantite { min-width: 8em; }
.cmd-article-envie { text-align: right; }
.cmd-article-envie .cat-envie { border: 0; background: none; padding: 0; font: inherit; color: var(--craie); text-decoration: underline; cursor: pointer; }
@media (max-width: 700px) {
  .cmd-article { flex-wrap: wrap; }
  .cmd-article-actions { flex-basis: 100%; align-items: flex-start; }
  .cmd-article-envie { text-align: left; }
}

/* Note 263 : une adresse de livraison déjà enregistrée tient sur une ligne,
   avec « Modifier » à droite ; le carnet et la saisie vivent dans le repli. */
.cmd-edition-adresse { margin: 0 0 6px; }
.cmd-edition-adresse > summary + * { margin-top: 10px; }

/* ---------- En-tête : icônes, menu du compte, largeurs moyennes ----------
   Recette d'Alban du 28/09/2026 (note 131). Sur ordinateur, le panier est une
   icône et un client connecté a une icône « bonhomme » qui ouvre son menu
   (`<details>` natif). Rien ne passe à la ligne : entre le burger (1100 px) et
   1539 px, la barre se resserre au lieu d'empiler ses liens et de grossir
   ses boutons. */
.header-nav { flex-wrap: nowrap; }
.header-nav a, .btn-header { white-space: nowrap; }
.texte-lecteur {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.icone-entete { display: block; }
.header-actions .btn-panier-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; background: transparent; color: var(--craie);
}
.header-actions .btn-panier-icone .panier-compteur,
.menu-compte-bouton .pastille-alertes,
.burger .pastille-alertes {
  position: absolute; top: -2px; right: -4px; margin: 0;
}
.header-deconnexion { display: contents; }
.menu-compte { position: relative; }
.menu-compte-bouton {
  position: relative; list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--jasmin); color: var(--craie);
}
.menu-compte-bouton::-webkit-details-marker { display: none; }
.menu-compte-bouton:hover { filter: brightness(0.95); }
.menu-compte-bouton:focus-visible { outline: 2px solid var(--craie); outline-offset: 2px; }
.menu-compte-panneau {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 55;
  min-width: 270px; padding: 8px;
  display: flex; flex-direction: column;
  background: var(--blanc); border-radius: 16px;
  box-shadow: 0 8px 24px var(--ombre);
}
.menu-compte-panneau a, .menu-compte-sortie {
  display: block; padding: 10px 14px; border-radius: 10px;
  font-family: var(--police-corps); font-weight: 700; font-size: 15px;
  color: var(--craie); text-decoration: none; text-align: left;
}
.menu-compte-panneau a:hover, .menu-compte-sortie:hover { background: var(--beige); }
.menu-compte-sortie {
  width: 100%; border: none; background: none; cursor: pointer;
  border-top: 1px solid var(--gris-bordure); border-radius: 0 0 10px 10px; margin-top: 4px;
}
.menu-compte-alertes { display: flex; flex-direction: column; }
.menu-compte-alertes[hidden] { display: none; }
.menu-compte-alertes-titre {
  margin: 6px 14px 2px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--craie); opacity: .7;
}
.menu-compte-alertes a::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  border-radius: 50%; background: var(--carotte); vertical-align: middle;
}
.burger { position: relative; }
@media (min-width: 1101px) and (max-width: 1539px) {
  .header-barre { gap: 16px; padding: 16px; }
  .header-logo img { height: 28px; }
  .header-nav { gap: 12px; }
  .header-nav a { font-size: 14px; }
  .header-actions { gap: 8px; }
  .header-actions .btn-header { padding: 8px 16px; font-size: 14px; }
  .header-actions .btn-panier-icone { padding: 0; }
}

/* Menu mobile (note 131) : « Mon espace » (ou « Se connecter »), « Je
   m'abonne » et « Mon panier » en haut du panneau, « Se déconnecter » tout en
   bas, juste au-dessus du pied. */
.menu-mobile-actions .btn-panier { background: var(--blanc); color: var(--craie); box-shadow: inset 0 0 0 1px var(--craie); }
.menu-mobile-alertes a { font-size: 15px; padding: 6px 0; }
.menu-mobile-alertes .menu-compte-alertes-titre { margin: 0 0 4px; }
.menu-mobile-liens + .menu-mobile-pied { margin-top: auto; }
.menu-mobile-sortie { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; }

/* ---------- Consolidation des maquettes (cas 243, composant En-tête) ----------
   Le cœur des favoris, dessiné comme le panier : une icône ronde sans fond
   sur ordinateur, et en mobile les deux icônes restent dans la barre, à
   gauche du ☰. Le menu ☰ unique (point 12, tranché le 10/10/2026) range les
   rubriques de l'espace client sous « Mon espace », puis les liens du site
   sous « Le site » : deux titres en capitales, en Craie atténuée. */
.header-actions .btn-favoris-icone, .header-actions-mobile .btn-header {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; background: transparent; color: var(--craie);
  box-shadow: none;
}
.header-actions-mobile { display: none; gap: 2px; align-items: center; }
@media (max-width: 1100px) {
  /* Répété ici : la règle ci-dessus, plus bas que la bascule du burger,
     l'emporterait sinon. */
  .header-actions-mobile { display: flex; margin-left: auto; }
}
.header-actions-mobile .btn-panier-icone { position: relative; }
.header-actions-mobile .btn-panier-icone .panier-compteur { position: absolute; top: -2px; right: -4px; margin: 0; }
.btn-favoris-icone:hover, .btn-favoris-icone:focus-visible { color: var(--framboise); }
.menu-mobile-titre {
  margin: 10px 0 0; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--craie); opacity: .7;
}
.menu-mobile-espace { margin-bottom: 4px; }
.btn-deconnexion {
  background: transparent; color: var(--craie);
  box-shadow: inset 0 0 0 1px var(--craie);
  font-weight: 700; font-size: 16px;
}

/* ---------- Bulle du chat (note 130, src/site/chat-brevo.ts) ----------
   Sous le bandeau des cookies, le panier et le menu (z-index 60 et plus). */
.chat-bulle {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  width: 56px; height: 56px; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--framboise); color: var(--craie);
  box-shadow: 0 6px 18px var(--ombre); cursor: pointer;
}
.chat-bulle:hover { filter: brightness(0.95); }
.chat-bulle:focus-visible { outline: 2px solid var(--craie); outline-offset: 3px; }
.chat-bulle[hidden] { display: none; }
@media (max-width: 560px) {
  .chat-bulle { right: 14px; bottom: 14px; width: 50px; height: 50px; }
}

/* #205 : l'en-tête collant (z-index 50) enferme le tiroir et son voile dans
   son contexte d'empilement, sous le bandeau des cookies (60), qui masquait
   le bas du menu tant que le choix n'était pas fait. Menu ouvert, l'en-tête
   passe au-dessus : le voile couvre le bandeau, qui revient à la fermeture. */
body.menu-ouvert .site-header { z-index: 70; }

/* ---------- Popup marketing (R-C01-16, #154, src/site/popups.ts) ---------- */
.llw-popup {
  width: min(92vw, 440px);
  max-height: 90vh;
  overflow: auto;
  padding: 28px 24px 24px;
  border: none;
  border-radius: 24px;
  background: var(--blanc);
  color: var(--craie);
  box-shadow: 0 12px 40px var(--ombre);
  text-align: center;
}
.llw-popup::backdrop { background: color-mix(in srgb, var(--ll-craie) 45%, transparent); }
/* Note 889 (cas 275) : le titre centré laisse la place de la croix de
   fermeture (36 px à 12 px du bord) des deux côtés, pour rester centré. */
.llw-popup h2 { margin: 0 0 12px; padding: 0 40px; font-size: 1.4rem; }
.llw-popup-texte { margin: 0 0 20px; }
.llw-popup-image { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; border-radius: 16px; margin: 0 0 16px; }
.llw-popup-fermer {
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: var(--beige); color: var(--craie); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.llw-popup-fermer:focus-visible { outline: 2px solid var(--craie); outline-offset: 2px; }

/* ---------- En-tête et menu ☰ au plus près de la charte rendue ----------
   Recette d'Alban du 13/10/2026, cas 243, note 701 (lot 1) : valeurs du
   composant « En-tête » de la consolidation (`Composant Header.dc.html`).
   - Barre : Blanc cassé à 85 % flouté, filet bas, logo de 26 px ; liens au
     style du bouton tertiaire en gras 14 px ; icônes dans des ronds de
     40 px (Blanc 200 au survol), pastille du panier en Citron ;
   - boutons « se connecter » et « je m'abonne » en petite taille (`btn--sm`) ;
   - menu du compte : panneau de 260 px arrondi à 24 px, Blanc 100, bordure
     Craie 50, ombre de la charte ; lignes arrondies à 16 px, Ciel au survol ;
   - menu ☰ : panneau de 320 px (86 % au plus), lignes de 44 px arrondies à
     16 px en Comfortaa Bold 15 px avec leur pictogramme de 22 px, Ciel au
     survol pour « Mon espace », Blanc 200 pour le site ; titres de groupe en
     capitales 12 px Craie 300 ; croix dans un rond de 44 px. */
/* Le flou passe par un pseudo-élément : posé sur l'en-tête lui-même,
   `backdrop-filter` en ferait le bloc conteneur de ses descendants en
   `position: fixed`, et le panneau ☰ serait écrasé à la hauteur de la barre. */
.site-header { background: transparent; border-bottom: 1px solid var(--color-border); }
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--ll-blanc-400) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.header-barre { max-width: 1480px; padding: 12px 20px; gap: 16px; }
.header-logo { flex: none; }
/* Ticket #548 : le logo garde la taille qu'il avait avant la PR #558
   (34 px, 28 px entre 1101 et 1539 px) ; `flex: none` l'empêche d'être écrasé
   par les liens. */
/* 24 px entre les liens comme la maquette, sur grand écran seulement : le
   site garde huit liens et deux boutons (Accueil, Blog et l'espace pro ne sont
   pas retirés), qui ne tiennent sous 1540 px qu'avec l'écart resserré. */
@media (min-width: 1540px) { .header-nav { gap: 24px; } .header-nav a { font-size: 14px; } }

@media (min-width: 1101px) and (max-width: 1539px) {
  .header-nav { gap: 12px; } .header-barre { gap: 12px; }
  .header-nav a { font-size: 13px; }
}
/* Juste au-dessus du ☰ (1101 à 1279 px), un cran de plus : sinon la barre
   déborde de la fenêtre. */
@media (min-width: 1101px) and (max-width: 1279px) {
  .header-barre { gap: 8px; padding: 12px; }
  .header-nav { gap: 8px; } .header-nav a { font-size: 12px; }
  .header-actions .btn-header:not(.btn-panier-icone):not(.btn-favoris-icone) { padding: 7px 12px; }
}
/* Cas 297 (recette d'Alban du 16/10/2026) : sur un petit téléphone, le logo
   de 200 px, le cœur, le panier et le ☰ demandaient 394 px, plus que les
   375 px d'un iPhone 13 mini, et toute la page défilait de côté. Sous 480 px,
   la barre se resserre et le logo rétrécit, en gardant ses proportions. */
@media (max-width: 480px) {
  .header-barre { gap: 8px; padding: 12px 16px; }
  .header-logo { flex: 0 1 200px; min-width: 0; }
  .header-logo img { width: 100%; height: auto; max-height: 34px; object-fit: contain; object-position: left center; }
}
/* Cas 297, suite : Safari sur iPhone zoome la page dès qu'on touche un champ
   dont le texte fait moins de 16 px, et ne dézoome pas en sortant. Les champs
   du site sont à 13 ou 14 px (recherche, newsletter, adresses, connexion) :
   sur un téléphone, ils passent tous à 16 px. Le `!important` est voulu : la
   règle doit l'emporter sur chaque feuille de page, sans les reprendre une
   par une. */
@media (max-width: 720px) and (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="color"], [type="file"]),
  select, textarea { font-size: 16px !important; }
}
/* Ticket #638 (recette d'Alban du 15/10/2026) : les liens de la navigation
   un peu plus espacés, à chaque palier. La barre gardait de la place : à
   1270 px, 450 px restaient libres à gauche des liens pour 8 px entre eux.
   Juste au-dessus du ☰, 12 px seulement : à 16, la barre déborde à 1101 px. */
@media (min-width: 1540px) { .header-nav { gap: 28px; } }
@media (min-width: 1280px) and (max-width: 1539px) { .header-nav { gap: 20px; } }
@media (min-width: 1200px) and (max-width: 1279px) { .header-nav { gap: 16px; } }
@media (min-width: 1101px) and (max-width: 1199px) { .header-nav { gap: 12px; } }
.header-nav a {
  font-family: var(--font-sans); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-fast) var(--ease-soft);
}
.header-nav a:hover, .header-nav a:focus-visible, .header-nav a[aria-current="page"] {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--ll-ciel-400);
}
.header-actions { gap: 6px; }
.header-actions .btn-panier-icone, .header-actions .btn-favoris-icone,
.header-actions-mobile .btn-header {
  width: 40px; height: 40px; border-radius: 50%;
  transition: background var(--dur-fast) var(--ease-soft);
}
.header-actions .btn-panier-icone:hover, .header-actions .btn-favoris-icone:hover,
.header-actions-mobile .btn-header:hover { background: var(--ll-blanc-200); }
.header-actions .icone-entete, .header-actions-mobile .icone-entete { width: 22px; height: 22px; }
.panier-compteur.pastille {
  min-width: 16px; height: 16px; padding: 0 4px; line-height: 16px;
  font-size: 10px; background: var(--ll-citron-400); color: var(--ll-craie-400);
}
.header-actions .btn-header:not(.btn-panier-icone):not(.btn-favoris-icone) {
  font-size: var(--fs-btn-sm); line-height: var(--lh-btn-sm); padding: 8px 18px;
}
.menu-compte-bouton:hover { filter: none; background: var(--ll-jasmin-200); }
.menu-compte-panneau {
  width: 260px; min-width: 0; padding: 8px; border-radius: var(--radius-lg);
  background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-50); box-shadow: var(--shadow);
}
.menu-compte-panneau a, .menu-compte-sortie {
  padding: 10px 12px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 14px;
}
.menu-compte-panneau a:hover { background: var(--ll-ciel-400); }
.menu-compte-sortie { font-weight: 400; border-top: 1px solid var(--color-border); border-radius: var(--radius-md); }
.menu-compte-sortie:hover { background: var(--ll-blanc-200); }

.menu-mobile {
  width: 320px; max-width: 86%; padding: 16px; gap: 4px;
  background: var(--ll-blanc-400); box-shadow: var(--shadow);
}
.menu-mobile-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.menu-mobile-tete-titre { padding-left: 12px; font-family: var(--font-sans); font-weight: 700; font-size: 15px; }
.menu-fermer {
  width: 44px; height: 44px; padding: 0; margin-left: auto;
  border: 1px solid var(--color-border); border-radius: 50%; background: var(--ll-blanc-50);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ll-craie-400);
}
.menu-mobile-actions { gap: 8px; padding-bottom: 4px; }
.menu-mobile-liens { gap: 0; }
.menu-mobile-liens a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--ll-craie-400);
  transition: background var(--dur-fast) var(--ease-soft);
}
.menu-mobile-liens a .picto { flex: none; }
.menu-mobile-espace a:hover, .menu-mobile-espace a:focus-visible { background: var(--ll-ciel-400); }
.menu-mobile-liens:not(.menu-mobile-espace) a:hover, .menu-mobile-liens:not(.menu-mobile-espace) a:focus-visible { background: var(--ll-blanc-200); }
.menu-mobile-titre {
  margin: 0; padding: 16px 8px 4px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; color: var(--ll-craie-300); opacity: 1;
}
.menu-mobile-sortie { border-top: 1px solid var(--color-border); margin-top: 16px; padding-top: 12px; }
.menu-mobile-sortie .btn-deconnexion {
  box-shadow: none; text-transform: none; letter-spacing: 0;
  font-family: var(--font-sans); font-weight: 400; font-size: 15px; text-align: left; padding: 12px;
}

/* Client connecté : le panneau ☰ de la maquette de l'espace client
   (`Espace Client.html`, panneau v3). « Mon espace » en tuiles sur deux
   colonnes (Blanc 50, bordure Craie 50 de 1,5 px, arrondi 16 px, Ciel 50 au
   survol), « Le site » en liste de 44 px en Comfortaa Medium 14 px, titres de
   groupe en chasse fixe 10 px Craie 100, « Se déconnecter » sous un filet. */
.est-connecte .menu-mobile-espace {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 0;
}
.est-connecte .menu-mobile-espace a {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px;
  min-height: 76px; padding: 12px;
  border: 1.5px solid var(--ll-craie-50); background: var(--ll-blanc-50); font-size: 13px;
}
.est-connecte .menu-mobile-espace a:hover, .est-connecte .menu-mobile-espace a:focus-visible { background: var(--ll-ciel-50); }
.est-connecte .menu-mobile-liens:not(.menu-mobile-espace) a { padding: 11px 12px; font-size: 14px; font-weight: 500; }
.est-connecte .menu-mobile-liens:not(.menu-mobile-espace) a:hover, .est-connecte .menu-mobile-liens:not(.menu-mobile-espace) a:focus-visible { background: var(--ll-ciel-50); }
.est-connecte .menu-mobile-titre {
  padding: 24px 12px 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 400;
  letter-spacing: .1em; color: var(--ll-craie-100);
}
.menu-mobile-sortie .btn-deconnexion {
  display: flex; align-items: center; gap: 12px; width: 100%; border-radius: 0; background: transparent;
  font-weight: 500; font-size: 14px; padding: 12px;
}
.menu-mobile-sortie .btn-deconnexion:hover { background: var(--ll-ciel-50); }

/* ---------- Pied de page au plus près de la charte rendue ----------
   Note 701 d'Alban (cas 243, lot 1), composant « Pied de page » de la
   consolidation : arrondi haut de 48 px, logo de 44 px, liens au style du
   bouton tertiaire en gras (souligné Craie au survol, le Ciel ne se verrait
   pas sur le fond Ciel), réseaux dans des ronds de 32 px (dessins de 18 px
   de la maquette depuis le 14/10/2026), devise 16 px, mention 13 px.
   Note 831 d'Alban (cas 238, 14/10/2026) : le pied prenait trop de hauteur,
   surtout en étroit. Les liens passent en 13 px sur deux colonnes, les
   logos partenaires de 62 à 36 px de haut, les marges se resserrent
   (mesuré en local : 328 px de haut en 1440, 482 en 768, 689 en 390). */
.site-footer { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; padding: 28px 20px 20px; }
.site-footer > .footer-logo, .footer-logo { max-height: 36px; }
.site-footer > .footer-logo { margin-bottom: 16px; }
.footer-colonnes { gap: 16px 28px; }
.footer-liens {
  display: grid; grid-template-columns: repeat(2, auto); justify-content: center;
  justify-items: center; gap: 6px 24px;
}
.footer-liens a, .footer-lien-bouton {
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-fast) var(--ease-soft);
}
.footer-liens a:hover, .footer-lien-bouton:hover,
.footer-liens a:focus-visible, .footer-lien-bouton:focus-visible { text-decoration-color: var(--ll-craie-400); }
/* Les liens légaux, plus longs, gardent une colonne : sur deux, « Conditions
   générales d'utilisation » se coupait en deux lignes. */
.footer-liens:last-child { grid-template-columns: auto; }
/* Réseaux et logos partenaires sur une même ligne, devise et mention dessous. */
.footer-centre { flex-flow: row wrap; justify-content: center; gap: 8px 20px; }
.footer-baseline, .footer-copyright { flex-basis: 100%; }
.footer-sociaux { gap: 20px; }
.footer-social { width: 32px; height: 32px; border-radius: 50%; }
.footer-social svg { width: 18px; height: 18px; }
.footer-partenaires img { max-height: 36px; }
.footer-baseline { font-size: 16px; font-weight: 400; }
/* En dessous de 900 px (note 831) : une seule colonne de blocs, mais les
   liens restent sur deux colonnes, les liens légaux suivent les autres, et
   réseaux, logos, devise et mention ferment le pied. Plus d'empilement de
   dix liens les uns sous les autres. */
@media (max-width: 900px) {
  .footer-colonnes { grid-template-columns: 1fr; gap: 14px; justify-items: center; align-items: center; }
  .footer-centre { grid-column: auto; grid-row: auto; order: 1; }
  /* Les liens s'enchaînent sur la ligne et passent à la suivante quand elle
     est pleine : deux ou trois par ligne selon la largeur, sans couper un
     libellé. */
  .footer-liens, .footer-liens:last-child { display: flex; flex-flow: row wrap; justify-content: center; gap: 8px 20px; }
  .footer-liens a, .footer-lien-bouton { font-size: 13px; text-align: center; }
  .footer-partenaires img { max-height: 30px; }
  .footer-baseline { font-size: 14px; }
}
/* Recette d'Alban du 15/10/2026.
   Ticket #654 : la devise est juste sous le logo, centrée comme lui.
   Ticket #655 : réseaux, logos partenaires et mention au milieu exact du
   pied, sous le logo. Les colonnes de liens sont deux `minmax(0, 1fr)` égales
   (avec `1fr`, la liste de gauche, plus large, poussait le groupe à droite).
   Entre 901 et 1100 px, le groupe s'empile pour laisser la place aux liens.
   Ticket #656 : liens soulignés comme des liens hypertexte, sans gras, et
   12 px en dessous de 900 px. */
.site-footer > .footer-logo { margin-bottom: 6px; }
.site-footer > .footer-baseline { margin: 0 0 16px; }
@media (min-width: 901px) {
  .footer-colonnes { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .footer-colonnes { column-gap: 20px; }
  .footer-centre { flex-direction: column; }
  .footer-liens { column-gap: 16px; }
}
.footer-liens a, .footer-lien-bouton {
  font-weight: 400; text-decoration-thickness: 1px; text-decoration-color: currentColor;
}
.footer-liens a:hover, .footer-lien-bouton:hover,
.footer-liens a:focus-visible, .footer-lien-bouton:focus-visible { text-decoration-thickness: 2px; }
@media (max-width: 900px) {
  .footer-liens a, .footer-lien-bouton { font-size: 12px; }
}
/* Le pied réduit du tunnel (« Gérer mes cookies » seul) garde ses 14 px en
   mobile, comme avant : il n'est pas le pied de page de la maquette. */
@media (max-width: 860px) {
  .tunnel-pied .footer-lien-bouton { font-size: 14px; }
}

/* ---------- CO-04 « Votre avis » d'après la charte rendue ----------
   Note 701 d'Alban (cas 243, lot 1), bloc CO-04 de la consolidation : titre
   Neulis Medium 22 à 27 px, accroche 14 px Craie 300, « Ignorer » gras 14 px
   Craie 300 ; libellé gras 15 px ; zone de texte Blanc 50 bordée de Craie 50
   sur 1,5 px, arrondie à 16 px, 110 px de haut au moins ; « Envoyer » en grand
   bouton ; Google et Trustpilot en deux boutons Jasmin côte à côte. */
.cmd-avis .cmd-fin-titre {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 3.4vw, 27px); line-height: 1.25; max-width: 22ch; margin-left: auto; margin-right: auto;
}
.cmd-avis .cmd-fin-accroche { font-size: 14px; line-height: 1.55; color: var(--ll-craie-300); max-width: 42ch; margin-left: auto; margin-right: auto; }
.cmd-avis-ignorer a { font-weight: 700; font-size: 14px; color: var(--ll-craie-300); text-decoration: none; }
.cmd-avis-ignorer a:hover { color: var(--ll-craie-400); }
.cmd-avis .cmd-avis-form label { font-weight: 700; font-size: 15px; }
.cmd-avis .cmd-avis-form textarea {
  min-height: 110px; padding: 14px 16px; font-size: 14px; color: var(--ll-craie-400);
  background: var(--ll-blanc-50); border: 1.5px solid var(--ll-craie-50); border-radius: var(--radius-md);
}
.cmd-avis .cmd-avis-form textarea:focus { outline: none; border-color: var(--ll-ciel-400); box-shadow: none; }
.cmd-avis .cmd-avis-form .btn { font-size: var(--fs-btn-lg); line-height: var(--lh-btn-lg); padding: 16px 24px; }
.cmd-avis-plateformes { border-top-color: var(--ll-craie-50); }
.cmd-avis-plateformes > p:first-child { font-size: 13.5px; color: var(--ll-craie-300); }
.cmd-avis-boutons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cmd-avis-boutons .btn { display: flex; align-items: center; justify-content: center; min-width: 0; padding-inline: 10px; gap: 8px; }
.cmd-avis-boutons .btn:only-child { grid-column: 1 / -1; }
.cmd-avis-boutons svg, .cmd-avis-boutons img { flex: none; }
.cmd-avis-etoiles { position: relative; display: inline-block; color: var(--ll-jasmin); margin-bottom: 14px; }
.cmd-avis-etoiles > svg { display: block; }
.cmd-avis-etoiles > svg + svg { position: absolute; top: -6px; right: -12px; }
.cmd-avis .cmd-avis-form textarea::placeholder { font-style: normal; }

/* ==========================================================================
   Règles venues des feuilles de page (#594).

   Jusqu'au 14/10/2026, toutes les feuilles de `src/site/pages/` partaient
   dans une seule feuille, chargée par toutes les pages : une règle posée dans
   la feuille d'une page s'appliquait en fait partout. Ces trois-là servent
   hors de leur page (le menu ☰ et le bandeau des cookies sont sur toutes les
   pages, les étoiles sur l'accueil, l'espace pro et l'espace client) : elles
   finissent la feuille commune, à la même place relative qu'avant, après le
   reste de `site.css`.
   ========================================================================== */

/* Venue de `espace-mon-compte.css`. */
/* EC-01 : le bloc d'identité du menu ☰ (`WhoAmI`), sans nom ni adresse
   (notes 210 et 219 d'Alban, cas 49). */
.menu-mobile-identite {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.menu-mobile-identite { padding: 8px 12px 4px; }
.menu-mobile-identite[hidden] { display: none; }
.menu-mobile-identite-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ll-ciel-400);
  color: var(--ll-craie-400);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}
.menu-mobile-identite-avatar { width: 40px; height: 40px; font-size: 16px; }
.menu-mobile-identite-texte { display: flex; flex-direction: column; min-width: 0; }
.menu-mobile-identite-sous { font-size: 12px; color: var(--color-fg-muted); }
.menu-mobile-identite-email {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.menu-mobile-identite-formule { font-size: 12px; color: var(--color-fg-muted); }

/* EC-01 : la rubrique courante du menu ☰ en Ciel, cerclée de Craie. */
.est-connecte .menu-mobile-espace a.est-actif {
  background: var(--ll-ciel-400);
  border: 2px solid var(--ll-craie-400);
  font-weight: 700;
}

/* Venue de `compte.css` : les boutons « Personnaliser » et « Refuser » du
   bandeau des cookies la portent aussi, sur toutes les pages. */
/* Bouton de contour (« + ajouter un enfant ») : capsule, comme toute la
   charte, mais sans aplat de couleur. */
.btn-contour {
  display: block;
  width: 100%;
  background: none;
  border: 1.5px solid var(--ll-craie);
  color: var(--ll-craie);
}
.btn-contour:hover { background: var(--ll-blanc-100); }

/* Venue de `catalogue.css`. */
/* ---------- Composant étoiles (src/catalogue/etoiles.ts) ----------
   La notation du design system : `.stars .stars--carotte` vient de
   `src/site/design-system/composants.css` (généré, couleurs comprises). Le
   site ne règle ici que la taille, d'après la consolidation : 14 px dans un
   avis, 18 px en tête de fiche ; l'écart suit la planche (5 px pour 26 px). */
.etoiles.stars { --etoile: 14px; gap: calc(var(--etoile) * 0.15); vertical-align: middle; }
.etoiles.stars .star { width: var(--etoile); height: var(--etoile); }
.etoiles-grande.stars { --etoile: 18px; }


/* ---- accueil.css ---- */
/* ---------- Page accueil (classes préfixées acc-) ---------- */

/* Hero (fond crème, photo à droite). */
.acc-hero {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 24px; align-items: center;
  max-width: 1360px; margin: 0 auto;
}
.acc-hero-titre {
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.14;
  font-weight: 500;
}
/* La photo repose sur le bandeau lila sans passer dessous : elle est coupée
   net en bas, la recouvrir en masquait le bas (recette d'Alban, cas 1). */
.acc-hero { padding-bottom: 0; }
.acc-hero .hero-texte { padding-bottom: 48px; }
.acc-hero .hero-visuel { align-self: end; }
.acc-hero .hero-texte { margin-left: 0; }
.acc-hero-titre { margin: 0 0 20px; }
.acc-hero-liste { margin: 0 0 20px; padding-left: 20px; }
.acc-hero-liste li { margin: 4px 0; }
/* Le bas de la photo d'origine n'est pas propre : bande transparente et bouts
   de contour détouré irréguliers sur ses 16 dernières lignes (sur 800 de
   large). Le cadre rogne ce bas (recette d'Alban, notes 55 et 106) : la marge
   négative, en % de la largeur donc proportionnelle à la taille affichée,
   remonte le bas du cadre et `overflow: hidden` coupe la photo net, qui
   touche le bandeau sans espace. Une photo remplacée au BO perd au plus 2 %
   de sa largeur en bas, jamais d'espace ne se rouvre. */
.acc-hero .hero-visuel { overflow: hidden; }
.acc-hero .hero-visuel img { width: 100%; border-radius: 0; margin-bottom: -2%; }

/* Séparateurs décoratifs entre sections. */
.acc-separateur { text-align: center; padding: 24px 20px; }
.acc-separateur img { max-height: 90px; width: auto; }

/* Note 378 d'Alban : l'illustration qui suit « Comment ça marche » passe à
   droite et s'incline, comme le sticker de la bande médias juste en dessous.
   Le retrait suit la largeur de la page, comme les stickers (note 377). */
/* Recette du 02/10/2026 (cas 1, note 411) : ce sticker, que Morgane appelle
   « max de choix », doit être à cheval sur la limite entre « Comment ça
   marche » (blanc cassé) et « Vos jeux préférés » (bleu ciel). Le conteneur
   n'a plus de hauteur : il est posé exactement sur la limite, et le sticker,
   en position absolue, en remonte de la moitié de sa hauteur. Taille, retrait,
   décalage et inclinaison sont les jetons `--sticker-choix-*`
   (`src/site/design-system/jetons-stickers.css`), réglables au panneau. */
.acc-separateur-diversite { position: relative; z-index: 3; height: 0; padding: 0; }
.acc-separateur-diversite img {
  position: absolute; top: 0; max-height: none; height: auto;
  right: clamp(var(--sticker-choix-bord-mini), var(--sticker-choix-bord-fluide), var(--sticker-choix-bord-maxi));
  width: clamp(var(--sticker-choix-largeur-mini), var(--sticker-choix-largeur-fluide), var(--sticker-choix-largeur-maxi));
  transform: translateY(var(--sticker-choix-decalage)) rotate(var(--sticker-choix-rotation));
}

/* Et celle qui précède « Pourquoi la location » se colle au bas de son
   groupe : son image touche le bord inférieur du bloc, sans la gouttière qui
   l'en séparait. */
.acc-separateur-bazar { padding-bottom: 0; }
.acc-separateur-bazar img { display: block; margin: 0 auto; vertical-align: bottom; }

/* Vos jeux préférés du moment (décision n° 167) : les cartes jeu du
   catalogue en rangée qui défile au doigt, comme la maquette HP-01. Le
   fond reste celui de la page : le ciel est aux avis en vidéo. */
.acc-jeux { text-align: center; }
.acc-entete { width: 110px; margin-bottom: 8px; }
.acc-jeux-rangee {
  display: flex; gap: clamp(16px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; padding: 6px 4px 12px; margin: 0 auto 40px; max-width: 1240px; text-align: left;
}
.acc-jeux-carte { flex: none; width: clamp(200px, 60vw, 250px); scroll-snap-align: start; display: flex; }
.acc-jeux-carte > .cat-carte { width: 100%; }

/* Des marques qu'on adore (décision n° 167) : tuiles photo 5/6 de la
   maquette sur fond jasmin, en piste défilante. Une tuile composée pose la
   photo du jeu phare de la marque sur un fond clair de la charte (le blanc
   de la photo s'y fond) et le logo dans une pastille blanche. */
.acc-marques { text-align: center; background: var(--jasmin); }
.acc-tuile { flex: none; width: clamp(146px, 17vw, 176px); margin-right: clamp(14px, 2.2vw, 26px); }
.acc-tuile-cadre {
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 6;
  border-radius: 24px; overflow: hidden; border: 1.5px solid var(--ll-craie-50);
  background: var(--tuile-fond, var(--ll-blanc-200)); transition: border-color .2s, box-shadow .2s;
}
a.acc-tuile-cadre:hover, a.acc-tuile-cadre:focus-visible { border-color: var(--craie); box-shadow: 0 8px 24px var(--ombre); }
a.acc-tuile-cadre:focus-visible { outline: 2px solid var(--craie); outline-offset: 3px; }
.acc-tuile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acc-tuile-jeu {
  position: absolute; inset: 10% 8% 24%; width: 84%; height: 66%; object-fit: contain; mix-blend-mode: multiply;
}
.acc-tuile-logo {
  position: absolute; left: 10px; bottom: 10px; width: 46%; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  background: var(--ll-blanc-50); box-shadow: 0 4px 12px var(--ombre); display: flex; align-items: center; justify-content: center;
}
.acc-tuile-logo img { width: 84%; height: 84%; object-fit: contain; }
.acc-tuile-logo span { font-family: var(--police-titre); font-weight: 800; font-size: 14px; padding: 6px; }
.acc-tuile-logo-seul { position: static; width: 64%; }

/* Pistes défilantes de l'accueil (avis en vidéo, tuiles des marques). */
.acc-defilant { overflow: hidden; padding: 8px 0 12px; }
.acc-defilant-piste {
  display: flex; width: max-content; margin: 0; padding: 0; list-style: none;
  animation: vit-defile var(--vit-duree, 45s) linear infinite;
}
.acc-defilant:hover .acc-defilant-piste,
.acc-defilant:focus-within .acc-defilant-piste,
.acc-defilant-piste:has(.est-lecture) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .acc-defilant { overflow-x: auto; }
  .acc-defilant-piste { animation: none; }
  .acc-defilant-piste > [data-copie] { display: none; }
}

/* ils en parlent mieux que nous (maquette HP-01, décision n° 167) : fond
   ciel, titre et chiffres en tête, cartes vidéo 9/16 qui défilent. */
.acc-videos { background: var(--ciel); padding: clamp(40px, 6vw, 68px) 0; overflow: hidden; }
.acc-videos-tete {
  max-width: 1240px; margin: 0 auto clamp(20px, 3vw, 32px); padding: 0 clamp(20px, 5vw, 48px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.acc-videos-titre {
  font-family: var(--police-titre); font-weight: 400; font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 10px; max-width: 16ch;
}
.acc-videos-titre em { font-weight: 600; }
.acc-videos-sous-titre { font-size: clamp(15px, 1.7vw, 19px); margin: 0; }
.acc-videos-chiffres { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 30px); }
.acc-videos-chiffre { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acc-videos-nombre {
  font-family: var(--police-titre); font-weight: 800; font-size: clamp(28px, 3.6vw, 38px); line-height: 1; margin: 0;
}
.acc-videos-nombre small { font-size: .5em; font-weight: 700; }
.acc-videos-libelle { margin: 0; font-size: 15px; line-height: 1.4; max-width: 22ch; display: flex; flex-direction: column; gap: 4px; }
.acc-videos-etoiles { color: var(--ll-jasmin-400); letter-spacing: 2px; font-size: 16px; line-height: 1; }
.acc-videos-trait { width: 1.5px; align-self: stretch; background: color-mix(in srgb, var(--craie) 22%, transparent); }
.acc-video { flex: none; width: clamp(180px, 48vw, 220px); margin-right: clamp(12px, 1.6vw, 20px); }
.acc-video-ecran {
  position: relative; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden;
  background: var(--ll-ciel-200); transition: box-shadow .2s;
}
.acc-video-ecran:hover { box-shadow: 0 8px 24px var(--ombre); }
.acc-video-ecran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.acc-video-ecran iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.acc-video-prenom {
  position: absolute; inset: auto 12px 16px; font-family: var(--police-titre); font-weight: 800; font-size: 18px;
}
.acc-video-duree {
  position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; background: var(--ll-blanc-50);
}
.acc-video-lire {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--citron-vert); color: var(--craie);
}
/* Toute la carte lance la vidéo, pas seulement le rond. */
.acc-video-lire::after { content: ""; position: absolute; inset: -12px -12px auto auto; width: 220px; height: 400px; }
.acc-video-ecran:has(.acc-video-lire) { cursor: pointer; }
.acc-video-lire:focus-visible { outline: 2px solid var(--craie); outline-offset: 3px; }
@media (max-width: 680px) {
  .acc-videos-chiffres { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 1.5px minmax(0, 1fr); align-items: start; }
  .acc-videos-chiffre { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Avis Google (fond jasmin). Le sticker « Lib et Lou Family » est à cheval
   sur la limite marques → avis, à gauche, légèrement incliné. */
.acc-avis-bloc { text-align: center; background: var(--jasmin); position: relative; }
/* Note 377 d'Alban : la largeur était figée (200 px, puis 130 px sous 900 px),
   et entre les deux le sticker venait masquer le texte et le contenu au-dessus.
   Largeur et retrait suivent désormais la largeur de la page en continu, sans
   palier : plus de taille qui saute, donc plus de recouvrement. */
/* Les six bornes et les deux transformations passent par des jetons, pour que
   Morgane les règle elle-même au panneau de recette (`/recette/reglages`,
   piste 7) : « le sticker family est trop gros et mord sur les marques » est
   une grandeur, elle n'a pas à coûter une demande et une relecture de CSS.
   Les valeurs par défaut sont dans `src/site/design-system/jetons-stickers.css`
   et sont exactement celles d'avant. */
.acc-sticker-family {
  position: absolute; top: 0; z-index: 3;
  left: clamp(var(--sticker-family-bord-mini), var(--sticker-family-bord-fluide), var(--sticker-family-bord-maxi));
  width: clamp(var(--sticker-family-largeur-mini), var(--sticker-family-largeur-fluide), var(--sticker-family-largeur-maxi));
  transform: translateY(var(--sticker-family-decalage)) rotate(var(--sticker-family-rotation));
}
/* Ticket #436 : sous 800 px, le titre centré est plus large que l'espace laissé
   à droite du sticker, qui en masquait le début. Le titre descend sous le
   sticker, qui garde sa place à cheval sur les marques. */
@media (max-width: 799px) { .acc-avis-bloc { padding-top: 100px; } }
/* Recette du 02/10/2026 (cas 1, note 412) : « les avis clients doivent être
   centrés horizontalement ». La grille à quatre colonnes fixes calait les
   cartes à gauche dès qu'il y en avait moins de quatre, ce qui arrive avec
   les avis synchronisés : seuls ceux notés 4/5 ou plus sont retenus (note 56).
   En rangée souple centrée, une, deux, trois ou quatre cartes gardent la
   largeur d'un quart de rangée et restent au milieu de la page. */
.acc-avis-grille {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
  max-width: 1260px; margin: 0 auto; text-align: left;
}
.acc-avis-grille > .acc-avis { flex: 0 1 calc((100% - 60px) / 4); min-width: 0; }
.acc-avis {
  background: var(--beige); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px; min-height: 320px;
}
.acc-avis-tete { display: flex; gap: 12px; align-items: center; }
.acc-avis-tete img { width: 44px; height: 44px; border-radius: 50%; }
.acc-avis-auteur { margin: 0; font-weight: 600; font-size: 13px; }
.acc-etoiles { color: var(--carotte); letter-spacing: 2px; }
.acc-avis-texte {
  font-size: 12px; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7;
}
.acc-avis-ouvert .acc-avis-texte { -webkit-line-clamp: unset; line-clamp: unset; }
.acc-avis-texte p { margin: 0 0 8px; }
.acc-avis-pied {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
}
.acc-avis-plus {
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; font-size: 13px; color: var(--craie);
}

/* Nos formules sans engagement : puces de période + cartes inclinées. */
.acc-formules { text-align: center; overflow: hidden; }
.acc-periodes { display: flex; gap: 16px; justify-content: center; margin: 8px 0 48px; }
.acc-periode {
  border: 1px solid transparent; border-radius: 999px; padding: 8px 22px;
  background: var(--jasmin); color: var(--craie); font: inherit; font-size: 14px;
  cursor: pointer;
}
.acc-periode-active { background: var(--blanc); border-color: var(--craie); }
.acc-formules-grille {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px;
  max-width: 1180px; margin: 0 auto 48px; padding: 24px 0; align-items: center;
}
.acc-formule {
  border-radius: 26px; padding: 34px 28px; aspect-ratio: 1 / 0.96;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  justify-content: center;
}
.acc-formule-1 { background: var(--lila); transform: rotate(-7deg); }
.acc-formule-2 { background: var(--carotte); transform: scale(1.06); }
.acc-formule-3 { background: var(--ciel); transform: rotate(4deg); }
.acc-formule-picto { height: 56px; width: auto; }
.acc-formule-titre {
  margin: 6px 0 0; font-family: var(--police-titre); font-size: 26px; font-weight: 700;
}
.acc-formule-accroche { font-size: 18px; font-weight: 500; margin: 0; }
.acc-formule-desc { font-size: 13px; }
.acc-formule-desc p { margin: 0; }
.acc-formule-prix { margin: 8px 0 0; font-weight: 700; font-size: 22px; }
.acc-bon-plan { font-weight: 400; max-width: 560px; margin: 0 auto 24px; }

/* Les médias aussi craquent pour la loc' (fond lila). Le sticker rose est à
   cheval sur la transition beige → lila, à droite. */
.acc-medias { text-align: center; position: relative; margin-top: 110px; }
/* Il se règle aussi au panneau, par ses jetons `--sticker-medias-*`
   (`src/site/design-system/jetons-stickers.css`). Ce n'est pas le sticker
   « max de choix » : celui-là est l'illustration entre « Comment ça marche »
   et « Vos jeux préférés » (`.acc-separateur-diversite`). */
.acc-sticker-simple {
  position: absolute; top: 0; z-index: 3;
  right: clamp(var(--sticker-medias-bord-mini), var(--sticker-medias-bord-fluide), var(--sticker-medias-bord-maxi));
  width: clamp(var(--sticker-medias-largeur-mini), var(--sticker-medias-largeur-fluide), var(--sticker-medias-largeur-maxi));
  transform: translateY(var(--sticker-medias-decalage)) rotate(var(--sticker-medias-rotation));
}
.acc-medias-defilant .vit-defilant-piste { gap: 56px; }
.acc-medias-defilant img { height: 70px; max-width: 180px; }

/* Bloc « Des questions ? » : accordéon (styles partagés avec la page FAQ). */
.acc-faq-liste {
  max-width: 1200px; margin: 8px auto 32px; text-align: left;
  display: flex; flex-direction: column;
}
.acc-faq-liste .faq-item {
  background: transparent; border: none; border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ll-craie) 35%, transparent);
}
.acc-faq-liste .faq-item summary { padding: 20px 8px; font-weight: 400; font-size: 16px; }
.acc-faq-liste .faq-item[open] summary { background: transparent; }

/* Pourquoi la location de jouet ? (fond ciel). */
.acc-pourquoi {
  background: var(--ciel);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
}
.acc-pourquoi-texte { max-width: 520px; margin-left: auto; }
.acc-pourquoi-texte .titre-section, .acc-pourquoi-texte .sous-titre-section { text-align: left; }
.acc-pourquoi-desc { margin-bottom: 20px; }
.acc-pourquoi-photo { border-radius: 24px; display: block; width: 100%; }
/* Sur desktop, seule la photo de droite s'affiche (une seule photo, comme
   l'original) : la version mobile reste masquée malgré le display:block ci-dessus. */
.acc-pourquoi .seul-mobile { display: none; }
.acc-pourquoi .btn { border: none; cursor: pointer; }

/* Popup « Notre manifeste ». */
.acc-manifeste {
  border: none; border-radius: 20px; padding: 28px; max-width: 640px;
  background: var(--beige); color: var(--craie);
}
.acc-manifeste::backdrop { background: color-mix(in srgb, var(--ll-craie) 50%, transparent); }
.acc-manifeste-tete {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.acc-manifeste-tete h2 { font-family: var(--police-titre); margin: 0; }
.acc-manifeste-croix {
  background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer;
  color: inherit; padding: 4px;
}
.acc-manifeste-texte { font-size: 13px; margin-bottom: 20px; max-height: 55vh; overflow: auto; }
.acc-manifeste .btn { border: none; cursor: pointer; }

/* Réassurance (fond jasmin). */
.acc-reassurance { background: var(--jasmin); }
.acc-reassurance-texte { font-weight: 400; font-size: 12px; }

/* ---------- Adaptation mobile ---------- */
@media (max-width: 900px) {
  .acc-hero, .acc-pourquoi { grid-template-columns: 1fr; }
  .acc-formule { transform: none; aspect-ratio: auto; }
  .acc-formule-2 { transform: none; }
  .acc-medias { margin-top: 80px; }
  .acc-avis-grille { gap: 12px; }
  .acc-avis-grille > .acc-avis { flex-basis: 100%; }
  /* Cartes d'avis compactes en téléphone (recette d'Alban, cas 4) : plus de
     hauteur minimale, quatre lignes de texte avant « voir plus ». */
  .acc-avis { min-height: 0; padding: 14px 16px; gap: 8px; border-radius: 14px; }
  .acc-avis-tete img, .acc-avis-tete .acc-avis-initiale { width: 32px; height: 32px; }
  .acc-avis-texte { -webkit-line-clamp: 4; line-clamp: 4; }
  .acc-avis-texte p { margin-bottom: 4px; }
  .acc-hero .hero-texte { padding-bottom: 0; }
  .acc-periodes { gap: 8px; flex-wrap: wrap; }
  .acc-periode { padding: 8px 14px; }
  .acc-formules-grille { grid-template-columns: 1fr; }
  .acc-pourquoi-texte { margin-left: 0; }
  .acc-pourquoi .seul-mobile { display: block; margin-bottom: 16px; }
  .acc-pourquoi-photo-desktop { display: none; }
}

.acc-notes-externes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin: 24px auto; }
.acc-note-externe { margin: 0; font-weight: 600; }
/* Avis récupérés par API (ticket #157) : texte brut, retours à la ligne gardés. */
.acc-avis-texte-brut { white-space: pre-line; }
.acc-avis-auteur a { color: inherit; }
.acc-avis-date { display: block; font-weight: 400; font-size: 11px; opacity: .75; }
.acc-avis-titre { margin: 0; font-weight: 600; font-size: 13px; }
.acc-avis-source { margin: 0; font-size: 11px; }
.acc-avis-source a, .acc-note-externe a { color: inherit; }

/* Maquette HP-01 (cas 243, note 971 d'Alban, 15/10/2026). */
/* Hero : « circulent » en italique sur sa vague, « sourires » en gras. */
.acc-hero-titre .mot-decore { font-style: italic; }
.acc-hero-titre strong { font-weight: 800; }

/* Bandeau d'indicateurs chiffrés (ticket #627) : le chiffre en gras, son
   libellé dessous, une pastille citron vert entre deux indicateurs. Il
   défile en 32 s et s'arrête au survol, comme la maquette. */
.bandeau-indicateurs { padding: 26px 0; }
.bandeau-indicateurs .bandeau-piste { gap: 0; animation-duration: 40s; }
.bandeau-indicateurs:hover .bandeau-piste { animation-play-state: paused; }
.bandeau-indicateur { gap: clamp(18px, 3.5vw, 52px); padding-right: clamp(18px, 3.5vw, 52px); letter-spacing: normal; }
.bandeau-indicateur-texte { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.bandeau-indicateur strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.5vw, 28px); line-height: 1; }
.bandeau-indicateur-texte span { font-family: var(--font-sans); font-weight: 400; font-size: clamp(12px, 1.3vw, 14px); line-height: 1.2; }

/* Puces de période : la période choisie en ciel, cochée ; les autres claires. */
.acc-periode { background: var(--ll-blanc-100); border-color: var(--ll-craie-50); }
.acc-periode-active { background: var(--ll-ciel-400); border-color: var(--ll-craie-400); }
.acc-periode-active::before { content: "✓ "; }


/* ---- active-cadeau.css ---- */
/* Page /active-cadeau : écrans CC-02 « Activer ma carte cadeau » et CC-03
   « Carte activée » de la consolidation des maquettes (recette d'Alban, cas
   243). Mesures reprises de `Page Activer Carte.dc.html` ; couleurs par les
   seuls jetons de la charte. Chargée après site.css. */

.page-active-cadeau main > section { padding: 0; }
.page-active-cadeau .ac-conteneur {
  position: relative; width: 100%; max-width: 1240px; margin: 0 auto; box-sizing: border-box;
  padding: 0 clamp(20px, 5vw, 48px);
}

/* ---------- CC-02 : héros lilas ---------- */
/* Le lilas s'arrête avant l'encart « offrir », posé sur le beige. */
.page-active-cadeau .ac-activation { position: relative; padding: clamp(32px, 5vw, 64px) 0 0; background: none; }
.page-active-cadeau .ac-activation::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 140px); background: var(--ll-lila);
}
.page-active-cadeau .ac-activation > .ac-conteneur { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 56px); }
.page-active-cadeau .ac-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 5vw, 64px);
  align-items: center; max-width: none; margin: 0;
}
.ac-hero-texte { display: flex; flex-direction: column; gap: 20px; min-width: 0; align-items: flex-start; text-align: left; }
.page-active-cadeau .ac-titre {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(33px, 5vw, 52px); line-height: 1.06;
  letter-spacing: -0.02em; margin: 0; text-wrap: balance; white-space: normal;
}
.ac-titre em, .ac-carte-titre em, .ac-etapes-titre em, .ac-catalogue-titre em,
.page-active-cadeau .bloc-ccm .titre-section strong { font-style: italic; font-weight: 600; }
.page-active-cadeau .ac-sous-titre { margin: 0; font-size: clamp(15px, 1.7vw, 17px); font-weight: 400; line-height: 1.55; max-width: 44ch; }

.page-active-cadeau .ac-form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 440px; width: 100%; margin: 0; }
.ac-champ { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.page-active-cadeau .ac-form input {
  width: 100%; box-sizing: border-box; font: 14px var(--font-sans); color: var(--ll-craie-400);
  background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-400); border-radius: 10px; padding: 12px 16px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.page-active-cadeau .ac-form input::placeholder { color: var(--ll-craie-100); }
.page-active-cadeau .ac-form input:focus { outline: none; border-color: var(--ll-ciel-400); box-shadow: 0 0 0 1px var(--ll-ciel-400); }
.page-active-cadeau .ac-form input[aria-invalid="true"], .page-active-cadeau .ac-form input[aria-invalid="true"]:focus { border-color: var(--ll-carotte); box-shadow: 0 0 0 1px var(--ll-carotte); }
.ac-erreur { margin: 0; font-size: 13px; font-weight: 700; color: var(--ll-carotte-ink); }
.page-active-cadeau .ac-btn-verifier { font-size: 16px; padding: 18px 40px; border-radius: 999px; letter-spacing: 0.02em; }
.ac-btn-attente { opacity: 0.6; cursor: progress; }
.page-active-cadeau .ac-aide { font-size: 13px; padding: 4px 12px; }

.page-active-cadeau .ac-hero-photo {
  width: 100%; max-width: 420px; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 24px; display: block; margin: 0 auto;
}

/* Encart « Vous aussi, offrez des jeux » vers CC-01. */
.ac-offrir {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 18px 22px; border-radius: 24px; background: var(--ll-blanc-100);
}
.ac-offrir-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ac-offrir-texte p { margin: 0; font-size: 13px; color: var(--ll-craie-300); }
.ac-offrir-texte .ac-offrir-titre { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ll-craie-400); }

/* ---------- Carte jasmin du catalogue ---------- */
.page-active-cadeau .ac-catalogue-bloc { padding: clamp(40px, 6vw, 72px) 0 0; }
.page-active-cadeau .ac-catalogue {
  margin: 0; background: var(--ll-jasmin); border-radius: 32px; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px);
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.page-active-cadeau .ac-catalogue-illu { width: clamp(64px, 8vw, 88px); height: auto; margin: 0; }
.page-active-cadeau .ac-catalogue-titre {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.8vw, 38px); line-height: 1.12;
  letter-spacing: -0.01em; margin: 0; text-wrap: balance;
}
.page-active-cadeau .ac-catalogue-texte { margin: 0; font-size: clamp(14px, 1.6vw, 16px); font-weight: 400; line-height: 1.6; max-width: 52ch; }
.page-active-cadeau .ac-catalogue .btn { margin-top: 6px; }

/* ---------- Comment ça marche ---------- */
.page-active-cadeau .bloc-ccm { padding: clamp(56px, 9vw, 104px) clamp(20px, 5vw, 48px); }
.page-active-cadeau .bloc-ccm .titre-section {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.12;
  letter-spacing: -0.01em; margin: 0;
}
.page-active-cadeau .bloc-ccm .sous-titre-section {
  color: var(--ll-craie-300); font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(15px, 1.7vw, 19px); margin: 14px auto clamp(36px, 5vw, 56px);
}
.page-active-cadeau .ccm-etapes {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 36px) clamp(20px, 3vw, 40px);
  max-width: 1080px; margin: 0 auto clamp(32px, 5vw, 48px);
}
.page-active-cadeau .ccm-etape { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page-active-cadeau .ccm-etape img { width: clamp(78px, 9vw, 104px); height: auto; }
.page-active-cadeau .ccm-etape p {
  color: var(--ll-craie-300); font-size: clamp(14px, 1.5vw, 15px); line-height: 1.5; max-width: 20ch; margin: 0;
}

/* ---------- CC-03 : la carte vérifiée ---------- */
.page-active-cadeau .ac-activee::before { height: calc(100% - 120px); }
.page-active-cadeau .ac-activee > .ac-conteneur { gap: clamp(28px, 4vw, 44px); }
.ac-carte-message {
  position: relative; background: var(--ll-blanc-casse); border-radius: 32px;
  padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 48px); display: flex; flex-direction: column; gap: 16px;
}
.ac-sticker {
  position: absolute; top: clamp(-22px, -1vw, -12px); right: clamp(12px, 3vw, 40px);
  width: clamp(84px, 10vw, 128px); height: auto; transform: rotate(8deg); pointer-events: none;
}
.ac-valide { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 0; font-size: 13px; font-weight: 700; padding-right: clamp(80px, 10vw, 120px); }
.ac-valide-pastille {
  width: 26px; height: 26px; border-radius: 50%; background: var(--ll-citron-vert);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.ac-valide-date { font-weight: 400; color: var(--ll-craie-300); }
.ac-carte-titre {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.08;
  letter-spacing: -0.02em; margin: 0; max-width: 16ch; text-wrap: balance;
}
.ac-carte-titre:focus { outline: none; }
.ac-citation {
  margin: 0; font-family: var(--font-display); font-size: clamp(16px, 1.9vw, 20px); line-height: 1.5;
  max-width: 60ch; text-wrap: pretty; overflow-wrap: anywhere;
}
.ac-separateur { height: 1px; border: 0; background: var(--color-border); margin: 4px 0; width: 100%; }
.ac-avec { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.ac-avantages {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 24px;
}
.ac-avantages li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.ac-avantages img { width: 22px; height: 22px; flex: none; margin-top: 1px; }

.ac-etapes-bloc { display: flex; flex-direction: column; gap: 16px; }
.ac-etapes-titre { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.12; margin: 0; }
.page-active-cadeau .ac-etapes {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: none;
}
.page-active-cadeau .ac-etapes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-active-cadeau .ac-etape {
  background: var(--ll-blanc-100); border-radius: 24px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px; align-items: stretch;
}
.page-active-cadeau .ac-etape-num { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; }
.page-active-cadeau .ac-etape-num span { font-size: 16px; opacity: 1; color: var(--ll-craie-300); }
.ac-etape p { margin: 0; font-size: 14px; line-height: 1.5; }
.ac-etape .ac-etape-note { font-size: 12px; color: var(--ll-craie-300); }
.ac-etape-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: auto; }
.ac-etape-actions .btn-tertiaire { font-size: 13px; padding: 4px 12px; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 899px) {
  .page-active-cadeau .ac-activation::before { height: calc(100% - 120px); }
  .page-active-cadeau .ac-hero { grid-template-columns: minmax(0, 1fr); }
  .ac-hero-texte { align-items: center; text-align: center; }
  .page-active-cadeau .ac-form { text-align: left; align-items: center; }
  .page-active-cadeau .ac-form .ac-champ, .page-active-cadeau .ac-form .ac-erreur { align-self: stretch; }
  .page-active-cadeau .ac-hero-photo { max-width: 360px; }
  .page-active-cadeau .ac-etapes, .page-active-cadeau .ac-etapes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-active-cadeau .ccm-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .page-active-cadeau .ac-etapes, .page-active-cadeau .ac-etapes-2 { grid-template-columns: minmax(0, 1fr); }
  .page-active-cadeau .ac-btn-verifier { padding: 16px 32px; }
  .ac-valide { padding-right: 72px; }
}


/* ---- blog.css ---- */
/* ---------- Page /blog (préfixe blog-) ---------- */
.blog-recherche {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 8px;
}
.blog-recherche form { flex: 1 1 420px; }
.blog-recherche input {
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--gris-bordure);
  border-radius: 6px;
  font-family: var(--police-corps);
  font-size: 14px;
  color: var(--craie);
  background: var(--blanc);
}
.blog-recherche input::placeholder { color: color-mix(in srgb, var(--ll-craie) 55%, transparent); }
.blog-tri {
  flex: 0 1 246px;
  position: relative;
  padding: 11px 32px 11px 16px;
  border: 1px solid var(--gris-bordure);
  border-radius: 6px;
  background: var(--blanc);
  font-size: 14px;
  color: color-mix(in srgb, var(--ll-craie) 75%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-tri::after {
  content: "\2304";
  position: absolute;
  right: 12px;
  top: 45%;
  transform: translateY(-50%);
  font-size: 13px;
  color: color-mix(in srgb, var(--ll-craie) 60%, transparent);
}
.blog-entete {
  text-align: center;
  padding: 36px 20px 24px;
}
.blog-entete h1 {
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.2;
  margin: 0 0 10px;
}
.blog-entete p {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 20px;
  margin: 0;
}

/* --- Article à la une + deux vignettes secondaires --- */
.blog-une {
  display: grid;
  grid-template-columns: 1fr 412px;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 0;
}
.blog-une-grande {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  min-height: 408px;
  text-decoration: none;
  color: var(--craie);
}
.blog-une-grande > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-une-carte {
  position: relative;
  margin: 200px 66px 22px 20px;
  background: var(--blanc);
  border-radius: 14px;
  padding: 18px 22px 16px;
}
.blog-une-carte h2 {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 10px;
}
.blog-une-carte p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; }
.blog-une-carte .blog-tags { margin: 0; }
.blog-une-secondaires {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
.blog-une-vignette {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}
.blog-une-vignette img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  display: block;
}
.blog-une-points {
  grid-column: 1 / -1;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 16px 0 4px;
}
.blog-une-points span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ll-craie) 45%, transparent);
}
.blog-une-points .blog-point-actif {
  width: 44px;
  height: 8px;
  background: var(--craie);
}

/* --- Étiquettes de catégorie (jasmin) --- */
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tag {
  display: inline-block;
  background: var(--jasmin);
  color: var(--craie);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1.3;
}

/* --- Grille d'articles et colonne latérale ---
   En desktop, « Les plus consultés » et « Suivez nos actus » forment une
   colonne verticale à droite de la grille ; en dessous de 1100 px, ils passent
   sous la grille. Ils ne s'intercalent plus entre la une et les articles, ni
   entre une recherche et ses résultats (recette d'Alban du 25/09/2026). */
.blog-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: start;
}
.blog-corps .blog-articles { padding-left: 0; padding-right: 0; max-width: none; margin: 0; }
.blog-lateral {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 0 48px;
  position: sticky;
  top: 110px;
}
.blog-lateral .blog-instagram { padding: 28px 22px 30px; }
.blog-lateral .blog-instagram h2 { font-size: 22px; }
.blog-lateral .blog-instagram p { margin-bottom: 20px; font-size: 14px; }
.blog-lateral .blog-top-liste li { gap: 16px; padding: 12px 0; }
.blog-lateral .blog-top-liste a { font-size: 14px; }
.blog-lateral .blog-top-numero { font-size: 24px; }

/* --- Filtres en pastilles (catégorie, tri), comme le tri du catalogue --- */
.blog-filtres {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}
.blog-filtre { min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.blog-filtre-titre { font-weight: 700; margin-right: 4px; }
.blog-pastille {
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--gris-bordure);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--craie);
  white-space: nowrap;
}
.blog-pastille:hover, .blog-pastille:focus-visible { background: var(--beige); }
.blog-pastille.est-actif { background: var(--craie); color: var(--blanc); border-color: transparent; }
.blog-pastille-nb { opacity: 0.6; font-size: 12px; }

.blog-top h2 {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 23px;
  margin: 0 0 20px;
}
.blog-top-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-top-liste li {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--gris-bordure);
}
.blog-top-liste a {
  text-decoration: none;
  font-size: 16px;
  line-height: 1.4;
  color: var(--craie);
}
.blog-top-liste a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-top-numero {
  font-family: var(--police-titre);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--carotte);
  flex: none;
  min-width: 24px;
}
.blog-instagram {
  background: var(--ciel);
  border-radius: 22px;
  padding: 56px 70px 60px;
  text-align: center;
}
.blog-instagram h2 {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 10px;
}
.blog-instagram p { margin: 0 0 36px; font-size: 16px; }
.blog-instagram img { width: 100%; max-width: 560px; display: block; margin: 0 auto; }

/* --- Grille d'articles --- */
.blog-articles {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}
.blog-articles-titre {
  font-size: 34px;
  margin: 0 0 48px;
}
.blog-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.blog-carte {
  background: var(--blanc);
  border: 1px solid color-mix(in srgb, var(--ll-craie) 55%, transparent);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: var(--craie);
  display: flex;
  flex-direction: column;
}
.blog-carte img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.blog-carte-corps { padding: 14px 12px 20px; display: flex; flex-direction: column; gap: 12px; }
.blog-carte h3 {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}
.blog-carte-resume { margin: 0; font-size: 14px; line-height: 1.55; }

/* --- Pagination visuelle --- */
.blog-pagination {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding: 44px 0 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 15px;
}
.blog-page-active { color: var(--ciel); }
.blog-page-fleche { font-size: 20px; line-height: 1; }


/* ---------- Blog servi depuis la base (ticket #97) ---------- */

/* La recherche est un vrai formulaire : champ, catégorie et bouton sur la
   même ligne, et il fonctionne sans JavaScript (method="get" vers /blog). */
.blog-recherche form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.blog-recherche input[type="search"] { flex: 1 1 260px; width: auto; }
/* Le champ et sa croix : après une recherche validée, la croix ramène à la
   liste sans la recherche, catégorie et tri gardés (recette du 25/09/2026).
   La croix native du navigateur est masquée pour ne pas en montrer deux. */
.blog-recherche-champ { position: relative; flex: 1 1 260px; display: flex; min-width: 0; }
.blog-recherche-champ input[type="search"] { flex: 1 1 auto; width: 100%; padding-right: 44px; }
.blog-recherche-champ input[type="search"]::-webkit-search-cancel-button { display: none; }
.blog-recherche-effacer {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; text-decoration: none; color: var(--craie);
}
.blog-recherche-effacer:hover, .blog-recherche-effacer:focus-visible { background: var(--beige); }
.blog-recherche select {
  flex: 0 1 246px;
  padding: 11px 16px;
  border: 1px solid var(--gris-bordure);
  border-radius: 6px;
  background: var(--blanc);
  font-family: var(--police-corps);
  font-size: 14px;
  color: var(--craie);
}
.blog-recherche .formulaire-message { flex: 1 1 100%; }
.blog-resultats { text-align: center; font-size: 14px; opacity: 0.8; margin: 0 0 18px; }

/* Pagination : les numéros sont des liens, la page courante n'en est pas un. */
.blog-page { color: inherit; text-decoration: none; }
.blog-page:hover { text-decoration: underline; }
.blog-page-active { color: var(--ciel); }
.blog-page-fleche { color: inherit; text-decoration: none; }
.blog-page-fleche-inactive { opacity: 0.3; }
.blog-page-ellipse { opacity: 0.5; }
.blog-tag { text-decoration: none; color: inherit; }

/* ---------- Page d'un article (/article/<slug>) ---------- */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 8px;
}
.article-fil { font-size: 14px; margin-bottom: 20px; }
.article-tete h1 {
  font-family: var(--police-titre);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  margin: 0 0 12px;
}
.article-meta { font-size: 14px; opacity: 0.75; margin: 0 0 12px; }
.article-couverture {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 24px auto;
  border-radius: 16px;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Le corps vient de l'éditeur Bubble : la feuille de style tient la
   typographie, les articles n'en portent aucune. */
.article-corps { font-size: 17px; line-height: 1.7; }
.article-corps h2,
.article-corps h3,
.article-corps h4 {
  font-family: var(--police-titre);
  line-height: 1.25;
  margin: 2em 0 0.6em;
}
.article-corps h2 { font-size: 26px; }
.article-corps h3 { font-size: 21px; }
.article-corps h4 { font-size: 18px; }
.article-corps p { margin: 0 0 1.1em; }
.article-corps ul, .article-corps ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.article-corps li { margin-bottom: 0.4em; }
.article-corps img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.4em 0; }
.article-corps a { color: inherit; }

/* Commentaires modérés. */
.article-commentaires { max-width: 760px; margin: 0 auto; }
.article-commentaires-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.article-commentaire {
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: 14px;
  padding: 16px 18px;
}
.article-commentaire-auteur { margin: 0 0 6px; font-weight: 700; font-size: 14px; }
.article-commentaire-auteur span { font-weight: 400; opacity: 0.7; }
.article-commentaire-texte { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }

/* Initiale en place de photo, pour un avis client sans image. */
.acc-avis-initiale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--jasmin);
  font-family: var(--police-titre);
  font-weight: 700;
}

@media (max-width: 1100px) {
  .blog-corps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .blog-lateral {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    padding-top: 0;
  }
}
@media (max-width: 960px) {
  .blog-une { grid-template-columns: 1fr; }
  .blog-une-secondaires { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .blog-une-carte { margin: 200px 20px 22px; }
  .blog-grille { grid-template-columns: repeat(2, 1fr); }
}
/* En mobile, les pastilles de catégorie défilent sur une ligne plutôt que
   d'occuper un demi-écran avant le premier article. */
@media (max-width: 640px) {
  .blog-lateral { grid-template-columns: 1fr; }
  .blog-filtre {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 2px 20px;
  }
  .blog-filtre::-webkit-scrollbar { display: none; }
  .blog-filtre-titre { flex: none; }
}
@media (max-width: 560px) {
  .blog-grille { grid-template-columns: 1fr; }
  .blog-une-secondaires { grid-template-columns: 1fr; }
  .blog-instagram { padding: 32px 24px; }
}

/* Réponses de Lib et Lou sous un commentaire (note 323 du 02/10/2026) : en
   retrait, avec un filet de rappel, et sans jamais ressembler au commentaire
   d'un lecteur. */
.article-commentaire-reponses {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--citron-vert);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.article-commentaire-reponse .article-commentaire-auteur { color: var(--craie); }
@media (max-width: 640px) {
  .article-commentaire-reponses { padding-left: 12px; }
}


/* ---- box-jouets.css ---- */
/* ---------- Page /box-jouets (préfixe bx-) ---------- */
.bx-hero {
  background: var(--lila);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 48px 50px 56px;
  /* Tâche de nuit du 22/10/2026 (Alban) : le contenu suit le cadre de 1240 px
     de « Nos formules » et « Carte-cadeau » sur grand écran. */
  padding-inline: max(50px, calc((100% - 1240px) / 2));
}
.bx-hero .hero-texte { margin-left: 0; max-width: 620px; }
.bx-hero .hero-visuel img { border-radius: 0; }
.bx-surtitre {
  font-family: var(--police-corps);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 12px;
}
.bx-titre { font-size: 62px; font-weight: 400; line-height: 1.15; margin: 0 0 24px; }
.bx-titre p { margin: 0; }
.bx-hero .hero-baseline { font-size: 18px; max-width: 640px; margin: 0 0 48px; }

/* Titres de section : plus gros que le gabarit commun, comme sur l'original. */
.bx-ccm .titre-section, .bx-decouverte .titre-section, .bx-plus .titre-section,
.bx-faq .titre-section, .bx-exemples .titre-section, .bx-seo .titre-section {
  font-size: 36px;
  margin-bottom: 8px;
}
.bx-ccm .sous-titre-section, .bx-decouverte .sous-titre-section,
.bx-plus .sous-titre-section, .bx-faq .sous-titre-section,
.bx-exemples .sous-titre-section, .bx-seo .sous-titre-section {
  font-size: 20px;
  margin-bottom: 32px;
}

.bx-ccm {
  text-align: center;
  background: var(--beige);
  padding: 72px 20px;
}
.bx-ccm .sous-titre-section { margin-bottom: 56px; }
.bx-etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 920px;
  margin: 0 auto 56px;
}
.bx-etape img { height: 110px; width: auto; }
.bx-etape p { font-size: 15px; max-width: 220px; margin: 16px auto 0; }
.bx-decouverte {
  text-align: center;
  background: var(--ciel);
  padding: 56px 20px 64px;
}
.bx-decouverte-corps {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  text-align: left;
}
.bx-decouverte-corps > img { width: 100%; max-width: 440px; justify-self: center; }
.bx-decouverte-texte { font-size: 15px; }
.bx-decouverte-texte .btn {
  display: block;
  width: fit-content;
  margin: 28px auto 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  padding: 10px 34px;
}
.bx-plus {
  text-align: center;
  background: var(--beige);
  padding: 56px 20px 72px;
}
.bx-plus-cartes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 7vw, 104px);
  max-width: 1072px;
  margin: 0 auto;
  text-align: left;
}
.bx-plus-carte {
  background: color-mix(in srgb, var(--ll-jasmin) 55%, transparent);
  border-radius: 16px;
  padding: 24px 22px;
}
.bx-plus-carte h3 { font-family: var(--police-corps); font-size: 19px; margin: 0 0 16px; }
.bx-plus-carte p { margin: 0; font-size: 15px; line-height: 1.6; }

/* Appel FAQ : cinq questions en accordéon au-dessus du bouton. */
.bx-faq {
  text-align: center;
  background: var(--beige);
  padding: 80px 20px 88px;
}
.bx-faq .sous-titre-section { margin-bottom: 48px; }
.bx-faq-liste {
  max-width: 1200px;
  margin: 0 auto 48px;
  text-align: left;
}
.bx-qitem { border-bottom: 1px solid color-mix(in srgb, var(--ll-craie) 45%, transparent); }
.bx-qitem summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 8px;
  font-size: 18px;
}
.bx-qitem summary::-webkit-details-marker { display: none; }
.bx-qplus { position: relative; flex: none; width: 18px; height: 18px; }
.bx-qplus::before, .bx-qplus::after {
  content: "";
  position: absolute;
  background: var(--craie);
  border-radius: 2px;
  transition: transform 0.2s ease;
}
.bx-qplus::before { left: 0; top: 8px; width: 18px; height: 2px; }
.bx-qplus::after { left: 8px; top: 0; width: 2px; height: 18px; }
.bx-qitem[open] .bx-qplus::after { transform: scaleY(0); }
.bx-qreponse { padding: 0 8px 20px; font-size: 15px; }
.bx-qreponse p { margin: 0 0 10px; }
.bx-qreponse p:last-child { margin-bottom: 0; }

.bx-exemples {
  text-align: center;
  background: var(--carotte);
  padding: 56px 20px 64px;
}
.bx-exemples-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1060px;
  margin: 0 auto 56px;
}
.bx-exemple { margin: 0; }
.bx-exemple img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.bx-exemple figcaption { font-weight: 400; text-align: left; margin-top: 12px; font-size: 15px; }
.bx-exemple:nth-child(n+3) figcaption { font-weight: 700; text-align: center; }
.bx-exemples-logos { max-width: 660px; width: 100%; }
.bx-reassurance { background: var(--jasmin); padding: 96px 20px; }
.bx-badges {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.bx-badge img { height: 88px; width: auto; }
.bx-badge h3 {
  display: inline-block;
  font-family: var(--police-corps);
  font-size: 17px;
  font-weight: 700;
  border: 1.5px solid var(--craie);
  border-radius: 999px;
  padding: 9px 22px;
  margin: 20px 0 16px;
}
.bx-badge p { font-size: 14px; margin: 0; line-height: 1.5; }
.bx-seo {
  text-align: center;
  background: var(--beige);
  padding: 56px 12px 72px;
}
.bx-seo-texte {
  max-width: none;
  margin: 0;
  text-align: left;
  font-size: 15px;
}
@media (max-width: 860px) {
  .bx-hero { padding: 48px 20px; }
  .bx-hero, .bx-decouverte-corps, .bx-plus-cartes { grid-template-columns: 1fr; }
  .bx-titre { font-size: 40px; }
  .bx-etapes, .bx-exemples-grille { grid-template-columns: repeat(2, 1fr); }
  .bx-badges { grid-template-columns: repeat(2, 1fr); }
}


/* ---- carte-cadeau-tunnel.css ---- */
/* ---------- Tunnel d'achat de la carte cadeau : CC-04 à CC-07 (consolidation, cas 243) ----------
   Mesures du code de `Page Personnaliser Carte.dc.html` : conteneur de
   1240 px, colonne de formulaire et aperçu de 380 px collant à partir de
   900 px, champs à 16 px d'arrondi, frise de quatre étapes aux couleurs ciel,
   jasmin, framboise et lila, barre « vous avez choisi » collante en bas.
   Jetons de la charte seulement (`test/site-couleurs.test.ts`). */

.compte-main:has(.cct) { padding-top: 0; }
/* Ticket #732 : plus de marge basse sous le tunnel d'achat ; seule la réserve
   du body sous la barre fixe (`body:has(.cct-barre)`) et 24 px de respiration
   gardent le dernier texte au-dessus de la barre. Sans pied du site, la
   bordure transparente de 40 px du dernier bloc (`site.css`, pied qui mord)
   n'a plus rien à recouvrir. */
.compte-main:has(.cct-barre) { padding-bottom: 0; }
.compte-main:has(.cct-barre) > .compte-tunnel { border-bottom: 0; }
.compte-main:has(.cct-barre) .cct { padding-bottom: 24px; }
.compte-tunnel:has(.cct) { max-width: none; padding: 0; background: var(--ll-blanc-casse); }
.cct {
  width: 100%; max-width: 1240px; margin: 0 auto; box-sizing: border-box;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 5vw, 48px) clamp(56px, 8vw, 96px);
  display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px);
  font-family: var(--font-sans); color: var(--ll-craie-400);
}
.cct-tete { display: flex; flex-direction: column; gap: 12px; }
.cct-retour { align-self: flex-start; font-size: 13px; color: var(--ll-craie-400); text-decoration: none; }
.cct-retour [data-cct-retour-libelle], .cct-retour span:last-child { text-decoration: underline; text-decoration-color: var(--ll-ciel-200); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cct-retour:hover span:last-child { text-decoration-color: var(--ll-ciel-400); }
.cct-frise { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; max-width: 640px; }
.cct-frise li { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.2; color: var(--ll-craie-300); }
.cct-frise-libelle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cct-frise li[aria-current] { font-weight: 700; color: var(--ll-craie-400); }
.cct-frise li > span[aria-hidden] { height: 4px; border-radius: 999px; }
.cct-frise-ciel > span[aria-hidden] { background: var(--ll-ciel-100); }
.cct-frise-jasmin > span[aria-hidden] { background: var(--ll-jasmin-100); }
.cct-frise-framboise > span[aria-hidden] { background: var(--ll-framboise-100); }
.cct-frise-lila > span[aria-hidden] { background: var(--ll-lila-100); }
.cct-frise-ciel.est-faite > span[aria-hidden] { background: var(--ll-ciel-400); }
.cct-frise-jasmin.est-faite > span[aria-hidden] { background: var(--ll-jasmin-400); }
.cct-frise-framboise.est-faite > span[aria-hidden] { background: var(--ll-framboise-400); }
.cct-frise-lila.est-faite > span[aria-hidden] { background: var(--ll-lila-400); }
.cct-titre {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.08; letter-spacing: -0.02em; margin: 8px 0 0; text-align: center; text-wrap: balance;
}
.cct-titre em { font-style: italic; font-weight: 600; }

.cct-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.cct-colonne { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.cct-etape { display: flex; flex-direction: column; gap: 28px; }
.cct-etape[hidden] { display: none; }
@media (min-width: 900px) {
  .cct-grille { grid-template-columns: minmax(0, 1fr) 380px; }
  .cct-cote { position: sticky; top: 88px; }
}

/* Blocs et champs */
.cct-bloc { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cct-bloc > legend { font-family: var(--font-display); font-weight: 400; font-size: 17px; padding: 0; margin-bottom: 12px; }
.cct-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.cct-champ { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.cct-champ-court { max-width: 320px; }
.cct-champ input, .cct-champ select, .cct-bloc select, .cct-livraison input, .cct-livraison select {
  box-sizing: border-box; width: 100%; font: inherit; font-weight: 400; font-size: 15px; color: var(--ll-craie-400);
  background: var(--ll-blanc-100); border: 1.5px solid var(--ll-craie-400); border-radius: 16px; padding: 12px 16px;
}
.cct-champ input[readonly] { background: var(--ll-blanc-200); border-color: var(--ll-craie-100); }
.cct-champ input:focus, .cct-champ select:focus, .cct-mot textarea:focus, .cct-livraison input:focus, .cct-livraison select:focus {
  outline: none; border-color: var(--ll-ciel-400); box-shadow: 0 0 0 1px var(--ll-ciel-400);
}
.cct-champ.est-invalide input, .cct-champ.est-invalide select, .cct-bloc .est-invalide { border-color: var(--ll-carotte); }
.cct-aide { font-weight: 400; font-size: 12px; line-height: 1.5; color: var(--ll-craie-300); margin: 0; }
.cct-bloc > p.cct-aide { font-size: 13px; }

/* Puces (occasions, date d'envoi) */
.cct-puces { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.cct-puce { position: relative; cursor: pointer; }
.cct-puce input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cct-puce span { display: flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ll-craie-50); background: var(--ll-blanc-casse); font-size: 13px; font-weight: 700; }
.cct-puce input:checked + span { border: 2px solid var(--ll-craie-400); background: var(--ll-ciel-400); }
.cct-puce input:focus-visible + span { outline: 2px solid var(--ll-ciel-400); outline-offset: 2px; }
.cct-direct .cct-puce span { min-height: 44px; padding: 0 18px; font-size: 14px; }

/* Cartes de choix (mode de réception, montant de repli) */
.cct-cartes-choix, .cct-choix-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.cct-carte-choix, .cct-choix { position: relative; cursor: pointer; }
.cct-carte-choix input, .cct-choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cct-carte-choix > span, .cct-choix > span { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--ll-craie-50); background: var(--ll-blanc-casse); }
.cct-carte-choix strong, .cct-choix strong { font-family: var(--font-display); font-size: 15px; }
.cct-carte-choix span span { font-size: 12px; line-height: 1.45; color: var(--ll-craie-300); }
.cct-carte-choix input:checked + span, .cct-choix input:checked + span { border: 2px solid var(--ll-craie-400); background: var(--ll-ciel-400); }
.cct-carte-choix input:checked + span span { color: var(--ll-craie-400); }
.cct-carte-choix input:focus-visible + span, .cct-choix input:focus-visible + span { outline: 2px solid var(--ll-ciel-400); outline-offset: 2px; }
.cct-direct { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.cct-direct[hidden], [data-cct-si-date][hidden] { display: none; }

/* Mot personnalisé */
.cct-mot { position: relative; border: 1.5px solid var(--ll-craie-400); border-radius: 16px; background: var(--ll-blanc-100); display: flex; flex-direction: column; }
.cct-mot textarea { border: 0; outline: none; resize: vertical; background: transparent; font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--ll-craie-400); padding: 16px 16px 8px; min-height: 140px; }
.cct-mot:focus-within { border-color: var(--ll-ciel-400); box-shadow: 0 0 0 1px var(--ll-ciel-400); }
.cct-mot-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px 12px; }
.cct-generer { cursor: pointer; display: flex; gap: 8px; align-items: center; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ll-jasmin); font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ll-craie-400); }
.cct-generer[hidden] { display: none; }
.cct-generer:hover { background: var(--ll-jasmin-300); }
.cct-generer:focus-visible { outline: 2px solid var(--ll-ciel-400); outline-offset: 2px; }
.cct-compteur { margin-left: auto; font-size: 12px; color: var(--ll-craie-300); }

/* Livraison du coffret : le composant existant, aux mesures du tunnel */
.cct-livraison fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cct-livraison fieldset > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cct-livraison .compte-champ { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; }
.cct-livraison button { cursor: pointer; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ll-craie-400); background: var(--ll-blanc-casse); font-weight: 700; }
/* Les modes en cartes et la carte des relais, comme à la page commande
   (note 1008 d'Alban) : la règle des champs ci-dessus ne vise pas les radios. */
.cct-livraison .cmd-mode input[type="radio"], .cct-livraison .cmd-adresse input[type="radio"] { width: auto; flex: none; padding: 0; border-radius: 50%; margin-top: 3px; accent-color: var(--ll-craie-400); }
.cct-livraison .cmd-mode { margin: 0; border-radius: 16px; }
.cct-livraison .cmd-mode:has(input[name="livraison_mode"]:checked) { border-color: var(--ll-craie-400); background: var(--ll-ciel-50); }
.cct-livraison .cmd-mode-titre { font-size: 14px; }
.cct-livraison .cmd-mode-tarif { font-size: 13px; }
.cct-modes { gap: 8px; }
.cct-modes > .cct-aide { margin: 0; font-weight: 400; }
.cct-livraison .cmd-relais { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cct-livraison .cmd-relais[hidden] { display: none; }
.cct-livraison .cmd-relais p { margin: 0; }
.cct-relais-ligne { display: flex; gap: 8px; align-items: center; }
.cct-relais-ligne input { flex: 1; min-width: 0; }
.cct-livraison .cmd-relais-item { min-height: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--gris-bordure); font-weight: 400; }
.cct-livraison .cmd-recherche-adresse { position: relative; }
.cct-promo { font-size: 13px; }
.cct-promo summary { cursor: pointer; font-weight: 700; text-decoration: underline; text-decoration-color: var(--ll-ciel-200); text-underline-offset: 4px; }
.cct-promo .cct-champ { margin-top: 12px; }

/* Aperçu et récapitulatif */
.cct-cote { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cct-cote-titre { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.cct-apercu { background: var(--ll-lila); border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) { .cct-apercu { aspect-ratio: 1.6; } }
.cct-apercu-haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cct-apercu-haut img { height: 22px; width: auto; }
.cct-apercu-haut span { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.cct-apercu-bas { margin-top: auto; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cct-apercu-bas strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 40px); line-height: 1; }
.cct-recap { background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-50); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.cct-recap-ligne { display: flex; justify-content: space-between; gap: 12px; color: var(--ll-craie-300); }
.cct-recap-ligne span:last-child { text-align: right; }
.cct-recap-ligne.est-premiere { color: var(--ll-craie-400); }
.cct-recap-ligne.est-premiere span:last-child { font-weight: 700; }
.cct-recap hr { width: 100%; height: 1px; border: 0; margin: 0; background: var(--color-border); }
.cct-recap-total { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 18px; }

/* Barre « vous avez choisi », fixée en bas de l'écran pendant tout le tunnel
   (note 899 d'Alban, cas 88). Collante dans le formulaire, elle remontait au
   milieu de l'écran à l'étape 2, plus courte, et dès qu'on défilait jusqu'au
   bas de la page. La page garde sous le pied de page la place de la barre. */
body:has(.cct-barre) { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 560px) { body:has(.cct-barre) { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } }
.cct-barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; margin: 0; background: var(--ll-blanc-casse); border-top: 1px solid var(--color-border); border-radius: 24px 24px 0 0; }
.cct-barre-int { width: 100%; max-width: 1240px; margin: 0 auto; box-sizing: border-box; padding: 12px clamp(16px, 5vw, 48px) calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); }
.cct-barre-int > img { width: clamp(56px, 8vw, 72px); height: clamp(56px, 8vw, 72px); object-fit: contain; flex: none; }
.cct-barre-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 8px 20px; }
.cct-barre-texte > span:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; line-height: 1.35; }
.cct-barre-texte strong { font-family: var(--font-display); font-size: 15px; text-wrap: pretty; }
.cct-barre-action { display: flex; align-items: center; gap: 14px; flex: none; }
.cct-barre-prix { display: flex; flex-direction: column; }
.cct-barre-prix strong { font-size: 16px; white-space: nowrap; }
.cct-manque { font-size: 12px; font-weight: 700; color: var(--ll-carotte-ink); white-space: nowrap; }
.cct-manque[hidden] { display: none; }
.cct .btn { font-weight: 700; }
.cct-suivant { padding: 14px 32px; font-size: 15px; }
@media (min-width: 560px) { .cct-barre-texte { flex-direction: row; align-items: center; } }

.cct-mes-cartes { font-size: 13px; }
.cct-mes-cartes summary { cursor: pointer; font-weight: 700; }
.cct-mes-cartes ul { margin: 12px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.cct-activer { text-align: center; }

/* CC-06 : module Stripe */
.cct-stripe { width: 100%; max-width: 440px; min-height: 120px; background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-50); border-radius: 16px; padding: 12px; box-sizing: border-box; }

/* CC-07 : confirmation */
.cct-merci { max-width: calc(640px + 2 * clamp(20px, 5vw, 48px)); gap: 28px; padding-top: clamp(28px, 6vw, 64px); }
.cct-merci > .cct-titre { margin: 0; }
.cct-merci-yeux { display: block; align-self: center; width: 150px; height: 56px; background: var(--ll-craie-400); -webkit-mask: url(/assets/cc-yeux-plein-02.svg) center / contain no-repeat; mask: url(/assets/cc-yeux-plein-02.svg) center / contain no-repeat; }
.cct-merci-chapeau { margin: -14px auto 0; white-space: pre-line; font-size: 15px; line-height: 1.55; color: var(--ll-craie-300); max-width: 44ch; text-align: center; text-wrap: pretty; }
.cct-commande { display: flex; flex-direction: column; border-radius: 24px; background: var(--ll-blanc-100); border: 1px solid var(--color-border); }
.cct-commande-tete { display: flex; gap: 14px; align-items: center; padding: 16px 18px; }
.cct-commande-tete img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.cct-commande-tete > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ll-craie-300); }
.cct-commande-tete > span strong { font-family: var(--font-display); font-size: 16px; color: var(--ll-craie-400); }
.cct-commande-prix { font-family: var(--font-display); font-size: 18px; white-space: nowrap; }
.cct-commande-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 12px 18px; border-top: 1px solid var(--color-border); font-size: 14px; }
.cct-commande-ligne span:first-child { color: var(--ll-craie-300); }
.cct-commande-ligne span:last-child { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.cct-ensuite h2 { font-family: var(--font-display); font-size: 17px; font-weight: 400; margin: 0 0 12px; }
.cct-ensuite ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: ensuite; }
.cct-ensuite li { counter-increment: ensuite; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.cct-ensuite li::before { content: counter(ensuite); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; font-size: 12px; font-weight: 700; background: var(--ll-ciel-400); }
.cct-ensuite li:nth-child(2)::before { background: var(--ll-jasmin-400); }
.cct-ensuite li:nth-child(3)::before { background: var(--ll-framboise-400); }
.cct-merci-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.cct-btn-large { width: 100%; max-width: 400px; padding: 14px 32px; font-size: 15px; box-sizing: border-box; }
.cct-merci-actions .btn-tertiaire { font-size: 13px; }

/* Décision n° 161 : l'adresse saisie a déjà un compte. Une colonne centrée,
   la connexion d'abord, le paiement sans connexion en dessous. */
.cct-connue-corps { max-width: 36rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.cct-connue-corps .cct-merci-actions { width: 100%; margin: 0; }
.cct-connue-sans { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.cct-conditions { margin-top: 1.25rem; }

/* CC-07 en attente de validation (note 917 d'Alban, cas 88) : un indicateur
   animé aux couleurs de la frise, le message court d'abord, le délai des
   moyens de paiement différés à part. */
.cct-attente { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: -8px; padding: 24px 20px; border-radius: 24px; background: var(--ll-blanc-100); border: 1px solid var(--color-border); text-align: center; }
.cct-attente p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 44ch; text-wrap: pretty; }
.cct-attente p strong { font-family: var(--font-display); font-size: 16px; }
.cct-attente .cct-aide { font-size: 13px; color: var(--ll-craie-300); }
.cct-attente-points { display: flex; gap: 10px; height: 28px; align-items: center; }
.cct-attente-points span { width: 14px; height: 14px; border-radius: 50%; background: var(--ll-ciel-400); animation: cct-attente-saut 1.2s ease-in-out infinite; }
.cct-attente-points span:nth-child(2) { background: var(--ll-jasmin-400); animation-delay: .15s; }
.cct-attente-points span:nth-child(3) { background: var(--ll-framboise-400); animation-delay: .3s; }
@keyframes cct-attente-saut { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  .cct-attente-points span { animation: cct-attente-pulse 1.6s ease-in-out infinite; }
  @keyframes cct-attente-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}
.cct-attente-note { margin: 0 auto; max-width: 52ch; font-size: 13px; line-height: 1.55; color: var(--ll-craie-300); text-align: center; text-wrap: pretty; }

/* Le délai maximal arrête aussi l’indicateur animé. */
[data-cadeau-retour] [hidden] { display: none; }


/* ---- carte-cadeau.css ---- */
/* ---------- Page carte cadeau : écran CC-01 de la consolidation (cas 243) ----------
   Mesures reprises du code de la maquette `Page Carte Cadeau.dc.html` :
   conteneur de 1240 px, gouttière clamp(20px, 5vw, 48px), sections de
   clamp(56px, 9vw, 104px), titres Neulis (police d'affichage) à 400 avec le
   mot fort en italique 600, cartes à 24 px d'arrondi. Deux mises en page :
   large à partir de 900 px, étroite en dessous (seuil de la maquette).
   Uniquement des jetons de la charte (`test/site-couleurs.test.ts`). */

.ccv { font-family: var(--font-sans); color: var(--ll-craie-400); background: var(--ll-blanc-casse); }
.ccv-cadre { width: 100%; max-width: 1240px; margin: 0 auto; box-sizing: border-box; padding: 0 clamp(20px, 5vw, 48px); }
.ccv-cadre-etroit { max-width: 956px; display: flex; flex-direction: column; gap: 28px; }
.ccv-centre { text-align: center; }
.ccv-centre-bloc { align-self: center; }
.ccv-section { padding: clamp(56px, 9vw, 104px) 0; }
.ccv-fond-lila { background: var(--ll-lila); }
.ccv-fond-ciel { background: var(--ll-ciel); }
.ccv-fond-jasmin { background: var(--ll-jasmin); }
/* Ticket #634 : le pied de page mord de 40 px sur le dernier bloc de la page
   (`site.css`, bordure transparente du dernier enfant de <main>). Ici ce
   dernier bloc est `.ccv`, blanc cassé, et le bandeau jaune « prêt à offrir »
   est à l'intérieur : la bordure prend la couleur du bandeau, sinon un liseré
   blanc cassé apparaît derrière les coins arrondis du pied. */
.ccv:has(> .ccv-section.ccv-fond-jasmin:last-child) { border-bottom-color: var(--ll-jasmin); }
.ccv-entete { max-width: 740px; margin: 0 auto clamp(8px, 2vw, 24px); }
.ccv-titre-section {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.12; letter-spacing: -0.01em; margin: 0; text-wrap: balance;
}
.ccv-titre-section em, .ccv-titre-hero em { font-style: italic; font-weight: 600; }
.ccv-sous-titre { font-size: clamp(15px, 1.7vw, 19px); margin: 14px auto 0; color: var(--ll-craie-300); }
.ccv-fond-lila .ccv-sous-titre, .ccv-fond-ciel .ccv-sous-titre { color: var(--ll-craie-400); }
.ccv-note { margin: 0; font-size: 13px; }
.ccv .btn { font-weight: 700; }
.ccv-btn-grand { padding: 14px 32px; font-size: 15px; }

/* Hero */
.ccv-hero { background: var(--ll-ciel); padding: 16px 0 36px; }
.ccv-hero-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; }
.ccv-hero-texte { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; min-width: 0; }
.ccv-activation { margin: 0; font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ccv-activation a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ccv-titre-hero { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.04; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.ccv-hero-chapeau { margin: 0; font-size: 14px; line-height: 1.5; max-width: 46ch; }
.ccv-hero-texte .btn { margin-top: 8px; }
.ccv-hero-visuel img { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
@media (min-width: 900px) {
  .ccv-hero { padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 6vw, 72px); }
  .ccv-hero-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 56px; }
  .ccv-hero-texte { gap: 18px; align-items: flex-start; text-align: left; }
  .ccv-activation { justify-content: flex-start; }
  .ccv-titre-hero { font-size: clamp(33px, 5vw, 58px); }
  .ccv-hero-chapeau { font-size: 16px; }
  .ccv-hero-visuel img { max-width: 520px; }
}

/* Bandeau des médias, défilant */
.ccv-medias { background: var(--ll-lila); padding: 8px 0; overflow: hidden; }
.ccv-medias-piste { display: flex; width: max-content; animation: ccv-defile 120s linear infinite; }
.ccv-medias-groupe { display: flex; align-items: center; gap: 36px; padding-right: 36px; flex: none; }
.ccv-medias-groupe img { display: block; width: 56px; height: 56px; object-fit: contain; flex: none; }
@keyframes ccv-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ccv-medias-piste { animation: none; } }

/* Comment ça marche */
.ccv-section > .ccv-centre { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.ccv-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: 100%; max-width: 420px; }
.ccv-etape { display: grid; grid-template-columns: 64px minmax(0, 1fr); justify-items: start; align-items: start; gap: 6px 16px; text-align: left; max-width: 36ch; margin: 0 auto; width: 100%; }
.ccv-etape img { width: clamp(64px, 9vw, 104px); height: auto; grid-row: span 2; }
.ccv-etape h3 { font-family: var(--font-display); font-size: clamp(14px, 1.8vw, 19px); font-weight: 700; line-height: 1.25; margin: 0; }
.ccv-etape p { margin: 0; font-size: clamp(12px, 1.3vw, 14px); line-height: 1.45; }
@media (min-width: 900px) {
  .ccv-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; max-width: none; }
  .ccv-etape { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}

/* Comparatif */
.ccv-fond-lila .ccv-cadre { display: flex; flex-direction: column; gap: 28px; }
.ccv-cmp-cadre { background: var(--ll-blanc-100); border-radius: 24px; padding: 8px 6px 6px; overflow-x: auto; }
/* Les modalités d’envoi et le nouvel en-tête restent lisibles en mobile. */
.ccv-cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Ticket #580 : les deux en-têtes sont calés par le bas, pour que « e-Carte »
   et sa note restent sur la même ligne que ceux du coffret, dont l'image est
   plus haute. */
.ccv-cmp-tete { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 18px 6px 16px; text-align: center; }
.ccv-cmp-tete img { width: clamp(58px, 8vw, 92px); max-width: 100%; height: auto; margin-bottom: 6px; }
.ccv-cmp-tete.ccv-cmp-coffret img { width: clamp(64px, 9vw, 104px); }
.ccv-cmp-tete strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.6vw, 18px); }
.ccv-cmp-tete span { font-size: 12px; color: var(--ll-craie-300); }
.ccv-cmp-coffret { background: var(--ll-lila-400); }
.ccv-cmp-tete.ccv-cmp-coffret { border-radius: 24px 24px 0 0; }
.ccv-cmp-fin { border-radius: 0 0 18px 18px; }
.ccv-cmp-intitule { padding: 14px 10px 14px 16px; border-top: 1px solid var(--color-border); font-size: 14px; line-height: 1.4; display: flex; align-items: center; }
.ccv-cmp-cellule { padding: 14px 6px; border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; text-align: center; }
.ccv-cmp-texte { font-size: 12px; line-height: 1.4; color: var(--ll-craie-300); }
.ccv-coche { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ccv-coche-oui { background: var(--ll-citron-vert); }
.ccv-coche-non { background: var(--ll-craie-50); }
@media (min-width: 900px) { .ccv-cmp { grid-template-columns: minmax(0, 1fr) 180px 180px; } }

/* Configurateur */
.ccv-composer { width: 100%; max-width: 520px; margin: 0 auto; box-sizing: border-box; scroll-margin-top: 96px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ccv-composer .ccv-titre-section { margin-bottom: 8px; }
#composer { scroll-margin-top: 72px; }
.ccv-intitule { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.ccv-montants { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ccv-montants legend { padding: 0; margin-bottom: 10px; }
.ccv-pastilles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ccv-pastille { position: relative; cursor: pointer; }
.ccv-pastille input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ccv-pastille span {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 44px;
  border-radius: 16px; border: 1.5px solid var(--ll-craie-50); background: var(--ll-blanc-casse);
  font-family: var(--font-display); font-weight: 700; font-size: 17px; white-space: nowrap;
  transition: border-color 140ms, background 140ms;
}
.ccv-pastille:hover span { border-color: var(--ll-craie-200); }
.ccv-pastille input:checked + span { border: 2px solid var(--ll-craie-400); background: var(--ll-ciel-400); }
.ccv-pastille input:focus-visible + span { outline: 2px solid var(--ll-ciel-400); outline-offset: 2px; }
.ccv-pastille:active span { transform: scale(0.98); }
.ccv-champ-libre { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.ccv-libre { display: flex; align-items: center; border: 1.5px solid var(--ll-craie-50); border-radius: 16px; background: var(--ll-blanc-casse); overflow: hidden; }
.ccv-libre > span { padding: 0 4px 0 16px; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.ccv-libre input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ll-craie-400); font-family: var(--font-display); font-weight: 700; font-size: 17px; padding: 10px 12px 10px 4px; }
.ccv-libre:focus-within { border-color: var(--ll-ciel-400); box-shadow: 0 0 0 1px var(--ll-ciel-400); }
.ccv-libre.est-saisi { border: 2px solid var(--ll-craie-400); }
.ccv-libre.est-invalide { border: 2px solid var(--ll-carotte); }
.ccv-erreur { margin: 0; font-size: 13px; font-weight: 700; color: var(--ll-carotte-ink); }
.ccv-equivalence { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 18px 16px; border-radius: 24px; background: var(--ll-jasmin-200); }
.ccv-equivalence[hidden] { display: none; }
.ccv-sticker { position: absolute; z-index: 2; pointer-events: none; top: 18px; left: -18px; width: clamp(84px, 12vw, 112px); height: auto; transform: rotate(-18deg); }
.ccv-environ { font-size: 13px; }
.ccv-duree { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 56px); line-height: 1.05; }
.ccv-rythme { font-size: 14px; font-weight: 700; }
/* Note 878 d'Alban : « 3,5 mois * », l'astérisque renvoie à l'annotation en bas. */
.ccv-duree-ligne { display: inline-flex; align-items: flex-start; gap: 6px; }
.ccv-renvoi { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; }
.ccv-composer > .ccv-annotation { margin-top: 4px; text-align: center; }
.ccv-equivalence p { margin: 10px 0 0; font-size: 12px; }
.ccv-option-coffret { position: relative; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; border: 1.5px solid var(--ll-craie-50); background: var(--ll-blanc-casse); transition: border-color 140ms, background 140ms; }
.ccv-option-coffret input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ccv-option-coffret:has(input:checked) { border: 2px solid var(--ll-craie-400); background: var(--ll-ciel-400); }
.ccv-option-coffret:has(input:focus-visible) { outline: 2px solid var(--ll-ciel-400); outline-offset: 2px; }
.ccv-case { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--ll-craie-400); background: var(--ll-blanc-100); display: flex; align-items: center; justify-content: center; color: transparent; }
.ccv-option-coffret input:checked ~ .ccv-case { background: var(--ll-craie-400); color: var(--ll-blanc-100); }
.ccv-option-coffret img { width: 56px; height: auto; flex: none; }
.ccv-option-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.4; }
.ccv-option-texte strong { font-family: var(--font-display); font-size: 15px; }
.ccv-option-prix { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.ccv-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 4px; }
.ccv-total > span { display: flex; gap: 8px; align-items: baseline; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.ccv-total strong { font-size: 24px; white-space: nowrap; }
.ccv-total .btn { flex: 1 1 0; max-width: 100%; }
.ccv-total .btn[aria-disabled="true"] { opacity: 0.4; }
.ccv-composer > .ccv-note { font-size: 12px; line-height: 1.45; color: var(--ll-craie-300); }
@media (min-width: 900px) {
  .ccv-composer { gap: 16px; }
  .ccv-pastille span { min-height: 52px; }
  .ccv-champ-libre { margin-top: 6px; }
  .ccv-libre input { padding: 14px 14px 14px 4px; }
  .ccv-equivalence { padding: 24px 28px; }
  .ccv-total { flex-wrap: wrap; }
  .ccv-total .btn { flex: 1 1 180px; max-width: 220px; }
}

/* Barre collante du configurateur, en mobile, quand il est hors de l'écran */
.ccv-barre { position: sticky; bottom: 0; z-index: 4; background: var(--ll-blanc-casse); border-top: 1px solid var(--color-border); padding: 10px 20px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ccv-barre[hidden] { display: none; }
.ccv-barre > span { display: flex; flex-direction: column; min-width: 0; }
.ccv-barre strong { font-family: var(--font-display); font-weight: 700; font-size: 18px; white-space: nowrap; }
.ccv-barre > span > span { font-size: 12px; color: var(--ll-craie-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .ccv-barre { display: none; } }

/* Avis réels */
.ccv-fond-ciel .ccv-cadre { display: flex; flex-direction: column; gap: 28px; }
.ccv-avis-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.ccv-avis { margin: 0; background: var(--ll-blanc-100); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.ccv-avis img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ccv-avis blockquote { margin: 0; padding: 20px 22px 10px; font-size: 14px; line-height: 1.55; }
.ccv-avis figcaption { padding: 0 22px 22px; font-size: 12px; color: var(--ll-craie-300); }
.ccv-avis-chiffre { background: var(--ll-blanc-casse); border-radius: 24px; padding: 26px 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px; }
.ccv-avis-chiffre strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.05; }
.ccv-avis-chiffre p { margin: 0; font-size: 15px; }
.ccv-yeux { display: block; width: 88px; height: 43px; margin-bottom: 6px; background: var(--ll-craie-400); -webkit-mask: url(/assets/cc-yeux-plein-06.svg) center / contain no-repeat; mask: url(/assets/cc-yeux-plein-06.svg) center / contain no-repeat; }

/* FAQ en accordéon */
.ccv-faq-yeux { display: block; width: clamp(64px, 8vw, 96px); height: auto; margin: 0 auto 18px; }
.ccv-faq-item { border-bottom: 1.5px solid var(--ll-craie-100); }
.ccv-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 4px; font-weight: 700; font-size: clamp(15px, 1.7vw, 18px); }
.ccv-faq-item summary::-webkit-details-marker { display: none; }
.ccv-faq-item summary:focus-visible { outline: 2px solid var(--ll-ciel-400); outline-offset: 2px; border-radius: 4px; }
.ccv-faq-signe::before { content: "+"; flex: none; font-size: 26px; line-height: 1; font-weight: 400; }
.ccv-faq-item[open] .ccv-faq-signe::before { content: "\2212"; }
.ccv-faq-item p { margin: 0; padding: 0 4px 24px; font-size: clamp(14px, 1.5vw, 15px); line-height: 1.65; max-width: 70ch; }

/* Appel final */
.ccv-fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.ccv-fin > div { display: flex; flex-direction: column; gap: 10px; }
.ccv-fin p { margin: 0; font-size: 15px; }

/* Mosaïque et raisons de la maquette du 18 octobre 2026. */
.ccv-mosaique-section .ccv-entete { margin-bottom: 28px; }
.ccv-mosaique { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "p1 p1 t1 t1 p3 t2" "p1 p1 t3 p4 p3 t5" "t4 p5 p5 t6 p2 p2" "p6 p5 p5 t7 p2 p2"; grid-auto-rows: clamp(84px, 11vw, 170px); gap: 12px; }
.ccv-mosaique > div { min-width: 0; border-radius: 24px; overflow: hidden; }
.ccv-mos-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ccv-mos-p1 { grid-area: p1; } .ccv-mos-p2 { grid-area: p2; } .ccv-mos-p3 { grid-area: p3; } .ccv-mos-p4 { grid-area: p4; } .ccv-mos-p5 { grid-area: p5; } .ccv-mos-p6 { grid-area: p6; }
/* Tickets #909 et #910 : un mot ne se coupe jamais en fin de ligne. La ligne
   ne casse qu'entre deux mots, et la taille suit la largeur d'une case
   simple (la mosaïque est un conteneur) : le mot le plus long des arguments,
   « l’éducation », mesure 5,5 fois la taille de la police ; on en garde 5,8. */
.ccv-mosaique { container-type: inline-size; --ccv-case: calc((100cqi - 60px) / 6 - 20px); }
.ccv-mos-argument { background: var(--ll-jasmin); padding: 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-display); font-size: clamp(12px, calc(var(--ccv-case) / 5.8), 30px); line-height: 1.15; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.ccv-mos-t1 { grid-area: t1; } .ccv-mos-t2 { grid-area: t2; background: var(--ll-framboise); } .ccv-mos-t3 { grid-area: t3; background: var(--ll-ciel); } .ccv-mos-t4 { grid-area: t4; background: var(--ll-framboise); } .ccv-mos-t5 { grid-area: t5; } .ccv-mos-t6 { grid-area: t6; background: var(--ll-ciel); } .ccv-mos-t7 { grid-area: t7; }
.ccv-raisons { background: var(--ll-ciel-400); }
.ccv-raisons ul { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ccv-raisons li { min-width: 0; }
.ccv-raisons img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; }
.ccv-raisons h3 { font-family: var(--font-display); font-size: 20px; }
.ccv-raisons p { font-size: 14px; line-height: 1.5; }
@media (max-width: 899px) {
  .ccv-mosaique { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "p1 p1 t1 p4" "p1 p1 t2 t2" "p3 p3 p5 p5" "p3 p3 t7 p6" "t4 t4 p2 p2"; grid-auto-rows: clamp(60px, 18vw, 130px); gap: 8px; }
  .ccv-mos-t3, .ccv-mos-t5, .ccv-mos-t6 { display: none; }
  .ccv-mosaique { --ccv-case: calc((100cqi - 24px) / 4 - 12px); }
  .ccv-mos-argument { padding: 6px; font-size: clamp(11px, calc(var(--ccv-case) / 5.8), 18px); }
  /* Sur deux colonnes, la case double se calibre sur sa propre largeur. */
  .ccv-mos-t2, .ccv-mos-t4 { font-size: clamp(11px, calc((2 * var(--ccv-case) + 20px) / 5.8), 18px); }
  .ccv-raisons ul { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ccv-raisons li:has(img) { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
}


/* ---- catalogue.css ---- */
/* ---------- Page /catalogue (préfixe cat-) ----------
   Partagée avec /produit et /marque : la vignette (.cat-carte) et la grille
   sont les mêmes partout, une seule définition à tenir. */

/* Largeur du catalogue sur grand écran (recette d'Alban du 01/10/2026, cas 10,
   note 251 : « en desktop augmenter la largeur max du catalogue »).
   1400 px est la largeur maximale déjà posée par l'en-tête du site
   (`.header-barre` dans site.css) : le catalogue était le seul bloc plus
   étroit que son propre en-tête. Aucune valeur inventée, la grille s'aligne
   enfin sur le logo et le menu. Le bandeau de filtres passe de 250 à 288 px,
   soit les +15 % demandés. Ces variables ne servent qu'au catalogue : les
   pages /produit et /marque gardent leur largeur. */
.cat-bandeau,
.cat-collant-contenu,
.cat-corps {
  --cat-largeur: 1400px;
  --cat-colonne-filtres: 288px;
}
.cat-bandeau {
  background: var(--beige);
  padding: 24px 20px 0;
  max-width: var(--cat-largeur);
  margin: 0 auto;
}
.cat-ariane { font-size: 13px; margin: 0 0 16px; }
.cat-ariane a { font-weight: 700; }
.cat-recherche-titre { font-weight: 700; margin: 0 0 8px; }

/* Barre collante (recette du 25/09/2026, cas 10) : la recherche et le tri
   restent sous l'en-tête du site pendant le défilement. `--cat-haut-entete`
   est la hauteur réelle de l'en-tête, posée par site.js ; 74 px est celle de
   l'en-tête sur écran large, au cas où le script ne tournerait pas. */
.cat-collant {
  position: sticky;
  top: var(--cat-haut-entete, 74px);
  z-index: 40;
  background: var(--beige);
  border-bottom: 1px solid var(--gris-bordure);
}
.cat-collant-contenu {
  max-width: var(--cat-largeur);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cat-recherche {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
}
.cat-recherche input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--gris-bordure);
  border-radius: 999px;
  font-family: var(--police-corps);
  background: var(--blanc);
}
.cat-compteur { margin: 0 0 12px; font-size: 14px; font-weight: 700; }

/* Le bouton « Filtres » ouvre le tiroir, à toutes les largeurs (CA-01). */
.cat-bouton-filtres {
  display: inline-block;
  background: var(--blanc);
  border: 1px solid var(--craie);
  color: var(--craie);
  white-space: nowrap;
}
.cat-bouton-filtres-nb {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: var(--craie); color: var(--blanc);
  font-size: 12px; line-height: 20px; text-align: center;
}

/* Panneau de suggestions, ouvert par site.js sous le champ de recherche. */
.cat-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: 16px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ll-craie) 12%, transparent);
  padding: 12px;
  max-height: 60vh;
  overflow-y: auto;
}
.cat-suggestions[hidden] { display: none; }
.cat-sug-titre { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin: 6px 0; color: var(--craie); }
.cat-sug-pastilles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cat-sug-pastille {
  border: 1px solid var(--gris-bordure); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; text-decoration: none;
}
.cat-sug-produits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cat-sug-produit { display: flex; gap: 8px; align-items: center; text-decoration: none; padding: 6px; border-radius: 10px; }
.cat-sug-produit:hover, .cat-sug-produit:focus-visible { background: var(--beige); }
.cat-sug-produit img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.cat-sug-nom { font-weight: 700; font-size: 13px; }
.cat-sug-marque { font-size: 12px; color: var(--craie); }

.cat-corps {
  max-width: var(--cat-largeur);
  margin: 0 auto;
  /* 32 px en bas : un peu d'air entre les dernières vignettes et le pied de
     page quand la pagination est masquée (retouche du cas 10). */
  padding: 16px 20px 32px;
}
.cat-resultats { min-width: 0; }
/* Consolidation des maquettes (cas 243, CA-01) : les filtres vivent dans un
   tiroir à toutes les largeurs, ouvert par le bouton « Filtres » de la barre.
   Sur ordinateur, un panneau de 420 px qui sort de la droite ; en mobile, une
   feuille qui monte du bas (88 % de la hauteur, coins de 32 px, voir plus
   bas). Le panneau est un `popover` HTML : fermé, le navigateur le masque. */
.cat-filtres[popover] { display: none; }
.cat-filtres[popover]:popover-open {
  display: flex; flex-direction: column;
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100%); max-width: none;
  height: 100%; max-height: none;
  margin: 0; padding: 0 20px;
  color: inherit;
  border: 0; border-radius: 0;
  background: var(--beige);
  overflow-y: auto; overscroll-behavior: contain;
}
.cat-filtres[popover]::backdrop { background: var(--ombre); }
.cat-filtres .cat-panneau-tete {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 1;
  margin: 0 -20px; padding: 14px 20px;
  background: var(--beige); border-bottom: 1px solid var(--gris-bordure);
}
.cat-panneau-titre { margin: 0; font-weight: 700; font-size: 18px; }
.cat-panneau-croix {
  width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: var(--blanc); color: var(--craie); font-size: 18px; cursor: pointer;
}
.cat-filtres .cat-panneau-pied {
  display: block;
  position: sticky; bottom: 0;
  margin: auto -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--beige); border-top: 1px solid var(--gris-bordure);
}
.cat-panneau-pied .btn { width: 100%; }
/* Pendant que « Voir les N jeux » se recompte (état « chargement » de la
   maquette, non dessiné) : le bouton s'estompe un instant. */
.cat-filtres[aria-busy="true"] .cat-panneau-voir { opacity: .7; }
/* « Tout le catalogue », sous la vitrine (CA-01). */
.cat-tout-titre { margin: 32px 0 8px; font-size: 24px; scroll-margin-top: calc(var(--cat-haut-entete, 74px) + var(--cat-haut-barre, 110px) + 12px); }
/* Panneau des filtres refait d'après la maquette de Morgane (#771,
   `catalogue/03-panneau-filtres`) : rubriques séparées d'un filet, titres en
   Neulis, de vraies cases à cocher d'un formulaire GET. */
.cat-filtres .cat-panneau-titre { font-family: var(--font-display); font-weight: 400; font-size: 26px; }
/* Le `padding-top` d'un `fieldset` se pose sous sa légende : l'air du haut
   de la rubrique est donc porté par la légende elle-même. */
.cat-filtre-groupe { min-width: 0; margin: 0; border: 0; border-bottom: 1px solid var(--gris-bordure); padding: 0 0 18px; }
.cat-filtre-groupe:last-of-type { border-bottom: none; }
.cat-filtre-titre { padding: 18px 0 0; margin: 0 0 12px; font-family: var(--font-display); font-weight: 400; font-size: 19px; }
.cat-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.cat-options li[hidden] { display: none; }

/* Une case : la vraie case à cocher, puis son libellé, qui reste un lien vers
   la liste avec cette seule case basculée (les robots la suivent, note 590 ;
   sans script, un clic l'applique tout de suite). Avec le script, le lien
   n'est plus qu'un libellé. Couleurs de la charte : coche Ciel, contour Craie. */
.cat-case { display: flex; align-items: flex-start; gap: 12px; padding: 3px 0; cursor: pointer; }
.cat-case input {
  appearance: none; flex: none; display: grid; place-content: center;
  width: 20px; height: 20px; margin: 0;
  border: 1.5px solid var(--ll-craie-400); border-radius: 5px; background: var(--ll-blanc-50); cursor: pointer;
}
.cat-case input:checked { background: var(--ll-ciel-400); }
.cat-case input:checked::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border: solid var(--ll-craie-400); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.cat-case input:focus-visible, .cat-interrupteur input:focus-visible { outline: 2px solid var(--ll-ciel-500); outline-offset: 2px; }
.cat-case-lien { color: inherit; text-decoration: none; }
/* Le nombre de jeux derrière la case (cas 12). Une case qui ne rendrait rien
   reste cliquable mais s'efface, comme sur un site marchand ordinaire. */
.cat-case-nb { font-weight: 400; opacity: .7; }

/* « Afficher uniquement » : un interrupteur, libellé à gauche. */
.cat-interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; cursor: pointer; }
.cat-interrupteur input {
  appearance: none; flex: none; position: relative;
  width: 44px; height: 26px; margin: 0; border-radius: 999px;
  background: var(--ll-craie-100); cursor: pointer; transition: background .15s;
}
.cat-interrupteur input::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--ll-blanc-50);
  transition: transform .15s;
}
.cat-interrupteur input:checked { background: var(--ll-ciel-400); }
.cat-interrupteur input:checked::after { transform: translateX(18px); }

/* « Pour qui ? » et « Quels jeux ? » : des boutons pilules. La case couvre
   toute la pilule, invisible : un clic n'importe où la coche. */
.cat-pilules { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-pilules-colonne { flex-direction: column; align-items: flex-start; }
.cat-pilule {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; box-sizing: border-box; padding: 4px 18px 4px 5px;
  border: 1.5px solid var(--ll-craie-100); border-radius: 999px; background: var(--ll-blanc-50);
  font-size: 14px; cursor: pointer;
}
.cat-pilule input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cat-pilule:has(input:focus-visible) { outline: 2px solid var(--ll-ciel-500); outline-offset: 2px; }
.cat-pilule.est-cochee, .cat-pilule:has(input:checked) { background: var(--ll-ciel-400); border-color: var(--ll-craie-400); }
.cat-pilule:not(:has(input:checked)) { background: var(--ll-blanc-50); border-color: var(--ll-craie-100); }
.cat-pilule.est-vide { opacity: .45; cursor: default; }
.cat-pilule.est-vide input { cursor: default; }
.cat-pilule-picto, .cat-pilule-initiale {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%; background: var(--ll-framboise-300); font-weight: 700;
}
.cat-pilule-initiale { background: var(--ll-ciel-200); }
.cat-pilule-enfant[data-teinte="1"] .cat-pilule-initiale { background: var(--ll-jasmin-400); }

/* Le bandeau des filtres cochés, sous le titre : « 3 filtres
   sélectionnés », « tout décocher », une pastille à croix par filtre. La
   pastille est le libellé de la case : un clic la décoche, sans script. */
.cat-selection { padding: 16px 0; border-bottom: 1px solid var(--gris-bordure); }
.cat-selection[hidden] { display: none; }
.cat-selection-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cat-selection-nb { margin: 0; font-size: 14px; }
.cat-selection-raz {
  font-size: 14px; font-weight: 700; color: inherit;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--ll-ciel-400);
}
.cat-selection-pastilles { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cat-sel-pastille {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px;
  border: 1.5px solid var(--ll-craie-400); border-radius: 999px; background: var(--ll-ciel-400);
  font-size: 13px; cursor: pointer;
}
.cat-sel-pastille::before { content: "✓"; font-size: 11px; }
.cat-sel-croix { font-size: 10px; }

/* « Marques » : champ de recherche (montré par le script), six marques, puis
   « Voir toutes les marques (N) ». */
.cat-marques-recherche {
  display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin: 0 0 10px; padding: 10px 18px;
  border: 1.5px solid var(--ll-craie-400); border-radius: 999px; background: var(--ll-blanc-50);
  font-family: inherit; font-size: 14px; color: inherit;
}
.cat-marques-recherche[hidden] { display: none; }
.cat-marques-autres { margin-top: 4px; }
.cat-marques-autres > summary { list-style: none; cursor: pointer; padding: 6px 0; font-size: 14px; font-weight: 700; }
.cat-marques-autres > summary::-webkit-details-marker { display: none; }
.cat-marques-autres[open] > summary { display: none; }
/* Note 265 d'Alban (01/10/2026) : le dernier mot du libellé et son nombre ne
   se séparent pas, pour que « (156) » ne tombe jamais seul sur la ligne
   suivante. Le reste du libellé revient à la ligne normalement. Libellé et
   nombre forment un seul élément flex : la gouttière de `.cat-case` ne
   s'intercale plus entre eux. */
.cat-case-libelle { min-width: 0; }
.cat-case-fin { white-space: nowrap; }
.cat-case.est-vide { opacity: .45; }

/* Le compteur et, à sa droite, le tri (#769) : un menu déroulant plutôt que
   des pastilles. Sans script, le bouton « Trier » l'applique ; le script le
   cache et applique le choix tout de suite. */
.cat-compteur-ligne {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin: 0 0 12px;
}
.cat-compteur-ligne .cat-compteur { margin: 0; }
.cat-tri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.cat-tri-titre { color: var(--ll-craie-300); }
.cat-tri-choix {
  appearance: none; min-height: 40px; box-sizing: border-box; padding: 6px 38px 6px 16px;
  border: 1.5px solid var(--ll-craie-400); border-radius: 999px; color: inherit;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  /* Le chevron, dessiné en deux dégradés de la couleur du texte. */
  background:
    linear-gradient(45deg, transparent 50%, var(--ll-craie-400) 50%) calc(100% - 20px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--ll-craie-400) 50%, transparent 50%) calc(100% - 14px) 50% / 6px 6px no-repeat,
    var(--ll-blanc-50);
}
.cat-tri-choix:focus-visible { outline: 2px solid var(--ll-ciel-500); outline-offset: 2px; }
.cat-tri-envoi { min-height: 40px; padding: 6px 16px; }
.cat-tri-envoi[hidden] { display: none; }

.cat-actifs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; font-size: 12px; }
.cat-puce {
  text-decoration: none; padding: 4px 10px; border-radius: 999px;
  background: var(--beige); border: 1px solid var(--gris-bordure);
}
.cat-puce::after { content: " ✕"; font-size: 10px; }
.cat-puce-raz { background: none; }

.cat-grille {
  /* La grille est une <section> : sans cela, elle hérite des 48 px de marge
     intérieure des sections de site.css, un vide au-dessus des cartes. */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
/* La carte est une colonne (recette du 02/10/2026, cas 243, note 422,
   d'après la maquette `catalogue/`) : photo, puis nom, marque et note
   alignés à gauche, et le bouton d'ajout tout en bas. Les cartes d'une même
   rangée ont la même hauteur (la grille les étire) : poussé par
   `margin-top: auto`, le bouton tombe à la même hauteur sur toute la rangée,
   quelle que soit la longueur du nom. */
.cat-carte {
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  padding-bottom: 14px;
  position: relative;
  display: flex; flex-direction: column;
}
.cat-carte-infos { margin-bottom: 12px; }
.cat-carte.est-indisponible { opacity: .72; }
/* Un peu d'air autour de la photo (cas 10 : « la photo touche le bord de la
   carte parfois »). */
.cat-carte-image { display: block; position: relative; padding: 14px 14px 0; }
.cat-carte img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--blanc); display: block; border-radius: 10px; }
.cat-carte-pastille {
  position: absolute; top: 20px; left: 20px;
  background: var(--citron-vert); color: var(--craie);
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}

/* Le poids du jeu (« x2 », « x0,5 ») en pastille ronde en bas à droite de
   la photo, comme la maquette `catalogue/` (recette du 02/10/2026, cas 243,
   note 424). Elle remplace le texte orange sous le bouton (note 279). Fond
   blanc, contour et texte Craie, comme les pastilles « ×2 » de la maquette :
   lisible sur n'importe quelle photo. Ronde : largeur minimale égale à la
   hauteur, et un « x0,5 » plus long s'étire en gélule sans couper le texte. */
.cat-carte-coeff {
  position: absolute; right: 22px; bottom: 8px;
  min-width: 30px; height: 30px; padding: 0 6px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--blanc);
  border: 1px solid var(--craie); color: var(--craie);
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* Le cœur de la liste d'envies, posé sur la photo (cas 10). */
.cat-coeur-form { position: absolute; top: 20px; right: 20px; margin: 0; display: flex; align-items: center; gap: 4px; }
.cat-carte > a.cat-coeur { position: absolute; top: 20px; right: 20px; }
.cat-envie.cat-coeur {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0; padding: 0;
  border-radius: 999px; background: var(--blanc);
  box-shadow: 0 1px 4px var(--ombre);
  color: var(--craie); text-decoration: none;
}
.cat-coeur .cat-coeur-icone { fill: none; stroke: currentColor; stroke-width: 1.8; }
.cat-envie.cat-coeur:hover, .cat-envie.cat-coeur:focus-visible { color: var(--framboise); }
.cat-envie.cat-coeur[aria-pressed="true"] { color: var(--framboise); }
.cat-coeur[aria-pressed="true"] .cat-coeur-icone { fill: currentColor; }
.cat-coeur-form .cat-envie-etat { margin: 0; }
/* Le bouton d'ajout (recette d'Alban du 01/10/2026, cas 10, note 257 : « il
   atteint le bord de sa vignette produit (sans margin) et peut avoir le texte
   qui passe sur 2 lignes »).
   Cause : il héritait de `.btn` ses 28 px de marge intérieure latérale et son
   interlettrage de 1 px, sans marge extérieure. En `inline-block`, « AJOUT À
   MON LIB ET LOU » demandait 231 px ; dès que la colonne descendait sous
   ~260 px (tablette, et désormais le desktop élargi à quatre colonnes), le
   bouton butait sur les bords de la carte et repassait sur deux lignes.
   Correctif : il est aligné exactement sur la photo (mêmes 14 px de marge que
   `.cat-carte-image`), sa marge intérieure et son interlettrage sont réduits,
   et sa taille de police suit la largeur de la carte (`cqw`) pour que le
   libellé complet tienne sur une seule ligne jusqu'à la colonne la plus
   étroite que la grille autorise (220 px). `nowrap` garantit l'unique ligne,
   `max-width` interdit tout débordement hors de la largeur de la photo si un
   libellé plus long est saisi au back office.

   Deux précautions dans le sélecteur :
   - il est scopé à la vignette, parce que le même composant sert le gros
     bouton de la fiche produit, qui n'est pas dans une carte et garde son
     dessin d'origine ;
   - il écarte `.panier-quantite`, le compteur « − n + » que `site.js` pose à
     la suite du bouton en lui recopiant la classe `cat-carte-btn` : il a son
     propre dessin dans site.css.
   Aucune de ces règles ne touche `display`, pour ne pas prendre le pas sur
   `[data-panier-ajout][hidden]` ni sur `.btn.panier-quantite`, qui portent la
   même spécificité. */
.cat-carte { container-type: inline-size; }
.cat-carte > .cat-carte-btn { margin-top: auto; }
.cat-carte > .cat-carte-btn:not(.panier-quantite) {
  margin: auto auto 0;
  max-width: calc(100% - 28px);
  padding: 9px 12px;
  font-size: clamp(10.5px, 4.9cqw, 12px);
  letter-spacing: .4px;
  white-space: nowrap;
  overflow: hidden;
}
/* Le libellé de repli (note 257 : « remplacer si besoin par "AJOUT A MON
   PANIER" ou "COMMANDER" »). Il ne sert que là où la vignette est trop
   étroite pour le libellé complet : les vignettes « Vous aimerez aussi » de
   la fiche produit, dont la grille descend à 170 px. Sur le catalogue, dont
   la colonne ne descend jamais sous 220 px, c'est toujours le libellé
   d'origine qui s'affiche. */
.cat-carte-btn-court { display: none; }
@container (max-width: 205px) {
  .cat-carte .cat-carte-btn-long { display: none; }
  .cat-carte .cat-carte-btn-court { display: inline; }
}
.cat-carte-btn.est-indisponible { opacity: .55; }
.cat-carte-titre { font-size: 14px; margin: 10px 14px 0; font-weight: 700; }
.cat-carte-titre a { text-decoration: none; }
.cat-carte-marque { font-size: 12px; margin: 4px 14px 0; color: var(--craie); }
.cat-carte-marque a { text-decoration: none; }
.cat-carte-note { font-size: 12px; margin: 6px 14px 0; display: flex; gap: 4px; justify-content: flex-start; align-items: center; }
.cat-carte-etoile { color: var(--carotte); font-size: 14px; line-height: 1; }
.cat-carte-stock { font-size: 11px; margin: 6px 14px 0; color: var(--craie); }

/* Composant « Carte Jeu » de la consolidation (12/10/2026) : titre sur deux
   lignes au plus, la note à gauche et l'âge en pastille jasmin à droite, et
   « déjà loué » en bas à gauche de la photo pour une cliente connectée. */
.cat-carte-titre a {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-carte-note .cat-carte-age { margin-left: auto; }
.cat-carte-age {
  font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--craie);
  background: var(--jasmin); border-radius: 999px; padding: 3px 9px;
}
.cat-carte-loue {
  position: absolute; left: 22px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 4px; border-radius: 999px; background: var(--blanc);
  font-size: 11px; color: var(--craie);
}
.cat-carte-loue-picto {
  width: 18px; height: 18px; border-radius: 50%; background: var(--ciel);
  display: inline-flex; align-items: center; justify-content: center;
}

.cat-vide { padding: 40px 0; text-align: center; color: var(--craie); }
.cat-pagination {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  padding: 28px 0 56px; flex-wrap: wrap;
}
.cat-pagination-position { font-size: 13px; color: var(--craie); }

/* ---------- Page /produit (préfixe pt-) ---------- */
.pt-tete { max-width: 1180px; margin: 0 auto; padding: 20px 20px 0; }
.pt-retour { font-size: 13px; margin: 0 0 12px; }
.pt-haut {
  max-width: 1180px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
}
.pt-galerie { background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: 16px; padding: 16px; }
.pt-galerie img { width: 100%; height: auto; object-fit: contain; display: block; }
.pt-galerie-vide { aspect-ratio: 3 / 2; }
.pt-titre { font-size: 28px; margin: 0; }
.pt-marque { margin: 4px 0 10px; color: var(--craie); }
.pt-note { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 0 0 12px; }
.pt-note-nb { color: var(--craie); }
.pt-etiquettes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 14px; }
.pt-etiquettes a {
  display: inline-block; font-size: 12px; padding: 4px 10px;
  border: 1px solid var(--gris-bordure); border-radius: 999px; text-decoration: none;
}
.pt-age { font-weight: 700; margin: 0 0 6px; }
.pt-stock { font-size: 13px; margin: 0 0 14px; }
.pt-stock.est-dispo { color: var(--citron-fonce); }
.pt-stock.est-indispo { color: var(--craie); }
.pt-ajout { margin-top: 18px; }
.pt-ajout-titre { font-weight: 700; margin: 0 0 8px; }
.pt-liens-compte { font-size: 14px; margin: 10px 0 0; }

.pt-encart, .pt-avis-equipe, .pt-accordeons, .pt-avis-bloc, .pt-similaires, .pt-garanties, .mq-texte {
  max-width: 1180px; margin: 32px auto 0; padding: 0 20px;
}
.pt-encart {
  background: var(--beige); border-radius: 16px;
  max-width: 1140px; padding: 24px;
}
.pt-encart ul { margin: 12px 0 18px; padding-left: 20px; }
.pt-accordeon { border-bottom: 1px solid var(--gris-bordure); padding: 12px 0; }
.pt-accordeon summary { font-weight: 700; cursor: pointer; }
.pt-accordeon dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0 0; }
.pt-accordeon dt { font-weight: 700; }
.pt-accordeon dd { margin: 0; }
.pt-avis-soustitre { color: var(--craie); margin: 0 0 12px; }
.pt-avis-tris { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; font-size: 13px; }
.pt-avis-tri { text-decoration: none; padding: 5px 12px; border: 1px solid var(--gris-bordure); border-radius: 999px; }
.pt-avis-tri.est-actif { background: var(--craie); color: var(--blanc); border-color: transparent; }
.pt-avis-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.pt-avis {
  background: var(--blanc); border: 1px solid var(--gris-bordure);
  border-radius: 16px; padding: 16px;
}
.pt-avis-date { font-size: 12px; color: var(--craie); margin: 6px 0; }
.pt-avis-texte { margin: 0; }
.pt-similaires .cat-grille { margin-bottom: 20px; }
.pt-garanties ul {
  list-style: none; padding: 0; margin: 0 0 56px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  font-size: 13px; color: var(--craie);
}

/* ---------- Page /marque (préfixe mq-) ---------- */
.mq-tete { max-width: 1180px; margin: 0 auto; padding: 20px 20px 8px; text-align: center; }
.mq-logo { max-width: 180px; height: auto; margin: 0 auto 12px; display: block; }
.mq-chapo { max-width: 720px; margin: 0 auto; }
.mq-texte { padding-bottom: 56px; }

@media (max-width: 860px) {
  .pt-haut { grid-template-columns: 1fr; }
  .cat-sug-produits { grid-template-columns: 1fr; }

  /* Mobile (cas 10) : la barre ne garde que la recherche et le bouton
     « Filtres ». Le tri est à droite du compteur (#769). */
  .cat-recherche-envoi { display: none; }
  .cat-recherche input { padding: 10px 14px; }
}

/* Jusqu'à 960 px (maquette du panneau, #771) : le tiroir devient une feuille
   pleine largeur qui monte du bas, 88 % de la hauteur et coins de 32 px. */
@media (max-width: 960px) {
  .cat-filtres[popover]:popover-open {
    inset: auto 0 0 0;
    width: 100%; height: 88%;
    padding: 0 16px;
    border-radius: 32px 32px 0 0;
  }
  .cat-filtres .cat-panneau-tete { margin: 0 -16px; padding: 14px 16px; }
  .cat-filtres .cat-panneau-pied { margin: auto -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}

/* Les contrôles d’envies restent utilisables sans script. */
.cat-envie {
  display: inline-block;
  margin: 8px 10px 0;
  padding: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.cat-envie[aria-pressed="true"] { font-weight: 700; }
.pt-liens-compte form { display: inline; }

.cat-envie-etat {
  display: inline-block;
  margin: .3rem .35rem .3rem 0;
  padding: .15rem .55rem;
  border-radius: 1rem;
  background: var(--beige);
  color: var(--craie);
  font-size: .8rem;
  font-weight: 600;
}

/* ---------- Catalogue v2 « vitrine éditoriale » (lot L11) ----------
   Mêmes règles que le reste de la feuille : aucune couleur, aucun rayon et
   aucune ombre en dur, uniquement les jetons `--ll-*` du socle (#299). Le
   texte posé sur un aplat de la charte est la Craie, qui tient 4,5 pour 1 sur
   le Ciel, le Jasmin et le Lila. */

/* ---------- Bannières éditoriales ---------- */

.cat-banniere {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  margin: 0 auto 24px;
  padding: 24px;
  max-width: 1200px;
  border-radius: 24px;
}
.cat-banniere-principale { background: var(--ll-ciel-400); }
.cat-banniere-intercalaire { background: var(--ll-jasmin-400); margin-top: 24px; }
.cat-banniere-texte { color: var(--ll-craie); }
.cat-banniere-surtitre {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cat-banniere-titre {
  margin: 0 0 8px;
  font-family: var(--police-titre);
  font-size: 30px;
  line-height: 1.15;
}
.cat-banniere-phrase { margin: 0 0 14px; max-width: 48ch; }
.cat-banniere-visuel img { display: block; width: 100%; border-radius: 18px; }

@media (min-width: 821px) {
  .cat-banniere { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 32px; }
  .cat-banniere-titre { font-size: 40px; }
}

/* ---------- Explorer les catégories ---------- */

.cat-explorer { margin: 0 0 32px; }
.cat-explorer-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.cat-explorer-tete h2 { margin: 0; font-size: 22px; }
.cat-explorer-plus { font-size: 14px; }

.cat-explorer-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* La maquette pose un visuel par catégorie ; ils n'existent pas encore
   (« visuels à fournir », notes.md). En attendant, une pastille de la charte,
   lisible tout de suite, plutôt qu'un cadre gris vide. */
.cat-explorer-lien {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ll-lila-400);
  color: var(--ll-craie);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.cat-explorer-lien:hover { background: var(--ll-ciel-400); }
.cat-explorer-lien:focus-visible { outline: 3px solid var(--ll-ciel-500); outline-offset: 2px; }
/* Note 1031 et ticket #695 : les sélections ouvrent la rangée en tuiles de la
   maquette CA-01 (280 x 112 px, 240 en mobile, coins de 24 px, libellé en
   police de titre sur la gauche, visuel sur les 40 % de droite), dans une
   bande qui défile, au-dessus des pastilles de catégories. Fonds en
   alternance ciel puis lila, comme les deux premières tuiles de la maquette. */
.cat-explorer-tuiles {
  display: flex; gap: 12px; margin: 0 0 14px; padding: 0 0 6px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
}
.cat-explorer-tuiles li { flex: none; scroll-snap-align: start; }
.cat-explorer-lien.cat-explorer-selection {
  position: relative; display: flex; align-items: center; box-sizing: border-box;
  width: 240px; height: 112px; padding: 0 16px; overflow: hidden;
  border-radius: 24px; border: 1px solid var(--ll-craie-50);
  background: var(--ll-ciel-400); color: var(--ll-craie);
  font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.2;
  transition: box-shadow 220ms;
}
.cat-explorer-tuiles li:nth-child(even) .cat-explorer-selection { background: var(--ll-lila-400); }
.cat-explorer-lien.cat-explorer-selection:hover { background: var(--ll-ciel-400); box-shadow: var(--shadow); }
.cat-explorer-tuiles li:nth-child(even) .cat-explorer-selection:hover { background: var(--ll-lila-400); }
.cat-explorer-lien.cat-explorer-selection:active { transform: scale(0.98); }
.cat-explorer-selection-titre { position: relative; z-index: 1; width: 58%; }
.cat-explorer-selection img { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; height: 100%; object-fit: cover; }
@media (min-width: 821px) {
  .cat-explorer-lien.cat-explorer-selection { width: 280px; }
}

/* ---------- Rangées défilantes ---------- */

/* Ticket #717 d'Alban : sans le padding haut du `section` générique, une
   rangée suit le groupe précédent à 80 px au lieu de 128 px. */
/* Ticket #763 de Morgane (« diminue le padding du bas ») : le `section`
   générique laissait 48 px sous chaque rangée, en plus des 32 px de marge. */
.cat-rangee { margin: 0 0 32px; padding-top: 0; padding-bottom: 0; }
.cat-rangee-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.cat-rangee-tete h2 { margin: 0; font-size: 22px; }
.cat-rangee-tout { font-size: 14px; }

/* Le défilement horizontal est en CSS seul : les flèches de la maquette
   demanderaient du JavaScript pour un geste que le doigt, la molette et le
   clavier font déjà. `min-width: 0` sur le conteneur, sans quoi la piste
   impose sa largeur à la page et la grille déborde. */
.cat-resultats { min-width: 0; }
.cat-rangee-piste {
  display: grid;
  grid-auto-flow: column;
  /* 400 px au plus : une rangée d'une ou deux cartes (« Ma liste de
     souhaits » avec un seul jeu) ne les étire plus sur toute la largeur
     (recette d'Alban du 15/10/2026, ticket #639). Au delà de deux cartes,
     rien ne change : elles se partagent la largeur comme avant. */
  grid-auto-columns: minmax(210px, 400px);
  gap: 16px;
  padding: 0 0 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.cat-rangee-piste > .cat-carte { scroll-snap-align: start; margin: 0; }

@media (min-width: 821px) {
  .cat-rangee-piste { grid-auto-columns: minmax(230px, 400px); }
}

/* « Ne plus me proposer ce jeu » : même pastille que le cœur, posée juste à sa
   gauche sur la photo. La maquette range les deux boutons côte à côte en haut
   à droite de la carte. */
.cat-masque-form { position: absolute; top: 20px; right: 64px; margin: 0; }
.cat-masque {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0; padding: 0;
  border: 0; border-radius: 999px; background: var(--blanc);
  box-shadow: 0 1px 4px var(--ombre);
  color: var(--craie); cursor: pointer;
}
.cat-masque:hover, .cat-masque:focus-visible { color: var(--ll-carotte-ink); }
/* Déjà masqué : le bouton rend le jeu au catalogue, et le dit par sa couleur
   autant que par son libellé accessible. */
.cat-masque[aria-pressed="true"] { color: var(--ll-carotte-ink); background: var(--ll-carotte-50); }
.cat-masque:focus-visible { outline: 3px solid var(--ll-ciel-500); outline-offset: 2px; }

/* ---------- Carte jeu au plus près de la charte rendue ----------
   Recette d'Alban du 13/10/2026, cas 243, note 701 (lot 1) : valeurs du
   composant « Carte Jeu » de la consolidation (`Composant Carte Jeu.dc.html`).
   Carte arrondie à 24 px (Craie au survol, avec l'ombre de la charte) ; photo
   carrée bord à bord sur Blanc 200, le jeu à 10 % du bord (il ne touche
   jamais la carte, cas 10) ; « nouveau » en pastille Framboise (couleur de
   tag, plus de Citron, qui est celle de l'action) ; cœur dans un rond Blanc
   50 de 34 px ; marque en capitales Craie 200 ; note en gras derrière
   l'étoile de la charte ; âge en pastille Jasmin 400 ; bouton pleine largeur
   de 42 px. */
.cat-carte {
  border-radius: var(--radius-lg); border-color: var(--color-border-card); background: var(--color-bg-raised);
  padding-bottom: 0;
  transition: border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.cat-carte:hover { border-color: var(--ll-craie-400); box-shadow: var(--shadow); }
.cat-carte-image { padding: 0; background: var(--ll-blanc-200); }
.cat-carte img { border-radius: 0; background: transparent; padding: 10%; box-sizing: border-box; mix-blend-mode: multiply; }
.cat-carte-pastille {
  top: 5cqi; left: 5cqi; background: var(--ll-framboise); color: var(--ll-craie-400);
  font-size: clamp(10px, 4.4cqi, 11px); padding: 4px 9px;
}
.cat-coeur-form, .cat-carte > a.cat-coeur { top: 2cqi; right: 2cqi; }
.cat-carte .cat-envie.cat-coeur { width: 34px; height: 34px; background: var(--ll-blanc-50); box-shadow: none; border: 0; }
.cat-carte-coeff { right: 5cqi; bottom: 5cqi; background: var(--ll-lila-400); border: 0; font-size: clamp(11px, 5cqi, 13px); }
.cat-carte-loue { left: 5cqi; bottom: 5cqi; background: var(--ll-blanc-50); font-size: clamp(10px, 4.4cqi, 11px); }
.cat-carte-loue-picto { background: var(--ll-ciel-400); }
.cat-carte-infos { padding: 5.5cqi 5.5cqi 8px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cat-carte-titre { margin: 0; font-size: clamp(13px, 5.8cqi, 15px); line-height: 1.3; }
.cat-carte-marque {
  margin: 0; font-size: clamp(10px, 4.6cqi, 12px); color: var(--ll-craie-200);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-carte-note { margin: 2px 0 0; gap: 4px; font-size: clamp(12px, 5cqi, 13px); font-weight: 700; justify-content: space-between; }
.cat-carte-etoile.stars .star { width: 14px; height: 14px; }
.cat-carte-note > span[aria-hidden="true"]:not(.cat-carte-etoile) { margin-right: auto; }
.cat-carte-age { background: var(--ll-jasmin-400); font-size: clamp(10px, 4.4cqi, 12px); }
.cat-carte-stock { margin: 0; }
/* Aucune de ces règles ne touche `display` : elle passerait devant
   `[data-panier-ajout][hidden]` (voir plus haut). */
.cat-carte > .cat-carte-btn.btn:not(.panier-quantite) {
  margin: auto 5.5cqi 5.5cqi; max-width: none;
  min-height: 42px; box-sizing: border-box; padding: 13px 8px; text-align: center;
  font-size: clamp(11px, 5cqi, 14px); line-height: 16px; letter-spacing: .02em;
}

/* ---------- CA-01 « Jeux et jouets » au plus près de la charte rendue ----------
   Note 701 d'Alban (cas 243, lot 1), page « Catalogue » de la consolidation :
   titre Neulis Regular 30 px ; champ de recherche en capsule de 44 px bordé
   de Craie 50 ; bouton « Filtres » en capsule de 44 px cerclée de Craie 400
   sur 1,5 px, gras 14 px, Blanc 200 au survol ; titres de rangée Neulis
   Regular 24 px, « voir plus » en gras 14 px souligné au survol. */
.cat-titre {
  font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.15;
  margin: 0 0 8px;
}
.cat-ariane { font-size: 12px; color: var(--ll-craie-300); }
.cat-ariane a {
  font-weight: 400; color: var(--ll-craie-400); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--ll-craie-400);
}
/* #777 : un fil d'Ariane se souligne en Craie, jamais en bleu (charte). */
.cat-ariane a:hover { text-decoration-color: var(--ll-craie-200); }
.cat-recherche input {
  min-height: 44px; box-sizing: border-box; padding: 10px 18px;
  border: 1px solid var(--ll-craie-100); background: var(--ll-blanc-100); font-size: 14px;
}
.cat-recherche input:focus { outline: none; border-color: var(--ll-ciel-400); box-shadow: 0 0 0 3px var(--ll-ciel-100); }
.cat-bouton-filtres {
  min-height: 44px; padding: 0 16px; box-sizing: border-box;
  border: 1.5px solid var(--ll-craie-400); background: transparent;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0;
}
.cat-bouton-filtres:hover { background: var(--ll-blanc-200); }
/* « Retirer filtres » : le même contour que « Filtres », plus voyant que les
   puces qu'il efface (recette d'Alban du 15/10/2026, ticket #675). */
.cat-puce-raz { border: 1.5px solid var(--ll-craie-400); font-weight: 700; }
.cat-puce-raz:hover { background: var(--ll-blanc-200); }
.cat-recherche-envoi { min-height: 44px; }
.cat-explorer-tete h2, .cat-rangee-tete h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2;
}
.cat-explorer-plus, .cat-rangee-tout { font-size: 14px; font-weight: 700; text-decoration: none; }
.cat-explorer-plus:hover, .cat-rangee-tout:hover { text-decoration: underline; }

/* ---------- Recette d'Alban du 15/10/2026 (lot catalogue) ----------
   #504, #539, #626 : le compteur « − n + » qui remplace le bouton d'ajout
   touchait les bords de la vignette (catalogue et « Vous aimerez aussi » de
   la fiche produit). Il prend les mêmes marges que le bouton qu'il remplace,
   donc que le nom du jeu au-dessus, sa hauteur et sa taille de texte, qui
   suit la largeur de la carte : « 1 au panier » tient sur une ligne jusque
   dans les vignettes étroites de la fiche produit. `display` n'est pas
   touché (voir plus haut). */
.cat-carte > .cat-carte-btn.panier-quantite {
  margin: auto 5.5cqi 5.5cqi; min-width: 0; min-height: 42px; box-sizing: border-box;
  gap: 4px; font-size: clamp(11px, 5cqi, 14px); letter-spacing: .02em; white-space: nowrap;
}
.cat-carte > .cat-carte-btn.panier-quantite button { padding: 2px 8px; }
.cat-carte > .cat-carte-btn.panier-quantite .panier-quantite-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 205px) {
  .cat-carte > .cat-carte-btn.panier-quantite { padding: 4px 2px; gap: 2px; }
  .cat-carte > .cat-carte-btn.panier-quantite button { padding: 2px 5px; font-size: 18px; }
}
/* #625 : « Ne plus me proposer ce jeu » suit le cœur depuis qu'il est passé à
   34 px collé à 2cqi du coin (note 701) : même taille, même hauteur, à sa
   gauche, 8 px d'écart. Quand le badge « Déjà loué » occupe la gauche du
   cœur, il descend sous le cœur plutôt que de le recouvrir. */
.cat-carte .cat-masque-form { top: 2cqi; right: calc(2cqi + 34px + 8px); }
.cat-carte:has(.cat-coeur-form .cat-envie-etat) .cat-masque-form { top: calc(2cqi + 34px + 8px); right: 2cqi; }
.cat-carte .cat-masque { width: 34px; height: 34px; background: var(--ll-blanc-50); box-shadow: none; }
.cat-carte .cat-masque[aria-pressed="true"] { background: var(--ll-carotte-50); }
/* Notes 999 et 1000 : un jeu masqué depuis la vignette reste à sa place,
   atténué, l'œil enfoncé, pour qu'on puisse revenir sur le geste tout de
   suite ; il quitte la liste au prochain chargement de la page. */
.cat-carte.est-masquee .cat-carte-image img,
.cat-carte.est-masquee .cat-carte-infos,
.cat-carte.est-masquee > .cat-carte-btn { opacity: .4; }


/* ---- categories-selections.css ---- */
/* Pages catégorie (CA-02) et sélections (CA-03) de la consolidation des
   maquettes, issue #8 (recette d'Alban, cas 243). Les deux reprennent le
   gabarit de liste du catalogue (`catalogue.css`) ; cette feuille n'ajoute que
   ce qui leur est propre, avec des sélecteurs à elles. */

/* ---------- CA-02 : intro de la page catégorie ---------- */
.cat-intro {
  margin: 0 0 8px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ll-craie-400);
}

/* Le message d'une sélection terminée, en tête du catalogue (CA-03). */
.cat-avis-selection {
  margin: 8px 0 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--ll-jasmin-100);
  color: var(--ll-craie-400);
  font-weight: 700;
  font-size: 14px;
}

/* ---------- CA-03 : bannière de la sélection ---------- */
.sel-bandeau { padding-bottom: 8px; }
.sel-banniere {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  padding: 24px 20px;
  border-radius: 32px;
  background: var(--ll-ciel-400);
  color: var(--ll-craie-400);
}
.sel-surtitre {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sel-titre {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
}
.sel-intro { margin: 0; max-width: 48ch; font-size: 16px; line-height: 1.5; }
.sel-banniere-visuel img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  border-radius: 24px;
  background: var(--ll-ciel-300);
}

@media (min-width: 821px) {
  .sel-banniere { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 40px; min-height: 280px; }
  .sel-banniere.sans-visuel { grid-template-columns: 1fr; }
  .sel-titre { font-size: 40px; }
}


/* ---- commande-merci.css ---- */
/* ---------- CO-03 « Merci · suivi » d'après la consolidation ----------
   Cas 243, note 701 d'Alban (point 2), bloc CO-03 de
   `consolidation/export-claude-design/Parcours Boutique.dc.html` : colonne de
   560 px (les marges du haut sont celles du tunnel, 80 px sous l'en-tête), 36 px entre la tête et le corps, 18 px
   entre les cartes. Tête centrée : les yeux de la charte (masque Craie 400 de
   150 × 56 px), « merci » en Neulis Regular 28 px et le prénom en italique
   SemiBold, accroche Neulis Medium 17 à 20 px, détail 13 px Craie 300.
   Carte de suivi Blanc 50 bordée de Craie 50, arrondie à 24 px, 24 px de
   marge, sans ombre ; pastilles de 16 px (Citron vert pour l'étape faite,
   Blanc 200 cerclé de Craie 100 pour la suite) reliées d'un pointillé Craie
   100 ; libellés gras 14 px, détails 12,5 px Craie 300. Point de livraison
   dans un rond Jasmin de 36 px. Carte Lila du geste malin, arrondie à 24 px,
   sticker « rotation » Jasmin de 56 px penché de 8°. « Suivant » en grand
   bouton de 220 px au moins, « suivre ma commande » en bouton tertiaire
   13 px. Toutes les règles sont sous `.cmd-merci` : CO-04 (`.cmd-avis`) et
   la page de commande n'en héritent pas. */

.cmd-merci { max-width: 560px; margin: 0 auto; padding: 0 0 24px; display: flex; flex-direction: column; gap: 36px; }
.cmd-merci-tete { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.cmd-merci-yeux {
  display: block; flex: none; width: 150px; height: 56px; background: var(--ll-craie-400);
  -webkit-mask: url(/assets/co03-yeux-plein-07.svg) center / contain no-repeat;
  mask: url(/assets/co03-yeux-plein-07.svg) center / contain no-repeat;
}
.cmd-merci .cmd-fin-titre { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.15; }
.cmd-merci .cmd-fin-titre em { font-style: italic; font-weight: 600; }
.cmd-merci .cmd-fin-accroche {
  margin: 0; max-width: 38ch; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 2.4vw, 20px); line-height: 1.4; text-wrap: balance;
}
.cmd-merci .cmd-fin-detail { margin: 0; max-width: 46ch; font-size: 13px; color: var(--ll-craie-300); text-wrap: balance; overflow-wrap: anywhere; }

.cmd-merci-corps { display: flex; flex-direction: column; gap: 18px; }
.cmd-merci .cmd-carte { margin: 0; box-shadow: none; }
.cmd-merci .cmd-suivi { padding: 24px; border-radius: var(--radius-lg); background: var(--ll-blanc-50); border: 1px solid var(--ll-craie-50); }
.cmd-merci .cmd-suivi-titre {
  margin: 0 0 18px; font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 1.3;
  display: flex; gap: 10px; align-items: center;
}
.cmd-merci .cmd-suivi-titre .picto { flex: none; }
.cmd-merci .cmd-suivi-etape { gap: 16px; padding-bottom: 22px; }
.cmd-merci .cmd-suivi-etape:last-child { padding-bottom: 0; }
.cmd-merci .cmd-suivi-etape::before { top: 18px; bottom: -4px; border-left-color: var(--ll-craie-100); }
.cmd-merci .cmd-suivi-pastille { margin-top: 1px; box-sizing: border-box; background: var(--ll-blanc-200); border-color: var(--ll-craie-100); }
.cmd-merci .cmd-suivi-etape.est-faite .cmd-suivi-pastille { background: var(--ll-citron-vert); border-color: var(--ll-citron-vert); }
.cmd-merci .cmd-suivi-texte strong { font-size: 14px; color: var(--ll-craie-300); }
.cmd-merci .cmd-suivi-etape.est-faite .cmd-suivi-texte strong { color: var(--ll-craie-400); }
.cmd-merci .cmd-suivi-detail { font-size: 12.5px; color: var(--ll-craie-300); }
.cmd-merci .cmd-suivi-adresse { align-items: center; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--ll-craie-50); }
.cmd-merci .cmd-suivi-adresse-picto {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--ll-jasmin-400); color: var(--ll-craie-400);
}
.cmd-merci .cmd-suivi-adresse strong { font-size: 13px; }
.cmd-merci .cmd-suivi-adresse span span { font-size: 12.5px; color: var(--ll-craie-300); }

.cmd-merci .cmd-geste { align-items: center; gap: 16px; padding: 18px 20px 18px 18px; border-radius: var(--radius-lg); background: var(--ll-lila-400); }
.cmd-merci .cmd-geste-sticker { flex: none; width: 56px; height: 56px; transform: rotate(-8deg); }
.cmd-merci .cmd-geste .cmd-carte-texte { gap: 2px; font-size: 13px; line-height: 1.5; }
.cmd-merci .cmd-geste-titre { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.3; }

.cmd-merci .cmd-fin-actions { margin: 4px 0 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cmd-merci .cmd-fin-actions .btn-grand { min-width: 220px; }
.cmd-merci .cmd-merci-suivre { font-size: 13px; white-space: normal; }


/* ---- compte.css ---- */
/* ---------- Espace client (/compte), classes compte- ----------
   Rangé avec les feuilles de pages : il part dans `/site-compte.css`, la
   feuille du gabarit de l'espace client (#594), après la feuille commune du
   site, dont il reprend la typographie, les couleurs et les boutons. */

.compte-main { padding: 32px 16px 64px; }
/* Pied de page collé en bas de l'écran quand le contenu est court (tunnel
   d'inscription, connexion : recette d'Alban du 29/09/2026, cas 238). Le
   contenu prend la hauteur libre, le pied suit le contenu dès qu'il déborde. */
body.page-compte { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.page-compte > .compte-main { flex: 1 0 auto; }

.compte-grille {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .compte-grille { grid-template-columns: 1fr; gap: 24px; }
}

.compte-nav { display: flex; flex-direction: column; gap: 4px; }
.compte-nav-lien {
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
}
.compte-nav-lien:hover { background: var(--ll-ciel-50); }
.compte-nav-lien.est-actif { background: var(--citron-vert); font-weight: 700; }
.compte-nav-deconnexion { margin-top: 20px; }

.compte-contenu h1 { margin-top: 0; }
.compte-contenu h2 { margin-top: 36px; }

.compte-carte {
  max-width: 520px;
  margin: 48px auto;
  background: var(--blanc);
  border-radius: 20px;
  padding: 32px;
}
.compte-carte h1 { margin-top: 0; }

.compte-encarts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.compte-encart {
  background: var(--blanc);
  border-radius: 16px;
  padding: 20px;
}
.compte-encart h2 { margin: 0 0 8px; font-size: 18px; }

.compte-formulaire { margin: 16px 0 24px; max-width: 460px; }
.compte-champ { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; }
.compte-champ label { font-size: 14px; font-weight: 700; }
.compte-champ input {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ll-craie) 25%, transparent);
  border-radius: 10px;
  background: var(--blanc);
}
.compte-case { display: flex; gap: 10px; align-items: baseline; margin: 0 0 12px; }
.compte-aide { font-size: 13px; color: var(--color-fg-muted); }

.compte-erreur, .compte-ok {
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 16px;
}
.compte-erreur { background: var(--ll-carotte-50); }
.compte-ok { background: var(--ll-citron-50); }

.compte-code {
  font-size: 32px;
  letter-spacing: 8px;
  font-weight: 700;
  text-align: center;
  /* Note 608 (cas 48) : un appui sélectionne tout le code, à copier. */
  -webkit-user-select: all;
  user-select: all;
}

.compte-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.compte-actions form { display: inline; }
.lien-bouton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Tableaux, listes et blocs de déclaration (lot F3, #100) ---------- */

.compte-tableau { width: 100%; border-collapse: collapse; margin: 12px 0 24px; }
.compte-tableau th, .compte-tableau td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ll-craie) 12%, transparent);
  vertical-align: top;
}
.compte-tableau th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 620px) {
  /* Un tableau ne se plie pas : sur mobile il défile, plutôt que de déborder
     la page et de casser la mise en page du site autour. */
  .compte-tableau { display: block; overflow-x: auto; }
}

.compte-liste { margin: 12px 0 24px; padding-left: 20px; }
.compte-liste li { margin-bottom: 8px; }

.compte-article { list-style: none; margin-left: -20px; }
.compte-article-nom { font-weight: 700; display: block; }

.compte-formulaire-large { max-width: 640px; }
.compte-champ textarea, .compte-champ select {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ll-craie) 25%, transparent);
  border-radius: 10px;
  background: var(--blanc);
}

.compte-jeu {
  background: var(--blanc);
  border: 0;
  border-radius: 16px;
  padding: 20px;
  margin: 0 0 20px;
}
.compte-jeu legend { font-weight: 700; padding: 0 6px; }

/* Funnel Stripe de la section « Mon abonnement » (repris du lot C, #118). Les
   jetons de la palette sont ceux de site.css, aucun n'est inventé ici. */
.funnel-info { background: var(--jasmin); border-radius: 12px; padding: 12px 14px; }
.funnel-defs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 0 0 20px;
}
.funnel-defs dt { font-weight: 700; font-size: 0.9rem; opacity: 0.75; }
.funnel-defs dd { margin: 0; }
.funnel-promo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 16px 0 24px; }
.funnel-promo .compte-champ { flex: 1 1 220px; margin: 0; }
.funnel-promo [data-promo-ok] { flex: 0 0 100%; margin: 0; }
.funnel-formule { display: flex; flex-direction: column; gap: 6px; }
.funnel-formule h2 { margin: 0; font-family: var(--police-titre); }
.funnel-prix { font-family: var(--police-titre); font-size: 1.6rem; margin: 6px 0 0; }
.funnel-prix span { font-size: 0.85rem; font-weight: 400; opacity: 0.7; }
.funnel-remise { margin: 0; font-weight: 700; color: var(--citron-fonce); }
.funnel-formule form { margin-top: auto; padding-top: 12px; }

@media (max-width: 560px) {
  .funnel-defs { grid-template-columns: 1fr; gap: 2px 0; }
  .funnel-defs dd { margin-bottom: 10px; }
}

/* ---------- Avantages, envies, notations (lot F3, #100) ---------- */
.compte-solde { font-size: 28px; margin: 4px 0 8px; }
.compte-proposition { margin: 0 0 24px; }
.compte-envies .compte-article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ll-craie) 12%, transparent);
}
.compte-envies .compte-article img { border-radius: 8px; object-fit: cover; }
.compte-envies .compte-article form { grid-column: 3; }
/* Liste de souhaits (recette d'Alban du 29/09/2026, cas 71) : le nom, l'état,
   « Déjà commandé le… » puis le bouton d'ajout au panier, les uns sous les
   autres entre la photo et « Retirer ». */
.compte-envie-texte { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.compte-envie-commandee { font-size: 13px; font-style: italic; }
.compte-envie-panier { margin-top: 4px; }

/* ---------- Funnel « je commence » (lot F2, #99, src/onboarding/) ---------- */
.funnel-etapes {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  counter-reset: none;
}
.funnel-etapes li {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  border: 2px solid color-mix(in srgb, var(--ll-craie) 25%, transparent);
  opacity: 0.6;
}
.funnel-etapes li.est-faite { background: var(--jasmin); border-color: var(--jasmin); opacity: 1; }
.funnel-etapes li.est-courante { background: var(--citron-fonce); border-color: var(--citron-fonce); color: var(--blanc); opacity: 1; }
.funnel-reprise {
  background: color-mix(in srgb, var(--ll-craie) 5%, transparent);
  border-left: 3px solid var(--jasmin);
  border-radius: 6px;
  margin: 0 0 16px;
  padding: 10px 14px;
}
.funnel-reprise p { margin: 4px 0; }
.funnel-choix-liste { display: grid; gap: 12px; margin: 0 0 20px; }
.funnel-choix {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-items: center;
  padding: 14px 16px;
  border: 2px solid color-mix(in srgb, var(--ll-craie) 15%, transparent);
  border-radius: 12px;
  cursor: pointer;
}
.funnel-choix input { grid-row: span 2; }
.funnel-choix .compte-aide { grid-column: 2; margin: 0; }
/* Sélection en Ciel, rôle « contrôle allumé » du design system, comme les
   pastilles et les cartes du tunnel. Le Jasmin est le rôle du bouton
   secondaire : il ne marque pas une sélection (note 286 d'Alban, cas 239,
   « corrige en appliquant la logique générale »). */
.funnel-choix.est-choisi, .funnel-choix:has(input:checked) { border-color: var(--ll-ciel); background: var(--ll-ciel-100); }
.funnel-membres { list-style: none; margin: 0 0 20px; padding: 0; }
.funnel-membre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ll-craie) 12%, transparent);
}
.funnel-membre form { margin: 0; }
.funnel-ajout-membre { margin-bottom: 20px; }
.funnel-formule.est-choisie { outline: 2px solid var(--citron-fonce); }
.funnel-precedent { display: inline-block; margin: 12px 0 0 12px; }

/* Liste de souhaits : badge « Commandé » ou « Déjà loué » (R-C02-07, #151). */
.compte-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--citron-vert); margin: 2px 0; }
.compte-badge[data-etat-envie="déjà loué"] { background: var(--color-bg-sunken); }

/* Tunnel d'inscription connecté (/compte/je-commence) : sans le menu du
   compte, le contenu centré à la largeur qu'il avait à côté du menu
   (recette d'Alban, cas 31). */
.compte-tunnel { max-width: 820px; margin: 0 auto; }

/* Mes commandes (recette d'Alban du 28/09/2026, note 138) : chaque article
   avec sa miniature, puis « Nom - Marque (identifiant) ». */
.compte-article-vignette { display: flex; align-items: center; gap: 12px; }
.compte-article-photo {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px;
  object-fit: cover; background: var(--beige); border: 1px solid var(--gris-bordure);
}
.compte-article-texte { min-width: 0; }

/* « Continuer avec Google » à côté du lien de connexion (recette d'Alban du
   30/09/2026, note 234, cas 31). Le bouton porte les couleurs de Google, qui
   ne se repeignent pas : son logo est une marque. Tout le reste (rayon,
   police, taille de cible) suit la charte du site. */
.compte-ou {
  display: flex; align-items: center; gap: 12px;
  max-width: 460px; margin: 0 0 16px;
  font-size: 13px; color: var(--color-fg-muted);
}
.compte-ou::before, .compte-ou::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--gris-bordure);
}
.compte-google { max-width: 460px; margin: 0 0 24px; }
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 44px;
  background: var(--blanc); color: var(--craie);
  border: 1px solid var(--gris-bordure);
}
.btn-google:hover { background: var(--blanc); border-color: color-mix(in srgb, var(--ll-craie) 40%, transparent); }
.btn-google .google-logo { flex: 0 0 18px; }
.compte-google-mention { max-width: 460px; margin: -12px 0 24px; }

/* ---------- Tunnel « je commence », maquettes du groupe 1 (lot L1, #301) ----
   Les niveaux de titre, les polices, les rayons et les couleurs viennent du
   design system (`libetlou-git/design-system`, `project/colors_and_type.css`),
   jamais de la maquette. Les jetons `--ll-*` sont ceux que le socle (#299)
   pose sur `:root` dans `src/site/site.css` : aucune valeur en dur ici. */

/* La maquette pose le tunnel sur le fond de la page, en colonne large : la
   carte blanche de `pagePublique` s'efface quand elle porte un écran du
   tunnel, et elle seule. Depuis le lot L3, la connexion et l'inscription
   portent elles aussi un écran du tunnel (maquettes 1i et 1j) : elles perdent
   donc la carte, comme la maquette les dessine. */
.compte-carte:has(.funnel-ecran) {
  max-width: 660px;
  background: none;
  padding: 0 8px;
  margin: 24px auto 48px;
}

/* Barre de progression : 5 étapes nommées au lieu de 8 pastilles numérotées.
   Chaque segment porte une couleur de la charte, pleine une fois l'étape
   atteinte, estompée tant qu'elle est devant. */
.funnel-progression { margin: 0 0 20px; }
.funnel-progression-intitule {
  margin: 0 0 10px;
  text-align: right;
  font-size: 14px;
  color: var(--ll-craie);
  opacity: 0.7;
}
.funnel-segments {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.funnel-segment {
  height: 5px;
  border-radius: 999px;
  background: var(--ll-craie-50);
}
.funnel-segment span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.funnel-segment[data-etape="profil"]   { background: var(--ll-ciel-50); }
.funnel-segment[data-etape="envies"]   { background: var(--ll-jasmin-50); }
.funnel-segment[data-etape="compte"]   { background: var(--ll-framboise-50); }
.funnel-segment[data-etape="formule"]  { background: var(--ll-lila-50); }
.funnel-segment[data-etape="paiement"] { background: var(--ll-carotte-50); }
.funnel-segment.est-faite[data-etape="profil"]   { background: var(--ll-ciel); }
.funnel-segment.est-faite[data-etape="envies"]   { background: var(--ll-jasmin); }
.funnel-segment.est-faite[data-etape="compte"]   { background: var(--ll-framboise); }
.funnel-segment.est-faite[data-etape="formule"]  { background: var(--ll-lila); }
.funnel-segment.est-faite[data-etape="paiement"] { background: var(--ll-carotte); }

.funnel-precedent { margin: 0 0 12px; }
.funnel-precedent a { color: var(--ll-craie); }
.funnel-titre { margin: 0 0 8px; text-align: center; }
.funnel-sous-titre { margin: 0 auto 24px; max-width: 34em; text-align: center; opacity: 0.8; }

/* Ce que Lib et Lou s'engage à faire après une demande de rendez-vous
   professionnel (décision d'Alban n° 99) : le délai de rappel et le devis au
   nom de la structure, sur le formulaire et sur l'accusé de réception. */
.funnel-engagement {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ll-ciel-50);
  border: 1px solid color-mix(in srgb, var(--ll-craie) 15%, transparent);
}
.funnel-engagement span:first-child { font-weight: 600; }

/* Choix en cartes : la carte est le bouton d'envoi (1a, pas de « suivant »),
   ou un libellé de case à cocher quand plusieurs réponses coexistent sur
   l'écran (1q). Les deux ont la même apparence. */
.funnel-cartes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 20px; }
.funnel-cartes-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.funnel-carte {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-50);
  border-radius: 16px;
  padding: 16px 20px;
  cursor: pointer;
}
.funnel-carte:hover { border-color: var(--ll-craie); }
.funnel-carte:focus-visible { outline: 2px solid var(--ll-ciel); outline-offset: 2px; }
.funnel-carte.est-choisie, .funnel-carte:has(input:checked) { border: 2px solid var(--ll-craie); padding: 15px 19px; }
.funnel-carte-puce {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--ll-craie);
  display: inline-block;
}
.funnel-carte.est-choisie .funnel-carte-puce {
  border-color: var(--ll-ciel);
  background: radial-gradient(circle, var(--ll-ciel) 0 42%, transparent 44%);
}
.funnel-carte input { accent-color: var(--ll-ciel); }
.funnel-carte-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.funnel-carte-aide { font-size: 14px; opacity: 0.75; }

/* Pastilles : effectifs (7 au lieu de 12 valeurs) et tranches d'âge. */
.funnel-pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.funnel-pastille {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ll-craie);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  background: none;
}
.funnel-pastille input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Sélection en Ciel, rôle `--role-control-on` du design system. La maquette
   1q remplit la pastille choisie en Jasmin, qui est le rôle du bouton
   secondaire : divergence signalée, le design system l'emporte (#301). */
.funnel-pastille:has(input:checked) { background: var(--ll-ciel); border-color: var(--ll-ciel); }
.funnel-pastille:has(input:focus-visible) { outline: 2px solid var(--ll-ciel); outline-offset: 2px; }

.funnel-bloc { border: 0; padding: 0; margin: 0 0 24px; }
.funnel-bloc legend { padding: 0; margin: 0 0 10px; font-weight: 700; }
.funnel-sous-choix { border: 0; padding: 0; margin: 24px 0 0; }
.funnel-sous-choix legend { padding: 0; margin: 0 0 10px; font-weight: 700; }

/* Enfants validés : lignes compactes avec leur âge, saisie en cours sur fond
   Ciel. L'écran reste court à trois ou quatre enfants (1c). */
.funnel-membres { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.funnel-membre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-50);
  border-radius: 16px;
  padding: 14px 20px;
}
.funnel-membre-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.funnel-membre-age { font-size: 14px; opacity: 0.75; }
.funnel-membre-modifier { color: var(--ll-craie); white-space: nowrap; }
.funnel-saisie {
  background: var(--ll-ciel);
  border-radius: 20px;
  padding: 20px;
  margin: 0 0 16px;
}
.funnel-saisie .compte-champ input { background: var(--ll-ciel-50); border-color: transparent; }
.funnel-saisie .compte-champ:last-child { margin-bottom: 0; }

/* Récapitulatif du profil professionnel repris en 1s et 1t, pas redemandé. */
.funnel-recap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-50);
  border-radius: 16px;
  padding: 14px 20px;
  margin: 0 0 24px;
}
.funnel-recap-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.funnel-recap-texte span { font-size: 14px; opacity: 0.75; }

/* Date et heure sur une seule ligne (1s), nom et téléphone de même. */
.funnel-ligne { display: flex; flex-wrap: wrap; gap: 12px; }
.funnel-ligne .compte-champ { flex: 1 1 160px; min-width: 0; }
.funnel-ligne select {
  border: 1px solid var(--ll-craie-50);
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  background: var(--ll-blanc-100);
}

.funnel-suivant { display: block; width: 100%; margin-top: 8px; }
.funnel-actions-secondaires { margin-top: 12px; }
.funnel-actions-secondaires .btn { display: block; width: 100%; }
.funnel-ecran .compte-formulaire { max-width: none; }


/* ---------- Groupe 3 « Profil client » du funnel (lot L2, #301, #302) ------
   Écrans 1y, 1d, 1z, 1aa (les envies), 1e (ce que vous recherchez) et 1g (le
   teaser de la sélection). Mêmes jetons `--ll-*` que le reste du tunnel ;
   la sélection se marque en Ciel partout, jamais en Jasmin, qui est le rôle
   du bouton secondaire (note 286 d'Alban, cas 239). */

/* Onglets : un par enfant (1z) ou par tranche d'âge accueillie (1aa). Chaque
   onglet est un bouton d'envoi du formulaire, pour que changer d'onglet
   enregistre ce qui vient d'être choisi, sans JavaScript. */
.funnel-onglets { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.funnel-onglet {
  flex: 1 1 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid var(--ll-craie-50);
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
}
.funnel-onglet-detail { font-size: 14px; opacity: 0.75; }
.funnel-onglet.est-faite { background: var(--ll-ciel-50); border-color: var(--ll-ciel); }
.funnel-onglet.est-courant { background: var(--ll-blanc-100); border: 2px solid var(--ll-craie); padding: 11px 13px; }
.funnel-onglet:focus-visible { outline: 2px solid var(--ll-ciel); outline-offset: 2px; }
.funnel-onglet-pour { text-align: center; font-weight: 700; margin: 0 0 12px; }

/* Les 9 cartes empilées de la maquette deviennent des pastilles : toute la
   liste tient sans défilement, à 390 px comme en 1440 px. */
.funnel-familles { justify-content: center; margin: 0 0 12px; }
.funnel-compteur { text-align: center; margin: 0 0 12px; opacity: 0.75; }

/* Décision d'Alban n° 98 : les catégories qui comptent assez de jeux à l'âge
   de l'enfant sont en avant, les autres sous ce dépliant. `<details>` natif,
   comme le « pourquoi ce jeu ? » de la suggestion : aucune ligne de
   JavaScript, et le dépliant s'ouvre même si un script échoue. */
.funnel-autres-categories { margin: 0 0 12px; text-align: center; }
.funnel-autres-categories > summary {
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  padding: 6px 4px;
  text-decoration: underline;
}
.funnel-autres-categories > summary:focus-visible { outline: 2px solid var(--ll-ciel); outline-offset: 2px; }
.funnel-autres-compte { font-weight: 400; opacity: 0.75; text-decoration: none; }
.funnel-autres-categories[open] > summary { margin-bottom: 8px; }

/* Cartes de choix de 1e (AB-10, une question, deux réponses au plus) et de
   1af (le questionnaire à gabarit). Les choix restants de 1e s'estompent une
   fois la limite atteinte, ce que fait `site.js` ; sans JavaScript, le
   serveur refuse simplement la troisième réponse. La puce cochée est celle
   des cartes de la charte, plus bas (point Craie) : une seule règle. */
.funnel-carte-choix { cursor: pointer; }
.funnel-carte-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.funnel-carte-choix:has(input:checked) { border: 2px solid var(--ll-craie); padding: 15px 19px; }
.funnel-carte-choix:has(input:focus-visible) { outline: 2px solid var(--ll-ciel); outline-offset: 2px; }
.funnel-carte-choix[data-atteint] { opacity: 0.45; }

/* 1g : le teaser de la sélection. Les trois cartes dessinées sont un décor,
   elles ne montrent aucun jeu réel : trois aplats de la charte. */
.funnel-teaser-texte { text-align: center; margin: 0 auto 24px; max-width: 34em; }
.funnel-teaser-cartes { display: flex; justify-content: center; align-items: center; gap: 0; margin: 0 0 24px; }
.funnel-teaser-cartes span { width: 92px; height: 132px; border-radius: 16px; }
.funnel-teaser-cartes span:nth-child(1) { background: var(--ll-jasmin-200); transform: rotate(-8deg) translateX(14px); }
.funnel-teaser-cartes span:nth-child(2) { background: var(--ll-ciel-200); width: 108px; height: 152px; position: relative; z-index: 1; }
.funnel-teaser-cartes span:nth-child(3) { background: var(--ll-framboise-200); transform: rotate(8deg) translateX(-14px); }
.funnel-tags { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 24px; padding: 0; }
.funnel-tag { border: 1px solid var(--ll-craie); border-radius: 999px; padding: 7px 16px; font-size: 14px; }

@media (min-width: 900px) {
  /* Desktop : même colonne centrée, l'intitulé de l'étape passe à côté de la
     barre comme dans les captures `-desktop`. */
  .funnel-progression { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
  .funnel-progression-intitule { order: 2; margin: 0; }
  .funnel-segments { order: 1; }
}

/* ---------- Bilan de retour des jeux (lot L9 des maquettes, #337) ----------
   Maquette `maquette_refonte_app`, commit `a9fb5a7`, dossier `retour-des-jeux`,
   écrans 1a, 1d, 1e, 2a et 2b. Mobile uniquement chez Morgane : sur grand
   écran, l'écran reste une colonne centrée, comme le funnel du lot L1.
   Aucune couleur en dur : uniquement les jetons `--ll-*` du design system. */

.retour-ecran { max-width: 520px; margin: 0 auto; }
.retour-invisible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.retour-titre { text-align: center; margin: 0 0 12px; font-weight: 400; }
.retour-titre em { font-style: italic; font-weight: 700; }
.retour-chapo { text-align: center; margin: 0 0 20px; color: var(--ll-craie-300); }

.retour-compte {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 24px 0 10px; font-weight: 700; font-size: 15px;
}
.retour-compte span:last-child { font-weight: 400; color: var(--ll-craie-200); }

/* Cartes de jeu : 1a et 2a. */
.retour-cartes { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.retour-carte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-50);
  border-radius: 16px;
  padding: 12px 16px;
}
.retour-carte.est-evaluee { border-color: var(--ll-craie-50); }
.retour-carte-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.retour-carte-nom { font-weight: 700; color: inherit; text-decoration: none; }
.retour-carte-nom:hover { text-decoration: underline; }
.retour-carte-aide { font-size: 13px; color: var(--ll-craie-200); }
.retour-jeu-vignette { display: block; }
.retour-jeu-photo {
  display: block; width: 64px; height: 64px;
  border-radius: 14px; object-fit: cover;
  background: var(--ll-ciel-50);
}
.retour-evaluer { white-space: nowrap; font-weight: 700; }

/* Pastille de décision. Un aplat par décision, pris dans la charte : Jasmin
   pour « à garder », Lila pour « à acheter », contour Craie pour
   « à retourner ». L'encre est celle du jeton (`--ll-*-ink`), pas le Craie
   plein : c'est elle qui tient le contraste sur l'aplat (note 286). */
.retour-pastille {
  display: inline-block; border-radius: 999px; padding: 7px 16px;
  font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none;
  border: 1.5px solid transparent;
}
.retour-pastille.est-poursuivre { background: var(--ll-jasmin); color: var(--ll-jasmin-ink); }
.retour-pastille.est-acheter { background: var(--ll-lila); color: var(--ll-lila-ink); }
.retour-pastille.est-renvoyer { border-color: var(--ll-craie); color: var(--ll-craie); }

/* Étoiles affichées (1a, 2a). Les demi-notes de l'historique Bubble se
   dessinent : une demi-étoile est un dégradé net à 50 %. */
.retour-note { display: inline-flex; gap: 3px; }
.retour-etoile {
  width: 15px; height: 15px; display: inline-block;
  background: var(--ll-craie-50);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.retour-etoile.est-pleine { background: var(--ll-carotte); }
.retour-etoile.est-demie {
  background: linear-gradient(to right, var(--ll-carotte) 50%, var(--ll-craie-50) 50%);
}

/* Pied d'écran : le bouton d'action tient toute la largeur, comme la maquette. */
.retour-pied { margin: 28px 0 0; }
.retour-pied form { margin: 0; }
.retour-cta { display: block; width: 100%; }
/* Bouton inactif : le gris sur Citron de la maquette ne passe pas le contraste.
   On garde la pilule, en Citron très clair avec l'encre Craie atténuée, ce qui
   se lit et dit bien « pas encore » (consigne 286 d'Alban). */
.retour-cta.est-inactif {
  background: var(--ll-citron-50); color: var(--ll-craie-200); cursor: not-allowed;
  pointer-events: none;
}
.retour-pied-aide { text-align: center; font-size: 13px; color: var(--ll-craie-200); margin: 10px 0 0; }

/* Écran d'évaluation d'un jeu (1d, 1e). */
.retour-fil { margin: 0 0 16px; }
.retour-fil a { font-weight: 700; }
.retour-entete { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.retour-entete .retour-jeu-photo { width: 84px; height: 84px; border-radius: 18px; }
.retour-entete-nom { margin: 0; font-size: 24px; }
.retour-entete-aide { margin: 2px 0 0; font-size: 14px; color: var(--ll-craie-200); }

.retour-jeu { border: 0; padding: 0; margin: 0; }
.retour-question { font-weight: 700; margin: 0 0 10px; }

.retour-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.retour-tuile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; padding: 16px 8px; cursor: pointer;
  background: var(--ll-blanc-100);
  border: 1.5px solid var(--ll-craie-50);
  border-radius: 16px;
}
.retour-tuile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.retour-tuile-titre { font-weight: 700; font-size: 15px; }
.retour-tuile-aide { font-size: 12px; color: var(--ll-craie-200); line-height: 1.3; }
.retour-tuile:has(input:checked) { border-color: var(--ll-craie); border-width: 2px; padding: 15px 7px; }
.retour-tuile:has(input:focus-visible) { outline: 2px solid var(--ll-ciel); outline-offset: 2px; }
/* Cas 67 : « Le garder » grisé quand le plafond de jeux gardés est atteint
   par d'autres jeux ; la raison est écrite sous les tuiles, jamais portée par
   la couleur seule. */
.retour-tuile.est-bloquee { cursor: not-allowed; background: var(--ll-craie-50); color: var(--ll-craie-200); border-style: dashed; }
/* Toutes les décisions ne sont pas toujours proposées : un jeu sans prix de
   vente n'a pas de tuile « L'acheter », le premier jeu d'un coffret n'a que
   « Le retourner ». Les tuiles restantes se partagent toute la largeur plutôt
   que de laisser une colonne vide. */
.retour-tuiles:has(.retour-tuile:only-child) { grid-template-columns: minmax(0, 1fr); }
.retour-tuiles:has(.retour-tuile:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* L'avis, en grand encart Ciel comme la maquette. */
.retour-avis {
  background: var(--ll-ciel);
  border-radius: 20px;
  padding: 22px 20px;
  margin: 20px 0;
  text-align: center;
}
.retour-avis-titre { margin: 0 0 14px; font-size: 20px; }
.retour-avis-label { margin: 0 0 8px; font-weight: 700; font-size: 15px; }
.retour-avis textarea {
  width: 100%; border-radius: 14px; border: 1px solid var(--ll-craie-50);
  background: var(--ll-blanc-100); padding: 12px 14px; font: inherit; resize: vertical;
}

/* Étoiles de saisie : cinq boutons radio, écrits à l'envers dans le HTML pour
   que `~` colore la note choisie et toutes celles qui la précèdent, sans une
   ligne de JavaScript. */
.retour-etoiles { display: flex; flex-direction: row-reverse; justify-content: center; gap: 6px; margin: 0 0 18px; }
.retour-etoile-champ { position: absolute; opacity: 0; width: 1px; height: 1px; }
.retour-etoile-saisie {
  width: 36px; height: 36px; cursor: pointer;
  background: var(--ll-blanc-200);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.retour-etoile-champ:checked ~ .retour-etoile-saisie,
.retour-etoile-champ:checked + .retour-etoile-saisie { background: var(--ll-carotte); }
.retour-etoiles:hover .retour-etoile-saisie { background: var(--ll-carotte-200); }
.retour-etoile-saisie:hover,
.retour-etoile-saisie:hover ~ .retour-etoile-saisie { background: var(--ll-carotte); }
.retour-etoile-champ:focus-visible + .retour-etoile-saisie { outline: 2px solid var(--ll-craie); outline-offset: 3px; }

/* L'état du jeu, en carte blanche. */
.retour-etat {
  background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-50);
  border-radius: 20px;
  padding: 20px;
  margin: 0 0 20px;
}
.retour-etat-titre { margin: 0 0 2px; font-size: 20px; }
.retour-echelle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 14px 0 4px; }
.retour-etat-cran {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; cursor: pointer;
}
.retour-etat-cran input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.retour-etat-point {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent;
}
.retour-etat-nom { font-size: 12px; line-height: 1.2; }
/* L'explication du cran choisi, sur une ligne sous l'échelle : une colonne de
   cinquième de largeur casserait la phrase en six lignes à 390 px. */
.retour-etat-legende { margin: 6px 0 0; font-size: 13px; color: var(--ll-craie-300); min-height: 1.2em; }
.retour-etat-legende span { display: none; }
/* Du plus usé au plus beau : Carotte vers Citron, les deux extrémités de la
   charte. Le cran choisi se signale par un contour Craie, pas seulement par sa
   couleur : la couleur seule ne porte jamais une information (note 286). */
.retour-etat-cran:nth-child(1) .retour-etat-point { background: var(--ll-carotte); }
.retour-etat-cran:nth-child(2) .retour-etat-point { background: var(--ll-carotte-200); }
.retour-etat-cran:nth-child(3) .retour-etat-point { background: var(--ll-jasmin); }
.retour-etat-cran:nth-child(4) .retour-etat-point { background: var(--ll-citron-200); }
.retour-etat-cran:nth-child(5) .retour-etat-point { background: var(--ll-citron-vert); }
.retour-etat-cran:has(input:checked) .retour-etat-point { border-color: var(--ll-craie); }
.retour-etat-cran:has(input:checked) .retour-etat-nom { font-weight: 700; }
.retour-etat:has(input[name^="etat"][value="en fin de vie"]:checked) .retour-etat-legende span[data-etat="en fin de vie"],
.retour-etat:has(input[name^="etat"][value="usagé"]:checked) .retour-etat-legende span[data-etat="usagé"],
.retour-etat:has(input[name^="etat"][value="état moyen"]:checked) .retour-etat-legende span[data-etat="état moyen"],
.retour-etat:has(input[name^="etat"][value="bon état"]:checked) .retour-etat-legende span[data-etat="bon état"],
.retour-etat:has(input[name^="etat"][value="parfait état"]:checked) .retour-etat-legende span[data-etat="parfait état"] { display: inline; }
.retour-etat-cran:has(input:focus-visible) .retour-etat-point { outline: 2px solid var(--ll-ciel); outline-offset: 2px; }

.retour-complet {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--ll-craie-50);
  margin-top: 18px; padding-top: 16px;
  font-weight: 700;
}
.retour-bascule {
  display: inline-flex; border: 1px solid var(--ll-craie-50);
  border-radius: 999px; overflow: hidden; background: var(--ll-blanc-50);
}
.retour-bascule input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.retour-bascule label { padding: 9px 22px; cursor: pointer; font-weight: 400; }
.retour-bascule input:checked + label { background: var(--ll-carotte); color: var(--ll-carotte-ink); font-weight: 700; }
.retour-bascule input:focus-visible + label { outline: 2px solid var(--ll-craie); outline-offset: -2px; }

/* La zone logistique ne s'ouvre que si le jeu est déclaré incomplet (1e). */
.retour-manque {
  display: none;
  background: var(--ll-carotte-100);
  border-radius: 14px;
  padding: 14px;
  margin-top: 14px;
}
.retour-jeu:has(input[name^="incomplet"][value="1"]:checked) .retour-manque { display: block; }

/* Décision d'Alban n° 57 du 04/10/2026 : les questions posées dépendent de la
   décision du jeu. « Le retourner » demande tout, « l'acheter » l'avis seul,
   « le garder » rien, parce que garder veut dire prolonger : l'avis sera
   demandé le jour du renvoi ou de l'achat. Tant qu'aucune tuile n'est cochée,
   tout reste visible (écran 1d de la maquette, vide). Aucun JavaScript ici :
   `compte-client.js` ne pose que le `required` du navigateur. */
.retour-garde-mot { display: none; margin: 22px 0 0; color: var(--ll-craie-300); }
.retour-jeu:has(input[name^="choix"][value="poursuivre"]:checked) .retour-garde-mot { display: block; }
.retour-jeu:has(input[name^="choix"][value="poursuivre"]:checked) .retour-avis,
.retour-jeu:has(input[name^="choix"][value="poursuivre"]:checked) .retour-etat,
.retour-jeu:has(input[name^="choix"][value="acheter"]:checked) .retour-etat { display: none; }
.retour-formulaire-jeu:has(input[name^="choix"][value="poursuivre"]:checked) .retour-obligatoire { display: none; }
.retour-manque-label { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.retour-manque textarea {
  width: 100%; border-radius: 12px; border: 1px solid var(--ll-craie-50);
  background: var(--ll-blanc-50); padding: 10px 12px; font: inherit; resize: vertical;
}

/* Bilan (2a) : le décompte des décisions et le montant des achats. */
.retour-total {
  background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-50);
  border-radius: 20px;
  padding: 20px;
}
.retour-total-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.retour-total-lignes li { display: flex; justify-content: space-between; gap: 12px; }
.retour-total-du {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--ll-craie-50);
  margin: 16px 0 6px; padding-top: 14px;
  font-size: 20px;
}
.retour-total-du strong { font-size: 26px; }

/* Les trois gestes du retour (2b), affichés sur le suivi dès la déclaration. */
.retour-gestes-bloc { margin: 0 0 24px; }
.retour-aretourner {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-50);
  border-radius: 16px;
  padding: 14px 18px;
  margin: 0 0 18px;
}
.retour-aretourner span:first-child { font-weight: 700; }
.retour-aretourner span:last-child { color: var(--ll-craie-200); }
/* Issue #3 (cas 243) : RE-01 ouvert depuis le panier (pastille de la fiche
   RE-04), la date limite de dépôt de RE-04 et la place du jeu gardé de RE-03. */
.retour-etape-panier { text-align: center; margin: 0 0 12px; }
.retour-etape-panier span { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--ll-jasmin-400); color: var(--ll-craie-400); font-size: 13px; font-weight: 600; }
.retour-date-limite { text-align: center; margin: 0 0 20px; }
.retour-total-places { margin: 12px 0 0; font-size: 14px; color: var(--ll-craie-300); }
.retour-gestes {
  list-style: none; margin: 0; padding: 22px 20px;
  background: var(--ll-ciel); border-radius: 20px;
  display: grid; gap: 20px;
}
.retour-geste { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.retour-geste-numero {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ll-craie); color: var(--ll-blanc-100);
  font-weight: 700; font-size: 14px;
}
.retour-geste-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

@media (min-width: 900px) {
  /* Pas de desktop dessiné : la colonne mobile reste centrée et respire un
     peu plus, plutôt qu'une mise en page inventée (question ouverte du README
     du parcours). */
  .retour-ecran { max-width: 620px; }
}

/* ---------- Groupes 5 « Signup » et 6 « Formule » du funnel (lot L3, #302) --
   Maquettes 1i, 1j et 1ac au commit `b8d4adf`. Comme les lots L1 et L2 :
   aucune valeur en dur, uniquement les jetons `--ll-*` du design system, et la
   sélection se marque en Ciel (`--role-control-on`), jamais en Jasmin. */

.signup-ecran { max-width: 460px; margin: 0 auto; }
.signup-illustration { margin: 0 0 12px; text-align: center; color: var(--ll-craie); }
.signup-visage { display: inline-block; }
/* AU-01, illustration fournie dans la consolidation bc77a9d. */
.signup-yeux-connexion { display: inline-block; width: 174px; height: 40px; background: currentColor; mask: url("/assets/connexion-yeux-03.svg") center / contain no-repeat; }
/* L'enveloppe de 1j, dans sa pastille Framboise. */
.signup-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 20px;
  background: var(--ll-framboise); color: var(--ll-craie);
}
/* « en un clic », « boîte mail » : l'exergue de la maquette. */
.signup-titre em { font-style: italic; font-weight: 800; }
/* Le trait « ou avec votre e-mail » entre Google et le champ. */
.signup-separateur {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px;
  font-size: 14px; color: var(--ll-craie); opacity: 0.7;
}
.signup-separateur::before, .signup-separateur::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--ll-craie-50);
}
.signup-ecran .compte-google, .signup-ecran .compte-ou { max-width: none; margin: 0 0 16px; }
.signup-formulaire { max-width: none; }
.signup-formulaire .compte-champ input { background: var(--ll-ciel-50); border-color: transparent; }
.signup-conditions, .signup-interrupteur { margin: 0 0 12px; }
/* Les conditions et la lettre d'information (note 401) : deux vraies cases à
   cocher habillées en interrupteurs, pour rester atteignables au clavier et
   nommées pour un lecteur d'écran. */
.signup-interrupteur { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.signup-interrupteur input {
  appearance: none; margin: 2px 0 0;
  width: 44px; height: 24px; flex: 0 0 44px;
  border-radius: 999px; background: var(--ll-craie-100);
  position: relative; cursor: pointer; transition: background 120ms linear;
}
.signup-interrupteur input::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ll-blanc-50); transition: transform 120ms linear;
}
.signup-interrupteur input:checked { background: var(--ll-ciel); }
.signup-interrupteur input:checked::after { transform: translateX(20px); }
.signup-interrupteur input:focus-visible { outline: 2px solid var(--ll-ciel); outline-offset: 2px; }
.signup-bascule { text-align: center; margin: 16px 0 0; }

/* 1j · « regardez votre boîte mail ». Le code reste un seul champ, grand et
   espacé : six cases demandent du JavaScript et cassent le remplissage
   automatique du code (`autocomplete="one-time-code"`). */
.signup-carte-code {
  background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-50);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
}
.signup-carte-code h2 { margin: 0 0 12px; font-size: 1rem; }
.signup-carte-code .compte-formulaire { max-width: none; }
.signup-label-code {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.signup-champ-code input {
  width: 100%; text-align: center;
  font-size: 28px; font-weight: 700; letter-spacing: 10px;
  background: var(--ll-blanc-50);
}
.signup-renvoi { max-width: none; margin: 16px 0 0; text-align: center; }
.signup-renvoi-bouton {
  font: inherit; background: none; border: 0; padding: 4px;
  color: var(--ll-craie); text-decoration: underline; cursor: pointer;
}
.signup-renvoi-bouton[disabled] { text-decoration: none; opacity: 0.6; cursor: default; }

/* 1ac · la formule : d'abord le nombre de jeux, ensuite le rythme. */
.funnel-formule-choix { max-width: none; }
.funnel-etape-choix { font-size: 1.05rem; margin: 24px 0 12px; }
.funnel-etape-choix:first-of-type { margin-top: 0; }
.funnel-jeux { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; }
.funnel-jeux-carte {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 96px; padding: 14px 10px;
  background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-50);
  border-radius: 16px;
  color: var(--ll-craie); text-decoration: none;
  /* Note 364 : ce sont désormais des boutons d'envoi et non des liens, pour
     que le nombre de jeux soit un vrai sélecteur. Ils ne doivent pas hériter
     de l'habillage des boutons du site. */
  font: inherit; cursor: pointer; width: 100%;
}
.funnel-jeux-carte strong {
  font-family: var(--police-titre); font-size: 1.8rem; line-height: 1;
  /* Une formule sans nombre de jeux fait son propre groupe, sous son nom :
     il ne doit pas déborder de la carte ni pousser la grille. */
  max-width: 100%; overflow-wrap: anywhere; hyphens: auto;
}
.funnel-jeux-carte strong:not(:only-of-type),
.funnel-jeux-carte strong { font-size: clamp(0.95rem, 1rem + 1.4vw, 1.8rem); }
.funnel-jeux-carte span { font-size: 14px; opacity: 0.75; }
.funnel-jeux-carte:hover { border-color: var(--ll-craie); }
.funnel-jeux-carte:focus-visible { outline: 2px solid var(--ll-ciel); outline-offset: 2px; }
.funnel-jeux-carte.est-choisie { border: 2px solid var(--ll-craie); padding: 13px 9px; }
.funnel-jeux-aide { margin: 10px 0 0; font-size: 14px; opacity: 0.75; }

.funnel-rythmes { display: grid; gap: 12px; }
.funnel-rythme {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-50);
  border-radius: 16px;
  padding: 16px 20px;
  cursor: pointer;
}
.funnel-rythme input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.funnel-rythme-puce {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--ll-craie-50);
}
.funnel-rythme:has(input:checked) { border: 2px solid var(--ll-craie); padding: 15px 19px; }
.funnel-rythme:has(input:checked) .funnel-rythme-puce {
  border-color: var(--ll-ciel);
  background: radial-gradient(circle, var(--ll-ciel) 0 42%, transparent 44%);
}
.funnel-rythme:has(input:focus-visible) { outline: 2px solid var(--ll-ciel); outline-offset: 2px; }
.funnel-rythme.est-indisponible { opacity: 0.5; cursor: default; }
.funnel-rythme-nom { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.funnel-rythme-nom strong { font-size: 1.1rem; }
.funnel-rythme-commandes { font-size: 0.85rem; font-weight: 400; }
.funnel-rythme-aide { font-size: 14px; opacity: 0.75; }
.funnel-rythme-prix { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.funnel-rythme-prix strong { white-space: nowrap; }
.funnel-economie {
  background: var(--ll-jasmin); border-radius: 999px;
  padding: 3px 10px; font-size: 13px; white-space: nowrap;
}

/* Les trois réassurances de la maquette, en pastilles Jasmin. */
.funnel-garanties {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center;
}
.funnel-garanties li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; }
.funnel-garantie-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ll-jasmin); color: var(--ll-craie);
}

.funnel-promo-repli { margin: 20px 0 0; }
.funnel-promo-repli > summary { cursor: pointer; text-align: center; text-decoration: underline; list-style: none; }
.funnel-promo-repli > summary::-webkit-details-marker { display: none; }
.funnel-promo-repli > summary::marker { content: ""; }
.funnel-promo-repli .compte-champ { margin: 12px 0; }
.funnel-pied {
  margin: 24px 0 0; padding-top: 20px;
  border-top: 1px solid var(--ll-craie-50);
  display: flex; flex-direction: column; gap: 10px; text-align: center;
}

@media (min-width: 900px) {
  /* Desktop dessiné par la maquette : la même colonne, simplement plus large
     et centrée, avec les rythmes sur une ligne par rythme. */
  .signup-ecran { max-width: 520px; }
  .funnel-formule-choix .funnel-jeux { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------------
   Lot L4 · groupe 7 « Paiement » (1n, 1u, 1o, 1v) et lot L4b · groupe 4
   « Suggestion » (1x, 1h, 1w). Aucune valeur de couleur en dur : seulement
   les jetons `--ll-*` du design system.
   ------------------------------------------------------------------------ */

/* 1n · le bandeau de rappel de la formule, Jasmin, avec « modifier ». */
.paiement-rappel {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 24px; padding: 14px 16px;
  background: var(--ll-jasmin-100); border-radius: 16px;
}
.paiement-rappel-vignette {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px;
  background: var(--ll-jasmin);
}
.paiement-rappel-texte { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.paiement-rappel-texte .compte-aide { margin: 0; font-size: 14px; }
.paiement-rappel-modifier { flex: 0 0 auto; }

.paiement-intitule { margin: 0 0 6px; font-size: 1.05rem; }
.paiement-stripe { margin: 16px 0 0; min-height: 60px; }
.paiement-stripe-attente { margin: 0; }
.paiement-mention { margin: 14px 0 0; text-align: center; }
.paiement-repli { margin: 20px 0 0; text-align: center; }

/* 1u · le retour d'un paiement refusé. Le bandeau porte le rôle « erreur »
   (Carotte) ; son texte est en Craie, et l'encre Carotte n'est employée que
   pour le pictogramme : aucune teinte vive de la charte ne passe le seuil de
   contraste en petit texte (remarque d'Alban du 01/10/2026, note 286). */
.paiement-echec { text-align: center; }
.paiement-echec-bandeau {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  margin: 0 0 24px; padding: 14px 16px;
  background: var(--ll-carotte-100);
  border: 1px solid var(--ll-carotte); border-radius: 16px;
  color: var(--ll-craie);
}
.paiement-echec-pastille {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ll-carotte); color: var(--ll-blanc-casse);
}
.paiement-echec-texte { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.paiement-echec-visage { margin: 8px 0 16px; color: var(--ll-craie); }
.paiement-echec-titre { margin: 0 0 8px; }
.paiement-echec-sous-titre { margin: 0 auto 20px; max-width: 32em; opacity: 0.85; }
.paiement-echec-garanties {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.paiement-echec-garanties li {
  padding: 8px 18px; border: 1px solid var(--ll-craie-50); border-radius: 999px; font-size: 15px;
}
.paiement-echec-aide { list-style: none; margin: 0 0 24px; padding: 0; text-align: left; }
.paiement-echec-aide li { border-top: 1px solid var(--ll-craie-50); padding: 14px 2px; }
.paiement-echec-aide li:last-child { border-bottom: 1px solid var(--ll-craie-50); }

/* 1x · la roue de cartes pendant la recherche. Décorative : elle s'arrête
   quand le visiteur demande moins d'animations. */
.suggestion-attente { text-align: center; }
.suggestion-roue {
  list-style: none; margin: 24px auto; padding: 0;
  position: relative; width: 240px; height: 240px;
  animation: suggestion-tourne 18s linear infinite;
}
.suggestion-roue li {
  position: absolute; top: 50%; left: 50%;
  width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 16px; border: 1px dashed var(--ll-craie-50);
  background: var(--ll-jasmin-50);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ll-craie-200);
  transform: rotate(calc(var(--i) * 45deg)) translate(84px) rotate(calc(var(--i) * -45deg));
  animation: suggestion-redresse 18s linear infinite;
}
.suggestion-roue li:nth-child(2n) { background: var(--ll-ciel-50); }
.suggestion-roue li:nth-child(3n) { background: var(--ll-lila-50); }
.suggestion-roue li:nth-child(5n) { background: var(--ll-framboise-50); }
@keyframes suggestion-tourne { to { transform: rotate(360deg); } }
@keyframes suggestion-redresse {
  to { transform: rotate(calc(var(--i) * 45deg)) translate(84px) rotate(calc(var(--i) * -45deg)) rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .suggestion-roue, .suggestion-roue li { animation: none; }
}

/* 1h · la grille des suggestions. */
.suggestion-grille {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.suggestion-carte {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border: 1px solid var(--ll-craie-50); border-radius: 18px;
  background: var(--ll-blanc-100);
}
.suggestion-carte.est-ajoutee { border-color: var(--ll-craie); }
.suggestion-pour {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  /* Rôle « tag » du design system : Lila, comme les goûts de jeu de la
     Compte 03 (#358). La maquette 1h colore une pastille par personne, en
     Jasmin, Ciel, Lila puis Framboise ; ces teintes portent d'autres rôles. */
  background: var(--ll-lila); color: var(--ll-craie); font-size: 13px;
}
.suggestion-entete { margin: 0; }
/* Note 923 d'Alban (cas 47) : la photo garde son format carré et le jeu se
   voit en entier, sans zoom ni recadrage. */
.suggestion-vignette { position: relative; display: block; }
.suggestion-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  border-radius: 14px; border: 1px dashed var(--ll-craie-50); background: var(--ll-blanc-100);
}
/* Note 923 : « ↻ » charge la page suivante ; la vignette le montre tout de
   suite, voilée et avec un rond qui tourne, jusqu'à l'arrivée du nouveau jeu. */
.suggestion-chargement { display: none; }
.suggestion-carte.est-en-chargement .suggestion-chargement {
  display: block; position: absolute; inset: 0; border-radius: 14px;
  background: color-mix(in srgb, var(--ll-blanc-100) 70%, transparent);
}
.suggestion-carte.est-en-chargement .suggestion-chargement::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border-radius: 50%; border: 3px solid var(--ll-craie-50); border-top-color: var(--ll-craie);
  animation: suggestion-tourne 0.8s linear infinite;
}
.suggestion-carte.est-en-chargement .suggestion-autre { pointer-events: none; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .suggestion-carte.est-en-chargement .suggestion-chargement::after { animation-duration: 2.4s; }
}
.suggestion-photo-vide { background: var(--ll-jasmin-50); }
.suggestion-nom { margin: 0; font-size: 15px; }
.suggestion-nom a { color: inherit; }
.suggestion-gestes { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.suggestion-gestes form { flex: 1 1 auto; margin: 0; }
.suggestion-gestes .btn { width: 100%; }
.suggestion-autre {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--ll-craie-50); color: var(--ll-craie); text-decoration: none;
}
.suggestion-autre:hover, .suggestion-autre:focus-visible { border-color: var(--ll-craie); }

.suggestion-libre { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--ll-craie-50); }
.suggestion-libre p { margin: 0 0 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.suggestion-reassurances {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center;
}
.suggestion-reassurances li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
.suggestion-reassurance-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ll-jasmin); color: var(--ll-craie);
}
.suggestion-compteur { margin: 20px 0 12px; text-align: center; }

/* 1o et 1v · la « Bienvenue ». */
.bienvenue { text-align: center; }
.bienvenue-medaillon { margin: 0 0 12px; color: var(--ll-carotte); }
.bienvenue-titre { margin: 0 0 10px; }
.bienvenue-texte { margin: 0 auto 24px; max-width: 34em; }
.bienvenue-etapes {
  list-style: none; margin: 0 0 24px; padding: 0; text-align: left;
  border: 1px solid var(--ll-craie-50); border-radius: 18px; overflow: hidden;
  background: var(--ll-blanc-100);
}
.bienvenue-etapes li {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-top: 1px solid var(--ll-craie-50);
}
.bienvenue-etapes li:first-child { border-top: 0; }
.bienvenue-puce {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--ll-craie-50); font-size: 14px;
}
.bienvenue-etapes li.est-faite .bienvenue-puce { background: var(--ll-citron-vert); border-color: var(--ll-citron-vert); }
.bienvenue-etapes li.est-courante { font-weight: 700; }
.bienvenue-etapes li.est-courante .bienvenue-puce { border-color: var(--ll-craie); }
.bienvenue-etapes li.est-a-venir { color: var(--ll-craie-200); }

.bienvenue-selection {
  margin: 0 0 24px; padding: 16px; text-align: left;
  border: 1px solid var(--ll-craie-50); border-radius: 18px; background: var(--ll-blanc-100);
}
.bienvenue-selection-entete { margin: 0 0 12px; display: flex; justify-content: space-between; gap: 8px; }
.bienvenue-selection-liste {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.bienvenue-selection-liste li { display: flex; align-items: center; gap: 10px; }
.bienvenue-selection-liste img,
.bienvenue-selection-vignette {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px;
  object-fit: cover; border: 1px dashed var(--ll-craie-50); background: var(--ll-jasmin-50);
}
.bienvenue-selection-texte { display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; }
.bienvenue-selection-texte a { color: inherit; }
.bienvenue-selection .compte-aide { margin: 0; }

@media (max-width: 420px) {
  /* La maquette garde ses deux colonnes à 390 px : seules les cartes se
     resserrent. Le rappel de formule, lui, passe à la ligne. */
  .suggestion-carte { padding: 10px; gap: 6px; }
  .suggestion-nom { font-size: 14px; }
  .suggestion-pour { padding: 3px 8px; font-size: 11px; white-space: nowrap; }
  .suggestion-gestes { gap: 6px; }
  .suggestion-gestes .btn { padding-left: 8px; padding-right: 8px; font-size: 12px; }
  .suggestion-autre { width: 32px; height: 32px; }
  .paiement-rappel { flex-wrap: wrap; }
}

@media (min-width: 900px) {
  /* Desktop dessiné par la maquette : la même colonne centrée, plus large. */
  .suggestion-grille { gap: 16px; }
  .suggestion-carte { padding: 14px; }
  .bienvenue-selection-liste { gap: 16px; }
}

/* ---------- Écrans facultatifs du funnel (lot L4c, #309) ------------------
   Maquettes 1ad (teaser d'entrée), 1af (question à gabarit), 1f (fin du
   questionnaire), 1p (« nous gérons la logistique ») et 1r (« pourquoi le jeu
   change tout »). Tous éteints par défaut, tous réglables au back office.

   Les maquettes posent ces écrans sur des aplats pleins de Jasmin, de
   Carotte, de Framboise, de Lila et de Ciel. L'encre de la charte, la Craie,
   y passe partout le seuil AA en petit texte (8,9:1 sur le Jasmin, 5,4:1 sur
   la Carotte, 5,2:1 sur la Framboise, 6,2:1 sur le Lila) : les aplats sont
   donc repris tels quels, sans éclaircir ni inventer d'encre. */

/* 1ad · les trois temps annoncés, et la durée au-dessus du bouton. */
.funnel-temps-liste { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.funnel-temps { display: flex; align-items: center; gap: 14px; }
.funnel-temps-puce {
  flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ll-jasmin-200);
}
.funnel-duree { text-align: center; margin: 0 0 8px; opacity: 0.75; font-size: 14px; }

/* 1af · la ligne « Autre : » du gabarit porte son champ de saisie. */
/* La carte du tunnel est une grille « puce | texte ». La ligne « Autre » n'a
   pas de puce : rien n'y est à cocher, c'est le texte saisi qui fait la
   réponse, et un rond inerte à côté d'un champ laisse croire le contraire. */
.funnel-carte-autre { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.funnel-carte-autre input[type="text"] {
  min-width: 0;
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-50);
  border-radius: 999px;
  padding: 8px 14px;
}
.funnel-carte-autre:has(input[type="text"]:focus-visible) { outline: 2px solid var(--ll-ciel); outline-offset: 2px; }

/* 1p · les chiffres de l'offre, puis les deux façons de choisir les jeux. */
.funnel-chiffres { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 24px; padding: 0; }
.funnel-chiffre { border-radius: 999px; padding: 9px 18px; font-weight: 700; }
.funnel-chiffre[data-famille="jasmin"]    { background: var(--ll-jasmin); }
.funnel-chiffre[data-famille="carotte"]   { background: var(--ll-carotte); }
.funnel-chiffre[data-famille="framboise"] { background: var(--ll-framboise); }
.funnel-question { text-align: center; font-weight: 700; margin: 0 0 16px; }
.funnel-modes { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.funnel-mode {
  flex: 1 1 0;
  margin: 0;
  text-align: center;
  border-radius: 20px;
  padding: 22px 16px;
}
.funnel-mode[data-famille="lila"] { background: var(--ll-lila); }
.funnel-mode[data-famille="ciel"] { background: var(--ll-ciel); }
.funnel-mode-ou { flex: 0 0 auto; margin: 0; font-weight: 700; }

/* 1r · la citation, puis trois arguments sourcés en cartes compactes. */
.funnel-citation { margin: 0 0 20px; text-align: center; }
.funnel-citation blockquote { margin: 0; font-family: var(--police-titre); font-size: 1.15rem; }
.funnel-citation figcaption { margin-top: 6px; opacity: 0.75; }
.funnel-arguments { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.funnel-argument {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-50);
  border-radius: 16px;
  padding: 16px 20px;
}
.funnel-argument-puce {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ll-ciel-200);
}
.funnel-argument-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.funnel-argument-texte cite { font-size: 14px; opacity: 0.75; font-style: italic; }

@media (max-width: 480px) {
  /* 390 px : les deux modes de 1p s'empilent plutôt que de se serrer. */
  .funnel-modes { flex-direction: column; }
  .funnel-mode { width: 100%; }
}

/* ------------------------------------------------------------------------
   Note 364 d'Alban (02/10/2026) : retouches du funnel.
   ------------------------------------------------------------------------ */

/* Note 401 : « Suivant » sur toute la largeur, comme aux autres étapes, et
   « Compléter plus tard » centré dessous, en bouton tertiaire. */
.funnel-gestes {
  display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 20px 0 0;
}
.funnel-gestes .btn { width: 100%; margin: 0; text-align: center; }

/* « 7 jeux · 83,97 € tous les 3 mois », au-dessus du bouton, comme la maquette.
   C'est un rappel, pas un champ : ni encadré, ni fond. */
.funnel-recap {
  margin: 20px 0 0; padding: 16px 0 0;
  background: none; border: 0; border-top: 1px solid var(--ll-craie-50); border-radius: 0;
  text-align: center; font-weight: 700;
}
.funnel-recap:empty { display: none; }

/* Le code promo : la réponse n'est plus collée au bouton. */
.funnel-promo-geste { margin: 12px 0 0; }

/* ------------------------------------------------------------------------
   Note 401 d'Alban (02/10/2026) : retouches de l'écran formule.
   ------------------------------------------------------------------------ */

/* « Ajouter » et « Retirer » s'alignent à droite, sous le champ. */
.funnel-promo-ligne { display: flex; justify-content: flex-end; margin: 12px 0 0; }
.funnel-promo-ligne .funnel-promo-geste { margin: 0; }
/* Retour sur le bloc après « Ajouter » : la marge passe sous l'en-tête fixe. */
.funnel-promo-repli { scroll-margin-top: 110px; }
/* Le champ d'avis de « Noter un jeu » (`id="avis"`) : quand le navigateur y
   défile (champ requis vide), il s'arrête sous l'en-tête fixe. La règle
   `#avis` de `produit.css` le faisait par la concaténation de toutes les
   feuilles, jusqu'à #594 ; elle est reprise ici pour la page qui s'en sert. */
#avis { scroll-margin-top: 110px; }
/* La remise d'un code validé passe sous le contenu de la vignette, sur toute
   sa largeur sauf la pastille : elle ne prend plus place dans la colonne de la
   pastille, qui s'élargissait et poussait le nom et le prix. */
.funnel-rythme .funnel-remise, .funnel-rythme > .compte-aide { grid-column: 2 / -1; margin: -4px 0 0; }
.funnel-promo-reponse { margin: 16px 0 0; }

/* Le refus du formulaire de paiement, en français, dans la page. */
.paiement-erreur { margin: 16px 0 0; }

/* Décision d'Alban n° 124 : les créneaux de l'agenda de l'équipe, un jour par
   accordéon exclusif natif (`<details name="rdv-jours">`), les heures en
   pastilles du tunnel. Sur mobile, les pastilles passent à trois par ligne. */
.rdv-creneaux .compte-aide { margin: -4px 0 12px; }
.rdv-jour {
  border: 1px solid var(--ll-craie-50);
  border-radius: 14px;
  background: var(--ll-blanc-100);
  margin: 0 0 10px;
}
.rdv-jour > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
}
.rdv-jour > summary::-webkit-details-marker { display: none; }
.rdv-jour > summary::marker { content: ""; }
.rdv-jour > summary:focus-visible { outline: 2px solid var(--ll-ciel); outline-offset: 2px; border-radius: 14px; }
.rdv-jour-nom { font-weight: 700; }
.rdv-jour-nom::first-letter { text-transform: uppercase; }
.rdv-jour-compte { font-size: 14px; opacity: 0.75; white-space: nowrap; }
.rdv-jour[open] > summary { border-bottom: 1px solid var(--ll-craie-50); }
.rdv-jour .funnel-pastilles { padding: 14px 18px 16px; }
.rdv-jour:has(input:checked) { border-color: var(--ll-ciel); }
@media (max-width: 480px) {
  .rdv-jour .funnel-pastilles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rdv-jour .funnel-pastille { justify-content: center; padding: 9px 6px; }
}
.rdv-recap { margin: 0 0 16px; }
.rdv-recap .funnel-recap-texte strong::first-letter { text-transform: uppercase; }
.rdv-actions { margin: 16px 0 8px; }
.rdv-annuler { margin: 0 0 16px; }

/* ---------- Champs, bouton Google et titres d'après la charte rendue ----------
   Note 701 d'Alban (cas 243, lot 1), AU-01, AB-03 et AB-05 de la
   consolidation, qui emploient partout le champ texte de la planche
   (`.field-text` de `ds-sheet.css`) et jamais un fond Ciel :
   - champ : Blanc 100, bordure Craie 400 de 1 px, arrondi 10 px, 12 px
     16 px, Comfortaa 14 px, indication Craie 100 ; focus Ciel 400 avec un
     halo Ciel 100 de 3 px ; erreur Carotte ;
   - bouton Google : capsule de 48 px cerclée de Craie 400 sur 1,5 px, Blanc
     100, Comfortaa Bold 14 px en casse normale, Blanc 200 au survol ;
   - titres : Neulis Regular 28 px, l'exergue (« en un clic ») en italique
     SemiBold 600 ;
   - liens d'aide (« Créer mon compte », conditions) au style du bouton
     tertiaire, soulignés Ciel 400. */
.compte-champ input:not([type="checkbox"]):not([type="radio"]),
.compte-champ textarea, .compte-champ select,
.signup-formulaire .compte-champ input, .funnel-saisie .compte-champ input {
  font-family: var(--font-sans); font-size: 14px; color: var(--ll-craie-400);
  background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-400); border-radius: var(--radius-sm);
  padding: 12px 16px;
}
.compte-champ input::placeholder, .compte-champ textarea::placeholder { color: var(--ll-craie-100); }
.compte-champ textarea::placeholder { font-style: italic; }
.compte-champ input:focus, .compte-champ textarea:focus, .compte-champ select:focus {
  outline: none; border-color: var(--ll-ciel-400); box-shadow: 0 0 0 3px var(--ll-ciel-100);
}
.compte-champ input[aria-invalid="true"], .compte-champ textarea[aria-invalid="true"] {
  border-color: var(--ll-carotte-400);
}
.btn-google {
  min-height: 48px; border: 1.5px solid var(--ll-craie-400); background: var(--ll-blanc-100);
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  text-transform: none; letter-spacing: 0;
}
.btn-google:hover { background: var(--ll-blanc-200); border-color: var(--ll-craie-400); }
.funnel-titre { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.15; }
.signup-titre em, .funnel-titre em { font-style: italic; font-weight: 600; }
.signup-bascule a, .compte-google-mention a, .signup-conditions a {
  font-weight: 700; color: var(--ll-craie-400);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--ll-ciel-400);
}
.signup-bascule a:hover, .compte-google-mention a:hover, .signup-conditions a:hover { text-decoration-color: var(--ll-ciel-200); }
.signup-formulaire .funnel-suivant {
  font-size: var(--fs-btn-lg); line-height: var(--lh-btn-lg); padding: 16px 24px;
}

/* Cartes de choix et pastilles du tunnel d'après la charte rendue (note 701,
   AB-03 de la consolidation) :
   - carte : Blanc 100, bordure Craie 50 de 2 px, arrondi 16 px, 12 px 14 px ;
     choisie : Ciel 400 (le rôle de la sélection), bordure Craie 400 ; rond de
     18 px cerclé de Craie, point Craie de 9 px ; libellé Bold 14 px, aide
     12 px Craie 300 ;
   - pastille (`.chip` de la planche) : Comfortaa Medium 12 px, bordure Craie
     400 de 1,5 px sur Blanc 50, 7 px 14 px ; choisie : Ciel 400 avec une
     coche, comme la maquette (la sélection est Ciel, jamais Jasmin). */
.funnel-carte, .funnel-choix {
  padding: 12px 14px; gap: 1px 12px;
  background: var(--ll-blanc-100); border: 2px solid var(--ll-craie-50); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.funnel-carte:hover, .funnel-choix:hover { border-color: var(--ll-craie-200); }
.funnel-carte.est-choisie, .funnel-carte:has(input:checked),
.funnel-choix.est-choisi, .funnel-choix:has(input:checked) {
  background: var(--ll-ciel-400); border: 2px solid var(--ll-craie-400); padding: 12px 14px;
}
.funnel-carte-puce { width: 18px; height: 18px; border: 1.5px solid var(--ll-craie-400); box-sizing: border-box; }
.funnel-carte.est-choisie .funnel-carte-puce, .funnel-carte:has(input:checked) .funnel-carte-puce {
  border: 2px solid var(--ll-craie-400);
  background: radial-gradient(circle, var(--ll-craie-400) 0 4.5px, transparent 5px);
}
.funnel-carte input, .funnel-choix input { accent-color: var(--ll-craie-400); }
.funnel-carte-texte strong, .funnel-carte-texte > :first-child { font-size: 14px; font-weight: 700; }
.funnel-carte-aide, .funnel-choix .compte-aide { font-size: 12px; opacity: 1; color: var(--ll-craie-300); }
.funnel-pastilles { gap: 8px; }
.funnel-pastille {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  border: 1.5px solid var(--ll-craie-400); background: var(--ll-blanc-50); padding: 7px 14px;
}
.funnel-pastille:hover { background: var(--ll-ciel-100); }
.funnel-pastille:has(input:checked) { background: var(--ll-ciel-400); border-color: var(--ll-craie-400); }
.funnel-pastille:has(input:checked)::before {
  content: "✓"; margin-right: 6px; font-size: 11px; font-weight: 700;
}
/* Le rond des cartes à case native : 18 px cerclé de Craie, point Craie. */
.funnel-choix input[type="radio"], .funnel-carte input[type="radio"]:not([hidden]) {
  appearance: none; width: 18px; height: 18px; margin: 0; flex: none;
  border: 1.5px solid var(--ll-craie-400); border-radius: 50%; background: var(--ll-blanc-50);
}
.funnel-choix input[type="radio"]:checked, .funnel-carte input[type="radio"]:checked {
  border-width: 2px; background: radial-gradient(circle, var(--ll-craie-400) 0 4.5px, transparent 5px);
}
.funnel-choix input[type="radio"]:focus-visible, .funnel-carte input[type="radio"]:focus-visible {
  outline: 2px solid var(--ll-ciel-400); outline-offset: 2px;
}
/* « Suivant » : le grand bouton de la charte (`btn--lg`), comme chaque étape
   du tunnel de la consolidation. */
.funnel-suivant { font-size: var(--fs-btn-lg); line-height: var(--lh-btn-lg); padding: 16px 24px; }

/* AB-05 (et la page de gestion du rendez-vous) : le récapitulatif en lignes
   de la maquette, carte Blanc 100 arrondie à 24 px bordée de Craie 50, lignes
   séparées d'un filet, pictogramme dans un rond de 36 px, intitulé 12 px
   Craie 300 au-dessus de la valeur 14 px. « Ajouter à mon agenda » est le
   grand bouton Jasmin. */
.rdv-recap {
  list-style: none; margin: 0 0 20px; padding: 0; display: block;
  background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-50); border-radius: var(--radius-lg);
}
.rdv-recap-ligne { display: flex; gap: 14px; align-items: center; padding: 14px 18px; }
.rdv-recap-ligne + .rdv-recap-ligne { border-top: 1px solid var(--ll-craie-50); }
.rdv-recap-picto {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ll-craie-400);
}
.rdv-recap-picto.est-ciel { background: var(--ll-ciel-400); }
.rdv-recap-picto.est-jasmin { background: var(--ll-jasmin-400); }
.rdv-recap-picto.est-framboise { background: var(--ll-framboise-400); }
.rdv-recap-picto.est-lila { background: var(--ll-lila-400); }
.rdv-recap-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rdv-recap-titre { font-size: 12px; color: var(--ll-craie-300); }
.rdv-recap-valeur { font-size: 14px; overflow-wrap: anywhere; }
.rdv-agenda .btn { width: 100%; box-sizing: border-box; }

/* Barre latérale de l'espace client d'après la maquette (`Espace
   Client.html`, `.ec-nav__item`), note 701 d'Alban : lignes de 44 px
   arrondies à 16 px, Comfortaa Medium 14 px, pictogramme de la charte de
   22 px ; Ciel 50 au survol ; la rubrique courante en Ciel 400 (le rôle de
   la sélection, plus le Citron, qui est celui de l'action) cerclée de Craie
   sur 2 px. */
.compte-nav-lien {
  display: flex; align-items: center; gap: 12px; min-height: 44px; box-sizing: border-box;
  padding: 11px 12px; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ll-craie-400);
  transition: background var(--dur-fast) var(--ease-soft);
}
.compte-nav-lien .picto { flex: none; }
.compte-nav-lien:hover { background: var(--ll-ciel-50); }
.compte-nav-lien.est-actif { background: var(--ll-ciel-400); font-weight: 700; box-shadow: inset 0 0 0 2px var(--ll-craie-400); }

/* Reprise d'une inscription (cas 306, note 1389 d'Alban) : la maquette
   « AB reprise inscription » de la PR #600. Une carte de 620 px, une frise
   des cinq étapes nommées : Ciel pour ce qui est fait, Craie pleine pour
   l'étape courante cerclée de 2 px, contour Craie 50 pour ce qui vient. */
/* La carte est le dernier bloc de <main> : la bordure transparente de 40 px
   que `site.css` pose sous lui pour le pied de page cède la place au filet
   de la maquette, et la marge basse reprend ces 40 px. */
main > .compte-carte:has(.reprise-inscription) {
  max-width: 620px; box-sizing: border-box; margin: clamp(20px, 5vw, 56px) auto calc(clamp(20px, 5vw, 56px) + 40px);
  background: var(--ll-blanc-100); border: 1px solid var(--color-border); border-radius: 32px;
  padding: clamp(24px, 5vw, 48px);
}
.reprise-inscription { padding: 0; display: flex; flex-direction: column; gap: 24px; color: var(--ll-craie-400); }
.reprise-entete { display: flex; flex-direction: column; gap: 10px; }
.reprise-entete > * { margin: 0; }
.reprise-compteur { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ll-craie-300); }
.reprise-entete h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 5vw, 34px); line-height: 1.15; }
.reprise-entete h1 em { font-style: italic; font-weight: 600; }
.reprise-intro { font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.reprise-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.reprise-etape { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
.reprise-rail { display: flex; flex-direction: column; align-items: center; }
.reprise-rail::after { content: ""; flex: 1; width: 2px; min-height: 12px; background: var(--ll-craie-50); }
.reprise-etape:last-child .reprise-rail::after { display: none; }
.reprise-etape.est-faite .reprise-rail::after { background: var(--ll-ciel-400); }
.reprise-pastille {
  flex: none; width: 32px; height: 32px; margin-top: 12px; border-radius: 999px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--ll-craie-50); color: var(--ll-craie-300);
}
.reprise-etape.est-faite .reprise-pastille { border: 0; background: var(--ll-ciel-400); color: var(--ll-craie-400); }
.reprise-etape.est-courante .reprise-pastille { border: 0; background: var(--ll-craie-400); color: var(--ll-blanc-casse); }
.reprise-carte {
  box-sizing: border-box; margin: 4px 0; min-height: 56px; padding: 12px 16px; border-radius: 20px;
  border: 1px solid var(--color-border); display: flex; align-items: center; gap: 12px;
}
.reprise-etape.est-courante .reprise-carte { border: 2px solid var(--ll-craie-400); background: var(--ll-blanc-casse); }
.reprise-etape.est-a-venir .reprise-carte { border-color: transparent; }
.reprise-carte-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.reprise-carte-titre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reprise-carte-titre b { font-size: 15px; font-weight: 700; }
.reprise-etape.est-a-venir .reprise-carte-titre b { color: var(--ll-craie-300); }
.reprise-ici { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--ll-jasmin-400); }
.reprise-carte-resume { font-size: 13px; line-height: 1.4; color: var(--ll-craie-300); }
.reprise-modifier {
  flex: none; font-size: 13px; font-weight: 700; color: var(--ll-craie-400);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.reprise-reprendre { width: 100%; box-sizing: border-box; min-height: 54px; justify-content: center; text-align: center; }


/* ---- contact.css ---- */
/* ---------- Page contact ---------- */
/* Complète les styles .contact-* de la feuille commune : hero centré,
   lien retour discret à gauche, grand titre fin et moyens de contact empilés. */

.contact-hero { padding-top: 40px; padding-bottom: 140px; max-width: none; }
.contact-retour-lien {
  display: block; width: fit-content; margin: 0 0 48px;
  font-size: 14px; font-weight: 500; text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-oeil { width: 88px; margin-bottom: 36px; }
.contact-titre {
  font-family: var(--police-titre); font-weight: 400;
  font-size: clamp(44px, 5.7vw, 80px); line-height: 1.1; margin: 0 0 8px;
}
.contact-sous-titre {
  font-family: var(--police-corps); font-size: 21px; font-weight: 700;
  margin: 0 0 40px;
}
.contact-intro { margin: 0 0 24px; font-size: 14px; }
.contact-moyens {
  flex-direction: column; align-items: flex-start; gap: 14px;
  width: fit-content; margin: 0 auto;
}
.contact-moyen p { margin: 0; font-size: 14px; }
.contact-lien { color: var(--ciel); text-decoration: none; }
.contact-pastille-chat, .contact-pastille-mail { color: var(--craie); }

/* Case « recevoir une copie de ma demande » (recette d'Alban, note 116) : sur
   une ligne, case à gauche, sans le cadre des champs de saisie. */
.contact-formulaire .contact-copie {
  flex-direction: row; align-items: center; gap: 10px;
  font-weight: 400; cursor: pointer;
}
.contact-formulaire .contact-copie input {
  width: 18px; height: 18px; margin: 0; padding: 0; flex: none;
  accent-color: var(--craie); cursor: pointer;
}


/* ---- curseur-age.css ---- */
/* Le curseur d'âge à deux poignées (recette d'Alban du 07/10/2026, cas 171,
   note 523). Rendu par `src/ui/curseur-age.ts`, enrichi par
   `src/ui/curseur-age-client.js`. Sans script, seules les deux listes
   s'affichent ; avec, la piste les remplace. */
.curseur-age { --ca-poignee: 24px; display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.curseur-age-resume { margin: 0; font-weight: 700; color: var(--craie); }
.curseur-age.est-vide .curseur-age-resume { font-weight: 400; font-style: italic; color: var(--ll-craie-300); }
.curseur-age-piste {
  position: relative; height: 44px; margin: 22px calc(var(--ca-poignee) / 2) 0;
  touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.curseur-age-rail, .curseur-age-plage {
  position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px;
}
.curseur-age-rail { left: 0; right: 0; background: var(--gris-bordure); }
.curseur-age-plage { background: var(--citron-vert); }
.curseur-age.est-vide .curseur-age-plage { background: transparent; }
.curseur-age-poignee {
  position: absolute; top: 50%; width: var(--ca-poignee); height: var(--ca-poignee);
  margin: calc(var(--ca-poignee) / -2) 0 0 calc(var(--ca-poignee) / -2);
  border-radius: 50%; background: var(--blanc); border: 2px solid var(--craie);
  box-sizing: border-box; z-index: 1; cursor: grab;
}
/* Une zone de toucher de 44 px autour de la pastille de 24 px. */
.curseur-age-poignee::before { content: ""; position: absolute; inset: -10px; }
.curseur-age-poignee.est-devant { z-index: 2; }
.curseur-age-poignee:focus-visible { outline: 3px solid var(--ll-ciel); outline-offset: 2px; }
.curseur-age-bulle {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 12px; line-height: 1.2; padding: 2px 6px; border-radius: 4px;
  background: var(--craie); color: var(--blanc); pointer-events: none;
}
.curseur-age.est-vide .curseur-age-bulle { display: none; }
.curseur-age-graduations {
  position: relative; height: 16px; margin: 0 calc(var(--ca-poignee) / 2);
  font-size: 11px; color: var(--ll-craie-300);
}
/* Une piste étroite (panneau du catalogue, téléphone) ne garde que les
   graduations qui ne se chevauchent pas. */
.curseur-age-graduations { container-type: inline-size; }
@container (max-width: 420px) { .curseur-age-graduations .secondaire { display: none; } }
.curseur-age-graduations span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.curseur-age-graduations span:first-child { transform: none; }
.curseur-age-graduations span:last-child { transform: translateX(-100%); }
.curseur-age-champs { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.curseur-age-champs label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.curseur-age.est-enrichi .curseur-age-champs {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}


/* ---- destination.css ---- */
.destination-page { max-width: 960px; margin: 0 auto; padding: 40px 24px 64px; }
.destination-tete h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.15; }
.destination-tete img { display: block; max-width: 100%; height: auto; border-radius: 20px; margin-top: 24px; }
.destination-section { margin: 36px 0; }
.destination-section h2 { font-size: clamp(24px, 3vw, 32px); }
.destination-page p { line-height: 1.7; }


/* ---- espace-client.css ---- */
/* ---------- Espace client, maquettes Compte 01 et 02 (lot L5, #303) ----------
   Les niveaux de titre, les polices, les rayons et les couleurs viennent du
   design system (`libetlou-git/design-system`, `project/colors_and_type.css`),
   jamais de la maquette : les jetons `--ll-*` que le socle (#299) pose sur
   `:root` dans `src/site/site.css` sont les seules valeurs employées ici.

   Feuille à part de `compte.css` pour que les lots parallèles de l'espace
   client (L6 tribu et adresses, L7 avantages et paiements) et la recette de
   bascule ne se marchent pas dessus. Elle part dans `/site-compte.css`, la
   feuille du gabarit de l'espace client (`FEUILLES_PAR_GABARIT` de
   `src/routes/statiques.ts`, #594) : un fichier de plus ne coûte aucune
   requête, à condition de l'y déclarer.

   ⚠️ Le nom compte : la concaténation suit l'ordre alphabétique des fichiers,
   et **tout** nom en `compte-…` passe avant `compte.css` (le tiret précède le
   point). Une feuille qui doit redéfinir une règle de `compte.css` à
   spécificité égale doit donc être nommée après elle, d'où `espace-client`.

   Le texte posé sur un aplat de la charte est toujours la Craie : elle tient
   4,5 pour 1 sur le Ciel, le Lila, le Jasmin, le Citron vert et le Carotte,
   là où les teintes claires de ces familles ne le tiendraient pas (note 286). */

/* Sans cette borne, la bande de jeux défilante impose sa largeur à toute la
   page : un élément de grille ou de flex a `min-width: auto` par défaut, et
   l'`overflow-x` de la bande ne s'enclenche jamais. C'était la cause d'un
   débordement horizontal de l'espace client sur mobile. */
.compte-contenu { min-width: 0; }

.espace-surtitre {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.espace-chapeau {
  margin: 0 0 28px;
  max-width: 60ch;
  color: var(--color-fg-muted);
}

/* ---------- Les trois compteurs du tableau de bord ---------- */

.espace-compteurs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.espace-compteur {
  border-radius: 18px;
  padding: 16px;
  color: var(--ll-craie);
}

.espace-compteur-jasmin { background: var(--ll-jasmin-400); }
.espace-compteur-lila   { background: var(--ll-lila-400); }
.espace-compteur-ciel   { background: var(--ll-ciel-400); }
/* Lot L7 : les récompenses de parrainage, en Framboise comme la maquette. */
.espace-compteur-framboise { background: var(--ll-framboise-400); }

.espace-compteur-lien {
  display: block;
  color: inherit;
  text-decoration: none;
}
.espace-compteur-lien:hover .espace-compteur-titre { text-decoration: underline; }

.espace-compteur-valeur {
  display: block;
  font-family: var(--police-titre);
  font-size: 34px;
  line-height: 1.1;
}
.espace-compteur-unite { font-size: 15px; }
.espace-compteur-titre { display: block; margin-top: 4px; font-weight: 700; font-size: 15px; }
.espace-compteur-aide { display: block; margin-top: 2px; font-size: 12px; }

@media (max-width: 560px) {
  .espace-compteur { padding: 12px; border-radius: 14px; }
  .espace-compteur-valeur { font-size: 26px; }
  .espace-compteur-titre { font-size: 13px; }
  .espace-compteur-aide { display: none; }
}

/* ---------- Pastilles de statut ---------- */

.espace-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ll-craie);
  background: var(--color-bg-sunken);
  white-space: nowrap;
}
.espace-badge-ciel    { background: var(--ll-ciel-400); }
.espace-badge-citron  { background: var(--ll-citron-400); }
.espace-badge-jasmin  { background: var(--ll-jasmin-400); }
.espace-badge-lila    { background: var(--ll-lila-400); }
.espace-badge-carotte { background: var(--ll-carotte-400); }

/* ---------- Bloc « ma commande en cours » et accordéons ---------- */

.espace-bloc { margin: 0 0 32px; }
/* `compte.css` pose `margin-top: 36px` sur les h2 du contenu : dans un en-tête
   de bloc, le titre est collé à sa pastille et à sa ligne de contexte. */
.espace-bloc-tete h2, .espace-carte h2 { margin-top: 0; }

.espace-bloc-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 12px;
}
.espace-bloc-tete h2 { margin: 0; }
/* Mobile : l'action suit la ligne de contexte, comme la maquette mobile.
   Desktop : elle remonte à droite du titre, comme la maquette desktop. Un
   `order` suffit, le balisage ne change pas. */
.espace-bloc-tete .compte-actions { margin: 0; }
@media (min-width: 821px) {
  /* C'est la ligne de contexte qui descend, pas l'action qui remonte : elle
     prend toute la largeur et provoquerait sinon un retour à la ligne avant
     l'action. */
  .espace-bloc-contexte, .espace-commande-contexte { order: 1; }
  .espace-bloc-tete .compte-actions,
  .espace-commande-plate .compte-actions { margin-left: auto; }
}
.espace-bloc-contexte { flex: 1 0 100%; margin: 0; font-size: 14px; color: var(--color-fg-muted); }

.espace-commandes { list-style: none; margin: 0; padding: 0; }
.espace-commande { border-top: 1px solid var(--gris-bordure); }
.espace-commande:last-child { border-bottom: 1px solid var(--gris-bordure); }

.espace-commande > details > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 18px 36px 18px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.espace-commande > details > summary::-webkit-details-marker { display: none; }
/* Le chevron de la maquette, dessiné au trait plutôt qu'en image : il suit la
   couleur du texte et tourne à l'ouverture. */
.espace-commande > details > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-75%) rotate(45deg);
  transition: transform .15s ease;
}
.espace-commande > details[open] > summary::after { transform: translateY(-25%) rotate(225deg); }
.espace-commande > details > summary:focus-visible { outline: 3px solid var(--ll-ciel-500); outline-offset: 2px; }

.espace-commande-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.espace-commande-titre { font-family: var(--police-titre); font-size: 22px; }
.espace-commande-contexte { flex: 1 0 100%; font-size: 14px; color: var(--color-fg-muted); }
.espace-commande-corps { padding-bottom: 12px; }

/* ---------- Bande de jeux ---------- */

.espace-jeux {
  max-width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 14px;
  margin: 0 0 12px;
  padding: 0 0 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}

.espace-jeu {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background: var(--color-bg-raised);
  border: 1px solid var(--gris-bordure);
  border-radius: 16px;
  overflow: hidden;
}

/* Note 884 (cas 63) : la photo du jeu se montre entière, comme sur la carte
   du catalogue (`object-fit: contain` sur fond blanc), au lieu d'être
   agrandie et rognée pour remplir le cadre. */
.espace-jeu-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
  background: var(--blanc);
  display: block;
}
.espace-jeu-photo-vide { display: block; background: var(--color-bg-sunken); }

/* La carte s'étire à la hauteur de la plus haute de sa bande : le texte prend
   la place restante, et le prix d'option se pose en bas, au même niveau sur
   toutes les vignettes quelle que soit la longueur du nom (note 884). */
.espace-jeu-texte { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.espace-jeu-option { margin-top: auto; padding-top: 6px; }
.espace-jeu-nom { font-weight: 700; }
.espace-jeu-nom a { color: inherit; }
.espace-jeu .espace-badge { align-self: flex-start; }
.espace-jeu-option { font-size: 13px; color: var(--color-fg-muted); }
.espace-jeu-prix { font-size: 15px; }
.espace-jeu-prix s { color: var(--color-fg-muted); margin-right: 4px; }
.espace-jeu-remise { color: var(--ll-framboise-ink); font-weight: 700; font-size: 13px; }

/* ---------- Cartes parrainage et formule ---------- */

.espace-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 0 0 36px;
}

.espace-carte {
  background: var(--color-bg-raised);
  border: 1px solid var(--gris-bordure);
  border-radius: 18px;
  padding: 18px;
}
.espace-carte h2 { margin: 0 0 6px; font-size: 20px; }
.espace-carte p { margin: 0 0 10px; }
.espace-carte .compte-actions { margin: 0; }

/* ---------- Navigation : lien d'aide (#313) et menu ☰ unique sur mobile ------
   Point 12 de la consolidation, tranché par Alban le 10/10/2026 : en mobile,
   un seul menu ☰, celui de l'en-tête commun (`header()` de
   `src/site/layout.ts`), qui range « Mon espace » puis « Le site ». Il
   remplace l'option A (liste puis détail, #312) : la page ne porte donc plus
   ni liste des rubriques ni retour « Mon espace » sous 820 px. Sur desktop
   rien ne change, le menu latéral reste affiché partout. */
.compte-nav-sommaire { display: none; }

.compte-nav-titre {
  margin: 20px 0 2px;
  padding: 0 14px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.compte-retour { display: none; }

@media (max-width: 820px) {
  .compte-grille { display: flex; flex-direction: column; }
  .compte-grille .compte-nav { display: none; }
}

/* Ligne plate de l'historique (« Mes retours ») : même vocabulaire que
   l'accordéon de « Mes commandes », mais rien à déplier. */
.espace-commande-plate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 16px 0;
}
.espace-commande-plate .espace-commande-titre { text-decoration: none; }
.espace-commande-plate .espace-commande-titre:hover { text-decoration: underline; }
.espace-commande-plate .compte-actions { margin: 0 0 0 auto; }

/* ---------- Lot L6 : Compte 03 « Ma tribu », 07 « Mes adresses »,
     08 « Mon compte & connexion » (#304) ----------
   Mêmes règles qu'au-dessus : aucune valeur de couleur, de rayon ou d'ombre
   n'est écrite ici, seulement les jetons `--ll-*` du socle (#299). Le texte
   posé sur un aplat de la charte est la Craie, qui tient 4,5 pour 1 sur le
   Ciel, le Lila, le Jasmin et le Citron vert. */

/* Un intertitre et son action à droite (« Les membres » et « Ajouter un
   membre »). Sur mobile l'action passe à la ligne sous le titre. */
.espace-tete-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 36px 0 14px;
}
.espace-tete-action h2, .espace-tete-action h3 { margin: 0; }
/* Premier intertitre d'une page : il suit le chapeau, qui porte déjà sa marge. */
.espace-chapeau + .espace-tete-action,
.compte-ok + .espace-tete-action,
.compte-erreur + .espace-tete-action { margin-top: 8px; }

/* ---------- Panneaux dépliables (aucun JavaScript) ---------- */

/* Ouvert, le panneau prend une ligne entière de l'en-tête : son contenu a
   besoin de toute la largeur, et le titre reste visible au-dessus. */
.espace-panneau[open] { flex: 1 0 100%; }
.espace-panneau > summary { cursor: pointer; list-style: none; }
.espace-panneau > summary::-webkit-details-marker { display: none; }
.espace-panneau > summary:focus-visible { outline: 3px solid var(--ll-ciel-500); outline-offset: 2px; }

.espace-panneau-bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Le bouton d'ouverture est le bouton primaire de la charte, Citron vert, pour
   « Ajouter un membre » comme pour « Ajouter une adresse ». La maquette
   Compte 03 remplit le sien en Jasmin, qui est le rôle du bouton secondaire,
   alors que la maquette Compte 07 emploie bien le Citron vert pour le même
   geste : incohérence relevée, intégrée selon le design system et signalée en
   issue `[Design system]` (note 286 d'Alban, « évite les exceptions »). */
.espace-panneau[open] > .espace-panneau-bouton { margin-bottom: 12px; }

.espace-panneau-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.espace-panneau-lien:hover { color: var(--ll-ciel-ink); }

.espace-panneau-corps { padding-top: 4px; }
.espace-panneau-corps .compte-formulaire { margin-bottom: 8px; }

.espace-icone { flex: none; vertical-align: -4px; }
.espace-lien-icone { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Formulaires en carte (Compte 07 et 08) ---------- */

.espace-carte-formulaire {
  background: var(--color-bg-raised);
  border: 1px solid var(--gris-bordure);
  border-radius: 18px;
  padding: 18px;
  margin: 0 0 24px;
  max-width: 720px;
}
.espace-carte-formulaire > :first-child { margin-top: 0; }
.espace-carte-formulaire h3 { margin: 20px 0 8px; font-size: 16px; }
.espace-carte-formulaire .compte-formulaire { margin-bottom: 0; }
.espace-formulaire { max-width: none; }

/* Deux champs côte à côte sur grand écran (prénom et nom, code postal et
   ville), empilés sur mobile : exactement ce que montrent les deux maquettes
   de la Compte 08. */
.espace-champs-deux { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 620px) {
  .espace-champs-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.espace-deconnexion { margin-top: 18px; }
.espace-deconnexion .compte-aide { margin: 0 0 8px; }

/* ---------- Compte 03 · Ma tribu ---------- */

.espace-membres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.espace-membre {
  background: var(--color-bg-raised);
  border: 1px solid var(--gris-bordure);
  border-radius: 18px;
  padding: 18px;
}

.espace-membre-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

.espace-avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--ll-ciel-400);
  color: var(--ll-craie);
  font-family: var(--police-titre);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.espace-membre-identite { display: flex; flex-direction: column; }
.espace-membre-prenom { font-family: var(--police-titre); font-size: 20px; line-height: 1.2; }
.espace-membre-age { font-size: 14px; color: var(--color-fg-muted); }

.espace-membre-intertitre { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.espace-membre-note { margin: 10px 0 0; font-size: 14px; color: var(--color-fg-muted); }

/* Les tags de goûts de jeu. Le design system range les tags en Framboise et en
   Lila ; la maquette les remplit en Ciel, qui est le rôle de la sélection, du
   survol et du focus. Intégrés en Lila, issue `[Design system]` ouverte. */
.espace-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.espace-tag {
  background: var(--ll-lila-400);
  color: var(--ll-craie);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 14px;
}

.espace-membre-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gris-bordure);
}
/* Un panneau ouvert dans une fiche prend toute la carte : la fiche est déjà
   une colonne, la règle d'en-tête ne s'y applique pas. */
.espace-membre-actions .espace-panneau[open] { flex: none; }
.espace-membre-actions .espace-panneau-lien { align-self: flex-start; }

.espace-cases { border: 0; margin: 0 0 14px; padding: 0; }
.espace-cases legend { padding: 0; font-size: 14px; font-weight: 700; }
.espace-case { display: flex; gap: 8px; align-items: baseline; margin: 6px 0; }

/* Note 880 (cas 84) : le retrait d'un membre se range à droite du panneau. */
.espace-retrait { margin-top: 4px; display: flex; justify-content: flex-end; }
.espace-retrait .lien-bouton { color: var(--ll-carotte-ink); }

/* ---------- Compte 07 · Mes adresses ---------- */

.espace-adresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.espace-adresse {
  background: var(--color-bg-raised);
  border: 1px solid var(--gris-bordure);
  border-radius: 18px;
  padding: 18px;
}
/* L'adresse de livraison par défaut est cerclée, comme la maquette : le
   Citron vert est la validation de la charte, et la pastille le redit en
   toutes lettres pour qui ne distingue pas les couleurs. */
.espace-adresse.est-defaut { border-color: var(--ll-citron-400); border-width: 2px; padding: 17px; }

.espace-adresse-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.espace-adresse-icone {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ll-craie);
}
.espace-adresse-icone-ciel { background: var(--ll-ciel-400); }
.espace-adresse-icone-jasmin { background: var(--ll-jasmin-400); }
.espace-adresse-type { font-weight: 700; }

.espace-adresse-alias { margin: 0 0 2px; font-size: 13px; color: var(--color-fg-muted); }
.espace-adresse-nom { margin: 0 0 6px; font-weight: 700; }
.espace-adresse-lignes { margin: 0; color: var(--color-fg-muted); }

/* Note 881 (cas 82) : « Modifier », « Retirer » et « Définir par défaut »
   sont trois gestes de même nature : même forme (pictogramme et libellé),
   même police, même graisse, alignés sur une seule ligne. */
.espace-adresse-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gris-bordure);
}
.espace-adresse-form { display: flex; margin: 0; }
.espace-adresse-geste {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-fg);
  text-decoration: none;
}
.espace-adresse-geste:hover span, .espace-adresse-geste:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Lot L7 : Compte 04 « Parrainage », 05 « Cagnotte de jeux »,
              06 « Mes paiements » (#305, #306) ---------- */

/* L'accroche d'un bloc : la phrase qui explique la règle sous l'intertitre
   (« 10 € de remise par mois pendant 3 mois pour eux… »). */
/* `compte.css` pose une grande marge haute sur les h2 du contenu : dans un
   bloc qui porte déjà son propre rythme, elle fait un trou. Le bloc garde
   l'espacement, le titre démarre en haut.

   Les blocs du lot L7 sont des `<div>` et non des `<section>` : `site.css`
   donne aux `section` du site vitrine un `padding: 48px 20px` qui, dans une
   page de compte, ajoute un trou de 48 px en haut et en bas de chaque bloc. */
.espace-bloc > h2:first-child { margin-top: 0; }
.espace-bloc + .espace-bloc { margin-top: 36px; }

/* L'invitation à compléter son profil (décision d'Alban n° 111) : un bloc
   discret, posé avant la commande en cours, qui liste les points d'attention
   de l'en-tête avec le lien de la page qui les règle. */
/* Note 922 d'Alban (cas 274) : le fond passe en Carotte, l'aplat 400 du
   design system. Le texte et les liens y sont en Craie, seule encre qui tient
   le contraste sur cet aplat (en-tête de cette feuille). */
.espace-a-completer {
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--ll-carotte-400);
  color: var(--ll-craie);
  border: 0;
}
.espace-a-completer .compte-aide { color: var(--ll-craie); }
.espace-a-completer-liste { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.espace-a-completer-liste a { color: var(--ll-craie); font-weight: 700; text-decoration: underline; }

/* Note 921 d'Alban (cas 274) : « Ma commande en cours » dans un groupe blanc,
   le même que les cartes « Ma formule » et « Parrainez vos amis ». */
.espace-bloc-carte {
  background: var(--color-bg-raised);
  border: 1px solid var(--gris-bordure);
  border-radius: 18px;
  padding: 18px;
}
.espace-bloc-carte > :last-child { margin-bottom: 0; }

.espace-accroche { margin: 0 0 18px; color: var(--color-fg-muted); }
.espace-accroche strong { color: var(--color-fg); }

/* ---------- Le bandeau du code de parrainage (Compte 04) ---------- */

/* La maquette pose le code sur un aplat Framboise : c'est le rôle de mise en
   avant de la charte, et le texte y passe en Craie comme sur l'en-tête du
   site. Les deux gestes suivent la charte : Citron vert pour l'action
   principale, Jasmin pour la secondaire. */
/* Note 410 d'Alban (cas 102) : le code tient toujours sur une ligne ; les
   deux gestes se placent à sa droite quand la largeur le permet, et passent
   dessous sinon. Le retour à la ligne vient du `flex-wrap`, pas d'un point de
   rupture : il suit la largeur réelle du bandeau. */
.espace-code {
  background: var(--ll-framboise-400);
  color: var(--ll-craie);
  border-radius: 22px;
  padding: 20px 24px;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.espace-code-texte { flex: 1 1 auto; min-width: 0; }
.espace-code-titre { margin: 0 0 6px; font-size: 15px; }
.espace-code-valeur {
  margin: 0;
  font-family: var(--police-mono);
  font-size: clamp(20px, 6.4vw, 28px);
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.espace-code-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.espace-code-actions .btn { margin: 0; }
.espace-code-ok { font-weight: 700; }

/* Le bouton du code, sous le bandeau (note 410). */
.espace-code-generer { margin: 0 0 8px; }
.espace-code-generer .btn { margin: 0; }

/* La fenêtre de confirmation « Générer un nouveau code ? ». */
.espace-fenetre {
  max-width: min(480px, calc(100vw - 32px));
  border: 0;
  border-radius: 22px;
  padding: 24px;
  background: var(--color-bg-raised);
  color: var(--color-fg);
  box-shadow: var(--shadow);
}
.espace-fenetre::backdrop { background: color-mix(in srgb, var(--ll-craie) 45%, transparent); }
.espace-fenetre h2 { margin: 0 0 12px; font-size: 20px; }
.espace-fenetre p { margin: 0 0 20px; }
.espace-fenetre-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin: 0; }
.espace-fenetre-actions .btn { margin: 0; }

/* ---------- La carte de solde (Compte 05) ---------- */

.espace-solde {
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 22px;
  padding: 18px 22px;
  margin: 0 0 18px;
}
.espace-solde-lila { background: var(--ll-lila-400); }
.espace-solde-ciel { background: var(--ll-ciel-400); }
.espace-solde-medaillon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--color-bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
}
.espace-solde-medaillon .espace-icone { width: 30px; height: 30px; }
.espace-solde-texte { display: flex; flex-direction: column; }
.espace-solde-titre { font-size: 15px; }
.espace-solde-valeur { font-size: 20px; }
.espace-solde-valeur strong { font-family: var(--police-titre); font-size: 34px; line-height: 1.1; }

/* ---------- Les listes d'historique (Compte 04, 05 et 06) ---------- */

/* Une seule forme pour les trois listes du lot : filleuls, mouvements de
   cagnotte et prélèvements. La carte porte la liste, chaque ligne est séparée
   par un filet, comme la maquette. */
.espace-lignes {
  list-style: none;
  margin: 0 0 24px;
  padding: 4px 18px;
  background: var(--color-bg-raised);
  border: 1px solid var(--gris-bordure);
  border-radius: 18px;
}
.espace-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 0;
  border-top: 1px solid var(--gris-bordure);
}
.espace-ligne:first-child { border-top: 0; }
.espace-ligne-pastille {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ll-craie);
  font-weight: 700;
  font-size: 14px;
}
.espace-ligne-pastille-lila { background: var(--ll-lila-400); }
.espace-ligne-pastille-jasmin { background: var(--ll-jasmin-400); }
.espace-ligne-pastille-ciel { background: var(--ll-ciel-400); }
.espace-ligne-pastille-citron { background: var(--ll-citron-400); }
.espace-ligne-pastille-framboise { background: var(--ll-framboise-400); }

/* La colonne de texte prend la place restante et peut se réduire : sans
   `min-width: 0`, un long libellé pousse le montant hors de la carte, qui est
   exactement le défaut relevé sur la maquette mobile de la Compte 06. */
.espace-ligne-texte { flex: 1 1 10em; min-width: 0; display: flex; flex-direction: column; }
.espace-ligne-titre { font-weight: 700; }
.espace-ligne-contexte { font-size: 14px; color: var(--color-fg-muted); }
.espace-ligne .espace-badge { flex: none; }
.espace-ligne-valeur { flex: none; margin-left: auto; font-weight: 700; }
/* Le gain est en Citron vert : le signe « + » le dit aussi, la couleur ne
   porte jamais le sens toute seule. L'encre du 600 passe les 4,5 pour 1. */
.espace-ligne-gain { color: var(--ll-citron-ink); }
.espace-ligne-perte { color: var(--color-fg); }
.espace-ligne-actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

@media (max-width: 559px) {
  /* Mobile : le montant et les gestes passent sous le libellé plutôt que de
     le chevaucher. C'est le défaut que `notes.md` de la Compte 06 signale sur
     sa propre maquette. */
  .espace-ligne-texte { flex: 1 0 100%; }
  .espace-ligne-valeur { margin-left: 0; }
}

/* ---------- Le moyen de paiement (Compte 06) ---------- */

.espace-paiement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  background: var(--color-bg-raised);
  border: 1px solid var(--gris-bordure);
  border-radius: 18px;
  padding: 18px;
  margin: 0 0 24px;
}
.espace-paiement-icone {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--ll-ciel-400);
  color: var(--ll-craie);
  display: flex;
  align-items: center;
  justify-content: center;
}
.espace-paiement-texte { flex: 1 1 10em; min-width: 0; display: flex; flex-direction: column; }
.espace-paiement-carte { font-weight: 700; }
.espace-paiement-exp { font-size: 14px; color: var(--color-fg-muted); }
.espace-paiement-action { margin: 0 0 0 auto; }
.espace-paiement-action button { background: none; border: 0; padding: 0; cursor: pointer; }
/* L'alerte d'expiration prend sa ligne et parle en Carotte, rôle du refus,
   avec l'encre du 600 qui passe le seuil de contraste. */
.espace-paiement-alerte {
  flex: 1 0 100%;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ll-carotte-ink);
}

.espace-pagination { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 16px; }

/* ---------- Mes commandes : régler le supplément, modifier (cas 54) ---------- */

.espace-commande-gestes { margin: 12px 0; }
.espace-commande-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.espace-commande-actions .btn, .espace-commande-modifier { margin: 0; }

/* ---------- EC-07 « Mes paiements » d'après la charte rendue ----------
   Note 701 d'Alban (cas 243, lot 1), maquette de l'espace client : cartes
   arrondies à 24 px bordées de Craie 50 ; moyen de paiement dans un rond Ciel
   de 30 px, « Visa •••• 4218 » 14 px, l'expiration 12 px Craie 300 ;
   « Modifier » et « Facture » au style du bouton tertiaire (souligné Ciel 400,
   Ciel 200 au survol) ; lignes de l'historique en 14 px, montant gras 15 px. */
.espace-paiement, .espace-lignes { border-radius: var(--radius-lg); border-color: var(--ll-craie-50); }
.espace-paiement { padding: 16px 18px; gap: 10px 14px; }
.espace-paiement-icone { width: 30px; height: 30px; }
.espace-paiement-icone svg { width: 18px; height: 18px; }
.espace-paiement-carte { font-size: 14px; font-weight: 500; }
.espace-paiement-exp, .espace-ligne-contexte { font-size: 12px; color: var(--ll-craie-300); }
.espace-panneau-lien, .espace-ligne-actions a:not(.btn) {
  font-size: 14px; font-weight: 700; color: var(--ll-craie-400);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--ll-ciel-400);
}
.espace-panneau-lien:hover, .espace-ligne-actions a:not(.btn):hover { color: var(--ll-craie-400); text-decoration-color: var(--ll-ciel-200); }
.espace-ligne-titre { font-size: 14px; font-weight: 500; }
.espace-ligne-valeur { font-size: 15px; }

/* ---------- EC-06 Mon abonnement (issue #1 des maquettes, cas 243) ----------
   Carte de la formule, pause en libre service et « Résilier » discret sous
   la carte, comme `PageSubscription` du prototype de consolidation. Aucune
   valeur de couleur : les jetons `--ll-*` et `--color-*` du socle. Le texte
   posé sur l'aplat Ciel est la Craie, comme les autres médaillons. */
.ec06-carte { max-width: none; padding: 24px; }
.ec06-entete { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.ec06-medaillon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--ll-ciel-400);
  color: var(--ll-craie);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ec06-medaillon .espace-icone { width: 26px; height: 26px; }
.ec06-nom { margin: 0; font-family: var(--police-titre); font-weight: 400; font-size: 24px; }
.ec06-depuis { margin: 2px 0 0; font-size: 13px; color: var(--color-fg-muted); }
.ec06-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px 24px;
  margin: 0;
}
.ec06-meta div { margin: 0; }
.ec06-meta dt { font-size: 13px; color: var(--color-fg-muted); }
.ec06-meta dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; }
.ec06-trait { border: 0; border-top: 1px solid var(--gris-bordure); margin: 20px 0; }
.ec06-sous-titre { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.ec06-reductions { margin: 0; }
.ec06-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ec06-pause { flex: 1 0 100%; }
.ec06-pause p { margin: 0 0 10px; }
.ec06-pause-titre { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ec06-pause-en-cours .ec06-pause-titre { color: var(--ll-ciel-ink); }
.ec06-pause form { margin: 0 0 8px; }
.ec06-pause-refus { flex: 1 0 100%; margin: 0; }
/* Note 967 d'Alban : le texte de la pause ouverte prend toute la largeur de la
   carte (`.compte-formulaire` le bornait à 460 px). */
.ec06-pause-form { max-width: none; }
/* Note 968 : « Mes paiements » aéré, le bouton ne colle plus au texte. */
.ec06-paiements .compte-actions { margin: 4px 0 20px; }
.ec06-paiements form { margin: 0; }
.ec06-durees { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ec06-durees legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.ec06-duree { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.ec06-pied { display: flex; justify-content: flex-end; margin: -12px 0 24px; }
.ec06-resilier {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 13px;
  color: var(--color-fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ec06-resilier:hover { color: var(--ll-craie-400); }
@media (max-width: 600px) {
  .ec06-carte { padding: 18px; }
  .ec06-meta { grid-template-columns: 1fr; }
}

/* Téléphone avec indicatif (notes 965 et 966 d'Alban, cas 83 et 82) : la
   liste des pays et le numéro sur une ligne, l'aide dessous. */
.champ-telephone-ligne { display: flex; gap: 8px; }
/* Largeurs posées à zéro puis réparties : la largeur naturelle de la liste
   (« Saint-Pierre-et-Miquelon (+508) ») n'élargit jamais le formulaire. */
/* 30 % au lieu de 45 % (#673), sans descendre sous « +33 France » sur mobile. */
.champ-telephone-ligne select { flex: 0 1 30%; width: 0; min-width: 10em; text-overflow: ellipsis; }
.champ-telephone-ligne input { flex: 1 1 70%; width: 0; min-width: 0; }
.champ-telephone .compte-aide { margin: 0; font-size: 12px; }
.champ-telephone input:user-invalid { border-color: var(--ll-carotte-400); }

/* Ma tribu (note 964 d'Alban, cas 84) : « Ajouter un membre » sous la liste,
   à droite ; ouvert, le panneau prend toute la largeur. */
.tribu-ajout { display: flex; justify-content: flex-end; margin: 16px 0 0; }
.tribu-ajout .espace-panneau[open] { flex: 1 1 100%; }
.tribu-ajout .espace-panneau[open] > summary { display: flex; width: fit-content; margin-left: auto; }
/* Note 963 : les préférences reprennent les pastilles de l'écran des envies. */
.tribu-preferences { max-width: none; }
.tribu-preferences-categories { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.tribu-preferences-categories legend { padding: 0; margin: 0 0 12px; font-weight: 700; }

/* Mes adresses (tickets #703 et #704) : le bouton « Ajouter une adresse »
   s'efface quand son formulaire est ouvert, « Annuler » le referme ; la
   ligne d'adresse propose les adresses de la Base Adresse Nationale. */
.espace-panneau-adresse[open] > summary { display: none; }
.espace-formulaire-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }


/* ---- espace-mon-compte.css ---- */
/* ---------- Espace client : « Mon compte », Ma commande, Mes favoris,
   Notifications et Aide (consolidation EC-02 à EC-05, EC-08 à EC-12,
   recette d'Alban, cas 243, note 701, points 2 et 3) ----------
   Valeurs relevées dans le code de la maquette (`espace-client/nav-v2.css`,
   `nav-v3.css`, `espace-client.css`, `ds-sheet.css`), posées sur les jetons
   de la charte uniquement. Feuille nommée après `espace-client.css` pour
   passer après elle dans la concaténation de `/site.css`. */

/* « Mon compte » : la tête et la barre d'onglets (`.ec-subtabs`). */
.mon-compte-tete { margin: 0 0 var(--space-6); }
.mon-compte-titre { margin: 0 0 6px; }
.mon-compte-tete .espace-chapeau { margin-bottom: var(--space-5); }
/* Note 919 d'Alban (14/10/2026, cas 210) : une grille régulière plutôt
   qu'une barre qui défile (quatre onglets sur six cachés sur téléphone) ou
   qui laisse « Connexion et sécurité » seul sur sa ligne. Trois colonnes sur
   ordinateur, deux sur tablette et téléphone : les six onglets sont toujours
   visibles, de même largeur. */
.mon-compte-onglets {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  max-width: 780px;
  padding: 4px;
  background: var(--ll-blanc-50);
  border: 1px solid var(--color-border);
  border-radius: 24px;
}
.mon-compte-onglet {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 999px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ll-craie-300);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-soft);
}
.mon-compte-onglet:hover { background: var(--ll-ciel-50); color: var(--ll-craie-400); }
.mon-compte-onglet:focus-visible { outline: 3px solid var(--ll-ciel-400); outline-offset: 2px; }
.mon-compte-onglet.est-actif {
  background: var(--ll-ciel-400);
  color: var(--ll-craie-400);
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--ll-craie-400);
}
.mon-compte-sous-titre {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
}
@media (max-width: 820px) {
  .mon-compte-onglets { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
  .mon-compte-onglet { min-height: 44px; }
}
/* EC-07 : le bouton « Modifier » / « Enregistrer une carte » prend la police
   de la page (un bouton ne l'hérite pas d'office). */
.mon-compte-page button.espace-panneau-lien { font-family: var(--font-sans); }

/* Barre latérale : « Aide et contact » discret, en bas (`.ec-nav__help`). */
.compte-nav-aide {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-fg-muted);
  text-decoration: none;
}
.compte-nav-aide .picto { flex: none; }
.compte-nav-aide:hover { background: var(--ll-ciel-50); color: var(--ll-craie-400); }
.compte-nav-aide.est-actif { color: var(--ll-craie-400); font-weight: 700; }

/* EC-02 : l'encart « Vos commandes précédentes ». */
.espace-encart-historique {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  background: var(--ll-blanc-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.espace-encart-historique-texte { display: flex; flex-direction: column; gap: 2px; }
.espace-encart-historique-titre { font-family: var(--font-sans); font-weight: 700; font-size: 14px; }
.espace-encart-historique .compte-aide { margin: 0; }

/* EC-10 : les favoris en cartes (`.ec-favs`, `.ec-fav`). */
.favoris-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}
/* Note 961 d'Alban (cas 280) : la photo et le texte en haut, les gestes sur
   leur propre ligne en bas de la carte. Sur une colonne de 300 px, le bouton
   posé à droite du texte le chevauchait et écrasait la référence. */
.favoris-carte {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "photo texte" "actions actions";
  align-items: start;
  gap: 12px 14px;
  padding: var(--space-4);
  background: var(--ll-blanc-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.favoris-photo {
  grid-area: photo;
  width: 64px;
  height: 64px;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--ll-jasmin-200);
}
.favoris-carte .compte-envie-texte { grid-area: texte; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.favoris-marque { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-fg-muted); }
.favoris-reference { font-size: 12px; color: var(--color-fg-muted); }
.favoris-carte .compte-article-nom { font-family: var(--font-sans); font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.favoris-carte .compte-article-nom a { color: inherit; text-decoration: none; }
.favoris-carte .compte-article-nom a:hover { text-decoration: underline; }
.favoris-carte .compte-aide { margin: 0; font-size: 13px; }
.favoris-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: auto; }
.favoris-actions form { margin: 0; }
/* Le libellé centré dans la hauteur du bouton, quel que soit le nombre de lignes. */
.favoris-actions .compte-envie-panier {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 14px;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}
/* Le compteur « − n + » remplace le bouton une fois le jeu au panier (#672) :
   le `display` ci-dessus l'emporterait sur `[data-panier-ajout][hidden]`. */
.favoris-actions .compte-envie-panier[hidden] { display: none; }
.favoris-actions .panier-quantite { flex: 1 1 auto; }
.favoris-retirer {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ll-craie-400);
  cursor: pointer;
}
.favoris-retirer:hover { background: var(--ll-blanc-200); }
.favoris-retirer:focus-visible { outline: 3px solid var(--ll-ciel-400); outline-offset: 2px; }
.favoris-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-5);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  background: var(--ll-blanc-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.favoris-vide-picto {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ll-framboise-400);
  color: var(--ll-craie-400);
}
.favoris-vide-titre { margin: 4px 0 0; font-family: var(--font-sans); font-weight: 700; font-size: 16px; }
.favoris-vide .compte-aide { margin: 0; }
@media (max-width: 520px) {
  .favoris-grille { grid-template-columns: 1fr; }
}

/* EC-12 : les interrupteurs par type d'envoi (`.ec-notif`, `.toggle`). */
.notif-formulaire { max-width: 720px; }
.notif-liste {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--space-5);
  padding: 4px var(--space-5);
  list-style: none;
  background: var(--ll-blanc-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.notif-ligne {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 14px 4px;
}
.notif-ligne + .notif-ligne { border-top: 1px solid var(--color-border); }
.notif-libelle { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.notif-ligne-verrouillee .notif-libelle { cursor: default; }
.notif-titre { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 14px; }
.notif-detail { display: block; font-size: 12px; color: var(--color-fg-muted); }
.interrupteur {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  margin: 0;
  border-radius: 999px;
  background: var(--ll-craie-50);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-soft);
}
.interrupteur::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ll-blanc-50);
  transition: left var(--dur-base) var(--ease-bounce);
}
.interrupteur:hover { background: var(--ll-craie-100); }
.interrupteur:checked { background: var(--role-control-on); box-shadow: inset 0 0 0 1.5px var(--ll-craie-400); }
.interrupteur:checked::after { left: 21px; background: var(--ll-craie-400); }
.interrupteur:checked:hover { background: var(--role-control-press); }
.interrupteur:focus-visible { outline: 3px solid var(--ll-ciel-400); outline-offset: 2px; }
.interrupteur:disabled { cursor: default; opacity: .55; }
.interrupteur:disabled:hover { background: var(--role-control-on); }

/* EC-05 : Aide et contact (`.ec-faq`, `.ec-reward`). */
.aide-carte {
  padding: var(--space-5);
  background: var(--ll-blanc-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.aide-questions { padding-top: 4px; padding-bottom: 4px; }
.aide-question + .aide-question { border-top: 1px solid var(--color-border); }
.aide-question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
}
.aide-question summary::-webkit-details-marker { display: none; }
.aide-question summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--ll-craie-300);
  border-bottom: 2px solid var(--ll-craie-300);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-base) var(--ease-soft);
}
.aide-question[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.aide-question summary:focus-visible { outline: 3px solid var(--ll-ciel-400); outline-offset: 2px; border-radius: 4px; }
.aide-reponse { max-width: 64ch; padding: 0 0 var(--space-4); font-size: 14px; line-height: 1.6; color: var(--color-fg-muted); }
.aide-reponse p { margin: 0 0 8px; }
.aide-plus { margin: 12px 0 0; }
.aide-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.aide-section { margin: 0; }
.aide-section > h2 { margin: 0 0 var(--space-4); }
.aide-moyens { display: flex; flex-direction: column; gap: 14px; }
.aide-moyen {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.aide-pastille {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ll-craie-400);
}
.aide-pastille-ciel { background: var(--ll-ciel-400); }
.aide-pastille-framboise { background: var(--ll-framboise-400); }
.aide-moyen-texte { display: flex; flex-direction: column; min-width: 0; }
.aide-moyen-titre { font-size: 12px; color: var(--color-fg-muted); }
.aide-moyen-texte a { font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--ll-craie-400); overflow-wrap: anywhere; }
.aide-ecrire p:first-child { margin-top: 0; }
.aide-ecrire p:last-child { margin-bottom: 0; }
@media (max-width: 820px) {
  .aide-grille { grid-template-columns: 1fr; }
}

/* EC-04 : Mes avantages (`.ec-perks` de nav-v2.css). Le contenu et les
   règles du parrainage (R-C06-01) ne changent pas : seul l'habillage suit la
   maquette, deux blocs séparés d'un filet, compteurs en cartes claires. */
.avantages-bloc + .avantages-bloc {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.avantages-bloc .espace-compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.avantages-bloc .espace-compteur {
  background: var(--ll-blanc-100);
  border: 1px solid var(--color-border);
  color: var(--ll-craie-400);
}
.avantages-bloc .espace-compteur::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin-bottom: 8px;
  border-radius: 50%;
}
.avantages-bloc .espace-compteur-framboise::before { background: var(--ll-framboise-400); }
.avantages-bloc .espace-compteur-ciel::before { background: var(--ll-ciel-400); }
@media (max-width: 520px) {
  .avantages-bloc .espace-compteurs { grid-template-columns: 1fr; }
}

/* EC-01 : les stickers « halo » des compteurs (`.ec-counter__sticker`).
   Note 920 d'Alban (cas 274) : le sticker se pose en haut à droite de chaque
   tuile, et les textes en dessous prennent toute la largeur. Seule la ligne du
   chiffre, à côté du sticker, lui laisse sa place ; sa hauteur minimale fait
   démarrer le titre sous le sticker. */
.espace-compteur.a-sticker { position: relative; }
.espace-compteur.a-sticker .espace-compteur-valeur { padding-right: 68px; min-height: 58px; }
.espace-compteur-sticker {
  position: absolute;
  width: 60px;
  height: auto;
  filter: drop-shadow(0 5px 9px color-mix(in srgb, var(--ll-craie-400) 18%, transparent));
  pointer-events: none;
}
.espace-compteur-sticker[data-pos="tr"] { top: 12px; right: 12px; transform: rotate(-6deg); }
.espace-compteur-sticker[data-pos="cr"] { top: 50%; right: 12px; transform: translateY(-50%) rotate(5deg); }
.espace-compteur-sticker[data-pos="br"] { bottom: 10px; right: 12px; transform: rotate(7deg); }
/* En mobile, les trois tuiles sont étroites : le sticker sort en coin
   au-dessus de la tuile au lieu de couvrir le libellé. */
@media (max-width: 640px) {
  .espace-compteurs { overflow: visible; }
  .espace-compteur.a-sticker .espace-compteur-valeur { padding-right: 0; min-height: 0; }
  .espace-compteur-sticker,
  .espace-compteur-sticker[data-pos] { width: 34px; top: -12px; right: -6px; bottom: auto; transform: rotate(8deg); }
}


/* ---- espace-pro.css ---- */
/* ---------- Page espace pro (classes pro-, surcharge de site.css) ---------- */

/* Hero lilas : très grand titre à gauche, photo à droite qui déborde sous
   la section, comme sur l'original. */
.pro-hero {
  display: block;
  position: relative;
  padding: 36px 48px 52px 80px;
  /* Même cadre de 1240 px que « Nos formules » (tâche de nuit du 22/10/2026). */
  padding-left: max(80px, calc((100% - 1240px) / 2));
  padding-right: max(48px, calc((100% - 1240px) / 2));
}
.pro-hero .hero-texte { max-width: 900px; margin-left: 0; }
.pro-hero .hero-surtitre { font-weight: 400; font-size: 18px; margin: 6px 0 20px; }
.pro-hero .titre-hero {
  font-weight: 500;
  font-size: clamp(40px, 6.3vw, 88px);
  line-height: 1.18;
  margin: 0 0 40px;
}
.pro-hero .mot-decore img { bottom: -0.2em; width: 116%; }
.pro-hero .hero-baseline { max-width: 360px; font-size: 15px; margin: 0 0 48px; }
.pro-hero .hero-visuel {
  position: absolute; right: 70px; bottom: -46px; width: 540px; z-index: 2;
}
.pro-hero .hero-visuel img { width: 100%; border-radius: 0; }

/* Titres et sous-titres plus grands que le style commun sur cette page. */
.pro-tranquillite .titre-section,
.pro-avantages .titre-section,
.pro-clients .titre-section,
.pro-formule .titre-section { font-size: 38px; }
.pro-tranquillite .sous-titre-section,
.pro-avantages .sous-titre-section,
.pro-clients .sous-titre-section,
.pro-formule .sous-titre-section { font-weight: 400; font-size: 19px; }

/* Boutons en casse mixte (seul le bouton du hero reste en capitales). */
.pro-tranquillite .btn,
.pro-formule .btn {
  text-transform: none; letter-spacing: 0;
  font-size: 16px; padding: 11px 32px; border-radius: 24px;
}

.pro-tranquillite { padding: 72px 20px 64px; }
.pro-tranquillite .sous-titre-section { margin-bottom: 44px; }
.pro-tranquillite .texte-section { max-width: 700px; margin-bottom: 40px; }

/* Avantages (fond jasmin) : visuel plus compact, collé au bas de la section. */
.pro-avantages { padding-bottom: 0; }
.pro-avantages-deco { width: 90px; margin-bottom: 4px; }
.pro-avantages-visuel { max-width: 700px; margin: 12px auto 0; }

/* Partenaires : carrousel de logos pleine largeur. */
.pro-clients { padding: 56px 0 72px; }
.pro-marques-defilant { overflow: hidden; padding: 28px 0 24px; }
.pro-marques-piste {
  display: flex; gap: 96px; align-items: center; width: max-content;
  animation: pro-defilement 60s linear infinite;
}
.pro-marque { height: 88px; width: auto; max-width: 160px; object-fit: contain; flex: none; }
@keyframes pro-defilement {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .pro-marques-piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* Avis Google : cartes jasmin, texte replié sur 5 lignes + « voir plus ». */
.pro-avis-titre { margin-top: 40px; }
.pro-avis-grille {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  max-width: 1130px; margin: 40px auto 0; padding: 0 20px; text-align: left;
}
.pro-avis {
  background: var(--jasmin); border-radius: 24px; padding: 28px 26px;
  display: flex; flex-direction: column; min-height: 330px;
}
.pro-avis-tete { display: flex; gap: 12px; align-items: center; margin-bottom: 28px; }
.pro-avis-tete img { width: 44px; height: 44px; border-radius: 50%; }
.pro-avis-auteur { margin: 0; font-size: 14px; }
.pro-avis-toggle { display: none; }
.pro-avis-texte {
  font-size: 14px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pro-avis-toggle:checked ~ .pro-avis-texte { -webkit-line-clamp: unset; display: block; }
.pro-avis-texte p { margin: 0 0 8px; }
.pro-etoiles { color: var(--carotte); letter-spacing: 3px; font-size: 20px; margin-top: 18px; }
.pro-avis-plus { margin-top: auto; align-self: flex-end; font-size: 14px; cursor: pointer; }
.pro-avis-toggle:checked ~ .pro-avis-plus { display: none; }

/* Formule pro : tout en colonne centrée, photo au-dessus du texte. */
.pro-formule {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0; max-width: none; padding: 56px 20px 72px;
}
.pro-formule-visuel { margin-bottom: 110px; }
.pro-formule-photo { width: 390px; max-width: 100%; border-radius: 8px; }
.pro-formule-deco {
  left: 50%; right: auto; bottom: -74px; transform: translateX(-50%); width: 110px;
}
.pro-formule-texte .titre-section,
.pro-formule-texte .sous-titre-section { text-align: center; }
.pro-formule .sous-titre-section { margin-bottom: 36px; }
.pro-formule-texte .texte-section { margin: 0 auto 32px; max-width: 780px; }

/* ---------- Adaptation mobile ---------- */
@media (max-width: 900px) {
  .pro-hero { padding: 32px 20px 40px; }
  .pro-hero .hero-visuel { position: static; width: auto; max-width: 480px; margin: 24px auto -60px; }
  .pro-avis-grille { grid-template-columns: 1fr; }
  .pro-avis { min-height: 0; }
}


/* ---- faq.css ---- */
/* ---------- Page FAQ ---------- */

/* Hero « Vos questions / Nos réponses » avec recherche. */
.faq-hero { text-align: center; padding-top: 64px; padding-bottom: 24px; }
.faq-titre {
  font-family: var(--police-titre); font-weight: 400;
  font-size: clamp(44px, 5.7vw, 80px); line-height: 1.1; margin: 0;
}
.faq-sous-titre {
  font-family: var(--police-titre); font-weight: 500; font-size: 28px;
  line-height: 1.2; margin: 0 0 28px;
}
.faq-recherche {
  position: relative; max-width: 900px; margin: 0 auto;
}
.faq-recherche input {
  width: 100%; height: 60px; padding: 0 76px 0 18px; border-radius: 10px;
  border: 1px solid var(--craie); background: var(--blanc);
  font-family: var(--police-corps); font-size: 14px; color: var(--craie);
}
.faq-recherche input:focus { outline: 2px solid var(--citron-vert); }
.faq-recherche-loupe {
  position: absolute; top: 0; right: 0; width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jasmin); border-radius: 0 10px 10px 0;
  border: 1px solid var(--craie); border-left: none; color: var(--craie);
}

/* Suggestions pendant la frappe : les questions dont le titre ou la réponse
   contient tous les mots tapés. */
.faq-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  margin: 0; padding: 6px; list-style: none; text-align: left;
  background: var(--blanc); border: 1px solid var(--craie); border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ll-craie) 15%, transparent);
  max-height: 340px; overflow-y: auto;
}
.faq-suggestions [role="option"] {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.faq-suggestions [role="option"]:hover,
.faq-suggestions [role="option"][aria-selected="true"] { background: var(--beige); }
.faq-suggestion-titre { font-size: 14px; font-weight: 700; }
.faq-suggestion-categorie { font-size: 12px; opacity: 0.7; }

/* Catégories en pastilles (recette d'Alban du 25/09/2026) : en desktop, une
   rangée centrée qui passe à la ligne ; en mobile, une seule ligne qui défile
   sans barre de défilement visible. */
.faq-categories { text-align: center; padding-top: 24px; padding-bottom: 8px; }
.faq-bloc-titre {
  font-family: var(--police-corps); font-size: 22px; font-weight: 700;
  text-align: center; margin: 0 0 24px;
}
.faq-cartes {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  max-width: 1400px; margin: 20px auto 0; padding: 4px 20px 16px;
}
.faq-carte {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px; background: var(--blanc);
  border: 1px solid var(--craie); border-radius: 999px; text-decoration: none;
}
.faq-carte:hover, .faq-carte:focus-visible { background: var(--jasmin); }
.faq-carte-icone { width: 24px; height: 24px; color: var(--craie); flex: none; }
.faq-carte-icone svg { width: 100%; height: 100%; }
.faq-carte-nom {
  font-family: var(--police-titre); font-size: 15px; font-weight: 700;
  line-height: 1.2; white-space: nowrap;
}
@media (max-width: 640px) {
  .faq-cartes {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    scroll-snap-type: x proximity; scrollbar-width: none; gap: 10px;
  }
  .faq-cartes::-webkit-scrollbar { display: none; }
  .faq-carte { scroll-snap-align: start; }
}

/* Questions les plus fréquentes. */
.faq-frequentes { text-align: center; padding-top: 40px; }
.faq-frequentes-liste { max-width: 1200px; margin: 0 auto 24px; text-align: left; }
.faq-frequente {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--gris-bordure); padding: 16px 8px;
  font-size: 15px; font-weight: 700; text-decoration: none;
}
.faq-frequente:last-of-type { border-bottom: 1px solid var(--gris-bordure); }
.faq-frequente svg { flex: none; }
.faq-voir-tout {
  font-family: var(--police-corps); font-size: 16px; font-weight: 600;
  color: var(--craie); background: none; border: none; cursor: pointer;
  padding: 8px 0; margin-top: 8px;
}

/* Une catégorie = titre + description + accordéons. La marge de défilement
   laisse la place de l'en-tête collant : sans elle, le titre de la catégorie
   visée arrivait dessous. */
.faq-categorie { padding-top: 32px; padding-bottom: 16px; scroll-margin-top: 90px; }
.faq-item, #faq-toutes { scroll-margin-top: 110px; }
.faq-categorie .titre-section, .faq-categorie .sous-titre-section { text-align: center; }
.faq-liste { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--blanc); border-radius: 16px;
  border: 1px solid var(--gris-bordure); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 16px 20px;
  font-weight: 700; font-size: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; flex: none; width: 16px; height: 16px; }
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; background: var(--craie); border-radius: 2px;
  transition: transform 0.2s ease;
}
.faq-plus::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq-plus::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item[open] .faq-plus::after { transform: scaleY(0); }
.faq-item[open] summary { background: color-mix(in srgb, var(--ll-jasmin) 35%, transparent); }
.faq-reponse { padding: 4px 20px 18px; font-size: 13px; }
.faq-reponse p { margin: 0 0 10px; }
.faq-reponse p:last-child { margin-bottom: 0; }

/* Appel vers le blog : colonne de texte + 3 articles. */
.faq-blog { padding: 72px 20px; }
.faq-blog-int {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1.05fr));
  gap: 18px; max-width: 1340px; margin: 0 auto; align-items: stretch;
}
.faq-blog-texte {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 30px;
}
.faq-blog-avant { font-size: 18px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
.faq-blog-mot {
  font-family: var(--police-titre); font-weight: 400; font-size: 40px;
  line-height: 1.1; margin: 0 0 16px;
}
.faq-blog-desc { font-size: 14px; line-height: 1.4; margin: 0 0 16px; }
.faq-lien-souligne {
  font-family: var(--police-titre); font-size: 14px; letter-spacing: 1px;
  text-decoration: none; border-bottom: 1px solid var(--craie);
  padding-bottom: 4px; width: fit-content;
}
.faq-blog-chevron { margin-top: auto; padding-top: 24px; color: var(--craie); }
.faq-article {
  display: flex; flex-direction: column; border: 1px solid var(--craie);
  border-radius: 20px; padding: 0 0 10px; overflow: hidden;
}
.faq-article img {
  width: 100%; height: 107px; object-fit: cover;
  border-radius: 20px 20px 0 0; display: block;
}
.faq-article h3 {
  font-family: var(--police-titre); font-weight: 500; font-size: 20px;
  line-height: 1.2; margin: 14px 20px 8px;
}
.faq-article-extrait { font-size: 13px; line-height: 1.4; margin: 0 20px 12px; }
.faq-article .faq-lien-souligne { margin: auto 20px 8px; }

@media (max-width: 1000px) {
  .faq-blog-int { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .faq-blog-int { grid-template-columns: 1fr; }
}

/* Recherche sans résultat (A1 de #404) : la page ne reste plus muette. */
.faq-sans-resultat { text-align: center; margin: 24px auto 40px; max-width: 48em; }
.faq-sans-resultat[hidden] { display: none; }


/* ---- informations-legales.css ---- */
/* ---------- Page informations légales : ajustements ISO à l'original ---------- */
/* Chargé après site.css (concaténation) : ces règles priment sur le bloc générique. */

/* Bandeau lilas : lunettes plus grandes, titre en graisse mixte (« légales » en gras). */
.legal-hero { padding: 52px 20px 56px; }
.legal-hero img { width: 150px; margin-bottom: 18px; }
.legal-hero .titre-hero {
  font-weight: 400;
  font-size: clamp(34px, 5.5vw, 64px);
}
.legal-hero .titre-hero p { margin: 0; }
.legal-hero .titre-hero strong { font-weight: 700; }

/* Onglets : alignés à gauche dans la colonne de contenu, sur le fond beige de la
   page (pas de bande blanche ni de filet), onglet actif en bleu ciel souligné. */
.legal-onglets {
  max-width: 900px;
  margin: 0 auto;
  justify-content: flex-start;
  gap: 20px;
  background: none;
  border-bottom: none;
  padding: 19px 20px 0;
}
.onglet {
  font-weight: 400;
  font-size: 15px;
  padding: 4px 0 14px;
  border-bottom: 2px solid transparent;
}
.onglet.actif {
  color: var(--ciel);
  border-bottom: 2px solid var(--ciel);
}

/* Colonne de texte : même gouttière que les onglets, texte à la taille du corps. */
.legal-contenu { max-width: 900px; padding: 25px 20px 48px; }
.legal-maj { font-size: 15px; opacity: 1; margin: 0 0 12px; }
/* Cas 297 : une adresse ou un mot long des CGL élargissait la page à 320 px. */
.legal-texte { font-size: 15px; line-height: 1.45; overflow-wrap: break-word; }


/* ---- je-commence.css ---- */
/* ---------- Page /je_commence (entrée du tunnel d'abonnement) ---------- */

.funnel-entree {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 48px;
  text-align: center;
}
.funnel-entree .titre-hero {
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.15;
  margin: 0 0 20px;
}
.funnel-texte {
  font-size: 18px;
  margin: 0 auto 32px;
  max-width: 34em;
}
.funnel-actions { margin: 0 0 20px; }
.funnel-liens {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 15px;
}


/* ---- jeux-de-societe.css ---- */
/* ---------- Page /jeux-de-societe (préfixe jds-) ---------- */
.jds-hero {
  background: var(--ciel);
  padding: 104px 20px 0;
}
.jds-hero-int {
  max-width: 1330px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 32px;
  align-items: center;
}
.jds-hero-texte { padding-bottom: 32px; }
.jds-surtitre {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 20px;
}
.jds-titre {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.12;
  max-width: 640px;
  margin: 0 0 44px;
}
.jds-titre strong { font-weight: 700; display: block; }
.jds-hero-texte .hero-baseline { font-size: 17px; margin: 0 0 44px; }
.jds-hero-visuel { align-self: end; }
.jds-hero-visuel img { display: block; width: 100%; height: auto; }
.jds-ccm {
  text-align: center;
  background: var(--beige);
  padding: 72px 20px 84px;
}
.jds-etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px;
  max-width: 920px;
  margin: 110px auto 96px;
}
.jds-etape img { height: 96px; width: auto; }
.jds-etape p { font-size: 13px; max-width: 175px; margin: 20px auto 0; }
.jds-reassurance { background: var(--jasmin); padding: 84px 20px 88px; }
.jds-badges {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  max-width: 1250px;
  margin: 0 auto;
  text-align: center;
}
.jds-badge img { height: 104px; width: auto; }
.jds-badge h3 {
  display: inline-block;
  font-family: var(--police-corps);
  font-size: 16px;
  font-weight: 700;
  border: 1.5px solid var(--craie);
  border-radius: 999px;
  padding: 10px 26px;
  margin: 46px 0 0;
}
.jds-badge p { font-size: 13px; max-width: 240px; margin: 20px auto 0; }
.jds-jeux {
  text-align: center;
  background: var(--ciel);
  padding: 72px 20px 96px;
}
.jds-smiley { display: block; width: 240px; height: auto; margin: 0 auto 28px; }
.jds-jeux-grille {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  max-width: 1180px;
  margin: 44px auto 104px;
}
.jds-carte {
  background: var(--blanc);
  border-radius: 24px;
  padding: 14px 14px 12px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.jds-carte-titre {
  font-size: 12px;
  color: var(--craie);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jds-carte img { width: 100%; height: 122px; object-fit: contain; }
.jds-carte-note {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--craie);
  background: var(--beige);
  border-radius: 999px;
  padding: 3px 8px;
}
.jds-etoile { width: 13px; height: 13px; color: var(--carotte); }
.jds-seo {
  text-align: center;
  background: var(--beige);
  padding: 72px 20px 88px;
}
.jds-seo-texte {
  max-width: 1330px;
  margin: 64px auto 0;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}
.jds-seo-texte p { margin: 0 0 14px; }
.jds-seo-texte h3 {
  font-family: var(--police-corps);
  font-size: 17px;
  font-weight: 700;
  margin: 22px 0 8px;
}
@media (max-width: 1100px) {
  .jds-jeux-grille { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .jds-hero-int { grid-template-columns: 1fr; }
  .jds-titre { max-width: none; }
  .jds-etapes { grid-template-columns: repeat(2, 1fr); gap: 32px; margin: 56px auto 48px; }
  .jds-badges { grid-template-columns: repeat(2, 1fr); }
  .jds-jeux-grille { grid-template-columns: repeat(2, 1fr); }
}


/* ---- ludotheque.css ---- */
/* ---------- Page /ludotheque (préfixe ludo-) ---------- */
.ludo-hero {
  background: var(--lila);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 56px 56px 64px;
  /* Même cadre de 1240 px que « Nos formules » (tâche de nuit du 22/10/2026). */
  padding-inline: max(56px, calc((100% - 1240px) / 2));
}
.ludo-surtitre {
  font-family: var(--police-titre);
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 12px;
}
.ludo-titre {
  margin: 0 0 20px;
  font-size: 62px;
  line-height: 1.1;
  font-weight: 400;
}
/* Sur l'original, « ludothèque » est en gras de la même couleur que le reste. */
.ludo-titre .mot-couleur { color: inherit; font-weight: 800; }
.ludo-hero .hero-baseline { font-size: 19px; margin: 0 0 18px; }
.ludo-puces { margin: 0 0 28px; padding-left: 22px; font-size: 18px; }
.ludo-puces li { margin-bottom: 6px; }
.ludo-hero .hero-visuel img { width: 100%; height: auto; }
.ludo-ccm {
  text-align: center;
  background: var(--beige);
  padding: 64px 20px 88px;
}
.ludo-marques {
  text-align: center;
  background: var(--beige);
  padding: 80px 0 104px;
}
.ludo-ccm .titre-section, .ludo-marques .titre-section, .ludo-medias .titre-section,
.ludo-pourtous .titre-section, .ludo-seo .titre-section { font-size: 40px; }
.ludo-ccm .sous-titre-section, .ludo-marques .sous-titre-section, .ludo-medias .sous-titre-section,
.ludo-pourtous .sous-titre-section, .ludo-seo .sous-titre-section { font-size: 20px; }
.ludo-etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px;
  max-width: 900px;
  margin: 72px auto 56px;
}
.ludo-etape img { height: 110px; width: auto; }
.ludo-etape p { font-size: 16px; margin: 18px 0 0; }
.ludo-medias {
  text-align: center;
  background: var(--lila);
  padding: 84px 0 100px;
}
/* Médias et marques : bandeaux défilants (`vit-defilant`, recette d'Alban du
   25/09/2026), plus de barre de défilement sous les logos. */
.ludo-medias-logos { margin-top: 40px; }
.ludo-medias-logos .vit-defilant-logo img { height: 88px; }
.ludo-marques-logos { margin-top: 48px; }
@media (max-width: 560px) {
  .ludo-medias-logos .vit-defilant-logo img { height: 56px; }
}
.ludo-pourtous {
  background: var(--ciel);
  text-align: center;
  padding: 60px 56px 96px;
}
.ludo-bloc {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1140px;
  margin: 72px auto 0;
  text-align: left;
}
.ludo-bloc-inverse .ludo-bloc-texte { order: 2; }
.ludo-bloc-inverse .ludo-bloc-image { order: 1; }
.ludo-bloc-texte h3 { font-family: var(--police-titre); font-size: 21px; font-weight: 700; margin: 0 0 20px; }
.ludo-bloc-texte { font-size: 16px; }
.ludo-bloc-texte .btn { display: block; width: fit-content; margin: 28px auto 0; }
.ludo-bloc-image { width: 100%; border-radius: 12px; }
.ludo-seo {
  background: var(--color-bg-sunken);
  padding: 72px 20px 96px;
  text-align: center;
}
.ludo-seo-texte {
  margin: 24px auto 0;
  text-align: left;
}
.ludo-seo-texte h3 {
  font-family: var(--police-titre);
  font-size: 21px;
  margin: 40px 0 14px;
}
.ludo-seo-texte p { font-size: 17px; }
@media (max-width: 860px) {
  .ludo-hero { grid-template-columns: 1fr; padding: 40px 20px 48px; }
  .ludo-titre { font-size: 40px; }
  .ludo-bloc { grid-template-columns: 1fr; gap: 32px; }
  .ludo-bloc-inverse .ludo-bloc-texte { order: 1; }
  .ludo-bloc-inverse .ludo-bloc-image { order: 2; }
  .ludo-etapes { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .ludo-pourtous { padding: 48px 20px 64px; }
}
/* Les logos SVG de marque ont un canevas carré très vide : même rognage que
   sur l'accueil pour retrouver une taille utile comparable aux autres. */
.ludo-marques-logos img[src$=".svg"] { height: 180px; max-width: 180px; margin: -61px -38px; }
@media (max-width: 560px) {
  .ludo-marques-logos img[src$=".svg"] { height: 135px; max-width: 135px; margin: -46px -28px; }
}


/* ---- marque.css ---- */
/* Page marque /marque/<slug> (préfixe mq-), recette d'Alban du 25/09/2026 :
   plus de pavé centré, un en-tête de marque puis les jeux par grande catégorie.
   Passe après catalogue.css, qui garde les anciennes règles mq-. */

.mq-tete { text-align: left; padding-bottom: 24px; }
/* Le logo en haut à droite de la présentation (cas 18, note 111 du 26/09) :
   colonne de droite en desktop, flottant à droite en mobile. Sans logo, une
   seule colonne, aucun vide. */
.mq-identite {
  display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-areas: "texte logo";
  gap: 32px; align-items: start;
  background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: 16px;
  padding: 28px 32px; margin-top: 8px;
}
.mq-identite.est-sans-logo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte"; }
.mq-presentation { grid-area: texte; }
.mq-logo-cadre { grid-area: logo; display: flex; align-items: flex-start; justify-content: flex-end; }
.mq-logo { max-width: 100%; max-height: 160px; width: auto; height: auto; margin: 0; object-fit: contain; }
.mq-presentation h1 { margin: 0 0 4px; font-size: 28px; line-height: 1.25; }
.mq-presentation .cat-compteur { margin: 0 0 16px; text-align: left; }
.mq-chapo { max-width: 780px; margin: 0; }

.mq-texte-riche { line-height: 1.6; max-width: 780px; }
.mq-texte-riche p { margin: 0 0 .7em; }
.mq-texte-riche h2 { font-size: 20px; margin: 1.2em 0 .4em; }
.mq-texte-riche h3, .mq-texte-riche h4 { font-size: 17px; margin: 1em 0 .4em; }
.mq-texte-riche ul, .mq-texte-riche ol { margin: 0 0 .8em; padding-left: 22px; }
.mq-texte-riche li { margin: 0 0 .25em; }

.mq-plus { margin: 4px 0 0; border-top: 1px solid var(--gris-bordure); padding-top: 12px; }
.mq-plus summary { cursor: pointer; font-weight: 700; }
.mq-plus[open] summary { margin-bottom: 8px; }
.mq-actions { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
/* Titre réservé aux moteurs et aux lecteurs d'écran : le logo le dit déjà. */
.mq-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* « Trier par » ne colle plus aux vignettes (cas 18). */
.mq-resultats .cat-tri { margin-bottom: 24px; }
/* Le menu déroulant du tri (#769) se range à droite, comme au catalogue. */
.mq-resultats .cat-tri-liste { justify-content: flex-end; }
.mq-tester { text-align: center; margin: 8px 0 0; }

.mq-resultats { max-width: 1180px; margin: 0 auto; padding: 0 20px 56px; }
.mq-groupe { margin: 8px 0 40px; }
.mq-groupe h2 { font-size: 24px; margin: 0 0 16px; }
.mq-groupe-nb { font-size: 16px; font-weight: 400; color: var(--craie); }
.mq-groupe-plus { text-align: center; margin: 20px 0 0; }

@media (max-width: 700px) {
  .mq-identite { display: block; padding: 20px 16px; }
  .mq-identite::after { content: ""; display: block; clear: both; }
  .mq-logo-cadre { float: right; width: 112px; margin: 0 0 8px 12px; }
  .mq-logo { max-height: 80px; }
  .mq-presentation h1 { font-size: 26px; }
}


/* ---- materiel-montessori.css ---- */
/* ---------- Page /materiel-montessori (préfixe mm-) ---------- */
.mm-hero {
  background: var(--ciel);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 100px 40px 100px 150px;
  /* Même cadre de 1240 px que « Nos formules » (tâche de nuit du 22/10/2026). */
  padding-left: max(150px, calc((100% - 1240px) / 2));
  padding-right: max(40px, calc((100% - 1240px) / 2));
}
.mm-hero .hero-texte { max-width: 480px; margin-left: 0; text-align: center; }
.mm-titre {
  margin: 0 0 8px;
  font-size: 76px;
  font-weight: 400;
  line-height: 1.15;
  text-align: left;
}
.mm-exergue {
  font-family: var(--police-corps);
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 56px;
}
.mm-hero .btn { text-transform: none; font-size: 16px; padding: 9px 32px; }
.mm-hero .hero-visuel { text-align: center; }
.mm-hero .hero-visuel img { width: 100%; max-width: 660px; border-radius: 0; display: inline-block; margin: 0 auto; }
.mm-ccm .sous-titre-section,
.mm-categories .sous-titre-section,
.mm-faq .sous-titre-section { font-size: 20px; }
.mm-ccm .titre-section,
.mm-quoi .titre-section,
.mm-categories .titre-section,
.mm-faq .titre-section,
.mm-seo .titre-section { font-size: 34px; }
.mm-ccm {
  text-align: center;
  background: var(--beige);
  padding: 72px 20px 76px;
}
.mm-etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 1040px;
  margin: 60px auto 56px;
}
.mm-etape img { height: 120px; width: auto; }
.mm-etape p { font-size: 15px; max-width: 190px; margin: 14px auto 0; }
.mm-quoi {
  text-align: center;
  background: var(--lila);
  padding: 64px 40px 72px;
}
.mm-quoi .sous-titre-section { font-size: 22px; }
.mm-quoi-corps {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 140px;
  align-items: center;
  max-width: 1240px;
  margin: 24px auto 0;
  text-align: left;
}
.mm-quoi-corps > img { width: 100%; border-radius: 0; }
.mm-quoi-texte p { font-size: 14px; line-height: 1.45; }
.mm-quoi-texte { text-align: right; }
.mm-quoi-texte p { text-align: left; }
.mm-quoi-texte .btn { margin-top: 24px; text-transform: none; font-size: 15px; }
.mm-categories {
  text-align: center;
  background: var(--beige);
  padding: 64px 20px 72px;
}
/* Cartes de largeur fixe, rangées centrées : trois par ligne sur grand
   écran, la dernière ligne (Sciences, Voir plus) se centre d'elle-même, et
   le nombre de colonnes suit la largeur (recette d'Alban, cas 19). */
.mm-categories-grille {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 32px;
  max-width: 1200px;
  margin: 40px auto 0;
  text-align: left;
}
.mm-categorie {
  display: flex;
  gap: 20px;
  align-items: center;
  flex: 0 1 360px;
}
.mm-categorie img { width: 150px; height: 150px; object-fit: contain; flex: none; }
.mm-categorie h3 { font-family: var(--police-corps); font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.mm-categorie p { margin: 0; font-size: 14px; line-height: 1.4; max-width: 190px; }
.mm-categorie-plus .btn { text-transform: none; font-size: 15px; }
.mm-reassurance { background: var(--jasmin); padding: 80px 20px 90px; }
.mm-badges {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  max-width: 1300px;
  margin: 0 auto;
  text-align: center;
}
.mm-badge img { height: 90px; width: auto; }
.mm-badge h3 {
  font-family: var(--police-corps);
  font-size: 18px;
  font-weight: 700;
  margin: 48px auto 42px;
  display: inline-block;
  border: 1px solid var(--craie);
  border-radius: 999px;
  padding: 10px 24px;
  white-space: nowrap;
}
.mm-badge h3 { display: table; }
.mm-badge p { font-size: 14px; line-height: 1.4; margin: 0 auto; max-width: 250px; }
.mm-faq { padding: 72px 20px 80px; }
.mm-faq-liste {
  max-width: 1200px;
  margin: 48px auto 56px;
  text-align: left;
}
.mm-faq-item { border-bottom: 1px solid var(--craie); }
.mm-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--police-corps);
  font-size: 18px;
  padding: 24px 8px;
}
.mm-faq-item summary::-webkit-details-marker { display: none; }
.mm-faq-plus { position: relative; flex: none; width: 18px; height: 18px; }
.mm-faq-plus::before, .mm-faq-plus::after {
  content: "";
  position: absolute;
  background: var(--craie);
  transition: transform 0.2s;
}
.mm-faq-plus::before { left: 0; top: 8px; width: 18px; height: 2px; }
.mm-faq-plus::after { left: 8px; top: 0; width: 2px; height: 18px; }
.mm-faq-item[open] .mm-faq-plus::after { transform: scaleY(0); }
.mm-faq-reponse { padding: 0 8px 20px; font-size: 14px; }
.mm-seo {
  text-align: center;
  background: var(--jasmin);
  padding: 56px 20px 48px;
}
.mm-seo .sous-titre-section { font-size: 22px; }
.mm-seo-texte {
  max-width: none;
  margin: 32px auto 0;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.45;
}
.mm-seo-texte h3 {
  font-family: var(--police-corps);
  font-size: 17px;
  font-weight: 700;
  margin: 24px 0 8px;
}
.mm-seo-texte p { margin: 0 0 4px 10px; }
@media (max-width: 860px) {
  .mm-hero { padding: 48px 24px; }
  .mm-titre { font-size: 40px; }
  .mm-hero, .mm-quoi-corps { grid-template-columns: 1fr; }
  .mm-quoi-corps { gap: 32px; }
  .mm-etapes { grid-template-columns: repeat(2, 1fr); }
  .mm-categories-grille { gap: 20px; }
  .mm-categorie { flex-basis: 100%; max-width: 420px; gap: 16px; }
  .mm-categorie img { width: 96px; height: 96px; }
  .mm-categorie h3 { font-size: 16px; margin-bottom: 2px; }
  .mm-categorie p { max-width: none; font-size: 13px; }
  .mm-badges { grid-template-columns: repeat(2, 1fr); }
}


/* ---- nos-formules.css ---- */
/* ---------- Page nos-formules ---------- */

/* Comment ça marche : accroche géante alignée à gauche + 4 étapes. */
.nf-ccm { padding-top: 24px; }
.nf-ccm-tete { max-width: 1240px; margin: 0 auto 40px; }
.nf-ccm-tete h1 {
  font-family: var(--police-corps); font-size: 22px; font-weight: 700;
  margin: 0 0 4px;
}
.nf-accroche {
  font-family: var(--police-titre); font-weight: 400;
  font-size: clamp(44px, 5.7vw, 80px); line-height: 1.1;
  max-width: 700px; margin: 0;
}
.nf-mot-simple img { bottom: -0.22em; }
.nf-etapes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px; max-width: 1240px; margin: 0 auto 48px; text-align: center;
}
.nf-etape img { width: 75%; height: auto; }
.nf-etape h3 {
  font-family: var(--police-corps); font-size: 18px; font-weight: 700;
  margin: 4px 0 8px;
}
.nf-etape p { margin: 0; font-size: 14px; line-height: 1.4; }
.nf-ccm-cta { text-align: center; }

/* Bloc formules : onglets de période + 3 cartes inclinées. */
/* Les cartes inclinées ne doivent pas créer de défilement horizontal (vers 1100 px). */
.nf-formules { text-align: center; overflow-x: clip; }
.nf-formules .titre-section { font-size: 36px; margin-bottom: 8px; }
.nf-onglets {
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  margin: 28px 0 56px;
}
.nf-onglet {
  font-family: var(--police-corps); font-size: 16px; font-weight: 700;
  letter-spacing: 1px; line-height: 1.3; color: var(--craie);
  background: var(--jasmin); border: 1px solid transparent;
  border-radius: 20px; padding: 7px 25px 4px; cursor: pointer;
}
.nf-onglet.actif { background: transparent; border-color: var(--craie); }
.nf-cartes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; max-width: 1105px; margin: 0 auto;
}
.nf-carte {
  border-radius: 16px; padding: 24px 16px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
}
.nf-carte-1 { background: var(--lila); transform: rotate(-8deg); }
.nf-carte-2 { background: var(--carotte); }
.nf-carte-3 { background: var(--ciel); transform: rotate(8deg); }
.nf-carte-1 .nf-carte-illu { width: 101px; height: 50px; transform: rotate(10deg); }
.nf-carte-2 .nf-carte-illu { width: 114px; height: 34px; }
.nf-carte-3 .nf-carte-illu { width: 85px; height: 44px; transform: rotate(-10deg); }
.nf-carte-nom {
  font-family: var(--police-titre); font-size: 28px; font-weight: 500; margin: 0;
}
.nf-carte-accroche {
  font-family: var(--police-corps); font-size: 22px; font-weight: 700;
  line-height: 1.2; max-width: 300px; margin: 0;
}
.nf-carte-inclus p { margin: 0; font-size: 14px; line-height: 1.4; }
.nf-carte-prix {
  font-family: var(--police-titre); font-size: 28px; font-weight: 500; margin: 0;
}
.nf-bon-plan { max-width: 560px; margin: 40px auto 32px; }

/* Tableau comparatif location vs achat (fond jasmin). */
.nf-comparatif { padding-top: 0; padding-bottom: 64px; margin-top: 100px; }
.nf-comp-sticker {
  display: block; width: 320px; margin: -100px auto 0;
}
.nf-comp-titre {
  font-family: var(--police-titre); font-weight: 400; font-size: 36px;
  line-height: 1.2; text-align: center; padding: 30px 0 50px; margin: 0;
}
.nf-comp-titre p { margin: 0; }
.nf-comp-table {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 420px) 100px 100px 100px;
  column-gap: 0; justify-content: center; align-items: start;
}
.nf-comp-fond {
  grid-column: 2; grid-row: 1 / span 8; align-self: stretch;
  background: var(--framboise); border-radius: 20px; z-index: 0;
}
.nf-comp-entete {
  grid-row: 1; position: relative; z-index: 1; text-align: center;
  font-size: 14px; white-space: pre-line; line-height: 1.4;
  margin: 0; padding: 15px 10px 10px; min-height: 68px;
}
.nf-comp-texte {
  grid-column: 1; font-size: 14px; line-height: 1.4;
  margin: 0; padding: 20px 24px 0 0; min-height: 50px;
}
.nf-comp-coche {
  grid-column: 2; position: relative; z-index: 1; justify-self: center;
  align-self: start; padding-top: 22px;
}
.nf-comp-libetlou { grid-column: 2; }

/* Bandeau des 5 avantages (réassurance, fond beige). */
.nf-avantages { padding: 72px 20px; }
.nf-avantages-liste {
  display: flex; gap: 40px; justify-content: center; align-items: flex-start;
  flex-wrap: wrap; max-width: 1240px; margin: 0 auto;
}
.nf-avantage { width: 200px; text-align: center; }
.nf-avantage img { width: 110px; height: 110px; object-fit: contain; }
.nf-avantage-titre {
  display: block; font-size: 18px; font-weight: 700; line-height: 1.2;
  border: 1px solid var(--craie); border-radius: 200px;
  padding: 10px; max-width: 191px; margin: 24px auto 20px;
}
.nf-avantage-texte { font-weight: 400; font-size: 14px; line-height: 1.4; margin: 0; }

/* L'histoire derrière Lib et Lou (fond ciel). */
.nf-histoire { background: var(--ciel); padding: 72px 20px 88px; }
.nf-histoire-int {
  display: grid; grid-template-columns: minmax(0, 480px) 300px;
  gap: 100px; justify-content: center; align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.nf-histoire-texte h2 {
  font-family: var(--police-titre); font-weight: 400; font-size: 36px;
  line-height: 1.2; margin: 0 0 10px;
}
.nf-histoire-texte h2 p { margin: 0; }
.nf-histoire-sous-titre { font-size: 22px; font-weight: 700; margin: 0 0 30px; }
.nf-histoire-paras p { font-size: 14px; line-height: 1.4; margin: 0 0 14px; }
.nf-histoire-paras p:last-child { margin-bottom: 0; }
.nf-histoire-photo { position: relative; }
.nf-histoire-portrait {
  display: block; width: 300px; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 20px;
}
.nf-histoire-badge {
  position: absolute; width: 150px; top: -75px; right: -75px;
}

/* Appel FAQ en accordéon. */
.nf-questions { max-width: 1200px; margin: 24px auto 40px; text-align: left; }
.nf-question { border-top: 1px solid var(--craie); }
.nf-question:last-child { border-bottom: 1px solid var(--craie); }
.nf-question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; font-size: 18px; font-weight: 700;
  list-style: none; cursor: pointer;
}
.nf-question summary::-webkit-details-marker { display: none; }
/* Le « + » devient « − » quand la question est dépliée. */
.nf-question-plus { position: relative; flex: none; width: 18px; height: 18px; }
.nf-question-plus::before, .nf-question-plus::after {
  content: ""; position: absolute; background: var(--craie); transition: transform 0.2s;
}
.nf-question-plus::before { left: 0; top: 8px; width: 18px; height: 2px; }
.nf-question-plus::after { left: 8px; top: 0; width: 2px; height: 18px; }
.nf-question[open] .nf-question-plus::after { transform: scaleY(0); }
.nf-question-reponse { padding: 0 4px 20px; font-size: 14px; }
.nf-question-reponse p { margin: 0 0 8px; }

@media (max-width: 1000px) {
  .nf-histoire-int { grid-template-columns: 1fr; gap: 48px; }
  .nf-histoire-badge { right: -20px; }
}
@media (max-width: 900px) {
  .nf-cartes { grid-template-columns: 1fr; max-width: 420px; }
  .nf-carte-1, .nf-carte-3 { transform: none; }
  .nf-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-comp-table { grid-template-columns: minmax(0, 1fr) 70px 70px 70px; }
}
@media (max-width: 560px) {
  .nf-etapes { grid-template-columns: 1fr; }
}


/* ---- nos-univers.css ---- */
/* ---------- Page /nos-univers (préfixe nu-) ---------- */
.nu-hero {
  background: var(--lila);
  padding: 14px 20px;
  text-align: center;
}
.nu-titre {
  margin: 0 auto;
  max-width: 1100px;
  font-size: 72px;
  font-weight: 500;
  line-height: 1.3;
}
.nu-titre p { margin: 0; }
.nu-titre strong { font-weight: 700; }
.nu-contenu {
  max-width: none;
  margin: 0;
  padding: 30px 10px 34px;
}
.nu-gauche {
  text-align: left;
  font-size: 34px;
  font-weight: 500;
  margin: 0 0 14px;
}
.nu-intro {
  max-width: none;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 26px;
}
.nu-sous-titre {
  font-family: var(--police-titre);
  font-size: 22px;
  font-weight: 500;
  margin: 24px 0 2px;
}
.nu-univers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nu-univers li { line-height: 24px; }
.nu-univers a, .nu-marques a {
  color: var(--ll-ciel-500);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
}
.nu-univers a:hover, .nu-marques a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nu-marques {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 12px;
  row-gap: 0;
}
.nu-marques li {
  padding: 2px 4px 1px;
  border-bottom: 1px solid var(--gris-bordure);
  line-height: 17px;
}
.nu-marques a { font-size: 14px; }
@media (max-width: 1100px) {
  .nu-titre { font-size: clamp(32px, 6.5vw, 72px); }
  .nu-marques { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .nu-marques { grid-template-columns: repeat(2, 1fr); }
}


/* ---- produit.css ---- */
/* Fiche produit /produit/<slug> (préfixe pt-), recette d'Alban du 25/09/2026.
   Les règles de base de la fiche sont encore dans catalogue.css ; celles-ci
   passent après (ordre alphabétique des feuilles) et les complètent. */

.pt-note-nb { color: var(--craie); text-decoration: none; font-size: 13px; }

/* ---------- Carrousel des photos ---------- */
.pt-carrousel { padding: 12px; }
.pt-carrousel-cadre { position: relative; }
.pt-diapos {
  list-style: none; margin: 0; padding: 0;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  border-radius: 12px;
}
.pt-diapos::-webkit-scrollbar { display: none; }
.pt-diapo { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; }
.pt-diapo img { width: 100%; height: auto; max-height: 460px; object-fit: contain; display: block; }
.pt-carrousel-fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--gris-bordure); background: var(--blanc); color: var(--craie);
  font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px var(--ombre);
}
.pt-carrousel-fleche.est-precedente { left: 8px; }
.pt-carrousel-fleche.est-suivante { right: 8px; }
.pt-carrousel-fleche:disabled { opacity: .35; cursor: default; }
.pt-vignettes {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin;
}
.pt-vignettes a {
  display: block; border: 2px solid transparent; border-radius: 8px; overflow: hidden;
  background: var(--blanc);
}
.pt-vignettes a[aria-current="true"] { border-color: var(--framboise); }
.pt-vignettes img { width: 72px; height: 48px; object-fit: contain; display: block; }

/* Note 605 (cas 243) : vignette et diapo de la vidéo de règle (FP-01). */
.pt-vignette-video {
  width: 72px; height: 48px; box-sizing: border-box;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--craie) !important; color: var(--ll-blanc-casse);
  font-size: 11px; font-weight: 700; text-decoration: none; line-height: 1.1;
}
.pt-vignette-video .pt-lecture { width: 20px; height: 20px; }
.pt-diapo-video { align-self: stretch; min-width: 0; }
.pt-video-ecran {
  width: 100%; aspect-ratio: 3 / 2; max-height: 460px; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; border-radius: 12px; text-align: center;
  background: var(--craie); color: var(--ll-blanc-casse);
}
.pt-video-ecran-titre { margin: 0; font-family: var(--police-titre); font-size: 20px; }
.pt-video-lancer {
  display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none;
  font-weight: 700; font-size: 15px;
}
.pt-video-lancer .pt-lecture { width: 56px; height: 56px; color: var(--citron-vert); transition: transform .15s; }
.pt-video-lancer:hover .pt-lecture, .pt-video-lancer:focus-visible .pt-lecture { transform: scale(1.08); }
.pt-video-ecran-mention { margin: 0; font-size: 12px; max-width: 36ch; opacity: .85; }
.pt-video-ecran.est-lecture { padding: 0; background: var(--craie); }
.pt-video-ecran iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; display: block; }

/* FP-02 et FP-03 (issue #6 des maquettes) : dernier exemplaire, indisponible. */
.pt-dernier {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
  padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--jasmin);
  font-size: 14px; font-weight: 700; color: var(--craie);
}
.pt-indispo {
  display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px;
  padding: 0;
}
.pt-indispo p { margin: 0; }
.pt-indispo-titre { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; }
.pt-indispo-texte { font-size: 13px; line-height: 1.5; }
.pt-indispo-lien { align-self: flex-start; font-size: 13px; color: var(--craie); }
.pt-horloge { flex: none; }
#pt-alternatives { scroll-margin-top: 110px; }

/* ---------- Textes venus de Bubble (convertisseur BBCode) ---------- */
.pt-texte-riche p { margin: 0 0 .6em; }
.pt-texte-riche h3, .pt-texte-riche h4 { font-size: 16px; margin: 1em 0 .4em; }
.pt-texte-riche ul, .pt-texte-riche ol { margin: 0 0 .8em; padding-left: 22px; }
.pt-texte-riche li { margin: 0 0 .25em; }
.pt-description-courte { margin: 0 0 8px; }

/* ---------- Avis : tri sans retour en haut, date à côté de la note ---------- */
#avis, #avis-tris { scroll-margin-top: 110px; }
.pt-avis-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 8px; }
.pt-avis-tete .pt-avis-date { margin: 0; }
@media (min-width: 900px) {
  /* Deux colonnes d'avis : la liste se lit en moitié moins de hauteur. */
  .pt-avis-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
}

/* ---------- Avis : pagination ---------- */
.pt-avis-pages { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 20px 0 0; }
.pt-avis-position { font-size: 13px; color: var(--craie); }

/* ---------- Vous aimerez aussi : cartes plus petites, ordinateur compris ---------- */
.pt-similaires-cta { text-align: center; margin: 0; }
/* #773 : « Vous aimerez aussi » tient sur une seule ligne ; au-delà, les
   cartes défilent à l'horizontale (comme en mobile). */
.pt-similaires-grille {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; overscroll-behavior-x: contain;
}
.pt-similaires-grille .cat-carte { flex: 0 0 max(170px, calc((100% - 5 * 14px) / 6)); scroll-snap-align: start; }
.pt-similaires-grille .cat-carte { font-size: 12px; }
.pt-similaires-grille .cat-carte-titre { font-size: 13px; }
.pt-similaires-grille .cat-carte-image img { max-height: 150px; object-fit: contain; }
.pt-similaires-grille .btn { font-size: 10px; letter-spacing: .5px; padding: 7px 10px; }

/* ---------- Engagements (bandeau jasmin, comme sur libetlou.com) ---------- */
.pt-garanties {
  max-width: none; margin: 56px 0 0; padding: 64px 20px;
  background: var(--jasmin);
}
.pt-garanties ul {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1180px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px;
  text-align: center; color: var(--craie); font-size: 14px;
}
.pt-garantie img { height: 88px; width: auto; display: block; margin: 0 auto; }
.pt-garantie h3 {
  display: inline-block; margin: 18px 0 14px; padding: 8px 20px;
  font-family: var(--police-corps); font-size: 16px; font-weight: 700;
  border: 1.5px solid var(--craie); border-radius: 999px;
}
.pt-garantie p { margin: 0; line-height: 1.5; }

/* ---------- Fenêtre « Donner mon avis » ---------- */
.pt-fenetre-avis {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  border: 0; border-radius: 16px; padding: 28px 24px 20px;
  background: var(--blanc); color: var(--craie);
  box-shadow: 0 12px 40px var(--ombre);
}
.pt-fenetre-avis::backdrop { background: color-mix(in srgb, var(--ll-craie) 45%, transparent); }
.pt-fenetre-avis h2 { font-size: 20px; margin: 0 32px 16px 0; }
.pt-fenetre-fermer { position: absolute; top: 10px; right: 12px; margin: 0; }
.pt-fenetre-fermer button {
  border: 0; background: transparent; color: var(--craie);
  font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.pt-notes { border: 0; margin: 0 0 14px; padding: 0; display: flex; gap: 4px; }
.pt-notes legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.pt-note-choix { cursor: pointer; }
.pt-note-choix input, .pt-lecteur { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.pt-note-choix span[aria-hidden] { font-size: 34px; line-height: 1; color: var(--gris-bordure); transition: color .1s; }
/* L'étoile choisie et toutes celles qui la précèdent se remplissent. */
.pt-note-choix:has(input:checked) span[aria-hidden],
.pt-note-choix:has(~ .pt-note-choix input:checked) span[aria-hidden] { color: var(--carotte); }
.pt-notes:hover .pt-note-choix span[aria-hidden] { color: var(--gris-bordure); }
.pt-notes:hover .pt-note-choix:hover span[aria-hidden],
.pt-notes:hover .pt-note-choix:has(~ .pt-note-choix:hover) span[aria-hidden] { color: var(--carotte); }
.pt-note-choix:has(input:focus-visible) { outline: 2px solid var(--craie); outline-offset: 2px; border-radius: 4px; }
.pt-fenetre-formulaire label[for] { display: block; font-weight: 700; margin-bottom: 6px; }
.pt-fenetre-formulaire textarea {
  width: 100%; box-sizing: border-box; font: inherit; padding: 10px;
  border: 1px solid var(--gris-bordure); border-radius: 10px; background: var(--beige);
}
.pt-fenetre-aide { font-size: 13px; margin: 8px 0 14px; }
.pt-fenetre-erreur { color: var(--framboise); font-weight: 700; margin: 8px 0 0; }

@media (max-width: 860px) {
  .pt-garanties ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-garantie:last-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  /* Vous aimerez aussi : cartes plus petites qui défilent au doigt. */
  .pt-similaires-grille {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px; padding-bottom: 8px; margin: 0 -20px 20px; padding-left: 20px; padding-right: 20px;
    scroll-padding-left: 20px;
  }
  .pt-similaires-grille .cat-carte { flex: 0 0 44%; scroll-snap-align: start; font-size: 13px; }
  .pt-similaires-grille .cat-carte-titre { font-size: 14px; }
  .pt-similaires-grille .btn { font-size: 10px; letter-spacing: .5px; padding: 8px 10px; }
  .pt-garantie h3 { font-size: 14px; padding: 6px 14px; }
  .pt-carrousel-fleche { display: none; }
  .pt-garanties { padding: 48px 16px; }
  .pt-garantie img { height: 64px; }
}

/* Le rappel du coefficient sous le bouton d'ajout (recette d'Alban du
   01/10/2026, cas 52, note 279 : « dans la page produit : centre le texte "cet
   article compte x4" horizontalement par rapport au bouton au dessus et le
   mettre également en orange »). Même phrase que la vignette, le panier et la
   page de commande ; rien quand le coefficient vaut 1.
   Le centrage se fait dans `.pt-ajout-bloc`, une colonne qui ne prend que la
   largeur de son plus large enfant, le bouton : le rappel est donc centré sur
   le bouton lui-même, et non sur la colonne d'informations, qui est bien plus
   large. Le bloc reste aligné à gauche dans le flux (`width: fit-content`), le
   bouton ne change ni de largeur ni de nombre de lignes, et le compteur
   « − n + » que `site.js` insère juste après lui reste dans la même colonne.
   L'orange est `--ll-carotte-ink`, la teinte de texte accessible de la famille
   carotte (note 286) : 5,66 pour 1 sur le fond de la fiche. */
.pt-ajout-bloc {
  display: flex; flex-direction: column; align-items: center;
  width: fit-content;
}
/* Note 371 d'Alban (cas 52) : le rappel était centré sur le groupe « bouton
   d'ajout + cœur », donc décalé par rapport au bouton seul. Il s'aligne
   désormais sur le bord gauche du bouton, et la ligne entière est cadrée à
   gauche plutôt que centrée. */
.pt-coeff {
  margin: 8px 0 0;
  font-size: 13px; font-weight: 700;
  color: var(--ll-carotte-ink);
  text-align: left;
}
.pt-ajout-bloc { text-align: left; }
.pt-ajout-ligne { justify-content: flex-start; }

/* ---------- Fiche produit, lot L12 ----------
   Mêmes règles que le reste de la feuille : aucune couleur, aucun rayon et
   aucune ombre en dur, uniquement les jetons `--ll-*` du socle (#299). */

/* La tranche d'âge passe en pastille sous le titre, comme la maquette la met
   en avant. Le Ciel est le rôle de la mise en évidence dans la charte, et la
   Craie tient 4,5 pour 1 dessus. */
.pt-age-pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--ll-ciel-400);
  color: var(--ll-craie);
  font-weight: 700;
  font-size: 14px;
}

/* Le bouton d'ajout et le cœur de la liste de souhaits sur une même ligne,
   comme la maquette les pose. */
.pt-ajout-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pt-ajout-ligne .cat-coeur-form,
.pt-ajout-ligne a.cat-envie.cat-coeur { position: static; }
.pt-ajout-ligne .cat-envie.cat-coeur {
  width: 44px; height: 44px;
  border: 1px solid var(--gris-bordure);
  box-shadow: none;
}

@media (min-width: 861px) {
  /* Ordinateur : la colonne d'infos reste visible au défilement, pour que le
     bouton d'ajout ne parte jamais hors de l'écran pendant qu'on lit la
     galerie et les accordéons. `align-self: start` est indispensable : dans
     une grille, un élément étiré occupe toute la hauteur et `sticky` n'a
     alors plus de course. */
  .pt-infos { position: sticky; top: 16px; align-self: start; }
}

@media (max-width: 860px) {
  /* Mobile : le bloc d'ajout se colle en bas de l'écran, toujours accessible,
     comme la maquette le demande. Il reste dans le flux (`sticky`, pas
     `fixed`) : rien ne passe sous lui, et la page garde sa hauteur réelle. */
  .pt-ajout {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 16px;
    padding: 12px 0 10px;
    background: var(--beige);
    box-shadow: 0 -6px 16px var(--ombre);
  }
  .pt-ajout-titre { margin-top: 0; }
}

/* ---------- Fiche produit : mise en page de la maquette ----------
   Recette du 02/10/2026 (cas 10, note 419) : le lot L12 avait repris les
   détails de la maquette `fiche-produit/` (pastille d'âge, cœur, bouton
   collant) mais pas sa mise en page. Elle est reprise ici, dans l'ordre de la
   maquette : la fiche, la bande rose « ce jeu, sans l'acheter », « Vous
   aimerez aussi » remonté juste dessous, puis « Pourquoi on l'aime » (fond
   lila) à côté de « Tout savoir sur le jeu », et les avis des familles sur
   fond jasmin avec le sticker « Lib et Lou family ». Uniquement des jetons de
   la charte, aucune couleur en dur. */

/* La marque en surtitre, au-dessus du titre. */
.pt-marque {
  margin: 0 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.pt-marque a { text-decoration: none; }
.pt-titre { margin-bottom: 8px; }
/* Pastille d'âge et catégories sur une même rangée (consolidation FP-01). */
.pt-pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.pt-pastilles .pt-age-pastille, .pt-pastilles .pt-etiquettes { margin: 0; }

/* La bande rose, sur toute la largeur. */
.pt-encart {
  max-width: none; margin: 56px 0 0; padding: 56px 20px;
  border-radius: 0; background: var(--framboise); color: var(--craie);
  text-align: center;
}
.pt-encart h2 {
  font-family: var(--police-titre); font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 12px;
}
.pt-encart .pt-encart-arguments {
  list-style: none; margin: 0 auto 20px; padding: 0; max-width: 620px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px;
}
.pt-encart-arguments li + li::before { content: "·"; margin-right: 14px; }
.pt-encart .pt-encart-garanties {
  list-style: none; margin: 0 auto 24px; padding: 0; max-width: 900px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.pt-encart-garanties li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px 5px 8px; font-size: 13px;
  border: 1px solid var(--craie); border-radius: 999px;
}
.pt-encart-garanties img, .pt-encart-garanties svg { width: 28px; height: 28px; flex: none; object-fit: contain; }
/* #780 : dans la bande d'abonnement, les pictogrammes des garanties restent
   sans couleur (ils gardent la leur dans le bandeau des garanties du bas). */
.pt-encart-garanties img { filter: grayscale(1); }
.pt-encart-lien { margin: 14px 0 0; font-size: 13px; }

/* Groupe Vidéo (décision n° 97) : présent seulement si un lien est saisi. */
.pt-video {
  max-width: 1180px; margin: 32px auto 0; padding: 0 20px; text-align: center;
}
.pt-video h2 { font-family: var(--police-titre); font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 12px; }
.pt-video-bouton { display: inline-flex; align-items: center; gap: 10px; }
.pt-video-picto { flex: none; }
.pt-video-mention { margin: 10px 0 0; font-size: 13px; }

/* « Vous aimerez aussi », juste sous la bande. */
.pt-similaires { margin-top: 48px; }
.pt-similaires h2 { margin: 0 0 16px; }

/* « Pourquoi on l'aime » à côté de « Tout savoir sur le jeu ». */
.pt-milieu {
  max-width: 1180px; margin: 48px auto 0; padding: 32px 20px 0;
  border-top: 1px solid var(--gris-bordure);
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
.pt-milieu.est-seul { grid-template-columns: 1fr; }
.pt-milieu > .pt-avis-equipe, .pt-milieu > .pt-accordeons { max-width: none; margin: 0; }
.pt-avis-equipe {
  background: var(--lila); border-radius: 16px; padding: 24px;
}
.pt-avis-equipe h2 { font-size: 16px; margin: 0 0 8px; }
.pt-milieu > .pt-accordeons { padding: 0; }
.pt-accordeons h2 { margin: 0 0 8px; }

/* Les avis des familles sur toute la largeur, fond jasmin. */
.pt-avis-bloc {
  position: relative; max-width: none; margin: 64px 0 0;
  padding: 64px max(20px, calc((100% - 1140px) / 2));
  background: var(--jasmin); text-align: center;
}
.pt-avis-bloc h2 { font-family: var(--police-titre); margin: 0 0 4px; }
.pt-avis-bloc .pt-avis-tris { justify-content: center; }
.pt-avis-bloc .pt-avis-liste { text-align: left; }
.pt-avis-bloc .pt-avis-tri { background: var(--blanc); }
.pt-avis-bloc .pt-avis-tri.est-actif { background: var(--craie); }
.pt-avis-bloc .pt-avis-aucun { text-align: center; grid-column: 1 / -1; }
/* Résumé des avis relu par le SAV (décision n° 95), au-dessus des tris. */
.pt-avis-resume {
  max-width: 760px; margin: 20px auto 24px; padding: 20px 24px;
  background: var(--blanc); border-radius: 16px; text-align: left;
}
.pt-avis-resume h3 { font-family: var(--police-titre); font-size: 18px; margin: 0 0 8px; }
.pt-avis-resume-mention { margin: 10px 0 0; font-size: 12px; }

.pt-avis-sticker {
  position: absolute; top: 0; right: clamp(8px, 6vw, 90px);
  width: clamp(80px, 10vw, 140px); height: auto;
  transform: translateY(-45%) rotate(12deg);
}
/* Le bandeau des engagements suit les avis : même fond, un filet les sépare. */
.pt-avis-bloc + .pt-garanties { margin-top: 0; border-top: 1px solid var(--ll-jasmin-500); }

@media (max-width: 860px) {
  .pt-milieu { grid-template-columns: 1fr; gap: 24px; }
  .pt-encart { padding: 40px 16px; }
  .pt-avis-bloc { padding: 56px 16px 40px; }
}

/* ---------- Consolidation des maquettes, écran FP-01 ----------
   Recette d'Alban du 10/10/2026, cas 243 : fil d'Ariane « jeux et jouets ›
   catégorie › jeu », note suivie du nombre d'avis, pastille d'âge cerclée et
   catégories sur fond jasmin, lien « voir la description », accordéons
   marqués + et −, vidéo de règle sous « Pourquoi on l'aime ». Jetons de la
   charte uniquement. */
.pt-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pt-ariane a { font-weight: 400; }
.pt-ariane-sep { color: var(--craie); }
.pt-note-nb { text-decoration: underline; text-underline-offset: 2px; }
.pt-pastilles .pt-age-pastille {
  background: transparent; border: 1px solid var(--craie);
  font-weight: 400; font-size: 13px; padding: 4px 12px;
}
.pt-pastilles .pt-etiquettes a {
  background: var(--jasmin); border-color: var(--jasmin);
  font-size: 13px; padding: 4px 12px;
}
.pt-voir-description { margin: -6px 0 14px; font-size: 13px; }
.pt-accordeon summary {
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.pt-accordeon summary::-webkit-details-marker { display: none; }
.pt-accordeon summary::after { content: "+"; font-weight: 400; }
.pt-accordeon[open] summary::after { content: "−"; }
.pt-milieu-gauche { display: flex; flex-direction: column; gap: 32px; }
.pt-milieu-gauche .pt-video { max-width: none; margin: 0; padding: 0; text-align: left; }
.pt-milieu-gauche > .pt-avis-equipe { max-width: none; margin: 0; }

/* Décision d'Alban n° 135 (cas 243) : la valeur du jeu en magasin sous le
   titre, puis « compris dans votre formule ». Jamais barrée. */
.pt-valeur { margin: 0 0 12px; font-size: 15px; color: var(--craie); }
.pt-valeur-montant { font-weight: 700; }
.pt-valeur-formule { color: var(--citron-fonce); font-weight: 700; }

/* ---------- FP-01 à FP-03 au plus près de la charte rendue ----------
   Recette d'Alban du 13/10/2026, cas 243, note 701 (lot 1) : valeurs relevées
   dans le code de la maquette (`Parcours Boutique.dc.html`, bloc FP-01) avec
   la charte embarquée. Jetons de la charte uniquement.

   Galerie : la photo dans un cadre carré arrondi à 32 px, bordure Craie 50,
   fond Blanc 100, compteur « 1 / 4 » en pastille ; les vignettes de 72 px,
   arrondies à 16 px, sortent du cadre et passent en Craie 400 sur 2 px quand
   elles sont la photo courante (plus de Framboise, couleur de tag). */
.pt-galerie.pt-carrousel { background: none; border: 0; border-radius: 0; padding: 0; }
.pt-carrousel-cadre {
  aspect-ratio: 1; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--ll-craie-50); background: var(--ll-blanc-100);
}
.pt-galerie:not(.pt-carrousel) { border-radius: var(--radius-xl); border-color: var(--ll-craie-50); background: var(--ll-blanc-100); }
.pt-diapos { height: 100%; border-radius: 0; }
.pt-diapo img { height: 100%; max-height: none; padding: 8%; box-sizing: border-box; }
.pt-compteur {
  position: absolute; right: 14px; bottom: 14px; z-index: 1;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--ll-blanc-400); font-size: 12px; font-weight: 700;
}
.pt-vignettes { gap: 10px; margin-top: 12px; flex-wrap: wrap; overflow: visible; }
.pt-vignettes a {
  width: 72px; height: 72px; box-sizing: border-box;
  border: 1px solid var(--ll-craie-50); border-radius: var(--radius-md);
  background: var(--ll-blanc-100);
  transition: border-color var(--dur-fast) var(--ease-soft);
}
.pt-vignettes a[aria-current="true"] { border: 2px solid var(--ll-craie-400); }
.pt-vignettes img { width: 100%; height: 100%; object-fit: contain; padding: 8%; box-sizing: border-box; }
.pt-vignette-video { width: 72px; height: 72px; border-radius: var(--radius-md); font-size: 12px; gap: 2px; }

/* Fil d'Ariane : 12 px Craie 300, liens soulignés en Craie et jamais en
   bleu (recette design du 16/10/2026, #777, règle inscrite dans
   docs/charte-graphique.md), le jeu courant en gras. */
.pt-ariane { font-size: 12px; color: var(--ll-craie-300); gap: 4px 8px; }
.pt-ariane a {
  color: var(--ll-craie-400); font-weight: 400;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--ll-craie-400);
}
.pt-ariane a:hover, .pt-ariane a:active { text-decoration-color: var(--ll-craie-200); font-weight: 700; }
.pt-ariane [aria-current="page"] { color: var(--ll-craie-400); font-weight: 700; }
.pt-ariane-sep { color: var(--ll-craie-300); }

/* Marque en surtitre Neulis Bold, titre Neulis Regular 26 à 40 px, note. */
.pt-marque { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; margin: 0 0 6px; }
.pt-titre {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; margin: 0 0 6px;
}
.pt-note { gap: 8px; margin: 0 0 18px; }
.pt-note-nb { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* Pastilles : l'âge cerclé de Craie sur 1,5 px avec le pictogramme « enfant »,
   puis les catégories Jasmin, toutes sur la même rangée (la liste des
   catégories ne fait plus bloc : ses éléments rejoignent la rangée). */
.pt-pastilles { gap: 8px; margin: 0 0 18px; }
.pt-pastilles .pt-etiquettes { display: contents; }
.pt-pastilles .pt-age-pastille {
  gap: 6px; padding: 6px 14px 6px 10px;
  border: 1.5px solid var(--ll-craie-400); background: transparent;
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.pt-age-picto { flex: none; }
.pt-pastilles .pt-etiquettes a {
  padding: 7px 14px; border: 0; border-radius: var(--radius-pill);
  background: var(--ll-jasmin); font-size: 13px; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-soft);
}
.pt-pastilles .pt-etiquettes a:hover { background: var(--ll-jasmin-400); }

/* Description courte : 15 px, interligne 1,6, 56 caractères au plus. */
.pt-description-courte { font-size: 15px; line-height: 1.6; max-width: 56ch; margin: 0 0 6px; }

/* « Voir la description » : bouton tertiaire de la charte, 13 px. */
.pt-voir-description { margin: -10px 0 18px; font-size: 13px; }
.pt-voir-description a {
  font-weight: 700; color: var(--ll-craie-400);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--ll-ciel-400);
}
.pt-voir-description a:hover { text-decoration-color: var(--ll-ciel-200); }

/* Pastilles d'état FP-02 et FP-03 : horloge de la charte à 20 px. */
.pt-horloge { width: 20px; height: 20px; flex: none; }

/* Ajout : le grand bouton de la charte (`btn--lg`) prend toute la largeur de
   la colonne, le cœur est un rond de 52 px cerclé de Craie 400 sur 1,5 px. */
.pt-ajout-bloc { width: 100%; align-items: stretch; }
.pt-ajout-ligne { flex-wrap: nowrap; gap: 10px; width: 100%; }
.pt-ajout-ligne > .btn {
  flex: 1; min-width: 0;
  font-size: var(--fs-btn-lg); line-height: var(--lh-btn-lg); padding: 16px 24px;
}
.pt-ajout-ligne .cat-envie.cat-coeur {
  width: 52px; height: 52px; flex: none;
  border: 1.5px solid var(--ll-craie-400); background: var(--ll-blanc-400);
}
/* FP-03 : « voir des jeux similaires disponibles » en bouton tertiaire. */
.pt-indispo-lien {
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: var(--ll-ciel-400);
}
.pt-indispo-lien:hover { text-decoration-color: var(--ll-ciel-200); }

/* Bande rose (visiteur) : titre Neulis Regular 26 à 36 px, garanties
   cerclées de Craie sur 1,5 px en gras, grand bouton Jasmin, lien tertiaire. */
.pt-encart h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.15; text-wrap: balance;
}
.pt-encart-garanties li {
  gap: 5px; padding: 4px 9px; border: 1.5px solid var(--ll-craie-400);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.pt-encart > .btn { font-size: var(--fs-btn-lg); line-height: var(--lh-btn-lg); padding: 18px 40px; }
.pt-encart-lien a {
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: var(--ll-ciel-400);
}
.pt-encart-lien a:hover { text-decoration-color: var(--ll-ciel-200); }

/* « Vous aimerez aussi » : titre Neulis Regular 22 à 30 px ; sur une bande
   Ciel pleine largeur pour une personne connectée. En mobile, les cartes
   défilent à l'horizontale, 172 px chacune, comme la maquette. */
.pt-similaires h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; margin: 0 0 20px;
}
.pt-similaires.est-bande { max-width: none; margin: 48px 0 0; padding: 56px 20px; background: var(--ll-ciel); }
.pt-similaires.est-bande > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) {
  .pt-similaires-grille {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 2px 20px 8px; scroll-padding: 0 20px; scrollbar-width: none;
  }
  .pt-similaires-grille > * { flex: none; width: 172px; scroll-snap-align: start; }
  .pt-similaires.est-bande > .pt-similaires-grille { margin-left: -20px; margin-right: -20px; max-width: none; }
}

/* Bas de fiche (maquette FP-01, blocs « fp-desc » et « fp-avis ») :
   - « Pourquoi on l'aime » : encadré Lila arrondi à 32 px, 28 px 32 px,
     titre Comfortaa Bold 15 px, texte 14 px ;
   - titres de section en Neulis Regular, 20 à 28 px (vidéo, « tout savoir ») ;
   - accordéons entre filets Craie 400, intitulés Bold 15 px sur 16 px de
     hauteur, contenu 14 px Craie 300 ;
   - avis sur bande Jasmin 96 / 80 px, titre Neulis Regular 24 à 36 px, tris
     en pastilles Bold 13 px, cartes Blanc cassé arrondies à 24 px. */
.pt-milieu { padding-top: 56px; gap: 48px; border-top: 0; }
.pt-avis-equipe { border-radius: var(--radius-xl); padding: 28px 32px; }
.pt-avis-equipe h2 { font-family: var(--font-sans); font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.pt-avis-equipe p { font-size: 14px; line-height: 1.55; }
.pt-accordeons h2, .pt-video h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; margin: 0 0 16px;
}
.pt-accordeons h2 + .pt-accordeon { border-top: 1px solid var(--ll-craie-400); }
.pt-accordeon { border-bottom: 1px solid var(--ll-craie-400); padding: 0; }
.pt-accordeon summary { padding: 16px 0; font-size: 15px; font-weight: 700; }
.pt-accordeon[open] > :not(summary) { padding-bottom: 16px; font-size: 14px; line-height: 1.6; color: var(--ll-craie-300); }
.pt-video-ecran, .pt-video-ecran iframe { border-radius: var(--radius-xl); }

.pt-avis-bloc { padding-top: 96px; padding-bottom: 80px; }
.pt-avis-bloc h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 3vw, 36px); line-height: 1.15;
}
.pt-avis-bloc .pt-avis-soustitre { font-size: 15px; margin: 0 0 28px; }
.pt-avis-bloc .pt-avis-tri {
  padding: 8px 16px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--ll-craie-400); background: var(--ll-blanc-400); color: var(--ll-craie-400);
}
.pt-avis-bloc .pt-avis-tri.est-actif { background: var(--ll-craie-400); color: var(--ll-blanc-400); }
.pt-avis-bloc .pt-avis-liste { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pt-avis-bloc .pt-avis {
  border: 0; border-radius: var(--radius-lg); padding: 22px; background: var(--ll-blanc-400);
  display: flex; flex-direction: column; gap: 8px;
}
.pt-avis-bloc .pt-avis-texte { font-size: 14px; line-height: 1.5; }
.pt-avis-bloc .pt-avis-date { font-size: 12px; color: var(--ll-craie-300); }

/* « Déjà loué le JJ/MM/AA » (décision n° 145 d'Alban) : dans la rangée des
   pastilles, même pictogramme que la pastille des vignettes du catalogue, en
   Ciel, le rôle de la mise en évidence dans la charte. */
.pt-deja-loue {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 6px 14px 6px 6px; border-radius: var(--radius-pill);
  background: var(--ll-ciel-400); color: var(--ll-craie);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.pt-deja-loue .cat-carte-loue-picto { background: var(--blanc); }

/* Article volumineux (recette d'Alban du 15/10/2026, cas 170, note 969) :
   sous le bouton d'ajout, au-dessus du rappel du coefficient, cadré à gauche
   comme lui. Couleur du texte courant : une information, pas une alerte. */
.pt-ajout-bloc .pt-volumineux {
  margin: 8px 0 0;
  font-size: 13px; line-height: 1.4;
  text-align: left;
}

/* Note 1037 (cas 293) : texte de fin de vie d'un jeu « à sortir ». */
.pt-a-sortir {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  padding: 10px 16px 10px 12px; border-radius: 16px; background: var(--ll-carotte-50);
  font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--craie);
}

/* Décision n° 169 (cas 293) : un jeu archivé garde sa fiche ; cet encart
   tient la place des boutons de commande et mène aux jeux similaires. */
.pt-archive {
  display: flex; flex-direction: column; gap: 6px; margin: 4px 0 16px;
  padding: 14px 16px; border-radius: 16px; background: var(--blanc); border: 1.5px solid var(--gris-bordure);
}
.pt-archive-texte { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--craie); }
.pt-archive-lien {
  align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--craie);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: var(--ll-ciel-400);
}
.pt-archive-lien:hover { text-decoration-color: var(--ll-ciel-200); }
#pt-similaires, #pt-a-savoir { scroll-margin-top: 110px; }

/* #682 (FP-03) : jeu indisponible, bouton Lila « Victime de son succès »
   qui l'ajoute à la liste de souhaits, flèche à droite. Le texte Craie 400
   sur Lila tient 6,2 pour 1. */
.pt-ajout-ligne > .pt-souhait-form { flex: 1; min-width: 0; display: flex; }
.btn.pt-souhait {
  flex: 1; min-width: 0; min-height: 52px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lila); color: var(--craie); text-align: left;
}
.btn.pt-souhait:hover, .btn.pt-souhait:focus-visible { background: var(--ll-lila-300); color: var(--craie); }
.pt-souhait-textes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-souhait-haut {
  font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 14px;
  text-transform: none; letter-spacing: 0;
}
.pt-souhait-texte { font-size: 13px; line-height: 16px; letter-spacing: .08em; }
.pt-souhait-fleche { flex: none; }
.pt-souhait .pt-souhait-oui,
.pt-souhait[aria-pressed="true"] .pt-souhait-non { display: none; }
.pt-souhait[aria-pressed="true"] .pt-souhait-oui { display: inline; }

/* Sticker « Loue-moi si tu peux » de la maquette FP-01 (recette d'Alban du
   15/10/2026, ticket #685) : à cheval sur le coin haut gauche de la photo,
   incliné, par-dessus le cadre arrondi qui coupe ce qui dépasse (il est donc
   posé sur `.pt-galerie`, pas dans le cadre). Décor : il ne prend aucun clic. */
.pt-galerie { position: relative; }
.pt-galerie .pt-sticker {
  position: absolute; z-index: 2; top: 16px; left: -10px;
  width: clamp(120px, 30%, 190px); height: auto; padding: 0;
  background: none; mix-blend-mode: normal; object-fit: contain;
  transform: rotate(-14deg); transform-origin: 30% 50%;
  pointer-events: none;
}

/* Décision d'Alban n° 227 : « Me prévenir de son retour », sous le bouton
   violet d'un jeu indisponible, cadré à gauche comme le rappel du coefficient.
   Le style est celui du bouton tertiaire du socle : un lien souligné. */
.pt-alerte-retour { margin: 10px 0 0; align-self: flex-start; }
.pt-alerte-retour .btn-tertiaire { padding: 0; font-size: 14px; }


/* ---- retour-evaluation.css ---- */
/* ---------- RE-02 « Évaluer un jeu » d'après la consolidation ----------
   Cas 243, note 701 d'Alban (point 2), bloc « 1d/1e évaluer » de
   `consolidation/export-claude-design/Parcours Retour.dc.html`. Feuille
   propre à l'écran d'évaluation : servie après `compte.css`, elle reprend
   par-dessus les règles du bilan de retour (lot L9, #337) sous `.retour-eval`
   (l'écran) et `.retour-jeu` (ses champs, partagés avec la modification
   d'une déclaration). RE-01, RE-03 et RE-04 n'en héritent pas.

   Valeurs relevées dans le code de la maquette :
   - barre du haut : « ‹ mes jeux » en bouton tertiaire 13 px, « jeu N sur
     M » 12 px Craie 200, filet bas ;
   - photo de 80 px arrondie à 16 px, nom Neulis Regular 22 px, marque 13 px
     Craie 300 ;
   - colonnes : grille `auto-fit` de 320 px au moins, 20 px d'écart ;
   - tuiles : Blanc 100, Craie 50 sur 1 px (Craie 400 sur 2 px une fois
     choisie), arrondi 16 px, pictogramme dans un rond Jasmin de 32 px, titre
     gras 13 px, aide 12 px Craie 300 ;
   - avis : aplat Ciel 400 arrondi à 24 px, deux étoiles décoratives dans des
     ronds Jasmin de 40 et 36 px penchés de 12° et -10°, titre Neulis 20 px,
     étoiles de 36 px (pleines Carotte 400, vides Blanc 100 sur le Ciel, comme
     la maquette qui remplace le Craie 50 du composant), zone de texte Blanc
     100 de 72 px ;
   - état : carte Blanc 100 bordée de Craie 50, arrondie à 24 px, titre
     Neulis 18 px, crans de 28 px reliés d'un trait Craie 50 de 2 px, du
     Carotte au Citron, cran choisi cerclé de Craie 400 avec sa coche ;
     bascule `.seg` de la planche, « oui » Citron 400, « non » Carotte 400 ;
     manques sur aplat Carotte 400 arrondi à 16 px ;
   - pied : barre collée en bas, filet haut, grand bouton de 400 px au plus,
     « * obligatoire » 12 px Craie 300. */

.retour-eval { max-width: 960px; }
.retour-eval .retour-formulaire-jeu { max-width: none; }

.retour-eval-barre {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--color-border);
}
.retour-eval-barre .btn-tertiaire { font-size: 13px; padding-left: 0; white-space: normal; }
.retour-eval-compteur { font-size: 12px; color: var(--ll-craie-200); }

.retour-eval .retour-entete { gap: 12px; margin: 0 0 20px; }
.retour-eval .retour-entete .retour-jeu-photo { width: 80px; height: 80px; border-radius: var(--radius-md); }
.retour-eval .retour-entete-nom { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.15; }
.retour-eval .retour-entete-aide { font-size: 13px; color: var(--ll-craie-300); }

/* Ticket #900 (Alban, 20/10/2026) : décision et avis toujours au-dessus de
   l'état du jeu, à toutes les largeurs. Les deux colonnes côte à côte
   mettaient l'état à droite dès 660 px. */
.retour-eval .retour-jeu-colonnes { display: flex; flex-direction: column; gap: 20px; }
.retour-jeu-decision { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.retour-jeu-decision > .compte-aide { margin: 0; }

.retour-jeu .retour-question { margin: 0; font-size: 14px; font-weight: 700; }
.retour-jeu .retour-tuiles { gap: 6px; align-items: stretch; }
.retour-jeu .retour-tuile { gap: 6px; padding: 10px 6px; border: 1px solid var(--ll-craie-50); border-radius: var(--radius-md); background: var(--ll-blanc-100); }
.retour-jeu .retour-tuile:has(input:checked) { border: 2px solid var(--ll-craie-400); padding: 9px 5px; }
.retour-tuile-picto {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--ll-jasmin-400); color: var(--ll-craie-400);
}
.retour-jeu .retour-tuile-titre { font-size: 13px; line-height: 1.2; }
.retour-jeu .retour-tuile-aide { font-size: 12px; line-height: 1.3; color: var(--ll-craie-300); }
.retour-jeu .retour-tuile.est-bloquee .retour-tuile-picto { background: var(--ll-craie-50); }

/* L'avis, sur l'aplat Ciel de la maquette. */
.retour-jeu .retour-avis {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 12px 0 0; padding: 24px 18px 20px; border-radius: var(--radius-lg); background: var(--ll-ciel-400);
}
.retour-avis-deco {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ll-jasmin-400); color: var(--ll-craie-400);
}
.retour-avis-deco.est-haut { top: -14px; right: -8px; width: 40px; height: 40px; transform: rotate(12deg); }
.retour-avis-deco.est-bas { bottom: -14px; left: -8px; width: 36px; height: 36px; transform: rotate(-10deg); }
.retour-jeu .retour-avis-titre { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.2; }
.retour-jeu .retour-avis-label { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; }
.retour-jeu .retour-avis-label:first-of-type { margin-bottom: -4px; }
.retour-jeu .retour-facultatif { font-weight: 400; }
.retour-jeu .retour-avis textarea {
  display: block; width: 100%; min-height: 72px; padding: 12px 16px; text-align: left;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.45; color: var(--ll-craie-400);
  background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-400); border-radius: var(--radius-sm); resize: vertical;
}
.retour-jeu textarea::placeholder { color: var(--ll-craie-100); font-style: italic; }
.retour-jeu textarea:focus { outline: none; border-color: var(--ll-ciel-400); box-shadow: 0 0 0 3px var(--ll-ciel-100); }
.retour-jeu .retour-avis textarea:focus { border-color: var(--ll-craie-400); box-shadow: 0 0 0 3px var(--ll-ciel-100); }

/* Étoiles de saisie : les `.star` de la charte, écrites à l'envers dans le
   HTML pour que `~` colore la note choisie et celles qui la précèdent. */
.retour-jeu .retour-etoiles { margin: 0; gap: 2px; flex-direction: row-reverse; }
.retour-jeu .retour-etoile-saisie,
.retour-jeu .retour-etoiles .retour-etoile-champ ~ .retour-etoile-saisie,
.retour-jeu .retour-etoiles .retour-etoile-saisie:hover ~ .retour-etoile-saisie,
.retour-jeu .retour-etoiles:hover .retour-etoile-saisie { width: auto; height: auto; background: none; clip-path: none; display: flex; cursor: pointer; }
.retour-jeu .retour-etoile-saisie .star { width: 36px; height: 36px; fill: var(--ll-blanc-100); }
.retour-jeu .retour-etoile-champ:checked ~ .retour-etoile-saisie .star,
.retour-jeu .retour-etoile-champ:checked + .retour-etoile-saisie .star { fill: var(--ll-carotte-400); }
.retour-jeu .retour-etoile-saisie:hover .star,
.retour-jeu .retour-etoile-saisie:hover ~ .retour-etoile-saisie .star { fill: var(--ll-carotte-400); }
.retour-jeu .retour-etoile-champ:focus-visible + .retour-etoile-saisie { outline: 2px solid var(--ll-craie-400); outline-offset: 2px; border-radius: 8px; }

/* L'état du jeu, en carte blanche. */
.retour-jeu .retour-etat {
  display: flex; flex-direction: column; gap: 8px; margin: 0;
  padding: 14px 16px; border-radius: var(--radius-lg); background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-50);
}
.retour-jeu .retour-etat-titre { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.2; }
.retour-jeu .retour-etat > .compte-aide { margin: -6px 0 0; font-size: 12px; line-height: 1.35; color: var(--ll-craie-300); }
.retour-jeu .retour-echelle { position: relative; gap: 2px; margin: 0; padding-top: 4px; }
.retour-jeu .retour-echelle::before { content: ""; position: absolute; left: 10%; right: 10%; top: 17px; height: 2px; background: var(--ll-craie-50); }
.retour-jeu .retour-etat-cran { position: relative; gap: 4px; }
.retour-jeu .retour-etat-point {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 28px; height: 28px; border: 2px solid transparent; color: var(--ll-craie-400);
}
.retour-etat-coche { display: none; }
.retour-jeu .retour-etat-cran:has(input:checked) .retour-etat-coche { display: block; }
.retour-jeu .retour-etat-cran:nth-child(1) .retour-etat-point,
.retour-jeu .retour-etat-cran:nth-child(2) .retour-etat-point { background: var(--ll-carotte-400); }
.retour-jeu .retour-etat-cran:nth-child(3) .retour-etat-point { background: var(--ll-jasmin-400); }
.retour-jeu .retour-etat-cran:nth-child(4) .retour-etat-point,
.retour-jeu .retour-etat-cran:nth-child(5) .retour-etat-point { background: var(--ll-citron-400); }
.retour-jeu .retour-etat-cran:has(input:checked) .retour-etat-point { border-color: var(--ll-craie-400); }
.retour-jeu .retour-etat-nom { font-size: 12px; line-height: 1.15; color: var(--ll-craie-300); }
.retour-jeu .retour-etat-cran:has(input:checked) .retour-etat-nom { font-weight: 700; color: var(--ll-craie-400); }
.retour-jeu .retour-etat-legende { margin: 0; text-align: center; font-size: 12px; color: var(--ll-craie-400); min-height: 0; }

/* « Le jeu est-il complet ? » : la bascule `.seg` de la planche. */
.retour-jeu .retour-complet { margin: 0; padding-top: 10px; gap: 12px; font-size: 13px; border-top: 1px solid var(--ll-craie-50); }
.retour-jeu .retour-bascule { border: 1px solid var(--ll-craie-50); background: var(--ll-blanc-50); }
.retour-jeu .retour-bascule label { padding: 7px 16px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--ll-craie-400); }
.retour-jeu .retour-bascule input:checked + label { color: var(--ll-craie-400); font-weight: 700; }
.retour-jeu .retour-bascule input[value="0"]:checked + label { background: var(--ll-citron-400); }
.retour-jeu .retour-bascule input[value="1"]:checked + label { background: var(--ll-carotte-400); }

/* Les manques, sur l'aplat Carotte. */
.retour-jeu .retour-manque { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--ll-carotte-400); }
.retour-jeu .retour-jeu-decision ~ .retour-etat .retour-manque { margin-top: 0; }
.retour-jeu .retour-manque-label { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; font-size: 12px; font-weight: 700; }
.retour-jeu .retour-manque textarea {
  display: block; min-height: 0; padding: 8px 12px; font-family: var(--font-sans); font-size: 12px; line-height: 1.4;
  background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-400); border-radius: var(--radius-sm);
}

.retour-jeu .retour-garde-mot { margin: 12px 0 0; }

/* Le pied, collé en bas de l'écran comme la maquette. */
.retour-eval-pied {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 24px 0 0; padding: 12px 0 22px; background: var(--ll-blanc-casse); border-top: 1px solid var(--color-border);
}
.retour-eval-pied .retour-cta { width: 100%; max-width: 400px; }
.retour-eval-pied .retour-pied-aide { margin: 0; font-size: 12px; color: var(--ll-craie-300); }


/* ---- selection-avant-compte.css ---- */
/* AB-12, AB-11 et AB-13 de la consolidation : la sélection proposée avant la
   création du compte, en variante A/B (point 10 du README de la
   consolidation, recette d'Alban du 14/10/2026, cas 243). Valeurs relevées
   dans `Parcours Abonnement.dc.html` (commit bc77a9d), jetons de la charte
   uniquement. Sélecteurs `sac-*` propres à ces trois écrans. */

/* AB-13 s'étale sur 960 px comme la maquette ; les deux autres gardent la
   colonne du tunnel. */
.compte-carte:has(.sac-ecran-suggestion),
.page-enveloppe-tunnel .compte-carte:has(.funnel-ecran.sac-ecran-suggestion) { max-width: 960px; }

.sac-titre { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.15; text-wrap: balance; }
.sac-titre em { font-style: italic; font-weight: 600; }

/* La barre collante du bas : grand bouton, liens tertiaires, sur Blanc cassé. */
.sac-barre {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 20px -8px 0; padding: 12px 20px 14px;
  background: var(--ll-blanc-casse);
  border-top: 1px solid var(--color-border);
  border-radius: 24px 24px 0 0;
}
.sac-barre .btn-grand { width: 100%; max-width: 400px; }
.sac-barre .btn-tertiaire { font-size: 13px; text-align: center; white-space: normal; }
.sac-note { margin: 12px auto 0; max-width: 34em; font-size: 12px; line-height: 1.4; text-align: center; color: var(--ll-craie-300); }

/* ------------------------------------------------------------ AB-11 */
.sac-pret { display: flex; flex-direction: column; gap: 16px; }
.sac-ecran-selection { position: relative; }
/* Le sticker « mon Lib et Lou » sur la ligne du retour, comme la maquette ;
   le titre se tient à l'écart de lui. */
.sac-sticker {
  position: absolute; top: -10px; right: -4px; z-index: 1;
  width: clamp(64px, 18vw, 88px); height: auto;
  transform: rotate(10deg); pointer-events: none;
}
.sac-ecran-selection .sac-titre { padding: 0 52px; }
.sac-pret-phrase { margin-bottom: 0; font-size: 14px; line-height: 1.4; opacity: 1; }
.sac-tuiles {
  display: grid; gap: 8px; margin: 0; padding: 6px 0 0; list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sac-tuiles[data-colonnes="1"] { grid-template-columns: minmax(0, 1fr); }
.sac-tuiles[data-colonnes="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sac-tuile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 120px; padding: 12px 8px; border-radius: 24px;
}
.sac-tuiles-seule .sac-tuile { height: 150px; }
.sac-tuiles-moyenne .sac-tuile { height: 140px; }
.sac-tuiles-petite .sac-tuile { height: 104px; }
.sac-tuile-ciel { background: var(--ll-ciel-400); }
.sac-tuile-framboise { background: var(--ll-framboise-400); }
.sac-tuile-jasmin { background: var(--ll-jasmin-400); }
.sac-tuile-lila { background: var(--ll-lila-400); }
.sac-tuile-carotte { background: var(--ll-carotte-400); }
.sac-tuile-halo {
  position: absolute; inset: auto 14% 16% 14%; height: 34%;
  border-radius: 16px; background: var(--ll-blanc-casse); opacity: .5; filter: blur(7px);
}
.sac-tuile-visage { position: relative; width: 64px; height: auto; }
.sac-tuiles-seule .sac-tuile-visage { width: 96px; }
.sac-tuiles-petite .sac-tuile-visage { width: 48px; }
.sac-tuile-nom {
  position: relative; max-width: 100%;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.15;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sac-tuiles-seule .sac-tuile-nom { font-size: 18px; }
.sac-tuiles-petite .sac-tuile-nom { font-size: 13px; }
.sac-tuile-pastille {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--ll-blanc-casse); color: var(--ll-craie-400);
  font-size: 11px; font-weight: 700;
}
.sac-promesses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sac-promesse {
  display: flex; flex-direction: column; gap: 4px; margin: 0;
  padding: 12px 14px; border-radius: 16px;
  background: var(--ll-blanc-100); border: 1px solid var(--color-border);
}
.sac-promesse b { font-family: var(--font-display); font-size: 15px; }
.sac-promesse span { font-size: 12px; line-height: 1.35; }
.sac-reassurances {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin: 0; padding: 0; list-style: none; text-align: center;
}
.sac-reassurances li {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 12px; line-height: 1.25; font-weight: 700;
}
.sac-reassurances img { width: 16px; height: 16px; }

/* ------------------------------------------------------------ AB-12 */
.sac-ecran-preparation { text-align: center; }
.sac-ecran-preparation .sac-titre { font-size: 26px; line-height: 1.2; margin: 24px 0 0; }
.sac-preparation { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 0 32px; }
.sac-roue {
  position: relative; width: 240px; height: 240px; margin: 0; padding: 0; list-style: none;
  animation: sac-tourne 14s linear infinite;
}
.sac-roue li {
  --angle: calc(var(--i) * 45deg - 90deg);
  position: absolute; left: 86px; top: 86px; width: 68px; height: 68px;
  transform: rotate(var(--angle)) translate(100px) rotate(calc(-1 * var(--angle)));
}
.sac-roue-carte {
  display: block; width: 100%; height: 100%; overflow: hidden;
  border-radius: 16px; background: var(--ll-blanc-100);
  border: 1px solid var(--ll-craie-50); box-shadow: var(--shadow);
  animation: sac-tourne 14s linear infinite reverse;
}
.sac-roue li:nth-child(odd) .sac-roue-carte img { transform: rotate(-5deg); }
.sac-roue-carte img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sac-roue li:nth-child(5n+1) .sac-roue-carte { background: var(--ll-jasmin-100); }
.sac-roue li:nth-child(5n+2) .sac-roue-carte { background: var(--ll-ciel-100); }
.sac-roue li:nth-child(5n+3) .sac-roue-carte { background: var(--ll-framboise-100); }
.sac-roue li:nth-child(5n+4) .sac-roue-carte { background: var(--ll-lila-100); }
.sac-roue li:nth-child(5n) .sac-roue-carte { background: var(--ll-carotte-100); }
.sac-messages { position: relative; min-height: 20px; width: 100%; margin: 0; font-size: 14px; color: var(--ll-craie-300); }
.sac-messages span {
  position: absolute; inset: 0; opacity: 0;
  animation: sac-message 4s linear infinite; animation-delay: calc(var(--i) * 1s);
}
.sac-sans-attendre { margin: 0; }
@keyframes sac-tourne { to { transform: rotate(360deg); } }
@keyframes sac-message { 0%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sac-roue, .sac-roue-carte { animation: none; }
  .sac-messages span { animation: none; }
  .sac-messages span:first-child { opacity: 1; }
}

/* ------------------------------------------------------------ AB-13 */
.sac-suggestion { display: flex; flex-direction: column; gap: 20px; }
.sac-suggestion .funnel-sous-titre { margin-bottom: 0; font-size: 14px; line-height: 1.45; color: var(--ll-craie-300); opacity: 1; }
.sac-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.sac-carte {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 24px;
  background: var(--color-bg-raised); border: 1px solid var(--color-border-card);
}
.sac-pourquoi summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
  padding: 0 4px; list-style: none; cursor: pointer;
}
.sac-pourquoi summary::-webkit-details-marker { display: none; }
/* Note 923 : l'en-tête ne porte plus que « pour Léa », sans « pourquoi ? ». */
p.sac-pourquoi { margin: 0; padding: 0 4px; }
.sac-pour { font-size: 12px; font-weight: 700; }
.sac-pourquoi-lien {
  font-size: 12px; font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--ll-ciel-400);
}
.sac-pourquoi summary:hover .sac-pourquoi-lien { text-decoration-color: var(--ll-ciel-200); }
.sac-pourquoi summary:focus-visible { outline: 2px solid var(--ll-ciel-400); outline-offset: 2px; border-radius: 8px; }
/* L'explication se pose par-dessus la carte (la maquette l'ouvre en
   feuille) : les cartes gardent toutes la même hauteur. */
.sac-pourquoi-corps {
  position: absolute; top: 36px; left: 6px; right: 6px; z-index: 3;
  max-height: calc(100% - 42px); overflow: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 16px;
  background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-50); box-shadow: var(--shadow);
  font-size: 13px; line-height: 1.5;
}
.sac-pourquoi-corps p { margin: 0; }
.sac-pourquoi-titre { font-family: var(--font-display); font-size: 17px; line-height: 1.2; }
.sac-pourquoi-titre em { font-style: italic; font-weight: 600; }
.sac-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sac-tag {
  padding: 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--ll-craie-400); font-size: 11px; font-weight: 700;
}
.sac-tag-jasmin { background: var(--ll-jasmin-400); border-color: var(--ll-jasmin-400); }
.sac-carte-image {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: 16px; background: var(--ll-blanc-200);
}
.sac-carte-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sac-carte-nom { margin: 0; padding: 0 4px; min-height: 36px; font-weight: 700; font-size: 14px; line-height: 1.25; }
.sac-carte-nom a { color: inherit; text-decoration: none; }
.sac-carte-nom a:hover { text-decoration: underline; }
.sac-modifier {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: auto; padding: 8px 12px; font-size: 13px; border: none;
}
.sac-modifier img { width: 16px; height: 16px; }

@media (min-width: 720px) {
  .sac-titre { font-size: 32px; }
  .sac-ecran-preparation .sac-titre { font-size: 30px; }
  .sac-grille { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
}


/* ---- tunnel-abonnement.css ---- */
/* ==========================================================================
   Tunnel d'inscription, seconde moitié : AB-14, AB-15, AB-17 à AB-21 et le
   module Stripe de l'abonnement, d'après la consolidation et sa charte rendue
   (recette d'Alban, cas 243, note 701, point 2). Valeurs relevées dans
   `Parcours Abonnement.dc.html` et `Composant Stripe Checkout.dc.html`.
   Feuille propre à ces écrans, concaténée après `compte.css` qu'elle
   précise : uniquement des jetons de la charte, aucune couleur en dur.
   ========================================================================== */

/* ---------- AB-14 · créez votre compte ---------- */
/* La colonne de la maquette : 480 px moins 20 px de marge de chaque côté. */
.signup-ecran { max-width: 440px; }
/* Les yeux pleins 06 de la charte, 150 × 48 px, en masque Craie. */
.signup-visage {
  display: block; margin: 0 auto; width: 150px; height: 48px;
  background: var(--ll-craie-400);
  -webkit-mask: url(/assets/cc-yeux-plein-06.svg) center / contain no-repeat;
  mask: url(/assets/cc-yeux-plein-06.svg) center / contain no-repeat;
}
.signup-ecran .funnel-sous-titre { font-size: 14px; line-height: 1.45; color: var(--ll-craie-300); text-align: center; }
.signup-ecran .signup-titre { text-align: center; }
.signup-separateur { font-size: 12px; color: var(--ll-craie-300); opacity: 1; }
.signup-separateur::before, .signup-separateur::after { background: var(--color-border); }
.signup-formulaire .compte-champ label { font-size: 13px; font-weight: 700; }
/* Les conditions et la lettre d'information : la case à cocher de la planche
   (`.check .cb`, 18 px, arrondi 5 px, contour Craie 400 de 1,5 px, coche Ciel
   400), comme la maquette. Ce sont toujours deux vraies cases, identiques
   (note 401). */
.signup-interrupteur { gap: 10px; font-size: 13px; line-height: 1.4; margin: 0 0 18px; }
.signup-interrupteur input {
  width: 18px; height: 18px; flex: 0 0 18px; margin: 1px 0 0;
  border-radius: 5px; border: 1.5px solid var(--ll-craie-400); background: var(--ll-blanc-100);
  display: inline-flex; align-items: center; justify-content: center;
}
.signup-interrupteur input::after {
  content: "✓"; position: static; width: auto; height: auto; border-radius: 0;
  background: none; color: transparent; font-size: 12px; font-weight: 700; line-height: 1;
  transform: none; transition: none;
}
.signup-interrupteur input:checked { background: var(--ll-blanc-100); border-color: var(--ll-ciel-400); }
.signup-interrupteur input:checked::after { color: var(--ll-ciel-400); transform: none; }
.signup-interrupteur input[aria-invalid="true"] { border-color: var(--ll-carotte-400); }
.signup-bascule { font-size: 13px; }

/* ---------- AB-15 · regardez votre boîte mail ---------- */
.signup-envoye .funnel-precedent a {
  font-weight: 700; font-size: 13px; color: var(--ll-craie-400);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--ll-ciel-400);
}
/* Le code de secours sans carte autour : l'intitulé gras 13 px, le champ de
   240 px centré, 22 px gras espacé de 0,4 em, comme la maquette. */
.signup-carte-code { background: none; border: 0; border-radius: 0; padding: 0; }
.signup-carte-code h2 { font-family: var(--font-sans); font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.signup-carte-code .compte-formulaire { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.signup-champ-code { margin: 0; width: 100%; max-width: 240px; }
.signup-champ-code input {
  font-size: 22px; letter-spacing: 0.4em; padding-left: calc(16px + 0.4em);
  background: var(--ll-blanc-100);
}
.signup-carte-code .compte-aide { font-size: 12px; color: var(--ll-craie-300); }
.signup-renvoi { font-size: 13px; }
.signup-renvoi-bouton {
  font-weight: 700; color: var(--ll-craie-400);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--ll-ciel-400);
}
.signup-renvoi-bouton[disabled] { text-decoration: underline; text-decoration-color: var(--ll-ciel-400); opacity: 1; cursor: default; }
.signup-renvoi { color: var(--ll-craie-400); }

/* ---------- AB-17 · je choisis ma formule ---------- */
.funnel-formule-choix .funnel-etape-choix {
  font-family: var(--font-display); font-weight: 400; font-size: 17px; margin: 24px 0 10px;
}
.funnel-formule-choix .funnel-etape-choix:first-of-type { margin-top: 4px; }
/* 1. Le nombre de jeux : trois cartes côte à côte, même en mobile, arrondies à
   24 px, bordure Craie 50 de 2 px ; choisie : Ciel 400 bordée de Craie 400,
   avec le visage bicolore au-dessus du nombre (Neulis 800, 40 à 56 px). */
.funnel-formule-choix .funnel-jeux { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 10px; }
.funnel-formule-choix .funnel-jeux-carte {
  min-height: 0; gap: 4px; padding: 18px 8px 14px;
  background: var(--ll-blanc-100); border: 2px solid var(--ll-craie-50); border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.funnel-formule-choix .funnel-jeux-carte:hover { border-color: var(--ll-craie-200); }
.funnel-formule-choix .funnel-jeux-carte:active { transform: scale(0.98); }
.funnel-formule-choix .funnel-jeux-carte.est-choisie {
  padding: 18px 8px 14px; background: var(--ll-ciel-400); border: 2px solid var(--ll-craie-400);
}
.funnel-jeux-visage { display: block; width: 72px; height: 26px; margin-bottom: 8px; opacity: 1; }
/* #768 : `.funnel-jeux-carte span` (compte.css) voile les libellés à 75 % ;
   les visages ne sont pas un libellé et restent pleins. */
.funnel-jeux-carte .funnel-jeux-visage { opacity: 1; }
.funnel-jeux-visage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.funnel-formule-choix .funnel-jeux-carte strong {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 11vw, 56px); line-height: 1;
}
.funnel-formule-choix .funnel-jeux-carte > span:last-child { font-size: 14px; font-weight: 700; opacity: 1; }
.funnel-formule-choix .funnel-jeux-aide { text-align: center; font-size: 12px; color: var(--ll-craie-300); opacity: 1; }

/* 2. Le rythme : trois cartes côte à côte, centrées ; l'économie en
   pastille Citron vert posée sur le bord haut ; l'intitulé 12 px gras, le
   prix au mois Neulis 18 à 24 px, « /mois » 10 px ; le montant prélevé
   seulement sur la carte choisie, qui prend le Ciel et la coche ronde. */
.funnel-formule-choix .funnel-rythmes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 10px; }
.funnel-formule-choix .funnel-rythme {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: 16px 4px 14px; text-align: center; min-width: 0;
  background: var(--ll-blanc-100); border: 2px solid var(--ll-craie-50); border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.funnel-formule-choix .funnel-rythme:hover { border-color: var(--ll-craie-200); }
.funnel-formule-choix .funnel-rythme:has(input:checked) {
  padding: 16px 4px 14px; background: var(--ll-ciel-400); border: 2px solid var(--ll-craie-400);
}
.funnel-formule-choix .funnel-rythme:has(input:checked)::after {
  content: "✓"; position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ll-craie-400); color: var(--ll-blanc-casse); font-size: 11px; font-weight: 700;
}
.funnel-formule-choix .funnel-economie {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--ll-citron-vert); color: var(--ll-craie-400);
  border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 700; white-space: nowrap;
  max-width: calc(100% + 8px); overflow: hidden; text-overflow: ellipsis;
}
/* La pastille dit « −12 € / an » ; la phrase entière reste lue par les
   lecteurs d'écran, hors de la vue. */
.funnel-economie-long {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.funnel-formule-choix .funnel-rythme-nom { align-items: center; }
.funnel-formule-choix .funnel-rythme-nom strong { font-size: 12px; font-weight: 700; }
.funnel-formule-choix .funnel-rythme-prix {
  flex-direction: column; align-items: center; gap: 2px; margin-top: 6px; text-align: center;
}
.funnel-formule-choix .funnel-rythme-prix strong {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 5.2vw, 24px); line-height: 1;
}
.funnel-formule-choix .funnel-rythme-prix span { font-size: 10px; }
.funnel-formule-choix .funnel-rythme-aide {
  display: none; align-self: stretch; margin-top: 8px; padding: 0 4px;
  font-size: 10px; line-height: 1.3; opacity: 1; text-wrap: balance;
}
.funnel-formule-choix .funnel-rythme:has(input:checked) .funnel-rythme-aide { display: block; }
.funnel-formule-choix .funnel-rythme .funnel-remise,
.funnel-formule-choix .funnel-rythme > .compte-aide { margin: 6px 0 0; padding: 0 4px; font-size: 10px; line-height: 1.3; }

/* Le code promo : « + j'ai un code promo ou une carte cadeau » en bouton
   tertiaire centré, avant les réassurances. */
.funnel-formule-choix .funnel-promo-repli { margin: 22px auto 0; max-width: 400px; }
.funnel-formule-choix .funnel-promo-repli > summary {
  font-weight: 700; font-size: 13px; color: var(--ll-craie-400);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--ll-ciel-400);
}
.funnel-formule-choix .funnel-promo-repli > summary:hover { text-decoration-color: var(--ll-ciel-200); }

/* Les réassurances : ronds de 48 px sur Ciel, Jasmin et Framboise,
   pictogramme de 24 px, libellé 12 px gras. */
.funnel-formule-choix .funnel-garanties { margin: 22px 0 0; gap: 8px; }
.funnel-formule-choix .funnel-garanties li { font-size: 12px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.funnel-formule-choix .funnel-garantie-pastille { width: 48px; height: 48px; color: var(--ll-craie-400); }
.funnel-garantie-pastille.est-ciel { background: var(--ll-ciel-400); }
.funnel-garantie-pastille.est-jasmin { background: var(--ll-jasmin-400); }
.funnel-garantie-pastille.est-framboise { background: var(--ll-framboise-400); }

/* La barre du bas, collée au bas de l'écran : le récapitulatif à gauche,
   « Continuer » à droite, arrondie à 24 px en haut, filet de bordure. */
.funnel-formule-barre {
  position: sticky; bottom: 0; z-index: 5;
  margin: 24px -20px 0; padding: 14px 20px 20px;
  background: var(--ll-blanc-casse); border-top: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px;
}
.funnel-formule-barre .funnel-recap {
  flex: 1 1 160px; max-width: 260px; margin: 0; padding: 0; border: 0;
  text-align: left; font-size: 12px; font-weight: 700; line-height: 1.35;
}
.funnel-formule-barre .funnel-pied {
  flex: 0 0 auto; margin: 0; padding: 0; border: 0; align-items: center; gap: 6px;
}
.funnel-formule-barre .funnel-pied .compte-aide { flex-basis: 100%; max-width: 360px; font-size: 12px; text-align: center; }
.funnel-formule-barre .funnel-suivant { margin: 0; }

/* ---------- AB-18 · paiement et module Stripe ---------- */
/* Le bandeau de la formule : Ciel 400 arrondi à 24 px, titre gras 14 px,
   détail 12 px, « modifier » en bouton tertiaire. */
.paiement-rappel {
  justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 14px 16px;
  background: var(--ll-ciel-400); border-radius: var(--radius-lg);
}
.paiement-rappel-texte strong { font-size: 14px; }
.paiement-rappel-texte .compte-aide { font-size: 12px; color: var(--ll-craie-400); opacity: 1; }
.paiement-rappel { flex-wrap: nowrap; }
.paiement-rappel-modifier { flex: none; font-size: 13px; }
/* Le module Stripe dans son cadre (440 px au plus, Blanc 100, Craie 50,
   arrondi 16 px), le récapitulatif à côté sur ordinateur, dessous sur mobile :
   la grille de CC-06. */
.paiement-grille { display: flex; flex-direction: column; gap: 20px; align-items: center; margin: 0 0 20px; }
.paiement-colonne { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 12px; }
.paiement-intitule {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.paiement-stripe {
  margin: 0; min-height: 120px; padding: 12px; box-sizing: border-box;
  background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-50); border-radius: var(--radius-md);
}
.paiement-stripe-attente { font-size: 13px; color: var(--ll-craie-300); }
.paiement-repli { margin: 0; }
.paiement-cote { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 10px; }
.paiement-cote .cct-recap-total span:first-child { white-space: nowrap; }
.paiement-cote .cct-recap-total { font-size: 16px; }
.paiement-cote .cct-recap-total span:last-child { text-align: right; white-space: nowrap; }
.paiement-cote-titre { font-family: var(--font-display); font-size: 17px; }
.paiement-cote .compte-aide { margin: 0; font-size: 12px; color: var(--ll-craie-300); }
.paiement-livraison { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12px; color: var(--ll-craie-300); }
.paiement-livraison .picto { flex: none; color: var(--ll-craie-400); }
@media (min-width: 900px) {
  .compte-tunnel:has(.paiement-grille) { max-width: 960px; }
  .paiement-grille { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 320px); justify-content: center; align-items: start; gap: 32px; }
  .paiement-cote { position: sticky; top: 110px; }
}

/* ---------- AB-19 · le paiement n'est pas passé ---------- */
/* L'écran de la maquette n'a ni fil d'étapes ni rappel de reprise. */
.funnel[data-etape="paiement"]:has(.paiement-echec) > .funnel-etapes,
.funnel[data-etape="paiement"]:has(.paiement-echec) > .funnel-reprise { display: none; }
.paiement-echec { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.paiement-echec-yeux {
  display: block; align-self: center; width: 150px; height: 56px; background: var(--ll-craie-400);
  -webkit-mask: url(/assets/ab19-yeux-plein-01.svg) center / contain no-repeat;
  mask: url(/assets/ab19-yeux-plein-01.svg) center / contain no-repeat;
}
.paiement-echec-bandeau {
  margin: 0; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--ll-carotte-400); border: 0; border-radius: var(--radius-md); color: var(--ll-craie-400);
}
.paiement-echec-picto { flex: none; }
.paiement-echec-texte { font-size: 12px; }
.paiement-echec-texte strong { font-size: 14px; }
.paiement-echec-titre { margin: 0; text-align: center; }
.paiement-echec-sous-titre { margin: -10px auto 0; font-size: 14px; line-height: 1.45; color: var(--ll-craie-300); opacity: 1; }
/* Les garanties : l'étiquette de la charte (`.ll-tag`), contour Craie de 2 px. */
.paiement-echec-garanties { margin: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
.paiement-echec-garanties li {
  padding: 0.4em 0.85em; border: 2px solid var(--ll-craie-400); border-radius: 999px;
  font-size: 14px; line-height: 1; white-space: nowrap;
}
/* L'aide : deux cartes Blanc 100 arrondies à 16 px, pictogramme et chevron. */
.paiement-echec-aide { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.paiement-echec-aide li, .paiement-echec-aide li:last-child { border: 0; padding: 0; }
.paiement-echec-aide a {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--ll-craie-50); border-radius: var(--radius-md); background: var(--ll-blanc-100);
  color: var(--ll-craie-400); font-size: 14px; font-weight: 700; text-decoration: none;
}
.paiement-echec-aide a:hover { background: var(--ll-blanc-200); }
.paiement-echec-aide a > span:not(.paiement-echec-chevron) { flex: 1; }

/* ---------- La barre du bas des écrans de fin (AB-19, AB-20, AB-21) ---------- */
.tunnel-barre-bas {
  position: sticky; bottom: 0; z-index: 5;
  margin: 8px -20px 0; padding: 14px 20px 20px;
  background: var(--ll-blanc-casse); border-top: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.tunnel-barre-bas .funnel-suivant { width: 100%; max-width: 400px; margin: 0; text-align: center; box-sizing: border-box; }
.tunnel-barre-bas .btn-tertiaire { font-size: 13px; }

/* ---------- AB-20 et AB-21 · bienvenue dans la tribu ---------- */
.bienvenue { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.bienvenue-yeux {
  display: block; align-self: center; width: 150px; height: 56px; background: var(--ll-craie-400);
  -webkit-mask: url(/assets/cc-yeux-plein-02.svg) center / contain no-repeat;
  mask: url(/assets/cc-yeux-plein-02.svg) center / contain no-repeat;
}
.bienvenue-yeux.est-sourire {
  -webkit-mask-image: url(/assets/cc-yeux-plein-06.svg); mask-image: url(/assets/cc-yeux-plein-06.svg);
}
.bienvenue-titre { margin: 0; text-align: center; }
.bienvenue-texte { margin: -10px auto 0; font-size: 14px; line-height: 1.45; color: var(--ll-craie-300); text-align: center; }
/* La carte des étapes (AB-21) et celle de la sélection (AB-20) : Blanc 100,
   bordure Craie 50, arrondi 24 px, 16 px de marge intérieure. */
.bienvenue-etapes, .bienvenue-selection {
  margin: 0; padding: 16px; text-align: left;
  background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-50); border-radius: var(--radius-lg);
}
.bienvenue-etapes { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.bienvenue-etapes li, .bienvenue-etapes li:first-child { border: 0; padding: 0; gap: 10px; align-items: center; }
.bienvenue-puce { width: 24px; height: 24px; font-size: 12px; font-weight: 700; flex: none; box-sizing: border-box; }
.bienvenue-etapes li.est-faite .bienvenue-puce { background: var(--ll-citron-400); border-color: var(--ll-citron-400); }
.bienvenue-etapes li.est-courante .bienvenue-puce { background: var(--ll-craie-400); border-color: var(--ll-craie-400); color: var(--ll-blanc-casse); }
.bienvenue-etapes li.est-a-venir { color: var(--ll-craie-300); }
.bienvenue-etapes li.est-a-venir .bienvenue-puce { border: 1.5px solid var(--ll-craie-200); font-weight: 400; }
.bienvenue-selection { display: flex; flex-direction: column; gap: 8px; }
.bienvenue-selection-entete { margin: 0; font-size: 14px; }
.bienvenue-selection-liste { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bienvenue-selection-liste li { gap: 12px; }
.bienvenue-selection-liste img, .bienvenue-selection-vignette {
  width: 48px; height: 48px; flex: none; border-radius: var(--radius-md); object-fit: cover; background: var(--ll-blanc-200);
}
.bienvenue-selection-texte a { font-weight: 700; font-size: 14px; text-decoration: none; }
.bienvenue-selection-texte .compte-aide { font-size: 12px; color: var(--ll-craie-300); }
.bienvenue-selection > .compte-aide { font-size: 12px; color: var(--ll-craie-300); }

/* ---------- Marges latérales des écrans AB-17 à AB-21 ----------
   La maquette pose ces écrans à 20 px du bord ; le cadre du compte en
   empilait trois de 16 px (48 px en mobile). On retire celle de la colonne
   du compte et on ramène celle de l'écran à 4 px : 16 + 4 = 20 px. */
.compte-tunnel:has(.funnel-formule-choix, .paiement-rappel, .paiement-echec, .bienvenue) { padding-left: 0; padding-right: 0; }
.compte-tunnel:has(.funnel-formule-choix, .paiement-rappel, .paiement-echec, .bienvenue) > .funnel { padding-left: 4px; padding-right: 4px; }
/* Largeurs de colonne de la maquette : 560 px (AB-19, AB-21), 640 px
   (AB-20). AB-18 garde sa grille plus large (récapitulatif à côté, comme
   CC-06). AB-17 n'a plus les 720 px de la maquette : Alban veut la même
   largeur qu'aux autres étapes (cas 38, note 1375), soit les 600 px de la
   barre d'étapes et des écrans anonymes, plus les 4 px de chaque bord. */
.compte-tunnel:has(.funnel-formule-choix) { max-width: 608px; }
.compte-tunnel:has(.paiement-echec), .compte-tunnel:has(.bienvenue-etapes) { max-width: 560px; }
.compte-tunnel:has(.bienvenue-selection) { max-width: 640px; }

/* ---------- L'enveloppe propre au tunnel (`EnveloppeTunnel` de `src/comptes/ui.ts`) ----------
   En-tête de `Parcours Abonnement.dc.html` (lignes 24 à 29) : colonne de
   640 px, 16 px 20 px en haut ; le logo de 24 px à gauche, « étape N sur M ·
   nom » à droite en 12 px Craie 200, la barre d'étapes dessous (balisage et
   couleurs de `barreProgression`). Pas de pied du site : seulement « Gérer
   mes cookies », pour rouvrir le choix des traceurs. */
.tunnel-entete {
  position: relative; box-sizing: border-box; width: 100%; max-width: 640px; margin: 0 auto;
  padding: 16px 20px 0; display: flex; flex-direction: column; gap: 12px;
}
.tunnel-entete-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; }
.tunnel-entete-logo { display: inline-flex; }
.tunnel-entete-logo img { display: block; height: 24px; width: auto; }
.tunnel-entete-retour { font-size: 13px; }
.tunnel-entete.est-logo-centre .tunnel-entete-ligne { justify-content: center; }
.tunnel-entete .funnel-progression { display: block; margin: 0; }
.tunnel-entete .funnel-progression-intitule {
  position: absolute; top: 16px; right: 20px; margin: 0; line-height: 24px;
  font-size: 12px; color: var(--ll-craie-200); opacity: 1; text-align: right;
}
.tunnel-entete .funnel-segments { gap: 4px; }
.page-enveloppe-tunnel > .compte-main { padding-top: 20px; }
/* La barre d'étapes de l'enveloppe remplace le fil « 1 2 3 » du cadre. */
.page-enveloppe-tunnel .funnel > .funnel-etapes { display: none; }
.tunnel-pied { margin: 0; padding: 8px 20px 24px; text-align: center; font-size: 12px; }
/* Les noms des étapes sous la barre, comme la maquette : 12 px Craie 300,
   l'étape courante (la dernière faite) en gras Craie 400. */
.tunnel-entete .funnel-segment { position: relative; height: 4px; margin-bottom: 22px; min-width: 0; }
.tunnel-entete .funnel-segment span {
  position: absolute; top: 10px; left: 0; right: 0; width: auto; height: auto; clip-path: none; overflow: hidden;
  font-size: 12px; line-height: 1.2; color: var(--ll-craie-300); text-overflow: ellipsis;
}
.tunnel-entete .funnel-segment.est-faite:not(:has(+ .est-faite)) span { font-weight: 700; color: var(--ll-craie-400); }
/* Sous l'enveloppe, l'écran commence 20 px sous la barre, comme la maquette. */
.page-enveloppe-tunnel .compte-tunnel, .page-enveloppe-tunnel .compte-tunnel > .funnel { padding-top: 0; }

/* ---------- AB-14 · la mention sous « Continuer avec Google » ---------- */
/* Recette d'Alban (cas 35, note 867) : centrée sous le bouton, sur sa largeur. */
.signup-ecran .compte-google-mention { max-width: none; text-align: center; text-wrap: balance; }

/* ---------- AB-14 · textes légaux en fenêtre superposée (note 866) ---------- */
.fenetre-legale {
  width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 720px);
  padding: 0; border: none; border-radius: 16px;
  background: var(--ll-blanc-100); color: var(--ll-craie-400);
  box-shadow: 0 12px 40px var(--ombre);
}
.fenetre-legale[open] { display: flex; flex-direction: column; }
.fenetre-legale::backdrop { background: color-mix(in srgb, var(--ll-craie) 45%, transparent); }
.fenetre-legale-haut {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--color-border);
}
.fenetre-legale-haut h2 { margin: 0; font-size: 18px; line-height: 1.25; }
.fenetre-legale-fermer {
  flex: none; width: 40px; height: 40px; border: none; border-radius: 999px;
  background: var(--ll-ciel-50); color: var(--ll-craie-400); font-size: 24px; line-height: 1; cursor: pointer;
}
.fenetre-legale-fermer:focus-visible { outline: 2px solid var(--ll-ciel-400); outline-offset: 2px; }
.fenetre-legale-corps { overflow-y: auto; padding: 16px 20px 24px; overscroll-behavior: contain; }
.fenetre-legale-corps .panneau-legal { margin: 0; padding: 0; }
.fenetre-legale-corps .legal-texte { font-size: 14px; }
.fenetre-legale-attente { color: var(--ll-craie-300); }

/* ---------- Recette d'Alban (cas 245, note 877) : la validation toujours à portée ----------
   À toutes les étapes du tunnel, le bouton de validation vit dans la barre
   collante du bas (`.tunnel-barre-bas`, la même que la formule et la fin) :
   sur mobile comme sur ordinateur, « Suivant » reste visible pendant que
   l'écran défile. La barre colle tant que son formulaire est à l'écran. */
.tunnel-barre-bas.funnel-gestes { margin: 20px -20px 0; gap: 8px; }
.tunnel-barre-bas .funnel-suivant, .tunnel-barre-bas .btn-jasmin { width: 100%; max-width: 400px; margin: 0; text-align: center; box-sizing: border-box; }
.tunnel-barre-bas .funnel-duree, .tunnel-barre-bas .funnel-incomplet { margin: 0; }
.signup-ecran .tunnel-barre-bas { margin-top: 16px; }

/* « Gérer mes cookies » reste joignable à tout moment (le retrait du
   consentement doit être aussi simple que son recueil), mais en petit lien
   discret tout en bas, sans le gras ni la taille d'un bouton. */
body .tunnel-pied { padding: 4px 20px 16px; }
body .tunnel-pied .footer-lien-bouton {
  font-size: 11px; font-weight: 400; color: var(--ll-craie-300);
  text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: currentColor;
}

/* « Changer de formule » de l'espace client (note 1019 d'Alban) : la
   formule du client, en pastille Jasmin, ne se choisit pas. */
.funnel-formule-choix .funnel-actuelle { background: var(--ll-jasmin-400); }
.funnel-formule-choix .funnel-rythme.est-actuelle { cursor: default; border-style: dashed; }
/* Recette d'Alban du 16/10/2026 (#707, #716) : sur « Changer de formule », le
   montant prélevé reste lisible sous les rythmes au-delà du mois, et le
   nombre de jeux du client porte la pastille « votre formule actuelle ». */
.funnel-formule-choix.est-changement .funnel-rythme-aide.est-visible { display: block; }
.funnel-formule-choix .funnel-jeux-carte.est-actuelle { position: relative; }
.funnel-formule-choix .funnel-jeux-carte .funnel-actuelle {
  white-space: normal; max-width: calc(100% - 8px); width: max-content; line-height: 1.2; text-align: center;
}
/* #710 : dans l'aperçu du changement, « Annuler » se cale à droite du bloc. */
.changer-formule-confirmation { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.changer-formule-confirmation > a.btn { margin-left: auto; }


/* ---- tunnel-inscription.css ---- */
/* ---------- Tunnel d'inscription public d'après la maquette consolidée ----------
   Recette d'Alban, cas 243, note 701 (points 2 et 3) : écrans AB-00, AB-01,
   AB-02, AB-04, AB-06, AB-07, AB-08, AB-09 et AB-10 de `Parcours
   Abonnement.dc.html` (consolidation, commit bc77a9d), valeurs relevées dans
   le code de la maquette et sa charte embarquée (`_ds/`). Cette feuille passe
   après `compte.css` (ordre alphabétique de `/site.css`) et ne vise que les
   écrans du tunnel public, par la classe `.funnel-ecran-<étape>` posée sur
   chaque écran : AB-03, AB-05 et les étapes avec compte gardent leurs règles.
   Uniquement des jetons `--ll-*` de la charte. */

/* ---- Barre d'étapes (tout le tunnel public) ----
   Traits de 4 px séparés de 4 px, couleur par position (Ciel, Jasmin,
   Framboise, Lila, Carotte) : 400 une fois atteinte, 100 devant. Le nom de
   chaque étape sous son trait, 12 px Craie 300, celui de l'étape en cours en
   gras Craie 400. L'intitulé « étape N sur 5 · … » en 12 px Craie 200. */
.funnel-progression-intitule { font-size: 12px; color: var(--ll-craie-200); opacity: 1; }
.funnel-segments { gap: 4px; }
.funnel-segment { height: auto; background: none !important; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.funnel-segment::before {
  content: ""; display: block; height: 4px; border-radius: 999px;
  background: var(--ll-ciel-100);
  transition: background 360ms var(--ease-soft);
}
.funnel-segment:nth-child(1)::before { background: var(--ll-ciel-100); }
.funnel-segment:nth-child(2)::before { background: var(--ll-jasmin-100); }
.funnel-segment:nth-child(3)::before { background: var(--ll-framboise-100); }
.funnel-segment:nth-child(4)::before { background: var(--ll-lila-100); }
.funnel-segment:nth-child(5)::before { background: var(--ll-carotte-100); }
.funnel-segment.est-faite:nth-child(1)::before { background: var(--ll-ciel-400); }
.funnel-segment.est-faite:nth-child(2)::before { background: var(--ll-jasmin-400); }
.funnel-segment.est-faite:nth-child(3)::before { background: var(--ll-framboise-400); }
.funnel-segment.est-faite:nth-child(4)::before { background: var(--ll-lila-400); }
.funnel-segment.est-faite:nth-child(5)::before { background: var(--ll-carotte-400); }
.funnel-segment span {
  position: static; width: auto; height: auto; overflow: hidden; clip-path: none;
  font-size: 12px; line-height: 1.2; color: var(--ll-craie-300);
  white-space: nowrap; text-overflow: ellipsis;
}
.funnel-segment.est-courante span { font-weight: 700; color: var(--ll-craie-400); }

/* ---- Haut de l'écran : « ‹ retour à … » et « question N sur 2 » ---- */
.funnel-precedent { margin: 0 0 16px; }
.funnel-precedent .btn-tertiaire { font-size: 13px; white-space: normal; text-align: left; }
.funnel-haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 16px; }
.funnel-haut .funnel-precedent { margin: 0; }
.funnel-question-rang { margin: 0; font-size: 12px; color: var(--ll-craie-300); white-space: nowrap; }

/* ---- Titres et sous-titres (Neulis 28 px, exergue italique SemiBold) ---- */
:is(.funnel-ecran-accueil, .funnel-ecran-type, .funnel-ecran-tribu, .funnel-ecran-avantages, .funnel-ecran-science,
  .funnel-ecran-preferences, .funnel-ecran-reassurance, .funnel-ecran-accompagnement, .funnel-ecran-autre, .funnel-ecran-activite) .funnel-titre {
  text-wrap: balance; margin: 0 0 8px;
}
:is(.funnel-ecran-accueil, .funnel-ecran-type, .funnel-ecran-tribu, .funnel-ecran-preferences, .funnel-ecran-reassurance,
  .funnel-ecran-accompagnement, .funnel-ecran-autre) .funnel-sous-titre {
  font-size: 14px; line-height: 1.45; color: var(--ll-craie-300); opacity: 1; margin: 0 auto 20px;
  text-wrap: pretty;
}

/* ---- Grands boutons : pleine largeur jusqu'à 400 px, centrés ---- */
:is(.funnel-ecran-accueil, .funnel-ecran-tribu, .funnel-ecran-avantages, .funnel-ecran-science,
  .funnel-ecran-preferences, .funnel-ecran-reassurance, .funnel-ecran-accompagnement, .funnel-ecran-autre) .funnel-suivant {
  max-width: 400px; margin-left: auto; margin-right: auto;
}
.funnel-continuer { margin: 12px 0 0; text-align: center; }
.funnel-continuer .btn-tertiaire { font-size: 13px; }

/* ---- AB-01 · qui va profiter des jeux ? ----
   Cartes de profil : 14 px 16 px, rond de 20 px, libellé Bold 15 px, aide
   13 px Craie 300 ; deux colonnes dès 540 px (`minmax(260px, 1fr)`), ombre
   de la charte au survol, léger enfoncement à l'appui. */
.funnel-cartes-profil { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 0 0 20px; }
.funnel-cartes-profil .funnel-carte {
  padding: 14px 16px; gap: 2px 14px;
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow 220ms var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.funnel-cartes-profil .funnel-carte.est-choisie { padding: 14px 16px; }
.funnel-cartes-profil .funnel-carte:hover { box-shadow: var(--shadow); }
.funnel-cartes-profil .funnel-carte:active { transform: scale(0.98); }
.funnel-cartes-profil .funnel-carte-puce { width: 20px; height: 20px; }
.funnel-cartes-profil .funnel-carte.est-choisie .funnel-carte-puce {
  background: radial-gradient(circle, var(--ll-craie-400) 0 5px, transparent 5.5px);
}
.funnel-cartes-profil .funnel-carte-texte strong { font-size: 15px; }
.funnel-cartes-profil .funnel-carte-aide { font-size: 13px; }

/* « pour offrir ? » : carte Jasmin 400 arrondie à 16 px, coffret de 24 px,
   chevron à droite, vers la carte cadeau. */
.funnel-offrir {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--ll-jasmin-400); color: var(--ll-craie-400); text-decoration: none;
  transition: box-shadow 220ms var(--ease-soft);
}
.funnel-offrir:hover { box-shadow: var(--shadow); }
.funnel-offrir:active { transform: scale(0.98); }
.funnel-offrir:focus-visible { outline: 2px solid var(--ll-ciel-400); outline-offset: 2px; }
.funnel-offrir .picto { flex: none; }
.funnel-offrir-texte { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.funnel-offrir-texte strong { font-size: 15px; font-weight: 700; }
.funnel-offrir-texte span { font-size: 13px; color: var(--ll-craie-300); }
.funnel-offrir-fleche { flex: none; }

/* ---- AB-00 · créons ensemble une expérience personnalisée ----
   Mosaïque de 3 colonnes sur 3 rangs de 84 à 130 px, écart 8 px, photos
   arrondies à 16 px : la 1re sur deux rangs, la 4e sur deux colonnes. */
.funnel-mosaique {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(84px, 19vw, 130px); gap: 8px; margin: 0 0 20px;
}
.funnel-mosaique-photo {
  width: 100%; height: 100%; min-width: 0; min-height: 0; display: block;
  object-fit: cover; border-radius: var(--radius-md);
}
.funnel-mosaique-photo[data-place="1"] { grid-row: span 2; object-position: 40% 50%; }
.funnel-mosaique-photo[data-place="2"] { object-position: 50% 30%; }
.funnel-mosaique-photo[data-place="3"] { object-position: 50% 60%; }
.funnel-mosaique-photo[data-place="4"] { grid-column: span 2; }
.funnel-mosaique-photo[data-place="5"] { object-position: 50% 45%; }
.funnel-mosaique-photo[data-place="6"] { object-position: 40% 50%; }
.funnel-mosaique-photo[data-place="7"] { object-position: 50% 40%; }
.funnel-accueil-action { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.funnel-accueil-action .funnel-suivant { max-width: 360px; margin-top: 0; }
.funnel-ecran-accueil .funnel-duree { margin: 0; font-size: 12px; color: var(--ll-craie-300); opacity: 1; }

/* ---- AB-02 · parlez-nous de votre enfant / tribu ----
   Enfant validé : ligne Blanc 100 bordée de Craie 50, pastille d'initiale de
   32 px (Ciel, Jasmin, Framboise, Lila), prénom Bold 14 px, âge 12 px
   Craie 300, « modifier » tertiaire. Saisie sans encadré : prénom et date
   côte à côte dès 412 px, libellés Bold 13 px. « + ajouter » en lien Bold
   14 px à pictogramme. */
.funnel-ecran-tribu .funnel-membres { gap: 10px; margin: 0 0 20px; }
.funnel-ecran-tribu .funnel-membre { justify-content: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); }
.funnel-ecran-tribu .funnel-membre-texte { flex: 1; }
.funnel-ecran-tribu .funnel-membre-texte strong { font-size: 14px; }
.funnel-ecran-tribu .funnel-membre-age { font-size: 12px; color: var(--ll-craie-300); opacity: 1; }
.funnel-membre-initiale {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--ll-craie-400);
}
.funnel-membre-initiale[data-teinte="ciel"] { background: var(--ll-ciel-400); }
.funnel-membre-initiale[data-teinte="jasmin"] { background: var(--ll-jasmin-400); }
.funnel-membre-initiale[data-teinte="framboise"] { background: var(--ll-framboise-400); }
.funnel-membre-initiale[data-teinte="lila"] { background: var(--ll-lila-400); }
.funnel-membre-modifier.btn-tertiaire { font-size: 13px; }
.funnel-ecran-tribu .funnel-saisie {
  background: none; padding: 0; border-radius: 0; margin: 0 0 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
}
.funnel-ecran-tribu .funnel-saisie .compte-champ { margin: 0; }
.funnel-ajouter {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 20px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--ll-craie-400);
}
.funnel-ajouter:hover span { text-decoration: underline; text-decoration-color: var(--ll-ciel-400); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.funnel-ajouter:focus-visible { outline: 2px solid var(--ll-ciel-400); outline-offset: 2px; border-radius: 4px; }
.funnel-retirer { display: block; margin: 12px auto 0; font-size: 13px; }

/* Libellés des champs du tunnel public : Bold 13 px, comme la maquette. */
:is(.funnel-ecran-tribu, .funnel-ecran-accompagnement, .funnel-ecran-autre) .compte-champ label { font-size: 13px; font-weight: 700; }

/* ---- AB-09 · quels jeux font envie ? ----
   Onglets par enfant : une rangée qui défile à l'horizontale, 8 px 14 px,
   arrondis à 16 px ; l'onglet en cours en Ciel 400 cerclé de Craie sur 2 px,
   les autres Blanc 100 bordés de Craie 50 ; prénom Bold 13 px, âge 12 px. */
.funnel-ecran-preferences .funnel-onglets { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 2px; margin: 0 0 16px; }
.funnel-ecran-preferences .funnel-onglet {
  flex: none; align-items: flex-start; gap: 1px; padding: 8px 14px;
  background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-50); border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-soft);
}
.funnel-ecran-preferences .funnel-onglet.est-faite { background: var(--ll-blanc-100); border-color: var(--ll-craie-50); }
.funnel-ecran-preferences .funnel-onglet.est-courant { background: var(--ll-ciel-400); border: 2px solid var(--ll-craie-400); padding: 7px 13px; }
.funnel-ecran-preferences .funnel-onglet:hover:not(.est-courant) { background: var(--ll-ciel-50); }
.funnel-onglet-nom { font-weight: 700; font-size: 13px; }
.funnel-ecran-preferences .funnel-onglet-detail { font-size: 12px; color: var(--ll-craie-300); opacity: 1; }
.funnel-ecran-preferences .funnel-onglet-pour { font-size: 14px; }
.funnel-ecran-preferences .funnel-compteur { font-size: 12px; color: var(--ll-craie-300); opacity: 1; }
.funnel-ecran-preferences .funnel-autres-categories > summary {
  font-size: 13px; text-decoration-color: var(--ll-ciel-400); text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* ---- AB-10 · qu'est-ce que vous recherchez ? ----
   Cartes de 12 px 14 px arrondies à 16 px, deux colonnes dès 516 px
   (`minmax(250px, 1fr)`) ; pictogramme de 20 px dans un rond Framboise de
   36 px, libellé Bold 13 px, case carrée de 18 px à droite (`.check` de la
   planche : cochée, bord et coche Ciel 400). Réponse choisie : bordure Craie
   400 de 2 px, sans aplat ; les autres s'estompent à 40 % une fois la
   limite atteinte. */
.funnel-cartes-recherche { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.funnel-cartes-recherche .funnel-carte {
  grid-template-columns: 36px minmax(0, 1fr) 18px; gap: 12px;
  padding: 12px 14px; background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-50);
  transition: opacity 220ms var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.funnel-cartes-recherche .funnel-carte:hover { border-color: var(--ll-craie-200); }
.funnel-cartes-recherche .funnel-carte:active { transform: scale(0.98); }
.funnel-cartes-recherche .funnel-carte:has(input:checked),
.funnel-cartes-recherche .funnel-carte.est-choisie:has(input:checked) {
  background: var(--ll-blanc-100); border: 2px solid var(--ll-craie-400); padding: 11px 13px;
}
.funnel-cartes-recherche .funnel-carte.est-choisie:not(:has(input:checked)) { background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-50); padding: 12px 14px; }
.funnel-carte-icone {
  width: 36px; height: 36px; border-radius: 50%; background: var(--ll-framboise-400);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ll-craie-400);
}
.funnel-cartes-recherche .funnel-carte-texte strong { font-size: 13px; line-height: 1.3; }
.funnel-carte-case {
  width: 18px; height: 18px; box-sizing: border-box; border-radius: 5px;
  border: 1.5px solid var(--ll-craie-400);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1; color: transparent;
}
.funnel-cartes-recherche .funnel-carte:has(input:checked) .funnel-carte-case { border-color: var(--ll-ciel-400); color: var(--ll-ciel-400); }
.funnel-cartes-recherche .funnel-carte:has(input:focus-visible) .funnel-carte-case { border-color: var(--ll-ciel-400); }
.funnel-cartes-recherche .funnel-carte[data-atteint] { opacity: 0.4; }
/* 1af, question à plusieurs réponses (ticket 388) : la même case. La carte cochée
   y prend l'aplat Ciel des cartes de la charte (compte.css), une coche Ciel
   s'y perdrait : la case cochée est Craie, comme la puce d'un choix unique. */
.funnel-carte-choix:not(.funnel-carte-recherche):has(input:checked) .funnel-carte-case { border-width: 2px; color: var(--ll-craie-400); }
.funnel-carte-choix:not(.funnel-carte-recherche):has(input:focus-visible) .funnel-carte-case { border-width: 2px; }

/* ---- AB-04 · prenez rendez-vous ----
   Récapitulatif du profil : Blanc 100 bordé de Craie 50, arrondi 16 px,
   12 px 16 px, Bold 14 px puis 12 px Craie 300, « modifier » tertiaire. Le
   canal en interrupteur segmenté de la planche (`.seg`), le choix en Citron. */
.funnel-ecran-accompagnement article.funnel-recap {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 0 0 18px; padding: 12px 16px; text-align: left; font-weight: 400;
  background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-50); border-radius: var(--radius-md);
}
.funnel-ecran-accompagnement .funnel-recap-texte strong { font-size: 14px; }
.funnel-ecran-accompagnement .funnel-recap-texte span { font-size: 12px; color: var(--ll-craie-300); opacity: 1; }
.funnel-bloc-canal legend { font-size: 14px; }
.funnel-bloc-canal .funnel-pastilles {
  display: inline-flex; flex-wrap: nowrap; gap: 0; overflow: hidden;
  border: 1px solid var(--ll-craie-50); border-radius: 999px;
}
.funnel-bloc-canal .funnel-pastille {
  border: 0; border-radius: 0; padding: 7px 16px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; background: var(--ll-blanc-50);
}
.funnel-bloc-canal .funnel-pastille:hover { background: var(--ll-citron-100); }
.funnel-bloc-canal .funnel-pastille:has(input:checked) { background: var(--ll-citron-400); border: 0; }
.funnel-bloc-canal .funnel-pastille:has(input:checked)::before { content: none; }
.funnel-bloc-canal .funnel-pastille:has(input:focus-visible) { outline: 2px solid var(--ll-ciel-400); outline-offset: -2px; }
:is(.funnel-ecran-accompagnement, .funnel-ecran-autre) .funnel-bloc legend { font-size: 13px; }
:is(.funnel-ecran-accompagnement, .funnel-ecran-autre) .funnel-ligne { gap: 12px; }

/* ---- AB-07 · libérez leur curiosité, nous gérons la logistique ----
   Grille de huit photos sur 4 colonnes, cases carrées arrondies à 16 px sur
   l'aplat de la maquette tant que la photo manque ; chiffres en pastilles
   pleines inclinées (Neulis 17 px) ; phrase Neulis 20 px ; mention 13 px. */
.funnel-ecran-avantages .funnel-titre { line-height: 1.2; }
.funnel-grille-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 20px; }
.funnel-grille-photo { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; }
.funnel-grille-photo[data-teinte="ciel"] { background: var(--ll-ciel-400); }
.funnel-grille-photo[data-teinte="jasmin"] { background: var(--ll-jasmin-400); }
.funnel-grille-photo[data-teinte="framboise"] { background: var(--ll-framboise-400); }
.funnel-grille-photo[data-teinte="lila"] { background: var(--ll-lila-400); }
.funnel-grille-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.funnel-avantages-texte { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding-top: 4px; margin: 0 0 20px; }
.funnel-ecran-avantages .funnel-chiffres { gap: 4px 2px; max-width: 300px; margin: 0; align-items: center; }
.funnel-ecran-avantages .funnel-chiffre {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 400; font-size: 17px;
}
.funnel-ecran-avantages .funnel-chiffre[data-famille="citron"] { background: var(--ll-citron-400); transform: rotate(-6deg); }
.funnel-ecran-avantages .funnel-chiffre[data-famille="carotte"] { background: var(--ll-carotte-400); transform: rotate(5deg) translateY(-6px); }
.funnel-ecran-avantages .funnel-chiffre[data-famille="framboise"] { background: var(--ll-framboise-400); transform: rotate(-2deg) translateY(-8px); }
.funnel-avantages-phrase { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.3; max-width: 28ch; text-wrap: balance; }
.funnel-avantages-phrase em { font-style: italic; font-weight: 600; }
.funnel-avantages-pied { margin: 0; font-size: 13px; color: var(--ll-craie-300); }

/* ---- AB-08 · pourquoi le jeu change tout ? ----
   Citation au-dessus du titre (Neulis 20 px italique, auteur 12 px Craie
   300), signe ∞ Lila 24 px ; cartes arrondies à 24 px, 14 px, pictogramme de
   22 px dans un rond Lila de 40 px, titre Bold 14 px, texte et source 12 px ;
   trois colonnes dès 700 px. */
.funnel-ecran-science .funnel-citation { margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.funnel-ecran-science .funnel-citation blockquote { font-family: var(--font-display); font-size: 20px; line-height: 1.3; font-style: italic; }
.funnel-ecran-science .funnel-citation figcaption { margin: 0; font-size: 12px; color: var(--ll-craie-300); opacity: 1; }
.funnel-infini { margin: 0 0 12px; text-align: center; font-size: 24px; line-height: 1; color: var(--ll-lila-400); }
.funnel-ecran-science .funnel-titre { margin-bottom: 18px; }
.funnel-ecran-science .funnel-arguments { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 18px; }
.funnel-ecran-science .funnel-argument {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--radius-lg);
}
.funnel-ecran-science .funnel-argument-puce {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ll-lila-400);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ll-craie-400);
}
.funnel-ecran-science .funnel-argument-texte strong { font-size: 14px; }
.funnel-ecran-science .funnel-argument-texte > span { font-size: 12px; line-height: 1.45; }
.funnel-ecran-science .funnel-argument-texte cite { font-size: 12px; font-style: normal; color: var(--ll-craie-300); opacity: 1; }
.funnel-conclusion { margin: 0 0 20px; text-align: center; font-size: 14px; font-weight: 700; }

/* ---- AB-06 · dites-nous en plus ---- */
.funnel-ecran-autre textarea { min-height: 120px; resize: vertical; }

/* L'heure du rendez-vous (AB-04) au gabarit du champ texte de la planche,
   à la hauteur de la date voisine. */
.funnel-ecran-accompagnement .funnel-ligne select {
  font-family: var(--font-sans); font-size: 14px; color: var(--ll-craie-400);
  background: var(--ll-blanc-100); border: 1px solid var(--ll-craie-400); border-radius: var(--radius-sm);
  padding: 12px 16px; width: 100%; box-sizing: border-box;
}
.funnel-ecran-accompagnement .funnel-ligne select:focus { outline: none; border-color: var(--ll-ciel-400); box-shadow: 0 0 0 3px var(--ll-ciel-100); }

/* ---- AB-03 · « Suivant » grisé tant que le choix est incomplet ----
   Audit du lot 1 (note 701) : état désactivé du prototype (Craie 200,
   texte Blanc) et la consigne dessous, tant qu'un type, un effectif et un
   âge ne sont pas cochés. Sans `:has()`, le bouton reste actif et le
   serveur refuse l'envoi incomplet. */
.funnel-ecran-activite .funnel-incomplet { display: none; margin: 6px 0 0; text-align: center; font-size: 12px; color: var(--ll-craie-300); }
.funnel-ecran-activite form:not(:has(input[name="type_activite"]:checked)) .funnel-suivant,
.funnel-ecran-activite form:not(:has(input[name="effectif"]:checked)) .funnel-suivant,
.funnel-ecran-activite form:not(:has(input[name="tranches_age"]:checked)) .funnel-suivant {
  background: var(--ll-craie-200); border-color: var(--ll-craie-200); color: var(--ll-blanc-50);
  opacity: 0.4; pointer-events: none; cursor: default; box-shadow: none;
}
.funnel-ecran-activite form:not(:has(input[name="type_activite"]:checked)) .funnel-incomplet,
.funnel-ecran-activite form:not(:has(input[name="effectif"]:checked)) .funnel-incomplet,
.funnel-ecran-activite form:not(:has(input[name="tranches_age"]:checked)) .funnel-incomplet { display: block; }
.funnel-ecran-activite .funnel-titre em { font-style: italic; font-weight: 600; }

/* ---- AB-05 · la pastille de succès du prototype ----
   Les yeux « plein 07 » de la charte, 150 × 56 px, en Craie, au-dessus du
   titre. */
.funnel-succes {
  display: block; width: 150px; height: 56px; margin: 8px auto 14px;
  background: var(--ll-craie-400);
  -webkit-mask: url(/assets/tunnel-ab05-yeux-plein-07.svg) center / contain no-repeat;
  mask: url(/assets/tunnel-ab05-yeux-plein-07.svg) center / contain no-repeat;
}

/* Barre d'étapes à toutes les largeurs comme le prototype : l'intitulé en
   haut à droite, les cinq traits nommés dessous sur toute la largeur. */
@media (min-width: 900px) {
  .funnel-progression { display: block; }
  .funnel-progression-intitule { margin: 0 0 10px; }
}

/* AB-04 : « Rendez-vous par » à gauche, l'interrupteur à droite, sur une
   ligne (la légende flottée devient un élément de la rangée). */
.funnel-bloc-canal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.funnel-bloc-canal legend { float: left; margin: 0; padding: 0; }
.funnel-bloc-canal .compte-aide { flex: 0 0 100%; margin: 0; }

/* ---- Enveloppe du tunnel (PR 565) sur les écrans publics ----
   La barre de `barreProgression` garde le dessin de cette feuille (trait
   en `::before`, nom dessous) : on neutralise le placement absolu prévu par
   `tunnel-abonnement.css`. Sur AB-01, « retour au site » occupe la droite
   de la ligne du logo : l'intitulé de l'étape passe au-dessus de la barre. */
.tunnel-entete .funnel-segment { height: auto; margin-bottom: 0; }
.tunnel-entete .funnel-segment span { position: static; }
.tunnel-entete:has(.tunnel-entete-retour) .funnel-progression-intitule { position: static; margin: 0 0 8px; line-height: 1.2; }
/* Sous l'enveloppe, l'écran suit la colonne de 640 px de l'en-tête, 20 px
   sous la barre, avec les mêmes marges de 20 px. */
.page-enveloppe-tunnel .compte-carte:has(.funnel-ecran) { max-width: 640px; box-sizing: border-box; padding: 0 20px; margin: 0 auto 32px; }
.page-enveloppe-tunnel > .compte-main:has(.funnel-ecran) { padding-left: 0; padding-right: 0; }


/* ---- vitrine-commune.css ---- */
/* ---------- Blocs partagés de l'accueil et des landings (préfixe vit-) ----------
   Rendu par `src/site/blocs-vitrine.ts`. Ce fichier est concaténé après les
   feuilles des pages (ordre alphabétique) : ses règles communes passent après. */

/* Bandeau de logos qui défile en continu (médias, marques). La piste contient
   deux moitiés identiques et glisse d'une moitié : la boucle ne saute pas. */
.vit-defilant { overflow: hidden; padding: 20px 0; }
.vit-defilant-piste {
  display: flex; align-items: center; gap: 64px; width: max-content;
  margin: 0; padding: 0 32px; list-style: none;
  animation: vit-defile var(--vit-duree, 40s) linear infinite;
}
.vit-defilant:hover .vit-defilant-piste,
.vit-defilant:focus-within .vit-defilant-piste { animation-play-state: paused; }
.vit-defilant-logo { flex: none; }
.vit-defilant-logo a { display: block; border-radius: 8px; }
.vit-defilant-logo a:focus-visible { outline: 2px solid var(--craie); outline-offset: 4px; }
.vit-defilant-logo img {
  display: block; height: 64px; width: auto; max-width: 170px; object-fit: contain;
}
@keyframes vit-defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vit-defilant-piste {
    animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 24px 40px;
  }
  .vit-defilant-logo[data-copie] { display: none; }
}
@media (max-width: 560px) {
  .vit-defilant-piste { gap: 40px; }
  .vit-defilant-logo img { height: 48px; max-width: 130px; }
}

/* Pastilles de catégories au-dessus des jeux préférés, comme libetlou.com :
   une rangée qui défile au doigt quand elle dépasse la largeur. */
.vit-pastilles {
  display: flex; gap: 10px; list-style: none; margin: 0 auto 28px; padding: 4px 16px;
  max-width: 1240px; overflow-x: auto; scrollbar-width: none;
  justify-content: safe center;
}
.vit-pastilles::-webkit-scrollbar { display: none; }
.vit-pastilles li { flex: none; }
.vit-pastille {
  display: inline-block; white-space: nowrap; text-decoration: none;
  background: var(--jasmin); color: var(--craie); border-radius: 999px;
  padding: 4px 22px; font-size: 14px; line-height: 1.5;
}
.vit-pastille:hover, .vit-pastille:focus-visible { background: var(--blanc); }

/* Logo Google dans la note d'avis. */
.vit-logo-google { display: inline-block; vertical-align: -3px; margin: 0 2px; }

/* Prix et mensualisation sur deux lignes. */
.vit-prix-tarif, .vit-prix-mensuel { display: block; }
.vit-prix-mensuel { font-size: 0.62em; font-weight: 400; margin-top: 2px; }
.vit-prix-reserve { visibility: hidden; }

/* Blocs de réassurance à 5 groupes (« échanges offerts », « sans engagement »,
   « option d'achat », « casse & usure », « propreté garantie ») : landings
   Montessori, jeux de société et box, accueil et nos-formules (recette
   d'Alban, notes 71 et suivantes). Chaque groupe est une colonne centrée :
   l'image au-dessus de l'étiquette, elle-même au-dessus du texte. Les
   groupes, de largeur fixe, se rangent sur des lignes centrées, la dernière
   ligne comprise, quelle que soit la largeur de l'écran. */
.mm-badges, .jds-badges, .bx-badges, .acc-reassurance .pro-badges, .nf-avantages-liste {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 40px 24px; max-width: 1300px; margin-left: auto; margin-right: auto;
}
.mm-badge, .jds-badge, .bx-badge, .acc-reassurance .badge-reassurance, .nf-avantage {
  flex: 0 1 220px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.mm-badge img, .jds-badge img, .bx-badge img, .acc-reassurance .badge-reassurance img, .nf-avantage img {
  display: block; margin: 0 auto;
}
.mm-badge h3, .jds-badge h3, .bx-badge h3 {
  display: block; width: fit-content; white-space: normal; max-width: 100%; margin-left: auto; margin-right: auto;
}
.mm-badge p, .jds-badge p, .bx-badge p { margin-left: auto; margin-right: auto; }
@media (max-width: 560px) {
  /* Deux groupes par ligne, la cinquième centrée seule. */
  .mm-badges, .jds-badges, .bx-badges, .acc-reassurance .pro-badges, .nf-avantages-liste { gap: 28px 12px; }
  .mm-badge, .jds-badge, .bx-badge, .acc-reassurance .badge-reassurance, .nf-avantage { flex-basis: calc(50% - 6px); }
  .mm-badge img, .jds-badge img, .bx-badge img, .acc-reassurance .badge-reassurance img { height: 64px; }
  .nf-avantage img { width: 80px; height: 80px; }
  .mm-badge h3, .jds-badge h3, .bx-badge h3 { font-size: 14px; padding: 6px 14px; margin: 12px auto 10px; }
  .mm-badge p, .jds-badge p, .bx-badge p { font-size: 12px; margin-top: 0; }
}


/* ---- reglages.css ---- */
/* Surcharge des jetons réglée depuis le panneau de recette.
   ---------------------------------------------------------------------
   Écrit par  : le panneau de réglages fins des jetons, `/recette/reglages`
                (piste 7 du rapport de recette design du 3 octobre 2026).
   Mode d'emploi : `docs/recette-design/panneau-jetons.md`.

   Ce fichier est la **dernière** feuille de la concaténation de `/site.css`
   (voir `src/routes/statiques.ts`). Il ne contient jamais autre chose que des
   déclarations de variables CSS dans un `:root`, éventuellement doublées dans
   un `@media (min-width: 768px)` pour les jetons que la charte redéfinit au
   palier desktop.

   Pourquoi un fichier à part, et pas une retouche du fichier de la charte :
   `src/site/design-system/colors-et-types.css` est **généré** depuis
   `project/colors_and_type.css` du dépôt `libetlou-git/design-system`, et une
   empreinte enregistrée dans `empreinte.json` interdit d'y toucher à la main
   (`test/site-couleurs.test.ts`). C'est la bonne règle : ce fichier est la
   copie fidèle de la source de Morgane, et un réglage de recette n'a pas à
   faire mentir la source. Le réglage se pose donc par-dessus, ici, où il reste
   visible comme un écart assumé plutôt que fondu dans la charte.

   Et pourquoi le panneau n'écrit pas directement dans ce fichier sur le
   serveur : un panneau qui écrit dans le code servi est un pouvoir réel. Le
   panneau ouvre une branche et une demande de fusion, relue comme n'importe
   quelle autre. Une valeur réglée par Morgane n'atteint le staging qu'après
   fusion, comme le reste.

   Un fichier vide est l'état normal : il veut dire « aucun écart à la charte
   en ce moment ». */