/* QCM Télécoms — charte de l'interface MyDstny (relevée au pixel sur une
   capture de la « Vue 360° Partenaire ») : fond clair, cartes blanches,
   turquoise en couleur principale, cartes de chiffres en pastel, magenta en
   simple accent. Police Inter. Le logo de la marque n'est pas utilisé. */

:root{
  /* Palette MyDstny */
  --turquoise:#14a9b5; --turquoise-texte:#0b7f8c; --turquoise-fonce:#0b768e; --turquoise-clair:#33c5ce; --turquoise-pale:#ebf8fb;
  --magenta:#b41e83; --magenta-pale:#fde8f8;
  --orange:#fd982c; --orange-texte:#b8640c; --orange-pale:#fff4e7;
  --rouge:#ec514c; --rouge-pale:#feeceb;
  --vert:#00b882; --vert-texte:#047857; --vert-pale:#e7f8f0;
  --gris:#6c737f; --gris-pale:#f0f5f5;

  --fond:#f9fbfc; --carte:#ffffff; --texte:#1d1e25; --doux:#6b7280; --trait:#e8ecef;
  --ombre:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.05);
  --ombre-bandeau:0 10px 28px rgba(11,118,142,.22);
  --rayon:16px;

  /* Rôles utilisés par le code */
  --accent:var(--turquoise); --accent-texte:var(--turquoise-texte); --accent-pale:var(--turquoise-pale);
  --ok:var(--vert); --ok-texte:var(--vert-texte); --ok-pale:var(--vert-pale);
  --ko:var(--rouge); --ko-pale:var(--rouge-pale);
  --manque:var(--orange); --manque-texte:var(--orange-texte); --manque-pale:var(--orange-pale);
  --sur-accent:#ffffff;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --turquoise:#2cc3cf; --turquoise-texte:#5fd6df; --turquoise-pale:#11292c;
    --magenta:#e05cb2; --magenta-pale:#2f1828;
    --orange:#ffab52; --orange-texte:#ffbe75; --orange-pale:#2e2214;
    --rouge:#ff6f6a; --rouge-pale:#331a1a;
    --vert:#2fd39e; --vert-texte:#5fe0b6; --vert-pale:#10291f;
    --gris-pale:#1b2526;
    --fond:#0f1414; --carte:#151c1d; --texte:#dbe7e8; --doux:#8ea3a5; --trait:#22393b;
    --ombre:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --turquoise:#2cc3cf; --turquoise-texte:#5fd6df; --turquoise-pale:#11292c;
  --magenta:#e05cb2; --magenta-pale:#2f1828;
  --orange:#ffab52; --orange-texte:#ffbe75; --orange-pale:#2e2214;
  --rouge:#ff6f6a; --rouge-pale:#331a1a;
  --vert:#2fd39e; --vert-texte:#5fe0b6; --vert-pale:#10291f;
  --gris-pale:#1b2526;
  --fond:#0f1414; --carte:#151c1d; --texte:#dbe7e8; --doux:#8ea3a5; --trait:#22393b;
  --ombre:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--texte); background:var(--fond);
  font:15.5px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  min-height:100vh;
}
main{max-width:800px; margin:0 auto}
h1,h2,h3{line-height:1.25; margin:0; letter-spacing:-.01em; color:var(--texte)}
button{font:inherit; color:inherit; cursor:pointer}
a{color:var(--accent-texte)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--turquoise-clair); outline-offset:2px}

