/* ============================================================
   NORMANDY DRUM STUDIOS — COMPOSANTS
   Dépend de nds.css (tokens). Chaque composant est défini UNE fois.
   ============================================================ */

/* ---------- 1. EN-TÊTE ---------- */
.entete{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--duree) var(--courbe),border-color var(--duree),backdrop-filter var(--duree)}
.entete[data-fixe="true"]{background:rgba(11,10,9,.94);backdrop-filter:blur(14px);
  border-bottom-color:var(--t-or)}
.entete__barre{display:grid;grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr);align-items:center;
  gap:clamp(1rem,3vw,3rem);height:var(--entete-h);
  transition:height var(--duree) var(--courbe)}
.entete[data-fixe="true"] .entete__barre{height:var(--entete-h-reduit)}
.entete__menu{display:flex;gap:clamp(.75rem,1.6vw,1.8rem);list-style:none;padding:0;margin:0}
.entete__menu--gauche{justify-content:flex-end}
.entete__menu--droite{justify-content:flex-start}
.entete__menu a{font-family:var(--f-cap);font-weight:var(--g-moyen);font-size:.88rem;
  letter-spacing:var(--ls-menu);color:var(--c-beige);text-decoration:none;
  position:relative;padding-bottom:5px;white-space:nowrap;transition:color var(--duree-courte)}
.entete__menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--c-or);transform:scaleX(0);transform-origin:0;
  transition:transform .35s var(--courbe)}
.entete__menu a:hover{color:var(--c-or-clair)}
.entete__menu a:hover::after,.entete__menu a[aria-current="page"]::after{transform:scaleX(1)}
.entete__menu a[aria-current="page"]{color:var(--c-or-clair)}
.entete__reseau{display:inline-flex;align-items:center;justify-content:center;
  color:var(--c-or);padding-bottom:0;transition:color var(--duree-courte)}
.entete__reseau:hover,.entete__reseau:focus-visible{color:var(--c-or-clair)}
.entete__reseau::after{content:none}

/* ---------- 1bis. RUBAN "RESERVER" (coin superieur, toutes les pages) ---------- */
.ruban-reserver{position:fixed;top:0;left:0;width:170px;height:170px;overflow:hidden;
  z-index:1000;pointer-events:none}
.ruban-reserver a{position:absolute;top:30px;left:-46px;width:220px;padding:.55rem 0;
  background:var(--c-or);color:var(--c-noir);font-family:var(--f-cap);font-weight:var(--g-fort);
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;
  transform:rotate(-45deg);box-shadow:0 2px 8px rgba(0,0,0,.4);text-decoration:none;
  pointer-events:auto;transition:background var(--duree-courte)}
.ruban-reserver a:hover,.ruban-reserver a:focus-visible{background:var(--c-or-clair)}
@media(max-width:640px){
  .ruban-reserver{width:130px;height:130px}
  .ruban-reserver a{top:22px;left:-50px;width:180px;font-size:.6rem;padding:.42rem 0}
}
.entete__cta{font-family:var(--f-cap);font-weight:var(--g-fort);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-noir)!important;
  background:var(--c-or);border-radius:999px;padding:.5rem 1.05rem!important;
  white-space:nowrap;transition:background var(--duree-courte),transform var(--duree-courte)}
.entete__cta::after{content:none!important}
.entete__cta:hover{background:var(--c-or-clair);color:var(--c-noir)!important;transform:translateY(-1px)}
.entete__cta[aria-current="page"]{color:var(--c-noir)!important}
.entete__reseau:hover,.entete__reseau:focus-visible{color:var(--c-or-clair)}
.entete__reseau-svg{display:block}

/* Logo : grand avant défilement, compact ensuite. */
.marque{display:block;text-align:center;text-decoration:none}
.marque img{max-height:calc(var(--entete-h) - 30px);width:auto;max-width:100%;margin:0 auto;
  transition:height var(--duree) var(--courbe);
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.8))}
.entete[data-fixe="true"] .marque img{max-height:calc(var(--entete-h-reduit) - 20px)}
.marque__mention{display:block;font-family:var(--f-cap);font-weight:var(--g-normal);
  font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;color:var(--c-or);
  margin-top:.4rem;overflow:hidden;max-height:2rem;text-indent:.4em;
  transition:opacity .4s,max-height var(--duree),margin-top var(--duree)}
.entete[data-fixe="true"] .marque__mention{opacity:0;max-height:0;margin-top:0}

/* ---------- 2. NAVIGATION MOBILE ---------- */
.declencheur{display:none;justify-self:end;background:none;border:1px solid var(--t-beige);
  color:var(--c-beige);cursor:pointer;padding:.6rem .9rem;min-height:44px;
  font-family:var(--f-cap);font-weight:var(--g-moyen);font-size:.78rem;
  letter-spacing:var(--ls-menu);text-transform:uppercase;
  transition:border-color var(--duree-courte),color var(--duree-courte)}
.declencheur:hover{border-color:var(--c-or);color:var(--c-or-clair)}
.declencheur__barres{display:inline-flex;flex-direction:column;gap:3px;vertical-align:middle;margin-right:.5rem}
.declencheur__barres i{display:block;width:16px;height:1px;background:currentColor;
  transition:transform .35s var(--courbe),opacity .25s}
.declencheur[aria-expanded="true"] .declencheur__barres i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.declencheur[aria-expanded="true"] .declencheur__barres i:nth-child(2){opacity:0}
.declencheur[aria-expanded="true"] .declencheur__barres i:nth-child(3){transform:translateY(-4px) rotate(-45deg)}

.voile-nav{position:fixed;inset:0;z-index:58;background:var(--c-noir);
  opacity:0;visibility:hidden;transition:opacity var(--duree) var(--courbe),visibility var(--duree);
  display:grid;grid-template-rows:auto 1fr auto;
  padding:calc(var(--entete-h-reduit) + 2.5rem) var(--gouttiere) 2.5rem;
  overflow-y:auto;overscroll-behavior:contain}
.voile-nav[data-ouvert="true"]{opacity:1;visibility:visible}
.voile-nav__liste{list-style:none;padding:0;margin:0;display:grid;align-content:center;gap:0}
.voile-nav__liste li{border-bottom:1px solid var(--t-or);opacity:0;transform:translateY(1.4rem);
  transition:opacity .6s var(--courbe),transform .6s var(--courbe)}
.voile-nav[data-ouvert="true"] .voile-nav__liste li{opacity:1;transform:none}
.voile-nav[data-ouvert="true"] .voile-nav__liste li:nth-child(1){transition-delay:.08s}
.voile-nav[data-ouvert="true"] .voile-nav__liste li:nth-child(2){transition-delay:.14s}
.voile-nav[data-ouvert="true"] .voile-nav__liste li:nth-child(3){transition-delay:.20s}
.voile-nav[data-ouvert="true"] .voile-nav__liste li:nth-child(4){transition-delay:.26s}
.voile-nav[data-ouvert="true"] .voile-nav__liste li:nth-child(5){transition-delay:.32s}
.voile-nav[data-ouvert="true"] .voile-nav__liste li:nth-child(6){transition-delay:.38s}
.voile-nav[data-ouvert="true"] .voile-nav__liste li:nth-child(7){transition-delay:.44s}
.voile-nav__liste a{display:grid;grid-template-columns:3.2rem 1fr auto;align-items:baseline;
  gap:1rem;padding:1rem 0;text-decoration:none;color:var(--c-beige);
  font-family:var(--f-titre);font-weight:var(--g-fin);
  font-size:clamp(1.6rem,8vw,2.4rem);line-height:1.05;text-transform:uppercase;
  transition:color var(--duree-courte),padding-left var(--duree-courte)}
.voile-nav__liste a:hover,.voile-nav__liste a:focus-visible{color:var(--c-or-clair);padding-left:.5rem}
.voile-nav__num{font-family:var(--f-cap);font-weight:var(--g-moyen);font-size:.76rem;
  letter-spacing:.2em;color:var(--c-or)}
.voile-nav__fl{font-family:var(--f-cap);font-size:.9rem;color:var(--c-or)}
.voile-nav__pied{display:grid;gap:.5rem;padding-top:2rem;border-top:1px solid var(--t-or);
  font-family:var(--f-texte);letter-spacing:.05em;color:var(--c-beige-doux);font-size:var(--ts-petit)}
.voile-nav__pied a{color:var(--c-beige-doux);text-decoration:none}
.voile-nav__pied a:hover{color:var(--c-or-clair)}
.voile-nav__reseaux{display:flex;gap:1.2rem;margin-top:.4rem}
.voile-nav__reseaux a{display:inline-flex;color:var(--c-or)}
.voile-nav__reseaux a:hover,.voile-nav__reseaux a:focus-visible{color:var(--c-or-clair)}
.voile-nav__reseaux svg{display:block}
body[data-nav-ouverte="true"]{overflow:hidden}

@media(max-width:1080px){
  .entete__barre{grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr)}
  .entete__menu{display:none}
  .marque{grid-column:2;grid-row:1}
  .declencheur{display:inline-flex;align-items:center;grid-column:3;grid-row:1;justify-self:end}
}
@media(min-width:1081px){.voile-nav{display:none}}

/* ---------- 3. DIAPORAMA D'ACCUEIL ----------
   Le voile est plein cadre : plus aucune zone d'ombre à bord visible. */
.diaporama{position:relative;height:100svh;min-height:36rem;overflow:hidden}
.diaporama__pile{position:absolute;inset:0}
.diaporama__vue{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease;margin:0}
.diaporama__vue[data-active="true"]{opacity:1}
.diaporama__vue img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.5) sepia(.18) contrast(1.12) brightness(.85);transform:scale(1.1)}
.diaporama__vue[data-active="true"] img{animation:nds-ken 9s linear forwards}
@keyframes nds-ken{from{transform:scale(1.1)}to{transform:scale(1)}}
.diaporama::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--voile-hero)}
.diaporama__contenu{position:relative;z-index:3;height:100%;display:grid;align-content:center;
  text-align:center;padding-top:var(--entete-h)}
.diaporama__contenu h1,.diaporama__contenu p{
  text-shadow:0 1px 3px rgba(11,10,9,.95),0 4px 22px rgba(11,10,9,.85)}
.diaporama__cmd{position:absolute;left:0;right:0;bottom:2.2rem;z-index:4;
  display:flex;gap:.9rem;justify-content:center;align-items:center}
.diaporama__cmd button{width:2.9rem;height:2.9rem;border:1px solid var(--t-beige);
  background:rgba(11,10,9,.4);color:var(--c-beige);cursor:pointer;font-size:1.1rem;
  transition:background var(--duree-courte),color var(--duree-courte),border-color var(--duree-courte)}
.diaporama__cmd button:hover{background:var(--c-or);color:var(--c-noir);border-color:var(--c-or)}
.diaporama__puces{display:flex;gap:.5rem}
.diaporama__puces button{width:2.4rem;height:24px;padding:0;border:0;cursor:pointer;
  background:none;position:relative;display:flex;align-items:center}
.diaporama__puces button::after{content:"";display:block;width:100%;height:2px;
  background:rgba(228,215,191,.3)}
.diaporama__puces button::before{content:"";position:absolute;left:0;right:0;top:-21px;bottom:-21px}
.diaporama__puces button[aria-current="true"]::after{background:var(--c-or)}

