/* GoVideoLive : feuille de style. Jetons d'abord ; aucune couleur en dehors de ce bloc. */
@font-face{font-family:"Sofia Sans Extra Condensed";src:url("../fonts/sofia-sans-extra-condensed-latin-wght-normal.woff2") format("woff2");font-weight:1 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Sans";src:url("../fonts/sofia-sans-latin-wght-normal.woff2") format("woff2");font-weight:1 1000;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("../fonts/caveat-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  /* fonds : la nuit de la salle, l'ardoise du registre froid */
  --nuit:#0d0b14;
  --nuit-2:#14111f;
  --nuit-3:#1c1829;
  --ardoise:#1b1b20;
  --ardoise-2:#25252c;
  --blanc:#ffffff;
  --noir-masque:#000000;
  /* encres */
  --craie:#f4f2fa;          /* sur nuit 17,6:1 ; sur violet 4,8:1 */
  --brume:#b3b0c2;          /* sur nuit 9,2:1 */
  --froid:#9b99a6;          /* sur nuit 7,0:1 ; sur ardoise 6,1:1 */
  --froid-fort:#d2d0db;     /* sur ardoise 11:1 */
  /* accent unique : le violet du produit, sans dégradé */
  --violet:#7a46f0;         /* aplat, texte blanc dessus 5,3:1 ; sur nuit 3,7:1 (interface) */
  --violet-clair:#b49bff;   /* texte sur sombre : nuit 8,4:1 */
  --violet-vif:#9d7bff;     /* filets, fil, focus : nuit 6,2:1 */
  --violet-encre:#5b2fd1;   /* texte sur blanc 7,6:1 */
  --violet-ombre:#3a2290;   /* survol du bouton à contour sur fond violet */
  /* signaux réservés à un seul objet */
  --direct:#35d07f;         /* « En direct » : nuit 9,8:1 */
  --rec:#ff5a5f;            /* texte « Enregistrement en cours » sur sombre : 6,4:1 */
  --rec-fond:#c81e2b;       /* aplat « Terminer », texte blanc 5,7:1 */
  /* voiles et filets dérivés */
  --trait:rgb(255 255 255 / .09);
  --trait-fort:rgb(255 255 255 / .22);
  --quadrille:rgb(255 255 255 / .045);
  --voile:rgb(13 11 20 / .88);
  --halo:rgb(157 123 255 / .7);
  --halo-doux:rgb(122 70 240 / .22);
  /* héros : pastilles d'initiales d'une visio caméra coupée (texte nuit dessus, 7:1 au moins) */
  --av-1:#7ea6f2;
  --av-2:#e6b86a;
  --av-3:#6fc4ae;
  --av-4:#e58fb0;
  --av-5:#e8956b;
  --av-6:#a6cf7e;

  /* typographie */
  --f-titre:"Sofia Sans Extra Condensed","Arial Narrow",Arial,sans-serif;
  --f-texte:"Sofia Sans",system-ui,"Segoe UI",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --f-main:"Caveat","Segoe Script","Bradley Hand",cursive;
  --fs-h1:clamp(3.5rem,1.7rem + 6.6vw,8.25rem);
  --fs-h2:clamp(2.5rem,1.5rem + 3.6vw,5rem);
  --fs-h3:clamp(1.75rem,1.25rem + 1.5vw,2.625rem);
  --fs-h4:clamp(1.375rem,1.2rem + .6vw,1.75rem);
  --fs-corps:clamp(1.125rem,1.03rem + .3vw,1.3125rem);
  --fs-chapo:clamp(1.1875rem,1.06rem + .6vw,1.5rem);
  --fs-ui:1rem;
  --fs-meta:.9375rem;
  --fs-label:.8125rem;
  --fs-main:clamp(1.75rem,1.4rem + 1.3vw,2.75rem);
  --mesure:68ch;

  /* gabarit */
  --gut:clamp(20px,4.2vw,64px);
  --max:1280px;
  --haut-entete:72px;
  --rayon:22px;
  --rayon-s:14px;
  --ease:cubic-bezier(.22,1,.36,1);
  --seuil-nav:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--haut-entete) + 20px);background:var(--nuit)}
body{margin:0;background:var(--nuit);color:var(--craie);font-family:var(--f-texte);font-size:var(--fs-corps);line-height:1.62;font-weight:400;min-width:320px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em;text-wrap:pretty;max-width:var(--mesure)}
h1,h2,h3,h4{margin:0;font-family:var(--f-titre);font-weight:800;line-height:1.03;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
button{font:inherit;color:inherit}
summary{cursor:pointer}
:focus-visible{outline:3px solid var(--violet-vif);outline-offset:4px;border-radius:4px}
::selection{background:var(--violet);color:var(--blanc)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--blanc);color:var(--nuit);padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none;transition:transform .2s var(--ease)}
.skip:focus{transform:translateY(96px)}

.wrap{width:100%;max-width:calc(var(--max) + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut)}
.wrap-etroit{max-width:calc(900px + var(--gut) * 2)}
.bloc{padding-block:clamp(64px,9vw,128px)}
.bloc-court{padding-block:clamp(44px,6vw,84px)}

/* voix des deux registres */
.sur{font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-clair);margin:0 0 18px;max-width:none}
.sur-froid{color:var(--froid)}
.chaud{font-family:var(--f-main);font-weight:700;font-size:1.22em;letter-spacing:0;color:var(--violet-clair);display:inline-block;transform:rotate(-2.5deg);line-height:.9;padding-inline:.04em}
.fond-violet .chaud,.fond-violet .sur{color:var(--blanc)}
.chapo{font-size:var(--fs-chapo);line-height:1.5;color:var(--brume);max-width:60ch}
.mono{font-family:var(--f-mono)}
.froid{font-family:var(--f-mono);color:var(--froid)}
.petit{font-size:var(--fs-meta);color:var(--brume)}
.note-exemple{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;color:var(--froid);margin:14px 0 0;max-width:none}

/* fonds */
.fond-2{background:var(--nuit-2)}
.fond-3{background:var(--nuit-3)}
.fond-violet{background:var(--violet);color:var(--blanc)}
.fond-ardoise{background:var(--ardoise);background-image:linear-gradient(var(--quadrille) 1px,transparent 1px),linear-gradient(90deg,var(--quadrille) 1px,transparent 1px);background-size:40px 40px;color:var(--froid-fort)}

/* boutons : aplat violet sur ombre dure */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:56px;padding:12px 28px;border-radius:14px;background:var(--violet);color:var(--blanc);font-weight:700;font-size:var(--fs-ui);text-decoration:none;border:0;cursor:pointer;transition:background .2s var(--ease),box-shadow .2s var(--ease);white-space:nowrap}
.btn:hover{background:var(--violet-encre)}
.btn-compact{min-height:46px;padding:8px 20px;border-radius:12px}
.btn-ligne{background:transparent;color:var(--craie);box-shadow:inset 0 0 0 2px var(--trait-fort)}
.btn-ligne:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--violet-vif)}
.btn-blanc{background:var(--blanc);color:var(--violet-encre)}
.btn-blanc:hover{background:var(--craie)}
.btn .ico{width:20px;height:20px}
.actions{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center}
.lien-fleche{display:inline-flex;align-items:center;gap:.6em;min-height:44px;font-weight:700;text-decoration:none;color:var(--craie);font-size:var(--fs-ui)}
.lien-fleche span.txt{background:linear-gradient(currentColor,currentColor) right bottom/100% 2px no-repeat;padding-bottom:2px;transition:background-size .35s var(--ease)}
.lien-fleche:hover span.txt{background-size:0 2px}
.lien-fleche .ico{width:20px;height:20px;transition:transform .3s var(--ease)}
.lien-fleche:hover .ico{transform:translateX(6px)}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico-plein{fill:currentColor;stroke:none}

