/**
 * Styles spécifiques à la page Créateurs.
 *
 * Chargé conditionnellement uniquement sur cette page via
 * sacem_pf_enqueue_page_createurs_css() dans functions.php.
 *
 * Convention : préfixe BEM `.sacem-createurs-<section>__<element>`.
 * 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-btn, .sacem-btn--primary,
 *     .sacem-btn--ghost (ajoutées en HTML, pas redéfinies ici)
 *
 * @package SacemPfCharte
 */

/* ============================================================
   Section Hero (C1.3)
   ============================================================ */

/* ============================================================
   Hero Créateurs (refonte C1bis.3 : photo + overlay + blanc)
   ----
   Reproduit le pattern Hero de la home (.hero / .hero__overlay) :
   couche image + couche gradient charte semi-transparente. La nav
   est fixed avec un comportement sticky-on-scroll géré par home.js
   (chargé en global depuis C1bis.1) — sur la photo sombre du Hero,
   la nav transparente avec texte blanc est lisible ; après scroll
   sur les sections claires, elle bascule en fond blanc + texte
   sombre via la classe .scrolled.
   ============================================================ */

.sacem-createurs-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-createurs.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 la home :
     - charte violet → orange en biais (couleur d'identité)
     - assombrissement vertical doux (lisibilité globale)
   Les opacités sont plus prononcées qu'en home pour assurer la
   lisibilité du texte blanc sur la photo Hero Créateurs (qui
   peut être plus claire que la photo home). */
.sacem-createurs-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-createurs-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-createurs-hero__eyebrow {
    /* C1bis.2bis : la couleur et le trait ::before sont désormais portés
       par les classes utilitaires .sacem-eyebrow + .sacem-eyebrow--on-dark
       (ajoutées en HTML). Ce BEM local conserve les caractéristiques
       typo spécifiques du Hero (0.875rem au lieu de 0.75rem standard,
       letter-spacing 0.15em, margin-bottom). */
    font-size: var(--sacem-fs-micro);
    letter-spacing: 0.15em;
    margin-bottom: 1.25rem;
}

.sacem-createurs-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). */
    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-createurs-hero__title-accent : hook BEM stable.
 * C1bis.3 : retrait du display: block + margin-top → titre sur
 * une ligne en desktop. La .sacem-accent utilise un text-clip
 * gradient qui devient INVISIBLE sur fond photo sombre — on force
 * donc l'accent en blanc local (analogue au CTA final, cf. brief
 * C1.9). Fraunces italic + opsz/SOFT pour l'identité typographique.
 */
.sacem-createurs-hero__title-accent {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-variation-settings: 'SOFT' 100, 'opsz' 144;
    /* C2.4ter — alignement sur le fix optique de `.sacem-accent` (C2.4bis) :
       même 1.05em pour compenser la x-height plus petite de Fraunces vs
       Outfit, même padding-right 0.1em pour libérer le jambage italique
       qui était coupé (notamment le « s » final de « droits »). */
    font-size: 1.05em;
    padding-right: 0.1em;
    /* Override de la classe .sacem-accent (gradient text-clip) :
       sur fond photo, le gradient text-clip est inopérant. */
    background: none;
    -webkit-background-clip: initial;
            background-clip: initial;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

.sacem-createurs-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-createurs-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-createurs-hero__ctas {
        flex-direction: column;
        align-items: stretch;
    }

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

/* Accès rapide « démarches » (sprint acces-demarches) : lien texte
   volontairement plus discret que les deux CTA boutons au-dessus —
   blanc translucide + soulignement léger, plein blanc au hover. */
.sacem-createurs-hero__quicklink {
    display: inline-block;
    margin-top: 1.75rem;
    font-family: var(--font-body);
    font-size: calc(var(--sacem-fs-base) * 0.95);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 20px rgba(26, 14, 18, 0.45);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.38);
    text-underline-offset: 5px;
    transition: color .2s ease, text-decoration-color .2s ease;
}

