/* ==========================================================================
   Carine Laugier — Réflexologue certifiée RNCP
   Ambiance : cave voûtée en pierre, bois, lumière chaude ocre et dorée
   ========================================================================== */

/* ---------- Polices (hébergées sur le site, sans appel à Google) ---------- */
@font-face {
  font-family: "Great Vibes";
  src: url("../fonts/great-vibes.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Couleurs & mesures ---------- */
:root {
  --cream: #faf6ef;
  --cream-2: #f3ebdd;
  --paper: #fffcf6;
  --sand: #e8d9c0;
  --stone: #d6c2a1;
  --ochre: #b9822f;
  --ochre-dark: #8a5a1c;
  --amber: #e0a04a;
  --gold: #c9a24f;
  --gold-light: #ecd9a8;
  --gold-dark: #9a6f2a;
  --khaki: #6b6e44;
  --khaki-dark: #4b4d2e;
  --khaki-soft: #e7e6d3;
  --ink: #2f251b;
  --ink-2: #54453a;
  --muted: #7a6a58;
  --night: #1f1813;
  --night-2: #2a2018;
  --line: rgba(185, 134, 47, .22);

  --script: "Great Vibes", "Snell Roundhand", "Segoe Script", cursive;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  --gutter: clamp(18px, 4vw, 40px);
  --radius: 22px;
  --shadow-soft: 0 18px 40px -30px rgba(70, 45, 20, .45);
  --shadow-lift: 0 30px 60px -34px rgba(70, 45, 20, .6);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--ochre-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 .55em;
  letter-spacing: .003em;
  text-wrap: balance;
}
h2 { font-size: clamp(2.1rem, 1.45rem + 2.4vw, 3.2rem); }
h3 { font-size: clamp(1.45rem, 1.25rem + .8vw, 1.85rem); }
p { margin: 0 0 1.1em; }
strong { font-weight: 600; color: var(--ink); }
ul, ol { margin: 0 0 1.2em; }
::selection { background: rgba(201, 162, 79, .35); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--cream); padding: 10px 18px; border-radius: 10px; text-decoration: none;
}
.skip-link:focus { top: 16px; color: var(--cream); }

.container { width: min(1180px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.narrow { width: min(780px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.center { text-align: center; justify-content: center; }
.icon { width: 1em; height: 1em; flex: none; }

/* ---------- Petits éléments typographiques ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .9em;
  font-family: var(--sans); font-size: .76rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ochre-dark); margin: 0 0 1.1rem;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow-light { color: var(--gold-light); }
.lead { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); color: var(--ink-2); }
.script { font-family: var(--script); font-weight: 400; }
.muted { color: var(--muted); }
@media (min-width: 700px) { .nobr { white-space: nowrap; } }

.nowrap { white-space: nowrap; }
.divider { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold); margin: 20px auto 26px; }
.divider span { width: 70px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.divider span:last-child { transform: scaleX(-1); }
.divider-star { width: 14px; height: 14px; }
.divider.left { justify-content: flex-start; margin-left: 0; }

/* ---------- Boutons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.75em; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans); font-weight: 500; font-size: .98rem; letter-spacing: .03em; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.btn .icon { width: 1.15em; height: 1.15em; }
.btn-gold {
  color: #2a1d10;
  background: linear-gradient(135deg, #f3dea8 0%, #d8b064 42%, #bb8833 100%) border-box;
  box-shadow: 0 12px 28px -12px rgba(185, 134, 47, .8), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn-gold::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .9s var(--ease);
}
.btn-gold:hover { color: #2a1d10; transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(185, 134, 47, .9), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn-gold:hover::after { transform: translateX(130%); }
.btn-ghost-light { color: var(--cream); border-color: rgba(243, 230, 204, .5); background: rgba(255, 255, 255, .08); }
.btn-ghost-light:hover { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(243, 230, 204, .85); }
.btn-outline { color: var(--ochre-dark); border-color: rgba(185, 134, 47, .55); background: transparent; }
.btn-outline:hover { color: var(--ink); background: rgba(201, 162, 79, .14); border-color: var(--gold); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn-row.center { justify-content: center; }
.link-arrow { display: inline-flex; align-items: center; gap: .45em; font-weight: 500; text-decoration: none; }
.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform .3s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ==========================================================================
   En-tête & menu
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 60;
  padding: 12px 0; color: var(--cream);
  transition: background-color .45s, box-shadow .45s, padding .45s, color .45s;
}
.site-header.is-scrolled {
  background: rgba(250, 246, 239, .97);
  box-shadow: 0 10px 30px -22px rgba(47, 37, 27, .55);
  padding: 6px 0; color: var(--ink);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; min-width: 0; transition: opacity .5s var(--ease), visibility .5s, transform .5s var(--ease); }
/* Accueil : le grand logo du bandeau suffit, le petit logo apparaît au défilement */
.js .page-home .site-header:not(.is-scrolled) .brand { opacity: 0; visibility: hidden; transform: translateY(-8px); }
.js .page-home:not(.nav-open) .site-header:not(.is-scrolled) .brand-logo-light { display: none; }
.js .page-home.nav-open .site-header .brand { opacity: 1; visibility: visible; transform: none; }
.brand:hover { color: inherit; }
.brand-logo { flex: none; }
.brand-logo img { height: 80px; width: auto; transition: height .45s var(--ease), transform .6s var(--ease); }
.brand-logo-light img { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .35)); }
.brand:hover .brand-logo img { transform: scale(1.03); }
.brand-logo-dark { display: none; }
.site-header.is-scrolled .brand-logo-light { display: none; }
.site-header.is-scrolled .brand-logo-dark { display: block; }
.site-header.is-scrolled .brand-logo img { height: 60px; }
.brand-job {
  padding-left: 14px; border-left: 1px solid rgba(236, 217, 168, .45);
  font-size: .6rem; line-height: 1.6; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; opacity: .92;
}
.site-header.is-scrolled .brand-job { border-left-color: var(--line); color: var(--ink-2); }

.main-nav { display: flex; align-items: center; gap: 16px; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-list > li > a {
  position: relative; display: block; padding: 10px 9px;
  color: inherit; text-decoration: none; font-weight: 450; font-size: .94rem; letter-spacing: .015em; white-space: nowrap;
}
.nav-list > li > a::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); opacity: .8;
}
.nav-list > li:hover > a::after, .nav-list > li.is-active > a::after { transform: scaleX(1); }
.nav-list > li.is-active > a { color: var(--gold-light); }
.site-header.is-scrolled .nav-list > li.is-active > a { color: var(--ochre-dark); }
.sub-toggle {
  display: grid; place-items: center; width: 22px; height: 30px; margin-left: -8px;
  border: 0; background: none; color: inherit; cursor: pointer; padding: 0; opacity: .75;
}
.sub-toggle .icon { width: 15px; height: 15px; transition: transform .3s; }
.sub-menu {
  list-style: none; margin: 0; padding: 12px;
  position: absolute; top: calc(100% + 6px); left: -10px; min-width: 270px;
  background: var(--paper); color: var(--ink); border-radius: 18px;
  border: 1px solid var(--line); box-shadow: 0 26px 50px -24px rgba(47, 37, 27, .45);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s var(--ease), visibility .25s;
}
.sub-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 12px; }
.sub-menu a { display: block; padding: 9px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: .94rem; }
.sub-menu a:hover, .sub-menu a[aria-current="page"] { background: rgba(201, 162, 79, .15); color: var(--ochre-dark); }
.has-sub:hover > .sub-menu, .has-sub:focus-within > .sub-menu, .has-sub.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.has-sub.is-open > .sub-toggle .icon { transform: rotate(180deg); }
.nav-extra { display: flex; align-items: center; gap: 14px; }
.nav-cta { padding: .8em 1.3em; font-size: .92rem; white-space: nowrap; }
.nav-phone { display: none; }
.menu-toggle {
  display: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(236, 217, 168, .45); background: rgba(31, 24, 19, .4); color: inherit; cursor: pointer;
}
.site-header.is-scrolled .menu-toggle { border-color: var(--line); background: transparent; }
.burger, .burger::before, .burger::after, .burger span { display: block; width: 20px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease), opacity .2s; }
.burger { position: relative; margin: 0 auto; background: transparent; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.burger span { position: absolute; top: 0; left: 0; }
.nav-open .burger::before { transform: translateY(6px) rotate(45deg); }
.nav-open .burger::after { transform: translateY(-6px) rotate(-45deg); }
.nav-open .burger span { opacity: 0; }

@media (max-width: 1200px) {
  .menu-toggle { display: grid; place-items: center; position: relative; z-index: 2; }
  .brand { position: relative; z-index: 2; }
  .main-nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 26px;
    padding: 104px var(--gutter) 40px; overflow-y: auto;
    background: var(--cream); color: var(--ink);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .35s, transform .35s var(--ease), visibility .35s;
  }
  .nav-open .main-nav { opacity: 1; visibility: visible; transform: none; }
  .nav-open .site-header { color: var(--ink); }
  .nav-open .site-header .brand-logo-light { display: none; }
  .nav-open .site-header .brand-logo-dark { display: block; }
  .nav-open .site-header .brand-job { border-left-color: var(--line); color: var(--ink-2); }
  .nav-open .menu-toggle { border-color: var(--line); background: transparent; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav-list > li > a { flex: 1; padding: 15px 4px; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; }
  .nav-list > li > a::after { display: none; }
  .nav-list > li.is-active > a { color: var(--ochre-dark); }
  .sub-toggle { width: 48px; height: 48px; margin: 0; opacity: 1; }
  .sub-toggle .icon { width: 20px; height: 20px; }
  .sub-menu {
    position: static; width: 100%; min-width: 0; padding: 0 0 12px 8px; background: none; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; display: none;
  }
  .sub-menu::before { display: none; }
  .has-sub:hover > .sub-menu, .has-sub:focus-within > .sub-menu { display: none; }
  .has-sub.is-open > .sub-menu { display: block; }
  .nav-extra { flex-direction: column; align-items: stretch; gap: 14px; }
  .nav-cta { padding: 1em 1.4em; font-size: 1rem; }
  .nav-phone { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 500; padding: 10px; }
  .nav-phone .icon { width: 18px; height: 18px; color: var(--ochre-dark); }
}
@media (max-width: 420px) {
  .brand-job { display: none; }
  .brand-logo img { height: 66px; }
  .site-header.is-scrolled .brand-logo img { height: 54px; }
}

/* ==========================================================================
   Fond « lumière chaude sur la pierre » (accueil + bandeaux de titre) :
   la photo du cabinet au ralenti, halos de lumière et poussières dorées
   ========================================================================== */
.hero, .page-hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--cream);
  background: #2a2018 url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAUAB4DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwB8OnWE8KGaMNMxDE+1Mk0fTWn2qCuX4UH+GsUTSNISszeYgwBngCr0LXRAcScsPaubY2Ltxpdnah2tsg4+YFs96xZN5lYAYA6VYsrWSZ5XjcmZsmRSewNE0LRysp6g0hlvVraL/hIJgqBQGHC8VYmURj5aKKUtylsVZJGhVpoztf7px3Bpluu4tuZmPXJPNFFC2Ez/2Q==") center / cover no-repeat;
}
@media (max-aspect-ratio: 4/5) {
  .hero, .page-hero { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAYABIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCm+itJHvW7VRgfLjpTZdLe2hDyTJIQARjqPakhtphcSIznCHBZW4an+XEhleZnOehHf2Ncvkb2KHXnZRVwWxIyAcGiiwyiupSIwaLB2njIpp1B7qRvNAUdwKKKYGkmtSoiotyu1RgZjHSiiigD/9k="); }
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media picture, .hero-media picture img, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media picture img, .hero-video {
  object-fit: cover; object-position: 50% 55%;
  transform-origin: 50% 58%;
  animation: kenburns 42s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-video { filter: blur(3px) saturate(1.1); }
@keyframes kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.2) translate3d(-1.6%, -2.2%, 0); }
}
.hero-glow {
  position: absolute; inset: -12%;
  background:
    radial-gradient(34% 30% at 28% 42%, rgba(255, 176, 74, .3), transparent 72%),
    radial-gradient(26% 26% at 76% 58%, rgba(255, 196, 108, .26), transparent 72%),
    radial-gradient(40% 30% at 55% 18%, rgba(255, 210, 140, .14), transparent 75%),
    radial-gradient(70% 45% at 50% 105%, rgba(150, 86, 26, .32), transparent 72%);
  animation: breathe 7.5s ease-in-out infinite alternate;
}
@keyframes breathe {
  0% { opacity: .55; transform: scale(1) translate3d(0, 0, 0); }
  50% { opacity: .85; }
  100% { opacity: 1; transform: scale(1.06) translate3d(1%, -1%, 0); }
}
.hero-bokeh span {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 160, .95) 0%, rgba(255, 178, 84, .35) 45%, rgba(255, 170, 80, 0) 72%);
  opacity: 0; animation: float 17s linear infinite; animation-delay: calc(var(--d) * -1.4s);
}
@keyframes float {
  0% { transform: translate3d(0, 0, 0) scale(.8); opacity: 0; }
  15% { opacity: .85; }
  80% { opacity: .5; }
  100% { transform: translate3d(26px, -160px, 0) scale(1.15); opacity: 0; }
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 19, 13, .7) 0%, rgba(26, 19, 13, .25) 16%, transparent 30%),
    linear-gradient(90deg, rgba(26, 19, 13, .86) 0%, rgba(26, 19, 13, .62) 42%, rgba(26, 19, 13, .28) 100%),
    linear-gradient(0deg, rgba(26, 19, 13, .7) 0%, transparent 38%);
}
@media (max-aspect-ratio: 4/5) {
  .hero-shade { background: linear-gradient(180deg, rgba(26, 19, 13, .5) 0%, rgba(26, 19, 13, .55) 35%, rgba(26, 19, 13, .9) 100%); }
}

