/* ============================================================
   DEPAZ SHOW COMPANY — feuille de style principale
   Direction : théâtre forain vintage, mise en page éditoriale.
   ============================================================ */

/* ---------- 1. Polices (auto-hébergées, aucun appel externe) ---------- */
@font-face{font-family:'Alfa Slab One';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/alfa-slab-one-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Alfa Slab One';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/alfa-slab-one-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/nunito-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/nunito-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- 2. Jetons de design ---------- */
:root{
  --creme:#FBF4E6; --creme-2:#F4E8D2; --creme-3:#EEDCBE;
  --velours:#B4161E; --velours-fonce:#7C0C13; --velours-clair:#D93A3A;
  --nuit:#1C0E10; --nuit-2:#2E181A;
  --or:#D9A441; --or-clair:#F2D189; --or-fonce:#A97A24;
  --blanc:#fff;
  --texte:#241214; --texte-doux:#6B4A4C;

  --ff-display:'Alfa Slab One',Georgia,'Times New Roman',serif;
  --ff-corps:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;

  --max:1240px; --gouttiere:clamp(1.15rem,4vw,2.5rem);
  --r-s:10px; --r-m:20px; --r-l:32px; --r-xl:48px;

  --ombre-s:0 2px 8px rgba(28,14,16,.07);
  --ombre-m:0 12px 34px -12px rgba(28,14,16,.24);
  --ombre-l:0 30px 70px -26px rgba(28,14,16,.42);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-doux:cubic-bezier(.65,.05,.36,1);
  --t:.5s var(--ease);
}

/* ---------- 3. Réinitialisation ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html:not(.js-scroll-doux){scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--texte);
  font-family:var(--ff-corps);font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--ff-display);font-weight:400;
  line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--velours);outline-offset:3px;border-radius:4px}
::selection{background:var(--or);color:var(--nuit)}

/* ---------- 4. Structure ---------- */
.enveloppe{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere)}
.enveloppe--large{max-width:1480px}
.section{position:relative;padding-block:clamp(4.5rem,10vw,9rem)}
.section--serre{padding-block:clamp(3rem,6vw,5rem)}
.section--nuit{background:var(--nuit);color:var(--creme)}
.section--nuit h2,.section--nuit h3{color:var(--creme)}
.section--velours{background:var(--velours-fonce);color:var(--creme)}
.grille{display:grid;gap:clamp(1.5rem,3vw,2.6rem)}
@media(min-width:760px){
  .grille--2{grid-template-columns:repeat(2,1fr)}
  .grille--3{grid-template-columns:repeat(3,1fr)}
  .grille--4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1050px){.grille--4{grid-template-columns:repeat(4,1fr)}}

/* ---------- 5. Typographie ---------- */
.titre-geant{font-family:var(--ff-display);
  font-size:clamp(2.6rem,8.2vw,7.2rem);line-height:.94;letter-spacing:-.02em}
.titre-section{font-size:clamp(2rem,4.6vw,3.6rem)}
.titre-carte{font-size:clamp(1.35rem,2.1vw,1.75rem)}
.accent{color:var(--velours)}
.section--nuit .accent,.section--velours .accent{color:var(--or-clair)}
.chapo{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.65;color:var(--texte-doux);max-width:62ch}
.section--nuit .chapo,.section--velours .chapo{color:rgba(251,244,230,.78)}

.surtitre{display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--ff-corps);font-weight:800;font-size:.78rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--velours);margin-bottom:1.1rem}
.surtitre::before{content:"";width:34px;height:2px;background:currentColor;flex:none}
.section--nuit .surtitre,.section--velours .surtitre{color:var(--or)}

.entete-section{max-width:70ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.entete-section--centre{margin-inline:auto;text-align:center}
.entete-section--centre .surtitre::before{display:none}
.entete-section--centre .chapo{margin-inline:auto}
.entete-section .chapo{margin-top:1.4rem}

/* ---------- 6. Boutons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1.05em 2.1em;border:2px solid transparent;border-radius:999px;
  font-weight:800;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn:hover::after{transform:translateY(0)}

.btn--primaire{background:var(--velours);color:var(--blanc);box-shadow:var(--ombre-m)}
.btn--primaire::after{background:var(--nuit)}
.btn--primaire:hover{box-shadow:var(--ombre-l)}

.btn--or{background:var(--or);color:var(--nuit)}
.btn--or::after{background:var(--creme)}

.btn--fantome{background:transparent;color:currentColor;border-color:currentColor}
.btn--fantome::after{background:var(--nuit)}
.btn--fantome:hover{color:var(--creme);border-color:var(--nuit)}
.section--nuit .btn--fantome::after,.section--velours .btn--fantome::after{background:var(--creme)}
.section--nuit .btn--fantome:hover,.section--velours .btn--fantome:hover{color:var(--nuit);border-color:var(--creme)}

.btn--large{padding:1.2em 2.6em;font-size:1rem}
.groupe-btn{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.entete-section--centre .groupe-btn{justify-content:center}

/* lien fléché animé */
.lien-fleche{display:inline-flex;align-items:center;gap:.55em;font-weight:800;
  color:var(--velours);letter-spacing:.02em}
.lien-fleche svg{transition:transform .4s var(--ease)}
.lien-fleche:hover svg{transform:translateX(7px)}
.section--nuit .lien-fleche{color:var(--or-clair)}

/* ---------- 7. En-tête ---------- */
.entete{position:fixed;inset:0 0 auto;z-index:100;
  transition:transform .5s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease)}