/* voyants du produit */
.voyant{display:inline-flex;align-items:center;gap:.55em;font-family:var(--f-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px 6px 10px;border-radius:99px;background:var(--nuit);border:1px solid var(--trait-fort);white-space:nowrap;line-height:1.2}
.voyant::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.voyant-direct{color:var(--direct)}
.voyant-rec{color:var(--rec)}
.voyant-rec::before{animation:pouls 1.6s var(--ease) infinite}
.voyant-attente{color:var(--froid-fort)}
.voyant-parole{color:var(--violet-clair)}
@keyframes pouls{0%,100%{opacity:1}50%{opacity:.35}}

/* mouvement : apparition au défilement (état final servi sans JS) */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv[data-d="1"]{transition-delay:.08s}
.js .rv[data-d="2"]{transition-delay:.16s}
.js .rv[data-d="3"]{transition-delay:.24s}

/* En-tête : transparent sur le héros, vitre au défilement ; pages intérieures : posé d'emblée */
.entete{position:fixed;inset:0 0 auto;z-index:40;height:var(--haut-entete);background:var(--voile);border-bottom:1px solid var(--trait);transition:background-color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.js .has-hero .entete:not(.is-solid):not(.menu-open){background:transparent;border-color:transparent}
.entete.is-solid{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 6px 24px -18px var(--noir-masque)}
.entete.menu-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--nuit)}
.entete-in{height:100%;max-width:calc(var(--max) + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut);display:flex;align-items:center;gap:20px}
.marque{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:44px;margin-right:auto}
.marque-logo{width:40px;height:40px;flex:none}
.marque-nom{font-family:var(--f-titre);font-weight:800;font-size:1.75rem;letter-spacing:-.01em;line-height:1}
.logo-fond{fill:var(--violet)}
.logo-point{fill:var(--craie)}
.logo-arc{fill:none;stroke:var(--craie);stroke-width:2.6;stroke-linecap:round}
.nav{display:flex;align-items:center;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;text-decoration:none;font-weight:600;font-size:var(--fs-ui);color:var(--craie);transition:background-color .25s var(--ease)}
.nav a:hover{background:var(--trait)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--violet-vif)}
.nav .nav-cta{display:none}
.entete .btn-compact{flex:none}
.cta-court{display:none}
.burger{display:none;width:48px;height:48px;border:0;background:transparent;cursor:pointer;border-radius:12px;position:relative;flex:none}
.burger-barres,.burger-barres::before,.burger-barres::after{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--craie);transition:transform .3s var(--ease),opacity .2s}
.burger-barres{top:23px}
.burger-barres::before,.burger-barres::after{content:"";left:0;right:0}
.burger-barres::before{top:-7px}
.burger-barres::after{top:7px}
.menu-open .burger-barres{background:transparent}
.menu-open .burger-barres::before{transform:translateY(7px) rotate(45deg)}
.menu-open .burger-barres::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1079px){
  .js .burger{display:inline-block}
  .js .nav{position:fixed;inset:var(--haut-entete) 0 auto;max-height:calc(100dvh - var(--haut-entete));overflow:auto;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gut) 28px;background:var(--nuit);border-bottom:1px solid var(--trait);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
  .js .menu-open .nav{opacity:1;transform:none;visibility:visible}
  .js .nav a{min-height:56px;font-size:1.25rem;border-bottom:1px solid var(--trait);border-radius:0;padding:0 4px}
  .js .nav a[aria-current="page"]{box-shadow:none;color:var(--violet-clair)}
  html:not(.js) .entete{height:auto;min-height:var(--haut-entete);position:absolute}
  html:not(.js) .entete-in{flex-wrap:wrap;padding-block:10px}
  html:not(.js) .nav{order:5;width:100%;flex-wrap:wrap}
}
@media (max-width:559px){
  .entete .btn-compact{display:none}
  .js .nav-cta{display:block;margin-top:20px}
  .js .nav a.nav-cta{display:flex;justify-content:center;border:0;background:var(--violet);color:var(--blanc);border-radius:14px;min-height:56px;font-size:var(--fs-ui)}
  html:not(.js) .entete .btn-compact{display:inline-flex}
  html:not(.js) .nav-cta{display:none}
}
@media (max-width:420px){
  .marque-nom{font-size:1.5rem}
}

/* Pied : nom géant en contour, ligne de crédit, colonnes */
.pied{background:var(--nuit);border-top:1px solid var(--trait);padding-top:clamp(70px,12vh,140px);overflow:hidden}
.pied-mot{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:clamp(3.4rem,17.6vw,18.75rem);line-height:.9;letter-spacing:-.02em;white-space:nowrap;text-align:center;color:transparent;-webkit-text-stroke:2px var(--trait-fort);user-select:none;margin:0}
.pied-credit{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--froid);margin:22px auto 0;max-width:none;padding-inline:var(--gut)}
.pied-point{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--violet-vif);margin-right:.9em;vertical-align:.1em}
.pied-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px;padding-block:clamp(44px,6vw,80px) 40px}
.pied-id p{color:var(--brume);font-size:var(--fs-meta);max-width:38ch}
.pied-id .pied-devise{font-family:var(--f-titre);font-weight:800;font-size:clamp(1.75rem,1.4rem + 1vw,2.375rem);line-height:1.02;color:var(--craie);margin:18px 0 12px}
.pied-col h2{font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--violet-clair);margin-bottom:14px}
.pied-col a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--craie);font-size:var(--fs-ui)}
.pied-col a:hover{color:var(--violet-clair)}
.pied-bas{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;border-top:1px solid var(--trait);padding-block:20px 28px;font-size:var(--fs-meta);color:var(--brume)}
.pied-bas p{margin:0;max-width:none}
.pied-bas a{display:inline-flex;align-items:center;min-height:44px}
.haut{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--trait-fort);transition:box-shadow .25s var(--ease),background-color .25s}
.haut:hover{background:var(--violet);box-shadow:none}
.haut .ico{width:20px;height:20px}
@media (max-width:1180px){.pied-cols{grid-template-columns:1fr 1fr}}
@media (max-width:559px){.pied-cols{grid-template-columns:1fr}.pied-mot{-webkit-text-stroke-width:1.5px}}

/* Héros : une seule plateforme, trois modes.
   Une fenêtre d'application dessinée en code (mosaïque, panneau de l'organisateur, barre de commandes) dont le mode
   change : réunion, salle de classe, webinaire. Les participants sont des pastilles d'initiales, comme dans
   une visio caméra coupée. Tout est servi dans l'état « réunion » ; le script ne fait que changer de vue. */