/* ---------- Accueil : grand bandeau ---------- */
.hero { min-height: max(660px, 100svh); display: flex; align-items: center; }
.hero-content { position: relative; padding: 140px 0 110px; max-width: 760px; }
.hero-title { margin: 0; font-weight: 500; color: var(--cream); }
.hero-name { position: relative; display: block; width: fit-content; margin: 0 0 .1em -10px; }
.hero-name::before { content: ""; position: absolute; inset: -18% -12%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 196, 120, .26), transparent); }
.hero-logo img { width: clamp(290px, 27vw + 130px, 520px); height: auto; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .55)); }
.hero-job {
  display: block; margin-top: .2em;
  font-family: var(--serif); font-weight: 500; letter-spacing: .01em;
  font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.5rem); color: #f7ecd6;
}
.hero-place {
  display: block; margin-top: .9rem;
  font-family: var(--sans); font-weight: 400; text-transform: uppercase;
  font-size: clamp(.78rem, .72rem + .3vw, .98rem); letter-spacing: .3em; color: var(--gold-light);
}
.hero-tagline {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); color: #f3e3c4; margin: 1.6rem 0 .7rem;
  display: flex; align-items: center; gap: 16px;
}
.hero-tagline::before { content: ""; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light)); }
.hero-lead { max-width: 610px; color: rgba(250, 246, 239, .9); font-size: 1.08rem; margin: 0; }
.hero-info { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; font-size: .93rem; color: rgba(250, 246, 239, .88); }
.hero-info a, .hero-info span { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.hero-info a:hover { color: var(--gold-light); }
.hero-info .icon { width: 17px; height: 17px; color: var(--gold-light); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(250, 246, 239, .7); text-decoration: none;
}
.scroll-cue::after { content: ""; width: 1px; height: 46px; background: linear-gradient(var(--gold-light), transparent); animation: cue 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.scroll-cue:hover { color: var(--gold-light); }

/* ---------- Pages intérieures : bandeau de titre ---------- */
.page-hero { padding: clamp(140px, 17vw, 200px) 0 clamp(64px, 8vw, 96px); }
.page-hero .hero-shade { background: linear-gradient(180deg, rgba(26, 19, 13, .62) 0%, rgba(26, 19, 13, .78) 60%, rgba(26, 19, 13, .9) 100%); }
.page-hero-inner { position: relative; }
.page-title { color: #f8eedb; font-weight: 500; font-size: clamp(2.3rem, 1.55rem + 3.2vw, 4.1rem); max-width: 960px; margin-bottom: .35em; }
.page-title .script { display: inline-block; color: var(--gold-light); font-size: 1.15em; line-height: .9; }
.page-intro { max-width: 740px; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: rgba(250, 246, 239, .9); margin: 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 0 0 26px; font-size: .84rem; letter-spacing: .04em; color: rgba(250, 246, 239, .75); }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; opacity: .6; }
.breadcrumb a { color: var(--gold-light); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; color: #fff; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { position: relative; padding: clamp(76px, 9vw, 130px) 0; }
.section-tight { padding: clamp(56px, 6vw, 84px) 0; }
.section-alt { background: var(--cream-2); }
.section-paper { background: var(--paper); }
.section-head { max-width: 780px; margin: 0 auto clamp(42px, 5vw, 66px); text-align: center; }
.section-head .eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.section-head p { color: var(--ink-2); }
.section-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 46px; }

/* Texture de pierre très légère */
.textured { position: relative; isolation: isolate; }
.textured::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/pierre-tuile.webp") center / 760px auto repeat;
  opacity: .045;
}

/* ---------- Introduction (accueil) ---------- */
.intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.intro-text p { font-size: 1.1rem; }
.intro-text p.first::first-letter {
  float: left; font-family: var(--serif); font-weight: 600; font-size: 4.6em; line-height: .78;
  padding: .06em .1em 0 0; color: var(--gold-dark);
}
.signature { font-family: var(--script); font-size: 2.3rem; color: var(--gold-dark); margin: .4em 0 0; line-height: 1; }
.quote-card {
  position: relative; text-align: center; padding: clamp(36px, 4vw, 54px) clamp(26px, 3.5vw, 46px);
  background: linear-gradient(160deg, #fffaf0, #f6ead6); border-radius: 30px; overflow: hidden;
  border: 1px solid rgba(185, 134, 47, .28); box-shadow: var(--shadow-lift);
}
.quote-card::before, .quote-card::after {
  content: ""; position: absolute; inset: 12px; border-radius: 22px; border: 1px solid rgba(185, 134, 47, .18); pointer-events: none;
}
.quote-card::after { inset: auto; width: 150px; height: 150px; right: -40px; top: -40px; border: 0; background: url("../img/nautile.svg") center / contain no-repeat; opacity: .14; transform: rotate(-18deg); }
.quote-card blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.55rem, 1.3rem + 1vw, 2rem); line-height: 1.3; color: var(--ink); }
.quote-card cite { display: block; margin-top: 14px; font-style: normal; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.benefits { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; text-align: left; }
.benefits li { display: flex; align-items: center; gap: 12px; font-weight: 450; }
.benefits .icon { width: 22px; height: 22px; color: var(--khaki); }
.values-line { margin: 24px 0 0; font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dark); }

/* ---------- Cartes des soins ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 22px; }
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px 24px; box-shadow: var(--shadow-soft);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
  --icon-bg: #fbf2df;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: rgba(185, 134, 47, .45); }
.card-icon {
  width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 20px;
  color: var(--khaki-dark);
  background: radial-gradient(circle at 32% 28%, #fffaf0, #f1e1c1 78%);
  box-shadow: inset 0 0 0 1px rgba(185, 134, 47, .28), 0 10px 20px -14px rgba(120, 80, 30, .6);
  transition: transform .6s var(--ease), color .3s;
}
.card:hover .card-icon { transform: rotate(-8deg) scale(1.05); color: var(--ochre-dark); }
.card-icon .icon { width: 40px; height: 40px; }
.icon-dot circle { fill: var(--icon-bg, #fbf2df); }
.card h3 { font-size: 1.5rem; margin-bottom: .45em; }
.card h3 a { color: inherit; text-decoration: none; }
.card h2 a, .card h3 a { color: inherit; text-decoration: none; }
.card h2 a::after, .card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card p { font-size: .98rem; color: var(--ink-2); flex: 1; margin-bottom: 18px; }
.card-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-top: 14px; border-top: 1px dashed rgba(185, 134, 47, .4); font-size: .9rem; color: var(--muted);
}
.card-meta .duration { display: inline-flex; align-items: center; gap: 7px; }
.card-meta .duration .icon { width: 16px; height: 16px; color: var(--gold-dark); }
.price { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; color: var(--ochre-dark); line-height: 1; }

.h3-like { font-family: var(--serif); font-size: clamp(1.4rem, 1.2rem + .7vw, 1.75rem); font-weight: 600; margin: 0 0 .4em; }
.center-block { text-align: center; margin-inline: auto; }
.chips.center { justify-content: center; margin: 0; }
.chip-link { display: inline-block; padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; font-size: .9rem; transition: border-color .25s, background-color .25s, color .25s; }
.chip-link:hover { border-color: var(--gold); background: rgba(201, 162, 79, .12); color: var(--ochre-dark); }
.values.center { justify-content: center; }
.eyebrow.center { justify-content: center; }
.steps.steps-3 { grid-template-columns: repeat(3, 1fr); }
.steps.steps-3::before { left: 18%; right: 18%; }
.benefits.numbered li { align-items: flex-start; }
.benefits .num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--khaki); color: #fff; font-size: .85rem; font-weight: 500; }
.mutuelles-list { columns: 3 180px; column-gap: 30px; }
.field-error { margin: 6px 0 0; font-size: .86rem; color: #9a3326; }
.field [aria-invalid="true"] { border-color: #c9655a; }
.preview-banner { position: sticky; top: 0; z-index: 70; padding: 10px 16px; text-align: center; background: #fff3cd; color: #5c4510; font-size: .92rem; border-bottom: 1px solid #ecd59a; }
.card-icon.center-block { margin: 0 auto 18px; }
.mt-l { margin-top: 40px; }
.mt-m { margin-top: 28px; }
.small { font-size: .9rem; }
.form-note { font-size: .85rem; margin: 0; color: var(--muted); }
.empty-state img { margin: 0 auto 14px; }
.article-cover { width: min(980px, calc(100% - 2 * var(--gutter))); }
.section-intro { text-align: center; margin-bottom: 20px; }

/* ---------- Le lieu (fond pierre sombre) ---------- */
.section-stone { position: relative; isolation: isolate; overflow: hidden; background: #241b14; color: #e9dcc4; }
.section-stone .bg-stone { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: sepia(.25) brightness(.75) contrast(1.05); }
.section-stone::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 60% at 18% 30%, rgba(224, 160, 74, .28), transparent 70%),
    radial-gradient(40% 50% at 85% 80%, rgba(224, 160, 74, .16), transparent 70%),
    linear-gradient(180deg, rgba(36, 27, 20, .55), rgba(36, 27, 20, .88));
}
.section-stone h2, .section-stone h3 { color: #f7ebd3; }
.section-stone strong, .feature-dark strong, .cta-band strong, .season-band strong, .hero strong, .page-hero strong { color: inherit; font-weight: 600; }
.section-stone .eyebrow { color: var(--gold-light); }
.section-stone a:not(.btn) { color: var(--gold-light); }
.section-stone p { color: #e3d5bc; }
.lieu-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(38px, 6vw, 96px); align-items: center; }
.arch {
  position: relative; border-radius: 999px 999px 26px 26px; overflow: hidden;
  border: 1px solid rgba(236, 217, 168, .38);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85), 0 0 0 10px rgba(236, 217, 168, .06);
}
.arch { isolation: isolate; }
.arch picture img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.6s var(--ease); }
.arch:hover picture img { transform: scale(1.04); }
/* médaillon du lustre de nacre, posé sur l'arche */
.arch-wrap { position: relative; }
.lustre {
  position: absolute; right: -12%; bottom: 5%; z-index: 2; width: 44%; aspect-ratio: 4 / 5;
  border-radius: 50%; overflow: hidden; isolation: isolate;
  border: 3px solid rgba(236, 217, 168, .9);
  box-shadow: 0 0 0 7px rgba(30, 22, 16, .9), 0 0 0 8px rgba(236, 217, 168, .35), 0 30px 60px -22px rgba(0, 0, 0, .9), 0 0 60px -8px rgba(255, 205, 130, .4);
}
.lustre picture, .lustre img { display: block; width: 100%; height: 100%; }
.lustre img { object-fit: cover; object-position: 50% 45%; }
/* reflet nacré qui passe doucement */
.lustre::after {
  content: ""; position: absolute; inset: -25%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .3) 46%, rgba(214, 236, 255, .22) 50%, rgba(255, 224, 238, .2) 54%, transparent 62%);
  transform: translateX(-70%); animation: nacre 9s ease-in-out 2s infinite;
}
@keyframes nacre { 0% { transform: translateX(-70%); } 32%, 100% { transform: translateX(70%); } }
.js .reveal .lustre { opacity: 0; transform: translateY(26px) scale(.9); transition: opacity .9s ease .5s, transform 1.2s var(--ease) .5s; }
.js .reveal.is-visible .lustre { opacity: 1; transform: none; }
.arch-caption { margin-top: 16px; text-align: center; font-size: .85rem; letter-spacing: .06em; color: #c9b896; font-style: italic; }
.lieu-quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); line-height: 1.4; color: #f6e7c9; border-left: 1px solid var(--gold); padding-left: 22px; margin: 26px 0; }