.entete::before{content:"";position:absolute;inset:0;background:rgba(251,244,230,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .4s var(--ease)}
.entete.est-collee::before{opacity:1}
.entete.est-collee{box-shadow:0 1px 0 rgba(28,14,16,.09)}
.entete.est-cachee{transform:translateY(-104%)}
.entete__inner{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-block:.85rem;transition:padding .4s var(--ease)}
.entete.est-collee .entete__inner{padding-block:.45rem}

.logo{display:flex;align-items:center;gap:.75rem;flex:none}
.logo img{width:clamp(58px,7vw,78px);height:auto;transition:width .4s var(--ease),transform .5s var(--ease)}
.entete.est-collee .logo img{width:clamp(48px,5.4vw,60px)}
.logo:hover img{transform:rotate(-5deg) scale(1.05)}
.logo__texte{display:none;font-family:var(--ff-display);font-size:1rem;line-height:1.05;
  color:var(--velours);letter-spacing:-.01em}
.logo__texte span{display:block;font-family:var(--ff-corps);font-weight:700;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--texte-doux)}
@media(min-width:520px){.logo__texte{display:block}}

.nav{display:none}
@media(min-width:1000px){
  .nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
  .nav a{position:relative;padding:.4rem 0;font-weight:700;font-size:.94rem;
    transition:color .3s var(--ease)}
  .nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
    background:var(--velours);transform:scaleX(0);transform-origin:right;
    transition:transform .45s var(--ease)}
  .nav a:hover{color:var(--velours)}
  .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
  .nav a[aria-current="page"]{color:var(--velours)}
}
/* groupe déroulant du menu principal */
.nav__groupe{position:relative}
.nav__declencheur{display:inline-flex;align-items:center;gap:.45rem;position:relative;
  padding:.4rem 0;background:none;border:0;cursor:pointer;
  font-family:var(--ff-corps);font-weight:700;font-size:.94rem;color:inherit;
  transition:color .3s var(--ease)}
.nav__declencheur svg{transition:transform .35s var(--ease)}
.nav__declencheur:hover,.nav__declencheur[aria-expanded="true"]{color:var(--velours)}
.nav__declencheur[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__declencheur::after{content:"";position:absolute;left:0;bottom:0;height:2px;
  width:calc(100% - 1.1rem);background:var(--velours);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav__declencheur:hover::after,.nav__declencheur.est-courant::after{transform:scaleX(1);transform-origin:left}
.nav__declencheur.est-courant{color:var(--velours)}

.nav__panneau{position:absolute;top:calc(100% + .85rem);left:50%;z-index:5;
  width:max-content;min-width:270px;margin:0;padding:.5rem;
  background:var(--blanc);border-radius:var(--r-m);box-shadow:var(--ombre-l);
  border:1px solid rgba(36,18,20,.08);
  opacity:0;visibility:hidden;transform:translate(-50%,-8px);
  /* La visibilité ne s'interpole pas : on la bascule à la fin du fondu à la
     fermeture, et instantanément à l'ouverture. L'inclure dans une transition
     de durée non nulle empêche le fondu de démarrer. */
  transition:opacity .3s var(--ease),transform .35s var(--ease),
             visibility 0s linear .3s}
.nav__panneau::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:.85rem}
.nav__groupe.est-ouvert .nav__panneau{opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility 0s}
.nav__panneau a{display:block;padding:.65rem .85rem;border-radius:var(--r-s);
  transition:background-color .25s var(--ease)}
.nav__panneau a::after{display:none}
.nav__panneau a:hover{background:var(--creme-2)}
.nav__panneau strong{display:block;font-weight:800;font-size:.95rem;color:var(--texte)}
.nav__panneau span{display:block;margin-top:.12rem;font-size:.8rem;color:var(--texte-doux)}
.nav__panneau a[aria-current="page"] strong{color:var(--velours)}

.entete__actions{display:flex;align-items:center;gap:.8rem}
.tel-entete{display:none;font-weight:800;color:var(--velours);white-space:nowrap}
@media(min-width:1180px){.tel-entete{display:inline-flex;align-items:center;gap:.45rem}}
.entete .btn{padding:.85em 1.5em;font-size:.82rem}
@media(max-width:640px){.entete .btn--primaire{display:none}}

/* burger */
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;
  width:50px;height:50px;padding:0 12px;border:2px solid var(--nuit);border-radius:999px;
  background:transparent;cursor:pointer;transition:background-color .35s var(--ease),border-color .35s var(--ease)}
