/* ─────────────────────────────────────────────────────────────
   ELICARDS — mise en page des parcours
   S’ajoute à styles/app.css (carte, ouverture, boutons) et styles/effets.css, sans les modifier.
   Couleurs, typos, rayons : styles/tokens.css. Textes en rem : ils suivent le réglage « Taille du texte ».
   ───────────────────────────────────────────────────────────── */
.parcours .screen{padding:16px 16px calc(var(--tabbar-total) + 32px)}
.sans-onglets .tabbar{display:none}
.sans-onglets .parcours .screen{padding-bottom:calc(32px + var(--bas-securite))}
.ico{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}.small{font-size:.875rem}.center{text-align:center}
.h2{font:var(--font-weight-extra-bold) 1.5rem/1.1667 var(--font-title);margin:0 0 8px;letter-spacing:var(--title-tracking)}
.intro{color:var(--muted);line-height:1.5;margin:0 0 14px;font-size:1rem}
.parcours p{line-height:1.5}

/* Barre du haut & onglets */
.appbar h1.title{margin:0}
/* Avatar (Figma : top-bar › avatar) : 44 px, 2 lettres en title/s */
.avatar{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;flex:none;
  background:var(--bleu-600);color:#fff;font:var(--font-weight-extra-bold) 16px/20px var(--font-title);letter-spacing:-.01em}
.avatar.grand{width:64px;height:64px;font-size:1.6rem;cursor:default}
.pill-demo{margin-left:auto;margin-right:8px;font:var(--font-weight-bold) .75rem var(--font-text);padding:4px 8px;border-radius:var(--radius-pill);background:var(--gold-300);color:var(--bleu-950)}
.pill{display:inline-block;font:700 .75rem var(--font-text);padding:4px 8px;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--ink);margin:6px 0 0}
.pill.avert{background:color-mix(in srgb,var(--gold-300) 45%,transparent)}
.tabbar button[hidden]{display:none}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;cursor:pointer;font:var(--font-weight-bold) .75rem var(--font-text);color:var(--muted);padding:6px 0;position:relative;border-radius:var(--radius-l);min-height:52px}
.tabbar button svg{width:26px;height:26px}
.tabbar .tab-ico{position:relative;display:block;width:26px;height:26px}
.tabbar .tab-ico .ico{width:26px;height:26px;display:block}
.tabbar .tab-ico .ico-plein,.tabbar button[aria-current="page"] .tab-ico .ico-trait{display:none}
.tabbar button[aria-current="page"] .tab-ico .ico-plein{display:block}
/* Pastille (Figma : dot, 8 × 8, color/action/primary) en haut à droite de l’icône */
.tabbar .dot{position:absolute;top:0;left:18px;width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 2px var(--tabbar)}
.tabbar .tab-ico .count{top:-2px;left:20px}
.tabbar button[aria-current="page"]{color:var(--accent)}
.tabbar button[aria-current="page"]::after{content:"";position:absolute;bottom:0;width:22px;height:4px;border-radius:var(--radius-xs);
  background:linear-gradient(90deg,var(--bleu-600) 0 33%,var(--blanc) 33% 66%,var(--rouge-600) 66%);box-shadow:0 0 0 1px var(--line)}

