/* ============================================================
   Page « Nos missions » — Sprint C4.8
   ----
   CSS conditionnel chargé sur la page slug `nos-missions` via
   wp_enqueue_style dans functions.php du child theme.

   Architecture : 6 sections successives à fond alterné
   (blanc → blanc → cream → blanc → cream → gradient), 2 hibiscus
   décoratifs (Intro haut-gauche + Mission 2 bas-droite), 1 seule
   section avec gradient (CTA final, point d'orgue).

   Variables CSS (style.css du child theme) : --sacem-violet,
   --sacem-ink, --sacem-text, --sacem-cream, --font-body,
   --font-display, --sacem-gradient-primary.

   Modificateurs charte réutilisés (charte-components.css) :
   .sacem-section--soft (fond cream), .sacem-eyebrow,
   .sacem-btn--primary / --ghost / --primary-on-dark.

   Patterns inspirés de page-createurs.css :
   - hibiscus en ::before opacity 0.08 (cf. .sacem-createurs-qui-peut-adherer)
   - title-accent CTA final Fraunces italic SOFT 100 (cf. .sacem-createurs-cta-final__title-accent)
   - icône SVG 48px violet en haut de carte (cf. .sacem-createurs-card__icon)
   ============================================================ */

/* ----------------------------------------------------------
   Section base — modificateur --gradient non couvert par la charte
   (Mission 2 utilise déjà --soft natif). Locale tant qu'aucune
   autre page n'en a besoin — à extraire en charte le jour où.
   ---------------------------------------------------------- */
.sacem-section--gradient {
    background: var(--sacem-gradient-primary);
    color: var(--sacem-white);
}

/* charte-1ter — Retrait des neutralisateurs Divi !important qui
   étaient en place depuis C4.9ter P17, C4.9quater P22 et charte-1bis.
   Constat (recette Nicolas, recapture charte-1bis) : ces règles
   `body.page-id-101 ... { margin/padding: 0 !important }` étaient
   probablement la CAUSE des 2 bords blancs persistants (et non leur
   solution comme initialement supposé). Créateurs n'a aucun neutraliseur
   et n'a aucun bord blanc rapporté — preuve que Divi gère bien les
   transitions par défaut quand on ne le contredit pas.

   Stratégie d'alignement : copier le pattern Créateurs (qui marche).
   Le CTA final perd la classe utilitaire `.sacem-section--gradient`
   (cf. retrait côté shortcode) — toutes les propriétés gradient/color
   sont déjà portées en local par `.sacem-missions-cta-final` (C4.5/C4.8).
   À factoriser proprement dans la charte plus tard (sprint charte-2)
   après inspection DOM réelle via tunnel cloudflared si besoin. */

/* ============================================================
   1. HERO — photo plein écran (C4.9b)
   Pattern strictement aligné sur .sacem-createurs-hero (C1bis.3) :
   min-height 100vh, background-image + overlay double gradient,
   texte blanc centré, sous la nav fixed Divi (neutralisée par
   body.sacem-has-hero-photo dans charte-components.css).
   ============================================================ */

.sacem-missions-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-nos-missions.webp");
    background-size: cover;
    background-position: center center;
    color: var(--sacem-white);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

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

/* L'eyebrow Hero porte `.sacem-eyebrow--on-dark` côté shortcode :
   texte + trait ::before en blanc 100% (cf. charte-components.css).
   On ne touche pas au display ici sinon le trait disparaît. */
.sacem-missions-hero__eyebrow {
    margin-bottom: 1.25rem;
    /* Centrage en mode inline-flex : marge auto sur le span. */
    justify-content: center;
}

