/**
 * Styles spécifiques à la page Diffuseurs (slug : diffuseurs).
 *
 * Chargé conditionnellement uniquement sur cette page via le bloc
 * `add_action('wp_enqueue_scripts', ...)` correspondant dans functions.php
 * du child theme.
 *
 * Convention : préfixe BEM `.sacem-diffuseurs-<section>__<element>`,
 * cohérent avec `.sacem-createurs-<section>__<element>` (cf. C1).
 * Réutilise les tokens du child theme (style.css / charte-components.css) :
 *   - variables CSS palette (--sacem-violet, --sacem-cream, …)
 *   - polices --font-body (Outfit) / --font-display (Fraunces)
 *   - classes utilitaires .sacem-accent, .sacem-eyebrow, .sacem-card,
 *     .sacem-btn--primary-on-dark / --ghost-on-dark
 *
 * @package SacemPfCharte
 */

/* ============================================================
   Section Hero (C2.3)
   ----
   Pattern porté de .sacem-createurs-hero (page-createurs.css C1bis.3) :
   couche image + couche gradient charte semi-transparente, contenu
   centré verticalement sur 100vh, textes blancs lisibles.

   La nav fixed avec background transparent + texte blanc est lisible
   sur la photo Hero sombre (héritage C1bis). Au scroll, .scrolled
   bascule en fond blanc + logo couleur.

   Le body.sacem-has-hero-photo (ajouté par le filter body_class de
   functions.php pour ['createurs', 'diffuseurs']) neutralise le
   `padding-top: 80px` que Divi injecte sur #page-container — sans
   ce neutralizer, la photo Hero démarre 80px sous le top viewport.
   ============================================================ */

.sacem-diffuseurs-hero {
    position: relative;
    min-height: 100vh;
    padding-top: var(--nav-height); /* sous la nav fixed */
    padding-block: clamp(3rem, 8vw, 6rem);
    display: flex;
    align-items: center;
    background-image: url("../img/hero/hero-diffuseurs.webp");
    background-size: cover;
    background-position: center center;
    color: #fff;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

/* Overlay gradient charte (couche entre la photo et le contenu).
   Cumule 2 dégradés stackés comme le Hero Créateurs :
     - charte violet → orange en biais (couleur d'identité)
     - assombrissement vertical doux (lisibilité globale)
   Les opacités sont identiques à Créateurs C1bis.3 ; à ajuster si la
   photo hero-diffuseurs.webp est notoirement plus claire ou plus
   foncée. */
.sacem-diffuseurs-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    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;
}

.sacem-diffuseurs-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px; /* tient le H1 sur 1 ligne en desktop */
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-diffuseurs-hero__eyebrow {
    /* BEM local — la couleur et le trait ::before sont portés par
       les classes utilitaires .sacem-eyebrow + .sacem-eyebrow--on-dark
       (ajoutées en HTML). On ne garde ici que les specs typo
       spécifiques au Hero (0.875rem vs 0.75rem standard,
       letter-spacing 0.15em, margin-bottom). */
    font-size: var(--sacem-fs-micro);
    letter-spacing: 0.15em;
    margin-bottom: 1.25rem;
}

.sacem-diffuseurs-hero__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 3rem);
    line-height: 1.15;
    color: #fff;
    /* Text-shadow doux pour lisibilité sur photo (port pattern home L315
       et Créateurs C1bis.3). */
    text-shadow:
        0 2px 40px rgba(26, 14, 18, 0.55),
        0 1px 2px rgba(26, 14, 18, 0.25);
    margin: 0 0 1.5rem;
}

/*
 * .sacem-diffuseurs-hero__title-accent : la classe utilitaire
 * .sacem-accent (text-clip gradient) est INVISIBLE sur fond photo
 * sombre — on code donc l'accent en local : Fraunces italic blanc,
 * même technique qu'au CTA final C1.9 et au Hero Créateurs C1bis.3.
 */
