/* ============================================================
   LA CARTE — page dédiée. Toutes les règles sont préfixées par
   `.carte-page` pour n'affecter aucune autre page. Aucun !important,
   aucun override des tokens/nav/footer existants.
   ============================================================ */

/* Aucun sticky, aucun scroll piloté, aucun IO. Le changement de service
   est purement déclenché par un click. La section est un bloc normal
   dans le flow. Le scroll global reste 100 % natif. */
.carte-page {
  --carte-transition: 260ms;
}

/* ------------------------------------------------------------
   Header de section (au-dessus de la partition sticky)
   ------------------------------------------------------------ */
.carte-page main { padding-top: 96px; }

.carte__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--page-pad);
  color: var(--hai);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.carte__eyebrow::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--sumi);
  opacity: 0.6;
}

/* ------------------------------------------------------------
   Partition — colonne gauche éditoriale + colonne droite visuelle.
   UN SEUL conteneur, sticky sur tout son intérieur. Aucune règle
   sticky indépendante pour éviter le désynchronisation.
   ------------------------------------------------------------ */
.carte {
  position: relative;
  padding: 0 var(--page-pad) 140px;   /* ~30 % de blanc en moins avant le footer noir */
  margin-top: 8px;
}

/* Grille éditoriale simple, bloc dans le flow. Aucun sticky, aucun wrapper
   artificiellement haut. Les deux colonnes gauche/droite ne bougent pas
   entre deux clics — seul le contenu de la colonne droite change. */
.carte__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: 96px;
  align-items: start;
  padding-top: 24px;
}

/* Colonne gauche — bloc éditorial fixe + timeline */
.carte__left { padding-bottom: 64px; }
.carte__num {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hai);
}
.carte__rule {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--kin);
  margin: 20px 0 32px;
}
.carte__title-eyebrow {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hai);
  display: block;
  margin-bottom: 18px;
}
.carte__title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--sumi);
  max-width: 15ch;
  margin: 0;
}
.carte__intro {
  margin: 24px 0 32px;
  max-width: 44ch;
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: var(--sumi);
}

/* Ligne d'infos — 3 pastilles fines séparées par des filets verticaux */
.carte__meta {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--sumi-12);
  border-bottom: 1px solid var(--sumi-12);
  margin-bottom: 40px;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--sumi);
}
.carte__meta span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.carte__meta svg {
  width: 20px;
  height: 20px;
  stroke: var(--sumi);
  fill: none;
  stroke-width: 1.4;
}
.carte__meta i {
  display: block;
  width: 1px;
  height: 20px;
  background: var(--sumi-12);
}

/* ------------------------------------------------------------
   Timeline — 8 services, ligne verticale + points
   ------------------------------------------------------------ */
.carte__list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.carte__list::before {
  /* Ligne verticale statique — filet fin sumi 12% */
  content: "";
  position: absolute;
  left: 46px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--sumi-12);
}
.carte__list::after {
  /* Segment doré qui descend jusqu'au service actif.
     Hauteur pilotée par --p (0..1) écrit en JS.
     Aucun rAF permanent : mise à jour uniquement lors du changement. */
  content: "";
  position: absolute;
  left: 46px;
  top: 12px;
  width: 1px;
  height: calc((100% - 24px) * var(--p, 0));
  background: var(--kin);
  transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.carte__item {
  display: grid;
  grid-template-columns: 32px 24px 1fr;
  align-items: baseline;
  column-gap: 24px;
  padding: 16px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--hai);
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: color 260ms var(--ease);
}
.carte__item:not(:last-child) {
  border-bottom: 1px solid var(--sumi-12);
}
.carte__item__num {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--hai);
  transition: color 260ms var(--ease);
}
.carte__item__dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kinu);
  border: 1px solid var(--sumi-12);
  justify-self: center;
  align-self: center;
  transform: translateY(1px);
  transition: background 260ms var(--ease), border-color 260ms var(--ease);
}
.carte__item__body { min-width: 0; }
.carte__item__label {
  display: block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sumi);
  transition: color 260ms var(--ease);
}
.carte__item__desc {
  display: block;
  margin-top: 6px;
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hai);
  max-width: 46ch;
  /* Description toujours visible sur la maquette — pas de collapse. */
}

