/* ============================================================
   MY SXM — Design Tokens v2
   Source autoritaire : design/design-system/design-system.html
   + design/design-system/colors_and_type.css
   GPS : 18°07'04" N · 63°03'23" W (Grand-Case, Saint-Martin)
   Palette validée : Sandy Ivory × Gold — session 2026-04-27
   ============================================================ */

/* ============================================================
   @font-face — Self-hosted subsets latin woff2
   Charte v2 : Cormorant Garamond + Inter uniquement
   Voir change OpenSpec font-loading-optimization (P0-PERF-01)
   Source : @fontsource (Google Fonts subset latin)
   ============================================================ */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-300-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-700-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/caveat-500.woff2') format('woff2');
}

/* ============================================================
   PALETTE DEFAULT — Sandy Ivory + Gold
   ============================================================ */

:root,
[data-palette="default"] {
  --bg:        #fdfaf3;
  --ink:       #1a1a1a;
  --ink-soft:  #4a4a4a;
  --gold:      #a87b3f;
  --gold-deep: #876230;
  --gold-soft: #c89a52;
  /* Or lisible SUR FOND SABLE uniquement. Le sable est clair (#ecdcb8) : `--gold`
     n'y atteint que 2,78:1 et `--gold-deep` 4,06:1, tous deux sous le seuil WCAG AA
     de 4,5:1. Celui-ci donne 4,85:1 — une marge, pas un passage de justesse.
     N'employer que dans ce contexte : sur les fonds clairs habituels, `--gold-deep`
     passe déjà (5,31:1) et reste le choix par défaut. */
  --gold-on-sand: #785728;
  --soft:      #f5ede0;
  --line:      #d8cfb6;
  --sand:      #ecdcb8;
  --accent:    var(--gold);
  --quote-bg:  var(--sand);
  --white:     #ffffff;

  /* ----- BRAND UTILITIES (couleurs externes verrouillées) ----- */
  /* WhatsApp brand color — usage exclusivement réservé au bouton WhatsApp flottant */
  --wa-green:       #25D366;

  /* ----- PHOTO PLACEHOLDERS (tons picturaux pré-image) ----- */
  /* Base color + stripe color (1px line repeating 8px) pour .photo-ph[data-tone="*"] */
  --ph-warm:        #e8d5b0;
  --ph-warm-line:   #ead8b8;
  --ph-sage:        #cfd9c1;
  --ph-sage-line:   #c8d2bc;
  --ph-light:       #efe7d4;
  --ph-light-line:  #ece3d0;
  --ph-cool:        #d2dde0;
  --ph-cool-line:   #c8d4d8;
  --ph-sand:        #e6d6ae;
  --ph-sand-line:   #e0cfa6;
  --ph-ink:         #1f1c14;
  --ph-ink-line:    #2a2418;
  /* Pale variants — contexte secondaire (block layout system, lignes 2274/2276 theme.css) */
  --ph-sage-pale:   #e8eee8;
  --ph-cool-pale:   #e8eef0;

  color-scheme: light;
}

/* ---------- WARM — Miel & cacao ---------- */
[data-palette="warm"] {
  --bg:        #fbf2e6;
  --ink:       #2a1f15;
  --ink-soft:  #5a4a3a;
  --gold:      #a87b3f;
  --gold-deep: #8a6230;
  --gold-soft: #c89a52;
  --soft:      #f3e6cf;
  --line:      #d8c5a3;
  --sand:      #e6c896;
  --accent:    var(--gold);
  --quote-bg:  var(--sand);
  color-scheme: light;
}

/* ---------- MAISON — Crème & émeraude ---------- */
[data-palette="maison"] {
  --bg:        #f6f1e6;
  --ink:       #1c2a23;
  --ink-soft:  #4a5b51;
  --gold:      #1e4a3a;
  --gold-deep: #163228;
  --gold-soft: #2f6a55;
  --soft:      #ece4d2;
  --line:      #c8c0a8;
  --sand:      #e0d5b8;
  --accent:    #1e4a3a;
  --quote-bg:  var(--sand);
  color-scheme: light;
}

