/* ==========================================================================
   YEM'S — Base : tokens, reset, typographie, utilitaires
   « Différents par les détails »
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* — Couleurs : espresso (fond), beige (surface), brass (accent) — */
  --espresso-900: #14100D;
  --espresso-800: #1C1613;
  --espresso-700: #241C18;
  --espresso-600: #2E2420;
  --espresso-500: #3B2F29;
  --espresso-400: #4E3F38;

  --beige-50:  #FBF7F1;
  --beige-100: #F4EDE2;
  --beige-200: #E9DECB;
  --beige-300: #DACAB0;
  --beige-400: #C4B195;

  --brass-300: #D9B87A;
  --brass-400: #C9A46A;
  --brass-500: #B08D57;
  --brass-600: #7A5E33; /* 5.19:1 sur beige-100 — WCAG AA */

  --clay-500:  #8C5A3C;   /* accent secondaire, cuir patiné */

  /* — Sémantique — */
  --bg:            var(--espresso-900);
  --bg-elevated:   var(--espresso-800);
  --bg-inverse:    var(--beige-100);
  --surface:       var(--espresso-700);
  --border:        rgba(233, 222, 203, 0.12);
  --border-strong: rgba(233, 222, 203, 0.24);

  --text:          var(--beige-100);
  --text-muted:    rgba(244, 237, 226, 0.62);
  --text-subtle:   rgba(244, 237, 226, 0.52); /* 4.72:1 sur espresso-900 — WCAG AA */
  --text-inverse:  var(--espresso-800);
  --text-inverse-muted: rgba(28, 22, 19, 0.66);

  --accent:        var(--brass-400);
  --accent-strong: var(--brass-500);

  /* — Statuts disponibilité (brief client) — */
  --status-green:  #4C7A50;   /* Au Bénin  */
  --status-amber:  #C08A2E;   /* En route  */
  --status-red:    #A14A3E;   /* Indisponible */

  /* — Typographie — */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;  /* 15 */
  --fs-md:   1.0625rem;  /* 17 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.625rem;   /* 26 */
  --fs-2xl:  2.125rem;   /* 34 */
  /* Les bornes hautes tenaient du poster, pas de la page : 64 px et 102 px
     sur un écran de bureau. Ramenées à 45 px et 67 px — l'échelle reste
     éditoriale, le titre cesse d'occuper l'écran à lui seul. */
  --fs-3xl:  clamp(1.85rem, 3.3vw, 2.8rem);
  --fs-4xl:  clamp(2.4rem, 5vw, 4.2rem);

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-base:  1.68;

  --tracking-wide:  0.08em;
  --tracking-wider: 0.18em;

  /* — Espacement (échelle 4px) — */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Appliqué en haut ET en bas : 8,5rem faisait 272 px de vide entre deux
     sections, multiplié par neuf sections. C'est là que partait la longueur
     de la page. */
  --section-y: clamp(3.25rem, 6vw, 5.75rem);

  /* — Layout —
     Trois largeurs, parce qu'un texte et une barre de navigation n'ont pas
     les mêmes besoins. --container borne la lecture ; --container-wide sert
     au mobilier (header, footer, grilles de produits), qui doit tenir les
     bords sinon la page paraît flotter au milieu de l'écran. */
  --container: 1180px;
  --container-narrow: 700px;
  --container-wide: 1560px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* — Divers — */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow:    0 12px 32px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 70px -28px rgba(0, 0, 0, 0.75);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 420ms;

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--brass-500);
  color: var(--espresso-900);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-md); line-height: var(--lh-snug); }

p { text-wrap: pretty; }

.display  { font-family: var(--font-display); }
.italic-accent {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--brass-300);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brass-300);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.eyebrow--center::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* 46 caractères par ligne. Au-delà de ~50, l'œil perd le début de la ligne
   suivante et la lecture ralentit — c'est ça, « le texte est trop large ». */
.lede {
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 46ch;
}

