/* =========================================================================
   ESBÉ CONSEILS — feuille de style du site
   -------------------------------------------------------------------------
   Pour changer l'apparence du site, modifiez d'abord les variables
   ci-dessous (couleurs, polices, largeurs). Tout le reste en découle.
   Concept : planches techniques. Fond clair, bandeaux bleu nuit tramés
   comme un calque, filets et légendes inspirés des plans techniques.
   ========================================================================= */

/* ---------- Polices (hébergées sur le site, aucun appel à Google) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/ibm-plex-sans-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- Variables de design : c'est ici qu'on personnalise ---------- */
:root {
  /* Couleurs de la marque (tirées du logo) */
  --bleu-nuit: #052A4D;        /* bandeaux sombres, pied de page */
  --marine: #083D6F;           /* titres, liens, couleur principale */
  --bleu: #1F6FB5;             /* boutons (contraste suffisant avec du blanc) */
  --bleu-vif: #3792D9;         /* traits, accents décoratifs */
  --ciel: #AFD6F2;             /* texte sur fond bleu nuit */

  /* Neutres, légèrement teintés de bleu */
  --encre: #14202C;            /* texte courant */
  --ardoise: #536173;          /* texte secondaire */
  --trait: #D6DEE6;            /* filets et bordures */
  --papier: #F3F6F9;           /* fond des sections alternées */
  --blanc: #FFFFFF;

  /* Polices */
  --police-titre: "Archivo", "Arial Narrow", Arial, sans-serif;
  --police-texte: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --police-legende: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;

  /* Échelle typographique */
  --t-h1: clamp(2.2rem, 0.9rem + min(3.4vw, 6vh), 3.5rem);
  --t-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --t-h3: 1.25rem;
  --t-texte: 1.0625rem;
  --t-petit: 0.9rem;
  --t-legende: 0.8rem;

  /* Mise en page */
  --largeur: 1180px;           /* largeur maximale du contenu */
  --largeur-texte: 64ch;
  --gouttiere: clamp(20px, 4vw, 48px);
  --section: clamp(64px, 9vw, 120px);  /* espace vertical des sections */
  --rayon: 2px;                /* coins quasi droits, comme un plan */
  --hauteur-entete: 76px;

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hauteur-entete) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--t-texte);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marine); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--bleu); }
:focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 3px; }
h1, h2, h3, h4 {
  font-family: var(--police-titre);
  color: var(--marine);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 720; font-stretch: 112%; letter-spacing: -0.015em; }
h2 { font-size: var(--t-h2); font-weight: 680; font-stretch: 108%; letter-spacing: -0.01em; }
h3 { font-size: var(--t-h3); font-weight: 620; font-stretch: 100%; line-height: 1.25; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--marine); color: var(--blanc); padding: 10px 16px; }
.lien-evitement:focus { top: 12px; color: var(--blanc); }

.conteneur {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-left: max(var(--gouttiere), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gouttiere), env(safe-area-inset-right, 0px));
}
.section { padding-block: var(--section); }
.section--papier { background: var(--papier); }
.section--nuit { background: var(--bleu-nuit); color: var(--ciel); }
.section--nuit h2, .section--nuit h3 { color: var(--blanc); }

