/* ==========================================================================
   YNELSTUDIO — socle : jetons, remise à zéro, typographie, éléments communs.

   L'unité --m est calée sur la maquette validée (1086 px de large) :
   1 px de maquette = 1 --m. Toutes les positions et tailles de la version
   bureau s'écrivent donc « valeur mesurée × --m ». Les textes gardent un
   plancher de lisibilité (--mins), que le mode ?calage met à zéro pour
   superposer le site à la maquette.
   ========================================================================== */

:root{
  --bg:#060606;
  --bg-2:#0b0b0c;
  --bg-3:#111113;
  --ink:#f5f3ee;
  --ink-2:rgba(245,243,238,.76);
  --ink-3:rgba(245,243,238,.54);
  --ink-4:rgba(245,243,238,.34);
  --red:#f62b3e;
  --red-hi:#ff4052;
  --red-glow:rgba(246,43,62,.55);
  --red-soft:rgba(246,43,62,.16);
  --yellow:#ffd21f;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.15);

  --f-title:'Archivo Narrow','Arial Narrow','Roboto Condensed',sans-serif;
  --f-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --m:calc(min(100vw,1920px) / 1086);
  --mins:1;

  --fs-h1:max(calc(var(--mins) * 44px),calc(59.5 * var(--m)));
  --fs-h2:max(calc(var(--mins) * 28px),calc(27 * var(--m)));
  --fs-body:max(calc(var(--mins) * 15px),calc(7.4 * var(--m)));
  --fs-small:max(calc(var(--mins) * 13px),calc(6.6 * var(--m)));
  --fs-micro:max(calc(var(--mins) * 10.5px),calc(5 * var(--m)));
  --fs-nano:max(calc(var(--mins) * 9.5px),calc(4.6 * var(--m)));

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --hdr:max(calc(var(--mins) * 60px),calc(40 * var(--m)));
}
html.calage{--mins:0}
/* Pages intérieures : plancher des micro-textes relevé (étiquettes, légendes,
   boutons). Il était de 9,5 et 10,5 px : les légendes qui expliquent les animations
   étaient les textes les plus petits de la page. L'accueil (main.home, hero compris),
   l'en-tête et le pied de page gardent les valeurs du :root ; en ?calage, --mins
   vaut 0 et rien ne change. */
main:not(.home){
  --fs-micro:max(calc(var(--mins) * 12.5px),calc(5 * var(--m)));
  --fs-nano:max(calc(var(--mins) * 11.5px),calc(4.6 * var(--m)));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--hdr);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,canvas,video{display:block;max-width:100%}
[hidden]{display:none!important}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
strong,b{font-weight:600}
::selection{background:var(--red);color:#fff}

:focus{outline:none}
:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px;border-radius:2px}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:10000;background:var(--red);color:#fff;padding:12px 18px;font:500 13px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;transition:top .2s}
.skip:focus{top:16px}

.red{color:var(--red)}

/* --------------------------------------------------------------------------
   Micro-texte : capitales espacées en chasse fixe (labels, annotations, boutons)
   -------------------------------------------------------------------------- */
.mono{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;line-height:1.5}

/* --------------------------------------------------------------------------
   Titres de section : grotesque condensée, grasse, en capitales
   -------------------------------------------------------------------------- */
.h2{font-family:var(--f-title);font-weight:700;font-size:var(--fs-h2);line-height:.9;letter-spacing:-.016em;-webkit-text-stroke:.01em currentColor;text-transform:uppercase;color:var(--ink)}
.h2 .red{color:var(--red)}

.txt{font-size:var(--fs-body);line-height:1.62;color:var(--ink-2)}
.txt strong{color:var(--ink);font-weight:500}
.txt + .txt{margin-top:.9em}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.btn{
  --h:max(calc(var(--mins) * 42px),calc(24.5 * var(--m)));
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:max(calc(var(--mins) * 10px),calc(6 * var(--m)));
  height:var(--h);padding:0 max(calc(var(--mins) * 22px),calc(12 * var(--m)));
  font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  border:1px solid transparent;border-radius:1px;isolation:isolate;overflow:hidden;
  transition:color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),background-color .35s var(--ease);
}
.btn .ico{width:1.35em;height:1.35em;flex:none;transition:transform .35s var(--ease)}
.btn:hover .ico,.btn:focus-visible .ico{transform:translateX(3px)}
.btn--red{background:var(--red);color:#fff;box-shadow:0 0 0 0 var(--red-glow)}
.btn--red::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-110%);transition:transform .7s var(--ease)}
.btn--red:hover{box-shadow:0 0 28px -4px var(--red-glow);background:var(--red-hi)}
.btn--red:hover::before{transform:translateX(110%)}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.03)}
.btn--line{border-color:rgba(246,43,62,.75);color:var(--ink)}
.btn--line:hover{border-color:var(--red);box-shadow:inset 0 0 18px -6px var(--red-glow),0 0 18px -8px var(--red-glow)}

/* Bouton rond « flèche » (cartes, carrousel) */
.round{
  --d:max(calc(var(--mins) * 36px),calc(22 * var(--m)));
  width:var(--d);height:var(--d);flex:none;border-radius:50%;display:inline-grid;place-items:center;
  border:1px solid rgba(246,43,62,.7);color:var(--ink);background:rgba(6,6,6,.35);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease),background-color .35s var(--ease);
}
.round svg{width:42%;height:42%;transition:transform .35s var(--ease)}
.round:hover{border-color:var(--red);box-shadow:0 0 16px -2px var(--red-glow);background:rgba(246,43,62,.12)}
.round:hover svg{transform:translateX(2px)}
.round[disabled]{opacity:.3;pointer-events:none}

