/* APIA — Hub Ressources (/ressources/) — composants propres a la page.
   Dependances : apia-enjeu.css (l-rail, c-rcard, c-resgrid, c-enjeu-btn) + apia-home.css (c-cahiers, c-cahier, c-evlist, c-evrow).
   Rythme vertical Figma : gap racine 96, hero a 48 sous le header (node 785:24728). */
.apia-ress{display:flex;flex-direction:column;gap:96px;padding:48px 16px 96px}
.s-ress{margin:0}

/* Hero : H1 + pastilles + carte a la une */
.c-ress-hero{display:flex;flex-direction:column;gap:48px}
.c-ress-h1{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:var(--apia-bleu-nuit);margin:0}
.c-ress-pills{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.c-ress-pill{display:inline-block;background:var(--apia-bleu-clair);color:var(--apia-bleu-marine);border-radius:8px;padding:8px 16px;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;text-decoration:none;white-space:nowrap}
.c-ress-pill--on{background:var(--apia-bleu-marine);color:var(--apia-bleu-ciel)}
.c-ress-feat{background:var(--apia-bleu-nuit);border-radius:28px;padding:24px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;min-height:383px}
.c-ress-feat__media{grid-column:1/span 5;border-radius:16px;overflow:hidden;min-height:335px}
.c-ress-feat__media img{width:100%;height:100%;object-fit:cover;display:block}
.c-ress-feat__ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,#0d58c9,#051d2e)}
.c-ress-feat__col{grid-column:7/span 5;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:34px;padding:24px 0}
.c-ress-feat__text{display:flex;flex-direction:column;gap:19px}
.c-ress-feat__title{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:var(--apia-blanc);margin:0}
.c-ress-feat__intro{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-bleu-ciel);margin:0}
/* Familles du cahier a la une (04/09). Balisage repris du single ; l'APPARENCE non : .c-cah-fam est calee sur le
   fond clair du single, ici le fond est bleu nuit -> on reprend la pastille du MEME bloc en posant .c-cahier__pill
   sur le lien, donc 0 valeur de couleur dupliquee. Ne restent ici que les proprietes qu'une <ul> de liens exige et
   qu'un <span> n'avait pas. white-space:normal est VOLONTAIREMENT l'inverse du nowrap de .c-cah-fam : le libelle le
   plus long (« Gouvernance & administrateur independant ») deborderait la colonne a 390px. Portee bornee a
   .c-ress-feat -> le single et les cartes de grille ne bougent pas. */
.c-ress-feat .c-cah-fams{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.c-ress-feat .c-cah-fam{display:inline-block;text-decoration:none;white-space:normal;transition:background-color var(--apia-dur-fast) var(--apia-ease),color var(--apia-dur-fast) var(--apia-ease)}
.c-ress-feat .c-cah-fam:hover{background:var(--apia-bleu-ciel);color:var(--apia-bleu-nuit)}
.c-ress-feat .c-cah-fam:focus-visible{outline:2px solid var(--apia-bleu-ciel);outline-offset:2px}

/* Sous-page rubrique (apia-ressources-rubrique.php) : fil d'ariane + tete + etat vide */
.c-ress-head{display:flex;flex-direction:column;gap:24px}
.c-ress-crumb{margin:0}
.c-ress-crumb a{display:inline-flex;align-items:center;gap:6px;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);text-decoration:none}
.c-ress-crumb a:hover{color:var(--apia-bleu)}
.c-ress-crumb svg{width:16px;height:16px;flex:0 0 16px}
.c-ress-empty{font-family:var(--apia-font);font-weight:500;font-size:18px;line-height:28px;color:var(--apia-gris-bleu);margin:0;text-align:center;padding:48px 0}
.c-ress-empty a{color:var(--apia-bleu);text-decoration:underline}

/* Separateur filet + bouton centre (filet 1px #9FB2C5, node 785:24769) */
.c-ress-more{display:flex;align-items:center;gap:40px}
.c-ress-more::before,.c-ress-more::after{content:"";flex:1 1 0;height:1px;background:#9fb2c5}

/* Titres de sections (48/52 Figma, gris 900 -> bleu nuit, precedent D8) */
.c-ress-title{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:var(--apia-bleu-nuit);margin:0 0 48px}
#evenements-apia .c-ress-title{margin-bottom:96px}

/* Carte LinkedIn (1052x399 nuit r28 ; texte 340 a 89 du bord ; visuel 607 flush droite r12) */
.c-ress-li{background:var(--apia-bleu-nuit);border-radius:28px;overflow:hidden;display:flex;align-items:center;min-height:399px}
.c-ress-li__content{flex:0 0 auto;width:340px;margin-left:89px;display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:24px 0}
.c-ress-li__text{display:flex;flex-direction:column;gap:10px}
.c-ress-li__title{font-family:var(--apia-font);font-weight:600;font-size:33px;line-height:36px;color:var(--apia-blanc);margin:0}
.c-ress-li__sub{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-bleu-ciel);margin:0}
.c-ress-li__media{margin-left:auto;align-self:stretch;flex:0 0 auto;width:607px;min-height:399px;object-fit:cover;border-radius:12px;display:block}

