/* ============================================================
   page-aide-aux-projets.css — CSS spécifique de la page
   institutionnelle « Aide aux projets » (sprint C6).

   Patterns charte-1 utilisés (consommation réelle, première
   page à le faire) :
   - .sacem-hero--photo                 → section 1 Hero (container
                                          + overlay + responsive nav,
                                          fourni par charte-components.css)
   - .sacem-section--hibiscus-tl        → section 3 Programme Autoproduction
   - .sacem-section--hibiscus-br        → section 5 Programme Festivals
   - Tokens --sacem-violet, --sacem-magenta, --sacem-corail,
     --sacem-orange, --sacem-gray, --nav-height-mobile,
     --nav-height-desktop

   Patterns NON réutilisés (dette Nos missions reconnue) :
   - .sacem-section--gradient → CTA final implémenté en local en
     copiant le pattern .sacem-createurs-cta-final (C1.9).
   ============================================================ */

/* ============================================================
   Section 1 — HERO  (C6.2)
   ----
   On consomme la classe utilitaire `.sacem-hero--photo` (charte-1)
   pour le container (min-height 100vh, padding nav, display flex
   centré, overlay double gradient ::before, responsive mobile).

   Côté page, on n'ajoute que :
   - background-image dédiée
   - typographie des enfants (eyebrow, title, accent, lede), reprise
     stricte du pattern `.sacem-createurs-hero` C1bis.3 mais sans
     dupliquer le container parent.

   Le bug "bord blanc mobile" qui motivait l'abandon de la classe
   utilitaire en C5.12a a été requalifié en artefact d'environnement
   de test en C6.0 (cf. docs/journal.md 2026-05-25), donc la
   consommation propre est désormais validée.
   ============================================================ */

.sacem-ap-hero {
    background-image: url('../img/hero/hero-aide-aux-projets.webp');
}

.sacem-ap-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-ap-hero__eyebrow {
    font-size: var(--sacem-fs-micro);
    letter-spacing: 0.15em;
    margin-bottom: 1.25rem;
}

.sacem-ap-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:
        0 2px 40px rgba(26, 14, 18, 0.55),
        0 1px 2px rgba(26, 14, 18, 0.25);
    margin: 0 0 1.5rem;
}

/* Accent inline Fraunces italic — override de `.sacem-accent`
   (gradient text-clip) qui devient invisible sur fond photo
   sombre. Aligné sur `.sacem-createurs-hero__title-accent`. */
.sacem-ap-hero__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;
    background: none;
    -webkit-background-clip: initial;
            background-clip: initial;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

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

/* ============================================================
   Section 2 — VUE D'ENSEMBLE  (C6.3)
   ----
   3 cartes cliquables qui mènent aux ancres internes des sections
   programmes (c6.4 #autoproduction, c6.5 #production-scenique,
   c6.6 #festivals).

   Pattern card adapté de `.sacem-sp-gouvernance__card` (C5) :
   fond blanc + border 1px + radius 16px + hover violet + liseret
   ::before au top. Adapté ici en `repeat(3, 1fr)` desktop avec
   breakpoints 980px (2 col) / 768px (1 col).

   Différences vs gouvernance :
   - Card entièrement cliquable (`<a>` qui porte le style card,
     pas `<article>` interne).
   - Slot eyebrow audience en haut + slot montant Fraunces italic
     en bas (alignement bottom via flex column + margin-top auto).
   ============================================================ */

.sacem-ap-overview {
    background-color: var(--sacem-white, #fff);
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

.sacem-ap-overview__inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    /* C6.4 fix — text-align center sur l'inner permet à `.sacem-eyebrow`
       (display: inline-flex de la charte) de rester visible avec son
       trait coloré ::before, tout en restant centré horizontalement.
       Les cards à l'intérieur du grid forcent text-align: left
       localement pour ne pas hériter du centrage. */
    text-align: center;
}

.sacem-ap-overview__eyebrow {
    /* C6.4 — RETRAIT volontaire de `display: block` + `text-align:
       center` posés en C6.3. Le span hérite désormais du
       `display: inline-flex` de `.sacem-eyebrow` (charte-1) qui pose
       le trait ::before — d'où le `inline-flex` est requis. Le
       centrage horizontal vient de `text-align: center` du parent
       __inner. */
    margin-bottom: 1rem;
}

.sacem-ap-overview__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--sacem-text-primary, #1f1f1f);
    margin: 0 0 1.5rem;
    text-align: center;
}

/* Accent inline Fraunces italic via `.sacem-accent` du charte-1.
   Sur fond clair, le gradient text-clip s'applique (pas besoin
   d'override couleur comme dans le Hero). */
.sacem-ap-overview__title-accent {
    /* Hérite intégralement de `.sacem-accent` (charte-1). */
}

.sacem-ap-overview__lede {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-lede);
    line-height: 1.65;
    color: var(--sacem-text-secondary, #4a4a4a);
    max-width: 760px;
    margin: 0 auto 3rem;
    text-align: center;
}

.sacem-ap-overview__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Carte cliquable. Le `<a>` PORTE le style card (pas de wrapper
   article interne) — text-decoration retiré, couleur héritée, et
   on en fait un flex column pour aligner le montant en bas. */
