/* ==========================================================================
   House of Skin — feuille de style du site
   Reprend fidèlement l'export Claude Design « House of Skin homepage build 2 ».
   ========================================================================== */

/* ---------- Polices (hébergées sur le site, fichiers dans assets/fonts) ---------- */
/* Polices variables : un fichier couvre toutes les graisses. « latin » couvre le français
   et l'anglais ; « latin-ext » n'est téléchargé que si un caractère plus rare apparaît.
   Garder « latin-ext » AVANT « latin » : pour un caractère présent dans les deux (ex. « œ »),
   le navigateur essaie d'abord la dernière règle déclarée, donc le fichier « latin ». */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 400; font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 400; font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Couleurs, polices, base ---------- */
:root {
  --cream: #F7F3EE;     /* fond principal */
  --ivory: #FCFAF7;     /* fond clair, texte sur photo */
  --sand: #E7DDD2;      /* sections beiges, filets */
  --stone: #D5C4B5;     /* filets, appel à l'action */
  --mushroom: #B7A394;  /* numéros, contours */
  --taupe: #806B5E;     /* couleur d'accent */
  --ink: #423832;       /* texte, sections foncées */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --header-h: 64px;
  --gutter: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
html.menu-open { overflow: hidden; }
body { font-weight: 300; min-height: 100vh; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--taupe); }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, address, ul, ol { margin: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
address { font-style: normal; }
strong { font-weight: 500; }
[id] { scroll-margin-top: var(--header-h); }
:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: 10px 16px; font-size: 12px; letter-spacing: .16em; }
.skip-link:focus { top: 12px; color: var(--cream); }

/* ---------- Éléments communs ---------- */
.wrap { max-width: 1320px; margin: 0 auto; }
.kicker { font-size: 11px; letter-spacing: .32em; color: var(--taupe); }
.kicker--wide { letter-spacing: .34em; }
.accent { color: var(--taupe); }
.section-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.title { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 4.2vw, 58px); }
.title--06 { letter-spacing: .06em; }
.title--08 { letter-spacing: .08em; }

