/* =========================================================================
   Maquettes jeux congrès Navista 2026 — styles partagés
   1. Tokens & base
   2. Coquille d'application plein écran (pages de jeu)
   3. Composants communs (boutons, bandeau, stats, overlay, tab bar)
   4. Page menu (index.html)
   ========================================================================= */

/* ---------- 1. Tokens & base ------------------------------------------- */
:root{
  /* Couleurs de marque (issues des pictogrammes officiels Navista) */
  --navy:#004B87; --navy-d:#02294C; --brand:#00A3E0; --cyan:#81FDF5;
  --blue:#1273F1; --blue-d:#0B5FD0;
  /* Neutres */
  --ink:#0B2545; --ink-2:#5D6E88; --ink-3:#93A1B5;
  --line:#E8ECF2; --bg:#F4F6F8; --card:#FFFFFF;
  /* Rappels du stand */
  --leaf:#7FAF78; --wood:#DDBE92;
  /* Ombres très légères */
  --sh-1:0 1px 2px rgba(11,37,69,.05);
  --sh-2:0 2px 6px rgba(11,37,69,.05), 0 12px 28px rgba(11,37,69,.07);
  --sh-3:0 18px 50px rgba(11,37,69,.14), 0 4px 12px rgba(11,37,69,.08);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif,-apple-system,"SF Pro Display","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4,p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* Pictogrammes produits (SVG officiels, colorisés par variables) */
.ico{display:block;width:100%;height:100%}
.ico .st0{fill:var(--ic0,var(--navy))}
.ico .st1{fill:var(--ic1,var(--brand))}
.ico .st2{fill:var(--ic2,var(--cyan))}
.ico .st14{fill:var(--ic14,var(--navy-d))}
.on-blue{--ic0:#fff;--ic1:#EAF4FF;--ic2:#9FD2FF;--ic14:#fff}

/* ---------- 2. Coquille plein écran (pages de jeu) ---------------------- */
body.game{overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-touch-callout:none}
.app{
  position:relative; display:flex; flex-direction:column;
  height:100vh; height:100dvh; max-width:520px; margin:0 auto; overflow:hidden;
  background:linear-gradient(180deg,#FAFAFA,#F3F4F6);
}
@media (min-width:560px){
  .app{border-left:1px solid var(--line);border-right:1px solid var(--line);box-shadow:0 0 70px rgba(11,37,69,.07)}
}
/* décor du stand, en fond */
.app .deco-leaf{position:absolute;top:-16px;left:-20px;width:126px;opacity:.9;z-index:1;pointer-events:none}
.app .deco-wood{position:absolute;top:-24px;right:-32px;width:154px;opacity:.95;z-index:1;pointer-events:none}
.app .deco-leaf svg,.app .deco-wood svg{display:block;width:100%;height:auto}

/* barre haute : retour au menu + logo centré */
.app-top{
  position:relative;z-index:3;flex:0 0 auto;display:flex;align-items:center;
  padding:calc(12px + env(safe-area-inset-top)) 14px 2px;
}
.app-top .back,.app-top .spacer{flex:0 0 auto;width:36px;height:36px}
.app-top .back{
  touch-action:manipulation;border-radius:12px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;box-shadow:var(--sh-1);text-decoration:none;
}
.app-top .back svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app-top .logo{width:86px;height:auto;display:block;margin:0 auto}

/* corps : c'est lui qui porte le jeu, il occupe toute la hauteur restante */
.app-main{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;padding:6px 15px 6px}
.app-title{text-align:center;font-size:22px;line-height:1.15;letter-spacing:-.02em;font-weight:700}
.app-sub{text-align:center;color:var(--ink-2);font-size:12.5px;line-height:1.35;margin-top:4px}
@media (max-height:680px){
  .app-title{font-size:19px}
  .app-sub{font-size:11.5px}
}

/* ---------- 3. Composants communs -------------------------------------- */
.btn{
  touch-action:manipulation;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,#2A83F7,var(--blue));
  color:#fff;font-weight:600;font-size:16px;letter-spacing:.1px;
  border-radius:14px;padding:14px 18px;width:100%;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px rgba(18,115,241,.28);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px) scale(.995)}
.btn--ghost{
  width:auto;flex:0 0 auto;background:#fff;color:var(--ink-2);font-weight:600;font-size:14px;
  border:1px solid var(--line);box-shadow:var(--sh-1);padding:12px 16px;
}
.btn--ghost:hover{filter:none;background:#FBFCFE;color:var(--ink)}
.actions{margin-top:10px;display:flex;gap:8px;align-items:center;flex:0 0 auto}

/* bandeau message / consigne */
.banner{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;margin-top:10px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 11px;box-shadow:var(--sh-1);
}
.banner .chip{flex:0 0 auto;width:30px;height:30px;border-radius:10px;background:#EAF3FE;display:grid;place-items:center;padding:5px}
.banner .chip i{display:block;width:100%;height:100%}
.banner p{font-size:13px;font-weight:600;line-height:1.3}
.banner.is-flash{animation:flash .5s ease}
@keyframes flash{0%{background:#EAF3FE}100%{background:#fff}}

/* cartes statistiques */
.stats{flex:0 0 auto;display:flex;gap:8px;margin-top:10px}
.stat{
  flex:1;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 11px;
  box-shadow:var(--sh-1);display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.stat .lbl{font-size:10.5px;color:var(--ink-3);font-weight:600}
.stat .val{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.stat .val small{font-size:10.5px;font-weight:600;color:var(--ink-3);margin-left:2px}
.stat .badge{width:26px;height:26px;border-radius:50%;background:#EFF5FD;display:grid;place-items:center;flex:0 0 auto}
.stat .badge svg{width:14px;height:14px}
.hearts{display:flex;gap:3px;margin-top:3px}
.hearts svg{width:13px;height:13px}
.hearts .off{opacity:.22}

/* voile de fin de partie / démarrage */
.overlay{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;text-align:center;padding:24px;
  background:rgba(250,251,252,.9);backdrop-filter:blur(3px);
}
.overlay[hidden]{display:none}
.overlay .box{max-width:300px}
.overlay .em{width:64px;height:64px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;padding:12px;background:#EAF3FE}
.overlay strong{display:block;font-size:20px;letter-spacing:-.01em}
.overlay span{display:block;font-size:13.5px;color:var(--ink-2);margin:6px 0 16px}

/* barre d'onglets basse */
.tabbar{
  position:relative;z-index:3;flex:0 0 auto;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  padding:7px 6px calc(12px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:repeat(4,1fr);
}
.tab{touch-action:manipulation;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-3);font-size:10px;font-weight:600;text-decoration:none}
.tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab.is-on{color:var(--blue)}
.tab.is-on .tab-ico{background:var(--blue);border-radius:8px;padding:2px 6px;color:#fff;box-shadow:0 4px 10px rgba(18,115,241,.3)}
.tab.is-on .tab-ico svg{stroke:#fff}
.home-bar{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:110px;height:4px;border-radius:3px;background:var(--ink);opacity:.85}

/* ---------- 4. Page menu (index.html) : accès rapide aux prototypes ----- */
body.menu{overflow-y:auto;min-height:100%;display:flex;flex-direction:column;touch-action:manipulation}
.menu-head{flex:0 0 auto}
.menu-head{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFFFFF,#FAFBFC 70%,var(--bg));border-bottom:1px solid var(--line)}
.menu-head .deco-leaf{position:absolute;top:-26px;left:-16px;width:176px;opacity:.5;pointer-events:none}
.menu-head .deco-wood{position:absolute;top:-24px;right:-12px;width:214px;opacity:.65;pointer-events:none}
.menu-head .deco-leaf svg,.menu-head .deco-wood svg{display:block;width:100%;height:auto}
.wrap{max-width:560px;margin:0 auto;padding:0 22px}
.head-inner{position:relative;padding:40px 0 30px;text-align:center}
.head-inner img{width:132px;height:auto;display:block;margin:0 auto 20px}
.menu-head h1{font-size:27px;line-height:1.15;letter-spacing:-.02em;font-weight:700}
.head-sub{margin-top:6px;color:var(--ink-2);font-size:15px}

/* pastilles cliquables : un prototype par bandeau */
.choix{flex:1;display:flex;flex-direction:column;justify-content:center;gap:11px;padding:26px 0 40px}
.choix a{
  display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  box-shadow:var(--sh-2);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.choix a:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:#D9E4F2}
.choix a:active{transform:translateY(0)}
.choix .n{flex:0 0 auto;width:34px;height:34px;border-radius:11px;background:#EEF5FE;color:var(--blue);
  font-size:13px;font-weight:700;display:grid;place-items:center}
.choix .t{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.choix .go{margin-left:auto;flex:0 0 auto;width:20px;height:20px}
.choix .go svg{width:100%;height:100%;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 5. Jeux de fusion (Suite Navista / Visio Navista) ----------- */
.board-wrap{position:relative;flex:1;min-height:0;display:grid;place-items:center;margin-top:10px}
.board{
  position:relative;border-radius:20px;background:rgba(11,37,69,.05);
  touch-action:none;user-select:none;-webkit-user-select:none;
  --gap:10px;--cell:70px;
}
.board-bg{position:absolute;inset:var(--gap);display:grid;
  grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--gap)}
.board-bg span{border-radius:calc(var(--cell) * .19);background:rgba(255,255,255,.55)}
/* briques : positionnées en absolu, elles glissent d'une case à l'autre */
.tile{
  position:absolute;top:0;left:0;width:var(--cell);height:var(--cell);
  border-radius:calc(var(--cell) * .19);display:grid;place-items:center;padding:calc(var(--cell) * .17);
  border:1px solid rgba(11,37,69,.06);box-shadow:0 1px 2px rgba(11,37,69,.07);
  transition:transform .12s ease-in-out;will-change:transform;
}
.tile .ico{width:100%;height:100%}
.tile.is-new{animation:pop .18s cubic-bezier(.34,1.5,.5,1) .1s both}
.tile.is-merged{animation:merge .2s cubic-bezier(.34,1.6,.45,1) both}
@keyframes pop{from{opacity:0;scale:.5}to{opacity:1;scale:1}}
@keyframes merge{0%{scale:.86}55%{scale:1.14}100%{scale:1}}
/* niveau final */
.tile.is-hero{
  background:linear-gradient(160deg,#3A8DF9,#0F6FEE);border-color:#0B5FD0;
  box-shadow:0 0 0 3px rgba(18,115,241,.16),0 8px 20px rgba(18,115,241,.32);
}
/* échelle de progression des niveaux */
.ladder{flex:0 0 auto;display:flex;align-items:flex-start;gap:1px;margin-top:10px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 4px;box-shadow:var(--sh-1)}
.ladder-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  text-align:center;opacity:.4;transition:opacity .25s ease}
.ladder-item.is-on{opacity:1}
.ladder-item > i{display:block;width:22px;height:22px;overflow:hidden}
.ladder-item span{font-size:8.5px;font-weight:600;line-height:1.15;color:var(--ink-2);overflow-wrap:anywhere}
.ladder-item.is-on span{color:var(--ink)}
.ladder-sep{flex:0 0 auto;color:var(--ink-3);opacity:.5;font-size:10px;margin-top:5px}
.ladder[data-n="6"] .ladder-item > i{width:20px;height:20px}
.ladder[data-n="6"] .ladder-item span{font-size:7.5px}
.ladder[data-n="6"] .ladder-sep{font-size:9px}
/* indice de geste, visible tant qu'aucun coup n'a été joué */
.swipe-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:7px;background:rgba(11,37,69,.86);color:#fff;
  font-size:11.5px;font-weight:600;padding:7px 13px;border-radius:999px;white-space:nowrap;
  transition:opacity .3s ease}
.swipe-hint svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.swipe-hint[hidden]{display:none}

/* ---------- 6. Composants partagés par plusieurs jeux ------------------- */
/* bouton « nouvelle partie » de la barre haute */
.restart{touch-action:manipulation;width:36px;height:36px;border-radius:12px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;box-shadow:var(--sh-1)}
.restart svg{width:17px;height:17px;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* consigne courte sous la zone de jeu (cliché parfait, signez ici) */
.shot-hint{flex:0 0 auto;text-align:center;font-size:12px;color:var(--ink-2);line-height:1.35;margin-top:4px}
/* rang affiché sous le score */
.stat .rank{display:block;font-size:10px;font-weight:600;color:var(--blue);margin-top:1px}
/* message flottant (série, erreur, service attrapé) */
.toast{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:9;
  background:rgba(11,37,69,.92);color:#fff;font-size:12px;font-weight:600;
  padding:7px 13px;border-radius:999px;opacity:0;transition:opacity .2s ease;
  white-space:nowrap;pointer-events:none;
}
.toast.is-on{opacity:1}
.toast.is-good{background:rgba(46,156,91,.95)}

/* ---------- 7. Adaptations écrans étroits ------------------------------- */
@media (max-width:640px){
  .menu-head .deco-leaf{width:118px;opacity:.35}
  .menu-head .deco-wood{width:132px;opacity:.4}
  .head-inner{padding:30px 0 24px}
  .head-inner img{width:116px;margin-bottom:16px}
  .menu-head h1{font-size:23px}
}

/* ---------- 8. Composants déplacés ici pour être partagés --------------- */
/* compteur d'erreurs posé sur la zone de jeu (à portée de poste, chaîne, signatures) */
.zone-hud{position:absolute;top:8px;right:8px;z-index:5;pointer-events:none;
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;box-shadow:var(--sh-1);font-size:11px;font-weight:600;color:var(--ink-2)}
.zone-hud .hearts{margin-top:0}
/* retour visuel bref : un picto qui apparaît puis s'efface */
.catch-pop{position:absolute;z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:0;pointer-events:none;transform:translate(-50%,0)}
.catch-pop .rond{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;
  padding:11px;box-shadow:0 0 0 3px rgba(46,156,91,.18),0 8px 18px rgba(11,37,69,.18)}
.catch-pop .rond .ico{width:100%;height:100%}
.catch-pop b{background:#2E9C5B;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.catch-pop.is-on{animation:catchpop .6s ease both}
@keyframes catchpop{
  0%{opacity:0;transform:translate(-50%,12px) scale(.6)}
  22%{opacity:1;transform:translate(-50%,-6px) scale(1.08)}
  70%{opacity:1;transform:translate(-50%,-16px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-34px) scale(.95)}
}

/* ---------- 9. Parcours tirage au sort ---------------------------------- */
.tirage-bloc{margin:0 0 12px;display:flex;flex-direction:column;gap:9px}
.tirage-record{font-size:12.5px;color:var(--ink-2)}
.tirage-record b{color:var(--blue)}
.tirage-ok{font-size:13px;font-weight:600;color:#2E9C5B}
.tirage-large{width:100%}
.tirage-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;
  background:rgba(11,37,69,.35);backdrop-filter:blur(3px);overflow-y:auto}
.tirage-modal[hidden]{display:none}
.tirage-box{width:100%;max-width:360px;background:#fff;border-radius:20px;padding:20px;
  box-shadow:var(--sh-3);display:flex;flex-direction:column;gap:10px}
.tirage-box strong{font-size:17px;letter-spacing:-.01em}
.tirage-note{font-size:11.5px;color:var(--ink-3);margin:0}
.tirage-box label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--ink-2)}
/* tous les champs de saisie, quel que soit leur type (tel, email, number…) */
.tirage-box input:not([type=checkbox]):not([type=radio]){
  font:inherit;font-size:15px;color:var(--ink);background:#FAFBFC;
  border:1px solid var(--line);border-radius:11px;padding:11px 12px}
.tirage-box input:focus{outline:2px solid rgba(18,115,241,.35);outline-offset:1px}
.tirage-check{flex-direction:row!important;align-items:flex-start;gap:8px;font-weight:500;font-size:11.5px}
.tirage-check input{margin-top:2px;width:16px;height:16px;accent-color:var(--blue)}
.tirage-box.is-error input:invalid{border-color:#D9534F;background:#FDF4F4}

/* =========================================================================
   10. SOCLE DES JEUX « PREUVE » (campagne VisioConférence)
   Composants communs à Flux protégé / Cliché parfait / 3 Clics.
   ========================================================================= */
/* pictogrammes au trait : ils prennent la couleur de leur conteneur */
.ico-t{display:block;width:100%;height:100%}

/* points qui s'envolent à l'endroit de l'action */
.pop{
  position:absolute;z-index:8;pointer-events:none;white-space:nowrap;
  font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--blue);
  text-shadow:0 2px 8px rgba(255,255,255,.95);
  animation:popup .95s cubic-bezier(.2,.8,.3,1) both;
}
.pop--mauvais{color:#D9534F}
.pop--combo{color:#2E9C5B;font-size:16px}
@keyframes popup{
  0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}
  18%{opacity:1;transform:translate(-50%,-70%) scale(1.06)}
  100%{opacity:0;transform:translate(-50%,-180%) scale(1)}
}
/* annonce brève au centre de la zone de jeu */
.annonce{
  position:absolute;left:50%;top:34%;z-index:9;pointer-events:none;text-align:center;
  font-size:16px;font-weight:700;line-height:1.25;color:var(--navy);
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:14px;
  padding:9px 15px;box-shadow:var(--sh-2);animation:annonceIn 1.6s ease both;
}
@keyframes annonceIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  80%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-70%) scale(.98)}
}
/* vies : des boucliers, pas des cœurs (registre technique) */
.vies{display:flex;gap:4px;align-items:center}
.vies i{display:block;width:15px;height:15px}
.vies svg{display:block;width:100%;height:100%;fill:var(--blue)}
.vies i.off svg{fill:#C6D0DD}
/* compteur de combo, posé sur la ligne « rang » des cartes stats */
.combo-hud{color:var(--ink-3)!important;display:block}
.combo-hud.is-on{color:#2E9C5B!important;font-weight:700}
.combo-hud.is-bump{animation:bump .25s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}

/* ---------- Écran de départ : titre, une ligne, JOUER -------------------- */
.overlay .box--depart{max-width:320px}
.box--depart .depart-titre{display:block;font-size:27px;line-height:1.08;font-weight:800;letter-spacing:-.025em}
.box--depart .depart-ligne{display:block;font-size:15.5px;color:var(--ink-2);margin:10px 0 22px}
.btn--play{font-size:17px;padding:16px 18px}
.depart-record{display:block;margin-top:12px;font-size:12px;color:var(--ink-3)}

/* ---------- Écran de fin : le score d'abord ------------------------------ */
.overlay .box--fin{max-width:330px}
.box--fin .fin-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.box--fin .fin-score{display:block;font-size:54px;line-height:1;font-weight:800;
  letter-spacing:-.035em;color:var(--navy);margin-top:4px}
.box--fin .fin-unite{display:block;font-size:12px;color:var(--ink-3);margin:4px 0 0}
.fin-lignes{display:flex;justify-content:center;gap:16px;margin-top:13px;flex-wrap:wrap}
.fin-lignes span{display:flex;flex-direction:column;gap:1px;font-size:10.5px;color:var(--ink-3);margin:0;text-align:center}
.fin-lignes b{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.fin-preuve{margin:15px 0;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:12px 13px;box-shadow:var(--sh-1)}
.fin-preuve strong{display:block;font-size:15px;line-height:1.25;color:var(--navy)}
.fin-preuve span{display:block;font-size:12px;line-height:1.35;color:var(--ink-2);margin:5px 0 0}
.box--fin .tirage-record{margin-bottom:2px}

/* =========================================================================
   11. LE FLUX PROTÉGÉ — couloir vertical, pilotage gauche / droite
   ========================================================================= */
.flux-aide{
  position:absolute;inset:0;z-index:4;display:grid;grid-template-columns:1fr 1fr;
  pointer-events:none;transition:opacity .5s ease;
}
.flux-aide[hidden]{display:none}
.flux-aide.is-out{opacity:0}
.flux-aide span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:6px;padding-bottom:16px;font-size:11px;font-weight:700;color:#1273F1;
  background:linear-gradient(180deg,rgba(18,115,241,0),rgba(18,115,241,.07))}
.flux-aide svg{width:26px;height:26px;fill:none;stroke:#1273F1;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.flux-aide span:first-child{border-right:1px dashed rgba(18,115,241,.22)}

/* =========================================================================
   12. LE CLICHÉ PARFAIT — apparitions à viser
   ========================================================================= */
.cible-zone{
  position:relative;flex:1;min-height:240px;margin:10px 0 0;overflow:hidden;
  border-radius:18px;border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,#EDF2F8 100%);
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
.cible{
  position:absolute;top:0;left:0;border-radius:50%;background:#fff;color:#7C8CA3;
  display:grid;place-items:center;will-change:transform,opacity;
  box-shadow:0 1px 2px rgba(11,37,69,.08),0 6px 14px rgba(11,37,69,.09);
  animation:cibleIn .15s ease both;
}
.cible i{display:block;width:58%;height:58%}
.cible.is-out{animation:cibleOut .16s ease both}
/* NB : ces animations n'utilisent PAS « transform », réservé au placement
   (translate inline posé par le JS) — sinon la cible revient en haut à gauche. */
@keyframes cibleIn{from{opacity:0;scale:.55}to{opacity:1;scale:1}}
@keyframes cibleOut{from{opacity:1;scale:1}to{opacity:0;scale:.6}}
/* la cible à photographier */
.cible.is-n{
  background:linear-gradient(160deg,#3A8DF9,#0F6FEE);color:#fff;
  box-shadow:0 0 0 3px rgba(129,253,245,.45),0 8px 20px rgba(18,115,241,.35);
}
/* leurre « proche » : même pastille bleue, autre lettre (niveaux avancés) */
.cible.is-sosie{
  background:linear-gradient(160deg,#6E8BAD,#4E6A8C);color:#fff;
  box-shadow:0 0 0 3px rgba(110,139,173,.2),0 8px 18px rgba(11,37,69,.18);
}
.cible.is-touche{animation:cibleTouche .28s ease both}
@keyframes cibleTouche{0%{scale:1}40%{scale:1.3}100%{opacity:0;scale:.4}}

/* Polaroïd de récompense : c'est lui qui porte le message commercial */
.pola-card{
  position:absolute;left:50%;top:50%;z-index:10;width:168px;pointer-events:none;text-align:center;
  background:#fff;border-radius:7px;padding:11px 11px 36px;
  box-shadow:0 20px 42px rgba(11,37,69,.26),inset 0 0 0 1px rgba(11,37,69,.06);
  animation:polaOut 2s cubic-bezier(.2,.8,.3,1) both;
}
.pola-card .vue{height:96px;border-radius:3px;display:grid;place-items:center;padding:14px;
  background:linear-gradient(160deg,#0B4C8C,#1273F1)}
.pola-card .vue img{display:block;width:80%;filter:brightness(0) invert(1)}
.pola-card b{position:absolute;left:8px;right:8px;bottom:11px;font-size:13.5px;font-weight:800;
  line-height:1.2;color:var(--navy);letter-spacing:-.01em}
@keyframes polaOut{
  0%{opacity:0;transform:translate(-50%,-32%) rotate(-9deg) scale(.7)}
  13%{opacity:1;transform:translate(-50%,-54%) rotate(-3deg) scale(1)}
  75%{opacity:1;transform:translate(-50%,-54%) rotate(-3deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-78%) rotate(-1deg) scale(.95)}
}

/* =========================================================================
   13. 3 CLICS — créer une visio, encore et encore
   ========================================================================= */
.clic-zone{
  position:relative;flex:1;min-height:250px;margin:10px 0 0;overflow:hidden;
  border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1);
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
/* lignes d'agenda : on suggère le planning sans imiter un logiciel */
.clic-zone::before{
  content:"";position:absolute;left:0;right:0;top:34px;bottom:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 35px,#EFF3F8 35px 36px);
}
/* barre d'application stylisée : on suggère l'agenda sans l'imiter */
.clic-barre{position:absolute;top:0;left:0;right:0;height:34px;z-index:2;
  display:flex;align-items:center;gap:7px;padding:0 11px;
  background:linear-gradient(180deg,#F7FAFD,#EFF4FA);border-bottom:1px solid var(--line)}
.clic-barre .pastilles{display:flex;gap:4px}
.clic-barre .pastilles i{width:7px;height:7px;border-radius:50%;background:#D7E0EC;display:block}
.clic-barre .titre{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.clic-barre .etapes{margin-left:auto;display:flex;gap:4px}
.clic-barre .etapes i{width:16px;height:4px;border-radius:2px;background:#DCE5F0;display:block;
  transition:background .15s ease}
.clic-barre .etapes i.is-on{background:var(--blue)}
.clic-zone .zone-hud{top:42px}
/* jauge de temps de la visio en cours */
.clic-jauge{position:absolute;top:34px;left:0;height:3px;z-index:3;background:var(--blue);
  border-radius:0 2px 2px 0;transition:width .1s linear}
.clic-jauge.is-urgent{background:#D9534F}

/* cibles cliquables : le bon bouton est toujours le bouton bleu */
.clic-cible{
  position:absolute;top:0;left:0;z-index:2;display:flex;align-items:center;gap:7px;
  border-radius:12px;padding:0 12px;white-space:nowrap;overflow:hidden;
  font-size:13px;font-weight:600;letter-spacing:-.01em;
  background:#F6F8FB;border:1px solid var(--line);color:var(--ink-3);
  will-change:transform;animation:cibleIn .14s ease both;
}
.clic-cible i{display:block;flex:0 0 auto;width:17px;height:17px}
.clic-cible span{overflow:hidden;text-overflow:ellipsis}
.clic-cible.is-bon{
  background:linear-gradient(180deg,#2A83F7,var(--blue));border-color:#0B5FD0;color:#fff;
  box-shadow:0 0 0 3px rgba(129,253,245,.32),0 6px 16px rgba(18,115,241,.3);
}
.clic-cible.is-ok{animation:clicOk .22s ease both}
.clic-cible.is-ko{animation:clicKo .3s ease both}
@keyframes clicOk{0%{scale:1}45%{scale:1.07}100%{opacity:0;scale:.9}}
@keyframes clicKo{0%,100%{translate:0}25%{translate:-6px}75%{translate:6px}}

/* le matériel qui se connecte tout seul à la fin des 3 clics */
.clic-materiel{
  position:absolute;left:50%;bottom:14px;z-index:6;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;pointer-events:none;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 13px 8px 9px;
  box-shadow:var(--sh-2);animation:materielIn 1.5s cubic-bezier(.2,.8,.3,1) both;
}
.clic-materiel .rond{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  padding:7px;background:linear-gradient(160deg,#3A8DF9,#0F6FEE);color:#fff}
.clic-materiel b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap}
.clic-materiel em{display:block;font-style:normal;font-size:11px;font-weight:600;color:#2E9C5B;
  white-space:nowrap}
@keyframes materielIn{
  0%{opacity:0;transform:translate(-50%,16px) scale(.92)}
  14%{opacity:1;transform:translate(-50%,0) scale(1)}
  80%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-8px) scale(.98)}
}
/* bandeau bas : les configurations déjà rencontrées */
.clic-parc{flex:0 0 auto;display:flex;align-items:center;gap:6px;margin-top:8px;overflow:hidden}
.clic-parc .lbl{flex:0 0 auto;font-size:10px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.clic-parc .liste{display:flex;gap:5px;overflow:hidden}
.clic-parc i{flex:0 0 auto;width:26px;height:26px;border-radius:9px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;padding:5px;color:var(--blue);box-shadow:var(--sh-1);
  animation:cibleIn .2s ease both}

/* =========================================================================
   14. Échelle longue (La Suite Navista à 10 niveaux)
   ========================================================================= */
/* briques « combinaison » : plusieurs pictos officiels dans une même tuile */
.combo{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;
  gap:4%;width:100%;height:100%}
.combo i{display:block;flex:0 0 auto}
.combo[data-n="2"] i{width:46%;height:46%}
.combo[data-n="3"] i{width:42%;height:42%}
.combo[data-n="4"] i{width:44%;height:44%}
.combo[data-n="5"] i{width:30%;height:30%}
.combo .ico{width:100%;height:100%}
/* au-delà de 6 niveaux l'échelle ne garde que les pictos */
.ladder[data-n="10"],.ladder[data-n="9"],.ladder[data-n="8"],.ladder[data-n="7"]{padding:7px 4px}
.ladder[data-n="10"] .ladder-item > i,.ladder[data-n="9"] .ladder-item > i,
.ladder[data-n="8"] .ladder-item > i,.ladder[data-n="7"] .ladder-item > i{width:17px;height:17px}
/* « > span » : on masque le libellé, PAS le .combo qui vit dans le <i> */
.ladder[data-n="10"] .ladder-item > span,.ladder[data-n="9"] .ladder-item > span,
.ladder[data-n="8"] .ladder-item > span,.ladder[data-n="7"] .ladder-item > span,
.ladder[data-n="10"] .ladder-sep,.ladder[data-n="9"] .ladder-sep,
.ladder[data-n="8"] .ladder-sep,.ladder[data-n="7"] .ladder-sep{display:none}

/* =========================================================================
   15. Menu : sections (campagne visio / bonus / autres prototypes)
   ========================================================================= */
.menu-section{display:flex;align-items:center;gap:10px;margin:22px 0 2px}
.menu-section:first-child{margin-top:0}
.menu-section h2{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.menu-section span{flex:1;height:1px;background:var(--line)}
.choix a .sub{display:block;font-size:12px;font-weight:500;color:var(--ink-3);margin-top:2px}
.choix a.is-key .n{background:linear-gradient(160deg,#3A8DF9,#0F6FEE);color:#fff}
.choix a.is-small{padding:11px 16px}
.choix a.is-small .t{padding-left:2px}
.choix a.is-small .t{font-size:14.5px;font-weight:500}
.menu-accroche{margin:14px 0 0;text-align:center;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.menu-accroche b{color:var(--navy);font-weight:700}

/* =========================================================================
   16. MENU « ANGLE VISIO » (index2.html)
   Une carte par preuve commerciale : le jeu y est présenté comme la
   démonstration de l'argument, pas comme un jeu posé à côté d'un slogan.
   ========================================================================= */
body.menu--visio .wrap{max-width:600px}
.visio-head{padding:34px 0 26px;text-align:center;position:relative}
.visio-head img{width:132px;height:auto;display:block;margin:0 auto 18px}
.visio-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.visio-head h1{margin-top:9px;font-size:27px;line-height:1.2;letter-spacing:-.025em;font-weight:700}
.visio-head h1 em{font-style:normal;color:var(--blue)}
.visio-head .head-sub{margin-top:7px;font-size:14.5px;color:var(--ink-2)}

/* les 3 cartes de preuve */
.preuves{display:flex;flex-direction:column;gap:13px;padding:4px 0 2px}
.preuve{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:15px 16px 15px;box-shadow:var(--sh-2);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.preuve:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:#D9E4F2}
.preuve:active{transform:translateY(0)}
.preuve-top{display:flex;align-items:flex-start;gap:13px}
.preuve-ico{flex:0 0 auto;width:52px;height:52px;border-radius:15px;padding:10px;
  background:#EAF3FE;display:grid;place-items:center}
.preuve-ico .ico,.preuve-ico .ico-t{width:100%;height:100%}
.preuve-ico .ico-t{color:var(--blue);stroke-width:1.5}
.preuve-num{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.preuve-num i{display:block;width:5px;height:5px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,163,224,.18)}
.preuve h3{margin-top:5px;font-size:19.5px;line-height:1.15;letter-spacing:-.02em;font-weight:700}
.preuve .ligne{margin-top:3px;font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.preuve-args{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.preuve-args span{font-size:11.5px;font-weight:600;color:var(--ink-2);
  background:#F5F8FC;border:1px solid var(--line);border-radius:999px;padding:5px 10px}
.preuve-args span b{color:var(--navy);font-weight:700}
.preuve .btn{margin-top:13px;font-size:15px;padding:12px 16px}

/* carte bonus : même langage, volume réduit */
.preuve--bonus{background:linear-gradient(180deg,#FFFFFF,#FAFCFE)}
.preuve--bonus .preuve-ico{width:44px;height:44px;border-radius:13px;padding:8px}
.preuve--bonus h3{font-size:17px}
.preuve--bonus .btn{background:#fff;color:var(--ink-2);border:1px solid var(--line);
  box-shadow:var(--sh-1);font-weight:600}
.preuve--bonus .btn:hover{background:#FBFCFE;color:var(--ink);filter:none}

.visio-pied{margin:18px 0 34px;text-align:center;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.visio-pied b{color:var(--ink-2);font-weight:600}
.visio-pied a{color:var(--blue);font-weight:600}

/* desktop : les 3 preuves côte à côte, hauteur alignée */
@media (min-width:880px){
  body.menu--visio .wrap{max-width:1040px}
  .preuves{flex-direction:row;align-items:stretch}
  .preuves .preuve{flex:1 1 0;min-width:0}
  .preuve .btn{margin-top:auto}
  .preuve-args{min-height:56px;align-content:flex-start}
  .visio-head h1{font-size:32px}
}

/* =========================================================================
   17. LE BOUCLIER ROTATIF (souveraineté)
   Anneau + noyau dessinés au canvas ; le noyau lumineux est en DOM pour
   porter le logo et respirer en CSS.
   ========================================================================= */
.bouclier-zone{
  position:relative;flex:1;min-height:260px;margin:8px -15px 0;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;
  background:radial-gradient(60% 45% at 50% 50%,#FFFFFF,#EDF3F9);
}
.bouclier-zone canvas{display:block;width:100%;height:100%}
.noyau{
  position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;padding:20px;
  background:radial-gradient(60% 60% at 50% 35%,#3A8DF9,#0F6FEE);
  box-shadow:0 0 0 8px rgba(18,115,241,.10),0 0 0 16px rgba(18,115,241,.05),
             0 14px 30px rgba(18,115,241,.30);
  pointer-events:none;
}
.noyau img{display:block;width:100%;filter:brightness(0) invert(1)}
.noyau::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid rgba(0,163,224,.5);animation:pulseNoyau 2.4s ease-out infinite;
}
@keyframes pulseNoyau{
  0%{opacity:.8;scale:1}
  70%{opacity:0;scale:1.45}
  100%{opacity:0;scale:1.45}
}
.noyau.is-touche{animation:noyauChoc .4s ease}
@keyframes noyauChoc{0%,100%{translate:0}25%{translate:-5px}75%{translate:5px}}

/* =========================================================================
   18. CLICHÉ PARFAIT — bac à clichés + révélation des 3 Polaroïds
   ========================================================================= */
.bac{
  position:absolute;left:0;right:0;bottom:0;z-index:5;height:56px;
  display:flex;align-items:center;gap:9px;padding:0 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.92));
  border-top:1px solid var(--line);backdrop-filter:blur(4px);pointer-events:none;
}
.bac .lbl{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-3);
  line-height:1.2;text-transform:uppercase}
.bac .cases{display:flex;gap:8px}
.bac .case{
  width:30px;height:38px;border-radius:4px;border:1.5px dashed #C8D4E3;background:rgba(255,255,255,.6);
  display:grid;place-items:center;
}
.bac .case.is-pleine{border:0;background:#fff;padding:3px 3px 8px;
  box-shadow:0 2px 6px rgba(11,37,69,.16)}
.bac .case .vue{width:100%;height:100%;border-radius:2px;
  background:linear-gradient(160deg,#0B4C8C,#1273F1);display:grid;place-items:center}
.bac .case .vue b{color:#fff;font-size:13px;font-weight:800;line-height:1}
.bac .case.is-parfait .vue{background:linear-gradient(160deg,#0F6FEE,#00A3E0);
  box-shadow:0 0 0 2px var(--cyan)}
/* vignette qui vole du point de capture jusqu'au bac */
.vignette{
  position:absolute;left:0;top:0;z-index:9;width:30px;height:38px;border-radius:4px;
  background:#fff;padding:3px 3px 8px;box-shadow:0 6px 16px rgba(11,37,69,.24);
  transition:transform .42s cubic-bezier(.3,.8,.4,1),opacity .42s ease;pointer-events:none;
}
.vignette .vue{width:100%;height:100%;border-radius:2px;display:grid;place-items:center;
  background:linear-gradient(160deg,#0B4C8C,#1273F1)}
.vignette .vue b{color:#fff;font-size:13px;font-weight:800;line-height:1}

/* révélation : le jeu s'arrête, les 3 Polaroïds passent en grand */
.trio{
  position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:14px;
  background:rgba(244,247,250,.94);backdrop-filter:blur(4px);cursor:pointer;
}
.trio[hidden]{display:none}
.trio-titre{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.trio-rang{display:flex;align-items:flex-end;justify-content:center;gap:7px;width:100%}
.trio-pola{
  flex:1 1 0;min-width:0;max-width:112px;background:#fff;border-radius:6px;
  padding:7px 7px 30px;box-shadow:0 14px 30px rgba(11,37,69,.20);position:relative;
  animation:trioIn .45s cubic-bezier(.2,.9,.3,1) both;
}
.trio-pola:nth-child(1){rotate:-4deg}
.trio-pola:nth-child(2){rotate:1deg;z-index:2}
.trio-pola:nth-child(3){rotate:5deg}
.trio-pola:nth-child(2){animation-delay:.1s}
.trio-pola:nth-child(3){animation-delay:.2s}
.trio-pola .vue{height:64px;border-radius:3px;display:grid;place-items:center;padding:9px;
  background:linear-gradient(160deg,#0B4C8C,#1273F1)}
.trio-pola .vue img{display:block;width:88%;filter:brightness(0) invert(1)}
.trio-pola b{position:absolute;left:5px;right:5px;bottom:7px;font-size:10.5px;font-weight:800;
  line-height:1.15;text-align:center;color:var(--navy)}
@keyframes trioIn{from{opacity:0;translate:0 22px;scale:.8}to{opacity:1;translate:0;scale:1}}
.trio-suite{font-size:12.5px;font-weight:600;color:var(--ink-2);animation:clignote 1.4s ease-in-out infinite}
@keyframes clignote{0%,100%{opacity:.45}50%{opacity:1}}

/* =========================================================================
   19. STACK (plus simple)
   ========================================================================= */
.stack-zone{
  position:relative;flex:1;min-height:260px;margin:8px -15px 0;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;
  background:linear-gradient(180deg,#FBFCFE,#EAF0F7);
}
.bloc{
  position:absolute;left:0;top:0;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;
  font-size:11px;font-weight:700;letter-spacing:.01em;line-height:1.1;text-align:center;
  color:#fff;background:linear-gradient(180deg,#3A8DF9,#1273F1);
  box-shadow:0 4px 12px rgba(18,115,241,.25),inset 0 1px 0 rgba(255,255,255,.3);
  will-change:transform;overflow:hidden;
}
.bloc i{flex:0 0 auto;width:17px;height:17px;opacity:.9}
.bloc.e1{background:linear-gradient(180deg,#5AA0FA,#2A83F7)}
.bloc.e2{background:linear-gradient(180deg,#2A83F7,#0F6FEE)}
.bloc.e3{background:linear-gradient(180deg,#0F6FEE,#0B5FD0)}
.bloc.is-faux{background:linear-gradient(180deg,#98A8BE,#7C8CA3);box-shadow:0 4px 12px rgba(11,37,69,.14)}
.bloc.is-pose{animation:blocPose .18s ease both}
@keyframes blocPose{0%{scale:1 1.14}60%{scale:1 .94}100%{scale:1}}
.bloc.is-valide{animation:blocValide .5s ease both}
@keyframes blocValide{0%{opacity:1;translate:0}100%{opacity:0;translate:0 -46px;scale:1.04}}
/* chute du morceau coupé */
.chute{position:absolute;left:0;top:0;height:46px;border-radius:12px;background:rgba(18,115,241,.35);
  animation:chute .5s ease-in both;pointer-events:none}
@keyframes chute{to{opacity:0;translate:0 140px;rotate:12deg}}
/* consigne : la prochaine étape attendue */
.consigne{position:absolute;left:10px;top:10px;z-index:4;max-width:calc(100% - 156px);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;box-shadow:var(--sh-1);font-size:12px;font-weight:700;color:var(--navy)}
.consigne i{display:block;width:16px;height:16px;color:var(--blue)}
.consigne em{font-style:normal;font-size:10px;font-weight:600;color:var(--ink-3);letter-spacing:.05em}

/* =========================================================================
   20. SIMON (plus simple)
   ========================================================================= */
.simon-zone{position:relative;flex:1;min-height:270px;margin-top:8px;display:flex;
  flex-direction:column;gap:9px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.simon-case{
  flex:1 1 0;min-height:70px;border-radius:18px;border:1px solid var(--line);
  display:flex;align-items:center;gap:13px;padding:0 18px;text-align:left;
  background:#fff;box-shadow:var(--sh-1);color:var(--ink-2);
  transition:background .12s ease,color .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.simon-case i{flex:0 0 auto;width:28px;height:28px;color:var(--blue);transition:color .12s ease}
.simon-case b{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.simon-case span{display:block;font-size:11px;font-weight:600;color:var(--ink-3)}
.simon-case.is-on{
  background:linear-gradient(180deg,#2A83F7,var(--blue));border-color:#0B5FD0;color:#fff;
  box-shadow:0 0 0 4px rgba(129,253,245,.35),0 10px 24px rgba(18,115,241,.32);
}
.simon-case.is-on b,.simon-case.is-on span{color:#fff}
.simon-case.is-on i{color:#fff}
.simon-case.is-faux{background:#FDECEC;border-color:#F3C7C6}
.simon-case.is-muet{opacity:.55}
/* jauge de temps de réponse */
.simon-jauge{flex:0 0 auto;height:4px;border-radius:2px;background:#E4EAF2;overflow:hidden;margin-top:2px}
.simon-jauge i{display:block;height:100%;background:var(--blue);border-radius:2px;
  transition:width .1s linear}
.simon-jauge i.is-urgent{background:#D9534F}
.simon-etat{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);
  background:rgba(11,37,69,.9);color:#fff;font-size:13px;font-weight:700;padding:9px 16px;
  border-radius:999px;pointer-events:none;white-space:nowrap}
.simon-etat[hidden]{display:none}

/* =========================================================================
   21. TRI DU MATÉRIEL (geste rapide)
   ========================================================================= */
.tri-zone{
  position:relative;flex:1;min-height:270px;margin:8px -15px 0;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;
  background:radial-gradient(55% 40% at 50% 50%,#FFFFFF,#EDF2F8);
}
.tri-zone canvas{position:absolute;inset:0;z-index:4;pointer-events:none;display:block;width:100%;height:100%}
.hub{
  position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);
  width:104px;height:104px;border-radius:50%;display:grid;place-items:center;padding:24px;
  background:radial-gradient(60% 60% at 50% 35%,#3A8DF9,#0F6FEE);
  box-shadow:0 0 0 10px rgba(18,115,241,.08),0 12px 28px rgba(18,115,241,.28);
  pointer-events:none;
}
.hub img{display:block;width:100%;filter:brightness(0) invert(1)}
.hub.is-ok{animation:hubOk .4s ease}
@keyframes hubOk{0%,100%{scale:1}40%{scale:1.1}}
.objet{
  position:absolute;left:0;top:0;z-index:3;width:66px;height:66px;border-radius:50%;
  background:#fff;display:grid;place-items:center;color:var(--navy);
  box-shadow:0 2px 6px rgba(11,37,69,.10),0 10px 22px rgba(11,37,69,.10);
  will-change:transform;
}
.objet i{display:block;width:56%;height:56%}
.objet.is-absurde{color:#B06A1E;background:#FFF7EC;box-shadow:0 2px 6px rgba(176,106,30,.12),0 10px 22px rgba(176,106,30,.12)}
.objet.is-out{animation:objetOut .3s ease both}
@keyframes objetOut{to{opacity:0;scale:.5}}
.objet .nom{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  max-width:104px;overflow:hidden;text-overflow:ellipsis;
  font-size:9px;font-weight:700;letter-spacing:.02em;color:var(--ink-3);white-space:nowrap}

/* =========================================================================
   22. MICRO-DÉFIS
   ========================================================================= */
.defi-zone{
  position:relative;flex:1;min-height:270px;margin:8px -15px 0;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;
  background:linear-gradient(180deg,#FBFCFE,#EAF0F7);
}
.defi-verbe{
  position:absolute;left:0;right:0;top:0;z-index:5;padding:10px 14px 9px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,0));
  pointer-events:none;
}
.defi-verbe b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--navy);
  line-height:1.05}
.defi-verbe span{display:block;font-size:11.5px;font-weight:600;color:var(--ink-3);margin-top:2px}
.defi-jauge{position:absolute;left:0;top:0;height:4px;z-index:6;background:var(--blue);
  border-radius:0 2px 2px 0;transition:width .08s linear}
.defi-jauge.is-urgent{background:#D9534F}
.defi-aire{position:absolute;left:0;right:0;top:58px;bottom:0;z-index:3}
.defi-hub{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  width:86px;height:86px;border-radius:50%;display:grid;place-items:center;padding:20px;
  background:radial-gradient(60% 60% at 50% 35%,#3A8DF9,#0F6FEE);
  box-shadow:0 0 0 8px rgba(18,115,241,.09),0 10px 24px rgba(18,115,241,.26);
}
.defi-hub[hidden]{display:none}
.defi-hub img{display:block;width:100%;filter:brightness(0) invert(1)}
.defi-hub.is-cible{box-shadow:0 0 0 8px rgba(129,253,245,.45),0 10px 24px rgba(18,115,241,.3)}
.piece{
  position:absolute;left:0;top:0;width:72px;height:72px;border-radius:20px;background:#fff;
  display:grid;place-items:center;color:var(--navy);border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(11,37,69,.09),0 10px 20px rgba(11,37,69,.09);
  will-change:transform;touch-action:none;
}
.piece i{display:block;width:54%;height:54%}
.piece .nom{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);
  max-width:104px;overflow:hidden;text-overflow:ellipsis;
  font-size:9px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.piece.is-absurde{color:#B06A1E;background:#FFF7EC;border-color:#F0DFC6}
.piece.is-prise{box-shadow:0 0 0 3px rgba(129,253,245,.5),0 16px 30px rgba(11,37,69,.2);z-index:6}
.piece.is-ok{animation:pieceOk .3s ease both}
.piece.is-ko{animation:clicKo .3s ease both}
@keyframes pieceOk{to{opacity:0;scale:.4}}
.salle{position:absolute;left:50%;top:6px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:9px 13px;box-shadow:var(--sh-1)}
.salle i{display:block;width:26px;height:26px;color:var(--blue)}
.salle .vide{width:26px;height:26px;border-radius:8px;border:1.5px dashed #C8D4E3;
  display:grid;place-items:center;color:var(--ink-3);font-size:14px;font-weight:800}
.defi-mot{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:8;text-align:center;
  background:rgba(11,37,69,.92);color:#fff;font-size:12.5px;font-weight:600;line-height:1.3;
  padding:9px 12px;border-radius:14px;pointer-events:none;
  animation:motIn 1.5s ease both;
}
@keyframes motIn{0%{opacity:0;translate:0 10px}12%{opacity:1;translate:0}
  82%{opacity:1;translate:0}100%{opacity:0;translate:0 -6px}}

/* =========================================================================
   23. Menu de test : badges de variante
   ========================================================================= */
.choix a .tag{
  display:inline-block;margin-left:7px;vertical-align:1.5px;
  font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--blue);background:#EAF3FE;border-radius:999px;padding:2px 7px;
}
.choix a .tag.is-ref{color:var(--ink-3);background:#F1F4F8}

/* socle du Stack : la messagerie du client, sur laquelle tout s'empile */
.bloc.socle{background:linear-gradient(180deg,#61738C,#44546D);
  box-shadow:0 4px 12px rgba(11,37,69,.18);font-size:10px;letter-spacing:.06em}

/* =========================================================================
   24. FLUX PROTÉGÉ V2 — bleu = environnement Navista, gris = extérieur
   ========================================================================= */
.fluxv2-zone{
  position:relative;flex:1;min-height:250px;margin:8px -15px 0;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;
  background:linear-gradient(180deg,#59657A,#434E61);   /* l'extérieur */
}
.fluxv2-zone canvas{display:block;width:100%;height:100%}
.fluxv2-aide{
  position:absolute;inset:0;z-index:4;display:grid;grid-template-columns:1fr 1fr 1fr;
  pointer-events:none;transition:opacity .5s ease;
}
.fluxv2-aide[hidden]{display:none}
.fluxv2-aide.is-out{opacity:0}
.fluxv2-aide span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:6px;padding-bottom:18px;font-size:11.5px;font-weight:700;color:#fff;
  text-shadow:0 1px 6px rgba(11,37,69,.5)}
.fluxv2-aide svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.fluxv2-aide span + span{border-left:1px dashed rgba(255,255,255,.28)}
.fluxv2-zone .zone-hud{background:rgba(255,255,255,.92)}

/* =========================================================================
   25. SNAKE — 1 licence, plusieurs salles
   ========================================================================= */
.snake-zone{
  position:relative;flex:1;min-height:250px;margin:8px 0 0;overflow:hidden;
  border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(180deg,#F7FAFD,#EAF1F8);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.snake-zone canvas{display:block;width:100%;height:100%}
/* HUD du Snake : salles reliées · 1 licence · 49 € par mois.
   Il vit AU-DESSUS du terrain, jamais dessus : une pastille à collecter ne
   peut donc physiquement pas se retrouver masquée par un compteur. Compact,
   une seule rangée, pour ne pas manger la hauteur d'écran sur smartphone. */
.snake-hud{
  flex:0 0 auto;position:relative;display:flex;align-items:stretch;margin-top:8px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-1);overflow:hidden;
}
.snake-hud .cpt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:6px 4px;line-height:1.05;min-width:0}
.snake-hud .cpt + .cpt{border-left:1px solid var(--line)}
.snake-hud b{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.snake-hud i{font-size:8.5px;font-weight:700;font-style:normal;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);text-align:center}
.snake-hud .cpt--licence b,.snake-hud .cpt--prix b{color:var(--blue)}
.snake-hud .cpt.is-bump{animation:bump .3s ease}
/* « +0 € » : il monte le long du prix, DANS le HUD */
.snake-hud .prix-plus{
  position:absolute;right:9px;top:1px;z-index:5;font-size:13px;font-weight:800;
  color:#2E9C5B;pointer-events:none;animation:plusZero 1.1s ease both;
}
/* l'argument commercial : ligne réservée, hauteur stable, hors du terrain */
.snake-pitch{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-height:30px;margin:5px 0 0;padding:0 6px;text-align:center;
  font-size:11.5px;font-weight:700;line-height:1.25;color:var(--blue);
}
.snake-pitch.is-on{animation:pitchIn .4s ease both}
@keyframes pitchIn{from{opacity:0;translate:0 5px}to{opacity:1;translate:0}}

/* =========================================================================
   26. WHAC-A-MOLE — la bonne offre
   ========================================================================= */
.offres-zone{
  position:relative;flex:1;min-height:250px;margin:8px 0 0;
  display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:9px;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
.trou{position:relative;border-radius:16px;background:rgba(11,37,69,.045);
  box-shadow:inset 0 1px 2px rgba(11,37,69,.05)}
.offre{
  position:absolute;inset:0;border-radius:16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;padding:8px 9px;text-align:center;
  font-weight:700;letter-spacing:-.01em;line-height:1.15;
  animation:offreIn .14s ease both;touch-action:manipulation;
}
.offre .txt{font-size:14.5px}
.offre .sur{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.offre.is-bonne{background:linear-gradient(180deg,#2A83F7,var(--blue));color:#fff;
  box-shadow:0 0 0 3px rgba(129,253,245,.35),0 8px 18px rgba(18,115,241,.28)}
.offre.is-fausse{background:#fff;color:var(--ink-2);border:1px solid var(--line);
  box-shadow:0 4px 12px rgba(11,37,69,.08)}
.offre.is-out{animation:offreOut .16s ease both}
.offre.is-ok{animation:offreOk .28s ease both}
.offre.is-ko{animation:clicKo .3s ease both}
@keyframes offreIn{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes offreOut{to{opacity:0;scale:.65}}
@keyframes offreOk{0%{scale:1}40%{scale:1.09}100%{opacity:0;scale:.7}}

/* =========================================================================
   27. TWO DOTS — le chemin simple
   ========================================================================= */
.chemin-zone{
  position:relative;flex:1;min-height:250px;margin:8px 0 0;overflow:hidden;
  border-radius:18px;border:1px solid var(--line);
  background:radial-gradient(70% 55% at 50% 45%,#FFFFFF,#EDF2F8);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.chemin-zone canvas{position:absolute;inset:0;z-index:1;pointer-events:none;
  display:block;width:100%;height:100%}
.noeud{
  position:absolute;left:0;top:0;z-index:2;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#93A1B5;will-change:transform;
  box-shadow:0 1px 2px rgba(11,37,69,.07),0 5px 12px rgba(11,37,69,.08);
}
.noeud i{display:block;width:52%;height:52%}
.noeud.is-parasite{background:#F2F5F9;color:#AAB6C6}
/* les 3 étapes Navista : toujours grandes, toujours numérotées, jamais brouillées */
.noeud.is-etape{
  background:linear-gradient(160deg,#3A8DF9,#0F6FEE);color:#fff;
  box-shadow:0 0 0 3px rgba(129,253,245,.32),0 8px 20px rgba(18,115,241,.30);
}
.noeud.is-etape .num{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border-radius:50%;
  background:#fff;color:var(--blue);font-size:11px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(11,37,69,.18)}
.noeud.is-faite{background:linear-gradient(160deg,#2E9C5B,#1F7F46);
  box-shadow:0 0 0 3px rgba(46,156,91,.25),0 8px 20px rgba(46,156,91,.3)}
.noeud.is-suivante{animation:pulseNoeud 1.1s ease-in-out infinite}
@keyframes pulseNoeud{0%,100%{scale:1}50%{scale:1.07}}
.noeud .lbl{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  font-size:9px;font-weight:700;letter-spacing:.02em;color:var(--ink-2);white-space:nowrap}
.chemin-bandeau{
  position:absolute;left:10px;top:8px;z-index:3;max-width:calc(100% - 152px);overflow:hidden;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;box-shadow:var(--sh-1);font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);pointer-events:none;
}
.chemin-jauge{position:absolute;left:0;bottom:0;height:3px;z-index:4;background:var(--blue);
  border-radius:0 2px 0 0;transition:width .1s linear}
.chemin-jauge.is-urgent{background:#D9534F}

/* =========================================================================
   28. CHUTE D'OBJETS — votre matériel
   ========================================================================= */
.chute-zone{
  position:relative;flex:1;min-height:250px;margin:8px -15px 0;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;
  background:linear-gradient(180deg,#FBFCFE,#E9F0F8);
}
.volant{
  position:absolute;left:0;top:0;z-index:2;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:var(--navy);will-change:transform;
  box-shadow:0 2px 6px rgba(11,37,69,.10),0 10px 22px rgba(11,37,69,.10);
}
.volant i{display:block;width:56%;height:56%}
.volant .nom{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);
  max-width:112px;overflow:hidden;text-overflow:ellipsis;
  font-size:9px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.volant.is-absurde{background:#FFF6E9;color:#B06A1E;
  box-shadow:0 2px 6px rgba(176,106,30,.12),0 10px 22px rgba(176,106,30,.14)}
.volant.is-absurde .nom{color:#B06A1E}
.volant.is-ok{animation:volantOk .3s ease both}
.volant.is-ko{animation:volantKo .34s ease both}
@keyframes volantOk{0%{scale:1}40%{scale:1.22}100%{opacity:0;scale:.5}}
@keyframes volantKo{0%{scale:1;rotate:0}100%{opacity:0;scale:.6;rotate:26deg}}
/* bandeau bas : les familles de matériel déjà connectées */
.familles{position:absolute;left:0;right:0;bottom:0;z-index:3;height:38px;
  display:flex;align-items:center;gap:7px;padding:0 12px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.9));
  pointer-events:none}
.familles .lbl{flex:0 0 auto;font-size:8.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.1}
.familles i{width:24px;height:24px;border-radius:8px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;padding:4px;color:var(--blue);box-shadow:var(--sh-1);
  animation:offreIn .2s ease both}

/* =========================================================================
   29. SNAKE — salle de visio à relier + compteur de prix
   ========================================================================= */
.salle-visio{
  position:absolute;top:0;left:0;z-index:3;border-radius:50%;background:#fff;
  display:grid;place-items:center;padding:7px;color:var(--blue);will-change:transform;
  box-shadow:0 0 0 3px rgba(18,115,241,.12),0 5px 12px rgba(11,37,69,.14);
}
.salle-visio .ico-t{width:100%;height:100%}
@keyframes plusZero{
  0%{opacity:0;translate:0 6px}
  20%{opacity:1;translate:0 0}
  70%{opacity:1;translate:0 0}
  100%{opacity:0;translate:0 -10px}
}
/* =========================================================================
   30. TWO DOTS MATÉRIEL — grille de liaison
   ========================================================================= */
.td-haut{flex:0 0 auto;display:flex;align-items:flex-start;gap:8px;margin-top:8px}
.td-coups{flex:0 0 auto;min-width:64px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:6px 10px 8px;box-shadow:var(--sh-1);text-align:center}
.td-coups .l{display:block;font-size:8.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--ink-2);border-radius:6px;padding:2px 0;
  margin:-2px -4px 4px}
.td-coups .v{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--navy);
  line-height:1}
.td-coups.is-bas .v{color:#D9534F}
.td-obj{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:6px 8px 8px;box-shadow:var(--sh-1)}
.td-obj .l{display:block;font-size:8.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--ink-2);border-radius:6px;padding:2px 0;
  margin:-2px auto 5px;width:74px;text-align:center}
.td-obj .liste{display:flex;justify-content:space-around;gap:6px}
/* noms préfixés : « cible » et « pastille » servent déjà dans d'autres jeux */
.td-cible{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.td-pastille{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  padding:6px;color:#fff;flex:0 0 auto}
.td-pastille svg{width:100%;height:100%;display:block}
.td-obj .n{font-size:11px;font-weight:800;color:var(--ink)}
.td-cible.is-fait .td-pastille{opacity:.35}
.td-cible.is-fait .n{color:#2E9C5B}

.td-zone{position:relative;flex:1;min-height:250px;margin-top:10px;
  touch-action:none;user-select:none;-webkit-user-select:none}
.td-zone canvas{position:absolute;inset:0;z-index:1;pointer-events:none;display:block;
  width:100%;height:100%}
.point{
  position:absolute;left:0;top:0;z-index:2;border-radius:50%;display:grid;place-items:center;
  will-change:transform;transition:transform .16s cubic-bezier(.3,.9,.4,1);
}
.point svg{width:52%;height:52%;display:block}
.point.is-prise{box-shadow:0 0 0 5px rgba(255,255,255,.55)}
.point.is-part{animation:pointPart .2s ease both}
@keyframes pointPart{to{opacity:0;scale:.3}}
.point.is-neuf{animation:pointNeuf .2s ease both}
@keyframes pointNeuf{from{opacity:0;scale:.5}to{opacity:1;scale:1}}
.td-bas{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:8px}
.td-score{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 12px;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;line-height:1.05}
.td-score .v{font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.td-score .l{font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3)}
.td-niveau{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 14px;
  box-shadow:var(--sh-1);text-align:center;line-height:1.05}
.td-niveau .v{display:block;font-size:19px;font-weight:800;color:var(--navy)}
.td-niveau .l{display:block;font-size:8.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
/* message commercial court, en haut de la grille */
.td-mot{
  position:absolute;left:6px;right:6px;top:6px;z-index:6;text-align:center;
  background:rgba(11,37,69,.92);color:#fff;border-radius:12px;padding:8px 10px;
  font-size:12px;font-weight:700;line-height:1.25;pointer-events:none;
  animation:motIn 2.4s ease both;
}

/* =========================================================================
   31. LE MATÉRIEL (chute & swipe)
   Trois colonnes perçues par la composition : deux couloirs de chute, et au
   centre la Visio Navista — plus calme, plus lumineuse, jamais agressive.
   ========================================================================= */
.mat-zone{
  position:relative;flex:1;min-height:250px;margin:8px -15px 0;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;
  background:linear-gradient(180deg,#FBFCFE,#E9F0F8);
}
/* la colonne Navista : un halo vertical, pas une cloison */
.mat-hub{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(18,115,241,.04),rgba(18,115,241,.13) 35%,
                                     rgba(18,115,241,.13) 65%,rgba(18,115,241,.04));
}
.mat-hub::before,.mat-hub::after{
  content:"";position:absolute;top:6%;bottom:6%;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(0,163,224,0),rgba(0,163,224,.55),rgba(0,163,224,0));
}
.mat-hub::before{left:0}
.mat-hub::after{right:0}
.mat-hub .coeur{
  width:78px;height:78px;border-radius:50%;display:grid;place-items:center;padding:17px;
  background:radial-gradient(60% 60% at 50% 35%,#3A8DF9,#0F6FEE);
  box-shadow:0 0 0 8px rgba(18,115,241,.10),0 10px 26px rgba(18,115,241,.28);
}
.mat-hub .coeur img{display:block;width:100%;filter:brightness(0) invert(1)}
.mat-hub .nom{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);text-align:center;line-height:1.3}
.mat-hub.is-ok .coeur{animation:hubOk .4s ease}

.mat-objet{
  position:absolute;left:0;top:0;z-index:3;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:var(--navy);will-change:transform;
  box-shadow:0 2px 6px rgba(11,37,69,.10),0 10px 22px rgba(11,37,69,.10);
}
.mat-objet svg{width:58%;height:58%;display:block;overflow:visible}
/* L'étiquette : c'est elle qui fait l'identification en moins d'une seconde.
   Pastille opaque, texte sombre et gras, posée assez bas pour ne jamais
   empiéter sur la silhouette. Taille pilotée par CONFIG.labelFontSize.    */
.mat-objet .nom{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--mat-label,12px);font-weight:800;letter-spacing:.005em;
  color:var(--navy);background:rgba(255,255,255,.96);
  border:1px solid var(--line);border-radius:999px;padding:2px 9px;
  box-shadow:0 2px 7px rgba(11,37,69,.14)}
.mat-objet.is-absurde{background:#FFF6E9;color:#A85E12;
  box-shadow:0 2px 6px rgba(176,106,30,.12),0 10px 22px rgba(176,106,30,.14)}
.mat-objet.is-absurde .nom{color:#8F4E0C;background:#FFF1DE;border-color:#EFD4AC}
.mat-objet.is-prise{box-shadow:0 0 0 4px rgba(129,253,245,.5),0 14px 26px rgba(11,37,69,.2)}
.mat-objet.is-erreur{background:#FDECEC;color:#C8403B;box-shadow:0 0 0 4px rgba(217,83,79,.25)}
/* indication de sens, le temps des premières secondes */
.mat-aide{
  position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:1fr 1fr 1fr;
  pointer-events:none;transition:opacity .5s ease;
}
.mat-aide[hidden]{display:none}
.mat-aide.is-out{opacity:0}
.mat-aide span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:5px;padding-bottom:16px;font-size:10.5px;font-weight:700;color:var(--blue);text-align:center}
.mat-aide span:nth-child(2){color:var(--ink-3)}
.mat-aide svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.mat-secousse{animation:secousse .26s ease}
@keyframes secousse{0%,100%{translate:0}25%{translate:-4px}75%{translate:4px}}

/* ---- Trois retours, trois zones qui ne se recouvrent JAMAIS -------------
   1. le score flotte à l'endroit de l'objet (.pop)          → au plus près
   2. l'événement de partie s'écrit en haut à gauche (.toast) → secondaire
   3. le message humoristique occupe seul le bas (.defi-mot)  → prioritaire  */
.mat-zone .toast{
  top:8px;bottom:auto;left:8px;right:auto;transform:none;
  max-width:calc(100% - 126px);overflow:hidden;text-overflow:ellipsis;
}
.mat-zone .defi-mot{
  left:10px;right:10px;bottom:10px;z-index:10;text-align:center;
  background:rgba(11,37,69,.96);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 28px rgba(11,37,69,.32);
  border-radius:16px;padding:11px 14px;font-size:14px;line-height:1.3;
}
.mat-zone .defi-mot b{display:block;font-size:14.5px;font-weight:800}
.mat-zone .defi-mot i{display:block;margin-top:5px;font-style:normal;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#81FDF5}
.mat-zone .defi-mot.is-absurde{background:rgba(160,72,20,.96);border-color:rgba(255,255,255,.2)}
.mat-zone .defi-mot.is-absurde i{color:#FFD9A3}
/* écrans courts : la bulle reste lisible sans manger le terrain de jeu */
@media (max-height:680px){
  .mat-zone .defi-mot{font-size:12.5px;padding:9px 12px;bottom:8px}
  .mat-zone .defi-mot b{font-size:13px}
  .mat-zone .defi-mot i{font-size:10px;margin-top:3px}
}

/* =========================================================================
   32. TWO DOTS — matrice dense
   ========================================================================= */
.point .halo{position:absolute;inset:14%;border-radius:50%;
  background:rgba(255,255,255,.16);pointer-events:none}
.td-zone.is-dense .point svg{width:56%;height:56%}

/* =========================================================================
   33. TIRAGE AU SORT — inscription et retour de classement
   ========================================================================= */
.tirage-box .oblig{color:#D9534F}
.tirage-erreur{margin:0;font-size:12.5px;font-weight:600;color:#C8403B;
  background:#FDECEC;border-radius:10px;padding:8px 10px}
.tirage-erreur[hidden]{display:none}
.tirage-rang{display:block;font-size:13px;font-weight:700;color:var(--navy)}
.tirage-rang b{color:var(--blue)}
.tirage-lots{margin:2px 0 4px;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.tirage-lots b{color:var(--navy)}
.tirage-attente{display:block;font-size:12.5px;font-weight:600;color:#B06A1E}
.tirage-box label{position:relative}
.tirage-box a{color:var(--blue);font-weight:600}

/* bandeau d'incitation, en tête du menu */
.classement-bandeau{
  margin:16px 0 0;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:12px 14px;box-shadow:var(--sh-2);text-align:left;
}
.classement-bandeau h3{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px}
.classement-bandeau ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.classement-bandeau li{display:flex;align-items:center;gap:9px;font-size:13.5px}
.classement-bandeau .r{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#EEF5FE;
  color:var(--blue);font-size:11px;font-weight:800;display:grid;place-items:center}
.classement-bandeau li:nth-child(1) .r{background:linear-gradient(160deg,#F5C451,#E0A32B);color:#fff}
.classement-bandeau li:nth-child(2) .r{background:linear-gradient(160deg,#CFD8E3,#AAB6C6);color:#fff}
.classement-bandeau li:nth-child(3) .r{background:linear-gradient(160deg,#E2A87C,#C98A58);color:#fff}
.classement-bandeau .j{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:var(--ink)}
.classement-bandeau .p{flex:0 0 auto;font-weight:800;color:var(--navy);font-size:13px}
.classement-bandeau .moi{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-2)}
.classement-bandeau .moi b{color:var(--blue)}
.classement-bandeau .lien{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;
  color:var(--blue);text-decoration:none}

/* ---------- Pages de texte (règlement, confidentialité) ------------------ */
.texte-legal{padding-bottom:40px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.texte-legal h2{margin:22px 0 6px;font-size:15px;font-weight:700;color:var(--navy)}
.texte-legal p{margin:0 0 9px}
.texte-legal b{color:var(--ink)}
.texte-legal ul{margin:0 0 9px;padding-left:18px}
.texte-legal li{margin-bottom:4px}
.texte-legal .legal-maj{margin:18px 0;font-size:12px;font-style:italic;color:var(--ink-3);
  background:#F5F8FC;border-left:3px solid var(--line);padding:9px 11px;border-radius:0 8px 8px 0}
.texte-legal .btn{margin-top:14px}
/* règlement complet (22/09/2026) : sommaire, articles, champs à compléter */
.texte-legal h3{margin:16px 0 4px;font-size:14px;font-weight:700;color:var(--ink)}
.texte-legal .legal-intro{margin:0 0 12px;font-size:13px;color:var(--ink-3)}
.texte-legal a{color:var(--blue)}
.legal-sommaire{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.legal-sommaire a{font-size:12.5px;font-weight:700;text-decoration:none;color:var(--ink-2);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.legal-sommaire a:hover{color:var(--blue);border-color:#D9E4F2}
.texte-legal .a-completer{display:inline-block;background:#FFF3E2;color:#B06A1E;border-radius:6px;padding:0 6px;font-style:italic}
.texte-legal h2{scroll-margin-top:16px}

/* =========================================================================
   34. PAGE DES GAINS
   ========================================================================= */
.lots{display:flex;flex-direction:column;gap:13px;padding:4px 0 2px}
.lot{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:18px 16px 16px;box-shadow:var(--sh-2);text-align:center;overflow:hidden}
.lot::after{content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--blue))}
.lot--tirage::after{background:linear-gradient(90deg,#E0A32B,#F5C451)}
.lot-rang{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);background:#EAF3FE;border-radius:999px;padding:4px 11px}
.lot--tirage .lot-rang{color:#A8781C;background:#FBF1DC}
.lot-visuel{display:block;width:104px;margin:12px auto 6px}
.lot-visuel svg{display:block;width:100%;height:auto}
.lot h2{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.lot p{margin:6px auto 10px;max-width:270px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.lot p b{color:var(--navy)}
.lot-nb{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.etapes-gain{list-style:none;margin:4px 0 0;padding:0;counter-reset:e;
  display:flex;flex-direction:column;gap:9px}
.etapes-gain li{counter-increment:e;display:flex;align-items:flex-start;gap:11px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 14px;
  box-shadow:var(--sh-1);font-size:13.5px;color:var(--ink-2)}
.etapes-gain li::before{content:counter(e);flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.etapes-gain b{color:var(--ink)}
/* une seule phrase par étape : le texte coule, seul le premier mot est en gras */
.etapes-gain li > span{flex:1 1 0;min-width:0;line-height:1.45}
.etapes-gain li::before{margin-top:1px}
@media (min-width:760px){ .lots{flex-direction:row} .lots .lot{flex:1} }

/* ---------- Classement par chambre -------------------------------------- */
.tirage-box .aide{font-weight:500;color:var(--ink-3);text-transform:none;letter-spacing:0}
.tirage-chambre{margin:6px 0 0;padding:9px 11px;background:#EAF3FE;border-radius:11px;
  font-size:12.5px;line-height:1.35;color:var(--navy)}
.tirage-chambre b{font-weight:800}
.tirage-chambre span{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-2)}
.classement-bandeau .onglets{display:flex;gap:6px;margin-bottom:9px}
.classement-bandeau .onglets button{flex:1;font:inherit;font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);background:#F4F7FB;
  border:1px solid var(--line);border-radius:9px;padding:6px 4px;cursor:pointer}
.classement-bandeau .onglets button.is-on{background:var(--blue);color:#fff;border-color:var(--blue)}
.classement-bandeau li .ch{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:600;color:var(--ink)}
.classement-bandeau li .nb{flex:0 0 auto;font-size:10.5px;color:var(--ink-3);margin-right:6px}

/* =========================================================================
   35. FAITES SIMPLE — le bruit qu'on enlève
   Fond bleu nuit : le parasite est gris et mat, l'étape Navista est claire
   et lumineuse. Le contraste raconte à lui seul « compliqué → simple ».
   ========================================================================= */
.propre-zone{
  position:relative;flex:1;min-height:250px;margin:8px -15px 0;overflow:hidden;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
  background:radial-gradient(120% 80% at 50% 0%,#0B4C8C,#02294C 70%);
  transition:background .6s ease;
}
.propre-zone.is-calme{background:radial-gradient(120% 80% at 50% 40%,#1273F1,#0B4C8C 75%)}
.carte{
  position:absolute;left:0;top:0;border-radius:13px;display:grid;place-items:center;
  padding:8px 11px;text-align:center;font-size:11.5px;font-weight:700;line-height:1.2;
  letter-spacing:-.01em;will-change:transform;
}
/* le bruit : gris, mat, désordonné */
.carte.bruit{
  background:rgba(255,255,255,.10);color:#B9C6D6;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  animation:carteIn .18s ease both;
}
.carte.bruit:active{transform:scale(.96)}
/* les 4 étapes : nettes, lumineuses, jamais brouillées */
.carte.etape{
  background:linear-gradient(160deg,#FFFFFF,#EAF6FF);color:var(--navy);
  border:1px solid rgba(129,253,245,.7);font-size:12.5px;font-weight:800;
  box-shadow:0 0 0 3px rgba(129,253,245,.22),0 8px 22px rgba(0,0,0,.28);
  transition:transform .45s cubic-bezier(.2,.9,.3,1),width .45s ease;
}
.carte.is-part{animation:cartePart .22s ease both}
@keyframes carteIn{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
@keyframes cartePart{to{opacity:0;scale:.5;rotate:8deg}}
.carte.is-faute{animation:carteFaute .32s ease both}
@keyframes carteFaute{0%,100%{translate:0}25%{translate:-6px}75%{translate:6px}}
/* la flèche entre deux étapes, quand tout est aligné */
.fleche{position:absolute;left:50%;translate:-50% 0;color:rgba(129,253,245,.85);
  font-size:15px;font-weight:800;opacity:0;transition:opacity .4s ease}
.fleche.is-on{opacity:1}
.mot-final{
  position:absolute;left:12px;right:12px;bottom:18px;z-index:6;text-align:center;
  color:#fff;pointer-events:none;animation:motFinal 1.8s ease both;
}
.mot-final b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em}
.mot-final span{display:block;font-size:12.5px;color:rgba(255,255,255,.75);margin-top:4px}
@keyframes motFinal{0%{opacity:0;translate:0 10px}14%{opacity:1;translate:0}
  80%{opacity:1;translate:0}100%{opacity:0;translate:0 -8px}}
.vague-hud{position:absolute;left:8px;top:8px;z-index:5;display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:5px 11px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.85);pointer-events:none}
.propre-zone .zone-hud{background:rgba(255,255,255,.92)}

/* =========================================================================
   36. SIMPLIFIEZ ! — une action, une cascade
   ========================================================================= */
.cascade-zone{
  position:relative;flex:1;min-height:250px;margin:8px -15px 0;overflow:hidden;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
  background:radial-gradient(120% 80% at 50% 0%,#0B4C8C,#02294C 70%);
  transition:background .6s ease;
}
.cascade-zone.is-calme{background:radial-gradient(120% 80% at 50% 40%,#1273F1,#0B4C8C 75%)}
.cascade-zone canvas{position:absolute;inset:0;z-index:1;pointer-events:none;display:block;
  width:100%;height:100%}
/* les blocs de complexité, en grappe autour de leur action */
.bloc-c{
  position:absolute;left:0;top:0;z-index:2;border-radius:10px;display:grid;place-items:center;
  padding:5px 9px;text-align:center;font-size:9.5px;font-weight:700;line-height:1.15;
  min-width:62px;max-width:112px;overflow:hidden;overflow-wrap:anywhere;
  background:rgba(255,255,255,.10);color:#B9C6D6;border:1px solid rgba(255,255,255,.12);
  will-change:transform;animation:carteIn .2s ease both;
}
.bloc-c.is-part{animation:blocPart .3s cubic-bezier(.4,0,.6,1) both}
@keyframes blocPart{to{opacity:0;scale:.3;rotate:-12deg}}
/* les 4 actions Navista : toujours nettes, toujours au même niveau de lisibilité */
.action-n{
  position:absolute;left:0;top:0;z-index:3;border-radius:15px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;padding:9px 12px;text-align:center;
  background:linear-gradient(160deg,#FFFFFF,#E6F4FF);color:var(--navy);
  border:1px solid rgba(129,253,245,.7);
  box-shadow:0 0 0 3px rgba(129,253,245,.24),0 10px 26px rgba(0,0,0,.3);
  font-size:12.5px;font-weight:800;letter-spacing:-.01em;line-height:1.1;
  transition:transform .4s cubic-bezier(.2,.9,.3,1);
}
.action-n .nb{font-size:9.5px;font-weight:800;letter-spacing:.04em;color:var(--blue);
  background:#EAF3FE;border-radius:999px;padding:1px 7px}
.action-n:active{transform:scale(.97)}
.action-n.is-vide{opacity:.55;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.action-n.is-joue{animation:actionJoue .45s ease both}
@keyframes actionJoue{0%{scale:1}35%{scale:1.1}100%{scale:1}}
.cascade-jauge{position:absolute;left:0;top:0;height:3px;z-index:6;background:var(--cyan);
  border-radius:0 2px 2px 0;transition:width .1s linear}
.cascade-jauge.is-urgent{background:#FF8A85}

/* =========================================================================
   37. MENU DU STAND — un axe par jeu, le reste en accordéon
   ========================================================================= */
.choix a.is-axe{align-items:center}
.choix .axe{
  flex:0 0 auto;min-width:74px;padding:7px 10px;border-radius:12px;text-align:center;
  background:linear-gradient(160deg,#3A8DF9,#0F6FEE);color:#fff;
  font-size:12.5px;font-weight:800;letter-spacing:-.01em;line-height:1.1;
  box-shadow:0 4px 12px rgba(18,115,241,.25);
}
.choix .axe--bonus{background:linear-gradient(160deg,#8FA0B8,#697C96);
  box-shadow:0 4px 12px rgba(11,37,69,.18)}
.choix a.is-axe .t{font-size:16px;font-weight:700}

/* accordéon des jeux non retenus */
.autres{margin:22px 0 0;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-1);overflow:hidden}
.autres > summary{
  list-style:none;cursor:pointer;padding:13px 16px;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:9px;
}
.autres > summary::-webkit-details-marker{display:none}
.autres > summary::after{content:"";margin-left:auto;width:8px;height:8px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.autres[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.autres[open] > summary{color:var(--blue);border-bottom:1px solid var(--line)}
.autres .choix{padding:10px 12px 14px;gap:7px}
.autres .choix a{box-shadow:none;border-color:#EDF1F6}

/* accès discrets au back-office */
.liens-bo{margin:16px 0 34px;text-align:center;font-size:11.5px;color:var(--ink-3)}
.liens-bo a{color:var(--ink-3);text-decoration:none;padding:4px 6px}
.liens-bo a:hover{color:var(--blue);text-decoration:underline}
.liens-bo span{opacity:.5}


/* =========================================================================
   33. COMPTE À REBOURS DE CLÔTURE + PIED DE PAGE PUBLIC
   Le compte à rebours n'apparaît que les jours où une heure de fin est
   définie dans l'admin : sans elle, le bloc reste [hidden].
   ========================================================================= */
.rebours{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  margin:18px auto 0;max-width:420px;padding:14px 16px;text-align:center;
  background:linear-gradient(180deg,#0B2545,#123A6B);border-radius:18px;
  box-shadow:0 10px 26px rgba(11,37,69,.22);color:#fff;
}
.rebours[hidden]{display:none}
.rebours-avant{font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#81FDF5;opacity:.9}
.rebours-v{
  font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.05;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  text-shadow:0 2px 14px rgba(129,253,245,.35);
}
/* les centièmes : plus petits, ils défilent sans faire sauter la mise en page */
.rebours-v i{font-style:normal;font-size:.55em;color:#81FDF5;letter-spacing:0}
.rebours-plus{font-size:12.5px;font-weight:600;opacity:.92;margin-top:4px}
.rebours-apres{font-size:12.5px;font-weight:600;line-height:1.35;opacity:.92;margin-top:3px}
/* HH:MM:SS:MMM : chiffres à chasse fixe, largeur réservée pour les millièmes */
.rebours-hms{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.rebours-v i{display:inline-block;min-width:3.9ch;text-align:left;font-variant-numeric:tabular-nums}
.rebours-fini{font-size:17px;font-weight:800;color:#81FDF5}
.rebours-fini + span{display:block;font-size:12.5px;font-weight:600;opacity:.9;margin-top:4px}
@media (max-width:380px){ .rebours-v{font-size:32px} }

/* pied de page des pages publiques : lots, règlement, signature */
.liens-bo .pied-sep{display:block;height:0;width:100%;opacity:1}
.liens-bo .pied-signature{display:block;margin-top:8px;font-size:11.5px;color:var(--ink-3);opacity:1}
.liens-bo .pied-signature a{color:var(--ink-2);font-weight:600}
.liens-bo .is-on{color:var(--ink-3);font-weight:600;opacity:1}


/* =========================================================================
   40. CHARTE GRAPHIQUE — export Figma du 21/09/2026 (_brief/charte-figma-2026-09-21.pdf)
   Cette section vient EN DERNIER et prend le pas sur les précédentes : elle
   habille la coquille commune (en-tête, bandeau de score, blasons, écrans
   d'intro et de résultat, barre d'onglets, accueil) SANS toucher aux zones de
   jeu elles-mêmes, dont les règles restent dans leurs sections d'origine.
   ========================================================================= */

/* ---------- 40.1 Jetons de la charte ------------------------------------ */
:root{
  --bg:#F4F6FB;                       /* fond bleuté très clair            */
  --accent:#4FB3E8;                   /* bleu clair : titres, record, onglet actif */
  --accent-d:#3B8FE8;
  --grad:linear-gradient(90deg,#5FD9E1 0%,#4FB3E8 55%,#3B8FE8 100%);
  --radius-card:22px;
  --jaune:#F4C542; --jaune-bg:#FFF8DE; --jaune-t:#B8860B;
  --vert:#4CC26B;  --vert-bg:#EEF9F0;  --vert-t:#2E9C5B;
  --gris-blason:#B8C2D0;
}
body{background:var(--bg)}
h1,h2,h3{font-weight:800}
/* le décor « stand » (feuillage, bois) n'existe plus dans la charte */
.deco-leaf,.deco-wood{display:none!important}

/* ---------- 40.2 Coquille des pages de jeu ------------------------------ */
.app{background:var(--bg)}
.app-top{
  display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
  padding:calc(14px + env(safe-area-inset-top)) 16px 12px;
}
.app-top .back,.app-top .spacer,.app-top .restart{width:44px;height:44px}
.app-top .back,.app-top .restart{border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.app-top .back svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2.2}
.app-top .restart{justify-self:end}
.app-top .logo{width:118px;margin:0 auto}
/* le titre de page vit désormais dans l'écran d'intro : sur les pages
   rhabillées il reste dans le DOM (lecteurs d'écran) mais ne prend plus de
   place — la place est pour le terrain */
.app-title.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.app-main{padding:0 15px 8px}

/* bandeau de score : blanc, pleine largeur, entre l'en-tête et le terrain */
.score-band{
  flex:0 0 auto;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:10px 16px 12px;text-align:center;box-shadow:0 8px 20px rgba(11,37,69,.05);position:relative;z-index:2;
}
.score-band .sb-lbl{display:block;font-size:14px;font-weight:600;color:var(--ink-3);line-height:1.2}
.score-band .sb-val{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink);margin-top:2px}
.score-band .sb-val small{font-size:17px;font-weight:700;margin-left:4px}
.score-band .sb-rec{display:block;font-size:14px;font-weight:700;color:var(--accent);margin-top:3px}
/* compteurs propres à un jeu, sous le score (Snake : salles / licence / prix) */
.score-band .sb-cases{position:relative;display:flex;margin:12px 0 0;border:1px solid var(--line);border-radius:14px;background:#fff}
.score-band .sb-cases > span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 4px;min-width:0}
.score-band .sb-cases > span + span{border-left:1px solid var(--line)}
.score-band .sb-cases b{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.score-band .sb-cases i{font-size:13px;font-style:normal;font-weight:500;color:var(--ink-2);text-align:center}
.score-band .sb-cases .is-bump{animation:bump .3s ease}
/* ligne réservée aux messages du jeu (Snake : « +0 € », « une licence… ») */
.score-band .sb-message{
  display:flex;align-items:center;justify-content:center;min-height:32px;margin:10px 0 0;padding:6px 12px;
  border-radius:12px;background:#F4F6FB;font-size:13.5px;font-weight:700;line-height:1.25;color:var(--accent-d);
}
.score-band .sb-message.is-on{animation:pitchIn .35s ease both}
/* « +0 € » : le script Snake l'ajoute dans le bloc des compteurs (classe .prix-plus) */
.score-band .prix-plus,.score-band .sb-plus{position:absolute;right:10px;top:-11px;z-index:5;font-size:13px;font-weight:800;color:var(--vert-t);animation:plusZero 1.1s ease both;pointer-events:none}
@media (max-height:700px){
  .score-band{padding:7px 16px 9px}
  .score-band .sb-val{font-size:25px}
  .score-band .sb-cases b{font-size:20px}
  .score-band .sb-cases > span{padding:7px 4px}
}

/* vies : des blasons dans une pastille blanche, DANS le flux, jamais sur le terrain */
.vies-pill{
  flex:0 0 auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  margin:12px 0 10px;padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-1);
}
.vies-pill .vies{gap:9px}
.vies-pill .vies i{width:22px;height:22px}
.vies svg{fill:var(--accent)}
.vies i.off svg{fill:var(--gris-blason)}
@media (max-height:700px){ .vies-pill{margin:8px 0 6px;padding:7px 10px} .vies-pill .vies i{width:18px;height:18px} }
/* anciennes cartes de statistiques : le JS les met encore à jour, l'écran ne les montre plus */
.legacy-hud{display:none!important}

/* ---------- 40.3 Boutons ------------------------------------------------ */
.btn{
  background:var(--grad);border-radius:16px;font-weight:800;font-size:18px;padding:16px 18px;
  box-shadow:0 8px 20px rgba(59,143,232,.28);letter-spacing:0;
}
.btn--play{font-size:18px;padding:16px 18px}
.btn--ghost,.btn.btn--ghost{
  width:100%;background:#fff;color:var(--ink);font-weight:800;font-size:17px;
  border:1px solid var(--line);border-radius:16px;padding:15px 18px;box-shadow:var(--sh-1);
}
.btn--ghost:hover{background:#FBFCFE}
.actions .btn{margin:0}

/* ---------- 40.4 Barre d'onglets (footer commun) ------------------------ */
.tabbar{
  z-index:30;background:#fff;backdrop-filter:none;border-top:1px solid var(--line);
  padding:10px 6px calc(10px + env(safe-area-inset-bottom));
}
.tab{font-size:12.5px;font-weight:500;color:#8A97AA;gap:6px}
.tab svg{width:26px;height:26px;stroke-width:1.6}
.tab.is-on{color:var(--accent);font-weight:600}
.tab.is-on .tab-ico{background:none;padding:0;box-shadow:none;color:var(--accent)}
.tab.is-on .tab-ico svg{stroke:var(--accent)}
.home-bar{display:none}
/* les pages défilantes (accueil, lots, règlement) portent la même barre, collée en bas */
body.menu .tabbar{position:sticky;bottom:0;margin-top:auto}
/* le corps doit CONTENIR tout son contenu (hauteur auto, plus 100 %) : c'est
   la condition pour qu'un élément « sticky » en bas suive le défilement */
body.menu{height:auto;min-height:100vh;min-height:100dvh;overflow:visible}

/* ---------- 40.5 Écrans d'intro et de résultat -------------------------- */
/* le voile devient un écran plein : fond de page, défilable, la barre
   d'onglets (z-index 30) reste visible par-dessus */
.overlay{
  display:block;overflow-y:auto;overscroll-behavior:contain;text-align:center;
  padding:0 16px calc(96px + env(safe-area-inset-bottom));background:var(--bg);backdrop-filter:none;
}
.overlay .box,.overlay .box--depart,.overlay .box--fin{max-width:520px;width:100%;margin:0 auto;padding:0}
.ov-head{padding:calc(22px + env(safe-area-inset-top)) 0 18px}
.ov-head img{width:132px;height:auto;display:block;margin:0 auto 8px}
.ov-head .ov-sub{display:inline-block;font-size:14.5px;color:var(--ink-2)}
.ov-head .ov-sub.is-pill{border:1px solid var(--line);border-radius:999px;padding:5px 14px;background:#fff}
@media (max-height:700px){ .ov-head{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px} .ov-head img{width:112px} }

/* les règles génériques « .overlay span / strong » de la section 2 pèsent
   plus lourd qu'une classe seule : on rétablit ici les composants de la charte */
.overlay .intro-titre{font-size:28px;letter-spacing:-.02em}
.overlay .intro-ligne{margin:14px 0 0}
.overlay .intro-astuce{margin:10px 0 0}
.overlay .depart-record{margin:12px 0 0}
.overlay .badge-etat{display:inline-flex;margin:0;font-size:14px;color:inherit}
.overlay .carte-lot .lot-corps span,.overlay .fin-record{margin-bottom:0}
.overlay .sb-message{margin:0}

/* intro : carte blanche, rond d'icône, titre bicolore, consigne, visuel encadré, Démarrer */
.carte-intro{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:26px 20px 22px;box-shadow:var(--sh-2)}
.intro-rond{width:100px;height:100px;border-radius:50%;background:#F3F6FB;display:grid;place-items:center;margin:0 auto 18px;padding:22px}
.intro-rond .ico{width:100%;height:100%}
.intro-titre{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.intro-titre em{font-style:normal;color:var(--accent)}
.intro-ligne{display:block;font-size:16px;line-height:1.45;color:var(--ink-2);margin:14px 0 0}
.intro-astuce{display:block;font-size:14px;line-height:1.4;color:var(--ink-3);margin:10px 0 0}
.intro-visuel{margin:20px 0 0;border:3px solid var(--accent);border-radius:16px;overflow:hidden;background:#F5F8FD}
.intro-visuel img{display:block;width:100%;height:auto}
.carte-intro .btn{margin-top:20px}
.carte-intro .depart-record{margin-top:12px}
@media (max-height:700px){
  .carte-intro{padding:18px 16px 16px}
  .intro-rond{width:76px;height:76px;padding:17px;margin-bottom:12px}
  .overlay .intro-titre{font-size:24px}
  .intro-ligne{font-size:14.5px;margin-top:10px}
  .intro-visuel{margin-top:14px}
}

/* boîte historique (écran « niveau final atteint » de la Suite) : même carte */
.overlay > .box:not(.box--depart):not(.box--fin){
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);
  padding:26px 20px 22px;box-shadow:var(--sh-2);margin:calc(22px + env(safe-area-inset-top)) auto 0;
}
.overlay > .box:not(.box--depart):not(.box--fin) .btn--ghost{margin-top:10px}

/* résultat : pile de cartes (« .carte » seul appartient à un ancien jeu : on
   utilise « .fin-carte », qui n'entre en collision avec rien) */
.fin-carte{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:18px;box-shadow:var(--sh-2);text-align:left;margin-top:14px}
.carte-score{text-align:center;padding:22px 18px 24px;margin-top:0}
.badge-etat{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;border-radius:999px;padding:6px 16px;border:1.5px solid;line-height:1.2}
.badge-etat.is-jaune{color:var(--jaune-t);background:var(--jaune-bg);border-color:var(--jaune)}
.badge-etat.is-vert{color:var(--vert-t);background:var(--vert-bg);border-color:var(--vert)}
.badge-etat.is-gris{color:var(--ink-3);background:#F4F6FB;border-color:var(--line)}
.badge-etat.is-orange{color:#B06A1E;background:#FFF3E2;border-color:#F0C48A}
.overlay .badge-etat.is-jaune{color:var(--jaune-t)} .overlay .badge-etat.is-vert{color:var(--vert-t)}
.overlay .badge-etat.is-gris{color:var(--ink-3)}     .overlay .badge-etat.is-orange{color:#B06A1E}
/* le score en gros dans la carte : le <strong> générique du voile ne doit pas le rapetisser */
.overlay .carte-score .fin-score{font-size:54px;letter-spacing:-.03em}
.overlay .carte-preuve strong{font-size:15px}
.overlay .carte-rang b{font-size:19px}
/* le compteur de vies dans le bandeau d'intro n'existe pas : rien à masquer */
.carte-score .fin-score{display:block;font-size:54px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1;margin-top:14px}
.carte-score .fin-score small{font-size:30px;font-weight:800;margin-left:5px}
.carte-score .fin-record{display:block;font-size:16px;font-weight:700;color:var(--accent);margin-top:8px}
.carte-rang .rang-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.carte-rang .rang-tete b{font-size:19px;font-weight:800;color:var(--ink);white-space:nowrap}
.carte-rang .rang-tete span{font-size:14.5px;color:var(--ink-2);text-align:right}
.jauge{height:12px;border-radius:999px;background:#E3E8F0;margin-top:12px;overflow:hidden}
.jauge i{display:block;height:100%;border-radius:999px;background:var(--grad);transition:width .6s ease}
.carte-lot .lot-corps{display:flex;gap:14px;align-items:center;margin-top:12px}
.carte-lot img{width:118px;height:auto;flex:0 0 auto}
.carte-lot h3{font-size:19px;font-weight:800;line-height:1.15;color:var(--ink)}
.carte-lot p{font-size:14px;line-height:1.4;color:var(--ink-2);margin:6px 0 0}
.carte-lot .lot-rdv{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--ink-2)}
.carte-lot .lot-rdv b{color:var(--ink)}
.carte-lot .lot-bas{margin-top:12px}
.fin-actions{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.fin-actions .btn{margin:0}
.fin-detail{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:12px}
.fin-detail span{display:flex;flex-direction:column;font-size:11px;color:var(--ink-3)}
.fin-detail b{font-size:15px;color:var(--ink)}
.carte-preuve{text-align:center}
.carte-preuve strong{display:block;font-size:15px;color:var(--navy);line-height:1.3}
.carte-preuve span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px}
.carte-preuve .preuve-agree{display:inline-block;margin-top:9px;font-style:normal;font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-d);background:#EAF4FF;border:1.5px solid var(--accent);
  border-radius:999px;padding:5px 12px}
.fin-attente{display:block;font-size:13px;font-weight:600;color:#B06A1E;margin-top:10px}

/* modale d'inscription : mêmes rayons, même bouton */
.tirage-box{border-radius:var(--radius-card)}
.tirage-box strong{font-size:20px;font-weight:800}
.tirage-box input:not([type=checkbox]):not([type=radio]){border-radius:12px}

/* ---------- 40.6 Accueil (index.html) ----------------------------------- */
body.menu .menu-head{background:none;border:0;overflow:visible}
.head-inner{padding:calc(20px + env(safe-area-inset-top)) 0 0}
.head-inner img{width:140px;margin:0 auto 6px}
.head-kicker{font-size:14.5px;color:var(--ink-2)}
.menu-head h1{font-size:28px;font-weight:800;margin-top:24px;letter-spacing:-.02em}
.lot-pill{display:inline-block;margin-top:12px;border:1.5px solid var(--accent);color:var(--accent);border-radius:999px;padding:6px 16px;font-size:14px;font-weight:700;background:#fff}
.hero-lot img{display:block;width:210px;max-width:60%;height:auto;margin:12px auto 0}
.hero-lot h2{font-size:19px;font-weight:800;margin-top:8px;color:var(--ink)}
.hero-lot p{font-size:14px;color:var(--ink-2);margin-top:4px}
.hero-lot p b{color:var(--accent);font-weight:700}
.hero-lot .hero-rdv{font-size:15px;color:var(--ink);font-weight:600;margin-top:10px}
body.menu .head-inner .head-sub{margin-top:10px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.section-titre{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:800;margin:28px 0 12px;text-align:left;color:var(--ink)}
.defis{display:flex;flex-direction:column;gap:14px}
.defi{
  display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:14px;box-shadow:var(--sh-2);
  transition:transform .16s ease,box-shadow .16s ease;
}
.defi:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.defi img{width:38%;max-width:190px;flex:0 0 auto;border-radius:14px;display:block;height:auto}
.defi .defi-txt{min-width:0;flex:1}
.defi h3{font-size:17px;font-weight:800;line-height:1.15;color:var(--ink)}
.defi h3 em{font-style:normal;color:var(--accent)}
.defi p{font-size:14px;line-height:1.4;color:var(--ink-2);margin-top:4px}
.defi .jouer{display:inline-block;margin-top:10px;background:var(--accent);color:#fff;font-weight:700;font-size:14px;border-radius:999px;padding:7px 20px}
@media (max-width:380px){ .defi h3{font-size:17px} .defi p{font-size:13px} }

/* classement : onglets en pilules, carte « en direct » */
.onglets-pill{display:flex;gap:8px;margin-bottom:12px}
.onglets-pill button{font:inherit;font-size:15px;font-weight:700;border-radius:999px;padding:9px 20px;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer}
.onglets-pill button.is-on{background:var(--accent);color:#fff;border-color:var(--accent)}
.classement-bandeau{margin:0;border-radius:var(--radius-card);padding:18px;box-shadow:var(--sh-2)}
.classement-bandeau h3{display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:800;
  letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:12px}
.classement-bandeau h3 .live{font-size:12px;font-weight:800;color:#E0413A;letter-spacing:.02em}
.classement-bandeau h3 .live::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#E0413A;margin-right:5px;vertical-align:1px}
.classement-bandeau ol{gap:8px}
.classement-bandeau li{background:#F4F6FB;border-radius:14px;padding:11px 12px;font-size:16px;gap:12px}
.classement-bandeau .r{width:30px;height:30px;font-size:13px}
.classement-bandeau .j,.classement-bandeau .ch{font-weight:700}
.classement-bandeau .p{color:var(--accent);font-size:16px}
.classement-bandeau .moi{font-size:14px;margin-top:12px;padding-top:12px}
.classement-bandeau .moi b{color:var(--accent)}
.classement-bandeau .lien{display:none}
/* liens légaux, discrets, au-dessus de la barre d'onglets */
.liens-bo{margin:20px 0 14px}
/* médailles du podium (or, argent, bronze) */
.classement-bandeau li:nth-child(1) .r{background:#F4C542;color:#fff}
.classement-bandeau li:nth-child(2) .r{background:#B8C2D0;color:#fff}
.classement-bandeau li:nth-child(3) .r{background:#B87333;color:#fff}
.classement-bandeau .nb{font-size:12px;color:var(--ink-3);flex:0 0 auto;white-space:nowrap}
/* un nom de chambre long (« Interdépartementale Gers ») ne doit jamais élargir
   la page : sans « contain », Chrome mobile élargit la fenêtre de mise en page
   à la largeur du texte insécable et toute la page se retrouve dézoomée
   (barre d'onglets décalée). Le libellé se tronque, les chiffres gardent leur place. */
.classement-bandeau{contain:inline-size}
.classement-bandeau li > .j,.classement-bandeau li > .ch{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.classement-bandeau li > .p{flex:0 0 auto;white-space:nowrap}

/* ---------- 40.7 Pages « Récompenses » et « Règlement » ----------------- */
body.menu .visio-head{padding:calc(20px + env(safe-area-inset-top)) 0 8px}
body.menu .visio-head img{width:140px;margin-bottom:6px}
.visio-head h1{margin-top:22px;font-weight:800}
.visio-head h1 em{color:var(--accent)}
.lot{border-radius:var(--radius-card);box-shadow:var(--sh-2)}
.lot-visuel{width:150px}
.lot-visuel img{display:block;width:100%;height:auto}
.lot h2{color:var(--ink);font-weight:800}
body.menu main.wrap > .btn{display:block;text-align:center;margin-top:8px}
.texte-legal h2{font-weight:800}
body.menu .tabbar{margin-top:auto}

/* ---------- 40.8 Classement en direct (jeux/classement.html) ------------ */
/* Page d'affichage du stand : même carte que l'accueil, dix lignes, et une
   mise à l'échelle sur grand écran. Pas de barre d'onglets : on ne navigue pas
   depuis un écran de stand. */
body.live .head-inner{padding-bottom:0}
/* « body.live » : la règle générique .menu-head h1 (28px) est plus spécifique qu'une classe seule */
body.live .live-titre{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-top:26px}
.live-titre em{font-style:normal;color:var(--accent)}
.live-rebours{margin:18px auto 0}
.live-carte li{padding:13px 12px;font-size:17px}
.live-carte .r{width:32px;height:32px;font-size:14px}
/* au-delà du podium, la pastille est bleu marine (maquette) */
.classement-bandeau li:nth-child(n+4) .r{background:#1F4F8F;color:#fff}
/* seul le premier a ses points en couleur ; les autres en gris (maquette) */
.live-carte li .p{color:#8A97AA}
.live-carte li:first-child .p{color:var(--accent)}
.live-pied{text-align:center;font-size:15px;color:var(--ink-2);margin:16px 0 40px}
/* la journée affichée et sa fenêtre horaire, sous la carte */
.live-date{text-align:center;font-size:13px;color:var(--ink-3);margin-top:10px}
/* compte à rebours au millième : la structure est posée une fois, seule la
   valeur change à chaque image ; les chiffres sont à chasse fixe et le bloc
   des millièmes a une largeur réservée, sinon tout tremble */
body.live .rebours{max-width:500px;padding:16px 18px 14px}
body.live .rebours-v{font-size:42px;display:inline-flex;align-items:baseline;justify-content:center}
body.live .rebours-hms{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
body.live .rebours-v i{font-size:.5em;min-width:4ch;text-align:left;font-variant-numeric:tabular-nums}
.live-pied b{color:var(--accent);font-weight:700}
body.live.is-hors-ligne .live-carte h3 .live{color:#8A97AA}
body.live.is-hors-ligne .live-carte h3 .live::before{background:#8A97AA}
/* écran de stand : tout est plus grand, lisible à trois mètres */
@media (min-width:900px){
  body.live .wrap{max-width:860px}
  body.live .head-inner img{width:190px}
  body.live .head-kicker{font-size:18px}
  body.live .live-titre{font-size:46px;margin-top:30px}
  body.live .section-titre{font-size:28px;margin-top:34px}
  body.live .onglets-pill button{font-size:19px;padding:12px 28px}
  .live-carte{padding:26px}
  .live-carte h3{font-size:24px}
  .live-carte h3 .live{font-size:16px}
  .live-carte li{padding:16px 18px;font-size:24px;border-radius:18px}
  .live-carte .r{width:42px;height:42px;font-size:18px}
  .live-carte .nb{font-size:16px}
  .live-rebours{max-width:560px;padding:18px 22px}
  .live-rebours .rebours-v{font-size:56px}
  .live-rebours .rebours-avant,.live-rebours .rebours-apres,.live-rebours .rebours-plus{font-size:15px}
  .live-pied{font-size:20px}
  .live-date{font-size:16px}
}