.sacem-missions-hero__title {
    font-family: var(--font-body);
    font-weight: 700;
    /* C4.9bis P10 — aligné EXACTEMENT sur .sacem-createurs-hero__title
       (cf. page-createurs.css). Une augmentation globale du titre Hero
       cross-pages est anticipée dans un sprint séparé post-merge C4. */
    font-size: clamp(2.25rem, 5vw, 3rem);
    line-height: 1.15;
    color: var(--sacem-white);
    /* C4.9ter P18 — Le clamp était déjà aligné Créateurs/Diffuseurs, mais
       l'impression de « plus petit » venait de l'absence de text-shadow.
       Ajout du même pattern que page-createurs.css et page-diffuseurs.css
       (lisibilité photo + épaississement optique du titre). */
    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-missions-hero__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: 720px;
    margin: 0 auto;
}

/* ============================================================
   2. INTRO INSTITUTIONNELLE — fond blanc, centré, max-width 700px
   + Hibiscus 1 (haut-gauche, opacité 0.08)
   ============================================================ */

.sacem-missions-intro {
    padding-block: clamp(3.5rem, 8vw, 6rem);
    background-color: var(--sacem-white);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sacem-missions-intro::before {
    /* C4.9quater P23 — Débordement vers le haut (top: -80px) annulé :
       Nicolas voyait une coupure visible à la jonction Hero/Intro car
       la section Intro est positionnée juste après le Hero (100vh).
       Solution : top: 0 (l'hibiscus commence en haut de la section
       Intro, pas dans le Hero) — débord conservé seulement à gauche
       (-80px) pour garder le pattern visuel "filigrane qui sort du
       coin". Tailles et opacité strictement alignées Créateurs (P20). */
    content: "";
    position: absolute;
    top: 0;
    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-missions-intro__inner {
    max-width: 700px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    position: relative;
    z-index: 1;
}

.sacem-missions-intro__eyebrow {
    margin-bottom: 1rem;
}

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

.sacem-missions-intro__text {
    font-family: var(--font-body);
    font-weight: 400;
    /* sprint typo-v2 (ajustement) : chapô de la section intro → lede. */
    font-size: var(--sacem-fs-lede);
    line-height: 1.7;
    color: var(--sacem-text);
    margin: 0;
}

/* ============================================================
   3-5. MISSIONS 1/2/3 — alignement gauche, max-width 720px
   icône SVG 48px violet en haut, trait coloré sous H2.
   Fond alterné : Mission 1 cream (--soft via shortcode),
   Mission 2 blanc explicite, Mission 3 cream (--soft).
   ============================================================ */

.sacem-missions-mission {
    padding-block: clamp(3.5rem, 8vw, 6rem);
    position: relative;
    overflow: hidden;
}

.sacem-missions-mission__inner {
    /* C4.9a — passage 720 → 1200px pour s'aligner sur la largeur des
       sections corps de la page Créateurs (cf. .sacem-createurs-*__inner). */
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    position: relative;
    z-index: 1;
}

/* sprint missions-habillage — Chaque mission est désormais une carte
   .sacem-card (charte) : intérieur blanc→mauve, liseré animé, ombre,
   hover. Layout interne en grille pour poser la pastille photo ronde en
   haut-droite sans chevaucher le titre ni le texte. Le header occupe la
   colonne gauche, la pastille la colonne droite, le body s'étend sur
   toute la largeur en dessous. */
.sacem-missions-mission__card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "header pastille"
        "body   body";
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

.sacem-missions-mission__card > .sacem-missions-mission__header {
    grid-area: header;
}

.sacem-missions-mission__card > .sacem-pastille-photo {
    grid-area: pastille;
    align-self: start;
}

.sacem-missions-mission__card > .sacem-missions-mission__body {
    grid-area: body;
}

/* Header (eyebrow + titre) — pleine largeur du __inner, avant le body
   en grille. Le trait à gauche de l'eyebrow est porté par .sacem-eyebrow
   de la charte (::before 28×1px). Plus de trait décoratif sous le H2
   (retiré en C4.9a : doublon visuel avec l'eyebrow). */
.sacem-missions-mission__header {
    margin-bottom: 1.5rem;
}

.sacem-missions-mission__eyebrow {
    margin-bottom: 0.75rem;
}

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

/* C4.9a — Body en grille : icône à gauche (colonne fixe 80px),
   contenu à droite (1fr).
   C4.9ter P15 — Stratégie hybride :
     • Règle base : align-items: center (pour Mission 1 et Mission 3,
       contenu court 3-5 lignes — l'icône se centre visuellement avec
       le milieu du paragraphe).
     • Override --promouvoir (Mission 2, contenu long) : start + un
       padding-top sur l'icône pour qu'elle s'aligne avec la première
       ligne du texte, pas tout en haut du body. */
/* C4.9quater P21 — Icônes des missions retirées du rendu (décision
   Nicolas pour épurer la page). Les règles .sacem-missions-mission__icon
   (+ svg + overrides --promouvoir start/padding-top) ont été supprimées.
   `__body` reste en wrapper bloc simple (pas de display particulier) —
   conservé en HTML/CSS pour stabilité, réactivation future possible
   sans migration. */

/* Le contenu (texte, sous-grille cols Mission 2, CTAs) — colonne droite
   du grid body. `min-width: 0` évite le débordement horizontal d'un
   enfant grid item (comportement par défaut auto qui peut casser le
   wrapping). */
.sacem-missions-mission__content {
    min-width: 0;
}

.sacem-missions-mission__content > *:first-child {
    margin-top: 0;
}

.sacem-missions-mission__content > *:last-child {
    margin-bottom: 0;
}

.sacem-missions-mission__text,
.sacem-missions-mission__intro,
.sacem-missions-mission__transition {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-body);
    line-height: 1.7;
    color: var(--sacem-text);
    margin: 0 0 1.25rem;
}

/* Énumération inline des répertoires (Mission 2) : taille réduite
   + italique léger pour la différencier visuellement du corps
   principal (style « liste à plat dans le texte »).
   C4.9bis P14 — line-height resserré (1.7 → 1.6) + margin-block
   réduit pour densifier le bloc Mission 2 (recette Nicolas). */
.sacem-missions-mission__repertoires {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--sacem-fs-sm);
    line-height: 1.6;
    color: var(--sacem-text);
    font-style: italic;
    margin: 0.5rem 0 1rem;
    opacity: 0.92;
}

