/* ==========================================================================
   JOLIE — feuille de style commune
   Direction « Horizon » : page blanche, une ligne d'horizon, le carnet numéroté.
   Toutes les classes sont préfixées « j- » et les styles d'éléments sont
   limités au conteneur .jolie, pour ne pas entrer en conflit avec Hostinger.
   ========================================================================== */

:root {
  /* Couleur — le blanc domine, l'encre remplace le noir */
  --j-blanc: #ffffff;
  --j-galet: #eeedea;   /* encarts pratiques, emplacements photo */
  --j-encre: #21100c;   /* texte, filets forts, bouton Réserver */
  --j-taupe: #6f625b;   /* légendes, informations secondaires */
  --j-filet: #d9d1ca;   /* filets fins entre les lignes */
  --j-argile: #9a6150;  /* accent rare : économies des cures */

  /* Typographie */
  --j-serif: "Newsreader", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --j-sans: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  --j-display: clamp(54px, 9.2vw, 132px);
  --j-h-xl: clamp(46px, 7.4vw, 112px);
  --j-h-l: clamp(34px, 4.6vw, 64px);
  --j-h-m: clamp(26px, 2.8vw, 40px);
  --j-chapo: clamp(19px, 1.7vw, 24px);
  --j-body: clamp(16px, 1.15vw, 17px);
  --j-small: 14px;
  --j-label: 12px;

  /* Mise en page */
  --j-max: 1440px;
  --j-gutter: clamp(20px, 6.6vw, 96px);
  --j-section: clamp(96px, 13vw, 200px);
  --j-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base (limitée au site Jolie) ---------- */
.jolie, .jolie *, .jolie *::before, .jolie *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.jolie {
  margin: 0;
  background: var(--j-blanc);
  color: var(--j-encre);
  font-family: var(--j-sans);
  font-size: var(--j-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.jolie::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--j-blanc);
}
.jolie img { max-width: 100%; height: auto; display: block; }
.jolie h1, .jolie h2, .jolie h3, .jolie h4, .jolie p, .jolie figure, .jolie dl, .jolie dd, .jolie ul, .jolie ol { margin: 0; }
.jolie ul, .jolie ol { padding: 0; list-style: none; }
.jolie a { color: inherit; text-decoration: none; }
.jolie em { font-style: italic; }
.jolie strong { font-weight: 500; }
.jolie h1, .jolie h2, .jolie h3 { font-weight: 300; text-wrap: balance; }
.jolie p { text-wrap: pretty; }
.jolie :focus-visible { outline: 2px solid var(--j-encre); outline-offset: 4px; }
.jolie [hidden] { display: none !important; }
.jolie .j-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.j-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--j-encre); color: var(--j-blanc); padding: 12px 18px; font-size: var(--j-label); letter-spacing: .2em; text-transform: uppercase; }
.j-skip:focus { top: 12px; }

/* ---------- Conteneur ---------- */
.j-wrap {
  width: 100%; max-width: var(--j-max); margin-inline: auto;
  padding-left: max(var(--j-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--j-gutter), env(safe-area-inset-right, 0px));
}
.j-section { padding-block: var(--j-section); }
.j-section--tight { padding-block: calc(var(--j-section) * .6); }

/* ---------- Texte ---------- */
.j-serif { font-family: var(--j-serif); }
.j-label {
  font-family: var(--j-sans); font-size: var(--j-label); line-height: 1.4;
  letter-spacing: .2em; text-transform: uppercase; color: var(--j-taupe); font-weight: 400;
}
.j-label--ink { color: var(--j-encre); font-weight: 500; letter-spacing: .22em; }
.j-display {
  font-family: var(--j-serif); font-weight: 300; font-size: var(--j-display);
  line-height: .92; letter-spacing: -.03em;
}
.j-h-xl { font-family: var(--j-serif); font-weight: 300; font-size: var(--j-h-xl); line-height: .96; letter-spacing: -.03em; }
.j-h-l { font-family: var(--j-serif); font-weight: 300; font-size: var(--j-h-l); line-height: 1.03; letter-spacing: -.02em; }
.j-h-m { font-family: var(--j-serif); font-weight: 300; font-size: var(--j-h-m); line-height: 1.12; letter-spacing: -.01em; }
.j-chapo { font-family: var(--j-serif); font-size: var(--j-chapo); line-height: 1.42; font-weight: 400; }
.j-text { max-width: 34em; }
.j-text > * + * { margin-top: 1.1em; }
.j-muted { color: var(--j-taupe); }
.j-small { font-size: var(--j-small); line-height: 1.6; }

