/* ============================================================
   PRIVATISATION — page dédiée. Toutes les règles préfixées par
   `.priv-page` pour ne rien affecter d'autre. Reprend
   strictement la DA Chenzu :
     - fond crème (--kinu), noir sumi (--sumi)
     - accents ocre (--kin)
     - filets fins (--sumi-12)
     - Marcellus (titres) + Karla (texte)
   ============================================================ */

.priv-page main { padding-top: 72px; }

/* Marges gauche/droite recalées sur la maquette 1448×1086 :
   contenu de x=89 à x=1398 (largeur 1309), soit un padding gauche de 89 et
   droit de 50. Exprimés en vw pour rester proportionnels à d'autres largeurs. */
.priv-page .priv {
  padding: 16px max(40px, 3.45vw) 60px max(40px, 6.15vw);
}
/* Colonnes recalées : 606 (col G) + 40 (gap) + 663 (col D) = 1309.
   Col D interne : 399 (grande photo) + 10 (gap) + 254 (vignettes) = 663. */
.priv__grid {
  display: grid;
  grid-template-columns: minmax(0, 606fr) minmax(0, 663fr);
  column-gap: 40px;
  align-items: start;
}

/* ------------------------------------------------------------
   COLONNE GAUCHE — intro + offres + infos
   ------------------------------------------------------------ */
.priv__left { min-width: 0; }

.priv__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--hai);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.priv__eyebrow::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--sumi);
  opacity: 0.6;
}
.priv__rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--kin);
  margin: 24px 0 16px;
}
.priv__tag {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kin);
  margin-bottom: 14px;
}
.priv__h1 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--sumi);
  margin: 0 0 20px;
}
.priv__lede {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--sumi);
  margin: 0 0 32px;
  max-width: 52ch;
}

/* ------------------------------------------------------------
   Les 3 offres
   ------------------------------------------------------------ */
.priv__offers {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 28px;
}
.priv__offer { min-width: 0; }
.priv__offer__num {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--kin);
  margin-bottom: 14px;
}
.priv__offer__num::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--kin);
  opacity: 0.6;
  max-width: 88px;
}
.priv__offer__title {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sumi);
  margin: 0 0 12px;
}
.priv__offer__desc {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--hai);
  margin: 0 0 16px;
}
.priv__offer__price {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--kin);
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(168, 118, 46, 0.35);
  line-height: 1.4;
}
.priv__note {
  font-family: var(--font-text);
  font-weight: 300;
  font-style: italic;
  font-size: 12px;
  color: var(--hai);
  margin: 16px 0 0;
  max-width: 68ch;
  line-height: 1.5;
}

/* ------------------------------------------------------------
   Divider + 4 blocs infos
   ------------------------------------------------------------ */
.priv__infos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 28px;
}
.priv__info { min-width: 0; }
.priv__info__icon {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--sumi);
  margin-bottom: 8px;
}
.priv__info__icon svg {
  width: 100%; height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.priv__info__h {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sumi);
  margin: 0 0 8px;
}
.priv__info__p {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--hai);
  margin: 0;
}
.priv__info__p a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 260ms var(--ease), color 260ms var(--ease);
}
.priv__info__p a:hover {
  color: var(--kin);
  border-color: currentColor;
}

/* ------------------------------------------------------------
   COLONNE DROITE — grille 2 colonnes × 2 lignes.
   Reproduit la géométrie de la maquette :
     - grande photo (col 1, row 1)
     - vignette détail + vignette équipe empilées (col 2, row 1)
     - citation SOUS la grande photo, alignée sur sa largeur (col 1, row 2)
   ------------------------------------------------------------ */
/* Colonne droite — grille interne strictement calée sur la maquette :
     - grande photo : 399 wide × 565 high  (ratio 399/565)
     - vignette haut : 254 wide × 289 high (ratio 254/289)
     - vignette bas  : 254 wide × 225 high (ratio 254/225)
     - gap horizontal entre les deux colonnes : 10 px
     - le bas de la grande photo et le bas de la vignette du chef s’alignent
       (y = 672 dans la maquette) — obtenu via space-between sur la col
       vignettes qui prend toute la hauteur de la grille (align-items: stretch). */
.priv__right {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 399fr) minmax(0, 254fr);
  column-gap: 10px;
  row-gap: 24px;
  align-items: stretch;
}
.priv__visual { display: contents; }

