/* =========================================================
   RESTAURANT ACACIA — style.css
   Feuille de style unique (voir claude.md — pas de second fichier CSS)
   ========================================================= */

/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
  --color-primary:      #2D5A27;
  --color-primary-soft: rgba(45, 90, 39, 0.14);
  --color-accent:       #C4783A;
  --color-accent-soft:  rgba(196, 120, 58, 0.16);
  --color-ember:        #4C9A3B; /* vert (août 2026, validé par Carolina) à la place de la braise d'origine #C1401A, sur "ADE" + bouton hero uniquement */
  --color-ember-soft:   rgba(193, 64, 26, 0.18);
  --color-bg:           #F5EFE0;
  --color-bg-dark:      #1C1C1C;
  --color-text:         #1C1C1C;
  --color-text-light:   #6B6B6B;
  --color-white:        #FFFFFF;

  --font-heading: 'Fraunces', Georgia, serif;
  --font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius:      8px;
  --radius-lg:   16px;
  --shadow-soft:    0 4px 20px rgba(28, 28, 28, 0.08);
  --shadow-soft-lg: 0 16px 40px rgba(28, 28, 28, 0.14);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-6: 5.5rem;

  --transition:      0.25s ease;
  --transition-slow: 0.6s ease;

  --container-width: 1160px;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .btn, .card, .nav__links a::after { transition: none; }
}

/* =========================================================
   3. TYPOGRAPHIE
   ========================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text);
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: var(--space-3); }
h3 { font-size: 1.4rem; margin-bottom: var(--space-1); }

p { color: var(--color-text); }

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.lede {
  font-size: 1.15rem;
  color: var(--color-text-light);
  max-width: 60ch;
}

.text-light { color: var(--color-text-light); }

.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark p, .section--dark .lede,
.hero h1, .hero h2, .hero h3, .hero p { color: var(--color-white); }
.section--dark .lede { color: rgba(255, 255, 255, 0.72); }

.section--dark .hours-table__row { color: rgba(255, 255, 255, 0.9); border-bottom-color: rgba(255, 255, 255, 0.15); }

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

.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-4); }

/* Etat "pas de menu du jour" : une seule phrase, pas besoin du même gabarit
   que lorsque les 3 plats du jour sont affichés (voir menu.js, classe posée
   dynamiquement selon le jour/l'heure). */
.menu-today--compact { padding-block: var(--space-2); }
.menu-today--compact .section-head { margin-bottom: var(--space-2); }

.section--dark {
  background: var(--color-bg-dark);
  position: relative;
  overflow: hidden;
}

/* Variante avec une photo en fond, assombrie pour garder le texte lisible.
   Doit être le premier enfant de .section--dark dans le HTML : sans z-index,
   l'ordre du DOM suffit à la faire peindre sous le reste (et sous aucun
   z-index négatif, qui échapperait au fond opaque de .section--dark). */
.section__media {
  position: absolute;
  inset: 0;
}
.section__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.78), rgba(28, 28, 28, 0.9));
}

/* Un élément positionné (.section__media) peint toujours au-dessus du contenu
   statique qui le suit, quel que soit l'ordre dans le DOM — il faut donc que
   tout ce qui vient après soit lui aussi positionné, avec un z-index supérieur,
   pour rester visible par-dessus la photo. */
.section__media ~ * { position: relative; z-index: 1; }

.grid-2, .grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
/* display:grid (règle auteur) l'emporte toujours sur [hidden] (règle du navigateur),
   quelle que soit la spécificité — sans ce correctif, un .grid-3 masqué via l'attribut
   hidden (ex: menu du jour absent) continue de s'afficher et de réserver sa hauteur. */
.grid-2[hidden], .grid-3[hidden] { display: none; }

.grid-2--align-center { align-items: center; }

@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.section-head { max-width: 62ch; margin-bottom: var(--space-4); }
.section-head--center { margin-inline: auto; text-align: center; }

/* =========================================================
   5. COMPOSANTS
   ========================================================= */

/* 5.1 — Nav / en-tête ------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 239, 224, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 0.7rem;
}

.nav__brand { display: flex; align-items: center; gap: 0.65rem; }
.nav__brand img { height: 46px; width: auto; }
.nav__brand span {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.nav__links a {
  position: relative;
  padding-block: 0.3rem;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--color-accent);
  transition: width var(--transition);
}

.nav__links a:hover::after,
.nav__links a.is-active::after { width: 100%; }

.nav__links a.is-active { color: var(--color-primary); }

.nav__lang {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.nav__lang a {
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  color: var(--color-text-light);
}

.nav__lang a.is-active { color: var(--color-accent); background: var(--color-accent-soft); }
.nav__lang-sep { color: var(--color-text-light); opacity: 0.5; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.4rem;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}

@media (max-width: 760px) {
  .nav__toggle { display: flex; }

  .nav__links {
    position: fixed;
    top: 68px;
    right: 0;
    left: 0;
    height: calc(100vh - 68px);
    overflow-y: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4) 1.5rem;
    background: var(--color-bg);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    box-shadow: var(--shadow-soft-lg);
  }

  .nav--open .nav__links { transform: translateX(0); }

  .nav__lang { margin-top: var(--space-2); }
}

/* 5.2 — Hero ------------------------------------------------ */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  padding-block: var(--space-6) var(--space-5);
}

