/* ==========================================================================
   IPSIK, Design system
   Base : Apple design analysis (DESIGN.md), typographie, échelle, pastilles.
   Couleur de marque unique : bleu IPSIK #20469B (8,7:1 sur blanc).
   Verre (glass) réservé aux éléments posés sur une image ou un menu.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"), local("Arimo");
  size-adjust: 104.3%; ascent-override: 92.9%; descent-override: 23.1%; line-gap-override: 0%;
}

:root {
  /* marque */
  --primary: #20469b;
  --primary-hover: #1a3a82;
  --primary-focus: #3a67d1;
  --primary-soft: #e9eefa;
  --primary-on-dark: #a9c1ff;

  /* encre et surfaces */
  --ink: #0f1830;
  --ink-80: #2b3448;
  --ink-56: #586277;
  --body-muted: #c3cbe0;
  --hairline: #dde2ec;
  --canvas: #ffffff;
  --mist: #f3f5fa;
  --navy-950: #060d24;
  --navy-900: #0a1636;
  --navy-800: #0f1f4a;
  --navy-700: #183071;

  /* type */
  --font: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Inter Fallback", "Segoe UI", Roboto, sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Inter Fallback", "Segoe UI", Roboto, sans-serif;

  /* espacement, rayons */
  --s-xs: 8px; --s-sm: 12px; --s-md: 17px; --s-lg: 24px; --s-xl: 32px; --s-xxl: 48px; --s-section: 96px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 26px; --r-pill: 9999px;

  /* gabarit */
  --w-grid: 1180px;
  --gutter: max(22px, env(safe-area-inset-left));
  --nav-h: 68px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --fade-rgb: 6, 13, 36;
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  /* verre */
  --glass-dark-bg: rgba(8, 17, 44, .52);
  --glass-light-bg: rgba(255, 255, 255, .78);
  --glass-blur: saturate(170%) blur(22px);
  --shadow-float: 0 28px 70px -28px rgba(6, 13, 36, .55);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font); font-size: 17px; font-weight: 400; line-height: 1.5; letter-spacing: -0.02em;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
