/* =========================================================================
   FEUILLE DE STYLE UNIQUE DU SITE
   Sommaire :
     1. Marque et variables (à modifier ici pour changer l'identité)
     2. Polices
     3. Base
     4. Mise en page commune
     5. En-tête et navigation
     6. Boutons
     7. Cadres chanfreinés avec bordure
     8. Hero et diagramme animé
     9. Services
    10. Problèmes fréquents
    11. Méthode
    12. FAQ
    13. À propos
    14. Contact
    15. Pied de page
    16. Page CV
    17. Page Mentions légales
    18. Mouvement réduit
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. MARQUE ET VARIABLES
   Les couleurs portent le nom de leur rôle, jamais celui de leur valeur.
   Pour changer la palette, il suffit de modifier ce bloc.
   ------------------------------------------------------------------------- */
:root {
  /* Couleurs de marque */
  --couleur-fond: #F5F4EF;
  --couleur-texte: #1B2024;
  --couleur-texte-doux: #3A3F42;
  --couleur-texte-discret: #5A6165;

  /* Bleu et rouge de marque : versions claires du logo (#7FA0CF et #E8887A).
     Trop clairs pour du texte sur fond crème, d'où les variables « -texte »
     (versions foncées) utilisées pour tout texte et tout anneau de focus. */
  --couleur-accent: #7FA0CF;
  --couleur-accent-survol: #6A8FC4;
  --couleur-accent-texte: #1F3A5F;
  --couleur-accent-texte-survol: #182D4A;
  --couleur-accent-clair: #E2E9F4;
  --couleur-accent-clair-survol: #D2DDEE;
  --couleur-accent-trait: #A9BDDA;
  --couleur-accent-trait-doux: #C9D6E8;

  --couleur-detail: #E8887A;
  --couleur-detail-texte: #B5483A;

  /* Logo : texte, moitié haute (bleu) et moitié basse (rouge) de la X */
  --logo-texte: #1B2024;
  --logo-bleu: #7FA0CF;
  --logo-rouge: #E8887A;

  --couleur-ligne: #D5D9DA;
  --couleur-sur-accent: #14263F;

  /* Rythme des sections : teinte claire et bande sombre */
  --couleur-fond-teinte: #ECEEF1;
  --couleur-ligne-teinte: #C5CCD6;
  --couleur-bande: #14263F;
  --couleur-detail-sur-bande: #E8887A;
  --couleur-texte-sur-bande: #D3D9E2;

  /* Polices */
  --police-titre: 'General Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --police-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Tailles de texte */
  --taille-etiquette: 0.8125rem;
  --taille-petite: 0.9375rem;
  --taille-texte: 1rem;
  --taille-confort: 1.0625rem;

  /* Système d'espacement */
  --espace-xs: 8px;
  --espace-s: 16px;
  --espace-m: 24px;
  --espace-l: 40px;
  --espace-xl: 64px;
  --espace-section: clamp(72px, 9vw, 120px);

  /* Mise en page */
  --largeur-max: 1180px;
  --gouttiere: 32px;

  /* Chanfreins */
  --chanfrein-s: 7px;
  --chanfrein-m: 14px;
  --chanfrein-l: 18px;
}


/* -------------------------------------------------------------------------
   2. POLICES
   Auto-hébergées dans /fonts : aucune requête vers un service tiers.
   General Sans : déposer les fichiers dans /fonts et ajuster les noms ci-dessous.
   Tant qu'ils sont absents, le navigateur utilise Inter à la place.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'General Sans';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/GeneralSans-Bold.woff2') format('woff2');
}


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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--espace-m);
}

body {
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--couleur-accent-texte);
}

:focus-visible {
  outline: 2px solid var(--couleur-detail-texte);
  outline-offset: 3px;
}

.lien-evitement {
  position: absolute;
  top: var(--espace-xs);
  left: var(--espace-xs);
  z-index: 10;
  padding: 10px 16px;
  background: var(--couleur-accent);
  color: var(--couleur-sur-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.lien-evitement:focus {
  transform: none;
}

.icone {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* -------------------------------------------------------------------------
   4. MISE EN PAGE COMMUNE
   ------------------------------------------------------------------------- */