.btn { display: inline-block; border-radius: 3px; padding: 15px 26px; font-size: 11.5px; letter-spacing: .2em; font-weight: 400; transition: background-color .4s, color .4s, border-color .4s; }
.btn--taupe { background: var(--taupe); color: var(--cream); }
.btn--taupe:hover { background: var(--ink); color: var(--cream); }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--light:hover { background: var(--sand); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { background: var(--taupe); color: var(--cream); }
.btn--ghost { border: 1px solid rgba(252, 250, 247, .7); color: var(--ivory); }
.btn--ghost:hover { background: rgba(252, 250, 247, .12); color: var(--ivory); }
.btn--outline { border: 1px solid var(--mushroom); }
.btn--sm { padding: 14px 24px; font-size: 11px; }

.link-line { align-self: flex-start; font-size: 11.5px; letter-spacing: .22em; font-weight: 400; border-bottom: 1px solid var(--taupe); padding-bottom: 6px; }

.signature { display: flex; flex-direction: column; gap: 6px; }
.signature__name { font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1; letter-spacing: .02em; }
.signature__role { font-size: 10.5px; letter-spacing: .3em; color: var(--taupe); }

/* ---------- En-tête et menus ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(20px, 4vw, 56px); background: rgba(247, 243, 238, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--sand); }
.site-header--sticky { position: sticky; }
.header-spacer { height: var(--header-h); }
.brand { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand__name { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: .28em; white-space: nowrap; }
.brand__tag { font-size: 8.5px; letter-spacing: .32em; color: var(--taupe); white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 32px; font-size: 11.5px; letter-spacing: .2em; }
.nav [aria-current="page"] { border-bottom: 1px solid var(--taupe); padding-bottom: 3px; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.lang { display: flex; gap: 6px; font-size: 11px; letter-spacing: .16em; color: var(--mushroom); }
.lang a { color: var(--mushroom); }
.lang a:hover { color: var(--taupe); }
.lang [aria-current] { color: var(--ink); }
.header-book { padding: 11px 20px; font-size: 11px; white-space: nowrap; }
.back-link { font-size: 11px; letter-spacing: .2em; border-bottom: 1px solid var(--taupe); padding-bottom: 3px; white-space: nowrap; }
.menu-toggle { display: flex; flex-direction: column; gap: 5px; padding: 10px 4px; background: none; border: 0; cursor: pointer; }
.menu-toggle span { display: block; width: 22px; height: 1px; background: var(--ink); }
.mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: var(--cream); font-family: var(--serif); font-size: 32px; letter-spacing: .08em; }
.mobile-menu[hidden] { display: none; }
.mobile-book { display: none; position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 15px 34px; letter-spacing: .24em; white-space: nowrap; box-shadow: 0 8px 24px rgba(66, 56, 50, .22); }

/* Accueil : navigation mobile sous 1100 px */
.page-home .menu-toggle { display: none; }
@media (max-width: 1099.98px) {
  .page-home .nav, .page-home .header-book { display: none; }
  .page-home .menu-toggle { display: flex; }
  .page-home .mobile-book { display: inline-block; }
  .page-home .site-footer { padding-bottom: 104px; }
}
@media (min-width: 1100px) { .page-home .mobile-menu { display: none; } }

/* À propos : navigation mobile sous 1000 px */
.page-about .menu-toggle { display: none; }
@media (max-width: 999.98px) {
  .page-about .nav { display: none; }
  .page-about .menu-toggle { display: flex; }
}
@media (min-width: 1000px) { .page-about .mobile-menu { display: none; } }

/* Téléphones : le bouton Réserver de « À propos » passe en bas de l'écran,
   le lien « Retour au site » ne garde que sa flèche */
@media (max-width: 559.98px) {
  .page-about .header-book { display: none; }
  .page-about .mobile-book { display: inline-block; }
  .page-about .footer-simple { padding-bottom: 104px; }
  .back-link__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Petits téléphones : le logo texte doit laisser la place aux boutons */
@media (max-width: 440px) {
  .site-header { gap: 12px; }
  .brand__name { font-size: 18px; letter-spacing: .2em; }
  .brand__tag { font-size: 7px; letter-spacing: .2em; }
  .header-actions { gap: 12px; }
}

/* ==========================================================================
   ACCUEIL
   ========================================================================== */

/* ---------- Héros (s'agrandit au défilement) ---------- */
.hero { position: relative; height: calc(100vh - var(--header-h)); }
.js .hero { height: 240vh; }
.js .hero.hero--static { height: calc(100vh - var(--header-h)); }
.hero__stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden; display: flex; align-items: center; justify-content: center; }
@supports (height: 100dvh) {
  .hero, .js .hero.hero--static, .hero__stage { height: calc(100dvh - var(--header-h)); }
  .js .hero { height: 240vh; }
}
.hero__bg { position: absolute; inset: 0; background: var(--sand); display: none; }
.js .hero__bg { display: block; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.15) saturate(.85); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(66, 56, 50, .28); }
.hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--stone); }
.js .hero__media { inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 400px; border-radius: 4px; box-shadow: 0 0 50px rgba(66, 56, 50, .25); }
.hero__media > img { width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(66, 56, 50, .62), rgba(66, 56, 50, .12) 55%); }
.hero__copy { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 5vw, 72px); display: flex; flex-direction: column; gap: 22px; color: var(--ivory); }
.js .hero__copy { opacity: 0; visibility: hidden; pointer-events: none; }
.hero__kicker { font-size: 11px; letter-spacing: .3em; }
.hero__title { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 6vw, 84px); line-height: 1; max-width: 14ch; text-wrap: balance; }
.hero__sub { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; max-width: 46ch; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero__words { display: none; }
.js .hero__words { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; color: var(--ivory); text-align: center; }
.hero__word { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 7vw, 104px); line-height: 1; letter-spacing: .02em; will-change: transform; }
.hero__word--italic { font-style: italic; letter-spacing: 0; }
.hero__hint { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .3em; }
.hero__hint span:last-child { color: var(--sand); }