.sacem-ap-overview__card {
    display: flex;
    flex-direction: column;
    background: var(--sacem-card-bg);
    box-shadow: var(--sacem-card-shadow);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 1.75rem;
    position: relative;
    text-decoration: none;
    color: inherit;
    /* C6.4 fix — force le text-align à gauche dans la card pour ne pas
       hériter du `text-align: center` posé sur __inner (qui sert à
       centrer le eyebrow et le titre de section). */
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sacem-ap-overview__card:hover,
.sacem-ap-overview__card:focus-visible {
    border-color: var(--sacem-violet, #7C3AED);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.08);
    transform: translateY(-2px);
    outline: none;
}

/* Liseret coloré au top — orange charte (cohérent avec SP gouvernance
   et le pattern Créateurs C5.12d). */
.sacem-ap-overview__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.75rem;
    right: 1.75rem;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--sacem-orange, #F97316);
}

/* Audience : eyebrow petit en haut de carte, sans le liseret
   `.sacem-eyebrow` global (qui serait trop chargé visuellement
   au-dessus du liseret card). Variante locale violet pour rappeler
   la couleur du hover. */
.sacem-ap-overview__card-audience {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sacem-violet, #7C3AED);
    margin: 0 0 0.75rem;
}

.sacem-ap-overview__card-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--sacem-fs-h3);
    line-height: 1.3;
    color: var(--sacem-text-primary, #1f1f1f);
    margin: 0 0 0.875rem;
}

.sacem-ap-overview__card-desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-sm);
    line-height: 1.6;
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 0 0 1.5rem;
}

/* Montant mis en valeur — Fraunces italic, taille marquée. Aligné
   en bas de carte via margin-top auto (flex column parent). */
.sacem-ap-overview__card-amount {
    display: block;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-variation-settings: 'SOFT' 100, 'opsz' 144;
    font-size: calc(var(--sacem-fs-base) * 1.5);
    line-height: 1.2;
    color: var(--sacem-orange, #F97316);
}

/* ============================================================
   Sections programmes — classe générique (C6.3 + enrichie C6.4)
   ----
   Les 3 sections programmes détaillées (#autoproduction,
   #production-scenique, #festivals) portent cette classe pour :
   1. scroll-margin-top qui compense la nav fixed lors d'un click
      sur une ancre interne depuis la Vue d'ensemble
   2. padding-block généreux uniforme
   3. inner max-width contrôlé pour la lecture

   La variante locale (--autoproduction, --scenique, --festivals)
   gère le fond alternatif (rythme cream/blanc/cream/...).
   ============================================================ */
.sacem-ap-programme {
    scroll-margin-top: var(--nav-height-desktop, 88px);
    padding-block: clamp(3.5rem, 8vw, 6rem);
    position: relative;
    isolation: isolate;
}

.sacem-ap-programme__inner {
    max-width: 980px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    position: relative;
    z-index: 1; /* au-dessus du filigrane hibiscus */
}

/* sprint habillage-ap-2a — coquille carte autour de chaque programme.
   Hérite .sacem-card (charte-components) : fond blanc→mauve, liseré
   gradient animé en haut, ombre de repos, survol surélevé — même
   traitement que les missions de la page « Nos missions ». Le socle
   beige progressif reste porté par la <section> parente (visible dans
   le padding-block autour de la carte). L'ancre interne #<anchor> et son
   scroll-margin-top restent sur la <section>, pas sur la carte : le
   comportement teaser→programme est inchangé.

   Padding interne plus généreux que le défaut .sacem-card (2.25rem
   1.75rem) pour laisser respirer le contenu dense (header centré,
   critères, modalités 2 colonnes, montant, dossier, callouts). */
.sacem-ap-programme__card {
    padding: clamp(1.75rem, 4vw, 3rem);
}

/* === Header de section programme ===
   sprint 2b-2 — passage d'un header centré pleine largeur à une GRILLE
   2 colonnes : texte aligné à gauche | pastille photo ronde à droite.
   Pattern aligné sur la carte Missions (grid 1fr auto + grid-template-areas).

   Le callout info de P02 (scénique) est un enfant DIRECT du header : sa
   grid-area `callout` s'étend sur les 2 colonnes (rangée pleine largeur
   SOUS texte+pastille), pour qu'il ne soit pas coincé en colonne. Pour
   P01/P03 (sans callout) cette rangée reste vide (hauteur 0). */
.sacem-ap-programme__header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "text    pastille"
        "callout callout";
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    text-align: left;
    margin: 0 0 3rem;
}

.sacem-ap-programme__header-text {
    grid-area: text;
    min-width: 0; /* autorise le wrapping du titre/lede dans la colonne */
}

.sacem-ap-programme__header > .sacem-pastille-photo {
    grid-area: pastille;
    align-self: start;
}

.sacem-ap-programme__header > .sacem-ap-programme__callout {
    grid-area: callout;
}

.sacem-ap-programme__eyebrow {
    /* C6.4 fix — RETRAIT volontaire de `display: block`. Le span hérite
       désormais du `display: inline-flex` de `.sacem-eyebrow` (charte-1)
       qui pose le trait ::before. Centrage assuré par
       `text-align: center` du parent .sacem-ap-programme__header. */
    margin-bottom: 1rem;
}

.sacem-ap-programme__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--sacem-text-primary, #1f1f1f);
    margin: 0 0 1.5rem;
}

.sacem-ap-programme__lede {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-lede);
    line-height: 1.65;
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 0;
}

/* === Blocs (Critères / Modalités / Montant / Dossier) === */
.sacem-ap-programme__block {
    margin-bottom: 2.5rem;
}

.sacem-ap-programme__block:last-of-type {
    margin-bottom: 0;
}

.sacem-ap-programme__block-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-h3);
    line-height: 1.3;
    color: var(--sacem-text-primary, #1f1f1f);
    margin: 0 0 1.25rem;
}

.sacem-ap-programme__sub-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-h3);
    line-height: 1.4;
    color: var(--sacem-violet, #7C3AED);
    margin: 0 0 0.75rem;
    letter-spacing: 0.01em;
}

/* === Modalités : 2 sous-blocs côte à côte desktop === */
.sacem-ap-programme__modalities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

