/*
Theme Name: Studio 1170
Theme URI: https://studio1170.be
Description: Thème enfant d'Ollie pour Studio 1170
Author: Alexis Koustoulidis
Template: ollie
Version: 3.0.5
Text Domain: studio1170
*/

/* ==========================================================================
   SOMMAIRE

   A. RÈGLES DE BASE  —  dans l'ordre du fichier

   0.   BASE — comportements globaux
   1.   BANDEAU UTILITAIRE — bureau
   2.   NAVIGATION — bureau
   3.   BOUTONS — tout le site
   4.   SECTIONS DE PAGE ET SÉPARATEURS
   5.   BADGES
   5b.  PASTILLES ET LIGNE DE TITRE DES CARTES
   6.   CARTES D'ACTIVITÉ
   6b.  BLOC ÉQUIPE — qui enseigne ici
   6c.  TÉMOIGNAGES
   7.   LES TROIS PROMESSES
   8.   TARIFS
   9.   HORAIRES DU STUDIO
   10.  PROCHAINES DATES
   11.  ZONE AGENDA — réservation en ligne
   12.  BLOC NEWSLETTER
   12b. PIED DE PAGE
   12c. PAGES LÉGALES
   12d. FORMULAIRES FLUENTFORMS
   12e. PAGE DE CONFIRMATION
   17.  PAGES INTÉRIEURES ET STAGES
   17b. PAGE VIDÉOS — /videos

   B. MEDIA QUERIES  —  toujours en fin de fichier

   13.  TABLETTE LARGE — jusqu'à 900 px
   14.  MOBILE ET TABLETTE — jusqu'à 781 px
   14b. HAMBURGER — jusqu'à 599 px, puis ajustement à 489 px
   15.  PETIT MOBILE — jusqu'à 420 px, puis ajustement à 400 px
   16.  PLAGE INTERMÉDIAIRE — de 782 à 1300 px

   RÈGLE D'OR : toutes les media queries vivent dans le bloc B, après
   toutes les règles de base. Une media query placée avant une règle de
   même spécificité serait écrasée par celle-ci.

   SUR LA NUMÉROTATION : les numéros ont été attribués au fil du temps
   et ne sont pas dans l'ordre. Ce sont des étiquettes, pas un classement.
   C'est le bloc — A ou B — qui dit où une règle doit vivre.
   Une nouvelle page de contenu se range en fin de bloc A sous un numéro
   libre ; ses media queries se répartissent dans les sections existantes
   du bloc B, jamais dans une nouvelle section.
   ========================================================================== */

/* ==========================================================================
   0. BASE — comportements globaux
   ========================================================================== */

/* Défilement doux pour les ancres internes */
html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   1. BANDEAU UTILITAIRE — bureau
   ========================================================================== */

/* Séparateur vertical entre réseaux sociaux et « Mon espace » */
.sep-bandeau {
  margin: 0;
  padding: 0;
  opacity: 0.5;
}

/* Aligner le premier et le dernier élément sur la grille du site
   (Stackable applique un padding horizontal par défaut sur ses boutons) */
.bandeau-gauche .stk-button {
  padding-left: 0 !important;
}

.bandeau-droite .stk-button {
  padding-right: 18px !important;
  margin-right: 0 !important;
}

/* Forcer la police du corps (Lato locale) sur les boutons Stackable,
   qui héritent sinon de la famille « heading » */
.stk-button__inner-text {
  font-family: var(--wp--preset--font-family--body) !important;
}


/* ==========================================================================
   2. NAVIGATION — bureau
   ========================================================================== */

/* Centrer verticalement menu et bouton d'action */
.nav-ligne {
  align-items: center !important;
}

/* ==========================================================================
   3. BOUTONS — tout le site
   ========================================================================== */

/* line-height : supprime l'interligne qui décentre le texte dans sa boîte
   transition  : adoucit le changement de couleur au survol */
