/* =====================================================================
   École Supérieure des Affaires — feuille de style du site public
   Direction : la même famille que Kenté Consulting (Archivo large, angles
   coupés, rideau de transition), aux couleurs de l'ESA : le vin profond
   de « In God we trust » et les trois losanges du logo (vert, or, rouge).
   Pensée d'abord pour le téléphone.
   ===================================================================== */

/* ---------- 1. Police et jetons ---------- */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-ext-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-ext-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-italic.woff2") format("woff2-variations"), url("../fonts/archivo-latin-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }

:root {
  --nuit: #2b0e10;
  --nuit-2: #1f0a0c;
  --nuit-3: #3d1719;
  --bordeaux: #85201e;
  --bordeaux-fonce: #5e1614;
  --bordeaux-voile: #f6ecea;
  --rouge: #d21034;
  --vert: #1f8a3a;
  --vert-fonce: #16652a;
  --vert-voile: #e8f3eb;
  --or: #f2be2c;
  --or-clair: #f8d77a;
  --or-texte: #855f00;
  --or-voile: #fcf3d8;
  --papier: #f3f2ef;
  --blanc: #ffffff;
  --encre: #1d1615;
  --encre-2: #5c5150;
  --encre-3: #7d7270;
  --ligne: rgba(29, 22, 21, .12);
  --ligne-forte: rgba(29, 22, 21, .26);
  --ligne-claire: rgba(255, 255, 255, .16);
  --sur-sombre: rgba(255, 255, 255, .8);
  --erreur: #b3261e;

  --police: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --conteneur: 1280px;
  --gouttiere: clamp(16px, 4.5vw, 44px);
  --section: clamp(72px, 11vw, 148px);
  --entete: 68px;
  --coupe: 12px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .1);

  --base: 0s; /* départ de la séquence d'ouverture (voir entree.js) */

  /* Anciens noms conservés pour les styles intégrés aux contenus */
  --serif: var(--police);
  --sans: var(--police);
  --bordeaux-nuit: var(--nuit);
  --fond: var(--blanc);
  --fond-2: var(--papier);
  --rayon: 4px;
  --rayon-s: 3px;
}
@media (min-width: 1000px) { :root { --entete: 82px; } }
.js.visite-intro { --base: .95s; }
.js.depuis-nav { --base: .42s; }
.js.arrivee { --base: .18s; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 20px); }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--bordeaux); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--bordeaux-fonce); }
p { margin: 0 0 1em; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--bordeaux); outline-offset: 3px; }
/* Sur fond sombre, l'anneau de focus passe à l'or (contraste suffisant dans les deux cas) */
.entete :focus-visible, .nav-principale :focus-visible, .ouverture :focus-visible, .tete-page :focus-visible, .bande-inscription :focus-visible,
.bande-question :focus-visible, .bloc-cta :focus-visible, .pied :focus-visible, .barre-actions :focus-visible, .visionneuse :focus-visible, .flashes :focus-visible { outline-color: var(--or); }
::selection { background: var(--or); color: var(--nuit); }
.icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.18em; }
.icon-plein { fill: currentColor; stroke: none; }
.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; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 2000; background: var(--or); color: var(--nuit); padding: 12px 18px; font-weight: 650; text-decoration: none; transform: translateY(-160%); transition: transform .25s var(--ease-out); }
.skip:focus { transform: none; color: var(--nuit); }
[hidden] { display: none !important; }

/* ---------- 3. Typographie ---------- */
h1, h2, h3, h4 { margin: 0 0 .5em; color: inherit; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.1rem, 1.35rem + 3.9vw, 4.4rem); font-weight: 700; font-stretch: 118%; line-height: 1.02; letter-spacing: -.032em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 2.5vw, 3.2rem); font-weight: 680; font-stretch: 116%; line-height: 1.04; letter-spacing: -.028em; }
h3 { font-size: 1.18rem; font-weight: 630; font-stretch: 108%; line-height: 1.25; letter-spacing: -.01em; }
h4 { font-size: 1rem; font-weight: 630; line-height: 1.3; }
.h3 { font-size: 1.18rem; font-weight: 630; font-stretch: 108%; margin: 0 0 10px; }
.conteneur { width: 100%; max-width: var(--conteneur); margin-inline: auto; padding-inline: var(--gouttiere); }
.etroit { max-width: 52rem; }
.muted { color: var(--encre-2); }
.petit { font-size: .92rem; }
.note { font-size: .92rem; color: var(--encre-2); }

/* Mots des grands titres (découpés par site.js) */
.decoupe .mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.decoupe .mot-int { display: inline-block; }

/* ---------- 4. Boutons et liens ---------- */
.btn {
  --remplissage: var(--blanc);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px;
  padding: .85em 1.45em;
  border: 0;
  font: 650 1rem/1.15 var(--police); font-stretch: 106%;
  text-decoration: none; text-align: center;
  cursor: pointer;
  clip-path: polygon(var(--coupe) 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%, 0 var(--coupe));
  isolation: isolate; overflow: hidden;
  transition: color .35s var(--ease-out), transform .18s var(--ease-out), background-color .3s;
  touch-action: manipulation;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--remplissage); transform: translateX(-101%); transition: transform .55s var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:focus-visible { outline: 3px solid var(--encre); outline-offset: -6px; }
.btn:active { transform: scale(.97); }
.btn .icon { transition: transform .35s var(--ease-out); }
.btn:hover .icon-fleche { transform: translateX(4px); }
.btn-petit { min-height: 44px; padding: .7em 1.15em; font-size: .95rem; --coupe: 9px; }
.btn-grand { min-height: 54px; padding: 1em 1.7em; font-size: 1.05rem; --coupe: 13px; }
.btn-primaire { background: var(--bordeaux); color: var(--blanc); --remplissage: var(--nuit); }
.btn-primaire:hover, .btn-primaire:focus-visible { color: var(--blanc); }
.btn-secondaire { background: transparent; color: var(--bordeaux); box-shadow: inset 0 0 0 1.5px currentColor; --remplissage: var(--bordeaux); }
.btn-secondaire:hover, .btn-secondaire:focus-visible { color: var(--blanc); }
.btn-or { background: var(--or); color: var(--nuit); --remplissage: var(--blanc); }
.btn-or:hover, .btn-or:focus-visible { color: var(--nuit); }
.btn-clair { background: rgba(255, 255, 255, .06); color: var(--blanc); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); --remplissage: var(--blanc); }
.btn-clair:hover, .btn-clair:focus-visible { color: var(--nuit); }
.btn-clair:focus-visible, .btn-or:focus-visible { outline-color: var(--nuit) !important; }
.btn-primaire:focus-visible, .btn-secondaire:focus-visible { outline-color: var(--blanc) !important; }
.tete-page .btn-primaire:focus-visible, .tete-page .btn-secondaire:focus-visible, .bloc-cta .btn:focus-visible, .bande-question .btn:focus-visible { outline-color: var(--nuit) !important; }
.btn-whatsapp { background: #1f8f4e; color: var(--blanc); --remplissage: #16703c; }
.btn-whatsapp:hover { color: var(--blanc); }
.btn-lien { background: none; padding: 0; min-height: 0; clip-path: none; color: var(--bordeaux); font-weight: 650; text-decoration: underline; text-underline-offset: .22em; }
.btn-lien::before { display: none; }
.btn[disabled], .btn.is-loading { opacity: .7; pointer-events: none; }
.btn.is-loading::after { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 650; font-stretch: 104%; text-decoration: none; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  padding: 6px 0 4px;
  transition: background-size .45s var(--ease-out), color .25s;
}
.lien-fleche:hover, .lien-fleche:focus-visible { background-size: 100% 1.5px; }
.lien-fleche .icon { transition: transform .35s var(--ease-out); }
.lien-fleche:hover .icon { transform: translateX(4px); }

/* ---------- 5. Rideau de transition et séquence d'ouverture ---------- */
.rideau { display: none; }
.js .rideau { position: fixed; inset: 0; z-index: 1500; display: flex; pointer-events: none; }
.rideau > span { flex: 1; transform: translateY(-101%); }
.rideau > span:nth-child(1) { background: var(--vert); }
.rideau > span:nth-child(2) { background: var(--or); }
.rideau > span:nth-child(3) { background: var(--rouge); }
.rideau > span:nth-child(4) { background: var(--bordeaux); }
.rideau > span:nth-child(5) { background: var(--nuit); }
.visite-intro .rideau > span { animation: rideau-leve .9s var(--ease-in-out) both; animation-delay: calc(var(--base) - .35s + var(--i) * 60ms); }
.depuis-nav .rideau > span { animation: rideau-leve .75s var(--ease-in-out) both; animation-delay: calc(.04s + var(--i) * 45ms); }
.arrivee .rideau > span { animation: rideau-leve .55s var(--ease-in-out) both; animation-delay: calc(var(--i) * 35ms); }
.rideau-marque { position: absolute; inset: 0; display: none; place-items: center; }
.visite-intro .rideau-marque { display: grid; animation: efface .35s ease both; animation-delay: calc(var(--base) - .42s); }
.rideau-marque span { display: block; padding: 14px 18px; background: var(--blanc); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); animation: marque-entre .6s var(--ease-out) .08s both; }
.rideau-marque img { width: clamp(120px, 30vw, 170px); height: auto; }
html.depart .rideau > span { animation: rideau-entre .34s var(--ease-in-out) both; animation-delay: calc(var(--i) * 30ms); }
.sans-mouvement .rideau { display: none; }
@keyframes rideau-leve { from { transform: translateY(0); } to { transform: translateY(-101%); } }
@keyframes rideau-entre { from { transform: translateY(101%); } to { transform: translateY(0); } }
@keyframes efface { to { opacity: 0; visibility: hidden; } }
@keyframes marque-entre { from { opacity: 0; transform: scale(.88) translateY(12px); } to { opacity: 1; transform: none; } }

