/* ==========================================================================
   Base : remise à zéro, typographie, composants communs, coquille (en-tête,
   pied de page, rideau de transition, halo de l'assistant, page en construction).
   ========================================================================== */

/* ---------- Remise à zéro ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Fenêtres modales : la remise à zéro ci-dessus retire le centrage natif (margin: auto)
   et colle le <dialog> en haut à gauche. On le rend, avec une hauteur bornée. */
dialog:modal { margin: auto; max-height: 90vh; max-height: 90dvh; overscroll-behavior: contain; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 90px);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
/* Ancres : jamais sous l'en-tête ni sous une barre collante. */
#page [id], #page [data-section] { scroll-margin-top: calc(var(--header-h) + 90px); }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
::selection { background: var(--yellow); color: var(--navy); }

/* ---------- Focus : visible, épais, à la couleur du pétale central ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark :focus-visible { outline-color: var(--yellow); }
/* Titre focalisé par le routeur après un changement de page : pas d'anneau visible */
h1[tabindex='-1']:focus, h1[tabindex='-1']:focus-visible { outline: none; }

/* ---------- Accessibilité ---------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: calc(var(--z-header) + 5);
  transform: translateY(-160%);
  background: var(--navy); color: #fff; padding: 0.7rem 1.1rem; border-radius: var(--radius-petal);
  font-weight: 600; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Typographie ---------- */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); line-height: var(--leading-tight); }
h2 { font-size: var(--step-4); line-height: 0.96; }
h3 { font-size: var(--step-2); font-weight: 700; line-height: 1.05; }
h4 { font-size: var(--step-1); font-weight: 650; }
p { text-wrap: pretty; }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; }
.muted { color: var(--ink-soft); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-soft);
}
.eyebrow::before {
  content: ''; width: 1.6em; height: 0.5em; border-radius: var(--radius-petal);
  background: var(--u);
}
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Mise en page ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); margin-inline: auto; }
.section { padding-block: var(--space-section); position: relative; }
.stack > * + * { margin-top: var(--flow, var(--space-s)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }

/* ---------- Boutons ---------- */
.btn {
  --btn-bg: var(--navy);
  --btn-ink: #fff;
  --btn-ring: color-mix(in oklab, var(--btn-bg) 35%, transparent);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.75em 1.35em 0.75em 1.5em;
  border-radius: var(--radius-petal);
  background: var(--btn-bg); color: var(--btn-ink);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1;
  letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out),
    background-color var(--dur-fast) linear, border-radius var(--dur-normal) var(--ease-out);
  isolation: isolate; overflow: hidden;
}
.btn::after { /* reflet qui glisse au survol */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2), 0 0 0 4px var(--btn-ring); border-radius: var(--radius-petal-end); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-1); transition-duration: var(--dur-instant); }
.btn .btn__icon { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--dur-normal) var(--ease-spring); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--primary { --btn-bg: var(--yellow); --btn-ink: var(--navy); }
.btn--primary:hover { --btn-bg: #FFCB1F; }
.btn--dark { --btn-bg: var(--navy); --btn-ink: #fff; }
.btn--light { --btn-bg: #fff; --btn-ink: var(--navy); }
.btn--univers { --btn-bg: var(--u-fond); --btn-ink: var(--u-ink); }
.btn--ghost {
  --btn-bg: transparent; --btn-ink: currentColor; --btn-ring: color-mix(in oklab, currentColor 18%, transparent);
  box-shadow: inset 0 0 0 2px currentColor;
}
.btn--ghost:hover { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 4px var(--btn-ring); }
.btn--small { min-height: 40px; font-size: var(--step-0); padding: 0.55em 1em 0.55em 1.15em; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 600; text-decoration: none; color: var(--u-text);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 2px no-repeat;
  transition: background-size var(--dur-normal) var(--ease-out);
  padding-bottom: 2px;
}
.link-arrow:hover { background-size: 100% 2px; }
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--dur-normal) var(--ease-spring); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Puces, badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.38em 0.85em 0.38em 0.7em; border-radius: var(--radius-pill);
  background: var(--bg-raised); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: var(--step--1); font-weight: 550; line-height: 1.2; text-decoration: none;
  transition: background-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out);
}
.chip::before { content: ''; width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--u); flex: none; }
.chip:is(a, button):hover { box-shadow: inset 0 0 0 2px var(--u); transform: translateY(-1px); }
.chip[aria-pressed='true'], .chip.is-active { background: var(--u-fond); color: var(--u-ink); box-shadow: none; }
.chip[aria-pressed='true']::before, .chip.is-active::before { background: currentColor; }

.badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.22em 0.6em; border-radius: var(--radius-petal);
  background: var(--u-fond); color: var(--u-ink);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3;
}
/* Le texte d'une étiquette garde sa couleur de contraste, même dans un bloc qui colore ses <p>. */
:is(p, span, li, a).badge:not(.badge--outline):not(.badge--demo) { color: var(--u-ink); }
.badge--outline { background: transparent; color: var(--u-text); box-shadow: inset 0 0 0 1.5px currentColor; }
.badge--demo { background: var(--navy); color: var(--yellow); }
.badge--demo::before { content: ''; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--yellow); animation: pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot { 50% { opacity: 0.35; transform: scale(0.7); } }

/* ---------- Cartes ---------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-m); border-radius: var(--radius-l);
  background: var(--bg-raised); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}
.card::before { /* liseré pétale qui s'étire au survol */
  content: ''; position: absolute; left: var(--space-m); top: 0; height: 5px; width: calc(100% - 2 * var(--space-m));
  border-radius: 0 0 var(--radius-pill) var(--radius-pill); background: var(--u);
  transform: scaleX(0.1); transform-origin: left center;
  transition: transform var(--dur-normal) var(--ease-out);
}
.card:is(a):hover, .card.is-interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--line); }
.card:is(a):hover::before, .card.is-interactive:hover::before { transform: scaleX(1); }
a.card { text-decoration: none; color: inherit; }

/* ---------- Média avec repli (dégradé de l'univers + pétale en filigrane) ---------- */
.media {
  position: relative; overflow: hidden; background-color: var(--u-soft);
  background-image:
    radial-gradient(120% 90% at 85% 10%, color-mix(in oklab, var(--u) 75%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in oklab, var(--u) 40%, var(--paper)), color-mix(in oklab, var(--u) 85%, var(--navy)));
}
.media::after {
  content: ''; position: absolute; right: 6%; bottom: 6%; width: min(50%, 60vh); aspect-ratio: 1;
  background: url('../img/rosace-filigrane.svg') center / contain no-repeat; opacity: 0.18; pointer-events: none;
}
.media > img, .media > picture > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.media.has-image::after { display: none; }

/* ---------- En-tête ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h);
  transition: transform var(--dur-normal) var(--ease-out), background-color var(--dur-normal) linear, box-shadow var(--dur-normal) linear;
}
/* Fond blanc opaque et liseré bas : l'en-tête se détache toujours du fond crème des pages
   (retour de Brice du 09/10). L'ombre douce n'apparaît qu'une fois la page défilée. */
.site-header { background: #FFFFFF; box-shadow: 0 1px 0 rgb(28 29 59 / 0.08); }
.site-header.is-scrolled {
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgb(28 29 59 / 0.08), 0 8px 24px -12px rgb(28 29 59 / 0.22);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner {
  min-height: 100%; width: min(100% - 2 * var(--gutter), 1440px); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-m);
}
/* Quand le texte est agrandi (module d'accessibilité), l'en-tête passe sur deux lignes propres :
   core.js mesure sa hauteur réelle et la reporte dans --header-h (ancres, barres collantes). */
.site-header.is-deux-lignes .site-header__inner { padding-block: 8px; }
.site-header.is-deux-lignes .main-nav { order: 10; flex-basis: 100%; margin-left: 0; }
.site-header.is-deux-lignes .main-nav + * { margin-left: auto; }
.main-nav__list { flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--navy); flex: none; }
.brand__mark { width: 46px; height: 46px; transition: transform var(--dur-slow) var(--ease-spring); }
.brand:hover .brand__mark { transform: rotate(-51.43deg); }
.brand__text { font-family: var(--font-display); line-height: 0.92; display: grid; }
.brand__l1, .brand__l2 { font-size: 15.5px; font-weight: 500; white-space: nowrap; }
.brand__l1 b, .brand__l2 b { font-weight: 800; font-size: 1.12em; }
.brand__l3 { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; margin-top: 3px; display: flex; align-items: center; gap: 0.4em; }
.brand__l3 i { width: 6px; height: 6px; background: var(--sky); border-radius: 50%; display: inline-block; }

