/* =========================================================================
   Feuille de style unique du site.
   1. Polices        2. Variables   3. Base          4. Utilitaires
   5. En-tete        6. Pied        7. Sections      8. Composants
   9. Formulaires   10. Animations 11. Responsive

   Parti pris : blanc dominant, bleu nuit pour les titres, une seule couleur
   d'accent reprise du logo (#1800AC). Pas de degrade, pas d'ombre lourde :
   la hierarchie se fait par la typographie et l'espace.
   ========================================================================= */

/* ------------------------------------------------------------- 1. Polices */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta";
  src: url("../fonts/jakarta.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------- 2. Variables */
:root {
  /* accent : couleur exacte du logo */
  --accent: #1800ac;
  --accent-sombre: #12007d;
  --accent-clair: #5e1ed6;
  --accent-050: #f2f0ff;
  --accent-100: #e4e0fb;
  --accent-200: #cbc3f6;

  /* bleu nuit : titres et surfaces sombres */
  --nuit: #0e1233;
  --nuit-800: #161b45;
  --nuit-700: #232a5c;

  --texte: #4a5270;
  --texte-doux: #767ea0;
  --bord: #e3e6f3;
  --bord-fort: #cfd4ea;
  --surface: #ffffff;
  --surface-bleue: #f5f7fd;
  --surface-accent: #f2f0ff;

  --signal: #b45309;

  --largeur: 1220px;
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --rayon: 12px;
  --rayon-sm: 8px;
  --rayon-xs: 6px;
  --pilule: 999px;

  --ombre: 0 1px 2px rgba(14, 18, 51, 0.04);
  --ombre-survol: 0 12px 28px -14px rgba(14, 18, 51, 0.26);
  --ombre-haute: 0 24px 48px -28px rgba(14, 18, 51, 0.4);

  --transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);

  --titre: "Jakarta", "Segoe UI", system-ui, sans-serif;
  --corps: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------- 3. Base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--corps);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texte);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  color: var(--nuit);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.08;
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 1.15rem + 3.9vw, 3.8rem); }
h2 { font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.7rem); }
h3 { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem); line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 0.98rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-sombre); }

img, picture, svg { max-width: 100%; display: block; }
img { height: auto; }