/* Trame de calque (bandeaux sombres) */
.trame {
  background-image:
    linear-gradient(rgba(175, 214, 242, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(175, 214, 242, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
}

.surtitre {
  font-family: var(--police-legende);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--bleu);
  letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 10px;
}
.surtitre::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.section--nuit .surtitre, .bandeau-page .surtitre { color: var(--bleu-vif); }

.entete-section { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.entete-section .chapo { color: var(--ardoise); font-size: 1.125rem; max-width: var(--largeur-texte); }
.section--nuit .entete-section .chapo { color: var(--ciel); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font-family: var(--police-texte); font-weight: 600; font-size: 0.975rem;
  text-decoration: none; border-radius: var(--rayon);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.bouton--plein { background: var(--bleu); color: var(--blanc); }
.bouton--plein:hover { background: var(--marine); color: var(--blanc); }
.bouton--contour { border-color: var(--marine); color: var(--marine); background: transparent; }
.bouton--contour:hover { background: var(--marine); color: var(--blanc); }
.section--nuit .bouton--contour, .heros .bouton--contour { border-color: rgba(175, 214, 242, .55); color: var(--blanc); }
.section--nuit .bouton--contour:hover, .heros .bouton--contour:hover { background: var(--blanc); color: var(--bleu-nuit); border-color: var(--blanc); }
.groupe-boutons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- En-tête (généré par main.js depuis config.js) ---------- */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--blanc);
}
.site-entete {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--trait);
  min-height: var(--hauteur-entete);
}
.site-entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--hauteur-entete); }
.site-entete .logo img { height: 46px; width: auto; }
.nav-principale { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.nav-principale ul { list-style: none; display: flex; gap: clamp(16px, 2.2vw, 30px); }
.nav-principale a:not(.bouton) {
  color: var(--encre); text-decoration: none; font-weight: 500; font-size: 0.97rem;
  padding-block: 6px; border-bottom: 2px solid transparent;
}
.nav-principale a:not(.bouton):hover { color: var(--marine); border-bottom-color: var(--trait); }
.nav-principale a[aria-current="page"] { color: var(--marine); border-bottom-color: var(--bleu-vif); }
.nav-principale .bouton { min-height: 42px; padding: 9px 18px; }
.bouton-menu {
  display: none; width: 46px; height: 46px; border: 1px solid var(--trait); background: var(--blanc);
  border-radius: var(--rayon); cursor: pointer; align-items: center; justify-content: center;
}
.bouton-menu .barres, .bouton-menu .barres::before, .bouton-menu .barres::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--marine); position: relative; transition: transform .2s, background-color .2s;
}
.bouton-menu .barres::before { position: absolute; top: -6px; }
.bouton-menu .barres::after { position: absolute; top: 6px; }
.bouton-menu[aria-expanded="true"] .barres { background: transparent; }
.bouton-menu[aria-expanded="true"] .barres::before { transform: translateY(6px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] .barres::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 920px) {
  .bouton-menu { display: inline-flex; }
  .nav-principale {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanc); border-bottom: 1px solid var(--trait);
    padding: 8px max(var(--gouttiere), env(safe-area-inset-right, 0px)) 20px max(var(--gouttiere), env(safe-area-inset-left, 0px));
    box-shadow: 0 18px 30px -20px rgba(5, 42, 77, .35);
  }
  .nav-principale[data-ouvert="false"] { display: none; }
  .nav-principale ul { flex-direction: column; gap: 0; }
  .nav-principale ul a:not(.bouton) { display: block; padding: 14px 0; border-bottom: 1px solid var(--trait); }
  .nav-principale a[aria-current="page"] { border-bottom-color: var(--trait); box-shadow: inset 3px 0 0 var(--bleu-vif); padding-left: 12px !important; }
  .nav-principale .bouton { margin-top: 16px; }
}

/* ---------- Héros de l'accueil ---------- */
.heros { background: var(--bleu-nuit); color: var(--ciel); position: relative; }
.heros__grille {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin-inline: auto;
}
.heros__texte {
  padding-block: clamp(36px, 7vh, 96px) clamp(40px, 8vh, 104px);
  padding-left: max(var(--gouttiere), env(safe-area-inset-left, 0px));
  padding-right: clamp(24px, 4vw, 56px);
  display: grid; align-content: center; gap: clamp(16px, 2.6vh, 26px); position: relative; z-index: 1;
}
.heros h1 { color: var(--blanc); }
.heros__chapo { font-size: 1.15rem; max-width: 46ch; color: var(--ciel); }
.heros__visuel { position: relative; min-height: 360px; }
.heros__visuel picture, .heros__visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heros__visuel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bleu-nuit) 0%, rgba(5, 42, 77, 0) 22%);
  pointer-events: none;
}
/* Pleine largeur du visuel jusqu'au bord droit de l'écran */
@media (min-width: 1221px) {
  .heros__grille { max-width: none; grid-template-columns: minmax(0, calc((100vw - var(--largeur)) / 2 + var(--largeur) * 0.54)) minmax(0, 1fr); }
  .heros__texte { padding-left: calc((100vw - var(--largeur)) / 2); }
}