.conteneur {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.section {
  padding-bottom: var(--espace-section);
}

/* Bandes : fond pleine largeur, le contenu reste dans .conteneur */
.bande {
  padding-top: var(--espace-section);
}
.bande--teinte {
  background: var(--couleur-fond-teinte);
}
/* Bande sombre : on redéfinit les variables de rôle, tout le contenu suit */
.bande--marine {
  --couleur-fond: var(--couleur-bande);
  --couleur-texte: #FFFFFF;
  --couleur-texte-doux: var(--couleur-texte-sur-bande);
  --couleur-accent: #FFFFFF;
  --couleur-accent-texte: #FFFFFF;
  --couleur-accent-texte-survol: #FFFFFF;
  --couleur-detail-texte: var(--couleur-detail-sur-bande);
  --couleur-accent-trait: #5C7090;
  --couleur-accent-clair: rgba(255, 255, 255, 0.1);
  --couleur-detail: var(--couleur-detail-sur-bande);
  --couleur-sur-accent: var(--couleur-bande);
  --logo-texte: #FFFFFF;
  --logo-bleu: #7FA0CF;
  --logo-rouge: #E8887A;
  background: var(--couleur-bande);
  color: var(--couleur-texte);
}

.entete-section {
  margin-bottom: 48px;
}

.entete-section h2,
.cv-section h2 {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.surtitre {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  margin-bottom: 20px;
  color: var(--couleur-accent-texte);
  font-size: var(--taille-etiquette);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.surtitre::before {
  content: '';
  width: 11px;
  height: 14px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, var(--logo-bleu) 50%, var(--logo-rouge) 50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 560 700%22%3E%3Cg transform=%22translate%280%2C700%29 scale%281%2C-1%29%22%3E%3Cpath d=%22M0.4 622.6 L0.0 700.0 L124.8 700.0 L124.8 634.2 L280.0 498.0 L435.2 634.2 L435.2 700.0 L560.0 700.0 L558.7 615.1 L540.2 572.8 L323.6 379.8 L291.7 365.0 L262.5 366.2 L241.0 376.2 L34.5 557.1 L11.3 586.0Z%22/%3E%3Cpath d=%22M124.8 0.0 L0.0 0.0 L0.1 74.6 L6.9 104.7 L34.5 142.9 L236.4 320.2 L268.3 335.0 L297.5 333.8 L323.6 320.2 L529.4 139.3 L548.7 114.0 L557.7 90.0 L560.0 0.0 L435.2 0.0 L435.2 65.8 L280.0 202.0 L124.8 65.8Z%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 560 700%22%3E%3Cg transform=%22translate%280%2C700%29 scale%281%2C-1%29%22%3E%3Cpath d=%22M0.4 622.6 L0.0 700.0 L124.8 700.0 L124.8 634.2 L280.0 498.0 L435.2 634.2 L435.2 700.0 L560.0 700.0 L558.7 615.1 L540.2 572.8 L323.6 379.8 L291.7 365.0 L262.5 366.2 L241.0 376.2 L34.5 557.1 L11.3 586.0Z%22/%3E%3Cpath d=%22M124.8 0.0 L0.0 0.0 L0.1 74.6 L6.9 104.7 L34.5 142.9 L236.4 320.2 L268.3 335.0 L297.5 333.8 L323.6 320.2 L529.4 139.3 L548.7 114.0 L557.7 90.0 L560.0 0.0 L435.2 0.0 L435.2 65.8 L280.0 202.0 L124.8 65.8Z%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}


/* -------------------------------------------------------------------------
   5. EN-TÊTE ET NAVIGATION
   ------------------------------------------------------------------------- */
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espace-s) var(--espace-m);
  padding-top: 56px;
  padding-bottom: 36px;
}

.marque {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.marque .logo {
  height: 32px;
  width: auto;
  display: block;
}

.navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.navigation a {
  position: relative;
  padding: 4px 0;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-petite);
  font-weight: 500;
  text-decoration: none;
  transition: color .25s ease;
}
/* Trait bicolore (bleu puis rouge) qui se déploie depuis la gauche */
.navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--couleur-accent) 50%, var(--couleur-detail) 50%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.navigation a:hover,
.navigation a:focus-visible {
  color: var(--couleur-texte);
}
.navigation a:hover::after,
.navigation a:focus-visible::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .navigation a, .navigation a::after { transition: none; }
}

@media (max-width: 640px) {
  .entete {
    padding-top: 32px;
    padding-bottom: 24px;
  }
  .navigation {
    gap: 8px 16px;
  }
  .navigation a {
    font-size: var(--taille-etiquette);
  }
}


/* -------------------------------------------------------------------------
   6. BOUTONS
   ------------------------------------------------------------------------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s);
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px 14px 26px;
  font-family: var(--police-texte);
  font-size: var(--taille-petite);
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.bouton:hover {
  transform: translateY(-2px);
}
.bouton .icone {
  width: 17px;
  height: 17px;
}

.bouton--principal {
  background: var(--couleur-accent);
  color: var(--couleur-sur-accent);
  clip-path: polygon(0 0, calc(100% - var(--chanfrein-m)) 0, 100% var(--chanfrein-m), 100% 100%, 0 100%);
}
.bouton--principal:hover {
  background: var(--couleur-accent-survol);
}
.bouton--principal:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--couleur-detail-texte);
}

.bouton--secondaire {
  --chanfrein: var(--chanfrein-m);
  --epaisseur: 1.5px;
  --trait: var(--couleur-accent);
  --fond: var(--couleur-fond);
  color: var(--couleur-accent-texte);
}
.bouton--secondaire:hover {
  --fond: var(--couleur-accent-clair);
}
.bouton--secondaire:focus-visible {
  outline: none;
  --trait: var(--couleur-detail);
}


/* -------------------------------------------------------------------------
   7. CADRES CHANFREINÉS AVEC BORDURE
   Un clip-path coupe la bordure CSS dans l'angle. On peint donc la bordure
   avec le fond de l'élément, et on pose par-dessus un second calque, inséré
   de l'épaisseur voulue, avec le chanfrein réduit en proportion.
   Variables : --chanfrein, --epaisseur, --trait, --fond
   ------------------------------------------------------------------------- */
