/* =====================================================================
 *  Artistes En Scène — Feuille de styles principale
 *  assets/css/style.css
 *  Charte : violet #432390 · rose #d4537e · violet clair #6a3fc4
 *  Titres : Anton — Texte : Oswald
 * ===================================================================== */

:root{
  --violet:#432390;
  --violet-clair:#6a3fc4;
  --rose:#d4537e;
  --noir:#0d0714;
  --noir-2:#160c26;
  --noir-3:#1f1236;
  --creme:#f4eefb;
  --gris:#b7a9cf;
  --ligne:rgba(212,83,126,.22);
  --grad:linear-gradient(120deg,var(--violet) 0%,var(--rose) 100%);
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --font-titre:'Anton',Impact,sans-serif;
  --font-texte:'Oswald',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;scrollbar-gutter:stable;scroll-padding-top:var(--anchor-offset,90px)}
body{background:var(--noir);color:var(--creme);font-family:var(--font-texte);font-weight:300;line-height:1.65;overflow-x:hidden;max-width:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{width:min(1180px,92vw);margin-inline:auto}
.eyebrow{font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;color:var(--rose);font-weight:500;display:inline-block;margin-bottom:1rem}
h1,h2,h3{font-family:var(--font-titre);line-height:1;font-weight:400;letter-spacing:.01em;text-transform:uppercase}
.section{padding:clamp(4rem,9vw,7.5rem) 0;position:relative}
.section-title{font-size:clamp(2.2rem,5.5vw,3.8rem);margin-bottom:.6rem}
.section-sub{color:var(--gris);max-width:60ch;margin-bottom:3rem;font-weight:300}

.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:.5rem;padding:.85rem 1.7rem;border-radius:100px;font-weight:500;font-size:.95rem;font-family:var(--font-texte);text-transform:uppercase;letter-spacing:.05em;line-height:1.35;transition:transform .25s ease,box-shadow .25s ease;cursor:pointer;border:none}
/* L'icône ne s'écrase pas et reste alignée avec la première ligne de texte */
.btn .ti{flex-shrink:0}

/* MOBILE : TOUS les boutons prennent toute la largeur (principal comme secondaire) */
@media(max-width:640px){
  .btn{
    width:100%;
    padding-left:1.1rem;
    padding-right:1.1rem;
  }
  /* Les conteneurs de boutons passent en colonne pour que ça ait du sens */
  .hero-id-cta,.hero-cta,.hp-actions,.auditions-actions,
  .galerie-cta,.article-cta,.shop,.histoire-txt > div{
    flex-direction:column;
    align-items:stretch;
  }
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px -8px var(--rose)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px -10px var(--rose)}
.btn-ghost{border:1px solid var(--ligne);color:var(--creme)}
.btn-ghost:hover{background:var(--noir-3);border-color:var(--rose)}

/* ===== NAVIGATION — Menu rideau (tombe du haut, comme au théâtre) ===== */
header.nav{position:fixed;inset:0 0 auto 0;z-index:110;display:flex;align-items:center;justify-content:space-between;padding:.9rem clamp(1rem,4vw,2.5rem);transition:background .3s ease,backdrop-filter .3s ease}
header.nav.hero-passe{background:rgba(13,7,20,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--ligne)}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:38px;width:auto}

/* Burger animé (trois traits → croix rose) */
.nav-burger{display:block;background:none;border:none;cursor:pointer;padding:0;width:46px;height:46px;position:relative;z-index:120}
.burger-box{display:block;width:30px;height:22px;position:relative;margin:0 auto}
.burger-inner,.burger-inner::before,.burger-inner::after{content:'';position:absolute;left:0;width:30px;height:3px;border-radius:3px;background:var(--creme);transition:transform .35s cubic-bezier(.68,-.3,.32,1.3),background .3s,top .3s,bottom .3s}
.burger-inner{top:50%;transform:translateY(-50%)}
.burger-inner::before{top:-9px}
.burger-inner::after{bottom:-9px}
body.menu-ouvert .burger-inner{background:transparent}
body.menu-ouvert .burger-inner::before{top:0;transform:rotate(45deg);background:var(--rose)}
body.menu-ouvert .burger-inner::after{bottom:0;transform:rotate(-45deg);background:var(--rose)}
/* Menu ouvert : le header (donc la croix) repasse au-dessus du rideau */
body.menu-ouvert header.nav{z-index:120;background:transparent;backdrop-filter:none;border:none}
/* Menu ouvert : seule la croix reste visible, le logo s'efface */
/* Menu ouvert : seule la croix reste visible. Sélecteur volontairement plus
   spécifique que « .nav.hero-passe .nav-logo-hideable » (plus bas dans le
   fichier), sinon cette dernière réafficherait le logo une fois scrollé. */
body.menu-ouvert header.nav .nav-logo,
body.menu-ouvert header.nav.hero-passe .nav-logo-hideable{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease}

/* Le rideau : voile plein écran qui tombe du haut */
.rideau{position:fixed;inset:0;z-index:115;transform:translateY(-100%);transition:transform .6s cubic-bezier(.77,0,.18,1);display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:calc(5.5rem + var(--h-bandeau,0px)) 1rem 2.5rem;pointer-events:none}
.rideau-drape{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,7,20,.97),rgba(22,12,38,.97)),repeating-linear-gradient(90deg,rgba(212,83,126,.06) 0 40px,rgba(106,63,196,.06) 40px 80px);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.rideau-drape::after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--grad)}
body.menu-ouvert .rideau{transform:translateY(0);pointer-events:auto}

/* Liens du menu : fondu une fois le rideau tombé */
.rideau-liens{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.85rem;margin:auto;opacity:0;transition:opacity .4s ease .35s}
body.menu-ouvert .rideau-liens{opacity:1}
.rideau-liens a{font-family:var(--font-titre);font-size:clamp(1.5rem,4vw,2.4rem);line-height:1.15;text-transform:uppercase;letter-spacing:.04em;color:var(--creme);position:relative;transition:color .25s}
.rideau-liens a::after{content:'';position:absolute;left:50%;bottom:-6px;width:0;height:3px;background:var(--grad);transform:translateX(-50%);transition:width .3s}
.rideau-liens a:hover{color:var(--rose)}
.rideau-liens a:hover::after{width:100%}
body.menu-ouvert{overflow:hidden}
/* Défilement fluide à l'intérieur du rideau (iOS) */
body.menu-ouvert .rideau{-webkit-overflow-scrolling:touch}

.hero{min-height:100vh;display:flex;align-items:center;position:relative;padding-top:6rem;overflow:hidden}
.hero::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:120vw;height:120vh;background:radial-gradient(ellipse at center,rgba(106,63,196,.35) 0%,transparent 55%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;position:relative;z-index:2}
.hero-tag{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border:1px solid var(--ligne);border-radius:100px;font-size:.78rem;letter-spacing:.08em;color:var(--rose);margin-bottom:1.5rem;text-transform:uppercase}
.hero-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--rose);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(212,83,126,.6)}70%{box-shadow:0 0 0 10px rgba(212,83,126,0)}100%{box-shadow:0 0 0 0 rgba(212,83,126,0)}}
.hero h1{font-size:clamp(3rem,9vw,6rem);margin-bottom:1rem}
.hero h1 .rose{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.4rem;color:var(--violet-clair);font-size:1rem;margin-bottom:1.6rem;font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.hero-meta span{display:inline-flex;align-items:center;gap:.45rem}
.hero-desc{color:var(--gris);max-width:52ch;margin-bottom:2rem;font-weight:300;font-size:1.05rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}
.hero-visual{aspect-ratio:3/4;border-radius:18px;overflow:hidden;position:relative;box-shadow:var(--shadow);border:1px solid var(--ligne);background:linear-gradient(160deg,var(--noir-3),var(--violet))}
.hero-visual img,.hero-visual video{width:100%;height:100%;object-fit:cover}
.hero-visual .placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;color:var(--gris)}
.hero-visual .placeholder i{font-size:3rem;color:var(--rose)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:2.2rem}.hero-visual{max-width:340px;margin-inline:auto}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.stat{text-align:center;padding:2rem 1rem;border:1px solid var(--ligne);border-radius:16px;background:var(--noir-2);transition:transform .3s,border-color .3s}
.stat:hover{transform:translateY(-6px);border-color:var(--rose)}
.stat .num{font-family:var(--font-titre);font-size:clamp(2.6rem,5vw,3.8rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{color:var(--gris);font-size:.85rem;margin-top:.4rem;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:680px){.stats{grid-template-columns:repeat(2,1fr)}}

.histoire{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.histoire-txt p{color:var(--gris);margin-bottom:1.1rem;font-weight:300}
.histoire-img{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--ligne);min-height:340px;background:linear-gradient(160deg,var(--violet),var(--rose))}
@media(max-width:900px){.histoire{grid-template-columns:1fr}}

.agenda-list{display:flex;flex-direction:column;gap:1.2rem}
.agenda-item{display:grid;grid-template-columns:auto 1fr auto;gap:1.6rem;align-items:center;background:var(--noir-2);border:1px solid var(--ligne);border-radius:16px;padding:1.4rem 1.6rem;transition:transform .3s,border-color .3s}
.agenda-item:hover{transform:translateX(6px);border-color:var(--rose)}
.agenda-date{text-align:center;min-width:70px;border-right:1px solid var(--ligne);padding-right:1.4rem}
.agenda-date .jour{font-family:var(--font-titre);font-size:2.4rem;line-height:1;color:var(--rose)}
.agenda-date .mois{text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--violet-clair);margin-top:.2rem}
.agenda-date .annee{font-size:.75rem;color:var(--gris)}
.agenda-item.a-cover{grid-template-columns:auto auto 1fr auto}
/* Pochette du spectacle : cadre dégradé + halo « lumière de scène » */
.agenda-cover{
  position:relative;display:block;flex:0 0 auto;
  width:104px;height:146px;padding:3px;border-radius:16px;
  background:linear-gradient(140deg,var(--violet),var(--rose) 70%,var(--violet-clair));
  box-shadow:0 14px 34px -8px rgba(212,83,126,.45);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
}
.agenda-cover.agenda-cover-carre{width:132px;height:132px}
.agenda-cover img{width:100%;height:100%;object-fit:cover;display:block;border-radius:13px}
/* léger reflet en haut de la pochette */
.agenda-cover::after{content:"";position:absolute;inset:3px;border-radius:13px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 45%)}
a.agenda-cover:hover{transform:translateY(-5px) rotate(-1.5deg) scale(1.03);box-shadow:0 22px 46px -8px rgba(212,83,126,.65)}
.btn-savoir{white-space:nowrap}
.agenda-info h3{font-size:1.5rem;margin-bottom:.25rem}
.agenda-info .soustitre{color:var(--gris);font-weight:300;font-size:.95rem;margin-bottom:.5rem}
.agenda-info .lieu{color:var(--violet-clair);font-size:.88rem;display:inline-flex;align-items:center;gap:.4rem;text-transform:uppercase;letter-spacing:.03em}
.agenda-info .heure{color:var(--gris);font-size:.88rem;margin-left:1rem;display:inline-flex;align-items:center;gap:.4rem}
.agenda-cta{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.badge{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;padding:.3rem .8rem;border-radius:100px;font-weight:500}
.badge-complet{background:rgba(212,83,126,.18);color:var(--rose)}
.badge-annule{background:rgba(226,75,74,.18);color:#f0acac}
.badge-passe{background:rgba(183,169,207,.15);color:var(--gris)}

/* ===== Spectacle joué sur plusieurs dates : tuile groupée ===== */
.agenda-item.agenda-groupe{display:block;padding:0;overflow:hidden}
.agenda-groupe-tete{display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center;padding:1.3rem 1.6rem}
.agenda-groupe .agenda-info{min-width:0}
.agenda-groupe-compte{display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;color:var(--rose);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.agenda-groupe-actions{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
/* Liste des dates */
.agenda-dates{list-style:none;margin:0;padding:.4rem .6rem .6rem;border-top:1px solid var(--ligne);background:rgba(0,0,0,.15)}
.agenda-date-ligne{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.6rem .9rem;border-radius:10px;transition:background .2s}
.agenda-date-ligne:hover{background:rgba(212,83,126,.08)}
.agenda-date-ligne + .agenda-date-ligne{border-top:1px solid rgba(255,255,255,.04)}
.adl-quand{display:inline-flex;align-items:center;gap:.5rem;color:var(--creme);font-size:.95rem;font-weight:500}
.adl-quand i{color:var(--violet-clair)}
.adl-actions{display:inline-flex;gap:.5rem;align-items:center;margin-left:auto}
.btn-mini{padding:.4rem .8rem;font-size:.82rem}
.btn-mini i{margin:0}
.agenda-cal.btn-mini,.btn-cal.btn-mini{width:auto}
@media(max-width:760px){
  /* Tuile groupée (plusieurs dates) : pochette + infos en tête, actions dessous */
  .agenda-groupe-tete{grid-template-columns:88px 1fr;gap:.95rem;padding:1.1rem 1.1rem;align-items:start}
  .agenda-groupe-tete .agenda-cover.agenda-cover-carre{width:88px;height:88px}
  .agenda-groupe-tete .agenda-cover:not(.agenda-cover-carre){width:80px;height:112px}
  .agenda-groupe-tete .agenda-info h3{font-size:1.15rem}
  .agenda-groupe-actions{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:stretch;margin-top:.2rem}
  .agenda-groupe-actions .btn{flex:1 1 auto;justify-content:center}
  /* Liste des dates : chaque soir sur 2 lignes (date + actions pleine largeur) */
  .agenda-date-ligne{padding:.6rem .6rem;gap:.5rem}
  .adl-quand{flex:1 1 100%}
  .adl-actions{margin-left:0;width:100%}
  .adl-actions .btn-mini{flex:1 1 auto;justify-content:center}
}
@media(max-width:760px){
  /* Tuile SANS pochette : date à gauche, infos à droite, bouton dessous */
  .agenda-item{grid-template-columns:auto 1fr;gap:1rem;padding:1.1rem 1.2rem}
  .agenda-date{min-width:56px;padding-right:1rem}
  .agenda-date .jour{font-size:2rem}
  .agenda-date .mois{font-size:.72rem}
  .agenda-cta{grid-column:1 / -1;align-items:stretch;margin-top:.4rem}
  .agenda-info .lieu{display:flex}
  .agenda-info .heure{display:flex;margin-left:0;margin-top:.3rem}

  /* Tuile AVEC pochette : pochette carrée à gauche, date en ligne + infos à droite,
     boutons pleine largeur en dessous (plus aéré sur mobile). */
  .agenda-item.a-cover{
    grid-template-columns:96px 1fr;
    grid-template-areas:"cover date" "cover info" "cta cta";
    gap:.5rem .95rem;align-items:start;padding:1.1rem 1.2rem;
  }
  /* Date : le grand jour + le mois + l'année alignés sur la même ligne de base. */
  .agenda-item.a-cover .agenda-date{
    grid-area:date;display:flex;align-items:flex-end;gap:.4rem;
    text-align:left;border:none;min-width:0;padding:0;margin:0;line-height:1;
  }
  .agenda-item.a-cover .agenda-date .jour{font-size:2.2rem;line-height:.85}
  .agenda-item.a-cover .agenda-date .mois{margin:0;font-size:.82rem;line-height:1}
  .agenda-item.a-cover .agenda-date .annee{margin:0;font-size:.82rem;line-height:1}
  .agenda-item.a-cover .agenda-cover{grid-area:cover;width:96px;height:96px}
  .agenda-item.a-cover .agenda-cover:not(.agenda-cover-carre){width:86px;height:120px}
  .agenda-item.a-cover .agenda-info{grid-area:info;min-width:0}
  .agenda-item.a-cover .agenda-info h3{font-size:1.3rem;line-height:1.2}
  .agenda-item.a-cover .agenda-info .lieu{font-size:.82rem}
  .agenda-item.a-cover .agenda-info .heure{font-size:.86rem}
  /* Boutons : pleine largeur, bien cliquables (pas rikiki). */
  .agenda-item.a-cover .agenda-cta{
    grid-area:cta;grid-column:1 / -1;margin-top:.7rem;
    flex-direction:column;align-items:stretch;gap:.55rem;
  }
  .agenda-item.a-cover .agenda-cta .btn{
    width:100%;justify-content:center;padding:.8rem 1rem;font-size:.95rem;
  }
  .agenda-item.a-cover .agenda-cta .badge{align-self:flex-start}
}

.actu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.actu-card{background:var(--noir-2);border:1px solid var(--ligne);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,border-color .3s}
.actu-card:hover{transform:translateY(-6px);border-color:var(--rose)}
.actu-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--noir-3)}
.actu-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s}
.actu-card:hover .thumb img{transform:scale(1.06)}
.actu-card .thumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--violet-clair);font-size:2.4rem;background:linear-gradient(150deg,var(--noir-3),var(--noir-2))}
.actu-body{padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.actu-date{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-clair)}
.actu-card h3{font-size:1.3rem;line-height:1.35;margin:.4rem 0 .5rem}
.actu-card p{color:var(--gris);font-size:.92rem;font-weight:300}
.actu-card .lien{margin-top:auto;color:var(--rose);font-weight:500;font-size:.9rem;display:inline-flex;align-items:center;gap:.4rem;text-transform:uppercase;letter-spacing:.03em}
.pin{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--rose);text-transform:uppercase}
.empty-note{grid-column:1/-1;text-align:center;color:var(--gris);padding:3rem;border:1px dashed var(--ligne);border-radius:16px}
@media(max-width:900px){.actu-grid{grid-template-columns:1fr}}