/* État actif : numéro + label + description en ocre, point rempli */
.carte__item.is-active .carte__item__num,
.carte__item.is-active .carte__item__label,
.carte__item.is-active .carte__item__desc {
  color: var(--kin);
}
.carte__item.is-active .carte__item__dot {
  background: var(--kin);
  border-color: var(--kin);
}
.carte__item:hover:not(.is-active) .carte__item__label { color: var(--sumi); }
.carte__item:focus-visible {
  outline: 2px solid var(--kin);
  outline-offset: 4px;
}

/* ------------------------------------------------------------
   Colonne droite — 3 visuels + citation
   Une seule vue affichée à la fois. Le changement se fait via
   `.is-changing` posé pendant 300 ms : fade + micro-shift.
   ------------------------------------------------------------ */
.carte__right {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 40px;
  align-self: start;
}
/* Bloc visuel — grille fixe : main (~65 %) + colonne des petites (~35 %).
   Hauteur bornée pour rester dans un écran desktop standard.
   Le layout ne bouge JAMAIS entre les 8 services : seuls les <img> et
   les <figcaption> sont ré-écrits en JS. */
.carte__visual {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  column-gap: 20px;
  height: min(72vh, 620px);
}


/* Grande image principale — remplit toute la hauteur du bloc */
.carte__pic-main {
  height: 100%;
  overflow: hidden;
  background: var(--hinoki);
  position: relative;               /* base des couches empilées */
}

/* Colonne des 2 petites images empilées, chacune avec sa légende dessous.
   Flex-column → chaque figure occupe la moitié de la hauteur. */
.carte__small-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.carte__small-item {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  margin: 0;                  /* reset <figure> */
}
.carte__small-item__frame {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  background: var(--hinoki);
  position: relative;               /* base des couches empilées */
}
.carte__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------
   Reveal éditorial — 2 couches superposées par cadre.
   Nouvelle image : clip-path inset(100% 0 0 0) → inset(0)
   (mask reveal bas → haut) + opacity 0.4 → 1.
   Ancienne image : opacity 1 → 0.2 (reste géométriquement
   révélée pendant que la nouvelle "monte").
   Durée unique 950 ms, easing "in-out expressif".
   Les 3 rôles partent et finissent EXACTEMENT ensemble.
   ------------------------------------------------------- */
.carte__visual .carte__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  clip-path: inset(100% 0 0 0);            /* état de base "à venir" */
  pointer-events: none;
  z-index: 0;
  transform: translateZ(0);                /* promeut chaque couche sur GPU */
  backface-visibility: hidden;
}
/* PERF : `will-change: opacity, clip-path` etait pose en permanence sur les
   6 couches, reservant en continu des textures GPU plein cadre qui grandissent
   avec le viewport. `transform: translateZ(0)` ci-dessus assure deja la
   promotion stable ; on ne pose donc l'indice que pendant la transition,
   exactement la ou les @keyframes tournent. Rendu et timing inchanges. */
.carte__visual.is-transitioning .carte__layer {
  will-change: opacity, clip-path;
}
/* États repos (aucune transition CSS ; la transition se fait par
   @keyframes déclenchée par .is-transitioning sur le wrapper.
   Ainsi les 3 slots partent EXACTEMENT dans la même frame). */
.carte__visual .carte__layer.is-leaving {
  opacity: 0.2;
  clip-path: inset(0 0 0 0);
  z-index: 1;
}
.carte__visual .carte__layer.is-front {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  z-index: 2;
}

/* -------------------------------------------------------
   Reveal éditorial — piloté par UNE seule classe globale
   `.is-transitioning` sur le wrapper `.carte__visual`.
   Les 3 slots (main + detail + gesture) démarrent, avancent
   et finissent leurs animations à l'identique — aucun rAF,
   aucune promesse par slot, un seul déclencheur.
   Durée 950 ms, easing cubic-bezier(0.76, 0, 0.24, 1).
   ------------------------------------------------------- */
@keyframes carteRevealIn {
  from { opacity: 0.4; clip-path: inset(100% 0 0 0); }
  to   { opacity: 1;   clip-path: inset(0 0 0 0); }
}
@keyframes carteRevealOut {
  from { opacity: 1;   clip-path: inset(0 0 0 0); }
  to   { opacity: 0.2; clip-path: inset(0 0 0 0); }
}
@keyframes carteCaptionSwap {
  0%   { opacity: 1; }
  38%  { opacity: 0; }
  62%  { opacity: 0; }
  100% { opacity: 1; }
}
.carte__visual.is-transitioning .carte__layer.is-front {
  animation: carteRevealIn 950ms cubic-bezier(0.76, 0, 0.24, 1) both;
}
.carte__visual.is-transitioning .carte__layer.is-leaving {
  animation: carteRevealOut 950ms cubic-bezier(0.76, 0, 0.24, 1) both;
}
/* Légendes des 2 petites cartes — fondu synchro avec l'image :
   opacity plonge à 0 entre 38 % et 62 % du timing → swap texte
   invisible → remonte à 1. Ainsi jamais de "nouvelle légende +
   ancienne image", ni l'inverse. */