.bouton--secondaire,
.pilier,
.moyens li,
.etape-repere,
.chrono-date,
.formation-icone,
.interets li {
  position: relative;
  background: var(--trait);
  clip-path: polygon(0 0, calc(100% - var(--chanfrein)) 0, 100% var(--chanfrein), 100% 100%, 0 100%);
}

.bouton--secondaire::before,
.pilier::before,
.moyens li::before,
.etape-repere::before,
.chrono-date::before,
.formation-icone::before,
.interets li::before {
  content: '';
  position: absolute;
  inset: var(--epaisseur);
  z-index: -1;
  background: var(--fond);
  --chanfrein-interne: calc(var(--chanfrein) - var(--epaisseur) * 0.586);
  clip-path: polygon(0 0, calc(100% - var(--chanfrein-interne)) 0, 100% var(--chanfrein-interne), 100% 100%, 0 100%);
}


/* -------------------------------------------------------------------------
   8. HERO ET DIAGRAMME ANIMÉ
   ------------------------------------------------------------------------- */
.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espace-l);
  padding-top: 100px;
  padding-bottom: var(--espace-xl);
}

.hero-texte {
  max-width: 620px;
}

.hero h1 {
  max-width: 820px;
  margin-bottom: 28px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw + 1rem, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hero-ligne {
  max-width: 620px;
  margin: 0 0 20px;
  color: var(--couleur-accent-texte);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.2vw + 0.8rem, 1.3rem);
  line-height: 1.35;
}

.accroche {
  max-width: 620px;
  margin-bottom: 44px;
  color: var(--couleur-texte-doux);
  font-size: 1.1875rem;
  line-height: 1.6;
}

.hero .actions {
  margin-bottom: 28px;
}
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 72px;
  color: var(--couleur-accent-texte);
  font-size: var(--taille-petite);
  font-weight: 600;
  text-decoration: none;
}
.lien-fleche .icone {
  transition: transform .15s ease;
}
.lien-fleche:hover {
  text-decoration: underline;
}
.lien-fleche:hover .icone {
  transform: translateX(3px);
}

.pile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-top: 36px;
  border-top: 1px solid var(--couleur-ligne);
}
.pile li {
  padding: 6px 10px;
  border-radius: 2px;
  background: var(--couleur-accent-clair);
  color: var(--couleur-accent-texte);
  font-size: var(--taille-etiquette);
  letter-spacing: 0.02em;
}

/* Diagramme : un flux se sépare en deux branches, puis se rejoint.
   Chronologie d'un cycle : 6 s. L'entrée dure environ 2 s (délai de 2 s). */
.diagramme {
  --etat-animation: running;
  flex-shrink: 0;
  width: 520px;
  max-width: 100%;
  height: auto;
  margin-top: 8px;
}
.diagramme.est-en-pause {
  --etat-animation: paused;
}

