/* ══════════════════════════════════════════════════════════════════════════
   Wela Art Experience — feuille de style
   Charte : crème #F4E9D8 · océan #7BBAC9 · sauge #A8B89A · corail #E68A7A ·
   cacao #5D4E46. Titres : Adigiana Toybox (si le fichier est ajouté, voir
   LISEZMOI.md), sinon Grandstander. Touches manuscrites : Mansalva.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --papier: #FDF8F2;
  --sable: #F4E9D8;
  --sable-fonce: #EADCC5;
  --ocean: #7BBAC9;
  --ocean-clair: #D4ECF1;
  --sauge: #A8B89A;
  --sauge-clair: #E3EADB;
  --corail: #E68A7A;
  --corail-clair: #F8DCD5;
  --corail-texte: #B65746; /* le corail assombri : lisible en texte sur crème */
  --cacao: #5D4E46;
  --encre: #3E332D;
  --blanc: #FFFFFF;
  --rouge-erreur: #A33A2B;

  --police-titre: "Adigiana Toybox", "Grandstander", "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --police-script: "Mansalva", "Bradley Hand", "Segoe Print", cursive;
  --police-texte: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --gouttiere: clamp(16px, 4vw, 40px);
  --largeur: 1180px;
  --rayon: 28px;
  --ressort: cubic-bezier(.34, 1.56, .64, 1);
  --doux: cubic-bezier(.25, .8, .25, 1);
  --pinceau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 14 C60 6 120 18 180 10 S270 8 296 12 L294 20 C240 22 160 16 100 21 S20 22 6 20 Z'/%3E%3C/svg%3E");
  --curseur-pinceau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M24 2 L30 8 L16 22 L10 16 Z' fill='%235D4E46'/%3E%3Cpath d='M10 16 L16 22 L13 25 L7 19 Z' fill='%23A8B89A'/%3E%3Cpath d='M7 19 L13 25 C10 30 5 31 1 31 C1 27 3 21 7 19 Z' fill='%23E68A7A'/%3E%3C/svg%3E") 2 30;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--cacao);
  font: 400 1.0625rem/1.65 var(--police-texte);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* grain de papier, très léger */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .045;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--cacao);
}
p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px dashed var(--ocean); outline-offset: 4px; border-radius: 10px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.evitement {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  background: var(--cacao);
  color: var(--papier);
  padding: .6em 1em;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
}
.evitement:focus { top: 12px; }

.enveloppe {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ── Typographie commune ───────────────────────────────────────────────── */
.surtitre {
  display: inline-block;
  margin-bottom: .7rem;
  font: 400 clamp(1.35rem, 2.3vw, 1.75rem)/1 var(--police-script);
  color: var(--corail-texte);
  transform: rotate(-3deg);
  transform-origin: left center;
}
.titre-section { font-size: clamp(2.15rem, 4.7vw, 3.65rem); }
.chapeau {
  max-width: 54ch;
  margin-top: 1rem;
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
}

/* ── Boutons ───────────────────────────────────────────────────────────── */
.bouton {
  --fond: var(--cacao);
  --texte: var(--papier);
  --ombre: var(--encre);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 52px;
  padding: .72em 1.45em;
  border: 0;
  border-radius: 999px;
  background: var(--fond);
  color: var(--texte);
  font: 800 1.08rem/1.1 var(--police-titre);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ombre);
  transition: transform .25s var(--ressort), box-shadow .25s var(--ressort), background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.bouton:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 8px 0 var(--ombre); }
.bouton:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ombre); transition-duration: .08s; }
.bouton[disabled] { opacity: .6; cursor: progress; transform: none; }
.bouton-contour {
  --fond: transparent;
  --texte: var(--cacao);
  --ombre: var(--cacao);
  border: 3px solid var(--cacao);
}
.bouton-contour:hover { --fond: var(--corail-clair); }
.bouton-petit { min-height: 42px; padding: .5em 1.1em; font-size: .98rem; box-shadow: 0 4px 0 var(--ombre); }
.bouton-fleche { display: inline-block; transition: transform .3s var(--ressort); }
.bouton:hover .bouton-fleche { transform: translateX(5px); }
.bouton-lien {
  padding: .4em .2em;
  border: 0;
  background: none;
  color: var(--cacao);
  font: 600 1rem var(--police-texte);
  text-decoration: underline wavy var(--corail) 2px;
  text-underline-offset: 6px;
  cursor: pointer;
}

/* ── En-tête ───────────────────────────────────────────────────────────── */
.entete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--sable) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.entete-rang {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding: 8px var(--gouttiere);
}
.entete-logo { flex: none; display: block; width: 60px; }
.mini-logo { position: relative; display: block; aspect-ratio: 843 / 823; }
.mini-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-mains { transform-origin: 50.2% 53.6%; transition: rotate .9s var(--ressort); }
.entete-logo:hover .mini-mains { rotate: 72deg; }
.entete-nav { display: flex; gap: clamp(.9rem, 2vw, 1.9rem); margin-inline: auto; }
.entete-nav a {
  position: relative;
  z-index: 0;
  padding: .3em 0;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
}
.entete-nav a::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -6px;
  right: -6px;
  bottom: 2px;
  height: 10px;
  background: var(--corail);
  opacity: .75;
  -webkit-mask: var(--pinceau) center / 100% 100% no-repeat;
  mask: var(--pinceau) center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ressort);
}
.entete-nav a:hover::after { transform: scaleX(1); }
.entete-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.entete-nav + .entete-actions { margin-left: 0; }
.langues {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border: 2.5px solid var(--cacao);
  border-radius: 999px;
  background: var(--papier);
}
.langues button {
  position: relative;
  z-index: 1;
  min-width: 42px;
  min-height: 34px;
  padding: .45em .7em;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--cacao);
  font: 800 .92rem/1 var(--police-titre);
  cursor: pointer;
  transition: color .3s;
}
.langues button[aria-pressed="true"] { color: var(--papier); }
.langues-pastille {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--cacao);
  transition: translate .5s var(--ressort);
}
.langues[data-actif="es"] .langues-pastille { translate: 100% 0; }
.entete-progression {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--corail), var(--ocean), var(--sauge));
  transform: scaleX(var(--progression, 0));
  transform-origin: left;
}
@media (max-width: 960px) { .entete-nav { display: none; } .entete-actions { margin-left: auto; } }
@media (max-width: 400px) {
  .entete-logo { width: 50px; }
  .entete .bouton-petit { padding-inline: .85em; font-size: .92rem; }
}