@media(min-width:1000px){.burger{display:none}}
.burger span{display:block;height:2px;background:var(--nuit);border-radius:2px;
  transition:transform .45s var(--ease),opacity .3s var(--ease),background-color .35s var(--ease)}
.burger span:nth-child(1){width:100%}
.burger span:nth-child(2){width:70%}
.burger[aria-expanded="true"]{background:var(--velours);border-color:var(--velours)}
.burger[aria-expanded="true"] span{background:var(--creme)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){width:100%;transform:translateY(-4px) rotate(-45deg)}

/* En-tête clair : pages dont le héros est sombre. Ne s'applique qu'avant
   que l'en-tête ne devienne collant, puisqu'il retrouve alors son fond crème. */
.entete-claire .entete:not(.est-collee) .nav a,
.entete-claire .entete:not(.est-collee) .nav__declencheur,
.entete-claire .entete:not(.est-collee) .logo__texte{color:var(--creme)}
.entete-claire .entete:not(.est-collee) .logo__texte span{color:rgba(251,244,230,.72)}
.entete-claire .entete:not(.est-collee) .tel-entete{color:var(--or-clair)}
.entete-claire .entete:not(.est-collee) .nav a:hover,
.entete-claire .entete:not(.est-collee) .nav__declencheur:hover,
.entete-claire .entete:not(.est-collee) .nav a[aria-current="page"],
.entete-claire .entete:not(.est-collee) .nav__declencheur.est-courant{color:var(--or-clair)}
.entete-claire .entete:not(.est-collee) .nav a::after,
.entete-claire .entete:not(.est-collee) .nav__declencheur::after{background:var(--or-clair)}
.entete-claire .entete:not(.est-collee) .burger{border-color:var(--creme)}
.entete-claire .entete:not(.est-collee) .burger span{background:var(--creme)}
/* Le bouton rouge se fondrait dans le héros : il passe en doré. */
.entete-claire .entete:not(.est-collee) .btn--primaire{background:var(--or);color:var(--nuit)}
.entete-claire .entete:not(.est-collee) .btn--primaire::after{background:var(--creme)}

/* menu plein écran */
.menu-mobile{position:fixed;inset:0;z-index:99;background:var(--nuit);color:var(--creme);
  display:flex;flex-direction:column;
  /* La liste compte dix entrées : elle ne tient pas sur un petit écran.
     On la laisse défiler, et « margin:auto » la centre quand elle tient. */
  justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top,0px) + 5.6rem) var(--gouttiere)
          calc(env(safe-area-inset-bottom,0px) + 2.5rem);
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .75s var(--ease-doux);visibility:hidden;
  overscroll-behavior:contain}
.menu-mobile > nav{margin-block:auto;width:100%}
.menu-mobile.est-ouvert{clip-path:circle(150% at calc(100% - 46px) 46px);visibility:visible}
.menu-mobile__liste li{overflow:hidden;border-bottom:1px solid rgba(251,244,230,.12)}
.menu-mobile__liste a{display:flex;align-items:baseline;gap:.9rem;padding:.42em 0;
  font-family:var(--ff-display);font-size:clamp(1.45rem,6.4vw,2.4rem);line-height:1.12;
  transform:translateY(110%);transition:transform .6s var(--ease),color .3s var(--ease)}
.menu-mobile.est-ouvert .menu-mobile__liste a{transform:translateY(0);
  transition-delay:calc(.16s + var(--i,0) * .07s)}
.menu-mobile__liste a:hover{color:var(--or)}
.menu-mobile__liste em{font-family:var(--ff-corps);font-style:normal;font-weight:800;
  font-size:.72rem;letter-spacing:.2em;color:var(--or);flex:none}
.menu-mobile__pied{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.7rem 2rem;
  font-weight:700;opacity:0;transition:opacity .5s var(--ease) .5s}
.menu-mobile.est-ouvert .menu-mobile__pied{opacity:1}
.menu-mobile__pied a:hover{color:var(--or)}
@media(max-height:620px){
  .menu-mobile{padding-top:calc(env(safe-area-inset-top,0px) + 4.6rem)}
  .menu-mobile__liste a{font-size:clamp(1.25rem,5.4vw,1.9rem);padding:.34em 0}
}
body.menu-actif{overflow:hidden}

