:root {
  --lait: #f8f1e8;
  --lin: #eef0e6;
  --sauge: #63735c;
  --sauge-pale: #dfe5d5;
  --mousse: #a7b897;
  --foret: #36432f;
  --rose: #e7b0a8;
  --encre: #3a2e2a;
  --chambre: #201a17;
  --script: "Sacramento", cursive;
  --serif: "Literata", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
body {
  margin: 0;
  background: var(--lait);
  color: var(--encre);
  font: 400 1.0625rem/1.7 var(--serif);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sauge); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-weight: 400; margin: 0; }
.script { font-family: var(--script); line-height: 1; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--lait); padding: .5rem 1rem; }

/* Branche de feuillage */
.branche { display: block; width: 13rem; height: 4.2rem; color: var(--mousse); }
/* un SVG coupe à son cadre par défaut : les feuilles du bout et le balancement en dépassent */
.branche, .plante { overflow: visible; }

.sous-titre { margin: -1.5rem auto 2.5rem; width: 9rem; height: 2.9rem; }
.seances .sous-titre { margin-left: 0; }

/* Branches et plantes qui poussent (le script recopie le symbole dans chaque ornement) */
:is(.branche, .plante) .tige { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease-out; }
:is(.branche, .plante) .f { transform: scale(0); transform-box: fill-box; transform-origin: 0 50%; transition: transform .7s cubic-bezier(.3, 1.6, .5, 1) calc(.3s + var(--i) * .14s); }
.plante .f.g { transform-origin: 100% 50%; }
.plante .bouton { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .5s ease-out calc(.9s + var(--i) * .08s); }
.plante .fleur-in { transform: scale(0) rotate(-120deg); transform-box: fill-box; transform-origin: center; transition: transform 1.1s cubic-bezier(.3, 1.4, .5, 1) calc(1.3s + var(--i) * .25s); }
:is(.branche, .plante).pousse .tige { stroke-dashoffset: 0; }
:is(.branche, .plante).pousse :is(.f, .bouton, .fleur-in) { transform: none; }
.plante.pousse .balance { transform-box: fill-box; transform-origin: 50% 100%; animation: balance 5s ease-in-out 3s infinite alternate; }
@keyframes balance { from { transform: rotate(-2deg); } to { transform: rotate(2.5deg); } }

/* Où poussent les plantes */
main { overflow-x: clip; }
.plante { position: absolute; bottom: 0; z-index: 0; height: auto; pointer-events: none; color: var(--mousse); }
.hero-plante { width: clamp(4rem, 8vw, 8rem); left: 1vw; }
.apropos { position: relative; }
.apropos-plante { width: clamp(5rem, 9vw, 9rem); right: -7rem; }
.seances { position: relative; }
.seances-plante { width: clamp(5rem, 8vw, 8rem); left: -6rem; }
.avis-plante { width: clamp(5rem, 9vw, 9rem); right: 1vw; transform: scaleX(-1); color: var(--sauge); }
.contact-gauche-plante { width: clamp(5rem, 9vw, 9rem); left: 8vw; }
.contact-droite-plante { width: clamp(4.5rem, 7vw, 7rem); right: 9vw; }
@media (max-width: 1100px) { .apropos-plante, .seances-plante { display: none; } }
@media (max-width: 760px) {
  .hero-plante { display: none; }
  .avis-plante { width: 4.5rem; }
  .contact-gauche-plante { width: 5rem; left: 0; }
  .contact-droite-plante { width: 4rem; right: 0; }
}

/* Feuilles qui tombent ou s'envolent */
.feuille-vol { position: absolute; z-index: 1; top: 0; width: calc(1.6rem * var(--t)); pointer-events: none; animation: tombe var(--d) linear var(--delai) infinite; }
.feuille-vol.envole { animation-name: envole; }
.feuille-vol svg { display: block; width: 100%; fill: currentColor; animation: tourne calc(var(--d) / 3) ease-in-out var(--delai) infinite alternate; }
@keyframes tombe { from { top: -5%; transform: translateX(0); opacity: 0; } 10%, 90% { opacity: .9; } to { top: 100%; transform: translateX(var(--dx)); opacity: 0; } }
@keyframes envole { from { top: 100%; transform: translateX(0); opacity: 0; } 15%, 85% { opacity: .8; } to { top: -5%; transform: translateX(var(--dx)); opacity: 0; } }
@keyframes tourne { from { transform: rotate(-40deg); } to { transform: rotate(70deg); } }

