/* ============================================================
   SACEM PF — Composants de charte partagés
   ----
   Classes utilitaires à appliquer dans n'importe quel module
   Divi (champ « CSS Class » des paramètres avancés du module)
   pour respecter la charte sur toutes les pages.
   ============================================================ */

/* ============ Tokens layout (rappel) ============ */
/* Palette couleur + gradients + --sacem-white/--sacem-gray : source
   canonique unique dans assets/css/charte-tokens.css (sprint d'hygiène
   « tokens unifiés »). Ce fichier ne redéfinit plus que les tokens de
   layout qui lui sont propres et n'ont pas d'équivalent dans la charte. */
:root {
  /* --nav-height-desktop : hauteur de la nav Divi en desktop. Aligné
       sur --nav-height (88px) défini historiquement dans home.css —
       conservé pour rétro-compatibilité, mais le nouveau nom est plus
       explicite quand on a un mobile distinct.
     --nav-height-mobile  : hauteur de la nav Divi en mobile. Valeur
       initiale 80px (heuristique mobile classique) — à mesurer
       réellement et ajuster si la nav fait plus/moins haut. */
  --nav-height-desktop:  88px;
  --nav-height-mobile:   80px;
}

/* ============ Eyebrow (petit label majuscule au-dessus d'un titre) ============ */
/* Pattern home `.eyebrow` rapatrié ici (C1bis.2) : `inline-flex` + trait
   coloré ::before de 28×1px en `currentColor`. Le HTML reste un simple
   `<span class="sacem-eyebrow">…</span>`, le trait est ajouté en CSS. */