/* ---------- 8. Héros ---------- */
.heros{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:clamp(7rem,14vh,10rem);padding-bottom:clamp(4rem,9vh,7rem);overflow:hidden}
.heros__deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.tache{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5}
.tache--1{width:52vw;height:52vw;max-width:720px;max-height:720px;top:-16vw;right:-12vw;
  background:radial-gradient(circle at 35% 35%,var(--creme-3),transparent 68%)}
.tache--2{width:40vw;height:40vw;max-width:520px;max-height:520px;bottom:-14vw;left:-10vw;
  background:radial-gradient(circle at 60% 40%,rgba(217,164,65,.34),transparent 70%)}
.tache--3{width:26vw;height:26vw;max-width:330px;max-height:330px;top:34%;left:52%;
  background:radial-gradient(circle at 50% 50%,rgba(180,22,30,.14),transparent 70%)}

.heros__contenu{position:relative;z-index:2;max-width:22ch}
.heros .titre-geant{max-width:15ch}
.heros .chapo{margin-top:1.7rem;max-width:46ch}
.heros__contenu{max-width:none}

/* médaillons flottants du héros */
.heros__medaillons{position:absolute;inset:0;z-index:1;pointer-events:none}
.medaillon-flottant{position:absolute;width:clamp(120px,17vw,270px);
  filter:drop-shadow(0 22px 40px rgba(28,14,16,.34))}
.medaillon-flottant--a{top:6%;right:2%;width:clamp(150px,22vw,340px)}
.medaillon-flottant--b{bottom:4%;right:20%;width:clamp(100px,13vw,200px)}
.medaillon-flottant--c{top:48%;right:34%;width:clamp(80px,9vw,140px);opacity:.9}
@media(max-width:1000px){
  .medaillon-flottant--b,.medaillon-flottant--c{display:none}
  .medaillon-flottant--a{top:auto;bottom:-4%;right:-12%;opacity:.28}
}

.heros__defilement{position:absolute;left:var(--gouttiere);bottom:2.2rem;z-index:2;
  display:none;align-items:center;gap:.8rem;font-size:.72rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--texte-doux)}
@media(min-width:1000px){.heros__defilement{display:flex}}
.heros__defilement span{display:block;width:1px;height:46px;background:currentColor;
  transform-origin:top;animation:tirer 2.1s var(--ease) infinite}
@keyframes tirer{0%{transform:scaleY(0);opacity:0}
  40%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(1) translateY(46px);opacity:0}}

/* ---------- 9. Bandeau défilant ---------- */
.bandeau{position:relative;overflow:hidden;background:var(--velours);color:var(--creme);
  padding-block:.95rem;border-block:3px solid var(--nuit)}
.bandeau--or{background:var(--or);color:var(--nuit)}
.bandeau__piste{display:flex;width:max-content;animation:defiler 34s linear infinite}
.bandeau:hover .bandeau__piste{animation-play-state:paused}
.bandeau__groupe{display:flex;align-items:center;flex:none}
.bandeau__groupe span{display:inline-flex;align-items:center;gap:1.6rem;padding-inline:.8rem;
  font-family:var(--ff-display);font-size:clamp(.95rem,1.8vw,1.35rem);
  letter-spacing:.02em;white-space:nowrap;text-transform:uppercase}
.bandeau__groupe span::after{content:"★";font-family:var(--ff-corps);font-size:.8em;opacity:.65}
@keyframes defiler{to{transform:translateX(-50%)}}

/* ---------- 10. Cartes ---------- */
.carte{position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--blanc);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--ombre-s);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.carte:hover{transform:translateY(-9px);box-shadow:var(--ombre-l)}
.carte__media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--creme-2)}
.carte__media img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.carte:hover .carte__media img{transform:scale(1.07)}
.carte__corps{display:flex;flex-direction:column;gap:.85rem;padding:clamp(1.4rem,2.4vw,2.1rem);flex:1}
.carte__corps p{color:var(--texte-doux);font-size:.98rem}
.carte__corps .lien-fleche{margin-top:auto;padding-top:.5rem}
.carte__etiquette{position:absolute;top:1rem;left:1rem;z-index:2;
  padding:.42em 1em;border-radius:999px;background:var(--nuit);color:var(--creme);
  font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.carte--or .carte__etiquette{background:var(--or);color:var(--nuit)}

/* carte de département (page zone d'intervention) */
.carte--dept{padding:clamp(1.2rem,2.2vw,1.7rem)}
.carte--dept .surtitre{margin-bottom:.5rem}

/* carte publique (Pour qui ?) */
.carte-public{position:relative;display:block;height:100%;min-height:clamp(300px,38vw,420px);
  border-radius:var(--r-l);overflow:hidden;color:var(--creme);isolation:isolate;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.carte-public img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.2s var(--ease)}
.carte-public::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(28,14,16,.06) 18%,rgba(28,14,16,.5) 58%,rgba(28,14,16,.9) 100%);
  transition:background .55s var(--ease)}
