/* Layout: the page is an edit. Name cut by a playhead, clips on tracks, a live timeline at the bottom that maps scroll to timecode. */
/* ICHOLA EDITING — feuille de style
   Couleurs : modifier les variables dans :root ci-dessous. */
@property --cut { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
:root{
  --noir:#000000;
  --plateau:#0D1210;
  --plateau-2:#141B18;
  --trait:#1F2B27;
  --emeraude:#1DA97A;
  --emeraude-clair:#4FD3A3;
  --blanc:#F2F5F3;
  --gris:#8D9993;
  --display:"Anybody", "Archivo", "Arial Narrow", sans-serif;
  --texte:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --tc:"Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:4px;
  --gut-l:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  --barre:46px;
  --sur-accent:#000000; /* texte posé sur le vert (boutons, timecodes), identique dans les deux thèmes */
  color-scheme:dark;
}
/* Thème clair : activé par le bouton soleil/lune (attribut data-theme="light" sur <html>).
   --noir devient le fond clair et --blanc le texte foncé ; le vert est assombri pour rester lisible. */
:root[data-theme="light"]{
  --noir:#F6F8F7;
  --plateau:#E9EEEB;
  --plateau-2:#DEE6E1;
  --trait:#CBD5D0;
  --emeraude:#12875F;
  --emeraude-clair:#1DA97A;
  --blanc:#0B100E;
  --gris:#56625C;
  color-scheme:light;
}
*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--noir)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--noir);color:var(--blanc);font-family:var(--texte);font-size:17px;line-height:1.55;margin:0;padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px));-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--noir)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--emeraude);outline-offset:3px}
.wrap{max-width:1440px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
@media (min-width:900px){.wrap{padding-left:max(40px, env(safe-area-inset-left,0px));padding-right:max(40px, env(safe-area-inset-right,0px))}}
.tc{font-family:var(--tc);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.muted{color:var(--gris)}
video{display:block;background:var(--plateau)}

/* ---------- Header ---------- */
.entete{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb, var(--noir) 82%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)}
.entete .wrap{display:flex;align-items:center;gap:24px;height:60px}
.marque{font-family:var(--display);font-stretch:140%;font-weight:800;font-size:15px;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.marque b{color:var(--emeraude);font-weight:800}
.nav{display:flex;gap:22px;margin-left:auto;font-size:14.5px}
.nav a{text-decoration:none;color:var(--gris);transition:color .2s}
.nav a:hover{color:var(--blanc)}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;text-decoration:none;font-weight:600;font-size:15px;border-radius:var(--r);padding:11px 18px;white-space:nowrap}
.btn-plein{background:var(--emeraude);color:var(--sur-accent)}
.btn-plein:hover{background:var(--emeraude-clair)}
.btn-trait{background:transparent;color:var(--blanc);box-shadow:inset 0 0 0 1px var(--trait)}
.btn-trait:hover{box-shadow:inset 0 0 0 1px var(--gris)}
.entete .btn{padding:8px 14px;font-size:14px}
.entete .btn .court{display:none}
/* Bouton thème clair / sombre */
.theme{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r);background:transparent;color:var(--gris);cursor:pointer;box-shadow:inset 0 0 0 1px var(--trait);transition:color .2s,box-shadow .2s}
.theme:hover{color:var(--blanc);box-shadow:inset 0 0 0 1px var(--gris)}
.theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme .lune,[data-theme="light"] .theme .soleil{display:none}
[data-theme="light"] .theme .lune{display:block}
@media (max-width:980px){.nav{display:none}.entete .theme{margin-left:auto}}
/* Petits téléphones : logo plus serré, bouton raccourci en « Contact » */
@media (max-width:520px){
  .entete .wrap{gap:10px}
  .marque{font-size:14px;font-stretch:115%}
  .entete .btn .long{display:none}
  .entete .btn .court{display:inline}
}