.pf{position:relative;isolation:isolate;overflow:hidden;background:var(--nuit);padding:calc(var(--haut-entete) + clamp(36px,7vh,84px)) 0 clamp(56px,9vh,104px)}
.pf::before{content:"";position:absolute;z-index:-1;right:-10%;top:4%;width:64%;aspect-ratio:1;background:radial-gradient(closest-side,var(--halo-doux),transparent);pointer-events:none}
.pf-in{max-width:calc(var(--max) + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6.2fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.pf-depart{position:absolute;left:0;bottom:0;width:1px;height:1px}

/* texte */
.pf-h1{margin:0 0 24px;font-size:clamp(2.75rem,.9rem + 4.1vw,5.25rem);line-height:1.02}
.pf-chapo{margin:0 0 30px;max-width:32em;font-size:var(--fs-chapo);line-height:1.5;color:var(--brume)}
.pf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.pf-faits{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:10px}
.pf-faits li{display:flex;align-items:center;gap:10px;font-size:var(--fs-meta);line-height:1.35;color:var(--craie)}
.pf-faits .ico{width:20px;height:20px;color:var(--violet-clair)}

/* sélecteur de mode */
.pf-appli{min-width:0}
.pf-onglets{display:flex;gap:4px;width:max-content;max-width:100%;margin:0 0 14px;padding:5px;border:1px solid var(--trait-fort);border-radius:99px;background:var(--nuit-2)}
html:not(.js) .pf-onglets{display:none}
.pf-onglet{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:99px;background:transparent;color:var(--brume);font:700 var(--fs-ui)/1 var(--f-texte);cursor:pointer;white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease)}
.pf-onglet .ico{width:18px;height:18px}
.pf-onglet:hover{color:var(--craie)}
.pf-onglet[aria-selected="true"]{background:var(--violet);color:var(--blanc)}

/* fenêtre */
.pf-fenetre{overflow:hidden;border:1px solid var(--trait-fort);border-radius:20px;background:var(--nuit-2);box-shadow:0 50px 90px -50px var(--noir-masque)}
.pf-haut{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--trait);font-family:var(--f-mono);font-size:var(--fs-label);color:var(--froid)}
.pf-lien{display:inline-flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-lien .ico{width:16px;height:16px}
.pf-exemple{flex:none;letter-spacing:.08em;text-transform:uppercase}
.pf-corps{display:grid}
.pf-vue{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15.5rem);grid-template-rows:auto minmax(0,1fr);gap:10px 12px;min-height:31rem;padding:12px;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.pf-vue.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .4s var(--ease) .05s,transform .4s var(--ease) .05s,visibility 0s}
.pf-tete{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pf-tete b{font-weight:700;font-size:var(--fs-ui);line-height:1.2}

/* mosaïque */
.pf-scene{display:grid;gap:10px;min-width:0;min-height:0}
.pf-scene-reunion{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.pf-scene-classe{grid-template-rows:minmax(0,1fr) auto}
.pf-tuile{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;border-radius:14px;border:1.5px solid var(--trait);background:var(--nuit-3);transition:border-color .3s var(--ease)}
.pf-av{--t:3.5rem;display:grid;place-items:center;flex:none;width:var(--t);aspect-ratio:1;border-radius:50%;background:var(--c);color:var(--nuit);font-weight:800;font-size:calc(var(--t) * .38);line-height:1;letter-spacing:.02em}
.pf-av-1{--c:var(--av-1)}
.pf-av-2{--c:var(--av-2)}
.pf-av-3{--c:var(--av-3)}
.pf-av-4{--c:var(--av-4)}
.pf-av-5{--c:var(--av-5)}
.pf-av-6{--c:var(--av-6)}
.pf-nom{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 16px);padding:4px 10px 4px 7px;border-radius:99px;background:var(--voile);font-weight:700;font-size:var(--fs-label);line-height:1.2;white-space:nowrap}
.pf-nom .ico{width:15px;height:15px}
.pf-mic{display:inline-flex}
.pf-mic-off{display:none;color:var(--froid)}
.is-coupe .pf-mic-on{display:none}
.is-coupe .pf-mic-off{display:inline-flex}
.pf-tuile[data-etat="parole"]{border-color:var(--violet-vif)}
.pf-tuile[data-etat="parole"] .pf-mic-on{display:inline-flex;color:var(--violet-clair)}
.pf-tuile[data-etat="parole"] .pf-mic-off{display:none}
.pf-leve{display:none;position:absolute;right:6px;top:6px;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--violet);color:var(--blanc)}
.pf-leve .ico{width:16px;height:16px}
.pf-tuile[data-etat="main"] .pf-leve{display:grid}
.pf-niveau{position:absolute;right:10px;top:10px;display:none;align-items:flex-end;gap:3px;height:16px}
.pf-niveau i{width:3px;height:100%;border-radius:2px;background:var(--violet-clair);transform-origin:bottom;transform:scaleY(.45)}
.pf-niveau i:nth-child(2){transform:scaleY(.9)}
.pf-tuile[data-etat="parole"] .pf-niveau{display:flex}
.pf-tuile[data-etat="parole"] .pf-leve{display:none}
@media (prefers-reduced-motion:no-preference){
  .pf-tuile[data-etat="parole"] .pf-niveau i{animation:pf-niveau .9s ease-in-out infinite}
  .pf-tuile[data-etat="parole"] .pf-niveau i:nth-child(2){animation-delay:-.3s}
  .pf-tuile[data-etat="parole"] .pf-niveau i:nth-child(3){animation-delay:-.6s}
}
@keyframes pf-entree{from{opacity:0;transform:translateY(8px)}}
@keyframes pf-niveau{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* invité qui en attente de validation */
.pf-tuile-attente{border-style:dashed;border-color:var(--trait-fort)}
.pf-tuile-attente .pf-av{opacity:.6}
.pf-attente{position:absolute;left:0;right:0;top:10px;text-align:center;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.04em;color:var(--froid-fort)}
.pf-tuile:not(.pf-tuile-attente) .pf-attente{display:none}
.pf-tuile.is-vide{visibility:hidden}

/* salle de classe */
.pf-ecran{position:relative;display:grid;align-content:center;min-height:0;padding:18px 20px 44px;border-radius:14px;border:1.5px solid var(--trait);background:var(--nuit-3)}
.pf-diap{display:grid;gap:9px;width:min(100%,22rem)}
.pf-diap i{display:block;height:9px;border-radius:5px;background:var(--trait-fort)}
.pf-diap i:first-child{width:55%;height:14px;background:var(--froid)}
.pf-diap i:nth-child(3){width:78%}
.pf-diap i:nth-child(4){width:64%}
.pf-presente{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 8px;border-radius:99px;background:var(--voile);font-weight:700;font-size:var(--fs-label);line-height:1.2}
.pf-presente .ico{width:16px;height:16px}
.pf-rang{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;height:5.75rem}
.pf-tuile-petit .pf-av{--t:2.375rem}
.pf-tuile-petit .pf-nom{left:5px;bottom:5px;gap:4px;padding:2px 7px 2px 5px;font-size:.75rem}
.pf-tuile-petit .pf-nom .ico{width:13px;height:13px}
.pf-tuile-petit .pf-leve{right:4px;top:4px;width:24px;height:24px}
.pf-tuile-petit .pf-leve .ico{width:14px;height:14px}
.pf-tuile-petit .pf-niveau{right:7px;top:7px;height:13px}

/* webinaire */
.pf-affiche{display:grid;align-content:center;gap:14px;padding:18px;border-radius:14px;border:1.5px solid var(--trait);background:var(--nuit-3)}
.pf-date{display:inline-flex;align-items:center;gap:8px;justify-self:start;font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-clair)}
.pf-date .ico{width:16px;height:16px}
.pf-affiche-titre{margin:0;max-width:none;font-family:var(--f-titre);font-weight:800;font-size:1.875rem;line-height:1.05}
.pf-compte{display:flex;gap:8px}
.pf-compte span{flex:1;display:grid;place-items:center;padding:8px 4px;border-radius:10px;border:1px solid var(--trait);background:var(--nuit);font-size:var(--fs-label);color:var(--brume)}
.pf-compte b{font-family:var(--f-mono);font-size:1.375rem;font-weight:600;line-height:1.2;color:var(--craie);font-variant-numeric:tabular-nums}
.pf-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf-champs span{min-width:0;padding:8px 10px;border-radius:10px;border:1px solid var(--trait-fort);background:var(--nuit);font-size:var(--fs-label);color:var(--brume);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-champs small{display:block;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--froid)}
.pf-faux-bt{justify-self:start;display:inline-flex;align-items:center;min-height:42px;padding:0 22px;border-radius:12px;background:var(--violet);color:var(--blanc);font-weight:700;font-size:var(--fs-ui)}

/* panneau de l'organisateur */
.pf-panneau{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;padding:12px;border-radius:14px;border:1px solid var(--trait);background:var(--nuit)}
.pf-ph{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;max-width:none;font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--froid-fort)}
.pf-ph b{display:grid;place-items:center;min-width:1.8em;height:1.8em;padding:0 .4em;border-radius:99px;background:var(--violet);color:var(--blanc);font-weight:700}
.pf-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pf-ligne{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center;padding:9px 10px;border-radius:12px;border:1px solid var(--trait);background:var(--nuit-2)}
.pf-ligne[hidden]{display:none}
.pf-ligne .pf-av{--t:2.375rem}
.pf-qui{display:grid;min-width:0;line-height:1.2}
.pf-qui b{font-weight:700;font-size:var(--fs-meta)}
.pf-qui small{font-size:var(--fs-label);color:var(--brume)}
.pf-ligne>.pf-bt,.pf-actes{grid-column:1 / -1}
.pf-actes{display:flex;flex-wrap:wrap;gap:6px}
.pf-ligne[data-etat="ecoute"]{display:none}
.pf-ligne[data-etat="main"] [data-pf-retirer]{display:none}
.pf-ligne[data-etat="parole"] [data-pf-donner]{display:none}
.pf-ligne[data-etat="parole"]{border-color:var(--violet-vif)}
.pf-ligne[data-etat="parole"] small{color:var(--violet-clair)}
.pf-bt{min-height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--trait-fort);background:transparent;color:var(--craie);font:700 var(--fs-label)/1 var(--f-texte);cursor:pointer;white-space:nowrap;transition:box-shadow .2s var(--ease),background .2s var(--ease)}
.pf-bt:hover{box-shadow:inset 0 0 0 2px var(--violet-vif)}
.pf-bt-oui{border-color:var(--violet);background:var(--violet);color:var(--blanc)}
.pf-bt-large{width:100%;margin-top:auto}
.pf-bt[hidden]{display:none}
.pf-vide,.pf-note{margin:0;max-width:none;font-size:var(--fs-label);line-height:1.4;color:var(--brume)}
.pf-vide[hidden]{display:none}
.pf-note{margin-top:auto}
.pf-fil{list-style:none;margin:0;padding:0}
.pf-fil li{position:relative;display:grid;gap:2px;margin-left:6px;padding:0 0 16px 22px;border-left:2px solid var(--trait-fort)}
.pf-fil li::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--violet-vif);background:var(--nuit)}
.pf-fil li:last-child{padding-bottom:0;border-left-color:transparent}
.pf-fil b{font-size:var(--fs-meta);line-height:1.25}
.pf-fil span{font-size:var(--fs-label);line-height:1.35;color:var(--brume)}

/* barre de commandes d'appel */
.pf-cmds{display:flex;justify-content:center;gap:8px;padding:10px 12px 14px;border-top:1px solid var(--trait)}
.pf-cmd{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:44px;height:44px;border-radius:99px;border:1px solid var(--trait-fort);background:var(--nuit);color:var(--craie);font-weight:700;font-size:var(--fs-label);white-space:nowrap}
.pf-cmd .ico{width:20px;height:20px}
.pf-cmd-nom{display:none}
.pf-cmd-fin{width:auto;padding:0 18px;border-color:var(--rec-fond);background:var(--rec-fond);color:var(--blanc)}
.pf-cmd-fin .pf-cmd-nom{display:inline}

@media (prefers-reduced-motion:reduce){
  .pf-vue,.pf-vue.is-on{transform:none;transition:none;animation:none}
  .pf-onglet,.pf-bt,.pf-tuile{transition:none}
}

/* sans JavaScript, le menu s'étale sur plusieurs lignes sous 1080 px : le héros descend d'autant */
@media (max-width:1079px){
  html:not(.js) .pf{padding-top:200px}
}

/* tablette : une colonne, le texte puis la fenêtre */
@media (max-width:999px){
  .pf-in{grid-template-columns:minmax(0,1fr)}
  .pf-appli{max-width:46rem}
  .pf::before{width:110%;right:-30%}
}

