/* ============================================================
   Les adresses de Jimin — globals.css
   Source de vérité : CHARTE_GRAPHIQUE.txt
   ============================================================ */

/* Aucune police importée ici : les pages du carnet chargent DM Sans, Gowun Dodum et Hahmlet (layout.css), la page
   de vente ses propres coupes (carnet.html). Playfair Display n'est plus chargée depuis l'étape 2 (docs/14 §5) :
   seul l'écran du mot de passe (auth-gate.js, que l'écran d'accès remplace) la nomme encore, il passe en Georgia. */

:root {
  /* ——— Couleurs (charte) ——— */
  --color-primary: #D17B6E;
  --color-primary-dark: #b8655a;
  --color-secondary: #61210F;
  --color-accent: #F9DF74;
  --color-accent-hover: #f7d44a;
  --color-green: #678D58;

  --bg-white: #FFFFFF;
  --bg-beige: #FDF8F3;
  --bg-warm: #F9EDCC;
  --bg-green-light: #e8f0e4;

  --text-primary: #2B1810;
  --text-secondary: #5C4033;
  --text-muted: #8B7355;
  --border: #E8D5C4;

  /* ——— Typographie ——— */
  --font-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system;

  --fs-display: clamp(2.8rem, 6vw + 1rem, 5.5rem);
  --fs-h1: clamp(2rem, 3vw + 1rem, 3.2rem);
  --fs-h2: clamp(1.6rem, 1.5vw + 1rem, 2.4rem);
  --fs-h3: clamp(1.15rem, 0.5vw + 1rem, 1.45rem);
  --fs-body: 1rem;
  --fs-small: 0.85rem;
  --fs-micro: 0.75rem;

  /* ——— Le système du carnet (docs/14_REVUE_DESIGN.md §3) ———
     Mêmes noms que carnet.html, qui les redéfinit dans .pv : la page de vente n'en dépend pas.
     Rien ne les lit encore ; les pages y passent aux étapes 2 et 3. Taille / interligne, téléphone d'abord,
     bureau plus bas. (--t-fast, --t-med et --t-slow, plus bas, sont des durées.) */
  --t-display: 2.25rem;  --l-display: 2.5rem;    /* 36 / 40 : un seul titre de page */
  --t-titre: 1.5rem;     --l-titre: 1.75rem;     /* 24 / 28 : titres de section */
  --t-accroche: 1.25rem; --l-accroche: 1.75rem;  /* 20 / 28 : chapeau de 3 lignes au plus, nom dans une carte, phrase courte de Jimin */
  --t-corps: 1rem;       --l-corps: 1.5rem;      /* 16 / 24 : paragraphes, avis, listes, adresses, horaires, boutons */
  --t-petit: 0.875rem;   --l-petit: 1.25rem;     /* 14 / 20 : infos annexes, étiquettes, pied de page ; rien en dessous */
  /* Espacements, sept valeurs : 4 · 8 · 16 · 24 · 32 · 64 · 96 px (icône et texte · dans un groupe · entre paragraphes ·
     entre cartes et sur les côtés · sous le bandeau · entre sections sur téléphone · entre sections sur bureau).
     Une marge et un espace intérieur ne s'additionnent jamais. */
  --gouttiere: 24px;

  /* ——— Espacements ——— */
  --section-pad-y: 100px;
  --section-pad-x: var(--gouttiere); /* les côtés : 24 px, téléphone compris (docs/14, étape 3) */
  --max-wide: 1200px;
  --max-narrow: 800px;
  --gap: 24px;

  /* ——— Rayons ——— */
  --r-std: 12px;
  --r-large: 20px;
  --r-pill: 100px;

  /* ——— Ombres (charte, teintées brun) ——— */
  --shadow-soft: 0 4px 24px rgba(97, 33, 15, 0.08);
  --shadow-strong: 0 8px 40px rgba(97, 33, 15, 0.12);

  /* ——— Transitions ——— */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 200ms;
  --t-med: 450ms;
  --t-slow: 800ms;
}

@media (max-width: 768px) {
  :root { --section-pad-y: 64px; }
}

/* Le système du carnet sur bureau, à partir de 900 px comme carnet.html ; --t-petit ne change pas. */
@media (min-width: 900px) {
  :root {
    --t-display: 3rem;      --l-display: 3.25rem;   /* 48 / 52 */
    --t-titre: 1.875rem;    --l-titre: 2.25rem;     /* 30 / 36 */
    --t-accroche: 1.375rem; --l-accroche: 2rem;     /* 22 / 32 */
    --t-corps: 1.0625rem;   --l-corps: 1.75rem;     /* 17 / 28 */
  }
}

