/* Cabinet CAP — styles du site.
   Transcription de la maquette « Site Cabinet CAP » (Claude Design) et des composants du design system.
   Toutes les valeurs viennent de tokens.css.

   Mouvement : n'anime que ce qui aide à lire ou à agir. Durées et courbes du design system,
   apparitions sans cascade, fondus de 240 ms au plus, rien si le système demande de réduire
   les animations (voir « Mouvement » en fin de fichier et site.js). */

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 110px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: var(--type-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 {
  color: var(--text-fort);
  margin: 0 0 var(--esp-4);
  letter-spacing: var(--espacement-titre);
}
h1 { font: var(--type-h1); }
h2 { font: var(--type-h2); }
h3 { font: var(--type-h3); }
h4 { font: var(--type-h4); }

p { margin: 0 0 var(--esp-4); max-width: var(--largeur-texte); }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; }

strong { font-weight: var(--poids-medium); color: var(--text-fort); }

a {
  color: var(--text-lien);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--transition-ui);
}
a:hover { color: var(--text-lien-hover); border-bottom-color: currentColor; }

a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--ombre-focus); }
a:focus-visible:not(.btn) { border-radius: var(--rayon-xs); }

.visuellement-masque {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  top: var(--esp-3);
  left: var(--esp-3);
  z-index: 100;
  padding: var(--esp-3) var(--esp-5);
  background: #fff;
  color: var(--text-fort);
  font: var(--type-label);
  border-radius: var(--rayon-pill);
  box-shadow: var(--ombre-3);
  transform: translateY(-200%);
}
.lien-evitement:focus { transform: none; }

/* ---------- Mise en page ---------- */

.conteneur {
  max-width: var(--largeur-contenu);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

.section { padding-block: clamp(48px, 7vw, 96px); }
.section--page { padding-block: clamp(48px, 7vw, 88px); }
.section--serree { padding-block: clamp(32px, 5vw, 64px); }
.section--suite { padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 88px); }
.section--fin { padding-block: 0 clamp(48px, 7vw, 88px); }
.section--douce { background: var(--gris-050); }

.intro-page { padding-block: clamp(48px, 7vw, 88px) clamp(32px, 4vw, 48px); }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 280px), 100%), 1fr));
  gap: var(--gap, var(--gouttiere));
}
.grille--deux { --min: 300px; --gap: clamp(32px, 5vw, 64px); align-items: start; }

/* ---------- Typographie ---------- */

.surtitre {
  font: var(--type-surtitre);
  text-transform: uppercase;
  letter-spacing: var(--espacement-caps);
  color: var(--cap-violet);
  margin: 0 0 var(--esp-4);
}
.surtitre--gris { color: var(--gris-600); }

.titre-page { font-size: clamp(30px, 4.4vw, 48px); margin: 0 0 var(--esp-5); max-width: 20ch; }
.titre-section { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 var(--esp-9); max-width: 24ch; }
.titre-section--serre { margin-bottom: var(--esp-4); }
.titre-bloc { font-size: clamp(24px, 2.8vw, 30px); margin: 0 0 var(--esp-6); }

.chapo { font: var(--type-chapo); font-size: clamp(16px, 1.7vw, 20px); max-width: 62ch; margin: 0; }
.chapo--60 { max-width: 60ch; }
.chapo.chapo--espace { margin-bottom: var(--esp-8); }
.chapo.chapo--cta { margin-bottom: var(--esp-7); }

