/* ============================================================
   HOPLION - La palette sur tout le site
   ------------------------------------------------------------
   Chargée en dernier sur chaque page (scripts/build-nav.mjs).
   Couleurs : bleu Hoplion #244199, Tomato #FE4A49, Mustard #FED766,
   bleu #0057A8, Alabaster #E6E6EA, Ghost White #F4F4F8.
   Aplats uniquement, aucun dégradé.

   Règles :
   - Éléments répétés (cartes, icônes, numéros, vignettes) : rythme
     bleu Hoplion, Tomato, Mustard, bleu #0057A8.
   - Identité par espace : élève = bleu Hoplion, centre = #0057A8,
     formateur = Tomato.
   - Mustard porte toujours un texte foncé (lisibilité).
   ============================================================ */

:root {
  --p1: #244199;
  --p2: #FE4A49;
  --p3: #FED766;
  --p4: #0057A8;
  --p-ink: #1F2A3D;
}

/* ---------- Pastilles de section et badges ---------- */
.section-tag.badge,
.badge.section-tag,
.faq2-badge,
.seo-page .badge-blue { background: var(--p3); border-color: var(--p3); color: var(--p-ink); }
.badge-blue .lucide, .section-tag .lucide { color: inherit; }

/* ---------- Menus du haut : même format pour toutes les icônes, bleu clair puis foncé au survol ---------- */
@media (min-width: 1081px) {
  .mega-link .mega-ico, .mega-grid-3 .mega-link:nth-child(n) .mega-ico { background: #E0ECF7; color: var(--p4); }
  .mega-link:hover .mega-ico, .mega-link.active .mega-ico, .mega-grid-3 .mega-link:nth-child(n):hover .mega-ico { background: var(--p1); color: #fff; }
  .mega-grid-3 .mega-link:nth-child(n) .mega-feats .ni, .mega-side-link .ni { color: var(--p4); }
  .mega-side-link:hover .ni { color: var(--p1); }
}
@media (max-width: 1080px) {
  .mega-link .mega-ico .ni, .mega-side-link .ni { color: var(--p4); }
  .mega-link:hover .mega-ico .ni, .mega-side-link:hover .ni { color: var(--p1); }
  .nav-mobile-start { background: var(--p2); }
}

/* ---------- Pied de page ---------- */
.ft-cta .btn { background: var(--p3); color: var(--p-ink); box-shadow: none; }
.ft-cta .btn:hover { background: var(--p2); color: #fff; }
.ft-cols > div:nth-child(2) .ft-col-title { color: var(--p2); }
.ft-cols > div:nth-child(4) .ft-col-title { color: var(--p4); }

/* ---------- Barre latérale de l'espace connecté ---------- */
.sidebar-link:nth-of-type(4n+2) .lucide { color: var(--p2); }
.sidebar-link:nth-of-type(4n+3) .lucide { color: var(--p4); }
.sidebar-link:nth-of-type(4n+4) .lucide { color: #B8941F; }
.sidebar-link.active { background: var(--p3); color: var(--p-ink); }
.sidebar-link.active .lucide { color: var(--p-ink); }

/* ---------- Pages de formation (onglets TFP APS / SSIAP 1 / SSIAP 2) ---------- */
.formation-tab.active:nth-child(2), .formation-tab.active[data-formation="ssiap1"] { background: var(--p2); border-color: var(--p2); box-shadow: none; }
.formation-tab.active:nth-child(3), .formation-tab.active[data-formation="ssiap2"] { background: var(--p4); border-color: var(--p4); box-shadow: none; }

/* ---------- Quiz : cartes d'UV ---------- */
.uv-card { border-top: 5px solid var(--p1); }
.uv-card:nth-child(4n+2) { border-top-color: var(--p2); }
.uv-card:nth-child(4n+3) { border-top-color: var(--p3); }
.uv-card:nth-child(4n+4) { border-top-color: var(--p4); }
.uv-num { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; background: var(--p1); color: #fff; }
.uv-card:nth-child(4n+2) .uv-num { background: var(--p2); }
.uv-card:nth-child(4n+3) .uv-num { background: var(--p3); color: var(--p-ink); }
.uv-card:nth-child(4n+4) .uv-num { background: var(--p4); }

/* ---------- Tarifs ---------- */
.pt-card:nth-child(4n+2) .pt-icon { background: var(--p2); }
.pt-card:nth-child(4n+3) .pt-icon { background: var(--p3); color: var(--p-ink); }
.pt-card:nth-child(4n+4) .pt-icon { background: var(--p4); }
.pt-card.highlight { background: #fff; border: 2px solid var(--p1); }
.pricing-duration.mode-sub { background: var(--p3); color: var(--p-ink); }
.pricing-duration.mode-once { background: #E0ECF7; color: var(--p4); }
.pt-tag.popular { background: var(--p2); }
.pt-tag.bonus { background: var(--p3); color: var(--p-ink); }
.page-hero .badge-white { background: var(--p3); color: var(--p-ink); }

/* Offres centres et formateurs */
.centre-pricing-grid .pricing-card:nth-child(2) .seats-tag { background: var(--p3); color: var(--p-ink); }
.centre-pricing-grid .pricing-card:nth-child(3) .seats-tag { background: #E0ECF7; color: var(--p4); }
.centre-pricing-grid .pricing-card.popular, .centre-pricing-grid .pricing-card.popular:hover { border-color: var(--p4); }
.centre-pricing-grid .popular-tag { background: var(--p4); }
.centre-tarifs-hero .badge-white, .fi-hero .badge-white { background: var(--p3); color: var(--p-ink); }
.fi-feature > .lucide { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--p1); color: #fff; }
.fi-feature:nth-child(4n+2) > .lucide { background: var(--p2); }
.fi-feature:nth-child(4n+3) > .lucide { background: var(--p3); color: var(--p-ink); }
.fi-feature:nth-child(4n+4) > .lucide { background: var(--p4); }
.fi-grid .pricing-card.popular { border-color: var(--p2); }
.fi-grid .popular-tag { background: var(--p2); }

/* ---------- Vidéos et simulations (Pratique) ---------- */
.video-mini-thumb { background: var(--p1); }
.video-mini-card:nth-child(4n+2) .video-mini-thumb { background: var(--p2); }
.video-mini-card:nth-child(4n+3) .video-mini-thumb { background: var(--p3); color: var(--p-ink); }
.video-mini-card:nth-child(4n+4) .video-mini-thumb { background: var(--p4); }
.pratique-tab.active { background: var(--p3); color: var(--p-ink); border-color: var(--p3); }

/* ---------- FAQ ---------- */
.faq-section:nth-of-type(4n+1) h2 { color: var(--p1); }
.faq-section:nth-of-type(4n+2) h2 { color: var(--p2); }
.faq-section:nth-of-type(4n+3) h2 { color: #B8941F; }
.faq-section:nth-of-type(4n+4) h2 { color: var(--p4); }
.faq2-ico { background: var(--p2); }
.faq-cta { border-color: var(--p3); background: #FFF9E8; }

/* ---------- Page 404 : raccourcis ---------- */

/* ---------- Articles du blog et pages SEO ---------- */
.steps-list li:nth-child(4n+2)::before { background: var(--p2); }
.steps-list li:nth-child(4n+3)::before { background: var(--p3); color: var(--p-ink); }
.steps-list li:nth-child(4n+4)::before { background: var(--p4); }
.cta-block ~ .cta-block { background: var(--p2); }
.cta-block ~ .cta-block .btn-primary { color: var(--p2); }
.article-card h2:nth-of-type(4n+2), .seo-card h2:nth-of-type(4n+2) { border-color: var(--p2); }
.article-card h2:nth-of-type(4n+3), .seo-card h2:nth-of-type(4n+3) { border-color: var(--p3); }
.article-card h2:nth-of-type(4n+4), .seo-card h2:nth-of-type(4n+4) { border-color: var(--p4); }
.warn-box { border-left-color: var(--p2); }
.info-box { border-left-color: var(--p4); }

/* ---------- Pages légales ---------- */
.legal-card h2 { padding-left: 14px; border-left: 5px solid var(--p1); }
.legal-card h2:nth-of-type(4n+2) { border-left-color: var(--p2); }
.legal-card h2:nth-of-type(4n+3) { border-left-color: var(--p3); }
.legal-card h2:nth-of-type(4n+4) { border-left-color: var(--p4); }
.info-block { border-left: 4px solid var(--p3); }

/* ---------- Connexion, inscription, souscription ---------- */
.auth-feature .lucide, .auth-feature svg { color: var(--p3); }
.cx-perks li:nth-child(4n+1) .cx-perk-ico, .cx-perks li:nth-child(4n+1) > span:first-child { background: var(--p3); color: var(--p-ink); }
.cx-perks li:nth-child(4n+2) .cx-perk-ico, .cx-perks li:nth-child(4n+2) > span:first-child { background: var(--p2); color: #fff; }
.cx-perks li:nth-child(4n+3) .cx-perk-ico, .cx-perks li:nth-child(4n+3) > span:first-child { background: #fff; color: var(--p1); }
.cx-perks li:nth-child(4n+4) .cx-perk-ico, .cx-perks li:nth-child(4n+4) > span:first-child { background: var(--p4); color: #fff; }

/* ---------- Espaces centre et formateur ---------- */
.pro-hero.is-centre { background: var(--p4); box-shadow: none; }
.pro-hero.is-formateur { background: var(--p2); box-shadow: none; }
.pro-hero.is-formateur .pro-hero-art i:nth-child(2) { background: var(--p3); }
.pro-hero.is-centre .pro-hero-art i:nth-child(2) { background: var(--p3); }

/* ---------- Mon compte ---------- */
.pf-cover { background: var(--p1); }
.pf-cover span:nth-child(1) { background: var(--p2); opacity: 1; }
.pf-cover span:nth-child(2) { background: var(--p3); opacity: 1; }
.compte-card:nth-of-type(4n+2) h2 .lucide, .compte-card:nth-of-type(4n+2) h3 .lucide { color: var(--p2); }
.compte-card:nth-of-type(4n+3) h2 .lucide, .compte-card:nth-of-type(4n+3) h3 .lucide { color: var(--p4); }

/* ---------- Boutons aux couleurs de chaque espace ---------- */
[data-space="centre"] .btn-primary { background: var(--p4); border-color: var(--p4); box-shadow: none; }
[data-space="centre"] .btn-outline { color: var(--p4); border-color: var(--p4); }
[data-space="formateur"] .btn-primary { background: var(--p2); border-color: var(--p2); box-shadow: none; }
[data-space="formateur"] .btn-outline { color: var(--p2); border-color: var(--p2); }
[data-space] .ft-cta .btn { background: var(--p3); border-color: var(--p3); color: var(--p-ink); }
[data-space] .btn-primary:hover { background: var(--p-ink); border-color: var(--p-ink); }

/* Tarifs : pastilles d'icône toujours lisibles */
.pt-card .pt-icon { background: var(--p1); color: #fff; }
.pt-card:nth-child(4n+2) .pt-icon { background: var(--p2); color: #fff; }
.pt-card:nth-child(4n+3) .pt-icon { background: var(--p3); color: var(--p-ink); }
.pt-card:nth-child(4n+4) .pt-icon { background: var(--p4); color: #fff; }
.pt-icon .lucide { color: inherit; stroke: currentColor; }

/* Page 404 : raccourcis (l'icône est dans un bloc) */
a.card > div:first-child:has(> .lucide) { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; background: var(--p1); color: #fff; font-size: 1.25rem !important; }
a.card:nth-of-type(4n+2) > div:first-child:has(> .lucide) { background: var(--p2); }
a.card:nth-of-type(4n+3) > div:first-child:has(> .lucide) { background: var(--p3); color: var(--p-ink); }
a.card:nth-of-type(4n+4) > div:first-child:has(> .lucide) { background: var(--p4); }