p, ul, ol, dl, dd, figure, blockquote, h1, h2, h3, h4 { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
strong, b { font-weight: 600; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: inherit; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
::selection { background: rgba(32, 70, 155, .18); }

.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 { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--canvas); color: var(--primary); padding: 10px 16px; border-radius: var(--r-sm); }
.skip:focus { top: 12px; }
.icon { width: 1em; height: 1em; flex: none; }
.nowrap { white-space: nowrap; }
.muted { color: var(--ink-56); }
.center { text-align: center; }

/* ---------- Verre ---------- */
.glass-dark { background: var(--glass-dark-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255, 255, 255, .16); color: #fff; }
.glass-light { background: var(--glass-light-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255, 255, 255, .7); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-dark { background: rgba(8, 17, 44, .82); }
  .glass-light { background: rgba(255, 255, 255, .96); }
}

/* ---------- Typographie ---------- */
.t-hero    { font-family: var(--font-display); font-size: 52px; font-weight: 600; line-height: 1.07; letter-spacing: -0.025em; }
.t-display { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.t-display-md { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.16; letter-spacing: -0.015em; }
.t-lead-airy { font-size: 22px; font-weight: 300; line-height: 1.5; letter-spacing: -0.01em; }
.t-tagline { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.2; }
.t-caption { font-size: 14px; line-height: 1.45; letter-spacing: -0.01em; }
.t-eyebrow { font-size: 14px; font-weight: 600; color: var(--ink-56); }
@media (max-width: 1068px) { .t-hero { font-size: 42px; } .t-display { font-size: 34px; } .t-display-md { font-size: 27px; } }
@media (max-width: 640px) { .t-hero { font-size: 34px; } .t-display { font-size: 28px; line-height: 1.14; } .t-display-md { font-size: 24px; } .t-lead-airy { font-size: 19px; } }

/* ---------- Conteneurs et sections ---------- */
.wrap { width: 100%; max-width: calc(var(--w-grid) + 2 * 22px); margin-inline: auto; padding-inline: var(--gutter); }
.tile { padding-block: var(--s-section); }
.tile--light { background: var(--canvas); }
.tile--parchment { background: var(--mist); }
.tile--dark { background: var(--navy-900); color: #fff; }
.tile--black { background: var(--navy-950); color: #fff; }
.tile--flush-top { padding-top: 0; }
.tile--flush-bottom { padding-bottom: 0; }
:is(.tile--dark, .tile--black) a:not(.pill) { color: var(--primary-on-dark); }
:is(.tile--dark, .tile--black) .muted { color: var(--body-muted); }
@media (max-width: 734px) { .tile { padding-block: 64px; } }

/* En-tête de section : titre à gauche, accroche à droite */
.head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; max-width: var(--w-grid); margin: 0 auto 52px; }
.head--solo { grid-template-columns: minmax(0, 1fr); }
.head__main { display: grid; gap: 10px; max-width: 760px; }
.head__aside { display: grid; gap: 14px; justify-items: start; padding-bottom: 4px; }
.head__lede { font-size: 18px; line-height: 1.5; color: var(--ink-56); }
:is(.tile--dark, .tile--black) .head__lede { color: var(--body-muted); }
@media (max-width: 834px) { .head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; } }

/* ---------- Boutons ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 22px; border-radius: var(--r-pill);
  font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
  background: var(--primary); color: #fff; border: 1px solid var(--primary);
  transition: transform .16s var(--ease-out), background-color .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap; -webkit-tap-highlight-color: transparent; text-decoration: none !important;
}
.pill:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.pill:active { transform: scale(.97); }
.pill .icon { width: 17px; height: 17px; }
.pill--ghost { background: transparent; color: var(--primary); border-color: rgba(32, 70, 155, .45); }
.pill--ghost:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.pill--light { background: #fff; color: var(--navy-900); border-color: #fff; }
.pill--light:hover { background: #e9eefa; border-color: #e9eefa; color: var(--navy-900); }
.pill--sm { font-size: 14px; padding: 7px 15px; min-height: 36px; }
.pill--glass { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; }
.pill--glass:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.6); }
:is(.tile--dark, .tile--black, .cover, .feature, .footer, .flyout__cta) .pill--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
:is(.tile--dark, .tile--black, .cover, .feature, .footer, .flyout__cta) .pill--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.pills { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.link { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-size: 16px; font-weight: 500; }
.link::after { content: "›"; font-size: 1.2em; line-height: 1; transform: translateY(-1px); transition: transform .2s var(--ease); }
.link:hover::after { transform: translate(3px, -1px); }

.icon-circle { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.8); color: var(--ink); display: grid; place-items: center; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.6); transition: transform .16s var(--ease-out), opacity .2s ease; -webkit-tap-highlight-color: transparent; }
.icon-circle:active { transform: scale(.95); }
.icon-circle[disabled] { opacity: .4; cursor: default; }
.icon-circle .icon { width: 18px; height: 18px; }

/* ---------- Bandeau d'annonce ---------- */
.ribbon { position: relative; z-index: 101; background: var(--navy-950); text-align: center; padding: 9px var(--gutter); font-size: 12.5px; line-height: 1.3; letter-spacing: -0.005em; color: rgba(255,255,255,.76); }
.ribbon a { white-space: nowrap; color: #fff; font-weight: 600; }
.ribbon__short { display: none; }
@media (max-width: 734px) { .ribbon__long { display: none; } .ribbon__short { display: inline; } }

/* ==========================================================================
   Navigation, blanche par défaut ; transparente sur une couverture tant
   qu'on ne la survole pas et qu'on n'a pas défilé.
   ========================================================================== */
.gnav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); color: var(--ink);
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 rgba(15, 24, 48, .08);
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease; }
.has-subnav .gnav { position: relative; }
.has-cover .gnav { margin-bottom: calc(-1 * var(--nav-h)); }
.has-cover:not(.flyout-open):not(.menu-open) .gnav:not(.is-solid):not(:hover):not(:focus-within) {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: #fff; }
.gnav__inner { height: var(--nav-h); display: flex; align-items: center; gap: 28px; max-width: calc(var(--w-grid) + 2 * 22px); margin: 0 auto; padding-inline: var(--gutter); }
.gnav__logo { position: relative; display: flex; align-items: center; height: var(--nav-h); flex: none; }
.gnav__logo img { height: 40px; width: auto; transition: opacity .2s ease; }
.gnav__logo .logo-on-dark { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.has-cover:not(.flyout-open):not(.menu-open) .gnav:not(.is-solid):not(:hover):not(:focus-within) .logo-on-dark { opacity: 1; }
.has-cover:not(.flyout-open):not(.menu-open) .gnav:not(.is-solid):not(:hover):not(:focus-within) .logo-on-light { opacity: 0; }
.gnav__menu { flex: 1; display: flex; align-items: center; gap: 20px; }
.gnav__list { display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: 2px; }
.gnav__link { position: relative; display: flex; align-items: center; gap: 4px; height: var(--nav-h); padding: 0 11px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: inherit; white-space: nowrap; }
.gnav__link:hover { text-decoration: none; }
.gnav__link::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 14px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease-out); }
.gnav__link:hover::after, .gnav__link[aria-current="page"]::after, .nav-item.is-open > .gnav__link::after { transform: scaleX(1); }
.gnav__chev { width: 12px; height: 12px; opacity: .6; transition: transform .2s var(--ease-out); }
.nav-item.is-open .gnav__chev { transform: rotate(180deg); }
.gnav__cta { font-size: 14px; min-height: 36px; padding: 7px 16px; }
.has-cover:not(.flyout-open):not(.menu-open) .gnav:not(.is-solid):not(:hover):not(:focus-within) .gnav__cta { background: #fff; border-color: #fff; color: var(--navy-900); }
.gnav__burger { display: none; width: 44px; height: 44px; place-items: center; color: inherit; margin-left: auto; margin-right: -10px; }
.gnav__burger .icon { width: 20px; height: 20px; }
.gnav__burger .i-close, .gnav__burger[aria-expanded="true"] .i-menu { display: none; }
.gnav__burger[aria-expanded="true"] .i-close { display: block; }

/* Méga-menus */
.flyout { position: absolute; left: 0; right: 0; top: var(--nav-h); z-index: 99;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 rgba(15,24,48,.06) inset, 0 40px 70px -40px rgba(6, 13, 36, .45);
  color: var(--ink); opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: opacity .15s ease, clip-path .18s var(--ease-out), visibility .18s; }
.nav-item.is-open > .flyout { opacity: 1; visibility: visible; clip-path: inset(0 0 -60px 0); transition: opacity .2s ease, clip-path .26s var(--ease-out), visibility .26s; }
.flyout__inner { max-width: calc(var(--w-grid) + 2 * 22px); margin: 0 auto; padding: 36px var(--gutter) 44px; display: grid; grid-template-columns: 1.35fr .9fr 1fr; gap: 40px; }
.flyout__inner > * { opacity: 0; transform: translateY(-6px); transition: opacity .12s ease, transform .12s ease; }
.nav-item.is-open .flyout__inner > * { opacity: 1; transform: none; transition: opacity .24s ease, transform .28s var(--ease-out); }
.nav-item.is-open .flyout__inner > :nth-child(2) { transition-delay: .04s; }
.nav-item.is-open .flyout__inner > :nth-child(3) { transition-delay: .08s; }
.flyout a:hover { text-decoration: none; }
.flyout__main { display: grid; gap: 4px; align-content: start; }
.flyout__main a { display: grid; gap: 2px; padding: 12px 14px; margin-inline: -14px; border-radius: var(--r-md); color: var(--ink); transition: background-color .2s var(--ease); }
.flyout__main a:hover { background: var(--mist); }
.flyout__main strong { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.flyout__main span { font-size: 14px; color: var(--ink-56); }
.flyout__side { display: grid; align-content: start; }
.flyout__label { font-size: 12px; font-weight: 600; color: var(--ink-56); margin: 14px 0 6px; }
.flyout__label:first-child { margin-top: 12px; }
.flyout__side a { font-size: 15px; padding: 5px 0; color: var(--ink-80); }
.flyout__side a:hover { color: var(--primary); }
.flyout__feature { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; min-height: 260px; background: var(--navy-800); }
.flyout__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .flyout__feature:hover img { transform: scale(1.04); } }
.flyout__feature-label { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); color: #fff;
  background: var(--glass-dark-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.16); }
.flyout__feature-label strong { font-size: 16px; }
.flyout__feature-label span { font-size: 13px; color: rgba(255,255,255,.8); }
.flyout .flyout__inner:has(.flyout__programs) { grid-template-columns: 2fr 1fr; }
.flyout__programs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; align-content: start; }
.flyout__programs a { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 10px; margin: -2px -10px; border-radius: var(--r-md); color: var(--ink); transition: background-color .2s var(--ease); }
.flyout__programs a:hover { background: var(--mist); }
.flyout__programs img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--mist); }
.flyout__programs strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.flyout__programs a span span { font-size: 13px; color: var(--ink-56); }
.flyout__cta { display: grid; align-content: start; justify-items: start; gap: 4px; padding: 26px; border-radius: var(--r-lg); background: var(--primary); color: #fff; }
.flyout__cta-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.flyout__cta p:not(.flyout__cta-title) { font-size: 14px; color: rgba(255,255,255,.82); margin-bottom: 10px; }
.flyout__cta a:not(.pill) { font-size: 15px; font-weight: 500; color: #fff; padding: 4px 0; }
.flyout__cta a:not(.pill)::after { content: " ›"; }
.flyout__cta .pill { margin-top: 14px; }
.page-scrim { position: fixed; inset: 0; background: rgba(6, 13, 36, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s; z-index: 90; pointer-events: none; }
body.flyout-open .page-scrim { opacity: 1; visibility: visible; }

@media (max-width: 1100px) and (min-width: 1024px) { .gnav__link { padding: 0 7px; font-size: 13.5px; } }
/* Bouton d'accordéon du menu : créé par le script pour tous les écrans, il ne sert
   qu'en dessous de 1024 px, où les déroulants ne s'ouvrent plus au survol. */
.gnav__sub { display: none; }

@media (max-width: 1023px) {
  .gnav__burger { display: grid; }
  /* Menu ouvert : une seule surface qui couvre tout l'écran, bandeau compris. Le logo
     et le bouton de fermeture sont épinglés par-dessus, donc ils ne peuvent pas partir
     au défilement, ce qui arrivait sur les pages à sous-navigation où l'en-tête n'est
     pas collant. Le panneau n'est plus ancré sur une mesure prise à l'ouverture, qui
     devenait fausse dès que la page bougeait derrière et laissait une bande du site
     visible en haut. L'en-tête lui-même n'est pas déplacé : la hauteur du document ne
     change pas, donc la position de lecture est conservée à la fermeture. */
  .gnav__menu { position: fixed; inset: 0; z-index: 102; background: #fff; color: var(--ink);
    padding: calc(var(--nav-h) + 10px) var(--gutter) 48px; overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    flex-direction: column; align-items: stretch; gap: 0; }
  body.menu-open .gnav__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .26s var(--ease-out), visibility .26s; }
  /* backdrop-filter sur l'en-tête crée un bloc conteneur : sans ce retrait, le logo et
     le bouton épinglés se positionneraient par rapport à lui et non à l'écran. */
  body.menu-open .gnav { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
  /* Le bandeau est masqué pendant l'ouverture. Il le faut : .gnav porte z-index: 100 et
     crée donc un contexte d'empilement, si bien que le panneau et ses boutons, quels que
     soient leurs z-index, restent sous le bandeau qui est à 101 au niveau racine.
     visibility plutôt que display : la hauteur du document ne bouge pas, donc la
     position de lecture reste intacte à la fermeture. */
  body.menu-open .ribbon { visibility: hidden; }
  /* Bande opaque sous le logo et la croix : le contenu du menu passe dessous au
     défilement au lieu de se superposer à eux. Elle appartient au panneau, donc elle
     n'existe que lorsqu'il est ouvert. */
  .gnav__menu::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
    background: #fff; box-shadow: 0 1px 0 var(--hairline); z-index: 5; }
  body.menu-open .gnav__logo { position: fixed; top: 0; left: var(--gutter); height: var(--nav-h); z-index: 103; }
  body.menu-open .gnav__burger { position: fixed; top: 10px; right: var(--gutter); z-index: 103; }
  html.menu-open, body.menu-open { overflow: hidden; }
  .gnav__list { flex-direction: column; align-items: stretch; flex: none; gap: 0; }
  .gnav__list > li { border-bottom: 1px solid var(--hairline); }
  .gnav__link { height: auto; padding: 16px 0; font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
  .gnav__link::after, .gnav__chev { display: none; }
  .gnav__list > li { position: relative; }
  .gnav__link { padding-right: 60px; }

  /* Les déroulants deviennent des accordéons : le libellé reste un lien vers la page
     de section, le bouton à droite ouvre la liste. Deux cibles distinctes, donc on
     n'oblige personne à passer par le sous-menu pour atteindre la page. */
  .gnav__sub { position: absolute; top: 0; right: calc(-1 * var(--gutter)); width: calc(44px + var(--gutter));
    height: 58px; display: grid; place-items: center; color: var(--ink-56); }
  .gnav__sub .icon { width: 20px; height: 20px; transition: rotate .22s var(--ease-out); }
  .nav-item.is-sub-open > .gnav__sub { color: var(--primary); }
  .nav-item.is-sub-open > .gnav__sub .icon { rotate: 180deg; }

  .flyout { position: static; display: none; opacity: 1; visibility: visible; clip-path: none;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transition: none; }
  .nav-item.is-sub-open > .flyout { display: block; }
  .flyout__inner { display: block; max-width: none; padding: 0 0 14px; }
  .flyout__inner > * { opacity: 1; transform: none; }
  /* Image d'illustration et panneau bleu : du mobilier de grand écran, qui doublerait
     la hauteur du menu pour des liens accessibles par ailleurs. */
  .flyout__feature, .flyout__cta { display: none; }
  /* Un seul style de lien dans tout le sous-menu, et un seul style d'intitulé de
     groupe. Le déroulant de grand écran en mélangeait quatre, ce qui se voyait dès
     qu'on les empilait en colonne sur téléphone. Les descriptions sont masquées :
     elles ajoutaient un quatrième corps de texte et doublaient la hauteur des lignes. */
  .flyout__main { gap: 0; }
  .flyout__main a, .flyout__side a, .flyout__programs a {
    padding: 12px 0; margin: 0; border-radius: 0; color: var(--ink); }
  .flyout__main strong, .flyout__programs strong,
  .flyout__side a { font-family: var(--font); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
  .flyout__main span { display: none; }
  .flyout__label { font-size: 12.5px; font-weight: 600; color: var(--ink-56); margin: 18px 0 2px; }

  .flyout__programs { grid-template-columns: 1fr; gap: 0; }
  .flyout__programs a { display: grid; grid-template-columns: 38px 1fr; gap: 13px; align-items: center; }
  .flyout__programs img { width: 38px; height: 38px; border-radius: 9px; }
  /* Seule exception : la ligne de métadonnées, qui porte une information. */
  .flyout__programs a span span { font-size: 13px; }
  .flyout__side { padding-top: 2px; }

  .gnav__cta { margin-top: 26px; font-size: 16px; min-height: 50px; padding: 13px 26px; align-self: stretch; }
}

/* Sous-navigation (verre clair, collante) */
.subnav { position: sticky; top: 0; z-index: 80; height: 56px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 1px 0 rgba(15, 24, 48, .08); }
.subnav__inner { max-width: calc(var(--w-grid) + 2 * 22px); margin: 0 auto; padding-inline: var(--gutter); height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg); }
.subnav__title { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subnav__title:hover { text-decoration: none; }
.subnav__links { display: flex; align-items: center; gap: 22px; }
.subnav__links a:not(.pill) { font-size: 13px; color: var(--ink-80); white-space: nowrap; }
.subnav__links a:not(.pill):hover { color: var(--primary); text-decoration: none; }
.subnav__links a.is-active { color: var(--primary); font-weight: 600; }
@media (max-width: 834px) { .subnav__links a:not(.pill) { display: none; } .subnav__title { font-size: 17px; } }

/* ==========================================================================
   Couverture, la vidéo se fond dans le bleu nuit en bas ; le texte est posé
   dans cette zone sombre (aucun panneau), la moitié haute reste nette.
   ========================================================================== */
.cover { position: relative; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy-950); color: #fff; }
/* Volontairement en deçà du plein écran : le bord de la section suivante reste visible. */
.cover--home { min-height: clamp(560px, 80svh, 850px); }
.cover--page { min-height: clamp(560px, 78svh, 820px); }
.cover--short { min-height: clamp(460px, 60svh, 620px); }
/* Le débord vertical est permanent : la parallaxe ne fait que translater à l'intérieur.
   Appliqué après coup par le script, il déplaçait réellement le calque (CLS). */
.cover__media { position: absolute; inset: -16% 0; z-index: -2; }
/* > picture > img : les couvertures qui ont un recadrage portrait pour téléphone. */
.cover__media > img, .cover__media > picture > img, .cover__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La vidéo ne se charge qu'au moment de la lecture : elle apparaît en fondu sur
   l'affiche, au lieu de la remplacer d'un coup. L'opacité est composée par le GPU,
   donc aucun décalage de mise en page. */
/* Pas de préfixe .js : l'état doit être le même dès la toute première image peinte,
   sinon l'arrivée tardive de la classe fait compter un décalage à Chrome. Sans
   JavaScript la vidéo ne démarre pas non plus, l'affiche tient lieu de visuel. */
video[data-ambient] { opacity: 0; transition: opacity .45s linear; }
video[data-ambient].is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { video[data-ambient] { transition: none; } }
.cover::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--fade-rgb),.62) 0, rgba(var(--fade-rgb),.25) 110px, rgba(var(--fade-rgb),0) 200px),
    linear-gradient(0deg, rgba(var(--fade-rgb),.88) 0, rgba(var(--fade-rgb),.74) 16%, rgba(var(--fade-rgb),.48) 32%, rgba(var(--fade-rgb),.16) 48%, rgba(var(--fade-rgb),0) 62%); }
.cover__inner { width: 100%; max-width: calc(var(--w-grid) + 2 * 22px); margin: 0 auto; padding: calc(var(--nav-h) + 64px) var(--gutter) 56px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 80px; align-items: end; }
.cover__text { display: grid; gap: 14px; justify-items: start; }
.cover__title { font-family: var(--font-display); font-size: clamp(30px, 3vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -0.022em; max-width: 18ch; text-wrap: balance; }
.cover--home .cover__title { font-size: clamp(30px, 3.3vw, 50px); line-height: 1.06; max-width: none; }
.cover__lede { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.8); max-width: 48ch; }
.cover__side { display: grid; gap: 26px; justify-items: start; padding-bottom: 4px; }
.cover .crumbs { color: rgba(255,255,255,.66); margin-bottom: 2px; }
.cover .crumbs a { color: rgba(255,255,255,.86); }
.cover .crumbs li + li::before { color: rgba(255,255,255,.4); }
.cover a:not(.pill):hover { color: #fff; }
.cover__facts { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.cover__facts > div { padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.18); }
.cover__facts dt { font-size: 12px; color: rgba(255,255,255,.6); }
.cover__facts dd { margin-top: 3px; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.video-control { position: absolute; right: var(--gutter); bottom: 44px; z-index: 3; }
.cover .video-control { top: calc(var(--nav-h) + 20px); bottom: auto; right: max(var(--gutter), calc((100vw - var(--w-grid)) / 2)); }
.feature .video-control { right: max(var(--gutter), calc((100vw - var(--w-grid)) / 2)); }
.cover .icon-circle, .feature .icon-circle { background: rgba(6,13,36,.5); color: #fff; border-color: rgba(255,255,255,.28); }
@media (max-width: 900px) {
  .cover__inner { grid-template-columns: 1fr; gap: 24px; padding-bottom: 40px; }
  .cover__side { gap: 22px; }
}
@media (max-width: 734px) {
  .cover--home { min-height: max(520px, 72svh); }
  .cover--page, .cover--short { min-height: 0; }
  .cover--page .cover__inner, .cover--short .cover__inner { padding-top: min(78vw, 400px); }
  .cover::after { background:
    linear-gradient(180deg, rgba(var(--fade-rgb),.5) 0, rgba(var(--fade-rgb),0) 130px),
    linear-gradient(0deg, rgba(var(--fade-rgb),.9) 0, rgba(var(--fade-rgb),.78) 30%, rgba(var(--fade-rgb),.42) 52%, rgba(var(--fade-rgb),0) 74%); }
  .cover__inner { padding-bottom: 32px; }
  .cover__lede { font-size: 15.5px; }
  .cover .video-control { top: calc(var(--nav-h) + 12px); right: 12px; }
  .cover .pill { font-size: 15px; padding: 10px 18px; min-height: 44px; }
  .cover__facts dd { font-size: 14px; }
}

/* Invitation à défiler (accueil) */
.cover--home .cover__inner { padding-bottom: 104px; }
.cover__scroll { position: absolute; left: 50%; bottom: 26px; z-index: 3; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; border: 1px solid rgba(255,255,255,.45); transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.cover__scroll .icon { width: 18px; height: 18px; animation: scroll-hint 2.2s var(--ease) infinite; }
.cover__scroll:hover { background: rgba(255,255,255,.14); border-color: #fff; text-decoration: none; }
@keyframes scroll-hint { 0%, 100% { transform: translateY(-2px); opacity: 1; } 50% { transform: translateY(4px); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .cover__scroll .icon { animation: none; } }
@media (max-width: 734px) { .cover--home .cover__inner { padding-bottom: 88px; } .cover__scroll { bottom: 20px; width: 40px; height: 40px; margin-left: -20px; } }

/* ==========================================================================
   Section en deux temps : titre collant à gauche, contenu à droite
   ========================================================================== */
.sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 88px; max-width: calc(var(--w-grid) + 2 * 22px); margin: 0 auto; align-items: start; }
.sec__head { position: sticky; top: 96px; display: grid; gap: 14px; justify-items: start; }
.sec__lede { font-size: 17px; color: var(--ink-56); max-width: 38ch; }
:is(.tile--dark, .tile--black) .sec__lede { color: var(--body-muted); }
.sec__head .pills { margin-top: 10px; }
.sec__body { display: grid; gap: 40px; min-width: 0; }
.sec__body.prose { gap: 0; }
.sec__body > h3 { font-size: 21px; line-height: 1.2; margin-bottom: -22px; }
.sec .prose, .sec .checks, .sec .faq, .sec .answer { margin: 0; max-width: none; }
@media (max-width: 834px) { .sec { grid-template-columns: 1fr; gap: 28px; } .sec__head { position: static; } }

/* Registre */
.ledger { border-bottom: 1px solid var(--hairline); }
.ledger > li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; padding: 22px 0 24px; border-top: 1px solid var(--hairline); }
.ledger--plain > li { grid-template-columns: minmax(0, 1fr); }
.ledger__k { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--primary); font-variant-numeric: tabular-nums; }
.ledger__v { display: grid; gap: 6px; justify-items: start; }
.ledger h3 { font-size: 19px; line-height: 1.26; letter-spacing: -0.015em; }
.ledger p { font-size: 15px; line-height: 1.5; color: var(--ink-80); max-width: 62ch; }
.ledger .link { font-size: 15px; margin-top: 2px; }
:is(.tile--dark, .tile--black) :is(.ledger, .ledger > li) { border-color: rgba(255,255,255,.16); }
:is(.tile--dark, .tile--black) .ledger__k { color: var(--primary-on-dark); }
:is(.tile--dark, .tile--black) .ledger p { color: var(--body-muted); }
@media (max-width: 640px) { .ledger > li { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 18px 0 20px; } .ledger--plain > li { grid-template-columns: 1fr; } .ledger__k { font-size: 17px; } .ledger h3 { font-size: 17px; } }

/* ==========================================================================
   Filières, photo plein cadre, panneau de verre posé en bas
   ========================================================================== */
.pgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; max-width: 1440px; margin: 0 auto; padding-inline: 14px; }
.pcard { position: relative; isolation: isolate; grid-column: span 2; min-height: 440px; display: flex; align-items: flex-end; border-radius: var(--r-xl); overflow: hidden; background: var(--navy-800); color: #fff; }
.pcard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s var(--ease-out); }
.pcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6,13,36,.45) 0, rgba(6,13,36,0) 45%); pointer-events: none; }
.pcard--xl { grid-column: span 4; min-height: 580px; }
.pcard--tall { min-height: 580px; }
.pcard--band { grid-column: span 6; min-height: 320px; }
.pcard__body { margin: 14px; width: calc(100% - 28px); padding: 20px 22px; display: grid; gap: 6px; justify-items: start; border-radius: 18px; }
.pcard--xl .pcard__body, .pcard--band .pcard__body { width: auto; max-width: 520px; padding: 24px 26px; }
.pcard__kicker { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.78); }
.pcard__title { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.pcard--xl .pcard__title { font-size: 34px; }
.pcard--tall .pcard__title, .pcard--band .pcard__title { font-size: 28px; }
.pcard__title a { color: #fff; }
.pcard__title a:hover { text-decoration: none; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard__tagline { font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.84); }
.pcard__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-top: 8px; }
.pcard__more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.pcard__more .icon { width: 16px; height: 16px; transition: transform .2s var(--ease-out); }
.pcard .pill { position: relative; z-index: 2; }
@media (hover: hover) and (pointer: fine) { .pcard:hover > img { transform: scale(1.04); } .pcard:hover .pcard__more .icon { transform: translateX(4px); } }
.pcard:focus-within { outline: 2px solid var(--primary-focus); outline-offset: 3px; }
.pcard__title a:focus-visible { outline: none; }
@media (max-width: 1068px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcard, .pcard--tall { grid-column: span 1; min-height: 440px; }
  .pcard--xl, .pcard--band { grid-column: span 2; }
}
@media (max-width: 734px) {
  .pgrid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; gap: 12px; }
  .pgrid::-webkit-scrollbar { display: none; }
  .pcard, .pcard--xl, .pcard--tall, .pcard--band { grid-column: auto; min-height: 480px; scroll-snap-align: start; }
  .pcard__body, .pcard--xl .pcard__body, .pcard--band .pcard__body { margin: 10px; width: calc(100% - 20px); max-width: none; padding: 18px; }
  .pcard--xl .pcard__title, .pcard--tall .pcard__title, .pcard--band .pcard__title { font-size: 26px; }
}
.pgrid-hint { display: none; }
@media (max-width: 734px) { .pgrid-hint { display: block; text-align: right; font-size: 12px; color: var(--ink-56); padding: 10px var(--gutter) 0; } }

