/* ==========================================================================
   1. JETONS — couleurs, typo, rythme
   ========================================================================== */
:root{
  color-scheme: light;

  /* Couleurs prélevées directement dans SITE_PRO_-_SISTERS.pdf */
  --rose:          #FF277C;   /* rose principal : liens, boutons, titres */
  --rose-vif:      #FF277C;   /* aplats en-tête, pied de page, bandeau niouze */
  --rose-fonce:    #E2005F;   /* survol */
  --rose-pale:     #FFD9E6;
  --jaune:         #FFE800;   /* titre et bouton du bandeau turquoise */

  /* Bandeaux */
  --violet:        #4D2153;   /* « Et même en roman » */
  --turquoise:     #00B5A2;   /* « En dessin nanimé » */
  --vert:          #8CC63F;
  --peche:         #FFC875;   /* carte niouzeletter */
  --creme:         #FFF8F0;
  --creme-rose:    #FFEDF4;

  /* Dégradé du héros d'accueil : ambre en haut, rose en bas */
  --heros-haut:    #FFCF87;
  --heros-milieu:  #FFB78F;
  --heros-bas:     #FF9E98;

  /* Page BD : paragraphe de présentation */
.bd__presentation{
  position:relative; z-index:2;
  max-width:760px; margin:0 auto;
  padding:clamp(22px,3vw,34px) 0 0;
  text-align:center;
}
.bd__presentation p{ margin:0 auto 1em; }
.bd__credits{
  font-family:var(--f-ui); font-weight:800;
  font-size:.74rem; letter-spacing:.03em;
  opacity:.72;
}

/* Fiches personnages : sous-titres et encarts BD / dessin animé */
.fiche__sous-titre{
  font-family:var(--f-ui); font-weight:800;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--rose); margin:22px 0 8px;
}
.fiche__encart{
  margin-top:18px; padding:16px 18px;
  border-radius:16px; background:rgba(42,27,63,.05);
}
.fiche__encart p{ margin:0; font-size:.88rem; line-height:1.55; }
.fiche__encart--bd{ background:rgba(255,39,124,.07); }
.fiche__encart--anime{ background:rgba(0,181,162,.09); }
.fiche__encart .fiche__sous-titre{ margin-top:0; }
.fiche__encart--anime .fiche__sous-titre{ color:#00806F; }

/* Fiche personnage : les deux encarts reprennent la couleur de la colonne
   de gauche, dans deux tons — un voile léger pour « Le secret de la BD »,
   un peu plus soutenu pour « Côté dessin animé ». */
.fiche__corps--perso .fiche__encart--bd{
  background:color-mix(in srgb, var(--couleur, var(--rose)) 11%, #fff);
}
.fiche__corps--perso .fiche__encart--anime{
  background:color-mix(in srgb, var(--couleur, var(--rose)) 38%, #fff);
}
.fiche__corps--perso .fiche__encart .fiche__sous-titre{
  color:color-mix(in srgb, var(--couleur, var(--rose)) 55%, var(--encre));
}
.fiche__corps--perso .fiche__citations li{
  border-left-color:var(--couleur, var(--rose));
}

/* Fiches personnages */
  --p-wendy:  #FF627E;
  --p-marine: #A02A5E;
  --p-puduk:  #FFC1F0;
  --p-maxence:#8FD3FF;
  --p-sammie: #FF0000;
  --p-loulou: #0044C3;
  --p-nath:   #00DA80;
  --p-maman:  #FFBA34;
  --p-papa:   #005D7A;
  --p-emma:   #7B4FBE;

  /* Texte */
  --encre:        #2A1B3F;   /* titres, texte courant, bouton du héros */
  --encre-doux:   #6A6178;
  --blanc:        #FFFFFF;

  /* Typographie */
  --f-titre:  'Joint FR', 'Trebuchet MS', sans-serif;      /* titres */
  --f-accent: 'Gochi Hand', 'Bradley Hand', cursive;       /* phrases manuscrites */
  --f-ui:     'URW Geometric', 'Poppins', sans-serif;      /* nav, boutons, libellés */
  --f-texte:  'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif; /* texte courant */

  /* Échelle de titres (fluide) */
  --t-xxl: clamp(2.4rem, 5.4vw, 4rem);
  --t-xl:  clamp(2rem, 4vw, 3rem);
  --t-l:   clamp(1.6rem, 2.8vw, 2.2rem);
  --t-m:   clamp(1.2rem, 2vw, 1.5rem);

  /* Formes */
  --r-carte: 40px;
  --r-bloc:  28px;
  --r-btn:   999px;
  --ombre:   0 18px 40px rgba(75, 34, 96, .12);

  /* Gabarit */
  --largeur: 1180px;
  --gouttiere: clamp(18px, 4vw, 40px);
}

/* ==========================================================================
   POLICES DE MARQUE (auto-hébergées dans ./fonts/)
   --------------------------------------------------------------------------
   « Joint FR » = la police Joint by PizzaDude fournie, complétée : la version
   d'origine n'avait ni ç ni Ç, ni Â Ô Ù Ï Œ ni tiret cadratin. Ces signes ont
   été fabriqués à partir des tracés existants de la police. Fichier source
   d'origine conservé à part.
   ========================================================================== */
@font-face{
  font-family:'Joint FR';
  src:url('../fonts/joint-fr-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gochi Hand';
  src:url('../fonts/gochi-hand-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'URW Geometric';
  src:url('../fonts/urw-geometric-800.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Dimbo';
  src:url('../fonts/dimbo-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ==========================================================================
   2. RÉGLAGES DE BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  /* « clip » et non « hidden » : la page reste non défilable
     horizontalement sans créer de conteneur de défilement */
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--creme);
  color:var(--encre);
  font-family:var(--f-texte);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

/* Visuels : on décourage la récupération (glisser-déposer, sélection,
   appui long sur mobile). Ce n'est pas un verrou, voir le script en bas
   de page. */
img, video, .ph, .ph > img{
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
          user-select:none;
}

a{ color:inherit; text-decoration:none; }

button{ font:inherit; cursor:pointer; }

:focus-visible{
  outline:3px solid var(--rose-fonce);
  outline-offset:3px;
  border-radius:6px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

.conteneur{
  width:100%;
  max-width:var(--largeur);
  margin-inline:auto;
  padding-inline:var(--gouttiere);
}

/* Titres --------------------------------------------------------------- */
h1,h2,h3{
  font-family:var(--f-titre);
  font-weight:400;          /* Joint n'existe qu'en une graisse */
  line-height:1.12;
  margin:0;
  letter-spacing:0;
}
h1{ font-size:var(--t-xxl); }
h2{ font-size:var(--t-xl); }
h3{ font-size:var(--t-l); }

/* La petite phrase manuscrite rose au-dessus des titres */
.accroche{
  font-family:var(--f-accent);
  font-size:clamp(1.1rem, 1.8vw, 1.45rem);
  color:var(--rose);
  display:inline-block;
  transform:rotate(-4deg);
  margin-bottom:.15em;
}
.accroche--jaune{ color:var(--jaune); }
.accroche--encre{ color:var(--encre); }
.accroche--blanc{ color:var(--blanc); }

p{ margin:0 0 1em; max-width:62ch; }
.centre{ text-align:center; max-width:none; margin:clamp(24px,3vw,34px) 0 0; }
.plomb{ font-size:1.05rem; }

/* Boutons --------------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--f-ui);
  font-weight:800;
  font-size:.95rem;
  padding:.62em 1.5em;
  border-radius:var(--r-btn);
  border:2px solid transparent;
  background:var(--rose);
  color:var(--blanc);
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
/* Survol : le bouton passe au jaune vif de la marque, avec le texte en encre
   pour rester lisible. Les boutons nuit et jaune gardent leur propre survol. */
.btn:hover,
.btn:focus-visible{ transform:translateY(-2px); background:#FFF100; color:var(--encre); }
/* Bouton du héros : bleu nuit, comme sur la maquette */
.btn--nuit{ background:var(--encre); color:var(--blanc); }
.btn--nuit:hover{ background:#1C1229; }
/* Bouton sur bandeau turquoise : pastille jaune, libellé rose */
.btn--jaune{ background:var(--jaune); color:var(--rose); }
.btn--jaune:hover{ background:#F5D800; color:var(--rose-fonce); }

/* ==========================================================================
   3. BLOCS-IMAGES EN ATTENTE
   Remplacés dès qu'un fichier du même nom existe dans ./img/
   ========================================================================== */
.ph{
  margin:0;
  position:relative;
  border-radius:var(--r-bloc);
  background-color:#EFE4EA;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(164,25,110,.07) 0 12px,
      rgba(164,25,110,0) 12px 24px);
  background-size:contain;          /* découpes de personnages : rien n'est rogné */
  background-repeat:no-repeat;
  background-position:center;
}
/* Photos et décors en plein cadre */
.ph--plein{ background-size:cover; }
.ph::after{
  content:attr(data-img);
  position:absolute; inset:auto 8px 8px 8px;
  font-family:var(--f-texte);
  font-size:.7rem; font-weight:700;
  color:rgba(74,34,66,.5);
  text-align:center;
  word-break:break-all;
}
.ph.est-chargee{ background-image:none; background-color:transparent; }
.ph.est-chargee::after{ display:none; }

/* ==========================================================================
   4. EN-TÊTE
   ========================================================================== */
.entete{
  position:absolute; inset:0 0 auto 0;
  z-index:50;
  padding-block:0 16px;
  transition:background-color .2s ease, box-shadow .2s ease;
}
.entete::before{
  content:''; position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 100%);
}
.entete.est-collee::before{ display:none; }
/* Sur un héros sombre (page Film), le voile blanc et le rose foncé ne tiennent pas */
.entete--sombre::before{ display:none; }
/* Jeu video : menu en blanc sur l'illustration, tant que l'en-tete n'est pas collee */
.entete--sombre:not(.est-collee) .nav__lien{ color:var(--blanc); }
.entete--sombre:not(.est-collee) .burger span{ background:var(--blanc); }
.entete--sombre:not(.est-collee) .nav__lien:hover,
.entete--sombre:not(.est-collee) .nav__lien[aria-current="page"]{ border-bottom-color:var(--blanc); }
.entete.est-collee{
  --barre-fond:#002930;             /* couleur de la bande collee, par defaut */
  position:fixed;
  background:var(--barre-fond);
  box-shadow:0 4px 18px rgba(0,41,48,.22);
  padding-block:4px 10px;
}
/* Le texte de la bande suit la couleur de fond : blanc sur les teintes
   soutenues, encre sur le jaune et l'orange. */
.entete.est-collee .nav__lien{ color:var(--barre-texte, #FFFFFF); opacity:.82; }
.entete.est-collee .nav__lien:hover,
.entete.est-collee .nav__lien[aria-current="page"]{ opacity:1; border-bottom-color:currentColor; }
.entete.est-collee .burger{ background:var(--barre-texte, #FFFFFF); color:var(--barre-fond); }

/* Une couleur de bande par page, dans la palette de la marque.
   La pastille et son contour suivent automatiquement (var(--barre-fond)). */
body[data-vue="accueil"]           .entete.est-collee{ --barre-fond:#AC278F; --barre-texte:#FFFFFF; }
body[data-vue="bd"]                .entete.est-collee{ --barre-fond:#E73791; --barre-texte:#FFFFFF; }
body[data-vue="anime"]             .entete.est-collee{ --barre-fond:#0093F9; --barre-texte:#002930; }
body[data-vue="mag"]               .entete.est-collee{ --barre-fond:#FFF100; --barre-texte:#2A1B3F; }
body[data-vue="podcast"]           .entete.est-collee{ --barre-fond:#002930; --barre-texte:#FFFFFF; }
body[data-vue="jeu-video"]         .entete.est-collee{ --barre-fond:#0093F9; --barre-texte:#002930; }
body[data-vue="persos"]            .entete.est-collee{ --barre-fond:#E73791; --barre-texte:#FFFFFF; }
body[data-vue="jeux"]              .entete.est-collee{ --barre-fond:#FF7C45; --barre-texte:#2A1B3F; }
body[data-vue="jeux-telecharger"]  .entete.est-collee{ --barre-fond:#002930; --barre-texte:#FFFFFF; }
body[data-vue="auteurs"]           .entete.est-collee{ --barre-fond:#FF7C45; --barre-texte:#2A1B3F; }
body[data-vue="boutique"]          .entete.est-collee{ --barre-fond:#FFF100; --barre-texte:#2A1B3F; }
body[data-vue="expressions"]       .entete.est-collee{ --barre-fond:#0093F9; --barre-texte:#002930; }
body[data-vue="zactualites"]       .entete.est-collee{ --barre-fond:#E73791; --barre-texte:#FFFFFF; }
body[data-vue="musique"]           .entete.est-collee{ --barre-fond:#0093F9; --barre-texte:#002930; }
body[data-vue="niouzeletter"]      .entete.est-collee{ --barre-fond:#E73791; --barre-texte:#FFFFFF; }
body[data-vue="fans"]              .entete.est-collee{ --barre-fond:#FF7C45; --barre-texte:#2A1B3F; }
body[data-vue="ambassadeur"]       .entete.est-collee{ --barre-fond:#7B2790; --barre-texte:#FFFFFF; }

.entete__interieur{
  display:flex; align-items:center; gap:clamp(10px, 1.0vw, 15px);
  max-width:var(--largeur); margin-inline:auto;
  padding-inline:var(--gouttiere);
}

/* --- Bandeau du haut : "Écris aux Sisters !", 3e niveau de menu, cale a droite --- */
.entete__haut{
  /* hors flux : la pastille se pose dans l'angle haut droit sans repousser
     le menu vers le bas. Pas de fond propre : elle prend celui de la page,
     puis celui de la barre coloree quand l'en-tete se colle. */
  position:absolute; top:0; right:0; left:auto;
  z-index:3;
  background:transparent;
  border:0;
}
.entete__haut-interieur{
  display:flex; justify-content:flex-end; align-items:center;
  /* ferree sur le bord droit de la page, pas sur la colonne de contenu */
  max-width:none; margin-inline:0;
  padding-inline:0 clamp(8px, 1vw, 16px);
  min-height:0;
}
.lien-ecris{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-ui); font-weight:800;
  font-size:clamp(.74rem, .34vw + .6rem, .84rem);
  letter-spacing:.01em; white-space:nowrap;
  color:var(--rose);
  padding:4px 14px; margin:2px 0 0;
  background:var(--blanc);
  border-radius:999px;
  box-shadow:0 1px 0 rgba(42, 27, 63, .08);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.lien-ecris svg{ width:16px; height:16px; fill:currentColor; fill-rule:evenodd; flex:0 0 auto; }
.lien-ecris:hover,
.lien-ecris:focus-visible{ background:var(--jaune, #FFF100); color:#2A1B3F; transform:translateY(-1px); }
.lien-ecris[aria-current="page"]{ background:var(--jaune, #FFF100); color:#2A1B3F; }

/* La pastille reste visible au defilement : elle se cale tout en haut a droite
   de la barre collee, sur le meme fond que celle-ci. */
.entete.est-collee .entete__haut-interieur{ min-height:0; padding-top:0; }
.entete.est-collee .lien-ecris{
  margin:0; padding:3px 12px;
  font-size:clamp(.70rem, .28vw + .6rem, .78rem);
  box-shadow:0 0 0 1px rgba(42, 27, 63, .10);
}
.entete.est-collee .lien-ecris svg{ width:14px; height:14px; }
.entete.est-collee .lien-ecris[aria-current="page"],
.entete.est-collee .lien-ecris:hover,
.entete.est-collee .lien-ecris:focus-visible{ background:var(--jaune, #FFF100); color:#2A1B3F; }

/* « Écris aux Sisters ! » et les réseaux n'existent dans la liste que pour le
   panneau burger : sur grand écran ce sont la pastille du haut et la rangée
   de l'en-tête qui jouent ce rôle. */
.nav__item--mobile{ display:none; }
@media (max-width: 1080px){
  /* mobile : plus de pastille sur la page ni de réseaux dans la barre, tout
     passe dans le panneau burger */
  .entete__haut{ display:none; }
  .entete .reseaux--entete{ display:none; }
  .nav__item--mobile{ display:block; }

  /* les réseaux, juste au-dessus du lien « Écris aux Sisters ! » */
  .nav__item--reseaux{ margin-top:8px; padding-top:12px; border-top:1px solid rgba(42, 27, 63, .10); }
  .reseaux--burger{ display:flex; justify-content:center; gap:6px; margin:0 0 10px; }
  .reseaux--burger a{ display:grid; place-items:center; width:38px; height:38px; color:var(--rose); }
  .reseaux--burger svg{ width:21px; height:21px; fill:currentColor; }

  /* le lien fans se détache du reste du menu : petit fond jaune */
  .nav__item--ecris{ margin-top:2px; }
  .entete .nav .nav__item--ecris .nav__lien{
    display:block; text-align:center;
    background:#FFF100; color:#2A1B3F;
    border-radius:999px;
    padding:11px 16px;
    border-bottom:0;
  }
  .entete .nav .nav__item--ecris .nav__lien:hover,
  .entete .nav .nav__item--ecris .nav__lien[aria-current="page"]{
    background:var(--rose); color:var(--blanc); border-bottom-color:transparent;
  }
}
.logo{ flex:0 1 auto; width:clamp(148px, 12.4vw, 176px); min-width:0; }
.logo .ph{ aspect-ratio:900/400; border-radius:0; width:100%; }

.nav{ margin-left:auto; }

/* Réseaux sociaux dans l'en-tête, à droite du menu */
/* les réseaux sont poussés tout à droite de la barre */
.reseaux--entete{ display:flex; align-items:center; gap:0; flex:0 0 auto; margin-left:auto; padding-left:clamp(8px, .9vw, 12px); }
.reseaux--entete a{ width:25px; height:25px; }
.nav{ margin-left:auto; margin-right:0; }
.reseaux--entete a{
  display:grid; place-items:center; width:32px; height:32px;
  border-radius:50%; color:var(--rose);
  transition:background-color .15s ease, color .15s ease, transform .15s ease;
}
.reseaux--entete a svg{ width:16px; height:16px; fill:currentColor; }
.reseaux--entete a:hover{ background:#FFF100; color:var(--encre); transform:translateY(-2px); }
.reseaux__contact svg{ fill:currentColor; }
.entete.est-collee .reseaux--entete a{ color:var(--barre-texte, #FFFFFF); }
.entete--sombre:not(.est-collee) .reseaux--entete a{ color:var(--blanc); }
@media (max-width: 1080px){
  /* le burger reprend sa place tout à droite, les réseaux passent avant */
  .reseaux--entete{ order:-1; margin-left:auto; margin-right:8px; gap:4px; }
  .reseaux--entete a{ width:30px; height:30px; }
  .burger{ margin-left:0; }
}
.nav__liste{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; flex-wrap:nowrap; gap:clamp(9px, 1.0vw, 13px);
}
.nav{ min-width:0; }
.nav__lien{
  font-family:var(--f-ui);
  font-weight:800;
  font-size:clamp(.78rem, .40vw + .46rem, .84rem);
  white-space:nowrap;
  color:var(--rose);
  padding:6px 2px;
  border-bottom:2px solid transparent;
}
.nav__lien:hover,
.nav__lien[aria-current="page"]{ border-bottom-color:var(--rose); }
/* Une rubrique à sous-menu n'est pas une destination : pas de main au survol */
.nav__item--deroulant > .nav__lien,
.pied__item--deroulant > .pied__titre{ cursor:default; }

/* Sous-menu « Nos univers » */
.nav__item{ position:relative; }
.sous-nav{
  position:absolute; top:100%; left:0;
  list-style:none; margin:6px 0 0; padding:12px 18px;
  background:var(--rose-vif);
  border-radius:0 0 14px 14px;
  min-width:190px;
  display:none;
}
.nav__item:hover .sous-nav,
.nav__item:focus-within .sous-nav,
.sous-nav.est-ouverte{ display:block; }
/* Apres un clic sur une entree, le sous-menu se referme jusqu'a ce que
   le pointeur quitte la rubrique : il ne reste plus ouvert pendant le scroll. */
@media (min-width: 1081px){
  .nav__item.est-referme .sous-nav{ display:none !important; }
}
.sous-nav a{
  display:block;
  font-size:.82rem; font-weight:600;
  color:var(--blanc);
  padding:3px 0;
}
.sous-nav a::before{ content:'> '; opacity:.8; }
.sous-nav a:hover{ text-decoration:underline; }
.sous-nav a[aria-current="page"]{ color:var(--jaune); }

/* Bouton menu mobile */
.burger{
  display:none;
  margin-left:auto;
  background:var(--rose);
  color:var(--blanc);
  border:0; border-radius:12px;
  width:44px; height:44px;
  font-size:1.2rem; line-height:1;
}

@media (max-width: 1080px){
  .burger{ display:block; }
  .nav{
    display:none;
    position:absolute; top:100%; right:var(--gouttiere); left:var(--gouttiere);
    background:var(--blanc);
    border-radius:18px;
    padding:16px 20px;
    box-shadow:var(--ombre);
  }
  .nav.est-ouverte{ display:block; position:absolute; z-index:6; }
  .nav__liste{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav__lien{ display:block; padding:11px 2px; }

  /* Le panneau deroulant est blanc : ses liens gardent le rose, quel que soit
     l'etat de la bande (collee, en-tete claire sur le jeu video, etc.). */
  .entete .nav .nav__lien{ color:var(--rose); opacity:1; }
  .entete .nav .nav__lien:hover,
  .entete .nav .nav__lien[aria-current="page"]{
    color:var(--rose-fonce); border-bottom-color:transparent;
  }

  /* Menu mobile en accordeon : seules les entrees de premier niveau sont
     visibles ; le sous-menu d'une rubrique ne s'ouvre qu'a l'appui sur
     celle-ci, et une seule rubrique reste ouverte a la fois. */
  .sous-nav{
    display:none;
    position:static; background:transparent;
    padding:2px 0 8px 16px; margin:0;
    border-left:2px solid rgba(255,39,124,.25);
  }
  /* Sur mobile, seul l'accordeon commande : ni le survol ni le focus garde
     apres l'appui ne doivent maintenir un sous-menu ouvert. Sans cela, le
     second appui retirait bien la classe mais :focus-within rouvrait aussitot. */
  .nav__item:hover > .sous-nav,
  .nav__item:focus-within > .sous-nav{ display:none; }
  .nav__item.est-deployee > .sous-nav{ display:block; }
  .sous-nav a{ color:var(--rose-fonce); padding:7px 0; display:block; }
  .nav__item--deroulant > .nav__lien{ position:relative; padding-right:26px; }
  .nav__item--deroulant > .nav__lien::after{
    content:''; position:absolute; right:4px; top:50%;
    width:8px; height:8px; margin-top:-5px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); transform-origin:center;
    transition:transform .2s ease;
  }
  .nav__item--deroulant.est-deployee > .nav__lien::after{ transform:rotate(-135deg); margin-top:-2px; }
}

/* Fil d'Ariane, en haut du héros des pages intérieures */

/* ==========================================================================
   5. HÉROS
   ========================================================================== */
.heros{
  position:relative;
  padding-block:clamp(110px, 14vw, 170px) clamp(40px, 6vw, 80px);
  overflow:hidden;
}
.heros__interieur{
  position:relative; z-index:1;
  max-width:var(--largeur); margin-inline:auto;
  padding-inline:var(--gouttiere);
}

/* Héros d'accueil : illustration pleine largeur en arrière-plan, texte posé dessus */
.heros--accueil{
  display:flex; align-items:center;
  min-height:clamp(540px, 56vw, 720px);
  padding-block:clamp(120px, 13vw, 160px) clamp(40px, 6vw, 70px);
  background-color:#F4E0BE;
  text-align:left;
}
.heros__fond{
  position:absolute; inset:0; z-index:0;
  border-radius:0;
}
.heros--accueil .heros__fond{ background-position:center 62%; }
/* Dégradé ambre → rose par-dessus l'illustration, estompé vers la droite.
   Valeurs relevées sur le bord gauche de la maquette. */
.heros--accueil::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* repli pour les navigateurs sans masque CSS */
  background:linear-gradient(100deg,
    rgba(245,124,143,.96) 0%,
    rgba(246,145,133,.88) 30%,
    rgba(250,190,115,.42) 54%,
    rgba(250,190,115,0)   72%);
}
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
  .heros--accueil::after{
    background:linear-gradient(180deg,
      var(--heros-haut)   0%,
      #F8A97B            22%,
      var(--heros-milieu) 45%,
      var(--heros-bas)    66%,
      var(--heros-bas)   100%);
    -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 24%,
      rgba(0,0,0,.72) 42%, rgba(0,0,0,.30) 57%, rgba(0,0,0,0) 73%);
            mask-image:linear-gradient(90deg, #000 0%, #000 24%,
      rgba(0,0,0,.72) 42%, rgba(0,0,0,.30) 57%, rgba(0,0,0,0) 73%);
  }
}
.heros--accueil .heros__interieur{ z-index:2; width:100%; }
.heros__texte{ max-width:min(58%, 620px); }
.heros--accueil h1{ margin-bottom:.35em; }
.titre-double span{ display:block; }
.titre-double .ligne-2{ color:var(--rose); }

@media (max-width: 860px){
  /* En mobile le voile passe du haut vers le bas : texte en haut, scène dessous */
  .heros--accueil{
    align-items:flex-start;
    min-height:570px;
    text-align:center;
    padding-block:clamp(110px, 24vw, 150px) 40px;
  }
  /* en cover l'écran étroit rognait les deux personnages : on cadre la scène entière */
  .heros__fond{ background-size:140% auto; background-position:52% bottom; }
  .heros--accueil::after{
    background:linear-gradient(180deg,
      var(--heros-haut) 0%, #F8A97B 28%, var(--heros-bas) 62%, var(--heros-bas) 100%);
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 34%,
      rgba(0,0,0,.72) 52%, rgba(0,0,0,.22) 70%, rgba(0,0,0,0) 86%);
            mask-image:linear-gradient(180deg, #000 0%, #000 34%,
      rgba(0,0,0,.72) 52%, rgba(0,0,0,.22) 70%, rgba(0,0,0,0) 86%);
  }
  .heros__texte{ max-width:none; margin-inline:auto; }
  .heros--accueil p{ margin-inline:auto; }
}

/* Flèches du carrousel d'accueil */
.carrousel-fleche{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:none; border:0;
  color:var(--rose-fonce); font-size:2rem; line-height:1;
}
.carrousel-fleche--prec{ left:8px; }
.carrousel-fleche--suiv{ right:8px; }
.carrousel-fleche:hover{ color:var(--rose); }
@media (max-width: 700px){ .carrousel-fleche{ display:none; } }

/* Héros de page intérieure : visuel pleine largeur, texte posé à droite.
   Même principe que l'accueil. Couleurs relevées page par page. */
.heros--rubrique{
  display:flex; align-items:center;
  min-height:clamp(430px, 44vw, 600px);
  padding-block:clamp(118px, 13vw, 170px) clamp(38px, 5vw, 66px);
  text-align:left;
}
.heros--rubrique .heros__interieur{ width:100%; z-index:3; }
.heros--rubrique .heros__texte{
  margin-left:auto;
  max-width:min(50%, 540px);
  text-align:center;
}
.heros--rubrique .heros__texte p{ margin-inline:auto; max-width:46ch; }

/* Découpe de personnage : elle sort par le bord gauche et file sous la carte */
.heros__decoupe{
  position:absolute; left:-1.5%; bottom:-7%;
  width:min(48%, 620px); height:106%;
  background-position:left bottom; background-size:contain;
  z-index:2; pointer-events:none;
}

/* Voile de lisibilité, côté texte seulement, sur les héros photographiques */
.heros--scene::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to left,
    rgba(255,252,248,.82) 0%, rgba(255,252,248,.58) 22%,
    rgba(255,252,248,.16) 44%, rgba(255,252,248,0) 60%);
}
.heros--scene .heros__fond{ background-position:center; }

@media (max-width: 860px){
  .heros--rubrique{
    min-height:520px; text-align:center;
    padding-block:clamp(110px, 24vw, 150px) 200px;
  }
  .heros--rubrique .heros__texte{ margin-inline:auto; max-width:none; }
  .heros__decoupe{
    left:50%; transform:translateX(-50%);
    width:min(78%, 340px); height:auto; aspect-ratio:3/4; bottom:0;
  }
  .heros--scene::after{
    background:linear-gradient(180deg,
      rgba(255,252,248,.9) 0%, rgba(255,252,248,.7) 42%, rgba(255,252,248,0) 78%);
  }
}

/* ==========================================================================
   FONDS DE PAGE
   Chaque page intérieure porte un seul dégradé, qui court du haut du héros
   jusque sous le bloc niouzeletter. Il est posé sur <body> : la niouzeletter
   vit hors de <main> et doit baigner dans le même dégradé.
   ========================================================================== */
body[data-vue="bd"]       { background:linear-gradient(168deg,#D6B8D2 0%,#F7F8FB 26%,#FBEEF6 62%,#FFD8ED 100%); }
body[data-vue="anime"]    { background:linear-gradient(168deg,#319DE6 0%,#B0F9E3 24%,#AFFBC6 52%,#7DBC3E 78%,#FFFF06 100%); }
body[data-vue="mag"]      { background:linear-gradient(152deg,#FFFCC2 0%,#DEFCC2 58%,#AFFCC2 100%); }
body[data-vue="podcast"]  { background:linear-gradient(168deg,#FFE3D8 0%,#FFE3D8 30%,#C7E2E4 66%,#97E1F0 100%); }
body[data-vue="jeu-video"]{ background:linear-gradient(168deg,#00B5EB 0%,#00C2ED 16%,#18A9E1 40%,#946FB1 72%,#FF3E88 100%); }
body[data-vue="persos"]   { background:linear-gradient(160deg,#F8A7FE 0%,#F8A7FE 26%,#FB79CA 60%,#FF3E88 100%); }
body[data-vue="jeux"]     { background:linear-gradient(152deg,#FFB085 0%,#FFCE4E 55%,#FFFB01 100%); }
body[data-vue="jeux-telecharger"]{ background:linear-gradient(180deg,#EDBBCF 0%,#EDBBCF 16%,#F3CBDD 34%,#FCE6F1 58%,#EAF6FF 100%); }
body[data-vue="niouzeletter"]{ background:linear-gradient(160deg,#FFE3F1 0%,#FFD0E6 38%,#FFE9C9 74%,#FFF6D6 100%); }
body[data-vue="fans"]{ background:linear-gradient(160deg,#FFF3D6 0%,#FFE0C2 38%,#FFC9DE 74%,#F2CBFA 100%); }
body[data-vue="ambassadeur"]{ background:linear-gradient(160deg,#F3E2FF 0%,#E4D2FB 38%,#FFD4E8 74%,#FFE9C9 100%); }
body[data-vue="fans"] .heros--rubrique{ min-height:clamp(540px, 52vw, 760px); }
/* Le mur des messages vit hors de la carte blanche, sur le degrade de page. */
.fans-mur-section{ margin-top:clamp(30px, 4vw, 52px); }
.fans-mur-section .fans__titre{ margin-top:0; }
.fans-mur-section .fans-moderation{ background:rgba(255,255,255,.62); }
body[data-vue="accueil"]  { background:var(--creme); }
/* La page Niouzeletter porte deja son formulaire : le bloc de bas de page disparait */
body[data-vue="niouzeletter"] .niouze{ display:none; }

/* Les héros intérieurs ne portent plus de fond : le dégradé de page passe dessous */
.heros--rubrique{ background:transparent; }
/* Pages à texte clair */
body[data-vue="jeu-video"] .heros--rubrique,
body[data-vue="jeux"] .heros--rubrique{ color:var(--blanc); }
body[data-vue="jeu-video"] .heros--rubrique h1,
body[data-vue="jeux"] .heros--rubrique h1{ color:var(--blanc); }

/* La niouzeletter garde son fond clair sur l'accueil seulement */
.niouze{ background:transparent; }
body[data-vue="accueil"] .niouze{
  background:var(--blanc) url('../img/decor/niouze-131c0b76.webp') center / cover no-repeat;
}

/* ==========================================================================
   5 bis. SÉPARATEURS
   --------------------------------------------------------------------------
   Deux traitements, relevés sur la maquette :
   - frange « brush » : texture extraite de la maquette, servie en masque, donc
     recolorable par --sep-couleur ;
   - arête droite inclinée : clip-path, pente mesurée à ±3 % de la largeur.
   ========================================================================== */
.separateur{
  height:clamp(14px, 1.7vw, 24px);
  background:var(--sep-couleur, var(--turquoise));
  -webkit-mask:url('../img/decor/separateur-1538f5cd.png') 50% 100% / 100% 100% no-repeat;
          mask:url('../img/decor/separateur-1538f5cd.png') 50% 100% / 100% 100% no-repeat;
  margin-bottom:-1px;
  position:relative; z-index:1;
}
.separateur--turquoise{ --sep-couleur:var(--turquoise); }
/* Bas du héros : même frange retournée, avec le fondu horizontal du voile */
.separateur--heros{
  --sep-couleur:var(--heros-bas);
  margin:-1px 0 0;
  height:clamp(15px, 1.8vw, 24px);
  -webkit-mask-image:url('../img/decor/separateur-heros-82cd931b.png');
          mask-image:url('../img/decor/separateur-heros-82cd931b.png');
}

/* Pentes : + descend vers la droite, − monte vers la droite */
:root{ --pente:3.2vw; }

/* ==========================================================================
   6. SECTIONS DE CONTENU
   ========================================================================== */
.bloc{ padding-block:clamp(48px, 7vw, 90px); }
.bloc--serre{ padding-block:clamp(32px, 4.5vw, 56px); }
.bloc__entete{ text-align:center; margin-bottom:clamp(28px, 4vw, 48px); }
.bloc__entete p{ margin-inline:auto; }

.bloc--turquoise{
  background:var(--turquoise);
  color:var(--encre);                 /* texte foncé sur le turquoise, comme la maquette */
  padding-bottom:calc(clamp(48px, 7vw, 90px) + var(--pente));
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--pente)));
}
.bloc--turquoise h2{ color:var(--jaune); }
.bloc--violet{
  background:var(--violet); color:var(--blanc);
  padding-block:calc(clamp(48px, 7vw, 90px) + var(--pente));
  clip-path:polygon(0 var(--pente), 100% 0, 100% calc(100% - var(--pente)), 0 100%);
}
.bloc--violet h2{ color:var(--blanc); }
.bloc--violet h2 em{ font-style:normal; color:var(--rose); }
.bloc--creme{ background:var(--creme); }
.bloc--blanc{ background:var(--blanc); }
.bloc--rose-pale{ background:var(--creme-rose); }

/* Section à deux colonnes (texte / visuel) */
.duo{
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:clamp(24px, 5vw, 64px);
}
.duo--inverse .duo__visuel{ order:-1; }
.duo__visuel{ aspect-ratio:4/3; }
@media (max-width: 860px){
  .duo{ grid-template-columns:1fr; }
  .duo--inverse .duo__visuel{ order:0; }
}

/* Carte blanche qui remonte sur le héros */
.carte-contenu{
  position:relative; z-index:2;
  background:var(--blanc);
  border-radius:var(--r-carte);
  padding:clamp(24px, 4vw, 48px);
  margin-top:clamp(-90px, -7vw, -40px);
  box-shadow:var(--ombre);
}

/* Grilles ---------------------------------------------------------------- */
.grille{ display:grid; gap:clamp(12px, 2vw, 24px); }
.grille--couvertures{ grid-template-columns:repeat(5, 1fr); }
.grille--romans{ grid-template-columns:repeat(3, 1fr); max-width:560px; align-items:end; }
.grille--romans .couverture .ph{ aspect-ratio:468/700; background-size:contain; box-shadow:none;
  filter:drop-shadow(0 12px 22px rgba(42,27,63,.3)); }
.grille--videos{ grid-template-columns:repeat(3, 1fr); }
.grille--episodes{ grid-template-columns:repeat(4, 1fr); }
.grille--mag{ grid-template-columns:repeat(4, 1fr); }
.grille--persos{ grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 3vw, 36px); }

@media (max-width: 980px){
  .grille--couvertures,
  .grille--episodes,
  .grille--mag{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 640px){
  .grille--couvertures,
  .grille--videos,
  .grille--episodes,
  .grille--mag,
  .grille--persos{ grid-template-columns:repeat(2, 1fr); }
}

/* Couvertures BD / magazines */
.couverture .ph{
  aspect-ratio:220/295;
  border-radius:8px;
  box-shadow:0 8px 20px rgba(75,34,96,.18);
  transition:transform .18s ease;
}
.couverture:hover .ph{ transform:translateY(-6px) rotate(-1deg); }
.couverture__titre{
  font-family:var(--f-ui); font-weight:800;
  font-size:.85rem; text-align:center;
  margin-top:8px; color:var(--rose-fonce);
}

/* Vignettes vidéo / podcast, avec bouton lecture */
.video{ position:relative; }
.video .ph{ aspect-ratio:16/9; border-radius:12px; background-color:#141014; }
.video--carre .ph{ aspect-ratio:1/1; }
.video__lecture{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:none; border:0; color:var(--blanc);
}
.video__lecture svg{
  width:clamp(34px, 5vw, 54px); height:auto;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));
  transition:transform .15s ease;
}
.video__lecture:hover svg{ transform:scale(1.12); }

/* Onglets de la page « à lire » */
.onglets{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(12px, 3vw, 40px);
  margin-bottom:clamp(20px, 3vw, 36px);
  border:0; padding:0;
}
.onglet{
  font-family:var(--f-ui); font-weight:800;
  font-size:1rem;
  background:none; border:0;
  color:var(--encre-doux);
  padding:6px 4px;
  border-bottom:3px solid transparent;
}
.onglet[aria-selected="true"]{ color:var(--rose-fonce); border-bottom-color:var(--rose); }

/* Personnages de part et d'autre de la section BD */
.bloc--bd, .bloc--lirecouter{ position:relative; overflow:hidden; }
.bloc--bd .conteneur, .bloc--lirecouter .conteneur{ position:relative; z-index:1; }
.flanc{ position:absolute; z-index:0; pointer-events:none; }
.flanc--gauche{ left:-2.5%; top:-3%;  width:min(17%, 215px); aspect-ratio:520/986; }
.flanc--droite{ right:-1.5%; top:5%; width:min(16.5%, 210px); aspect-ratio:360/540; }
@media (max-width: 1080px){ .flanc{ display:none; } }

/* Couvertures en éventail : la centrale plus grande, comme sur la maquette */
/* Accueil : les 5 derniers tomes, du plus récent au plus ancien.
   Sur ordinateur, le dernier tome passe au centre de l'éventail (data-place). */
.grille--fanion{ align-items:end; }
.grille--fanion .couverture{ position:relative; transition:transform .2s ease; }
.grille--fanion .couverture__titre{ display:none; }
@media (min-width: 981px){
  .grille--fanion .couverture{ order:var(--place, 0); }
  .grille--fanion .couverture[data-place="1"],
  .grille--fanion .couverture[data-place="5"]{ transform:translateY(22px) scale(.84); }
  .grille--fanion .couverture[data-place="2"],
  .grille--fanion .couverture[data-place="4"]{ transform:translateY(9px)  scale(.94); }
  .grille--fanion .couverture[data-place="3"]{ transform:translateY(-16px) scale(1.15); z-index:2; }
}

/* Pastille « Nouveau » qui clignote sur le dernier tome */
.pastille-nouveau{
  position:absolute; z-index:3; top:-12px; right:-12px;
  display:grid; place-items:center;
  width:64px; height:64px; border-radius:50%;
  background:var(--jaune); color:var(--rose-fonce);
  border:3px solid #fff;
  box-shadow:0 6px 14px rgba(75,34,96,.28);
  font-family:var(--f-ui); font-weight:800;
  font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  transform:rotate(14deg);
  animation:pastille-clignote 1.1s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pastille-clignote{
  0%, 100%{ opacity:1;   transform:rotate(14deg) scale(1); }
  50%     { opacity:.35; transform:rotate(14deg) scale(1.12); }
}
@media (prefers-reduced-motion: reduce){
  .pastille-nouveau{ animation:none; }
}

/* Éléments décoratifs (fleurs, ourson) */
.deco{ position:absolute; z-index:0; pointer-events:none; }
.deco--fleurs{ left:1.5%; top:3%;  width:min(9%, 120px); aspect-ratio:340/233; }
.deco--ourson{ left:54%;  top:4%;  width:min(6%, 82px);  aspect-ratio:280/238; }
@media (max-width: 860px){ .deco{ display:none; } }

/* Section « à lirécouter » : titre rose et lecteur de BD audio */
.bloc--lirecouter h2{ color:var(--rose); }
.lirecouter__persos{ width:100%; max-width:430px; aspect-ratio:1100/720; margin-top:18px; }
.lecteur-bd{
  /* packshot detoure : ni fond blanc ni recadrage, juste une ombre portee */
  aspect-ratio:760/993;
  width:100%; max-width:430px; margin-inline:auto;
  background:none;
  filter:drop-shadow(0 14px 26px rgba(32,25,56,.26)) drop-shadow(0 3px 6px rgba(32,25,56,.14));
}

/* ==========================================================================
   SÉLECTEUR DE SAISONS (page dessin nanimé)
   ========================================================================== */
.saisons{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(10px, 1.6vw, 22px);
  position:relative; z-index:3;
  margin-bottom:clamp(-70px, -5vw, -30px);
}
.saison{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:clamp(120px, 14vw, 168px);
  padding:.5em 1.1em .6em;
  border:2px solid var(--encre); border-radius:14px;
  background:rgba(255,255,255,.55);
  color:var(--encre);
  transition:background-color .15s ease, transform .15s ease;
}
.saison strong{ font-family:var(--f-titre); font-weight:400; font-size:1.12rem; line-height:1; }
.saison span{ font-family:var(--f-ui); font-weight:800; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; opacity:.75; }
.saison:hover{ transform:translateY(-2px); background:rgba(255,255,255,.85); }
.saison.est-active{ background:var(--blanc); }
.carte-contenu--saisons{ margin-top:clamp(40px, 5vw, 70px); }
/* Dessin nanime : le selecteur de saison vit DANS la carte blanche,
   sur le meme fond que la grille d'episodes qu'il filtre. */
.carte-contenu--saisons > .saisons{
  margin:0 0 clamp(22px, 3vw, 34px);
  z-index:auto;
  padding-bottom:clamp(20px, 2.6vw, 30px);
  border-bottom:2px solid rgba(46,26,71,.10);
}
.carte-contenu--saisons > .saisons .saison{ background:rgba(46,26,71,.045); }
.carte-contenu--saisons > .saisons .saison:hover{ background:rgba(46,26,71,.09); }
.carte-contenu--saisons > .saisons .saison.est-active{ background:var(--rose); border-color:var(--rose); color:var(--blanc); }

/* ==========================================================================
   PODCAST : liste d'épisodes
   ========================================================================== */
.grille--liste{ grid-template-columns:1fr 1fr; gap:clamp(14px, 2vw, 26px) clamp(20px, 3vw, 40px); }
.episode{ display:grid; grid-template-columns:clamp(88px, 11vw, 116px) 1fr; gap:14px; align-items:start; }
.episode__vignette .ph{ border-radius:10px; }
.episode__titre{
  font-family:var(--f-ui); font-weight:800;
  font-size:.82rem; letter-spacing:.03em; text-transform:uppercase;
  margin:0 0 2px; color:inherit;
}
.episode__duree{ font-family:var(--f-ui); font-weight:800; font-size:.78rem; margin:0 0 6px; }
.episode__texte{ font-size:.78rem; line-height:1.45; margin:0; opacity:.82; max-width:34ch; }
@media (max-width: 760px){ .grille--liste{ grid-template-columns:1fr; } }

/* ==========================================================================
   PAGE JEU VIDÉO
   ========================================================================== */
/* Jeu video : illustration en plein ecran, elle occupe tout le heros.
   Plus aucun bord visible, donc plus besoin de degrade de raccord. */
.heros--jeu-video .heros__fond{
  inset:0; width:auto; height:auto; aspect-ratio:auto;
  background-position:28% 72%; background-size:cover; background-repeat:no-repeat;
}
.carte-contenu--jeu{
  display:grid; grid-template-columns:minmax(220px, 42%) 1fr;
  gap:clamp(24px, 4vw, 56px); align-items:center;
  padding-top:clamp(50px, 7vw, 96px);
}
.jeu__boites{ position:relative; display:flex; justify-content:center; align-items:flex-end; }
.jeu__boite{ width:56%; aspect-ratio:418/760; filter:drop-shadow(0 14px 26px rgba(42,27,63,.28)); }
.jeu__boite:first-child{ margin-top:clamp(-120px, -9vw, -60px); margin-right:-9%; z-index:2; }
.jeu__boite:last-child{ margin-top:clamp(-70px, -5vw, -30px); }
.jeu__texte{ text-align:center; }
.jeu__texte p{ margin-inline:auto; }
.plateformes{ display:flex; justify-content:center; align-items:center; gap:clamp(18px, 3vw, 38px); margin-top:22px; }
.plateformes .ph{ width:clamp(58px, 6.5vw, 84px); aspect-ratio:1/1.12; }
/* Bandeau d'images de jeu qui defile en continu. La piste contient deux fois
   la meme serie : quand la premiere moitie est sortie, l'animation repart a
   zero sans saut visible. */
.captures{
  margin-top:clamp(36px, 5vw, 64px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 6%, #000 94%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 6%, #000 94%, rgba(0,0,0,0) 100%);
}
.captures__piste{
  display:flex; width:max-content;
  animation:defile-captures 46s linear infinite;
}
.captures:hover .captures__piste,
.captures:focus-within .captures__piste{ animation-play-state:paused; }
.captures .ph{
  flex:0 0 auto;
  width:clamp(240px, 25vw, 400px);
  aspect-ratio:16/10; border-radius:0;
}
@keyframes defile-captures{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .captures__piste{ animation:none; }
  .captures{ overflow-x:auto; }
}
@media (max-width: 860px){
  .carte-contenu--jeu{ grid-template-columns:1fr; padding-top:clamp(90px, 22vw, 130px); }
  .captures .ph{ width:clamp(200px, 62vw, 300px); }
}

/* ==========================================================================
   PAGE NOS JEUX
   ========================================================================== */
.grille--jeux{ grid-template-columns:repeat(4, 1fr); gap:clamp(14px, 2vw, 26px); }
.jeu-vignette .ph{ aspect-ratio:4/3; border-radius:6px; background-color:#100C18; transition:transform .18s ease; }
.jeu-vignette:hover .ph{ transform:translateY(-4px); }
@media (max-width: 860px){ .grille--jeux{ grid-template-columns:repeat(2, 1fr); } }

/* Fiches personnages */
.perso{ text-align:center; }
.perso__portrait{
  aspect-ratio:1/1;
  border-radius:22px;
  background-color:var(--couleur, var(--p-wendy));
  background-position:bottom center;
  background-size:auto 92%;
}
/* la couleur de la fiche reste visible même une fois le visuel chargé */
.perso__portrait.est-chargee{ background-color:var(--couleur, var(--p-wendy)); }
.perso__nom{
  font-family:var(--f-titre); font-weight:400;
  font-size:1.15rem;
  color:var(--rose);
  margin:12px 0 6px;
}
.perso__texte{
  font-size:.82rem; line-height:1.5;
  color:var(--encre-doux);
  margin:0 auto; max-width:30ch;
}

/* Comédiennes de doublage */
.voix{ display:grid; gap:24px; max-width:520px; }
.voix__ligne{ display:grid; grid-template-columns:104px 1fr; gap:20px; align-items:center; }
.voix__photo{ aspect-ratio:1/1; border-radius:50%; border:4px solid var(--blanc); box-shadow:var(--ombre); }
.voix__role{
  font-family:var(--f-titre); font-weight:400;
  font-size:1.3rem; color:var(--rose); margin:0;
}
.voix__comedienne{
  font-family:var(--f-ui); font-weight:800;
  font-size:.85rem; letter-spacing:.14em;
  color:var(--encre-doux); margin:0;
}
.voix__texte{ font-size:.92rem; margin:6px 0 0; max-width:42ch; }
@media (max-width: 520px){
  .voix__ligne{ grid-template-columns:72px 1fr; gap:14px; }
}

/* Bandeau coulisses (dégradé turquoise → vert) */
.coulisses{
  background:linear-gradient(115deg, var(--turquoise) 0%, var(--vert) 100%);
  color:var(--blanc);
  padding-block:calc(clamp(40px, 6vw, 72px) + var(--pente));
  clip-path:polygon(0 var(--pente), 100% 0, 100% 100%, 0 calc(100% - var(--pente)));
}
.coulisses h2{ color:var(--blanc); }
.coulisses .duo__visuel{ aspect-ratio:9/12; max-width:320px; border-radius:14px; }
.coulisses__lien{
  display:block; font-size:.7rem; opacity:.75;
  margin-top:8px; word-break:break-all;
}

/* Blocs sombres du podcast */
.serie{
  border-radius:var(--r-carte);
  padding:clamp(24px, 4vw, 44px);
  margin-bottom:clamp(24px, 4vw, 44px);
  color:var(--blanc);
}
.serie--betises{ background:#5B0E35; }
.serie--wendy{   background:#3B2150; }
.serie--marine{  background:#0F3F45; }
.serie__entete{
  display:grid; grid-template-columns:minmax(180px, 260px) 1fr;
  gap:clamp(20px, 4vw, 44px); align-items:center;
  margin-bottom:clamp(20px, 3vw, 34px);
}
.serie__logo{ aspect-ratio:260/120; background-color:rgba(255,255,255,.08); }
.serie__entete p{ margin:0; font-size:.92rem; }
@media (max-width: 700px){
  .serie__entete{ grid-template-columns:1fr; }
}

/* Badges des magasins d'applications */
.badges{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:18px; }
.badges .ph{ width:135px; aspect-ratio:135/40; border-radius:8px; background-color:#141014; }

/* Emplacement du lecteur vidéo (page film) */
.lecteur{
  aspect-ratio:16/9;
  border-radius:var(--r-carte);
  background:var(--blanc);
  box-shadow:var(--ombre);
  display:grid; place-items:center;
  color:var(--encre-doux);
  font-size:.9rem;
}

/* ==========================================================================
   7. NIOUZELETTER
   ========================================================================== */
.niouze{
  position:relative;
  padding-block:clamp(52px, 7.5vw, 100px);
}
.niouze__carte{
  position:relative;
  background:var(--peche);
  border-radius:26px;
  padding:clamp(26px, 4vw, 40px);
  padding-left:clamp(26px, 16vw, 210px);
  text-align:center;
}
.niouze__perso{
  position:absolute; left:-1%; bottom:-16%;
  width:min(26%, 215px); aspect-ratio:3/4;
  background-color:transparent;
  background-position:bottom center;
}
.niouze h2{
  color:var(--rose);
  font-size:clamp(1.5rem, 3.2vw, 2.2rem);
  margin-bottom:.5em;
}
.niouze h2 em{ font-style:normal; color:var(--rose); }
.niouze__form{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center; align-items:center;
}
.niouze__champ{
  flex:1 1 260px; max-width:340px;
  font:inherit; font-size:.95rem;
  padding:.72em 1.2em;
  border:2px solid var(--blanc);
  border-radius:var(--r-btn);
  background:var(--blanc);
  color:var(--encre);
}
.niouze__champ::placeholder{ color:#B9A6B4; }
.niouze__message{
  margin:14px 0 0; font-size:.9rem; font-weight:700;
  color:var(--rose-fonce); min-height:1.4em;
}
@media (max-width: 860px){
  .niouze__carte{ padding-left:clamp(26px, 4vw, 40px); padding-bottom:140px; }
  .niouze__perso{ left:50%; transform:translateX(-50%); width:150px; }
}

/* ==========================================================================
   8. PIED DE PAGE
   ========================================================================== */
.pied{
  background:var(--rose-vif);
  padding-block:clamp(26px, 3.4vw, 44px);
  color:var(--blanc);
}
.pied__interieur{
  display:flex; align-items:flex-start; gap:clamp(20px, 3.4vw, 52px);
  flex-wrap:wrap; justify-content:flex-start;
}
.pied .logo{ width:170px; flex:0 0 auto; }

/* Pied de page : logo, menu et reseaux sur une seule ligne en grand ecran. */
/* Une seule ligne des que la place le permet ; en dessous, les reseaux
   repassent sous le menu comme avant. */
@media (min-width: 1060px){
  .pied .pied__interieur{ flex-wrap:nowrap; align-items:center; gap:clamp(14px, 1.8vw, 30px); }
  .pied .logo{ width:clamp(126px, 10vw, 150px); }
  .pied .pied__nav{ flex:0 1 auto; min-width:0; flex-wrap:nowrap; font-size:clamp(.68rem, .42vw + .44rem, .76rem); }
  .pied .pied__liste{ flex-wrap:nowrap; gap:clamp(10px, 1.45vw, 24px); }
  .pied .pied__titre{ white-space:nowrap; }
  .pied .reseaux{ flex:0 0 auto; margin-left:auto; gap:1px; }
  .pied .reseaux a{ width:24px; height:24px; }
}
/* Le pied de page reprend l'arborescence exacte du menu principal :
   une colonne par entree de premier niveau, ses sous-entrees dessous. */
.pied__nav{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(16px, 2.6vw, 42px);
  flex:1 1 auto; min-width:0;
  font-family:var(--f-ui); font-weight:800;
  font-size:.78rem; letter-spacing:.04em;
}
/* Mentions légales : ligne discrète en bas du pied, à compléter */
.pied__legal{ margin-top:clamp(18px, 2.4vw, 28px); margin-bottom:calc(-1 * clamp(26px, 3.4vw, 44px)); }
.pied__legal .conteneur{
  border-top:2px solid rgba(255,255,255,.22);
  padding-top:clamp(12px, 1.8vw, 18px); padding-bottom:clamp(12px, 1.8vw, 18px);
  text-align:center;
}
.pied__legal p{ margin:0; font-family:var(--f-ui); font-size:.72rem; }
.pied__legal a{ opacity:.8; text-decoration:underline; }
.pied__legal a:hover{ opacity:1; }
.pied__legal span{ opacity:.45; margin-inline:8px; }
.pied__legal-note{ margin-top:6px !important; opacity:.5; font-size:.68rem; font-style:italic; }

/* Bande « ambassadeur », centrée sous le pied de page */
.ambassade{
  background:var(--encre); color:var(--blanc);
  padding-block:clamp(30px, 4.4vw, 56px);
  text-align:center;
}
.ambassade__texte{
  font-family:var(--f-titre);
  font-size:clamp(1.3rem, 2.8vw, 2.1rem);
  line-height:1.2; margin:0 0 clamp(16px, 2.2vw, 24px);
}
.ambassade__bouton{
  display:inline-block;
  padding:.72em 1.9em; border-radius:var(--r-btn);
  background:#FFF100; color:var(--encre);
  font-family:var(--f-ui); font-weight:800;
  font-size:clamp(.92rem, 1.5vw, 1.08rem);
  transition:background-color .15s ease, transform .15s ease;
}
.ambassade__bouton:hover, .ambassade__bouton:focus-visible{
  background:var(--rose); color:var(--blanc); transform:translateY(-2px);
}

.pied__liste{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(16px, 2.6vw, 42px);
  list-style:none; margin:0; padding:0;
}
.pied__item{ position:relative; }
/* Le sous-menu du pied s'ouvre vers le bas, sous sa rubrique */
.sous-nav--pied{
  top:100%; bottom:auto; left:50%; transform:translateX(-50%);
  margin:8px 0 0; border-radius:14px; text-align:left;
  box-shadow:0 12px 26px rgba(42,27,63,.22);
}
.pied__item:hover > .sous-nav--pied,
.pied__item:focus-within > .sous-nav--pied{ display:block; }
.pied__item--deroulant > .pied__titre{ position:relative; padding-right:16px; }
.pied__item--deroulant > .pied__titre::after{
  content:''; position:absolute; right:0; top:50%;
  width:6px; height:6px; margin-top:-4px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}
.pied__colonne{ display:flex; flex-direction:column; gap:7px; }
.pied__colonne a{ opacity:.82; font-weight:700; }
.pied__colonne a:hover{ opacity:1; text-decoration:underline; }
.pied__titre{
  opacity:1; font-weight:800;
  font-size:.86rem; letter-spacing:.02em;
  margin-bottom:2px;
}
.pied__colonne .pied__titre ~ .pied__titre{ margin-top:9px; }
.pied__nav a:hover{ text-decoration:underline; }
.reseaux{ display:flex; gap:2px; margin-left:auto; }
.reseaux a{ display:grid; place-items:center; width:26px; height:26px; }
.reseaux svg{ width:19px; height:19px; fill:currentColor; }
.reseaux a:hover{ opacity:.8; }
@media (max-width: 860px){
  .pied__interieur{ flex-direction:column; align-items:center; text-align:center; }
  .reseaux{ margin-left:0; }
  .pied__nav{ justify-content:center; width:100%; gap:26px 32px; }
  /* Mobile : le sous-menu du pied se deplie dans le flux, comme le burger */
  .pied__liste{ flex-direction:column; align-items:center; gap:12px; width:100%; }
  .sous-nav--pied{
    position:static; transform:none; display:none;
    margin:8px 0 0; padding:2px 0 0; background:transparent;
    box-shadow:none; text-align:center; min-width:0;
  }
  .pied__item:hover > .sous-nav--pied,
  .pied__item:focus-within > .sous-nav--pied{ display:none; }
  .pied__item.est-deployee > .sous-nav--pied{ display:block; }
  .sous-nav--pied a{ color:var(--blanc); opacity:.82; padding:6px 0; }
  .sous-nav--pied a::before{ content:''; }
  .pied__item--deroulant.est-deployee > .pied__titre::after{ transform:rotate(135deg); margin-top:-4px; }
  .pied__colonne{ align-items:center; }
}

/* ==========================================================================
   9. ROUTEUR
   ========================================================================== */
[data-page]{ display:none; }
[data-page].est-active{ display:block; }

/* ==========================================================================
   10. AJOUTS — v4
   Images réelles, panneaux Niouzeletter, onglets accessibles, décors.
   ========================================================================== */

/* --- Lien d'évitement ---------------------------------------------------- */
.saut-contenu{
  position:absolute; top:0; left:-9999px; z-index:100;
  background:var(--blanc); color:var(--rose-fonce);
  font-family:var(--f-ui); font-weight:800; font-size:.9rem;
  padding:12px 20px; border-radius:0 0 14px 0;
  box-shadow:var(--ombre);
}
.saut-contenu:focus{ left:0; }

/* --- Libellé masqué, réutilisable --------------------------------------- */
.hors-ecran{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

/* --- Images réelles dans les blocs .ph -----------------------------------
   Le bloc gris reste le gabarit (proportions, arrondi, couleur de repli) ;
   l'image vit dedans et reprend le cadrage qui était porté par le fond CSS.
   ------------------------------------------------------------------------ */
.ph{ overflow:hidden; }
.ph > img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  display:block; border-radius:inherit;
}
.ph--plein > img{ object-fit:cover; }
.ph.est-vide > img{ display:none; }          /* fichier absent : on garde le gris */
/* Une fois l'image affichée, le fond de repli disparaît — sauf sur les fiches
   personnages, dont la couleur fait partie de la maquette. */
.ph.est-chargee:not(.perso__portrait){ background-color:transparent; background-image:none; }
/* sauf le portrait d'une fiche personnage : il garde son fond coloré,
   comme la vignette de la page, pour ne pas laisser une colonne blanche */
.fiche__visuel--perso.ph.est-chargee{ background-color:var(--couleur, var(--rose-pale)); }

/* Cadrages hérités des anciennes règles background-position */
.heros--accueil .heros__fond > img{ object-position:center 62%; }
/* Jeu video : l'illustration n'est plus recadree (donc reduite et entiere)
   et elle est decalee vers la droite, posee sur le bas du heros.
   Un masque en degrade estompe ses bords gauche et droit, pour qu'elle se
   fonde dans le fond de page au lieu de s'arreter net. */
.heros--jeu-video .heros__fond > img{ object-fit:cover; object-position:28% 72%; }
/* Le cadrage centré coupait Marine : on cale la scène sur son bord bas. */
/* Le cadrage partait du bas : la tête de Wendy passait sous l'en-tête.
   Le visuel descend pour dégager le haut de l'illustration. */
body[data-vue="anime"] .heros__fond > img{ object-position:50% 58%; }
/* Dessin nanime : les Sisters sont a droite du visuel, le texte passe a gauche */
@media (min-width: 861px){
  body[data-vue="anime"] .heros--rubrique .heros__texte{ margin-left:0; margin-right:auto; transform:none; }
  body[data-vue="anime"] .heros--scene::after{
    background:linear-gradient(to right,
      rgba(255,252,248,.70) 0%, rgba(255,252,248,.45) 24%,
      rgba(255,252,248,.10) 46%, rgba(255,252,248,0) 60%);
  }
  body[data-vue="anime"] .heros__fond.ph{ background-color:#D75B91 !important; }
  body[data-vue="anime"] .heros__fond > img{ object-fit:contain; object-position:right bottom; transform:none;
    /* le visuel démarre sous le menu : la tête n'est plus coupée */
    box-sizing:border-box; padding-top:clamp(100px, 9.5vw, 140px); }
}
/* Dessin nanimé : visuel sur fond rose (Sisters à droite) — voile rose clair à gauche */
@media (min-width: 861px){
  /* fondu en bas : le visuel et le voile s'effacent dans le dégradé de la page */
  body[data-vue="anime"] .heros__fond,
  body[data-vue="anime"] .heros--scene::after{
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.6) 75%, rgba(0,0,0,.2) 90%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.6) 75%, rgba(0,0,0,.2) 90%, rgba(0,0,0,0) 100%);
  }
  body[data-vue="anime"] .heros--scene::after{
    background:linear-gradient(to right,
      rgba(250,218,233,.92) 0%, rgba(250,218,233,.85) 26%,
      rgba(250,218,233,.45) 42%, rgba(250,218,233,0) 54%);
  }
}
.heros--scene .heros__fond > img{ object-position:center; }
.heros__decoupe{ overflow:visible; }
.heros__decoupe > img{ object-fit:contain; object-position:left bottom; }
.niouze__perso > img{ object-fit:contain; object-position:bottom center; }
.flanc > img, .deco > img{ object-fit:contain; }

/* Portraits de personnages : la découpe est calée en bas, la couleur reste visible */
.perso__portrait{ display:grid; align-items:end; overflow:hidden; }
.perso__portrait > img{ height:92%; width:100%; object-fit:contain; object-position:bottom center; }
/* Visuels repris des fiches officielles : ce sont des images de série, pas des
   détourages. Elles remplissent donc la tuile au lieu de flotter au milieu. */
.perso__portrait--photo > img{ height:100%; object-fit:cover; object-position:center 28%; }
/* Sammie, Emma, Nath : visuels tres hauts, calés en haut du carré (tête et buste visibles) */
.perso__portrait[data-img="persos/sammie.webp"] > img,
.perso__portrait[data-img="persos/emma.webp"] > img,
.perso__portrait[data-img="persos/nath.webp"] > img{
  align-self:start; justify-self:center; width:78%; height:calc(100% - 9%); margin-top:9%;
  object-fit:cover; object-position:50% 0;
}
.fiche__visuel--perso.perso__portrait--photo.ph > img,
.fiche__visuel--perso > img[src^="https://www.adopteunesister.com"]{
  object-fit:cover; object-position:center 28%; padding:0;
}

@media (max-width: 860px){
  .heros--accueil .heros__fond > img{ object-position:52% bottom; transform:scale(1.4); transform-origin:52% bottom; }
}

/* --- Panneau coloré derrière la Niouzeletter -----------------------------
   Relevé page par page sur SITE PRO - SISTERS.pdf. Le panneau part sous le
   haut de la carte pêche et descend jusqu'au pied de page.
   ------------------------------------------------------------------------ */
.niouze{ position:relative; }
.niouze::before{
  content:''; position:absolute; z-index:0;
  left:clamp(10px, 4vw, 56px); right:clamp(10px, 4vw, 56px);
  top:calc(clamp(52px, 7.5vw, 100px) + clamp(38px, 5vw, 70px));
  bottom:0;
  background:var(--niouze-panneau, transparent);
  border-radius:26px 26px 0 0;
}
/* Motif graffiti, posé par-dessus la couleur du panneau */
.niouze__filigrane{
  position:absolute; z-index:0; inset:auto 0 0 0;
  height:min(62%, 260px);
  background:var(--filigrane, none) repeat-x center bottom / auto 100%;
  opacity:var(--filigrane-opacite, 0);
  pointer-events:none;
  border-radius:0 0 0 0;
}
.niouze .conteneur{ position:relative; z-index:1; }

body[data-vue="bd"]        .niouze{ --niouze-panneau:#AB3E96; --filigrane-opacite:1; }
body[data-vue="podcast"]   .niouze{ --niouze-panneau:#4F5CAF; --filigrane-opacite:1; }
/* Podcast : le panneau monte jusqu’en haut, pas de bande de fond visible au-dessus */
body[data-vue="podcast"] .niouze::before{ top:0; }
body[data-vue="jeux"]      .niouze{ --niouze-panneau:#00CDFF; --filigrane-opacite:1; }
body[data-vue="jeux-telecharger"] .niouze{ --niouze-panneau:#00CDFF; --filigrane-opacite:1; }
body[data-vue="mag"]       .niouze{ --niouze-panneau:#FFF000; }
body[data-vue="jeu-video"] .niouze{ --niouze-panneau:#FFF000; }
body[data-vue="persos"]    .niouze{ --niouze-panneau:#FFF000; }
body[data-vue="anime"]     .niouze{ --niouze-panneau:#FFFF06; }
/* L'accueil garde son visuel crème + graffiti, déjà en place plus haut */
body[data-vue="accueil"] .niouze::before{ display:none; }
body[data-vue="accueil"] .niouze__filigrane{ display:none; }

/* La carte et le perso passent au-dessus du panneau */
.niouze__carte{ z-index:2; }
.niouze__perso{
  left:1%; bottom:-30%;
  width:min(34%, 360px); aspect-ratio:520/568;   /* proportions du fichier fourni */
  z-index:3;
}
@media (max-width: 860px){
  /* le panneau colore passe en pleine largeur */
  .niouze::before{ left:0; right:0; border-radius:0; }
  .niouze__perso{ left:50%; transform:translateX(-50%); bottom:-6%; width:200px; aspect-ratio:520/568; }
  .niouze::before{ top:calc(clamp(52px, 7.5vw, 100px) + 30px); }
}

/* --- Fil d'Ariane : visible aussi en mobile ------------------------------
   Il reste hors flux (position absolue héritée) : passé dans le flux il
   devenait un élément flex du héros et rognait la largeur du texte.
   ------------------------------------------------------------------------ */
@media (max-width: 860px){
}

/* --- Onglets et saisons : panneaux réels --------------------------------- */
.onglet[aria-selected="true"]{ color:var(--rose-fonce); border-bottom-color:var(--rose); }
.panneau[hidden]{ display:none; }
.panneau:focus{ outline:none; }

/* Petit logo posé à gauche de la barre d'onglets (page « à lire ») */
.barre-onglets{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px, 3vw, 40px);
  position:relative; z-index:3;
  margin-bottom:clamp(-64px, -4.5vw, -28px);
}
.barre-onglets .ph{
  width:clamp(74px, 9vw, 116px); aspect-ratio:900/400;
  flex:0 0 auto; border-radius:0; background-color:transparent;
}
.barre-onglets .onglets{ margin-bottom:0; }
.carte-contenu--onglets{ margin-top:clamp(36px, 5vw, 64px); }
/* Boutique et Repliques : la barre d'onglets vit DANS la carte blanche,
   sur le meme fond que les cartes qu'elle filtre. */
.carte-contenu--onglets > .onglets{
  margin:0 0 clamp(20px, 2.6vw, 30px);
  border-bottom:2px solid rgba(46,26,71,.10);
}
/* BD et livres : le meme traitement pour la barre logo + onglets */
.carte-contenu--onglets > .barre-onglets{
  margin:0 0 clamp(20px, 2.6vw, 30px);
  padding-bottom:clamp(16px, 2.2vw, 26px);
  border-bottom:2px solid rgba(46,26,71,.10);
}
.carte-contenu--onglets > .barre-onglets .onglets{ margin-bottom:0; }
/* BD et livres : le texte de presentation vit dans la carte blanche, au-dessus des filtres */
/* Visuel à gauche, texte à droite ; empilés sur mobile */
.bd__intro{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
  align-items:center; gap:clamp(20px, 3.5vw, 48px);
  padding:0 0 clamp(18px, 2.4vw, 28px);
}
.bd__intro .bd__visuel{
  aspect-ratio:1000/600; border-radius:0;
  background-color:transparent; background-image:none;
}
.bd__intro .bd__visuel > img{ width:100%; height:100%; object-fit:contain; }
.bd__intro .bd__presentation{ padding:0; max-width:none; margin:0; text-align:left; }
.bd__intro .bd__presentation p{ margin-inline:0; }
.bd__intro .bd__presentation p:nth-last-child(1){ margin-bottom:0; }
@media (max-width: 760px){
  .bd__intro{ grid-template-columns:1fr; }
  .bd__intro .bd__visuel{ max-width:440px; width:100%; margin-inline:auto; }
  .bd__intro .bd__presentation{ text-align:center; }
}
@media (max-width: 640px){
  .barre-onglets{ flex-direction:column; gap:10px; margin-bottom:clamp(-40px,-3vw,-20px); }
}



/* --- Page magazine : héros plus haut, découpe descendue et décalée --------
   Le personnage montait derrière l'en-tête et le chapeau passait sous le
   logo. Le héros reprend la hauteur de la maquette et la découpe se cale
   sous la barre de navigation, pieds au ras de la carte blanche.
   ------------------------------------------------------------------------ */
@media (min-width: 861px){
  body[data-vue="mag"] .heros--rubrique{ min-height:clamp(560px, 57vw, 740px); }
  body[data-vue="mag"] .heros__decoupe{
  left:auto; right:calc(50% + 14px); bottom:0;
  height:min(84%, 560px); width:auto; aspect-ratio:auto;
}
body[data-vue="mag"] .heros__decoupe > img{ width:auto; height:100%; }
}





/* Podcast : logos de série agrandis */
.serie__entete{ grid-template-columns:minmax(230px, 360px) 1fr; }
.serie__logo{ aspect-ratio:260/130; }
@media (max-width: 700px){
  .serie__entete{ grid-template-columns:1fr; }
  .serie__logo{ max-width:300px; margin-inline:auto; }
}

/* Podcast : texte d'introduction de chaque série, plus présent */
.serie__entete p{
  font-size:clamp(1rem, 1.35vw, 1.18rem);
  line-height:1.5;
}
.serie__entete .serie__casting{ font-size:.78rem; line-height:1.5; }

/* --- En-tête collée : logo réduit et fil d'Ariane conservé ----------------
   Le fil de la page est recopié dans l'en-tête par le routeur, pour qu'il
   reste lisible une fois la barre blanche en place.
   ------------------------------------------------------------------------ */
.entete__marque{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:5px; flex:0 0 auto; min-width:0;
}
.entete.est-collee .logo{ width:clamp(104px, 11vw, 168px); transition:width .2s ease; }

/* --- Heros de rubrique : le couple visuel + texte est centre sur la page ---
   Le visuel est cale a gauche, le texte a droite ; leur largeur varie d'une
   page a l'autre, donc l'ensemble penchait vers la droite. Un decalage
   calcule au chargement (et au redimensionnement) recentre le tout.
   -------------------------------------------------------------------------- */
@media (min-width: 861px){
  .heros--rubrique .heros__texte,
  .heros--rubrique .heros__decoupe{
    transform:translateX(var(--recentrage, 0px));
    transition:transform .2s ease;
  }
}

/* --- En-tete collee : bandeau fin + pastille ronde pour le duo ------------
   Une fois collee, la barre blanche se resserre autour du menu. Le duo
   casque + licorne prend place dans une pastille ronde, dans le flux, juste
   a gauche du menu : l'ensemble pastille + menu est centre dans la barre.
   La pastille est peinte au-dessus de l'ombre de la barre et dans le meme
   blanc : la jonction est invisible. Passage d'un logo a l'autre en fondu.
   -------------------------------------------------------------------------- */
.logo__duo{ display:none; }
.entete{ transition:padding .3s ease, background-color .3s ease, box-shadow .3s ease; }

@media (min-width: 861px){
  .entete.est-collee{
    --barre-collee:clamp(56px, 5.2vw, 76px);
    --pastille:clamp(116px, 11.5vw, 172px);
    padding-block:0;
  }
  .entete.est-collee::before{ display:none; }

  .entete.est-collee .entete__interieur{
    align-items:center;
    justify-content:center;
    gap:clamp(12px, 1.6vw, 26px);
    min-height:var(--barre-collee);
  }
  .entete.est-collee .nav{ margin-left:0; }

  .entete .logo{
    position:relative; display:block; line-height:0;
    height:calc(clamp(150px, 19vw, 275px) * 366 / 900);
    transition:width .3s ease, height .3s ease;
  }
  .entete .logo__marque{
    position:absolute; inset:auto 0 0 0; width:100%;
    transition:opacity .26s ease;
  }
  .entete .logo__duo{
    display:block; position:absolute; left:0; bottom:0;
    height:100%; width:auto; aspect-ratio:520/438;
    border-radius:0; opacity:0; pointer-events:none;
    transition:opacity .26s ease;
  }

  /* collee : la pastille occupe la place du logo, dans le flux */
  .entete.est-collee .entete__marque{ flex:0 0 auto; }
  .entete.est-collee .logo{
    width:var(--pastille); height:var(--barre-collee);
  }
  .entete.est-collee .logo__marque{ opacity:0; }
  .entete.est-collee .logo__duo{
    opacity:1; z-index:2;
    left:0; top:50%; bottom:auto;
    width:var(--pastille); height:var(--pastille);
    margin-top:calc(var(--pastille) / -2);
    aspect-ratio:auto;
    border-radius:50%; overflow:hidden;
    background:var(--barre-fond);     /* exactement la couleur de la barre */
    box-shadow:none;
  }
  .entete.est-collee .logo__duo > img{
    object-fit:contain; object-position:center bottom;
    padding:9% 5% 0;
  }
}

/* Mobile : meme principe, pastille plus petite, centree dans la barre ;
   le bouton du menu passe en position absolue a droite. */
@media (max-width: 860px){
  /* Les jeux a telecharger : le bandeau passe sous le texte, pleine largeur */
  /* le cadre est rogne sur la droite (la plage rose vide) pour que les deux
     sisters se retrouvent bien au centre de l'ecran */
  body[data-vue="jeux-telecharger"] .heros__fond{
    aspect-ratio:5/4;
    -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 88%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(to bottom, #000 0, #000 88%, rgba(0,0,0,0) 100%);
  }
  body[data-vue="jeux-telecharger"] .heros__fond > img{
    object-fit:cover; object-position:right center; transform:scaleX(-1);
  }
  .entete.est-collee{ --pastille:clamp(130px, 38vw, 150px); }
  .entete.est-collee .entete__interieur{
    position:relative;
    justify-content:center;
    align-items:center;
  }
  .entete.est-collee .entete__marque{ flex:0 0 auto; }
  .entete.est-collee .burger{
    position:absolute; right:var(--gouttiere); top:50%;
    transform:translateY(-50%); margin:0;
  }
  /* la barre reste fine ; la pastille la deborde en haut et en bas */
  .entete.est-collee{ padding-block:0; }
  .entete.est-collee .entete__interieur{ min-height:clamp(52px, 14vw, 66px); }
  .entete.est-collee .logo{
    position:relative; line-height:0;
    width:var(--pastille); height:clamp(52px, 14vw, 66px);
  }
  .entete.est-collee .logo__marque{ display:none; }
  .entete.est-collee .logo__duo{
    display:block; position:absolute; inset:auto auto auto 0;
    /* callee en haut de la barre : tout le debordement se fait vers le bas */
    top:4px; margin-top:0;
    width:var(--pastille); height:var(--pastille); aspect-ratio:auto;
    border-radius:50%; overflow:hidden;
    /* contour marque, dans la couleur de la barre : la pastille se detache */
    background:var(--barre-fond);
    box-shadow:0 0 0 5px var(--barre-fond), 0 6px 16px rgba(0,41,48,.22);
    opacity:1; z-index:2;
  }
  .entete.est-collee .logo__duo > img{
    object-fit:contain; object-position:center bottom;
    padding:13% 9% 0;
  }
}

}
.entete .logo{ transition:width .2s ease; }
/* Menu principal : texte plus grand tant que l’en-tête n’est pas collée,
   il revient à sa taille compacte quand le fond blanc apparaît. */
.nav__lien{ transition:font-size .2s ease; }
@media (min-width: 861px){
  .entete:not(.est-collee) .nav__lien{ font-size:clamp(.94rem, .52vw + .30rem, .99rem); }
  .entete:not(.est-collee) .nav__liste{ gap:clamp(10px, 1.5vw, 26px); }
}

@media (min-width: 861px){
  .entete{ padding-block:8px 18px; }
  .entete.est-collee{ padding-block:10px 0; }   /* le duo touche le bas de la bande */
}

/* --- Podcast : la découpe déborde sur le bloc suivant ---------------------
   Son bas est calé sur le haut de la première carte de série (la marge
   haute du bloc), pour qu'elle semble sortir du cadre.
   ------------------------------------------------------------------------ */
@media (min-width: 861px){
  body[data-vue="podcast"] .heros__decoupe{
    /* Le cadre adopte le rapport exact du fichier (900 x 761) : le dessin
       remplit donc la boite et son bas tombe pile sur le bloc violet. */
    aspect-ratio:900/761; height:auto; width:min(45%, 575px);
    bottom:calc(-1 * clamp(48px, 7vw, 90px));
    /* cale sur le bord gauche du conteneur (comme le bloc violet dessous),
       puis decale d'un cran vers la gauche pour degager la colonne de texte */
    left:calc(max((100% - var(--largeur)) / 2, 0px) + var(--gouttiere) - clamp(14px, 1.6vw, 26px));
    z-index:4;
  }
}
/* --- Héros en mobile : l'image d'abord, le texte dessous ------------------
   En dessous de 860 px le texte se posait sur l'illustration et devenait
   illisible. Le héros passe en colonne : visuel pleine largeur, puis le
   texte sur le fond de page. Plus aucun voile de lisibilité nécessaire.
   ------------------------------------------------------------------------ */
@media (max-width: 860px){
  .heros--rubrique,
  .heros--accueil{
    display:flex; flex-direction:column; align-items:stretch;
    min-height:0;
    padding:78px 0 clamp(26px, 6vw, 44px);
    text-align:center;
    overflow:visible;
  }

  /* Fil d'Ariane : dans le flux, au-dessus du visuel */
  /* Le visuel prend toute la largeur */
  .heros__fond,
  .heros__decoupe{
    position:static; inset:auto;
    width:100%; max-width:none; height:auto;
    transform:none; border-radius:0;
  }
  .heros__fond{ aspect-ratio:16/10; }
  .heros__decoupe{ aspect-ratio:4/3; overflow:hidden; }
  .heros__fond > img{ object-fit:cover; object-position:center; transform:none; }
  .heros__decoupe > img{ object-fit:contain; object-position:center bottom; }

  /* Plus de voile ni de dégradé par-dessus l'image */
  .heros--scene::after,
  .heros--accueil::after{ display:none; }

  /* Le texte, sous le visuel */
  .heros__interieur{ padding-top:clamp(18px, 5vw, 28px); }
  .heros--rubrique .heros__texte,
  .heros--accueil .heros__texte{ max-width:none; margin-inline:auto; text-align:center; }
  .heros--accueil h1{ margin-bottom:.3em; }
  .heros--accueil p{ margin-inline:auto; }

  /* Carrousel : flèches masquées, puces ramenées sous l'image */
  .carrousel-fleche{ display:none; }
  .carrousel-puces{
    position:static; order:2;
    margin:12px 0 0; padding:0;
  }
  .heros--accueil .heros__fond{ order:1; }
  .heros--accueil .heros__interieur{ order:3; }
}

/* --- Couvertures du magazine : numéro, date et titre sous chaque visuel --- */
.couverture__numero{
  display:block;
  font-family:var(--f-ui); font-weight:800; font-size:.72rem;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--encre-doux); margin-top:10px;
}
.couverture__titre{ margin-top:2px; }
.grille--mag .couverture a{ display:block; }
.grille--mag .couverture a:hover .couverture__titre{ color:var(--rose); }


/* Épisodes du podcast : la vignette et le titre sont cliquables */
.episode__lien{ display:block; color:inherit; }
.episode__titre .episode__lien{ display:inline; }
.episode__lien:hover .ph{ transform:translateY(-3px); }
.episode__vignette .ph{ transition:transform .18s ease; }
.episode__titre a:hover{ text-decoration:underline; }





.serie__casting{
  margin:10px 0 0; font-size:.76rem; line-height:1.5; opacity:.72;
}
.serie__casting span{ font-family:var(--f-ui); font-weight:800; letter-spacing:.05em; text-transform:uppercase; font-size:.68rem; }
.serie__casting em{ font-style:normal; opacity:.75; }

/* Podcast : la série complète n'est pas publique, on le dit plutôt que
   d'afficher un bouton qui ne mène nulle part. */
.serie__note{ font-size:.82rem; opacity:.75; max-width:52ch; margin-inline:auto; }


/* --- Accueil, section « En bande-dessinée » -------------------------------
   Les deux personnages se rapprochent du centre et celui de gauche déborde
   sur le héros au-dessus.
   ------------------------------------------------------------------------ */
.bloc--bd{ overflow:visible; }
/* le personnage de gauche doit passer PAR-DESSUS le hero + sa frange (z-index:1),
   tout en restant sous le contenu de la section et sous l'en-tete (z-index:50). */
.flanc--gauche{ left:11%;  top:-17%; width:min(18%, 228px); z-index:3; }
.flanc--droite{ right:11.5%; top:3%;  width:min(16.5%, 212px); }
.bloc--bd .conteneur{ z-index:4; }
@media (max-width: 1080px){ .bloc--bd{ overflow:hidden; } .flanc--gauche{ z-index:0; } }

/* --- Fil d'Ariane : la page en cours en rose ------------------------------ */

/* --- Pictos des rubriques « Tout l'univers » ------------------------------ */
.univers__liens .btn{
  display:inline-flex; align-items:center; gap:9px;
  padding-inline:1.25em;
}
.univers__liens .btn svg{
  width:19px; height:19px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Chaque rubrique a son picto en couleur, pose sur une pastille claire :
   la rangee de boutons roses reprend des couleurs sans se disperser. */
.univers__liens .btn{ padding-left:.42em; }
.univers__liens .btn .picto{
  display:grid; place-items:center; flex:0 0 auto;
  width:30px; height:30px; border-radius:50%;
  background:var(--blanc); color:var(--picto, var(--rose));
}
.univers__liens .btn:hover .picto,
.univers__liens .btn:focus-visible .picto{ transform:rotate(-8deg) scale(1.06); }
.univers__liens .btn .picto{ transition:transform .16s ease; }

/* --- « Tout l'univers des Sisters » --------------------------------------
   Commun a toutes les pages, juste avant la Niouzeletter. Sans fond propre :
   le degrade de la page se poursuit derriere.
   ------------------------------------------------------------------------ */
.bloc--univers{
  background:none;
  padding-block:clamp(40px, 6vw, 78px);
}
.univers__titre{
  text-align:center; color:var(--violet);
  font-size:clamp(1.6rem, 3.4vw, 2.5rem);
  margin-bottom:clamp(22px, 3vw, 38px);
}
.univers__liens{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(10px, 1.6vw, 20px);
  max-width:760px; margin-inline:auto;
}
.univers__liens .btn{ font-size:.86rem; }

/* Arrivée en quinconce : un élément depuis la gauche, le suivant depuis la
   droite, légèrement décalés dans le temps. Sert aux pastilles « Tout
   l'univers des Sisters » et à l'encart Niouzeletter. */
.glisse-alt-active .glisse-alt{
  opacity:0;
  transform:translateX(var(--alt-depart, -46px));
  transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--alt-delai, 0ms);
}
.glisse-alt-active .glisse-alt.est-arrive{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .glisse-alt-active .glisse-alt{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   PAGE LES AUTEURS
   Couleurs relevées sur SITE PRO - SISTERS.pdf, page 9.
   ========================================================================== */
body[data-vue="auteurs"]{ background:linear-gradient(168deg,#FCD1D3 0%,#F8A8A6 46%,#F46860 100%); }

.auteur{
  display:grid; grid-template-columns:minmax(200px, 38%) 1fr;
  border-radius:var(--r-carte); overflow:hidden;
  box-shadow:var(--ombre);
  margin-bottom:clamp(26px, 4vw, 44px);
  color:var(--blanc);
}
.auteur--william{  background:#EE256B; }
.auteur--cazenove{ background:#941867; }
.auteur--william{  --auteur-fond:#EE256B; }
.auteur--cazenove{ --auteur-fond:#941867; }

/* Texte replie + bouton « Lire la suite » */
.auteur__corps{ position:relative; }
.auteur__corps.est-repliee{
  overflow:hidden;
  max-height:clamp(150px, 15vw, 215px);
}
.auteur__corps.est-repliee::after{
  content:''; position:absolute; inset:auto 0 0 0; height:86px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--auteur-fond, #EE256B));
  pointer-events:none;
}
.auteur__plus{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:clamp(12px, 1.6vw, 18px);
  font-family:var(--f-ui); font-weight:800; font-size:.82rem;
  color:var(--blanc); background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.55); border-radius:999px;
  padding:9px 18px; cursor:pointer;
  transition:background .16s ease;
}
.auteur__plus:hover{ background:rgba(255,255,255,.3); }
.auteur__plus::after{ content:'\25BE'; font-size:.8em; transition:transform .2s ease; }
.auteur__plus[aria-expanded="true"]::after{ transform:rotate(180deg); }
.auteur__photo{ border-radius:0; height:100%; min-height:240px; background-color:rgba(0,0,0,.12); }
.auteur__texte{ padding:clamp(22px, 3.4vw, 44px); }
.auteur__texte h2{
  color:var(--blanc); text-align:center;
  font-size:clamp(1.5rem, 2.8vw, 2.1rem);
  margin-bottom:clamp(14px, 2vw, 22px);
}
.auteur__texte h2 em{ font-style:normal; font-family:var(--f-titre); }
.auteur__texte p{ font-size:.92rem; line-height:1.6; max-width:none; text-align:justify; }
.auteur__texte p:last-child{ margin-bottom:0; }
@media (max-width: 760px){
  .auteur{ grid-template-columns:1fr; }
  .auteur__photo{ aspect-ratio:4/3; min-height:0; }
  .auteur__texte p{ text-align:left; }
}

/* Bloc « complicité » : texte à droite, Supersisters qui débordent à gauche */
.bloc--complicite{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:clamp(320px, 34vw, 440px);
  padding-block:clamp(20px, 3vw, 40px);
}
.bloc--complicite .conteneur{ position:relative; z-index:1; }
.complicite__texte{
  margin-left:auto; max-width:min(52%, 560px);
  color:var(--blanc); font-weight:700; font-size:.95rem; line-height:1.55;
  text-align:justify;
}
.deco--supersisters{ left:-1%; bottom:0; width:min(42%, 430px); aspect-ratio:760/700; }
@media (max-width: 860px){
  .bloc--complicite{ display:block; min-height:0; }
  .deco--supersisters{ position:static; width:min(70%,320px); margin:0 auto clamp(14px,3vw,24px); }
  .complicite__texte{ margin-inline:auto; max-width:none; text-align:left; }
}

/* Bandeau de clôture */
.bandeau-chiffre{ background:#332053; color:var(--blanc); padding-block:clamp(26px, 4vw, 44px); }
.bandeau-chiffre p{
  margin:0 auto; max-width:60ch; text-align:center;
  font-family:var(--f-ui); font-weight:800;
  font-size:clamp(.95rem, 1.7vw, 1.2rem); line-height:1.4;
  text-transform:uppercase; letter-spacing:.01em;
}

/* --- Liste des épisodes du dessin nanimé --------------------------------
   Titres issus de la fiche de la série ; liens et vignettes vers les vidéos
   publiées par les diffuseurs (Gulli, CANAL+kids).
   ------------------------------------------------------------------------ */
.grille--episodes-tv{ grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 2.2vw, 28px); }
@media (max-width: 860px){ .grille--episodes-tv{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 520px){ .grille--episodes-tv{ grid-template-columns:1fr; } }

.episode-tv__lien{ display:block; }
.episode-tv .video{ display:block; position:relative; }
.episode-tv .ph{ aspect-ratio:16/9; border-radius:12px; background-color:#141014; transition:transform .18s ease; }
.episode-tv__lien:hover .ph{ transform:translateY(-3px); }
.episode-tv__duree{
  position:absolute; right:8px; bottom:8px; z-index:2;
  background:rgba(0,0,0,.82); color:var(--blanc);
  font-family:var(--f-ui); font-weight:800; font-size:.66rem;
  padding:2px 7px; border-radius:5px; letter-spacing:.02em;
}
.episode-tv__titre{
  display:block;
  font-family:var(--f-ui); font-weight:800; font-size:.8rem; line-height:1.3;
  margin:10px 0 3px; color:var(--encre);
}
.episode-tv__lien:hover .episode-tv__titre{ color:var(--rose-fonce); }
.episode-tv__meta{ margin:0; font-size:.7rem; line-height:1.4; opacity:.66; }
/* Sans vidéo en ligne : tuile sombre comme sur la maquette, pas de bouton
   lecture — il n'y a rien à lancer. */
.episode-tv--indispo .video{
  background:linear-gradient(150deg,#FFD9EA 0%,#FFC1DC 46%,#BFE9F2 100%);
  border-radius:12px; overflow:hidden;
}
.episode-tv--indispo .ph,
.episode-tv--indispo .ph.est-chargee{ background-color:transparent; background-image:none; }
.episode-tv--indispo .ph > img{ object-fit:contain; padding:15%; }
.episode-tv--indispo .episode-tv__titre{ opacity:.82; }
.episode-tv--indispo .episode-tv__meta{ opacity:.5; }

/* La compilation, mise en avant sous les onglets de saison */
.compil{ text-align:center; margin:0 0 clamp(22px, 3vw, 34px); }
.compil__note{ font-size:.76rem; opacity:.7; margin:8px 0 0; }

/* --- Fondu en bas des visuels de héros -----------------------------------
   Sur la maquette, la scène du héros s'efface vers le bas et se fond dans
   le dégradé de page, au lieu de s'arrêter net.
   ------------------------------------------------------------------------ */
body[data-vue="bd"] .heros__fond,
body[data-vue="anime"] .heros__fond,
body[data-vue="jeu-video"] .heros__fond{
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 50%,
    rgba(0,0,0,.74) 70%, rgba(0,0,0,.30) 87%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 50%,
    rgba(0,0,0,.74) 70%, rgba(0,0,0,.30) 87%, rgba(0,0,0,0) 100%);
}

/* --- Décors du bandeau turquoise (accueil) ------------------------------- */
.bloc--turquoise{ position:relative; overflow:hidden; }
.bloc--turquoise .conteneur{ position:relative; z-index:1; }
.deco--fleurs-blanches{ right:5%;  top:4%;  width:min(10%, 132px); aspect-ratio:420/287; }
.deco--levres{         right:42%; top:7%;  width:min(10%, 122px); aspect-ratio:304/246; }
@media (max-width: 980px){ .deco--fleurs-blanches, .deco--levres{ display:none; } }

/* --- Câlin + Puduk qui débordent de la carte (page dessin nanimé) -------- */
.carte-contenu{ position:relative; }
.deco--calin{
  right:-2%; bottom:-6%;
  width:min(30%, 336px); aspect-ratio:800/861;
  z-index:3;
}
@media (max-width: 980px){ .deco--calin{ display:none; } }

/* --- Carrousel du héros d'accueil ---------------------------------------- */
.heros--accueil .heros__fond{ transition:opacity .45s ease; }
.carrousel-fleche:focus-visible{ outline:3px solid var(--blanc); }
.carrousel-puces{
  position:absolute; z-index:3; left:0; right:0; bottom:26px;
  display:flex; justify-content:center; gap:10px;
}
.carrousel-puce{
  width:11px; height:11px; border-radius:50%;
  border:2px solid var(--blanc); background:transparent; padding:0;
}
.carrousel-puce[aria-current="true"]{ background:var(--blanc); }
@media (max-width: 700px){ .carrousel-puces{ bottom:16px; } }

/* --- Formulaire Niouzeletter --------------------------------------------- */
.niouze__form{ margin:0; }
/* Formulaire complet de la page Niouzeletter : prénom, nom, naissance, e-mail */
.niouze__form--complet{ flex-direction:column; align-items:stretch; gap:14px; text-align:left; }
.niouze__duo{ display:flex; flex-wrap:wrap; gap:14px; }
.niouze__bloc{ flex:1 1 200px; margin:0; display:flex; flex-direction:column; gap:5px; }
.niouze__label{
  font-family:var(--f-ui); font-weight:800; font-size:.7rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--encre); opacity:.72;
}
.niouze__form--complet .niouze__champ{ flex:1 1 auto; max-width:none; width:100%; }
.niouze__form--complet .btn{ align-self:center; margin-top:4px; }
.niouze__message[data-etat="erreur"]{ color:var(--rose-fonce); }
.niouze__message[data-etat="ok"]{ color:#0B7A5A; }


/* ==========================================================================
   PAGE JEUX — quiz et mini-jeux jouables
   Grille de cartes, puis un panneau de jeu qui remplace la grille.
   ========================================================================== */
.grille--quiz{
  display:grid; gap:clamp(14px, 2vw, 24px);
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}
@media (min-width: 1100px){ .grille--quiz{ grid-template-columns:repeat(3, 1fr); } }
.jeu-carte{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  text-align:left; cursor:pointer;
  font:inherit; color:var(--encre);
  padding:clamp(18px, 2.2vw, 26px);
  border:2px solid rgba(46,26,71,.10); border-radius:20px;
  background:#fff;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.jeu-carte:hover, .jeu-carte:focus-visible{
  transform:translateY(-4px);
  border-color:var(--jeu-teinte, var(--rose));
  box-shadow:0 12px 26px rgba(46,26,71,.14);
}
.jeu-carte__picto{
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:14px;
  background:var(--jeu-teinte, var(--rose));
}
.jeu-carte__picto svg{ width:28px; height:28px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.jeu-carte__titre{ font-family:var(--f-titre); font-size:1.16rem; line-height:1.15; }
.jeu-carte__texte{ font-size:.86rem; line-height:1.45; opacity:.8; }
.jeu-carte__action{
  margin-top:auto; padding-top:10px;
  font-family:var(--f-ui); font-weight:800; font-size:.8rem;
  color:var(--jeu-teinte, var(--rose));
}
.jeu-carte__action::after{ content:' \2192'; }
.jeu-carte[aria-current="true"]{
  border-color:var(--jeu-teinte, var(--rose));
  box-shadow:0 10px 22px rgba(46,26,71,.14);
}

/* Panneau de jeu */
.jeu-scene[hidden]{ display:none; }

/* Plein écran : le jeu choisi recouvre la page, la grille reste dessous */
body.jeu-plein{ overflow:hidden; }
.jeu-scene.est-plein{
  position:fixed; inset:0; z-index:150;
  margin:0; border-top:0;
  padding:0 0 clamp(30px, 4vw, 56px);
  background:var(--creme);
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  animation:jeu-plein-entree .26s cubic-bezier(.22,.61,.36,1);
}
@keyframes jeu-plein-entree{ from{ opacity:0; transform:scale(.99); } to{ opacity:1; transform:none; } }
.jeu-scene.est-plein > *{
  width:100%; max-width:860px; margin-inline:auto;
  padding-inline:var(--gouttiere);
}
.jeu-scene.est-plein .jeu-scene__barre{
  position:sticky; top:0; z-index:2;
  max-width:none; margin-bottom:clamp(18px, 2.4vw, 28px);
  padding-block:clamp(12px, 1.8vw, 18px);
  /* le contenu de la barre s'aligne sur la colonne du jeu */
  padding-inline:max(var(--gouttiere), calc((100% - 860px) / 2 + var(--gouttiere)));
  background:var(--creme);
  border-bottom:2px solid rgba(46,26,71,.10);
  box-shadow:0 10px 18px -16px rgba(46,26,71,.45);
}
.jeu-scene.est-plein .jeu-retour{ font-size:.92rem; }
@media (prefers-reduced-motion: reduce){
  .jeu-scene.est-plein{ animation:none; }
}

/* Memory en plein écran : le plateau entier tient dans la fenêtre,
   quatre colonnes quelle que soit la taille d'écran, sans défilement. */
.jeu-scene.est-plein.jeu-scene--memory{ overflow:hidden; }
.jeu-scene.est-plein.jeu-scene--memory .memory{
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(6px, 1.1vw, 13px);
}
.jeu-scene.est-plein.jeu-scene--memory .jeu-progression{ margin:0 0 10px; }
.jeu-scene.est-plein.jeu-scene--memory .jeu-pied{ margin-top:12px !important; }
.jeu-scene{
  --jeu-teinte:var(--rose);
  /* respiration entre la grille de jeux et le jeu qui s'ouvre dessous */
  margin-top:clamp(30px, 4.5vw, 64px);
  padding-top:clamp(26px, 3.5vw, 44px);
  border-top:2px solid rgba(46,26,71,.10);
}
.jeu-scene__barre{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:clamp(16px, 2.4vw, 26px);
}
.jeu-scene__titre{ font-family:var(--f-titre); font-size:clamp(1.3rem, 2.4vw, 1.9rem); margin:0; }
.jeu-retour{
  font-family:var(--f-ui); font-weight:800; font-size:.84rem;
  color:var(--rose); cursor:pointer; background:none; border:0; padding:6px 0;
}
.jeu-retour::before{ content:'\2190\00a0'; }
.jeu-question{ font-family:var(--f-titre); font-size:clamp(1.1rem, 2vw, 1.5rem); line-height:1.25; margin:0 0 18px; }
.jeu-reponses{ display:grid; gap:10px; margin:0 0 18px; padding:0; list-style:none; }
.jeu-reponse{
  display:block; width:100%; text-align:left; font:inherit; cursor:pointer;
  padding:13px 16px; border-radius:14px;
  border:2px solid rgba(46,26,71,.14); background:#fff; color:var(--encre);
  transition:border-color .14s ease, background .14s ease;
}
.jeu-reponse:hover:not(:disabled){ border-color:var(--rose); }
.jeu-reponse:disabled{ cursor:default; }
.jeu-reponse.est-bonne{ border-color:#1FA97B; background:#E6F7F0; font-weight:700; }
.jeu-reponse.est-fausse{ border-color:#E23D4E; background:#FDECEE; }
.jeu-note{
  margin:0 0 18px; padding:13px 16px; border-radius:14px;
  background:rgba(46,26,71,.05); font-size:.9rem; line-height:1.5;
}
.jeu-note strong{ color:var(--rose-fonce); }
.jeu-pied{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.jeu-progression{ font-family:var(--f-ui); font-weight:800; font-size:.78rem; opacity:.6; }

/* Résultat de fin */
.jeu-bilan{ text-align:center; padding:clamp(10px, 2vw, 26px) 0; }
.jeu-bilan__note{ font-family:var(--f-titre); font-size:clamp(2.4rem, 7vw, 4rem); line-height:1; color:var(--rose); }
.jeu-bilan__texte{ font-size:1rem; margin:10px auto 22px; max-width:46ch; }
.jeu-bilan__perso{ width:min(220px, 60%); margin-inline:auto; }
.jeu-bilan__perso.ph{ aspect-ratio:1/1; border-radius:20px; }

/* Memory */
.memory{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(8px, 1.4vw, 14px); max-width:560px; margin-inline:auto; }
@media (max-width: 520px){ .memory{ grid-template-columns:repeat(3, 1fr); } }
.memory__carte{
  position:relative; aspect-ratio:3/4; border:0; padding:0; cursor:pointer;
  border-radius:14px; background:none;
}
.memory__face{
  position:absolute; inset:0; border-radius:14px; overflow:hidden;
  backface-visibility:hidden; transition:transform .35s ease;
  display:grid; place-items:center;
}
.memory__face--dos{ background:var(--rose); transform:rotateY(0deg); }
.memory__face--dos svg{ width:46%; height:46%; fill:#fff; opacity:.85; }
.memory__face--avant{ background:#fff; transform:rotateY(180deg); border:2px solid rgba(46,26,71,.12); }
.memory__face--avant .ph{ width:100%; height:100%; border-radius:12px; }
.memory__carte.est-retournee .memory__face--dos{ transform:rotateY(-180deg); }
.memory__carte.est-retournee .memory__face--avant{ transform:rotateY(0deg); }
.memory__carte.est-trouvee{ opacity:.55; cursor:default; }

/* Pendu */
.pendu{ text-align:center; }
.pendu__mot{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  font-family:var(--f-titre); font-size:clamp(1.4rem, 4vw, 2.2rem); margin-bottom:16px;
}
.pendu__lettre{
  min-width:1.1em; padding-bottom:4px;
  border-bottom:3px solid rgba(46,26,71,.25);
}
.pendu__lettre--espace{ border-bottom:0; min-width:.6em; }
.pendu__vies{ font-size:1.3rem; letter-spacing:3px; margin-bottom:6px; }
.pendu__indice{ font-size:.9rem; opacity:.75; margin-bottom:18px; }
.pendu__clavier{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; max-width:520px; margin-inline:auto; }
.pendu__touche{
  width:38px; height:42px; font:inherit; font-weight:800; cursor:pointer;
  border-radius:10px; border:2px solid rgba(46,26,71,.14); background:#fff; color:var(--encre);
}
.pendu__touche:hover:not(:disabled){ border-color:var(--rose); }
.pendu__touche:disabled{ opacity:.32; cursor:default; }

/* ==========================================================================
   PAGE BOUTIQUE — produits dérivés
   ========================================================================== */
.produit{ display:flex; flex-direction:column; }
.produit__lien{ display:block; }
.produit .ph{
  aspect-ratio:1/1; border-radius:18px; background-color:#fff;
  border:2px solid rgba(46,26,71,.08);
  transition:transform .18s ease, border-color .18s ease;
}
.produit .ph > img{ object-fit:contain; padding:10%; }
.produit__lien:hover .ph{ transform:translateY(-4px); border-color:var(--rose); }
.produit__categorie{
  display:inline-block; margin:12px 0 4px;
  font-family:var(--f-ui); font-weight:800; font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--rose);
}
.produit__titre{ font-family:var(--f-titre); font-size:1.02rem; line-height:1.2; margin:0 0 6px; }
.produit__titre a{ color:inherit; }
.produit__titre a:hover{ color:var(--rose-fonce); }
.produit__texte{ margin:0; font-size:.82rem; line-height:1.5; opacity:.78; }
.produit__vendeur{ margin:8px 0 0; font-size:.72rem; opacity:.55; font-family:var(--f-ui); font-weight:800; }
.grille--produits{
  display:grid; gap:clamp(18px, 2.4vw, 32px);
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}

/* ==========================================================================
   PAGE LES JEUX A TELECHARGER — coloriages, recettes et fonds d'ecran
   Meme carte que la boutique, avec un bouton de telechargement explicite.
   ========================================================================== */
.goodie{ display:flex; flex-direction:column; }
.goodie__lien{ display:block; }
.goodie .ph{
  aspect-ratio:3/4; border-radius:18px; background-color:#fff;
  border:2px solid rgba(46,26,71,.08); overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.goodie--fond .ph{ aspect-ratio:16/10; }
.goodie .ph > img{ object-fit:contain; padding:6%; }
.goodie__lien:hover .ph,
.goodie__lien:focus-visible .ph{
  transform:translateY(-4px); border-color:var(--rose);
  box-shadow:0 12px 26px rgba(46,26,71,.14);
}
.goodie__categorie{
  display:inline-block; margin:12px 0 4px;
  font-family:var(--f-ui); font-weight:800; font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--rose);
}
.goodie__titre{ font-family:var(--f-titre); font-size:1.02rem; line-height:1.2; margin:0 0 10px; }
.goodie__titre a{ color:inherit; }
.goodie__titre a:hover{ color:var(--rose-fonce); }
.goodie__telecharger{
  display:inline-flex; align-items:center; gap:7px; margin-top:2px;
  font-family:var(--f-ui); font-weight:800; font-size:.76rem;
  color:var(--rose-fonce);
}
.goodie__telecharger svg{
  width:15px; height:15px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.goodie__telecharger:hover{ text-decoration:underline; }
.grille--goodies{
  display:grid; gap:clamp(18px, 2.4vw, 32px); align-items:start;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}

/* Accueil, section « En dessin nanime » : le visuel prend toute la place a
   gauche. Le cadre adopte le rapport du fichier (1072 x 519) pour qu'il n'y
   ait plus de bandes vides au-dessus et en dessous du dessin. */
@media (min-width: 861px){
  body[data-vue="accueil"] .bloc--turquoise .duo{ grid-template-columns:1.32fr 1fr; }
  body[data-vue="accueil"] .bloc--turquoise .duo__visuel{
    aspect-ratio:1072/519;
    width:calc(100% + clamp(30px, 6vw, 110px));
    margin-inline-start:calc(-1 * clamp(30px, 6vw, 110px));
  }
}

/* Plus de filigrane graffiti (onomatopees) derriere la Niouzeletter,
   sur aucune page : il passait devant les aplats de couleur. */
.niouze{ --filigrane-opacite:0; }
.niouze__filigrane{ display:none; }

/* Boutique */
body[data-vue="boutique"]{ background:linear-gradient(160deg,#FFE9F4 0%,#FFD6EA 38%,#FFC6A8 74%,#FFDE7A 100%); }
body[data-vue="boutique"] .niouze{ --niouze-panneau:#AB3E96; --filigrane-opacite:1; }

/* Parallaxe des deux personnages de la section « En bande-dessinee » */
.flanc, .deco{ will-change:transform; }
/* l'amplitude est reduite en JS plutot que le mouvement supprime */


/* ==========================================================================
   PAGE LES RÉPLIQUES
   ========================================================================== */
body[data-vue="expressions"]{ background:linear-gradient(160deg,#FFF3C4 0%,#FFD9E8 44%,#E7CCFB 100%); }
body[data-vue="expressions"] .niouze{ --niouze-panneau:#7B4FBE; --filigrane-opacite:1; }
.video-spot{
  margin:clamp(26px, 3.4vw, 44px) auto 0;
  width:78%; max-width:1000px;
  border-radius:20px; overflow:hidden;
  background:#000;
  box-shadow:0 20px 44px -20px rgba(46,26,71,.55);
}
.video-spot video{ display:block; width:100%; height:auto; }
.video-spot figcaption{
  padding:10px 14px; background:#fff;
  font-family:var(--f-ui); font-weight:800; font-size:.78rem;
  text-align:center; color:var(--encre);
}
@media (max-width: 860px){ .video-spot{ width:100%; } }

.grille--repliques{
  display:grid; gap:clamp(14px, 2vw, 22px);
  grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
}
.replique{
  margin:0; padding:clamp(20px, 2.4vw, 30px);
  border-radius:20px; background:#fff;
  border:2px solid rgba(46,26,71,.08);
  border-left:6px solid var(--replique-teinte, var(--rose));
  display:flex; flex-direction:column; gap:12px;
}
.replique__texte{
  font-family:var(--f-titre); font-size:clamp(1.02rem, 1.7vw, 1.34rem);
  line-height:1.26; margin:0; color:var(--encre);
}
.replique__auteur{
  font-family:var(--f-ui); font-weight:800; font-size:.8rem;
  color:var(--replique-teinte, var(--rose)); margin-top:auto;
}
.replique__auteur em{
  display:block; font-style:normal; font-weight:600; font-size:.78rem;
  color:var(--encre); opacity:.6; margin-top:3px; line-height:1.4;
}


/* ==========================================================================
   PAGE LES ZACTUALITÉS
   ========================================================================== */
body[data-vue="zactualites"]{ background:linear-gradient(160deg,#FFF6D6 0%,#FFE0B8 40%,#FFC0D8 74%,#E4B4FA 100%); }
body[data-vue="zactualites"] .niouze{ --niouze-panneau:#FF277C; --filigrane-opacite:1; }

/* Vignettes d'actualité au format du site Bamboo Mag : tuile portrait, visuel
   en fond plein cadre, titre blanc en capitales sur un bandeau noir en bas. */
.grille--zactus{
  display:grid; gap:clamp(18px, 2.4vw, 30px);
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width: 960px){ .grille--zactus{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px){ .grille--zactus{ grid-template-columns:1fr; } }
.zactu{ display:block; margin:0; }
.zactu__lien{
  position:relative; display:flex; align-items:flex-end;
  aspect-ratio:420/513; overflow:hidden; border-radius:6px;
  background:#2A1B3F; color:var(--blanc);
  transition:transform .18s ease, box-shadow .18s ease;
}
.zactu__lien:hover, .zactu__lien:focus-visible{
  transform:translateY(-4px); box-shadow:0 14px 30px rgba(46,26,71,.24);
}
.zactu .ph{
  position:absolute; inset:0; border-radius:0; background-color:#2A1B3F;
}
.zactu .ph > img{ width:100%; height:100%; object-fit:cover; }
.zactu__bandeau{
  position:relative; z-index:1; width:100%;
  background:rgba(0,0,0,.75); padding:15px;
}
.zactu__date{
  display:block; margin:0 0 4px;
  font-family:var(--f-ui); font-weight:800; font-size:.66rem;
  letter-spacing:.07em; text-transform:uppercase; color:#FFF100;
}
.zactu__titre{
  font-family:var(--f-ui); font-weight:900; text-transform:uppercase;
  font-size:1.02rem; line-height:1.12; margin:0; color:var(--blanc);
}
.zactu__lien:hover .zactu__titre{ color:#FFF100; }

/* Niouzeletter : les Sisters regardent vers le bloc, comme sur la maquette */
.niouze__perso > img{ transform:scaleX(-1); }

/* Boutique : le visuel de heros suit le rapport du fichier (658 x 822) */
@media (min-width: 861px){
  /* Le visuel est calibre sur la HAUTEUR du heros et pose sur son bord bas :
     il tient donc entierement dans le cadre, sans jamais etre rogne. */
  body[data-vue="boutique"] .heros__decoupe{
    aspect-ratio:900/1122;
    /* 70 % de la hauteur du heros : la tete passe sous le logo sans le toucher */
    height:min(70%, 430px); width:auto;
    left:auto; right:calc(50% + 14px); bottom:0;
  }
}


/* --- Heros : visuels cales sur la hauteur, poses sur le bord bas -----------
   Calibrer sur la hauteur (et non la largeur) garantit que le dessin tient
   entierement dans le cadre : ni rogne en bas, ni coupe par le logo.
   -------------------------------------------------------------------------- */
@media (min-width: 861px){
  /* Les heros de rubrique laissent deborder leur decoupe : le personnage
     passe DEVANT le bloc suivant au lieu d'etre coupe par le bord du heros. */
  .heros--rubrique{ overflow:visible; }
  .heros--rubrique .heros__decoupe{ z-index:4; }

  /* Zactualites : image large, collee au bas du heros */
  body[data-vue="zactualites"] .heros__decoupe{
    aspect-ratio:620/773;
    height:min(52%, 330px); width:auto;
    /* pose sur le bord haut de la carte blanche, qui remonte sur le heros */
    left:auto; right:calc(50% + 14px); bottom:clamp(40px, 7vw, 90px);
  }
  /* Les persos : la bande passait sous le logo. Elle repasse DERRIERE la
     carte blanche qui remonte sur le heros, comme dans la maquette. */
  body[data-vue="persos"] .heros__decoupe{
    height:min(82%, 500px); width:auto; aspect-ratio:auto;
    /* pousse au maximum vers la droite, juste avant la colonne de texte */
    left:auto; right:calc(50% + 14px); bottom:0;
    z-index:1;
  }
  body[data-vue="persos"] .heros__decoupe > img{ width:auto; height:100%; }
  /* Nos jeux : visuel nettement decale vers la droite, cale sur la hauteur */
  body[data-vue="jeux"] .heros__decoupe{
    aspect-ratio:1100/960;
    height:min(52%, 330px); width:auto;
    /* pousse a droite, et pose sur le bord haut de la carte blanche
       qui remonte sur le heros : la licorne reste entierement visible */
    left:auto; right:calc(50% + 14px); bottom:clamp(40px, 7vw, 90px);
  }
  body[data-vue="jeux"] .heros__decoupe > img{ width:auto; height:100%; }
  /* Les jeux a telecharger : scene large, posee sur le bord haut de la carte */
  /* Les jeux a telecharger : bandeau pleine largeur, illustration calee a
     droite et texte pose sur la plage rose de gauche. Le fond de page reprend
     exactement le rose du visuel : aucun raccord visible. */
  /* heros plus haut : le visuel occupe une large moitie gauche de la page et
     descend SOUS la carte blanche du dessous, qui le recouvre proprement */
  body[data-vue="jeux-telecharger"] .heros--rubrique{ min-height:clamp(540px, 50vw, 760px); }
  body[data-vue="jeux-telecharger"] .heros__fond{
    /* demarre sous la barre d'en-tete : la branche ne passe plus sous le logo */
    inset:clamp(70px, 6vw, 88px) 0 -20% 0;
    z-index:0;                      /* passe DERRIERE la carte blanche */
    pointer-events:none;
    /* fondu tres leger pile a la jonction avec la carte */
    -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 88%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(to bottom, #000 0, #000 88%, rgba(0,0,0,0) 100%);
  }
  /* le texte du heros reste au-dessus du visuel */
  body[data-vue="jeux-telecharger"] .heros--rubrique .heros__interieur{ z-index:6; }
  /* retourne : les personnages passent a gauche, le texte reste a droite */
  body[data-vue="jeux-telecharger"] .heros__fond > img{
    object-fit:contain; object-position:right center; transform:scaleX(-1);
  }
  /* La musique : meme calage que les autres rubriques */
  body[data-vue="musique"] .heros__decoupe{
    aspect-ratio:760/897; height:min(70%, 430px); width:auto;
    left:auto; right:calc(50% + 14px); bottom:0;
  }

  /* Les expressions : visuel retourne, reduit et pousse a droite */
  body[data-vue="expressions"] .heros__decoupe{
    height:min(62%, 380px); width:auto; aspect-ratio:auto;
    left:auto; right:calc(50% + 14px); bottom:0;
  }
  body[data-vue="expressions"] .heros__decoupe > img{ width:auto; height:100%; transform:scaleX(-1); }

  /* La Niouzeletter : visuel retourne et pousse a droite, cale en bas */
  body[data-vue="niouzeletter"] .heros__decoupe{
    height:min(68%, 420px); width:auto; aspect-ratio:auto;
    left:auto; right:calc(50% + 14px); bottom:0;
  }
  body[data-vue="niouzeletter"] .heros__decoupe > img{ width:auto; height:100%; transform:scaleX(-1); }

  /* Les auteurs : meme calage que la page « Les persos » */
  body[data-vue="auteurs"] .heros__decoupe{
    height:min(72%, 440px); width:auto; aspect-ratio:auto;
    /* pousse au maximum vers la droite, juste avant la colonne de texte */
    left:auto; right:calc(50% + 14px); bottom:0;
  }
  body[data-vue="auteurs"] .heros__decoupe > img{ width:auto; height:100%; }

  /* Ecris aux Sisters : grand visuel presque centre, pose pile sur le bord
     haut de la carte blanche qui remonte sous le heros. */
  body[data-vue="fans"] .heros__decoupe{
    aspect-ratio:790/662;
    height:min(72%, 520px); width:auto;
    left:auto; right:calc(50% - clamp(20px, 4vw, 70px));
    /* la carte blanche remonte sur le heros : le visuel se pose pile sur
       son bord haut au lieu de passer devant. */
    bottom:clamp(40px, 7vw, 90px);
  }
  body[data-vue="fans"] .heros__decoupe > img{ width:100%; height:100%; object-fit:contain; object-position:center bottom; }
  /* le texte garde sa colonne a droite, un cran plus etroite */
  body[data-vue="fans"] .heros__texte{ max-width:min(42%, 460px); }
}

/* ==========================================================================
   PAGES GLOSSAIMUSIQUE
   ========================================================================== */
body[data-vue="musique"]{ background:linear-gradient(160deg,#D8E7FF 0%,#C7C3F6 44%,#F3B6E4 100%); }
body[data-vue="musique"] .niouze{ --niouze-panneau:#4F5CAF; }

.grille--glossaire{
  display:grid; gap:clamp(14px, 2vw, 22px);
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
}
.mot{
  margin:0; padding:clamp(18px, 2.2vw, 26px);
  border-radius:18px; background:#fff;
  border:2px solid rgba(46,26,71,.08);
  border-left:6px solid var(--mot-teinte, var(--rose));
  display:flex; flex-direction:column; gap:8px;
  transition:transform .22s cubic-bezier(.34,1.3,.64,1), box-shadow .22s ease,
             border-color .22s ease, background-color .22s ease;
}
/* Survol : la citation se redresse légèrement, se teinte de la couleur de
   celle qui la dit, et le mot passe dans cette même couleur. */
.mot:hover, .mot:focus-within{
  transform:translateY(-6px) rotate(-.7deg);
  border-color:var(--mot-teinte, var(--rose));
  background:color-mix(in srgb, var(--mot-teinte, var(--rose)) 8%, #fff);
  box-shadow:0 18px 32px -14px color-mix(in srgb, var(--mot-teinte, var(--rose)) 60%, transparent);
}
.mot__terme{ transition:color .22s ease; }
.mot:hover .mot__terme, .mot:focus-within .mot__terme{ color:var(--mot-teinte, var(--rose)); }
@media (prefers-reduced-motion: reduce){
  .mot:hover, .mot:focus-within{ transform:none; }
}
.mot__categorie{
  font-family:var(--f-ui); font-weight:800; font-size:.66rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--mot-teinte, var(--rose));
}
.mot__terme{ font-family:var(--f-titre); font-size:clamp(1.15rem, 1.8vw, 1.45rem); line-height:1.15; margin:0; }
/* Une marinade entiere tient mal a la taille d'un mot : on la pose un cran plus bas. */
.mot--phrase .mot__terme{ font-size:clamp(1rem, 1.25vw, 1.15rem); line-height:1.3; }

/* ==========================================================================
   L'ENTRETIEN « Les Marinades, c'est grave, docteur ? »
   Texte + photo en tete, puis les questions-reponses sur deux colonnes.
   ========================================================================== */
.carte-contenu--entretien{ margin-top:clamp(24px, 3.2vw, 40px); }
.entretien{
  display:grid; gap:clamp(18px, 2.6vw, 34px);
  grid-template-columns:1fr minmax(240px, 400px);
  align-items:center;
}
.entretien__texte{ grid-column:1; grid-row:1; }
.entretien__media{ grid-column:2; grid-row:1; }
.entretien__photo{
  margin:0; border-radius:18px; overflow:hidden;
  aspect-ratio:1000/752;
  box-shadow:0 8px 26px rgba(75, 34, 96, .14);
}
.entretien__photo > img{ width:100%; height:100%; object-fit:cover; }
.entretien__credit{
  margin:8px 2px 0; text-align:right;
  font-family:var(--f-ui); font-weight:700;
  font-size:.7rem; letter-spacing:.02em; line-height:1.4;
  opacity:.62;
}
.entretien__credit span{ white-space:nowrap; }
/* les trois questions occupent toute la largeur, une par colonne */
.entretien__qr{
  grid-column:1 / -1; grid-row:2;
  display:grid; gap:clamp(18px, 2.4vw, 30px);
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
  align-items:start;
  padding-top:clamp(6px, 1vw, 14px);
}
.entretien__titre{
  font-family:var(--f-titre);
  font-size:clamp(1.5rem, 3vw, 2.3rem);
  line-height:1.1; margin:0 0 12px;
}
.entretien__chapo{
  margin:0; font-size:clamp(.94rem, .5vw + .8rem, 1.02rem);
  line-height:1.62;
}
.entretien__bloc{
  border-left:4px solid var(--rose);
  padding-left:clamp(14px, 1.6vw, 20px);
}
.entretien__question{
  font-family:var(--f-ui); font-weight:800;
  font-size:clamp(.94rem, .5vw + .8rem, 1.04rem);
  color:var(--rose); margin:0 0 8px; line-height:1.3;
}
.entretien__bloc p{ margin:0 0 10px; font-size:.94rem; line-height:1.62; }
.entretien__bloc p:last-child{ margin-bottom:0; }
.entretien__sigle{
  font-family:var(--f-ui); font-weight:800; font-size:.78rem;
  letter-spacing:.04em; color:var(--rose); margin-right:6px;
}
@media (max-width: 860px){
  .entretien{ grid-template-columns:1fr; }
  .entretien__texte{ grid-column:1; grid-row:auto; }
  .entretien__media{ grid-column:1; grid-row:auto; max-width:460px; }
  .entretien__credit{ text-align:left; }
  .entretien__qr{ grid-column:1; grid-row:auto; }
}
.mot__def{ margin:0; font-size:.88rem; line-height:1.55; opacity:.82; }

.fiche-musique{
  padding:clamp(22px, 3vw, 36px);
  border-radius:20px; background:rgba(46,26,71,.04);
  margin-bottom:clamp(18px, 2.4vw, 28px);
  border-left:6px solid var(--rose);
}
.fiche-musique--vandalises{ border-left-color:#4F5CAF; }
.fiche-musique__etiquette{
  display:inline-block; margin-bottom:6px;
  font-family:var(--f-ui); font-weight:800; font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--rose);
}
.fiche-musique--vandalises .fiche-musique__etiquette{ color:#4F5CAF; }
.fiche-musique h2{ margin:0 0 10px; font-size:clamp(1.3rem, 2.2vw, 1.8rem); }
.fiche-musique p{ margin:0 0 10px; font-size:.94rem; line-height:1.6; }
.fiche-musique p:last-child{ margin-bottom:0; }

/* Page musique : les morceaux de la bande originale, avec lecteur */
/* Making-of du dessin nanime : grille de vidéos YouTube */
/* Saisons : seuls les premiers episodes sont montres, le reste se deplie */
.grille--episodes-tv > .est-repliee{ display:none; }
.grille--glossaire > .est-repliee{ display:none; }
.voir-plus{
  display:block; margin:clamp(20px, 2.6vw, 30px) auto 0;
  font-family:var(--f-ui); font-weight:800; font-size:.86rem;
  color:var(--rose-fonce); background:none; cursor:pointer;
  border:2px solid rgba(46,26,71,.14); border-radius:var(--r-btn);
  padding:11px 26px;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.voir-plus:hover, .voir-plus:focus-visible{ border-color:var(--rose); background:rgba(255,39,124,.06); }
.voir-plus__reste{ opacity:.6; font-weight:700; }

/* Page Niouzeletter : carte d'inscription et ce que contient l'envoi */
.niouze__carte--page{ margin:0 auto; max-width:min(100%, 640px); text-align:center; }
.grille--niouze{
  display:grid; gap:clamp(16px, 2.2vw, 26px);
  grid-template-columns:repeat(auto-fill, minmax(215px, 1fr));
}
.niouze-item{
  padding:clamp(18px, 2.2vw, 26px);
  border:2px solid rgba(46,26,71,.10); border-radius:20px; background:#fff;
}
.niouze-item__picto{
  display:grid; place-items:center; width:46px; height:46px;
  border-radius:13px; background:var(--rose); margin-bottom:12px;
}
.niouze-item__picto svg{ width:24px; height:24px; fill:none; stroke:#fff; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.niouze-item h3{ font-family:var(--f-titre); font-size:1.06rem; line-height:1.2; margin:0 0 6px; }
.niouze-item p{ margin:0; font-size:.86rem; line-height:1.5; opacity:.8; }

/* ==========================================================================
   FICHE DÉTAILLÉE — panneau qui s'ouvre au clic (albums et personnages)
   ========================================================================== */
.fiche-voile{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:clamp(16px, 4vw, 48px);
  background:rgba(42,27,63,.62);
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s;
}
.fiche-voile.est-ouverte{ opacity:1; visibility:visible; }
.fiche{
  position:relative; width:min(880px, 100%); max-height:88vh; overflow:auto;
  background:#fff; border-radius:var(--r-carte);
  padding:clamp(22px, 3.4vw, 44px);
  box-shadow:0 30px 70px rgba(42,27,63,.34);
  transform:translateY(14px) scale(.985);
  transition:transform .24s ease;
}
.fiche-voile.est-ouverte .fiche{ transform:none; }
/* Lecteur d'extrait (BD audio) : vidéo verticale posée sur un voile sombre */
.extrait-voile{
  position:fixed; inset:0; z-index:260;
  display:grid; place-items:center;
  padding:clamp(14px, 3vw, 32px);
  background:rgba(20, 10, 28, .82);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:extrait-entree .22s ease;
}
.extrait-voile[hidden]{ display:none; }
@keyframes extrait-entree{ from{ opacity:0; } to{ opacity:1; } }
.extrait{ position:relative; max-width:min(100%, 440px); }
.extrait video{
  display:block; width:100%; max-height:84vh;
  border-radius:18px; background:#000;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.8);
}
.extrait__fermer{
  position:absolute; top:-14px; right:-14px; z-index:2;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:0; background:var(--rose); color:var(--blanc);
  font-size:1.2rem; line-height:1;
}
.extrait__fermer:hover, .extrait__fermer:focus-visible{ background:var(--rose-fonce); }
@media (max-width: 520px){
  .extrait__fermer{ top:-10px; right:-6px; width:38px; height:38px; }
}
@media (prefers-reduced-motion: reduce){ .extrait-voile{ animation:none; } }

.fiche__fermer{
  position:absolute; top:12px; right:12px; z-index:5;   /* au-dessus du bandeau collant */
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:2px solid rgba(46,26,71,.12); background:#fff; color:var(--encre);
  font-size:1.25rem; line-height:1;
}
.fiche__fermer:hover{ border-color:var(--rose); color:var(--rose-fonce); }
.fiche__corps{ display:grid; grid-template-columns:minmax(0, 230px) 1fr; gap:clamp(20px, 3vw, 38px); align-items:start; }
@media (max-width: 680px){ .fiche__corps{ grid-template-columns:1fr; } }

/* Fiche personnage : le portrait reste centré face au texte et suit le
   défilement, au lieu de laisser une colonne vide sous lui. La hauteur
   visible de la fenêtre est transmise par --fiche-vue. */
.fiche__corps--perso .fiche__flanc{
  align-self:start;
  position:sticky; top:0;
  min-height:var(--fiche-vue, 0px);
  /* les personnages sont dessinés en buste : ils reposent sur le bas de la
     colonne plutôt que de flotter au milieu */
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  min-width:0;
  /* le fond coloré du personnage tient toute la hauteur de la colonne */
  background:var(--couleur, var(--rose-pale));
  border-radius:18px; overflow:hidden;
  padding:0;
}
/* le portrait lui-même n'a plus de fond : c'est la colonne qui le porte,
   et il prend toute la hauteur disponible pour que le dessin soit grand */
.fiche__corps--perso .fiche__flanc .fiche__visuel--perso.ph{
  width:100%; background:transparent; border-radius:0;
  flex:1 1 auto; min-height:220px; aspect-ratio:auto;
}
@media (min-width: 681px){
  /* colonne un peu plus large : les personnages respirent mieux */
  .fiche__corps--perso{ grid-template-columns:minmax(0, 272px) 1fr; }
}
/* Plans en pied (Marine, Wendy) : le personnage dépasse du bandeau coloré
   par le haut, comme s'il en sortait. La place est réservée au-dessus pour
   que rien ne soit rogné par la fenêtre. */
.fiche__corps--perso .fiche__flanc:has([data-img$="-fiche.webp"]){
  --depassement:clamp(52px, 7vw, 86px);
  overflow:visible;
  /* la marge et le point de collage sont identiques : le personnage est
     déjà en place au premier affichage et ne bouge plus au défilement */
  margin-top:var(--depassement);
  top:var(--depassement);
}
.fiche__corps--perso .fiche__flanc .fiche__visuel--perso[data-img$="-fiche.webp"]{
  overflow:visible;
}
.fiche__corps--perso .fiche__flanc .fiche__visuel--perso[data-img$="-fiche.webp"] > img{
  transform:scale(1.15); transform-origin:center bottom;
}

/* William est un plan buste : un léger zoom lui fait occuper la colonne */
.fiche__corps--perso .fiche__flanc .fiche__visuel--perso[data-img="persos/papa.webp"] > img{
  transform:scale(1.32); transform-origin:center bottom;
}

/* le dessin remplit le cadre (hauteur certaine grâce au positionnement
   absolu) et se cale sur le bas — William garde son cadrage serré */
.fiche__corps--perso .fiche__flanc .fiche__visuel--perso.ph > img{
  position:absolute; inset:0; width:100%; height:100%; padding:0;
}
.fiche__corps--perso .fiche__flanc .fiche__visuel--perso.ph > img{
  /* les dessins reposent sur le bas de la colonne ; « contain » évite de
     rogner les côtés (William) */
  object-fit:contain; object-position:center bottom;
}
/* Mobile : le visuel reste collé en haut de la fiche et le texte défile
   dessous. Les deux occupent la même cellule de grille, ce qui donne au
   bandeau toute la hauteur du texte comme zone de collage. */
@media (max-width: 680px){
  .fiche__corps--perso{
    --visuel-mobile:clamp(170px, 30vh, 250px);
    --marge-fiche:clamp(22px, 3.4vw, 44px);
    grid-template-columns:1fr; grid-template-rows:auto;
  }
  .fiche__corps--perso > .fiche__flanc,
  .fiche__corps--perso > div:not(.fiche__flanc){ grid-column:1; grid-row:1; }
  /* le bandeau déborde sur les marges de la fenêtre : rien ne passe
     au-dessus ni sur les côtés pendant le défilement */
  .fiche__corps--perso .fiche__flanc,
  .fiche__corps--perso .fiche__flanc:has([data-img$="-fiche.webp"]){
    position:sticky; top:calc(-1 * var(--marge-fiche)); z-index:2;
    align-self:start; justify-content:flex-end;
    height:calc(var(--visuel-mobile) + var(--marge-fiche)); min-height:0;
    margin:calc(-1 * var(--marge-fiche)) calc(-1 * var(--marge-fiche)) 0;
    padding:var(--marge-fiche) var(--marge-fiche) 0;
    border-radius:0 0 18px 18px;
    overflow:hidden;
  }
  .fiche__corps--perso .fiche__flanc .fiche__visuel--perso[data-img$="-fiche.webp"] > img{
    transform:none;
  }
  .fiche__corps--perso > div:not(.fiche__flanc){
    padding-top:calc(var(--visuel-mobile) + 18px);
  }
  /* le portrait garde sa marge intérieure malgré le débordement du cadre */
  .fiche__corps--perso .fiche__flanc .fiche__visuel--perso.ph{ width:100%; }
}
.fiche__visuel{ border-radius:18px; overflow:hidden; background:#F4EEF3; }
.fiche__visuel.ph{ aspect-ratio:215/293; }
.fiche__visuel--perso.ph{ aspect-ratio:3/4; background:var(--couleur, var(--rose-pale)); }
.fiche__visuel--perso.ph > img{ object-fit:contain; padding:8%; }
.fiche__etiquette{
  display:inline-block; font-family:var(--f-ui); font-weight:800; font-size:.7rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--rose); margin-bottom:4px;
}
/* Fiche personnage : la ligne au-dessus du prénom reprend l'écriture
   manuscrite des accroches (« Nikol crème ! ») */
.fiche__etiquette--perso{
  font-family:var(--f-accent); font-weight:400;
  font-size:clamp(1.05rem, 1.7vw, 1.35rem);
  letter-spacing:0; text-transform:none;
  transform:rotate(-3deg); transform-origin:left center;
  margin-bottom:.1em;
}
.fiche__titre{ font-family:var(--f-titre); font-size:clamp(1.5rem, 3vw, 2.2rem); line-height:1.1; margin:0 0 12px; }
.fiche__resume{ font-size:.95rem; line-height:1.62; margin:0 0 18px; }
.fiche__liste{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:7px; }
.fiche__liste li{ display:flex; gap:10px; font-size:.87rem; line-height:1.5; flex-wrap:wrap; }
/* fiches personnages : valeurs longues, on passe à la ligne sous le libellé */
.fiche__corps .fiche__liste li{ display:block; }
.fiche__corps .fiche__liste b{ display:block; margin-bottom:2px; min-width:0; }
.fiche__liste dt, .fiche__liste b{
  font-family:var(--f-ui); font-weight:800; font-size:.72rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--encre); opacity:.55; min-width:104px;
}
.fiche__citations{ margin:clamp(24px, 3vw, 34px) 0 18px; padding:0; list-style:none; display:grid; gap:8px; }
.fiche__citations li{
  font-family:var(--f-titre); font-size:1rem; line-height:1.3;
  padding:10px 14px; border-radius:14px; border-left:5px solid var(--couleur, var(--rose));
  background:rgba(46,26,71,.045);
  transition:transform .2s cubic-bezier(.34,1.3,.64,1), background-color .2s ease,
             color .2s ease, box-shadow .2s ease, border-left-width .2s ease;
}
/* Survol : la réplique avance d'un cran et se teinte de la couleur du
   personnage, comme une bulle qu'on attrape. */
.fiche__citations li:hover{
  transform:translateX(7px) rotate(-.6deg);
  background:color-mix(in srgb, var(--couleur, var(--rose)) 18%, #fff);
  color:color-mix(in srgb, var(--couleur, var(--rose)) 58%, var(--encre));
  box-shadow:0 14px 26px -14px color-mix(in srgb, var(--couleur, var(--rose)) 65%, transparent);
}
@media (prefers-reduced-motion: reduce){
  .fiche__citations li:hover{ transform:none; }
}
.fiche__note{ font-size:.78rem; line-height:1.5; opacity:.6; margin:14px 0 0; }

/* Épisodes cités dans les fiches : en gras, et cliquables quand l'épisode
   figure dans la grille des saisons. */
.titre-episode{ font-weight:800; }
.lien-episode{
  font-weight:800; color:inherit; cursor:pointer;
  text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--couleur, var(--rose)) 60%, transparent);
  transition:color .16s ease, text-decoration-color .16s ease;
}
.lien-episode:hover, .lien-episode:focus-visible{
  color:color-mix(in srgb, var(--couleur, var(--rose)) 70%, var(--encre));
  text-decoration-color:currentColor;
}
/* l'épisode visé clignote doucement à l'arrivée */
.episode-tv.est-pointe{ border-radius:14px; animation:episode-pointe 2.6s ease; }
@keyframes episode-pointe{
  0%, 100%{ box-shadow:0 0 0 0 rgba(231,55,145,0); }
  12%, 70%{ box-shadow:0 0 0 4px var(--rose), 0 10px 26px -12px rgba(231,55,145,.8); }
}
@media (prefers-reduced-motion: reduce){
  .episode-tv.est-pointe{ animation:none; box-shadow:0 0 0 4px var(--rose); }
}

/* La vignette devient cliquable */
.couverture > button, .perso > button{
  display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; color:inherit; text-align:inherit;
}
.couverture button .ph{ transition:transform .18s ease, box-shadow .18s ease; }
.couverture button:hover .ph, .couverture button:focus-visible .ph{
  transform:translateY(-5px); box-shadow:0 14px 30px rgba(46,26,71,.2);
}
.perso button:hover .perso__nom, .perso button:focus-visible .perso__nom{ color:var(--rose-fonce); }
.perso__plus{
  display:block; margin-top:6px;
  font-family:var(--f-ui); font-weight:800; font-size:.72rem; color:var(--rose);
}
.perso__plus::after{ content:' \2192'; }

/* Survol d'une vignette : le portrait se soulève et s'incline légèrement,
   avec une ombre de la couleur du personnage. */
.perso__portrait{
  transition:transform .22s cubic-bezier(.34,1.3,.64,1), box-shadow .22s ease;
}
.perso button:hover .perso__portrait,
.perso button:focus-visible .perso__portrait{
  transform:translateY(-7px) rotate(-1.4deg) scale(1.03);
  box-shadow:0 20px 32px -16px color-mix(in srgb, var(--couleur, var(--rose)) 80%, transparent);
}
.perso__nom, .perso__plus{ transition:color .18s ease, transform .18s ease; }
.perso button:hover .perso__plus,
.perso button:focus-visible .perso__plus{
  color:var(--rose-fonce); transform:translateX(4px);
}
.perso button:focus-visible .perso__nom{ color:var(--rose-fonce); }
@media (prefers-reduced-motion: reduce){
  .perso button:hover .perso__portrait,
  .perso button:focus-visible .perso__portrait{ transform:none; }
}

/* ==========================================================================
   PAGE AUTEURS — leurs autres séries chez Bamboo
   ========================================================================== */
.reseaux--perso{ display:flex; gap:10px; margin-top:16px; }
.reseaux--perso a{
  display:grid; place-items:center; width:36px; height:36px;
  border-radius:50%; background:var(--rose); color:var(--blanc);
  transition:background-color .15s ease, transform .15s ease;
}
.reseaux--perso a svg{ width:18px; height:18px; fill:currentColor; }
.reseaux--perso a:hover{ background:#FFF100; color:var(--encre); transform:translateY(-2px); }

/* Bandeau Instagram de la page Zactualités : panneau jaune en tête de carte */
.insta{
  background:#FFF100;
  /* le panneau sort du rembourrage de la carte : il occupe toute sa largeur
     et vient se caler sur son bord haut, sans bande blanche autour */
  --marge-carte:clamp(24px, 4vw, 48px);
  margin:calc(-1 * var(--marge-carte)) calc(-1 * var(--marge-carte)) clamp(26px, 3.6vw, 44px);
  padding:clamp(22px, 3vw, 38px) var(--marge-carte);
  border-radius:var(--r-carte) var(--r-carte) 0 0;
}
.insta .btn{ background:var(--rose); color:var(--blanc); }
.insta .btn:hover{ background:var(--encre); color:var(--blanc); }
.insta__entete{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:clamp(16px, 2.2vw, 24px);
}
.insta__compte{
  display:block; font-family:var(--f-ui); font-weight:800; font-size:.72rem;
  letter-spacing:.06em; text-transform:lowercase; color:var(--rose-fonce);
}
.insta__titre{ font-family:var(--f-titre); font-size:clamp(1.3rem, 2.4vw, 1.9rem); margin:2px 0 0; color:var(--encre); }
.grille--insta{
  display:grid; gap:clamp(10px, 1.4vw, 16px);
  grid-template-columns:repeat(6, 1fr);
}
@media (max-width: 900px){ .grille--insta{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 480px){ .grille--insta{ grid-template-columns:repeat(2, 1fr); } }
.insta-vignette{
  position:relative; display:block; aspect-ratio:1/1; overflow:hidden;
  border-radius:16px; border:2px solid rgba(46,26,71,.12);
  background:#FFF9C4;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.insta-vignette img{ width:100%; height:100%; object-fit:cover; display:block; }
a.insta-vignette:hover, a.insta-vignette:focus-visible{
  transform:translateY(-4px); border-color:var(--rose);
  box-shadow:0 12px 26px rgba(46,26,71,.18);
}
.insta-vignette__picto{
  position:absolute; inset:0; display:grid; place-items:center;
  color:rgba(226,0,95,.42); pointer-events:none;
}
.insta-vignette__picto svg{ width:34%; height:34%; fill:currentColor; }
.insta__note{ margin:clamp(14px, 2vw, 20px) 0 0; font-size:.78rem; line-height:1.55; color:var(--encre); opacity:.72; }

.biblio{ margin-top:clamp(34px, 4.5vw, 54px); }
.biblio--auteur{ margin-top:clamp(22px, 3vw, 34px); }
.biblio--auteur .biblio__titre{ font-size:clamp(1.05rem, 1.7vw, 1.3rem); margin-bottom:12px; }
.biblio--auteur .grille--biblio{ grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:clamp(12px, 1.6vw, 18px); }
.biblio--auteur .biblio-carte__titre{ font-size:.86rem; }
.biblio--auteur .biblio-carte__role{ font-size:.62rem; color:var(--blanc); }
.biblio__titre{ font-family:var(--f-titre); font-size:clamp(1.3rem, 2.4vw, 1.9rem); margin:0 0 4px; }
.biblio__chapo{ margin:0 0 clamp(16px, 2.2vw, 24px); font-size:.9rem; line-height:1.55; opacity:.78; }
.grille--biblio{
  display:grid; gap:clamp(14px, 2vw, 24px);
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.biblio-carte{ display:flex; flex-direction:column; gap:8px; color:var(--encre); }
.biblio-carte .ph{
  aspect-ratio:215/293; border-radius:14px; overflow:hidden;
  border:2px solid rgba(46,26,71,.08); background-color:#F4EEF3;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.biblio-carte .ph > img{ width:100%; height:100%; object-fit:cover; }
.biblio-carte:hover .ph, .biblio-carte:focus-visible .ph{
  transform:translateY(-4px); border-color:var(--rose); box-shadow:0 12px 26px rgba(46,26,71,.16);
}
.biblio-carte__titre{ font-family:var(--f-titre); font-size:.96rem; line-height:1.2; margin:0; }
.biblio-carte__role{ font-family:var(--f-ui); font-weight:800; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--rose); margin:0; }
.biblio-carte:hover .biblio-carte__titre{ color:var(--rose-fonce); }

/* ==========================================================================
   PAGE MESSAGES DE FANS — « Vous aimez les Sisters, dites-leur ! »
   ========================================================================== */
.fans__titre{ font-family:var(--f-titre); font-size:clamp(1.3rem, 2.4vw, 1.9rem); margin:0 0 6px; }
.fans__chapo{ margin:0 0 clamp(16px, 2.2vw, 24px); font-size:.9rem; line-height:1.55; opacity:.78; max-width:62ch; }

/* ==========================================================================
   PAGE AMBASSADEURS (hors menu, accessible par la bande d'appel)
   ========================================================================== */
.amb__titre{
  font-family:var(--f-titre);
  font-size:clamp(1.35rem, 2.5vw, 2rem);
  margin:0 0 8px;
}
.amb__chapo{
  margin:0 0 clamp(22px, 3vw, 32px);
  font-size:clamp(.94rem, .5vw + .8rem, 1.02rem); line-height:1.6;
  max-width:64ch; opacity:.82;
}
.amb__grille{
  /* quatre reperes : deux par deux plutot que trois puis un */
  grid-template-columns:1fr;
  gap:clamp(16px, 2.2vw, 26px);
  margin-bottom:clamp(26px, 3.4vw, 40px);
}
.amb__carte{
  position:relative;
  padding:clamp(18px, 2.2vw, 26px);
  padding-top:clamp(28px, 3vw, 36px);
  border-radius:20px; background:#fff;
  border:2px solid rgba(46,26,71,.08);
  border-top:6px solid var(--amb-teinte, var(--rose));
}
.amb__num{
  position:absolute; top:calc(-1 * clamp(14px, 1.6vw, 18px)); left:clamp(16px, 2vw, 24px);
  display:grid; place-items:center;
  width:clamp(30px, 3.2vw, 38px); height:clamp(30px, 3.2vw, 38px);
  border-radius:50%; background:var(--amb-teinte, var(--rose)); color:#fff;
  font-family:var(--f-ui); font-weight:800; font-size:.92rem;
}
.amb__carte h3{
  font-family:var(--f-titre); font-size:clamp(1.02rem, 1.4vw, 1.2rem);
  margin:0 0 8px; line-height:1.2;
}
.amb__carte p{ margin:0; font-size:.9rem; line-height:1.55; opacity:.84; }
@media (min-width: 720px){ .amb__grille{ grid-template-columns:repeat(2, 1fr); } }

.amb__conditions{
  padding:clamp(18px, 2.4vw, 26px);
  border-radius:20px; background:rgba(123, 39, 144, .06);
  margin-bottom:clamp(26px, 3.4vw, 40px);
}
.amb__conditions h3{
  font-family:var(--f-titre); font-size:clamp(1.05rem, 1.5vw, 1.25rem); margin:0 0 10px;
}
.amb__conditions ul{ margin:0; padding-left:1.1em; }
.amb__conditions li{ margin-bottom:7px; font-size:.92rem; line-height:1.55; }
.amb__conditions li:last-child{ margin-bottom:0; }
.amb__mention{
  margin:14px 0 0; font-size:.76rem; line-height:1.5; opacity:.55; font-style:italic;
}
.amb__form{ margin-bottom:clamp(26px, 3.4vw, 40px); }
/* la ligne de case a cocher ne doit pas heriter de la hauteur de base des
   blocs de formulaire (flex-basis 220px) */
.amb__form .fans__bloc--case{ flex:0 0 auto; }
.amb__case{
  display:flex; align-items:flex-start; gap:9px;
  font-size:.88rem; line-height:1.5; cursor:pointer;
}
.amb__case input{ margin-top:3px; width:16px; height:16px; flex:0 0 auto; accent-color:var(--rose); }

/* le visuel du heros, cale a gauche comme sur les autres rubriques */
@media (min-width: 861px){
  body[data-vue="ambassadeur"] .heros__decoupe{
    aspect-ratio:855/898; height:min(64%, 400px); width:auto;
    /* la carte blanche remonte sur le heros : le visuel se pose sur son bord */
    left:auto; right:calc(50% + 14px); bottom:clamp(40px, 7vw, 90px);
  }
  body[data-vue="ambassadeur"] .heros__decoupe > img{ width:100%; height:100%; object-fit:contain; object-position:center bottom; }
}

/* Le parle Sisters : deux blocs (les marinades, le glossaire) dans la meme page */
.expressions__titre{
  font-family:var(--f-titre);
  font-size:clamp(1.35rem, 2.5vw, 2rem);
  text-align:center; margin:0 0 6px;
}
.expressions__chapo{
  margin:0 auto clamp(18px, 2.4vw, 26px);
  text-align:center; max-width:56ch;
  font-size:.9rem; line-height:1.55; opacity:.78;
}
.fans-form{
  /* pas de fond : le formulaire se pose directement sur la carte blanche */
  background:transparent; border-radius:0;
  padding:0 0 clamp(18px, 2.4vw, 30px);
}
.fans__form{ display:flex; flex-direction:column; gap:14px; }
.fans__duo{ display:flex; flex-wrap:wrap; gap:14px; }
.fans__bloc{ flex:1 1 220px; margin:0; display:flex; flex-direction:column; gap:5px; position:relative; }
.fans__label{
  font-family:var(--f-ui); font-weight:800; font-size:.7rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--encre); opacity:.72;
}
.fans__option{ text-transform:none; letter-spacing:0; font-weight:600; opacity:.75; }
.fans__champ{
  font:inherit; font-size:.95rem; width:100%;
  padding:.72em 1.1em;
  border:2px solid rgba(46,26,71,.14); border-radius:18px;
  background:var(--blanc); color:var(--encre);
}
.fans__champ:focus{ outline:none; border-color:var(--rose); }
.fans__champ--texte{ border-radius:18px; resize:vertical; min-height:110px; line-height:1.5; }
.fans__compteur{
  align-self:flex-end; margin-top:4px;
  font-family:var(--f-ui); font-weight:800; font-size:.68rem; opacity:.5;
}
.fans__form .btn{ align-self:flex-start; }
.fans__retour{ margin:14px 0 0; font-family:var(--f-ui); font-weight:800; font-size:.86rem; }
.fans__retour[data-etat="erreur"]{ color:#C4003F; }
.fans__retour[data-etat="ok"]{ color:#0C7A52; }

.grille--fans{
  display:grid; gap:clamp(26px, 3.4vw, 46px) clamp(24px, 3vw, 44px);
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  margin-bottom:clamp(24px, 3.2vw, 38px);
}
.fans-vide{
  grid-column:1 / -1; text-align:center;
  padding:clamp(26px, 4vw, 44px);
  border:2px dashed rgba(46,26,71,.18); border-radius:20px;
  font-size:.9rem; line-height:1.6; opacity:.7;
}
.fans-message{
  /* pas de cartouche : un temoignage se lit comme une citation posee sur le
     fond de page, ouverte par un guillemet a la couleur du message. */
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center;
  background:none; border:0; border-radius:0;
  padding:clamp(34px, 3.6vw, 46px) clamp(4px, 1vw, 14px) 0;
}
.fans-message::before{
  content:'\00AB';
  position:absolute; left:50%; transform:translateX(-50%); top:0;
  font-family:var(--f-texte); font-weight:600;
  font-size:clamp(2.1rem, 3vw, 2.7rem); line-height:1;
  color:var(--teinte, var(--rose)); opacity:.5;
  pointer-events:none;
}
.fans-message__texte{
  font-family:var(--f-texte); font-size:clamp(.95rem, .5vw + .8rem, 1.02rem);
  line-height:1.6; margin:0;
}
.fans-message__auteur{
  margin:auto auto 0; font-style:normal; font-family:var(--f-ui); font-weight:800; font-size:.76rem;
  color:var(--teinte, var(--rose));
}

.fans-moderation{
  display:flex; gap:clamp(14px, 2vw, 20px); align-items:flex-start;
  padding:clamp(18px, 2.4vw, 26px);
  border-radius:20px; background:rgba(46,26,71,.05);
}
.fans-moderation__picto{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:50%; background:var(--rose);
}
.fans-moderation__picto svg{ width:23px; height:23px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fans-moderation h3{ font-family:var(--f-titre); font-size:1.06rem; margin:0 0 5px; }
.fans-moderation p{ margin:0; font-size:.86rem; line-height:1.55; opacity:.8; }

.making{ padding-inline:0; }
.making__titre{ font-family:var(--f-titre); font-size:clamp(1.4rem, 2.6vw, 2rem); margin:0 0 6px; }
.making__titre ~ .making__titre{ margin-top:clamp(34px, 4.5vw, 54px); }
.making__chapo{ margin:0 0 clamp(18px, 2.4vw, 26px); font-size:.92rem; line-height:1.55; opacity:.78; max-width:60ch; }
.grille--making{
  display:grid; gap:clamp(16px, 2.2vw, 28px);
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}
.making-carte{ display:flex; flex-direction:column; gap:10px; color:var(--encre); }
.making-carte__vignette{
  position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  border:2px solid rgba(46,26,71,.08); background-color:#2A1B3F;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.making-carte__vignette > img{ width:100%; height:100%; object-fit:cover; }
.making-carte:hover .making-carte__vignette,
.making-carte:focus-visible .making-carte__vignette{
  transform:translateY(-4px); border-color:var(--rose);
  box-shadow:0 12px 26px rgba(46,26,71,.18);
}
.making-carte__lecture{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.making-carte__lecture svg{ width:clamp(42px, 18%, 56px); height:auto; }
.making-carte__titre{ font-family:var(--f-titre); font-size:1rem; line-height:1.24; margin:0; }
.making-carte:hover .making-carte__titre{ color:var(--rose-fonce); }

.pistes{
  display:grid; grid-template-columns:minmax(0, 1fr);
  gap:12px; margin:0 0 clamp(26px,3.4vw,40px); padding:0; list-style:none;
}
.piste{
  display:flex; align-items:center; gap:clamp(12px,1.8vw,20px); flex-wrap:wrap;
  padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,24px);
  border:2px solid rgba(46,26,71,.08); border-radius:18px; background:#fff;
  min-width:0;                 /* le lecteur ne doit jamais élargir la carte */
}
.piste__note{
  display:grid; place-items:center; flex:none;
  width:42px; height:42px; border-radius:50%; background:var(--rose);
}
.piste__note svg{ width:21px; height:21px; fill:none; stroke:#fff; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.piste__titre{ font-family:var(--f-titre); font-size:1.02rem; line-height:1.2; margin:0; min-width:0; overflow-wrap:anywhere; }
.piste__titre small{ display:block; font-family:var(--f-ui); font-weight:700; font-size:.74rem; opacity:.6; margin-top:3px; }
.piste audio{ flex:1 1 260px; min-width:0; max-width:100%; height:38px; }
@media (max-width: 860px){
  .piste{ gap:10px; }
  .piste audio{ flex:1 1 100%; width:100%; }
}
.source-note{ font-size:.8rem; line-height:1.55; opacity:.7; margin:0 0 clamp(30px,4vw,48px); }
.source-note a{ color:var(--rose-fonce); text-decoration:underline; }

.fiche-technique{ margin-top:clamp(20px, 2.6vw, 30px); }
.fiche-technique h2{ font-size:clamp(1.1rem, 1.8vw, 1.4rem); margin-bottom:14px; }
.fiche-technique dl{
  display:grid; gap:10px clamp(18px, 3vw, 40px); margin:0;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.fiche-technique dl > div{ padding:12px 16px; border-radius:14px; background:rgba(46,26,71,.045); }
.fiche-technique dt{
  font-family:var(--f-ui); font-weight:800; font-size:.66rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--rose); margin-bottom:3px;
}
.fiche-technique dd{ margin:0; font-size:.94rem; }


/* ==========================================================================
   PAGE BD ET LIVRES — mise en page d'après la maquette
   ========================================================================== */
/* Visuel en pleine largeur derrière, dégradé à droite pour la lisibilité du texte */
.bd-une{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:clamp(540px, 50vw, 680px);
  padding-block:clamp(112px, 12vw, 150px) clamp(40px, 5vw, 64px);
}
.bd-une__grille{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(20px, 3vw, 40px); align-items:center;
}
.bd-une__grille{ grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); }
.bd-une__texte{ grid-column:2; }
.bd-une__texte h1{ white-space:nowrap; font-size:clamp(2rem, 4.6vw, 3.9rem); }
.bd-une__visuel{
  position:absolute; inset:0; z-index:0; margin:0;
  border-radius:0; box-shadow:none;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.4) 80%, rgba(0,0,0,0) 92%);
          mask-image:linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.4) 80%, rgba(0,0,0,0) 92%);
}
.bd-une__visuel > img{ width:100%; height:100%; object-fit:cover; object-position:30% 45%; }
@media (min-width: 761px){ .bd-une__visuel > img{ width:110%; margin-left:-12%; } }
.bd-une::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to left,
    rgba(251,238,246,.96) 0%, rgba(251,238,246,.90) 30%,
    rgba(251,238,246,.55) 46%, rgba(251,238,246,0) 62%);
}
.bd-une__texte h1{ margin:.1em 0 .3em; }
.bd-une__texte > p{ margin:0 0 20px; }

.bd-nouveaute{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center;
  background:var(--blanc); border-radius:24px; padding:18px 22px;
  box-shadow:var(--ombre);
}
.bd-nouveaute__couv{
  width:clamp(74px, 8vw, 92px); padding:0; border:0; background:none; cursor:pointer;
  transition:transform .18s ease;
}
.bd-nouveaute__couv .ph{ aspect-ratio:220/295; border-radius:6px; box-shadow:0 6px 14px rgba(75,34,96,.22); }
.bd-nouveaute__couv:hover, .bd-nouveaute__couv:focus-visible{ transform:translateY(-3px) rotate(-2deg); }
.bd-nouveaute__badge{
  display:inline-block; background:var(--jaune); color:var(--encre);
  font-family:var(--f-ui); font-weight:800; font-size:.72rem;
  padding:.3em .8em; border-radius:999px;
}
.bd-nouveaute__titre{ font-size:clamp(1.15rem, 1.8vw, 1.45rem); margin:8px 0 12px; line-height:1.15; }
.bd-nouveaute__actions{ display:flex; flex-wrap:wrap; gap:10px; }

.btn--contour{ background:transparent; color:var(--rose); border-color:var(--rose); cursor:pointer; }
button.btn{ cursor:pointer; }

.bd-niouze{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--blanc); border-radius:20px; padding:14px 14px 14px 24px;
  box-shadow:0 8px 22px rgba(75,34,96,.08);
}
.bd-niouze p{ margin:0; font-family:var(--f-ui); font-weight:800; }

.bd-depart{ padding-block:clamp(48px, 6vw, 72px) 0; }
.bd-depart h2{ margin:0 0 18px; }
.bd-depart__grille{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.bd-depart__carte{
  background:var(--blanc); border-radius:20px; padding:20px;
  box-shadow:0 8px 22px rgba(75,34,96,.08);
  display:flex; flex-direction:column; align-items:flex-start;
}
.bd-depart__picto{
  display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background:var(--rose-pale); margin-bottom:14px;
}
.bd-depart__picto svg{ width:22px; height:22px; fill:none; stroke:var(--rose-fonce); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.bd-depart__carte h3{ font-family:var(--f-ui); font-weight:800; font-size:1rem; margin:0 0 6px; }
.bd-depart__carte p{ font-size:.9rem; margin:0 0 12px; flex:1; }
.bd-depart__lien{
  font-family:var(--f-ui); font-weight:800; font-size:.85rem; color:var(--rose-fonce);
  background:none; border:0; padding:0; cursor:pointer; text-decoration:none;
  min-height:44px; display:inline-flex; align-items:center;
}
.bd-depart__lien:hover, .bd-depart__lien:focus-visible{ text-decoration:underline; }

.carte-contenu--bd{ margin-top:clamp(36px, 5vw, 56px); }
.bd-infos{
  display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:20px; align-items:center;
  background:#FBE7F1; border-radius:20px; padding:clamp(18px, 2.4vw, 26px);
  margin-bottom:clamp(22px, 3vw, 32px);
}
.bd-infos__texte p{ margin:0 0 .7em; font-size:.95rem; }
.bd-infos__texte p:last-child{ margin-bottom:0; }
.bd-infos__rdv{ font-family:var(--f-ui); font-weight:800; color:var(--rose-fonce); }
.bd-infos__puces{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.bd-infos__puces li{ background:var(--blanc); border-radius:999px; padding:.4em .9em; font-size:.82rem; }

.grille--tomes{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
.grille--tomes:not(.est-deplie) .couverture:nth-child(n+11){ display:none; }
/* Romans : 2 rangées visibles, « Voir les … romans » déplie le reste */
.grille--repliable:not(.est-deplie) .couverture:nth-child(n+11){ display:none; }
@media (max-width: 980px){ .grille--repliable:not(.est-deplie) .couverture:nth-child(n+7){ display:none; } }
@media (max-width: 640px){ .grille--repliable:not(.est-deplie) .couverture:nth-child(n+7){ display:none; } }
.grille--tomes .couverture{ position:relative; text-align:center; }
.grille--tomes .couverture__titre{ margin-top:10px; }
.couverture__sous{ display:block; font-size:.8rem; margin-top:2px; }
.couverture__nouveau{
  position:absolute; z-index:2; top:8px; left:8px;
  background:var(--jaune); color:var(--encre);
  font-family:var(--f-ui); font-weight:800; font-size:.7rem;
  padding:.25em .7em; border-radius:999px; box-shadow:0 3px 8px rgba(75,34,96,.2);
}

.bd-fin{
  display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:clamp(20px, 4vw, 56px); align-items:center;
  padding-block:clamp(48px, 7vw, 80px) 0;
}
.bd-fin__visuel{ aspect-ratio:1000/600; background-color:transparent; background-image:none; border-radius:0; }
.bd-fin__visuel > img{ object-fit:contain; }
.bd-fin__texte h2{ margin:0 0 .4em; }
.bd-fin__texte p{ margin:0 0 20px; }

@media (max-width: 980px){
  .bd-depart__grille{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .grille--tomes{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .grille--tomes:not(.est-deplie) .couverture:nth-child(n+9){ display:none; }
}
@media (max-width: 760px){
  .bd-une{ display:block; min-height:0; padding-top:clamp(84px, 22vw, 110px); }
  .bd-une::after{ display:none; }
  .bd-une__visuel{ position:relative; inset:auto; aspect-ratio:16/10; margin:0 var(--gouttiere) 18px; border-radius:20px; }
  .bd-une__texte{ grid-column:auto; }
  .bd-une__grille, .bd-infos, .bd-fin{ grid-template-columns:1fr; }
  .bd-une__texte, .bd-fin__texte{ text-align:center; }
  .bd-nouveaute{ text-align:left; }
  .bd-niouze{ justify-content:center; text-align:center; padding:16px; }
  .grille--tomes{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .grille--tomes:not(.est-deplie) .couverture:nth-child(n+7){ display:none; }
}
@media (max-width: 420px){
  .bd-depart__grille{ grid-template-columns:1fr; }
  .bd-nouveaute{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .bd-nouveaute__actions{ justify-content:center; }
}

/* Fiches persos : picto devant « Le secret de la BD » et « Côté dessin animé » */
.fiche__sous-titre--picto{ display:flex; align-items:center; gap:8px; }
.fiche__picto{
  width:20px; height:20px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round;
}

/* Lien Instagram de l'orthophoniste (Le parlé Sisters) */
.entretien__insta{ margin:14px 0 0; }
.entretien__insta a{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-family:var(--f-ui); font-weight:800; font-size:.9rem;
  color:var(--rose-fonce); text-decoration:underline; text-underline-offset:3px;
}
.entretien__insta a:hover, .entretien__insta a:focus-visible{ color:var(--encre); }
.entretien__insta svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }
.visuellement-cache{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Accueil : visuel de Noël (neige) — dégradé clair à gauche pour lire le texte */
@media (min-width: 861px){
  .heros--accueil{ background-color:#F4F8FD; }
  /* la scène démarre à 22 % : les Sisters passent à droite du texte */
  .heros--accueil .heros__fond{ left:22%; }
  .heros--accueil .heros__fond > img{ object-position:center 58%; }
  .heros--accueil::after{
    background:linear-gradient(90deg,
      rgba(244,248,253,1) 0%, rgba(244,248,253,.97) 30%,
      rgba(244,248,253,.82) 42%, rgba(244,248,253,.35) 53%, rgba(244,248,253,0) 62%);
    -webkit-mask-image:none; mask-image:none;
  }
}
@media (max-width: 860px){
  .heros--accueil .heros__fond > img{ object-position:62% 60%; transform:none; }
}

/* Accueil : plus d'effet « déchiré » entre les sections, les blocs se suivent en ligne droite */
.separateur--heros, .separateur--turquoise{ display:none; }

/* Accueil : plus de dessin d'onomatopées derrière la Niouzeletter, fond blanc uni */
body[data-vue="accueil"] .niouze{ background-image:none; }

/* Accueil, « En dessin nanimé » : visuel détouré des Sisters en câlin (format portrait) */
.bloc--turquoise .duo__visuel--calins{
  aspect-ratio:800/1053; width:100%; max-width:340px; margin-inline:auto;
  background-color:transparent; background-image:none; border-radius:0;
}
.bloc--turquoise .duo__visuel--calins > img{ width:100%; height:100%; object-fit:contain; }
@media (min-width: 861px){
  body[data-vue="accueil"] .bloc--turquoise .duo{ grid-template-columns:1fr 1fr; }
  body[data-vue="accueil"] .bloc--turquoise .duo__visuel.duo__visuel--calins{
    aspect-ratio:800/1053; width:100%; max-width:350px; margin-inline:auto;
  }
}
@media (max-width: 860px){
  .bloc--turquoise .duo__visuel--calins{ max-width:250px; }
}

/* Accueil : les bords en biais ne laissent plus voir le fond crème de la page.
   Le bloc prend la couleur de la rubrique voisine (blanc), et l'aplat coloré
   est dessiné par-dessus avec la même pente. */
body[data-vue="accueil"] .bloc--turquoise,
body[data-vue="accueil"] .bloc--violet{
  clip-path:none; background:var(--blanc); position:relative; isolation:isolate;
}
body[data-vue="accueil"] .bloc--turquoise::before,
body[data-vue="accueil"] .bloc--violet::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
}
body[data-vue="accueil"] .bloc--turquoise::before{
  background:var(--turquoise);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--pente)));
}
/* violet : blanc au-dessus (lirécouter), crème en dessous (« Tout l'univers ») */
body[data-vue="accueil"] .bloc--violet{ background:linear-gradient(180deg, var(--blanc) 50%, #FFF8F0 50%); }
body[data-vue="accueil"] .bloc--violet::before{
  background:var(--violet);
  clip-path:polygon(0 var(--pente), 100% 0, 100% calc(100% - var(--pente)), 0 100%);
}

/* Accueil, 2e visuel (photocall) : titre au gabarit du h1, dégradé bleu clair à gauche */
.heros--accueil .heros__titre{ font-size:var(--t-xxl); margin-bottom:.35em; }
@media (min-width: 861px){
  .heros--accueil[data-diapo="1"]{ background-color:#E6F2F7; }
  .heros--accueil[data-diapo="1"] .heros__fond{ left:18%; }
  .heros--accueil[data-diapo="1"] .heros__fond > img{ object-position:center 40%; }
  .heros--accueil[data-diapo="1"]::after{
    background:linear-gradient(90deg,
      rgba(230,242,247,1) 0%, rgba(230,242,247,.97) 30%,
      rgba(230,242,247,.82) 42%, rgba(230,242,247,.35) 53%, rgba(230,242,247,0) 62%);
  }
  /* flèches lisibles sur fond clair */
  .heros--accueil .carrousel-fleche{ color:var(--encre); }
  .heros--accueil .carrousel-puce{ border-color:var(--encre); }
  .heros--accueil .carrousel-puce[aria-current="true"]{ background:var(--encre); }
}
@media (max-width: 860px){
  .heros--accueil .carrousel-puce{ border-color:var(--encre); }
  .heros--accueil .carrousel-puce[aria-current="true"]{ background:var(--encre); }
}

/* Accueil, « En BD à lirécouter » : BD audio plus petite, Sisters au casque plus grandes */
@media (min-width: 861px){
  .bloc--lirecouter .duo{ grid-template-columns:1.25fr .75fr; }
  .bloc--lirecouter .lecteur-bd{ max-width:340px; width:100%; justify-self:center; }
}
.lirecouter__persos{ max-width:560px; }
@media (max-width: 860px){
  .bloc--lirecouter .lecteur-bd{ max-width:260px; margin-inline:auto; }
}

/* Pied de page : liens légaux centrés */
.pied__legal p{ text-align:center; margin-inline:auto; max-width:none; }

/* Menus déroulants (ordinateur) : une passerelle invisible comble l'espace entre
   la rubrique et son sous-menu, pour que le survol ne se perde pas en descendant. */
@media (min-width: 1081px){
  .sous-nav::before{
    content:''; position:absolute; left:-10px; right:-10px;
    top:-16px; height:16px;
  }
}
/* Le sous-menu reste ouvert 300 ms après la sortie du pointeur (classe posée en JS) */
@media (min-width: 1081px){
  .nav__item.est-survole:not(.est-referme) > .sous-nav,
  .pied__item.est-survole > .sous-nav--pied{ display:block; }
}

/* BD audio (accueil) : nouveau packshot détouré — cadre au format du fichier */
.lecteur-bd{ aspect-ratio:842/1100; }
.lecteur-bd > img{ object-fit:contain; }
.lecteur-bd.ph{ border-radius:0; overflow:visible; background:none !important; box-shadow:none; }
/* l'ombre portée passe sur l'image elle-même (sur le cadre, elle laissait un rectangle gris) */
.lecteur-bd{ filter:none; }
.lecteur-bd > img{ filter:drop-shadow(0 14px 22px rgba(32,25,56,.24)) drop-shadow(0 3px 6px rgba(32,25,56,.12)); }

/* BD et livres, onglet « Les amis des Sisters » */
.amis__chapo{ text-align:center; margin:0 auto clamp(18px, 2.6vw, 28px); max-width:56ch; }
.grille--amis .couverture{ text-align:center; }
.grille--amis .couverture__titre{ margin-top:10px; }

/* Onglet « Les amis des Sisters » : encart dialogue Wendy / Marine */
.bd-infos--amis{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.dialogue__ligne{ display:flex; align-items:center; gap:14px; }
.dialogue__ligne--marine{ flex-direction:row-reverse; }
.dialogue__avatar.ph{
  flex:0 0 auto; width:52px; height:52px; margin:0; border-radius:50%;
  background:none !important; overflow:visible;
}
.dialogue__avatar > img{ width:100%; height:100%; object-fit:contain; }
.dialogue__bulle{
  margin:0; background:var(--blanc); border-radius:18px; padding:10px 16px;
  font-size:.95rem; line-height:1.5; max-width:72ch;
}
.dialogue__ligne--wendy .dialogue__bulle{ border-bottom-left-radius:4px; }
.dialogue__ligne--marine .dialogue__bulle{ border-bottom-right-radius:4px; }
.dialogue__bulle b{ font-family:var(--f-ui); font-weight:800; color:var(--rose-fonce); }
.dialogue__ligne--marine .dialogue__bulle b{ color:#2E8B1E; }
@media (max-width: 560px){
  .dialogue__avatar.ph{ width:40px; height:40px; }
  .dialogue__bulle{ font-size:.9rem; }
}

/* Fiches albums : bouton sous la couverture, détails repliables */
.fiche__colonne{ display:flex; flex-direction:column; align-items:stretch; gap:16px; }
.fiche__bouton{ text-align:center; }
.fiche__details{ margin:4px 0 0; border-top:2px solid rgba(46,26,71,.1); }
.fiche__details summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  min-height:44px; padding:6px 0;
  font-family:var(--f-ui); font-weight:800; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--rose-fonce);
}
.fiche__details summary::-webkit-details-marker{ display:none; }
.fiche__details summary::after{
  content:''; width:8px; height:8px; margin-right:6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .2s ease;
}
.fiche__details[open] summary::after{ transform:rotate(-135deg); }
.fiche__details summary:focus-visible{ outline:3px solid var(--rose); outline-offset:3px; border-radius:6px; }
.fiche__details .fiche__liste{ margin:4px 0 6px; }
@media (max-width: 680px){
  .fiche__colonne{ max-width:260px; margin-inline:auto; width:100%; }
}

.fiche__colonne .fiche__bouton + .fiche__bouton{ margin-top:-6px; }

.couverture__accroche{ color:var(--encre); font-weight:700; }

.fiche__prix{ font-size:.78em; font-weight:600; opacity:.85; white-space:nowrap; }

/* Dessin nanimé : encart de présentation au-dessus des saisons */
.bd-infos__titre{ font-size:clamp(1.25rem, 2.2vw, 1.6rem); margin:0 0 .45em; }
.bd-infos--anime{ background:#E2F6F8; }
.bd-infos--anime .bd-infos__rdv{ color:#007C8A; }

/* Dessin nanimé : « Les voix des Sisters » */
.casting{ margin-top:clamp(36px, 5vw, 60px); padding-top:clamp(28px, 4vw, 44px); border-top:2px solid rgba(46,26,71,.1); }
.casting__titre{ margin:0 0 .3em; font-size:clamp(1.5rem, 2.8vw, 2.1rem); }
.casting__chapo{ margin:0 0 clamp(20px, 3vw, 32px); max-width:62ch; }
.casting__grille{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(24px, 4vw, 56px); align-items:start; }
.casting__sous-titre{
  font-family:var(--f-ui); font-weight:800; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--rose-fonce); margin:0 0 14px;
}
.casting__liste{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.casting__liste li{ display:grid; grid-template-columns:minmax(130px, auto) 1fr; gap:4px 14px; font-size:.92rem; line-height:1.45; padding-bottom:10px; border-bottom:1px solid rgba(46,26,71,.08); }
.casting__liste li:last-child{ border-bottom:0; padding-bottom:0; }
.casting__liste b{ font-family:var(--f-ui); font-weight:800; }
.casting__savais{ margin-top:clamp(24px, 3.5vw, 40px); background:#FFF6C8; border-radius:20px; padding:clamp(18px, 2.4vw, 26px); }
.casting__savais .casting__sous-titre{ color:#8A5A00; margin-bottom:8px; }
.casting__savais p{ margin:0; }
/* laisse la place au câlin décoratif posé en bas à droite de la carte */
@media (min-width: 981px){ .casting__savais{ max-width:calc(100% - min(30%, 336px) + 40px); } }
@media (max-width: 860px){
  .casting__grille{ grid-template-columns:1fr; }
}
@media (max-width: 480px){
  .casting__liste li{ grid-template-columns:1fr; }
}

/* Dessin nanimé : les Sisters « sortent » du bandeau vert des coulisses */
@media (min-width: 981px){
  body[data-vue="anime"] .coulisses{ position:relative; z-index:3; }
  body[data-vue="anime"] .deco--calin{ bottom:-105px; width:min(30%, 320px); }
}

/* Musique : nouveauté « Sisters pour la vie » */
.nouveaute-musique{
  background:linear-gradient(135deg, #FFE3F0 0%, #FFF1D6 100%);
  border-radius:24px; padding:clamp(20px, 3.4vw, 40px);
  margin-bottom:clamp(28px, 4vw, 48px);
}
.nouveaute__badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--rose); color:var(--blanc);
  font-family:var(--f-ui); font-weight:800; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.35em .9em; border-radius:999px;
}
.nouveaute__badge svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.nouveaute-musique h2{ margin:.35em 0 .3em; font-size:clamp(1.7rem, 3.4vw, 2.6rem); }
.nouveaute__chapo{ max-width:64ch; margin:0 0 clamp(18px, 2.6vw, 28px); }
.lecteur-bientot{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--blanc); border-radius:18px; padding:14px 18px;
  box-shadow:0 8px 22px rgba(75,34,96,.08);
}
.lecteur-bientot__play{
  flex:0 0 auto; display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:rgba(46,26,71,.12); color:rgba(46,26,71,.5);
}
.lecteur-bientot__play svg{ width:22px; height:22px; fill:currentColor; }
.lecteur-bientot__infos{ flex:1 1 220px; min-width:0; }
.lecteur-bientot__titre{ margin:0 0 8px; font-family:var(--f-ui); font-weight:800; }
.lecteur-bientot__titre span{ font-weight:600; opacity:.7; }
.lecteur-bientot__barre{ height:6px; border-radius:999px; background:rgba(46,26,71,.1); overflow:hidden; }
.lecteur-bientot__barre span{ display:block; width:0; height:100%; background:var(--rose); }
.lecteur-bientot__etat{
  font-family:var(--f-ui); font-weight:800; font-size:.8rem; color:var(--rose-fonce);
  background:#FFE3F0; padding:.4em .9em; border-radius:999px; white-space:nowrap;
}
.nouveaute__paroles{ margin-top:clamp(20px, 3vw, 32px); }
.nouveaute__sous-titre{
  font-family:var(--f-ui); font-weight:800; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--rose-fonce); margin:0 0 12px;
}
.nouveaute__paroles .dialogue{ display:flex; flex-direction:column; gap:12px; }
.nouveaute__sortie{ margin-top:clamp(20px, 3vw, 32px); }
.nouveaute__sortie p{ margin:0 0 .6em; max-width:64ch; }
.nouveaute__date{ font-family:var(--f-ui); font-weight:800; font-size:1.05rem; color:var(--rose-fonce); }
.nouveaute__note{ width:18px; height:18px; vertical-align:-3px; fill:none; stroke:var(--rose); stroke-width:2; }
.nouveaute__sortie .btn{ margin-top:8px; }

/* Accueil : le bord gauche du visuel se fond dans le dégradé (plus de démarcation verticale) */
@media (min-width: 861px){
  .heros--accueil .heros__fond{
    -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 10%, rgba(0,0,0,.8) 22%, #000 32%);
            mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 10%, rgba(0,0,0,.8) 22%, #000 32%);
  }
}

/* Voix des Sisters : Anaïs et Kelly côte à côte, puis toute la bande en dessous */
.casting__grille{ grid-template-columns:1fr; gap:clamp(24px, 3.5vw, 40px); }
.casting .voix{ max-width:none; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(18px, 3vw, 40px); }
.casting__liste{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:clamp(20px, 3vw, 40px); }
.casting__liste li:nth-last-child(2){ border-bottom:0; padding-bottom:0; }
@media (max-width: 760px){
  .casting .voix{ grid-template-columns:1fr; }
  .casting__liste{ grid-template-columns:1fr; }
  .casting__liste li:nth-last-child(2){ border-bottom:1px solid rgba(46,26,71,.08); padding-bottom:10px; }
}

/* « Toute la bande » : corps de texte plus petit */
.casting__liste{ gap:8px; }
.casting__liste li{ font-size:.82rem; line-height:1.4; grid-template-columns:minmax(118px, auto) 1fr; padding-bottom:8px; }

/* William : portrait avec fond, il remplit le cadre de la fiche */
.fiche__visuel--perso[data-img="persos/papa.webp"].ph > img{ object-fit:cover; object-position:center bottom; padding:0; }
.fiche__visuel--perso[data-img="persos/papa.webp"].ph{ background:#F8A7CE; }
body .perso__portrait[data-img="persos/papa.webp"] > img{ object-position:center bottom; }
.perso__portrait[data-img="persos/papa.webp"]{ --couleur:#F8A7CE; }

/* ==========================================================================
   PAGE FAQ
   ========================================================================== */
body[data-vue="faq"]{ background:linear-gradient(168deg,#FFE9F4 0%,#FFD3E7 40%,#C9E8FF 100%); }
body[data-vue="faq"] .entete.est-collee{ --barre-fond:#E73791; --barre-texte:#FFFFFF; }
.faq{ display:grid; gap:12px; max-width:860px; margin-inline:auto; }
.faq__item{ background:#FFF5FA; border-radius:18px; border:2px solid transparent; transition:border-color .15s ease; }
.faq__item[open]{ border-color:#FFC4DD; background:var(--blanc); }
.faq__item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:56px; padding:14px 20px;
  font-family:var(--f-ui); font-weight:800; font-size:1.02rem; color:var(--encre);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:'+'; flex:0 0 auto; display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--rose); color:var(--blanc); font-size:1.3rem; line-height:1; transition:transform .2s ease;
}
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item summary:hover{ color:var(--rose-fonce); }
.faq__item summary:focus-visible{ outline:3px solid var(--rose); outline-offset:3px; border-radius:16px; }
.faq__reponse{ padding:0 20px 18px; }
.faq__reponse p{ margin:0 0 12px; line-height:1.6; max-width:70ch; }
.faq__liens{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:0 !important; }
.faq__lien{
  display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:.35em 1em;
  border-radius:999px; background:#FFE3F0; color:var(--rose-fonce);
  font-family:var(--f-ui); font-weight:800; font-size:.84rem; text-decoration:none;
  transition:background-color .15s ease, transform .15s ease;
}
.faq__lien:hover, .faq__lien:focus-visible{ background:#FFF100; color:var(--encre); transform:translateY(-1px); }
.faq__plus{ text-align:center; margin-top:clamp(28px, 4vw, 44px); }
.faq__plus p{ margin:0 0 14px; font-family:var(--f-ui); font-weight:800; }
@media (max-width: 560px){
  .faq__item summary{ font-size:.95rem; padding:12px 16px; }
  .faq__reponse{ padding:0 16px 16px; }
}

/* FAQ : le visuel du header plus petit, il ne déborde plus sur le logo ni sur la carte */
@media (min-width: 861px){
  body[data-vue="faq"] .heros__decoupe{ height:66%; bottom:13%; left:7%; width:min(36%, 420px); }
  /* visuel et texte rapprochés, l'ensemble centré */
  body[data-vue="faq"] .heros__decoupe{ left:calc(50% - min(36%, 420px) - 10px); }
  body[data-vue="faq"] .heros--rubrique .heros__texte{ margin-left:calc(50% + 10px - var(--gouttiere)); margin-right:auto; max-width:min(44%, 500px); --recentrage:0px; transform:none; }
  body[data-vue="faq"] .heros__decoupe > img{ object-fit:contain; object-position:left bottom; }
}
/* Boutique : chaque visuel remplit sa vignette */
.produit .ph > img{ object-fit:cover; padding:0; width:100%; height:100%; }

/* FAQ : pas de carte blanche, chaque question est une carte blanche sur le fond de page */
.carte-contenu--faq{ background:transparent; box-shadow:none; padding-inline:0; }
.carte-contenu--faq .faq__item{ background:var(--blanc); box-shadow:0 6px 18px rgba(75,34,96,.08); }
.carte-contenu--faq .faq__item[open]{ border-color:#FFC4DD; }

.faq__plus{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.faq__plus p{ margin-inline:auto; max-width:none; text-align:center; }

/* Dessin nanimé : texte et Sisters rapprochés au centre du header */
@media (min-width: 861px){
  body[data-vue="anime"] .heros__fond > img{ object-position:62% bottom; }
  body[data-vue="anime"] .heros--rubrique h1{ white-space:nowrap; font-size:clamp(2.2rem, 4.4vw, 3.6rem); }
  body[data-vue="anime"] .heros--rubrique .heros__texte{ margin-left:auto; margin-right:calc(50% - var(--gouttiere) + 10px); max-width:min(46%, 520px); }
  body[data-vue="anime"] .heros--scene::after{
    background:linear-gradient(to right,
      rgba(250,218,233,.92) 0%, rgba(250,218,233,.85) 34%,
      rgba(250,218,233,.45) 48%, rgba(250,218,233,0) 58%);
  }
}

/* Page Niouzeletter : plus de carte blanche ; formulaire centré dans le carré orange */
.carte-contenu--niouze{ background:transparent; box-shadow:none; padding-inline:0; }
.niouze__carte--page{ padding:clamp(28px, 4vw, 44px) !important; }
.niouze__carte--page .niouze__form--complet{ max-width:420px; margin-inline:auto; }
.carte-contenu--niouze .niouze-item{ background:var(--blanc); border-color:transparent; box-shadow:0 6px 18px rgba(75,34,96,.08); }

/* Boutique : produit sans visuel fourni — vignette aux couleurs du site */
.produit .ph.produit__vide{
  display:grid; place-items:center; padding:12%;
  background:linear-gradient(135deg, #FF9A3C 0%, #FF5E7E 100%) !important;
  color:var(--blanc); text-align:center;
  font-family:var(--f-titre); font-size:clamp(1.2rem, 2vw, 1.6rem); line-height:1.1;
}

/* Boutique : le cahier CP (couverture portrait) se voit en entier */
.produit .ph img[src*="9782017370031"]{ object-fit:contain; padding:6%; }

/* Boutique : Halloween (couverture portrait) en entier ; totebag agrandi dans sa vignette */
.produit .ph img[src*="9782821220324"]{ object-fit:contain; padding:6%; }
.produit .ph:has(img[src*="totebag"]){ overflow:hidden; }
.produit .ph img[src*="totebag"]{ transform:scale(1.3); }

/* Boutique : fond blanc uni pour toutes les vignettes, sans hachures */
.produit .ph, .produit .ph.est-chargee, .produit .ph.est-vide{ background:#fff !important; background-image:none !important; }

/* Jeux à télécharger : fond blanc uni pour chaque vignette, sans hachures */
.goodie .ph, .goodie .ph.est-chargee, .goodie .ph.est-vide{ background:#fff !important; background-image:none !important; }

/* Niouzeletter en mobile : champ contenu dans l'encart, visuel sous le bouton (plus de chevauchement) */
@media (max-width: 860px){
  .niouze__carte:not(.niouze__carte--page){
    display:flex; flex-direction:column; align-items:center;
    padding:26px 22px 0 !important; overflow:hidden;
  }
  .niouze__carte:not(.niouze__carte--page) .niouze__form{ flex-direction:column; align-items:stretch; width:100%; max-width:300px; }
  .niouze__carte:not(.niouze__carte--page) .niouze__champ{ flex:0 0 auto; width:100%; max-width:none; min-width:0; box-sizing:border-box; font-size:.9rem; }
  .niouze__carte:not(.niouze__carte--page) .niouze__form .btn{ align-self:center; }
  .niouze__carte:not(.niouze__carte--page) .niouze__perso{
    order:10; position:relative; left:auto; bottom:auto; transform:none;
    width:150px; margin:14px auto 0;
  }
}

/* Fiches : navigation précédent / suivant */
.fiche__nav{
  position:sticky; bottom:-1px; z-index:3;
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:20px calc(-1 * clamp(22px, 3.4vw, 44px)) calc(-1 * clamp(22px, 3.4vw, 44px));
  padding:10px; background:rgba(255,255,255,.96);
  border-top:2px solid rgba(46,26,71,.08);
}
.fiche__nav[hidden]{ display:none; }
.fiche__nav-btn{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:0; background:var(--rose); color:var(--blanc);
  font-size:1.6rem; line-height:1; display:grid; place-items:center;
}
.fiche__nav-btn:hover, .fiche__nav-btn:focus-visible{ background:var(--rose-fonce); }
.fiche__nav-pos{ font-family:var(--f-ui); font-weight:800; font-size:.85rem; min-width:64px; text-align:center; color:var(--encre); }
.fiche.glisse-g #fiche-contenu{ animation:fiche-g .28s ease; }
.fiche.glisse-d #fiche-contenu{ animation:fiche-d .28s ease; }
@keyframes fiche-g{ from{ opacity:0; transform:translateX(40px); } to{ opacity:1; transform:none; } }
@keyframes fiche-d{ from{ opacity:0; transform:translateX(-40px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .fiche.glisse-g #fiche-contenu, .fiche.glisse-d #fiche-contenu{ animation:none; } }

/* Niouzeletter en mobile : pas de visuel des Sisters */
@media (max-width: 860px){
  .niouze__carte:not(.niouze__carte--page){ padding-bottom:22px !important; }
  .niouze__carte:not(.niouze__carte--page) .niouze__perso{ display:none; }
}

/* Fiches : le contenu défile seul, la barre ‹ › reste en bas sur fond blanc plein (rien ne passe dessous) */
.fiche{ display:flex; flex-direction:column; overflow:hidden; padding:0; }
#fiche-contenu{ flex:1 1 auto; min-height:0; overflow:auto; padding:clamp(22px, 3.4vw, 44px); -webkit-overflow-scrolling:touch; }
.fiche__nav{ position:relative; flex:0 0 auto; margin:0; background:#fff; }

/* Fiches : indice « continue à défiler pour la suite », visible une fois en bas */
.fiche__indice{
  position:absolute; left:0; right:0; bottom:100%;
  margin:0; padding:7px 14px 11px; max-width:none;
  font-family:var(--f-ui); font-weight:800; font-size:.74rem;
  text-align:center; color:var(--rose-fonce);
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 62%);
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.fiche__nav.est-au-bout .fiche__indice{ opacity:1; transform:none; }
.fiche__indice::after{ content:'\00a0\2193'; display:inline-block; animation:indice-saute 1.5s ease-in-out infinite; }
@keyframes indice-saute{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }
@media (prefers-reduced-motion: reduce){
  .fiche__indice{ transition:none; }
  .fiche__indice::after{ animation:none; }
}

/* Maxence : dézoomé de 15 % dans sa vignette */
section[data-page="persos"] .perso__portrait[data-cle="maxence"] > img{ transform:scale(.85); transform-origin:50% 0; }

/* Menu : sous-menus déroulants un peu plus petits */
.entete .sous-nav a{ font-size:.76rem; }
@media (max-width: 1080px){ .entete .sous-nav a{ font-size:.86rem; } }

/* Mobile : pas d'ombre portée derrière la pastille ronde de l'en-tête collée */
@media (max-width: 860px){
  .entete.est-collee .logo__duo{ box-shadow:0 0 0 5px var(--barre-fond, #E73791) !important; }
}

/* En-tête collée : arrivée en douceur (glisse depuis le haut + fondu), pastille qui apparaît ensuite */
.entete.est-collee{ animation:entete-arrive .55s cubic-bezier(.22,.61,.36,1) both; }
.entete.est-collee .logo__duo{ animation:pastille-arrive .5s cubic-bezier(.34,1.3,.64,1) .12s both; }
@keyframes entete-arrive{ from{ transform:translateY(-100%); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes pastille-arrive{ from{ transform:scale(.6); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .entete.est-collee, .entete.est-collee .logo__duo{ animation:none; }
}

/* Club VIP : univers en cases à cocher, mention RGPD */
.amb__univers{ border:0; margin:0; padding:0; min-width:0; }
.amb__puces{ display:flex; flex-wrap:wrap; gap:8px 10px; }
.amb__puces label{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  border-radius:999px; background:#FFF0F6; cursor:pointer; font-size:.92rem;
}
.amb__puces label:has(input:checked){ background:#FFD3E7; }
.amb__puces input{ accent-color:var(--rose); width:18px; height:18px; }
select.fans__champ{ appearance:auto; }
.amb__rgpd{ font-size:.78rem; line-height:1.55; opacity:.8; margin:4px 0 14px; max-width:80ch; }
.amb__rgpd a{ color:var(--rose-fonce); text-decoration:underline; }

/* Club VIP : les blocs du formulaire gardent leur hauteur naturelle (pas de vide), largeur pleine */
.amb__form .fans__form > .fans__bloc{ flex:0 0 auto; }
.amb__form .fans__form > .fans__bloc .fans__champ--texte{ width:100%; }

/* Jeu vidéo, mobile : l'illustration (partie gauche du fichier) cadrée au centre, en pleine largeur */
@media (max-width: 860px){
  body[data-vue="jeu-video"] .heros__fond{ aspect-ratio:1/1; }
  body[data-vue="jeu-video"] .heros__fond > img{ object-fit:cover; object-position:3% 60%; }
}
/* Club VIP, mobile : de l'air entre l'intro et la carte blanche */
@media (max-width: 860px){
  body[data-vue="ambassadeur"] .heros--rubrique{ padding-bottom:36px; }
  body[data-vue="ambassadeur"] .heros--rubrique + .conteneur .carte-contenu{ margin-top:0; }
}

/* Dialogues animés : répliques en attente masquées, curseur et points « en train d'écrire » */
.dialogue__ligne{ transition:opacity .3s ease, transform .3s ease; }
.dialogue__ligne--attente{ opacity:0; transform:translateY(8px); }
.dialogue__ligne--ecrit .dialogue__tape::after{
  content:''; display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-2px;
  background:currentColor; animation:dialogue-curseur .8s steps(1) infinite;
}
@keyframes dialogue-curseur{ 50%{ opacity:0; } }
.dialogue__points{ display:inline-flex; gap:4px; vertical-align:middle; }
.dialogue__points i{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.35; animation:dialogue-point 1s ease-in-out infinite; }
.dialogue__points i:nth-child(2){ animation-delay:.15s; }
.dialogue__points i:nth-child(3){ animation-delay:.3s; }
.dialogue__ligne--ecrit .dialogue__points ~ *{ display:none; }
.dialogue__ligne--ecrit:has(.dialogue__points) .dialogue__tape::after{ display:none; }
@keyframes dialogue-point{ 0%,100%{ opacity:.25; transform:none; } 50%{ opacity:.8; transform:translateY(-3px); } }

/* ==========================================================================
   PAGE CONTACT — même gabarit que la page Niouzeletter
   ========================================================================== */
body[data-vue="contact"]{ background:linear-gradient(160deg,#FFE3F1 0%,#FFD0E6 38%,#FFE9C9 74%,#FFF6D6 100%); }
body[data-vue="contact"] .entete.est-collee{ --barre-fond:#E73791; --barre-texte:#FFFFFF; }
body[data-vue="contact"] .niouze{ display:none; }
@media (min-width: 861px){
  body[data-vue="contact"] .heros__decoupe{
    height:min(72%, 440px); width:auto; aspect-ratio:auto;
    left:auto; right:calc(50% + 14px); bottom:0;
  }
  body[data-vue="contact"] .heros__decoupe > img{ width:auto; height:100%; }
}
.contact__form{ display:flex; flex-direction:column; align-items:stretch; gap:14px; text-align:left; margin:0 auto; max-width:520px !important; }
.contact__form .niouze__duo{ display:flex; flex-wrap:wrap; gap:14px; }
.contact__form .niouze__bloc{ flex:1 1 200px; margin:0; display:flex; flex-direction:column; gap:5px; }
.contact__form .btn{ align-self:center; margin-top:4px; }
.contact__message{ border-radius:20px !important; resize:vertical; min-height:150px; line-height:1.5; font-family:inherit; }

.contact__form > .niouze__bloc{ flex:0 0 auto; }
@media (min-width: 861px){ body[data-vue="contact"] .heros__decoupe{ height:min(66%, 400px); bottom:8%; } }

/* Contact : aiguillage vers les pages du site avant le formulaire */
.contact__aiguillage{ max-width:760px; margin:0 auto clamp(26px, 3.6vw, 40px); background:#fff; border-radius:24px; padding:clamp(20px, 3vw, 32px); box-shadow:0 6px 18px rgba(75,34,96,.08); }
.contact__aiguillage-titre{ font-size:clamp(1.2rem, 2.2vw, 1.55rem); margin:0 0 14px; }
.contact__pistes{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.contact__pistes li{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; padding-bottom:12px; border-bottom:1px solid rgba(46,26,71,.08); }
.contact__pistes li:last-child{ border-bottom:0; padding-bottom:0; }
.contact__pistes li > span:first-child{ font-weight:600; }

/* Contact : questions séparées en cartes, comme la FAQ, sous le formulaire */
.contact__aiguillage{ background:transparent; box-shadow:none; padding:0; margin:clamp(32px, 4.5vw, 52px) auto 0; max-width:860px; }
.contact__aiguillage-titre{ text-align:center; margin-bottom:18px; }
.contact__pistes li{
  background:#fff; border-radius:18px; border-bottom:0 !important;
  padding:14px 20px !important; box-shadow:0 6px 18px rgba(75,34,96,.08);
}

/* Contact : espace divisé par deux entre les questions et « Tout l'univers des Sisters » */
section[data-page="contact"] .carte-contenu--niouze{ padding-bottom:0; }
section[data-page="contact"] .bloc--serre{ padding-block:21px; }

/* Accueil : les deux textes du carrousel occupent la même case, le header garde la même hauteur d'une diapo à l'autre */
.heros--accueil .heros__interieur{ display:grid; }
.heros--accueil .heros__interieur > [data-diapo]{ grid-area:1 / 1; align-self:center; }
.heros--accueil .heros__interieur > [data-diapo][hidden]{ display:block; visibility:hidden; }
@media (max-width: 860px){ .heros--accueil .heros__interieur > [data-diapo]{ align-self:start; } }

/* BD et livres, mobile : visuel du header en pleine largeur, sans marges ni coins arrondis */
@media (max-width: 760px){
  .bd-une__visuel{ margin:0 0 18px !important; border-radius:0 !important; width:100%; }
}

/* BD et livres : encart du nouveau tome agrandi */
.bd-nouveaute{ gap:24px; padding:24px 28px; }
.bd-nouveaute__couv{ width:clamp(120px, 12vw, 150px); }
.bd-nouveaute__badge{ font-size:.82rem; }
.bd-nouveaute__titre{ font-size:clamp(1.4rem, 2.4vw, 1.9rem); margin:10px 0 16px; }
@media (max-width: 420px){
  .bd-nouveaute{ padding:22px 18px; }
  .bd-nouveaute__couv{ width:150px; }
}

/* Mobile : filtres sur deux lignes plus serrés (espace entre les lignes réduit d'environ 70 %) */
@media (max-width: 760px){
  .onglets{ row-gap:0 !important; }
  .onglets .onglet{ padding-top:4px; padding-bottom:4px; }
}

/* Apparition des textes au défilement */
.apparition-active .apparait{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--apparait-delai, 0ms);
}
.apparition-active .apparait.est-visible{ opacity:1; transform:none; }
/* la vidéo monte d'un peu plus bas, en fondu */
.apparition-active .video-spot.apparait{ transform:translateY(42px) scale(.97); }
.apparition-active .video-spot.apparait{ transition-duration:.8s; }
@media (prefers-reduced-motion: reduce){
  .apparition-active .apparait{ opacity:1; transform:none; transition:none; }
}

/* Les accroches manuscrites se tapent à la machine à l'arrivée dans l'écran */
.accroche.machine{ position:relative; }
.accroche.machine .machine__fantome{ visibility:hidden; white-space:pre-wrap; }
.accroche.machine .machine__sortie{
  position:absolute; left:0; top:0; width:100%;
  white-space:pre-wrap;
}
.accroche.machine .machine__curseur{
  display:inline-block; width:.08em; height:.95em;
  vertical-align:-.1em; margin-left:.04em;
  background:currentColor; border-radius:1px;
  animation:machine-curseur .75s steps(1,end) infinite;
}
@keyframes machine-curseur{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .accroche.machine .machine__curseur{ display:none; }
}

/* Apparition des images au défilement (zoom, dézoom, gauche, droite en alternance) */
.img-attente{ opacity:0; }
.img-zoom, .img-dezoom, .img-gauche, .img-droite, .img-gauche-large{ animation-duration:.85s; animation-timing-function:cubic-bezier(.22,.61,.36,1); animation-fill-mode:backwards; }
.img-zoom{ animation-name:img-zoom; }
.img-dezoom{ animation-name:img-dezoom; }
.img-gauche{ animation-name:img-gauche; }
.img-droite{ animation-name:img-droite; }
.img-gauche-large{ animation-name:img-gauche-large; animation-duration:1s; }
@keyframes img-zoom{ from{ opacity:0; transform:scale(.82); } to{ opacity:1; } }
@keyframes img-dezoom{ from{ opacity:0; transform:scale(1.18); } to{ opacity:1; } }
@keyframes img-gauche{ from{ opacity:0; transform:translateX(-48px); } to{ opacity:1; } }
@keyframes img-droite{ from{ opacity:0; transform:translateX(48px); } to{ opacity:1; } }
@media (max-width: 760px){
  @keyframes img-gauche{ from{ opacity:0; transform:translateX(-26px); } to{ opacity:1; } }
  @keyframes img-droite{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; } }
  @keyframes img-dezoom{ from{ opacity:0; transform:scale(1.1); } to{ opacity:1; } }
  @keyframes img-gauche-large{ from{ opacity:0; transform:translateX(-60px) scaleX(-1); } to{ opacity:1; transform:translateX(0) scaleX(-1); } }
}
/* le visuel est retourné (scaleX(-1)) : on le garde pendant le glissement */
@keyframes img-gauche-large{ from{ opacity:0; transform:translateX(-110px) scaleX(-1); } to{ opacity:1; transform:translateX(0) scaleX(-1); } }
@media (prefers-reduced-motion: reduce){
  .img-attente{ opacity:1; }
  .img-zoom, .img-dezoom, .img-gauche, .img-droite, .img-gauche-large{ animation:none; }
}