/* conference.css — design C « Théâtre » (validé 4 juillet 2026)
   Bandeau sombre : vidéo en grand + panneau Chapitres/Recherche calé sur la
   hauteur exacte du lecteur. Dessous : article de lecture aligné sur le lecteur.
   Charte Campus de Neurochirurgie : vert forêt, titres serif, boutons capitales. */

:root{--vert:#2d5c35;--vert2:#234a2a;--vert-pale:#e8f0e9;--encre:#22262b;--gris:#6a7076;
 --ligne:#e0e5e0;--fond-doux:#f5f7f4;--serif:'Bitter','PT Serif',Georgia,'Times New Roman',serif;
 --sans:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--encre);background:#fff;line-height:1.55}

/* ---------- bandeau sombre ---------- */
.band{background:#171c20;color:#e8ebe8;padding:26px 22px 30px}
.band-in{max-width:1300px;margin:0 auto}
.site-line{font-family:var(--serif);color:#9fae9f;font-size:.92rem;padding-bottom:10px;border-bottom:2px solid var(--vert);margin-bottom:16px}
.site-line a{color:#fff;font-weight:600;text-decoration:none}
.site-line a:hover{text-decoration:underline}
.band h1{font-family:var(--serif);font-weight:700;font-size:2.05rem;line-height:1.22;margin:0 0 6px;color:#fff}
.conf-meta{color:#aab4ab;font-size:.95rem;margin:0 0 18px}
.conf-meta a{color:#cfd8cf}

/* grille : vidéo à gauche, panneau à droite borné à la hauteur du lecteur */
.band-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px}
.band-grid>aside{position:relative;min-width:0}
.aside-in{position:absolute;inset:0;display:flex;flex-direction:column}
.video-slot{width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;position:relative}
video{width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;display:block}

/* mini-lecteur : la vidéo reste visible en bas à droite pendant la lecture de l'article */
body.v-mini #conf-video{position:fixed;right:18px;bottom:18px;width:min(400px,46vw);z-index:80;
 border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.5);border:1px solid #39444b}
body.v-mini .video-slot::after{content:"La vidéo est en bas à droite de l'écran";
 position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 color:#5c666d;font-size:.9rem;font-family:var(--sans)}

/* onglets + panneau (fond sombre) */
.conf-tabs{display:flex;gap:8px;margin-bottom:10px}
.conf-tabs button{flex:1;padding:9px 6px;border:1px solid #39444b;background:transparent;border-radius:6px;cursor:pointer;
 font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#c9d3c9}
.conf-tabs button:hover{border-color:#5f8f68;color:#fff}
.conf-tabs button.on{background:var(--vert);color:#fff;border-color:var(--vert)}
.conf-panel{border:1px solid #2c343a;border-radius:8px;flex:1;min-height:0;overflow:auto;background:#1e242a}
.item{padding:11px 14px;border-top:1px solid #262d33;cursor:pointer;font-size:.98rem;line-height:1.45;color:#d6dcd6}
.item:first-child{border-top:0}
.item:hover{background:#242c33}
.item.active{background:#27342b}
.ch{font-weight:600}
.tc{color:#8fc39a;font-weight:600;font-variant-numeric:tabular-nums;margin-right:8px}
.conf-srch{padding:10px}
.conf-srch input{width:100%;padding:9px 11px;border:1px solid #39444b;border-radius:6px;font-size:.95rem;
 font-family:var(--sans);background:#12171b;color:#e8ebe8}
.conf-hint{color:#7d8781;font-size:.78rem;padding:2px 12px 8px}
.hl{background:#f3e2a8;color:#1a1d20;border-radius:2px;padding:0 1px}

/* ---------- article de lecture (fond clair, aligné sur le lecteur) ---------- */
.lecture{max-width:1344px;margin:0 auto;padding:26px 22px 70px}
.lecture-in{max-width:918px}
/* prompteur : le texte défile dans son cadre, la vidéo ne bouge pas */
.conf-article{position:relative;max-height:74vh;overflow:auto;scroll-behavior:smooth;
 border:1px solid #e8ebe8;border-radius:8px;padding:6px 26px 10px;background:#fff}
.conf-article-note{color:#8a8f98;font-size:.88rem;font-style:italic;margin:16px 0 20px}
.conf-article h2{font-family:var(--serif);font-size:1.5rem;color:var(--vert2);margin:34px 0 12px;padding:5px 14px;
 border-left:4px solid transparent;transition:background .3s;scroll-margin-top:16px}
.conf-article h2.active{background:var(--vert-pale);border-left-color:var(--vert)}
.conf-article p{margin:0 0 16px;font-family:var(--serif);font-size:1.18rem;line-height:1.75;color:#23282e}

/* ---------- écrans étroits ---------- */
@media(max-width:980px){
 .band-grid{grid-template-columns:1fr}
 .band-grid>aside{position:static;margin-top:16px}
 .aside-in{position:static;display:block}
 .conf-panel{max-height:56vh}
}

/* ======================================================================
   ARTICLE EN ACCORDÉON (11 juillet 2026)
   Chaque chapitre est une ligne repliable : minutage à gauche (cliquable,
   il envoie la vidéo), titre au milieu, chevron à droite. Le chapitre en
   cours de lecture s'ouvre seul ; les autres se referment.
   ====================================================================== */
.chap{border-bottom:1px solid #e6e4dd}
.chap:first-of-type{border-top:1px solid #e6e4dd}

.chap-head{display:flex;align-items:center;gap:14px;width:100%;
  background:none;border:0;padding:15px 6px;cursor:pointer;text-align:left;
  font:inherit;color:inherit;transition:background .15s}
.chap-head:hover{background:#f6f5f1}
.chap.open>.chap-head{background:var(--vert-pale)}
.chap.lu>.chap-head .t{color:var(--vert2)}

/* le minutage : c'est un lien vers la vidéo, pas un bouton de dépliage */
.chap-head .tc{flex:0 0 auto;min-width:52px;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;
  color:var(--vert2);background:#fff;border:1px solid #dcdcd4;border-radius:4px;
  padding:3px 6px;cursor:pointer;transition:background .15s,color .15s}
.chap-head .tc:hover{background:var(--vert);color:#fff;border-color:var(--vert)}

.chap-head .t{flex:1 1 auto;font-family:var(--serif);font-size:1.16rem;
  font-weight:600;color:#23282e;line-height:1.35}

.chap-head .chev{flex:0 0 auto;width:11px;height:11px;margin-right:6px;
  border-right:2px solid #9aa0a6;border-bottom:2px solid #9aa0a6;
  transform:rotate(45deg);transition:transform .25s}
.chap.open>.chap-head .chev{transform:rotate(225deg);border-color:var(--vert)}

.chap-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.chap-in{padding:4px 6px 18px 72px}
.chap-in p{margin:0 0 16px;font-family:var(--serif);font-size:1.18rem;
  line-height:1.75;color:#23282e}
.chap-in ul,.chap-in ol{margin:0 0 16px;padding-left:22px;
  font-family:var(--serif);font-size:1.15rem;line-height:1.7;color:#23282e}
.chap-in li{margin:0 0 8px}

@media (max-width:700px){
  .chap-in{padding-left:8px}
  .chap-head .t{font-size:1.05rem}
}