.galerie-mosaique{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:.8rem}
.galerie-mosaique a{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--ligne);display:block;background:var(--noir-3)}
.galerie-mosaique a img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.galerie-mosaique a:hover img{transform:scale(1.08)}
.galerie-mosaique a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,7,20,.5),transparent 60%);opacity:0;transition:opacity .3s}
.galerie-mosaique a:hover::after{opacity:1}
.galerie-mosaique a:first-child{grid-column:span 2;grid-row:span 2}
.galerie-cta{text-align:center;margin-top:2rem}
.galerie-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--violet-clair);font-size:2rem;background:linear-gradient(150deg,var(--noir-3),var(--noir-2))}
@media(max-width:760px){.galerie-mosaique{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}.galerie-mosaique a:first-child{grid-column:span 2;grid-row:span 1}}

.avis-head{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-bottom:2.5rem}
.avis-note{display:flex;align-items:center;gap:.6rem;font-size:1.05rem}
.avis-note .big{font-family:var(--font-titre);font-size:2.4rem;color:var(--rose)}
.stars{color:var(--rose);letter-spacing:2px}
.avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.avis-card{background:var(--noir-2);border:1px solid var(--ligne);border-radius:16px;padding:1.6rem;display:flex;flex-direction:column;gap:.9rem}
.avis-card .who{display:flex;align-items:center;gap:.8rem}
.avis-card .who img,.avis-card .who .av{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:500;color:#fff}
.avis-card .who .name{font-weight:400}
.avis-card .who .rel{font-size:.78rem;color:var(--gris)}
.avis-card .txt{color:var(--gris);font-size:.92rem;font-weight:300}
.avis-card .stars{font-size:.85rem}
@media(max-width:900px){.avis-grid{grid-template-columns:1fr}}

.shop{background:var(--noir-2);border-radius:24px;padding:clamp(2.5rem,6vw,4.5rem);border:1px solid var(--ligne);text-align:center}
.shop h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:.8rem}
.shop p{color:var(--gris);max-width:52ch;margin:0 auto 2rem;font-weight:300}
/* Variante « scène » : polaroid immersif (image) + texte */
.shop.shop-scene{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;text-align:left;overflow:hidden;padding:clamp(2rem,4vw,3.2rem)}
.shop.shop-scene .shop-txt{position:relative;z-index:2;padding:clamp(.5rem,2vw,1.5rem)}
.shop.shop-scene .shop-txt p{margin-left:0}
/* halo « lumière de scène » derrière le polaroid */
.shop.shop-scene::before{content:"";position:absolute;left:12%;top:50%;width:min(46%,420px);aspect-ratio:1;transform:translateY(-50%);
  background:radial-gradient(circle,rgba(212,83,126,.32),rgba(106,63,196,.18) 45%,transparent 70%);filter:blur(6px);pointer-events:none;z-index:0}
.shop-polas{position:relative;z-index:1;display:flex;justify-content:center;align-items:center}
/* Le polaroid : cadre blanc, légère inclinaison, ombre profonde */
.pola{position:relative;display:block;background:#f7f4ee;padding:12px 12px 40px;border-radius:4px;max-width:400px;width:100%;
  transform:rotate(-3deg);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;
  box-shadow:0 24px 46px -14px rgba(0,0,0,.75),0 4px 10px rgba(0,0,0,.4)}
/* scotch en haut du polaroid */
.pola::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:110px;height:26px;background:linear-gradient(120deg,rgba(224,166,60,.55),rgba(212,83,126,.4));
  border:1px solid rgba(255,255,255,.25);opacity:.85;box-shadow:0 3px 6px rgba(0,0,0,.25)}
.pola-photo{display:block;overflow:hidden;background:#241633;border-radius:2px;aspect-ratio:3/2}
.pola-photo img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s}
.pola.pola-pret .pola-photo img{opacity:1}
.pola.pola-pret .mini-spinner{display:none}
.pola-legende{position:absolute;left:0;right:0;bottom:11px;text-align:center;color:#2a2233;
  font-family:var(--font-texte);font-size:1.05rem;letter-spacing:.02em}
.pola-coeur{color:var(--rose);font-size:.95em}
.pola:hover{transform:rotate(0) translateY(-6px) scale(1.02);box-shadow:0 32px 58px -14px rgba(0,0,0,.85)}
@media (max-width:820px){
  .shop.shop-scene{grid-template-columns:1fr;text-align:center;gap:2rem}
  .shop.shop-scene .shop-txt p{margin:0 auto 2rem}
  .shop.shop-scene::before{left:50%;transform:translate(-50%,-50%);top:32%}
  .pola{max-width:320px;margin:0 auto}
}

/* Boutique Spreadshop embarquée : encadrée en carte claire sur la page sombre */
.boutique-embed{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
.boutique-embed:empty,.boutique-embed .boutique-chargement{background:transparent;box-shadow:none}
.boutique-chargement{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;min-height:40vh;color:var(--gris);text-align:center}
.boutique-chargement .mini-spinner{position:static;margin:0 auto}
.boutique-chargement a{color:var(--rose)}
/* Boutons d'action de la boutique aux couleurs de la troupe */
.boutique-embed .sprd-btn-primary{background:linear-gradient(120deg,var(--violet),var(--rose))!important;border:0!important;border-radius:100px!important}
.boutique-embed .sprd-btn-primary:hover{filter:brightness(1.06)}

/* Bouton « retour en haut » (flottant, coin bas-droit) */
.haut-page{
  position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:900;
  width:50px;height:50px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad);color:#fff;font-size:1.35rem;
  box-shadow:0 10px 26px -6px rgba(212,83,126,.6);
  opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s,box-shadow .3s;
}
.haut-page:not([hidden]){opacity:1;transform:translateY(0)}
.haut-page:hover{box-shadow:0 14px 32px -6px rgba(212,83,126,.85);transform:translateY(-3px)}
.haut-page i{line-height:1}
@media (prefers-reduced-motion:reduce){.haut-page{transition:opacity .2s}}

footer{background:var(--noir-2);border-top:1px solid var(--ligne);padding:3.5rem 0 2rem;margin-top:2rem}
.foot-logo img{height:52px;width:auto;margin-bottom:1rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-grid h4{font-family:var(--font-titre);font-size:1.2rem;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.03em}
.foot-grid a,.foot-grid p{color:var(--gris);font-size:.92rem;display:block;margin-bottom:.5rem;font-weight:300}
.foot-grid a:hover{color:var(--rose)}
.socials{display:flex;gap:.8rem;margin-top:1rem}
.socials a{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ligne);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:background .25s,color .25s,box-shadow .25s}
.socials a:hover{background:var(--grad);box-shadow:inset 0 0 0 1px transparent;color:#fff}
.foot-bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;text-align:center;color:var(--gris);font-size:.82rem;border-top:1px solid var(--ligne);padding-top:1.5rem}
.foot-legal{display:inline-flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.foot-legal a{color:var(--gris);text-decoration:none;transition:color .2s}
.foot-legal a:hover{color:var(--creme);text-decoration:underline}
@media (max-width:600px){.foot-bottom{justify-content:center}}
@media(max-width:900px){
  /* Logo en pleine largeur, puis les deux menus côte à côte */
  .foot-grid{grid-template-columns:1fr 1fr;gap:1.8rem 2rem}
  .foot-logo{grid-column:1 / -1}   /* le bloc logo occupe toute la largeur */
}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero-tag .dot{animation:none}html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:4px}

/* ---------- TIMELINE CRÉATIONS ---------- */
.page-hero{padding:9rem 0 3rem;text-align:center;position:relative;overflow:hidden}
body:has(.bandeau-alerte) .page-hero{padding-top:calc(9rem + var(--h-bandeau,44px))}
.page-hero::before{content:"";position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:100vw;height:120%;background:radial-gradient(ellipse at center,rgba(106,63,196,.28) 0%,transparent 60%);pointer-events:none}
.page-hero h1{font-size:clamp(2.6rem,7vw,4.5rem);position:relative}
.page-hero p{color:var(--gris);max-width:56ch;margin:1rem auto 0;font-weight:300}