/* ---------- Une parenthèse pour les sens ---------- */
.sens { background: #1b140e; }
.sens::before { background: radial-gradient(45% 55% at 86% 18%, rgba(224, 160, 74, .2), transparent 70%), radial-gradient(40% 50% at 8% 92%, rgba(224, 160, 74, .15), transparent 70%), linear-gradient(180deg, #1f1710, #18120c); }
.sens-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.sens-card {
  position: relative; padding: 28px 22px 24px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 240, 210, .07), rgba(255, 240, 210, .02));
  border: 1px solid rgba(236, 217, 168, .16);
  transition: transform .5s var(--ease), border-color .4s, background-color .4s;
}
.sens-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: radial-gradient(70% 55% at 50% 0%, rgba(255, 196, 120, .2), transparent 70%); opacity: 0; transition: opacity .5s; }
.sens-card:hover { transform: translateY(-6px); border-color: rgba(236, 217, 168, .42); }
.sens-card:hover::after { opacity: 1; }
.sens-icon { width: 46px; height: 46px; color: var(--gold-light); margin-bottom: 14px; filter: drop-shadow(0 0 10px rgba(255, 190, 110, .4)); --icon-bg: transparent; }
.sens-card h3 { color: #f7ebd3; font-size: 1.45rem; }
.sens-card p { color: #dccdb2; font-size: .96rem; margin: 0; }
.sens-card-after { background: linear-gradient(160deg, rgba(201, 162, 79, .24), rgba(201, 162, 79, .06)); border-color: rgba(236, 217, 168, .35); }
.sens-cta { text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); color: #f6e7c9 !important; margin: 46px 0 0; }

/* ---------- Pour qui ? ---------- */
.pourqui { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pourqui li { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-soft); transition: transform .4s var(--ease), box-shadow .4s; }
.pourqui li:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.pq-icon { width: 48px; height: 48px; flex: none; padding: 9px; border-radius: 50%; color: var(--khaki-dark); background: radial-gradient(circle at 32% 28%, #fffaf0, #f1e1c1 78%); box-shadow: inset 0 0 0 1px rgba(185, 134, 47, .28); --icon-bg: #fbf2df; }
.pourqui h3 { font-size: 1.3rem; margin: 2px 0 6px; }
.pourqui p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.pourqui a { font-weight: 500; white-space: nowrap; }

/* zones desservies */
.zones { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.zones li { padding: 10px 16px; border-radius: 12px; background: rgba(255, 252, 246, .75); border: 1px solid var(--line); font-size: .96rem; }
.zones strong { color: var(--ochre-dark); font-weight: 500; }

/* ---------- Étapes d'une séance ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; list-style: none; padding: 0; margin: 0; }
.steps::before {
  content: ""; position: absolute; top: 44px; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185, 134, 47, .6) 15%, rgba(185, 134, 47, .6) 85%, transparent);
}
.step { position: relative; text-align: center; padding: 0 6px; }
.step-icon {
  position: relative; z-index: 1; width: 88px; height: 88px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ochre-dark);
  background: var(--cream); border: 1px solid rgba(185, 134, 47, .45); box-shadow: 0 0 0 8px var(--cream);
}
.section-alt .step-icon { background: var(--cream-2); box-shadow: 0 0 0 8px var(--cream-2); }
.step-icon .icon { width: 40px; height: 40px; }
.step-num { display: block; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 6px; }
.step h3 { font-size: 1.45rem; }
.step p { font-size: .97rem; color: var(--ink-2); }

/* ---------- Bandeau saison ---------- */
.season-band {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center;
  padding: 30px clamp(24px, 4vw, 48px); border-radius: 28px; color: #fbf3e3;
  background: linear-gradient(120deg, color-mix(in srgb, var(--el, #b9822f) 88%, #000) 0%, var(--el, #b9822f) 55%, color-mix(in srgb, var(--el, #b9822f) 70%, #f6d9a0) 100%);
  box-shadow: var(--shadow-lift);
}
.season-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 80% at 90% 10%, rgba(255, 255, 255, .25), transparent 70%); }
.season-badge { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); }
.season-badge .icon { width: 46px; height: 46px; color: #fff; --icon-bg: transparent; }
.season-badge .icon-dot circle { fill: rgba(255, 255, 255, .15); }
.season-band h2, .season-band h3 { color: #fff; margin: 0 0 .25em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.season-band p { margin: 0; color: rgba(255, 248, 235, .92); }
.season-band .btn { white-space: nowrap; }
.season-kicker { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; opacity: .85; margin-bottom: 4px !important; }

/* ---------- Tarifs ---------- */
.price-table { width: 100%; border-collapse: collapse; }
.price-table caption { caption-side: bottom; text-align: left; padding-top: 16px; font-size: .9rem; color: var(--muted); }
.price-table th { text-align: left; font-family: var(--sans); font-weight: 500; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dark); padding: 0 8px 14px; border-bottom: 1px solid rgba(185, 134, 47, .45); }
.price-table th:nth-child(n+2), .price-table td:nth-child(n+2) { text-align: right; white-space: nowrap; }
.price-table td { padding: 18px 8px; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.price-table tr { transition: background-color .25s; }
.price-table tbody tr:hover { background: rgba(201, 162, 79, .07); }
.price-name { font-family: var(--serif); font-size: 1.32rem; font-weight: 600; line-height: 1.25; }
.price-detail { display: block; font-size: .9rem; font-style: italic; color: var(--muted); margin-top: 3px; }
.price-duration { color: var(--muted); font-size: .96rem; }
.price-table .price { font-size: 1.7rem; }
.price-table tr.is-highlight { background: linear-gradient(90deg, rgba(201, 162, 79, .18), rgba(201, 162, 79, .05)); }
.price-table tr.is-highlight .price-name::after { content: "Avantage"; margin-left: 10px; font-family: var(--sans); font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--khaki); padding: 4px 9px; border-radius: 99px; vertical-align: middle; }
.price-card { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: clamp(26px, 4vw, 48px); box-shadow: var(--shadow-soft); }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 30px; }
.info-box { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 18px; background: var(--cream-2); border: 1px solid var(--line); }
.info-box .icon { width: 26px; height: 26px; color: var(--khaki); margin-top: 3px; }
.info-box h3 { font-size: 1.2rem; margin: 0 0 4px; }
.info-box p { margin: 0; font-size: .95rem; color: var(--ink-2); }

/* Carte cadeau & entreprise */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.feature {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: clamp(30px, 4vw, 50px);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-soft);
}
.feature .feature-icon { width: 58px; height: 58px; color: var(--ochre-dark); margin-bottom: 16px; }
.feature h2, .feature h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.feature-dark { background: linear-gradient(150deg, #2e231a, #1e1712); color: #e7dac2; border-color: rgba(236, 217, 168, .2); }
.feature-dark h2, .feature-dark h3 { color: #f7ebd3; }
.feature-dark .feature-icon { color: var(--gold-light); }
.feature-dark p { color: #dccfb7; }
.feature-dark::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px; background: url("../img/nautile.svg") center / contain no-repeat; opacity: .08; z-index: -1; }

/* ---------- Actualités ---------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 370px)); justify-content: center; gap: 26px; }
.news-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.news-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #2a2018; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.news-card:hover .news-card-media img { transform: scale(1.05); }
.news-card-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(60% 70% at 50% 40%, #4a3826, #231a13); }
.news-card-placeholder img { width: 84px !important; height: auto !important; object-fit: contain !important; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45)); }
.empty-shell img { width: 64px; height: auto; margin: 0 auto 14px; }
.news-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px 26px; }
.news-date { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); display: inline-flex; align-items: center; gap: 8px; }
.news-date .icon { width: 15px; height: 15px; }
.news-card h2, .news-card h3 { font-size: 1.45rem; margin: 0; }
.news-card h2 a, .news-card h3 a { color: inherit; text-decoration: none; }
.news-card h2 a::after, .news-card h3 a::after { content: ""; position: absolute; inset: 0; }
.news-card p { font-size: .97rem; color: var(--ink-2); margin: 0; flex: 1; }
.news-card .link-arrow { font-size: .92rem; }
.empty-state { text-align: center; padding: 50px 20px; border: 1px dashed rgba(185, 134, 47, .45); border-radius: 24px; color: var(--muted); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 50px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.pagination .is-current { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Article */
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: .9rem; color: rgba(250, 246, 239, .85); }
.article-meta span { display: inline-flex; align-items: center; gap: 8px; }
.article-meta .icon { width: 16px; height: 16px; color: var(--gold-light); }
.article-cover { margin: calc(-1 * clamp(40px, 6vw, 70px)) auto 46px; position: relative; z-index: 2; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-lift); }
.article-cover img { width: 100%; max-height: 560px; object-fit: cover; }
.article-body { padding-top: clamp(56px, 7vw, 90px); }
.article-cover + .article-body { padding-top: 0; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); font-size: .92rem; }
.share a, .share button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; font: inherit; cursor: pointer; }
.share a:hover, .share button:hover { border-color: var(--gold); }

/* ---------- Texte long (pages de contenu) ---------- */
.prose { font-size: 1.08rem; }
.prose > * { max-width: 760px; margin-inline: auto; }
.prose h2 { margin-top: 1.7em; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); }
.prose h3 { margin-top: 1.5em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--gold); }
.prose blockquote { margin: 1.8em auto; padding: .3em 0 .3em 1.5em; border-left: 2px solid var(--gold); font-family: var(--serif); font-style: italic; font-size: 1.4rem; line-height: 1.45; color: var(--ink); }
.prose img { border-radius: 18px; margin: 1.8em auto; box-shadow: var(--shadow-soft); }
.prose figure { margin: 2em auto; }
.prose figure img { margin: 0 auto; }
.prose figcaption { margin-top: .7em; text-align: center; font-size: .88rem; font-style: italic; color: var(--muted); }
.prose hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 2.4em auto; }
.prose a { word-break: break-word; }
.prose p.first::first-letter { float: left; font-family: var(--serif); font-weight: 600; font-size: 4.4em; line-height: .78; padding: .06em .1em 0 0; color: var(--gold-dark); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.split + .split { margin-top: clamp(60px, 8vw, 110px); }
.split.reverse > :first-child { order: 2; }
.split-media img { border-radius: 24px; box-shadow: var(--shadow-lift); width: 100%; }
.split-media figcaption { margin-top: 12px; font-size: .88rem; font-style: italic; color: var(--muted); text-align: center; }
.split h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); }

.photo-stack { position: relative; padding: 20px 30px 60px 0; }
.photo-stack figure { margin: 0; }
.polaroid { background: #fffdf8; padding: 12px 12px 14px; border-radius: 6px; box-shadow: 0 24px 50px -24px rgba(40, 25, 10, .55); width: fit-content; }
.polaroid img { filter: sepia(.35) contrast(1.02); border-radius: 2px; }
.polaroid figcaption { font-family: var(--script); font-size: 1.35rem; color: var(--ink-2); text-align: center; margin-top: 6px; line-height: 1.1; max-width: 260px; }
.photo-stack .p1 { transform: rotate(-4deg); }
.photo-stack .p1 img { width: 210px; }
.photo-stack .p2 { position: absolute; right: 0; bottom: 0; transform: rotate(5deg); }
.photo-stack .p2 img { width: 230px; }
/* la légende se cale sur la largeur de la photo (elle ne déborde plus du cadre) */
.photo-stack .polaroid figcaption { width: 0; min-width: 100%; max-width: none; }

.values { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 24px 0; }
.values li { padding: 8px 18px; border-radius: 99px; background: var(--khaki-soft); color: var(--khaki-dark); font-size: .92rem; font-weight: 500; border: 1px solid rgba(107, 110, 68, .25); }

/* Principes */
.principles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; counter-reset: p; }
.principle { grid-column: span 2; position: relative; padding: 34px 28px 28px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.principle:nth-child(4) { grid-column: 2 / span 2; }
.principle-num { font-family: var(--serif); font-size: 3.4rem; line-height: 1; font-weight: 500; color: var(--gold); display: block; margin-bottom: 10px; }
.principle h2, .principle h3 { font-size: 1.6rem; }
.principle p { color: var(--ink-2); margin: 0; }
.closing-quote { max-width: 820px; margin: clamp(50px, 6vw, 80px) auto 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); line-height: 1.45; color: var(--ink); }