/* Éléments qui entrent au chargement (héros, en-têtes de page) */
.js .entree { opacity: 0; transform: translateY(22px); animation: monte .9s var(--ease-out) both; animation-delay: calc(var(--base) + .2s + var(--d, 0) * 110ms); }
.js .decoupe-chargement .mot-int { transform: translateY(108%); animation: mot-monte 1s var(--ease-out) both; animation-delay: calc(var(--base) + var(--i) * 70ms); }
@keyframes monte { to { opacity: 1; transform: none; } }
@keyframes mot-monte { to { transform: none; } }

/* Apparitions au défilement (classes posées par site.js) */
.js .revele { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .revele.est-visible { opacity: 1; transform: none; }
.js .decoupe-defilement .mot-int { transform: translateY(108%); transition: transform .95s var(--ease-out); transition-delay: calc(var(--i) * 55ms); }
.js .decoupe-defilement.est-visible .mot-int { transform: none; }

/* ---------- 6. En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 900;
  color: var(--blanc);
  transition: transform .5s var(--ease-out), background-color .4s ease, box-shadow .4s ease;
}
.entete.est-defile { background: rgba(43, 14, 16, .9); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--ligne-claire); }
.entete.est-cache { transform: translateY(-100%); }
.entete > .conteneur { display: flex; align-items: center; gap: 14px; height: var(--entete); transition: height .4s var(--ease-out); }
@media (min-width: 1000px) { .entete.est-defile > .conteneur { height: 70px; } }

/* Logo, recherche et bouton du menu restent au-dessus du menu plein écran (qui vit dans l'en-tête) */
.marque, .entete-recherche, .entete-cta, .burger { position: relative; z-index: 860; }
.marque { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; color: var(--blanc); text-decoration: none; }
.marque:hover { color: var(--blanc); }
.marque-tuile { flex: none; display: grid; place-items: center; width: 70px; height: 44px; padding: 4px 6px; background: var(--blanc); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: transform .5s var(--ease-out); }
.marque-tuile img { width: 100%; height: 100%; object-fit: contain; }
.marque:hover .marque-tuile { transform: rotate(-4deg) scale(1.04); }
.marque-texte { display: grid; min-width: 0; line-height: 1.12; }
.marque-nom { font-weight: 680; font-stretch: 112%; font-size: .98rem; letter-spacing: -.01em; }
.marque-lieu { font-size: .76rem; color: rgba(255, 255, 255, .66); margin-top: 2px; }
@media (min-width: 1000px) { .marque-tuile { width: 84px; height: 52px; } .marque-nom { font-size: 1.04rem; } }
@media (max-width: 359px) { .marque-texte { display: none; } }

.entete-recherche { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--blanc); border-radius: 50%; transition: background-color .25s; }
.entete-recherche:hover { color: var(--blanc); background: rgba(255, 255, 255, .1); }
.entete-recherche .icon { width: 21px; height: 21px; }
.entete-cta { flex: none; }
@media (max-width: 599px) { .entete-cta { display: none; } }

/* Bouton du menu : trois traits qui deviennent une croix */
.burger { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-right: -8px; padding: 0; border: 0; background: transparent; color: var(--blanc); cursor: pointer; }
.burger-lignes { position: relative; display: block; width: 26px; height: 16px; }
.burger-lignes i { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .45s var(--ease-out), opacity .2s, width .3s var(--ease-out); }
.burger-lignes i:nth-child(1) { top: 0; }
.burger-lignes i:nth-child(2) { top: 7px; width: 68%; }
.burger-lignes i:nth-child(3) { top: 14px; }
.burger:hover .burger-lignes i:nth-child(2) { width: 100%; }
.nav-ouverte .burger-lignes i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-ouverte .burger-lignes i:nth-child(2) { opacity: 0; }
.nav-ouverte .burger-lignes i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Navigation : menu plein écran sur téléphone et tablette */
.nav-principale {
  position: fixed; inset: 0; z-index: 850;
  display: flex; flex-direction: column;
  padding: calc(var(--entete) + 18px) var(--gouttiere) calc(32px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--nuit); color: var(--blanc);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .65s var(--ease-in-out), visibility 0s linear .65s;
}
.nav-ouverte .nav-principale { clip-path: inset(0); visibility: visible; transition: clip-path .65s var(--ease-in-out), visibility 0s; }
.nav-ouverte { overflow: hidden; }
.nav-ouverte .entete { transform: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.nav-principale > ul { list-style: none; margin: 0; padding: 0; }
.nav-principale > ul > li { border-bottom: 1px solid var(--ligne-claire); opacity: 0; transform: translateY(28px); transition: opacity .3s, transform .3s; }
.nav-ouverte .nav-principale > ul > li { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(.22s + var(--i, 0) * 55ms); }
.nav-principale > ul > li > a, .nav-principale button.nav-ouvrir {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0;
  border: 0; background: none; color: var(--blanc); cursor: pointer; text-align: left; text-decoration: none;
  font: 680 clamp(1.45rem, 1rem + 2.6vw, 2.1rem)/1.1 var(--police); font-stretch: 116%; letter-spacing: -.02em;
}
.nav-principale .est-actif > a, .nav-principale .est-actif > button { color: var(--or); }
.nav-principale .chevron { width: 22px; height: 22px; transition: transform .45s var(--ease-out); }
.nav-item.est-ouvert .chevron { transform: rotate(180deg); }
.sous-menu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.nav-item.est-ouvert > .sous-menu { grid-template-rows: 1fr; }
.sous-menu-int { min-height: 0; overflow: hidden; }
.sous-menu ul { list-style: none; margin: 0; padding: 0 0 14px; }
.sous-menu a { display: block; padding: 10px 0 10px 16px; border-left: 2px solid var(--ligne-claire); color: var(--sur-sombre); text-decoration: none; font-size: 1.02rem; line-height: 1.35; transition: color .2s, border-color .2s; }
.sous-menu a:hover, .sous-menu a:focus-visible { color: var(--blanc); border-left-color: var(--or); }
.sous-menu a small { display: block; color: rgba(255, 255, 255, .55); font-size: .84rem; }
.sous-menu .groupe { margin: 10px 0 4px; font-size: .84rem; font-weight: 600; color: var(--or-clair); }
.nav-mobile-extra { display: grid; gap: 10px; margin-top: 28px; opacity: 0; transition: opacity .3s; }
.nav-ouverte .nav-mobile-extra { opacity: 1; transition: opacity .5s .45s; }
.nav-mobile-extra .btn { width: 100%; }
.nav-contacts { display: grid; gap: 4px; margin-top: 12px; }
.nav-contacts a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--sur-sombre); text-decoration: none; }
.nav-contacts a:hover { color: var(--blanc); }
.nav-frise { display: flex; height: 6px; margin-top: auto; padding-top: 0; }

