/* ============================================================
   NORMANDY DRUM STUDIOS — SOCLE
   Direction « Or Massif ». Ce fichier ne contient QUE :
   polices, tokens, socle HTML, typographie, boutons, utilitaires.
   Tout composant vit dans nds-composants.css. Aucun doublon.
   ============================================================ */

/* ---------- 1. POLICES AUTO-HÉBERGÉES ---------- */
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('/assets/fonts/oswald-var-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;}

@font-face{font-family:'Raleway';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/assets/fonts/raleway-var-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;}
@font-face{font-family:'Raleway';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/assets/fonts/raleway-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:'Alegreya Sans SC';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/alegreya-sc-400-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;}
@font-face{font-family:'Alegreya Sans SC';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/alegreya-sc-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- 2. TOKENS ---------- */
:root{
  --c-noir:#0B0A09;
  --c-charbon:#141210;
  --c-charbon-clair:#1C1916;
  --c-beige:#E4D7BF;
  --c-beige-doux:#C0B39A;
  --c-beige-sourd:#8A7F6C;
  --c-or:#C9A227;
  --c-or-clair:#E3C55F;
  --c-blanc:#FFFFFF;

  --t-or:rgba(201,162,39,.24);
  --t-or-fort:rgba(201,162,39,.55);
  --t-beige:rgba(228,215,191,.16);

  /* Voile du hero : plein cadre, sans bord visible nulle part. */
  --voile-hero:
    radial-gradient(140% 95% at 50% 52%,rgba(11,10,9,.42) 0%,rgba(11,10,9,.52) 42%,rgba(11,10,9,.34) 70%,rgba(11,10,9,.5) 100%),
    linear-gradient(180deg,rgba(11,10,9,.86) 0%,rgba(11,10,9,.24) 34%,rgba(11,10,9,.6) 74%,var(--c-noir) 100%);

  --f-titre:'Oswald',system-ui,-apple-system,sans-serif;
  --f-cap:'Alegreya Sans SC',system-ui,-apple-system,sans-serif;
  --f-texte:'Raleway',system-ui,-apple-system,sans-serif;

  --g-fin:200; --g-normal:300; --g-moyen:400; --g-fort:500; --g-massif:700;

  --ts-h1:clamp(2.4rem,.8rem + 5.8vw,6.6rem);
  --ts-h2:clamp(1.9rem,1rem + 3.4vw,4.2rem);
  --ts-h3:clamp(1.2rem,1rem + 1.1vw,1.7rem);
  --ts-corps:clamp(1rem,.96rem + .3vw,1.12rem);
  --ts-petit:.94rem;
  /* Sur-titres : une seule taille dans tout le site, nettement plus grande. */
  --ts-surtitre:clamp(.9rem,.8rem + .42vw,1.14rem);

  --ls-surtitre:.34em;
  --ls-menu:.16em;
  --ls-bouton:.22em;

  --e-1:.5rem; --e-2:1rem; --e-3:1.5rem; --e-4:2.5rem;
  --e-5:clamp(3rem,6vh,5rem);
  --e-6:clamp(4.5rem,11vh,9rem);
  --gouttiere:clamp(1.5rem,5vw,4.5rem);
  --largeur:84rem;
  --lecture:60rem;

  /* En-tête : logo nettement plus grand avant défilement. */
  --entete-h:200px;
  --entete-h-reduit:104px;

  --duree-courte:.3s; --duree:.5s; --duree-longue:1.1s;
  --courbe:cubic-bezier(.16,1,.3,1);
}
@media(max-width:1080px){:root{--entete-h:132px;--entete-h-reduit:88px}}

/* ---------- 3. SOCLE ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--entete-h-reduit) + 1.5rem)}
body{background:var(--c-noir);color:var(--c-beige);
  font:400 var(--ts-corps)/1.75 var(--f-texte);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--c-or-clair)}
.enveloppe{max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere)}
.enveloppe--lecture{max-width:calc(var(--lecture) + 2 * var(--gouttiere))}

/* ---------- 4. TYPOGRAPHIE ---------- */
.t-h1{font-family:var(--f-titre);font-weight:var(--g-fin);font-size:var(--ts-h1);
  line-height:1.02;text-transform:uppercase;max-width:18ch}
.t-h2{font-family:var(--f-titre);font-weight:var(--g-fin);font-size:var(--ts-h2);
  line-height:1.04;text-transform:uppercase;max-width:20ch}
.t-h3{font-family:var(--f-titre);font-weight:var(--g-fort);font-size:var(--ts-h3);
  line-height:1.15;text-transform:uppercase;letter-spacing:.02em}
.t-accent{font-weight:var(--g-massif);color:var(--c-or-clair)}
.t-corps{font-family:var(--f-texte);font-weight:400;color:var(--c-beige-doux);max-width:52ch}

/* SUR-TITRE — une seule règle pour tout le site.
   Alegreya Sans SC, or, même taille, même interlettrage, partout.
   Les anciens noms restent en alias pour ne rien casser. */
.surtitre,.titre-sec,.t-cap{
  display:block;font-family:var(--f-cap);font-weight:var(--g-moyen);
  font-size:var(--ts-surtitre);letter-spacing:var(--ls-surtitre);
  text-transform:uppercase;color:var(--c-or);line-height:1.3;
  margin:0 0 1rem;text-indent:var(--ls-surtitre)}
.surtitre--centre{text-align:center}

/* ---------- 5. BOUTONS ---------- */
.bouton{display:inline-block;font-family:var(--f-cap);font-weight:var(--g-fort);
  font-size:.86rem;letter-spacing:var(--ls-bouton);text-transform:uppercase;
  padding:1.05rem 2.4rem;text-decoration:none;position:relative;overflow:hidden;
  border:1px solid var(--c-or);background:var(--c-or);color:var(--c-noir);
  transition:color var(--duree) var(--courbe);cursor:pointer;text-indent:var(--ls-bouton)}
.bouton>span{position:relative;z-index:2}
.bouton::before{content:"";position:absolute;inset:0;background:var(--c-noir);
  transform:scaleX(0);transform-origin:right;transition:transform var(--duree) var(--courbe)}
.bouton:hover{color:var(--c-or-clair)}
.bouton:hover::before{transform:scaleX(1);transform-origin:left}
.bouton--creux{background:none;color:var(--c-beige);border-color:var(--t-or-fort)}
.bouton--creux::before{background:var(--c-or)}
.bouton--creux:hover{color:var(--c-noir);border-color:var(--c-or)}
/* Sur fond or, le bouton devient noir : jamais d'or sur or. */
.sur-or .bouton{background:var(--c-noir);border-color:var(--c-noir);color:var(--c-or-clair)}
.sur-or .bouton::before{background:var(--c-beige)}
.sur-or .bouton:hover{color:var(--c-noir)}

.lien-souligne{position:relative;text-decoration:none;color:var(--c-beige);
  padding-bottom:5px;font-family:var(--f-cap);letter-spacing:var(--ls-menu)}
.lien-souligne::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--c-or);transform:scaleX(0);transform-origin:0;
  transition:transform .35s var(--courbe)}
.lien-souligne:hover{color:var(--c-or-clair)}
.lien-souligne:hover::after{transform:scaleX(1)}

:focus-visible{outline:2px solid var(--c-or-clair);outline-offset:4px}

/* ---------- 6. SÉPARATEUR (signature) ----------
   Le logo est l'élément central : il doit se lire, pas se deviner. */
.separateur{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.4rem);
  padding:clamp(1.5rem,4vw,3rem) var(--gouttiere);max-width:var(--largeur);margin:0 auto}
.separateur i{flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--t-or-fort),transparent)}
.separateur__logo{height:clamp(4.2rem,8vw,6rem);width:auto;opacity:.72;
  filter:brightness(0) invert(1)}

/* ---------- 7. ACCESSIBILITÉ ---------- */
.evitement{position:absolute;left:-9999px;top:0;z-index:100}
.evitement:focus{left:var(--gouttiere);top:var(--e-2);padding:.8rem 1.4rem;
  background:var(--c-or);color:var(--c-noir);font-family:var(--f-cap);
  letter-spacing:var(--ls-menu);text-decoration:none}
.invisible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    animation-delay:0ms!important;transition-duration:.01ms!important}
}