/* =====================================================================
   PAGES PILIERS — assets/css/axf-pillar.css
   Fichier chargé automatiquement (front + éditeur). Réutilise le design
   des pages programme (.axf-prog-*, .axf-picto, .axf-list…).
   Variables thème : --axf-violet #2e1f45 · --axf-jaune #FFC107
   Violet clair #5e4682 · Canard #336e6a
   ===================================================================== */

/* --- Hero : dégradé de secours si aucune image n'est fournie --- */
.axf-bg-layer--pilier {
    background: linear-gradient(120deg, #2e1f45 0%, #5e4682 60%, #336e6a 100%);
}
.axf-bg-layer--pilier::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 78% 22%, rgba(255,193,7,.18), transparent 42%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px);
}
/* Quand une image est présente, le dégradé de secours doit disparaître. */
.axf-bg-layer--pilier:has(img)::after { content: none; }
.axf-bg-layer--pilier:has(img) { background: none; }

/* --- Texte vertical gris : ajusté précisément en JS (voir la section
   « G. HERO PROGRAMME — redimensionnement texte vertical » dans
   assets/js/axf-front.js, réutilisée telle quelle grâce aux mêmes IDs
   #axf-hero-wrapper / #axf-vertical-bottom / #axf-purple-box /
   #axf-big-text / #axf-slogan-text). Le texte est calculé pour occuper
   exactement la hauteur disponible du hero, quelle que soit sa longueur.
   Les valeurs ci-dessous ne servent que de repli tant que le script n'a
   pas encore tourné (chargement de la page, JS désactivé). */
.axf-pilier-hero .axf-meta-vertical-text { font-size: 120px; line-height: 1; }
.axf-pilier-hero .axf-desc-vertical-text { font-size: 13px; letter-spacing: .6px; }

/* --- Marge entre le hero (banner) et le corps de la page ---
   Le hero et le corps sont tous deux des .axf-programme-hero-wrapper
   consécutifs (pages programme, session, pilier, qui-sommes-nous), ou
   un .axf-single-content pour les articles. On cible ce couple pour
   rétablir un espace généreux sur TOUTES les pages, quel que soit le
   type de hero (avec ou sans .axf-pilier-hero). */
.axf-programme-hero-wrapper + .axf-programme-hero-wrapper,
.axf-programme-hero-wrapper + .axf-single-content,
.axf-pilier-hero + .axf-programme-hero-wrapper { margin-top: 120px; }

@media screen and (max-width: 700px) {
    .axf-programme-hero-wrapper + .axf-programme-hero-wrapper,
    .axf-programme-hero-wrapper + .axf-single-content,
    .axf-pilier-hero + .axf-programme-hero-wrapper { margin-top: 60px; }
}

/* --- Pages « hub » rendues via the_content() (.axf-entry-content) ---
   Le reset .axf-entry-content > * { margin-top:0 !important } (axf-chrome.css)
   neutralise les marges du hero et du couple hero/corps ci-dessus (qui n'ont
   pas de !important). On les rétablit ici à priorité égale, mais cantonnées
   à .axf-entry-content pour ne PAS affecter single-programme.php (qui rend son
   markup hors .axf-entry-content et conserve déjà le bon espacement).
   Parmi deux règles !important, la plus spécifique l'emporte : les sélecteurs
   ci-dessous (2-3 classes) battent .axf-entry-content > * (1 classe). */
.axf-entry-content .axf-pilier-hero {
    margin-top: 60px !important;   /* espace header sticky ↔ hero */
}
.axf-entry-content .axf-programme-hero-wrapper + .axf-programme-hero-wrapper {
    margin-top: 120px !important;  /* espace hero ↔ corps (axf-prog-main) */
}
@media screen and (max-width: 700px) {
    .axf-entry-content .axf-pilier-hero { margin-top: 30px !important; }
    .axf-entry-content .axf-programme-hero-wrapper + .axf-programme-hero-wrapper { margin-top: 60px !important; }
}

