/* ==========================================================================
   InnovaCard — L'Excellence Numérique
   Feuille de styles principale
   --------------------------------------------------------------------------
   1. Polices de repli (métriques ajustées, CLS)
   2. Tokens : thème nuit (par défaut) et thème jour
   3. Reset moderne, protection du contenu
   4. Base & typographie
   5. Utilitaires
   6. Boutons
   7. En-tête, navigation, bascule jour/nuit
   8. Hero
   9. Scène animée (ciel, prairie, fleur dorée, papillon 3D)
   10. Chargement (anneau → papillon)
   11. Sections pleine page
   12. Savoir-faire
   13. Réalisation (atelier : papillon sur le marteau)
   14. Contact
   15. Pied de page
   16. Page Mentions légales
   17. Apparitions au scroll
   18. Transition jour/nuit
   19. Mouvement réduit
   Convention : BEM (bloc__element--modificateur), mobile-first.
   ========================================================================== */

/* 1. POLICES DE REPLI ------------------------------------------------------ */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 88%;
  ascent-override: 96%;
  descent-override: 30%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 105%;
  ascent-override: 98%;
  descent-override: 27%;
}

/* 2. TOKENS ---------------------------------------------------------------- */
:root {
  /* Nuit (par défaut) */
  --c-fond: #0a0a0b;
  --c-fond-2: #0f0f11;
  --c-fond-3: #16161a;
  --fond-rgb: 10 10 11;
  --c-titre: #f3eee3;
  --c-texte: #d8d2c4;
  --c-doux: #a7a194;
  --c-or: #c4a24d;
  --c-or-clair: #e6cd85;
  --c-or-fonce: #8c7132;
  --c-sur-or: #0a0a0b;
  --or-rgb: 196 162 77;
  --g-or: linear-gradient(120deg, #9a7b38 0%, #c4a24d 28%, #ecd596 50%, #c4a24d 72%, #9a7b38 100%);
  --g-or-texte: linear-gradient(100deg, #b8943f 0%, #ead18b 42%, #c4a24d 62%, #f0dca0 84%, #b8943f 100%);
  --trait: rgb(var(--or-rgb) / 0.2);
  --trait-fort: rgb(var(--or-rgb) / 0.55);
  --trait-leger: rgb(255 255 255 / 0.05);
  --ombre-carte: 0 50px 90px -40px rgb(0 0 0 / 0.9);
  --grain: 0.05;

  /* Navigateur de démonstration */
  --nav-chrome: #121215;
  --nav-point: #2c2c31;
  --nav-url: rgb(255 255 255 / 0.04);

  /* Scène : prairie de nuit */
  --sc-colline-1: #0f130f;
  --sc-colline-2: #121812;
  --sc-arbres: #0a0e0b;
  --sc-brume: #221d14;
  --sc-herbe-a: #19241a;
  --sc-herbe-b: #121a13;
  --sc-herbe-c: #25331f; /* pointes plus claires */
  --sc-feuille: #1d2a1b;
  --sc-sol: #0c100b;
  --sc-avant-a: #080b08;
  --sc-avant-b: #0b100a;
  --sc-tige: #26331f;
  --sc-fleurs-op: 1;
  --sc-luciole: #f4dd9a;
  --sc-luciole-lueur: rgb(var(--or-rgb) / 0.55);
  --sc-halo: rgb(196 162 77 / 0.22);

  /* Typographie */
  --f-serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --f-sans: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.82rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --fs-base: clamp(1rem, 0.97rem + 0.18vw, 1.09rem);
  --fs-lg: clamp(1.1rem, 1rem + 0.45vw, 1.32rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 1.95rem);
  --fs-h2: clamp(2.35rem, 1.6rem + 3.2vw, 4.75rem);
  --fs-hero: clamp(3.3rem, min(12.5vw, 15.5svh), 10.5rem);

  /* Espacements fluides */
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-s: 1rem;
  --sp-m: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --sp-l: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --sp-xl: clamp(5.5rem, 3.5rem + 8vw, 11rem);
  --gutter: clamp(1.25rem, 0.75rem + 2.4vw, 3rem);
  --max: 1240px;
  --header-h: clamp(64px, 58px + 1vw, 80px);
  /* Un seul écart pour toute la barre de navigation (liens, bouton, bascule) */
  --nav-gap: clamp(1.75rem, 1rem + 1.2vw, 2.25rem);

  /* Mouvement */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* Divers */
  --r-s: 2px;
  --z-scene: 0;
  --z-glow: 40;
  --z-header: 50;
  --z-grain: 70;
  --z-veil: 85;
  --z-intro-ui: 90;
}

/* Jour : lumière de fin de matinée sur la Provence */
[data-theme="jour"] {
  --c-fond: #f6f0e4;
  --c-fond-2: #efe6d4;
  --c-fond-3: #e7dcc6;
  --fond-rgb: 246 240 228;
  --c-titre: #1b170f;
  --c-texte: #3a3326;
  --c-doux: #6c6351;
  --c-or: #8a6818;
  --c-or-clair: #a57d22;
  --c-or-fonce: #6b5013;
  --or-rgb: 158 118 32;
  --g-or: linear-gradient(120deg, #a67f33 0%, #c9a04c 28%, #ebd08e 50%, #c9a04c 72%, #a67f33 100%);
  --g-or-texte: linear-gradient(100deg, #7a5a16 0%, #b18629 42%, #8a6818 62%, #b58c35 84%, #7a5a16 100%);
  --trait: rgb(var(--or-rgb) / 0.26);
  --trait-fort: rgb(var(--or-rgb) / 0.6);
  --trait-leger: rgb(60 45 20 / 0.08);
  --ombre-carte: 0 50px 90px -45px rgb(80 60 20 / 0.45);
  --grain: 0.035;

  --nav-chrome: #e8e0cf;
  --nav-point: #cfc4ad;
  --nav-url: rgb(255 255 255 / 0.6);

  --sc-colline-1: #adbb8e;
  --sc-colline-2: #93a870;
  --sc-arbres: #7b9470;
  --sc-brume: #ece4c9;
  --sc-herbe-a: #6f9046;
  --sc-herbe-b: #4f6e35;
  --sc-herbe-c: #a3bb68; /* pointes tendres, un peu blondes au soleil */
  --sc-feuille: #5a7a3b;
  --sc-sol: #5d7a3c;
  --sc-avant-a: #587b39;
  --sc-avant-b: #365426;
  --sc-tige: #4d6c36;
  --sc-luciole: #fff4cf;
  --sc-luciole-lueur: rgb(255 236 170 / 0.7);
  --sc-halo: rgb(255 226 150 / 0.4);
}

/* 3. RESET ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  color-scheme: dark;
  background: var(--c-fond);
  /* Aucun surlignage, aucune sélection, aucun menu de copie (ordinateur et mobile) */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="jour"] { color-scheme: light; }
body {
  min-height: 100svh;
  background: var(--c-fond);
  color: var(--c-texte);
  font: 400 var(--fs-base)/1.7 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
img, svg, picture, video { display: block; max-width: 100%; -webkit-user-drag: none; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; -webkit-user-drag: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: inherit; text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
::selection { background: transparent; color: inherit; }
::-moz-selection { background: transparent; color: inherit; }
:focus-visible {
  outline: 1px solid var(--c-or-clair);
  outline-offset: 4px;
  border-radius: var(--r-s);
}
:focus:not(:focus-visible) { outline: none; }
/* Une rubrique ciblée s'affiche en entier : son bord haut s'aligne sur le haut
   de l'écran, l'en-tête translucide flotte au-dessus de sa propre marge. */
[id] { scroll-margin-top: 0; }

/* 4. BASE ------------------------------------------------------------------ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="jour"] body::after { filter: invert(1); }
.site-main { overflow-x: clip; }

.titre-2 {
  font: 300 var(--fs-h2)/1.02 var(--f-serif);
  color: var(--c-titre);
  letter-spacing: -0.012em;
}
.titre-2__ligne { display: block; }
.titre-2__ligne--or {
  font-style: italic;
  background: var(--g-or-texte);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Marge intérieure basse compensée : le fond doré couvre aussi les jambages
     (g, p, j), qui ne sont plus coupés par background-clip: text. */
  padding: 0.04em 0.08em 0.2em 0;
  margin: -0.04em 0 -0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mention {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font: italic 400 var(--fs-lg)/1.2 var(--f-serif);
  color: var(--c-or);
}
.mention::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.texte-doux { color: var(--c-doux); }
.lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--c-texte);
  max-width: 34em;
}

/* 5. UTILITAIRES ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: 100;
  padding: 0.85rem 1.25rem;
  background: var(--c-or);
  color: var(--c-fond);
  font: 600 var(--fs-sm)/1 var(--f-sans);
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease);
}
.skip-link:focus-visible { transform: none; outline-color: var(--c-titre); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 6. BOUTONS --------------------------------------------------------------- */
.btn {
  --h: 3.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-height: var(--h);
  padding: 0 1.9rem;
  border-radius: var(--r-s);
  font: 600 var(--fs-sm)/1 var(--f-sans);
  letter-spacing: 0.06em;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  touch-action: manipulation;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.4s var(--ease);
}
.btn:active { transform: scale(0.975); }
.btn__icone {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform 0.5s var(--ease);
}
.btn:hover .btn__icone, .btn:focus-visible .btn__icone { transform: translateX(4px); }

.btn--or { color: var(--c-sur-or); background: var(--g-or); }
.btn--or::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% 0;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgb(255 250 235 / 0.55), transparent);
  transform: translateX(-160%) skewX(-18deg);
  transition: transform 0.9s var(--ease);
}
.btn--or:hover::after, .btn--or:focus-visible::after { transform: translateX(330%) skewX(-18deg); }

.btn--filet {
  color: var(--c-titre);
  border: 1px solid var(--trait-fort);
}
.btn--filet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g-or);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.6s var(--ease);
}
.btn--filet:hover, .btn--filet:focus-visible { color: var(--c-sur-or); border-color: transparent; }
.btn--filet:hover::before, .btn--filet:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.btn--petit { --h: 2.75rem; padding: 0 1.25rem; font-size: var(--fs-xs); }