.carte__visual.is-transitioning .carte__small-item figcaption {
  animation: carteCaptionSwap 950ms cubic-bezier(0.76, 0, 0.24, 1) both;
  will-change: opacity;
}
.carte__small-item figcaption {
  /* Zone légende figée à 88 px — couvre le pire cas mesuré (77 px,
     "Asperges grillées, tofu soyeux, sésame noir" en 2 lignes + sub
     en 2 lignes). Ainsi la hauteur du cadre au-dessus ne bouge JAMAIS
     entre deux services, même quand une nouvelle légende plus longue
     ou plus courte est injectée à mi-transition. */
  flex: 0 0 88px;
  padding-top: 8px;
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--sumi);
  line-height: 1.35;
  overflow: hidden;
}
.carte__small-item figcaption small {
  display: block;
  margin-top: 2px;
  font-family: var(--font-text);
  font-style: italic;
  font-size: 12px;
  color: var(--hai);
}

.carte__quote {
  padding-left: 20px;
  border-left: 2px solid var(--kin);
  max-width: 60ch;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.carte__quote.is-changing {
  opacity: 0;
  transform: translateY(6px);
}
.carte__quote p {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--sumi);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
  /* Réserve 2 lignes minimum. Certaines citations (service 06) tiennent
     sur 1 ligne, d'autres sur 2 → sans min-height, la hauteur du bloc
     .carte__right varie entre services et le viewport dérive à chaque
     changement. Verrou = 2 * 1.5em = 57 px, on prend 60 px de marge. */
  min-height: calc(1.5em * 2);
}
.carte__quote cite {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hai);
  font-style: normal;
}

/* ------------------------------------------------------------
   Navigation secondaire : ← précédent · N / 8 · suivant →
   Placée sous la citation, discrète.
   ------------------------------------------------------------ */
.carte__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--sumi-12);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hai);
}
.carte__nav__btn {
  background: transparent;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: color var(--carte-transition) var(--ease),
              transform var(--carte-transition) var(--ease);
}
.carte__nav__btn:hover { color: var(--sumi); }
.carte__nav__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.carte__nav__btn--prev:hover:not(:disabled) { transform: translateX(-4px); }
.carte__nav__btn--next:hover:not(:disabled) { transform: translateX(4px); }
.carte__nav__btn svg {
  width: 20px;
  height: 1px;
  overflow: visible;
}
.carte__nav__btn svg line { stroke: currentColor; stroke-width: 1; }
.carte__nav__counter {
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--sumi);
}
.carte__nav__counter b {
  font-weight: 500;
  color: var(--kin);
}
.carte__nav__btn:focus-visible {
  outline: 2px solid var(--kin);
  outline-offset: 4px;
}

/* ------------------------------------------------------------
   Simple layout (fallback) — utilisé au-delà du sticky sur le
   dernier bloc final : mentions allergies + CTA
   ------------------------------------------------------------ */