/* ── Héros ─────────────────────────────────────────────────────────────── */
.heros {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--sable);
  padding-block: clamp(24px, 4.5vw, 60px) clamp(80px, 10vw, 130px);
}
.tache {
  position: absolute;
  z-index: -1;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: morpher 18s ease-in-out infinite alternate;
}
.tache-1 { width: min(52vw, 700px); aspect-ratio: 1; right: -8vw; top: 2%; background: var(--sauge-clair); }
.tache-2 { width: min(24vw, 320px); aspect-ratio: 1; left: -7vw; bottom: 4%; background: var(--corail-clair); animation-duration: 23s; }
.tache-3 { width: min(12vw, 160px); aspect-ratio: 1; left: 40%; top: -3vw; background: var(--ocean-clair); animation-duration: 15s; }
@keyframes morpher {
  0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; rotate: 0deg; }
  50% { border-radius: 58% 42% 38% 62% / 55% 38% 62% 45%; }
  100% { border-radius: 38% 62% 45% 55% / 60% 52% 48% 40%; rotate: 25deg; }
}
.heros-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.heros-texte { max-width: 580px; }
.sticker {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-bottom: 1.4rem;
  padding: .55em 1.05em .5em;
  border-radius: 999px;
  background: var(--sauge);
  color: var(--encre);
  font: 400 1.25rem/1 var(--police-script);
  transform: rotate(-3deg);
  box-shadow: 0 4px 0 var(--cacao);
}
.sticker-etoile { display: inline-block; animation: tourner 7s linear infinite; }
@keyframes tourner { to { rotate: 360deg; } }
.heros-titre { font-size: clamp(2.7rem, 6.3vw, 5.1rem); line-height: .98; }
.souligne { position: relative; z-index: 0; white-space: nowrap; }
.souligne::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -3%;
  right: -3%;
  bottom: .04em;
  height: .36em;
  background: var(--corail);
  -webkit-mask: var(--pinceau) center / 100% 100% no-repeat;
  mask: var(--pinceau) center / 100% 100% no-repeat;
  transform-origin: left;
}
.avec-js .souligne::after { animation: souligner .9s var(--doux) 1.3s both; }
@keyframes souligner { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.heros-intro { max-width: 46ch; margin-top: 1.3rem; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.heros-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }

/* la scène : logo au centre, pièces en couronne */
.scene {
  position: relative;
  width: min(100%, 600px);
  aspect-ratio: 1;
  justify-self: center;
  margin-bottom: 6%;
}
.logo-anime {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  aspect-ratio: 843 / 823;
  translate: -50% -50%;
  cursor: pointer;
}
.logo-anime > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.main {
  background: var(--sauge);
  -webkit-mask: var(--m) center / 100% 100% no-repeat;
  mask: var(--m) center / 100% 100% no-repeat;
  transform-origin: 50.2% 53.6%;
  transition: rotate .5s var(--ressort);
}
.m1 { --m: url("../img/logo/main-1.webp"); }
.m2 { --m: url("../img/logo/main-2.webp"); }
.m3 { --m: url("../img/logo/main-3.webp"); }
.m4 { --m: url("../img/logo/main-4.webp"); }
.m5 { --m: url("../img/logo/main-5.webp"); }
.avec-js .logo-anime .main {
  background: var(--c);
  animation:
    tamponner .6s var(--ressort) calc(.25s + var(--i) * .14s) both,
    verdir 1s ease 2.2s forwards;
}
@keyframes tamponner {
  0% { opacity: 0; transform: scale(1.5) rotate(-24deg); }
  55% { opacity: 1; transform: scale(.93) rotate(3deg); }
  78% { transform: scale(1.03) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes verdir { to { background-color: var(--sauge); } }
.logo-anime:hover .m1, .logo-anime:hover .m3, .logo-anime:hover .m5 { rotate: 7deg; }
.logo-anime:hover .m2, .logo-anime:hover .m4 { rotate: -7deg; }
.logo-anime.tourbillon .main { rotate: 360deg; transition: rotate 1.2s var(--doux); }
.logo-anime.sans-transition .main { transition: none; }
.logo-wela { transform-origin: 50% 64%; }
.avec-js .logo-wela { animation: tomber .85s cubic-bezier(.3, .7, .4, 1) 1s both; }
@keyframes tomber {
  0% { opacity: 0; transform: translateY(-30%) scale(.92, 1.12); }
  50% { opacity: 1; transform: translateY(2%) scale(1.07, .9); }
  72% { transform: translateY(-1.5%) scale(.98, 1.03); }
  100% { opacity: 1; transform: none; }
}
.avec-js .logo-art { animation: ecrire 1s ease-out 1.6s both; }
@keyframes ecrire { from { clip-path: inset(0 86% 0 12%); } to { clip-path: inset(0 0 0 0); } }
.avec-js .logo-anime { animation: balancer 7s ease-in-out 3.2s infinite alternate; }
@keyframes balancer { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }

/* pièces flottantes */
.flotteur {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: var(--t);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  translate: calc(-50% + var(--px, 0px)) calc(-50% + var(--py, 0px));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.flotteur-bob { position: absolute; inset: 0; animation: flotter var(--d, 6s) ease-in-out var(--delai, 0s) infinite alternate; }
@keyframes flotter {
  from { transform: translateY(-5%) rotate(calc(var(--rot, 0deg) - 7deg)); }
  to { transform: translateY(5%) rotate(calc(var(--rot, 0deg) + 7deg)); }
}
.flotteur-carte { position: absolute; inset: 0; transition: scale .3s var(--ressort); }
.flotteur:hover .flotteur-carte { scale: 1.1; }
.flotteur.retourne .flotteur-carte { scale: 0 1; transition: scale .26s ease-in; }
.flotteur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.flotteur .avant { filter: drop-shadow(0 12px 10px rgb(93 78 70 / .3)); }
.flotteur .apres {
  clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path .8s cubic-bezier(.6, 0, .2, 1);
}
.flotteur.peinte .apres { clip-path: circle(78% at var(--ox, 50%) var(--oy, 50%)); }
.flotteur.sec .apres { transition: none; }
.eclat {
  position: absolute;
  z-index: -1;
  left: var(--ox, 50%);
  top: var(--oy, 50%);
  width: 64%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background: var(--c, var(--corail));
  opacity: 0;
  scale: 0;
  pointer-events: none;
}
.eclat::before, .eclat::after {
  content: "";
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: inherit;
}
.eclat::before { right: -18%; top: -8%; }
.eclat::after { left: -14%; bottom: -12%; width: 15%; }
.flotteur.eclabousse .eclat { animation: eclabousser .85s var(--doux); }
@keyframes eclabousser {
  0% { scale: .2; opacity: .95; }
  60% { opacity: .7; }
  100% { scale: 1.7; opacity: 0; }
}
.scene-astuce {
  position: absolute;
  left: 50%;
  bottom: -9%;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  font: 400 clamp(1.1rem, 1.9vw, 1.35rem)/1 var(--police-script);
  color: var(--corail-texte);
  white-space: nowrap;
  translate: -50% 0;
  rotate: -4deg;
  pointer-events: none;
}
.scene-astuce svg { width: 40px; flex: none; transform: scale(-1, -1) rotate(-20deg); translate: 0 -14px; }

/* tampons de mains laissés par un clic */
.tampon {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: 76px;
  aspect-ratio: 335 / 348;
  translate: -50% -50%;
  rotate: var(--r);
  background: var(--c);
  -webkit-mask: url("../img/logo/main-tampon.webp") center / contain no-repeat;
  mask: url("../img/logo/main-tampon.webp") center / contain no-repeat;
  pointer-events: none;
  animation: tamponner .5s var(--ressort) both, effacer 1.4s ease 3.6s forwards;
}
@keyframes effacer { to { opacity: 0; scale: .85; } }

@media (max-width: 860px) {
  .heros-grille { grid-template-columns: minmax(0, 1fr); }
  .scene { order: -1; width: min(100%, 460px); margin-bottom: 10%; }
  .heros-texte { max-width: none; }
}

/* ── Bandeaux défilants ────────────────────────────────────────────────── */
.bandeaux {
  position: relative;
  z-index: 3;
  height: clamp(118px, 13vw, 160px);
  margin-block: calc(-1 * clamp(60px, 7vw, 90px)) calc(-1 * clamp(34px, 4vw, 52px));
  overflow: hidden;
  pointer-events: none;
}
.bandeau {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 50%;
  padding-block: .72em;
  overflow: hidden;
}
.bandeau-corail { z-index: 2; background: var(--corail); rotate: -2.5deg; translate: 0 -78%; box-shadow: 0 5px 0 var(--encre); }
.bandeau-ocean { background: var(--cacao); rotate: 2deg; translate: 0 -8%; }
.bandeau-piste { display: flex; width: max-content; animation: defiler 42s linear infinite; }
.bandeau-ocean .bandeau-piste { animation-duration: 56s; animation-direction: reverse; }
.bandeau-piste span {
  display: inline-flex;
  align-items: center;
  gap: .9em;
  padding-right: .9em;
  font: 800 clamp(1.08rem, 2vw, 1.5rem)/1 var(--police-titre);
  color: var(--encre);
  white-space: nowrap;
}
.bandeau-ocean .bandeau-piste span { color: var(--papier); font-weight: 700; }
.bandeau-piste span::after {
  content: "";
  width: 1.2em;
  aspect-ratio: 335 / 348;
  background: currentColor;
  -webkit-mask: url("../img/logo/main-tampon.webp") center / contain no-repeat;
  mask: url("../img/logo/main-tampon.webp") center / contain no-repeat;
  rotate: 18deg;
}
@keyframes defiler { to { transform: translateX(-50%); } }

/* ── La magie : le tapis avant → après ─────────────────────────────────── */
.magie {
  position: relative;
  z-index: 2;
  background: var(--ocean);
  color: var(--encre);
  padding-block: clamp(84px, 10vw, 130px) clamp(40px, 6vw, 70px);
}
.vague { position: absolute; left: 0; width: 100%; height: clamp(22px, 4vw, 56px); pointer-events: none; }
.vague-haut { bottom: calc(100% - 1px); }
.vague-bas { top: calc(100% - 1px); }
.magie .vague { color: var(--ocean); }
.magie .surtitre { color: var(--encre); }
.magie .titre-section { color: var(--encre); }
.magie-tete { text-align: center; display: grid; justify-items: center; }
.magie-tete .surtitre { transform-origin: center; }

.tapis {
  --taille: clamp(138px, 19vw, 230px);
  --ecart: clamp(34px, 5vw, 80px);
  position: relative;
  height: calc(var(--taille) + 70px);
  margin-top: clamp(48px, 6vw, 72px);
  cursor: grab;
  touch-action: pan-y; /* le doigt fait défiler la page verticalement, glisse le tapis horizontalement */
  user-select: none;
  -webkit-user-select: none;
}
.tapis.saisi { cursor: grabbing; }
.tapis-cadre { position: absolute; inset: 0; overflow: hidden; }
.tapis-apres { clip-path: inset(0 0 0 50%); }
/* La position des deux pistes est pilotée par wela.js (vitesse, survol,
   glisser-lâcher) : la même valeur pour les deux, donc toujours alignées. */
.piste {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--ecart);
  width: max-content;
  padding-left: var(--ecart);
  will-change: transform;
}
.piece-tapis { flex: none; width: var(--taille); aspect-ratio: 1; transition: scale .35s var(--ressort); }
.tapis.saisi .piece-tapis { scale: 1.07; }
.tapis-astuce {
  position: absolute;
  z-index: 4;
  top: -34px;
  left: calc(50% + clamp(56px, 7vw, 90px));
  display: flex;
  align-items: flex-start;
  gap: 2px;
  font: 400 clamp(1.05rem, 1.8vw, 1.3rem)/1 var(--police-script);
  color: var(--encre);
  white-space: nowrap;
  rotate: 4deg;
  pointer-events: none;
  transition: opacity .4s;
}
.tapis-astuce svg { width: 36px; flex: none; transform: rotate(40deg); translate: 0 6px; }
.tapis.deja-saisi .tapis-astuce { opacity: 0; }
.tapis.rapide .douche-pot { animation: vibrer .09s linear infinite alternate; }
@keyframes vibrer { from { translate: calc(-50% - 1.5px) 0; } to { translate: calc(-50% + 1.5px) 0; } }
.piece-tapis img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 10px rgb(62 51 45 / .28));
  animation: tanguer 2.6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.37s);
}
@keyframes tanguer {
  from { transform: translateY(-5%) rotate(-5deg); }
  to { transform: translateY(5%) rotate(5deg); }
}
.douche {
  position: absolute;
  z-index: 3;
  top: -26px;
  bottom: 18px;
  left: 50%;
  width: clamp(40px, 4.6vw, 62px);
  translate: -50% 0;
  pointer-events: none;
}
.douche-pot {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 190%;
  height: 30px;
  translate: -50% 0;
  border-radius: 14px 14px 24px 24px;
  background: var(--cacao);
  box-shadow: 0 5px 0 var(--encre);
}
.douche-pot::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 34%;
  height: 16px;
  translate: -50% 0;
  border-radius: 8px 8px 0 0;
  background: var(--cacao);
}
.filet {
  position: absolute;
  top: 22px;
  bottom: 0;
  width: 28%;
  border-radius: 0 0 99px 99px;
  background: repeating-linear-gradient(to bottom, var(--c) 0 22px, var(--c2) 22px 34px);
  background-size: 100% 34px;
  animation: couler .6s linear infinite;
}
.filet-1 { left: 2%; --c: var(--corail); --c2: #EFA597; }
.filet-2 { left: 36%; --c: var(--papier); --c2: var(--sable); animation-duration: .75s; }
.filet-3 { left: 70%; --c: var(--sauge); --c2: #BFCCB3; animation-duration: .68s; }
@keyframes couler { to { background-position: 0 34px; } }
.eclaboussure {
  position: absolute;
  bottom: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--corail);
  animation: gicler 1.1s ease-out infinite;
}
.e1 { left: 0; --gx: -26px; }
.e2 { left: 42%; background: var(--papier); --gx: 6px; animation-delay: .37s; }
.e3 { left: 80%; background: var(--sauge); --gx: 28px; animation-delay: .74s; }
@keyframes gicler {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--gx), -46px) scale(1); opacity: 0; }
}
.tapis-etiquette {
  position: absolute;
  z-index: 4;
  bottom: -8px;
  font: 400 clamp(1.45rem, 2.6vw, 2rem)/1 var(--police-script);
  color: var(--encre);
}
.tapis-etiquette-avant { right: calc(50% + 56px); rotate: -4deg; }
.tapis-etiquette-apres { left: calc(50% + 56px); rotate: 3deg; }
.avec-js .tapis:not(.en-vue) .piece-tapis img,
.avec-js .tapis:not(.en-vue) .filet,
.avec-js .tapis:not(.en-vue) .eclaboussure,
.avec-js .bandeaux:not(.en-vue) .bandeau-piste { animation-play-state: paused; }

