/* SPDX-License-Identifier: GPL-3.0-or-later · © Florent « fls » Sautour */
:root{
  --fond:#0E1013;
  --verre:rgb(var(--sur) / .045);
  --verre-fort:rgb(var(--sur) / .075);
  --liseré:rgb(var(--sur) / .09);
  --texte:#ECEEF6;
  --attenue:#9CA1B8;
  --discret:#6A7088;
  --violet:#8B5CF6;
  --cyan:#22D3EE;
  --rose:#F472B6;
  --vert:#5EE0A8;
  --sur:255 255 255;            /* couleur des surfaces translucides (verre, pastilles) : blanc sur fond sombre */
  --titre-haut:#FFFFFF;--fond-apercu:#0C0E18;--fond-gen:#0A0B14;--encre-badge:#0A0B14;--halos:1;--violet-clair:167 139 250;
  --theme-modes:"dark light";
  --sans:'Fira Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono','DejaVu Sans Mono',Consolas,monospace;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* variante claire (bascule clair / sombre, décision de fls, 2026-10-13) : sombre par défaut, choix partagé avec les
   cours (localStorage, clé fls-theme) ; mêmes rôles, valeurs adaptées au fond clair */
:root[data-theme="light"]{
  --fond:#F4F2ED;--texte:#151829;--attenue:#525866;--discret:#737987;
  --violet:#6D3FE0;--cyan:#0C8AA3;--rose:#C2307C;--vert:#13895A;
  --sur:20 24 52;
  --titre-haut:#151829;--fond-apercu:#E6E8F2;--fond-gen:#ECEEF6;--encre-badge:#0A0B14;--halos:.45;--violet-clair:109 63 224;
  color-scheme:light;
}
/* bouton de bascule, dans l'en-tête */
.bascule{font:inherit;font-size:14px;color:var(--attenue);background:var(--verre);border:1px solid var(--liseré);border-radius:999px;height:36px;padding:0 14px 0 12px;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background .2s,color .2s}
.bascule:hover,.bascule:focus-visible{background:var(--verre-fort);color:var(--texte)}
.bascule:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.bascule svg{width:17px;height:17px}
:root[data-theme="dark"] .bascule .lune,:root[data-theme="light"] .bascule .soleil{display:none}
html.theme-fondu,html.theme-fondu *{transition:background-color .3s,color .3s,border-color .3s!important}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--fond);color:var(--texte);font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.55;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}

/* ---------- halos ---------- */
.halos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:var(--halos)}
.halos span{position:absolute;border-radius:50%;filter:blur(90px);opacity:0;animation:allume 1.6s ease-out forwards}
.halos .h1{width:62vw;height:62vw;max-width:900px;max-height:900px;right:-18vw;top:-26vw;background:radial-gradient(circle,rgba(139,92,246,.55),rgba(139,92,246,0) 68%)}
.halos .h2{width:52vw;height:52vw;max-width:760px;max-height:760px;left:-20vw;top:38vh;background:radial-gradient(circle,rgba(34,211,238,.32),rgba(34,211,238,0) 68%);animation-delay:.25s}
.halos .h3{width:34vw;height:34vw;max-width:520px;max-height:520px;left:38vw;top:8vh;background:radial-gradient(circle,rgba(244,114,182,.18),rgba(244,114,182,0) 70%);animation-delay:.5s}
@keyframes allume{to{opacity:1}}
.halos::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgb(var(--sur) / .06) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 70%)}

/* ---------- en-tête ---------- */
.entete,main,.pied{position:relative;z-index:1;width:min(1360px,100% - 48px);margin:0 auto}
.entete{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:18px 0 0}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:500}
.marque .point{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--cyan));box-shadow:0 0 16px rgba(139,92,246,.8)}
.marque .surnom{font-family:var(--mono);font-weight:400;color:var(--attenue)}