/* === Sous-cartes « modalités » — fond rosé désaturé ===
   Décalage de TEINTE vers le rosé pour que les sous-cartes sortent de la
   famille mauve de la coquille (.sacem-card, fond dégradé blanc→mauve) et
   se détachent par la couleur, pas seulement par le relief.

   Token : --sacem-rose (#D64A6B), le rosé de la charte le plus éloigné du
   violet/mauve. Mixé dans du BLANC OPAQUE (et non `transparent`) : sinon le
   mauve du dégradé re-teinterait par dessous et on retomberait dans sa
   famille ; sur blanc opaque, c'est bien le rosé désaturé qui est vu, quel
   que soit le point du dégradé derrière.

   Relief (contour rosé fin + ombre douce) conservé. Distinction assumée vs
   callout --info : ni picto, ni liseré violet à gauche. Texte foncé sur ce
   fond clair : contraste AA largement conservé (≈ 11:1). */
.sacem-ap-programme__sub-block {
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--sacem-rose) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--sacem-rose) 22%, transparent);
    box-shadow: 0 1px 2px rgba(26, 14, 18, 0.04),
                0 6px 16px rgba(26, 14, 18, 0.06);
}

/* === Listes (puces custom : tiret corail) === */
/* C6.4 fix — la règle Divi `.entry-content ul { list-style-type:
   disc; padding-left: 1em }` (specificity 0,1,1) battait notre
   sélecteur `.sacem-ap-programme__list` (0,1,0), d'où l'apparition
   doublée de bullets natives + tiret orange ::before sur les 4 listes
   Autoproduction (critères, modalités physique, modalités numérique,
   dossier).

   Sélecteur compound `.sacem-ap-programme .sacem-ap-programme__list`
   (specificity 0,2,0) bat Divi sans avoir besoin de !important ni
   d'augmenter encore la spécificité. Le padding-left: 1.5rem sur les
   items reste local pour la place du tiret. */
.sacem-ap-programme .sacem-ap-programme__list {
    list-style: none;
    list-style-type: none;
    padding: 0;
    padding-left: 0;
    margin: 0;
}

.sacem-ap-programme__list-item {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-body);
    line-height: 1.6;
    color: var(--sacem-text-secondary, #4a4a4a);
}

.sacem-ap-programme__list-item:last-child {
    margin-bottom: 0;
}

/* Puce : tiret corail aligné sur la première ligne du texte. */
.sacem-ap-programme__list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 0.75rem;
    height: 2px;
    border-radius: 1px;
    background: var(--sacem-orange, #F97316);
}

/* === Listes en 2 colonnes (sprint 2a-bis) — coulé vertical column-count ===
   Conforme aux maquettes : Critères (P01/P02/P03), Dossier (P01) et
   Engagements (P02/P03) passent en 2 colonnes.

   Ciblage PRÉCIS via `> ul.sacem-ap-programme__list` (enfant DIRECT du
   bloc) : dans les blocs --dossier et --engagements, la <ul> cohabite avec
   des <p> et un <aside> callout. Le sélecteur enfant direct n'attrape QUE
   la liste — paragraphes et callouts restent pleine largeur.

   break-inside: avoid sur chaque item → jamais coupé entre deux colonnes.
   La puce ::before (absolute, left:0) reste dans le padding-left:1.5rem de
   chaque <li>, donc bien positionnée dans les deux colonnes sans déborder. */
.sacem-ap-programme__block--eligibility > ul.sacem-ap-programme__list,
.sacem-ap-programme__block--dossier > ul.sacem-ap-programme__list,
.sacem-ap-programme__block--engagements > ul.sacem-ap-programme__list {
    column-count: 2;
    column-gap: 2.5rem;
}

.sacem-ap-programme__block--eligibility > ul.sacem-ap-programme__list > .sacem-ap-programme__list-item,
.sacem-ap-programme__block--dossier > ul.sacem-ap-programme__list > .sacem-ap-programme__list-item,
.sacem-ap-programme__block--engagements > ul.sacem-ap-programme__list > .sacem-ap-programme__list-item {
    break-inside: avoid;
}