/* Boutons et liens */
.parcours .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:1rem;min-height:48px}
.parcours .btn.small{font-size:.875rem;min-height:44px}
.btn.large{width:100%}
.btn.rouge{background:var(--rouge-600);box-shadow:0 5px 0 var(--rouge-700)}
.lien{border:0;background:none;padding:6px 2px;cursor:pointer;color:var(--accent);font:var(--font-weight-bold) 1rem var(--font-text);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.lien.clair{color:#fff;opacity:.9}
.lien.discret{color:var(--muted);text-decoration:none;font-weight:700}
.iconbtn{width:44px;height:44px;color:var(--ink)}
.iconbtn.clair{background:rgba(255,255,255,.16);color:#fff}

/* Onboarding */
.onb{display:flex;flex-direction:column;align-items:center;gap:16px;min-height:calc(100dvh - 120px - var(--bas-securite))}
.onb-track{display:flex;width:calc(100% + 32px);margin:0 -16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;flex:1}
.onb-track::-webkit-scrollbar{display:none}
.onb-slide{flex:none;width:100%;scroll-snap-align:center;padding:8px 24px;display:flex;flex-direction:column;align-items:center;text-align:center}
.onb-slide h2{font:var(--font-weight-extra-bold) 2rem/1.125 var(--font-title);margin:18px 0 8px;letter-spacing:var(--title-tracking)}
.onb-slide p{color:var(--muted);margin:0;max-width:34ch}
.onb-illu{height:min(52dvh,380px);width:100%;display:grid;place-items:center;border-radius:var(--radius-xl);background:var(--stage);position:relative;overflow:hidden}
.ob-fan{position:relative;width:150px;aspect-ratio:5/8}
.ob-fan .card{position:absolute;inset:0;width:100%}
.ob-fan .card:nth-child(1){transform:translateX(-62px) rotate(-12deg) scale(.9)}
.ob-fan .card:nth-child(3){transform:translateX(62px) rotate(12deg) scale(.9)}
.ob-fan .card:nth-child(2){z-index:2}
.ob-pack img{height:min(44dvh,320px);filter:drop-shadow(0 22px 22px rgba(0,0,0,.5));animation:flotte 4.5s ease-in-out infinite}
.ob-one{width:min(190px,44vw)}.ob-one .card{width:100%}
.onb-dots{display:flex;gap:8px}.onb-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:transform .2s}
.onb-dots i.cur{background:var(--primary);transform:scale(1.3)}
.onb .btn{width:min(100%,360px)}

/* Connexion / inscription */
.auth{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto}
.demo-cta{display:flex;align-items:center;gap:12px;justify-content:space-between;text-align:left;border:0;cursor:pointer;padding:16px 16px;border-radius:var(--radius-l);
  background:var(--stage);color:#fff;font-family:var(--font-text);min-height:64px}
.demo-cta b{display:block;font:var(--font-weight-extra-bold) 1.5rem/1.1667 var(--font-title);letter-spacing:var(--title-tracking)}
.demo-cta small{display:block;font-size:.875rem;opacity:.85;margin-top:3px}
.auth .h1{margin:8px 0 0}
.proto{display:flex;gap:8px;align-items:flex-start;margin:0;padding:8px 12px;border-radius:var(--radius-m);background:var(--surface-2);font-size:.875rem;line-height:1.4}
.proto .ico{margin-top:1px}
.auth form{display:flex;flex-direction:column;gap:12px}
.auth form .lien{align-self:flex-start;margin-top:-6px}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lab{font:var(--font-weight-bold) .875rem var(--font-text)}
.field-in{position:relative}
.field input,.parcours select{width:100%;min-height:50px;font:600 1rem var(--font-text);color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:var(--radius-l);padding:12px 16px}
.field input[type=password],.field-in input:has(+ .voir){padding-right:52px}
.field input:focus,.parcours select:focus{outline:3px solid var(--bleu-400);outline-offset:1px;border-color:transparent}
.field input[aria-invalid="true"]{border-color:var(--rouge-600)}
.voir{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.err,.form-err{color:var(--rouge-600);font:700 .875rem var(--font-text);margin:0}.err:empty,.form-err:empty{display:none}
.aide{color:var(--muted);font-size:.75rem}
.stack-full{display:flex;flex-direction:column;gap:8px}
.btn-social{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:var(--radius-l);border:2px solid var(--line);background:var(--surface);cursor:pointer;font:var(--font-weight-bold) 1rem var(--font-text);color:var(--ink)}
.btn-social em{font-style:normal;font-weight:600;color:var(--muted)}
.logo-ap{width:16px;height:18px;background:var(--ink);border-radius:50% 50% 45% 45%}
.logo-go{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:var(--font-weight-bold) .75rem var(--font-text);color:#fff;background:conic-gradient(#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0)}
.test-info{font-size:.875rem;color:var(--muted)}
.test-info summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.test-info code{background:var(--surface-2);padding:1px 4px;border-radius:var(--radius-xs);color:var(--ink)}

/* États (vide, succès, erreur) */
.etat{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 12px}
.etat h2{font:var(--font-weight-extra-bold) 1.5rem/1.1667 var(--font-title);margin:0;letter-spacing:var(--title-tracking)}
.etat p{margin:0;color:var(--muted);max-width:36ch}
.etat-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--accent)}
.etat-ico .ico{width:30px;height:30px}
.etat-ico.ok{background:color-mix(in srgb,var(--vert) 18%,transparent);color:var(--vert)}
.etat-ligne{display:flex;gap:8px;align-items:flex-start;padding:12px 16px;border-radius:var(--radius-l);background:var(--surface-2);margin:10px 0;font-size:1rem;line-height:1.4}
.etat-ligne.ok{background:color-mix(in srgb,var(--vert) 16%,var(--surface))}
.etat-ligne.err{background:color-mix(in srgb,var(--rouge-600) 14%,var(--surface))}
.encart{background:var(--surface);border-radius:var(--radius-l);padding:16px 16px;margin:16px 0;box-shadow:inset 0 0 0 2px var(--line)}
.encart p{margin:0 0 10px}
.encart-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Encart des notifications sur l’Agora (Figma : 02 · Agora › Encart notifications, 14/11/2026) : sans contour, ombre douce,
   « M’alerter quand un booster est prêt : » en title/s, 8 px entre les blocs ; « Oui, prévenez-moi ! » (bouton small) puis « Plus tard » (bouton texte), 16 px */
.encart-notif{display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-clickable)}
.encart-notif h2{margin:0;font:var(--font-weight-extra-bold) 16px/20px var(--font-title);letter-spacing:-.01em}
.encart-notif p{margin:0;color:var(--muted);font:var(--font-weight-regular) 14px/20px var(--font-text)}
.encart-notif .encart-actions{align-items:center;gap:16px}

/* Agora */
.agora-stage{min-height:0;padding-bottom:16px;gap:12px;border-radius:var(--radius-l)}   /* rayon 16 comme les tuiles (14/11/2026) */
.agora-stage .pack-idle{width:min(62vw,260px,calc((100dvh - 420px) * var(--ratio,.558)));min-width:160px}
/* Probabilités et règles : « i » cerclé discret en haut à gauche du bloc (Figma : booster/component/rules-button) */
.agora-stage > .regles-btn{position:absolute;top:8px;left:8px;width:40px;height:40px;display:grid;place-items:center;border:0;padding:0;background:none;color:rgba(255,255,255,.6);cursor:pointer;z-index:2}
.regles-btn span{width:24px;height:24px;box-sizing:border-box;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;font:var(--font-weight-bold) 13px/1 var(--font-text)}
/* Trophées dans la barre du haut (Figma : booster/component/trophy-counter) */
/* Tickets du quiz (Figma : booster/component/trophy-counter) : pastille surface-2, ticket 20 px + nombre en label/m ;
   en bleu (isUsable=true) quand ils suffisent à ouvrir le prochain booster tout de suite */
.tr-ind{display:flex;align-items:center;gap:4px;height:28px;box-sizing:border-box;border:0;padding:4px 8px;border-radius:var(--radius-s);background:var(--surface-2);cursor:pointer;color:var(--ink);font:var(--font-weight-bold) 14px/20px var(--font-text);font-variant-numeric:tabular-nums}
.tr-ind .ico{width:20px;height:20px}
.tr-ind[data-pret]{background:var(--accent);color:#fff}
.pack-idle:disabled{filter:grayscale(.6) brightness(.7) drop-shadow(0 20px 20px rgba(0,0,0,.4));animation:none;cursor:not-allowed}
/* Boosters disponibles dans le header de l’Agora (Figma : booster/component/ticket-indicator, 14/11/2026) : 76 × 48,
   socle surface-2 de 76 × 28 (rayon 6) d’où dépassent les boosters, étiquette à cheval sur le bas */
.tk-ind{position:relative;width:76px;height:48px;display:flex;flex-direction:column;align-items:center;border:0;padding:1px 0 0;background:none;cursor:pointer;color:inherit}
.tk-ind::before{content:"";position:absolute;left:0;right:0;top:10px;height:28px;border-radius:6px;background:var(--surface-2)}
/* 3 boosters de 28,7 × 44 qui se chevauchent (−12 px), le premier devant ; images exportées de Figma
   (booster/component/small-booster status=active / inactive, 14/11/2026), sans ombre ajoutée */
.tk-slots{position:relative;display:flex;margin-bottom:-14px}
.tk-slots img{position:relative;width:28.67px;height:44px;object-fit:contain}
.tk-slots img + img{margin-left:-12px}
.tk-slots img:nth-child(1){z-index:3}.tk-slots img:nth-child(2){z-index:2}.tk-slots img:nth-child(3){z-index:1}
/* booster indisponible en mode sombre (Figma : booster/component/small-booster status=inactive, mode=darkmode) */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tk-slots img.tk-vide{content:url("../assets/boosters/ticket-vide-sombre.webp")}}
:root[data-theme="dark"] .tk-slots img.tk-vide{content:url("../assets/boosters/ticket-vide-sombre.webp")}
.tk-lab{position:relative;z-index:4;padding:2px 8px;border:2px solid var(--surface);border-radius:var(--radius-pill);background:var(--bleu-600);color:#fff;font:var(--font-weight-bold) 10px/12px var(--font-text);font-variant-numeric:tabular-nums}
.tk-ind[data-etat="plein"] .tk-lab{background:var(--vert)}
.tk-bonus{position:absolute;z-index:5;top:-6px;right:-9.5px;padding:2px 4px;border-radius:var(--radius-pill);background:var(--primary);color:#fff;font:var(--font-weight-bold) 10px/12px var(--font-text)}
.tk-aide{margin:0;font-size:.875rem;color:var(--argent);text-align:center;max-width:32ch}
.agora-stage .btn{width:min(100%,320px)}
.attente{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;cursor:pointer;margin:0 0 16px;padding:16px;border-radius:var(--radius-l);
  background:linear-gradient(135deg,var(--gold-100),var(--gold-300));color:var(--bleu-950);font-family:var(--font-text);box-shadow:var(--shadow-clickable)}
.attente b{display:block;font-size:1rem}.attente small{font-size:.875rem}
.attente-ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.6);flex:none}
.tuile{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;cursor:pointer;padding:16px;border-radius:var(--radius-l);
  background:var(--surface);color:var(--ink);font-family:var(--font-text);box-shadow:var(--shadow-clickable);margin-top:16px;min-height:64px}
.tuile b{display:block;font-size:1rem}.tuile small{display:block;color:var(--muted);font-size:.875rem;margin-top:2px}
.tuile > span:nth-child(2){flex:1}
.tuile-ico{width:42px;height:42px;border-radius:var(--radius-m);display:grid;place-items:center;background:var(--surface-2);color:var(--accent);flex:none}
.tuile-prop{background:var(--bleu-600);color:#fff}.tuile-prop small{color:var(--bleu-100)}.tuile-prop .tuile-ico{background:rgba(255,255,255,.18);color:#fff}
.secondaires{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}   /* Agora : 16 px entre les blocs (14/11/2026) */
.secondaires .tuile{margin-top:0}
/* Accès au quiz (Figma : quiz/component/quiz-entry, 14/11/2026) : 12 px entre les blocs, chevron à droite quand il est disponible, poing levé 32 px (marge 6) sur accent, ou sur surface-2 sans quiz,
   titre title/s, sans contour (ombre douce), sous-titre body/m + pastille label/s (ticket +1 sur accent, ou compte à rebours sur surface-2) */
.quiz-entree{gap:12px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-clickable)}
.quiz-entree .tuile-ico{width:44px;height:44px;border-radius:var(--radius-m)}
.quiz-entree .tuile-ico .ico{width:32px;height:32px}
.quiz-entree[data-etat="dispo"]{padding-right:12px}
.quiz-entree[data-etat="dispo"] .tuile-ico{background:var(--accent);color:#fff}
.qz-chevron{width:24px;height:24px;flex:none;color:var(--accent)}   /* quiz disponible : chevron à droite (Figma icon/component/right) */
.quiz-entree[data-etat="vide"]{box-shadow:none}   /* indisponible : pas cliquable, donc pas d’ombre (14/11/2026) */
.quiz-entree[data-etat="vide"] .tuile-ico{background:var(--surface-2);color:var(--muted)}
.quiz-entree b{font:var(--font-weight-extra-bold) 16px/20px var(--font-title);letter-spacing:-.01em}
.quiz-entree[data-etat="vide"] b{color:var(--muted)}
.qz-sous{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:4px;color:var(--muted);font:var(--font-weight-regular,400) 14px/20px var(--font-text)}
.qz-pastille{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;border-radius:var(--radius-s);background:var(--surface-2);color:var(--muted);font:var(--font-weight-semi-bold) 12px/16px var(--font-text);font-variant-numeric:tabular-nums}
.qz-pastille.gain{background:var(--accent);color:#fff}
.qz-pastille .ico{width:16px;height:16px}
.quiz-entree:disabled{cursor:default}
.qz-jetons{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.qz-jetons > span{display:flex;gap:4px}
.qz-jetons i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.qz-jetons i.on{background:var(--accent)}
.qz-jetons small{margin:0;font:var(--font-weight-bold) 10px/12px var(--font-text);color:var(--muted)}
.tuile.petite{flex-direction:column;align-items:flex-start;gap:12px;padding:16px;height:100%}
.tuile.petite b{font-size:1rem}
.op-note{margin:0;font:700 .875rem var(--font-text);color:var(--gold-300)}
.op-card .card{width:100%}
.opener .op-actions .row{align-items:center}

/* Règles et probabilités */
.regles{padding-left:20px;margin:6px 0 12px;line-height:1.5}.regles li{margin:4px 0}
table.proba{width:100%;border-collapse:collapse;margin:4px 0 10px;font-size:1rem}
table.proba th,table.proba td{padding:8px 4px;border-bottom:1px solid var(--line);text-align:left;font-weight:700}
table.proba td{text-align:right;font-variant-numeric:tabular-nums}

/* Choix segmentés */
.seg{display:flex;gap:4px;padding:4px;border-radius:var(--radius-l);background:var(--surface-2);margin:0 0 16px}
/* Collection : 8 px sous la barre du haut, puis 16 px entre le choix de vue, l’édition et les cartes */
.parcours .screen:has(> .seg:first-child, > .edition:first-child){padding-top:8px}
.seg-b{flex:1;border:0;cursor:pointer;min-height:44px;border-radius:var(--radius-m);background:none;font:var(--font-weight-bold) .875rem var(--font-text);color:var(--ink)}
.seg-b[aria-pressed="true"]{background:var(--surface);box-shadow:0 1px 3px rgba(7,14,54,.18)}
.parcours .chip{min-height:44px;font-size:.88rem}

/* Collection */
.col-grid{grid-template-columns:repeat(3,1fr);gap:0 8px}
/* cases hors de l’écran non dessinées (jusqu’à 100 cartes) ; leur taille reste connue grâce au format 5:8 (boîte de contenu,
   la marge du bas laisse dépasser l’étiquette du nombre d’exemplaires : content-visibility coupe ce qui sort de la case) */
/* marge autour de la carte (compensée par une marge négative) : content-visibility coupe tout ce qui sort de la case,
   l’ombre des cartes et l’étiquette du nombre d’exemplaires y tiennent (09/11/2026) */
.col-grid .col-tile{content-visibility:auto;box-sizing:content-box;aspect-ratio:5/8;padding:0 6px 16px;margin:0 -6px}
/* dos d’une carte à trouver : même arrondi que la carte (16 px sur 300 de large), quelle que soit sa taille */
.col-grid .slot.locked{border-radius:5.333% / 3.333%;box-shadow:0 2px 6px -2px rgba(7,14,54,.35)}
/* Vue Variantes (15/11/2026) : 5 cartes par rangée, une rangée par candidat (normale → or) */
.col-grid.col-var{grid-template-columns:repeat(5,1fr);gap:0 6px}
.col-grid.col-var .col-tile{padding:0 4px 10px;margin:0 -4px}
.col-var .qte{left:2px;bottom:-5px;min-width:16px;height:14px;padding:1px 4px;font-size:9px}
/* Case vide numérotée (Figma : collection/component/empty-slot) : fond surface-2, liseré, numéro du candidat
   (Bricolage) et icône de la finition, en gris-bleu atténué */
.case-vide{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;box-sizing:border-box;
  aspect-ratio:5/8;border-radius:5.333% / 3.333%;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);cursor:pointer}
.case-vide b{font:var(--font-weight-extra-bold) 20px/24px var(--font-title);letter-spacing:-.02em;opacity:.5;font-variant-numeric:tabular-nums}
.case-vide .fin-ico{width:10px;height:10px;opacity:.5}
/* Encart de l’édition (Figma : collection/component/edition-rarity-completion) : titre de l’édition, étiquettes par finition
   (vue Variantes), barre d’avancement — fond surface-2, rayon 16, marges et écarts de 12 */
.edition{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-l);background:var(--surface-2);margin:0 0 16px}
.ed-titre{display:block;width:145px;height:48px;object-fit:contain}
.ed-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
/* Figma : collection/cell/rarity-tag — fond surface, icône 12, 2 px, « 1/21 » en label/s (14/11/2026) */
.ed-tag{display:flex;align-items:center;gap:2px;padding:3px 4px;border-radius:var(--radius-m);background:var(--surface);color:var(--muted);
  font:var(--font-weight-semi-bold) 12px/16px var(--font-text);font-variant-numeric:tabular-nums}
.ed-tag .fin-ico{width:12px;height:12px}
/* Avancement (Figma : collection/component/progress-meter) : la barre, puis « 4/21 » ou « 8/105 » à droite */
.col-meter{display:flex;align-items:center;gap:6px;align-self:stretch}
.col-meter .bar{flex:1;height:6px;background:var(--surface)}
.col-meter small{margin:0;font:var(--font-weight-semi-bold) 12px/16px var(--font-text);color:var(--muted);font-variant-numeric:tabular-nums}
/* Collection vide (Figma : 📚 Bibliothèque › 02) : le dos d’une carte, 120 × 192 */
.etat.vide .vide-dos{width:120px;aspect-ratio:5/8;border-radius:5.333% / 3.333%;box-shadow:0 4px 12px -4px rgba(7,14,54,.45);margin-bottom:16px}
/* Nombre d’exemplaires (Figma : collection/component/quantity-tag), dès 2 : en bas à gauche de la carte, à cheval sur le bord bas
   (Collection et carrousel de la page candidat) */
.qte{position:absolute;left:4px;bottom:-6px;z-index:8;box-sizing:border-box;min-width:20px;height:16px;padding:2px 6px;
  border-radius:var(--radius-xs);background:var(--gris-bleu-600);color:var(--blanc);box-shadow:0 0 0 1.5px var(--blanc);
  font:var(--font-weight-bold) 10px/12px var(--font-text);text-align:center;font-variant-numeric:tabular-nums}
.col-tile.arrivee .qte{animation:qte-arrivee .32s .18s cubic-bezier(.22,1,.36,1) backwards}
@keyframes qte-arrivee{from{opacity:0;transform:scale(.6)}}
.col-tile{border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;gap:6px;color:inherit;text-align:center;font-family:var(--font-text)}
.col-tile .slot{display:block}
.col-cap{font:700 .875rem var(--font-text);color:var(--ink)}
.col-cap b{font-size:1rem}

/* Liste des candidats */
.recherche{margin-bottom:12px}
.cand-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cand-row{display:flex;align-items:center;gap:12px;width:100%;border:0;cursor:pointer;text-align:left;padding:8px 12px;border-radius:var(--radius-l);background:var(--surface);color:var(--ink);font-family:var(--font-text);border-left:5px solid var(--c);min-height:64px}
.cand-pic{width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--c);flex:none}
.cand-pic img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.cand-txt{flex:1;min-width:0}.cand-txt b{display:block;font-size:1rem}.cand-txt small{display:block;color:var(--muted);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cand-own{font:var(--font-weight-bold) .75rem var(--font-text);color:var(--muted)}

/* Page candidat : boutons posés sur chaque carte du carrousel (Figma : card/component/card-action), à cheval sur le bord
   bas, centrés ; seuls ceux de la carte du centre sont visibles (.cur, posé par rendreCandidat) */
.pslide{position:relative}
.pslide-carte{position:relative;width:100%;cursor:zoom-in}
.pslide-carte:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:var(--radius-card)}
.pactions{position:absolute;left:50%;top:100%;translate:-50% -50%;display:flex;gap:12px;z-index:9;
  opacity:0;pointer-events:none;transition:opacity .22s ease}
.pslide.cur .pactions{opacity:1;pointer-events:auto}
/* 40 × 40, sobres : fond de surface et icône encre ; « améliorer » possible = tout le bouton en or, avec un reflet qui passe */
.pact{position:relative;width:40px;height:40px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;padding:0;overflow:hidden;
  background:var(--surface);color:var(--ink);box-shadow:0 2px 8px rgba(7,14,54,.22);-webkit-tap-highlight-color:transparent}
.pact .ico{width:20px;height:20px}
.pact:active{scale:.94}
.pact[aria-disabled="true"]{color:var(--gris-bleu-300)}
.pact.ameliorer.pret{color:var(--blanc);background:linear-gradient(135deg,var(--gold-300),var(--gold-500) 50%,var(--gold-700));
  animation:pact-lueur 2.6s ease-in-out infinite}
.pact.ameliorer.pret::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,244,194,.9) 50%,transparent 62%) no-repeat;background-size:260% 100%;animation:pact-reflet 2.6s ease-in-out infinite}
@keyframes pact-lueur{0%,100%{box-shadow:0 2px 8px rgba(7,14,54,.22),0 0 0 0 rgba(242,211,117,0)}50%{box-shadow:0 2px 8px rgba(7,14,54,.22),0 0 14px 3px rgba(242,211,117,.55)}}
@keyframes pact-reflet{0%,40%{background-position:130% 0}80%,100%{background-position:-30% 0}}
html.anim-reduites .pact.ameliorer.pret,html.anim-reduites .pact.ameliorer.pret::after{animation:none}