/* C4.9bis P14 / C4.9ter P16 / C4.9quater P24 — Resserrement Mission 2.
   Spécificité avait déjà été boostée en C4.9ter (`> p.<class>`) sans
   effet visible côté Nicolas. P24 passe en mode `!important` ciblé sur
   les paragraphes M2 + sous-grille, pour battre les overrides Divi
   opaques qui imposent du margin parasite sur les `<p>` génériques.

   `!important` assumé temporairement — dette technique à nettoyer en
   sprint charte-1 (recenser les sélecteurs Divi à neutraliser à la
   source, puis retirer les `!important`). */
.sacem-missions-mission--promouvoir .sacem-missions-mission__intro {
    margin-bottom: 0.75rem !important;
    line-height: 1.6;
}

.sacem-missions-mission--promouvoir .sacem-missions-mission__repertoires {
    margin: 0.5rem 0 0.75rem !important;
    font-size: var(--sacem-fs-sm) !important;
    line-height: 1.55;
    font-style: italic !important;
    opacity: 0.7 !important;
}

.sacem-missions-mission--promouvoir .sacem-missions-mission__transition {
    margin-bottom: 1rem !important;
    line-height: 1.6;
}

.sacem-missions-mission--promouvoir .sacem-missions-mission__cols {
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.sacem-missions-mission--promouvoir .sacem-missions-mission__col-title {
    margin-bottom: 0.75rem;
}

/* CTAs alignés à gauche (cohérent avec alignement de section) */
.sacem-missions-mission__ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    align-items: center;
}

/* Icône PDF inline dans bouton ghost (Mission 1) */
.sacem-missions-mission__cta-pdf-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

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

/* ---------- Mission 2 (--promouvoir) — spécifique ---------- */

/* sprint missions-habillage — le fond plein largeur de la mission est
   retiré : le socle beige progressif (système de flux ci-dessous) reste
   sur la <section>, et l'intérieur blanc→mauve est porté par la carte
   .sacem-card. Ne subsiste ici que l'ancrage scroll de #aide-aux-projets. */
