/* ==========================================================================
   CERA POTES — design system
   Palette échantillonnée dans le logo. Le bleu pétrole est traité en surface
   dominante : c'est la couleur majoritaire de l'identité, et cela évite le
   tout-terracotta attendu sur un site de poterie.
   ========================================================================== */

:root{
  --cp-ink:#1F455A;
  --cp-ink-deep:#122936;
  --cp-clay:#B05C33;
  --cp-clay-hi:#C87344;
  --cp-cacao:#4A3218;
  --cp-cream:#FAF0E6;
  --cp-shell:#FFF7EE;
  --cp-sand:#D8C4AC;

  --cp-display:"Fredoka",system-ui,sans-serif;
  --cp-body:"Nunito",system-ui,sans-serif;
  --cp-script:"Yellowtail",cursive;

  --cp-wrap:1240px;
  --cp-pad:clamp(20px,5vw,52px);
  --cp-squish:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cp-cream);color:var(--cp-cacao);
  font:400 18px/1.7 var(--cp-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--cp-display);color:var(--cp-ink);margin:0;line-height:1.05;letter-spacing:-.03em}
p{margin:0 0 1.1em}p:last-child{margin-bottom:0}

.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:10000;background:var(--cp-clay);color:var(--cp-shell);
  padding:12px 20px;border-radius:0 0 12px 0;font-family:var(--cp-display);font-weight:600;
}
.skip:focus{left:0}

.wrap{max-width:var(--cp-wrap);margin-inline:auto;padding-inline:var(--cp-pad)}
.wrap--narrow{max-width:820px}
.band{padding-block:clamp(72px,10vw,138px);position:relative}
.band--ink{background:var(--cp-ink);color:var(--cp-cream)}
.band--ink h2,.band--ink h3,.band--ink h4{color:var(--cp-cream)}
.band--cacao{background:var(--cp-cacao);color:var(--cp-cream)}
.band--cacao h2,.band--cacao h3{color:var(--cp-cream)}
.band--tight{padding-block:clamp(52px,7vw,90px)}

.script{font-family:var(--cp-script);color:var(--cp-clay);font-size:clamp(26px,3.6vw,42px);line-height:1.2}
.band--ink .script,.band--cacao .script{color:var(--cp-sand)}
.eyebrow{
  font-family:var(--cp-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:13px;color:var(--cp-clay);margin-bottom:16px;
}
.band--ink .eyebrow,.band--cacao .eyebrow{color:var(--cp-sand)}
h1{font-size:clamp(38px,7vw,86px);font-weight:700}
h2{font-size:clamp(34px,5.8vw,68px);font-weight:700}
h3{font-size:clamp(20px,2.5vw,29px);font-weight:600}
h4{font-size:clamp(18px,2vw,22px);font-weight:600}
.lede{font-size:clamp(17px,1.8vw,21px);max-width:56ch}
.center{text-align:center}
.center .lede{margin-inline:auto}
.center .eyebrow{text-align:center}

/* ---------- Matière molle : tout réagit au toucher ---------- */
.squish{transition:transform .4s var(--cp-squish)}
.squish:hover,.squish:focus-visible{transform:scale(1.035) rotate(-1.4deg)}

.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--cp-display);
  font-weight:600;font-size:17px;padding:16px 30px;border-radius:999px;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .4s var(--cp-squish),background-color .3s,color .3s;
}
.btn:hover{transform:translateY(-4px) scale(1.03) rotate(-1deg)}
/* Double classe volontaire : une règle « .elementor-kit-N a » pèse (0,2,0) et
   écrasait la couleur du texte, rendant le bouton d'appel illisible. Le thème
   ne doit pas dépendre de l'ordre de chargement des feuilles pour rester juste. */
.btn.btn--clay{background:var(--cp-clay);color:var(--cp-shell)}
.btn.btn--clay:hover{background:var(--cp-clay-hi)}
.btn.btn--ghost{border-color:currentColor;background:none}
.band--ink .btn.btn--ghost,.band--cacao .btn.btn--ghost{color:var(--cp-cream)}
:focus-visible{outline:3px solid var(--cp-clay);outline-offset:4px;border-radius:8px}
.band--ink :focus-visible,.band--cacao :focus-visible{outline-color:var(--cp-sand)}

/* ---------- Objets flottants : ni barre de nav, ni header collant ---------- */
.badge{
  position:fixed;top:clamp(14px,2.2vw,26px);left:clamp(14px,2.2vw,26px);z-index:100;
  width:clamp(60px,6.6vw,88px);height:clamp(60px,6.6vw,88px);border-radius:50%;
  background:var(--cp-shell);border:2px solid var(--cp-cacao);display:grid;place-items:center;
  box-shadow:0 12px 28px -12px rgba(74,50,24,.55);
}
.badge img{width:78%}
.dock{
  position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);z-index:100;
  display:flex;gap:10px;align-items:center;
}
.dock .btn{box-shadow:0 16px 36px -14px rgba(74,50,24,.7)}
.dock__hint{
  font-family:var(--cp-script);font-size:21px;color:var(--cp-clay);background:var(--cp-shell);
  border:1.5px solid var(--cp-sand);padding:5px 16px 8px;border-radius:999px;transform:rotate(-3deg);
}
@media (max-width:820px){.dock__hint{display:none}}

/* ---------- Le burger : trois colombins roulés à la main ---------- */
.burger{
  position:fixed;top:clamp(14px,2.2vw,26px);right:clamp(14px,2.2vw,26px);z-index:9992;
  width:clamp(60px,6.6vw,80px);height:clamp(60px,6.6vw,80px);border-radius:50%;
  background:var(--cp-shell);border:2px solid var(--cp-cacao);cursor:pointer;padding:0;
  display:grid;place-content:center;gap:6px;
  box-shadow:0 12px 28px -12px rgba(74,50,24,.55);
  transition:transform .4s var(--cp-squish),background-color .3s;
}
.burger:hover{transform:scale(1.07) rotate(-4deg)}
.burger i{display:block;height:5px;border-radius:99px;transform-origin:center}
.burger i:nth-child(1){width:32px;background:var(--cp-ink)}
.burger i:nth-child(2){width:26px;background:var(--cp-clay);margin-left:3px}
.burger i:nth-child(3){width:30px;background:var(--cp-cacao)}
.burger.is-open{background:var(--cp-clay);border-color:var(--cp-shell)}
.burger.is-open i{background:var(--cp-shell)}

