/* Saveurs & Réceptions — feuille unique des quatre pages.
   Registre : bordeaux profond et lin. Display Prata, texte Mulish.
   Dispositif signature : « LA TABLE QUI SE DRESSE », bandeau fixe au bord droit.

   Les états fermés vivent tout en bas, sous .js ET sous prefers-reduced-motion:
   no-preference. Sans JS, la page est entièrement lisible. */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;700&family=Prata&display=swap');

:root {
  --vin: #2C0910;
  --vin-2: #42121D;
  --vin-3: #5E1F2A;
  --lin: #EFE5D4;
  --lin-2: #F8F3E8;
  --craie: #BCAB93;
  --encre: #2A1712;
  --terre: #77644F;
  --laiton: #C08A3E;

  --titre: "Prata", Georgia, "Times New Roman", serif;
  --texte: "Mulish", "Helvetica Neue", Arial, sans-serif;

  --t-monument: clamp(2.9rem, 7.4vw, 6.6rem);
  --t-geant: clamp(2.2rem, 4.6vw, 4rem);
  --t-fort: clamp(1.5rem, 2.5vw, 2.3rem);
  --t-sous: clamp(1.1rem, 1.55vw, 1.45rem);
  --t-corps: 1.0625rem;
  --t-petit: .76rem;

  --e1: 8px; --e2: 16px; --e3: 28px; --e4: 48px;
  --e5: 80px; --e6: 128px; --e7: 184px;

  --marge: clamp(20px, 4.5vw, 76px);
  --couvert-l: 72px;
  --courbe: cubic-bezier(.2, .8, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--vin);
  color: var(--lin);
  font-family: var(--texte);
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: 1.62;
  padding-right: var(--couvert-l);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--laiton); color: var(--vin); }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 4px; }

/* ══ Bandeau de tête ═══════════════════════════════════════════════ */
.barre {
  position: fixed; top: 0; left: 0; right: var(--couvert-l); z-index: 40;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); padding: var(--e3) var(--marge);
  background: linear-gradient(180deg, rgba(44,9,16,.94) 0%, rgba(44,9,16,.72) 60%, rgba(44,9,16,0) 100%);
}
.sceau {
  font-family: var(--titre); font-size: 1.18rem; letter-spacing: .01em;
  color: var(--lin); white-space: nowrap;
}
.nav { display: flex; gap: var(--e3); flex-wrap: wrap; }
.nav a {
  font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .19em;
  font-weight: 600; color: var(--lin); opacity: .58;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: opacity 220ms var(--courbe), border-color 220ms var(--courbe);
}
.nav a:hover { opacity: 1; }
.nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--laiton); }

/* ══ DISPOSITIF — « LA TABLE QUI SE DRESSE » ═══════════════════════
   Bandeau fixe au bord droit, fond bordeaux permanent : le couvert garde
   le même contraste au-dessus des panneaux clairs comme des panneaux sombres. */
.couvert {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: var(--couvert-l);
  background: var(--vin);
  border-left: 1px solid var(--vin-3);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--e2);
  pointer-events: none;
}
.couvert::before,
.couvert::after {
  content: ""; position: absolute; left: 50%; width: 1px;
  background: var(--vin-3);
}
.couvert::before { top: var(--e4); height: var(--e5); }
.couvert::after { bottom: var(--e4); height: var(--e5); }

.couvert-pile {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--e2);
}
.piece { display: block; color: var(--lin); }
.piece svg { display: block; width: 40px; height: 40px; }
.piece svg * { vector-effect: non-scaling-stroke; }

.couvert-mot {
  margin-top: var(--e4);
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .26em;
  font-weight: 700; color: var(--laiton); white-space: nowrap;
}

/* ══ Panneaux ══════════════════════════════════════════════════════ */
.panneau { position: relative; padding: var(--e6) var(--marge); }
.panneau.clair { background: var(--lin); color: var(--encre); }
.panneau.clair .gris { color: var(--terre); }
.panneau.nuit { background: var(--vin-2); }

.panneau.plein {
  min-height: 100svh; display: flex; align-items: flex-end;
  padding-top: var(--e7); padding-bottom: var(--e5); overflow: hidden;
}
.panneau.plein > .fond {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.panneau.plein::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(175deg, rgba(44,9,16,.86) 0%, rgba(44,9,16,.34) 42%, rgba(44,9,16,.93) 100%);
}
.panneau.plein > .dedans { position: relative; z-index: 2; }

.dedans { max-width: 1480px; margin-inline: auto; width: 100%; }
.rangee { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--e3); }
.rangee + .rangee { margin-top: var(--e5); }

/* ══ Typographie ═══════════════════════════════════════════════════ */
.monument, .geant, .fort {
  font-family: var(--titre); font-weight: 400; letter-spacing: -.012em;
}
.monument { font-size: var(--t-monument); line-height: 1.02; }
.geant { font-size: var(--t-geant); line-height: 1.08; }
.fort { font-size: var(--t-fort); line-height: 1.18; }

.chapo { font-size: var(--t-sous); line-height: 1.42; font-weight: 300; }
.corps { max-width: 62ch; }
.corps + .corps, .corps + .liste, .liste + .corps { margin-top: var(--e3); }
.fort + .corps, .geant + .corps, .monument + .chapo, .fort + .chapo { margin-top: var(--e3); }
.etiquette + .monument, .etiquette + .geant, .etiquette + .fort { margin-top: var(--e2); }
.gris { color: var(--craie); }

