/* L'heure libérée, version « aiguillage » (proposition du 4/11/2026, à valider).
   Une console claire : la leçon annulée, le Y de Yodriv en 3D qui trie au centre, les élèves à droite.
   Inspirations : consoles de données (fines grilles, étiquettes en chasse fixe) et grand logo pâle en fond (Heysimon),
   ramenées à la charte Saphir & glacier : fond blanc, saphir pour l'action, glacier décoratif seulement. */

.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font:600 12px/1.4 Lexend,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}

/* Le grand Y pâle en fond, coupé par le bord : la marque est là sans gêner la lecture. */
.aiguillage{isolation:isolate}
.aiguillage::before{content:"";position:absolute;z-index:-1;right:-14vw;top:40px;width:min(980px,78vw);aspect-ratio:1;
 background:url(../img/yodriv-icone-y.svg) center/contain no-repeat;opacity:.05;filter:saturate(1.2);pointer-events:none}

/* ---------- La console ---------- */
.console{margin-top:56px;border:1px solid var(--border-subtle);border-radius:32px;background:
  linear-gradient(var(--surface-default),var(--surface-default)) padding-box;box-shadow:var(--shadow-card);overflow:hidden;position:relative}
.console-barre{display:flex;align-items:center;gap:18px;padding:14px 20px;border-bottom:1px solid var(--border-subtle);background:var(--surface-page)}
.console-direct{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:99px;background:var(--status-successSoft);color:var(--status-success);font:600 13px Lexend}
.console-direct i{position:relative;width:8px;height:8px;border-radius:50%;background:currentColor}
.console-direct i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:direct 1.8s ease-out infinite}
@keyframes direct{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.console-titre{display:inline-flex;align-items:center;gap:8px;margin-right:auto;font:600 15px Lexend;color:var(--text-primary)}
.console-titre img{width:18px;height:18px}
.console-sep{color:var(--border-control)}
.console-quand{font-weight:500;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.console-rejouer{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;border:1px solid var(--border-subtle);background:var(--surface-default);font:600 14px Lexend;cursor:pointer;transition:border-color var(--duration-fast),transform var(--duration-fast) var(--ressort)}
.console-rejouer:hover{border-color:var(--brand-primary);transform:translateY(-1px)}

.console-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px) minmax(0,1.1fr);align-items:center;gap:40px;padding:56px 40px 48px;
 /* fine grille en fond, comme une table de travail */
 background-image:linear-gradient(var(--border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px);
 background-size:32px 32px;background-position:-1px -1px}
.console-scene::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 80% at 50% 50%,rgb(255 255 255 / .55),#fff 85%);pointer-events:none;z-index:0}
.console-scene>*{position:relative;z-index:1}

/* Liens (SVG dessiné par heure.js, du Y vers chaque élève et vers la leçon) */
.liens{position:absolute!important;inset:0;width:100%;height:100%;z-index:1!important;overflow:visible;pointer-events:none}
.liens path{fill:none;stroke:var(--border-control);stroke-width:1.5;stroke-dasharray:4 6;opacity:0;transition:opacity .4s,stroke .4s}
.liens path.flux{stroke:var(--brand-primary);stroke-dasharray:10 190;stroke-width:2.5;stroke-linecap:round;opacity:0}
.console[data-etape="1"] .liens .l-lecon,.console[data-etape="2"] .liens path:not(.flux),.console[data-etape="3"] .liens path:not(.flux),.console[data-etape="4"] .liens path:not(.flux){opacity:.9}
.console[data-regle="premier"][data-etape="2"] .liens .flux.vers-oui,.console[data-regle="ordre"][data-etape="2"] .liens .flux.gagnant{opacity:1;animation:flux 1.4s linear infinite}
.console[data-etape="1"] .liens .flux.l-lecon{opacity:1;animation:flux 1.2s linear infinite}
.console[data-etape="3"] .liens .gagnant,.console[data-etape="4"] .liens .gagnant{stroke:var(--brand-primary);stroke-dasharray:none;stroke-width:2.5;opacity:1}
.console[data-etape="2"] .liens .vers-non,.console[data-etape="3"] .liens .vers-non,.console[data-etape="4"] .liens .vers-non{opacity:.25}
@keyframes flux{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}

/* La leçon annulée */
/* La leçon de Tom : un statut en haut qui change, l'heure en grand, ce que demande le créneau, une ligne d'histoire en bas. */
.lecon-annulee{padding:18px 20px;border-radius:22px;background:var(--surface-default);border:1.5px dashed var(--status-danger);box-shadow:var(--shadow-card);width:min(100%,300px);justify-self:start;
 transition:border-color .5s,transform .6s var(--ressort),box-shadow .5s}
.lecon-tete{display:flex;align-items:center;gap:12px}
.lecon-tete img{border-radius:50%;background:var(--brand-primarySoft);flex:none}
/* La carte suit le créneau : Tom l'a libéré, Yanis le reprend (il prend sa place dans la carte, Tom ne « revient » pas). */
.lecon-qui{display:grid;margin-right:auto;min-width:0}
.qui{grid-area:1/1;display:flex;align-items:center;gap:12px;transition:opacity .4s,transform .55s var(--ressort)}
.qui-apres{opacity:0;transform:translateY(10px)}
.console[data-etape="3"] .qui-avant,.console[data-etape="4"] .qui-avant{opacity:0;transform:translateY(-10px)}
.console[data-etape="3"] .qui-apres,.console[data-etape="4"] .qui-apres{opacity:1;transform:none}
.lecon-tete b{display:block;font-size:17px;line-height:1.2}.lecon-tete small{display:block;color:var(--text-secondary);font-size:13.5px}
.lecon-statut{display:grid;align-self:start}
.lecon-statut span{grid-area:1/1;justify-self:end;padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:600;transition:opacity .35s,transform .45s var(--ressort)}
.s-annulee{background:var(--status-dangerSoft);color:var(--status-danger)}
.s-reprise{background:var(--status-successSoft);color:var(--status-success);opacity:0;transform:scale(.8)}
.lecon-heure{margin:16px 0 12px;display:flex;align-items:baseline;gap:8px;font-size:15px;color:var(--text-secondary)}
.lecon-heure b{font:800 40px/1 Lexend;letter-spacing:-.035em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.console[data-etape="1"] .lecon-heure b,.console[data-etape="2"] .lecon-heure b{text-decoration:line-through 3px var(--status-danger);text-decoration-skip-ink:none}
.lecon-exige{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.lecon-exige span{padding:3px 10px;border-radius:99px;background:var(--brand-primarySoft);color:var(--brand-primary);font-size:12.5px;font-weight:600;transition:box-shadow .3s}
.console[data-etape="2"] .lecon-exige span{box-shadow:0 0 0 2px var(--brand-accent)}
.lecon-pied{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--border-subtle);display:grid;font-size:13.5px;color:var(--text-secondary)}
.lecon-pied span{grid-area:1/1;transition:opacity .35s}
.lecon-pied b{color:var(--text-primary);font-variant-numeric:tabular-nums}
.p-apres{opacity:0;color:var(--status-success)}.p-apres b{color:var(--status-success)}
.console[data-etape="3"] .s-annulee,.console[data-etape="4"] .s-annulee,.console[data-etape="3"] .p-avant,.console[data-etape="4"] .p-avant{opacity:0}
.console[data-etape="3"] .s-reprise,.console[data-etape="4"] .s-reprise,.console[data-etape="3"] .p-apres,.console[data-etape="4"] .p-apres{opacity:1;transform:none}
.console[data-etape="1"] .lecon-annulee{transform:translateX(8px) rotate(-1deg)}
.console[data-etape="3"] .lecon-annulee,.console[data-etape="4"] .lecon-annulee{border:1.5px solid var(--status-success);box-shadow:0 16px 36px -18px rgb(22 115 75 / .45)}

/* L'horloge de l'exemple : de 9:12 à 9:14, puis « Retrouvée en 2 min » */
.console-chrono{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:99px;background:var(--surface-default);border:1px solid var(--border-subtle);font:600 13.5px Lexend;color:var(--text-primary);font-variant-numeric:tabular-nums;transition:background .4s,color .4s,border-color .4s}
.console-chrono svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chrono-fin{display:none}
.console[data-etape="3"] .console-chrono,.console[data-etape="4"] .console-chrono{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;box-shadow:3px 3px 0 var(--brand-accent)}
.console[data-etape="3"] .chrono-fin,.console[data-etape="4"] .chrono-fin{display:inline}
.console[data-etape="3"] #chrono-h,.console[data-etape="4"] #chrono-h{display:none}
.console-exemple{font-size:12.5px;color:var(--text-secondary)}

/* Les étincelles Yodriv quand Yanis prend l'heure (heure.js, eclaterReprise) : elles partent du bord de sa carte. */
.eleve{position:relative}
.jaillit{position:absolute;z-index:5;margin:-12px 0 0 -12px;overflow:visible;pointer-events:none;opacity:0;filter:drop-shadow(0 3px 6px rgb(36 87 167 / .25));
 animation:jaillir 1.3s var(--sortie) forwards}
@keyframes jaillir{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}15%{opacity:1;transform:translate(calc(var(--dx) * .25),calc(var(--dy) * .25)) scale(1.1)}65%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.6) rotate(var(--r))}}

