/* No Studio Docs : le synthé.
   Depuis le 3 novembre 2026, ce monde est celui des trois sites : engine/build-sites.mjs
   sert ce fichier à Docs, Courts et IA, sans rotation de teintes. Courts et IA posent
   ensuite leur propre feuille, pour ce qu'ils ont en propre. Il passe après style.css,
   cinema.css et audience.css, dont il reprend les variables. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&display=swap');

:root{
  --nuit:#0C1633;--nuit-2:#141F44;--nuit-3:#1E2B58;--trait:#2C3A6B;
  --blanc:#FFFFFF;--texte:#EEF1FB;--doux:#B4BEDD;--encre:#0C1633;
  --paper:var(--nuit);--ink:var(--texte);--blue:#FFD400;--line:var(--trait);--muted:var(--doux);
  --marge:clamp(16px,3.4vw,48px);--r:#FFD400;--r-trait:3px;
  --titre:'Barlow Semi Condensed','Arial Narrow',sans-serif;
  --sortie:cubic-bezier(.16,1,.3,1);
}
/* --blue est l'accent des feuilles partagées : il suit le rayon lui aussi. */
[data-rayon]{--blue:var(--r)}
[data-rayon=immersion]{--r:#FF6A52}
[data-rayon=portraits]{--r:#FF9EC7}
[data-rayon=societe]{--r:#8FB8FF}
[data-rayon=luttes]{--r:#FF4D4D}
[data-rayon=exploration]{--r:#D9A066}
[data-rayon=technologie]{--r:#F08CE0}
[data-rayon=voyage]{--r:#FF9F43}
[data-rayon=aventure]{--r:#5FE0B7}
[data-rayon=enquete]{--r:#FFD400}
[data-rayon=science]{--r:#4FD1E8}
[data-rayon=histoire]{--r:#7BE08F}
[data-rayon=idees]{--r:#C2AAFF}
[data-rayon=films]{--r:#EFE7D3}
[data-rayon=recommandes]{--r:#FFFFFF}

html{scrollbar-color:var(--trait) var(--nuit)}
body{background:var(--nuit);color:var(--texte);font-family:'Barlow',system-ui,sans-serif}
h1,h2,h3,.brand{font-family:var(--titre)}
::selection{background:#FFD400;color:var(--encre)}
input,select{caret-color:currentColor}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--r);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- En-tête : la seule grande surface blanche du site. --- */
body>header{--r:var(--encre);position:sticky;top:0;z-index:20;height:72px;margin:0;padding:0 max(var(--marge),calc((100vw - 1500px)/2 + var(--marge)));
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:32px;align-items:center;background:var(--blanc);color:var(--encre);border:0;max-width:none}
body>header .marque{padding:0;gap:2px;min-width:0}
body>header .brand{font-size:26px;font-weight:700;letter-spacing:.01em;color:var(--encre)}
body>header .brand-dot{font-size:26px;vertical-align:baseline;margin-left:0;letter-spacing:.01em;color:var(--encre)}
/* Le nom de l'univers se détache de NO STUDIO : un pavé à la couleur du site (--site, posée par build-sites.mjs). */
body>header .brand-dot.univers-nom{margin-left:.28em;padding:.06em .22em;border-radius:3px;background:var(--site,#FFD400);color:var(--encre);font-weight:600}
nav.univers{margin:0 0 0 -8px;gap:0;order:0;width:auto;padding:0;overflow:visible}
nav.univers a,nav.univers .ici{padding:2px 8px;font-size:13px;font-weight:500;letter-spacing:0;color:#4A5478;border-radius:3px}
nav.univers a:hover{background:#EEF0F7;color:var(--encre)}
nav.univers .ici{background:none;color:var(--encre);font-weight:600;text-decoration:underline;text-underline-offset:3px}
body>header nav:not(.univers){display:flex;align-items:center;gap:24px;font-size:16px;font-weight:500;min-width:0}
body>header nav:not(.univers) a{padding:0;white-space:nowrap}
body>header nav:not(.univers) a:after{display:none}
body>header nav:not(.univers) a:hover,body>header nav:not(.univers) a.active{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
/* Proposer est la seule action de la barre : le seul lien plein. */
body>header nav:not(.univers) a.nav-proposer{display:inline-block;flex:none;height:40px;line-height:40px;padding:0 14px;border-radius:3px;background:var(--blue);color:var(--encre);font-weight:600;text-decoration:none}
body>header nav:not(.univers) a.nav-proposer:hover,body>header nav:not(.univers) a.nav-proposer[aria-current]{background:var(--encre);color:var(--blanc);text-decoration:none}
.header-actions{gap:10px}
.header-actions .chip,.header-actions .login{height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:3px;background:#EEF0F7;border:0;color:var(--encre);font-size:15px;font-weight:600}
.header-actions .login{background:var(--encre);color:var(--blanc)}
.header-actions .chip:hover{background:#DDE1EE;color:var(--encre)}
.header-actions .login:hover{background:#27376F}

.recherche{position:relative;flex:1;max-width:560px;display:flex;align-items:center;height:44px;padding-left:14px;gap:10px;background:#EEF0F7;border-radius:3px;margin:0 auto}
.recherche svg{width:20px;height:20px;flex:none;fill:none;stroke:#4A5478;stroke-width:1.8;stroke-linecap:round}
.recherche input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--encre);font-size:16px;outline:0;padding-right:14px}
.recherche input::placeholder{color:#515B80;opacity:1}
.recherche input::-webkit-search-cancel-button{-webkit-appearance:none}
.recherche:focus-within{box-shadow:inset 0 0 0 2px var(--encre)}
.resultats{position:absolute;top:calc(100% + 8px);left:0;right:0;max-height:min(70vh,560px);overflow:auto;padding:8px;background:var(--blanc);color:var(--encre);border-radius:3px;box-shadow:0 18px 48px -8px #050A1Fb0}
.resultats h3{margin:10px 8px 6px;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#4A5478}
.resultats a{--r:var(--encre);display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:3px}
.resultats a:hover,.resultats a:focus-visible{background:#EEF0F7}
.resultats span{min-width:0}
.resultats strong{display:block;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resultats small{display:block;font-size:14px;color:#4A5478;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resultats .vignette{width:72px;aspect-ratio:16/9;object-fit:cover;border-radius:2px;flex:none}
.resultats-vide{margin:0;padding:12px 8px;font-size:15px;color:#4A5478}

/* --- Les rayons : le premier geste du site. --- */
.rayons{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:1500px;margin:0 auto;padding:22px var(--marge) 0}
.rayons a{display:block;padding:12px 16px 10px;background:var(--nuit-2);border-radius:3px 3px 0 0;font:600 24px/1.1 var(--titre);color:var(--texte);transition:background-color .15s,color .15s}
.rayons a:hover{background:var(--nuit-3)}
/* L'onglet ouvert change de forme, pas seulement de couleur : il devient plein,
   et se soude au filet qui court sur toute la page. */
.rayons a[aria-current]{background:var(--r);color:var(--encre)}
#app{min-height:calc(100vh - 210px)}
.docs-page{max-width:1500px;margin:0 auto;padding:0 var(--marge)}
.docs-page>:first-child{border-top:var(--r-trait) solid var(--r)}
.rayon-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:20px 0 24px}
.rayon-tete h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.rayon-tete p{margin:0;font-size:20px;line-height:1.4;max-width:62ch;color:var(--texte)}
.filtre{display:flex;align-items:center;gap:10px;flex:none;font-size:15px;color:var(--doux)}
.filtre select{height:42px;padding:0 34px 0 12px;font-size:16px;color:var(--texte);background:var(--nuit-2)!important;border:1px solid var(--trait);border-radius:3px;cursor:pointer}
.filtre select:hover{border-color:var(--doux)}

/* --- Le plan : une image pleine, barrée du nom de la personne. --- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plans.quatre{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.plan{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:var(--nuit-2);color:var(--encre)}
.plan-image{position:absolute;inset:0}
.plan-image:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0C1633a8 0%,#0C163300 46%)}
.plan-image img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(var(--zoom,1));transform-origin:50% var(--zoom-y,0%);transition:transform .6s var(--sortie)}
.plan:hover .plan-image img,.plan:focus-visible .plan-image img{transform:scale(calc(var(--zoom,1)*1.025))}
/* Feuilleter montre d'autres vignettes : le recadrage ne vaut que pour la vitrine. */
.plan.feuillette .plan-image img{transform:scale(1)}
.plan-compte{position:absolute;top:10px;right:10px;padding:3px 9px;background:var(--nuit);color:var(--texte);border-radius:2px;font:600 15px/1.3 var(--titre);font-variant-numeric:tabular-nums}
/* Pourquoi une vignette est sur la face Recommandés (recommande.js) : en blanc, pour
   ne se confondre ni avec la durée ni avec la couleur du rayon. */
.plan-raison{position:absolute;z-index:1;top:10px;left:10px;padding:3px 9px;background:var(--blanc);color:var(--encre);border-radius:2px;font:600 14px/1.3 var(--titre);letter-spacing:.02em}
/* Où l'on en est quand on feuillette : un trait sur le haut de l'image. */
.plan.feuillette:before{content:'';position:absolute;z-index:2;top:0;left:0;width:100%;height:4px;background:var(--r);transform:scaleX(var(--feuille,0));transform-origin:left;transition:transform .16s var(--sortie)}

.synthe{position:absolute;left:0;bottom:16px;display:flex;align-items:stretch;max-width:calc(100% - 16px)}
/* YouTube dessine les avatars pour un cercle : on les garde ronds, posés sur un
   carré blanc qui tient la géométrie du bandeau. */
.synthe-portrait{display:flex;flex:none;align-items:center;padding:3px;background:var(--blanc)}
.avatar-chaine{display:block;flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--nuit-3)}
.avatar-chaine.vide{background:var(--r)}
.synthe-texte{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.synthe-nom{max-width:100%;padding:4px 14px 2px;background:var(--blanc);color:var(--encre);font:700 clamp(21px,1.9vw,27px)/1.12 var(--titre);text-transform:uppercase;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.synthe-fonction{max-width:100%;padding:3px 14px;background:var(--r);color:var(--encre);font:600 14px/1.2 var(--titre);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.plans.quatre .synthe-nom{font-size:20px;padding:3px 10px 1px}
.plans.quatre .synthe-fonction{font-size:13px;padding:2px 10px}
.plans.quatre .avatar-chaine{width:44px;height:44px}

/* Le bandeau entre comme à l'antenne, de gauche à droite, à l'ouverture d'un
   rayon seulement : une entrée, pas un effet de survol. */
@media(prefers-reduced-motion:no-preference){
  .plans.ouverture .synthe{animation:essuyage .5s var(--sortie) both;animation-delay:calc(var(--i,0)*45ms + 80ms)}
  @keyframes essuyage{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}

/* --- Les vidéos --- */
.bloc{padding-top:44px}
.bloc>h2{margin:0 0 16px;font-size:30px;font-weight:600;line-height:1.1;letter-spacing:0;color:var(--texte)}
.videos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 18px}
.video{position:relative;min-width:0}
.video-image{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:var(--nuit-2)}
.video-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--sortie)}
.video-image:hover img{transform:scale(1.025)}
.video-duree{position:absolute;right:8px;bottom:8px;padding:2px 7px;background:var(--nuit);color:var(--texte);border-radius:2px;font:600 15px/1.3 var(--titre);font-variant-numeric:tabular-nums}
.video-texte{padding:10px 38px 0 0}
.video h3{margin:0 0 4px;font-size:20px;font-weight:600;line-height:1.2;letter-spacing:0;color:var(--texte);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.video a:hover h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.video p{display:flex;gap:10px;margin:0 0 6px;font-size:15px;color:var(--doux)}
.video p span+span:before{content:'·';margin-right:10px}
.video-garde{position:absolute;right:0;top:0;margin-top:calc(56.25% + 8px);width:32px;height:32px;display:grid;place-items:center;border-radius:3px;color:var(--doux)}
.video-garde svg,.primary svg,.secondary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.primary svg.plein{fill:currentColor;stroke:none}
.video-garde:hover{background:var(--nuit-2);color:var(--texte)}
.video-garde[aria-pressed=true]{color:var(--r)}
.comprehension-badge,.language-badge{padding:2px 7px;border-radius:2px;font-size:14px}
.language-badge,.comprehension-badge.dialogue_free,.comprehension-badge.original,.comprehension-badge.written{color:var(--texte);border-color:var(--trait)}
.card-play svg,.save svg,.text-link svg,.hero-details svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}

/* --- La page d'une chaîne --- */
/* La page s'ouvre comme un reportage : un plan large, et le nom qui s'y incruste. */
.chaine-plan{position:relative;display:block;border:0;padding:0;font:inherit;text-align:left;cursor:pointer;height:clamp(240px,44vh,440px);width:100%;overflow:hidden;border-radius:0 0 3px 3px;background:var(--nuit-2);color:var(--encre)}
.chaine-plan>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 26%;transition:transform .6s var(--sortie)}
.chaine-plan:hover>img{transform:scale(1.015)}
.chaine-lecture{position:absolute;z-index:1;top:12px;right:12px;display:flex;align-items:center;gap:8px;max-width:min(60%,520px);height:44px;padding:0 16px 0 14px;background:var(--r);color:var(--encre);border-radius:3px;font:700 19px/1.25 var(--titre)}
.chaine-lecture span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chaine-lecture small{flex:none;font:600 16px/1 var(--titre);opacity:.75;font-variant-numeric:tabular-nums}
.chaine-lecture svg{width:18px;height:18px;flex:none;fill:currentColor}
.chaine-plan:hover .chaine-lecture{background:var(--blanc)}
.chaine-plan:hover .chaine-lecture span{text-decoration:underline;text-underline-offset:3px}
.chaine-plan:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0C1633a8 0%,#0C163300 46%)}
.chaine-plan .synthe{z-index:1;bottom:24px}
/* Lancer une vidéo se fait d'un clic, depuis la page du vidéaste : un rond de lecture au centre du
   plan, une pastille « Regarder » sur chaque vignette, un triangle sur chaque étape du parcours. */
.plan-rond{position:absolute;z-index:1;left:50%;top:44%;width:84px;height:84px;margin:-42px 0 0 -42px;display:grid;place-items:center;border-radius:50%;background:#0C1633b8;box-shadow:0 0 0 2px var(--r);transition:background-color .15s,transform .2s var(--sortie)}
.plan-rond svg{width:34px;height:34px;margin-left:5px;fill:var(--r)}
.chaine-plan:hover .plan-rond,.chaine-plan:focus-visible .plan-rond{background:var(--r);transform:scale(1.06)}
.chaine-plan:hover .plan-rond svg,.chaine-plan:focus-visible .plan-rond svg{fill:var(--encre)}
button.video-image{width:100%;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.video-lire{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 9px;border-radius:3px;background:var(--r);color:var(--encre);font:700 16px/1 var(--titre);transition:background-color .15s}
.video-lire svg{width:13px;height:13px;fill:currentColor}
.video-image:hover .video-lire,.video-image:focus-visible .video-lire{background:var(--blanc)}
.etape-lire{position:absolute;z-index:1;right:6px;bottom:6px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--r)}
.etape-lire svg{width:12px;height:12px;margin-left:2px;fill:var(--encre)}
.etape:hover .etape-lire{background:var(--blanc)}
.chaine-vitrine{display:none;border:0;background:none;padding:0;width:100%;text-align:left;cursor:pointer}
.chaine-info{grid-area:info;display:flex;justify-content:space-between;align-items:flex-start;gap:32px;padding-top:20px}

/* Le plan et son parcours se lisent comme un lecteur et sa liste de lecture : ce
   qu'on lance à gauche, ce qui suivra à droite, dans l'ordre. */
.chaine-tete{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"plan" "vitrine" "info"}
.chaine-tete>.chaine-plan{grid-area:plan}
.chaine-tete>.chaine-vitrine{grid-area:vitrine}
.chaine-tete.guidee{grid-template-columns:minmax(0,1fr) minmax(340px,31%);grid-template-areas:"plan parcours" "info info"}
.guidee .chaine-plan{height:auto;min-height:clamp(240px,44vh,440px);border-radius:0 0 0 3px}
.guidee .chaine-plan>img{position:absolute;inset:0}
.chaine-etape{position:absolute;z-index:1;top:0;left:0;display:flex;align-items:center;gap:12px;padding-right:14px;background:var(--nuit);color:var(--texte);font:600 18px/1 var(--titre)}
.chaine-etape b{padding:6px 12px 5px;background:var(--r);color:var(--encre);font:700 22px/1.2 var(--titre)}
.chaine-play{position:absolute;z-index:1;top:12px;right:12px;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 14px;border-radius:3px;background:var(--r);color:var(--encre);font:700 19px/1 var(--titre)}
.chaine-play svg{width:18px;height:18px;fill:currentColor}
.chaine-play small{font:600 16px/1 var(--titre);opacity:.75;font-variant-numeric:tabular-nums}
.chaine-plan:hover .chaine-play{background:var(--blanc)}

.chaine-parcours{grid-area:parcours;display:flex;flex-direction:column;padding:18px 16px 16px;background:var(--nuit-2);border-radius:0 0 3px 0}
.chaine-parcours h2{margin:0 0 4px;padding:0 4px;font-size:26px;font-weight:600;line-height:1.1;letter-spacing:0;color:var(--texte)}
.chaine-parcours>p{margin:0 0 12px;padding:0 4px;font-size:15px;line-height:1.35;color:var(--doux)}
.chaine-parcours ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:etape}
.chaine-parcours li{counter-increment:etape}
.chaine-parcours .etape{display:grid;width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:center;padding:6px;border-radius:3px}
.chaine-parcours .etape:hover{background:var(--nuit-3)}
.chaine-parcours .etape:hover strong{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* L'étape à lancer s'allume, et le survol du plan l'allume davantage : c'est la même vidéo. */
.chaine-parcours .maintenant .etape{background:var(--nuit-3);box-shadow:inset 3px 0 0 var(--r)}
.chaine-tete:has(.chaine-plan:hover) .maintenant .etape{background:var(--trait)}
.etape-image{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:var(--nuit)}
.etape-image img{display:block;width:100%;height:100%;object-fit:cover}
.etape-image:before{content:counter(etape);position:absolute;z-index:1;left:0;top:0;min-width:26px;padding:2px 7px 1px;background:var(--r);color:var(--encre);font:700 17px/1.2 var(--titre);text-align:center}
.etape-image .progression{position:absolute;left:0;right:0;bottom:0;height:3px;background:#00000066}
.etape-image .progression>span{display:block;height:100%;background:var(--r)}
.etape-texte{display:grid;gap:3px;min-width:0}
.etape-texte small{font:600 13px/1.2 var(--titre);letter-spacing:.05em;text-transform:uppercase;color:var(--doux)}
.maintenant .etape-texte small{color:var(--r)}
.etape-texte strong{font:600 18px/1.2 var(--titre);color:var(--texte);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.etape-texte span{font-size:14px;color:var(--doux);font-variant-numeric:tabular-nums}
.chaine-parcours .parcours-suite{margin:auto 0 0;padding:12px 4px 0;font-size:14px}
.synthe.grand .avatar-chaine{width:96px;height:96px}
.synthe.grand .synthe-portrait{padding:6px}
.synthe.grand .synthe-nom{font-size:clamp(34px,4.4vw,60px);padding:8px 22px 4px}
.synthe.grand .synthe-fonction{font-size:19px;padding:5px 22px}
.chaine-actions{display:flex;gap:10px;flex:none}
.chaine-actions .primary,.chaine-actions .secondary{height:44px;padding:0 16px;gap:8px;border-radius:3px;font-size:16px;font-weight:600}
.chaine-actions .primary{background:var(--r);border-color:var(--r);color:var(--encre)}
.chaine-actions .secondary{background:none;border:1px solid var(--doux);color:var(--texte)}
.chaine-actions .secondary:hover{background:var(--nuit-2)}
.chaine-phrase{margin:0 0 6px;max-width:62ch;font-size:20px;line-height:1.4}
.chaine-mesure{margin:0 0 22px;font-size:16px;color:var(--doux);font-variant-numeric:tabular-nums}
.chaine-suivi{margin:-14px 0 22px;font-size:16px;color:var(--doux)}
.chaine-autres{margin:36px 0 16px;font-size:30px;font-weight:600;line-height:1.1;letter-spacing:0;color:var(--texte)}
.chaine-reste{margin:22px 0 0;font-size:16px}
.chaine-reste a{display:inline-flex;align-items:center;gap:6px;color:var(--doux);text-decoration:underline;text-underline-offset:3px}
.chaine-reste a:hover{color:var(--texte)}
.chaine-reste svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sujets{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px}
.sujets button{height:36px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;background:var(--nuit-2);border-radius:3px;font-size:15px;font-weight:500;color:var(--texte)}
.sujets button small{font-size:14px;color:var(--doux);font-variant-numeric:tabular-nums}
.sujets button:hover{background:var(--nuit-3)}
.sujets button[aria-pressed=true]{background:var(--r);color:var(--encre)}
.sujets button[aria-pressed=true] small{color:var(--encre)}

/* --- Noter une chaîne --- */
.chaine-note{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:0 0 22px;padding:14px 16px;background:var(--nuit-2);border-radius:3px}
.note-resume{display:flex;align-items:baseline;gap:10px;flex:none;color:var(--doux);font-size:16px}
.note-resume strong{font:700 28px/1 var(--titre);color:var(--texte);font-variant-numeric:tabular-nums}
.chaine-note>p{margin:0;font-size:16px;color:var(--doux)}
#note-chaine{display:grid;grid-template-columns:minmax(220px,420px) max-content;justify-content:start;gap:2px 16px;align-items:center;flex:1;min-width:0}
#note-chaine label{font-size:15px;color:var(--doux)}
#note-chaine output{font-weight:600;color:var(--texte);font-variant-numeric:tabular-nums}
#note-chaine input{display:block;width:100%;margin:6px 0 0;accent-color:var(--r)}
#note-chaine button{grid-column:2;grid-row:1/3;height:40px;padding:0 14px;border-radius:3px}
.note-legende{display:flex;justify-content:space-between;font-size:14px;color:var(--doux)}
#note-chaine [role=status]{grid-column:1/-1;margin:0;font-size:15px;color:#FFB3A6}
#note-chaine [role=status]:empty{display:none}

/* --- La page de chacun --- */
.rayon-tete h1.titre-visible{position:static;width:auto;height:auto;overflow:visible;clip-path:none;margin:0 0 6px;font-size:clamp(34px,4vw,52px);font-weight:600;line-height:1.05;letter-spacing:0}
.pour-tete{align-items:center}
.pour-tete p{font-size:18px;color:var(--doux)}
.pour-tete .primary,.pour-tete .secondary{flex:none;height:44px;padding:0 16px;font-size:16px;font-weight:600}
.bilan{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0;font-size:18px;color:var(--doux)}
.bilan strong{font:600 24px/1 var(--titre);color:var(--texte);font-variant-numeric:tabular-nums}
.bloc-note{margin:-8px 0 14px;font-size:16px;color:var(--doux)}
.video-raison{display:block!important;margin:0 0 6px;font-size:15px;color:var(--doux)}

/* --- Proposer et juger une chaîne --- */
#proposition-chaine{max-width:720px;margin:0 0 40px}
#chaine-erreur{color:#FFB3A6;font-size:15px}
.juger-chaine{padding:18px;margin:0 0 18px;background:var(--nuit-2);border-radius:3px}
.juger-tete{display:flex;gap:14px;align-items:flex-start;margin:0 0 16px}
.juger-tete .avatar-chaine{width:64px;height:64px}
.juger-tete h3{margin:0 0 4px;font-size:26px;font-weight:700;line-height:1.1;text-transform:uppercase}
.juger-tete p{margin:0;max-width:70ch;font-size:16px;line-height:1.45}
.juger-chaine .videos{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px}
.juger-chaine .video-texte{padding-right:0}
.juger-chaine .bloc-note{margin:0 0 8px}
.juger-chaine-form{max-width:420px}
.retrait{max-width:70ch;margin:0 0 14px;padding:10px 14px;border:1px solid var(--trait);border-radius:3px;font-size:16px;color:var(--doux)}

/* --- L'annuaire --- */
.annuaire h2 a{display:inline-block;padding:3px 12px 1px;background:var(--r);color:var(--encre);border-radius:2px}
.annuaire ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 18px}
.annuaire li a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:3px}
.annuaire li a:hover{background:var(--nuit-2)}
.annuaire .avatar-chaine{width:48px;height:48px}
.annuaire span:not(.avatar-chaine){flex:1;min-width:0}
.annuaire strong{display:block;font:600 21px/1.15 var(--titre);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.annuaire small{display:block;font-size:15px;color:var(--doux);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.annuaire em{font-style:normal;font:600 17px var(--titre);color:var(--doux);font-variant-numeric:tabular-nums}

/* --- À suivre, sous le lecteur, quand la vidéo se termine --- */
.suite{margin:14px 0;padding-top:12px;border-top:var(--r-trait) solid var(--r)}
.suite h3{margin:0 0 8px;font:600 21px/1.1 var(--titre);color:var(--texte)}
.suite-video{display:grid;grid-template-columns:200px minmax(0,1fr) 44px;gap:16px;align-items:center;width:100%;min-height:0;padding:8px;background:var(--nuit-3);border:0;border-radius:3px;color:var(--texte);text-align:left;cursor:pointer}
.suite-video:hover{background:var(--trait)}
.suite-video:focus-visible{outline:2px solid var(--r);outline-offset:2px}
.suite-video .video-image{background:var(--nuit)}
.suite-texte{display:grid;gap:3px;min-width:0}
.suite-texte strong{font:600 22px/1.15 var(--titre);overflow-wrap:anywhere}
.suite-texte span{font-size:15px;line-height:1.3;color:var(--doux)}
.suite-lecture{display:grid;place-items:center;width:44px;height:44px;border-radius:3px;background:var(--r);color:var(--encre)}
.suite-lecture svg{width:20px;height:20px;fill:currentColor}
.suite-chaine{display:inline-block;margin-top:10px;font-size:15px;color:var(--doux);text-decoration:underline;text-underline-offset:3px}
.suite-chaine:hover{color:var(--texte)}

/* --- Ce que la page vidéo partage avec les autres sites --- */
.retour-chaine{display:inline-flex;margin:18px 0 8px;max-width:100%}
.retour-chaine .synthe{position:static;max-width:100%}
.retour-chaine:hover .synthe-nom{text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:1500px;margin:0 auto;padding:0 var(--marge)}
.primary,.secondary{border-radius:3px}
.primary{background:var(--r);border-color:var(--r);color:var(--encre)}
.detail-hero{border-radius:3px}
.doc-line a{color:var(--r);border-color:var(--trait)}
.comprehension[class]{border-left:1px solid var(--trait)}
.page-heading h1,.detail-layout h1{font-weight:600;letter-spacing:0;line-height:1.05}
.rating-panel,.comprehension,.empty{background:var(--nuit-2);border-radius:3px}
.chip{border-radius:3px;background:var(--nuit-2);border-color:var(--trait)}
dialog{background:var(--nuit-2);border-color:var(--trait);border-radius:3px}
body>footer{max-width:1500px;margin:64px auto 0;padding:24px var(--marge);border-color:var(--trait)}
body>footer .brand{color:var(--texte);font-size:22px;font-weight:700;letter-spacing:.01em}
#toast{background:var(--blanc);color:var(--encre);border-radius:3px}

@media(max-width:1180px){
  body>header{grid-template-columns:auto minmax(0,1fr) auto;gap:18px}
  .rayons a{padding:11px 12px 9px;font-size:21px}
  .plans.quatre,.videos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .annuaire ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .rayons{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  /* Recommandés, la porte d’entrée, prend sa rangée : les rayons restent en rangées pleines. */
  .rayons [data-rayon=recommandes]{grid-column:1/-1}
  /* Treize rayons ne font pas de rangées pleines, ni par quatre ni par trois : le
     dernier prend sa rangée, comme Recommandés en tête. */
  .rayons a:last-child{grid-column:1/-1}
  body>header{position:static;height:auto;padding-top:12px;padding-bottom:12px;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px}
  body>header nav:not(.univers){grid-column:1/-1;grid-row:2;gap:16px}
  /* Sur téléphone, le mot seul : la recherche garde la place. */
  .nav-proposer-suite{display:none}
  .recherche{min-width:0}
  body>header nav:not(.univers){gap:12px}
  .recherche{max-width:none}
  .plans,.plans.quatre{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .videos{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .rayon-tete{flex-direction:column;align-items:stretch;gap:14px}
  .filtre select{flex:1}
  .chaine-plan{height:auto;aspect-ratio:16/9}
  .chaine-plan>img{transform:scale(var(--zoom,1));transform-origin:50% var(--zoom-y,0%)}
  .chaine-lecture{display:none}
  .suite-video{grid-template-columns:120px minmax(0,1fr);gap:12px}
  .suite-lecture{display:none}
  .suite-texte strong{font-size:19px}
  .chaine-vitrine{display:grid;grid-template-columns:15px minmax(0,1fr) auto;align-items:baseline;gap:2px 8px;padding-top:12px;font:600 19px/1.25 var(--titre);color:var(--texte)}
  .chaine-vitrine svg{width:15px;height:15px;fill:var(--r);align-self:center}
  .chaine-vitrine small{font:inherit;color:var(--doux);font-variant-numeric:tabular-nums}
  /* Sur téléphone, le parcours passe sous la présentation : on sait d'abord qui l'on
     regarde, puis dans quel ordre. */
  .chaine-tete.guidee{grid-template-columns:minmax(0,1fr);grid-template-areas:"plan" "info" "parcours"}
  .guidee .chaine-plan{min-height:0;border-radius:0 0 3px 3px}
  .chaine-parcours{border-radius:3px;margin-bottom:8px}
  .chaine-info{flex-direction:column;gap:6px;padding-top:10px;padding-bottom:20px}
  .chaine-note{flex-direction:column;align-items:stretch;gap:12px}
  #note-chaine{flex:none;width:100%;grid-template-columns:minmax(0,1fr)}
  #note-chaine button{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
  .pour-tete{flex-direction:column;align-items:flex-start}
  .annuaire ul{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  /* Six onglets ne tiennent pas sur une ligne, et un défilement en cacherait la
     moitié : ils passent sur deux rangées, tous visibles. */
  .rayons{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding-top:14px}
  .rayons a{padding:10px 8px 8px;font-size:18px;border-radius:3px;white-space:nowrap}
  /* Sur deux rangées, le filet ne touche plus l'onglet ouvert : il souligne
     celui du dessous. L'onglet plein suffit à dire où l'on est. */
  .docs-page>:first-child{border-top:0}
  .rayon-tete{padding-top:14px}
  .chaine-plan,.guidee .chaine-plan{margin-top:12px;border-radius:3px}
  .chaine-etape span,.chaine-play small{display:none}
  .chaine-play{top:8px;right:8px;height:38px;padding:0 12px 0 10px;font-size:17px}
  .chaine-parcours .etape{grid-template-columns:112px minmax(0,1fr)}
  .etape-texte strong{font-size:17px}
  body>header .brand,body>header .brand-dot{font-size:22px}
  .header-actions{gap:6px}
  .header-actions .chip,.header-actions .login{padding:0 10px;font-size:14px}
  .plans,.plans.quatre{grid-template-columns:minmax(0,1fr)}
  .rayon-tete p{font-size:18px}
  .video h3{font-size:18px;-webkit-line-clamp:3}
  .video-texte{padding-right:30px}
  .synthe.grand .synthe-fonction{font-size:16px;padding:4px 14px}
  .synthe.grand .synthe-nom{padding:6px 14px 3px}
  .bloc>h2{font-size:26px}
  .chaine-actions{width:100%}
  .chaine-plan .synthe{bottom:10px}
  .synthe.grand .synthe-nom{font-size:26px}
  .chaine-plan .synthe.grand .avatar-chaine{width:52px;height:52px}
  .chaine-actions>*{flex:1}
}

/* --- Le présentoir qui pivote, commun aux trois sites depuis le 3 novembre 2026.
   Né sur Courts, il porte les collections de Courts, les rayons de Docs et les genres
   d'IA : chaque face est une grille de plans, posée sur un panneau de nuit levée sous le
   filet de son rayon. presentoir.js en tient les mesures et le mouvement. --- */
.presentoir .rayon-tete{align-items:center}
.commandes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.faire-tourner{white-space:nowrap}
.faire-tourner svg{transition:transform .7s var(--sortie)}
.faire-tourner:hover svg{transform:rotate(200deg)}
.faire-tourner[disabled]{opacity:.65;cursor:progress}
.presentoir{--cw:300px;--ch:169px;--fw:960px;--fh:420px;--ecart:14px;--enseigne:48px;--perspective:2400px}
.tourniquet{position:relative;margin:4px calc(50% - 50vw) 0;overflow:hidden}
.scene{position:relative;height:var(--fh);perspective:var(--perspective);perspective-origin:50% 42%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.scene.prise{cursor:grabbing}
.pivot{position:absolute;left:50%;top:0;width:var(--fw);height:var(--fh);margin-left:calc(var(--fw) / -2);transform-style:preserve-3d;will-change:transform}
.face{--ombre:0;position:absolute;inset:0;display:flex;flex-direction:column;padding:0 var(--ecart) var(--ecart);background:var(--nuit-2);border-top:var(--r-trait) solid var(--r);border-radius:0 0 3px 3px;backface-visibility:hidden}
.face::after{content:'';position:absolute;inset:0;background:var(--nuit);opacity:var(--ombre);pointer-events:none}
.face:not(.devant){cursor:pointer}
.face.derriere{visibility:hidden}
.enseigne{flex:none;height:var(--enseigne);display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.enseigne b{font:700 26px/1 var(--titre);text-transform:uppercase;letter-spacing:.01em;color:var(--texte);white-space:nowrap}
.enseigne span{font-size:15px;color:var(--doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rangs{flex:1;display:grid;grid-template-columns:repeat(auto-fill,var(--cw));grid-auto-rows:var(--ch);gap:var(--ecart);justify-content:space-between}
.face .plan{width:var(--cw);height:var(--ch);aspect-ratio:auto}
/* Sur une face, le synthé se règle sur la hauteur du plan (--ch, posée par presentoir.js) :
   à trois rangées il doit laisser voir l'image. La fonction tient sur une ligne et se
   déplie au survol, avec le résumé ou les vidéos feuilletées. */
.face .synthe{bottom:8px;max-width:calc(100% - 10px)}
.face .synthe-nom{font-size:clamp(14px,calc(var(--ch) * .12),20px);padding:2px 9px 1px}
.face .synthe-fonction{font-size:clamp(11px,calc(var(--ch) * .085),13px);padding:2px 9px;-webkit-line-clamp:1}
.face .plan:is(:hover,:focus-visible) .synthe-fonction{-webkit-line-clamp:3}
.face .synthe-portrait{padding:2px}
.face .avatar-chaine{width:clamp(26px,calc(var(--ch) * .22),36px);height:clamp(26px,calc(var(--ch) * .22),36px)}
.face :is(.plan-compte,.plan-raison,.co-marque,.plan-prix){top:6px;font-size:13px;padding:1px 7px}
.face .plan-compte{right:6px}
.face :is(.plan-raison,.co-marque,.plan-prix){left:6px}
/* Le plan tiré au sort s'allume avant qu'on l'ouvre. */
.face .plan.elu{outline:var(--r-trait) solid var(--r);outline-offset:3px}
/* Une face qui n'a pas de quoi se remplir garde une place libre, qui invite à proposer. */
.rangs .poche-libre{width:var(--cw);height:var(--ch)}
.poche-libre{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:12px;border:1px dashed var(--trait);border-radius:3px;text-align:center;color:var(--doux);font-size:15px}
.poche-libre.proposer b{font:600 22px/1.1 var(--titre);color:var(--texte)}
.poche-libre.proposer:hover{border-color:var(--r)}
.poche-libre.proposer:hover b{text-decoration:underline;text-underline-offset:3px}
.presentoir .commandes .primary,.presentoir .commandes .secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;font-size:16px;font-weight:600;cursor:pointer}
.fleche{position:absolute;z-index:3;top:calc(var(--fh) / 2 - 26px);width:52px;height:52px;display:grid;place-items:center;border:0;border-radius:3px;background:var(--blanc);color:var(--encre);cursor:pointer}
.fleche:hover{background:var(--r)}
.fleche svg,.vers-collection svg,.faire-tourner svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fleche svg{width:22px;height:22px;stroke-width:2.4}
.fleche.g{left:max(12px,calc(50% - var(--fw) / 2 - 76px))}
.fleche.d{right:max(12px,calc(50% - var(--fw) / 2 - 76px))}
.tourniquet-pied{display:flex;justify-content:center;margin:12px 0 0;font-size:16px}
.vers-collection{display:inline-flex;align-items:center;gap:6px;color:var(--doux);text-decoration:underline;text-underline-offset:3px}
.vers-collection:hover{color:var(--texte)}
.vers-collection svg{width:16px;height:16px}
.collection-rayon{scroll-margin-top:88px}
.bloc-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0 0 18px}
.bloc-tete h2{margin:0;font-size:30px;font-weight:600;line-height:1.1;color:var(--texte)}
.bloc-tete p{margin:6px 0 0;font-size:16px;color:var(--doux)}
@media(max-width:860px){
  .presentoir .rayon-tete{align-items:stretch}
  .commandes{justify-content:flex-start}
  .fleche{display:none}
}
@media(max-width:699px){
  .enseigne b{font-size:20px}
  .enseigne span{display:none}
  .face .synthe{bottom:5px}
  .face .synthe-nom{font-size:13px;padding:1px 6px 0}
  .face .synthe-fonction{display:none}
  .face .synthe-portrait{padding:2px}
  .face .avatar-chaine{width:22px;height:22px}
  .face .plan-compte{top:4px;right:4px;font-size:11px;padding:0 5px}
  .face :is(.plan-raison,.co-marque,.plan-prix){top:4px;left:4px;font-size:11px;padding:0 5px}
  /* Le geste principal reste sous le pouce. */
  .faire-tourner{position:fixed;z-index:20;left:16px;right:16px;bottom:calc(10px + env(safe-area-inset-bottom));height:52px;box-shadow:0 10px 24px -6px #050A1F}
  body:has(.presentoir) footer{padding-bottom:84px}
}