/* ============================================================
   page-sacem-polynesie.css — CSS spécifique de la page
   institutionnelle « SACEM Polynésie » (sprint C5).

   Patterns charte-1 réutilisés :
   - .sacem-hero--photo                 → section 1 Hero
   - .sacem-section--hibiscus-tl        → section 2 Présentation
   - .sacem-section--hibiscus-br        → section 5 Action culturelle
   - Tokens --sacem-white, --sacem-gray, --nav-height-mobile,
     --nav-height-desktop

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

   Rythme de fonds : photo / blanc / cream / blanc / blanc / cream /
   gradient. Le doublé blanc Gouvernance ↔ Action culturelle est
   compensé visuellement par la richesse de la première (cards +
   schéma SVG) et par le filigrane hibiscus-br de la seconde.
   ============================================================ */

/* ============================================================
   Section 1 — HERO  (C5.12a — pattern local copié de Créateurs)
   ----
   Pattern strictement aligné sur .sacem-createurs-hero (C1bis.3) :
   `position: relative; min-height: 100vh;` + overlay `::before`
   double gradient + texte centré.

   ⚠ ABANDON volontaire de `.sacem-hero--photo` (charte-1) qui
   produisait un bord blanc 1-2px en haut du Hero (même symptôme
   que sur Nos missions, dette charte-1). Pattern Créateurs copié
   à l'identique parce qu'il fonctionne sans ce bug. Tant que le
   bug n'est pas isolé (charte-2), on consomme le pattern local
   éprouvé plutôt que la classe utilitaire défectueuse.
   ============================================================ */

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

/* Overlay double gradient charte (couleurs identiques à Créateurs
   pour cohérence cross-pages). */
.sacem-sp-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-sp-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

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

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

.sacem-sp-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 — PRÉSENTATION "En bref"
   Fond blanc + filigrane hibiscus haut-gauche (charte-1).
   Contenu centré, max-width 800.
   ============================================================ */

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

.sacem-sp-presentation__inner {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    position: relative;
    z-index: 1; /* au-dessus du filigrane hibiscus */
}

.sacem-sp-presentation__eyebrow {
    margin-bottom: 1rem;
}

.sacem-sp-presentation__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.75rem;
}

.sacem-sp-presentation__content {
    text-align: left;
}

.sacem-sp-presentation__paragraph {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-body);
    line-height: 1.7;
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 0 0 1.25rem;
}

.sacem-sp-presentation__paragraph:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Section 3 — TIMELINE "Notre parcours"  (C5.13b — design Nicolas)
   ----
   Portage du design fourni par Nicolas
   (cf. docs/refs/sacem-timeline-histoire.html). Wrapper section
   cumule `.sacem-sp-timeline` (handle SP) + `.sacem-histoire`
   (composant réutilisable, à factoriser en charte-2 si une autre
   page intègre une timeline).

   Particularité visuelle : ligne centrale en dégradé charte
   violet→magenta→corail→orange + dots qui prennent leur couleur de
   la palette via la variable `--c` posée sur chaque row par le
   shortcode (palette TIMELINE_PALETTE, 8 couleurs canon).
   ============================================================ */

.sacem-sp-timeline.sacem-histoire {
    /* Redesign — le fond crème est désormais PLEINE LARGEUR, porté par
       `.sacem-section--soft` (posée sur la <section> dans le shortcode).
       On retire donc le background, le max-width:980px et le
       border-radius locaux. Le contenu reste centré : l'en-tête est
       déjà centré (titre `text-align:center`, eyebrow en flex) et la
       timeline est contrainte par `.sacem-tl` (max-width:880px;
       margin:0 auto). Padding-block générique pour la hauteur de bande. */
    padding-block: clamp(3rem, 7vw, 5rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    color: var(--sacem-text-primary, #2B2B2B);

    /* sections-photo (étape sections-photo) : motif tapa + voile MAUVE.
       Même mécanique que la page Actualités (::after motif tapa, ::before
       voile coloré, contenu en z-index 2) mais le voile est mauve/aubergine
       au lieu de crème. Les 2 réglages d'intensité sont centralisés ici. */
    --sacem-tl-tapa-opacity:  0.42; /* ← intensité du motif tapa (reste légèrement visible) */
    --sacem-tl-voile-color:   #2A0B3D; /* aubergine TRÈS foncé, froid (violet-noir) — pas le violet rosé charte */
    --sacem-tl-voile-opacity: 0.82; /* ← fond profond ; Nicolas juge en comparant à la maquette */

    position: relative;
    overflow: hidden;
    /* 2 classes → bat la règle de flux (1 classe, ~ligne 934) : le fond
       beige de flux est remplacé par crème (base sous le tapa). */
    background: var(--sacem-cream);
}

/* Motif tapa (couche du bas). */
.sacem-sp-timeline.sacem-histoire::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../img/tapa.webp");
    background-size: cover;
    background-position: center;
    opacity: var(--sacem-tl-tapa-opacity);
    pointer-events: none;
}

/* Voile mauve (par-dessus le tapa, sous le contenu). */
.sacem-sp-timeline.sacem-histoire::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--sacem-tl-voile-color);
    opacity: var(--sacem-tl-voile-opacity);
    pointer-events: none;
}