/* --- LARGEUR du hero et du corps sur les pages rendues via the_content() ---

   Meme mecanisme que pour les marges ci-dessus, mais sur la geometrie
   horizontale. axf-chrome.css pose :

       .is-layout-flow > :where(*),
       .is-layout-constrained > :where(*) {
           max-width: none !important;
           margin-left: 0 !important;
           margin-right: 0 !important;
       }

   Le .axf-programme-hero-wrapper y perd donc son « max-width: 1500px » et son
   centrage « margin: 0 auto » (axf-front.css). Sur single-programme.php le
   markup est rendu hors .axf-entry-content : la regle de base s'applique et
   tout va bien. Sur les pages pilier / hub, en revanche, le corps se retrouvait
   a 80% du VIEWPORT, cale a gauche — d'ou l'impression d'un contenu
   « super large » sur ces pages uniquement.

   :where() ne compte pas dans la specificite : « .is-layout-flow > :where(*) »
   vaut (0,1,0). Les selecteurs ci-dessous valent (0,2,0) et l'emportent donc a
   !important egal. */
.axf-entry-content .axf-programme-hero-wrapper {
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

@media screen and (max-width: 900px) {
    /* Le HERO seul repasse pleine largeur (cf. axf-front.css) ; le corps
       conserve ses marges laterales. */
    .axf-entry-content .axf-programme-hero-wrapper:has(> .axf-hero-wrapper) {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.axf-badge-new {
    display: inline-block; vertical-align: middle;
    background: var(--axf-jaune); color: var(--axf-violet);
    font-size: 13px; font-weight: 700; letter-spacing: 1px;
    padding: 3px 10px; margin-left: 8px; border-radius: 2px;
}

/* --- Placeholder affiché dans l'éditeur à la place des shortcodes --- */
.axf-editor-ph {
    background: #f4f0f9; border: 1px dashed #c9bce0;
    color: #6b5a86; font-family: monospace; font-size: 12.5px;
    padding: 14px 16px; margin: 6px 0;
}

/* --- Intro colonne principale --- */
.axf-pilier-intro { margin-bottom: 30px; }
.axf-pilier-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Oswald', sans-serif; text-transform: uppercase;
    letter-spacing: 1.5px; font-size: 13px; color: #5e4682;
    margin-bottom: 12px;
}
.axf-pilier-eyebrow .axf-picto { color: #5e4682; width: 18px; height: 18px; }
.axf-pilier-h1 {
    font-family: 'Oswald', sans-serif; font-weight: 700;
    text-transform: uppercase; color: var(--axf-violet);
    font-size: clamp(24px, 3.4vw, 36px); line-height: 1.12; margin: 0 0 14px;
}

/* --- Contenu rédactionnel --- */
.axf-pilier-content { color: #333; font-size: 15.5px; line-height: 1.72; }
.axf-pilier-content p { margin: 0 0 14px; }
.axf-pilier-content--lead { font-size: 17px; color: #444; }
.axf-pilier-content a:not(.axf-pilier-btn) { color: #5e4682; }

/* --- Sommaire --- */
.axf-pilier-summary {
    background: #f9f8fc; border: 1px solid #e7e2f0;
    border-left: 4px solid #5e4682; padding: 22px 26px; margin: 28px 0;
}
.axf-pilier-summary-title {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Oswald', sans-serif; color: var(--axf-violet);
    font-size: 20px; margin: 0 0 14px;
}
.axf-pilier-summary-title .axf-picto { color: #5e4682; }
.axf-pilier-summary ol { margin: 0; padding-left: 20px; counter-reset: som; list-style: none; }
.axf-pilier-summary li { position: relative; margin-bottom: 10px; padding-left: 8px; counter-increment: som; }
.axf-pilier-summary li::before {
    content: counter(som); position: absolute; left: -20px; top: 1px;
    width: 20px; height: 20px; background: #5e4682; color: #fff;
    font-size: 12px; font-weight: 700; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.axf-pilier-summary a { color: var(--axf-violet); text-decoration: none; }
.axf-pilier-summary a:hover { text-decoration: underline; }

/* --- Liste « cadre réglementaire » : dates en avant --- */
.axf-pilier-legal-list li strong { color: var(--axf-jaune); }

/* --- Titre d'introduction des domaines --- */
.axf-pilier-domains-head { margin: 45px 0 10px; }

/* --- Carte domaine (média + corps) --- */
.axf-pilier-domain {
    display: grid; grid-template-columns: 190px 1fr;
    border: 1px solid #e6e6e6; background: #fff; overflow: hidden;
    box-shadow: 0 6px 24px rgba(46,31,69,.06); margin: 22px 0 12px;
}
.axf-pilier-domain-media {
    position: relative; min-height: 180px;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 18px; color: #fff; overflow: hidden;
}
.axf-pilier-domain-media::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 20px);
}
.axf-pilier-media--factory { background: linear-gradient(150deg, #2e1f45, #5e4682); }
.axf-pilier-media--ship    { background: linear-gradient(150deg, #245754, #336e6a); }
.axf-pilier-media--train   { background: linear-gradient(150deg, #3a2c55, #6a4fa0); }
.axf-pilier-media--plane   { background: linear-gradient(150deg, #1f3a4d, #2e6a7e); }
/* Liste des domaines couverts, sous les paragraphes d'une carte.
   Reprend la présentation des colonnes du méga-menu, pour que le visiteur
   retrouve la même structure d'un support à l'autre. */
.axf-pilier-domain-liens { margin: 22px 0 24px; }
.axf-pilier-domain-liens-titre {
    margin: 0 0 10px; font-family: 'Oswald', sans-serif; font-size: 13px;
    font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    color: var(--axf-violet);
}
.axf-pilier-domain-liens ul { list-style: none; margin: 0; padding: 0; }
.axf-pilier-domain-liens li { border-bottom: 1px solid #ece7f3; }
.axf-pilier-domain-liens li:last-child { border-bottom: 0; }
.axf-pilier-domain-liens a,
.axf-pilier-domain-liens span {
    display: block; padding: 9px 0 9px 20px; position: relative;
    font-size: 15px; line-height: 1.4; color: #40384f; text-decoration: none;
}
.axf-pilier-domain-liens a::before,
.axf-pilier-domain-liens span::before {
    content: '›'; position: absolute; left: 4px; top: 8px;
    color: var(--axf-jaune); font-weight: 700;
}
.axf-pilier-domain-liens a:hover { color: var(--axf-violet); }
@media (max-width: 700px) {
    .axf-pilier-domain-liens a,
    .axf-pilier-domain-liens span { font-size: 14px; }
}

/* Génie civil, infrastructures de transport et réseaux divers (IAB). */
.axf-pilier-media--bridge  { background: linear-gradient(150deg, #4a3520, #7a5a33); }
.axf-pilier-domain-icon {
    position: absolute; top: 16px; left: 16px;
    width: 46px; height: 46px; color: #fff; opacity: .95;
}
.axf-pilier-domain-icon .axf-picto { width: 46px; height: 46px; }
.axf-pilier-domain-eyebrow {
    position: relative; z-index: 1;
    font-family: 'Oswald', sans-serif; text-transform: uppercase;
    letter-spacing: 1px; font-size: 13px;
    background: rgba(0,0,0,.22); padding: 5px 10px; align-self: flex-start;
}
.axf-pilier-domain-body { padding: 24px 26px; }
.axf-pilier-domain-title {
    font-family: 'Oswald', sans-serif; color: var(--axf-violet);
    font-size: 20px; line-height: 1.2; margin: 0 0 12px;
}

/* --- Bloc sessions dans une carte domaine --- */
.axf-pilier-sessions { margin-top: 22px; border-top: 1px dashed #e0e0e0; padding-top: 18px; }
.axf-pilier-sessions-title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Oswald', sans-serif; font-size: 16px;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--axf-violet); margin: 0 0 14px;
}
.axf-pilier-sessions-title .axf-picto { color: #5e4682; width: 20px; height: 20px; }

/* --- PILIER CERTIFICATION : listes de sessions SANS filtres ---------------

   Les listes de sessions des blocs « domaine » sont produites par le shortcode
   [postcard_date_filter] (plugin Postcard). Son attribut show_taxonomy_filter
   est deja a "false" dans pillar.php, ce qui retire la liste deroulante des
   types de formation — mais le filtre de dates (Flatpickr) et les eventuelles
   autres listes deroulantes restent affiches.

   Sur cette page le visiteur consulte un parcours de certification precis :
   les sessions proposees sont deja restreintes au domaine du bloc, et un
   filtre supplementaire n'a pas d'objet.

   La portee est volontairement etroite : .axf-pilier-sessions n'existe que
   dans le bloc domaine du pilier certification (pillar.php l. 279). Les
   listes de sessions des pages programme, session et du pilier hub ne sont
   pas concernees.

   NOTE : les classes internes du plugin Postcard ne sont pas connues ici ; on
   neutralise donc les controles de formulaire par leur nature plutot que par
   leur classe. Les liens de pagination (a / button) restent intacts. */

.axf-pilier-sessions select,
.axf-pilier-sessions input[type="date"],
.axf-pilier-sessions input[type="month"],
.axf-pilier-sessions input[type="search"],
.axf-pilier-sessions input.flatpickr-input,
.axf-pilier-sessions .flatpickr-input,
.axf-pilier-sessions .flatpickr-calendar {
    display: none !important;
}

/* Conteneur de filtres devenu vide : on retire aussi son espacement pour
   eviter un blanc inexplique au-dessus de la liste. */
.axf-pilier-sessions form:has(> select):not(:has(article)):not(:has(li)),
.axf-pilier-sessions div:has(> select):not(:has(article)):not(:has(li)),
.axf-pilier-sessions div:has(> .flatpickr-input):not(:has(article)):not(:has(li)) {
    display: none !important;
}

/* Les libelles orphelins des champs masques. */
.axf-pilier-sessions label:has(+ select),
.axf-pilier-sessions label:has(+ .flatpickr-input),
.axf-pilier-sessions label:has(> select),
.axf-pilier-sessions label:has(> .flatpickr-input) {
    display: none !important;
}

/* --- Boutons --- */
.axf-pilier-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--axf-violet); color: #fff !important;
    font-family: 'Oswald', sans-serif; letter-spacing: 1px;
    text-transform: uppercase; font-size: 13.5px; text-decoration: none;
    padding: 12px 22px; transition: background .2s ease, transform .2s ease;
}
.axf-pilier-btn .axf-picto { width: 16px; height: 16px; color: #fff; }
.axf-pilier-btn:hover { background: #5e4682; transform: translateX(2px); }
.axf-pilier-btn--block { display: flex; justify-content: center; width: 100%; margin-top: 6px; }

/* --- Sidebar : sous-titre devis --- */
.axf-pilier-devis-sub { font-size: 13px; color: #777; margin: 0 0 14px; }

/* --- Sidebar : chiffres clés --- */
.axf-pilier-facts {
    background: #fff; border: 1px solid #e0e0e0;
    padding: 8px 18px; margin-bottom: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
.axf-pilier-fact {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid #f0f0f0;
}
.axf-pilier-fact:last-child { border-bottom: 0; }
.axf-pilier-fact .axf-picto { width: 30px; height: 30px; color: #5e4682; flex-shrink: 0; }
.axf-pilier-fact strong { display: block; font-family: 'Oswald', sans-serif; color: var(--axf-violet); font-size: 17px; line-height: 1.1; }
.axf-pilier-fact span { display: block; font-size: 12.5px; color: #777; }

/* --- Sidebar : carte CTA --- */
.axf-pilier-cta-card {
    background: linear-gradient(150deg, #2e1f45, #5e4682);
    color: #fff; padding: 24px 22px;
    border-left: 6px solid var(--axf-jaune);
}
.axf-pilier-cta-card h4 { font-family: 'Oswald', sans-serif; font-size: 19px; margin: 0 0 8px; }
.axf-pilier-cta-card p { font-size: 13.5px; color: rgba(255,255,255,.85); margin: 0 0 16px; line-height: 1.5; }
.axf-pilier-cta-card .axf-pilier-btn { background: var(--axf-jaune); color: var(--axf-violet) !important; }
.axf-pilier-cta-card .axf-pilier-btn .axf-picto { color: var(--axf-violet); }
.axf-pilier-cta-card .axf-pilier-btn:hover { background: #fff; }

/* --- Responsive --- */
@media (max-width: 780px) {
    .axf-pilier-domain { grid-template-columns: 1fr; }
    .axf-pilier-domain-media { min-height: 120px; }
}
/* =====================================================================
   PILIER HUB — corps en blocs Gutenberg natifs
   Reprend le langage visuel de la page Certifications : chaque section H2
   devient une carte encadrée (titre Oswald violet + filet jaune) ; les H2
   sont alternés en cartes pleines colorées (violet / canard) pour rythmer
   la lecture, exactement comme .axf-prog-block--violet/--green.
   Aucun markup à changer : tout est piloté par le CSS via :nth-of-type.
   ===================================================================== */

/* --- H1 + chapô (le 1er paragraphe en italique du doc) --- */
.axf-pilier-hub-content > h1,
.axf-pilier-hub-content > .wp-block-heading:first-child {
    font-family: 'Oswald', sans-serif; font-weight: 700;
    text-transform: uppercase; color: var(--axf-violet);
    font-size: clamp(24px, 3.4vw, 34px); line-height: 1.14;
    margin: 0 0 6px;
}
.axf-pilier-hub-content > h1 + p,
.axf-pilier-hub-content > h1 + p em {
    font-family: 'Oswald', sans-serif; font-style: normal;
    color: #5e4682; font-size: 16px; letter-spacing: .3px;
    text-transform: uppercase; margin: 0 0 4px;
}
.axf-pilier-hub-content > h1 + p + p { margin-top: 18px; }

/* Filet jaune sous le H1 */
.axf-pilier-hub-content > h1::after {
    content: ""; display: block; width: 70px; height: 3px;
    background: var(--axf-jaune); margin: 12px 0 0;
}

/* --- Corps courant --- */
.axf-pilier-hub-content p { color: #333; font-size: 15.5px; line-height: 1.72; margin: 0 0 14px; }
.axf-pilier-hub-content a:not(.axf-pilier-btn) { color: #5e4682; }
.axf-pilier-hub-content strong { color: #201533; }

/* ---------------------------------------------------------------
   SECTIONS H2 : chaque titre H2 + son contenu jusqu'au prochain H2
   forme une carte. On stylise le H2 comme une carte à part entière et
   on encadre le flux via des bordures cohérentes.
--------------------------------------------------------------- */
.axf-pilier-hub-content h2 {
    font-family: 'Oswald', sans-serif; font-weight: 700;
    text-transform: uppercase; color: var(--axf-violet);
    font-size: 20px; line-height: 1.25;
    margin: 40px 0 16px; padding: 0 0 12px;
    border-bottom: 3px solid var(--axf-jaune);
    display: flex; align-items: center; gap: 10px;
}
.axf-pilier-hub-content > h2:first-child { margin-top: 0; }

/* Puce carrée jaune devant chaque H2, façon picto */
.axf-pilier-hub-content h2::before {
    content: ""; flex: 0 0 auto; width: 14px; height: 14px;
    background: var(--axf-jaune); border-radius: 2px; transform: rotate(45deg);
}

/* --- H3 / H4 / H5 --- */
.axf-pilier-hub-content h3 {
    font-family: 'Oswald', sans-serif; color: #5e4682;
    font-size: 18px; text-transform: uppercase; letter-spacing: .3px;
    margin: 26px 0 10px; padding-left: 14px;
    border-left: 4px solid #5e4682;
}
.axf-pilier-hub-content h4 {
    font-family: 'Oswald', sans-serif; color: var(--axf-violet);
    font-size: 16px; margin: 22px 0 8px;
}
.axf-pilier-hub-content h5 {
    font-family: 'Oswald', sans-serif; color: #5e4682;
    font-size: 14.5px; margin: 18px 0 8px; font-style: italic;
}

/* ---------------------------------------------------------------
   LISTES → cartes pleines colorées, comme .axf-prog-block--violet/green
   On alterne violet / canard pour rythmer, avec puces blanches.
--------------------------------------------------------------- */
.axf-pilier-hub-content ul {
    list-style: none; margin: 0 0 18px; padding: 22px 26px;
    background: linear-gradient(135deg, #5e4682 0%, #4a3568 100%);
    color: #fff; border-radius: 2px;
    border-left: 6px solid var(--axf-jaune);
}
.axf-pilier-hub-content ul li {
    position: relative; padding-left: 22px; margin-bottom: 10px;
    font-size: 15px; line-height: 1.55; color: #fff;
}
.axf-pilier-hub-content ul li:last-child { margin-bottom: 0; }
.axf-pilier-hub-content ul li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 8px; height: 8px; background: var(--axf-jaune);
    border-radius: 2px; transform: rotate(45deg);
}
.axf-pilier-hub-content ul strong { color: #fff; }
.axf-pilier-hub-content ul a { color: #ffe08a; }

/* Alterne la couleur des cartes-listes (canard) une sur deux */
.axf-pilier-hub-content ul:nth-of-type(even) {
    background: linear-gradient(135deg, #336e6a 0%, #245754 100%);
    border-left-color: #1e4442;
}

/* Sous-listes imbriquées : plus discrètes, dans la même carte */
.axf-pilier-hub-content ul ul {
    margin: 10px 0 0; padding: 0 0 0 4px;
    background: none; border-left: 0;
}
.axf-pilier-hub-content ul ul li { font-size: 14px; color: rgba(255,255,255,.9); }
.axf-pilier-hub-content ul ul li::before {
    background: rgba(255,255,255,.55); width: 6px; height: 6px; top: 8px;
}

/* Listes ordonnées (rares) : encadré clair plutôt que carte pleine */
.axf-pilier-hub-content ol {
    margin: 0 0 18px; padding: 18px 24px 18px 40px;
    background: #f5f5f5; border: 1px solid #e0e0e0;
    border-left: 4px solid #5e4682; border-radius: 2px;
    color: #333; font-size: 15px; line-height: 1.6;
}
.axf-pilier-hub-content ol li { margin-bottom: 8px; }

/* ---------------------------------------------------------------
   CADRE RÉGLEMENTAIRE — encadré à contour (pas de fond, texte noir)
--------------------------------------------------------------- */
.axf-pilier-hub-content ul.axf-legal-list {
    background: none;
    border: 1px solid #d8d8d8;
    border-left: 4px solid var(--axf-violet);
    color: #1a1a1a;
    padding: 20px 26px;
}
.axf-pilier-hub-content ul.axf-legal-list li { color: #1a1a1a; }
.axf-pilier-hub-content ul.axf-legal-list li::before {
    background: var(--axf-violet);
}
.axf-pilier-hub-content ul.axf-legal-list strong { color: #000; }
.axf-pilier-hub-content ul.axf-legal-list a { color: #5e4682; }
/* neutralise l'alternance de couleur héritée pour cette liste */
.axf-pilier-hub-content ul.axf-legal-list:nth-of-type(even) {
    background: none; border-left-color: var(--axf-violet);
}

/* ---------------------------------------------------------------
   PRÉREQUIS — un seul encadré clair, titre H2 normal, coches vertes
   (le titre garde le style H2 standard ; seule la LISTE change)
--------------------------------------------------------------- */
.axf-pilier-hub-content ul.axf-prereq-list {
    background: #f4f0f9;
    border: 1px solid #e2d9f0;
    border-left: 6px solid var(--axf-jaune);
    color: #333;
    padding: 20px 24px;
}
.axf-pilier-hub-content ul.axf-prereq-list:nth-of-type(even) {
    background: #f4f0f9; border-left-color: var(--axf-jaune);
}
.axf-pilier-hub-content ul.axf-prereq-list li {
    color: #333; padding-left: 30px;
}
.axf-pilier-hub-content ul.axf-prereq-list li::before {
    content: ""; left: 0; top: 3px; width: 18px; height: 18px;
    background-color: #336e6a; transform: none; border-radius: 0;
    -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.axf-pilier-hub-content ul.axf-prereq-list strong { color: #201533; }

/* ---------------------------------------------------------------
   NOTES « Attention : … » — encadré d'avertissement compact
--------------------------------------------------------------- */
.axf-pilier-hub-content .axf-note {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 18px; margin: 0 0 18px; border-radius: 2px;
}
.axf-pilier-hub-content .axf-note::before {
    content: ""; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
    -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
}
.axf-pilier-hub-content .axf-note p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.axf-pilier-hub-content .axf-note--warning {
    background: #fff8e6; border: 1px solid #f3d98a; border-left: 4px solid var(--axf-jaune); color: #5c4a12;
}
.axf-pilier-hub-content .axf-note--warning::before {
    background: #d9a300;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.axf-pilier-hub-content .axf-note--warning strong { color: #7a5c00; }
.axf-pilier-hub-content .axf-note--info {
    background: #f4f0f9; border: 1px solid #e2d9f0; border-left: 4px solid #5e4682; color: #3a2c55;
}
.axf-pilier-hub-content .axf-note--info::before {
    background: #5e4682;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}
.axf-pilier-hub-content .axf-note--info strong { color: #3a2c55; }

/* --- Bloc sessions inséré dans le corps d'un hub --- */
.axf-pilier-hub-content .axf-sessions-filter { padding: 6px 0 30px; }
.axf-pilier-hub-content .axf-sessions-filter-container { max-width: none; margin: 0; }

/* ---------------------------------------------------------------
   SOMMAIRE → carte violette avec liens d'ancre (classe
   .axf-summary-list ajoutée sur la liste). Hérite du style des
   listes-cartes ; on ajuste juste les liens pour qu'ils soient
   lisibles et cliquables comme un vrai sommaire.
--------------------------------------------------------------- */
.axf-pilier-hub-content ul.axf-summary-list a {
    color: #fff; text-decoration: none; font-weight: 500;
    border-bottom: 1px solid rgba(255,224,138,.5);
    transition: color .2s ease, border-color .2s ease;
}
.axf-pilier-hub-content ul.axf-summary-list a:hover {
    color: #ffe08a; border-bottom-color: #ffe08a;
}

/* ---------------------------------------------------------------
   TABLEAU (bloc core/table) — ex. liste des OPCO. Absent du thème
   jusqu'ici : on l'aligne sur la charte (en-tête violet, lignes
   alternées, cellules aérées). S'applique à tout tableau du corps
   d'un hub, avec un léger renfort pour .axf-opco-table.
--------------------------------------------------------------- */
.axf-pilier-hub-content .wp-block-table { margin: 0 0 22px; overflow-x: auto; }
.axf-pilier-hub-content .wp-block-table table {
    width: 100%; border-collapse: collapse;
    font-family: 'Roboto', sans-serif; font-size: 14.5px;
    background: #fff; border: 1px solid #e4dcf0;
}
.axf-pilier-hub-content .wp-block-table thead th {
    background: var(--axf-violet); color: #fff;
    font-family: 'Oswald', sans-serif; font-weight: 500;
    text-transform: uppercase; letter-spacing: .4px; font-size: 13.5px;
    text-align: left; padding: 14px 18px; border: none;
}
.axf-pilier-hub-content .wp-block-table tbody td {
    padding: 12px 18px; border-top: 1px solid #ece6f5;
    color: #333; line-height: 1.5; vertical-align: top;
}
.axf-pilier-hub-content .wp-block-table tbody tr:nth-child(even) { background: #f7f4fb; }
.axf-pilier-hub-content .wp-block-table tbody tr:hover { background: #f0ebf8; }
.axf-pilier-hub-content .wp-block-table tbody td:first-child { white-space: nowrap; }
.axf-pilier-hub-content .wp-block-table tbody td strong { color: var(--axf-violet); }

@media (max-width: 640px) {
    .axf-pilier-hub-content ul { padding: 18px 18px; }
    .axf-pilier-hub-content .wp-block-table table { font-size: 13px; }
    .axf-pilier-hub-content .wp-block-table thead th,
    .axf-pilier-hub-content .wp-block-table tbody td { padding: 10px 12px; }
    .axf-pilier-hub-content .wp-block-table tbody td:first-child { white-space: normal; }
}

/* =========================================================================
   PAGE « TESTEZ VOTRE PARCOURS DE CERTIFICATION »
   Le simulateur [adx_cert_planner_v2] est inséré dans le corps éditorial
   d'un bloc adx/pilier-hub, dont la colonne de contenu est étroite.
   On lui rend une largeur confortable sans casser le flux du hub.
   ========================================================================= */

.axf-cert-planner-wrap {
    margin: 34px 0 42px;
    padding: 26px 24px;
    background: #fbfbfd;
    border: 1px solid #ecedf2;
    border-radius: 12px;
}

/* Le planner porte ses propres cartes : on neutralise les marges
   éditoriales héritées des paragraphes du hub. */
.axf-cert-planner-wrap > *:first-child { margin-top: 0; }
.axf-cert-planner-wrap > *:last-child  { margin-bottom: 0; }

/* Sur grand écran, on déborde légèrement de la colonne de texte pour
   laisser respirer les blocs par échéance. */
@media (min-width: 1100px) {
    .axf-cert-planner-wrap {
        width: calc(100% + 120px);
        max-width: none;
        margin-left: -60px;
        margin-right: -60px;
    }
}

@media (max-width: 640px) {
    .axf-cert-planner-wrap {
        padding: 18px 14px;
        border-radius: 8px;
    }
}

/* -------------------------------------------------------------------------
   NEUTRALISATION DU STYLE DE LISTE DU HUB DANS LE PLANNER

   .axf-pilier-hub-content ul transforme TOUTE liste en carte violette à
   texte blanc. Le planner de certification possède ses propres listes
   (.axf-prog-rows, panier, formulaire) dont les enfants portent des
   couleurs sombres : sur le fond violet hérité, le texte devenait
   illisible. On rétablit ici un contexte neutre.

   Le sélecteur cible le conteneur de page ET la racine du planner, pour
   que le correctif tienne même si le shortcode est déplacé hors du groupe
   dans Gutenberg.
   ------------------------------------------------------------------------- */

.axf-pilier-hub-content .axf-cert-planner-wrap ul,
.axf-pilier-hub-content .axf-cert-planner-wrap ul:nth-of-type(even),
.axf-pilier-hub-content .adx-v2-wrap ul,
.axf-pilier-hub-content .adx-v2-wrap ul:nth-of-type(even) {
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
    color: inherit;
    border-left: 0;
    border-radius: 0;
}

.axf-pilier-hub-content .axf-cert-planner-wrap ul li,
.axf-pilier-hub-content .adx-v2-wrap ul li {
    position: static;
    padding-left: 0;
    margin-bottom: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Puces losange jaunes du hub : sans objet dans le planner. */
.axf-pilier-hub-content .axf-cert-planner-wrap ul li::before,
.axf-pilier-hub-content .adx-v2-wrap ul li::before {
    content: none;
}

.axf-pilier-hub-content .axf-cert-planner-wrap ul strong,
.axf-pilier-hub-content .adx-v2-wrap ul strong {
    color: inherit;
}

.axf-pilier-hub-content .axf-cert-planner-wrap ul a,
.axf-pilier-hub-content .adx-v2-wrap ul a {
    color: inherit;
}

/* Le hub colore aussi les titres et paragraphes : le planner gère les siens. */
.axf-pilier-hub-content .axf-cert-planner-wrap h2,
.axf-pilier-hub-content .axf-cert-planner-wrap h3,
.axf-pilier-hub-content .axf-cert-planner-wrap h4,
.axf-pilier-hub-content .adx-v2-wrap h2,
.axf-pilier-hub-content .adx-v2-wrap h3,
.axf-pilier-hub-content .adx-v2-wrap h4 {
    font-family: inherit;
    color: inherit;
}

.axf-pilier-hub-content .axf-cert-planner-wrap p,
.axf-pilier-hub-content .adx-v2-wrap p {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Listes ordonnées éventuelles (étapes du formulaire). */
.axf-pilier-hub-content .axf-cert-planner-wrap ol,
.axf-pilier-hub-content .adx-v2-wrap ol {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
}