/* mobile : le panneau passe sous la mosaïque ; les libellés d'onglet restent lisibles à 390 px */
@media (max-width:639px){
  .pf{padding-top:calc(var(--haut-entete) + 28px)}
  .pf-h1{font-size:clamp(2.5rem,11vw,3.5rem)}
  .pf-actions{flex-direction:column;align-items:stretch;gap:8px}
  .pf-actions .btn{width:100%}
  .pf-actions .lien-fleche{justify-content:center}
  .pf-onglets{width:100%}
  .pf-onglet{flex:1;min-width:0;padding:0 6px;font-size:.875rem}
  .pf-onglet .ico{display:none}
  .pf-exemple{display:none}
  .pf-vue{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:start;min-height:0}
  .pf-vue:not(.is-on){display:none}
  .pf-vue.is-on{animation:pf-entree .4s var(--ease)}
  .pf-scene-reunion{grid-template-rows:repeat(2,7rem)}
  .pf-ecran{padding:14px 14px 40px}
  .pf-rang{height:5.25rem;gap:6px}
  .pf-tuile-petit .pf-av{--t:2rem}
  .pf-affiche{padding:14px}
  .pf-affiche-titre{font-size:1.5rem}
  .pf-note,.pf-faits{display:none}
  .pf-cmds{gap:6px;padding-inline:8px}
  .pf-cmd{width:40px;height:40px}
  .pf-cmd-fin{width:auto;padding:0 14px}
}

/* ===== Échelle de deux registres ===== */
.entete-section{max-width:880px;margin-bottom:clamp(32px,4.5vw,56px)}
.entete-section h2{margin-bottom:18px}
.rungs{display:grid;gap:10px}
.rung{display:grid;grid-template-columns:90px minmax(0,1.1fr) minmax(0,1.6fr) 130px;gap:24px;align-items:center;padding:26px 30px;border-radius:18px;transition:transform .6s var(--ease)}
.rung:hover{transform:translateX(8px)}
.rung-n{font-size:1.75rem;line-height:1}
.rung-nom{line-height:1.1}
.rung-phrase{margin:0;max-width:none;line-height:1.4}
.rung-etiq{justify-self:end;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;border-radius:99px;padding:5px 12px;white-space:nowrap}
.rung-froid{background-color:var(--ardoise);background-image:linear-gradient(var(--quadrille) 1px,transparent 1px),linear-gradient(90deg,var(--quadrille) 1px,transparent 1px);background-size:24px 24px;border:1px solid var(--trait);color:var(--froid)}
.rung-froid .rung-n{font-family:var(--f-mono);color:var(--froid)}
.rung-froid .rung-nom{font-family:var(--f-mono);font-weight:500;font-size:clamp(1.25rem,1rem + .9vw,1.6875rem);color:var(--froid-fort)}
.rung-froid .rung-phrase{color:var(--froid)}
.rung-chaud{background:var(--violet);color:var(--blanc);box-shadow:0 24px 60px -30px var(--violet)}
.rung-chaud .rung-n{font-family:var(--f-main);font-size:2.875rem;font-weight:700}
.rung-chaud .rung-nom{font-family:var(--f-main);font-weight:700;font-size:clamp(1.875rem,1.5rem + 1.4vw,2.75rem);line-height:1}
.rung-chaud .rung-phrase{font-weight:600}
.switch{position:relative;height:56px;display:grid;place-items:center}
.switch::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:var(--violet-vif);box-shadow:0 0 16px var(--halo);transform:scaleX(var(--sw,1));transform-origin:left center;transition:transform 1.2s var(--ease)}
.js .switch{--sw:0}
.js .switch.in{--sw:1}
.switch span{position:relative;background:var(--nuit);border:1.5px solid var(--violet-vif);color:var(--violet-clair);font-family:var(--f-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:7px 18px;border-radius:99px}
.apres-echelle{margin-top:clamp(28px,4vw,48px);font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem);font-weight:600;max-width:46ch;color:var(--craie)}
@media (max-width:1099px){
  .rung{grid-template-columns:70px minmax(0,1fr) auto}
  .rung-phrase{grid-column:1 / -1}
}
@media (max-width:759px){
  .rung{grid-template-columns:52px minmax(0,1fr);padding:20px;gap:10px 14px}
  .rung-etiq{display:none}
}

/* ===== Salles : grandes lignes en listes de définition ===== */
.offer-rows{display:grid;gap:22px}
.offer{display:grid;grid-template-columns:1.2fr 1fr;border-radius:26px;overflow:hidden;background:var(--nuit-2);border:1px solid var(--trait);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.offer:hover{transform:translateY(-6px);box-shadow:0 34px 80px -40px var(--noir-masque)}
.offer:nth-child(2){grid-template-columns:1fr 1.2fr}
.offer:nth-child(2) .offer-media{order:-1}
.offer-corps{padding:clamp(26px,3.4vw,46px);display:flex;flex-direction:column;justify-content:center;min-width:0}
.offer-role{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--violet-clair);margin:0 0 12px;max-width:none}
.offer-corps h3{font-size:clamp(1.875rem,1.4rem + 1.8vw,3.125rem);line-height:1.04;margin-bottom:24px}
.offer dl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px 20px;margin-bottom:26px}
.offer dt{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--brume);padding-top:.35em}
.offer dd{font-size:var(--fs-ui);line-height:1.5;color:var(--craie)}
.offer dd strong{color:var(--violet-clair)}
.offer-media{position:relative;min-height:340px;background:var(--nuit-3);display:grid;place-items:center;overflow:hidden}
.offer-media .mock{transition:transform 1s var(--ease)}
.offer:hover .offer-media .mock{transform:scale(1.04)}
.partner-band{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center;padding:clamp(26px,3.4vw,44px);border-radius:26px;background:var(--noir-masque);border:1px solid var(--trait)}
.partner-band .offer-role{color:var(--violet-clair)}
.partner-band h3{font-size:clamp(1.75rem,1.3rem + 1.4vw,2.625rem);margin-bottom:10px}
.partner-band p{color:var(--brume);max-width:46em;margin:0}
@media (max-width:859px){
  .offer,.offer:nth-child(2){grid-template-columns:1fr}
  .offer:nth-child(2) .offer-media{order:0}
  .offer-media{order:-1;min-height:0;aspect-ratio:16/10}
  .offer dl{grid-template-columns:1fr;gap:4px}
  .offer dd{margin-bottom:12px}
  .partner-band{grid-template-columns:1fr}
}

/* ===== Tuiles de la salle (mock partagé) ===== */
.mock{position:relative;width:min(100%,380px);border-radius:18px;background:var(--nuit);border:1px solid var(--trait-fort);padding:16px;display:grid;gap:10px;font-size:var(--fs-meta);line-height:1.35;text-align:left}
.mock-etiq{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--brume);display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;max-width:none}
.mock-ligne{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--nuit-2);border:1px solid var(--trait)}
.mock-ligne b{font-weight:700;font-size:var(--fs-ui)}
.mock-ligne small{display:block;font-size:var(--fs-label);color:var(--brume);font-family:var(--f-mono);letter-spacing:.04em}
.mock-bt{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:10px;font-weight:700;font-size:var(--fs-meta);white-space:nowrap;line-height:1}
.mock-bt-oui{background:var(--violet);color:var(--blanc)}
.mock-bt-non{box-shadow:inset 0 0 0 1.5px var(--trait-fort);color:var(--craie)}
.mock-bt-fin{background:var(--rec-fond);color:var(--blanc)}
.mock-avatar{width:36px;height:36px;border-radius:50%;background:var(--nuit-3);border:1px solid var(--trait-fort);display:grid;place-items:center;font-weight:700;font-size:var(--fs-meta);flex:none}
.tuile-salle{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--nuit-3);border:2px solid var(--trait)}
.tuile-salle::before{content:"";position:absolute;left:50%;top:17%;width:20%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:var(--silh,var(--trait-fort))}
.tuile-salle::after{content:"";position:absolute;left:50%;top:50%;width:44%;height:70%;transform:translateX(-50%);border-radius:50% 50% 0 0;background:var(--silh,var(--trait-fort))}
.tuile-nom{position:absolute;left:12px;bottom:10px;z-index:2;display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-ui);line-height:1}
.tuile-nom .ico{width:20px;height:20px}
.tuile-voyant{position:absolute;right:10px;top:10px;z-index:2}
.tuile-attente{--silh:var(--trait)}
.tuile-attente .tuile-nom{color:var(--brume)}
.tuile-parole{border-color:var(--violet-vif);box-shadow:0 20px 50px -26px var(--violet);--silh:var(--violet)}
.tuile-attente-msg{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:var(--voile);font-family:var(--f-mono);font-size:var(--fs-meta);color:var(--froid-fort);text-align:center;padding:12px}

/* ===== Trois états d'une même tuile ===== */
.etats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(28px,4vw,48px)}
.etat{position:relative}
.etat+.etat::before{content:"";position:absolute;left:calc(clamp(28px,4vw,64px) / -2 - 1.5px);top:30px;width:3px;height:56px;background:var(--violet-vif);box-shadow:0 0 16px var(--halo);border-radius:2px}
.etat h3{font-size:var(--fs-h4);margin:18px 0 8px}
.etat p{font-size:var(--fs-ui);color:var(--brume);margin:0}
.etat p.etat-gest{margin-top:14px;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--violet-clair);max-width:none}
@media (max-width:859px){
  .etats{grid-template-columns:1fr}
  .etat+.etat::before{left:0;top:calc(clamp(28px,4vw,64px) / -2 - 1.5px);width:90px;height:3px}
}