/* ---------- Introduction ---------- */
.intro { max-width: 1320px; margin: 0 auto; padding: clamp(96px, 14vw, 180px) clamp(20px, 6vw, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(48px, 7vw, 112px); align-items: center; }
.intro__text { display: flex; flex-direction: column; gap: 28px; }
.intro__title { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.08; letter-spacing: .04em; text-wrap: balance; }
.prose { display: flex; flex-direction: column; gap: 18px; font-size: 16px; line-height: 1.8; max-width: 52ch; text-wrap: pretty; }
.intro__media { position: relative; padding: 0 0 40px 40px; }
.intro__media::before { content: ""; position: absolute; left: 0; bottom: 0; width: 70%; height: 70%; background: var(--sand); }
.intro__media img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 45% 50%; background: var(--stone); }

/* ---------- « Au cœur de votre peau » (zoom au défilement) ---------- */
.skin { position: relative; height: calc(100vh - var(--header-h)); background: var(--sand); }
.js .skin { height: 420vh; }
.skin__stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden; }
@supports (height: 100dvh) {
  .skin, .skin__stage { height: calc(100dvh - var(--header-h)); }
  .js .skin { height: 420vh; }
}
.skin__macro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; transform-origin: 45% 45%; will-change: transform; }
.skin__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(66, 56, 50, .15), rgba(66, 56, 50, .55)); }
.skin__intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 0 24px; text-align: center; color: var(--ivory); }
.skin__kicker { font-size: 11px; letter-spacing: .36em; }
.skin__title { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 6vw, 92px); line-height: 1; max-width: 14ch; text-wrap: balance; }
.skin__sub { margin-top: 12px; font-size: 11px; letter-spacing: .3em; opacity: .85; }
.skin__intro, .skin__dots, .skin__progress { display: none; }
.js .skin__intro { display: flex; }
.js .skin__dots, .js .skin__progress { display: block; }
.skin__dots { position: absolute; inset: 0; pointer-events: none; }
.spot { position: absolute; opacity: 0; display: flex; align-items: center; gap: 12px; transform: translate(-14px, -14px); }
.spot__n { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ivory); background: rgba(66, 56, 50, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--ivory); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.spot__label { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ivory); text-shadow: 0 1px 12px rgba(66, 56, 50, .5); }
.skin__panel { position: absolute; left: clamp(16px, 4vw, 56px); bottom: clamp(16px, 4vw, 48px); width: min(420px, 40vw); max-height: calc(100% - 2 * clamp(16px, 4vw, 48px) - 24px); overflow-y: auto; padding: clamp(16px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 2px; background: rgba(247, 243, 238, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.js .skin__panel { opacity: 0; visibility: hidden; }
.skin__panel-title { font-size: 10.5px; letter-spacing: .3em; color: var(--taupe); padding-bottom: 10px; }
.spot-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--sand); }
.js .spot-item { opacity: .25; }
.spot-item__n { font-size: 11px; color: var(--taupe); }
.spot-item__body { display: flex; flex-direction: column; gap: 4px; }
.spot-item__label { font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.spot-item__text { font-size: 13px; line-height: 1.5; color: var(--taupe); }
.spot-item__link { font-size: 10px; letter-spacing: .18em; border-bottom: 1px solid var(--taupe); padding-bottom: 3px; white-space: nowrap; }
.skin__book { margin-top: 14px; align-self: flex-start; letter-spacing: .22em; }
.skin__free { margin-top: 8px; font-size: 11px; letter-spacing: .16em; color: var(--taupe); }
.skin__progress { position: absolute; left: clamp(16px, 4vw, 56px); top: 24px; width: 120px; height: 1px; background: rgba(252, 250, 247, .35); }
.skin__bar { height: 1px; width: 0; background: var(--ivory); }
@media (max-width: 767.98px) {
  /* Panneau compact, dégagé du bouton BOOK NOW flottant */
  .skin__panel { left: 16px; right: 16px; bottom: 84px; width: auto; max-height: calc(100% - 108px); padding: 14px 18px; }
  .spot-item { padding: 9px 0; }
  .spot-item__label { font-size: 19px; }
  /* Pastilles au-dessus du panneau, à droite sur la peau nette ; libellé à gauche de la pastille */
  .skin__dots { top: 36px; bottom: auto; height: calc(100% - 84px - 340px - 36px); min-height: 130px; }
  .spot { flex-direction: row-reverse; left: auto !important; }
  .spot__label { font-size: 19px; white-space: nowrap; }
  .spot:nth-child(1) { right: 4% !important; top: 14% !important; }
  .spot:nth-child(2) { right: 14% !important; top: 38% !important; }
  .spot:nth-child(3) { right: 6% !important; top: 62% !important; }
  .spot:nth-child(4) { right: 16% !important; top: 86% !important; }
}
@media (max-width: 767.98px), (max-height: 719.98px) { .spot-item__text { display: none; } }

/* ---------- Fondatrice ---------- */
.owner { background: var(--sand); padding: clamp(96px, 12vw, 160px) clamp(20px, 6vw, 96px); }
.owner__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(48px, 7vw, 112px); align-items: center; }
.owner__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.owner__photo img { width: 100%; height: 100%; object-fit: cover; }
.owner__text { display: flex; flex-direction: column; gap: 26px; }
.owner__title { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.08; letter-spacing: .03em; text-wrap: balance; }
.owner__quote { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; color: var(--taupe); text-wrap: pretty; }
.owner__story { font-size: 16px; line-height: 1.8; max-width: 52ch; text-wrap: pretty; }
.owner__story p + p { margin-top: 1.8em; }

/* ---------- Soins populaires ---------- */
.treatments { background: var(--ivory); padding: clamp(96px, 12vw, 160px) var(--gutter); }
.treatments .section-head { gap: 18px; }
.treat-band { margin: clamp(48px, 6vw, 80px) calc(-1 * var(--gutter)) 0; padding: clamp(28px, 3vw, 40px) clamp(20px, 3vw, 40px); background: var(--taupe); }
.treat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.treat-card { position: relative; aspect-ratio: 3 / 5; border-radius: 24px; overflow: hidden; background: var(--mushroom); color: var(--ivory); transition: transform .7s ease, box-shadow .7s ease; }
.treat-card__img { position: absolute; inset: 0; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.treat-card__img img { width: 100%; height: 100%; object-fit: cover; }
.treat-card__shade { position: absolute; inset: 0; background: rgba(66, 56, 50, .3); }
.treat-card__shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(66, 56, 50, .6), rgba(66, 56, 50, 0) 60%); opacity: 0; transition: opacity .8s ease; }
.treat-card__body { position: relative; height: 100%; padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.treat-card__top { display: flex; flex-direction: column; gap: 16px; }
.treat-card__cat { font-size: 11px; letter-spacing: .3em; font-weight: 500; }
.treat-card__name { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.6vw, 40px); line-height: 1.05; text-wrap: balance; }
.treat-card__bottom { display: flex; flex-direction: column; gap: 22px; }
.treat-card__tagline { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.treat-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.treat-card__book { border: 1px solid var(--cream); border-radius: 8px; padding: 16px 28px; font-size: 11px; letter-spacing: .26em; font-weight: 500; background: rgba(252, 250, 247, .08); color: var(--ivory); transition: background-color .5s ease, color .5s ease, border-color .5s ease; }
.treat-card__more { font-size: 11px; letter-spacing: .22em; font-weight: 400; color: var(--ivory); border-bottom: 1px solid rgba(252, 250, 247, .6); padding-bottom: 4px; }
.treat-card__more:hover { color: var(--sand); }
.treat-card:hover, .treat-card:focus-within { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(66, 56, 50, .35); }
.treat-card:hover .treat-card__img, .treat-card:focus-within .treat-card__img { transform: scale(1.08); }
.treat-card:hover .treat-card__shade::after, .treat-card:focus-within .treat-card__shade::after { opacity: 1; }
.treat-card:hover .treat-card__tagline, .treat-card:focus-within .treat-card__tagline { opacity: 1; transform: none; }
.treat-card:hover .treat-card__book, .treat-card:focus-within .treat-card__book { background: var(--cream); color: var(--ink); }
.treat-card .treat-card__book:hover { background: var(--taupe); color: var(--cream); border-color: var(--taupe); }
/* Écrans tactiles (pas de survol) : on affiche directement l'accroche */
@media (hover: none) {
  .treat-card__shade::after { opacity: 1; }
  .treat-card__tagline { opacity: 1; transform: none; }
}

/* ---------- Tarifs ---------- */
.pricing { background: var(--ivory); padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(96px, 12vw, 160px); }
.pricing .wrap { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 72px); }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 3vw, 44px); align-items: start; }
.price-card { border: 1px solid var(--sand); background: var(--ivory); }
.price-card__head { background: var(--sand); padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 56px) clamp(36px, 3.5vw, 52px); }
.price-card__head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.8vw, 42px); line-height: 1.1; }
.price-card__body { padding: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 56px) clamp(32px, 3vw, 44px); display: flex; flex-direction: column; }
.price-list { list-style: none; padding: 0; }
.price-list li { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--sand); }
.price-list li::before { content: "✓"; color: var(--taupe); font-size: 16px; font-weight: 500; }
.price-list__name { flex: 1; font-size: 16px; letter-spacing: .02em; color: var(--taupe); }
.price-list__price { font-size: 13px; letter-spacing: .14em; font-weight: 500; white-space: nowrap; }
.price-card__more { margin-top: 36px; align-self: flex-start; font-size: 12px; letter-spacing: .28em; font-weight: 500; }
.pricing__note { text-align: center; font-size: 12.5px; color: var(--taupe); }

