/* ==========================================================================
   BaRez Vous - bar mobile
   Feuille de style unique, sans dependance.
   Palette tiree du logo : sauge #98ACA3 / brun #483026
   ========================================================================== */

:root{
  color-scheme:dark;

  /* --- la palette de soiree : c est celle du site --------------------- */
  --sauge:#3A4A44;
  --sauge-fonce:#2A3833;
  --sauge-clair:#4E625A;
  --sauge-pale:#2F3D38;
  --brun:#F4E7D8;
  --brun-2:#E7D3BE;
  --brun-pale:#C0A791;
  --creme:#202926;
  --creme-2:#28332F;
  --abricot:#F0955C;
  --brique:#F0955C;
  --dore:#F0C465;
  --rouge:#FF9C8A;

  /* couleurs qui ne bougent jamais */
  --bois:#18201D;
  --sur-clair:#4A3228;   /* texte pose sur une surface claire (en-tete, polaroid) */
  --terre:#A8461A;       /* accent lisible sur une surface claire */
  --creme-fixe:#F8F3E9;
  --dore-fixe:#F0C465;

  --fond:#1B2320;
  --encre:#F4E7D8;
  --carte:#28332F;
  --trait:rgba(244,231,216,.16);
  --ombre:0 18px 44px -26px rgba(0,0,0,.75);
  --ombre-forte:0 26px 60px -28px rgba(0,0,0,.85);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --main:"Caveat","Bradley Hand",cursive;

  --rayon:20px;
  --rayon-l:30px;
  --large:1180px;
  --gout:cubic-bezier(.22,.9,.28,1);
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  color:var(--encre);
  background:var(--fond);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--abricot);outline-offset:3px;border-radius:6px}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  font-variation-settings:"SOFT" 40,"WONK" 1;
}
h1{font-size:clamp(2.5rem,6.4vw,4.4rem)}
h2{font-size:clamp(1.9rem,4.2vw,3rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}
p{margin:0 0 1.1em}
.man{font-family:var(--main);font-weight:600;color:var(--abricot);font-size:1.28em;line-height:.9}
.sur{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brun-pale);margin:0 0 1.1em}

.wrap{width:min(100% - 2.4rem,var(--large));margin-inline:auto}
.section{padding:clamp(3.6rem,8vw,6.4rem) 0;position:relative}
.lead{font-size:clamp(1.05rem,1.7vw,1.24rem);color:var(--brun-2);max-width:62ch}
.center{text-align:center;margin-inline:auto}

/* ===================== TEXTURE TOLE ONDULEE ============================ */
.tole{
  height:16px;
  background:
    repeating-linear-gradient(90deg,
      var(--sauge-fonce) 0 3px,
      var(--sauge) 3px 9px,
      var(--sauge-clair) 9px 11px,
      var(--sauge) 11px 16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.12);
}

/* ===================== GUIRLANDE ======================================= */
.guirlande{display:flex;justify-content:center;gap:0;padding:0 0 .6rem;margin:0;list-style:none;height:46px;align-items:flex-start;position:relative;overflow:hidden}
.guirlande::before{content:"";position:absolute;top:2px;left:-6%;right:-6%;height:26px;border-bottom:2.5px solid var(--brun);opacity:.5;border-radius:0 0 50% 50%/0 0 100% 100%}
.guirlande li{width:38px;display:flex;justify-content:center}
.ampoule{width:14px;height:20px;border-radius:50% 50% 44% 44%/58% 58% 42% 42%;background:var(--dore);border:2px solid var(--brun);margin-top:17px;box-shadow:0 0 0 2px var(--fond);transition:background .4s,box-shadow .4s}
.guirlande li:nth-child(2n) .ampoule{animation-delay:-1.3s}
.guirlande li:nth-child(3n) .ampoule{animation-delay:-2.6s}
@keyframes clignote{0%,100%{opacity:1}46%{opacity:.62}}