/* Navigation : une capsule flottante ; sur mobile, un menu qui se déplie */
.nav {
  position: fixed; top: .75rem; left: 50%; z-index: 50; translate: -50% 0;
  width: min(72rem, calc(100% - 1.5rem));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .45rem .5rem .45rem 1.4rem; border-radius: 99px;
  background: color-mix(in srgb, var(--lait) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgb(255 255 255 / .6);
  box-shadow: 0 10px 30px -18px rgb(54 67 47 / .45);
  transition: opacity .4s, transform .4s cubic-bezier(.23, 1, .32, 1);
}
.nav.cache { opacity: 0; transform: translateY(-140%); pointer-events: none; }
.nav-logo { font: 1.9rem/1 var(--script); text-decoration: none; color: var(--foret); }
.nav nav { display: flex; align-items: center; gap: .15rem; font-size: .93rem; }
.nav nav a { text-decoration: none; padding: .45rem .85rem; border-radius: 99px; color: var(--encre); transition: background .2s, color .2s; }
.nav nav a:hover { background: var(--sauge-pale); }
.nav nav a.actif { background: var(--sauge-pale); color: var(--foret); }
.nav nav .nav-cta { margin-left: .4rem; background: var(--foret); color: var(--lait); font-weight: 600; padding-inline: 1.15rem; }
.nav nav .nav-cta:hover, .nav nav .nav-cta.actif { background: var(--sauge); color: var(--lait); }
.nav-menu { display: none; }

@media (max-width: 860px) {
  html { scroll-padding-top: 5rem; }
  .nav { border-radius: 1.6rem; flex-wrap: wrap; padding: .4rem .45rem .4rem 1.1rem; }
  .nav-logo { font-size: 1.7rem; }
  .nav-menu {
    display: grid; place-content: center; gap: 5px; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%;
    background: var(--foret); cursor: pointer;
  }
  .nav-menu span { display: block; width: 1.1rem; height: 2px; border-radius: 2px; background: var(--lait); transition: transform .25s cubic-bezier(.23, 1, .32, 1); }
  .nav-menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav nav {
    width: 100%; flex-direction: column; align-items: stretch; gap: .1rem; font-size: 1.05rem;
    padding: .5rem .2rem .6rem; display: none;
  }
  .nav.ouvert nav { display: flex; animation: menu .22s cubic-bezier(.23, 1, .32, 1); }
  .nav nav a { padding: .7rem 1rem; }
  .nav nav .nav-cta { margin: .4rem 0 0; text-align: center; }
}
@keyframes menu { from { opacity: 0; transform: translateY(-6px); } }

/* Entrée : présentation, objectif, univers */
.entree { position: relative; }
.hero, .univers { min-height: 100vh; min-height: 100svh; }
.lens { display: none; }

.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center; gap: clamp(1.5rem, 5vw, 5rem);
  padding: 6rem clamp(1rem, 6vw, 6rem) 3rem;
  background: var(--lait);
}
.hero-branche { position: absolute; width: 26rem; height: 8.3rem; right: -3rem; top: 2.5rem; transform: rotate(-12deg); opacity: .8; }
.hero-photo { margin: 0; justify-self: end; max-width: 26rem; }
.hero-photo img { width: 100%; border-radius: 12rem 12rem 1.5rem 1.5rem; }
.hero-hello { margin: 0; font-style: italic; color: var(--sauge); }
.hero h1 .script { display: block; font-size: clamp(4.5rem, 11vw, 9.5rem); margin: .1em 0 0 -.05em; }
.hero-sub { display: block; font-size: 1.05rem; letter-spacing: .08em; color: var(--sauge); margin-top: .4rem; }
.hero-tagline { max-width: 26ch; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; margin: 1.5rem 0 2.5rem; }
.hero-cue { margin: 0; font-size: .9rem; color: var(--sauge); }
.hero-cue::after { content: ""; display: block; width: 1px; height: 3rem; margin: .75rem 0 0 1rem; background: currentColor; animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

@media (max-width: 760px) {
  /* tout tient dans un écran : le texte d'abord, puis la photo dans laquelle on plonge */
  .hero { grid-template-columns: 1fr; align-content: center; gap: 1.25rem; padding: 3rem 1.5rem 1.5rem; }
  .hero-text { order: -1; }
  .hero h1 .script { font-size: clamp(3.2rem, 15vw, 4.2rem); }
  .hero-tagline { font-size: 1.1rem; margin: .9rem 0 0; }
  .hero-cue { display: none; }
  .hero-photo { justify-self: center; }
  .hero-photo img { width: auto; max-height: 40svh; border-radius: 8rem 8rem 1.25rem 1.25rem; }
  .hero-branche { width: 16rem; height: 5rem; right: -4rem; top: 1rem; }
}

.univers {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  background: var(--lin);
}
.univers-text { position: relative; z-index: 2; text-align: center; max-width: 28rem; padding: 2rem 1.5rem; background: radial-gradient(closest-side, var(--lin) 60%, transparent); }
.univers-text h2 { font-size: clamp(3.5rem, 8vw, 6.5rem); }
.univers-text p { font-size: 1.15rem; margin: 1rem auto 0; max-width: 32ch; }
/* hors de la grille, sinon le conteneur des photos prend une rangée et décale le texte vers le bas */
.univers-photos { position: absolute; inset: 0; }
.univers-photos img { position: absolute; object-fit: cover; border-radius: 1rem; box-shadow: 0 1.5rem 3rem -1.5rem rgba(54, 67, 47, .5); }
.u1 { width: 24vw; aspect-ratio: 3/2; left: 3vw; top: 9vh; }
.u2 { width: 11vw; aspect-ratio: 2/3; left: 22vw; top: 4vh; }
.u3 { width: 15vw; aspect-ratio: 2/3; right: 5vw; top: 7vh; }
.u4 { width: 14vw; aspect-ratio: 3/4; left: 4vw; bottom: 6vh; }
.u5 { width: 12vw; aspect-ratio: 2/3; left: 20vw; bottom: 3vh; }
.u6 { width: 20vw; aspect-ratio: 3/2; right: 7vw; bottom: 5vh; }
.u7 { width: 12vw; aspect-ratio: 4/5; right: 22vw; top: 6vh; }
@media (max-width: 760px) {
  /* deux photos en haut, deux en bas, dans les marges ; elles rétrécissent sur les écrans courts
     et restent au-dessus de la barre des navigateurs intégrés (WhatsApp, Messages…) */
  .u1 { width: min(46vw, 26svh); left: 5vw; top: 8%; }
  .u2 { width: min(30vw, 13svh); left: auto; right: 5vw; top: 5%; }
  .u4 { width: min(30vw, 13svh); left: 5vw; bottom: calc(9% + env(safe-area-inset-bottom)); }
  .u6 { width: min(46vw, 26svh); right: 5vw; bottom: calc(12% + env(safe-area-inset-bottom)); }
  .u3, .u5, .u7 { display: none; }
  .univers-text h2 { font-size: 3.2rem; }
  .univers-text p { font-size: 1.05rem; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .univers-text h2 { font-size: 2.6rem; }
  .univers-text p { font-size: .95rem; margin-top: .6rem; }
}

/* Mode animé : les trois couches empilées dans un écran épinglé */
.entree.anim { height: 100vh; height: 100svh; overflow: hidden; }
/* min-height à 0 : chaque couche prend la taille exacte de l'écran épinglé. Avec 100svh, les navigateurs
   intégrés (Instagram…) la rendaient plus haute que l'écran, et le bas de l'univers était coupé */
.entree.anim > * { position: absolute; inset: 0; min-height: 0; }
.entree.anim .univers { z-index: 1; }
.entree.anim .lens { display: block; z-index: 2; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.entree.anim .hero { z-index: 3; }
.entree.anim .hero-photo img { will-change: transform; }
.lens-mask { fill: var(--chambre); }
.blade { fill: url(#blade); stroke: #6b5c52; stroke-opacity: .5; stroke-width: 2; }
.engraving { font: 400 19px var(--serif); letter-spacing: 3px; fill: #a8968a; }

/* Sections */
main > section { padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 6vw, 6rem); }
main h2.script { font-size: clamp(3.2rem, 7vw, 5.5rem); margin-bottom: 2.5rem; }

.apropos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; max-width: 72rem; margin: 0 auto; }
.apropos-photos { position: relative; padding: 0 3rem 4rem 0; }
.apropos-grande { border-radius: 1.5rem; }
.apropos-petite { position: absolute; width: 45%; right: 0; bottom: 0; border-radius: 1rem; border: .4rem solid var(--lait); }
.credit { position: absolute; left: 0; bottom: .5rem; max-width: 50%; line-height: 1.4; margin: 0; font-size: .8rem; font-style: italic; color: var(--sauge); }
.apropos-text { max-width: 36rem; }
.apropos-text h2.script { margin-bottom: 1.5rem; }
.apropos-text h3 { font-weight: 600; font-size: 1.1rem; margin-top: 2rem; }
.apropos-text p { margin: 0 0 1rem; }
.apropos-text .branche { margin-top: 1.5rem; }
@media (max-width: 760px) { .apropos { grid-template-columns: 1fr; } .apropos-photos { max-width: 22rem; } }

/* Bandeau nature */
main > section.dehors { position: relative; padding: 0; min-height: 85vh; display: grid; align-items: end; color: var(--lait); overflow: hidden; }
.dehors img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dehors::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(31, 40, 27, .85), rgba(31, 40, 27, .1) 60%); }
.dehors-text { position: relative; z-index: 2; padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 6vw, 6rem); max-width: 44rem; }
.dehors-text h2.script { margin-bottom: 1rem; }
.dehors-text p { margin: 0; font-size: 1.15rem; }
/* Mobile : la photo garde son cadrage paysage (les deux fillettes restent visibles), le texte passe dessous */
@media (max-width: 760px) {
  main > section.dehors { display: block; min-height: 0; background: var(--foret); }
  .dehors img { position: static; height: auto; }
  .dehors::after { display: none; }
}

/* Séances */
.seances { max-width: 76rem; margin: 0 auto; }
.seances-intro { margin: -1.5rem 0 2rem; font-style: italic; max-width: 40ch; }
.seance {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--sauge-pale);
}
.seance:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.seance:nth-of-type(even) .seance-text { order: 2; }
.seance h3 { font: clamp(2.8rem, 5vw, 3.6rem)/1 var(--script); }
.seance p { margin: .6rem 0 0; max-width: 46ch; }
.seance .accroche { font-style: italic; color: var(--sauge); }
.seance .prix {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem;
  padding: .35rem 1.1rem .35rem .8rem; border-radius: 99px;
  background: var(--sauge-pale); color: var(--foret); font-size: 1.15rem; font-style: italic;
}
.seance .prix::before { content: ""; width: 1.1rem; height: .7rem; background: var(--sauge); border-radius: 0 100% 0 100%; transform: rotate(-20deg); }
.seance-photos { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .75rem; aspect-ratio: 5/4; }
.seance-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: .75rem; }
.seance-photos img:first-child { grid-row: span 2; }
@media (max-width: 760px) {
  .seance { grid-template-columns: 1fr; }
  .seance:nth-of-type(even) { grid-template-columns: 1fr; }
  .seance:nth-of-type(even) .seance-text { order: 0; }
}