/* ---------- BRASS — Ivoire & champagne ---------- */
[data-palette="brass"] {
  --bg:        #f4ede0;
  --ink:       #2a2418;
  --ink-soft:  #5e5440;
  --gold:      #8a6a2a;
  --gold-deep: #6e5320;
  --gold-soft: #b08c44;
  --soft:      #ebe0c7;
  --line:      #cdbf9c;
  --sand:      #ddc890;
  --accent:    #8a6a2a;
  --quote-bg:  var(--sand);
  color-scheme: light;
}

/* ---------- ROSE — Terracotta & blush ---------- */
[data-palette="rose"] {
  --bg:        #f7eee2;
  --ink:       #3a221b;
  --ink-soft:  #7a5a4d;
  --gold:      #b86a44;
  --gold-deep: #97532f;
  --gold-soft: #d08c66;
  --soft:      #f0dfd0;
  --line:      #d9bba6;
  --sand:      #e8c7ad;
  --accent:    #b86a44;
  --quote-bg:  #ecc8a8;
  color-scheme: light;
}

/* ---------- SEASIDE — Sel & ardoise ---------- */
[data-palette="seaside"] {
  --bg:        #eef0ec;
  --ink:       #1f2a2c;
  --ink-soft:  #5a6668;
  --gold:      #6a8088;
  --gold-deep: #4d6168;
  --gold-soft: #8aa2aa;
  --soft:      #e0e4e0;
  --line:      #c2cac6;
  --sand:      #cdd6d2;
  --accent:    #6a8088;
  --quote-bg:  var(--sand);
  color-scheme: light;
}

/* ---------- NOIR — Éditorial sombre ---------- */
[data-palette="noir"] {
  --bg:        #0f0f0f;
  --ink:       #f5ede0;
  --ink-soft:  #b8b0a0;
  --gold:      #b8864a;
  --gold-deep: #d4a062;
  --gold-soft: #d4a368;
  --soft:      #1a1a1a;
  --line:      #3a342a;
  --sand:      #2a2218;
  --accent:    #b8864a;
  --quote-bg:  #1f1a12;
  --white:     #161412;
  color-scheme: dark;
}

/* ---------- MIDNIGHT — Navy & laiton ---------- */
[data-palette="midnight"] {
  --bg:        #0e1622;
  --ink:       #ede5d3;
  --ink-soft:  #a5a99e;
  --gold:      #c89a52;
  --gold-deep: #e0b770;
  --gold-soft: #e0b870;
  --soft:      #16202e;
  --line:      #2a3848;
  --sand:      #1f2a38;
  --accent:    #c89a52;
  --quote-bg:  #1a2434;
  --white:     #16202e;
  color-scheme: dark;
}

/* ---------- OBSIDIAN — Noir chaud & bronze ---------- */
[data-palette="obsidian"] {
  --bg:        #14110d;
  --ink:       #f0e6d2;
  --ink-soft:  #aaa292;
  --gold:      #c08856;
  --gold-deep: #d8a06a;
  --gold-soft: #d8a070;
  --soft:      #1f1a13;
  --line:      #3a3024;
  --sand:      #2a2218;
  --accent:    #c08856;
  --quote-bg:  #221d14;
  --white:     #1a1610;
  color-scheme: dark;
}

/* ---------- EMERALD-DARK — Vert profond & champagne ---------- */
[data-palette="emerald-dark"] {
  --bg:        #0d1612;
  --ink:       #ece1c8;
  --ink-soft:  #9aa092;
  --gold:      #c8a862;
  --gold-deep: #d8bc7a;
  --gold-soft: #e0c084;
  --soft:      #142019;
  --line:      #2a3a30;
  --sand:      #1c2a22;
  --accent:    #c8a862;
  --quote-bg:  #1a2620;
  --white:     #14201a;
  color-scheme: dark;
}

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */

:root {
  /* Familles — charte v2 : Cormorant Garamond + Inter uniquement.
     --f-script et --f-mono conservés en alias vers Inter (back-compat des classes
     .coords, .section-label, .pol-caption qui dépendent de ces variables).
     Voir change OpenSpec font-loading-optimization design.md décision 4. */
  --f-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --f-text:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-script:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:    'Inter', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-hand:    'Caveat', 'Bradley Hand', 'Brush Script MT', cursive;

  /* Échelle desktop */
  --t-h1:        300 88px/0.95 var(--f-display);
  --t-h1-italic: italic 300 88px/0.95 var(--f-display);
  --t-h2:        300 56px/1.05 var(--f-display);
  --t-h3:        300 32px/1.2  var(--f-display);
  --t-h4:        500 13px/1.3  var(--f-text);
  --t-body:      400 14px/1.75 var(--f-text);
  --t-body-sm:   400 13px/1.7  var(--f-text);
  --t-pull:      italic 300 24px/1.45 var(--f-display);
  --t-section:   500 10px/1.2  var(--f-text);
  --t-coords:    500 10px/1.2  var(--f-mono);
  --t-mono-sm:   400 10px/1.2  var(--f-mono);
  --t-price:     400 14px/1.4  var(--f-text);
  --t-product:   400 18px/1.3  var(--f-display);
  --t-script:    400 16px/1.3  var(--f-script);

  /* Letter-spacing */
  --ls-h1:      -2px;
  --ls-h2:      -1px;
  --ls-section: 3px;
  --ls-coords:  1.5px;

  /* ============================================================
     ESPACEMENT
     ============================================================ */

  --pad-x:    40px;
  --pad-y:    80px;
  --pad-card: 28px;
  --gap-1:    4px;
  --gap-2:    8px;
  --gap-3:    12px;
  --gap-4:    16px;
  --gap-5:    24px;
  --gap-6:    40px;
  --gap-7:    64px;
  --gap-8:    96px;

  /* ============================================================
     ÉLÉVATION & BORDURES
     Règle : --shadow-polaroid uniquement sur les polaroids
     ============================================================ */

  --shadow-polaroid: 0 6px 18px rgba(40,30,20,0.10);
  --line-w:          1px;
  --radius-0:        0;
  --radius-circle:   50%;

  /* ============================================================
     TRANSITIONS
     ============================================================ */

  --ease:   cubic-bezier(.4,.0,.2,1);
  --t-fast: 160ms;
  --t-base: 240ms;

  /* ============================================================
     LAYOUT
     ============================================================ */

  --container-max:    1440px;
  --container-sm-max: 1120px;

  /* ============================================================
     ALIAS DE COMPATIBILITÉ — theme.css v1
     Permettent à theme.css de fonctionner sans réécriture totale.
     ============================================================ */

  /* Polices (ancien naming) */
  --font-display: var(--f-display);
  --font-body:    var(--f-text);
  --font-mono:    var(--f-mono);
  --font-hand:    var(--f-script);

  /* Tailles texte (ancien scale) */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  40px;
  --text-4xl:  56px;
  --text-hero: clamp(56px, 10vw, 88px);

  /* Line-heights */
  --lh-tight:   0.95;
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* Letter-spacing (ancien) */
  --ls-tight:   -2px;
  --ls-normal:  0;
  --ls-wide:    var(--ls-section);
  --ls-wider:   2px;
  --ls-widest:  3px;

  /* Espacement (ancien --s-*) */
  --s-1:  var(--gap-1);
  --s-2:  var(--gap-2);
  --s-3:  var(--gap-3);
  --s-4:  var(--gap-4);
  --s-5:  var(--gap-5);
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  var(--gap-7);
  --s-9:  var(--gap-8);

  /* Radius — sharp everywhere (éditorial, pas app) */
  --r-xs:          0;
  --r-sm:          0;
  --r-md:          0;
  --r-lg:          0;
  --r-xl:          0;
  --r-pill:        9999px;
  --r-btn-primary: 0;
  --r-btn-pill:    var(--r-pill);

  /* Ombres — uniquement polaroid (sinon transparent) */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Transitions (ancien naming) */
  --transition-fast: var(--t-fast) var(--ease);
  --transition-base: var(--t-base) var(--ease);
  --transition-slow: 350ms var(--ease);

  /* Layout (ancien naming) */
  --container-pad:    var(--pad-x);
  --container-pad-sm: 16px;
}