/* ── À toi de peindre ──────────────────────────────────────────────────── */
.essai { position: relative; background: var(--papier); padding-block: clamp(96px, 11vw, 140px) clamp(80px, 10vw, 130px); }
.essai-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.essai-etiquette {
  margin: 1.8rem 0 .7rem;
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.essai-choix { display: flex; flex-wrap: wrap; gap: 10px; }
.essai-choix button {
  width: 64px;
  height: 64px;
  padding: 7px;
  border: 3px solid transparent;
  border-radius: 50%;
  background: var(--sable);
  cursor: pointer;
  transition: transform .3s var(--ressort), border-color .2s, background-color .2s;
}
.essai-choix button img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.essai-choix button:hover { transform: translateY(-4px) rotate(-8deg); }
.essai-choix button[aria-checked="true"] { border-color: var(--cacao); background: var(--sauge-clair); transform: scale(1.1); }
.essai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 1.7rem; }

.toile {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1;
  margin-inline: auto;
  cursor: var(--curseur-pinceau), crosshair;
}
.toile-assiette {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--sauge) 0 64%, #B7C5AA 64.5% 70%, var(--sauge) 70.5%);
  box-shadow: 0 20px 0 -4px var(--sable-fonce), inset 0 -10px 0 rgb(62 51 45 / .08);
}
.toile-avant, .toile-peinture { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; }
.toile-avant {
  object-fit: contain;
  filter: drop-shadow(0 16px 14px rgb(62 51 45 / .32));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.toile-peinture { touch-action: none; }
.toile.change .toile-avant, .toile.change .toile-peinture { animation: rebondir .55s var(--ressort); }
@keyframes rebondir { from { transform: scale(.7) rotate(-10deg); } to { transform: none; } }
.toile-indice {
  position: absolute;
  top: 0;
  right: 0;
  font: 400 clamp(1.2rem, 2.2vw, 1.5rem)/1 var(--police-script);
  color: var(--corail-texte);
  rotate: 8deg;
  pointer-events: none;
  transition: opacity .4s, translate .4s;
}
.avec-js .toile-indice { animation: tapoter 1.6s ease-in-out infinite alternate; }
@keyframes tapoter { to { translate: 0 -8px; } }
.toile.touchee .toile-indice { opacity: 0; }
.toile-jauge {
  position: absolute;
  left: 50%;
  bottom: 0;
  padding: .5em 1em;
  border-radius: 999px;
  background: var(--cacao);
  color: var(--papier);
  font: 800 .95rem/1 var(--police-titre);
  translate: -50% 30%;
  white-space: nowrap;
}
.toile-jauge:empty { display: none; }
.toile-bravo {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  padding: 14px 18px 16px;
  border-radius: 22px;
  background: var(--papier);
  border: 3px solid var(--cacao);
  box-shadow: 6px 6px 0 var(--corail);
  text-align: center;
  font: 400 1.35rem/1.15 var(--police-script);
  translate: -50% 38%;
  animation: surgir .6s var(--ressort) both;
}
@media (max-width: 860px) {
  .essai-grille { grid-template-columns: minmax(0, 1fr); }
  .essai-toile { order: -1; margin-bottom: 40px; }
}

/* ── Quoi peindre ──────────────────────────────────────────────────────── */
.objets { position: relative; background: var(--sable); padding-block: clamp(70px, 9vw, 120px); }
.objets .vague { color: var(--sable); }
.objets-liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}
.objet {
  --r: -1.2deg;
  padding: 22px 22px 26px;
  border: 3px solid var(--cacao);
  border-radius: var(--rayon);
  background: var(--papier);
  box-shadow: 6px 6px 0 var(--cacao);
  rotate: var(--r);
  transition: rotate .45s var(--ressort), translate .45s var(--ressort), box-shadow .45s var(--ressort);
}
.objet:nth-child(2) { --r: 1.4deg; background: var(--ocean-clair); }
.objet:nth-child(3) { --r: -.8deg; background: var(--corail-clair); }
.objet:nth-child(4) { --r: 1deg; background: var(--sauge-clair); }
.objet:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 10px 12px 0 var(--cacao); }
.objet-image { height: 170px; display: grid; place-items: center; margin-bottom: 14px; }
.objet h3 { margin-bottom: .45rem; font-size: 1.45rem; }
.objet p { font-size: .98rem; }
.objets-plus {
  margin-top: 26px;
  text-align: right;
  font: 400 clamp(1.3rem, 2.2vw, 1.7rem)/1 var(--police-script);
  color: var(--corail-texte);
  rotate: -2deg;
}
.dessin { width: auto; height: 100%; max-height: 160px; overflow: visible; stroke-dashoffset: 0; }
.avec-js .objet.visible .dessin { animation: dessiner 1.6s var(--doux) .2s both; }
@keyframes dessiner { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.objet-tote .dessin { transition: rotate .5s var(--ressort); transform-origin: 50% 12%; }
.objet-tote:hover .dessin { animation: balancer-sac 1s ease-in-out infinite alternate; }
@keyframes balancer-sac { from { rotate: -6deg; } to { rotate: 6deg; } }
.objet-trousse:hover .dessin { --tirette: -96px; }
.objet-sous-verre .dessin { transition: rotate 1.4s var(--doux); }
.objet-sous-verre:hover .dessin { rotate: 200deg; }
.objet-pile { position: relative; }
.objet-pile img {
  position: absolute;
  left: 22%;
  top: 4%;
  width: 56%;
  transition: translate .55s var(--ressort), rotate .55s var(--ressort);
  filter: drop-shadow(0 10px 8px rgb(62 51 45 / .25));
}
.objet-pile img:nth-child(1) { translate: -36% 8%; rotate: -14deg; }
.objet-pile img:nth-child(2) { z-index: 2; translate: 0 -2%; rotate: 3deg; }
.objet-pile img:nth-child(3) { translate: 36% 10%; rotate: 16deg; }
.objet-ceramique:hover .objet-pile img:nth-child(1) { translate: -52% 0; rotate: -26deg; }
.objet-ceramique:hover .objet-pile img:nth-child(2) { translate: 0 -12%; rotate: -4deg; }
.objet-ceramique:hover .objet-pile img:nth-child(3) { translate: 52% 2%; rotate: 26deg; }
@media (max-width: 980px) { .objets-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .objets-liste { grid-template-columns: minmax(0, 1fr); } .objet-image { height: 150px; } }

/* ── Comment ça marche ─────────────────────────────────────────────────── */
.etapes { background: var(--papier); padding-block: clamp(80px, 10vw, 130px); }
.etapes-tete { text-align: center; display: grid; justify-items: center; }
.etapes-tete .surtitre { transform-origin: center; }
.etapes-liste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}
.etapes-liste::before {
  content: "";
  position: absolute;
  top: 84px;
  left: 18%;
  right: 18%;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16' viewBox='0 0 60 16'%3E%3Cpath d='M0 8 Q15 0 30 8 T60 8' fill='none' stroke='%235D4E46' stroke-width='2.5' stroke-dasharray='6 6'/%3E%3C/svg%3E") repeat-x center / 60px 16px;
  opacity: .5;
}
.etape { position: relative; display: grid; justify-items: center; text-align: center; }
.etape-image {
  position: relative;
  width: 170px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sable);
}
.etape:nth-child(2) .etape-image { background: var(--ocean-clair); }
.etape:nth-child(3) .etape-image { background: var(--sauge-clair); }
.etape-image img { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; object-fit: contain; }
.etape-moitie .etape-peinte { clip-path: inset(0 0 0 50%); }
.avec-js .etape-moitie .etape-peinte { animation: moitie 3.4s ease-in-out infinite alternate; }
@keyframes moitie { from { clip-path: inset(0 0 0 88%); } to { clip-path: inset(0 0 0 12%); } }
.etape-pinceau { position: absolute; top: 16%; left: 46%; width: 42%; pointer-events: none; }
.avec-js .etape-pinceau { animation: pinceau 3.4s ease-in-out infinite alternate; }
@keyframes pinceau { from { left: 84%; } to { left: 8%; } }
.etape-numero {
  position: absolute;
  top: 118px;
  left: calc(50% + 46px);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background: var(--corail);
  color: var(--encre);
  font: 900 1.7rem/1 var(--police-titre);
  box-shadow: 0 4px 0 var(--cacao);
  rotate: -8deg;
}
.etape:nth-child(2) .etape-numero { background: var(--ocean); rotate: 6deg; }
.etape:nth-child(3) .etape-numero { background: var(--sauge); rotate: -4deg; }
.etape h3 { margin-top: 26px; font-size: 1.55rem; }
.etape p { max-width: 30ch; margin-top: .5rem; }
@media (max-width: 760px) {
  .etapes-liste { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .etapes-liste::before { display: none; }
}

/* ── Ateliers ──────────────────────────────────────────────────────────── */
.ateliers { position: relative; background: var(--sauge-clair); padding-block: clamp(80px, 10vw, 130px); }
.ateliers .vague { color: var(--sauge-clair); }
.ateliers-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
  margin-top: clamp(28px, 4vw, 44px);
}
.ateliers-billets { display: grid; gap: 26px; }
.billet {
  --fond: var(--ocean);
  position: relative;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  border: 3px solid var(--cacao);
  border-radius: 26px;
  background: var(--fond);
  box-shadow: 7px 7px 0 var(--cacao);
  rotate: -1deg;
  transition: rotate .45s var(--ressort);
}
.billet:hover { rotate: 0deg; }
.billet[data-theme="corail"] { --fond: var(--corail); }
.billet[data-theme="sauge"] { --fond: var(--sauge); }
.billet-date {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 18px 10px;
  border-right: 3px dashed var(--cacao);
  border-radius: 23px 0 0 23px;
  background: var(--papier);
  text-align: center;
}
.billet-date::before, .billet-date::after {
  content: "";
  position: absolute;
  right: -15px;
  width: 26px;
  height: 26px;
  border: 3px solid var(--cacao);
  border-radius: 50%;
  background: var(--sauge-clair);
}
.billet-date::before { top: -16px; }
.billet-date::after { bottom: -16px; }
.billet-semaine { font: 400 1.15rem/1 var(--police-script); color: var(--corail-texte); }
.billet-jour { font: 900 3.2rem/.9 var(--police-titre); color: var(--cacao); }
.billet-mois { font: 800 .95rem/1 var(--police-titre); letter-spacing: .08em; text-transform: uppercase; }
.billet-corps { padding: 22px 24px 26px; color: var(--encre); }
.billet-sous-titre { font: 400 1.35rem/1 var(--police-script); }
.billet h3 { margin-top: .25rem; font-size: clamp(1.7rem, 2.8vw, 2.2rem); color: var(--encre); }
.billet-infos { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.billet-infos li {
  padding: .35em .85em;
  border-radius: 999px;
  background: rgb(253 248 242 / .72);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.3;
}
.billet-texte { font-size: .98rem; }
.billet .bouton { margin-top: 18px; }
.billet-aujourdhui {
  position: absolute;
  top: -18px;
  right: 18px;
  padding: .45em .9em;
  border-radius: 999px;
  background: var(--corail);
  color: var(--encre);
  font: 800 1rem/1 var(--police-titre);
  box-shadow: 0 3px 0 var(--cacao);
  rotate: 6deg;
  animation: tapoter 1.2s ease-in-out infinite alternate;
}
.billet-vide { --fond: var(--papier); }
.billet-vide .billet-date { background: var(--sable); }
.billet-vide .billet-jour { font-size: 2.6rem; }
.prive {
  position: relative;
  padding: 30px 28px 32px;
  border-radius: var(--rayon);
  background: var(--cacao);
  color: var(--papier);
  box-shadow: 7px 7px 0 var(--encre);
  rotate: 1.2deg;
  transition: rotate .45s var(--ressort);
}
.prive:hover { rotate: 0deg; }
.prive h3 { color: var(--papier); font-size: 2rem; }
.prive p { margin: .8rem 0 1.5rem; }
.prive .bouton { --fond: var(--corail); --texte: var(--encre); --ombre: var(--encre); }
.prive-mains { display: flex; gap: 4px; height: 62px; margin-bottom: 14px; }
.main-deco {
  width: 56px;
  aspect-ratio: 335 / 348;
  background: var(--c);
  -webkit-mask: url("../img/logo/main-tampon.webp") center / contain no-repeat;
  mask: url("../img/logo/main-tampon.webp") center / contain no-repeat;
  rotate: var(--r);
  transition: rotate .4s var(--ressort), translate .4s var(--ressort);
}
.prive:hover .main-deco:nth-child(1) { rotate: -34deg; translate: -4px -6px; }
.prive:hover .main-deco:nth-child(2) { translate: 0 -10px; }
.prive:hover .main-deco:nth-child(3) { rotate: 42deg; translate: 4px -6px; }
.ateliers-passes { margin-top: 40px; }
.ateliers-passes-titre { font-size: 1.3rem; }
.ateliers-passes ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.ateliers-passes li {
  padding: .45em 1em;
  border: 2px dashed var(--cacao);
  border-radius: 999px;
  background: var(--papier);
  font-size: .95rem;
}
@media (max-width: 900px) { .ateliers-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .billet { grid-template-columns: minmax(0, 1fr); }
  .billet-date {
    grid-auto-flow: column;
    align-items: baseline;
    gap: 10px;
    padding: 14px;
    border-right: 0;
    border-bottom: 3px dashed var(--cacao);
    border-radius: 23px 23px 0 0;
  }
  .billet-date::before, .billet-date::after { display: none; }
  .billet-jour { font-size: 2.4rem; }
}

/* ── Événements privés ─────────────────────────────────────────────────── */
.evenements {
  position: relative;
  background-color: var(--corail);
  background-image: radial-gradient(rgb(253 248 242 / .2) 2px, transparent 2.6px);
  background-size: 28px 28px;
  color: var(--encre);
  padding-block: clamp(80px, 10vw, 130px);
}
.evenements .vague { color: var(--corail); }
.evenements .surtitre, .evenements .titre-section { color: var(--encre); }
.evenements-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.evenements-etiquette {
  margin: 1.8rem 0 .9rem;
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.evenements-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.type-evenement {
  --r: -1.5deg;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  width: 100%;
  height: 100%;
  padding: 14px 8px 14px;
  border: 3px solid var(--encre);
  border-radius: 22px;
  background: var(--papier);
  color: var(--encre);
  font: 800 1rem/1.15 var(--police-titre);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--encre);
  rotate: var(--r);
  transition: transform .25s var(--ressort), box-shadow .25s var(--ressort), rotate .3s var(--ressort), background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.evenements-types li:nth-child(even) .type-evenement { --r: 1.2deg; }
.type-evenement:hover { transform: translateY(-4px); rotate: 0deg; box-shadow: 0 9px 0 var(--encre); }
.type-evenement:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--encre); }
.type-evenement[aria-pressed="true"] { background: var(--sable); rotate: 0deg; }
.type-evenement[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: -11px;
  right: -11px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--encre);
  color: var(--papier);
  font: 800 .95rem/1 var(--police-texte);
  animation: pop .35s var(--ressort);
}
.type-evenement-image { display: grid; place-items: center; width: 68px; height: 62px; }
.type-evenement-image svg, .type-evenement-image .mini-burst { width: 100%; height: 100%; }
.type-evenement:hover .type-evenement-image { animation: gigoter .5s ease-in-out; }
.type-evenement-sous { font: 400 .8rem/1.25 var(--police-texte); }
.formulaire.formulaire-evenements { box-shadow: 10px 10px 0 var(--encre); }
@media (max-width: 900px) { .evenements-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .evenements-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulaire.formulaire-evenements { box-shadow: 6px 6px 0 var(--encre); }
}

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact { position: relative; background: var(--cacao); color: var(--papier); padding-block: clamp(80px, 10vw, 130px); }
.contact .vague { color: var(--cacao); }
.contact .titre-section { color: var(--papier); }
.contact .surtitre { color: var(--corail); }
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.contact-intro { position: sticky; top: 110px; }
.contact-infos { display: grid; gap: 12px; margin: 1.7rem 0 0; padding: 0; list-style: none; }
.contact-infos a, .contact-infos span {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  color: var(--papier);
  font-weight: 600;
  text-decoration: none;
}
.contact-infos a:hover { text-decoration: underline wavy var(--corail) 2px; text-underline-offset: 5px; }
.contact-infos svg { width: 22px; height: 22px; flex: none; }
.contact-deco { position: relative; height: 220px; margin-top: 30px; }
.contact-piece { position: absolute; width: 150px; animation: flotter 6s ease-in-out infinite alternate; }
.cp-1 { left: 2%; top: 0; }
.cp-2 { left: 44%; top: 48px; --rot: 8deg; animation-duration: 7.5s; animation-delay: -2s; }
@media (max-width: 900px) {
  .contact-grille { grid-template-columns: minmax(0, 1fr); }
  .contact-intro { position: static; }
  .contact-deco { display: none; }
}

