/* =========================================================================
   L'Arène Sandwicherie — feuille de style principale
   Design source : « L'Arène Sandwicherie.dc.html » (Claude Design)
   ========================================================================= */

/* ------------------------------ Polices --------------------------------- */
/* THEMORIX : gros titres. Un seul poids fourni. */
@font-face {
  font-family: 'THEMORIX';
  src: url('../fonts/themorix.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Londrina Solid : texte courant. Quatre poids, un seul nom de famille
   pour piloter l'épaisseur avec font-weight comme n'importe quelle police. */
@font-face {
  font-family: 'Londrina Solid';
  src: url('../fonts/LondrinaSolid-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Londrina Solid';
  src: url('../fonts/LondrinaSolid-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Londrina Solid';
  src: url('../fonts/LondrinaSolid-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Londrina Solid';
  src: url('../fonts/LondrinaSolid-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------- Tokens -------------------------------- */
:root {
  /* Couleurs */
  --red:        #f13b3b;
  --cream:      #faf0e9;
  --cream-2:    #fcf0e7;
  --card:       #f3e5dc;
  --ink:        #6b1113;
  --ink-soft:   #7a2b22;
  --light:      #fdf3ec;

  /* Typo */
  --display: 'THEMORIX', 'Arial Black', system-ui, sans-serif;
  --body:    'Londrina Solid', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rythme */
  --gut: clamp(20px, 4.4vw, 56px);   /* marge horizontale des sections */
  --max: 1680px;                     /* largeur max de la page          */

  /* THEMORIX pose ses capitales tout en haut de la boîte de ligne
     (ascendante 762 / descendante 314 pour une capitale de 750) : un texte
     tout en capitales paraît .151em trop haut dans sa boîte. On rattrape cet
     écart partout où le texte doit être centré dans un cadre. */
  --caps-lift: .151em;
}

/* ------------------------------- Reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300; /* Londrina Solid Light : c'est le poids « fin » demandé pour le corps de texte */
  /* Londrina Solid est une police étroite (chasse moyenne 0.44 em contre ~0.55
     pour une grotesque classique) : sans un peu d'air entre les lettres, le
     texte courant paraît tassé. */
  letter-spacing: .015em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: opacity .18s ease, background-color .18s ease, color .18s ease;
}
a:hover { opacity: .78; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--light);
  color: var(--ink);
  padding: 14px 22px;
  font-family: var(--display);
  font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gut);
}

/* ------------------------------ Boutons -------------------------------- */
.btn {
  --btn-pad-y: 11px;
  display: inline-block;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .05em;
  /* Le letter-spacing s'ajoute après la dernière lettre : on rend la même
     valeur à gauche pour que le label reste centré horizontalement. */
  text-indent: .05em;
  border-radius: 999px;
  /* Padding vertical dissymétrique : voir --caps-lift. */
  padding: calc(var(--btn-pad-y) + var(--caps-lift)) 30px calc(var(--btn-pad-y) - var(--caps-lift));
  white-space: nowrap;
}

.btn--ghost {
  color: var(--light);
  border: 2px solid var(--light);
}
.btn--ghost:hover {
  background: var(--light);
  color: var(--red);
  opacity: 1;
}

.btn--lg {
  --btn-pad-y: 17px;
  font-size: clamp(16px, 1.4vw, 19px);
  letter-spacing: .045em;
  text-indent: .045em;
  padding-inline: 40px;
}

/* ================================ HERO ================================== */
.hero {
  position: relative;
  background: var(--red);
  min-height: 780px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Dragon en filigrane. dragon-filigrane.png est la copie de Dragon.png dont
   le trait noir a été reteinté en #c4342f : posé à 61 % sur le rouge du hero,
   il donne le trait à peine plus sombre du design. Une simple <img>, donc
   aucun masque ni aspect-ratio en jeu. */
.hero__dragon {
  position: absolute;
  right: -4%;
  bottom: -2%;
  width: 58%;
  min-width: 540px;
  max-width: none;                /* le reset global limite les images à 100 % */
  height: auto;
  opacity: .41;
  pointer-events: none;
  user-select: none;
}

/* Sandwichs du hero : tous posés au même endroit, seul celui qui porte
   .is-active est visible. La rotation est pilotée par js/main.js, et le
   fondu se fait ici pour ne rien animer en JavaScript. */
.hero__sandwich {
  position: absolute;
  z-index: 1;                     /* au-dessus du dragon et de son fondu */
  right: -16%;
  bottom: 26%;
  width: 68%;
  min-width: 560px;
  max-width: none;
  height: auto;
  --sw-scale: 1;                  /* rattrapage par visuel, voir plus bas */
  transform: rotate(-8deg) scale(var(--sw-scale));
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
  user-select: none;
}
.hero__sandwich.is-active { opacity: 1; }

/* Le Chin-chin est photographié plus court que les autres (4019 px de
   baguette contre 4590 pour la plus grande) : on le remet à l'échelle du
   reste de la série. */
.hero__sandwich--chin-chin { --sw-scale: 1.12; }

/* Le bas du hero se fond vers le rouge : sans ça le dragon est tranché net
   par la déchirure de papier de la section suivante. Un dégradé posé
   par-dessus plutôt qu'un masque, qui lui échouerait sans rien afficher.
   rgba() reprend --red, une couleur transparente devant rester la même
   teinte pour éviter une bande grisâtre au fondu. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background: linear-gradient(180deg, rgba(241, 59, 59, 0) 0%, var(--red) 82%);
  pointer-events: none;
}

/* ------------------------------ En-tête -------------------------------- */
/* Grille en trois colonnes plutôt qu'une rangée flex : les deux colonnes
   latérales font 1fr chacune, donc la navigation est centrée sur l'écran et
   non dans la place laissée entre le logo et le bloc de droite, plus large. */
.site-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 3.4vw, 48px);
  padding: 26px var(--gut);
  max-width: var(--max);
  width: 100%;
  margin-inline: auto;
}

.site-header__logo { justify-self: start; }
.site-header__logo img {
  width: clamp(77px, 7.7vw, 115px);
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.1vw, 44px);
  margin: 0;
  font-family: var(--display);
  font-size: clamp(14.3px, 1.155vw, 16.5px);
  letter-spacing: .05em;
  color: var(--light);
}

/* Le CTA et le téléphone dupliqués dans <nav> ne servent qu'au panneau mobile */
.nav__cta,
.nav__tel { display: none; }

/* Liens nus de l'en-tête (tout sauf les boutons entourés) : ils passent au
   brun foncé des sections du bas au survol, au lieu du simple fondu global. */
.nav a:not(.btn):hover,
.site-header__tel:hover {
  color: var(--ink);
  opacity: 1;
}

/* Téléphone collé au bouton MENU, à droite de l'en-tête */
.site-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.3vw, 20px);
}
/* Le label du bouton suit les autres textes de l'en-tête ; le .btn de base
   reste à 15px pour le reste du site. */