.sacem-eyebrow {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: var(--sacem-fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sacem-magenta);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.sacem-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.sacem-eyebrow--light { color: rgba(255,255,255,0.85); }
.sacem-eyebrow--light::before { background: rgba(255,255,255,0.6); }

/* Variante --on-dark (C1bis.2bis) : texte ET trait 100% blanc.
   Pour sections sur photo/gradient sombre (Hero photo C1bis.3, CTA final
   sur gradient, futures sections institutionnelles sur fond foncé). */
.sacem-eyebrow--on-dark { color: #fff; }
.sacem-eyebrow--on-dark::before { background: #fff; }

/* ============ Accent italique Fraunces avec gradient ============ */
/* Usage : <span class="sacem-accent">création</span> dans un titre  */
.sacem-accent {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  /* Équilibrage optique (C2.4bis) : à font-size CSS égale, Fraunces
     italic a une x-height plus petite qu'Outfit. Sans compensation,
     l'accent paraît visuellement ~5 % plus petit que le titre
     principal. Le 1.05em rétablit l'équilibre visuel. */
  font-size: 1.05em;
  background: var(--sacem-gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Anti-coupure du jambage italique (C2.4bis) : le glyphe incliné
     des caractères comme « ? », « p », « y » ou « f » dépasse la
     bounding box du texte. Avec background-clip: text, le clip
     coupe net au pixel près et tronque le jambage. Un padding-right
     léger étend la bounding box et libère assez d'espace pour le
     glyphe complet. Effet de bord : un micro-espace après l'accent
     quand la phrase continue — souhaitable visuellement. */
  padding-right: 0.1em;
}

/* Variante blanche (sur photo / fond sombre, sans gradient) */
.sacem-accent--white {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

/* ============ Cartes-photo : label CRÉATEURS / DIFFUSEURS / etc. ============ */
/* À utiliser sur toute carte-photo avec fond sombre (overlay).  */
.sacem-photo-card-label {
  -webkit-text-fill-color: rgba(255,255,255,0.90);
  color: rgba(255,255,255,0.90);
  background: none;
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: var(--sacem-fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ============ Boutons (alternative aux boutons Divi natifs) ============ */
.sacem-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.85rem;
  border-radius: 999px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: var(--sacem-fs-sm);
  /* typo-v2 +25% — fix débordement #4 : libellé long accepté sur 2 lignes,
     proprement — texte centré, icône non rétrécie. Taille de cran inchangée. */
  text-align: center;
  line-height: 1.25;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .25s, background .25s, color .25s, box-shadow .25s;
}
.sacem-btn svg {
  flex-shrink: 0;
}
.sacem-btn--primary {
  background: var(--sacem-gradient-accent);
  /* C2.6ter — fix du liseré blanc visible quand .sacem-btn--primary
     est posé sur un fond clair (Démarches C2.6 = première utilisation
     visible de cette variante sur le site).
     Diagnostic : l'ancien fix C1bis.2bis (`background-clip: padding-box`)
     était une rustine contre les artefacts d'antialiasing aux extrémités
     du gradient — il restreignait le gradient à l'intérieur de la
     border 2px transparente du `.sacem-btn`, laissant voir le fond
     parent à travers cette border. Sur fond sombre (Hero) on ne voyait
     rien ; sur une carte blanche, halo blanc de 2px tout autour.
     Le vrai fix : retirer la border ici (border: 0) ET ajuster le
     padding pour préserver la même hitbox que les autres variants.
     Plus de zone border = ni halo blanc, ni artefact aux extrémités. */
  border: 0;
  padding: calc(0.95rem + 2px) calc(1.85rem + 2px);
  color: #fff;
  box-shadow: 0 8px 24px rgba(183,59,144,0.28);
}
.sacem-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(183,59,144,0.4);
  color: #fff;
}
.sacem-btn--secondary {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.6);
  color: #fff;
  backdrop-filter: blur(4px);
}
.sacem-btn--secondary:hover { background: #fff; color: var(--sacem-violet); }
.sacem-btn--dark {
  background: var(--sacem-ink);
  color: #fff;
}
.sacem-btn--dark:hover { background: var(--sacem-violet); color: #fff; }
.sacem-btn--ghost {
  background: transparent;
  border-color: var(--sacem-violet);
  color: var(--sacem-violet);
}
.sacem-btn--ghost:hover { background: var(--sacem-violet); color: #fff; }

/* ============ Boutons sur fond sombre / gradient (CTA finals) ============
   Variantes des boutons charte pour fond gradient violet→orange ou tout
   fond sombre. Utilisées en C1.9 (page Créateurs) et destinées à être
   réutilisées sur les futurs CTA finals (C2 Diffuseurs, C4 Missions, …).
   N'écrasent PAS .sacem-btn--primary / .sacem-btn--ghost : ce sont de
   NOUVEAUX modificateurs à appliquer en plus de .sacem-btn. */
.sacem-btn--primary-on-dark {
  background: #fff;
  color: var(--sacem-violet);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.sacem-btn--primary-on-dark:hover {
  background: var(--sacem-cream);
  color: var(--sacem-violet);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.sacem-btn--ghost-on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.sacem-btn--ghost-on-dark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* ============ Sections sombres (chiffres clés, footer, etc.) ============ */
.sacem-section--dark {
  background: var(--sacem-ink);
  color: rgba(255,255,255,0.92);
}
.sacem-section--soft  { background: var(--sacem-cream); }

/* ============ Section gradient violet→orange (charte-1) ============
   Pattern factorisé depuis les 3 CTA finals des pages livrées
   (Créateurs C1.9, Diffuseurs C2.8, Nos missions C4.5). Toutes ces
   sections utilisent le même fond gradient, le même texte blanc et
   le même rythme de padding-block — extraction en classe utilitaire
   ici, sans toucher au CSS spécifique des 3 pages (legacy intact,
   nouvelles pages composent .sacem-section--gradient directement).

   Composition côté page :
     <section class="sacem-c5-cta-final sacem-section sacem-section--gradient">
       <div class="sacem-c5-cta-final__inner">...</div>
     </section>

   La page peut surcharger max-width / padding-inline du __inner et
   ajouter ses styles de titre + accent local (Fraunces italic SOFT
   100 blanc — `.sacem-accent` ne marche pas sur fond gradient, cf.
   CLAUDE.md « Décisions de design transverses »).

   Reset `margin: 0` ET `border: 0` ciblé : règle le résidu C4
   (bande blanche 1-2px à la jonction Mission 3 ↔ CTA final, notée
   en dette dans le journal). La cause exacte n'a pas pu être
   inspectée (Chrome MCP bloqué sur les domaines locaux) — les
   suspects sont default UA margin sur <section>, border-bottom
   parasite Divi, ou margin-bottom de la section précédente. Le
   reset complet en charte couvre ces 3 cas. */
.sacem-section--gradient {
  background: var(--sacem-gradient-primary);
  color: var(--sacem-white);
  /* Élimine les bandes blanches parasites au-dessus/dessous. */
  margin: 0;
  border: 0;
  /* Padding vertical par défaut aligné sur les CTA finals existants
     (clamp 3.5rem → 7rem). La page peut surcharger si besoin. */
  padding-block: clamp(3.5rem, 10vw, 7rem);
}

/* Couleur héritée pour les enfants directs typographiques — évite
   d'avoir à override le `color` partout dans la page spécifique. */
.sacem-section--gradient :is(h1, h2, h3, h4, p, span, a) {
  color: inherit;
}

/* ============ Hero photo plein écran (charte-1) ============
   Pattern factorisé depuis page-createurs.css / page-diffuseurs.css /
   page-missions.css (3 implémentations identiques en C1bis.3 / C2.3 / C4.9b).

   Composition côté page : ajouter `.sacem-hero--photo` sur la section
   Hero, puis poser uniquement `background-image: url(...)` côté
   page-spécifique. Le reste (min-height 100vh, padding-top sous la
   nav, layout flex centré, overlay double gradient, texte blanc) est
   pris en charge par la classe utilitaire.

   Exemple :
     <section class="sacem-c5-hero sacem-hero--photo sacem-section">
       <div class="sacem-c5-hero__inner">...</div>
     </section>
   + dans page-c5.css :
     .sacem-c5-hero { background-image: url("../img/hero/hero-c5.webp"); }

   La page peut ajouter ses padding-inline, max-width __inner, et
   styles de titre / lede. Les éléments enfants directs reçoivent
   automatiquement z-index 1 pour passer au-dessus de l'overlay. */
.sacem-hero--photo {
  position: relative;
  min-height: 100vh;
  padding-top: var(--nav-height-desktop);
  padding-block: clamp(3rem, 8vw, 6rem);
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center center;
  color: var(--sacem-white);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.sacem-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Overlay double gradient charte (lisibilité photo). Valeurs
     strictement alignées sur page-createurs.css L62-78. */
  background:
    linear-gradient(135deg,
      rgba(107, 31, 124, 0.65) 0%,
      rgba(183, 59, 144, 0.45) 35%,
      rgba(214, 74, 107, 0.40) 60%,
      rgba(239, 90, 59, 0.45) 80%,
      rgba(242, 139, 30, 0.40) 100%
    ),
    linear-gradient(180deg,
      rgba(26, 14, 18, 0.30) 0%,
      rgba(26, 14, 18, 0.10) 28%,
      rgba(26, 14, 18, 0.40) 82%,
      rgba(26, 14, 18, 0.60) 100%
    );
  pointer-events: none;
}

/* Mobile : la nav Divi a souvent une hauteur distincte du desktop
   (cf. résidu C4.9quater P25 où 100px puis 120px ont été nécessaires
   sur Missions). Variable dédiée --nav-height-mobile pour ajuster
   sans toucher au CSS de chaque page. */
@media (max-width: 768px) {
  .sacem-hero--photo {
    padding-top: var(--nav-height-mobile);
  }
}

/* ============ Hibiscus filigrane décoratif (charte-1) ============
   Deux classes utilitaires pour ancrer un hibiscus en filigrane dans
   un coin de section. Pattern factorisé depuis page-createurs.css
   (.sacem-createurs-qui-peut-adherer::before pour le haut-gauche,
   .sacem-createurs-faq::before pour le bas-droite) et répliqué en
   C4 sur Nos missions (Intro + Mission 3).

   Composition côté page : ajouter `.sacem-section--hibiscus-tl` (ou
   --br) sur la section. Aucun CSS supplémentaire requis côté page.
   Les deux classes posent automatiquement `position: relative` et
   `overflow: hidden` pour clipper le débordement -80px de l'image.

   Exemple :
     <section class="sacem-c5-presentation sacem-section sacem-section--hibiscus-tl">
       <div class="sacem-c5-presentation__inner">...</div>
     </section>

   Distinct des classes legacy `.sacem-hibiscus-subtle` / -marked plus
   bas — ces dernières utilisent un mask SVG, alors qu'ici on rend
   l'asset PNG directement (différence visuelle subtile, les PNG ont
   plus de relief). Les deux familles cohabitent ; les nouvelles
   pages institutionnelles privilégient -tl/-br. */
.sacem-section--hibiscus-tl,
.sacem-section--hibiscus-br {
  position: relative;
  overflow: hidden;
}

.sacem-section--hibiscus-tl::before,
.sacem-section--hibiscus-br::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1; /* convergence : aligné Home (hibiscus beige visibles) */
  pointer-events: none;
  z-index: 0;
}

.sacem-section--hibiscus-tl::before {
  top: -80px;
  left: -80px;
  background-image: url("../img/hibiscus-beige1.png");
  background-position: top left;
  filter: var(--sacem-hibiscus-filter-1);
}

.sacem-section--hibiscus-br::before {
  bottom: -80px;
  right: -80px;
  background-image: url("../img/hibiscus-beige2.png");
  background-position: bottom right;
  filter: var(--sacem-hibiscus-filter-2);
}

/* Enfants directs au-dessus du filigrane (qui est z-index 0). */
.sacem-section--hibiscus-tl > *,
.sacem-section--hibiscus-br > * {
  position: relative;
  z-index: 1;
}

/* Mobile : hibiscus masqués (cf. pattern Créateurs C1.4 — sur petits
   écrans le débordement -80px gênerait le contenu, et le filigrane
   décoratif perd son sens à cette échelle). */
@media (max-width: 768px) {
  .sacem-section--hibiscus-tl::before,
  .sacem-section--hibiscus-br::before {
    display: none;
  }
}

/* ============ Filigrane hibiscus (helper legacy) ============
   Ajoute la classe sur une section ou un wrapper, le filigrane
   sera positionné en pseudo-élément (haut-droit ou bas-gauche). */
.sacem-hibiscus-subtle  { position: relative; overflow: hidden; }
.sacem-hibiscus-subtle::after {
  content: "";
  position: absolute;
  bottom: -120px; right: -80px;
  width: 520px; height: 520px;
  -webkit-mask: url(../img/hibiscus-subtle.svg) no-repeat center / contain;
          mask: url(../img/hibiscus-subtle.svg) no-repeat center / contain;
  background: rgba(255,255,255,0.85);
  opacity: 0.07;
  pointer-events: none;
  z-index: 1;
}
.sacem-hibiscus-marked  { position: relative; overflow: hidden; }
.sacem-hibiscus-marked::before {
  content: "";
  position: absolute;
  top: -100px; left: -120px;
  width: 360px; height: 360px;
  -webkit-mask: url(../img/hibiscus-marked.svg) no-repeat center / contain;
          mask: url(../img/hibiscus-marked.svg) no-repeat center / contain;
  background-color: var(--sacem-violet);
  opacity: 0.06;
  pointer-events: none;
  transform: rotate(-12deg);
  z-index: 0;
}
.sacem-hibiscus-marked::after {
  content: "";
  position: absolute;
  bottom: -140px; right: -100px;
  width: 420px; height: 420px;
  -webkit-mask: url(../img/hibiscus-marked.svg) no-repeat center / contain;
          mask: url(../img/hibiscus-marked.svg) no-repeat center / contain;
  background-color: var(--sacem-corail);
  opacity: 0.05;
  pointer-events: none;
  transform: rotate(18deg);
  z-index: 0;
}

/* ============ Container standard (1280px max) ============ */
.sacem-container {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* ============================================================
   Composant carte partagé .sacem-card (C1bis.2)
   ------------------------------------------------------------
   Port du pattern `.pilier` de la home (home.css L514-557) sous
   forme de classe partagée à appliquer sur toutes les cartes
   institutionnelles (Créateurs, Diffuseurs à venir, Nos missions,
   etc.). Reproduit fidèlement :
     - fond blanc + border-radius 16px + padding aéré
     - hover : translateY(-4px) + box-shadow md
     - liseret coloré animé au top (pseudo-élément ::before, gradient
       charte, transform: scaleX(0)→1 à l'apparition au hover)

   Le composant est volontairement minimaliste : il définit le
   contenant. Le contenu (icône, numéro, titre, texte, bloc tarif,
   liens) est laissé aux modificateurs ou aux classes spécifiques
   de chaque page (ex. .sacem-createurs-card hérite ces propriétés
   en composition).
   ============================================================ */
.sacem-card {
  /* habillage-degrades — Système 2 (dégradé interne) + ombre de repos. */
  background: var(--sacem-card-bg);
  box-shadow: var(--sacem-card-shadow);
  border: 1px solid rgba(26, 14, 18, 0.06);
  border-radius: 16px;
  padding: 2.25rem 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.sacem-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(26, 14, 18, 0.10);
  border-color: rgba(26, 14, 18, 0.10);
}
.sacem-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--sacem-gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.sacem-card:hover::before {
  transform: scaleX(1);
}

/* Accessibilité — prefers-reduced-motion (sprint missions-habillage).
   .sacem-card ne gérait pas la réduction de mouvement : on neutralise
   les transitions du surélèvement (transform) ET du liseré animé
   (::before scaleX). Les états finals au hover restent atteignables,
   mais instantanément (sans animation). Posé sur le composant partagé
   → bénéficie à toutes les pages qui utilisent .sacem-card. */
@media (prefers-reduced-motion: reduce) {
  .sacem-card,
  .sacem-card::before {
    transition: none;
  }
}

/* ============================================================
   Pastille photo ronde — composant partagé (sprint missions-habillage)
   ------------------------------------------------------------
   Rond avec anneau dégradé charte (gradient signature
   violet→magenta→corail→orange) autour d'une photo FIGÉE en CSS.
   Technique : le conteneur porte le gradient (= l'anneau), le ::after
   en inset de l'épaisseur d'anneau porte la photo (background-size:
   cover). Photo non éditable, posée par modificateur .sacem-pastille-
   photo--<key> (même logique que .sacem-bandeau).
   Réutilisable hors page Missions (avatar, vignette ronde, etc.).
   ============================================================ */
.sacem-pastille-photo {
  --pastille-size: clamp(96px, 11vw, 132px);
  --pastille-ring: 4px;
  display: block;
  width: var(--pastille-size);
  height: var(--pastille-size);
  border-radius: 50%;
  background: var(--sacem-gradient-primary);
  box-shadow: 0 6px 18px rgba(107, 31, 124, 0.18);
  position: relative;
  flex-shrink: 0;
}

.sacem-pastille-photo::after {
  content: "";
  position: absolute;
  inset: var(--pastille-ring);
  border-radius: 50%;
  background-color: var(--sacem-white);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sacem-pastille-photo--collecter::after  { background-image: url("../img/sections/musicien-demi.webp"); }
.sacem-pastille-photo--promouvoir::after { background-image: url("../img/sections/jumbe02.webp"); }
.sacem-pastille-photo--defendre::after   { background-image: url("../img/sections/hero-home.webp"); }

/* Modificateurs page Aide aux projets (sprint 2b-2) — pastilles des 3 programmes. */
.sacem-pastille-photo--ap-autoproduction::after { background-image: url("../img/sections/studio-enregistrement2.webp"); }
.sacem-pastille-photo--ap-scenique::after       { background-image: url("../img/sections/ukulele-scene.webp"); }
.sacem-pastille-photo--ap-festivals::after      { background-image: url("../img/sections/concert2.webp"); }

/* Numéro d'étape Fraunces italic magenta — port de `.pilier__num`.
   Usage : <span class="sacem-card__num">/ 01</span> en tête de carte. */
.sacem-card__num {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--sacem-fs-base) * 1);
  color: var(--sacem-magenta);
  display: block;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

/* ============================================================
   Hero photo overlap — neutralise le padding-top Divi (C1bis.4)
   ------------------------------------------------------------
   Divi injecte par défaut `padding-top: 80px` sur #page-container
   pour les pages avec body.et_fixed_nav.et_show_nav (cf. styles
   Divi inline rendus dynamiquement). Sur les pages avec un Hero
   photo plein écran (min-height: 100vh + padding-top var(--nav-height)),
   ce 80px crée un gap blanc en haut du Hero — la nav fixed
   transparente laisse voir le fond du body au-dessus de la photo.

   Quand body porte la classe sacem-has-hero-photo (ajoutée par
   un filter body_class dans functions.php), on remet le padding
   à 0 → la photo Hero remonte jusqu'au top de la viewport et la
   nav superposée fonctionne comme attendu.

   Classe sémantique extensible : chaque future page institutionnelle
   avec Hero photo (C2 Diffuseurs, etc.) bénéficiera du même
   pattern en ajoutant son `is_page()` au filter.

   Extension fix-contact-hero : la page Contact partage exactement le
   même besoin (Hero gradient immersif qui doit remonter à y=0 sous la
   nav fixed transparente — sans ce neutralizer, on a une bande blanche
   80 px du #page-container entre y=0 et le hero, sur laquelle les
   items blancs de la nav transparente deviennent invisibles). Le hero
   gradient n'est pas une photo donc la classe `sacem-has-hero-photo`
   ne lui convient pas sémantiquement → on étend la règle via une
   seconde branche de sélecteur (`body.sacem-page-contact`) plutôt
   que de surcharger la sémantique de la classe partagée.
   ============================================================ */
body.sacem-has-hero-photo #page-container,
body.sacem-page-contact #page-container {
  padding-top: 0 !important;
}

/* ============================================================
   Plein largeur edge-to-edge — toutes pages buildées via Divi
   ------------------------------------------------------------
   Divi enveloppe le contenu dans #main-content avec un padding
   par défaut. Sur les pages où le page builder est actif (corps
   reçoit la classe .et_pb_pagebuilder_layout), on retire ce
   padding pour que les sections SACEM (hero, etc.) puissent
   s'étirer jusqu'aux bords du viewport.

   Une règle équivalente scopée `.home.et_pb_pagebuilder_layout`
   existe dans home.css ; cette version est plus large et couvre
   toutes les pages institutionnelles (créateurs, diffuseurs, …).
   ============================================================ */
.et_pb_pagebuilder_layout #main-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================
   BANDEAU PHOTO — sections-photo de transition (étape sections-photo)
   ------------------------------------------------------------
   Composant transversal (Créateurs + Diffuseurs). Bande photo pleine
   largeur (~440px), photo FIGÉE en CSS par modificateur .sacem-bandeau--<key>,
   eyebrow + titre blancs ancrés en bas-gauche sur un voile dégradé
   (sombre en bas → transparent en haut) qui garantit la lisibilité.
   Rendu par le shortcode [sacem_pf_bandeau key="…"]
   (Sacem_PF_Bandeaux_Shortcodes). Étiquette/titre éditables en admin ;
   la photo ne l'est pas.
   ============================================================ */
.sacem-bandeau {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: flex-end;            /* contenu ancré en bas */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Voile de lisibilité : sombre en bas-gauche, s'efface vers le haut. */
.sacem-bandeau::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(26, 14, 18, 0.74) 0%,
    rgba(26, 14, 18, 0.34) 40%,
    rgba(26, 14, 18, 0) 72%
  );
  z-index: 0;
  pointer-events: none;
}

.sacem-bandeau__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem);
}

.sacem-bandeau__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--sacem-fs-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.92;
  margin-bottom: 0.6rem;
}

.sacem-bandeau__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 18px rgba(26, 14, 18, 0.35);
}

/* --- Photos figées (1 modificateur = 1 photo) ----------------------
   Chemin relatif depuis theme/sacem-pf-charte/assets/css/ vers /img/sections/. */
.sacem-bandeau--studio    { background-image: url("../img/sections/studio-enregistrement3.webp"); }
.sacem-bandeau--scene     { background-image: url("../img/sections/clavier.webp"); }
.sacem-bandeau--rythme    { background-image: url("../img/sections/drum.webp"); }
.sacem-bandeau--spectacle { background-image: url("../img/sections/danse-scene2.webp"); }
.sacem-bandeau--local     { background-image: url("../img/sections/chant-local.webp"); }
.sacem-bandeau--salles    { background-image: url("../img/sections/theatre.webp"); }

@media (max-width: 768px) {
  .sacem-bandeau {
    min-height: 320px;
  }
}