/* ---- 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; }

/* ---- 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; }

/* ---- 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); }
}

/* ---- 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; }