/* ─────────────────────────────────────────────────────────────
   APP — mise en page mobile, composants, animations
   Les couleurs et typos viennent de tokens.css
   ───────────────────────────────────────────────────────────── */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100%;font-family:var(--font-text);color:var(--ink);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--surface)}
a{color:inherit}
button{font-family:inherit;color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--bleu-400);outline-offset:3px}
/* Fenêtres (modale, feuille, carte en grand) : à l’ouverture, le focus va à la fenêtre elle-même, sans contour (iOS montrait
   un contour bleu sur le premier bouton, comme si on naviguait au clavier) */
dialog:focus,dialog:focus-visible{outline:none}
html.tactile :focus-visible{outline:none!important}
/* Pas de zoom au double appui ; cartes, boutons et images ne se sélectionnent pas et n’ouvrent pas le menu d’appui long (iOS) */
html{touch-action:manipulation}
.card,.card *,.slot,.slot *,.col-tile,.pslide,.opener,.zoom-card,button,img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Zone principale : elle reçoit le focus à chaque changement d’écran (lecteurs d’écran), sans cadre visible */
#view:focus{outline:none}
img{max-width:100%}

/* ───── Coque de l’app ───── */
.app{max-width:480px;margin:0 auto;min-height:100%;position:relative;background:var(--bg)}
.appbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;justify-content:space-between;gap:8px;
  box-sizing:border-box;height:56px;padding:4px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.appbar[hidden]{display:none}
/* Agora : pas de barre visible (fond de page, sans bordure) ; bande de l’encoche assortie */
.appbar.accueil{background:var(--bg);border-bottom:0}
html:has(.appbar:is(.accueil,[hidden])) body::before{background:var(--bg)}
/* Agora (Figma : top-bar level=home) : boosters puis tickets à gauche (16 px entre eux), avatar à droite ; marges 6/16 */
.appbar.accueil{padding:6px 16px}
.ab-compteurs{display:flex;align-items:center;gap:16px}
/* Retour : la flèche seule (24 px, zone de toucher 40 px calée sur la marge) ; cale de droite de même largeur */
.appbar .ab-retour{background:none;width:40px;height:40px;margin-left:-8px;border-radius:var(--radius-m)}
.appbar .ab-retour svg{width:24px;height:24px}
.ab-cale{width:40px;margin-right:-8px;flex:none}
.brand{display:flex;align-items:center;gap:8px;font:var(--font-weight-extra-bold) 24px/28px var(--font-title);text-decoration:none;letter-spacing:var(--title-tracking)}
.brand .flag{display:flex;width:22px;height:16px;border-radius:var(--radius-xs);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.brand .flag i{flex:1}.brand .flag i:nth-child(1){background:var(--bleu-600)}.brand .flag i:nth-child(2){background:var(--blanc)}.brand .flag i:nth-child(3){background:var(--rouge-600)}
.appbar .title{font:var(--font-weight-extra-bold) 24px/28px var(--font-title);flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:var(--title-tracking)}
.iconbtn{border:0;background:var(--surface-2);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font:var(--font-weight-bold) 16px var(--font-text);text-decoration:none;flex:none}
.iconbtn svg{width:20px;height:20px}
.screen{padding:16px 16px calc(var(--tabbar-total) + 28px)}

.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);z-index:30;display:flex;
  background:var(--tabbar);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;font:var(--font-weight-bold) 12px var(--font-text);color:var(--muted);padding:6px 0;position:relative;border-radius:var(--radius-l)}
.tabbar a svg{width:26px;height:26px}
.tabbar a[aria-current="page"]{color:var(--accent)}
.tabbar a[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)}
.tabbar .count:empty{display:none}
.tabbar .count{position:absolute;top:2px;left:calc(50% + 10px);background:var(--primary);color:#fff;font:var(--font-weight-bold) 10px var(--font-text);padding:2px 6px;border-radius:var(--radius-pill)}

/* ───── Boutons ───── */
.btn{border:0;cursor:pointer;font:var(--font-weight-bold) 16px var(--font-text);padding:16px 24px;border-radius:var(--radius-l);background:var(--primary);color:#fff;
  box-shadow:0 5px 0 var(--primary-press);transition:transform .08s,box-shadow .08s;min-width:180px}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--primary-press)}
.btn.blanc{background:var(--blanc);color:var(--bleu-900);box-shadow:0 5px 0 var(--argent)}
.btn.bleu{background:var(--bleu-600);color:#fff;box-shadow:0 5px 0 var(--bleu-900)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);min-width:0}
.btn.small{font-size:14px;padding:8px 16px;min-width:0}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ───── Arène ───── */
.stage{position:relative;border-radius:var(--radius-xl);background:var(--stage);color:#fff;overflow:hidden;
  padding:24px 16px 24px;display:flex;flex-direction:column;align-items:center;gap:16px;min-height:calc(100dvh - 210px)}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg at 50% 38%, rgba(255,255,255,.07) 0 6deg, transparent 6deg 18deg)}