.sacem-missions-mission--promouvoir {
    /* Compense la nav Divi sticky pour que l'ancre #aide-aux-projets
       atterrisse SOUS la nav, pas dessous. Ajustable si la nav grandit. */
    scroll-margin-top: 100px;
}

/* ---------- Mission 3 (--defendre) — spécifique ----------
   C4.9c P3 : le hibiscus 2 est déplacé ICI (auparavant sur --promouvoir
   en C4.8) — Mission 2 chargeait trop visuellement avec ses 2 colonnes
   + listes ; Mission 3 a un texte plus court, le hibiscus respire mieux. */
.sacem-missions-mission--defendre::before {
    /* C4.9ter P20 — Pattern strictement aligné sur
       .sacem-createurs-faq::before (page-createurs.css), pendant
       visuel du hibiscus haut-gauche Intro : 380×380, débordement
       -80px/-80px clippé par overflow:hidden, opacité 0.10.
       À extraire en helper charte .sacem-section--hibiscus-br en
       sprint charte-1. */
    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;
}

/* Layout 2 colonnes (créateurs / diffuseurs) */
.sacem-missions-mission__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin: 2rem 0;
}

.sacem-missions-mission__col-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--sacem-fs-h3);
    line-height: 1.4;
    color: var(--sacem-ink);
    margin: 0 0 1rem;
}

/* Listes Mission 2 — puces personnalisées (point violet).
   C4.9c P4 : sélecteur boosté en spécificité (`ul.<class>` au lieu de
   `.<class>`) pour neutraliser un éventuel `list-style: disc` réintroduit
   par une feuille Divi ou un reset tiers — observé en recette ≤ 768px
   sous forme de doubles puces `• •` (puce native + custom ::before). */
ul.sacem-missions-mission__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.sacem-missions-mission__list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.625rem;
    list-style: none; /* belt-and-braces — sécurité au cas où */
    font-family: var(--font-body);
    font-size: var(--sacem-fs-body);
    line-height: 1.5;
    color: var(--sacem-text);
}

ul.sacem-missions-mission__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background: var(--sacem-violet);
    border-radius: 50%;
}

/* C4.9c P7 — Flèche externe ↗ wrappée en span pour scaling.
   Légèrement plus grande que le texte pour la rendre lisible
   (sans le scaling, ↗ paraissait écrasée à côté des labels). */
.sacem-btn__arrow-external {
    font-size: 1.15em;
    display: inline-block;
    line-height: 1;
    vertical-align: baseline;
}

/* ============================================================
   6. CTA FINAL — fond gradient, texte blanc, centré
   ============================================================ */

.sacem-missions-cta-final {
    padding-block: clamp(3.5rem, 10vw, 7rem);
    background: var(--sacem-gradient-primary);
    color: var(--sacem-white);
    text-align: center;
    position: relative;
    /* C4.9c P5 — overflow hidden pour clipper tout débord éventuel
       sur très petit écran (cohérent avec les autres sections de la page). */
    overflow: hidden;
}

.sacem-missions-cta-final__inner {
    /* C4.9b — élargi de 800 → 1000px pour que le titre par défaut
       « Notre équipe est là pour vous accompagner » tienne sur 1 ligne
       en desktop. Sur mobile, le titre wrap naturellement (acceptable). */
    max-width: 1000px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.sacem-missions-cta-final__eyebrow {
    margin-bottom: 1.25rem;
    /* Centrage en mode inline-flex (charte .sacem-eyebrow). */
    justify-content: center;
    /* Couleur prise en charge par .sacem-eyebrow--on-dark côté shortcode. */
}

.sacem-missions-cta-final__title {
    font-family: var(--font-body);
    font-weight: 700;
    /* Font-size légèrement réduite vs C4.8 (2.5rem max → 2.25rem max)
       pour favoriser un titre sur 1 ligne en desktop ≥ 1024px. */
    font-size: clamp(1.875rem, 4vw, 2.25rem);
    line-height: 1.2;
    color: var(--sacem-white);
    margin: 0 0 1.5rem;
}

/*
 * .sacem-missions-cta-final__title-accent
 * ----
 * Accent typographique du titre. PAS .sacem-accent (qui applique
 * un gradient text-clip violet→orange — invisible sur le fond
 * déjà gradient). Pattern strictement identique à
 * .sacem-createurs-cta-final__title-accent (C1.9 + fix C2.4ter
 * pour `font-size: 1.05em` + `padding-right: 0.1em`).
 */
.sacem-missions-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: var(--sacem-white);
}

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