.lien-filet {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-titre);
}
.lien-filet::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.6rem;
  height: 1px;
  background: var(--c-or);
  opacity: 0.35;
  transform-origin: left;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.lien-filet:hover::after, .lien-filet:focus-visible::after { opacity: 1; transform: scaleY(1.6); }

/* 7. EN-TÊTE & NAVIGATION -------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  padding-top: env(safe-area-inset-top);
  transition: opacity 1.1s var(--ease) 0.5s, transform 1.1s var(--ease) 0.5s;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--fond-rgb) / 0.76);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid var(--trait);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.site-header.is-scrolled::before, .menu-open .site-header::before { opacity: 1; }
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--header-h);
}
.marque {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  margin-right: auto;
  font: 500 1.4rem/1 var(--f-serif);
  letter-spacing: 0.03em;
  color: var(--c-titre);
}
.marque__logo { width: 42px; height: 42px; transition: transform 0.8s var(--ease); }
.marque:hover .marque__logo { transform: rotate(-6deg) scale(1.06); }

.nav-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -0.6rem;
}
.nav-toggle__ligne {
  grid-area: 1 / 1;
  width: 26px;
  height: 1px;
  background: var(--c-titre);
  transition: transform 0.5s var(--ease), background-color 0.3s;
}
.nav-toggle__ligne:first-child { transform: translateY(-4px); }
.nav-toggle__ligne:last-child { transform: translateY(4px) scaleX(0.6); transform-origin: right; }
.nav-toggle[aria-expanded="true"] .nav-toggle__ligne { transform-origin: center center; }
.nav-toggle[aria-expanded="true"] .nav-toggle__ligne:first-child { transform: rotate(45deg); background: var(--c-or); }
.nav-toggle[aria-expanded="true"] .nav-toggle__ligne:last-child { transform: rotate(-45deg); background: var(--c-or); }

/* Menu mobile plein écran */
.nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-l);
  height: 100dvh;
  padding: calc(var(--header-h) + env(safe-area-inset-top) + 1.5rem) max(var(--gutter), env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  overflow-y: auto;
  background:
    radial-gradient(60% 45% at 80% 100%, rgb(var(--or-rgb) / 0.1), transparent 70%),
    var(--c-fond);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.nav.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.nav__liste { display: grid; gap: 0.25rem; }
.nav__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 300 clamp(2.1rem, 9vw, 3.2rem)/1.15 var(--f-serif);
  color: var(--c-titre);
  transform: translateY(18px);
  opacity: 0;
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease), color 0.3s;
}
.nav.is-open .nav__lien { transform: none; opacity: 1; }
.nav.is-open li:nth-child(2) .nav__lien { transition-delay: 0.06s; }
.nav__lien:hover, .nav__lien.is-active { color: var(--c-or-clair); }
.nav__pied {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  padding-top: var(--sp-m);
  border-top: 1px solid var(--trait);
}
.nav__email { color: var(--c-doux); font-size: var(--fs-sm); }

