/* ==========================================================================
   KABUTO TRAINING & EVAC
   Feuille de style unique. Fond blanc, bleu pour ce qui compte.
   Sommaire
     1. Jetons          7. Rubriques et titres    13. Cadres et listes
     2. Base            8. Chiffres               14. Appel et pied
     3. Mise en page    9. Metiers                15. Formations
     4. En-tete        10. Galerie                16. Rapatriement
     5. Boutons        11. Bandes                 17. Mouvement
     6. Heros          12. Vignettes              18. Impression
   ========================================================================== */

@import url('polices.css');

/* ---------- 1. Jetons ---------- */

:root {
  --blanc: #FFFFFF;
  --craie: #F6F8FB;
  --craie-2: #ECF0F6;

  --encre: #070C15;
  --encre-2: #141C29;
  --texte: #4E5A6B;
  --texte-clair: #5D6773;

  --bleu: #0B4FA0;
  --bleu-profond: #073B7A;
  --bleu-vif: #1B78DC;
  --bleu-pale: #E8F1FC;
  --bleu-clair: #61A9EE;

  --trait: #E2E8F0;
  --trait-fort: #C6D0DD;

  --large: 1220px;
  --etroit: 880px;
  --gouttiere: clamp(20px, 5vw, 56px);

  --titre: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --corps: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-geant: clamp(2.05rem, 4.55vw, 4.05rem);
  --t-xxl: clamp(1.5rem, 2.75vw, 2.25rem);
  --t-xl: clamp(1.45rem, 2.4vw, 1.95rem);
  --t-l: clamp(1.2rem, 1.7vw, 1.4rem);

  --hauteur-entete: 84px;

  /* Courbes de mouvement, d'apres les regles publiees par Emil Kowalski.
     --sortie : grands deplacements, entrees de panneaux, reveils au defilement
     --rapide : bascules d'etat, survols, icones
     --ressort : retours tactiles, cartes, boutons */
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --rapide: cubic-bezier(.4, 0, .2, 1);
  --ressort: cubic-bezier(.34, 1.56, .64, 1);
  --ombre: 0 1px 2px rgba(7, 12, 21, .04), 0 10px 30px rgba(7, 12, 21, .07);
  --ombre-forte: 0 2px 6px rgba(7, 12, 21, .06), 0 28px 64px rgba(7, 12, 21, .16);
}

/* ---------- 2. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + 24px);
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ul, ol { margin: 0; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  font-family: var(--titre);
  color: var(--encre);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--bleu-vif); }

b, strong { font-weight: 600; color: var(--encre); }

:focus-visible {
  outline: 2.5px solid var(--bleu-vif);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--bleu); color: #fff; }

.saut-contenu {
  position: absolute; left: 12px; top: 12px; z-index: 200;
  background: var(--encre); color: #fff; padding: 11px 18px;
  border-radius: 4px; font-size: 14px; font-weight: 600;
  transform: translateY(-200%);
  transition: transform .18s var(--sortie);
}
.saut-contenu:focus { transform: translateY(0); color: #fff; }

/* ---------- 3. Mise en page ---------- */

.contenant {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.contenant--etroit { max-width: var(--etroit); }

.section { padding-block: clamp(72px, 9vw, 132px); }
.section--serre { padding-block: clamp(48px, 6vw, 84px); }
.section--craie { background: var(--craie); }
.section--encre { background: var(--encre); color: rgba(255,255,255,.76); }
.section--encre h2, .section--encre h3 { color: #fff; }

.trait-haut { border-top: 1px solid var(--trait); }

.plein-bord {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* barre de progression de lecture, fine, en haut */
.progression {
  position: fixed; inset: 0 auto auto 0; z-index: 120;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--bleu), var(--bleu-vif));
  will-change: transform;
}

/* ---------- 4. En-tete ---------- */

.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--rapide), background .2s var(--rapide);
}
.entete.pose {
  border-bottom-color: var(--trait);
  background: rgba(255,255,255,.94);
}

.entete__barre {
  display: flex; align-items: center; gap: 28px;
  height: var(--hauteur-entete);
  transition: height .28s var(--sortie);
}
.entete.pose .entete__barre { height: 68px; }

.marque {
  display: flex; align-items: center; gap: 13px; flex: none;
  transform-origin: left center;
  transition: transform .26s var(--sortie);
}
.entete.pose .marque { transform: scale(.84); }
.marque__logo { display: block; flex: none; width: 62px; }
.marque__logo img { width: 100%; height: auto; }

.marque__mots { display: block; width: max-content; }
.marque__nom {
  display: block; font-family: var(--titre); font-weight: 900;
  font-size: 27px; line-height: 1; letter-spacing: -0.015em;
  color: var(--encre);
}
.marque__sous {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.21em; text-transform: uppercase; color: var(--bleu);
  margin-top: 6px; text-align: justify; text-align-last: justify;
}

.nav { display: flex; gap: 2px; margin-left: auto; }
.nav__lien {
  position: relative; padding: 9px 11px; border-radius: 5px;
  font-size: 14.5px; font-weight: 500; color: var(--texte); white-space: nowrap;
  transition: color .16s var(--rapide), background .16s var(--rapide);
}
.nav__lien:hover { color: var(--encre); background: var(--craie); }
.nav__lien[aria-current="page"] { color: var(--encre); font-weight: 600; }
.nav__lien[aria-current="page"]::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: 3px;
  height: 2px; background: var(--bleu); border-radius: 2px;
}