/* ============================================================
   Media queries
   ============================================================ */

/* Tablette 1024px : léger resserrement des titres */
@media (max-width: 1024px) {
    .sacem-missions-hero__title {
        font-size: clamp(1.875rem, 5vw, 2.75rem);
    }
    .sacem-missions-cta-final__title,
    .sacem-missions-intro__title,
    .sacem-missions-mission__title {
        font-size: clamp(1.625rem, 4.5vw, 2.25rem);
    }
}

/* Tablette/mobile 768px : Mission 2 cols → 1 colonne pleine largeur,
   body de mission → grid 1fr (icône empilée au-dessus du content),
   hibiscus masqués (cf. pattern Créateurs C1.4 — chevauchement
   contenu sur petits écrans), CTAs des missions empilés verticalement. */
@media (max-width: 768px) {
    /* C4.9ter P19 / C4.9quater P25 — 100px n'a pas suffi côté Nicolas.
       La nav mobile Divi (mode hamburger sticky) déborde encore. Passage
       à 120px en dur avec `!important` pour battre tout override Divi.
       Dette technique charte-1 : créer --nav-height-mobile en charte,
       distinct de --nav-height (88px desktop). */
    .sacem-missions-hero {
        padding-top: 120px !important;
    }

    /* C4.9quater P21 — Plus de grid sur __body (icône retirée), donc
       plus rien à empiler en mobile. Règle supprimée. */

    .sacem-missions-mission__cols {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* sprint missions-habillage — carte en 1 colonne : pastille empilée
       au-dessus du header, puis body. */
    .sacem-missions-mission__card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "pastille"
            "header"
            "body";
        justify-items: start;
    }

    .sacem-missions-mission__card > .sacem-pastille-photo {
        margin-bottom: 1.25rem;
    }

    .sacem-missions-intro::before,
    .sacem-missions-mission--defendre::before {
        display: none;
    }

    .sacem-missions-hero__title {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
    }

    .sacem-missions-intro__title,
    .sacem-missions-mission__title,
    .sacem-missions-cta-final__title {
        font-size: clamp(1.5rem, 5.5vw, 2rem);
    }

    .sacem-missions-mission__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .sacem-missions-mission__ctas .sacem-btn {
        justify-content: center;
    }
}

/* Mobile fin 480px : padding latéral resserré pour gagner de la place
   sur les très petits écrans. */
@media (max-width: 480px) {
    .sacem-missions-hero__inner,
    .sacem-missions-intro__inner,
    .sacem-missions-mission__inner,
    .sacem-missions-cta-final__inner {
        padding-inline: 1rem;
    }
}


/* ====== 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-missions-intro { --p-top: 0; --p-bot: 0.25; background: linear-gradient(180deg, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-top) * 100%)) 0%, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-bot) * 100%)) 100%); }
.sacem-missions-mission--collecter { --p-top: 0.25; --p-bot: 0.5; background: linear-gradient(180deg, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-top) * 100%)) 0%, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-bot) * 100%)) 100%); }
.sacem-missions-mission--promouvoir { --p-top: 0.5; --p-bot: 0.75; background: linear-gradient(180deg, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-top) * 100%)) 0%, color-mix(in srgb, var(--sacem-bg-grad-start), var(--sacem-bg-grad-end) calc(var(--p-bot) * 100%)) 100%); }
.sacem-missions-mission--defendre { --p-top: 0.75; --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%); }