@media (min-width: 60em) {
  .nav-toggle, .nav__email { display: none; }
  /* Écarts identiques : Savoir-faire → Réalisation → Prendre rendez-vous → bascule jour/nuit */
  .site-header__inner { gap: var(--nav-gap); }
  .marque { margin-right: auto; }
  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--nav-gap);
    height: auto;
    padding: 0;
    overflow: visible;
    background: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .nav__liste { display: flex; gap: var(--nav-gap); }
  .nav__lien {
    position: relative;
    font: 500 var(--fs-sm)/1 var(--f-sans);
    letter-spacing: 0.04em;
    color: var(--c-texte);
    transform: none;
    opacity: 1;
  }
  .nav__lien::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.55rem;
    height: 1px;
    background: var(--c-or);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s var(--ease);
  }
  .nav__lien:hover::after, .nav__lien.is-active::after, .nav__lien:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  .nav__pied { padding: 0; border: 0; }
}

/* Bascule jour/nuit : un petit ciel qui passe de la nuit au jour.
   Visible uniquement avec une souris (ordinateur) ; sur téléphone,
   le thème suit automatiquement le réglage du système. */
.theme {
  position: relative;
  z-index: 2;
  display: none;
  flex: none;
  place-items: center;
  width: 64px;
  height: 44px;
  border-radius: 99px;
}
@media (hover: hover) and (pointer: fine) {
  .theme { display: grid; }
}
.theme__piste {
  position: relative;
  width: 58px;
  height: 30px;
  border-radius: 99px;
  overflow: hidden;
  background: linear-gradient(180deg, #0d1220 0%, #1b2033 100%);
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.5);
  transition: background 0.9s var(--ease), box-shadow 0.9s var(--ease);
}
.theme__piste::after { /* contour doré, posé par-dessus le ciel, la lune et le soleil */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(196 162 77 / 0.5);
  transition: box-shadow 0.6s var(--ease);
}
.theme__piste::before { /* ciel de jour, en fondu */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #74a7cf 0%, #cfe0e6 70%, #f4dfae 100%);
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.theme__astre {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fbf3dc, #e2d3ac 70%);
  box-shadow: 0 0 10px rgb(241 230 201 / 0.35);
  overflow: hidden;
  transform: translateX(28px);
  transition: transform 0.9s var(--ease), background 0.9s var(--ease), box-shadow 0.9s var(--ease);
}
.theme__ombre { /* ombre qui dessine le croissant de lune */
  position: absolute;
  top: -3px;
  left: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #151a2a;
  transition: transform 0.9s var(--ease), opacity 0.6s var(--ease);
}
.theme__etoile {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #f4ecd6;
  transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
}
.theme__etoile:nth-child(1) { top: 8px; left: 10px; }
.theme__etoile:nth-child(2) { top: 17px; left: 18px; width: 1.5px; height: 1.5px; }
.theme__etoile:nth-child(3) { top: 6px; left: 22px; width: 1.5px; height: 1.5px; opacity: 0.7; }
.theme__nuage {
  position: absolute;
  top: 16px;
  left: 30px;
  width: 20px;
  height: 7px;
  border-radius: 99px;
  background: #fff;
  box-shadow: -5px 2px 0 -1px #fff, 6px 1px 0 -1px #fff;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
}
.theme:hover .theme__piste::after, .theme:focus-visible .theme__piste::after { box-shadow: inset 0 0 0 1px #d8b765; }
[data-theme="jour"] .theme__piste::before { opacity: 1; }
[data-theme="jour"] .theme__piste { box-shadow: inset 0 2px 6px rgb(60 80 110 / 0.25); }
/* Jour : même filet doré qu'en mode nuit, un peu plus soutenu pour ressortir sur le ciel clair */
[data-theme="jour"] .theme__piste::after { box-shadow: inset 0 0 0 1px rgb(176 136 48 / 0.9), inset 0 0 0 2px rgb(255 246 220 / 0.35); }
[data-theme="jour"] .theme:hover .theme__piste::after,
[data-theme="jour"] .theme:focus-visible .theme__piste::after { box-shadow: inset 0 0 0 1px #9a7422, inset 0 0 0 2px rgb(255 246 220 / 0.5); }
[data-theme="jour"] .theme__astre {
  transform: translateX(0);
  background: radial-gradient(circle at 40% 40%, #fff6d6, #f5c95d 60%, #e5a93a);
  box-shadow: 0 0 0 4px rgb(255 226 150 / 0.35), 0 0 14px rgb(255 205 100 / 0.8);
}
[data-theme="jour"] .theme__ombre { transform: translate(-20px, -10px); opacity: 0; }
[data-theme="jour"] .theme__etoile { opacity: 0; transform: translateY(8px); }
[data-theme="jour"] .theme__nuage { opacity: 0.95; transform: none; }
@media (min-width: 60em) {
  /* La zone cliquable épouse exactement la piste : aucun espace invisible
     ne vient fausser l'écart avec le bouton « Prendre rendez-vous ». */
  .theme { width: 58px; }
}

/* 8. HERO ------------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
  background: var(--c-fond);
}
.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(1.25rem, 6svh, 5rem));
  padding-bottom: 34svh; /* réserve la zone de la fleur dorée et du papillon */
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.hero__signature {
  font: italic 400 clamp(1.1rem, 0.95rem + 0.8vw, 1.6rem)/1.2 var(--f-serif);
  color: var(--c-or);
  letter-spacing: 0.02em;
}
.hero__titre {
  display: grid;
  justify-items: center;
  gap: clamp(0.6rem, 1.6svh, 1.25rem);
  margin-top: clamp(0.4rem, 1.4svh, 1rem);
}
.hero__marque {
  display: block;
  font: 300 var(--fs-hero)/0.88 var(--f-serif);
  letter-spacing: -0.015em;
  color: var(--c-titre);
  padding-inline: 0.05em;
}
.hero__activite {
  display: flex;
  align-items: center;
  gap: 1rem;
  font: 500 clamp(0.8rem, 0.72rem + 0.35vw, 1rem)/1.3 var(--f-sans);
  letter-spacing: 0.18em;
  color: var(--c-texte);
}
.hero__activite::before, .hero__activite::after {
  content: "";
  width: clamp(1.25rem, 4vw, 3.5rem);
  height: 1px;
  background: var(--g-or);
  flex: none;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: clamp(1.75rem, 5svh, 3rem);
}
.hero__defiler {
  position: absolute;
  left: max(var(--gutter), env(safe-area-inset-left));
  bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1rem));
  z-index: 2;
  display: none;
  align-items: center;
  gap: 1rem;
  min-width: 44px;
  min-height: 44px;
  color: var(--c-doux);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}
[data-theme="jour"] .hero__defiler { color: #f6f0e4; }
.hero__defiler-trait {
  position: relative;
  width: 1px;
  height: 4.5rem;
  overflow: hidden;
  background: var(--trait);
}
.hero__defiler-trait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-or);
  transform: translateY(-100%);
  animation: defiler 2.6s var(--ease-io) infinite;
}
.hero__defiler:hover { color: var(--c-titre); }
@keyframes defiler {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@media (min-width: 48em) {
  .hero__defiler { display: inline-flex; }
  .hero__actions { flex-wrap: nowrap; }
}
@media (max-height: 640px) {
  .hero__inner { padding-bottom: 32svh; }
}
@media (max-height: 640px) and (max-width: 26em) {
  .hero__actions .lien-filet { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .hero__inner { padding-bottom: 10svh; }
  .scene::after {
    background: linear-gradient(180deg, rgb(var(--fond-rgb) / 0.85) 0%, rgb(var(--fond-rgb) / 0.7) 55%, rgb(var(--fond-rgb) / 0.45) 85%, var(--c-fond) 100%);
  }
}

/* Révélation orchestrée du hero quand le papillon se pose */
.hero__reveal {
  transition: opacity 1.3s var(--ease) calc(var(--d, 0) * 1ms), transform 1.5s var(--ease) calc(var(--d, 0) * 1ms);
}
.intro .hero__reveal { opacity: 0; transform: translate3d(0, 28px, 0); }
.intro .site-header { opacity: 0; transform: translate3d(0, -16px, 0); }

/* 9. SCÈNE ANIMÉE ---------------------------------------------------------- */
/* Repère commun : 1600 × 900 unités, recadré en « slice » ancré en bas.
   --s = taille d'une unité en pixels (container queries). */
.scene {
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--z-scene);
  height: 100svh;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
  background: var(--c-fond);
}
.scene::after { /* voile de lisibilité pour le texte du hero */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--fond-rgb) / 0.72) 0%, rgb(var(--fond-rgb) / 0.38) 38%, transparent 58%, transparent 86%, var(--c-fond) 100%);
  transition: opacity 1.8s var(--ease);
}
[data-theme="jour"] .scene::after {
  background:
    linear-gradient(180deg, rgb(var(--fond-rgb) / 0.8) 0%, rgb(var(--fond-rgb) / 0.55) 34%, rgb(var(--fond-rgb) / 0.1) 58%, transparent 70%, transparent 88%, var(--c-fond) 100%);
}
.intro .scene::after { opacity: 0; }
.scene__cam {
  --s: max(calc(100cqw / 1600), calc(100cqh / 900));
  --ox: calc((100cqw - 1600 * var(--s)) / 2);
  --oy: calc(100cqh - 900 * var(--s));
  position: absolute;
  inset: 0;
}
.couche {
  position: absolute;
  left: calc(var(--ox) + var(--x, 0) * var(--s));
  top: calc(var(--oy) + var(--y, 0) * var(--s));
  width: calc(var(--w, 1600) * var(--s));
  height: calc(var(--h, 900) * var(--s));
  transform: translate3d(calc(var(--tx, 0) * var(--s)), calc(var(--ty, 0) * var(--s)), 0);
}
.couche > svg { width: 100%; height: 100%; overflow: visible; }
.scene.is-animating .couche,
.scene.is-animating .papillon { will-change: transform, opacity; }