/* Navigation : barre horizontale à partir de 1180 px */
@media (min-width: 1180px) {
  .burger { display: none; }
  .nav-principale { position: static; inset: auto; z-index: auto; display: block; padding: 0; overflow: visible; background: none; clip-path: none; visibility: visible; transition: none; }
  .nav-principale > ul { display: flex; align-items: center; gap: 2px; }
  .nav-principale > ul > li { position: relative; border: 0; opacity: 1; transform: none; transition: none; }
  .nav-principale > ul > li > a, .nav-principale button.nav-ouvrir { position: relative; width: auto; gap: .35em; padding: 10px 12px; font-size: .97rem; font-weight: 560; font-stretch: 104%; letter-spacing: 0; color: rgba(255, 255, 255, .84); white-space: nowrap; transition: color .25s; }
  .nav-principale > ul > li > a::after, .nav-principale button.nav-ouvrir::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; background: linear-gradient(90deg, var(--vert) 0 33.3%, var(--or) 33.3% 66.6%, var(--rouge) 66.6%); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
  .nav-principale > ul > li > a:hover, .nav-principale button.nav-ouvrir:hover, .nav-principale .est-actif > a, .nav-principale .est-actif > button, .nav-item.est-ouvert > button { color: var(--blanc); }
  .nav-principale > ul > li > a:hover::after, .nav-principale button.nav-ouvrir:hover::after, .nav-principale .est-actif > a::after, .nav-principale .est-actif > button::after, .nav-item.est-ouvert > button::after { transform: scaleX(1); }
  .nav-principale .chevron { width: .8em; height: .8em; }
  .sous-menu {
    position: absolute; top: calc(100% + 10px); left: 50%;
    display: block; min-width: 300px; max-width: 540px;
    padding: 16px 18px 12px;
    background: var(--blanc); color: var(--encre);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    box-shadow: inset 0 3px 0 var(--or);
    opacity: 0; visibility: hidden; transform: translate(-50%, 10px);
    transition: opacity .22s var(--ease-out), transform .35s var(--ease-out), visibility 0s linear .35s;
  }
  .nav-item.est-ouvert > .sous-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s var(--ease-out), transform .45s var(--ease-out), visibility 0s; }
  .sous-menu-int { overflow: visible; }
  .sous-menu.large { min-width: 560px; }
  .sous-menu.large .sous-menu-int { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
  .sous-menu ul { padding: 0; }
  .sous-menu a { padding: 8px 10px; margin: 0 -10px; border-left: 0; color: var(--encre); font-size: .96rem; transition: background-color .2s, color .2s, transform .3s var(--ease-out); }
  .sous-menu a:hover, .sous-menu a:focus-visible { background: var(--papier); color: var(--bordeaux); transform: translateX(3px); }
  .sous-menu a small { color: var(--encre-3); }
  .sous-menu .groupe { color: var(--encre-3); margin: 8px 0 2px; font-size: .8rem; }
  .nav-mobile-extra, .nav-frise { display: none; }
}
@media (max-width: 1179px) {
  .entete-recherche { order: 0; }
}

/* Frise tricolore (losanges du logo) */
.frise { display: flex; height: 6px; }
.frise span, .nav-frise span { flex: 1; }
.frise span:nth-child(1), .nav-frise span:nth-child(1) { background: var(--vert); }
.frise span:nth-child(2), .nav-frise span:nth-child(2) { background: var(--or); }
.frise span:nth-child(3), .nav-frise span:nth-child(3) { background: var(--rouge); }

/* Messages flash (zone sombre sous l'en-tête) */
.flashes { background: var(--nuit); padding: calc(var(--entete) + 16px) 0 4px; }
.flashes .alerte { margin: 0 0 10px; }
.flashes + .tete-page, .flashes + .ouverture { padding-top: 28px; }