/* Animation d'ouverture du héros */
@media (prefers-reduced-motion: no-preference) {
  .heros__texte > * { animation: monter .7s cubic-bezier(.2, .7, .2, 1) both; }
  .heros__texte > *:nth-child(2) { animation-delay: .08s; }
  .heros__texte > *:nth-child(3) { animation-delay: .16s; }
  .heros__texte > *:nth-child(4) { animation-delay: .24s; }
}
@keyframes monter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .heros__grille { grid-template-columns: minmax(0, 1fr); }
  .heros__texte { padding-right: max(var(--gouttiere), env(safe-area-inset-right, 0px)); padding-bottom: 48px; }
  .heros__visuel { min-height: 0; max-width: 100%; }
  .heros__visuel picture { position: relative; display: block; height: auto; aspect-ratio: 4 / 3; }
  .heros__visuel::after { background: linear-gradient(180deg, var(--bleu-nuit) 0%, rgba(5, 42, 77, 0) 25%); }

}
.apres-heros { padding-top: var(--section); }

/* ---------- Domaines d'intervention ---------- */
.domaines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.domaine { display: grid; grid-template-rows: auto 1fr; gap: 20px; }
.domaine__image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--papier); max-width: 100%; }
.domaine__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.domaine:hover .domaine__image img { transform: scale(1.035); }
.domaine__corps { display: grid; gap: 10px; align-content: start; border-top: 1.5px solid var(--marine); padding-top: 18px; }
.domaine__corps p { color: var(--ardoise); }
.lien-fleche { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; margin-top: 4px; }
.lien-fleche::after { content: ""; width: 18px; height: 1.5px; background: currentColor; transition: width .2s; }
.lien-fleche:hover::after { width: 28px; }
@media (max-width: 900px) { .domaines { grid-template-columns: 1fr; } .domaine { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto; align-items: start; } }
@media (max-width: 560px) { .domaine { grid-template-columns: 1fr; } }

/* ---------- Missions : phases de l'AMO ---------- */
.missions { display: grid; gap: clamp(56px, 7vw, 88px); }
.mission-titre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: end; margin-bottom: 32px; }
.mission-titre p { color: var(--ardoise); max-width: 52ch; }
@media (max-width: 760px) { .mission-titre { grid-template-columns: 1fr; gap: 12px; } }

.phasage { border: 1.5px solid var(--marine); background: var(--blanc); }
.phasage__barre { display: grid; grid-template-columns: 2fr 3fr 4fr; }
.phase { padding: 22px 22px 26px; border-left: 1px solid var(--trait); display: grid; gap: 14px; align-content: start; min-width: 0; }
.phase:first-child { border-left: 0; }
.phase__entete { display: flex; align-items: baseline; gap: 12px; }
.phase__num {
  font-family: var(--police-titre); font-stretch: 120%; font-weight: 700; font-size: 1.6rem; line-height: 1;
  color: var(--bleu-vif); font-variant-numeric: tabular-nums;
}
.phase__jalon { height: 10px; background: var(--marine); position: relative; }
.phase:nth-child(1) .phase__jalon { background: var(--ciel); }
.phase:nth-child(2) .phase__jalon { background: var(--bleu-vif); }
.phase__jalon::after { content: ""; position: absolute; right: -1px; top: -5px; width: 2px; height: 20px; background: var(--marine); }
.phase ul { list-style: none; display: grid; gap: 8px; }
.phase li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; font-size: 0.97rem; }
.code-mop {
  font-family: var(--police-legende); font-weight: 600; font-size: 0.72rem; letter-spacing: .05em;
  color: var(--marine); border: 1px solid var(--trait); padding: 1px 6px; min-width: 42px; text-align: center;
  background: var(--papier);
}
.phasage__legende { border-top: 1px solid var(--trait); padding: 10px 22px; font-family: var(--police-legende); font-size: var(--t-legende); color: var(--ardoise); }
@media (max-width: 860px) {
  .phasage__barre { grid-template-columns: 1fr; }
  .phase { border-left: 0; border-top: 1px solid var(--trait); }
  .phase:first-child { border-top: 0; }
}