/* Ciels : fondu enchaîné entre la nuit et le jour */
.ciel { transition: opacity 1.4s var(--ease); }
.ciel--jour { opacity: 0; }
[data-theme="jour"] .ciel--jour { opacity: 1; }
[data-theme="jour"] .ciel--nuit { opacity: 0; }
.js-etoiles { transition: opacity 1.2s var(--ease); }
[data-theme="jour"] .js-etoiles { opacity: 0; }
.etoile--scintille { animation: scintille var(--dt, 4s) ease-in-out var(--dd, 0s) infinite alternate; }
@keyframes scintille { from { opacity: 0.1; } to { opacity: 0.85; } }
.nuage { animation: nuage 90s linear infinite alternate; }
.nuage--2 { animation-duration: 120s; animation-direction: alternate-reverse; }
.nuage--3 { animation-duration: 75s; }
@keyframes nuage { from { transform: translateX(-60px); } to { transform: translateX(80px); } }

/* Prairie : couleurs pilotées par le thème */
.sc-colline-1 { fill: var(--sc-colline-1); }
.sc-colline-2 { fill: var(--sc-colline-2); }
.sc-arbres { fill: var(--sc-arbres); }
.sc-herbe-a { fill: var(--sc-herbe-a); }
.sc-herbe-b { fill: var(--sc-herbe-b); }
.sc-feuille { fill: var(--sc-feuille); }
.sc-sol { fill: var(--sc-sol); }
.sc-tige { stroke: var(--sc-tige); }
.avant-plan { --sc-herbe-a: var(--sc-avant-a); --sc-herbe-b: var(--sc-avant-b); --sc-feuille: var(--sc-avant-a); --sc-tige: var(--sc-avant-b); }
/* La nuit, les fleurs sauvages perdent leurs couleurs ; la fleur dorée, elle, brille */
.fleurs-prairie, [data-couche="prairieAvant"] { transition: filter 1.4s var(--ease); }
[data-theme="nuit"] .fleurs-prairie { filter: brightness(0.46) saturate(0.6); }
[data-theme="nuit"] [data-couche="prairieAvant"] { filter: brightness(0.4) saturate(0.5); }
.fleurs-lointaines { transition: opacity 1.4s var(--ease); }
/* Perspective atmosphérique : les fleurs du fond sont un peu voilées par l'air */
.fleurs-loin { filter: saturate(0.78) brightness(1.04); opacity: 0.9; }
[data-theme="nuit"] .fleurs-loin { filter: none; opacity: 0.8; }
[data-theme="nuit"] .fleurs-lointaines { opacity: 0.4; }