/* ---------- Boutons et liens ---------- */
.j-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 32px;
  background: var(--j-encre); color: var(--j-blanc) !important;
  font-family: var(--j-sans); font-size: var(--j-label); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; border: 1px solid var(--j-encre);
  transition: background .3s var(--j-ease), color .3s var(--j-ease);
}
.j-btn:hover { background: var(--j-blanc); color: var(--j-encre) !important; }
.j-btn--ghost { background: transparent; color: var(--j-encre) !important; }
.j-btn--ghost:hover { background: var(--j-encre); color: var(--j-blanc) !important; }
.j-btn--sm { min-height: 44px; padding: 0 22px; }
.j-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: var(--j-label); font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  border-bottom: 1px solid var(--j-encre); line-height: 1;
}
.j-link span[aria-hidden] { transition: transform .3s var(--j-ease); }
.j-link:hover span[aria-hidden] { transform: translateX(5px); }
.j-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.jolie .j-inline { border-bottom: 1px solid currentColor; }

/* ---------- Règle de distance & filets ---------- */
.j-ruler {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
}
.j-ruler i { flex: 1; height: 1px; background: currentColor; }
.j-rule { height: 1px; background: var(--j-encre); border: 0; margin: 0; }
.j-rule--soft { background: var(--j-filet); }

/* ---------- Planches (images légendées) ---------- */
.j-plate { position: relative; }
.j-plate img { width: 100%; object-fit: cover; }
.j-plate figcaption {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 12px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--j-taupe); line-height: 1.5;
}
.j-plate--over figcaption { position: absolute; left: 20px; right: 20px; bottom: 16px; margin: 0; color: #fff; }
.j-ph {
  width: 100%; background: var(--j-galet); display: flex; align-items: flex-end;
  padding: 18px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.6; color: var(--j-taupe);
}
.j-media { overflow: hidden; }
.j-media img { transition: transform 1.4s var(--j-ease); }
.j-js .j-media.j-pending img { transform: scale(1.045); }

/* ---------- En-tête ---------- */
.j-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--j-blanc); transition: box-shadow .3s;
}
.j-header.j-scrolled { box-shadow: 0 1px 0 var(--j-filet); }
.j-header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.j-logo { display: block; line-height: 0; }
.j-logo img { height: 20px; width: auto; }
.j-nav { display: flex; gap: clamp(20px, 2.6vw, 40px); }
.j-nav a {
  font-size: var(--j-label); letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  padding-block: 10px; border-bottom: 1px solid transparent; transition: border-color .3s;
}
.j-nav a:hover, .j-nav a[aria-current="page"] { border-bottom-color: var(--j-encre); }
.j-header__right { display: flex; align-items: center; gap: 6px; }
.j-menu-btn {
  display: none; min-height: 44px; min-width: 60px; padding: 0 0 0 14px; background: none; border: 0;
  color: var(--j-encre); font: 500 11px/1 var(--j-sans); letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; text-align: right;
}

/* Menu mobile plein écran */
.j-menu {
  position: fixed; inset: 0; z-index: 80; background: var(--j-blanc);
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
}
.j-menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.j-menu nav { margin-top: 28px; }
.j-menu nav a {
  display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--j-filet);
  font-family: var(--j-serif); font-weight: 300; font-size: clamp(34px, 10vw, 44px); line-height: 1.1;
}
.j-menu nav a:last-child { border-bottom: 1px solid var(--j-filet); }
.j-menu nav a span { font-family: var(--j-sans); font-size: 10px; letter-spacing: .2em; color: var(--j-taupe); width: 22px; }
.j-menu nav a[aria-current="page"] em { font-style: italic; }
.j-menu__foot { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.j-menu__foot .j-btn { width: 100%; }
.j-menu__contact { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.j-menu__contact a { min-height: 44px; display: flex; align-items: center; }
body.j-locked { overflow: hidden; }

/* Barre Réserver mobile */
.j-bookbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--j-blanc); border-top: 1px solid var(--j-filet);
  display: none; gap: 10px;
  transform: translateY(110%); transition: transform .4s var(--j-ease);
}
.j-bookbar.j-on { transform: none; }
.j-bookbar .j-btn { flex: 1; min-height: 48px; padding: 0 12px; }

