/* APIA — Single Enjeu (S3). Composants reutilisables S4->S8. Enqueued on is_singular('enjeu'). Tokens var(--apia-*). */
.s-enjeu{padding:64px 16px}
.s-enjeu--dark{background:var(--apia-bleu-nuit);padding:96px 16px}
.l-wrap{width:100%;max-width:1248px;margin-inline:auto}
.l-rail{width:100%;max-width:1052px;margin-inline:auto}

/* Section heading */
.c-section-heading{max-width:1052px;margin:0 auto 48px;display:flex;flex-direction:column;gap:16px}
.c-section-heading__title{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:var(--apia-bleu-nuit);margin:0}
.c-section-heading__intro{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0;max-width:900px}
.c-section-heading--on-dark .c-section-heading__title{color:var(--apia-bleu-ciel)}
.c-section-heading--on-dark .c-section-heading__intro{color:var(--apia-bleu-clair)}

/* Hero */
/* C3 (revu le 01/09/2026) — fil d'ariane visible partagé (gabarit enjeu + pages région), rendu DANS
   la carte hero sombre, au-dessus du H1. **Valeurs relevées sur le node Figma 2165:7975 (fichier B)** :
   14/18, poids 400, letter-spacing -0.28px, liens en bleu ciel, séparateurs `>` et page courante en
   blanc. Flux de TEXTE inline (pas de flex) comme dans le node : la coupe se fait à l'intérieur du
   libellé courant, pas entre les maillons. Aucun wrapper ni marge : le fil hérite du rail et du
   `gap:16` de sa colonne hôte (.c-enjeu-hero__inner et .c-regt-hero__head, flex column gap 16).
   Contrastes mesurés : bleu ciel 10,2:1 sur le nuit et 9,2:1 sur le marine ; blanc 18,9:1 et 17,4:1.
   Survol : le lien s'éloigne du fond d'un cran (#ECF2FB, 15,3:1), conformément à la règle du 28/08. */
.c-crumb{margin:0;font-family:var(--apia-font);font-weight:400;font-size:14px;line-height:18px;letter-spacing:-.28px;color:var(--apia-blanc);overflow-wrap:break-word}
.c-crumb a{color:var(--apia-bleu-ciel);text-decoration:none}
.c-crumb a:hover{color:var(--apia-bleu-clair)}
.c-crumb__sep,.c-crumb__cur{color:var(--apia-blanc)}

.c-enjeu-hero{max-width:1248px;margin-inline:auto;background:var(--apia-bleu-nuit);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.c-enjeu-hero__col{display:flex;flex-direction:column;gap:24px;justify-content:center;padding:56px 0 56px 64px}
.c-enjeu-hero__inner{display:flex;flex-direction:column;gap:16px}
.c-enjeu-hero__title{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:var(--apia-blanc);margin:0}
.c-enjeu-hero__media{position:relative;margin:24px;border-radius:12px;overflow:hidden;min-height:520px;background:#0a2438}
.c-enjeu-hero__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Chips */
.c-chips{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.c-chips__item{display:flex;align-items:center;gap:4px;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-bleu-ciel)}
.c-chips__item svg{flex:0 0 16px;width:16px;height:16px}

/* Bouton enjeu */
.c-enjeu-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;background:var(--apia-bleu);color:var(--apia-bleu-clair);font-family:var(--apia-font);font-weight:600;font-size:16px;line-height:22px;padding:8px 16px;border-radius:12px;text-decoration:none}

/* Chapo (lead) */
.c-enjeu-chapo{max-width:1052px;margin-inline:auto;font-family:var(--apia-font);font-weight:400;font-size:28px;line-height:38px;color:var(--apia-gris-bleu)}

/* Prose (problematique) */
.c-prose{max-width:1052px;margin-inline:auto;font-family:var(--apia-font)}
.c-prose__img{display:block;width:100%;aspect-ratio:1052/422;object-fit:cover;border-radius:28px;margin:0 0 40px}
.c-prose .c-prose__title{font-weight:600;font-size:33px;line-height:36px;color:var(--apia-bleu-nuit);margin:0 0 24px;max-width:1052px}
.c-prose p{font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0 0 16px}
.c-prose p:last-child{margin-bottom:0}

/* Signaux */
.c-signaux{max-width:1052px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:32px}
.c-signaux__col{display:flex;flex-direction:column;gap:16px}
.c-signaux__title{font-family:var(--apia-font);font-weight:600;font-size:23px;line-height:28px;color:var(--apia-bleu-nuit);margin:0}
.c-signaux__card{background:var(--apia-bleu-clair);border-radius:16px;padding:32px;flex:1}
.c-signaux__card--dark{background:var(--apia-bleu-nuit)}
.c-signaux__card--dark .c-arrow-list li{color:var(--apia-blanc)}
.c-signaux__card--dark .c-arrow-list li svg{color:var(--apia-bleu-ciel)}
.c-arrow-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.c-arrow-list li{display:flex;gap:8px;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-bleu-nuit)}
.c-arrow-list li svg{flex:0 0 16px;width:16px;height:16px;margin-top:4px;color:var(--apia-bleu)}