.texte-sm { font: var(--type-body-sm); }
.texte-sm p, p.texte-sm { font: var(--type-body-sm); }
.justifie { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.insecable { white-space: nowrap; }

.intro-rubrique { font: var(--type-body-sm); max-width: 62ch; margin: 0 0 var(--esp-7); }
.intro-liste { font: var(--type-body-sm); margin: 0 0 var(--esp-6); }

/* Titre précédé d'une flèche de marque */
.titre-fleche { display: flex; gap: var(--esp-4); align-items: baseline; margin: 0 0 var(--esp-4); }
.titre-fleche img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.titre-fleche h2 { font-size: clamp(24px, 2.8vw, 30px); margin: 0; max-width: 22ch; }
.titre-fleche--haut { align-items: flex-start; gap: var(--esp-3); }
.titre-fleche--haut img { margin-top: 5px; }
.titre-fleche--20 h2 { max-width: 20ch; }
.titre-fleche--espace { margin-bottom: var(--esp-6); }

/* ---------- Composants de marque ---------- */

/* Filet 6 teintes (RegleHarmonie) */
.regle {
  height: var(--epaisseur-regle);
  background: linear-gradient(90deg,
    var(--cap-vert-jaune) 0 16.6667%,
    var(--cap-vert-bleu) 0 33.3333%,
    var(--cap-bleu-clair) 0 50%,
    var(--cap-bleu) 0 66.6667%,
    var(--cap-violet) 0 83.3333%,
    var(--cap-violet-fonce) 0 100%);
}
.regle--fine { height: 3px; }

/* Liste à puces flèches (FlecheBullet) */
.liste-fleches { list-style: none; padding: 0; margin: 0 0 var(--esp-6); }
.liste-fleches li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  margin: 0 0 var(--esp-3);
  font: var(--type-body);
  color: var(--text-body);
}
.liste-fleches img { width: 14px; height: 14px; object-fit: contain; flex: 0 0 auto; margin-top: 4px; }
.liste-fleches--serree { margin-bottom: var(--esp-5); }
.liste-fleches--68 { max-width: 68ch; }
.liste-fleches--fin { margin-bottom: 0; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--rayon-pill);
  font: var(--poids-medium) var(--taille-sm)/1 var(--font-core);
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  /* --mx / --my : aimantation vers le curseur (site.js) ; --presse : enfoncement au clic. */
  transform: translate(var(--mx, 0px), calc(var(--my, 0px) + var(--presse, 0px)));
  transition: var(--transition-ui);
}
.btn:active { --presse: 1px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; --presse: 0px; }
.btn--sm { min-height: 34px; padding: 8px 16px; font-size: var(--taille-xs); }
.btn--lg { min-height: 54px; padding: 16px 32px; font-size: var(--taille-md); gap: var(--esp-3); }
.btn--plein { display: flex; width: 100%; }