.diagramme-entree {
  opacity: 0;
  animation: diagramme-entree .5s ease-out forwards;
  animation-delay: var(--delai);
  animation-play-state: var(--etat-animation);
}
@keyframes diagramme-entree {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.diagramme-trace {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: diagramme-trace .6s ease-out forwards;
  animation-delay: var(--delai);
  animation-play-state: var(--etat-animation);
}
@keyframes diagramme-trace {
  to { stroke-dashoffset: 0; }
}

.noeud-flottant {
  animation: noeud-flottant 5s ease-in-out infinite alternate;
  animation-play-state: var(--etat-animation);
}
.noeud-flottant--2 { animation-duration: 6.4s; animation-delay: -1.8s; }
.noeud-flottant--3 { animation-duration: 5.6s; animation-delay: -3.1s; }
.noeud-flottant--4 { animation-duration: 7.2s; animation-delay: -0.9s; }
@keyframes noeud-flottant {
  from { transform: translateY(-4px); }
  to   { transform: translateY(4px); }
}

.noeud-impulsion {
  transform-box: fill-box;
  transform-origin: center;
  animation: noeud-impulsion 6s ease-in-out infinite;
  animation-delay: var(--delai);
  animation-play-state: var(--etat-animation);
}
@keyframes noeud-impulsion {
  0%   { transform: scale(1); }
  4%   { transform: scale(1.08); }
  10%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.noeud-bordure {
  animation: noeud-bordure 6s ease-in-out infinite;
  animation-delay: var(--delai);
  animation-play-state: var(--etat-animation);
}
@keyframes noeud-bordure {
  0%   { stroke: var(--couleur-accent); }
  4%   { stroke: var(--couleur-detail); }
  10%  { stroke: var(--couleur-accent); }
  100% { stroke: var(--couleur-accent); }
}

.noeud-icone {
  opacity: 0;
  animation: noeud-icone 9s ease-in-out infinite;
  animation-play-state: var(--etat-animation);
}
.noeud--2 .noeud-icone { animation-duration: 10.5s; }
.noeud--3 .noeud-icone { animation-duration: 12s; }
.noeud--4 .noeud-icone { animation-duration: 9.6s; }
@keyframes noeud-icone {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  30%  { opacity: 1; }
  36%  { opacity: 0; }
  100% { opacity: 0; }
}
.noeud--1 .icone-a { animation-delay: 0s; }
.noeud--1 .icone-b { animation-delay: -3s; }
.noeud--1 .icone-c { animation-delay: -6s; }
.noeud--2 .icone-a { animation-delay: -1s; }
.noeud--2 .icone-b { animation-delay: -4.5s; }
.noeud--2 .icone-c { animation-delay: -8s; }
.noeud--3 .icone-a { animation-delay: -2s; }
.noeud--3 .icone-b { animation-delay: -6s; }
.noeud--3 .icone-c { animation-delay: -10s; }
.noeud--4 .icone-a { animation-delay: -3s; }
.noeud--4 .icone-b { animation-delay: -6.2s; }
.noeud--4 .icone-c { animation-delay: -9.4s; }

/* Couleurs du diagramme : tout vient des variables de marque */
.diagramme-cadre {
  fill: none;
  stroke: var(--couleur-accent);
  stroke-width: 1.5;
}
.diagramme-origine {
  fill: var(--couleur-detail);
}
.diagramme-trait {
  fill: none;
  stroke: var(--couleur-accent-trait);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}
.diagramme-trace {
  fill: none;
  stroke: #fff;
  stroke-width: 8;
}
.noeud-forme {
  fill: var(--couleur-fond);
  stroke: var(--couleur-accent);
  stroke-width: 1.5;
}
.noeud--4 .noeud-forme {
  fill: var(--couleur-accent);
}
.noeud-icones {
  fill: none;
  stroke: var(--couleur-accent-texte);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.noeud--4 .noeud-icones {
  stroke: var(--couleur-sur-accent);
}

/* Particules : bleu vers rouge à l'aller, rouge vers bleu au retour */
.particule--aller {
  fill: var(--couleur-accent);
  animation: particule-aller 6s linear infinite;
  animation-delay: 2s;
  animation-play-state: var(--etat-animation);
}
.particule--retour {
  fill: var(--couleur-detail);
  animation: particule-retour 6s linear infinite;
  animation-delay: 2s;
  animation-play-state: var(--etat-animation);
}
.particule--fusion {
  fill: var(--couleur-accent);
}
@keyframes particule-aller {
  0%, 5%    { fill: var(--couleur-accent); }
  35%, 100% { fill: var(--couleur-detail); }
}
@keyframes particule-retour {
  0%, 37%   { fill: var(--couleur-detail); }
  67%, 100% { fill: var(--couleur-accent); }
}

@media (max-width: 820px) {
  .hero {
    flex-direction: column;
    gap: 0;
    padding-top: 8px;
  }
  .hero-texte {
    max-width: none;
  }
  .lien-fleche {
    margin-bottom: 48px;
  }
  /* sur mobile, le diagramme vient juste après la barre de navigation */
  .diagramme {
    order: -1;
    width: 100%;
    max-width: 380px;
    margin: 0 auto 40px;
  }
}

@media (max-width: 640px) {
  .actions {
    flex-direction: column;
  }
  .bouton {
    justify-content: center;
    text-align: center;
  }
  .pile {
    gap: 10px 16px;
  }
}


/* -------------------------------------------------------------------------
   9. SERVICES
   ------------------------------------------------------------------------- */
.services-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.pilier {
  --chanfrein: var(--chanfrein-l);
  --epaisseur: 1px;
  --trait: var(--couleur-ligne);
  --fond: var(--couleur-fond);
  padding: 44px 36px;
  transition: transform .15s ease;
}
.pilier:hover {
  transform: translateY(-2px);
}
/* petit filet rouge qui se trace au survol */
.pilier::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--couleur-detail);
  transition: width .35s ease;
}
.pilier:hover::after {
  width: calc(100% - var(--chanfrein-l));
}

.pilier-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 28px;
  border: 1.5px solid var(--couleur-detail);
  border-radius: 50%;
  color: var(--couleur-detail-texte);
  font-size: 24px;
}