.priv__main {
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
  background: var(--hinoki);
  aspect-ratio: 399 / 565;
  width: 100%;
}
.priv__main img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.priv__thumbs {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  width: 100%;
  height: 100%;
}
.priv__thumb {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.priv__thumb__frame {
  overflow: hidden;
  background: var(--hinoki);
  width: 100%;
}
.priv__thumb:nth-of-type(1) .priv__thumb__frame { aspect-ratio: 254 / 289; }
.priv__thumb:nth-of-type(2) .priv__thumb__frame { aspect-ratio: 254 / 225; }
.priv__thumb__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.priv__thumb figcaption {
  padding-top: 8px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  color: var(--sumi);
  line-height: 1.4;
}
.priv__thumb figcaption small {
  display: block;
  font-family: var(--font-text);
  font-weight: 300;
  font-style: italic;
  font-size: 12px;
  color: var(--hai);
  margin-top: 2px;
}

/* Citation sous la grande photo — placée en col 1 row 2 de .priv__right,
   alignée sur la largeur de la grande photo. Dans la maquette la citation
   démarre à y=708 (soit 36 px sous le bas de la grande photo à y=672). */
.priv__quote {
  grid-column: 1;
  grid-row: 2;
  margin: 12px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--kin);
  max-width: 44ch;
  font-family: var(--font-title);
  font-weight: 400;
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--sumi);
  align-self: start;
}