/* ---------- 4. CARTES D'OFFRE ---------- */
.offres{display:grid;gap:1px;background:var(--t-or);border:1px solid var(--t-or)}
@media(min-width:920px){.offres{grid-template-columns:repeat(3,1fr)}}
.offre{background:var(--c-noir);position:relative;overflow:hidden;text-decoration:none;
  color:inherit;display:flex;flex-direction:column;min-height:26rem}
.offre__image{position:absolute;inset:0;z-index:0}
.offre__image img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.7) sepia(.2) brightness(.42);
  transition:transform 1.4s var(--courbe),filter .8s}
.offre:hover .offre__image img,.offre:focus-visible .offre__image img{
  transform:scale(1.06);filter:grayscale(.2) sepia(.1) brightness(.6)}
.offre__contenu{position:relative;z-index:2;margin-top:auto;padding:2rem;
  background:linear-gradient(transparent,rgba(11,10,9,.9) 42%)}
.offre__num{font-family:var(--f-titre);font-weight:var(--g-fin);font-size:2.6rem;
  color:var(--c-or);line-height:1;display:block}
.offre__texte{font-family:var(--f-texte);font-size:.95rem;color:var(--c-beige-doux);margin-top:.6rem}

/* ---------- 5. JOURNAL (index du blog) ---------- */
.journal{display:grid;gap:0;border-top:1px solid var(--t-or)}
.journal__entree{display:grid;gap:var(--e-2);align-items:center;padding:1.9rem 0;
  border-bottom:1px solid var(--t-or);text-decoration:none;color:inherit;
  transition:padding-left .6s var(--courbe),background var(--duree)}
@media(min-width:860px){.journal__entree{grid-template-columns:12rem 1fr 7rem}}
.journal__entree>span{min-width:0}
.bande .journal__entree h2,.journal__entree h2{width:100%;max-width:none;font-size:var(--ts-h3);line-height:1.15;margin:0}
.journal__entree:hover,.journal__entree:focus-visible{padding-left:1.4rem;background:rgba(201,162,39,.07)}
.journal__num{font-family:var(--f-titre);font-weight:var(--g-fin);font-size:1.5rem;color:var(--c-or)}
.journal__num-vignette{display:flex;align-items:center;gap:.7rem}
.journal__vignette{aspect-ratio:16/9;height:3.6rem;width:auto;object-fit:cover;flex:none;display:block}
.journal__extrait{display:block;font-family:var(--f-texte);font-size:.95rem;
  color:var(--c-beige-doux);margin-top:.4rem;max-width:60ch}
.journal__lire{font-family:var(--f-cap);font-weight:var(--g-moyen);font-size:.76rem;
  letter-spacing:.22em;color:var(--c-beige-sourd);text-align:right}

/* ---------- 6. FORMULAIRE ---------- */
.champ{display:grid;gap:.45rem;margin-bottom:var(--e-3)}
.champ label{font-family:var(--f-cap);font-weight:var(--g-moyen);font-size:.8rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-or)}
.champ input,.champ textarea,.champ select{font-family:var(--f-texte);font-weight:400;font-size:1.02rem;
  color:var(--c-beige);background:var(--c-charbon);border:1px solid var(--t-beige);
  padding:.9rem 1rem;min-height:48px;width:100%;
  transition:border-color var(--duree-courte),background var(--duree-courte)}
.champ textarea{min-height:9rem;resize:vertical}
.champ select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22%23E4D7BF%22%3E%3Cpath d=%22M5.5 7.5l4.5 5 4.5-5z%22/%3E%3C/svg%3E');
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem}
.champ input:hover,.champ textarea:hover,.champ select:hover{border-color:rgba(228,215,191,.35)}
.champ input:focus-visible,.champ textarea:focus-visible,.champ select:focus-visible{
  outline:2px solid var(--c-or-clair);outline-offset:2px;border-color:var(--c-or);background-color:#191510}
.champ input[aria-invalid="true"],.champ textarea[aria-invalid="true"],.champ select[aria-invalid="true"]{border-color:#C4553D}
.champ__aide{font-family:var(--f-texte);font-size:.82rem;color:var(--c-beige-sourd)}
.champ--pot{position:absolute;left:-9999px}
.formulaire{max-width:38rem}
.message{padding:1rem 1.2rem;font-family:var(--f-texte);border-left:3px solid}
.message--succes{border-color:var(--c-or);background:rgba(201,162,39,.1);color:var(--c-beige)}
.message--erreur{border-color:#C4553D;background:rgba(196,85,61,.12);color:#EFD3CB}

/* ---------- 7. VIDÉO EN FAÇADE ----------
   Aucune requête vers YouTube avant le clic. Un seul calque d'image. */
.video{position:relative;aspect-ratio:16/9;background:var(--c-charbon);overflow:hidden;
  border:1px solid var(--t-or);margin:0}
.video>picture{position:absolute;inset:0;display:block}
.video img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.72);
  transition:filter var(--duree),transform 1s var(--courbe)}
.video:hover img{filter:grayscale(0) brightness(.88);transform:scale(1.03)}
.video__lecture{position:absolute;inset:0;margin:auto;width:4.6rem;height:4.6rem;
  border-radius:50%;border:1px solid var(--c-or);background:rgba(11,10,9,.6);
  color:var(--c-or);font-size:1.2rem;cursor:pointer;z-index:2;
  transition:background var(--duree),color var(--duree),transform var(--duree)}
.video:hover .video__lecture{background:var(--c-or);color:var(--c-noir);transform:scale(1.06)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- 8. PIED DE PAGE ---------- */
.pied{padding:clamp(2.6rem,5vh,4rem) 0 clamp(1.6rem,3vh,2.4rem);
  border-top:1px solid var(--t-or);background:var(--c-charbon)}
.consentement{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--c-noir);border-top:1px solid var(--t-or-fort);padding:1.1rem clamp(1rem,3vw,2rem);display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;box-shadow:0 -4px 20px rgba(0,0,0,.4)}
.consentement[hidden]{display:none}
.consentement p{margin:0;font-size:.86rem;line-height:1.5;color:var(--c-beige-doux);max-width:60ch}
.consentement p a{color:var(--c-or-clair)}
.consentement__actes{display:flex;gap:.7rem;flex-shrink:0}
.consentement__actes button{font-family:var(--f-cap);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;padding:.6rem 1.2rem;cursor:pointer;border-radius:2px;border:1px solid var(--t-or)}
.consentement__actes button[data-choix="refuser"]{background:transparent;color:var(--c-beige-doux)}
.consentement__ok{background:var(--c-or);border-color:var(--c-or);color:var(--c-noir);font-weight:600}
.pied__cols{display:grid;gap:2.6rem}
@media(min-width:820px){.pied__cols{grid-template-columns:2fr 1fr 1fr}}
.pied__credit{margin-top:1.4rem;padding-top:1rem;border-top:1px solid rgba(201,162,39,.18)}
.pied__credit a{display:inline-flex;align-items:center;gap:.6rem;transition:color var(--duree-courte)}
.pied__credit img{display:block;width:46px;height:46px;transition:filter var(--duree-courte);animation:nds-logo-pulse 3.4s ease-in-out infinite}
.pied__credit span{font-size:.74rem;color:var(--c-beige-sourd);transition:color var(--duree-courte)}
.pied__credit a:hover img,.pied__credit a:focus-visible img{
  filter:sepia(1) saturate(6) hue-rotate(-12deg) brightness(1.15)}
.pied__credit a:hover span,.pied__credit a:focus-visible span{color:var(--c-or-clair)}
@keyframes nds-logo-pulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(201,162,39,0))}
  50%{transform:scale(1.07);filter:drop-shadow(0 0 5px rgba(201,162,39,.55))}
}
.pied-titre{font-family:var(--f-cap);font-weight:var(--g-fort);font-size:.78rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--c-or);margin-bottom:1.1rem;
  text-indent:.28em}
.pied p,.pied a{font-family:var(--f-texte);font-weight:400;color:var(--c-beige-doux);line-height:1.2;
  text-decoration:none;font-size:var(--ts-petit)}
.pied ul{list-style:none;padding:0;display:grid;gap:.05rem}
.pied a:hover{color:var(--c-or-clair)}
.bandeau{background:var(--c-or);color:var(--c-noir);padding:.4rem 1rem;
  font-family:var(--f-cap);font-weight:var(--g-fort);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;position:relative;z-index:70}

/* ============================================================
   PAGES INTÉRIEURES — composition refaite.
   Trois principes :
   1. le hero de page a sa propre hauteur, il ne passe jamais
      sous l'en-tête et n'écrase jamais le titre ;
   2. le contenu est découpé en BANDES alternées, pas en une
      colonne de paragraphes ;
   3. un calque décoratif est confiné à SA bande : il ne peut
      structurellement plus recouvrir une autre section.
   ============================================================ */

/* ---------- 9. HERO DE PAGE ---------- */
.cap{position:relative;min-height:var(--h-d,clamp(26rem,54vh,38rem));display:flex;align-items:flex-end;
  overflow:hidden;background:var(--c-charbon);
  padding-top:calc(var(--entete-h) + 2rem)}
.cap__fond{position:absolute;inset:0;z-index:0}
.cap__fond img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) sepia(.15) brightness(.5)}
.cap::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,10,9,.92) 0%,rgba(11,10,9,.35) 38%,rgba(11,10,9,.82) 82%,var(--c-noir) 100%),
    linear-gradient(90deg,rgba(11,10,9,.42) 0%,transparent 62%)}
.cap__contenu{position:relative;z-index:2;width:100%;max-width:var(--largeur);margin:0 auto;
  padding:0 var(--gouttiere) clamp(2.6rem,6vw,4.5rem)}
/* Hauteurs personnalisees par taille d'ecran (--h-d/--h-t/--h-m). Si une
   variable n'est pas definie, on retombe sur la valeur du cran superieur,
   puis sur la valeur par defaut : aucune regression si rien n'est regle. */
@media(max-width:1024px){
  .cap{min-height:var(--h-t,var(--h-d,clamp(26rem,54vh,38rem)))}
  .bande[style*="--h-"]{min-height:var(--h-t,var(--h-d,auto))}
}
@media(max-width:640px){
  .cap{min-height:var(--h-m,var(--h-t,var(--h-d,clamp(26rem,54vh,38rem))))}
  .bande[style*="--h-"]{min-height:var(--h-m,var(--h-t,var(--h-d,auto)))}
}
.bande[style*="--h-"]{min-height:var(--h-d,auto);display:flex;align-items:center}
/* Image de contenu dans le flux (blocs image "mode: flux"). */
.image-flux{margin:var(--e-4) 0}
.image-flux img{width:100%;height:auto;display:block}

/* Bande "Ma vision" (a-propos) : texte a gauche, videos a droite des 1000px.
   Cible uniquement les bandes qui contiennent reellement une grille de videos
   ET du texte — les pages listing (videos, cours gratuits) n'ont pas de texte
   dans la meme bande et gardent donc leur grille pleine largeur. */
