/*
Theme Name: CFPN
Theme URI: https://cfpn.edu.bf
Author: CFPN
Description: Thème bloc du Centre de Formation Professionnelle du Numérique (Ouagadougou), construit depuis la maquette validée. Contenu 100 % en blocs natifs.
Version: 1.6.1
Requires at least: 6.6
Requires PHP: 8.0
License: Propriétaire
Text Domain: cfpn
*/
/* ---------- Adaptation WordPress (générée) : enveloppes transparentes, éléments devenus blocs ---------- */
.wp-site-blocks, .wp-block-template-part, .cfpn-haut, .cfpn-bas, .contenu-page, .wp-block-post-content, p.env { display: contents; }
:where(p[class*="est-"]) { margin: 0; }
:where(p.est-span, p.est-strong, p.est-small, p.est-b, p.est-i, p.est-em, p.est-label, p.est-time, p.est-code) { display: inline; }
:where(p.est-button) { display: inline-block; }
:where(.est-ul, .est-ol) { list-style: none; margin: 0; padding: 0; }
figure.wp-block-image.img-cls > img, figure.wp-block-image.img-cls > a > img { width: 100%; height: 100%; object-fit: inherit; object-position: inherit; border-radius: inherit; display: block; }
figure.wp-block-image > a { display: block; height: 100%; }
/* image nue dans la maquette : la figure et son lien ne comptent pas dans la mise en page */
figure.wp-block-image.img-nue, figure.wp-block-image.img-nue > a { display: contents; }
.est-a { cursor: pointer; }
.est-button { cursor: pointer; user-select: none; }
.wp-element-caption { margin: 0; }
/* ==========================================================================
   CFPN — Centre de Formation Professionnelle du Numérique
   Système de design. Couleurs : uniquement celles du logo officiel
   (indigo #312783, rouge #e30613), le blanc, et des neutres pour la lisibilité.
   Les tons « profonds » sont l'indigo et le rouge assombris au noir.
   ========================================================================== */

