/* ============================================================
   Jérémi Morison, conseil en gestion de patrimoine
   Bleu clair, papier chaud, formes douces.
   ============================================================ */

/* ---------- Cinzel ----------
   Police de titrage de Natanael Gama, sous licence SIL Open Font License.
   Elle est hébergée sur votre serveur plutôt que chargée depuis Google :
   aucune donnée de vos visiteurs n'est transmise à un tiers, ce qui vous
   met à l'abri du reproche fait à Google Fonts au titre du RGPD.

   C'est une police variable : un seul fichier de 46 Ko couvre toutes les
   graisses de 400 à 900. */

@font-face {
  font-family: "Cinzel";
  src: url("fonts/cinzel.woff2") format("woff2-variations"),
       url("fonts/cinzel.ttf")   format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Figtree ----------
   Police de texte d'Erik Kennedy, sous licence SIL Open Font License.
   Hébergée ici pour la même raison que Cinzel. Police variable : un seul
   fichier de 27 Ko couvre les graisses de 300 à 900. */
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2-variations"),
       url("fonts/figtree.ttf")   format("truetype-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --combine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.6 1 1 0 0 1-.25 1z' fill='%23000'/%3E%3C/svg%3E");
  --fond:        #FBFAF7;
  --ciel:        #E8F0F7;
  --ciel-fonce:  #D2E1EE;
  --encre:       #1C2B38;
  --bleu:        #2A6496;
  --bleu-profond:#234E75;
  --bleu-doux:   #8FB4D2;
  --ambre:       #8A5A1B;
  --ambre-pale:  #FBEFD9;
  --gris:        #56616B;
  --trait:       #DCE5EC;

  /* ---------- Accents des vignettes ----------
     Six teintes sourdes, choisies pour tenir ensemble avec le bleu et le
     papier chaud du site. Chacune vient avec son fond très pâle : c'est le
     couple trait + fond qui colore une vignette, jamais un aplat vif. */
  --a1:      #2A6496;  --a1-pale: #E4EEF7;   /* bleu, la teinte du site */
  --a2:      #1F7A6F;  --a2-pale: #DFF0ED;   /* vert d'eau              */
  --a3:      #8A5A1B;  --a3-pale: #FBEFD9;   /* ambre                   */
  --a4:      #A8503C;  --a4-pale: #FAE7E1;   /* terre cuite             */
  --a5:      #6B4A72;  --a5-pale: #F0E7F2;   /* prune                   */
  --a6:      #5F7038;  --a6-pale: #EDF1E2;   /* olive                   */

  --titre: "Cinzel", Georgia, "Times New Roman", serif;
  --texte: "Figtree", -apple-system, "Segoe UI", Helvetica, sans-serif;

  --marge: clamp(1.25rem, 5vw, 3.5rem);
  --large: 1280px;
  --arrondi: 14px;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--bleu); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

.contenu {
  width: 100%;
  max-width: var(--large);
  margin: 0 auto;
  padding-left: var(--marge);
  padding-right: var(--marge);
}

/* ---------- Titres ---------- */

h1, h2 {
  font-family: var(--titre);
  font-weight: 500;
  /* Cinzel s'affiche en capitales : sans jambages descendants, un interligne
     large laisse un vide entre les lignes. On le resserre, et on retire le
     resserrement des lettres, qui dessert une inscriptionnelle. */
  line-height: 1.14;
  letter-spacing: 0;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h3 {
  font-family: var(--texte);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 0 0 0.55em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.95rem, 4.4vw, 2.95rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); }

p { margin: 0 0 0.9em; }

.surtitre { font-size: 0.94rem; font-weight: 600; color: var(--ambre); margin: 0 0 0.85rem; }
.chapo { font-size: 1.1rem; line-height: 1.55; color: var(--gris); max-width: 58ch; }
.mesure { max-width: 64ch; }

.a-remplir {
  background: var(--ambre-pale);
  box-shadow: 0 0 0 3px var(--ambre-pale);
  border-radius: 3px;
  color: var(--encre);   /* lisible aussi quand le surlignage est posé sur un fond sombre */
}

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