.sacem-createurs-hero__quicklink:hover,
.sacem-createurs-hero__quicklink:focus-visible {
    color: #fff; /* token --sacem-white toujours absent de la charte (dette connue) */
    text-decoration-color: currentColor;
}

/* ============================================================
   Section "Qui peut adhérer ?" (C1.4)
   Fond blanc volontaire pour contraste avec le Hero (cream).
   La charte n'expose pas de token --sacem-white ; on garde #fff
   en attendant qu'un token soit ajouté si besoin.
   ============================================================ */

.sacem-createurs-qui-peut-adherer {
    padding-block: clamp(2.5rem, 7vw, 5rem);
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

/* Hibiscus filigrane décoratif (haut gauche). PNG gris déjà désaturé,
   posé en background-image avec opacité douce. Masqué sous 768px pour
   éviter le chevauchement avec le contenu sur mobile. Pattern analogue
   à `.aide::before` de la home (home.css L1135-1149) mais avec un PNG
   au lieu d'un mask SVG (les hibiscus dispos sont des PNG en niveaux
   de gris, pas des SVG mono-couleur). */
.sacem-createurs-qui-peut-adherer::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-createurs-qui-peut-adherer__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    position: relative;
    z-index: 1;
}

.sacem-createurs-qui-peut-adherer__head {
    text-align: left;
    margin-bottom: 3rem;
}

.sacem-createurs-qui-peut-adherer__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 0;
}

.sacem-createurs-qui-peut-adherer__title-accent {
    /* Hook BEM stable — rendu via .sacem-accent (utilitaire charte). */
}

/* Paragraphe d'introduction (étape 4) sous le titre, au-dessus des cartes. */
.sacem-createurs-qui-peut-adherer__lede {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-lede);
    line-height: 1.6;
    color: var(--sacem-text);
    max-width: 720px;
    margin: 1rem 0 0;
}

.sacem-createurs-qui-peut-adherer__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* ============================================================
   Composant transversal .sacem-createurs-card (refondu C1bis.2)
   ----
   Le contenant (background, border-radius, padding, hover,
   liseret animé au top) est désormais porté par la classe
   partagée .sacem-card (charte-components.css). Le HTML rendu
   par les shortcodes Créateurs ajoute simultanément `.sacem-card`
   et `.sacem-createurs-card` à chaque <article>.

   Les règles ci-dessous gèrent uniquement les éléments enfants
   spécifiques à Créateurs (icône violet, taille titre, frais
   tarif, lien PDF) et le modificateur --profile (flex-column).
   ============================================================ */

.sacem-createurs-card {
    text-align: left;
}

.sacem-createurs-card__icon {
    width: 48px;
    height: 48px;
    color: var(--sacem-violet);
    margin-bottom: 1.25rem;
}

.sacem-createurs-card__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sacem-createurs-card__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--sacem-fs-h3);
    line-height: 1.3;
    color: var(--sacem-ink);
    margin: 0 0 0.75rem;
}

.sacem-createurs-card__description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-sm);
    line-height: 1.6;
    color: var(--sacem-text);
    margin: 0;
}