.timeline{position:relative;padding:2rem 0 4rem}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,var(--rose) 8%,var(--violet) 92%,transparent);transform:translateX(-50%)}
.tl-item{position:relative;width:50%;padding:1.4rem 2.5rem;box-sizing:border-box}
.tl-item:nth-child(odd){left:0;text-align:right}
.tl-item:nth-child(even){left:50%;text-align:left}
.tl-item:nth-child(odd) .tl-card{text-align:left}
.tl-item:nth-child(even) .tl-card{text-align:left}
.tl-dot{position:absolute;top:2rem;width:18px;height:18px;border-radius:50%;background:var(--noir);border:3px solid var(--rose);z-index:2;transition:transform .25s,background .25s}
.tl-item:nth-child(odd) .tl-dot{right:-9px}
.tl-item:nth-child(even) .tl-dot{left:-9px}
.tl-card{background:var(--noir-2);border:1px solid var(--ligne);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .3s,border-color .3s;display:inline-block;vertical-align:top;width:100%;max-width:400px;text-align:left}
.tl-card:hover{transform:translateY(-5px);border-color:var(--rose)}
.tl-card:hover ~ .tl-dot,.tl-item:hover .tl-dot{transform:scale(1.3);background:var(--rose)}
.tl-thumb{aspect-ratio:2/3;max-width:260px;margin:1.3rem auto 0;border-radius:10px;overflow:hidden;background:var(--noir-3)}
.tl-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tl-card:hover .tl-thumb img{transform:scale(1.06)}
.tl-thumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--violet-clair);font-size:2.2rem;background:linear-gradient(150deg,var(--noir-3),var(--noir-2))}
.tl-body{padding:1.3rem 1.5rem}
.tl-annee{font-family:var(--font-titre);font-size:1.8rem;color:var(--rose);line-height:1}
.tl-body h3{font-size:1.4rem;margin:.3rem 0 .2rem}
.tl-soustitre{color:var(--gris);font-size:.9rem;font-weight:300}
.tl-toggle{color:var(--violet-clair);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;margin-top:.8rem;display:inline-flex;align-items:center;gap:.4rem;transition:color .25s}
.tl-toggle .ti{transition:transform .35s ease}
/* Hover sur la CARTE → le "Découvrir" s'anime */
.tl-card:hover .tl-toggle{color:var(--rose)}
.tl-card.open .tl-toggle{color:var(--rose)}
.tl-card.open .tl-toggle .ti{transform:rotate(180deg)}
.tl-synopsis{max-height:0;overflow:hidden;transition:max-height .4s ease,margin .4s ease;color:var(--gris);font-size:.92rem;font-weight:300;line-height:1.6}
.tl-card.open .tl-synopsis{max-height:600px;margin-top:.9rem}
.tl-credit{color:var(--violet-clair);font-size:.78rem;margin-top:.8rem;font-style:italic}
@media(max-width:760px){
  .timeline::before{left:20px}
  .tl-item,.tl-item:nth-child(odd),.tl-item:nth-child(even){width:100%;left:0;text-align:left;padding:1rem 0 1rem 2.8rem}
  .tl-item:nth-child(odd) .tl-dot,.tl-item:nth-child(even) .tl-dot{left:11px;right:auto}
  /* Carte : occupe la largeur dispo (jusqu'à 340px), affiche bien visible */
  .tl-card{max-width:340px;width:100%}
}

/* ===== Galerie photos dans une création (frise) ===== */
.tl-galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: 1rem;
}
.tl-photo {
  display: block;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--noir-3);
  border: 1px solid var(--ligne);
}
.tl-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.tl-photo:hover img { transform: scale(1.08); }

.tl-album-lien {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .7rem 1.1rem;
  border-radius: 12px;
  background: rgba(212,83,126,.12);
  border: 1px solid var(--ligne);
  color: var(--rose);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: background .25s, border-color .25s;
}
.tl-album-lien:hover {
  background: rgba(212,83,126,.22);
  border-color: var(--rose);
}
.tl-album-lien .ti-arrow-right { transition: transform .25s; }
.tl-album-lien:hover .ti-arrow-right { transform: translateX(3px); }

@media (max-width: 560px) {
  .tl-galerie { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- PAGE HISTOIRE ---------- */
.histoire-page{max-width:760px;margin-inline:auto;padding:2rem 0 4rem}
.hp-bloc{margin-bottom:2.5rem}
.hp-chapitre{font-family:var(--font-titre);font-size:clamp(1.6rem,4vw,2.4rem);text-transform:uppercase;color:var(--creme);margin:3rem 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--ligne)}
.hp-texte{color:var(--gris);font-weight:300;line-height:1.75;font-size:1.05rem}
.hp-texte p{margin-bottom:1rem}
/* Liens détectés dans le texte (aes_linkifier) : accord charte rose */
.hp-texte a{
  color:var(--rose);text-decoration:none;
  border-bottom:1px solid rgba(212,83,126,.4);
  transition:border-color .25s,color .25s;
  word-break:break-word;
}
.hp-texte a:hover{color:var(--creme);border-bottom-color:var(--creme)}
.hp-image{border-radius:16px;overflow:hidden;border:1px solid var(--ligne);margin:1.5rem 0;box-shadow:var(--shadow)}
.hp-citation{font-family:var(--font-titre);font-size:clamp(1.4rem,3.5vw,2rem);text-transform:uppercase;color:var(--rose);text-align:center;line-height:1.2;padding:2rem;border-left:3px solid var(--rose);border-radius:0;background:var(--noir-2);margin:2rem 0}
.btn-livre {
  background: rgba(212,83,126,.14);
  border: 1px solid var(--rose);
  color: var(--rose);
}
.btn-livre:hover { background: var(--rose); color: #fff; }

/* ================= HERO IDENTITAIRE (généraliste) ================= */
.hero-id{
  position:relative;width:100%;max-width:100vw;
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;padding:6rem 1rem 5rem;
}
.hero-id-inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}
.hero-logo{width:min(560px,82vw);height:auto;filter:drop-shadow(0 8px 40px rgba(212,83,126,.35))}
.hero-id-baseline{color:var(--gris);font-weight:300;font-size:clamp(1rem,2.2vw,1.25rem);margin:2rem 0 2.5rem;max-width:44ch;line-height:1.7}
.hero-id-cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.hero-scroll{position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);color:var(--gris);font-size:1.8rem;animation:bounce 2s infinite;z-index:4}
.hero-scroll:hover{color:var(--rose)}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* Logo du header : masqué tant qu'on est sur le Hero (évite le doublon
   avec le grand logo), réapparaît au scroll. N'agit que sur la home. */
.nav-logo-hideable{opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s}
.nav.hero-passe .nav-logo-hideable{opacity:1;visibility:visible;transform:none}

/* Projecteurs : faisceaux lumineux qui balaient la scène.
   width en % (relatif à .projos, confiné) et non vw → pas de scroll horizontal. */
.projos{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.projo{position:absolute;top:-30%;width:48%;height:150vh;transform-origin:top center;
  background:linear-gradient(to bottom,rgba(106,63,196,.34),transparent 72%);
  filter:blur(6px);mix-blend-mode:screen;opacity:.9}
.projo.p1{left:4%;animation:balayage1 7s ease-in-out infinite}
.projo.p2{left:34%;background:linear-gradient(to bottom,rgba(212,83,126,.32),transparent 72%);animation:balayage2 8.5s ease-in-out infinite}
.projo.p3{right:34%;background:linear-gradient(to bottom,rgba(244,238,251,.20),transparent 72%);animation:balayage3 8s ease-in-out infinite}
.projo.p4{right:4%;background:linear-gradient(to bottom,rgba(106,63,196,.30),transparent 72%);animation:balayage4 9s ease-in-out infinite}
@keyframes balayage1{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(12deg)}}
@keyframes balayage2{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-14deg)}}
@keyframes balayage3{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-10deg)}}
@keyframes balayage4{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(14deg)}}

/* Halo central qui respire */
.hero-id::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:80vw;height:80vh;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(67,35,144,.45) 0%,transparent 60%);
  animation:respire 6s ease-in-out infinite}
@keyframes respire{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}

/* Particules (poussière de scène qui monte doucement) — partagées Hero + bandeaux */
.particules{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.particules::before,.particules::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(2px 2px at 20% 80%, rgba(244,238,251,.5), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(212,83,126,.5), transparent),
    radial-gradient(1px 1px at 80% 60%, rgba(244,238,251,.4), transparent),
    radial-gradient(2px 2px at 35% 50%, rgba(244,238,251,.4), transparent),
    radial-gradient(1px 1px at 75% 40%, rgba(244,238,251,.4), transparent),
    radial-gradient(2px 2px at 45% 30%, rgba(212,83,126,.4), transparent),
    radial-gradient(1px 1px at 15% 20%, rgba(244,238,251,.3), transparent);
  background-size:100% 100%;
  animation:monte 14s linear infinite;
}
.particules::after{animation-duration:22s;animation-delay:-7s;opacity:.6}
@keyframes monte{0%{transform:translateY(0)}100%{transform:translateY(-60vh)}}

/* ============= BANDEAUX IDENTITAIRES (prochain spectacle + chiffres) ============= */
/* Fond violet profond commun + halo lumineux + particules qui montent.
   Les deux bandeaux partagent EXACTEMENT ce fond. */
.bandeau-scene{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#2d1a52 0%,#1e1138 55%,#331a56 100%);
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
}
.bandeau-halo{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 120% at 50% 0%,rgba(212,83,126,.22),transparent 60%),
             radial-gradient(ellipse 50% 100% at 15% 100%,rgba(106,63,196,.25),transparent 60%),
             radial-gradient(ellipse 50% 100% at 85% 100%,rgba(106,63,196,.16),transparent 60%)}
.bandeau-scene .particules{z-index:1}
.bandeau-scene .wrap{position:relative;z-index:2}

/* Bande « prochaine représentation » : s'appuie sur .bandeau-scene + ombre du visuel */
.prochain{padding:clamp(3.5rem,7vw,5.5rem) 0}
.prochain .hero-visual{aspect-ratio:3/4;max-width:420px;margin-left:auto;box-shadow:0 30px 70px -20px rgba(212,83,126,.45)}
/* La vidéo (paysage) reprend toute la largeur pour l'effet bandeau */
.prochain .hero-visual.hero-visual-video{max-width:none;margin-left:0}
/* Vidéo teaser : format paysage (16/9) au lieu du portrait des affiches */
.prochain .hero-visual.hero-visual-video{aspect-ratio:16/9}
.hero-visual.hero-visual-video video{object-fit:contain;background:#000}
.prochain .hero-tag{background:rgba(212,83,126,.12)}
/* Date + lieu : en rose, resserrés entre eux, un peu détachés du titre */
.prochain .hero-meta{color:var(--rose);gap:.5rem 1.2rem;margin-top:1.1rem}
.prochain .hero-meta .ti{color:var(--rose)}
/* Hero : plusieurs dates du même spectacle, en petites pastilles */
.hero-dates{align-items:flex-start!important}
.hero-dates-liste{display:inline-flex;flex-wrap:wrap;gap:.4rem}
.hero-date-item{display:inline-flex;align-items:center;padding:.25rem .7rem;border-radius:100px;
  background:rgba(212,83,126,.14);border:1px solid rgba(212,83,126,.35);color:var(--creme);
  font-size:.82rem;letter-spacing:.02em;white-space:nowrap}

/* ---- Section « prochaine représentation » : plus vivante ---- */
/* Halo lumineux qui respire derrière le visuel */
.prochain .hero-visual{position:relative;isolation:isolate;transition:transform .4s ease,box-shadow .4s ease}
.prochain .hero-visual::after{
  content:"";position:absolute;inset:-30px;z-index:-1;border-radius:30px;
  background:radial-gradient(circle at 50% 40%,rgba(212,83,126,.35),transparent 70%);
  animation:prochainHalo 5s ease-in-out infinite;
}
@keyframes prochainHalo{0%,100%{opacity:.5;transform:scale(.98)}50%{opacity:1;transform:scale(1.04)}}
.prochain .hero-visual:hover{transform:translateY(-6px);box-shadow:0 40px 90px -20px rgba(212,83,126,.6)}

/* Le point du badge pulse (rappel « en direct ») */
.prochain .hero-tag .dot{position:relative}
.prochain .hero-tag .dot::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:var(--rose);opacity:.5;animation:prochainPing 1.8s ease-out infinite;
}
@keyframes prochainPing{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.4);opacity:0}}