.hero__media {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.1) 0%, rgba(28, 28, 28, 0.82) 100%);
}

.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.hero__content { position: relative; z-index: 1; max-width: 46rem; }
.hero__tagline { font-size: 1.2rem; color: rgba(255, 255, 255, 0.85); margin-block: var(--space-2) var(--space-3); max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Mise en avant "Charbonade" — accroche visuelle du hero */
.hero__charbonade {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 0.95;
}
.hero__charbonade-main {
  display: block;
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  letter-spacing: -0.01em;
  color: var(--color-white);
}
.hero__charbonade-main em {
  font-style: normal;
  color: var(--color-ember);
  -webkit-text-stroke: 1px rgba(245, 239, 224, 0.9);
  paint-order: stroke fill;
}
.hero__charbonade-sub {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.6rem;
}

/* Texture "grille" — fines lignes évoquant les barres d'un grill */
.grill-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 2px,
    transparent 2px, transparent 16px
  );
}

/* Halo braise — dégradé chaud localisé, pas toute la photo */
.ember-glow {
  position: absolute;
  z-index: 0;
  inset: auto 0 0 0;
  height: 55%;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 100% at 25% 100%, var(--color-ember-soft), transparent 70%);
}

/* 5.3 — Boutons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.85rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space: nowrap;
}

.btn--primary { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-soft); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft-lg); }

.btn--accent { background: var(--color-accent); color: var(--color-white); box-shadow: var(--shadow-soft); }
.btn--accent:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft-lg); }

.btn--whatsapp { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-soft); }
.btn--whatsapp:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft-lg); }
.btn--whatsapp svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn--outline { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.7); color: var(--color-white); }
.btn--outline:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-3px); }

.btn--ember { background: var(--color-ember); color: var(--color-white); box-shadow: var(--shadow-soft); }
.btn--ember:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft-lg); }

.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* 5.4 — Cartes ------------------------------------------------ */
.card {
  background: rgba(28, 28, 28, 0.03);
  border: 1px solid rgba(28, 28, 28, 0.08);
  border-radius: var(--radius);
  padding: var(--space-3);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft-lg); }

.dish-card__name { font-family: var(--font-heading); font-size: 1.2rem; }
.dish-card__price { color: var(--color-accent); font-family: var(--font-heading); margin-top: 0.35rem; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  margin-bottom: var(--space-2);
}

.status-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-color, var(--color-white));
  flex-shrink: 0;
}

.status-badge--open { --status-color: #8fd97a; }
.status-badge--closed { --status-color: var(--color-accent); }

.day-badge {
  display: inline-block;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin-bottom: var(--space-3);
}

/* 5.5 — Formulaires --------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }

@media (min-width: 600px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}

.field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid rgba(28, 28, 28, 0.12);
  background: var(--color-white);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.field textarea { resize: vertical; min-height: 7rem; }

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

.form-note { margin-top: var(--space-2); font-size: 0.92rem; color: var(--color-text-light); }

/* Express reservation (WhatsApp) block — bandeau compact plutôt qu'une carte
   élevée (retour client, août 2026) : l'ancienne version (carte blanche à
   ombre, padding généreux, titre + bouton + note répétant 3x le même message)
   pesait visuellement plus lourd que le vrai formulaire juste en dessous, qui
   lui n'a aucun cadre. Un seul rappel du message, taille de bouton standard. */
.reservation-express {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  background: var(--color-primary-soft);
  border-radius: var(--radius);
  padding: 0.9rem 1.25rem;
}

.reservation-express p { margin: 0; color: var(--color-text); font-size: 0.95rem; }
.reservation-express p strong { color: var(--color-primary); }

/* 5.6 — Footer ------------------------------------------------ */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-5);
}

.site-footer a:hover { color: var(--color-accent); }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  position: relative;
  z-index: 1;
}

@media (min-width: 720px) {
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; }
}

.footer__brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--space-1); }
.footer__brand img { height: 40px; }
.footer__brand span { font-family: var(--font-heading); font-size: 1.1rem; }

.footer__title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); margin-bottom: var(--space-2); }

.footer__list { display: flex; flex-direction: column; gap: 0.6rem; color: rgba(255, 255, 255, 0.82); }