/* Frise de l'histoire */
.timeline { position: relative; list-style: none; padding: 0; margin: 0 auto; max-width: 1060px; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(185, 134, 47, .55) 6%, rgba(185, 134, 47, .55) 94%, transparent); }
.tl-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 34px 0; }
.tl-item::before { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px var(--cream), 0 0 0 7px rgba(185, 134, 47, .4); }
.tl-item:nth-child(even) > .tl-text { order: 2; }
.tl-date { display: inline-block; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: #fff; background: var(--khaki); padding: 5px 12px; border-radius: 99px; margin-bottom: 14px; }
.tl-text h2, .tl-text h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.tl-media img { border-radius: 20px; box-shadow: var(--shadow-lift); }
.tl-media figcaption { margin-top: 10px; font-size: .86rem; font-style: italic; color: var(--muted); text-align: center; }
.portrait { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; margin: 0 auto; box-shadow: 0 0 0 8px var(--paper), 0 0 0 9px rgba(185, 134, 47, .4), var(--shadow-lift); }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.3); }

/* Détail des soins */
.service-detail { display: grid; grid-template-columns: 112px 1fr; gap: clamp(20px, 3vw, 40px); padding: clamp(36px, 4vw, 54px) 0; border-bottom: 1px solid var(--line); }
.service-detail:last-child { border-bottom: 0; }
.service-detail .card-icon { width: 96px; height: 96px; }
.service-detail .card-icon .icon { width: 54px; height: 54px; }
.service-detail h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); margin-bottom: .3em; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: var(--cream-2); border: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); }
.chips .icon { width: 16px; height: 16px; color: var(--gold-dark); }
.chips .chip-price { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--ochre-dark); }