.sacem-diffuseurs-hero__title-accent {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-variation-settings: 'SOFT' 100, 'opsz' 144;
    color: #fff;
    /* C2.4ter — alignement sur le fix optique de `.sacem-accent`
       (C2.4bis) : 1.05em compense la x-height plus petite de
       Fraunces vs Outfit, padding-right 0.1em libère le jambage
       italique du « s » final de « droits » qui était coupé
       (cas déclencheur du sprint, recette Nicolas). */
    font-size: 1.05em;
    padding-right: 0.1em;
}

.sacem-diffuseurs-hero__lede {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-lede);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 20px rgba(26, 14, 18, 0.45);
    max-width: 720px;
    margin: 0 auto 2rem;
}

.sacem-diffuseurs-hero__ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Mobile : CTAs empilés verticalement pour rester confortables au pouce. */
@media (max-width: 640px) {
    .sacem-diffuseurs-hero__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .sacem-diffuseurs-hero__ctas .sacem-btn {
        justify-content: center;
    }
}

/* ============================================================
   Section Intro « Quels diffuseurs ? » (C2.4)
   ----
   Section éditoriale courte sur fond BLANC (rythme alternant
   après le Hero photo sombre). Header aligné à gauche, titre
   sur 1 ligne en desktop, corps de texte avec paragraphes
   espacés. Cohérent avec le pattern Créateurs sections (C1bis.2).
   ============================================================ */
.sacem-diffuseurs-intro {
    padding-block: clamp(2.5rem, 7vw, 5rem);
    background-color: #fff;
    /* C2.9 chantier 2 : position relative + overflow hidden pour
       accueillir le hibiscus 1 décoratif en absolute (::before). */
    position: relative;
    overflow: hidden;
}

/* Hibiscus 1 décoratif (haut-gauche). Pendant visuel symétrique au
   hibiscus 2 de la FAQ (bas-droite) : ouverture + fermeture de page
   par deux signatures végétales discrètes. Asset PNG partagé charte
   (theme/sacem-pf-charte/assets/img/hibiscus-beige1.png) — réutilisé
   depuis Créateurs C1bis.2bis et home C1bis.2bis. */
.sacem-diffuseurs-intro::before {
    content: "";
    position: absolute;
    top: -80px;
    left: -80px;
    width: 380px;
    height: 380px;
    background-image: url("../img/hibiscus-beige1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    opacity: 1;
    filter: var(--sacem-hibiscus-filter-1);
    pointer-events: none;
    z-index: 0;
}

.sacem-diffuseurs-intro__inner {
    max-width: 900px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    /* z-index: 1 pour passer au-dessus du hibiscus ::before. */
    position: relative;
    z-index: 1;
}

/* Mobile <768px : hibiscus masqué pour ne pas encombrer la lecture
   sur petit écran (cohérent avec hibiscus 2 FAQ Diffuseurs et
   hibiscus Créateurs C1bis.2bis). */
@media (max-width: 767px) {
    .sacem-diffuseurs-intro::before {
        display: none;
    }
}

.sacem-diffuseurs-intro__head {
    text-align: left;
    margin-bottom: 2rem;
}

.sacem-diffuseurs-intro__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--sacem-ink);
    margin: 0.75rem 0 1.25rem;
    /* L'accent .sacem-accent (Fraunces italic + gradient text-clip)
       reste INLINE — pas de display: block, le titre tient sur 1 ligne
       en desktop. Wrap mobile naturel. */
}

.sacem-diffuseurs-intro__title-accent {
    /* Hook BEM stable, rendu visuel porté par .sacem-accent (utilitaire
       charte) appliqué en parallèle dans le HTML. Pas d'override ici. */
}

.sacem-diffuseurs-intro__lede {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-lede);
    line-height: 1.6;
    color: var(--sacem-ink);
    opacity: 0.85;
    max-width: 720px;
    margin: 0;
}

.sacem-diffuseurs-intro__corps {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-body);
    line-height: 1.7;
    color: var(--sacem-ink);
    max-width: 720px;
}