/* ===== Bento : accès et données en bref ===== */
.manifeste{font-family:var(--f-titre);font-weight:500;font-size:clamp(1.625rem,1.1rem + 2.4vw,3.125rem);line-height:1.14;letter-spacing:-.01em;max-width:62rem;text-wrap:balance;margin:0 0 clamp(2.5rem,5vw,4.5rem)}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.tuile{display:flex;flex-direction:column;border-radius:2rem;padding:clamp(1.5rem,3vw,2.5rem);background:var(--nuit-2);border:1px solid var(--trait);min-width:0}
.tuile h3{font-size:clamp(1.625rem,1.2rem + 1.2vw,2.5rem);margin-bottom:12px}
.tuile p{margin:0;color:var(--brume);font-size:var(--fs-ui);line-height:1.55}
.tuile-1{grid-column:1 / span 4;background:var(--violet);border-color:var(--violet);color:var(--blanc)}
.tuile-1 p{color:var(--blanc);font-size:var(--fs-corps)}
.tuile-img{grid-column:5 / span 2;padding:0;min-height:14rem;position:relative;overflow:hidden;background:var(--nuit-3);justify-content:center;align-items:center}
.tuile-2{grid-column:1 / span 3}
.tuile-3{grid-column:4 / span 3}
.lien-mono{display:inline-block;margin-top:18px;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.04em;color:var(--violet-clair);overflow-wrap:anywhere}
.tuile-img .mock{width:min(88%,300px)}
.uuid{font-family:var(--f-mono);font-size:var(--fs-meta);color:var(--craie);overflow-wrap:anywhere;line-height:1.5}
.uuid b{color:var(--violet-clair);font-weight:500}
@media (max-width:767px){
  .bento{grid-template-columns:1fr}
  .tuile-1,.tuile-2,.tuile-3,.tuile-img{grid-column:auto}
  .tuile-img{order:9;min-height:12rem}
}

/* ===== Bande de papier déchiré ===== */
.dechire{position:relative;min-height:clamp(560px,92svh,860px);display:grid;place-items:center;text-align:center;overflow:hidden;padding:clamp(100px,14vh,150px) var(--gut)}
.dechire-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dechire-fond path,.dechire-fond rect,.dechire-fond circle,.dechire-fond line{fill:none;stroke:var(--blanc);stroke-opacity:.2;stroke-width:2}
.dechire-bord{position:absolute;left:0;width:100%;z-index:2;fill:var(--nuit)}
.dechire-haut{top:-1px;height:clamp(38px,4.4vw,68px)}
.dechire-bas{bottom:-1px;height:clamp(40px,4.6vw,72px);transform:scaleY(-1)}
.dechire-in{position:relative;z-index:3;max-width:960px}
.dechire .petit-haut{font-size:1.25rem;color:var(--blanc);margin:0 auto 4px}
.dechire .nom-geant{font-family:var(--f-titre);font-weight:800;font-size:clamp(4rem,1rem + 11vw,9.5rem);line-height:.95;letter-spacing:-.04em;margin:0 0 10px;color:var(--blanc)}
.dechire .desc{font-size:clamp(1.125rem,1rem + .5vw,1.4375rem);font-weight:600;max-width:34ch;margin:0 auto 20px;color:var(--blanc)}
.dechire .forte{font-family:var(--f-titre);font-weight:800;font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);line-height:1.05;margin:0 auto 14px;color:var(--blanc)}
.dechire .signature{font-family:var(--f-main);font-weight:700;font-size:clamp(2rem,1.5rem + 1.6vw,2.75rem);transform:rotate(-2deg);display:inline-block;color:var(--blanc);margin:0}

/* ===== Questions (details natifs) ===== */
.questions{max-width:900px}
.q{border-top:1px solid var(--trait-fort)}
.q:last-child{border-bottom:1px solid var(--trait-fort)}
.q summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:16px;align-items:center;min-height:64px;padding:18px 0;font-weight:700;font-size:clamp(1.1875rem,1.05rem + .5vw,1.4375rem);line-height:1.3}
.q summary::-webkit-details-marker{display:none}
.q-signe{position:relative;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--trait-fort);flex:none}
.q-signe::before,.q-signe::after{content:"";position:absolute;left:14px;right:14px;top:50%;height:2px;margin-top:-1px;background:currentColor;border-radius:2px;transition:transform .4s var(--ease)}
.q-signe::after{transform:rotate(90deg)}
.q[open] .q-signe{background:var(--violet);box-shadow:none;color:var(--blanc)}
.q[open] .q-signe::after{transform:rotate(0)}
.q-rep{padding:0 64px 24px 0;color:var(--brume)}
.q-rep p:last-child{margin-bottom:0}
@media (max-width:559px){.q-rep{padding-right:0}}

/* ===== Appel final et médaillon ===== */
.final-grille{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.final h2{color:var(--blanc);margin-bottom:20px}
.final p{color:var(--blanc);font-size:var(--fs-chapo);margin-bottom:30px}
.final p.sur{font-size:var(--fs-label);margin-bottom:18px}
.fond-violet .btn-ligne{color:var(--blanc);box-shadow:inset 0 0 0 2px var(--blanc)}
.fond-violet .btn-ligne:hover{background:var(--violet-ombre)}
.medaillon{position:relative;width:min(100%,420px);aspect-ratio:1;margin-inline:auto}
.medaillon-disque{position:absolute;inset:11%;border-radius:50%;overflow:hidden;background:var(--nuit-2);box-shadow:0 40px 90px -30px var(--noir-masque),inset 0 0 0 1px var(--trait-fort);display:grid;place-items:center}
.medaillon-disque .tuile-salle{width:78%;aspect-ratio:16/12;border-radius:16px}
.medaillon-anneau{position:absolute;inset:0;width:100%;height:100%;color:var(--blanc);animation:tourne 38s linear infinite}
.medaillon:hover .medaillon-anneau{animation-duration:12s}
.medaillon-anneau text{font-family:var(--f-titre);font-weight:800;font-size:26px;fill:currentColor;text-transform:uppercase}
.medaillon-point{position:absolute;right:1.5%;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--blanc);box-shadow:0 0 0 6px var(--halo)}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (max-width:859px){.final-grille{grid-template-columns:1fr}.medaillon{width:min(86vw,360px)}}
@media (prefers-reduced-motion:reduce){.medaillon-anneau{animation:none}}

/* ===== Définition du service (texte autonome, sans effet) ===== */
.these-grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.these h2{font-size:var(--fs-h2);max-width:14em}
.these-texte{margin:0;font-size:var(--fs-chapo);line-height:1.55;color:var(--brume);max-width:46ch}
.these-texte strong{color:var(--craie);font-weight:700}
@media (max-width:859px){.these-grille{grid-template-columns:minmax(0,1fr)}}