.stage > *{position:relative}
.series{font:600 14px var(--font-text);color:var(--argent);margin:0;text-align:center}
.series b{display:block;font:var(--font-weight-extra-bold) 24px/28px var(--font-title);color:#fff;margin-top:2px;letter-spacing:var(--title-tracking)}
/* Booster de l’arène : le plus grand possible sans pousser le bouton « Ouvrir » hors de l’écran, jamais plus petit que min(60vw, 250px) */
.pack-idle{border:0;background:none;padding:0;cursor:pointer;width:max(min(60vw,250px),min(74vw,320px,calc((100dvh - 340px) * var(--ratio,.558))));aspect-ratio:var(--ratio,.558);position:relative;
  filter:drop-shadow(0 26px 24px rgba(0,0,0,.55));
  /* Lévitation (14/11/2026) : trois mouvements indépendants aux durées premières entre elles (montée, basculement 3D, roulis),
     qui ne se recalent presque jamais : le paquet ne refait pas deux fois le même geste */
  animation:pk-monte 5.3s ease-in-out infinite,pk-bascule 8.9s ease-in-out infinite,pk-roulis 12.7s ease-in-out infinite;will-change:transform}
.pack-idle img{width:100%;height:100%;display:block;object-fit:contain}
.pack-idle .shine,.op-pack .shine{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:var(--pack-mask) center/100% 100% no-repeat;mask:var(--pack-mask) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);background-size:300% 100%;background-repeat:no-repeat;animation:balaye 3.8s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes pk-monte{0%,100%{translate:0 0}30%{translate:0 -13px}55%{translate:0 -7px}78%{translate:0 -11px}}
@keyframes pk-bascule{0%,100%{transform:perspective(900px) rotateY(-9deg) rotateX(3deg)}24%{transform:perspective(900px) rotateY(4deg) rotateX(5deg)}
  52%{transform:perspective(900px) rotateY(10deg) rotateX(-2deg)}76%{transform:perspective(900px) rotateY(-2deg) rotateX(-4deg)}}
@keyframes pk-roulis{0%,100%{rotate:-1.8deg}35%{rotate:1.2deg}62%{rotate:2deg}84%{rotate:-.4deg}}
/* reflet sans répétition, qui part et finit hors du paquet et s’efface aux deux bouts : rien ne reste figé pendant la pause (14/11/2026) */
@keyframes balaye{0%{background-position:150% 0;opacity:0}8%{opacity:1}52%{opacity:1}60%,100%{background-position:-90% 0;opacity:0}}
.meta{font:600 14px var(--font-text);color:var(--argent);margin:0;text-align:center}

/* Écran d’attente */
.panel{background:var(--surface);border-radius:var(--radius-xl);padding:20px;text-align:center;box-shadow:0 1px 0 var(--line);margin-top:14px}
.panel .label{font:var(--font-weight-bold) 14px var(--font-text);color:var(--muted)}
.timer{font:var(--font-weight-extra-bold) 64px/64px var(--font-title);margin:4px 0 2px;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:var(--title-tracking)}
.panel p{margin:8px 0 14px;color:var(--muted);line-height:1.45}
.or{display:flex;align-items:center;gap:8px;margin:14px 0 4px;color:var(--muted);font-weight:800}
.or::before,.or::after{content:"";flex:1;height:2px;background:var(--line)}
.stack{display:flex;flex-direction:column;align-items:center;gap:12px}

/* ───── Ouverture du booster (plein écran) ───── */
.opener{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 20px);color:#fff;touch-action:none;overflow:hidden}
.op-bg{position:absolute;inset:0;background:var(--stage);opacity:0}
.op-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 50% 42%,rgba(255,255,255,.10),transparent 70%),radial-gradient(120% 80% at 50% 110%,rgba(0,0,0,.45),transparent 60%)}
.op-stage{position:relative;width:min(74vw,330px,calc((100dvh - 240px) * var(--ratio,.558)));aspect-ratio:var(--ratio,.558)}
/* Lumière qui sort du paquet : un halo doux qui s’ouvre puis respire (plus de rayons tournants) */
.op-rays{position:absolute;inset:-45%;pointer-events:none;opacity:0;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--lueur,#fff) 55%,transparent) 0%,color-mix(in srgb,var(--lueur,#fff) 16%,transparent) 32%,transparent 62%)}
.op-rays.on{animation:rayons 1.4s cubic-bezier(.22,1,.36,1) forwards, respire 4s ease-in-out 1.4s infinite}
@keyframes rayons{0%{opacity:0;scale:.2}35%{opacity:1}100%{opacity:.6;scale:1}}
@keyframes respire{0%,100%{opacity:.6;scale:1}50%{opacity:.45;scale:1.06}}
.op-pack{position:absolute;inset:0;z-index:3;cursor:grab;filter:drop-shadow(0 30px 30px rgba(0,0,0,.6))}
.op-pack:focus,.op-pack:focus-visible{outline:none}
.op-pack .part{position:absolute;inset:0;background:var(--pack-img) center/100% 100% no-repeat}
.op-pack .top{clip-path:inset(0 0 calc(100% - var(--cut)) 0)}
.op-pack .body{clip-path:inset(var(--cut) 0 0 0)}
.op-pack .cut{position:absolute;left:3%;right:3%;top:var(--cut);height:0;pointer-events:none}
.op-pack .cut::before{content:"";position:absolute;left:0;right:0;top:-1px;border-top:2px dashed rgba(255,255,255,.75)}
.op-pack .cut span{position:absolute;top:-2.5px;height:5px;width:var(--p,0%);background:#fff;border-radius:var(--radius-xs);box-shadow:0 0 14px 4px var(--lueur,#fff)}
.op-pack .cut.rtl span{right:0}
.op-pack .finger{position:absolute;top:var(--cut);left:6%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  background:rgba(255,255,255,.85);box-shadow:0 0 0 8px rgba(255,255,255,.25);animation:doigt 1.8s ease-in-out infinite;pointer-events:none}
@keyframes doigt{0%{left:8%;opacity:0}15%{opacity:1}80%{left:92%;opacity:1}100%{left:92%;opacity:0}}
.op-pack.touched .finger{display:none}
/* La carte de l’ouverture : derrière le paquet (z 2 < 3) tant qu’elle en sort, puis à sa place finale (placeCarte, agora.js) */
.op-card{position:absolute;z-index:2;transform-origin:50% 0}
.op-card .card{width:100%}
.op-hint{position:relative;font:var(--font-weight-bold) 16px var(--font-text);text-align:center;margin:0;min-height:22px}
.op-actions{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}
.op-actions .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
/* Déchirure : le booster tremble et s’éclaire avec l’avancée du doigt (--trem, 0 à 1) */
.op-pack{filter:drop-shadow(0 30px 30px rgba(0,0,0,.6)) brightness(calc(1 + var(--trem,0) * .22))}
.op-pack.tire{animation:tremble .1s linear infinite}
@keyframes tremble{0%,100%{translate:0 0;rotate:0deg}25%{translate:calc(var(--trem) * -2.5px) calc(var(--trem) * 1px);rotate:calc(var(--trem) * -.8deg)}
  75%{translate:calc(var(--trem) * 2.5px) calc(var(--trem) * -1px);rotate:calc(var(--trem) * .8deg)}}
/* Halo derrière la carte, fente de lumière à la déchirure, ondes et éclat au retournement : couleur de la finition (--lueur, posée sur #opener) */
.op-halo{position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;border-radius:50%;z-index:1;opacity:0;pointer-events:none;transform:translate(-50%,-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--lueur,#fff) 60%,transparent) 0%,color-mix(in srgb,var(--lueur,#fff) 20%,transparent) 34%,transparent 64%)}
/* fente : un trait de lumière à la largeur de la ligne de découpe et une lueur douce en ellipse, sans bords
   (l’ancienne ombre portée dessinait un rectangle qui débordait du booster, 09/11/2026) */
.op-fente{position:absolute;left:3%;right:3%;height:3px;margin-top:-1.5px;z-index:5;pointer-events:none;border-radius:3px;transform:scale(0,1);
  background:linear-gradient(90deg,transparent,#fff 15%,#fff 85%,transparent)}
.op-fente::before{content:"";position:absolute;left:-4%;right:-4%;top:50%;height:44px;margin-top:-22px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--lueur,#fff) 55%,transparent),transparent)}
/* une fois déchiré, le reflet qui balaye le paquet ne couvre plus que le corps (il redessinait la bande arrachée) */
.op-pack.ouvert .shine{clip-path:inset(var(--cut) 0 0 0)}
.op-onde{position:absolute;z-index:65;pointer-events:none;border-radius:50%;border:3px solid color-mix(in srgb,var(--lueur,#fff) 85%,transparent);
  box-shadow:0 0 24px color-mix(in srgb,var(--lueur,#fff) 45%,transparent),inset 0 0 24px color-mix(in srgb,var(--lueur,#fff) 30%,transparent)}
.op-flash{position:absolute;inset:0;z-index:70;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,var(--flash,#fff) 0%,color-mix(in srgb,var(--flash,#fff) 30%,transparent) 40%,transparent 75%)}
/* Après l’ouverture : la carte et ses 3 cartes mesures en pile (Figma : 04 · 1/4 à 4/4) ; les deux suivantes dépassent en bas ;
   un appui fait partir la carte du dessus vers la droite (.sort) et la suivante prend sa place */
.op-suite{position:absolute;inset:0}
.op-slide{position:absolute;inset:0}
.op-slide > .card{width:100%}
.pile > .card,.pile .op-slide{transition:translate .6s cubic-bezier(.22,1,.36,1),scale .6s cubic-bezier(.22,1,.36,1),opacity .4s}
.pile [data-rang="0"]{z-index:4}
.pile [data-rang="1"]{z-index:3;translate:0 5%;scale:.94}
.pile [data-rang="2"]{z-index:2;translate:0 9.5%;scale:.88}
.pile [data-rang="3"]{z-index:1;translate:0 12%;scale:.82;opacity:0;visibility:hidden}
.pile .sort[data-rang]{z-index:6;translate:none;scale:none;opacity:1;visibility:visible;transition:none}
.pile .sans-trans{transition:none!important}
.pile > .card,.pile .op-slide{cursor:pointer}
/* Révélation (Figma : 04) : tag « Nouvelle carte ! » au-dessus à gauche (component/badge status=new), « Carte holo »… en petit
   sous la carte à droite, partage en haut à droite ; plus de boutons ni de points */
.op-tag{position:absolute;left:0;bottom:calc(100% + 8px);font:var(--font-weight-bold) 14px/20px var(--font-text);padding:8px 12px;border-radius:var(--radius-pill);background:var(--rouge-600);color:#fff;pointer-events:none}
.op-meta{position:absolute;left:0;right:0;top:calc(100% + 24px);display:flex;justify-content:flex-end;gap:8px;font:var(--font-weight-semi-bold) 12px/16px var(--font-text);color:rgba(255,255,255,.8);pointer-events:none}
.op-partage{position:absolute;z-index:5;top:calc(env(safe-area-inset-top,0px) + 12px);right:16px}
/* Fin de l’ouverture (.op-fin) : effets coûteux coupés pendant la sortie (reflets en mode de fusion, verre flouté, animations),
   pour que le fond s’efface et que la carte parte à pleine fluidité */
.opener.op-fin .card .foil,.opener.op-fin .card .rfoil,.opener.op-fin .card .shine{display:none!important}
.opener.op-fin .card,.opener.op-fin .card *,.opener.op-fin .card *::before,.opener.op-fin .card *::after{animation:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;mix-blend-mode:normal!important}
.opener.op-fin .op-rays{animation:none!important}
/* Fin de l’ouverture : petits dos de carte qui descendent vers l’onglet Collection, puis compteur au-dessus de l’onglet */
.op-vol{position:fixed;z-index:70;pointer-events:none}
.op-vol img{display:block;width:100%;border-radius:calc(var(--radius-card) * .34);box-shadow:0 6px 14px rgba(7,14,54,.35)}
.op-vol .card{width:100%}
/* petits dos de carte : liseré blanc pour rester lisibles sur le booster sombre de l’Agora */
.op-dos img{box-shadow:0 0 0 1.5px rgba(255,255,255,.95),0 6px 16px rgba(7,14,54,.4)}
/* Voile du fondu vers la page du candidat : couleur du fond, au-dessus de la page et de sa barre, sous la barre d’onglets */
.fondu-voile{position:fixed;inset:0;z-index:30;background:var(--bg);pointer-events:none}
/* « Arrivée » : la barre d’onglets du bas est masquée pendant l’animation */
body.arrivee-en-cours #tabbar{opacity:0;pointer-events:none}
/* pendant l’« Arrivée », la Collection ne défile pas (15/11/2026) : la case de la carte reste où on l’a placée */
html:has(body.arrivee-en-cours),body.arrivee-en-cours{overflow:hidden;overscroll-behavior:none;touch-action:none}
.op-compteur{position:fixed;z-index:70;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.op-compteur-tag{position:relative;z-index:1;margin-bottom:-8px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--bleu-950);color:#fff;font:var(--font-weight-bold) 10px/12px var(--font-text);white-space:nowrap}
.op-compteur-pill{display:flex;align-items:baseline;justify-content:center;gap:4px;min-width:156px;box-sizing:border-box;padding:12px 24px 8px;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 12px rgba(7,14,54,.18);color:var(--muted);font:var(--font-weight-semi-bold) 12px/16px var(--font-text);white-space:nowrap}
.op-compteur-pill b{font:var(--font-weight-extra-bold) 20px/24px var(--font-title);color:var(--ink);letter-spacing:var(--title-tracking)}
html.anim-reduites .op-pack.tire{animation:none}
/* Icône de rareté (Figma : icon/component/rarity-*) dans un texte : à la taille de la police */
.fin-ico{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.125em}
.badge{display:inline-block;font:var(--font-weight-bold) 14px var(--font-text);padding:6px 16px;border-radius:var(--radius-pill);background:var(--blanc);color:var(--bleu-900)}
.badge.new{background:var(--rouge-600);color:#fff}
.badge.fin-o{background:linear-gradient(135deg,var(--gold-100),var(--gold-500));color:var(--bleu-950)}
/* ───── Carte (Figma : card/component/candidate-card, 300 × 480, ratio 5:8) ─────
   --u = 1 px de la maquette Figma, quelle que soit la taille d’affichage */
.card{--c:#333;--mx:50%;--my:50%;--rx:0deg;--ry:0deg;width:min(300px,78vw);aspect-ratio:5/8;container-type:inline-size;perspective:1000px;position:relative;touch-action:pan-y}
.card .tilt{position:absolute;inset:0;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card.live .tilt{transition:transform .08s linear}
.card .flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.card.back-up .flip{transform:rotateY(180deg)}
/* La face est découpée par clip-path en plus d’overflow : sur iOS, l’arrondi d’overflow ne s’applique pas aux reflets composés
   (modes de fusion, animations) des full art et or, qui débordaient en carré dans les coins (09/11/2026). Le clip-path coupant
   aussi les ombres, l’ombre de la carte est portée par .card::before, derrière la carte. */
.face{--u:calc(100cqw / 300);position:absolute;inset:0;border-radius:calc(16 * var(--u));overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  -webkit-clip-path:inset(0 round calc(16 * var(--u)));clip-path:inset(0 round calc(16 * var(--u)))}
.card::before{content:"";position:absolute;inset:0;border-radius:calc(16 * 100cqw / 300);pointer-events:none;
  box-shadow:0 calc(8 * 100cqw / 300) calc(18 * 100cqw / 300) calc(-3 * 100cqw / 300) rgba(7,14,54,.55)}
.cback{transform:rotateY(180deg);background:var(--bleu-900)}
/* iOS (WebKit) : backface-visibility ne cache pas les calques composés de la face retournée (flous, fusions, animations des effets),
   qu’on voyait en miroir pendant le retournement. La face cachée est donc aussi masquée (visibility), avec une bascule
   au moment où la carte est de profil : 90° sont atteints à 19 % de l’animation de .flip (0,8 s, cubic-bezier(.3,.7,.2,1)), soit 0,15 s */
.card .front-face,.card .cback{transition:visibility 0s .15s}
.card.back-up .front-face,.card:not(.back-up) .cback{visibility:hidden}
/* Préparée à l’avance (ouverture d’un booster) : peinte mais invisible ; la face cachée reste peinte, à opacité quasi nulle,
   jusqu’à ce que la carte soit de profil au retournement (preparerCarte, agora.js) */
.op-card.chauffe,.op-suite.chauffe{opacity:.002;pointer-events:none}
.card.back-up.chauffe .front-face{visibility:visible;opacity:.002;transition:none}
/* Cartes qu’on incline au doigt (ouverture, amélioration, carte en grand) : pas d’ombre portée — posée derrière la carte,
   elle restait immobile pendant que la carte bougeait et dessinait un contour (09/11/2026) */
.opener .card::before,dialog.zoom .card::before{display:none}
.cback img{width:100%;height:100%;display:block;object-fit:cover}
.front-face{background:var(--c);color:var(--blanc)}
.front-face > *{position:absolute}
/* Dégradé teinté par la couleur du parti (--ink = couleur du parti très assombrie) */
.face{--ink:color-mix(in srgb,var(--c) 32%,#03040b)}
/* les reflets (modes de fusion) se mélangent à la carte seulement, pas à la page dessous : même rendu (la face est opaque),
   mais rien à recalculer quand quelque chose bouge au-dessus ou sous une carte */
.face{isolation:isolate}
.op-vol{isolation:isolate}
.front-face .shade{inset:0;background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--ink) 25%,transparent) 42%,color-mix(in srgb,var(--ink) 78%,transparent) 60%,color-mix(in srgb,var(--ink) 92%,transparent) 100%)}
.front-face .rfoil{inset:0;display:none;opacity:.42}
.r-reverse .rfoil{display:block}
.front-face .frame{inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

/* Nom : prénom en capitales, nom en Spectral italique */
.c-name{left:calc(20 * var(--u));top:calc(20 * var(--u));width:calc(260 * var(--u));z-index:1}
.c-name i{display:block;font:var(--font-weight-medium) calc(10 * var(--u))/calc(12 * var(--u)) var(--font-text);font-style:normal;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(7,14,54,.5)}
.c-name b{display:block;font:var(--font-weight-bold) italic calc(30 * var(--u))/1 var(--font-card-name);text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap}

/* Fenêtre du portrait : fond bkg-frame arrondi à gauche, droit à l’extrême droite (--r) */
.c-pic{left:calc(20 * var(--u));top:calc(46 * var(--u));width:calc(260 * var(--u));height:calc(173 * var(--u));z-index:2}
/* Forme de la fenêtre selon la famille : --shape (fenêtre) et --pop (même forme, ouverte vers le haut pour la tête) */
.fam-far-left,.fam-left{--rr:calc(var(--round) * var(--u));--shape:inset(0 round var(--rr));--pop:inset(calc(-80 * var(--u)) 0 0 0 round 0 0 var(--rr) var(--rr))}
.fam-far-left{--round:var(--bkg-round-far-left)}.fam-left{--round:var(--bkg-round-left)}
.fam-center,.fam-right{--k:calc(var(--cut) * var(--u));
  --shape:polygon(var(--k) 0,calc(100% - var(--k)) 0,100% var(--k),100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,var(--k) 100%,0 calc(100% - var(--k)),0 var(--k));
  --pop:polygon(0 calc(-80 * var(--u)),100% calc(-80 * var(--u)),100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,var(--k) 100%,0 calc(100% - var(--k)))}
.fam-center{--cut:var(--bkg-cut-center)}.fam-right{--cut:var(--bkg-cut-right)}
/* Centre : pans coupés aux sommets arrondis, calculés par js/carte.js (polygon() n’arrondit pas) */
.fam-center{--shape:var(--shape-center);--pop:var(--pop-center)}
.fam-far-right{--shape:inset(0);--pop:inset(calc(-80 * var(--u)) 0 0 0)}
.c-pic .bkg{position:absolute;left:0;right:0;bottom:0;height:calc(155 * var(--u));clip-path:var(--shape);background:var(--c)}
.c-pic .clip{position:absolute;left:0;right:0;bottom:0;height:calc(155 * var(--u));clip-path:var(--pop)}
/* Portrait 3:2 posé sur toute la fenêtre (Figma : artwork-normal 1200 × 800 dans picture 260 × 173) : la tête dépasse en haut */
.c-pic .clip img{position:absolute;left:0;bottom:0;width:100%;height:calc(173 * var(--u));object-fit:cover;filter:drop-shadow(0 calc(-2 * var(--u)) calc(12 * var(--u)) rgba(7,14,54,.25))}
.c-pic .fade{position:absolute;left:0;right:0;bottom:0;height:calc(155 * var(--u));clip-path:var(--shape);background:linear-gradient(180deg,transparent 79%,color-mix(in srgb,var(--ink) 85%,transparent) 93%)}
.c-pic .role{position:absolute;left:0;right:0;bottom:calc(7 * var(--u));text-align:center;font:var(--font-weight-medium) calc(10 * var(--u))/calc(12 * var(--u)) var(--font-text);text-transform:uppercase;letter-spacing:.04em}
.c-pic .bkg .foil{position:absolute;inset:0;display:none}
.r-holo .c-pic .bkg .foil{display:block}

/* Bandeau d’infos : naissance · logo · candidatures */
.c-data{left:calc(20 * var(--u));top:calc(219 * var(--u));width:calc(260 * var(--u));height:calc(40 * var(--u));display:flex;align-items:center;gap:calc(4 * var(--u));z-index:2}
.c-data > div{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2 * var(--u));text-align:center}
.c-data .sep{flex:none;width:1px;height:calc(24 * var(--u));background:var(--c)}
.c-data small{font:var(--font-weight-regular) calc(8 * var(--u))/calc(12 * var(--u)) var(--font-text);letter-spacing:.05em}
.c-data .born small{opacity:.8}
.c-data .born{gap:0}
.c-data .born b{font:var(--font-weight-bold) calc(14 * var(--u))/calc(20 * var(--u)) var(--font-text);margin-top:calc(-2 * var(--u))}
/* Largeur posée par logoFit (js/carte.js) selon la forme du logo */
.c-data .logo img{width:calc(64 * var(--u));height:auto;max-height:calc(30 * var(--u));display:block;object-fit:contain}
/* Candidatures : 2 px entre les points et le texte (Figma : candidacy, spacing/2) */
.c-data .cand{gap:calc(2 * var(--u))}
.c-data .dots{display:flex;align-items:center;gap:calc(4 * var(--u))}
.c-data .dots i{width:calc(4 * var(--u));height:calc(4 * var(--u));border-radius:50%;background:var(--argent)}
/* Point de la candidature en cours : couleur du parti, comme les séparateurs (Figma : candidacy-dots, current) */
.c-data .dots i:last-child{width:calc(6 * var(--u));height:calc(6 * var(--u));background:var(--c)}

/* Bas de carte : « Son programme défend » + 3 mesures phares (2 lignes au plus) ; calé en bas, il monte quand un titre passe sur 2 lignes */
/* Figma : card/cell/card-body — marges 4/20/8, 4 px entre le surtitre et les mesures (spacing/4) */
.c-body{left:0;right:0;bottom:calc(32 * var(--u));padding:calc(4 * var(--u)) calc(20 * var(--u)) calc(8 * var(--u));display:flex;flex-direction:column;gap:calc(4 * var(--u));z-index:2}
.c-body .foil{position:absolute;inset:0;display:none;opacity:.35}
.r-reverse .c-body .foil{display:block}
/* Surtitre en capitales (card/caption-strong), blanc à 90 %, et ses deux tirets blancs, avec l’ombre shadow/text-on-photo (0 · 2 · 3, noir 35 %) */
.c-body h4{position:relative;margin:0;display:flex;align-items:center;gap:calc(4 * var(--u));font:var(--font-weight-bold) calc(8 * var(--u))/calc(12 * var(--u)) var(--font-text);letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.9);text-shadow:0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.35)}
.c-body h4::before,.c-body h4::after{content:"";width:calc(8 * var(--u));height:1px;background:#fff;box-shadow:0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.35)}
.c-body ol{position:relative;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:calc(4 * var(--u))}
/* Mesure phare (Figma : card/cell/key-proposal) : marges 6/8/6/12, 8 px entre numéro et titre, verre glass/card
   (le Glass de Figma n’a pas d’équivalent CSS : flou d’arrière-plan + reflet clair en haut à gauche) */
.c-body li{display:flex;align-items:center;gap:calc(8 * var(--u));padding:calc(6 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)) calc(12 * var(--u));border-radius:calc(8 * var(--u));
  border:calc(1 * var(--u)) solid rgba(255,255,255,.14);   /* liseré compté dans la hauteur, comme dans Figma : 34 px sur une ligne */
  background:rgba(255,255,255,.14);box-shadow:inset calc(1 * var(--u)) calc(1 * var(--u)) 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(calc(6 * var(--u))) saturate(1.3);backdrop-filter:blur(calc(6 * var(--u))) saturate(1.3)}
.c-body li i{flex:none;font:var(--font-weight-extra-bold) italic calc(24 * var(--u))/calc(20 * var(--u)) var(--font-card-name);width:calc(14 * var(--u));text-align:center}
.c-body li span{font:var(--font-weight-medium) calc(11 * var(--u))/calc(16 * var(--u)) var(--font-text);letter-spacing:.03em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* Pied : numéro de carte · zone politique + jauge */
.c-foot{left:calc(24 * var(--u));right:calc(24 * var(--u));top:calc(448 * var(--u));height:calc(12 * var(--u));display:flex;justify-content:space-between;align-items:center;opacity:.85;z-index:2;
  font:var(--font-weight-bold) calc(8 * var(--u))/calc(12 * var(--u)) var(--font-text);letter-spacing:.05em}
.c-foot span{display:flex;align-items:center;gap:calc(4 * var(--u))}
.c-foot .fin-ico{width:calc(10 * var(--u));height:calc(10 * var(--u))}
.c-foot .lr{gap:calc(4 * var(--u))}
.c-foot .flag{display:flex;gap:0;width:calc(12 * var(--u));height:calc(8 * var(--u));border-radius:calc(4 * var(--u));overflow:hidden}
.c-foot .flag i{flex:1}.c-foot .flag i:nth-child(1){background:var(--bleu-600)}.c-foot .flag i:nth-child(2){background:var(--blanc)}.c-foot .flag i:nth-child(3){background:var(--rouge-600)}
/* Jauge gauche-droite (Figma : card/cell/position-gauge, 100 px, repère au centre) : losange à x × 10 % */
.c-foot .gauge{position:relative;width:calc(100 * var(--u));height:1px;background:rgba(255,255,255,.35)}
.c-foot .gauge::before{content:"";position:absolute;left:50%;top:50%;width:1px;height:calc(5 * var(--u));background:rgba(255,255,255,.35);transform:translate(-50%,-50%)}
.c-foot .gauge i{position:absolute;top:50%;width:calc(3.3 * var(--u));height:calc(3.3 * var(--u));background:var(--blanc);transform:translate(-50%,-50%) rotate(45deg)}

/* ───── Carte mesure (Figma : card/component/measure-card) : marges 32/28/24/28 ; en-tête card/meta ; pastille de thématique
   (blanc 14 %, icône 12) ; numéro Spectral 96/88 (card/measure-index) ; titre title/l 24/28 ; filet 40 × 2 ; paragraphe body/m 14/20 ;
   pied card/meta ; filigrane = icône de la thématique (220, blanc 8 %, −12°). Titre ou paragraphe long (.long) : numéro 64/60, marges resserrées ───── */
.m-face .m-wm{right:calc(-38 * var(--u));top:calc(236 * var(--u));width:calc(220 * var(--u));height:calc(220 * var(--u));color:#fff;opacity:.08;transform:rotate(-12deg)}
.m-face .m-wm svg{width:100%;height:100%;display:block}
.m-face .m-in{inset:0;display:flex;flex-direction:column;align-items:flex-start;padding:calc(32 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u));z-index:2;text-align:left}
.m-top,.m-foot{align-self:stretch;display:flex;justify-content:space-between;gap:calc(8 * var(--u));font:var(--font-weight-medium) calc(10 * var(--u))/calc(12 * var(--u)) var(--font-text);letter-spacing:.04em;text-transform:uppercase}
.m-top{color:rgba(255,255,255,.9)}.m-top span:last-child,.m-foot{color:rgba(255,255,255,.8)}
.m-theme{display:inline-flex;align-items:center;gap:calc(4 * var(--u));margin-top:calc(40 * var(--u));padding:calc(4 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u));border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14);color:rgba(255,255,255,.9);font:var(--font-weight-medium) calc(10 * var(--u))/calc(12 * var(--u)) var(--font-text);letter-spacing:.04em;text-transform:uppercase}
.m-theme svg{width:calc(12 * var(--u));height:calc(12 * var(--u));flex:none}
.m-idx{margin-top:calc(16 * var(--u));font:var(--font-weight-extra-bold) italic calc(96 * var(--u))/calc(88 * var(--u)) var(--font-card-name);letter-spacing:-.02em}
.m-titre{margin:calc(8 * var(--u)) 0 0;font:var(--font-weight-extra-bold) calc(24 * var(--u))/calc(28 * var(--u)) var(--font-title);letter-spacing:-.02em;text-wrap:balance}
.m-rule{flex:none;width:calc(40 * var(--u));height:calc(2 * var(--u));margin:calc(16 * var(--u)) 0;border-radius:1px;background:rgba(255,255,255,.22)}
.m-desc{flex:1;min-height:0;overflow:hidden;margin:0;font:400 calc(14 * var(--u))/calc(20 * var(--u)) var(--font-text);color:rgba(255,255,255,.9)}
.m-foot{margin-top:calc(8 * var(--u))}
.mesure.long .m-theme{margin-top:calc(24 * var(--u))}
.mesure.long .m-idx{font-size:calc(64 * var(--u));line-height:calc(60 * var(--u));margin-top:calc(12 * var(--u))}
.mesure.long .m-rule{margin:calc(12 * var(--u)) 0}

/* Full art et or : fond et portrait pleine carte (styles/effets.css), pas de fenêtre */
.r-full .c-pic .bkg,.r-full .c-pic .clip,.r-full .c-pic .fade,.r-gold .c-pic .bkg,.r-gold .c-pic .clip,.r-gold .c-pic .fade{display:none}
.r-full .shade,.r-gold .shade{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 45%,transparent) 0%,transparent 24%,transparent 42%,color-mix(in srgb,var(--ink) 80%,transparent) 64%,color-mix(in srgb,var(--ink) 95%,transparent) 100%)}
.r-full .c-pic,.r-gold .c-pic{top:calc(62 * var(--u));height:auto}
.r-full .c-pic .role,.r-gold .c-pic .role{position:static;text-align:left;text-shadow:0 1px calc(6 * var(--u)) rgba(0,0,0,.45)}
/* Full art et or : le bandeau est le premier élément du bas de carte, il remonte avec les mesures (4 px au-dessus du surtitre) */
.c-body .c-data{position:relative;left:auto;top:auto;width:auto;flex:none}
/* Verre sombre (Figma : black/alpha-45, liseré white/alpha-22) : bandeau et 3 mesures ; réglé finement dans styles/effets.css */
.r-full .c-data,.r-gold .c-data{border-radius:calc(8 * var(--u))}
.r-full :is(.c-data,.c-body li),.r-gold :is(.c-data,.c-body li){background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(calc(10 * var(--u)));backdrop-filter:blur(calc(10 * var(--u)))}
.front-face .sheen{inset:0;display:none;z-index:4;pointer-events:none}
.r-full .sheen,.r-gold .sheen{display:block}
.r-full .sheen{opacity:.16}
/* Or : la photo reste naturelle, seuls le cadre, les liserés et les chiffres sont dorés */
.card.r-gold::before{box-shadow:0 0 0 calc(1.5 * 100cqw / 300) var(--gold-300),0 calc(8 * 100cqw / 300) calc(24 * 100cqw / 300) calc(-2 * 100cqw / 300) rgba(143,107,18,.75)}
.r-gold .sheen{opacity:.35;mix-blend-mode:soft-light;background:linear-gradient(115deg,transparent 30%,var(--gold-100) 45%,transparent 60%);background-size:250% 100%;background-position:var(--mx) 0}
.r-gold .c-body li{box-shadow:inset 0 0 0 calc(.9 * var(--u)) rgba(242,211,117,.55)}
.r-gold .c-body li i{color:var(--gold-300)}
.r-gold .c-data{box-shadow:inset 0 0 0 1px rgba(242,211,117,.6),0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.25)}
.r-gold .c-name b,.r-gold .c-data .born b{color:var(--gold-100)}

.foil{pointer-events:none;mix-blend-mode:color-dodge;opacity:.55;
  background:repeating-linear-gradient(115deg,transparent 0%,hsl(350 100% 70%) 3%,hsl(50 100% 65%) 6%,hsl(140 90% 65%) 9%,hsl(195 100% 65%) 12%,hsl(270 100% 75%) 15%,transparent 18%);
  background-size:220% 220%;background-position:var(--mx) var(--my);filter:saturate(1.3) contrast(1.15)}

/* ───── Collection ───── */
.h1{font:var(--font-weight-extra-bold) 32px/36px var(--font-title);margin:4px 0 10px;letter-spacing:var(--title-tracking)}
.meter .bar{height:10px;background:var(--surface-2);border-radius:var(--radius-pill);overflow:hidden}
.meter .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--bleu-600) 0 33%,var(--blanc) 33% 66%,var(--rouge-600) 66%);background-size:100% 100%}
.meter small{display:block;font:var(--font-weight-bold) 14px var(--font-text);color:var(--muted);margin-top:6px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.chip{border:0;cursor:pointer;font:var(--font-weight-bold) 14px var(--font-text);padding:8px 16px;border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.chip[aria-pressed="true"]{background:var(--bleu-600);color:#fff;box-shadow:none}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.reset{border:0;background:none;color:var(--accent);font:var(--font-weight-bold) 14px var(--font-text);padding:4px 0 12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.slot{position:relative;border:0;padding:0;background:none;cursor:pointer;text-align:left;color:inherit}
.slot .card{width:100%;pointer-events:none}
.slot .cnt{position:absolute;top:6px;right:6px;z-index:7;background:var(--blanc);color:var(--bleu-900);font:var(--font-weight-bold) 12px var(--font-text);padding:2px 8px;border-radius:var(--radius-pill);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.slot.locked{cursor:default;aspect-ratio:5/8;border-radius:var(--radius-card);overflow:hidden}
.slot.locked img{width:100%;height:100%;display:block;object-fit:cover}
/* Figma card/component/card-locked : le dos de carte sous un voile nuit #080D36 à 55 %, couleurs gardées (14/11/2026) */
.slot.locked::after{content:"";position:absolute;inset:0;background:rgba(8,13,54,.55);pointer-events:none}
.filters + .filters{margin-top:-6px}
.note{font-size:12px;color:var(--muted);text-align:center;margin:20px auto 0;line-height:1.5}
.grid .note{grid-column:1/-1}

/* ───── Programme : les cartes du candidat en tête, à faire défiler par rareté ───── */
.pcards{margin:-4px -16px 6px}
.pslider{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px calc(50% - min(120px,32vw)) 28px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pslider::-webkit-scrollbar{display:none}
.pslide{flex:none;width:min(240px,64vw);margin:0;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.pslide .card{width:100%}
.pslide.missing .slot{width:100%}
.pdots{display:flex;justify-content:center;gap:6px;margin-top:4px}
.pdots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:transform .2s}
.pdots i.own{background:var(--muted)}
.pdots i.cur{background:var(--c);transform:scale(1.35)}
article > .axis{background:var(--surface);border-radius:var(--radius-l);padding:16px 16px 12px;color:var(--ink);margin-top:14px}
article > .axis .bar{height:8px;margin:6px 0 4px}
article > .axis .dot{width:18px;height:18px;border-width:4px;box-shadow:0 0 0 3px #fff}
article > .axis .lab{font-size:10px}article > .axis .t{font-size:12px}
.axis{border-radius:var(--radius-m)}
.axis .bar{position:relative;border-radius:var(--radius-pill);background:linear-gradient(90deg,#8E0F2A,#E8435E 22%,#F7B7C6 40%,#F3F3F7 50%,#A9C3FF 60%,#3D63E0 78%,#0E1E5C)}
.axis .dot{position:absolute;top:50%;border-radius:50%;background:#fff;border:solid var(--bleu-900);transform:translate(-50%,-50%)}
.axis .lab{display:flex;justify-content:space-between;font-weight:600;opacity:.85}
.axis .t{font-weight:800}
/* Encart fiabilité (Figma : program/component/reliability-note, title/s + body/m, spacing/16, radius/l) */
.relnote{background:var(--surface);border-radius:var(--radius-l);padding:var(--space-16);margin:14px 0;display:flex;flex-direction:column;gap:var(--space-4)}
.relnote h3{margin:0;display:flex;align-items:center;gap:var(--space-8);font:var(--font-weight-extra-bold) 16px/20px var(--font-title);letter-spacing:-.01em}
.relok{flex:none;width:20px;height:20px;border-radius:50%;background:var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.2l3 3 6-6.4' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.relnote p{margin:0;color:var(--muted);font:400 14px/20px var(--font-text)}
.relnote a{color:var(--primary);text-decoration:underline}
.ph2{display:flex;align-items:center;gap:8px;font:var(--font-weight-bold) 12px/1.2 var(--font-text);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:22px 0 10px}
.ph2::before{content:"";width:24px;height:1px;background:currentColor}
/* 3 mesures phares dépliées, le reste en encarts repliés */
.keys{display:flex;flex-direction:column;gap:8px}
/* Mesure phare (Figma : program/component/key-measure) : couleur du parti, rayon 8, marges 12/16, 8 px entre les blocs ;
   surtitre (icône 12 + thématique, 10/12 Medium capitales +4 %, blanc 90 %) ; numéro Spectral 40 + titre 16/24 SemiBold ; paragraphe 14/20 */
.key{display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-radius:var(--radius-l);color:#fff;
  background:linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 45%,#05060f))}
.key-theme{display:flex;align-items:center;gap:6px;font:var(--font-weight-bold) 12px/16px var(--font-text);letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.key-theme .ico{width:14px;height:14px;flex:none}   /* thématique : icône 14 px, intitulé 12/16 (09/11/2026) */
.key-t{display:flex;align-items:center;gap:8px}
.key-t > i{flex:none;width:24px;text-align:center;font:var(--font-weight-extra-bold) italic 40px/40px var(--font-card-name)}
.key h3{margin:0;font:var(--font-weight-semi-bold) 16px/24px var(--font-text)}
.key p{margin:0;font:400 16px/24px var(--font-text);color:rgba(255,255,255,.9)}
/* « Le reste du programme » : le même composant que Programme (Figma : my-measure, page=candidate : sans poignée ni actions) */
.mp-m.candidat details{padding:16px}   /* Figma my-measure page=candidate : 16 partout */
.srcs{background:var(--surface);border-radius:var(--radius-l);padding:16px;margin-top:14px;font-size:14px;line-height:1.6}
.srcs h2{font:var(--font-weight-extra-bold) 24px/28px var(--font-title);margin:0 0 6px;letter-spacing:var(--title-tracking)}
.srcs ul{margin:0;padding-left:16px;word-break:break-word}
.srcs .credit{color:var(--muted);margin-top:10px}
/* Avertissement en bas des pages de programme (Figma : texte court en label/s) */
.avertissement{margin:16px 0 0;font:var(--font-weight-semi-bold) 12px/16px var(--font-text);color:var(--muted)}
.method{line-height:1.55}
.method h3{font:var(--font-weight-extra-bold) 16px/20px var(--font-title);margin:20px 0 6px;letter-spacing:-.01em}
.method p{margin:0 0 10px}

/* ───── Mode dev ───── */
.bar-actions{display:flex;gap:8px}
.dev-btn{width:auto;padding:0 12px;border-radius:var(--radius-pill);font-size:14px;border:2px dashed var(--muted);background:transparent}
.dev .panel{text-align:left;margin:0 0 14px;display:flex;flex-direction:column;gap:8px}
.dev h2{font:var(--font-weight-extra-bold) 24px/28px var(--font-title);margin:0;letter-spacing:var(--title-tracking)}
.dev p{margin:0}
.dev .filters{margin:0}
.dev select{font:600 16px var(--font-text);color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:var(--radius-m);padding:8px 12px;width:100%}
.dev .check{display:flex;align-items:center;gap:8px;font:600 14px var(--font-text)}
.dev .stack-row{display:flex;flex-wrap:wrap;gap:8px}
.dev-pack{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ───── Fenêtres ───── */
dialog{border:0;padding:0;border-radius:var(--radius-xl);max-width:460px;width:calc(100% - 24px);background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgba(7,14,54,.75)}
/* Carte en grand, depuis la page programme */
dialog.zoom{max-width:none;max-height:none;width:100%;height:100%;margin:0;border-radius:0;background:transparent;color:#fff;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 20px)}
dialog.zoom[open]{display:flex}
dialog.zoom::backdrop{background:rgba(7,14,54,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.zoom{gap:40px}
.zoom-card{width:min(88vw,460px,calc((100dvh - 170px) * .625))}
.zoom-card .card{width:100%}
.zoom-fermer{width:56px;height:56px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.zoom-fermer .ico{width:24px;height:24px}
/* Carte en grand : le doigt incline la carte, la page derrière ne défile pas */
dialog.zoom,.zoom-card .card{touch-action:none}
dialog.zoom{overscroll-behavior:contain}
/* Page bloquée pendant le zoom : classe posée par zoomCarte (collection.js) ; pas de :has(), que Safari réévaluerait à chaque mouvement du doigt */
html.zoom-ouvert,html.zoom-ouvert body{overflow:hidden}
/* Cartes figées (carrousel de la page programme, collection, onboarding) : le doigt fait défiler, il n’incline pas la carte */
.fige .card{touch-action:auto}

[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}