@media(min-width:1000px){
  .bande__inter:has(>.grille-videos):has(>[data-zone*="paragraphe"]){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
  .bande__inter:has(>.grille-videos):has(>[data-zone*="paragraphe"])>.grille-videos{
    grid-column:2;grid-row:1/99;grid-template-columns:1fr;position:sticky;top:calc(var(--entete-h) + 2rem)}
  .bande__inter:has(>.grille-videos):has(>[data-zone*="paragraphe"])>:not(.grille-videos){
    grid-column:1}
}

.cap h1{font-family:var(--f-titre);font-weight:var(--g-fin);text-transform:uppercase;
  font-size:clamp(2.3rem,1rem + 4.6vw,5rem);line-height:1;color:var(--c-beige);
  margin:0;max-width:16ch;text-shadow:0 2px 24px rgba(11,10,9,.95)}
.cap__chapeau{font-family:var(--f-texte);font-size:clamp(1.05rem,1rem + .5vw,1.3rem);
  line-height:1.7;color:var(--c-beige-doux);max-width:54ch;margin-top:1.6rem;
  text-shadow:0 1px 12px rgba(11,10,9,.9)}
.fil{font-family:var(--f-cap);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-beige-sourd);margin-bottom:1.4rem}
.fil a{color:var(--c-beige-doux);text-decoration:none}
.fil a:hover{color:var(--c-or-clair)}

/* ---------- 10. BANDES DE CONTENU ---------- */
.bande{position:relative;padding:var(--e-6) 0;border-top:0}
/* overflow:hidden et isolation:isolate retires le 19/08/2026 : ils decoupaient
   les images decoratives des qu'elles depassaient de la section et enfermaient
   leur superposition. Les sections qui ont VRAIMENT besoin de rogner leur
   contenu le declarent explicitement (.bande--rogne). */
.bande--rogne{overflow:hidden}
.bande--charbon{background:var(--c-charbon)}
.bande--serree{padding:var(--e-5) 0}
.bande__inter{position:relative;z-index:2;max-width:var(--largeur);margin:0 auto;
  padding:0 var(--gouttiere)}
.bande__inter--lecture{max-width:calc(var(--lecture) + 2 * var(--gouttiere))}

/* Titres de bande : UN seul dispositif graphique, jamais de filets empilés. */
.bande h2{font-family:var(--f-titre);font-weight:var(--g-fin);text-transform:uppercase;
  font-size:clamp(1.7rem,1rem + 2.4vw,3.1rem);line-height:1.06;color:var(--c-beige);
  margin:0 0 var(--e-3);max-width:42ch}
.bande h3{font-family:var(--f-titre);font-weight:var(--g-fort);font-size:var(--ts-h3);
  text-transform:uppercase;letter-spacing:.02em;color:var(--c-or-clair);margin:var(--e-4) 0 .8rem}
/* La zone elle-meme reprend le meme habillage typographique que ses <p> :
   un texte pas encore coupe en paragraphes (avant toute frappe d'Entree,
   ou un bloc court importe sans <p>) doit avoir exactement le meme rendu
   qu'apres. Sans cette regle, la police, la couleur et la largeur de ligne
   changeaient visiblement au moment ou l'utilisateur ajoutait un saut de
   paragraphe (signale par Emmanuel, 27/08/2026). */
.bande__inter>div[data-zone]{font-family:var(--f-texte);font-size:1.06rem;line-height:1.8;
  color:var(--c-beige-doux);max-width:62ch}

/* Page Vincent/A propos : liste "Groupes/Artistes" repartie sur 2
   sous-colonnes a partir de 640px (demande Emmanuel, 27/08/2026) - ciblee
   precisement par sa zone, sans affecter la liste "Enseignement" voisine
   ni aucune autre page. */
@media(min-width:640px){
  ul[data-zone="a-propos.liste.14"]{columns:2;column-gap:1.5rem}
  ul[data-zone="a-propos.liste.14"] li{break-inside:avoid;margin-bottom:.4rem}
}
.bande p{font-family:var(--f-texte);font-size:1.06rem;line-height:1.8;color:var(--c-beige-doux);
  max-width:62ch;margin:0 0 1.15rem}
.bande p:last-child{margin-bottom:0}
.bande p strong,.bande p b{color:var(--c-beige);font-weight:600}
.bande p a,.bande li a,.bande blockquote a,.bande .adresse a{
  color:var(--c-or-clair);text-decoration:underline;text-underline-offset:.2em;
  text-decoration-color:rgba(201,162,39,.45)}
.bande p a:hover,.bande li a:hover{text-decoration-color:currentColor}
/* Les cartes et entrees de liste ne sont jamais soulignees. */
.journal__entree,.journal__entree *,.tuile a,.voix__carte,.temoin,.offre{text-decoration:none}

.bande ul,.bande ol{list-style:none;padding:0;margin:0 0 1.2rem;max-width:62ch}
.bande ul li{position:relative;padding-left:1.7rem;margin-bottom:.75rem;
  font-family:var(--f-texte);font-size:1.02rem;line-height:1.65;color:var(--c-beige-doux)}
.bande ul li::before{content:"";position:absolute;left:0;top:.72em;width:.45rem;height:.45rem;
  background:var(--c-or);transform:rotate(45deg)}
.bande ol:not(.rdv-etapes){counter-reset:pas}
.bande ol:not(.rdv-etapes) li{counter-increment:pas;position:relative;padding-left:2.4rem;margin-bottom:.75rem;
  font-family:var(--f-texte);font-size:1.02rem;line-height:1.65;color:var(--c-beige-doux)}
.bande ol:not(.rdv-etapes) li::before{content:counter(pas,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--f-titre);font-weight:var(--g-fin);font-size:1.05rem;color:var(--c-or)}
@media(min-width:900px){
  .bande--colonnes .bande__inter>ul{columns:2;column-gap:3rem;max-width:none}
  .bande--colonnes .bande__inter>ul li{break-inside:avoid}
  .bande--colonnes .tarifs ul{columns:1}
}
.bande blockquote{border-left:2px solid var(--c-or);padding-left:var(--e-3);margin:var(--e-3) 0;
  font-family:var(--f-titre);font-weight:var(--g-fin);font-size:clamp(1.2rem,2vw,1.6rem);
  line-height:1.5;color:var(--c-beige);max-width:52ch}
.bande .adresse{font-family:var(--f-texte);font-style:normal;color:var(--c-beige-doux)}
.bande .actes{display:flex;gap:1rem;flex-wrap:wrap;margin-top:var(--e-3)}

/* Calques décoratifs : confinés à leur bande, jamais cliquables. */

/* ---------- 11. IMAGE DE RESPIRATION ---------- */
.respiration{position:relative;overflow:hidden;margin:0}
.respiration img{width:100%;height:var(--h-d,clamp(16rem,42vh,30rem));object-fit:cover;
  filter:grayscale(.35) sepia(.1) brightness(.72)}
.respiration__media{display:block;width:100%}
@media(max-width:1024px){.respiration img{height:var(--h-t,var(--h-d,clamp(16rem,42vh,30rem)))}}
@media(max-width:640px){.respiration img{height:var(--h-m,var(--h-t,var(--h-d,clamp(16rem,42vh,30rem))))}}
.respiration figcaption{font-family:var(--f-cap);font-size:.84rem;letter-spacing:.1em;
  color:var(--c-beige-sourd);padding:.8rem var(--gouttiere) 0}

/* ---------- 12. TARIFS ---------- */
.tarifs{border:1px solid var(--t-or);background:var(--c-charbon-clair);
  padding:clamp(1.6rem,4vw,2.6rem);max-width:48rem}
.bande--charbon .tarifs{background:rgba(255,255,255,.025)}
.tarifs h2{font-size:clamp(1.3rem,1rem + 1vw,1.7rem);margin-bottom:1.2rem}
.tarifs ul{margin:0;max-width:none}
.tarifs li{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.07);margin:0}
.tarifs li::before{display:none}
.tarifs li:last-child{border-bottom:0;padding-bottom:0}
.tarif__libelle{font-family:var(--f-texte);font-weight:500;color:var(--c-beige);padding-left:0}
.tarif__prix{font-family:var(--f-titre);font-weight:var(--g-fort);font-size:1.35rem;
  color:var(--c-or-clair);white-space:nowrap;line-height:1}
@media(max-width:560px){.tarifs li{flex-direction:column;align-items:flex-start;gap:.2rem}}

/* ---------- 13. GRILLE DE TÉMOIGNAGES ----------
   Neuf vidéos empilées en pleine largeur devenaient illisibles.
   Elles deviennent une grille de cartes de hauteur égale. */
.temoins{display:grid;gap:clamp(1rem,2.4vw,1.8rem);grid-template-columns:1fr;margin-top:var(--e-3)}
@media(min-width:640px){.temoins{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.temoins{grid-template-columns:repeat(3,1fr)}}
.temoin{display:flex;flex-direction:column;background:var(--c-charbon-clair);
  border:1px solid var(--t-or);text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color var(--duree),transform var(--duree) var(--courbe)}
.bande--charbon .temoin{background:var(--c-noir)}
.temoin:hover,.temoin:focus-visible{border-color:var(--t-or-fort);transform:translateY(-3px)}
.temoin .video{border:0;border-bottom:1px solid var(--t-or)}
.temoin__texte{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.temoin__citation{font-family:var(--f-texte);font-size:.98rem;line-height:1.6;
  color:var(--c-beige-doux);margin:0;quotes:none}
.temoin__bas{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  margin-top:auto;flex-wrap:wrap}
.temoin__nom{font-family:var(--f-cap);font-style:normal;font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-or-clair);text-indent:.2em}
.temoin__voir{font-family:var(--f-cap);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-noir)!important;background:var(--c-or);border-radius:999px;padding:.42rem .8rem;
  white-space:nowrap;text-decoration:none;flex-shrink:0;
  transition:background var(--duree-courte),transform var(--duree-courte)}
.temoin__voir:hover,.temoin__voir:focus-visible{background:var(--c-or-clair);transform:translateY(-1px)}

/* Carrousel de témoignages en accueil */
.voix-carrousel{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--gouttiere) 1.2rem;scrollbar-width:thin;
  scrollbar-color:var(--c-or) transparent}
.voix-carrousel::-webkit-scrollbar{height:6px}
.voix-carrousel::-webkit-scrollbar-thumb{background:rgba(201,162,39,.4)}
.voix__carte{flex:0 0 clamp(15rem,42vw,19rem);scroll-snap-align:start;position:relative;
  display:block;text-decoration:none;overflow:hidden;aspect-ratio:4/5;background:var(--c-charbon)}
.voix__carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--courbe)}
.voix__carte:hover img{transform:scale(1.06)}
.voix__carte::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,10,9,.1) 0%,rgba(11,10,9,.5) 52%,rgba(11,10,9,.95) 100%)}
.voix__lecture{position:absolute;top:1rem;right:1rem;z-index:2;width:2.6rem;height:2.6rem;
  border-radius:50%;background:rgba(11,10,9,.55);border:1px solid rgba(228,215,191,.5);
  color:var(--c-beige);display:flex;align-items:center;justify-content:center;font-size:.85rem}
.voix__texte{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.3rem}
.voix__texte q{display:block;font-family:var(--f-texte);font-size:.9rem;line-height:1.5;
  color:var(--c-beige);quotes:none;margin-bottom:.6rem}