.sacem-diffuseurs-intro__corps p {
    margin: 0 0 1rem;
}

.sacem-diffuseurs-intro__corps p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Section Catégories — accordéon exclusif HTML5 (C2.5)
   ----
   10 cartes en colonne, chacune est un <details> avec
   `name="diffuseurs-categories"` partagé pour garantir
   l'exclusivité (HTML5 natif Chrome 120+ / Firefox 119+ /
   Safari 17+). Sur navigateur plus ancien : comportement
   non-exclusif (dégradation gracieuse).

   Chaque <details> porte aussi la classe utilitaire `.sacem-card`
   (charte) pour hériter du fond blanc, du liseret + hover animé
   et de l'ombrage. Les overrides locaux adaptent à l'usage
   accordéon (padding, summary cliquable, contenu déplié, etc.).

   Section sur fond cream (.sacem-section--soft) — rythme
   alternant après Intro fond blanc.
   ============================================================ */

.sacem-diffuseurs-categories {
    padding-block: clamp(2.5rem, 7vw, 5rem);
    /* C2.6bis : la classe .sacem-section--soft a été retirée du HTML
       — la section reste sur fond blanc (body) après inversion
       avec Démarches. */
}

.sacem-diffuseurs-categories__inner {
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-diffuseurs-categories__head {
    text-align: left;
    margin-bottom: 2.5rem;
}

.sacem-diffuseurs-categories__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--sacem-ink);
    margin: 0.75rem 0 1.25rem;
}

.sacem-diffuseurs-categories__title-accent {
    /* Hook BEM stable, rendu via .sacem-accent (utilitaire charte). */
}

.sacem-diffuseurs-categories__lede {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-lede);
    line-height: 1.6;
    color: var(--sacem-ink);
    opacity: 0.85;
    max-width: 720px;
    margin: 0;
}

/* Liste des accordéons : 1 colonne, gap modeste entre items. */
.sacem-diffuseurs-categories__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* L'élément <details> porte .sacem-card (fond blanc + border 1px +
   border-radius 16px + hover translateY + shadow + liseret animé).
   Override locaux : padding 0 sur le <details>, le padding réel est
   porté par <summary> et __content (pour que le hit-zone du summary
   couvre toute la largeur de la carte). */
.sacem-diffuseurs-categories__item {
    /* .sacem-card fournit déjà : background, border, border-radius,
       overflow:hidden, transition, hover translateY, ::before liseret.
       On annule juste le padding pour que summary/content le portent. */
    padding: 0;
}

/* SUMMARY = zone cliquable horizontale (toggle l'ouverture). */
.sacem-diffuseurs-categories__summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    /* Neutralise les markers natifs HTML5 sur 3 sélecteurs (idem
       FAQ Créateurs C1.8) : Firefox, Safari/Chrome WebKit, et
       le ::marker générique CSS standard. */
    list-style: none;
}
.sacem-diffuseurs-categories__summary::-webkit-details-marker {
    display: none;
}
.sacem-diffuseurs-categories__summary::marker {
    content: '';
}

/* Pastille icône à gauche du label. */
.sacem-diffuseurs-categories__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: rgba(107, 31, 124, 0.08);
    color: var(--sacem-violet);
}

.sacem-diffuseurs-categories__icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

.sacem-diffuseurs-categories__label {
    flex: 1 1 auto;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-h3);
    /* typo-v2 +25% — fix débordement #2 : line-height resserré pour que les
       labels multi-lignes (h3 28px) restent compacts dans l'en-tête
       d'accordéon. Taille de cran inchangée. */
    line-height: 1.15;
    color: var(--sacem-ink);
}

/* Chevron à droite — rotate 180° quand le <details> est ouvert. */
.sacem-diffuseurs-categories__toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--sacem-violet);
    transition: transform 0.25s ease;
}

.sacem-diffuseurs-categories__toggle svg {
    width: 24px;
    height: 24px;
    display: block;
}