.btn--primaire { background: var(--action-primaire); color: #fff; }
.btn--primaire:hover { background: var(--action-primaire-hover); color: #fff; border-color: transparent; }
.btn--primaire:active { background: var(--action-primaire-active); }
.btn--primaire[disabled] { background: var(--action-primaire); }

.btn--contour { background: transparent; color: var(--action-primaire); border-color: var(--action-primaire); }
.btn--contour:hover { background: var(--cap-violet-050); color: var(--action-primaire); border-color: var(--action-primaire); }

.btn--inverse { background: #fff; color: var(--cap-violet-fonce); }
.btn--inverse:hover { background: var(--gris-100); color: var(--cap-violet-fonce); border-color: transparent; }

/* Lien souligné (« Voir le détail », « Voir la rubrique »…) : son chevron avance au survol,
   pour signaler qu'on va plus loin. */
.lien-souligne {
  font: var(--type-body-sm);
  color: var(--cap-violet);
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.lien-souligne:hover { color: var(--action-primaire-hover); }
.lien-souligne::after {
  content: "\203A";
  display: inline-block;
  margin-left: .35em;
  transition: transform var(--duree-rapide) var(--courbe-sortie);
}
.lien-souligne:hover::after { transform: translateX(3px); }

/* Flèche des liens externes : elle part en diagonale, dans le sens de l'ouverture. */
.fleche-externe { display: inline-block; transition: transform var(--duree-rapide) var(--courbe-sortie); }
a:hover .fleche-externe { transform: translate(2px, -2px); }

.lien-violet { color: var(--cap-violet); }
.lien-violet:hover { color: var(--cap-violet); }

/* ---------- Cartes ---------- */

.carte {
  position: relative;
  border-radius: var(--rayon-lg);
  padding: var(--esp-8);
  overflow: hidden;
  background: var(--surface-carte);
  border: 1px solid var(--bordure);
}
.carte--elevee {
  border-color: transparent;
  box-shadow: var(--ombre-2);
  padding: clamp(24px, 3vw, 40px);
}
.carte--teintee::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 100%;
  height: var(--epaisseur-regle);
  background: var(--teinte);
}
.teinte-vert-jaune { --teinte: var(--cap-vert-jaune); }
.teinte-vert-bleu { --teinte: var(--cap-vert-bleu); }
.teinte-bleu-clair { --teinte: var(--cap-bleu-clair); }
.teinte-bleu { --teinte: var(--cap-bleu); }
.teinte-violet { --teinte: var(--cap-violet); }
.teinte-violet-fonce { --teinte: var(--cap-violet-fonce); }

.carte__titre { font: var(--type-h4); margin: var(--esp-2) 0 var(--esp-3); }
.carte__titre--espace { margin-bottom: var(--esp-5); }
.carte p { font: var(--type-body-sm); margin: 0; }
.carte p + p { margin-top: var(--esp-5); }
.carte p.carte__citation { font-style: italic; color: var(--text-body); margin: 0 0 var(--esp-6); }
.bloc-cartes { margin-bottom: clamp(40px, 5vw, 72px); }

/* Carte entièrement cliquable : le lien « Voir le détail » couvre toute la carte, qui se soulève
   au survol (règle du design system pour les cartes cliquables). */
.carte--lien { transition: transform var(--duree-rapide) var(--courbe-sortie), box-shadow var(--duree-rapide) var(--courbe-sortie); }
.carte--lien .lien-souligne::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.carte--lien:hover { transform: translateY(-2px); box-shadow: var(--ombre-3); }
.carte--lien:hover .lien-souligne { color: var(--action-primaire-hover); }
.carte--lien:hover .lien-souligne::after { transform: translateX(3px); }
.carte--lien .lien-souligne:focus-visible { box-shadow: none; }
.carte--lien:has(.lien-souligne:focus-visible) { box-shadow: var(--ombre-3), var(--ombre-focus); }

/* Carte « public » (À qui nous nous adressons) */
.carte-public__entete { display: flex; gap: var(--esp-3); align-items: flex-start; margin-bottom: var(--esp-5); }
.carte-public__entete img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; margin-top: 3px; }
.carte-public__entete h3 { font: var(--type-h4); margin: 0; }
.carte-public p + p { margin-top: 1.5em; }

/* Carte d'attente (contenu à paraître) */
.carte-attente {
  border: 1px dashed var(--gris-300);
  border-radius: var(--rayon-lg);
  padding: var(--esp-7);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--esp-6);
}
.carte-attente--190 { min-height: 190px; }
.bloc-attente { margin-bottom: var(--esp-7); }
.carte-attente__type {
  font: var(--type-surtitre);
  text-transform: uppercase;
  letter-spacing: var(--espacement-caps);
  color: var(--gris-600);
}
.carte-attente__detail { font: var(--type-body-sm); color: var(--gris-600); }
.bandeau-attente {
  border: 1px dashed var(--gris-300);
  border-radius: var(--rayon-lg);
  padding: var(--esp-8);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: var(--type-body-sm);
  color: var(--gris-600);
}

/* ---------- Étiquettes ---------- */

.tags { display: flex; gap: var(--esp-3); flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 var(--esp-8); }
.tags--large { margin-bottom: var(--esp-9); }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--rayon-pill);
  font: var(--type-body-sm);
  color: var(--text-body);
  border: 1px solid var(--bordure-forte);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--rayon-pill);
  font: var(--type-surtitre);
  text-transform: uppercase;
  letter-spacing: var(--espacement-caps);
  background: var(--cap-violet-050);
  color: var(--cap-violet);
}

/* ---------- En-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}
.entete__barre { display: flex; align-items: center; gap: var(--esp-6); padding-block: 14px; }
.entete__logo { display: flex; flex: 0 0 auto; border-bottom: none; }
.entete__logo img { display: block; height: 64px; width: auto; }
.entete__cta { margin-left: auto; }

.nav-principale { padding-top: 2px; padding-bottom: 12px; }
.nav-principale ul {
  display: flex;
  gap: clamp(14px, 2.2vw, 28px);
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-principale a {
  position: relative;
  font: var(--type-body-sm);
  color: var(--text-body);
  border-bottom: 0;
  padding-bottom: 3px;
  white-space: nowrap;
}
/* Le soulignement se trace depuis la gauche au survol, comme l'indicateur de la page active. */
.nav-principale a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--cap-violet-100);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duree-rapide) var(--courbe-sortie);
}
.nav-principale a:hover { color: var(--text-fort); }
.nav-principale a:hover::after { transform: scaleX(1); }
.nav-principale a[aria-current="page"] { color: var(--text-fort); font-weight: var(--poids-medium); }
.nav-principale a[aria-current="page"]::after { background: var(--cap-violet); transform: scaleX(1); }