.voix__texte cite{font-family:var(--f-cap);font-style:normal;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-or-clair)}

/* ---------- 14. PAGE TÉMOIGNAGE ---------- */
.temoignage{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media(min-width:960px){.temoignage{grid-template-columns:7fr 5fr}}
.temoignage__mot{font-family:var(--f-titre);font-weight:var(--g-fin);
  font-size:clamp(1.3rem,1rem + 1.4vw,2rem);line-height:1.45;color:var(--c-beige);
  border-left:2px solid var(--c-or);padding-left:var(--e-3);margin:0}
.temoignage__nom{font-family:var(--f-cap);font-size:.86rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-or-clair);margin-top:1.4rem;display:block;text-indent:.24em}

/* ---------- 15. APPEL DE FIN DE PAGE ----------
   Panneau sombre + bouton or : jamais d'or sur or. */
.appel{position:relative;overflow:hidden;background:var(--c-charbon);
  border-top:1px solid var(--t-or);border-bottom:1px solid var(--t-or);
  padding:var(--e-6) 0;text-align:center}
.appel h2{font-family:var(--f-titre);font-weight:var(--g-fin);text-transform:uppercase;
  font-size:clamp(1.7rem,1rem + 2.2vw,2.9rem);line-height:1.08;color:var(--c-beige);
  margin:0 auto;max-width:20ch}
.appel p{font-family:var(--f-texte);color:var(--c-beige-doux);max-width:46ch;
  margin:1.2rem auto 2rem;font-size:1.05rem}
.appel .actes{justify-content:center}

/* ---------- 16. BANDEAU YOUTUBE ----------
   Aplat or, texte et bouton en noir : contraste maximal, lisible de loin. */
.yt{position:relative;overflow:hidden;background:var(--c-or);color:var(--c-noir);
  padding:clamp(3rem,7vw,5rem) 0}
.yt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:
    repeating-linear-gradient(90deg,rgba(11,10,9,.5) 0 1px,transparent 1px 68px),
    radial-gradient(circle at 88% 50%,rgba(11,10,9,.5) 0 22%,transparent 60%)}
.yt__inter{position:relative;z-index:2;max-width:var(--largeur);margin:0 auto;
  padding:0 var(--gouttiere);display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media(min-width:900px){.yt__inter{grid-template-columns:1fr auto}}
.yt .surtitre{color:rgba(11,10,9,.72)}
.yt h2{font-family:var(--f-titre);font-weight:var(--g-massif);text-transform:uppercase;
  font-size:clamp(1.8rem,1rem + 2.8vw,3.4rem);line-height:1.02;color:var(--c-noir);
  margin:0;max-width:18ch}
.yt p{font-family:var(--f-texte);color:rgba(11,10,9,.82);max-width:48ch;
  margin-top:1rem;font-size:1.05rem}
.yt .actes{display:flex;gap:1rem;flex-wrap:wrap;margin-top:0}
.yt__chiffre{font-family:var(--f-titre);font-weight:var(--g-fin);font-size:clamp(3rem,7vw,5.5rem);
  line-height:.9;color:rgba(11,10,9,.9);display:block}

/* ---------- 17. PAGE VIDÉOS ---------- */
.playlist{padding:var(--e-5) 0;border-top:1px solid var(--t-or)}
.playlist:first-of-type{border-top:0}
.playlist__entete{display:flex;justify-content:space-between;align-items:flex-end;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:var(--e-3)}
.playlist__entete h2{margin:0}
.playlist__nb{font-family:var(--f-cap);font-size:.84rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-beige-sourd);white-space:nowrap}
.grille-videos{display:grid;gap:clamp(1rem,2.2vw,1.6rem);grid-template-columns:1fr}
.filtre-videos{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:clamp(2rem,4vw,3rem)}
.filtre-videos__item{display:inline-flex;align-items:center;gap:.6rem;background:transparent;
  border:1px solid var(--t-or);color:var(--c-beige-doux);font-family:var(--f-cap);
  font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;padding:.8rem 1.35rem;
  cursor:pointer;transition:border-color .15s,color .15s,background .15s;border-radius:2px}
.filtre-videos__num{font-weight:var(--g-fort);font-size:.74rem;letter-spacing:.14em;
  color:var(--c-or);transition:color .15s}
.filtre-videos__item[aria-pressed="true"] .filtre-videos__num{color:var(--c-noir)}
.filtre-videos__item:hover{border-color:var(--t-or-fort);color:var(--c-beige)}
.filtre-videos__item[aria-pressed="true"]{background:var(--c-or);border-color:var(--c-or);color:var(--c-noir)}
.filtre-videos__item--tout{font-weight:var(--g-fort);letter-spacing:.1em;padding:.8rem 1.7rem}
@media(max-width:560px){
  .filtre-videos{gap:.6rem}
  .filtre-videos__item{font-size:.8rem;padding:.68rem 1.1rem}
}
@media(min-width:600px){.grille-videos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grille-videos{grid-template-columns:repeat(3,1fr)}}
.tuile{display:flex;flex-direction:column;background:var(--c-charbon-clair);
  border:1px solid var(--t-or);overflow:hidden;
  transition:border-color var(--duree),transform var(--duree) var(--courbe)}
.tuile:hover{border-color:var(--t-or-fort);transform:translateY(-3px)}
.tuile .video{border:0;border-bottom:1px solid var(--t-or)}
.tuile__titre{font-family:var(--f-texte);font-weight:500;font-size:.97rem;line-height:1.45;
  color:var(--c-beige);padding:1rem 1.1rem 1.2rem;margin:0}

/* ---------- 18. ARTICLES ---------- */
.article{max-width:100%}
.article h1{font-family:var(--f-titre);font-weight:var(--g-fin);text-transform:uppercase;
  font-size:clamp(2.1rem,1rem + 3.4vw,3.6rem);line-height:1.04;color:var(--c-beige);margin:0 0 .8rem}
.article__date{font-family:var(--f-cap);font-size:.84rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-beige-sourd);margin-bottom:var(--e-4)}
.article h2{font-family:var(--f-titre);font-weight:var(--g-fin);text-transform:uppercase;
  font-size:clamp(1.5rem,1rem + 1.8vw,2.4rem);color:var(--c-beige);margin:var(--e-5) 0 var(--e-2);clear:both;
  max-width:none}
.article h3{font-family:var(--f-titre);font-weight:var(--g-fort);font-size:var(--ts-h3);
  text-transform:uppercase;color:var(--c-or-clair);margin:var(--e-4) 0 .8rem;clear:both}
.article h4{clear:both}
.article p{font-family:var(--f-texte);font-size:1.08rem;line-height:1.85;
  color:var(--c-beige-doux);margin:0 0 1.2rem;max-width:none}
.article ul,.article ol{margin:0 0 1.4rem;padding:0;list-style:none;max-width:none}
.article ul li{position:relative;padding-left:1.7rem;margin-bottom:.7rem;color:var(--c-beige-doux)}
.article ul li::before{content:"";position:absolute;left:0;top:.72em;width:.45rem;height:.45rem;
  background:var(--c-or);transform:rotate(45deg)}
.article blockquote{border-left:2px solid var(--c-or);padding-left:var(--e-3);margin:var(--e-4) 0;
  font-family:var(--f-titre);font-weight:var(--g-fin);font-size:1.4rem;line-height:1.5;
  color:var(--c-beige)}
.article .video{margin:var(--e-4) 0}
.article figure{margin:var(--e-4) 0}
.article figcaption{font-family:var(--f-cap);font-size:.84rem;letter-spacing:.08em;
  color:var(--c-beige-sourd);margin-top:.6rem}
.article figure.img-gauche{float:left;margin:.3rem 1.8rem 1.2rem 0;max-width:44%}
.article figure.img-droite{float:right;margin:.3rem 0 1.2rem 1.8rem;max-width:44%}
.article figure.img-centre{margin-left:auto;margin-right:auto;max-width:100%}
.article figure.img-petite{max-width:32%}
.article figure.img-moyenne{max-width:55%}
.article figure.img-grande{max-width:80%}
.article figure.img-pleine{max-width:100%}
.article .texte-centre{text-align:center}
.article .texte-droite{text-align:right}
.article .texte-justifie{text-align:justify}
.article figure img{width:100%;height:auto;display:block}
.article__cta{margin:2.2rem 0;text-align:center;clear:both}

/* Navigation video precedente/suivante (page video individuelle, 28/08/2026). */
.nav-video{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media(max-width:640px){.nav-video{grid-template-columns:1fr}}
.nav-video__item{display:flex;align-items:center;gap:.9rem;padding:1rem;
  background:var(--c-charbon-clair);border:1px solid var(--t-or);border-radius:6px;
  text-decoration:none;transition:border-color var(--duree-courte),transform var(--duree-courte)}
.nav-video__item:hover,.nav-video__item:focus-visible{border-color:var(--t-or-fort);transform:translateY(-2px)}
.nav-video__item--suiv{flex-direction:row-reverse;text-align:right}
.nav-video__vignette{width:84px;flex:0 0 auto;aspect-ratio:16/9;object-fit:cover;border-radius:3px;
  transition:filter var(--duree-courte)}
.nav-video__item:hover .nav-video__vignette{filter:brightness(1.1)}
.nav-video__fleche{font-size:1.3rem;line-height:1;color:var(--c-or);flex:0 0 auto}
.nav-video__texte{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.nav-video__label{font-family:var(--f-cap);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-or)}
.nav-video__titre{font-family:var(--f-texte);font-size:.92rem;line-height:1.35;color:var(--c-beige);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nav-video__vide{display:none}
@media(prefers-reduced-motion:reduce){
  .nav-video__item,.nav-video__vignette{transition:none}
  .nav-video__item:hover{transform:none}
}

/* --- Navigation article precedent/suivant (07/09/2026), meme patron que nav-video --- */
.nav-article{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media(max-width:640px){.nav-article{grid-template-columns:1fr}}
.nav-article__item{display:flex;align-items:center;gap:.9rem;padding:1rem;
  background:var(--c-charbon-clair);border:1px solid var(--t-or);border-radius:6px;
  text-decoration:none;transition:border-color var(--duree-courte),transform var(--duree-courte)}
.nav-article__item:hover,.nav-article__item:focus-visible{border-color:var(--t-or-fort);transform:translateY(-2px)}
.nav-article__item--suiv{flex-direction:row-reverse;text-align:right}
.nav-article__vignette{width:84px;flex:0 0 auto;aspect-ratio:3/2;object-fit:cover;border-radius:3px;
  transition:filter var(--duree-courte)}
.nav-article__item:hover .nav-article__vignette{filter:brightness(1.1)}
.nav-article__fleche{font-size:1.3rem;line-height:1;color:var(--c-or);flex:0 0 auto}
.nav-article__texte{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.nav-article__label{font-family:var(--f-cap);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-or)}
.nav-article__titre{font-family:var(--f-texte);font-size:.92rem;line-height:1.35;color:var(--c-beige);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nav-article__vide{display:none}
@media(prefers-reduced-motion:reduce){
  .nav-article__item,.nav-article__vignette{transition:none}
  .nav-article__item:hover{transform:none}
}

@media(max-width:640px){
  .article figure.img-gauche,.article figure.img-droite{float:none;max-width:100%;margin:var(--e-4) 0}
  .article figure.img-petite,.article figure.img-moyenne,.article figure.img-grande{max-width:100%}
}
.galerie{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));
  margin:var(--e-3) 0}
.galerie img{width:100%;aspect-ratio:1;object-fit:cover}
.encadre{border:1px solid var(--t-or);padding:1.5rem;margin:var(--e-4) 0;background:var(--c-charbon)}
.faq{border-top:1px solid var(--t-or);margin:var(--e-4) 0}
.faq details{border-bottom:1px solid var(--t-or)}
.faq summary{cursor:pointer;padding:1.1rem 0;min-height:48px;font-family:var(--f-titre);
  font-weight:var(--g-fort);font-size:1.08rem;text-transform:uppercase;letter-spacing:.02em;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--c-or);font-size:1.4rem;font-weight:var(--g-fin)}
.faq details[open] summary::after{content:"\2013"}
.faq details>div{padding-bottom:1.2rem}

/* ---------- 19. COMPLÉMENTS ---------- */

/* Groupe de boutons — même règle partout. */
.actes{display:flex;gap:1rem;flex-wrap:wrap;margin-top:var(--e-3)}

/* Hero de page sans photo : matière typographique plutôt qu'un aplat vide. */
.cap--sobre{min-height:clamp(18rem,38vh,26rem);background:var(--c-charbon);
  padding-top:calc(var(--entete-h) + 1.5rem)}
.cap--sobre::after{background:
  radial-gradient(90% 120% at 12% 0%,rgba(201,162,39,.14) 0%,transparent 62%),
  linear-gradient(180deg,transparent 60%,var(--c-noir) 100%)}
.cap--sobre::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(201,162,39,.09) 0 1px,transparent 1px 84px)}
.cap .surtitre{text-shadow:0 1px 10px rgba(11,10,9,.9)}