/* ---------- Accueil : ouverture ---------- */
.j-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: stretch; max-width: var(--j-max); margin-inline: auto; padding-left: max(var(--j-gutter), env(safe-area-inset-left, 0px)); }
.j-hero__text { display: flex; flex-direction: column; padding-block: clamp(32px, 5vw, 72px) 40px; position: relative; z-index: 2; min-width: 0; }
.j-hero h1 { margin-top: 40px; }
.j-hero h1 .j-label { display: block; color: var(--j-encre); font-weight: 500; letter-spacing: .22em; }
.j-hero h1 .j-display { display: block; margin-top: 28px; margin-right: -24%; }
.j-hero__lede { margin-top: 44px; max-width: 25em; font-size: clamp(16px, 1.25vw, 18px); }
.j-hero .j-actions { margin-top: 40px; }
.j-hero .j-ruler { margin-top: auto; padding-top: 72px; padding-right: 48px; }
.j-hero__media { min-width: 0; }
.j-hero__media img { height: min(860px, 82vh); min-height: 560px; object-position: 50% 32%; }
.j-hero__media figcaption { padding-right: max(var(--j-gutter), env(safe-area-inset-right, 0px)); }

/* Intro « l'esprit » */
.j-intro { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2.4fr); gap: 48px; align-items: end; }
.j-intro h2 { font-size: clamp(30px, 3.5vw, 50px); line-height: 1.18; letter-spacing: -.01em; }
.j-intro__sign { margin-top: 32px; }
.j-intro__fig { margin-bottom: -120px; }
.j-intro__fig img { aspect-ratio: 3 / 4; }

/* Index typographique des univers */
.j-index__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.j-index a {
  display: grid; grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 1fr) 150px 32px; gap: 32px; align-items: center;
  padding-block: 36px; border-top: 1px solid var(--j-encre); transition: padding .5s var(--j-ease);
}
.j-index li:last-child a { border-bottom: 1px solid var(--j-encre); }
.j-index a:hover { padding-inline: 12px; }
.j-index__num { font-size: var(--j-label); letter-spacing: .2em; }
.j-index h3 { font-family: var(--j-serif); font-size: clamp(54px, 8.4vw, 120px); line-height: .95; letter-spacing: -.03em; }
.j-index__desc { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.6; }
.j-index__thumb { width: 150px; aspect-ratio: 4 / 5; object-fit: cover; }
.j-index .j-ph { width: 150px; aspect-ratio: 4 / 5; padding: 10px; font-size: 10px; letter-spacing: .14em; }
.j-index__arrow { font-size: 22px; text-align: right; }

/* Soin signature */
.j-signature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); max-width: var(--j-max); margin-inline: auto; }
.j-signature__media img { height: 100%; min-height: 640px; max-height: 960px; object-position: 50% 40%; }
.j-signature__text { padding: clamp(64px, 7vw, 104px) max(var(--j-gutter), env(safe-area-inset-right, 0px)) 80px clamp(32px, 6vw, 88px); display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.j-signature__text .j-actions { margin-top: 12px; }

/* Liste de prix */
.j-prices { font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.j-prices > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 14px; border-top: 1px solid var(--j-filet); }
.j-prices > div:last-child { border-bottom: 1px solid var(--j-filet); }
.j-prices dt span { color: var(--j-taupe); }
.j-prices dd { white-space: nowrap; text-align: right; }
.j-was { color: var(--j-taupe); text-decoration: line-through; margin-left: 6px; }
.j-save { color: var(--j-argile); }

/* Philosophie */
.j-quote { font-family: var(--j-serif); font-weight: 300; font-size: clamp(42px, 6.7vw, 96px); line-height: 1.04; letter-spacing: -.025em; max-width: 13em; }
.j-quote img { display: inline-block; width: 2em; height: .88em; object-fit: cover; object-position: 50% 40%; vertical-align: middle; margin-block: -.1em; }
.j-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: clamp(56px, 7vw, 96px); }
.j-values > div, .j-facts > div { border-top: 1px solid var(--j-encre); padding-top: 16px; }
.j-values h3, .j-facts h3 { font-family: var(--j-sans); font-size: var(--j-label); letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.j-values p, .j-facts p { margin-top: 10px; font-size: 16px; line-height: 1.65; }

/* Le lieu : titre posé dans le ciel */
.j-sky { position: relative; }
.j-sky img { width: 100%; height: clamp(520px, 55vw, 780px); object-fit: cover; object-position: 50% 62%; }
.j-sky__head { position: absolute; inset: 0 0 auto; }
.j-sky__head .j-wrap { padding-top: clamp(48px, 6vw, 88px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.j-sky__head .j-label { color: var(--j-encre); }
.j-sky__cap { position: absolute; left: 0; right: 0; bottom: 18px; }
.j-sky__cap .j-wrap { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.j-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }

/* Fondatrice */
.j-founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6%; align-items: end; }
.j-founder .j-ph { aspect-ratio: 4 / 5; }
.j-founder__text { display: flex; flex-direction: column; gap: 24px; max-width: 560px; padding-bottom: 40px; }

/* Bloc Réserver (partagé) */
.j-book { border-top: 1px solid var(--j-encre); }
.j-book__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px 64px; align-items: end; }
.j-book__intro { display: flex; flex-direction: column; gap: 28px; }
.j-channels a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; border-top: 1px solid var(--j-encre); font-size: 16px; transition: padding .4s var(--j-ease);
}
.j-channels a:last-child { border-bottom: 1px solid var(--j-encre); }
.j-channels a:hover { padding-inline: 10px; }
.j-channels small { color: var(--j-taupe); font-size: 14px; }
.j-book__note { margin-top: 20px; font-size: 14px; color: var(--j-taupe); }