/* ---------- 7. Barre d'actions sur téléphone ---------- */
.barre-actions {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 800;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: stretch;
  padding: 6px;
  background: rgba(31, 10, 12, .92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transform: translateY(140%);
  transition: transform .55s var(--ease-out);
}
.barre-actions.est-visible { transform: none; }
.nav-ouverte .barre-actions { transform: translateY(140%); }
.barre-actions .btn { min-height: 48px; padding: .6em .8em; font-size: .97rem; }
.barre-lien { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; color: var(--blanc); text-decoration: none; font-size: .78rem; font-weight: 600; line-height: 1.1; border-radius: 2px; transition: background-color .2s; }
.barre-lien:hover, .barre-lien:active { color: var(--blanc); background: rgba(255, 255, 255, .1); }
.barre-lien .icon { width: 20px; height: 20px; }
body.avec-barre { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .barre-actions { display: none; } body.avec-barre { padding-bottom: 0; } }

.flottant-whatsapp { position: fixed; right: 18px; bottom: 18px; z-index: 790; width: 56px; height: 56px; border-radius: 50%; background: #1f8f4e; color: var(--blanc); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transition: transform .3s var(--ease-out); }
.flottant-whatsapp:hover { color: var(--blanc); transform: scale(1.06); }
.flottant-whatsapp .icon { width: 28px; height: 28px; fill: currentColor; stroke: none; }
@media (max-width: 899px) { .avec-barre .flottant-whatsapp { bottom: calc(92px + env(safe-area-inset-bottom)); width: 50px; height: 50px; } }

/* ---------- 8. Accueil : ouverture ---------- */
.ouverture {
  position: relative;
  padding: calc(var(--entete) + clamp(28px, 6vw, 72px)) 0 0;
  background: linear-gradient(var(--nuit) 0, var(--nuit) calc(100% - 96px), var(--blanc) calc(100% - 96px));
  color: var(--blanc);
  overflow: hidden;
}
.ouverture::before { content: ""; position: absolute; inset: 0 0 96px; background: radial-gradient(120% 70% at 85% 0%, rgba(133, 32, 30, .55), transparent 60%); pointer-events: none; }
.ouverture-grille { position: relative; display: grid; gap: 34px; }
.ouverture h1 { font-size: clamp(2.35rem, 1.05rem + 6.6vw, 5.5rem); font-weight: 720; font-stretch: 122%; line-height: .96; letter-spacing: -.04em; margin-bottom: .32em; max-width: 13.5ch; }
.ouverture .texte { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--sur-sombre); max-width: 40ch; margin-bottom: 26px; }
.ouverture .actions { gap: 10px; }
.statut-inscriptions { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 0; font-size: .93rem; line-height: 1.5; color: rgba(255, 255, 255, .74); max-width: 46ch; }
.statut-inscriptions .pastille { position: relative; flex: none; width: 10px; height: 10px; margin-top: .45em; border-radius: 50%; background: #3ccf63; }
.statut-inscriptions .pastille::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #3ccf63; opacity: 0; animation: pouls 2.4s ease-out infinite; }
.statut-inscriptions.ferme .pastille { background: rgba(255, 255, 255, .5); }
.statut-inscriptions.ferme .pastille::after { display: none; }
@keyframes pouls { 0% { opacity: .8; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
.ouverture-photo { position: relative; margin: 0 0 0 auto; width: 100%; max-width: 640px; padding: 0 0 0 14px; }
.ouverture-photo::before { content: ""; position: absolute; inset: 18px 18px -14px 0; background: linear-gradient(90deg, var(--vert) 0 33.3%, var(--or) 33.3% 66.6%, var(--rouge) 66.6%); clip-path: polygon(var(--coupe) 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%, 0 var(--coupe)); }
.cadre-coupe { position: relative; overflow: hidden; background: var(--nuit-3); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.cadre-coupe img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transform: scale(1.12); transform-origin: 50% 40%; will-change: transform; }
.js .ouverture .cadre-coupe img { animation: photo-pose 2.2s var(--ease-out) both; animation-delay: calc(var(--base) + .1s); }
@keyframes photo-pose { from { transform: scale(1.28); } to { transform: scale(1.12); } }
@media (min-width: 1000px) {
  .ouverture { padding-bottom: 0; background: linear-gradient(var(--nuit) 0, var(--nuit) calc(100% - 120px), var(--blanc) calc(100% - 120px)); }
  .ouverture::before { inset: 0 0 120px; }
  .ouverture-grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
  .ouverture h1 { max-width: 15ch; }
  .ouverture-texte { padding-bottom: 150px; }
  .ouverture-photo { margin-top: 24px; }
  .ouverture-photo { max-width: none; }
  .cadre-coupe img { aspect-ratio: 4 / 5; object-position: 58% 50%; }
}

/* Repères : reconnaissances et chiffres clés */
.reperes { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 104px); }
.registre-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.registre-liste li { display: flex; gap: 12px; align-items: flex-start; padding: 18px 12px 18px 0; border-bottom: 1px solid var(--ligne); }
.sceau { flex: none; width: 30px; height: 30px; color: var(--or-texte); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.registre-liste strong { display: block; font-weight: 680; font-stretch: 110%; font-size: 1rem; line-height: 1.2; color: var(--nuit); }
.registre-liste span { display: block; margin-top: 3px; font-size: .86rem; line-height: 1.35; color: var(--encre-2); }
@media (min-width: 700px) { .registre-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .registre-liste { grid-template-columns: repeat(5, minmax(0, 1fr)); } .registre-liste li { padding-right: 18px; } }
.chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin: clamp(40px, 6vw, 72px) 0 0; }
.chiffre { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding-top: 16px; border-top: 3px solid var(--nuit); }
.chiffre:nth-child(1) { border-top-color: var(--vert); }
.chiffre:nth-child(2) { border-top-color: var(--or); }
.chiffre:nth-child(3) { border-top-color: var(--rouge); }
.chiffre:nth-child(4) { border-top-color: var(--bordeaux); }
.chiffre dd { margin: 0; font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem); font-weight: 720; font-stretch: 122%; line-height: .95; letter-spacing: -.04em; color: var(--nuit); font-variant-numeric: tabular-nums; }
.chiffre dt { font-size: .95rem; line-height: 1.4; color: var(--encre-2); max-width: 22ch; }
@media (min-width: 900px) { .chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }

/* ---------- 9. Sections ---------- */
.section { padding-block: var(--section); position: relative; }
.section-alt { background: var(--papier); }
.section-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: clamp(28px, 4vw, 52px); }
.section-tete h2 { margin: 0; max-width: 18ch; }
.section-tete p { margin: 12px 0 0; color: var(--encre-2); max-width: 44ch; font-size: 1.05rem; }
.deux-colonnes .section-tete h2 { font-size: clamp(1.6rem, 1.25rem + 1.8vw, 2.4rem); }
@media (min-width: 800px) { .section-tete { flex-direction: row; justify-content: space-between; align-items: flex-end; } }

/* Formations */
.formations-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne-forte); }
.formation-ligne a {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--ligne); color: inherit; text-decoration: none; isolation: isolate;
}
.formation-ligne a::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gouttiere)); z-index: -1; background: var(--papier); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-out); }
.formation-ligne a:hover::before, .formation-ligne a:focus-visible::before, .formation-ligne a:active::before { transform: none; }
.formation-ligne .niveau { grid-column: 1 / -1; }
.formation-titre { display: block; font-size: clamp(1.3rem, 1.05rem + 1.3vw, 2rem); font-weight: 680; font-stretch: 114%; line-height: 1.1; letter-spacing: -.02em; color: var(--nuit); transition: color .25s, transform .45s var(--ease-out); }
.formation-ligne a:hover .formation-titre { color: var(--bordeaux); transform: translateX(6px); }
.formation-resume { display: block; margin-top: 8px; font-size: .97rem; line-height: 1.5; color: var(--encre-2); max-width: 62ch; }
.formation-compte { display: inline-flex; align-items: center; gap: 10px; align-self: start; color: var(--encre-2); font-size: .92rem; white-space: nowrap; }
.formation-compte .icon { width: 22px; height: 22px; color: var(--bordeaux); transition: transform .35s var(--ease-out); }
.formation-ligne a:hover .formation-compte .icon { transform: translateX(5px); }
.niveau { display: inline-block; justify-self: start; padding: 5px 11px 4px; background: var(--or); color: var(--nuit); font-size: .8rem; font-weight: 680; font-stretch: 108%; line-height: 1.2; white-space: nowrap; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
@media (max-width: 599px) { .formation-compte { grid-column: 1 / -1; } .formation-compte span { display: none; } }
@media (min-width: 900px) {
  .formation-ligne a { grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 8px 32px; padding: 30px 0; }
  .formation-ligne .niveau { grid-column: auto; align-self: start; margin-top: 6px; }
}

/* Bande inscription : quatre étapes reliées par un fil qui se remplit */
.bande-inscription { position: relative; background: var(--nuit); color: var(--blanc); padding-block: var(--section); overflow: hidden; }
.bande-inscription::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--vert) 0 33.3%, var(--or) 33.3% 66.6%, var(--rouge) 66.6%); }
.bande-inscription h2 { color: var(--blanc); max-width: 14ch; }
.bande-inscription p { color: var(--sur-sombre); max-width: 46ch; }
.bande-inscription .grille { display: grid; gap: 44px; }
@media (min-width: 1000px) { .bande-inscription .grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; } }
.etapes { --progression: 0; position: relative; list-style: none; margin: 0; padding: 0; counter-reset: etape; display: grid; gap: 0; }
.etapes::before, .etapes::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 34px; width: 2px; }
.etapes::before { background: var(--ligne-claire); }
.etapes::after { background: var(--or); transform: scaleY(var(--progression)); transform-origin: top; }
.etapes li { counter-increment: etape; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 0 0 30px; }
.etapes li::before {
  content: counter(etape); position: relative; z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--nuit); color: var(--or);
  box-shadow: inset 0 0 0 2px var(--or);
  font-weight: 720; font-stretch: 118%; font-size: 1.15rem;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background-color .45s var(--ease-out), color .45s var(--ease-out);
}
.etapes li.est-atteinte::before { background: var(--or); color: var(--nuit); }
.etapes strong { display: block; padding-top: 8px; margin-bottom: 4px; font-size: 1.15rem; font-weight: 650; font-stretch: 110%; color: var(--blanc); }
.etapes span { display: block; color: rgba(255, 255, 255, .76); font-size: .98rem; line-height: 1.55; }
.sans-mouvement .etapes, .no-js .etapes { --progression: 1; }
.sans-mouvement .etapes li::before { background: var(--or); color: var(--nuit); }

/* Annonces : défilant à glisser du doigt */
.defilant { position: relative; }
.defilant-piste { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px var(--gouttiere) 18px; margin: 0 calc(-1 * var(--gouttiere)); scroll-padding-inline: var(--gouttiere); scrollbar-width: none; overscroll-behavior-x: contain; }
.defilant-piste::-webkit-scrollbar { display: none; }
.defilant-piste > * { scroll-snap-align: start; flex: none; }
.annonce { margin: 0; width: min(640px, 86vw); }
.annonce button, .annonce-lien { display: block; width: 100%; padding: 0; border: 0; background: var(--papier); cursor: zoom-in; overflow: hidden; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.annonce-lien { cursor: pointer; }
.annonce img { width: 100%; aspect-ratio: 1140 / 428; object-fit: contain; background: var(--blanc); transition: transform .8s var(--ease-out); }
.annonce button:hover img, .annonce-lien:hover img { transform: scale(1.03); }
.annonce figcaption { font-size: .88rem; color: var(--encre-2); margin-top: 8px; }
.affiche { width: min(260px, 64vw); }
.affiche img { aspect-ratio: 3 / 4; object-fit: cover; }
.defilant-nav { display: flex; gap: 8px; }
.rond { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: var(--nuit); color: var(--blanc); cursor: pointer; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); transition: background-color .25s, transform .18s var(--ease-out); }
.rond:hover { background: var(--bordeaux); color: var(--blanc); }
.rond:active { transform: scale(.94); }