/* Visuel plein cadre, texte posé dans le fondu bleu nuit (vidéo du hall, stages) */
.feature { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(560px, 82svh, 840px); overflow: hidden; background: var(--navy-950); color: #fff; }
.feature__media { position: absolute; inset: -16% 0; z-index: -2; }
.feature__media > img, .feature__media > picture > img, .feature__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, #060d24 0, rgba(6,13,36,.92) 18%, rgba(6,13,36,.6) 36%, rgba(6,13,36,0) 60%); }
.feature__inner { width: 100%; max-width: calc(var(--w-grid) + 2 * 22px); margin: 0 auto; padding: 120px var(--gutter) 56px; }
.feature__panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 80px; align-items: end; }
.feature__panel .t-display { font-size: clamp(28px, 2.8vw, 40px); max-width: 16ch; }
.feature__panel p { font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 52ch; }
.feature a:not(.pill) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .feature__panel { grid-template-columns: 1fr; } }
@media (max-width: 734px) {
  .feature { min-height: 0; }
  .feature::after { background: linear-gradient(0deg, #060d24 0, rgba(6,13,36,.94) 34%, rgba(6,13,36,.55) 56%, rgba(6,13,36,0) 78%); }
  .feature__inner { padding: min(92vw, 460px) var(--gutter) 36px; }
  .feature .video-control { top: 16px; bottom: auto; right: 12px; }
}

/* Pellicule photo */
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--w-grid)) / 2)); padding: 4px max(var(--gutter), calc((100vw - var(--w-grid)) / 2)) 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__nav { display: flex; gap: 12px; justify-content: flex-end; max-width: calc(var(--w-grid) + 44px); margin: 6px auto 0; padding-inline: var(--gutter); }
/* Cadre paysage : les photos du bâtiment sont des vues larges, un cadre portrait les amputerait. */
.film .carousel__track { grid-auto-columns: min(520px, 86vw); }
.film figure { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-800); }
.film img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.film figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: var(--r-md); font-size: 13.5px; color: #fff;
  background: var(--glass-dark-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.14); }

/* Mosaïque */
.mosaic { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; max-width: var(--w-grid); margin: 0 auto; height: clamp(520px, 60vw, 680px); }
.mosaic__item { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--navy-800); color: #fff; }
.mosaic__item:first-child { grid-row: span 2; }
.mosaic__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaic__item figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 12px 16px; border-radius: var(--r-md); display: grid; gap: 1px; }
.mosaic__item strong { font-size: 16px; font-weight: 600; }
.mosaic__item span { font-size: 13px; color: rgba(255,255,255,.84); }
@media (max-width: 734px) { .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; gap: 10px; } .mosaic__item { aspect-ratio: 4 / 5; border-radius: var(--r-lg); } .mosaic__item:first-child { grid-row: auto; grid-column: span 2; aspect-ratio: 4 / 3; } .mosaic__item figcaption { left: 8px; bottom: 8px; padding: 8px 12px; } .mosaic__item span { display: none; } }

/* Colonnes à filets */
.columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; max-width: var(--w-grid); margin: 0 auto; }
.columns > * { padding: 24px 0 36px; border-top: 1px solid var(--hairline); }
.columns--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.columns h3 { font-size: 21px; line-height: 1.2; margin-bottom: 12px; }
.columns ul { display: grid; gap: 7px; font-size: 15px; line-height: 1.45; color: var(--ink-80); }
.columns p { font-size: 15px; line-height: 1.5; color: var(--ink-80); }
.module__count { display: block; font-size: 12px; color: var(--ink-56); margin: -6px 0 12px; }
:is(.tile--dark, .tile--black) .columns > * { border-color: rgba(255,255,255,.18); }
:is(.tile--dark, .tile--black) :is(.columns ul, .columns p, .module__count) { color: var(--body-muted); }
@media (max-width: 1068px) { .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .columns { grid-template-columns: 1fr; } .columns > * { padding: 20px 0 24px; } .columns--big h3 { font-size: 26px; } }