.pilier h3 {
  margin-bottom: 14px;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pilier p {
  color: var(--couleur-texte-doux);
  font-size: var(--taille-petite);
  line-height: 1.6;
}

@media (max-width: 820px) {
  .services-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* -------------------------------------------------------------------------
   10. PROBLÈMES FRÉQUENTS
   ------------------------------------------------------------------------- */
.problemes-intro {
  margin-bottom: 10px;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-confort);
  line-height: 1.7;
}
.problemes-stat {
  margin-bottom: 10px;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-petite);
  line-height: 1.6;
}
.problemes-source {
  margin-bottom: 44px;
  color: var(--couleur-texte-discret);
  font-size: var(--taille-etiquette);
}

.cas {
  position: relative;
  padding: 32px 0;
  border-top: 1px solid var(--couleur-ligne);
}
.cas::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--couleur-detail);
  transition: width .35s ease;
}
.cas:hover::before {
  width: 72px;
}
.cas:last-child {
  border-bottom: 1px solid var(--couleur-ligne);
}

.cas-titre {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.cas-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: var(--couleur-accent-clair);
  color: var(--couleur-accent-texte);
  font-size: 19px;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}
.cas-numero {
  flex-shrink: 0;
  color: var(--couleur-texte-discret);
  font-size: var(--taille-etiquette);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.cas-titre h3 {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.cas-paire {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--espace-m);
  align-items: stretch;
}

.etat {
  padding: 20px 22px;
}
.etat-etiquette {
  display: block;
  margin-bottom: 9px;
  font-size: var(--taille-etiquette);
  letter-spacing: 0.06em;
}
.etat p {
  font-size: var(--taille-petite);
  line-height: 1.6;
}

.etat--avant {
  border: 1px dashed var(--couleur-accent-trait);
}
.etat--avant .etat-etiquette {
  color: var(--couleur-texte-discret);
}
.etat--avant p {
  color: var(--couleur-texte-discret);
}

.etat--apres {
  background: var(--couleur-accent);
  clip-path: polygon(0 0, calc(100% - var(--chanfrein-m)) 0, 100% var(--chanfrein-m), 100% 100%, 0 100%);
}
.etat--apres .etat-etiquette {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--couleur-sur-accent);
  font-weight: 600;
}
.etat--apres .etat-etiquette::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--couleur-detail-sur-bande);
}
.etat--apres p {
  color: #E6EAF0;
}

.cas-fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--couleur-detail-texte);
  font-size: 20px;
}

/* Rappel des moyens techniques, pour le lecteur technique */
.moyens {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  margin-top: 18px;
  padding-left: 52px;
}
.moyens-etiquette {
  margin-right: 4px;
  color: var(--couleur-texte-discret);
  font-size: var(--taille-etiquette);
  letter-spacing: 0.05em;
}
.moyens li:not(.moyens-etiquette) {
  --chanfrein: var(--chanfrein-s);
  --epaisseur: 1px;
  --trait: var(--couleur-accent-trait);
  --fond: var(--couleur-fond);
  padding: 4px 9px;
  color: var(--couleur-accent-texte);
  font-size: var(--taille-etiquette);
}
.moyens .moyens-etiquette {
  background: none;
  clip-path: none;
}
.moyens .moyens-etiquette::before {
  content: none;
}

@media (max-width: 720px) {
  .cas-paire {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .cas-fleche {
    transform: rotate(90deg);
  }
  .moyens {
    padding-left: 0;
  }
}


/* -------------------------------------------------------------------------
   11. MÉTHODE
   Un rail vertical avance avec le défilement (script.js renseigne --progression).
   ------------------------------------------------------------------------- */
.rail {
  --rail-x: 15px;
  position: relative;
}
.rail::before {
  content: '';
  position: absolute;
  left: var(--rail-x);
  top: 14px;
  bottom: 14px;
  border-left: 1.5px dashed var(--couleur-accent-trait);
}
.rail::after {
  content: '';
  position: absolute;
  left: var(--rail-x);
  top: 14px;
  height: var(--progression, 0px);
  border-left: 1.5px solid var(--couleur-accent);
  transition: height .12s linear;
}
.rail-point {
  position: absolute;
  left: var(--rail-x);
  top: 14px;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  background: var(--couleur-detail);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
  transform: translateY(var(--progression, 0px));
  transition: transform .12s linear;
}

.etapes {
  padding-left: 72px;
}
.etape {
  position: relative;
  padding-bottom: 56px;
}
.etape:last-child {
  padding-bottom: 0;
}

.etape-repere {
  --chanfrein: 11px;
  --epaisseur: 1.5px;
  --trait: var(--couleur-accent-trait);
  --fond: var(--couleur-fond);
  position: absolute;
  left: -72px;
  top: -4px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--couleur-accent-texte);
  font-size: var(--taille-etiquette);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color .3s ease;
}
.etape-repere::before {
  transition: background .3s ease;
}
.etape.est-atteinte .etape-repere {
  --trait: var(--couleur-accent);
  color: var(--couleur-sur-accent);
}
.etape.est-atteinte .etape-repere::before {
  background: var(--couleur-accent);
}