.burger {
  display: none; margin-left: auto; width: 44px; height: 44px;
  border: 1px solid var(--trait); border-radius: 7px;
  background: var(--blanc); cursor: pointer; position: relative;
}
.burger span, .burger::before, .burger::after {
  content: ''; position: absolute; left: 12px; right: 12px; height: 2px;
  background: var(--encre); border-radius: 2px;
  transition: transform .24s var(--sortie), opacity .14s var(--rapide);
}
.burger span { top: 21px; }
.burger::before { top: 14px; }
.burger::after { top: 28px; }
.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }

.menu-mobile {
  display: none; flex-direction: column; gap: 2px;
  padding: 12px var(--gouttiere) 26px;
  border-top: 1px solid var(--trait); background: var(--blanc);
}
.menu-mobile.ouvert { display: flex; }
.menu-mobile a {
  padding: 13px 4px; font-size: 17px; font-weight: 500; color: var(--encre);
  border-bottom: 1px solid var(--trait);
}
.menu-mobile .btn { margin-top: 16px; border-bottom: 0; justify-content: center; }
.menu-mobile .btn--plein { color: #fff; }
.menu-mobile__joindre { display: flex; gap: 10px; margin-top: 12px; }
.joindre {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 10px; border: 1px solid var(--trait); border-radius: 7px;
  font-size: 14.5px; font-weight: 600; color: var(--encre); border-bottom-width: 1px;
}
.joindre--wa { color: #0B7C4A; border-color: #BFE3D0; background: #F2FBF6; }
.joindre--tel { color: var(--bleu); border-color: #CADEF5; background: var(--bleu-pale); }

/* ---------- 5. Boutons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; border-radius: 7px;
  font-family: var(--corps); font-size: 15.5px; font-weight: 600;
  letter-spacing: -0.005em; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .16s var(--ressort), background .16s var(--rapide),
              border-color .16s var(--rapide), color .16s var(--rapide),
              box-shadow .16s var(--rapide);
}
.btn svg { flex: none; transition: transform .2s var(--ressort); }
.btn:hover svg { transform: translateX(3px); }

.btn--plein {
  background: var(--bleu); color: #fff;
  box-shadow: 0 1px 2px rgba(7,12,21,.10), 0 8px 22px rgba(11,79,160,.22);
}
.btn--plein:hover {
  background: var(--bleu-profond); color: #fff; transform: translateY(-1.5px);
  box-shadow: 0 2px 4px rgba(7,12,21,.12), 0 14px 32px rgba(11,79,160,.28);
}

.btn--trait { border-color: var(--trait-fort); color: var(--encre); background: var(--blanc); }
.btn--trait:hover { border-color: var(--encre); color: var(--encre); transform: translateY(-1.5px); }

.btn--clair { background: #fff; color: var(--encre); }
.btn--clair:hover { background: #fff; color: var(--bleu); transform: translateY(-1.5px); }
.btn--fantome { border-color: rgba(255,255,255,.34); color: #fff; }
.btn--fantome:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }

.btn--petit { padding: 10px 17px; font-size: 14.5px; }
.entete__cta { flex: none; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 15.5px; color: var(--bleu);
}
.lien-fleche svg { transition: transform .2s var(--ressort); }
.lien-fleche:hover svg { transform: translateX(4px); }

/* ---------- 6. Heros ---------- */

.heros {
  position: relative;
  padding-top: clamp(34px, 4.4vw, 58px);
  padding-bottom: clamp(56px, 7vw, 104px);
}

.heros__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 66px);
  align-items: center;
}

.heros h1 {
  font-size: var(--t-geant);
  font-weight: 900;
  letter-spacing: -0.042em;
  line-height: 0.92;
  margin: 18px 0 0;
}
.heros h1 .bleu { color: var(--bleu); }
.heros h1 .fin { font-weight: 400; letter-spacing: -0.03em; }

.heros__chapo {
  max-width: 30em; margin-top: clamp(20px, 2.4vw, 30px);
  font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.62; color: var(--texte);
}

.heros__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.heros__signature {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--trait);
  font-family: var(--mono); font-size: 12px; letter-spacing: .03em;
  color: var(--texte-clair);
}
.heros__signature span { display: inline-flex; align-items: center; gap: 7px; }
.heros__signature span::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--bleu); flex: none;
}

/* le visuel : une grande image qui file vers le bord, une seconde en recouvrement */
.heros__visuel {
  position: relative; align-self: center;
  display: grid; gap: clamp(10px, 1.2vw, 16px);
}

.heros__cadre {
  position: relative; aspect-ratio: 3 / 2;
  border-radius: 10px; overflow: hidden;
  background: var(--craie-2); box-shadow: var(--ombre);
}
.heros__cadre img { width: 100%; height: 100%; object-fit: cover; }

figure.heros__vignette {
  position: relative; width: 74%; margin-left: auto;
  aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden;
  box-shadow: var(--ombre); background: var(--craie-2);
}