.main-nav { margin-left: auto; }
.main-nav__list { display: flex; gap: 0.15rem; list-style: none; padding: 0; }
.main-nav a {
  position: relative; display: block; padding: 0.55rem 0.75rem; text-decoration: none;
  font-weight: 560; font-size: 0.95rem; color: var(--ink); border-radius: var(--radius-pill); white-space: nowrap;
  transition: background-color var(--dur-fast) linear;
}
.main-nav a::after {
  content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.3rem; height: 3px;
  border-radius: var(--radius-petal); background: var(--u, var(--sky));
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-normal) var(--ease-out);
}
.main-nav a:hover::after, .main-nav a[aria-current='page']::after { transform: scaleX(1); }
.main-nav a:hover { background: color-mix(in oklab, var(--navy) 5%, transparent); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }

/* Sélecteur de profil */
.profil-switch { position: relative; }
.profil-switch__btn {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  padding: 0.3rem 0.85rem 0.3rem 0.35rem; border-radius: var(--radius-pill);
  background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 0.9rem; font-weight: 560; transition: box-shadow var(--dur-fast) linear;
}
.profil-switch__btn:hover, .profil-switch__btn[aria-expanded='true'] { box-shadow: inset 0 0 0 2px var(--navy); }
.profil-switch__dot {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 0.8rem;
}
.profil-switch__label small { display: block; font-size: 0.68rem; color: var(--ink-soft); font-weight: 500; line-height: 1.1; }
.profil-switch__label span { display: block; line-height: 1.15; }
.profil-switch__chev { width: 14px; height: 14px; transition: transform var(--dur-normal) var(--ease-out); }
.profil-switch__btn[aria-expanded='true'] .profil-switch__chev { transform: rotate(180deg); }
.profil-menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: 300px; padding: 8px;
  background: var(--bg-raised); border-radius: var(--radius-l); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--line);
  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top right; pointer-events: none;
  transition: opacity var(--dur-fast) linear, transform var(--dur-normal) var(--ease-out);
}
.profil-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.profil-menu__title { padding: 0.5rem 0.75rem 0.35rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 650; color: var(--ink-soft); }
.profil-option {
  width: 100%; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.65rem; border-radius: var(--radius-m); text-align: left;
  transition: background-color var(--dur-fast) linear;
}
.profil-option:hover, .profil-option:focus-visible { background: var(--bg-sunken); }
.profil-option[aria-checked='true'] { background: color-mix(in oklab, var(--u) 18%, #fff); }
.profil-option__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--u-fond); display: grid; place-items: center; color: var(--u-ink); font-family: var(--font-display); font-weight: 800; }
.profil-option strong { display: block; font-size: 0.95rem; }
.profil-option small { display: block; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.3; }
.profil-option__check { width: 18px; height: 18px; opacity: 0; color: var(--navy); }
.profil-option[aria-checked='true'] .profil-option__check { opacity: 1; }
/* « Ancien élève » : un lien vers CFA Blagnac Alumni, séparé des quatre profils du site. */
.profil-option--alumni { position: relative; margin-top: 9px; color: inherit; text-decoration: none; }
.profil-option--alumni::before { content: ''; position: absolute; left: 0.65rem; right: 0.65rem; top: -5px; height: 1px; background: var(--line); }
.profil-option__picto { width: 22px; height: 22px; }
.profil-option__sortie { width: 18px; height: 18px; color: var(--u-text); transition: transform var(--dur-normal) var(--ease-out); }
.profil-option--alumni:hover .profil-option__sortie, .profil-option--alumni:focus-visible .profil-option__sortie { transform: translateX(3px); }
.profil-option--alumni:hover, .profil-option--alumni:focus-visible { background: color-mix(in oklab, var(--u) 14%, #fff); }

.menu-toggle {
  display: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy); color: #fff; place-items: center;
}
.menu-toggle span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform var(--dur-normal) var(--ease-out), background-color var(--dur-fast); }
.menu-toggle span::before, .menu-toggle span::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur-normal) var(--ease-out); }
.menu-toggle span::before { transform: translateY(-6px); }
.menu-toggle span::after { transform: translateY(6px); width: 13px; }
.menu-toggle[aria-expanded='true'] span { background: transparent; }
.menu-toggle[aria-expanded='true'] span::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded='true'] span::after { transform: rotate(-45deg); width: 20px; }