/* Badge « Teaser » sur la vidéo */
/* Bouton son du teaser */
.teaser-son{
  position:absolute;bottom:1rem;right:1rem;z-index:3;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(13,7,20,.7);color:var(--creme);font-size:1.2rem;
  backdrop-filter:blur(6px);transition:background .25s,transform .25s;
}
.teaser-son:hover{transform:scale(1.1)}
.teaser-son.actif{background:var(--grad);color:#fff}

.hero-visual-video::before{
  content:"● Teaser";
  position:absolute;top:1rem;left:1rem;z-index:2;
  padding:.4rem .9rem;border-radius:100px;
  background:rgba(13,7,20,.7);color:var(--creme);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;backdrop-filter:blur(6px);
}

/* Bandeau chiffres : espacement + chiffres sans carte, lumineux */
.chiffres-bandeau{padding:clamp(3.5rem,7vw,5.5rem) 0}
.chiffres-bandeau .stats{position:relative;z-index:2}
.chiffres-bandeau .stat{background:transparent;border:none;padding:1rem}
.chiffres-bandeau .stat:hover{transform:none}
.chiffres-bandeau .stat .num{font-size:clamp(3rem,7vw,5rem);text-shadow:0 0 30px rgba(212,83,126,.4)}
.chiffres-bandeau .stat .lbl{font-size:.9rem;color:var(--creme);opacity:.7}
.chiffres-bandeau .stat::after{content:"";display:block;width:36px;height:2px;margin:.8rem auto 0;
  background:var(--grad);border-radius:2px;opacity:.6}

@media(max-width:900px){
  .prochain .hero-grid{grid-template-columns:1fr;gap:2.2rem}
  .prochain .hero-visual{max-width:100%;margin-inline:auto}
  /* Vidéo garde la pleine largeur, affiche reste raisonnable */
  .prochain .hero-visual:not(.hero-visual-video){max-width:300px}
  /* Centrage du bloc texte sur mobile */
  .prochain .hero-copy{text-align:center}
  .prochain .hero-tag{margin-inline:auto}
  .prochain .hero-meta{justify-content:center;align-items:center}
  .prochain .hero-cta{align-items:stretch}
}

/* ================= ACCENTS LUMINEUX sur sections du milieu ================= */
/* Un projecteur ponctuel qui éclaire un coin, différent à chaque section */
.section{position:relative}
#agenda::before,#galerie::before,#actus::before,#avis::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  width:45vw;height:45vw;max-width:600px;max-height:600px;border-radius:50%;
  filter:blur(90px);opacity:.5;
}
#agenda::before{top:-10%;right:-10%;background:radial-gradient(circle,rgba(212,83,126,.16),transparent 70%)}
#galerie::before{top:20%;left:-15%;background:radial-gradient(circle,rgba(106,63,196,.18),transparent 70%)}
#actus::before{bottom:-10%;right:-12%;background:radial-gradient(circle,rgba(106,63,196,.10),transparent 70%)}
#avis::before{top:0;left:-10%;background:radial-gradient(circle,rgba(212,83,126,.13),transparent 70%)}
.section .wrap{position:relative;z-index:1}

/* Séparateur lumineux fin (optionnel entre sections) */
.sep-lumiere{height:1px;border:none;margin:0;
  background:linear-gradient(90deg,transparent,rgba(212,83,126,.4),transparent)}

@media(prefers-reduced-motion:reduce){
  .projo,.hero-id::before,.particules::before,.particules::after,.hero-scroll{animation:none}
  .chiffres-bandeau .stat .num{text-shadow:none}
}

/* ================= ENVOL DE CŒURS (bouton Soutenir) ================= */
.btn-coeurs{position:relative;overflow:visible}
.coeurs{position:absolute;inset:0;pointer-events:none;overflow:visible}
.coeurs i{
  position:absolute;bottom:40%;left:50%;
  color:var(--rose);font-size:1rem;opacity:0;
}
/* Chaque cœur part d'un endroit différent, à un moment différent */
.coeurs i:nth-child(1){left:20%}
.coeurs i:nth-child(2){left:38%;font-size:.8rem}
.coeurs i:nth-child(3){left:54%;font-size:1.2rem}
.coeurs i:nth-child(4){left:70%;font-size:.9rem}
.coeurs i:nth-child(5){left:85%;font-size:.75rem}

.btn-coeurs:hover .coeurs i{animation:envol 1.1s ease-out forwards}
.btn-coeurs:hover .coeurs i:nth-child(2){animation-delay:.12s}
.btn-coeurs:hover .coeurs i:nth-child(3){animation-delay:.05s}
.btn-coeurs:hover .coeurs i:nth-child(4){animation-delay:.18s}
.btn-coeurs:hover .coeurs i:nth-child(5){animation-delay:.24s}

@keyframes envol{
  0%{opacity:0;transform:translateY(0) scale(.5) rotate(0deg)}
  20%{opacity:1;transform:translateY(-10px) scale(1) rotate(-8deg)}
  100%{opacity:0;transform:translateY(-70px) scale(.7) rotate(12deg)}
}
@media(prefers-reduced-motion:reduce){
  .btn-coeurs:hover .coeurs i{animation:none}
}

/* ===== PHOTOTHÈQUE : liste des albums ===== */
.album-saison-tete {
  display: flex; align-items: center; gap: 1.2rem;
  margin: 2.5rem 0 1.2rem;
}
.album-saison-tete:first-of-type { margin-top: 1rem; }
.album-saison-titre {
  font-family: var(--font-titre); font-size: 1.6rem;
  color: transparent; background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  white-space: nowrap;
}
.album-saison-ligne {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--rose), transparent);
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.4rem;
}
.album-case {
  display: block;
  background: var(--noir-2);
  border: 1px solid var(--ligne);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .3s, border-color .3s;
}
.album-case:hover { transform: translateY(-5px); border-color: var(--rose); }
.album-case-img {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--noir-3);
  overflow: hidden;
}
.album-case-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s;
}
.album-case:hover .album-case-img img { transform: scale(1.06); }
.album-case-nb {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(13,7,20,.78);
  color: var(--creme); font-size: .78rem;
  padding: .2rem .6rem; border-radius: 100px;
  display: inline-flex; align-items: center; gap: .3rem;
}
.album-case-titre {
  padding: .9rem 1.1rem;
  font-family: var(--font-texte); font-size: 1.05rem;
  color: var(--creme);
}

.btn-retour-albums {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--rose); font-size: .85rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.btn-retour-albums:hover { color: var(--rose); }

/* ===== PHOTOTHÈQUE : photos d'un album (mosaïque) ===== */
.photo-mosaique {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: .7rem;
}
.photo-case {
  position: relative; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--ligne);
  background: var(--noir-3); display: block; cursor: pointer;
}
.photo-case img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s;
}
.photo-case:hover img { transform: scale(1.08); }
.photo-case::after {
  content: "\ea6e"; font-family: 'tabler-icons';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.6rem;
  background: linear-gradient(to top, rgba(13,7,20,.55), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.photo-case:hover::after { opacity: 1; }
.photo-case:first-child { grid-column: span 2; grid-row: span 2; }

@media (max-width: 720px) {
  .photo-mosaique { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .photo-case:first-child { grid-column: span 2; grid-row: span 2; }
}

/* ===== Lightbox ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8,4,14,.97);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.lightbox[hidden] { display: none; }
/* Dissuasion de copie : pas de glisser, pas de sélection, pas de menu long-press */
.lb-figure img, .photo-case img {
  -webkit-user-drag: none;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Spinner de chargement de la photo (même esprit que le loader du livret) */
.lb-spinner {
  position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.22);
  border-top-color: var(--rose);
  animation: lbspin .8s linear infinite;
  z-index: 2; pointer-events: none;
}
.lb-spinner[hidden] { display: none; }
@keyframes lbspin { to { transform: rotate(360deg); } }
.lb-figure { margin: 0; max-width: 90vw; max-height: 88vh; text-align: center; }
.lb-figure img {
  max-width: 90vw; max-height: 80vh;
  border-radius: 10px; box-shadow: var(--shadow);
  object-fit: contain;
}
.lb-figure figcaption {
  color: var(--creme); font-size: .9rem; margin-top: 1rem;
  font-weight: 300;
}
.lb-fermer, .lb-prec, .lb-suiv {
  position: absolute; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; width: 48px; height: 48px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; transition: background .2s;
}
.lb-fermer:hover, .lb-prec:hover, .lb-suiv:hover { background: rgba(212,83,126,.5); }
.lb-fermer { top: 1.5rem; right: 1.5rem; }
.lb-prec { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lb-suiv { right: 1.5rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 560px) {
  .lb-prec { left: .6rem; } .lb-suiv { right: .6rem; }
  .lb-fermer { top: .8rem; right: .8rem; }
}

/* ===== CONTACT ===== */
.contact-grille {
  display: grid;
  grid-template-columns: 1fr 340px;   /* formulaire large à gauche, infos à droite */
  gap: 2.5rem;
  align-items: start;
}
/* Le formulaire passe avant les coordonnées (l'ordre HTML reste inchangé) */
.contact-grille .contact-form-zone { order: 1; }
.contact-grille .contact-infos     { order: 2; }
@media (max-width: 820px) { .contact-grille { grid-template-columns: 1fr; } }

/* Colonne infos */
.contact-infos { display: flex; flex-direction: column; gap: 1rem; }
.contact-info-item {
  display: flex; align-items: center; gap: 1rem;
  background: var(--noir-2); border: 1px solid var(--ligne);
  border-radius: 14px; padding: 1.1rem 1.3rem;
  color: var(--creme); transition: border-color .25s, transform .25s;
}
a.contact-info-item:hover { border-color: var(--rose); transform: translateX(3px); }
.contact-info-item > .ti {
  font-size: 1.5rem; color: var(--violet-clair); flex-shrink: 0;
}
.contact-info-item span { display: flex; flex-direction: column; font-size: .95rem; }
.contact-info-item strong {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gris); margin-bottom: .15rem; font-weight: 500;
}
.contact-reseaux {
  display: flex; gap: .7rem; margin-top: .3rem;
  width: 100%;
}
/* Chaque icône s'étire pour remplir la ligne */
.contact-reseaux a { flex: 1; }
.contact-reseaux a {
  /* Pastilles étirées : coins arrondis (pas un cercle, qui deviendrait ovale) */
  height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--noir-2);
  box-shadow: inset 0 0 0 1px var(--ligne);   /* bordure interne : pas de liseré au hover */
  color: var(--creme); font-size: 1.2rem;
  transition: background .25s, color .25s, box-shadow .25s;
}
.contact-reseaux a:hover { background: var(--grad); color: #fff; box-shadow: inset 0 0 0 1px transparent; }

/* Formulaire */
.contact-form-zone {
  background: var(--noir-2); border: 1px solid var(--ligne);
  border-radius: 18px; padding: 2rem;
}
.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.cf-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 520px) { .cf-ligne { grid-template-columns: 1fr; } }
.cf-champ { display: flex; flex-direction: column; gap: .4rem; }
.cf-champ label {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gris); font-weight: 500;
}
.cf-champ input, .cf-champ textarea {
  background: var(--noir-3); border: 1px solid var(--ligne);
  border-radius: 10px; padding: .8rem 1rem;
  color: var(--creme); font-family: var(--font-texte); font-size: 1rem;
  transition: border-color .2s;
}
.cf-champ input:focus, .cf-champ textarea:focus {
  outline: none; border-color: var(--rose);
}
.cf-champ textarea { resize: vertical; min-height: 120px; }

.cf-ligne-bas {
  grid-template-columns: 1fr auto;
  align-items: end;
}
@media (max-width: 520px) { .cf-ligne-bas { grid-template-columns: 1fr; } }
.cf-envoi {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--grad); color: #fff; border: none;
  border-radius: 100px; padding: .9rem 1.8rem;
  font-family: var(--font-texte); font-size: 1rem; font-weight: 500;
  cursor: pointer; transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.cf-envoi:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(212,83,126,.5); }