/* Tablet (768-1023) : 2 colonnes */
@media (max-width: 1023px) {
    .sacem-createurs-qui-peut-adherer__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (<768) : 1 colonne pleine largeur + masquage hibiscus */
@media (max-width: 767px) {
    .sacem-createurs-qui-peut-adherer__cards {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .sacem-createurs-qui-peut-adherer::before,
    .sacem-createurs-faq::before {
        display: none;
    }
}

/* ============================================================
   Section "Pourquoi nous rejoindre" (C1.5)
   Le fond cream est apporté par .sacem-section--soft (charte).
   ============================================================ */

.sacem-createurs-pourquoi-rejoindre {
    padding-block: clamp(2.5rem, 7vw, 5rem);
}

.sacem-createurs-pourquoi-rejoindre__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-createurs-pourquoi-rejoindre__head {
    text-align: left;
    margin-bottom: 3rem;
}

.sacem-createurs-pourquoi-rejoindre__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 0;
}

/*
 * Accent du H2 : hook BEM stable, vide par défaut (rendu visuel porté
 * par .sacem-accent en HTML). Reste inline en C1bis.2 pour que le H2
 * tienne sur une ligne en desktop ; le wrap naturel s'occupe du mobile.
 */
.sacem-createurs-pourquoi-rejoindre__title-accent {
    /* (rien — comportement inline par défaut, hook BEM conservé) */
}

.sacem-createurs-pourquoi-rejoindre__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/*
 * Modificateur .sacem-createurs-card--no-icon : la carte n'expose pas
 * de .sacem-createurs-card__icon. Padding identique à la version avec
 * icône — le titre démarre simplement plus haut, ce qui est conforme
 * à la maquette. Hook BEM gardé pour overrides éventuels (background,
 * accent border, etc.) sans toucher au composant de base.
 */
.sacem-createurs-card--no-icon {
    /* (rien à surcharger pour l'instant — hook stable) */
}

/* Tablet (768-1023) : 2 colonnes */
@media (max-width: 1023px) {
    .sacem-createurs-pourquoi-rejoindre__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (<768) : 1 colonne pleine largeur */
@media (max-width: 767px) {
    .sacem-createurs-pourquoi-rejoindre__cards {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ============================================================
   Section "Conditions d'admission" (C1.6)
   Fond standard blanc (contraste avec .sacem-section--soft de C1.5).
   ============================================================ */

.sacem-createurs-conditions-admission {
    padding-block: clamp(2.5rem, 7vw, 5rem);
    background-color: #fff;
}

.sacem-createurs-conditions-admission__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-createurs-conditions-admission__head {
    text-align: left;
    margin-bottom: 3rem;
}

.sacem-createurs-conditions-admission__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-createurs-conditions-admission__title-accent {
    /* Inline en C1bis.2 (titre sur 1 ligne en desktop) — hook BEM conservé. */
}

.sacem-createurs-conditions-admission__lede {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-lede);
    line-height: 1.6;
    color: var(--sacem-text);
    max-width: 720px;
    margin: 0;
}

/*
 * 3 colonnes desktop. Pas de breakpoint intermédiaire à 2 colonnes :
 * les cartes sont plus denses (titre + paragraphe + frais + lien PDF)
 * et passent directement en 1 colonne sous 1024px pour la lisibilité.
 */
.sacem-createurs-conditions-admission__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* ============================================================
   Modificateur .sacem-createurs-card--profile
   ----
   La carte devient un conteneur flex-column pour pouvoir aligner
   le bloc "frais" et le lien PDF en bas via margin-top:auto sur le
   bloc frais (les hauteurs de description peuvent différer).
   ============================================================ */

.sacem-createurs-card--profile {
    display: flex;
    flex-direction: column;
}

.sacem-createurs-card__frais {
    margin-top: auto;
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sacem-createurs-card__frais-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--sacem-fs-micro);
    color: var(--sacem-ink);
    opacity: 0.7;
}

.sacem-createurs-card__frais-amount {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: calc(var(--sacem-fs-base) * 1.5);
    line-height: 1.1;
    color: var(--sacem-violet);
}

.sacem-createurs-card__pdf-link {
    display: inline-flex;
    /* typo-v2 +25% — fix débordement #3 : libellé long accepté sur 2 lignes,
       proprement — l'icône s'aligne sur la 1re ligne et ne rétrécit pas.
       Taille de cran inchangée. */
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-sm);
    line-height: 1.3;
    color: var(--sacem-violet);
    text-decoration: none;
    transition: color 0.2s ease;
}
.sacem-createurs-card__pdf-link svg {
    flex-shrink: 0;
}

.sacem-createurs-card__pdf-link:hover,
.sacem-createurs-card__pdf-link:focus {
    color: var(--sacem-magenta);
    text-decoration: underline;
}

.sacem-createurs-card__pdf-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sacem-createurs-card__pdf-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================================
   Callout Conditions — encart info sous les cartes (C1bis.2bis)
   Devient une carte (.sacem-card en HTML) — le contenant
   (fond, radius, padding, hover, liseret animé) est porté par
   le composant partagé. On garde uniquement le margin-top pour
   la séparation verticale avec la grille des 3 cartes profils.
   ============================================================ */

.sacem-createurs-conditions-admission__callout {
    margin-top: 3rem;
}

.sacem-createurs-conditions-admission__callout-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-h3);
    line-height: 1.3;
    color: var(--sacem-ink);
    margin: 0 0 0.5rem;
}

