/* ==========================================================================
   MÉRA — Page La carte (carte.html uniquement)
   Référence : Méra_final_bref/La carte.png
   Mobile-first ; breakpoints identiques à responsive.css (768 / 1024 / 1440).
   Le hero reprend la logique de la homepage : positions exprimées en fraction
   de --W, la largeur de composition (relevés faits sur la maquette).
   ========================================================================== */

.carte {
  --seam: 3px;
  --module-pad-x: max(var(--grid-gutter), 2.5vw);
  --module-pad-y: clamp(2rem, 1rem + 3vw, 3.5rem);
}

/* ==========================================================================
   01 — Hero / introduction
   ========================================================================== */

.carte-hero {
  position: relative;
  background-color: var(--color-ivory);
}

.carte-hero__media {
  display: block;
  aspect-ratio: 1122 / 581;
  overflow: hidden;
}

.carte-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte-hero__inner {
  position: relative;
  padding-block: var(--space-6) var(--space-7);
}

.carte-hero__title {
  padding-top: 0.12em;
  font-family: var(--font-sans-condensed-temp);
  font-size: min(4.46rem, 16.4cqw); /* taille commune des titres de hero (mobile) */
  font-weight: var(--weight-black);
  font-stretch: condensed;
  line-height: 0.84;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  overflow: hidden;
}

.carte-hero__edition {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}

.carte-hero__edition-num {
  font-family: var(--font-sans-condensed-temp);
  font-size: clamp(1.5rem, 0.8rem + 3vw, 2.25rem);
  font-weight: var(--weight-black);
  font-stretch: condensed;
  line-height: 1;
  text-transform: uppercase;
}

.carte-hero__dates {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.carte-hero__intro {
  max-width: 34ch;
  margin-top: var(--space-4);
  font-size: 1.0625rem;
  line-height: 1.4;
}

.carte-hero__index {
  grid-template-columns: 3.5em 1fr;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--rule-width) solid var(--surface-rule);
}

.carte-hero__tag {
  margin-top: var(--space-4);
  color: var(--surface-muted);
}

/* ---- Hero ≥ 768px : composition calée sur La carte.png ------------------
     hauteur 55,5 %W · cap du titre 6,8 %W · édition 26,4 %W
     intro 30,5 %W · repère 01 43,1 %W · photo de 46,4 % à 100 %W
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .carte-hero {
    container-type: inline-size;
    overflow: hidden;
    --W: min(100cqw, 105rem);
    --frame-left: calc((100cqw - var(--W)) / 2);
  }

  .carte-hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    left: calc(var(--frame-left) + var(--W) * 0.38);
    /* Transition ivoire → photo fondue, comme le hero de l'accueil (dont la
       photo intègre ce fondu) : la photo démarre à 38 %W et apparaît
       progressivement sur 12 %W. Aucun traitement de couleur. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--W) * 0.12));
    mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--W) * 0.12));
    aspect-ratio: auto;
  }

  .carte-hero__media img {
    object-position: 50% 60%;
  }

  .carte-hero__inner {
    height: calc(var(--W) * 0.555);
    padding-block: 0;
  }

  .carte-hero__inner > * {
    position: absolute;
    margin: 0;
  }

  /* LA CARTE : hauteur de capitale 16,2 %W, passe devant la photographie.
     Le bloc étant positionné, on neutralise le margin négatif de motion.css. */
  .carte-hero__title,
  .carte-hero__title[data-reveal="clip"] {
    margin-top: 0;
    top: calc(var(--W) * 0.01929 - 0.28em);
    left: var(--grid-gutter);
    z-index: 1;
    padding-top: 0.22em;
    font-size: calc(var(--W) * 0.184);
    line-height: 0.8;
    letter-spacing: -0.015em;
    white-space: nowrap;
  }

  .carte-hero__edition {
    top: calc(var(--W) * 0.21658 - 0.2em);
    left: var(--grid-gutter);
    gap: var(--space-5);
  }

  .carte-hero__edition-num {
    font-size: calc(var(--W) * 0.0444);
  }

  .carte-hero__dates {
    font-size: max(0.8125rem, var(--W) * 0.0215);
  }

  .carte-hero__intro {
    top: calc(var(--W) * 0.27490 - 0.4em);
    left: var(--grid-gutter);
    width: min(34ch, calc(var(--W) * 0.34));
    font-size: max(0.875rem, var(--W) * 0.0115);
  }

  .carte-hero__index {
    top: calc(var(--W) * 0.38308);
    left: var(--grid-gutter);
    width: calc(var(--W) * 0.34);
    padding-top: var(--space-4);
    font-size: max(0.6875rem, var(--W) * 0.0105);
  }

  /* Repère posé sur la photographie, aligné à droite */
  /* Légende : même système que la légende du hero Journal (référence) */
  .carte-hero__tag {
    top: auto;
    bottom: calc(var(--W) * 0.022);
    right: var(--grid-gutter);
    z-index: 1;
    margin: 0;
    color: var(--color-ivory);
    font-weight: var(--weight-bold);
    font-size: max(0.6875rem, var(--W) * 0.0095);
    line-height: calc(var(--W) * 0.0165);
    text-align: right;
  }
}