.bouton-menu {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bordure);
  background: #fff;
  border-radius: var(--rayon-pill);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.bouton-menu span { display: block; width: 18px; height: 2px; background: var(--cap-encre); }

@media (max-width: 999.98px) {
  .entete__cta, .nav-principale { display: none; }
  .bouton-menu { display: flex; }
}
@media (min-width: 1000px) {
  html { scroll-padding-top: 150px; }
}

/* Menu mobile (tiroir) */
.tiroir { position: fixed; inset: 0; z-index: 60; }
.tiroir[hidden] { display: none; }
.tiroir__voile {
  position: absolute;
  inset: 0;
  background: var(--voile-violet);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--duree-normale) var(--courbe-sortie);
}
.tiroir__panneau {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 86vw);
  height: 100%;
  overflow-y: auto;
  background: #fff;
  padding: var(--esp-7);
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  box-shadow: var(--ombre-4);
  transform: translateX(100%);
  transition: transform var(--duree-normale) var(--courbe-sortie);
}
.tiroir.est-ouvert .tiroir__voile { opacity: 1; }
.tiroir.est-ouvert .tiroir__panneau { transform: none; }
.tiroir__fermer {
  align-self: flex-end;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--bordure);
  background: #fff;
  border-radius: var(--rayon-pill);
  font-size: 20px;
  line-height: 1;
  color: var(--text-fort);
  cursor: pointer;
}
.tiroir nav { display: flex; flex-direction: column; gap: var(--esp-5); }
.tiroir ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-5); }
.tiroir__principal a { font: var(--type-h4); color: var(--text-fort); }
.tiroir__principal a[aria-current="page"] { color: var(--cap-violet); }
.tiroir__secondaire a { font: var(--type-body-sm); color: var(--text-body); }
.tiroir__separateur { height: 1px; background: var(--bordure); margin: var(--esp-2) 0; }
html.menu-ouvert { overflow: hidden; }

/* ---------- Accueil : hero ---------- */

.hero { padding-top: clamp(40px, 6vw, 88px); }
.hero__grille { --min: 320px; --gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__surtitre { text-align: center; margin-bottom: var(--esp-5); max-width: none; }
.hero__titre {
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
  margin: 0 0 var(--esp-6);
  text-wrap: balance;
  text-align: center;
}

.selecteur {
  background: var(--cap-violet-fonce);
  border-radius: var(--rayon-xl);
  padding: clamp(20px, 2.6vw, 36px);
}
.selecteur__titre { font: var(--type-h4); letter-spacing: normal; color: #fff; margin: 0 0 var(--esp-5); }
.selecteur__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--esp-4);
  align-items: end;
}
.selecteur label { display: block; font: var(--type-label); color: #fff; margin-bottom: var(--esp-2); }
.selecteur__action { display: flex; }
.selecteur__erreur { font: var(--type-body-sm); font-size: var(--taille-xs); color: var(--erreur-doux); margin: var(--esp-3) 0 0; }

.domaines { margin-top: clamp(32px, 4vw, 56px); }
.domaines__panneau { background: var(--gris-050); border-radius: var(--rayon-xl); padding: clamp(24px, 3vw, 40px); }
.domaines__panneau .surtitre { color: var(--cap-violet-fonce); margin-bottom: var(--esp-6); }
.domaines__grille { --min: 250px; --gap: clamp(20px, 3vw, 40px); }
.domaine { display: flex; gap: var(--esp-4); align-items: flex-start; border-bottom: none; color: inherit; }
.domaine:hover { color: inherit; }
.domaine img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; margin-top: 4px; transition: transform var(--duree-rapide) var(--courbe-sortie); }
.domaine:hover img { transform: translateX(3px); }
.domaine__titre { display: block; font: var(--type-h4); color: var(--text-fort); transition: color var(--duree-rapide) var(--courbe-sortie); }
.domaine:hover .domaine__titre { color: var(--cap-violet); }
.domaine__desc { display: block; font: var(--type-body-sm); color: var(--text-body); }

.hero__regle { margin-top: clamp(40px, 6vw, 80px); }