.carte__footer {
  padding: 96px var(--page-pad) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

/* ------------------------------------------------------------
   Tablette < 1023 px — grille encore desktop mais gouttières
   réduites, sticky maintenu
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .carte__grid { column-gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .carte__title { font-size: clamp(36px, 5vw, 52px); }
}

/* ------------------------------------------------------------
   Mobile < 768 px — accordéon vertical exclusif (un seul ouvert).
   Zéro sticky, zéro sentinelles, zéro logique de progression.
   Toute la partie desktop est retirée du flow.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .carte-page main { padding-top: 72px; }
  .carte__eyebrow { padding: 0 24px; }

  /* Bloc éditorial affiché en tête, colonne unique */
  .carte { padding: 0 24px 120px; }
  .carte__grid {
    display: block;
    padding-top: 24px;
  }
  .carte__left { padding-bottom: 40px; }
  .carte__title { max-width: 100%; }
  .carte__intro { max-width: 100%; }

  /* Timeline devient accordéon : on cache la liste desktop,
     on montre les <details> mobile. */
  .carte__list { display: none; }
  .carte__right { display: none; }

  .carte__mobile { display: block; margin-top: 8px; }
  .carte__acc {
    border-top: 1px solid var(--sumi-12);
    padding: 0;
  }
  .carte__acc:last-child { border-bottom: 1px solid var(--sumi-12); }
  .carte__acc__summary {
    display: grid;
    grid-template-columns: 40px 1fr 20px;
    align-items: center;
    column-gap: 16px;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
    color: var(--sumi);
  }
  .carte__acc__summary::-webkit-details-marker { display: none; }
  .carte__acc__num {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--hai);
  }
  .carte__acc__label {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sumi);
  }
  .carte__acc__chevron {
    width: 14px; height: 14px; position: relative;
    justify-self: end;
  }
  .carte__acc__chevron::before,
  .carte__acc__chevron::after {
    content: "";
    position: absolute;
    background: var(--sumi);
    transition: transform 260ms var(--ease), opacity 260ms var(--ease);
  }
  .carte__acc__chevron::before { top: 6px; left: 0; width: 14px; height: 1px; }
  .carte__acc__chevron::after  { top: 0; left: 6px; width: 1px; height: 14px; }
  .carte__acc[open] .carte__acc__chevron::after { opacity: 0; }
  .carte__acc[open] .carte__acc__num { color: var(--kin); }
  .carte__acc[open] .carte__acc__label { color: var(--kin); }

  .carte__acc__body {
    padding: 0 0 28px;
  }
  .carte__acc__desc {
    font-family: var(--font-text);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.55;
    color: var(--sumi);
    margin: 0 0 20px;
  }
  .carte__acc__main {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--hinoki);
  }
  .carte__acc__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .carte__acc__thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--hinoki);
  }
  .carte__acc img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .carte__acc__quote {
    margin: 20px 0 0;
    padding-left: 14px;
    border-left: 2px solid var(--kin);
    font-family: var(--font-title);
    font-size: 15px;
    line-height: 1.45;
    color: var(--sumi);
  }
  .carte__acc__quote cite {
    display: block;
    margin-top: 6px;
    font-family: var(--font-text);
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hai);
  }
}

/* Desktop : le bloc mobile est masqué */
@media (min-width: 768px) {
  .carte__mobile { display: none; }
}

/* ============================================================
   LES ACCORDS — section boissons sous la Carte.
   Aucune règle ne touche à `.carte*` : cet ajout est isolé.
   Reprend strictement la palette et les typographies existantes
   (crème `--kinu`, sumi, kin, hai, filets `--sumi-12`).
   ============================================================ */
.carte-page .accords {
  padding: 0 var(--page-pad); /* The shared separator owns the preceding gap. */
}
.accords__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
  padding-top: 24px;                       /* respiration réduite */
}
/* Aplatit .accords__main dans la grille pour pouvoir aligner la photo
   sur la ligne des colonnes 01 / 02 / 03 (et non sur l'intro au-dessus). */
.accords__main { display: contents; }
.accords__intro { grid-column: 1; grid-row: 1; }
.accords__cols  { grid-column: 1; grid-row: 2; }
.accords__mark  { grid-column: 2; grid-row: 1; }
.accords__photo { grid-column: 2; grid-row: 2; }

/* Signature graphique très discrète — kanji "酒" grande taille faible
   opacité + petit label espacé en dessous. Aucun rôle sémantique
   (aria-hidden dans le HTML). Sur mobile la section reste plus dense,
   donc on masque cette signature pour ne pas gêner la lecture. */
.accords__mark {
  justify-self: end;
  align-self: start;
  text-align: right;
  padding-top: 6px;
  line-height: 1;
  transform: translateY(-40px);          /* remonte le logo — plus d'air avec la photo */
}
.accords__mark-kanji {
  display: block;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(96px, 9vw, 140px);
  color: var(--kin);
  opacity: 0.14;
  line-height: 1;
  margin-bottom: 22px;
  user-select: none;
}
.accords__mark-caption {
  display: block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hai);
}

/* Introduction éditoriale — même écriture que le haut de la Carte */
.accords__intro {
  max-width: 44ch;
  margin-bottom: 64px;
}
.accords__eyebrow {
  display: inline-block;
  padding-top: 14px;
  border-top: 1px solid var(--kin);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kin);
  margin-bottom: 28px;
}
.accords__h {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--sumi);
  margin: 0 0 24px;
}
.accords__lede {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: var(--sumi);
  margin: 0;
}

