/* ============================================================
   SEREANE — Webfonts
   Fraunces  : serif, éditorial — grands titres + chiffres
   Inter     : UI / data — tabular-nums
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/Fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/Fraunces-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   SEREANE — Couleurs
   « Luxe chaud ». JAMAIS de bleu / navy / gris froid.
   Clair par défaut ; sombre via [data-theme="dark"].
   Tous les neutres sont teintés chaud (vert-olive / espresso).
   ============================================================ */

:root {
  /* ---- OR signature (constant clair + sombre) ---- */
  --gold:            #C8A24C;   /* or signature — accent, marque */
  --gold-strong:     #B8902F;   /* or fort — hover/press, traits */
  --gold-ink:        #8A6420;   /* or-texte — texte sur fond clair */
  --gold-tint:       #F2E8D2;   /* voile doré — fonds d'accent doux */
  --gold-tint-2:     #EADFC4;   /* voile doré +1 */

  /* ---- Neutres CLAIRS (base) ---- */
  --sand-bg:         #F4F1EA;   /* fond application */
  --sand-surface:    #FBFAF6;   /* surface / carte */
  --sand-cream:      #F4ECDE;   /* crème — bandeaux, zones calmes */
  --sand-ink:        #26302B;   /* texte principal (vert-encre chaud) */
  --sand-ink-2:      #6B6256;   /* texte secondaire */
  --sand-ink-3:      #938A7C;   /* texte tertiaire / placeholder */
  --sand-border:     #E4DFD4;   /* bordure */
  --sand-border-2:   #D8D1C2;   /* bordure marquée */
  --sand-hover:      #EFE9DD;   /* survol surface */

  /* ---- Neutres SOMBRES (base) ---- */
  --espresso-bg:       #13100C; /* fond espresso */
  --espresso-surface:  #1F1A12; /* surface */
  --espresso-surface-2:#2A2317; /* surface élevée */
  --espresso-ink:      #F4ECDD; /* texte principal */
  --espresso-ink-2:    #BCB09A; /* texte secondaire */
  --espresso-ink-3:    #8C8068; /* tertiaire */
  --espresso-border:   #342B1D; /* bordure */
  --espresso-border-2: #43381F; /* bordure marquée */
  --espresso-hover:    #292114; /* survol surface */

  /* ---- Statuts CHAUDS (honnêtes, jamais « tout vert ») ---- */
  --status-positive:    #5FB48A;  /* tout va bien */
  --status-positive-bg: #E2F0E6;
  --status-positive-ink:#2F7355;
  --status-wait:        #C5934A;  /* en attente / à surveiller */
  --status-wait-bg:     #F6EAD3;
  --status-wait-ink:    #8A6420;
  --status-alert:       #C5713D;  /* alerte / action requise */
  --status-alert-bg:    #F6E0D2;
  --status-alert-ink:   #9A4E22;
  --status-neutral:     #938A7C;  /* inconnu / non suivi — honnêteté */
  --status-neutral-bg:  #ECE7DC;
  --status-neutral-ink: #6B6256;

  /* ---- Aliases SÉMANTIQUES (clair = défaut) ---- */
  --bg:            var(--sand-bg);
  --surface:       var(--sand-surface);
  --surface-2:     var(--sand-cream);
  --surface-hover: var(--sand-hover);
  --text:          var(--sand-ink);
  --text-2:        var(--sand-ink-2);
  --text-3:        var(--sand-ink-3);
  --text-gold:     var(--gold-ink);
  --border:        var(--sand-border);
  --border-strong: var(--sand-border-2);
  --accent:        var(--gold);
  --accent-strong: var(--gold-strong);
  --accent-tint:   var(--gold-tint);
  --on-accent:     #2A2113;    /* texte sur surface or */

  color-scheme: light;
}

[data-theme="dark"] {
  --bg:            var(--espresso-bg);
  --surface:       var(--espresso-surface);
  --surface-2:     var(--espresso-surface-2);
  --surface-hover: var(--espresso-hover);
  --text:          var(--espresso-ink);
  --text-2:        var(--espresso-ink-2);
  --text-3:        var(--espresso-ink-3);
  --text-gold:     var(--gold);
  --border:        var(--espresso-border);
  --border-strong: var(--espresso-border-2);
  --accent:        var(--gold);
  --accent-strong: var(--gold-strong);
  --accent-tint:   #2E2614;
  --on-accent:     #1A1409;

  --status-positive-bg: #1C2C22;
  --status-positive-ink:#8FD3B0;
  --status-wait-bg:     #2E2613;
  --status-wait-ink:    #E0B872;
  --status-alert-bg:    #2E1B11;
  --status-alert-ink:   #E0996B;
  --status-neutral-bg:  #25201400;
  --status-neutral-bg:  #241E14;
  --status-neutral-ink: #A99E8A;

  color-scheme: dark;
}