.sacem-createurs-conditions-admission__callout-description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-sm);
    line-height: 1.6;
    color: var(--sacem-text);
    margin: 0;
}

/* Tablet + Mobile (<1024) : 1 colonne pleine largeur */
@media (max-width: 1023px) {
    .sacem-createurs-conditions-admission__cards {
        grid-template-columns: 1fr;
    }
}

/* Padding mobile désormais porté par .sacem-card — pas d'override local. */

/* ============================================================
   Section "Processus" (C1.7)
   Fond cream via .sacem-section--soft → alterne avec Conditions
   (blanc) qui précède.
   ============================================================ */

.sacem-createurs-processus {
    padding-block: clamp(2.5rem, 7vw, 5rem);
}

.sacem-createurs-processus__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-createurs-processus__head {
    text-align: left;
    margin-bottom: 3rem;
}

.sacem-createurs-processus__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 0;
}

.sacem-createurs-processus__title-accent {
    /* Inline en C1bis.2 (titre sur 1 ligne en desktop) — hook BEM conservé. */
}

.sacem-createurs-processus__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* ============================================================
   Étapes du Processus (C1bis.2)
   ----
   Chaque étape utilise désormais le composant carte partagé
   .sacem-card (cf. charte-components.css) avec un numéro Fraunces
   italic magenta `.sacem-card__num`, et hérite des classes
   .sacem-createurs-card__title / __description pour la typographie
   du titre et du texte (cohérent avec les autres cartes Créateurs).
   Plus de wrapper .sacem-createurs-step ni de styles spécifiques —
   le pattern home `.pilier` couvre tout.
   ============================================================ */

/* ============================================================
   Callout du Processus (C1bis.2)
   ----
   Le callout est désormais une carte (.sacem-card) avec icône
   info_circle à gauche, dans un médaillon léger violet, et le
   corps texte à droite. Aligne le ton « carte unifiée » du sprint
   tout en gardant l'icône qui signale visuellement le rôle d'info.
   Le callout des Conditions reste sur son style border-left
   d'origine (décision Nicolas — pas dans le périmètre des cartes).
   ============================================================ */

.sacem-createurs-processus__callout {
    margin-top: 3rem;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.sacem-createurs-processus__callout-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(107, 31, 124, 0.10);
    color: var(--sacem-violet);
}

.sacem-createurs-processus__callout-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.sacem-createurs-processus__callout-body {
    flex: 1 1 auto;
}

.sacem-createurs-processus__callout-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-h3);
    line-height: 1.3;
    color: var(--sacem-ink);
    margin: 0 0 0.5rem;
}

.sacem-createurs-processus__callout-description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-sm);
    line-height: 1.6;
    color: var(--sacem-text);
    margin: 0;
}

/* (étape 4) Le bloc « Ressources utiles » a été retiré de Processus —
   ses styles ont été supprimés. Les ressources PDF vivent désormais
   dans la section Démarches (.sacem-createurs-demarches). */