/* Menu plein écran (mobile) */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu); background: var(--navy); color: #fff;
  padding: calc(var(--header-h) + 12px) var(--gutter) 32px; overflow-y: auto;
  clip-path: circle(0% at calc(100% - 44px) 32px);
  visibility: hidden;
  transition: clip-path var(--dur-slow) var(--ease-in-out), visibility 0s linear var(--dur-slow);
}
.mobile-menu.is-open { clip-path: circle(150% at calc(100% - 44px) 32px); visibility: visible; transition: clip-path var(--dur-slow) var(--ease-in-out), visibility 0s; }
.mobile-menu__list { list-style: none; padding: 0; display: grid; gap: 0.1rem; }
.mobile-menu__list a {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0; text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.05;
}
.mobile-menu__list a::before { content: ''; width: 18px; height: 10px; border-radius: var(--radius-petal); background: var(--u, var(--sky)); flex: none; }
.mobile-menu__profils { margin-top: var(--space-l); }
.mobile-menu__profils p { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; margin-bottom: 0.6rem; }
.seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.seg button { padding: 0.75rem; border-radius: var(--radius-petal); background: rgb(255 255 255 / 0.08); color: #fff; font-weight: 600; text-align: left; }
.seg button[aria-checked='true'] { background: var(--yellow); color: var(--navy); }
.seg-alumni {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 0.75rem;
  margin-top: 8px; padding: 0.6rem 0.9rem 0.6rem 0.6rem; border-radius: var(--radius-petal);
  background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--u) 55%, transparent);
  color: #fff; text-decoration: none;
}
.seg-alumni__picto { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--u-fond); color: var(--u-ink); }
.seg-alumni__icone { width: 22px; height: 22px; }
.seg-alumni strong { display: block; font-weight: 650; line-height: 1.2; }
.seg-alumni small { display: block; font-size: 0.875rem; line-height: 1.3; opacity: 0.8; }
.seg-alumni__fleche { width: 20px; height: 20px; color: var(--u); }
.seg-alumni:hover, .seg-alumni:focus-visible { background: rgb(255 255 255 / 0.14); }
.mobile-menu .btn { margin-top: var(--space-l); }
.mobile-menu__contact { margin-top: var(--space-m); font-size: 0.95rem; opacity: 0.85; }
.mobile-menu__contact a { color: #fff; }

@media (max-width: 1380px) {
  .main-nav a { padding-inline: 0.5rem; font-size: 0.88rem; }
  .site-header__inner { gap: var(--space-s); }
}
/* De 1280 à 1359 px, le menu complet tient sur une ligne avec une vraie marge (60 px environ) :
   liens un peu resserrés, logo un peu plus petit. */
@media (min-width: 1280px) and (max-width: 1359px) {
  .site-header__inner { column-gap: 0.75rem; }
  .main-nav a { padding-inline: 0.45rem; font-size: 0.86rem; }
  .main-nav a::after { left: 0.45rem; right: 0.45rem; }
  .brand__mark { width: 42px; height: 42px; }
  .brand__l1, .brand__l2 { font-size: 14.5px; }
  .brand__l3 { font-size: 9.5px; }
}
/* Sous 1280 px, le menu complet (logo, 7 liens, « Je suis », accessibilité, préinscription : 1 210 px)
   ne tient plus sur une ligne : l'en-tête passe au menu compact, comme sur tablette. Avant le 13/10,
   de 1061 à 1279 px, le menu passait sous le logo, sur deux lignes. */
@media (max-width: 1279px) {
  .main-nav, .profil-switch { display: none; }
  .menu-toggle { display: grid; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 420px) {
  .brand__mark { width: 40px; height: 40px; }
  .brand__l1, .brand__l2 { font-size: 13.5px; }
  .brand__l3 { font-size: 8.5px; }
  .header-actions .btn--primary { padding-inline: 0.85rem; font-size: 0.95rem; min-height: 44px; }
  .header-actions .btn--primary .btn__long { display: none; }
}
@media (min-width: 421px) { .btn__short { display: none; } }

/* ---------- Zone de page ---------- */
#page { min-height: 100vh; }
#page:focus { outline: none; }
.page { padding-top: var(--header-h); }
.page--flush { padding-top: 0; }

/* ---------- Rideau de transition (pétale qui balaie l'écran) ---------- */
.curtain {
  position: fixed; inset: 0; z-index: var(--z-curtain); pointer-events: none;
  visibility: hidden;
}
.curtain__petal {
  position: absolute; top: 50%; left: 50%; width: 240vmax; height: 240vmax;
  background: var(--curtain-color, var(--navy));
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-38deg) scale(0);
}
.curtain__petal--2 { background: var(--curtain-color-2, var(--sky)); }
.curtain__mark { position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%); opacity: 0; }