.ingenierie { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.liste-points { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--trait); }
.liste-points li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--trait); }
.liste-points svg { width: 22px; height: 22px; color: var(--bleu-vif); margin-top: 2px; }
.liste-points strong { display: block; color: var(--marine); font-weight: 600; }
.liste-points span { color: var(--ardoise); }
.ingenierie__image { position: relative; max-width: 100%; }
.ingenierie__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ingenierie__image figcaption { font-family: var(--police-legende); font-size: var(--t-legende); color: var(--ardoise); margin-top: 10px; }
@media (max-width: 860px) { .ingenierie { grid-template-columns: 1fr; } }

/* ---------- Repères chiffrés ---------- */
.reperes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(175, 214, 242, .25); }
.repere { padding: 28px 24px 8px 0; display: grid; gap: 8px; align-content: start; border-right: 1px solid rgba(175, 214, 242, .18); padding-left: 24px; }
.repere:first-child { padding-left: 0; }
.repere:last-child { border-right: 0; }
.repere__valeur { font-family: var(--police-titre); font-stretch: 118%; font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); color: var(--blanc); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.repere__valeur small { font-size: .5em; font-weight: 600; color: var(--bleu-vif); margin-left: 4px; }
.repere p:not(.repere__valeur) { font-size: 0.95rem; color: var(--ciel); }
.reperes-note { margin-top: 28px; font-family: var(--police-legende); font-size: var(--t-legende); color: rgba(175, 214, 242, .75); }
@media (max-width: 860px) {
  .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .repere { padding-left: 0; padding-right: 16px; border-right: 0; border-bottom: 1px solid rgba(175, 214, 242, .18); padding-bottom: 24px; }
  .repere:nth-child(even) { padding-left: 16px; border-left: 1px solid rgba(175, 214, 242, .18); }
}

/* ---------- Approche ---------- */
.engagements { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: eng; }
.engagement { padding: 4px 32px 4px 0; display: grid; gap: 14px; align-content: start; }
.engagement + .engagement { padding-left: 32px; border-left: 1px solid var(--trait); }
.engagement svg { width: 36px; height: 36px; color: var(--marine); }
.engagement p { font-size: 1.1rem; color: var(--encre); }
@media (max-width: 860px) {
  .engagements { grid-template-columns: 1fr; }
  .engagement, .engagement + .engagement { padding: 22px 0; border-left: 0; border-top: 1px solid var(--trait); }
}