.etape h3 {
  margin-bottom: var(--espace-s);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.etape-verbe {
  display: inline-block;
  margin-left: 12px;
  padding: 5px 10px;
  background: var(--couleur-accent-clair);
  color: var(--couleur-accent-texte);
  font-family: var(--police-texte);
  font-weight: 500;
  font-size: var(--taille-etiquette);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.etape p {
  max-width: 640px;
  margin-bottom: 10px;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-petite);
  line-height: 1.65;
}
.etape p:last-child {
  margin-bottom: 0;
}
.etape-etiquette {
  color: var(--couleur-texte);
  font-weight: 600;
}

@media (max-width: 640px) {
  .etapes {
    padding-left: 48px;
  }
  .etape-repere {
    left: -48px;
    width: 30px;
    height: 30px;
  }
  .etape-verbe {
    display: block;
    width: fit-content;
    margin: 10px 0 0;
  }
}


/* -------------------------------------------------------------------------
   12. FAQ
   Éléments <details> natifs : accessibles au clavier, sans script.
   ------------------------------------------------------------------------- */
.faq-mise-en-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: var(--espace-xl);
  align-items: start;
}
.faq-intro {
  position: sticky;
  top: var(--espace-l);
}
.faq-intro h2 {
  margin-bottom: 20px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.faq-intro p:not(.surtitre) {
  margin-bottom: 24px;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-petite);
  line-height: 1.65;
}
.faq-intro .lien-fleche {
  margin-bottom: 0;
}
.faq-liste {
  border-bottom: 1px solid var(--couleur-ligne-teinte);
}
.faq-item {
  border-top: 1px solid var(--couleur-ligne-teinte);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-m);
  padding: 22px 0;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  color: var(--couleur-accent-texte);
}
/* signe plus tracé en dégradés, qui devient un signe moins à l'ouverture */
.faq-item summary::after {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background:
    linear-gradient(var(--couleur-detail), var(--couleur-detail)) center / 100% 2px no-repeat,
    linear-gradient(var(--couleur-detail), var(--couleur-detail)) center / 2px 100% no-repeat;
  transition: background-size .2s ease;
}
.faq-item[open] summary::after {
  background-size: 100% 2px, 2px 0;
}
.faq-item p {
  max-width: 720px;
  padding-bottom: 24px;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-petite);
  line-height: 1.7;
}
@media (max-width: 900px) {
  .faq-mise-en-page {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espace-l);
  }
  .faq-intro {
    position: static;
  }
}

/* valeur à renseigner avant la mise en ligne */
.a-completer {
  background: #FFF1B8;
  color: var(--couleur-texte);
}


/* -------------------------------------------------------------------------
   13. À PROPOS
   ------------------------------------------------------------------------- */
.apropos {
  --equerre: 22px;
}

/* Bloc de texte encadré par quatre équerres */
.cadre-apropos {
  position: relative;
  padding: 40px 44px;
}
.cadre-apropos::before,
.cadre-apropos::after,
.equerres::before,
.equerres::after {
  content: '';
  position: absolute;
  width: var(--equerre);
  height: var(--equerre);
  pointer-events: none;
}
.cadre-apropos::before {
  top: 0;
  left: 0;
  border-top: 1.5px solid var(--couleur-accent);
  border-left: 1.5px solid var(--couleur-accent);
}
.cadre-apropos::after {
  bottom: 0;
  right: 0;
  border-bottom: 1.5px solid var(--couleur-accent);
  border-right: 1.5px solid var(--couleur-accent);
}
.equerres {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.equerres::before {
  top: 0;
  right: 0;
  border-top: 1.5px solid var(--couleur-accent);
  border-right: 1.5px solid var(--couleur-accent);
}
.equerres::after {
  bottom: 0;
  left: 0;
  border-bottom: 1.5px solid var(--couleur-accent);
  border-left: 1.5px solid var(--couleur-accent);
}

/* Point d'origine du plan */
.origine {
  position: absolute;
  top: -3.5px;
  left: -3.5px;
  width: 7px;
  height: 7px;
  background: var(--couleur-detail);
  clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 0 100%);
}

.apropos-texte p {
  margin-bottom: 20px;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-confort);
  line-height: 1.75;
}
.apropos-texte p:last-child {
  margin-bottom: 0;
}
.apropos-texte mark {
  margin: 0 -1px;
  padding: 2px 5px;
  background: var(--couleur-accent-clair);
  color: var(--couleur-accent-texte);
  font-weight: 600;
}

@media (max-width: 640px) {
  .apropos {
    --equerre: 16px;
  }
  .cadre-apropos {
    padding: 28px 22px;
  }
}