/* 3 colonnes accord — séparées par de fins filets verticaux */
.accords__cols {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.accords__col {
  padding: 0 16px;
  border-right: 1px solid var(--sumi-12);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.accords__col:first-child { padding-left: 0; }
.accords__col:last-child { padding-right: 0; border-right: 0; }

.accords__num {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--hai);
  margin-bottom: 8px;
}
.accords__rule {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--kin);
  margin-bottom: 22px;
}
.accords__col-title {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sumi);
  margin: 0 0 20px;
}
.accords__col-desc {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sumi);
  margin: 0 0 28px;
  max-width: 30ch;
}
.accords__price {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 26px;
  color: var(--sumi);
  margin: 0 0 24px;
  letter-spacing: -0.005em;
}
.accords__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kin);
  text-decoration: none;
  margin-bottom: 24px;
  align-self: flex-start;
  transition: color 260ms var(--ease), transform 260ms var(--ease);
}
.accords__cta svg { width: 20px; height: 1px; overflow: visible; }
.accords__cta svg line { stroke: currentColor; stroke-width: 1; }
.accords__cta:hover { transform: translateX(4px); }
.accords__cta:focus-visible { outline: 2px solid var(--kin); outline-offset: 4px; }

.accords__tags {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 12px;
  color: var(--hai);
  margin: auto 0 0;               /* pousse les tags en bas pour aligner les 3 col */
  padding-top: 12px;
  line-height: 1.5;
}

/* Photo saké droite — verticale, discrète, sans ombre.
   Remontée légèrement sur desktop : sinon elle s'aligne pile sur les
   numéros 01 / 02 / 03 et déborde énormément sous les tags. Le shift
   centre visuellement la photo par rapport au bloc des 3 accords. */