/* Heures */
.hours { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 72px; max-width: var(--w-grid); margin: 0 auto 64px; align-items: start; }
.split-bar__track { display: flex; height: 8px; border-radius: 999px; overflow: hidden; gap: 3px; }
.split-bar__a { background: var(--primary-on-dark); border-radius: 999px; }
.split-bar__b { background: rgba(255,255,255,.3); border-radius: 999px; }
.split-bar__legend { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: 14px; color: var(--body-muted); }
.split-bar__legend b { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 600; color: #fff; }
.split-bar__legend span:last-child { text-align: right; }
.years { display: grid; gap: 14px; }
.years__row { display: grid; grid-template-columns: 90px 1fr 80px; gap: 16px; align-items: center; font-size: 14px; }
.years__track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.years__fill { height: 100%; border-radius: 999px; background: #fff; }
.years__row b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.years .t-caption { color: var(--body-muted); }
@media (max-width: 834px) { .hours { grid-template-columns: 1fr; } }

/* Documents PDF */
.docs { display: grid; gap: 10px; }
.doc { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 16px; align-items: center; padding: 14px 18px 14px 14px; border-radius: var(--r-md); background: var(--canvas); border: 1px solid var(--hairline); color: var(--ink); transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease); }
.doc:hover { text-decoration: none; border-color: rgba(32,70,155,.4); box-shadow: 0 14px 30px -18px rgba(15, 31, 74, .35); }
.doc:active { transform: scale(.985); }
.doc__type { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.doc__txt { display: grid; gap: 2px; min-width: 0; }
.doc__txt strong { font-size: 16px; font-weight: 600; }
.doc__txt small { font-size: 13px; color: var(--ink-56); }
.doc__dl { width: 20px; height: 20px; color: var(--primary); transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .doc:hover .doc__dl { transform: translateY(2px); } }
.doc-group { display: grid; gap: 12px; align-content: start; }
.doc-group h3 { font-size: 17px; }
.doc-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; max-width: var(--w-grid); margin: 0 auto; }
@media (max-width: 1068px) { .doc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .doc-groups { grid-template-columns: 1fr; } }

/* Comparatif */
.versus { width: 100%; font-size: 15px; }
.versus th, .versus td { padding: 16px 16px 16px 0; border-top: 1px solid rgba(255,255,255,.16); text-align: left; vertical-align: top; }
.versus thead th { border-top: 0; font-family: var(--font-display); font-size: 21px; font-weight: 600; padding-bottom: 12px; }
.versus thead th a { color: #fff; }
.versus tbody th { font-size: 12px; font-weight: 600; color: var(--body-muted); width: 22%; padding-top: 19px; }
.versus td { color: #e6eaf5; width: 39%; }

/* ---------- FAQ ---------- */
.faq { max-width: 980px; margin: 0 auto; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; transition: color .2s var(--ease); }
.faq summary:hover h3 { color: var(--primary); }
.faq summary .icon { width: 18px; height: 18px; color: var(--primary); transition: transform .22s var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq__a { padding: 0 48px 26px 0; color: var(--ink-80); max-width: 760px; }
@media (max-width: 640px) { .faq summary h3 { font-size: 17px; } .faq__a { padding-right: 0; } }

/* ---------- Intro simple (pages sans visuel) ---------- */
.intro { background: var(--mist); padding: 56px 0; }
.intro__inner { display: grid; gap: 14px; justify-items: start; }
.intro__inner .t-hero { max-width: 18ch; font-size: clamp(32px, 3.6vw, 48px); }
.intro__inner .t-lead-airy { max-width: 720px; }
.intro .crumbs { margin-bottom: 8px; }
@media (max-width: 734px) { .intro { padding: 40px 0; } }

.crumbs { font-size: 12.5px; color: var(--ink-56); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.crumbs a { color: var(--ink-80); }
.crumbs a:hover { color: var(--primary); }

/* ---------- Texte courant ---------- */
.prose { max-width: 692px; margin: 0; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 28px; line-height: 1.15; margin-top: 1.8em; }
.prose h3 { font-size: 21px; line-height: 1.2; margin-top: 1.6em; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose li + li { margin-top: .35em; }
.checks { display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.checks .icon { width: 22px; height: 22px; color: var(--primary); margin-top: 1px; }

/* Tableaux */
.table-wrap { max-width: var(--w-grid); margin: 0 auto; overflow-x: auto; }
.table { font-size: 14.5px; min-width: 680px; }
.table th, .table td { padding: 16px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table thead th { font-size: 12px; font-weight: 600; color: var(--ink-56); }
.table tbody th { font-size: 16px; font-weight: 600; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
.table tfoot td { font-weight: 600; border-bottom: 0; }

.facts { display: grid; grid-template-columns: 200px 1fr; }
.facts dt, .facts dd { padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.facts dt { color: var(--ink-56); font-size: 14px; padding-top: 18px; }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } .facts dt { border: 0; padding-bottom: 0; } }
.answer { max-width: 760px; }

/* ---------- Formulaires ---------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink-80); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--canvas);
  border: 1px solid #cfd6e4; border-radius: var(--r-md); padding: 12px 16px; min-height: 52px; width: 100%;
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23586277' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary-focus); box-shadow: 0 0 0 3px rgba(58, 103, 209, .2); }
.check { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: 14px; color: var(--ink-80); align-items: start; }
/* 24 px : minimum tactile du critère WCAG 2.5.8, sur un formulaire rempli au doigt. */
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--primary); }
.check label { padding-top: 3px; }
.hp { position: absolute; left: -9999px; }
.notice-box { border-radius: var(--r-lg); padding: 20px 24px; font-size: 14px; }
.notice-box--ok { background: #e4f3ea; color: #0b3d22; }
.notice-box--err { background: #fdecea; color: #7a1c14; }
.notice-box ul { list-style: disc; padding-left: 1.2em; margin-top: 6px; }
.form-card { background: var(--canvas); border-radius: var(--r-xl); padding: 40px; border: 1px solid var(--hairline); box-shadow: 0 30px 60px -40px rgba(15, 31, 74, .3); }
@media (max-width: 640px) { .form-card { padding: 26px 20px; } }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; max-width: var(--w-grid); margin: 0 auto; align-items: start; }
@media (max-width: 834px) { .contact-grid { grid-template-columns: 1fr; } }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: var(--w-grid); margin: 0 auto; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-900); }
.video > button { position: absolute; inset: 0; width: 100%; display: grid; place-items: center; }
.video > button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.video .icon-circle { position: relative; width: 60px; height: 60px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 734px) { .video-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Pied de page, photo de la façade fondue dans le bleu nuit, coordonnées
   en grand, navigation, sigle monumental rogné en bas.
   ========================================================================== */
.footer { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-950); color: rgba(255,255,255,.7); font-size: 15px; }
.footer__wrap { max-width: calc(var(--w-grid) + 2 * 22px); margin: 0 auto; padding-inline: var(--gutter); }
.footer a:not(.pill) { color: rgba(255,255,255,.84); transition: color .2s var(--ease); }
.footer a:not(.pill):hover { color: #fff; text-decoration: none; }


/* 2. Coordonnées en grand */
.footer__contact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.footer__contact li + li { border-left: 1px solid rgba(255,255,255,.14); }
.footer__contact a { position: relative; display: grid; gap: 6px; padding: 28px 44px 30px 24px; height: 100%; transition: background-color .2s ease; }
.footer__contact li:first-child a { padding-left: 0; }
.footer__contact a:hover { background: rgba(255,255,255,.04); }
.footer__label { font-size: 12.5px; color: rgba(255,255,255,.55); }
.footer__value { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.footer__go { position: absolute; top: 28px; right: 20px; width: 18px; height: 18px; color: var(--primary-on-dark); opacity: .5; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.footer__contact a:hover .footer__go { opacity: 1; transform: translate(3px, -3px); }

/* 3. Marque et navigation */
.footer__main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding: 64px 0 48px; }
.footer__brand { display: grid; gap: 18px; align-content: start; justify-items: start; }
.footer__brand img { width: 94px; height: auto; }
.footer__brand p { font-size: 15px; line-height: 1.55; max-width: 34ch; }
.footer__ids { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.footer__ids div { padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); }
.footer__ids dt { font-size: 11px; color: rgba(255,255,255,.5); }
.footer__ids dd { font-size: 13.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.footer__col h2 { font-family: var(--font); font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.5); margin-bottom: 18px; }
.footer__col ul { display: grid; gap: 11px; }
.footer__col a { font-size: 15.5px; }
.footer__legal { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.46); max-width: 760px; padding-bottom: 40px; }

/* 5. Barre finale */
.footer__bar { position: relative; border-top: 1px solid rgba(255,255,255,.12); }
.footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 20px; font-size: 13px; color: rgba(255,255,255,.5); }
.footer__bar-inner ul { display: flex; flex-wrap: wrap; gap: 22px; margin-right: auto; }
.footer__bar-inner a:not(.pill) { color: rgba(255,255,255,.7); }
.footer__top { display: inline-flex; align-items: center; gap: 8px; }
.footer__top .icon { width: 15px; height: 15px; transform: rotate(-90deg); transition: transform .3s var(--ease); }
.footer__top:hover .icon { transform: rotate(-90deg) translateX(3px); }

@media (max-width: 1068px) {
  .footer__contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__contact li:nth-child(3) { border-left: 0; }
  .footer__contact li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
  .footer__contact li:nth-child(3) a { padding-left: 0; }
  .footer__main { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
/* Accordéon du pied de page. Ouvert par défaut : sans JavaScript et sur grand écran
   rien ne change, le script ne replie que sur petit écran. */
.footer__acc > summary { list-style: none; cursor: pointer; }
.footer__acc > summary::-webkit-details-marker { display: none; }
.footer__acc > summary h2 { margin: 0 0 18px; }

@media (max-width: 640px) {
  .footer__acc > summary { position: relative; display: flex; align-items: center; min-height: 52px;
    border-top: 1px solid rgba(255,255,255,.14); }
  .footer__acc > summary h2 { margin: 0; font-size: 15.5px; color: #fff; }
  .footer__acc > summary::after { content: ""; position: absolute; right: 4px; width: 9px; height: 9px;
    border-right: 1.6px solid rgba(255,255,255,.55); border-bottom: 1.6px solid rgba(255,255,255,.55);
    rotate: 45deg; translate: 0 -2px; transition: rotate .2s var(--ease-out); }
  .footer__acc[open] > summary::after { rotate: -135deg; translate: 0 2px; }
  .footer__acc > ul { padding: 2px 0 20px; }
  .footer__contact { grid-template-columns: 1fr; }
  .footer__contact li + li { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .footer__contact a, .footer__contact li:nth-child(3) a { padding: 20px 40px 20px 0; }
  .footer__go { top: 22px; right: 4px; }
  .footer__value { font-size: 18px; }
  .footer__main { grid-template-columns: 1fr; gap: 0; padding: 40px 0 32px; }
  .footer__brand { margin-bottom: 30px; }
  /* Le bouton WhatsApp flotte dans le coin : on réserve sa place, sinon le dernier
     lien de la barre passe dessous. */
  .footer__bar-inner { flex-direction: column; align-items: flex-start; padding-bottom: 88px; }
  .footer__bar-inner ul { gap: 10px 22px; padding-right: 76px; }
}

/* ==========================================================================
   Page filière, lecture continue + carte « Candidater » collante
   ========================================================================== */
.pill--block { width: 100%; justify-content: center; }
.pp { background: var(--canvas); }
.pp__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 88px; align-items: start; padding-top: 24px; padding-bottom: 72px; }
.pp__grid > .pp__sec { grid-column: 1; }
.pp__aside { grid-column: 2; grid-row: 1 / span 5; align-self: stretch; padding-top: 64px; }
.pp__sec { padding-block: 64px 8px; scroll-margin-top: 72px; min-width: 0; }
.pp__sec + .pp__sec, .pp__aside + .pp__sec { border-top: 1px solid var(--hairline); margin-top: 56px; }
.pp__h { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 22px; }
.pp__h3 { font-size: 19px; line-height: 1.25; letter-spacing: -0.012em; margin: 40px 0 16px; }
.pp__lead { font-size: 20px; line-height: 1.55; font-weight: 300; color: var(--ink-80); max-width: 60ch; }
.pp__intro { font-size: 17px; line-height: 1.6; color: var(--ink-80); max-width: 62ch; }
.pp__note { margin-top: 28px; font-size: 15px; line-height: 1.6; color: var(--ink-56); max-width: 70ch; }
.pp__note a { font-weight: 500; }
.pp__more { margin-top: 20px; }
.pp .faq { max-width: none; }

/* Chiffres clés */
.keyfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; border-top: 1px solid var(--hairline); }
.keyfacts > div { display: grid; gap: 4px; align-content: start; padding: 20px 20px 22px 0; border-bottom: 1px solid var(--hairline); }
.keyfacts > div:not(:nth-child(3n + 1)) { padding-left: 20px; box-shadow: -1px 0 0 var(--hairline); }
.keyfacts dt { font-size: 13px; color: var(--ink-56); }
.keyfacts dd { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.keyfacts small { display: block; margin-top: 4px; font-family: var(--font); font-weight: 400; letter-spacing: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-56); }

/* Carte Candidater */
.apply { position: sticky; top: 80px; display: grid; gap: 14px; padding: 28px 26px 26px; border-radius: var(--r-xl); background: var(--mist); }
.apply__t { font-size: 24px; letter-spacing: -0.02em; }
.apply__txt { font-size: 15px; line-height: 1.5; color: var(--ink-80); margin-bottom: 4px; }
.apply__h { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink-56); margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.minidocs { display: grid; gap: 2px; }
.minidocs a { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 0; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.3; }
.minidocs a:hover { color: var(--primary); text-decoration: none; }
.minidocs .icon { width: 18px; height: 18px; color: var(--primary); margin-top: 1px; }
.minidocs small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-56); margin-top: 2px; }
.apply__contact { display: grid; gap: 10px; font-size: 15px; }
.apply__contact li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: center; }
.apply__contact .icon { width: 18px; height: 18px; color: var(--primary); }

/* Objectifs sur deux colonnes, débouchés */
.checks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.checks--sm { gap: 10px; font-size: 15px; line-height: 1.45; }
.checks--sm .icon { width: 19px; height: 19px; }
.outlets { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; }
.pp__intro + .checks, .pp__intro + .outlets { margin-top: 16px; }
.outlets li { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: var(--r-lg); background: var(--mist); }
.outlets strong { font-size: 16px; font-weight: 600; }
.outlets span { font-size: 14.5px; line-height: 1.5; color: var(--ink-80); }

/* Répartition des heures par année */
.ybars { display: grid; gap: 14px; margin: 32px 0 40px; }
.ybars__row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 210px; gap: 18px; align-items: center; font-size: 14.5px; }
.ybars__y { font-weight: 600; }
.ybars__track { display: flex; gap: 3px; height: 12px; }
.ybars__a { background: var(--primary); border-radius: 999px; }
.ybars__b { background: #b8c9f0; border-radius: 999px; }
.ybars__n { color: var(--ink-56); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ybars__n b { color: var(--ink); font-weight: 600; }
.ybars__legend { display: flex; gap: 20px; font-size: 13px; color: var(--ink-56); padding-left: 110px; }
.ybars__legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 12px; height: 12px; border-radius: 4px; }
.sw--a { background: var(--primary); }
.sw--b { background: #b8c9f0; }

/* Onglets par année */
.ytabs__list { display: none; }
.js .ytabs__list { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--mist); width: max-content; max-width: 100%; margin-bottom: 28px; }
.ytabs__tab { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 20px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink-80); white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.ytabs__tab small { font-size: 12.5px; font-weight: 500; color: var(--ink-56); }
.ytabs__tab:hover { color: var(--primary); }
.ytabs__tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 10px -4px rgba(15, 31, 74, .25); }
.ytabs__tab:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }
.ytabs__panel:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 8px; border-radius: 8px; }
.ytabs__panel + .ytabs__panel { margin-top: 48px; }
.js .ytabs__panel + .ytabs__panel { margin-top: 0; }
.js .ytabs__panel[hidden] { display: none; }
.ytabs__title { font-size: 21px; margin-bottom: 16px; }
.js .ytabs__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ypanel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.ypanel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font-size: 13px; font-weight: 600; color: var(--ink-56); }
.ypanel__head b { font-family: var(--font-display); font-size: 21px; color: var(--ink); letter-spacing: -0.015em; }