.j-band { border-top: 1px solid var(--j-encre); }
.j-band__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding-block: clamp(56px, 7vw, 104px); }
.j-band .j-h-m { max-width: 18em; }

/* Pied de page */
.j-footer { border-top: 1px solid var(--j-filet); padding-block: 56px 32px; }
.j-footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; font-size: 14px; line-height: 1.9; }
.j-footer__grid nav, .j-footer__grid div { display: flex; flex-direction: column; }
.j-footer__grid a:hover { color: var(--j-taupe); }
.j-footer__mark { width: 52px; margin-bottom: 18px; }
.j-footer__word { width: 100%; margin-top: clamp(56px, 8vw, 104px); }
.j-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 22px; }

/* ---------- En-tête de page intérieure ---------- */
.j-pagehead { padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 104px); }
.j-pagehead__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.j-pagehead h1 { margin-top: 32px; }
.j-pagehead h1 .j-label { display: block; color: var(--j-encre); font-weight: 500; letter-spacing: .22em; margin-bottom: 24px; }
.j-toc { display: flex; flex-direction: column; }
.j-toc a { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: baseline; padding-block: 14px; border-top: 1px solid var(--j-encre); }
.j-toc a:last-child { border-bottom: 1px solid var(--j-encre); }
.j-toc b { font-family: var(--j-serif); font-weight: 300; font-size: 26px; }
.j-toc span, .j-toc small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--j-taupe); }