/* Actualités */
.actus { display: grid; gap: 36px; }
@media (min-width: 1000px) { .actus { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); } }
.actu-une a { display: block; color: inherit; text-decoration: none; }
.actu-une .vignette { aspect-ratio: 16 / 10; }
.actu-une h3 { margin: 20px 0 10px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 680; font-stretch: 114%; line-height: 1.12; letter-spacing: -.02em; transition: color .25s; }
.actu-une a:hover h3, .actu-liste a:hover strong, .carte-actu a:hover h2, .carte-actu a:hover h3 { color: var(--bordeaux); }
.actu-liste { list-style: none; margin: 0; padding: 0; }
.actu-liste li + li { border-top: 1px solid var(--ligne); }
.actu-liste a { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 16px 0; color: inherit; text-decoration: none; }
.actu-liste li:first-child a { padding-top: 0; }
.actu-liste .vignette { aspect-ratio: 4 / 3; }
.actu-liste strong { display: block; font-weight: 640; font-stretch: 104%; line-height: 1.32; transition: color .25s; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: .84rem; color: var(--encre-3); }
.categorie { color: var(--bordeaux); font-weight: 650; }
.vignette { position: relative; overflow: hidden; background: var(--bordeaux-voile); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
a:hover > .vignette img, a:focus-visible > .vignette img { transform: scale(1.05); }
.vignette-vide { display: flex; align-items: flex-end; padding: 16px; background: linear-gradient(150deg, var(--bordeaux) 0%, var(--nuit) 100%); color: var(--or); font-size: 1.05rem; font-weight: 650; font-stretch: 110%; line-height: 1.15; }
.vignette-vide span { max-width: 14ch; }
.actu-liste .vignette-vide { padding: 8px; font-size: .76rem; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 34px 26px; }
.carte-actu a { display: block; color: inherit; text-decoration: none; }
.carte-actu .vignette { aspect-ratio: 16 / 10; }
.carte-actu h2, .carte-actu h3 { margin: 16px 0 6px; font-size: 1.25rem; font-weight: 660; font-stretch: 110%; line-height: 1.2; transition: color .25s; }
.carte-actu p { margin: 0; font-size: .96rem; color: var(--encre-2); }

/* Vie étudiante et vidéos */
.duo { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) { .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 88px); } }
.liste-liens { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--ligne-forte); }
.liste-liens li { border-bottom: 1px solid var(--ligne); }
.liste-liens a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 12px 0; color: var(--encre); text-decoration: none; font-weight: 560; font-stretch: 104%; transition: color .25s, padding .45s var(--ease-out); }
.liste-liens a:hover { color: var(--bordeaux); padding-left: 8px; }
.liste-liens .icon { color: var(--encre-3); transition: transform .35s var(--ease-out), color .25s; }
.liste-liens a:hover .icon { color: var(--bordeaux); transform: translateX(4px); }
.videos-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 26px 20px; }
@media (min-width: 560px) { .duo .videos-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.video { margin: 0; }
.video-cadre { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--nuit-2); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.video-cadre img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.video-cadre:hover img { transform: scale(1.05); }
.video-cadre iframe, .video-cadre video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-lire { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: linear-gradient(180deg, rgba(31, 10, 12, 0) 35%, rgba(31, 10, 12, .55)); color: var(--blanc); cursor: pointer; }
.video-lire span { display: grid; place-items: center; width: 60px; height: 60px; background: var(--or); color: var(--nuit); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: transform .35s var(--ease-out); }
.video-lire:hover span { transform: scale(1.08); }
.video-lire .icon { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; stroke: none; }
.video figcaption { margin-top: 12px; font-size: .95rem; font-weight: 560; line-height: 1.4; }

/* Partenaires et international */
.partenaires { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0 34px; list-style: none; margin: 0; padding: 0; }
.partenaires li { border-top: 1px solid var(--ligne-forte); }
.partenaires a { display: block; padding: 16px 0; color: var(--encre); text-decoration: none; font-weight: 600; font-stretch: 104%; transition: color .25s, transform .45s var(--ease-out); }
.partenaires a:hover { color: var(--bordeaux); transform: translateX(5px); }
.partenaires small { display: block; margin-top: 2px; color: var(--encre-3); font-weight: 400; font-size: .86rem; }
.pays-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.pays { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--blanc); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.section:not(.section-alt) .pays { background: var(--papier); }
.pays img { flex: none; width: 44px; height: 30px; margin-top: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--ligne); }
.pays strong { display: block; font-weight: 660; font-stretch: 106%; }
.pays a { display: block; font-size: .93rem; color: var(--encre-2); text-decoration: none; }
.pays a:hover { color: var(--bordeaux); text-decoration: underline; }

/* Agenda et documents */
.deux-colonnes { display: grid; gap: 56px; }
@media (min-width: 1000px) { .deux-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 88px); } }
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 18px 0; border-top: 1px solid var(--ligne); }
.agenda li:last-child { border-bottom: 1px solid var(--ligne); }
@media (min-width: 560px) { .agenda li { grid-template-columns: 10rem minmax(0, 1fr); gap: 18px; } }
.agenda .quand { font-weight: 680; font-stretch: 112%; color: var(--bordeaux); line-height: 1.3; }
.agenda strong { display: block; font-weight: 630; }
.agenda span { display: block; font-size: .95rem; color: var(--encre-2); }
.documents { list-style: none; margin: 0; padding: 0; }
.documents li { border-top: 1px solid var(--ligne); }
.documents li:last-child { border-bottom: 1px solid var(--ligne); }
.documents a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 60px; padding: 12px 0; color: var(--encre); text-decoration: none; transition: color .25s; }
.documents a:hover { color: var(--bordeaux); }
.doc-ico { display: grid; place-items: center; width: 2.4rem; height: 2.8rem; background: var(--nuit); color: var(--or); font-size: .66rem; font-weight: 720; font-stretch: 110%; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); transition: background-color .25s; }
.documents a:hover .doc-ico { background: var(--bordeaux); }
.documents .taille { font-size: .84rem; color: var(--encre-3); white-space: nowrap; }

/* Contact */
.campus-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.campus { padding: clamp(22px, 3vw, 32px); background: var(--blanc); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.section:not(.section-alt) .campus, .prose .campus { background: var(--papier); }
.campus h2, .campus h3 { margin-bottom: 10px; font-size: 1.45rem; font-weight: 680; font-stretch: 114%; letter-spacing: -.015em; color: var(--nuit); }
.campus p { margin-bottom: 12px; color: var(--encre-2); }
.campus ul { list-style: none; margin: 0 0 14px; padding: 0; }
.campus li a { display: inline-flex; align-items: center; gap: .55em; min-height: 40px; color: var(--encre); text-decoration: none; }
.campus li a:hover { color: var(--bordeaux); text-decoration: underline; }
.bande-question {
  position: relative; display: grid; gap: 22px; align-items: center;
  margin-bottom: 32px; padding: clamp(28px, 5vw, 56px);
  background: var(--nuit); color: var(--blanc);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.bande-question h2 { margin-bottom: 8px; color: var(--blanc); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); max-width: 18ch; }
.bande-question p { margin: 0; color: var(--sur-sombre); max-width: 46ch; }
.bande-question .btn-primaire { background: var(--or); color: var(--nuit); --remplissage: var(--blanc); }
.bande-question .btn-primaire:hover { color: var(--nuit); }
@media (min-width: 900px) { .bande-question { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; } }

/* ---------- 10. Pied de page ---------- */
.pied { position: relative; background: var(--nuit-2); color: rgba(255, 255, 255, .78); padding: 0 0 28px; font-size: .96rem; }
.pied::before { content: ""; display: block; height: 6px; margin-bottom: clamp(48px, 7vw, 88px); background: linear-gradient(90deg, var(--vert) 0 33.3%, var(--or) 33.3% 66.6%, var(--rouge) 66.6%); }
.pied a { color: rgba(255, 255, 255, .86); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease-out), color .2s; }
.pied a:hover { color: var(--blanc); background-size: 100% 1px; }
.pied-grille { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 640px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pied-grille { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; } }
.pied h2 { margin: 0 0 14px; font-size: .95rem; font-weight: 650; font-stretch: 108%; letter-spacing: 0; color: var(--blanc); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 8px; }
.pied-marque { display: inline-block; padding: 6px 10px; background: var(--blanc) !important; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.pied-marque img { height: 56px; width: auto; }
.devise { margin: 22px 0 8px; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); font-weight: 720; font-stretch: 120%; line-height: 1; letter-spacing: -.03em; color: var(--or); }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { display: inline-grid; place-items: center; width: 44px; height: 44px; background: rgba(255, 255, 255, .08) !important; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: background-color .25s !important; }
.social a:hover { background: var(--bordeaux) !important; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--ligne-claire); font-size: .86rem; color: rgba(255, 255, 255, .6); }