/* ---------- hero ---------- */
.hero{padding:0 0 4vh}
.hero h1{font-weight:300;font-size:clamp(32px,4.4vw,58px);line-height:1.02;letter-spacing:-.03em;margin:0;text-wrap:balance;
  background:linear-gradient(180deg,var(--titre-haut) 30%,color-mix(in srgb,var(--texte) 55%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
.intro{font-size:clamp(18px,2vw,21px);color:var(--attenue);margin:16px 0 36px;font-weight:300}

.classes{display:flex;flex-wrap:wrap;gap:10px}
.classes button{font:inherit;font-size:16px;color:var(--texte);background:var(--verre);border:1px solid var(--liseré);border-radius:999px;padding:11px 20px 11px 22px;cursor:pointer;display:flex;align-items:center;gap:12px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .2s,border-color .2s}
.classes button:hover{background:var(--verre-fort)}
.classes button .nb{font-family:var(--mono);font-size:13px;color:var(--attenue);min-width:20px;height:22px;padding:0 7px;border-radius:999px;background:rgb(var(--sur) / .07);display:inline-flex;align-items:center;justify-content:center}
.classes button[aria-pressed="true"]{background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(34,211,238,.18));border-color:rgb(var(--violet-clair) / .55)}
.classes button[aria-pressed="true"] .nb{color:var(--texte);background:rgb(var(--sur) / .14)}
button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---------- classe courante ---------- */
.classe{padding-bottom:80px;border-top:1px solid var(--liseré)}
/* modules : sous-menu de la classe, juste sous les pastilles de classe, plus discret */
.modules{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.modules[hidden]{display:none}
.modules button{font:inherit;font-size:14.5px;color:var(--attenue);background:transparent;border:1px solid var(--liseré);border-radius:999px;padding:6px 12px 6px 14px;cursor:pointer;display:flex;align-items:center;gap:9px;transition:color .2s,background .2s,border-color .2s}
.modules button:hover{color:var(--texte);background:var(--verre)}
.modules .point{width:7px;height:7px;border-radius:50%;background:var(--m,linear-gradient(135deg,var(--violet),var(--cyan)));flex:none}
.modules .nb{font-family:var(--mono);font-size:12px;color:var(--discret)}
.modules button[aria-pressed="true"]{color:var(--texte);background:var(--verre-fort);border-color:rgb(var(--violet-clair) / .45)}
.modules button[aria-pressed="true"] .nb{color:var(--attenue)}
.theme{margin-top:36px}
.theme h3{font-weight:500;font-size:19px;margin:0 0 18px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;color:var(--texte)}
.theme h3::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--violet),var(--cyan))}
.theme h3 small{font-weight:400;color:var(--discret);font-size:15px}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:20px}

/* ---------- cartes ---------- */
.carte{position:relative;display:flex;flex-direction:column;background:var(--verre);border:1px solid var(--liseré);border-radius:20px;padding:10px;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgb(var(--sur) / .06);transition:border-color .25s,background .25s}
.carte.dispo:hover{border-color:rgb(var(--violet-clair) / .45);background:var(--verre-fort)}
.apercu{position:relative;aspect-ratio:16/9;border-radius:13px;overflow:hidden;background:var(--fond-apercu);isolation:isolate}
.apercu iframe{position:absolute;left:0;top:0;width:1280px;height:720px;border:0;transform-origin:0 0;pointer-events:none;background:var(--fond-apercu)}
.apercu img{width:100%;height:100%;object-fit:cover;display:block}
.apercu .voile{position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 1px rgb(var(--sur) / .06);border-radius:13px;background:linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--fond) 35%,transparent))}
.apercu .niveau{position:absolute;z-index:3;left:12px;top:12px;font-size:13px;font-weight:600;letter-spacing:.02em;border-radius:999px;padding:3px 12px;color:var(--fond-apercu);background:color-mix(in srgb,var(--texte) 88%,transparent);box-shadow:0 2px 10px rgb(0 0 0 / .25)}
.carte.dispo .apercu{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.carte.dispo:hover .apercu{transform:translateY(-3px)}
/* miniature générée (cours sans diaporama) */
.gen{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px 20px;background:var(--fond-gen);overflow:hidden}
.gen::before{content:"";position:absolute;width:75%;aspect-ratio:1;right:-22%;top:-45%;border-radius:50%;background:radial-gradient(circle,var(--c) 0,transparent 68%);opacity:.5;filter:blur(20px)}
.gen b{position:relative;font-weight:300;font-size:21px;line-height:1.1;letter-spacing:-.01em;color:color-mix(in srgb,var(--texte) 80%,transparent)}
.gen i{position:relative;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--attenue);margin-bottom:6px}