/* Tablet (768-1023) : grille étapes 2 colonnes */
@media (max-width: 1023px) {
    .sacem-createurs-processus__steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (<768) : étapes 1 colonne. Padding callout porté par .sacem-card. */
@media (max-width: 767px) {
    .sacem-createurs-processus__steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ============================================================
   Section "FAQ" (C1.8) — Accordion natif <details>/<summary>
   Fond blanc volontaire pour éviter deux bandes cream successives
   après Processus (.sacem-section--soft). Rythme final :
   Hero cream / Qui blanc / Pourquoi cream / Conditions blanc /
   Processus cream / FAQ BLANC / CTA gradient.
   ============================================================ */

.sacem-createurs-faq {
    padding-block: clamp(2.5rem, 7vw, 5rem);
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

/* Hibiscus filigrane décoratif (bas droite). Pendant visuel du
   hibiscus-gris1 placé en haut gauche de la section "Qui peut adhérer" :
   ouverture + fermeture de page par deux signatures végétales discrètes.
   Mêmes paramètres (opacité, taille, hide sur mobile). */
.sacem-createurs-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-createurs-faq__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    position: relative;
    z-index: 1;
}

.sacem-createurs-faq__head {
    margin-bottom: 3rem;
}

/* Modificateur de header centré. À promouvoir en utilitaire si une
   autre section veut le même alignement plus tard. */
.sacem-createurs-faq__head--center {
    text-align: center;
}

.sacem-createurs-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 0;
}

.sacem-createurs-faq__title-accent {
    /* Inline en C1bis.2 (titre sur 1 ligne en desktop) — hook BEM conservé. */
}

/* Liste centrée + bornée pour confort de lecture des questions
   (au-delà de ~800px, les lignes deviennent trop longues à parcourir).
   C2.9 chantier 4 : flex column + gap pour espacer les cartes
   (pattern aligné sur FAQ Diffuseurs C2.7). */
.sacem-createurs-faq__list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* C2.9 chantier 4 : migration vers le pattern carte partagé
   .sacem-card (charte). Le contenant (fond blanc + border 1px +
   border-radius 16px + hover translateY + shadow + liseret animé)
   est porté par .sacem-card. On annule le padding pour que summary
   et answer portent leur padding indépendamment (pattern aligné
   sur FAQ Diffuseurs C2.7). */
.sacem-createurs-faq__item {
    padding: 0;
}

/* ============================================================
   Question (<summary>)
   ----
   Neutralisation du marker natif (triangle ou puce selon navigateur)
   pour qu'on contrôle l'icône nous-mêmes via .sacem-createurs-faq__icon.
   C2.9 chantier 4 : padding interne pour remplacer l'ancien padding
   1.25rem 0 sur __item (qui a perdu son padding au profit de .sacem-card).
   ============================================================ */

.sacem-createurs-faq__question {
    list-style: none;                     /* Firefox / Safari récents */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    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;
}

/* Marker WebKit (Chrome / Safari ancien) */
.sacem-createurs-faq__question::-webkit-details-marker {
    display: none;
}
/* Marker standard (autres moteurs) */
.sacem-createurs-faq__question::marker {
    content: '';
}

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

/* Focus visible accessible : le <summary> est focusable nativement,
   on rend l'anneau de focus alignement charte. */
.sacem-createurs-faq__question:focus-visible {
    outline: 2px solid var(--sacem-violet);
    outline-offset: 4px;
    border-radius: 2px;
}

.sacem-createurs-faq__question-text {
    flex: 1;
}

.sacem-createurs-faq__icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--sacem-violet);
    transition: transform 200ms ease;
}

.sacem-createurs-faq__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Chevron pivote vers le haut quand l'item est ouvert. */
.sacem-createurs-faq__item[open] .sacem-createurs-faq__icon {
    transform: rotate(180deg);
}

/* ============================================================
   Réponse — animation fade-in douce à l'ouverture (sans hauteur
   animée, geste minimaliste pour rester compatible HTML5 natif).
   ============================================================ */