/* ---------- L'expérience ---------- */
.experience { padding: clamp(96px, 12vw, 160px) var(--gutter); }
.experience .wrap { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
.experience__title { text-align: center; font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 4vw, 54px); letter-spacing: .06em; text-wrap: balance; }
.experience__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 1px solid var(--stone); }
.experience__item { padding: 36px 28px 8px 0; display: flex; flex-direction: column; gap: 16px; }
.experience__n { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--taupe); }
.experience__item h3 { font-size: 12px; letter-spacing: .26em; font-weight: 500; }
.experience__item p { font-size: 15px; line-height: 1.75; text-wrap: pretty; }

/* ---------- Consultation ---------- */
.consult { background: var(--ink); color: var(--cream); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.consult__media { position: relative; min-height: 420px; background: var(--taupe); }
.consult__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.12); }
.consult__body { padding: clamp(56px, 8vw, 120px) clamp(24px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.consult__title { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.1; letter-spacing: .04em; text-wrap: balance; }
.consult__text { font-size: 16px; line-height: 1.8; max-width: 46ch; color: var(--sand); text-wrap: pretty; }
.consult__body .btn { align-self: flex-start; }
.consult__free { margin-top: -12px; font-size: 12px; letter-spacing: .16em; color: var(--cream); }
.consult__note { font-size: 12.5px; line-height: 1.6; color: var(--stone); }

/* ---------- Avant / après ---------- */
.results { padding: clamp(96px, 12vw, 160px) var(--gutter); }
.results .wrap { display: flex; flex-direction: column; gap: 48px; }
.results__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.results__note { font-size: 13px; color: var(--taupe); max-width: 40ch; }
.results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.result { display: flex; flex-direction: column; gap: 14px; }
.result__img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sand); }
.result__img img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; padding: 6px 12px; font-size: 10px; letter-spacing: .24em; }
.badge--before { left: 12px; bottom: 12px; background: rgba(247, 243, 238, .9); }
.badge--after { right: 12px; bottom: 12px; background: rgba(66, 56, 50, .85); color: var(--cream); }
.result--stacked .badge--before { top: 12px; bottom: auto; }
.result--stacked .badge--after { left: 12px; right: auto; }
.result figcaption { font-size: 11px; letter-spacing: .26em; }