.bouton {
  display: inline-block;
  font-family: var(--texte);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.8em 1.7em;
  border: 1.5px solid var(--bleu);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.bouton--plein {
  background-color: var(--bleu);
  background-image: linear-gradient(135deg, #3579A6 0%, #2A6496 52%, #234E75 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px -8px rgba(28, 43, 56, 0.55);
}

.bouton--plein:hover {
  background-image: linear-gradient(135deg, #2A6496 0%, #234E75 52%, #1E4266 100%);
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(28, 43, 56, 0.65);
  transform: translateY(-1px);
}
.bouton--vide { background: transparent; color: var(--bleu); }
.bouton--vide:hover { background: var(--bleu); color: #fff; transform: translateY(-1px); }

/* Bouton posé sur un fond sombre */
.bouton--clair {
  background-color: #fff;
  background-image: none;
  color: var(--bleu-profond);
  border-color: #fff;
  box-shadow: none;
}
.bouton--clair:hover {
  background-color: var(--ciel);
  background-image: none;
  border-color: var(--ciel);
  transform: translateY(-1px);
}

.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.8rem; }

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

.entete { background: var(--fond); position: sticky; top: 0; z-index: 30; }

.entete__barre {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

/* La marque est un lien vers l'accueil, ce que beaucoup de visiteurs
   ignorent. Un simple changement de couleur au survol le signale, sans
   rien déplacer : dans un en-tête collant, visible en permanence, tout
   mouvement finit par agacer. */
.marque {
  text-decoration: none;
  color: var(--encre);
  line-height: 1.25;
  justify-self: start;
  transition: color 0.28s ease;
}
.marque strong {
  display: block;
  font-family: var(--titre);
  font-size: 1.28rem;
  font-weight: 500;
  transition: color 0.28s ease;
}
.marque em {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  color: var(--gris);
  transition: color 0.28s ease;
}

.marque:hover strong { color: var(--bleu); }
.marque:hover em { color: var(--bleu-profond); }

.nav { display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap; }

.nav a:not(.bouton) {
  position: relative;
  font-size: 0.97rem;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 6px;
}

/* Trait animé sous les liens du menu.
   Au survol il se déploie de la gauche vers la droite ; quand le curseur
   s'en va, il se rétracte vers la droite. Ce changement de point d'ancrage
   est ce qui donne l'impression d'un mouvement continu plutôt que d'un
   aller-retour. */
.nav a:not(.bouton)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav a:not(.bouton):hover::after,
.nav a:not(.bouton):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav a:not(.bouton):hover { color: var(--bleu); }

/* Page courante : le trait reste affiché en permanence. */
.nav a[aria-current="page"]:not(.bouton) { color: var(--bleu); font-weight: 600; }
.nav a[aria-current="page"]:not(.bouton)::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.entete__cta { justify-self: end; font-size: 0.92rem; padding: 0.55em 1.25em; white-space: nowrap; }

/* En dessous de 1120 px les trois zones ne tiennent plus sur une ligne :
   la marque et le bouton se partagent le haut, le menu passe dessous. */
@media (max-width: 1120px) {
  .entete__barre { grid-template-columns: 1fr auto; gap: 0.9rem 1.5rem; }
  .nav { grid-column: 1 / -1; gap: 1.3rem; }
}

@media (max-width: 520px) {
  .nav { gap: 0.8rem 1.05rem; }
  .nav a:not(.bouton) { font-size: 0.93rem; }
}

/* ---------- Sections ---------- */

.section { padding-top: clamp(3.2rem, 7vw, 5.2rem); padding-bottom: clamp(3.2rem, 7vw, 5.2rem); }
.section--ciel { background: var(--ciel); }
.section--bleu { background: var(--bleu-profond); color: #DCE9F3; }
.section--bleu h2, .section--bleu h3 { color: #fff; }
.section--bleu .chapo { color: #B6CEE0; }
.section--bleu .surtitre { color: #E7BE7E; }
.section__tete { max-width: 60ch; margin-bottom: 2.6rem; }

/* ---------- Ouverture ---------- */

.ouverture { padding-top: clamp(2.2rem, 5vw, 3.8rem); padding-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.ouverture h1 { max-width: 19ch; }
.ouverture .chapo { margin-top: 1.1rem; }
.ouverture__grille { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

.portrait {
  border-radius: 24px;
  overflow: hidden;
  background: var(--ciel);
  box-shadow: 0 18px 40px -24px rgba(28,43,56,0.45);
  position: relative;
  z-index: 2;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

/* Décor : carrés aux angles arrondis, en trait fin, posés autour du portrait. */

.portrait-decor { position: relative; }

.portrait-decor__forme {
  position: absolute;
  border: 1.5px solid var(--bleu-doux);
  border-radius: 22px;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  /* Dérive lente mais perceptible. Seules les formes bougent, jamais la
     photo : un portrait qui flotte donnerait un air de bannière publicitaire.
     L'amplitude précédente, 6 px sur 18 s, était invisible à l'œil. */
  animation: derive 11s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes derive {
  from { transform: translate(-9px, 7px) rotate(-0.8deg); }
  to   { transform: translate(11px, -12px) rotate(1.1deg); }
}

.portrait-decor__forme--a {
  inset: -1.4rem -1.4rem 3.5rem 3.5rem;   /* décalé vers le haut à droite */
}

.portrait-decor__forme--b {
  width: 7.5rem; height: 7.5rem;
  left: -2.6rem; bottom: -2.2rem;
  border-radius: 20px;
  border-color: var(--ambre);
  opacity: 0.35;
  /* Durées et retards différents : sans cela les trois formes bougeraient
     à l'unisson, ce qui se remarque tout de suite. */
  animation-duration: 14s;
  animation-delay: -5s;
}

.portrait-decor__forme--c {
  width: 3.4rem; height: 3.4rem;
  right: -1.9rem; bottom: 22%;
  border-radius: 11px;
  background: var(--ciel);
  border-color: transparent;
  opacity: 0.9;
  animation-duration: 9s;
  animation-delay: -2s;
}

@media (max-width: 820px) {
  .portrait-decor { max-width: 300px; }
  .portrait-decor__forme--a { inset: -1rem -1rem 2.5rem 2.5rem; }
  .portrait-decor__forme--b { width: 5rem; height: 5rem; left: -1.4rem; bottom: -1.4rem; }
  .portrait-decor__forme--c { width: 2.4rem; height: 2.4rem; right: -1rem; }
}

/* Titre de section accompagné d'une photo posée sur le côté */

.tete-photo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.tete-photo__image {
  margin: 0;
  width: clamp(140px, 15vw, 190px);
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 14px 32px -20px rgba(0,0,0,0.6);
}
.tete-photo__image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }

@media (max-width: 700px) {
  .tete-photo { grid-template-columns: 1fr; }
  .tete-photo__image { width: 130px; }
}

/* Texte à gauche, photo posée à côté sur toute la hauteur du bloc */

.texte-photo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.texte-photo__texte { max-width: 64ch; }
.texte-photo__texte h2 { margin-bottom: 1rem; }
.texte-photo__texte p:last-child { margin-bottom: 0; }

.texte-photo__image {
  margin: 0;
  width: clamp(180px, 20vw, 260px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 36px -22px rgba(28,43,56,0.65);
}
.texte-photo__image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }

@media (max-width: 760px) {
  .texte-photo { grid-template-columns: 1fr; gap: 1.8rem; }
  .texte-photo__image { width: 150px; order: -1; }
}

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

/* ---------- Ouverture de « Mon accompagnement » ----------
   Le titre de la page et l'engagement sur les honoraires. À droite, le même
   engagement repris sous forme de note : trois lignes, comme un relevé, pour
   que le visiteur voie d'un coup d'œil ce qu'il paie et quand. */

.engagement {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3rem, 7vw, 5.4rem);
  padding-bottom: clamp(3.2rem, 7vw, 5.6rem);
  background:
    radial-gradient(60rem 30rem at 100% 0%, var(--ciel) 0%, transparent 60%),
    var(--fond);
}

.engagement__grille {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.engagement h1 { max-width: 17ch; color: var(--bleu-profond); }

.engagement__promesse {
  max-width: 58ch;
  margin: 1.4rem 0 0;
  padding-left: 1.3rem;
  border-left: 3px solid var(--ambre);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: var(--gris);
}
.engagement__promesse strong {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--encre);
}

/* La note : une carte blanche, légèrement inclinée, bordée en haut d'un
   liseré ambre. */
.note {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: #fff;
  border-radius: calc(var(--arrondi) + 4px);
  box-shadow: 0 30px 60px -38px rgba(28,43,56,0.55), 0 2px 10px -6px rgba(28,43,56,0.2);
  border-top: 5px solid var(--ambre);
  transform: rotate(1.2deg);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.note:hover { transform: rotate(0deg) translateY(-3px); }

.note__titre {
  margin: 0 0 1.2rem;
  padding-bottom: 1.1rem;
  border-bottom: 2px dashed var(--trait);
  font-family: var(--titre);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--bleu-profond);
}

.note__lignes { margin: 0; display: grid; gap: 0.95rem; }
.note__lignes > div {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
/* Les pointillés qui relient l'intitulé au montant, comme sur une facture */
.note__lignes > div::after {
  content: "";
  order: 1;
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--ciel-fonce);
  transform: translateY(-0.25em);
}
.note__lignes dt { display: flex; white-space: nowrap; align-items: baseline; gap: 0.6rem; font-weight: 500; }
.note__lignes dd { order: 2; margin: 0; text-align: right; white-space: nowrap; font-size: 0.92rem; color: var(--gris); }
.note__lignes dd.note__zero { font-weight: 700; color: var(--a2); }

.note__num {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--ciel);
  color: var(--bleu);
}

.note__pied {
  margin: 1.3rem 0 0;
  padding-top: 1rem;
  border-top: 2px dashed var(--trait);
  font-family: var(--titre);
  font-size: 1.05rem;
  color: var(--ambre);
  text-align: center;
}

@media (max-width: 900px) {
  .engagement__grille { grid-template-columns: 1fr; }
  .note { transform: none; max-width: 520px; }
}
@media (max-width: 460px) {
  .note__lignes dt, .note__lignes dd { white-space: normal; }
  .note__lignes > div { flex-wrap: wrap; }
  .note__lignes > div::after { display: none; }
  .note__lignes dd { flex-basis: 100%; text-align: left; padding-left: 2.2rem; }
}

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

.grille { display: grid; gap: 1.3rem; }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }

.carte { background: var(--fond); border-radius: var(--arrondi); padding: clamp(1.5rem, 3vw, 2rem); }
.carte h3 { margin-bottom: 0.4rem; }
.carte p { color: var(--gris); font-size: 0.99rem; margin-bottom: 0.85em; }
.carte p:last-child { margin-bottom: 0; }
.carte__lien { display: inline-block; margin-top: 1rem; font-weight: 600; font-size: 0.96rem; }

.role__accroche { color: var(--bleu) !important; font-weight: 600; margin-bottom: 0.9rem; }
.section--bleu .carte { background: rgba(255,255,255,0.09); }
.section--bleu .carte p { color: #C6DAE8; }

/* ---------- Survol des cartes sur fond bleu ----------
   La carte se lève, son reflet intérieur double d'intensité et une large
   ombre portée se glisse dessous. Rien d'autre ne bouge : ni la couleur du
   titre, ni le liseré. C'est cette sobriété qui rend l'effet élégant. */

.section--bleu .carte {
  position: relative;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  transition:
    transform 0.4s cubic-bezier(.2,.7,.2,1),
    box-shadow 0.4s cubic-bezier(.2,.7,.2,1);
}

.section--bleu .carte:hover {
  transform: translateY(-8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 28px 56px rgba(0,0,0,0.40);
}

@media (max-width: 860px) { .grille--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grille--3, .grille--2 { grid-template-columns: 1fr; } }

/* ---------- Carrousels défilants ---------- */

.defilant { position: relative; }

.defilant__piste {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Le contenu s'efface doucement sur les deux bords. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.defilant__piste::-webkit-scrollbar { display: none; }

.defilant__ruban {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0 1.2rem;
  width: max-content;
}

/* ---------- Page « Mes partenaires » ---------- */

.partenaires-groupe {
  margin: clamp(2.2rem, 5vw, 3rem) 0 1rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--bleu);
}
.partenaires-groupe:first-of-type { margin-top: 0; }

/* Chaque famille est enveloppée dans son propre bloc : l'espacement se
   fait donc entre les blocs, et plus sur le titre. */
.partenaires-famille .partenaires-groupe { margin-top: 0; }
.partenaires-famille + .partenaires-famille { margin-top: clamp(2.7rem, 5vw, 3rem); }

.partenaires-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

/* ---------- Fiche partenaire animée ----------
   Au repos, le logo seul, grand et centré. Au survol, il glisse vers la
   gauche en rétrécissant, puis le nom et la description apparaissent.
   Quand la souris s'en va, le texte s'efface en douceur et le logo revient
   au centre en grossissant, comme un zoom arrière puis avant.

   Le logo n'est animé que par transform (glissement + échelle). C'est ce
   qui rend le mouvement fluide : le navigateur n'a rien à recalculer dans
   la page, il déplace simplement une image déjà dessinée.

   L'ordre des mouvements n'est pas le même dans les deux sens :
     - à l'entrée, le logo part tout de suite, le texte le suit ;
     - à la sortie, le texte s'efface d'abord, le logo attend un instant. */

.partenaire-fiche {
  --g: 1.25rem;          /* marge intérieure gauche                  */
  --L: 220px;            /* largeur du logo au repos                 */
  --H: 80px;             /* hauteur du logo au repos                 */
  --s: 0.5;              /* échelle du logo une fois décalé          */
  container-type: inline-size;   /* rend disponible la largeur de la fiche (cqw) */
  position: relative;
  height: 116px;
  overflow: hidden;
  background: #fff;
  border-radius: var(--arrondi);
  box-shadow: 0 2px 10px -6px rgba(28,43,56,0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.partenaire-fiche:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

.partenaire-fiche__logo {
  position: absolute;
  left: var(--g);
  top: 50%;
  width: var(--L);
  height: var(--H);
  transform-origin: left center;
  /* Au repos : décalé jusqu'au centre de la fiche, taille normale. */
  transform: translate(calc(50cqw - var(--g) - var(--L) / 2), -50%) scale(1);
  will-change: transform;
  /* retour au centre : il attend que le texte ait commencé à s'effacer,
     puis regrossit lentement */
  transition: transform 0.85s cubic-bezier(.45, 0, .2, 1) 0.14s;
}
.partenaire-fiche__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Le texte, posé à droite de l'emplacement final du logo */
.partenaire-fiche__texte {
  position: absolute;
  left: calc(var(--g) + var(--L) * var(--s) + 1rem);
  right: var(--g);
  top: 50%;
  transform: translate(14px, -50%);
  opacity: 0;
  pointer-events: none;
  /* sortie : le texte s'efface en douceur, en glissant légèrement */
  transition:
    opacity   0.4s ease,
    transform 0.5s cubic-bezier(.4, 0, .2, 1);
}

/* État ouvert : survol, focus clavier, ou toucher sur écran tactile */
.partenaire-fiche:hover .partenaire-fiche__logo,
.partenaire-fiche:focus-visible .partenaire-fiche__logo,
.partenaire-fiche.est-ouverte .partenaire-fiche__logo {
  transform: translate(0, -50%) scale(var(--s));
  /* à l'entrée, le logo part aussitôt et rétrécit sans à-coup */
  transition: transform 0.8s cubic-bezier(.45, 0, .2, 1) 0s;
}

.partenaire-fiche:hover .partenaire-fiche__texte,
.partenaire-fiche:focus-visible .partenaire-fiche__texte,
.partenaire-fiche.est-ouverte .partenaire-fiche__texte {
  opacity: 1;
  transform: translate(0, -50%);
  /* le texte monte au fur et à mesure que le logo rapetisse : il commence
     tôt, mais très lentement, si bien qu'il reste presque transparent tant
     que le logo occupe encore sa place */
  transition:
    opacity   0.7s cubic-bezier(.55, 0, .45, 1) 0.18s,
    transform 0.8s cubic-bezier(.22, 1, .36, 1) 0.12s;
}

/* Navigateurs anciens, sans unité cqw : le logo reste à gauche au repos
   au lieu d'être centré. Le reste de l'animation fonctionne normalement. */
@supports not (width: 1cqw) {
  .partenaire-fiche__logo { transform: translate(0, -50%) scale(1); }
}

.partenaire-fiche h3 { margin: 0 0 0.25rem; font-size: 1rem; line-height: 1.2; }
.partenaire-fiche p  { margin: 0; font-size: 0.88rem; color: var(--gris); line-height: 1.4; }

@media (max-width: 620px) {
  .partenaire-fiche { --g: 1rem; --L: 200px; --H: 72px; height: 112px; }
  .partenaire-fiche p { font-size: 0.84rem; }
}

.partenaires-note {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  max-width: 68ch;
  font-size: 0.92rem;
  color: var(--gris);
}
.partenaires-retour { margin-top: 1.5rem; }

@media (max-width: 620px) {
  .partenaires-liste { grid-template-columns: 1fr; }
}


/* Bandeau sur deux rangées : on resserre l'espacement vertical, sinon les
   marges des deux rubans s'ajoutent et les rangées s'éloignent trop. */
.defilant--double .defilant__ruban { padding-block: 0.35rem 0.5rem; }
.defilant--double .defilant__piste + .defilant__piste { margin-top: 0.15rem; }

.defilant__nav { display: flex; gap: 0.6rem; margin-top: 0.4rem; }

.defilant__mention {
  margin: 0.9rem 0 0;
  color: var(--gris);
  font-size: 0.92rem;
}

.defilant__bouton {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--bleu); background: transparent; color: var(--bleu);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.defilant__bouton:hover { background: var(--bleu); color: #fff; }

/* ---------- Grille des objectifs ----------
   Tout est visible d'un coup, sans défilement : le visiteur balaie la liste
   et s'arrête sur ce qui le concerne. C'est plus efficace qu'un carrousel,
   où la moitié des objectifs reste hors champ. */

.objectifs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 1rem;
}

/* Dans la grille, la tuile s'étire sur sa colonne. */
.objectifs .projet { width: auto; }

/* Barre de couleur animée, sur le modèle du trait du menu du haut.
   Au repos, la barre est présente mais pâle : la couleur de chaque objectif
   reste lisible. Au survol, la couleur franche se déploie de la gauche vers
   la droite ; quand la souris s'en va, elle se rétracte vers la droite.
   Même durée et même courbe que le menu, pour que les deux se répondent. */
.objectifs .projet::before { opacity: 0.28; }

.objectifs .projet::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent, var(--bleu));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.objectifs .projet:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.objectifs__relance {
  margin: 1.6rem 0 0;
  color: var(--gris);
}

@media (max-width: 620px) {
  .objectifs { grid-template-columns: 1fr; gap: 0.75rem; }
  .objectifs .projet { min-height: 0; }
}


/* Tuile de texte : projets, documents utiles.
   La couleur d'accent est posée par la classe « projet--aN » : elle teinte
   la pastille de l'icône et le liseré du haut. Le fond de la tuile, lui,
   reste neutre — la couleur sert à distinguer, pas à crier. */
.projet {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  background: #fff;
  border-radius: var(--arrondi);
  padding: 1.4rem 1.5rem;
  width: 278px;
  min-height: 122px;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 2px 10px -6px rgba(28,43,56,0.35);
}

/* Liseré coloré sur l'arête haute */
.projet::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent, var(--bleu));
}

/* Illustration de la vignette. Pas de fond ici : la scène porte déjà son
   propre disque teinté, un second aplat derrière alourdirait la carte. */
.projet__illus {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  display: block;
}

.projet__illus svg { width: 100%; height: 100%; display: block; }

.projet--a1 { --accent: var(--a1); --accent-pale: var(--a1-pale); }
.projet--a2 { --accent: var(--a2); --accent-pale: var(--a2-pale); }
.projet--a3 { --accent: var(--a3); --accent-pale: var(--a3-pale); }
.projet--a4 { --accent: var(--a4); --accent-pale: var(--a4-pale); }
.projet--a5 { --accent: var(--a5); --accent-pale: var(--a5-pale); }
.projet--a6 { --accent: var(--a6); --accent-pale: var(--a6-pale); }

/* Le bloc de symboles n'est jamais affiché : il ne sert qu'à définir les
   icônes, reprises ensuite par <use>. */
.sprite { display: none; }

@media (max-width: 620px) {
  .projet { width: 238px; padding: 1.1rem 1.15rem; gap: 0.8rem; }
  .projet__illus { width: 52px; height: 52px; }
}

/* Tuile de logo : partenaires */
.partenaire {
  flex: 0 0 auto;
  width: 230px;
  height: 118px;
  background: #fff;
  border-radius: var(--arrondi);
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px -6px rgba(28,43,56,0.35);
}

.partenaire img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- Étapes ---------- */

.etapes {
  /* Taille de la pastille. La ligne verticale et ses arrêts se calculent
     à partir de cette valeur : la changer suffit, rien d'autre à reprendre. */
  --pastille: 3rem;
  --retrait: clamp(1.35rem, 2.5vw, 1.75rem);

  list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; position: relative;
}

/* Ligne verticale reliant les pastilles. Elle passe derrière les cartes et
   n'est donc visible que dans les intervalles, ce qui suffit à faire lire
   les cinq étapes comme un parcours plutôt que comme une pile.
   Sa position reprend exactement le calcul du centre des pastilles :
   marge intérieure de la carte, plus la moitié de la pastille. */
.etapes::before {
  content: "";
  position: absolute;
  top: calc(var(--retrait) + var(--pastille) / 2);
  bottom: calc(var(--retrait) + var(--pastille) / 2);
  left: calc(var(--retrait) + var(--pastille) / 2 - 1px);
  width: 2px;
  background: var(--ciel-fonce);
  border-radius: 2px;
}

.etape {
  position: relative;
  z-index: 1;
  display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: start;
  /* Fond blanc plutôt que la couleur de page : les cartes se détachent
     aussi bien sur le papier chaud que sur le bandeau bleu ciel. */
  background: #fff; border-radius: var(--arrondi); padding: var(--retrait);
  box-shadow: 0 2px 10px -6px rgba(28,43,56,0.35);
}

/* Les cartes ont un fond opaque : la ligne posée derrière elles n'apparaîtrait
   que dans les intervalles, en petits traits. On la prolonge donc à
   l'intérieur de chaque carte, sur toute sa hauteur. Elle passe sous les
   pastilles, qui sont opaques et la masquent au bon endroit. */
.etape::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--retrait) + var(--pastille) / 2 - 1px);
  width: 2px;
  background: var(--ciel-fonce);
  z-index: 0;
}

/* La première et la dernière carte s'arrêtent au centre de leur pastille,
   pour que la ligne ne dépasse pas au-dessus du 1 ni sous le 5. */
.etape:first-child::before { top: calc(var(--retrait) + var(--pastille) / 2); }
.etape:last-child::before  { bottom: calc(100% - var(--retrait) - var(--pastille) / 2); }

/* La pastille porte maintenant une icône plutôt qu'un chiffre. Le numéro
   n'est pas perdu : il passe au-dessus du titre, en petit, dans la couleur
   de l'étape. La lecture du parcours reste donc chiffrée. */
.etape__pastille {
  position: relative; z-index: 1;
  width: var(--pastille); height: var(--pastille); border-radius: 15px;
  background: var(--accent-pale, var(--ciel));
  color: var(--accent, var(--bleu));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.etape__pastille svg { width: 55%; height: 55%; }

.etape__numero {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--accent, var(--bleu));
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
}

.etape--a1 { --accent: var(--a1); --accent-pale: var(--a1-pale); }
.etape--a2 { --accent: var(--a2); --accent-pale: var(--a2-pale); }
.etape--a3 { --accent: var(--a3); --accent-pale: var(--a3-pale); }
.etape--a4 { --accent: var(--a4); --accent-pale: var(--a4-pale); }
.etape--a5 { --accent: var(--a5); --accent-pale: var(--a5-pale); }
.etape--a6 { --accent: var(--a6); --accent-pale: var(--a6-pale); }

.etape h3 { margin-bottom: 0.25rem; }
.etape p { color: var(--gris); margin-bottom: 0; font-size: 0.99rem; max-width: 64ch; }

@media (max-width: 560px) {
  .etape { grid-template-columns: 1fr; gap: 0.8rem; }
  /* En dessous, la pastille passe au-dessus du texte : la ligne n'a plus
     de pastille à relier, on la retire. */
  .etapes::before, .etape::before { display: none; }
}

/* ---------- Zone d'intervention : maquette animée ---------- */

.mq-bloc {
  /* Rythme de l'animation */
  --mq-duree  : 2000ms;
  --mq-courbe : cubic-bezier(.35, 0, .15, 1);

  /* Accordé à la charte du site */
  --mq-titre     : var(--titre);
  --mq-taille    : clamp(1.6rem, 3.6vw, 2.6rem);
  --mq-couleur   : var(--encre);
  --mq-secondaire: var(--gris);
  --mq-largeur   : 34%;

  position: relative;
}

.mq-scene {
  display: grid;
  grid-template-columns: 1fr minmax(200px, var(--mq-largeur));
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;          /* les accroches arrivent de hors-champ */
}

.mq-texte, .mq-media { min-width: 0; }

/* ---------- Les accroches, qui s'empilent ----------
   Elles ne se remplacent plus : chacune apparaît sous la précédente et
   reste visible jusqu'à la fin du cycle. */

/* L'amorce n'est pas fixe : elle arrive avec la première accroche, pour que
   la phrase se lise d'un seul tenant dès le premier temps. */
.mq-amorce {
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity var(--mq-duree) var(--mq-courbe),
              transform var(--mq-duree) var(--mq-courbe);
  margin: 0 0 0.15em;
  font-family: var(--mq-titre);
  font-size: var(--mq-taille);
  font-weight: inherit;
  line-height: 1.18;
  color: var(--mq-couleur);
}

.mq-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mq-titre);
  font-size: var(--mq-taille);
  line-height: 1.18;
  color: var(--mq-couleur);
}

.mq-ligne {
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity var(--mq-duree) var(--mq-courbe),
              transform var(--mq-duree) var(--mq-courbe);
}
.mq-ligne.is-active,
.mq-amorce.is-active { opacity: 1; transform: none; }

/* Baseline, au dernier temps : même police, plus grande qu'avant */
.mq-baseline {
  margin: 1.2rem 0 0;
  font-family: var(--mq-titre);
  font-size: calc(var(--mq-taille) * 0.6);
  line-height: 1.35;
  color: var(--mq-secondaire);
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity var(--mq-duree) var(--mq-courbe),
              transform var(--mq-duree) var(--mq-courbe);
}
.mq-baseline.is-active { opacity: 1; transform: none; }

/* La carte : une seule image dans laquelle on zoome.
   état 1 : le Rhône, état 2 : la Loire, état 3 : la France entière. */

.mq-media { display: flex; justify-content: center; }

.mq-carte {
  position: relative;
  width: 100%;
  aspect-ratio: 2450 / 2309;
  overflow: hidden;
  border-radius: var(--arrondi);
  /* Fond transparent : la carte prend la couleur de la section qui
     l'accueille, au lieu de former un rectangle clair sur le bleu. */
  background: transparent;
  transform-origin: center center;
  transition: transform var(--mq-duree) var(--mq-courbe);
}

.mq-carte[data-etat="1"] { transform: translate(-21.1%, -1.3%) scale(.85); }
.mq-carte[data-etat="2"] { transform: translate( -2.3%,  3.3%) scale(.85); }
.mq-carte[data-etat="3"] { transform: none; }

.mq-pile {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%;
  max-width: none;
  transform-origin: center center;
  transition: transform var(--mq-duree) var(--mq-courbe);
}
.mq-pile picture { display: block; }
.mq-carte__img { display: block; width: 100%; height: auto; max-width: none; }

/* Les deux départements en couleur, calés au pixel sur la carte. Ils
   apparaissent et s'effacent en fondu, à la même vitesse que les textes. */
.mq-zone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 0;
  transition: opacity var(--mq-duree) var(--mq-courbe);
  pointer-events: none;
}
.mq-carte[data-etat="1"] .mq-zone[data-zone="1"],
.mq-carte[data-etat="2"] .mq-zone[data-zone="2"] { opacity: 1; }

.mq-carte[data-etat="1"] .mq-pile {
  transform: translate(-50%, -50%) scale(7.519) translate(-16.12%, -5.74%);
}
.mq-carte[data-etat="2"] .mq-pile {
  transform: translate(-50%, -50%) scale(6.277) translate(-12.33%, -7.90%);
}
.mq-carte[data-etat="3"] .mq-pile {
  transform: translate(-50%, -50%) scale(1) translate(0%, 0%);
}

/* Utilisé une fraction de seconde en fin de cycle */
.mq-bloc.sans-transition * { transition: none !important; }

/* Le texte sous la carte s'arrête à l'aplomb de la colonne de gauche : sa
   largeur est calée sur celle de la grille, et non sur un nombre de
   caractères, sinon il passait sous la carte à certaines largeurs. */
.mq-presentation {
  max-width: min(68ch, calc(66% - clamp(1.5rem, 4vw, 3rem) - 6px));
  margin-top: clamp(2rem, 5vw, 3.2rem);
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--mq-secondaire);
}
.mq-presentation p { margin: 0 0 0.9em; }
.mq-presentation p:last-child { margin-bottom: 0; }

@media (max-width: 780px) {
  .mq-scene { grid-template-columns: 1fr; }
  .mq-media { order: -1; margin-bottom: 1.5rem; }
  .mq-carte { width: 78%; }
}

.mq-bloc.mouvement-reduit .mq-ligne,
.mq-bloc.mouvement-reduit .mq-baseline,
.mq-bloc.mouvement-reduit .mq-carte,
.mq-bloc.mouvement-reduit .mq-pile,
.mq-bloc.mouvement-reduit .mq-zone { transition: none !important; }

.mq-bloc.mouvement-reduit .mq-ligne,
.mq-bloc.mouvement-reduit .mq-amorce { opacity: 1; transform: none; }
.mq-bloc.mouvement-reduit .mq-baseline { opacity: 1; transform: none; }

/* ---------- Bannière avec photo de fond ---------- */

.banniere {
  position: relative;
  isolation: isolate;
  background: var(--bleu-profond);
  color: #E3EDF5;
  overflow: hidden;
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

/* La photo vit ici. Si le fichier n'existe pas, il ne se passe rien et
   le bandeau reste bleu uni : aucune image cassée à l'écran. */
.banniere__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("images/equipe.jpg");
  background-size: cover;
  background-position: center 35%;
}

/* Voile dégradé : opaque à gauche pour que le texte reste lisible,
   plus transparent à droite pour laisser voir la photo. */
.banniere::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(28,43,56,0.94) 0%,
      rgba(28,43,56,0.86) 38%,
      rgba(35,78,117,0.62) 72%,
      rgba(35,78,117,0.48) 100%);
}