ul, ol { padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

:focus-visible { outline: 3px solid var(--accent-clair); outline-offset: 3px; border-radius: 3px; }

hr { border: 0; border-top: 1px solid var(--bord); margin: 2.5rem 0; }

::selection { background: var(--accent-100); color: var(--nuit); }

/* ---------------------------------------------------------- 4. Utilitaires */
.contenant {
  width: 100%; max-width: var(--largeur);
  margin-inline: auto; padding-inline: var(--gouttiere);
}

.visuellement-masque {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.lien-evitement {
  position: absolute; top: -100px; left: 1rem; z-index: 90;
  background: var(--accent); color: #fff; padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--rayon-xs) var(--rayon-xs); text-decoration: none;
}
.lien-evitement:focus { top: 0; color: #fff; }

.couvre { width: 100%; height: 100%; object-fit: cover; }
picture.couvre, .couvre picture { display: block; height: 100%; }

.eyebrow {
  display: block;
  font-family: var(--titre);
  font-size: 0.73rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 0.9rem;
}
.eyebrow--clair { color: rgba(255, 255, 255, 0.72); }

.chapo {
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  color: var(--texte); max-width: 64ch; line-height: 1.65;
}

.titre-discret {
  font-family: var(--titre);
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--texte-doux); font-weight: 700; text-align: center;
}

.a-confirmer {
  display: inline-block;
  background: var(--surface-bleue); color: var(--texte-doux);
  border: 1px solid var(--bord); border-radius: var(--pilule);
  padding: 0.05em 0.7em; font-size: 0.88em; font-weight: 500;
}

.lien-fleche {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600; text-decoration: none; color: var(--accent);
}
.lien-fleche::after { content: "→"; transition: transform var(--transition); display: inline-block; }
.lien-fleche:hover::after { transform: translateX(4px); }

/* Boutons — anguleux, sobres, sans degrade */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.9rem 1.6rem; border-radius: var(--rayon-xs);
  font-family: var(--corps); font-weight: 600; font-size: 0.96rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.bouton--principal { background: var(--accent); color: #fff; }
.bouton--principal:hover { background: var(--accent-sombre); color: #fff; transform: translateY(-1px); }
.bouton--fantome { border-color: var(--bord-fort); color: var(--nuit); background: #fff; }
.bouton--fantome:hover { border-color: var(--accent); color: var(--accent); }
.bouton--clair { background: #fff; color: var(--nuit); }
.bouton--clair:hover { background: rgba(255, 255, 255, 0.88); color: var(--nuit); transform: translateY(-1px); }
.bouton--contour-clair { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.bouton--contour-clair:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.bouton--compact { padding: 0.6rem 1.1rem; font-size: 0.9rem; }

/* -------------------------------------------------------------- 5. En-tete */
.bandeau-haut {
  background: var(--nuit); color: rgba(255, 255, 255, 0.72); font-size: 0.8rem;
}
.bandeau-haut__grille {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 2.4rem; flex-wrap: wrap;
}
.bandeau-haut__accroche { margin: 0; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; }
.bandeau-haut__liens { display: flex; align-items: center; gap: 1.25rem; }
.bandeau-haut__liens a { color: inherit; text-decoration: none; }
.bandeau-haut__liens a:hover { color: #fff; }
.bandeau-haut__tel { font-weight: 700; color: #fff !important; }

.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--bord);
  transition: box-shadow var(--transition);
}
.entete__grille { display: flex; align-items: center; gap: 1.25rem; min-height: 4.5rem; }

.marque { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; }
.marque__symbole { height: 2.15rem; width: auto; }
.pied .marque__symbole { height: 2.4rem; }
.marque__logo { height: 2.6rem; width: auto; }
.marque__sceau {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  background: var(--accent); color: #fff;
  font-family: var(--titre); font-weight: 800; font-size: 0.8rem;
  border-radius: var(--rayon-xs);
}
.marque__nom {
  font-family: var(--titre); font-weight: 800; color: var(--nuit);
  font-size: 1.15rem; letter-spacing: 0.01em; line-height: 1;
}

.navigation { margin-left: auto; }
.navigation__liste { display: flex; gap: 0.1rem; list-style: none; margin: 0; padding: 0; }
.navigation__item { position: relative; margin: 0; }
.navigation__declencheur {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--nuit);
  padding: 0.55rem 0.8rem; border-radius: var(--rayon-xs);
  transition: color var(--transition), background var(--transition);
}
.navigation__declencheur:hover,
.navigation__declencheur[aria-expanded="true"] { color: var(--accent); background: var(--accent-050); }

.chevron {
  width: 0.4rem; height: 0.4rem; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--transition);
}
[aria-expanded="true"] .chevron { transform: rotate(225deg) translate(-2px, -2px); }

.sous-menu {
  position: absolute; top: calc(100% + 0.5rem); left: 0;
  min-width: 23rem; background: #fff;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre-haute); padding: 0.5rem;
}
.sous-menu[hidden] { display: none; }
.sous-menu ul { list-style: none; margin: 0; padding: 0; }
.sous-menu li { margin: 0; }
.sous-menu a {
  display: block; padding: 0.65rem 0.8rem; border-radius: var(--rayon-sm);
  text-decoration: none; color: var(--nuit); transition: background var(--transition);
}
.sous-menu a:hover { background: var(--surface-bleue); }
.sous-menu__libelle { display: block; font-weight: 600; font-size: 0.92rem; }
.sous-menu__desc { display: block; font-size: 0.82rem; color: var(--texte-doux); }

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

.bascule-menu {
  display: none; width: 2.7rem; height: 2.7rem;
  background: #fff; border: 1px solid var(--bord-fort); border-radius: var(--rayon-xs);
  cursor: pointer; position: relative;
}
.bascule-menu__barres,
.bascule-menu__barres::before,
.bascule-menu__barres::after {
  position: absolute; left: 50%; width: 1.1rem; height: 2px; border-radius: 2px;
  background: var(--nuit); transform: translateX(-50%);
  transition: transform var(--transition), top var(--transition), background var(--transition);
}
.bascule-menu__barres { top: 50%; margin-top: -1px; }
.bascule-menu__barres::before { content: ""; top: -6px; }
.bascule-menu__barres::after { content: ""; top: 6px; }
[aria-expanded="true"] .bascule-menu__barres { background: transparent; }
[aria-expanded="true"] .bascule-menu__barres::before { top: 0; transform: translateX(-50%) rotate(45deg); }
[aria-expanded="true"] .bascule-menu__barres::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

.menu-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; top: 6.9rem; z-index: 55;
  background: #fff; overflow-y: auto;
  border-top: 1px solid var(--bord);
  padding: 0.5rem var(--gouttiere) 3rem;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile__groupe { border-bottom: 1px solid var(--bord); }
.menu-mobile__titre {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  background: none; border: 0; cursor: pointer;
  font-family: var(--titre); font-weight: 700; font-size: 1rem; color: var(--nuit);
  text-transform: uppercase; letter-spacing: 0.02em;
  padding: 1.05rem 0; text-align: left;
}
.menu-mobile__groupe ul { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.menu-mobile__groupe li { margin: 0; }
.menu-mobile__groupe a { display: block; padding: 0.6rem 0; color: var(--texte); text-decoration: none; }
.menu-mobile__groupe a:hover { color: var(--accent); }
.menu-mobile__utilitaire { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; gap: 1.5rem; }
.menu-mobile__utilitaire a { font-weight: 600; }
.menu-mobile__pied { display: grid; gap: 0.85rem; }
.menu-mobile__tel {
  font-family: var(--titre); font-weight: 800; font-size: 1.2rem;
  text-align: center; text-decoration: none;
}

/* ----------------------------------------------------------------- 6. Pied */
.pied { background: var(--nuit); color: rgba(255, 255, 255, 0.68); margin-top: 0; padding: 4rem 0 2rem; font-size: 0.92rem; }
.pied a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied h2 {
  color: #fff; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.pied__haut { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
.pied .marque__nom { color: #fff; }
.pied .marque__sceau { background: #fff; color: var(--accent); }
.pied__baseline { margin: 1.1rem 0; max-width: 34ch; }
.pied__coordonnees { font-style: normal; display: grid; gap: 0.25rem; margin-bottom: 1.1rem; }
.pied__tel { font-family: var(--titre); font-size: 1.35rem; font-weight: 800; }
.pied__reseaux { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.pied__reseaux a {
  display: inline-block; padding: 0.3rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--pilule); font-size: 0.85rem;
}
.pied__reseaux a:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; }
.pied__colonnes { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.pied__colonne ul { list-style: none; margin: 0; padding: 0; }
.pied__colonne li { margin-bottom: 0.5rem; }

.pied__administratif { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pied__administratif dl {
  display: grid; gap: 1.25rem; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}
.pied__administratif dt {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); margin-bottom: 0.3rem;
}
.pied__administratif dd { margin: 0; color: #fff; }
.pied__administratif .a-confirmer { background: transparent; color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.25); }
.pied__mention { margin-top: 1.5rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); }

.pied__bas {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: space-between; font-size: 0.85rem;
}
.pied__bas ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; }
.pied__bas li { margin: 0; }
.pied__bas p { margin: 0; }

/* ------------------------------------------------------------- 7. Sections */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--claire { background: var(--surface-bleue); }
.section--compacte { padding: clamp(2rem, 4vw, 3rem) 0; }

.section__entete {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 2.75rem;
}
.section__entete h2 { margin-bottom: 0.6rem; }
.section__entete .chapo { margin: 0; }
.section__action { margin-top: 2.75rem; }

.entete-page {
  background: var(--surface-bleue);
  border-bottom: 1px solid var(--bord);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.entete-page h1 { max-width: 22ch; }
.entete-page .chapo { margin-top: 1.25rem; }

.ariane { background: #fff; font-size: 0.82rem; border-bottom: 1px solid var(--bord); }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0.7rem 0; }
.ariane li { margin: 0; display: flex; gap: 0.5rem; align-items: center; }
.ariane li + li::before { content: "/"; color: var(--bord-fort); }
.ariane a { color: var(--texte-doux); text-decoration: none; }
.ariane a:hover { color: var(--accent); }
.ariane [aria-current] { color: var(--nuit); font-weight: 500; }

/* Hero */
.heros { position: relative; color: #fff; isolation: isolate; background: var(--nuit); }
.heros__fond { position: absolute; inset: 0; z-index: -2; }
.heros__fond img { width: 100%; height: 100%; object-fit: cover; }
.heros::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(92deg, rgba(14,18,51,0.94) 0%, rgba(14,18,51,0.86) 42%, rgba(14,18,51,0.42) 100%);
}
.heros__contenu { padding: clamp(3.5rem, 9vw, 7rem) var(--gouttiere) clamp(3rem, 7vw, 5rem); }
.heros h1 { color: #fff; max-width: 15ch; }
.heros__texte { font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.18rem); max-width: 50ch; color: rgba(255,255,255,0.84); }
.heros__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }
.heros__reassurance {
  list-style: none; display: grid; gap: 0.6rem; margin: 2.25rem 0 0; padding: 0;
  font-size: 0.93rem; color: rgba(255,255,255,0.88);
}
.heros__reassurance li { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.heros__reassurance li::before {
  content: ""; flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size: 0.7rem; background-repeat: no-repeat; background-position: center;
}

/* Bandeau defilant */
.marquee {
  background: var(--accent); color: #fff; overflow: hidden;
  padding: 0.7rem 0; border-block: 1px solid rgba(255,255,255,0.12);
}
.marquee__piste {
  display: flex; gap: 0; width: max-content;
  animation: defilement 38s linear infinite;
}
.marquee__lot { display: flex; gap: 0; flex: none; }
.marquee span {
  font-family: var(--titre); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding-inline: 1.4rem; white-space: nowrap; display: inline-flex; align-items: center;
}
.marquee span::after {
  content: ""; width: 0.28rem; height: 0.28rem; border-radius: 50%;
  background: rgba(255,255,255,0.55); margin-left: 1.6rem;
}
@keyframes defilement { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__piste { animation: none; }
  .marquee { overflow-x: auto; }
}

/* Bandeau illustre */
.bandeau-image { position: relative; color: #fff; isolation: isolate; background: var(--nuit); }
.bandeau-image__fond { position: absolute; inset: 0; z-index: -2; }
.bandeau-image__fond img { width: 100%; height: 100%; object-fit: cover; }
.bandeau-image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(14,18,51,0.95) 0%, rgba(14,18,51,0.88) 50%, rgba(14,18,51,0.55) 100%);
}
.bandeau-image__contenu { padding: clamp(3rem, 7vw, 5rem) var(--gouttiere); }
.bandeau-image h2 { color: #fff; max-width: 20ch; }
.bandeau-image p { max-width: 58ch; color: rgba(255,255,255,0.84); }
.bandeau-image .bouton { margin-top: 1rem; }

/* ----------------------------------------------------------- 8. Composants */
.carte {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.carte:hover { border-color: var(--bord-fort); transform: translateY(-3px); box-shadow: var(--ombre-survol); }

.grille-formations { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.carte-formation {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: #fff; overflow: hidden; box-shadow: var(--ombre);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.carte-formation:hover { border-color: var(--bord-fort); transform: translateY(-3px); box-shadow: var(--ombre-survol); }
.carte-formation__image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-bleue); }
.carte-formation__image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.carte-formation:hover .carte-formation__image img { transform: scale(1.05); }
.carte-formation__corps { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.carte-formation h3 { margin-bottom: 0.5rem; }
.carte-formation h3 a { color: inherit; text-decoration: none; }
.carte-formation h3 a::after { content: ""; position: absolute; inset: 0; }
.carte-formation p { font-size: 0.93rem; }
.carte-formation__lien { margin-top: auto; padding-top: 1.1rem; color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.carte-formation__lien::after { content: " →"; }

.etiquette {
  display: inline-block; align-self: flex-start;
  background: var(--accent-050); color: var(--accent);
  font-family: var(--titre);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3rem 0.65rem; border-radius: var(--rayon-xs); margin-bottom: 0.9rem;
}

.grille-avantages { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 2.5rem; }
.avantage {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 1.75rem; box-shadow: var(--ombre);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.avantage:hover { border-color: var(--bord-fort); transform: translateY(-3px); box-shadow: var(--ombre-survol); }
.avantage__numero {
  font-family: var(--titre); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em;
  color: var(--accent); margin-bottom: 0.9rem;
}
.avantage p { font-size: 0.93rem; }

/* Methode : liste numerotee reliee par un filet */
.parcours { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 0; }
.parcours__etape {
  position: relative; margin: 0; padding: 0 0 2rem 4.5rem;
  border-left: 1px solid var(--bord);
  margin-left: 1.35rem;
}
.parcours__etape:last-child { padding-bottom: 0; border-left-color: transparent; }
.parcours__puce {
  position: absolute; top: -0.25rem; left: -1.35rem;
  display: grid; place-items: center; width: 2.7rem; height: 2.7rem;
  background: #fff; color: var(--accent);
  border: 1px solid var(--bord-fort); border-radius: 50%;
  font-family: var(--titre); font-weight: 800; font-size: 0.85rem;
}
.parcours__etape h3 { margin-bottom: 0.35rem; }
.parcours__etape p { font-size: 0.95rem; }

.duo { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
.duo__image { margin: 0; }
.duo__image img { border-radius: var(--rayon); width: 100%; }
.duo__image figcaption { font-size: 0.8rem; color: var(--texte-doux); margin-top: 0.7rem; }
.duo__texte .lien-fleche { margin-top: 1.1rem; }

.grille-liens { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.carte-lien {
  position: relative; display: block; padding: 1.75rem;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  text-decoration: none; color: inherit; background: #fff; box-shadow: var(--ombre);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.carte-lien:hover { border-color: var(--bord-fort); transform: translateY(-3px); box-shadow: var(--ombre-survol); }
.carte-lien h3 { margin-bottom: 0.45rem; }
.carte-lien p { font-size: 0.93rem; margin-bottom: 1.6rem; }
.carte-lien__fleche { position: absolute; bottom: 1.5rem; left: 1.75rem; color: var(--accent); transition: transform var(--transition); }
.carte-lien:hover .carte-lien__fleche { transform: translateX(4px); }

.grille-chiffres { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); text-align: center; }
.chiffre { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.6rem 1rem; }
.chiffre__valeur { font-family: var(--titre); font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem); font-weight: 800; color: var(--accent); margin: 0; line-height: 1; }
.chiffre__libelle { font-weight: 600; color: var(--nuit); margin: 0.5rem 0 0; }
.chiffre__precision { font-size: 0.8rem; color: var(--texte-doux); margin: 0.25rem 0 0; }

.grille-temoignages { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 2.5rem; }
.temoignage { margin: 0; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.75rem; }
.temoignage blockquote { margin: 0 0 1rem; color: var(--nuit); }
.temoignage figcaption { font-size: 0.88rem; color: var(--texte-doux); font-weight: 600; }

.bande-partenaires { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; padding: 0; margin: 1.5rem 0 0; }
.bande-partenaires img { max-height: 2.5rem; width: auto; filter: grayscale(1); opacity: 0.6; }

/* Operateurs de competences */
.grille-opco {
  display: grid; gap: 1rem; padding: 0; margin: 2.25rem 0 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
}
.grille-opco li { margin: 0; }
.opco {
  display: flex; flex-direction: column; height: 100%; gap: 0.7rem;
  padding: 1.25rem; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.opco:hover { border-color: var(--bord-fort); transform: translateY(-3px); box-shadow: var(--ombre-survol); color: inherit; }
.opco--phare { border-color: var(--accent-200); background: var(--accent-050); }
.opco__vignette {
  display: grid; place-items: center; height: 3.4rem;
  border-radius: var(--rayon-sm); background: #fff;
  font-family: var(--titre); font-weight: 800; color: var(--nuit);
  font-size: 0.95rem; text-align: center; padding: 0.4rem;
}
.opco__vignette img { max-height: 2.6rem; max-width: 100%; width: auto; object-fit: contain; }
.opco--sombre .opco__vignette { background: var(--nuit); }
.opco__nom { font-family: var(--titre); font-weight: 700; color: var(--nuit); font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.02em; }
.opco__secteur { font-size: 0.82rem; color: var(--texte-doux); line-height: 1.45; }
.opco__marque { margin-top: auto; font-size: 0.78rem; color: var(--accent); font-weight: 600; }

/* Bande de confiance */
.bande-confiance { background: var(--surface-bleue); border-bottom: 1px solid var(--bord); padding: 2.25rem 0 1.5rem; }
.bande-confiance__grille { display: grid; gap: 2rem; align-items: center; }
.sceau-qualiopi { display: flex; gap: 1.25rem; align-items: flex-start; }
.sceau-qualiopi__logo { width: 7rem; height: auto; flex: none; }
.sceau-qualiopi__marque {
  flex: none; display: grid; place-items: center; gap: 0.1rem;
  width: 7rem; padding: 0.7rem 0.5rem; margin: 0;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon-sm); text-align: center;
}
.sceau-qualiopi__marque span { font-family: var(--titre); font-weight: 800; color: var(--nuit); font-size: 1rem; letter-spacing: 0.02em; }
.sceau-qualiopi__marque small { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-doux); }
.sceau-qualiopi__titre { font-family: var(--titre); font-weight: 700; color: var(--nuit); margin: 0 0 0.2rem; text-transform: uppercase; font-size: 0.92rem; letter-spacing: 0.02em; }
.sceau-qualiopi__detail { font-size: 0.86rem; margin: 0 0 0.6rem; }
.puces-actions { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 0.6rem; }
.puces-actions li {
  margin: 0; font-size: 0.76rem; background: #fff; color: var(--texte);
  border: 1px solid var(--bord); border-radius: var(--pilule); padding: 0.15rem 0.7rem;
}
.bande-confiance__mentions { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 0; }
.bande-confiance__mentions dt { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 0.2rem; }
.bande-confiance__mentions dd { margin: 0; font-weight: 600; color: var(--nuit); font-size: 0.92rem; }
.bande-confiance__note { font-size: 0.78rem; color: var(--texte-doux); margin: 1.25rem auto 0; }

/* Accordeon */
.accordeon { display: grid; gap: 0.6rem; }
.accordeon__item {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon-sm); overflow: hidden;
  transition: border-color var(--transition);
}
.accordeon__item[open] { border-color: var(--accent-200); }
.accordeon__item summary {
  cursor: pointer; padding: 1.1rem 3rem 1.1rem 1.35rem; position: relative;
  font-weight: 600; color: var(--nuit); list-style: none;
}
.accordeon__item summary::-webkit-details-marker { display: none; }
.accordeon__item summary::after {
  content: ""; position: absolute; right: 1.35rem; top: 1.45rem;
  width: 0.55rem; height: 0.55rem;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg); transition: transform var(--transition);
}
.accordeon__item[open] summary::after { transform: rotate(225deg); top: 1.6rem; }
.accordeon__item summary:hover { color: var(--accent); }
.accordeon__corps { padding: 0 3rem 1.3rem 1.35rem; max-width: 78ch; }

/* Encadres */
.encadre { border: 1px solid var(--bord); border-radius: var(--rayon); background: #fff; padding: 1.75rem; }
.encadre h2, .encadre h3 { margin-bottom: 0.6rem; }
.encadre h2 { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); }
.encadre--alerte { border-color: var(--bord-fort); background: var(--surface-bleue); }
.encadre--violet { background: var(--accent-050); border-color: var(--accent-100); }

.liste-marquee { list-style: none; padding: 0; }
.liste-marquee li { position: relative; padding-left: 1.7rem; margin-bottom: 0.6rem; }
.liste-marquee li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--accent-050);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231800ac' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size: 0.68rem; background-repeat: no-repeat; background-position: center;
}

.fiche-infos {
  display: grid; gap: 1px; background: var(--bord);
  border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.fiche-infos > div { background: #fff; padding: 1rem 1.15rem; }
.fiche-infos dt { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 0.3rem; }
.fiche-infos dd { margin: 0; font-weight: 600; color: var(--nuit); font-size: 0.93rem; }

.module { border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: 1rem; overflow: hidden; }
.module__entete { background: var(--surface-bleue); padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--bord); }
.module__entete h3 { margin: 0; }
.module__entete p { font-size: 0.92rem; margin: 0.3rem 0 0; }
.module ul { list-style: none; margin: 0; padding: 0.35rem 1.6rem 1.2rem; }
.module li { padding: 0.75rem 0; border-bottom: 1px solid var(--bord); margin: 0; }
.module li:last-child { border-bottom: 0; }
.module__titre { font-weight: 600; color: var(--nuit); display: block; }
.module__detail { font-size: 0.92rem; }

.mise-en-page { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.colonne-laterale { position: sticky; top: 6.5rem; display: grid; gap: 1rem; }

.sources { font-size: 0.86rem; color: var(--texte-doux); }
.sources ul { list-style: none; padding: 0; }
.sources li { margin-bottom: 0.4rem; }

.appel { background: var(--nuit); color: rgba(255,255,255,0.78); padding: clamp(3rem, 6vw, 4.5rem) 0; }
.appel h2 { color: #fff; margin-bottom: 0.5rem; }
.appel__grille { display: grid; gap: 2rem; align-items: center; }
.appel p { margin: 0; }
.appel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }
.appel__tel { font-family: var(--titre); font-weight: 800; font-size: 1.1rem; color: #fff; text-decoration: none; }

.bloc-tel { font-family: var(--titre); font-size: 1.5rem; font-weight: 800; margin-top: 1rem; }
.bloc-tel a { text-decoration: none; }

.contenu-riche { max-width: 74ch; }
.contenu-riche h2 { margin-top: 2.5rem; }
.contenu-riche h2:first-child { margin-top: 0; }
.contenu-riche h3 { margin-top: 1.75rem; }

/* En-tete de fiche */
.entete-fiche { background: var(--surface-bleue); border-bottom: 1px solid var(--bord); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.entete-fiche__grille { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.entete-fiche__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }
.entete-fiche__image { margin: 0; }
.entete-fiche__image img { border-radius: var(--rayon); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.entete-fiche__image figcaption { font-size: 0.76rem; color: var(--texte-doux); margin-top: 0.55rem; }

.contenu-fiche > section, .contenu-fiche > .encadre, .contenu-fiche > figure { margin-bottom: 2.75rem; }
.contenu-fiche > *:last-child { margin-bottom: 0; }
.bloc { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.bloc:last-child { margin-bottom: 0; }
.groupe-formations { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.titre-section-dispositifs { margin-top: 3rem; }

.fiche-infos--colonne { grid-template-columns: 1fr; }
.liste-numerotee { padding-left: 1.2rem; }
.liste-numerotee li { margin-bottom: 0.6rem; }

.note-prudence { font-size: 0.86rem; color: var(--texte-doux); border-left: 2px solid var(--bord-fort); padding-left: 0.85rem; margin-top: 1.1rem; }

.secteurs { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; font-size: 0.86rem; color: var(--texte-doux); }
.etiquette-plate { background: var(--surface-bleue); border: 1px solid var(--bord); padding: 0.15rem 0.65rem; border-radius: var(--pilule); color: var(--texte); }

.illustration { margin: 0 0 2.5rem; }
.illustration img { border-radius: var(--rayon); width: 100%; }
.illustration figcaption { font-size: 0.78rem; color: var(--texte-doux); margin-top: 0.6rem; }
.illustration--large { margin: 2.5rem 0 0; }

.parcours--serre .parcours__etape { padding-bottom: 1.5rem; }

/* Espace entreprise */
.grille-services { display: grid; gap: 1.5rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.service {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: #fff; overflow: hidden; box-shadow: var(--ombre);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.service:hover { border-color: var(--bord-fort); transform: translateY(-3px); box-shadow: var(--ombre-survol); }
.service__image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-bleue); }
.service__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.service:hover .service__image img { transform: scale(1.05); }
.service__corps { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.service h2 { font-size: 1.15rem; margin-bottom: 0.45rem; }
.service h2 a { color: inherit; text-decoration: none; }
.service h2 a::after { content: ""; position: absolute; inset: 0; }
.service p { font-size: 0.93rem; }

/* Qualite */
.carte-statut { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.75rem; background: #fff; }
.carte-statut h3 { margin-bottom: 0.75rem; }
.carte-statut p { font-size: 0.92rem; }
.badge-certifie {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--accent-050); color: var(--accent);
  border: 1px solid var(--accent-100); border-radius: var(--pilule);
  padding: 0.25rem 0.8rem; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.85rem;
  font-family: var(--titre);
}
.badge-certifie::before { content: "✓"; }

/* Equipe */
.grille-equipe { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.membre img { aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon); margin-bottom: 0.9rem; }
.membre h3 { margin-bottom: 0.2rem; }
.membre__fonction { color: var(--accent); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.45rem; }
.membre p { font-size: 0.92rem; }

/* Filtres du catalogue */
.filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.filtres button {
  font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
  padding: 0.45rem 1rem; border-radius: var(--pilule);
  border: 1px solid var(--bord-fort); background: #fff; color: var(--nuit);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.filtres button:hover { border-color: var(--accent); color: var(--accent); }
.filtres button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Boutons flottants */
.flottants {
  position: fixed; right: clamp(0.85rem, 2.5vw, 1.5rem); bottom: clamp(0.85rem, 2.5vw, 1.5rem);
  z-index: 70; display: grid; gap: 0.6rem; justify-items: end;
}
.whatsapp {
  display: inline-flex; align-items: center;
  height: 3.5rem; padding: 0 1.05rem;
  background: #25d366; color: #0b3d20; text-decoration: none;
  border-radius: var(--pilule);
  font-weight: 700; font-size: 0.9rem; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(11, 61, 32, 0.6);
  transition: transform var(--transition), box-shadow var(--transition);
}
.whatsapp:hover, .whatsapp:focus-visible {
  color: #0b3d20; transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(11, 61, 32, 0.7);
}
.whatsapp svg { width: 1.4rem; height: 1.4rem; flex: none; }
/* Le libelle se deplie a la largeur de son propre texte : aucune valeur figee,
   donc aucun risque de le couper si on le reformule. */
.whatsapp span {
  display: block; max-width: 0; margin-left: 0;
  overflow: hidden; opacity: 0;
  transition: max-width 380ms cubic-bezier(.22, 1, .36, 1),
              margin-left 380ms cubic-bezier(.22, 1, .36, 1),
              opacity 200ms ease;
}
.whatsapp:hover span, .whatsapp:focus-visible span {
  max-width: 20rem; margin-left: 0.6rem; opacity: 1; transition-delay: 40ms;
}
.retour-haut {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--bord-fort); border-radius: 50%;
  color: var(--nuit); cursor: pointer; opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition), border-color var(--transition);
}
.retour-haut[data-visible="true"] { opacity: 1; visibility: visible; }
.retour-haut:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------ 9. Formulaires */
.formulaire { display: grid; gap: 1.1rem; }
.legende-champs { font-size: 0.85rem; color: var(--texte-doux); margin: 0; }
.champ { display: grid; gap: 0.35rem; margin: 0; }
.champ label { font-weight: 600; color: var(--nuit); font-size: 0.92rem; }
.champ .aide { font-size: 0.83rem; color: var(--texte-doux); }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 0.97rem; color: var(--nuit);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-xs);
  background: #fff; width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100);
}
.champ textarea { resize: vertical; }
.champ [aria-invalid="true"] { border-color: #b91c1c; }

.champ--radio { border: 0; padding: 0; margin: 0; }
.champ--radio legend { font-weight: 600; color: var(--nuit); font-size: 0.92rem; padding: 0; margin-bottom: 0.45rem; }
.options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.champ--radio .option {
  border: 1px solid var(--bord-fort); border-radius: var(--pilule);
  padding: 0.45rem 0.95rem; cursor: pointer; font-size: 0.92rem;
  transition: border-color var(--transition), background var(--transition);
}
.champ--radio .option:hover { border-color: var(--accent); }
.champ--radio .option:has(input:checked) { border-color: var(--accent); background: var(--accent-050); }
.option { display: flex; align-items: flex-start; gap: 0.45rem; font-weight: 400 !important; }
.option input { width: auto; flex: none; margin-top: 0.3rem; accent-color: var(--accent); }
.champ--case span { font-size: 0.89rem; color: var(--texte); }

.appat { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulaire__erreurs {
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  padding: 0.8rem 1rem; margin: 0; border-radius: var(--rayon-xs); font-size: 0.92rem;
}
.formulaire__replis { font-size: 0.92rem; color: var(--texte); margin: 0; }
.formulaire .bouton { justify-self: start; }

.duo__formulaire {
  background: #fff; border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: clamp(1.4rem, 3vw, 2.25rem);
}

/* ------------------------------------------------------------ 10. Animations */
/* Ecran d'introduction */
.intro { display: none; }
html.intro-active .intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 100; background: var(--nuit);
  animation: intro-sortie 420ms ease 980ms forwards;
}
html.intro-active .intro__marque { display: grid; justify-items: center; gap: 1.1rem; }
html.intro-active .intro__logo {
  width: clamp(11rem, 34vw, 15rem); height: auto;
  animation: intro-entree 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.intro-active .intro__monogramme {
  color: #fff; font-family: var(--titre); font-weight: 800;
  font-size: clamp(2.6rem, 11vw, 5rem); letter-spacing: 0.14em;
  animation: intro-entree 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.intro-active .intro__trait {
  display: block; height: 2px; width: 0; background: var(--accent-clair);
  animation: intro-trait 520ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both;
}
@keyframes intro-entree { from { opacity: 0; transform: translateY(0.6rem) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes intro-trait { from { width: 0; } to { width: 7rem; } }
@keyframes intro-sortie { to { opacity: 0; visibility: hidden; } }

/* Apparition au defilement */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal[data-vu="true"] {
  opacity: 1; transform: none;
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .reveal, .reveal[data-vu="true"] { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------------------------------------- 11. Responsive */
@media (min-width: 62rem) {
  .duo { grid-template-columns: 1.02fr 0.98fr; }
  .duo--inverse .duo__texte { order: 2; }
  .duo--inverse .duo__formulaire { order: 1; }
  .pied__haut { grid-template-columns: 21rem 1fr; gap: 4rem; }
  .appel__grille { grid-template-columns: 1fr auto; }
  .mise-en-page--fiche { grid-template-columns: minmax(0, 1fr) 20rem; }
  .entete-fiche__grille { grid-template-columns: 1.05fr 0.95fr; }
  .bande-confiance__grille { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; }
  .parcours { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
  .heros__reassurance { grid-template-columns: repeat(3, auto); justify-content: start; gap: 1.75rem; }
}

@media (max-width: 61.99rem) {
  .navigation { display: none; }
  .bascule-menu { display: block; }
  .entete__grille { justify-content: space-between; }
  .entete__actions .bouton { display: none; }
  .colonne-laterale { position: static; }
}

@media (max-width: 40rem) {
  .bandeau-haut__accroche { display: none; }
  .bandeau-haut__grille { justify-content: center; }
  .bandeau-haut__liens { gap: 1rem; font-size: 0.78rem; }
  .heros__actions .bouton { width: 100%; }
  .section__entete { align-items: start; }
  .whatsapp span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp, .whatsapp span { transition: none; }
  .whatsapp:hover span, .whatsapp:focus-visible span { max-width: 20rem; }
}

@media print {
  .bandeau-haut, .entete, .menu-mobile, .intro, .appel, .lien-evitement,
  .flottants, .marquee { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .pied { background: none; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* ------------------------------------------------- 12. Mouvements discrets */

/* Entree en cascade : demarre une fois l'ecran d'introduction retire. */
html:not(.intro-active) [data-entree] {
  animation: entree 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-entree="2"] { animation-delay: 90ms; }
[data-entree="3"] { animation-delay: 180ms; }
[data-entree="4"] { animation-delay: 270ms; }
[data-entree="5"] { animation-delay: 360ms; }
[data-entree="6"] { animation-delay: 450ms; }
@keyframes entree {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Halo violet qui derive : le fondu revient, mais lentement et hors du texte. */
@keyframes derive {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}

/* Soulignement des liens de navigation */
.navigation__declencheur { position: relative; }
.navigation__declencheur::after {
  content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.3rem;
  height: 1.5px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.navigation__declencheur:hover::after,
.navigation__declencheur[aria-expanded="true"]::after { transform: scaleX(1); }

.bandeau-haut__liens a { position: relative; }
.bandeau-haut__liens a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bandeau-haut__liens a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
  html:not(.intro-active) [data-entree] { animation: none; }
  .navigation__declencheur::after, .bandeau-haut__liens a::after { transition: none; }
}