/* ---------- Hero ---------- */
.ouverture{padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(40px,6vw,80px)}
.dispo{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--gris);margin:0 0 clamp(18px,3vw,34px)}
.dispo i{width:8px;height:8px;border-radius:50%;background:var(--emeraude);box-shadow:0 0 0 4px color-mix(in srgb,var(--emeraude) 22%,transparent)}
.coupe{position:relative;--cut:61%;margin:0;padding-top:30px;font-family:var(--display);font-weight:800;font-stretch:128%;font-size:clamp(2.5rem,13.2vw,13.4rem);line-height:.84;letter-spacing:-.015em;user-select:none}
.coupe .couche{display:block}
.coupe .couche span{display:block}
.coupe .couche span+span{padding-left:.9em}
.coupe .c1{clip-path:inset(-20% calc(100% - var(--cut)) -20% -5%)}
.coupe .c2{position:absolute;left:0;right:0;top:30px;clip-path:inset(-20% -5% -20% var(--cut));transform:translate(.035em,.055em);color:var(--blanc)}
.tete{position:absolute;top:0;bottom:-.08em;left:var(--cut);width:0;pointer-events:none}
.tete::before{content:"";position:absolute;top:22px;bottom:0;left:-1px;width:2px;background:var(--emeraude)}
.tete .tc{position:absolute;top:0;left:0;transform:translateX(-50%);background:var(--emeraude);color:var(--sur-accent);font-size:12px;font-weight:500;padding:3px 7px 2px;border-radius:2px;white-space:nowrap}
.tete .tc::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:var(--emeraude)}
@media (prefers-reduced-motion: no-preference){
  .coupe{animation:balayage 1.5s cubic-bezier(.75,0,.2,1) .35s both}
  .coupe .c2{animation:decale .35s cubic-bezier(.3,1.6,.5,1) 1.8s both}
}
@keyframes balayage{from{--cut:0%}to{--cut:61%}}
@keyframes decale{from{transform:none}to{transform:translate(.035em,.055em)}}

.sous-ouverture{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:start;margin-top:clamp(32px,4vw,56px)}
.sous-ouverture > div:first-child{padding-top:clamp(0px,2vw,24px)}
.these{font-family:var(--display);font-stretch:100%;font-weight:600;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.12;letter-spacing:-.01em;margin:0 0 18px;text-wrap:balance;max-width:18ch}
.these-sous{color:var(--gris);margin:0 0 28px;max-width:40ch}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.multicam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);align-items:start}
.multicam .plan:nth-child(2){margin-top:clamp(20px,3vw,48px)}
.multicam .plan:nth-child(3){margin-top:clamp(40px,6vw,96px)}
@media (max-width:820px){.sous-ouverture{grid-template-columns:1fr}.multicam .plan:nth-child(2){margin-top:16px}.multicam .plan:nth-child(3){margin-top:32px}}

/* ---------- Clip card (shared) ---------- */
.plan{display:block;width:100%;padding:0;margin:0;border:0;background:none;text-align:left;cursor:pointer}
.plan .ecran{position:relative;overflow:hidden;border-radius:var(--r);background:var(--plateau)}
.plan video,.plan img{width:100%;height:100%;object-fit:cover;display:block}
.plan .ecran::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blanc) 7%,transparent);border-radius:inherit;pointer-events:none}
.plan .lecture{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:var(--emeraude);display:grid;place-items:center;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s}
.plan .lecture svg{width:12px;height:12px;margin-left:2px;fill:var(--sur-accent)}
.plan:hover .lecture,.plan:focus-visible .lecture{opacity:1;transform:none}
/* Écrans tactiles (pas de survol) : le bouton lecture est toujours visible pour montrer que la vidéo se touche */
@media (hover:none){.plan .lecture{opacity:1;transform:none;width:30px;height:30px;right:8px;bottom:8px}}
.plan .scrub{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--emeraude);opacity:0;pointer-events:none;transition:opacity .15s}
.plan .scrub i{position:absolute;top:8px;left:6px;font:500 11px var(--tc);font-style:normal;color:var(--sur-accent);background:var(--emeraude);padding:2px 5px;border-radius:2px;white-space:nowrap}
.plan.scrubbing .scrub{opacity:1}
.legende{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:14px;line-height:1.35}
.legende .t{font-weight:600;min-width:0}
.legende .m{display:block;color:var(--gris);font-weight:400}
.legende .d{color:var(--gris);font-size:12px;flex:none;text-align:right}
.legende .d em{display:block;font-style:normal;color:var(--emeraude)}

/* ---------- Sections ---------- */
.section{padding-top:clamp(72px,9vw,140px);padding-bottom:clamp(40px,5vw,72px)}
.titre-bloc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 48px;align-items:end;margin-bottom:clamp(28px,4vw,52px)}
.point{display:block;color:var(--emeraude);font-size:12.5px;margin-bottom:14px}
h2{font-family:var(--display);font-weight:750;font-stretch:112%;font-size:clamp(2.1rem,5.2vw,4.6rem);line-height:.98;letter-spacing:-.02em;margin:0;text-wrap:balance}
.intro{color:var(--gris);margin:0;max-width:46ch}
@media (max-width:820px){.titre-bloc{grid-template-columns:1fr}}