/* ——— Reset ——— */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }

/* ——— Typographie ——— */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.1; margin: 0; color: var(--color-secondary); letter-spacing: -0.01em; }
.serif { font-family: var(--font-serif); }
.sans  { font-family: var(--font-sans); }
.italic { font-style: italic; }

.display { font-family: var(--font-serif); font-size: var(--fs-display); font-weight: 500; line-height: 0.95; letter-spacing: -0.02em; color: var(--color-secondary); }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }

.lead { font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.5; color: var(--text-secondary); font-weight: 400; }
.body { font-size: var(--fs-body); line-height: 1.7; color: var(--text-primary); }
.small { font-size: var(--fs-small); color: var(--text-secondary); }
.micro { font-size: var(--fs-micro); color: var(--text-muted); letter-spacing: 0.04em; }

/* Le coréen, toujours droit et jamais espacé lettre par lettre (docs/14 §3). Sur le carnet, Gowun Dodum le dessine
   (--font-sans de layout.css). Les classes coréennes propres aux pages sont regroupées ici ; elles gardent leur taille
   et leur couleur, et ne redéclarent ni police ni style. */
.hangeul, .han, .qx-han, .q-hangeul-big, .lieu-hangeul, .hangeul-sub, .hangeul-big, .qpin-hangeul, .lpop-han, .han-small, .han-watermark, .han-bg {
  font-family: var(--font-sans); font-style: normal; font-synthesis: none; letter-spacing: 0; word-break: keep-all; overflow-wrap: anywhere;
}
.hangeul { color: var(--color-primary); font-weight: 400; }
.eyebrow { font-family: var(--font-sans); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-primary); font-weight: 500; }

/* ——— Utilitaires ——— */
.container { max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--section-pad-x); }
.container-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 var(--section-pad-x); }
.section { padding: var(--section-pad-y) 0; }
.bg-beige { background: var(--bg-beige); }
.bg-warm { background: var(--bg-warm); }
.bg-secondary { background: var(--color-secondary); color: var(--bg-warm); }
.rule { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ——— Boutons ——— */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 16px 32px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 0.95rem;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast);
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-secondary);
  box-shadow: 0 4px 16px rgba(249, 223, 116, 0.35);
}
.btn-primary:hover { background: var(--color-accent-hover); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.btn-ghost:hover { background: var(--color-secondary); color: var(--bg-warm); }
.btn-coral {
  background: var(--color-primary);
  color: #fff;
  padding: 10px 22px;
  font-size: 0.9rem;
}
.btn-coral:hover { background: var(--color-primary-dark); }
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }

/* ——— Badges ——— */
.badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.badge-eyebrow { background: rgba(209, 123, 110, 0.12); color: var(--color-primary); }
.badge-favori  { background: var(--color-accent); color: var(--color-secondary); }
.badge-open    { background: var(--bg-green-light); color: var(--color-green); }
.badge-closed  { background: #f3ece5; color: var(--text-muted); }
.badge-warn    { background: rgba(209, 123, 110, 0.15); color: var(--color-primary-dark); }

/* ——— Cards ——— */
.card {
  background: var(--bg-white);
  border-radius: var(--r-std);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }
.card-body { padding: 24px; }

/* ——— Image aspect ratios ——— */
.ar-4-3 { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.ar-1-1 { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.ar-3-4 { aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.ar-16-9 { aspect-ratio: 16/9; object-fit: cover; width: 100%; }

/* ——— Grille ——— */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ——— Placeholder images ——— */
.placeholder-img {
  background:
    repeating-linear-gradient(45deg, var(--bg-beige) 0 8px, transparent 8px 16px),
    var(--bg-warm);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: var(--text-muted);
  text-align: center; padding: 1rem;
}

/* ——— Scroll reveals ——— */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-slow { transition-duration: 1400ms; }

/* ——— Focus accessible ——— */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }

/* ——— Cibles tactiles >= 44px sur mobile (WCAG 2.5.5 / Apple HIG) ———
   min-width/min-height surchargent les width/height fixes (même injectés par JS) ;
   flex:none empêche l'écrasement en conteneur flex (cas du ✓ du bandeau Hangeul). */
@media (max-width: 900px) {
  .burger,
  .surprise-btn,
  .wordmark-chime,
  .pronounce-btn,
  .han-speak,
  .hangeul-onboard .close {
    min-width: 44px;
    min-height: 44px;
    flex: none;
  }
}