/* Modale centrale (Figma : program/component/upgrade-dialog) : feuille({ classe: "modale" }) */
dialog.sheet.modale{margin:auto;width:calc(100% - 48px);max-width:342px;border-radius:var(--radius-xl);text-align:center;box-shadow:0 12px 32px rgba(7,14,54,.35)}
dialog.sheet.modale[open]{animation:modale-entre .26s cubic-bezier(.2,.8,.2,1)}
@keyframes modale-entre{from{opacity:0;scale:.92}}
dialog.sheet.modale .sh-in{padding:24px;display:flex;flex-direction:column;align-items:center;gap:16px}
dialog.sheet.modale h2{font:var(--font-weight-extra-bold) 20px/24px var(--font-title);letter-spacing:var(--title-tracking);margin:0;color:var(--ink)}
dialog.sheet.modale p{margin:0;font:14px/20px var(--font-text);color:var(--muted)}
dialog.sheet.modale .sh-actions{margin:0;width:100%}
.mo-ico{cursor:default;width:48px;height:48px}.mo-ico .ico{width:24px;height:24px}

/* Animation d’amélioration (Figma : 06 · Amélioration — animation), dans l’écran d’ouverture (#opener) */
.am-scene{position:relative;z-index:3;aspect-ratio:5/8}
.am-copie,.am-nouvelle{position:absolute;inset:0}
.am-copie .card,.am-nouvelle .card{width:100%}
.am-titre{position:absolute;left:-40px;right:-40px;top:calc(100% + 28px);margin:0;text-align:center;color:#fff;font:var(--font-weight-bold) 14px/20px var(--font-text);opacity:0}
.am-rayons{position:absolute;inset:-60%;z-index:-1}
.am-eclat{position:fixed;z-index:66;width:7px;height:7px;border-radius:50%;pointer-events:none;background:#fff;
  box-shadow:0 0 6px 2px color-mix(in srgb,var(--lueur,#fff) 85%,transparent),0 0 14px 4px color-mix(in srgb,var(--lueur,#fff) 45%,transparent)}
.am-suite{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 32px);margin:0;text-align:center;color:#fff;font:var(--font-weight-semi-bold) 14px/20px var(--font-text)}

/* Feuilles du bas */
dialog.sheet{max-width:480px;width:100%;margin:auto auto 0;border-radius:var(--radius-xl) var(--radius-xl) 0 0;max-height:92dvh;overflow:auto;
  padding:0 0 env(safe-area-inset-bottom,0px)}
dialog.sheet[open]{animation:monte .26s cubic-bezier(.2,.8,.2,1)}
@keyframes monte{from{transform:translateY(40px);opacity:0}}
.sh-in{padding:16px 16px 24px}
.sh-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.sh-top h2{font:var(--font-weight-extra-bold) 1.5rem/1.1667 var(--font-title);margin:0;letter-spacing:var(--title-tracking)}
.sh-in p{margin:8px 0}
.sh-in h3{font:var(--font-weight-extra-bold) 1rem/1.25 var(--font-title);margin:16px 0 4px;letter-spacing:-.01em}
.sh-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.sh-actions .btn{width:100%}
.sh-actions.row3{flex-direction:row}.sh-actions.row3 .btn{flex:1;min-width:0;padding-inline:8px}

/* Questionnaire et consentement */
fieldset.q{border:0;padding:0;margin:14px 0}
fieldset.q legend{font:var(--font-weight-extra-bold) 1rem/1.25 var(--font-title);margin-bottom:8px;padding:0;letter-spacing:-.01em}
.choices{display:flex;flex-direction:column;gap:6px}
.choice{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 16px;border-radius:var(--radius-m);background:var(--bg);box-shadow:inset 0 0 0 2px var(--line);cursor:pointer;font:600 1rem var(--font-text)}
.choice input{width:20px;height:20px;accent-color:var(--bleu-600);flex:none}
.choice:has(input:checked){box-shadow:inset 0 0 0 3px var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.consent{display:flex;gap:8px;align-items:flex-start;padding:12px;border-radius:var(--radius-m);background:var(--surface-2);cursor:pointer;font:600 1rem/1.4 var(--font-text)}
.consent input{width:22px;height:22px;flex:none;accent-color:var(--bleu-600);margin:0}

/* Profil et réglages */
.profil-tete{display:flex;gap:16px;align-items:center;background:var(--surface);padding:16px;border-radius:var(--radius-l)}
.profil-tete h2{margin:0;font:var(--font-weight-extra-bold) 1.5rem/1.1667 var(--font-title);letter-spacing:var(--title-tracking)}
.profil-tete p{margin:2px 0 0;word-break:break-all}
.liste{background:var(--surface);border-radius:var(--radius-l);overflow:hidden}
.ligne{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:56px;padding:12px 16px;border:0;border-top:1px solid var(--line);background:none;cursor:pointer;text-align:left;color:var(--ink);font:700 1rem var(--font-text)}
.ligne:first-child{border-top:0}
.ligne > span:first-child{display:flex;flex-direction:column;gap:2px}
.ligne > span:first-child:has(> .ico){flex-direction:row;align-items:center;gap:8px}
.ligne small{font-weight:500;color:var(--muted);font-size:.875rem}
.ligne.danger{color:var(--rouge-600)}
.switch{width:50px;height:30px;border-radius:var(--radius-pill);background:var(--line);position:relative;flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
[aria-checked="true"] .switch{background:var(--vert)}
[aria-checked="true"] .switch::after{transform:translateX(20px)}
.suppr{display:flex;flex-direction:column;gap:12px}

/* Toasts */
.toasts{position:fixed;left:50%;bottom:calc(var(--tabbar-total) + 18px);transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;width:min(92vw,440px);pointer-events:none}
.toast{background:var(--bleu-950);color:#fff;padding:12px 16px;border-radius:var(--radius-l);font:700 1rem/1.35 var(--font-text);box-shadow:0 10px 30px rgba(7,14,54,.35);animation:monte .25s ease-out;transition:opacity .3s,transform .3s}
.toast.ok{background:var(--vert)}.toast.err{background:var(--rouge-700)}
.toast.out{opacity:0;transform:translateY(8px)}

/* Mon programme (Figma : ⭐ Mon programme) : la page (carte, mesures mises en avant, autres mesures), l’ajout (thématique puis mesure) */
.mp-card .c-pic .clip .mp-silhouette{position:absolute;left:0;bottom:0;width:100%;height:calc(173 * var(--u))}
/* Ta photo : posée dans la fenêtre portrait, à sa forme (une photo n’est pas détourée, elle ne déborde pas au-dessus) */
.mp-card .c-pic .clip.mp-photo{clip-path:var(--shape);height:calc(155 * var(--u))}
.mp-card .c-pic .clip.mp-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.mp-grande .c-pic{cursor:pointer}
.mp-grande .c-pic:focus-visible{outline:3px solid var(--bleu-400);outline-offset:3px}
/* Recadrage de la photo (Figma : ⭐ Mon programme › 06) */
dialog.recadre{max-width:none;max-height:none;width:100%;height:100%;margin:0;border:0;padding:calc(env(safe-area-inset-top,0px) + 16px) 0 calc(var(--bas-securite) + 16px);background:var(--bleu-950);color:#fff;display:flex;flex-direction:column;gap:12px;touch-action:none;overscroll-behavior:contain}
dialog.recadre::backdrop{background:#000}
.rc-tete{padding:16px 16px 0;text-align:center}
.rc-tete h2{margin:0 0 8px;font:var(--font-weight-extra-bold) 20px/24px var(--font-title);letter-spacing:var(--title-tracking)}
.rc-tete p{margin:0 16px;font:400 14px/20px var(--font-text);color:rgba(255,255,255,.75)}
.rc-scene{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab}
.rc-img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.rc-cadre{position:absolute;border:2px solid #fff;border-radius:12px;box-shadow:0 0 0 100vmax rgba(0,0,0,.55);pointer-events:none}
.rc-aide{margin:0;text-align:center;font:var(--font-weight-semi-bold) 12px/16px var(--font-text);color:rgba(255,255,255,.75)}
.rc-actions{display:flex;gap:12px;padding:0 16px}
.rc-actions .btn{flex:1}
.mp-card .c-data.mp-data > div{flex:1}
.mp-card .c-body li.vide{opacity:.55;background:transparent;box-shadow:inset 0 0 0 calc(.9 * var(--u)) rgba(255,255,255,.35)}
.mp-page,.mp-ajout{display:flex;flex-direction:column;gap:12px}
.mp-page > p,.mp-page > .h2,.mp-ajout > p,.mp-ajout > .h2{margin:0}
.mp-page .ph2{margin:8px 0 0}
.mp-haut{display:flex;justify-content:flex-end;margin:-8px 0 -4px}
.mp-haut .iconbtn{width:40px;height:40px}
.mp-grande{width:min(78vw,300px);margin:0 auto}
.mp-grande .card{width:100%;touch-action:auto}
/* Mesures à l’aveugle : liseré neutre (aucune couleur de parti) ; une seule ouverte = la mesure choisie */
.mp-liste{display:flex;flex-direction:column;gap:8px}
.mp-ax{--c:var(--line)}
.mp-ax[open]{--c:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
/* Bouton fixé en bas, au-dessus de la barre d’onglets et de la zone du geste d’accueil ; fond dégradé pour rester lisible */
.mp-bas{position:sticky;bottom:calc(var(--tabbar-total) + 12px);z-index:5;margin:0 -16px;padding:16px 16px 0;background:linear-gradient(transparent,var(--bg) 16px)}
.mp-bas .btn{width:100%}
.mp-ajout .ligne:disabled{opacity:.45;cursor:default}
/* Mes mesures (Figma : program/component/my-measure) : thématique, titre, chevron, poignée ; ouverte : paragraphe,
   « Supprimer du programme › » · « Modifier » (boutons texte, Figma : component/text-button) */
.mp-liste-m{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mp-sep .ph2{margin:8px 0 0}
.mp-sep.premier .ph2::before{display:none}
.mp-groupe{margin:8px 0 0;font:var(--font-weight-bold) 14px/20px var(--font-text);color:var(--accent)}
.mp-groupe.deja{font-weight:500;color:var(--muted)}
.mp-ajout .liste .ligne{width:100%}
.mp-m{position:relative;border-radius:var(--radius-l);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
/* Mesures exactes de Figma (my-measure, page=program, 14/11/2026) : marges 16/4/16/16 (page=candidate : 16), rayon 16, liseré 1 px
   (color/border, color/accent ouverte) ; en-tête : titre (thématique 12/16 Bold capitales +5 %, icône 14 dans une boîte 14 × 16
   avec 2 px en bas, 6 px ; 8 px ; titre 16/24 SemiBold), 8 px, chevron 24, 8 px, poignée 24 ; ouverte : 8 px, paragraphe 16/24
   (marge droite 12), 8 px, actions */
.mp-m details{padding:16px 4px 16px 16px}
.mp-m summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
.mp-m summary::-webkit-details-marker{display:none}
.mp-m-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.mp-m-t small{display:flex;align-items:center;gap:6px;font:var(--font-weight-bold) 12px/16px var(--font-text);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mp-m-t b{font:var(--font-weight-semi-bold) 16px/24px var(--font-text);color:var(--ink)}
.mp-m-chev{flex:none;display:flex;color:var(--ink)}
.mp-m-chev .ico{width:24px;height:24px;transition:transform .2s}
.mp-m:has(details[open]){box-shadow:inset 0 0 0 1px var(--accent)}
.mp-m details[open] .mp-m-chev{color:var(--accent)}
.mp-m details[open] .mp-m-chev .ico{transform:rotate(180deg)}
.mp-m-corps{margin-top:8px;padding-right:12px;display:flex;flex-direction:column;gap:8px}
.mp-m-corps.anime{overflow:hidden}
.mp-m-corps p{margin:0;font:400 16px/24px var(--font-text);color:var(--muted)}
.mp-m-corps .mp-m-act{display:flex;align-items:center;gap:8px;color:var(--accent);font:var(--font-weight-semi-bold) 12px/16px var(--font-text)}
.mp-poignee{flex:none;width:24px;height:24px;display:grid;place-items:center;border:0;padding:0;background:none;color:var(--argent);cursor:grab;touch-action:none;border-radius:var(--radius-xs)}
.mp-poignee .ico{width:24px;height:24px}
.mp-m.glisse{z-index:5;transition:none;box-shadow:inset 0 0 0 1px var(--accent),0 12px 28px rgba(7,14,54,.25)}
.mp-m.glisse .mp-poignee{cursor:grabbing}
.mp-liste-m.en-glisse{user-select:none;-webkit-user-select:none}
.mp-theme-ico{width:14px;height:14px;flex:none;margin-bottom:2px}   /* Figma icon-align : boîte 14 × 16, 2 px en bas → icône 1 px plus haut que le centre de la thématique */
.mp-m details[open] .mp-m-t small{color:var(--accent)}
/* Choix d’une mesure (Figma : program/component/my-measure, page=theme) */
.mp-choix{background:var(--surface);border-radius:var(--radius-m);box-shadow:inset 0 0 0 1px var(--line);padding:12px 16px}
.mp-choix[open]{box-shadow:inset 0 0 0 1px var(--accent)}
.mp-choix summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
.mp-choix summary::-webkit-details-marker{display:none}
.mp-choix-t{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.mp-choix-t b{font:var(--font-weight-bold) 16px/20px var(--font-text)}
.mp-check{display:none;width:20px;height:20px;flex:none;color:var(--accent)}
.mp-choix[open] .mp-check{display:block}
.mp-choix[open] .mp-m-chev .ico{transform:rotate(180deg)}
.mp-choix .mp-m-chev .ico{width:24px;height:24px;transition:transform .2s}
.mp-choix p{margin:12px 0 0;font:400 14px/20px var(--font-text);color:var(--muted)}
.mp-actuelle{display:block;margin-top:4px;font:var(--font-weight-semi-bold) 12px/16px var(--font-text);color:var(--accent)}
.mp-ajout .ligne .mp-theme-ico{width:24px;height:24px;margin:0;flex:none;color:var(--accent)}
.mp-ajout .ligne > span:first-child{display:flex;align-items:center;gap:12px}
.mp-ajout .ligne > span:first-child > span{display:flex;flex-direction:column}
.mp-ax.actuelle summary{color:var(--accent)}
/* Bouton texte (Figma : component/text-button, hasLeadingIcon · hasTrailingIcon) */
.btn-texte{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;cursor:pointer;font:var(--font-weight-bold) 14px/20px var(--font-text);color:var(--accent)}
.btn-texte .ico{width:20px;height:20px}
.mp-bas .btn{display:flex;align-items:center;justify-content:center;gap:8px}

/* Avis et soutien */
.bloc{background:var(--surface);border-radius:var(--radius-l);padding:16px;margin-bottom:14px}
.bloc .btn{margin-top:4px}
.soutien{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;max-width:440px;margin:0 auto}
.soutien p{margin:4px 0}
.soutien-ico{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--rouge-600) 14%,transparent);color:var(--rouge-600)}
.soutien-ico .ico{width:34px;height:34px}
.soutien .encart{text-align:left;width:100%}
.soutien .btn{margin:6px 0}

/* Partage : aperçu du gabarit et gabarit d’export (en px : indépendant de la taille du texte) */
.sheet-partage .seg{margin-top:4px}
.gab-apercu{margin:10px auto 4px;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(7,14,54,.35);position:relative}
.gab-scale{transform-origin:0 0;width:max-content}
.bonus-ligne{display:flex;align-items:center;justify-content:center;gap:8px;font:700 .875rem var(--font-text);color:var(--accent)}
.simu{padding:12px;border-radius:var(--radius-l);background:var(--surface-2);margin-top:10px}.simu p{margin:0 0 6px}
.gab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;padding:90px 80px;box-sizing:border-box;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 35%,#1F3BB3 0%,#0B1650 62%,#070E36 100%);color:#fff;font-family:"Public Sans",system-ui,sans-serif}
.gab::before{content:"";position:absolute;inset:0;opacity:.5;background:repeating-conic-gradient(from 0deg at 50% 40%,rgba(255,255,255,.07) 0 6deg,transparent 6deg 18deg)}
.gab > *{position:relative}
.gab-top{display:flex;align-items:center;gap:24px;font:800 64px/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em}
.gab-flag{display:flex;width:66px;height:46px;border-radius:8px;overflow:hidden}
.gab-flag i{flex:1}.gab-flag i:nth-child(1){background:#1F3BB3}.gab-flag i:nth-child(2){background:#fff}.gab-flag i:nth-child(3){background:#D7263D}
.gab-card .card{width:100%}
.gab-story .gab-card{width:700px}.gab-publication .gab-card{width:520px}.gab-carre .gab-card{width:430px}
.gab-carre{gap:28px;padding:50px}.gab-carre .gab-top{font-size:48px}.gab-publication{gap:34px;padding:60px}
.gab-txt{margin:0;text-align:center;font:800 46px/1.2 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;max-width:900px}
.gab-txt b{font-weight:800}
.gab-txt small{display:block;font:400 30px/1.45 "Public Sans",sans-serif;letter-spacing:0;opacity:.8;margin-top:16px}
.gab-carre .gab-txt{font-size:34px}.gab-carre .gab-txt small{font-size:24px;margin-top:8px}
.gab-publication .gab-txt{font-size:40px}
.gab-foot{position:absolute;left:0;right:0;bottom:36px;margin:0;text-align:center;font:600 24px "Public Sans",sans-serif;opacity:.65}
.gab-carre .gab-foot{bottom:18px;font-size:20px}
.export-root{background:#0B1650}
.export-root .card .tilt,.export-root .card .flip{transform:none!important;transform-style:flat!important}

/* Accessibilité */
html.anim-reduites *,html.anim-reduites *::before,html.anim-reduites *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}

/* Mode dev (Figma : 👤 Profil & réglages › 06) et Sources et méthode (› 07) */
.dev{display:flex;flex-direction:column;gap:12px}
.dev .ph2{margin:12px 0 0}
.dev .filters{margin:0}
.methode{display:flex;flex-direction:column;gap:20px}
.methode section{display:flex;flex-direction:column;gap:4px}
.methode h2{margin:0;font:var(--font-weight-extra-bold) 1rem/1.25 var(--font-title);letter-spacing:-.01em}
.methode p{margin:0;font-size:1rem;line-height:1.5;color:var(--muted)}

/* Quiz « Qui propose cette mesure ? » (Figma : 🏠 Accueil & boosters › 07) */
/* ───── Quiz plein écran (Figma : 🏠 Accueil & boosters › 07 à 09) ───── */
dialog.quiz{max-width:none;max-height:none;width:100%;height:100%;margin:0;border-radius:0;background:var(--bleu-950);color:#fff;overflow:hidden}
dialog.quiz[open]{display:block}
dialog.quiz::backdrop{background:var(--bleu-950)}
.qz{height:100%;display:flex;flex-direction:column;background:var(--stage);padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.qz-tete{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-8) var(--space-16)}
.qz-fermer{width:40px;height:40px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.qz-fermer .ico{width:22px;height:22px}
.qz-cale{width:40px;flex:none}
.qz-etape{flex:1;display:flex;flex-direction:column;gap:var(--space-8);text-align:center;font:var(--font-weight-semi-bold) 12px/16px var(--font-text);color:rgba(255,255,255,.75)}
.qz-prog{display:flex;gap:var(--space-4)}
.qz-prog i{flex:1;height:4px;border-radius:var(--radius-pill);background:rgba(255,255,255,.22)}
.qz-prog i.fait{background:#fff}.qz-prog i.cur{background:var(--rouge-400)}
.qz-corps{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;justify-content:center;gap:var(--space-16);padding:var(--space-16) var(--space-20)}
.qz-corps > *{flex:none}
.qz-q{margin:0;text-align:center;font:var(--font-weight-bold) 12px/16px var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.qz-carte{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-24);border-radius:var(--radius-xl);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.qz-guil{font:800 italic 40px/40px var(--font-card-name);color:var(--rouge-400);height:24px}
.qz-carte h2{margin:0;font:var(--font-weight-extra-bold) 24px/28px var(--font-title);letter-spacing:-.01em}
.qz-carte p{margin:0;font:400 14px/20px var(--font-text);color:rgba(255,255,255,.75)}
.qz-reps{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);padding:var(--space-4) var(--space-16) 0}
.qz-rep{display:flex;align-items:center;gap:var(--space-8);min-height:74px;padding:var(--space-8) var(--space-12) var(--space-8) var(--space-8);border:0;border-radius:var(--radius-m);
  background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff;text-align:left;cursor:pointer;transition:transform .12s,background-color .2s,opacity .2s}
.qz-rep:active:not(:disabled){transform:scale(.97)}
.qz-rep:disabled{cursor:default}
.qz-rep.ok{background:var(--vert)}.qz-rep.ko{background:var(--rouge-600)}.qz-rep.off{opacity:.45}
.qz-pic{width:56px;height:56px;flex:none;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.14)}
.qz-pic img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.qz-nom{display:flex;flex-direction:column;min-width:0}
.qz-nom small{font:var(--font-weight-bold) 10px/12px var(--font-text);color:rgba(255,255,255,.75)}
.qz-nom b{font:var(--font-weight-bold) 14px/20px var(--font-text);overflow-wrap:anywhere}
.qz-pied{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-8);padding:var(--space-12) var(--space-16) var(--space-32);min-height:56px}
.qz-pied .btn{width:100%}
.qz-aide,.qz-retour{margin:0;text-align:center;font:var(--font-weight-semi-bold) 12px/16px var(--font-text);color:rgba(255,255,255,.6)}
.qz-retour{font:var(--font-weight-bold) 14px/20px var(--font-text);color:#fff}
.qz-res{text-align:center;gap:var(--space-12)}
.qz-score{margin:0;font:var(--font-weight-extra-bold) 64px/64px var(--font-title);letter-spacing:var(--title-tracking)}
.qz-res h2{margin:0;font:var(--font-weight-extra-bold) 24px/28px var(--font-title);letter-spacing:-.01em}
.qz-detail{margin:0;font:400 14px/20px var(--font-text);color:rgba(255,255,255,.75)}
.qz-recap{list-style:none;margin:var(--space-16) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-8);text-align:left}
.qz-recap li{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12);border-radius:var(--radius-m);background:rgba(255,255,255,.08)}
.qz-recap b{display:block;font:var(--font-weight-bold) 14px/20px var(--font-text)}
.qz-recap small{display:block;margin-top:var(--space-4);font:var(--font-weight-bold) 10px/12px var(--font-text);color:rgba(255,255,255,.6)}
.qz-marque{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;font:var(--font-weight-bold) 14px var(--font-text)}
.qz-marque.ok{background:var(--vert)}.qz-marque.ko{background:var(--rouge-600)}

/* ───── Intentions de vote (Figma : poll/component/intention-row) ───── */
/* Sondages (Figma : 🏠 Accueil & boosters › 06) : onglets des 3 instituts, une ligne par candidat, mentions légales */
.sondages{display:flex;flex-direction:column;gap:12px}
.sondages h2,.sondages p{margin:0}
.sd-onglets{display:flex;gap:8px}
.sd-hyps{display:flex;gap:6px;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none}
.sd-hyps::-webkit-scrollbar{display:none}
.sd-hyps .chip{flex:none;white-space:nowrap;padding:6px 12px;font-size:12px}
.sd-maj{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-m);background:var(--surface-2);font:var(--font-weight-semi-bold) 12px/16px var(--font-text);color:var(--muted)}
.sd-maj i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--vert)}
.sd-maj span::first-letter{text-transform:uppercase}
.sd-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.sd-ligne{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:var(--radius-m);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.sd-ligne .cand-pic{width:40px;height:40px;background:var(--surface-2)}
.sd-ligne .cand-pic.vide{display:grid;place-items:center;font:var(--font-weight-bold) 14px var(--font-text);color:var(--muted)}
.sd-milieu{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sd-milieu b{font:var(--font-weight-bold) 14px/20px var(--font-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-barre{height:8px;border-radius:var(--radius-pill);background:var(--surface-2);overflow:hidden}
.sd-barre span{display:block;height:100%;border-radius:inherit;background:var(--bleu-600)}
.sd-pct{flex:none;font:var(--font-weight-bold) 16px/20px var(--font-text);font-variant-numeric:tabular-nums}
.sd-mentions a{color:inherit}


/* Modale des trophées (Figma : booster/component/trophy-dialog) */
.mo-trophee{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--gris-bleu-300)}
.mo-trophee.pret{background:var(--gold-100);color:var(--gold-500)}
.mo-trophee .ico{width:26px;height:26px}

/* Connexion sans mot de passe (Figma : 👋 › Connexion unifiée · lien magique, 14/11/2026) : pastille 88 px, titre title/xl,
   texte body/l, champ email + « Continuer » (16 px), « ou », Apple · Google (blanc) · invité (contour), mentions body/m */
.cx{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:420px;margin:0 auto;padding:48px 0 32px;text-align:center}
.cx-etat{gap:32px;padding-top:24px}
.cx-badge{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--accent);flex:none}
.cx-badge .ico{width:40px;height:40px}
.cx-intro{display:flex;flex-direction:column;gap:8px}
.cx-intro h1{margin:0;font:var(--font-weight-extra-bold) 32px/36px var(--font-title);letter-spacing:var(--title-tracking)}
.cx-intro p{margin:0;color:var(--muted);font:var(--font-weight-regular) 16px/24px var(--font-text)}
.cx-intro b{color:var(--ink)}
.cx-email,.cx-fournisseurs,.cx-actions{align-self:stretch;display:flex;flex-direction:column;gap:16px;text-align:left}
.cx-fournisseurs{gap:12px}
.cx-actions{align-items:center;gap:24px}
.cx .btn.large{width:100%;min-height:56px;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:8px}
.cx .btn .ico{width:20px;height:20px}
.cx-ou{align-self:stretch;display:flex;align-items:center;gap:12px;color:var(--muted);font:var(--font-weight-bold) 12px/16px var(--font-text);text-transform:uppercase;letter-spacing:.05em}
.cx-ou i{flex:1;height:1px;background:var(--line)}
.cx-legal{margin:0;text-align:center;color:var(--muted);font:var(--font-weight-regular) 14px/20px var(--font-text)}
.lien-txt{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cx-bas{margin:auto 0 0}
.btn-texte:disabled{color:var(--muted);cursor:default}