/* ============================================================
   SEREANE — Typographie
   Fraunces (serif éditorial) pour titres + chiffres.
   Inter (UI/data, tabular-nums) pour le reste.
   Wordmark SEREANE : capitales sans accents, tracking 0.30em.
   ============================================================ */

:root {
  /* ---- Familles ---- */
  --font-serif: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);
  --font-data:    var(--font-sans);   /* utiliser font-variant-numeric: tabular-nums */

  /* ---- Échelle typographique (éditoriale, généreuse) ---- */
  --text-display: 4.5rem;    /* 72 — héros */
  --text-h1:      3rem;      /* 48 */
  --text-h2:      2.25rem;   /* 36 */
  --text-h3:      1.625rem;  /* 26 */
  --text-h4:      1.25rem;   /* 20 */
  --text-lg:      1.125rem;  /* 18 */
  --text-base:    1rem;      /* 16 */
  --text-sm:      0.875rem;  /* 14 */
  --text-xs:      0.75rem;   /* 12 */
  --text-2xs:     0.6875rem; /* 11 — eyebrow/labels */

  /* ---- Graisses ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Interlignes ---- */
  --leading-tight:  1.08;   /* titres serif */
  --leading-snug:   1.25;
  --leading-normal: 1.5;    /* corps */
  --leading-relaxed:1.65;

  /* ---- Tracking ---- */
  --tracking-display: -0.02em;  /* titres serif resserrés */
  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.08em;  /* eyebrows */
  --tracking-wider:    0.18em;  /* petits labels capitales */
  --tracking-wordmark: 0.30em;  /* SEREANE */
}

/* Aide-mémoire applicable (optionnel) */
.sereane-wordmark {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
}

/* ============================================================
   SEREANE — Espacement
   Beaucoup de respiration. Base 4px, rythme généreux.
   ============================================================ */

:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 */

  /* Largeurs de contenu */
  --measure:      66ch;   /* longueur de lecture confortable */
  --container:    1200px; /* conteneur app */
  --container-lp: 1140px; /* conteneur landing */
}

/* ============================================================
   SEREANE — Rayons, ombres, motion, blur
   Rayons doux (8–28px, pills). Ombres TEINTÉES CHAUD (jamais grises).
   Glass/blur UNIQUEMENT sur le chrome.
   ============================================================ */

:root {
  /* ---- Rayons ---- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;   /* grandes surfaces calmes */
  --radius-pill: 999px;

  /* ---- Ombres chaudes (teinte espresso, jamais gris froid) ---- */
  --shadow-xs:  0 1px 2px rgba(58, 42, 18, 0.05);
  --shadow-sm:  0 1px 3px rgba(58, 42, 18, 0.07), 0 1px 2px rgba(58, 42, 18, 0.05);
  --shadow-md:  0 4px 14px rgba(58, 42, 18, 0.08), 0 1px 3px rgba(58, 42, 18, 0.05);
  --shadow-lg:  0 12px 32px rgba(58, 42, 18, 0.10), 0 2px 8px rgba(58, 42, 18, 0.06);
  --shadow-xl:  0 24px 60px rgba(48, 34, 14, 0.16), 0 6px 18px rgba(48, 34, 14, 0.08);
  --shadow-gold:0 6px 20px rgba(200, 162, 76, 0.28);   /* halo doré — boutons primaires */

  /* Ombre intérieure douce (champs, puits) */
  --shadow-inset: inset 0 1px 2px rgba(58, 42, 18, 0.06);

  /* ---- Anneau focus (chaud, accessible) ---- */
  --ring: 0 0 0 3px rgba(200, 162, 76, 0.40);

  /* ---- Blur / verre (chrome uniquement) ---- */
  --blur-chrome: blur(14px) saturate(1.3); /* @kind other */

  /* ---- Motion — raffinée, jamais bondissante ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.45, 0.05, 0.3, 1); /* @kind other */
  --ease-soft:  cubic-bezier(0.32, 0.72, 0, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
  --dur-slower: 560ms; /* @kind other */
}

[data-theme="dark"] {
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 4px 14px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-xl:  0 24px 60px rgba(0, 0, 0, 0.65), 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-gold:0 6px 22px rgba(200, 162, 76, 0.22);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --dur-slower: 0ms; /* @kind other */
  }
}

/* ============================================================
   SEREANE — Base & resets
   Réglages globaux calmes. Antialiasing, tabular-nums data.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  margin: 0;
}

p { margin: 0; }

/* Chiffres alignés partout (données, prix, compteurs) */
.tnum, .sereane-data { font-variant-numeric: tabular-nums; }

a { color: var(--text-gold); text-decoration: none; }
a:hover { color: var(--accent-strong); }

::selection { background: var(--gold-tint); color: var(--sand-ink); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* Eyebrow / petit label capitales — motif récurrent de la marque */
.sereane-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-gold);
}