/* Séries d'images de respiration : une, deux ou trois de front. */
.respirations{display:grid;gap:2px;background:var(--t-or)}
@media(min-width:760px){
  .respirations--2{grid-template-columns:1fr 1fr}
  .respirations--3{grid-template-columns:repeat(3,1fr)}
}

/* Portrait rond de l'accueil. */
.portrait-rond{position:relative;width:100%;max-width:24rem;aspect-ratio:1;border-radius:50%;
  overflow:hidden;margin:0 auto;border:1px solid var(--t-or)}
.portrait-rond img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.portrait{grid-template-columns:5fr 7fr!important}}

/* Le titre d'une tuile vidéo n'est pas un titre de section. */
.bande .tuile__titre,.playlist .tuile__titre{font-family:var(--f-texte);font-weight:500;
  font-size:.97rem;line-height:1.45;letter-spacing:0;text-transform:none;color:var(--c-beige);
  padding:1rem 1.1rem 1.2rem;margin:0}
.bande .temoin__nom a{color:var(--c-or-clair);text-decoration:none}
.bande .temoin__nom a:hover{text-decoration:underline;text-underline-offset:.2em}

/* La bande de l'appel ne doit jamais surcharger un titre de section. */
.appel h2::after,.bande h2::after{content:none}

/* ---------- 20. HOMOGENEITE DES CARTES DE TEMOIGNAGE ---------- */
.temoins{align-items:stretch}
.temoin{height:100%}
.temoin__citation{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.temoin .video{flex:0 0 auto}
/* Le sur-titre numerote d'une bande reste discret. */
.bande__inter>.surtitre{margin-bottom:.6rem}

/* ---------- 21. AJUSTEMENTS APRES CONTROLE VISUEL ---------- */
/* Page temoignage : la citation s'aligne sur le haut de la video. */
.temoignage{align-items:start}
.temoignage__mot{margin-top:-.35rem}
/* Un appel a l'action de fin de page reste un vrai bouton, pas un lien discret. */
.temoignage .bouton--creux{background:var(--c-or);border-color:var(--c-or);color:var(--c-noir)}
.temoignage .bouton--creux::before{background:var(--c-noir)}
.temoignage .bouton--creux:hover{color:var(--c-or-clair)}
/* Tuiles video : le titre occupe le bas de la carte, hauteurs egales. */
.tuile{height:100%}
.bande .tuile__titre,.playlist .tuile__titre{margin-top:auto}

/* Un filigrane se fond dans la bande : pas de bord franc sous un paragraphe. */

/* ---------- 22. DEUX COLONNES TITREES (parcours, a-propos) ---------- */
.colonnes-parcours{display:grid;gap:2.4rem;margin-top:var(--e-3)}
@media(min-width:760px){.colonnes-parcours{grid-template-columns:1fr 1fr}}
.colonnes-parcours__col h3{margin-top:0}
.colonnes-parcours__col ul{max-width:none}
.colonnes-parcours__col li.avec-vignette{display:flex;align-items:center;gap:.8rem;padding-left:0}
.colonnes-parcours__col li.avec-vignette::before{content:none}
.groupe-vignette{width:2.6rem;height:2.6rem;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--t-or)}

/* ---------- 23. IMAGE DE CONTENU EDITABLE ----------
   Marqueur JS pur : le mode edition l'habille lui-meme (voir edition.php),
   AUCUNE regle publique ici. La classe est toujours posee a cote d'une
   classe de mise en page existante (cap__fond, offre__image...), jamais seule. */

/* ---------- 24. PAGE GUIDE GRATUIT (opt-in dedie) ---------- */
.guide-page{background:var(--c-noir)}
.guide__entete{padding:2rem 0;text-align:center}
.guide__entete .marque img{height:4.5rem;width:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.7))}
.guide{max-width:40rem;margin:0 auto;padding:clamp(1.5rem,5vw,3rem);display:grid;gap:clamp(3rem,8vw,5rem)}
.guide__texte{display:grid;gap:1.6rem;text-align:center}
.guide__ligne{font-family:var(--f-titre);font-weight:var(--g-fin);color:var(--c-beige);
  font-size:clamp(1.3rem,1rem + 1.6vw,2rem);line-height:1.35;text-wrap:balance}
.guide__ligne p{margin:0}
.guide__ligne--ouverture{font-size:clamp(1.8rem,1rem + 3vw,3rem);line-height:1.15;
  color:var(--c-or-clair);font-weight:var(--g-massif);text-transform:uppercase;max-width:16ch;margin:0 auto}
.guide__carte{border:1px solid var(--t-or-fort);background:var(--c-charbon);
  padding:clamp(1.8rem,5vw,2.8rem);text-align:center;max-width:30rem;margin:0 auto;width:100%}
.guide__carte .formulaire{max-width:none;text-align:left}
.guide__carte .champ label{font-size:.76rem}
@media(max-width:480px){.guide{padding:1.2rem}}

/* Bande contenant la carte "Guide gratuit" : texte a gauche, formulaire a
   droite a partir de 900px. Cible uniquement les bande__inter qui portent
   effectivement une guide__carte — aucune autre section n'est affectee. */
@media(min-width:900px){
  .bande__inter:has(>.guide__carte){display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,26rem);
    grid-template-rows:auto auto 1fr;
    column-gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .bande__inter:has(>.guide__carte)>:nth-child(1){grid-column:1;grid-row:1}
  .bande__inter:has(>.guide__carte)>:nth-child(2){grid-column:1;grid-row:2}
  .bande__inter:has(>.guide__carte)>:nth-child(3){grid-column:1;grid-row:3}
  .bande__inter:has(>.guide__carte)>.guide__carte{grid-column:2;grid-row:1/4;
    margin:0;max-width:none;width:auto;align-self:start}
}

/* ---------- 25. CARTE DE CONTACT (reassurance) ---------- */
.carte-contact{border:1px solid var(--t-or);background:var(--c-charbon-clair);
  padding:clamp(1.6rem,4vw,2.4rem);display:grid;gap:1.4rem;max-width:26rem}
.bande--charbon .carte-contact{background:rgba(255,255,255,.03)}

/* Alignement vertical precis (0-100%) des images de contenu, avec reglage
   mobile independant en repli sur le desktop si non fourni. */
.media-image picture{display:contents}
.media-image img{object-position:50% var(--pos-y,50%)}
@media(max-width:640px){
  .media-image img{object-position:50% var(--pos-y-m, var(--pos-y,50%))}
}

/* Page contact : coordonnees a gauche, formulaire a droite a partir de
   900px. Colonne gauche : carte-contact puis carte-osm, empilees sur deux
   lignes explicites. Le formulaire occupe la colonne droite sur toute la
   hauteur. Lignes explicites (grid-template-rows) pour eviter toute
   ambiguite de resolution de "derniere ligne" en placement automatique. */
@media(min-width:900px){
  .bande__inter:has(>.carte-contact){display:grid;
    grid-template-columns:minmax(280px,26rem) minmax(0,1fr);
    grid-template-rows:auto auto auto;
    column-gap:clamp(2.5rem,5vw,5rem);row-gap:1.4rem;align-items:start}
  .bande__inter:has(>.carte-contact)>.carte-reservation{grid-column:1/-1;grid-row:1;
    margin-top:0}
  .bande__inter:has(>.carte-contact)>.carte-contact{grid-column:1;grid-row:2;
    max-width:none;width:auto}
  .bande__inter:has(>.carte-contact)>.carte-osm{grid-column:1;grid-row:3}
  .bande__inter:has(>.carte-contact)>form{grid-column:2;grid-row:2/4}
}

/* Page "Cours a Caen" : section "Ou me trouver ?" - texte a gauche,
   carte OpenStreetMap a droite a partir de 900px (26/08/2026). */
@media(min-width:900px){
  [data-bande-ancre="cours-de-batterie-caen.titre.7"] .bande__inter{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,22rem);
    grid-template-rows:auto auto auto;
    column-gap:clamp(2.5rem,5vw,4rem);row-gap:1rem;align-items:start}
  [data-bande-ancre="cours-de-batterie-caen.titre.7"] .bande__inter>h2{grid-column:1;grid-row:1}
  [data-bande-ancre="cours-de-batterie-caen.titre.7"] .bande__inter>div[data-zone]{grid-column:1;grid-row:2}
  [data-bande-ancre="cours-de-batterie-caen.titre.7"] .bande__inter>address{grid-column:1;grid-row:3;margin-top:0}
  [data-bande-ancre="cours-de-batterie-caen.titre.7"] .bande__inter>.carte-osm{grid-column:2;grid-row:1/-1}
}

/* ---------- DUO texte/formulaire ou image/texte (27/08/2026) ----------
   Page "Cours en ligne" : presentation en 2 colonnes a partir de 900px,
   empile en dessous. L'ordre des enfants dans le HTML determine le cote
   (1er enfant = colonne gauche) : texte+formulaire => texte a gauche ;
   image+texte => image a gauche. */
.duo{display:flex;flex-direction:column;gap:2rem;margin:2.4rem 0}
.duo__texte{min-width:0}
.duo__texte p{margin:0 0 1.1rem}
.duo__texte p:last-child{margin-bottom:0}
.duo .guide__carte{margin:0}
.duo__image{width:100%;border-radius:2px;overflow:hidden;aspect-ratio:4/3}
.duo__image img{width:100%;height:100%;object-fit:cover;display:block}
.duo__video{width:100%;min-width:0}
@media(min-width:900px){
  .duo{flex-direction:row;align-items:center;gap:clamp(2.5rem,5vw,4.5rem)}
  .duo>*{flex:1 1 0;min-width:0}
  .duo.duo--image .duo__image{flex:0 1 42%}
  .duo.duo--video .duo__video{flex:0 1 48%}
}