/* Situations / listes à icônes */
.indications { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.indication { padding: 26px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.indication h3 { font-size: 1.4rem; display: flex; align-items: center; gap: 12px; }
.indication h3 .icon { width: 30px; height: 30px; color: var(--khaki); flex: none; }
.indication ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); }
.indication li::marker { color: var(--gold); }
.note-box { display: flex; gap: 16px; padding: 22px 24px; border-radius: 18px; background: var(--khaki-soft); border: 1px solid rgba(107, 110, 68, .3); color: var(--khaki-dark); }
.note-box .icon { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.note-box p { margin: 0; }
.note-box p + p { margin-top: .6em; }

.vigilance { width: 100%; border-collapse: collapse; }
.vigilance th, .vigilance td { text-align: left; vertical-align: top; padding: 18px 12px; border-bottom: 1px solid var(--line); }
.vigilance th { width: 30%; font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.vigilance td { color: var(--ink-2); }

/* Éléments (saisons) */
.elements { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.element {
  position: relative; padding: 26px 20px 22px; border-radius: 20px; background: var(--paper);
  border: 1px solid var(--line); border-top: 4px solid var(--el); box-shadow: var(--shadow-soft); text-align: center;
}
.element.is-current { transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: var(--el); }
.element-name { font-family: var(--serif); font-size: 1.8rem; font-weight: 600; color: var(--el); margin: 0; }
.element-season { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 2px 0 12px; }
.element-organ { font-weight: 500; margin: 0 0 8px; }
.element-period { font-size: .9rem; color: var(--ink-2); margin: 0; }
.element-now { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; background: var(--el); padding: 5px 12px; border-radius: 99px; }

/* ---------- FAQ ---------- */
.faq { max-width: 880px; margin: 0 auto; }
.faq details { border-bottom: 1px solid rgba(185, 134, 47, .3); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); font-weight: 600; }
.faq summary::after { content: "+"; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(185, 134, 47, .45); font-size: 1.4rem; font-weight: 300; color: var(--gold-dark); transition: transform .35s var(--ease), background-color .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: rgba(201, 162, 79, .14); }
.faq summary:hover h3 { color: var(--ochre-dark); }
.faq-a { padding: 0 4px 24px; color: var(--ink-2); }
.faq-a p { margin: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.contact-list { display: grid; gap: 14px; margin: 0 0 26px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .3s, transform .3s var(--ease); }
a.contact-item:hover { border-color: var(--gold); transform: translateX(4px); color: var(--ink); }
.contact-item .icon { width: 24px; height: 24px; color: var(--ochre-dark); margin-top: 3px; }
.contact-item strong { display: block; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.contact-item span { font-size: 1.05rem; }
.map-box { position: relative; min-height: 420px; border-radius: 26px; overflow: hidden; background: #2a2018; box-shadow: var(--shadow-lift); isolation: isolate; }
.map-box > picture { position: absolute; inset: 0; z-index: -1; }
.map-box > picture img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) brightness(.42) contrast(.95); }
.map-box::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 50% 45%, rgba(224, 160, 74, .22), transparent 75%); }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center; color: #f3e6cc; }
.map-placeholder .pin { width: 64px; height: 64px; color: var(--gold-light); animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.map-placeholder p { margin: 0; max-width: 320px; font-size: .95rem; color: #e3d5bc; }
.map-placeholder .map-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: #f7ebd3; max-width: none; }
.map-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.access-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.access-list li { display: flex; gap: 10px; align-items: baseline; }
.access-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; transform: translateY(-2px); }

/* ---------- Formulaires ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; font-weight: 500; font-size: .92rem; margin-bottom: 7px; }
.field .optional { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(120, 90, 50, .32);
  background: #fffdf9; font: inherit; font-size: 1rem; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 79, .2); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ochre); flex: none; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: 16px 20px; border-radius: 16px; margin-bottom: 22px; display: flex; gap: 12px; align-items: flex-start; }
.alert .icon { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.alert-success { background: #eef0e1; border: 1px solid #c3c79a; color: #3f4126; }
.alert-error { background: #fbecea; border: 1px solid #e6b9b3; color: #7b2f26; }
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: clamp(26px, 4vw, 44px); box-shadow: var(--shadow-soft); }

/* ---------- Mentions & encadrés ---------- */
.legal-note { display: flex; gap: 12px; align-items: flex-start; max-width: 860px; margin: 30px auto 0; padding: 16px 20px; border-radius: 16px; background: rgba(201, 162, 79, .09); border: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); }
.legal-note .icon { width: 20px; height: 20px; color: var(--gold-dark); flex: none; margin-top: 3px; }
.legal-text h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); margin-top: 1.6em; }
.legal-text h3 { font-size: 1.3rem; margin-top: 1.3em; }
.legal-text .todo { background: #fff3cd; padding: 0 .3em; border-radius: 4px; }
.download { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: var(--ink); transition: border-color .3s, transform .3s var(--ease); }
.download:hover { border-color: var(--gold); transform: translateY(-2px); color: var(--ink); }
.download .icon { width: 24px; height: 24px; color: var(--ochre-dark); }
.download small { display: block; color: var(--muted); font-size: .8rem; }

/* ---------- Appel à l'action (fin de page) ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(76px, 9vw, 120px) 0; background: #221912; color: #e8dbc3; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 70% at 50% 0%, rgba(224, 160, 74, .28), transparent 70%),
    url("../img/mur-moellons-800.webp") center / cover no-repeat;
  opacity: .9;
}
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(34, 25, 18, .8), rgba(34, 25, 18, .92)); }
.cta-inner { max-width: 760px; }
.cta-shell { display: block; width: fit-content; margin: 0 auto 18px; }
.cta-shell img { width: 74px; height: auto; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5)); }
.cta-title { color: #f8ecd4; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem); font-weight: 500; }
.cta-band p { font-size: 1.1rem; color: #e1d3b9; }

/* ---------- Pied de page ---------- */
.site-footer { position: relative; overflow: hidden; isolation: isolate; background: #1a140f; color: #cbbda6; padding: clamp(70px, 8vw, 100px) 0 0; font-size: .95rem; }
.footer-stars {
  position: absolute; inset: 0; z-index: -1; opacity: .55; pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 22px 34px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 80px, #f6e2b5 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 190px 20px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 260px 140px, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 330px 60px, #f6e2b5 50%, transparent 51%),
    radial-gradient(1px 1px at 80px 170px, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 380px 190px, #fff 50%, transparent 51%);
  background-size: 420px 220px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: .65; } }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1.1fr 1fr 1fr; gap: 44px; }
.footer-logo { display: inline-block; margin: -8px 0 16px -6px; }
.footer-logo img { width: 300px; max-width: 100%; height: auto; }
.footer-brand p { color: #b9ab93; }
.footer-quote { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: #e7d3a8 !important; }
.footer-title { font-family: var(--sans); font-size: .76rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-light); margin: 6px 0 18px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer-links a, .footer-contact a { color: #cbbda6; text-decoration: none; }
.footer-links a:hover, .footer-contact a:hover { color: var(--gold-light); }
.footer-contact { font-style: normal; }
.footer-contact p { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; }
.footer-contact .icon { width: 18px; height: 18px; color: var(--gold); margin-top: 5px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(236, 217, 168, .25); color: var(--gold-light); }
.footer-social .icon { width: 18px; height: 18px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 30px; margin-top: 60px; padding: 24px 0 30px; border-top: 1px solid rgba(236, 217, 168, .12); font-size: .82rem; color: #8f826e; }
.footer-bottom p { margin: 0; }
.footer-admin { color: #75695a !important; text-decoration: none; }
.footer-admin:hover { color: var(--gold-light) !important; }

/* ---------- Barre d'action mobile ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
  grid-template-columns: 1fr 1.7fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(26, 20, 15, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(110%); transition: transform .45s var(--ease);
}
.mobile-cta.is-visible { transform: none; }
.mobile-cta a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px; border-radius: 99px; text-decoration: none; font-weight: 500; font-size: .95rem; }
.mobile-cta .icon { width: 18px; height: 18px; }
.mobile-cta-call { color: var(--cream); border: 1px solid rgba(236, 217, 168, .4); }
.mobile-cta-rdv { color: #2a1d10; background: linear-gradient(135deg, #f3dea8, #d8b064 45%, #bb8833); }

/* ---------- Apparition au défilement ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--delay, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Adaptation aux écrans
   ========================================================================== */
@media (max-width: 1100px) {
  .sens-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .photo-stack { padding: 10px 0 0; }
  .photo-stack .p2 { position: relative; right: auto; bottom: auto; margin: -8px 0 0 auto; }
}
@media (max-width: 1024px) {
  .principles { grid-template-columns: 1fr 1fr; }
  .principle, .principle:nth-child(4) { grid-column: auto; }
  .principle:last-child { grid-column: 1 / -1; }
  .elements { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .pourqui { grid-template-columns: 1fr 1fr; }
  .sens-grid { grid-template-columns: 1fr 1fr; }
  .intro-grid, .lieu-grid, .contact-grid, .split, .duo { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .steps::before { display: none; }
  .season-band { grid-template-columns: auto 1fr; }
  .season-band .btn { grid-column: 1 / -1; justify-self: start; }
  .timeline::before { left: 18px; }
  .tl-item { grid-template-columns: 1fr; gap: 24px; padding-left: 50px; }
  .tl-item::before { left: 18px; top: 46px; }
  .tl-item:nth-child(even) > .tl-text { order: 0; }
  .lieu-grid .arch, .lieu-grid .arch-wrap { max-width: 460px; margin-inline: auto; }
  .arch-wrap .arch { max-width: none; }
  .lustre { right: -8%; width: 40%; }
  .photo-stack { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 760px) {
  body { padding-bottom: 74px; }
  .mobile-cta { display: grid; }
  .hero-content { padding: 130px 0 96px; }
  .scroll-cue { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .service-detail { grid-template-columns: 1fr; }
  .service-detail .card-icon { width: 80px; height: 80px; }
  .price-table thead { display: none; }
  .price-table caption { display: block; width: 100%; padding-top: 14px; }
  .price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
  .price-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
  .price-table td { padding: 0; border: 0; text-align: left !important; }
  .price-table td:first-child { grid-column: 1 / -1; }
  .price-table td:nth-child(3) { justify-self: end; }
  .vigilance th, .vigilance td { display: block; width: 100%; padding: 6px 0; border: 0; }
  .vigilance tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .photo-stack .p2 img { width: 200px; }
}
@media (max-width: 560px) {
  .pourqui, .sens-grid { grid-template-columns: 1fr; }
  .lustre { right: -2%; bottom: -4%; width: 40%; }
  .steps { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .season-band { grid-template-columns: 1fr; text-align: left; }
  .card { padding: 26px 22px 22px; }
  .hero-info { flex-direction: column; gap: 10px; }
  .btn { width: 100%; }
  .btn-row .btn, .section-foot .btn { width: 100%; }
  .news-grid, .cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Pages intérieures : éléments vivants (ils s'animent tout seuls)
   ========================================================================== */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes ripple { 0% { transform: scale(.85); opacity: .75; } 70%, 100% { transform: scale(1.45); opacity: 0; } }

/* Carte du pied : les zones s'illuminent tour à tour */
.footmap { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; max-width: 1000px; margin: 0 auto; }
.footmap-figure { text-align: center; }
.footmap-svg { width: 100%; max-width: 320px; margin: 0 auto; overflow: visible; filter: drop-shadow(0 24px 30px rgba(70, 45, 20, .25)); }
.fm-sole, .fm-toes-base ellipse { fill: url(#pied-peau); }
.fm-toes-base ellipse, .fm-outline { stroke: #b98a4a; stroke-width: 2; }
.fm-outline { fill: none; pointer-events: none; }
.fm-zone { cursor: pointer; }
.fm-zone > * { fill: rgba(201, 162, 79, 0); stroke: rgba(154, 111, 42, .35); stroke-width: 1; stroke-dasharray: 4 4; transition: fill .6s ease; }
.fm-zone:hover > * { fill: rgba(201, 162, 79, .35); }
.fm-zone.is-on > * { fill: rgba(201, 162, 79, .58); stroke: #9a6f2a; stroke-dasharray: none; animation: zoneGlow 2.4s ease-in-out infinite; }
@keyframes zoneGlow { 0%, 100% { fill: rgba(201, 162, 79, .42); } 50% { fill: rgba(201, 162, 79, .72); } }
.fm-num { pointer-events: none; }
.fm-num circle { fill: #2f251b; transition: fill .4s; transform-box: fill-box; transform-origin: center; }
.fm-num text { fill: #fff; font: 600 12px var(--sans); text-anchor: middle; }
.fm-num.is-on circle { fill: var(--ochre-dark); animation: numPulse 2.4s ease-in-out infinite; }
@keyframes numPulse { 50% { transform: scale(1.28); } }
.js .reveal .fm-outline { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.8s var(--ease) .3s; }
.js .reveal.is-visible .fm-outline { stroke-dashoffset: 0; }
.footmap-hint { font-size: .85rem; color: var(--muted); margin: 10px 0 0; font-style: italic; }
.footmap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fm-item { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: .98rem; color: var(--ink); cursor: pointer; transition: background-color .6s ease, border-color .6s ease, transform .6s var(--ease); }
.fm-item:hover { border-color: var(--gold); }
.fm-item.is-on { background: linear-gradient(90deg, rgba(201, 162, 79, .26), rgba(201, 162, 79, .06)); border-color: var(--gold); transform: translateX(6px); }
.fm-badge { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: .8rem; transition: background-color .6s; }
.fm-item.is-on .fm-badge { background: var(--ochre-dark); }
.fm-detail { margin: 4px 4px 8px 54px; font-size: .9rem; color: var(--muted); transition: color .6s; }
.fm-item.is-on + .fm-detail { color: var(--ink-2); }

/* Roue des 5 éléments : elle tourne, les flèches s'écoulent, les saisons se succèdent */
.wheel { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 980px; margin: 0 auto; }
.wheel-figure { position: relative; aspect-ratio: 1; }
.wheel-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel-ring { fill: none; stroke: rgba(185, 134, 47, .32); stroke-width: 1; stroke-dasharray: 3 6; transform-box: fill-box; transform-origin: center; animation: turn 90s linear infinite; }
.wheel-arrow { fill: none; stroke: #c9a24f; stroke-width: 2; opacity: .8; stroke-dasharray: 5 6; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -22; } }
.wheel-center-1, .wheel-center-2 { text-anchor: middle; fill: var(--muted); font-family: var(--serif); }
.wheel-center-1 { font-size: 22px; font-style: italic; }
.wheel-center-2 { font-size: 15px; letter-spacing: .08em; }
.wheel-node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 25%; aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  display: grid; place-content: center; gap: 3px; text-align: center; color: #fff; font: inherit;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 62%, #fff), var(--c) 58%, color-mix(in srgb, var(--c) 72%, #000));
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--c) 70%, #000), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .6s var(--ease), box-shadow .6s, opacity .6s ease calc(var(--i, 0) * .12s + .2s), scale .9s var(--spring) calc(var(--i, 0) * .12s + .2s);
  animation: nodeFloat 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.2s);
}
@keyframes nodeFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.js .reveal .wheel-node { opacity: 0; scale: .3; }
.js .reveal.is-visible .wheel-node { opacity: 1; scale: 1; }
.wheel-node:hover, .wheel-node[aria-pressed="true"] { transform: translate(-50%, -50%) scale(1.12); }
.wheel-node[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--cream), 0 0 0 6px var(--c), 0 18px 34px -12px color-mix(in srgb, var(--c) 70%, #000); }
.wheel-node.is-current::after { content: "Maintenant"; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--c); white-space: nowrap; }
.wn-name { font-family: var(--serif); font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem); font-weight: 600; line-height: 1; }
.wn-season { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; opacity: .92; }
.wheel-panels { display: grid; }
.wheel-panel { padding: 30px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--c); box-shadow: var(--shadow-soft); margin-bottom: 12px; }
.js .wheel-panel { grid-area: 1 / 1; margin-bottom: 0; opacity: 0; visibility: hidden; translate: 0 10px; transition: opacity .7s ease, translate .7s var(--ease), visibility 0s .7s; }
.js .wheel-panel.is-active { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .7s ease .1s, translate .7s var(--ease) .1s, visibility 0s; }
.js .wheel-hint { grid-area: 2 / 1; }
.wheel-panel h3 { font-size: 2rem; color: var(--c); }
.wheel-panel h3 span { font-size: 1.1rem; color: var(--muted); font-weight: 500; }
.wheel-panel p { margin: 0 0 .5em; }
.wheel-panel .wheel-now { display: inline-block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--c); padding: 4px 12px; border-radius: 99px; margin-bottom: 12px; }
.wheel-hint { font-size: .88rem; color: var(--muted); margin-top: 14px; font-style: italic; }

/* Respiration : la bulle respire toute seule */
.breath-section { background: #1b140e; }
.breath { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.breath-stage { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.breath-ring { position: absolute; inset: 4%; border-radius: 50%; border: 1px dashed rgba(236, 217, 168, .35); animation: turn 60s linear infinite; }
.breath-halo { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 110, .4), transparent 68%); animation: halo 10s ease-in-out infinite; }
@keyframes halo { 0%, 100% { transform: scale(.7); opacity: .35; } 40% { transform: scale(1.3); opacity: 1; } }
.breath-orb {
  position: relative; width: 56%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #fff4d8, #f2c77d 38%, #c98436 72%, rgba(201, 132, 54, .25));
  box-shadow: 0 0 60px 18px rgba(255, 180, 90, .35), 0 0 140px 40px rgba(255, 160, 70, .16);
  animation: orb 10s ease-in-out infinite;
}
@keyframes orb { 0%, 100% { transform: scale(.8); } 40% { transform: scale(1.3); } }
.breath-label { display: grid; font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: #4a2f12; }
.breath-label > span { grid-area: 1 / 1; text-align: center; }
.breath-in { animation: lblIn 10s ease-in-out infinite; }
.breath-out { animation: lblOut 10s ease-in-out infinite; }
@keyframes lblIn { 0%, 34%, 100% { opacity: 1; } 40%, 94% { opacity: 0; } }
@keyframes lblOut { 0%, 34%, 100% { opacity: 0; } 40%, 94% { opacity: 1; } }
.breath-text h2 { color: #f7ebd3; }
.breath-text p { color: #e3d5bc; }
.breath-text .breath-status { color: var(--gold-light); font-weight: 500; font-style: italic; }

/* « À chaque besoin, son soin » : chaque ligne se dessine jusqu'au soin conseillé */
.guide { max-width: 1020px; margin: 0 auto; }
.guide-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.guide-item { display: grid; grid-template-columns: minmax(0, 1fr) clamp(56px, 10vw, 140px) minmax(0, 1fr); align-items: center; gap: 18px; padding: 14px 20px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.guide-need { font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-style: italic; color: var(--ink); text-align: right; line-height: 1.3; }
.guide-line { position: relative; height: 1px; background: linear-gradient(90deg, rgba(185, 134, 47, .15), var(--gold)); }
.guide-line::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); transform: rotate(45deg); }
.guide-soin { display: inline-flex; align-items: center; gap: 12px; justify-self: start; padding: 8px 18px 8px 8px; border-radius: 99px; background: linear-gradient(135deg, #fff8e8, #f3e2bf); border: 1px solid rgba(185, 134, 47, .35); color: var(--ochre-dark); text-decoration: none; font-weight: 500; line-height: 1.25; transition: transform .35s var(--ease), box-shadow .35s, color .3s, opacity .5s ease calc(var(--delay, 0s) + .95s), scale .7s var(--spring) calc(var(--delay, 0s) + .95s); }
.guide-soin .icon { flex: none; width: 36px; height: 36px; padding: 6px; border-radius: 50%; background: #fffdf8; color: var(--khaki-dark); box-shadow: inset 0 0 0 1px rgba(185, 134, 47, .3); }
.guide-soin:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(120, 80, 30, .7); color: var(--ink); }
.js .guide-item .guide-line { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) calc(var(--delay, 0s) + .35s); }
.js .guide-item .guide-soin { opacity: 0; scale: .7; }
.js .guide-item.is-visible .guide-line { transform: none; }
.js .guide-item.is-visible .guide-soin { opacity: 1; scale: 1; }

/* 404 */
.lost-shell { display: block; width: fit-content; margin: 0 auto 26px; }
.lost-shell img { width: 120px; height: auto; animation: turn 18s linear infinite; filter: drop-shadow(0 12px 26px rgba(70, 45, 20, .35)); }

/* ---------- Apparitions : variantes et cascades ---------- */
.js .reveal-left { transform: translateX(-48px); }
.js .reveal-right { transform: translateX(48px); }
.js .reveal-zoom { transform: scale(.92); }

/* les petites lignes dorées des surtitres se dessinent */
.js .reveal .eyebrow::before, .js .eyebrow.reveal::before { transform: scaleX(0); transform-origin: right; transition: transform 1s var(--ease) calc(var(--delay, 0s) + .3s); }
.js .reveal .eyebrow::after, .js .eyebrow.reveal::after { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) calc(var(--delay, 0s) + .3s); }
.js .reveal.is-visible .eyebrow::before, .js .reveal.is-visible .eyebrow::after, .js .eyebrow.reveal.is-visible::before, .js .eyebrow.reveal.is-visible::after { transform: none; }

/* séparateur : l'étoile tourne sur elle-même et les traits s'allongent */
.js .reveal .divider-star { scale: 0; rotate: -180deg; transition: scale .9s var(--spring) calc(var(--delay, 0s) + .35s), rotate 1s var(--ease) calc(var(--delay, 0s) + .35s); }
.js .reveal .divider span { width: 0; transition: width 1.1s var(--ease) calc(var(--delay, 0s) + .5s); }
.js .reveal.is-visible .divider-star { scale: 1; rotate: 0deg; }
.js .reveal.is-visible .divider span { width: 70px; }

/* pastilles d'icônes : elles éclosent puis flottent doucement */
.js .reveal .card-icon, .js .reveal .step-icon, .js .reveal .pq-icon, .js .reveal .sens-icon, .js .reveal .season-badge {
  scale: .5; rotate: -20deg; opacity: 0;
  transition: scale .9s var(--spring) calc(var(--delay, 0s) + .18s), rotate .9s var(--spring) calc(var(--delay, 0s) + .18s), opacity .5s ease calc(var(--delay, 0s) + .18s), transform .6s var(--ease), color .3s;
}
.js .reveal.is-visible .card-icon, .js .reveal.is-visible .step-icon, .js .reveal.is-visible .pq-icon, .js .reveal.is-visible .sens-icon, .js .reveal.is-visible .season-badge { scale: 1; rotate: 0deg; opacity: 1; }
.card-icon .icon, .step-icon .icon, .info-box .icon, .contact-item .icon, .season-badge .icon, .indication h3 .icon, .benefits .icon { animation: bob 5.5s ease-in-out infinite; }
.card:nth-child(2n) .card-icon .icon, .step:nth-child(2n) .step-icon .icon, .info-box:nth-child(2n) .icon, .contact-item:nth-child(2n) .icon { animation-delay: -2.4s; }
.card:nth-child(3n) .card-icon .icon, .step:nth-child(3n) .step-icon .icon, .info-box:nth-child(3n) .icon, .contact-item:nth-child(3n) .icon { animation-delay: -4.1s; }
.feature .feature-icon { transform-origin: 50% 12%; animation: swing 5s ease-in-out infinite; }
@keyframes swing { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
.step-icon::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(185, 134, 47, .5); opacity: 0; pointer-events: none; animation: ripple 3.6s ease-out infinite; }
.step:nth-child(2) .step-icon::after { animation-delay: 1.2s; }
.step:nth-child(3) .step-icon::after { animation-delay: 2.4s; }
.step:nth-child(4) .step-icon::after { animation-delay: 3s; }
.season-badge { animation: badgeGlow 4s ease-in-out infinite; }
@keyframes badgeGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, .07), 0 0 34px rgba(255, 255, 255, .25); } }

/* le trait qui relie les étapes se dessine */
.js .steps::before { transform: scaleX(0); transition: transform 2s var(--ease) .3s; }
.js .steps.is-drawn::before { transform: none; }

/* frise de l'histoire : le fil doré se déroule au fil de la lecture */
.js .timeline::after { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px; border-radius: 2px; background: linear-gradient(var(--gold-light), var(--gold) 55%, var(--ochre)); box-shadow: 0 0 10px rgba(201, 162, 79, .55); transform: scaleY(var(--p, 0)); transform-origin: top; }
.js .tl-item.reveal::before { scale: 0; transition: scale .8s var(--spring) .35s; }
.js .tl-item.reveal.is-visible::before { scale: 1; }
.tl-item::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; pointer-events: none; animation: ripple 3.2s ease-out infinite; }
.tl-item:nth-child(2n)::after { animation-delay: 1.4s; }
/* les images anciennes « se développent » comme une photo */
.js .reveal .tl-media img, .js .reveal .portrait img { filter: sepia(.95) blur(4px) brightness(1.15); transition: filter 1.8s ease calc(var(--delay, 0s) + .25s); }
.js .reveal.is-visible .tl-media img { filter: none; }
.js .reveal.is-visible .portrait img { filter: sepia(.3); }

/* photos : léger zoom arrière à l'apparition */
.js .reveal .arch picture img { scale: 1.18; transition: scale 2.4s var(--ease) .1s, transform 1.6s var(--ease); }
.js .reveal.is-visible .arch picture img { scale: 1; }
.js .reveal .news-card-media img { scale: 1.16; transition: scale 1.8s var(--ease) calc(var(--delay, 0s) + .1s), transform 1.2s var(--ease); }
.js .reveal.is-visible .news-card-media img { scale: 1; }

/* polaroïds : posés sur la table, ils se balancent légèrement */
.js .photo-stack.reveal .polaroid { opacity: 0; scale: 1.22; translate: 0 -34px; transition: opacity .7s ease .1s, scale 1.1s var(--spring) .1s, translate 1.1s var(--spring) .1s; }
.js .photo-stack.reveal .p2 { transition-delay: .45s; }
.js .photo-stack.reveal.is-visible .polaroid { opacity: 1; scale: 1; translate: 0 0; }
.photo-stack .polaroid { transform-origin: 50% 0; animation: sway 8s ease-in-out infinite; }
.photo-stack .p2 { animation-duration: 10s; animation-delay: -3s; }
@keyframes sway { 0%, 100% { rotate: -1.3deg; } 50% { rotate: 1.3deg; } }

/* la signature s'écrit */
.sig-ink { display: inline-block; padding: 0 .3em .15em 0; }
.js .signature.reveal { transform: none; transition: opacity .4s ease .2s; }
.js .signature.reveal .sig-ink { clip-path: inset(-20% 100% -20% 0); transition: clip-path 2.2s cubic-bezier(.6, 0, .3, 1) .35s; }
.js .signature.reveal.is-visible .sig-ink { clip-path: inset(-20% -5% -20% 0); }

/* chiffres des principes : reflet doré qui passe */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .principle-num {
    background: linear-gradient(110deg, var(--gold) 30%, #f8e3ae 46%, var(--gold) 62%) 0 0 / 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 7s ease-in-out infinite;
  }
  .principle:nth-child(2) .principle-num { animation-delay: .6s; }
  .principle:nth-child(3) .principle-num { animation-delay: 1.2s; }
  .principle:nth-child(4) .principle-num { animation-delay: 1.8s; }
  .principle:nth-child(5) .principle-num { animation-delay: 2.4s; }
  .page-title .script {
    padding: .12em .2em .2em; margin: -.12em -.2em -.2em;
    background: linear-gradient(110deg, var(--gold-light) 32%, #fff4d6 47%, var(--gold-light) 62%) 0 0 / 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 6.5s ease-in-out 1.4s infinite;
  }
}
@keyframes shimmer { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }

/* filigranes en nautile qui tournent lentement */
.quote-card::after, .feature-dark::after { animation: turn 100s linear infinite; }

/* tarifs : la ligne « forfait » brille, l'étiquette respire */
.price-table tr.is-highlight { background: linear-gradient(100deg, rgba(201, 162, 79, .18) 0%, rgba(201, 162, 79, .06) 38%, rgba(255, 236, 190, .55) 50%, rgba(201, 162, 79, .06) 62%, rgba(201, 162, 79, .12) 100%) 0 0 / 300% 100%; animation: sheen 7s ease-in-out infinite; }
@keyframes sheen { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0 0; } }
.price-table tr.is-highlight .price-name::after { display: inline-block; animation: tagPulse 2.6s ease-in-out infinite; }
@keyframes tagPulse { 50% { scale: 1.08; } }

/* carte : l'épingle sautille */
.map-placeholder > .icon { animation: pin 2.4s ease-in-out infinite; }
@keyframes pin { 0%, 100% { translate: 0 0; } 30% { translate: 0 -10px; } 50% { translate: 0 0; } 62% { translate: 0 -4px; } 74% { translate: 0 0; } }

/* coquillage de fin de page qui flotte, bouton qui scintille */
.cta-shell img { animation: floaty 6.5s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -9px; rotate: 4deg; } }
.cta-band .btn-gold::after, .hero-content .btn-gold::after { animation: shine 7s ease-in-out 2s infinite; }
@keyframes shine { 0% { transform: translateX(-130%); } 16%, 100% { transform: translateX(130%); } }

/* ---------- Bandeaux de titre : entrée en douceur et étoiles qui scintillent ---------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lineIn { from { transform: scaleX(0); } }
.page-hero .breadcrumb, .page-hero .eyebrow, .page-hero .page-title, .page-hero .page-intro, .page-hero .article-meta { animation: riseIn 1.1s var(--ease) both; }
.page-hero .eyebrow { animation-delay: .12s; }
.page-hero .page-title { animation-delay: .24s; }
.page-hero .page-intro, .page-hero .article-meta { animation-delay: .42s; }
.page-hero .eyebrow::before { transform-origin: right; animation: lineIn 1.1s var(--ease) .6s both; }
/* accueil : le contenu est visible dès le premier affichage (meilleur pour Google), il se pose juste en douceur */
@keyframes settleIn { from { transform: translateY(14px); } }
.hero-content > * { animation: settleIn 1.2s var(--ease) both; }
.hero-content > :nth-child(2) { animation-delay: .1s; }
.hero-content > :nth-child(3) { animation-delay: .25s; }
.hero-content > :nth-child(4) { animation-delay: .38s; }
.hero-content > :nth-child(5) { animation-delay: .5s; }
.hero-content > :nth-child(n+6) { animation-delay: .62s; }

.hero-stars { position: absolute; inset: 0; pointer-events: none; }
.hero-stars i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); opacity: 0; animation: starTwinkle 5s ease-in-out infinite; animation-delay: var(--d); }
.hero-stars i::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #fffaf0, #f3d79b); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }
.hero-stars i::after { content: ""; position: absolute; inset: 35%; border-radius: 50%; box-shadow: 0 0 calc(var(--s) * .9) calc(var(--s) * .35) rgba(255, 214, 150, .55); }
@keyframes starTwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 40% { opacity: 1; transform: scale(1) rotate(45deg); } 60% { opacity: .75; transform: scale(.85) rotate(60deg); } }

/* ---------- Décor de l'accueil, par-dessus la photo : mobile d'étoiles et lanternes en cuivre ---------- */
.hero-decor { position: absolute; inset: 0; pointer-events: none; }
.amb-mobile { position: absolute; top: 0; right: 24%; width: clamp(170px, 17vw, 270px); height: auto; animation: mobileIn 1.8s var(--ease) .3s both; }
@keyframes mobileIn { from { opacity: 0; translate: 0 -50px; } }
.amb-lantern { position: absolute; height: auto; animation: lanternIn 1.6s var(--ease) .6s both; }
@keyframes lanternIn { from { opacity: 0; } }
.amb-lantern-1 { right: 4%; top: 48%; width: clamp(96px, 10vw, 168px); }
.amb-lantern-2 { right: 25%; top: 62%; width: clamp(54px, 5.4vw, 92px); opacity: .92; animation-delay: .9s; }
.amb-pool { position: absolute; height: 46px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 186, 100, .5), rgba(255, 160, 70, .12) 60%, transparent); filter: blur(4px); animation: lanternIn 1.6s var(--ease) .8s both; }
.amb-pool-1 { --lw: clamp(96px, 10vw, 168px); right: calc(4% - var(--lw) * .35); width: calc(var(--lw) * 1.7); top: calc(48% + var(--lw) * 2.143 - 26px); }
.amb-pool-2 { --lw: clamp(54px, 5.4vw, 92px); right: calc(25% - var(--lw) * .35); width: calc(var(--lw) * 1.7); top: calc(62% + var(--lw) * 2.143 - 18px); height: 30px; }
@media (max-aspect-ratio: 4/5) {
  .amb-mobile { right: 2%; width: 34vw; top: -4%; opacity: .85; }
  .amb-lantern-1 { right: -5%; width: 25vw; top: auto; bottom: -2%; opacity: .85; }
  .amb-lantern-2, .amb-pool { display: none; }
}
@media (max-width: 560px) { .amb-lantern { display: none; } }

/* ---------- Poussières dorées dans les sections sombres ---------- */
.dust { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cta-band .dust { z-index: 0; }
.dust::before, .dust::after { content: ""; position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.dust::before {
  height: calc(100% + 600px);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 222, 165, .9) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 34% 64%, rgba(255, 205, 140, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 30%, rgba(255, 232, 186, .85) 0 1.8px, transparent 3.2px),
    radial-gradient(circle at 77% 82%, rgba(255, 212, 150, .65) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 91% 44%, rgba(255, 226, 172, .75) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 93%, rgba(255, 200, 130, .7) 0 1.6px, transparent 2.9px),
    radial-gradient(circle at 24% 41%, rgba(255, 236, 196, .6) 0 .9px, transparent 1.8px);
  background-size: 600px 600px;
  animation: dustRise 48s linear infinite;
}
.dust::after {
  height: calc(100% + 420px); opacity: .55;
  background-image:
    radial-gradient(circle at 20% 70%, rgba(255, 222, 165, .9) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 22%, rgba(255, 212, 150, .8) 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 84% 60%, rgba(255, 236, 196, .7) 0 .8px, transparent 1.7px),
    radial-gradient(circle at 42% 8%, rgba(255, 205, 140, .7) 0 1.1px, transparent 2.1px);
  background-size: 420px 420px;
  animation: dustRise2 72s linear infinite;
}
@keyframes dustRise { to { transform: translate3d(0, -600px, 0); } }
@keyframes dustRise2 { to { transform: translate3d(0, -420px, 0); } }

/* ---------- Léger effet de profondeur sur les murs de pierre (navigateurs récents) ---------- */
@supports (animation-timeline: view()) {
  .section-stone .bg-stone { animation: depth linear both; animation-timeline: view(); }
  @keyframes depth { from { transform: translateY(-6%) scale(1.14); } to { transform: translateY(6%) scale(1.14); } }
}

@media (max-width: 920px) {
  .js .reveal-left, .js .reveal-right { transform: translateY(24px); }
  .js .timeline::after { left: 18px; }
  .tl-item::after { left: 18px; top: 46px; }
}
@media (max-width: 860px) {
  .footmap, .wheel, .breath { grid-template-columns: 1fr; }
  .footmap-svg { max-width: 230px; }
  .wheel-figure { max-width: 380px; width: 100%; margin: 0 auto; }
  .breath { text-align: center; }
  .breath-stage { max-width: 250px; width: 100%; margin: 0 auto; }
  .breath .eyebrow { justify-content: center; }
}
@media (max-width: 760px) {
  .hero-stars i { display: none; }
  .hero-stars i:nth-child(2), .hero-stars i:nth-child(3), .hero-stars i:nth-child(5) { display: block; }
}
@media (max-width: 700px) {
  .guide-item { grid-template-columns: 1fr; gap: 10px; }
  .guide-need { text-align: left; }
  .guide-line { display: none; }
}

/* ==========================================================================
   Pages intérieures : effets spectaculaires
   (la classe .fx est posée sur <html> par le script, jamais sur l'accueil,
   jamais quand le visiteur a demandé de réduire les animations)
   ========================================================================== */
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* changement de page tout en douceur (navigateurs récents) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vtOut .22s ease-out both; }
  ::view-transition-new(root) { animation: vtIn .32s ease-out both; }
}
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; } }

/* ---------- Bandeau : reflet de lumière, étoiles filantes, constellation ---------- */
.hero-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fx-sweep {
  position: absolute; inset: -10% -70%;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 222, 165, .14) 47%, rgba(255, 240, 214, .32) 50%, rgba(255, 222, 165, .14) 53%, transparent 60%);
  transform: translateX(-62%); animation: fxSweep 13s cubic-bezier(.45, 0, .25, 1) .5s infinite;
}
@keyframes fxSweep { 0% { transform: translateX(-62%); } 26%, 100% { transform: translateX(62%); } }
.fx-shoot {
  position: absolute; left: var(--x); top: var(--y); width: clamp(110px, 13vw, 200px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #fffaf0, rgba(255, 220, 160, .75) 25%, rgba(255, 200, 120, 0));
  transform-origin: 0 50%; opacity: 0; animation: fxShoot var(--t) linear var(--d) infinite;
}
.fx-shoot::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fffdf5; box-shadow: 0 0 12px 4px rgba(255, 226, 170, .9), 0 0 32px 10px rgba(255, 196, 110, .45); }
@keyframes fxShoot {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scaleX(.3); }
  2% { opacity: 1; }
  9% { opacity: 0; transform: rotate(var(--a)) translateX(-480px) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(-480px) scaleX(1); }
}
.fx-constellation { position: absolute; right: 5%; top: 16%; width: clamp(170px, 21vw, 300px); height: auto; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 214, 150, .6)); }
.fx-c-line { fill: none; stroke: rgba(255, 230, 185, .6); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fxDraw 3.4s cubic-bezier(.65, 0, .35, 1) 1.1s forwards; }
@keyframes fxDraw { to { stroke-dashoffset: 0; } }
.fx-c-star { fill: #fff6dc; transform-box: fill-box; transform-origin: center; opacity: 0; animation: fxStarIn .8s cubic-bezier(.3, 1.7, .5, 1) calc(.8s + var(--i) * .4s) forwards, fxTwinkle 3.4s ease-in-out calc(3.4s + var(--i) * .45s) infinite; }
@keyframes fxStarIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes fxTwinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.65); } }