/* ---------- 11. Pages intérieures ---------- */
.tete-page {
  position: relative;
  padding: calc(var(--entete) + clamp(28px, 6vw, 72px)) 0 clamp(36px, 6vw, 72px);
  background: var(--nuit); color: var(--blanc);
  overflow: hidden;
}
.tete-page::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 80% at 100% 0%, rgba(133, 32, 30, .5), transparent 65%); pointer-events: none; }
.tete-page::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--vert) 0 33.3%, var(--or) 33.3% 66.6%, var(--rouge) 66.6%); }
.tete-page > .conteneur { position: relative; }
.tete-page h1 { max-width: 20ch; margin-bottom: 14px; color: var(--blanc); }
.tete-page .chapo { max-width: 46ch; margin: 0; font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem); line-height: 1.55; color: var(--sur-sombre); }
.tete-page .actions { margin-top: 26px; }
.tete-page .btn-primaire { background: var(--or); color: var(--nuit); --remplissage: var(--blanc); }
.tete-page .btn-primaire:hover, .tete-page .btn-primaire:focus-visible { color: var(--nuit); }
.tete-page .btn-secondaire { color: var(--blanc); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); --remplissage: var(--blanc); }
.tete-page .btn-secondaire:hover, .tete-page .btn-secondaire:focus-visible { color: var(--nuit); }
.tete-page .btn-lien { color: var(--or); }
.tete-page .muted, .tete-page .meta { color: rgba(255, 255, 255, .7); }
.tete-page .categorie { color: var(--or); }
.tete-page .alerte { color: var(--encre); }
.tete-page form .btn-primaire { background: var(--or); }
.tete-page .recherche-form input { border-color: transparent; }

.ariane { margin-bottom: 18px; font-size: .88rem; color: rgba(255, 255, 255, .6); }
.ariane ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ariane li:not(:last-child)::after { content: "/"; margin-left: 6px; color: rgba(255, 255, 255, .35); }
.ariane a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.ariane a:hover { color: var(--or); text-decoration: underline; }

.mise-en-page { display: grid; gap: 40px; padding: clamp(36px, 6vw, 72px) 0 clamp(64px, 9vw, 120px); align-items: start; }
.mise-en-page.pleine { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .mise-en-page { grid-template-columns: minmax(0, 1fr) 310px; gap: clamp(40px, 6vw, 88px); } }
.lateral { display: grid; gap: 18px; }
@media (min-width: 1000px) { .lateral { position: sticky; top: calc(var(--entete) + 24px); } }
.bloc-lateral { padding: 22px; background: var(--papier); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.bloc-lateral h2 { margin-bottom: 10px; font-size: 1.02rem; font-weight: 650; font-stretch: 108%; letter-spacing: 0; color: var(--encre); }
.bloc-lateral ul { list-style: none; margin: 0; padding: 0; }
.bloc-lateral li a { display: block; padding: 8px 10px; margin: 0 -10px; color: var(--encre-2); text-decoration: none; line-height: 1.35; border-left: 2px solid transparent; transition: color .2s, border-color .2s, background-color .2s; }
.bloc-lateral li a:hover { color: var(--bordeaux); background: rgba(255, 255, 255, .6); }
.bloc-lateral li a[aria-current="page"] { color: var(--bordeaux); font-weight: 650; border-left-color: var(--bordeaux); background: var(--blanc); }
.bloc-lateral .groupe { margin: 12px 0 2px; font-size: .8rem; font-weight: 650; color: var(--encre-3); }
.bloc-cta { background: var(--nuit); color: var(--blanc); }
.bloc-cta h2 { color: var(--blanc); font-size: 1.35rem; font-weight: 680; font-stretch: 114%; }
.bloc-cta p { color: var(--sur-sombre); font-size: .96rem; }
.bloc-cta .btn { width: 100%; margin-top: 6px; }
.bloc-cta .btn-primaire { background: var(--or); color: var(--nuit); --remplissage: var(--blanc); }
.bloc-cta .btn-primaire:hover { color: var(--nuit); }
.bloc-cta .btn-secondaire { color: var(--blanc); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); --remplissage: var(--blanc); }
.bloc-cta .btn-secondaire:hover { color: var(--nuit); }

/* ---------- 12. Contenu éditorial ---------- */
.prose { max-width: 70ch; font-size: 1.07rem; }
.prose h2 { margin: 1.8em 0 .5em; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); color: var(--nuit); }
.prose h3 { margin: 1.6em 0 .4em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--bordeaux); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--or); font-size: 1.2rem; font-weight: 560; font-stretch: 106%; color: var(--encre); }
.prose figure { margin: 1.6em 0; }
.prose img { height: auto; }
.prose figure img, .prose > p > img { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.prose figcaption { margin-top: 8px; font-size: .88rem; color: var(--encre-3); }
.prose table { display: block; overflow-x: auto; width: 100%; margin: 1.2em 0 1.6em; border-collapse: collapse; font-size: .97rem; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.prose th { background: var(--papier); font-weight: 650; }
.prose a { word-break: break-word; }
.prose iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 1.4em 0; border: 0; background: var(--nuit-2); }
.prose .signature { font-size: .95rem; color: var(--encre-2); }
.prose > p:first-child:has(em:only-child) { color: var(--encre-2); }
.prose .not-prose, .prose ul.agenda, .prose ul.documents, .prose .campus-grille ul { padding-left: 0; list-style: none; }
.prose .campus-grille { margin: 1.2em 0 1.6em; }
.prose .campus h3 { margin-top: 0; }
.prose .agenda li, .prose .documents li { margin: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 1.4em 0; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--papier); cursor: zoom-in; }
.flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px 14px; margin: 1.2em 0; }
.flags figure { margin: 0; text-align: center; }
.flags img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 0 0 1px var(--ligne); clip-path: none !important; }
.flags figcaption { margin-top: 6px; font-size: .9rem; color: var(--encre); }
ol.parcours { list-style: none; margin: 1.2em 0; padding: 0; counter-reset: p; border-left: 2px solid var(--or); }
ol.parcours li { counter-increment: p; position: relative; margin: 0; padding: 0 0 18px 34px; }
ol.parcours li::before { content: counter(p); position: absolute; left: -15px; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; background: var(--or); color: var(--nuit); font-size: .8rem; font-weight: 720; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.img-cassee { display: none !important; }
.vide { padding: 32px; border: 1.5px dashed var(--ligne-forte); color: var(--encre-2); text-align: center; }

/* ---------- 13. Formations et filières ---------- */
.filieres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0 30px; list-style: none; margin: 16px 0 0; padding: 0; }
.filieres li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
.filieres li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--or); transform: translateY(-2px) rotate(45deg); }
.filtre { position: relative; max-width: 380px; margin-top: 18px; }
.filtre input[type=search], .filtre input[type=text] { padding-left: 44px; }
.filtre .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--encre-3); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; }
.puces li { padding: 7px 13px; background: var(--papier); font-size: .93rem; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.fait-cle { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0 0 36px; background: var(--papier); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.fait-cle div { padding: 18px 20px; border-left: 1px solid var(--ligne); }
.fait-cle div:first-child { border-left: 0; }
.fait-cle dt { font-size: .84rem; color: var(--encre-3); }
.fait-cle dd { margin: 3px 0 0; font-weight: 680; font-stretch: 110%; font-size: 1.05rem; }

/* ---------- 14. Onglets et pagination ---------- */
.onglets { display: flex; gap: 8px; margin: 0 calc(-1 * var(--gouttiere)) 30px; padding: 0 var(--gouttiere) 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets li { flex: none; }
.onglets a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--papier); color: var(--encre-2); text-decoration: none; font-weight: 600; font-stretch: 104%; font-size: .95rem; white-space: nowrap; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: background-color .25s, color .25s; }
.onglets a:hover { color: var(--bordeaux); background: var(--bordeaux-voile); }
.onglets a[aria-current="page"] { background: var(--nuit); color: var(--blanc); }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 48px 0 0; padding: 0; list-style: none; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 14px; background: var(--papier); color: var(--encre); text-decoration: none; font-weight: 600; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: background-color .2s, color .2s; }
.pagination a:hover { background: var(--bordeaux-voile); color: var(--bordeaux); }
.pagination [aria-current="page"] { background: var(--nuit); color: var(--blanc); }