/* -------------------------------------------------------------------------
   14. CONTACT
   ------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espace-l);
  align-items: center;
  padding: 72px 64px;
  background: var(--couleur-accent-clair);
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%);
}
.contact h2 {
  max-width: 600px;
  margin-bottom: 18px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw + 0.6rem, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.contact p {
  max-width: 560px;
  margin-bottom: 36px;
  color: var(--couleur-accent-texte-survol);
  font-size: var(--taille-confort);
  line-height: 1.65;
}
.contact .bouton--secondaire {
  --fond: var(--couleur-accent-clair);
}
.contact .bouton--secondaire:hover {
  --fond: var(--couleur-accent-clair-survol);
}
.contact .contact-note {
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--couleur-accent-trait-doux);
  font-size: var(--taille-etiquette);
}

.contact-visuel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
/* l'image occupe tout le bloc sans être rognée ni déformée */
.contact-visuel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 900px) {
  .contact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espace-l);
  }
  .contact-visuel {
    width: 300px;
  }
}
@media (max-width: 640px) {
  .contact {
    padding: 44px 28px;
  }
  .contact-visuel {
    display: none;
  }
}


/* -------------------------------------------------------------------------
   15. PIED DE PAGE
   ------------------------------------------------------------------------- */
.pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espace-m);
  padding-top: var(--espace-l);
  padding-bottom: 88px;
  border-top: 1px solid var(--couleur-ligne);
}
.pied-marque {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.pied-marque .logo {
  height: 22px;
  width: auto;
  display: block;
  align-self: center;
}
.pied-signature {
  color: var(--couleur-texte-discret);
  font-size: var(--taille-etiquette);
}
.pied-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.pied-liens a {
  color: var(--couleur-texte-doux);
  font-size: var(--taille-etiquette);
  text-decoration: none;
}
.pied-liens a:hover {
  color: var(--couleur-texte);
  text-decoration: underline;
}
.pied-legal {
  color: var(--couleur-texte-discret);
  font-size: var(--taille-etiquette);
}


/* -------------------------------------------------------------------------
   16. PAGE CV
   ------------------------------------------------------------------------- */
.cv-entete {
  padding-top: var(--espace-m);
  padding-bottom: 72px;
}
.cv-entete h1 {
  margin-bottom: 14px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(2.1rem, 4vw + 0.6rem, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.cv-role {
  margin-bottom: 26px;
  color: var(--couleur-accent-texte);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw + 0.5rem, 1.35rem);
}
.cv-accroche {
  max-width: 720px;
  margin-bottom: 32px;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-confort);
  line-height: 1.7;
}
.cv-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-bottom: 36px;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-petite);
}
.cv-contact li {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
}
.cv-contact a {
  text-decoration: none;
}
.cv-contact a:hover {
  text-decoration: underline;
}
.cv-contact .icone {
  color: var(--couleur-accent-texte);
  font-size: 16px;
}

.bouton-note {
  display: block;
  margin-top: 12px;
  color: var(--couleur-texte-discret);
  font-size: var(--taille-etiquette);
}

.cv-section {
  padding-bottom: 96px;
}
.cv-section .entete-section {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  margin-bottom: 44px;
}
.cv-section h2 {
  font-size: clamp(1.5rem, 2.2vw + 0.6rem, 2rem);
  letter-spacing: -0.015em;
}
.section-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--couleur-accent-clair);
  color: var(--couleur-accent-texte);
  font-size: 21px;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}
/* filet technique terminé par un repère rouge */
.section-filet {
  position: relative;
  flex: 1;
  min-width: 24px;
  height: 1px;
  background: var(--couleur-ligne);
}
.section-filet::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  background: var(--couleur-detail);
  clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 0 100%);
}

/* Expériences : rail vertical */
.chronologie {
  --rail-x: 31px;
  position: relative;
  padding-left: 104px;
}
.chronologie::before {
  content: '';
  position: absolute;
  left: var(--rail-x);
  top: 15px;
  bottom: 14px;
  border-left: 1.5px dashed var(--couleur-accent-trait);
}
.chrono-item {
  position: relative;
  padding-bottom: 48px;
}
.chrono-item:last-child {
  padding-bottom: 0;
}
.chrono-date {
  --chanfrein: 9px;
  --epaisseur: 1.5px;
  --trait: var(--couleur-accent);
  --fond: var(--couleur-accent-clair);
  position: absolute;
  left: -104px;
  top: -4px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 30px;
  color: var(--couleur-accent-texte);
  font-size: var(--taille-etiquette);
  font-weight: 600;
}
.chrono-item:first-child .chrono-date {
  --fond: var(--couleur-accent);
  color: var(--couleur-sur-accent);
}
.chrono-item h3 {
  margin-bottom: 6px;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.meta {
  margin-bottom: 14px;
  color: var(--couleur-texte-discret);
  font-size: var(--taille-etiquette);
}
.chrono-item p:not(.meta) {
  max-width: 760px;
  color: var(--couleur-texte-doux);
  font-size: 1rem;
  line-height: 1.7;
}

/* Formation */
.formation {
  display: grid;
  gap: 14px;
}
.formation li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0 18px 24px;
  border-left: 1.5px solid var(--couleur-ligne);
  transition: border-color .2s ease;
}
.formation li:hover {
  border-color: var(--couleur-accent-texte);
}
.formation-icone {
  --chanfrein: 12px;
  --epaisseur: 1.5px;
  --trait: var(--couleur-accent);
  --fond: var(--couleur-fond);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--couleur-accent-texte);
  font-size: 22px;
}
.formation .certification .formation-icone {
  --fond: var(--couleur-accent-clair);
}
.formation h3 {
  margin-bottom: 5px;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.formation .meta {
  margin-bottom: 8px;
}
.formation p:not(.meta) {
  max-width: 760px;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-petite);
  line-height: 1.65;
}