/* === Montant principal — gradient signature text-clip (sprint 2a-bis) === */
.sacem-ap-programme__amount-main {
    /* Historique : Outfit bold violet uni depuis le refactor post-C6.8
       (montant = info administrative, pas focal). 2a-bis revient à un
       traitement célébratoire conforme aux maquettes : gradient SIGNATURE
       en text-clip (même technique que .sacem-accent / titres bicolores),
       MAIS on garde Outfit bold (pas le Fraunces italic de .sacem-accent)
       pour NE PAS rouvrir la dette typo `amount` (Fraunces italic).

       Gradient biaisé sur la portion FONCÉE (violet→magenta→rose, sans
       corail/orange) : la partie claire du gradient signature se fondrait
       dans le fond rosé pâle de l'encadré. Tokens charte uniquement.
       Conservation de font-size / line-height. */
    font-family: var(--font-body);
    font-weight: 700;
    font-style: normal;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    line-height: 1.1;
    margin: 0;
    /* nowrap : garde le montant sur UNE ligne dans l'encadré (résout le
       « 200 000 XPF » coupé en 2 lignes sur P02). */
    white-space: nowrap;
    background: linear-gradient(125deg,
        var(--sacem-violet) 0%,
        var(--sacem-magenta) 50%,
        var(--sacem-rose) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* libère le dernier glyphe du clip (cf. fix .sacem-accent C2.4bis). */
    padding-right: 0.06em;
}

.sacem-ap-programme__amount-complement {
    /* Refactor post-C6.8 — passage de Fraunces italic à Outfit
       italic (en suivant le passage de amount-main vers Outfit bold).
       L'italique est conservé sur le complément pour signaler
       visuellement "note d'info complémentaire" sans dissonance
       typographique avec le montant principal (qui n'est plus
       Fraunces italic non plus). Taille modeste et couleur charte
       gris foncé conservées. */
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    font-size: calc(var(--sacem-fs-base) * 1);
    line-height: 1.5;
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 0;
    max-width: 640px;
}

/* === Encadré montant (sprint 2a-bis) — les 3 programmes ===
   Le bloc --amount devient un conteneur flex : à gauche l'ENCADRÉ rosé
   (eyebrow + chiffre), à droite/dessous le complément italique HORS cadre.
   Sur P02 (dans la grille Modalités|Montant), le complément est vide → seul
   l'encadré s'affiche. Repli mobile : pile (encadré pleine largeur, complément
   dessous) géré dans la media query 768px. */
.sacem-ap-programme__block--amount {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

/* L'encadré : même rosé désaturé que les sous-cartes modalités
   (--sacem-rose 8% sur blanc opaque) + contour rosé + coins arrondis.
   Largeur au contenu (fit-content) pour que le chiffre tienne sur 1 ligne. */
.sacem-ap-programme__amount-box {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    padding: 1.25rem 1.75rem;
    border-radius: 16px;
    background-color: color-mix(in srgb, var(--sacem-rose) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--sacem-rose) 22%, transparent);
}

/* Eyebrow « MONTANT DE L'AIDE » : reprend le look .sacem-eyebrow (Outfit
   600, magenta, majuscules) sans le trait ::before. C'est le <h3>
   block-title existant, restylé dans le contexte de l'encadré (pas de
   markup ajouté — la sémantique de titre de bloc est conservée). */
.sacem-ap-programme__amount-box > .sacem-ap-programme__block-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sacem-magenta);
    margin: 0 0 0.5rem;
}

/* Complément hors cadre : prend la place restante, repasse sous l'encadré
   quand l'espace manque (flex-wrap). */
.sacem-ap-programme__block--amount > .sacem-ap-programme__amount-complement {
    flex: 1 1 16rem;
}

/* === Grille Modalités | Montant — Programme 02 (Scénique) uniquement
   (sprint 2a-bis) ===
   Conforme à la maquette P02 : le bloc Montant passe en colonne de DROITE,
   à côté du bloc Modalités, au lieu d'être empilé pleine largeur. Wrapper
   ajouté dans render_programme_scenique() autour des deux __block ; leur
   markup interne est inchangé. P01/P03 n'utilisent pas ce wrapper et
   gardent leur Montant pleine largeur empilée. */
.sacem-ap-programme__modamount-grid {
    display: grid;
    /* `auto` sur la colonne Montant : elle se dimensionne à l'encadré (qui
       est en fit-content), donc le chiffre tient sur une ligne ; Modalités
       prend le reste. */
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
    align-items: start;
    /* Le wrapper joue le rôle d'un __block dans le flux vertical : il en
       reprend le rythme. L'écart entre Modalités et Montant vient du gap,
       donc les __block internes perdent leur margin-bottom (cf. ci-dessous). */
    margin-bottom: 2.5rem;
}
.sacem-ap-programme__modamount-grid > .sacem-ap-programme__block {
    margin-bottom: 0;
}

/* === Dossier : intro + items + conditionnels === */
.sacem-ap-programme__dossier-intro {
    font-family: var(--font-body);
    font-weight: 500;
    /* sprint typo-v2 (ajustement) : chapô d'intro → lede. */
    font-size: var(--sacem-fs-lede);
    line-height: 1.5;
    color: var(--sacem-text-primary, #1f1f1f);
    margin: 0 0 1rem;
}

.sacem-ap-programme__dossier-conditional {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-sm);
    line-height: 1.6;
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 1.25rem 0 0;
    padding-left: 0;
}

/* === Callout (note d'information / avertissement) ===
   C6.5 refactor SVG — 2 variantes obligatoires (`--info` / `--warning`)
   avec icône SVG inline custom (charte SACEM PF, pas d'emoji Unicode).
   Le SVG est rendu côté shortcode via le helper PHP
   `Sacem_PF_AP_Shortcodes::callout_icon_svg($variant)` ; il porte
   `fill="currentColor"` pour hériter de la couleur définie par
   `.sacem-ap-programme__callout-icon` (override par variante).

   Raison du refactor : rendu cross-OS / cross-browser garanti (emoji
   Unicode ℹ️ / ⚠️ rendus différemment selon l'OS — plat noir/blanc
   sur certains, multicolore sur d'autres, taille inconsistante).
   ============================================================ */

/* Structure commune : flex pour aligner icône SVG à gauche +
   contenu texte à droite. Border-left épais (couleur par variante),
   border-radius léger côté droit. */
.sacem-ap-programme__callout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid; /* couleur via variante */
    border-radius: 0 8px 8px 0;
    background-color: transparent; /* couleur via variante */
}

/* Icône SVG inline. La taille (24px) cale avec la hauteur de ligne
   du texte 0.9375rem × 1.6 = 1.5em ≈ 24px → alignement visuel propre
   sur la première ligne. La couleur est définie par variante et
   transmise au SVG via `currentColor` sur ses `fill` / `stroke`. */
.sacem-ap-programme__callout-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 0.0625rem; /* compensation optique pour aligner sur le top des capitales */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sacem-ap-programme__callout-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Variante --info : violet charte + SVG cercle plein + "i" blanc.
   Couleur appliquée via `color:` qui se propage au SVG via
   `currentColor` (fill="currentColor" sur les éléments SVG). */