/* Modules (dépliables) */
.mod { border-bottom: 1px solid var(--hairline); }
.mod summary, .mod--solo { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 14px; align-items: center; padding: 14px 0; list-style: none; }
.mod--solo { grid-template-columns: minmax(0, 1fr) auto 18px; }
.mod--solo::after { content: ""; }
.mod summary { cursor: pointer; }
.mod summary::-webkit-details-marker { display: none; }
.mod__t { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.mod__t small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-56); margin-top: 2px; }
.mod__h { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mod__i { width: 18px; height: 18px; color: var(--primary); transition: transform .2s var(--ease-out); }
.mod[open] .mod__i { transform: rotate(180deg); }
.mod summary:hover .mod__t { color: var(--primary); }
.mod summary:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; border-radius: 6px; }
.mod__list { display: grid; gap: 0; margin: -4px 0 14px; padding: 6px 14px; border-radius: var(--r-md); background: var(--mist); }
.mod__list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-80); }
.mod__list li + li { border-top: 1px solid rgba(15, 24, 48, .07); }
.mod__list li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }

/* Lieux de stage */
.places li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; line-height: 1.4; }
.places small { display: block; font-size: 12.5px; color: var(--ink-56); }
.places b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Admission */
.access { display: grid; gap: 6px; padding: 24px 26px; border-radius: var(--r-lg); background: var(--primary-soft); }
.access__k { font-size: 13px; font-weight: 600; color: var(--primary); }
.access__v { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.access__d { font-size: 15px; color: var(--ink-80); }
.steps { margin-top: 12px; }
.steps > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--hairline); }
.steps__n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.steps__b { display: grid; gap: 12px; justify-items: start; padding-top: 7px; }
.steps__b h3 { font-size: 19px; line-height: 1.25; letter-spacing: -0.012em; }
.steps__b p { font-size: 15.5px; line-height: 1.55; color: var(--ink-80); max-width: 60ch; }
.steps__b .link { font-size: 15px; }

@media (max-width: 1068px) {
  .pp__grid { grid-template-columns: minmax(0, 1fr) 290px; column-gap: 48px; }
  .keyfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keyfacts > div:not(:nth-child(3n + 1)) { padding-left: 0; box-shadow: none; }
  .keyfacts > div:nth-child(2n) { padding-left: 20px; box-shadow: -1px 0 0 var(--hairline); }
  .ypanel { grid-template-columns: 1fr; gap: 36px; }
  .outlets { grid-template-columns: 1fr; }
}
@media (max-width: 834px) {
  .pp__grid { display: block; padding-top: 8px; padding-bottom: 56px; }
  .pp__aside { padding-top: 8px; }
  .apply { position: static; }
  .pp__sec { padding-top: 48px; }
  .pp__aside + .pp__sec { border-top: 0; margin-top: 16px; }
  .pp__sec + .pp__sec { margin-top: 40px; }
  .checks--cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pp__lead { font-size: 18px; }
  .keyfacts dd { font-size: 20px; }
  .keyfacts > div { padding-right: 12px; }
  .keyfacts > div:nth-child(2n) { padding-left: 14px; }
  .ybars__row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .ybars__track { grid-column: 1 / -1; grid-row: 2; }
  .ybars__n { font-size: 13.5px; }
  .ybars__legend { padding-left: 0; }
  .js .ytabs__list { width: 100%; }
  .ytabs__tab { flex: 1; justify-content: center; flex-direction: column; align-items: center; gap: 0; padding: 8px 6px; font-size: 14px; }
  .apply { padding: 24px 20px; }
  .steps > li { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
  .steps__n { width: 32px; height: 32px; font-size: 15px; }
  .steps__b { padding-top: 4px; }
  .access { padding: 20px; }
  .access__v { font-size: 18px; }
}

/* ==========================================================================
   Préinscription
   ========================================================================== */
.intro--pre { padding-bottom: 40px; }
/* Titre court : une seule ligne sur grand écran, retour à la ligne naturel sur mobile. */
.intro__inner .t-hero--tight { max-width: 26ch; }
.pre { background: var(--mist); padding: 8px 0 96px; }
.pre__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px 56px; align-items: start; }
.pre__main { padding: 44px 48px; }
.pre__aside .apply { background: var(--canvas); border: 1px solid var(--hairline); }
.pre-form { gap: 0; }
.pre-step { border: 0; margin: 0; padding: 0 0 36px; display: grid; gap: 18px; min-width: 0; }
.pre-step + .pre-step { padding-top: 36px; border-top: 1px solid var(--hairline); }
.pre-step legend { display: flex; align-items: center; gap: 12px; float: left; width: 100%; margin-bottom: 4px; font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.pre-step legend + * { clear: both; }
.pre-step__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; flex: none; }
.pre-step__why { margin-top: -8px; max-width: 58ch; font-size: 14.5px; line-height: 1.5; color: var(--ink-56); }
.pre-step__why strong { font-weight: 600; color: var(--ink-80); }
/* Largeurs minimales calées sur « Jour », « septembre » et « Année » : en deçà,
   le libellé serait rogné par le chevron. Sous 375 px, les listes s'empilent. */