/* ---------- 15. Galerie et visionneuse ---------- */
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 34px 22px; }
.album a { display: block; color: inherit; text-decoration: none; }
.album .vignette { aspect-ratio: 4 / 3; }
.album h2 { margin: 14px 0 4px; font-size: 1.12rem; font-weight: 650; font-stretch: 108%; letter-spacing: -.005em; line-height: 1.3; transition: color .25s; }
.album a:hover h2 { color: var(--bordeaux); }
.photos { columns: 2 150px; column-gap: 12px; }
@media (min-width: 700px) { .photos { columns: 3 220px; column-gap: 14px; } }
.photos figure { break-inside: avoid; margin: 0 0 12px; }
.photos button { display: block; width: 100%; padding: 0; border: 0; background: var(--papier); overflow: hidden; cursor: zoom-in; }
.photos img { width: 100%; height: auto; transition: transform .9s var(--ease-out); }
.photos button:hover img { transform: scale(1.04); }
.photos figcaption { margin-top: 6px; font-size: .88rem; color: var(--encre-2); }
.visionneuse { position: fixed; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center; padding: 64px 64px 72px; background: rgba(20, 7, 8, .95); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), visibility 0s linear .3s; }
.visionneuse.est-ouverte { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-out), visibility 0s; }
.visionneuse img { max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 16px 48px rgba(0, 0, 0, .5); transform: scale(.94); transition: transform .5s var(--ease-out); }
.visionneuse.est-ouverte img { transform: none; }
.visionneuse p { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; padding: 0 76px; text-align: center; color: rgba(255, 255, 255, .85); font-size: .93rem; }
.visionneuse button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: rgba(255, 255, 255, .1); color: var(--blanc); cursor: pointer; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); transition: background-color .2s; }
.visionneuse button:hover { background: var(--bordeaux); }
.visionneuse .fermer { top: 14px; right: 14px; }
.visionneuse .prec { left: 12px; top: 50%; transform: translateY(-50%); }
.visionneuse .suiv { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .visionneuse { padding: 64px 8px 80px; } .visionneuse .prec, .visionneuse .suiv { top: auto; bottom: 12px; transform: none; } .visionneuse p { bottom: 70px; padding: 0 16px; } }

/* ---------- 16. Formulaires ---------- */
.form { display: grid; gap: 20px; }
.form-grille { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .form-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; } }
.form-grille .plein { grid-column: 1 / -1; }
.champ label, .champ .label { display: block; margin-bottom: 7px; font-weight: 620; font-stretch: 104%; font-size: .98rem; }
.champ .aide { display: block; margin-top: 6px; font-size: .88rem; color: var(--encre-3); }
.requis { color: var(--bordeaux); }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=password], input[type=search], input[type=url], select, textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid var(--ligne-forte); border-radius: 2px;
  background: var(--blanc); color: var(--encre);
  font: 400 1rem/1.4 var(--police);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