/* ===== Quiz : quelle salle pour votre séance ===== */
.quiz{max-width:880px;margin-inline:auto;position:relative}
.quiz-barre{height:6px;border-radius:3px;background:var(--trait);margin-bottom:22px;overflow:hidden}
.quiz-barre i{display:block;height:100%;width:100%;background:var(--violet-vif);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .5s var(--ease)}
.quiz-meta{max-width:none;display:flex;justify-content:space-between;gap:16px;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;color:var(--brume)}
.quiz-meta b{color:var(--violet-clair);font-weight:600}
.quiz-carte{background:var(--nuit-2);border:1px solid var(--trait-fort);border-radius:26px;padding:clamp(26px,4vw,48px);animation:entree .55s var(--ease) both}
.quiz-q{font-family:var(--f-titre);font-weight:800;font-size:clamp(1.625rem,1.2rem + 1.6vw,2.125rem);line-height:1.1;margin:0 0 26px}
.quiz-echelle{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.quiz-rep{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:84px;padding:12px 8px;border-radius:14px;background:var(--nuit);border:1.5px solid var(--trait-fort);color:var(--craie);cursor:pointer;transition:transform .25s var(--ease),border-color .25s}
.quiz-rep:hover{border-color:var(--violet-vif);transform:translateY(-3px)}
.quiz-rep[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:var(--blanc)}
.quiz-rep .n{font-family:var(--f-main);font-weight:700;font-size:1.625rem;line-height:1}
.quiz-rep .l{font-size:var(--fs-meta);line-height:1.2;text-align:center}
.quiz-nav{display:flex;justify-content:space-between;margin-top:22px;gap:12px}
.quiz-lien{background:none;border:0;min-height:44px;padding:0 6px;font-weight:600;color:var(--brume);cursor:pointer;font-size:var(--fs-ui)}
.quiz-lien:disabled{opacity:.4;cursor:default}
.quiz-res{background:var(--nuit-2);border:1.5px solid var(--violet-vif);border-radius:26px;padding:clamp(26px,4vw,48px);box-shadow:0 24px 60px -30px var(--violet);animation:entree .55s var(--ease) both}
.quiz-res:focus{outline:none}
.quiz-res:focus-visible{outline:3px solid var(--violet-vif);outline-offset:4px}
.quiz-score{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--violet-clair);margin:0 0 6px}
.quiz-verdict{font-size:clamp(2rem,1.4rem + 2.4vw,3.5rem);margin-bottom:26px}
.quiz-barres{display:grid;gap:14px;margin-bottom:28px}
.quiz-b{display:grid;grid-template-columns:150px minmax(0,1fr) 56px;gap:14px;align-items:center;font-size:var(--fs-ui)}
.quiz-b .piste{height:12px;border-radius:6px;background:var(--trait);overflow:hidden}
.quiz-b .piste i{display:block;height:100%;background:var(--violet-vif);transform-origin:left;transform:scaleX(var(--v,0));animation:grandit 1.2s var(--ease) both}
.quiz-b .pc{font-family:var(--f-mono);text-align:right}
.quiz-b.top .piste i{background:var(--violet)}
.quiz-conseil{background:var(--nuit-3);border-radius:16px;padding:20px 22px;margin-bottom:26px}
.quiz-conseil .sur{margin-bottom:8px}
.quiz-conseil p{margin:0;color:var(--craie)}
.quiz-conseil p.sur{margin-bottom:8px;color:var(--violet-clair)}
@keyframes entree{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes grandit{from{transform:scaleX(0)}}
@media (max-width:640px){
  .quiz-echelle{grid-template-columns:1fr}
  .quiz-rep{flex-direction:row;justify-content:flex-start;min-height:56px;padding:12px 16px;gap:16px}
  .quiz-rep .n{width:28px}
  .quiz-b{grid-template-columns:96px minmax(0,1fr) 50px}
}
@media (prefers-reduced-motion:reduce){.quiz-carte,.quiz-res,.quiz-b .piste i{animation:none}}

/* ===== Fil continu ===== */
.fil{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:4}
.fil path{fill:none;stroke:var(--violet-vif);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fil .fil-noeud{fill:var(--nuit);stroke:var(--violet-vif);stroke-width:2;transition:fill .5s var(--ease),transform .5s var(--ease);transform-box:fill-box;transform-origin:center}
.fil .fil-noeud.on{fill:var(--violet-vif);transform:scale(1.15)}
.fil .fil-lien{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .6s var(--ease)}
.fil .fil-lien.on{stroke-dashoffset:0}
.fil .fil-pointe{fill:var(--violet-vif);stroke:none;opacity:0;filter:drop-shadow(0 0 7px var(--halo));transition:opacity .3s}
.fil .fil-pointe.live{opacity:1}
.fil .fil-pointe.land{animation:atterrit .9s var(--ease)}
@keyframes atterrit{0%{transform:scale(1)}40%{transform:scale(1.9)}100%{transform:scale(1)}}
.mock-ligne>.voyant,.mock-ligne>.mock-bt{margin-left:auto}
.mock-bt-plein{width:100%;margin-left:0}
.mock-ligne>.mock-bt+.mock-bt{margin-left:0}

/* ===== Pages intérieures : en-têtes ===== */
.page-tete{position:relative;padding:calc(var(--haut-entete) + clamp(48px,8vw,104px)) 0 clamp(48px,7vw,96px);overflow:hidden;border-bottom:1px solid var(--trait)}
.page-tete-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.page-tete h1{max-width:14em}
.page-tete .chapo{margin:0}
.page-tete.large h1{max-width:16em}
.coupe{display:inline-block;width:3px;height:.8em;margin-inline:.28em;background:var(--violet-vif);box-shadow:0 0 14px var(--halo);border-radius:2px;vertical-align:-.04em}
.filigrane{position:absolute;right:calc(var(--gut) * -.4);top:50%;width:clamp(240px,34vw,520px);aspect-ratio:1;transform:translateY(-46%);color:var(--trait);pointer-events:none}
.filigrane .ico{width:100%;height:100%;stroke-width:.7}
.fil-ariane{display:flex;flex-wrap:wrap;gap:4px 10px;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--froid);margin:0 0 20px;padding:0}
.fil-ariane li{display:flex;align-items:center;min-height:32px}
.fil-ariane li+li::before{content:"/";margin-right:10px;color:var(--trait-fort)}
.fil-ariane a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.fil-ariane a:hover{color:var(--violet-clair)}
.badges{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}
.badges li{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;border-radius:99px;border:1px solid var(--trait-fort);color:var(--craie);background:var(--nuit-2)}
.page-tete .actions{margin-top:8px}

/* paragraphe-réponse et fiche de quatre faits */
.reponse{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.reponse-p{font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem);line-height:1.5;color:var(--craie);margin:0;max-width:34em}
.faits{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--trait-fort);border:1px solid var(--trait-fort);border-radius:var(--rayon-s);overflow:hidden}
.faits div{background:var(--nuit);padding:18px 20px}
.faits dt{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--violet-clair);margin-bottom:6px}
.faits dd{font-size:var(--fs-ui);line-height:1.45;color:var(--craie)}
@media (max-width:859px){.reponse{grid-template-columns:1fr}.faits{grid-template-columns:1fr}}

/* ===== Chaîne de gestes : fil qui se dessine ===== */
.frise-b-grille{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.colle{position:sticky;top:calc(var(--haut-entete) + 28px)}
.colle h2{margin-bottom:22px}
.frise-b{position:relative;padding-left:44px;display:grid;gap:clamp(28px,4vw,48px)}
.frise-b::before,.frise-b::after{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;border-radius:2px}
.frise-b::before{background:var(--trait-fort)}
.frise-b::after{background:var(--violet-vif);transform-origin:top}
.frise-b li{position:relative}
.frise-b li::before{content:"";position:absolute;left:-44px;top:4px;width:18px;height:18px;margin-left:3px;border-radius:50%;background:var(--violet-vif);border:2px solid var(--violet-vif);box-sizing:border-box}
.frise-b time,.frise-b .etiq{display:block;font-family:var(--f-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-clair);margin-bottom:8px}
.frise-b h3{font-size:var(--fs-h3);margin-bottom:10px}
.frise-b p{margin:0 0 10px;color:var(--brume);font-size:var(--fs-ui);line-height:1.6}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .frise-b::after{transform:scaleY(0);animation:fil-trace linear both;animation-timeline:view();animation-range:entry 30% exit 60%}
    .frise-b li::before{background:var(--nuit);animation:fil-allume linear both;animation-timeline:view();animation-range:entry 60% entry 100%}
  }
}
@keyframes fil-trace{to{transform:scaleY(1)}}
@keyframes fil-allume{to{background:var(--violet-vif);transform:scale(1.1)}}
@media (max-width:859px){.frise-b-grille{grid-template-columns:1fr}.colle{position:static}.frise-b{padding-left:38px}.frise-b li::before{left:-38px}}

/* ===== Gestes de l'organisateur : accordéon numéroté ===== */
.services{border-top:1px solid var(--trait-fort)}
.service{border-bottom:1px solid var(--trait-fort)}
.service summary{list-style:none;display:grid;grid-template-columns:72px minmax(0,1fr) 48px;gap:20px;align-items:center;padding:26px 0;min-height:76px}
.service summary::-webkit-details-marker{display:none}
.service-n{font-family:var(--f-mono);font-size:var(--fs-meta);font-weight:500;letter-spacing:.16em;color:var(--violet-clair)}
.service-titre{font-family:var(--f-titre);font-weight:800;font-size:clamp(1.625rem,1.1rem + 2.2vw,2.75rem);line-height:1.12;letter-spacing:-.01em;transition:color .25s,transform .45s cubic-bezier(.2,.7,.2,1)}
.service summary:hover .service-titre{color:var(--violet-clair);transform:translateX(8px)}
.service-bouton{position:relative;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--trait-fort);transition:background-color .3s}
.service-bouton::before,.service-bouton::after{content:"";position:absolute;left:16px;top:23px;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .4s var(--ease)}
.service-bouton::after{transform:rotate(90deg)}
.service[open] .service-bouton{background:var(--violet);box-shadow:none;color:var(--blanc)}
.service[open] .service-bouton::after{transform:rotate(0)}
.service-corps{padding:0 68px 32px 92px;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);color:var(--brume);max-width:900px}
.service-corps p:last-child{margin-bottom:0}
@media (max-width:759px){
  .service summary{grid-template-columns:44px minmax(0,1fr) 48px;gap:12px}
  .service-corps{padding:0 0 26px}
}

/* ===== Deux colonnes : titre à gauche, prose à droite ===== */
.bande-deux{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,100px);align-items:start}
.bande-deux h2{font-size:clamp(2.25rem,1.4rem + 3vw,4.25rem)}
.bande-deux p{color:var(--brume);font-size:var(--fs-corps)}
.bande-deux p strong{color:var(--craie)}
.bande-deux p.sur{font-size:var(--fs-label);color:var(--violet-clair);margin-bottom:18px}
.fond-ardoise .bande-deux p.sur{color:var(--froid)}
.limites{margin-top:8px;display:grid;gap:0}
.limites li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:18px 0;border-top:1px solid var(--trait-fort);color:var(--froid-fort);font-size:var(--fs-corps)}
.limites li:last-child{border-bottom:1px solid var(--trait-fort)}
.limites li::before{content:"";width:16px;height:2px;margin-top:.85em;background:var(--violet-clair)}
.limites strong{color:var(--blanc)}
.fond-ardoise .bande-deux p{color:var(--froid)}
@media (max-width:859px){.bande-deux{grid-template-columns:1fr}}