/* Contenu au-dessus des 2 couches décoratives. */
.sacem-sp-timeline.sacem-histoire > .sacem-histoire__eyebrow,
.sacem-sp-timeline.sacem-histoire > .sacem-histoire__title,
.sacem-sp-timeline.sacem-histoire > .sacem-tl {
    position: relative;
    z-index: 2;
}

/* En-tête en clair (le voile mauve est désormais profond → texte sombre
   illisible). L'eyebrow et son trait passent en blanc atténué, le titre
   en blanc. Les cartes (.sacem-tl__card, opaques) gardent leur texte sombre. */
.sacem-sp-timeline.sacem-histoire > .sacem-histoire__eyebrow {
    color: rgba(255, 255, 255, 0.88);
}
.sacem-sp-timeline.sacem-histoire > .sacem-histoire__eyebrow::before {
    background: rgba(255, 255, 255, 0.7);
}
.sacem-sp-timeline.sacem-histoire > .sacem-histoire__title {
    color: #fff;
}

/* === En-tête : eyebrow + titre ============================== */
.sacem-histoire__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: var(--sacem-fs-micro);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #7C2D8C;
    font-weight: 500;
    margin-bottom: 16px;
}

.sacem-histoire__eyebrow::before {
    content: "";
    width: 28px;
    height: 1.5px;
    background: #7C2D8C;
}

.sacem-histoire__title {
    font-family: var(--font-body);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 600;
    letter-spacing: -0.015em;
    text-align: center;
    color: #1A1A1A;
    margin: 0 0 56px;
}

/* === Timeline ============================================== */
.sacem-tl {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: 8px 0;
}

/* Ligne centrale en dégradé charte (violet → magenta → corail → orange). */
.sacem-tl__line {
    position: absolute;
    left: 50%;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        #6B1B7A  0%,
        #B22D7C 35%,
        #DB4B40 65%,
        #F39200 100%
    );
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Une row = 2 colonnes (carte gauche OU droite), le dot est en
   absolute, pile au centre vertical → toujours en face de la carte
   quelle que soit sa hauteur. */
.sacem-tl__row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    margin-bottom: 22px;
}

.sacem-tl__row:last-child {
    margin-bottom: 0;
}

/* Dot — `--c` posé en inline-style par le shortcode (couleur de la
   palette TIMELINE_PALETTE selon la position visible). Halo 4px du
   fond cream → effet "détaché" sur la ligne. */
.sacem-tl__dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--c, #6B1B7A);
    box-shadow: 0 0 0 4px var(--sacem-cream, #FAF6F2);
    z-index: 1;
}

/* Carte texte */
.sacem-tl__card {
    background: var(--sacem-card-bg);
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--sacem-card-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Survol surélevé (cohérent avec les autres cartes du site) : translateY
   + ombre renforcée. Repos inchangé. */
.sacem-tl__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(107, 27, 122, 0.16);
}

/* Alternance : --L à gauche, --R à droite. */
.sacem-tl__row--L .sacem-tl__card {
    grid-column: 1;
    text-align: right;
}

.sacem-tl__row--R .sacem-tl__card {
    grid-column: 2;
    text-align: left;
}