/* Compétences */
.competences {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 32px 48px;
}
.competence-groupe h3 {
  margin-bottom: 14px;
  color: var(--couleur-accent-texte);
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: var(--taille-etiquette);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
}
.etiquettes li {
  padding: 6px 11px;
  background: var(--couleur-accent-clair);
  color: var(--couleur-accent-texte);
  font-size: var(--taille-etiquette);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}

/* Langues et centres d'intérêt */
.deux-colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
}
.sous-titre {
  margin-bottom: 18px;
  color: var(--couleur-accent-texte);
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: var(--taille-etiquette);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.langues {
  display: grid;
  gap: 12px;
}
.langues li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--couleur-ligne);
}
.langues li:last-child {
  border-bottom: 0;
}
.langues .code {
  flex-shrink: 0;
  padding: 4px 8px;
  background: var(--couleur-accent-clair);
  color: var(--couleur-accent-texte);
  font-size: var(--taille-etiquette);
  font-weight: 600;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.langues strong {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1rem;
}
.langues em {
  margin-left: auto;
  color: var(--couleur-texte-discret);
  font-style: normal;
  font-size: var(--taille-petite);
}

.interets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.interets li {
  --chanfrein: 9px;
  --epaisseur: 1px;
  --trait: var(--couleur-ligne);
  --fond: var(--couleur-fond);
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  padding: 9px 14px;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-petite);
}
.interets .icone {
  color: var(--couleur-detail-texte);
  font-size: 16px;
}

@media (max-width: 640px) {
  .section-filet {
    display: none;
  }
}

@media (max-width: 820px) {
  .deux-colonnes {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espace-l);
  }
  .chronologie {
    --rail-x: 0px;
    padding-left: 0;
  }
  .chronologie::before {
    display: none;
  }
  .chrono-date {
    position: relative;
    left: auto;
    top: auto;
    margin-bottom: 12px;
  }
}


/* -------------------------------------------------------------------------
   17. PAGE MENTIONS LÉGALES
   ------------------------------------------------------------------------- */
.mentions {
  padding-top: var(--espace-m);
  padding-bottom: 96px;
}
.mentions > * {
  max-width: 820px;
}
.mentions h1 {
  margin-bottom: 14px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.9rem, 3vw + 0.6rem, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.mentions .maj {
  margin-bottom: 52px;
  color: var(--couleur-texte-discret);
  font-size: var(--taille-etiquette);
}
.mentions h2 {
  margin: 40px 0 14px;
  padding-left: var(--espace-s);
  border-left: 2px solid var(--couleur-accent);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.mentions p {
  margin-bottom: 12px;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-confort);
  line-height: 1.75;
}
.mentions dl {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 10px 24px;
  margin-bottom: 12px;
  font-size: var(--taille-confort);
  line-height: 1.6;
}
.mentions dt {
  padding-top: 3px;
  color: var(--couleur-accent-texte);
  font-size: var(--taille-etiquette);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mentions dd {
  color: var(--couleur-texte-doux);
}

@media (max-width: 640px) {
  .mentions dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 0;
  }
  .mentions dt {
    margin-top: 12px;
  }
}


/* Apparition au défilement : script.js pose ces classes sur les blocs situés sous le pli */
.attente-reveal {
  opacity: 0;
  transform: translateY(16px);
}
.attente-reveal.est-revele {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}


/* -------------------------------------------------------------------------
   18. MOUVEMENT RÉDUIT
   Les particules disparaissent, les nœuds restent immobiles avec leur
   première icône, le rail de la méthode est affiché en entier.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .diagramme-entree {
    animation: none;
    opacity: 1;
  }
  .diagramme-trace {
    animation: none;
    stroke-dashoffset: 0;
  }
  .noeud-flottant,
  .noeud-impulsion,
  .noeud-bordure,
  .noeud-icone {
    animation: none;
  }
  .noeud-icone.icone-a {
    opacity: 1;
  }
  .particules {
    display: none;
  }
  .rail::after {
    height: auto;
    bottom: 14px;
    transition: none;
  }
  .rail-point {
    display: none;
  }
  .etape-repere {
    --trait: var(--couleur-accent);
    color: var(--couleur-sur-accent);
  }
  .etape-repere::before {
    background: var(--couleur-accent);
  }
  .bouton,
  .pilier,
  .pilier::after,
  .cas::before,
  .lien-fleche .icone,
  .faq-item summary::after {
    transition: none;
  }
}