/* APIA — Accueil (S8). Réutilise les composants c-* d'apia-enjeu.css (chargée en dépendance). Tokens var(--apia-*). */
.s-home{padding:96px 16px}
.s-home--hero{padding:16px 16px 96px}

/* Hero */
.c-home-hero{position:relative;max-width:1248px;margin-inline:auto;background:var(--apia-bleu-nuit);border-radius:28px;overflow:hidden}
.c-home-hero__content{max-width:54%;display:flex;flex-direction:column;gap:32px;padding:96px 0 96px 64px;position:relative;z-index:1}
.c-home-hero__inner{display:flex;flex-direction:column;gap:16px}
.c-home-hero__sur{font-family:var(--apia-font);font-weight:400;font-size:14px;line-height:24px;color:var(--apia-bleu-ciel);margin:0}
.c-home-hero__title{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:var(--apia-blanc);margin:0}
.c-home-hero__text{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-blanc);margin:0}
.c-home-hero .c-chips{flex-direction:row;flex-wrap:wrap;gap:8px 12px}
.c-home-hero__pic{display:contents}
.c-home-hero__img{position:absolute;top:0;right:0;bottom:0;height:100%;width:43%;max-width:none;object-fit:cover;object-position:right bottom}

/* Rangée titre + action (en-têtes de sections) */
.c-home-row{max-width:1052px;margin:0 auto 48px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.c-home-row--top{align-items:flex-start}
.c-home-row__title{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:var(--apia-bleu-nuit);margin:0;max-width:560px}
.c-home-row__title--40{font-size:40px;line-height:48px}
.c-home-row__title--48{font-size:48px;line-height:52px;max-width:none}
.c-home-row__intro{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:24px;color:var(--apia-gris-bleu);margin:0;max-width:344px}
.c-home-row__action{flex:0 0 auto}

/* Stats */
.c-stats{max-width:1052px;margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.c-stats__card{background:var(--apia-bleu-clair);border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:8px}
.c-stats__num{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:var(--apia-bleu);margin:0}
.c-stats__label{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0}

/* Bandeau photo */
.c-home-band{display:block;max-width:1052px;width:100%;margin:0 auto 48px;border-radius:24px}

/* Cartes enjeux */
.c-enjcards{max-width:1052px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-enjcard{background:var(--apia-bleu-nuit);border-radius:24px;padding:24px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.c-enjcard__title{font-family:var(--apia-font);font-weight:600;font-size:19px;line-height:24px;color:var(--apia-bleu-clair);margin:0}

/* Process 01/02/03 (c-steps, gate composants) */
.c-steps-head{max-width:1052px;margin:0 auto 16px;display:flex;flex-direction:column;gap:16px}
.c-steps-head__sur{font-family:var(--apia-font);font-weight:400;font-size:19px;line-height:24px;color:var(--apia-gris-bleu);margin:0}
.c-steps-head__title{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:var(--apia-bleu-nuit);margin:0;max-width:953px}
.c-steps-photo{position:relative;max-width:1052px;margin:0 auto 16px;border-radius:24px;overflow:hidden;height:248px}
.c-steps-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-steps-photo__btn{position:absolute;left:24px;bottom:24px;z-index:1}
.c-steps{max-width:1052px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-steps__card{border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px}
.c-steps__num{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;margin:0}
.c-steps__title{font-family:var(--apia-font);font-weight:600;font-size:24px;line-height:32px;margin:0}
.c-steps__text{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;margin:0;padding-right:32px}
.c-steps__card--light{background:var(--apia-bleu-clair)}
.c-steps__card--light .c-steps__num,.c-steps__card--light .c-steps__title{color:var(--apia-bleu)}
.c-steps__card--light .c-steps__text{color:var(--apia-gris-bleu)}
.c-steps__card--dark{background:var(--apia-bleu-nuit)}
.c-steps__card--dark .c-steps__num,.c-steps__card--dark .c-steps__title{color:var(--apia-bleu-ciel)}
.c-steps__card--dark .c-steps__text{color:var(--apia-bleu-ciel)}
.c-steps__card--blue{background:var(--apia-bleu)}
.c-steps__card--blue .c-steps__num,.c-steps__card--blue .c-steps__title,.c-steps__card--blue .c-steps__text{color:var(--apia-blanc)}

/* Témoignages vidéo (variante home : carte CTA marine en 1re position) */
.c-tcard--marine{background:var(--apia-bleu-marine)}

/* Cahiers APIA (carte bleu APIA, invariant : pas de full-bleed) */
.c-cahiers-wrap{max-width:1248px;margin-inline:auto;background:var(--apia-bleu);border-radius:28px;padding:96px 98px}
.c-cahiers-wrap .c-home-row{margin-bottom:48px}
.c-cahiers-wrap .c-home-row__title{color:var(--apia-blanc)}
.c-home-btn--white{background:var(--apia-blanc);color:var(--apia-bleu)}
.c-cahiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-cahier{background:var(--apia-bleu-nuit);border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.c-cahier__coverwrap{display:flex;justify-content:center;padding:48px 10px 0}
.c-cahier__cover{width:128px;height:179px;object-fit:cover;box-shadow:14px 20px 15px rgba(0,0,0,.5)}
.page-id-1471 .c-cahier__cover{width:172px;height:121px}
.c-cahier__body{padding:16px 24px 24px;display:flex;flex-direction:column;gap:32px;flex:1}
.c-cahier__meta{display:flex;flex-direction:column;gap:16px}
.c-cahier__pill{align-self:flex-start;background:var(--apia-bleu-ciel-15);border:.5px solid var(--apia-bleu-ciel);border-radius:999px;padding:4px 8px;font-family:var(--apia-font);font-weight:500;font-size:14px;line-height:18px;color:var(--apia-bleu-ciel)}
.c-cahier__title{font-family:var(--apia-font);font-weight:600;font-size:19px;line-height:24px;color:var(--apia-blanc);margin:0}
.c-cahier__btn{margin-top:auto;align-self:flex-start}

/* Régions */
.c-regions{max-width:1052px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.c-regions__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start}
/* justify-content:flex-start (et non center) : le bloc interne est en max-content, donc
   « center » decalait le fer a gauche de chaque carte selon la longueur du nom de region
   (18px de derive mesures col.1 a 1440 — recette Olivier L26, corrige 31/07). */
.c-region{background:var(--apia-bleu-clair);border-radius:16px;padding:16px 24px;display:flex;align-items:center;justify-content:flex-start;text-decoration:none}
.c-region__inner{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.c-region__name{display:flex;gap:4px;align-items:center;font-family:var(--apia-font);font-weight:600;font-size:16px;line-height:22px;color:var(--apia-bleu)}
.c-region__name svg{width:15px;height:15px}
.c-region__count{display:flex;gap:4px;align-items:center;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu)}
.c-region__count svg{width:15px;height:15px;color:var(--apia-bleu-nuit)}
.c-region__count b{font-weight:600;color:var(--apia-bleu-nuit)}
.c-regions__side{display:flex;flex-direction:column;gap:36px}
.c-regions__title{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:var(--apia-bleu-nuit);margin:0}
.c-regions__intro{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:24px;color:var(--apia-gris-bleu);margin:0}
.c-regions__head{display:flex;flex-direction:column;gap:16px}
.c-regions__map{flex:1 1 auto;background:var(--apia-bleu-nuit);border-radius:16px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.c-regions__map .c-enjeu-btn{align-self:center;width:187px;justify-content:center}
.c-regions__map img{width:196px;height:196px;object-fit:contain;flex:0 0 auto}

/* Rejoindre APIA */
.c-join{max-width:1052px;margin-inline:auto;background:var(--apia-bleu-nuit);border-radius:28px;display:grid;grid-template-columns:5fr 7fr;gap:24px;overflow:hidden}
.c-join__content{padding:48px 0 48px 64px;display:flex;flex-direction:column;gap:24px;justify-content:center}
.c-join__title{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:var(--apia-blanc);margin:0}
.c-join__intro{font-family:var(--apia-font);font-weight:300;font-size:16px;line-height:25px;color:var(--apia-bleu-ciel);margin:0}
.c-join .c-arrow-list li{color:var(--apia-bleu-clair)}
.c-join .c-arrow-list li svg{color:var(--apia-bleu-ciel)}
.c-join__media{position:relative;min-height:399px}
.c-join__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px}

/* Ressources (variante home : carte avec bouton) */
.c-hresources{max-width:1052px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-hrcard{display:flex;flex-direction:column;border-radius:16px;overflow:hidden}
.c-hrcard__img{height:192px;width:100%;object-fit:cover;display:block;background:var(--apia-bleu-nuit)}
.c-hrcard__ph{height:192px;width:100%;background:linear-gradient(135deg,#0d58c9,#051d2e)}
.c-hrcard__body{background:var(--apia-bleu-clair);padding:16px;display:flex;flex-direction:column;gap:16px;flex:1}
.c-hrcard__cat{align-self:flex-start;background:rgba(156,205,248,.42);border-radius:4px;padding:4px 8px;font-family:var(--apia-font);font-weight:300;font-size:13px;line-height:18px;color:var(--apia-bleu-marine)}
.c-hrcard__title{font-family:var(--apia-font);font-weight:600;font-size:19px;line-height:24px;color:var(--apia-bleu-nuit);margin:0}
.c-hrcard__btn{margin-top:auto;align-self:flex-start}

/* Événements */
.c-evlist{max-width:1052px;margin-inline:auto;display:flex;flex-direction:column;gap:16px}
.c-evrow{background:var(--apia-bleu-clair);border-radius:24px;padding:16px;display:grid;grid-template-columns:160px 1fr auto;gap:24px;align-items:center}
.c-evrow__date{background:var(--apia-bleu-marine);border-radius:16px;height:122px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4px 24px}
.c-evrow__day{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:var(--apia-blanc);margin:0}
.c-evrow__month{font-family:var(--apia-font);font-weight:600;font-size:16px;line-height:22px;color:var(--apia-bleu-ciel);margin:0}
.c-evrow__year{font-family:var(--apia-font);font-weight:600;font-size:16px;line-height:22px;color:var(--apia-blanc);margin:0}
.c-evrow__title{font-family:var(--apia-font);font-weight:400;font-size:23px;line-height:28px;color:var(--apia-bleu-nuit);margin:0 0 4px}
.c-evrow__place{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:24px;color:var(--apia-gris-bleu);margin:0}

/* Responsive */
@media(max-width:991px){
.c-home-hero__content{max-width:100%;padding:48px 24px 0}
.c-home-hero__img{position:static;width:100%;max-width:100%;height:auto;display:block;margin-top:24px}
.c-home-hero__title{font-size:33px;line-height:38px}
.c-home-row{flex-direction:column;align-items:flex-start}
.c-home-row__title--48,.c-steps-head__title,.c-regions__title{font-size:33px;line-height:38px}
.c-stats{grid-template-columns:1fr 1fr}
.c-enjcards,.c-steps,.c-cahiers,.c-hresources{grid-template-columns:1fr 1fr}
.c-regions{grid-template-columns:1fr}
.c-regions__side{display:contents}
.c-regions__head{order:-1}
.c-regions__grid{order:1}
.c-regions__map{order:2;padding:32px}
.c-join{grid-template-columns:1fr;gap:0}
.c-join__content{padding:40px}
.c-join__media{min-height:280px;margin:16px}
.c-cahiers-wrap{padding:48px 24px}
.c-evrow{grid-template-columns:1fr}
.c-evrow__date{width:160px}
.s-home{padding:56px 16px}
/* M01 (27/08) : .c-home-hero__pic est en display:contents (desktop) donc ne genere aucune boite.
   On lui rend une boite sous 991px UNIQUEMENT, pour y accrocher le motif pyramides en ::after.
   URL injectee par PHP dans --apia-hero-pyr (pattern apia-evenement.php) : aucun chemin date en dur. */
.c-home-hero__pic{display:block;position:relative}
.c-home-hero__pic::after{content:'';position:absolute;inset:0;background-image:var(--apia-hero-pyr,none);background-repeat:no-repeat;background-position:bottom left;background-size:auto 78%;pointer-events:none}
}
@media(max-width:600px){
.c-stats,.c-enjcards,.c-steps,.c-hresources,.c-cahiers{grid-template-columns:1fr}
.c-home-hero__title{font-size:28px;line-height:32px}
.c-home-row__title{font-size:28px;line-height:33px}
.c-home-row__title--40,.c-home-row__title--48{font-size:28px;line-height:33px}
.c-steps-photo{height:200px}
.c-join__content{padding:32px 24px}
/* T4 (27/08) : le mot insecable « Mediterranee » (117,58 px) + 2x24 de padding pilotait le min-content
   de la piste (165,58 px), d'ou une grille a 346,05 px dans un rail de 343. Le padding passe au pas
   systeme inferieur (--apia-space-base) sous 600px : min-content 149,58 < 163,5, debord resorbe. */
.c-region{padding:16px}
.c-regions__map{flex-direction:column;align-items:center}
}

/* SVG inline dans les boutons (chevron, download) */
.c-enjeu-btn svg{width:16px;height:16px;flex:0 0 16px}

/* Partenaires nationaux (retour 10/07) : rangees de 4, tuile 251x116, logos agrandis (~172x72 vs ~110x46). Variante additive : .c-logos de base (3 col) inchangee pour les autres surfaces. Breakpoints redeclares (ordre source : cette feuille charge apres apia-enjeu.css). Utilisee par la home + les pages region. */
.c-logos--nat4{grid-template-columns:repeat(4,1fr)}
.c-logos--nat4 .c-logos__item{height:116px;padding:16px 20px}
.c-logos--nat4 .c-logos__item img{max-height:72px;max-width:85%}
@media(max-width:991px){
.c-logos--nat4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.c-logos--nat4{grid-template-columns:repeat(2,1fr)}
.c-logos--nat4 .c-logos__item{height:88px;padding:12px 16px}
.c-logos--nat4 .c-logos__item img{max-height:56px}
}

/* H01 (07/08, retour APIA) — la section « Un réseau d'administrateurs… » est la plus légère de
   l'accueil (278 px de contenu) mais portait le même gap de 192 px que les 10 autres sections.
   Resserrement assumé via un MODIFICATEUR dédié : .s-home reste intacte pour les 10 autres.
   Gaps 192 → 160 (desktop) et 112 → 104 (mobile). Tokens --apia-space-3xl / --apia-space-2xl. */
.s-home--stats{padding-top:64px;padding-bottom:64px}
@media(max-width:991px){.s-home--stats{padding-top:48px;padding-bottom:48px}}
/* =====================================================================
   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.
   ===================================================================== */

/* Bouton blanc sur fond nuit : brightness(.96) etait invisible a l'oeil. */
.c-home-btn--white{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)}
@media (hover:hover){
  .c-home-btn--white:hover{background-color:var(--apia-bleu-clair);color:var(--apia-bleu-marine);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.28)}
}
.c-home-btn--white:active{background-color:var(--apia-bleu-ciel);color:var(--apia-bleu-nuit);transform:translateY(0) scale(.98);box-shadow:inset 0 2px 6px rgba(0,0,0,.30);transition-duration:90ms}
.c-home-btn--white:focus-visible{outline:2px solid var(--apia-bleu-ciel);outline-offset:2px}

/* Fond bleu APIA #0D58C9 (.c-cahiers-wrap) : ni sombre ni clair au sens de la
   classification, il retombait sur le defaut :root et le survol y devenait
   illisible. Sur ce fond le survol eclaircit : #ECF2FB = 5,73:1, la ou le
   marine ne donnait que 2,39:1. Seul conteneur bleu du site portant un bouton
   (verifie sur 24 pages). */
.c-cahiers-wrap{
  --apia-btn-hov-bg:     var(--apia-bleu-clair);
  --apia-btn-hov-fg:     var(--apia-bleu-marine);
  --apia-btn-hov-shadow: 0 4px 14px rgba(0,0,0,.22);
  --apia-btn-act-bg:     var(--apia-bleu-ciel);
  --apia-btn-act-fg:     var(--apia-bleu-nuit);
}