/* ---------- Encart "Fondations du Batteur" dans les tutoriels (27/08/2026) ----------
   Remplace le simple bouton "leçons offertes" : vidéo de présentation +
   texte + bouton, dans une carte distincte, pour donner envie de cliquer
   plutôt qu'un lien perdu dans le texte. */
.encart-fondations{display:flex;flex-direction:column;gap:1.6rem;margin:2.2rem 0;
  padding:1.6rem;border:1px solid var(--c-or);border-radius:3px;background:rgba(201,162,39,.06)}
.encart-fondations__video{width:100%;border-radius:2px;overflow:hidden;aspect-ratio:16/9;
  background:#000}
.encart-fondations__video video{width:100%;height:100%;display:block}
.encart-fondations__texte .surtitre{display:block;margin-bottom:.4rem}
.encart-fondations__texte h3{font-family:var(--f-titre);font-weight:var(--g-fort);
  font-size:clamp(1.2rem,2vw,1.5rem);color:var(--c-beige);margin:0 0 .6rem}
.encart-fondations__texte p{font-family:var(--f-texte);font-size:1rem;line-height:1.7;
  color:var(--c-beige-doux);margin:0 0 1.2rem}
@media(min-width:760px){
  .encart-fondations{flex-direction:row;align-items:center;gap:2.4rem}
  .encart-fondations__video{flex:0 1 44%}
  .encart-fondations__texte{flex:1 1 0}
}

/* ---------- 25ter. CARTE RESERVATION (page contact) ---------- */
.carte-reservation{border:1px solid var(--t-or-fort);background:var(--c-charbon-clair);
  padding:1.6rem;margin-top:1.4rem;display:flex;gap:1rem;align-items:flex-start}
.bande__inter>.carte-reservation:first-child{margin-top:0}
@media(min-width:900px){.carte-reservation{margin-top:0;margin-bottom:0}}
.carte-reservation__icone{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;
  background:rgba(201,162,39,.12);color:var(--c-or);display:flex;align-items:center;justify-content:center}
.carte-reservation__corps{min-width:0}
.carte-reservation__texte{font-family:var(--f-texte);font-size:.92rem;line-height:1.55;
  color:var(--c-beige-doux);margin:0 0 1rem}
.carte-reservation .bouton{display:inline-flex}

/* ---------- 25bis. CARTE OPENSTREETMAP (page contact) ---------- */
.carte-osm{border:1px solid var(--t-or);background:var(--c-charbon-clair);
  overflow:hidden;margin-top:1.4rem}
@media(min-width:900px){.carte-osm{margin-top:0}}
.carte-osm__carte{width:100%;aspect-ratio:4/3;background:var(--c-charbon-clair)}
.carte-osm__lien{display:block;padding:.85rem 1.2rem;font-family:var(--f-cap);
  font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--c-or-clair);text-decoration:none;border-top:1px solid var(--t-or)}
.carte-osm__lien:hover{color:var(--c-beige)}
.carte-osm__repli{padding:1rem 1.2rem;color:var(--c-beige-doux);font-size:.9rem;margin:0}
.carte-osm__carte .leaflet-tile-pane{filter:invert(90%) hue-rotate(180deg)
  brightness(.92) contrast(.88) saturate(.55) sepia(.12)}
.carte-osm__carte .leaflet-container{background:var(--c-charbon-clair);font-family:var(--f-texte)}
.carte-osm__marqueur{background:transparent;border:none}
.carte-osm__marqueur span{display:block;width:1.7rem;height:1.7rem;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--c-or);border:2px solid var(--c-charbon)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--c-charbon-clair);
  color:var(--c-beige);border:1px solid var(--t-or-fort);box-shadow:none}
.leaflet-popup-content{font-family:var(--f-texte);font-size:.85rem;margin:.7rem .9rem}
.leaflet-control-attribution{background:rgba(20,18,16,.75)!important;
  color:var(--c-beige-sourd)!important;font-size:.65rem!important}
.leaflet-control-attribution a{color:var(--c-or-clair)!important}
.leaflet-control-zoom a{background:var(--c-charbon-clair)!important;color:var(--c-beige)!important;
  border-color:var(--t-or)!important}
.leaflet-control-zoom a:hover{background:var(--c-charbon)!important;color:var(--c-or-clair)!important}
@media(prefers-reduced-motion:reduce){
  .carte-osm__carte .leaflet-fade-anim .leaflet-tile,
  .carte-osm__carte .leaflet-zoom-anim .leaflet-zoom-animated{transition:none!important}
  .pied__credit img{animation:none}
}
.carte-contact__ligne{display:flex;gap:1rem;align-items:flex-start}
.carte-contact__icone{flex:0 0 auto;width:2.4rem;height:2.4rem;border:1px solid var(--t-or-fort);
  border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--c-or);
  font-family:var(--f-cap);font-size:1rem}
.carte-contact__texte{font-family:var(--f-texte);color:var(--c-beige-doux);font-size:.96rem;line-height:1.6}
.carte-contact__texte strong{display:block;color:var(--c-beige);font-family:var(--f-cap);
  font-weight:var(--g-fort);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.3rem}
.carte-contact__texte a{color:var(--c-or-clair)}

/* Lien reel vers un groupe (site/FB/YouTube confirme) : discret, pas de soulignement systematique. */
.colonnes-parcours__col li.avec-vignette a{color:var(--c-beige-doux);text-decoration:none;
  transition:color var(--duree-courte)}
.colonnes-parcours__col li.avec-vignette a:hover{color:var(--c-or-clair)}
.groupe-lien{display:inline-block;color:var(--c-or);font-size:.85em;transform:translateY(-1px)}

/* ---------- IMAGES DECORATIVES LIBRES ----------
   Modele repris de test.mlr4.com (19/08/2026) : profondeur libre (z-index
   numerique), formes rond/carre/arche, cadrage interne et zoom. */
.deco-anchor{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:auto}
.deco-item{position:absolute;transform:translate(-50%,-50%);
  background-repeat:no-repeat;--rot:0deg}
.deco-round{border-radius:50%}
.deco-square{border-radius:12px}
.deco-arche{border-radius:50% 50% 8px 8px}
.deco-item.is-nb{filter:grayscale(1)}
.deco-item.has-rot{background-image:none!important}
.deco-item.has-rot::before{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;background-image:var(--bg);background-size:var(--bgsize,cover);
  background-position:var(--bgpos,center);background-repeat:no-repeat;
  transform:rotate(var(--rot));transform-origin:center}
/* Les sections ancrent les decors. */
section.bande,section.cap,section.diaporama{position:relative}
/* Sur petit ecran les decors se replient mal : masques aux visiteurs. */
@media(max-width:900px){
  body:not(.nds-edition) .deco-item{display:none}
}

/* ---------- IMAGES : UNE OU PLUSIEURS (diaporama generique) ----------
   Une seule image : statique, avec effet de zoom lent optionnel (--kb).
   Plusieurs : fondu automatique entre les vues. 19/08/2026. */
.media-image--diapo{position:relative}
.media-vue{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s ease}
.media-vue[data-active="true"]{opacity:1}
.media-vue img{width:100%;height:100%;object-fit:cover;object-position:50% var(--pos-y,50%)}
@media(max-width:640px){
  .media-vue img{object-position:50% var(--pos-y-m,var(--pos-y,50%))}
}
/* Effet de zoom lent : n'est applique que si une intensite est reglee. */
.media-image img.a-zoom{animation:nds-zoom var(--kb-duree,12s) ease-out forwards}
.media-image--diapo .media-vue[data-active="true"] img.a-zoom{
  animation:nds-zoom var(--kb-duree,12s) ease-out forwards}
@keyframes nds-zoom{from{transform:scale(var(--kb,1))}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .media-image img.a-zoom{animation:none}
  .media-vue{transition:none}
}

/* ---------- 26. GRILLE BLOG (tuiles avec image a la une) ---------- */
.filtre-blog{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:clamp(2rem,4vw,3rem)}
.filtre-blog__item{display:inline-flex;align-items:center;background:transparent;
  border:1px solid var(--t-or);color:var(--c-beige-doux);font-family:var(--f-cap);
  font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;padding:.7rem 1.3rem;
  cursor:pointer;transition:border-color .15s,color .15s,background .15s;border-radius:100px}
.filtre-blog__item:hover{border-color:var(--t-or-fort);color:var(--c-beige)}
.filtre-blog__item[aria-pressed="true"]{background:var(--c-or);border-color:var(--c-or);
  color:var(--c-noir);font-weight:var(--g-fort)}
.filtre-blog__item--tout{font-weight:var(--g-fort)}
@media(max-width:560px){
  .filtre-blog{gap:.5rem}
  .filtre-blog__item{font-size:.78rem;padding:.6rem 1.05rem}
}

.grille-blog{display:grid;gap:clamp(1.2rem,2.6vw,2rem);grid-template-columns:1fr}
@media(min-width:700px){.grille-blog{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grille-blog{grid-template-columns:repeat(3,1fr)}}

/* Colonne "Sur Facebook" (module accessoire, page /blog/) : a partir de
   1100px, filtres+grille en colonne 1, colonne Facebook en colonne 2 sur
   toute la hauteur. En dessous, empilee normalement apres la grille. */
@media(min-width:1100px){
  .bande__inter:has(>.fb-actus){display:grid;
    grid-template-columns:minmax(0,1fr) minmax(200px,240px);
    grid-template-rows:auto 1fr;
    column-gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .bande__inter:has(>.fb-actus)>:nth-child(1){grid-column:1;grid-row:1}
  .bande__inter:has(>.fb-actus)>:nth-child(2){grid-column:1;grid-row:2}
  .bande__inter:has(>.fb-actus)>.fb-actus{grid-column:2;grid-row:1/3;
    position:sticky;top:6.5rem}
}
.fb-actus{margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--t-or)}
@media(min-width:1100px){.fb-actus{margin-top:0;padding-top:0;border-top:none}}
.fb-actus__bloc+.fb-actus__bloc{margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--t-or)}
.fb-actus .fb-actus__titre{font-family:var(--f-cap);font-weight:var(--g-fort);font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-or-clair);margin:0 0 1rem;max-width:none}
.fb-actus__liste{display:flex;flex-direction:column}
.fb-actus__item{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;
  border-bottom:1px solid var(--t-or);text-decoration:none;color:inherit;
  transition:padding-left .4s var(--courbe),background var(--duree)}
.fb-actus__item:first-child{padding-top:0}
.fb-actus__item:hover,.fb-actus__item:focus-visible{padding-left:.5rem;background:rgba(201,162,39,.07)}
.fb-actus__vignette{flex:none;width:3.4rem;height:3.4rem;overflow:hidden;border:1px solid var(--t-or);
  background:var(--c-charbon-clair)}
.fb-actus__vignette img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.5) brightness(.85);transition:transform .5s var(--courbe),filter .4s}
.fb-actus__item:hover .fb-actus__vignette img,.fb-actus__item:focus-visible .fb-actus__vignette img{
  transform:scale(1.08);filter:grayscale(0) brightness(1)}