/* Date en accent Fraunces italic, colorée selon la position (`--c`). */
.sacem-tl__date {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: calc(var(--sacem-fs-base) * 1.25);
    line-height: 1.2;
    color: var(--c, #6B1B7A);
    margin: 0 0 6px;
}

.sacem-tl__text {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-sm);
    line-height: 1.55;
    color: var(--sacem-text-secondary, #4A4A4A);
    margin: 0;
}

/* ============================================================
   Section 4 — GOUVERNANCE
   Fond blanc, grille 4 cards d'instances + bloc schéma SVG.
   Couleurs SVG portées en CSS (classes BEM, pas de hex inline).
   ============================================================ */

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

.sacem-sp-gouvernance__inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-sp-gouvernance__eyebrow {
    display: block;
    text-align: center;
    margin-bottom: 1rem;
}

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

.sacem-sp-gouvernance__intro {
    font-family: var(--font-body);
    font-weight: 400;
    /* sprint typo-v2 (ajustement) : chapô de section → lede. */
    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-sp-gouvernance__instances {
    display: grid;
    /* C5.12d — Layout 2×2 forcé desktop (au lieu de auto-fit qui
       donnait 4 colonnes sur grand écran). 1 colonne mobile via
       media query 768px ci-dessous. */
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
}

/* Le contenant + l'effet de survol (surélèvement + ombre + liséré
   dégradé animé via ::before) sont portés par la classe partagée
   `.sacem-card`, ajoutée sur chaque <article> dans le shortcode.
   L'ancien liséré orange `::before` a été SUPPRIMÉ : il entrait en
   collision avec le ::before de `.sacem-card` (un seul ::before par
   élément). L'ancien survol local (ombre + contour violet) est lui
   aussi remplacé par `.sacem-card:hover`.

   UNIQUE surcharge conservée : le fond crème au repos (les cartes
   Gouvernance se distinguent des cartes blanches d'Action culturelle).
   Sélecteur composé `.sacem-sp-gouvernance__card.sacem-card`
   (spécificité 0,2,0 > `.sacem-card` 0,1,0) → le crème gagne de façon
   déterministe, indépendamment de l'ordre de chargement, sans
   `!important`. `.sacem-card:hover` ne touche pas au background : le
   crème persiste donc au survol. Les modificateurs --source/--cible
   restent posés sur le HTML (aucune règle CSS, évolution future). */
.sacem-sp-gouvernance__card.sacem-card {
    /* sections-photo : aligné sur le socle — dégradé carte mauve
       (--sacem-card-bg) comme toutes les autres cartes du site, au lieu
       du crème plat précédent. Ombre + liseré hover hérités de .sacem-card. */
    background: var(--sacem-card-bg);
}

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

/* Bloc schéma SVG + fallback texte.
   sections-photo : se détache du fond comme une carte du socle — intérieur
   en dégradé carte mauve (--sacem-card-bg, plus blanc pur) + ombre de repos
   (--sacem-card-shadow) + fin liseré, cohérent avec les autres cartons. */
.sacem-sp-gouvernance__schema {
    background: var(--sacem-card-bg);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--sacem-card-shadow);
    border-radius: 16px;
    padding: 2rem clamp(1.25rem, 3vw, 2.5rem);
}

.sacem-sp-gouvernance__schema-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 1.5rem;
    text-align: center;
}

.sacem-sp-gouvernance__svg-wrap {
    display: block;
    width: 100%;
}

.sacem-sp-gov-svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 1000px;
    margin-inline: auto;
}