/* ---------- Accueil : principes ---------- */

.principes { display: flex; flex-direction: column; gap: var(--esp-8); }
.principe__entete { display: flex; gap: var(--esp-4); align-items: baseline; margin-bottom: var(--esp-3); }
.principe__entete img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.principe__entete h3 { font: var(--type-h4); margin: 0; }
.principe p { font: var(--type-body-sm); margin: 0; }
.principe p.avec-lien { margin-bottom: var(--esp-5); }
.titre-section--principes { margin-bottom: var(--esp-6); max-width: 18ch; }

.mention-domaines { font: var(--type-body-sm); color: var(--text-body); margin: var(--esp-7) 0 0; }

/* ---------- Photos ---------- */
/* La photo dépasse de 6 % en haut et en bas de son cadre : la parallaxe (site.js, --decalage)
   la fait glisser dans cette marge, sans jamais découvrir le fond. */

.photo {
  position: relative;
  margin: 0;
  height: var(--hauteur, 320px);
  overflow: hidden;
  border-radius: var(--rayon-lg);
  clip-path: inset(0 round var(--rayon-lg));
  background: var(--gris-100);
}
.photo[hidden] { display: none; }
.photo img {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: var(--cadrage, 50% 50%);
  transform: translate3d(0, var(--decalage, 0px), 0);
}

/* ---------- Notre approche : cartes d'implantation ---------- */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
  max-width: 820px;
  margin-top: clamp(24px, 3vw, 40px);
}
.cartes figure { margin: 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.cartes img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1122 / 1402;
  object-fit: cover;
  border-radius: var(--rayon-lg);
  border: 1px solid var(--gris-200);
}
.cartes figcaption { font: var(--type-body-sm); color: var(--text-body); }

.legende-carte {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  margin-top: var(--esp-6);
  padding: var(--esp-4) var(--esp-5);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-md);
  background: var(--gris-050);
  max-width: 62ch;
}
.legende-carte img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.legende-carte p { font: var(--type-body-sm); color: var(--text-body); margin: 0; }

.intro-implantation { font: var(--type-body-sm); max-width: 62ch; margin: 0 0 var(--esp-8); }

/* ---------- Formation ---------- */

.intro-page__surtitres { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; margin-bottom: var(--esp-4); }
.intro-page__surtitres .surtitre { margin: 0; }

.entete-catalogue {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-4);
  flex-wrap: wrap;
  margin-bottom: var(--esp-7);
}
.entete-catalogue h2 { font-size: clamp(24px, 2.8vw, 30px); margin: 0; max-width: 24ch; }
.lien-externe { font: var(--type-body-sm); color: var(--cap-violet); text-decoration: underline; border-bottom: none; }
.lien-externe:hover { color: var(--action-primaire-hover); }

/* ---------- Bandeau d'appel à l'action ---------- */

.bandeau-cta { padding-block: clamp(40px, 6vw, 72px); background: var(--gris-050); }
.bandeau-cta .conteneur { display: flex; gap: var(--esp-6); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.bandeau-cta h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 var(--esp-2); }
.bandeau-cta p { font: var(--type-body-sm); margin: 0; }

/* ---------- Contact ---------- */

.entete-contact { padding-block: clamp(40px, 6vw, 72px) clamp(24px, 3vw, 40px); }
.entete-contact h1 { font-size: clamp(26px, 3.2vw, 34px); margin: 0; }

.contact h2.contact__titre { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 var(--esp-5); max-width: 16ch; }
.contact .chapo { font-size: clamp(16px, 1.6vw, 19px); max-width: 52ch; margin: 0 0 var(--esp-8); }

.coordonnees { display: flex; flex-direction: column; gap: var(--esp-5); margin: 0; }
.coordonnees dt { font: var(--type-label); color: var(--text-fort); margin-bottom: var(--esp-1); }
.coordonnees dd { font: var(--type-body-sm); margin: 0; }
.coordonnees a { color: var(--cap-bleu); }
.coordonnees a:hover { color: var(--cap-bleu); }

.formulaire { display: flex; flex-direction: column; gap: var(--esp-5); }
.formulaire[hidden] { display: none; }
.formulaire__ligne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--esp-5);
}