.site-header__cta { font-size: 16.5px; }

.site-header__tel {
  font-family: var(--display);
  font-size: clamp(14.3px, 1.155vw, 16.5px);
  letter-spacing: .05em;
  color: var(--light);
  white-space: nowrap;
  /* Même descente que le label du bouton voisin, pour rester à son niveau. */
  padding-top: calc(var(--caps-lift) * 2);
}

/* ------------------------------- Burger -------------------------------- */
.burger {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: 2px solid var(--light);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  flex: none;
}
.burger span {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--light);
  transform: translateX(-50%);
  transition: transform .25s ease, opacity .2s ease;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }

.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -6px) rotate(-45deg); }

/* ---------------------------- Contenu hero ----------------------------- */
.hero__content {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 7vw, 96px) var(--gut) clamp(64px, 8vw, 110px);
  max-width: var(--max);
  width: 100%;
  margin-inline: auto;
}

.hero__title {
  font-family: var(--display);
  color: var(--light);
  font-size: clamp(42px, 7.6vw, 96px);
  line-height: .94;
  /* Le -.015em du design visait Archivo Black. THEMORIX a déjà une chasse
     large : on repasse en positif léger (gros corps = tracking discret). */
  letter-spacing: .01em;
  margin-bottom: clamp(22px, 2.7vw, 34px);
  max-width: 720px;
}

.hero__lead {
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.32;   /* même serrage que .card__desc */
  color: var(--light);
  max-width: 500px;
  margin-bottom: clamp(30px, 3.4vw, 44px);
  text-wrap: pretty;
}

/* =============================== LA CARTE =============================== */
.carte {
  position: relative;
  background: var(--cream);
  padding-bottom: clamp(70px, 10vw, 130px);
}

.carte__tear {
  width: 100%;
  height: auto;
  margin-top: -1px;
}

