/* Klutsh : charte "signalétique".
   Une seule famille (Archivo, dont on fait varier la largeur), trois couleurs
   (encre, violet, blanc) et un accent réservé au permis (le rose).
   Les formes viennent de la route : panneaux à listel, flèches de direction,
   ligne discontinue, grille de boîte de vitesses. */

/* Archivo (licence SIL Open Font) : hébergée sur le site, aucune requête vers un serveur tiers. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --encre: #091E42;
  --encre-doux: #3B4A6B;
  --violet: #633AD7;
  --violet-fonce: #4C28B4;
  --violet-vif: #9565EE;
  --lilas: #F1ECFD;
  --lilas-2: #DCD0FA;
  --rose: #FFC9D7;
  --rose-vif: #FF86A8;
  --blanc: #fff;
  --trait: #CFC7E6;
  --police: "Archivo", "Arial Nova", "Helvetica Neue", Arial, sans-serif;
  --large: 78rem;
  --marge: clamp(1.125rem, 4vw, 2.5rem);
  --h-entete: 76px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* L'attribut hidden doit gagner sur les display: grid/flex des composants. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-entete) + 1rem);
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font: 400 1.0625rem/1.6 var(--police);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
sup { font-size: .62em; line-height: 0; vertical-align: .55em; }

a { color: inherit; text-decoration-thickness: .09em; text-underline-offset: .2em; }
a:hover { color: var(--violet); }

:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--violet); color: #fff; }

h1, h2 {
  font-weight: 800;
  letter-spacing: -.022em;
  text-wrap: balance;
}
h1 { font-stretch: 116%; font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1; }
h2 { font-stretch: 112%; font-size: clamp(1.85rem, 1.1rem + 2.6vw, 3.1rem); line-height: 1.06; }
h3 { font-stretch: 106%; font-weight: 750; font-size: 1.25rem; line-height: 1.2; }

.conteneur { width: min(100% - 2 * var(--marge), var(--large)); margin-inline: auto; }

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

.evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .7rem 1rem; background: var(--encre); color: #fff; border-radius: 8px;
}
.evitement:focus { top: 1rem; color: #fff; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 1.4rem;
  border: 0; cursor: pointer;
  font-weight: 700; font-stretch: 104%; font-size: 1rem; line-height: 1;
  white-space: nowrap; text-decoration: none;
}

.btn--ligne {
  border: 2px solid var(--encre); border-radius: 10px;
  background: transparent; color: var(--encre);
}
.btn--ligne:hover { background: var(--encre); color: #fff; }

/* Flèche de direction : un panneau qui pointe vers la suite.
   Trois couches découpées avec le même polygone : le bord, le listel, le fond. */
.fleche, .fleche::before, .fleche::after {
  clip-path: polygon(
    0 var(--r),
    calc(var(--r) * .134) calc(var(--r) * .5),
    calc(var(--r) * .5) calc(var(--r) * .134),
    var(--r) 0,
    calc(100% - var(--t)) 0,
    100% 50%,
    calc(100% - var(--t)) 100%,
    var(--r) 100%,
    calc(var(--r) * .5) calc(100% - var(--r) * .134),
    calc(var(--r) * .134) calc(100% - var(--r) * .5),
    0 calc(100% - var(--r))
  );
}
.fleche {
  --t: 26px; --r: 10px;
  --f-fond: var(--violet); --f-listel: #fff; --f-texte: #fff;
  position: relative; isolation: isolate;
  padding-right: calc(var(--t) + .95rem);
  background: var(--f-fond); color: var(--f-texte);
  transition: transform .16s ease;
}
.fleche::before, .fleche::after { content: ""; position: absolute; z-index: -1; }
.fleche::before { inset: 4px 5.66px 4px 4px; --t: 22px; --r: 7px; background: var(--f-listel); }
.fleche::after { inset: 5.5px 7.78px 5.5px 5.5px; --t: 20.5px; --r: 5.5px; background: var(--f-fond); }
.fleche:hover { --f-fond: var(--violet-fonce); color: var(--f-texte); transform: translateX(3px); }
.fleche:focus-visible { outline: 0; text-decoration: underline; text-decoration-thickness: 2px; }
.fleche:focus-visible::before { inset: 2px 2.83px 2px 2px; --t: 24px; --r: 8.5px; }

.fleche--s { height: 44px; --t: 22px; padding-left: 1.1rem; font-size: .9375rem; }
.fleche--s::before { --t: 18px; }
.fleche--s::after { --t: 16.5px; }
.fleche--s:focus-visible::before { --t: 20px; }

.fleche--clair { --f-fond: #fff; --f-listel: var(--encre); --f-texte: var(--encre); }
.fleche--clair:hover { --f-fond: var(--rose); }

/* Variante "panneau" : choix de situation, 80 px de haut, pointe plus ouverte */
.fleche--panneau {
  --t: 30px; --r: 10px;
  --f-fond: #fff; --f-listel: var(--encre); --f-texte: var(--encre);
  display: grid; align-content: center; gap: .2rem;
  width: 100%; height: 80px; padding: 0 3.2rem 0 1.35rem;
  border: 0; cursor: pointer; text-align: left; text-decoration: none;
}
.fleche--panneau::before { inset: 5px 6.25px 5px 5px; --t: 26.25px; --r: 6px; }
.fleche--panneau::after { inset: 7px 8.75px 7px 7px; --t: 24.75px; --r: 4.5px; }
.fleche--panneau:focus-visible::before { inset: 2px 2.5px 2px 2px; --t: 28.5px; --r: 8.5px; }
.fleche--panneau strong { font-stretch: 108%; font-weight: 800; font-size: 1.1875rem; line-height: 1.1; }
.fleche--panneau span { font-size: .875rem; line-height: 1.2; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleche--panneau:hover { --f-fond: var(--lilas-2); }
.fleche--panneau[aria-selected="true"] { --f-fond: var(--violet); --f-listel: #fff; --f-texte: #fff; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; text-decoration: underline;
}
.lien-fleche::after {
  content: ""; width: .5em; height: .5em;
  border-right: .16em solid currentColor; border-top: .16em solid currentColor;
  transform: rotate(45deg); transition: transform .16s ease;
}
.lien-fleche:hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------- Bandeau et en-tête ---------- */

.bandeau { background: var(--encre); color: #fff; font-size: .8125rem; }
.bandeau__in { display: flex; align-items: center; gap: 1.5rem; height: 36px; }
.bandeau a { text-decoration: none; }
.bandeau a:hover { color: var(--rose); text-decoration: underline; }
.bandeau__etat { margin-right: auto; display: flex; align-items: center; gap: .5em; opacity: .9; }
.bandeau__tel { font-weight: 700; font-stretch: 104%; letter-spacing: .02em; }

[data-ouverture]::before {
  content: ""; flex: none; width: .6em; height: .6em; border-radius: 50%;
  border: 2px solid currentColor;
}
[data-ouverture].est-ouvert::before { background: currentColor; }

.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--blanc); border-bottom: 2px solid var(--encre);
}
.entete__in { display: flex; align-items: center; gap: 2rem; height: var(--h-entete); }

.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { display: block; height: 40px; width: auto; }
/* Sur fond sombre, le logo officiel reste en couleurs sur une plaque blanche. */
.logo--plaque { padding: .55rem .9rem .55rem .6rem; border-radius: 12px; background: #fff; }

.nav { margin-right: auto; }
.nav__liste { display: flex; align-items: center; gap: .25rem; }
.nav__lien {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 44px; padding: 0 .85rem;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-weight: 600; font-size: 1rem; text-decoration: none;
}
.nav__lien:hover, .nav__lien[aria-expanded="true"] { background: var(--lilas); color: var(--encre); }
.nav__lien svg { transition: transform .16s ease; }
.nav__lien[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__menu { position: relative; }
.deroulant {
  position: absolute; top: calc(100% + 16px); left: -.75rem; width: 37rem;
  padding: .6rem; background: #fff; border: 2px solid var(--encre); border-radius: 16px;
}
.deroulant ul { display: grid; grid-template-columns: 1fr 1fr; }
.deroulant a { display: grid; gap: .1rem; padding: .7rem .85rem; border-radius: 10px; text-decoration: none; }
.deroulant a:hover { background: var(--lilas); color: var(--encre); }
.deroulant strong { font-stretch: 104%; font-weight: 750; }
.deroulant span { font-size: .875rem; line-height: 1.35; color: var(--encre-doux); }

.entete__actions { display: flex; align-items: center; gap: 1.25rem; }
.entete__eleve { font-weight: 600; font-size: .9375rem; }

.burger {
  display: none; align-items: center; gap: .5rem;
  height: 44px; padding: 0 .8rem 0 .6rem;
  border: 2px solid var(--encre); border-radius: 10px; background: none; cursor: pointer;
  font-weight: 700;
}
.burger[aria-expanded="true"] { background: var(--encre); color: #fff; }

.menu-mobile {
  position: absolute; top: 100%; left: 0; right: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem 0 2.5rem; background: #fff; border-top: 2px solid var(--encre);
}
.menu-mobile__titre {
  margin: 0 0 .25rem; font-stretch: 80%; font-weight: 700; font-size: .8125rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--violet);
}
.menu-mobile__liste { margin-bottom: 1.5rem; }
.menu-mobile__liste a {
  display: block; padding: .7rem 0;
  font-weight: 750; font-stretch: 106%; font-size: 1.25rem; text-decoration: none;
  background: repeating-linear-gradient(90deg, var(--trait) 0 10px, transparent 10px 18px) bottom / 100% 2px no-repeat;
}
.menu-mobile__contact { display: grid; gap: .75rem; justify-items: start; }
.menu-mobile__contact p { font-size: .9375rem; color: var(--encre-doux); }

/* ---------- Accueil : premier écran ---------- */

.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem); overflow: hidden; }
.hero__grille {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3rem; align-items: center;
}

/* Plaque de rue parisienne, aux couleurs de Klutsh */
.plaque {
  position: relative; display: inline-flex; margin-top: 1.5rem;
  padding: .72rem 1.4rem .66rem;
  background: var(--violet); color: #fff; border-radius: 5px;
  box-shadow: inset 0 0 0 3px var(--violet), inset 0 0 0 4.5px rgba(255, 255, 255, .88);
  font-stretch: 68%; font-weight: 650; font-size: 1.0625rem; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.plaque:hover { background: var(--violet-fonce); color: #fff; box-shadow: inset 0 0 0 3px var(--violet-fonce), inset 0 0 0 4.5px rgba(255, 255, 255, .88); }
.plaque__arr {
  position: absolute; bottom: calc(100% - 1px); left: 50%; transform: translateX(-50%);
  padding: .42rem .95rem .22rem; background: inherit; border-radius: 999px 999px 0 0;
  font-size: .7rem; letter-spacing: .08em; white-space: nowrap;
}

.hero h1 { margin-top: 1.5rem; }
.hero h1 span { display: block; color: var(--violet); }

.chapo { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); line-height: 1.5; color: var(--encre-doux); }

.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; margin-top: 2rem; }
.hero__note { margin-top: .9rem; font-size: .9375rem; color: var(--encre-doux); }

.reperes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;
  margin-top: 2.25rem; padding-top: 1.25rem;
  background: repeating-linear-gradient(90deg, var(--encre) 0 22px, transparent 22px 40px) top left / 100% 3px no-repeat;
  font-size: .9375rem; line-height: 1.4; color: var(--encre-doux);
}
.reperes strong { display: block; margin-bottom: .15rem; color: var(--encre); font-weight: 800; font-stretch: 112%; font-size: clamp(1.0625rem, 1.65vw, 1.375rem); line-height: 1.2; white-space: nowrap; }
.reperes a { text-decoration: none; }
.reperes a:hover { text-decoration: underline; }