.carte-public:hover{transform:translateY(-9px);box-shadow:var(--ombre-l)}
.carte-public:hover img{transform:scale(1.09)}
.carte-public:hover::before{background:linear-gradient(178deg,rgba(124,12,19,.14) 12%,rgba(124,12,19,.6) 55%,rgba(28,14,16,.95) 100%)}
.carte-public__corps{position:absolute;inset:auto 0 0;padding:clamp(1.3rem,2.4vw,1.9rem)}
.carte-public h3{font-size:clamp(1.5rem,2.4vw,2rem);color:var(--creme)}
.carte-public p{margin:.5rem 0 0;font-size:.94rem;color:rgba(251,244,230,.82);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--ease),opacity .45s var(--ease),margin .55s var(--ease)}
.carte-public:hover p,.carte-public:focus-visible p{max-height:7em;opacity:1}
.carte-public__fleche{position:absolute;top:1.1rem;right:1.1rem;
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:var(--creme);color:var(--nuit);
  transform:scale(0) rotate(-45deg);transition:transform .5s var(--ease)}
.carte-public:hover .carte-public__fleche{transform:scale(1) rotate(0)}

/* ---------- 11. Médaillon (halo doré animé) ---------- */
.medaillon{position:relative;display:block;width:100%;max-width:440px;margin-inline:auto}
.medaillon::before{content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,rgba(242,209,137,.55),rgba(242,209,137,0) 68%);
  filter:blur(18px);opacity:.55;animation:halo 3.4s ease-in-out infinite;pointer-events:none}
.medaillon img{position:relative;width:100%;
  filter:drop-shadow(0 0 0 rgba(242,209,137,0));
  animation:eclat 3.4s ease-in-out infinite;
  transition:transform .8s var(--ease)}
.medaillon:hover img{transform:scale(1.04) rotate(1.5deg)}
@keyframes halo{0%,100%{opacity:.35;transform:scale(.97)}50%{opacity:.75;transform:scale(1.03)}}
@keyframes eclat{0%,100%{filter:drop-shadow(0 0 6px rgba(242,209,137,.35))}
  50%{filter:drop-shadow(0 0 22px rgba(242,209,137,.75))}}

/* ---------- 11 bis. Note Google (preuve sociale) ---------- */
.note-google{display:inline-flex;align-items:center;gap:.7rem;
  padding:.55rem .95rem .55rem .7rem;border-radius:999px;
  background:var(--blanc);border:1px solid rgba(36,18,20,.12);
  box-shadow:var(--ombre-s);font-size:.88rem;line-height:1.25;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
a.note-google:hover{transform:translateY(-2px);box-shadow:var(--ombre-m)}
.note-google__etoiles{display:inline-flex;gap:1px;color:var(--or-fonce);flex:none}
.note-google__note{font-weight:900;font-size:1.02rem}
.note-google__texte{color:var(--texte-doux);white-space:nowrap}
.note-google__texte b{color:var(--texte);font-weight:800}
.section--nuit .note-google,.section--velours .note-google{
  background:rgba(251,244,230,.07);border-color:rgba(217,164,65,.3);color:var(--creme)}
.section--nuit .note-google__texte,.section--velours .note-google__texte{color:rgba(251,244,230,.72)}
.section--nuit .note-google__texte b,.section--velours .note-google__texte b{color:var(--creme)}
.section--nuit .note-google__etoiles,.section--velours .note-google__etoiles{color:var(--or)}
.pied .note-google{background:rgba(251,244,230,.07);border-color:rgba(217,164,65,.3);color:var(--creme)}
.pied .note-google__texte{color:rgba(251,244,230,.72)}
.pied .note-google__texte b{color:var(--creme)}
.pied .note-google__etoiles{color:var(--or)}

/* ---------- 12. Bloc alterné (texte + image) ---------- */
.duo{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(min-width:900px){
  .duo{grid-template-columns:1fr 1fr}
  .duo--inverse .duo__media{order:-1}
}
.duo + .duo{margin-top:clamp(4rem,9vw,8rem)}
.duo__media{position:relative}
.duo__media img{border-radius:var(--r-l);box-shadow:var(--ombre-m);width:100%}
.duo__badge{position:absolute;bottom:-1.4rem;right:-1rem;z-index:2;
  display:grid;place-items:center;gap:.1rem;width:clamp(96px,12vw,132px);aspect-ratio:1;
  border-radius:50%;background:var(--or);color:var(--nuit);text-align:center;
  box-shadow:var(--ombre-m);animation:flotter 5s ease-in-out infinite}
.duo__badge strong{font-family:var(--ff-display);font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1}
.duo__badge span{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
@keyframes flotter{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-11px) rotate(4deg)}}

/* liste à puces cirque */
.liste-atouts{display:grid;gap:.85rem;margin-top:1.6rem}
.liste-atouts li{position:relative;padding-left:2.1rem;font-weight:600}
.liste-atouts--colonnes{columns:2;column-gap:2rem;margin-top:1.6rem;font-size:.95rem}
.liste-atouts--colonnes li{break-inside:avoid}
.liste-atouts li::before{content:"";position:absolute;left:0;top:.52em;
  width:13px;height:13px;border-radius:50%;
  background:var(--or);box-shadow:0 0 0 4px rgba(217,164,65,.22)}
.section--nuit .liste-atouts li::before{background:var(--or-clair)}

/* ---------- 13. Chiffres ---------- */
.chiffres{display:grid;gap:clamp(1.5rem,3vw,2rem);text-align:center}
@media(min-width:600px){.chiffres{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.chiffres{grid-template-columns:repeat(4,1fr)}}
.chiffre{padding:clamp(1.4rem,2.5vw,2rem) 1rem;border-radius:var(--r-m);
  background:rgba(251,244,230,.05);border:1px solid rgba(217,164,65,.24);
  transition:transform .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease)}
.chiffre:hover{transform:translateY(-7px);background:rgba(217,164,65,.1);border-color:var(--or)}
.chiffre strong{display:block;font-family:var(--ff-display);
  font-size:clamp(2.3rem,5vw,3.6rem);line-height:1;color:var(--or-clair)}
.chiffre span{display:block;margin-top:.6rem;font-size:.85rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(251,244,230,.72)}

/* ---------- 14. Galerie ---------- */
.galerie{display:grid;gap:clamp(.7rem,1.4vw,1.1rem);
  grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.galerie{grid-template-columns:repeat(4,1fr)}}
.galerie figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r-m);
  background:var(--creme-2)}