/* ------------------------------------------------------------
   Tablette < 1023 px
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .priv__grid { column-gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .priv__offers { column-gap: 24px; }
  .priv__infos { column-gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .priv__h1 { font-size: clamp(34px, 5vw, 46px); }
}

/* ------------------------------------------------------------
   Mobile < 768 px — tout empilé, texte d'abord
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .priv-page main { padding-top: 72px; }
  .priv-page .priv { padding: 16px 24px 72px; }
  .priv__grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .priv__lede { margin-bottom: 40px; }
  .priv__offers {
    grid-template-columns: 1fr;
    row-gap: 40px;
    margin-bottom: 16px;
  }
  .priv__infos {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 32px;
  }
  /* Reset la grille .priv__right en simple colonne mobile.
     display: contents sur .priv__visual reste actif, ce qui remet main,
     thumbs et quote dans le flux vertical du parent. */
  .priv__right {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .priv__main   { grid-column: 1; grid-row: auto; }
  .priv__thumbs { grid-column: 1; grid-row: auto; flex-direction: row; gap: 16px; }
  .priv__quote  { grid-column: 1; grid-row: auto; max-width: 100%; }
  .priv__thumb  { flex: 1 1 0; min-width: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .priv__info__p a { transition: none; }
}

/* Reference 1448 px: main text 621 px, visual 663 px, gutter 25 px.
   Scoped to this page; prices and translations remain in the document. */
@media (min-width: 1100px) {
  .priv-page { --page-pad: 6.1464vw; }
  .priv-page .nav { border-bottom-color: var(--sumi-12); }
  .priv-page main { padding-top: 63px; }
  .priv-page .priv { padding: 25px 3.453vw 36px 6.1464vw; }
  .priv-page .priv__grid { grid-template-columns: minmax(0,621fr) minmax(0,663fr); gap: 1.72652vw; }
  .priv-page .priv__eyebrow { line-height:18px; letter-spacing:.3em; }
  .priv-page .priv__eyebrow::before { width:18px; }
  .priv-page .priv__rule { width:37px; margin:26px 0 16px; }
  .priv-page .priv__tag { font-size:12px; line-height:17px; margin-bottom:8px; }
  .priv-page .priv__h1 { font-family: Georgia, 'Times New Roman', serif; font-size:clamp(36px,3.59116vw,58px); line-height:1.04; letter-spacing:-.035em; margin-bottom:10px; }
  .priv-page .priv__lede { max-width:605px; font-family:Arial,sans-serif; font-size:17px; line-height:23.5px; font-weight:400; color:#626262; margin:0 0 27px; }
  .priv-page .priv__offers { border-top:1px solid var(--sumi-12); padding-top:33px; gap:0; margin:0; }
  .priv-page .priv__offer { padding:0 12px; border-left:1px solid var(--sumi-12); }
  .priv-page .priv__offer:first-child { padding-left:0; border-left:0; }
  .priv-page .priv__offer:last-child { padding-right:0; }
  .priv-page .priv__offer__num { font-family:Georgia,serif; font-size:21px; line-height:24px; gap:16px; margin-bottom:17px; }
  .priv-page .priv__offer__num::after { flex:0 0 36px; opacity:1; }
  .priv-page .priv__offer__title { font-size:10.5px; line-height:16px; letter-spacing:.19em; margin-bottom:14px; }
  .priv-page .priv__offer__desc { font-family:Arial,sans-serif; font-size:13px; line-height:19.5px; min-height:58.5px; margin-bottom:16px; }
  .priv-page .priv__offer__price { font-size:12px; }
  .priv-page .priv__note { max-width:none; margin-top:20px; }
  .priv-page .priv__infos { grid-template-columns:127fr 170fr 170fr 154fr; gap:0; }
  .priv-page .priv__info { padding:0 25px 0 25px; border-left:1px solid var(--sumi-12); }
  .priv-page .priv__info:first-child { padding-left:0; padding-right:8px; border-left:0; }
  .priv-page .priv__info:last-child { padding-right:0; }
  .priv-page .priv__info__h { font-size:10px; letter-spacing:.18em; line-height:15px; margin-bottom:4px; white-space:nowrap; }
  .priv-page .priv__info__icon { width:24px; height:24px; margin-bottom:11px; }
  .priv-page .priv__info__p { font-family:Arial,sans-serif; font-size:12px; line-height:19px; }
  .priv-page .priv__right { margin-top:39px; align-items:start; grid-template-columns:minmax(0,399fr) minmax(0,254fr); column-gap:10px; row-gap:0; }
  .priv-page .priv__main { width:100%; aspect-ratio:399/565; }
  .priv-page .priv__thumbs { width:100%; height:auto; justify-content:flex-start; gap:10px; }
  .priv-page .priv__thumb:first-child .priv__thumb__frame { aspect-ratio:254/289; }
  .priv-page .priv__thumb:nth-child(2) .priv__thumb__frame { aspect-ratio:254/225; }
  .priv-page .priv__thumb figcaption { padding-top:5px; font-size:12px; font-weight:300; font-style:italic; line-height:17px; color:var(--hai); }
  .priv-page .priv__thumb figcaption small { margin-top:2px; line-height:17px; }
  .priv-page .priv__quote { grid-column:1 / -1; margin:-5px 0 0; padding:0 0 12px 28px; font-family:Georgia,serif; font-size:16px; line-height:24px; border-left-width:1px; max-width:none; }
}

/* More space for choosing an event; practical details follow the gallery. */
.priv-page .priv__details { min-width:0; }
.priv-page .priv__event-cta { margin-top:28px; gap:24px; min-height:48px; padding:0 24px; font-size:11px; letter-spacing:.15em; }
@media (min-width:1100px) {
 .priv-page .priv { padding-top:49px; padding-bottom:64px; }
 .priv-page .priv__h1 { line-height:1.1; margin-bottom:22px; }
 .priv-page .priv__lede { line-height:27px; margin-bottom:36px; }
 .priv-page .priv__offer { display:flex; flex-direction:column; padding:0 16px; }
 .priv-page .priv__offer__title { min-height:32px; margin-bottom:12px; }
 .priv-page .priv__offer__desc { font-size:14px; line-height:22px; color:#73706b; margin-bottom:20px; }
 .priv-page .priv__offer__price { margin-top:auto; line-height:19px; min-height:49px; font-size:12px; }
 .priv-page .priv__note { line-height:19px; color:#77736d; }
 .priv-page .priv__details .priv__infos { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .priv-page .priv__details .priv__info { padding:4px 32px; }
 .priv-page .priv__details .priv__info:first-child { padding-left:0; }
 .priv-page .priv__details .priv__info__h { margin-bottom:9px; }
 .priv-page .priv__details .priv__info__p { font-size:14px; line-height:22px; }
}
@media (max-width:1099px) {
 .priv-page .priv__grid { grid-template-columns:1fr; gap:40px; }
 .priv-page .priv__right { max-width:760px; width:100%; margin:0 auto; }
 .priv-page .priv__main,.priv-page .priv__thumbs { width:100%; }
 .priv-page .priv__thumbs { height:auto; }
 .priv-page .priv__details .priv__infos { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
 .priv-page .priv__info__p a { overflow-wrap:anywhere; }
}

/* Same visible header separator as La Carte and Reservation, at every width. */
.priv-page > .nav { border-bottom-color:var(--sumi-12); }