/* ==========================================================================
   02 — Menu principal
   ========================================================================== */

.carte-menu {
  padding-block: var(--space-6) var(--space-7);
}

.carte-menu__media {
  aspect-ratio: 1140 / 610;
  margin-bottom: var(--space-6);
}

.carte-menu__label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.carte-menu__label::after {
  content: "";
  width: 2.5rem;
  height: var(--rule-width);
  background-color: currentColor;
}

.menu-group + .menu-group {
  margin-top: var(--space-6);
}

.menu-group__title {
  margin-bottom: var(--space-3);
  font-family: var(--font-sans-condensed-temp);
  font-size: clamp(1.375rem, 0.9rem + 1.6vw, 2.125rem);
  font-weight: var(--weight-black);
  font-stretch: condensed;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Lignes de plat : nom à gauche, prix aligné à droite (chiffres tabulaires) */
.carte-menu .menu-item {
  align-items: baseline;
  padding-block: var(--space-3);
}

.carte-menu .menu-item__name {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  text-transform: none;
}

.carte-menu .menu-item__price {
  font-size: 0.9375rem;
}

.carte-menu__accords {
  margin-top: var(--space-5);
}

.carte-menu__note {
  grid-template-columns: 3.5em 1fr;
  margin-top: var(--space-4);
  color: var(--surface-muted);
}

@media (min-width: 768px) {
  .carte-menu {
    padding-block: clamp(2.5rem, 3.5vw, 4rem);
  }

  .carte-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  .carte-menu__aside {
    grid-column: span 3;
  }

  .carte-menu__media {
    aspect-ratio: 1140 / 1267;
    margin-bottom: var(--space-4);
  }

  .carte-menu__col {
    grid-column: span 5;
  }
}

@media (min-width: 1024px) {
  .carte-menu__aside {
    grid-column: 1 / span 3;
  }

  .carte-menu__col:nth-of-type(2) {
    grid-column: 4 / span 5;
  }

  .carte-menu__col:nth-of-type(3) {
    grid-column: 9 / span 4;
  }
}

/* ==========================================================================
   03 — Produits / saison
   ========================================================================== */

.carte-produits {
  display: grid;
  gap: var(--seam);
  background-color: var(--color-ivory);
}

.carte-produits__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6) var(--grid-gutter);
}

.carte-produits__media {
  order: -1;
  aspect-ratio: 1122 / 959;
}

@media (min-width: 768px) {
  .carte-produits {
    grid-template-columns: 27fr 41fr 32fr;
    gap: 0;
    min-height: clamp(16rem, 24vw, 22rem);
  }

  .carte-produits__block {
    justify-content: center;
    padding: var(--module-pad-y) var(--module-pad-x);
  }

  .carte-produits__media {
    order: 0;
    aspect-ratio: auto;
  }

  .carte-produits__media img {
    object-position: 50% 45%;
  }
}