.corps{padding:14px 8px 6px;display:flex;flex-direction:column;gap:8px;flex:1}
.badges{display:flex;flex-wrap:wrap;gap:6px;min-height:0}
.badge{font-size:13px;font-weight:500;border-radius:999px;padding:2px 10px;border:1px solid transparent}
.badge.nouveau{color:var(--encre-badge);background:linear-gradient(135deg,var(--cyan),#A5F3FC)}
.badge.maj{color:var(--rose);border-color:rgba(244,114,182,.45)}
.badge.duree{color:var(--attenue);border-color:var(--liseré)}
.badge.prepa{color:var(--attenue);background:rgb(var(--sur) / .05)}
.carte h4{margin:0;font-weight:500;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.carte h4 a{text-decoration:none}
.carte h4 a::after{content:"";position:absolute;inset:0;border-radius:20px;z-index:3}
.carte .resume{margin:0;color:var(--attenue);font-size:14.5px;line-height:1.5}
.carte.prepa h4{color:color-mix(in srgb,var(--texte) 75%,transparent)}
.annexes{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin-top:auto;padding-top:12px;position:relative;z-index:4}
.annexes a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:62px;padding:9px 6px;text-align:center;font-size:13.5px;line-height:1.15;text-decoration:none;color:var(--texte);border-radius:12px;background:rgb(var(--sur) / .05);border:1px solid var(--liseré);transition:background .2s,border-color .2s,transform .2s}
.annexes a:hover{background:rgb(var(--sur) / .1);border-color:rgb(var(--sur) / .2);transform:translateY(-1px)}
/* au-delà de 4 liens (cas rare), retour à la ligne en colonnes égales */
.annexes:has(>a:nth-child(5)){grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
.annexes svg{width:19px;height:19px;flex:none}
.annexes .lab svg{color:var(--cyan)}.annexes .pdf svg{color:var(--rose)}.annexes .solution svg{color:var(--vert)}.annexes .other svg{color:var(--violet)}.annexes .video svg{color:var(--vert)}

.vide{margin-top:44px;padding:40px;border:1px dashed var(--liseré);border-radius:20px;color:var(--attenue);text-align:center}

.pied{border-top:1px solid var(--liseré);padding:24px 0 40px;color:var(--discret);font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* apparition unique au chargement */
.hero h1,.intro,.classes{animation:monte .9s cubic-bezier(.2,.8,.2,1) both}
.intro{animation-delay:.12s}.classes{animation-delay:.22s}
@keyframes monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  body{font-size:16px}
  .entete{padding:14px 0 0}
  .hero{padding:0 0 4vh}
  .intro{margin:14px 0 28px}
  .classes button{padding:9px 14px 9px 16px;font-size:15px}
  .modules{gap:6px;margin-top:10px}
  .modules button{padding:5px 10px 5px 12px;font-size:14px}
  .theme{margin-top:34px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.halos span{opacity:1}}

.pied .licence a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pied .surnom{font-family:var(--mono);font-weight:400;color:var(--attenue)}
.pied .credit{flex-basis:100%;font-size:13px}
.pied a.chiffres{color:inherit;text-decoration:none;border-bottom:1px dotted color-mix(in srgb,var(--attenue) 45%,transparent)}
.pied a.chiffres:hover{color:var(--attenue)}

/* fond sombre « ardoise » (choix de fls, 2026-10-13) : pendant sombre du lin, mêmes dessins (pistes de circuit, pastilles,
   trame de points, lueurs bleu canard et violette) sur un graphite neutre ; remplace les grands halos */
.halos{display:none}
body{background:
  radial-gradient(50vw 44vw at 94% -4%,rgba(34,211,238,.11) 0,transparent 62%),
  radial-gradient(46vw 40vw at 0% 70%,rgba(139,92,246,.13) 0,transparent 62%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' fill='none' stroke='%23A3ABB9' stroke-opacity='.14' stroke-width='1.1'%3E%3Cpath d='M0 60h90l24 24h70M184 84v80l24 24h112M40 320v-90l36-36h60M136 194h50M250 0v40l-24 24M320 250h-60l-24-24'/%3E%3Ccircle cx='184' cy='84' r='2.6'/%3E%3Ccircle cx='136' cy='194' r='2.6'/%3E%3Ccircle cx='226' cy='64' r='2.6'/%3E%3Ccircle cx='236' cy='226' r='2.6'/%3E%3C/svg%3E") 0 0/320px 320px,
  radial-gradient(rgba(200,206,218,.05) 1px,transparent 1.2px) 0 0/16px 16px,
  #0E1013;background-attachment:fixed}

/* fond clair « lin » (choix de fls, 2026-10-13) : papier lin grège, pistes de circuit ardoise fines et espacées sur une
   trame de points, lueurs bleu canard et violette ; cartes en verre dépoli blanc avec une ombre douce */
:root[data-theme="light"]{
  --verre:rgba(255,255,255,.62);--verre-fort:rgba(255,255,255,.86);--liseré:rgba(20,24,52,.08)}
:root[data-theme="light"] body{background:
  radial-gradient(50vw 44vw at 94% -4%,rgba(12,138,163,.14) 0,transparent 62%),
  radial-gradient(46vw 40vw at 0% 70%,rgba(109,63,224,.09) 0,transparent 62%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' fill='none' stroke='%237C8696' stroke-opacity='.28' stroke-width='1.1'%3E%3Cpath d='M0 60h90l24 24h70M184 84v80l24 24h112M40 320v-90l36-36h60M136 194h50M250 0v40l-24 24M320 250h-60l-24-24'/%3E%3Ccircle cx='184' cy='84' r='2.6'/%3E%3Ccircle cx='136' cy='194' r='2.6'/%3E%3Ccircle cx='226' cy='64' r='2.6'/%3E%3Ccircle cx='236' cy='226' r='2.6'/%3E%3C/svg%3E") 0 0/320px 320px,
  radial-gradient(rgba(82,88,102,.07) 1px,transparent 1.2px) 0 0/16px 16px,
  #F4F2ED;background-attachment:fixed}
:root[data-theme="light"] .carte,:root[data-theme="light"] .classes button,:root[data-theme="light"] .verre{
  box-shadow:0 1px 2px rgba(20,24,52,.04),0 8px 28px -12px rgba(40,30,110,.18)}