.heros__paire {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.2vw, 14px);
}
figure.heros__demi {
  position: relative; aspect-ratio: 3 / 2;
  border-radius: 10px; overflow: hidden;
  box-shadow: var(--ombre); background: var(--craie-2);
}
figure.heros__demi img { width: 100%; height: 100%; object-fit: cover; }
.heros__demi .heros__etiquette { right: 9px; bottom: 9px; padding: 6px 10px; font-size: 10.5px; letter-spacing: .09em; }
.heros__demi .heros__etiquette::before { width: 5px; height: 5px; }
.heros__vignette img { width: 100%; height: 100%; object-fit: cover; }

.heros__etiquette {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 6px;
  background: rgba(7,12,21,.66);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--mono); font-size: 11px; letter-spacing: .11em;
  text-transform: uppercase; color: #fff;
}
.heros__etiquette::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bleu-clair); flex: none;
}

/* ---------- 7. Rubriques et titres ---------- */

.rubrique {
  display: inline-flex; align-items: center; gap: 11px; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase; color: var(--bleu);
}
.rubrique::before {
  content: ''; width: 26px; height: 2px; background: var(--bleu); flex: none;
}
.section--encre .rubrique, .appel .rubrique { color: var(--bleu-clair); }
.section--encre .rubrique::before, .appel .rubrique::before { background: var(--bleu-clair); }

.tete { max-width: 34ch; }
.tete--large { max-width: 40ch; }
.tete h2 { font-size: var(--t-xxl); font-weight: 900; letter-spacing: -0.038em; margin-top: 18px; }
.tete p { margin-top: 20px; font-size: clamp(16.5px, 1.2vw, 18.5px); max-width: 58ch; }

.tete-rangee {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 56px); align-items: end;
}
.tete-rangee > .tete:first-child { max-width: none; }
.tete-rangee > .tete:last-child { max-width: 40ch; }

/* numero de section en filigrane */
.filigrane {
  font-family: var(--titre); font-weight: 900; font-size: clamp(74px, 11vw, 168px);
  line-height: .8; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 2px var(--trait-fort);
  user-select: none; pointer-events: none;
}
.section--encre .filigrane { -webkit-text-stroke-color: rgba(255,255,255,.17); }

/* ---------- 8. Chiffres ---------- */

.chiffres { border-block: 1px solid var(--trait); background: var(--blanc); }

.chiffres__grille {
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.chiffres__item {
  padding: clamp(24px, 3vw, 38px) clamp(10px, 1.6vw, 24px);
  border-left: 1px solid var(--trait);
  margin: 0; text-align: left;
}
.chiffres__item:first-child { border-left: 0; padding-left: 0; }
.chiffres__item b {
  display: block; font-family: var(--titre); font-weight: 900;
  font-size: clamp(34px, 4.4vw, 62px); line-height: .92;
  letter-spacing: -0.045em; color: var(--bleu);
  font-variant-numeric: tabular-nums;
}
.chiffres__item span {
  display: block; margin-top: 11px;
  font-family: var(--mono); font-size: 11px; line-height: 1.45;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-clair);
}

/* ---------- 9. Metiers ---------- */

.metier { position: relative; }
.metier + .metier { margin-top: clamp(72px, 9vw, 130px); }

.metier__grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
.metier--inverse .metier__grille { direction: rtl; }
.metier--inverse .metier__grille > * { direction: ltr; }

.metier__visuel { position: relative; }
.metier__image {
  position: relative; border-radius: 10px; overflow: hidden;
  background: var(--craie-2); box-shadow: var(--ombre);
}
.metier__image img { width: 100%; height: auto; }

figure.metier__appoint {
  position: absolute; width: clamp(126px, 16vw, 196px); aspect-ratio: 3 / 2;
  right: clamp(-14px, -1.4vw, -6px); bottom: clamp(-20px, -2.4vw, -12px);
  border-radius: 7px; overflow: hidden; border: 5px solid var(--blanc);
  box-shadow: var(--ombre-forte); background: var(--craie-2);
}
.metier--inverse figure.metier__appoint { right: auto; left: clamp(-14px, -1.4vw, -6px); }
.metier__appoint img { width: 100%; height: 100%; object-fit: cover; }



.metier h3 { font-size: var(--t-xxl); font-weight: 900; letter-spacing: -0.038em; margin-top: 16px; }
.rubrique + h2, .rubrique + h3 { margin-top: 16px; }
.metier__chapo { margin-top: 20px; font-size: clamp(16.5px, 1.2vw, 18.5px); }
.metier__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* lignes cle / valeur */
.bilan { margin-top: 26px; border-top: 1px solid var(--trait); }
.bilan__ligne {
  display: grid; grid-template-columns: 104px minmax(0, 1fr);
  gap: 22px; padding: 17px 0; margin: 0;
  border-bottom: 1px solid var(--trait); font-size: 16px;
}
.bilan__cle {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bleu); padding-top: 4px;
  line-height: 1.5;
}

/* puces courtes */
.puces { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 13px; }
.puces li { position: relative; padding-left: 28px; font-size: 16.5px; }
.puces li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 13px; height: 2px; background: var(--bleu); border-radius: 2px;
}

/* ---------- 10. Galerie ---------- */

