/* =====================================================================
   Mariage Julie & Alix — Design tokens (socle partagé)
   Direction : Dolce Vita illustré · Didot / Mulish / Autography
   Toutes les pistes DOIVENT consommer ces variables (pas de valeurs en dur).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Polices auto-hébergées, en WOFF2 sous-ensemblé latin + latin-ext
   (converties depuis les OTF de _refs/didot-2/ et assets/fonts/).
   Mulish reste servie par Google Fonts, appelée depuis le <head>.
   Le nom de famille 'Didot' est volontaire : si le WOFF2 ne se charge
   pas, le navigateur retombe sur le Didot installé (macOS) puis sur la
   chaîne de --font-display, sans texte invisible.
   Seul l'italique manque : aucun texte du site n'en utilise.
   --------------------------------------------------------------------- */
@font-face{
  font-family:'Didot';
  src:url('../fonts/didot-regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Didot';
  src:url('../fonts/didot-bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Autography';
  src:url('../fonts/autography.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---------- COULEURS : palette brute (10 teintes moodboard + pêche) ---------- */
  --creme:      #F6F1E7;  /* fond principal        */
  --lin:        #E9DEC8;  /* fond secondaire       */
  --greige:     #CBB68F;  /* neutre chaud          */
  --olive:      #6E7346;  /* primaire              */
  --terracotta: #C26B47;  /* accent chaud          */
  --azur:       #52738C;  /* accent froid / mer    */
  --limoncello: #E8C25A;  /* lumière               */
  --chocolat:   #4A3526;  /* profond / soirée      */
  --laiton:     #B08D57;  /* détail doré           */
  --encre:      #2E2620;  /* texte                 */
  --peche:      #E9B48C;  /* coucher de soleil (issu des KV) */
  --blanc:      #FFFFFF;  /* blanc pur (pictos sur aplats)   */

  /* ---------- COULEURS : rôles sémantiques (à utiliser dans le code) ---------- */
  --bg:            var(--creme);
  --bg-alt:        var(--lin);
  --bg-deep:       var(--chocolat);
  --bg-primary:    var(--olive);
  --ink:           var(--encre);
  --ink-soft:      #4a4038;
  --ink-invert:    var(--creme);
  --brand:         var(--olive);
  --accent-warm:   var(--terracotta);
  --accent-cool:   var(--azur);
  --accent-light:  var(--limoncello);
  --gold:          var(--laiton);
  --hairline:      rgba(46, 38, 32, .14);
  /* Erreur de saisie. Le terracotta de la palette ne donne que 3,40:1 sur
     la card crème : illisible pour un message court. Ce brique plus foncé
     atteint 6,60:1 tout en restant dans la famille chaude du site. */
  --erreur:        #9E2B25;

  /* ---------- TYPO : familles ---------- */
  --font-display: 'Didot', 'GFS Didot', 'Playfair Display', serif;
  --font-body:    'Mulish', system-ui, sans-serif;
  --font-script:  'Autography', cursive;

  /* ---------- TYPO : échelle fluide (ladder) ---------- */
  /* ratio ~1.25 (tierce majeure), borné par clamp() pour le responsive */
  --fs-display-xl: clamp(3rem,    2.1rem + 4.6vw, 6.5rem);   /*  48 → 104  nom des mariés */
  --fs-display-l:  clamp(2.25rem, 1.7rem + 2.8vw, 4rem);     /*  36 → 64   gros titres    */
  --fs-display-m:  clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);  /*  28 → 44   titres section */
  --fs-title:      clamp(1.25rem, 1.1rem + .8vw, 1.5rem);    /*  20 → 24   sous-titres    */
  --fs-body-l:     1.125rem;   /* 18  chapô / intro         */
  --fs-body:       1rem;       /* 16  corps                 */
  --fs-body-s:     .8125rem;   /* 13  légendes              */
  --fs-overline:   .6875rem;   /* 11  sur-titres capitales  */
  /* le script (Autography) se dimensionne au cas par cas, toujours < titre associé */

  /* ---------- TYPO : interlignes ---------- */
  --lh-tight:   1.02;   /* display          */
  --lh-title:   1.18;   /* titres           */
  --lh-body:    1.65;   /* corps            */

  /* ---------- TYPO : approches (letter-spacing) ---------- */
  --ls-caps:    .26em;  /* capitales espacées / overline */
  --ls-display: .01em;  /* Didot casse mixte             */
  --ls-body:    0;

  /* ---------- ESPACEMENT : échelle base 4 ---------- */
  --sp-1:  .25rem;  /*  4  */
  --sp-2:  .5rem;   /*  8  */
  --sp-3:  .75rem;  /* 12  */
  --sp-4:  1rem;    /* 16  */
  --sp-5:  1.5rem;  /* 24  */
  --sp-6:  2rem;    /* 32  */
  --sp-8:  3rem;    /* 48  */
  --sp-10: 4rem;    /* 64  */
  --sp-12: 6rem;    /* 96  */
  --sp-16: 8rem;    /* 128 */
  --sp-20: 10rem;   /* 160 */

  /* rythme vertical des sections (fluide) */
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 8rem);

  /* ---------- LAYOUT ---------- */
  --container:  1200px;   /* largeur max de contenu large   */
  --container-narrow: 760px;
  --measure:    62ch;     /* longueur de ligne de lecture   */
  --gutter:     clamp(1.25rem, .8rem + 2vw, 2.5rem);

  /* ---------- FORMES ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --border:    1px solid var(--hairline);

  /* ---------- OMBRES (discrètes, chaudes) ---------- */
  --shadow-sm: 0 1px 2px rgba(74,53,38,.06);
  --shadow-md: 0 8px 30px rgba(74,53,38,.10);
  --shadow-lg: 0 24px 60px rgba(74,53,38,.16);

  /* ---------- MOTION (phase 2, mais tokens posés) ---------- */
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.65,.05,.36,1);
  --dur-fast:   .2s;
  --dur-mid:    .45s;
  --dur-slow:   .8s;
}

/* ---------- Base réutilisable ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

/* Helpers typo (facultatifs, cohérents entre pistes) */
.u-display{font-family:var(--font-display);font-weight:400;letter-spacing:var(--ls-display);line-height:var(--lh-tight)}
.u-script {font-family:var(--font-script)}
.u-overline{font-size:var(--fs-overline);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold)}
.u-container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.u-measure{max-width:var(--measure)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}