/* ==========================================================================
   04 — Éditions précédentes
   ========================================================================== */

.carte-editions {
  padding-block: var(--space-6);
}

.carte-editions__label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.carte-editions__label::after {
  content: "";
  width: 2.5rem;
  height: var(--rule-width);
  background-color: currentColor;
}

.editions-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--seam);
}

.edition-item {
  padding: var(--space-4);
  border: var(--rule-width) solid var(--surface-rule-soft);
}

.edition-item__number {
  font-family: var(--font-sans-condensed-temp);
  font-size: clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
  font-weight: var(--weight-black);
  font-stretch: condensed;
  line-height: 1;
}

.edition-item__dates {
  margin-top: var(--space-2);
  color: var(--surface-muted);
}

.carte-editions__all {
  margin-top: var(--space-5);
}

@media (min-width: 768px) {
  .carte-editions {
    padding-block: clamp(2rem, 2.6vw, 3rem);
  }

  .carte-editions__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: var(--grid-gap);
  }

  .carte-editions__label {
    grid-column: 1 / -1;
    margin-bottom: var(--space-4);
  }

  /* Index horizontal : filet court puis les éditions réparties */
  .editions-list {
    grid-template-columns: 2.5rem repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: var(--space-5);
  }

  .editions-list::before {
    content: "";
    height: var(--rule-width);
    margin-bottom: var(--space-2);
    background-color: var(--surface-rule);
  }

  .edition-item {
    padding: 0;
    border: 0;
  }

  .carte-editions__all {
    margin-top: 0;
    text-align: right;
  }
}

/* ==========================================================================
   05 — Réservation
   ========================================================================== */

.carte-resa {
  position: relative;
  display: grid;
  overflow: hidden;
}

.carte-resa__lieu {
  position: absolute;
  inset: 0;
}

.carte-resa__lieu img {
  opacity: 0.32;
  object-position: 50% 60%;
}

.carte-resa__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-7) var(--grid-gutter);
}

.carte-resa__title {
  font-family: var(--font-sans-condensed-temp);
  font-size: clamp(2.25rem, 1.2rem + 4vw, 4rem);
  font-weight: var(--weight-black);
  font-stretch: condensed;
  line-height: 0.9;
  text-transform: uppercase;
  overflow: hidden;
}

.carte-resa__kicker {
  color: var(--surface-muted);
}

.carte-resa__cta {
  margin-top: var(--space-4);
}

.carte-resa__cta .btn-round {
  width: 3.25rem;
  height: 3.25rem;
}

.carte-resa__media {
  position: relative;
}

.carte-resa__label {
  position: absolute;
  left: var(--module-pad-x);
  bottom: var(--space-5);
  color: var(--color-ivory);
}

@media (min-width: 768px) {
  .carte-resa {
    grid-template-columns: 35fr 65fr;
    min-height: clamp(12rem, 18vw, 17rem);
  }

  .carte-resa__lieu {
    inset: 0 65% 0 0;
  }

  .carte-resa__content {
    justify-content: center;
    padding: var(--module-pad-y) var(--module-pad-x);
  }

  /* La pastille cobalt chevauche la limite des deux blocs (maquette) */
  .carte-resa__cta {
    position: absolute;
    z-index: 2;
    right: calc(var(--space-6) * -1);
    bottom: var(--module-pad-y);
    margin: 0;
  }

  /* « Réserver en ligne » : centré verticalement sur la pastille bleue, qui est
     ancrée à --module-pad-y du bas et déborde de --space-6 sur la photo.
     1,625rem = demi-diamètre de la pastille · 0,65em = demi-interligne. */
  .carte-resa__label {
    bottom: calc(var(--module-pad-y) + 1.625rem - 0.65em);
    left: calc(var(--space-6) + var(--space-4));
  }

  .carte-resa__media img {
    height: 100%;
    object-position: 50% 45%;
  }
}