/* ═══════════════════════════════════════════════════════════
   Silloran · « Champ de sillons »
   Base : polices, jetons, typographie, boutons, en-tête, menu.
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:"Instrument Serif";src:url("../fonts/InstrumentSerif-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/InstrumentSerif-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/InstrumentSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/InstrumentSans-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* nuit (fonds) */
  --nuit:#0a0a0c; --nuit-2:#111114; --nuit-3:#18181d;
  /* craie (encre claire) */
  --craie:#ece8e1; --craie-2:#c9c4bb; --craie-dim:#8d8a85;
  /* braise (l'unique couleur vive) */
  --braise:#ff5b2e; --braise-vive:#ffb592; --braise-sur-craie:#d9441a; --braise-texte-craie:#b23510;
  /* traits */
  --trait:rgba(236,232,225,.12); --trait-fort:rgba(236,232,225,.3);
  --trait-sombre:rgba(10,10,12,.16); --encre-douce:#4a4845;
  /* polices */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* mise en page */
  --gouttiere:clamp(20px,4vw,56px);
  --large:1360px;
  --entete:84px;
  /* mouvement */
  --sortie:cubic-bezier(.16,1,.3,1);
  --bascule:cubic-bezier(.65,0,.35,1);
  --doux:cubic-bezier(.22,1.18,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--nuit);color-scheme:dark;-webkit-text-size-adjust:100%;scroll-padding-top:var(--entete)}
html.anim{scroll-behavior:smooth}
body{background:var(--nuit);color:var(--craie);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
h1,h2,h3{font-weight:400}
em{font-style:italic}
::selection{background:var(--braise);color:var(--nuit)}
:focus-visible{outline:2px solid var(--braise);outline-offset:3px;border-radius:4px}

/* grain de papier photo, statique (aucun repaint) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.evitement{position:fixed;left:16px;top:-90px;z-index:100;background:var(--craie);color:var(--nuit);padding:12px 20px;border-radius:999px;font-weight:700;transition:top .3s var(--sortie)}
.evitement:focus{top:16px}
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.conteneur{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:var(--gouttiere)}

/* ───────── typographie ───────── */
.etiquette{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--craie-dim)}
.etiquette::before{content:"";flex:none;width:28px;height:1px;background:var(--braise)}
.etiquette--sombre{color:var(--encre-douce)}
.etiquette--sombre::before{background:var(--braise-sur-craie)}
.legende{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.4;color:var(--craie-dim)}
.legende span{font-family:var(--sans);font-style:normal;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--craie-2);margin-right:12px}
.titre-section{font-family:var(--serif);font-size:clamp(46px,6.6vw,108px);line-height:.94;letter-spacing:-.028em;text-wrap:balance}
.titre-section em,.panneau-titre em{color:var(--braise)}
.ll{position:relative;display:inline-block}
.ll::after{content:"";position:absolute;left:-.03em;right:-.03em;bottom:.02em;height:max(2px,.07em);background:var(--braise);border-radius:2px}

/* ───────── boutons et liens ───────── */
.bouton{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;background:var(--braise);color:var(--nuit);font-weight:700;font-size:15px;letter-spacing:.01em;overflow:hidden;isolation:isolate;white-space:nowrap;transition:color .5s var(--sortie),box-shadow .5s var(--sortie)}
.bouton::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--craie);transform:translateY(102%);transition:transform .6s var(--sortie)}
.bouton:hover::before,.bouton:focus-visible::before{transform:translateY(0)}
.bouton--contour{background:transparent;color:var(--craie);box-shadow:inset 0 0 0 1px var(--trait-fort)}
.bouton--contour:hover,.bouton--contour:focus-visible{color:var(--nuit)}
.bouton--petit{min-height:44px;padding:0 20px;font-size:14px}
.bouton--sombre{background:var(--nuit);color:var(--craie)}
.bouton--sombre::before{background:var(--braise)}
.bouton--sombre:hover,.bouton--sombre:focus-visible{color:var(--nuit)}
.lien-fleche{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:700;font-size:15px;border-bottom:1px solid var(--trait-fort);transition:border-color .4s,color .4s}
.lien-fleche::after{content:"→";transition:transform .5s var(--sortie)}
.lien-fleche:hover{border-color:var(--braise)}
.lien-fleche:hover::after{transform:translateX(6px)}

/* ───────── barre de progression ───────── */
.progression{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:var(--braise);transform-origin:left;transform:scaleX(0);pointer-events:none}

/* ───────── en-tête ───────── */
.entete{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);height:var(--entete);padding:0 var(--gouttiere);transition:transform .6s var(--sortie),background-color .5s,box-shadow .5s}
.entete.defile{background:rgba(10,10,12,.74);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--trait)}
.entete.cache{transform:translateY(-105%)}
.logo{font-family:var(--serif);font-size:31px;line-height:1;letter-spacing:-.01em;margin-right:auto;padding-block:8px}
.nav ul{display:flex;gap:clamp(18px,2.2vw,32px)}
.nav a{position:relative;display:inline-block;padding-block:12px;font-size:14px;color:var(--craie-2);transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--braise);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--sortie)}
.nav a:hover,.nav a[aria-current="true"]{color:var(--craie)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
.menu-bouton{display:none;align-items:center;gap:12px;min-height:44px;padding:0 4px 0 14px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.menu-bouton-icone{position:relative;width:26px;height:12px}
.menu-bouton-icone i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--sortie),top .5s var(--sortie)}
.menu-bouton-icone i:first-child{top:0}
.menu-bouton-icone i:last-child{top:10px}
.menu-bouton[aria-expanded="true"] .menu-bouton-icone i:first-child{top:5px;transform:rotate(45deg)}
.menu-bouton[aria-expanded="true"] .menu-bouton-icone i:last-child{top:5px;transform:rotate(-45deg)}

.menu-mobile{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--entete) + 24px) var(--gouttiere) 36px;background:var(--nuit);overflow-y:auto}
.menu-mobile[hidden]{display:none}
.menu-mobile ul a{display:block;padding-block:6px;font-family:var(--serif);font-size:clamp(40px,11vw,64px);line-height:1.08;letter-spacing:-.02em}
.menu-mobile ul a:hover{color:var(--braise)}
.menu-mobile-pied{padding-top:32px;border-top:1px solid var(--trait);font-size:16px}
.menu-mobile-pied a{display:inline-block;padding-block:10px}
body.menu-ouvert{overflow:hidden}

@media (max-width:960px){
  .nav,.entete-action{display:none}
  .menu-bouton{display:inline-flex}
  :root{--entete:72px}
  .logo{font-size:28px}
}

/* ───────── curseur (souris fine seulement) ───────── */
.curseur{position:fixed;top:0;left:0;z-index:95;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--craie);mix-blend-mode:difference;pointer-events:none;opacity:0;transition:width .35s var(--sortie),height .35s var(--sortie),margin .35s var(--sortie),opacity .3s}
.curseur.actif{opacity:1}
.curseur.grand{width:54px;height:54px;margin:-27px 0 0 -27px}

/* ───────── apparitions (seulement quand le mouvement est permis) ───────── */
.anim .revele{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--sortie),transform 1.1s var(--sortie);transition-delay:calc(var(--i,0) * 80ms)}
.anim .revele.vu{opacity:1;transform:none}
.anim .mots .m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.anim .mots .m>span{display:inline-block;transform:translate3d(0,108%,0);transition:transform 1.05s var(--sortie);transition-delay:calc(var(--i,0) * 50ms)}
.anim .mots.vu .m>span{transform:none}