/* ===== Blocs alternés : numéro creux ===== */
.alternes{display:grid;gap:clamp(90px,16vh,180px)}
.alterne{position:relative;display:grid;grid-template-columns:5fr 6fr;gap:clamp(28px,7vw,120px);align-items:center}
.alterne:nth-child(even) .alterne-media{order:2}
.alterne-media{display:grid;place-items:center;min-width:0}
.alterne-media .mock{width:min(100%,460px)}
.alterne-texte{position:relative;min-width:0}
.alterne-n{display:block;font-family:var(--f-titre);font-weight:800;font-size:clamp(5rem,12vw,13rem);line-height:.8;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--violet-vif) 55%,transparent);user-select:none;margin:0 0 .12em -.04em}
.alterne-texte .sur{margin-bottom:12px}
.alterne-texte h3{font-size:clamp(2rem,1.2rem + 3vw,3.75rem);margin-bottom:16px}
.alterne-texte p{color:var(--brume);max-width:36em}
@media (max-width:859px){
  .alterne{grid-template-columns:1fr}
  .alterne:nth-child(even) .alterne-media{order:0}
  .alterne-n{font-size:6rem}
}

/* formulaire de démonstration (page publique d'inscription) */
.champ{display:grid;gap:6px;margin:0}
.champ label{font-size:var(--fs-meta);font-weight:600;color:var(--craie)}
.champ input{font:inherit;font-size:1rem;min-height:52px;padding:0 14px;border-radius:12px;border:1.5px solid var(--trait-fort);background:var(--nuit-2);color:var(--craie);width:100%}
.champ input:focus-visible{outline:3px solid var(--violet-vif);outline-offset:2px;border-color:var(--violet-vif)}
.champ .err{color:var(--rec);font-size:var(--fs-meta);min-height:1.2em;margin:0;max-width:none}
.form-demo{display:grid;gap:12px}
.form-demo .btn{width:100%;min-height:52px}
.form-statut{margin:0;padding:12px 14px;border-radius:12px;background:var(--nuit-3);border:1px solid var(--violet-vif);font-size:var(--fs-meta);color:var(--craie);max-width:none}
.form-statut[hidden]{display:none}
.compte{font-family:var(--f-mono);font-size:var(--fs-meta);display:flex;gap:10px;flex-wrap:wrap;margin:0}
.compte span{padding:6px 10px;border-radius:8px;background:var(--nuit-3);border:1px solid var(--trait)}

/* ===== Grille de cellules à filets ===== */
.cellules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--trait-fort);border:1px solid var(--trait-fort)}
.cellule{background:var(--nuit);padding:28px 26px 30px;min-width:0}
.cellule-n{font-family:var(--f-mono);font-size:var(--fs-meta);color:var(--violet-clair);letter-spacing:.1em;display:block;margin-bottom:10px}
.cellule h3{font-size:clamp(1.5rem,1.2rem + .9vw,2rem);margin-bottom:10px}
.cellule p{margin:0;color:var(--brume);font-size:var(--fs-ui);line-height:1.55}
.chute{font-family:var(--f-titre);font-weight:800;font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);margin-top:clamp(24px,3vw,40px);line-height:1.1;max-width:none}
@media (max-width:959px){.cellules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.cellules{grid-template-columns:1fr}}

/* ===== Frise : axe central, repères géants ===== */
.frise-c{position:relative}
.frise-c::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--trait-fort)}
.frise-c li{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,130px);padding-block:clamp(36px,7vh,80px);align-items:start}
.frise-c li::before{content:"";position:absolute;left:50%;top:calc(clamp(36px,7vh,80px) + .55em);width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--nuit);border:1px solid var(--violet-vif)}
.repere{text-align:right}
.repere b{display:block;font-family:var(--f-titre);font-weight:500;font-size:clamp(2.5rem,1.3rem + 3.4vw,5rem);line-height:1;text-transform:uppercase;letter-spacing:.005em}
.repere small{display:block;margin-top:8px;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--violet-clair)}
.frise-c h3{font-size:clamp(1.5rem,1.2rem + 1vw,1.875rem);margin-bottom:8px}
.frise-c p{color:var(--brume);margin:0;max-width:30em;font-size:var(--fs-ui);line-height:1.6}
.frise-c li:nth-child(even) .repere{order:2;text-align:left}
.frise-c li:nth-child(even) .frise-c-txt{order:1;text-align:right;justify-self:end}
.frise-c-txt{min-width:0}
@media (max-width:759px){
  .frise-c::before{left:7px}
  .frise-c li{grid-template-columns:1fr;gap:10px;padding-left:40px}
  .frise-c li::before{left:7px}
  .repere,.frise-c li:nth-child(even) .repere{text-align:left;order:0}
  .frise-c li:nth-child(even) .frise-c-txt{text-align:left;justify-self:start}
}

/* ===== Trois cartes à chiffres romains ===== */
.romaines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.romaine{background:var(--nuit-2);border:1px solid var(--trait-fort);border-radius:var(--rayon);padding:clamp(24px,3vw,36px)}
.romaine-n{font-family:var(--f-main);font-weight:700;font-size:3.25rem;line-height:1;color:var(--violet-clair);display:block;margin-bottom:12px;transform:rotate(-3deg);transform-origin:left}
.romaine h3{font-size:var(--fs-h3);margin-bottom:10px}
.romaine p{margin:0;color:var(--brume);font-size:var(--fs-ui)}
@media (max-width:859px){.romaines{grid-template-columns:1fr}}

/* panneau d'approche, deux colonnes d'aspirations */
.panneau{border:1.5px solid var(--violet-vif);border-radius:var(--rayon);padding:clamp(28px,5vw,64px);background:var(--nuit-2);box-shadow:0 24px 60px -30px var(--violet)}
.panneau p.fort{font-family:var(--f-titre);font-weight:800;font-size:clamp(1.875rem,1.2rem + 2.6vw,3.5rem);line-height:1.08;max-width:22em;margin:0}
.aspire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.tirets{display:grid;gap:14px;margin-top:20px}
.tirets li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;font-size:var(--fs-corps)}
.tirets li::before{content:"";width:14px;height:2px;margin-top:.8em;background:var(--violet-clair)}
.voyant-geant{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--rayon);background:var(--nuit-3);border:1px solid var(--trait-fort);position:relative;overflow:hidden}
.voyant-geant .voyant{position:absolute;left:50%;top:7%;transform:translateX(-50%);z-index:3;font-size:var(--fs-label);padding:8px 16px 8px 12px}
.voyant-geant .tuile-salle{position:absolute;inset:20% 12% 8%;aspect-ratio:auto;width:auto}
@media (max-width:859px){.aspire{grid-template-columns:1fr}}

/* liste d'enregistrements d'exemple */
.liste-enreg{width:100%;border-collapse:collapse;font-size:var(--fs-ui)}
.liste-enreg caption{text-align:left;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--brume);padding-bottom:14px}
.liste-enreg th,.liste-enreg td{text-align:left;padding:16px 14px;border-top:1px solid var(--trait-fort);vertical-align:middle}
.liste-enreg th{font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--brume)}
.liste-enreg tbody th{font-family:var(--f-texte);font-size:var(--fs-ui);letter-spacing:0;text-transform:none;color:var(--craie);font-weight:700}
.liste-enreg td{color:var(--brume)}
.liste-enreg td.mono{font-family:var(--f-mono)}
.statut{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:99px;border:1px solid var(--trait-fort);white-space:nowrap}
.statut-ok{color:var(--direct)}
.statut-cours{color:var(--rec)}
.statut-ok::before,.statut-cours::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.tableau-def{overflow-x:auto}
@media (max-width:719px){
  .liste-enreg thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .liste-enreg tr{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--trait-fort)}
  .liste-enreg th,.liste-enreg td{border:0;padding:0}
  .liste-enreg td::before{content:attr(data-l) " : ";font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--froid)}
  .liste-enreg td.mono{font-size:var(--fs-meta)}
}