/* ── Formulaire ────────────────────────────────────────────────────────── */
.formulaire {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 540px;
  padding: clamp(18px, 3vw, 32px);
  border: 3px solid var(--encre);
  border-radius: 32px;
  background: var(--papier);
  color: var(--cacao);
  box-shadow: 10px 10px 0 var(--corail);
  overflow: hidden;
}
.formulaire-sans-js { font-weight: 600; }
.form-tete { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(18px, 3vw, 28px); }
.form-retour {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 2.5px solid var(--cacao);
  border-radius: 50%;
  background: var(--papier);
  color: var(--cacao);
  font-size: 1.15rem;
  cursor: pointer;
  transition: transform .25s var(--ressort), background-color .2s, opacity .2s;
}
.form-retour:hover { transform: translateX(-3px); background: var(--sable); }
.form-retour.invisible { visibility: hidden; }
.form-progression {
  position: relative;
  flex: 1;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sable);
}
.form-progression span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  border-radius: 999px;
  background: repeating-linear-gradient(-45deg, var(--corail) 0 10px, #EE9D8F 10px 20px);
  transition: width .6s var(--ressort);
  animation: rayures 1s linear infinite;
}
@keyframes rayures { to { background-position: 28.28px 0; } }
.form-compteur { min-width: 3.4em; font: 800 .95rem var(--police-titre); text-align: right; white-space: nowrap; }
.form-corps { position: relative; flex: 1; display: grid; align-content: center; }
.etape-form { display: flex; flex-direction: column; gap: 18px; min-width: 0; animation: entrer .5s var(--ressort) both; }
.etape-form.depuis-gauche { animation-name: entrer-gauche; }
.etape-form.sortir { animation: sortir .22s ease-in both; }
@keyframes entrer { from { opacity: 0; transform: translateX(44px) rotate(1.5deg); } to { opacity: 1; transform: none; } }
@keyframes entrer-gauche { from { opacity: 0; transform: translateX(-44px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes sortir { to { opacity: 0; transform: translateX(-26px); } }
.question { font-size: clamp(1.6rem, 3vw, 2.15rem); color: var(--cacao); }
.question:focus { outline: none; }
.question-bilingue { display: grid; gap: .3em; }
.question-bilingue span + span { font-size: .78em; color: var(--corail-texte); }
.aide { margin-top: -8px; color: rgb(93 78 70 / .85); }

.choix-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.choix-grille.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix {
  --c: var(--sauge-clair);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 150px;
  padding: 16px 12px 16px;
  border: 3px solid var(--cacao);
  border-radius: 22px;
  background: var(--papier);
  color: var(--cacao);
  font: 800 1.08rem/1.15 var(--police-titre);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--cacao);
  transition: transform .25s var(--ressort), box-shadow .25s var(--ressort), background-color .25s;
  -webkit-tap-highlight-color: transparent;
}
.choix:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 0 var(--cacao); background: var(--sable); }
.choix:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--cacao); }
.choix::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--sx, 50%);
  top: var(--sy, 50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c);
  translate: -50% -50%;
  scale: 0;
  transition: scale .55s var(--doux);
}
.choix[aria-checked="true"]::before { scale: 24; }
.choix[aria-checked="true"] { background: var(--papier); }
.choix-image { display: grid; place-items: center; width: 88px; height: 88px; }
.choix-image img, .choix-image svg { width: 100%; height: 100%; object-fit: contain; }
.choix:hover .choix-image { animation: gigoter .5s ease-in-out; }
@keyframes gigoter { 30% { rotate: -8deg; } 70% { rotate: 6deg; } }
.choix-sous { font: 400 .86rem/1.3 var(--police-texte); }
.choix-note {
  position: absolute;
  top: 9px;
  right: 9px;
  padding: .35em .6em;
  border-radius: 999px;
  background: var(--corail);
  color: var(--encre);
  font: 800 .8rem/1 var(--police-titre);
  rotate: 8deg;
}
.choix-touche {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 2px 6px;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  font: 700 .72rem/1.2 var(--police-texte);
  opacity: .55;
}
.choix-coche {
  position: absolute;
  top: 8px;
  left: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cacao);
  color: var(--papier);
  font-size: .9rem;
  scale: 0;
  transition: scale .35s var(--ressort);
}
.choix[aria-checked="true"] .choix-coche { scale: 1; }
.choix[aria-checked="true"] .choix-touche { opacity: 0; }
.choix-langue { min-height: 176px; font-size: clamp(1.5rem, 3vw, 1.9rem); }
.choix-langue .choix-sous { font: 400 1.2rem/1 var(--police-script); }
.choix-langue .main-choix {
  width: 54px;
  aspect-ratio: 335 / 348;
  background: var(--m-c);
  -webkit-mask: url("../img/logo/main-tampon.webp") center / contain no-repeat;
  mask: url("../img/logo/main-tampon.webp") center / contain no-repeat;
  rotate: var(--r, -12deg);
  transition: rotate .4s var(--ressort), scale .4s var(--ressort);
}
.choix-langue:hover .main-choix { rotate: 12deg; scale: 1.15; }
.choix-large { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 16px; padding: 14px 18px; text-align: left; }
.choix-large .choix-image { width: 64px; height: 64px; flex: none; }
.choix-large .choix-texte { display: grid; gap: 4px; }
.choix-large .choix-touche { position: static; order: 3; margin-left: auto; }
.choix-large .choix-coche { top: 50%; left: auto; right: 14px; translate: 0 -50%; }
.liste-choix { display: grid; gap: 10px; }