/* Le cerveau : le Y 3D en lévitation (heure.js), son halo au sol, sa légende */
.cerveau{display:grid;justify-items:center;gap:8px}
.cerveau-y{width:min(100%,280px);aspect-ratio:1;display:grid;place-items:center;position:relative}
.cerveau-y canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.cerveau-repli{width:46%;height:auto;opacity:.9;animation:lev 4s ease-in-out infinite}
.cerveau-y.pret .cerveau-repli{display:none}
.cerveau-halo{width:150px;height:18px;margin-top:-26px;border-radius:50%;background:radial-gradient(closest-side,rgb(36 87 167 / .28),rgb(114 217 228 / .18) 55%,transparent);animation:halo 4s ease-in-out infinite}
.cerveau-legende{margin:6px 0 0;display:grid;text-align:center;color:var(--brand-primary)}
.cerveau-legende span{grid-area:1/1;opacity:0;transition:opacity .35s}
.console[data-etape="0"] .l1,.console[data-etape="1"] .l1,.console[data-etape="2"] .l2,.console[data-etape="3"] .l3,.console[data-etape="4"] .l4{opacity:1}
@keyframes lev{50%{transform:translateY(-10px)}}
@keyframes halo{50%{transform:scale(.82);opacity:.7}}

/* Les élèves */
.eleves{list-style:none;margin:0;padding:0;display:grid;gap:12px;justify-self:end;width:min(100%,380px)}
.eleve{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--surface-default);border:1px solid var(--border-subtle);box-shadow:0 6px 18px -14px rgb(23 43 70 / .3);
 transition:opacity .45s,transform .5s var(--ressort),border-color .4s,box-shadow .4s}