/* ── Bandeau d'en-tête (comme la « Vue 360° ») ────────────────────────── */
.entete{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 20px; padding:22px 24px; border-radius:18px; color:#fff;
  background:linear-gradient(100deg,#33c5ce 0%,#20a7b4 45%,#0b768e 100%);
  box-shadow:var(--ombre-bandeau);
}
.entete::after{content:""; position:absolute; z-index:-1; right:-80px; top:-120px; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none}
.logo{width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; flex:none}
.logo svg .onde{animation:onde 2.4s ease-in-out infinite}
.logo svg .onde.o2{animation-delay:.3s}
@keyframes onde{0%,100%{opacity:1}50%{opacity:.4}}
.entete .titre{flex:1; min-width:180px}
.entete h1{font-size:1.45rem; font-weight:800; color:#fff}
.entete p{margin:3px 0 0; color:rgba(255,255,255,.9); font-size:.93rem}
.entete nav{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.entete nav button,.entete nav a{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff;
  padding:7px 14px; border-radius:10px; font-size:.87rem; font-weight:600; text-decoration:none; transition:background .2s;
}
@media (hover:hover){ .entete nav button:hover,.entete nav a:hover{background:rgba(255,255,255,.26)} }
.entete nav [aria-current="page"]{background:#fff; color:var(--turquoise-fonce); border-color:#fff}

/* ── Cartes, titres, boutons ──────────────────────────────────────────── */
.carte{background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon); padding:22px; box-shadow:var(--ombre)}
.carte + .carte{margin-top:16px}
.titre-section{font-size:1rem; font-weight:700; color:var(--texte); margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--trait); display:flex; align-items:center; gap:8px}
.titre-section::before{content:""; width:4px; height:16px; border-radius:2px; background:var(--turquoise)}
.ligne{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.ligne .titre-section{border-bottom:none; padding-bottom:0}
.lien{background:none; border:none; padding:4px 2px; color:var(--accent-texte); font-size:.9rem; font-weight:600; text-decoration:none}
@media (hover:hover){ .lien:hover{text-decoration:underline; text-underline-offset:3px} }
.note{color:var(--doux); font-size:.87rem; margin:12px 0 0}
.sec{color:var(--doux); font-size:.85rem}

.btn{
  border:none; border-radius:10px; padding:11px 20px; font-weight:700; color:#fff;
  background:var(--turquoise); box-shadow:0 4px 12px rgba(20,169,181,.25);
  transition:background .18s, transform .18s, box-shadow .18s;
}
@media (hover:hover){ .btn:not(:disabled):hover{background:var(--turquoise-fonce); transform:translateY(-1px)} }
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
:root[data-theme="dark"] .btn{color:#06292d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#06292d}}
.btn.second{background:var(--carte); color:var(--texte); border:1px solid var(--trait); box-shadow:none}
@media (hover:hover){ .btn.second:not(:disabled):hover{border-color:var(--turquoise); color:var(--accent-texte); background:var(--carte)} }
.btn.danger{background:var(--rouge); color:#fff; box-shadow:none}
@media (hover:hover){ .btn.danger:not(:disabled):hover{background:#d63f3a} }
.btn.petit{padding:7px 13px; font-size:.86rem; border-radius:9px}
.btn.grand{padding:14px 26px; font-size:1.02rem}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}

/* ── Accueil ──────────────────────────────────────────────────────────── */
.heros{display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; padding:22px 24px}
.heros h2{font-size:1.35rem; font-weight:800}
.heros h2 span{color:var(--accent-texte)}
.heros p{margin:6px 0 0; color:var(--doux)}
.heros .ill{width:140px; height:140px}
.chiffres-mini{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.chiffres-mini span{background:var(--gris-pale); color:var(--texte); font-weight:600; font-size:.8rem; padding:4px 10px; border-radius:99px}
.chiffres-mini span.o{background:var(--orange-pale); color:var(--orange-texte)}
.chiffres-mini span.t{background:var(--turquoise-pale); color:var(--accent-texte)}

.themes{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.puce{
  position:relative; display:flex; align-items:center; gap:10px; text-align:left;
  border:1px solid var(--trait); background:var(--carte); border-radius:12px; padding:9px 12px;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.puce .ill{width:36px; height:36px; flex:none}
.puce .nom{flex:1; font-weight:600; font-size:.92rem; line-height:1.25}
.puce .n{font-size:.76rem; color:var(--doux); font-variant-numeric:tabular-nums; font-weight:700; background:var(--gris-pale); padding:1px 7px; border-radius:99px}
@media (hover:hover){ .puce:hover{border-color:var(--turquoise); box-shadow:var(--ombre)} }
.puce[aria-pressed="true"]{border-color:var(--turquoise); background:var(--turquoise-pale)}
.puce[aria-pressed="true"] .n{background:var(--turquoise); color:#fff}
.puce[aria-pressed="true"]::after{
  content:"✓"; position:absolute; top:-7px; right:-7px; width:19px; height:19px; border-radius:50%;
  background:var(--turquoise); color:#fff; font-size:.7rem; font-weight:800; display:grid; place-items:center;
  animation:pop .25s ease-out;
}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}

.segments{display:inline-flex; background:var(--gris-pale); border-radius:10px; padding:3px; gap:3px}
.segments button{border:none; background:transparent; padding:6px 14px; border-radius:8px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--doux)}
.segments button[aria-pressed="true"]{background:var(--carte); color:var(--accent-texte); box-shadow:var(--ombre)}

.bandeau{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-radius:14px; padding:14px 18px; background:var(--orange-pale); border:1px solid #fbd9ae; margin-bottom:16px}
.bandeau p{margin:0}
.bandeau .actions{margin:0}

/* ── Question ─────────────────────────────────────────────────────────── */
.barre{display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:.9rem; color:var(--doux); font-weight:600}
.progression{flex:1; height:8px; background:var(--trait); border-radius:4px; overflow:hidden}
.progression span{display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--turquoise-clair),var(--turquoise)); transition:width .5s cubic-bezier(.2,.8,.2,1)}
.compteur{font-variant-numeric:tabular-nums; white-space:nowrap}
.serie{display:inline-flex; align-items:center; gap:4px; background:var(--orange-pale); color:var(--orange-texte); padding:3px 10px; border-radius:99px; font-weight:800; font-size:.8rem}
.serie svg{width:14px; height:14px}
.serie.chaude{animation:pop .35s ease-out}

.carte-q{padding:0; overflow:hidden}
.carte-q .tete{display:flex; align-items:center; gap:16px; padding:18px 22px; background:var(--turquoise-pale); border-bottom:1px solid var(--trait)}
.carte-q .tete .ill{width:80px; height:80px; flex:none}
.carte-q .tete .ill svg{animation:balance 4s ease-in-out infinite; transform-origin:50% 80%}
@keyframes balance{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.carte-q .corps{padding:20px 22px 22px}
.etiquettes{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.etiquette{font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:99px; background:var(--carte); color:var(--accent-texte); border:1px solid var(--trait)}
.etiquette.multi{background:var(--orange-pale); color:var(--orange-texte); border-color:#fbd9ae}
.question{font-size:1.15rem; font-weight:700; margin:0}
.choix{display:grid; gap:10px}
.choix button{
  display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%;
  border:1px solid var(--trait); background:var(--carte); border-radius:12px; padding:12px 14px;
  transition:border-color .18s, background .18s, box-shadow .18s;
  animation:arrive .35s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0) * 50ms);
}
.choix .lettre{
  flex:none; width:26px; height:26px; border-radius:8px; background:var(--gris-pale);
  display:grid; place-items:center; font-size:.8rem; font-weight:700; color:var(--doux); transition:background .18s,color .18s;
}
.choix.multi .lettre{border-radius:50%}
@media (hover:hover){ .choix:not(.fini) button:hover{border-color:var(--turquoise); box-shadow:var(--ombre)} }
.choix button[aria-pressed="true"]{border-color:var(--turquoise); background:var(--turquoise-pale)}
.choix button[aria-pressed="true"] .lettre{background:var(--turquoise); color:#fff}
.choix.fini button{cursor:default}
.choix.fini button:not(.juste):not(.faux):not(.oubli){opacity:.55}
.choix button.juste{border-color:var(--vert); background:var(--vert-pale); animation:pop-doux .4s ease-out}
.choix button.juste .lettre{background:var(--vert); color:#fff}
.choix button.faux{border-color:var(--rouge); background:var(--rouge-pale); animation:secoue .45s ease-in-out}
.choix button.faux .lettre{background:var(--rouge); color:#fff}
.choix button.oubli{border-color:var(--orange); border-style:dashed; background:var(--orange-pale)}
.choix button.oubli .lettre{background:var(--orange); color:#fff}
.choix .marque{margin-left:auto; flex:none; font-size:.78rem; font-weight:700; padding-top:4px}
.choix button.juste .marque{color:var(--vert-texte)}
.choix button.faux .marque{color:var(--rouge)}
.choix button.oubli .marque{color:var(--orange-texte)}
@keyframes arrive{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@keyframes pop-doux{0%{transform:scale(1)}40%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes secoue{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.entree{animation:entree .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes entree{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

.retour{margin-top:18px; border-radius:12px; padding:14px 16px; display:flex; gap:12px; align-items:flex-start; animation:entree .3s ease-out both; border:1px solid transparent}
.retour.ok{background:var(--vert-pale); border-color:#bfe9d6}
.retour.ko{background:var(--rouge-pale); border-color:#f8c9c7}
.retour .pic{flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:900; font-size:1rem}
.retour.ok .pic{background:var(--vert)}
.retour.ko .pic{background:var(--rouge)}
.retour strong{display:block; margin-bottom:3px; font-size:1rem}
.retour.ok strong{color:var(--vert-texte)}
.retour.ko strong{color:var(--rouge)}
.retour p{margin:0}
.clavier{color:var(--doux); font-size:.8rem; margin-top:12px}
kbd{font:inherit; font-size:.75rem; border:1px solid var(--trait); border-bottom-width:2px; border-radius:5px; padding:0 5px; background:var(--carte)}

/* Confettis (créés en JS, retirés à la fin de leur animation) */
.confetti{position:fixed; width:8px; height:12px; border-radius:2px; pointer-events:none; z-index:50; animation:tombe var(--d,900ms) cubic-bezier(.15,.7,.4,1) forwards}
@keyframes tombe{
  from{transform:translate(0,0) rotate(0); opacity:1}
  to{transform:translate(var(--x),var(--y)) rotate(var(--r)); opacity:0}
}

/* ── Bilan ────────────────────────────────────────────────────────────── */
.score{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.score .ill{width:110px; height:110px; flex:none}
.anneau{--p:0; width:120px; height:120px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:conic-gradient(var(--teinte,var(--turquoise)) calc(var(--p)*1%),var(--trait) 0)}
.anneau div{width:94px; height:94px; border-radius:50%; background:var(--carte); display:grid; place-items:center; text-align:center}
.anneau b{font-size:1.65rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1}
.anneau small{display:block; color:var(--doux); font-size:.76rem; margin-top:3px}
.score h2{font-size:1.3rem; font-weight:800}
.score p{margin:4px 0 0; color:var(--doux)}
.parthemes{display:grid; gap:12px}
.partheme{display:grid; grid-template-columns:28px minmax(0,1fr) 130px 52px; gap:10px; align-items:center; font-size:.92rem}
.partheme .ill{width:28px; height:28px}
.partheme .jauge{height:10px; background:var(--trait); border-radius:5px; overflow:hidden}
.partheme .jauge span{display:block; height:100%; border-radius:5px; animation:remplit 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes remplit{from{width:0 !important}}
.partheme .val{text-align:right; font-variant-numeric:tabular-nums; color:var(--doux); font-weight:700}
.partheme:not(:has(.ill)){grid-template-columns:minmax(0,1fr) 130px 52px}

/* ── Correction détaillée ─────────────────────────────────────────────── */
.revue{border-top:1px solid var(--trait); padding:16px 0}
.revue:first-child{border-top:none; padding-top:0}
.revue h3{font-size:.98rem; margin-bottom:8px; display:flex; gap:10px; align-items:baseline}
.revue ul{list-style:none; margin:0; padding:0; display:grid; gap:5px}
.revue li{padding:7px 11px; border-radius:9px; font-size:.91rem; border:1px solid transparent}
.revue li.bon{background:var(--vert-pale); color:var(--vert-texte); font-weight:600}
.revue li.choisi-faux{background:var(--rouge-pale); color:var(--rouge)}
.revue li.oublie{border:1px dashed var(--orange); color:var(--orange-texte)}
.revue li .tag{font-size:.73rem; font-weight:700; margin-left:6px; opacity:.85}
.revue p{margin:8px 0 0; color:var(--doux); font-size:.9rem}
.statut-ico{flex:none; font-weight:900}
.statut-ico.ok{color:var(--vert)} .statut-ico.ko{color:var(--rouge)}

/* ── Révision : organigramme, liens, corrigé ──────────────────────────── */
.recherche{width:100%; border:1px solid var(--trait); background:var(--carte); color:var(--texte); border-radius:10px; padding:11px 14px; font:inherit; font-size:16px}
.recherche:focus{outline:none; border-color:var(--turquoise); box-shadow:0 0 0 3px var(--turquoise-pale)}
details.bloc{border-top:1px solid var(--trait)}
details.bloc:first-of-type{border-top:none}
details.bloc summary{cursor:pointer; padding:13px 0; font-weight:700; display:flex; align-items:center; gap:10px; list-style:none}
details.bloc summary .ill{width:28px; height:28px}
details.bloc summary .n{margin-left:auto; color:var(--doux); font-size:.8rem; background:var(--gris-pale); padding:1px 8px; border-radius:99px}
details.bloc summary::-webkit-details-marker{display:none}
details.bloc summary::after{content:"+"; color:var(--accent-texte); font-weight:800; font-size:1.2rem; width:16px; text-align:center}
details.bloc[open] summary::after{content:"–"}
.fiche{padding:0 0 16px}
.fiche + .fiche{border-top:1px dashed var(--trait); padding-top:14px}
.fiche h3{font-size:.96rem; margin-bottom:6px}
.fiche ul{margin:0; padding-left:20px}
.fiche li{color:var(--doux)}
.fiche li.bon{color:var(--vert-texte); font-weight:700}
.fiche p{margin:6px 0 0; font-size:.9rem; color:var(--doux)}
.vide{color:var(--doux); text-align:center; padding:20px 0}

.liens{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.lien-carte{display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:14px; border:1px solid var(--trait); background:var(--turquoise-pale); text-decoration:none; color:var(--texte); transition:border-color .2s, box-shadow .2s}
@media (hover:hover){ a.lien-carte:hover{border-color:var(--turquoise); box-shadow:var(--ombre)} }
.lien-carte .ill{width:42px; height:42px; flex:none}
.lien-carte strong{display:block; color:var(--accent-texte)}
.lien-carte span{font-size:.85rem; color:var(--doux)}
.lien-carte.a-completer{border-style:dashed; background:var(--carte); opacity:.8}

/* Organigramme : mêmes codes que celui du pôle (encadrement magenta,
   équipes en orange, membres en turquoise) */
.orga{display:grid; justify-items:center; overflow-x:auto; padding-bottom:4px}
.orga .noeud{background:var(--magenta); color:#fff; border-radius:12px; padding:10px 16px; text-align:center; box-shadow:0 4px 12px rgba(180,30,131,.18); min-width:190px}
.orga .noeud small{display:block; font-size:.72rem; opacity:.9; text-transform:uppercase; letter-spacing:.05em; font-weight:700}
.orga .noeud b{font-size:.96rem}
.orga .trait-v{width:2px; height:20px; background:var(--trait)}
.orga .branches{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; width:100%; position:relative; padding-top:20px}
.orga .branches::before{content:""; position:absolute; top:0; left:16.66%; right:16.66%; height:2px; background:var(--trait)}
.orga .branche{display:flex; flex-direction:column; align-items:center; position:relative}
.orga .branche::before{content:""; position:absolute; top:-20px; left:50%; width:2px; height:20px; background:var(--trait)}
.orga .equipes{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:20px; position:relative; width:100%}
.orga .equipes::before{content:""; position:absolute; top:-20px; left:50%; width:2px; height:20px; background:var(--trait)}
.orga .equipe{flex:1 1 140px; max-width:220px; border-radius:12px; overflow:hidden; border:1px solid var(--trait); background:var(--carte); box-shadow:var(--ombre)}
.orga .equipe h4{margin:0; padding:7px 10px; background:var(--orange); color:#3b2200; font-size:.84rem; text-align:center}
.orga .equipe .ref{background:var(--magenta-pale); color:var(--magenta); padding:8px 10px; text-align:center; font-size:.84rem; border-bottom:1px solid var(--trait)}
.orga .equipe .ref b{display:block}
.orga .equipe ul{list-style:none; margin:0; padding:8px 10px; display:grid; gap:4px}
.orga .equipe li{font-size:.85rem; padding:5px 8px; border-radius:7px; background:var(--turquoise-pale); color:var(--texte); text-align:center}
.orga .branche.seule .equipes{margin-top:0}
.orga .branche.seule .equipes::before{display:none}
.orga-legende{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:14px; font-size:.8rem; color:var(--doux)}
.orga-legende i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
main:has(.orga){max-width:1120px}

/* ── Formulaires et administration ────────────────────────────────────── */
label.champ{display:grid; gap:6px; font-size:.88rem; font-weight:600}
label.champ small{font-weight:400; color:var(--doux)}
.saisie{width:100%; border:1px solid var(--trait); background:var(--carte); color:var(--texte); border-radius:10px; padding:10px 12px; font:inherit; font-size:16px; transition:border-color .2s, box-shadow .2s}
.saisie:focus{outline:none; border-color:var(--turquoise); box-shadow:0 0 0 3px var(--turquoise-pale)}
.formulaire{display:grid; gap:14px}
.grille2{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.case{display:flex; align-items:center; gap:9px; font-size:.94rem; cursor:pointer}
.case input{width:18px; height:18px; accent-color:var(--turquoise)}
.erreur-form{color:var(--rouge); font-size:.89rem; margin:0; min-height:1.2em}

.connexion{max-width:420px; margin:6vh auto 0}
.connexion .ill-connexion{display:grid; place-items:center; margin:-6px 0 6px}
.connexion .ill-connexion .ill{width:170px; height:140px}

.tableau{width:100%; border-collapse:collapse; font-size:.91rem}
.tableau th{text-align:left; font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--doux); font-weight:700; padding:9px 10px; border-bottom:1px solid var(--trait); white-space:nowrap}
.tableau td{padding:11px 10px; border-bottom:1px solid var(--trait); vertical-align:middle}
.tableau tr:last-child td{border-bottom:none}
.tableau tr.cliquable{cursor:pointer; transition:background .15s}
@media (hover:hover){ .tableau tr.cliquable:hover td{background:var(--turquoise-pale)} }
.tableau .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tableau .ill{width:26px; height:26px; flex:none}
.defile{overflow-x:auto; margin:0 -4px; padding:0 4px}

/* Puces d'état, comme les étiquettes des fiches partenaires */
.pastille{display:inline-block; font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:99px; white-space:nowrap}
.pastille.ok{background:var(--vert-pale); color:var(--vert-texte)}
.pastille.ko{background:var(--rouge-pale); color:var(--rouge)}
.pastille.attente{background:var(--orange-pale); color:var(--orange-texte)}
.pastille.neutre{background:var(--turquoise-pale); color:var(--accent-texte)}

.mini-jauge{display:inline-block; width:70px; height:7px; border-radius:4px; background:var(--trait); vertical-align:middle; margin-right:8px; overflow:hidden}
.mini-jauge span{display:block; height:100%; border-radius:4px}

.voile{position:fixed; inset:0; background:rgba(16,24,40,.45); backdrop-filter:blur(2px); display:grid; place-items:center; padding:16px; z-index:10; animation:fondu .2s ease-out}
@keyframes fondu{from{opacity:0}}
.fenetre{background:var(--carte); border:1px solid var(--trait); border-radius:16px; padding:24px; width:min(500px,100%); box-shadow:0 24px 60px rgba(16,24,40,.25); max-height:calc(100dvh - 32px); overflow:auto; animation:entree .3s cubic-bezier(.2,.8,.2,1) both}
.fenetre h2{font-size:1.15rem; margin-bottom:10px}
.fenetre p{margin:0 0 10px}
.secret{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--turquoise-pale); border:1px dashed var(--turquoise); border-radius:10px; padding:12px 14px; white-space:pre-wrap; word-break:break-all; font-size:.94rem; margin:10px 0}

.outils{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.outils .saisie{flex:1; min-width:180px; width:auto}
select.saisie{width:auto}

/* Cartes de chiffres en pastel, dans l'ordre de la « Vue 360° » */
.chiffres{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}
.chiffre{border-radius:14px; padding:16px; background:var(--turquoise-pale)}
.chiffre:nth-child(2){background:var(--rouge-pale)}
.chiffre:nth-child(3){background:var(--orange-pale)}
.chiffre:nth-child(4){background:var(--magenta-pale)}
.chiffre b{display:block; font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums; color:var(--texte)}
.chiffre span{color:var(--doux); font-size:.83rem; font-weight:600}
.charge{color:var(--doux); text-align:center; padding:40px 0}
.charge::before{content:""; display:block; width:32px; height:32px; margin:0 auto 12px; border-radius:50%; border:4px solid var(--turquoise-pale); border-top-color:var(--turquoise); animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

.lien-edit{display:grid; grid-template-columns:1fr 1.4fr 1.6fr auto; gap:8px; align-items:center}
.lien-edit + .lien-edit{margin-top:8px}

.pied{margin:30px 0 0; text-align:center; color:var(--doux); font-size:.82rem}
.pied button{background:none; border:none; color:var(--doux); text-decoration:underline; text-underline-offset:3px; font-size:.82rem; padding:0}

/* Illustrations : dessins en SVG, couleurs tirées de la palette */
.ill{display:inline-block; line-height:0}
.ill svg{width:100%; height:100%; overflow:visible}
.ill .fv{fill:var(--magenta-pale)} .ill .fo{fill:var(--orange-pale)} .ill .ft{fill:var(--turquoise-pale)}
.ill .v{fill:var(--magenta)} .ill .vf{fill:#7e0a5c} .ill .o{fill:var(--orange)} .ill .t{fill:var(--turquoise)}
.ill .tf{fill:var(--turquoise-fonce)} .ill .j{fill:#ffc94a} .ill .b{fill:var(--carte)} .ill .p{fill:#37474f}
.ill .l,.ill .lv,.ill .lo,.ill .lt,.ill .lb{fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
.ill .l{stroke:var(--texte)} .ill .lv{stroke:var(--magenta)} .ill .lo{stroke:var(--orange)} .ill .lt{stroke:var(--turquoise)} .ill .lb{stroke:var(--carte)}
.ill .bl{fill:var(--carte); stroke:var(--texte); stroke-width:4; stroke-linejoin:round}
.ill .pulse{animation:onde 1.8s ease-in-out infinite}
.ill .pulse.d2{animation-delay:.3s} .ill .pulse.d3{animation-delay:.6s}
.ill .saute{animation:saute 2.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
@keyframes saute{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.ill .aiguille{animation:aiguille 3s ease-in-out infinite; transform-box:view-box; transform-origin:60px 78px}
@keyframes aiguille{0%,100%{transform:rotate(-50deg)}60%{transform:rotate(38deg)}}
.ill .fourmis{stroke-dasharray:6 8; animation:fourmis 1.2s linear infinite}
@keyframes fourmis{to{stroke-dashoffset:-28}}
.ill .tourne{animation:tourne 6s linear infinite; transform-box:fill-box; transform-origin:center}

@media (max-width:600px){
  .entete{padding:18px; border-radius:16px}
  .entete nav{width:100%}
  .heros{grid-template-columns:1fr}
  .heros .ill{display:none}
  .carte{padding:16px}
  .carte-q .tete{padding:14px 16px}
  .carte-q .tete .ill{width:60px; height:60px}
  .carte-q .corps{padding:16px}
  .question{font-size:1.04rem}
  .partheme{grid-template-columns:24px minmax(0,1fr) 70px 44px}
  .actions .btn{flex:1}
  .segments{display:flex; width:100%}
  .segments button{flex:1; padding:7px 4px}
  .tableau .masque-mobile{display:none}
  .orga .branches{grid-template-columns:1fr; gap:26px}
  .orga .branches::before{display:none}
  .lien-edit{grid-template-columns:1fr}
}

/* Moins de mouvement si le système le demande */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .confetti{display:none}
}