/* Honeypot : invisible pour les humains, présent pour les bots */
.hp-champ {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Messages */
.contact-succes, .contact-erreur {
  border-radius: 14px; padding: 1.2rem 1.4rem;
}
.contact-succes {
  text-align: center; background: rgba(99,190,123,.1);
  border: 1px solid rgba(99,190,123,.35); color: var(--creme);
  padding: 2.5rem 1.4rem;
}
.contact-succes .ti { font-size: 2.6rem; color: #8fe3a0; }
.contact-succes h3 { margin: .6rem 0 .3rem; font-size: 1.5rem; }
.contact-succes p { color: var(--gris); font-weight: 300; }
.contact-erreur {
  display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem;
  background: rgba(212,83,126,.12); border: 1px solid rgba(212,83,126,.4);
  color: var(--creme); font-size: .95rem;
}
.contact-erreur .ti { color: var(--rose); font-size: 1.3rem; flex-shrink: 0; }

/* ===== REVUE DE PRESSE ===== */
.presse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.6rem;
}
.presse-carte {
  display: flex; flex-direction: column;
  background: var(--noir-2); border: 1px solid var(--ligne);
  border-radius: 16px; overflow: hidden;
  transition: transform .3s, border-color .3s;
}
.presse-carte:hover { transform: translateY(-5px); border-color: var(--rose); }

.presse-visuel { aspect-ratio: 16/10; overflow: hidden; background: var(--noir-3); }
.presse-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.presse-carte:hover .presse-visuel img { transform: scale(1.05); }
.presse-pdf {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  color: var(--gris); background: linear-gradient(150deg, var(--noir-3), var(--noir-2));
  transition: color .25s;
}
.presse-pdf:hover { color: var(--rose); }
.presse-pdf .ti { font-size: 2.4rem; color: var(--rose); }
.presse-pdf span { font-size: .85rem; }

.presse-corps { padding: 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.presse-media {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--violet-clair); text-transform: uppercase; letter-spacing: .04em;
}
.presse-media .ti { font-size: 1.1rem; }
/* Logo du média : occupe la place de l'icône, sans la déformer */
.presse-media-logo {
  height: 22px; width: auto; max-width: 90px;
  object-fit: contain; flex-shrink: 0;
}
.presse-media > span:first-of-type { font-weight: 500; color: var(--creme); }
.presse-type {
  margin-left: auto; font-size: .7rem; color: var(--gris);
  background: rgba(212,83,126,.14); padding: .15rem .55rem; border-radius: 100px;
  letter-spacing: .02em;
}
.presse-titre { font-size: 1.25rem; line-height: 1.25; margin: 0; }
.presse-meta { font-size: .82rem; color: var(--gris); font-weight: 300; }
.presse-extrait {
  margin: .3rem 0 0; padding-left: .9rem;
  border-left: 3px solid var(--rose);
  color: var(--gris); font-style: italic; font-size: .92rem; font-weight: 300; line-height: 1.55;
}
.presse-lien {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: auto; padding-top: .9rem;
  color: var(--rose); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
  transition: color .25s;
}
.presse-lien:hover { color: var(--rose); }
.presse-lien .ti { transition: transform .25s; }
.presse-lien:hover .ti { transform: translate(2px, -2px); }

/* =====================================================================
   LE LIVRE (flipbook)
   ===================================================================== */
.livre-hero{padding:9rem 0 1.5rem;position:relative;z-index:5}
body:has(.bandeau-alerte) .livre-hero{padding-top:calc(9rem + var(--h-bandeau,44px))}
.livre-retour{display:inline-flex;align-items:center;gap:.5rem;color:var(--gris);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;transition:color .2s;position:relative;z-index:10}
.livre-retour:hover{color:var(--rose)}

.livre-zone { padding: 1rem 0 4rem; }
.livre-cadre {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  max-width: 1200px; margin: 0 auto; padding: 0 1rem;
}
.livre-cadre:fullscreen {
  background: var(--noir); width: 100%; height: 100%;
}
.flipbook { flex-shrink: 0; margin-inline: auto; }
/* Le flipbook (mode canvas de loadFromImages) : StPageFlip pose lui-même la
   largeur (width:100% plafonné à maxWidth×2). On borne juste la HAUTEUR pour
   que le canvas ne déborde pas (sinon grand rectangle blanc au-dessus/dessous).
   La largeur vient du cadre (1200px) ; sur mobile StPageFlip passe seul en 1 page. */
.flipbook {
  height: min(calc(100vh - 210px), 733px);
  max-height: calc(100vh - 210px);
}
@media (max-height: 700px) {
  .flipbook { height: min(calc(100vh - 150px), 733px); }
}
/* Le cadre donne la largeur de référence (2 pages) ; StPageFlip s'y adapte */
.livret-page .livre-cadre { width: 1200px; max-width: 96vw; }
/* Masque les pages parasites de StPageFlip pendant l'init (triangle fantôme) */
.livret-cadre-fade .flipbook { position: relative; }
.livret-cadre-fade:not(.livret-cadre-visible) { visibility: hidden; }

/* La largeur du flipbook est fixée par le JS (une source de vérité).
   On garde juste un garde-fou pour ne jamais déborder de l'écran. */
.flipbook { max-width: 96vw; }
.flipbook img { max-width: 100%; }

.livre-nav {
  flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--noir-2); border: 1px solid var(--ligne);
  color: var(--creme); font-size: 1.4rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.livre-nav:hover { background: var(--grad); border-color: transparent; }

.livre-barre {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.5rem; color: var(--gris); font-size: .9rem;
  max-width: 520px; margin-inline: auto; width: 100%; padding: 0 1rem;
}
.livre-barre-nav, .livre-barre-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.livre-barre #livre-page-info { flex: 1; text-align: center; }
/* Indicateur « Page [saisie] / N » compact et centré (numéro éditable) */
.livre-barre .livre-pageloc{ flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem; white-space:nowrap; color:var(--gris); font-size:.9rem; }
.livre-pageloc input{
  width:54px; padding:.3rem .35rem; text-align:center;
  background:var(--noir-3); border:1px solid var(--ligne); border-radius:8px;
  color:var(--creme); font-size:.9rem; -moz-appearance:textfield;
}
.livre-pageloc input::-webkit-outer-spin-button,
.livre-pageloc input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.livre-pageloc input:focus{ outline:none; border-color:var(--rose); }
/* Les flèches reprennent le style des boutons de la barre */
.livre-barre .livre-nav {
  width: 40px; height: 40px; border-radius: 10px; font-size: 1.1rem;
  background: transparent; border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--creme); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s;
}
.livre-barre .livre-nav:hover { border-color: var(--rose); background: rgba(212,83,126,.15); }
.livre-plein {
  width: 40px; height: 40px; border-radius: 10px;
  background: transparent; border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--creme); cursor: pointer; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s;
}
.livre-plein:hover { border-color: var(--rose); background: rgba(212,83,126,.15); }

@media (max-width: 640px) {
  .livre-nav { width: 42px; height: 42px; font-size: 1.1rem; }
  .livre-cadre { gap: .4rem; }
}

/* ===== COMPLÉMENTS LIVRE (titre centré, saut de page, transparence) ===== */
.livre-hero-titre{text-align:center;margin-top:1.5rem}

/* Champ "aller à la page" */
.livre-goto{display:inline-flex;align-items:center;gap:.4rem}
.livre-goto label{font-size:.82rem;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
.livre-goto input{width:64px;padding:.35rem .5rem;background:var(--noir-3);border:1px solid var(--ligne);border-radius:8px;color:var(--creme);font-size:.9rem;text-align:center}
.livre-goto input:focus{outline:none;border-color:var(--rose)}
.livre-goto button{width:34px;height:34px;border-radius:8px;background:var(--noir-2);border:1px solid var(--ligne);color:var(--creme);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:border-color .2s}
.livre-goto button:hover{border-color:var(--rose)}
@media(max-width:560px){
  .livre-barre{flex-wrap:wrap;gap:.8rem}
  /* Sur mobile : « Aller à » (champ + flèche) passe seul sur une ligne, sous
     les autres boutons (nav, n° de page, loupe, plein écran). */
  .livre-barre .livre-goto{order:10;flex-basis:100%;justify-content:center}
}

/* Pages du flipbook : pas de fond blanc forcé (pour la page transparente couv/verso) */
.flipbook .stf__item,.flipbook .page{background:transparent !important}
.flipbook img{display:block;background:transparent}

/* =====================================================================
   ÉCRAN DE CHARGEMENT — Projecteur qui révèle le logo
   ===================================================================== */
.loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--noir);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease,visibility .6s ease;
}
.loader.parti{opacity:0;visibility:hidden}

.loader-scene{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}

/* Projecteurs du loader : même signature que le hero, 4 faisceaux
   qui balaient toute la hauteur et convergent sur le logo. */
.loader-projos{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.loader-projo{position:absolute;top:-30%;width:48%;height:150vh;transform-origin:top center}
.loader-projo.p1{left:4%;background:linear-gradient(to bottom,rgba(212,83,126,.30),transparent 70%);animation:balayage1 7s ease-in-out infinite}
.loader-projo.p2{left:32%;background:linear-gradient(to bottom,rgba(212,83,126,.34),transparent 70%);animation:balayage2 8.5s ease-in-out infinite}
.loader-projo.p3{right:32%;background:linear-gradient(to bottom,rgba(244,238,251,.22),transparent 70%);animation:balayage3 8s ease-in-out infinite}
.loader-projo.p4{right:4%;background:linear-gradient(to bottom,rgba(106,63,196,.30),transparent 70%);animation:balayage4 9s ease-in-out infinite}

/* Le logo : GRAND, sombre au départ, s'illumine par pulsation */
.loader-logo{
  position:relative;z-index:2;
  width:min(420px,80vw);height:auto;
  opacity:.18;
  animation:projo-eclaire 3s ease-in-out infinite;
}
@keyframes projo-eclaire{
  0%,100%{opacity:.18;filter:drop-shadow(0 0 0 transparent)}
  50%    {opacity:1;filter:drop-shadow(0 0 30px rgba(212,83,126,.5))}
}

/* Réutilise les keyframes balayage1-4 déjà définis pour le hero */
@media(prefers-reduced-motion:reduce){
  .loader-projo{animation:none}
  .loader-logo{animation:none;opacity:.95}
}

/* ===== Bouton "Ajouter au calendrier" (agenda) ===== */
.btn-cal{
  background:transparent;
  border:1px solid var(--ligne);
  color:var(--creme);
  display:inline-flex;align-items:center;gap:.5rem;
}
.btn-cal:hover{
  border-color:var(--rose);
  color:var(--rose);
}
.btn-cal .ti{font-size:1.1rem}

/* =====================================================================
   BANDEAU D'ALERTE (config) — fixe centré sur PC, défilant sur mobile
   ===================================================================== */
.bandeau-alerte{
  position:fixed;top:0;left:0;right:0;z-index:105;
  background:var(--grad);color:#ffffff;font-size:.92rem;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
  animation:bandeau-descend .5s ease;
}
.bandeau-alerte-inner{
  display:flex;align-items:center;gap:.8rem;
  max-width:1180px;margin:0 auto;
  padding:.7rem clamp(1rem,4vw,2.5rem);
}
.bandeau-alerte-ico{flex-shrink:0;font-size:1.2rem}

/* Zone de texte */
.bandeau-alerte-defile{flex:1;min-width:0;overflow:hidden}
.bandeau-alerte-piste{display:flex;justify-content:center}
.bandeau-alerte-item,
.bandeau-alerte-item *{
  color:#ffffff !important;
}
.bandeau-alerte-item{
  display:inline-flex;align-items:center;gap:.8rem;
  white-space:nowrap;font-weight:500;
}
/* Sur PC : une seule copie, centrée, pas d'animation */
.bandeau-alerte-item[aria-hidden="true"]{display:none}

.bandeau-alerte-lien{
  display:inline-flex;align-items:center;gap:.4rem;
  color:#fff;font-weight:600;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.5);transition:border-color .2s;
}
.bandeau-alerte-lien:hover{border-color:#fff}
.bandeau-alerte-lien .ti{transition:transform .2s}
.bandeau-alerte-lien:hover .ti{transform:translateX(3px)}

.bandeau-alerte-fermer{
  flex-shrink:0;background:none;border:none;color:#fff;
  cursor:pointer;font-size:1.2rem;opacity:.8;
  display:flex;align-items:center;transition:opacity .2s;
}
.bandeau-alerte-fermer:hover{opacity:1}

/* Décale la navbar sous le bandeau */
body:has(.bandeau-alerte) .nav{top:var(--h-bandeau,44px)}

@keyframes bandeau-descend{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* ── Mobile : le texte défile en boucle (façon bandeau d'info) ── */
@media(max-width:720px){
  .bandeau-alerte{font-size:.85rem}
  .bandeau-alerte-inner{gap:.5rem;padding:.55rem .8rem}
  .bandeau-alerte-piste{
    justify-content:flex-start;width:max-content;
    animation:bandeau-defile 16s linear infinite;
  }
  /* la 2e copie réapparaît pour une boucle continue */
  .bandeau-alerte-item[aria-hidden="true"]{display:inline-flex}
  .bandeau-alerte-item{padding-right:2.5rem}
  /* pause au toucher */
  .bandeau-alerte-defile:active .bandeau-alerte-piste{animation-play-state:paused}
}
@keyframes bandeau-defile{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .bandeau-alerte-piste{animation:none !important;justify-content:center}
  .bandeau-alerte-item[aria-hidden="true"]{display:none}
}

/* =====================================================================
   PARTENAIRES & SOUTIENS (pied de page)
   ===================================================================== */
.foot-partenaires{
  border-top:1px solid var(--ligne);
  margin-top:1rem;padding:2rem 0 1rem;
  text-align:center;
}
.foot-partenaires-titre{
  display:block;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--gris);margin-bottom:1.4rem;
}
.foot-partenaires-logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:2.5rem;
}
.foot-partenaires-logos a,
.foot-partenaire-statique{
  display:inline-flex;align-items:center;
}
.foot-partenaires-logos img{
  height:42px;width:auto;max-width:150px;object-fit:contain;
  opacity:.65;
  transition:opacity .3s,transform .3s;
}
/* Les liens réagissent au survol ; le logo statique reste discret */
.foot-partenaires-logos a:hover img{
  opacity:1;transform:translateY(-3px);
}
@media(max-width:640px){
  .foot-partenaires-logos{gap:1.6rem}
  .foot-partenaires-logos img{height:34px;max-width:110px}
}

/* =====================================================================
   PAGE AUDITIONS (état clôturé)
   ===================================================================== */
.auditions-etat{
  max-width:620px;margin:1rem auto 4rem;text-align:center;
  background:var(--noir-2);border:1px solid var(--ligne);
  border-radius:20px;padding:3rem 2rem;
}
.auditions-badge{
  width:80px;height:80px;margin:0 auto 1.5rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(212,83,126,.12);border:1px solid rgba(212,83,126,.35);
  color:var(--rose);font-size:2.2rem;
}
.auditions-etat h2{
  font-family:var(--font-titre);font-size:1.7rem;
  margin-bottom:1rem;line-height:1.2;
}
.auditions-etat p{
  color:var(--gris);font-weight:300;line-height:1.7;
  max-width:52ch;margin:0 auto 1rem;
}
.auditions-relance{color:var(--creme)}
.auditions-actions{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem;
}

/* =====================================================================
   PAGE ACTUALITÉS — liste (images carrées) + article
   ===================================================================== */
.actus-grille{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.8rem;
}
.actu-carte{
  background:var(--noir-2);border:1px solid var(--ligne);
  border-radius:16px;overflow:hidden;
  transition:transform .3s,border-color .3s;
}
.actu-carte:hover{transform:translateY(-6px);border-color:var(--rose)}
.actu-carte-lien{display:block;color:inherit}
.actu-carte-img{
  position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--noir-3);
}
.actu-carte-img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s}
.actu-carte:hover .actu-carte-img img{transform:scale(1.06)}
.actu-carte-img .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--violet-clair);font-size:2.4rem;background:linear-gradient(150deg,var(--noir-3),var(--noir-2))}
.actu-carte-pin{
  position:absolute;top:.7rem;left:.7rem;
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.3rem .7rem;border-radius:100px;
  background:var(--grad);color:#fff;font-size:.72rem;font-weight:600;
}
.actu-carte-body{padding:1.3rem 1.4rem}
.actu-carte-body h3{font-size:1.2rem;line-height:1.35;margin:.4rem 0 .5rem}
.actu-carte-body p{color:var(--gris);font-size:.9rem;font-weight:300;line-height:1.6;margin-bottom:.9rem}
.actu-carte-body .lien{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--rose);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;
}
.actu-carte:hover .lien .ti{transform:translateX(3px)}
.actu-carte .lien .ti{transition:transform .2s}