/* ===================== ENTETE ========================================== */
.topwrap{position:sticky;top:0;z-index:80}
/* l en-tete est la seule zone claire du site : le logo y respire */
.topbar{
  display:flex;align-items:center;gap:1rem;
  padding:.55rem clamp(.9rem,3vw,1.6rem);
  /* app installee sur iPhone : le contenu passe sous la barre d etat, on la laisse respirer */
  padding-top:calc(.55rem + env(safe-area-inset-top, 0px));
  background:var(--creme-fixe);
  color:var(--sur-clair);
  border-bottom:1px solid rgba(72,48,38,.14);
}
.wordmark{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.logo-img{width:auto;height:52px}
.topbar nav{margin-left:auto}
.topbar-nav{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.topbar-nav a{
  text-decoration:none;font-size:.92rem;font-weight:500;
  padding:.5rem .68rem;border-radius:999px;display:inline-block;
  transition:background .2s,color .2s,transform .2s var(--gout),box-shadow .2s var(--gout);
}
.topbar-nav a{color:var(--sur-clair)}
.topbar-nav a:hover{background:rgba(72,48,38,.09)}
.topbar-nav a[aria-current="page"]{color:var(--terre);font-weight:600}
/* --- l appel a l action : une pastille avec un de qui roule ----------- */
.pill{
  display:inline-flex!important;align-items:center;gap:.55rem;
  background:transparent!important;color:var(--terre)!important;
  border:1.5px solid var(--terre);
  padding:.48rem 1.15rem .48rem .85rem!important;
  font-weight:600!important;font-size:.9rem!important;letter-spacing:.01em;
  margin-left:.45rem;
}
.pill:hover,.pill:focus-visible{background:var(--terre)!important;color:var(--creme-fixe)!important}
.dmini{
  width:19px;height:19px;flex:0 0 auto;border-radius:5px;
  border:1.5px solid currentColor;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:2.5px;
}
.dmini i{
  width:3px;height:3px;border-radius:50%;background:currentColor;
  align-self:center;justify-self:center;opacity:0;
}
.dmini i.on{opacity:1}
.pill.roule .dmini{animation:deRoule .62s var(--gout)}
@keyframes deRoule{
  0%{transform:rotate(0) scale(1)}
  48%{transform:rotate(200deg) scale(.78)}
  100%{transform:rotate(360deg) scale(1)}
}

.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;padding:9px;border:1.5px solid var(--sur-clair);border-radius:10px;background:transparent;cursor:pointer;align-items:center;justify-content:center;position:relative;z-index:90}
.burger span{display:block;height:2.5px;background:var(--sur-clair);border-radius:3px;transition:.3s var(--gout);transform-origin:center}
.burger span:nth-child(1){width:24px}
.burger span:nth-child(2){width:24px}
.burger span:nth-child(3){width:22px}
.burger:hover{background:rgba(72,48,38,.07)}
.burger[aria-expanded="true"] span:nth-child(1){width:24px;transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){width:24px;transform:translateY(-8px) rotate(-45deg)}

/* ===================== MENU : L ARDOISE DU BAR =========================
   Le menu mobile est l ardoise qu on pose devant la caravane : cadre en bois,
   craie, et les entrees qui s ecrivent une par une.
   ====================================================================== */
.mobnav{
  position:fixed;inset:0;z-index:70;
  padding:calc(5.6rem + env(safe-area-inset-top, 0px)) 1rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  background:rgba(12,16,14,.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:stretch;justify-content:center;
  animation:voile .25s ease-out;
}
.mobnav[hidden]{display:none}
@keyframes voile{from{opacity:0}to{opacity:1}}

.ardoise{
  position:relative;width:min(100%,520px);
  display:flex;flex-direction:column;
  padding:clamp(1.4rem,5vw,2.2rem) clamp(1.2rem,5vw,2rem) clamp(1.2rem,4vw,1.8rem);
  overflow-y:auto;overscroll-behavior:contain;
  border:12px solid #6B4A2E;border-radius:10px;
  background-color:#232A2B;
  background-image:
    radial-gradient(ellipse 60% 34% at 22% 18%, rgba(255,255,255,.055), transparent 70%),
    radial-gradient(ellipse 48% 26% at 78% 62%, rgba(255,255,255,.045), transparent 70%),
    radial-gradient(ellipse 70% 30% at 45% 92%, rgba(255,255,255,.035), transparent 70%);
  box-shadow:
    0 30px 70px -24px rgba(0,0,0,.9),
    inset 0 0 0 2px rgba(255,255,255,.05),
    inset 0 0 60px rgba(0,0,0,.5);
  animation:pose .42s cubic-bezier(.2,.9,.25,1);
}
@keyframes pose{
  from{opacity:0;transform:translateY(22px) rotate(-1.2deg) scale(.97)}
  to{opacity:1;transform:none}
}

.ardoise-titre{
  font-family:var(--main);font-size:clamp(1.5rem,5.5vw,2rem);
  color:#F1EEE4;margin:0 0 .1em;transform:rotate(-1.4deg);
  text-shadow:0 0 1px rgba(255,255,255,.5),0 0 8px rgba(255,255,255,.12);
}
.ardoise-titre::after{
  content:"";display:block;width:62%;height:3px;margin-top:.35rem;
  border-radius:60% 40% 55% 45%;background:#F1EEE4;opacity:.42;
  transform:rotate(.5deg);
}

.ardoise ul{list-style:none;margin:.9rem 0 1.1rem;padding:0}
.ardoise li{
  animation:craie .45s cubic-bezier(.2,.9,.25,1) backwards;
  animation-delay:calc(var(--i,0) * .055s + .12s);
}
@keyframes craie{
  from{opacity:0;transform:translateX(-14px) rotate(-1deg);filter:blur(2px)}
  to{opacity:1;transform:none;filter:none}
}
.ardoise a{
  position:relative;display:inline-block;text-decoration:none;
  font-family:var(--main);font-weight:700;
  font-size:clamp(1.45rem,6.2vw,2.05rem);line-height:1.06;
  color:#F1EEE4;padding:.28rem 0;
  text-shadow:0 0 1px rgba(255,255,255,.45),0 0 9px rgba(255,255,255,.10);
  transition:color .2s,transform .2s var(--gout);
}
.ardoise li:nth-child(odd) a{transform:rotate(-.7deg)}
.ardoise li:nth-child(even) a{transform:rotate(.5deg)}
.ardoise a::after{
  content:"";position:absolute;left:0;right:0;bottom:.12rem;height:3px;
  background:#F0C465;border-radius:60% 40% 55% 45%;
  transform:scaleX(0);transform-origin:left;opacity:.85;
  transition:transform .28s var(--gout);
}
.ardoise a:hover,.ardoise a:focus-visible{color:#F0C465}
.ardoise a:hover::after,.ardoise a:focus-visible::after{transform:scaleX(1)}
.ardoise a[aria-current="page"]{color:#F0C465}
.ardoise a[aria-current="page"]::after{transform:scaleX(1)}

/* l appel a l action : le mot entoure a la craie, comme le plat du jour */
.ardoise .craie-btn{
  align-self:flex-start;display:inline-flex;flex-direction:column;align-items:flex-start;
  text-decoration:none;margin:.5rem 0 0 .4rem;padding:0;
  font-size:inherit;transform:rotate(-1.4deg);text-shadow:none;
  animation:craie .45s cubic-bezier(.2,.9,.25,1) backwards;animation-delay:.62s;
}
.ardoise .craie-btn::after{display:none}
.craie-zone{position:relative;display:inline-block;padding:.62rem 2.2rem .68rem}
.craie-mot{
  position:relative;z-index:2;display:block;
  font-family:var(--main);font-weight:700;
  font-size:clamp(1.6rem,6.6vw,2.15rem);line-height:1.05;color:#F1EEE4;
  text-shadow:0 0 1px rgba(255,255,255,.5),0 0 10px rgba(255,255,255,.14);
  transition:color .22s;
}
.craie-rond{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.craie-rond path{
  fill:none;stroke:#F0C465;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;opacity:.9;
  stroke-dasharray:900;stroke-dashoffset:900;
  animation:trace 1s cubic-bezier(.35,.7,.4,1) .82s forwards;
}
@keyframes trace{to{stroke-dashoffset:0}}
/* une entree, deux formats : le titre a la craie, les deux choix dessous */
.ardoise .double-titre{
  display:block;font-family:var(--main);font-weight:700;
  font-size:clamp(1.45rem,6.2vw,2.05rem);line-height:1.06;color:#F1EEE4;
  padding:.28rem 0 0;transform:rotate(-.7deg);
  text-shadow:0 0 1px rgba(255,255,255,.45),0 0 9px rgba(255,255,255,.10);
}
.ardoise .double-choix{display:flex;gap:.7rem;align-items:baseline;padding:.05rem 0 .35rem 1rem}
.ardoise li .double-choix a{font-size:clamp(1.15rem,4.6vw,1.5rem);color:rgba(241,238,228,.82);transform:none;padding:.12rem 0}
.ardoise li .double-choix a:hover,.ardoise li .double-choix a[aria-current="page"]{color:#F0C465}
.ardoise .double-choix i{color:#F0C465;font-style:normal;opacity:.7;font-size:1.3rem}

.craie-note{
  margin:.5rem 0 0 2.2rem;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(241,238,228,.5);
}
.craie-btn:hover .craie-mot,.craie-btn:focus-visible .craie-mot{color:#F0C465}
.craie-btn:hover .craie-rond path{opacity:1;stroke-width:4.2}
@media (prefers-reduced-motion:reduce){
  .craie-rond path{animation:none;stroke-dashoffset:0}
}

/* le bouton d installation de l app, ecrit a la craie lui aussi */
.installer{
  align-self:flex-start;margin:1.4rem 0 0;padding:.55rem .9rem .6rem;
  background:rgba(241,238,228,.06);border:2px dashed rgba(241,238,228,.45);border-radius:14px;
  color:#F1EEE4;text-align:left;cursor:pointer;
  animation:craie .45s cubic-bezier(.2,.9,.25,1) backwards;animation-delay:.7s;
}
.installer:hover{border-color:#F0C465;background:rgba(240,196,101,.08)}
.installer-titre{display:block;font-family:var(--main);font-weight:700;font-size:1.35rem;line-height:1.05}
.installer-note{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:rgba(241,238,228,.6);margin-top:.15rem}
.installer-ios{
  margin:1.2rem 0 0;font-family:var(--sans);font-size:.8rem;line-height:1.45;
  color:rgba(241,238,228,.65);max-width:30ch;
  animation:craie .45s cubic-bezier(.2,.9,.25,1) backwards;animation-delay:.7s;
}
.installer-ios b{color:#F0C465;font-weight:600}

.ardoise-dessin{
  position:absolute;right:1rem;bottom:2.6rem;width:104px;height:78px;
  pointer-events:none;opacity:0;animation:craie .6s ease-out .78s forwards;
}
.ardoise-pied{
  margin:auto 0 0;padding-top:1.2rem;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.04em;
  color:rgba(241,238,228,.5);
}

@media (max-height:620px){
  .ardoise-dessin{display:none}
  .ardoise a{font-size:1.28rem}
}

/* ===================== ACCES DIRECT AU CONTENU ========================= */
.sauter{
  position:absolute;left:-9999px;top:.6rem;z-index:200;
  background:var(--dore);color:var(--bois);padding:.6rem 1.1rem;border-radius:999px;
  font-weight:600;text-decoration:none;box-shadow:0 8px 20px -8px rgba(0,0,0,.7);
}
.sauter:focus{left:.8rem}

/* lien vers l autre format de l histoire */
.format-lien{margin:0}
.format-lien a{
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  font-family:var(--main);font-size:clamp(1.15rem,2.4vw,1.4rem);color:var(--dore);
  border-bottom:1.5px dashed rgba(240,196,101,.5);padding-bottom:.1rem;
}
.format-lien a:hover{border-bottom-style:solid}
.format-lien .arr{transition:transform .25s var(--gout)}
.format-lien a:hover .arr{transform:translateX(4px)}

/* ===================== BOUTONS ========================================= */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.86rem 1.5rem;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:.98rem;border:1.5px solid var(--brun);
  cursor:pointer;transition:.28s var(--gout);font-family:var(--sans);
}
.btn .arr{transition:transform .28s var(--gout)}
.btn:hover .arr{transform:translateX(5px)}
.btn-solid{background:var(--brun);color:var(--creme)}
.btn-solid:hover{background:var(--abricot);border-color:var(--abricot)}
.btn-ghost{background:transparent;color:var(--encre)}
.btn-ghost:hover{background:var(--brun);color:var(--creme)}
.btn-abricot{background:var(--abricot);border-color:var(--abricot);color:#fff}
.btn-abricot:hover{filter:brightness(1.08)}
.ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

/* ===================== HERO ============================================ */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(175deg,var(--sauge) 0%,var(--sauge) 62%,var(--sauge-clair) 100%);
  color:var(--brun);
  padding:clamp(2.6rem,6vw,4.4rem) 0 clamp(3rem,7vw,5rem);
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0;height:150px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--fond));
}
/* respiration entre le bandeau d accueil et la suite de la page */
.hero + .addition{margin-top:clamp(.6rem,2vw,1.2rem)}
.addition + .section{padding-top:clamp(2.4rem,6vw,4rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;position:relative;z-index:2}
.hero h1{margin-bottom:.42em}
.hero h1 .man{display:block;font-size:1.02em;margin-top:.06em}
.hero-sub{font-size:clamp(1.05rem,1.8vw,1.22rem);max-width:46ch;color:var(--brun)}
.hero .man{color:var(--brique)}
.hero .lead{color:var(--brun)}
.hero-meta{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--brun);margin:0 0 1rem}
.hero-fig{position:relative}
.hero-fig img{border-radius:var(--rayon-l);box-shadow:var(--ombre-forte)}
.hero-signature{font-family:var(--main);font-size:clamp(1.3rem,2.6vw,1.85rem);color:var(--brun);margin:1.6rem 0 0;line-height:1.18;opacity:.9}

/* la caravane dessinee */
.caravane-scene{position:relative;padding-bottom:1.2rem}
.caravane-svg{width:100%;max-width:520px;margin-inline:auto;overflow:visible}
.roue{transform-origin:center;transform-box:fill-box}
.scene-anim .roue{animation:tourne 2.4s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.scene-anim .caravane-svg{animation:cahot .9s ease-in-out infinite}
@keyframes cahot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.bulle{opacity:0}
.scene-anim .bulle{animation:monte 2.6s ease-out infinite}
.scene-anim .bulle.b2{animation-delay:.7s}
.scene-anim .bulle.b3{animation-delay:1.4s}
@keyframes monte{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translateY(-34px) scale(1.1)}}
.scene-hint{display:block;text-align:center;font-family:var(--main);font-size:1.2rem;color:var(--brun);opacity:.72;margin-top:.2rem;transition:opacity .3s,color .3s}
.caravane-btn.joue .scene-hint{color:var(--dore);opacity:1}
.caravane-btn.joue .caravane-svg .bulle{animation:monte 2.6s ease-out infinite}
.caravane-btn.joue .caravane-svg .bulle.b2{animation-delay:.7s}
.caravane-btn.joue .caravane-svg .bulle.b3{animation-delay:1.4s}
.caravane-btn{background:none;border:0;padding:0;width:100%;cursor:pointer;color:inherit}

/* --- sections sur fond sauge : on remonte les contrastes -------------- */
.sur-sauge{background:var(--sauge)}
.sur-sauge .man{color:var(--abricot)}
.sur-sauge .sur{color:var(--brun);opacity:.8}
.sur-sauge .lead,.sur-sauge p{color:var(--brun)}
.sur-sauge .hublot p{color:var(--brun-2)}
.de-zone .sur{color:var(--brun);opacity:.8}
.de-zone .defi-titre{color:var(--abricot)}

/* ===================== L ADDITION =======================================
   A la place d une banniere qui defile : le ticket de caisse du bar, pose
   de travers sur la page. Les trois piliers, factures comme il se doit.
   ====================================================================== */
.addition{padding:clamp(2.2rem,5vw,3.4rem) 0;display:flex;justify-content:center}
.ticket{
  position:relative;width:min(88vw,430px);
  background:#F4EFE2;color:#2A2118;
  padding:2rem 1.6rem 2.2rem;
  transform:rotate(-1.1deg);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.86rem;line-height:1.5;
  clip-path:polygon(0.00% 9px, 3.57% 0px, 7.14% 9px, 10.71% 0px, 14.29% 9px, 17.86% 0px, 21.43% 9px, 25.00% 0px, 28.57% 9px, 32.14% 0px, 35.71% 9px, 39.29% 0px, 42.86% 9px, 46.43% 0px, 50.00% 9px, 53.57% 0px, 57.14% 9px, 60.71% 0px, 64.29% 9px, 67.86% 0px, 71.43% 9px, 75.00% 0px, 78.57% 9px, 82.14% 0px, 85.71% 9px, 89.29% 0px, 92.86% 9px, 96.43% 0px, 100.00% 9px, 100.00% calc(100% - 9px), 96.43% calc(100% - 0px), 92.86% calc(100% - 9px), 89.29% calc(100% - 0px), 85.71% calc(100% - 9px), 82.14% calc(100% - 0px), 78.57% calc(100% - 9px), 75.00% calc(100% - 0px), 71.43% calc(100% - 9px), 67.86% calc(100% - 0px), 64.29% calc(100% - 9px), 60.71% calc(100% - 0px), 57.14% calc(100% - 9px), 53.57% calc(100% - 0px), 50.00% calc(100% - 9px), 46.43% calc(100% - 0px), 42.86% calc(100% - 9px), 39.29% calc(100% - 0px), 35.71% calc(100% - 9px), 32.14% calc(100% - 0px), 28.57% calc(100% - 9px), 25.00% calc(100% - 0px), 21.43% calc(100% - 9px), 17.86% calc(100% - 0px), 14.29% calc(100% - 9px), 10.71% calc(100% - 0px), 7.14% calc(100% - 9px), 3.57% calc(100% - 0px), 0.00% calc(100% - 9px));
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.55));
}
.ticket-tete{text-align:center;margin:0 0 .2rem}
.ticket-tete b{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:1.35rem;letter-spacing:-.01em;
}
.ticket-tete span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#7A6A58}
.ticket-meta{display:flex;justify-content:space-between;font-size:.74rem;color:#7A6A58;margin:.9rem 0 0}
.ticket hr{border:0;border-top:1.5px dashed #B7A98F;margin:.7rem 0}
.ticket-ligne{display:flex;align-items:baseline;gap:.5rem}
.ticket-ligne .qte{width:1.2rem;flex:0 0 auto;color:#7A6A58}
.ticket-ligne .quoi{flex:0 0 auto;letter-spacing:.04em}
.ticket-ligne .points{flex:1 1 auto;border-bottom:1.5px dotted #C2B49A;transform:translateY(-.25rem)}
.ticket-ligne .prix{flex:0 0 auto;font-weight:600}
.ticket-total{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-weight:700}
.ticket-total .somme{font-family:var(--main);font-size:1.5rem;font-weight:700;color:#A8461A;text-align:right;line-height:1.05}
.ticket-merci{text-align:center;font-family:var(--main);font-size:1.35rem;margin:.9rem 0 0;color:#2A2118}
.ticket-code{
  display:flex;justify-content:center;gap:2px;margin:.9rem 0 0;height:26px;align-items:flex-end;
}
.ticket-code i{display:block;width:2px;background:#2A2118;border-radius:1px}
@media (max-width:400px){.ticket{font-size:.78rem;padding:1.7rem 1.1rem 1.9rem}}

/* ===================== CARTES / HUBLOT ================================= */
.hublot{
  background:var(--carte);border:1.5px solid var(--trait);
  border-radius:26px 26px 12px 12px;
  padding:clamp(1.4rem,3vw,2rem);
  box-shadow:var(--ombre);
  position:relative;
}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,4vw,3rem);align-items:center}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}

.pilier{text-align:center}
.pilier .ico{font-size:2.1rem;line-height:1;display:block;margin-bottom:.6rem}
.pilier h3{margin-bottom:.35em}
.pilier p{color:var(--brun-2);font-size:.97rem;margin:0}
.pilier-num{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:30px;height:30px;border-radius:50%;background:var(--abricot);color:#fff;
  display:grid;place-items:center;font-size:.82rem;font-weight:700;font-family:var(--sans);
}

/* ===================== HISTOIRE ======================================== */
.histoire{background:var(--creme-2)}
.histoire .recit p{font-size:clamp(1.02rem,1.6vw,1.14rem);color:var(--brun-2)}
.recit p:first-of-type::first-letter{
  font-family:var(--serif);font-size:3.4em;float:left;line-height:.82;
  padding:.06em .12em 0 0;color:var(--abricot);font-weight:600;
}
.citation{
  font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.3;
  border-left:4px solid var(--abricot);padding-left:1.2rem;margin:2rem 0;color:var(--brun);
}
.polaroid{background:#fff;padding:.85rem .85rem 3.4rem;border-radius:4px;box-shadow:var(--ombre-forte);transform:rotate(-2deg);position:relative}
.polaroid img{border-radius:2px}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:.9rem;text-align:center;font-family:var(--main);font-size:1.28rem;color:var(--sur-clair)}

/* ===================== LE DE (jeu) ===================================== */
.de-zone{background:var(--sauge);color:var(--brun);border-radius:var(--rayon-l);padding:clamp(1.6rem,4vw,2.8rem);box-shadow:var(--ombre)}
.de-flex{display:grid;grid-template-columns:200px 1fr;gap:clamp(1.4rem,4vw,2.6rem);align-items:center}
.de{
  width:132px;height:132px;margin-inline:auto;border-radius:24px;background:var(--creme);
  border:2.5px solid var(--brun);box-shadow:var(--ombre-forte);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:16px;cursor:pointer;transition:transform .3s var(--gout);
}
.de:hover{transform:rotate(-8deg) scale(1.04)}
.de.roule{animation:roule .72s var(--gout)}
@keyframes roule{
  0%{transform:rotate(0) scale(1)}
  30%{transform:rotate(150deg) scale(.82)}
  62%{transform:rotate(310deg) scale(1.12)}
  100%{transform:rotate(360deg) scale(1)}
}
.de i{display:block;width:17px;height:17px;border-radius:50%;background:var(--brun);align-self:center;justify-self:center;opacity:0}
.de i.on{opacity:1}
.de-legende{text-align:center;font-family:var(--main);font-size:1.25rem;margin-top:.7rem;color:var(--brun)}
.defi-carte{background:var(--creme);border:1.5px solid var(--trait);border-radius:var(--rayon);padding:1.3rem 1.5rem;min-height:158px;display:flex;flex-direction:column;justify-content:center}
.defi-titre{font-family:var(--serif);font-size:1.35rem;margin:0 0 .35em;color:var(--abricot)}
.defi-texte{margin:0;color:var(--brun-2)}
.defi-anim{animation:apparait .45s var(--gout)}
@keyframes apparait{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===================== ESTIMATEUR ====================================== */
.esti{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,2.6rem);align-items:start}
.champ{margin-bottom:1.4rem}
.champ label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:.95rem;margin-bottom:.5rem}
.champ .val{font-family:var(--serif);font-size:1.35rem;color:var(--abricot)}
input[type=range]{width:100%;accent-color:var(--abricot);height:26px}
.segmented{display:flex;flex-wrap:wrap;gap:.45rem}
.segmented input{position:absolute;opacity:0;width:0;height:0}
.segmented label{
  border:1.5px solid var(--trait);border-radius:999px;padding:.45rem .95rem;
  cursor:pointer;font-size:.9rem;font-weight:500;transition:.2s;
}
.segmented input:checked + label{background:var(--brun);color:var(--creme);border-color:var(--brun)}
.segmented input:focus-visible + label{outline:3px solid var(--abricot);outline-offset:2px}
.resultat{background:var(--bois);color:var(--creme-fixe);border-radius:var(--rayon);padding:clamp(1.3rem,3vw,1.9rem)}
.resultat h3{color:var(--dore-fixe);margin-bottom:.7em}
.res-ligne{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed rgba(248,243,233,.22);font-size:.97rem}
.res-ligne:last-of-type{border-bottom:0}
.res-ligne b{font-family:var(--serif);font-size:1.15rem;color:var(--creme-fixe);white-space:nowrap}
.res-note{font-size:.86rem;opacity:.72;margin:.9rem 0 0}

/* ===================== AGENDA ========================================== */
.dates{display:grid;gap:.9rem}
.date{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.3rem;align-items:center;
  background:var(--carte);border:1.5px solid var(--trait);border-radius:var(--rayon);
  padding:1rem 1.4rem;transition:border-color .25s var(--gout),transform .25s var(--gout);
}
.date:hover{transform:translateX(3px)}
.jour{
  margin:0;flex:0 0 auto;text-align:center;line-height:1;
  background:var(--sauge);border-radius:14px;padding:.6rem .75rem;min-width:64px;
}
.jour b{display:block;font-family:var(--serif);font-size:1.8rem;font-weight:600;color:var(--encre)}
.jour span{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.2rem;color:var(--encre);opacity:.8}
.date .quoi h2{font-size:clamp(1.1rem,2vw,1.35rem);margin:0 0 .15em}
.date .ou{margin:0;color:var(--brun-2);font-size:.95rem}
.date .note{margin:.4rem 0 0;color:var(--brun-pale);font-size:.88rem}
.date .quand{margin:0;font-family:var(--serif);font-size:1rem;color:var(--abricot);white-space:nowrap}

.date.prochaine{border-color:var(--dore);box-shadow:0 0 0 3px rgba(240,196,101,.12)}
.date.prochaine .jour{background:var(--dore)}
.date.prochaine .jour b,.date.prochaine .jour span{color:var(--bois)}
.date.prochaine{position:relative;margin-top:1.5rem}
.date.prochaine::before{
  content:"Prochaine date";position:absolute;top:-11px;left:20px;
  background:var(--dore);color:var(--bois);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:.24rem .7rem;border-radius:999px;
}
.date.passee{opacity:.45}
.date.passee .quand{color:var(--brun-pale)}
.vide{text-align:center;max-width:56ch;margin-inline:auto}
.vide h2{font-size:clamp(1.3rem,2.6vw,1.7rem)}
.vide .ctas{justify-content:center}

@media (max-width:600px){
  .date{grid-template-columns:auto 1fr;gap:1rem;padding:.9rem 1rem}
  .date .quand{grid-column:2;font-size:.93rem;white-space:normal}
  .jour{min-width:56px;padding:.5rem .6rem}
  .jour b{font-size:1.5rem}
}

/* ===================== FAQ ============================================= */
.faq details{border-bottom:1px solid var(--trait);padding:.3rem 0}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 2.4rem 1.05rem 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.05rem,1.9vw,1.25rem);font-weight:600;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--abricot);transition:transform .3s var(--gout)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .rep{color:var(--brun-2);padding-bottom:1.1rem;margin:0}
.faq .rep p:last-child{margin-bottom:0}

/* ===================== FORMULAIRE ====================================== */
.form{display:grid;gap:1rem}
.form .duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
/* sans ca, un champ date deborde de sa colonne sur iPhone */
.form>*,.form .duo>*{min-width:0}
.form label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem}
.form input,.form select,.form textarea{
  width:100%;padding:.8rem .95rem;border-radius:12px;border:1.5px solid var(--trait);
  background:var(--carte);color:var(--encre);font:inherit;font-size:.97rem;
}
.form textarea{min-height:130px;resize:vertical}
.form input[type=date],.form input[type=time],.form input[type=number]{
  -webkit-appearance:none;appearance:none;max-width:100%;
}
.form input[type=date]{min-height:3rem;line-height:1.2}
.form select{-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 51%,calc(100% - 13px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.4rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--abricot);box-shadow:0 0 0 3px rgba(179,74,28,.20)}
.form .aide{font-size:.84rem;color:var(--brun-pale);margin:.2rem 0 0}
.form .err{color:var(--rouge);font-size:.86rem;margin:.2rem 0 0;display:none}
.form .err.on{display:block}

.etiq{display:inline-block;min-width:4.4rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brun-pale);font-weight:600}

/* ===================== PRESTATIONS ===================================== */
.formule{display:flex;flex-direction:column;height:100%}
.formule ul{list-style:none;margin:.6rem 0 1.2rem;padding:0;flex:1}
.formule li{padding:.36rem 0 .36rem 1.5rem;position:relative;font-size:.96rem;color:var(--brun-2)}
.formule li::before{content:"";position:absolute;left:0;top:.86em;width:8px;height:8px;border-radius:50%;background:var(--sauge-fonce)}
.formule .prix{font-family:var(--serif);font-size:1.05rem;color:var(--abricot);font-weight:600}
.ruban{position:absolute;top:-13px;right:18px;background:var(--abricot);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.3rem .8rem;border-radius:999px}

.signature{
  font-family:var(--main);font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--abricot);margin:1.5rem 0 0;line-height:1;
}
.signature::before{content:"-\00a0"}
.sur-brun .signature{color:var(--dore-fixe)}

/* ===================== ETAPES ========================================== */
.etapes{list-style:none;margin:0;padding:0;counter-reset:e;display:grid;gap:1.1rem}
.etapes li{counter-increment:e;padding-left:3.4rem;position:relative}
.etapes li::before{
  content:counter(e);position:absolute;left:0;top:-2px;width:2.4rem;height:2.4rem;
  border-radius:50%;border:1.5px solid var(--abricot);color:var(--abricot);
  display:grid;place-items:center;font-family:var(--serif);font-size:1.1rem;font-weight:600;
}
.etapes h3{margin-bottom:.2em;font-size:1.1rem}
.etapes p{margin:0;color:var(--brun-2);font-size:.96rem}

/* --- sections sur fond brun : couleurs fixes -------------------------- */
.sur-brun{background:var(--bois);color:var(--creme-fixe)}
.sur-brun h2,.sur-brun h3,.sur-brun .lead,.sur-brun p{color:var(--creme-fixe)}
.sur-brun .lead{opacity:.86}
.sur-brun .man{color:var(--dore-fixe)}
.sur-brun .btn-ghost{color:var(--creme-fixe);border-color:rgba(248,243,233,.55)}
.sur-brun .btn-ghost:hover{background:var(--creme-fixe);color:var(--bois);border-color:var(--creme-fixe)}

/* ===================== PIED DE PAGE ==================================== */
footer{background:var(--bois);color:var(--creme-fixe);padding:clamp(2.8rem,6vw,4rem) 0 1.6rem;margin-top:0}
footer a{color:var(--creme-fixe);text-decoration:none;opacity:.86}
footer a:hover{opacity:1;color:var(--dore-fixe)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
footer h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dore-fixe);margin:0 0 .9rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;font-size:.95rem}
.foot-mark{font-family:var(--serif);font-size:1.6rem;margin:0 0 .5rem}
.foot-slogan{font-family:var(--main);font-size:1.35rem;color:var(--dore-fixe);margin:0 0 1rem}
.foot-bas{border-top:1px solid rgba(248,243,233,.16);margin-top:2.4rem;padding-top:1.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center;font-size:.84rem;opacity:.72}
.credit a{border-bottom:1px solid rgba(248,243,233,.4);padding-bottom:1px}
.credit a:hover{border-color:var(--dore-fixe)}
.socials{display:flex;gap:.6rem;margin-top:1rem}
.socials a{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(248,243,233,.3);display:grid;place-items:center;transition:.25s var(--gout)}
.socials a:hover{background:var(--dore-fixe);border-color:var(--dore-fixe);color:var(--bois);transform:translateY(-3px)}
.socials svg{width:17px;height:17px;fill:currentColor}

/* ===================== APPARITIONS ===================================== */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--gout),transform .7s var(--gout)}
.js .reveal.vu{opacity:1;transform:none}