/* Verticales: pinned horizontal track */
.verticales{position:relative}
.epingle{position:sticky;top:60px;height:calc(100vh - 60px - var(--barre));height:calc(100dvh - 60px - var(--barre));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.verticales .titre-bloc{margin-bottom:clamp(20px,3vh,40px)}
.piste{display:flex;gap:clamp(12px,1.6vw,22px);will-change:transform;padding-left:var(--gut-l);padding-right:var(--gut-r)}
@media (min-width:900px){.piste{padding-left:max(40px, calc((100vw - 1440px)/2 + 40px));padding-right:40px}}
.piste .plan{flex:none;width:calc(min(54vh, 520px) * 9 / 16)}
.piste .ecran{aspect-ratio:9/16}
.verticales.libre .epingle{position:static;height:auto;overflow:visible}
.verticales.libre .piste{overflow-x:auto;scroll-padding-inline:var(--gut-l) var(--gut-r);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--trait) transparent}
.verticales.libre .piste .plan{scroll-snap-align:start;width:min(62vw, 260px)}
@media (min-width:900px){.verticales.libre .piste .plan{width:clamp(240px, 19vw, 300px)}}
.verticales.libre .piste{scroll-snap-type:x proximity} /* aimantation douce : pas de saut quand le défilement s'arrête */
.verticales .piste.auto{scroll-snap-type:none} /* pendant le défilement automatique, pas d'aimantation des cartes */
@media (hover:hover){.verticales.libre .piste{scroll-snap-type:none}} /* à la souris, pas d'aimantation du tout */
/* Flèches précédent / suivant (seulement avec une souris) */
.fleches{display:flex;gap:8px;margin-top:16px}
.fleche{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--blanc);box-shadow:inset 0 0 0 1px var(--trait);cursor:pointer;transition:box-shadow .2s,background .2s}
.fleche:hover{box-shadow:inset 0 0 0 1px var(--emeraude);background:color-mix(in srgb,var(--emeraude) 12%,transparent)}
.fleche svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:none){.fleches{display:none}}

/* Longs formats: source monitor + bin */
.moniteur{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(18px,2.4vw,36px);align-items:start}
.ecran-16{position:relative;aspect-ratio:16/9;background:var(--plateau);border-radius:var(--r);overflow:hidden}
.ecran-16 video{width:100%;height:100%;object-fit:cover}
.sous-moniteur{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:14px}
.sous-moniteur h3{font-family:var(--display);font-stretch:105%;font-weight:650;font-size:clamp(1.2rem,1.8vw,1.6rem);line-height:1.15;margin:0}
.sous-moniteur p{margin:2px 0 0;color:var(--gris);font-size:14.5px}
.chutier{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.chutier button{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:12px 8px 12px 0;background:none;border:0;border-bottom:1px solid var(--trait);text-align:left;cursor:pointer;color:var(--gris);transition:color .2s}
.chutier img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:3px;opacity:.55;transition:opacity .2s}
.chutier .n{display:block;font-weight:600;font-size:14.5px;line-height:1.3}
.chutier .q{display:block;font-size:12.5px;margin-top:2px}
.chutier button:hover,.chutier button[aria-pressed="true"]{color:var(--blanc)}
.chutier button:hover img,.chutier button[aria-pressed="true"] img{opacity:1}
.chutier button[aria-pressed="true"] .q{color:var(--emeraude)}
@media (max-width:900px){.moniteur{grid-template-columns:1fr}}

/* Motion */
.panorama{margin-bottom:clamp(28px,4vw,56px)}
.panorama .ecran{position:relative;aspect-ratio:4320/1350;border-radius:var(--r);overflow:hidden;background:var(--plateau)}
.panorama video{width:100%;height:100%;object-fit:cover}
.panorama .reperes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);pointer-events:none}
.panorama .reperes span{border-right:1px dashed rgba(0,0,0,.35);position:relative}
.panorama .reperes span:last-child{border-right:0}
.panorama .reperes b{position:absolute;left:8px;top:8px;font:500 11px var(--tc);color:var(--sur-accent);background:rgba(255,255,255,.82);padding:2px 6px;border-radius:2px}
.panorama figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:12px;font-size:14px}
.panorama figcaption span{color:var(--gris)}
.mosaique{columns:3 300px;column-gap:clamp(14px,1.8vw,26px)}
.mosaique .plan{break-inside:avoid;margin-bottom:clamp(22px,2.6vw,36px)}
.mosaique .ecran{aspect-ratio:var(--ar)}