.sacem-ap-programme__callout--info {
    background-color: rgba(107, 31, 124, 0.06);
    border-left-color: var(--sacem-violet, #6B1F7C);
}

.sacem-ap-programme__callout--info .sacem-ap-programme__callout-icon {
    color: var(--sacem-violet, #6B1F7C);
}

/* Variante --warning : orange charte + SVG triangle plein + "!" blanc.
   Sémantique "engagements / non-conformité" — utilisée en C6.5 sur
   Production scénique. */
.sacem-ap-programme__callout--warning {
    background-color: rgba(242, 139, 30, 0.08);
    border-left-color: var(--sacem-orange, #F28B1E);
}

.sacem-ap-programme__callout--warning .sacem-ap-programme__callout-icon {
    color: var(--sacem-orange, #F28B1E);
}

.sacem-ap-programme__callout-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-sm);
    line-height: 1.6;
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 0;
    /* C6.11 fix recette finale — overflow-wrap: anywhere autorise
       la coupure de chaîne sur n'importe quel caractère (utile pour
       les URL longues non-breakable, ex. lien portail SACEM
       autorisations dans le callout Autoproduction). Sans ce fix,
       débordement horizontal de 41px constaté sur viewport 320px
       (iPhone SE limite basse). N'affecte pas le wrap normal des
       mots (qui suit toujours les espaces). */
    overflow-wrap: anywhere;
}

.sacem-ap-programme__callout-text a {
    color: var(--sacem-violet, #6B1F7C);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.sacem-ap-programme__callout-text a:hover {
    text-decoration-thickness: 2px;
}

/* Lien dans un callout --warning : aligné sur la couleur de variante
   (orange) pour cohérence visuelle. */
.sacem-ap-programme__callout--warning .sacem-ap-programme__callout-text a {
    color: var(--sacem-orange, #F28B1E);
}

/* === CTA fin de section === */
/* === Lien de téléchargement du PDF officiel (fiche programme) — RC2 ===
   Placé avant le CTA « Nous contacter » dans chaque section programme.
   Markup et style calqués sur le lien PDF de la carte Démarches Créateurs
   (icône file_pdf + label, violet → magenta au survol). */
.sacem-ap-programme__pdf-download {
    text-align: center;
    margin-top: 2.5rem;
}

.sacem-ap-programme__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-ap-programme__pdf-link:hover,
.sacem-ap-programme__pdf-link:focus {
    color: var(--sacem-magenta);
    text-decoration: underline;
}

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

.sacem-ap-programme__pdf-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sacem-ap-programme__cta-wrap {
    text-align: center;
    margin-top: 3rem;
}

/* === Variante utilitaire --alt (fond cream) ===
   C6.6 refactor — factorisée depuis .sacem-ap-programme--autoproduction
   (C6.4) parce que 3 sections cream à terme (Autoproduction, Festivals,
   Chiffres 2025 c6.8). Le markup PHP applique cette classe en plus de
   la classe sémantique de section (--autoproduction, --festivals).

   Convention d'usage :
   - Sections cream : `class="sacem-ap-programme sacem-ap-programme--<key> sacem-ap-programme--alt"`
   - Sections blanches : `class="sacem-ap-programme sacem-ap-programme--<key>"` (pas de --alt)

   Rythme visuel alternance cream/blanc sur la page AP :
     Vue d'ensemble (blanc + hibiscus)
     → Autoproduction (cream via --alt)
     → Scénique (blanc)
     → Festivals (cream via --alt)
     → Calendrier (blanc, c6.7)
     → Chiffres (cream + hibiscus, c6.8 — utilisera aussi --alt)
     → CTA final (gradient, c6.9)
   ============================================================ */
.sacem-ap-programme--alt {
    background-color: var(--sacem-cream, #FAF6F2);
}

/* === Variantes sémantiques par programme ===
   Classes sémantiques posées sur le wrapper pour permettre du
   styling spécifique futur sans refactor. Vides pour l'instant
   (le fond cream est porté par --alt mutualisé ci-dessus).
   ============================================================ */
.sacem-ap-programme--autoproduction {
    /* Spécificités futures Autoproduction (vide en C6.6). */
}

.sacem-ap-programme--scenique {
    background-color: #fff;
}

.sacem-ap-programme--festivals {
    /* Spécificités futures Festivals (vide en C6.6). */
}

/* ============================================================
   Section 6 — CALENDRIER ET INSTRUCTION  (C6.7)
   ----
   Section transversale (s'applique aux 3 programmes ensemble),
   nouvelle famille CSS `.sacem-ap-modalites__*` distincte des
   sections programme (`.sacem-ap-programme__*`) pour clarté
   sémantique — ce n'est pas un programme isolé, c'est un bloc
   d'info commun.

   Réutilisations cross-pattern :
   - `.sacem-ap-programme__callout` + `--info` + helper
     `callout_icon_svg('info')` : pattern visuel utilitaire,
     applicable hors sections programme sans confusion sémantique
     (cf. brief tech lead).

   Listes : règles dupliquées du pattern `.sacem-ap-programme__list`
   plutôt que cross-pattern (décision tech lead pour clarté
   sémantique — les listes modalites ne sont pas des listes de
   programme).
   ============================================================ */

.sacem-ap-modalites {
    background-color: #fff;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    position: relative;
    isolation: isolate;
    /* C6.7 fix pré-commit — scroll-margin-top posé directement sur
       .sacem-ap-modalites (plutôt que cross-apply .sacem-ap-programme
       qui aurait couplé 2 patterns sémantiquement distincts). Permet
       une éventuelle navigation par ancre #calendrier-instruction
       sans masquer le H2 sous la nav fixed. Variable mobile gérée
       dans la media query 1024px ci-dessous. */
    scroll-margin-top: var(--nav-height-desktop, 88px);
}

.sacem-ap-modalites__inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    position: relative;
    z-index: 1;
}

/* Header centré (pattern aligné sur `.sacem-ap-programme__header`). */
.sacem-ap-modalites__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 3rem;
}

.sacem-ap-modalites__eyebrow {
    margin-bottom: 1rem;
}

.sacem-ap-modalites__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--sacem-text-primary, #1f1f1f);
    margin: 0 0 1.5rem;
}

.sacem-ap-modalites__title-accent {
    /* Hérite intégralement de `.sacem-accent` (charte-1). */
}

.sacem-ap-modalites__lede {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-lede);
    line-height: 1.65;
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 0;
}

/* Grid 3 colonnes desktop (Calendrier / Instruction / Versement),
   1 colonne mobile via breakpoint 1024px direct (pas d'étape
   intermédiaire 2 colonnes pour éviter un bloc bancal en bas). */
.sacem-ap-modalites__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    /* sprint 2b-1 — cartes .sacem-card de HAUTEUR ÉGALE (calée sur la plus
       haute), conforme maquette : la carte 1 a du vide en bas. `stretch`
       étire chaque carte sur toute la hauteur de la rangée. En mobile
       (1 colonne) stretch n'a aucun effet visible. */
    align-items: stretch;
}