.carte__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-top: clamp(24px, 3.2vw, 40px);
  margin-bottom: clamp(36px, 5.2vw, 66px);
}

.section-title {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 62px);
  line-height: 1;
  letter-spacing: .015em;
}

/* Trait de soulignement (assets/underline.png, 3824 × 117). Le PNG est très
   large : une largeur laissée en pourcentage laisse ses 3824 px intrinsèques
   servir de largeur au parent, et le bloc titre de la carte passait ainsi à
   1019 px pour un titre de 636. D'où une largeur en pixels ci-dessous, et un
   plafond en pixels partout où le pourcentage reste utile. Les dimensions du
   fichier sont aussi reprises en attributs width/height dans le HTML, pour que
   le navigateur réserve la bonne hauteur avant le chargement.
   max-width est neutralisé : le trait doit pouvoir déborder de son parent,
   sinon le reset global le rogne du côté où il dépasse. */
.underline { height: auto; max-width: none; }

/* « LES COMBATTANTS » mesure 10.26 em en THEMORIX, letter-spacing compris, et
   .section-title est en clamp(32px, 5vw, 62px) : --title-w est donc la
   largeur du titre au pixel près, à toutes les tailles d'écran. Le trait la
   déborde de 5 %, dont 2.5 % à gauche du L. */
.carte__titleblock { --title-w: clamp(328px, 51.3vw, 636px); }
.underline--carte {
  width: calc(var(--title-w) * 1.05);
  margin: 6px 0 0 calc(var(--title-w) * -.025);
  /* Filet de sécurité pour les très petits écrans (sous ~355px, là où le titre
     lui-même ne tient plus sur une ligne). Il se mesure sur le viewport et non
     sur le parent : un max-width en % du bloc titre serait circulaire, puisque
     c'est ce trait qui donne sa largeur au bloc. */
  max-width: calc(100vw - var(--gut) * 2);
}

.carte__all {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: .08em;
  margin-top: 18px;
  flex: none;
}
/* Flèches maison (assets/flèche base.png). Un PNG ne peut pas suivre
   currentColor : le fichier est décliné en deux teintes, --ink sur le crème
   et --light dans les pastilles rouges. Sortie en 120px de large pour rester
   net jusqu'en 3x tout en pesant 3 Ko. */
.arrow {
  flex: none;
  width: 26px;
  height: auto;
}
.card__go .arrow { width: 20px; }

/* Rangée défilante plutôt qu'une grille : le nombre de sandwichs peut
   changer sans jamais casser la mise en page. La rangée reste dans la
   gouttière de .wrap, sinon la barre de défilement — qui fait toujours la
   largeur du conteneur — courrait d'un bord à l'autre de l'écran.
   Les 10px de débord latéral laissent juste passer le zoom au survol des
   cartes de bout de rangée, que le conteneur rognerait sans ça. */
.carte__scroller {
  position: relative;
  /* hauteur réservée sous la rangée : barre + son écart au-dessus */
  --bar-h: 12px;
  --bar-gap: 10px;
  /* débord latéral de la rangée, juste de quoi que le conteneur ne rogne
     pas le zoom au survol des cartes de bout de rangée */
  --row-bleed: 10px;
  /* En bas il faut davantage : les cartes entrent en scène décalées de 26px
     vers le bas (--reveal-y), et overflow-y: hidden rognerait la différence.
     Les 16px gagnés ici sont repris sur --bar-gap : la barre ne bouge pas. */
  --row-bleed-bottom: 26px;
}

.carte__grid {
  display: flex;
  gap: clamp(16px, 1.9vw, 28px);
  overflow-x: auto;
  /* La rangée ne doit défiler qu'à l'horizontale. Laissé seul, overflow-x
     force overflow-y à « auto » — une valeur autre que visible sur un axe
     entraîne l'autre — et la rangée se laissait alors pousser de quelques
     pixels vers le bas dès que le zoom au survol ou l'entrée des cartes
     dépassait du cadre. « hidden » ferme ce défilement parasite ; comme il
     rogne ce qui dépasse, la place nécessaire à ces deux débords est
     réservée dans le padding ci-dessous. */
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--row-bleed);
  margin-inline: calc(var(--row-bleed) * -1);
  padding: 14px var(--row-bleed) var(--row-bleed-bottom);
  overscroll-behavior-x: contain;
}
.carte__grid.is-dragging { scroll-snap-type: none; }