:root {
  --cfpn-primary: #312783;
  --cfpn-primary-deep: #201a56;
  --cfpn-secondary: #e30613;
  --cfpn-secondary-deep: #b5050f;
  --cfpn-white: #ffffff;
  --cfpn-black: #121022;

  --cfpn-texte: #585866;
  --cfpn-gris: #f5f5f9;
  --cfpn-trait: #e5e4ee;
  --cfpn-indigo-08: rgba(49, 39, 131, .08);
  --cfpn-indigo-14: rgba(49, 39, 131, .14);

  --police: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rayon: 22px;
  --rayon-sm: 12px;
  --ombre: 0 24px 60px -24px rgba(32, 26, 86, .28);
  --ombre-douce: 0 14px 34px -18px rgba(32, 26, 86, .22);
  --section: clamp(72px, 9vw, 112px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--cfpn-texte);
  background: var(--cfpn-white);
  -webkit-font-smoothing: antialiased;
}
img:not(.x-img) { max-width: 100%; height: auto; display: block; }
main, .pied { overflow-x: clip; }
:is(a, :where(.est-a)) { color: inherit; text-decoration: none; }
h1, h2, h3 { color: var(--cfpn-black); line-height: 1.2; margin: 0; hyphens: none; text-wrap: balance; }
p:not(:where([class*="est-"], .env)) { margin: 0 0 1em; }
p:not(:where([class*="est-"], .env)):last-child { margin-bottom: 0; }
:is(ul, :where(.est-ul)), :is(ol, :where(.est-ol)) { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
em { font-style: normal; color: var(--cfpn-secondary); }
:focus-visible { outline: 3px solid var(--cfpn-secondary); outline-offset: 3px; border-radius: 4px; }

.conteneur { width: min(1200px, 100% - 40px); margin-inline: auto; }
.section { padding: var(--section) 0; }
.section--grise { background: var(--cfpn-gris); }
.evitement { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--cfpn-primary); color: #fff; padding: 10px 16px; border-radius: 8px; }
.evitement:focus { left: 8px; }

.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--plein { fill: currentColor; stroke: none; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px;
  border: 2px solid transparent; border-radius: 8px;
  font: 700 13.5px/1 var(--police); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.bouton .ico { transition: transform .25s; }
.bouton:hover .ico { transform: translateX(3px); }
.bouton--rouge { background: var(--cfpn-secondary); color: #fff; }
.bouton--rouge:hover { background: var(--cfpn-secondary-deep); }
.bouton--indigo { background: var(--cfpn-primary); color: #fff; }
.bouton--indigo:hover { background: var(--cfpn-primary-deep); }
.bouton--contour { border-color: rgba(255, 255, 255, .75); color: #fff; }
.bouton--contour:hover { background: #fff; color: var(--cfpn-primary); border-color: #fff; }
.bouton--contour-sombre { border-color: var(--cfpn-primary); color: var(--cfpn-primary); }
.bouton--contour-sombre:hover { background: var(--cfpn-primary); color: #fff; }
.bouton--pilule { border-radius: 999px; min-height: 48px; padding: 0 24px; }
.bouton--large { width: 100%; }

/* ---------- Surtitres et titres ---------- */
.surtitre {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cfpn-secondary);
}
.surtitre .ico { width: 20px; height: 20px; }
.surtitre--clair { color: #fff; }
.surtitre--clair .ico { color: var(--cfpn-secondary); }
.titre-section { font-size: clamp(29px, 3.3vw, 42px); font-weight: 800; letter-spacing: -.01em; margin-bottom: 18px; }
.titre-section--clair { color: #fff; }
.titre-section--clair em {
  color: #fff; text-decoration: underline; text-decoration-color: var(--cfpn-secondary);
  text-decoration-thickness: 5px; text-underline-offset: 9px; text-decoration-skip-ink: none;
}
.entete-section { margin-bottom: 46px; }
.entete-section--centre { text-align: center; max-width: 700px; margin-inline: auto; }
.entete-section--ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.entete-section--ligne .titre-section { margin-bottom: 0; }

/* ---------- Bandeau supérieur ---------- */
.topbar { display: flex; align-items: stretch; background: var(--cfpn-primary); color: #fff; font-size: 13.5px; min-height: 46px; }
.topbar__rentree {
  display: flex; align-items: center; gap: 9px; flex: none;
  background: var(--cfpn-secondary);
  padding: 8px 32px 8px max(20px, calc((100vw - 1200px) / 2));
}
.topbar__infos { display: flex; align-items: center; justify-content: flex-end; gap: 28px; padding: 8px 0; width: auto; flex: 1; margin-right: max(20px, calc((100vw - 1200px) / 2)); margin-left: 28px; }
.topbar__infos :is(span, :where(.est-span)), .topbar__infos :is(a, :where(.est-a)) { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar__infos :is(a, :where(.est-a)):hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar__infos .ico { width: 16px; height: 16px; opacity: .85; }
.topbar__wa { font-weight: 700; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: #fff; transition: box-shadow .3s; }
.entete.defile { box-shadow: 0 10px 30px -18px rgba(32, 26, 86, .35); }
.entete__ligne { display: flex; align-items: center; gap: 28px; min-height: 88px; }
.marque { display: flex; align-items: center; gap: 12px; flex: none; }
.marque img:not(.x-img) { width: 60px; height: 60px; }
.marque__texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque__texte :is(strong, :where(.est-strong)) { font-size: 24px; font-weight: 800; color: var(--cfpn-primary); letter-spacing: .02em; }
.marque__texte :is(small, :where(.est-small)) { font-size: 10.5px; font-weight: 600; color: var(--cfpn-texte); letter-spacing: .02em; margin-top: 3px; }
.nav { margin-left: auto; }
.nav__liste { display: flex; align-items: center; gap: 0; }
.nav__liste > :is(li, :where(.est-li)) > :is(a, :where(.est-a)) {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 8px;
  font-size: 14.5px; font-weight: 600; color: var(--cfpn-black); border-radius: 8px; white-space: nowrap; transition: color .2s;
}
.nav__liste > :is(li, :where(.est-li)) > :is(a, :where(.est-a)):hover, .nav__liste > :is(li, :where(.est-li)) > :is(a, :where(.est-a)).actif { color: var(--cfpn-secondary); }
.ico--chevron { width: 15px; height: 15px; }
.nav__deroulant { position: relative; }
.sous-menu {
  position: absolute; top: calc(100% + 12px); left: -12px; min-width: 290px; padding: 12px;
  background: #fff; border-radius: 16px; box-shadow: var(--ombre); border-top: 3px solid var(--cfpn-secondary);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s;
}
.nav__deroulant:hover .sous-menu, .nav__deroulant:focus-within .sous-menu { opacity: 1; visibility: visible; transform: none; }
.sous-menu :is(a, :where(.est-a)) { display: block; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--cfpn-black); }
.sous-menu :is(a, :where(.est-a)):hover { background: var(--cfpn-indigo-08); color: var(--cfpn-primary); }
.sous-menu :is(li, :where(.est-li)):first-child :is(a, :where(.est-a)) { color: var(--cfpn-secondary); }
.entete__cta { flex: none; }
.burger { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); cursor: pointer; align-items: center; justify-content: center; }
.burger .ico { width: 24px; height: 24px; }

/* ---------- Héros ---------- */
.hero { position: relative; color: #fff; padding: 120px 0 200px; overflow: hidden; isolation: isolate; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(32, 26, 86, .94) 0%, rgba(32, 26, 86, .82) 42%, rgba(49, 39, 131, .35) 100%);
}
.hero__contenu { max-width: 1200px; }
.hero__titre { color: #fff; font-size: clamp(38px, 5.6vw, 66px); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; max-width: 720px; margin-bottom: 22px; }
.hero__texte { font-size: clamp(16px, 1.5vw, 18.5px); max-width: 590px; color: rgba(255, 255, 255, .9); margin-bottom: 34px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__rentree { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--cfpn-secondary); box-shadow: 0 0 0 0 rgba(227, 6, 19, .6); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(227, 6, 19, 0); } 100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0); } }
.credit-photo { position: absolute; right: 16px; top: 12px; margin: 0; font-size: 11px; color: rgba(255, 255, 255, .55); }

/* ---------- Atouts (cartes chevauchant le héros) ---------- */
.atouts { position: relative; z-index: 2; margin-top: -118px; }
.atouts__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.atout {
  position: relative; background: #fff; border-radius: var(--rayon); padding: 30px 26px 28px;
  border: 1px solid var(--cfpn-trait); box-shadow: var(--ombre); transition: transform .3s;
}
.atout:hover { transform: translateY(-6px); }
.atout__num { position: absolute; top: 18px; right: 22px; font-size: 42px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(49, 39, 131, .25); }
.atout__icone {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; margin-bottom: 22px;
  background: var(--cfpn-primary); color: #fff; box-shadow: 0 0 0 7px var(--cfpn-indigo-08); transition: background .3s;
}
.atout:hover .atout__icone { background: var(--cfpn-secondary); box-shadow: 0 0 0 7px rgba(227, 6, 19, .1); }
.atout__icone .ico { width: 26px; height: 26px; }
.atout__titre { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.atout p:not(:where([class*="est-"], .env)) { font-size: 14.5px; line-height: 1.6; }

/* ---------- Approche (collage) ---------- */
.apropos__grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center; }
.collage { position: relative; height: 580px; }
.collage figure { position: absolute; overflow: hidden; }
.collage img:not(.x-img) { width: 100%; height: 100%; object-fit: cover; }
.collage__a { left: 0; top: 0; width: 50%; height: 66%; border-radius: 110px 24px 110px 24px; }
.collage__b { right: 2%; top: 2%; width: 44%; aspect-ratio: 1; border-radius: 50%; padding: 10px; border: 2px dashed var(--cfpn-secondary); overflow: visible !important; }
.collage__b img:not(.x-img) { border-radius: 50%; }
.collage__c { right: 0; bottom: 0; width: 56%; height: 50%; border-radius: 24px 110px 24px 110px; border: 8px solid #fff; box-shadow: var(--ombre-douce); }
.collage__badge {
  position: absolute; left: 4%; bottom: 8%; z-index: 2; display: flex; align-items: center; gap: 14px;
  background: var(--cfpn-secondary); color: #fff; border-radius: 999px; padding: 12px 26px 12px 12px; box-shadow: var(--ombre);
}
.collage__badge-icone { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--cfpn-secondary); }
.collage__badge-icone .ico { width: 24px; height: 24px; }
.collage__badge :is(span, :where(.est-span)):last-child { display: flex; flex-direction: column; line-height: 1.25; font-size: 13px; font-weight: 600; }
.collage__badge :is(strong, :where(.est-strong)) { font-size: 20px; font-weight: 800; }
.apropos__texte > p:not(:where([class*="est-"], .env)) { max-width: 580px; }
.apropos__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 30px 0 34px; }
.apropos__points { display: grid; gap: 20px; }
.point { display: flex; gap: 14px; }
.point__icone { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); }
.point__icone .ico { width: 22px; height: 22px; }
.point h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.point p:not(:where([class*="est-"], .env)) { font-size: 14px; line-height: 1.55; }
.citation { position: relative; margin: 0; background: var(--cfpn-gris); border-radius: 18px; padding: 24px 24px 44px; font-size: 14.5px; line-height: 1.65; color: var(--cfpn-black); }
.citation__guillemet { position: absolute; right: 20px; bottom: -14px; font-size: 80px; font-weight: 800; line-height: 1; color: var(--cfpn-primary); }
.apropos__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.appel { display: flex; align-items: center; gap: 14px; }
.appel__icone { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 2px dashed var(--cfpn-primary); color: var(--cfpn-primary); }
.appel :is(span, :where(.est-span)):last-child { display: flex; flex-direction: column; line-height: 1.3; }
.appel :is(small, :where(.est-small)) { font-size: 13px; }
.appel :is(strong, :where(.est-strong)) { font-size: 17px; color: var(--cfpn-black); }

/* ---------- Bande chiffres ---------- */
.chiffres { position: relative; padding: 86px 0; color: #fff; isolation: isolate; overflow: hidden; }
.chiffres__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.chiffres::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(49, 39, 131, .9); }
.chiffres__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.chiffre { display: flex; flex-direction: column; align-items: center; }
.chiffre__icone {
  display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: 18px;
  background: var(--cfpn-secondary); color: #fff; border-radius: 34% 66% 58% 42% / 42% 38% 62% 58%;
}
.chiffre__icone .ico { width: 32px; height: 32px; }
.chiffre :is(strong, :where(.est-strong)) { font-size: clamp(34px, 3.6vw, 46px); font-weight: 800; line-height: 1.1; }
.chiffre > :is(span, :where(.est-span)):last-child { font-size: 15px; color: rgba(255, 255, 255, .85); margin-top: 6px; }

/* ---------- Cartes formation ---------- */
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -14px 0 40px; }
.filtre {
  padding: 10px 22px; border: 1.5px solid var(--cfpn-trait); border-radius: 999px; background: #fff;
  font: 600 14px var(--police); color: var(--cfpn-black); cursor: pointer; transition: .2s;
}
.filtre:hover { border-color: var(--cfpn-primary); color: var(--cfpn-primary); }
.filtre.actif { background: var(--cfpn-primary); border-color: var(--cfpn-primary); color: #fff; }
.cartes-formation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.carte-formation {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cfpn-trait);
  border-radius: var(--rayon); padding: 12px; box-shadow: var(--ombre-douce); transition: transform .3s, box-shadow .3s;
}
.carte-formation:hover { transform: translateY(-6px); box-shadow: var(--ombre); }
.carte-formation.cache { display: none; }
.carte-formation__visuel { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10.5; }
.carte-formation__visuel img:not(.x-img) { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.carte-formation:hover .carte-formation__visuel img:not(.x-img) { transform: scale(1.05); }
.etiquette { position: absolute; top: 14px; right: 14px; background: var(--cfpn-secondary); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 999px; letter-spacing: .02em; }
.carte-formation__corps { position: relative; padding: 38px 14px 18px; flex: 1; }
.carte-formation__icone {
  position: absolute; top: -30px; left: 14px; display: grid; place-items: center; width: 58px; height: 58px;
  border-radius: 50%; background: var(--cfpn-primary); color: #fff; border: 4px solid #fff;
}
.carte-formation__icone .ico { width: 24px; height: 24px; }
.carte-formation h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.carte-formation h3 :is(a, :where(.est-a)):hover { color: var(--cfpn-primary); }
.carte-formation p:not(:where([class*="est-"], .env)) { font-size: 14.5px; line-height: 1.6; }
.carte-formation__pied {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 0 14px; padding: 16px 0 8px; border-top: 1.5px dashed var(--cfpn-trait); font-size: 13.5px;
}
.carte-formation__pied :is(span, :where(.est-span)) { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--cfpn-black); }
.carte-formation__pied :is(span, :where(.est-span)) .ico { color: var(--cfpn-secondary); width: 16px; height: 16px; }
.carte-formation__pied :is(a, :where(.est-a)) { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--cfpn-secondary); }
.carte-formation__pied :is(a, :where(.est-a)) .ico { width: 16px; height: 16px; transition: transform .25s; }
.carte-formation__pied :is(a, :where(.est-a)):hover .ico { transform: translateX(3px); }

/* ---------- Pourquoi ---------- */
.pourquoi__grille { display: grid; grid-template-columns: 1.08fr .92fr; gap: 70px; align-items: center; }
.pourquoi__texte > p:not(:where([class*="est-"], .env)) { max-width: 560px; }
.avantages { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; margin-top: 34px; }
.avantages :is(li, :where(.est-li)) { display: flex; gap: 14px; }
.avantages__icone { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 14px; background: #fff; color: var(--cfpn-primary); box-shadow: var(--ombre-douce); }
.avantages__icone .ico { width: 23px; height: 23px; }
.avantages h3 { font-size: 16px; font-weight: 700; margin: 2px 0 3px; }
.avantages p:not(:where([class*="est-"], .env)) { font-size: 14px; line-height: 1.55; }
.pourquoi__visuel { position: relative; }
.pourquoi__visuel::before {
  content: ""; position: absolute; width: 62%; aspect-ratio: 1; right: -8%; top: -10%; z-index: 0;
  border-radius: 50%; border: 2px dashed rgba(49, 39, 131, .3);
}
.pourquoi__photo { position: relative; z-index: 1; border-radius: 140px 24px 140px 24px; overflow: hidden; height: 540px; }
.pourquoi__photo img:not(.x-img) { width: 100%; height: 100%; object-fit: cover; }
.certif {
  position: absolute; z-index: 2; left: -44px; bottom: 46px; display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 18px; padding: 18px 24px 18px 18px; box-shadow: var(--ombre);
}
.certif__icone { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--cfpn-secondary); color: #fff; }
.certif__icone .ico { width: 26px; height: 26px; }
.certif :is(div:not(:where([class*="est-"])), :where(.est-div)) { display: flex; flex-direction: column; line-height: 1.35; }
.certif :is(strong, :where(.est-strong)) { font-size: 16px; color: var(--cfpn-black); }
.certif :is(span, :where(.est-span)) { font-size: 13px; }

/* ---------- Parcours ---------- */
.parcours { padding-bottom: calc(var(--section) + 70px); }
.etapes { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; counter-reset: etape; }
.etapes::before { content: ""; position: absolute; top: 48px; left: 10%; right: 10%; border-top: 2px dashed rgba(49, 39, 131, .28); }
.etape { position: relative; text-align: center; }
.etape__cercle {
  position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 22px;
  border-radius: 50%; background: #fff; border: 2px solid var(--cfpn-trait); color: var(--cfpn-primary);
  box-shadow: var(--ombre-douce); transition: background .3s, color .3s, border-color .3s;
}
.etape:hover .etape__cercle { background: var(--cfpn-primary); border-color: var(--cfpn-primary); color: #fff; }
.etape__cercle .ico { width: 34px; height: 34px; }
.etape__num { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cfpn-secondary); color: #fff; font-size: 13px; font-weight: 800; border: 3px solid #fff; }
.etape h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.etape p:not(:where([class*="est-"], .env)) { font-size: 14px; line-height: 1.55; max-width: 200px; margin-inline: auto; }

/* ---------- Stage ---------- */
.stage { position: relative; background: var(--cfpn-primary); color: rgba(255, 255, 255, .88); isolation: isolate; }
.stage::before {
  content: ""; position: absolute; z-index: -1; width: 520px; aspect-ratio: 1; left: -180px; bottom: -260px;
  border-radius: 50%; border: 60px solid rgba(255, 255, 255, .04);
}
.stage__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.stage__texte { padding: 90px 0; }
.stage__texte > p:not(:where([class*="est-"], .env)) { max-width: 540px; }
.liste-coches { display: grid; gap: 12px; margin: 26px 0 34px; }
.liste-coches :is(li, :where(.est-li)) { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.liste-coches .ico { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--cfpn-secondary); color: #fff; stroke-width: 3; }
.liste-coches--claire :is(li, :where(.est-li)) { color: #fff; }
.stage__photo { margin: -70px 0; border-radius: 24px 140px 24px 140px; overflow: hidden; height: calc(100% + 140px); min-height: 560px; border: 10px solid #fff; box-shadow: var(--ombre); }
.stage__photo img:not(.x-img) { width: 100%; height: 100%; object-fit: cover; }
.stage + .section { padding-top: calc(var(--section) + 70px); }

/* ---------- Débouchés (onglets) ---------- */
.onglets__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; }
.onglet {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
  border: 1.5px solid var(--cfpn-trait); background: #fff; font: 600 14px var(--police); color: var(--cfpn-black); cursor: pointer; transition: .2s;
}
.onglet .ico { color: var(--cfpn-primary); }
.onglet:hover { border-color: var(--cfpn-primary); }
.onglet.actif { background: var(--cfpn-secondary); border-color: var(--cfpn-secondary); color: #fff; }
.onglet.actif .ico { color: #fff; }
.panneau { display: none; background: #fff; border-radius: var(--rayon); padding: 34px; box-shadow: var(--ombre-douce); }
.panneau.actif { display: block; animation: apparition .35s ease; }
@keyframes apparition { from { opacity: 0; transform: translateY(8px); } }
.metiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.metiers :is(li, :where(.est-li)) {
  display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-radius: 16px; background: var(--cfpn-gris);
  font-size: 16.5px; font-weight: 700; color: var(--cfpn-black);
}
.metiers :is(li, :where(.est-li))::before {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cfpn-primary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--cfpn-secondary); }
.lien-fleche:hover .ico { transform: translateX(3px); }
.lien-fleche .ico { transition: transform .25s; }

/* ---------- Tarifs + pré-inscription ---------- */
.inscription__grille { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.tarifs {
  position: relative; overflow: hidden; background: var(--cfpn-primary-deep); color: rgba(255, 255, 255, .85);
  border-radius: 28px; padding: 56px 110px 56px 52px;
}
.tarifs::after { content: ""; position: absolute; width: 300px; aspect-ratio: 1; right: -120px; top: -120px; border-radius: 50%; border: 44px solid rgba(227, 6, 19, .9); }
.tarifs > * { position: relative; z-index: 1; }
.tarifs__liste { margin: 26px 0 28px; display: grid; }
.tarifs__liste > :is(div:not(:where([class*="est-"])), :where(.est-div)) { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.tarifs__liste :is(dt, :where(.est-dt)) { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tarifs__liste :is(dd, :where(.est-dd)) { margin: 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; color: #fff; white-space: nowrap; }
.tarifs__infos { display: grid; gap: 12px; font-size: 14.5px; }
.tarifs__infos :is(li, :where(.est-li)) { display: flex; align-items: flex-start; gap: 10px; }
.tarifs__infos .ico { margin-top: 3px; }
.tarifs__infos .ico { color: var(--cfpn-secondary); }
.tarifs__infos :is(strong, :where(.est-strong)) { color: #fff; }
.formulaire-carte { position: relative; z-index: 2; margin-left: -70px; background: #fff; border-radius: 24px; padding: 42px; box-shadow: var(--ombre); border-top: 5px solid var(--cfpn-secondary); }
.formulaire-carte h3 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.formulaire-carte > p:not(:where([class*="est-"], .env)) { font-size: 14.5px; margin-bottom: 24px; }
.formulaire { display: grid; gap: 16px; }
.champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champ { display: grid; gap: 7px; }
.champ > :is(span, :where(.est-span)), .choix-horaire legend { font-size: 13px; font-weight: 700; color: var(--cfpn-black); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--cfpn-trait); border-radius: var(--rayon-sm);
  font: 500 15px var(--police); color: var(--cfpn-black); background: #fff; transition: border-color .2s, box-shadow .2s;
}
.champ textarea { padding: 14px 16px; min-height: 120px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 0; border-color: var(--cfpn-primary); box-shadow: 0 0 0 4px var(--cfpn-indigo-14); }
.choix-horaire { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choix-horaire legend { margin-bottom: 7px; padding: 0; }
.choix-horaire :is(label, :where(.est-label)) { position: relative; cursor: pointer; }
.choix-horaire input { position: absolute; opacity: 0; }
.choix-horaire :is(span, :where(.est-span)) {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  border: 1.5px solid var(--cfpn-trait); border-radius: var(--rayon-sm); font-weight: 600; color: var(--cfpn-black); transition: .2s;
}
.choix-horaire input:checked + :is(span, :where(.est-span)) { border-color: var(--cfpn-primary); background: var(--cfpn-indigo-08); color: var(--cfpn-primary); }
.choix-horaire input:focus-visible + :is(span, :where(.est-span)) { outline: 3px solid var(--cfpn-secondary); outline-offset: 2px; }

/* ---------- Actualités ---------- */
.actus { padding-top: 0; }
.cartes-actu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.carte-actu { background: #fff; border: 1px solid var(--cfpn-trait); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-douce); transition: transform .3s; }
.carte-actu:hover { transform: translateY(-6px); }
.carte-actu__visuel { position: relative; display: block; aspect-ratio: 16 / 10; }
.carte-actu__visuel img:not(.x-img) { width: 100%; height: 100%; object-fit: cover; }
.carte-actu__date {
  position: absolute; left: 22px; bottom: -26px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 62px; height: 66px; border-radius: 14px; background: var(--cfpn-secondary); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.1; border: 3px solid #fff;
}
.carte-actu__date :is(strong, :where(.est-strong)) { font-size: 22px; font-weight: 800; }
.carte-actu__corps { padding: 40px 24px 26px; }
.carte-actu__cat { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cfpn-secondary); margin-bottom: 8px; }
.carte-actu h3 { font-size: 18px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; }
.carte-actu h3 :is(a, :where(.est-a)):hover { color: var(--cfpn-primary); }
.carte-actu p:not(:where([class*="est-"], .env)) { font-size: 14.5px; line-height: 1.6; }
.centre-action { text-align: center; margin: 44px 0 0; }

/* ---------- Accès ---------- */
.acces { padding-bottom: var(--section); }
.acces__grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.acces__carte { border-radius: 24px; overflow: hidden; height: 440px; box-shadow: var(--ombre-douce); border: 1px solid var(--cfpn-trait); }
.acces__carte iframe { width: 100%; height: 100%; border: 0; display: block; }
.coordonnees { display: grid; gap: 18px; margin: 10px 0 30px; }
.coordonnees :is(li, :where(.est-li)) { display: flex; gap: 16px; }
.coordonnees__icone { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); }
.coordonnees__icone .ico { width: 22px; height: 22px; }
.coordonnees :is(div:not(:where([class*="est-"])), :where(.est-div)) { display: flex; flex-direction: column; line-height: 1.5; }
.coordonnees :is(small, :where(.est-small)) { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cfpn-secondary); }
.coordonnees :is(strong, :where(.est-strong)), .coordonnees :is(a, :where(.est-a)) { font-size: 16.5px; font-weight: 700; color: var(--cfpn-black); }
.coordonnees :is(a, :where(.est-a)):hover { color: var(--cfpn-primary); }
.acces__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--cfpn-primary-deep); color: rgba(255, 255, 255, .72); padding-top: 80px; font-size: 14.5px; }
.pied__grille { display: grid; grid-template-columns: 1.45fr .85fr 1.15fr 1.25fr; gap: 44px; padding-bottom: 60px; }
.marque--claire .marque__texte :is(strong, :where(.est-strong)) { color: #fff; }
.marque--claire .marque__texte :is(small, :where(.est-small)) { color: rgba(255, 255, 255, .7); }
.marque--claire img:not(.x-img) { width: 64px; height: 64px; background: #fff; border-radius: 50%; }
.pied__marque > p:not(:where([class*="est-"], .env)) { margin-top: 22px; max-width: 340px; }
.pied__agrement { font-size: 12.5px; padding: 12px 14px; border-left: 3px solid var(--cfpn-secondary); background: rgba(255, 255, 255, .05); border-radius: 0 10px 10px 0; }
.pied__titre { position: relative; color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 26px; padding-bottom: 12px; }
.pied__titre::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--cfpn-secondary); }
.pied__liens { display: grid; gap: 10px; }
.pied__liens :is(a, :where(.est-a)) { transition: color .2s, padding .2s; }
.pied__liens :is(a, :where(.est-a)):hover { color: #fff; padding-left: 4px; }
.pied__contact { display: grid; gap: 16px; margin-bottom: 26px; }
.pied__contact :is(li, :where(.est-li)) { display: flex; gap: 12px; line-height: 1.55; }
.pied__contact .ico { color: var(--cfpn-secondary); margin-top: 3px; }
.pied__contact :is(a, :where(.est-a)):hover { color: #fff; }
.pied__adresse { display: block; }
.pied__itineraire { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; font-weight: 700; color: #fff; }
.pied__itineraire .ico { width: 14px; height: 14px; margin: 0; color: var(--cfpn-secondary); }
.pied__itineraire:hover { text-decoration: underline; text-underline-offset: 3px; }
.pied__bas { border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0; font-size: 13px; }
.pied__bas .conteneur { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- WhatsApp flottant + barre mobile ---------- */
.wa-flottant {
  position: fixed; right: 22px; bottom: 22px; z-index: 40; display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 17px; border-radius: 999px; background: var(--cfpn-primary); color: #fff;
  box-shadow: 0 14px 30px -10px rgba(32, 26, 86, .6); font-weight: 700; font-size: 14px; transition: background .25s;
}
.wa-flottant .ico { width: 24px; height: 24px; }
.wa-flottant :is(span, :where(.est-span)) { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s; }
.wa-flottant:hover { background: var(--cfpn-secondary); }
.wa-flottant:hover :is(span, :where(.est-span)) { max-width: 200px; }
.barre-mobile { display: none; }

/* ==========================================================================
   Adaptatif
   ========================================================================== */
@media (max-width: 1240px) {
  .burger { display: inline-flex; }
  .entete__cta { margin-left: auto; }
  .burger { margin-left: 0; }
  .nav {
    position: fixed; inset: 0 0 0 auto; z-index: 60; width: min(360px, 88vw); margin: 0; padding: 90px 24px 30px;
    background: #fff; box-shadow: var(--ombre); overflow-y: auto; transform: translateX(105%); transition: transform .35s;
  }
  .nav.ouvert { transform: none; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liste > li > a { width: 100%; padding: 14px 10px; font-size: 16px; border-bottom: 1px solid var(--cfpn-trait); border-radius: 0; }
  .sous-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; min-width: 0; padding: 6px 0 10px 10px; }
  .sous-menu a { font-size: 14.5px; padding: 8px 10px; }
  .voile { position: fixed; inset: 0; z-index: 49; background: rgba(18, 16, 34, .5); opacity: 0; visibility: hidden; transition: .3s; }
  .voile.visible { opacity: 1; visibility: visible; }
  .nav__fermer { position: absolute; top: 22px; right: 20px; }
}
@media (min-width: 1241px) { .nav__fermer, .voile { display: none; } }

@media (max-width: 1100px) {
  .topbar__infos > :first-child { display: none; }
  .atouts__grille { grid-template-columns: repeat(2, 1fr); }
  .apropos__grille, .pourquoi__grille, .stage__grille, .acces__grille { grid-template-columns: 1fr; gap: 56px; }
  .collage { max-width: 600px; width: 100%; margin-inline: auto; height: 520px; }
  .cartes-formation, .cartes-actu { grid-template-columns: repeat(2, 1fr); }
  .pourquoi__visuel { max-width: 560px; margin-inline: auto; width: 100%; }
  .certif { left: -12px; }
  .etapes { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .etapes::before { display: none; }
  .stage__texte { padding: 80px 0 0; }
  .stage__photo { margin: 0 0 -70px; height: 420px; min-height: 0; }
  .inscription__grille { grid-template-columns: 1fr; }
  .tarifs { padding: 48px 40px 110px; }
  .formulaire-carte { margin: -70px 20px 0; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 15px; padding-bottom: 66px; }
  .conteneur { width: calc(100% - 32px); }
  .topbar { min-height: 40px; font-size: 13px; }
  .topbar__rentree { flex: 1; justify-content: center; padding: 8px 16px; }
  .topbar__infos { display: none; }
  .entete__ligne { min-height: 74px; gap: 12px; }
  .marque img:not(.x-img) { width: 50px; height: 50px; }
  .marque__texte :is(strong, :where(.est-strong)) { font-size: 21px; }
  .marque__texte :is(small, :where(.est-small)) { font-size: 9.5px; }
  .entete__cta { display: none; }
  .burger { margin-left: auto; }
  .hero { padding: 72px 0 150px; }
  .hero::after { background: linear-gradient(180deg, rgba(32, 26, 86, .9) 0%, rgba(32, 26, 86, .82) 100%); }
  .hero__actions .bouton { width: 100%; }
  .atouts { margin-top: -96px; }
  .atouts__grille { grid-template-columns: 1fr; gap: 14px; }
  .atout { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 20px 18px; }
  .atout__icone { grid-row: span 2; margin: 4px 0 0; width: 50px; height: 50px; }
  .atout__titre { font-size: 16.5px; margin-bottom: 2px; }
  .atout p:not(:where([class*="est-"], .env)) { font-size: 14px; }
  .atout__num { font-size: 30px; top: 14px; right: 16px; }
  .collage { height: 400px; }
  .collage__badge { left: 0; bottom: 4%; padding: 8px 18px 8px 8px; }
  .collage__badge-icone { width: 42px; height: 42px; }
  .apropos__duo { grid-template-columns: 1fr; }
  .chiffres { padding: 64px 0; }
  .chiffres__grille { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .chiffre__icone { width: 64px; height: 64px; }
  .cartes-formation, .cartes-actu { grid-template-columns: 1fr; }
  .filtres { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -16px; padding: 4px 16px; scrollbar-width: none; }
  .filtre { flex: none; }
  .avantages { grid-template-columns: 1fr; }
  .pourquoi__photo { height: 400px; border-radius: 90px 20px 90px 20px; }
  .certif { left: 12px; right: 12px; bottom: -30px; }
  .pourquoi__visuel { margin-bottom: 30px; }
  .etapes { grid-template-columns: 1fr; gap: 0; }
  .etapes::before { display: block; top: 0; bottom: 60px; left: 40px; right: auto; border-top: 0; border-left: 2px dashed rgba(49, 39, 131, .28); }
  .etape { display: grid; grid-template-columns: 80px 1fr; column-gap: 18px; text-align: left; padding-bottom: 26px; }
  .etape__cercle { width: 80px; height: 80px; margin: 0; grid-row: span 2; }
  .etape__cercle .ico { width: 28px; height: 28px; }
  .etape h3 { align-self: end; margin-top: 12px; }
  .etape p:not(:where([class*="est-"], .env)) { margin: 0; max-width: none; }
  .stage__photo { height: 300px; border-radius: 20px 90px 20px 90px; }
  .onglets__liste { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -16px; padding: 4px 16px; scrollbar-width: none; }
  .onglet { flex: none; }
  .panneau { padding: 22px; }
  .metiers { grid-template-columns: 1fr; gap: 10px; }
  .metiers :is(li, :where(.est-li)) { padding: 14px 16px; font-size: 15.5px; }
  .tarifs { padding: 38px 24px 100px; border-radius: 22px; }
  .tarifs::after { width: 200px; right: -90px; top: -90px; border-width: 30px; }
  .formulaire-carte { margin: -70px 10px 0; padding: 28px 20px; }
  .champ-duo { grid-template-columns: 1fr; }
  .acces__carte { height: 320px; }
  .acces__actions .bouton { width: 100%; }
  .pied { padding-top: 60px; }
  .pied__grille { grid-template-columns: 1fr; gap: 36px; }
  .wa-flottant { display: none; }
  .barre-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr 1.2fr;
    background: #fff; box-shadow: 0 -10px 30px -16px rgba(32, 26, 86, .4); height: 66px;
  }
  .barre-mobile :is(a, :where(.est-a)) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--cfpn-primary); }
  .barre-mobile :is(a, :where(.est-a)) .ico { width: 22px; height: 22px; }
  .barre-mobile__cta { background: var(--cfpn-secondary); color: #fff !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Interface numérique et animations
   (réseau animé inspiré du maillage du logo, cartes d'interface, défilant,
   apparitions au défilement, lumière sous la souris)
   ========================================================================== */

/* Barre de progression de lecture */
.progression { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; background: var(--cfpn-secondary); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* Facebook dans le bandeau et le pied */
.topbar__fb { display: inline-grid !important; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.topbar__fb:hover { background: var(--cfpn-secondary); text-decoration: none !important; }
.topbar__fb .ico { opacity: 1 !important; }
.pied__social { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; }
.pied__social:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Réseau animé */
.reseau { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Ligne « Devenez … » */
.hero__machine { font-size: clamp(19px, 2.1vw, 26px); font-weight: 700; color: #fff; margin: -6px 0 18px; min-height: 1.4em; }
.machine { color: #fff; background: rgba(227, 6, 19, .9); padding: 2px 10px; border-radius: 6px; white-space: nowrap; }
.machine::after { content: ""; display: inline-block; width: 3px; height: 1em; margin-left: 4px; vertical-align: -2px; background: #fff; animation: curseur 1s steps(1) infinite; }
@keyframes curseur { 50% { opacity: 0; } }

/* Cartes d'interface flottantes du héros */
.hero__ui { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.puce-ui {
  position: absolute; width: 230px; padding: 14px 16px 16px; border-radius: 16px; color: #fff;
  background: rgba(32, 26, 86, .55); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55); animation: flotte 7s ease-in-out infinite alternate;
}
.puce-ui__tete { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.puce-ui__tete .ico { width: 16px; height: 16px; color: var(--cfpn-secondary); }
.puce-ui__tete :is(b, :where(.est-b)) { margin-left: auto; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--cfpn-secondary); }
.puce-ui--video { right: 7%; top: 13%; }
.puce-ui--code { right: 27%; top: 49%; width: 210px; animation-delay: -2.5s; }
.puce-ui--palette { right: 5%; top: 57%; width: 200px; animation-delay: -4.5s; }
@keyframes flotte { from { transform: translateY(0); } to { transform: translateY(-16px); } }
.pistes { position: relative; display: grid; gap: 6px; }
.pistes :is(span, :where(.est-span)) { height: 10px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .75) 0 34px, transparent 34px 40px); }
.pistes :is(span, :where(.est-span)):nth-child(2) { background: repeating-linear-gradient(90deg, var(--cfpn-secondary) 0 52px, transparent 52px 58px); margin-left: 18px; }
.pistes :is(span, :where(.est-span)):nth-child(3) { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 22px, transparent 22px 26px); margin-right: 30px; }
.pistes :is(i, :where(.est-i)) { position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; background: #fff; box-shadow: 0 0 10px #fff; animation: lecture 4s linear infinite; }
.pistes :is(i, :where(.est-i))::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 2px; background: var(--cfpn-secondary); }
@keyframes lecture { to { left: 100%; } }
.lignes-code { display: grid; gap: 7px; }
.lignes-code :is(span, :where(.est-span)) { display: block; height: 7px; margin-left: var(--x, 0); border-radius: 4px; background: rgba(255, 255, 255, .8); width: 0; animation: frappe 6s infinite; }
.lignes-code :is(span, :where(.est-span)):nth-child(2n) { background: var(--cfpn-secondary); }
.lignes-code :is(span, :where(.est-span)):nth-child(2) { animation-delay: .5s; }
.lignes-code :is(span, :where(.est-span)):nth-child(3) { animation-delay: 1s; }
.lignes-code :is(span, :where(.est-span)):nth-child(4) { animation-delay: 1.5s; }
.lignes-code :is(span, :where(.est-span)):nth-child(5) { animation-delay: 2s; }
@keyframes frappe { 0% { width: 0; } 15%, 85% { width: var(--l); } 100% { width: 0; } }
.nuancier { display: flex; gap: 10px; }
.nuancier :is(span, :where(.est-span)) { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); animation: nuance 4s ease-in-out infinite; }
.nuancier :is(span, :where(.est-span)):nth-child(1) { background: var(--cfpn-primary); }
.nuancier :is(span, :where(.est-span)):nth-child(2) { background: var(--cfpn-secondary); animation-delay: .4s; }
.nuancier :is(span, :where(.est-span)):nth-child(3) { background: #fff; animation-delay: .8s; }
.nuancier :is(span, :where(.est-span)):nth-child(4) { background: var(--cfpn-primary-deep); animation-delay: 1.2s; }
@keyframes nuance { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } }

/* Bandeau défilant des filières */
.defilant { background: var(--cfpn-secondary); color: #fff; overflow: hidden; padding: 20px 0; }
.defilant__piste { display: flex; width: max-content; animation: defile 38s linear infinite; }
.defilant:hover .defilant__piste { animation-play-state: paused; }
.defilant__liste { display: flex; flex: none; }
.defilant__liste :is(li, :where(.est-li)) { display: flex; align-items: center; gap: 34px; padding-right: 34px; font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.defilant__liste :is(li, :where(.est-li))::after {
  content: ""; width: 22px; height: 22px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 2.9 6.26 6.85.7-5.13 4.6 1.45 6.74L12 16.84 5.93 20.3l1.45-6.74L2.25 8.96l6.85-.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 2.9 6.26 6.85.7-5.13 4.6 1.45 6.74L12 16.84 5.93 20.3l1.45-6.74L2.25 8.96l6.85-.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.defilant__liste :is(li, :where(.est-li)).contour { color: transparent; -webkit-text-stroke: 1.5px #fff; }
@keyframes defile { to { transform: translateX(-50%); } }

/* Apparitions au défilement (classes posées par app.js) */
.anim { opacity: 0; transform: translateY(32px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--delai, 0s); }
.anim--gauche { transform: translateX(-40px); }
.anim--droite { transform: translateX(40px); }
.anim--zoom { transform: scale(.94); }
.anim.vu { opacity: 1; transform: none; }

/* Lumière qui suit la souris + légère inclinaison */
.lumiere { position: relative; }
.lumiere::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(49, 39, 131, .12), transparent 45%);
}
.lumiere:hover::after { opacity: 1; }
.lumiere.incline { transition: transform .15s ease-out, box-shadow .3s; }

/* Boutons : reflet au survol */
.bouton { position: relative; overflow: hidden; isolation: isolate; }
.bouton::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s;
}
.bouton:hover::before { left: 120%; }

/* Anneaux en pointillés qui tournent */
.collage__b { border: 0; }
.collage__b::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--cfpn-secondary); animation: tourne 40s linear infinite; }
.pourquoi__visuel::before { animation: tourne 60s linear infinite; }
.appel__icone { position: relative; border-color: transparent; }
.appel__icone::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px dashed var(--cfpn-primary); animation: tourne 14s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Parcours qui s'allume étape par étape */
.etapes::after { content: ""; position: absolute; top: 48px; left: 10%; right: 10%; border-top: 2px solid var(--cfpn-secondary); transform-origin: 0 50%; transform: scaleX(0); transition: transform 2.4s cubic-bezier(.4, 0, .2, 1); }
.etapes.vu::after { transform: scaleX(1); }
.etape__cercle { z-index: 1; transition: background .5s, color .5s, border-color .5s, box-shadow .5s; }
.etape.allume .etape__cercle { background: var(--cfpn-primary); border-color: var(--cfpn-primary); color: #fff; box-shadow: 0 0 0 8px var(--cfpn-indigo-08), var(--ombre-douce); }

/* Orientation : quelle formation est faite pour vous ? */
.orientation__grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: 28px; align-items: stretch; }
.choix-passion { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.passion {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px; text-align: left;
  border: 1.5px solid var(--cfpn-trait); border-radius: 18px; background: #fff; cursor: pointer;
  font: 500 15px/1.45 var(--police); color: var(--cfpn-texte); transition: border-color .25s, transform .25s, box-shadow .25s;
}
.passion :is(strong, :where(.est-strong)) { display: block; color: var(--cfpn-black); font-weight: 700; }
.passion:hover { border-color: var(--cfpn-primary); transform: translateY(-3px); box-shadow: var(--ombre-douce); }
.passion__icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); transition: background .25s, color .25s; }
.passion__icone .ico { width: 24px; height: 24px; }
.passion.actif { border-color: var(--cfpn-secondary); box-shadow: 0 0 0 4px rgba(227, 6, 19, .12), var(--ombre-douce); }
.passion.actif .passion__icone { background: var(--cfpn-secondary); color: #fff; }
.resultats { position: relative; isolation: isolate; overflow: hidden; border-radius: 26px; background: var(--cfpn-primary-deep); color: rgba(255, 255, 255, .85); padding: 44px; }
.resultat { display: none; }
.resultat.actif { display: block; animation: resultat .55s cubic-bezier(.2, .7, .2, 1); }
@keyframes resultat { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }
.resultat__label { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.resultat h3 { color: #fff; font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; margin-bottom: 14px; }
.resultat__sous { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin: 22px 0 12px; }
.resultat__metiers { display: grid; gap: 10px; margin-bottom: 30px; }
.resultat__metiers :is(li, :where(.est-li)) { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: #fff; font-weight: 700; animation: metier .5s both; }
.resultat__metiers :is(li, :where(.est-li)):nth-child(2) { animation-delay: .12s; }
.resultat__metiers :is(li, :where(.est-li)):nth-child(3) { animation-delay: .24s; }
@keyframes metier { from { opacity: 0; transform: translateX(-14px); } }
.resultat__metiers :is(li, :where(.est-li))::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cfpn-secondary); box-shadow: 0 0 0 4px rgba(227, 6, 19, .25); }
.resultat__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1100px) {
  .hero__ui { display: none; }
  .orientation__grille { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .choix-passion { gap: 10px; }
  .passion { padding: 16px 14px; font-size: 14px; gap: 10px; }
  .passion__icone { width: 40px; height: 40px; }
  .resultats { padding: 30px 22px; }
  .resultat__actions .bouton { width: 100%; }
  .defilant { padding: 14px 0; }
  .etapes::after { display: none; }
  .topbar__fb { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1; transform: none; }
  .lignes-code :is(span, :where(.est-span)) { width: var(--l); }
}

/* ==========================================================================
   Pages intérieures
   ========================================================================== */
.cache, [hidden] { display: none !important; }

/* ---------- Bandeau de page ---------- */
.bandeau-page { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 90px 0 96px; }
.bandeau-page__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.bandeau-page::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(32, 26, 86, .95) 0%, rgba(32, 26, 86, .86) 50%, rgba(49, 39, 131, .55) 100%); }
.bandeau-page__titre { color: #fff; font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; max-width: 820px; margin-bottom: 18px; }
.bandeau-page__texte { font-size: clamp(16px, 1.4vw, 18px); max-width: 640px; color: rgba(255, 255, 255, .9); }
.bandeau-page .hero__actions { margin-top: 30px; }
.bandeau-page--article .bandeau-page__titre { font-size: clamp(30px, 3.8vw, 46px); }
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .75); margin-bottom: 26px; }
.fil-ariane :is(a, :where(.est-a)):hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fil-ariane [aria-current] { color: #fff; }
.faits { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.faits :is(li, :where(.est-li)) { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); font-size: 14px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.faits .ico { color: var(--cfpn-secondary); }

/* ---------- Sous-navigation (fiche formation) ---------- */
.sous-nav { position: sticky; top: 88px; z-index: 30; background: #fff; border-bottom: 1px solid var(--cfpn-trait); box-shadow: 0 10px 24px -20px rgba(32, 26, 86, .4); }
.sous-nav__liste { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sous-nav__liste :is(a, :where(.est-a)) { position: relative; flex: none; padding: 17px 14px; font-size: 14px; font-weight: 600; color: var(--cfpn-black); white-space: nowrap; }
.sous-nav__liste :is(a, :where(.est-a))::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--cfpn-secondary); transform: scaleX(0); transition: transform .3s; }
.sous-nav__liste :is(a, :where(.est-a)):hover, .sous-nav__liste :is(a, :where(.est-a)).actif { color: var(--cfpn-secondary); }
.sous-nav__liste :is(a, :where(.est-a)).actif::after { transform: scaleX(1); }

/* ---------- Fiche formation ---------- */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; padding: 70px 0 var(--section); }
.bloc-fiche { padding: 46px 0; border-bottom: 1px solid var(--cfpn-trait); scroll-margin-top: 160px; }
.bloc-fiche:first-child { padding-top: 0; }
.bloc-fiche:last-child { border-bottom: 0; }
.bloc-fiche .titre-section { font-size: clamp(26px, 2.6vw, 34px); }
.bloc-fiche--stage { position: relative; isolation: isolate; overflow: hidden; margin: 46px 0; padding: 46px 44px; border: 0; border-radius: 26px; background: var(--cfpn-primary); color: rgba(255, 255, 255, .88); }
.objectifs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.objectifs :is(li, :where(.est-li)) { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border-radius: 18px; background: var(--cfpn-gris); }
.objectifs :is(li, :where(.est-li)) :is(span, :where(.est-span)) { flex: none; font-size: 30px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--cfpn-secondary); }
.objectifs :is(li, :where(.est-li)) p:not(:where([class*="est-"], .env)) { margin: 0; font-weight: 600; color: var(--cfpn-black); line-height: 1.5; }
.competences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.competences :is(li, :where(.est-li)) { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--cfpn-trait); font-weight: 700; font-size: 15px; color: var(--cfpn-black); transition: border-color .25s, transform .25s; }
.competences :is(li, :where(.est-li)):hover { border-color: var(--cfpn-primary); transform: translateY(-2px); }
.competences .ico { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--cfpn-primary); color: #fff; stroke-width: 3; }
.accordeons { display: grid; gap: 12px; margin: 22px 0; }
.accordeon { border: 1.5px solid var(--cfpn-trait); border-radius: 16px; background: #fff; transition: border-color .25s, box-shadow .25s; }
.accordeon[open] { border-color: var(--cfpn-primary); box-shadow: var(--ombre-douce); }
.accordeon summary { display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 700; color: var(--cfpn-black); }
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon__num { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); font-size: 14px; font-weight: 800; }
.accordeon[open] .accordeon__num { background: var(--cfpn-secondary); color: #fff; }
.accordeon__titre { flex: 1; }
.accordeon__chevron { transition: transform .3s; color: var(--cfpn-primary); }
.accordeon[open] .accordeon__chevron { transform: rotate(180deg); }
.accordeon p:not(:where([class*="est-"], .env)) { margin: 0; padding: 0 22px 20px 76px; animation: apparition .35s ease; }
.a-completer { padding: 14px 18px; border-radius: 12px; border: 1.5px dashed rgba(227, 6, 19, .45); background: rgba(227, 6, 19, .04); font-size: 14.5px; color: var(--cfpn-black); }
.a-completer :is(strong, :where(.est-strong)) { color: var(--cfpn-secondary); }
.a-completer--sombre { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .35); }
.a-completer--sombre :is(strong, :where(.est-strong)) { color: #fff; }
.a-completer--centre { max-width: 640px; margin: 34px auto 0; text-align: center; }
.note { font-size: 13.5px; color: var(--cfpn-texte); margin-top: 16px; }
.etapes-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 24px 0 28px; counter-reset: x; }
.etapes-mini :is(li, :where(.est-li)) { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; border-radius: 14px; background: var(--cfpn-gris); font-size: 13.5px; font-weight: 700; color: var(--cfpn-black); line-height: 1.35; }
.etapes-mini :is(span, :where(.est-span)) { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cfpn-primary); color: #fff; font-size: 13px; }
.galerie { display: grid; gap: 16px; }
.galerie--trois { grid-template-columns: repeat(3, 1fr); }
.galerie--mosaique { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 220px; }
.galerie--mosaique .galerie__item:first-child { grid-row: span 2; }
.galerie--mosaique .galerie__item:last-child { grid-column: span 2; }
.galerie__item { position: relative; overflow: hidden; border-radius: 18px; background: var(--cfpn-gris); }
.galerie--trois .galerie__item { aspect-ratio: 4 / 3.2; }
.galerie__item img:not(.x-img) { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.galerie__item:hover img:not(.x-img) { transform: scale(1.06); }
.galerie__item figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: #fff;
  background: rgba(32, 26, 86, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(8px); opacity: 0; transition: .3s;
}
.galerie__item:hover figcaption, .galerie__item:focus-visible figcaption { transform: none; opacity: 1; }
.fiche__aside { position: sticky; top: 168px; }
.carte-bref { position: relative; background: #fff; border-radius: 24px; padding: 28px; box-shadow: var(--ombre); border-top: 5px solid var(--cfpn-secondary); }
.carte-bref__titre { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: var(--cfpn-black); margin-bottom: 14px; }
.carte-bref__titre .ico { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--cfpn-primary); color: #fff; }
.bref { margin: 0 0 22px; }
.bref > :is(div:not(:where([class*="est-"])), :where(.est-div)) { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--cfpn-trait); font-size: 14px; }
.bref :is(dt, :where(.est-dt)) { color: var(--cfpn-texte); }
.bref :is(dd, :where(.est-dd)) { margin: 0; font-weight: 700; color: var(--cfpn-black); text-align: right; }
.carte-bref__contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.carte-bref__contacts :is(a, :where(.est-a)) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 8px; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); font-weight: 700; font-size: 14px; transition: background .2s, color .2s; }
.carte-bref__contacts :is(a, :where(.est-a)):hover { background: var(--cfpn-primary); color: #fff; }

/* ---------- Bande d'appel à l'action ---------- */
.appel-action { position: relative; isolation: isolate; overflow: hidden; background: var(--cfpn-primary); color: rgba(255, 255, 255, .88); padding: 76px 0; }
.appel-action::before { content: ""; position: absolute; z-index: -1; width: 460px; aspect-ratio: 1; right: -140px; top: -200px; border-radius: 50%; border: 56px solid rgba(227, 6, 19, .9); }
.appel-action__grille { display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items: center; }
.appel-action__grille p:not(:where([class*="est-"], .env)) { max-width: 620px; }
.appel-action__boutons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; align-items: center; }
.appel-action__tel { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; padding: 8px 4px; }

/* ---------- Formations : cadre commun ---------- */
.commun__grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.commun__carte { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 14px; border-radius: 20px; background: #fff; box-shadow: var(--ombre-douce); }
.commun__icone { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; background: var(--cfpn-primary); color: #fff; box-shadow: 0 0 0 6px var(--cfpn-indigo-08); }
.commun__carte :is(strong, :where(.est-strong)) { font-size: 16.5px; color: var(--cfpn-black); line-height: 1.3; }
.commun__carte :is(span, :where(.est-span)):last-child { font-size: 13.5px; }

/* ---------- À propos ---------- */
.mention-agrement { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--cfpn-gris); border-left: 3px solid var(--cfpn-secondary); font-size: 14px; font-weight: 600; color: var(--cfpn-black); }
.mention-agrement .ico { color: var(--cfpn-secondary); margin-top: 2px; }
.duo-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.carte-mv { position: relative; isolation: isolate; overflow: hidden; padding: 44px; border-radius: 26px; background: #fff; box-shadow: var(--ombre-douce); }
.carte-mv h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; margin-bottom: 14px; }
.carte-mv__icone { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 22px; border-radius: 18px; background: var(--cfpn-secondary); color: #fff; }
.carte-mv__icone .ico { width: 28px; height: 28px; }
.carte-mv--sombre { background: var(--cfpn-primary-deep); color: rgba(255, 255, 255, .85); }
.carte-mv--sombre h2 { color: #fff; }
.chronologie { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.chronologie::before { content: ""; position: absolute; top: 15px; left: 0; right: 0; border-top: 2px dashed rgba(49, 39, 131, .28); }
.chronologie__etape { position: relative; padding-top: 44px; }
.chronologie__etape::before { content: ""; position: absolute; top: 6px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--cfpn-secondary); box-shadow: 0 0 0 6px rgba(227, 6, 19, .15); }
.chronologie__etape--a-venir::before { background: #fff; border: 2px dashed var(--cfpn-primary); box-shadow: none; }
.chronologie__date { display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); font-size: 13px; font-weight: 800; }
.chronologie__etape h3 { font-size: 19px; margin-bottom: 8px; }
.valeurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.valeur { padding: 30px 26px; border-radius: 22px; background: #fff; box-shadow: var(--ombre-douce); transition: transform .3s; }
.valeur:hover { transform: translateY(-6px); }
.valeur__icone { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: var(--cfpn-primary); color: #fff; box-shadow: 0 0 0 7px var(--cfpn-indigo-08); }
.valeur h3 { font-size: 18px; margin-bottom: 8px; }
.valeur p:not(:where([class*="est-"], .env)) { font-size: 14.5px; }
.equipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 980px; margin: 0 auto; }
.membre { text-align: center; padding: 34px 24px; border-radius: 22px; background: #fff; box-shadow: var(--ombre-douce); }
.membre__avatar { display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 18px; border-radius: 50%; background: var(--cfpn-primary); color: #fff; font-size: 34px; font-weight: 800; box-shadow: 0 0 0 8px var(--cfpn-indigo-08); outline: 2px dashed var(--cfpn-secondary); outline-offset: 12px; }
.membre__avatar .ico { width: 40px; height: 40px; }
.membre h3 { font-size: 18px; margin-bottom: 4px; }
.membre p:not(:where([class*="est-"], .env)) { font-size: 14px; color: var(--cfpn-secondary); font-weight: 700; }
.membre--a-completer .membre__avatar { background: var(--cfpn-gris); color: var(--cfpn-primary); }
.membre--a-completer p:not(:where([class*="est-"], .env)) { color: var(--cfpn-texte); font-weight: 500; }

/* ---------- Pédagogie ---------- */
.intro-large { max-width: 980px; text-align: center; }
.intro-large__texte { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; line-height: 1.45; color: var(--cfpn-black); margin: 0; }
.piliers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pilier { position: relative; padding: 30px 24px; border-radius: 22px; background: #fff; box-shadow: var(--ombre-douce); overflow: hidden; }
.pilier__num { position: absolute; top: 16px; right: 20px; font-size: 38px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(49, 39, 131, .22); }
.pilier__icone { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; border-radius: 16px; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); transition: background .3s, color .3s; }
.pilier:hover .pilier__icone { background: var(--cfpn-secondary); color: #fff; }
.pilier__icone .ico { width: 26px; height: 26px; }
.pilier h3 { font-size: 17px; margin-bottom: 8px; }
.pilier p:not(:where([class*="est-"], .env)) { font-size: 14px; line-height: 1.6; }
.seance { display: grid; gap: 14px; margin-top: 28px; }
.seance :is(li, :where(.est-li)) { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.seance :is(li, :where(.est-li)) > :is(span, :where(.est-span)) { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--cfpn-secondary); color: #fff; font-weight: 800; }
.seance :is(strong, :where(.est-strong)) { display: block; color: #fff; font-size: 16px; }

/* ---------- Admission ---------- */
.profils { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.profil { text-align: center; padding: 32px 22px; border-radius: 22px; border: 1.5px solid var(--cfpn-trait); transition: border-color .3s, transform .3s; }
.profil:hover { border-color: var(--cfpn-primary); transform: translateY(-5px); }
.profil__icone { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; background: var(--cfpn-secondary); color: #fff; border-radius: 34% 66% 58% 42% / 42% 38% 62% 58%; }
.profil__icone .ico { width: 28px; height: 28px; }
.profil h3 { font-size: 18px; margin-bottom: 6px; }
.profil p:not(:where([class*="est-"], .env)) { font-size: 14.5px; }
.infos-cles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.info-cle { padding: 30px; border-radius: 22px; background: #fff; box-shadow: var(--ombre-douce); }
.info-cle__label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cfpn-secondary); margin-bottom: 8px; }
.info-cle :is(strong, :where(.est-strong)) { display: block; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; color: var(--cfpn-black); line-height: 1.15; margin-bottom: 8px; }
.info-cle :is(strong, :where(.est-strong)).info-cle__date { font-size: clamp(21px, 2vw, 25px); }
.info-cle p:not(:where([class*="est-"], .env)) { font-size: 14px; }
.info-cle--accent { background: var(--cfpn-primary); color: rgba(255, 255, 255, .85); }
.info-cle--accent :is(strong, :where(.est-strong)) { color: #fff; }
.info-cle--accent .info-cle__label { color: #fff; }

.assistant-cadre { display: grid; grid-template-columns: 300px minmax(0, 1fr); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--ombre); }
.assistant__aside { position: relative; isolation: isolate; overflow: hidden; padding: 40px 30px; background: var(--cfpn-primary-deep); color: rgba(255, 255, 255, .75); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.etapes-assistant { display: grid; gap: 6px; }
.etapes-assistant :is(li, :where(.est-li)) { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 0; font-weight: 600; font-size: 14.5px; transition: color .3s; }
.etapes-assistant :is(li, :where(.est-li)) :is(span, :where(.est-span)) { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); font-weight: 800; transition: .3s; }
.etapes-assistant :is(li, :where(.est-li)):not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 46px; height: 14px; border-left: 2px dashed rgba(255, 255, 255, .25); }
.etapes-assistant :is(li, :where(.est-li)).actif { color: #fff; }
.etapes-assistant :is(li, :where(.est-li)).actif :is(span, :where(.est-span)) { background: var(--cfpn-secondary); border-color: var(--cfpn-secondary); color: #fff; box-shadow: 0 0 0 6px rgba(227, 6, 19, .25); }
.etapes-assistant :is(li, :where(.est-li)).fait :is(span, :where(.est-span)) { background: #fff; border-color: #fff; color: var(--cfpn-primary); }
.assistant__aide { display: grid; gap: 8px; font-size: 14px; }
.assistant__aide p:not(:where([class*="est-"], .env)) { margin: 0 0 4px; font-weight: 700; color: #fff; }
.assistant__aide :is(a, :where(.est-a)) { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.assistant__aide :is(a, :where(.est-a)):hover { text-decoration: underline; text-underline-offset: 3px; }
.assistant { position: relative; padding: 44px 46px 40px; }
.assistant__barre { height: 6px; border-radius: 6px; background: var(--cfpn-gris); margin-bottom: 34px; overflow: hidden; }
.assistant__barre :is(span, :where(.est-span)) { display: block; height: 100%; width: 20%; border-radius: 6px; background: var(--cfpn-secondary); transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.assistant__etape { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.assistant__etape.actif { display: grid; gap: 16px; animation: resultat .45s cubic-bezier(.2, .7, .2, 1); }
.assistant legend { padding: 0; margin-bottom: 20px; font-size: clamp(21px, 2vw, 26px); font-weight: 800; color: var(--cfpn-black); }
.assistant legend :is(span, :where(.est-span)) { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cfpn-secondary); margin-bottom: 6px; }
.choix-formation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.choix-formation :is(label, :where(.est-label)), .choix-moment :is(label, :where(.est-label)) { position: relative; cursor: pointer; }
.choix-formation input, .choix-moment input { position: absolute; opacity: 0; }
.choix-formation :is(span, :where(.est-span)) {
  display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px 18px; border: 1.5px solid var(--cfpn-trait); border-radius: 16px;
  font-weight: 700; color: var(--cfpn-black); line-height: 1.35; transition: .25s;
}
.choix-formation .ico, .choix-moment .ico { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); transition: .25s; }
.choix-formation :is(label, :where(.est-label)):hover :is(span, :where(.est-span)), .choix-moment :is(label, :where(.est-label)):hover :is(span, :where(.est-span)) { border-color: var(--cfpn-primary); }
.choix-formation input:checked + :is(span, :where(.est-span)), .choix-moment input:checked + :is(span, :where(.est-span)) { border-color: var(--cfpn-secondary); box-shadow: 0 0 0 4px rgba(227, 6, 19, .12); }
.choix-formation input:checked + :is(span, :where(.est-span)) .ico, .choix-moment input:checked + :is(span, :where(.est-span)) .ico { background: var(--cfpn-secondary); color: #fff; }
.choix-formation input:focus-visible + :is(span, :where(.est-span)), .choix-moment input:focus-visible + :is(span, :where(.est-span)) { outline: 3px solid var(--cfpn-secondary); outline-offset: 2px; }
.choix-moment { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choix-moment :is(span, :where(.est-span)) { display: flex; flex-direction: column; gap: 6px; padding: 26px 22px; border: 1.5px solid var(--cfpn-trait); border-radius: 18px; transition: .25s; }
.choix-moment :is(strong, :where(.est-strong)) { font-size: 19px; color: var(--cfpn-black); margin-top: 8px; }
.choix-moment :is(small, :where(.est-small)) { font-size: 14px; }
.recap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 6px; }
.recap > :is(div:not(:where([class*="est-"])), :where(.est-div)) { padding: 14px 16px; border-radius: 14px; background: var(--cfpn-gris); }
.recap :is(dt, :where(.est-dt)) { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cfpn-secondary); }
.recap :is(dd, :where(.est-dd)) { margin: 4px 0 0; font-weight: 700; color: var(--cfpn-black); }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.case input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cfpn-primary); }
.assistant__erreur { display: none; margin: 0; padding: 10px 14px; border-radius: 10px; background: rgba(227, 6, 19, .07); color: var(--cfpn-secondary); font-weight: 700; font-size: 14px; }
.assistant__groupe { margin: 6px 0 -4px; padding-top: 14px; border-top: 1px solid rgba(49, 39, 131, .12); color: var(--cfpn-primary, #312783); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.erreur .assistant__erreur, .assistant__erreur.visible { display: block; animation: secousse .4s; }
@keyframes secousse { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.champ.invalide input, .champ.invalide select, .champ.invalide textarea { border-color: var(--cfpn-secondary); }
.assistant__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--cfpn-trait); }
.assistant__nav .assistant__suiv, .assistant__nav .assistant__envoyer { margin-left: auto; }
.ico--retour { transform: rotate(180deg); }
.bouton:hover .ico--retour { transform: rotate(180deg) translateX(3px); }
.assistant__confirmation { text-align: center; padding: 20px 0; }
.assistant__confirmation.actif { display: block; }
.assistant__confirmation h3 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 12px; }
.assistant__confirmation p:not(:where([class*="est-"], .env)) { max-width: 520px; margin-inline: auto; }
.assistant__confirmation .bouton { margin-top: 10px; }
.coche-animee { display: block; width: 92px; height: 92px; margin: 0 auto 22px; }
.coche-animee svg { width: 100%; height: 100%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.coche-animee circle { stroke: var(--cfpn-primary); stroke-dasharray: 152; stroke-dashoffset: 152; animation: trace .7s .1s forwards; }
.coche-animee path { stroke: var(--cfpn-secondary); stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: trace .45s .7s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.faq-grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.faq-grille .accordeons { margin: 0; }
.faq-grille .accordeon p:not(:where([class*="est-"], .env)) { padding-left: 22px; }

/* ---------- Vie du CFPN : galerie + visionneuse ---------- */
.galerie--vie { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; grid-auto-flow: dense; }
.galerie--vie .galerie__item { cursor: zoom-in; }
.galerie__item--haut { grid-row: span 2; }
.galerie__item--large { grid-column: span 2; grid-row: span 2; }
.galerie__vide { display: none; text-align: center; padding: 40px 20px; border-radius: 18px; border: 1.5px dashed var(--cfpn-trait); font-weight: 600; }
.galerie__vide.visible { display: block; }
.visionneuse { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; gap: 10px; padding: 30px; background: rgba(18, 16, 34, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: apparition .3s; }
.visionneuse[hidden] { display: none; }
.visionneuse figure { margin: 0; text-align: center; }
.visionneuse img:not(.x-img) { max-height: 80vh; width: auto; margin: 0 auto; border-radius: 16px; }
.visionneuse figcaption { color: #fff; font-weight: 700; margin-top: 14px; }
.visionneuse :is(button, :where(.est-button)) { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background .2s; }
.visionneuse :is(button, :where(.est-button)):hover { background: var(--cfpn-secondary); }
.visionneuse__fermer { position: absolute; top: 20px; right: 20px; }
.agenda { display: grid; gap: 14px; margin-top: 10px; }
.agenda :is(li, :where(.est-li)) { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 16px; background: var(--cfpn-gris); }
.agenda h3 { font-size: 16.5px; margin-bottom: 2px; }
.agenda p:not(:where([class*="est-"], .env)) { font-size: 14px; }
.agenda__date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 60px; height: 64px; border-radius: 14px; background: var(--cfpn-secondary); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.1; }
.agenda__date :is(strong, :where(.est-strong)) { font-size: 22px; font-weight: 800; }
.agenda__a-venir .agenda__date { background: var(--cfpn-indigo-14); color: var(--cfpn-primary); }

/* ---------- Actualités ---------- */
.filtres--actus { margin: 0 0 40px; }
.actu-une { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; margin-bottom: 34px; border-radius: 26px; overflow: hidden; background: var(--cfpn-primary-deep); color: rgba(255, 255, 255, .85); box-shadow: var(--ombre); }
.actu-une__visuel { position: relative; display: block; min-height: 360px; overflow: hidden; }
.actu-une__visuel img:not(.x-img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.actu-une:hover .actu-une__visuel img:not(.x-img) { transform: scale(1.04); }
.actu-une__corps { padding: 46px; display: flex; flex-direction: column; justify-content: center; }
.actu-une h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; color: #fff; margin: 4px 0 14px; }
.actu-une .carte-actu__cat { color: #fff; }
.actu-une .lien-fleche { color: #fff; margin-top: 10px; }
.actu-une .etiquette { left: 18px; right: auto; top: 18px; }

/* ---------- Article ---------- */
.article-cadre { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 60px; align-items: start; padding: 70px 0 var(--section); }
.article { max-width: 760px; font-size: 16.5px; line-height: 1.85; }
.article__chapo { font-size: 20px; font-weight: 600; line-height: 1.6; color: var(--cfpn-black); }
.article h2 { font-size: 26px; font-weight: 800; margin: 40px 0 14px; }
.article :is(ul, :where(.est-ul)) { list-style: none; display: grid; gap: 8px; margin-bottom: 1em; }
.article :is(ul, :where(.est-ul)) :is(li, :where(.est-li)) { position: relative; padding-left: 26px; }
.article :is(ul, :where(.est-ul)) :is(li, :where(.est-li))::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 10px; border-radius: 50%; background: var(--cfpn-secondary); }
.article :is(a, :where(.est-a)) { color: var(--cfpn-primary); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(227, 6, 19, .5); text-underline-offset: 3px; }
.article__citation { margin: 34px 0; padding: 26px 30px; border-radius: 0 18px 18px 0; border-left: 5px solid var(--cfpn-secondary); background: var(--cfpn-gris); font-size: 22px; font-weight: 800; line-height: 1.45; color: var(--cfpn-primary); }
.article__partage { display: flex; align-items: center; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cfpn-trait); font-weight: 700; color: var(--cfpn-black); }
.article__partage :is(a, :where(.est-a)) { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cfpn-primary); color: #fff; text-decoration: none; transition: background .2s; }
.article__partage :is(a, :where(.est-a)):hover { background: var(--cfpn-secondary); }
.article__aside { position: sticky; top: 120px; }

/* ---------- Contact ---------- */
.contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact-carte { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 28px; border-radius: 22px; border: 1.5px solid var(--cfpn-trait); background: #fff; transition: border-color .3s, transform .3s, box-shadow .3s; }
:is(a, :where(.est-a)).contact-carte:hover { border-color: var(--cfpn-primary); transform: translateY(-5px); box-shadow: var(--ombre-douce); }
.contact-carte__icone { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 14px; border-radius: 50%; background: var(--cfpn-primary); color: #fff; box-shadow: 0 0 0 6px var(--cfpn-indigo-08); }
.contact-carte__icone .ico { width: 24px; height: 24px; }
.contact-carte :is(small, :where(.est-small)) { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cfpn-secondary); }
.contact-carte :is(strong, :where(.est-strong)) { font-size: 18px; color: var(--cfpn-black); word-break: break-word; }
.contact-carte--accent { background: var(--cfpn-secondary); border-color: var(--cfpn-secondary); }
.contact-carte--accent :is(small, :where(.est-small)), .contact-carte--accent :is(strong, :where(.est-strong)) { color: #fff; }
.contact-carte--accent .contact-carte__icone { background: #fff; color: var(--cfpn-secondary); box-shadow: 0 0 0 6px rgba(255, 255, 255, .2); }
.contact__grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: start; }
.formulaire-carte--plein { margin: 0; }
.formulaire-carte--plein .titre-section { font-size: clamp(26px, 2.6vw, 34px); }
.formulaire__merci { display: none; gap: 16px; align-items: center; padding: 18px; border-radius: 16px; background: var(--cfpn-gris); }
.formulaire__merci .coche-animee { width: 56px; height: 56px; margin: 0; flex: none; }
.formulaire__merci :is(strong, :where(.est-strong)) { color: var(--cfpn-black); }
.formulaire__merci p:not(:where([class*="est-"], .env)) { margin: 4px 0 0; font-size: 14.5px; }
.formulaire__merci :is(a, :where(.est-a)) { color: var(--cfpn-secondary); font-weight: 700; text-decoration: underline; }
.envoye .formulaire__merci { display: flex; }
.contact__carte .acces__carte { height: 380px; }
.adresse-bloc { display: flex; gap: 16px; margin-top: 18px; padding: 24px; border-radius: 22px; background: #fff; box-shadow: var(--ombre-douce); }
.adresse-bloc :is(div:not(:where([class*="est-"])), :where(.est-div)) { display: flex; flex-direction: column; gap: 4px; }
.adresse-bloc :is(strong, :where(.est-strong)) { color: var(--cfpn-black); }

/* ---------- Adaptatif pages intérieures ---------- */
@media (max-width: 1100px) {
  .fiche, .article-cadre { grid-template-columns: 1fr; }
  .fiche__aside, .article__aside { position: static; }
  .competences { grid-template-columns: 1fr 1fr; }
  .etapes-mini { grid-template-columns: repeat(3, 1fr); }
  .appel-action__grille, .duo-cartes, .faq-grille, .contact__grille, .actu-une { grid-template-columns: 1fr; }
  .appel-action__boutons { justify-content: flex-start; }
  .commun__grille { grid-template-columns: repeat(3, 1fr); }
  .valeurs, .piliers, .profils { grid-template-columns: repeat(2, 1fr); }
  .infos-cles, .contacts { grid-template-columns: 1fr 1fr; }
  .assistant-cadre { grid-template-columns: 1fr; }
  .assistant__aside { padding: 26px; gap: 20px; }
  .etapes-assistant { display: flex; justify-content: space-between; }
  .etapes-assistant li { flex: none; padding: 0; }
  .etapes-assistant li span { font-size: 14px; }
  .etapes-assistant li { font-size: 0; gap: 0; }
  .etapes-assistant li:not(:last-child)::after { display: none; }
  .assistant__aide { display: none; }
  .galerie--vie { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .bandeau-page { padding: 56px 0 64px; }
  .sous-nav { top: 74px; }
  .fiche { padding-top: 40px; }
  .objectifs, .competences, .recap, .choix-moment, .chronologie, .equipe, .valeurs, .piliers, .profils, .infos-cles, .contacts { grid-template-columns: 1fr; }
  .chronologie::before { top: 0; bottom: 0; left: 9px; right: auto; border-top: 0; border-left: 2px dashed rgba(49, 39, 131, .28); }
  .chronologie__etape { padding: 0 0 0 40px; }
  .etapes-mini { grid-template-columns: 1fr 1fr; }
  .galerie--trois { grid-template-columns: 1fr 1fr; }
  .galerie--trois .galerie__item:first-child { grid-column: span 2; }
  .galerie--mosaique { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .galerie--mosaique .galerie__item:first-child { grid-column: span 2; grid-row: span 1; }
  .galerie--vie { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .galerie__item figcaption { opacity: 1; transform: none; font-size: 12px; padding: 7px 10px; }
  .commun__grille { grid-template-columns: 1fr 1fr; }
  .carte-mv, .bloc-fiche--stage { padding: 30px 22px; }
  .accordeon p:not(:where([class*="est-"], .env)) { padding-left: 22px; }
  .choix-formation { grid-template-columns: 1fr 1fr; }
  .assistant { padding: 28px 18px 24px; }
  .assistant__nav .bouton { padding: 0 18px; }
  .actu-une__visuel { min-height: 220px; }
  .actu-une__corps { padding: 28px 22px; }
  .appel-action { padding: 60px 0; }
  .appel-action__boutons .bouton { width: 100%; }
  .visionneuse { grid-template-columns: 1fr 1fr; padding: 70px 14px 20px; }
  .visionneuse figure { grid-column: span 2; grid-row: 1; }
  .visionneuse__prec, .visionneuse__suiv { justify-self: center; }
  .article { font-size: 16px; }
  .article__chapo { font-size: 18px; }
}

/* ==========================================================================
   Espace apprenant, vérification de certificat, 10 filières
   ========================================================================== */

/* En-tête : accès espace + liens du bandeau */
.entete__compte {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--cfpn-indigo-08); color: var(--cfpn-primary); transition: background .25s, color .25s;
}
.entete__compte:hover, .entete__compte:focus-visible { background: var(--cfpn-primary); color: #fff; }
.entete__compte .ico { width: 22px; height: 22px; }
.topbar__lien { font-weight: 700; }
.nav__mobile { display: none; }
.nav__mobile :is(a, :where(.est-a)) .ico { width: 18px; height: 18px; color: var(--cfpn-secondary); margin-right: 4px; }
@media (max-width: 1240px) {
  .nav__mobile { display: block; }
  .entete__compte { margin-left: auto; }
  .entete__cta { margin-left: 0; }
}
@media (max-width: 1320px) and (min-width: 1241px) {
  .topbar__infos :is(span, :where(.est-span)):first-child { display: none; }
}
@media (max-width: 760px) {
  .entete__compte { width: 44px; height: 44px; }
  .burger { margin-left: 8px; }
}

/* Sous-menu sur deux colonnes (10 filières) */
@media (min-width: 1241px) {
  .sous-menu { display: grid; grid-template-columns: 1fr 1fr; min-width: 560px; column-gap: 4px; }
  .sous-menu li:first-child { grid-column: span 2; }
}

/* Cartes relais dans la grille des formations */
.carte-relais {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 34px 30px; border-radius: var(--rayon); background: var(--cfpn-primary-deep); color: rgba(255, 255, 255, .85); transition: transform .3s, box-shadow .3s;
}
.carte-relais:hover { transform: translateY(-6px); box-shadow: var(--ombre); }
.carte-relais :is(strong, :where(.est-strong)) { font-size: 22px; color: #fff; line-height: 1.25; }
.carte-relais .lien-fleche { color: #fff; margin-top: 6px; }
.carte-relais__icone { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--cfpn-secondary); color: #fff; }
.carte-relais__icone .ico { width: 28px; height: 28px; }
.carte-relais--rouge { background: var(--cfpn-secondary); }
.carte-relais--rouge .carte-relais__icone { background: #fff; color: var(--cfpn-secondary); }

/* Petits boutons */
.bouton--petit { min-height: 42px; padding: 0 16px; font-size: 12px; }
.bouton:disabled { opacity: .75; cursor: progress; }
.rond-chargement { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: tourne .8s linear infinite; }

/* Bandeau de page court */
.bandeau-page--court { padding: 70px 0 74px; }

/* Encart de démonstration (maquette) */
.demo-encart { display: grid; gap: 4px; margin: 22px 0 0; padding: 14px 16px; border-radius: 12px; border: 1.5px dashed var(--cfpn-primary); background: var(--cfpn-indigo-08); font-size: 13.5px; color: var(--cfpn-black); }
.demo-encart code { font-family: inherit; font-weight: 800; color: var(--cfpn-primary); }
.demo-encart .lien-fleche { justify-self: start; border: 0; background: none; padding: 0; font: 700 13.5px var(--police); cursor: pointer; }

/* Connexion */
.connexion { display: grid; grid-template-columns: 460px 1fr; gap: 60px; align-items: center; }
.connexion__carte, .verification__carte { position: relative; background: #fff; border-radius: 26px; padding: 40px; box-shadow: var(--ombre); border-top: 5px solid var(--cfpn-secondary); }
.connexion__carte h2, .verification__carte h2 { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.connexion__carte > p:not(:where([class*="est-"], .env)), .verification__carte > p:not(:where([class*="est-"], .env)) { font-size: 14.5px; margin-bottom: 22px; }
.connexion__icone { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 18px; border-radius: 18px; background: var(--cfpn-primary); color: #fff; box-shadow: 0 0 0 7px var(--cfpn-indigo-08); }
.connexion__icone .ico { width: 28px; height: 28px; }
.champ--mdp { position: relative; }
.champ--mdp input { padding-right: 52px; }
.champ__oeil { position: absolute; right: 6px; bottom: 6px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); cursor: pointer; display: grid; place-items: center; }
.connexion__aide { margin: 18px 0 0; font-size: 13.5px; }
.connexion__aide :is(a, :where(.est-a)) { color: var(--cfpn-primary); font-weight: 700; }
.connexion__liste { display: grid; gap: 18px; margin: 10px 0 30px; }
.connexion__liste :is(li, :where(.est-li)) { display: flex; gap: 16px; align-items: flex-start; }
.connexion__liste :is(li, :where(.est-li)) > :is(span, :where(.est-span)) { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 14px; background: #fff; color: var(--cfpn-primary); box-shadow: var(--ombre-douce); }
.connexion__liste :is(strong, :where(.est-strong)) { display: block; color: var(--cfpn-black); font-size: 16.5px; }

/* Tableau de bord */
.tableau { animation: resultat .5s cubic-bezier(.2, .7, .2, 1); }
.tableau__entete { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; padding: 26px 30px; border-radius: 24px; background: #fff; box-shadow: var(--ombre-douce); }
.tableau__profil { display: flex; align-items: center; gap: 20px; }
.tableau__profil .surtitre { margin-bottom: 4px; }
.tableau__profil h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; }
.tableau__profil p:not(:where([class*="est-"], .env)) { margin: 4px 0 0; font-size: 14px; }
.tableau__avatar { display: grid; place-items: center; flex: none; width: 74px; height: 74px; border-radius: 50%; background: var(--cfpn-primary); color: #fff; font-size: 26px; font-weight: 800; box-shadow: 0 0 0 6px var(--cfpn-indigo-08); outline: 2px dashed var(--cfpn-secondary); outline-offset: 9px; }
.statut { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(227, 6, 19, .1); color: var(--cfpn-secondary); font-weight: 700; font-size: 12.5px; }
.tableau__grille { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; }
.tuile { position: relative; isolation: isolate; overflow: hidden; padding: 30px; border-radius: 24px; background: #fff; box-shadow: var(--ombre-douce); }
.tuile__label { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cfpn-secondary); margin-bottom: 10px; }
.tuile h3 { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
.tuile--formation { background: var(--cfpn-primary-deep); color: rgba(255, 255, 255, .8); }
.tuile--formation h3 { color: #fff; font-size: 26px; }
.tuile--formation .tuile__label, .tuile--formation .lien-fleche { color: #fff; }
.bref--clair > :is(div:not(:where([class*="est-"])), :where(.est-div)) { border-color: rgba(255, 255, 255, .14); }
.bref--clair :is(dt, :where(.est-dt)) { color: rgba(255, 255, 255, .7); }
.bref--clair :is(dd, :where(.est-dd)) { color: #fff; }
.tuile--verif { background: var(--cfpn-gris); box-shadow: none; border: 1.5px dashed var(--cfpn-trait); }
.documents { display: grid; gap: 12px; }
.documents :is(li, :where(.est-li)) { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; border: 1.5px solid var(--cfpn-trait); }
.documents :is(li, :where(.est-li)) > :is(div:not(:where([class*="est-"])), :where(.est-div)) { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.documents :is(strong, :where(.est-strong)) { color: var(--cfpn-black); }
.documents :is(small, :where(.est-small)) { font-size: 12.5px; }
.documents__icone { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); }
.documents__icone--rouge { background: rgba(227, 6, 19, .1); color: var(--cfpn-secondary); }
.paiements { display: grid; gap: 10px; }
.paiements :is(li, :where(.est-li)) { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--cfpn-gris); font-size: 14.5px; }
.paiements :is(strong, :where(.est-strong)) { color: var(--cfpn-black); }
.paiements em { font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--cfpn-texte); border: 1px solid var(--cfpn-trait); }
.paiements :is(li, :where(.est-li)).paye em { background: var(--cfpn-primary); border-color: var(--cfpn-primary); color: #fff; }

/* Vérification */
.verification__grille { display: grid; grid-template-columns: 460px 1fr; gap: 40px; align-items: stretch; }
.demande-certif { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; align-items: start; }
.demande-certif__intro .titre-section { margin: 8px 0 18px; }
.demande-certif__intro p:not(:where([class*="est-"], .env)) { font-size: 15px; }
.demande-certif__etapes { display: grid; gap: 14px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: etape; }
.demande-certif__etapes :is(li, :where(.est-li)) { position: relative; padding: 14px 16px 14px 58px; border-radius: 16px; background: #fff; box-shadow: var(--ombre-douce); font-size: 14.5px; line-height: 1.5; counter-increment: etape; }
.demande-certif__etapes :is(li, :where(.est-li))::before { content: counter(etape); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cfpn-secondary); color: #fff; font-weight: 800; font-size: 14px; }
.demande-certif__etapes :is(strong, :where(.est-strong)) { display: block; color: var(--cfpn-black); }
.demande-certif__ferme { display: grid; justify-items: center; gap: 10px; padding: 40px 32px; border-radius: 26px; background: #fff; box-shadow: var(--ombre); text-align: center; }
.demande-certif__ferme h3 { margin: 0; color: var(--cfpn-black); }
.demande-certif__ferme p:not(:where([class*="est-"], .env)) { margin: 0; }
.formulaire-demande-certif { display: grid; gap: 14px; background: #fff; border-radius: 26px; padding: 32px; box-shadow: var(--ombre); border-top: 5px solid var(--cfpn-secondary); }
.demande-certif__retour { margin: 0; padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: 14.5px; background: rgba(49, 39, 131, .07); color: var(--cfpn-primary); }
.demande-certif__retour.erreur { background: rgba(227, 6, 19, .07); color: var(--cfpn-secondary); }
.documents :is(li, :where(.est-li)).documents__certif--en-cours :is(small, :where(.est-small)) { color: var(--cfpn-primary); font-weight: 700; }
.demande-certif-espace { display: grid; gap: 14px; margin-top: 16px; padding: 22px; border-radius: 18px; border: 1.5px solid var(--cfpn-trait); border-top: 4px solid var(--cfpn-secondary); }
.demande-certif-espace__titre { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; color: var(--cfpn-black); }
.demande-certif-espace__titre .ico { color: var(--cfpn-secondary); }
.demande-certif-espace .note { margin: 0; }
.demande-certif-espace__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.champ-piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
[data-ligne][hidden] { display: none !important; }
.formulaire-verif input { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.verif-resultat { position: relative; display: grid; border-radius: 26px; background: #fff; box-shadow: var(--ombre-douce); overflow: hidden; }
.verif-etat { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 44px; min-height: 420px; }
.verif-etat.actif { display: flex; animation: resultat .45s cubic-bezier(.2, .7, .2, 1); }
.verif-etat h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; margin: 10px 0 12px; }
.verif-etat p:not(:where([class*="est-"], .env)) { max-width: 460px; }
.verif-etat__icone { display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); }
.verif-etat__icone .ico { width: 42px; height: 42px; }
.verif-etat__icone--rouge { background: rgba(227, 6, 19, .1); color: var(--cfpn-secondary); }
.verif-etat__badge { display: inline-flex; padding: 7px 16px; border-radius: 999px; background: var(--cfpn-primary); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.verif-etat .recap { width: 100%; max-width: 520px; margin: 10px 0 16px; text-align: left; }
.verif-etat--valide { background: linear-gradient(180deg, rgba(49, 39, 131, .05), #fff 40%); }
.scan { position: relative; width: 120px; height: 120px; border-radius: 22px; border: 3px solid var(--cfpn-primary); overflow: hidden; background: var(--cfpn-indigo-08); }
.scan::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--cfpn-secondary); box-shadow: 0 0 14px var(--cfpn-secondary); animation: balayage 1s ease-in-out infinite alternate; }
@keyframes balayage { from { top: 6%; } to { top: 92%; } }

/* Confirmation d'inscription */
.reference { display: inline-block; margin: 6px auto 14px; padding: 10px 16px; border-radius: 12px; background: var(--cfpn-gris); font-size: 14.5px; }
.reference :is(strong, :where(.est-strong)) { color: var(--cfpn-primary); letter-spacing: .04em; }
.assistant__fin { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
.assistant__confirmation .assistant__fin .bouton { margin-top: 0; }

@media (max-width: 1100px) {
  .connexion, .verification__grille, .tableau__grille, .demande-certif { grid-template-columns: 1fr; }
  .formulaire-demande-certif { padding: 22px; }
}
@media (max-width: 760px) {
  .connexion__carte, .verification__carte { padding: 28px 20px; }
  .tableau__entete { padding: 20px; }
  .tableau__avatar { width: 58px; height: 58px; font-size: 20px; }
  .documents :is(li, :where(.est-li)) { flex-wrap: wrap; }
  .documents :is(li, :where(.est-li)) .bouton { width: 100%; }
  .paiements :is(li, :where(.est-li)) { grid-template-columns: 1fr auto; }
  .paiements em { grid-column: span 2; justify-self: start; }
  .verif-etat { padding: 30px 20px; min-height: 320px; }
  .assistant__fin .bouton { width: 100%; }
}
.pied__admin { color: rgba(255, 255, 255, .55); font-size: 12.5px; } .pied__admin:hover { color: #fff; }

/* ==========================================================================
   Espace personnel de l'apprenant
   ========================================================================== */
.acces { display: grid; grid-template-columns: 520px 1fr; gap: 56px; align-items: start; }
.acces__carte { position: relative; background: #fff; border-radius: 26px; box-shadow: var(--ombre); border-top: 5px solid var(--cfpn-secondary); overflow: hidden; }
.acces__onglets { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--cfpn-trait); }
.acces__onglet { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 10px; border: 0; background: var(--cfpn-gris); font: 700 14px var(--police); color: var(--cfpn-texte); cursor: pointer; transition: background .2s, color .2s; }
.acces__onglet.actif { background: #fff; color: var(--cfpn-primary); box-shadow: inset 0 -3px 0 var(--cfpn-secondary); }
.acces__panneau { display: none; padding: 32px 36px 36px; }
.acces__panneau.actif { display: grid; gap: 14px; animation: resultat .4s ease; }
.acces__panneau h2 { font-size: 24px; font-weight: 800; }
.acces__panneau > p:not(:where([class*="est-"], .env)) { margin: 0; font-size: 14.5px; }
.acces__succes { text-align: center; justify-items: center; }
.acces__succes .coche-animee { width: 80px; height: 80px; margin: 0 auto; }
.message-acces { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(227, 6, 19, .08); color: var(--cfpn-secondary); font-weight: 600; font-size: 14px; line-height: 1.5; }
.message-acces .ico { flex: none; margin-top: 2px; }
.message-acces--info { background: var(--cfpn-indigo-08); color: var(--cfpn-primary); }
.message-acces--ok { background: var(--cfpn-indigo-08); color: var(--cfpn-primary); }
.photo-choix { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.photo-choix :is(small, :where(.est-small)) { font-size: 12.5px; color: var(--cfpn-texte); flex-basis: 100%; }
.photo-choix__apercu { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); border: 2px dashed var(--cfpn-primary); }
.photo-choix__apercu img:not(.x-img) { width: 100%; height: 100%; object-fit: cover; }
.photo-choix__apercu .ico { width: 30px; height: 30px; }
.photo-choix__apercu :is(span, :where(.est-span)) { font-weight: 800; font-size: 26px; }
.photo-choix--grand .photo-choix__apercu { width: 110px; height: 110px; border-style: solid; }
.photo-choix--grand { margin-bottom: 18px; }
.bouton--contour-sombre.bouton--petit { min-height: 40px; }
.toast-site { position: fixed; left: 50%; bottom: 84px; z-index: 95; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 13px 20px; border-radius: 12px; background: var(--cfpn-black); color: #fff; font-weight: 700; box-shadow: var(--ombre); transition: .3s; max-width: calc(100% - 32px); text-align: center; }
.toast-site.visible { transform: translate(-50%, 0); opacity: 1; }

.perso { animation: resultat .5s cubic-bezier(.2, .7, .2, 1); }
.perso__entete { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px 30px; border-radius: 24px; background: var(--cfpn-primary-deep); color: rgba(255, 255, 255, .8); box-shadow: var(--ombre); margin-bottom: 22px; }
.perso__avatar { display: grid; place-items: center; width: 84px; height: 84px; flex: none; border-radius: 50%; overflow: hidden; background: var(--cfpn-secondary); color: #fff; font-size: 28px; font-weight: 800; box-shadow: 0 0 0 5px rgba(255, 255, 255, .14); }
.perso__avatar img:not(.x-img) { width: 100%; height: 100%; object-fit: cover; }
.perso__identite { flex: 1; min-width: 220px; }
.perso__identite h2 { color: #fff; font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; }
.perso__identite p:not(:where([class*="est-"], .env)) { margin: 4px 0 0; font-size: 14px; }
.perso__sur { font-size: 12px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .65); margin: 0 0 4px !important; }
.perso__statut { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; font-size: 13px; }
.perso__corps { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.perso__nav { position: sticky; top: 110px; display: grid; gap: 4px; padding: 12px; border-radius: 20px; background: #fff; box-shadow: var(--ombre-douce); }
.perso__nav :is(button, :where(.est-button)) { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 12px; background: none; font: 600 14.5px var(--police); color: var(--cfpn-black); text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.perso__nav :is(button, :where(.est-button)):hover { background: var(--cfpn-indigo-08); }
.perso__nav :is(button, :where(.est-button)).actif { background: var(--cfpn-secondary); color: #fff; }
.perso__nav .ico { width: 19px; height: 19px; }
.perso__badge:not(:empty) { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--cfpn-secondary); color: #fff; font-size: 12px; font-weight: 800; text-align: center; }
.perso__nav :is(button, :where(.est-button)).actif .perso__badge { background: #fff; color: var(--cfpn-secondary); }
.perso__panneau { display: none; }
.perso__panneau.actif { display: grid; gap: 20px; animation: resultat .4s ease; }
.perso__titre h3 { font-size: 24px; font-weight: 800; }
.perso__titre p:not(:where([class*="est-"], .env)) { margin: 4px 0 0; }
.perso__tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tuile-chiffre { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: var(--ombre-douce); }
.tuile-chiffre .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); margin-bottom: 8px; }
.tuile-chiffre :is(small, :where(.est-small)) { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cfpn-texte); }
.tuile-chiffre :is(strong, :where(.est-strong)) { font-size: 24px; font-weight: 800; color: var(--cfpn-black); line-height: 1.2; }
.tuile-chiffre :is(span, :where(.est-span)) { font-size: 13px; }
.tuile-chiffre--indigo { background: var(--cfpn-primary); }
.tuile-chiffre--indigo :is(small, :where(.est-small)), .tuile-chiffre--indigo :is(strong, :where(.est-strong)), .tuile-chiffre--indigo :is(span, :where(.est-span)) { color: #fff; }
.tuile-chiffre--indigo .ico { background: rgba(255, 255, 255, .16); color: #fff; }
.tuile-chiffre--rouge .ico { background: rgba(227, 6, 19, .1); color: var(--cfpn-secondary); }
.perso__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.liste-cours, .liste-resultats { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.liste-cours :is(li, :where(.est-li)) { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 14px; border-radius: 14px; background: var(--cfpn-gris); border-left: 4px solid var(--cfpn-primary); }
.liste-cours :is(li, :where(.est-li)) :is(span, :where(.est-span)) { grid-row: span 2; font-weight: 800; color: var(--cfpn-primary); font-size: 13.5px; }
.liste-cours :is(li, :where(.est-li)) :is(strong, :where(.est-strong)) { color: var(--cfpn-black); }
.liste-cours :is(li, :where(.est-li)) :is(small, :where(.est-small)) { font-size: 12.5px; }
.liste-resultats :is(li, :where(.est-li)) { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--cfpn-gris); }
.liste-resultats :is(strong, :where(.est-strong)) { color: var(--cfpn-black); font-size: 14px; }
.note:not(p:not(:where([class*="est-"], .env))) { display: inline-block; min-width: 54px; padding: 4px 10px; border-radius: 999px; background: var(--cfpn-primary); color: #fff; font-weight: 800; font-size: 13px; text-align: center; }
.note--basse:not(p:not(:where([class*="est-"], .env))) { background: var(--cfpn-secondary); }
.vide, .vide-bloc { color: var(--cfpn-texte); font-weight: 600; }
.vide-bloc { padding: 26px; border-radius: 16px; border: 1.5px dashed var(--cfpn-trait); text-align: center; background: #fff; }

/* emploi du temps */
.edt { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.edt__jour { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 18px; background: #fff; box-shadow: var(--ombre-douce); min-height: 180px; }
.edt__jour h4 { display: flex; flex-direction: column; font-size: 15px; font-weight: 800; color: var(--cfpn-black); padding-bottom: 8px; border-bottom: 2px solid var(--cfpn-trait); }
.edt__jour h4 :is(small, :where(.est-small)) { font-size: 11px; font-weight: 700; color: var(--cfpn-secondary); text-transform: uppercase; letter-spacing: .08em; }
.edt__jour--auj { background: var(--cfpn-primary); }
.edt__jour--auj h4 { color: #fff; border-color: rgba(255, 255, 255, .2); }
.edt__jour--auj h4 :is(small, :where(.est-small)) { color: #fff; }
.edt__cours { display: grid; gap: 3px; padding: 12px; border-radius: 12px; background: var(--cfpn-gris); border-left: 4px solid var(--cfpn-secondary); }
.edt__jour--auj .edt__cours { background: #fff; }
.edt__heure { font-size: 12px; font-weight: 800; color: var(--cfpn-secondary); }
.edt__cours :is(strong, :where(.est-strong)) { font-size: 13.5px; line-height: 1.35; color: var(--cfpn-black); }
.edt__cours :is(small, :where(.est-small)) { font-size: 11.5px; }
.edt__libre { margin: 0; font-size: 13px; color: var(--cfpn-texte); }
.edt__jour--auj .edt__libre { color: rgba(255, 255, 255, .8); }

/* exercices */
.exos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.exo { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 20px; background: #fff; box-shadow: var(--ombre-douce); transition: transform .25s; }
.exo:hover { transform: translateY(-4px); }
.exo__tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.exo__icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--cfpn-primary); color: #fff; }
.exo__etat { padding: 4px 10px; border-radius: 999px; background: rgba(227, 6, 19, .1); color: var(--cfpn-secondary); font-size: 12px; font-weight: 800; }
.exo__etat--fait { background: var(--cfpn-indigo-08); color: var(--cfpn-primary); }
.exo h4 { font-size: 17px; line-height: 1.35; color: var(--cfpn-black); }
.exo p:not(:where([class*="est-"], .env)) { margin: 0; font-size: 13.5px; }
.exo .bouton { justify-self: start; }
.quiz { padding: 26px; border-radius: 22px; background: #fff; box-shadow: var(--ombre); }
.quiz__tete { position: relative; display: grid; gap: 8px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--cfpn-trait); }
.quiz__retour { justify-self: start; border: 0; background: none; padding: 0; font: 700 14px var(--police); cursor: pointer; }
.quiz__tete h3 { font-size: 22px; font-weight: 800; padding-right: 110px; }
.quiz__tete p:not(:where([class*="est-"], .env)) { margin: 0; }
.quiz__barre { height: 8px; border-radius: 8px; background: var(--cfpn-gris); overflow: hidden; }
.quiz__barre :is(span, :where(.est-span)) { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--cfpn-secondary); transition: width .35s; }
.quiz__minuteur { position: absolute; top: 26px; right: 0; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--cfpn-indigo-08); color: var(--cfpn-primary) !important; font-weight: 800; font-variant-numeric: tabular-nums; }
.quiz--urgent .quiz__minuteur { background: var(--cfpn-secondary); color: #fff !important; animation: pulse 1s infinite; }
.quiz__form { display: grid; gap: 18px; }
.quiz__form > .bouton { justify-self: start; }
.question { border: 0; margin: 0; padding: 18px; border-radius: 16px; background: var(--cfpn-gris); display: grid; gap: 10px; }
.question legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-weight: 700; font-size: 16px; color: var(--cfpn-black); line-height: 1.45; }
.question legend :is(span, :where(.est-span)) { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cfpn-secondary); margin-bottom: 4px; }
.reponse { position: relative; cursor: pointer; }
.reponse input { position: absolute; opacity: 0; }
.reponse :is(span, :where(.est-span)) { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; background: #fff; border: 1.5px solid var(--cfpn-trait); font-weight: 600; transition: border-color .2s, background .2s; }
.reponse :is(span, :where(.est-span))::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--cfpn-trait); transition: .2s; }
.reponse:hover :is(span, :where(.est-span)) { border-color: var(--cfpn-primary); }
.reponse input:checked + :is(span, :where(.est-span)) { border-color: var(--cfpn-primary); background: var(--cfpn-indigo-08); color: var(--cfpn-primary); }
.reponse input:checked + :is(span, :where(.est-span))::before { border: 6px solid var(--cfpn-primary); }
.reponse input:focus-visible + :is(span, :where(.est-span)) { outline: 3px solid var(--cfpn-secondary); outline-offset: 2px; }
.score { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 24px; border-radius: 20px; background: var(--cfpn-gris); }
.score__anneau { --p: 0; position: relative; display: grid; place-items: center; align-content: center; width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(var(--cfpn-secondary) calc(var(--p) * 1%), var(--cfpn-trait) 0); }
.score__anneau::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; }
.score__anneau :is(strong, :where(.est-strong)), .score__anneau :is(span, :where(.est-span)) { position: relative; line-height: 1.1; }
.score__anneau :is(strong, :where(.est-strong)) { font-size: 38px; font-weight: 800; color: var(--cfpn-black); }
.score__anneau :is(span, :where(.est-span)) { font-size: 13px; font-weight: 700; color: var(--cfpn-texte); }
.score__mention { font-size: 26px; font-weight: 800; color: var(--cfpn-primary); margin: 0 0 4px; }
.score__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.correction__titre { font-size: 18px; font-weight: 800; margin: 24px 0 12px; color: var(--cfpn-black); }
.correction { display: grid; gap: 10px; margin: 0; padding-left: 20px; }
.correction :is(li, :where(.est-li)) { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1.5px solid var(--cfpn-trait); border-left: 5px solid var(--cfpn-primary); }
.correction :is(li, :where(.est-li)).faux { border-left-color: var(--cfpn-secondary); }
.correction :is(li, :where(.est-li)) :is(strong, :where(.est-strong)) { color: var(--cfpn-black); }
.correction :is(li, :where(.est-li)) :is(span, :where(.est-span)) { font-size: 14px; }
.correction__bonne { color: var(--cfpn-primary); font-weight: 700; }

/* notes */
.notes-synthese { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 14px; }
.notes-synthese :is(div:not(:where([class*="est-"])), :where(.est-div)) { display: grid; padding: 18px; border-radius: 18px; background: #fff; box-shadow: var(--ombre-douce); }
.notes-synthese :is(small, :where(.est-small)) { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.notes-synthese :is(strong, :where(.est-strong)) { font-size: 26px; font-weight: 800; color: var(--cfpn-primary); }
.tableau-defile { overflow-x: auto; border-radius: 18px; background: #fff; box-shadow: var(--ombre-douce); }
.tableau-notes { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau-notes th { text-align: left; padding: 14px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cfpn-texte); background: var(--cfpn-gris); }
.tableau-notes td { padding: 14px 16px; border-bottom: 1px solid var(--cfpn-trait); color: var(--cfpn-black); }
.tableau-notes tr:last-child td { border-bottom: 0; }
.jauge-paiement { padding: 20px; border-radius: 18px; background: #fff; box-shadow: var(--ombre-douce); }
.jauge-paiement__barre { height: 12px; border-radius: 12px; background: var(--cfpn-gris); overflow: hidden; margin-bottom: 10px; }
.jauge-paiement__barre :is(span, :where(.est-span)) { display: block; height: 100%; width: 0; border-radius: 12px; background: var(--cfpn-primary); transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.jauge-paiement p:not(:where([class*="est-"], .env)) { margin: 0; color: var(--cfpn-black); }
.paiements :is(li, :where(.est-li)) :is(span, :where(.est-span)) :is(small, :where(.est-small)) { display: block; font-size: 12px; color: var(--cfpn-texte); font-weight: 500; }

/* vérification : photo du titulaire */
.verif-photo:not(:empty) { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--cfpn-primary); color: #fff; font-size: 30px; font-weight: 800; box-shadow: 0 0 0 6px var(--cfpn-indigo-08); margin-bottom: 6px; }
.verif-photo img:not(.x-img) { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1100px) {
  .acces, .perso__corps, .perso__grille { grid-template-columns: 1fr; }
  .perso__nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .perso__tuiles { grid-template-columns: 1fr 1fr; }
  .edt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .acces__panneau { padding: 24px 18px 26px; }
  .perso__entete { padding: 20px; }
  .perso__avatar { width: 64px; height: 64px; font-size: 22px; }
  .perso__sortie { width: 100%; }
  .edt { grid-template-columns: 1fr; }
  .edt__jour { min-height: 0; }
  .quiz { padding: 18px; }
  .quiz__tete h3 { padding-right: 0; }
  .quiz__minuteur { position: static; justify-self: start; }
  .score { justify-content: center; text-align: center; }
  .score__actions { justify-content: center; }
  .notes-synthese { grid-template-columns: 1fr 1fr; }
}
.perso__sortie.bouton { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff; min-height: 46px; } .perso__sortie.bouton:hover { background: #fff; color: var(--cfpn-primary); }
.lien-admin { margin-top: 18px; font-size: 14px; } .lien-admin :is(a, :where(.est-a)) { color: var(--cfpn-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- sécurité, annonces, assiduité (espace apprenant) ---------- */
.force-mdp { display: grid; gap: 6px; margin: -4px 0 4px; }
.force-mdp__barre { display: block; height: 6px; border-radius: 6px; background: var(--cfpn-trait); overflow: hidden; }
.force-mdp__barre :is(i, :where(.est-i)) { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--cfpn-secondary); transition: width .3s, background .3s; }
.force-mdp[data-niveau="0"] :is(i, :where(.est-i)), .force-mdp[data-niveau="1"] :is(i, :where(.est-i)) { width: 22%; }
.force-mdp[data-niveau="2"] :is(i, :where(.est-i)) { width: 48%; background: var(--cfpn-secondary); }
.force-mdp[data-niveau="3"] :is(i, :where(.est-i)) { width: 74%; background: var(--cfpn-primary); }
.force-mdp[data-niveau="4"] :is(i, :where(.est-i)) { width: 100%; background: var(--cfpn-primary); }
.force-mdp :is(small, :where(.est-small)) { font-size: 12.5px; color: var(--cfpn-texte); }
.acces__pastille { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); }
.acces__pastille .ico { width: 26px; height: 26px; }
.formulaire-premier .lien-fleche { justify-self: center; }

.annonces-bloc { margin-bottom: 20px; padding: 24px 26px; }
.annonces-bloc .tuile__label { display: flex; align-items: center; gap: 8px; }
.annonces-bloc .tuile__label .ico { width: 16px; height: 16px; }
.annonces { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.annonce { display: flex; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--cfpn-gris); border-left: 4px solid var(--cfpn-primary); }
.annonce--importante { border-left-color: var(--cfpn-secondary); background: rgba(227, 6, 19, .05); }
.annonce__icone { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff; color: var(--cfpn-primary); }
.annonce--importante .annonce__icone { color: var(--cfpn-secondary); }
.annonce :is(strong, :where(.est-strong)) { display: block; color: var(--cfpn-black); font-size: 15.5px; }
.annonce :is(strong, :where(.est-strong)) em { margin-left: 6px; padding: 2px 8px; border-radius: 20px; background: var(--cfpn-primary); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; vertical-align: 2px; }
.annonce p:not(:where([class*="est-"], .env)) { margin: 4px 0 6px; font-size: 14.5px; line-height: 1.55; }
.annonce :is(small, :where(.est-small)) { font-size: 12px; color: var(--cfpn-texte); }
.annonces .vide { color: var(--cfpn-texte); font-size: 14px; }

.perso__grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.assiduite__corps { display: flex; align-items: center; gap: 16px; }
.assiduite__anneau { --p: 0; position: relative; flex: none; display: grid; place-items: center; align-content: center; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(var(--cfpn-primary) calc(var(--p) * 1%), var(--cfpn-trait) 0); }
.assiduite__anneau--alerte { background: conic-gradient(var(--cfpn-secondary) calc(var(--p) * 1%), var(--cfpn-trait) 0); }
.assiduite__anneau::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.assiduite__anneau :is(strong, :where(.est-strong)), .assiduite__anneau :is(span, :where(.est-span)) { position: relative; line-height: 1.1; }
.assiduite__anneau :is(strong, :where(.est-strong)) { font-size: 22px; font-weight: 800; color: var(--cfpn-black); }
.assiduite__anneau :is(span, :where(.est-span)) { font-size: 11.5px; font-weight: 700; color: var(--cfpn-texte); }
.assiduite__chiffres { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr; gap: 4px; margin: 0; }
.assiduite__chiffres :is(div:not(:where([class*="est-"])), :where(.est-div)) { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.assiduite__chiffres :is(dt, :where(.est-dt)) { color: var(--cfpn-texte); }
.assiduite__chiffres :is(dd, :where(.est-dd)) { margin: 0; font-weight: 800; color: var(--cfpn-black); }
.assiduite__note { margin: 14px 0 0; font-size: 13px; color: var(--cfpn-texte); }

.alerte-session { position: fixed; z-index: 96; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; width: min(560px, calc(100% - 32px)); padding: 16px 18px; border-radius: 18px; background: var(--cfpn-primary-deep); color: #fff; box-shadow: var(--ombre); }
.alerte-session[hidden] { display: none; }
.alerte-session > .ico { flex: none; width: 28px; height: 28px; color: #fff; }
.alerte-session p:not(:where([class*="est-"], .env)) { margin: 0; flex: 1; display: grid; gap: 2px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.alerte-session :is(strong, :where(.est-strong)) { color: #fff; }
@media (max-width: 1240px) { .perso__grille--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1100px) { .perso__grille--3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .alerte-session { flex-wrap: wrap; } .alerte-session .bouton { width: 100%; } }

/* ---------- activation de compte par lien / mot de passe oublié ---------- */
.activation__carte { width: min(560px, 100%); margin: 0 auto; padding: 36px; border-radius: 28px; background: #fff; box-shadow: var(--ombre); border-top: 5px solid var(--cfpn-secondary); }
.activation__etat { display: grid; gap: 16px; justify-items: start; }
.activation__etat[hidden] { display: none; }
.activation__etat[data-etat="verification"], .activation__etat[data-etat="succes"], .activation__etat[data-etat="erreur"] { justify-items: center; text-align: center; }
.activation__etat h2 { margin: 0; font-size: 26px; font-weight: 800; color: var(--cfpn-black); }
.activation__etat p:not(:where([class*="est-"], .env)) { margin: 0; }
.formulaire-activation .champ, .formulaire-activation .force-mdp, .formulaire-activation .bouton { width: 100%; }
.activation__pastille { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--cfpn-primary); color: #fff; box-shadow: 0 0 0 7px var(--cfpn-indigo-08); }
.activation__pastille--rouge { background: var(--cfpn-secondary); box-shadow: 0 0 0 7px rgba(227, 6, 19, .08); }
.activation__pastille .ico { width: 26px; height: 26px; }
.activation__infos { width: 100%; margin: 0; display: grid; gap: 0; border-radius: 14px; background: var(--cfpn-gris); padding: 4px 16px; }
.activation__infos :is(div:not(:where([class*="est-"])), :where(.est-div)) { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--cfpn-trait); font-size: 14px; }
.activation__infos :is(div:not(:where([class*="est-"])), :where(.est-div)):last-child { border-bottom: 0; }
.activation__infos :is(dt, :where(.est-dt)) { color: var(--cfpn-texte); }
.activation__infos :is(dd, :where(.est-dd)) { margin: 0; font-weight: 700; color: var(--cfpn-black); text-align: right; word-break: break-word; }
.activation__note { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--cfpn-texte); }
.activation__note .ico { width: 16px; height: 16px; color: var(--cfpn-primary); }
.rond-chargement--grand { width: 42px; height: 42px; border-width: 4px; border-color: var(--cfpn-indigo-08); border-top-color: var(--cfpn-primary); }
.formulaire-oubli .lien-fleche, .lien-oubli { justify-self: start; padding: 0; border: 0; background: none; color: var(--cfpn-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 560px) { .activation__carte { padding: 26px 18px; border-radius: 22px; } .activation__etat h2 { font-size: 22px; } }

/* la carte d’accès de l’espace apprenant n’hérite pas de la hauteur fixe de la carte géographique (même nom de classe) */
.espace .acces__carte { height: auto; overflow: visible; }
.espace .acces__carte > .acces__onglets { border-radius: 21px 21px 0 0; overflow: hidden; }

/* ---------- Espace apprenant : devoirs et fichiers ---------- */
.pieces { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.piece { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 8px 6px 12px; border-radius: 999px; border: 1px solid var(--cfpn-trait); background: #fff; font-size: 13px; }
.piece > .ico { width: 15px; height: 15px; color: var(--cfpn-primary); flex: none; }
.piece__nom { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--cfpn-primary); cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.piece__nom:hover { text-decoration: underline; }
.piece__nom:disabled { opacity: .5; cursor: progress; }
.piece :is(small, :where(.est-small)) { color: var(--cfpn-texte); white-space: nowrap; }
.piece__retirer { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--cfpn-gris); color: var(--cfpn-black); cursor: pointer; }
.piece__retirer .ico { width: 13px; height: 13px; }
.piece__retirer:hover { background: var(--cfpn-secondary); color: #fff; }
.piece--envoi { padding-right: 14px; color: var(--cfpn-texte); }
.piece--envoi .rond-chargement, .adm-piece--envoi .rond-chargement { border-color: rgba(49, 39, 131, .15); border-top-color: var(--cfpn-primary); }
.exo .pieces { margin: 2px 0 4px; }
.devoirs { display: grid; gap: 18px; }
.devoir { display: grid; gap: 14px; padding: 22px 24px; border-radius: 20px; background: #fff; box-shadow: var(--ombre-douce); border-left: 4px solid var(--cfpn-primary); }
.devoir--retard { border-left-color: var(--cfpn-secondary); }
.devoir--corrige { border-left-color: var(--cfpn-primary-deep); }
.devoir__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.devoir__tete h4 { font-size: 18px; line-height: 1.35; color: var(--cfpn-black); margin: 0 0 4px; }
.devoir__tete p:not(:where([class*="est-"], .env)) { margin: 0; font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.devoir__tete p:not(:where([class*="est-"], .env)) .ico { width: 15px; height: 15px; color: var(--cfpn-primary); }
.devoir__etat { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: rgba(49, 39, 131, .08); color: var(--cfpn-primary); white-space: nowrap; }
.devoir--retard .devoir__etat { background: rgba(227, 6, 19, .1); color: var(--cfpn-secondary); }
.devoir--corrige .devoir__etat { background: var(--cfpn-primary); color: #fff; }
.devoir__consignes { margin: 0; white-space: pre-line; font-size: 14.5px; color: var(--cfpn-black); }
.devoir__bloc, .devoir__depot { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--cfpn-gris); }
.devoir__bloc > :is(small, :where(.est-small)), .devoir__depot > :is(small, :where(.est-small)) { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cfpn-texte); }
.devoir__depot .champ textarea { min-height: 70px; background: #fff; }
.devoir__depot > .bouton { justify-self: start; }
.devoir__depot > .bouton:disabled { opacity: .45; cursor: not-allowed; }
.devoir__alerte { margin: 0; font-size: 13px; font-weight: 700; color: var(--cfpn-secondary); }
.devoir__correction { display: grid; gap: 8px; padding: 16px 18px; border-radius: 14px; background: rgba(49, 39, 131, .06); }
.devoir__correction > :is(div:not(:where([class*="est-"])), :where(.est-div)) { display: flex; align-items: center; gap: 12px; }
.devoir__correction > :is(div:not(:where([class*="est-"])), :where(.est-div)) :is(small, :where(.est-small)) { font-weight: 700; color: var(--cfpn-black); }
.devoir__correction p:not(:where([class*="est-"], .env)) { margin: 0; white-space: pre-line; color: var(--cfpn-black); }
.devoir__correction > :is(small, :where(.est-small)) { color: var(--cfpn-texte); }
@media (max-width: 560px) { .devoir { padding: 18px 16px; } .piece__nom { max-width: 150px; } }

/* ---------- Inscription : tarifs, horaires indisponibles, photo ---------- */
.choix-formation__prix { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--cfpn-secondary); letter-spacing: .01em; }
.choix-moment :is(label, :where(.est-label)).indisponible { opacity: .4; pointer-events: none; }
.choix-moment :is(label, :where(.est-label)).indisponible :is(small, :where(.est-small))::after { content: " · non proposé pour cette filière"; }
.photo-choix__apercu--ok { box-shadow: 0 0 0 3px var(--cfpn-primary); }


/* ---------- Ajouts propres à WordPress (articles, 404, outils en préparation) ---------- */
.conteneur--etroit { width: min(860px, 100% - 40px); }
.article-seul .titre-section { margin: 10px 0 28px; }
.article-seul__date { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cfpn-secondary); }
.page-404 { text-align: center; }
.page-404 .env { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.liste-articles { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 30px; }
.liste-articles > li { padding: 24px; border-radius: var(--rayon); background: #fff; box-shadow: var(--ombre-douce); }

.bientot { display: grid; justify-items: center; gap: 14px; max-width: 640px; margin: 0 auto; padding: 44px 32px; border-radius: 28px; background: #fff; box-shadow: var(--ombre); text-align: center; border-top: 5px solid var(--cfpn-secondary); }
.bientot__icone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--cfpn-primary); color: #fff; box-shadow: 0 0 0 8px var(--cfpn-indigo-08); }
.bientot__icone .ico { width: 28px; height: 28px; }
.bientot h2 { font-size: clamp(22px, 2.4vw, 28px); }
.bientot p { margin: 0; }
.bientot__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.cfpn-envoi-etat { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--cfpn-indigo-08); color: var(--cfpn-primary); font-weight: 600; font-size: 14px; }
.cfpn-envoi-etat--erreur { background: rgba(227, 6, 19, .08); color: var(--cfpn-secondary); }