/* =====================================================================
   NKO Design · module « À la une » (pistes-c3/une/une.css), porté de la version A (nko-design/realisations.css,
   partie 1 « En-tête À la une ») le 29/10/2026, pour la page Lumière.
   Six projets ; au survol (ou au focus) d'un nom, l'encre du projet se répand sur tout le module depuis le pointeur,
   ses pièces se posent en profondeur sur la table et suivent la souris ; sans survol, les projets passent seuls.
   Autonome : chaque règle est préfixée par .une ou une classe une-… ; ses variables sont toutes en --une-… (la page
   Lumière utilise --texte pour une police : rien ici n'en dépend). Polices attendues de la page : Clash Display
   (titres) et Satoshi (texte).
   Cadré en pixels (Natacha travaille sur un grand écran) : contenu de 1280 px au plus, centré ; 800 px de haut au plus
   sur ordinateur ; tailles de texte bornées en px.
   Mouvement réduit : fondus seulement (rien ne se déplace).
   ===================================================================== */

.une{
  --une-fond:#0B0A09;
  --une-texte:#EFE9DF;
  --une-texte-2:#E4DBCD;          /* tiennent 4,5:1 sur l'encre la plus claire (Têtes Rousses), comme en A */
  --une-texte-3:#E0D7C9;
  --une-etiq:#DCD2FF;
  --une-accent:#B39DFF;           /* le violet vif de A (--violet-clair de la page) */
  --une-focus:#B39DFF;
  --une-marge:clamp(20px,4.4vw,56px);
  --une-gout:24px;
  --une-largeur:1280px;
  --une-sortie:cubic-bezier(.23,1,.32,1);
  --une-trace:cubic-bezier(.77,0,.175,1);
  --une-police-titre:'Clash Display',system-ui,sans-serif;
  --une-police:'Satoshi',system-ui,sans-serif;
  --une-dur:6500ms;               /* le temps d'un projet (le défilement de l'écran du site suit) */
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  background:var(--une-fond);color:var(--une-texte);
  font-family:var(--une-police);font-size:17px;font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.une *,.une *::before,.une *::after{box-sizing:border-box}
.une p,.une h2,.une ol,.une li{margin:0}

/* ---------- les encres des six projets et leur filigrane ---------- */
.une-encres{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.une-encre{position:absolute;inset:0;background:var(--c);clip-path:polygon(0 0,0 0,0 0)}
.une-encre--pose{clip-path:none}
.une-filigrane{position:absolute;left:calc(max(var(--une-marge),(100% - var(--une-largeur)) / 2) - .05em);bottom:-.16em;display:block;font-family:var(--une-police-titre);font-weight:500;font-size:clamp(110px,19vw,280px);line-height:.8;letter-spacing:-.04em;white-space:nowrap;color:rgba(255,250,240,.06);pointer-events:none;-webkit-user-select:none;user-select:none}

/* ---------- le cadre ---------- */
.une-cadre{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;max-width:calc(var(--une-largeur) + 2 * var(--une-marge));margin-inline:auto;padding:56px var(--une-marge) 48px}

/* ---------- l'en-tête : l'étiquette, le titre (deux lignes, 500 puis 200), le chapeau ---------- */
.une-tete{display:grid;gap:16px;justify-items:start;min-width:0}
.une-etiq{font-family:var(--une-police);font-weight:700;font-size:13px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--une-etiq)}
.une-titre{font-family:var(--une-police-titre);font-weight:500;font-size:clamp(30px,8.4vw,44px);line-height:.94;letter-spacing:-.02em;text-transform:uppercase;color:var(--une-texte);text-wrap:balance}
.une-titre .une-mince{font-weight:200}
/* chaque ligne monte dans sa fenêtre (les accents des capitales gardent leur place) */
.une-l{display:block;overflow:hidden;overflow:clip;padding-block:.2em .14em;margin-block:-.2em -.14em}
.une-etiq .une-l{display:inline-block}
.une-l-in{display:block}
.une-chapeau{max-width:38ch;font-size:18px;line-height:1.45;color:var(--une-texte-2);text-wrap:pretty}

/* ---------- l'index : six noms, ce que c'est dessous ; sous le projet montré, le fil se tisse (le temps du passage) ---------- */
.une-index{min-width:0}
.une-index-tete{display:flex;align-items:center;justify-content:space-between;gap:16px}
.une-consigne{font-weight:500;font-size:14px;line-height:1.35;letter-spacing:.02em;color:var(--une-texte-2)}
.une-liste{display:grid;margin:6px 0 0;padding:0;list-style:none}
.une-lien{position:relative;display:grid;grid-template-columns:minmax(0,1fr);width:100%;margin:0;padding:8px 0 10px;border:0;border-radius:0;background:none;color:var(--une-texte);font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.une-nom{font-family:var(--une-police-titre);font-weight:500;font-size:22px;line-height:1.15;letter-spacing:-.005em;color:var(--une-texte-2);transition:color 200ms ease,translate 420ms var(--une-sortie)}
.une-quoi{margin-top:2px;font-family:var(--une-police);font-size:15px;line-height:1.35;color:var(--une-texte-3);transition:translate 420ms var(--une-sortie) 30ms}
.une-lien.une-actif .une-nom{color:var(--une-texte)}
.une-fil{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(239,233,223,.16);transform-origin:0 50%;transform:scaleX(0);transition:transform 320ms var(--une-sortie);pointer-events:none}
.une-fil i{position:absolute;inset:0;background:var(--une-accent);transform-origin:0 50%;transform:scaleX(0)}
.une-lien.une-actif .une-fil{transform:none}
.une-lien:focus{outline:none}
.une-lien:focus-visible{outline:3px solid var(--une-focus);outline-offset:3px;border-radius:4px}
@media (hover:hover) and (pointer:fine){.une-lien:hover .une-nom,.une-lien:hover .une-quoi{translate:10px 0}}

/* ---------- Pause / Lecture (critère 2.2.2) ---------- */
.une-pause{display:inline-flex;align-items:center;gap:9px;flex:none;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--une-texte-2);font-family:var(--une-police);font-weight:700;font-size:12px;line-height:1;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;transition:color 160ms ease}
.une-pause-icone{position:relative;width:10px;height:11px}
.une-pause-icone i{position:absolute;top:0;width:3px;height:100%;border-radius:1px;background:currentColor;transition:transform 220ms var(--une-sortie)}
.une-pause-icone i:first-child{left:1px}
.une-pause-icone i:last-child{right:1px}
.une-pause.une-en-pause .une-pause-icone i:first-child{width:0;height:0;border-style:solid;border-width:5.5px 0 5.5px 9px;border-color:transparent transparent transparent currentColor;background:none;border-radius:0}
.une-pause.une-en-pause .une-pause-icone i:last-child{transform:scaleY(0)}
.une-pause:focus{outline:none}
.une-pause:focus-visible{outline:3px solid var(--une-focus);outline-offset:4px;border-radius:2px}
@media (hover:hover) and (pointer:fine){.une-pause:hover{color:var(--une-texte)}}

/* ---------- la table : chaque projet, ses pièces posées en profondeur (position en % de la table, rotation, profondeur) ---------- */
.une-scene{position:relative;display:block;height:340px;margin-inline:calc(-1 * var(--une-marge));container-type:size;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.une-plan{position:absolute;left:50%;top:50%;width:min(92cqw,calc(92cqh * 1.15));aspect-ratio:1.15;translate:-50% -50%;visibility:hidden}
.une-plan.une-actif,.une-plan.une-sort{visibility:visible}
.une-o{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--l) * 1%);rotate:var(--rot);opacity:0;transform:translate3d(0,9%,0) scale(1.08);transition:opacity 280ms ease,transform 820ms var(--une-sortie);transition-delay:calc(90ms + var(--k) * 70ms);box-shadow:0 2px 4px rgba(0,0,0,.28),0 28px 60px -18px rgba(0,0,0,.7)}
.une-o img{display:block;width:100%;max-width:none;height:auto;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}
.une-plan.une-actif .une-o{opacity:1;transform:none}
.une-plan.une-sort .une-o{opacity:0;transform:translate3d(0,-4%,0) scale(.95);transition-duration:200ms,240ms;transition-delay:0ms}
.une-o--etiq img{border-radius:2px}
/* le site : l'écran d'ordinateur et le téléphone, leurs pages qui défilent pendant qu'on regarde (tailles relatives à la table) */
.une-o--ecran{overflow:hidden;border-radius:8px;background:#FFFDF9}
.une-nav-barre{display:flex;align-items:center;gap:6px;height:clamp(12px,3cqw,20px);padding:0 12px;background:#EFEAE1}
.une-nav-barre i{display:block;width:7px;aspect-ratio:1;border-radius:50%;background:#CFC5B6}
.une-ecran{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#F2EEE7}
.une-o--tel{padding:clamp(3px,1cqw,7px);border-radius:clamp(10px,3.4cqw,24px);background:#16130F}
.une-tel-ecran{display:block;aspect-ratio:390/844;overflow:hidden;border-radius:clamp(8px,2.6cqw,19px);background:#F2EEE7}
.une-defile{--fin:-52%;transform:translateZ(0)}
.une-defile--tel{--fin:-46%}
@keyframes une-defile{0%,14%{transform:translateY(0)}86%,100%{transform:translateY(var(--fin))}}
.une-plan.une-actif .une-defile{animation:une-defile var(--une-dur) cubic-bezier(.65,0,.35,1) both}

/* ---------- la légende et les six fils (téléphone, tablette) ---------- */
.une-pied{display:grid;gap:6px}
.une-leg{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px;min-height:1.5em}
.une-leg-num{font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--une-etiq);font-variant-numeric:tabular-nums}
.une-leg-nom{font-family:var(--une-police-titre);font-weight:500;font-size:19px;line-height:1.25;color:var(--une-texte)}
.une-leg-quoi{flex-basis:100%;font-size:15px;line-height:1.35;color:var(--une-texte-3)}
.une-segments{display:flex;gap:6px}
.une-seg{position:relative;flex:1;min-width:0;height:36px;margin:0;padding:0;border:0;border-radius:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.une-seg::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:rgba(239,233,223,.2)}
.une-seg i{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:var(--une-accent);transform-origin:0 50%;transform:scaleX(0)}
.une-seg:focus{outline:none}
.une-seg:focus-visible{outline:3px solid var(--une-focus);outline-offset:2px;border-radius:2px}

/* l'annonce pour les lecteurs d'écran (changement de projet au doigt, pause) */
.une-annonce{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* sans JavaScript : le premier projet reste posé, sans les commandes du passage */
.une:not(.une--js) .une-pause,.une:not(.une--js) .une-segments,.une:not(.une--js) .une-fil{display:none}

/* ---------- l'arrivée (quand le module entre à l'écran) : l'étiquette et le titre montent ligne à ligne, le chapeau
   se lève, l'index se trace. Les animations attendent, en pause sur leur première image, que le script pose .une--vu ---------- */
@keyframes une-ligne{from{transform:translateY(108%)}to{transform:none}}
@keyframes une-trace{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes une-leve{from{clip-path:inset(0 0 100% 0);transform:translateY(.35em)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes une-fondu{from{opacity:0}to{opacity:1}}
.une--js .une-etiq .une-l-in{animation:une-ligne 760ms var(--une-sortie) both 40ms}
.une--js .une-titre .une-l-in{animation:une-ligne 980ms var(--une-sortie) both;animation-delay:calc(140ms + var(--i,0) * 110ms)}
.une-titre .une-mince{--i:1}
.une--js .une-chapeau{animation:une-leve 860ms var(--une-sortie) both 420ms}
.une--js .une-liste li,.une--js .une-index-tete{animation:une-trace 760ms var(--une-trace) both;animation-delay:calc(520ms + var(--j,0) * 60ms)}
.une--js .une-pied{animation:une-leve 760ms var(--une-sortie) both 520ms}
.une--js:not(.une--vu) .une-etiq .une-l-in,.une--js:not(.une--vu) .une-titre .une-l-in,.une--js:not(.une--vu) .une-chapeau,
.une--js:not(.une--vu) .une-liste li,.une--js:not(.une--vu) .une-index-tete,.une--js:not(.une--vu) .une-pied{animation-play-state:paused}
/* comme en A (v24) : les animations de clip-path restent hors du compositeur (plantage d'Edge et de Chrome pendant un grand
   changement de mise en page) ; ces éléments n'ont pas de clip-path dessous : le rendu est le même */
.une--js .une-chapeau,.une--js .une-liste li,.une--js .une-index-tete,.une--js .une-pied{animation-composition:add}

/* ---------- tablette et téléphone : le titre, la table, la légende et ses fils, puis l'index ---------- */
@media (max-width:1023px){
  .une-encre{background:var(--c)}
  .une-scene{order:2;height:440px}
  .une-pied{order:3}
  .une-index{order:4}
}
@media (max-width:599px){
  .une-cadre{gap:16px;padding-block:48px 40px}
  .une-tete{gap:10px}
  .une-chapeau{font-size:17px}
  .une-scene{height:340px}
  /* au téléphone, la légende et les six fils remplacent la liste (comme en A) ; « Pause » reste */
  .une-liste,.une-consigne{display:none}
  .une-index-tete{justify-content:flex-start}
}
@media (max-width:899px),(pointer:coarse){ .une-seg{height:44px} }

/* ---------- ordinateur : le titre en haut à gauche, l'index dessous, la table à droite sur toute la hauteur ---------- */
@media (min-width:1024px){
  .une-encre{background:var(--c);background:radial-gradient(ellipse 62% 74% at 70% 46%,color-mix(in srgb,var(--a) 26%,var(--c)) 0%,var(--c) 64%),var(--c)}
  .une-cadre{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);column-gap:var(--une-gout);row-gap:28px;min-height:clamp(640px,100svh,800px);padding-block:64px 56px}
  .une-lien{padding-block:7px 9px}
  .une-tete{grid-column:1 / 7;grid-row:1}
  .une-titre{font-size:clamp(36px,1.4vw + 22px,46px)}
  .une-index{grid-column:1 / 6;grid-row:2;align-self:end}
  .une-nom{font-size:24px}
  .une-scene{grid-column:7 / -1;grid-row:1 / 3;height:auto;min-height:480px;margin-inline:0 calc(-1 * var(--une-marge) + 8px)}
  .une-plan{width:min(96cqw,calc(94cqh * 1.15))}
  .une-pied{display:none}
}
/* écran d'ordinateur peu haut : la ligne « ce que c'est » s'efface, l'index tient */
@media (min-width:1024px) and (max-height:760px){
  .une-quoi{display:none}
  .une-cadre{padding-block:56px 48px}
}

/* ---------- mouvement réduit : des fondus, rien ne se déplace ---------- */
@media (prefers-reduced-motion:reduce){
  .une--js .une-etiq .une-l-in,.une--js .une-titre .une-l-in,.une--js .une-chapeau,.une--js .une-liste li,.une--js .une-index-tete,.une--js .une-pied{animation-name:une-fondu;animation-duration:420ms;animation-timing-function:ease;animation-composition:replace}
  .une-plan.une-actif .une-defile{animation:none}
  .une-o{transform:none;transition:opacity 300ms ease;transition-delay:0ms}
  .une-plan.une-sort .une-o{transform:none}
  .une-nom,.une-quoi{transition:color 160ms ease}
  .une-lien:hover .une-nom,.une-lien:hover .une-quoi{translate:none}
  .une-fil,.une-pause-icone i{transition:none}
}
@media (prefers-contrast:more){
  .une-filigrane{display:none}
}
@media (forced-colors:active){
  .une-encres{display:none}
  .une-fil i,.une-seg i{background:Highlight}
  .une-o{box-shadow:none;outline:1px solid CanvasText}
}