.galerie {
  display: grid; gap: clamp(10px, 1.2vw, 16px);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(112px, 13.2vw, 165px);
  grid-auto-flow: dense;
}
.vue {
  position: relative; margin: 0; overflow: hidden; min-height: 0;
  border-radius: 8px; background: var(--craie-2);
}
.vue img { width: 100%; height: 100%; object-fit: cover; }
.vue.vu img { transition: transform .32s var(--rapide); }
.vue.vu:hover img { transform: scale(1.035); }

.vue--large { grid-column: span 2; grid-row: span 2; }
.vue--moyen { grid-column: span 1; grid-row: span 2; }
.vue--petit { grid-column: span 1; grid-row: span 1; }

.vue figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 40px 16px 13px;
  background: linear-gradient(to top, rgba(7,12,21,.93) 0%, rgba(7,12,21,.72) 42%, rgba(7,12,21,0) 100%);
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
  color: rgba(255,255,255,.93); line-height: 1.4;
}

.mention-photos {
  margin-top: 26px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--texte-clair);
  display: flex; flex-wrap: wrap; gap: 6px 20px;
}

/* ---------- 11. Bandes ---------- */

.bande-citation { border-block: 1px solid var(--trait); }
.bande-citation__grille {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 64px); align-items: end;
}
.bande-citation blockquote {
  margin: 0; max-width: 30ch;
  font-family: var(--titre); font-weight: 800; font-size: var(--t-xl);
  line-height: 1.16; letter-spacing: -0.03em; color: var(--encre);
}
.bande-citation .source {
  margin-top: 22px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texte-clair);
}

/* ---------- 12. Vignettes ---------- */

.vignettes { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.vignettes--3 { grid-template-columns: repeat(3, 1fr); }
.vignettes--4 { grid-template-columns: repeat(4, 1fr); }
.vignettes--4 .carte { padding: clamp(18px, 1.7vw, 24px); }
.vignettes--4 .carte h3 { font-size: 1.1rem; }
.vignettes--4 .carte p { font-size: 15px; }
.vignettes--2 { grid-template-columns: repeat(2, 1fr); }
.rangee-phares { display: grid; gap: 0; border-top: 1px solid var(--trait); }
.phare {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 18px; align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--trait);
  transition: background .16s var(--rapide);
}
.phare:hover { background: var(--craie); }
.phare__code { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--bleu); }
.phare__nom {
  font-family: var(--titre); font-weight: 700; font-size: clamp(16.5px, 1.4vw, 19px);
  color: var(--encre); letter-spacing: -0.02em;
}
.phare__nom small {
  display: inline; font-family: var(--corps); font-weight: 400;
  font-size: 15.5px; color: var(--texte); letter-spacing: 0;
}
.phare__duree {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em;
  color: var(--texte-clair); white-space: nowrap;
}
@media (max-width: 640px) {
  .phare { grid-template-columns: 50px minmax(0, 1fr); }
  .phare__duree { grid-column: 2; }
}

.carte {
  position: relative; padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--trait); border-radius: 9px; background: var(--blanc);
  transition: border-color .18s var(--rapide), transform .2s var(--ressort), box-shadow .2s var(--rapide);
}
.carte--lien:hover {
  border-color: var(--trait-fort); transform: translateY(-3px); box-shadow: var(--ombre);
}
.carte__num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--bleu);
}
.carte h3 { font-size: var(--t-l); font-weight: 800; margin-top: 14px; letter-spacing: -0.024em; }
.carte p { margin-top: 12px; font-size: 15.5px; }
.carte__pied { margin-top: 18px; }

.section--encre .carte {
  background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.13);
}
.section--encre .carte p { color: rgba(255,255,255,.72); }
.section--encre .carte__num { color: var(--bleu-clair); }

/* ---------- 13. Cadres et listes ---------- */

.cadre {
  padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid var(--trait); border-radius: 10px; background: var(--craie);
}
.cadre--bleu { background: var(--bleu-pale); border-color: #CBDFF6; }
.cadre h3 { font-size: var(--t-l); font-weight: 800; }
.cadre p { margin-top: 13px; font-size: 16px; max-width: 76ch; }

.etapes { list-style: none; padding: 0; margin: 0; counter-reset: e; display: grid; gap: 0; }
.etapes li {
  counter-increment: e; position: relative;
  padding: 22px 0 22px 62px; border-bottom: 1px solid var(--trait);
}
.etapes li:first-child { border-top: 1px solid var(--trait); }
.etapes li::before {
  content: counter(e, decimal-leading-zero);
  position: absolute; left: 0; top: 24px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--bleu);
}
.etapes strong { display: block; font-size: 17px; color: var(--encre); margin-bottom: 5px; }
.etapes span { font-size: 15.5px; display: block; max-width: 76ch; }