/* Article complet */
.article{padding-top:9rem;position:relative;z-index:5}
/* Si un bandeau d'alerte est présent, on ajoute sa hauteur au padding */
body:has(.bandeau-alerte) .article{padding-top:calc(9rem + var(--h-bandeau,44px))}
.article-wrap{max-width:760px}
.article-retour{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--gris);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;
  transition:color .2s;margin-bottom:1.5rem;
  position:relative;z-index:10;
}
.article-retour:hover{color:var(--rose)}
.article-tete h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;margin:.5rem 0}
.article-chapo{color:var(--creme);font-size:1.15rem;font-weight:300;line-height:1.6;margin-top:.8rem}
.article-image{
  margin:2rem auto;aspect-ratio:1/1;max-width:460px;
  border-radius:16px;overflow:hidden;background:var(--noir-3);
}
.article-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.article-contenu{color:var(--gris);font-weight:300;line-height:1.8;font-size:1.02rem}
/* Mise en forme du contenu HTML de l'article */
.article-contenu p{margin-bottom:1.1rem}
.article-contenu a{color:var(--rose);border-bottom:1px solid rgba(212,83,126,.4);transition:border-color .2s}
.article-contenu a:hover{border-color:var(--rose)}
.article-contenu ul,.article-contenu ol{margin:1rem 0 1.1rem 1.4rem}
.article-contenu li{margin-bottom:.4rem}
.article-contenu h2,.article-contenu h3{color:var(--creme);margin:1.5rem 0 .7rem}
.article-contenu blockquote{border-left:3px solid var(--rose);padding-left:1rem;margin:1.2rem 0;font-style:italic;color:var(--creme)}
.article-contenu strong{color:var(--creme)}
.article-cta{margin-top:2rem}
@media(max-width:640px){
  .actus-grille{grid-template-columns:1fr;gap:1.4rem}
  .article-image{max-width:100%}
}

/* =====================================================================
   MOBILE : bloc de titre centré (surtitre + titre + description)
   ===================================================================== */
@media(max-width:640px){
  .eyebrow,
  .section-title,
  .section-sub{
    display:block;
    text-align:center;
  }
  /* La description a un max-width : on la recentre dans sa colonne */
  .section-sub{margin-left:auto;margin-right:auto}
}

/* =====================================================================
   REVUE DE PRESSE — aperçu de la première page des coupures PDF
   ===================================================================== */
.presse-pdf{position:relative;display:block;overflow:hidden;background:var(--noir-3)}

/* Le canvas rendu par PDF.js */
.presse-pdf-apercu{display:block;width:100%;height:auto}

/* Repli affiché tant que l'aperçu n'est pas rendu (ou s'il échoue) */
.presse-pdf-repli{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;min-height:180px;padding:1.5rem;
  color:var(--rose);font-size:.85rem;text-align:center;
}
.presse-pdf-repli .ti{font-size:2.4rem}
.presse-pdf.a-apercu .presse-pdf-repli{display:none}

/* Invite à ouvrir le PDF, superposée sur l'aperçu */
.presse-pdf-loupe{
  position:absolute;inset:auto 0 0 0;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.7rem;
  background:linear-gradient(to top,rgba(13,7,20,.92),rgba(13,7,20,0));
  color:var(--creme);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;
  opacity:0;transition:opacity .25s;
}
.presse-pdf.a-apercu .presse-pdf-loupe{opacity:1}
.presse-pdf:hover .presse-pdf-loupe{color:var(--rose)}

/* =====================================================================
   SECTION HISTOIRE — carrousel « scène » (fondu + zoom lent façon projecteur)
   ===================================================================== */
.histoire-carrousel {
  position: relative;
  isolation: isolate;
}

/* Halo lumineux « projecteur » qui respire autour du cadre */
.histoire-carrousel::before {
  content: ""; position: absolute; inset: -2px;
  border-radius: inherit; z-index: 3; pointer-events: none;
  box-shadow:
    inset 0 0 60px -20px rgba(212,83,126,.55),
    0 0 45px -12px rgba(67,35,144,.5);
  animation: histoireHalo 7s ease-in-out infinite;
}
@keyframes histoireHalo {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* TOUTES les photos zooment ensemble, avec la même animation synchronisée.
   Du coup la photo qui apparaît est déjà au même niveau de zoom que celle qui
   part : le fondu se fait à zoom identique, sans réinitialisation visible.
   Le cadre, lui, ne bouge pas (le zoom est sur les slides, pas le conteneur). */
.histoire-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  animation: histoireZoom 16s ease-in-out infinite alternate;
  z-index: 0;
}
.histoire-slide.actif {
  opacity: 1;
  z-index: 1;
}
@keyframes histoireZoom {
  from { transform: scale(1.03); }
  to   { transform: scale(1.1); }
}

/* Voile dégradé en bas : rappel scénique + lisibilité des points */
.histoire-carrousel::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(to top, rgba(13,7,20,.55), transparent);
  z-index: 2; pointer-events: none;
}

/* Points indicateurs */
.histoire-points {
  position: absolute; left: 0; right: 0; bottom: 1rem;
  display: flex; justify-content: center; gap: .5rem; z-index: 3;
}
.histoire-point {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(244,238,251,.4);
  transition: background .3s, transform .3s;
}
.histoire-point.actif { background: var(--rose); transform: scale(1.35); }

/* Si aucune photo n'est déposée : on garde le dégradé d'origine (déjà sur .histoire-img) */
.histoire-vide { /* rien : le fond dégradé de .histoire-img s'applique */ }

/* =====================================================================
   PRESSE — vignette média cliquable + lecteur en modale
   ===================================================================== */
/* Vignette « play » (podcast/vidéo) */
.presse-media-play {
  position: relative; display: block; width: 100%;
  border: none; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--noir-3); min-height: 200px;
}
.presse-media-play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .75; }
.presse-play-fond { position: absolute; inset: 0; }
.presse-play-fond.t-video { background: linear-gradient(135deg, rgba(67,35,144,.5), rgba(212,83,126,.4)); }
.presse-play-fond.t-audio { background: linear-gradient(135deg, rgba(212,83,126,.45), rgba(67,35,144,.5)); }
.presse-play-bouton {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-size: 1.8rem;
  box-shadow: 0 8px 24px -6px rgba(212,83,126,.6);
  transition: transform .25s;
}
.presse-media-play .presse-play-bouton { transition: transform .25s, box-shadow .25s; }
.presse-media-play:hover .presse-play-bouton {
  transform: translate(-50%,-50%) scale(1.12);
  box-shadow: 0 10px 30px -6px rgba(212,83,126,.8);
}
.presse-play-label {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem; text-align: center;
  background: linear-gradient(to top, rgba(13,7,20,.92), rgba(13,7,20,0));
  color: var(--creme); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
  opacity: 0; transition: opacity .25s;
}
.presse-media-play:hover .presse-play-label { opacity: 1; color: var(--rose); }

/* Modale */
.presse-modale { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.presse-modale[hidden] { display: none; }
.presse-modale-fond { position: absolute; inset: 0; background: rgba(6,3,12,.85); backdrop-filter: blur(4px); }
.presse-modale-boite {
  position: relative; z-index: 1; width: min(900px, 92vw); max-height: 88vh; overflow: auto;
  background: var(--noir-2); border: 1px solid var(--ligne); border-radius: 18px;
  padding: 1.5rem; box-shadow: 0 30px 80px -20px #000;
}
.presse-modale-fermer {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--creme); font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.presse-modale-fermer:hover { background: var(--rose); color: #fff; }
.presse-modale-tete { margin-bottom: 1rem; padding-right: 3rem; }
.presse-modale-tete strong { display: block; font-family: var(--font-titre); font-size: 1.4rem; color: var(--creme); }
.presse-modale-tete span { color: var(--rose); font-size: .9rem; }

/* Lecteurs */
.presse-lecteur-video { width: 100%; max-height: 70vh; border-radius: 12px; background: #000; display: block; }
.presse-lecteur-audio { width: 100%; margin-top: 1rem; }
.presse-onde { width: 100%; height: 160px; display: block; border-radius: 12px; background: var(--noir-3); }

/* =====================================================================
   LIVRET DE SPECTACLE — flipbook PDF (/livret)
   ===================================================================== */
.livret-page{
  background:linear-gradient(160deg,#1a0f2e 0%,#120a20 55%,#1c0f30 100%);
  min-height:100vh;position:relative;
}
/* Le Livre (pages/livre.php) réutilise la COQUE .livret-page pour bénéficier du
   flipbook éprouvé, mais reste une page du SITE : on neutralise le fond immersif
   et le décor plein écran. Le flipbook, lui, garde toutes les règles .livret-page
   qui le rendent fiable. En plein écran (.livret-plein-actif) le fond immersif
   revient normalement pour une lecture plongée. */
.livre-zone.livre-book.livret-page{ background:none; min-height:0; }
.livre-book.livret-page .livre-cadre::before{ display:none; }   /* pas le halo rose du livret */
/* Empêche les barres de scroll parasites quand une page se soulève dans un coin.
   Placé sur html+body pour être réellement pris en compte (pas seulement le body). */
html:has(.livret-page), .livret-page{ overflow-x:hidden; }
/* Halo lumineux qui respire autour du livre (façon section « prochainement ») */
.livret-page .livre-cadre{position:relative;z-index:1}
/* Halo : posé DANS le cadre, derrière le flipbook mais au-dessus du fond.
   Le flipbook (enfant suivant) passe au-dessus grâce à son z-index. */
.livret-page .livre-cadre::before{
  content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:118%;height:112%;
  z-index:0;                /* pas -1 : reste dans le cadre, visible */
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,rgba(212,83,126,.85),transparent 60%),
    radial-gradient(ellipse 120% 85% at center,rgba(140,80,220,.7),transparent 66%);
  filter:blur(40px);
  pointer-events:none;
  animation:livretHalo 6s ease-in-out infinite;
}
/* Le flipbook et les boutons passent AU-DESSUS du halo */
.livret-page .livre-cadre > *{position:relative;z-index:1}
@keyframes livretHalo{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.95)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.08)}}
.livret-page .livre-zone{position:relative;z-index:1}