.sacem-ap-modalites__block {
    /* Espacement inter-blocs géré par le `gap` de la grid. Pas de
       padding interne ni de border : les 2 blocs cohabitent visuellement
       grâce à la respiration de la grid. */
}

.sacem-ap-modalites__block-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-h3);
    line-height: 1.3;
    color: var(--sacem-text-primary, #1f1f1f);
    margin: 0 0 1.25rem;
}

/* Phrase calendrier — paragraphe standard avec un highlight inline
   sur la période (bold + couleur violet charte). Pas Fraunces italic
   pour rester modéré : les montants des programmes restent le focal
   typographique majeur du projet (cf. décision tech lead). */
.sacem-ap-modalites__phrase {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-body);
    line-height: 1.65;
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 0 0 1.5rem;
}

.sacem-ap-modalites__highlight {
    font-weight: 600;
    color: var(--sacem-violet, #6B1F7C);
}

/* Listes — règles dupliquées du pattern `.sacem-ap-programme__list`
   (décision tech lead C6.7 : dupliquer pour clarté sémantique plutôt
   que cross-pattern). Spécificité 0,2,0 pour battre Divi
   `.entry-content ul` (0,1,1). */
.sacem-ap-modalites .sacem-ap-modalites__list {
    list-style: none;
    list-style-type: none;
    padding: 0;
    padding-left: 0;
    margin: 0;
}

.sacem-ap-modalites__list-item {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-body);
    line-height: 1.6;
    color: var(--sacem-text-secondary, #4a4a4a);
}

.sacem-ap-modalites__list-item:last-child {
    margin-bottom: 0;
}

.sacem-ap-modalites__list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 0.75rem;
    height: 2px;
    border-radius: 1px;
    background: var(--sacem-orange, #F97316);
}

@media (max-width: 1024px) {
    .sacem-ap-modalites__grid {
        grid-template-columns: 1fr;
        gap: clamp(2.5rem, 6vw, 3.5rem);
    }

    /* C6.7 fix pré-commit — scroll-margin-top mobile cohérent avec
       le pattern `.sacem-ap-programme` (compense la hauteur de la
       nav fixed mobile lors d'un scroll-to-anchor). */
    .sacem-ap-modalites {
        scroll-margin-top: var(--nav-height-mobile, 80px);
    }
}

/* ============================================================
   Section 7 — CHIFFRES 2025  (C6.8)
   ----
   Bilan annuel : 4 cartes chiffres + note complémentaire. Fond
   cream via classe utilitaire `--alt` (factorisée C6.6) + filigrane
   hibiscus bottom-right via `.sacem-section--hibiscus-br` (charte-1,
   miroir du `--hibiscus-tl` de Vue d'ensemble). Encadrement
   diagonal de la page (présentation haut/gauche, bilan bas/droite).

   Réutilisations :
   - `.sacem-ap-modalites__inner` + `__header` (mise en forme centrée
     identique au Calendrier C6.7).
   - `.sacem-ap-programme` + `--alt` (scroll-margin-top, padding-block,
     fond cream — légère entorse sémantique reconnue, à reconsidérer
     dans un refactor utilitaire futur).
   ============================================================ */

/* sprint 2b-3 — l'ancienne grille de cartes chiffres (__grid / __card /
   __card-value / __card-label) a été remplacée par les TICKETS sur fond
   sombre (cf. bloc « Bilan 2025 — section sombre » + « Tickets » plus bas).
   Règles mortes supprimées. */

/* Note complémentaire — phrase centrée avec highlight typographique
   (bold + couleur violet charte). Pattern aligné sur le calendrier
   C6.7 (highlight period). */
.sacem-ap-chiffres__note {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-sm);
    line-height: 1.65;
    color: var(--sacem-text-secondary, #4a4a4a);
    text-align: center;
    max-width: 720px;
    margin: 3rem auto 0;
}

.sacem-ap-chiffres__note-highlight {
    font-weight: 600;
    color: var(--sacem-violet, #6B1F7C);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
    .sacem-ap-overview__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sacem-ap-overview__grid {
        grid-template-columns: 1fr;
    }

    .sacem-ap-programme {
        scroll-margin-top: var(--nav-height-mobile, 80px);
    }

    /* sprint 2b-2 — header en 1 colonne : pastille empilée AU-DESSUS du
       texte (pattern Missions), texte pleine largeur aligné à gauche,
       callout pleine largeur en dessous. */
    .sacem-ap-programme__header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "pastille"
            "text"
            "callout";
        justify-items: start;
    }
    .sacem-ap-programme__header > .sacem-pastille-photo {
        margin-bottom: 1.25rem;
    }

    .sacem-ap-programme__modalities-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .sacem-ap-programme__sub-block {
        padding: 1rem 1.25rem;
    }

    /* sprint 2a-bis — repli mobile OBLIGATOIRE : listes 2 colonnes → 1,
       grille Modalités|Montant (P02) → empilée. Sans ça, le mobile
       resterait en 2 colonnes (tassement / débordement). */
    .sacem-ap-programme__block--eligibility > ul.sacem-ap-programme__list,
    .sacem-ap-programme__block--dossier > ul.sacem-ap-programme__list,
    .sacem-ap-programme__block--engagements > ul.sacem-ap-programme__list {
        column-count: 1;
    }

    .sacem-ap-programme__modamount-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* sprint 2a-bis — encadré montant : pile (encadré pleine largeur,
       complément dessous) sur mobile. */
    .sacem-ap-programme__block--amount {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .sacem-ap-programme__amount-box {
        width: 100%;
    }
    /* Le nowrap desktop garantit le montant sur 1 ligne dans l'encadré
       dimensionné ; sur mobile (encadré pleine largeur, écran étroit) on
       le neutralise pour que le texte reflue DANS l'encadré au lieu de
       déborder horizontalement. */
    .sacem-ap-programme__amount-main {
        white-space: normal;
    }
}

/* ============================================================
   Section 8 — CTA FINAL  (C6.9)
   ----
   Bandeau gradient charte pleine largeur — point d'orgue visuel
   de la page. Pattern adapté de `.sacem-createurs-cta-final` (C1.9)
   qui sert de référence stable (cf. cadrage §6 : "copier le pattern
   local du CTA final de Créateurs au lieu d'utiliser
   `.sacem-section--gradient`").

   Pas de fullbleed explicite (`width: 100vw`) : les sections AP
   rendent déjà à pleine largeur viewport (1440px sur viewport 1440,
   confirmé via Chrome MCP).

   Accent du titre codé en local blanc Fraunces italic — la classe
   utilitaire `.sacem-accent` (gradient text-clip violet→orange)
   serait invisible sur fond gradient.

   Bouton CTA réutilise `.sacem-btn--primary-on-dark` (charte-1,
   conçue pour ce cas d'usage). Flèche SVG inline custom via le
   helper PHP `cta_arrow_svg()`.
   ============================================================ */

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

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

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

/* Accent du titre — Fraunces italic blanc en local (cf. note
   d'en-tête). 1.05em + padding-right 0.1em alignés sur la
   correction d'équilibrage optique `.sacem-accent` C2.4bis. */
.sacem-ap-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-ap-cta-final__intro {
    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;
}

/* Bouton CTA — hérite de `.sacem-btn--primary-on-dark` (fond blanc
   + texte violet + shadow). On ajoute display: inline-flex et un
   gap pour aligner le label avec la flèche SVG. */
.sacem-ap-cta-final__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

/* Flèche SVG — 16x16 alignée sur la baseline du texte du bouton.
   currentColor sur le stroke → hérite de la couleur du bouton
   (violet par défaut, blanc au hover via la règle :hover de
   `.sacem-btn--primary-on-dark`). */
.sacem-ap-cta-final__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.sacem-ap-cta-final__cta-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Animation discrète au hover : la flèche se décale de 2px vers la
   droite pour renforcer l'invitation à l'action. */
.sacem-ap-cta-final__cta:hover .sacem-ap-cta-final__cta-arrow,
.sacem-ap-cta-final__cta:focus-visible .sacem-ap-cta-final__cta-arrow {
    transform: translateX(2px);
}

/* ====== Habillage dégradés — Système 1 : fond progressif par section ======
   --p-top / --p-bot = position de la section (0 haut de page → 1 bas). Pour
   ajouter une section : insérer sa ligne avec les bonnes fractions. ====== */
.sacem-ap-overview { --p-top: 0; --p-bot: 0.1667; 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-ap-programme--autoproduction { --p-top: 0.1667; --p-bot: 0.333; 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-ap-programme--scenique { --p-top: 0.333; --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-ap-programme--festivals { --p-top: 0.5; --p-bot: 0.667; 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-ap-modalites { --p-top: 0.667; --p-bot: 0.833; 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%); }
/* sprint 2b-3 — le bilan ne suit plus le flux beige : il passe en SOMBRE
   (cf. bloc « Bilan 2025 — section sombre » plus bas). Ligne de flux retirée. */

/* ============================================================
   Bilan 2025 — SECTION SOMBRE (sprint 2b-3)
   ------------------------------------------------------------
   Réplique la mécanique tapa+voile de la timeline SACEM PF (::after motif
   tapa, ::before voile coloré, contenu z-index) mais avec des variables
   PROPRES au bilan (--sacem-bilan-*), plus FONCÉES que la timeline (0.82) :
   le bilan doit être plus sombre. Vars locales à `.sacem-ap-chiffres--dark`
   → la timeline SACEM PF n'est PAS affectée.
   ============================================================ */
.sacem-ap-chiffres--dark {
    --sacem-bilan-tapa-opacity:  0.18;
    --sacem-bilan-voile-color:   #1E0826; /* aubergine-noir, + foncé que la timeline #2A0B3D */
    --sacem-bilan-voile-opacity: 0.90;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--sacem-bilan-voile-color); /* base sombre sous le tapa */
    color: #fff;
    text-align: center;
}
/* Motif tapa (couche du bas). */
.sacem-ap-chiffres--dark::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("../img/tapa.webp");
    background-size: 540px auto;
    background-repeat: repeat;
    opacity: var(--sacem-bilan-tapa-opacity);
    pointer-events: none;
}
/* Voile aubergine foncé (par-dessus le tapa, sous le contenu). */
.sacem-ap-chiffres--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--sacem-bilan-voile-color);
    opacity: var(--sacem-bilan-voile-opacity);
    pointer-events: none;
}

/* En-tête sur sombre */
.sacem-ap-chiffres__header {
    max-width: 760px;
    margin: 0 auto 1.5rem;
}
.sacem-ap-chiffres__eyebrow {
    margin-bottom: 1rem;
    justify-content: center; /* trait + texte centrés (inline-flex .sacem-eyebrow) */
    /* magenta clair, lisible sur fond sombre */
    color: color-mix(in srgb, var(--sacem-magenta) 70%, #fff);
}
.sacem-ap-chiffres__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: #fff;
    margin: 0 0 1rem;
}
/* Le « 2025 » garde le gradient .sacem-accent (visible sur sombre). */

.sacem-ap-chiffres__subtitle {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-lede);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
}
.sacem-ap-chiffres__subtitle-num {
    font-weight: 700;
    color: #fff;
    font-size: 1.15em;
}