/* ---------- Bandeau d'appel au contact ---------- */
.appel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.appel h2 { max-width: 16ch; }
.appel p { margin-top: 16px; max-width: 48ch; }
.appel__actions { display: grid; gap: 18px; justify-items: start; }
.adresse-mail { font-family: var(--police-titre); font-stretch: 110%; font-weight: 600; font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); color: var(--blanc); text-decoration: none; border-bottom: 1.5px solid var(--bleu-vif); padding-bottom: 2px; overflow-wrap: anywhere; }
.adresse-mail:hover { color: var(--ciel); }
@media (max-width: 760px) { .appel { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Bandeau de titre des pages intérieures ---------- */
.bandeau-page { background: var(--bleu-nuit); color: var(--ciel); padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6vw, 80px); }
.bandeau-page .conteneur { display: grid; gap: 20px; }
.bandeau-page h1 { color: var(--blanc); max-width: 18ch; }
.bandeau-page p.chapo { font-size: 1.15rem; max-width: 60ch; }
.fil-ariane { font-family: var(--police-legende); font-size: var(--t-petit); }
.fil-ariane ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fil-ariane li + li::before { content: "/"; margin-right: 8px; color: rgba(175, 214, 242, .5); }
.fil-ariane a { color: var(--ciel); }

/* ---------- Page réalisations ---------- */
.savoir-faire { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--marine); background: var(--blanc); }
.savoir-faire li { padding: 26px 24px; display: grid; gap: 10px; align-content: start; border-left: 1px solid var(--trait); }
.savoir-faire li:first-child { border-left: 0; }
.savoir-faire p { color: var(--ardoise); font-size: 0.97rem; }
@media (max-width: 860px) { .savoir-faire { grid-template-columns: 1fr; } .savoir-faire li { border-left: 0; border-top: 1px solid var(--trait); } .savoir-faire li:first-child { border-top: 0; } }

.dossiers { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.sommaire { position: sticky; top: calc(var(--hauteur-entete) + 32px + env(safe-area-inset-top, 0px)); font-family: var(--police-legende); }
.sommaire p { font-weight: 600; color: var(--ardoise); font-size: var(--t-petit); margin-bottom: 12px; }
.sommaire ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--trait); }
.sommaire a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ardoise); text-decoration: none; font-size: 0.95rem; line-height: 1.35; }
.sommaire a:hover { color: var(--marine); }
.sommaire a.actif { color: var(--marine); border-left-color: var(--bleu-vif); font-weight: 600; }
@media (max-width: 960px) { .dossiers { grid-template-columns: 1fr; } .sommaire { display: none; } }

.dossier { display: grid; gap: 24px; padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--trait); }
.dossier:first-child { border-top: 0; padding-top: 0; }
.dossier__entete { display: grid; gap: 10px; }
.dossier__entete h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); font-stretch: 106%; }
.dossier__entete .surtitre { color: var(--ardoise); }
.dossier__corps { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.dossier__corps--seul { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.liste-puces { list-style: none; display: grid; gap: 10px; }
.liste-puces li { padding-left: 22px; position: relative; }
.liste-puces li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: var(--bleu-vif); }
.dossier figure { margin: 0; max-width: 100%; }
.dossier figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dossier figcaption { font-family: var(--police-legende); font-size: var(--t-legende); color: var(--ardoise); margin-top: 8px; }
.reference { border: 1px solid var(--trait); background: var(--papier); padding: 18px 20px; display: grid; gap: 12px; }
.reference__titre { font-family: var(--police-legende); font-weight: 600; font-size: var(--t-petit); color: var(--marine); }
.reference dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px 20px; }
.reference dt { font-family: var(--police-legende); font-size: var(--t-legende); color: var(--ardoise); }
.reference dd { margin: 0; font-family: var(--police-titre); font-stretch: 112%; font-weight: 650; font-size: 1.35rem; color: var(--marine); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .dossier__corps { grid-template-columns: 1fr; } .dossier figure { order: -1; } }