.etiquette {
  display: block;
  font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .24em;
  font-weight: 700; color: var(--craie);
}
.panneau.clair .etiquette { color: var(--terre); }
.mono {
  font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .2em;
  font-weight: 700;
}
.numero {
  font-family: var(--titre); font-size: var(--t-fort);
  line-height: 1; color: var(--vin-3);
}
.panneau:not(.clair) .numero { color: var(--craie); }

.liste li {
  padding: var(--e2) 0 var(--e2) var(--e3);
  border-top: 1px solid rgba(188,171,147,.26);
  position: relative;
}
.panneau.clair .liste li { border-top-color: rgba(119,100,79,.24); }
.liste li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--e2) + .62em);
  width: 12px; height: 1px; background: currentColor; opacity: .5;
}
.liste li b { font-weight: 700; }

/* ══ Visuels ═══════════════════════════════════════════════════════ */
.vue { position: relative; overflow: hidden; display: block; }
.vue img { width: 100%; height: 100%; object-fit: cover; }
.vue-legende {
  display: flex; gap: var(--e2); align-items: baseline;
  margin-top: var(--e2);
  font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .2em;
  font-weight: 600; color: var(--craie);
}
.panneau.clair .vue-legende { color: var(--terre); }
.vue-legende b { color: var(--laiton); font-weight: 700; white-space: nowrap; flex: 0 0 auto; }

/* ══ Tarifs et fiches ══════════════════════════════════════════════ */
.fiche {
  border-top: 2px solid var(--vin-3);
  padding-top: var(--e3);
}
.panneau.clair .fiche { border-top-color: rgba(94,31,42,.5); }
.fiche-titre {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--e2);
}
.tarif {
  font-family: var(--titre); white-space: nowrap;
  font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1;
  margin-left: auto; text-align: right;   /* reste à droite même quand le titre passe à la ligne */
}
.tarif-prix { font-size: 1em; }
.tarif-note {
  display: block; margin-top: var(--e1);
  font-family: var(--texte); font-size: var(--t-petit);
  text-transform: uppercase; letter-spacing: .2em; font-weight: 600;
  color: var(--craie);
}
.panneau.clair .tarif-note { color: var(--terre); }

/* ══ Liens d'action ════════════════════════════════════════════════ */
.bouton {
  display: inline-flex; align-items: baseline; gap: var(--e2);
  font-family: var(--titre); font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  padding-bottom: var(--e1); border-bottom: 1px solid currentColor;
  transition: gap 260ms var(--courbe), border-color 260ms var(--courbe);
}
.bouton::after { content: "\2192"; font-family: var(--texte); }
.bouton:hover { gap: var(--e3); border-bottom-color: var(--laiton); }

.fil { border-bottom: 1px solid rgba(188,171,147,.45); }
.fil:hover { border-bottom-color: var(--laiton); }
.panneau.clair .fil { border-bottom-color: rgba(119,100,79,.45); }

/* ══ Pied ══════════════════════════════════════════════════════════ */
.pied {
  background: var(--vin); border-top: 1px solid var(--vin-3);
  padding: var(--e5) var(--marge);
}
.pied .rangee { align-items: start; }
.pied-bloc p { color: var(--craie); }
.pied-bloc .mono { display: block; margin-bottom: var(--e2); color: var(--lin); }

/* ══ Petites largeurs ══════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --couvert-l: 46px; }
  .rangee { grid-template-columns: repeat(4, 1fr); gap: var(--e2); }
  .rangee > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .rangee + .rangee { margin-top: var(--e4); }
  .panneau { padding-block: var(--e5); }
  .panneau.plein { padding-top: calc(var(--e6) + var(--e3)); }
  .piece svg { width: 26px; height: 26px; }
  .couvert-pile { gap: var(--e1); }
  .couvert-mot { margin-top: var(--e3); font-size: .64rem; letter-spacing: .18em; }
  .couvert::before, .couvert::after { display: none; }
  .barre { padding: var(--e2) var(--marge); flex-direction: column; align-items: flex-start; gap: var(--e1); }
  .nav { gap: var(--e2); }
  .nav a { font-size: .66rem; letter-spacing: .12em; }
  .corps { max-width: none; }
}

/* ══ ÉTATS FERMÉS ══════════════════════════════════════════════════
   Uniquement quand le script tourne (.js) ET que le mouvement est autorisé.
   Aucun élément observé n'est masqué par clip-path : un élément clippé ne
   compte pas comme visible et ne se révélerait jamais. */
@media (prefers-reduced-motion: no-preference) {
  .js .monte {
    opacity: 0; transform: translateY(26px);
    transition: opacity 760ms var(--courbe), transform 760ms var(--courbe);
  }
  .js .monte.ouvert { opacity: 1; transform: translateY(0); }

  .js .vue > img {
    transform: scale(1.05);
    transition: transform 1.15s var(--courbe);
  }
  .js .vue.ouvert > img { transform: scale(1); }
  .js .vue::before {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background: var(--vin); pointer-events: none;
    transform: scaleY(1); transform-origin: bottom;
    transition: transform 900ms var(--courbe);
  }
  .js .vue.ouvert::before { transform: scaleY(0); }

  /* Le couvert se pose pièce par pièce. */
  .js .piece {
    opacity: 0; transform: translateY(14px);
    transition: opacity 520ms var(--courbe), transform 520ms var(--courbe);
  }
  .js .piece.mise { opacity: 1; transform: translateY(0); }
  .js .couvert-mot {
    opacity: 0; transform: translateY(12px);
    transition: opacity 620ms var(--courbe), transform 620ms var(--courbe);
  }
  .js .couvert.complet .couvert-mot { opacity: 1; transform: translateY(0); }
}