/* Podcast */
.podcast{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,72px);align-items:start}
.apercu{position:sticky;top:84px;max-width:340px}
.apercu .ecran{aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--plateau)}
.apercu video{width:100%;height:100%;object-fit:cover}
.apercu p{margin:10px 0 0;font-size:13px;color:var(--gris)}
.episodes{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.episodes button{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:16px;align-items:baseline;width:100%;padding:16px 0;background:none;border:0;border-bottom:1px solid var(--trait);color:var(--gris);text-align:left;cursor:pointer;transition:color .15s}
.episodes .no{font-size:13px;color:var(--gris)}
.episodes .ti{font-family:var(--display);font-stretch:108%;font-weight:600;font-size:clamp(1.15rem,2.1vw,1.75rem);line-height:1.15;letter-spacing:-.01em}
.episodes .du{font-size:13px}
.episodes button:hover,.episodes button.actif{color:var(--blanc)}
.episodes button.actif .no{color:var(--emeraude)}
@media (max-width:820px){.podcast{grid-template-columns:1fr}.apercu{position:static;max-width:220px}}

/* Méthode: clips on a track */
.piste-methode{display:grid;grid-template-columns:2fr 3fr 2fr 2fr;gap:4px;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);padding:4px 0}
.etape{background:var(--plateau);border-radius:3px;padding:18px 18px 22px;min-height:190px;display:flex;flex-direction:column;gap:10px;position:relative}
.etape:nth-child(2){background:var(--plateau-2)}
.etape .tc{font-size:12px;color:var(--emeraude)}
.etape h3{font-family:var(--display);font-stretch:110%;font-weight:700;font-size:1.25rem;line-height:1.15;margin:0}
.etape p{margin:0;color:var(--gris);font-size:15px;line-height:1.5}
.regle{display:grid;grid-template-columns:2fr 3fr 2fr 2fr;margin-top:8px;font-size:11.5px;color:var(--gris)}
@media (max-width:820px){.piste-methode,.regle{grid-template-columns:1fr}.regle{display:none}.etape{min-height:0}}

/* À propos */
.apropos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);align-items:start}
.colonne{display:grid;gap:clamp(28px,3vw,44px);min-width:0}
.portrait-bloc{margin:0;position:sticky;top:84px;max-width:480px}
.portrait{position:relative;aspect-ratio:9/16;--cut:58%;cursor:ew-resize;touch-action:pan-y;padding-top:0}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r);display:block;user-select:none;-webkit-user-drag:none}
.portrait .p1{clip-path:inset(0 calc(100% - var(--cut)) 0 0)}
.portrait .p2{clip-path:inset(0 0 0 var(--cut));transform:translate(6px,16px);filter:grayscale(1) contrast(1.08)}
.portrait .tete{top:-30px;bottom:-22px}
.portrait .tete::before{top:22px}
.portrait-bloc figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:30px;font-size:13px;color:var(--gris)}
@media (prefers-reduced-motion: no-preference){.portrait.repos{transition:--cut .6s cubic-bezier(.6,0,.2,1)}}
.recit p{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.62;margin:0 0 1.1em;max-width:62ch}
.recit p:first-child{font-family:var(--display);font-stretch:100%;font-weight:550;font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.3;letter-spacing:-.005em}
.inspecteur{background:var(--plateau);border-radius:var(--r);padding:6px 20px 10px}
.inspecteur h3{font-size:13px;font-weight:600;color:var(--gris);margin:14px 0 6px}
.inspecteur dl{margin:0}
.inspecteur div{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid var(--trait);font-size:14.5px}
.inspecteur dt{color:var(--gris)}
.inspecteur dd{margin:0}
.parcours{margin-top:clamp(48px,6vw,88px)}
.parcours h3{font-family:var(--display);font-stretch:110%;font-weight:700;font-size:1.4rem;margin:0 0 18px}
.parcours ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.parcours li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,6fr);gap:8px 32px;padding:18px 0;border-bottom:1px solid var(--trait)}
.parcours .an{color:var(--emeraude);font-size:13.5px}
.parcours .ro{font-weight:600}
.parcours .de{color:var(--gris);font-size:15px}
.outils{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding:0;list-style:none}
.outils li{font-size:13.5px;padding:6px 11px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--trait);color:var(--blanc)}
@media (max-width:900px){.apropos{grid-template-columns:1fr}.portrait-bloc{position:static;max-width:340px}.parcours li{grid-template-columns:1fr}}