/* Grille de vitesses */
.hero__visuel { display: grid; justify-items: end; }
.grille { display: block; width: min(100%, 27.5rem); height: auto; }
.grille__ombre { fill: var(--violet-vif); }
.grille__disque { fill: var(--encre); }
.grille__listel { fill: none; stroke: #fff; stroke-width: 2.5; opacity: .9; }
.grille__rails { fill: none; stroke: #fff; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.grille__chiffres text {
  fill: #fff; opacity: .5;
  font: 800 31px var(--police); font-stretch: 125%;
  text-anchor: middle; dominant-baseline: central;
  transition: opacity .2s ease, fill .2s ease;
}
.grille__chiffres text.est-actif { opacity: 1; fill: var(--rose); }
.grille__pommeau circle { fill: var(--violet-vif); stroke: #fff; stroke-width: 6; }
.grille__zones circle { fill: transparent; cursor: pointer; }

.vitesses {
  position: relative; justify-self: start;
  width: min(100%, 25.5rem); margin-top: -3.75rem;
  padding: 1rem 1.15rem 1.15rem;
  background: #fff; border: 2px solid var(--encre); border-radius: 16px;
}
.vitesses__liste { display: flex; gap: .4rem; }
.vitesses__liste button {
  width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--encre); border-radius: 10px; background: #fff; cursor: pointer;
  font-weight: 800; font-stretch: 118%; font-size: 1.0625rem;
}
.vitesses__liste button:hover { background: var(--lilas-2); }
.vitesses__liste button[aria-selected="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }
.vitesses__fiche { min-height: 5.6rem; margin-top: .9rem; }
.vitesses__titre { font-weight: 800; font-stretch: 110%; font-size: 1.3125rem; line-height: 1.15; }
.vitesses__titre span { color: var(--violet); margin-right: .15em; }
.vitesses__fiche p + p { margin-top: .3rem; font-size: .9375rem; line-height: 1.5; color: var(--encre-doux); }

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

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--lilas { background: var(--lilas); }
.section--rose { background: var(--rose); }
.section--nuit { position: relative; background: var(--encre); color: #fff; padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.section--nuit::before, .section--nuit::after {
  content: ""; position: absolute; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(90deg, #fff 0 38px, transparent 38px 68px);
}
.section--nuit::before { top: 20px; }
.section--nuit::after { bottom: 20px; }

.intro { margin-top: 1rem; max-width: 39rem; font-size: 1.1875rem; line-height: 1.5; color: var(--encre-doux); }
.section--nuit .intro { color: #D5DAEA; }
.section--rose .intro { color: var(--encre); }

/* ---------- Poteau indicateur ---------- */

.poteau {
  display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: 2.5rem;
}
.poteau__panneaux { position: relative; display: grid; gap: .9rem; padding: 1.1rem 0 4rem; }
.poteau__panneaux::before {
  content: ""; position: absolute; left: 1.5rem; top: 0; bottom: 0; width: 10px;
  border-radius: 5px; background: var(--encre);
}

.itineraire {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: #fff; border: 2px solid var(--encre); border-radius: 20px;
}
.itineraire__depart { font-size: 1.125rem; line-height: 1.5; }
.itineraire__note { margin-bottom: 1.5rem; font-size: .9375rem; color: var(--encre-doux); }

.lignes { margin: 1.25rem 0 1.5rem; border-top: 3px solid var(--encre); }
.lignes a {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: .95rem .25rem; text-decoration: none;
  background: repeating-linear-gradient(90deg, var(--trait) 0 10px, transparent 10px 18px) bottom / 100% 2px no-repeat;
}
.lignes a:hover { color: var(--encre); background-color: var(--lilas); }
.lignes span { font-size: .9375rem; line-height: 1.4; color: var(--encre-doux); }
.lignes strong { display: block; font-stretch: 105%; font-weight: 750; font-size: 1.0938rem; color: var(--encre); }
.lignes a:hover strong { color: var(--violet); }
.lignes b { flex: none; font-weight: 800; font-stretch: 114%; font-size: 1.3125rem; white-space: nowrap; }
.lignes small { font-weight: 600; font-stretch: 100%; font-size: .8125rem; color: var(--encre-doux); }

/* ---------- Boost ---------- */

.boost__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.boost__prix { margin: 1.5rem 0 1.75rem; max-width: 36rem; }
.boost__prix strong { font-weight: 800; font-stretch: 112%; white-space: nowrap; }

.temps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.temps svg { display: block; height: clamp(5rem, 9vw, 7.5rem); width: auto; fill: var(--violet-vif); }
.temps li:nth-child(1) svg { opacity: .45; }
.temps li:nth-child(2) svg { opacity: .72; }
.temps p { margin-top: 1.1rem; font-size: .9375rem; line-height: 1.5; color: #D5DAEA; }
.temps strong { display: block; margin-bottom: .2rem; font-weight: 800; font-stretch: 110%; font-size: 1.1875rem; color: #fff; }

/* ---------- Preuves ---------- */

.preuves { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: 2.75rem; }
.temoignage blockquote p { font-weight: 600; font-size: clamp(1.3125rem, 1rem + 1.1vw, 1.75rem); line-height: 1.32; text-wrap: pretty; }
.temoignage blockquote p::before { content: "«\00a0"; color: var(--violet); font-weight: 800; }
.temoignage blockquote p::after { content: "\00a0»"; color: var(--violet); font-weight: 800; }
.temoignage figcaption { margin-top: 1.25rem; font-size: .9375rem; color: var(--encre-doux); }
.temoignage figcaption strong { color: var(--encre); }
.temoignage figcaption a { display: block; margin-top: .35rem; font-weight: 700; color: var(--encre); }
.temoignage figcaption a:hover { color: var(--violet); }

.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.chiffres div { padding: 1.25rem 0 1.75rem; border-top: 3px solid var(--encre); }
.chiffres dt { font-weight: 800; font-stretch: 122%; font-size: clamp(2.6rem, 1.6rem + 3vw, 4rem); line-height: 1; letter-spacing: -.03em; }
.chiffres dt small { font-size: .45em; letter-spacing: 0; color: var(--violet); }
.chiffres dd { margin-top: .6rem; font-size: .9375rem; line-height: 1.5; color: var(--encre-doux); }
.chiffres a { font-weight: 700; color: var(--encre); white-space: nowrap; }
.chiffres a:hover { color: var(--violet); }

/* ---------- Suivi ---------- */

.suivi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.suivi .lien-fleche { margin-top: 1.75rem; }

.liste-ronds { display: grid; gap: .8rem; margin-top: 1.5rem; }
.liste-ronds li { position: relative; padding-left: 1.9rem; }
.liste-ronds li::before {
  content: ""; position: absolute; left: 0; top: .38em;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--violet); box-shadow: inset 0 0 0 2px var(--violet), inset 0 0 0 3.5px #fff;
}

.bilan figcaption {
  margin-bottom: .7rem; font-stretch: 80%; font-weight: 700; font-size: .8125rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--encre-doux);
}
.bilan__carte {
  padding: 1.5rem; background: #fff; border: 2px solid var(--encre); border-radius: 22px;
  box-shadow: 14px 14px 0 var(--violet-vif);
}
.bilan__carte strong { display: block; }
.bilan__seance { padding-bottom: 1rem; border-bottom: 3px solid var(--encre); font-size: .9375rem; color: var(--encre-doux); }
.bilan__seance strong { font-weight: 800; font-stretch: 110%; font-size: 1.25rem; color: var(--encre); }
.bilan__barres { display: grid; gap: .95rem; margin: 1.15rem 0 1.25rem; }
.bilan__barres li { display: grid; grid-template-columns: 1fr 3.4rem; gap: .3rem .5rem; align-items: center; }
.bilan__barres span { grid-column: 1 / -1; font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.bilan__barres i { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--violet) var(--p), var(--lilas-2) var(--p)); }
.bilan__barres em { font-style: normal; font-weight: 700; font-size: .8438rem; text-align: right; }
.bilan__note { padding: .8rem 1rem; background: var(--rose); border-radius: 12px; font-size: .9375rem; line-height: 1.45; }
.bilan__suite { margin-top: 1rem; font-size: .9375rem; line-height: 1.45; }
.bilan__note strong, .bilan__suite strong { font-size: .8438rem; font-weight: 700; }

/* ---------- Budget ---------- */

.budget { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; margin-top: 2.75rem; }
.budget__bloc h3 { padding-bottom: .8rem; border-bottom: 3px solid var(--encre); }
.budget__bloc .liste-ronds { margin-top: 1.25rem; }

.liste-triangles { display: grid; margin-top: .4rem; }
.liste-triangles li {
  position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .8rem 0 .8rem 1.9rem;
  background: repeating-linear-gradient(90deg, var(--trait) 0 10px, transparent 10px 18px) bottom / 100% 2px no-repeat;
}
.liste-triangles li::before {
  content: ""; position: absolute; left: 0; top: 1.15em; width: 16px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15'%3E%3Cpath d='M8 1.8 14.4 13.2H1.600z' fill='%23fff' stroke='%23091E42' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.liste-triangles b { flex: none; font-weight: 800; font-stretch: 110%; white-space: nowrap; }

.budget__paiement {
  padding: 1.9rem 1.75rem; border-radius: 18px;
  background: var(--violet); color: #fff;
  box-shadow: inset 0 0 0 6px var(--violet), inset 0 0 0 8px rgba(255, 255, 255, .9);
}
.budget__paiement h3 { font-size: 1.5rem; font-weight: 800; font-stretch: 112%; }
.budget__paiement p { margin-top: .9rem; line-height: 1.5; }
.budget__paiement a:hover { color: var(--rose); }
.budget__liens { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }

/* ---------- Agence ---------- */

.agence { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.agence__etat {
  display: inline-flex; align-items: center; gap: .55em; margin-top: 1.25rem;
  padding: .45rem .9rem .45rem .8rem; border: 2px solid var(--encre); border-radius: 12px; background: #fff;
  font-weight: 700; font-size: .9375rem;
}
.agence__etat.est-ouvert::before { background: var(--violet); border-color: var(--violet); }

.fiche { margin-top: 1.75rem; border-top: 3px solid var(--encre); }
.fiche div {
  display: grid; grid-template-columns: 10.5rem 1fr; gap: 1rem; padding: 1rem 0;
  background: repeating-linear-gradient(90deg, var(--trait) 0 10px, transparent 10px 18px) bottom / 100% 2px no-repeat;
}
.fiche dt { font-weight: 750; font-stretch: 104%; }
.fiche dd a { font-weight: 600; }

.agence__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.photo-vide {
  display: grid; place-items: center; aspect-ratio: 1; padding: 1rem;
  border: 2px dashed var(--violet-vif); border-radius: 18px;
  background: repeating-linear-gradient(135deg, #fff 0 14px, transparent 14px 28px);
  text-align: center; font-size: .875rem; line-height: 1.4; color: var(--encre-doux);
}
.photo-vide--grande { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.photo-vide strong { display: block; font-stretch: 80%; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; color: var(--violet); }

/* ---------- Questions ---------- */

.questions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.questions .lien-fleche { margin-top: 1.5rem; }

.faq { border-bottom: 3px solid var(--encre); }
.faq details { border-top: 3px solid var(--encre); }
.faq details + details { border-top: 0; background: repeating-linear-gradient(90deg, var(--trait) 0 10px, transparent 10px 18px) top / 100% 2px no-repeat; }
.faq summary {
  position: relative; padding: 1.15rem 2.75rem 1.15rem 0; cursor: pointer; list-style: none;
  font-weight: 750; font-stretch: 105%; font-size: 1.1875rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; width: 11px; height: 11px; margin-top: -9px;
  border-right: 3px solid var(--violet); border-bottom: 3px solid var(--violet);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(5px) rotate(-135deg); }
.faq summary:hover { color: var(--violet); }
.faq details p { max-width: 42rem; padding-bottom: 1.4rem; color: var(--encre-doux); }

/* ---------- Dernier appel ---------- */

.final__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.final .btn--ligne { background: #fff; }
.final .btn--ligne:hover { background: var(--encre); }

.permis { display: block; width: min(100%, 26rem); height: auto; justify-self: center; }
.permis__carte { fill: #fff; }
.permis__bande { fill: var(--rose-vif); }
.permis__contour { fill: none; stroke: var(--encre); stroke-width: 3; }
.permis__titre { font: 700 15px var(--police); font-stretch: 72%; letter-spacing: .14em; fill: var(--encre); }
.permis__photo { fill: var(--lilas); }
.permis__tete { fill: var(--violet-vif); }
.permis__lignes { fill: none; stroke: var(--lilas-2); stroke-width: 10; stroke-linecap: round; }
.permis__cat { font: 800 46px var(--police); font-stretch: 125%; fill: var(--encre); }
.disque { fill: #fff; stroke: var(--encre); stroke-width: 3; }
.disque__a { font: 800 54px var(--police); font-stretch: 108%; fill: #D5202F; text-anchor: middle; dominant-baseline: central; }

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

.pied { padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; background: var(--encre); color: #C8CFE2; font-size: .9375rem; }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { color: var(--rose); text-decoration: underline; }
.pied__grille { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 2.5rem 2rem; }
.pied__marque p { margin-top: 1rem; max-width: 15rem; }
.pied__reseaux { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin-top: .9rem; }
.pied__reseaux a { font-weight: 600; text-decoration: underline; }
.pied__titre {
  margin-bottom: .8rem; font-stretch: 80%; font-weight: 700; font-size: .8125rem; line-height: 1.2;
  letter-spacing: .1em; text-transform: uppercase; color: #BBA2F6;
}
.pied address, .pied li { line-height: 1.9; }
.pied p + p { margin-top: .8rem; }
.pied strong { color: #fff; font-weight: 600; }
.pied__legal {
  margin-top: 3rem; padding-top: 1.5rem; font-size: .8438rem;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 22px, transparent 22px 40px) top / 100% 2px no-repeat;
}
.pied__legal ul { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: .9rem; }

/* ---------- Barre de contact (téléphone) ---------- */

.barre { display: none; }

/* ---------- Page introuvable ---------- */

.deviation__panneau {
  display: inline-block; padding: .55rem 1.1rem; border-radius: 6px;
  background: var(--rose); box-shadow: inset 0 0 0 3px var(--rose), inset 0 0 0 5px var(--encre);
  font-stretch: 75%; font-weight: 800; font-size: 1.125rem; letter-spacing: .12em; text-transform: uppercase;
}
.deviation h1 { margin-top: 1.5rem; max-width: 18em; font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); }
.deviation__routes { max-width: 24rem; margin-block: 2rem 1.5rem; }

/* ---------- En-tête des pages intérieures ---------- */

.tete { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(1.75rem, 3vw, 2.75rem); }
.tete h1 { margin-top: .9rem; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4rem); }
.tete h1 span { display: block; color: var(--violet); }
.tete .chapo { max-width: 44rem; margin-top: 1rem; }
.tete__lien { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1rem; }

.fil { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; font-size: .875rem; color: var(--encre-doux); }
.fil a::after {
  content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .7rem;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: translateY(-.12em) rotate(45deg);
}
.fil [aria-current] { font-weight: 700; color: var(--encre); }

/* ---------- Tarifs ---------- */

.avant {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem;
  margin-top: 2rem; padding: 1.5rem 1.75rem; border-radius: 16px;
  background: var(--lilas); box-shadow: inset 0 0 0 5px var(--lilas), inset 0 0 0 7px var(--encre);
}
.avant div { flex: 1 1 26rem; max-width: 46rem; }
.avant__titre { margin-bottom: .3rem; font-weight: 800; font-stretch: 108%; font-size: 1.25rem; }

.sommaire { position: sticky; top: var(--h-entete); z-index: 40; background: #fff; border-bottom: 2px solid var(--encre); }
.sommaire ul { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.sommaire a {
  display: block; padding: .85rem .9rem .7rem; border-bottom: 4px solid transparent;
  font-weight: 700; font-size: .9375rem; white-space: nowrap; text-decoration: none;
}
.sommaire li:first-child a { padding-left: 0; }
.sommaire a:hover, .sommaire a[aria-current] { border-bottom-color: var(--violet); color: var(--violet); }

.section--serree { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--lilas { --trait: #BBAEE0; }
.tarifs .section[id] { scroll-margin-top: 3.25rem; }

/* Titre de famille à gauche, lignes de prix à droite */
.tarifs .section--serree > .conteneur, .colonnes { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4.5rem); }
.tarifs .section--serree > .conteneur > :first-child, .colonnes > :first-child { grid-column: 1; grid-row: 1 / span 5; align-self: start; }
.tarifs .section--serree > .conteneur > :not(:first-child), .colonnes > :not(:first-child) { grid-column: 2; }
.famille h2, .tarifs .section--serree h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem); }
.famille .intro { font-size: 1.0625rem; line-height: 1.55; }
.tarifs .budget { margin-top: 0; }
.budget--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.offres { border-top: 3px solid var(--encre); }
.offre {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(8rem, auto) auto; gap: 1rem clamp(1rem, 2.5vw, 2rem); align-items: center;
  padding: 1.35rem .25rem; scroll-margin-top: calc(var(--h-entete) + 4.5rem);
  background: repeating-linear-gradient(90deg, var(--trait) 0 10px, transparent 10px 18px) bottom / 100% 2px no-repeat;
}
.offre:target { background-color: var(--lilas); box-shadow: -1rem 0 0 var(--lilas), 1rem 0 0 var(--lilas); }
.offre__volume { font-weight: 600; font-size: .9375rem; line-height: 1.2; color: var(--encre-doux); }
.offre__volume b { display: block; font-weight: 800; font-stretch: 122%; font-size: 3.1rem; line-height: .95; letter-spacing: -.03em; color: var(--encre); }
.offre__pour { max-width: 30rem; line-height: 1.45; }
.offre__nom { margin-top: .3rem; font-stretch: 80%; font-weight: 700; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; color: var(--violet); }
.offre__prix { max-width: 15.5rem; text-align: right; }
.offre__total { font-weight: 800; font-stretch: 116%; font-size: 1.9rem; line-height: 1.15; white-space: nowrap; }
.offre__echeances { font-size: .875rem; line-height: 1.4; color: var(--encre-doux); text-wrap: balance; }
.offre__eco { font-size: .875rem; font-weight: 700; color: var(--violet); }
/* Paiement en trois fois proposé par un lien, sous le prix. */
.offre__echeances a { display: inline-block; padding-block: .3rem; font-weight: 700; color: var(--encre); }
.offre__echeances a:hover { color: var(--violet); }

.bascule__choix { display: inline-flex; margin-bottom: 1.25rem; padding: 4px; border: 2px solid var(--encre); border-radius: 12px; background: #fff; }
.bascule__choix button { height: 40px; padding: 0 1.15rem; border: 0; border-radius: 7px; background: none; cursor: pointer; font-weight: 700; }
.bascule__choix button[aria-selected="true"] { background: var(--encre); color: #fff; }

.renvoi { margin-top: 1.1rem; max-width: 50rem; font-size: .9375rem; color: var(--encre-doux); }
.renvoi a { font-weight: 700; color: var(--encre); }
.renvoi a:hover { color: var(--violet); }

.prix-unite { width: 100%; max-width: 46rem; border-collapse: collapse; border-top: 3px solid var(--encre); }
.prix-unite tr { background: repeating-linear-gradient(90deg, var(--trait) 0 10px, transparent 10px 18px) bottom / 100% 2px no-repeat; }
.prix-unite th { padding: .9rem 1rem .9rem .25rem; text-align: left; font-weight: 700; font-stretch: 104%; }
.prix-unite small { display: block; font-weight: 400; font-stretch: 100%; font-size: .875rem; color: var(--encre-doux); }
/* Chaque prestation a son lien d'achat, le même que sur l'ancien site. */
.prix-unite__lien { display: inline-block; margin-top: .15rem; padding-block: .45rem; font-size: .9375rem; color: var(--violet); }
.prix-unite td { padding: .9rem .25rem; text-align: right; vertical-align: middle; font-weight: 800; font-stretch: 114%; font-size: 1.25rem; white-space: nowrap; }

.final__grille > :only-child { grid-column: 1 / -1; }

/* ---------- Inscription ---------- */

.etapes { display: flex; flex-wrap: wrap; gap: .7rem 0; margin-block: 1.5rem .25rem; }
.etapes li { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9375rem; color: var(--encre-doux); }
.etapes li + li::before {
  content: ""; width: clamp(1rem, 4vw, 3rem); height: 3px; margin-inline: .9rem .3rem;
  background: repeating-linear-gradient(90deg, var(--encre) 0 8px, transparent 8px 14px);
}
.etapes b {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px;
  border: 2px solid var(--encre); border-radius: 9px; background: #fff;
  font-weight: 800; font-stretch: 118%; color: var(--encre);
}
.etapes [aria-current] { color: var(--encre); font-weight: 700; }
.etapes [aria-current] b { background: var(--violet); border-color: var(--violet); color: #fff; }
.etapes .est-fait b { background: var(--encre); color: #fff; }

.tunnel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tunnel fieldset { display: grid; gap: .75rem; min-width: 0; margin: 0 0 2.25rem; padding: 0; border: 0; }
.tunnel legend, .tunnel__etape h2 { margin-bottom: .9rem; padding: 0; font-weight: 800; font-stretch: 110%; font-size: 1.4375rem; line-height: 1.2; letter-spacing: -.01em; }
.tunnel__etape { margin-bottom: 2.25rem; }
.tunnel__etape > p { max-width: 40rem; }
.tunnel__etape .btn { margin-top: 1.25rem; }
.tunnel__etape .hero__actions { margin-top: 0; }

.choix {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  padding: 1rem 1.15rem; border: 2px solid var(--encre); border-radius: 14px; background: #fff; cursor: pointer;
}
.choix:hover { background: var(--lilas); }
.choix input {
  appearance: none; width: 22px; height: 22px; margin: .1rem 0 0;
  border: 2px solid var(--encre); border-radius: 50%; background: #fff; cursor: pointer;
}
.choix input:checked { border-color: var(--violet); background: var(--violet); box-shadow: inset 0 0 0 3.5px #fff; }
.choix:has(input:checked) { border-color: var(--violet); background: var(--lilas); box-shadow: inset 0 0 0 1.5px var(--violet); }
.choix:has(input:focus-visible) { outline: 3px solid var(--violet); outline-offset: 3px; }
.choix input:focus-visible { outline: 0; }
.choix > span { font-size: .9375rem; line-height: 1.45; color: var(--encre-doux); }
.choix strong { display: block; font-weight: 750; font-stretch: 105%; font-size: 1.0938rem; color: var(--encre); }

.tunnel__info { padding: 1rem 1.15rem; border-radius: 12px; background: var(--lilas); font-size: .9375rem; line-height: 1.5; }
.tunnel__legal { margin-top: .9rem; font-size: .8438rem; color: var(--encre-doux); }

.ticket {
  position: sticky; top: calc(var(--h-entete) + 1.25rem);
  padding: 1.5rem; background: #fff; border: 2px solid var(--encre); border-radius: 22px;
  box-shadow: 12px 12px 0 var(--violet-vif);
}
.ticket__sur { margin-bottom: .5rem; font-stretch: 80%; font-weight: 700; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; color: var(--encre-doux); }
.ticket__titre { font-weight: 800; font-stretch: 110%; font-size: 1.4375rem; line-height: 1.2; }
.ticket .liste-ronds { gap: .5rem; margin-block: 1.1rem 1.25rem; font-size: .9375rem; line-height: 1.45; }
.ticket__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 3px solid var(--encre); }
.ticket__total dt { font-weight: 700; }
.ticket__total dd { font-weight: 800; font-stretch: 116%; font-size: 1.9rem; line-height: 1.1; white-space: nowrap; }
.ticket__echeancier { margin-top: .9rem; font-size: .9375rem; }
.ticket__echeancier li {
  display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0;
  background: repeating-linear-gradient(90deg, var(--trait) 0 10px, transparent 10px 18px) bottom / 100% 2px no-repeat;
}
.ticket__echeancier b { font-weight: 800; font-stretch: 110%; white-space: nowrap; }
.ticket__liens { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: 1.1rem; font-size: .9375rem; font-weight: 700; }
.ticket__texte { margin-top: .7rem; font-size: .9375rem; line-height: 1.5; color: var(--encre-doux); }
.ticket__total + .ticket__texte { margin-top: .4rem; }
.ticket__texte + .ticket__total { margin-top: 1.1rem; }
.ticket__actions { display: grid; gap: .9rem; justify-items: start; margin-top: 1.25rem; }
.section--lilas .choix:hover { background: var(--lilas-2); }
.section--lilas .choix:has(input:checked) { background: #fff; }

.suite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-block: 2.25rem; }
.suite li { padding-top: 1.25rem; border-top: 3px solid var(--encre); }
.suite b {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1rem;
  border-radius: 10px; background: var(--violet); color: #fff;
  font-weight: 800; font-stretch: 118%; font-size: 1.125rem;
}
.suite p { margin-top: .5rem; font-size: .9375rem; line-height: 1.55; color: var(--encre-doux); }

.nav__lien[aria-current] { box-shadow: inset 0 -3px 0 var(--violet); border-radius: 8px 8px 0 0; }

/* ---------- Pages formations ---------- */

/* "En bref" : quatre repères sous le titre */
.bref { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2rem; border: 2px solid var(--encre); border-radius: 16px; background: #fff; }
.bref div { padding: 1.1rem 1.25rem 1.2rem; }
.bref div + div { border-left: 2px dashed var(--trait); }
.bref dt { font-stretch: 80%; font-weight: 700; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; color: var(--violet); }
.bref dd { margin-top: .3rem; font-weight: 750; font-stretch: 104%; line-height: 1.3; }
.formation .tete .hero__actions { margin-top: 1.75rem; }

/* Étapes numérotées, reliées par une ligne discontinue */
.parcours { counter-reset: etape; max-width: 46rem; }
.parcours li { position: relative; counter-increment: etape; padding: 0 0 1.75rem 4rem; }
.parcours li::before {
  content: counter(etape); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  background: var(--violet); color: #fff; font-weight: 800; font-stretch: 118%; font-size: 1.125rem;
}
.parcours li::after {
  content: ""; position: absolute; left: 20px; top: 52px; bottom: 8px; width: 4px;
  background: repeating-linear-gradient(180deg, var(--encre) 0 10px, transparent 10px 18px);
}
.parcours li:last-child { padding-bottom: 0; }
.parcours li:last-child::after { display: none; }
.parcours h3 { padding-top: .5rem; }
.parcours p { margin-top: .35rem; color: var(--encre-doux); }

/* Deux ou trois volets côte à côte */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 2rem; }
.duo--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.volet { display: flex; flex-direction: column; gap: .9rem; padding: clamp(1.25rem, 3vw, 2rem); background: #fff; border: 2px solid var(--encre); border-radius: 20px; }
.volet h3 { font-weight: 800; font-stretch: 110%; font-size: 1.5rem; }
.volet__faits { margin-top: -.5rem; font-stretch: 80%; font-weight: 700; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.volet .liste-ronds { margin-top: 0; }
.volet > .btn, .volet__actions { margin-top: auto; align-self: flex-start; }
.volet__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }

/* Panneau d'indication : fond violet, listel blanc */
.panneau, .budget__paiement {
  padding: 1.9rem 1.75rem; border-radius: 18px;
  background: var(--violet); color: #fff;
  box-shadow: inset 0 0 0 6px var(--violet), inset 0 0 0 8px rgba(255, 255, 255, .9);
}
.panneau { max-width: 46rem; padding: clamp(1.75rem, 3vw, 2.5rem); }
.panneau h3 { font-weight: 800; font-stretch: 110%; }
.panneau h3:not(:first-child) { margin-top: 1.4rem; }
.panneau p { margin-top: .4rem; line-height: 1.55; }

.liste-ronds--large { max-width: 46rem; margin-top: 0; gap: 1rem; }
.offres + .liste-ronds--large, .offres + .liste-triangles { margin-top: 1.75rem; }
.liste-triangles--etroite { max-width: 46rem; }
.liste-triangles--sans { margin-top: 0; border-top: 3px solid var(--encre); }

.preuves--bande { margin-top: 0; align-items: center; }
.preuves--bande .chiffres div { padding-bottom: .5rem; }

.avec-sommaire .section[id] { scroll-margin-top: 3.25rem; }
.chiffres--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.volet .liste-triangles { margin-top: 0; }
.colonnes > .temoignage { max-width: 46rem; }
.colonnes > .hero__actions { margin-top: 1.5rem; }
.colonnes > .hero__actions:first-of-type:nth-child(2) { margin-top: 0; }
.famille .agence__etat { margin-top: 1.25rem; }

/* Captures de l'application : trois téléphones côte à côte */
.ecrans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); max-width: 50rem; }
.ecrans img { display: block; width: 100%; max-width: 15rem; height: auto; margin-inline: auto; }
.ecrans p { margin-top: .9rem; font-size: .9375rem; line-height: 1.5; color: var(--encre-doux); }
.ecrans strong { display: block; font-weight: 750; font-stretch: 104%; font-size: 1.0625rem; color: var(--encre); }

.trombi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 46rem; }
.trombi--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trombi--deux .photo-vide { aspect-ratio: 4 / 3; }

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

.moyens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.moyens a {
  display: grid; gap: .2rem; height: 100%; padding: 1.1rem 1.25rem 1.2rem;
  border: 2px solid var(--encre); border-radius: 14px; background: #fff; text-decoration: none;
}
.moyens a:hover { background: var(--lilas); color: var(--encre); }
.moyens strong { font-weight: 800; font-stretch: 108%; font-size: 1.1875rem; }
.moyens span { font-size: .9375rem; color: var(--encre-doux); overflow-wrap: anywhere; }
.moyens a:hover strong { color: var(--violet); }

.formulaire { display: grid; gap: 1.1rem; max-width: 46rem; }
.formulaire__ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.champ { display: grid; gap: .4rem; font-weight: 700; font-size: .9375rem; }
.champ small { font-weight: 400; color: var(--encre-doux); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 50px; padding: .7rem .9rem;
  border: 2px solid var(--encre); border-radius: 10px; background: #fff;
  font: 400 1.0625rem/1.4 var(--police); color: var(--encre);
}
.champ textarea { resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 10px; }
.champ [aria-invalid="true"] { border-color: #B3261E; box-shadow: inset 0 0 0 1px #B3261E; }
.formulaire__erreur { padding: .8rem 1rem; border-radius: 10px; background: #fff; border: 2px solid #B3261E; font-weight: 600; font-size: .9375rem; }
.formulaire .btn { justify-self: start; }

/* ---------- Textes longs (pages légales) ---------- */

.prose { max-width: calc(46rem + 2 * var(--marge)); }
.prose > * { max-width: 46rem; }
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); }
.prose > h2:first-child { margin-top: 0; }
.prose p { margin-top: .9rem; }
.prose .fiche { margin-top: 1.25rem; }
.prose .prix-unite { margin-top: 1.25rem; }
.prose a { font-weight: 600; }

/* ---------- Guides ---------- */

.article__date { margin-top: 1rem; font-size: .875rem; color: var(--encre-doux); }
.article { font-size: 1.125rem; line-height: 1.65; }
.article > p, .article > ul, .article > ol, .article > .resume, .article > .defile { margin-top: 1.25rem; }
.article > h2 { margin-top: 3rem; }
.article .liste-ronds { gap: .7rem; }
.article .liste-ronds li::before { top: .5em; }
.article .parcours p { font-size: 1.0625rem; line-height: 1.6; }
.article .prix-unite, .article .liste-triangles { font-size: 1.0625rem; }
.article__suite { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; }

/* "En bref" : l'essentiel avant de lire */
.resume {
  padding: 1.5rem 1.75rem 1.6rem; border-radius: 16px;
  background: var(--lilas); box-shadow: inset 0 0 0 5px var(--lilas), inset 0 0 0 7px var(--encre);
}
.resume h2 { margin: 0; font-size: 1.25rem; }
.resume .liste-ronds { margin-top: .9rem; }

/* Tableau à deux colonnes comparées ; défile à l'horizontale s'il ne tient pas */
.defile { overflow-x: auto; }
.comparatif { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.comparatif thead th { padding: .8rem 1rem; background: var(--encre); color: #fff; text-align: left; font-weight: 800; font-stretch: 108%; }
.comparatif thead th:first-of-type { border-radius: 12px 0 0 0; }
.comparatif thead th:last-of-type { border-radius: 0 12px 0 0; }
.comparatif tbody th { width: 28%; padding: .9rem 1rem .9rem .25rem; text-align: left; vertical-align: top; font-weight: 750; font-stretch: 104%; }
.comparatif tbody td { padding: .9rem 1rem; vertical-align: top; }
.comparatif tbody tr { background: repeating-linear-gradient(90deg, var(--trait) 0 10px, transparent 10px 18px) bottom / 100% 2px no-repeat; }
.comparatif tbody td:nth-child(2) { background-color: rgba(241, 236, 253, .6); }

.lignes--guides { max-width: 52rem; }
.lignes--guides strong { font-size: 1.25rem; margin-bottom: .2rem; }
.lignes--guides span { font-size: 1rem; }

/* ---------- Accord pour la mesure d'audience ---------- */

.cookies {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 70; width: min(100% - 2rem, 27rem);
  padding: 1.25rem; background: #fff; border: 2px solid var(--encre); border-radius: 16px;
  box-shadow: 8px 8px 0 var(--violet-vif); font-size: .9375rem; line-height: 1.5;
}
.cookies strong { display: block; margin-bottom: .2rem; font-weight: 800; font-stretch: 106%; font-size: 1.0625rem; }
.cookies div { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; }
.cookies .btn { height: 46px; }

/* ---------- Écrans intermédiaires ---------- */

@media (max-width: 1100px) {
  .nav, .entete__eleve { display: none; }
  .entete__actions { margin-left: auto; }
  .burger { display: inline-flex; }
  .budget { grid-template-columns: 1fr 1fr; }
  .budget__paiement { grid-column: 1 / -1; }
  .pied__grille { grid-template-columns: repeat(4, 1fr); }
  .pied__marque { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  h1 { font-size: clamp(2.3rem, 10vw, 4.4rem); }
  .hero__grille, .boost__grille, .preuves, .suivi, .agence, .questions, .final__grille { grid-template-columns: minmax(0, 1fr); }
  .hero__visuel { justify-items: center; margin-top: .5rem; }
  .vitesses { justify-self: center; }
  .poteau { grid-template-columns: minmax(0, 1fr); }
  .poteau__panneaux { padding-bottom: 1.6rem; }
  .bilan { max-width: 27rem; }
  .permis { width: min(100%, 20rem); }
  .tarifs .section--serree > .conteneur, .colonnes { display: block; }
  .famille, .tarifs .section--serree > .conteneur > h2 { margin-bottom: 1.5rem; }
  .bref { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bref div:nth-child(odd) { border-left: 0; }
  .bref div:nth-child(n+3) { border-top: 2px dashed var(--trait); }
  .duo--trois { grid-template-columns: minmax(0, 1fr); }
  .moyens, .chiffres--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tunnel { grid-template-columns: minmax(0, 1fr); }
  .ticket { position: static; order: -1; margin-right: 12px; }
  /* Questionnaire : la recommandation vient après les questions, pas avant. */
  .tunnel--questions .ticket { order: 0; scroll-margin-block: calc(var(--h-entete) + 1rem) 5rem; }
  .suite { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* ---------- Téléphone ---------- */

@media (max-width: 720px) {
  :root { --h-entete: 64px; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .bandeau, .entete .fleche--s { display: none; }
  .menu-mobile { padding-bottom: 6.5rem; }
  .cookies { bottom: calc(62px + 1rem + env(safe-area-inset-bottom)); }
  /* Un mot long ("Perfectionnement") ne doit pas pousser la page en largeur. */
  .tete h1 { font-stretch: 106%; font-size: clamp(1.9rem, 8.2vw, 3rem); hyphens: auto; overflow-wrap: break-word; }
  h2 { overflow-wrap: break-word; }
  .logo img { height: 34px; }

  .hero__actions .btn { flex: 1 1 100%; }
  .hero__actions .fleche { justify-content: flex-start; }
  .reperes { grid-template-columns: 1fr; gap: .4rem; }
  .reperes strong { display: inline; margin: 0; font-size: 1rem; }
  .grille { width: min(100%, 17.5rem); }
  .vitesses { margin-top: -2.4rem; }
  .vitesses__liste { justify-content: space-between; }

  .agence__photos {
    display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--marge)); padding-inline: var(--marge);
  }
  .photo-vide, .photo-vide--grande { flex: 0 0 74%; aspect-ratio: 4 / 3; scroll-snap-align: center; }

  .lignes a { align-items: flex-start; }
  .lignes b { font-size: 1.125rem; }
  .temps { grid-template-columns: 1fr; gap: 1.25rem; }
  .temps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1.1rem; align-items: center; }
  .temps svg { height: 4rem; justify-self: start; }
  .temps p { margin-top: 0; }
  .chiffres { gap: 0 1.25rem; }
  .bilan__carte { box-shadow: 9px 9px 0 var(--violet-vif); margin-right: 9px; }
  .budget { grid-template-columns: 1fr; }
  .fiche div { grid-template-columns: 1fr; gap: .15rem; }

  /* Le prix peut être large (échéances) : le texte prend toute la ligne dessous,
     et le bouton se loge à droite du nom du forfait pour ne pas ajouter une rangée. */
  .offre { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "volume prix" "texte texte"; gap: .7rem 1rem; padding-block: 1.1rem; }
  .offre__volume { grid-area: volume; }
  .offre__volume b { font-size: 2.5rem; }
  .offre__prix { grid-area: prix; justify-self: end; max-width: 13.5rem; }
  .offre__texte { grid-area: texte; }
  .offre__pour { font-size: .9375rem; }
  .offre__nom { display: flex; align-items: center; min-height: 44px; margin-top: .35rem; padding-right: 7.5rem; }
  .offre .btn { grid-area: texte; align-self: end; justify-self: end; }
  .avant { padding: 1.4rem 1.25rem; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .formulaire__ligne { grid-template-columns: minmax(0, 1fr); }
  /* Sur téléphone, les trois captures restent visibles : l'image à gauche, sa légende à droite. */
  .ecrans { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .ecrans li { display: grid; grid-template-columns: minmax(0, min(42%, 11rem)) minmax(0, 1fr); gap: 1.1rem; align-items: center; }
  .ecrans p { margin-top: 0; }
  .trombi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bref div { padding: .9rem 1rem 1rem; }
  .parcours li { padding-left: 3.5rem; }
  .liste-triangles li { flex-wrap: wrap; gap: .1rem 1rem; }
  .etapes { display: grid; }
  .etapes li + li::before { display: none; }
  .pied__grille { grid-template-columns: 1fr 1fr; }

  .barre {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr 1.2fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 2px solid var(--encre);
  }
  .barre a {
    display: flex; align-items: center; justify-content: center; gap: .45rem; height: 60px;
    font-weight: 700; font-size: .9375rem; text-decoration: none;
  }
  .barre a + a { border-left: 2px solid var(--encre); }
  .barre__principal { background: var(--violet); color: #fff; }
  .barre__principal:hover { color: #fff; background: var(--violet-fonce); }
}

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

/* Blocs d'agence finalisés, dans la charte signalétique existante. */
.adresse-carte { background:var(--violet);color:white;padding:clamp(1.5rem,4vw,3rem);border-radius:1.25rem;position:relative;overflow:hidden;align-self:stretch; }
.adresse-carte__repere { font-size:.78rem;font-weight:700;letter-spacing:.15em; }
.adresse-carte__numero { display:flex;justify-content:space-between;align-items:center;font-size:clamp(5rem,10vw,8.5rem);font-weight:850;line-height:1.2;letter-spacing:-.08em;margin:.8rem 0;color:var(--lilas-2); }
.adresse-carte__numero span { font-size:.85em;color:var(--rose); }
.adresse-carte h3 { font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.12;letter-spacing:-.04em;margin-bottom:1rem; }
.adresse-carte__horaires { border-top:1px solid #ffffff55;margin:1.5rem 0;padding-top:1.2rem;display:grid;gap:.4rem;font-size:.95rem; }
.adresse-carte .btn {background:white;color:var(--violet);width:100%;justify-content:space-between;}
.services-agence {display:grid;gap:1.3rem;}
.services-agence article {padding:1.5rem;border:1px solid var(--trait);border-radius:1rem;background:white;}
.services-agence article>span {font-weight:800;color:var(--violet);font-size:.9rem;}
.services-agence h3 {margin:.5rem 0;}
.boites-cartes {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;}
.boite-carte {background:var(--lilas);border:1px solid var(--trait);border-radius:1rem;padding:1.5rem;text-decoration:none;transition:transform .15s;}
.boite-carte:hover {transform:translateY(-3px);}
.boite-carte--rose {background:var(--rose);}
.boite-carte__symbole {display:block;color:var(--violet);font-size:2.3rem;line-height:1.3;min-height:10rem;font-weight:800;padding-top:1rem;}
.boite-carte h3 {font-size:1.3rem;display:flex;justify-content:space-between;gap:.5rem;}
.boite-carte p {font-size:.95rem;margin-top:.7rem;}
.message-pret {border-top:2px solid var(--violet);padding-top:1.5rem;margin-top:1.5rem;display:grid;gap:1rem;}
.message-pret textarea {font-size:.95rem;background:white;}
.message-pret .hero__actions {flex-wrap:wrap;gap:.7rem;}
.message-pret [role=status] {font-size:.9rem;color:var(--violet-fonce);}
@media(max-width:600px) {.boites-cartes {grid-template-columns:1fr;}.boite-carte__symbole {min-height:0;padding:0;margin-bottom:1rem;}.adresse-carte {margin-top:1rem;}}
@media(prefers-reduced-motion:reduce) {.boite-carte {transition:none;}.boite-carte:hover {transform:none;}}

/* Photographies Pexels d'illustration, intégration du 9 octobre 2026. */
.galerie-agence {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-self:start;}
.photo-illustration {margin:0;position:relative;overflow:hidden;border-radius:.8rem;background:var(--lilas);}
.photo-illustration img {display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.photo-illustration figcaption {position:absolute;bottom:.45rem;left:.45rem;right:.45rem;padding:.25rem .45rem;background:rgba(9,30,66,.86);color:white;font-size:.65rem;line-height:1.4;border-radius:.25rem;width:fit-content;max-width:calc(100% - .9rem);}
.photo-illustration--large {grid-column:1/-1;}
.services-agence article {overflow:hidden;}
.services-agence .photo-illustration {margin-bottom:1.2rem;}
.services-agence .photo-illustration img {aspect-ratio:2/1;}
.boite-carte .photo-illustration {margin-bottom:1.1rem;}
.boite-carte {min-width:0;}
@media(max-width:600px) {.galerie-agence {gap:.7rem;margin-top:1rem;}.galerie-agence .photo-illustration:not(.photo-illustration--large) img {aspect-ratio:1/1;}.galerie-agence figcaption {font-size:.6rem;}.services-agence .photo-illustration img {aspect-ratio:3/2;}}

/* Cadrages adaptés aux photographies originales. */
.photo-illustration img[src$="paris.jpg"] { object-position: center 35%; }
.photo-illustration img[src$="lecon.jpg"] { object-position: center 28%; }
.photo-illustration img[src$="suivi.jpg"] { object-position: center 45%; }

/* Accueil : une entrée humaine, puis des repères concrets. */
.accueil .hero { background: radial-gradient(ellipse at 90% 15%, #e9e0fc 0, transparent 55%), #faf8ff; padding-block: clamp(2rem, 4vw, 3.5rem); }
.accueil .hero__grille { gap: clamp(1.75rem, 4vw, 3.5rem); }
.accueil .hero h1 { font-size: clamp(2.65rem, 4.8vw, 4.15rem); line-height: 1.06; margin-top: .6rem; }
.accueil .hero .plaque { font-size: .85rem; }
.accueil .hero .chapo { margin-top: 1.1rem; font-size: clamp(1.0625rem, 1.3vw, 1.2rem); max-width: 32rem; }
.accueil .hero__actions { margin-top: 1.5rem; gap: .75rem; }
.accueil .hero__note { font-size: .875rem; max-width: 31rem; }
.hero-confiance { position: relative; min-width: 0; padding: .5rem 0 1rem; }
.hero-confiance__photo { position: relative; overflow: hidden; border-radius: 2rem 2rem 2rem .5rem; background: var(--lilas-2); box-shadow: 0 18px 55px #091e4212; }
.hero-confiance__photo img { display: block; width: 100%; height: clamp(21rem, 33vw, 29rem); object-fit: cover; object-position: 58% center; }
.hero-confiance__photo figcaption { position: absolute; top: 1rem; right: 1rem; background: #091e42dc; color: white; border-radius: 2rem; padding: .3rem .7rem; font-size: .65rem; }
/* La note Google, posée sur la photo : même carte à bord d'encre que la fiche des étapes. */
.hero-confiance__carte {
  position: relative; display: flex; align-items: center; gap: 1rem;
  width: calc(100% - 2rem); margin: -2.25rem auto 0; padding: 1rem 1.25rem;
  background: #fff; border: 2px solid var(--encre); border-radius: 16px; text-decoration: none;
}
.hero-confiance__carte:hover { background: var(--lilas); color: var(--encre); }
.hero-confiance__carte b { flex: none; font-weight: 800; font-stretch: 122%; font-size: 2.6rem; line-height: 1; letter-spacing: -.03em; }
.hero-confiance__carte b small { font-size: .45em; letter-spacing: 0; color: var(--violet); }
.hero-confiance__carte span { font-size: .875rem; line-height: 1.4; color: var(--encre-doux); }
.hero-confiance__carte strong { display: block; font-size: 1.0625rem; font-weight: 750; color: var(--encre); }
.surtitre { color: var(--violet); text-transform: uppercase; font-size: .75rem; font-weight: 750; letter-spacing: .12em; margin-bottom: 1rem; }
.parcours-confiance__grille, .avis-confiance { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.parcours-confiance__liste { margin-block: 1.5rem 2rem; }
.parcours-confiance .hero__visuel { justify-items: center; padding: 1rem; border-radius: 2rem; background: var(--lilas); }
.parcours-confiance .vitesses { justify-self: center; }
.avis-confiance__liens { display: grid; gap: 1rem; }
.avis-confiance__liens a { display: grid; gap: .8rem; padding: 1.5rem; border: 1px solid var(--trait); border-radius: 1rem; text-decoration: none; background: #faf8ff; }
.avis-confiance__liens a:hover { border-color: var(--violet); background: var(--lilas); color: var(--encre); }
.avis-confiance__marque { width: fit-content; padding: .3rem .6rem; background: white; border: 1px solid var(--trait); border-radius: .4rem; font-size: .75rem; font-weight: 750; }
.avis-confiance__liens strong { font-size: 1.15rem; }
.avis-confiance__liens a > span:last-child { display: flex; gap: 1rem; justify-content: space-between; font-size: .85rem; color: var(--encre-doux); }
.avis-confiance__liens b { color: var(--violet); }
.formulaire [aria-invalid="true"] { border-color: #b42318; outline-color: #b42318; }
.btn { min-height: 44px; }
@media (max-width: 900px) {
  .accueil .hero__grille { grid-template-columns: minmax(0, 1fr); }
  .accueil .hero__texte { max-width: 40rem; }
  .hero-confiance { max-width: 40rem; width: 100%; margin-inline: auto; }
  .hero-confiance__photo img { height: clamp(15rem, 48vw, 25rem); }
  .parcours-confiance__grille, .avis-confiance { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .accueil .hero { padding-block: 1.75rem 1.5rem; }
  .accueil .hero h1 { font-size: clamp(2.3rem, 10.2vw, 3.7rem); }
  .accueil .hero__grille { gap: 1.5rem; }
  .hero-confiance__photo { border-radius: 1.25rem; }
  .hero-confiance__photo img { height: 14rem; object-position: 58% center; }
  .hero-confiance__carte { padding: .8rem 1rem; width: calc(100% - 1rem); gap: .8rem; }
  .hero-confiance__carte b { font-size: 2.2rem; }
  .parcours-confiance .hero__visuel { padding: 1rem .5rem; }
}

/* ---------- Sérénité : repères, craintes et réponses ---------- */

/* La mention de lieu fait partie du h1 : les moteurs de recherche la lisent avec le titre. */
h1 small {
  display: block; margin-bottom: .7rem;
  font-stretch: 80%; font-weight: 700; font-size: .875rem; line-height: 1.3;
  letter-spacing: .1em; text-transform: uppercase; color: var(--violet);
}
.accueil .hero h1 { margin-top: 1.6rem; }

/* Quatre repères sous le premier écran, séparés comme les cases d'une fiche. */
.faits { border-block: 2px solid var(--encre); background: #fff; }
.faits ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.faits li { padding: 1.1rem 1.25rem 1.15rem; font-size: .9375rem; line-height: 1.35; color: var(--encre-doux); }
.faits li + li { border-left: 2px dashed var(--trait); }
.faits li:first-child { padding-left: 0; }
.faits strong { display: block; font-weight: 800; font-stretch: 112%; font-size: 1.1875rem; line-height: 1.25; color: var(--encre); }

/* Une crainte dite tout haut (la bulle), puis ce qui se passe vraiment (sous le trait).
   La sous-grille aligne les traits d'une colonne à l'autre, quelle que soit la longueur des bulles. */
.rassure h2 span { color: var(--violet); }
.rassure--page h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem); }
/* Sur la page Tarifs, les sections sont en deux colonnes : ce bloc reste en pleine largeur. */
.tarifs .rassure > .conteneur { display: block; }
.parcours-confiance .intro + .btn { margin-top: 1.75rem; }
.hero__actions + .hero__note { margin-top: .9rem; }
.peurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 clamp(1.25rem, 2.5vw, 2.25rem); margin-top: 2.25rem; }
.peurs--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 62rem; }
.peurs li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
/* Tableau à deux colonnes (une fiche) : il tient dans la largeur d'un téléphone. */
.comparatif--fiche { min-width: 0; border-top: 3px solid var(--encre); }
.comparatif--fiche tbody th { width: 38%; }
.comparatif--fiche tbody td:nth-child(2) { background: none; }
.peurs__q {
  position: relative; align-self: end; justify-self: start; margin-bottom: 1.5rem;
  padding: .7rem 1rem .75rem; background: var(--rose); border-radius: 16px 16px 16px 0;
  font-weight: 650; font-stretch: 96%; line-height: 1.3;
}
.peurs__q::after {
  content: ""; position: absolute; left: 0; top: 100%; width: 16px; height: 11px;
  background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%);
}
.peurs__r { padding-top: 1rem; border-top: 3px solid var(--encre); font-size: .9375rem; line-height: 1.5; color: var(--encre-doux); }
.peurs__r strong { display: block; margin-bottom: .3rem; font-weight: 800; font-stretch: 108%; font-size: 1.25rem; line-height: 1.2; color: var(--encre); }
.rassure__suite { margin-top: 2rem; }

.chiffres--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 56rem; margin-top: 2.25rem; }
.colonnes > .chiffres--trois { margin-top: 0; }
.chiffres__source { margin-top: .25rem; font-size: .8125rem; color: var(--encre-doux); }

@media (max-width: 1100px) {
  .peurs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .peurs--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .faits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faits li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .faits li:nth-child(n+3) { border-top: 2px dashed var(--trait); }
  .peurs--trois { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
}
@media (max-width: 720px) {
  /* La colonne de la grille ne doit pas s'élargir avec ses six boutons : ce sont eux qui se resserrent. */
  .hero__visuel { grid-template-columns: minmax(0, 1fr); }
  .faits li { padding: .8rem .9rem .85rem; font-size: .875rem; }
  .faits strong { font-size: 1.0625rem; }
  .peurs { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; margin-top: 1.75rem; }
  .peurs__q { margin-bottom: 1.25rem; }
  .chiffres--trois { grid-template-columns: minmax(0, 1fr); }
  .chiffres--trois div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: center; padding: 1rem 0; }
  .chiffres--trois dt { font-size: 2.4rem; }
  .chiffres--trois dd { margin-top: 0; }
}
/* Très petits écrans : un libellé long passe sur deux lignes plutôt que de pousser la page. */
@media (max-width: 380px) {
  .btn { height: auto; min-height: 52px; padding-block: .7rem; white-space: normal; line-height: 1.2; text-align: left; }
  .bref dd { overflow-wrap: anywhere; }
}

/* ---------- Trajet : la voiture roule du point A au permis B, au rythme du défilement ---------- */

/* Sans script, ou si le visiteur a demandé moins d'animations, la section reste une simple liste :
   la voiture en haut, les étapes dessous. Le script ajoute "trajet--anime" pour passer en mode
   collant, puis écrit deux variables à chaque image : --p (0 à 1) et --s (numéro de scène, à virgule). */
.trajet {
  /* Réglages de l'animation. */
  --trajet-pas: 70vh;                      /* défilement nécessaire pour passer d'une scène à la suivante */
  --trajet-fondu: 5.2;                     /* netteté du fondu entre deux textes : plus grand, plus net */
  --trajet-glisse: 44px;                   /* course verticale des textes */
  --trajet-zoom: .16;                      /* grossissement de la voiture au départ et à l'arrivée */
  --l-voiture: clamp(11rem, 24vw, 20rem);  /* largeur de la voiture */
  --trajet-fond: #fff;                     /* couleur de fond de la section */

  --p: 0; --s: 0; --n: 6; --course: 0px; --tours: 0;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background: var(--trajet-fond);
}
.trajet__in { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.trajet__etapes { display: grid; gap: 2.75rem; justify-items: center; text-align: center; }
.trajet__etape { max-width: 42rem; }
.trajet__sur {
  margin-bottom: .7rem;
  font-stretch: 80%; font-weight: 700; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--violet);
}
.trajet__etape h2, .trajet__etape h3 { font-weight: 800; font-stretch: 112%; letter-spacing: -.022em; text-wrap: balance; }
.trajet__etape h2 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.9rem); line-height: 1.02; }
.trajet__etape h3 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.1rem); line-height: 1.06; }
.trajet__texte { margin: .9rem auto 0; max-width: 33rem; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); line-height: 1.5; color: var(--encre-doux); text-wrap: balance; }
.trajet__etape .btn { margin-top: 1.6rem; }
/* En liste (sans animation), les étapes sont plus petites que le titre : la section reste courte. */
.trajet:not(.trajet--anime) .trajet__etape h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }

/* La route : la voiture est posée dessus, les bornes sont dessous.
   --demi : demi-largeur de la voiture quand elle est grossie, pour que la route la porte jusqu'au bout. */
.trajet__route { --demi: calc(var(--l-voiture) * (1 + var(--trajet-zoom)) / 2); order: -1; padding-inline: var(--demi); }
.voiture { position: relative; z-index: 1; width: var(--l-voiture); margin-inline: auto; transform-origin: 50% 100%; }
.voiture svg { display: block; width: 100%; height: auto; overflow: visible; }
.voiture__caisse { fill: var(--violet); stroke: var(--encre); stroke-width: 4; stroke-linejoin: round; }
.voiture__vitre { fill: #fff; stroke: var(--encre); stroke-width: 3; stroke-linejoin: round; }
.voiture__tete { fill: var(--encre); }
.voiture__trait { fill: none; stroke: var(--violet-fonce); stroke-width: 3; stroke-linecap: round; }
.voiture__poignee { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.voiture__feu { fill: var(--rose-vif); }
.voiture__phare { fill: var(--rose); stroke: var(--encre); stroke-width: 2.5; }
.voiture__toit rect { fill: #fff; stroke: var(--encre); stroke-width: 3; }
.voiture__toit text { font: 800 7.5px var(--police); font-stretch: 75%; letter-spacing: .05em; fill: var(--encre); text-anchor: middle; dominant-baseline: central; }
.voiture__a { opacity: 0; transform-box: fill-box; transform-origin: center; }
.voiture__a circle { fill: #fff; stroke: var(--encre); stroke-width: 2.5; }
.voiture__a text { font: 800 15px var(--police); font-stretch: 108%; fill: #D5202F; text-anchor: middle; dominant-baseline: central; }
.voiture__roue { transform-box: fill-box; transform-origin: center; }
.voiture__roue circle { fill: var(--encre); }
.voiture__roue .voiture__jante { fill: var(--lilas-2); }
.voiture__roue path { fill: none; stroke: var(--encre); stroke-width: 3; stroke-linecap: round; }
.trajet__chaussee {
  height: 18px; margin-inline: calc(var(--demi) * -1); border-radius: 9px;
  background: repeating-linear-gradient(90deg, #fff 0 22px, transparent 22px 40px) center / calc(100% - 28px) 2px no-repeat, var(--encre);
}

/* Les bornes, créées par le script : une par scène. Un clic amène à la scène. */
.trajet__bornes { position: relative; height: 4.6rem; margin-top: .9rem; }
.trajet__bornes button {
  position: absolute; top: 0; left: calc(var(--k) / (var(--n) - 1) * 100%); transform: translateX(-50%);
  display: grid; justify-items: center; gap: .45rem; min-width: 44px; padding: 0; border: 0; background: none; cursor: pointer;
}
.trajet__bornes b {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 2px solid var(--encre); border-radius: 50%; background: #fff;
  font-weight: 800; font-stretch: 118%; font-size: .9375rem; line-height: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.trajet__bornes span {
  font-stretch: 80%; font-weight: 700; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase;
  white-space: nowrap; color: var(--encre-doux); transition: color .2s ease;
}
.trajet__bornes button:hover b { background: var(--lilas-2); }
.trajet__bornes .est-passee b { background: var(--encre); color: #fff; }
.trajet__bornes .est-active b { background: var(--violet); border-color: var(--violet); color: #fff; }
.trajet__bornes .est-active:last-child b { background: var(--rose); border-color: var(--encre); color: var(--encre); }
.trajet__bornes .est-active span { color: var(--encre); }

/* Mode animé : la scène reste collée sous l'en-tête pendant que la page défile. */
.trajet--anime {
  --h-scene: calc(100vh - var(--h-entete) - 2px - var(--h-barre, 0px));
  height: calc(var(--h-scene) + (var(--n) - 1) * var(--trajet-pas));
  padding-block: 0;
}
@supports (height: 100svh) {
  .trajet--anime { --h-scene: calc(100svh - var(--h-entete) - 2px - var(--h-barre, 0px)); }
}
.trajet--anime .trajet__scene {
  position: sticky; top: calc(var(--h-entete) + 2px); height: var(--h-scene);
  display: grid; align-items: center; overflow: hidden;
}
.trajet--anime .trajet__in { gap: clamp(1.25rem, 4.5vh, 3.25rem); }
.trajet--anime .trajet__route { order: 0; }
.trajet--anime .trajet__etapes { gap: 0; align-items: end; }
/* Toutes les scènes occupent la même case : seule celle dont le numéro est proche de --s se voit. */
.trajet--anime .trajet__etape {
  grid-area: 1 / 1;
  --ecart: max(var(--s) - var(--k), var(--k) - var(--s));
  opacity: clamp(0, var(--trajet-fondu) * (.48 - var(--ecart)), 1);
  transform: translate3d(0, calc((var(--k) - var(--s)) * var(--trajet-glisse)), 0);
  pointer-events: none;
}
.trajet--anime .trajet__etape.est-active { pointer-events: auto; }
.trajet--anime .voiture {
  /* --bout vaut 1 au départ et à l'arrivée, 0 pendant le trajet : la voiture y est un peu plus grande. */
  --bout: calc(clamp(0, 1 - 2 * var(--s), 1) + clamp(0, 2 * (var(--s) - var(--n) + 1.5), 1));
  /* --fin passe de 0 à 1 sur la dernière demi-scène : le panneau d'auto-école laisse la place au disque A. */
  --fin: clamp(0, 2.6 * (var(--s) - var(--n) + 1.45), 1);
  margin-left: calc(var(--l-voiture) / -2);
  transform: translate3d(calc(var(--p) * var(--course)), 0, 0) scale(calc(1 + var(--trajet-zoom) * var(--bout)));
  will-change: transform;
}
.trajet--anime .voiture__roue { transform: rotate(calc(var(--p) * var(--tours) * 1turn)); }
.trajet--anime .voiture__toit { opacity: calc(1 - var(--fin)); }
.trajet--anime .voiture__a { opacity: var(--fin); transform: scale(calc(.4 + .6 * var(--fin))); }

@media (max-width: 900px) {
  .trajet { --l-voiture: clamp(9.5rem, 30vw, 14rem); }
  .trajet__bornes { height: 4.2rem; }
}
/* Téléphone : trajets plus courts, bornes sans légende, place laissée à la barre du bas. */
@media (max-width: 720px) {
  .trajet {
    --trajet-pas: 62vh; --trajet-glisse: 26px; --trajet-zoom: .1; --l-voiture: 9.25rem;
    --h-barre: calc(62px + env(safe-area-inset-bottom, 0px));
  }
  .trajet__route { padding-inline: calc(var(--demi) - var(--marge) + 8px); }
  .trajet__chaussee { height: 14px; }
  .voiture__toit text { display: none; }
  .trajet__bornes { height: 2.75rem; margin-top: .7rem; }
  .trajet__bornes button { min-width: 34px; }
  .trajet__bornes b { width: 28px; height: 28px; font-size: .8125rem; }
  .trajet__bornes span { display: none; }
  .trajet--anime .trajet__in { gap: clamp(1rem, 3.5vh, 2rem); }
}
@media (max-width: 380px) {
  .trajet { --l-voiture: 8rem; }
  .trajet__bornes b { width: 24px; height: 24px; font-size: .75rem; }
  .trajet__bornes button { min-width: 26px; }
}

/* ---------- Boost en vedette, vidéos ---------- */

/* "Conseillé" : la seule pastille du site, réservée à la formule mise en avant. */
.conseille {
  display: inline-flex; align-items: center; padding: .28rem .7rem .3rem; border-radius: 999px;
  background: var(--rose); color: var(--encre);
  font-style: normal; font-stretch: 80%; font-weight: 700; font-size: .8125rem; line-height: 1.2;
  letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; vertical-align: .12em;
}
p.conseille { margin-bottom: 1rem; }
strong .conseille, a .conseille { margin-left: .35rem; }

.nav__lien--boost { color: var(--violet); font-weight: 750; }
.deroulant__vedette { grid-column: 1 / -1; margin-bottom: .25rem; }
.deroulant__vedette a { background: var(--lilas); }
.deroulant__vedette a:hover { background: var(--lilas-2); }
.hero__boost { margin-top: 1.1rem; font-size: .9375rem; }

/* Sur fond d'encre : listes, bouton secondaire et notes en clair. */
.section--nuit .liste-ronds li { color: #D5DAEA; }
.section--nuit .liste-ronds strong { color: #fff; }
.section--nuit .liste-ronds li::before { background: var(--violet-vif); box-shadow: inset 0 0 0 2px var(--violet-vif), inset 0 0 0 3.5px var(--encre); }
.section--nuit .btn--ligne { border-color: #fff; color: #fff; }
.section--nuit .btn--ligne:hover { background: #fff; color: var(--encre); }
.section--nuit .hero__note { color: #D5DAEA; }
/* Forfaits sur fond d'encre (AAC Boost Vacances) : prix et listes en clair. */
.section--nuit { --trait: #3B4A6B; }
.section--nuit .offres { border-top-color: #fff; }
.section--nuit .offre__volume, .section--nuit .offre__echeances, .section--nuit .liste-triangles span, .section--nuit .renvoi { color: #D5DAEA; }
.section--nuit .offre__volume b, .section--nuit .offre__echeances a, .section--nuit .renvoi a { color: #fff; }
.section--nuit .offre__echeances a:hover, .section--nuit .renvoi a:hover { color: var(--rose); }
.section--nuit .offre__nom, .section--nuit .offre__bonus { color: #C9B6FA; }
.section--nuit .offre:target { background-color: #13295A; box-shadow: -1rem 0 0 #13295A, 1rem 0 0 #13295A; }
.boost .hero__actions { margin-top: 0; }
.boost__etapes { counter-reset: etape; display: grid; gap: .7rem; margin-top: 1.5rem; }
.boost__etapes li { position: relative; counter-increment: etape; padding-left: 2.6rem; line-height: 1.45; color: #D5DAEA; }
.boost__etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: -.1em;
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border: 2px solid #fff; border-radius: 50%; font-weight: 800; font-stretch: 118%; font-size: .875rem; color: #fff;
}
.boost__etapes strong { margin-right: .25em; color: #fff; }

/* Lecteur vidéo : l'image d'attente et un bouton. Rien ne se charge avant le clic. */
.video { margin: 0; padding: 0 12px 12px 0; }
.video__cadre { position: relative; }
.video video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--encre); border: 2px solid var(--encre); border-radius: 20px;
  box-shadow: 12px 12px 0 var(--violet-vif);
}
.section--nuit .video video { border-color: #fff; }
.video figcaption { margin-top: 1.5rem; font-size: .875rem; line-height: 1.45; color: var(--encre-doux); }
.section--nuit .video figcaption { color: #D5DAEA; }
.video__lancer {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: clamp(.75rem, 2vw, 1.25rem);
  border: 0; border-radius: 20px; background: none; cursor: pointer;
}
.video__lancer span {
  display: inline-flex; align-items: center; gap: .65rem; height: 48px; padding: 0 1.1rem 0 .45rem;
  border: 2px solid var(--encre); border-radius: 999px; background: #fff; color: var(--encre);
  font-weight: 750; font-stretch: 104%; white-space: nowrap;
}
.video__lancer i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--violet); }
.video__lancer i::before { content: ""; margin-left: 3px; border-left: 11px solid #fff; border-block: 7px solid transparent; }
.video__lancer small { font-weight: 600; font-size: .875rem; color: var(--encre-doux); }
.video__lancer:hover span { background: var(--rose); }

/* La formule conseillée, encadrée comme la carte du bilan. */
.vedette {
  margin-right: 10px; padding: clamp(1rem, 2.4vw, 1.6rem);
  background: #fff; border: 2px solid var(--encre); border-radius: 20px; box-shadow: 10px 10px 0 var(--violet-vif);
}
.vedette__titre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-bottom: 1rem; font-weight: 800; font-stretch: 108%; font-size: 1.1875rem; line-height: 1.25; }
.vedette .offre:last-child { padding-bottom: .4rem; background: none; }
.vedette + .renvoi { margin-top: 1.6rem; }
.offres__titre { margin: 2.25rem 0 .9rem; font-weight: 800; font-stretch: 108%; font-size: 1.1875rem; line-height: 1.25; }
.section--lilas .comparatif tbody td:nth-child(2) { background-color: #fff; }

@media (max-width: 720px) {
  .video { padding: 0 8px 8px 0; }
  .video video, .video__lancer { border-radius: 16px; }
  .video video { box-shadow: 8px 8px 0 var(--violet-vif); }
  .video__lancer span { height: 44px; font-size: .9375rem; }
  .vedette { margin-right: 8px; padding: .9rem .9rem 1rem; box-shadow: 8px 8px 0 var(--violet-vif); }
}

/* ---------- Téléphone : finitions ---------- */

html { -webkit-tap-highlight-color: rgba(99, 58, 215, .18); }
.photo-illustration figcaption, .hero-confiance__photo figcaption { font-size: .6875rem; }

/* Tablette et téléphone : la vidéo passe juste sous le titre, avant la liste et les boutons. */
@media (max-width: 900px) {
  .boost__grille--video { display: flex; flex-direction: column; gap: 0; }
  .boost__grille--video > div:first-child { display: contents; }
  .boost__grille--video .conseille { align-self: flex-start; }
  .boost__grille--video .video { order: 1; margin-top: 1.75rem; }
  .boost__grille--video :is(.liste-ronds, .boost__etapes, .boost__prix, .hero__actions, .hero__note) { order: 2; }
}

@media (max-width: 720px) {
  /* Des sections un peu moins hautes : la page d'accueil est longue sur un petit écran. */
  .section:not(.section--serree):not(.section--nuit) { padding-block: 3rem; }

  /* Zones tactiles : au moins 40 px de haut pour le pouce. */
  .logo { min-height: 44px; }
  .fil a { padding-block: .6rem; }
  .lien-fleche { display: inline-block; padding-block: .45rem; }
  .lien-fleche::after { display: inline-block; margin-left: .5em; vertical-align: .06em; }
  .pied__grille { gap: 2rem 1.25rem; }
  .pied li { line-height: 1.3; }
  .pied li a { display: block; padding-block: .7rem; }
  .pied address a, .pied__reseaux a { display: inline-block; padding-block: .45rem; }
  .pied__reseaux { gap: 0 1.25rem; }

  /* Un tableau à trois colonnes tient dans l'écran, sans défilement de côté. */
  .comparatif { min-width: 0; font-size: .875rem; line-height: 1.35; }
  .comparatif thead th { padding: .6rem; }
  .comparatif tbody th { width: 31%; padding: .7rem .5rem .7rem 0; }
  .comparatif tbody td { padding: .7rem .6rem; }

  /* Photos d'illustration : une seule sur l'accueil et la page contact, aucune dans les cartes de l'agence. */
  .galerie-agence { grid-template-columns: minmax(0, 1fr); }
  .galerie-agence .photo-illustration:not(.photo-illustration--large), .services-agence .photo-illustration { display: none; }
  .galerie-agence .photo-illustration--large img { aspect-ratio: 16 / 9; }
  .galerie-agence figcaption { font-size: .6875rem; }
  .services-agence article { padding: 1.1rem 1.15rem; }

  /* Trajet : le texte occupe le haut de l'écran, la route est posée en bas comme un sol,
     et chaque scène demande moins de défilement. */
  .trajet { --trajet-pas: 52vh; --l-voiture: 10.5rem; }
  .trajet--anime .trajet__scene { align-items: stretch; }
  .trajet--anime .trajet__in { grid-template-rows: minmax(0, 1fr) auto; gap: .5rem; padding-block: 1rem 1.1rem; }
  .trajet--anime .trajet__etapes { align-items: center; }
  .trajet__bornes button { min-width: 36px; min-height: 44px; align-content: start; }
}
@media (max-width: 380px) {
  .trajet { --l-voiture: 8.5rem; }
  .trajet__bornes button { min-width: 28px; }
}

/* ---------- Citations de La Fontaine : une signature sobre, mais lisible ---------- */
/* La phrase en italique a empattements, les guillemets en couleur, l'attribution en petites capitales.
   Elles viennent toujours apres l'information commerciale, jamais avant. */
.citation { margin: 1.75rem 0 0; max-width: 36rem; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--violet); }
.citation blockquote { margin: 0; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; font-style: italic; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); line-height: 1.3; color: var(--encre); }
.citation__g { font-style: normal; color: var(--violet); }
.citation figcaption { margin-top: .55rem; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-doux); }
.citation figcaption::before { content: "\2014\00a0"; }
.vedette .citation { margin-top: 1.4rem; }
/* Sur l'accueil : la citation ferme le bloc Boost, centree, sur toute la largeur. */
.citation--grande { grid-column: 1 / -1; order: 2; max-width: none; margin-top: clamp(2rem, 4vw, 3.25rem); padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .28); text-align: center; }
.citation--grande blockquote { font-size: clamp(1.7rem, 1.05rem + 2.6vw, 2.85rem); line-height: 1.2; color: #fff; }
.citation--grande .citation__g { color: var(--rose); }
.citation--grande figcaption { margin-top: .9rem; font-size: .875rem; color: rgba(255, 255, 255, .8); }
/* Sous le grand titre de l'accueil : la citation en epigraphe, plus fine, visible des le premier ecran. */
.citation--epigraphe { margin: 1.15rem 0 0; max-width: 34rem; }
.citation--epigraphe blockquote { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); }
.citation--epigraphe + .chapo { margin-top: 1.15rem; }
.chapo strong { font-weight: 750; color: var(--encre); }

/* ---------- Pourquoi nous : Klutsh en chiffres ---------- */
/* À gauche, le taux de réussite sur un grand panneau violet à listel blanc, avec deux voies
   qui se comparent. À droite, trois chiffres en lignes ; le dernier est un panneau de direction. */
.atouts__sur {
  margin-bottom: .7rem;
  font-stretch: 80%; font-weight: 700; font-size: .875rem; line-height: 1.3;
  letter-spacing: .1em; text-transform: uppercase; color: var(--violet);
}
/* La phrase de la maison : elle répond au titre, les chiffres viennent ensuite la prouver. */
.atouts__devise {
  margin-top: 1rem; max-width: 46rem;
  font-weight: 700; font-stretch: 104%; font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2rem); line-height: 1.25;
  letter-spacing: -.01em; text-wrap: balance;
}
.atouts__devise span { color: var(--violet); }
.atouts__grille {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.75rem); align-items: center;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.reussite {
  padding: clamp(1.7rem, 3.4vw, 2.75rem); border-radius: 22px;
  background: var(--violet); color: #fff;
  box-shadow: inset 0 0 0 5px var(--violet), inset 0 0 0 7px rgba(255, 255, 255, .9);
  view-timeline: --reussite block;
}
.reussite__taux { display: grid; gap: .55rem; }
.reussite__taux b { font-weight: 800; font-stretch: 125%; font-size: clamp(4.4rem, 2.2rem + 9.5vw, 8rem); line-height: .86; letter-spacing: -.04em; white-space: nowrap; }
.reussite__taux b small { font-size: .42em; letter-spacing: 0; color: var(--rose); }
.reussite__taux span { font-weight: 750; font-stretch: 106%; font-size: clamp(1.1875rem, 1rem + .8vw, 1.5rem); line-height: 1.2; }

/* Deux voies, graduées de 0 à 100 % : la flèche blanche est celle de Klutsh. */
.voies { display: grid; gap: .9rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.voies dt { font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.voies dd { margin-top: .35rem; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 16px, transparent 16px 30px) left center / 100% 2px no-repeat; }
.voies b {
  --r: 8px; --t: 20px;
  display: flex; align-items: center; justify-content: flex-end;
  width: var(--part); min-width: 6.5rem; height: 46px; padding-right: calc(var(--t) + .5rem);
  background: var(--violet-fonce); color: #fff;
  font-weight: 800; font-stretch: 112%; font-size: 1.1875rem; line-height: 1; white-space: nowrap;
  clip-path: polygon(
    0 var(--r), calc(var(--r) * .134) calc(var(--r) * .5), calc(var(--r) * .5) calc(var(--r) * .134), var(--r) 0,
    calc(100% - var(--t)) 0, 100% 50%, calc(100% - var(--t)) 100%,
    var(--r) 100%, calc(var(--r) * .5) calc(100% - var(--r) * .134), calc(var(--r) * .134) calc(100% - var(--r) * .5), 0 calc(100% - var(--r))
  );
}
.voies__nous b { background: #fff; color: var(--violet-fonce); }
.reussite__ecart { margin-top: 1.4rem; font-weight: 700; font-size: 1.0625rem; line-height: 1.35; }
.reussite__source { margin-top: .5rem; font-size: .8125rem; line-height: 1.4; color: rgba(255, 255, 255, .84); }

/* Les flèches avancent quand le panneau entre dans l'écran. Sans cette fonction du navigateur, elles sont déjà en place. */
@keyframes voie-avance { from { width: 6.5rem; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .voies b { animation: voie-avance linear both; animation-timeline: --reussite; animation-range: entry 45% contain 20%; }
  }
}

.atouts__liste { --col: clamp(6rem, 4.4rem + 5vw, 8.5rem); border-top: 3px solid var(--encre); }
.atouts__liste li { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 1.2rem 0; }
.atouts__liste li + li { border-top: 2px dashed var(--trait); }
.atouts__nombre { font-stretch: 80%; font-weight: 700; font-size: .8125rem; line-height: 1.2; letter-spacing: .09em; text-transform: uppercase; color: var(--violet); }
.atouts__nombre b {
  display: block; margin-bottom: .35rem;
  font-weight: 800; font-stretch: 122%; font-size: clamp(3rem, 2.2rem + 2.6vw, 4.25rem); line-height: .9;
  letter-spacing: -.03em; text-transform: none; white-space: nowrap; color: var(--encre);
}
.atouts__liste h3 { font-size: 1.1875rem; }
.atouts__liste h3 + p { margin-top: .3rem; font-size: .9375rem; line-height: 1.5; color: var(--encre-doux); }

/* Le permis en un mois : un panneau de direction rose, qui pointe vers Boost. */
.atouts__liste .atouts__rapide {
  --r: 10px; --t: 26px;
  margin: .5rem -1.15rem 0; padding: 1.2rem calc(var(--t) + .6rem) 1.25rem 1.15rem; border-top: 0;
  background: var(--rose);
  clip-path: polygon(
    0 var(--r), calc(var(--r) * .134) calc(var(--r) * .5), calc(var(--r) * .5) calc(var(--r) * .134), var(--r) 0,
    calc(100% - var(--t)) 0, 100% 50%, calc(100% - var(--t)) 100%,
    var(--r) 100%, calc(var(--r) * .5) calc(100% - var(--r) * .134), calc(var(--r) * .134) calc(100% - var(--r) * .5), 0 calc(100% - var(--r))
  );
}
.atouts__rapide .atouts__nombre, .atouts__rapide h3 + p { color: var(--encre); }
.atouts__rapide .lien-fleche { margin-top: .35rem; white-space: nowrap; }
.atouts__rapide .lien-fleche:hover { color: var(--violet-fonce); }

/* En deux colonnes, le grand chiffre suit la largeur de sa colonne. */
@media (min-width: 901px) {
  .reussite__taux b { font-size: clamp(4.4rem, 10.5vw, 8rem); }
}
@media (max-width: 900px) {
  .atouts__grille { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 720px) {
  .reussite { border-radius: 18px; }
  .atouts__liste li { gap: .9rem; padding: 1.05rem 0; }
  .atouts__liste h3 { font-size: 1.125rem; }
  .atouts__liste .atouts__rapide { margin-inline: -.75rem; padding: 1.05rem calc(var(--t) + .3rem) 1.1rem .75rem; }
}

/* ---------- Forfait conseille : une pastille au-dessus du texte, la ligne sur fond lilas ---------- */
/* L'heure offerte s'affiche sous le volume. */
.offre--conseil { background-color: var(--lilas); box-shadow: -.75rem 0 0 var(--lilas), .75rem 0 0 var(--lilas); }
.vedette .offre--conseil:last-child { padding-bottom: 1.35rem; background-color: var(--lilas); }
.section--lilas .offre--conseil { background-color: var(--lilas-2); box-shadow: -.75rem 0 0 var(--lilas-2), .75rem 0 0 var(--lilas-2); }
.section--lilas .vedette .offre--conseil { background-color: var(--lilas); box-shadow: -.75rem 0 0 var(--lilas), .75rem 0 0 var(--lilas); }
.offre__conseil { margin-bottom: .5rem; }
.offre__bonus { display: block; margin-top: .25rem; font-weight: 800; font-size: .875rem; line-height: 1.2; color: var(--violet); white-space: nowrap; }

/* ---------- Boost Vacances : stages des vacances scolaires ---------- */
/* Sur fond rose, la pastille passe en encre pour rester lisible. */
.section--rose .conseille { background: var(--encre); color: #fff; }
.section--rose .renvoi, .section--rose .hero__note { color: var(--encre); }
.vacances__grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 23rem); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.vacances__prix { margin-top: 1.5rem; max-width: 36rem; line-height: 1.5; }
.vacances .hero__actions { margin-top: 1.5rem; }
.vacances .btn--ligne:hover { background: var(--encre); color: #fff; }

/* Un calendrier de vacances : les jours du stage sont en violet. */
.agenda { margin: 0 12px 12px 0; padding: 1.25rem 1.25rem 1.1rem; background: #fff; border: 2px solid var(--encre); border-radius: 20px; box-shadow: 12px 12px 0 var(--violet); }
.agenda__titre { padding-bottom: .7rem; border-bottom: 3px solid var(--encre); font-stretch: 80%; font-weight: 700; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; }
.agenda__jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: .9rem; }
.agenda__jours li { aspect-ratio: 1; border-radius: 8px; background: var(--lilas); }
.agenda__jours .j { aspect-ratio: auto; background: none; font-stretch: 80%; font-weight: 700; font-size: .75rem; line-height: 1.4; text-align: center; color: var(--encre-doux); }
.agenda__jours .w { background: none; box-shadow: inset 0 0 0 2px var(--trait); }
.agenda__jours .s { background: var(--violet); }
.agenda__legende { display: flex; align-items: center; gap: .55rem; margin-top: .95rem; font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.agenda__legende span { flex: none; width: 1rem; height: 1rem; border-radius: 4px; background: var(--violet); }

/* Prix sans la reduction, barre sous le prix. */
.offre__barre { font-size: .875rem; line-height: 1.4; color: var(--encre-doux); }
.offre__barre s { text-decoration-thickness: .12em; }

/* Sessions datees d'un stage : periode, dates, places, bouton. */
.sessions__attente { max-width: 42rem; padding: 1.15rem 1.3rem; border: 2px dashed var(--trait); border-radius: 16px; background: #fff; line-height: 1.5; }
.sessions { border-top: 3px solid var(--encre); }
.session {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "titre places bouton" "limite places bouton";
  gap: .3rem clamp(1rem, 2.5vw, 2rem); align-items: center; padding: 1.15rem .25rem;
  background: repeating-linear-gradient(90deg, var(--trait) 0 10px, transparent 10px 18px) bottom / 100% 2px no-repeat;
}
.session > div { grid-area: titre; }
.session__places { grid-area: places; }
.session__limite { grid-area: limite; }
.session .btn { grid-area: bouton; }
.session__periode { font-weight: 800; font-stretch: 108%; font-size: 1.1875rem; line-height: 1.2; }
.session__dates { margin-top: .15rem; color: var(--encre-doux); }
.session__places { font-weight: 600; font-size: .9375rem; color: var(--encre-doux); white-space: nowrap; }
.session__places b { font-weight: 800; font-stretch: 122%; font-size: 1.6rem; color: var(--encre); }
.session__limite { font-size: .875rem; font-weight: 700; color: var(--violet); }

/* Annonce en fenetre : un panneau pose en bas a droite, qui ne bloque pas la page. */
.annonce {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 65; width: min(22.5rem, calc(100vw - 2rem));
  padding: 1.15rem 1.25rem 1.25rem; background: #fff; border: 2px solid var(--encre); border-radius: 18px; box-shadow: 8px 8px 0 var(--violet);
}
.annonce__fermer { position: absolute; top: .45rem; right: .45rem; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.annonce__fermer:hover { background: var(--lilas); }
.annonce p.conseille { margin-bottom: .6rem; }
.annonce__titre { padding-right: 1.75rem; font-weight: 800; font-stretch: 108%; font-size: 1.1875rem; line-height: 1.2; }
.annonce__texte { margin: .45rem 0 .95rem; font-size: .9375rem; line-height: 1.45; color: var(--encre-doux); }
@keyframes annonce-arrive { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: no-preference) { .annonce:not([hidden]) { animation: annonce-arrive .35s ease-out both; } }

@media (max-width: 900px) {
  .vacances__grille { grid-template-columns: minmax(0, 1fr); }
  .agenda { max-width: 21rem; }
}
@media (max-width: 720px) {
  .session { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "places" "limite" "bouton"; gap: .4rem; padding: 1.1rem 0 1.2rem; }
  .session .btn { justify-self: start; margin-top: .4rem; }
  .annonce { left: .75rem; right: .75rem; width: auto; bottom: calc(62px + env(safe-area-inset-bottom, 0px) + .75rem); box-shadow: 6px 6px 0 var(--violet); }
}

/* Menu : avec "Boost Vacances" en plus, le lien "Espace eleve" se retire sur les ecrans de largeur moyenne
   (il reste dans le pied de page), pour que l'en-tete tienne sur une ligne. */
.nav__lien, .entete__eleve { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1299px) {
  .entete__in { gap: 1.25rem; }
  .nav__lien { padding-inline: .55rem; }
  .entete__eleve { display: none; }
}

/* Accueil, bloc Boost Vacances : les deux offres en deux lignes nettes (boite, heures, prix, ancien prix). */
.vacances__titre { margin-top: 1.6rem; font-stretch: 80%; font-weight: 700; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; }
.vacances__offres { max-width: 30rem; margin-top: .6rem; border-top: 3px solid var(--encre); }
.vacances__offres li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 2px dashed rgba(9, 30, 66, .32); }
.vacances__offres span { font-size: .9375rem; line-height: 1.35; }
.vacances__offres strong { display: block; font-weight: 800; font-stretch: 106%; font-size: 1.0938rem; }
.vacances__offres b { flex: none; font-weight: 800; font-stretch: 114%; font-size: 1.5rem; line-height: 1.1; text-align: right; white-space: nowrap; }
.vacances__offres s { display: block; margin-top: .15rem; font-weight: 600; font-stretch: 100%; font-size: .8125rem; }
.vacances__prix { margin-top: .8rem; font-size: .9375rem; }

/* ---------- Téléphone : tout est visible, tout se lit ---------- */
/* Un mot composé ou un horaire ne se coupe pas en fin de ligne. */
.nb { white-space: nowrap; }
/* Dans un titre, ce mot garde la couleur et la ligne du texte qui l'entoure. */
h1 span.nb, h2 span.nb, h3 span.nb { display: inline; color: inherit; }
/* Numéro d'agrément : il rétrécit sur un petit écran plutôt que de se couper au milieu. */
.bref dd.bref__code { font-size: clamp(.8rem, 3.9vw, 1rem); overflow-wrap: normal; }

@media (max-width: 900px) {
  /* Sommaire des tarifs et des questions : le bord droit s'estompe pour annoncer la suite,
     et le script ramène la rubrique en cours au milieu. */
  .sommaire ul { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
  .sommaire li:last-child a { padding-right: 2.5rem; }
}
@media (max-width: 720px) {
  /* Notes : « 2021 » tient dans sa colonne, sans toucher le texte voisin. */
  .chiffres--trois div { grid-template-columns: 7.4rem 1fr; }
  /* Petits textes relevés, liens plus faciles à toucher. */
  .photo-illustration figcaption, .hero-confiance__photo figcaption, .galerie-agence figcaption { font-size: .75rem; }
  .agenda__jours .j { font-size: .8125rem; }
  .champ small { font-size: .875rem; }
  .message-pret textarea { font-size: 1rem; }
  .prix-unite__lien { padding-block: .7rem; }
}
/* ---------- Réservation : le calendrier de l'agence, affiché dans le site ---------- */
/* Une étape à la fois : le créneau (jours, puis heures), les coordonnées, la confirmation. */
.resa [hidden] { display: none; }
.resa__etape { max-width: 46rem; }
.resa__etape > h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
.resa h2:focus, .resa h3:focus, .resa__fin:focus { outline: 0; }
.resa__num {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-right: .6rem; border-radius: 8px;
  background: var(--violet); color: #fff; font-stretch: 110%; font-size: 1.125rem; vertical-align: .12em;
}
.resa__resume { margin-top: .6rem; font-weight: 600; }
.resa__etat { margin-top: 1.25rem; padding: .9rem 1.1rem; border: 2px dashed var(--trait); border-radius: 12px; background: #fff; line-height: 1.5; }
.resa__jours { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .5rem; margin-top: 1.25rem; }
.resa__jour {
  display: grid; justify-items: center; gap: .1rem; padding: .55rem .25rem .6rem; border: 2px solid var(--encre); border-radius: 12px;
  background: #fff; color: var(--encre); font: inherit; cursor: pointer;
}
.resa__jour span { font-stretch: 80%; font-weight: 700; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-doux); }
.resa__jour b { font-weight: 800; font-stretch: 116%; font-size: 1.5rem; line-height: 1.05; }
.resa__jour:hover { background: var(--lilas-2); }
.resa__jour[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }
.resa__jour[aria-pressed="true"] span { color: #fff; }
.resa__plus { margin-top: 1rem; }
.resa__sous { margin-top: 1.75rem; font-weight: 800; font-stretch: 108%; font-size: 1.25rem; }
.resa__heures { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: .5rem; margin-top: .9rem; }
.resa__heure { min-height: 48px; border: 2px solid var(--encre); border-radius: 10px; background: #fff; color: var(--encre); font: inherit; font-weight: 700; cursor: pointer; }
.resa__heure:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.resa__jour:focus-visible, .resa__heure:focus-visible, .resa__modifier:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.resa__choisi { padding: 1rem 1.15rem; border: 2px solid var(--encre); border-radius: 14px; background: #fff; font-weight: 600; line-height: 1.5; }
.resa__modifier { display: inline-block; padding: .35rem 0; border: 0; background: none; color: var(--violet); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.resa__champs { display: grid; gap: 1.1rem; }
.resa__case { display: flex; align-items: flex-start; gap: .7rem; font-weight: 600; line-height: 1.45; cursor: pointer; }
.resa__case input { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .1rem; accent-color: var(--violet); }
.resa__fin h2, .resa__secours h2 { margin-top: .6rem; }
.resa__services { margin-bottom: 0; }
.resa__autre { font-size: .9375rem; line-height: 1.5; }
.resa__autre a { font-weight: 700; }

/* Accueil plus courte sur téléphone. Rien de visuel n'est retiré : la voiture avance avec moins de défilement,
   et deux blocs laissent de côté ce qui est repris ailleurs (pied de page, barre d'appel, page de l'agence). */
.agence__suite { display: none; }
@media (max-width: 720px) {
  .trajet { --trajet-pas: 40vh; }
  .accueil #suivi .liste-ronds { display: none; }
  .accueil #agence .fiche div:nth-child(2), .accueil #agence .fiche div:nth-child(4), .accueil #agence .fiche div:nth-child(5) { display: none; }
  .accueil .agence__suite { display: block; margin-top: .9rem; }
}
/* Très petits téléphones (320 px de large) : le choix de la boîte et les lignes de prix tiennent dans l'écran. */
@media (max-width: 350px) {
  .bascule__choix button { padding: 0 .7rem; }
  .lignes a { gap: .75rem; }
  .lignes strong { font-size: 1rem; }
  .lignes b { font-size: 1.125rem; }
}