/* Habillage « permis-online.be » du site flamand (23/10/2026, Wen : « c'est censé être une copie de permis-online.be ») :
   la palette du .be (navy #15203c, bleu #2563eb, orange #ff6b35 → #f7931e), les titres en Plus Jakarta Sans 800, les cartes
   claires, le logo plaque et le pied de page pastel du .be, posés sur les composants du socle. Tout est limité à
   body.cel-habillage-be : la feuille n'agit que quand l'habillage est actif (mu-plugin pays-habillage.php). Les chiffres et
   numéros restent en Archivo Black (--cel-titre), comme les plaques du .be.
   Les sélecteurs suivent les classes du socle (cel-acc-*, cel-fm-*, cel-pied-*, por-*) : après chaque fusion du socle,
   refaire l'aperçu de l'habillage. */

/* ─── 1. Les jetons ─── */
body.cel-habillage-be {
  --cel-navy: #15203c; --cel-navy-2: #1e2c4f; --cel-bleu: #2563eb; --cel-bleu-fonce: #1e3faf;
  --cel-jaune: #ff6b35; --cel-jaune-clair: #ff9a5c; --cel-jaune-fonce: #e5571f; --cel-ambre: #c2410c;
  --por-navy: #15203c; --por-bleu: #2563eb; --por-ambre: #c2410c; --por-ic: #ff6b35;
  --por-j1: #ff8a4c; --por-j2: #ff6b35; --por-j3: #f7931e;
  --por-jaune: linear-gradient(135deg, #ff6b35, #f7931e);
  --por-ombre-j: rgba(255, 107, 53, .32);
}

/* ─── 2. Le menu : pilule orange au texte blanc ; le logo plaque (« RIJBEWIJS B » navy, « THEORIE » bleu espacé) ─── */
body.cel-habillage-be .por-tag,
body.cel-habillage-be a.por-tag { background: linear-gradient(135deg, #ff6b35, #f7931e) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(255, 107, 53, .32) !important; }
body.cel-habillage-be .por-m-cta b, body.cel-habillage-be .por-m-cta { color: #fff !important; }
body.cel-habillage-be .por-m-cta b { background: linear-gradient(135deg, #ff6b35, #f7931e) !important; box-shadow: 0 8px 20px rgba(255, 107, 53, .3) !important; }
body.cel-habillage-be .por-m-cta b .por-ico, body.cel-habillage-be .por-m-cta b svg { color: #fff !important; stroke: #fff !important; }
/* tout ce qui est orange porte un texte blanc, comme sur le .be (po-route.css) : boutons, « Volgende » de la barre du bas,
   étiquettes d'avancement, chapitres finis */
body.cel-habillage-be .por-btn, body.cel-habillage-be .por-bas-suiv, body.cel-habillage-be .por-v-cta, body.cel-habillage-be .por-m-insc,
body.cel-habillage-be .por-cta-place .pc-tb-cta, body.cel-habillage-be .por-m-cours .pc-tb-cta { color: #fff !important; }
body.cel-habillage-be .por-fil em, body.cel-habillage-be .por-etat-ok, body.cel-habillage-be .por-bas .por-etat-ok,
body.cel-habillage-be .por-jourj.por-bientot .por-jj-ic, body.cel-habillage-be .por-m-bientot .por-jj-ic,
body.cel-habillage-be .por-som-chap.por-fini .por-num, body.cel-habillage-be .por-f-chap.por-fini .por-num,
body.cel-habillage-be .por-f-chap.por-ici-c .por-f-chap-n { color: #fff; }
body.cel-habillage-be .por-bas-suiv .por-ico, body.cel-habillage-be .por-v-cta .por-ico, body.cel-habillage-be .por-btn .por-ico { stroke: #fff; }
body.cel-habillage-be .cel-logo .cel-logo-1 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .03em; color: #15203c !important; }
body.cel-habillage-be .cel-logo .cel-logo-2 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .32em; color: #1d4ed8 !important; }
body.cel-habillage-be .por-logo:hover .cel-logo-2 { color: #2563eb !important; }
body.cel-habillage-be .cel-marque { border-radius: 10px; }
body.cel-habillage-be .por-f-titre, body.cel-habillage-be .por-feuille-titre { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 800 !important; letter-spacing: -.02em !important; }

/* ─── 3. L'accueil : la grande carte claire, le titre navy au mot bleu souligné d'orange, le bouton orange ─── */
body.cel-habillage-be .cel-acc { --n: #15203c; --n2: #1e2c4f; --n3: #263a66; --j: #ff6b35; --jc: #ff9a5c; --jf: #f7931e; --b: #2563eb; --bf: #1e3faf; --t: #15203c; --g: #64748b; }
body.cel-habillage-be .cel-acc-hero { color: #15203c; background: #fff; padding: 22px 20px 6px; }
body.cel-habillage-be .cel-acc-hero > svg, body.cel-habillage-be .cel-acc-route-fond { display: none !important; }
body.cel-habillage-be .cel-acc-hero-in { padding: 46px 46px 50px; border-radius: 28px; background: radial-gradient(700px 360px at 0% 0%, rgba(99, 102, 241, .13), transparent 70%), radial-gradient(600px 300px at 100% 100%, rgba(37, 99, 235, .08), transparent 70%), linear-gradient(180deg, #f3f5ff, #f8f9ff); box-shadow: inset 0 0 0 1px rgba(21, 32, 60, .06), 0 30px 60px -40px rgba(21, 32, 60, .35); }
body.cel-habillage-be .cel-acc-badge { background: linear-gradient(135deg, #ff6b35, #f7931e); color: #fff; }
body.cel-habillage-be .cel-acc-badge-2 { background: #fff; color: #c2410c; box-shadow: inset 0 0 0 1px rgba(255, 107, 53, .35); }
body.cel-habillage-be .cel-acc-hero h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #15203c; font-size: clamp(32px, 4.1vw, 50px); line-height: 1.08; letter-spacing: -.025em; }
body.cel-habillage-be .cel-acc-gratuit { color: #2563eb; }
body.cel-habillage-be .cel-acc-gratuit::after { background: linear-gradient(90deg, #ff6b35, #f7931e); height: .1em; }
body.cel-habillage-be .cel-acc-sous { color: #334155; }
body.cel-habillage-be .cel-acc-sous b { color: #15203c; }
body.cel-habillage-be .cel-acc-preuves li { color: #334155; }
body.cel-habillage-be .cel-acc-preuves li::before { color: #fff; background: #2563eb; border-color: #2563eb; }
body.cel-habillage-be .cel-acc-btn-compte { min-height: 54px; padding: 0 26px; border-radius: 16px; background: linear-gradient(135deg, #ff6b35, #f7931e); color: #fff !important; box-shadow: 0 14px 28px rgba(255, 107, 53, .32), inset 0 -3px 0 rgba(0, 0, 0, .08); font-weight: 800; }
body.cel-habillage-be .cel-acc-btn-compte:hover { background: linear-gradient(135deg, #ff7a45, #f9a12e); }
body.cel-habillage-be .cel-acc-hero-compte > span { color: #475569; }
body.cel-habillage-be .cel-acc-hero-compte a:not(.cel-acc-btn-compte) { color: #1e3faf; }
/* la carte de la première leçon : navy, comme celle du .be */
body.cel-habillage-be .cel-acc-carte { background: linear-gradient(165deg, #1e2c55, #15203c 62%); color: #fff; box-shadow: 0 34px 70px -30px rgba(21, 32, 60, .6); }
body.cel-habillage-be .cel-acc-carte .cel-acc-k { color: rgba(255, 255, 255, .78); }
body.cel-habillage-be .cel-acc-carte-titre a { color: #fff !important; }
body.cel-habillage-be .cel-acc-carte-meta { color: #c3cde3; }
body.cel-habillage-be .cel-acc-carte-meta b { color: #4ade80; }
body.cel-habillage-be .cel-acc-signes { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
body.cel-habillage-be .cel-acc-go { background: linear-gradient(135deg, #ff6b35, #f7931e); color: #fff !important; box-shadow: 0 14px 30px rgba(255, 107, 53, .38), inset 0 -3px 0 rgba(0, 0, 0, .1); }
body.cel-habillage-be .cel-acc-go:hover { box-shadow: 0 18px 36px rgba(255, 107, 53, .48), inset 0 -3px 0 rgba(0, 0, 0, .1); }
body.cel-habillage-be .cel-acc-go-tx small { color: rgba(255, 255, 255, .88); }
body.cel-habillage-be .cel-acc-go-fl { background: #fff; color: #ff6b35; }
body.cel-habillage-be .cel-acc-carte-liens a { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .22); color: #fff !important; }
body.cel-habillage-be .cel-acc-carte-liens a:hover { border-color: #fff; }
/* les sections : surtitre bleu à trait orange, titres navy, boutons « Cursus » bleu et « Quiz » orange */
body.cel-habillage-be .cel-acc-sur { color: #2563eb; }
body.cel-habillage-be .cel-acc-sur::before { background: linear-gradient(90deg, #ff6b35, #f7931e); }
body.cel-habillage-be .cel-acc h2, body.cel-habillage-be .cel-acc-s h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #15203c; letter-spacing: -.02em; }
body.cel-habillage-be .cel-acc-b-c { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }
body.cel-habillage-be .cel-acc-b-q { background: linear-gradient(135deg, #ff6b35, #f7931e) !important; color: #fff !important; border-color: transparent !important; }
/* le programme : numéros bleu clair, chapitre choisi sur fond bleu clair bordé de bleu (comme le sommaire du .be) */
body.cel-habillage-be .cel-acc-ch-n { background: #eef3ff; color: #2563eb; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .16); }
body.cel-habillage-be .cel-acc-ch.on { background: #eef3ff; box-shadow: 0 0 0 1.5px #2563eb, 0 8px 18px rgba(37, 99, 235, .12); }
body.cel-habillage-be .cel-acc-ch.on .cel-acc-ch-n, body.cel-habillage-be .cel-acc-p-n { background: #2563eb; color: #fff; box-shadow: none; }
/* les étapes : numéros dans un carré bleu, comme « Les 6 étapes » du .be */
body.cel-habillage-be .cel-acc-etapes li::before { background: #2563eb; color: #fff; border-radius: 11px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }
/* l'examen et le bandeau final : des cartes navy arrondies posées sur la page blanche (le .be n'a aucun bandeau pleine largeur) */
body.cel-habillage-be .cel-acc-compte, body.cel-habillage-be .cel-acc-fin { background: #fff; color: #fff; overflow: visible; }
body.cel-habillage-be .cel-acc-compte { padding: 28px 0 44px; }
body.cel-habillage-be .cel-acc-fin { padding: 28px 0 60px; }
body.cel-habillage-be .cel-acc-compte > .cel-acc-in, body.cel-habillage-be .cel-acc-fin > .cel-acc-in { width: calc(100% - 40px); max-width: 1140px; border-radius: 24px; box-shadow: 0 30px 60px -32px rgba(21, 32, 60, .6); }
body.cel-habillage-be .cel-acc-compte > .cel-acc-in { padding: 46px 48px; background: radial-gradient(700px 360px at 85% 15%, rgba(255, 107, 53, .18), transparent 70%), linear-gradient(160deg, #1e2c55, #15203c 65%); }
body.cel-habillage-be .cel-acc-fin > .cel-acc-in { max-width: 1080px; padding: 46px 32px 42px; background: radial-gradient(620px 300px at 50% 0, rgba(37, 99, 235, .3), transparent 70%), radial-gradient(520px 240px at 12% 100%, rgba(255, 107, 53, .22), transparent 70%), linear-gradient(180deg, #1b2a52, #15203c); }
body.cel-habillage-be .cel-acc-compte h2, body.cel-habillage-be .cel-acc-fin h2 { color: #fff; }

/* ─── 4. Les pages faites main (contact, légales, tests, faits vérifiés) : la page dans une carte blanche sur fond gris-bleu
   (le gabarit « page » du .be), titres Plus Jakarta navy, accents bleu et orange ─── */
body.cel-habillage-be.cel-page-faite-main:not(.cel-gabarit-accueil) { background: #eef2f8; }
body.cel-habillage-be.cel-page-faite-main:not(.cel-gabarit-accueil) .cel-fm-main .cel-fm,
body.cel-habillage-be.cel-page-faite-main:not(.cel-gabarit-accueil) .cel-fm-main .cel-k { margin: 28px auto 56px; padding: 40px 48px 52px; background: #fff; border: 1px solid #e3e8f2; border-radius: 22px; box-shadow: 0 24px 48px -34px rgba(21, 32, 60, .28); }
body.cel-habillage-be .cel-fm h1, body.cel-habillage-be .cel-fm h2, body.cel-habillage-be .cel-fm h3,
body.cel-habillage-be .cel-k h1 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 800 !important; color: #15203c; letter-spacing: -.02em; }
body.cel-habillage-be .cel-fm-sur { color: #2563eb !important; }
body.cel-habillage-be .cel-fm-sur::before { background: linear-gradient(90deg, #ff6b35, #f7931e) !important; }
body.cel-habillage-be .cel-fm a { color: #1e3faf; }
body.cel-habillage-be .cel-fm-encadre { border-left-color: #2563eb !important; background: #f3f6ff !important; }
body.cel-habillage-be .cel-fm-encadre-titre { color: #1e3faf !important; }
body.cel-habillage-be .cel-fm-memo { border-left-color: #ff6b35 !important; background: #fff4ee !important; }
body.cel-habillage-be .cel-fm-memo .cel-fm-encadre-titre { color: #c2410c !important; }
/* les boutons : orange au texte blanc ; le second, blanc cerclé de navy */
body.cel-habillage-be .cel-fm-bouton, body.cel-habillage-be a.cel-fm-bouton { background: linear-gradient(135deg, #ff6b35, #f7931e); color: #fff !important; box-shadow: 0 10px 22px rgba(255, 107, 53, .3), inset 0 -2px 0 rgba(0, 0, 0, .08); }
body.cel-habillage-be .cel-fm-bouton-second, body.cel-habillage-be a.cel-fm-bouton-second { background: #fff; color: #15203c !important; box-shadow: inset 0 0 0 2px #15203c; }
/* les pages pour les IA (faits vérifiés, sources, données) : même carte blanche, surtitre bleu, note bleue */
body.cel-habillage-be.cel-k-page { background: #eef2f8; }
body.cel-habillage-be.cel-k-page main.cel-k { margin: 28px auto 56px; padding: 40px 48px 52px; background: #fff; border: 1px solid #e3e8f2; border-radius: 22px; box-shadow: 0 24px 48px -34px rgba(21, 32, 60, .28); }
body.cel-habillage-be .cel-k-sur { color: #2563eb; }
body.cel-habillage-be .cel-k-note { background: #f3f6ff; border-left-color: #2563eb; }
body.cel-habillage-be .cel-k-fait:target { border-color: #ff6b35; box-shadow: 0 0 0 4px rgba(255, 107, 53, .22); }
body.cel-habillage-be .cel-k-carte:hover { border-color: #2563eb; }

/* ─── 5. Le pied de page pastel guilloché du .be ─── */
body.cel-habillage-be .cel-pied { background: repeating-radial-gradient(circle at 10% -25%, rgba(27, 42, 107, .05) 0 1.5px, transparent 1.5px 7px), repeating-radial-gradient(circle at 92% 125%, rgba(190, 60, 120, .05) 0 1.5px, transparent 1.5px 7px), linear-gradient(115deg, #f7e3ee 0%, #fbeee2 46%, #e3ecf8 100%) !important; color: #15203c !important; border-top: 0 !important; }
body.cel-habillage-be .cel-pied-marque, body.cel-habillage-be .cel-pied-nav { border-bottom-color: rgba(21, 32, 60, .1) !important; }
body.cel-habillage-be .cel-pied-desc { color: #475569 !important; }
body.cel-habillage-be .cel-pied .cel-logo-1 { color: #15203c !important; }
body.cel-habillage-be .cel-pied .cel-logo-2 { color: #1d4ed8 !important; }
body.cel-habillage-be .cel-pied-titre, body.cel-habillage-be .cel-pied-compte-t { color: #8593ad !important; font-size: .8rem !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase; }
body.cel-habillage-be .cel-pied-col a, body.cel-habillage-be .cel-pied-col a.cel-pied-pilier { color: #475569 !important; font-weight: 500 !important; font-size: .88rem !important; }
body.cel-habillage-be .cel-pied-col a::after { content: '\203A'; margin-left: 6px; opacity: .35; font-size: 1.1em; transition: opacity .2s, transform .2s; display: inline-block; }
body.cel-habillage-be .cel-pied-col a:hover { color: #1e3faf !important; text-decoration: none !important; }
body.cel-habillage-be .cel-pied-col a:hover::after { opacity: 1; transform: translateX(3px); }
body.cel-habillage-be .cel-pied a:focus-visible, body.cel-habillage-be .cel-pied button:focus-visible { outline-color: #2563eb; }
body.cel-habillage-be .cel-pied-bas { border-top: 0 !important; }
body.cel-habillage-be .cel-pied-legal { align-items: center; }
body.cel-habillage-be .cel-pied-legal a, body.cel-habillage-be .cel-pied-cookies { color: #64748b !important; font-size: .76rem !important; }
body.cel-habillage-be .cel-pied-legal a:hover, body.cel-habillage-be .cel-pied-cookies:hover { color: #1e3faf !important; }
body.cel-habillage-be .cel-pied-copie { color: #8593ad !important; font-size: .76rem !important; }
/* la langue : la pastille blanche « NL | FR » du .be */
body.cel-habillage-be .cel-pied-legal a.cel-pied-langue { display: inline-flex; align-items: center; gap: 0; padding: 5px 14px !important; border: 1px solid #dfe5f0; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(27, 42, 107, .06); font-size: .76rem !important; font-weight: 800; letter-spacing: .05em; text-decoration: none !important; }
body.cel-habillage-be .cel-pied-legal a.cel-pied-langue .cel-langue-ici { opacity: 1; color: #94a3b8; }
body.cel-habillage-be .cel-pied-legal a.cel-pied-langue .cel-langue-ici::after { background: #dfe5f0; }
body.cel-habillage-be .cel-pied-legal a.cel-pied-langue .cel-langue-la { color: #1e3faf; }
body.cel-habillage-be .cel-pied a.cel-pied-btn { background: #fff !important; border-color: #ccd6e8 !important; color: #15203c !important; }
body.cel-habillage-be .cel-pied a.cel-pied-btn-plein { background: #15203c !important; border-color: #15203c !important; color: #fff !important; box-shadow: none !important; }
body.cel-habillage-be .cel-pied .cel-pied-chev { stroke: #8593ad !important; }
body.cel-habillage-be .cel-pied li::before { content: none !important; }

/* ─── 6. Téléphone ─── */
@media (max-width: 899px) {
  /* l'accueil : la carte claire bord à bord, comme le .be */
  body.cel-habillage-be .cel-acc-hero { padding: 0; }
  body.cel-habillage-be .cel-acc-hero-in { padding: 24px 16px 30px; border-radius: 0; box-shadow: none; }
  body.cel-habillage-be .cel-acc-hero h1 { font-size: clamp(27px, 7.2vw, 36px); line-height: 1.12; }
  body.cel-habillage-be .cel-acc-compte { padding: 20px 0 32px; }
  body.cel-habillage-be .cel-acc-fin { padding: 20px 0 40px; }
  body.cel-habillage-be .cel-acc-compte > .cel-acc-in, body.cel-habillage-be .cel-acc-fin > .cel-acc-in { width: calc(100% - 24px); padding: 30px 18px; border-radius: 20px; }
}
@media (max-width: 420px) {
  body.cel-habillage-be .cel-acc-hero-in { padding: 20px 14px 26px; }
  body.cel-habillage-be .cel-acc-hero h1 { font-size: 27px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  body.cel-habillage-be .cel-acc-hero-in { padding-top: 16px; }
  body.cel-habillage-be .cel-acc-hero h1 { font-size: 25px; }
}
@media (max-width: 640px) {
  body.cel-habillage-be.cel-page-faite-main:not(.cel-gabarit-accueil) .cel-fm-main .cel-fm,
  body.cel-habillage-be.cel-page-faite-main:not(.cel-gabarit-accueil) .cel-fm-main .cel-k,
  body.cel-habillage-be.cel-k-page main.cel-k { margin: 12px 10px 32px; padding: 24px 18px 36px; border-radius: 18px; }
  /* le pied de page replié : titres gris en capitales, traits fins entre les colonnes, chevron orange une fois ouvert */
  body.cel-habillage-be .cel-pied.cel-plie .cel-pied-col + .cel-pied-col { border-top-color: rgba(21, 32, 60, .1) !important; }
  body.cel-habillage-be .cel-pied.cel-plie .cel-pied-nav { border-bottom: 1px solid rgba(21, 32, 60, .1) !important; }
  body.cel-habillage-be .cel-pied.cel-plie .cel-pied-plier { color: #8593ad !important; }
  body.cel-habillage-be .cel-pied.cel-plie .cel-ouvert .cel-pied-chev { stroke: #ff6b35 !important; }
  body.cel-habillage-be .cel-pied-bas { align-items: center; text-align: center; }
  body.cel-habillage-be .cel-pied-legal { justify-content: center; }
}
@media (max-width: 640px) and (hover: hover) {
  body.cel-habillage-be .cel-pied.cel-plie .cel-pied-plier:hover .cel-pied-chev { stroke: #ff6b35 !important; }
}