.dob { display: grid; grid-template-columns: minmax(80px, .9fr) minmax(112px, 1.5fr) minmax(88px, 1fr); gap: 10px; }
@media (max-width: 480px) {
  .dob { gap: 6px; }
  .dob select { font-size: 15px; padding-left: 12px; padding-right: 30px; background-position: right 10px center; }
}
@media (max-width: 374px) { .dob select { padding-left: 10px; padding-right: 26px; background-position: right 8px center; } }
@media (max-width: 349px) { .dob { grid-template-columns: minmax(0, 1fr); } }
.field--half { max-width: calc(50% - 9px); }
.field__hint { font-size: 13px; line-height: 1.4; color: var(--ink-56); }
.field__err { font-size: 13.5px; color: #a3261b; }
.field [aria-invalid="true"] { border-color: #c0392b; }
.notice-box a { color: inherit; text-decoration: underline; }
.check a, .pp__note a, .t-caption a, .contact-list a.t-caption { text-decoration: underline; text-underline-offset: 2px; }
.notice-box { margin-bottom: 28px; }

/* Choix de la filière */
/* Deux filières par ligne dès qu'il y a la place ; la cinquième occupe la largeur. */
.choices { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices > :last-child { grid-column: 1 / -1; }
/* --pc / --pc-soft : couleur de la filière, posée en style inline sur chaque choix. */
.choice { --pc: var(--primary); --pc-soft: var(--primary-soft);
  position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid #cfd6e4; background: var(--canvas); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .16s var(--ease-out); }
.choice:hover { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc); }
.choice { -webkit-tap-highlight-color: transparent; }
.choice:active { transform: scale(.99); }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
/* Emblème : simple filet à la couleur de la filière, sans aplat. */
.choice__ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; border: 1px solid #d6dce8; color: var(--pc); transition: border-color .2s ease; }
@supports (color: color-mix(in srgb, #000 50%, #fff)) { .choice__ic { border-color: color-mix(in srgb, var(--pc) 42%, #fff); } }
.choice:hover .choice__ic, .choice:has(input:checked) .choice__ic { border-color: var(--pc); }
.choice__ic .icon { width: 22px; height: 22px; }
.choice__b { display: grid; gap: 1px; min-width: 0; }
.choice__t { font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.choice__m { font-size: 13px; color: var(--ink-56); }
.choice__dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #b3bdd1; background: #fff; transition: border-color .2s, box-shadow .2s; }
.choice:has(input:checked) { border-color: var(--pc); background: var(--pc-soft); box-shadow: 0 0 0 1.5px var(--pc); }
.choice:has(input:checked) .choice__dot { border-color: var(--pc); box-shadow: inset 0 0 0 4.5px var(--pc); }
.choice:has(input:focus-visible) { outline: 2px solid var(--pc); outline-offset: 3px; }

/* Rappel discret vers la fiche papier, en tête de formulaire. */
.pre-alt { font-size: 14.5px; color: var(--ink-80); margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--hairline); }
.pre-alt a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* Fiche papier : carte à part entière sous le formulaire, dans la colonne principale. */
.paper { grid-column: 1; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 30px 32px; display: grid; gap: 12px; }
.paper__t { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.paper__ic { width: 24px; height: 24px; flex: none; color: var(--primary); }
.paper__txt { font-size: 15.5px; line-height: 1.5; color: var(--ink-80); max-width: 60ch; }
/* Chaque fiche est un bouton à part entière : cadre, libellé en bleu, flèche de téléchargement. */
.paperdocs, .dlbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.paperdocs a, .dlbtns a { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 13px 16px; border: 1px solid #cfd6e4; border-radius: var(--r-md); background: var(--canvas);
  color: var(--primary); font-size: 15px; font-weight: 600; line-height: 1.3;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.paperdocs a:hover, .dlbtns a:hover { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); text-decoration: none; }
.paperdocs a:focus-visible, .dlbtns a:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }
.paperdocs .icon, .dlbtns .icon { width: 20px; height: 20px; color: var(--primary); }
.paperdocs small, .dlbtns small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-56); margin-top: 2px; }
.dlbtns { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; }
.dlbtns__t { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin: 40px 0 14px; max-width: 1180px; }
.dlbtns__note { margin-top: 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink-56); max-width: 1180px; }
.dlbtns__note a { color: var(--ink-80); text-decoration: underline; text-underline-offset: 2px; }
.dlbtns__note a:hover { color: var(--primary); }

/* Cartes de filière : mêmes repères visuels que le choix du formulaire, mais cliquables. */
.fcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1180px; }
.fcard { --pc: var(--primary); --pc-soft: var(--primary-soft);
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 16px; align-items: center;
  padding: 18px 20px; border: 1px solid #cfd6e4; border-radius: var(--r-md); background: var(--canvas); color: var(--ink);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.fcard:hover { border-color: var(--pc); background: var(--pc-soft); box-shadow: 0 0 0 1px var(--pc); text-decoration: none; }
.fcard:focus-visible { outline: 2px solid var(--pc); outline-offset: 3px; }
.fcard__ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; border: 1px solid #d6dce8; color: var(--pc); transition: border-color .2s ease; }
@supports (color: color-mix(in srgb, #000 50%, #fff)) { .fcard__ic { border-color: color-mix(in srgb, var(--pc) 42%, #fff); } }
.fcard:hover .fcard__ic { border-color: var(--pc); }
.fcard__ic .icon { width: 26px; height: 26px; }
.fcard__b { display: grid; gap: 3px; min-width: 0; }
.fcard__t { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.fcard__m { font-size: 13.5px; font-weight: 600; color: var(--pc); }
.fcard__a { font-size: 14px; line-height: 1.45; color: var(--ink-56); }
.fcard__go { width: 18px; height: 18px; color: var(--ink-56); }
.fcard:hover .fcard__go { color: var(--pc); }

/* Bloc facultatif replié : ce qui n'est pas indispensable reste hors du chemin. */
.pre-more { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--mist); margin-bottom: 30px; }
.pre-more summary { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 16px 20px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.pre-more summary::-webkit-details-marker { display: none; }
.pre-more__b { display: grid; gap: 2px; }
.pre-more__t { font-size: 16px; font-weight: 600; }
.pre-more__m { font-size: 13.5px; color: var(--ink-56); }
.pre-more__c { width: 20px; height: 20px; color: var(--ink-56); transition: transform .2s var(--ease-out); }
.pre-more[open] .pre-more__c { transform: rotate(180deg); }
.pre-more summary:hover .pre-more__t { color: var(--primary); }
.pre-more summary:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: -2px; border-radius: var(--r-md); }
.pre-more__in { display: grid; gap: 18px; padding: 4px 20px 22px; }
.pre-more__in .field textarea { min-height: 96px; }

/* « Comment ça se passe » : trois étapes numérotées plutôt qu'un paragraphe. */
.howto { display: grid; gap: 12px; counter-reset: ht; margin-bottom: 4px; }
.howto li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--ink-80); counter-increment: ht; }
.howto li::before { content: counter(ht); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; }
.howto--wide { gap: 16px; margin: 26px 0 28px; max-width: 70ch; }
.howto--wide li { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; font-size: 16px; line-height: 1.5; color: var(--ink-80); }
.howto--wide li::before { width: 28px; height: 28px; font-size: 14px; }
.howto--wide a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.pp__cta { margin-top: 4px; }
.pre-hint { font-size: 14.5px; line-height: 1.5; color: var(--ink-80); }
.pre-hint:empty { display: none; }
.pre-hint { padding: 14px 16px; border-radius: var(--r-md); background: var(--mist); }
.pre-hint.is-warn { background: #fff6e0; color: #5c4200; }

.pre-send { display: grid; gap: 18px; justify-items: start; padding-top: 32px; border-top: 1px solid var(--hairline); }

/* Formulaire en diapositives. Sans JavaScript, « .is-wiz » n'est jamais posée :
   toutes les étapes restent visibles et la barre comme la navigation sont masquées. */
/* Ces blocs posent display:grid/flex, qui l'emporte sur l'attribut « hidden ».
   Sans cette règle, masquer une étape ne la cache pas. */
.pre-step[hidden], .wiz__bar[hidden], .wiz__nav[hidden], .recap[hidden], .wiz__nav .pill[hidden] { display: none; }
.wiz__bar { display: grid; gap: 10px; margin-bottom: 28px; }
.wiz__count { font-size: 14px; font-weight: 600; color: var(--ink-80); }
.wiz__count [data-wiz-label] { font-weight: 400; color: var(--ink-56); }
.wiz__track { height: 6px; border-radius: 99px; background: var(--hairline); overflow: hidden; }
.wiz__track i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--primary); transition: width .35s var(--ease-out); }
.is-wiz [data-slide] { padding-bottom: 8px; }
.is-wiz [data-slide] + [data-slide] { padding-top: 0; border-top: 0; }
.wiz__nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.wiz__next { margin-left: auto; }
.is-wiz .pre-send { padding-top: 24px; }

/* Récapitulatif : chaque valeur est un bouton qui ramène à son étape. */
.recap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 20px; margin-bottom: 28px; }
.recap dt { padding: 12px 0; font-size: 13.5px; font-weight: 600; color: var(--ink-56); border-top: 1px solid var(--hairline); }
.recap dd { margin: 0; padding: 12px 0; min-width: 0; border-top: 1px solid var(--hairline); }
.recap__v { font: inherit; font-size: 15.5px; color: var(--ink); text-align: left; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 4px; overflow-wrap: anywhere; }
.recap__v:hover { text-decoration-color: currentColor; }
.recap__v:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 560px) {
  .recap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .recap dt { padding-bottom: 2px; }
  .recap dd { padding-top: 0; border-top: 0; }
  .wiz__nav .pill { flex: 1 1 auto; justify-content: center; }
}
.pill--lg { font-size: 17px; padding: 14px 28px; min-height: 52px; }

/* Petites étapes (colonne) */
.ministeps { display: grid; gap: 12px; margin-top: 2px; }
.ministeps li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--ink-80); }
.ministeps b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 13px; }

/* Confirmation */
.pre-done { display: grid; gap: 20px; justify-items: start; }
.pre-done__ref { font-size: 15px; color: var(--ink-56); padding: 8px 14px; border-radius: 999px; background: var(--mist); }
.pre-done__ref strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.pre-done__t { font-size: 28px; letter-spacing: -0.02em; }
.pre-done .steps { width: 100%; margin: 0; }
.pre-done .steps > li:first-child .steps__n { background: #1f7a45; }
.steps__n .icon { width: 20px; height: 20px; }

/* La colonne de droite tient le long des deux rangées (formulaire + fiche papier). */
.pre__aside { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 1068px) { .pre__grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; } .pre__main { padding: 36px 32px; } .paper { padding: 26px 24px; } }
@media (max-width: 900px) { .choices { grid-template-columns: 1fr; } .choices > :last-child { grid-column: auto; } }
@media (max-width: 1068px) { .dlbtns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .fcards { grid-template-columns: 1fr; } }
@media (max-width: 834px) {
  /* Une seule colonne : on rend la place au flux normal. */
  .pre__grid { grid-template-columns: 1fr; }
  .pre__aside, .paper { grid-column: auto; grid-row: auto; }
  .pre__aside .apply { position: static; }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choices > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pre { padding-bottom: 64px; }
  .pre__main { padding: 26px 18px; border-radius: var(--r-lg); }
  .pre__grid { gap: 20px; }
  .wrap.pre__grid { padding-inline: 12px; }
  .field--half { max-width: none; }
  .choices { grid-template-columns: 1fr; }
  .choices > :last-child { grid-column: auto; }
  .choice { padding: 13px 14px; }
  .pre-step legend { font-size: 19px; }
  .pre-alt { margin-bottom: 20px; padding-bottom: 16px; }
  .paper { padding: 24px 18px; border-radius: var(--r-lg); }
  .paper__t { font-size: 19px; }
  .paperdocs { grid-template-columns: 1fr; }
  .dlbtns { grid-template-columns: 1fr; }
  .fcards { grid-template-columns: 1fr; }
  .fcard { padding: 15px 16px; gap: 13px; grid-template-columns: 40px minmax(0, 1fr) 16px; }
  .fcard__ic { width: 40px; height: 40px; }
  .pill--lg { width: 100%; justify-content: center; }
}

.steps--plain { margin-top: 12px; }
.steps--plain .steps__i { padding: 26px 0; border-bottom: 1px solid var(--hairline); }
.steps--plain .steps__b { padding-top: 0; }

/* ---------- Finitions ---------- */
.ledger__v:first-child { grid-column: 1 / -1; }
.footer__ids dt { font-size: 12px; }
.doc__type { font-size: 12px; }
.footer__top { padding-block: 10px; margin-block: -10px; }
@media (max-width: 640px) {
  .table--stack { min-width: 0; }
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
  .table--stack th, .table--stack td { display: block; padding: 0; border: 0; text-align: left; }
  .table--stack tbody th { grid-column: 1 / -1; font-size: 18px; }
  .table--stack td[data-label^="Condition"], .table--stack td[data-label="Accès"] { grid-column: 1 / -1; }
  .table--stack td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--ink-56); margin-bottom: 2px; }
  .table--stack .num { text-align: left; }
}

/* Titres des nouveaux blocs : même voix que le reste du site (Inter) */
.opener__title, .statement, .cindex__name, .dates__y, .chrono__y, .reco__main strong, .steps3__n, .faqdoc__group h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em;
}

/* ==========================================================================
   Ouverture claire des pages intérieures
   ========================================================================== */
.opener { background: var(--mist); padding: 56px 0 72px; }
.opener__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px 88px; align-items: end; }
.opener__text { display: grid; gap: 18px; justify-items: start; }
.opener__text .crumbs { margin-bottom: 6px; }
.opener__title { font-size: clamp(38px, 4.4vw, 60px); line-height: 1.02; }
.opener__lede { font-size: 19px; line-height: 1.55; color: var(--ink-80); max-width: 54ch; }
.opener__lede a { font-weight: 500; }
.opener__text .pills { margin-top: 6px; }
.summary { display: grid; border-top: 1px solid var(--hairline); }
.summary > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.summary dt { font-size: 13.5px; color: var(--ink-56); padding-top: 2px; }
.summary dd { font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--ink); }
.summary--row { grid-template-columns: repeat(3, auto); gap: 28px; border: 0; margin-top: 18px; }
.summary--row > div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0 0; border-bottom: 0; border-top: 1px solid var(--hairline); }
.opener__photo { max-height: 560px; }
.opener--split .opener__grid { align-items: center; }
.opener__photo { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; background: var(--navy-800); box-shadow: 0 40px 80px -40px rgba(6, 13, 36, .45); }
.opener__photo img { width: 100%; height: 100%; object-fit: cover; }
.opener--gallery { padding-bottom: 88px; }
.opener--gallery .opener__grid { grid-template-columns: minmax(0, 1fr); margin-bottom: 44px; }
.opener--gallery .opener__lede { max-width: 64ch; }
@media (max-width: 900px) {
  .opener { padding: 40px 0 52px; }
  .opener__grid { grid-template-columns: 1fr; gap: 32px; }
  .opener__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .summary > div { grid-template-columns: 1fr; gap: 2px; }
  .summary--row { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .opener__lede { font-size: 17px; }
}

/* Galerie d'ouverture (campus) */
.pgallery { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: repeat(2, clamp(200px, 20vw, 290px)); gap: 12px; }
.pgallery__item { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-800); }
.pgallery__item:first-child { grid-row: span 2; }
.pgallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pgallery__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 12px; font-size: 13.5px; color: #fff; background: linear-gradient(0deg, rgba(6,13,36,.72), rgba(6,13,36,0)); }
@media (hover: hover) { .pgallery__item:hover img { transform: scale(1.04); } }
@media (max-width: 734px) {
  .pgallery { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 160px; gap: 8px; }
  .pgallery__item:first-child { grid-column: span 2; grid-row: auto; }
  .pgallery__item:nth-child(n+4) { display: none; }
}