/* Halo doré derrière la fleur */
.scene__halo {
  position: absolute;
  left: calc(var(--ox) + 340 * var(--s));
  top: calc(var(--oy) + 210 * var(--s));
  width: calc(920 * var(--s));
  height: calc(920 * var(--s));
}
.scene__halo > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sc-halo), rgb(var(--or-rgb) / 0.07) 38%, rgb(var(--or-rgb) / 0.02) 65%, transparent 82%);
  animation: halo 7s ease-in-out infinite alternate;
}
@keyframes halo {
  from { opacity: 0.7; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.04); }
}

/* La brise balance doucement la fleur… et le papillon posé dessus */
.brise {
  position: absolute;
  inset: 0;
  transform-origin: calc(var(--ox) + 800 * var(--s)) calc(var(--oy) + 905 * var(--s));
  animation: brise 6.5s ease-in-out infinite alternate;
}
@keyframes brise {
  from { transform: rotate(-0.8deg); }
  to { transform: rotate(1deg); }
}
.rosee { animation: rosee 5s ease-in-out infinite alternate; }
@keyframes rosee { from { opacity: 0.4; } to { opacity: 0.95; } }

/* Lucioles (nuit) / grains de pollen dans la lumière (jour) */
.lucioles { position: absolute; inset: 0; }
.luciole {
  position: absolute;
  left: calc(var(--ox) + var(--fx) * var(--s));
  top: calc(var(--oy) + var(--fy) * var(--s));
  width: calc(5 * var(--s));
  height: calc(5 * var(--s));
  border-radius: 50%;
  background: var(--sc-luciole);
  box-shadow: 0 0 calc(10 * var(--s)) calc(3 * var(--s)) var(--sc-luciole-lueur);
  animation: luciole-vol var(--dv, 9s) ease-in-out var(--dl, 0s) infinite alternate,
    luciole-lueur var(--dg, 3.5s) ease-in-out var(--dl, 0s) infinite alternate;
}
[data-theme="jour"] .luciole { width: calc(3.5 * var(--s)); height: calc(3.5 * var(--s)); }
@keyframes luciole-vol {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(var(--mx, 30) * var(--s)), calc(var(--my, -40) * var(--s)), 0); }
}
@keyframes luciole-lueur {
  from { opacity: 0.15; }
  to { opacity: 0.95; }
}
.scene.is-paused *, .scene.is-paused *::before { animation-play-state: paused !important; }

/* ---- Papillon doré en 3D ----------------------------------------------
   .papillon      : position dans la scène (--bx, --by), échelle (--bs)
   .papillon__3d  : orientation (--tilt : élévation du regard, --cap : cap,
                    --roll : roulis) — espace 3D partagé par les ailes
   .pap-aile      : battement autour de l'axe du corps (--wf avant, --wh arrière)
   .pap-face      : recto doré / verso champagne (deux faces réelles)       */
.papillon {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(200 * var(--s));
  height: calc(170 * var(--s));
  transform:
    translate3d(calc(var(--ox) + var(--bx, 800) * var(--s) - 50%), calc(var(--oy) + var(--by, 680) * var(--s) - 50%), 0)
    scale(var(--bs, 0.5));
  perspective: calc(1200 * var(--s));
  opacity: var(--bo, 1);
}
.papillon__3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--tilt, 50) * 1deg)) rotateZ(calc(var(--cap, 78) * 1deg)) rotateY(calc(var(--roll, 0) * 1deg));
}
.pap-aile {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
}
/* Aile antérieure et postérieure d'un même côté partagent un seul plan :
   plus aucune interpénétration (ni scintillement) quand les ailes bougent.
   Les charnières sont décalées de 3 unités de l'axe du corps pour que les
   ailes ne traversent jamais le plan du corps. --as : asymétrie en virage. */