/* ---------- DENSITY COMPACT (-15%) ---------- */
[data-density="compact"] {
  --pad-x:    34px;
  --pad-y:    60px;
  --pad-card: 24px;
  --gap-5:    20px;
  --gap-6:    34px;
  --gap-7:    54px;
  --gap-8:    80px;
  --t-h1:        300 75px/0.95 var(--f-display);
  --t-h2:        300 48px/1.05 var(--f-display);
  --t-h3:        300 28px/1.2  var(--f-display);
  --t-body:      400 13px/1.7  var(--f-text);
}

/* ---------- TABLETTE (768-1023px) ---------- */
@media (max-width: 1023px) and (min-width: 768px) {
  :root {
    --pad-x:  24px;
    --pad-y:  64px;
  }
}

/* ---------- MOBILE (≤767px) ---------- */
@media (max-width: 767px) {
  :root {
    --pad-x:  16px;
    --pad-y:  48px;
    --t-h1:   300 56px/0.98 var(--f-display);
    --t-h2:   300 40px/1.08 var(--f-display);
    --t-body: 400 13px/1.8  var(--f-text);
  }
}

/* ============================================================
   DEFAULTS SÉMANTIQUES
   ============================================================ */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img  { max-width: 100%; display: block; }
a    { color: inherit; text-decoration: none; }

h1   { font: var(--t-h1); letter-spacing: var(--ls-h1); margin: 0; }
h2   { font: var(--t-h2); letter-spacing: var(--ls-h2); margin: 0; }
h3   { font: var(--t-h3); margin: 0; }
h4   { font: var(--t-h4); text-transform: uppercase; letter-spacing: var(--ls-section); color: var(--gold); margin: 0; }
p    { font: var(--t-body); margin: 0; }

::selection { background: var(--gold); color: var(--bg); }

/* ============================================================
   UTILITAIRES TYPOGRAPHIQUES
   ============================================================ */

.h1-display {
  font: var(--t-h1);
  letter-spacing: var(--ls-h1);
}
.h1-display-italic {
  font: var(--t-h1-italic);
  letter-spacing: var(--ls-h1);
}
.h2-display {
  font: var(--t-h2);
  letter-spacing: var(--ls-h2);
}
.h3-display { font: var(--t-h3); }

.section-label {
  font: var(--t-section);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--gold);
  display: inline-block;
  font-feature-settings: "tnum" 1;
}

.coords-stamp,
.coords {
  font: var(--t-coords);
  letter-spacing: var(--ls-coords);
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-feature-settings: "tnum" 1;
}

.eyebrow-mono {
  font: var(--t-mono-sm);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-feature-settings: "tnum" 1;
}

.pull-quote {
  font: var(--t-pull);
  color: var(--ink);
}

.f-display         { font-family: var(--f-display); font-weight: 300; }
.f-display-italic  { font-family: var(--f-display); font-weight: 400; font-style: italic; }
.f-script          { font-family: var(--f-script); font-weight: 400; font-style: italic; }
.f-mono            { font-family: var(--f-mono); font-weight: 400; font-feature-settings: "tnum" 1; letter-spacing: 1px; }

/* ============================================================
 * PALETTE BLOCKSY → CHARTE v2
 * Le thème parent colore ses composants résiduels (pagination
 * .ct-pagination, liens, boutons de secours) via ses variables
 * --theme-palette-color-N, restées sur le bleu Blocksy par
 * défaut (#2872fa). On les mappe sur les tokens v2 pour que
 * tout composant parent non surchargé retombe dans la charte.
 * ============================================================ */
:root {
  --theme-palette-color-1: var(--gold);       /* primary */
  --theme-palette-color-2: var(--gold-deep);  /* primary hover */
  --theme-palette-color-3: var(--ink);        /* texte */
  --theme-palette-color-4: var(--ink);        /* titres */
  --theme-palette-color-5: var(--soft);       /* surface */
  --theme-palette-color-6: var(--line);       /* bordures */
  --theme-palette-color-7: var(--bg);         /* fond */
  --theme-palette-color-8: var(--white);
  --theme-link-initial-color: var(--gold);
  --theme-link-hover-color: var(--gold-deep);
  --theme-button-background-initial-color: var(--ink);
  --theme-button-background-hover-color: var(--ink);
  --theme-button-text-initial-color: var(--bg);
  --theme-button-text-hover-color: var(--bg);
}