.eleve img{border-radius:50%;background:var(--brand-primarySoft);flex:none}
.eleve b{display:block;font-size:16px}.eleve small{display:block;font-size:13px;color:var(--text-secondary);line-height:1.3}
.eleve small strong{font-weight:600;color:var(--text-primary)}
.console[data-etape="2"] .eleve.non small strong,.console[data-etape="3"] .eleve.non small strong,.console[data-etape="4"] .eleve.non small strong{color:var(--status-danger)}
.eleve>div{min-width:0;margin-right:auto}
.verdict{display:grid;flex:none}
.verdict em{grid-area:1/1;justify-self:end;font-style:normal;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:99px;opacity:0;transform:scale(.8);transition:opacity .3s,transform .4s var(--ressort)}
.v-prevenu{background:var(--brand-primarySoft);color:var(--brand-primary)}
.v-pris{background:var(--brand-primary);color:var(--text-inverse);box-shadow:.12em .12em 0 var(--brand-accent)}
.v-ecarte{background:var(--surface-page);color:var(--text-secondary)}
.v-trop-tard{background:var(--surface-page);color:var(--text-secondary)}
.console[data-etape="2"] .eleve.non,.console[data-etape="3"] .eleve.non,.console[data-etape="4"] .eleve.non{opacity:.45;transform:translateX(10px)}
.console[data-etape="2"] .v-ecarte,.console[data-etape="3"] .v-ecarte,.console[data-etape="4"] .v-ecarte,
.console[data-regle="premier"][data-etape="2"] .v-prevenu,
.console[data-regle="ordre"][data-etape="2"] [data-gagnant] .v-premier,.console[data-regle="ordre"][data-etape="2"] .eleve.oui:not([data-gagnant]) .v-ensuite{opacity:1;transform:none}
.v-premier{background:var(--brand-primarySoft);color:var(--brand-primary)}.v-ensuite,.v-pas-besoin{background:var(--surface-page);color:var(--text-secondary)}
.console[data-regle="premier"][data-etape="2"] .eleve.oui,.console[data-regle="ordre"][data-etape="2"] [data-gagnant]{border-color:var(--brand-primary)}
.console[data-etape="3"] [data-gagnant] .v-pris,.console[data-etape="4"] [data-gagnant] .v-pris,
.console[data-regle="premier"][data-etape="3"] .eleve.oui:not([data-gagnant]) .v-trop-tard,.console[data-regle="premier"][data-etape="4"] .eleve.oui:not([data-gagnant]) .v-trop-tard,
.console[data-regle="ordre"][data-etape="3"] .eleve.oui:not([data-gagnant]) .v-pas-besoin,.console[data-regle="ordre"][data-etape="4"] .eleve.oui:not([data-gagnant]) .v-pas-besoin{opacity:1;transform:none}
.console[data-etape="3"] [data-gagnant],.console[data-etape="4"] [data-gagnant]{border-color:var(--brand-primary);transform:translateX(-8px) scale(1.03);box-shadow:var(--shadow-saphir)}