.oui-non { display: grid; gap: clamp(16px, 2vw, 26px); grid-template-columns: repeat(2, 1fr); }
.liste-marquee { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 18px; }
.liste-marquee li { position: relative; padding-left: 30px; font-size: 16px; }
.liste-marquee li::before {
  position: absolute; left: 0; top: .05em; font-size: 15px; font-weight: 700;
}
.liste-marquee--oui li::before { content: '\2713'; color: #0B7C4A; }
.liste-marquee--non li::before { content: '\2715'; color: #B4312C; }

/* ---------- 14. Appel et pied ---------- */

.appel { background: var(--encre); color: rgba(255,255,255,.74); position: relative; overflow: hidden; }
.appel::after {
  content: ''; position: absolute; inset: auto -10% -60% 40%;
  height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(27,120,220,.30), transparent 68%);
  pointer-events: none;
}
.appel__grille {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
.appel h2 { font-size: var(--t-xxl); font-weight: 900; letter-spacing: -0.038em; color: #fff; margin-top: 18px; }
.appel p { margin-top: 20px; font-size: clamp(16.5px, 1.2vw, 18.5px); }
.appel__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.contacts-directs { display: grid; gap: 12px; }
.contact-direct {
  display: flex; align-items: center; gap: 15px;
  padding: 18px 20px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color: #fff; transition: background .18s var(--rapide), border-color .18s var(--rapide), transform .18s var(--ressort);
}
.contact-direct:hover {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28);
  color: #fff; transform: translateX(3px);
}
.contact-direct svg { flex: none; color: var(--bleu-clair); }
.contact-direct b { display: block; color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.contact-direct span {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.56); margin-top: 3px;
}

.pied { background: var(--encre-2); color: rgba(255,255,255,.62); font-size: 15px; }
.pied a { color: rgba(255,255,255,.78); }
.pied a:hover { color: #fff; }
.pied__grille {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(26px, 3vw, 48px);
  padding-block: clamp(48px, 6vw, 76px);
}
.pied h4 {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.54); margin-bottom: 16px;
}
.pied ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.pied__marque { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pied__marque img { width: 52px; }
.pied__marque b { font-family: var(--titre); font-weight: 900; font-size: 22px; color: #fff; letter-spacing: -0.015em; }
.pied__bas {
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  padding-block: 22px; border-top: 1px solid rgba(255,255,255,.10);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: rgba(255,255,255,.54);
}
.pied__bas a { color: rgba(255,255,255,.72); }

/* ---------- 15. Formations ---------- */

.barre-familles {
  position: sticky; top: var(--hauteur-entete); z-index: 60;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--trait);
}
.barre-familles__interieur {
  display: flex; align-items: center; gap: 8px;
  padding-block: 13px; overflow-x: auto; scrollbar-width: none;
}
.barre-familles__interieur::-webkit-scrollbar { display: none; }

.onglet {
  flex: none; padding: 10px 17px; border-radius: 99px;
  border: 1px solid var(--trait); background: var(--blanc);
  font-family: var(--corps); font-size: 14.5px; font-weight: 500;
  color: var(--texte); cursor: pointer; white-space: nowrap;
  transition: background .16s var(--rapide), border-color .16s var(--rapide), color .16s var(--rapide);
}
.onglet:hover { border-color: var(--trait-fort); color: var(--encre); }
.onglet.est-actif { background: var(--encre); border-color: var(--encre); color: #fff; font-weight: 600; }
.onglet b { font-weight: inherit; }
.onglet i { font-style: normal; opacity: .6; margin-left: 5px; font-variant-numeric: tabular-nums; }

.famille { scroll-margin-top: calc(var(--hauteur-entete) + 72px); }
.famille + .famille { margin-top: clamp(52px, 6vw, 88px); }
.famille__tete {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
  padding-bottom: 18px; border-bottom: 2px solid var(--encre); margin-bottom: 26px;
}
.famille__tete h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 900; letter-spacing: -0.032em; }
.famille__tete p { margin: 0; font-size: 15.5px; }
.famille__compte {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texte-clair);
}

.modules { display: grid; gap: 0; }
.module { border-bottom: 1px solid var(--trait); }
.module > summary {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 16px; align-items: center; padding: 20px 0;
  cursor: pointer; list-style: none;
}
.module > summary::-webkit-details-marker { display: none; }
.module__code {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--bleu);
}
.module__nom {
  font-family: var(--titre); font-weight: 700; font-size: clamp(16.5px, 1.4vw, 19px);
  color: var(--encre); letter-spacing: -0.02em; line-height: 1.3;
}
.module__meta {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; color: var(--texte-clair);
}
.module__chevron { flex: none; transition: transform .22s var(--rapide); color: var(--trait-fort); }
.module[open] .module__chevron { transform: rotate(180deg); }
.module[open] > summary { padding-bottom: 12px; }
.module__corps { padding: 0 0 24px 78px; max-width: 74ch; font-size: 16px; }
.module__corps ul { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 9px; }
.module__corps li { position: relative; padding-left: 22px; font-size: 15.5px; }
.module__corps li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 10px; height: 2px; background: var(--trait-fort); border-radius: 2px;
}
.etiquette {
  display: inline-block; padding: 3px 9px; border-radius: 4px;
  background: var(--bleu-pale); color: var(--bleu);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.etiquette--gris { background: var(--craie-2); color: #4E5866; }

/* ---------- 16. Rapatriement ---------- */

.vecteurs { display: grid; gap: 0; }
.vecteur { border-bottom: 1px solid var(--trait); }
.vecteur > summary {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto;
  gap: 16px; align-items: center; padding: 19px 0; cursor: pointer; list-style: none;
}
.vecteur > summary::-webkit-details-marker { display: none; }
.vecteur__code { font-family: var(--mono); font-size: 12px; color: var(--bleu); letter-spacing: .08em; }
.vecteur__nom { font-family: var(--titre); font-weight: 700; font-size: 17.5px; color: var(--encre); letter-spacing: -0.02em; }
.vecteur__compte {
  font-family: var(--mono); font-size: 12px; color: var(--texte-clair);
  font-variant-numeric: tabular-nums;
}
.vecteur__corps { padding: 0 0 22px 70px; max-width: 70ch; font-size: 15.5px; }

.pays { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pays li {
  list-style: none; padding: 7px 14px; border-radius: 99px;
  border: 1px solid var(--trait); background: var(--blanc);
  font-size: 14.5px; color: var(--encre);
}

/* retour tactile : l'appui doit se voir tout de suite */
.btn:active, .onglet:active, .carte--lien:active, .contact-direct:active, .pack:active {
  transform: scale(.975);
  transition-duration: .09s;
}

/* ---------- 17. Mouvement ---------- */

.apparait { opacity: 0; transform: translateY(20px); }
.apparait.vu {
  opacity: 1; transform: none;
  transition: opacity .52s var(--sortie), transform .52s var(--sortie);
}
.apparait.vu[data-delai="1"] { transition-delay: .07s; }
.apparait.vu[data-delai="2"] { transition-delay: .14s; }
.apparait.vu[data-delai="3"] { transition-delay: .21s; }
.apparait.vu[data-delai="4"] { transition-delay: .28s; }
.apparait.vu[data-delai="5"] { transition-delay: .35s; }

/* les images se devoilent par un rideau qui remonte.
   Surtout pas de clip-path sur l'image : Chrome la considere alors invisible
   et ne la charge jamais quand elle est en loading="lazy". */
.devoile { position: relative; }
.devoile::after {
  content: ''; position: absolute; inset: -1px; z-index: 4;
  background: var(--blanc);
  transform-origin: 50% 100%;
  transform: scaleY(1);
  pointer-events: none;
}
.devoile.vu::after {
  transform: scaleY(0);
  transition: transform .58s var(--sortie);
}
.devoile img { transform: scale(1.04); transform-origin: 50% 45%; }
.devoile.vu img { transform: scale(1); transition: transform .8s var(--sortie); }

.heros__vignette.devoile::after, .metier__appoint.devoile::after { inset: 0; }

html:not(.js) .apparait { opacity: 1; transform: none; }
html:not(.js) .devoile::after { display: none; }
html:not(.js) .devoile img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .apparait, .apparait.vu { opacity: 1; transform: none; transition: none; }
  .devoile::after { display: none; }
  .devoile img, .devoile.vu img { transform: none; transition: none; }
  .vue.vu:hover img { transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 18. Adaptatif ---------- */

@media (max-width: 1240px) {
  .nav { display: none; }
  .burger { display: block; }
  .entete__cta { display: none; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) {
  :root { --hauteur-entete: 74px; }
  .bande-citation__grille { grid-template-columns: 1fr; gap: 24px; }
  .heros__grille { grid-template-columns: 1fr; gap: 34px; }
  .heros__texte { padding-bottom: 0; }
  .heros__visuel { min-height: 0; }
  .heros__cadre { aspect-ratio: 3 / 2; }
  figure.heros__vignette { width: 80%; }
  .metier__grille { grid-template-columns: 1fr; gap: 30px; }
  .metier--inverse .metier__grille { direction: ltr; }
  .metier__numero { position: static; margin-bottom: -18px; }
  .appel__grille { grid-template-columns: 1fr; }
  .tete-rangee { grid-template-columns: 1fr; gap: 20px; }
  .chiffres__grille { grid-template-columns: repeat(3, 1fr); }
  .chiffres__item:nth-child(4) { border-left: 0; padding-left: 0; }
  .chiffres__item:nth-child(n+4) { border-top: 1px solid var(--trait); }
  .vignettes--4, .vignettes--3 { grid-template-columns: repeat(2, 1fr); }
  .galerie { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(104px, 15vw, 150px); }
  .vue--large { grid-column: span 2; grid-row: span 2; }
  .module__corps, .vecteur__corps { padding-left: 0; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .marque__logo { width: 50px; }
  .marque__nom { font-size: 22px; }
  .marque__sous { font-size: 10px; letter-spacing: .15em; }
  .chiffres__grille { grid-template-columns: repeat(2, 1fr); }
  .chiffres__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .chiffres__item:nth-child(n+3) { border-top: 1px solid var(--trait); }
  .vignettes--4, .vignettes--3, .vignettes--2, .oui-non { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(92px, 26vw, 128px); }
  .bilan__ligne { grid-template-columns: 1fr; gap: 6px; }
  .module > summary { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .module__meta { display: none; }
  .vecteur > summary { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .vecteur__compte { display: none; }
  .heros__actions .btn, .appel__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- 19. Impression ---------- */

@media print {
  .entete, .menu-mobile, .progression, .appel, .barre-familles { display: none; }
  body { font-size: 11pt; }
  .apparait { opacity: 1; transform: none; }
  .devoile::after { display: none; }
  .devoile img { transform: none; }
}

/* ---------- 20. Retouches ---------- */

/* le titre du heros tient sur quatre lignes exactement */
.heros h1 .l { display: block; }
@media (min-width: 921px) { .heros h1 .l { white-space: nowrap; } }

/* bande de chiffres a quatre colonnes, sur les pages interieures */
.chiffres__grille--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) {
  .chiffres__grille--4 { grid-template-columns: repeat(2, 1fr); }
  .chiffres__grille--4 .chiffres__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .chiffres__grille--4 .chiffres__item:nth-child(n+3) { border-top: 1px solid var(--trait); }
}


/* ---------- 21. Packs de formation ---------- */

.packs { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: repeat(2, 1fr); }

.pack {
  display: flex; flex-direction: column;
  border: 1px solid var(--trait); border-radius: 10px;
  background: var(--blanc); overflow: hidden;
  transition: border-color .18s var(--rapide), transform .2s var(--ressort), box-shadow .2s var(--rapide);
}
.pack:hover { border-color: var(--trait-fort); transform: translateY(-3px); box-shadow: var(--ombre); }
.pack--phare { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }

.pack__tete { padding: clamp(22px, 2.4vw, 30px); border-bottom: 1px solid var(--trait); }
.pack--phare .pack__tete { background: var(--bleu-pale); border-bottom-color: #CBDFF6; }
.pack__cle {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bleu);
}
.pack h3 { font-size: var(--t-l); font-weight: 800; margin-top: 12px; letter-spacing: -0.024em; }
.pack__duree {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px;
  font-family: var(--mono); font-size: 11.5px; color: var(--texte-clair);
}
.pack__duree span + span::before { content: '· '; color: var(--trait-fort); }
.pack__corps { padding: clamp(20px, 2.2vw, 28px); flex: 1; }
.pack__corps > p { font-size: 15.5px; }
.pack ul { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 10px; }
.pack li { position: relative; padding-left: 24px; font-size: 15px; }
.pack li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 11px; height: 2px; background: var(--bleu); border-radius: 2px;
}
.pack__pied { padding: 0 clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px); }

@media (max-width: 820px) { .packs { grid-template-columns: 1fr; } }

/* ---------- 22. Le mot du fondateur ---------- */

.signature { max-width: none; }
.signature h2 {
  font-size: var(--t-xxl); font-weight: 900; letter-spacing: -0.038em; margin-top: 18px;
}
.signature > p {
  margin-top: 22px; font-size: clamp(16.5px, 1.2vw, 18.5px); line-height: 1.7;
}
.signature__note {
  padding-left: 22px; border-left: 3px solid var(--bleu);
  color: var(--encre); font-weight: 500;
}
.signature__nom {
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--trait);
  font-family: var(--titre); font-weight: 800; font-size: 18px;
  color: var(--encre); letter-spacing: -0.02em;
}
.signature__nom span {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--texte-clair);
}

/* ---------- 23. Corrections d'audit ---------- */

/* les titres de colonne du pied de page ne sont pas des titres de document */
.pied__titre {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.54); margin: 0 0 16px;
}

/* cible tactile d'au moins 24 px de haut, minimum recommandé */
.pied ul a, .pied__bas a {
  display: inline-block; padding-block: 4px; min-height: 24px;
}

/* le titre d'un métier est un titre de section */
.metier__titre {
  font-size: var(--t-xxl); font-weight: 900;
  letter-spacing: -0.038em; margin-top: 16px;
}

/* ============================================================
   24. MISE EN RELIEF DANS LE TEXTE
   Une seule par bloc. Au-delà, plus rien ne ressort.
   ============================================================ */
.saillant {
  font-weight: 700;
  color: var(--bleu);
}

/* la même idée en plus fort, pour la phrase qui doit être lue même en diagonale */
.saillant--fort {
  font-weight: 750;
  color: var(--bleu-profond);
  background: none;
  box-shadow: inset 0 -2px 0 var(--bleu-clair);
}

/* ============================================================
   25. FORMULAIRE
   ============================================================ */
.form-grille {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 20px);
}
.champ { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.champ--large { grid-column: 1 / -1; }
.champ > label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-clair);
}
.champ > label em { font-style: normal; color: var(--bleu); }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 16px; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--trait-fort);
  border-radius: 8px; padding: 12px 14px; width: 100%;
  transition: border-color .16s var(--rapide), box-shadow .16s var(--rapide);
}
.champ textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--bleu-clair); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--bleu);
  box-shadow: 0 0 0 3px var(--bleu-pale);
}
.form-pied {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px; margin-top: clamp(18px, 2vw, 26px);
}
.form-note { font-size: 14.5px; color: var(--texte-clair); margin: 0; flex: 1 1 260px; }