/* ---------- Page cabinet : parcours ---------- */
.presentation { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.presentation .texte { display: grid; gap: 18px; font-size: 1.1rem; }
.fiche { border: 1.5px solid var(--marine); background: var(--blanc); }
.fiche__titre { background: var(--marine); color: var(--blanc); padding: 12px 18px; font-family: var(--police-titre); font-stretch: 112%; font-weight: 650; }
.fiche dl { margin: 0; display: grid; grid-template-columns: auto 1fr; font-size: 0.95rem; }
.fiche dt, .fiche dd { margin: 0; padding: 12px 18px; border-top: 1px solid var(--trait); }
.fiche dt { font-family: var(--police-legende); color: var(--ardoise); border-right: 1px solid var(--trait); }
.fiche dd { color: var(--marine); font-weight: 500; }
@media (max-width: 860px) { .presentation { grid-template-columns: 1fr; } }

.parcours { list-style: none; display: grid; gap: 0; position: relative; }
.etape { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 32px; padding-block: 32px; border-top: 1px solid var(--trait); }
.etape:first-child { border-top: 1.5px solid var(--marine); }
.etape__dates { font-family: var(--police-titre); font-stretch: 118%; font-weight: 650; color: var(--bleu); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.etape__corps { display: grid; gap: 10px; }
.etape__structure { color: var(--ardoise); font-size: 0.97rem; }
.etape .liste-puces { margin-top: 6px; }
@media (max-width: 680px) { .etape { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Page contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.formulaire { display: grid; gap: 20px; }
.champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .champs-duo { grid-template-columns: 1fr; } }
.champ { display: grid; gap: 8px; min-width: 0; }
.champ label { font-weight: 600; font-size: 0.95rem; color: var(--marine); }
.champ .facultatif { font-weight: 400; color: var(--ardoise); }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 1rem; color: var(--encre); background: var(--blanc);
  border: 1px solid #B7C4D1; border-radius: var(--rayon); padding: 12px 14px; width: 100%; min-height: 48px;
}
.champ textarea { min-height: 160px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--bleu-vif); outline-offset: 0; border-color: var(--bleu-vif); }
.champ [aria-invalid="true"] { border-color: #B42318; }
.erreur { color: #B42318; font-size: 0.875rem; }
.case { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 0.93rem; color: var(--ardoise); }
.case input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--bleu); }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message-formulaire { outline: none;  padding: 16px 18px; border: 1px solid var(--trait); border-left: 3px solid var(--bleu-vif); background: var(--papier); }
.message-formulaire[data-type="erreur"] { border-left-color: #B42318; }
.coordonnees { display: grid; gap: 28px; }
.coordonnees dl { margin: 0; display: grid; gap: 18px; }
.coordonnees dt { font-family: var(--police-legende); font-size: var(--t-petit); color: var(--ardoise); }
.coordonnees dd { margin: 4px 0 0; font-weight: 500; color: var(--marine); overflow-wrap: anywhere; }
.bouton-copier { margin-left: 10px; font: inherit; font-size: 0.85rem; background: none; border: 1px solid var(--trait); padding: 3px 10px; cursor: pointer; color: var(--marine); border-radius: var(--rayon); }
.bouton-copier:hover { border-color: var(--marine); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Texte long (mentions légales) ---------- */
.texte-long { max-width: 760px; display: grid; gap: 18px; }
.texte-long h2 { font-size: 1.5rem; margin-top: 24px; }
.texte-long ul { padding-left: 20px; display: grid; gap: 6px; }
.a-completer { background: #FFF4D6; padding: 0 4px; }

/* ---------- Pied de page ---------- */
.site-pied { background: var(--bleu-nuit); color: var(--ciel); padding-block: 64px 32px; font-size: 0.95rem; }
.site-pied .conteneur { display: grid; gap: 40px; }
.site-pied__haut { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.site-pied__haut img { height: 52px; width: auto; margin-bottom: 18px; }
.site-pied__haut p { max-width: 36ch; }
.site-pied h2 { font-family: var(--police-legende); font-size: var(--t-petit); font-weight: 600; color: var(--blanc); margin-bottom: 14px; font-stretch: normal; letter-spacing: .02em; }
.site-pied ul { list-style: none; display: grid; gap: 8px; }
.site-pied a { color: var(--ciel); text-decoration: none; }
.site-pied a:hover { color: var(--blanc); text-decoration: underline; }
.site-pied__bas { border-top: 1px solid rgba(175, 214, 242, .2); padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.85rem; color: rgba(175, 214, 242, .8); }
@media (max-width: 760px) { .site-pied__haut { grid-template-columns: 1fr; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Petits utilitaires ---------- */
.pile { display: grid; gap: 22px; align-content: start; }
.mission-titre--simple { grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
.reperes-note a { color: inherit; }
.phasage__barre { list-style: none; margin: 0; padding: 0; }
.phase h4 { font-size: 1.15rem; font-weight: 640; font-stretch: 104%; }
.coordonnees h2 { font-size: 1.6rem; margin-top: 12px; }
.reference .liste-puces { font-size: .95rem; }


/* ---------- Missions : deux piliers ---------- */
.piliers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); align-items: start; }
.pilier { display: grid; gap: 24px; align-content: start; }
.pilier__entete { display: grid; gap: 8px; padding-bottom: 20px; border-bottom: 2px solid var(--marine); }
.pilier__entete h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); }
.pilier__entete p { color: var(--ardoise); }
.etapes-amo { list-style: none; margin: 0; padding: 0; display: grid; }
.etapes-amo li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--trait); }
.etapes-amo li:first-child { padding-top: 0; }
.etapes-amo__num { font-family: var(--police-titre); font-stretch: 118%; font-weight: 700; font-size: 1.5rem; line-height: 1.1; color: var(--bleu-vif); font-variant-numeric: tabular-nums; }
.etapes-amo h4 { font-size: 1.1rem; font-weight: 640; margin-bottom: 2px; }
.etapes-amo p { color: var(--ardoise); }
.pilier .liste-points { border-top: 0; }
.pilier .liste-points li:first-child { padding-top: 0; }
.pilier__image { margin: 0; max-width: 100%; }
.pilier__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 70%; }
.pilier__image--bandeau img { aspect-ratio: auto; object-fit: contain; max-width: 588px; background: var(--blanc); }
@media (max-width: 900px) { .piliers { grid-template-columns: minmax(0, 1fr); } }

/* ---------- En bref : chiffres et infos clés ---------- */
.bref { display: grid; gap: clamp(32px, 4vw, 48px); }
.bref__entete { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.bref__entete .entete-section { margin-bottom: 0; }
.bref__intro { display: grid; gap: 14px; justify-items: start; color: var(--ardoise); max-width: 44ch; }
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--marine); background: var(--blanc); }
.chiffre { display: grid; gap: 10px; align-content: start; padding: 28px 24px 30px; border-left: 1px solid var(--trait); }
.chiffre:first-child { border-left: 0; }
.chiffre__valeur { font-family: var(--police-titre); font-stretch: 118%; font-weight: 700; font-size: clamp(2.2rem, 1.5rem + 2vw, 3.2rem); line-height: 1; color: var(--marine); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chiffre__valeur small { font-size: .45em; font-weight: 600; color: var(--bleu-vif); margin-left: 6px; }
.chiffre p:not(.chiffre__valeur) { font-size: 0.95rem; color: var(--ardoise); }
.infos { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.info { display: grid; gap: 6px; align-content: start; padding-top: 18px; border-top: 1px solid var(--trait); }
.info dt { font-family: var(--police-legende); font-size: var(--t-petit); font-weight: 500; color: var(--bleu); }
.info dd { margin: 0; font-family: var(--police-titre); font-stretch: 104%; font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: var(--marine); }
.bref__note { font-family: var(--police-legende); font-size: var(--t-legende); color: var(--ardoise); }
@media (max-width: 900px) {
  .bref__entete { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffre:nth-child(3) { border-left: 0; }
  .chiffre:nth-child(n+3) { border-top: 1px solid var(--trait); }
  .infos { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 460px) {
  .chiffres { grid-template-columns: minmax(0, 1fr); }
  .chiffre { border-left: 0; }
  .chiffre:nth-child(n+2) { border-top: 1px solid var(--trait); }
}