/* ---------- Avis clientes ---------- */
.reviews { background: var(--sand); padding: clamp(96px, 12vw, 150px) var(--gutter); }
.reviews .wrap { display: flex; flex-direction: column; gap: 56px; }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.review { background: var(--cream); padding: 40px 32px; display: flex; flex-direction: column; gap: 20px; min-height: 240px; }
.review__stars { font-size: 13px; letter-spacing: .3em; color: var(--taupe); }
.review__text { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--taupe); }
.reviews__note { margin-top: -32px; text-align: center; font-size: 12.5px; color: var(--taupe); }

/* ---------- Instagram ---------- */
.instagram { padding: clamp(96px, 12vw, 160px) var(--gutter); }
.instagram .wrap { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.instagram .section-head { gap: 14px; }
.ig-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(23%, 150px), 1fr)); gap: 6px; }
.ig-grid a { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sand); }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease, opacity .6s; }
.ig-grid a:hover img { transform: scale(1.04); opacity: .88; }

/* ---------- FAQ ---------- */
.faq { background: var(--ivory); padding: clamp(96px, 12vw, 160px) var(--gutter); }
.faq .wrap { max-width: 860px; display: flex; flex-direction: column; gap: 48px; }
.faq__list { border-top: 1px solid var(--stone); }
.faq__item { border-bottom: 1px solid var(--stone); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2vw, 24px); color: var(--ink); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; flex-shrink: 0; font-family: var(--sans); font-weight: 300; font-size: 22px; color: var(--taupe); }
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a { padding: 0 48px 28px 0; font-size: 15px; line-height: 1.8; text-wrap: pretty; }