.galerie img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;
  transition:transform 1s var(--ease),filter .6s var(--ease)}
.galerie figure:hover img{transform:scale(1.09)}
.galerie figure:nth-child(4n+1){grid-row:span 2}
.galerie figure:nth-child(4n+1) img{aspect-ratio:1/2.06}
@media(max-width:819px){
  .galerie figure:nth-child(4n+1){grid-row:auto}
  .galerie figure:nth-child(4n+1) img{aspect-ratio:1}
}

/* ---------- 15. Accordéon FAQ ---------- */
.faq{max-width:840px;margin-inline:auto;border-top:1px solid rgba(36,18,20,.14)}
.faq__item{border-bottom:1px solid rgba(36,18,20,.14)}
.faq__bouton{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  width:100%;padding:1.5rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--ff-display);font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.3;
  transition:color .3s var(--ease)}
.faq__bouton:hover{color:var(--velours)}
.faq__icone{flex:none;position:relative;width:40px;height:40px;border-radius:50%;
  border:2px solid currentColor;
  transition:background-color .4s var(--ease),color .4s var(--ease),transform .5s var(--ease)}
.faq__icone::before,.faq__icone::after{content:"";position:absolute;top:50%;left:50%;
  width:15px;height:2px;margin:-1px 0 0 -7.5px;background:currentColor;border-radius:2px;
  transition:transform .45s var(--ease)}
.faq__icone::after{transform:rotate(90deg)}
.faq__bouton[aria-expanded="true"] .faq__icone{background:var(--velours);color:var(--creme);
  border-color:var(--velours);transform:rotate(180deg)}
.faq__bouton[aria-expanded="true"] .faq__icone::after{transform:rotate(0)}
.faq__panneau{overflow:hidden;height:0;transition:height .5s var(--ease)}
.faq__panneau > div{padding-bottom:1.7rem;color:var(--texte-doux);max-width:70ch}

/* ---------- 16. Formulaire ---------- */
.form-bloc{position:relative;background:var(--creme);color:var(--texte);
  border-radius:var(--r-xl);padding:clamp(1.6rem,4vw,3.4rem);box-shadow:var(--ombre-l)}