/* ==========================================================================
   Index des filières
   ========================================================================== */
.cindex { border-bottom: 1px solid var(--hairline); }
.cindex > li { border-top: 1px solid var(--hairline); }
.cindex__row { display: grid; grid-template-columns: 216px minmax(0, 1fr) 250px 44px; gap: 36px; align-items: center; padding: 22px 0; color: var(--ink); }
.cindex__row:hover { text-decoration: none; }
.cindex__img { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: var(--navy-800); }
.cindex__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cindex__main { display: grid; gap: 8px; }
.cindex__name { font-size: clamp(30px, 3vw, 44px); line-height: 1; transition: color .25s var(--ease); }
.cindex__tag { font-size: 16px; color: var(--ink-56); }
.cindex__meta { display: grid; gap: 4px; font-size: 14.5px; color: var(--ink-56); }
.cindex__meta b { color: var(--ink); font-weight: 600; }
.cindex__go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hairline); color: var(--primary); transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease); }
.cindex__go .icon { width: 18px; height: 18px; }
@media (hover: hover) {
  .cindex__row:hover .cindex__name { color: var(--primary); }
  .cindex__row:hover .cindex__img img { transform: scale(1.06); }
  .cindex__row:hover .cindex__go { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateX(4px); }
}
.cindex__row:focus-visible { outline-offset: 6px; }
.cindex__fc .cindex__name { font-size: clamp(24px, 2.2vw, 32px); }
.cindex__fc .cindex__img { opacity: .92; }
/* Renvoi vers les autres filières (bas de page formation) : deux par ligne, sans la colonne de chiffres. */
.cindex--compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; border-bottom: 0; }
.cindex--compact .cindex__row { grid-template-columns: 116px minmax(0, 1fr) 36px; padding: 16px 0; gap: 20px; }
.cindex--compact .cindex__name { font-size: 23px; line-height: 1.1; }
.cindex--compact .cindex__tag { font-size: 14px; }
.cindex--compact .cindex__meta { display: none; }
.cindex--compact .cindex__go { width: 36px; height: 36px; }
.cindex--compact .cindex__go .icon { width: 16px; height: 16px; }
@media (max-width: 760px) { .cindex--compact { grid-template-columns: 1fr; gap: 0; } }
.tile--parchment .cindex__go { background: var(--canvas); }
@media (max-width: 1068px) {
  .cindex__row, .cindex--compact .cindex__row { grid-template-columns: 160px minmax(0, 1fr) 44px; }
  .cindex__meta { grid-column: 2; grid-row: 2; grid-auto-flow: column; justify-content: start; gap: 6px 18px; margin-top: -18px; }
  .cindex__go { grid-column: 3; grid-row: 1 / span 2; }
  .cindex__img { grid-row: 1 / span 2; }
}
@media (max-width: 640px) {
  .cindex__row, .cindex--compact .cindex__row { grid-template-columns: 92px minmax(0, 1fr); gap: 4px 16px; padding: 16px 0; align-items: start; }
  .cindex__img { aspect-ratio: 1; border-radius: 12px; grid-row: 1 / span 2; }
  .cindex__name, .cindex--compact .cindex__name, .cindex__fc .cindex__name { font-size: 25px; }
  .cindex__tag, .cindex--compact .cindex__tag { font-size: 14px; }
  .cindex__meta { grid-column: 2; grid-row: 2; grid-auto-flow: row; margin-top: 4px; gap: 0; font-size: 13px; }
  .cindex__meta span:last-child { display: none; }
  .cindex__go { display: none; }
}

/* ==========================================================================
   Accueil : repères, panneau d'inscription, FAQ
   ========================================================================== */
.dates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--ink); }
.dates li { display: grid; gap: 8px; align-content: start; padding-top: 22px; }
.dates__y { font-size: clamp(36px, 3.4vw, 50px); line-height: 1; color: var(--primary); font-variant-numeric: lining-nums; }
.dates h3 { font-size: 17px; line-height: 1.25; margin-top: 6px; }
.dates p { font-size: 14.5px; line-height: 1.5; color: var(--ink-56); }
.credline { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.credline div { display: flex; gap: 10px; align-items: baseline; }
.credline dt { font-size: 13.5px; color: var(--ink-56); }
.credline dd { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 1068px) { .dates { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
@media (max-width: 640px) {
  .dates { grid-template-columns: 1fr; gap: 0; border-top: 0; }
  .dates li { grid-template-columns: 96px minmax(0, 1fr); gap: 2px 16px; padding: 18px 0; border-top: 1px solid var(--hairline); }
  .dates__y { font-size: 36px; grid-row: span 2; }
  .dates h3 { margin-top: 2px; }
}

.panel-cta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px 72px; padding: clamp(36px, 5vw, 72px); border-radius: var(--r-xl); background: var(--primary); color: #fff; box-shadow: 0 40px 90px -50px rgba(15, 31, 74, .7); }
.panel-cta__main { display: grid; gap: 18px; justify-items: start; align-content: start; }
.panel-cta__main p { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.86); max-width: 44ch; }
.panel-cta__main .pills { margin-top: 8px; }
.panel-cta__facts { display: grid; align-content: end; }
.panel-cta__facts > div { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.24); }
.panel-cta__facts > div:last-child { border-bottom: 1px solid rgba(255,255,255,.24); }
.panel-cta__facts dt { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.panel-cta__facts dd { font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.84); }
.panel-cta a:not(.pill) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.panel-cta .pill--light { color: var(--primary); }
.panel-cta--solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .panel-cta { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .panel-cta { border-radius: var(--r-lg); padding: 30px 22px; margin-inline: -8px; } }

.faq-wide { max-width: 880px; }
.faq-wide .faq { margin: 0; max-width: none; }

/* ==========================================================================
   L’institut : déclaration, fiche, chronologie, reconnaissance
   ========================================================================== */
.statement { font-size: clamp(28px, 3vw, 44px); line-height: 1.12; max-width: 26ch; color: var(--ink); }
.statement__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--hairline); max-width: 980px; }
.statement__cols p { font-size: 17px; line-height: 1.65; color: var(--ink-80); }
@media (max-width: 734px) { .statement__cols { grid-template-columns: 1fr; } }

.spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.spec > div { padding: 18px 24px 22px 0; border-bottom: 1px solid var(--hairline); display: grid; gap: 4px; align-content: start; }
.spec > .spec--wide { grid-column: span 2; }
.spec dt { font-size: 13px; color: var(--ink-56); }
.spec dd { font-size: 17px; font-weight: 500; line-height: 1.45; }
@media (max-width: 834px) { .spec { grid-template-columns: 1fr 1fr; } .spec > .spec--wide { grid-column: 1 / -1; } }
@media (max-width: 520px) { .spec { grid-template-columns: 1fr; } }

.chrono { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 5), auto); grid-auto-flow: column; gap: 0 64px; }
.chrono li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 22px 0 26px; border-top: 1px solid var(--hairline); }
.chrono__y { font-size: 38px; line-height: 1; color: var(--primary); }
.chrono h3 { font-size: 18px; line-height: 1.3; margin-bottom: 6px; }
.chrono p { font-size: 15px; line-height: 1.55; color: var(--ink-80); }
@media (max-width: 834px) { .chrono { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } }
@media (max-width: 520px) { .chrono li { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; } .chrono__y { font-size: 32px; } }