/* Risques */
.c-risques{max-width:1052px;margin-inline:auto;display:flex;flex-direction:column}
.c-risques__row{display:grid;grid-template-columns:1fr 90px 1fr;gap:24px;align-items:start;padding:32px 0;border-bottom:1px solid var(--apia-grey-300)}
.c-risques__row:last-child{border-bottom:0}
.c-risques__title{font-family:var(--apia-font);font-weight:600;font-size:23px;line-height:28px;color:var(--apia-bleu-nuit);margin:0 0 8px}
.c-risques__desc{font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0}
.c-risques__arrow{display:flex;align-items:center;justify-content:center;padding-top:4px}
.c-risques__arrow svg{width:38px;height:38px;color:var(--apia-bleu)}
.c-risques__conseq-label{font-family:var(--apia-font);font-weight:600;font-size:16px;line-height:22px;color:var(--apia-bleu-nuit);margin:0 0 4px}
.c-risques__conseq{font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0}
.c-risques__row--noconseq .c-risques__arrow{display:none}

/* Benefices (sur fond sombre) */
.c-benefices{max-width:1052px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:48px 64px}
.c-benefice__title{font-family:var(--apia-font);font-weight:600;font-size:23px;line-height:28px;color:var(--apia-bleu-ciel);margin:0 0 16px}
.c-benefice__text{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-blanc);margin:0}

/* Profil allie (statique) */
.c-profil{max-width:1052px;margin-inline:auto}
.c-profil__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:48px}
.c-profil__grid:last-child{margin-bottom:0}
.c-profil__sub{font-family:var(--apia-font);font-weight:600;font-size:23px;line-height:28px;color:var(--apia-bleu-nuit);margin:0 0 24px}
.c-profil__card{border-radius:16px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:210px}
.c-profil__card--yes{background:var(--apia-bleu-nuit)}
.c-profil__card--yes .c-profil__text{color:var(--apia-blanc)}
.c-profil__card--no{background:var(--apia-bleu-clair)}
.c-profil__card--no .c-profil__text{color:var(--apia-gris-bleu)}
.c-profil__text{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;margin:0}
.c-profil__badge{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 32px}
.c-profil__badge--yes{background:var(--apia-bleu)}
.c-profil__badge--no{background:var(--apia-gris-bleu)}
.c-profil__badge svg{width:18px;height:18px;color:#fff}

/* CTA bloc (replique POC /poc-bloc-cta/) */
.c-cta-blk{max-width:1248px;margin-inline:auto;display:flex;flex-direction:row;align-items:stretch;background:var(--apia-bleu-nuit);border-radius:24px;overflow:hidden}
.c-cta-blk__content{width:58%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;padding:96px 32px 96px 64px}
.c-cta-blk__title{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:var(--apia-blanc);margin:0}
.c-cta-blk__intro{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-bleu-ciel);margin:0}
.c-cta-blk__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.c-cta-blk__list li{display:flex;align-items:flex-start;gap:8px;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-bleu-clair)}
.c-cta-blk__list li svg{flex:0 0 16px;width:16px;height:16px;margin-top:3px;color:var(--apia-bleu-ciel)}
.c-cta-blk__action{margin-top:16px}
.c-cta-blk__media{width:42%;position:relative;overflow:hidden}
.c-cta-blk__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
@media(max-width:991px){.c-cta-blk{flex-direction:column-reverse}.c-cta-blk__content{width:100%;padding:48px 24px}.c-cta-blk__media{width:100%;height:300px}.c-cta-blk__media img{object-position:center top}}