/* Filet de sécurité : aucun paragraphe courant ne dépasse la mesure, même
   ceux qui n'ont pas de classe. */
.section p:not([class]) { max-width: 62ch; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); position: relative; }

.section--light {
  background: var(--beige-100);
  color: var(--text-inverse);
}

.section--light .lede,
.section--light .text-muted { color: var(--text-inverse-muted); }

.section--light .eyebrow { color: var(--brass-600); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.section-head--center {
  align-items: center;
  text-align: center;
}

.section-head--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

/* auto-fit : les colonnes se replient d'elles-mêmes, sans point de rupture à
   maintenir. min(100%, Xpx) évite le débordement sur très petit écran.
   Les grilles de produits ont leurs propres classes (.collections__grid,
   .shop-grid) : celle-ci ne sert plus qu'aux blocs éditoriaux. */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

@media (max-width: 960px) {
  .section-head--split { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   5. UTILITAIRES
   -------------------------------------------------------------------------- */
.text-muted  { color: var(--text-muted); }
.text-center { text-align: center; }
.mx-auto     { margin-inline: auto; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--beige-100);
  color: var(--espresso-900);
  border-radius: var(--radius);
  font-weight: 600;
}

.skip-link:focus { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   6. MOTIF FIL DE SELLIER (saddle-stitch) — fil conducteur visuel
   -------------------------------------------------------------------------- */
.stitch {
  --stitch-color: var(--brass-500);
  --stitch-len: 11px;
  --stitch-gap: 9px;
  --stitch-weight: 1.5px;
  height: var(--stitch-weight);
  width: 100%;
  background-image: repeating-linear-gradient(
    to right,
    var(--stitch-color) 0,
    var(--stitch-color) var(--stitch-len),
    transparent var(--stitch-len),
    transparent calc(var(--stitch-len) + var(--stitch-gap))
  );
  opacity: 0.55;
  border: 0;
}

/* Variante inclinée : la vraie couture sellier est en épi */
.stitch--angled {
  height: 14px;
  background-image: repeating-linear-gradient(
    68deg,
    var(--stitch-color) 0,
    var(--stitch-color) var(--stitch-weight),
    transparent var(--stitch-weight),
    transparent calc(var(--stitch-weight) + 9px)
  );
  opacity: 0.4;
}

.stitch--vertical {
  width: var(--stitch-weight);
  height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--stitch-color) 0,
    var(--stitch-color) var(--stitch-len),
    transparent var(--stitch-len),
    transparent calc(var(--stitch-len) + var(--stitch-gap))
  );
}

/* Encadré cousu : bordure pointillée en fil de sellier */
.stitch-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.stitch-frame::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: var(--stitch-weight, 1.5px) dashed var(--brass-500);
  border-radius: var(--radius-sm);
  opacity: 0.32;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. TEXTURE GRAIN — profondeur du cuir
   -------------------------------------------------------------------------- */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   8. ANIMATIONS AU SCROLL
   -------------------------------------------------------------------------- */
/* Le contenu situé au-dessus de la ligne de flottaison ne passe pas par
   l'observateur : il s'anime tout seul, en CSS. Deux raisons.

   La première tient à la panne : [data-reveal] démarre à opacity 0 et attend
   que main.js le révèle. Si le script tarde ou échoue — connexion mobile
   coupée, blocage d'un script tiers — le hero reste vide pour toujours. Une
   animation CSS s'exécute quoi qu'il arrive.

   La seconde tient à l'attente : les délais cumulés retardaient la lisibilité
   complète du hero de 1,7 s. Ici, le texte principal est là immédiatement et
   seuls les blocs secondaires glissent. */
.hero [data-reveal] {
  opacity: 1;
  transform: none;
  animation: hero-in 600ms var(--ease-out-expo) both;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Le titre, lui, ne bouge pas du tout : c'est la première chose que le
   visiteur doit lire, elle n'a pas à se faire attendre. */
.hero h1 { opacity: 1; }

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 900ms var(--ease-out-expo),
    transform 900ms var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}