/* ---------- Appel à l'action final ---------- */
.cta { background: var(--stone); padding: clamp(110px, 14vw, 190px) var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.cta__title { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 5vw, 72px); line-height: 1.05; letter-spacing: .05em; max-width: 16ch; text-wrap: balance; }
.cta__text { font-size: 16px; line-height: 1.7; max-width: 44ch; }
.cta__btn { margin-top: 8px; padding: 20px 40px; font-size: 12px; letter-spacing: .24em; }
.cta__note { font-size: 12.5px; line-height: 1.6; color: var(--taupe); max-width: 52ch; }
.cta__note a { border-bottom: 1px solid var(--taupe); }

/* ---------- Nous visiter ---------- */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.contact__body { padding: clamp(64px, 8vw, 120px) clamp(24px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.contact__title { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.8vw, 52px); letter-spacing: .06em; }
.contact__address { font-size: 16px; line-height: 1.8; }
.contact__lines { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.6; }
.hours { display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.hours__title { font-size: 11px; letter-spacing: .3em; color: var(--taupe); }
.hours__row { display: flex; justify-content: space-between; gap: 24px; font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--sand); }
.hours__row span:last-child { color: var(--taupe); white-space: nowrap; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.contact__map { min-height: 440px; background: var(--sand); }
.contact__map iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; filter: grayscale(1) sepia(.3) contrast(.92); }

/* ---------- Pied de page (accueil) ---------- */
.site-footer { background: var(--ink); color: var(--sand); padding: clamp(64px, 8vw, 104px) var(--gutter) 40px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 64px; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px; }
.footer__brand { display: flex; flex-direction: column; gap: 8px; }
.footer__name { font-family: var(--serif); font-size: 26px; letter-spacing: .26em; color: var(--cream); }
.footer__tag { font-size: 10px; letter-spacing: .3em; }
.footer__contact { font-size: 14px; line-height: 1.8; }
.footer__contact a { color: var(--cream); }
.footer__contact a:hover { color: var(--stone); }
.footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 13px; letter-spacing: .06em; }
.footer__links a { color: var(--sand); }
.footer__links a:hover { color: var(--ivory); }
.footer__bottom { border-top: 1px solid var(--taupe); padding-top: 24px; font-size: 11.5px; letter-spacing: .12em; color: var(--stone); }

/* ==========================================================================
   À PROPOS
   ========================================================================== */
.about-hero { padding: clamp(56px, 8vw, 120px) var(--gutter) clamp(80px, 10vw, 140px); }
.about-hero__grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(48px, 7vw, 112px); align-items: center; }
.about-hero__text { display: flex; flex-direction: column; gap: 28px; }
.about-hero__title { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 6.4vw, 96px); line-height: .98; }
.about-hero__quote { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; color: var(--taupe); max-width: 30ch; }
.arch { position: relative; justify-self: center; width: min(100%, 480px); padding: 22px 22px 0 0; }
.arch::before { content: ""; position: absolute; right: 0; top: 0; width: 86%; height: 94%; border: 1px solid var(--mushroom); border-radius: 400px 400px 0 0; }
.arch__img { position: relative; aspect-ratio: 4 / 5.2; border-radius: 400px 400px 0 0; overflow: hidden; background: var(--stone); }
.arch__img img { width: 100%; height: 100%; object-fit: cover; }

.about-title { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.05; }

