/* ==========================================================================
   PIZZA FIFI — tokens & base  (direction « Soleil de Juan » — clair, chaud, appétissant)
   Reconstruction ui-ux-pro-max : fond crème chaud, rouge tomate appétissant + or,
   Playfair Display (display) + Karla (texte). Photo-forward, lumineux, convivial.
   ========================================================================== */

/* Polices de repli métriques (anti-CLS sur le H1 héro) */
@font-face {
  font-family: "Playfair Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 108%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Karla Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 99%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%;
}

:root {
  /* — Couleurs (direction claire/chaude) — */
  --bg:        #FCF5EC;   /* crème chaud — fond principal (90% des surfaces) */
  --bg-2:      #F6E9D6;   /* crème plus dense — bandeaux, sections alternées */
  --surface:   #FFFFFF;   /* blanc pur — cartes, panier, modale */
  --surface-2: #FFF8EE;   /* blanc crémeux — strates secondaires */

  --ember:     #DC2626;   /* ROUGE tomate appétissant — primaire, CTA, prix actif */
  --ember-deep:#B91C1C;   /* rouge foncé — survols, ombrages de marque */
  --amber:     #CA8A04;   /* OR chaud — accents, soulignés, sceau */
  --amber-light:#EAB308;  /* or éclairci — surbrillances rares */
  --dough:     #FFF8EE;   /* mie — surfaces chaudes rares */
  --dough-dim: #B98A5E;   /* texte/filets farinés sur clair */
  --basil:     #4D7C3A;   /* sémantique : végé / frais */
  --basil-lite:#3F6B2E;   /* basilic foncé — lisible sur clair */
  --sanmarzano:#C4342B;   /* sémantique : épuisé / alerte (rouge profond) */
  --sanmarzano-lite:#9A241C;
  --olive:     #5B6236;   /* accent secondaire chaud (olive méditerranéenne) */

  --line:      #ECDDC8;   /* filets & bordures chaleureux (jamais gris froid) */
  --line-2:    #E0CBAE;   /* bordure un peu plus marquée */
  --text-hi:   #2A1710;   /* brun chaud profond — titres, jamais #000 */
  --text:      #3E261B;   /* corps de texte */
  --text-lo:   #8A6A53;   /* taupe chaud — secondaire, AA sur crème */

  /* Halo radial chaud (seul dégradé toléré, doux) */
  --sun-core: radial-gradient(circle at 50% 40%, rgba(234,179,8,.28) 0%, rgba(220,38,38,.10) 42%, rgba(252,245,236,0) 72%);
  /* Ombres chaudes et douces (lumière du jour) */
  --shadow-sm: 0 2px 8px -3px rgba(120,70,40,.18);
  --shadow:    0 14px 34px -18px rgba(150,60,30,.28), 0 4px 12px -8px rgba(120,70,40,.16);
  --shadow-lg: 0 30px 70px -34px rgba(150,55,25,.34), 0 10px 26px -16px rgba(120,70,40,.18);
  --shadow-warm: var(--shadow);   /* réintroduit (utilisé ~11× dans styles.css ; était mort → surfaces à plat) */

  /* — Typographie — */
  --font-display: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
  --font-text: 'Karla', 'Karla Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --step--1: .8125rem;
  --step-0:  clamp(1rem, .97rem + .15vw, 1.0625rem);
  --step-1:  clamp(1.2rem, 1.08rem + .55vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.25rem + .9vw, 1.9rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.6vw, 2.55rem);
  --step-4:  clamp(2.25rem, 1.8rem + 2.2vw, 3.2rem);    /* H2 section */
  --step-5:  clamp(2.7rem, 2.1rem + 3vw, 4.2rem);
  --step-6:  clamp(2.9rem, 2.2rem + 3.6vw, 5.2rem);     /* hero display — CONTENU, pas géant */

  /* — Espacement (baseline 8px) — */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;   --space-7: 3rem;   --space-8: 4rem;
  --space-9: 6rem;   --space-10: 8rem;  --space-11: 10rem; --space-12: 12.5rem;

  /* — Rayons / durées / couches — */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;
  --t-fast: 160ms; --t-base: 300ms; --t-slow: 520ms;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-back: cubic-bezier(.16,1,.3,1);   /* expo doux (pas de bounce — anti-slop) */
  --z-nav: 60; --z-cart: 80; --z-modal: 100; --z-toast: 120;
  --maxw: 1240px;
  --gutter: 28px;
  --margin: clamp(20px, 5vw, 80px);
}

/* — Reset — */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, canvas, video { 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: 3px solid var(--ember); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(220,38,38,.18); color: var(--text-hi); }

/* — Typo de base — */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; color: var(--text-hi); }
h1 { font-size: var(--step-6); line-height: 1.0; letter-spacing: -.01em; }
h2 { font-size: var(--step-4); letter-spacing: -.01em; }
h3 { font-size: var(--step-2); }
p { max-width: 64ch; }
strong, b { font-weight: 700; }
em { font-style: italic; }

/* mots du métier : italique Playfair couleur rouge (fil rouge appétissant) */
.metier { font-style: italic; color: var(--ember); }
.seal { font-family: var(--font-display); font-style: italic; font-weight: 600; letter-spacing: .02em; color: var(--amber); }

/* — Primitives layout / a11y — */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--margin); }
.kicker {
  font-family: var(--font-text); font-weight: 700; font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ember);
  display: inline-flex; align-items: center; gap: .6em;
}
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.heat-rule { height: 2px; border: 0; background: linear-gradient(90deg, var(--ember), var(--amber) 60%, transparent); opacity: .6; border-radius: 2px; }

.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: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-150%);
  background: var(--ember); color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm); font-weight: 700;
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* prix : tabular, € fin */
.price { font-family: var(--font-text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ember); }
.price .eur { font-weight: 600; color: var(--amber); font-size: .72em; vertical-align: .32em; margin-left: .1em; }

/* garde-fou mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}