.banniere__contenu { position: relative; }
.banniere h1 { color: #fff; max-width: 17ch; }
.banniere .surtitre { color: #E7BE7E; }
.banniere .chapo { color: #C6DAE8; max-width: 54ch; }

/* Variante centrée : le texte occupant toute la largeur, le voile doit
   être uniforme, sinon la fin des lignes passerait sur la zone claire. */
.banniere--centre { text-align: center; }
.banniere--centre::before {
  background: linear-gradient(180deg, rgba(28,43,56,0.90), rgba(28,43,56,0.82) 45%, rgba(35,78,117,0.88));
}
.banniere--centre h1,
.banniere--centre .chapo { margin-left: auto; margin-right: auto; }
.banniere--centre h1 { max-width: 20ch; }
.banniere--centre .actions { justify-content: center; }

@media (max-width: 760px) {
  /* Sur mobile le texte occupe toute la largeur : le voile devient
     uniforme, sinon la fin des lignes passerait sur la zone claire. */
  .banniere::before {
    background: linear-gradient(180deg, rgba(28,43,56,0.92), rgba(35,78,117,0.88));
  }
}

/* ---------- Bandeau des titres de presse ---------- */

.presse {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.8rem, 4vw, 3.4rem);
}

.presse li { flex: 0 0 auto; }

.presse img {
  height: 30px;
  width: auto;
  opacity: 0.78;
  transition: opacity 0.2s ease;
}
.presse img:hover { opacity: 1; }

/* Le Journal des Entreprises est sur deux lignes : il a besoin
   d'un peu plus de hauteur pour peser autant que les autres. */
.presse li:nth-child(3) img { height: 44px; }

@media (max-width: 620px) {
  .presse { gap: 1.6rem 2rem; }
  .presse img { height: 24px; }
  .presse li:nth-child(3) img { height: 36px; }
}

/* ---------- Repères chiffrés ---------- */

.reperes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }

.repere__valeur {
  font-family: var(--titre);
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  font-weight: 500;
  line-height: 1;
  display: block;
  margin-bottom: 0.6rem;
  color: #fff;
}

.repere__label { font-size: 1rem; line-height: 1.45; color: #B6CEE0; display: block; max-width: 32ch; }

.repere__source { margin-top: 2.2rem; font-size: 0.92rem; color: #A9C2DA; max-width: 74ch; }

@media (max-width: 760px) { .reperes { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------- Bloc d'agrément professionnel ---------- */

.agrement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  background: var(--fond);
  border-radius: var(--arrondi);
  padding: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.agrement__sceau {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--bleu-doux);
  color: var(--bleu);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agrement__sceau svg { width: 2.6rem; height: 2.6rem; }

.agrement h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin-bottom: 0.25rem; }

.agrement__sous {
  color: var(--bleu);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 1.1rem;
}

.agrement p { color: var(--gris); font-size: 1.02rem; max-width: 68ch; }
.agrement p:last-child { margin-bottom: 0; }
.agrement__note { font-size: 0.92rem; }

.agrement--sombre { background: rgba(255,255,255,0.09); }
.agrement--sombre h2 { color: #fff; }
.agrement--sombre .agrement__sous { color: #E7BE7E; }
.agrement--sombre p { color: #C6DAE8; }
.agrement--sombre .agrement__sceau { border-color: rgba(255,255,255,0.35); color: #fff; }
.agrement--sombre .agrement__note { color: var(--encre); }

@media (max-width: 620px) {
  .agrement { grid-template-columns: 1fr; gap: 1.2rem; }
  .agrement__sceau { width: 4.5rem; height: 4.5rem; }
  .agrement__sceau svg { width: 2.1rem; height: 2.1rem; }
}

/* ---------- Deux colonnes ---------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: start; }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } }

/* ---------- Réglementaire ---------- */

.reglementaire {
  background: var(--fond); border-radius: var(--arrondi);
  padding: clamp(1.5rem, 3vw, 2rem); font-size: 0.99rem; color: var(--gris); margin: 0;
}
.reglementaire dt { font-weight: 600; color: var(--encre); margin-top: 1rem; }
.reglementaire dt:first-child { margin-top: 0; }
.reglementaire dd { margin: 0.1rem 0 0; }

/* ---------- Coordonnées ---------- */

.coords { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.coords .label { display: block; font-size: 0.87rem; font-weight: 600; color: var(--ambre); margin-bottom: 0.1rem; }
.coords .valeur { font-size: 1.08rem; }
.coords a { text-decoration: none; }
.coords a:hover { text-decoration: underline; }

/* ---------- Formulaire ---------- */

.formulaire { display: grid; gap: 1.1rem; }
.champ { display: grid; gap: 0.3rem; }
.champ label { font-size: 0.91rem; font-weight: 600; }
.champ input, .champ textarea, .champ select {
  font-family: var(--texte); font-size: 1rem; color: var(--encre); background: var(--fond);
  border: 1.5px solid var(--trait); border-radius: 10px; padding: 0.7rem 0.9rem; width: 100%;
}
.champ input:focus, .champ textarea:focus, .champ select:focus { border-color: var(--bleu); outline: none; }
.champ textarea { min-height: 8.5rem; resize: vertical; }
.consentement { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; color: var(--gris); }
.consentement input { width: auto; margin-top: 0.35rem; }
.consentement label { font-weight: 400; font-size: 0.92rem; line-height: 1.45; }

@media (min-width: 640px) { .formulaire--duo { grid-template-columns: 1fr 1fr; } .formulaire--duo .pleine { grid-column: 1 / -1; } }

/* ---------- Appel ---------- */

.appel { text-align: center; }
.appel h2 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.appel .chapo { margin-left: auto; margin-right: auto; }
.appel .actions { justify-content: center; }

/* ---------- Pied ---------- */

.pied { background: var(--bleu-profond); padding-top: 3.2rem; padding-bottom: 2.4rem; font-size: 0.96rem; color: var(--gris); }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 2.4rem; }
.pied h4 { font-family: var(--texte); font-size: 0.91rem; font-weight: 600; color: #FFFFFF; margin: 0 0 0.75rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.4rem; }
.pied a { color: var(--gris); text-decoration: none; }
.pied a:hover { color: var(--bleu); text-decoration: underline; }
.pied__bas { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1.5px solid var(--ciel-fonce); font-size: 0.85rem; line-height: 1.5; }

@media (max-width: 760px) { .pied__grille { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------- Accessibilité ---------- */

.saut-contenu { position: absolute; left: -9999px; background: var(--bleu); color: #fff; padding: 0.75rem 1.25rem; border-radius: 8px; }
.saut-contenu:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* La carte ne se lève plus et le halo ne suit plus le curseur, mais la
     mise en valeur reste : liseré doré et fond légèrement plus clair. */
  /* Le survol des cartes sur fond bleu est volontairement conservé ici :
     c'est le visiteur lui-même qui déclenche le mouvement en passant la
     souris, et il reste court (8 px, 0,4 s). Même choix que pour la
     maquette de la carte de France. */
  .defilant__piste { scroll-behavior: auto; }

  /* Les transitions du site ne sont PAS coupées ici, volontairement. Une
     règle les ramenait toutes à zéro pour les visiteurs ayant activé
     « réduire les animations » : les étiquettes partenaires, la barre des
     objectifs et les cartes sautaient alors d'un état à l'autre. Ces
     effets sont déclenchés par le visiteur lui-même, au survol, et restent
     courts : ils sont conservés pour tout le monde. */

  /* La maquette garde son animation, en version adoucie : les accroches
     se fondent sur place au lieu d'arriver de hors-champ. Le zoom de la
     carte, lui, est conservé. */
  .mq-ligne { transform: translateX(0); }
  .mq-ligne.is-past { transform: translateY(-45%); }
  .mq-baseline { transform: translateX(0); }
}

/* ---------- Apparition au défilement ----------
   La classe « reveler » est posée par apparition.js. Sans JavaScript,
   rien n'est masqué : le site reste entièrement lisible. */

/* Le :where() ramène la spécificité de cette liste à celle de « .reveler »
   seul. Sans lui, des sélecteurs comme « .reveler .appel .contenu » pesaient
   plus lourd que « .reveler .vu » : les blocs concernés recevaient bien la
   classe une fois à l'écran, mais restaient invisibles. C'est ce qui faisait
   disparaître le bloc de contact en bas de chaque page. */
.reveler :where(
  .section__tete,
  .carte,
  .etape,
  .agrement,
  .reglementaire,
  .texte-photo__texte,
  .texte-photo__image,
  .tete-photo__image,
  .repere,
  .presse li,
  .coords li,
  .formulaire,
  .appel .contenu,
  .mesure
) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveler .vu {
  opacity: 1;
  transform: none;
}

/* ---------- Bandeau de rupture ----------
   Filets fins plutôt qu'un aplat de couleur : la section suivante est déjà
   sur fond bleu clair, deux blocs colorés d'affilée se neutraliseraient. */

.rupture {
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}

.rupture__faits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem clamp(1.5rem, 4vw, 3rem);
  font-size: 1.02rem;
  color: var(--gris);
  text-align: center;
}

/* Séparateur discret entre les faits, jamais avant le premier. */
.rupture__faits li { position: relative; }
.rupture__faits li + li::before {
  content: "";
  position: absolute;
  left: calc(clamp(1.5rem, 4vw, 3rem) / -2 - 2px);
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bleu-doux);
  transform: translateY(-50%);
}

@media (max-width: 620px) {
  .rupture__faits { flex-direction: column; gap: 0.45rem; }
  .rupture__faits li + li::before { display: none; }
}

/* Lien « Découvrir l'ensemble de mes partenaires », sous le bandeau de logos.
   La flèche avance d'un cheveu au survol : un signal discret que ça mène
   ailleurs, sans transformer le lien en bouton. */
.lien-decouvrir {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ambre);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.lien-decouvrir span { transition: transform 0.25s ease; }
.lien-decouvrir:hover { border-bottom-color: currentColor; }
.lien-decouvrir:hover span { transform: translateX(4px); }

/* ---------- Pages légales ----------
   Une colonne étroite : ces textes se lisent en continu, une largeur de
   ligne limitée est ce qui les rend supportables. */

.contenu--etroit { max-width: 760px; }

.legal h2 {
  margin: 2.2rem 0 0.6rem;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--bleu);
}
.legal h2:first-of-type { margin-top: 1.5rem; }

.legal p, .legal li { line-height: 1.7; color: var(--encre); }
.legal p { margin: 0 0 0.9rem; }
.legal ul { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.legal li { margin-bottom: 0.4rem; }

.legal__avert {
  padding: 1rem 1.2rem;
  background: var(--ciel);
  border-left: 3px solid var(--bleu);
  border-radius: 0 8px 8px 0;
  font-size: 0.95rem;
}

.legal__alerte {
  padding: 1rem 1.2rem;
  background: #FBEFD9;
  border-left: 3px solid var(--ambre);
  border-radius: 0 8px 8px 0;
  font-size: 0.95rem;
}

.legal__maj {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--gris);
}

/* ---------- Menu illustré « Ce qui vous amène » ----------
   Même habillage que les autres champs du formulaire : fond, bordure et
   arrondi sont repris de .champ input, pour que le menu ne détonne pas. */

/* Le <select> d'origine reste dans la page, pour l'envoi du formulaire,
   mais il est retiré de l'affichage et de la navigation. */
.choix__natif {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0 !important; padding: 0 !important; margin: -1px;
}

.choix { position: relative; }

.choix__bouton {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.45rem 0.9rem 0.45rem 0.5rem;
  font-family: var(--texte);
  font-size: 1rem;
  color: var(--encre);
  text-align: left;
  background: var(--fond);
  border: 1.5px solid var(--trait);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.choix__bouton:hover,
.choix__bouton:focus-visible,
.choix.est-ouvert .choix__bouton { border-color: var(--bleu); outline: none; }

.choix__illus { flex: 0 0 auto; width: 42px; height: 42px; display: block; }
.choix__texte { flex: 1 1 auto; line-height: 1.35; }

.choix__chevron {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--gris);
  border-bottom: 2px solid var(--gris);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.25s ease;
}
.choix.est-ouvert .choix__chevron { transform: translateY(2px) rotate(-135deg); }

.choix__liste {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(28,43,56,0.45);
  outline: none;
}

.choix__option {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 0.6rem 0.4rem 0.4rem;
  border-radius: 9px;
  cursor: pointer;
  line-height: 1.35;
}
.choix__option.est-active { background: var(--ciel); }
.choix__option[aria-selected="true"] { font-weight: 600; }
.choix__option[aria-selected="true"]::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  width: 6px; height: 11px;
  border-right: 2px solid var(--bleu);
  border-bottom: 2px solid var(--bleu);
  transform: rotate(45deg) translate(-2px, -2px);
}

/* La dernière option, « Autre », est séparée du reste par un filet. */
.choix__option:last-child {
  margin-top: 0.3rem;
  border-top: 1px solid var(--trait);
  border-radius: 0 0 9px 9px;
  padding-top: 0.7rem;
}

@media (min-width: 720px) {
  /* Sur grand écran, deux colonnes : les treize options tiennent sans défiler. */
  .choix__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-height: none; }
  .choix__liste[hidden] { display: none; }
  .choix__option:last-child { grid-column: 1 / -1; }
}

/* =====================================================================
   EN-TÊTE SOMBRE
   Fond d'encre légèrement translucide, avec un flou très discret de ce
   qui défile dessous. Le flou reste subtil : il adoucit le contenu qui
   passe sous l'en-tête sans le rendre méconnaissable.

   Le filet du bas est un vrai trait d'un pixel, net, et non une ombre :
   c'est lui qui dessine la limite de l'en-tête, même quand une photo ou
   un bloc sombre passe dessous.
   ===================================================================== */

.entete {
  background: rgba(28, 43, 56, 0.92);          /* #1C2B38, l'encre du site */
  -webkit-backdrop-filter: blur(6px) saturate(120%);
          backdrop-filter: blur(6px) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* Sans prise en charge du flou, le fond devient simplement opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .entete { background: #1C2B38; }
}

/* Marque */
.entete .marque,
.entete .marque strong { color: #FFFFFF; }
.entete .marque em     { color: rgba(255, 255, 255, 0.68); }
.entete .marque:hover strong { color: var(--bleu-doux); }
.entete .marque:hover em     { color: rgba(255, 255, 255, 0.85); }

/* Logo de l'en-tête : SVG en ligne, pour qu'il profite des polices du site.
   L'anneau et le nom suivent la couleur du lien (blanc, bleu doux au survol). */
.marque__logo { display: block; height: 3.3rem; width: auto; overflow: visible; }
.marque__nom  { font-family: var(--titre); font-weight: 600; fill: currentColor; }
.marque__sous { font-family: var(--texte); font-weight: 500; fill: currentColor; }
.marque__point { fill: #C08A3E; }

/* Tour de cadran au survol (classe posée par logo-anime.js) : l'anneau et
   son point pivotent ensemble autour du centre, si bien que l'ouverture
   accompagne le point pendant tout le tour. */
.marque__cadran { transform-box: view-box; transform-origin: 50px 50px; }
.marque__cadran.tourne { animation: tour-cadran 0.6s cubic-bezier(0.45, 0, 0.25, 1); }
@keyframes tour-cadran { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .marque__cadran.tourne { animation: none; }
}
@media (max-width: 520px) {
  .marque__logo { height: 2.8rem; }
}

/* Menu : blanc, le trait animé suit la couleur du texte */
.entete .nav a:not(.bouton)       { color: rgba(255, 255, 255, 0.86); }
.entete .nav a:not(.bouton):hover { color: #FFFFFF; }
.entete .nav a[aria-current="page"]:not(.bouton) { color: #FFFFFF; }

/* =====================================================================
   REPLI DES FAMILLES DE PARTENAIRES
   Voir partenaires-repli.js pour la logique.
   ===================================================================== */

/* Tant que la famille est repliée, les fiches placées après le « + »
   sont masquées ; une fois dépliée, c'est le « + » qui disparaît. */
.est-repliable:not(.est-depliee) .partenaire-plus ~ .partenaire-fiche { display: none; }
.est-depliee .partenaire-plus { display: none; }

/* La famille sert de repère pour l'esquisse, posée en absolu. */
.partenaires-famille { position: relative; }

/* ---------- La case « + » ---------- */

.partenaire-plus { display: flex; }

.partenaire-plus__bouton {
  flex: 1 1 auto;
  min-height: 116px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--arrondi);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Au survol, la case se dessine entièrement autour du signe. */
.partenaire-plus__bouton:hover,
.partenaire-plus__bouton:focus-visible {
  background: #fff;
  border-color: var(--trait);
  box-shadow: 0 2px 10px -6px rgba(28,43,56,0.35);
  outline: none;
}
.partenaire-plus__bouton:focus-visible { border-color: var(--bleu); }

/* Le signe + et le signe − sont dessinés en CSS : un ou deux traits
   dans un cercle. */
.partenaire-plus__signe,
.partenaires-moins__signe {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--bleu-doux);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.partenaire-plus__signe::before,
.partenaire-plus__signe::after,
.partenaires-moins__signe::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 2px;
  background: var(--bleu);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.partenaire-plus__signe::after { transform: translate(-50%, -50%) rotate(90deg); }

.partenaire-plus__bouton:hover .partenaire-plus__signe,
.partenaire-plus__bouton:focus-visible .partenaire-plus__signe {
  border-color: var(--bleu);
  transform: rotate(90deg);
}

/* ---------- L'esquisse de la rangée suivante ----------
   Posée en absolu juste sous la liste : elle occupe l'espace qui sépare
   deux familles, sans rien pousser. On ne montre qu'un cinquième de la
   hauteur d'une case, fondu vers le bas, comme le bord d'une rangée qui
   dépasse à peine. */

.partenaires-fantomes {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  padding-top: 1rem;               /* même écart qu'entre deux rangées */
  pointer-events: none;
}
.partenaire-fantome {
  height: 23px;                    /* un cinquième d'une case de 116 px */
  border-radius: var(--arrondi) var(--arrondi) 0 0;
  background: rgba(28, 43, 56, 0.05);
  border: 1px solid rgba(28, 43, 56, 0.07);
  border-bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
          mask-image: linear-gradient(to bottom, #000, transparent);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.partenaire-fantome[hidden] { display: none; }

.est-esquissee .partenaire-fantome { opacity: 1; transform: none; }
.est-esquissee .partenaire-fantome:nth-child(2) { transition-delay: 0.05s; }
.est-esquissee .partenaire-fantome:nth-child(3) { transition-delay: 0.10s; }

/* ---------- Apparition au clic ---------- */

.partenaire-fiche.vient-d-apparaitre {
  animation: partenaire-apparait 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.partenaire-fiche.vient-d-apparaitre:focus { outline: none; }

@keyframes partenaire-apparait {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Le bouton « Voir moins » ---------- */

.partenaires-moins { margin-top: 1rem; }
.partenaires-moins[hidden] { display: none; }

.partenaires-moins__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.3rem 1rem 0.3rem 0.3rem;
  font-family: var(--texte);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bleu);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.partenaires-moins__bouton .partenaires-moins__signe { width: 36px; height: 36px; }
.partenaires-moins__bouton .partenaires-moins__signe::before { width: 14px; }

.partenaires-moins__bouton:hover,
.partenaires-moins__bouton:focus-visible {
  background: #fff;
  border-color: var(--trait);
  outline: none;
}
.partenaires-moins__bouton:hover .partenaires-moins__signe,
.partenaires-moins__bouton:focus-visible .partenaires-moins__signe { border-color: var(--bleu); }

@media (max-width: 620px) {
  .partenaires-fantomes { grid-template-columns: 1fr; }
  .partenaire-plus__bouton { min-height: 112px; }
  .partenaire-fantome { height: 22px; }   /* un cinquième d'une case de 112 px */
}


/* Bandeau de faits placé tout en haut, sous l'en-tête. L'en-tête a déjà
   son propre filet en bas : on retire celui du haut du bandeau, sinon deux
   traits se superposeraient. Le bandeau est aussi un peu plus resserré,
   puisqu'il n'a plus à séparer deux sections. */
.rupture--haut {
  border-top: 0;
  padding-top: clamp(0.9rem, 2vw, 1.2rem);
  padding-bottom: clamp(0.9rem, 2vw, 1.2rem);
}

/* =====================================================================
   PAGE « REJOINDRE » : OUVERTURE ET VIDÉO
   ===================================================================== */

/* Titre en deux temps : la seconde moitié passe sur sa propre ligne, pour
   que « sans avancer seul » ne soit jamais coupé en deux. Même couleur et
   même police que le reste du titre. */
.banniere--centre h1.titre-deux-temps { max-width: 26ch; }
.titre-deux-temps span { display: block; }

/* ---------- Bloc « Indépendant, sans être isolé » ----------
   Quatre points, une phrase chacun. Même construction que les vignettes
   d'objectifs : pastille colorée, titre court, explication en une ligne. */

.atouts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Deux colonnes sur grand écran : quatre points se répartissent en 2 + 2,
     au lieu de laisser une tuile seule sur la seconde ligne. */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 1rem;
}

.atout {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.7rem 1.7rem 1.7rem 1.9rem;
  background: #fff;
  border-radius: var(--arrondi);
  box-shadow: 0 2px 10px -6px rgba(28,43,56,0.35);
}
.atout::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent, var(--bleu));
}

.atout__pastille {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-pale, var(--ciel));
  color: var(--accent, var(--bleu));
  /* un halo de la même teinte : la pastille prend de l'ampleur sans
     alourdir la carte */
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-pale, var(--ciel)) 55%, transparent);
}
.atout__pastille svg { width: 34px; height: 34px; }

.atout h3 { margin: 0 0 0.35rem; font-size: 1.12rem; line-height: 1.25; }
.atout p  { margin: 0; font-size: 0.92rem; color: var(--gris); line-height: 1.5; }

.atout--a1 { --accent: var(--a1); --accent-pale: var(--a1-pale); }
.atout--a2 { --accent: var(--a2); --accent-pale: var(--a2-pale); }
.atout--a3 { --accent: var(--a3); --accent-pale: var(--a3-pale); }
.atout--a4 { --accent: var(--a4); --accent-pale: var(--a4-pale); }

.atouts__note {
  margin: 1.6rem 0 0;
  max-width: 72ch;
  font-size: 0.94rem;
  color: var(--gris);
}


/* =====================================================================
   PAGE « REJOINDRE » : NOUVEAUX BLOCS
   ===================================================================== */

/* ---------- Repères : deux séries dans la même section ---------- */

.reperes__titre {
  margin: 2.6rem 0 1.4rem;
  font-family: var(--titre);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  color: var(--bleu-profond);
}
.reperes__titre:first-of-type { margin-top: 0; }

/* La phrase qui ressort entre les deux séries */
/* La comparaison n'est pas encadrée : c'est sa taille et le contraste du
   nombre qui la font ressortir, comme pour les repères eux-mêmes. */
.reperes__saillant {
  margin: 1.6rem 0 0;
  font-family: var(--titre);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  color: var(--gris);
}
.reperes__saillant strong {
  color: var(--bleu-profond);
  font-weight: 500;
  font-size: 1.35em;
}


/* Les repères étaient prévus pour un fond sombre : blanc sur bleu. Sur une
   section claire, ces couleurs deviennent illisibles. On les redéfinit donc
   pour ce cas, en gardant la version sombre là où elle sert encore. */
.section:not(.section--bleu):not(.section--encre) .repere__valeur { color: var(--bleu-profond); }
.section:not(.section--bleu):not(.section--encre) .repere__label  { color: var(--gris); }
.section:not(.section--bleu):not(.section--encre) .repere__source { color: var(--gris); }

/* Liste à tirets, pour les énumérations dans une carte */
.liste-tirets { list-style: none; margin: 0; padding: 0; }
.liste-tirets li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--gris);
  line-height: 1.55;
}
.liste-tirets li + li { margin-top: 0.75rem; }
.liste-tirets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  height: 1px;
  background: var(--bleu-doux);
}
.section--bleu .liste-tirets li { color: #C6DAE8; }

/* Groupe de boutons centré */
.actions--centre { justify-content: center; margin-top: clamp(2rem, 4vw, 2.8rem); }

/* Carte en relief : les cartes ordinaires prennent la couleur du papier,
   ce qui les rend invisibles sur une section claire. Cette variante les
   détache, comme les vignettes d'objectifs de l'accueil. */
.carte--relief {
  background: #fff;
  box-shadow: 0 2px 10px -6px rgba(28,43,56,0.35);
}

/* ---------- Relance sous la grille d'objectifs ----------
   « Et bien plus encore » n'est pas une note de bas de page : c'est la
   preuve que la liste n'est qu'un échantillon. Elle est donc écrite à la
   taille d'un titre, pas en petits caractères. */
.objectifs__suite {
  margin: 1.8rem 0 0.4rem;
  font-family: var(--titre);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  color: var(--bleu-profond);
}
.objectifs__relance { margin-top: 0.2rem; }

/* ---------- Les autorités de tutelle ----------
   Trois pastilles cliquables : le sigle en gros, le nom complet dessous.
   Ce sont des liens vers les registres officiels, pas des logos : les
   marques de l'AMF et de l'ACPR ne peuvent pas être reprises librement. */
.autorites {
  list-style: none;
  margin: 1.4rem 0 1.6rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.autorites li { flex: 0 1 auto; }
.autorites a {
  display: block;
  padding: 0.6rem 1rem 0.55rem;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 10px;
  font-family: var(--titre);
  font-size: 1.05rem;
  color: var(--bleu-profond);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.autorites a:hover { border-color: var(--bleu); transform: translateY(-2px); }
.autorites span {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--texte);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gris);
  max-width: 18ch;
}

/* Logo d'une autorité, quand le fichier est présent. Hauteur imposée pour
   que les trois pastilles restent alignées, quelles que soient les
   proportions des logos. */
.autorite__logo {
  /* Boîte de taille fixe plutôt qu'une hauteur imposée : les trois logos
     ont des proportions très différentes (l'AMF est large, l'ACPR presque
     carré). object-fit les fait tenir dedans sans les déformer, et les
     trois pastilles restent alignées. */
  display: block;
  width: 130px;
  height: 42px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 0.35rem;
}
.autorite__logo[hidden] { display: none; }
.autorite__sigle[hidden] { display: none; }
.autorites a { min-width: 140px; }

/* Portrait posé à côté d'un texte, dans un bloc « duo ». */
.duo--portrait { align-items: center; }
.portrait-cote { margin: 0; }
.portrait-cote img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: var(--arrondi);
  box-shadow: 0 18px 40px -26px rgba(28,43,56,0.55);
}
@media (max-width: 760px) {
  .portrait-cote img { max-width: 220px; margin-inline: auto; }
}

/* Texte réservé aux lecteurs d'écran */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Respiration sous l'ouverture ----------
   Le cadre décoratif du portrait descend plus bas que le texte : sans cette
   marge, il venait toucher la section suivante. */
.ouverture { padding-bottom: clamp(5rem, 9vw, 7.5rem); }

/* ---------- Bloc d'appel : portrait à gauche ---------- */

.appel__duo {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
}
.appel__portrait { margin: 0; }
.appel__portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--arrondi);
  box-shadow: 0 20px 44px -28px rgba(28,43,56,0.55);
}

@media (max-width: 760px) {
  .appel__duo { grid-template-columns: 1fr; }
  .appel__portrait img { max-width: 220px; margin-inline: auto; }
}

/* ---------- Bouton téléphone ----------
   Au repos : un combiné et « M'appeler ». Au survol, le libellé s'efface
   vers le haut et le numéro prend sa place. Les deux sont superposés dans
   une fenêtre de hauteur fixe, ce qui évite que le bouton change de taille
   au passage de la souris. */

/* Le combiné est posé en absolu : s'il occupait sa place dans la ligne, il
   décalerait le texte vers la droite et « M'appeler » ne serait plus centré
   dans le bouton. */
.appel__tel {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Les deux textes occupent la même case : leur largeur commune est celle du
   plus long, le numéro. Le groupe combiné + texte reste donc centré, quel
   que soit celui des deux qui est affiché. */
.appel__tel-pile {
  display: grid;
  place-items: center;
}
.appel__tel-pile > * { grid-area: 1 / 1; }

.appel__tel-icone {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  margin-top: -8px;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background: currentColor;
  /* combiné téléphonique, dessiné en masque : il suit la couleur du bouton */
  -webkit-mask: var(--combine) center / contain no-repeat;
          mask: var(--combine) center / contain no-repeat;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.appel__tel:hover .appel__tel-icone { transform: rotate(-18deg) scale(1.05); }
/* Marges internes égales : sinon le contenu, centré dans la boîte, se
   retrouve décalé par rapport au bouton lui-même. */
.appel__tel { padding-inline: 2.6rem; }

/* La fenêtre où défilent le libellé et le numéro */
.appel__tel-libelle,
.appel__tel-numero {
  display: block;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), opacity 0.25s ease;
}
/* C'est le numéro, le plus long des deux, qui donne sa largeur au bouton :
   sinon il se retrouverait tronqué au survol. */
.appel__tel-numero { transform: translateY(120%); opacity: 0; white-space: nowrap; }
.appel__tel-libelle { white-space: nowrap; }

.appel__tel:hover .appel__tel-libelle,
.appel__tel:focus-visible .appel__tel-libelle { transform: translateY(-140%); opacity: 0; }
.appel__tel:hover .appel__tel-numero,
.appel__tel:focus-visible .appel__tel-numero { transform: translateY(0); opacity: 1; }

/* Sur écran tactile, il n'y a pas de survol : le numéro est affiché
   d'emblée, sinon il resterait invisible. */
@media (hover: none) {
  .appel__tel-libelle { display: none; }
  .appel__tel-numero { transform: none; opacity: 1; }
}

/* ---------- Missions : accroche, texte court, puces ---------- */

.mission__accroche {
  margin: 0 0 0.5rem;
  font-family: var(--titre);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--bleu-profond);
}
.mission__liste {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.mission__liste li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--gris);
  line-height: 1.5;
}
/* Une coche plutôt qu'une puce : ce sont des choses faites, pas une liste
   de courses. */
.mission__liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--bleu-doux);
  border-bottom: 2px solid var(--bleu-doux);
  transform: rotate(45deg);
}