.wp-block-button__link {
  line-height: 1;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* ==========================================================================
   4. SECTIONS DE PAGE ET SÉPARATEURS
   ========================================================================== */

/* Aligner toutes les sections sur le même axe gauche.
   À poser sur le Groupe extérieur de chaque section. */
.section-page > * {
  max-width: 1260px;
  margin-left: 0;
  margin-right: auto;
}

/* Citation en exergue */
.wp-block-quote {
  max-width: 800px;
  border-left-color: #e2001a;
}

/* Filet de séparation entre deux blocs d'une même section.
   Les deux bordures sont neutralisées : WordPress en pose une
   en haut et une en bas, ce qui donnerait un trait double.
   À poser sur un bloc Séparateur en alignement « Aucun ». */
.separateur-section {
  height: 0;
  border: none;
  border-top: 1px solid #eaeaea;
  border-bottom: none;
  margin-top: 40px;
  margin-bottom: 32px;
  opacity: 1;
}

/* Élément conservé dans le contenu mais retiré de l'affichage.
   Pour les liens dont la page de destination n'existe pas encore :
   on retire la classe le jour où elle est créée. */
.masque {
  display: none !important;
}

/* ==========================================================================
   5. BADGES
   ========================================================================== */

/* Disponibilité du jour, dans le héros — deviendra dynamique via
   FluentBooking. Les deux variantes sont prêtes ; le PHP choisira l'une
   ou l'autre. */
.badge-ouvert {
  display: inline-block;
  width: auto;
  background: #f0f7f0;
  color: #2d6a2d;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 15px;
}

.badge-ferme {
  display: inline-block;
  width: auto;
  background: #f5f5f5;
  color: #6b6b6b;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 15px;
}

/* Encart d'ouverture dans le héros */
.bandeau-ouverture {
  border-left: 3px solid #c4c4c4;
}

.bandeau-ouverture p {
  margin: 0;
}

/* Mention « avec ou sans rendez-vous » sur la carte piano.
   OBSOLÈTE À TERME : sera remplacé par le système .pastille
   quand les lignes de titre des cartes seront montées. */
.badge-piano {
  display: inline-block;
  width: auto;
  background: #fdebed;
  color: #e2001a;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 13px;
  margin: 0;
}

/* ==========================================================================
   5b. PASTILLES ET LIGNE DE TITRE DES CARTES
   ========================================================================== */

/* Ligne de titre : icône, titre, pastille et informations pratiques
   sur un même axe. Le flex-wrap permet le passage à la ligne quand
   les quatre éléments ne tiennent pas dans la largeur de la carte. */
.ligne-titre {
  display: flex;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

/* Pastille de format d'activité.
   Les teintes reprennent celles de la grille horaire (section 9),
   pour qu'un même code couleur serve partout sur la page. */
.pastille {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 13px;
}

.pastille-individuel {
  background: #fdebed;
  color: #e2001a;
}

.pastille-collectif {
  background: #e8f4ea;
  color: #2d6a2d;
}

.pastille-stage {
  background: #fff6e8;
  color: #8a5a00;
}

.pastille-ouvert {
  background: #f2f2f2;
  color: #4a4a4a;
}

/* Informations pratiques et prénom, en fin de ligne de titre */
.meta-carte {
  margin: 0;
  font-size: 13px;
  color: #5a5a5a;
}

/* Titre de carte — taille unifiée, que le titre vienne d'un bloc
   Titre natif ou d'un h3 écrit dans un bloc HTML. */
.carte-piano h3,
.carte-activite h3 {
  font-size: 20px;
  margin: 0;
}

/* Le prénom ressort par une teinte plus soutenue plutôt que par
   un gras plein, qui déséquilibrerait la ligne de titre. */
.meta-carte strong {
  font-weight: 600;
  color: #3a3a3a;
}

/* Pastille d'offre — rouge plein, le seul de la grille de cartes.
   Elle doit se distinguer des pastilles de format, qui sont pâles. */
.pastille-offre {
  background: #E2001A;
  color: #FFFFFF;
  font-weight: 600;
}

/* ==========================================================================
   6. CARTES D'ACTIVITÉ
   ========================================================================== */

/* Carte piano — activité principale, filet rouge.
   Le !important est nécessaire : la bordure du cadre est posée en
   style inline par l'éditeur, et un style inline prime sur la
   feuille de style sauf si celle-ci est déclarée important. */
.carte-piano {
  border-left: 3px solid #e2001a !important;
}

/* Toute la carte devient cliquable via le lien qu'elle contient.
   ATTENTION : ne fonctionne qu'avec UN SEUL lien par carte. */
.carte-piano,
.carte-activite {
  position: relative;
}

.carte-piano a::after,
.carte-activite a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Lien de carte — rouge, souligné au survol seulement */
.lien-carte a {
  text-decoration: none;
  color: #e2001a;
  font-size: 14px;
}

.lien-carte a:hover {
  text-decoration: underline;
}

/* --- Grille d'activités : hauteurs égalisées ---
   Classe à poser sur le bloc Colonnes uniquement.
   NE JAMAIS cibler .wp-block-column sans ce préfixe : la règle
   toucherait aussi l'en-tête, le pied de page et les autres sections. */
.grille-activites .wp-block-column {
  display: flex;
}

.grille-activites .carte-activite {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.grille-activites .carte-activite > * {
  align-self: stretch;
  text-align: left;
}

/* Aligner tous les liens en bas de carte, quelle que soit
   la longueur du texte au-dessus */
.grille-activites .lien-carte {
  margin-top: auto;
  margin-bottom: 0;
}

/* --- Grille des cartes secondaires : deux colonnes ---
   La grille égalise les hauteurs de ligne d'elle-même : plus besoin
   des règles de hauteur forcée qu'exigeait le bloc Colonnes. */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

/* WordPress pose des marges automatiques et une largeur max sur les
   enfants d'un groupe en mise en page contrainte. En grille, les
   marges latérales auto empêchent l'élément de remplir sa piste et
   le centrent : il faut donc les remettre à zéro explicitement. */
.grille-cartes > * {
  margin: 0 !important;
  max-width: none !important;
}

/* Colonne interne pour que le lien se cale en bas de carte */
.grille-cartes .carte-activite {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.grille-cartes .lien-carte {
  margin-top: auto;
  margin-bottom: 0;
}

/* Cinq cartes en deux colonnes : la dernière serait seule et
   laisserait un vide. On lui fait occuper toute la largeur. */
.grille-cartes > *:last-child {
  grid-column: 1 / -1;
}

/* La carte conférences occupe deux pistes, mais son texte reste
   borné à la largeur d'une colonne : une ligne qui court sur
   1260 px est difficile à lire, et la ligne suivante paraît vide. */
.grille-cartes > *:last-child p {
  max-width: 560px;
}

/* ==========================================================================
   6b. BLOC ÉQUIPE — qui enseigne ici
   ========================================================================== */

.bloc-personne {
  gap: 28px !important;
  align-items: flex-start !important;
}

.personne-nom {
  margin: 0 0 2px !important;
  font-size: 18px;
  font-weight: 600;
  color: #0a0a0a;
}

.personne-role {
  margin: 0 0 14px !important;
  font-size: 14px;
  color: #6b6b6b;
}

.personne-texte {
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.65;
  color: #3a3a3a;
}

/* Verrou YouTube — réutilisable dans le héros et dans le bloc équipe.
   Le filet supérieur détache les chiffres du texte de présentation. */
.verrou-youtube {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid #eaeaea;
  font-size: 14px;
  color: #3a3a3a;
}

.verrou-youtube svg {
  flex-shrink: 0;
}

/* Verrou du héros — le filet est porté par le conteneur, pas par la
   ligne YouTube, pour qu'il englobe aussi la signature. */
.verrou-hero {
  padding-top: 14px;
  border-top: 1px solid #eaeaea;
}

.verrou-hero .verrou-youtube {
  align-items: flex-start;
  margin: 0 !important;
  padding-top: 0;
  border-top: none;
}

/* Aligner l'icône sur la première ligne de texte plutôt que sur
   le centre du bloc, qui peut faire deux lignes. */
.verrou-hero .verrou-youtube svg {
  margin-top: 4px;
}

.verrou-signature {
  margin: 4px 0 0 !important;
  font-size: 14px;
  color: #6b6b6b;
}

.verrou-hero {
  padding-top: 0;
  border-top: none;
}

.verrou-hero .verrou-youtube {
  font-size: 15px;
}

.verrou-signature {
  margin: 3px 0 0 !important;
  font-size: 15px;
  color: #6b6b6b;
}

.personne-texte,
.bloc-personne .verrou-youtube {
  max-width: 640px;
}

/* Façade vidéo : une image et un bouton, rien de plus.
   L'iframe YouTube n'est créée qu'au clic, ce qui évite de charger
   plusieurs centaines de kilo-octets à l'ouverture de la page. */
.facade-video {
  position: relative;
  max-width: 640px;
  margin-top: 20px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #dcdcdc;
}

.facade-bouton {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.facade-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease;
}

.facade-bouton:hover .facade-play {
  transform: translate(-50%, -50%) scale(1.08);
}

.facade-video iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Sous-titres des volets d'activité (Cinéma, Yoga) — le thème applique
   sa propre taille et sa propre graisse aux titres, qu'il faut ramener
   au niveau du bloc. */
.personne-volet {
  margin: 20px 0 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0a0a0a;
}

/* ==========================================================================
   6c. TÉMOIGNAGES
   ========================================================================== */

.grille-temoignages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}

/* Même correctif que pour .grille-cartes : la mise en page contrainte
   de WordPress pose des marges auto qui empêchent les cartes de
   remplir leur piste. */
.grille-temoignages > * {
  margin: 0 !important;
  max-width: none !important;
}

.carte-temoignage {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 22px;
  height: 100%;
}

/* Le sous-titre appartient au titre : on annule l'écart de bloc
   posé par le thème entre les deux. */
.section-temoignages h2 {
  margin-bottom: 6px !important;
}

.temoignages-intro {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 14px;
  color: #6b6b6b;
}

/* Ligne d'identité : portrait à gauche, nom et métier à droite */
.ligne-identite {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

/* Le recadrage en cercle se fait ici, pas dans le fichier source :
   tu gardes ta photo d'origine et tu peux changer d'avis. */
.ligne-identite figure {
  margin: 0 !important;
  flex-shrink: 0;
}

.ligne-identite img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Le Groupe hérite du flex horizontal de la Ligne parente : on force
   l'empilement vertical et on l'empêche de s'étirer, sans quoi il
   pousse le portrait vers la gauche. */
.identite-texte {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  flex: 0 1 auto;
  min-width: 0;
}

.temoin-nom {
  margin: 0 !important;
  font-size: 15px;
  font-weight: 600;
  color: #0a0a0a;
}

.temoin-role {
  margin: 0 !important;
  font-size: 13px;
  color: #6b6b6b;
}

.temoin-accroche {
  margin: 0 0 8px !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #e2001a;
}

.temoin-citation {
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.6;
  color: #4a4a4a;
}

/* Les deux paragraphes suivent la Ligne dans le Groupe carte :
   ils doivent occuper toute la largeur disponible. */
.carte-temoignage .temoin-accroche,
.carte-temoignage .temoin-citation {
  width: 100%;
  align-self: stretch;
}

/* Lien de sortie de section — même traitement que les liens de carte,
   mais avec sa propre classe : il n'est pas dans une carte. */
.lien-temoignages {
  margin: 20px 0 0 !important;
  font-size: 14px;
}

.lien-temoignages a {
  text-decoration: none;
  color: #e2001a;
}

.lien-temoignages a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   7. LES TROIS PROMESSES
   ========================================================================== */

/* Version bureau : trois colonnes séparées par un filet vertical.
   La version mobile (icône à gauche, texte à droite) est en section 14. */
.promesse {
  text-align: center;
  border-right: 1px solid #eaeaea;
}

.grille-promesses .wp-block-column:last-child .promesse {
  border-right: none;
}

.promesse svg {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   8. TARIFS
   ========================================================================== */

.carte-tarif p {
  margin: 0;
}

.carte-tarif p:first-child {
  margin-bottom: 6px;
}

/* ==========================================================================
   9. HORAIRES DU STUDIO
   ========================================================================== */

/* --- Version bureau : tableau de la semaine ---
   Une colonne d'heures fixe, puis les sept jours à parts égales. */
.semaine-grille {
  display: grid;
  grid-template-columns: 78px repeat(7, 1fr);
  gap: 6px;
  font-size: 13px;
}

.semaine-grille .jour {
  text-align: center;
  color: #6b6b6b;
  padding-bottom: 6px;
}

/* FUSION : trois déclarations séparées auparavant (mise en forme,
   centrage flex, graisse). Résultat identique, en un seul endroit. */
.semaine-grille .creneau {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  padding: 11px 4px;
  text-align: center;
  line-height: 1.3;
  font-weight: 600;
}

/* FUSION : la première version (11 px, opacité 0.75) était écrasée
   par la seconde. Seule la valeur effective est conservée. */
.semaine-grille .creneau span {
  font-size: 13px;
  font-weight: 400;
  opacity: 1;
}

/* FUSION : le align-self était déclaré à part. */
.semaine-grille .heure {
  display: flex;
  align-items: center;
  align-self: center;
  color: #6b6b6b;
  font-size: 12px;
}

/* Couleurs par famille d'activité — code repris dans les pastilles
   des cartes et dans la version mobile ci-dessous. */
.semaine-grille .yoga {
  background: #e8f4ea;
  color: #2d6a2d;
}

.semaine-grille .piano {
  background: #fdebed;
  color: #e2001a;
}

.semaine-grille .soir {
  background: #f2f2f2;
  color: #4a4a4a;
  grid-column: span 6;
}

.semaine-grille .stages {
  background: #fff6e8;
  color: #8a5a00;
  grid-row: span 3;
}

.semaine-grille .piano-semaine {
  grid-column: span 5;
}

/* --- Version mobile : liste à filets colorés ---
   La bascule entre les deux versions se fait en section 13. */
.semaine-mobile {
  display: none;
}

.creneau-mobile {
  border-left: 3px solid #9a9a9a;
  padding-left: 12px;
}

.creneau-mobile.yoga {
  border-left-color: #2d6a2d;
}
.creneau-mobile.piano {
  border-left-color: #e2001a;
}
.creneau-mobile.stages {
  border-left-color: #8a5a00;
}


/* ==========================================================================
   10. PROCHAINES DATES
   ========================================================================== */

/* Les marges sont en longhand : un raccourci « margin » avec !important
   écraserait aussi margin-left, et la liste perdrait son centrage
   par la mise en page contrainte de WordPress. */
.liste-dates {
  list-style: none;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  padding: 0;
  display: grid;
  row-gap: 8px;
}

/* Piste fixe pour l'icône : c'est elle qui aligne les lignes entre elles. */
.liste-dates li {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 10px;
  align-items: start;
  font-size: 15px;
  line-height: 1.5;
}

.icone-date {
  width: 18px;
  height: 18px;
  color: #6b6b6b;
  margin-top: 3px;
}

/* Ligne conservée dans le HTML mais retirée de l'affichage.
   Le display: none prime sur le display: grid du li. */
.liste-dates li.masque {
  display: none;
}

/* ==========================================================================
   11. ZONE AGENDA — réservation en ligne
   ========================================================================== */


/* Le bloc auteur fait doublon avec la carte piano plus haut dans
   la page. Masqué au CSS plutôt que via disable_author, qui
   retirerait aussi le titre, les durées et l'adresse.
   Le !important est nécessaire : FluentBooking charge sa feuille
   de style après celle du thème enfant. */
.zone-agenda .fcal_author,
.zone-agenda .fcal_author_avatar {
  display: none !important;
}

/* Boutons de durée — bouton non sélectionné en rouge pâle, cliquable
   visuellement, et sélection en rouge plein. Le plugin charge sa
   feuille après le thème enfant, d'où les !important. */
.zone-agenda .fcal_duration {
  background-color: #FDEBED !important;
  color: #E2001A !important;
  border: 1px solid #F5C2C8 !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.zone-agenda .fcal_duration:hover {
  background-color: #FBD9DE !important;
}

.zone-agenda .fcal_duration.is_selected {
  background-color: #E2001A !important;
  color: #FFFFFF !important;
  border-color: #E2001A !important;
  font-weight: 600;
}

.zone-agenda .pastille-offre {
  background: #FDEBED;
  color: #E2001A;
  border: 1px solid #E2001A;
}

/* Le calendrier est centré par le plugin dans son conteneur :
   on le recale sur l'axe gauche du site, comme toutes les
   autres sections. */
.zone-agenda .fcal_calendar_inner {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.section-horaires h3 + * {
  margin-top: 0;
}

.zone-agenda {
  margin-top: 48px;
}

/* --- Couleur d'accent du calendrier ---
   FluentBooking n'offre pas de réglage de couleur : on remplace
   son bleu par le rouge du studio. Le plugin charge sa feuille
   après le thème enfant, d'où les !important. */

/* Date disponible, au survol */
.zone-agenda .fcal_day_item button:hover {
  background-color: #fdebed !important;
  color: #e2001a !important;
}

/* Date sélectionnée */
.zone-agenda .fcal_day_item button.is_selected,
.zone-agenda .fcal_day_item button.selected {
  background-color: #e2001a !important;
  color: #ffffff !important;
}

/* Le point sous la date du jour et sous les dates disponibles */
.zone-agenda .fcal_day_item .fcal_dot,
.zone-agenda .fcal_today_dot {
  background-color: #e2001a !important;
}

/* Créneaux horaires */
.zone-agenda .fcal_slot:hover,
.zone-agenda .fcal_time_slot:hover {
  border-color: #e2001a !important;
  color: #e2001a !important;
}

/* Boutons d'action — « Suivant », « Réserver le rendez-vous » */
.zone-agenda .fcal_btn,
.zone-agenda button.fcal_primary_btn,
.zone-agenda .fcal_confirm_btn {
  background-color: #e2001a !important;
  border-color: #e2001a !important;
  color: #ffffff !important;
}

.zone-agenda .fcal_btn:hover,
.zone-agenda button.fcal_primary_btn:hover,
.zone-agenda .fcal_confirm_btn:hover {
  background-color: #b80016 !important;
  border-color: #b80016 !important;
}

/* Bascule 12h / 24h */
.zone-agenda .fcal_time_format .is_active {
  background-color: #fdebed !important;
  color: #e2001a !important;
}

/* ==========================================================================
   12. BLOC NEWSLETTER
   ========================================================================== */

.bloc-newsletter {
  background: #0a0a0a;
  border-radius: 8px;
  padding: 40px;
}

/* Neutralise l'alignement large hérité de l'éditeur.
   max-width: none car la largeur est désormais gérée par les colonnes. */
.bloc-newsletter > * {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: none;
}

/* align-items: center équilibre les deux colonnes verticalement.
   Sans lui, la colonne droite, plus courte, se colle en haut. */
.colonnes-newsletter {
  align-items: center;
  gap: 48px;
  margin-bottom: 0 !important;
}

/* Borne la colonne du formulaire : sans elle, la mention légale
   court sur toute la largeur alors que le formulaire fait 440 px. */
.colonnes-newsletter .wp-block-column:last-child > * {
  max-width: 440px;
}

/* Le fond sombre impose sa propre échelle de gris : blanc pur pour le
   titre, deux gris décroissants pour la hiérarchie en dessous. */
.bloc-newsletter h2 {
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 14px;
}

.bloc-newsletter .newsletter-intro {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #d4d4d4;
}

.bloc-newsletter .newsletter-mention {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  font-size: 15px;
  line-height: 1.7;
  color: #a8a8a8;
}


/* ==========================================================================
   12b. PIED DE PAGE
   ========================================================================== */

.colonnes-pied {
  gap: 48px !important;
  align-items: flex-start !important;
}

/* Carte cliquable vers Google Maps. L'écart avec le bloc adresse est
   porté par le margin-top de .colonnes-adresse, pour éviter que deux
   marges s'additionnent. */
.carte-acces {
  margin: 0 !important;
}

.carte-acces img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

/* Signale que la carte est cliquable : sans cette mention, personne
   ne pense à cliquer sur une image de plan. */
.lien-carte-maps {
  margin: 8px 0 0 !important;
  font-size: 13px;
}

.lien-carte-maps a {
  color: #6B6B6B;
  text-decoration: none;
}

.lien-carte-maps a:hover {
  color: #E2001A;
  text-decoration: underline;
}


/* --- Bloc adresse : colonne gauche (nom, adresse, contact) --- */

.colonnes-adresse {
  gap: 32px !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

.pied-nom {
  margin: 0 0 8px !important;
  font-size: 15px;
  font-weight: 600;
  color: #0A0A0A;
}

.pied-adresse {
  margin: 0 0 10px !important;
  font-size: 14px;
  line-height: 1.55;
  color: #5A5A5A;
}

/* Les liens tél. et e-mail restent discrets : ce sont des
   informations avant d'être des actions. */
.pied-contact {
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.6;
  color: #5A5A5A;
}

.pied-contact a {
  color: #5A5A5A;
  text-decoration: none;
}

.pied-contact a:hover {
  color: #E2001A;
  text-decoration: underline;
}

/* --- Bloc adresse : colonne droite (accès) --- */

.acces-liste {
  list-style: none;
  margin: 0 !important;
  padding: 0;
  display: grid;
  row-gap: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: #5A5A5A;
}

/* Piste fixe pour l'intitulé : les trois lignes s'alignent entre
   elles quelle que soit la longueur du mot. */
.acces-liste li {
  display: grid;
  grid-template-columns: 62px 1fr;
  column-gap: 8px;
  align-items: baseline;
}

.acces-liste strong {
  font-weight: 600;
  color: #3A3A3A;
}

/* --- Colonnes de liens --- */

.pied-titre {
  margin: 0 0 12px !important;
  font-size: 14px;
  font-weight: 600;
  color: #0A0A0A;
}

.pied-liens {
  list-style: none;
  margin: 0 !important;
  padding: 0;
  display: grid;
  row-gap: 8px;
  font-size: 14px;
}

.pied-liens a {
  color: #5A5A5A;
  text-decoration: none;
}

.pied-liens a:hover {
  color: #E2001A;
  text-decoration: underline;
}

/* Les icônes prolongent la liste : même écart que celui qui sépare
   deux entrées, en plus généreux pour marquer le changement de nature. */
.pied-reseaux {
  margin-top: 20px !important;
}

/* --- Barre légale --- */

.barre-legale {
  margin-top: 40px !important;
  padding-top: 20px;
  border-top: 1px solid #EAEAEA;
  align-items: center !important;
  gap: 16px !important;
}

.mention-copyright,
.liens-legaux {
  margin: 0 !important;
  font-size: 14px;
  color: #8A8A8A;
}

.liens-legaux a {
  color: #8A8A8A;
  text-decoration: none;
}

.liens-legaux a:hover {
  color: #E2001A;
  text-decoration: underline;
}

/* Le pied est blanc comme la page : un filet marque la frontière
   quand la dernière section est claire elle aussi. */
.colonnes-pied {
  padding-top: 40px;
  border-top: 1px solid #eaeaea;
}

/* ==========================================================================
   12c. PAGES LÉGALES
   ========================================================================== */

.contenu-legal {
  max-width: 1260px;
  margin-left: 0;
  margin-right: auto;
}

/* Neutralise la bordure d'accent de iubenda, étrangère à la charte */
#iub-legalDoc {
  border-top: none !important;
}

/* Texte juridique : la largeur du conteneur suit la grille du site,
   mais les lignes restent lisibles. */
.section-legale p,
.section-legale h2 {
  max-width: 800px;
}

.section-legale h2 {
  font-size: 22px;
}

/* ==========================================================================
   12d. FORMULAIRES FLUENTFORMS
   ========================================================================== */

/* Deux classes se combinent :
   .formulaire-studio  — l'habillage de base, sur fond clair
   .formulaire-sombre  — la variante posée sur le bloc noir
   La seconde ne s'emploie jamais seule : elle neutralise et
   réajuste ce que la première a posé. */

/* --- Cadre du formulaire ---
   Le formulaire doit se lire comme une zone d'action, distincte
   du texte qui la précède. Même vocabulaire que les cartes :
   fond blanc, filet gris, angles arrondis. */

.formulaire-studio .fluentform {
  max-width: 640px;
  margin-left: 0;
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 28px;
}

/* Le plugin charge sa feuille après le thème enfant : d'où les
   !important sur tout ce qui touche à la typographie. */
.formulaire-studio .fluentform,
.formulaire-studio .ff-el-input--label label,
.formulaire-studio .ff-el-form-control,
.formulaire-studio .ff-el-form-check-label {
  font-family: var(--wp--preset--font-family--body) !important;
}

/* --- Étiquettes --- */

.formulaire-studio .ff-el-input--label label {
  font-size: 14px !important;
  font-weight: 600;
  color: #3a3a3a;
  margin-bottom: 6px !important;
}

/* L'astérisque du champ obligatoire reprend le rouge de la charte */
.formulaire-studio .ff-el-is-required.asterisk-right label:after,
.formulaire-studio .ff-el-is-required.asterisk-left label:before {
  color: #e2001a !important;
}

/* --- Champs de saisie --- */

.formulaire-studio .ff-el-form-control {
  font-size: 15px !important;
  line-height: 1.4;
  padding: 11px 14px !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 6px !important;
  background: #ffffff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Le champ actif se signale par le rouge du studio plutôt que par
   le bleu par défaut du navigateur. */
.formulaire-studio .ff-el-form-control:focus {
  border-color: #e2001a !important;
  box-shadow: 0 0 0 3px rgba(226, 0, 26, 0.12) !important;
  outline: none !important;
}

.formulaire-studio .ff-el-form-control::placeholder {
  color: #9a9a9a;
}

/* Trois lignes suffisent pour une question */
.formulaire-studio textarea.ff-el-form-control {
  min-height: 90px;
  resize: vertical;
}

/* --- Écart entre les champs --- */

.formulaire-studio .ff-el-group {
  margin-bottom: 18px !important;
}

/* --- Cases et boutons radio --- */

.formulaire-studio .ff-el-form-check {
  margin-bottom: 8px !important;
}

.formulaire-studio .ff-el-form-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px !important;
  line-height: 1.45;
  color: #3a3a3a;
  cursor: pointer;
}

/* La case et le rond reprennent la couleur du studio une fois cochés */
.formulaire-studio input[type="radio"],
.formulaire-studio input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: #e2001a;
  cursor: pointer;
}

/* --- Consentements ---
   Plus discrets que les champs : ce sont des mentions, pas des
   questions. */

.formulaire-studio .ff_consentement .ff-el-input--label label,
.formulaire-studio .ff_consentement .ff-el-form-check-label {
  font-size: 13px !important;
  font-weight: 400;
  line-height: 1.5;
  color: #5a5a5a;
}

/* Astérisque sur le libellé d'une case à cocher.
   FluentForms ne la pose que sur l'étiquette du champ : quand
   celle-ci est vide, on la recrée ici. Le libellé étant en flex,
   le pseudo-élément devient un troisième élément de la ligne,
   après le texte — d'où la marge négative, qui rattrape le gap. */
.formulaire-studio .ff_consentement_requis .ff-el-form-check-label::after {
  content: "*";
  margin-left: -6px;
  color: #e2001a;
  font-weight: 600;
}

/* --- Bouton ---
   La couleur ne vient pas du styleur de FluentForms mais d'ici,
   pour rester cohérent avec les boutons du reste du site. */

.formulaire-studio .ff-btn-submit {
  background-color: #e2001a !important;
  border-color: #e2001a !important;
  color: #ffffff !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-weight: 600;
  border-radius: 6px;
  padding: 14px 24px;
  transition: background-color 0.2s ease;
}

.formulaire-studio .ff-btn-submit:hover {
  background-color: #b80016 !important;
  border-color: #b80016 !important;
}

.formulaire-studio .ff-el-group.ff-text-left .ff-btn-submit {
  font-size: 15px;
  margin-top: 6px;
}

/* --- Message de confirmation --- */

.formulaire-studio .ff-message-success {
  font-size: 15px;
  line-height: 1.6;
  padding: 18px 20px;
  border-radius: 6px;
}

/* --- Variante sombre : le formulaire se fond dans le bloc ---
   Les règles de cadre ci-dessus valent pour un formulaire posé sur
   la page. Ici, le fond noir du bloc est le cadre : on neutralise
   donc tout l'habillage.
   Le libellé du champ est masqué côté FluentForms — l'indication de
   saisie suffit, et le titre du bloc porte déjà le message. */

.formulaire-sombre .fluentform {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: none;
}

/* Champ puis bouton, empilés, tous deux sur toute la largeur.
   Une cible large se repère mieux sur un fond sombre. */
.formulaire-sombre .ff-el-group {
  margin-bottom: 14px !important;
}

.formulaire-sombre .ff-el-form-control,
.formulaire-sombre .ff-btn-submit {
  width: 100%;
}

/* Le gris des consentements est pensé pour un fond clair :
   sur noir, il faut remonter d'un cran. */
.formulaire-sombre .ff-el-form-check-label {
  color: #c4c4c4 !important;
}

/* Les cases sont blanc plein sur fond noir : elles crient plus fort
   que leur libellé. Un gris sombre avec un filet les calme, et le
   rouge du studio prend le relais une fois cochées.
   L'appearance: none est indispensable — sans lui, le navigateur
   garde son rendu natif et ignore ces couleurs. */
.formulaire-sombre input[type="checkbox"] {
  appearance: none;
  width: 17px;
  height: 17px;
  border: 1px solid #6b6b6b;
  border-radius: 3px;
  background: #1a1a1a;
  position: relative;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.formulaire-sombre input[type="checkbox"]:hover {
  border-color: #a8a8a8;
}

.formulaire-sombre input[type="checkbox"]:checked {
  background: #e2001a;
  border-color: #e2001a;
}

/* Le rendu natif étant désactivé, le crochet se dessine à la main :
   deux bordures d'un carré, pivotées de 45 degrés. */
.formulaire-sombre input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* L'anneau rouge pâle de la version claire disparaît sur fond noir :
   on le renforce. */
.formulaire-sombre .ff-el-form-control:focus {
  box-shadow: 0 0 0 3px rgba(226, 0, 26, 0.45) !important;
}

/* Le message de confirmation doit rester lisible sur le fond noir */
.formulaire-sombre .ff-message-success,
.formulaire-sombre .ff_submit_success,
.formulaire-sombre .ff-message-success p {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
}

/* ==========================================================================
   12e. PAGE DE CONFIRMATION
   ========================================================================== */

.section-confirmation p,
.section-confirmation h1 {
  max-width: 640px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.section-confirmation img {
  max-width: 180px;
  height: auto;
}

/* ==========================================================================
   17. PAGES INTÉRIEURES ET STAGES
   ========================================================================== */

/* --- Canevas commun aux pages intérieures ---
   Ces classes ne parlent pas de cinéma : elles serviront telles quelles
   aux pages ateliers, yoga et conférences. */

/* Surtitre — situe la page avant même que le titre soit lu */
.surtitre {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  font-size: 15px;
  color: #6b6b6b;
}

/* Chapô — paragraphe d'accroche sous le titre. La largeur est plus
   courte que celle du conteneur : une ligne de 680 px se lit d'un trait. */
.chapo {
  max-width: 680px;
  margin-top: 12px !important;
  font-size: 18px;
  line-height: 1.65;
  color: #3a3a3a;
}

/* Paragraphe de réassurance, juste sous le chapô */
.ligne-rassurance {
  max-width: 680px;
  margin-top: 12px !important;
  font-size: 15px;
  color: #5a5a5a;
}

/* Emplacement d'image en attente du fichier définitif.
   À supprimer de la feuille de style le jour où toutes les photos
   sont en place. */
.zone-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #f0f0f0;
  border: 1px dashed #c4c4c4;
  border-radius: 8px;
  color: #8a8a8a;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.zone-photo.format-entete { aspect-ratio: 21 / 7; }
.zone-photo.format-large { aspect-ratio: 16 / 9; }
.zone-photo.format-paysage { aspect-ratio: 4 / 3; }
.zone-photo.format-portrait { aspect-ratio: 3 / 4; }

/* --- Le déroulé en étapes ---
   Même principe que .grille-cartes : la grille égalise les hauteurs
   de ligne d'elle-même. */

.grille-etapes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.etape {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 22px;
  height: 100%;
}

/* Le rang de la journée passe par la couleur et la casse plutôt que
   par un chiffre en gros : il situe sans prendre la vedette au titre. */
.etape-jour {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e2001a;
}

.etape h3 {
  margin: 0 0 8px !important;
  font-size: 18px;
}

.etape p {
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.6;
  color: #4a4a4a;
}

/* --- Galerie du stage --- */

.galerie-stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.galerie-stage > * {
  margin: 0 !important;
  max-width: none !important;
}

.galerie-stage img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* --- Façade vidéo, variante Vimeo ---
   La géométrie vient de .facade-video (section 6b) : seule la largeur
   change, le film mérite plus de place qu'un portrait d'équipe. */

.facade-vimeo {
  max-width: 840px;
}

/* --- Informations pratiques ---
   Piste fixe pour l'intitulé : les lignes s'alignent entre elles
   quelle que soit la longueur du mot. */

.liste-infos {
  list-style: none;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  padding: 0;
  display: grid;
  row-gap: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: #4a4a4a;
}

.liste-infos li {
  display: grid;
  grid-template-columns: 110px 1fr;
  column-gap: 12px;
  align-items: baseline;
}

.liste-infos strong {
  font-weight: 600;
  color: #3a3a3a;
}

/* Précision de tarif, sous le montant */
.carte-tarif .tarif-detail {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #6b6b6b;
}

/* --- Contact direct --- */

.contact-stage {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  font-size: 15px;
  line-height: 1.7;
  color: #4a4a4a;
}

.contact-stage a {
  color: #4a4a4a;
  text-decoration: none;
}

.contact-stage a:hover {
  color: #e2001a;
  text-decoration: underline;
}

/* --- En-tête de page en deux colonnes ---
   Le texte porte la page, la photo l'accompagne. Gabarit repris de
   la section philosophie de l'accueil. */

.entete-colonnes {
  gap: 48px !important;
  align-items: center !important;
  margin-top: 48px !important;
}

.entete-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Le bloc Image natif enveloppe l'image dans une figure :
   on annule ses marges pour qu'elle remplisse la colonne. */
.entete-photo figure {
  margin: 0 !important;
}

/* Le recadrage en 3/4 coupe une photo verticale : on privilégie
   le bas, là où se trouvent les mains. */
.entete-photo img {
  object-position: center 70%;
}

/* --- Bio de l'intervenant, version page de stage ---
   Reprend .bloc-personne de la section 6b ; seul le cadre change. */

.bloc-intervenant {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 28px;
  margin-top: 24px !important;
}

.bloc-intervenant img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Ligne de références — sélections, festivals, lieux.
   Même principe que .verrou-youtube : un filet détache la preuve
   du texte de présentation. */
.references-personne {
  max-width: 640px;
  margin: 18px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid #eaeaea;
  font-size: 14px;
  line-height: 1.7;
  color: #4a4a4a;
}

.references-personne strong {
  font-weight: 600;
  color: #3a3a3a;
}

/* Galerie Vimeo intégrée — le plugin impose ses propres marges,
   qu'on ramène au rythme du bloc. */
.galerie-vimeo {
  margin-top: 24px;
}

.galerie-vimeo-titre {
  margin: 0 0 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0a0a0a;
}

.zone-inscription {
  margin-top: 48px;
}

/* Le display: none de .masque doit primer sur le display: grid du li. */
.liste-infos li.masque {
  display: none;
}

/* --- Familles de sujets : en-tête ---
   L'icône colorée distingue le terrain d'un coup d'œil. Le fond
   reste blanc partout : la couleur se limite à la pastille d'icône
   et au filet, sinon quatre fonds colorés à la suite fatiguent. */

.famille-sujets {
  margin-top: 56px;
}

.famille-sujets:first-of-type {
  margin-top: 32px;
}

.famille-entete {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eaeaea;
}

/* Pastille d'icône — 42 px, arrondie, teintée par terrain */
.famille-icone {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.famille-icone svg {
  width: 22px;
  height: 22px;
}

/* Les quatre teintes reprennent celles des pastilles d'activité,
   plus un bleu pour le quatrième terrain. */
.terrain-jouer .famille-icone { background: #fdebed; color: #e2001a; }
.terrain-jouer .famille-entete { border-bottom-color: #f5d4d8; }

.terrain-geste .famille-icone { background: #fff6e8; color: #8a5a00; }
.terrain-geste .famille-entete { border-bottom-color: #f0e2ca; }

.terrain-creer .famille-icone { background: #e8f4ea; color: #2d6a2d; }
.terrain-creer .famille-entete { border-bottom-color: #cfe4d3; }

.terrain-oreille .famille-icone { background: #e9eef5; color: #2d4f7c; }
.terrain-oreille .famille-entete { border-bottom-color: #d2dceb; }

.famille-texte {
  min-width: 0;
}

.famille-titre {
  margin: 0 0 2px !important;
  font-size: 20px;
  font-weight: 600;
  color: #0a0a0a;
}

.famille-intro {
  max-width: 640px;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.6;
  color: #6b6b6b;
}

/* Trois pistes plutôt que deux : les cartes sont plus courtes ici
   que dans la grille d'activités de l'accueil. */
.grille-sujets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.grille-sujets > * {
  margin: 0 !important;
  max-width: none !important;
}

.sujet {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 18px 20px;
  height: 100%;
}

.sujet h4 {
  margin: 0 0 6px !important;
  font-size: 16px;
  font-weight: 600;
  color: #0a0a0a;
}

.sujet p {
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.6;
  color: #4a4a4a;
}

/* --- Emplacements de photo, avec leurs dimensions ---
   Le format est imposé par le CSS : produisez au plus proche,
   le recadrage fait le reste. */

.zone-photo.format-portrait-entete { aspect-ratio: 3 / 4; }
.zone-photo.format-carre { aspect-ratio: 1 / 1; }

/* --- Déroulement d'un cours ---
   Les étapes ne sont pas des cartes : ce sont des moments qui
   s'enchaînent. Un filet vertical les relie, un point marque
   chacune d'elles. */

.deroule-cours {
  list-style: none;
  margin: 0 !important;
  padding: 0 0 0 26px;
  position: relative;
}

/* Le filet court du centre du premier point au centre du dernier,
   jamais au-delà. */
.deroule-cours::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: #e0e0e0;
}

.deroule-cours li {
  position: relative;
  margin-bottom: 26px;
}

.deroule-cours li:last-child {
  margin-bottom: 0;
}

.deroule-cours li::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #e2001a;
}

.deroule-cours h3 {
  margin: 0 0 4px !important;
  font-size: 17px;
  font-weight: 600;
  color: #0a0a0a;
}

.deroule-cours p {
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.6;
  color: #4a4a4a;
}

/* Colonnes du déroulement : le texte porte, la photo accompagne. */
.colonnes-deroule {
  gap: 48px !important;
  align-items: center !important;
  margin-top: 32px !important;
}

.colonnes-deroule img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.zone-photo.format-deroule { aspect-ratio: 4 / 5; }

/* --- Le studio entre deux cours ---
   Le noyau de la proposition. Le filet rouge à gauche reprend celui
   de la carte piano : c'est le même signal, réservé à ce qui compte
   le plus sur la page. */

.bloc-noyau {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-left: 3px solid #e2001a;
  border-radius: 8px;
  padding: 26px 28px;
  margin-top: 32px !important;
}

.bloc-noyau h3 {
  margin: 0 0 10px !important;
  font-size: 20px;
  font-weight: 600;
  color: #0a0a0a;
}

.bloc-noyau p {
  max-width: 680px;
  margin: 0 0 12px !important;
  font-size: 15px;
  line-height: 1.7;
  color: #4a4a4a;
}

.bloc-noyau p:last-child {
  margin-bottom: 0 !important;
}

.bloc-noyau strong {
  font-weight: 600;
  color: #0a0a0a;
}

/* --- Variante accueil du bloc noyau ---
   Sur la page du cours de piano, le filet rouge signale le noyau :
   il y est unique. Sur l'accueil, la carte piano porte déjà ce
   signal — un second filet les affaiblirait tous les deux.
   Ici, c'est le fond gris qui distingue. */

.bloc-noyau.noyau-accueil {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-left: 1px solid #eaeaea;
  padding: 28px 32px;
  margin-top: 40px !important;
}

.bloc-noyau.noyau-accueil p {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.7;
}

/* --- Témoignages, version page ---
   Les textes sont ici donnés en entier : leurs longueurs sont
   très inégales. Une grille alignerait les hauteurs et creuserait
   des vides — on passe donc en colonnes, où chaque carte garde
   la sienne et où le navigateur équilibre l'ensemble. */

.temoignages-page .grille-temoignages {
  display: block;
  column-count: 2;
  column-gap: 28px;
  margin-top: 32px;
}

/* break-inside empêche une carte d'être coupée en deux par
   le passage d'une colonne à l'autre. */
.temoignages-page .carte-temoignage {
  break-inside: avoid;
  margin-bottom: 24px;
  padding: 26px 28px;
  height: auto;
}

.temoignages-page .temoin-citation {
  padding-left: 14px;
  border-left: 2px solid #f0d4d8;
  font-size: 15px;
  line-height: 1.7;
}

/* Les témoignages longs font plusieurs paragraphes : ils vivent
   tous dans le même bloc à filet. */
.temoignages-page .temoin-citation p {
  margin: 0 0 12px;
}

.temoignages-page .temoin-citation p:last-child {
  margin-bottom: 0;
}

.temoignages-page .temoin-citation strong {
  font-weight: 600;
  color: #2a2a2a;
}

/* La section 6c pose margin: 0 !important sur les enfants de la
   grille : le raccourci écrase aussi le margin-bottom ci-dessus.
   Il faut donc le reposer avec la même force. */
.temoignages-page .grille-temoignages > .carte-temoignage {
  margin-bottom: 24px !important;
}

/* --- Liens de prolongement ---
   Deux sorties latérales depuis la bio : la galerie de vidéos et
   les formations. Ce ne sont pas des appels à l'action, juste des
   portes ouvertes — d'où le traitement discret. */

.liens-prolongement {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 20px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid #eaeaea;
  font-size: 15px;
}

.liens-prolongement a {
  color: #e2001a;
  text-decoration: none;
}

.liens-prolongement a:hover {
  text-decoration: underline;
}

/* --- Modalités ---
   Deux colonnes de paires intitulé/valeur. Les modalités se
   consultent : on ne les lit pas d'un bout à l'autre. */

.grille-modalites {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 40px;
  margin-top: 28px;
}

.modalite {
  padding-top: 14px;
  border-top: 1px solid #eaeaea;
}

.modalite h4 {
  margin: 0 0 4px !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.modalite p {
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.6;
  color: #3a3a3a;
}

.modalite a {
  color: #3a3a3a;
  text-decoration: underline;
  text-decoration-color: #c4c4c4;
}

.modalite a:hover {
  color: #e2001a;
  text-decoration-color: #e2001a;
}

/* --- Page de réservation ---
   Page de destination courte : on y arrive en sachant ce qu'on veut.
   Rien ne doit détourner du calendrier. */

 /* --- Choix de l'activité ---
   Des ancres plutôt que des onglets : chaque activité garde son
   adresse propre, et rien n'est caché à celui qui descend. */

.choix-activite {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0 !important;
}

.choix-activite a {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* Une teinte par activité, celle du code couleur du site :
   rouge pour le piano, vert pour le yoga. Le fond ne se remplit
   qu'au survol. */
.choix-piano {
  border-color: #f5c2c8;
  color: #e2001a;
}

.choix-piano:hover {
  border-color: #e2001a;
  background: #fdebed;
}

.choix-yoga {
  border-color: #c5ddca;
  color: #2d6a2d;
}

.choix-yoga:hover {
  border-color: #2d6a2d;
  background: #e8f4ea;
}

/* Chaque activité occupe sa propre section : c'est l'alternance
   des fonds qui les sépare, plus besoin de filet ici. */
.bloc-activite {
  margin-top: 40px !important;
}

.titre-activite {
  margin: 0 0 6px !important;
  font-size: 24px;
  font-weight: 600;
  color: #0a0a0a;
}

.intro-activite {
  max-width: 620px;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.65;
  color: #4a4a4a;
}

/* L'ancre atterrit sous l'en-tête fixe : on réserve la hauteur
   nécessaire pour que le titre reste visible. */
:target {
  scroll-margin-top: 100px;
}  

/* Le chapô est borné à 680 px : sans consigne, la mise en page
   contrainte le centre dans la largeur large. On le recale à gauche,
   comme le titre au-dessus. */
.page-reserver .chapo {
  max-width: 620px;
}

/* Rappel des tarifs en une ligne, sous le titre : l'information
   est utile mais ne mérite pas de cartes ici. */
.rappel-tarifs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 20px 0 0 !important;
  font-size: 15px;
  color: #4a4a4a;
}

.rappel-tarifs strong {
  font-weight: 600;
  color: #0a0a0a;
}

/* Secours propre à chaque activité : il suit son calendrier, dans
   sa section. Variante de .bloc-secours, qui porte un filet et un
   écart encore utiles ailleurs. */
.secours-activite {
  margin-top: 32px !important;
}

.secours-activite h3 {
  margin: 0 0 6px !important;
  font-size: 17px;
  font-weight: 600;
  color: #0a0a0a;
}

.secours-activite p {
  max-width: 640px;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.7;
  color: #4a4a4a;
}

.secours-activite a {
  color: #4a4a4a;
  text-decoration: underline;
  text-decoration-color: #c4c4c4;
}

.secours-activite a:hover {
  color: #e2001a;
  text-decoration-color: #e2001a;
}

/* Secours si le calendrier ne convient pas — discret, en fin de page. */
.bloc-secours {
  margin-top: 56px !important;
  padding-top: 24px;
  border-top: 1px solid #eaeaea;
}

.bloc-secours h2 {
  margin: 0 0 8px !important;
  font-size: 20px !important;
}

.bloc-secours p {
  max-width: 640px;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.7;
  color: #4a4a4a;
}

.bloc-secours a {
  color: #4a4a4a;
  text-decoration: underline;
  text-decoration-color: #c4c4c4;
}

.bloc-secours a:hover {
  color: #e2001a;
  text-decoration-color: #e2001a;
}



/* --- Page agenda ---
   Deux informations de nature différente : le rythme habituel de
   la semaine, et les dates ponctuelles. Un filet les sépare. */

.page-agenda .chapo {
  max-width: 640px;
}

/* Les prochaines dates viennent après la grille : un titre de
   niveau 3 suffit à les distinguer sans ouvrir une section. */
.titre-dates {
  margin: 0 0 4px !important;
  font-size: 20px;
  font-weight: 600;
  color: #0a0a0a;
}

.intro-dates {
  max-width: 640px;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.6;
  color: #6b6b6b;
}

/* --- Cadrage du héros ---
   L'image est en 2:1, le bandeau plus étroit : le recadrage par
   le centre coupe le bas de l'instrument. On privilégie donc le
   bas sur bureau, et on décale vers la droite sur mobile pour
   dégager le mur de gauche. */
.hero-studio .stk-img {
  object-position: center 70% !important;
}

/* ===============================================================
   17b. PAGE VIDÉOS  (/videos)
   =============================================================== */

/* --- 17b.0 Cadrage ---
   Aucune largeur, aucune marge, aucun padding : le cadrage vient
   entièrement du Groupe parent, comme sur les autres pages du site.
   Toute valeur posée ici s'ajouterait à la sienne et décalerait la page. */

.s1170-vid-bloc,
.s1170-vid-inner,
.s1170-vid-galerie,
.s1170-vid-galerie > * {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* --- 17b.1 En-tête --- */
.s1170-vid-intro { padding-block: 88px 44px; }
.s1170-vid-rule { width: 40px; height: 3px; background: #E2001A; }
.s1170-vid-h1 {
  margin: 22px 0 0; max-width: 820px;
  font-family: Montserrat, Helvetica, Arial, sans-serif; font-weight: 700;
  font-size: 58px; line-height: 1.06; letter-spacing: -0.02em; color: #0A0A0A;
}
.s1170-vid-chapo {
  margin: 26px 0 0; max-width: 680px;
  font-size: 20px; line-height: 1.55; color: #3A3A3A;
}

/* --- 17b.2 Bandeau rouge --- */
.s1170-vid-bandeau {
  box-sizing: border-box; background: #E2001A; padding: 26px 32px;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 20px;
}
.s1170-vid-bandeau-texte {
  margin: 0;
  font-family: Montserrat, Helvetica, Arial, sans-serif; font-weight: 600;
  font-size: 21px; line-height: 1.35; color: #ffffff;
}
.s1170-vid-bandeau-bouton {
  flex-shrink: 0; display: inline-block; background: #ffffff; color: #0A0A0A;
  text-decoration: none; padding: 15px 26px;
  font-family: Montserrat, Helvetica, Arial, sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: 0.02em;
}
.s1170-vid-bandeau-bouton:hover { background: #0A0A0A; color: #ffffff; }

/* --- 17b.3 Intertitres de section --- */
.s1170-vid-section { padding-block: 74px 26px; }
.s1170-vid-section--sep {
  margin-top: 50px; padding-top: 42px; border-top: 1px solid #E6E6E6;
}
.s1170-vid-h2 {
  margin: 0;
  font-family: Montserrat, Helvetica, Arial, sans-serif; font-weight: 700;
  font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; color: #0A0A0A;
}
.s1170-vid-soustitre {
  margin: 12px 0 0; max-width: 620px;
  font-size: 17px; line-height: 1.5; color: #5A5A5A;
}

/* --- 17b.5 Clôture --- */
.s1170-vid-fin {
  box-sizing: border-box; margin-top: 64px; background: #0A0A0A; padding: 54px 48px;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 30px;
}
.s1170-vid-fin-texte { max-width: 620px; }
.s1170-vid-fin-titre {
  margin: 0;
  font-family: Montserrat, Helvetica, Arial, sans-serif; font-weight: 700;
  font-size: 28px; line-height: 1.25; color: #ffffff;
}
.s1170-vid-fin-horaires {
  margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: #C8C8C8;
}
.s1170-vid-fin-bouton {
  flex-shrink: 0; display: inline-block; background: #E2001A; color: #ffffff;
  text-decoration: none; padding: 18px 32px;
  font-family: Montserrat, Helvetica, Arial, sans-serif; font-weight: 700;
  font-size: 16px; letter-spacing: 0.02em;
}
.s1170-vid-fin-bouton:hover { background: #ffffff; color: #0A0A0A; }

/* --- 17b.6 Ressources --- */
.s1170-vid-ressources {
  box-sizing: border-box; margin-top: 76px; background: #F2F2F2; padding: 44px 48px;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 28px;
}
.s1170-vid-ressources-texte { max-width: 640px; }
.s1170-vid-ressources .s1170-vid-h2 { margin-top: 16px; font-size: 30px; }
.s1170-vid-ressources-ligne {
  margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: #3A3A3A;
}
.s1170-vid-ressources-bouton {
  flex-shrink: 0; display: inline-block; background: #0A0A0A; color: #ffffff;
  text-decoration: none; padding: 18px 32px;
  font-family: Montserrat, Helvetica, Arial, sans-serif; font-weight: 700;
  font-size: 16px; letter-spacing: 0.02em;
}
.s1170-vid-ressources-bouton:hover { background: #E2001A; }



/* --- 17b.9 En-tête de chaîne ---
   Le plugin le centre ; on le recale sur l'axe gauche du site. */
.s1170-vid-galerie .wpsr-yt-header,
.s1170-vid-galerie .wpsr-yt-header-inner,
.s1170-vid-galerie .wpsr-yt-header-info {
  justify-content: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* --- 17b.11 Colonnes du plugin ---
   Les colonnes portent une gouttière de 15 px qui joue aussi sur les
   bords du flux. On l'annule partout, et on rend l'écart entre vignettes
   par un gap de grille — qui ne s'applique qu'ENTRE les pistes.
   Le sélecteur passe par l'identifiant du flux : les règles du plugin
   étant déjà en !important, seule une spécificité supérieure les dépasse. */

#wpsr-yt-feed-382 [class*="wpsr-col"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#wpsr-yt-feed-382 .wpsr-yt-all-feed {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
}

#wpsr-yt-feed-382 .wpsr-yt-all-feed > [class*="wpsr-col"] {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
}

/* --- 17b.12 Galerie des formats courts ---
   Même traitement que la 17b.11, sur le second flux (template 511).
   Cinq pistes plutôt que trois : les vignettes sont plus petites. */

#wpsr-yt-feed-511 [class*="wpsr-col"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#wpsr-yt-feed-511 .wpsr-yt-all-feed {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
}

#wpsr-yt-feed-511 .wpsr-yt-all-feed > [class*="wpsr-col"] {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
}

/* --- 17b.13 Parcours vidéo --- */
#wpsr-yt-feed-528 [class*="wpsr-col"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#wpsr-yt-feed-528 .wpsr-yt-all-feed {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
}

#wpsr-yt-feed-528 .wpsr-yt-all-feed > [class*="wpsr-col"] {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
}

/* --- 17b.14 Bandeau de consentement ---
   Discret mais présent : quelqu'un qui a refusé les cookies YouTube
   verrait sinon une pop-up tourner sans fin. Le lien rouvre le panneau
   iubenda — classe officielle iubenda-cs-preferences-link. */

.s1170-vid-consentement {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 18px;
  background: #f7f7f7;
  border: 1px solid #eaeaea;
  border-radius: 6px;
}

.s1170-vid-consentement-icone {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #8a8a8a;
}

.s1170-vid-consentement-texte {
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.55;
  color: #4a4a4a;
}

.s1170-vid-consentement-texte a {
  font-weight: 600;
  color: #e2001a;
  text-decoration: none;
}

.s1170-vid-consentement-texte a:hover {
  text-decoration: underline;
}

/* --- 17b.15 Encart ressources, version compacte ---
   Variante allégée du bandeau 17b.6. Sur la page parcours, le seul
   bouton doit rester « Réserver un cours » : ici, le lien reste un lien. */

.s1170-vid-fiches {
  box-sizing: border-box;
  margin-top: 56px;
  padding: 22px 26px;
  background: #f7f7f7;
  border: 1px solid #eaeaea;
  border-radius: 6px;
}

.s1170-vid-fiches-rule {
  width: 26px;
  height: 2px;
  background: #e2001a;
}

.s1170-vid-fiches-titre {
  margin: 12px 0 0 !important;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #0a0a0a;
}

.s1170-vid-fiches-texte {
  max-width: 640px;
  margin: 6px 0 0 !important;
  font-size: 16px;
  line-height: 1.55;
  color: #4a4a4a;
}

.s1170-vid-fiches-texte a {
  font-weight: 600;
  color: #e2001a;
  text-decoration: none;
}

.s1170-vid-fiches-texte a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   17c. PAGE FICHES  (/ressources)
   ========================================================================== */


/* --- 17c.0 Accès au compte, sous le chapô ---
   Le bouton rouge est plein, le second reste un lien : créer un compte
   est l'action, se connecter est le raccourci de ceux qui en ont déjà un. */

.s1170-fic-acces {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.s1170-fic-acces-bouton {
  display: inline-block;
  padding: 14px 26px;
  background: #e2001a;
  color: #ffffff;
  text-decoration: none;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease;
}

.s1170-fic-acces-bouton:hover {
  background: #b80016;
  color: #ffffff;
}

.s1170-fic-acces-lien {
  padding: 14px 2px;
  font-size: 16px;
  color: #3a3a3a;
  text-decoration: underline;
  text-decoration-color: #c8c8c8;
  text-underline-offset: 3px;
}

.s1170-fic-acces-lien:hover {
  color: #e2001a;
  text-decoration-color: #e2001a;
}

/* Les deux liens d'accès ne servent qu'aux visiteurs déconnectés. */
body.logged-in .s1170-fic-acces { display: none; }

/* --- 17c.1 Les deux panneaux ---
   Le flex-wrap suffit : sous 900 px environ, le panneau droit passe
   sous la liste de lui-même, sans media query. */

.s1170-fic {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: flex-start;
  margin-top: 12px;
}

.s1170-fic-liste { flex: 1 1 320px; min-width: 0; }
.s1170-fic-apercus { flex: 999 1 540px; min-width: 0; }

/* --- 17c.2 La recherche --- */

.s1170-fic-label {
  display: block;
  margin: 0 0 8px !important;
  font-size: 13.5px;
  font-weight: 600;
  color: #3a3a3a;
}

.s1170-fic-rech {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 15px;
  color: #0a0a0a;
  background: #ffffff;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Même anneau rouge que les champs FluentForms, section 12d */
.s1170-fic-rech:focus {
  border-color: #e2001a;
  box-shadow: 0 0 0 3px rgba(226, 0, 26, 0.12);
  outline: none;
}

/* --- 17c.3 Les lignes de la liste ---
   Ce sont de vrais boutons : ils changent l'affichage de la page
   plutôt que d'y naviguer, et le clavier les atteint tout seul. */

.s1170-fic-rangees { margin-top: 16px; }

.s1170-fic-rangee {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  border: none;
  border-radius: 5px;
  background: transparent;
  font-family: var(--wp--preset--font-family--body);
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  color: #3a3a3a;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.s1170-fic-rangee:hover { background: #f4f4f4; }

.s1170-fic-rangee.est-active {
  background: #f2f2f2;
  color: #0a0a0a;
  font-weight: 700;
}

.s1170-fic-puce {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  margin-top: 7px;
  border-radius: 50%;
  background: #d4d4d4;
}

.s1170-fic-rangee.est-active .s1170-fic-puce { background: #e2001a; }

/* Posée par la recherche sur les lignes écartées */
.s1170-fic-rangee.est-filtree { display: none; }

.s1170-fic-vide {
  display: none;
  margin: 16px 0 0 13px !important;
  font-size: 15px;
  color: #6b6b6b;
}

.s1170-fic-liste.est-vide .s1170-fic-vide { display: block; }

/* --- 17c.4 L'aperçu ---
   Toutes les fiches vivent dans la page ; une seule porte est-visible. */

.s1170-fic-apercu { display: none; }

.s1170-fic-apercu.est-visible {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: flex-start;
}

.s1170-fic-feuille { flex: 0 1 320px; }

/* Le ratio A4 est imposé ici : tes aperçus peuvent varier de quelques
   pixels sans que la mise en page bouge. */
.s1170-fic-feuille img {
  width: 100%;
  aspect-ratio: 1 / 1.414;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(10, 10, 10, 0.09);
}

.s1170-fic-detail { flex: 1 1 260px; min-width: 0; }

.s1170-fic-titre {
  margin: 0 !important;
  font-size: 28px;
  line-height: 1.2;
  color: #0a0a0a;
}

.s1170-fic-texte {
  max-width: 540px;
  margin: 14px 0 0 !important;
  font-size: 16px;
  line-height: 1.6;
  color: #4a4a4a;
}

.s1170-fic-meta {
  margin: 18px 0 0 !important;
  font-size: 14px;
  color: #767676;
}

.s1170-fic-bouton {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  background: #e2001a;
  color: #ffffff;
  text-decoration: none;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease;
}

.s1170-fic-bouton:hover {
  background: #b80016;
  color: #ffffff;
}

/* --- 17c.5 Le renvoi vers la vidéo ---
   Petit format assumé : la vidéo situe, elle ne reprend pas la vedette
   au document, qui est l'objet de la page. */

.s1170-fic-video {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eaeaea;
}

.s1170-fic-video a {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.s1170-fic-vignette {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 116px;
}

.s1170-fic-vignette img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.s1170-fic-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}

.s1170-fic-video-texte {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #e2001a;
}

.s1170-fic-video a:hover .s1170-fic-video-texte { text-decoration: underline; }

/* --- 17c.7 Rappel de consentement ---
   Posé une seule fois sous les aperçus. Borné et poussé à droite pour
   tomber sous la colonne de détail, près du lien vers la vidéo, plutôt
   que de courir sous toute la largeur du panneau. */

.s1170-fic-consentement {
  max-width: 520px;
  margin: 26px 0 0 auto !important;
  padding-top: 16px;
  border-top: 1px solid #eaeaea;
  font-size: 14px;
  line-height: 1.55;
  color: #6b6b6b;
}

.s1170-fic-consentement a {
  font-weight: 600;
  color: #e2001a;
  text-decoration: none;
}

.s1170-fic-consentement a:hover { text-decoration: underline; }

/* ==========================================================================
   13. TABLETTE LARGE — jusqu'à 900 px
   ========================================================================== */

/* Bascule entre le tableau de la semaine et la liste verticale */
@media (max-width: 900px) {
  .semaine-desktop {
    display: none;
  }

  .semaine-mobile {
    display: block;
  }

/* --- Page vidéos : titres resserrés --- */

  .s1170-vid-h1 { font-size: 44px; }
  .s1170-vid-chapo { font-size: 18px; }
  .s1170-vid-h2 { font-size: 28px; }
  .s1170-vid-ressources .s1170-vid-h2 { font-size: 26px; }
  .s1170-vid-fin-titre { font-size: 24px; }

  #wpsr-yt-feed-382 .wpsr-yt-all-feed {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #wpsr-yt-feed-511 .wpsr-yt-all-feed {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   14. MOBILE ET TABLETTE — jusqu'à 781 px
   ========================================================================== */

@media (max-width: 781px) {
  /* --- Bandeau : cadre --- */

  .bandeau-top {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Empêcher les retours à la ligne internes de Stackable
     (sans cette règle, les icônes sociales s'empilent verticalement) */
  .bandeau-top .stk-row,
  .bandeau-top .stk-button-group {
    flex-wrap: nowrap !important;
  }

  /* Centrer les deux colonnes du bandeau sur le même axe */
  .bandeau-top > .wp-block-group,
  .bandeau-top .wp-block-group.alignwide {
    align-items: center !important;
  }

  /* --- Bandeau : contacts à gauche --- */

  /* Téléphone et email empilés sur deux lignes */
  .bandeau-top .bandeau-contacts .stk-inner-blocks {
    flex-direction: column !important;
    align-items: flex-start !important;
    row-gap: 0 !important;
  }

  .bandeau-top .bandeau-contacts {
    min-width: 0;
  }

  .bandeau-top .bandeau-contacts .stk-button {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .bandeau-top .bandeau-contacts .stk-button__inner-text {
    font-size: 15px;
  }

  /* --- Bandeau : réseaux et compte à droite --- */

  .bandeau-top .bandeau-liens {
    gap: 18px;
    flex-shrink: 0;
  }

  .bandeau-top .bandeau-liens .stk-inner-blocks {
    column-gap: 18px !important;
  }

  /* « Mon espace » réduit à son icône */
  .bandeau-top .bandeau-droite .stk-button__inner-text {
    display: none;
  }

  /* Séparateur superflu sur petit écran */
  .sep-bandeau {
    display: none;
  }

  /* Espacement géré par le gap, pas par les paddings de bouton */
  .bandeau-top .stk-block-button .stk-button,
  .bandeau-top .stk-block-icon-button .stk-button {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Navigation --- */

 

  /* --- Contenu de page --- */

   .bloc-texte {
    padding-left: var(--wp--preset--spacing--medium) !important;
    padding-right: var(--wp--preset--spacing--medium) !important;
    padding-top: 20px !important;
  }

  /* --- Section philosophie --- */

  .section-philosophie {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .section-philosophie img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 65%;
  }

  /* --- Section offre --- */

  .section-offre {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .section-equipe {
    padding-top: 32px !important;
  }

  .section-equipe > :first-child {
    margin-top: 0 !important;
  }

  /* --- Cartes d'activité --- */

  .grille-cartes {
    grid-template-columns: 1fr;
  }
  .personne-texte {
    margin-top: 14px !important;
  }

  /* Les colonnes s'empilent : la hauteur forcée n'a plus lieu d'être */
  .grille-activites .wp-block-column {
    display: block;
  }

  .grille-activites .carte-activite {
    height: auto;
  }

  /* En mobile, les cartes sont en pleine largeur : rien ne justifie
     un texte plus petit que celui de la carte piano. */
  .grille-cartes .carte-activite > p:not(.lien-carte) {
    font-size: 16px !important;
  }

  /* --- Promesses : icône à gauche, texte à droite --- */

  .grille-promesses .wp-block-column {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Deux colonnes : piste fixe pour l'icône, le reste pour le texte.
     La largeur fixe est ce qui aligne les trois promesses entre elles. */
  .promesse {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    text-align: left;
    border-right: none;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 16px;
  }

  /* L'icône : colonne 1, centrée sur toute la hauteur de la carte */
  .promesse > *:first-child {
    grid-column: 1;
    grid-row: 1 / -1;
    justify-self: center;
    align-self: center;
    margin: 0 !important;
  }

  /* Titre et sous-titre : empilés dans la colonne 2 */
  .promesse > * + * {
    grid-column: 2;
    margin: 0;
  }

  .promesse svg {
    margin: 0;
    display: block;
  }

  .grille-promesses .wp-block-column:last-child .promesse {
    border-bottom: none;
  }

  /* --- Tarifs : deux colonnes plutôt qu'une pile --- */

  .grille-tarifs {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .grille-tarifs .wp-block-column {
    flex-basis: auto !important;
  }

  /* --- Jonction tarifs / horaires resserrée --- */

  .section-tarifs {
    padding-bottom: 24px !important;
  }

  .section-horaires {
    padding-top: 32px !important;
  }

  /* Le titre porte sa propre marge haute en plus du padding */
  .section-horaires > :first-child {
    margin-top: 0 !important;
  }

  /* --- Bloc newsletter --- */

  .bloc-newsletter {
    padding: 28px 20px;
  }

  /* Les colonnes s'empilent : l'écart horizontal devient vertical */
  .colonnes-newsletter {
    gap: 24px;
  }

  /* --- Témoignages : une seule colonne --- */

  .grille-temoignages {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: 0;
  }

    /* --- Pages de stage --- */

  .grille-etapes {
    grid-template-columns: 1fr;
  }

  .galerie-stage {
    grid-template-columns: repeat(2, 1fr);
  }

  .zone-photo.format-entete {
    aspect-ratio: 3 / 2;
  }

  .chapo {
    font-size: 17px;
  }

  .liste-infos li {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

    .entete-colonnes {
    gap: 24px !important;
    margin-top: 24px !important;
  }

  .temoignages-page .grille-temoignages {
    column-count: 1;
    max-width: 480px;
  }

  .temoignages-page .carte-temoignage {
    padding: 20px;
  }

  /* En portrait, la photo mangerait tout l'écran avant le texte */
  .entete-photo img {
    aspect-ratio: 4 / 3;
  }

    .bloc-intervenant {
    padding: 20px;
  }

  .bloc-intervenant img {
    aspect-ratio: 4 / 3;
    max-width: 280px;
  }

  .formulaire-studio .fluentform {
    padding: 20px;
  }

  /* Les deux formules l'une sous l'autre : côte à côte, les
     libellés se couperaient. */
  .formulaire-studio .ff-el-form-check.ff-el-form-check-inline {
    display: block;
  }

  .grille-sujets {
    grid-template-columns: 1fr;
  }

  .famille-sujets {
    margin-top: 36px;
  }

  .famille-entete {
    gap: 12px;
  }

    .colonnes-deroule {
    gap: 28px !important;
    margin-top: 24px !important;
  }

  .colonnes-deroule .zone-photo,
  .colonnes-deroule img {
    aspect-ratio: 4 / 3;
  }

  .bloc-noyau {
    padding: 20px;
  }

  .grille-modalites {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
  }

  .hero-studio .stk-img {
    object-position: 60% 70% !important;
  }

  /* La photo passe en tête sur mobile : on voit le lieu avant
     de lire. L'ordre du code reste inchangé. */
  .entete-colonnes {
    display: flex;
    flex-direction: column;
  }

  .entete-colonnes .wp-block-column:first-child {
    order: 2;
  }

  .entete-colonnes .entete-photo {
    order: 1;
  }

  /* --- Page vidéos --- */

   .s1170-vid-intro { padding-block: 56px 32px; }
  .s1170-vid-h1 { font-size: 34px; }

  .s1170-vid-section { padding-block: 48px 20px; }
  .s1170-vid-section--sep { margin-top: 36px; padding-top: 32px; }

  .s1170-vid-bandeau { padding: 22px; }
  .s1170-vid-bandeau-texte { font-size: 18px; }

  .s1170-vid-ressources { margin-top: 48px; padding: 28px 22px; }
  .s1170-vid-ressources .s1170-vid-h2 { font-size: 24px; }

  .s1170-vid-fin { margin-top: 44px; padding: 32px 22px; }
  .s1170-vid-fin-titre { font-size: 21px; }

  /* Les trois boutons passent en pleine largeur : au pouce, une cible
     large se rate moins. Le box-sizing évite que le padding déborde. */
  .s1170-vid-bandeau-bouton,
  .s1170-vid-ressources-bouton,
  .s1170-vid-fin-bouton {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  #wpsr-yt-feed-382 .wpsr-yt-all-feed {
  grid-template-columns: 1fr;
  }

  #wpsr-yt-feed-511 .wpsr-yt-all-feed {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .s1170-vid-consentement { padding: 12px 14px; gap: 10px; }
  .s1170-vid-consentement-texte { font-size: 14px; }

  .s1170-vid-fiches { margin-top: 40px; padding: 18px 20px; }
  .s1170-vid-fiches-titre { font-size: 17px; }
  .s1170-vid-fiches-texte { font-size: 15px; }

  .s1170-fic { gap: 32px; margin-top: 36px; }
  .s1170-fic-feuille { flex: 0 1 240px; }
  .s1170-fic-apercu.est-visible { gap: 24px; }
  .s1170-fic-titre { font-size: 23px; }
  .s1170-fic-bouton { width: 100%; box-sizing: border-box; justify-content: center; }
  .s1170-fic-acces-bouton { width: 100%; box-sizing: border-box; text-align: center; }
}

/* ==========================================================================
   14b. HAMBURGER — jusqu'à 599 px
   ========================================================================== */

/* Le bloc Navigation bascule en menu superposé. Les règles ci-dessous
   ne valent que dans cet état : les appliquer plus tôt comprime
   l'en-tête alors que le menu est encore déployé. */
@media (max-width: 599px) {

  /* Seul le logo se comprime ; boutons et hamburger restent entiers. */
  .wp-block-site-logo {
    min-width: 0;
    flex-shrink: 1;
  }

  .wp-block-site-logo img {
    max-width: 120px;
    width: 100%;
    height: auto;
  }

  /* Hamburger à droite des boutons d'action */
  .nav-ligne .wp-block-navigation {
    order: 2;
    flex-shrink: 0;
  }

  .nav-ligne .wp-block-buttons {
    order: 1;
    flex-shrink: 0;
  }

  /* Tout sur une ligne : logo, boutons, hamburger */
  .entete-ligne,
  .nav-ligne,
  .nav-ligne .wp-block-buttons {
    flex-wrap: nowrap !important;
  }

  /* Sans min-width: 0, un élément flex refuse de se comprimer
     en dessous de la largeur de son contenu, et la ligne déborde. */
  .entete-ligne,
  .nav-ligne,
  .nav-ligne .wp-block-buttons,
  .nav-ligne .wp-block-navigation {
    min-width: 0 !important;
  }

  .entete-ligne {
    overflow: hidden;
  }

  .nav-ligne {
    gap: 8px !important;
  }

  /* Le texte du bouton ne se coupe pas : c'est le padding qui cède. */
  .nav-ligne .wp-block-button__link {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Le hamburger est le dernier élément : il doit garder sa largeur
     entière, sinon il se fait rogner par le bord. */
  .nav-ligne .wp-block-navigation__responsive-container-open {
    flex-shrink: 0 !important;
    min-width: 40px;
    margin-left: 2px;
  }
}

/* Plage intermédiaire où quatre éléments ne tiennent plus sans
   resserrer les boutons. */
@media (max-width: 489px) {

  .nav-ligne .wp-block-navigation__responsive-container-open {
    display: flex !important;
    flex-shrink: 0 !important;
    min-width: 40px;
  }

  .nav-ligne .wp-block-button__link {
    font-size: 11px;
    padding: 8px 9px !important;
  }
}

/* ==========================================================================
   15. PETIT MOBILE — jusqu'à 420 px
   ========================================================================== */

@media (max-width: 420px) {

  .wp-block-site-logo {
    margin-right: auto;
  }

  .nav-ligne {
    gap: 6px !important;
  }

  .wp-block-button__link {
    font-size: 11px;
    padding: 8px 10px !important;
    white-space: nowrap;
  }

  .s1170-vid-h1 { font-size: 29px; }
  .s1170-vid-fin-titre { font-size: 19px; }
}

@media (max-width: 400px) {

  .nav-ligne .wp-block-button__link {
    font-size: 11px;
    padding: 8px 9px !important;
  }

  .nav-ligne .wp-block-buttons {
    gap: 6px !important;
  }
}

/* ==========================================================================
   16. PLAGE INTERMÉDIAIRE — de 782 à 1300 px
   ========================================================================== */

/* Entre la largeur maximale du site et le point de bascule mobile,
   le contenu du héros touche le bord : la mise en page contrainte
   limite la largeur sans poser de padding. */
@media (min-width: 782px) and (max-width: 1300px) {

  .bloc-texte {
    padding-left: var(--wp--preset--spacing--medium) !important;
    padding-right: var(--wp--preset--spacing--medium) !important;
  }
}