.sacem-diffuseurs-categories__item[open] > .sacem-diffuseurs-categories__summary .sacem-diffuseurs-categories__toggle {
    transform: rotate(180deg);
}

/* Bloc déplié — description + liste RGAT + CTA. */
.sacem-diffuseurs-categories__content {
    padding: 0 1.75rem 1.75rem;
}

.sacem-diffuseurs-categories__description {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-sm);
    line-height: 1.6;
    color: var(--sacem-ink);
    opacity: 0.85;
    margin: 0 0 1.5rem;
    /* Décalage gauche pour aligner sur le label sous la pastille
       icône (56px + 1.25rem gap = ~76px). Compromis lisibilité :
       sur mobile <768px on annule (cf. media query). */
    padding-left: calc(56px + 1.25rem);
}

/* Liste RGAT — badge numéro + titre + lien PDF conditionnel. */
.sacem-diffuseurs-categories__rgats {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-left: calc(56px + 1.25rem);
}

/* Ligne RGAT : badge · libellé · groupe d'actions (à droite).
   Hauteur de ligne constante (min-height) pour un rythme régulier,
   que la ligne porte un bouton Simuler ou non (cadrage F1 §2.1). */
.sacem-diffuseurs-categories__rgat {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    min-height: 42px;
}

.sacem-diffuseurs-categories__rgat-numero {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--sacem-fs-micro);
    letter-spacing: 0.04em;
    color: var(--sacem-violet);
    background: rgba(107, 31, 124, 0.10);
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    line-height: 1.4;
}

/* F1 §2.1 — les badges RGAT sont TOUS en mauve : ils ne portent plus
   l'info de simulabilité. Le seul signal de simulabilité est désormais
   la présence (ou non) du bouton « Simuler → » sur la ligne. Le
   modificateur --non-simulable (badge gris + opacité) a été retiré. */

.sacem-diffuseurs-categories__rgat-titre {
    flex: 1 1 auto;
    font-family: var(--font-body);
    font-size: var(--sacem-fs-sm);
    line-height: 1.5;
    color: var(--sacem-ink);
}

/* Groupe d'actions de la ligne, poussé à droite. Reste groupé et ne
   rétrécit pas ; sur ligne étroite il passe sous le libellé (wrap) tout
   en restant aligné à droite. */
.sacem-diffuseurs-categories__rgat-actions {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Bouton « Simuler → » compact, gradient charte (violet→orange).
   F1 : inerte (aucun JS), la modale est câblée en F2. */
.sacem-diffuseurs-categories__rgat-sim {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-micro);
    line-height: 1;
    color: #fff;
    background: var(--sacem-gradient-primary);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.sacem-diffuseurs-categories__rgat-sim:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(107, 31, 124, 0.25);
    filter: brightness(1.04);
}

.sacem-diffuseurs-categories__rgat-sim:focus-visible {
    outline: 2px solid var(--sacem-violet);
    outline-offset: 2px;
}

/* Bouton « Nous contacter → » — action principale des lignes NON
   simulables. Secondaire : mauve, contour (outline), même gabarit que
   « Simuler » pour une hauteur de ligne constante. Lien stylé en bouton
   (dégradation gracieuse vers /contact/ ; F6 interceptera le clic). */
.sacem-diffuseurs-categories__rgat-contact {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-micro);
    line-height: 1;
    color: var(--sacem-violet);
    background: transparent;
    border: 1.5px solid var(--sacem-violet);
    border-radius: 8px;
    padding: calc(0.5rem - 1.5px) calc(0.9rem - 1.5px);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.sacem-diffuseurs-categories__rgat-contact:hover {
    color: #fff;
    background: var(--sacem-violet);
    border-color: var(--sacem-violet);
}

.sacem-diffuseurs-categories__rgat-contact:focus-visible {
    outline: 2px solid var(--sacem-violet);
    outline-offset: 2px;
}