/* ===== Salle de classe : définition, gestes, comparatif ===== */
.defs{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px}
.def{border-radius:var(--rayon);padding:clamp(24px,3vw,36px);border:1px solid var(--trait-fort);background:var(--nuit-2)}
.def-1{background:var(--violet);border-color:var(--violet);color:var(--blanc);box-shadow:0 24px 60px -30px var(--violet)}
.def.def-1 p{font-family:var(--f-titre);font-weight:800;font-size:clamp(1.5rem,1rem + 1.9vw,2.5rem);line-height:1.1;margin:0;max-width:none}
.def-1 mark{background:transparent;color:var(--blanc);box-shadow:inset 0 -.14em 0 var(--blanc)}
.def p{margin:0;font-size:var(--fs-corps);color:var(--craie)}
.def p.sur{margin-bottom:12px;font-size:var(--fs-label);color:var(--violet-clair)}
.def.def-1 p{color:var(--blanc)}
@media (max-width:959px){.defs{grid-template-columns:1fr 1fr}.def-1{grid-column:1 / -1}}
@media (max-width:599px){.defs{grid-template-columns:1fr}}
.gestes-grille{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.geste{padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--trait-fort)}
.geste:first-child{border-top:0;padding-top:0}
.geste h3{font-size:var(--fs-h3);margin-bottom:10px;display:flex;gap:16px;align-items:baseline}
.geste h3 .n{font-family:var(--f-mono);font-size:var(--fs-meta);font-weight:500;color:var(--violet-clair);letter-spacing:.12em}
.geste p{color:var(--brume);margin:0 0 10px}
.mains{display:grid;gap:10px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.compare-col{border-radius:var(--rayon);padding:clamp(24px,3vw,36px)}
.compare-froid{background-color:var(--ardoise);background-image:linear-gradient(var(--quadrille) 1px,transparent 1px),linear-gradient(90deg,var(--quadrille) 1px,transparent 1px);background-size:24px 24px;border:1px solid var(--trait);color:var(--froid)}
.compare-chaud{background:var(--violet);color:var(--blanc);box-shadow:0 24px 60px -30px var(--violet)}
.compare-col h3{font-size:var(--fs-h3);margin-bottom:18px}
.compare-froid h3{font-family:var(--f-mono);font-weight:500;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);color:var(--froid-fort)}
.compare-col li{padding:12px 0;border-top:1px solid var(--trait);font-size:var(--fs-corps)}
.compare-chaud li{border-color:var(--trait-fort);font-weight:600}
.compare-froid li{font-family:var(--f-mono);font-size:var(--fs-ui)}
@media (max-width:859px){.gestes-grille{grid-template-columns:1fr}.compare{grid-template-columns:1fr}}
.cartes-lien{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.carte-lien{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3vw,32px);border-radius:var(--rayon);border:1px solid var(--trait-fort);background:var(--nuit-2);text-decoration:none;transition:transform .4s var(--ease),border-color .3s}
.carte-lien:hover{transform:translateY(-4px);border-color:var(--violet-vif)}
.carte-lien h3{font-size:var(--fs-h4)}
.carte-lien p{margin:0;color:var(--brume);font-size:var(--fs-ui)}
.carte-lien .lien-fleche{margin-top:auto;color:var(--violet-clair)}
@media (max-width:859px){.cartes-lien{grid-template-columns:1fr}}
.verif{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;color:var(--froid);margin-top:28px;max-width:none}

/* ===== Accès et données : onglets par public ===== */
.onglets{display:none;gap:.35rem;padding:.35rem;border:1px solid var(--trait-fort);border-radius:2rem;width:fit-content;max-width:100%;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,56px);background:var(--nuit-2)}
.js .onglets{display:flex}
.onglet{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:2rem;border:0;background:transparent;color:var(--craie);font-family:var(--f-titre);font-weight:700;font-size:1.375rem;cursor:pointer;line-height:1}
.onglet[aria-selected="true"]{background:var(--violet);color:var(--blanc)}
.onglet .ico{width:20px;height:20px}
.panneau-onglet{margin-bottom:clamp(56px,8vw,96px)}
.js .panneau-onglet>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.js .panneau-onglet[hidden]{display:none}
.panneau-onglet>h2{margin-bottom:28px}
.faq-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.sommaire{border:1px solid var(--trait-fort);border-radius:var(--rayon-s);padding:16px 18px;background:var(--nuit-2)}
.sommaire h3{font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-clair);margin-bottom:8px}
.sommaire a{display:flex;align-items:center;min-height:44px;padding:0 10px;margin-inline:-10px;border-radius:8px;text-decoration:none;font-size:var(--fs-ui);color:var(--brume);border-left:2px solid transparent}
.sommaire a.on,.sommaire a:hover{color:var(--craie);border-left-color:var(--violet-vif);background:var(--trait)}
.chapitres{display:grid;gap:clamp(40px,5vw,64px)}
.chapitre>h3{font-size:clamp(2rem,1.3rem + 2.4vw,3.25rem);margin-bottom:16px}
@media (min-width:62em){
  .faq-grille{grid-template-columns:17rem minmax(0,1fr);gap:4rem}
  .sommaire{position:sticky;top:calc(var(--haut-entete) + 24px);align-self:start}
}
.encart{border-radius:var(--rayon);padding:clamp(28px,5vw,64px);background:var(--violet);color:var(--blanc);display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px 48px;align-items:center;box-shadow:0 24px 60px -30px var(--violet)}
.encart h2{font-size:var(--fs-h2);color:var(--blanc)}
.encart p{margin:12px 0 0;color:var(--blanc);font-size:var(--fs-chapo)}
@media (max-width:859px){.encart{grid-template-columns:1fr}}

/* ===== Mentions légales, 404 ===== */
.legal dl{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:0;border-top:1px solid var(--trait-fort)}
.legal dt,.legal dd{padding:18px 0;border-bottom:1px solid var(--trait-fort)}
.legal dt{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--brume);padding-right:20px}
.a-renseigner{display:inline-block;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:8px;border:1px dashed var(--froid);color:var(--froid-fort)}
.legal h2{font-size:var(--fs-h3);margin:clamp(40px,5vw,64px) 0 14px}
@media (max-width:599px){.legal dl{grid-template-columns:1fr}.legal dt{border-bottom:0;padding-bottom:0}}
.p404{min-height:80svh;display:grid;align-content:center;padding-top:calc(var(--haut-entete) + 40px)}

/* ===== Compléments globaux ===== */
body{position:relative}
main{display:block}
.entete+main{display:block}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .switch::before{transition:none}
  .btn,.btn:hover,.btn:active,.offer,.offer:hover,.rung,.rung:hover,.carte-lien,.carte-lien:hover{transition:none}
  .offer:hover,.rung:hover,.carte-lien:hover{transform:none}
  .offer:hover .offer-media .mock{transform:none}
  .service summary:hover .service-titre{transform:none}
  .fil .fil-noeud,.fil .fil-lien{transition:none}
}
.titre-seul{margin-bottom:clamp(24px,3vw,40px)}
.apres{margin-top:clamp(24px,3vw,40px)}
.final{overflow:clip}
.page-tete h1.long{font-size:clamp(2.5rem,1.5rem + 4vw,5.5rem);max-width:18em}
.final-sombre h2{font-size:var(--fs-h2);max-width:18em}
.final .wrap-etroit{max-width:calc(1000px + var(--gut) * 2)}
.final h2{font-size:var(--fs-h2)}
.final .actions{align-items:center}
.fond-violet :focus-visible,.final :focus-visible{outline-color:var(--blanc)}
.p404 h1{margin-bottom:20px}

/* Shared palette for the current site, including the product demonstrations. */
:root[data-theme="light"] {
  color-scheme: light;
  --nuit: #faf8fc;
  --nuit-2: #ffffff;
  --nuit-3: #eee9f5;
  --ardoise: #f0edf3;
  --ardoise-2: #e5dfec;
  --craie: #21192e;
  --brume: #5b5168;
  --froid: #655b70;
  --froid-fort: #44384f;
  --violet-clair: #6330c2;
  --violet-vif: #6b3bc5;
  --direct: #16713e;
  --rec: #b91c32;
  --trait: rgb(44 27 62 / .14);
  --trait-fort: rgb(44 27 62 / .38);
  --quadrille: rgb(44 27 62 / .06);
  --voile: rgb(250 248 252 / .95);
  --halo: rgb(122 70 240 / .22);
  --halo-doux: rgb(122 70 240 / .08);
}

.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--trait-fort); border-radius: 12px; color: var(--craie); background: var(--nuit-2); cursor: pointer; }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--nuit-3); }
.theme-toggle .ico { width: 18px; height: 18px; }
.theme-moon, [data-theme="light"] .theme-sun { display: none; }
[data-theme="light"] .theme-moon { display: block; }

/* These marks sit on fixed colored backgrounds in both themes. */
.logo-point { fill: var(--blanc); }
.logo-arc { stroke: var(--blanc); }
.pf-av { color: #21192e; }
[data-theme="light"] .skip { background: var(--craie); color: var(--nuit); }
[data-theme="light"] .final:not(.fond-violet) h2,
[data-theme="light"] .final:not(.fond-violet) p { color: var(--craie); }
[data-theme="light"] .final:not(.fond-violet) :focus-visible { outline-color: var(--violet-vif); }
[data-theme="light"] .haut:hover { color: var(--blanc); }

@media (min-width: 1080px) and (max-width: 1350px) {
  .entete-in { gap: 10px; }
  .entete .nav a { padding-inline: 7px; }
  .entete .cta-long { display: none; }
  .entete .cta-court { display: inline; }
}
@media (max-width: 559px) {
  .entete-in { gap: 8px; padding-inline: 16px; }
  .marque { gap: 7px; }
  .marque-logo { width: 32px; height: 32px; }
  .burger { width: 40px; }
}