/* ---------- Menu plein écran ---------- */
.menu{
  position:fixed;inset:0;z-index:9990;background:var(--cp-ink);color:var(--cp-cream);
  display:grid;place-items:center;visibility:hidden;
  /* Huit entrées peuvent dépasser la hauteur d'écran : on autorise le
     défilement vertical, en gardant l'horizontal masqué pour le clip-path. */
  overflow-x:hidden;overflow-y:auto;
  padding:clamp(84px,12vw,110px) var(--cp-pad) clamp(28px,5vw,56px);
}
.menu.is-open{visibility:visible}
.menu__star{position:absolute;width:min(120vh,120vw);aspect-ratio:1;color:var(--cp-cream);opacity:.045;pointer-events:none}
.menu__in{position:relative;text-align:center;width:100%}
.menu__list{list-style:none;margin:0;padding:0}
.menu__list li{overflow:hidden}
.menu__list a{
  font-family:var(--cp-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(27px,5.4vw,58px);line-height:1.18;color:var(--cp-cream);
  text-decoration:none;display:inline-flex;align-items:center;gap:clamp(10px,1.6vw,22px);
  transition:color .3s,transform .4s var(--cp-squish);
}
.menu__list a:hover,.menu__list a:focus-visible{color:var(--cp-sand);transform:translateX(12px) rotate(-1.4deg)}
.menu__list .current-menu-item a{color:var(--cp-sand)}
.menu__hand{
  width:clamp(24px,3.4vw,50px);flex:none;color:var(--cp-clay);
  opacity:0;transform:scale(.4) rotate(-24deg);
  transition:opacity .3s,transform .4s var(--cp-squish);
}
.menu__list a:hover .menu__hand,.menu__list a:focus-visible .menu__hand,
.menu__list .current-menu-item .menu__hand{opacity:1;transform:scale(1) rotate(0)}
.menu__foot{
  margin-top:clamp(26px,4vw,48px);display:flex;flex-wrap:wrap;gap:14px 26px;
  justify-content:center;align-items:center;font-family:var(--cp-display);font-weight:500;
}
.menu__foot a{color:var(--cp-cream);text-decoration:none;border-bottom:2px solid rgba(216,196,172,.45)}
.menu__foot a:hover{border-color:var(--cp-clay)}
.menu__note{font-family:var(--cp-script);color:var(--cp-sand);font-size:24px}
.menu :focus-visible{outline-color:var(--cp-sand)}
body.is-locked{overflow:hidden}

/* ---------- HÉROS D'ACCUEIL : le tour occupe l'écran ---------- */
.stage{
  min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:clamp(96px,13vw,140px) var(--cp-pad) clamp(56px,8vw,90px);position:relative;
}
.wheel{position:relative;width:min(76vw,clamp(280px,44vh,430px));aspect-ratio:1;margin-inline:auto}
.wheel__disc{position:absolute;inset:9%;border-radius:50%;overflow:hidden;
  box-shadow:0 34px 80px -30px rgba(31,69,90,.65);will-change:transform}
.wheel__disc img{width:100%;height:100%;object-fit:cover}
.wheel__arc{position:absolute;inset:0;overflow:visible;will-change:transform}
/* Circonférence 2π×44 ≈ 276 unités : au-delà de ~40 signes, le texte se recouvre. */
.wheel__arc text{
  font-family:var(--cp-display);font-weight:600;font-size:7.6px;
  letter-spacing:.26em;text-transform:uppercase;fill:var(--cp-cacao);
}
.wheel__ticks{position:absolute;inset:-6%;pointer-events:none}
.wheel__ticks circle{fill:none;stroke:var(--cp-sand);stroke-width:1.4;stroke-dasharray:2 12;stroke-linecap:round}
.stage h1{font-size:clamp(42px,9.2vw,124px);font-weight:700;margin:clamp(26px,4vw,44px) 0 0}
.stage h1 .l{display:block;overflow:hidden}
.stage h1 .l span{display:inline-block}
.stage h1 em{font-style:normal;color:var(--cp-clay)}
.stage__sub{font-family:var(--cp-display);font-weight:500;font-size:clamp(16px,2vw,22px);color:var(--cp-ink);margin-top:22px}
.stage__meta{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:26px}
.pill{
  font-family:var(--cp-display);font-weight:500;font-size:14.5px;background:var(--cp-shell);
  border:1.5px solid var(--cp-sand);padding:7px 16px;border-radius:999px;color:var(--cp-ink);
}

/* ---------- HÉROS DES PAGES INTERNES ----------
   Les deux mains du logo encadrent le titre : la bleue à gauche, la terracotta
   à droite, en très grand et très pâle. Elles débordent légèrement des bords
   pour éviter l'effet vignette posée. Purement décoratives, donc en
   pseudo-éléments : rien à gérer côté éditeur.                              */
.phero{overflow:hidden}
.phero::before,.phero::after{
  content:"";position:absolute;top:50%;z-index:0;pointer-events:none;
  width:clamp(210px,25vw,390px);aspect-ratio:1;opacity:.24;
  background-position:center;background-size:contain;background-repeat:no-repeat;
}
.phero::before{
  left:clamp(-130px,-7vw,-34px);transform:translateY(-46%) rotate(-17deg);opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%231F455A'%3E%3Crect x='30' y='50' width='44' height='38' rx='17'/%3E%3Crect x='31' y='22' width='11' height='40' rx='5.5' transform='rotate(-13 36.5 42)'/%3E%3Crect x='44' y='15' width='11' height='47' rx='5.5' transform='rotate(-3 49.5 38)'/%3E%3Crect x='57' y='19' width='11' height='43' rx='5.5' transform='rotate(7 62.5 40)'/%3E%3Crect x='69' y='31' width='10' height='32' rx='5' transform='rotate(17 74 47)'/%3E%3Crect x='17' y='43' width='11' height='32' rx='5.5' transform='rotate(-40 22.5 59)'/%3E%3C/svg%3E");
}
.phero::after{
  right:clamp(-130px,-7vw,-34px);transform:translateY(-46%) rotate(17deg) scaleX(-1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23B05C33'%3E%3Crect x='30' y='50' width='44' height='38' rx='17'/%3E%3Crect x='31' y='22' width='11' height='40' rx='5.5' transform='rotate(-13 36.5 42)'/%3E%3Crect x='44' y='15' width='11' height='47' rx='5.5' transform='rotate(-3 49.5 38)'/%3E%3Crect x='57' y='19' width='11' height='43' rx='5.5' transform='rotate(7 62.5 40)'/%3E%3Crect x='69' y='31' width='10' height='32' rx='5' transform='rotate(17 74 47)'/%3E%3Crect x='17' y='43' width='11' height='32' rx='5.5' transform='rotate(-40 22.5 59)'/%3E%3C/svg%3E");
}
/* Sous 820 px, les mains empièteraient sur le titre : on les retire. */
@media (max-width:820px){.phero::before,.phero::after{display:none}}
.phero>*{position:relative;z-index:1}
.phero .phero__star{width:52px}

/* ---------- HÉROS DES PAGES INTERNES ---------- */
.phero{
  padding:clamp(130px,16vw,190px) 0 clamp(50px,7vw,80px);text-align:center;position:relative;
}
.phero__crumb{
  font-family:var(--cp-display);font-weight:500;font-size:14px;color:var(--cp-clay);
  margin-bottom:18px;letter-spacing:.04em;
}
.phero__crumb a{text-decoration:none}
.phero__crumb a:hover{text-decoration:underline}
.phero h1{max-width:18ch;margin-inline:auto}
.phero .lede{margin:24px auto 0}
.phero__star{width:40px;color:var(--cp-clay);margin:0 auto 18px}

/* ---------- Bandeau défilant ---------- */
.marquee{background:var(--cp-clay);color:var(--cp-shell);padding:18px 0;overflow:hidden;border-block:2px solid var(--cp-cacao)}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__item{
  font-family:var(--cp-display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(15px,1.8vw,20px);display:flex;align-items:center;gap:28px;
  padding-right:28px;white-space:nowrap;
}
.marquee svg{width:17px;flex:none}

/* ---------- Établi : fiches posées de travers ---------- */
.bench{position:relative;display:grid;gap:clamp(26px,4vw,40px);margin-top:clamp(40px,6vw,64px)}
@media (min-width:900px){
  .bench{grid-template-columns:repeat(12,1fr);gap:0;min-height:1060px}
  .note:nth-child(1){grid-column:1/6;grid-row:1;transform:rotate(-2.5deg);z-index:1}
  .note:nth-child(2){grid-column:6/13;grid-row:1;margin-top:172px;transform:rotate(1.4deg);z-index:2}
  .note:nth-child(3){grid-column:2/8;grid-row:2;margin-top:-16px;transform:rotate(-1.2deg);z-index:3}
}
.note{
  background:var(--cp-shell);border:2px solid var(--cp-cacao);border-radius:24px;
  padding:clamp(22px,2.6vw,32px);box-shadow:0 24px 54px -30px rgba(74,50,24,.6);position:relative;
}
.note__shot{border-radius:18px;overflow:hidden;aspect-ratio:16/10;margin-bottom:22px}
.note__shot img{width:100%;height:100%;object-fit:cover}
.note h3{margin-bottom:8px}
.note p{font-size:16.5px;margin:0}
.note__fig{
  position:absolute;top:-22px;left:-18px;width:58px;height:58px;border-radius:50%;
  background:var(--cp-clay);color:var(--cp-shell);display:grid;place-items:center;
  font-family:var(--cp-display);font-weight:700;font-size:22px;border:2px solid var(--cp-cacao);
}
.note__fig svg{width:26px}

/* ---------- Créneaux ---------- */
.slots{display:grid;gap:clamp(20px,3vw,30px);margin-top:clamp(36px,5vw,56px)}
@media (min-width:820px){.slots{grid-template-columns:1fr 1fr}}
.slot{background:rgba(250,240,230,.07);border:2px solid rgba(216,196,172,.32);border-radius:26px;padding:clamp(24px,3vw,36px)}
.band:not(.band--ink) .slot{background:var(--cp-shell);border-color:var(--cp-sand)}
.slot__who{font-family:var(--cp-display);font-size:13px;text-transform:uppercase;letter-spacing:.18em;color:var(--cp-sand);margin-bottom:14px}
.band:not(.band--ink) .slot__who{color:var(--cp-clay)}
.slot__hour{font-family:var(--cp-display);font-weight:700;font-size:clamp(30px,4.2vw,48px);color:var(--cp-cream);line-height:1;margin:10px 0 4px}
.band:not(.band--ink) .slot__hour{color:var(--cp-ink)}
.slot__day{font-family:var(--cp-display);font-weight:600;font-size:19px;color:var(--cp-sand)}
.band:not(.band--ink) .slot__day{color:var(--cp-clay)}

/* ---------- Encart « information manquante » ---------- */
.todo{
  background:rgba(176,92,51,.24);border:1.5px dashed var(--cp-clay);border-radius:14px;
  padding:12px 16px;font-size:14.5px;color:var(--cp-cream);margin-top:20px;
}
.todo strong{color:#F2C9AE}
.band:not(.band--ink):not(.band--cacao) .todo{background:#FFF3CD;color:var(--cp-cacao)}
.band:not(.band--ink):not(.band--cacao) .todo strong{color:var(--cp-clay)}

/* ---------- LE FEU ---------- */
.fire{background:var(--cp-cacao);color:var(--cp-cream);overflow:hidden}
.fire h2{color:var(--cp-cream)}
.kiln{
  position:relative;width:min(100%,560px);aspect-ratio:1;margin:clamp(32px,5vw,48px) auto 0;
  border-radius:50%;overflow:hidden;border:3px solid var(--cp-sand);
}
.kiln img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kiln__fired{opacity:0}
.fire__labels{
  display:flex;justify-content:space-between;max-width:min(100%,560px);margin:22px auto 0;
  font-family:var(--cp-display);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:14px;
}
.fire__labels span:first-child{color:#9C9384}
.fire__labels span:last-child{color:var(--cp-clay-hi)}

/* ---------- Carte de fidélité ---------- */
.loyalty{text-align:center}
.loyalty__card{
  max-width:900px;margin:clamp(36px,5vw,56px) auto 0;background:var(--cp-shell);
  border:2.5px solid var(--cp-cacao);border-radius:28px;
  padding:clamp(30px,4.4vw,54px) clamp(20px,4vw,50px);position:relative;
  box-shadow:0 34px 80px -38px rgba(74,50,24,.75);transform:rotate(-1deg);
}
.loyalty__title{font-family:var(--cp-display);font-weight:600;font-size:clamp(22px,3.4vw,38px);color:var(--cp-cacao);text-transform:uppercase;letter-spacing:.03em}
.stamps{display:flex;justify-content:center;gap:clamp(8px,2.4vw,28px);margin:clamp(28px,4vw,44px) 0 26px}
.stamp{
  width:clamp(56px,10.5vw,112px);aspect-ratio:1;border-radius:50%;
  border:2px dashed var(--cp-sand);display:grid;place-items:center;position:relative;
  background:none;padding:0;cursor:pointer;color:inherit;
  transition:border-color .3s,transform .4s var(--cp-squish);
}
.stamp:hover{transform:scale(1.07) rotate(-4deg);border-color:var(--cp-clay);animation-play-state:paused}
@keyframes invite{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
.stamp:not(.is-done){animation:invite 2.6s ease-in-out infinite}
.stamp:nth-child(2){animation-delay:.18s}
.stamp:nth-child(3){animation-delay:.36s}
.stamp:nth-child(4){animation-delay:.54s}
.stamp:nth-child(5){animation-delay:.72s}
.stamp svg{width:58%;opacity:0;pointer-events:none}
.stamp.is-done{border-style:solid}
.loyalty__rule{
  font-family:var(--cp-display);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  font-size:clamp(12.5px,1.7vw,17px);color:var(--cp-cacao);
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
}
.loyalty__rule .dot{width:6px;height:6px;border-radius:50%;background:var(--cp-clay)}
.gift{
  position:absolute;left:clamp(-8px,2vw,28px);bottom:-30px;background:var(--cp-clay);color:var(--cp-shell);
  font-family:var(--cp-script);font-size:clamp(23px,3vw,33px);padding:11px 32px 16px;border-radius:999px;
  white-space:nowrap;box-shadow:0 16px 32px -14px rgba(74,50,24,.8);transform:rotate(-5deg) scale(0);opacity:0;
}
.tap{font-family:var(--cp-script);color:var(--cp-clay);font-size:22px;margin-top:56px}

/* ---------- Deux colonnes image / texte ---------- */
.duo{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:900px){.duo{grid-template-columns:1.05fr .95fr}.duo>*{min-width:0}}
.duo--flip>*:first-child{order:2}
@media (max-width:899px){.duo--flip>*:first-child{order:0}}
.duo__shot{border-radius:56% 44% 48% 52%/45% 52% 48% 55%;overflow:hidden;aspect-ratio:5/4;box-shadow:0 30px 66px -34px rgba(0,0,0,.5)}
.duo__shot img{width:100%;height:100%;object-fit:cover}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 32px}
.tag{font-family:var(--cp-display);font-weight:500;font-size:14.5px;background:var(--cp-shell);color:var(--cp-ink);padding:7px 16px;border-radius:999px}
.band:not(.band--ink) .tag{background:var(--cp-ink);color:var(--cp-cream)}

/* ---------- Galerie ---------- */
.strip{
  display:flex;gap:20px;width:max-content;margin-top:clamp(34px,5vw,52px);will-change:transform;
  padding-left:max(var(--cp-pad),calc((100vw - var(--cp-wrap))/2 + var(--cp-pad)));
}
.strip figure{margin:0;width:clamp(200px,25vw,310px)}
.strip img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:22px}
.strip figure:nth-child(3n+2) img{border-radius:52% 48% 44% 56%/48% 44% 56% 52%}
.grid-gal{display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:clamp(34px,5vw,52px)}
.grid-gal figure{margin:0}
.grid-gal img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:22px}
.grid-gal figure:nth-child(3n+2) img{border-radius:52% 48% 44% 56%/48% 44% 56% 52%}

/* ---------- Tarifs ---------- */
.prices{display:grid;gap:clamp(18px,2.6vw,26px);margin-top:clamp(32px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.price{background:var(--cp-shell);border:2px solid var(--cp-cacao);border-radius:24px;padding:clamp(24px,3vw,34px);position:relative}
.price__label{font-family:var(--cp-display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--cp-clay);margin-bottom:12px}
.price__amount{font-family:var(--cp-display);font-weight:700;font-size:clamp(32px,4.4vw,52px);color:var(--cp-ink);line-height:1}
.price__unit{font-size:16px;color:var(--cp-cacao);margin-top:8px}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(32px,4vw,48px);display:grid;gap:14px}
.faq details{
  background:var(--cp-shell);border:2px solid var(--cp-sand);border-radius:20px;
  padding:4px 22px;transition:border-color .3s;
}
.faq details[open]{border-color:var(--cp-cacao)}
.faq summary{
  font-family:var(--cp-display);font-weight:600;font-size:clamp(17px,2vw,21px);color:var(--cp-ink);
  padding:18px 34px 18px 0;cursor:pointer;list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:2px;top:50%;width:14px;height:14px;
  border-right:3px solid var(--cp-clay);border-bottom:3px solid var(--cp-clay);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .faq__a{padding:0 0 20px;font-size:16.5px}

/* ---------- Infos pratiques ---------- */
.infos{display:grid;gap:clamp(20px,3vw,32px);margin-top:clamp(32px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.info{background:var(--cp-shell);border:2px solid var(--cp-sand);border-radius:22px;padding:26px}
.info h3{font-size:19px;margin-bottom:10px}
.info p{font-size:16.5px;margin:0}
.info a{color:var(--cp-clay);font-weight:600}
/* Sur une bande sombre, une carte crème produit un bloc blanc parasite et un
   texte crème sur crème, donc illisible. Même traitement translucide que les
   créneaux, et liens en sable pour le contraste. */
.band--ink .info,.band--cacao .info{
  background:rgba(250,240,230,.07);border-color:rgba(216,196,172,.32)}
.band--ink .info a,.band--cacao .info a{color:var(--cp-sand)}

/* ---------- Formulaire ---------- */
.form{margin-top:clamp(28px,4vw,44px);display:grid;gap:18px}
@media (min-width:720px){.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}}
.field label{display:block;font-family:var(--cp-display);font-weight:600;font-size:15px;color:var(--cp-ink);margin-bottom:7px}
/* Le formulaire vit sur la bande bleue : le libellé doit passer en crème. */
.band--ink .field label,.band--cacao .field label{color:var(--cp-cream)}
.band--ink .form__note,.band--cacao .form__note{color:var(--cp-sand)}
.field--check label{font-family:var(--cp-body);font-weight:400;line-height:1.5}
.field input,.field select,.field textarea{
  width:100%;font:400 17px/1.5 var(--cp-body);color:var(--cp-cacao);background:var(--cp-shell);
  border:2px solid var(--cp-sand);border-radius:14px;padding:13px 16px;transition:border-color .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cp-clay);outline:none}
.field textarea{min-height:130px;resize:vertical}
.field--check{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.field--check input{width:auto;margin-top:4px;flex:none}
.form__note{font-size:15px;color:var(--cp-cacao);opacity:.85}

/* ==========================================================================
   WIDGETS ELEMENTOR NATIFS, HABILLÉS AUX COULEURS DU THÈME
   ---------------------------------------------------------------------------
   Sept sections utilisent des widgets natifs (accordéon, icon-box, titre,
   texte, image, bouton) plutôt que du sur-mesure : la cliente garde les
   contrôles Elementor qu'elle connaît, et l'apparence reste pilotée ici.

   Les classes de mise en page sont posées sur les conteneurs via le champ
   « Classes CSS ». Elles sont préfixées .e-con pour peser (0,2,0) et passer
   devant les réglages par défaut du conteneur Elementor, sans dépendre de
   l'ordre de chargement des feuilles.
   ========================================================================== */

.e-con.cp-row{
  display:grid!important;gap:clamp(18px,2.6vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:stretch;
}
.e-con.cp-duo{display:grid!important;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:900px){.e-con.cp-duo{grid-template-columns:1.05fr .95fr}}
.e-con.cp-duo>*{min-width:0}
.e-con.cp-duo.cp-duo--flip>*:first-child{order:2}
@media (max-width:899px){.e-con.cp-duo.cp-duo--flip>*:first-child{order:0}}
.e-con.cp-narrow{max-width:820px;margin-inline:auto}
.cp-center{text-align:center}
.cp-center .elementor-widget-container{margin-inline:auto}

/* ---- Cartes : icon-box en fiche ---- */
.cp-row .elementor-widget-icon-box{
  background:var(--cp-shell);border:2px solid var(--cp-sand);border-radius:22px;
  padding:26px;
}
.band--ink .cp-row .elementor-widget-icon-box,
.band--cacao .cp-row .elementor-widget-icon-box{
  background:rgba(250,240,230,.07);border-color:rgba(216,196,172,.32);
}
.elementor-icon-box-title{margin:0 0 10px}
.elementor-icon-box-title,.elementor-icon-box-title span{
  font-family:var(--cp-display);font-weight:700;color:var(--cp-ink);line-height:1.05;letter-spacing:-.02em}
.band--ink .elementor-icon-box-title,.band--ink .elementor-icon-box-title span,
.band--cacao .elementor-icon-box-title,.band--cacao .elementor-icon-box-title span{color:var(--cp-cream)}
.elementor-icon-box-description{font-size:16.5px;margin:0;color:inherit}
.elementor-icon-box-description a{color:var(--cp-clay);font-weight:600}
.band--ink .elementor-icon-box-description a,
.band--cacao .elementor-icon-box-description a{color:var(--cp-cream)}
.band--ink .elementor-icon-box-description,
.band--cacao .elementor-icon-box-description{color:var(--cp-sand)}
/* Les fiches « chiffre » (créneaux, tarifs) portent la valeur en gros. */
.cp-figures .elementor-icon-box-title,.cp-figures .elementor-icon-box-title span{
  font-size:clamp(30px,4.2vw,48px)}
.cp-figures .elementor-widget-icon-box{text-align:center}

/* ---- Accordéon natif ---- */
.elementor-accordion{display:grid;gap:14px}
.elementor-accordion .elementor-accordion-item{
  background:var(--cp-shell);border:2px solid var(--cp-sand);border-radius:20px;
  overflow:hidden;transition:border-color .3s}
.band--ink .elementor-accordion .elementor-accordion-item,
.band--cacao .elementor-accordion .elementor-accordion-item{
  background:rgba(250,240,230,.07);border-color:rgba(216,196,172,.32)}
.elementor-accordion .elementor-tab-title{
  font-family:var(--cp-display);font-weight:600;font-size:clamp(17px,2vw,21px);
  padding:18px 22px;border:0;background:none}
.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-accordion-title{color:var(--cp-ink);text-decoration:none}
.band--ink .elementor-accordion .elementor-tab-title a,
.band--ink .elementor-accordion .elementor-accordion-title,
.band--cacao .elementor-accordion .elementor-tab-title a,
.band--cacao .elementor-accordion .elementor-accordion-title{color:var(--cp-cream)}
.elementor-accordion .elementor-accordion-icon{color:var(--cp-clay);width:1em}
.elementor-accordion .elementor-tab-content{
  border:0;padding:0 22px 20px;font-size:16.5px;font-family:var(--cp-body)}
.band--ink .elementor-accordion .elementor-tab-content,
.band--cacao .elementor-accordion .elementor-tab-content{color:var(--cp-sand)}
.elementor-accordion .elementor-tab-content a{color:var(--cp-clay);font-weight:600}
.band--ink .elementor-accordion .elementor-tab-content a{color:var(--cp-cream)}

/* ---- Bouton natif ---- */
.elementor-widget-button .elementor-button{
  font-family:var(--cp-display)!important;font-weight:600!important;font-size:17px!important;
  background:var(--cp-clay);color:var(--cp-shell);border-radius:999px!important;
  padding:16px 30px!important;border:2px solid transparent;
  transition:transform .4s var(--cp-squish),background-color .3s}
.elementor-widget-button .elementor-button:hover{
  background:var(--cp-clay-hi);color:var(--cp-shell);
  transform:translateY(-4px) scale(1.03) rotate(-1deg)}
/* Variante contour, via la classe CSS du widget. */
.cp-btn-ghost .elementor-button{background:none;border-color:currentColor;color:var(--cp-ink)}
.band--ink .cp-btn-ghost .elementor-button,
.band--cacao .cp-btn-ghost .elementor-button{color:var(--cp-cream)}
.cp-btn-ghost .elementor-button:hover{background:var(--cp-clay);border-color:transparent;color:var(--cp-shell)}

/* ---- Galerie native Elementor Pro (photos cliquables en lightbox) ----
   e-gallery construit une vraie grille CSS et place chaque item explicitement
   via --column / --row. On se contente donc d'habiller les vignettes, et pour
   la bande horizontale on remplace les colonnes fixes par des colonnes
   implicites de largeur constante : le placement d'origine reste valable. */
.elementor-gallery-item{
  border-radius:22px;overflow:hidden;
  box-shadow:0 18px 40px -24px rgba(74,50,24,.55);
  transition:transform .45s var(--cp-squish),box-shadow .45s}
.elementor-gallery-item:nth-child(3n+2){border-radius:52% 48% 44% 56%/48% 44% 56% 52%}
.elementor-gallery-item:hover{transform:scale(1.03) rotate(-1.2deg)}
.elementor-gallery-item:focus-visible{outline:3px solid var(--cp-clay);outline-offset:4px}

.cp-clip{overflow:hidden}
/* Passage en flex plutôt qu'en grille : e-gallery ne place pas ses vignettes
   via grid-column, donc retirer les colonnes explicites les empilerait toutes
   au même endroit. En flex, l'ordre du DOM suffit. */
.cp-strip .elementor-gallery__container{
  display:flex!important;flex-wrap:nowrap!important;
  gap:20px;width:max-content;
  padding-left:max(var(--cp-pad),calc((100vw - var(--cp-wrap))/2 + var(--cp-pad)));
  will-change:transform;
}
.cp-strip .e-gallery-item{flex:0 0 clamp(200px,25vw,310px);aspect-ratio:4/5}
.cp-strip .e-gallery-image{width:100%;height:100%}

/* ---- Image en duo : forme tournée main ---- */
.cp-shot img{
  border-radius:56% 44% 48% 52%/45% 52% 48% 55%;
  aspect-ratio:5/4;object-fit:cover;width:100%;
  box-shadow:0 30px 66px -34px rgba(0,0,0,.5)}

/* ---- Surtitre et chapô en widgets natifs ---- */
.cp-eyebrow .elementor-heading-title{
  font-family:var(--cp-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:13px;color:var(--cp-clay)}
.band--ink .cp-eyebrow .elementor-heading-title,
.band--cacao .cp-eyebrow .elementor-heading-title{color:var(--cp-sand)}
.cp-lede,.cp-lede p{font-size:clamp(17px,1.8vw,21px);max-width:56ch}
.cp-center .cp-lede,.cp-center .cp-lede p{margin-inline:auto}

/* ---- Téléphone géant ---- */
.cp-tel .elementor-heading-title{font-size:clamp(34px,9.4vw,120px);letter-spacing:-.035em;line-height:1}
.cp-tel .elementor-heading-title a{
  color:var(--cp-cream);text-decoration:none;display:inline-block;
  transition:transform .45s var(--cp-squish)}
.cp-tel .elementor-heading-title a:hover{transform:scale(1.05) rotate(-1.2deg)}

/* ==========================================================================
   LES SECTIONS SIGNATURE, EN WIDGETS NATIFS
   ---------------------------------------------------------------------------
   Plus aucun widget sur-mesure. Chaque section signature est bâtie avec des
   widgets Elementor standards (image, titre, liste, texte) placés dans des
   conteneurs porteurs d'une classe. Le CSS ci-dessous et le JS du thème leur
   donnent leur forme et leur mouvement ; la cliente édite tout normalement.
   ========================================================================== */

/* ---- Le tour : héros d'accueil ---- */
.cp-stage{min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:clamp(96px,13vw,140px) var(--cp-pad) clamp(56px,8vw,90px)}
.cp-stage>.e-con-inner,.cp-stage>*{width:100%}
.cp-wheel{position:relative;width:min(76vw,clamp(280px,44vh,430px));aspect-ratio:1;margin-inline:auto}
/* Le widget image devient le plateau qui tourne.
   Sa taille vient uniquement des inset : surtout pas de height:100%, qui
   écraserait le calcul par « bottom » et rendrait le plateau ovale. Le masque
   circulaire est porté par le widget lui-même, l'élément que GSAP fait tourner. */
.cp-wheel .elementor-widget-image{
  position:absolute;inset:9%;margin:0;height:auto;
  border-radius:50%;overflow:hidden;
  box-shadow:0 34px 80px -30px rgba(31,69,90,.65)}
.cp-wheel .elementor-widget-image>*{height:100%}
.cp-wheel .elementor-widget-image img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
/* Anneau pointillé et texte circulaire, injectés par le script. */
.cp-ticks{position:absolute;inset:-6%;pointer-events:none}
.cp-ticks circle{fill:none;stroke:var(--cp-sand);stroke-width:1.4;stroke-dasharray:2 12;stroke-linecap:round}
.cp-arc{position:absolute;inset:0;overflow:visible;pointer-events:none}
.cp-arc text{font-family:var(--cp-display);font-weight:600;font-size:7.6px;
  letter-spacing:.26em;text-transform:uppercase;fill:var(--cp-cacao)}
/* Le texte de l'arc reste éditable dans un champ titre, masqué à l'écran. */
.cp-arc-source{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.cp-stage h1{font-size:clamp(42px,9.2vw,124px);font-weight:700;margin:clamp(26px,4vw,44px) 0 0}
.cp-stage h1 em,.cp-stage h1 b,.cp-stage h1 strong{font-style:normal;font-weight:inherit;color:var(--cp-clay)}
.cp-split .l{display:block;overflow:hidden}
.cp-split .l>span{display:inline-block}
.cp-sub .elementor-heading-title,.cp-sub p{
  font-family:var(--cp-display);font-weight:500;font-size:clamp(16px,2vw,22px);color:var(--cp-ink)}

/* Pastilles : une liste d'icônes habillée. */
.cp-pills .elementor-icon-list-items{
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0;padding:0;list-style:none}
.cp-pills .elementor-icon-list-item{
  font-family:var(--cp-display);font-weight:500;font-size:14.5px;background:var(--cp-shell);
  border:1.5px solid var(--cp-sand);padding:7px 16px;border-radius:999px;color:var(--cp-ink)}
.cp-pills .elementor-icon-list-item a{text-decoration:none}

/* ---- Bandeau défilant ---- */
.cp-marquee{background:var(--cp-clay);color:var(--cp-shell);padding:18px 0;overflow:hidden;
  border-block:2px solid var(--cp-cacao)}
.cp-marquee .elementor-widget-icon-list,.cp-marquee .elementor-widget-container{overflow:visible}
.cp-marquee .elementor-icon-list-items{
  display:flex;width:max-content;margin:0;padding:0;list-style:none;
  align-items:center;will-change:transform}
.cp-marquee .elementor-icon-list-item{
  font-family:var(--cp-display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(15px,1.8vw,20px);display:flex;align-items:center;white-space:nowrap;
  color:var(--cp-shell);padding:0}
.cp-marquee .elementor-widget-icon-list .elementor-icon-list-item::after{
  content:""!important;position:static!important;border:0!important;
  width:17px!important;height:17px!important;flex:none;margin:0 28px!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23FFF7EE'%3E%3Cellipse cx='50' cy='50' rx='5' ry='46'/%3E%3Cellipse cx='50' cy='50' rx='5' ry='46' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='5' ry='46' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='5' ry='46' transform='rotate(135 50 50)'/%3E%3C/svg%3E") center/contain no-repeat}
.cp-marquee .elementor-icon-list-icon,.cp-marquee .elementor-icon-list-text{padding:0}

/* ---- L'établi : trois image-box en collage ---- */
/* align-items:start est indispensable : par défaut les éléments d'une grille
   s'étirent (align-self:stretch), et la hauteur de rangée est dictée par la
   fiche la plus haute — la fiche de gauche se retrouvait vide sur 400 px. */
.cp-bench{position:relative;display:grid;gap:clamp(26px,4vw,40px);align-items:start}
@media (min-width:900px){
  .cp-bench{grid-template-columns:repeat(12,1fr);gap:0;min-height:1060px}
  .cp-bench>*:nth-child(1){grid-column:1/6;grid-row:1;transform:rotate(-2.5deg);z-index:1}
  .cp-bench>*:nth-child(2){grid-column:6/13;grid-row:1;margin-top:172px;transform:rotate(1.4deg);z-index:2}
  .cp-bench>*:nth-child(3){grid-column:2/8;grid-row:2;margin-top:-16px;transform:rotate(-1.2deg);z-index:3}
}
.cp-bench .elementor-widget-image-box{
  background:var(--cp-shell);border:2px solid var(--cp-cacao);border-radius:24px;
  padding:clamp(22px,2.6vw,32px);box-shadow:0 24px 54px -30px rgba(74,50,24,.6);position:relative}
.cp-bench .elementor-image-box-wrapper{display:block!important;text-align:left}
.cp-bench .elementor-image-box-img{margin:0 0 22px!important;width:100%!important}
.cp-bench .elementor-image-box-img img{width:100%!important;aspect-ratio:16/10;object-fit:cover;border-radius:18px}
.cp-bench .elementor-image-box-title{
  font-family:var(--cp-display);font-weight:600;font-size:clamp(20px,2.5vw,29px);
  color:var(--cp-ink);margin:0 0 8px;line-height:1.05}
.cp-bench .elementor-image-box-description{font-size:16.5px;margin:0;color:var(--cp-cacao)}
.cp-bench .elementor-image-box-wrapper{text-align:left}
/* La pastille chiffrée vient d'un attribut data-fig posé sur le widget. */
.cp-bench [data-fig]::before{
  content:attr(data-fig);position:absolute;top:-22px;left:-18px;
  width:58px;height:58px;border-radius:50%;background:var(--cp-clay);color:var(--cp-shell);
  display:grid;place-items:center;font-family:var(--cp-display);font-weight:700;font-size:22px;
  border:2px solid var(--cp-cacao);z-index:2}
@media (max-width:640px){.cp-bench [data-fig]::before{width:48px;height:48px;font-size:19px;top:-18px;left:-12px}}
/* Variante sans chiffre : la main du logo, pour la fiche « entre potes ». */
.cp-bench .cp-fig-hand::before{
  content:"";position:absolute;top:-22px;left:-18px;width:58px;height:58px;border-radius:50%;
  background:var(--cp-clay) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23FFF7EE'%3E%3Crect x='30' y='50' width='44' height='38' rx='17'/%3E%3Crect x='31' y='22' width='11' height='40' rx='5.5' transform='rotate(-13 36.5 42)'/%3E%3Crect x='44' y='15' width='11' height='47' rx='5.5' transform='rotate(-3 49.5 38)'/%3E%3Crect x='57' y='19' width='11' height='43' rx='5.5' transform='rotate(7 62.5 40)'/%3E%3Crect x='69' y='31' width='10' height='32' rx='5' transform='rotate(17 74 47)'/%3E%3Crect x='17' y='43' width='11' height='32' rx='5.5' transform='rotate(-40 22.5 59)'/%3E%3C/svg%3E") center/54% no-repeat;
  border:2px solid var(--cp-cacao);z-index:2}
@media (max-width:640px){.cp-bench .cp-fig-hand::before{width:48px;height:48px;top:-18px;left:-12px}}

/* Accroche manuscrite portée par un widget natif. */
.script .elementor-heading-title,.script p{
  font-family:var(--cp-script);font-weight:400;color:var(--cp-clay);
  font-size:clamp(26px,3.6vw,42px);line-height:1.2;letter-spacing:0}
.band--ink .script .elementor-heading-title,.band--ink .script p,
.band--cacao .script .elementor-heading-title,.band--cacao .script p{color:var(--cp-sand)}

/* ---- La cuisson : deux images superposées ---- */
.cp-kiln{position:relative;width:min(100%,560px);aspect-ratio:1;margin:clamp(32px,5vw,48px) auto 0;
  border-radius:50%;overflow:hidden;border:3px solid var(--cp-sand)}
.cp-kiln .elementor-widget-image{position:absolute;inset:0;margin:0;height:100%}
.cp-kiln .elementor-widget-image:nth-child(2){opacity:0}
.cp-kiln .elementor-widget-container,.cp-kiln figure{height:100%}
.cp-kiln img{width:100%;height:100%;object-fit:cover}
.cp-fire-labels .elementor-icon-list-items{
  display:flex;justify-content:space-between;max-width:min(100%,560px);margin:22px auto 0;
  padding:0;list-style:none}
.cp-fire-labels .elementor-icon-list-item{
  font-family:var(--cp-display);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:14px}
.cp-fire-labels .elementor-icon-list-item:first-child{color:#9C9384}
.cp-fire-labels .elementor-icon-list-item:last-child{color:var(--cp-clay-hi)}

/* ---- La carte des 5 cours ---- */
.cp-card{
  max-width:900px;margin:clamp(36px,5vw,56px) auto 0;background:var(--cp-shell);
  border:2.5px solid var(--cp-cacao);border-radius:28px;
  padding:clamp(30px,4.4vw,54px) clamp(20px,4vw,50px);position:relative;
  box-shadow:0 34px 80px -38px rgba(74,50,24,.75);transform:rotate(-1deg);text-align:center}
.cp-card .elementor-heading-title{
  font-family:var(--cp-display);font-weight:600;font-size:clamp(22px,3.4vw,38px);
  color:var(--cp-cacao);text-transform:uppercase;letter-spacing:.03em}
.cp-card .cp-rule p{
  font-family:var(--cp-display);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  font-size:clamp(12.5px,1.7vw,17px);color:var(--cp-cacao);margin:0}
/* Les cases sont générées par le script à partir de data-cases. */
.e-con.cp-stamps,.cp-stamps{
  display:flex!important;flex-direction:row!important;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:clamp(8px,2.4vw,28px);
  margin:clamp(28px,4vw,44px) 0 26px}
.cp-gift{
  position:absolute;left:clamp(-8px,2vw,28px);bottom:-30px;background:var(--cp-clay);
  color:var(--cp-shell);font-family:var(--cp-script);font-size:clamp(23px,3vw,33px);
  padding:11px 32px 16px;border-radius:999px;white-space:nowrap;
  box-shadow:0 16px 32px -14px rgba(74,50,24,.8);transform:rotate(-5deg) scale(0);opacity:0}
.cp-gift .elementor-heading-title{font-family:var(--cp-script);font-size:inherit;
  color:var(--cp-shell);text-transform:none;letter-spacing:0}
.cp-tap p{font-family:var(--cp-script);color:var(--cp-clay);font-size:22px;margin:56px 0 0}
@media (max-width:640px){
  .cp-card{transform:rotate(-.6deg)}
  .cp-gift{left:50%;bottom:-26px;font-size:21px;padding:9px 22px 13px;
    transform:translateX(-50%) rotate(-4deg) scale(0)}
}

/* ---------- Formulaire Elementor Pro, habillé aux couleurs du thème ----------
   Le widget Form de Pro est conservé : la cliente y règle ses champs et son
   adresse de réception depuis l'éditeur, sans toucher au code.              */
.elementor-widget-form .elementor-field-group>label{
  font-family:var(--cp-display);font-weight:600;font-size:15px;color:var(--cp-cream);margin-bottom:7px}
.band:not(.band--ink):not(.band--cacao) .elementor-widget-form .elementor-field-group>label{color:var(--cp-ink)}
.elementor-widget-form .elementor-field-textual{
  font:400 17px/1.5 var(--cp-body)!important;color:var(--cp-cacao)!important;background:var(--cp-shell)!important;
  border:2px solid var(--cp-sand)!important;border-radius:14px!important;padding:13px 16px!important;
  min-height:auto;transition:border-color .25s}
.elementor-widget-form .elementor-field-textual:focus{border-color:var(--cp-clay)!important;box-shadow:none}
.elementor-widget-form textarea.elementor-field-textual{min-height:130px}
.elementor-widget-form .elementor-button{
  font-family:var(--cp-display)!important;font-weight:600!important;font-size:17px!important;
  background:var(--cp-clay)!important;color:var(--cp-shell)!important;border-radius:999px!important;
  padding:16px 30px!important;border:2px solid transparent!important;
  transition:transform .4s var(--cp-squish),background-color .3s}
.elementor-widget-form .elementor-button:hover{
  background:var(--cp-clay-hi)!important;transform:translateY(-4px) scale(1.03) rotate(-1deg)}
.elementor-widget-form .elementor-field-type-acceptance .elementor-field-option label{
  font-family:var(--cp-body);font-weight:400;font-size:15.5px;line-height:1.5}
.elementor-message{font-family:var(--cp-body);font-size:16px}
.elementor-message.elementor-message-success{color:var(--cp-sand)}

/* ---------- Contenu éditable ---------- */
.prose{font-size:18px}
.prose h2{margin:1.6em 0 .5em}
.prose h3{margin:1.4em 0 .4em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.1em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--cp-clay);font-weight:600}

/* ---------- Réserver ---------- */
.book{text-align:center}
.book__tel{
  font-family:var(--cp-display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(34px,9.4vw,120px);color:var(--cp-cream);text-decoration:none;
  display:inline-block;margin:16px 0 10px;transition:transform .45s var(--cp-squish);
}
.book__tel:hover{transform:scale(1.05) rotate(-1.2deg)}

/* ---------- Pied ---------- */
.ftr{background:var(--cp-ink-deep);color:var(--cp-sand);padding:60px 0 40px;font-size:16px}
.ftr__in{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between}
.ftr a{color:var(--cp-cream)}
.ftr img{width:110px;margin-bottom:14px}
.ftr__nav{list-style:none;margin:0;padding:0}
.ftr__nav li{margin-bottom:6px}
.ftr__note{width:100%;border-top:1px solid rgba(216,196,172,.2);margin-top:32px;padding-top:20px;font-size:14px;opacity:.72}

/* ==========================================================================
   LA MAIN À LA PLACE DU CURSEUR
   ---------------------------------------------------------------------------
   Le curseur est remplacé par la main du logo, en CSS et non en JavaScript :
   le navigateur garde ainsi ses affordances natives — barre de saisie sur les
   champs, et pas de décalage entre le pointeur réel et son image. Chaque
   silhouette est doublée d'un halo crème derrière, sinon la main disparaît sur
   les bandes bleues.

   Le mot-clé de repli (auto / pointer / text) reste indispensable : certains
   navigateurs ignorent les curseurs SVG.
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  body{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 100 100'%3E%3Cg fill='%23FFF7EE' stroke='%23FFF7EE' stroke-width='12' stroke-linejoin='round'%3E%3Crect x='30' y='50' width='44' height='38' rx='17'/%3E%3Crect x='31' y='22' width='11' height='40' rx='5.5' transform='rotate(-13 36.5 42)'/%3E%3Crect x='44' y='15' width='11' height='47' rx='5.5' transform='rotate(-3 49.5 38)'/%3E%3Crect x='57' y='19' width='11' height='43' rx='5.5' transform='rotate(7 62.5 40)'/%3E%3Crect x='69' y='31' width='10' height='32' rx='5' transform='rotate(17 74 47)'/%3E%3Crect x='17' y='43' width='11' height='32' rx='5.5' transform='rotate(-40 22.5 59)'/%3E%3C/g%3E%3Cg fill='%23B05C33'%3E%3Crect x='30' y='50' width='44' height='38' rx='17'/%3E%3Crect x='31' y='22' width='11' height='40' rx='5.5' transform='rotate(-13 36.5 42)'/%3E%3Crect x='44' y='15' width='11' height='47' rx='5.5' transform='rotate(-3 49.5 38)'/%3E%3Crect x='57' y='19' width='11' height='43' rx='5.5' transform='rotate(7 62.5 40)'/%3E%3Crect x='69' y='31' width='10' height='32' rx='5' transform='rotate(17 74 47)'/%3E%3Crect x='17' y='43' width='11' height='32' rx='5.5' transform='rotate(-40 22.5 59)'/%3E%3C/g%3E%3C/svg%3E") 19 6, auto;
  }
  /* Sur ce qui se clique, la main passe au bleu pétrole. */
  a,button,summary,label,[role="button"],.stamp,.elementor-gallery-item{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 100 100'%3E%3Cg fill='%23FFF7EE' stroke='%23FFF7EE' stroke-width='12' stroke-linejoin='round'%3E%3Crect x='30' y='50' width='44' height='38' rx='17'/%3E%3Crect x='31' y='22' width='11' height='40' rx='5.5' transform='rotate(-13 36.5 42)'/%3E%3Crect x='44' y='15' width='11' height='47' rx='5.5' transform='rotate(-3 49.5 38)'/%3E%3Crect x='57' y='19' width='11' height='43' rx='5.5' transform='rotate(7 62.5 40)'/%3E%3Crect x='69' y='31' width='10' height='32' rx='5' transform='rotate(17 74 47)'/%3E%3Crect x='17' y='43' width='11' height='32' rx='5.5' transform='rotate(-40 22.5 59)'/%3E%3C/g%3E%3Cg fill='%231F455A'%3E%3Crect x='30' y='50' width='44' height='38' rx='17'/%3E%3Crect x='31' y='22' width='11' height='40' rx='5.5' transform='rotate(-13 36.5 42)'/%3E%3Crect x='44' y='15' width='11' height='47' rx='5.5' transform='rotate(-3 49.5 38)'/%3E%3Crect x='57' y='19' width='11' height='43' rx='5.5' transform='rotate(7 62.5 40)'/%3E%3Crect x='69' y='31' width='10' height='32' rx='5' transform='rotate(17 74 47)'/%3E%3Crect x='17' y='43' width='11' height='32' rx='5.5' transform='rotate(-40 22.5 59)'/%3E%3C/g%3E%3C/svg%3E") 19 6, pointer;
  }
  /* La saisie de texte garde son curseur : on ne casse pas l'affordance. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  textarea{cursor:text}
}

/* ---------- Empreintes laissées au clic ----------
   Positionnées en absolu sur la page, pas sur l'écran : la trace reste là où
   on a cliqué même après avoir défilé. Taille fixe, pour que le décalage de
   centrage soit calculable côté script. */
.cp-empreinte{
  position:absolute;z-index:9996;pointer-events:none;
  width:58px;height:58px;opacity:0;
}
.cp-empreinte svg{width:100%;height:100%;display:block;fill:currentColor}

/* ---------- Traces d'argile ---------- */
.smudge{position:fixed;z-index:9997;pointer-events:none;border-radius:50%;width:13px;height:13px;background:var(--cp-clay);opacity:.32}
@media (hover:none){.smudge{display:none}}

/* ---------- Petits écrans ---------- */
@media (max-width:640px){
  .stage{padding-top:clamp(104px,22vw,150px)}
  .badge{width:58px;height:58px;border-width:1.5px}
  .dock .btn{padding:14px 22px;font-size:16px}
  .note__fig{width:48px;height:48px;font-size:19px;top:-18px;left:-12px}
  .gift{left:50%;bottom:-26px;font-size:21px;padding:9px 22px 13px;transform:translateX(-50%) rotate(-4deg) scale(0)}
  .loyalty__card{transform:rotate(-.6deg)}
  .fire__labels{font-size:12px}
}

/* ---------- État initial des éléments animés ----------
   Le script révèle les widgets de chaque section .band, plus les éléments
   propres au héros et à l'établi. Ce masquage n'est posé qu'en front (jamais
   dans l'éditeur) et un filet de sécurité le lève si le script ne tourne pas. */
.anim .band .elementor-widget,
.anim .cp-stage .elementor-widget,
.anim .cp-bench>*,
.anim .cp-wheel,
.anim [data-rise]{opacity:0}
.anim .cp-marquee .elementor-widget,
.anim .cp-stamps,
.anim .cp-card .elementor-widget{opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}