.sacem-createurs-faq__answer {
    /* C2.9 chantier 4 : padding aligné horizontalement sur le summary
       (pattern FAQ Diffuseurs C2.7). Pas de padding-top — continuité
       visuelle avec le summary directement au-dessus. */
    padding: 0 1.5rem 1.25rem;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-body);
    line-height: 1.6;
    color: var(--sacem-ink);
    opacity: 0.85;
}

.sacem-createurs-faq__answer p {
    margin: 0;
}

.sacem-createurs-faq__item[open] > .sacem-createurs-faq__answer {
    animation: sacem-fadeIn 200ms ease-out;
}

@keyframes sacem-fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 0.85; transform: translateY(0); }
}

/* Mobile : questions un peu plus petites pour la lisibilité. */
@media (max-width: 767px) {
    .sacem-createurs-faq__question {
        font-size: var(--sacem-fs-h3);
        gap: 0.75rem;
    }

    .sacem-createurs-faq__icon {
        width: 20px;
        height: 20px;
    }
}

/* ============================================================
   Section "CTA final" (C1.9) — Bandeau gradient violet→orange
   Fond gradient charte --sacem-gradient-primary (125deg, violet
   → magenta → rose → corail → orange). Section la plus marquée
   visuellement de la page, point d'orgue qui ramène à l'action.
   ============================================================ */

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

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

.sacem-createurs-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.5rem;
}

/*
 * .sacem-createurs-cta-final__title-accent
 * ----
 * Accent typographique du titre. On ne réutilise PAS la classe
 * utilitaire .sacem-accent (qui applique un gradient text-clip
 * violet→orange — invisible sur le fond déjà gradient). À la place,
 * on code l'identité d'accent en local : Fraunces italic SOFT 100
 * en blanc, pour rester lisible sur le bandeau.
 */
.sacem-createurs-cta-final__title-accent {
    /* C1bis.2bis : retrait du display: block + margin-top → titre sur
       1 ligne en desktop. Wrap naturel en mobile (acceptable).
       C2.4ter : font-size 1.05em + padding-right 0.1em alignés sur
       .sacem-accent (charte C2.4bis) — équilibrage optique +
       anti-coupure du jambage italique (« ? » de « rejoindre la
       SACEM ? » était tronqué). */
    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;
}

/* C2.9 chantier 5 : ajout du sélecteur __eyebrow (BEM local) et
   renommage __text → __lede (cohérence Diffuseurs CTA final C2.8). */
.sacem-createurs-cta-final__eyebrow {
    margin-bottom: 1.25rem;
}

.sacem-createurs-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-createurs-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-createurs-cta-final__ctas {
        flex-direction: column;
        align-items: stretch;
    }

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

/* ============================================================
   Section DÉMARCHES (étape 4) — 3 colonnes
   ----
   Modelée sur .sacem-diffuseurs-demarches pour la cohérence :
   cartes mauve .sacem-card, dégradé de flux, ombres. Carte 3 = photo
   (image figée en CSS, titre + sous-texte en surimpression bas).
   ============================================================ */

.sacem-createurs-demarches {
    /* Compense la nav fixed lors d'un scroll-to-anchor vers #demarches
       (accès rapide hero / footer) — pattern page-aide-aux-projets.css. */
    scroll-margin-top: var(--nav-height-desktop, 88px);
    padding-block: clamp(3rem, 7vw, 5rem);
}

/* 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-createurs-demarches {
        scroll-margin-top: var(--nav-height-mobile, 80px);
    }
}

.sacem-createurs-demarches__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-createurs-demarches__head {
    text-align: left;
    margin-bottom: 2.5rem;
}

.sacem-createurs-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 0;
}

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

/* Grille 3 colonnes desktop. */
.sacem-createurs-demarches__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

/* Cartes texte : héritent .sacem-card, disposition interne en flex column. */
.sacem-createurs-demarches__card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