.accords__photo {
  margin: 0;
  overflow: hidden;
  background: var(--hinoki);
  aspect-ratio: 1333 / 1600;
  width: 100%;
  transform: translateY(-95px);           /* remonte encore la photo pour équilibrer haut/bas */
}
.accords__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tablette < 1023 px — resserre la grille sans casser la mise en page */
@media (max-width: 1023px) {
  .accords__grid {
    column-gap: 48px;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
  .accords__col { padding: 0 24px; }
}

/* Mobile < 768 px — colonnes empilées, photo sous les 3 accords */
@media (max-width: 767px) {
  .carte-page .accords { padding: 0 24px; }
  .accords__grid {
    display: block;
    padding-top: 32px;
  }
  .accords__intro { margin-bottom: 40px; }
  .accords__cols {
    grid-template-columns: 1fr;
  }
  .accords__col {
    padding: 24px 0 0;
    border-right: 0;
    border-top: 1px solid var(--sumi-12);
  }
  .accords__col:first-child { border-top: 0; padding-top: 0; }
  .accords__col + .accords__col { margin-top: 24px; }
  .accords__col-desc { max-width: 100%; }
  .accords__photo {
    margin-top: 56px;
    aspect-ratio: 4 / 5;
    transform: none;                        /* reset : pas de shift sur mobile */
  }
  .accords__mark { display: none; }
}

/* Reduced motion : coupe animations et mask, swap net instantané */
@media (prefers-reduced-motion: reduce) {
  .carte__visual.is-transitioning .carte__layer.is-front,
  .carte__visual.is-transitioning .carte__layer.is-leaving,
  .carte__visual.is-transitioning .carte__small-item figcaption {
    animation: none;
  }
  .carte__visual .carte__layer,
  .carte__visual .carte__layer.is-front,
  .carte__visual .carte__layer.is-leaving {
    clip-path: none;
  }
  .carte__visual .carte__layer.is-leaving { opacity: 0; }
  .carte__quote, .carte__quote.is-changing {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .carte__list::after { transition: none; }
  .accords__cta {
    transition: none;
  }
  .accords__cta:hover { transform: none; }
}

/* Composition éditoriale : le plat accompagne le titre dès l'arrivée. */
.carte-page .carte__grid { column-gap: clamp(40px, 5vw, 72px); }
.carte-page .carte__right { row-gap: 24px; }
.carte-page .carte__visual { grid-template-columns: 1fr; height: auto; row-gap: 18px; }
.carte-page .carte__pic-main { height: auto; aspect-ratio: 6 / 5; }
.carte-page .carte__pic-main .carte__layer { object-position: 50% 64%; }
.carte-page .carte__small-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.carte-page .carte__small-item__frame { flex: none; aspect-ratio: 4 / 3; }
.carte-page .carte__small-item figcaption { flex: none; min-height: 76px; overflow: visible; }
.carte-page .carte__item__desc { color: #68635d; font-weight: 400; }
.carte-page .carte__item.is-active .carte__item__desc { color: #806331; }
.carte-page .carte__item { position: relative; padding-right: 24px; }
.carte-page .carte__item::after { content: '→' / ''; position: absolute; right: 2px; top: 16px; color: #68635d; font-size: 17px; }
.carte-page .carte__item:hover, .carte-page .carte__item:focus-visible { background: rgba(166,128,67,.055); }
.carte-page .carte__item.is-active::after { color: var(--kin); }
.carte-page .carte__hint { margin: -16px 0 16px; font-size: 13px; line-height: 1.5; color: #68635d; }
.carte-page .carte__nav { margin-top: 0; }
@media (max-width: 1023px) and (min-width: 768px) {
 .carte-page .carte__grid { column-gap: 32px; }
 .carte-page .carte__item { column-gap: 12px; grid-template-columns: 24px 18px 1fr; }
 .carte-page .carte__list::before, .carte-page .carte__list::after { left: 44px; }
 .carte-page .carte__meta { gap: 12px; flex-wrap: wrap; }
 .carte-page .carte__small-col { gap: 12px; }
}
@media (max-width: 767px) {
 .carte-page .carte__hint { display: none; }
}

/* Photos plus discrètes : respiration au-dessus, largeur contenue. */
@media (min-width: 768px) {
 .carte-page .carte__right { width: 86%; max-width: 460px; justify-self: center; padding-top: 216px; }
 .carte-page .carte__pic-main { aspect-ratio: 5 / 4; }
}
@media (min-width: 768px) and (max-width: 1023px) {
 .carte-page .carte__right { width: 94%; padding-top: 152px; }
}

/* Ancre les commandes au dernier service, sans décalage fixe en haut. */
@media (min-width: 768px) {
 .carte-page .carte__right { align-self: start; padding-top: 0; margin-bottom: 0; }
}

/* Rapproche les photos de la citation sans déplacer celle-ci. */
@media (min-width: 768px) {
 .carte-page .carte__visual { position: relative; top: 16px; }
}

/* Même animation pour les trois zones éditoriales. */
.carte-page .carte__quote { transition: none; }
.carte-page .carte__quote.is-editorial-transitioning {
 animation: carteCaptionSwap 950ms cubic-bezier(0.76, 0, 0.24, 1) both;
}
@media (prefers-reduced-motion: reduce) {
 .carte-page .carte__quote.is-editorial-transitioning { animation: none; }
}
/* Groupe plus compact, sans changer la colonne réservée au visuel. */
@media (min-width: 1024px) {
 .carte-page .accords__cols { width: 90%; }
 .carte-page .accords__col { padding-left: 14px; padding-right: 14px; }
 .carte-page .accords__col:first-child { padding-left: 0; }
 .carte-page .accords__col:last-child { padding-right: 0; }
}
@media (min-width: 768px) {
 .carte-page .accords__cols { align-self: center; }
 .carte-page .accords__photo { align-self: center; transform: none; }
}

/* Espacements des accords uniquement. Largeur minimale pour garder les textes lisibles. */
@media (min-width: 1024px) {
 .carte-page .accords__cols { width: min(90%, max(540px, 63%)); }
 .carte-page .accords__col { padding-left: 10px; padding-right: 10px; }
 .carte-page .accords__col:first-child { padding-left: 0; }
 .carte-page .accords__col:last-child { padding-right: 0; }
}
.carte-page .accords__intro { margin-bottom: 46px; }
.carte-page .accords + .carte__footer { padding-top: 48px; }
@media (min-width: 768px) {
 .carte-page .accords__mark { transform: translateY(-28px); }
}
@media (max-width: 767px) {
 .carte-page .accords__intro { margin-bottom: 30px; }
 .carte-page .accords + .carte__footer { padding-top: 36px; }
}

/* Dernier ajustement : déplace uniquement le groupe, sans modifier le flux. */
@media (min-width: 1024px) {
 .carte-page .accords__cols { position: relative; top: -24px; }
 .carte-page .accords__photo { top: -24px; }
}

/* Same visible header separator as Contact, including at the top of the page. */
.carte-page > .nav { border-bottom-color:var(--sumi-12); }