/* Icône PDF — affordance carrée (cible tactile ≥ 36px), sans texte. */
.sacem-diffuseurs-categories__rgat-pdf {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--sacem-violet);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.sacem-diffuseurs-categories__rgat-pdf:hover,
.sacem-diffuseurs-categories__rgat-pdf:focus-visible {
    color: var(--sacem-magenta);
    background: rgba(107, 31, 124, 0.08);
}

.sacem-diffuseurs-categories__rgat-pdf-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.sacem-diffuseurs-categories__rgat-pdf-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Révision F1 : plus aucun pied de carte. L'action « Nous contacter »
   est descendue au niveau de chaque ligne non-simulable (symétrique du
   bouton Simuler). Les anciennes règles .__cta / .__cta-note ont été
   retirées (doublon supprimé). */

/* Tablet 768-1023 : padding interne réduit, pastille un peu plus petite. */
@media (max-width: 1023px) {
    .sacem-diffuseurs-categories__summary {
        gap: 1rem;
        padding: 1.25rem 1.5rem;
    }
    .sacem-diffuseurs-categories__content {
        padding: 0 1.5rem 1.5rem;
    }
}

/* Mobile <768 : annule le décalage padding-left du contenu déplié
   (pastille trop large à compenser) ; pastille réduite. */
@media (max-width: 767px) {
    .sacem-diffuseurs-categories__icon {
        width: 48px;
        height: 48px;
    }
    .sacem-diffuseurs-categories__icon svg {
        width: 24px;
        height: 24px;
    }
    .sacem-diffuseurs-categories__label {
        font-size: var(--sacem-fs-h3);
    }
    .sacem-diffuseurs-categories__description,
    .sacem-diffuseurs-categories__rgats {
        padding-left: 0;
    }
}

/* ============================================================
   Section Démarches (C2.6)
   ----
   2 blocs côte à côte sur fond blanc, qui mettent en avant les
   deux actions clés (Simuler + Déposer une liste). Chaque bloc
   est une .sacem-card (charte) avec un padding plus généreux que
   les accordéons catégories. Boutons alignés en bas via
   margin-top: auto pour homogénéiser la hauteur visuelle quand
   les descriptions ont des tailles différentes.
   ============================================================ */

.sacem-diffuseurs-demarches {
    /* Compense la nav fixed lors d'un scroll-to-anchor vers #demarches
       (lien footer « Mes démarches ») — pattern page-aide-aux-projets.css. */
    scroll-margin-top: var(--nav-height-desktop, 88px);
    padding-block: clamp(2.5rem, 7vw, 5rem);
    /* C2.6bis : fond cream apporté par la classe utilitaire
       .sacem-section--soft ajoutée sur la section HTML (rythme
       Intro blanc → Démarches cream → Catégories blanc).
       Pas de background-color local pour ne pas écraser le cream. */
}

/* Breakpoint 1024px aligné sur la bascule burger de la nav (home.css),
   volontairement distinct des 1023px utilisés ailleurs dans ce fichier. */
@media (max-width: 1024px) {
    .sacem-diffuseurs-demarches {
        scroll-margin-top: var(--nav-height-mobile, 80px);
    }
}

.sacem-diffuseurs-demarches__inner {
    /* C2-diffusion-mode : section passée à 3 blocs → conteneur élargi de
       1100px à 1280px (largeur max charte .sacem-container) pour garder
       3 cartes larges et lisibles. Scopé à la section Démarches uniquement
       (la section #categories au-dessus conserve sa propre largeur). */
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-diffuseurs-demarches__head {
    text-align: left;
    margin-bottom: 3rem;
}

.sacem-diffuseurs-demarches__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--sacem-ink);
    margin: 0.75rem 0 1.25rem;
}

.sacem-diffuseurs-demarches__title-accent {
    /* Hook BEM stable — rendu via .sacem-accent (utilitaire charte). */
}