/* le bandeau s'enfonce doucement quand on fait défiler */
.fx .page-hero .hero-media picture { scale: calc(1 + var(--hp, 0) * .22); }
.fx .page-hero .page-hero-inner { translate: 0 calc(var(--hp, 0) * 120px); opacity: calc(1 - var(--hp, 0) * 1.25); }
.fx .page-hero .hero-fx { translate: 0 calc(var(--hp, 0) * -70px); }

/* titre principal : les mots s'élèvent un à un, le mot calligraphié apparaît à l'encre dorée */
.fx .w { display: inline-block; }
.fx .page-title.is-split { animation: none; }
.fx .page-title.is-split .w { clip-path: inset(-.35em -.3em -.32em -.3em); }
.fx .page-title.is-split .wi { display: inline-block; animation: fxWordRise 1.15s cubic-bezier(.2, .85, .25, 1.06) calc(.25s + var(--wi) * .085s) both; }
@keyframes fxWordRise { from { transform: translateY(118%) rotate(6deg); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
.fx .page-title.is-split .fx-unit { animation: fxInk 1.8s cubic-bezier(.2, .8, .2, 1) calc(.35s + var(--wi) * .085s) both, shimmer 6.5s ease-in-out 2.8s infinite; }
@keyframes fxInk { from { opacity: 0; filter: blur(14px); transform: scale(1.4) translateY(.12em); } to { opacity: 1; filter: blur(0); transform: none; } }

/* titres de section : les mots basculent en place les uns après les autres */
.fx .fx-words { perspective: 700px; }
.fx .fx-words .wi, .fx .fx-words .fx-unit {
  display: inline-block; opacity: 0; transform: translateY(.5em) rotateX(-80deg); filter: blur(5px); transform-origin: 50% 100%;
  transition: opacity .6s ease, transform 1s cubic-bezier(.2, 1.3, .35, 1), filter .7s ease;
  transition-delay: calc(var(--delay, 0s) + .12s + var(--wi) * .06s);
}
.fx .fx-words.is-visible .wi, .fx .fx-words.is-visible .fx-unit { opacity: 1; transform: none; filter: blur(0); }
/* citations : les mots apparaissent comme on les murmure */
.fx .fx-soft .wi { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(6px); transition: opacity 1s ease, filter 1.1s ease, transform 1.1s ease; transition-delay: calc(var(--delay, 0s) + .2s + var(--wi) * .07s); }
.fx .fx-soft.is-visible .wi { opacity: 1; filter: blur(0); transform: none; }

/* ---------- Cartes : entrée en 3D ---------- */
.fx .reveal.fx-flip { transform-origin: 50% 100%; transition: opacity .9s ease var(--delay, 0s), transform 1.4s cubic-bezier(.2, 1.2, .35, 1) var(--delay, 0s), box-shadow .45s, border-color .45s; }
.fx .reveal.fx-flip:not(.is-visible) { opacity: 0; transform: perspective(1100px) translate3d(0, 80px, -80px) rotateX(30deg) rotateY(var(--ry, 0deg)) scale(.9); }
/* grandes lignes (soins, séance) : elles pivotent comme une porte qui s'ouvre */
.fx .reveal.fx-swing { transition: opacity .9s ease var(--delay, 0s), transform 1.5s cubic-bezier(.2, 1.15, .35, 1) var(--delay, 0s); }
.fx .reveal.fx-swing:not(.is-visible) { opacity: 0; transform-origin: var(--ox, 0%) 50%; transform: perspective(1400px) rotateY(var(--ry, 40deg)) translateX(var(--tx, -60px)); }
/* pastilles, mots-clés, liste des mutuelles : elles éclosent */
.fx .values > .reveal, .fx .chips > .reveal, .fx .mutuelles-list > .reveal { transition: opacity .5s ease var(--delay, 0s), transform .9s cubic-bezier(.25, 1.75, .45, 1) var(--delay, 0s); }
.fx .values > .reveal:not(.is-visible), .fx .chips > .reveal:not(.is-visible), .fx .mutuelles-list > .reveal:not(.is-visible) { transform: scale(.2) rotate(-14deg); }
.fx .benefits > .reveal:not(.is-visible) { transform: translateX(-70px); }
.fx .benefits .num { scale: 0; transition: scale .9s cubic-bezier(.25, 1.8, .45, 1) calc(var(--delay, 0s) + .35s); }
.fx .benefits .is-visible .num { scale: 1; }
/* la frise s'élance de plus loin */
.fx .timeline > .reveal-left:not(.is-visible) { transform: translateX(-140px) rotate(-2deg); }
.fx .timeline > .reveal-right:not(.is-visible) { transform: translateX(140px) rotate(2deg); }

/* ---------- Images : rideau doré qui se lève ---------- */
.fx .fx-curtain { position: relative; display: block; }
.fx .tl-media .fx-curtain::after { border-radius: 20px; }
.fx .fx-curtain::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, #f6e3b4, #d2a656 42%, #9a6d2a);
  transform: scaleX(0); transform-origin: 0 50%;
}
.fx .is-visible .fx-curtain::after, .fx .fx-curtain.is-visible::after { animation: fxCurtain 1.5s cubic-bezier(.77, 0, .18, 1) calc(var(--delay, 0s) + .15s) both; }
@keyframes fxCurtain {
  0% { transform: scaleX(0); transform-origin: 0 50%; }
  46% { transform: scaleX(1); transform-origin: 0 50%; }
  54% { transform: scaleX(1); transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}
.fx .fx-curtain img { clip-path: inset(0 0 100% 0); }
.fx .is-visible .fx-curtain img, .fx .fx-curtain.is-visible img { animation: fxUnclip 0s linear calc(var(--delay, 0s) + .85s) both; }
@keyframes fxUnclip { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(-80px); } }
/* polaroïds : un flash d'appareil photo quand ils se posent */
.fx .polaroid picture { position: relative; display: block; }
.fx .polaroid picture::after { content: ""; position: absolute; inset: 0; background: #fffdf6; opacity: 0; pointer-events: none; }
.fx .photo-stack.is-visible .p1 picture::after { animation: fxFlash 1.2s ease-out 1.05s both; }
.fx .photo-stack.is-visible .p2 picture::after { animation: fxFlash 1.2s ease-out 1.5s both; }
@keyframes fxFlash { 0% { opacity: 0; } 6% { opacity: .95; } 100% { opacity: 0; } }

/* ---------- Icônes qui se dessinent au trait ---------- */
.fx .fx-draw .fx-g { stroke-dasharray: var(--len) calc(var(--len) * 2); stroke-dashoffset: calc(var(--len) * 1.15); transition: stroke-dashoffset 1.8s cubic-bezier(.65, 0, .35, 1) calc(var(--delay, 0s) + .35s); }
.fx .is-visible .fx-draw .fx-g { stroke-dashoffset: 0; }
.fx .fx-draw [fill="currentColor"]:not([opacity]) { opacity: 0; transition: opacity .6s ease calc(var(--delay, 0s) + 1.4s); }
.fx .is-visible .fx-draw [fill="currentColor"]:not([opacity]) { opacity: 1; }

/* ---------- Chiffres et détails ---------- */
.fx .is-visible .principle-num { animation: fxNumSpin 1.5s cubic-bezier(.2, 1.15, .35, 1) calc(var(--delay, 0s) + .25s) both, shimmer 7s ease-in-out 2.4s infinite; }
@keyframes fxNumSpin { from { opacity: 0; transform: perspective(500px) rotateY(-540deg) scale(.4); } to { opacity: 1; transform: none; } }
.fx .tl-item.reveal .tl-date { transform: perspective(500px) rotateX(-95deg); transform-origin: 50% 0; transition: transform 1.1s cubic-bezier(.2, 1.4, .4, 1) calc(var(--delay, 0s) + .45s); }
.fx .tl-item.reveal.is-visible .tl-date { transform: none; }
.fx .tl-item.lit::before { animation: fxIgnite 1s cubic-bezier(.3, 1.8, .5, 1) both; background: radial-gradient(circle, #fff8e1, var(--gold) 62%); box-shadow: 0 0 0 6px var(--cream), 0 0 0 7px rgba(185, 134, 47, .6), 0 0 26px 10px rgba(255, 200, 120, .75); }
@keyframes fxIgnite { 0% { scale: .3; } 55% { scale: 2.1; } 100% { scale: 1; } }
.fx .price-table .price { display: inline-block; }
.fx .price-table tr.is-visible .price { animation: fxPricePop 1.1s cubic-bezier(.25, 1.6, .45, 1) calc(var(--delay, 0s) + .35s) both; }
@keyframes fxPricePop {
  0% { opacity: 0; transform: scale(.2) rotate(-25deg); text-shadow: 0 0 0 rgba(255, 200, 110, 0); }
  55% { opacity: 1; text-shadow: 0 0 18px rgba(255, 196, 100, .95); }
  100% { opacity: 1; transform: none; text-shadow: 0 0 0 rgba(255, 200, 110, 0); }
}

/* ---------- Bordures de lumière qui tournent autour des encadrés ---------- */
.fx .price-card, .fx .form-card { position: relative; }
.fx .price-card::after, .fx .form-card::after, .fx .feature-dark::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--fx-angle), transparent 0deg, rgba(201, 162, 79, .95) 40deg, #fff2cf 62deg, rgba(201, 162, 79, .95) 84deg, transparent 125deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: fxBorder 6s linear infinite;
}
@keyframes fxBorder { to { --fx-angle: 360deg; } }

/* ---------- Roue des saisons et respiration ---------- */
.wheel-sparks .ws-glow { fill: rgba(255, 205, 120, .35); }
.wheel-sparks .ws-core { fill: #fff6dc; }
.fx .wheel-node[aria-pressed="true"]::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--c); pointer-events: none; animation: ripple 2.2s ease-out infinite; }
.fx .breath-stage::before, .fx .breath-stage::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(255, 214, 150, .6); pointer-events: none; animation: fxBreathRing 10s ease-out infinite; }
.fx .breath-stage::after { animation-delay: 1.3s; }
@keyframes fxBreathRing { 0% { transform: scale(.8); opacity: 0; } 6% { opacity: .9; } 40%, 100% { transform: scale(1.7); opacity: 0; } }