.sacem-createurs-demarches__card-intro {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-sm);
    line-height: 1.6;
    color: var(--sacem-text);
    margin: 0;
}

/* Sous-blocs de la carte 1 (texte + actions). Séparés par un filet léger. */
.sacem-createurs-demarches__subbloc {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(26, 14, 18, 0.08);
}

.sacem-createurs-demarches__subbloc-text {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-sm);
    line-height: 1.55;
    color: var(--sacem-text);
    margin: 0;
}

.sacem-createurs-demarches__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

/* Bouton « formulaire en ligne ». À sa largeur naturelle. */
.sacem-createurs-demarches__form-btn {
    align-self: flex-start;
}

/* État désactivé (URL non encore renseignée) : présent mais non cliquable. */
.sacem-createurs-demarches .is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Sous-titre interne (bulletins, ressources complémentaires). */
.sacem-createurs-demarches__subtitle {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-sm);
    color: var(--sacem-ink);
    margin: 0.25rem 0 0;
}

.sacem-createurs-demarches__pdf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sacem-createurs-demarches__pdf-list li {
    margin: 0;
}

/* Liens PDF — même langage que .sacem-createurs-card__pdf-link. */
.sacem-createurs-demarches__pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-sm);
    color: var(--sacem-violet);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sacem-createurs-demarches__pdf-link:hover,
.sacem-createurs-demarches__pdf-link:focus {
    color: var(--sacem-magenta);
    text-decoration: underline;
}

.sacem-createurs-demarches__pdf-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sacem-createurs-demarches__pdf-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Filet de séparation avant le bloc « Ressources complémentaires ». */
.sacem-createurs-demarches__sep {
    border: 0;
    border-top: 1px solid rgba(26, 14, 18, 0.10);
    margin: 0.5rem 0 0;
}

/* Carte 3 : photo verticale + voile + titre/texte en surimpression bas. */
.sacem-createurs-demarches__photo {
    position: relative;
    min-height: 360px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background-image: url("../img/sections/musicien-ecriture2.webp");
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    box-shadow: var(--sacem-card-shadow);
}

.sacem-createurs-demarches__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(26, 14, 18, 0.78) 0%, rgba(26, 14, 18, 0.30) 45%, rgba(26, 14, 18, 0) 75%);
    pointer-events: none;
}

.sacem-createurs-demarches__photo-inner {
    position: relative;
    z-index: 1;
    padding: clamp(1.5rem, 3vw, 2rem);
}

.sacem-createurs-demarches__photo-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    line-height: 1.2;
    color: #fff;
    margin: 0 0 0.5rem;
    text-shadow: 0 2px 18px rgba(26, 14, 18, 0.35);
}

.sacem-createurs-demarches__photo-text {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

/* Tablette / mobile (<1024px) : colonnes empilées. */
@media (max-width: 1023px) {
    .sacem-createurs-demarches__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .sacem-createurs-demarches__photo {
        min-height: 280px;
    }
}

/* ====== 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-createurs-qui-peut-adherer { --p-top: 0; --p-bot: 0.2; 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-createurs-pourquoi-rejoindre { --p-top: 0.2; --p-bot: 0.4; 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-createurs-conditions-admission { --p-top: 0.4; --p-bot: 0.6; 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-createurs-processus { --p-top: 0.6; --p-bot: 0.8; 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%); }
/* Étape 4 : section Démarches insérée entre le bandeau [rythme] et la FAQ.
   Bande beige douce (le bandeau photo qui la précède assure la rupture ;
   la FAQ qui suit repart au blanc — cf. étape 3). */
.sacem-createurs-demarches { --p-top: 0.2; --p-bot: 0.6; 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.8 → dégradé
   blanc→beige réellement visible (la plage 0.8–1 était trop comprimée, ~1 %
   d'écart = fond plat à l'œil). Bas inchangé sur le beige plancher (--p-bot:1). */
.sacem-createurs-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%); }