/* ============================================================
   HYL'S STUDIO · base.css
   Socle commun a toutes les pages (accueil + pages legales) :
   tokens, reset, conteneur, logo de nav, pied de page unifie.
   Charge en premier ; home.css et legal.css completent/surchargent.
   ============================================================ */

:root{
  --ink:#08090C;
  --ink-2:#0E1016;
  --bone:#F4F1EB;
  --bone-dim:#B8B4AA;
  --gold:#C8A24B;
  --gold-soft:#E0C888;
  --line:rgba(244,241,235,.12);
  --ff-display:"Anton","Arial Narrow",sans-serif;
  --ff-serif:"Instrument Serif",Georgia,serif;
  --ff-sans:"Plus Jakarta Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-sans);
  background:var(--ink);
  color:var(--bone);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink)}

/* Conteneur (les pages legales le resserrent a 880px via legal.css) */
.wrap{width:min(1240px,90vw);margin-inline:auto}

/* Logo de nav, partage par toutes les navs */
.nav__logo{font-family:var(--ff-display);font-size:1.15rem;letter-spacing:.04em;flex:0 0 auto}
.nav__logo b{color:var(--gold);font-weight:400}

/* ============ PIED DE PAGE UNIFIE ============ */
.foot{border-top:1px solid var(--line);background:#050609;color:var(--bone-dim);font-size:.84rem}
.foot__inner{display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:flex-start;padding:44px 0}
.foot__logo{font-family:var(--ff-display);color:var(--bone);font-size:1.2rem}
.foot__logo b{color:var(--gold);font-weight:400}
.foot__tag{margin-top:8px;max-width:36ch}
.foot__meta{text-align:right}
.foot__meta p{margin:6px 0 0}
.foot__meta p:first-child{margin:0}
.foot__legal{opacity:.65}
.foot__legal a{opacity:1}
.foot a{color:var(--bone-dim)}
.foot a:hover{color:var(--gold)}
@media(max-width:600px){.foot__inner{flex-direction:column}.foot__meta{text-align:left}}