/* La frise des quatre étapes : une piste qui se remplit, un repère par étape (icône, heure, titre).
   Elle suit l'animation ; chaque étape se rejoue d'un clic. --avance (0 à 1) est réglée par heure.js. */
.rail{--avance:0;list-style:none;margin:28px 0 0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rail::before,.rail::after{content:"";position:absolute;top:27px;left:calc(12.5% - 8px);right:calc(12.5% - 8px);height:4px;border-radius:9px;background:var(--border-subtle)}
.rail::after{background:linear-gradient(90deg,var(--brand-primary),var(--brand-primary) 85%,var(--brand-accent));transform-origin:left;transform:scaleX(var(--avance));transition:transform .9s var(--sortie)}
.rail li{position:relative;z-index:1}
.rail button{width:100%;height:100%;display:grid;align-content:start;justify-items:center;text-align:center;gap:6px;padding:0 6px 18px;border:0;background:none;cursor:pointer;border-radius:20px}
.rail-point{position:relative;display:grid;place-items:center;width:58px;height:58px;margin-bottom:6px;border-radius:50%;background:var(--surface-default);border:2px solid var(--border-subtle);color:var(--text-secondary);
 transition:background .35s,border-color .35s,color .35s,transform .45s var(--ressort),box-shadow .35s}
.rail-point svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1;transition:opacity .25s,transform .35s var(--ressort)}
.rail-point .rail-coche{opacity:0;transform:scale(.4);stroke-width:2.8}
.rail-heure{display:inline-flex;gap:6px;font:600 13px Lexend;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.rail-n{color:var(--brand-primary)}
.rail b{font-size:17px;line-height:1.25;color:var(--text-primary)}
.rail button:hover .rail-point{border-color:var(--brand-primary);color:var(--brand-primary);transform:translateY(-3px)}
/* étape faite : pastille saphir cochée */
.rail button.fait .rail-point{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
.rail button.fait .rail-point svg:first-child{opacity:0;transform:scale(.4)}
.rail button.fait .rail-coche{opacity:1;transform:none}
/* étape en cours : saphir, ombre glacier décalée (comme les mots-clés du site) et une onde qui respire */
.rail button[aria-current="step"] .rail-point{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;transform:scale(1.12);box-shadow:4px 4px 0 var(--brand-accent)}
.rail button[aria-current="step"] .rail-point::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--brand-accent);animation:onde 1.6s ease-out infinite}
.rail button[aria-current="step"] b{color:var(--brand-primary)}
@keyframes onde{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}