/* Réalisations */
.realisations { background: var(--sauge-pale); }
.realisations h2 { text-align: center; }
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: -1rem 0 2.5rem; }
.filtres button {
  font: inherit; font-size: .95rem; cursor: pointer;
  padding: .45rem 1.1rem; border-radius: 99px;
  border: 1px solid var(--sauge); background: transparent; color: var(--foret);
}
.filtres button[aria-pressed="true"] { background: var(--foret); border-color: var(--foret); color: var(--lait); }
/* Grille sans trou : paysage = 1 case, portrait = 2 cases en hauteur, « dense » comble les vides */
.galerie {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1rem;
  grid-auto-rows: calc((min(88vw, 76rem) - 2rem) / 3 * .66);
  max-width: 76rem; margin: 0 auto;
}
.galerie img { width: 100%; height: 100%; object-fit: cover; border-radius: .75rem; }
.galerie img.p { grid-row: span 2; }
@media (max-width: 760px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; grid-auto-rows: calc((100vw - 2.6rem) / 2 * .66); }
}

/* Avis */
.avis { position: relative; background: var(--foret); color: var(--lait); overflow: hidden; }
.avis h2 { text-align: center; }
.avis-branche { position: absolute; width: 22rem; height: 7rem; left: -4rem; top: 2rem; color: var(--sauge); transform: rotate(8deg); }
@media (max-width: 760px) { .avis-branche { display: none; } }
/* les feuilles qui tombent passent derrière le texte */
.avis h2 { position: relative; z-index: 2; }
.avis-liste { position: relative; z-index: 2; columns: 3 18rem; column-gap: 2.5rem; max-width: 72rem; margin: 0 auto; }
.avis blockquote { margin: 0 0 2.5rem; break-inside: avoid; }
.avis blockquote p { margin: 0; font-size: 1.05rem; }
.avis blockquote p::before { content: "« "; }
.avis blockquote p::after { content: " »"; }
.avis footer { margin-top: .6rem; color: var(--rose); font-style: italic; font-size: .95rem; }