/* la colonne des coordonnées, à côté du formulaire */
.contact-grille {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.fiche { border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
.fiche__ligne {
  display: block; padding: clamp(16px, 1.7vw, 22px);
  border-bottom: 1px solid var(--trait); text-decoration: none; color: inherit;
  transition: background .16s var(--rapide);
}
.fiche__ligne:last-child { border-bottom: 0; }
a.fiche__ligne:hover { background: var(--craie); }
.fiche__cle {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-clair); margin-bottom: 7px;
}
.fiche__val { display: block; font-size: 17px; font-weight: 600; color: var(--encre); letter-spacing: -0.01em; }
.fiche__sous { display: block; margin-top: 5px; font-size: 14.5px; color: var(--texte); }

@media (max-width: 860px) {
  .contact-grille { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form-grille { grid-template-columns: 1fr; }
}

/* ---------- questions fréquentes ---------- */
.faq { border-top: 1px solid var(--trait); }
.faq__item { border-bottom: 1px solid var(--trait); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; gap: 16px; align-items: baseline;
  padding: clamp(18px, 1.9vw, 24px) 0; font: inherit;
  font-size: clamp(16.5px, 1.25vw, 18.5px); font-weight: 600;
  color: var(--encre); letter-spacing: -0.012em;
}
.faq__q::after {
  content: '+'; margin-left: auto; font-family: var(--mono);
  font-size: 20px; color: var(--bleu); line-height: 1;
  transition: transform .2s var(--sortie);
}
.faq__item.ouvert .faq__q::after { transform: rotate(45deg); }
.faq__num { font-family: var(--mono); font-size: 12px; color: var(--bleu); flex: none; }
.faq__r { display: none; padding: 0 0 clamp(20px, 2vw, 26px) 44px; }
.faq__item.ouvert .faq__r { display: block; }
.faq__r p { margin: 0; max-width: 74ch; }
.faq__r p + p { margin-top: 12px; }

/* ---------- pages légales ---------- */
.legal h2 {
  font-size: var(--t-xl); font-weight: 900; letter-spacing: -0.035em;
  margin-top: clamp(34px, 4vw, 52px);
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { max-width: 78ch; }
.legal p { margin-top: 14px; }
.legal ul { margin-top: 14px; padding-left: 0; list-style: none; }
.legal li { position: relative; padding-left: 20px; margin-top: 9px; }
.legal li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 9px; height: 1px; background: var(--bleu);
}

/* ============================================================
   26. SÉLECTEUR DE LANGUE
   ============================================================ */
.langues {
  display: flex; align-items: center; gap: 0; margin: 0 2px 0 8px;
  flex: none;
}
.langue {
  display: block; padding: 6px 8px; border-radius: 6px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--texte-clair); text-decoration: none;
  transition: color .16s var(--rapide), background .16s var(--rapide);
}
.langue:hover { color: var(--encre); background: var(--craie); }
.langue.est-actif { color: var(--encre); font-weight: 500; }
.langue.est-actif::after {
  content: ''; display: block; height: 2px; margin-top: 3px;
  background: var(--bleu); border-radius: 1px;
}
.langue:active { transform: scale(.94); transition-duration: .09s; }

@media (max-width: 1240px) {
  .langues { margin-left: auto; margin-right: 12px; }
}

/* ===== 27. Trois photos portrait, en entier (page rapatriement) ===== */
.trio-portraits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
}
.trio-portraits .vue { aspect-ratio: 3 / 4; border-radius: 8px; }
@media (max-width: 720px) {
  .trio-portraits { grid-template-columns: minmax(0, 300px); }
}