.puces { display: flex; flex-wrap: wrap; gap: 10px; }
.puce {
  padding: .62em 1.15em;
  border: 2.5px solid var(--cacao);
  border-radius: 999px;
  background: var(--papier);
  color: var(--cacao);
  font: 600 1rem/1.2 var(--police-texte);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--cacao);
  transition: transform .25s var(--ressort), background-color .2s, color .2s, box-shadow .25s;
}
.puce:hover { transform: translateY(-2px) rotate(-1.5deg); background: var(--sable); }
.puce[aria-checked="true"] { background: var(--cacao); color: var(--papier); transform: scale(1.04); }

.compteur { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 28px); margin-top: 6px; }
.compteur button {
  width: 64px;
  height: 64px;
  border: 3px solid var(--cacao);
  border-radius: 50%;
  background: var(--papier);
  color: var(--cacao);
  font: 900 2rem/1 var(--police-titre);
  cursor: pointer;
  box-shadow: 0 5px 0 var(--cacao);
  transition: transform .2s var(--ressort), box-shadow .2s;
}
.compteur button:hover { transform: translateY(-2px); background: var(--sable); }
.compteur button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--cacao); }
.compteur button:disabled { opacity: .35; cursor: default; transform: none; }
/* le nombre se tape aussi au clavier (utile pour une classe de 40) */
.compteur-valeur {
  width: 2.3em;
  padding: 0;
  border: 0;
  border-bottom: 3px dashed rgb(93 78 70 / .3);
  border-radius: 0;
  background: transparent;
  color: var(--cacao);
  font: 900 clamp(3.2rem, 8vw, 4.4rem)/1.05 var(--police-titre);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.compteur-valeur::-webkit-outer-spin-button,
.compteur-valeur::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.compteur-valeur:focus { outline: none; border-bottom-color: var(--ocean); }
.compteur-valeur.pop { animation: pop .35s var(--ressort); }
.compteur-ages { display: grid; justify-items: center; gap: 8px; }
.compteur-ages .puces { justify-content: center; }
@keyframes pop { from { scale: 1.35; } to { scale: 1; } }
.compteur-libelle { margin-top: -6px; text-align: center; font-weight: 600; }
.compteur-mains { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 48px; }
.compteur-mains span {
  width: 38px;
  aspect-ratio: 335 / 348;
  background: var(--c);
  -webkit-mask: url("../img/logo/main-tampon.webp") center / contain no-repeat;
  mask: url("../img/logo/main-tampon.webp") center / contain no-repeat;
  rotate: var(--r);
  animation: tamponner .45s var(--ressort) both;
}
.compteur-mains b { align-self: center; font: 800 1.2rem var(--police-titre); }

.champs { display: grid; gap: 16px; }
.champ { display: grid; gap: 6px; min-width: 0; }
.champ-libelle { font-weight: 600; font-size: .98rem; }
.champ-libelle em { font-style: normal; font-weight: 400; opacity: .8; }
.champ input, .champ select, .champ textarea {
  width: 100%;
  min-height: 54px;
  padding: .75em 1em;
  border: 2.5px solid var(--cacao);
  border-radius: 16px;
  background: var(--blanc);
  color: var(--encre);
  font: 500 1.05rem/1.4 var(--police-texte);
  transition: box-shadow .2s, border-color .2s;
}
.champ select { padding-right: .6em; cursor: pointer; }
.champ textarea { min-height: 110px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; box-shadow: 0 0 0 4px var(--ocean); }
.champ-tel { display: grid; grid-template-columns: minmax(104px, auto) minmax(0, 1fr); gap: 8px; }
.champ-aide { font-size: .88rem; opacity: .85; }
.champ-erreur { color: var(--rouge-erreur); font-weight: 600; font-size: .92rem; }
.champ.invalide input, .champ.invalide textarea { border-color: var(--rouge-erreur); animation: secouer .4s; }
@keyframes secouer { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 4px; }
.form-astuce { font-size: .88rem; opacity: .8; }
.form-message-erreur { color: var(--rouge-erreur); font-weight: 600; }

.recap { display: grid; margin: 0; padding: 0; list-style: none; border: 2.5px dashed var(--cacao); border-radius: 20px; background: var(--sable); }
.recap li {
  display: grid;
  grid-template-columns: minmax(96px, 32%) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1.5px dashed rgb(93 78 70 / .35);
}
.recap li:last-child { border-bottom: 0; }
.recap-cle { font-weight: 700; font-size: .9rem; }
.recap-valeur { overflow-wrap: anywhere; }
.recap-modifier {
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--cacao);
  font: 600 .86rem var(--police-texte);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (max-width: 460px) {
  .recap li { grid-template-columns: minmax(0, 1fr) auto; }
  .recap-valeur { grid-column: 1 / -1; grid-row: 2; }
}

.merci { display: grid; justify-items: center; gap: 16px; padding-block: 6px 10px; text-align: center; animation: entrer .6s var(--ressort) both; }
.merci-logo { position: relative; width: min(220px, 58%); aspect-ratio: 843 / 823; }
.merci-logo > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.merci-logo .main { animation: tamponner .55s var(--ressort) calc(var(--i) * .12s) both; background: var(--c); }
.merci-logo .logo-wela { animation: tomber .8s cubic-bezier(.3, .7, .4, 1) .6s both; }
.merci h3 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.merci p { max-width: 42ch; }
.merci-apercu {
  padding: 10px 14px;
  border: 2px dashed var(--encre);
  border-radius: 14px;
  background: repeating-linear-gradient(-45deg, #FFF4CC 0 12px, #FBEAB0 12px 24px);
  color: var(--encre);
  font-weight: 600;
  font-size: .92rem;
}
.merci .form-actions { justify-content: center; }
.envoi-erreur { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--corail-clair); color: var(--encre); font-weight: 600; }
.envoi-erreur a { font-weight: 700; }

@media (hover: none) { .choix-touche, .form-astuce { display: none; } }
@media (max-width: 520px) {
  .formulaire { min-height: 0; border-radius: 26px; box-shadow: 6px 6px 0 var(--corail); }
  /* sur téléphone : une colonne de choix en ligne (image à gauche), sauf la langue */
  .choix-grille { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .choix-grille:not(.deux) .choix {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    min-height: 0;
    padding: 10px 44px 10px 12px;
    font-size: 1.02rem;
    text-align: left;
  }
  .choix-grille:not(.deux) .choix-image { width: 58px; height: 58px; flex: none; }
  .choix-grille:not(.deux) .choix-coche { top: 50%; left: auto; right: 12px; translate: 0 -50%; }
  .choix-grille:not(.deux) .choix-note { top: 50%; right: 44px; translate: 0 -50%; }
  .choix-grille.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choix-langue { min-height: 150px; }
  .sticker { font-size: 1.05rem; }
}

/* ── Pied de page ──────────────────────────────────────────────────────── */
.pied { background: var(--sable); padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); }
.pied-grille { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
.pied-logo { flex: none; display: block; width: 160px; }
.logo-empile { position: relative; display: block; aspect-ratio: 843 / 823; }
.logo-empile img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pied-mains { transform-origin: 50.2% 53.6%; transition: rotate 1.4s var(--doux); }
.pied-logo:hover .pied-mains { rotate: 144deg; }
.pied-lieu { font: 800 1.25rem/1.3 var(--police-titre); }
.pied-reseaux { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; padding: 0; list-style: none; }
.pied-reseaux:empty { display: none; }
.pied-reseaux a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .45em .95em;
  border: 2.5px solid var(--cacao);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s, transform .25s var(--ressort);
}
.pied-reseaux a:hover { background: var(--papier); transform: rotate(-2deg); }
.pied-reseaux svg { width: 20px; height: 20px; }
.pied-petit { margin-top: 10px; font-size: .9rem; }

/* ── Éléments posés par les scripts ────────────────────────────────────── */
.heros-grille { position: relative; z-index: 1; }
.tampon { z-index: 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.choix-texte { display: grid; gap: 4px; }
.mini-burst { position: relative; display: block; width: 100%; aspect-ratio: 843 / 823; }
.mini-burst .main { position: absolute; inset: 0; background: var(--c); }
.choix:hover .mini-burst .main:nth-child(odd) { rotate: 9deg; }
.choix:hover .mini-burst .main:nth-child(even) { rotate: -9deg; }
.point-interrogation {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 3px dashed var(--cacao);
  border-radius: 50%;
  background: var(--papier);
  color: var(--cacao);
  font: 900 2.3rem/1 var(--police-titre);
}
.secoue { animation: secouer .4s; }
.choix-large .point-interrogation { width: 56px; height: 56px; font-size: 1.9rem; }
.toile-pinceau {
  position: absolute;
  z-index: 3;
  width: 13%;
  translate: -6% -94%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
  filter: drop-shadow(0 6px 6px rgb(62 51 45 / .3));
}
.toile-pinceau.actif { opacity: 1; }
.billet-infos li { display: inline-flex; align-items: center; gap: .45em; }
.billet-infos svg { width: 16px; height: 16px; flex: none; }

/* ── Apparitions et effets communs ─────────────────────────────────────── */
.avec-js [data-apparait].visible { animation: surgir .75s var(--ressort) both; }
@keyframes surgir {
  from { transform: translateY(28px) rotate(-1.5deg) scale(.97); }
  to { transform: none; }
}
.confettis { position: fixed; inset: 0; z-index: 95; width: 100%; height: 100%; pointer-events: none; }

/* ── Le rideau du changement de langue ─────────────────────────────────
   Un disque crème part du bouton EN/ES et couvre la page ; le logo s'y
   imprime main par main, une pièce blanche s'y fait peindre, et le
   « Hello! / ¡Hola! » s'écrit. Les textes changent pendant ce temps. */
.rideau-langue { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; cursor: pointer; }
.rideau-fond {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, var(--corail-clair) 0 9%, transparent 9.2%),
    radial-gradient(circle at 84% 76%, var(--ocean-clair) 0 12%, transparent 12.2%),
    radial-gradient(circle at 78% 18%, var(--sauge-clair) 0 7%, transparent 7.2%),
    var(--sable);
  clip-path: circle(0% at var(--vx, 90%) var(--vy, 4%));
  transition: clip-path .5s cubic-bezier(.7, 0, .3, 1);
}
.rideau-langue.joue .rideau-fond { clip-path: circle(150% at var(--vx, 90%) var(--vy, 4%)); }
.rideau-langue.part .rideau-fond { clip-path: circle(0% at 50% 50%); transition: clip-path .5s cubic-bezier(.7, 0, .3, 1); }
.rideau-scene {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  transition: scale .35s ease-in, opacity .3s ease-in;
}
.rideau-langue.part .rideau-scene { scale: .6; opacity: 0; }
.rideau-logo { position: relative; width: min(52vmin, 300px); aspect-ratio: 843 / 823; }
.rideau-logo > .main, .rideau-wela { position: absolute; inset: 0; width: 100%; height: 100%; }
.rideau-logo .main { background: var(--c); opacity: 0; }
.rideau-langue.joue .rideau-logo .main { animation: tamponner .5s var(--ressort) calc(.28s + var(--i) * .09s) both; }
.rideau-wela { opacity: 0; transform-origin: 50% 64%; }
.rideau-langue.joue .rideau-wela { animation: tomber .7s cubic-bezier(.3, .7, .4, 1) .62s both; }
/* les gouttes qui giclent du logo */
.rideau-goutte {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 16px;
  aspect-ratio: 1;
  border-radius: 50% 50% 50% 0;
  background: var(--c);
  rotate: var(--a);
  opacity: 0;
}
.rideau-langue.joue .rideau-goutte { animation: gicler .75s cubic-bezier(.2, .7, .3, 1) calc(.7s + var(--i) * .03s) both; }
@keyframes gicler {
  0% { opacity: 1; translate: -50% -50%; transform: rotate(0) translateY(0) scale(.4); }
  70% { opacity: 1; }
  100% { opacity: 0; translate: -50% -50%; transform: translateY(calc(-1 * min(34vmin, 190px))) scale(1.1); }
}
/* la pièce qui se fait peindre, posée au pied du logo */
.rideau-piece {
  position: absolute;
  right: -22%;
  bottom: 4%;
  width: min(24vmin, 140px);
  aspect-ratio: 1;
  rotate: 8deg;
  opacity: 0;
}
.rideau-langue.joue .rideau-piece { animation: tamponner .45s var(--ressort) .35s both; }
.rideau-piece img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px rgb(93 78 70 / .25)); }
.rideau-peinte { clip-path: inset(0 100% 0 0); }
.rideau-langue.joue .rideau-peinte { animation: peindre-rideau .8s cubic-bezier(.5, 0, .3, 1) .6s both; }
@keyframes peindre-rideau { to { clip-path: inset(0 0 0 0); } }
.rideau-pinceau {
  position: absolute;
  left: 0;
  top: 18%;
  width: 34%;
  filter: drop-shadow(0 5px 5px rgb(62 51 45 / .3));
  opacity: 0;
}
.rideau-langue.joue .rideau-pinceau { animation: balayer .8s cubic-bezier(.5, 0, .3, 1) .6s both; }
@keyframes balayer {
  0% { opacity: 1; translate: -30% 0; rotate: -10deg; }
  25% { translate: 40% 90%; rotate: 10deg; }
  50% { translate: 120% 10%; rotate: -8deg; }
  75% { translate: 190% 100%; rotate: 12deg; }
  92% { opacity: 1; }
  100% { opacity: 0; translate: 250% 40%; rotate: 0deg; }
}
.rideau-mot {
  font: 400 clamp(2.4rem, 7vmin, 3.6rem)/1 var(--police-script);
  color: var(--corail-texte);
  rotate: -4deg;
  clip-path: inset(0 100% 0 0);
}
.rideau-langue.joue .rideau-mot { animation: ecrire-mot .55s ease-out .95s both; }
@keyframes ecrire-mot { to { clip-path: inset(0 -10% 0 0); } }
@media (max-width: 520px) { .rideau-piece { right: -10%; bottom: -8%; } }