.fb-actus__corps{min-width:0;display:flex;flex-direction:column;gap:.2rem}
.fb-actus__texte{font-family:var(--f-texte);font-size:.86rem;line-height:1.35;color:var(--c-beige-doux);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fb-actus__date{font-family:var(--f-cap);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-beige-sourd)}
.fb-actus__corps--sans-texte{justify-content:center}
.fb-actus__corps--sans-texte .fb-actus__date{font-size:.8rem;color:var(--c-beige-doux)}
.fb-actus__lien{display:flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  font-family:var(--f-cap);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-beige-doux);text-decoration:none}
.fb-actus__lien:hover,.fb-actus__lien:focus-visible{color:var(--c-or-clair)}
.fb-actus__lien svg{flex-shrink:0}

.tuile-blog{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--c-charbon-clair);border:1px solid var(--t-or);overflow:hidden;
  transition:border-color var(--duree),transform var(--duree) var(--courbe)}
.tuile-blog:hover,.tuile-blog:focus-visible{border-color:var(--t-or-fort);transform:translateY(-4px)}
.tuile-blog__cadre{position:relative;aspect-ratio:4/3;overflow:hidden;display:block}
.tuile-blog__cadre img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.55) brightness(.82);transition:transform 1s var(--courbe),filter .6s}
.tuile-blog:hover .tuile-blog__cadre img,.tuile-blog:focus-visible .tuile-blog__cadre img{
  transform:scale(1.06);filter:grayscale(0) brightness(1)}
.tuile-blog__categorie{position:absolute;top:.9rem;left:.9rem;background:var(--c-or);color:var(--c-noir);
  font-family:var(--f-cap);font-weight:var(--g-fort);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.4rem .8rem;line-height:1}
.tuile-blog__corps{padding:1.4rem 1.3rem 1.6rem;display:flex;flex-direction:column;flex:1}
.tuile-blog .tuile-blog__titre{font-family:var(--f-titre);font-weight:var(--g-fort);font-size:1.02rem;
  line-height:1.28;text-transform:uppercase;color:var(--c-beige);margin:0 0 .7rem;
  display:block;max-width:none}
.tuile-blog__extrait{font-family:var(--f-texte);font-size:.93rem;line-height:1.6;
  color:var(--c-beige-doux);margin:0 0 1.1rem;flex:1;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tuile-blog__lire{font-family:var(--f-cap);font-weight:var(--g-moyen);font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-or-clair);margin-top:auto}

/* ============================================================
   MODULE RENDEZ-VOUS — page /reserver/ et widget calendrier admin.
   ============================================================ */
.rdv-fil{margin-bottom:1.2rem}
.rdv-titre{font-family:var(--f-titre);font-weight:var(--g-fin);text-transform:uppercase;
  font-size:clamp(2rem,1rem + 3vw,3.2rem);color:var(--c-beige);margin:0 0 .8rem}
.rdv-note{background:rgba(201,162,39,.08);border:1px solid var(--t-or);border-radius:12px;
  padding:1rem 1.3rem;margin:1.6rem 0;font-family:var(--f-texte);font-size:.94rem;color:var(--c-beige-doux)}

.rdv-etapes{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:2.4rem;list-style:none;padding:0}
@media(min-width:640px){.rdv-etapes{grid-template-columns:repeat(4,1fr)}}
.rdv-etapes li{font-family:var(--f-cap);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-beige-sourd);padding:.55rem .8rem;border:1px solid var(--t-or);border-radius:999px;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdv-etapes li[data-fait="1"]{color:var(--c-or);border-color:var(--t-or-fort)}
.rdv-etapes li[data-actif="1"]{color:var(--c-noir);background:var(--c-or);border-color:var(--c-or)}

.rdv-h2{font-family:var(--f-titre);font-weight:var(--g-fin);text-transform:uppercase;
  font-size:1.6rem;color:var(--c-beige);margin:0 0 1.4rem}
.rdv-retour{background:none;border:0;cursor:pointer;color:var(--c-or-clair);font:inherit;
  padding:0;margin-bottom:1rem;font-family:var(--f-cap);font-size:.82rem;letter-spacing:.05em}
.rdv-retour:hover{text-decoration:underline}

/* --- Étape 1 : catégories --- */
.rdv-categories{display:grid;gap:1.3rem;grid-template-columns:1fr}
@media(min-width:760px){.rdv-categories{grid-template-columns:repeat(3,1fr)}}
.rdv-categorie{display:flex;flex-direction:column;gap:.9rem;text-align:left;cursor:pointer;
  background:var(--c-charbon-clair);border:1px solid var(--t-or);border-radius:16px;
  padding:1.8rem 1.6rem;transition:border-color var(--duree-courte),transform var(--duree-courte),box-shadow var(--duree-courte)}
.rdv-categorie:hover,.rdv-categorie:focus-visible{border-color:var(--c-or);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.35)}
.rdv-categorie__icone{width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid var(--t-or-fort);
  display:flex;align-items:center;justify-content:center;color:var(--c-or)}
.rdv-categorie__icone svg{width:1.4rem;height:1.4rem}
.rdv-categorie__nom{font-family:var(--f-titre);font-weight:var(--g-fort);font-size:1.25rem;
  text-transform:uppercase;color:var(--c-beige)}
.rdv-categorie__texte{font-family:var(--f-texte);font-size:.92rem;line-height:1.6;color:var(--c-beige-doux);flex-grow:1}
.rdv-categorie__fl{font-family:var(--f-cap);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-or-clair)}
.rdv-categorie:disabled,.rdv-categorie[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none}

/* --- Étape 2 : prestations --- */
.rdv-prestations{display:grid;gap:.9rem}
.rdv-presta{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;width:100%;text-align:left;
  background:var(--c-charbon-clair);border:1px solid var(--t-or);border-radius:14px;padding:1.1rem 1.4rem;
  cursor:pointer;transition:border-color var(--duree-courte),transform var(--duree-courte)}
.rdv-presta:hover{border-color:var(--c-or);transform:translateY(-2px)}
.rdv-presta__nom{font-family:var(--f-cap);font-weight:var(--g-fort);font-size:1rem;color:var(--c-beige)}
.rdv-presta__meta{font-family:var(--f-texte);font-size:.86rem;color:var(--c-beige-sourd);margin-top:.3rem}
.rdv-presta__tarif{font-family:var(--f-cap);color:var(--c-or-clair);font-size:.92rem;white-space:nowrap}

/* --- Étape 3 : calendrier mensuel --- */
.rdv-cal-layout{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:860px){.rdv-cal-layout{grid-template-columns:1fr 1fr}}
.rdv-cal-layout>div{background:rgba(255,255,255,.04);border:1px solid var(--t-or);
  border-radius:16px;padding:1.6rem}
.rdv-cal-entete{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.rdv-cal-mois{font-family:var(--f-cap);letter-spacing:.1em;text-transform:uppercase;font-size:.92rem;color:var(--c-or)}
.rdv-cal-nav{background:none;border:1px solid var(--t-or-fort);border-radius:50%;width:2.2rem;height:2.2rem;
  color:var(--c-beige);cursor:pointer;font-size:1rem;line-height:1;transition:border-color var(--duree-courte),color var(--duree-courte)}
.rdv-cal-nav:hover:not(:disabled){border-color:var(--c-or);color:var(--c-or-clair)}
.rdv-cal-nav:disabled{opacity:.3;cursor:default}
.rdv-cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem}
.rdv-cal-jsem{font-family:var(--f-cap);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-beige-sourd);text-align:center;padding-bottom:.4rem}
.rdv-cal-jour{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid transparent;background:none;color:var(--c-beige-doux);
  font-family:var(--f-texte);font-size:.92rem;cursor:pointer;transition:background var(--duree-courte),border-color var(--duree-courte)}
.rdv-cal-jour[data-hors="1"]{visibility:hidden}
.rdv-cal-jour[data-libre="0"]{color:var(--c-beige-sourd);opacity:.28;cursor:default;pointer-events:none}
.rdv-cal-jour[data-libre="1"]{color:var(--c-beige);border-color:var(--t-or)}
.rdv-cal-jour[data-libre="1"]::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--c-or)}
.rdv-cal-jour[data-libre="1"]:hover{background:rgba(201,162,39,.14);border-color:var(--c-or)}
.rdv-cal-jour[aria-current="date"]{background:var(--c-or);color:var(--c-noir);border-color:var(--c-or)}
.rdv-cal-jour[aria-current="date"]::after{background:var(--c-noir)}
.rdv-cal-vide{grid-column:1/-1;font-family:var(--f-texte);color:var(--c-beige-sourd);font-size:.88rem;
  text-align:center;padding:1.2rem 0}

.rdv-creneaux-jour__titre{font-family:var(--f-cap);letter-spacing:.06em;text-transform:uppercase;
  font-size:.86rem;color:var(--c-or);margin-bottom:1rem}
.rdv-creneaux-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.4rem,1fr));gap:.6rem}
.rdv-slot{padding:.7rem 0;border-radius:9px;border:1px solid var(--t-or-fort);background:var(--c-charbon-clair);
  color:var(--c-beige);font-family:var(--f-cap);font-size:.9rem;cursor:pointer;
  transition:background var(--duree-courte),color var(--duree-courte),border-color var(--duree-courte)}
.rdv-slot:hover{background:var(--c-or);color:var(--c-noir);border-color:var(--c-or)}
.rdv-slot[aria-pressed="true"]{background:var(--c-or);color:var(--c-noir);border-color:var(--c-or)}
.rdv-creneaux-attente{color:var(--c-beige-sourd);font-family:var(--f-texte);font-size:.9rem}

/* --- Étape 4 : coordonnées --- */
.rdv-recap{background:rgba(201,162,39,.08);border-radius:12px;border:1px solid var(--t-or);
  padding:1.1rem 1.3rem;margin-bottom:1.6rem;font-family:var(--f-texte);color:var(--c-beige);line-height:1.7}
.rdv-recap b{color:var(--c-or-clair)}

/* --- Étape 5 : confirmation --- */
.rdv-ok{text-align:center;max-width:32rem;margin:0 auto}
.rdv-ok__picto{width:4.4rem;height:4.4rem;margin:0 auto 1.4rem;border-radius:50%;background:var(--c-or);
  color:var(--c-noir);font-size:1.7rem;display:flex;align-items:center;justify-content:center}

/* --- États communs --- */
.rdv-chargement{color:var(--c-beige-sourd);font-family:var(--f-texte);font-size:.9rem;text-align:center;padding:2rem 0}
.rdv-erreur{margin-top:1.2rem;color:#EFD3CB;background:rgba(196,85,61,.14);border-left:3px solid #C4553D;
  border-radius:0 10px 10px 0;padding:.9rem 1.2rem;font-family:var(--f-texte);font-size:.92rem}

/* --- Mini-calendrier admin (agenda + réglages) ---
   Cellule = carte : numéro du jour (+ badge nb rendez-vous, y compris
   passés) et deux boutons demi-journée cliquables indépendamment. Pleine
   largeur : .vue (colonne principale de l'admin) n'impose aucun plafond. */