/* ===================== AUJOURD HUI (sous l en-tete) ====================
   Dans la palette sombre du site : une bande claire ici faisait un voile. */
.aujourdhui{
  display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;
  text-align:center;padding:.7rem clamp(.9rem,3vw,1.6rem);
  font-size:.95rem;font-weight:500;text-decoration:none;color:var(--creme-fixe);
  background:#2A3833;border-bottom:1px solid rgba(248,243,233,.10);
  transition:background .2s;
}
.aujourdhui[hidden]{display:none}
.aujourdhui:hover{background:#33423C}
.aujourdhui .point{
  width:9px;height:9px;border-radius:50%;flex:none;background:#3FBF6B;
  box-shadow:0 0 0 0 rgba(63,191,107,.5);animation:pulse-jour 2s ease-out infinite;
}
.aujourdhui.prochain .point{background:var(--dore-fixe);animation:none}
.aujourdhui.calme .point{background:rgba(248,243,233,.45);animation:none}
@keyframes pulse-jour{0%{box-shadow:0 0 0 0 rgba(63,191,107,.45)}70%{box-shadow:0 0 0 8px rgba(63,191,107,0)}100%{box-shadow:0 0 0 0 rgba(63,191,107,0)}}
.aujourdhui .etiquette{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:rgba(248,243,233,.55)}
.aujourdhui strong{font-family:var(--serif);font-weight:600;font-size:1.08em;color:var(--dore-fixe)}
.aujourdhui .arr{font-family:var(--serif);color:var(--dore-fixe)}

/* ===================== WHATSAPP FLOTTANT =============================== */
.wa{
  position:fixed;bottom:calc(1.15rem + env(safe-area-inset-bottom, 0px));right:1.15rem;z-index:50;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;border:1.5px solid var(--bois);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  animation:wa-frisson 9s ease-in-out infinite;transition:transform .18s;
}
.wa:hover{transform:scale(1.1) rotate(-6deg);animation:none}
@keyframes wa-frisson{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-9deg)}92%{transform:rotate(8deg)}95%{transform:rotate(-4deg)}}
.wa-ring{position:absolute;inset:-5px;border-radius:50%;border:2px solid #25D366;animation:wa-onde 3.5s ease-out infinite;pointer-events:none}
@keyframes wa-onde{0%,55%{transform:scale(.85);opacity:0}70%{opacity:.7}100%{transform:scale(1.35);opacity:0}}
.wa-bulle{
  position:fixed;bottom:calc(1.7rem + env(safe-area-inset-bottom, 0px));right:calc(1.15rem + 68px);z-index:50;
  background:var(--creme-fixe);border:1.5px solid var(--bois);border-radius:999px;
  font-family:var(--serif);font-size:1.02rem;white-space:nowrap;
  padding:.55rem 1.05rem;color:var(--bois);box-shadow:3px 3px 0 rgba(0,0,0,.35);
  opacity:0;transform:translateX(10px);pointer-events:none;transition:opacity .35s,transform .35s;
}
.wa-bulle i{color:var(--terre)}
.wa-bulle.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.aujourdhui .point,.wa,.wa-ring{animation:none}}