/* ---------- Ambiance : rayons de lumière, halos dorés, grands mots en filigrane ---------- */
.fx main .section, .fx main .section-tight { isolation: isolate; }
.fx-rays {
  position: absolute; left: 50%; top: -30%; width: 170%; height: 175%; translate: -50% 0; z-index: -1; pointer-events: none;
  transform-origin: 50% 0; filter: blur(7px); will-change: transform;
  background: conic-gradient(from 150deg at 50% 0%, transparent 0deg, rgba(255, 214, 150, .15) 5deg, transparent 10deg, transparent 15deg, rgba(255, 214, 150, .1) 19deg, transparent 24deg, transparent 29deg, rgba(255, 222, 165, .17) 33deg, transparent 38deg, transparent 43deg, rgba(255, 214, 150, .1) 47deg, transparent 52deg, transparent 55deg, rgba(255, 214, 150, .13) 58deg, transparent 61deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 88%); mask-image: linear-gradient(180deg, #000 25%, transparent 88%);
  animation: fxRays 16s ease-in-out infinite alternate;
}
@keyframes fxRays { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.cta-band .fx-rays { z-index: 0; }
.fx .cta-inner { position: relative; z-index: 1; }

.fx-orbs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-orbs i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, rgba(226, 182, 102, .3), rgba(226, 182, 102, .11) 45%, transparent 70%); animation: fxOrb var(--t) ease-in-out var(--d) infinite alternate; will-change: transform; }
@keyframes fxOrb { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(var(--dx), var(--dy), 0) scale(1.3); } }
.fx-orbs::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 500px); opacity: .7;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(185, 134, 47, .55) 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 63% 71%, rgba(185, 134, 47, .45) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 86% 37%, rgba(201, 162, 79, .55) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 38% 88%, rgba(185, 134, 47, .4) 0 1px, transparent 2px);
  background-size: 500px 500px; animation: fxDustRise 55s linear infinite; will-change: transform;
}
@keyframes fxDustRise { to { transform: translate3d(0, -500px, 0); } }
.fx-bigword {
  position: absolute; left: 0; bottom: -.14em; white-space: nowrap; line-height: 1;
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(90px, 15vw, 240px);
  color: transparent; -webkit-text-stroke: 1px rgba(185, 134, 47, .24);
  translate: calc(14vw - var(--sp, 0) * 36vw) 0; will-change: translate;
}
.fx-bigword::before { content: attr(data-word); }
.section-stone .fx-bigword { -webkit-text-stroke-color: rgba(236, 217, 168, .16); }