.story { background: var(--sand); padding: clamp(88px, 11vw, 150px) var(--gutter); }
.story__grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(48px, 7vw, 104px); align-items: start; }
.mosaic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 1 / 1; gap: 12px; }
.mosaic > div { min-height: 0; overflow: hidden; background: var(--stone); }
.mosaic > div:first-child { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.story__text { display: flex; flex-direction: column; gap: 24px; }
.story__body { font-size: 16px; line-height: 1.85; max-width: 56ch; text-wrap: pretty; }
.story__body p + p { margin-top: 1.85em; }
.story .signature { margin-top: 4px; }

.training { padding: clamp(88px, 11vw, 150px) var(--gutter); }
.training__grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start; }
.training__intro { display: flex; flex-direction: column; gap: 20px; }
.training__text { font-size: 16px; line-height: 1.8; max-width: 40ch; text-wrap: pretty; }
.num-list { list-style: none; padding: 0; border-top: 1px solid var(--stone); }
.num-row { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--stone); }
.num-row__n { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--mushroom); }
.num-row__body { display: flex; flex-direction: column; gap: 6px; }
.num-row__title { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; }
.num-row__text { font-size: 14px; line-height: 1.6; color: var(--taupe); }

.tech { background: var(--ink); color: var(--cream); padding: clamp(88px, 11vw, 150px) var(--gutter); }
.tech__grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(48px, 7vw, 104px); align-items: center; }
.tech__text { display: flex; flex-direction: column; gap: 24px; }
.tech .kicker { color: var(--stone); }
.tech__title { font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 4.6vw, 64px); line-height: 1; }
.tech__title em { color: var(--stone); }
.tech__badge { align-self: flex-start; max-width: 100%; display: flex; align-items: center; gap: 10px; border: 1px solid var(--stone); border-radius: 18px; padding: 10px 18px; font-size: 10px; line-height: 1.4; letter-spacing: .18em; color: var(--cream); }
.tech__badge::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--stone); }
.tech__badge span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tech__body { font-size: 16px; line-height: 1.85; max-width: 50ch; color: var(--sand); text-wrap: pretty; }
.num-list--dark { margin-top: 8px; border-top-color: var(--taupe); }
.num-list--dark .num-row { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-bottom-color: var(--taupe); }
.num-list--dark .num-row__n { font-size: 18px; }
.num-list--dark .num-row__title { font-size: clamp(22px, 2vw, 27px); line-height: 1.15; color: var(--cream); }
.num-list--dark .num-row__text { line-height: 1.65; color: var(--sand); text-wrap: pretty; }
.tech__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 400px 400px 0 0; background: var(--taupe); }
.tech__img img { width: 100%; height: 100%; object-fit: cover; }

.values { padding: clamp(88px, 11vw, 150px) var(--gutter); }
.values .wrap { max-width: 1240px; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
.values__title { text-align: center; font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4.4vw, 62px); line-height: 1.05; }
.values__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 48px 32px; }
.value { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.value__n { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--mushroom); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--taupe); }
.value h3 { font-size: 12px; letter-spacing: .26em; font-weight: 500; }
.value p { font-size: 15px; line-height: 1.75; max-width: 28ch; text-wrap: pretty; }

.studio { background: var(--ivory); padding: clamp(88px, 11vw, 150px) var(--gutter); }
.studio .wrap { display: flex; flex-direction: column; gap: 48px; }
.studio .section-head { gap: 14px; }
.studio__title { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4.4vw, 62px); line-height: 1; }
.studio__text { font-size: 16px; line-height: 1.8; max-width: 52ch; text-wrap: pretty; }
.studio__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.studio__grid > div { aspect-ratio: 3 / 4; overflow: hidden; background: var(--sand); }
.studio__grid img { width: 100%; height: 100%; object-fit: cover; }