.form{display:grid;gap:1.15rem}
@media(min-width:680px){
  .form{grid-template-columns:repeat(2,1fr)}
  .champ--large{grid-column:1/-1}
}
.champ{position:relative;display:flex;flex-direction:column;gap:.42rem}
.champ label{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texte-doux)}
.champ label .obl{color:var(--velours)}
.champ input,.champ select,.champ textarea{
  width:100%;padding:.95em 1.1em;border:2px solid rgba(36,18,20,.14);border-radius:var(--r-s);
  background:var(--blanc);font-size:1rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.champ textarea{min-height:132px;resize:vertical}
.champ select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23241214' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1em center;padding-right:2.8em}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--velours);box-shadow:0 0 0 4px rgba(180,22,30,.13)}
.champ.est-invalide input,.champ.est-invalide select,.champ.est-invalide textarea{
  border-color:var(--velours);animation:secouer .4s var(--ease)}
.champ__erreur{display:none;font-size:.82rem;font-weight:700;color:var(--velours)}
.champ.est-invalide .champ__erreur{display:block}
@keyframes secouer{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-4px)}}
.pot-de-miel{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form__pied{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;
  justify-content:space-between;margin-top:.4rem}
.form__mentions{font-size:.82rem;color:var(--texte-doux);max-width:44ch}
.form__mentions a{text-decoration:underline;text-underline-offset:3px}
.form__retour{grid-column:1/-1;display:none;padding:1.1em 1.3em;border-radius:var(--r-s);
  font-weight:700}
.form__retour.est-visible{display:block}
.form__retour--ok{background:rgba(30,120,70,.1);color:#1a6b43;border:2px solid rgba(30,120,70,.3)}
.form__retour--ko{background:rgba(180,22,30,.09);color:var(--velours-fonce);border:2px solid rgba(180,22,30,.3)}

/* ---------- 17. Bloc contact ---------- */
.contact-grille{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:start}
@media(min-width:980px){.contact-grille{grid-template-columns:.85fr 1.15fr}}
.contact-infos li + li{margin-top:1.5rem}
.contact-infos a{font-weight:800;font-size:1.15rem}
.contact-infos a:hover{color:var(--or-clair)}
.contact-infos small{display:block;font-size:.74rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or);margin-bottom:.25rem}

/* ---------- 18. Pied de page ---------- */
.pied{position:relative;background:var(--nuit);color:var(--creme);
  padding-block:clamp(3.5rem,7vw,5.5rem) 2rem;overflow:hidden}
.pied__grille{display:grid;gap:2.6rem}
@media(min-width:800px){.pied__grille{grid-template-columns:1.4fr 1fr 1fr}}
.pied__titre{font-family:var(--ff-corps);font-weight:800;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or);margin-bottom:1.1rem}
.pied__titre--suite{margin-top:1.8rem}
.pied__liens li + li{margin-top:.7rem}
.pied__liens a{color:rgba(251,244,230,.8);transition:color .3s var(--ease),padding-left .3s var(--ease)}
.pied__liens a:hover{color:var(--or-clair);padding-left:6px}
.pied .logo img{width:96px}
.pied__intro{margin-top:1.2rem;color:rgba(251,244,230,.7);max-width:38ch;font-size:.96rem}
.pied__bas{display:flex;flex-wrap:wrap;gap:.8rem 1.8rem;justify-content:space-between;
  align-items:center;margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;
  border-top:1px solid rgba(251,244,230,.13);
  font-size:.84rem;color:rgba(251,244,230,.6)}
.pied__bas a:hover{color:var(--or-clair)}

/* ---------- 19. Fil d'Ariane + héros de page interne ---------- */
.heros-page{position:relative;padding-top:clamp(8rem,16vh,11rem);
  padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden;background:var(--creme-2)}
.heros-page::after{content:"";position:absolute;inset:auto 0 0;height:64%;
  background:linear-gradient(to bottom,transparent,var(--creme))}
.heros-page > *{position:relative;z-index:1}
.heros-page .titre-geant{font-size:clamp(2.4rem,6.4vw,5.2rem);max-width:16ch}
.heros-page .chapo{margin-top:1.4rem}
.fil{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem;
  font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--texte-doux)}
.fil li+li::before{content:"›";margin-right:.5rem;opacity:.55}
.fil a:hover{color:var(--velours)}
.fil [aria-current]{color:var(--velours)}

/* ---------- 20. Contenu éditorial (pages légales) ---------- */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin:2.6rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--ff-corps);font-weight:800;font-size:1.08rem;margin:1.8rem 0 .6rem}
.prose ul{margin:0 0 1.2em;padding-left:1.4rem;list-style:disc}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--velours);text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:800}

/* ---------- 21. Animations : états initiaux et révélations ---------- */
[data-anim]{will-change:transform,opacity}
[data-anim="monter"]{opacity:0;transform:translateY(38px)}
[data-anim="descendre"]{opacity:0;transform:translateY(-30px)}
[data-anim="gauche"]{opacity:0;transform:translateX(-46px)}
[data-anim="droite"]{opacity:0;transform:translateX(46px)}
[data-anim="zoom"]{opacity:0;transform:scale(.9)}
[data-anim="pivot"]{opacity:0;transform:translateY(34px) rotate(-3.5deg) scale(.96)}
[data-anim="fondu"]{opacity:0}
[data-anim]{transition:opacity .85s var(--ease),transform .95s var(--ease);
  transition-delay:calc(var(--d,0) * 1ms)}
[data-anim].est-visible{opacity:1;transform:none}

@media(max-width:760px){
  [data-anim="gauche"],[data-anim="droite"]{transform:translateY(34px)}
}