.reco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 72px; align-items: start; }
.reco__main { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.reco__main > div { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.reco__main span { font-size: 13.5px; color: var(--ink-56); }
.reco__main strong { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; color: var(--primary); font-variant-numeric: lining-nums; }
.reco__list { display: grid; border-top: 1px solid var(--ink); }
.reco__list li { display: grid; gap: 3px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.reco__list b { font-size: 17px; }
.reco__list span { font-size: 15px; color: var(--ink-56); }
@media (max-width: 834px) { .reco { grid-template-columns: 1fr; } }

/* Formations : comparatif polyvalent / auxiliaire en pleine largeur */
.versus-wrap { max-width: var(--w-grid); }


/* ==========================================================================
   Admissions : liste de pièces façon document, étapes en trois colonnes
   ========================================================================== */
.checklist { max-width: 980px; border-radius: var(--r-xl); background: var(--canvas); border: 1px solid var(--hairline); padding: 12px 36px 28px; box-shadow: 0 30px 60px -44px rgba(15, 31, 74, .35); }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.checklist__box { width: 20px; height: 20px; border: 1.5px solid var(--primary); border-radius: 5px; }
.checklist__txt { font-size: 16.5px; line-height: 1.45; }
.tag { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.tag--all { background: var(--mist); color: var(--ink-56); }
.tag--ts { background: var(--primary); color: #fff; }
.tag--t { background: var(--primary-soft); color: var(--primary); }
.checklist__foot { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding-top: 22px; }
.checklist__foot p { font-size: 14px; line-height: 1.5; color: var(--ink-56); max-width: 60ch; }
@media (max-width: 640px) {
  .checklist { padding: 6px 18px 22px; border-radius: var(--r-lg); }
  .checklist li { grid-template-columns: 20px minmax(0, 1fr); gap: 6px 14px; align-items: start; }
  .checklist__box { margin-top: 2px; }
  .checklist .tag { grid-column: 2; justify-self: start; }
  .checklist__txt { font-size: 15.5px; }
}

.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.steps3 li { display: grid; gap: 10px; align-content: start; justify-items: start; padding-top: 22px; border-top: 1px solid var(--ink); }
.steps3__n { font-size: 40px; line-height: 1; color: var(--primary); }
.steps3 h3 { font-size: 19px; line-height: 1.25; }
.steps3 p { font-size: 15.5px; line-height: 1.55; color: var(--ink-80); }
.steps3 .link { font-size: 15px; }
@media (max-width: 834px) { .steps3 { grid-template-columns: 1fr; } }

/* Formation continue */
.columns--serif h3 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 14px; }
.columns--serif > * { border-top-color: var(--ink); }
.columns--serif ul { gap: 10px; font-size: 16px; }

/* ==========================================================================
   Contact
   ========================================================================== */
/* Quatre coordonnées depuis l'ajout de WhatsApp : deux colonnes au-delà de 1068 px,
   quatre seulement quand la place le permet, pour que les numéros restent lisibles. */
.coords { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); margin-top: 8px; }
@media (min-width: 1069px) { .coords { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.coords li { display: grid; gap: 6px; padding: 22px 24px 0 0; }
.coords span { font-size: 13.5px; color: var(--ink-56); }
.coords a { font-size: clamp(19px, 1.6vw, 25px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.coords a:hover { color: var(--primary); text-decoration: none; }
@media (max-width: 834px) { .coords { grid-template-columns: 1fr; } .coords li { padding: 16px 0; border-bottom: 1px solid var(--hairline); } }
.contact-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px 88px; }
.contact-form__t { margin-bottom: 26px; }
.visit2 { display: grid; gap: 14px; align-content: start; }
.visit2 h2 { margin-bottom: 12px; }
.visit2__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-800); }
.visit2__media img, .visit2__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.visit2__map { position: absolute; left: 14px; bottom: 14px; z-index: 1; }
.visit2__addr { font-size: 18px; font-weight: 600; margin-top: 6px; }
@media (max-width: 834px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FAQ : sommaire collant et lecture continue
   ========================================================================== */
.faqdoc { padding: 64px 0 96px; }
.faqdoc__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px 88px; align-items: start; }
.faqdoc__nav { position: sticky; top: 96px; display: grid; gap: 14px; justify-items: start; }
.faqdoc__navt { font-size: 13px; font-weight: 600; color: var(--ink-56); }
.faqdoc__nav ul { display: grid; width: 100%; border-top: 1px solid var(--hairline); }
.faqdoc__nav ul a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); color: var(--ink-80); font-size: 15px; }
.faqdoc__nav ul a:hover { color: var(--primary); text-decoration: none; }
.faqdoc__nav small { font-size: 12.5px; color: var(--ink-56); font-variant-numeric: tabular-nums; }
.faqdoc__nav .pill { margin-top: 8px; }
.faqdoc__body { display: grid; gap: 64px; max-width: 820px; }
.faqdoc__group { scroll-margin-top: 90px; }
.faqdoc__group h2 { margin-bottom: 18px; }
.faqdoc .faq { margin: 0; max-width: none; }
@media (max-width: 900px) {
  .faqdoc { padding-top: 32px; }
  .faqdoc__grid { grid-template-columns: 1fr; }
  .faqdoc__nav { position: static; }
  .faqdoc__nav ul { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .faqdoc__nav ul a { border: 1px solid var(--hairline); border-radius: 999px; padding: 7px 14px; font-size: 14px; }
  .faqdoc__nav .pill { display: none; }
}

/* Pied de page sans photo (pages intérieures) */
.footer--slim { padding-top: 24px; }
.footer--slim .footer__contact { border-top: 0; }

/* ==========================================================================
   Couleur de tenue par filière : variables posées sur .prog (fiche filière, formation continue)
   ========================================================================== */
.prog .cover { background: var(--pc-deep); }
.prog .apply { background: var(--primary-soft); }
.prog .ybars__b, .prog .sw--b { background: color-mix(in srgb, var(--primary) 32%, #fff); }
.prog .ytabs__list { background: var(--primary-soft); }
.prog .opener { background: var(--primary-soft); }
.swatch { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; background: var(--sw); border: 1px solid rgba(15, 24, 48, .2); vertical-align: 0; }
.swatch--two { background: linear-gradient(90deg, #fff 50%, var(--sw) 50%); }
:is(.pcard, .cover, .footer) .swatch { border-color: rgba(255, 255, 255, .55); }
.keyfacts__tenue .swatch { width: 15px; height: 15px; margin-right: 8px; vertical-align: -1px; }

/* ---------- Parallaxe (calques d'image surdimensionnés, décalés au défilement) ---------- */
.has-parallax :is(.cover__media, .feature__media) { will-change: translate; }
.has-parallax :is(.pcard > img, .mosaic__item img) { scale: 1.08; will-change: translate; }
.has-parallax .pcard > img { transform: none; transition: scale .7s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .has-parallax .pcard:hover > img { transform: none; scale: 1.23; } }

/* ---------- Mouvement ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  :is(.pill, .icon-circle, .doc, .choice):active { transform: none; }
  .flyout__inner > *, .gnav__menu { transform: none !important; }
  :is(.pcard > img, .pgallery__item img, .cindex__img img, .flyout__feature img, .mosaic__item img) { transform: none !important; scale: none !important; }
  .gnav__link::after, .link::after, .pcard__more .icon, .doc__dl { transition: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Vidéos d'ambiance */
.ambient-still, video[data-ambient] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
video[data-ambient] { background: transparent; }

/* ---------- Impression ---------- */
@media print {
  .gnav, .ribbon, .subnav, .pill, .map, .carousel__nav, .video-control, .page-scrim { display: none !important; }
  .tile, .cover, .feature { background: #fff !important; color: #000 !important; }
  .glass-dark { background: #fff !important; color: #000 !important; border: 0; }
}
@media (max-width: 734px) { .gnav__logo img { height: 34px; } }

/* Couvertures des filières : l'image occupe l'écran, seule la barre de section reste visible dessous */
.prog .cover--page { min-height: max(520px, calc(100svh - var(--cover-top, 34px) - 56px)); }
.fc-summary { margin-bottom: var(--s-xl, 40px); }

/* Visite du bâtiment par zones : photos entières, sans recadrage */
.zone { display: grid; gap: 20px; padding-top: var(--s-xl, 40px); }
.zone + .zone { margin-top: var(--s-lg, 24px); border-top: 1px solid var(--hairline); }
.zone__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.zone__head h3 { font: 600 clamp(22px, 2.2vw, 28px)/1.15 var(--font-display); letter-spacing: -0.015em; margin: 0; }
.zone__head p { margin: 0; color: var(--ink-56); max-width: 48ch; }
.zgal { columns: 3 300px; column-gap: 16px; }
.zgal__item { break-inside: avoid; margin: 0 0 16px; display: grid; gap: 8px; }
.zgal__btn { display: block; width: 100%; padding: 0; border: 0; background: var(--navy-800); border-radius: var(--r-lg); overflow: hidden; cursor: zoom-in; }
.zgal__btn img { display: block; width: 100%; height: auto; transition: transform .5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .zgal__btn:hover img { transform: scale(1.03); } }
.zgal__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.zgal__item figcaption { font-size: 14px; color: var(--ink-56); }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(6, 13, 36, .94); color: #fff; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox__fig { margin: 0; display: grid; gap: 12px; justify-items: center; padding: 64px 72px; max-width: 100vw; }
.lightbox__fig img { max-width: min(1600px, calc(100vw - 144px)); max-height: calc(100dvh - 160px); width: auto; height: auto; border-radius: var(--r-md); }
.lightbox__fig figcaption { font-size: 15px; color: rgba(255,255,255,.85); }
.lightbox .icon-circle { position: absolute; }
.lightbox__prev { left: 20px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 20px; top: 50%; translate: 0 -50%; }
.lightbox__close { right: 20px; top: 20px; font-size: 26px; line-height: 1; }
@media (max-width: 640px) {
  .lightbox__fig { padding: 64px 12px 96px; }
  .lightbox__fig img { max-width: calc(100vw - 24px); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 24px; translate: none; }
  .lightbox__prev { left: calc(50% - 56px); } .lightbox__next { right: calc(50% - 56px); }
}

/* ---------- WhatsApp : bouton flottant et fenêtre de discussion ----------
   L'interlocuteur est l'institut : en-tête et avatar sont ceux de l'IPSIK, aux
   couleurs du site. Le vert de WhatsApp est réservé aux deux éléments qui
   désignent le canal, le bouton flottant et le lien final. Tout est en position
   fixe : aucun décalage de mise en page. */
.wa { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 88;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.flyout-open .wa, .menu-open .wa { opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility .16s; }
.wa [hidden] { display: none !important; }

/* Bouton flottant */
.wa__btn { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: #25d366; color: #fff;
  box-shadow: 0 10px 24px -8px rgba(7, 94, 46, .5), 0 2px 8px rgba(6, 13, 36, .16);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
/* Les deux icônes sont superposées dans la même cellule de grille et on n'en montre
   qu'une. Les règles qui masquent doivent viser aussi précisément que celle qui pose
   display: grid, sinon elles perdent et les deux se dessinent l'une sur l'autre. */
.wa__btn > span { display: grid; place-items: center; grid-area: 1 / 1; }
.wa__btn .wa-glyph { width: 31px; height: 31px; }
.wa__btn > .wa__btn-x { display: none; }
.wa[data-open] .wa__btn > .wa__btn-x { display: grid; }
.wa[data-open] .wa__btn > .wa__btn-i { display: none; }
.wa__btn-x .icon { width: 23px; height: 23px; stroke-width: 2.2; }
.wa__btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(7, 94, 46, .55), 0 2px 8px rgba(6, 13, 36, .16); }
.wa__btn:active { transform: translateY(0); }

/* Panneau */
.wa__panel { width: min(352px, calc(100vw - 2 * var(--gutter))); overflow: hidden;
  border-radius: var(--r-xl); background: var(--canvas);
  box-shadow: 0 40px 72px -28px rgba(6, 13, 36, .42), 0 2px 10px rgba(6, 13, 36, .1);
  transform-origin: bottom right; }
.wa:not([data-reduce]) .wa__panel { animation: wa-in .24s var(--ease-out); }
@keyframes wa-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }

.wa__head { display: grid; grid-template-columns: 42px 1fr 30px; gap: 13px; align-items: center;
  padding: 16px 16px 16px 18px; background: var(--navy-950); color: #fff; }
.wa__avatar { width: 42px; height: 42px; padding: 7px 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .11); object-fit: contain; }
.wa__who { display: grid; gap: 2px; min-width: 0; }
.wa__who strong { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.wa__sub { font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .62); }
.wa__x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: rgba(255, 255, 255, .7); transition: background-color .18s var(--ease), color .18s var(--ease); }
.wa__x:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.wa__x .icon { width: 16px; height: 16px; }

/* Fil de discussion */
.wa__thread { display: grid; gap: 10px; padding: 18px 16px; background: var(--mist); }
.wa__msg { max-width: 88%; padding: 11px 15px; font-size: 15px; line-height: 1.5; }
.wa__msg--them { justify-self: start; border-radius: 4px 16px 16px 16px;
  background: var(--canvas); color: var(--ink); box-shadow: 0 1px 2px rgba(6, 13, 36, .1); }
.wa__msg--me { justify-self: end; border-radius: 16px 16px 4px 16px;
  background: var(--primary); color: #fff; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Réponses rapides : côté visiteur, dans sa couleur. Les toucher, c'est les dire. */
.wa__quicks { display: grid; justify-items: end; gap: 7px; margin-top: 2px; }
.wa__quick { max-width: 88%; padding: 10px 15px; border-radius: 16px 16px 4px 16px;
  background: var(--primary-soft); color: var(--primary); font-size: 14.5px; font-weight: 500;
  line-height: 1.35; text-align: right; transition: background-color .18s var(--ease); }
.wa__quick:hover { background: #dbe4f8; }
.wa__quick + .wa__quick { border-top-right-radius: 6px; }

/* Composer */
.wa__form { display: grid; grid-template-columns: 1fr 44px; gap: 9px; align-items: end;
  padding: 12px; border-top: 1px solid var(--hairline); }
.wa__form textarea { width: 100%; max-height: 118px; padding: 11px 15px;
  border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--mist);
  font: inherit; font-size: 15px; line-height: 1.4; resize: none; overflow-y: auto; }
.wa__form textarea::placeholder { color: var(--ink-56); }
.wa__form textarea:focus-visible { background: var(--canvas); }
.wa__send { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary); color: #fff; transition: background-color .18s var(--ease); }
.wa__send:hover { background: var(--primary-hover); }
.wa__send .icon { width: 18px; height: 18px; margin-left: -2px; }

/* Passage de relais vers WhatsApp */
.wa__hand { padding: 14px 16px 16px; border-top: 1px solid var(--hairline); }
.wa__go { display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 20px; border-radius: var(--r-pill);
  background: #25d366; color: #fff; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  transition: background-color .18s var(--ease); }
.wa__go .wa-glyph { width: 22px; height: 22px; }
.wa__go:hover { background: #1eb558; color: #fff; text-decoration: none; }
.wa__back { display: block; width: 100%; margin-top: 4px; padding: 10px;
  font-size: 14px; color: var(--ink-56); transition: color .18s var(--ease); }
.wa__back:hover { color: var(--primary); }

@media (max-width: 734px) {
  .wa { right: 14px; bottom: 14px; gap: 12px; }
  .wa__btn { width: 56px; height: 56px; }
  .wa__btn .wa-glyph { width: 29px; height: 29px; }
  .wa__panel { width: calc(100vw - 28px); }
  .wa__thread { max-height: 46vh; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wa__panel { animation: none; }
  .wa__btn, .wa__quick, .wa__go, .wa__send, .wa__x, .wa__back { transition: none; }
}