/* --------------------------------------------------------------------------
   Cadre de section : numéro rouge, tiret, filet vertical, étiquette encadrée
   -------------------------------------------------------------------------- */
.sec{position:relative;border-top:1px solid var(--line);background:var(--bg);overflow:hidden}
.sec__rail{position:absolute;left:calc(50 * var(--m));top:calc(22 * var(--m));bottom:calc(14 * var(--m));width:max(calc(var(--mins) * 22px),calc(13 * var(--m)));pointer-events:none;z-index:2}
.sec__num{display:block;font-family:var(--f-mono);font-weight:500;font-size:max(calc(var(--mins) * 11px),calc(6.4 * var(--m)));letter-spacing:.08em;color:var(--red);line-height:1}
.sec__rail::before{content:"";position:absolute;left:0;top:max(calc(var(--mins) * 20px),calc(15 * var(--m)));width:100%;height:1.5px;background:var(--red)}
.sec__rail::after{content:"";position:absolute;left:calc(6 * var(--m));top:max(calc(var(--mins) * 30px),calc(22 * var(--m)));bottom:0;width:1px;background:linear-gradient(var(--line-2),rgba(255,255,255,.05) 85%,transparent)}
.sec__label{display:flex;align-items:center;gap:max(calc(var(--mins) * 8px),calc(5 * var(--m)));margin-left:0}
.sec__label::before{content:"";width:calc(36 * var(--m));height:1px;background:linear-gradient(90deg,rgba(246,43,62,.25),rgba(246,43,62,.8))}
.sec__label span{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);padding:max(calc(var(--mins) * 4px),calc(2 * var(--m))) max(calc(var(--mins) * 8px),calc(4.5 * var(--m)));line-height:1.3;background:rgba(255,255,255,.02)}

@media (max-width:1023px){
  .h2{font-size:clamp(32px,5.8vw,48px)}
  .sec__rail{left:24px;top:24px;bottom:auto;height:24px;width:22px}
  .sec__rail::after{display:none}
}

/* Annotations verticales à droite (listes en capitales, filet et flèche) */
.notes{position:absolute;z-index:3;white-space:nowrap;font-family:var(--f-mono);font-weight:400;font-size:var(--fs-nano);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);line-height:2.05}
.notes--rule{padding-left:calc(13 * var(--m))}
.notes--rule::before{content:"";position:absolute;left:0;top:-14%;bottom:-14%;width:1px;background:linear-gradient(transparent,var(--line-2) 30%,var(--line-2) 70%,transparent)}
.notes--arrow::after{content:"";position:absolute;left:-2px;top:-14%;width:5px;height:5px;border-left:1px solid var(--ink-3);border-top:1px solid var(--ink-3);transform:rotate(45deg)}

/* Icônes SVG en ligne */
.ico{display:inline-block;width:1em;height:1em;vertical-align:middle;flex:none}

/* --------------------------------------------------------------------------
   Apparitions au défilement. Sans JavaScript, tout reste visible :
   les états cachés n'existent que sous html.js.
   -------------------------------------------------------------------------- */
html.js .rv{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
html.js .rv.is-in{opacity:1;transform:none}
html.js .rv-fade{opacity:0;transition:opacity 1.2s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
html.js .rv-fade.is-in{opacity:1}
/* Images qui se dévoilent de bas en haut, avec un léger recul */
html.js .rv-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease-out)}
html.js .rv-clip > img,html.js .rv-clip > .about__room{scale:1.08;transition:scale 1.8s var(--ease-out)}
html.js .rv-clip.is-in{clip-path:inset(0 0 0 0)}
html.js .rv-clip.is-in > img,html.js .rv-clip.is-in > .about__room{scale:1}
/* Le filet des étiquettes de section se dessine à l'apparition */
html.js .sec__label.rv::before{transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--ease-out) .25s}
html.js .sec__label.rv.is-in::before{transform:none}
/* Titres : chaque ligne monte depuis un masque */
html.js .lines > .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
html.js .lines > .ln > span{display:inline-block;transform:translate3d(0,105%,0);transition:transform 1.05s var(--ease-out);transition-delay:calc(var(--i,0) * 110ms)}
html.js .lines.is-in > .ln > span{transform:none}
.lines > .ln{display:block}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  html.js .rv,html.js .rv-fade{opacity:1;transform:none}
  html.js .lines > .ln > span{transform:none}
  html.js .rv-clip{clip-path:none}
  html.js .rv-clip > img,html.js .rv-clip > .about__room{scale:1}
  html.js .sec__label.rv::before{transform:none}
}

/* Transitions douces d'une page à l'autre (navigateurs récents ; sinon, chargement normal) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .32s var(--ease) both}
::view-transition-new(root){animation:vtIn .6s var(--ease-out) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-14px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(18px)}}
.hdr{view-transition-name:entete}
::view-transition-group(entete){animation:none}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Harmonise le module cookies (inchangé) avec la palette */
:root:root{--ycc-red:var(--red);--ycc-bg:#0b0b0c;--ycc-ink:var(--ink)}
/* Bandeau cookies caché (après le choix) : il sort aussi du parcours au clavier.
   « visibility » bascule à la fin du fondu de 0,5 s (mêmes courbes que cookies.css)
   et revient tout de suite quand le bandeau se montre (.ycc-show). */
.ycc-banner:not(.ycc-show){visibility:hidden;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .5s ease,visibility 0s linear .5s}
/* pictogramme du bandeau (partials/footer.html) : dessin maison au lieu d'un émoji */
.ycc-banner-icon svg{display:block;width:22px;height:22px;overflow:visible}