/* CTA renforcer (carte nuit 1052, image droite) */
.c-renforcer{max-width:1052px;margin-inline:auto;background:var(--apia-bleu-nuit);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:5fr 7fr;align-items:stretch}
.c-renforcer__content{display:flex;flex-direction:column;gap:24px;justify-content:center;padding:48px 48px 48px 64px}
.c-renforcer__title{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:var(--apia-bleu-ciel);margin:0}
.c-renforcer__text{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-blanc);margin:0}
.c-renforcer__media{position:relative;margin:24px;border-radius:16px;overflow:hidden;min-height:351px;background:#0a2438}
.c-renforcer__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:991px){.c-renforcer{grid-template-columns:1fr}.c-renforcer__content{padding:40px}.c-renforcer__media{min-height:240px}}

/* 5 questions a se poser (liste a fleches, pas accordeon) */
.c-qimg{display:block;max-width:1052px;width:100%;aspect-ratio:1052/271;object-fit:cover;border-radius:28px;margin:0 auto 48px}
.c-qlist{max-width:1052px;margin-inline:auto;list-style:none;margin-top:0;padding:0}
.c-qlist li{display:flex;align-items:flex-start;gap:24px;padding:32px 0;border-bottom:1px solid #9fb2c5}
.c-qlist li:last-child{border-bottom:0}
.c-qlist__icon{flex:0 0 48px;width:48px;height:48px;border-radius:999px;background:var(--apia-bleu);display:flex;align-items:center;justify-content:center}
.c-qlist__icon svg{width:24px;height:24px;color:#fff}
/* R2 (27/08) : 28/38 -> 23/30 en desktop, les questions ecrasaient le reste de la page.
   23px est deja le pas servi a <=991px : l'echelle descend maintenant 23 -> 21, le mobile est inchange. */
.c-qlist__q{font-family:var(--apia-font);font-weight:400;font-size:23px;line-height:30px;color:var(--apia-gris-bleu);margin:0}

/* Temoignages videos */
.c-temoign{max-width:1052px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-tcard{position:relative;border-radius:24px;overflow:hidden;min-height:259px;display:flex;flex-direction:column;justify-content:space-between;padding:24px;color:#fff;text-decoration:none}
.c-tcard__bg{position:absolute;inset:0;z-index:0}
.c-tcard__bg img{width:100%;height:100%;object-fit:cover}
.c-tcard__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,29,46,.9),rgba(5,29,46,.1) 60%)}
.c-tcard__badge{position:relative;z-index:1;align-self:flex-start;background:var(--apia-bleu-clair);color:var(--apia-bleu-marine);font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;padding:4px 8px;border-radius:8px}
.c-tcard__name{position:relative;z-index:1;font-family:var(--apia-font);font-weight:600;font-size:19px;line-height:24px;margin:0;color:#fff}
.c-tcard--cta{background:var(--apia-bleu-nuit);border-radius:28px;color:#fff;padding:24px}
.c-tcard--cta .c-tcard__title{font-family:var(--apia-font);font-weight:600;font-size:23px;line-height:28px;color:var(--apia-bleu-ciel);margin:0;padding-right:48px}
.c-tcard__btn{display:flex;align-items:center;justify-content:center;background:var(--apia-bleu);color:var(--apia-bleu-clair);font-family:var(--apia-font);font-weight:600;font-size:16px;line-height:22px;padding:8px 16px;border-radius:12px;text-decoration:none;width:100%}

/* Ressources (cards image + categorie + titre) */
.c-resgrid{max-width:1052px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-rcard{background:var(--apia-bleu-clair);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none}
.c-rcard__img{height:260px;width:100%;object-fit:cover;object-position:50% 25%;display:block}
.c-rcard__ph{height:260px;width:100%;background:linear-gradient(135deg,#0d58c9,#051d2e)}
.c-rcard__body{padding:24px;display:flex;flex-direction:column;gap:16px}
.c-rcard__cat{align-self:flex-start;background:var(--apia-bleu-ciel-15);border:.5px solid #9fb2c5;border-radius:999px;font-family:var(--apia-font);font-weight:500;font-size:14px;line-height:18px;color:var(--apia-gris-bleu);padding:4px 8px}
.c-rcard__title{font-family:var(--apia-font);font-weight:600;font-size:19px;line-height:24px;color:var(--apia-bleu-nuit);margin:0}
/* C4 (01/09/2026) : date de publication de la vignette. Même échelle typographique que la pastille de
   catégorie (14/18, gris-bleu) ; margin-top négative pour ramener le gap de 16 du body à 8, la date
   étant une métadonnée du titre et non une 3e information de même niveau. */
.c-rcard__date{font-family:var(--apia-font);font-weight:500;font-size:14px;line-height:18px;color:var(--apia-gris-bleu);margin-top:-8px}

/* Partenaires */
.c-logos{max-width:1052px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-logos__item{background:#fff;border:1px solid #DCE6F3;border-radius:16px;height:73px;display:flex;align-items:center;justify-content:center;padding:12px 24px}
.c-logos__item img{max-height:46px;max-width:75%;width:auto;object-fit:contain}
.c-logos__link{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.c-part-all{max-width:1052px;margin:32px auto 0;display:flex;justify-content:center}

/* Responsive */
@media(max-width:991px){
.c-enjeu-hero{grid-template-columns:1fr}
.c-enjeu-hero__col{padding:40px}
.c-enjeu-hero__media{min-height:300px;margin:0 16px 16px}
.c-enjeu-chapo{font-size:23px;line-height:30px}
.c-signaux,.c-benefices{grid-template-columns:1fr}
.c-benefices{gap:32px}
.c-risques__row{grid-template-columns:1fr;gap:8px}
.c-risques__arrow{display:none}
.c-profil__grid{grid-template-columns:1fr 1fr}
.c-temoign,.c-resgrid,.c-logos{grid-template-columns:1fr 1fr}
.c-section-heading__title,.c-prose .c-prose__title{font-size:33px;line-height:38px}
.c-section-heading{margin-bottom:32px}
.s-enjeu{padding:48px 16px}
.s-enjeu--dark{padding:64px 16px}
}
@media(max-width:600px){
/* R4 (27/08) : .c-logos retire de cette liste -> les logos partenaires restent a 2 par ligne en mobile. */
.c-profil__grid,.c-temoign,.c-resgrid{grid-template-columns:1fr}
.c-enjeu-hero__title{font-size:28px;line-height:32px}
.c-enjeu-chapo{font-size:21px;line-height:28px}
.c-section-heading__title,.c-prose .c-prose__title{font-size:28px;line-height:34px}
.c-qlist__q{font-size:21px;line-height:28px}
}

/* FAQ / accordeon */
.c-faq{max-width:1052px;margin-inline:auto;display:flex;flex-direction:column;gap:16px}
/* FAQ : design clair unifie le 27/08 (etait bleu nuit). La variante scopee .s-rej de /rejoindre-apia/
   devient le design de reference de TOUTES les FAQ du site : fiches enjeux, cahiers, trouver, rejoindre. */
.c-faq__item{background:var(--apia-bleu-clair);border-radius:16px;overflow:hidden}
.c-faq__q{width:100%;background:transparent;border:0;cursor:pointer;display:flex;align-items:center;gap:16px;padding:16px 24px;text-align:left;font-family:var(--apia-font);font-weight:600;font-size:23px;line-height:28px;color:var(--apia-bleu-marine)}
.c-faq__q-text{flex:1}
.c-faq__icon{flex:0 0 42px;width:42px;height:42px;border-radius:999px;background:var(--apia-bleu);display:flex;align-items:center;justify-content:center;transition:transform .25s ease}
.c-faq__icon svg{width:24px;height:24px;color:#fff}
.c-faq__item.is-open .c-faq__icon{transform:rotate(180deg)}
.c-faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.c-faq__a-inner{padding:0 24px 16px}
.c-faq__a p{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0}
.c-faq__item.is-open .c-faq__a{max-height:1000px}
@media(max-width:600px){.c-faq__q{font-size:19px;line-height:24px;padding:16px 24px}}

.c-enjeu-hero__sub{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-bleu-ciel);margin:0}

/* H02 (07/08, retour APIA) — carte CTA témoignages : bouton collé au bas de la carte.
   Idiome déjà en place sur .c-cahier__btn et .c-hrcard__btn (margin-top:auto) : réutilisé, pas
   réinventé. Aucune hauteur en dur — la carte s'étire déjà via le grid (align-items:stretch).
   Portée : accueil + 25 fiches enjeu (classe partagée, arbitrage Mickael 07/08 : source unique). */
.c-tcard--cta{display:flex;flex-direction:column}
.c-tcard--cta .c-tcard__btn{margin-top:auto}
/* =====================================================================
   APIA — Mouvement (2026-08-28). Tokens : Bricks > Settings > Custom CSS.
   Un seul idiome : le fond s'assombrit vers le marine, l'element monte d'1px,
   le chevron avance de 3px ; au clic il redescend et se comprime a 99 %.
   Remplace les idiomes filter:brightness(). Zero JavaScript.
   ===================================================================== */

/* .c-enjeu-btn est la classe-mere de 7 boutons derives (c-cahier__btn,
   c-hrcard__btn, c-numcard__btn, c-evt-hero__btn, c-steps-photo__btn,
   c-ta-resbox__btn, c-annu-more__btn) : cette regle les couvre tous. */
.c-enjeu-btn,.c-tcard__btn{transition:background-color var(--apia-dur-fast) var(--apia-ease),transform var(--apia-dur-fast) var(--apia-ease),box-shadow var(--apia-dur-fast) var(--apia-ease)}
.c-enjeu-btn svg{transition:transform var(--apia-dur-fast) var(--apia-ease)}
@media (hover:hover){
  .c-enjeu-btn:hover,.c-tcard__btn:hover{background-color:var(--apia-btn-hov-bg);color:var(--apia-btn-hov-fg);transform:translateY(-1px);box-shadow:var(--apia-btn-hov-shadow)}
  .c-enjeu-btn:hover svg{transform:translateX(3px)}
}
.c-enjeu-btn:active,.c-tcard__btn:active{background-color:var(--apia-btn-act-bg);color:var(--apia-btn-act-fg);transform:translateY(0) scale(.98);box-shadow:inset 0 2px 6px rgba(0,0,0,.30);transition-duration:90ms}
.c-enjeu-btn:focus-visible,.c-tcard__btn:focus-visible{outline:2px solid var(--apia-bleu-marine);outline-offset:2px}

/* Cartes : elevation au survol + zoom de l'image. Les 4 cartes a image portent
   deja overflow:hidden, aucun changement de structure requis. */
.c-rcard,.c-hrcard,.c-tcard{transition:transform var(--apia-dur-base) var(--apia-ease),box-shadow var(--apia-dur-base) var(--apia-ease)}
.c-rcard__img,.c-rcard__ph,.c-hrcard__img,.c-hrcard__ph,.c-tcard__bg img{transition:transform var(--apia-dur-slow) var(--apia-ease)}
@media (hover:hover){
  .c-rcard:hover,.c-hrcard:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(5,29,46,.11)}
  .c-tcard:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(5,29,46,.24)}
  .c-rcard:hover .c-rcard__img,.c-rcard:hover .c-rcard__ph,.c-hrcard:hover .c-hrcard__img,.c-hrcard:hover .c-hrcard__ph{transform:scale(1.04)}
  .c-tcard:hover .c-tcard__bg img{transform:scale(1.05)}
}
.c-rcard:focus-visible,.c-hrcard:focus-visible{outline:2px solid var(--apia-bleu-marine);outline-offset:3px}
.c-tcard:focus-visible{outline:2px solid var(--apia-bleu-ciel);outline-offset:3px}