.sacem-diffuseurs-demarches__lede {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-lede);
    line-height: 1.6;
    color: var(--sacem-ink);
    opacity: 0.85;
    max-width: 720px;
    margin: 0;
}

/* Grille 3 colonnes desktop (C2-diffusion-mode : ajout du bloc 3 « mode de
   diffusion »). 3 cartes de largeur égale, gap homogène. */
.sacem-diffuseurs-demarches__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Chaque bloc hérite .sacem-card. Le padding standard de .sacem-card
   (2.25rem 1.75rem) reste correct ; on n'override que la disposition
   interne en flex column pour pouvoir aligner le bouton en bas. */
.sacem-diffuseurs-demarches__bloc {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sacem-diffuseurs-demarches__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: rgba(107, 31, 124, 0.08);
    color: var(--sacem-violet);
    margin-bottom: 0.25rem;
}

.sacem-diffuseurs-demarches__icon svg {
    width: 32px;
    height: 32px;
    display: block;
}

.sacem-diffuseurs-demarches__bloc-titre {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--sacem-fs-h3);
    line-height: 1.3;
    color: var(--sacem-ink);
    margin: 0;
}

/* Description en flex: 1 → pousse le bouton en bas (margin-top: auto)
   pour aligner verticalement les CTAs des 2 blocs quand les
   descriptions n'ont pas la même longueur. */
.sacem-diffuseurs-demarches__bloc-description {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-sm);
    line-height: 1.6;
    color: var(--sacem-ink);
    opacity: 0.85;
    flex: 1 1 auto;
}

.sacem-diffuseurs-demarches__bloc-description p {
    margin: 0 0 0.75rem;
}
.sacem-diffuseurs-demarches__bloc-description p:last-child {
    margin-bottom: 0;
}

/* Bouton aligné en bas (margin-top: auto) et à sa largeur naturelle
   (align-self: flex-start) — pas pleine largeur. */
.sacem-diffuseurs-demarches__bloc-cta {
    margin-top: auto;
    align-self: flex-start;
}

/* Tablette étroite + mobile ≤980px : 1 colonne, les blocs s'empilent.
   Seuil relevé de 767px à 980px (C2-diffusion-mode) : avec 3 colonnes,
   en dessous de ~980px les cartes deviendraient trop étroites — on
   empile dès la tablette pour garder les descriptions lisibles.
   L'élargissement à 3 colonnes ne concerne donc que le desktop. */
@media (max-width: 980px) {
    .sacem-diffuseurs-demarches__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ============================================================
   Section FAQ (C2.7)
   ----
   5 cartes accordéon HTML5 natif sur fond cream
   (.sacem-section--soft). Volontairement SANS attribut name=
   partagé : accordéons INDÉPENDANTS (l'utilisateur peut ouvrir
   plusieurs questions simultanément pour comparer) — pattern
   différent des Catégories C2.5 (accordéon EXCLUSIF).

   Hibiscus 2 décoratif en bas-droite via ::before avec PNG
   gris2 (asset partagé `theme/sacem-pf-charte/assets/img/
   hibiscus-beige2.png`), même pattern que FAQ Créateurs
   C1bis.2bis.
   ============================================================ */

.sacem-diffuseurs-faq {
    padding-block: clamp(2.5rem, 7vw, 5rem);
    position: relative;
    overflow: hidden;
    /* le fond cream vient de .sacem-section--soft (charte) */
}

/* Hibiscus filigrane décoratif (bas-droite). Asset PNG gris
   réutilisé depuis Créateurs FAQ C1bis.2bis — référencé en
   chemin relatif au fichier CSS, le bundler WP/Divi le sert. */
.sacem-diffuseurs-faq::before {
    content: "";
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 380px;
    height: 380px;
    background-image: url("../img/hibiscus-beige2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    opacity: 1;
    filter: var(--sacem-hibiscus-filter-2);
    pointer-events: none;
    z-index: 0;
}

.sacem-diffuseurs-faq__inner {
    max-width: 900px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    position: relative;
    z-index: 1; /* passe au-dessus du hibiscus ::before */
}

.sacem-diffuseurs-faq__head {
    /* C2.9 chantier 3 : centrage du header FAQ pour harmoniser
       avec Créateurs FAQ (__head--center). Le lede et les cartes
       restent dans leur container 900px, mais l'eyebrow/titre/lede
       sont alignés au centre. */
    text-align: center;
    margin-bottom: 3rem;
}

.sacem-diffuseurs-faq__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--sacem-ink);
    margin: 0.75rem 0 1.25rem;
}