/* Générique */
.generique{text-align:center}
.generique h2{margin-bottom:clamp(36px,5vw,64px)}
.generique dl{margin:0 auto;max-width:900px;display:grid;gap:clamp(26px,3vw,40px)}
.generique dt{font-size:13px;color:var(--gris);margin-bottom:6px}
.generique dd{margin:0;font-family:var(--display);font-stretch:135%;font-weight:700;font-size:clamp(1.25rem,2.6vw,2.2rem);line-height:1.1;letter-spacing:-.01em}

/* FAQ */
.faq{max-width:900px}
.faq details{border-bottom:1px solid var(--trait)}
.faq details:first-of-type{border-top:1px solid var(--trait)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-family:var(--display);font-stretch:105%;font-weight:600;font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--tc);color:var(--emeraude);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 22px;color:var(--gris);max-width:64ch}

/* Contact */
.contact{padding-bottom:clamp(60px,8vw,120px)}
.contact h2{font-size:clamp(2.6rem,8vw,7.4rem);font-stretch:125%;line-height:.92}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:clamp(28px,4vw,48px)}
.mail .adresse{font-family:var(--display);font-stretch:100%;font-weight:600;font-size:clamp(1.25rem,3.4vw,2.6rem);letter-spacing:-.01em;user-select:all;word-break:break-all}
.contact .infos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 40px;margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid var(--trait);font-size:15px}
.contact .infos b{display:block;font-weight:600;margin-bottom:4px}
.contact .infos span{color:var(--gris)}
@media (max-width:820px){.contact .infos{grid-template-columns:1fr}}
/* Téléphone : les boutons de contact remplissent la largeur, plus faciles à toucher */
@media (max-width:520px){.mail .btn{flex:1 1 140px;justify-content:center;padding-block:13px}}
.pied{border-top:1px solid var(--trait);padding-block:26px;font-size:13.5px;color:var(--gris)}
.pied .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.pied a{display:inline-block;padding:12px 0;margin:-12px 0} /* zone de clic plus grande, sans décaler la mise en page */

/* ---------- Timeline bar ---------- */
.timeline{position:fixed;left:0;right:0;bottom:0;z-index:55;height:calc(var(--barre) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);padding-left:var(--gut-l);padding-right:var(--gut-r);background:var(--plateau);border-top:1px solid var(--trait);display:flex;align-items:center;gap:16px}
.timeline .tc-live{color:var(--emeraude);font-size:13px;flex:none;min-width:8.6em}
.timeline .pistes{position:relative;flex:1;height:26px;display:flex;gap:2px;min-width:0}
.timeline .seg{position:relative;height:100%;background:var(--plateau-2);border:0;border-radius:2px;cursor:pointer;color:var(--gris);font-size:11px;text-align:left;padding:0 7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:background .2s,color .2s;min-width:6px}
.timeline .seg:hover{background:var(--trait);color:var(--blanc)}
.timeline .seg.actif{background:color-mix(in srgb,var(--emeraude) 26%,var(--plateau-2));color:var(--blanc)}
.timeline .curseur{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--emeraude);left:0;pointer-events:none}
.timeline .curseur::before{content:"";position:absolute;top:0;left:-4px;border:5px solid transparent;border-top-color:var(--emeraude);border-bottom:0}
.timeline .total{font-size:12px;color:var(--gris);flex:none}
@media (max-width:700px){.timeline .seg{font-size:0;padding:0}.timeline .total{display:none}}

/* ---------- Lecteur (modal) ---------- */
/* Le lecteur reste sombre dans les deux thèmes : on lui redonne les couleurs du thème sombre */
.lecteur{--noir:#000000;--blanc:#F2F5F3;--gris:#8D9993;--trait:#1F2B27;color:var(--blanc);color-scheme:dark}
.lecteur{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:max(56px, env(safe-area-inset-top,0px)) var(--gut-r) max(24px, env(safe-area-inset-bottom,0px)) var(--gut-l)}
.lecteur[hidden]{display:none!important}
.lecteur video{max-width:min(100%, 1280px);max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);width:auto;height:auto;border-radius:var(--r);background:var(--noir)}
.lecteur .info{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;font-size:14px;text-align:center;max-width:900px}
.lecteur .info b{font-weight:600}
.lecteur .info span{color:var(--gris)}
.lecteur .fermer{position:absolute;top:max(14px, env(safe-area-inset-top,0px));right:var(--gut-r)}
.lecteur .erreur{color:var(--gris);font-size:14px}