/* Barre native masquée : elle ferait toute la largeur du conteneur. Celle
   qui s'affiche est .carte__bar, dessinée juste dessous. */
.carte__grid { scrollbar-width: none; }
.carte__grid::-webkit-scrollbar { display: none; }

/* Fin de rangée fondue vers le crème plutôt que tranchée net. Le voile
   s'efface une fois la rangée arrivée au bout. */
.carte__fade {
  position: absolute;
  top: 0;
  /* calé sur le bord où la rangée est rognée, débord compris, sinon une
     lisière de carte tranchée dépasse à droite du fondu */
  right: calc(var(--row-bleed) * -1);
  bottom: calc(var(--bar-h) + var(--bar-gap));
  width: clamp(70px, 9vw, 150px);
  background: linear-gradient(to right, rgba(250, 240, 233, 0), var(--cream) 82%);
  pointer-events: none;
  transition: opacity .35s ease;
}
.carte__grid.is-end ~ .carte__fade { opacity: 0; }

.carte__bar {
  position: relative;
  width: min(680px, 62%);
  height: var(--bar-h);
  margin: var(--bar-gap) auto 0;
  background: rgba(122, 43, 34, .26);
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;             /* le glissé pilote la rangée, pas la page */
}
.carte__bar[hidden] { display: none; }

.carte__bar-thumb {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 42px;
  background: var(--ink);
  border-radius: 999px;
  cursor: grab;
}
.carte__bar.is-dragging .carte__bar-thumb { cursor: grabbing; }

/* ------------------------------- Cartes -------------------------------- */
/* Les cartes sont aussi des cibles d'apparition au scroll (.reveal), qui
   pilote elle aussi transform et transition. D'où le sélecteur plus précis
   ici, et le translate repris de --reveal-y pour ne pas écraser l'entrée. */
.card {
  position: relative;             /* ancre le lien étiré, voir .card__go::after */
  flex: 0 0 clamp(260px, 23vw, 340px);
  scroll-snap-align: start;
  background: var(--card);
  border-radius: 34px;
  padding: 26px 30px 30px;
  display: flex;
  flex-direction: column;
}
.carte__grid .card,
.menu-grid .card {
  transition: transform .28s ease, box-shadow .28s ease;
}
.carte__grid .card:hover,
.menu-grid .card:hover {
  transform: translateY(var(--reveal-y, 0px)) scale(1.05);
  box-shadow: 0 10px 22px -16px rgba(90, 30, 20, .35);
}

.card__img {
  width: 100%;
  height: auto;
  margin: 6px 0 26px;
  filter: drop-shadow(0 16px 18px rgba(90, 30, 20, .18));
}

/* Vignette en attente de photo. Elle reprend au pixel près le format des
   visuels livrés (600 × 204), pour que le remplacement par une vraie <img>
   ne déplace rien. Pas d'ombre portée : il n'y a pas encore d'objet à
   détacher du fond. */
.card__img--empty {
  aspect-ratio: 600 / 204;
  border-radius: 16px;
  background: rgba(122, 43, 34, .06);
  filter: none;
}

.card__name {
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 25px);
  letter-spacing: .03em;
  margin-bottom: 14px;
}

/* Interlignage serré : Londrina Solid a une grande hauteur d'x et des
   jambages courts (ascendante + descendante = 1.183 em), donc un texte en
   petit corps paraît vite délavé à 1.5. On s'arrête à 1.32, ce qui laisse
   .14 em entre les lignes — de quoi ne jamais faire toucher un accent de
   capitale et un jambage de la ligne du dessus. */
.card__desc {
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.32;
  color: var(--ink-soft);
  margin-bottom: 30px;
  text-wrap: pretty;
}

.card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card__price {
  font-family: var(--display);
  font-size: clamp(19px, 1.6vw, 22px);
  letter-spacing: .03em;
}

.card__go {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 999px;
  background: var(--red);
  color: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .18s ease;
}
/* Toute la vignette est cliquable : le lien de la flèche est étiré sur la
   carte entière. La flèche reste visible et sert de repère visuel. */
.card__go::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* La pastille ne bouge pas d'elle-même : elle grandit avec la vignette.
   opacity reste forcé, sinon le a:hover global la ferait pâlir dès que le
   pointeur entre sur la carte, puisque le lien couvre toute la vignette. */
.card:hover .card__go { opacity: 1; }