.rdv-admin-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;width:100%}
.rdv-admin-cal .rdv-cal-jsem{padding-bottom:.4rem;font-size:.72rem}
.rdv-admin-jour{position:relative;min-height:5.8rem;display:flex;flex-direction:column;gap:.4rem;
  border-radius:10px;border:1px solid var(--t-or);background:rgba(255,255,255,.05);
  padding:.55rem .5rem .5rem}
.rdv-admin-jour[data-hors="1"]{visibility:hidden}
.rdv-admin-jour[data-passe="1"]{opacity:.45;background:rgba(255,255,255,.02)}
.rdv-admin-jour[data-aujourdhui="1"]{border-color:var(--c-or);box-shadow:0 0 0 1px var(--c-or)}
.rdv-admin-jour[data-fermee="1"]{border-color:rgba(196,85,61,.55)}
.rdv-admin-jour[data-a-rdv="1"]{background:rgba(228,215,191,.16);border-color:var(--c-or-clair)}
.rdv-admin-jour[data-a-rdv="1"][data-passe="1"]{opacity:.7;background:rgba(228,215,191,.07)}
.rdv-admin-jour[data-a-rdv="1"][data-fermee="1"]{border-color:rgba(196,85,61,.55)}
.rdv-admin-jour__num{display:flex;align-items:center;justify-content:space-between;gap:.3rem}
.rdv-admin-jour__jour{all:unset;display:block;font-family:var(--f-texte);font-size:.98rem;
  color:var(--c-beige);cursor:pointer;border-radius:4px;padding:.05rem .3rem;margin:-.05rem -.3rem}
.rdv-admin-jour__jour:hover{background:rgba(201,162,39,.14);color:var(--c-or-clair)}
.rdv-admin-jour__num>span{font-family:var(--f-texte);font-size:.98rem;color:var(--c-beige-doux)}
.rdv-admin-jour__rdv{all:unset;font-family:var(--f-cap);font-size:.62rem;font-weight:600;
  color:var(--c-noir);background:var(--c-or-clair);border-radius:999px;padding:.15rem .5rem;
  white-space:nowrap;cursor:pointer;line-height:1.4;
  transition:background var(--duree-courte),transform var(--duree-courte)}
.rdv-admin-jour__rdv:hover{background:var(--c-or);transform:scale(1.05)}
.rdv-admin-jour__demis{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;margin-top:auto}
.rdv-admin-demi{border:1px solid var(--t-or-fort);border-radius:6px;background:none;
  color:var(--c-beige-sourd);font-family:var(--f-cap);font-size:.6rem;letter-spacing:.03em;
  text-transform:uppercase;padding:.32rem 0;text-align:center;cursor:pointer;
  transition:background var(--duree-courte),border-color var(--duree-courte),color var(--duree-courte)}
button.rdv-admin-demi:hover{border-color:var(--c-or);color:var(--c-beige)}
.rdv-admin-demi[data-etat="ferme"]{background:rgba(196,85,61,.24);border-color:#C4553D;color:#EFD3CB}
.rdv-admin-legende{display:flex;gap:1.2rem;flex-wrap:wrap;margin:1rem 0 1.6rem;font-family:var(--f-cap);
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-beige-sourd)}
.rdv-admin-legende span{display:inline-flex;align-items:center;gap:.4rem}
.rdv-admin-legende i{width:.7rem;height:.7rem;border-radius:3px;display:inline-block}
.rdv-admin-periode{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;margin:1rem 0 1.6rem;
  padding:1rem 1.1rem;border:1px solid var(--t-or);border-radius:10px;background:rgba(255,255,255,.03)}
.rdv-admin-periode .champ{margin-bottom:0;min-width:9rem;flex:1}

/* Modale de detail des RDV d'un jour, ouverte depuis le badge du calendrier
   admin. Classes propres (pas .nds-modale) : ce composant partage est un
   singleton gere par selecteur-image.js qui retire tout autre .nds-modale
   du DOM au moindre changement du body — un doublon casserait la modale RDV. */
.rdv-jour-modale{position:fixed;inset:0;z-index:10001;background:rgba(11,10,9,.85);
  display:flex;align-items:center;justify-content:center;padding:1.5rem}
.rdv-jour-modale[hidden]{display:none}
.rdv-jour-boite{background:#141210;border:1px solid rgba(201,162,39,.5);border-radius:10px;
  padding:1.5rem;max-width:28rem;width:100%;max-height:85vh;overflow-y:auto;
  font:400 .86rem/1.5 system-ui,sans-serif;color:var(--c-beige)}
.rdv-jour-boite h2{font-family:var(--f-cap);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-or);margin:0 0 1.1rem}
.rdv-jour-liste p{margin:0 0 .9rem;padding-bottom:.9rem;border-bottom:1px solid rgba(228,215,191,.15)}
.rdv-jour-liste p:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.rdv-jour-liste a{color:var(--c-or-clair)}
.rdv-jour-actes{display:flex;justify-content:flex-end;margin-top:.4rem}
.rdv-jour-actes button{background:none;border:1px solid rgba(228,215,191,.35);color:var(--c-beige);
  padding:.5rem 1.1rem;cursor:pointer;font:inherit;border-radius:6px}
.rdv-jour-actes button:hover{border-color:var(--c-or);color:var(--c-or-clair)}
.rdv-admin-periode select,.rdv-admin-periode input{width:100%;background:var(--c-noir);
  border:1px solid var(--t-beige);color:var(--c-beige);padding:.6rem;font:400 .88rem var(--f-texte)}

/* --- Bloc "A lire aussi" (maillage interne, 07/09/2026) ---
   Le site est sur fond sombre : les couleurs sont prises dans les variables
   du theme, jamais dans des valeurs de repli claires. */
.bande--lire-aussi{background:var(--c-charbon)}
.bande--lire-aussi h2{color:var(--c-beige)}
.bande ul.lire-aussi{list-style:none;margin:0;padding:0;max-width:none;display:grid;gap:1.6rem;
  grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.bande ul.lire-aussi{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bande ul.lire-aussi{grid-template-columns:1fr}}
.bande ul.lire-aussi li{padding-left:0;margin-bottom:0}
.bande ul.lire-aussi li::before{content:none}
.lire-aussi__lien{display:flex;flex-direction:column;height:100%;
  text-decoration:none;overflow:hidden;
  background:var(--c-charbon-clair);border:1px solid rgba(228,215,191,.16);border-radius:.6rem;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.lire-aussi__lien:hover,.lire-aussi__lien:focus-visible{
  transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.45);
  border-color:var(--c-or)}
.lire-aussi__vignette{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:filter .18s ease}
.lire-aussi__lien:hover .lire-aussi__vignette,
.lire-aussi__lien:focus-visible .lire-aussi__vignette{filter:brightness(1.08)}
.lire-aussi__corps{display:flex;flex-direction:column;gap:.4rem;padding:1.1rem 1.2rem}
.lire-aussi__titre{color:var(--c-beige);font-weight:600;line-height:1.25}
.lire-aussi__lien:hover .lire-aussi__titre,
.lire-aussi__lien:focus-visible .lire-aussi__titre{color:var(--c-or-clair)}
.lire-aussi__extrait{color:var(--c-beige-doux);font-size:.9rem;line-height:1.45}
/* --- Texte reserve aux lecteurs d'ecran (07/09/2026) --- */
.hors-ecran{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  .lire-aussi__lien{transition:none}
  .lire-aussi__lien:hover,.lire-aussi__lien:focus-visible{transform:none}
}

/* Les titres de tuiles video sont passes en H2 pour respecter la hierarchie
   des titres (H1 > H2) : on empeche ".bande h2" d'ecraser leur style. */
.tuile h2.tuile__titre,.tuile .tuile__titre{font-size:1rem;line-height:1.3;margin:.6rem 0 0;
  letter-spacing:normal;text-transform:none;text-align:left}

/* Bouton sous l extrait video - Cours en ligne (16/10/2026) */
.actes.actes--sous-video{justify-content:center;margin-top:var(--e-3)}

/* Page de vente Fondations : lignes courtes resserrees (16/10/2026) */
.bande [data-zone^="formation-les-fondations-du-batteur."] p{line-height:1.55;margin-bottom:.35em}
.bande [data-zone^="formation-les-fondations-du-batteur."] ul{margin:.4em 0 1em}
.bande [data-zone^="formation-les-fondations-du-batteur."] li{line-height:1.55;margin-bottom:.2em}
.bande [data-zone^="formation-les-fondations-du-batteur."] p strong:only-child{display:inline-block;margin-top:.6em}

/* Grilles de colonnes (zones ".col-N") - page de vente Fondations (16/10/2026) */
.grille-cols{display:grid;gap:1.25rem;margin:1.6rem 0 1.8rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){
  .grille-cols--2,.grille-cols--3,.grille-cols--4,.grille-cols--5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .grille-cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grille-cols--5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grille-cols--5>.grille-cols__carte{grid-column:span 2}
  .grille-cols--5>.grille-cols__carte:nth-child(4){grid-column:2/span 2}
  .grille-cols--5>.grille-cols__carte:nth-child(5){grid-column:4/span 2}
}
@media (min-width:1180px){
  .grille-cols--4:not([data-grille$="texte.faq"]){grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:700px) and (max-width:999px){
  .grille-cols--3>.grille-cols__carte:last-child:nth-child(odd),
  .grille-cols--5>.grille-cols__carte:last-child:nth-child(odd){grid-column:1/-1}
}
.grille-cols--1{max-width:36rem}
.grille-cols__carte{position:relative;min-width:0;padding:1.5rem 1.4rem 1.35rem;
  background:linear-gradient(180deg,rgba(201,162,39,.07),rgba(255,255,255,.015) 55%);
  border:1px solid rgba(201,162,39,.22);border-top:2px solid var(--c-or);border-radius:3px;
  transition:transform .25s ease,border-color .25s ease}
@media (hover:hover){.grille-cols__carte:hover{transform:translateY(-3px);border-color:rgba(201,162,39,.5)}}
@media (prefers-reduced-motion:reduce){.grille-cols__carte{transition:none}.grille-cols__carte:hover{transform:none}}
.bande .grille-cols__carte p,.bande .grille-cols__carte ul{max-width:none}
.bande .grille-cols__carte p{line-height:1.55;margin-bottom:.45em}
.bande .grille-cols__carte>p:first-child strong{display:block;margin:0 0 .35em;font-size:1.08rem;line-height:1.35;color:var(--c-beige)}
.bande .grille-cols__carte ul{margin:.5em 0 0}
.bande .grille-cols__carte ul li{padding-left:1.25rem;margin-bottom:.4rem;line-height:1.5}
.bande .grille-cols__carte ul li::before{top:.62em;width:.35rem;height:.35rem}
/* contraste "pas seulement / surtout" */
.grille-cols[data-grille$="texte.jouer-mieux"]>.grille-cols__carte:first-child{opacity:.72;border-top-color:rgba(201,162,39,.4)}
/* 3 constats courts : citation centree */
.grille-cols[data-grille$="texte.avances"]>.grille-cols__carte{display:flex;align-items:center;text-align:center;justify-content:center}
.bande .grille-cols[data-grille$="texte.avances"] p{font-size:1.12rem;margin:0}