.pap-aile--g { left: -1.5%; transform-origin: 100% 50%; transform: rotateY(calc((var(--wf, 80) + var(--as, 0)) * 1deg)); }
.pap-aile--d { left: 51.5%; transform-origin: 0 50%; transform: rotateY(calc((var(--wf, 80) - var(--as, 0)) * -1deg)); }
.pap-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pap-face--dessous { transform: rotateY(180deg); }
.pap-corps { position: absolute; top: 0; height: 100%; left: 40%; width: 20%; }
.pap-corps--dessus { transform: translateZ(1.5px); }
.pap-corps--profil { transform: rotateY(90deg); }
.papillon svg { width: 100%; height: 100%; overflow: visible; }
.pap-reflet { opacity: var(--sh, 0); }

/* Repos sans JavaScript : cycle simple et fluide. Avec JavaScript, un
   contrôleur prend le relais (classe is-vivant) et rend le repos imprévisible. */
.papillon.is-rest:not(.is-vivant) .pap-aile--d { animation: repos-d 11s ease-in-out infinite; }
.papillon.is-rest:not(.is-vivant) .pap-aile--g { animation: repos-g 11s ease-in-out infinite; }
@keyframes repos-d {
  0%, 22% { transform: rotateY(-80deg); }
  38%, 60% { transform: rotateY(-22deg); }
  78%, 100% { transform: rotateY(-80deg); }
}
@keyframes repos-g {
  0%, 22% { transform: rotateY(80deg); }
  38%, 60% { transform: rotateY(22deg); }
  78%, 100% { transform: rotateY(80deg); }
}


/* 10. CHARGEMENT ----------------------------------------------------------- */
html.intro, html.menu-open { overflow: hidden; }
.voile {
  position: fixed;
  inset: 0;
  z-index: var(--z-veil);
  background:
    radial-gradient(40% 40% at 50% 50%, rgb(var(--or-rgb) / 0.06), transparent 70%),
    var(--c-fond);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s;
}
.intro .voile, .intro-light .voile { opacity: 1; visibility: visible; transition: none; }
.chargeur {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro-ui);
  display: none;
  place-items: center;
  pointer-events: none;
}
.intro .chargeur, .intro-light .chargeur { display: grid; }
.chargeur__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chargeur__piste { fill: none; stroke: var(--trait); stroke-width: 1; }
.chargeur__arc {
  fill: none;
  stroke: var(--c-or);
  stroke-width: 1.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgb(var(--or-rgb) / 0.6));
}
.chargeur__pct {
  grid-area: 1 / 1;
  font: 300 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1 var(--f-serif);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--c-titre);
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}
.chargeur__pct::after { content: "%"; font-size: 0.55em; margin-left: 0.1em; color: var(--c-or); }
.chargeur__legende {
  grid-area: 1 / 1;
  transform: translateY(calc(var(--r, 46px) + 1.8rem));
  font: italic 400 var(--fs-base)/1 var(--f-serif);
  letter-spacing: 0.04em;
  color: var(--c-doux);
  transition: opacity 0.4s var(--ease);
}
.intro-ui { display: none; }
.intro .intro-ui { display: block; }
.intro-ui__passer {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + 0.75rem));
  z-index: var(--z-intro-ui);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: rgb(var(--fond-rgb) / 0.4);
  color: var(--c-texte);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  transition: border-color 0.3s, color 0.3s;
}
.intro-ui__passer:hover, .intro-ui__passer:focus-visible { border-color: var(--c-or); color: var(--c-titre); }

/* Halo qui suit le curseur (pointeurs fins uniquement, ajouté par JS) */
/* Halo du curseur : il n'apparaît qu'au survol du bouton « Prendre rendez-vous »
   de la rubrique Contact (pointeurs fins uniquement, ajouté par JS). */
.halo-curseur {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-glow);
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(236 205 130 / 0.22), rgb(var(--or-rgb) / 0.08) 55%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.6s var(--ease), scale 0.8s var(--ease);
}
.halo-curseur::after { /* anneau fin qui entoure la pointe du curseur */
  content: "";
  position: absolute;
  inset: calc(50% - 15px);
  border: 1px solid rgb(236 205 130 / 0.7);
  border-radius: 50%;
  animation: halo-anneau 1.8s var(--ease) infinite;
}
@keyframes halo-anneau {
  0% { transform: scale(0.55); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}
[data-theme="jour"] .halo-curseur { mix-blend-mode: normal; background: radial-gradient(closest-side, rgb(214 170 70 / 0.2), rgb(var(--or-rgb) / 0.06) 55%, transparent); }
[data-theme="jour"] .halo-curseur::after { border-color: rgb(158 118 32 / 0.6); }
.halo-curseur.is-on { opacity: 1; scale: 1; }

/* 11. SECTIONS PLEINE PAGE ------------------------------------------------- */
/* Chaque rubrique occupe au moins tout l'écran : un clic dans le menu
   l'affiche en entier, sans débord de la rubrique précédente. */
.section {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + env(safe-area-inset-top) + var(--sp-l)) var(--sp-l);
}
@media (min-height: 700px) {
  .section { padding-bottom: var(--sp-xl); }
}