/* ── Étiquettes flottantes : le libellé est DANS la case ───────────────── */
.champ-boite { position: relative; min-width: 0; }
.champ-flottant .champ-boite input,
.champ-flottant .champ-boite textarea {
  min-height: 62px;
  padding: 1.55em 1em .45em;
}
.champ-flottant .champ-boite textarea { min-height: 116px; padding-top: 1.8em; }
.champ-boite label {
  position: absolute;
  left: calc(1em + 2.5px);
  right: 1em;
  top: 50%;
  translate: 0 -50%;
  overflow: hidden;
  color: rgb(93 78 70 / .78);
  font: 500 1.05rem/1.2 var(--police-texte);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: left top;
  transition: top .2s var(--doux), translate .2s var(--doux), font-size .2s var(--doux), color .2s;
}
.champ-boite.multiligne label { top: 1.05em; translate: 0 0; }
.champ-boite label em { font-style: normal; opacity: .75; }
.champ-boite:focus-within label,
.champ-boite.rempli label {
  top: .62em;
  translate: 0 0;
  color: var(--cacao);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}
/* rempli par le navigateur (sans événement « input ») : règles séparées, un
   sélecteur inconnu ferait sauter toute la liste */
.champ-boite input:-webkit-autofill + label { top: .62em; translate: 0 0; font-size: .78rem; font-weight: 700; }
.champ-boite input:autofill + label { top: .62em; translate: 0 0; font-size: .78rem; font-weight: 700; }
.champ-boite:focus-within label { color: #3F7F8F; }
/* l'exemple n'apparaît qu'une fois dans la case */
.champ-boite input::placeholder, .champ-boite textarea::placeholder { color: transparent; transition: color .2s; }
.champ-boite:focus-within input::placeholder, .champ-boite:focus-within textarea::placeholder { color: rgb(93 78 70 / .5); }
.champ-flottant .champ-tel { grid-template-columns: minmax(104px, auto) minmax(0, 1fr); align-items: stretch; }
.champ-flottant .champ-tel select { min-height: 62px; }
.champ-flottant .champ-aide { margin-top: -2px; padding-left: .3em; }
.champ.invalide .champ-boite label { color: var(--rouge-erreur); }

/* ── Le calendrier des événements privés ───────────────────────────────── */
.calendrier {
  padding: 14px clamp(10px, 2vw, 18px) 16px;
  border: 3px solid var(--cacao);
  border-radius: 24px;
  background: var(--blanc);
  box-shadow: 0 5px 0 var(--cacao);
}
.cal-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cal-titre { font: 800 1.2rem/1.1 var(--police-titre); text-align: center; }
.cal-fleche {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 2.5px solid var(--cacao);
  border-radius: 50%;
  background: var(--sable);
  color: var(--cacao);
  cursor: pointer;
  transition: transform .25s var(--ressort), background-color .2s;
}
.cal-fleche svg { width: 20px; height: 20px; }
.cal-fleche:hover:not(:disabled) { background: var(--ocean-clair); transform: scale(1.08) rotate(-4deg); }
.cal-fleche:disabled { opacity: .3; cursor: default; }
.cal-grille { display: grid; gap: 4px; }
.cal-grille.glisse-droite { animation: cal-droite .35s var(--doux); }
.cal-grille.glisse-gauche { animation: cal-gauche .35s var(--doux); }
@keyframes cal-droite { from { opacity: 0; transform: translateX(24px); } }
@keyframes cal-gauche { from { opacity: 0; transform: translateX(-24px); } }
.cal-rangee { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-noms span {
  padding-bottom: 4px;
  font: 700 .74rem/1 var(--police-texte);
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  opacity: .7;
}
.cal-rangee > span { display: grid; place-items: center; }
.cal-jour {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 48px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--cacao);
  font: 700 1rem/1 var(--police-texte);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cal-jour::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6%;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background: var(--ocean-clair);
  scale: 0;
  transition: scale .25s var(--ressort);
}
.cal-jour:hover:not(:disabled)::before { scale: 1; }
.cal-jour.aujourdhui::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 2px dashed var(--corail);
  border-radius: 50%;
}
.cal-jour.choisi { color: var(--encre); }
.cal-jour.choisi::before { scale: 1.08; background: var(--corail); animation: tache .45s var(--ressort); }
@keyframes tache { 0% { scale: 0; rotate: -40deg; } 60% { scale: 1.25; } 100% { scale: 1.08; rotate: 0deg; } }
.cal-jour.choisi span { font-weight: 800; }
.cal-jour:disabled { color: rgb(93 78 70 / .3); cursor: default; }
.cal-jour:focus-visible { outline: 3px solid var(--ocean); outline-offset: 0; }
.cal-choisie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: -4px; font-weight: 600; }
.cal-choisie-date { padding: .3em .8em; border-radius: 999px; background: var(--corail-clair); }