/* =============================== À PROPOS =============================== */
.apropos {
  position: relative;              /* ancre le dragon en filigrane */
  overflow: hidden;                /* le dragon s'arrête aux bords de la section */
  background: var(--cream-2);
  padding: clamp(24px, 3.2vw, 40px) var(--gut) clamp(80px, 11vw, 150px);
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  /* La colonne de texte prend le pas sur la galerie : le titre tient sur trois
     lignes, et « REVISITE LA PAUSE DÉJEUNER » — la plus longue, 17.17 em —
     demande à elle seule 17.5 em de colonne. */
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(40px, 6.5vw, 90px);
  align-items: center;
}

/* Même filigrane que le hero, mais posé sur le crème : le trait #c4342f du
   fichier y ressort beaucoup plus que sur le rouge, d'où une opacité très
   basse là où le hero monte à .41. */
/* Le cadre ci-dessous n'est qu'une limite : object-fit: contain y inscrit le
   dragon en entier, sans jamais le rogner. Il en faut une sur les deux axes,
   parce que la section passe d'un format très large en desktop (2.99) à un
   format en hauteur sur mobile (0.72) — une largeur en % seule le ferait
   déborder d'un côté ou de l'autre. */
.apropos__dragon {
  position: absolute;
  z-index: 0;
  left: 3%;
  top: 50%;
  width: 44%;
  height: 82.5%;
  transform: translateY(-50%);
  object-fit: contain;
  object-position: left center;
  opacity: .075;
  pointer-events: none;
  user-select: none;
}

/* Même fondu qu'en bas du hero : le dragon se dissout vers le crème au lieu
   de s'arrêter net sur un bord franc. rgba() reprend --cream-2, une couleur
   transparente devant garder la même teinte pour éviter une bande grisâtre.
   Posé après le filigrane et sans z-index propre, il passe devant lui et
   reste sous le contenu, qui monte au niveau 1. */
.apropos::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background: linear-gradient(180deg, rgba(252, 240, 231, 0) 0%, var(--cream-2) 82%);
  pointer-events: none;
}

/* Le contenu repasse devant le filigrane et son fondu */
.apropos__text,
.apropos__gallery { position: relative; z-index: 1; }

/* Assez large pour les trois lignes du titre ; c'est .apropos__body qui garde
   une mesure lisible, plus bas. */
.apropos__text { max-width: 840px; }

.eyebrow {
  font-family: var(--display);
  color: var(--red);
  font-size: clamp(15px, 1.35vw, 19px);
  letter-spacing: .1em;
  margin-bottom: clamp(16px, 1.9vw, 26px);
}

/* Le corps est calé pour que la ligne 2 (17.17 em) tienne dans la colonne à
   toutes les largeurs : 2.6vw laisse au moins 17.5 em de colonne par em de
   texte, de 900px de large jusqu'au maximum de la page. En dessous de ~400px
   la ligne se replie d'elle-même, sans rien casser.
   Plus de text-wrap: balance : les coupes sont posées dans le HTML. */
.apropos__title {
  font-family: var(--display);
  font-size: clamp(23px, 2.6vw, 46px);
  line-height: 1.08;   /* THEMORIX : 1.076 em de haut, accents compris */
  letter-spacing: .015em;
}

/* Ici le titre se replie sur trois à cinq lignes selon la largeur : impossible
   de deviner en CSS où commence et où finit « SAUCE MONTOISE. ». js/main.js
   mesure cette dernière ligne et renseigne --ul-w / --ul-x, pour un débord de
   2.5 % de part et d'autre comme du côté carte. Les valeurs de repli ci-dessous
   servent sans JavaScript : elles suivent la mesure du bloc de texte, et le
   plafond en pixels (62 % de la mesure maximale de 620px) empêche les 3824 px
   du PNG de servir de largeur intrinsèque à la colonne. */
.underline--apropos {
  width: var(--ul-w, 62%);
  max-width: var(--ul-max, 384px);
  margin: 4px 0 clamp(24px, 2.9vw, 38px) var(--ul-x, 10%);
}

.apropos__body {
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.32;   /* même serrage que .card__desc */
  max-width: 620px;    /* mesure lisible : le bloc, lui, suit le titre */
  text-wrap: pretty;
}

.apropos__gallery {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(12px, 1.6vw, 22px);
}