/* 12. SAVOIR-FAIRE --------------------------------------------------------- */
.savoir { border-top: 1px solid var(--trait); }
.savoir__grille { display: grid; gap: var(--sp-l); }
.savoir__intro { display: grid; gap: var(--sp-m); align-content: start; }
.savoir__accroche { font: 400 var(--fs-lg)/1.55 var(--f-sans); color: var(--c-texte); max-width: 26em; }
.savoir__signature {
  font: italic 400 var(--fs-h3)/1.3 var(--f-serif);
  color: var(--c-titre);
  max-width: 18em;
  padding-left: 1.25rem;
  border-left: 1px solid var(--trait-fort);
}
.services { display: grid; border-top: 1px solid var(--trait); }
.service {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.35rem 1.25rem;
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-bottom: 1px solid var(--trait);
}
.service::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--g-or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease);
}
.service:hover::after { transform: scaleX(1); }
.service__icone {
  grid-row: span 2;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--c-or);
  transition: transform 0.8s var(--ease);
}
.service:hover .service__icone { transform: translateY(-3px) rotate(-4deg); }
.service__titre { font: 400 var(--fs-h3)/1.15 var(--f-serif); color: var(--c-titre); }
.service__texte { color: var(--c-doux); max-width: 38em; }
@media (min-width: 60em) {
  .savoir__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 7rem); }
  .savoir__intro { position: sticky; top: calc(var(--header-h) + 3rem); }
  .service { grid-template-columns: 3rem minmax(0, 16.5rem) minmax(0, 1fr); align-items: baseline; }
  .service__icone { grid-row: auto; align-self: start; }
}

/* 13. RÉALISATION ---------------------------------------------------------- */
.realisation {
  background:
    radial-gradient(70% 60% at 15% 40%, rgb(var(--or-rgb) / 0.06), transparent 70%),
    var(--c-fond-2);
  border-block: 1px solid var(--trait);
}
.projet { display: grid; gap: var(--sp-l); align-items: center; }
.projet__corps { display: grid; gap: var(--sp-m); justify-items: start; }
.projet__client { display: grid; gap: 0.4rem; }
.projet__nom { font: 300 var(--fs-h2)/1 var(--f-serif); color: var(--c-titre); }
.projet__metier { font: italic 400 var(--fs-lg)/1.3 var(--f-serif); color: var(--c-or); }
.projet__texte { max-width: 30em; }
.projet__etiquettes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.projet__etiquettes li {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--trait);
  border-radius: 99px;
  font-size: var(--fs-xs);
  color: var(--c-texte);
}
@media (min-width: 60em) {
  .projet { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6.5rem); }
}

/* Atelier : un papillon doré se pose sur le marteau (lien vers le site) */
.atelier {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--trait);
  box-shadow: var(--ombre-carte), 0 0 80px -20px rgb(var(--or-rgb) / 0.14);
  transition: border-color 0.6s var(--ease), transform 0.8s var(--ease), box-shadow 0.8s var(--ease);
}
.atelier:hover, .atelier:focus-visible { border-color: var(--trait-fort); transform: translateY(-4px); }
.atelier:focus-visible { outline-offset: 6px; }
.atelier__cadre { position: relative; aspect-ratio: 16 / 10; container-type: size; background: #1c140d; }
.atelier__cam {
  --s: calc(100cqw / 800);
  --ox: 0px;
  --oy: calc((100cqh - 500 * var(--s)) / 2);
  position: absolute;
  inset: 0;
}
.atelier__decor { position: absolute; inset: 0; width: 100%; height: 100%; }
.atelier__rai { animation: rai 9s ease-in-out infinite alternate; }
@keyframes rai { from { opacity: 0.8; } to { opacity: 1; } }
/* Poussières en suspension dans le rai de lumière */
.atelier__poussieres { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.atelier__poussieres i {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(2.2 * var(--s));
  height: calc(2.2 * var(--s));
  border-radius: 50%;
  background: #fff1c8;
  box-shadow: 0 0 calc(4 * var(--s)) rgb(255 225 150 / 0.8);
  opacity: 0;
  animation: poussiere var(--t, 10s) ease-in-out var(--d, 0s) infinite;
}
@keyframes poussiere {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  20% { opacity: 0.7; }
  80% { opacity: 0.45; }
  100% { opacity: 0; transform: translate3d(calc(26 * var(--s)), calc(-34 * var(--s)), 0); }
}
/* Ombre portée du papillon sur le manche */
.atelier__ombre-papillon {
  position: absolute;
  left: calc(var(--ox) + 494 * var(--s));
  top: calc(var(--oy) + 291 * var(--s));
  width: calc(46 * var(--s));
  height: calc(9 * var(--s));
  margin: calc(-4.5 * var(--s)) 0 0 calc(-23 * var(--s));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(20 10 2 / 0.55), rgb(20 10 2 / 0));
  opacity: var(--om, 1);
  transform: scale(var(--oe, 1));
  pointer-events: none;
}
/* Pose du papillon sur le marteau (valeurs reprises par le script) */
.papillon--marteau { --bx: 486; --by: 284; --bs: 0.48; --tilt: 50; --cap: 95; }
.atelier__lien {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0 0.9rem;
  border-radius: 99px;
  background: rgb(20 14 8 / 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgb(255 236 190 / 0.25);
  color: #f6ecd6;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.atelier__lien svg { width: 0.9rem; height: 0.9rem; transition: transform 0.5s var(--ease); }
.atelier:hover .atelier__lien, .atelier:focus-visible .atelier__lien { background: rgb(20 14 8 / 0.7); border-color: rgb(var(--or-rgb) / 0.7); }
.atelier:hover .atelier__lien svg { transform: translate(2px, -2px); }

/* 14. CONTACT -------------------------------------------------------------- */
.contact {
  overflow: hidden;
  text-align: center;
  background: radial-gradient(55% 55% at 50% 45%, rgb(var(--or-rgb) / 0.08), transparent 75%);
}
.contact__inner { position: relative; isolation: isolate; display: grid; justify-items: center; gap: var(--sp-m); }
/* Papillon de fond : centré sur le contenu et droit au repos ; il s'incline
   seulement quand le curseur survole « Prendre rendez-vous ». */
.contact__deco {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(60rem, 130vw);
  aspect-ratio: 200 / 170;
  transform: translate(-50%, -50%);
  opacity: 0.05;
  pointer-events: none;
  filter: saturate(0.8);
  transition: transform 1.2s var(--ease), opacity 1.2s var(--ease);
}
[data-theme="jour"] .contact__deco { opacity: 0.08; }
.contact.is-rdv .contact__deco { transform: translate(-50%, -50%) rotate(-9deg) scale(1.03); opacity: 0.08; }
[data-theme="jour"] .contact.is-rdv .contact__deco { opacity: 0.12; }
.contact .lead { margin-inline: auto; }
.contact__tarifs {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.4rem;
  border: 1px solid var(--trait);
  font-size: var(--fs-sm);
  color: var(--c-texte);
}
.contact__tarifs svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--c-or); }
.contact__email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  color: var(--c-doux);
  font-size: var(--fs-sm);
}
.contact__copier {
  min-height: 44px;
  padding: 0 0.5rem;
  color: var(--c-or);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.contact__copier:hover { color: var(--c-or-clair); }
.contact__zone { max-width: 30em; font-size: var(--fs-sm); color: var(--c-doux); }

/* 15. PIED DE PAGE --------------------------------------------------------- */
/* Une ligne de marque, puis trois colonnes dont les titres partagent la même
   ligne de base et dont le contenu démarre à la même hauteur. */
.pied {
  padding-top: var(--sp-l);
  padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1.25rem));
  border-top: 1px solid var(--trait);
  background: var(--c-fond-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-doux);
}
.pied__marque {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.1rem;
  padding-bottom: var(--sp-m);
  border-bottom: 1px solid var(--trait);
}
.pied__nom { font: 400 1.9rem/1.1 var(--f-serif); letter-spacing: 0.02em; color: var(--c-titre); }
.pied__signature { font: italic 400 1.25rem/1.2 var(--f-serif); color: var(--c-or); }
.pied__accroche { flex-basis: 100%; }
.pied__grille { display: grid; gap: var(--sp-m); padding-block: var(--sp-m) var(--sp-l); }
.pied__colonne { display: grid; align-content: start; gap: 0.7rem; }
.pied__titre { font: 600 var(--fs-xs)/1.2 var(--f-sans); letter-spacing: 0.1em; color: var(--c-titre); }
.pied a { transition: color 0.3s; }
.pied a:hover { color: var(--c-titre); }
/* Zones tactiles de 44 px, recentrées pour que la première ligne de texte
   tombe exactement à la hauteur des paragraphes voisins. */