/* ---------- Tablette et téléphone : la console se lit de haut en bas, sans liens dessinés ---------- */
@media (max-width:980px){
 .console-scene{grid-template-columns:1fr;gap:20px;padding:28px 16px 24px;justify-items:center}
 .lecon-annulee,.eleves{justify-self:center;width:min(100%,420px);max-width:none}
 .cerveau-y{width:190px}
 .cerveau-halo{width:110px;margin-top:-18px}
 .liens{display:none}
 .eleves{grid-template-columns:1fr 1fr;gap:10px}
 .eleve{flex-wrap:wrap;gap:8px 10px;padding:10px}
 .eleve img{width:32px;height:32px}
 .verdict{flex-basis:100%}
 .verdict em{justify-self:start}
 .console[data-etape="2"] .eleve.non,.console[data-etape="3"] .eleve.non,.console[data-etape="4"] .eleve.non{transform:none}
 .console[data-etape="3"] [data-gagnant],.console[data-etape="4"] [data-gagnant]{transform:scale(1.02)}
 .console[data-etape="1"] .lecon-annulee{transform:none}
 .rail{grid-template-columns:1fr;gap:0;margin-top:22px}
 .rail::before,.rail::after{top:29px;bottom:29px;left:27px;right:auto;width:4px;height:auto}
 .rail::after{transform-origin:top;transform:scaleY(var(--avance))}
 .rail button{grid-template-columns:58px 1fr;justify-items:start;text-align:left;column-gap:16px;row-gap:2px;padding:0 0 18px}
 .rail-point{grid-row:1/4;margin:0}
 .aiguillage::before{right:-40vw;top:120px;width:120vw}
}
/* Téléphone : tout tient sur à peu près un écran ; la leçon passe en une ligne, le Y rétrécit, les élèves en deux colonnes. */
@media (max-width:520px){
 .console{border-radius:24px;margin-top:32px}
 .console-barre{gap:10px;padding:10px 14px}
 .console-sep,.console-quand{display:none}
 .console-direct,.console-titre{white-space:nowrap}
 .console-titre{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis}
 .console-rejouer{font-size:0;gap:0;padding:8px}
 .console-scene{gap:6px;padding:18px 12px 16px}
 .lecon-annulee{padding:14px 16px;border-radius:18px;width:100%}
 .lecon-heure{margin:10px 0 8px}.lecon-heure b{font-size:30px}
 .lecon-pied{margin-top:10px;padding-top:8px}
 .console-chrono{font-size:12.5px;padding:4px 10px}.console-exemple{display:none}
 .console-titre{display:none}
 .console-chrono{margin-right:auto}
 .cerveau{gap:0}
 .cerveau-y{width:150px}
 .cerveau-halo{width:84px;height:12px;margin-top:-16px}
 .cerveau-legende{margin:2px 0 4px}
 .eleves{grid-template-columns:1fr 1fr;gap:8px}
 .eleve{display:grid;grid-template-columns:auto 1fr;gap:6px 8px;padding:10px;border-radius:14px}
 .eleve img{width:28px;height:28px}
 .eleve b{font-size:14.5px}.eleve small{font-size:12px}
 .eleve>div{margin:0}
 .verdict{grid-column:1/-1}
 .verdict em{justify-self:start;font-size:12px}
 .rail b{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
 .cerveau-repli,.cerveau-halo{animation:none}
 .liens path.flux{animation:none!important}
 .rail::after,.rail-point{transition:none}
 .rail button[aria-current="step"] .rail-point::after,.console-direct i::after{animation:none}
 .lecon-annulee,.eleve,.verdict em,.lecon-statut span,.lecon-pied span,.qui{transition:none}
}

/* ---------- Comment Yodriv choisit : une phrase sous la console, le détail est dans les questions ---------- */
.choix{margin:24px 0 0;max-width:820px;font-size:15.5px;line-height:1.55;color:var(--text-secondary)}
.choix b{color:var(--text-primary)}
.choix a{color:var(--brand-primary);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---------- Les règles de l'auto-école, dans la console : on change et on voit l'effet sur place ----------
   Les quatre règles du logiciel (regles/src/reglages-heure-liberee.ts) : deux ouvertes, deux « bientôt ». */
.console-regles{padding:16px 20px 18px;border-bottom:1px solid var(--border-subtle);background:var(--surface-default)}
.console-regles-titre{margin:0 0 10px;font:600 12px Lexend;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.regles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.regle{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;row-gap:3px;padding:12px 14px;border-radius:16px;border:1.5px solid var(--border-subtle);background:var(--surface-default);text-align:left;font:inherit;color:inherit}
button.regle{cursor:pointer;transition:border-color var(--duration-normal),background var(--duration-normal),transform var(--duration-normal) var(--ressort),box-shadow var(--duration-normal)}
button.regle:hover{border-color:var(--brand-primary);transform:translateY(-2px)}
/* Les règles illustrées par les élèves eux-mêmes (piste B choisie par Abdellah le 4/11) : les visages du site et une pastille. */
.regle-av{position:relative;width:66px;height:42px;flex:none}
.regle-av img{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--brand-primarySoft);border:2px solid #fff;box-sizing:content-box}
.regle-av .moyen{opacity:.75}.regle-av .pale{opacity:.55}
.pastille-av{position:absolute;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;border:2px solid #fff;font-size:11px;font-weight:800;white-space:nowrap;line-height:1}
.p-saphir{background:var(--brand-primary);color:#fff}.p-glacier{background:var(--brand-accent);color:var(--text-primary)}.p-gris{background:var(--border-subtle);color:var(--text-secondary)}
.regle[aria-checked="true"] .regle-av img,.regle[aria-checked="true"] .pastille-av{border-color:var(--brand-primarySoft)}
.regle.bientot .regle-av img{filter:grayscale(1);opacity:.6}
.regle.bientot .pastille-av{border-color:var(--surface-page)}
.regle b{font-size:15px;line-height:1.25;padding-right:22px}
.regle.bientot{padding-top:26px}.regle.bientot b{padding-right:0}
.regle small{grid-column:1/-1;font-size:13px;line-height:1.4;color:var(--text-secondary);display:none}
.regle[aria-checked="true"] small{display:block}
.regle[aria-checked="true"]{border-color:var(--brand-primary);background:var(--brand-primarySoft);box-shadow:4px 4px 0 var(--brand-accent)}
.regle[aria-checked="true"]::after{content:"";position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;background:var(--brand-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.regle.bientot{border-style:dashed;background:var(--surface-page)}
.regle.bientot b,.regle.bientot small{color:var(--text-secondary)}
.regle-bientot{position:absolute;top:9px;right:10px;padding:2px 8px;border-radius:99px;background:var(--brand-accentSoft);color:var(--text-primary);font-size:11.5px;font-weight:600}
@media (max-width:980px){.regles{grid-template-columns:1fr 1fr}}
@media (max-width:520px){
 .console-regles{padding:12px 12px 14px}
 .regles{gap:8px}
 .regle{grid-template-columns:1fr;align-content:start;row-gap:6px;padding:10px;border-radius:14px}
 .regle b{padding-right:0}
 .regle[aria-checked="true"]::after{top:8px;right:8px}
 .regle b{font-size:13.5px}.regle small{font-size:12px}
 .regle.bientot small{display:none}
 .regle-bientot{position:static;grid-column:1/-1;justify-self:start;margin-top:2px}
 .regle.bientot b{padding-right:0}
}