/* ---------- Soins ---------- */
.j-wide img { width: 100%; height: clamp(360px, 46vw, 680px); object-fit: cover; object-position: 50% 45%; }
.j-chapter__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--j-encre); margin-bottom: clamp(40px, 5vw, 72px); }
.j-chapter__head b { font-family: var(--j-serif); font-weight: 300; font-size: clamp(64px, 10vw, 150px); line-height: .85; letter-spacing: -.04em; }
.j-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.j-feature__media { position: sticky; top: 110px; }
.j-feature__media img { aspect-ratio: 4 / 5; }
.j-feature__body { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.j-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin-top: 12px; }
.j-specs > div { border-top: 1px solid var(--j-filet); padding-top: 14px; }
.j-specs dt { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.j-specs dd { margin-top: 8px; font-size: 16px; line-height: 1.65; }
.j-sub { border-top: 1px solid var(--j-encre); padding-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; }
.j-sub h3 { font-family: var(--j-serif); font-weight: 300; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
.j-sub__price { font-family: var(--j-serif); font-size: clamp(22px, 2vw, 28px); font-weight: 300; font-variant-numeric: tabular-nums; white-space: nowrap; }
.j-sub p, .j-sub .j-prices { grid-column: 1 / -1; }
.j-sub .j-label { grid-column: 1 / -1; }
.j-gloss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.j-gloss dt { font-family: var(--j-serif); font-weight: 300; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; }
.j-gloss dd { margin-top: 16px; }
.j-gloss .j-ph { aspect-ratio: 3 / 4; }
.j-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: clamp(56px, 6vw, 88px); }
.j-notice { background: var(--j-galet); padding: 28px 32px; font-size: 15px; line-height: 1.65; margin-top: clamp(48px, 5vw, 72px); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
.j-regard { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.j-regard__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.j-regard__imgs img { aspect-ratio: 3 / 4; object-fit: cover; }
.j-regard__imgs figure:last-child { margin-top: 64px; }
.j-table-wrap { overflow-x: auto; }
.j-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 560px; }
.j-table th, .j-table td { text-align: left; vertical-align: baseline; padding: 20px 24px 20px 0; border-top: 1px solid var(--j-filet); }
.j-table thead th { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; border-top: 1px solid var(--j-encre); padding-block: 14px; }
.j-table tbody tr:last-child td, .j-table tbody tr:last-child th { border-bottom: 1px solid var(--j-encre); }
.j-table tbody th { font-family: var(--j-serif); font-weight: 300; font-size: clamp(21px, 2vw, 26px); line-height: 1.2; width: 32%; }
.j-table td:last-child { text-align: right; padding-right: 0; font-family: var(--j-serif); font-size: clamp(20px, 1.8vw, 24px); white-space: nowrap; }
.j-table td { font-size: 15px; line-height: 1.6; color: var(--j-encre); }

/* ---------- Tarifs ---------- */
.j-tabs { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); z-index: 30; background: var(--j-blanc); border-block: 1px solid var(--j-encre); }
.j-tabs .j-wrap { display: flex; gap: clamp(20px, 4vw, 56px); overflow-x: auto; }
.j-tabs a { display: flex; align-items: center; min-height: 52px; font-size: var(--j-label); letter-spacing: .22em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.j-tabs a span { color: var(--j-taupe); margin-right: 10px; font-weight: 400; }
.j-tarif { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); padding-block: clamp(72px, 8vw, 120px); border-bottom: 1px solid var(--j-filet); scroll-margin-top: 150px; }
.j-tarif:last-of-type { border-bottom: 0; }
.j-tarif__side { display: flex; flex-direction: column; gap: 18px; }
.j-tarif__side .j-h-xl { font-size: clamp(56px, 8vw, 120px); }
.j-pricelist h3 { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; font-family: var(--j-sans); margin-bottom: 8px; }
.j-pricelist + .j-pricelist { margin-top: 48px; }
.j-pricelist .j-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding-block: 18px; border-top: 1px solid var(--j-filet); }
.j-pricelist .j-row:last-child { border-bottom: 1px solid var(--j-filet); }
.j-row__name { font-family: var(--j-serif); font-weight: 300; font-size: clamp(21px, 2vw, 27px); line-height: 1.2; }
.j-row__price { font-family: var(--j-serif); font-weight: 300; font-size: clamp(21px, 2vw, 27px); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.j-row__meta { font-size: 14px; color: var(--j-taupe); grid-column: 1 / -1; }
.j-row__meta .j-save { margin-left: 4px; }
.j-conditions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.j-conditions > div { border-top: 1px solid var(--j-encre); padding-top: 16px; }
.j-conditions h3 { font-family: var(--j-sans); font-size: var(--j-label); letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.j-conditions p { margin-top: 10px; font-size: 15px; }

/* ---------- À propos ---------- */
.j-about-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.j-about-hero .j-ph { aspect-ratio: 4 / 5; }
.j-story { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 48px; padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--j-filet); }
.j-story h2 { font-family: var(--j-serif); font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.j-story .j-text { font-size: clamp(16px, 1.3vw, 18px); }
.j-pull { font-family: var(--j-serif); font-weight: 300; font-style: italic; font-size: clamp(36px, 5vw, 72px); line-height: 1.08; letter-spacing: -.02em; max-width: 15em; }
.j-name { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.j-name__word { font-family: var(--j-serif); font-weight: 300; font-size: clamp(96px, 19vw, 280px); line-height: .8; letter-spacing: -.05em; }

/* ---------- Conseils ---------- */
.j-articles a { display: grid; grid-template-columns: 56px minmax(0, 1fr) 180px 120px; gap: 24px; align-items: baseline; padding-block: 28px; border-top: 1px solid var(--j-encre); }
.j-articles li:last-child a { border-bottom: 1px solid var(--j-encre); }
.j-articles h2 { font-family: var(--j-serif); font-weight: 300; font-size: clamp(26px, 3.2vw, 46px); line-height: 1.08; transition: transform .4s var(--j-ease); }
.j-articles a:hover h2 { transform: translateX(10px); }
.j-articles .j-label { font-size: 11px; }
.j-article { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); padding-block: clamp(72px, 9vw, 140px); border-top: 1px solid var(--j-filet); scroll-margin-top: 100px; }
.j-article__side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 110px; align-self: start; }
.j-article__side img { aspect-ratio: 4 / 5; object-fit: cover; margin-top: 12px; max-width: 320px; }
.j-article__body { font-size: clamp(16px, 1.3vw, 18px); }
.j-article__body h3 { font-family: var(--j-serif); font-weight: 300; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; margin-top: 2em; }
.j-article__body h3:first-child { margin-top: 0; }
.j-article__body p { margin-top: .8em; max-width: 36em; }
.j-steps { counter-reset: j-step; margin-top: 1em; max-width: 36em; }
.j-steps li { counter-increment: j-step; display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding-block: 14px; border-top: 1px solid var(--j-filet); }
.j-steps li:last-child { border-bottom: 1px solid var(--j-filet); }
.j-steps li::before { content: counter(j-step, decimal-leading-zero); font-size: 11px; letter-spacing: .2em; color: var(--j-taupe); padding-top: .45em; }
.j-article__body .j-link { margin-top: 2em; }
.j-disclaimer { font-size: 14px; color: var(--j-taupe); max-width: 44em; }

/* ---------- Contact ---------- */
.j-contact { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.j-contact .j-channels a { min-height: 76px; font-family: var(--j-serif); font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); }
.j-contact .j-channels small { font-family: var(--j-sans); }
.j-contact__aside { display: flex; flex-direction: column; gap: 28px; }
.j-info { display: grid; grid-template-columns: 120px minmax(0, 1fr); font-size: 15px; }
.j-info dt, .j-info dd { padding-block: 14px; border-top: 1px solid var(--j-filet); }
.j-info dt { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; padding-top: 17px; }
.j-info dd { overflow-wrap: anywhere; }
.j-info dt:last-of-type, .j-info dd:last-of-type { border-bottom: 1px solid var(--j-filet); }
.j-visit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.j-visit > * { border-top: 1px solid var(--j-encre); padding-top: 16px; }
.j-visit b { display: block; font-family: var(--j-serif); font-weight: 300; font-size: 40px; line-height: 1; margin-bottom: 18px; }
.j-visit h3 { font-family: var(--j-sans); font-size: var(--j-label); letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.j-visit p { margin-top: 10px; font-size: 16px; }
.j-duo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.j-duo .j-plate:first-child img { aspect-ratio: 3 / 2; }
.j-duo .j-plate:last-child img { aspect-ratio: 3 / 4; }

/* ---------- Mentions ---------- */
.j-legal { max-width: 46em; }
.j-legal h2 { font-family: var(--j-serif); font-weight: 300; font-size: clamp(26px, 2.6vw, 36px); margin-top: 2.2em; }
.j-legal p, .j-legal ul { margin-top: .8em; }
.j-legal li { padding-left: 1.2em; position: relative; }
.j-legal li::before { content: "—"; position: absolute; left: 0; color: var(--j-taupe); }
.j-todo { background: var(--j-galet); padding: 0 .3em; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .j-nav { display: none; }
  .j-menu-btn { display: inline-block; }
  .j-index a { grid-template-columns: 44px minmax(0, 1fr) 120px 24px; gap: 20px; }
  .j-index__desc { grid-column: 2 / 3; grid-row: 2; }
  .j-index__thumb, .j-index .j-ph { grid-row: 1 / span 2; grid-column: 3; width: 120px; }
  .j-index__arrow { grid-row: 1 / span 2; grid-column: 4; }
  .j-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .j-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .j-footer__grid > :first-child { grid-column: 1 / -1; }
  .j-gloss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .j-gloss > figure { grid-column: 1 / -1; max-width: 420px; }
  .j-visit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .j-articles a { grid-template-columns: 44px minmax(0, 1fr) 110px; }
  .j-articles a > :last-child { display: none; }
}

@media (max-width: 760px) {
  :root { --j-gutter: 20px; }
  .j-header__in { min-height: 64px; }
  .j-logo img { height: 16px; }
  .j-header .j-btn--sm { min-height: 42px; padding: 0 16px; font-size: 11px; letter-spacing: .2em; }
  .j-bookbar { display: flex; }
  body.jolie { padding-bottom: 0; }

  .j-hero { display: flex; flex-direction: column; padding-left: 0; }
  .j-hero__media { order: -1; }
  .j-hero__media img { height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 72vh; }
  .j-hero__media figcaption { display: none; }
  .j-hero__text { padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); }
  .j-hero__text > .j-label:first-child { display: none; }
  .j-hero h1 { margin-top: -0.6em; display: flex; flex-direction: column-reverse; font-size: clamp(54px, 16vw, 72px); }
  .j-hero h1 .j-display { margin: 0; font-size: clamp(54px, 16vw, 72px); }
  .j-hero h1 .j-label { margin-top: 20px; font-size: 11px; }
  .j-hero__lede { margin-top: 16px; }
  .j-hero .j-actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 28px; }
  .j-hero .j-actions .j-link { justify-content: center; border: 1px solid var(--j-encre); min-height: 50px; }
  .j-hero .j-ruler { padding: 36px 0 0; font-size: 10px; gap: 10px; }

  .j-intro { grid-template-columns: minmax(0, 1fr) 150px; gap: 24px 16px; }
  .j-intro > .j-label { grid-column: 1 / -1; }
  .j-intro__body { grid-column: 1 / -1; }
  .j-intro__fig { grid-column: 2; margin: 0; }
  .j-intro h2 { font-size: 30px; }

  .j-index a { grid-template-columns: 76px minmax(0, 1fr) 20px; gap: 6px 16px; padding-block: 22px; }
  .j-index a:hover { padding-inline: 0; }
  .j-index__thumb, .j-index .j-ph { grid-column: 1; grid-row: 1 / span 3; width: 76px; }
  .j-index .j-ph { font-size: 8px; padding: 6px; }
  .j-index__num { grid-column: 2; grid-row: 1; font-size: 10px; }
  .j-index h3 { grid-column: 2; grid-row: 2; font-size: 44px; }
  .j-index__desc { grid-column: 2; grid-row: 3; font-size: 13px; }
  .j-index__desc > span:first-child { display: none; }
  .j-index__arrow { grid-column: 3; grid-row: 1 / span 3; font-size: 18px; }

  .j-signature { grid-template-columns: 1fr; }
  .j-signature__media img { min-height: 0; aspect-ratio: 4 / 5; height: auto; }
  .j-signature__text { padding: 32px max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); gap: 20px; }
  .j-signature .j-actions, .j-feature .j-actions { flex-direction: column; align-items: stretch; }
  .j-signature .j-actions .j-link, .j-feature .j-actions .j-link { justify-content: center; border: 1px solid var(--j-encre); min-height: 50px; }

  .j-values, .j-facts, .j-conditions, .j-visit, .j-specs, .j-offers { grid-template-columns: 1fr; gap: 24px; }
  .j-sky img { height: 560px; object-position: 50% 70%; }
  .j-founder, .j-book__in, .j-pagehead__grid, .j-feature, .j-gloss, .j-regard, .j-tarif, .j-about-hero, .j-story, .j-name, .j-article, .j-contact, .j-duo { grid-template-columns: minmax(0, 1fr); }
  .j-founder { gap: 28px; }
  .j-founder__text { padding-bottom: 0; }
  .j-feature__media, .j-article__side { position: static; }
  .j-notice { grid-template-columns: 1fr; padding: 22px; gap: 8px; }
  .j-regard__imgs figure:last-child { margin-top: 40px; }
  .j-tarif { gap: 28px; padding-block: 64px; scroll-margin-top: 130px; }
  .j-tabs { top: calc(64px + env(safe-area-inset-top, 0px)); }
  .j-story { gap: 18px; }
  .j-story > :last-child:empty { display: none; }
  .j-articles a { grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; padding-block: 22px; }
  .j-articles a > .j-label:nth-of-type(2) { grid-column: 2; }
  .j-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .j-info { grid-template-columns: 96px minmax(0, 1fr); }
  .j-contact .j-channels a { min-height: 64px; font-size: 24px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .jolie *, .jolie *::before, .jolie *::after { transition: none !important; animation: none !important; }
  .j-js .j-media.j-pending img { transform: none; }
}