/* ---------- Bloc « une image simple » : texte et illustration ---------- */

.duo--image { align-items: center; }
/* Photo seule sous une grille, avec sa légende. Largeur limitée à celle
   du fichier pour qu'elle ne soit jamais agrandie (et floue). */
.photo-legende {
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  max-width: 600px;
}
.photo-legende img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--arrondi);
}
.photo-legende figcaption {
  margin-top: 0.75rem;
  text-align: center;
  color: var(--gris);
  font-size: 0.95rem;
}
/* Variante calée à gauche, dans une colonne de texte. */
.photo-legende--colonne { margin-left: 0; }
.photo-legende--colonne figcaption { text-align: left; }

.duo__image { margin: 0; }
.duo__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--arrondi);
}
.section--bleu .duo--image p { color: #C6DAE8; }
.section--bleu .duo--image p + p { margin-top: 0.9rem; }

/* ---------- Section sur fond d'encre ----------
   Le réseau a son propre bloc, plus sombre que le reste du site : il parle
   d'autre chose que du cabinet. */
.section--encre { background: var(--encre); color: #EAF0F4; }
.section--encre h2 { color: #fff; }
.section--encre .surtitre { color: var(--bleu-doux); }
.section--encre .repere__valeur { color: #fff; }
.section--encre .repere__label,
.section--encre .repere__source { color: #B6CEE0; }

/* ---------- Pied de page sur fond bleu profond ----------
   Le pied reprend le bleu du bloc « parrainage ». Tous ses textes et ses
   liens passent donc en clair, sinon ils deviendraient illisibles. */
.pied { color: #C6DAE8; }
.pied a { color: #EAF0F4; }
.pied a:hover { color: #FFFFFF; }
.pied .marque strong, .pied strong { color: #FFFFFF; }
.pied .marque em, .pied em { color: #9FBFD3; }
.pied__bas { border-top-color: rgba(255,255,255,0.16) !important; color: #9FBFD3; }

/* Deux sections de même couleur qui se suivent : on supprime l'espace entre
   elles pour qu'elles se lisent comme un seul bloc. */
.section--colle-bas  { padding-bottom: clamp(1.4rem, 3vw, 2rem); }
.section--colle-haut { padding-top: 0; }

/* Photo dans une section sombre : un léger éclaircissement des noirs évite
   qu'elle ne se fonde dans le fond. */
.section--encre .duo__image img,
.section--bleu  .duo__image img {
  box-shadow: 0 18px 40px -26px rgba(0,0,0,0.7);
}

/* ---------- Parrainage : photo et encadré de même hauteur ----------
   Les deux colonnes sont étirées : la carte prend exactement la hauteur de
   la photo au lieu d'être centrée et plus courte qu'elle. */

.parrain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: stretch;
}

.parrain__image { margin: 0; }
.parrain__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* la photo se recadre plutôt que de se déformer */
  border-radius: var(--arrondi);
  box-shadow: 0 18px 40px -26px rgba(0,0,0,0.7);
}

/* La carte s'étire sur toute la hauteur et centre son contenu. */
.parrain__carte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.6rem, 3vw, 2.4rem);
}

/* Le texte d'introduction court sur toute la largeur du bloc : c'est
   l'en-tête de section qui le bridait à 60 caractères, pas le chapô. */
.section__tete--large { max-width: none; }
.chapo--large { max-width: 92ch; }

@media (max-width: 820px) {
  .parrain { grid-template-columns: 1fr; }
  .parrain__image img { max-height: 320px; }
}

/* Le logo du réseau, posé sur une pastille claire : il est sombre et
   disparaîtrait sur le fond d'encre. */
.logo-reseau {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.7rem 1.1rem;
  background: #fff;
  border-radius: 12px;
}
.logo-reseau img { display: block; width: auto; height: 34px; }

/* =====================================================================
   PAGE « MON ACCOMPAGNEMENT » : MISSIONS EN ONGLETS, OUTILS, PARCOURS
   ===================================================================== */

/* ---------- Les onglets ----------
   Trois grandes cartes cliquables. Sans JavaScript, elles sont masquées
   et les trois missions s'affichent à la suite (voir accompagnement.js). */

.missions__onglets { display: none; }
.missions.est-active .missions__onglets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}

.onglet {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  text-align: left;
  font: inherit;
  color: var(--encre);
  background: rgba(255,255,255,0.55);
  border: 2px solid transparent;
  border-radius: var(--arrondi);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.onglet:hover { background: #fff; transform: translateY(-2px); }
.onglet[aria-selected="true"] {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 12px 28px -18px rgba(28,43,56,0.55);
}

.onglet__icone {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--accent-pale);
  color: var(--accent);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.onglet__icone svg { width: 58%; height: 58%; }
.onglet[aria-selected="true"] .onglet__icone { background: var(--accent); color: #fff; }

.onglet__texte strong { display: block; font-weight: 600; font-size: 1.04rem; line-height: 1.3; }
.onglet__texte em { display: block; font-style: normal; font-size: 0.88rem; color: var(--gris); line-height: 1.35; }

.onglet--a1, .mission--a1 { --accent: var(--a1); --accent-pale: var(--a1-pale); }
.onglet--a2, .mission--a2 { --accent: var(--a2); --accent-pale: var(--a2-pale); }
.onglet--a3, .mission--a3 { --accent: var(--a3); --accent-pale: var(--a3-pale); }

/* ---------- Le panneau d'une mission ---------- */

.mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
  background: #fff;
  border-radius: calc(var(--arrondi) + 4px);
  border-top: 4px solid var(--accent);
  box-shadow: 0 18px 40px -30px rgba(28,43,56,0.6);
}
.mission + .mission { margin-top: 1.2rem; }   /* sans JavaScript, les trois à la suite */
.mission[hidden] { display: none; }
.missions.est-active .mission:not([hidden]) { animation: mission-entree 0.45s cubic-bezier(.2,.7,.2,1); }
@keyframes mission-entree { from { opacity: 0; transform: translateY(10px); } }

/* Le titre de la mission redouble l'onglet : on ne le garde que sans JS. */
.mission__titre { color: var(--accent); }
.missions.est-active .mission__titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.mission__texte > p:not(.mission__accroche) { color: var(--gris); }
.mission .mission__liste li::before { border-color: var(--accent); }

/* ---------- L'outil, à droite ---------- */

.outil {
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  background: var(--accent-pale);
  border-radius: var(--arrondi);
}
.outil__titre {
  margin: 0 0 0.35rem;
  font-family: var(--titre);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--accent);
}
.outil__aide { margin: 0 0 1.1rem; font-size: 0.94rem; color: var(--gris); }
.outil__resultat { margin: 0.9rem 0 1.2rem; font-size: 1.02rem; line-height: 1.5; }
.outil__resultat strong { color: var(--accent); font-weight: 700; }
.outil__verdict { display: block; margin-top: 0.35rem; color: var(--gris); font-size: 0.95rem; }
.outil__note { margin: 0; font-size: 0.8rem; color: var(--gris); }

/* Curseur : libellé à gauche, valeur à droite, glissière en dessous */
.curseur {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.35rem 1rem;
}
.curseur__libelle { font-size: 0.94rem; font-weight: 500; }
.curseur__valeur { font-size: 1.15rem; font-weight: 700; color: var(--encre); font-variant-numeric: tabular-nums; }
.curseur input[type="range"] { grid-column: 1 / -1; }

.outil input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.outil input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(to right, var(--accent) var(--rempli, 50%), rgba(28,43,56,0.13) var(--rempli, 50%));
}
.outil input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(28,43,56,0.13); }
.outil input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--accent); }
.outil input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 2px 6px rgba(28,43,56,0.25);
  transition: transform 0.2s ease;
}
.outil input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
}
.outil input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }

/* Les six mois de réserve : trois indispensables, trois de confort */
.mois {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin: 1rem 0 0;
  counter-reset: mois;
}
.mois span {
  counter-increment: mois;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
}
.mois span::before { content: "Mois " counter(mois); }
.mois span:nth-child(n+4) {
  background: transparent;
  color: var(--accent);
  border: 2px dashed var(--accent);
}

/* Questions à choix : des boutons segmentés */
.question { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.question legend { padding: 0; margin-bottom: 0.5rem; font-size: 0.94rem; font-weight: 500; }
.choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.choix--cinq { grid-template-columns: repeat(5, 1fr); }
.choix label { position: relative; }
.choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix span {
  display: grid;
  place-items: center;
  min-height: 2.6rem;
  padding: 0.4rem 0.5rem;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.25;
  background: #fff;
  border: 1.5px solid rgba(28,43,56,0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.choix label:hover span { border-color: var(--accent); }
.choix input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.choix input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* La jauge du profil */
.jauge { margin: 1.3rem 0 0; }
.jauge__piste {
  position: relative;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(to right, var(--a2), var(--a1) 50%, var(--a5));
}
.jauge__curseur {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--encre);
  box-shadow: 0 3px 8px rgba(28,43,56,0.3);
  transform: translate(-50%, -50%);
  transition: left 0.55s cubic-bezier(.3,1.4,.5,1);
}
.jauge__reperes {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
}

/* La barre du versement : impôt en moins et effort réel, côte à côte */
.barres {
  display: flex;
  height: 44px;
  margin: 1.1rem 0 0.5rem;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.barres__plein { display: block; height: 100%; transition: width 0.5s cubic-bezier(.2,.7,.2,1); }
.barres__plein--gain { background: var(--accent); }
.barres__plein--effort {
  background: repeating-linear-gradient(135deg, rgba(28,43,56,0.1) 0 6px, rgba(28,43,56,0.16) 6px 12px);
}
.barres__legende { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.8rem; color: var(--gris); }
.barres__cle { display: inline-flex; align-items: center; gap: 0.4rem; }
.barres__cle::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.barres__cle--gain::before { background: var(--accent); }
.barres__cle--effort::before { background: rgba(28,43,56,0.16); }

@media (max-width: 900px) {
  .mission { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .missions.est-active .missions__onglets { grid-template-columns: 1fr; gap: 0.5rem; }
  .onglet { padding: 0.75rem 0.9rem; }
  .onglet__icone { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
}
@media (max-width: 420px) {
  .choix--cinq { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Le parcours, en chemin horizontal ----------
   Quatre étapes côte à côte, reliées par un trait. La cinquième, le suivi,
   occupe toute la largeur en dessous : c'est celle qui dure. */

.chemin {
  --pastille: 3.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem 1.4rem;
  position: relative;
}
.chemin::before {
  content: "";
  position: absolute;
  top: calc(var(--pastille) / 2 - 1px);
  left: calc(var(--pastille) / 2);
  right: 12%;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--ciel-fonce) 0 8px, transparent 8px 14px);
}

.pas { position: relative; }
.pas__pastille {
  position: relative;
  z-index: 1;
  width: var(--pastille);
  height: var(--pastille);
  margin-bottom: 1rem;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--accent-pale);
  color: var(--accent);
  box-shadow: 0 0 0 8px var(--fond);
  transition: transform 0.3s ease;
}
.pas__pastille svg { width: 55%; height: 55%; }
.pas:hover .pas__pastille { transform: translateY(-3px) rotate(-4deg); }
.pas h3 { margin-bottom: 0.35rem; }
.pas p { margin: 0; color: var(--gris); font-size: 0.97rem; }

.pas--suivi {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr minmax(220px, 0.8fr);
  gap: 1.2rem clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
  margin-top: 0.6rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--accent-pale);
  border-radius: calc(var(--arrondi) + 4px);
}
.pas--suivi .pas__pastille { margin: 0; background: var(--accent); color: #fff; box-shadow: none; align-self: start; }
.pas--suivi p { color: var(--encre); }

/* Ce qui relance un point : une rangée d'étiquettes */
.declencheurs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.declencheurs li {
  padding: 0.4rem 0.8rem;
  border-radius: 99px;
  background: #fff;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 500;
}
.declencheurs .declencheurs__fixe { background: var(--accent); color: #fff; }

@media (max-width: 980px) {
  .chemin { grid-template-columns: 1fr 1fr; }
  .chemin::before { display: none; }
  .pas--suivi { grid-template-columns: auto 1fr; }
  .declencheurs { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .chemin { grid-template-columns: 1fr; }
  .pas:not(.pas--suivi) { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; }
  .pas:not(.pas--suivi) .pas__pastille { grid-row: span 3; margin: 0; }
  .pas--suivi { grid-template-columns: 1fr; }
}

/* ---------- Questions fréquentes ---------- */

.duo--faq { align-items: start; }
.faq { display: grid; gap: 0.6rem; }
.faq details {
  background: #fff;
  border-radius: var(--arrondi);
  box-shadow: 0 2px 10px -7px rgba(28,43,56,0.4);
  transition: box-shadow 0.25s ease;
}
.faq details[open] { box-shadow: 0 14px 30px -22px rgba(28,43,56,0.55); }
.faq summary {
  position: relative;
  padding: 1.05rem 3.2rem 1.05rem 1.3rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.3rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--bleu);
  border-bottom: 2px solid var(--bleu);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--bleu); }
.faq details p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--gris); }

/* =====================================================================
   BLOC « UN GPS NE CHOISIT PAS OÙ VOUS ALLEZ »
   À gauche, ce que chaque élément du GPS représente. À droite, un écran
   de navigation animé par gps.js.
   ===================================================================== */

.gps-duo {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.gps-texte__intro { color: #C6DAE8; font-size: 1.08rem; max-width: 52ch; }

/* La correspondance GPS → accompagnement, une ligne par élément */
.correspondances {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.correspondances li {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  transition: background-color 0.25s ease;
}
.correspondances li:hover { background: rgba(255,255,255,0.06); }
.correspondances strong { display: block; color: #fff; font-weight: 600; }
.correspondances li > span:last-child { color: #B6CEE0; font-size: 0.97rem; line-height: 1.4; }

.correspondances__icone {
  position: relative;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.correspondances__icone::before { content: ""; position: absolute; inset: 0; margin: auto; }
/* Départ : un cercle cerclé */
.correspondances__icone--depart::before {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 4px var(--bleu-doux);
}
/* Destination : une goutte de repère */
.correspondances__icone--arrivee::before {
  width: 14px; height: 14px;
  background: #E7BE7E;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg) translate(2px, -2px);
}
/* Obstacle : une croix sur fond terre cuite */
.correspondances__icone--obstacle { background: rgba(168,80,60,0.35); }
.correspondances__icone--obstacle::before {
  width: 14px; height: 14px;
  background:
    linear-gradient(45deg,  transparent 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, #fff 42% 58%, transparent 58%);
}
/* Itinéraire : un tracé courbe */
.correspondances__icone--route::before {
  width: 16px; height: 16px;
  border: 3px solid var(--bleu-doux);
  border-color: var(--bleu-doux) var(--bleu-doux) transparent transparent;
  border-radius: 0 100% 0 0;
}
/* Recalcul : une flèche circulaire */
.correspondances__icone--recalcul::before {
  width: 16px; height: 16px;
  border: 3px solid #E7BE7E;
  border-right-color: transparent;
  border-radius: 50%;
}

/* ---------- L'appareil ---------- */

.gps__ecran {
  overflow: hidden;
  background: #fff;
  border-radius: 26px;
  border: 8px solid #142231;
  box-shadow: 0 40px 70px -40px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.08);
}

/* Les deux champs du haut, comme dans une application de navigation */
.gps__trajet {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--trait);
}
.gps__champ {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  background: var(--fond);
  color: var(--encre);
  font-size: 0.95rem;
  line-height: 1.25;
}
.gps__champ small {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}
.gps__champ b { font-weight: 600; }
.gps__point { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; }
.gps__point--depart  { background: #fff; box-shadow: inset 0 0 0 3.5px var(--bleu-profond); }
.gps__point--arrivee { background: var(--ambre); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }

.gps__carte { display: block; width: 100%; height: auto; }

.gps__route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gps__route--a {
  stroke: var(--bleu);
  stroke-width: 9;
  transition: stroke 0.5s ease, stroke-width 0.5s ease, opacity 0.5s ease;
}
.gps__route--b { stroke: var(--a2); stroke-width: 9; }
.gps:not(.est-anime) .gps__route--b,
.gps:not(.est-anime) .gps__obstacle { display: none; }

/* Une fois recalculé, l'ancien itinéraire s'efface en pointillés */
.gps.a-recalcule .gps__route--a {
  stroke: #9AA9B6;
  stroke-width: 5;
  stroke-dasharray: 2 10;
  opacity: 0.8;
}

.gps__obstacle { opacity: 0; transition: opacity 0.3s ease; }
.gps.a-obstacle .gps__obstacle { opacity: 1; animation: gps-pulse 1s ease-in-out 2; transform-box: fill-box; transform-origin: center; }
@keyframes gps-pulse { 50% { opacity: 0.55; } }

/* Le bandeau d'état, sous la carte */
.gps__bandeau {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.3rem;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  background: var(--bleu);
  transition: background-color 0.35s ease;
}
.gps__bandeau[data-etat="alerte"]  { background: var(--a4); }
.gps__bandeau[data-etat="ok"]      { background: var(--a2); }
.gps__bandeau[data-etat="arrivee"] { background: var(--ambre); }

.gps__bandeau-icone {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.9);
}
.gps__bandeau[data-etat="calcul"] .gps__bandeau-icone {
  border-right-color: transparent;
  animation: gps-tourne 0.9s linear infinite;
}
.gps__bandeau[data-etat="alerte"] .gps__bandeau-icone { background: #fff; }
@keyframes gps-tourne { to { transform: rotate(360deg); } }

/* Les trois infos du bas : ce que l'itinéraire détermine */
.gps__infos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  background: #fff;
}
.gps__infos > div { padding: 0.75rem 0.9rem; text-align: center; }
.gps__infos > div + div { border-left: 1px solid var(--trait); }
.gps__infos dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}
.gps__infos dd { margin: 0.15rem 0 0; font-weight: 600; color: var(--encre); font-size: 0.92rem; }

/* Les destinations à essayer, sous l'écran. Masquées sans JavaScript. */
.gps__commandes { display: none; margin-top: 1.2rem; }
.gps.est-anime .gps__commandes { display: block; }
.gps__consigne { margin: 0 0 0.6rem; font-size: 0.9rem; color: #B6CEE0; }
.gps__destinations { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gps__destinations button {
  padding: 0.5rem 0.95rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 99px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.gps__destinations button:hover { border-color: #E7BE7E; }
.gps__destinations button[aria-pressed="true"] { background: #E7BE7E; border-color: #E7BE7E; color: var(--encre); }
.gps__destinations button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 900px) {
  .gps-duo { grid-template-columns: 1fr; }
  .gps { max-width: 560px; }
}
@media (max-width: 420px) {
  .gps__infos dd { font-size: 0.82rem; }
  .gps__infos > div { padding: 0.65rem 0.4rem; }
}

/* =====================================================================
   PAGE « NOUS REJOINDRE » : LES QUATRE PREMIERS BLOCS
   ===================================================================== */

/* ---------- Ouverture : second bouton et accès direct aux rôles ---------- */

.bouton--contour {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.55);
}
.bouton--contour:hover { background: rgba(255,255,255,0.12); border-color: #fff; transform: translateY(-1px); }

.banniere__roles {
  list-style: none;
  margin: clamp(2.2rem, 5vw, 3.2rem) auto 0;
  padding: 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
.banniere__roles a {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: var(--arrondi);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.banniere__roles a:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); }
.banniere__roles strong { display: block; font-family: var(--titre); font-weight: 600; font-size: 1.05rem; color: #fff; }
.banniere__roles span { display: block; font-size: 0.86rem; color: #B6CEE0; }

@media (max-width: 620px) {
  .banniere__roles { grid-template-columns: 1fr; max-width: 340px; }
}

/* ---------- Les questions que je me posais ----------
   À gauche, le récit et le portrait, qui restent à l'écran pendant qu'on
   parcourt les questions. À droite, une question par ligne, avec sa
   réponse courte visible sans rien ouvrir. */

.recit {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.recit__intro { position: sticky; top: 7rem; }
.recit__intro h2 { max-width: 20ch; }
/* Titre en deux lignes (« Peu d'accompagnants, » / « beaucoup
   d'épargnants ») : en capitales Cinzel, il faut une taille modeste pour
   que chaque moitié tienne sur une seule ligne dans la colonne. */
.recit__intro h1 { font-size: clamp(1.45rem, 2.3vw, 1.95rem); max-width: none; line-height: 1.25; }

.recit__portrait {
  position: relative;
  margin: 0 0 1.8rem;
  width: 150px;
}
.recit__portrait img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow: 0 14px 30px -18px rgba(28,43,56,0.6);
}
/* La légende, comme une bulle de parole posée à côté du portrait */
.recit__portrait figcaption {
  position: absolute;
  left: 128px;
  top: 22px;
  width: max-content;
  max-width: 240px;
  padding: 0.7rem 1rem;
  background: var(--ciel);
  border-radius: 16px 16px 16px 4px;
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--bleu-profond);
}

.reponses { display: grid; gap: 0.7rem; counter-reset: reponse; }

.reponse {
  background: #fff;
  border-radius: var(--arrondi);
  box-shadow: 0 2px 10px -7px rgba(28,43,56,0.4);
  border-left: 4px solid transparent;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.reponse[open] { border-left-color: var(--ambre); box-shadow: 0 16px 34px -24px rgba(28,43,56,0.55); }

.reponse summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  cursor: pointer;
  list-style: none;
}
.reponse summary::-webkit-details-marker { display: none; }
.reponse summary:hover .reponse__question { color: var(--bleu); }

.reponse__num {
  font-family: var(--titre);
  font-size: 1.15rem;
  color: var(--bleu-doux);
}
.reponse[open] .reponse__num { color: var(--ambre); }
.reponse__question { font-weight: 600; line-height: 1.35; transition: color 0.2s ease; }

/* La réponse courte, en pastille : elle répond avant même qu'on ouvre */
.reponse__court {
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  background: var(--ciel);
  color: var(--bleu-profond);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.reponse__court--oui { background: var(--a2-pale); color: var(--a2); }

.reponse__corps { padding: 0 1.3rem 1.2rem calc(1.2rem + 2.2rem); }
.reponse__corps p { margin: 0; color: var(--gris); line-height: 1.65; }
.reponse[open] .reponse__corps { animation: reponse-ouvre 0.35s ease; }
@keyframes reponse-ouvre { from { opacity: 0; transform: translateY(-4px); } }

@media (max-width: 900px) {
  .recit { grid-template-columns: 1fr; }
  .recit__intro { position: static; }
}
@media (max-width: 520px) {
  .reponse summary { grid-template-columns: auto 1fr; }
  .reponse__court { grid-column: 2; justify-self: start; }
  .reponse__corps { padding-left: 1.2rem; }
  .recit__portrait figcaption { position: static; margin-top: 0.8rem; max-width: none; }
}

/* ---------- L'écart France / Allemagne ---------- */

.ecart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.ecart__barres,
.ecart__points {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: #fff;
  border-radius: calc(var(--arrondi) + 4px);
  box-shadow: 0 2px 10px -6px rgba(28,43,56,0.35);
}

.ecart__groupe + .ecart__groupe { margin-top: 1.8rem; }
.ecart__groupe h3,
.ecart__question {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

.ecart__ligne {
  display: grid;
  grid-template-columns: 6.2rem 1fr 6.5rem;
  align-items: center;
  gap: 0.8rem;
}
.ecart__ligne + .ecart__ligne { margin-top: 0.6rem; }
.ecart__pays { font-weight: 500; }
.ecart__piste { height: 26px; border-radius: 8px; background: var(--ciel); overflow: hidden; }
.ecart__barre {
  display: block;
  height: 100%;
  width: var(--part);
  border-radius: 8px;
  background: var(--bleu-doux);
}
.ecart__barre--fr { background: var(--ambre); }
.ecart.est-anime .ecart__barre { width: 0; transition: width 1.3s cubic-bezier(.2,.7,.2,1); }
.ecart.est-anime .ecart__groupe + .ecart__groupe .ecart__barre { transition-delay: 0.35s; }
.ecart.est-visible .ecart__barre { width: var(--part); }

.ecart__valeur {
  font-family: var(--titre);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  color: var(--bleu-profond);
  text-align: right;
  white-space: nowrap;
}

/* La foule : un gros point pour le conseiller, un petit par centaine
   d'épargnants qu'il doit suivre. */
.foule + .foule { margin-top: 1.3rem; }
.foule__titre { margin: 0 0 0.5rem; color: var(--gris); }
.foule__titre strong { color: var(--encre); margin-right: 0.4rem; }

.foule__points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.foule__points span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bleu-doux);
}
.foule__points--fr span { background: var(--ambre); opacity: 0.55; }
.foule__points .foule__conseiller {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  background: var(--bleu-profond);
  opacity: 1;
}
.ecart.est-anime .foule__points span { transform: scale(0); transition: transform 0.3s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(0.6s + var(--i, 0) * 18ms); }
.ecart.est-visible .foule__points span { transform: scale(1); }

.foule__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 1.3rem 0 0;
  font-size: 0.82rem;
  color: var(--gris);
}
.foule__cle { width: 10px; height: 10px; border-radius: 50%; background: var(--bleu-doux); margin-left: 0.6rem; }
.foule__cle--conseiller { width: 14px; height: 14px; background: var(--bleu-profond); margin-left: 0; }
.foule__cle--fr { background: var(--ambre); opacity: 0.55; }
.foule__cle--de { margin-left: -2px; }

.ecart__chute {
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--trait);
  font-family: var(--titre);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.4;
  color: var(--encre);
}
.ecart__chute strong { color: var(--ambre); font-weight: 600; }

@media (max-width: 860px) {
  .ecart { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .ecart__ligne { grid-template-columns: 5rem 1fr 4.6rem; gap: 0.5rem; }
}

/* ---------- D'où que vous partiez ---------- */

.departs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.depart {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: #fff;
  border-radius: calc(var(--arrondi) + 2px);
  box-shadow: 0 2px 10px -6px rgba(28,43,56,0.35);
  border-top: 4px solid var(--accent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.depart:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -28px rgba(28,43,56,0.6); }
.depart--a1 { --accent: var(--a1); --accent-pale: var(--a1-pale); }
.depart--a2 { --accent: var(--a2); --accent-pale: var(--a2-pale); }
.depart--a3 { --accent: var(--a3); --accent-pale: var(--a3-pale); }

.depart__icone {
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 1.1rem;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--accent-pale);
  color: var(--accent);
}
.depart__icone svg { width: 56%; height: 56%; }
.depart p { color: var(--gris); }

/* Le lien vers le rôle, posé en bas de la carte */
.depart__lien {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.75rem 0.95rem;
  border-radius: 12px;
  background: var(--accent-pale);
  color: var(--accent);
  text-decoration: none;
  font-size: 0.86rem;
}
.depart__lien span { color: var(--gris); }
.depart__lien strong { font-size: 1rem; white-space: nowrap; }
.depart__lien strong::after { content: " →"; transition: margin 0.2s ease; }
.depart__lien:hover strong::after { margin-left: 4px; }

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

/* Le rôle visé par un lien de la page s'illumine brièvement à l'arrivée */
.role { scroll-margin-top: 7rem; }
.role:target { animation: role-cible 2.2s ease; }
@keyframes role-cible {
  0%, 40% { box-shadow: 0 0 0 3px var(--ambre), 0 18px 40px -24px rgba(28,43,56,0.6); }
}

/* =====================================================================
   PAGE « À PROPOS »
   ===================================================================== */

/* ---------- Profil : nom, métier, trois repères, portrait ---------- */

.profil {
  padding-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(50rem 28rem at 100% 0%, var(--ciel) 0%, transparent 60%),
    var(--fond);
}
.profil__grille {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.profil h1 { margin-bottom: 0.3rem; color: var(--bleu-profond); }
.profil__metier { font-weight: 600; color: var(--bleu); margin: 0 0 1.6rem; }

/* Le texte de présentation : une largeur de lecture confortable, et de
   l'air entre les deux paragraphes. */
.profil .chapo { max-width: 52ch; line-height: 1.7; }
.profil .chapo + .chapo { margin-top: 1.1rem; }

/* Les repères : une simple ligne discrète sous le texte, sans cartes,
   pour ne pas alourdir le bloc. */
.profil__faits {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(28,43,56,0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-size: 0.9rem;
  color: var(--gris);
}
.profil__faits li { display: flex; align-items: baseline; gap: 0.35rem; }
.profil__faits li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ambre);
  transform: translateY(-2px);
}
.profil__faits strong { font-weight: 600; color: var(--bleu-profond); }

.profil__portrait { position: relative; margin: 0; max-width: 400px; justify-self: end; }
.profil__portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--arrondi);
  box-shadow: 0 30px 60px -36px rgba(28,43,56,0.6);
}
/* Un aplat décalé derrière la photo, comme une ombre colorée */
.profil__portrait::before {
  content: "";
  position: absolute;
  inset: 1.4rem -1.4rem -1.4rem 1.4rem;
  border-radius: var(--arrondi);
  background: var(--ciel-fonce);
}

@media (max-width: 820px) {
  .profil__grille { grid-template-columns: 1fr; }
  .profil__portrait { justify-self: start; max-width: 300px; order: -1; }
}

/* ---------- Parcours : le titre à gauche, une frise verticale à droite ----------
   Une seule colonne de dates, lue de haut en bas : l'ordre ne peut pas
   être mal interprété, quelle que soit la largeur de l'écran. */

.parcours-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.parcours-grille__tete h2 { margin-bottom: 0.8rem; }

.parcours {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* Le fil qui relie les dates, du bleu (le passé) à l'ambre (aujourd'hui) */
.parcours::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: 0.55rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--bleu-doux), var(--ambre));
}
.parcours li {
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0 0 1.8rem 2.4rem;
}
.parcours li:last-child { padding-bottom: 0; }
.parcours li::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--bleu-doux);
}
.parcours__actuel::before { border-color: var(--ambre) !important; background: var(--ambre) !important; }
.parcours__annee {
  padding-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleu);
}
.parcours__actuel .parcours__annee { color: var(--ambre); }
.parcours h3 { margin-bottom: 0.3rem; }
.parcours p { margin: 0; color: var(--gris); font-size: 0.97rem; }

.certifs {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.certifs li {
  padding: 0.45rem 0.95rem;
  border-radius: 1rem;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bleu-profond);
}

@media (max-width: 900px) {
  .parcours-grille { grid-template-columns: 1fr; }
}
/* Sur téléphone, la date passe au-dessus du texte */
@media (max-width: 560px) {
  .parcours li { grid-template-columns: 1fr; gap: 0.25rem; padding-left: 2rem; }
}

/* ---------- Cadre réglementaire : le texte et la fiche ---------- */

.cadre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.cadre__texte p { color: #C6DAE8; }
.cadre__texte strong { color: #fff; }

.fiche {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: #fff;
  color: var(--encre);
  border-radius: calc(var(--arrondi) + 4px);
  box-shadow: 0 30px 60px -36px rgba(0,0,0,0.6);
}
.fiche__tete {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1rem;
  margin-bottom: 0.4rem;
  border-bottom: 2px dashed var(--trait);
}
.fiche__sceau {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ciel);
  color: var(--bleu);
}
.fiche__sceau svg { width: 1.6rem; height: 1.6rem; }
.fiche__titre { margin: 0; font-family: var(--titre); font-size: 1.25rem; color: var(--bleu-profond); }
.fiche__sous { margin: 0; font-size: 0.85rem; color: var(--gris); }

.fiche__lignes { margin: 0; }
.fiche__lignes > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--trait);
}
.fiche__lignes dt { font-size: 0.9rem; color: var(--gris); }
.fiche__lignes dd { margin: 0; font-weight: 600; text-align: right; font-size: 0.95rem; }
.fiche__pied { margin: 1rem 0 0; font-size: 0.9rem; }

@media (max-width: 860px) { .cadre { grid-template-columns: 1fr; } }
@media (max-width: 440px) {
  .fiche__lignes > div { flex-direction: column; gap: 0.15rem; }
  .fiche__lignes dd { text-align: left; }
}

/* ---------- Formulaire de contact : champ piège et message d'envoi ---------- */

/* Invisible pour les visiteurs, mais rempli par les robots : le script
   d'envoi ignore tout message où il contient quelque chose. */
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulaire__etat:empty { display: none; }
.formulaire__etat {
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  background: var(--ciel);
  color: var(--bleu-profond);
}
.formulaire__etat--ok     { background: var(--a2-pale); color: var(--a2); font-weight: 600; }
.formulaire__etat--erreur { background: var(--a4-pale); color: var(--a4); }