/* ── L'atelier : choisir ses pièces et leur quantité ───────────────────── */
.produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.produit {
  --c: var(--sauge-clair);
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  border: 3px solid var(--cacao);
  border-radius: 22px;
  background: var(--papier);
  box-shadow: 0 5px 0 var(--cacao);
  overflow: hidden;
  transition: transform .25s var(--ressort), background-color .3s;
}
.produit.choisi { background: var(--c); transform: rotate(-1deg); }
.produit-carte {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px 10px 8px;
  border: 0;
  background: none;
  color: var(--cacao);
  font: 800 1.02rem/1.15 var(--police-titre);
  text-align: center;
  cursor: pointer;
}
.produit-carte:disabled { cursor: default; }
.produit-image { display: grid; place-items: center; width: 92px; height: 92px; }
.produit-image img, .produit-image svg { width: 100%; height: 100%; object-fit: contain; }
.produit-carte:hover:not(:disabled) .produit-image { animation: gigoter .5s ease-in-out; }
.produit-nom { display: grid; gap: 2px; }
.produit-qte {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px 12px;
}
.produit-qte button {
  width: 38px;
  height: 38px;
  border: 2.5px solid var(--cacao);
  border-radius: 50%;
  background: var(--papier);
  color: var(--cacao);
  font: 900 1.3rem/1 var(--police-titre);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--cacao);
  transition: transform .2s var(--ressort);
}
.produit-qte button:hover:not(:disabled) { transform: translateY(-2px); background: var(--sable); }
.produit-qte button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--cacao); }
.produit-qte button:disabled { opacity: .3; cursor: default; }
.produit-qte output { min-width: 1.6em; font: 900 1.6rem/1 var(--police-titre); text-align: center; }
.produit-qte output.pop { animation: pop .35s var(--ressort); }
.produits-total { font: 800 1.15rem/1.2 var(--police-titre); text-align: center; }
.places { color: var(--corail-texte); }
@media (max-width: 520px) {
  .produits { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .produit { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; align-items: center; }
  .produit-carte { grid-template-columns: 58px minmax(0, 1fr); justify-items: start; align-items: center; gap: 12px; padding: 10px 6px 10px 12px; text-align: left; }
  .produit-image { width: 58px; height: 58px; }
  .produit-qte { padding: 8px 12px 8px 0; gap: 6px; }
  .produit .choix-note { top: 4px; right: auto; left: 46px; }
}

/* ── La fenêtre d'un atelier (son formulaire à lui) ────────────────────── */
.fenetre-atelier {
  --fond: var(--ocean);
  width: min(720px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cacao);
  overflow: visible;
}
.fenetre-atelier[data-theme="corail"] { --fond: var(--corail); }
.fenetre-atelier[data-theme="sauge"] { --fond: var(--sauge); }
.fenetre-atelier::backdrop { background: rgb(62 51 45 / .55); backdrop-filter: blur(3px); }
.fenetre-atelier[open] { animation: fenetre-entre .45s var(--ressort); }
.fenetre-atelier[open]::backdrop { animation: fondu .3s ease; }
@keyframes fenetre-entre { from { opacity: 0; transform: translateY(40px) rotate(-2deg) scale(.96); } }
@keyframes fondu { from { opacity: 0; } }
html.fenetre-ouverte { overflow: hidden; }
.fenetre-boite {
  position: relative;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 3px solid var(--encre);
  border-radius: 32px;
  background: var(--fond);
  box-shadow: 10px 10px 0 var(--encre);
}
.fenetre-tete { padding: 26px 70px 18px 28px; color: var(--encre); }
.fenetre-surtitre { font: 400 1.3rem/1 var(--police-script); }
.fenetre-titre { margin-top: .2rem; font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--encre); }
.fenetre-infos { margin-bottom: 0; }
.fenetre-fermer {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--encre);
  border-radius: 50%;
  background: var(--papier);
  color: var(--encre);
  font: 900 1.7rem/1 var(--police-titre);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--encre);
  transition: transform .25s var(--ressort);
}
.fenetre-fermer:hover { transform: rotate(90deg) scale(1.05); }
.fenetre-formulaires .formulaire {
  min-height: 460px;
  margin: 0 10px 10px;
  border-width: 3px;
  border-radius: 24px;
  box-shadow: none;
}
@media (max-width: 520px) {
  .fenetre-atelier { width: 100vw; max-height: 100dvh; }
  .fenetre-boite { max-height: 100dvh; border-radius: 0; border-width: 0; box-shadow: none; }
  .fenetre-tete { padding: 18px 64px 12px 18px; }
  .fenetre-formulaires .formulaire { margin: 0 6px 6px; min-height: 0; }
}

