/* =========================================================
   DS EK PROD « Label » : proposition du 29/10/2026, à valider par Esy.
   Dérivé du DS EK sans le reprendre : une autre police unique (Archivo,
   étroite en capitales pour les titres), angles droits, fiches à filet et
   numéros de catalogue EKP. Palettes propres au label, au choix d'Esy
   (29/10 : « on ne garde pas les mêmes couleurs »).
   Règles EK respectées : une seule police, titres unicolores, ni serif,
   ni script, ni italique, ni terracotta, ni crème.
   Actif seulement avec la classe html.ds-label (?ds=label).
   Cody, Assistant Tech IA d'Esy Kennenga
   ========================================================= */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('/assets/fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Les palettes (variables --l-*) sont générées par build.py dans palettes.css. */
html.ds-label{
  --bg:var(--l-bg);--bg-2:var(--l-bg2);--txt:var(--l-txt);--txt-2:var(--l-txt2);--txt-3:var(--l-txt2);
  --ligne:color-mix(in srgb,var(--l-txt) 22%,transparent);--f:'Archivo',system-ui,sans-serif;--r:0px;
}
.ds-label body{font-stretch:100%;font-size:17px}
.ds-label a{color:var(--l-acc)}
.ds-label h1,.ds-label h2,.ds-label h3{font-stretch:72%;font-weight:800;text-transform:uppercase;letter-spacing:.005em;line-height:.95}
.ds-label h1{font-size:clamp(3rem,10vw,7rem)}
.ds-label h2{font-size:clamp(2rem,5.5vw,3.6rem)}
.ds-label h3{font-size:1.45rem;line-height:1}
.ds-label .sur{font-stretch:100%;font-weight:600;letter-spacing:.18em;font-size:.78rem;color:var(--l-acc);opacity:1}
.ds-label .chapo{color:var(--txt-2)}

/* En-tête : filet d'accent, menu en capitales, actif souligné */
.ds-label .top{background:var(--l-bg);border-bottom:2px solid var(--l-acc)}
.ds-label .menu{background:var(--l-bg)}
.ds-label .menu a{color:var(--l-txt);text-transform:uppercase;font-stretch:80%;font-weight:700;letter-spacing:.04em;border-radius:0}
.ds-label .menu a:hover,.ds-label .menu a[aria-current]{background:none;color:var(--l-acc);box-shadow:inset 0 -3px 0 var(--l-acc)}
.ds-label .burger{color:var(--l-txt);border-color:var(--ligne)}
.ds-label .logo img{filter:var(--l-logo,none)}

/* Bandes */
.ds-label .alt{background:var(--l-band);color:var(--l-band-txt);--txt:var(--l-band-txt);--txt-2:var(--l-band-txt);--txt-3:var(--l-band-txt);--ligne:color-mix(in srgb,var(--l-band-txt) 25%,transparent)}
.ds-label .alt .sur,.ds-label .alt .carte::before,.ds-label .alt a{color:var(--l-band-acc)}
.ds-label .sable{background:var(--l-clair);color:var(--l-clair-txt);--txt:var(--l-clair-txt);--txt-2:var(--l-clair-txt);--txt-3:var(--l-clair-txt);--ligne:color-mix(in srgb,var(--l-clair-txt) 25%,transparent)}
.ds-label .sable .sur,.ds-label .sable .carte::before,.ds-label .sable a{color:var(--l-clair-acc)}

/* Boutons : rectangles, capitales étroites */
.ds-label .btn{background:var(--l-acc);color:var(--l-on-acc);border-radius:0;text-transform:uppercase;font-stretch:80%;letter-spacing:.06em;padding:15px 24px}
.ds-label .btn:hover{background:var(--l-txt);color:var(--l-bg)}
.ds-label .btn.ligne{background:transparent;color:var(--l-txt);border:2px solid currentColor}
.ds-label .btn.ligne:hover{background:var(--l-txt);color:var(--l-bg)}

/* Cartes = fiches de catalogue : pas de fond, filet en tête, numéro EKP */
.ds-label .grille{counter-reset:fiche;gap:0 28px}
.ds-label .carte{background:none!important;border:0;border-top:2px solid currentColor;border-radius:0;padding:18px 0 28px;counter-increment:fiche}
.ds-label .carte p{color:inherit;opacity:.85}
.ds-label .carte::before{content:"EKP-" counter(fiche,decimal-leading-zero);display:block;font-weight:600;font-size:.75rem;letter-spacing:.18em;color:var(--l-acc);margin-bottom:12px}
.ds-label .num{display:none}

/* Catalogue vidéo : chaque format porte sa référence */
.ds-label #contenu{counter-reset:format}
.ds-label .format{counter-increment:format;border-top:2px solid var(--l-txt)}
.ds-label .format h2::before{content:"EKP-V" counter(format,decimal-leading-zero);display:block;font-stretch:100%;font-size:.75rem;letter-spacing:.18em;color:var(--l-acc);margin-bottom:10px;font-weight:600}
.ds-label .video,.ds-label .photo,.ds-label .vignette{border-radius:0}
.ds-label .video button{background:var(--l-band);color:var(--l-band-txt)}
.ds-label .video .play{border-radius:0;background:var(--l-acc)}
.ds-label .video .play::after{border-left-color:var(--l-on-acc)}
.ds-label .meta{color:var(--txt-2)}

/* Articles */
.ds-label .vignette{background:var(--l-bg2);color:var(--l-txt);border:0;border-top:2px solid var(--l-txt)}
.ds-label .vignette:hover{border-top-color:var(--l-acc)}
.ds-label .vignette img{filter:grayscale(1) contrast(1.05)}
.ds-label .vignette:hover img{filter:none}
.ds-label .pied{background:var(--l-bg2);border-top:2px solid var(--l-acc)}
.ds-label .pied a{color:var(--l-txt)}

/* Page de choix des palettes */
.palettes{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:28px}
.palette,.ds-label .palette{display:block;text-decoration:none;border:2px solid var(--ligne);padding:20px;color:var(--txt)}
.palette:hover{border-color:currentColor}
.palette .nuancier{display:flex;height:64px;margin:12px 0}
.palette .nuancier span{flex:1;box-shadow:inset 0 0 0 1px var(--ligne)}
.palette p{margin:0;font-size:.95rem;opacity:.85}
.sec-titre{margin-top:56px;font-size:clamp(1.4rem,3.5vw,2rem)}

/* Palette retenue : titres jaunes sur bordeaux et sur noir, sur-titres rose pâle ; titres bordeaux sur rose clair */
html.ds-label[data-pal="ekprod"] h1,html.ds-label[data-pal="ekprod"] h2{color:var(--jaune)}
html.ds-label[data-pal="ekprod"] .sur{color:var(--l-txt2)}
html.ds-label[data-pal="ekprod"] .sable h1,html.ds-label[data-pal="ekprod"] .sable h2,html.ds-label[data-pal="ekprod"] .sable .sur{color:var(--l-clair-acc)}
html.ds-label[data-pal="ekprod"] .format h2::before,html.ds-label[data-pal="ekprod"] .carte::before{color:var(--l-txt2)}
html.ds-label[data-pal="ekprod"] .sable .carte::before{color:var(--l-clair-acc)}
html.ds-label[data-pal="ekprod"] .pied{background:var(--noir)}

/* ===== Le chevelu de l'accueil (29/10) ===== */
html{background:var(--noir)}
.bassin{position:relative;min-height:calc(100svh - 70px);overflow:hidden;background:var(--bg)}
.bassin-texte{position:relative;z-index:2;padding-top:clamp(40px,8vh,88px);pointer-events:none}
.bassin-texte h1{max-width:13ch;font-size:clamp(2.6rem,8vw,6rem)}
.bassin-texte .chapo{max-width:34ch}
.chevelu{position:absolute;inset:0;width:100%;height:100%;z-index:1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chevelu .fil{stroke:var(--jaune);opacity:.28}
.chevelu .fil.n1{stroke-width:1.1;opacity:.45}
.chevelu .fil.n2{stroke-width:.8}
.chevelu .fil.n3{stroke-width:.5;opacity:.22}
.chevelu .bras{stroke:var(--jaune);stroke-width:2.6;opacity:.9;transition:stroke .3s,stroke-width .3s}
.chevelu .bras.vif{stroke:#FFFFFF;stroke-width:3.4}
.chevelu .delta{stroke:var(--jaune);stroke-width:1.4;opacity:.85}
.chevelu .trajet{stroke:#FFFFFF;stroke-width:4}
.chevelu .lumiere{fill:#FFFFFF;stroke:none;filter:drop-shadow(0 0 8px #FFFFFF)}
.en-route .chevelu .bras:not(.trajet),.en-route .chevelu .fil{opacity:.15;transition:opacity .4s}
/* Sans JavaScript : simple liste de liens sous le texte */
.deltas{position:relative;z-index:3;display:flex;flex-direction:column;gap:12px;padding:32px var(--g) 48px}
.deltas a{color:var(--txt);text-decoration:none;text-transform:uppercase;font-stretch:72%;font-weight:800;font-size:clamp(1.15rem,2.6vw,1.6rem);letter-spacing:.02em}
.bassin.vivant .deltas{position:absolute;inset:0;padding:0;pointer-events:none}
.bassin.vivant .deltas a{position:absolute;transform:translateY(-50%);pointer-events:auto;padding:8px 0;opacity:0;transition:opacity .6s 1.2s,color .2s}
.bassin.pret .deltas a{opacity:1}
.bassin .deltas a:hover,.bassin .deltas a:focus-visible{color:var(--jaune)}
.voile{position:fixed;width:300vmax;height:300vmax;border-radius:50%;background:var(--bg);z-index:50;pointer-events:none;transform:translate(-50%,-50%) scale(0)}
@media (prefers-reduced-motion:reduce){.bassin.vivant .deltas a{transition:none}}
.bassin .deltas a{white-space:nowrap}
@media (max-width:699px){
  .bassin{min-height:max(calc(100svh - 70px),700px)}
  .bassin-texte{padding-top:28px}
  .bassin-texte h1{font-size:2.35rem}
  .bassin .deltas a{font-size:1.05rem}
}
/* Animation drone (29/10) : traits d'épaisseur constante pendant le zoom, texte et étiquettes qui s'effacent */
.chevelu path{vector-effect:non-scaling-stroke}
.bassin.drone .bassin-texte,.bassin.drone .deltas a{opacity:0!important;transition:opacity .35s!important}
.voile-plein{position:fixed;inset:0;background:var(--bg);opacity:0;z-index:50;pointer-events:none}
.nom-plongee{position:fixed;left:50%;top:50%;z-index:51;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.55);
  font-family:var(--f);font-stretch:72%;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.95;
  font-size:clamp(3rem,13vw,9rem);color:var(--jaune);text-align:center;width:90vw}

/* Clips avec vignette locale et cartes-liens (productions, documentaires, 29/10) */
.video .avec-vignette{padding:0;background:#000}
.video .avec-vignette img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .2s}
.video .avec-vignette:hover img{opacity:1}
.video .avec-vignette .play{position:relative;z-index:1}
.video .titre-clip{position:absolute;left:12px;bottom:10px;z-index:1;font-stretch:80%;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.04em;text-shadow:0 1px 3px #000}
a.carte.lien{display:block;text-decoration:none;color:inherit}
a.carte.lien .suite{display:inline-block;margin-top:12px;font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
a.carte.lien:hover h3{text-decoration:underline}