.champ { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.champ__label { font: var(--type-label); color: var(--text-fort); transition: color var(--duree-rapide) var(--courbe-sortie); }
/* Le libellé du champ en cours de saisie prend la couleur du focus : on sait où l'on écrit. */
.champ:focus-within .champ__label { color: var(--cap-bleu); }
.champ__saisie {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--esp-4);
  background: #fff;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-sm);
  font: var(--type-body-sm);
  color: var(--text-fort);
  outline: none;
  transition: var(--transition-ui);
}
textarea.champ__saisie { padding: var(--esp-3) var(--esp-4); resize: vertical; display: block; }
.champ__saisie:focus { border-color: var(--bordure-focus); box-shadow: var(--ombre-focus); }
.champ__saisie[aria-invalid="true"] { border-color: var(--erreur); }
.champ__liste { position: relative; }
.champ__liste select.champ__saisie { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; }
.champ__liste::after {
  content: "\25BC";
  position: absolute;
  right: var(--esp-4);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-doux);
  font-size: 11px;
}
.champ__aide, .champ__erreur { font: var(--type-body-sm); font-size: var(--taille-xs); color: var(--text-doux); margin: 0; }
.champ__erreur { color: var(--erreur); }
.champ__erreur[hidden] { display: none; }

.case { position: relative; display: flex; gap: var(--esp-3); align-items: flex-start; cursor: pointer; }
.case input { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.case__boite {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 1px;
  border-radius: var(--rayon-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--bordure-forte);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  transition: var(--transition-ui);
}
.case input:checked + .case__boite { background: var(--cap-violet); border-color: var(--cap-violet); }
.case input:checked + .case__boite::after { content: "\2713"; animation: coche var(--duree-rapide) var(--courbe-sortie); }
.case input:focus-visible + .case__boite { box-shadow: var(--ombre-focus); }
.case input[aria-invalid="true"] + .case__boite { border-color: var(--erreur); }
.case__texte { font: var(--type-body-sm); color: var(--text-fort); }
.formulaire__cases .champ__erreur { margin-top: var(--esp-2); }
.formulaire__cases .case + .case, .formulaire__cases .champ__erreur + .case { margin-top: var(--esp-3); }

.formulaire__note { font: var(--type-body-sm); font-size: var(--taille-xs); color: var(--text-body); margin: 0; max-width: none; }
.formulaire__note a { color: var(--text-body); border-bottom-color: currentColor; }
.formulaire__note a:hover { color: var(--cap-violet); }

.champ-piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.alerte {
  border: 1px solid var(--erreur);
  background: var(--erreur-doux);
  border-radius: var(--rayon-md);
  padding: var(--esp-4);
  font: var(--type-body-sm);
  color: var(--text-fort);
  margin: 0;
  max-width: none;
}
.alerte[hidden] { display: none; }
.alerte a { color: var(--text-fort); border-bottom-color: currentColor; }

.confirmation { display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-6) 0; }
.confirmation[hidden] { display: none; }
.confirmation img { width: 28px; height: 28px; object-fit: contain; }
/* La flèche de marque avance à l'arrivée du message : la demande est partie. */
.confirmation:not([hidden]) img { animation: entree-gauche var(--duree-lente) var(--courbe-sortie), apparition var(--duree-normale) var(--courbe-sortie); }
.confirmation h3 { font: var(--type-h3); margin: 0; }
.confirmation h3:focus { outline: none; }
.confirmation p { font: var(--type-body-sm); margin: 0; }

/* ---------- Pied de page ---------- */