textarea { min-height: 150px; resize: vertical; }
select { appearance: none; padding-right: 40px; 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 1l5 5 5-5' fill='none' stroke='%232b0e10' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; }
input:hover, select:hover, textarea:hover { border-color: rgba(29, 22, 21, .45); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bordeaux); box-shadow: 0 0 0 4px rgba(242, 190, 44, .45); }
.champ.a-erreur input, .champ.a-erreur select, .champ.a-erreur textarea, input.a-erreur, select.a-erreur { border-color: var(--erreur); background: #fff8f7; }
.js .champ.a-erreur { animation: secoue .36s var(--ease-in-out); }
@keyframes secoue { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.erreur-champ { display: block; margin-top: 6px; font-size: .9rem; font-weight: 560; color: var(--erreur); }
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix label { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1.5px solid var(--ligne-forte); background: var(--blanc); cursor: pointer; font-weight: 560; transition: border-color .2s, background-color .2s; }
.choix label:has(input:checked) { border-color: var(--bordeaux); background: var(--bordeaux-voile); }
.choix input { width: 20px; height: 20px; margin: 0; accent-color: var(--bordeaux); }
.case, .champ label.case { display: flex; gap: 12px; align-items: flex-start; font-weight: 400 !important; }
.case input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--bordeaux); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
.carte-form { padding: clamp(22px, 4vw, 40px); background: var(--blanc); box-shadow: 0 0 0 1px var(--ligne), 0 24px 48px -32px rgba(43, 14, 16, .35); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.tete-page .carte-form { color: var(--encre); }
.alerte { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 15px 18px; border-left: 4px solid; background: var(--papier); }
.alerte .icon { margin-top: .22em; }
.alerte-succes { background: var(--vert-voile); border-color: var(--vert); color: #134a1f; }
.alerte-erreur { background: #fdecea; border-color: var(--erreur); color: #85180f; }
.alerte-info { background: var(--or-voile); border-color: var(--or); color: #574000; }
.js .alerte { animation: monte .55s var(--ease-out) both; }

/* ---------- 17. Inscription en plusieurs étapes ---------- */
.inscription { display: grid; gap: 28px; padding: clamp(28px, 5vw, 56px) 0 clamp(64px, 9vw, 120px); align-items: start; }
@media (min-width: 1000px) { .inscription { grid-template-columns: 270px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); } }
.progression { list-style: none; margin: 0; padding: 0; counter-reset: pe; }
.progression li { counter-increment: pe; position: relative; padding: 0 0 24px 50px; color: var(--encre-3); transition: color .3s; }
.progression li::before { content: counter(pe); position: absolute; left: 0; top: -4px; display: grid; place-items: center; width: 34px; height: 34px; background: var(--papier); color: var(--encre-2); font-weight: 700; font-size: .9rem; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); transition: background-color .4s var(--ease-out), color .4s var(--ease-out); }
.progression li::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 2px; background: var(--ligne); }
.progression li:last-child::after { display: none; }
.progression li.est-courant { color: var(--encre); font-weight: 650; }
.progression li.est-courant::before { background: var(--bordeaux); color: var(--blanc); }
.progression li.est-fait { color: var(--encre-2); }
.progression li.est-fait::before { content: "✓"; background: var(--vert); color: var(--blanc); }
.progression li.est-fait::after { background: var(--vert); }
@media (min-width: 1000px) { .progression { position: sticky; top: calc(var(--entete) + 24px); } }
@media (max-width: 999px) {
  .progression { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding-bottom: 4px; }
  .progression li { padding: 0; }
  .progression li::before { position: relative; top: 0; width: 100%; height: 6px; font-size: 0; clip-path: none; }
  .progression li::after { display: none; }
  .progression li span { display: none; }
  .progression li.est-courant span { display: block; margin-top: 10px; white-space: nowrap; font-size: .95rem; }
  .progression li.est-courant ~ li span { display: none; }
  .progression li.est-fait::before { content: ""; }
}
.etape { display: none; }
.etape.est-active { display: block; }
.js .etape.est-active { animation: etape-entre .5s var(--ease-out) both; }
@keyframes etape-entre { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.no-js .etape { display: block; margin-bottom: 40px; }
.etape h2 { margin-bottom: 8px; font-size: clamp(1.55rem, 1.25rem + 1.4vw, 2.3rem); }
.etape > .intro { margin-bottom: 26px; color: var(--encre-2); }
.etape-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ligne); }
.etape-nav .btn { flex: 1 1 auto; }
@media (min-width: 640px) { .etape-nav .btn { flex: 0 0 auto; } }
.no-js .etape-nav { display: none; }
.no-js .envoi-final { display: block !important; }
.sous-titre-form { margin: 30px 0 12px; padding-top: 24px; border-top: 1px solid var(--ligne); font-size: 1.05rem; font-weight: 650; font-stretch: 108%; letter-spacing: 0; }
.parcours-table { width: 100%; border-collapse: collapse; }
.parcours-table th { padding: 0 6px 6px 0; text-align: left; font-size: .84rem; font-weight: 650; color: var(--encre-2); }
.parcours-table td { padding: 0 6px 8px 0; vertical-align: top; }
.parcours-table input, .parcours-table select { min-height: 46px; padding: 9px 11px; font-size: .97rem; }
@media (max-width: 760px) {
  .parcours-table thead { display: none; }
  .parcours-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 0; border-top: 1px solid var(--ligne); }
  .parcours-table td { padding: 0; }
  .parcours-table td:nth-child(2), .parcours-table td:nth-child(4) { grid-column: 1 / -1; }
}
.piece { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; margin-bottom: 10px; padding: 16px 18px; background: var(--papier); border-left: 3px solid transparent; transition: border-color .3s, background-color .3s; }
.piece.a-erreur { border-left-color: var(--erreur); background: #fff4f2; }
.piece:has(.etat.ok) { border-left-color: var(--vert); }
.piece strong { display: block; font-weight: 630; }
.piece .etat { font-size: .88rem; color: var(--encre-3); }
.piece .etat.ok { color: var(--vert-fonce); font-weight: 600; }
.piece input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.piece label.btn { min-height: 44px; padding: .55em 1.05em; font-size: .94rem; }
@media (max-width: 480px) { .piece { grid-template-columns: 1fr; } .piece label.btn { justify-self: start; } }
.recap { display: grid; gap: 16px; }
.recap section { padding: 18px 20px; background: var(--papier); }
.recap h3 { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 1rem; }
.recap dl { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0; font-size: .96rem; }
@media (min-width: 560px) { .recap dl { grid-template-columns: 12rem minmax(0, 1fr); } }
.recap dt { color: var(--encre-3); }
.recap dd { margin: 0 0 6px; overflow-wrap: anywhere; }
.engagement { padding: 18px 20px; background: var(--or-voile); border-left: 4px solid var(--or); font-size: .96rem; color: var(--encre-2); }
.engagement ol { padding-left: 1.2em; }

/* ---------- 18. Confirmation et suivi ---------- */
.confirmation { text-align: left; }
.numero-dossier { display: inline-block; margin: 6px 0 4px; padding: 10px 18px; background: var(--nuit); color: var(--or); font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem); font-weight: 720; font-stretch: 116%; letter-spacing: .01em; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.js .numero-dossier { animation: tampon .7s var(--ease-out) both .2s; }
@keyframes tampon { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
.identifiants-suivi { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 6px 0 0; }
.identifiants-suivi dt { font-size: .92rem; color: var(--encre-2); }
.identifiants-suivi dd { margin: 0; }
.code-perdu { margin-top: 24px; padding: 0 clamp(18px, 3vw, 28px); background: var(--papier); }
.code-perdu summary { padding: 16px 0; min-height: 48px; color: var(--bordeaux); font-weight: 630; cursor: pointer; }
.code-perdu[open] { padding-bottom: 20px; }
.code-perdu > p { margin: 0 0 16px; }
.code-perdu .form { margin-bottom: 16px; }
.statut { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 4px; font-size: .86rem; font-weight: 650; white-space: nowrap; background: var(--papier); color: var(--encre-2); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.statut-nouveau, .statut-nouvelle { background: var(--or-voile); color: #6b4e00; }
.statut-en_examen, .statut-en_cours { background: #eaf0f7; color: #2c4a6e; }
.statut-incomplet { background: #fdeee2; color: #8a4510; }
.statut-valide, .statut-repondue, .statut-inscrit { background: var(--vert-voile); color: #134a1f; }
.statut-rejete, .statut-cloturee { background: #efecea; color: #5b514e; }
.chronologie { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ligne); }
.chronologie li { position: relative; padding: 0 0 24px 24px; }
.chronologie li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; background: var(--bordeaux); transform: rotate(45deg); }
.chronologie time { display: block; font-size: .85rem; color: var(--encre-3); }
.chronologie .message { margin-top: 6px; padding: 12px 14px; background: var(--papier); white-space: pre-line; }
.fil { display: grid; gap: 14px; }
.bulle { max-width: 46rem; padding: 14px 16px; }
.bulle .texte { white-space: pre-line; overflow-wrap: anywhere; }
.bulle header { margin-bottom: 4px; font-size: .85rem; color: var(--encre-3); white-space: normal; }
.bulle-visiteur { background: var(--papier); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
.bulle-admin { margin-left: auto; background: var(--bordeaux-voile); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.bulle-admin header strong { color: var(--bordeaux); }

/* ---------- 19. Recherche ---------- */
.resultats { list-style: none; margin: 0; padding: 0; }
.resultats li { padding: 20px 0; border-top: 1px solid var(--ligne); }
.resultats a { font-weight: 650; font-stretch: 106%; font-size: 1.12rem; }
.resultats p { margin: 4px 0 0; color: var(--encre-2); }
.recherche-form { display: flex; gap: 10px; max-width: 580px; }
.recherche-form input { flex: 1; }
.recherche-form .btn { flex: none; }

/* Sans JavaScript : menu affiché en clair sous l'en-tête, barre d'actions visible */
@media (max-width: 1179px) {
  .no-js .entete { position: relative; background: var(--nuit); }
  .no-js .entete > .conteneur { flex-wrap: wrap; height: auto; padding-block: 10px; }
  .no-js .burger { display: none; }
  .no-js .nav-principale { position: static; order: 10; width: 100%; padding: 8px 0 16px; overflow: visible; background: none; clip-path: none; visibility: visible; }
  .no-js .nav-principale > ul > li { opacity: 1; transform: none; }
  .no-js .sous-menu { grid-template-rows: 1fr; }
  .no-js .nav-principale > ul > li > a, .no-js .nav-principale button.nav-ouvrir { padding: 10px 0; font-size: 1.15rem; }
  .no-js .nav-mobile-extra { opacity: 1; }
  .no-js .nav-frise { display: none; }
  .no-js .tete-page, .no-js .ouverture { padding-top: 40px; }
}
.no-js .barre-actions { transform: none; }

/* ---------- 20. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .revele, .js .entree { opacity: 1; transform: none; }
  .js .decoupe-chargement .mot-int, .js .decoupe-defilement .mot-int { transform: none; }
  .statut-inscriptions .pastille::after { display: none; }
}

/* ---------- 21. Impression ---------- */
@media print {
  .rideau, .entete, .pied, .barre-actions, .flottant-whatsapp, .no-print, .ariane, .visionneuse { display: none !important; }
  body { font-size: 11pt; padding: 0 !important; }
  .tete-page { padding: 0 0 12pt; background: none; color: #000; }
  .tete-page::before, .tete-page::after { display: none; }
  .tete-page h1, .tete-page .chapo { color: #000; }
  .mise-en-page { display: block; padding: 0; }
  .js .revele, .js .entree { opacity: 1 !important; transform: none !important; }
  a { color: inherit; text-decoration: none; }
}