/* Décor scène du livret : fixe, couvre l'écran, porte projos + particules.
   Les .projos et .particules reprennent leurs styles globaux existants. */
.livret-decor{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
/* .projos et .particules sont en position:absolute inset:0 → se calent
   sur .livret-decor (qui est fixed inset:0), donc couvrent tout l'écran. */

/* Couverture en double-page : neutraliser tout fond blanc que StPageFlip
   génère pour la page vide à côté de la couverture. Plusieurs sélecteurs
   pour couvrir les variantes internes de la librairie (v2). */
/* Tout fond/ombre des éléments internes du flipbook devient transparent :
   la page blanche à côté de la couverture disparaît dans le décor sombre. */
.livret-page .flipbook,
.livret-page .flipbook *{background:transparent !important}
.livret-page .flipbook .stf__item,
.livret-page .flipbook .stf__block{box-shadow:none !important}
/* Seules les VRAIES pages (images) portent une ombre */
.livret-page .flipbook img{box-shadow:0 0 30px -8px rgba(0,0,0,.45);display:block}

/* Livre anniversaire (livre.php) : mêmes réglages que le livret — faces vides
   transparentes (pas de page blanche à côté de la couverture / du dos), ombre
   uniquement sur les vraies pages. */
/* === CORRECTIF CLÉ : page qui tourne « noire, en dessous du livre » ==========
   Cause : une ancienne règle (époque canvas) forçait background:transparent sur
   TOUS les éléments du flipbook. En mode HTML, la face de la page en cours de
   tournage n'a alors AUCUN fond → sur le site sombre elle apparaît NOIRE et
   ressort sous le livre pendant l'effet. Le livret, lui, donne un fond BLANC à
   chaque page (.page-livret) — c'est pour ça qu'il n'a jamais eu ce souci.
   On reproduit donc exactement le livret : page = fond blanc, et on NE force
   plus la transparence sur tout le flipbook. */
.livre-anniv .flipbook,
.livre-anniv .flipbook *{ transition:none !important; animation:none !important; }
.livre-anniv .flipbook .stf__item,
.livre-anniv .flipbook .stf__block{box-shadow:none !important}
.livre-anniv .flipbook img{box-shadow:0 0 30px -8px rgba(0,0,0,.45);display:block}
/* Pages en mode HTML : image plein cadre sur fond BLANC (comme .page-livret).
   En mode HTML, StPageFlip ne dessine PAS de page à côté de la couverture / du
   dos (showCover) : pas de page blanche parasite malgré ce fond blanc. */
.livre-anniv .page-livre{position:relative;width:100%;height:100%;overflow:hidden;background:#fff}
.livre-anniv .page-livre-img{display:block;width:100%;height:100%;object-fit:fill}
/* Sur mobile : le bouton plein écran ne sert à rien (la loupe le remplace) */
@media(max-width:640px){ .livre-anniv #livre-plein{display:none} }

/* --- Mode HTML : structure IDENTIQUE au livret (mise en page éprouvée) ---
   Le cadre donne la largeur de référence (2 pages), flèches dans le flux flex.
   Le débordement du tournage (page qui se soulève dans un coin → 2e scrollbar
   + rendu « page en dessous ») est borné par un WRAPPER .livre-scene en
   overflow:clip, exactement comme .livret-scene — surtout PAS sur le cadre,
   dont StPageFlip mesure la largeur. */
.livre-anniv .livre-scene{
  position:relative;
  width:100%;
  display:flex;align-items:center;justify-content:center;
  min-height:0;
  overflow:clip;
  /* Clip au RAS du livre (marge 0) : masque le coin de la page qui déborde SOUS
     le livre pendant le tournage — ce débordement est inhérent à l'effet de
     page souple de StPageFlip (le livret applique le même clip). Horizontalement
     la scène est bien plus large que le livre, donc l'ombre latérale n'est
     jamais coupée : cette marge n'agit en pratique que sur le débordement
     vertical. Le coin qui se soulève en HAUT reste intact. */
  overflow-clip-margin:0px;
  padding:2px;
}
.livre-anniv .livre-cadre{ width:1200px; max-width:96vw; gap:1.6rem; }
/* Écarter un peu les boutons du livre pour qu'ils ne mordent pas sur un bord */
.livret-page .livre-cadre{gap:1.6rem}

.livret-tete{max-width:1100px;margin:0 auto 1.5rem;padding:0 1.5rem;text-align:center}
.livret-titre{
  font-family:var(--font-titre);text-transform:uppercase;
  font-size:clamp(1.4rem,4vw,2.2rem);color:var(--creme);margin-top:.5rem;
}
/* Loader pendant le rendu du PDF */
.livret-loader{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;min-height:50vh;color:var(--gris);
}
/* Loader du livret : logo AES qui respire doucement */
.livret-loader-logo{
  width:150px;max-width:60vw;height:auto;
  filter:drop-shadow(0 0 20px rgba(212,83,126,.4));
  animation:livretLogoPulse 2s ease-in-out infinite;
}
@keyframes livretLogoPulse{
  0%,100%{opacity:.65;transform:scale(.97)}
  50%{opacity:1;transform:scale(1.03)}
}
/* Scène du livret : réserve la place AVANT le chargement (pas de saut).
   Hauteur basée sur le viewport, dans un ratio portrait (~0.7). */
.livret-scene{
  position:relative;
  width:100%;
  display:flex;align-items:center;justify-content:center;
  min-height:0;      /* le cadre donne la taille */
  /* On borne le débordement de la scène pour éviter la 2e barre de scroll
     (verticale) quand une page se soulève dans un coin. overflow:clip +
     overflow-clip-margin laisse quand même passer le halo et l'ombre (≈60px)
     sans jamais créer de conteneur scrollable ni de démarcation visible. */
  overflow:clip;
  overflow-clip-margin:60px;
  padding:12px;      /* marge autour pour l'ombre de l'animation */
}
/* C'est le CADRE (présent dès le départ) qui donne sa taille à la scène.
   Le loader est un simple overlay par-dessus, sans imposer de dimensions. */
.livret-scene .livret-loader{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  transition:opacity .5s ease;
}
.livret-loader-sort{opacity:0;pointer-events:none}
/* Le cadre est présent dès le départ mais invisible, puis apparaît en fondu */
.livret-cadre-fade{opacity:0;transition:opacity .7s ease}
.livret-cadre-visible{opacity:1}
/* La barre apparaît en fondu aussi */
.livret-apparait{animation:livretFondu .7s ease both}
@keyframes livretFondu{ from{opacity:0} to{opacity:1} }

/* Boutons sous le livret */
.livret-actions{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  margin:2rem auto 3rem;padding:0 1rem;max-width:700px;
}
@media(max-width:600px){
  /* Une seule ligne : accueil réduit à l'icône, soutenir en entier */
  .livret-actions{flex-wrap:nowrap;align-items:center;gap:.6rem}
  .livret-actions .btn-accueil{
    flex:0 0 auto;width:52px;height:52px;padding:0;border-radius:50%;
    justify-content:center;align-items:center;aspect-ratio:1;
  }
  .livret-actions .btn-accueil .btn-txt-accueil{display:none}
  .livret-actions .btn-accueil i{margin:0}
  .livret-actions .btn-coeurs{flex:0 1 auto;white-space:nowrap}
}

/* ===== Vue zoom plein écran d'une page du livret ===== */
.livret-zoomvue{
  position:fixed;inset:0;z-index:1200;
  background:rgba(8,4,14,.96);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;
}
.livret-zoomvue[hidden]{display:none}
.livret-zoomvue-scene{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.livret-zoomvue-page{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  transform-origin:center center;will-change:transform;
  border-radius:8px;overflow:hidden;
  box-shadow:0 0 40px -10px rgba(0,0,0,.6);
}
.zv-feuille{position:relative;line-height:0}
.livret-zoomvue-img{
  display:block;width:auto;height:auto;max-width:96vw;max-height:92vh;
  -webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;
}
/* Double page (PC) : chaque feuille prend la moitié de la largeur écran */
.livret-zoomvue-page.zv-double .livret-zoomvue-img{max-width:48vw}
.livret-zoomvue-fermer{
  position:absolute;top:14px;right:14px;z-index:2;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:1.3rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.livret-zoomvue-fermer:hover{background:rgba(212,83,126,.4)}
.livret-zoomvue-aide{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.7);font-size:.82rem;text-align:center;
  padding:0 1rem;pointer-events:none;
}
@media(max-width:600px){ .livret-zoomvue-aide{font-size:.75rem} }

/* ===== Zones cliquables sur le livret ===== */
.page-livret{position:relative;width:100%;height:100%;background:#fff;overflow:hidden}
/* L'image remplit toute la page (le ratio StPageFlip suit celui du PDF) */
.page-livret-img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.page-zone{
  position:absolute;display:block;z-index:2;
  border-radius:6px;cursor:pointer;
  /* Effet permanent discret : léger fond + contour rose qui pulse doucement */
  background:rgba(212,83,126,.10);
  box-shadow:0 0 0 1.5px rgba(212,83,126,.55) inset, 0 0 12px -2px rgba(212,83,126,.4);
  transition:background .2s, box-shadow .2s, transform .2s;
  animation:zonePulse 2.4s ease-in-out infinite;
}
.page-zone:hover{
  background:rgba(212,83,126,.24);
  box-shadow:0 0 0 2px rgba(212,83,126,.9) inset, 0 0 18px -2px rgba(212,83,126,.7);
  transform:scale(1.02);
  animation:none;   /* on fige la pulsation au survol */
}
@keyframes zonePulse{
  0%,100%{box-shadow:0 0 0 1.5px rgba(212,83,126,.4) inset, 0 0 8px -2px rgba(212,83,126,.25)}
  50%{box-shadow:0 0 0 1.5px rgba(212,83,126,.75) inset, 0 0 16px -1px rgba(212,83,126,.55)}
}
/* Respect des préférences d'accessibilité : pas d'animation si l'utilisateur le demande */
@media(prefers-reduced-motion:reduce){ .page-zone{animation:none} }
/* Zone ronde (forme = rond dans l'éditeur) — spécificité renforcée + !important
   pour l'emporter sur toute autre règle .page-zone plus spécifique. */
.page-zone.page-zone-rond{border-radius:50% !important}

/* =====================================================================
   MODE PLEIN ÉCRAN DU LIVRET (fiable sur mobile, sans API Fullscreen)
   À AJOUTER à ton style.css
   ===================================================================== */
 
/* Quand le mode est actif, le livret occupe tout l'écran du téléphone */
.livret-plein-actif .livret-scene {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(160deg,#1a0f2e 0%,#120a20 55%,#1c0f30 100%);
  margin: 0;
  padding: 8px;
  min-height: 100vh;
}
/* En plein écran, le JS pilote les dimensions du flipbook (source unique).
   On ne force RIEN ici en !important pour éviter tout conflit JS/CSS. */
/* La barre de navigation flotte en bas, par-dessus le livret */
.livret-plein-actif .livre-barre {
  position: fixed;
  bottom: 10px; left: 50%; transform: translateX(-50%);
  z-index: 10000;
  background: rgba(13,7,20,.45);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 6px 14px;
  max-width: 92vw;
}
/* On masque les boutons "Accéder au site / Soutenir" en plein écran (place au livre) */
.livret-plein-actif .livret-actions { display: none; }

/* Croix de sortie du plein écran : cachée par défaut, visible en plein écran */
.livret-plein-fermer {
  display: none;
  position: fixed; top: 14px; right: 14px; z-index: 10001;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(13,7,20,.55); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: 1.5rem; cursor: pointer;
  align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.livret-plein-actif .livret-plein-fermer { display: flex; }


/* =====================================================================
   ZOOM DU LIVRET (double-clic sur une page → lightbox zoomable)
   ===================================================================== */
.livret-zoom {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(8,4,16,.92);
  display: none; align-items: center; justify-content: center;
  overflow: auto; padding: 20px;
  cursor: zoom-out;
}
.livret-zoom.actif { display: flex; }
#livret-zoom-img {
  max-width: 96vw; max-height: 92vh;
  transform-origin: center center;
  transition: transform .15s ease;
  cursor: zoom-in;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,.7);
  border-radius: 4px;
}
.livret-zoom-ctrl {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 10001;
}
.livret-zoom-ctrl button {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); transition: background .2s;
}
.livret-zoom-ctrl button:hover { background: rgba(212,83,126,.4); }


/* ===== Zones cliquables du livret (calque sur chaque page) ===== */
.livret-zones {
  position: absolute; inset: 0;
  pointer-events: none;   /* le calque laisse passer, seules les zones captent */
  z-index: 5;
}
.livret-zones .page-zone {
  position: absolute;
  pointer-events: auto;   /* les zones, elles, sont cliquables */
  cursor: pointer;
  border-radius: 4px;
  /* invisible par défaut ; léger halo au survol pour repérer */
  transition: background .15s, box-shadow .15s;
}
.livret-zones .page-zone:hover {
  background: rgba(212,83,126,.12);
  box-shadow: 0 0 0 2px rgba(212,83,126,.4) inset;
}
.stf__item { position: relative; }   /* pour ancrer le calque de zones *//* =====================================================================
   BANDEAU D'INFOS DE LA LIGHTBOX (page galerie vitrine)
   À AJOUTER dans le style.css du SITE VITRINE
   Situe le visiteur : titre de l'album, saison, position (3 / 38)
   ===================================================================== */

.lb-infos {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  max-width: min(92vw, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  padding: .85rem 1.6rem;
  border-radius: 100px;
  background: rgba(15, 10, 22, .72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  text-align: center;
  pointer-events: none;   /* n'intercepte pas les clics de navigation */
}
.lb-infos-titre {
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .01em;
  line-height: 1.2;
}
.lb-infos-meta {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: rgba(255, 255, 255, .72);
  font-size: .9rem;
}
/* petit séparateur vertical entre le titre et les métas */
.lb-infos-meta::before {
  content: "";
  width: 1px; height: 15px;
  background: rgba(255,255,255,.25);
  margin-right: .2rem;
}
.lb-infos-meta:empty { display: none; }
.lb-compteur {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--grad, #d4537e);
  color: #fff;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .02em;
}
/* Sur petit écran : plus compact, remonté au-dessus des flèches */
@media (max-width: 600px) {
  .lb-infos { bottom: 18px; padding: .6rem 1.1rem; gap: .35rem .8rem; }
  .lb-infos-titre { font-size: 1rem; }
  .lb-infos-meta { font-size: .82rem; gap: .55rem; }
  .lb-infos-meta::before { height: 13px; }
}

/* =====================================================================
   AVIS — section publique (liste + bouton + modale + cœurs animés)
   ===================================================================== */
.avis-section{ position:relative; padding:4.5rem 0; overflow:hidden; }
.avis-section .wrap{ position:relative; z-index:1; }

/* Cœurs qui flottent en fond */
.avis-coeurs-fond{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  /* Bords en fondu : les cœurs/notes apparaissent et disparaissent en douceur
     (haut, bas, gauche, droite) au lieu d'être coupés net. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to right,  transparent, #000 8%,  #000 92%, transparent);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to right,  transparent, #000 8%,  #000 92%, transparent);
          mask-composite: intersect;
}
.avis-coeur-flottant{ position:absolute; bottom:-30px; color:var(--rose); animation:avisMonte linear infinite; will-change:transform; }
@keyframes avisMonte{ 0%{ transform:translateY(0) rotate(0); } 100%{ transform:translateY(-120vh) rotate(40deg); } }

.avis-entete{ text-align:center; margin-bottom:2.2rem; }
.avis-entete h2{ font-family:var(--font-titre); font-size:clamp(1.8rem,4vw,2.8rem); letter-spacing:.02em; }
.avis-titre-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.avis-sous{ color:var(--gris); max-width:560px; margin:.6rem auto 0; }

/* Bandeaux de retour */
.avis-flash{ display:flex; align-items:center; gap:.6rem; max-width:640px; margin:0 auto 1.6rem; padding:.8rem 1.1rem; border-radius:12px; font-size:.95rem; }
.avis-flash i{ font-size:1.2rem; flex-shrink:0; }
.avis-flash-ok{ background:rgba(75,191,135,.14); color:#8fe4b4; border:1px solid rgba(75,191,135,.3); }
.avis-flash-info{ background:rgba(224,166,60,.14); color:#f0c987; border:1px solid rgba(224,166,60,.3); }
.avis-flash-err{ background:rgba(226,75,74,.14); color:#f3b1ab; border:1px solid rgba(226,75,74,.3); }

/* Liste des avis */
.avis-liste{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.1rem; }
.avis-vide{ color:var(--gris); text-align:center; grid-column:1/-1; padding:1.5rem; }
.avis-carte{ background:var(--noir-2); border:1px solid var(--ligne); border-radius:16px; padding:1.2rem 1.3rem; transition:transform .3s, border-color .3s; }
.avis-carte:hover{ transform:translateY(-3px); border-color:rgba(212,83,126,.45); }
/* Carte façon témoignage : cœurs en haut, message, signature en bas */
.avis-carte-coeurs{ font-size:1.05rem; letter-spacing:2px; margin-bottom:.7rem; line-height:1; }
.avis-c-on{ color:var(--rose); }
.avis-c-off{ color:rgba(183,169,207,.3); }
.avis-carte-msg{ color:var(--gris); font-size:.95rem; line-height:1.6; }
.avis-carte-sign{ margin-top:.9rem; font-weight:500; color:var(--creme); font-size:.95rem; }
.avis-voirplus{ display:inline; margin-left:.3rem; background:none; border:0; color:var(--rose); font:inherit; font-size:.88rem; cursor:pointer; text-decoration:underline; padding:0; }

/* Bouton d'ouverture : réutilise le style animé du bouton « Soutenir »
   (.btn .btn-primary .btn-coeurs). Rien à styler ici, juste le centrage. */
.avis-cta-wrap{ text-align:center; margin-top:2.4rem; }
.avis-ouvrir{ cursor:pointer; }

/* Modale */
.avis-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:1rem; }
.avis-modal[hidden]{ display:none; }
.avis-modal-fond{ position:absolute; inset:0; background:rgba(6,3,14,.72); backdrop-filter:blur(4px); }
.avis-modal-boite{ position:relative; z-index:1; width:min(520px,100%); max-height:92vh; overflow:auto; background:var(--noir-2); border:1px solid var(--ligne); border-radius:20px; padding:2rem 1.8rem; box-shadow:var(--shadow); animation:avisPop .3s ease; }
@keyframes avisPop{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.avis-modal-fermer{ position:absolute; top:.9rem; right:.9rem; width:38px; height:38px; border-radius:10px; background:var(--noir-3); border:1px solid var(--ligne); color:var(--creme); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.avis-modal-fermer:hover{ border-color:var(--rose); }
.avis-form-titre{ font-family:var(--font-titre); font-size:1.5rem; margin-bottom:1.2rem; letter-spacing:.02em; }

/* Formulaire */
.avis-label{ display:block; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--gris); margin-bottom:.4rem; }
.avis-champ{ margin-top:1.1rem; }
.avis-form input[type=text], .avis-form textarea{ width:100%; padding:.7rem .85rem; background:var(--noir-3); border:1px solid var(--ligne); border-radius:10px; color:var(--creme); font-family:var(--font-texte); font-size:1rem; }
.avis-form textarea{ resize:vertical; min-height:96px; }
.avis-form input[type=text]:focus, .avis-form textarea:focus{ outline:none; border-color:var(--rose); }
.avis-compteur{ display:block; text-align:right; font-size:.8rem; color:var(--gris); margin-top:.3rem; }

/* Piège à robots : masqué mais accessible aux bots */
.avis-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Sélecteur de cœurs */
.avis-note-picker{ display:inline-flex; gap:.5rem; }
.avis-coeur-btn{ background:none; border:0; cursor:pointer; padding:.15rem; line-height:0; transition:transform .15s; }
.avis-coeur-btn:hover{ transform:scale(1.18); }
.avis-svg-coeur{ width:38px; height:38px; display:block; fill:rgba(183,169,207,.15); stroke:rgba(183,169,207,.55); stroke-width:1.4; transition:fill .15s, stroke .15s, filter .15s; }
.avis-coeur-btn.actif .avis-svg-coeur{ fill:url(#avisGrad); stroke:var(--rose); filter:drop-shadow(0 3px 8px rgba(212,83,126,.5)); }
.avis-note-manque{ animation:avisSecoue .5s; }
@keyframes avisSecoue{ 0%,100%{ transform:translateX(0); } 20%,60%{ transform:translateX(-6px); } 40%,80%{ transform:translateX(6px); } }

/* Alerte du correcteur orthographique */
.avis-ortho-alerte{ margin-top:1rem; padding:.8rem 1rem; border-radius:12px; background:rgba(224,166,60,.14); border:1px solid rgba(224,166,60,.35); color:#f0c987; font-size:.92rem; line-height:1.5; }
.avis-ortho-aide{ display:block; margin-top:.5rem; color:var(--gris); font-size:.86rem; }

.avis-envoyer{ display:flex; width:100%; align-items:center; justify-content:center; gap:.5rem; margin-top:1.4rem; padding:.9rem 1.6rem; border:0; border-radius:100px; background:var(--grad); color:#fff; font-family:var(--font-texte); font-size:1.02rem; font-weight:500; cursor:pointer; transition:transform .2s, opacity .2s; }
.avis-envoyer:hover{ transform:translateY(-2px); }
.avis-envoyer-charge{ opacity:.6; pointer-events:none; }
.avis-mention{ margin-top:.9rem; font-size:.82rem; color:var(--gris); text-align:center; }

/* Prénom + Ville côte à côte */
.avis-champ-duo{ display:flex; gap:.8rem; }
.avis-duo-col{ flex:1; display:block; }
.avis-facultatif{ text-transform:none; letter-spacing:0; opacity:.65; font-size:.9em; }

@media (max-width:600px){
  .avis-section{ padding:3.2rem 0; }
  .avis-modal-boite{ padding:1.6rem 1.2rem; }
  .avis-coeur-btn{ font-size:1.7rem; }
  .avis-champ-duo{ flex-direction:column; gap:1.1rem; }
}

/* =====================================================================
   PHOTOTHÈQUE (home) — fondu enchaîné PAR-DESSUS la mosaïque existante
   (on garde la disposition d'origine de .galerie-mosaique, on ne fait
   que superposer 2 couches d'image qui se croisent en fondu).
   ===================================================================== */
.galerie-mosaique.gal-anim a{ position:relative; overflow:hidden; background:var(--noir-2); }
.galerie-mosaique.gal-anim .gal-case-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity 1.3s ease, transform 1.1s cubic-bezier(.22,.61,.36,1), filter 1.1s ease;
  -webkit-user-drag:none; user-select:none;
}
.galerie-mosaique.gal-anim .gal-case-img.actif{ opacity:1; }
/* Survol doux : léger zoom + éclaircissement, transition lente (pas brusque) */
.galerie-mosaique.gal-anim .gal-case:hover .gal-case-img{ transform:scale(1.05); filter:brightness(1.06); }

/* Mini rond de chargement (réutilisable — même esprit que le spinner lightbox) */
.mini-spinner{
  position:absolute; inset:0; margin:auto;
  width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(255,255,255,.22); border-top-color:var(--rose);
  animation:miniSpin .8s linear infinite; z-index:1; pointer-events:none;
}
@keyframes miniSpin{ to{ transform:rotate(360deg); } }
.gal-case.gal-pret .mini-spinner{ display:none; }
/* Spinner du visuel « prochainement » (vidéo/affiche) */
.hero-visual{ position:relative; }
.hero-visual.hero-pret .mini-spinner{ display:none; }

/* Pages légales (mentions, confidentialité) : texte long et lisible */
.legal{ color:var(--gris); line-height:1.75; margin-inline:auto; }
.legal h2{ font-family:var(--font-titre); color:var(--creme); font-size:1.4rem; margin:2.2rem 0 .8rem; letter-spacing:.01em; }
.legal h3{ color:var(--creme); font-size:1.08rem; margin:1.5rem 0 .5rem; }
.legal p{ margin:.6rem 0; }
.legal ul{ margin:.6rem 0 .8rem 1.2rem; }
.legal li{ margin:.3rem 0; }
.legal a{ color:var(--rose); text-decoration:underline; }
.legal strong{ color:var(--creme); }

/* Bouton « Découvrir le livret » (agenda) */
.btn-livret{
  background:linear-gradient(120deg, rgba(106,63,196,.18), rgba(212,83,126,.18));
  border:1px solid rgba(212,83,126,.5); color:var(--creme);
}
.btn-livret:hover{ background:var(--grad); border-color:transparent; color:#fff; }