.sacem-diffuseurs-faq__title-accent {
    /* Hook BEM stable — rendu via .sacem-accent (utilitaire charte). */
}

.sacem-diffuseurs-faq__lede {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-lede);
    line-height: 1.6;
    color: var(--sacem-ink);
    opacity: 0.85;
    max-width: 720px;
    /* C2.9 chantier 3 : centrage horizontal pour cohérence avec
       __head text-align: center. */
    margin: 0 auto;
}

/* Liste des accordéons : 1 colonne, gap modeste. */
.sacem-diffuseurs-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* <details> hérite .sacem-card (fond blanc + border + radius +
   hover liseret animé). Padding 0 sur le <details> — summary
   et answer portent leur padding indépendamment (idem pattern
   Catégories C2.5). */
.sacem-diffuseurs-faq__item {
    padding: 0;
}

.sacem-diffuseurs-faq__summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    /* Neutralise les markers natifs HTML5 sur 3 sélecteurs
       (idem FAQ Créateurs C1.8 et Catégories Diffuseurs C2.5). */
    list-style: none;
}
.sacem-diffuseurs-faq__summary::-webkit-details-marker {
    display: none;
}
.sacem-diffuseurs-faq__summary::marker {
    content: '';
}

.sacem-diffuseurs-faq__question {
    flex: 1 1 auto;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-h3);
    line-height: 1.4;
    color: var(--sacem-ink);
    transition: color 0.2s ease;
}

.sacem-diffuseurs-faq__summary:hover .sacem-diffuseurs-faq__question {
    color: var(--sacem-violet);
}

/* Focus accessible sur le summary natif. */
.sacem-diffuseurs-faq__summary:focus-visible {
    outline: 2px solid var(--sacem-violet);
    outline-offset: 2px;
    border-radius: 12px;
}

/* Chevron à droite — rotate 180° au [open]. */
.sacem-diffuseurs-faq__toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--sacem-violet);
    transition: transform 0.25s ease;
}

.sacem-diffuseurs-faq__toggle svg {
    width: 22px;
    height: 22px;
    display: block;
}

.sacem-diffuseurs-faq__item[open] > .sacem-diffuseurs-faq__summary .sacem-diffuseurs-faq__toggle {
    transform: rotate(180deg);
}

/* Bloc déplié — padding aligné horizontalement sur le summary,
   pas de padding-top (continuité visuelle). */
.sacem-diffuseurs-faq__answer {
    padding: 0 1.5rem 1.25rem;
    font-family: var(--font-body);
    font-size: var(--sacem-fs-body);
    line-height: 1.7;
    color: var(--sacem-ink);
    opacity: 0.88;
}

.sacem-diffuseurs-faq__answer p {
    margin: 0 0 0.75rem;
}
.sacem-diffuseurs-faq__answer p:last-child {
    margin-bottom: 0;
}

/* Mobile <768px : padding interne réduit, hibiscus masqué pour
   ne pas encombrer la lecture sur petit écran. */
@media (max-width: 767px) {
    .sacem-diffuseurs-faq__summary,
    .sacem-diffuseurs-faq__answer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .sacem-diffuseurs-faq__question {
        font-size: var(--sacem-fs-h3);
    }
    .sacem-diffuseurs-faq::before {
        display: none;
    }
}