/* ---------- Saisons : feuilles, flocons, pétales, braises ou grains d'or dans le bandeau ---------- */
.season-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.season-fx i { position: absolute; top: -50px; left: var(--x); width: var(--s); height: var(--s); animation: fxFall var(--t) linear var(--d) infinite; will-change: transform; }
.season-fx i::before { content: ""; position: absolute; inset: 0; background: center / contain no-repeat; animation: fxSway calc(var(--t) * .32) ease-in-out var(--d) infinite alternate; }
@keyframes fxFall { to { transform: translate3d(var(--dx), 125vh, 0); } }
@keyframes fxSway { from { transform: translateX(-22px) rotate(-40deg) rotateY(0deg); } to { transform: translateX(22px) rotate(55deg) rotateY(170deg); } }
/* automne (Métal) : feuilles dorées, cuivrées, rouille */
.season-metal .season-fx i::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5C6.2 5.6 3.6 10.2 4.6 15.2 5.5 19.5 8.6 22.5 12 22.5s6.5-3 7.4-7.3C20.4 10.2 17.8 5.6 12 1.5z' fill='%23d9a441'/%3E%3Cpath d='M12 4.5V23M12 10 8.5 7.5M12 14l4-3M12 18l-4-3' stroke='%238a5a1c' stroke-width='.8' fill='none'/%3E%3C/svg%3E"); }
.season-metal .season-fx i:nth-child(3n+1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5C6.2 5.6 3.6 10.2 4.6 15.2 5.5 19.5 8.6 22.5 12 22.5s6.5-3 7.4-7.3C20.4 10.2 17.8 5.6 12 1.5z' fill='%23b8692e'/%3E%3Cpath d='M12 4.5V23M12 10 8.5 7.5M12 14l4-3M12 18l-4-3' stroke='%236e3a16' stroke-width='.8' fill='none'/%3E%3C/svg%3E"); }
.season-metal .season-fx i:nth-child(4n+2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5C6.2 5.6 3.6 10.2 4.6 15.2 5.5 19.5 8.6 22.5 12 22.5s6.5-3 7.4-7.3C20.4 10.2 17.8 5.6 12 1.5z' fill='%238f4a24'/%3E%3Cpath d='M12 4.5V23M12 10 8.5 7.5M12 14l4-3M12 18l-4-3' stroke='%235a2a10' stroke-width='.8' fill='none'/%3E%3C/svg%3E"); }
/* hiver (Eau) : flocons */
.season-eau .season-fx i::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17l17.4-10M12 6 9.8 3.8M12 6l2.2-2.2M12 18l-2.2 2.2M12 18l2.2 2.2'/%3E%3C/svg%3E"); opacity: .85; }
.season-eau .season-fx i:nth-child(2n)::before { background-image: radial-gradient(circle, #fff 0 25%, rgba(255, 255, 255, .5) 40%, transparent 68%); }
.season-eau .season-fx i::before, .season-terre .season-fx i::before { animation-name: fxDrift; }
@keyframes fxDrift { from { transform: translateX(-16px) rotate(0deg); } to { transform: translateX(16px) rotate(120deg); } }
/* printemps (Bois) : pétales */
.season-bois .season-fx i::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c4 4 5.5 8.5 4.2 13.2C15.3 18.6 13.8 21 12 22c-1.8-1-3.3-3.4-4.2-6.8C6.5 10.5 8 6 12 2z' fill='%23f4cfd6'/%3E%3Cpath d='M12 5c1.6 3 2 7 0 13' stroke='%23e3a7b4' stroke-width='.8' fill='none'/%3E%3C/svg%3E"); }
.season-bois .season-fx i:nth-child(3n)::before { filter: hue-rotate(-12deg) brightness(1.08); }
/* intersaisons (Terre) : grains d'or */
.season-terre .season-fx i::before { background-image: radial-gradient(circle at 40% 35%, #fff1c2, #d9a441 45%, rgba(185, 130, 47, 0) 70%); }
.season-terre .season-fx i { width: calc(var(--s) * .55); height: calc(var(--s) * .55); }
/* été (Feu) : braises qui montent */
.season-feu .season-fx i { top: auto; bottom: -40px; width: calc(var(--s) * .6); height: calc(var(--s) * .6); animation-name: fxRise; }
.season-feu .season-fx i::before { background-image: radial-gradient(circle, #fff3c4 0 16%, #ffb347 38%, rgba(255, 110, 40, 0) 70%); animation-name: fxEmber; }
@keyframes fxRise { to { transform: translate3d(var(--dx), -125vh, 0); } }
@keyframes fxEmber { from { transform: translateX(-12px) scale(1); opacity: 1; } to { transform: translateX(12px) scale(.6); opacity: .6; } }

/* ---------- Barre de lecture dorée ---------- */
.fx-progress { position: fixed; left: 0; top: 0; z-index: 80; width: 100%; height: 3px; pointer-events: none; }
.fx-progress span { display: block; height: 100%; background: linear-gradient(90deg, #8a6326, #c9a24f 40%, #f3dea8 80%, #fff6dc); box-shadow: 0 0 10px rgba(201, 162, 79, .8); transform: scaleX(var(--rp, 0)); transform-origin: 0 50%; }

@media (max-width: 760px) {
  .fx-constellation { top: 74px; right: 4%; width: 120px; opacity: .85; }
  .fx-bigword { font-size: clamp(64px, 22vw, 120px); }
}

.fx-init .reveal, .fx-init .reveal *, .fx-init .reveal::before, .fx-init .reveal::after, .fx-init .reveal *::before, .fx-init .reveal *::after { transition: none !important; }
/* décor peint seulement quand il approche de l'écran (premier affichage plus rapide, rien ne tourne hors de vue) */
.js :is(.dust, .footer-stars, .fx-rays, .fx-orbs, .season-fx, .hero-glow, .hero-bokeh, .hero-stars, .hero-decor, .hero-fx):not(.is-live) { visibility: hidden; }
.js :is(.dust, .footer-stars, .fx-rays, .fx-orbs, .season-fx, .hero-glow, .hero-bokeh, .hero-stars, .hero-decor, .hero-fx):not(.is-live),
.js :is(.dust, .footer-stars, .fx-rays, .fx-orbs, .season-fx, .hero-glow, .hero-bokeh, .hero-stars, .hero-decor, .hero-fx):not(.is-live) *,
.js :is(.dust, .footer-stars, .fx-rays, .fx-orbs, .season-fx, .hero-glow, .hero-bokeh, .hero-stars, .hero-decor, .hero-fx):not(.is-live)::before,
.js :is(.dust, .footer-stars, .fx-rays, .fx-orbs, .season-fx, .hero-glow, .hero-bokeh, .hero-stars, .hero-decor, .hero-fx):not(.is-live)::after { animation-play-state: paused !important; }
/* une fois apparus, les blocs réagissent vite au survol */
.js .reveal.fx-done { transition-property: opacity, transform, box-shadow, border-color, background-color !important; transition-duration: .45s !important; transition-delay: 0s !important; transition-timing-function: var(--ease) !important; }

/* ==========================================================================
   Vitesse d'affichage : le navigateur ne calcule et ne dessine les sections
   hors de l'écran qu'au moment où on s'en approche (le texte reste lu par Google)
   ========================================================================== */
main > section:not(:first-of-type):not(:has(.article-cover)), .site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
/* sur téléphone, l'ombre du grand logo est plus légère (moins coûteuse à dessiner) */
@media (max-width: 760px) {
  .hero-logo img { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
}

/* Mouvements réduits : pas d'animation */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero-media picture img, .hero-video { animation: none; transform: scale(1.06); }
  .hero-bokeh, .hero-stars, .dust { display: none; }
  .js .reveal { opacity: 1; transform: none; }
  .section-stone .bg-stone { animation: none !important; transform: none; }
  .fx-shoot, .fx-sweep, .wheel-sparks, .season-fx { display: none; }
  .js .page-inner .page-title { animation: none !important; }
  .js .signature.reveal .sig-ink { clip-path: none; }
}

/* Impression */
@media print {
  .site-header, .mobile-cta, .site-footer, .cta-band, .hero-media, .scroll-cue, .fx-progress, .fx-orbs, .fx-rays, .season-fx { display: none !important; }
  .hero, .page-hero { color: #000; background: none; padding: 20px 0; min-height: 0; }
  .hero-name, .page-title, .hero-job { color: #000 !important; -webkit-text-fill-color: #000; background: none; }
  body { background: #fff; }
}