.apropos__stack {
  display: grid;
  grid-template-rows: 1fr 1.15fr;
  gap: clamp(12px, 1.6vw, 22px);
}

.apropos__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
  background: var(--card);   /* teinte chaude tant que la photo n'est pas là */
  min-height: 140px;
}
.apropos__img--tall { min-height: 320px; }

/* ================================ FOOTER ================================ */
.footer {
  background: var(--red);
  color: var(--light);
  padding: clamp(60px, 8vw, 100px) var(--gut) clamp(48px, 5.5vw, 70px);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 4.5vw, 60px);
  max-width: 1240px;
  margin: 0 auto;
}

.footer__col {
  display: flex;
  gap: clamp(18px, 1.9vw, 26px);
  align-items: flex-start;
}

.footer__icon { flex: none; width: clamp(42px, 3.6vw, 52px); height: auto; }

.footer__title {
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 25px);
  letter-spacing: .035em;
  margin-bottom: 14px;
}

.footer__text {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.32;   /* même serrage que .card__desc */
  margin-bottom: 20px;
}
.footer__col:nth-child(2) .footer__text { margin-bottom: 0; }

.footer__link {
  display: inline-block;
  font-size: clamp(16px, 1.3vw, 18px);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}
.footer__link--display { font-family: var(--display); }

.footer__logo {
  width: clamp(84px, 8vw, 108px);
  height: auto;
  margin: clamp(56px, 7vw, 90px) auto 0;
}

/* ============================ PAGE CARTE ================================ */
/* menu.html. Tout ce qui suit s'appuie sur les composants de l'accueil :
   .site-header, .card, .section-title, .underline et .footer sont repris tels
   quels, seule la mise en page autour d'eux change. */

/* Bandeau rouge d'en-tête, version courte du hero : même fond, même dragon en
   filigrane, mais sans les sandwichs ni la hauteur minimale. */
.pagehead {
  position: relative;
  background: var(--red);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pagehead__dragon {
  position: absolute;
  right: -6%;
  bottom: -28%;
  width: 46%;
  min-width: 420px;
  max-width: none;
  height: auto;
  opacity: .41;
  pointer-events: none;
  user-select: none;
}

.pagehead__content {
  position: relative;
  z-index: 2;
  padding: clamp(34px, 4.6vw, 62px) var(--gut) clamp(48px, 6vw, 82px);
  max-width: var(--max);
  width: 100%;
  margin-inline: auto;
}

.pagehead__title {
  font-family: var(--display);
  color: var(--light);
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: .94;
  letter-spacing: .01em;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.pagehead__lead {
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.32;
  color: var(--light);
  max-width: 520px;
  text-wrap: pretty;
}

/* ------------------------- Sous-menu collant --------------------------- */
/* Sept catégories : au-delà de la place disponible la rangée défile
   latéralement plutôt que de passer à la ligne, comme celle des combattants.
   z-index sous les 40 du panneau mobile, qui doit rester au-dessus. */
.catnav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--cream);
  border-bottom: 2px solid rgba(122, 43, 34, .1);
}

.catnav__inner {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 13px;
}
.catnav__inner::-webkit-scrollbar { display: none; }

.catnav a {
  flex: none;
  font-family: var(--display);
  font-size: clamp(12px, .95vw, 14px);
  letter-spacing: .06em;
  text-indent: .06em;              /* voir .btn : recentre le label */
  color: var(--ink);
  border: 2px solid rgba(122, 43, 34, .22);
  border-radius: 999px;
  /* Padding vertical dissymétrique : voir --caps-lift. */
  padding: calc(9px + var(--caps-lift)) 17px calc(9px - var(--caps-lift));
  white-space: nowrap;
}
.catnav a:hover,
.catnav a.is-current {
  background: var(--red);
  border-color: var(--red);
  color: var(--light);
  opacity: 1;
}

/* ---------------------------- Catégories ------------------------------- */
.menu { padding-bottom: clamp(70px, 10vw, 130px); }

.menu__cat {
  padding-top: clamp(40px, 5.4vw, 74px);
  /* la cible d'ancre s'arrête sous le sous-menu collant, pas dessous */
  scroll-margin-top: 78px;
}

.menu__head { margin-bottom: clamp(26px, 3.4vw, 42px); }

/* Ici le titre est un bloc ordinaire dans .wrap : sa largeur ne vient pas de
   son contenu, donc le pourcentage de repli ne risque pas de laisser les
   3824 px du PNG gonfler quoi que ce soit. js/main.js prend le relais et cale
   le trait sur la ligne réelle, quelle que soit la longueur du titre. */