/* ---------- Halo de l'assistant (CFA.highlight) ---------- */
.cfa-highlight {
  position: absolute; z-index: var(--z-highlight); pointer-events: none;
  border-radius: 18px;
  box-shadow: 0 0 0 3px var(--sky), 0 0 0 9999px rgb(28 29 59 / 0.18);
  animation: cfa-halo-in var(--dur-slow) var(--ease-out) both, cfa-halo-pulse 1.6s ease-in-out 0.5s infinite;
}
.cfa-highlight.is-leaving { animation: cfa-halo-out var(--dur-normal) var(--ease-out) forwards; }
.cfa-highlight__label {
  position: absolute; left: 0; bottom: calc(100% + 12px);
  display: inline-flex; align-items: center; gap: 0.5em; max-width: min(360px, 80vw);
  padding: 0.5rem 0.9rem 0.5rem 0.7rem; border-radius: var(--radius-petal);
  background: var(--navy); color: #fff; font-size: 0.9rem; font-weight: 600; line-height: 1.3;
  box-shadow: var(--shadow-2);
}
.cfa-highlight__label.is-below { bottom: auto; top: calc(100% + 12px); }
.cfa-highlight__label::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); flex: none; }
@keyframes cfa-halo-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes cfa-halo-out { to { opacity: 0; transform: scale(0.98); } }
@keyframes cfa-halo-pulse {
  50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--sky) 70%, transparent), 0 0 0 9999px rgb(28 29 59 / 0.18); }
}

/* ---------- Page en construction ---------- */
.wip {
  min-height: calc(100vh - var(--header-h)); display: grid; align-items: center;
  padding-block: var(--space-2xl); overflow: hidden; position: relative;
}
.wip__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-xl); align-items: center; }
.wip__title { font-size: var(--step-6); line-height: 0.88; margin-top: var(--space-s); }
.wip__title em { font-style: normal; color: var(--u-text); }
.wip__text { margin-top: var(--space-m); }
.wip__actions { margin-top: var(--space-l); }
.wip__rosace { width: min(100%, 460px); justify-self: center; animation: wip-spin 40s linear infinite; }
.wip__note { margin-top: var(--space-l); display: inline-flex; gap: 0.6rem; align-items: center; padding: 0.6rem 1rem; border-radius: var(--radius-petal); background: var(--bg-sunken); font-size: var(--step--1); color: var(--ink-soft); }
@keyframes wip-spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  .wip__grid { grid-template-columns: 1fr; }
  .wip__rosace { width: 60%; order: -1; }
}

/* ---------- Pied de page ---------- */
.site-footer {
  position: relative; overflow: hidden; background: var(--navy); color: #E9E8F2;
  /* En bas, la place du lanceur de l'assistant, pour qu'il ne cache pas la dernière ligne. */
  padding: var(--space-2xl) 0 calc(var(--space-l) + 110px);
}
.site-footer a { color: #fff; text-decoration-color: rgb(255 255 255 / 0.35); }
.site-footer a:hover { text-decoration-color: var(--yellow); }
.site-footer__rosace { position: absolute; right: var(--gutter); top: var(--space-l); width: min(28vw, 380px); opacity: 0.09; pointer-events: none; }
.site-footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-l); position: relative; }
.site-footer__claim { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 0.98; color: #fff; }
.site-footer__claim span { color: var(--yellow); }
.site-footer h2 { font-size: 0.8rem; font-family: var(--font-body); font-weight: 650; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(255 255 255 / 0.62); margin-bottom: 0.9rem; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.45rem; font-size: 0.95rem; }
.site-footer address { font-style: normal; line-height: 1.6; margin-top: var(--space-m); font-size: 0.98rem; }
.site-footer__tel { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; text-decoration: none !important; display: inline-block; margin-top: 0.4rem; }
.site-footer__access { margin-top: var(--space-s); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.site-footer__access span { font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.08); }
/* Lien vers CFA Blagnac Alumni, le réseau des anciens : bien visible, sous les coordonnées. */
.site-footer .site-footer__alumni {
  display: inline-grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 0.75rem;
  margin-top: var(--space-m); max-width: 100%; padding: 0.6rem 1rem 0.6rem 0.6rem; border-radius: var(--radius-l);
  background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--u) 60%, transparent);
  text-decoration: none; transition: background-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