/* ── Billets : pièces proposées, places, complet ───────────────────────── */
.billet-pieces { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.billet-pieces li {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgb(253 248 242 / .72);
  font-size: .7rem;
  text-align: center;
  overflow: hidden;
  transition: transform .3s var(--ressort);
}
.billet-pieces li:hover { transform: rotate(-10deg) scale(1.12); }
.billet-pieces img { width: 84%; height: 84%; object-fit: contain; }
.billet-places { display: inline-block; margin-top: 12px; padding: .3em .8em; border-radius: 999px; background: var(--papier); color: var(--corail-texte); font-weight: 700; }
.bouton-complet { --fond: var(--sable); --texte: var(--cacao); cursor: default; }
.bouton-complet:hover { transform: none; box-shadow: 0 5px 0 var(--ombre); }
.choix:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Contact : la ligne du lieu mène à la carte ────────────────────────── */
.contact-infos .contact-lieu { flex-wrap: wrap; }
.contact-lieu-voir {
  padding: .15em .7em;
  border-radius: 999px;
  background: var(--corail);
  color: var(--encre) !important;
  font: 400 1rem/1.3 var(--police-script) !important;
  rotate: -3deg;
  transition: rotate .3s var(--ressort), translate .3s var(--ressort);
}
.contact-lieu:hover .contact-lieu-voir { rotate: 3deg; translate: 0 3px; }

/* ── La carte de Playa del Coco ────────────────────────────────────────── */
.carte { position: relative; padding-block: clamp(64px, 8vw, 110px) clamp(40px, 6vw, 70px); background: var(--ocean-clair); }
.carte .vague { color: var(--ocean-clair); }
.carte-grille {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.carte-texte .bouton { margin-top: 1.6rem; }
.carte-astuce { margin-top: 1.2rem; font: 400 1.25rem/1 var(--police-script); color: var(--corail-texte); rotate: -3deg; }
.carte-cadre { rotate: 1deg; transition: rotate .5s var(--ressort); }
.carte-cadre:hover { rotate: 0deg; }
.carte-dessin { width: 100%; height: auto; filter: drop-shadow(10px 10px 0 var(--cacao)); overflow: visible; }
.carte-dessin text { font-family: var(--police-titre); fill: var(--cacao); }
.carte-nom { font: 400 38px var(--police-script); fill: #3F7F8F !important; }
.carte-baie { font-size: 30px; }
.carte-petit { font: 700 20px var(--police-texte) !important; opacity: .8; }
.carte-region { font: 800 22px var(--police-titre); letter-spacing: .18em; opacity: .45; text-transform: uppercase; }
.carte-titre-lieu { font: 900 44px var(--police-titre); paint-order: stroke; stroke: #FDF8F2; stroke-width: 10px; stroke-linejoin: round; }
.carte-sous-lieu { font: 400 26px var(--police-script) !important; fill: var(--corail-texte) !important; }
.carte-n { font: 900 22px var(--police-titre); }
.epingle-texte { font: 400 24px var(--police-script) !important; fill: #FDF8F2 !important; }
.bijou { cursor: pointer; outline: none; }
.bijou-corps { transform-box: fill-box; transform-origin: center; transition: scale .25s var(--ressort); }
.bijou:hover .bijou-corps, .bijou:focus-visible .bijou-corps { scale: 1.25; }
.bijou:focus-visible .bijou-corps { filter: drop-shadow(0 0 4px #FDF8F2) drop-shadow(0 0 2px #3E332D); }
.bijou.gigote .bijou-corps { animation: bijou 0.7s var(--ressort); }
@keyframes bijou { 0% { rotate: 0deg; scale: 1; } 30% { rotate: -25deg; scale: 1.45; } 60% { rotate: 18deg; } 100% { rotate: 0deg; scale: 1; } }

.cv { animation: vaguelette 3.6s ease-in-out infinite alternate; }
.cv2 { animation-duration: 4.4s; animation-delay: -1.2s; }
.cv3 { animation-duration: 5.1s; animation-delay: -2.4s; }
@keyframes vaguelette { from { translate: -14px 0; opacity: .55; } to { translate: 14px 0; opacity: 1; } }
.carte-ecume { animation: ecume 6s linear infinite; }
@keyframes ecume { to { stroke-dashoffset: -128; } }
.carte-rayons { animation: tourner 22s linear infinite; }
.carte-nuage { animation: nuage 38s ease-in-out infinite alternate; }
.carte-nuage-2 { animation-duration: 46s; animation-direction: alternate-reverse; }
@keyframes nuage { from { translate: -40px 0; } to { translate: 60px 0; } }
.bateau { animation: tanguer 3.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes tanguer { from { rotate: -6deg; translate: 0 -3px; } to { rotate: 5deg; translate: 0 4px; } }
.carte-bateau { animation: croisiere 30s ease-in-out infinite alternate; }
@keyframes croisiere { from { translate: -170px 60px; } to { translate: 20px -30px; } }
.carte-tortue .nageoire { transform-box: fill-box; transform-origin: 100% 100%; animation: nager 1.4s ease-in-out infinite alternate; }
.carte-tortue .n2, .carte-tortue .n4 { transform-origin: 0 100%; animation-delay: -.7s; }
@keyframes nager { to { rotate: 18deg; } }
.carte-tortue { animation: tortue-nage 26s ease-in-out infinite alternate; }
@keyframes tortue-nage { from { translate: -60px 40px; } to { translate: 90px -40px; } }
.palmes { transform-box: fill-box; transform-origin: 50% 90%; animation: palme 3s ease-in-out infinite alternate; }
.palmier-2 .palmes { animation-delay: -1s; }
.palmier-3 .palmes { animation-delay: -2s; }
@keyframes palme { from { rotate: -5deg; } to { rotate: 6deg; } }
.carte-crabe { animation: crabe 9s ease-in-out infinite alternate; }
@keyframes crabe { from { translate: -40px 0; } to { translate: 50px -18px; } }
.crabe { animation: pattes .3s steps(2) infinite; }
@keyframes pattes { to { translate: 0 -2px; } }
.carte-mouettes { animation: mouettes 18s linear infinite; }
@keyframes mouettes { from { translate: -700px 30px; } to { translate: 700px -20px; } }
/* l'épingle tombe à l'arrivée, et retombe quand on vient du Contact */
.epingle { transform-box: fill-box; transform-origin: 50% 100%; }
.avec-js .carte:not(.arrivee) .epingle { opacity: 0; }
.carte.arrivee .epingle { animation: epingle-tombe .9s cubic-bezier(.3, .7, .4, 1) both; }
.carte.arrivee .epingle.retombe { animation: epingle-tombe .9s cubic-bezier(.3, .7, .4, 1) both; animation-name: epingle-retombe; }
@keyframes epingle-tombe {
  0% { opacity: 0; translate: 0 -220px; scale: .9 1.15; }
  55% { opacity: 1; translate: 0 0; scale: 1.2 .8; }
  75% { translate: 0 -24px; scale: .95 1.08; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes epingle-retombe {
  0% { translate: 0 -220px; scale: .9 1.15; }
  55% { translate: 0 0; scale: 1.2 .8; }
  75% { translate: 0 -24px; scale: .95 1.08; }
  100% { translate: 0 0; scale: 1; }
}
.carte.arrivee .epingle-bulle { animation: tamponner .5s var(--ressort) .8s both; }
.carte:not(.en-vue) * { animation-play-state: paused; }
@media (max-width: 900px) {
  .carte-grille { grid-template-columns: minmax(0, 1fr); }
  .carte-cadre { rotate: 0deg; }
  .carte-dessin { filter: drop-shadow(6px 6px 0 var(--cacao)); }
}
.pied-lieu a { text-decoration: none; }
.pied-lieu a:hover { text-decoration: underline wavy var(--corail) 2px; text-underline-offset: 5px; }
.pied > .pied-grille { padding-top: 48px; }
.pied { padding-top: 0; }

/* ── Mouvement réduit : tout est montré, rien ne bouge ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}