/* Couleurs SVG — portées par classes (pas de hex inline). */
.sacem-sp-gov-svg__source .sacem-sp-gov-svg__box {
    fill: var(--sacem-violet, #6B1F7C);
    stroke: none;
}

.sacem-sp-gov-svg__cible .sacem-sp-gov-svg__box {
    fill: var(--sacem-orange, #F97316);
    stroke: none;
}

.sacem-sp-gov-svg__label {
    fill: #fff;
    font-family: var(--font-body);
    font-size: calc(var(--sacem-fs-base) * 1.125);
    font-weight: 600;
    text-anchor: middle;
}

.sacem-sp-gov-svg__arrow {
    stroke: var(--sacem-text-primary, #1f1f1f);
    stroke-width: 2;
    fill: none;
}

.sacem-sp-gov-svg__arrow--dashed {
    stroke-dasharray: 6 5;
}

.sacem-sp-gov-svg__arrowhead {
    fill: var(--sacem-text-primary, #1f1f1f);
}

.sacem-sp-gov-svg__arrow-label-bg {
    fill: var(--sacem-cream, #FAF6F2);
    stroke: var(--sacem-text-primary, #1f1f1f);
    stroke-width: 1;
}

.sacem-sp-gov-svg__arrow-label {
    fill: var(--sacem-text-primary, #1f1f1f);
    font-family: var(--font-body);
    font-size: calc(var(--sacem-fs-base) * 0.875);
    font-weight: 500;
    text-anchor: middle;
}

/* Fallback texte : masqué desktop, visible mobile. */
.sacem-sp-gouvernance__fallback {
    display: none;
}

.sacem-sp-gouvernance__fallback-intro {
    font-family: var(--font-body);
    font-size: var(--sacem-fs-sm);
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 0 0 1rem;
}

.sacem-sp-gouvernance__fallback-list {
    margin: 0;
    padding-left: 1.25rem;
    font-family: var(--font-body);
    font-size: var(--sacem-fs-sm);
    line-height: 1.7;
    color: var(--sacem-text-secondary, #4a4a4a);
}

.sacem-sp-gouvernance__fallback-list li {
    margin-bottom: 0.5rem;
}

/* ============================================================
   Section 5 — ACTION CULTURELLE
   Fond blanc + filigrane hibiscus bas-droite (charte-1).
   Grille de 3 piliers + CTA centré.
   ============================================================ */

.sacem-sp-ac {
    /* Fond crème pleine largeur via `.sacem-section--soft` (posée sur
       la <section> dans le shortcode). Pas de background-color local :
       il entrerait en conflit de spécificité avec la classe utilitaire. */
    padding-block: clamp(3.5rem, 8vw, 6rem);
    /* sections-photo : ancrage du ::before photo. Le fond beige de flux
       (défini plus bas, ligne ~936) reste la base sous la partie basse. */
    position: relative;
}

/* --- sections-photo (étape sections-photo) : habillage photo ---------
   Bande photo « concert-indoor » en HAUT de la section (derrière
   l'en-tête), qui s'efface en dégradé vers le bas via un mask → les 3
   cartes (.sacem-card, opaques) « mordent » sur le bas de la photo,
   tandis que le fond beige de flux prend le relais en dessous. */
.sacem-sp-ac.sacem-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Bande photo ciblée ~440px (cappée pour ne pas s'étirer sur les
       grandes sections et ne jamais paraître empiéter sur Gouvernance). */
    height: clamp(420px, 52%, 480px);
    background:
        linear-gradient(180deg, rgba(26, 14, 18, 0.62) 0%, rgba(26, 14, 18, 0.42) 55%, rgba(26, 14, 18, 0) 100%),
        /* zoom ~+35% (taille 135%) + cadrage remonté (position-y 25%) pour
           coller à la maquette. La largeur >100% garantit le recouvrement
           horizontal d'une photo paysage. */
        url("../img/sections/concert-indoor.webp") center 25% / 135% no-repeat;
    /* Pas de mask : la maquette veut un BORD NET en bas de la photo (pleine
       jusqu'à sa limite). Ce sont les cartes qui mordent ce bord. */
    z-index: 0;
    pointer-events: none;
}

/* En-tête en blanc, lisible sur la photo assombrie. */
.sacem-sp-ac .sacem-sp-ac__eyebrow,
.sacem-sp-ac .sacem-sp-ac__title {
    color: #fff;
}
.sacem-sp-ac .sacem-sp-ac__intro {
    color: rgba(255, 255, 255, 0.92);
}
.sacem-sp-ac .sacem-sp-ac__title {
    text-shadow: 0 2px 18px rgba(26, 14, 18, 0.35);
}

.sacem-sp-ac__inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    position: relative;
    z-index: 1; /* au-dessus du filigrane hibiscus */
}

.sacem-sp-ac__eyebrow {
    margin-bottom: 1rem;
}

.sacem-sp-ac__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-sp-ac__intro {
    font-family: var(--font-body);
    font-weight: 400;
    /* sprint typo-v2 (ajustement) : chapô de section → lede. */
    font-size: var(--sacem-fs-lede);
    line-height: 1.65;
    color: var(--sacem-text-secondary, #4a4a4a);
    max-width: 760px;
    margin: 0 auto 3rem;
}

.sacem-sp-ac__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    text-align: left;
}

/* Le contenant des piliers (fond blanc, border-radius, padding, et
   surtout l'effet de survol : surélèvement + ombre + liséré dégradé
   animé) est désormais porté par la classe partagée `.sacem-card`,
   ajoutée sur chaque <article> dans le shortcode (effet identique à
   Créateurs). AUCUNE règle locale ici : surcharger background /
   border-radius / padding / transition / box-shadow / ::before
   casserait l'effet `.sacem-card`. Seuls les enfants (__pillar-title,
   __pillar-text) sont stylés ci-dessous. */

.sacem-sp-ac__pillar-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-sp-ac__pillar-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-sm);
    line-height: 1.65;
    color: var(--sacem-text-secondary, #4a4a4a);
    margin: 0;
}

.sacem-sp-ac__cta-wrap {
    margin-top: 1.5rem;
}

/* ============================================================
   Section 6 — DOCUMENTS
   Fond cream (.sacem-section--soft appliquée dans render PHP).
   2 cards téléchargement PDF horizontales.
   ============================================================ */

.sacem-sp-documents {
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

.sacem-sp-documents__inner {
    max-width: 960px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}

.sacem-sp-documents__eyebrow {
    margin-bottom: 1rem;
}

.sacem-sp-documents__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.25rem;
}

.sacem-sp-documents__intro {
    font-family: var(--font-body);
    font-weight: 400;
    /* sprint typo-v2 (ajustement) : chapô de section → lede. */
    font-size: var(--sacem-fs-lede);
    line-height: 1.65;
    color: var(--sacem-text-secondary, #4a4a4a);
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

.sacem-sp-documents__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    text-align: left;
}

.sacem-sp-documents__card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--sacem-card-bg);
    box-shadow: var(--sacem-card-shadow);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sacem-sp-documents__card:hover {
    border-color: var(--sacem-violet, #6B1F7C);
    box-shadow: 0 8px 24px rgba(107, 27, 122, 0.10);
}

.sacem-sp-documents__card:focus-visible {
    outline: 2px solid var(--sacem-violet, #6B1F7C);
    outline-offset: 2px;
}

.sacem-sp-documents__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    color: var(--sacem-violet, #6B1F7C);
}

.sacem-sp-documents__icon svg {
    width: 100%;
    height: 100%;
}

.sacem-sp-documents__card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.sacem-sp-documents__card-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-sm);
    line-height: 1.35;
    color: var(--sacem-text-primary, #1f1f1f);
}

.sacem-sp-documents__card-meta {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-meta);
    color: var(--sacem-text-secondary, #4a4a4a);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sacem-sp-documents__card-arrow {
    flex-shrink: 0;
    font-size: calc(var(--sacem-fs-base) * 1.25);
    color: var(--sacem-violet, #6B1F7C);
}

/* ============================================================
   Section 7 — CTA FINAL
   Fond gradient. Pattern copié de .sacem-createurs-cta-final (C1.9)
   et .sacem-missions-cta-final (C4.5). Volontairement PAS
   .sacem-section--gradient (dette technique Nos missions).
   ============================================================ */

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

.sacem-sp-cta-final__inner {
    /* C5.12f — Élargi 800 → 1000px (calibrage strict sur
       .sacem-missions-cta-final__inner) pour que le titre
       « Notre équipe est là pour vous accompagner » tienne sur
       1 ligne en desktop ≥ 1024px. Sur mobile, wrap naturel. */
    max-width: 1000px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-sp-cta-final__eyebrow {
    margin-bottom: 1.25rem;
}

.sacem-sp-cta-final__title {
    font-family: var(--font-body);
    font-weight: 700;
    /* C5.12f — font-size max réduit 2.5rem → 2.25rem pour favoriser
       le titre 1 ligne desktop, calibrage identique à Missions. */
    font-size: clamp(1.875rem, 4vw, 2.25rem);
    line-height: 1.2;
    color: #fff;
    margin: 0 0 1.5rem;
}

/*
 * .sacem-sp-cta-final__title-accent
 * Pattern aligné sur .sacem-createurs-cta-final__title-accent (C1.9)
 * et .sacem-missions-cta-final__title-accent (C4.5).
 * Sur fond gradient, .sacem-accent (text-clip) est invisible — d'où
 * l'accent en local : Fraunces italic SOFT 100 en blanc.
 */
.sacem-sp-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-sp-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;
}

/* ============================================================
   Responsive — Breakpoint tablette (≤ 1024px)
   ============================================================ */

@media (max-width: 1024px) {
    .sacem-sp-gouvernance__instances {
        grid-template-columns: repeat(2, 1fr);
    }

    .sacem-sp-ac__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Responsive — Breakpoint mobile (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {
    /* Gouvernance : 1 card par ligne. */
    .sacem-sp-gouvernance__instances {
        grid-template-columns: 1fr;
    }

    /* SVG masqué, fallback texte affiché. */
    .sacem-sp-gouvernance__svg-wrap {
        display: none;
    }

    .sacem-sp-gouvernance__fallback {
        display: block;
    }

    /* Documents : 1 card par ligne. */
    .sacem-sp-documents__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Responsive — Timeline (≤ 640px, breakpoint propre au design
   source — décalé sous le 768px global). Mobile : tout passe à
   gauche, ligne et dots alignés à 14px du bord gauche, cards en
   pleine largeur sans alternance.
   ============================================================ */

@media (max-width: 640px) {
    .sacem-sp-timeline.sacem-histoire {
        padding: 40px 16px 48px;
    }

    .sacem-tl__line {
        left: 14px;
        transform: none;
    }

    .sacem-tl__row {
        grid-template-columns: 1fr;
        padding-left: 40px;
        column-gap: 0;
    }

    .sacem-tl__dot {
        left: 14px;
    }

    .sacem-tl__row--L .sacem-tl__card,
    .sacem-tl__row--R .sacem-tl__card {
        grid-column: 1;
        text-align: left;
    }
}

/* ============================================================
   Reveal au scroll DÉDIÉ — `.sacem-reveal-late`
   ----
   Variante locale du `.reveal` global (home.css) pour le schéma de
   gouvernance UNIQUEMENT. Classe maison NON observée par home.js
   (qui ne cible que `.reveal`) → c'est notre script dédié
   (assets/js/page-sacem-polynesie.js) qui pilote seul le déclenchement
   (rootMargin bas -30% → l'élément apparaît quand il est entré à ~70 %
   dans l'écran ; au lieu du seuil 12 % + rootMargin -40px du global,
   qui déclenchait trop tôt).

   Posée sur le CONTENEUR `.sacem-sp-gouvernance__schema` (le carton
   crème entier : fond + titre + schéma + fallback) → tout le bloc
   apparaît ENSEMBLE en un seul fondu, plus de carton crème figé/vide
   pendant que seul le contenu s'anime.

   Comportement visuel identique au `.reveal` global (fondu + slide-up
   24px, transition .9s) pour rester cohérent avec le reste du site.
   ============================================================ */
.sacem-reveal-late {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform .9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sacem-reveal-late.in {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   Accessibilité — prefers-reduced-motion
   ----
   1) Cartes Gouvernance + Action culturelle : désactive le
      surélèvement + le glissement du liséré `.sacem-card` UNIQUEMENT
      (on ne touche pas à Créateurs ni au reste de la charte). Le
      liséré reste visible au survol (scaleX(1)) mais sans animation.
   2) Reveal au scroll du carton de gouvernance (`.sacem-reveal-late`
      sur `.sacem-sp-gouvernance__schema`) : force la visibilité du
      carton entier. La classe démarre à opacity:0 ; sans forcer ici, un
      utilisateur "reduced motion" dont l'IntersectionObserver ne
      déclencherait pas verrait le bloc rester INVISIBLE. `!important`
      exceptionnel et assumé pour battre `.sacem-reveal-late` de façon
      déterministe, scope strict sur ce sélecteur unique.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .sacem-sp-gouvernance__card,
    .sacem-sp-gouvernance__card::before,
    .sacem-sp-ac__pillar,
    .sacem-sp-ac__pillar::before {
        transition: none;
    }

    .sacem-sp-gouvernance__card:hover,
    .sacem-sp-ac__pillar:hover {
        transform: none;
    }

    .sacem-sp-gouvernance__card:hover::before,
    .sacem-sp-ac__pillar:hover::before {
        transform: scaleX(1); /* liséré visible, sans glissement */
    }

    /* Reveal au scroll (carton de gouvernance) — visibilité forcée. */
    .sacem-sp-gouvernance__schema.sacem-reveal-late {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ====== 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-sp-presentation { --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-sp-timeline { --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-sp-gouvernance { --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-sp-ac { --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%); }
/* Finitions étape 3 : Documents commençait à 0.8 = EXACTEMENT la teinte de
   fin d'Action culturelle (0.8) → jonction invisible, les 2 sections
   fusionnaient. Départ au BLANC (--p-top:0) → dégradé blanc→beige visible ET
   démarcation nette d'avec Action culturelle. Bas inchangé (--p-bot:1). */
.sacem-sp-documents { --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%); }