/* ============================================================
   Section CTA final (C2.8)
   ----
   Bandeau de clôture gradient sombre charte (--sacem-gradient-
   primary, 125deg violet→magenta→corail→orange). Point d'orgue
   visuel de la page. Pattern aligné sur le CTA final Créateurs
   (C1.9 + fix C2.4ter sur le title-accent), avec en plus un
   eyebrow (--on-dark) et un lede — Diffuseurs ajoute une couche
   d'introduction que Créateurs n'avait pas (le fond gradient
   seul ne suffit pas après une FAQ chargée).
   ============================================================ */

.sacem-diffuseurs-cta-final {
    padding-block: clamp(3.5rem, 10vw, 7rem);
    background: var(--sacem-gradient-primary);
    color: #fff;
    text-align: center;
}

.sacem-diffuseurs-cta-final__inner {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-diffuseurs-cta-final__eyebrow {
    /* BEM local — couleur et trait portés par
       .sacem-eyebrow + .sacem-eyebrow--on-dark (HTML).
       Décalage vertical par margin-bottom seul. */
    margin-bottom: 1.25rem;
}

.sacem-diffuseurs-cta-final__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 2.5rem);
    line-height: 1.2;
    color: #fff;
    margin: 0 0 1.25rem;
}

/*
 * .sacem-diffuseurs-cta-final__title-accent
 * ----
 * Accent typographique du titre. Pas de .sacem-accent (gradient
 * text-clip invisible sur fond déjà gradient). Fraunces italic
 * blanc en local. Fix C2.4ter appliqué : font-size 1.05em pour
 * équilibrer optiquement la x-height plus petite de Fraunces vs
 * Outfit + padding-right 0.1em pour éviter la coupure du jambage
 * italique des caractères comme « ? », « p », « y ».
 */
.sacem-diffuseurs-cta-final__title-accent {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-variation-settings: 'SOFT' 100, 'opsz' 144;
    font-size: 1.05em;
    padding-right: 0.1em;
    color: #fff;
}

.sacem-diffuseurs-cta-final__lede {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-lede);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

.sacem-diffuseurs-cta-final__ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile : CTAs empilés verticalement pour rester confortables au pouce. */
@media (max-width: 640px) {
    .sacem-diffuseurs-cta-final__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .sacem-diffuseurs-cta-final__ctas .sacem-btn {
        justify-content: center;
    }
}

/* ====== Habillage dégradés — Système 1 : fond progressif par section ======
   --p-top / --p-bot = position de la section (0 haut → 1 bas).
   Couverture EXHAUSTIVE des sections de fond clair. ====== */
.sacem-diffuseurs-intro { --p-top: 0; --p-bot: 0.25; background: linear-gradient(180deg, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-top) * 100%)) 0%, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-bot) * 100%)) 100%); }
/* Réordonnancement sections-photo : Démarches passe AVANT Catégories.
   Fractions de flux échangées pour suivre le nouvel ordre vertical
   (intro 0–0.25 → démarches 0.25–0.5 → catégories 0.5–0.75 → faq 0.75–1).
   Les bandeaux photo insérés entre ces sections « traversent » le dégradé :
   ils ne consomment pas de fraction, le beige reprend là où il s'arrêtait. */
.sacem-diffuseurs-demarches { --p-top: 0.25; --p-bot: 0.5; background: linear-gradient(180deg, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-top) * 100%)) 0%, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-bot) * 100%)) 100%); }
.sacem-diffuseurs-categories { --p-top: 0.5; --p-bot: 0.75; background: linear-gradient(180deg, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-top) * 100%)) 0%, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-bot) * 100%)) 100%); }
/* Finitions étape 3 : départ au BLANC (--p-top:0) au lieu de 0.75 → dégradé
   blanc→beige réellement visible (plage 0.75–1 trop comprimée = fond plat).
   Bas inchangé sur le beige plancher (--p-bot:1). */
.sacem-diffuseurs-faq { --p-top: 0; --p-bot: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-top) * 100%)) 0%, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-bot) * 100%)) 100%); }