.contact { position: relative; overflow: hidden; text-align: center; }
.contact-gauche, .contact-droite { position: absolute; width: 20rem; height: 6.4rem; top: 50%; }
.contact-gauche { left: -5rem; transform: rotate(-8deg); }
.contact-droite { right: -5rem; transform: scaleX(-1) rotate(-8deg); }
@media (max-width: 760px) { .contact-gauche, .contact-droite { width: 11rem; height: 3.5rem; top: 1rem; } }
.contact p { margin: -1rem 0 2rem; }
.bouton {
  display: inline-block; padding: .9rem 1.8rem; border-radius: 99px;
  background: var(--foret); color: var(--lait); text-decoration: none; font-weight: 600;
  transition: background .2s;
}
.bouton:hover { background: var(--sauge); }

.bouton { font: inherit; font-weight: 600; border: 0; cursor: pointer; }
.bouton-clair { background: transparent; color: var(--foret); border: 1px solid var(--sauge); }
.bouton-clair:hover { background: var(--sauge-pale); }

/* FAQ */
.faq { background: var(--lin); }
.faq h2 { text-align: center; }
.faq-liste { max-width: 46rem; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--sauge-pale); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-weight: 600; color: var(--foret);
}
.faq summary::-webkit-details-marker { display: none; }
/* petite feuille qui pivote quand la question est ouverte */
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; width: 1.1rem; height: .7rem; margin-top: -.35rem;
  background: var(--sauge); border-radius: 0 100% 0 100%; transform: rotate(-20deg); transition: transform .25s cubic-bezier(.23, 1, .32, 1);
}
.faq details[open] summary::after { transform: rotate(70deg); }
.faq details p { margin: 0 0 1.25rem; }