.underline--menu {
  width: var(--ul-w, 62%);
  max-width: var(--ul-max, 420px);
  margin: 6px 0 0 var(--ul-x, -8px);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: clamp(16px, 1.9vw, 28px);
}

/* =============================== Reveal ================================= */
/* Le décalage passe par une variable plutôt que par un transform remis à
   « none » : sinon .reveal.is-in, à spécificité égale et plus bas dans la
   feuille, annulait le survol des cartes. */
.reveal {
  --reveal-y: 26px;
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-in { --reveal-y: 0px; opacity: 1; }

/* ============================ Responsive ================================ */

/* --- Écrans intermédiaires --- */
@media (max-width: 1240px) {
  .hero__dragon { width: 64%; min-width: 460px; }
}

/* --- Navigation mobile --- */
@media (max-width: 1080px) {
  /* Plus de colonne centrale à centrer une fois la nav passée en panneau :
     on revient à une simple rangée logo + burger. */
  .site-header { display: flex; gap: 16px; }
  .burger { display: block; }
  .site-header__actions { display: none; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    margin: 0;
    padding: 90px var(--gut) 40px;
    background: var(--red);
    font-size: 22px;
    text-align: center;
    transform: translateY(-100%);
    visibility: hidden;                       /* sort les liens de l'ordre de tabulation */
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility .35s;
    overflow-y: auto;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav__tel { display: inline-block; }
  .nav__cta { display: inline-block; font-size: 16px; margin-top: 8px; }

  body.nav-open { overflow: hidden; }
}

/* --- Empilement des grandes sections --- */
@media (max-width: 900px) {
  .hero {
    min-height: 0;
    /* Bande réservée au sandwich sous le texte : en colonne, il ne peut pas
       tenir à côté du titre sans le rendre illisible. */
    padding-bottom: 50vw;
  }
  .hero__sandwich {
    right: -12%;
    bottom: 6%;
    width: 108%;
    min-width: 0;
    transform: rotate(-6deg) scale(var(--sw-scale));
  }
  /* Le dragon reste un filigrane de fond, mais recadré sur la moitié basse
     pour ne pas passer sous le titre. */
  .hero__dragon {
    right: -14%;
    bottom: -4%;
    width: 108%;
    min-width: 0;
  }
  .hero__content { padding-bottom: 8px; }

  /* Le dragon de la page carte passe derrière le titre plutôt qu'à côté */
  .pagehead__dragon { right: -18%; bottom: -30%; width: 92%; min-width: 0; }

  .carte__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .carte__all { margin-top: 0; }
  /* Le titre passe au-dessus du lien, la colonne prend toute la largeur : le
     trait ne se règle plus sur elle mais toujours sur --title-w, sinon il
     s'étirerait bien au-delà de « LES COMBATTANTS ». */

  .apropos { grid-template-columns: 1fr; }
  /* Section empilée : elle devient étroite et haute, donc le cadre du dragon
     se retourne lui aussi, sinon il finirait minuscule. */
  .apropos__dragon { width: 85.8%; height: 49.5%; }
  /* Section plus haute, dragon toujours centré : à 26% le fondu s'arrêtait
     juste sous lui. On l'allonge pour reprendre le même cinquième bas. */
  .apropos::after { height: 36%; }
  .apropos__gallery { grid-template-columns: 1fr 1fr; }
  .apropos__img--tall { min-height: 260px; }

  .footer__grid { grid-template-columns: 1fr; gap: 44px; }
  .footer__col:nth-child(2) .footer__text { margin-bottom: 0; }
}

/* --- Petits écrans --- */
@media (max-width: 620px) {
  .card { padding: 22px 22px 26px; border-radius: 28px; }
  .apropos__img { border-radius: 22px; }
  .apropos__img--tall { min-height: 200px; }
  .footer__col { gap: 16px; }
}

/* --- Accessibilité : mouvement réduit --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { --reveal-y: 0px; opacity: 1; }
}

/* --- Impression --- */
@media print {
  .burger, .nav, .site-header__cta, .hero__dragon, .hero__sandwich { display: none !important; }
  .site-header__actions { display: block !important; }
  .site-header__tel { color: #000; }
  body { background: #fff; color: #000; }
  .hero, .footer { background: #fff; color: #000; }
}