.footer__social { display: flex; gap: 0.75rem; margin-top: var(--space-2); }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  transition: background var(--transition), color var(--transition);
}
.footer__social a:hover { background: var(--color-accent); color: var(--color-white); }
.footer__social svg { width: 18px; height: 18px; }

.footer__bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  z-index: 1;
}

/* 5.7 — Motif acacia -------------------------------------------- */
/* Le <svg class="motif"> n'a pas son propre viewBox (seul le <symbol> référencé
   par <use> en a un) : le navigateur n'a alors aucun ratio intrinsèque pour
   calculer height:auto et retombe sur la taille par défaut d'un élément remplacé
   (150px de haut, quelle que soit la largeur). D'où le viewBox répété ici sur
   chaque <svg class="motif"> du HTML, identique à celui du symbole (240 x 150).
   Attention aussi à l'ordre des règles ci-dessous : .motif--watermark doit rester
   déclaré APRÈS .motif pour que sa largeur (380px) l'emporte sur celle de .motif
   (32px), à spécificité égale. */
.motif { width: 32px; height: auto; color: var(--color-primary); }

.motif--watermark {
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 380px;
  height: auto;
  color: var(--color-primary);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}

.divider--acacia {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border: none;
  margin-block: var(--space-5);
}

.divider--acacia::before, .divider--acacia::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 90, 39, 0.35), transparent);
}

.divider--acacia .motif { flex-shrink: 0; width: 38px; color: var(--color-accent); }

/* 5.8 — Placeholders --------------------------------------------- */
.img-placeholder {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(45, 90, 39, 0.9), rgba(28, 28, 28, 0.92));
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-placeholder--hero { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.img-placeholder--wide { aspect-ratio: 16 / 9; }
.img-placeholder--square { aspect-ratio: 1 / 1; }

.img-placeholder .motif { width: 32%; height: auto; color: var(--color-white); opacity: 0.16; }

.img-placeholder[data-caption]::after {
  content: attr(data-caption);
  position: absolute;
  left: 0.9rem;
  bottom: 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.55);
}

.is-placeholder { color: var(--color-text-light); cursor: default; }

/* Vraies photos — même gabarit que les placeholders, sans le dégradé */
.photo-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame--square { aspect-ratio: 1 / 1; }
.photo-frame--wide { aspect-ratio: 16 / 9; }
.is-placeholder:hover { color: var(--color-text-light); }

/* =========================================================
   6. UTILITAIRES REVEAL-ON-SCROLL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible { opacity: 1; transform: none; }
.reveal--delay-1.is-visible { transition-delay: 0.1s; }
.reveal--delay-2.is-visible { transition-delay: 0.2s; }

/* =========================================================
   7. PAGES SPÉCIFIQUES — histoire, menu, réservation
   ========================================================= */

/* Histoire — récit en temps alternés */
.story-beat {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-6);
}

@media (min-width: 780px) {
  .story-beat { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .story-beat--reverse .story-beat__media { order: 2; }
}

/* Horaires / adresse */
.hours-table { display: flex; flex-direction: column; gap: 0.5rem; }
.hours-table__row { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.35rem; border-bottom: 1px dashed rgba(28, 28, 28, 0.1); }
.hours-table__row:last-child { border-bottom: none; }

.map-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); border: none; }
.map-frame iframe { width: 100%; height: 320px; border: none; display: block; }

/* Menu */
.menu-course { margin-bottom: var(--space-4); }
.menu-course__title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--space-2); }
.menu-course__title::after { content: ""; flex: 1; height: 1px; background: rgba(28, 28, 28, 0.12); }

.menu-item { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.6rem; }
.menu-item__name { font-weight: 600; }
.menu-item__desc { display: block; font-size: 0.88rem; color: var(--color-text-light); font-weight: 400; margin-top: 0.15rem; }
.menu-item__price { font-family: var(--font-heading); color: var(--color-accent); white-space: nowrap; }

.menu-today[hidden], .menu-today__empty[hidden] { display: none; }

/* Onglets Repas / Boissons / Vins */
.menu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: var(--space-4);
  border-bottom: 2px solid rgba(28, 28, 28, 0.08);
}
.menu-tab {
  padding: 0.75rem 0.25rem;
  font-weight: 600;
  font-size: 1.05rem;
  font-family: var(--font-heading);
  color: var(--color-text-light);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition);
}
.menu-tab:hover { color: var(--color-text); }
.menu-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-accent); }

.menu-item__region { display: block; font-size: 0.8rem; font-style: italic; color: var(--color-text-light); font-weight: 400; margin-top: 0.15rem; }

/* =========================================================
   8. RESPONSIVE — ajustements globaux restants
   ========================================================= */
@media (max-width: 720px) {
  .section { padding-block: var(--space-5); }
  .hero { min-height: 78vh; }
  .footer__bottom { display: flex; flex-direction: column; gap: 0.4rem; }
}