/* Formulaire de contact : une carte douce, des champs sans bordure, la séance en pastilles */
.formulaire {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem;
  max-width: 42rem; margin: 0 auto; text-align: left;
  padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 1.75rem; background: var(--lin);
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 20px 50px -30px rgb(54 67 47 / .35);
}
.formulaire > label { display: flex; flex-wrap: wrap; align-content: start; gap: .35rem; font-size: .9rem; font-style: italic; color: var(--sauge); }
.formulaire .facultatif { opacity: .75; }
.formulaire input:not([type="radio"]), .formulaire textarea {
  font: inherit; font-style: normal; color: var(--encre); width: 100%;
  padding: .85rem 1.1rem; border: 1px solid transparent; border-radius: 1rem; background: var(--lait);
  transition: border-color .2s, box-shadow .2s;
}
.formulaire textarea { resize: vertical; min-height: 8rem; }
.formulaire input::placeholder, .formulaire textarea::placeholder { color: #a39a90; }
.formulaire input:not([type="radio"]):focus, .formulaire textarea:focus {
  outline: none; border-color: var(--mousse); box-shadow: 0 0 0 4px var(--sauge-pale);
}
.choix { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.choix legend { padding: 0; margin-bottom: .6rem; font-size: .9rem; font-style: italic; color: var(--sauge); }
.choix label { position: relative; cursor: pointer; }
.choix input { position: absolute; opacity: 0; }
.choix span {
  display: block; padding: .5rem 1rem; border-radius: 99px; font-size: .92rem;
  background: var(--lait); color: var(--foret); border: 1px solid var(--sauge-pale);
  transition: background .2s, color .2s, border-color .2s;
}
.choix input:checked + span { background: var(--foret); border-color: var(--foret); color: var(--lait); }
.choix input:focus-visible + span { outline: 2px solid var(--sauge); outline-offset: 2px; }
.formulaire .large { grid-column: 1 / -1; }
.formulaire .bouton { justify-self: stretch; padding: 1rem; font-size: 1.05rem; }
.formulaire .bouton:disabled { opacity: .6; cursor: wait; }
.contact .formulaire p { margin: 0; }
.formulaire .rgpd { font-size: .82rem; color: var(--sauge); text-align: center; }
.formulaire .etat { text-align: center; font-style: italic; color: var(--foret); }
.formulaire .etat:empty { display: none; }
/* Envoi réussi : les champs laissent place à un cercle qui se trace, une coche, puis « Merci ! » */
.formulaire .merci { display: none; }
.formulaire.envoye > :not(.merci, .etat) { display: none; }
.formulaire.envoye .etat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.formulaire.envoye .merci { display: grid; justify-items: center; gap: .6rem; padding: 1.5rem 0; text-align: center; color: var(--foret); animation: merci-in .5s ease-out both; }
.merci svg { width: 4.5rem; fill: none; stroke: var(--sauge); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.merci circle, .merci path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace .6s ease-out .15s forwards; }
.merci path { animation-duration: .35s; animation-delay: .7s; }
.merci .script { font-family: var(--script); font-size: 2.8rem; line-height: 1; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes merci-in { from { opacity: 0; transform: translateY(.5rem); } }
.piege { position: absolute; left: -9999px; }
@media (max-width: 760px) { .formulaire { grid-template-columns: 1fr; border-radius: 1.25rem; } }
.contact .ou { margin: 2rem 0 .75rem; font-style: italic; color: var(--sauge); }
@media (max-width: 760px) { .formulaire { grid-template-columns: 1fr; } }

/* Visionneuse */
.galerie img { cursor: zoom-in; }
.visionneuse {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; display: grid; place-items: center;
  opacity: 0; transform: scale(.96);
  transition: opacity .18s ease-in, transform .18s ease-in, overlay .18s allow-discrete, display .18s allow-discrete;
}
.visionneuse:not([open]) { display: none; }
.visionneuse[open] { opacity: 1; transform: none; transition-duration: .25s; transition-timing-function: cubic-bezier(.23, 1, .32, 1); }
@starting-style { .visionneuse[open] { opacity: 0; transform: scale(.96); } }
.visionneuse::backdrop { background: rgb(32 26 23 / .92); }
.visionneuse img { max-width: 92vw; max-height: 88dvh; width: auto; height: auto; border-radius: .75rem; }
.visionneuse button {
  position: absolute; width: 3rem; height: 3rem; border-radius: 50%; border: 0; cursor: pointer;
  background: rgb(248 241 232 / .15); color: var(--lait); font: 2rem/1 var(--serif);
}
.visionneuse button:hover { background: rgb(248 241 232 / .3); }
.v-fermer { top: 1rem; right: 1rem; }
.v-prec { left: 1rem; top: 50%; translate: 0 -50%; }
.v-suiv { right: 1rem; top: 50%; translate: 0 -50%; }
@media (max-width: 760px) { .v-prec, .v-suiv { top: auto; bottom: 1.5rem; translate: none; } }

/* Pages légales */
.page-legale { max-width: 46rem; margin: 0 auto; padding: 3rem clamp(1rem, 6vw, 2rem) 5rem; }
.page-legale .retour { display: inline-block; margin-bottom: 2rem; color: var(--sauge); }
.page-legale h1 { font: clamp(3rem, 8vw, 4.5rem)/1 var(--script); margin-bottom: 2rem; }
.page-legale h2 { font-weight: 600; font-size: 1.15rem; color: var(--foret); margin: 2.25rem 0 .5rem; }
.page-legale p, .page-legale ul { margin: 0 0 1rem; }

.pied { padding: 2rem clamp(1rem, 6vw, 6rem); font-size: .85rem; color: var(--sauge); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--sauge-pale); }
.pied p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-cue::after { animation: none; }
  .feuille-vol { display: none; }
  .nav.ouvert nav { animation: none; }
  .formulaire.envoye .merci, .merci circle, .merci path { animation: none; stroke-dashoffset: 0; }
  .visionneuse, .visionneuse[open] { transform: none; }
  @starting-style { .visionneuse[open] { transform: none; } }
}