.pied__liens { display: grid; justify-items: start; margin-block: calc((1.7em - 44px) / 2); }
.pied__liens a, .pied__liens button { display: inline-flex; align-items: center; min-height: 44px; text-align: left; line-height: 1.7; }
.pied__liens button:hover { color: var(--c-titre); }
@media (hover: hover) and (pointer: fine) {
  .pied__liens { margin-block: 0; }
  .pied__liens a, .pied__liens button { min-height: 0; }
}
.pied__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: var(--sp-m);
  border-top: 1px solid var(--trait);
  font-size: var(--fs-xs);
  line-height: 1.8;
}
@media (min-width: 48em) {
  .pied__accroche { flex-basis: auto; margin-left: auto; }
  .pied__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 16. PAGE MENTIONS LÉGALES ------------------------------------------------ */
.legal { padding-top: calc(var(--header-h) + env(safe-area-inset-top) + var(--sp-l)); padding-bottom: var(--sp-xl); }
.legal__entete { display: grid; gap: var(--sp-s); padding-bottom: var(--sp-l); border-bottom: 1px solid var(--trait); }
.legal__corps { display: grid; gap: var(--sp-l); max-width: 46rem; padding-top: var(--sp-l); }
.legal h2 { font: 400 var(--fs-h3)/1.2 var(--f-serif); color: var(--c-titre); margin-bottom: 0.9rem; }
.legal p + p, .legal dl + p { margin-top: 0.8rem; }
.legal dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem 1.5rem; }
.legal dt { color: var(--c-titre); font-weight: 500; }
.legal dd { margin: 0 0 0.6rem; }
.legal a:not(.btn) { color: var(--c-or); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.a-completer { color: var(--c-or-clair); font-style: italic; }
@media (min-width: 40em) {
  .legal dl { grid-template-columns: 14rem minmax(0, 1fr); }
  .legal dd { margin: 0; }
  .legal dt, .legal dd { padding-block: 0.35rem; border-bottom: 1px solid var(--trait-leger); }
}

/* 17. APPARITIONS AU SCROLL ------------------------------------------------ */
.js .apparition {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 1.2s var(--ease), transform 1.4s var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.js .apparition.is-in { opacity: 1; transform: none; }
/* Téléphone : déplacement plus court, animation plus vive et sans délai,
   pour que le contenu soit déjà là quand il entre à l'écran. */
@media (max-width: 59.99em) {
  .js .apparition {
    transform: translate3d(0, 16px, 0);
    transition-duration: 0.7s, 0.8s;
    transition-delay: 0s;
  }
}

/* 18. TRANSITION JOUR/NUIT ------------------------------------------------- */
/* Navigateurs récents : le nouveau ciel se dévoile en cercle depuis le bouton */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* Autres navigateurs : fondu des couleurs */
.theme-fondu, .theme-fondu *, .theme-fondu *::before, .theme-fondu *::after {
  transition-property: background-color, color, border-color, fill, stroke, box-shadow !important;
  transition-duration: 0.9s !important;
  transition-timing-function: var(--ease) !important;
}

/* 19. MOUVEMENT RÉDUIT ----------------------------------------------------- */
.reduce-motion { scroll-behavior: auto; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
}
.reduce-motion .voile { transition-duration: 0.6s !important; }
.reduce-motion .apparition, .reduce-motion .hero__reveal { transform: none !important; }
.reduce-motion .halo-curseur { display: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .no-js *, .no-js *::before, .no-js *::after { animation: none !important; transition: none !important; }
}

/* Mode contraste forcé (Windows) */
@media (forced-colors: active) {
  .titre-2__ligne--or { color: CanvasText; background: none; }
  .btn { border: 1px solid ButtonText; }
}