/* =============================================================
   HUÎTRES GIGAS MEDULI / FERME EAU MÉDOC
   Design tokens — colors, typography, spacing, radii, shadows.
   Source : "01 — Charte graphique web" (charte officielle).
   ============================================================= */

/* ─── Webfonts (fournis avec le design system, voir /fonts) ─── */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/DMSerifDisplay-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/DMSerifDisplay-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;            /* variable axe wght */
  font-display: swap;
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations");
}

:root {
  /* ───────────── Couleurs primaires (bleu Médoc) ───────────── */
  --color-primary:        #034B86; /* Bleu Médoc — logo, H1, CTA, liens */
  --color-primary-dark:   #022F55; /* Bleu profond — hover, footer */
  --color-primary-light:  #3A7AB0; /* Bleu brume — états 2nd, bordures actives */

  /* ─────────── Couleurs secondaires (accents naturels) ─────── */
  --color-sand:           #E8DCC4; /* Sable — fonds de section alternés */
  --color-foam:           #F4F0E8; /* Écume — fonds très clairs, encarts info */

  /* ───────────────────── Neutres ────────────────────────── */
  --color-white:          #FFFFFF;
  --color-gray-50:        #F8F9FA; /* Fond de cartes, alternance */
  --color-gray-200:       #E5E7EB; /* Bordures, séparateurs */
  --color-gray-500:       #6B7280; /* Texte secondaire */
  --color-gray-800:       #1F2937; /* Texte principal (préféré au noir pur) */

  /* ─────────────────── États UI ──────────────────────────── */
  --color-success:        #15803D;
  --color-error:          #B91C1C;
  --color-info:           #034B86; /* = primaire */
  --color-warning:        #B45309;

  /* ─────────── Rôles sémantiques (utilitaires) ───────────── */
  --fg-1: var(--color-gray-800);   /* Texte principal */
  --fg-2: var(--color-gray-500);   /* Texte secondaire */
  --fg-on-primary: var(--color-white);
  --bg-1: var(--color-white);      /* Fond principal */
  --bg-2: var(--color-gray-50);    /* Fond de cartes alternatif */
  --bg-foam: var(--color-foam);    /* Fond d'encart doux */
  --bg-sand: var(--color-sand);    /* Fond de section chaud */
  --bg-marine: var(--color-primary);     /* Section sombre / footer */
  --bg-marine-dark: var(--color-primary-dark);
  --border-soft: var(--color-gray-200);
  --link: var(--color-primary);
  --link-hover: var(--color-primary-dark);

  /* ─────────────────── Typographie ───────────────────────── */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Tailles (desktop) */
  --fs-h1: 56px;   /* DM Serif Display 400 */
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 20px;   /* Inter 600 */
  --fs-body-l: 18px;  /* corps par défaut (public âgé) */
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-button: 16px;

  /* Interlignes */
  --lh-title: 1.2;
  --lh-body: 1.65;

  /* ─────────────────── Espacements (×4px) ────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ─────────────────── Rayons ────────────────────────────── */
  --radius-sm: 8px;   /* boutons, inputs */
  --radius-md: 12px;  /* cartes */
  --radius-lg: 16px;  /* images héros */
  --radius-full: 999px;

  /* ─────────────────── Ombres ────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(3, 75, 134, 0.12); /* teintée bleu Médoc */

  /* ─────────────────── Layout ────────────────────────────── */
  --container-max: 1200px;
  --container-pad-mobile: 24px;
  --container-pad-desktop: 48px;
  --section-pad-mobile: 64px;
  --section-pad-desktop: 96px;
}

/* ───────────────────────────────────────────────────────────
   Resets légers
   ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ───────────────────────────────────────────────────────────
   Élements sémantiques HTML (h1-h6, p, etc.)
   ─────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--color-primary);
  margin: 0 0 var(--space-6);
  letter-spacing: -0.005em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
h4 { font-size: var(--fs-h4); }
h5 { font-size: 18px; }
h6 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; }

p {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}

small, .text-small { font-size: var(--fs-small); color: var(--fg-2); }

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--link-hover); }

::selection { background: var(--color-primary); color: #fff; }

/* Mobile-first overrides — appliquées en dessous de 768px */
@media (max-width: 767px) {
  :root {
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-body-l: 17px;
  }
}

/* ───────────────────────────────────────────────────────────
   Utilitaires usuels (optionnels — pratique pour les previews)
   ─────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-desktop);
}
@media (max-width: 767px) {
  .container { padding-inline: var(--container-pad-mobile); }
}

.kicker {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-light);
}

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
}