/* ---- TICKETS ---------------------------------------------------------
   Carré gradient (chiffre Fraunces blanc) | perforation pointillés |
   partie droite claire (eyebrow magenta + libellé). Encoches évidées au
   niveau de la perforation via `mask` : elles laissent voir le fond sombre
   derrière (transparence réelle, pas une pastille de couleur). */
.sacem-ap-chiffres__tickets {
    list-style: none;
    margin: 2.5rem auto 0;
    padding: 0;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.sacem-ap-chiffres__ticket {
    --ticket-seam: 84px;   /* largeur du carré-chiffre = position perfo/encoches couture */
    --ticket-notch: 13px;  /* rayon des encoches de couture (haut + bas) */
    --ticket-corner: 12px; /* rayon des encoches d'angle (4 coins) */
    position: relative;
    display: grid;
    grid-template-columns: var(--ticket-seam) 1fr;
    align-items: stretch;
    min-height: 96px;
    text-align: left;
    background-color: #fff;
    color: var(--sacem-text-primary, #1f1f1f);
    /* Encoches évidées (transparence réelle → le fond sombre transparaît) :
       2 cercles de COUTURE (haut + bas, à la perfo) + 4 cercles d'ANGLE
       (les 4 coins extérieurs) → rendu « vrai billet prédécoupé ». Tous les
       cercles sont composés en INTERSECTION pour percer chacun des 6 trous. */
    -webkit-mask:
        radial-gradient(circle var(--ticket-notch) at var(--ticket-seam) 0,    rgba(0,0,0,0) 98%, #000 100%),
        radial-gradient(circle var(--ticket-notch) at var(--ticket-seam) 100%, rgba(0,0,0,0) 98%, #000 100%),
        radial-gradient(circle var(--ticket-corner) at 0 0,       rgba(0,0,0,0) 98%, #000 100%),
        radial-gradient(circle var(--ticket-corner) at 100% 0,    rgba(0,0,0,0) 98%, #000 100%),
        radial-gradient(circle var(--ticket-corner) at 0 100%,    rgba(0,0,0,0) 98%, #000 100%),
        radial-gradient(circle var(--ticket-corner) at 100% 100%, rgba(0,0,0,0) 98%, #000 100%);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle var(--ticket-notch) at var(--ticket-seam) 0,    rgba(0,0,0,0) 98%, #000 100%),
        radial-gradient(circle var(--ticket-notch) at var(--ticket-seam) 100%, rgba(0,0,0,0) 98%, #000 100%),
        radial-gradient(circle var(--ticket-corner) at 0 0,       rgba(0,0,0,0) 98%, #000 100%),
        radial-gradient(circle var(--ticket-corner) at 100% 0,    rgba(0,0,0,0) 98%, #000 100%),
        radial-gradient(circle var(--ticket-corner) at 0 100%,    rgba(0,0,0,0) 98%, #000 100%),
        radial-gradient(circle var(--ticket-corner) at 100% 100%, rgba(0,0,0,0) 98%, #000 100%);
    mask-composite: intersect;
}

.sacem-ap-chiffres__ticket-num {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sacem-gradient-primary);
    color: #fff;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-variation-settings: 'SOFT' 100, 'opsz' 144;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
}

.sacem-ap-chiffres__ticket-body {
    grid-column: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    padding: 1rem 1.25rem;
}
/* Perforation pointillés verticale à la couture (bord gauche du body). */
.sacem-ap-chiffres__ticket-body::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    border-left: 2px dashed rgba(26, 14, 18, 0.22);
}

.sacem-ap-chiffres__ticket-eyebrow {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sacem-magenta);
}
.sacem-ap-chiffres__ticket-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-sm);
    line-height: 1.25;
    color: var(--sacem-text-primary, #1f1f1f);
}

/* Phrase de bas sur sombre */
.sacem-ap-chiffres--dark .sacem-ap-chiffres__note {
    color: rgba(255, 255, 255, 0.85);
}
.sacem-ap-chiffres--dark .sacem-ap-chiffres__note-highlight {
    color: #fff;
    font-weight: 700;
}

/* Repli mobile des tickets — placé APRÈS la base `repeat(3,1fr)` ci-dessus
   (sinon, à spécificité égale, la base la plus tardive en source gagnerait).
   En ≤768px : 1 colonne → chaque ticket occupe TOUTE la largeur du
   conteneur en gardant sa forme horizontale (carré-chiffre fixe via la
   grille interne `--ticket-seam` 1fr, texte à droite). Pas de bascule
   verticale ; les 6 encoches restent calées (couture à --ticket-seam,
   coins aux 4 angles). */
@media (max-width: 768px) {
    .sacem-ap-chiffres__tickets {
        grid-template-columns: 1fr;
    }
}