.pied { background: var(--cap-encre); color: rgba(255, 255, 255, .78); }
.pied__grille {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 36px);
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: var(--esp-8);
}
.pied a { color: rgba(255, 255, 255, .78); }
.pied a:hover { color: #fff; border-bottom-color: currentColor; }
.pied__marque { flex: 1 1 240px; min-width: 0; }
.pied__logo { display: inline-block; background: #fff; padding: 12px 16px; border-radius: var(--rayon-md); border-bottom: none; }
.pied__logo img { display: block; height: 48px; width: auto; }
.pied__marque p { margin: var(--esp-5) 0 0; color: rgba(255, 255, 255, .7); font: var(--type-body-sm); max-width: 36ch; }
.pied__col { flex: 1 1 160px; min-width: 0; }
.pied__titre {
  font: var(--type-surtitre);
  text-transform: uppercase;
  letter-spacing: var(--espacement-caps);
  color: var(--cap-bleu-clair);
  margin: 0 0 var(--esp-4);
}
.pied__liens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.pied__liens a { font: var(--type-body-sm); }
.pied address { font: var(--type-body-sm); line-height: 1.9; font-style: normal; }
.pied__qualiopi { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; gap: var(--esp-3); align-items: flex-start; }
.pied__qualiopi-logo { display: block; background: #fff; padding: 14px 15px; border-radius: var(--rayon-md); border-bottom: none; }
.pied__qualiopi-logo img { display: block; width: 146px; height: 67px; object-fit: contain; }
.pied__qualiopi p { margin: 0; max-width: 30ch; color: rgba(255, 255, 255, .82); font: var(--type-body-sm); font-size: var(--taille-2xs); line-height: 1.6; }
.pied .pied__certificat { color: var(--cap-bleu-clair); font: var(--type-body-sm); font-size: var(--taille-2xs); text-decoration: underline; border-bottom: none; }
.pied .pied__certificat:hover { color: #fff; }
.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: var(--esp-5);
  color: rgba(255, 255, 255, .45);
  font: var(--type-body-sm);
  font-size: var(--taille-2xs);
}
.pied__bas .conteneur { display: flex; gap: var(--esp-4); justify-content: space-between; flex-wrap: wrap; }
.pied .pied__bas a { color: rgba(255, 255, 255, .6); }
.pied .pied__bas a:hover { color: #fff; }

/* ---------- Pages de texte (mentions légales) ---------- */

.texte-long { max-width: 68ch; }
.texte-long h2 { font-size: clamp(22px, 2.4vw, 26px); margin: var(--esp-9) 0 var(--esp-4); }
.texte-long h2:first-child { margin-top: 0; }
.texte-long p, .texte-long li { font: var(--type-body-sm); }
.texte-long ul { padding-left: 1.2em; margin: 0 0 var(--esp-4); }
.texte-long li { margin-bottom: var(--esp-2); }
.a-completer { background: var(--attention-doux); color: var(--text-fort); padding: 0 4px; border-radius: var(--rayon-xs); }

/* ---------- Mouvement ---------- */

/* Apparition au défilement. La classe « anim » est posée par site.js : sans JavaScript, ou si le
   système demande moins d'animations, tout est visible d'emblée. Chaque bloc apparaît une fois,
   quand il arrive à l'écran, sans décalage en cascade. */
.anim [data-reveal]:not(.est-visible) { opacity: 0; translate: 0 16px; }
.anim [data-reveal="filet"] { transform-origin: left center; }
.anim [data-reveal="filet"]:not(.est-visible) { opacity: 1; translate: none; scale: 0 1; }
.anim [data-reveal].est-visible {
  transition:
    opacity var(--duree-normale) var(--courbe-sortie),
    translate var(--duree-lente) var(--courbe-sortie),
    scale var(--duree-lente) var(--courbe-sortie),
    transform var(--duree-rapide) var(--courbe-sortie),
    box-shadow var(--duree-rapide) var(--courbe-sortie);
}

/* Reflet qui suit le curseur, sur les surfaces cliquables uniquement (écrans à souris). */
.pointeur-fin [data-reflet] { position: relative; isolation: isolate; }
.pointeur-fin [data-reflet]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--x, 50%) var(--y, 50%), var(--reflet, rgba(80, 69, 150, .07)), transparent 70%);
  opacity: 0;
  transition: opacity var(--duree-normale) var(--courbe-sortie);
}
.pointeur-fin [data-reflet]:hover::after { opacity: 1; }
.selecteur { --reflet: rgba(255, 255, 255, .08); }

@keyframes coche { from { transform: scale(.4); opacity: 0; } }
@keyframes entree-gauche { from { transform: translateX(-12px); } }
@keyframes apparition { from { opacity: 0; } }

/* Transition entre les pages (navigateurs compatibles) : l'en-tête reste en place, le contenu se
   fond en 240 ms. */
@view-transition { navigation: auto; }
.entete { view-transition-name: entete; }
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation-duration: 240ms; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }

/* ---------- Préférences ---------- */

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

@media print {
  .entete, .tiroir, .pied, .selecteur, .formulaire { display: none !important; }
  .anim [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; }
  body { color: #000; }
}