/* ===== 28. Avis Google ===== */
.avis { display: flex; flex-direction: column; margin: 0; }
.avis__etoiles { color: var(--bleu); font-size: 17px; letter-spacing: .12em; }
.avis blockquote { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--texte); flex: 1; }
.avis figcaption { margin-top: 18px; display: flex; flex-direction: column; gap: 3px; }
.avis figcaption b { font-size: 15px; font-weight: 800; }
.avis figcaption span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-clair); }

/* ===== 29. Actions d'une fiche module ===== */
.module__actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 28px; }

/* ===== 30. Chiffres : un sur deux en noir ===== */
.chiffres__item:nth-child(even) b { color: var(--encre); }

/* ===== 31. Signature du héros sur une seule ligne quand la place le permet ===== */
@media (min-width: 1100px) {
  .heros__signature--ligne { flex-wrap: nowrap; gap: 8px 18px; font-size: 11.5px; letter-spacing: 0; white-space: nowrap; }
}

/* ===== 32. Page formations : héros avec photo ===== */
.formations-heros {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.formations-heros .bleu { color: var(--bleu); }
@media (max-width: 900px) { .formations-heros { grid-template-columns: 1fr; } }

/* ===== 33. Onglets : l'onglet actif en bleu ===== */
.onglet.est-actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.onglet:hover { border-color: var(--bleu); color: var(--bleu); }
.onglet.est-actif:hover { color: #fff; }

/* ===== 34. Les plus demandés : du bleu ===== */
.phare__code {
  display: inline-block; padding: 4px 8px; border-radius: 5px;
  background: var(--bleu-pale); color: var(--bleu); font-weight: 500; text-align: center;
}
.phare__duree { color: var(--bleu); }
.phare:hover .phare__nom { color: var(--bleu); }

/* ===== 35. Packs : une photo dans l'en-tête, le pack phare en pleine largeur ===== */
.pack__tete { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 18px; align-items: center; }
.pack__image { margin: 0; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--craie-2); }
.pack__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 821px) { .pack--phare { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pack__tete { grid-template-columns: minmax(0, 1fr) 110px; } }

/* ===== 36. Grille de photos régulière (terrain) ===== */
.grille-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
@media (max-width: 900px) { .grille-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grille-photos { grid-template-columns: 1fr; } }
.pack__tete { grid-template-columns: minmax(0, 1fr) 150px; }
@media (max-width: 560px) {
  .pack__tete { grid-template-columns: minmax(0, 1fr) 92px; gap: 14px; }
  .pack h3 { font-size: 1.12rem; }
}
.pack h3 { font-size: clamp(1.1rem, 1.35vw, 1.2rem); }
.pack--phare h3 { font-size: var(--t-l); }