.safety { padding: clamp(88px, 11vw, 150px) var(--gutter); }
.safety .wrap { max-width: 1100px; display: flex; flex-direction: column; gap: 48px; }
.safety .section-head { gap: 14px; }
.safety__title { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; }
.safety__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1px; background: var(--stone); border: 1px solid var(--stone); }
.safety__item { background: var(--cream); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 12px; }
.safety__item h3 { font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.safety__item p { font-size: 15px; line-height: 1.75; text-wrap: pretty; }

.cta--about { padding: clamp(100px, 12vw, 170px) var(--gutter); gap: 26px; }
.cta--about .cta__title { font-size: clamp(40px, 5.4vw, 80px); line-height: 1; letter-spacing: 0; }
.cta--about .cta__btn { margin-top: 6px; padding: 18px 32px; font-size: 11.5px; letter-spacing: .22em; }
.cta__sub { font-size: 12px; letter-spacing: .16em; }

/* ---------- Pied de page simple (À propos, politiques) ---------- */
.footer-simple { background: var(--ink); color: var(--sand); padding: 56px var(--gutter) 36px; }
.footer-simple .wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.footer-simple__name { font-family: var(--serif); font-size: 30px; letter-spacing: .3em; color: var(--cream); }
.footer-simple__contact { font-size: 14px; line-height: 1.8; }
.footer-simple__contact a { color: var(--cream); }
.footer-simple__contact a:hover { color: var(--stone); }
.footer-simple__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 12px; letter-spacing: .1em; }
.footer-simple__links a { color: var(--sand); }
.footer-simple__links a:hover { color: var(--ivory); }
.footer-simple__copy { font-size: 11.5px; letter-spacing: .12em; color: var(--stone); }
.footer-simple--legal { padding: 48px var(--gutter) 32px; }
.footer-simple--legal .wrap { gap: 16px; }
.footer-simple--legal .footer-simple__name { font-size: 26px; }

/* ==========================================================================
   POLITIQUES (annulation, confidentialité)
   ========================================================================== */
.legal { padding: clamp(56px, 8vw, 112px) var(--gutter) clamp(80px, 10vw, 140px); }
.legal__wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.legal__wrap--wide { max-width: 1120px; gap: clamp(48px, 6vw, 80px); }
.legal__head { display: flex; flex-direction: column; gap: 20px; }
.legal__head--narrow { max-width: 760px; }
.legal__title { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 6vw, 84px); line-height: 1; }
.legal__intro { font-size: 16px; line-height: 1.8; text-wrap: pretty; }
.legal__updated { font-size: 12px; letter-spacing: .14em; color: var(--taupe); }

.keybox { background: var(--ink); color: var(--cream); padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.keybox__kicker { font-size: 11px; letter-spacing: .3em; color: var(--stone); }
.keybox__big { font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 8vw, 104px); line-height: .9; }
.keybox p { font-size: 16px; line-height: 1.7; color: var(--sand); max-width: 48ch; text-wrap: pretty; }

.clauses { border-top: 1px solid var(--stone); }
.clause { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 32px 0; border-bottom: 1px solid var(--stone); }
.clause__n { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--mushroom); }
.clause__body { display: flex; flex-direction: column; gap: 12px; }
.clause h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; }
.clause p { font-size: 15.5px; line-height: 1.85; text-wrap: pretty; }

.closing { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding-top: 16px; }
.closing__quote { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3vw, 36px); line-height: 1.3; color: var(--taupe); max-width: 24ch; }
.closing__thanks { font-family: var(--serif); font-style: italic; font-size: 30px; }
.closing__brand { font-size: 10.5px; letter-spacing: .3em; color: var(--taupe); }
.closing__contact { margin-top: 12px; font-size: 14px; line-height: 1.7; }
.closing__contact a { border-bottom: 1px solid var(--taupe); }

.privacy__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.toc { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--stone); }
.toc a { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sand); font-size: 13px; line-height: 1.4; }
.toc__n { color: var(--mushroom); font-family: var(--serif); font-style: italic; }
@media (min-width: 900px) {
  .privacy__grid { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
  .toc { position: sticky; top: 96px; }
}
.policy { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.policy__section { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 96px; }
.policy__head { display: flex; align-items: baseline; gap: 16px; }
.policy__n { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--mushroom); }
.policy__head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; }
.policy__body { font-size: 15.5px; line-height: 1.85; text-wrap: pretty; }
.policy__body ul { padding-left: 1.2em; }
.policy__body a { border-bottom: 1px solid var(--taupe); }
.officer { background: var(--sand); padding: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; gap: 14px; }
.officer__kicker { font-size: 11px; letter-spacing: .3em; color: var(--taupe); }
.officer__name { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.officer p { font-size: 15px; line-height: 1.8; }
.officer a[href^="mailto"] { border-bottom: 1px solid var(--taupe); }

/* ---------- Page 404 ---------- */
.notfound { min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 80px var(--gutter); text-align: center; }
.notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .treat-card, .treat-card__img, .ig-grid img { transition: none; }
}