/* ===================== RESPONSIVE ====================================== */
@media (max-width:960px){
  .hero-grid,.grid-2,.esti,.de-flex{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .only-desktop{display:none}
  .burger{display:flex}
  .de-flex .de{margin-bottom:.4rem}
}
@media (max-width:600px){
  body{font-size:16px}
  .form .duo{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .logo-img{height:44px}
  .pill{padding:.42rem .85rem .42rem .62rem!important;font-size:.82rem!important;margin-left:.15rem;gap:.42rem}
  .dmini{width:17px;height:17px}
  .wa-bulle{font-size:.92rem;max-width:calc(100vw - 6.5rem);white-space:normal;text-align:center}
}
@media (min-width:961px) and (max-width:1130px){.only-large{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
}

@media print{
  .topwrap,.mobnav,.appel,.band,.guirlande,.tole{display:none!important}
  body{background:#fff;color:#000}
}

/* ===================== AJUSTEMENTS DE SOIREE ===========================
   Details qui ne se deduisent pas des variables ci-dessus.
   ====================================================================== */
.ampoule{background:var(--dore);box-shadow:0 0 12px 3px rgba(240,196,101,.5);animation:clignote 4s infinite}
.hero{background:linear-gradient(175deg,#3A4A44 0%,#33423C 55%,#2A3833 100%)}
.de-zone{background:var(--sauge-fonce)}
/* l abricot est clair : le texte pose dessus reste fonce */
.btn-abricot,.appel,.ruban{color:var(--bois)}
.btn-abricot{border-color:var(--abricot)}
/* un de reste un de : blanc a points fonces */
.de{background:var(--creme-fixe);border-color:var(--bois)}
.de i{background:var(--bois)}