/* Page Formations (apia-formations.php) : pile verticale intra-section (prose + CTA, prose + carte).
   Seul ajout CSS de la page — tout le reste reutilise les composants c-* existants. */
.c-form-stack{display:flex;flex-direction:column;gap:32px}

@media (max-width:991px){
.apia-ress{gap:56px;padding:32px 16px 56px}
.c-ress-h1,.c-ress-title{font-size:33px;line-height:38px}
.c-ress-title,#evenements-apia .c-ress-title{margin-bottom:32px}
.c-ress-hero{gap:32px}
.c-ress-pills{justify-content:flex-start}
.c-ress-feat{display:flex;flex-direction:column;min-height:0}
.c-ress-feat__media{width:100%;min-height:230px}
.c-ress-feat__col{padding:8px 0 0;gap:24px}
.c-ress-li{flex-direction:column;align-items:stretch;min-height:0}
.c-ress-li__media{order:-1;width:100%;min-height:0;height:auto;aspect-ratio:607/399;margin:0;border-radius:12px 12px 0 0}
.c-ress-li__content{width:auto;margin:0;padding:32px 24px}
.page-id-167 .c-ress-feat__media{width:min(60%,320px);min-height:0;margin-inline:auto}
.page-id-167 .c-ress-feat__media img{height:auto}
}
@media (max-width:600px){
.c-ress-h1,.c-ress-title{font-size:28px;line-height:33px}
.c-ress-feat__title,.c-ress-li__title{font-size:23px;line-height:28px}
}

/* Filtre par famille — archive Cahiers (classification APIA 05/08/2026).
   Menu deroulant « Cahiers par thematiques » : forme et couleur DISTINCTES des pastilles de rubrique
   (retour Mickael 05/08 : deux rangees de pastilles identiques faisaient doublon avec la navigation).
   .c-ress-navs (gap 16) groupe les pastilles + le menu, pour que le gap 48 du hero s'applique entre le
   H1 et le bloc, pas entre les deux rangees. */
.c-ress-navs{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.c-ress-title--filt{margin-bottom:12px}
.c-ress-count{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0 0 40px}

/* Menu deroulant bleu nuit. <details> natif -> clavier + lecteurs d'ecran geres par le navigateur et
   fonctionnement SANS JavaScript ; apia-cahiers.js n'ajoute que la fermeture clic-exterieur / Echap. */
.c-fam-dd{position:relative;display:inline-block;max-width:100%}
.c-fam-dd__btn{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-width:320px;max-width:100%;box-sizing:border-box;background:var(--apia-bleu-nuit);color:var(--apia-blanc);border-radius:12px;padding:12px 20px;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;cursor:pointer;list-style:none;transition:background .15s}
.c-fam-dd__btn::-webkit-details-marker{display:none}
.c-fam-dd__btn::marker{content:""}
.c-fam-dd__btn:hover{background:#0a2f49}
.c-fam-dd__btn:focus-visible{outline:2px solid var(--apia-bleu-ciel);outline-offset:2px}
.c-fam-dd__lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-fam-dd__chev{width:16px;height:16px;flex:0 0 16px;transition:transform .2s}
.c-fam-dd[open] .c-fam-dd__chev{transform:rotate(180deg)}
/* Le filet clair n'est pas decoratif : ouvert, le panneau recouvre la carte « a la une », qui est du MEME
   bleu nuit -> sans lui le bord du panneau disparait sur cette zone (l'ombre portee ne se voit pas sur fond sombre). */
.c-fam-dd__panel{position:absolute;z-index:30;top:calc(100% + 8px);left:0;min-width:100%;width:max-content;max-width:min(380px,calc(100vw - 32px));box-sizing:border-box;background:var(--apia-bleu-nuit);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:8px;box-shadow:0 16px 40px rgba(5,29,46,.40)}
.c-fam-dd__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.c-fam-dd__item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:8px;font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:rgba(255,255,255,.88);text-decoration:none;transition:background .15s,color .15s}
.c-fam-dd__item:hover{background:rgba(255,255,255,.10);color:var(--apia-blanc)}
.c-fam-dd__item.is-active{background:rgba(156,205,248,.14);color:var(--apia-bleu-ciel)}
.c-fam-dd__n{flex:0 0 auto;font-weight:600;font-size:13px;color:rgba(255,255,255,.55)}
.c-fam-dd__item.is-active .c-fam-dd__n{color:var(--apia-bleu-ciel)}

/* Mobile : le menu prend toute la largeur du rail (le libelle « Gouvernance & administrateur independant »
   depasse sinon la largeur disponible a 390). */
@media (max-width:600px){
  .c-fam-dd{display:block;width:100%}
  .c-fam-dd__btn{width:100%;min-width:0}
  .c-fam-dd__panel{width:auto;max-width:none;left:0;right:0}
  .c-fam-dd__item{font-size:15px}
}