/* titre découpé en lignes qui montent */
.titre-lignes{overflow:hidden}
.ligne-masque{display:block;overflow:hidden}
.ligne-masque > span{display:block;transform:translateY(105%);
  transition:transform 1.05s var(--ease);transition-delay:calc(var(--d,0) * 1ms)}
.est-visible .ligne-masque > span,.ligne-masque.est-visible > span{transform:translateY(0)}

/* parallaxe : piloté par --py depuis le JS */
[data-parallaxe]{will-change:transform;transform:translate3d(0,var(--py,0px),0)}
[data-souris]{will-change:transform;
  transform:translate3d(var(--mx,0px),var(--my,0px),0) rotate(var(--mr,0deg));
  transition:transform .9s cubic-bezier(.16,1,.3,1)}

/* carte inclinable au curseur */
.inclinable{transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .5s var(--ease)}
.inclinable.est-active{transition:transform .12s linear}

/* rideau d'ouverture */
.rideau{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--nuit);pointer-events:none}
.rideau__pan{position:absolute;top:0;bottom:0;width:52%;
  background:linear-gradient(90deg,var(--velours-fonce),var(--velours) 34%,var(--velours-fonce) 68%,var(--velours) 100%);
  background-size:60px 100%;
  transition:transform 1.05s var(--ease-doux) .25s}
.rideau__pan--g{left:0;box-shadow:inset -30px 0 50px -18px rgba(0,0,0,.6)}
.rideau__pan--d{right:0;box-shadow:inset 30px 0 50px -18px rgba(0,0,0,.6)}
.rideau__logo{position:relative;z-index:2;width:130px;
  transition:opacity .45s var(--ease),transform .6s var(--ease)}
.rideau.est-ouvert .rideau__pan--g{transform:translateX(-101%)}
.rideau.est-ouvert .rideau__pan--d{transform:translateX(101%)}
.rideau.est-ouvert .rideau__logo{opacity:0;transform:scale(.8)}
.rideau.est-fini{display:none}

/* confettis */
.confettis{position:fixed;inset:0;z-index:9998;pointer-events:none}

/* ---------- 21 bis. Bouton de réservation flottant ---------- */
.reserver{
  position:fixed;z-index:90;
  right:clamp(1rem,3vw,2rem);
  bottom:calc(clamp(1rem,3vw,2rem) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:.6em;
  padding:1em 1.6em;border-radius:999px;
  background:var(--velours);color:var(--blanc);
  font-weight:800;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 10px 30px -8px rgba(124,12,19,.55),0 0 0 0 rgba(217,164,65,.6);
  opacity:0;transform:translateY(18px) scale(.92);pointer-events:none;
  transition:opacity .45s var(--ease),transform .55s var(--ease),
             background-color .35s var(--ease),box-shadow .45s var(--ease)}
.reserver.est-visible{opacity:1;transform:none;pointer-events:auto}
.reserver:hover{background:var(--nuit);transform:translateY(-3px)}
.reserver:active{transform:translateY(-1px)}
.reserver svg{flex:none}

/* Anneau doré : une seule pulsation à l'apparition, pour attirer l'œil sans
   créer une animation permanente qui fatiguerait à la lecture. */
.reserver.est-visible{animation:anneau 1.5s var(--ease) .25s 1}
@keyframes anneau{
  0%{box-shadow:0 10px 30px -8px rgba(124,12,19,.55),0 0 0 0 rgba(217,164,65,.65)}
  70%{box-shadow:0 10px 30px -8px rgba(124,12,19,.55),0 0 0 16px rgba(217,164,65,0)}
  100%{box-shadow:0 10px 30px -8px rgba(124,12,19,.55),0 0 0 0 rgba(217,164,65,0)}}

@media(max-width:600px){
  .reserver{left:clamp(1rem,3vw,2rem);justify-content:center;font-size:.88rem}
}
body.menu-actif .reserver{opacity:0;pointer-events:none;transform:translateY(18px) scale(.92)}

/* ---------- 22. Divers ---------- */
.saut-contenu{position:absolute;left:-9999px;top:0;z-index:200;
  padding:1em 1.5em;background:var(--nuit);color:var(--creme);font-weight:800;border-radius:0 0 var(--r-s) 0}
.saut-contenu:focus{left:0}
.rayures-fond{position:absolute;inset:0;z-index:0;opacity:.09;
  background-image:url('../img/rayures.webp');background-size:auto 100%;pointer-events:none}
.section--nuit > .enveloppe,.section--velours > .enveloppe{position:relative;z-index:1}

/* ---------- 23. Mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-anim]{opacity:1!important;transform:none!important}
  .ligne-masque > span{transform:none!important}
  [data-parallaxe],[data-souris]{transform:none!important}
  .rideau{display:none}
  .bandeau__piste{animation:none}
}