.site-footer__alumni-mark { width: 40px; height: 40px; }
.site-footer__alumni strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); line-height: 1.1; }
.site-footer__alumni small { display: block; margin-top: 0.15rem; font-size: 0.875rem; color: rgb(255 255 255 / 0.75); }
.site-footer__alumni-fleche { width: 20px; height: 20px; color: var(--u); transition: transform var(--dur-normal) var(--ease-out); }
.site-footer .site-footer__alumni:hover, .site-footer .site-footer__alumni:focus-visible { background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 2px var(--u); }
.site-footer__alumni:hover .site-footer__alumni-fleche { transform: translateX(3px); }
.site-footer__labels { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 1px solid rgb(255 255 255 / 0.14); position: relative; }
.site-footer__qualiopi { background: #fff; border-radius: var(--radius-m); padding: 0.5rem 0.8rem; width: 200px; height: auto; }
.site-footer__labels p { font-size: 0.85rem; color: rgb(255 255 255 / 0.72); max-width: 52ch; }
.socials { display: flex; gap: 0.5rem; margin-left: auto; }
.socials a { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.08); transition: background-color var(--dur-fast), transform var(--dur-normal) var(--ease-spring); }
.socials a:hover { background: var(--yellow); color: var(--navy); transform: translateY(-3px) rotate(-6deg); }
.socials svg { width: 20px; height: 20px; }
.site-footer__legal { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.78rem; color: rgb(255 255 255 / 0.6); position: relative; }
.site-footer__legal a { color: rgb(255 255 255 / 0.75); }
.site-footer__credit { margin-top: var(--space-s, 1rem); position: relative; font-size: 0.95rem; color: #fff; }
.site-footer__credit a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer__credit a:hover, .site-footer__credit a:focus-visible { text-decoration-thickness: 2px; }
.site-footer__credit-point { color: #4d8dff; text-decoration: none; display: inline-block; }
.mention-convention { margin-top: 0.75rem; font-size: 0.85rem; line-height: 1.45; }
.legal { padding-top: calc(var(--header-h, 72px) + var(--space-l, 3rem)); }
.legal__corps { max-width: 72ch; }
.legal__titre { margin-bottom: 1.5rem; }
.legal__corps h2 { margin: 2rem 0 0.6rem; font-size: 1.15rem; }
.legal__corps p { margin: 0 0 0.5rem; overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__top > :first-child { grid-column: 1 / -1; }
  .socials { margin-left: 0; }
}
@media (max-width: 520px) {
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__qualiopi { width: 220px; }
}

/* ---------- Annonce pour lecteurs d'écran, notifications ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast);
  transform: translate(-50%, 140%); padding: 0.7rem 1.1rem 0.7rem 0.9rem; border-radius: var(--radius-petal);
  background: var(--navy); color: #fff; font-weight: 600; box-shadow: var(--shadow-3);
  display: inline-flex; gap: 0.6rem; align-items: center; transition: transform var(--dur-slow) var(--ease-spring);
  max-width: calc(100vw - 32px);
}
.toast.is-visible { transform: translate(-50%, 0); }
.toast::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); flex: none; }

/* ---------- Apparitions au défilement (pilotées par core.js) ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Contenus selon le profil ----------
   Toutes les variantes sont dans le HTML (rendu serveur possible), le CSS n'affiche
   que celle du profil courant : html[data-profil] + [data-pour="jeune parent …"]. */
html[data-profil='jeune'] [data-pour]:not([data-pour~='jeune']),
html[data-profil='parent'] [data-pour]:not([data-pour~='parent']),
html[data-profil='entreprise'] [data-pour]:not([data-pour~='entreprise']),
html[data-profil='reconversion'] [data-pour]:not([data-pour~='reconversion']) { display: none !important; }

/* ---------- Méga-menu « Formations » ---------- */
.main-nav__item--mega { position: static; }
.main-nav__chev { display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; transition: transform var(--dur-normal) var(--ease-out); }
.mega {
  position: fixed; left: 50%; top: calc(var(--header-h) - 4px); z-index: var(--z-menu);
  width: min(100vw - 2 * var(--gutter), 1080px);
  display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--space-l);
  padding: var(--space-m) var(--space-l) var(--space-l);
  background: var(--bg-raised); border-radius: var(--radius-l); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
  transition: opacity var(--dur-fast) linear 80ms, transform var(--dur-normal) var(--ease-out) 80ms, visibility 0s linear 260ms;
}
.main-nav__item--mega::after { /* pont invisible entre le lien et le panneau */
  content: ''; position: fixed; left: 0; right: 0; top: calc(var(--header-h) - 18px); height: 18px; display: none;
}
.main-nav__item--mega:hover::after { display: block; }
.main-nav__item--mega:hover .mega, .main-nav__item--mega:focus-within .mega, .mega.is-open {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity var(--dur-fast) linear 120ms, transform var(--dur-normal) var(--ease-out) 120ms, visibility 0s;
}
.main-nav__item--mega:hover .main-nav__chev { transform: rotate(180deg); }
.mega.is-closed { opacity: 0 !important; visibility: hidden !important; }
.mega__titre { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 0.6rem; }
.mega__titre--2 { margin-top: var(--space-m); }
.mega__liste { list-style: none; padding: 0; display: grid; gap: 2px; }
.main-nav .mega a::after { display: none; }
.main-nav .mega__univers {
  display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.7rem; border-radius: var(--radius-s); font-size: 0.95rem; font-weight: 600; white-space: normal;
}
.main-nav .mega__univers:hover { background: var(--u-soft); }
.mega__pastille { width: 14px; height: 9px; border-radius: 12px; background: var(--u); }
.mega__univers small { font-size: 0.8rem; font-weight: 600; color: var(--u-text); font-variant-numeric: tabular-nums; }
.mega__niveaux { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.main-nav .mega__niveau { padding: 0.35em 0.8em 0.35em 0.65em; font-size: 0.85rem; border-radius: var(--radius-pill); }
.mega__raccourcis { list-style: none; padding: 0; display: grid; gap: 0.15rem; }
.main-nav .mega__raccourcis a { padding: 0.3rem 0; font-size: 0.92rem; color: var(--accent-ink); font-weight: 600; }
.main-nav .mega__raccourcis a:hover { background: none; text-decoration: underline; }
.mega__form { display: flex; gap: 0.4rem; padding: 5px 5px 5px 14px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.mega__form:focus-within { box-shadow: inset 0 0 0 2px var(--sky); }
.mega__form input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 0.95rem; }
.mega__form .btn { border-radius: var(--radius-pill); min-height: 38px; font-size: 0.95rem; }
.main-nav .mega__tout { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--space-m); padding: 0; font-weight: 650; color: var(--accent-ink); white-space: normal; }
.main-nav .mega__tout:hover { background: none; text-decoration: underline; }
.mega__tout svg { width: 16px; height: 16px; }

/* ---------- Texte agrandi (module d'accessibilité, niveaux 115 à 150 %) ----------
   Les mots longs passent à la ligne et les éléments de grille ou de flex peuvent rétrécir :
   plus rien ne déborde de sa carte ni de l'écran quand le texte grandit. */
html.a11y-taille :is(p, h1, h2, h3, h4, li, a, span, strong, b, dd, dt, label, small, figcaption, address) { overflow-wrap: anywhere; }
html.a11y-taille :is(main, footer, header) :is(div, li, article, section, nav, a, p, dd, dt, label, figure) { min-width: 0; }
html.a11y-taille .ins-corps { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
html.a11y-taille .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.a11y-taille .btn { white-space: normal; text-align: center; height: auto; max-width: 100%; overflow-wrap: anywhere; flex-wrap: wrap; }
/* Frise SOLTéA : en liste à deux colonnes quand le texte est agrandi. */
html.a11y-taille .ent-taxe__axe { height: auto; background: none; margin: var(--space-m) 0 0; }
html.a11y-taille :is(.ent-taxe__progres, .ent-taxe__auj) { display: none; }
html.a11y-taille .ent-taxe__jalons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
html.a11y-taille .ent-taxe__jalon { position: static; transform: none; width: auto; text-align: left; justify-items: start; padding-top: 0; }
html.a11y-taille .ent-taxe__jalon::before { display: none; }

/* Grain papier, plus discret encore, sur les en-têtes des autres pages (cohérence avec l'accueil). */
:is(.ins-entete, .cat-entete) { isolation: isolate; }
:is(.ins-entete, .cat-entete)::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 220px; opacity: 0.04; mix-blend-mode: multiply;
}
/* Journée type : le téléphone (format story, taille fixe) laisse la place à la liste des
   chapitres, qui porte le même texte et grandit avec lui. */
html.a11y-taille .fiche-journee__telephone { display: none; }
html.a11y-taille .fiche-journee__grille { grid-template-columns: minmax(0, 1fr); }
html.a11y-taille .con-coordonnees__tel :is(b, span) { white-space: normal; }
html.a11y-taille .con-coordonnees__tel b { font-size: clamp(1.6rem, 4vw, 2.4rem); }
html.a11y-taille .ent-taxe__uai { grid-template-columns: minmax(0, 1fr); }
html.a11y-taille .adm-frise__pastille { width: auto; height: auto; min-width: var(--pastille); min-height: var(--pastille); padding: 6px; }

/* ---------- Sophie en mode guide (panneau ancré à gauche, classe crl-guide posée par le widget) ----------
   Le contenu et le pied de page se décalent pour laisser la place au panneau (24 px de marge + sa largeur
   + 24 px d'écart) : rien du site ne passe dessous. L'en-tête reste entier : le panneau commence sous lui.
   En dessous de 1024 px le panneau reste posé sur la page (pas assez de largeur pour deux colonnes).
   --sophie-zone-guide est lue par core.js (scrollTo, highlight). */
:root { --sophie-zone-guide: 0px; }
@media (min-width: 1024px) {
  html.crl-guide { --sophie-zone-guide: calc(var(--sophie-panneau-largeur, 440px) + 48px); }
  :is(#page, .site-footer) { transition: margin-left 300ms var(--ease-out); }
  html.crl-guide :is(#page, .site-footer) { margin-left: var(--sophie-marge-guide, var(--sophie-zone-guide)); zoom: var(--sophie-zoom-guide, 1); }
}
/* Fenêtre de 1024 à 1487 px : avec le panneau, la page n'a plus que 540 à 1000 px, sous le seuil où
   les modules par deux de la fiche s'empilent (formation.css, 1000 px) : on les empile aussi. */
/* (empilement des modules par deux en mode guide retiré : la page garde sa mise en page, réduite par zoom) */
@media (prefers-reduced-motion: reduce) {
  :is(#page, .site-footer) { transition: none; }
}
/* Texte agrandi, suite : la rosace et l'anneau gardent leurs étiquettes à taille fixe (géométrie
   dessinée), la fin du jeu et les cartes grandissent avec leur texte. */
html.a11y-taille .acc-porte__nom { font-size: 15px; }
html.a11y-taille .acc-porte__texte { font-size: 11px; }
html.a11y-taille .cfa-chiffres__pc b { font-size: 34px; }
html.a11y-taille .cfa-chiffres__pc span { font-size: 18px; }
html.a11y-taille .ori-fin { height: auto; min-height: var(--carte-h); }
html.a11y-taille .ori-res__formation { grid-template-columns: minmax(0, 1fr); justify-items: start; }
html.a11y-taille .con-formulaire__assistant { overflow: visible; }
html.a11y-taille .fcarte__pro { top: auto; bottom: 14px; }
html.a11y-taille .con-formulaire__assistant { height: auto; align-self: start; }
html.a11y-taille .ent-offre__ligne { grid-template-columns: minmax(0, 1fr); }
html.a11y-taille .cat__groupe-titre, html.a11y-taille #cat-g-n { letter-spacing: 0; }

/* Entrée « Alumni » du menu (réseau des anciens), avec la rosace du réseau (13/10). */
.main-nav__alumni a { display: inline-flex; align-items: center; gap: 0.4rem; --u: var(--orange, #EF7741); }
.main-nav__rosace { width: 1.05rem; height: 1.05rem; flex: none; transition: transform var(--dur-normal) var(--ease-out); }
@media (hover: hover) { .main-nav__alumni a:hover .main-nav__rosace { transform: rotate(60deg); } }
@media (prefers-reduced-motion: reduce) { .main-nav__rosace { transition: none; } }
/* Avec l'entrée « Alumni », le menu complet demande environ 60 px de plus : il se resserre jusqu'à 1 535 px
   pour rester sur une ligne (13/10). */
@media (min-width: 1280px) and (max-width: 1535px) {
  .site-header__inner { column-gap: 0.75rem; }
  .main-nav__list { gap: 0; }
  .main-nav a { padding-inline: 0.48rem; font-size: 0.88rem; }
  .main-nav a::after { left: 0.48rem; right: 0.48rem; }
  .header-actions { gap: 0.45rem; }
}
@media (min-width: 1280px) and (max-width: 1400px) {
  .main-nav a { padding-inline: 0.38rem; font-size: 0.85rem; }
  .main-nav a::after { left: 0.38rem; right: 0.38rem; }
  .main-nav__alumni a { gap: 0.3rem; }
}

/* Logo de CFA Blagnac Alumni (mortier) : blanc sur les fonds bleu nuit des blocs Alumni, encre dans le menu. */
.alu-mortier { color: #fff; overflow: visible; }
.main-nav__rosace.alu-mortier { color: var(--navy); width: 1.45rem; height: 0.95rem; }
@media (hover: hover) { .main-nav__alumni a:hover .main-nav__rosace { transform: rotate(-8deg) translateY(-1px); } }
.acc-alumni__mark.alu-mortier, .alu__mark.alu-mortier { width: 56px; height: 36px; }
.site-footer__alumni-mark.alu-mortier { width: 48px; height: 31px; }
@media (min-width: 1280px) and (max-width: 1320px) {
  .main-nav a { padding-inline: 0.3rem; }
  .main-nav a::after { left: 0.3rem; right: 0.3rem; }
}