/* ESY : feuille de style commune
   Couleurs de la charte : bleu 660C, turquoise 319C, orange 6019C,
   indigo 2372C, vert 3500C. Titres Plus Jakarta Sans (sans-serif, choix client), corps Source Sans 3.
   Aucune bordure sur les blocs : les surfaces se distinguent par la
   teinte de fond et une ombre douce. */

:root {
  --bleu: #3d7dc9;
  --turquoise: #1acad4;
  --orange: #f36c09;
  --indigo: #261f77;
  --vert: #006c34;
  --noir: #231f20;
  --texte: #2b2a33;
  --texte-doux: #5c5b66;
  --blanc: #ffffff;
  --teinte-bleu: #eef4fb;
  --teinte-bleu-2: #dce9f7;
  --teinte-turquoise: #e6f9fa;
  --teinte-orange: #fff1e6;
  --teinte-indigo: #f0eff9;
  --fond: #fbfbfd;
  --ombre: 0 18px 40px rgba(38, 31, 119, 0.10);
  --ombre-douce: 0 8px 24px rgba(38, 31, 119, 0.07);
  --rayon: 22px;
  --rayon-petit: 14px;
  --conteneur: 1200px;
  --titre: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --corps: "Source Sans 3", "Source Sans Pro", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--corps);
  font-size: 18px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--indigo); }

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 800;
  color: var(--noir);
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(34px, 4.4vw, 56px); }
h2 { font-size: clamp(27px, 3vw, 40px); }
h3 { font-size: clamp(20px, 1.9vw, 24px); font-weight: 700; letter-spacing: -0.015em; }
h4 { font-size: 18px; font-weight: 700; }

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

.souligne { color: var(--bleu); }
.souligne-turquoise { color: var(--turquoise); }
.souligne-orange { color: var(--orange); }

.conteneur {
  width: min(var(--conteneur), calc(100% - 40px));
  margin: 0 auto;
}

.section { padding: 96px 0; }
.section-serree { padding: 64px 0; }
.fond-bleu { background: var(--teinte-bleu); }
.fond-turquoise { background: var(--teinte-turquoise); }
.fond-indigo { background: var(--indigo); color: #e8e6f6; }
.fond-indigo h2, .fond-indigo h3 { color: var(--blanc); }
.fond-gris { background: var(--fond); }

.surtitre {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 14px;
}
.fond-indigo .surtitre { color: var(--turquoise); }

.entete-section {
  max-width: 720px;
  margin-bottom: 48px;
}
.entete-section.centre {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.entete-section p {
  font-size: 20px;
  color: var(--texte-doux);
}
.fond-indigo .entete-section p { color: #cfcbe9; }

/* Barre haute : promesse et téléphone */
.barre-haute {
  background: var(--indigo);
  color: #e8e6f6;
  font-size: 15px;
}
.barre-haute .conteneur {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 40px;
}
.barre-haute a { color: var(--blanc); font-weight: 600; }
.barre-haute a:hover { color: var(--turquoise); }

/* Navigation flottante */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(38, 31, 119, 0.08);
}
.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
}
.logo img { height: 56px; width: auto; }
.menu {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  color: var(--noir);
  font-weight: 600;
  font-size: 17px;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--bleu); }
.entete .actions { display: flex; gap: 12px; align-items: center; }
.menu-mobile { display: none; }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 30px;
  border-radius: 999px;
  border: 0;
  font-family: var(--corps);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn-principal {
  background: var(--orange);
  color: var(--blanc);
  box-shadow: 0 10px 24px rgba(243, 108, 9, 0.32);
}
.btn-principal:hover {
  background: #de6005;
  color: var(--blanc);
  transform: translateY(-2px);
}
.btn-secondaire {
  background: var(--teinte-indigo);
  color: var(--indigo);
}
.btn-secondaire:hover { background: #e3e1f3; color: var(--indigo); }
.btn-clair {
  background: var(--blanc);
  color: var(--indigo);
}
.btn-clair:hover { background: var(--teinte-turquoise); color: var(--indigo); }
.btn-petit { padding: 12px 22px; font-size: 15px; }
.reassurance {
  font-size: 15px;
  color: var(--texte-doux);
  margin-top: 12px;
}
.fond-indigo .reassurance { color: #cfcbe9; }
.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Héros */
.heros {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  background:
    radial-gradient(900px 520px at 88% 10%, rgba(26, 202, 212, 0.18), transparent 60%),
    radial-gradient(700px 480px at 6% 90%, rgba(61, 125, 201, 0.14), transparent 60%),
    var(--blanc);
}
.heros .conteneur {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.heros h1 { margin-bottom: 20px; }
.heros .accroche {
  font-size: 21px;
  color: var(--texte-doux);
  max-width: 560px;
  margin-bottom: 30px;
}
.badge-avis {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--blanc);
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
  box-shadow: var(--ombre-douce);
  font-size: 15px;
  font-weight: 600;
  color: var(--noir);
  margin-bottom: 26px;
}
.badge-avis .etoiles { color: var(--orange); letter-spacing: 1px; font-size: 16px; }
.badge-avis .note { color: var(--indigo); }

.visuel-heros {
  position: relative;
  min-height: 460px;
}
.carte-flottante {
  position: absolute;
  background: var(--blanc);
  border-radius: var(--rayon-petit);
  box-shadow: var(--ombre);
  padding: 18px 22px;
  min-width: 220px;
}
.carte-flottante .etiquette {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texte-doux);
  font-weight: 700;
  margin-bottom: 4px;
}
.carte-flottante .valeur {
  font-family: var(--titre);
  font-size: 26px;
  font-weight: 700;
  color: var(--indigo);
  line-height: 1;
}
.carte-flottante .detail { font-size: 15px; color: var(--texte-doux); margin-top: 6px; }

/* Pastilles de la charte : formes obliques arrondies */
.pastille {
  position: absolute;
  border-radius: 999px;
  transform: rotate(-32deg);
}
.pastille-bleue { background: var(--bleu); }
.pastille-turquoise { background: var(--turquoise); }
.pastille-orange { background: var(--orange); }
.pastille-indigo { background: var(--indigo); }
.pastille-verte { background: var(--vert); }

.composition {
  position: absolute;
  inset: 0;
}
.composition .pastille-1 { width: 150px; height: 360px; left: 44%; top: 4%; background: var(--turquoise); transform: rotate(-32deg); }
.composition .pastille-2 { width: 130px; height: 300px; left: 16%; top: 30%; background: var(--bleu); transform: rotate(-32deg); }
.composition .pastille-3 { width: 90px; height: 200px; left: 68%; top: 52%; background: var(--orange); transform: rotate(-32deg); }
.composition .pastille-4 { width: 44px; height: 110px; left: 8%; top: 8%; background: var(--indigo); transform: rotate(-32deg); }
.composition .pastille-5 { width: 36px; height: 90px; left: 86%; top: 12%; background: var(--vert); transform: rotate(-32deg); }

.motif {
  background-color: var(--turquoise);
  background-image:
    linear-gradient(-32deg, transparent 0 46%, var(--bleu) 46% 54%, transparent 54%);
  background-size: 54px 54px;
}

/* Bandeau de chiffres */
.chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 44px;
}
/* Les chiffres se lisent a nu : ni fond, ni cadre, seul l'ecart les separe. */
.chiffre {
  background: none;
  padding: 0;
  box-shadow: none;
}
.chiffre .valeur {
  font-family: var(--titre);
  font-size: clamp(30px, 2.5vw, 40px);
  font-weight: 700;
  color: var(--indigo);
  line-height: 1;
  margin-bottom: 8px;
}
.chiffre .valeur.a-confirmer { font-size: 20px; color: var(--bleu); font-family: var(--corps); line-height: 1.3; }
.chiffre .libelle { color: var(--texte-doux); font-size: 16px; }

/* Ligne de fournisseurs ou de villes */
.ruban {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.puce {
  background: var(--blanc);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 15px;
  color: var(--indigo);
  box-shadow: var(--ombre-douce);
}
.fond-indigo .puce { background: rgba(255, 255, 255, 0.10); color: var(--blanc); box-shadow: none; }

/* Grilles de cartes */
.grille {
  display: grid;
  gap: 24px;
}
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }

.carte {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 32px 30px;
  box-shadow: var(--ombre-douce);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.carte h3 { margin: 0; }
.carte p { color: var(--texte-doux); font-size: 17px; }
.carte .lien {
  margin-top: auto;
  font-weight: 700;
  color: var(--bleu);
}
.carte-teintee { background: var(--teinte-bleu); box-shadow: none; }
.carte-teintee-turquoise { background: var(--teinte-turquoise); box-shadow: none; }
.carte-teintee-orange { background: var(--teinte-orange); box-shadow: none; }
.carte-teintee-indigo { background: var(--teinte-indigo); box-shadow: none; }

.icone {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--teinte-turquoise);
  color: var(--bleu);
  margin-bottom: 6px;
}
.icone svg { width: 26px; height: 26px; }
.icone-bleu { background: var(--teinte-bleu); color: var(--bleu); }
.icone-orange { background: var(--teinte-orange); color: var(--orange); }
.icone-indigo { background: var(--teinte-indigo); color: var(--indigo); }
.icone-vert { background: #e4f3ea; color: var(--vert); }

/* Blocs numérotés */
.numero {
  font-family: var(--titre);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--turquoise);
}
.etapes { counter-reset: etape; }
.etape {
  position: relative;
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 34px 30px 30px;
  box-shadow: var(--ombre-douce);
}
.etape .numero { margin-bottom: 14px; }
.etape h3 { font-size: 22px; }
.etape p { color: var(--texte-doux); font-size: 17px; }

/* Bloc image + texte */
.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.panneau {
  position: relative;
  border-radius: var(--rayon);
  min-height: 420px;
  overflow: hidden;
}
.panneau-bleu { background: linear-gradient(160deg, var(--bleu), var(--indigo)); }
.panneau-turquoise { background: linear-gradient(160deg, var(--turquoise), var(--bleu)); }
.panneau .pastille { opacity: 0.9; }
.panneau .encart {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--rayon-petit);
  padding: 22px 24px;
  box-shadow: var(--ombre);
}
.panneau .encart strong { color: var(--indigo); font-family: var(--titre); font-size: 19px; display: block; margin-bottom: 4px; }
.panneau .encart span { color: var(--texte-doux); font-size: 16px; }

.liste-coche {
  list-style: none;
  padding: 0;
  margin: 22px 0;
  display: grid;
  gap: 12px;
}
.liste-coche li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 18px;
}
.liste-coche li::before {
  content: "";
  flex: 0 0 22px;
  height: 22px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--turquoise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Offres */
.offre {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 36px 32px;
  box-shadow: var(--ombre-douce);
  display: flex;
  flex-direction: column;
}
.offre.recommandee {
  background: var(--indigo);
  color: #e8e6f6;
  box-shadow: var(--ombre);
}
.offre.recommandee h3 { color: var(--blanc); }
.offre .pour { font-size: 15px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--bleu); margin-bottom: 8px; }
.offre.recommandee .pour { color: var(--turquoise); }
.offre p { color: var(--texte-doux); }
.offre.recommandee p { color: #cfcbe9; }
.offre ul { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 10px; }
.offre li { padding-left: 28px; position: relative; font-size: 17px; }
.offre li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--turquoise);
}
.offre.recommandee li::before { background: var(--orange); }
.offre .btn { margin-top: auto; }
.etiquette-reco {
  display: inline-block;
  background: var(--orange);
  color: var(--blanc);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  align-self: flex-start;
}
.inclus {
  margin-top: 28px;
  background: var(--teinte-turquoise);
  border-radius: var(--rayon);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
}
.inclus strong { font-family: var(--titre); font-size: 19px; color: var(--indigo); }
.inclus ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--texte); font-size: 17px; }
.inclus li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); margin-right: 10px; vertical-align: middle; }

/* Témoignages */
.temoignage {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 34px 32px;
  box-shadow: var(--ombre-douce);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.temoignage .etoiles { color: var(--orange); font-size: 18px; letter-spacing: 2px; }
.temoignage blockquote {
  margin: 0;
  font-family: var(--corps);
  font-size: 19px;
  line-height: 1.4;
  color: var(--noir);
}
.temoignage .auteur { margin-top: auto; display: flex; gap: 14px; align-items: center; }
.temoignage .avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--bleu), var(--turquoise));
  flex: 0 0 46px;
}
.temoignage .auteur strong { display: block; color: var(--indigo); }
.temoignage .auteur span { font-size: 15px; color: var(--texte-doux); }

/* FAQ */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.faq details {
  background: var(--blanc);
  border-radius: var(--rayon-petit);
  box-shadow: var(--ombre-douce);
  padding: 0 28px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--titre);
  font-size: 18px;
  font-weight: 700;
  color: var(--noir);
  padding: 22px 44px 22px 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teinte-bleu);
  color: var(--bleu);
  display: grid;
  place-items: center;
  font-family: var(--corps);
  font-size: 22px;
  font-weight: 600;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 24px; color: var(--texte); font-size: 17px; max-width: 760px; }

/* Bloc final et formulaire */
.final {
  background: linear-gradient(135deg, var(--indigo) 0%, #1f3f8f 55%, var(--bleu) 100%);
  color: #e8e6f6;
  position: relative;
  overflow: hidden;
}
.final h2 { color: var(--blanc); }
.final .conteneur {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.final .texte p { font-size: 20px; color: #d8d5f0; }
.final .contact-direct { margin-top: 26px; font-size: 18px; }
.final .contact-direct a { color: var(--blanc); font-weight: 700; }
.final .contact-direct a:hover { color: var(--turquoise); }
.final .contact-direct span { display: block; color: #cfcbe9; font-size: 16px; }
.final .pastille { opacity: 0.35; }

.formulaire {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 36px;
  box-shadow: var(--ombre);
  color: var(--texte);
}
.formulaire h3 { margin-bottom: 6px; }
.formulaire .note { color: var(--texte-doux); font-size: 15px; margin-bottom: 20px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-size: 14px; font-weight: 700; color: var(--indigo); letter-spacing: 0.02em; }
.champ input, .champ select, .champ textarea {
  border: 0;
  border-radius: 12px;
  background: var(--teinte-bleu);
  padding: 14px 16px;
  font-family: var(--corps);
  font-size: 16px;
  color: var(--texte);
  outline: none;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  background: var(--teinte-bleu-2);
  box-shadow: 0 0 0 3px rgba(61, 125, 201, 0.25);
}
.champ textarea { min-height: 96px; resize: vertical; }
.formulaire .btn { width: 100%; margin-top: 18px; }
.formulaire .confidentialite { font-size: 14px; color: var(--texte-doux); margin-top: 12px; text-align: center; }

/* Pied de page */
.pied {
  background: var(--noir);
  color: #d5d4d8;
  padding: 72px 0 32px;
  font-size: 16px;
}
.pied .colonnes {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.pied h4 { color: var(--blanc); font-family: var(--corps); font-size: 15px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pied a { color: #d5d4d8; }
.pied a:hover { color: var(--turquoise); }
.pied .logo-pied img { height: 54px; width: auto; margin-bottom: 18px; background: var(--blanc); border-radius: 12px; padding: 6px 10px; }
.pied .bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  font-size: 14px;
  color: #9d9ca6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Fil d'Ariane */
.ariane {
  font-size: 15px;
  color: var(--texte-doux);
  margin-bottom: 22px;
}
.ariane a { color: var(--texte-doux); }
.ariane a:hover { color: var(--bleu); }
.ariane span { margin: 0 8px; color: #b9b8c4; }

/* Hub villes */
.villes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ville {
  position: relative;
  display: block;
  border-radius: var(--rayon);
  padding: 28px 26px 26px;
  min-height: 170px;
  background: var(--blanc);
  box-shadow: var(--ombre-douce);
  color: var(--noir);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ville:hover { transform: translateY(-4px); box-shadow: var(--ombre); color: var(--noir); }
.ville .region { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bleu); font-weight: 700; }
.ville h3 { font-size: 22px; margin: 6px 0 8px; }
.ville p { font-size: 15px; color: var(--texte-doux); margin: 0; }
.ville .fleche { position: absolute; right: 22px; bottom: 22px; width: 36px; height: 36px; border-radius: 50%; background: var(--teinte-bleu); color: var(--bleu); display: grid; place-items: center; font-weight: 700; }
.ville.active { background: var(--indigo); color: var(--blanc); }
.ville.active h3 { color: var(--blanc); }
.ville.active .region { color: var(--turquoise); }
.ville.active p { color: #cfcbe9; }
.ville.active .fleche { background: var(--orange); color: var(--blanc); }
.ville.active:hover { color: var(--blanc); }
.ville .pastille { opacity: 0.16; right: -30px; top: -40px; width: 60px; height: 150px; }
.ville.active .pastille { opacity: 0.35; }

/* Encart local */
.encart-local {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 30px 32px;
  box-shadow: var(--ombre-douce);
  display: grid;
  gap: 8px;
}
.encart-local strong { font-family: var(--titre); font-size: 20px; color: var(--indigo); }
.encart-local a { font-weight: 700; }

/* Tableau comparatif */
.tableau {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
  font-size: 17px;
}
.tableau th, .tableau td { padding: 18px 24px; text-align: left; vertical-align: top; }
.tableau th { background: var(--indigo); color: var(--blanc); font-family: var(--titre); font-size: 17px; font-weight: 700; }
.tableau tr:nth-child(even) td { background: var(--teinte-bleu); }
.tableau td:first-child { color: var(--texte-doux); }
.tableau td:last-child { font-weight: 600; color: var(--noir); }

/* Utilitaires */
.centre { text-align: center; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.texte-doux { color: var(--texte-doux); }
.a-confirmer { color: var(--bleu); font-style: italic; }

/* Réactif */
@media (max-width: 1024px) {
  .grille-4, .villes, .chiffres { grid-template-columns: repeat(2, 1fr); }
  .grille-3 { grid-template-columns: repeat(2, 1fr); }
  .heros .conteneur { grid-template-columns: 1fr; }
  .visuel-heros { min-height: 380px; }
  .deux-colonnes { grid-template-columns: 1fr; gap: 40px; }
  .final .conteneur { grid-template-columns: 1fr; }
  .pied .colonnes { grid-template-columns: 1fr 1fr; }
  .menu { display: none; }
  .menu-mobile { display: inline-flex; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .section { padding: 64px 0; }
  .grille-2, .grille-3, .grille-4, .villes, .chiffres { grid-template-columns: 1fr; }
  .champs { grid-template-columns: 1fr; }
  .pied .colonnes { grid-template-columns: 1fr; }
  .barre-haute .promesse { display: none; }
  .entete .actions .btn { display: none; }
  .heros { padding: 56px 0 48px; }
  .visuel-heros { min-height: 320px; }
  .carte-flottante { min-width: 180px; padding: 14px 16px; }
  .carte-flottante .valeur { font-size: 24px; }
  .inclus { grid-template-columns: 1fr; }
  .tableau th, .tableau td { padding: 14px 16px; font-size: 15px; }
}
/* ==========================================================
   Signature ESY, version 3
   Fil conducteur : la pastille oblique de la charte (-32deg)
   sert de marqueur, d'icône, de pente de section et de motif.
   Un seul mouvement orchestré au chargement du héros, des
   révélations discrètes au défilement, rien d'autre.
   ========================================================== */
:root {
  --oblique: -32deg;
  --pente: 3.2vw;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --ressort: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Titres plus tendus, corps plus léger : le contraste fait la voix */
h1 { font-size: clamp(38px, 5vw, 66px); line-height: 1.02; letter-spacing: -0.035em; }
h2 { line-height: 1.06; letter-spacing: -0.03em; }
.heros .accroche, .entete-section p, .final .texte p { font-weight: 300; font-size: 22px; line-height: 1.5; }
.heros .accroche strong, .entete-section p strong { font-weight: 600; color: var(--noir); }

/* Le mot clé du titre est surligné, pas simplement coloré */
.souligne, .souligne-turquoise, .souligne-orange {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.souligne { color: var(--indigo); background-image: linear-gradient(transparent 64%, rgba(26, 202, 212, 0.38) 64%, rgba(26, 202, 212, 0.38) 92%, transparent 92%); }
.souligne-turquoise { color: var(--indigo); background-image: linear-gradient(transparent 64%, rgba(243, 108, 9, 0.30) 64%, rgba(243, 108, 9, 0.30) 92%, transparent 92%); }
.souligne-orange { color: var(--indigo); background-image: linear-gradient(transparent 64%, rgba(243, 108, 9, 0.30) 64%, rgba(243, 108, 9, 0.30) 92%, transparent 92%); }
.final .souligne, .fond-indigo .souligne, .offre.recommandee .souligne { color: var(--blanc); }
/* Sur fond bleu fonce, le texte surligne passe en blanc et la bande devient turquoise */
.final .souligne-turquoise,
.fond-indigo .souligne-turquoise,
.offre.recommandee .souligne-turquoise {
  color: var(--blanc);
  background-image: linear-gradient(transparent 64%, rgba(26, 202, 212, 0.55) 64%, rgba(26, 202, 212, 0.55) 92%, transparent 92%);
}
.final .souligne-orange,
.fond-indigo .souligne-orange,
.offre.recommandee .souligne-orange {
  color: var(--blanc);
  background-image: linear-gradient(transparent 64%, rgba(243, 108, 9, 0.55) 64%, rgba(243, 108, 9, 0.55) 92%, transparent 92%);
}

/* Surtitres : plus de capitales espacées, une pastille oblique et une phrase */
.surtitre, .offre .pour, .carte-flottante .etiquette, .ville .region, .pied h4, .etiquette-reco {
  text-transform: none;
  letter-spacing: 0;
}
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titre);
  font-size: 16px;
  font-weight: 700;
  color: var(--indigo);
}
.surtitre::before {
  content: "";
  width: 8px;
  height: 22px;
  border-radius: 999px;
  background: var(--orange);
  transform: rotate(var(--oblique));
  flex: 0 0 8px;
}
.fond-indigo .surtitre, .final .surtitre { color: var(--blanc); }
.fond-indigo .surtitre::before, .final .surtitre::before { background: var(--turquoise); }
.offre .pour { font-size: 16px; font-weight: 600; }
.carte-flottante .etiquette { font-size: 14px; font-weight: 600; }
.ville .region { font-size: 15px; font-weight: 600; }
.pied h4 { font-family: var(--titre); font-size: 17px; }
.etiquette-reco { font-size: 14px; }

/* Grain léger sur les grands aplats, pour casser le rendu trop lisse */
.heros::after, .final::after, .fond-indigo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
.fond-indigo { position: relative; }
.fond-indigo > .conteneur, .final > .conteneur { position: relative; z-index: 1; }

/* Sections teintées : une pente, comme les pastilles, au lieu de bandes horizontales */
.fond-bleu.section, .fond-gris.section, .fond-indigo.section {
  clip-path: polygon(0 0, 100% var(--pente), 100% 100%, 0 calc(100% - var(--pente)));
  padding-top: calc(96px + var(--pente));
  padding-bottom: calc(96px + var(--pente));
  margin-top: calc(-1 * var(--pente));
}
.final.section {
  clip-path: polygon(0 var(--pente), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(96px + var(--pente));
  margin-top: calc(-1 * var(--pente));
}
.section-serree.fond-bleu {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--pente)));
  padding-bottom: calc(64px + var(--pente));
}

/* Boutons : un ressort plutôt qu'un simple décalage, et un vrai focus clavier */
.btn { transition: transform 0.35s var(--ressort), box-shadow 0.25s ease, background 0.2s ease; }
.btn:hover { transform: translateY(-3px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; }
.btn-principal:hover { box-shadow: 0 16px 32px rgba(243, 108, 9, 0.38); }
.btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--turquoise);
  outline-offset: 3px;
}

/* Icônes : la pastille oblique remplace le carré arrondi */
.icone {
  width: 42px;
  height: 66px;
  border-radius: 999px;
  transform: rotate(var(--oblique));
  margin: 4px 0 14px 8px;
  background: var(--bleu);
  color: var(--blanc);
  transition: transform 0.5s var(--ressort);
}
.icone svg { transform: rotate(calc(-1 * var(--oblique))); width: 24px; height: 24px; }
.icone-bleu { background: var(--bleu); color: var(--blanc); }
.icone-orange { background: var(--orange); color: var(--blanc); }
.icone-indigo { background: var(--indigo); color: var(--blanc); }
.icone-vert { background: var(--vert); color: var(--blanc); }
.carte:hover .icone { transform: rotate(-20deg) translateY(-3px); }

/* Cartes : moins d'ombres identiques, une pastille qui grandit au survol */
.carte { position: relative; overflow: hidden; transition: transform 0.45s var(--sortie), box-shadow 0.45s var(--sortie), background 0.3s ease; }
.carte::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 190px;
  right: -46px;
  bottom: -110px;
  border-radius: 999px;
  background: var(--turquoise);
  opacity: 0;
  transform: rotate(var(--oblique)) translateY(30px);
  transition: opacity 0.45s var(--sortie), transform 0.6s var(--sortie);
  pointer-events: none;
}
.carte:hover::after { opacity: 0.18; transform: rotate(var(--oblique)) translateY(0); }
.carte-teintee-orange::after { background: var(--orange); }
.carte-teintee-indigo::after { background: var(--indigo); }
.carte > * { position: relative; z-index: 1; }

/* Blocs "ce que l'on observe" : pas de numérotation pour du non séquentiel */
.deux-colonnes .numero {
  font-size: 0;
  width: 12px;
  height: 40px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--orange);
  transform: rotate(var(--oblique));
  flex: 0 0 12px;
}

/* Étapes : une vraie séquence, avec un fil et un rythme décalé */
.etapes { position: relative; align-items: start; }
.etapes::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 56px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--turquoise), var(--bleu), var(--indigo));
  opacity: 0.35;
}
.etape { box-shadow: none; background: var(--teinte-bleu); padding-top: 30px; }
.etape:nth-child(even) { margin-top: 36px; background: var(--blanc); box-shadow: var(--ombre-douce); }
.etape .numero {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--blanc);
  background: var(--indigo);
  box-shadow: 0 0 0 8px var(--blanc);
  transition: transform 0.5s var(--ressort), background 0.3s ease;
}
.etape:hover .numero { background: var(--orange); transform: rotate(var(--oblique)) scale(1.08); }

/* Offres : la recommandée sort du rang */
.offre { transition: transform 0.45s var(--sortie), box-shadow 0.45s var(--sortie); }
.offre:hover { transform: translateY(-6px); box-shadow: var(--ombre); }
.offre.recommandee { transform: scale(1.035); position: relative; overflow: hidden; }
.offre.recommandee:hover { transform: scale(1.035) translateY(-6px); }
.offre.recommandee::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 320px;
  right: -60px;
  top: -140px;
  border-radius: 999px;
  background: var(--bleu);
  opacity: 0.35;
  transform: rotate(var(--oblique));
}
.offre.recommandee > * { position: relative; }

/* Témoignages : un guillemet dessiné, un avatar oblique */
.temoignage { position: relative; box-shadow: none; background: var(--teinte-bleu); }
.temoignage:nth-child(2) { background: var(--blanc); box-shadow: var(--ombre-douce); }
.temoignage::before {
  content: "\201C";
  position: absolute;
  right: 26px;
  top: 6px;
  font-family: var(--titre);
  font-size: 110px;
  font-weight: 800;
  line-height: 1;
  color: var(--turquoise);
  opacity: 0.35;
}
.temoignage .avatar { border-radius: 999px; width: 30px; height: 48px; flex-basis: 30px; transform: rotate(var(--oblique)); margin-right: 6px; }

/* FAQ : le plus tourne, il ne change pas de caractère */
.faq details { transition: background 0.3s ease; }
.faq details[open] { background: var(--teinte-bleu); box-shadow: none; }
.faq summary::after { content: "+"; transition: transform 0.4s var(--ressort), background 0.3s ease; }
.faq details[open] summary::after { content: "+"; transform: translateY(-50%) rotate(45deg); background: var(--orange); color: var(--blanc); }
.faq details p { animation: faq-ouvre 0.45s var(--sortie); }
@keyframes faq-ouvre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Villes : la flèche disparaît, la pastille prend le relais */
.ville .fleche { display: none; }
.ville { box-shadow: none; background: var(--teinte-bleu); transition: transform 0.45s var(--sortie), background 0.3s ease, box-shadow 0.45s var(--sortie); }
.ville:nth-child(3n) { background: var(--blanc); box-shadow: var(--ombre-douce); }
.ville h3 { font-size: 26px; transition: color 0.3s ease; }
.ville .pastille { transition: transform 0.6s var(--sortie), opacity 0.4s ease; }
.ville:hover { background: var(--blanc); box-shadow: var(--ombre); }
.ville:hover h3 { color: var(--bleu); }
.ville:hover .pastille { transform: rotate(var(--oblique)) translate(-18px, 26px); opacity: 0.4; }
.ville.active, .ville.active:hover { background: var(--indigo); }
.ville.active:hover h3 { color: var(--turquoise); }

/* Ruban qui défile en continu */
.ruban-defile {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow: hidden;
  gap: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ruban-defile .piste {
  display: flex;
  gap: 12px;
  padding-right: 12px;
  flex: 0 0 auto;
  animation: defile 28s linear infinite;
}
.ruban-defile:hover .piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-100%); } }

/* Héros : une seule séquence orchestrée au chargement */
.heros { padding-bottom: calc(72px + var(--pente)); }
.heros .badge-avis, .heros h1, .heros .accroche, .heros .groupe-boutons, .heros .reassurance, .heros .ariane {
  animation: monte 0.9s var(--sortie) both;
}
.heros .ariane { animation-delay: 0s; }
.heros .badge-avis { animation-delay: 0.05s; }
.heros h1 { animation-delay: 0.15s; }
.heros .accroche { animation-delay: 0.28s; }
.heros .groupe-boutons { animation-delay: 0.4s; }
.heros .reassurance { animation-delay: 0.5s; }
.composition .pastille { animation: monte 1.1s var(--sortie) both, flotte 9s ease-in-out 1.2s infinite alternate; }
.composition .pastille-1 { animation-delay: 0.1s, 1.2s; }
.composition .pastille-2 { animation-delay: 0.2s, 1.8s; }
.composition .pastille-3 { animation-delay: 0.3s, 2.4s; }
.composition .pastille-4 { animation-delay: 0.35s, 1.5s; }
.composition .pastille-5 { animation-delay: 0.4s, 2.1s; }
.carte-flottante { animation: monte 0.9s var(--sortie) both; }
.visuel-heros .carte-flottante:nth-of-type(1) { animation-delay: 0.55s; }
.visuel-heros .carte-flottante:nth-of-type(2) { animation-delay: 0.7s; }
.visuel-heros .carte-flottante:nth-of-type(3) { animation-delay: 0.85s; }
@keyframes monte {
  from { opacity: 0; translate: 0 26px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes flotte {
  from { translate: 0 0; }
  to { translate: 0 -14px; }
}
.panneau .pastille { animation: flotte 8s ease-in-out infinite alternate; }
.panneau .pastille:nth-child(2) { animation-delay: 1.4s; }
.panneau .pastille:nth-child(3) { animation-delay: 2.6s; }

/* Révélation au défilement, pilotée par site.js */
.reveler { opacity: 0; translate: 0 24px; transition: opacity 0.8s var(--sortie), translate 0.8s var(--sortie); transition-delay: calc(var(--i, 0) * 90ms); }
.reveler.visible { opacity: 1; translate: 0 0; }

/* En-tête compacte après défilement */
.entete .conteneur, .logo img { transition: min-height 0.3s ease, height 0.3s ease; }
.entete.compacte .conteneur { min-height: 66px; }
.entete.compacte .logo img { height: 44px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveler { opacity: 1; translate: 0 0; }
}
@media (max-width: 1024px) {
  .etapes::before { display: none; }
  .etape:nth-child(even) { margin-top: 0; }
  .offre.recommandee, .offre.recommandee:hover { transform: none; }
}
@media (max-width: 640px) {
  :root { --pente: 5vw; }
  .fond-bleu.section, .fond-gris.section, .fond-indigo.section { padding-top: calc(64px + var(--pente)); padding-bottom: calc(64px + var(--pente)); }
  .final.section { padding-top: calc(64px + var(--pente)); }
}

/* ==========================================================
   Version 4 : photos réelles, preuves et rémunération
   Les photos sont libres de droits (Unsplash, Pexels).
   Elles prennent la place des compositions abstraites là où
   les leaders du marché montrent des personnes et des sites.
   ========================================================== */

/* Héros : la photo dans un cadre, les cartes par-dessus */
.visuel-heros .cadre {
  position: absolute;
  inset: 6% 8% 8% 12%;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(38, 31, 119, 0.45);
  animation: monte 1.1s var(--sortie) 0.2s both;
  background: var(--teinte-bleu);
}
.visuel-heros .cadre img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  animation: zoom-lent 14s ease-out both;
}
.visuel-heros .cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38, 31, 119, 0) 45%, rgba(38, 31, 119, 0.55) 100%);
}
.visuel-heros .composition { z-index: 0; }
.visuel-heros .carte-flottante { z-index: 2; }
.visuel-heros .composition .pastille-1 { left: -6%; top: 2%; }
.visuel-heros .composition .pastille-2 { right: -4%; bottom: 4%; }
@keyframes zoom-lent { from { transform: scale(1.08); } to { transform: scale(1.02); } }

/* Cartes avec photo (Pour qui) */
.carte.carte-photo { padding: 0; }
.carte-photo .photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--teinte-bleu);
}
.carte-photo .photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--sortie);
}
.carte-photo:hover .photo img { transform: scale(1.05); }
.carte-photo .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38, 31, 119, 0) 60%, rgba(38, 31, 119, 0.35) 100%);
}
.carte-photo .corps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 26px 28px;
  flex: 1;
}
.carte-photo .icone {
  margin-top: -30px;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 24px -10px rgba(38, 31, 119, 0.5);
}
.carte-photo::after { display: none; }

/* Panneau photo (bloc image + texte) */
.panneau-photo { background: var(--indigo); }
.panneau-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.panneau-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(200deg, rgba(38, 31, 119, 0.05) 30%, rgba(38, 31, 119, 0.55) 100%);
}
.panneau-photo .pastille { z-index: 1; opacity: 0.85; }
.panneau-photo .encart { z-index: 2; }
.panneau-photo .encart .grand {
  display: block;
  font-family: var(--titre);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--orange);
  margin-bottom: 8px;
}

/* Cinq étapes */
.grille-5 { grid-template-columns: repeat(5, 1fr); }
.grille-5.etapes .etape { padding: 30px 24px 26px; }
.grille-5.etapes .etape h3 { font-size: 20px; }
.grille-5.etapes .etape p { font-size: 16px; }

/* Prix affiché dans les offres */
.offre .prix {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 14px;
}
.offre .prix strong {
  font-family: var(--titre);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--indigo);
}
.offre .prix span { font-size: 15px; color: var(--texte-doux); }

/* Rémunération : grand chiffre et phrase clé */
.remuneration .phrase-cle {
  font-family: var(--titre);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--indigo);
  margin: 22px 0;
  padding-left: 22px;
  position: relative;
}
.remuneration .phrase-cle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: calc(100% - 12px);
  border-radius: 999px;
  background: var(--turquoise);
}

/* Preuves : avis et labels */
.preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.preuve {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--noir);
}
.preuve .etoiles { color: var(--orange); letter-spacing: 1px; }
.preuve .source { color: var(--texte-doux); font-weight: 400; }

/* Bandeau photo pleine largeur entre deux sections */
.bandeau-photo {
  position: relative;
  height: clamp(220px, 32vw, 420px);
  overflow: hidden;
  clip-path: polygon(0 0, 100% var(--pente), 100% 100%, 0 calc(100% - var(--pente)));
  margin-top: calc(-1 * var(--pente));
}
.bandeau-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bandeau-photo .legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--pente) + 28px);
}
.bandeau-photo .legende .conteneur { display: flex; justify-content: flex-end; }
.bandeau-photo .legende span {
  display: inline-block;
  background: rgba(255, 255, 255, 0.94);
  color: var(--indigo);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 18px;
  padding: 14px 22px;
  border-radius: var(--rayon-petit);
  box-shadow: var(--ombre);
  max-width: 520px;
}
.bandeau-photo + .section { margin-top: calc(-1 * var(--pente)); padding-top: calc(96px + var(--pente)); }

/* Encart local avec photo de la ville */
.encart-local .photo-locale {
  border-radius: var(--rayon-petit);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin: -6px 0 10px;
}
.encart-local .photo-locale img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
  .grille-5 { grid-template-columns: repeat(3, 1fr); }
  .visuel-heros .cadre { inset: 4% 6% 8% 6%; }
}
@media (max-width: 640px) {
  .grille-5 { grid-template-columns: 1fr; }
  .grille-5.etapes .etape:nth-child(even) { margin-top: 0; }
  .visuel-heros { min-height: 360px; }
  .visuel-heros .cadre { inset: 0 0 10% 0; }
  .panneau-photo .encart .grand { font-size: 36px; }
  .remuneration .phrase-cle { font-size: 22px; }
  .bandeau-photo .legende span { font-size: 16px; padding: 12px 16px; }
}

/* ==========================================================
   Version 5 : ajustements du heros et des offres
   ========================================================== */
.heros .conteneur > * { min-width: 0; }
.visuel-heros .cadre { inset: 4% 4% 6% 10%; }
.visuel-heros .carte-flottante { min-width: 0; max-width: 214px; padding: 14px 18px; }
.visuel-heros .carte-flottante .valeur { font-size: 24px; }
.visuel-heros .carte-flottante .detail { font-size: 14px; line-height: 1.35; margin-top: 4px; }
.visuel-heros .carte-flottante .etiquette { font-size: 12px; }
.visuel-heros .composition .pastille-1 { width: 120px; height: 300px; left: -14%; top: -8%; }
.visuel-heros .composition .pastille-2 { width: 100px; height: 240px; right: -8%; bottom: -2%; left: auto; top: auto; }
.offre.recommandee .prix strong { color: var(--blanc); }
.offre.recommandee .prix span { color: #cfcbe9; }
@media (max-width: 640px) {
  .visuel-heros .cadre { inset: 0 0 10% 0; }
  .visuel-heros .carte-flottante { max-width: 180px; padding: 12px 14px; }
}
.heros .conteneur > :first-child { position: relative; z-index: 3; }
.visuel-heros .composition .pastille-1 { left: -4%; top: -10%; }

/* ==========================================================
   Version 6 : mobile et tablette
   Navigation glissante, carrousels par accrochage, barre
   d'action permanente, echelle typographique fluide.
   ========================================================== */

:root {
  --ressort: cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* --- Rythme et respiration --- */
@media (max-width: 1024px) {
  .section { padding: clamp(56px, 9vw, 96px) 0; }
  .section-serree { padding: clamp(40px, 7vw, 64px) 0; }
  .conteneur { width: min(var(--conteneur), calc(100% - 36px)); }
  .entete-section { margin-bottom: 32px; }
  h1 { font-size: clamp(33px, 8.4vw, 52px); }
  h2 { font-size: clamp(25px, 5.6vw, 38px); }
  .heros .accroche,
  .entete-section p {
    font-size: clamp(17px, 2.6vw, 20px);
    line-height: 1.55;
  }
  .section p { max-width: 62ch; }
}

/* Les ancres ne passent plus sous l'en-tete collante */
:where(section, div)[id] { scroll-margin-top: 92px; }

/* --- Carrousels : une piste qui s'accroche --- */
@media (max-width: 1024px) {
  .glisse {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--carte-large, 52%);
    grid-template-columns: none;
    gap: 16px;
    width: auto;
    margin-inline: -18px;
    padding: 6px 18px 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
  }
  .glisse::-webkit-scrollbar { display: none; }
  .glisse.attrape { cursor: grabbing; scroll-snap-type: none; }
  .glisse.attrape * { pointer-events: none; }
  .glisse > * { scroll-snap-align: start; min-width: 0; height: auto; }
  .glisse > *:last-child { margin-right: 18px; }
}
@media (max-width: 767px) {
  .glisse { --carte-large: 82%; }
  .glisse.glisse-serree { --carte-large: 64%; }
}

/* Pastilles de progression */
.points {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
@media (max-width: 1024px) { .points { display: flex; } }
.points button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(38, 31, 119, 0.18);
  cursor: pointer;
  transition: width 0.3s var(--ressort), background 0.3s ease;
}
.points button.actif { width: 26px; background: var(--bleu); }
.fond-indigo .points button,
.final .points button { background: rgba(255, 255, 255, 0.28); }
.fond-indigo .points button.actif,
.final .points button.actif { background: var(--turquoise); }

/* --- En-tete : bouton menu et panneau glissant --- */
.bouton-menu {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--teinte-bleu);
  cursor: pointer;
  flex: 0 0 auto;
}
.bouton-menu span {
  position: absolute;
  left: 13px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--indigo);
  transition: transform 0.36s var(--ressort), opacity 0.2s ease, width 0.36s var(--ressort);
}
.bouton-menu span:nth-child(1) { top: 16px; }
.bouton-menu span:nth-child(2) { top: 22px; width: 14px; }
.bouton-menu span:nth-child(3) { top: 28px; }
.bouton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 20px; }
.bouton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1024px) { .bouton-menu { display: block; } }

.voile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(38, 31, 119, 0.42);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0.32s;
}
.voile-menu.ouvert { opacity: 1; visibility: visible; }

.panneau-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: min(380px, 88vw);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
  background: var(--blanc);
  box-shadow: -24px 0 60px rgba(38, 31, 119, 0.22);
  transform: translateX(104%);
  transition: transform 0.42s var(--ressort);
  overflow-y: auto;
}
.panneau-menu.ouvert { transform: none; }
.panneau-menu .tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.panneau-menu .tete img { height: 44px; width: auto; }
.panneau-menu .fermer {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: var(--teinte-bleu);
  color: var(--indigo);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.panneau-menu ul { list-style: none; margin: 0; padding: 0; }
.panneau-menu li {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 0.36s ease, transform 0.42s var(--ressort);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.panneau-menu.ouvert li { opacity: 1; transform: none; }
.panneau-menu li a {
  display: block;
  padding: 14px 4px;
  font-family: var(--titre);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--noir);
  box-shadow: inset 0 -1px 0 rgba(38, 31, 119, 0.08);
}
.panneau-menu li a[aria-current="page"] { color: var(--bleu); }
.panneau-menu .pied-panneau { margin-top: auto; padding-top: 20px; display: grid; gap: 10px; }
.panneau-menu .pied-panneau .btn { width: 100%; }
.panneau-menu .tel {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 19px;
  color: var(--indigo);
}
.panneau-menu .horaires { text-align: center; font-size: 15px; color: var(--texte-doux); }
body.menu-ouvert { overflow: hidden; }

/* --- Barre d'action permanente --- */
.barre-action {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  gap: 10px;
  align-items: center;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 -10px 30px rgba(38, 31, 119, 0.14);
  transform: translateY(120%);
  transition: transform 0.4s var(--ressort);
}
.barre-action.visible { transform: none; }
.barre-action .btn { flex: 1 1 auto; padding: 14px 16px; font-size: 16px; }
.barre-action .appel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--teinte-bleu);
  color: var(--indigo);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 16px;
}
@media (max-width: 1024px) {
  .barre-action { display: flex; }
  body { padding-bottom: 84px; }
  .entete .actions .btn { display: none; }
}

/* --- Heros : preuves en ligne glissante sous la photo --- */
.preuves-heros { display: none; }
@media (max-width: 767px) {
  .visuel-heros .carte-flottante { display: none; }
  .visuel-heros { min-height: 0; }
  .visuel-heros .cadre { position: relative; inset: auto; aspect-ratio: 5 / 4; width: 100%; }
  .preuves-heros {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: 12px;
    margin: 18px -18px 0;
    padding: 4px 18px 16px;
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    scrollbar-width: none;
  }
  .preuves-heros::-webkit-scrollbar { display: none; }
  .preuves-heros .bloc-preuve {
    scroll-snap-align: start;
    background: var(--blanc);
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 14px 34px rgba(38, 31, 119, 0.12);
  }
  .preuves-heros .etiquette { font-size: 12px; color: var(--texte-doux); font-weight: 600; }
  .preuves-heros .valeur {
    font-family: var(--titre);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--indigo);
    line-height: 1.1;
  }
  .preuves-heros .detail { font-size: 13px; line-height: 1.35; color: var(--texte-doux); margin-top: 3px; }
}

/* --- Ajustements par composant --- */
@media (max-width: 1024px) {
  .pied .colonnes { gap: 32px; }
  .formulaire { padding: 26px 22px; }
  .faq summary { padding: 20px 18px; font-size: 18px; }
}
@media (max-width: 767px) {
  .villes { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ville { padding: 18px 16px; }
  .ville h3 { font-size: 18px; }
  .ville p { font-size: 14px; line-height: 1.4; }
  .entete .conteneur { min-height: 70px; gap: 12px; }
  .logo img { height: 46px; }
  .groupe-boutons { display: grid; gap: 12px; }
  .groupe-boutons .btn { width: 100%; }
  .inclus { padding: 22px 20px; }
  .temoignage { padding: 26px 22px; }
  .temoignage blockquote { font-size: 19px; line-height: 1.45; }
  .encart-local { padding: 24px 20px; }
  .chiffre .valeur { font-size: 30px; }
}
@media (max-width: 420px) {
  .villes { grid-template-columns: 1fr; }
}

/* Une revelation un peu plus vivante sur les cartes glissantes */
.glisse > .reveler { transform: translateY(14px) scale(0.985); }
.glisse > .reveler.visible { transform: none; }

/* Le panneau prend le relais des boutons de l'en-tete */
@media (max-width: 1024px) {
  .entete .actions { gap: 10px; }
}

/* Les preuves glissantes apportent deja l'air sous le heros */
@media (max-width: 767px) {
  .heros { padding-bottom: calc(24px + var(--pente)); }
}

@media (min-width: 1025px) {
  .chiffres { grid-template-rows: auto auto; align-items: start; }
  .chiffre {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    gap: 8px;
  }
  .chiffre .valeur { margin-bottom: 0; }
}

/* ==========================================================
   Bandeau des fournisseurs consultes, sous le heros
   ========================================================== */

.bandeau-fournisseurs { margin-top: 58px; }
.bandeau-fournisseurs .mention {
  text-align: center;
  font-size: 14px;
  color: var(--texte-doux);
  margin: 0 auto 26px;
  max-width: 620px;
}
.logos-fournisseurs {
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logos-fournisseurs .piste {
  gap: 0;
  padding-right: 0;
  align-items: center;
  animation-duration: 74s;
}
/* Gouttiere constante plutot que case de largeur fixe : un logotype long
   et un monogramme compact ne tiennent pas dans la meme case sans etre
   deformes ou perdus au milieu du vide. */
.logos-fournisseurs .marque {
  flex: 0 0 auto;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0 28px;
}
/* Les logos sont repeints dans une encre unique en amont : la hauteur
   inline de chacun est calee sur sa surface d'encre, pas sur son cadre. */
.logos-fournisseurs .marque img {
  display: block;
  width: auto;
  opacity: 0.82;
}

@media (max-width: 1024px) {
  .bandeau-fournisseurs { margin-top: 44px; }
  .bandeau-fournisseurs .mention { font-size: 13.5px; margin-bottom: 20px; }
  .logos-fournisseurs .marque { padding: 0 18px; }
  .logos-fournisseurs .piste { animation-duration: 52s; }
}
@media (prefers-reduced-motion: reduce) {
  .logos-fournisseurs .piste { animation: none; }
  .logos-fournisseurs { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
}

/* ===== Verticale : secteurs, expertises, guides, hubs ===== */
.heros .promesse-heros { font-family: var(--titre); font-weight: 700; font-size: 24px; line-height: 1.3; color: var(--indigo); margin: 0 0 16px; }
.point-cle { position: relative; padding-top: 28px; }
.point-cle .numero { font-family: var(--titre); font-weight: 800; font-size: 15px; letter-spacing: 0.08em; color: var(--turquoise); margin-bottom: 8px; }
.point-cle h3 { font-size: 21px; }
.villes-3 { grid-template-columns: repeat(3, 1fr); }
.villes-3 .ville { min-height: 200px; padding-right: 64px; }
.villes-3 .ville h3 { font-size: 20px; line-height: 1.3; }
.lien-carte { display: flex; flex-direction: column; }
.lien-carte .surtitre { margin-bottom: 8px; }
.lien-carte p { flex: 1; }
.lien-carte .btn { align-self: flex-start; margin-top: 12px; }
.quand .liste-coche { margin: 0; }
.defilement-tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.defilement-tableau .tableau { min-width: 640px; }
.heros-hub .conteneur { grid-template-columns: 1fr; }
.heros-hub .conteneur > div { max-width: 820px; }

/* Guides et articles */
.heros-article h1 { font-size: clamp(34px, 4vw, 50px); }
.heros-article .surtitre { margin-bottom: 14px; }
.meta-article { font-size: 16px; color: var(--texte-doux); margin-top: 18px; }
.meta-article a { color: var(--bleu); font-weight: 600; }
.article-grille { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: start; }
.sommaire { position: sticky; top: 110px; background: var(--teinte-bleu); border-radius: var(--rayon); padding: 28px 26px; }
.sommaire strong { font-family: var(--titre); font-size: 19px; color: var(--indigo); display: block; margin-bottom: 14px; }
.sommaire ol { margin: 0 0 20px; padding: 0 0 0 20px; display: grid; gap: 8px; font-size: 15px; }
.sommaire ol a { color: var(--texte); }
.sommaire ol a:hover { color: var(--bleu); }
.sommaire .btn { width: 100%; text-align: center; }
.article { max-width: 780px; min-width: 0; font-size: 19px; line-height: 1.65; }
.article > section { margin-bottom: 56px; scroll-margin-top: 110px; }
.article h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 20px; }
.article h3 { font-size: 22px; margin: 32px 0 12px; }
.article p { margin: 0 0 18px; }
.article ul, .article ol { margin: 0 0 20px; padding-left: 24px; }
.article li { margin-bottom: 8px; }
.article .tableau { font-size: 17px; margin: 8px 0 24px; }
.en-bref, .encadre, .avis-expert, .cta-article { border-radius: var(--rayon); padding: 28px 30px; margin: 0 0 40px; }
.en-bref { background: var(--teinte-bleu); }
.en-bref strong, .encadre strong { font-family: var(--titre); font-size: 19px; color: var(--indigo); display: block; margin-bottom: 10px; }
.en-bref ul { margin: 0; padding-left: 20px; }
.encadre { background: var(--teinte-turquoise); margin: 8px 0 28px; }
.encadre p { margin: 0; }
.avis-expert { background: var(--indigo); color: var(--blanc); margin: 8px 0 28px; }
.avis-expert .surtitre { color: var(--turquoise); }
.avis-expert p { margin: 0; color: var(--blanc); font-size: 18px; }
.citation { font-family: var(--titre); font-weight: 700; font-size: 24px; line-height: 1.4; color: var(--indigo); margin: 8px 0 28px; padding: 0 0 0 24px; box-shadow: inset 4px 0 0 var(--turquoise); }
.cta-article { background: var(--teinte-orange); display: grid; gap: 10px; justify-items: start; margin: 8px 0 56px; }
.cta-article strong { font-family: var(--titre); font-size: 22px; color: var(--indigo); }
.cta-article p { margin: 0; }
.a-retenir { background: var(--fond); border-radius: var(--rayon); padding: 32px 34px; }
.a-retenir .liste-coche { margin: 0; }
.auteur-article { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; background: var(--teinte-bleu); border-radius: var(--rayon); padding: 28px 30px; margin-top: 16px; }
.auteur-article img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; }
.auteur-article strong { font-family: var(--titre); font-size: 20px; color: var(--indigo); display: block; }
.auteur-article span { font-size: 15px; color: var(--texte-doux); display: block; margin-bottom: 10px; }
.auteur-article p { font-size: 16px; margin: 0 0 10px; }
.auteur-article a { font-weight: 600; color: var(--bleu); }

@media (max-width: 1024px) {
  .article-grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .article-grille > * { min-width: 0; }
  .sommaire { position: static; }
  .villes-3 { grid-template-columns: 1fr 1fr; }
  .heros .promesse-heros { font-size: 20px; }
}
@media (max-width: 756px) {
  .villes-3 { grid-template-columns: 1fr; }
  .article { font-size: 17px; }
  .auteur-article { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .en-bref, .encadre, .avis-expert, .cta-article, .a-retenir { padding: 22px 20px; }
  .citation { font-size: 20px; }
}

/* ===== Verticale V2 : variantes de mise en page (chaque page a sa propre composition) ===== */

/* Héros plein cadre : photo en fond, texte clair, points clés en cartes translucides */
.heros-plein { position: relative; overflow: hidden; padding: 112px 0 88px; background: var(--indigo); color: var(--blanc); }
.heros-plein .fond { position: absolute; inset: 0; }
.heros-plein .fond img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.heros-plein .fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(38, 31, 119, 0.94) 0%, rgba(38, 31, 119, 0.72) 48%, rgba(38, 31, 119, 0.30) 100%); }
.heros-plein .conteneur { position: relative; z-index: 1; display: block; }
.heros-plein .texte-heros { max-width: 760px; }
.heros-plein .ariane, .heros-plein .ariane a { color: #cfcbe9; }
.heros-plein .ariane span { color: rgba(255, 255, 255, 0.4); }
.heros-plein h1 { color: var(--blanc); margin-bottom: 18px; }
.heros-plein h1 .souligne { color: var(--turquoise); }
.heros-plein .promesse-heros { color: var(--turquoise); font-family: var(--titre); font-weight: 700; font-size: 24px; line-height: 1.3; margin: 0 0 16px; }
.heros-plein .accroche { color: #dedbf3; font-size: 21px; font-weight: 300; max-width: 640px; margin-bottom: 30px; }
.heros-plein .reassurance { color: #cfcbe9; }
.heros-plein .badge-avis { background: rgba(255, 255, 255, 0.12); color: var(--blanc); box-shadow: none; }
.heros-plein .badge-avis .note { color: var(--turquoise); }
.heros-plein .btn-secondaire { background: rgba(255, 255, 255, 0.14); color: var(--blanc); }
.heros-plein .btn-secondaire:hover { background: rgba(255, 255, 255, 0.24); color: var(--blanc); }
.heros-plein .points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
.heros-plein .points article { background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(10px); border-radius: var(--rayon-petit); padding: 22px 24px; }
.heros-plein .points .numero { font-family: var(--titre); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; color: var(--turquoise); margin-bottom: 8px; }
.heros-plein .points h2 { color: var(--blanc); font-size: 20px; margin: 0 0 6px; }
.heros-plein .points p { color: #dedbf3; font-size: 16px; margin: 0; }

/* Héros éditorial : titre centré, grande photo panoramique, points clés en carte posée sur la photo */
.heros-editorial { position: relative; overflow: hidden; padding: 88px 0 0; background: radial-gradient(900px 520px at 50% 0%, rgba(26, 202, 212, 0.16), transparent 60%), var(--blanc); }
.heros-editorial .conteneur { display: block; }
.heros-editorial .texte-heros { max-width: 860px; margin: 0 auto; text-align: center; }
.heros-editorial .texte-heros .ariane { justify-content: center; }
.heros-editorial .texte-heros .accroche { margin-left: auto; margin-right: auto; }
.heros-editorial .groupe-boutons { justify-content: center; }
.heros-editorial .panorama { position: relative; margin-top: 56px; }
.heros-editorial .panorama img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--rayon) var(--rayon) 0 0; }
.heros-editorial .panorama .pastille { position: absolute; right: 6%; top: -50px; width: 90px; height: 220px; opacity: 0.9; }
.heros-editorial .points { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--blanc); border-radius: 0 0 var(--rayon) var(--rayon); box-shadow: var(--ombre); margin: 0 4% 0; transform: translateY(-40px); }
.heros-editorial .points article { padding: 30px 32px; }
.heros-editorial .points article:nth-child(2) { background: var(--teinte-bleu); }
.heros-editorial .points .numero { font-family: var(--titre); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; color: var(--turquoise); margin-bottom: 8px; }
.heros-editorial .points h2 { font-size: 20px; margin: 0 0 6px; }
.heros-editorial .points p { color: var(--texte-doux); font-size: 16px; margin: 0; }

/* Héros duo : texte à gauche, deux photos décalées à droite */
.heros-duo .conteneur { grid-template-columns: 1.05fr 0.95fr; }
.heros-duo .duo { position: relative; min-height: 520px; }
.heros-duo .duo .grande { position: absolute; right: 0; top: 0; width: 78%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); box-shadow: var(--ombre); }
.heros-duo .duo .petite { position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon-petit); box-shadow: var(--ombre); }
.heros-duo .duo .pastille { position: absolute; left: 38%; top: -30px; width: 80px; height: 200px; opacity: 0.9; }
.heros-duo .duo .carte-flottante { left: auto; right: -4%; bottom: 8%; top: auto; }
.heros-duo .points-inline { display: grid; gap: 12px; margin: 26px 0 30px; padding: 0; }
.heros-duo .points-inline li { list-style: none; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; }
.heros-duo .points-inline .numero { font-family: var(--titre); font-weight: 800; font-size: 15px; color: var(--turquoise); padding-top: 3px; }
.heros-duo .points-inline strong { display: block; font-family: var(--titre); font-size: 18px; color: var(--noir); }
.heros-duo .points-inline span { color: var(--texte-doux); font-size: 16px; }

/* Héros liste : texte à gauche, panneau indigo des points clés à droite, photo pleine largeur dessous */
.heros-liste { padding-bottom: 0; }
.heros-liste .conteneur { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
.heros-liste .panneau-points { background: var(--indigo); color: var(--blanc); border-radius: var(--rayon); padding: 36px 36px 30px; position: relative; overflow: hidden; }
.heros-liste .panneau-points .surtitre { color: var(--turquoise); }
.heros-liste .panneau-points ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 22px; position: relative; z-index: 1; }
.heros-liste .panneau-points li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.heros-liste .panneau-points .numero { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); display: grid; place-items: center; font-family: var(--titre); font-weight: 800; color: var(--turquoise); }
.heros-liste .panneau-points h2 { color: var(--blanc); font-size: 19px; margin: 0 0 4px; }
.heros-liste .panneau-points p { color: #cfcbe9; font-size: 16px; margin: 0; }
.heros-liste .panneau-points .pastille { position: absolute; right: -40px; bottom: -60px; width: 120px; height: 300px; opacity: 0.25; }
.heros-liste .bandeau-photo { margin-top: 64px; }
.heros-liste .bandeau-photo img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; display: block; }

/* Chiffres : variante grands nombres sur fond clair, sans cartes */
.chiffres-grands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.chiffres-grands .chiffre { background: none; padding: 0 0 0 22px; box-shadow: inset 4px 0 0 var(--turquoise); border-radius: 0; text-align: left; }
.chiffres-grands .valeur { font-size: clamp(40px, 4.4vw, 60px); }
.chiffres-grands .libelle { font-size: 17px; max-width: 300px; }
.chiffres-inline { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 40px; }
.chiffres-inline .chiffre { background: none; box-shadow: none; padding: 0; text-align: left; display: flex; align-items: baseline; gap: 12px; }
.chiffres-inline .valeur { font-size: 30px; color: var(--turquoise); }
.chiffres-inline .libelle { color: #dedbf3; font-size: 16px; }

/* Enjeux : chronologie avec introduction collante */
.chrono { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 72px; align-items: start; }
.chrono .fixe { position: sticky; top: 120px; }
.chrono .fixe .entete-section { margin-bottom: 24px; }
.chrono ol { list-style: none; margin: 0; padding: 0; }
.chrono li { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 30px 28px; border-radius: var(--rayon); }
.chrono li:nth-child(odd) { background: var(--teinte-bleu); }
.chrono li:nth-child(even) { background: var(--blanc); }
.chrono .num { font-family: var(--titre); font-weight: 800; font-size: 60px; line-height: 0.9; color: var(--turquoise); letter-spacing: -0.04em; }
.chrono h3 { font-size: 22px; margin-bottom: 8px; }
.chrono p { color: var(--texte-doux); margin: 0; font-size: 17px; }

/* Enjeux : accordéon large */
.accordeon { display: grid; gap: 12px; max-width: 960px; margin: 0 auto; }
.accordeon details { background: var(--blanc); border-radius: var(--rayon-petit); box-shadow: var(--ombre-douce); padding: 0; }
.accordeon summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 64px 1fr 32px; align-items: center; gap: 16px; padding: 22px 26px; font-family: var(--titre); font-weight: 700; font-size: 21px; color: var(--noir); }
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary .num { font-size: 15px; letter-spacing: 0.08em; color: var(--turquoise); font-weight: 800; }
.accordeon summary .plus { width: 30px; height: 30px; border-radius: 50%; background: var(--teinte-bleu); position: relative; justify-self: end; }
.accordeon summary .plus::before, .accordeon summary .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--bleu); transform: translate(-50%, -50%); }
.accordeon summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.3s ease; }
.accordeon details[open] summary .plus::after { transform: translate(-50%, -50%) rotate(0); }
.accordeon details[open] { background: var(--teinte-bleu); box-shadow: none; }
.accordeon details p { margin: 0; padding: 0 26px 26px 106px; color: var(--texte-doux); font-size: 17px; }

/* Enjeux : bandes pleine largeur */
.bandes { display: grid; gap: 18px; }
.bandes article { display: grid; grid-template-columns: 140px 1fr 1.4fr; gap: 32px; align-items: center; padding: 30px 36px; border-radius: var(--rayon); }
.bandes article:nth-child(4n+1) { background: var(--teinte-bleu); }
.bandes article:nth-child(4n+2) { background: var(--blanc); box-shadow: var(--ombre-douce); }
.bandes article:nth-child(4n+3) { background: var(--teinte-turquoise); }
.bandes article:nth-child(4n+4) { background: var(--teinte-orange); }
.bandes .num { font-family: var(--titre); font-weight: 800; font-size: 64px; letter-spacing: -0.05em; color: var(--indigo); line-height: 1; }
.bandes h3 { font-size: 23px; margin: 0; }
.bandes p { margin: 0; color: var(--texte-doux); font-size: 17px; }

/* Postes du budget : barres de poids relatif et variante photo */
.barres { display: grid; gap: 22px; max-width: 900px; }
.barres article { display: grid; gap: 8px; }
.barres .ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.barres h3 { font-size: 21px; margin: 0; }
.barres .rang { font-size: 15px; font-weight: 700; color: var(--bleu); white-space: nowrap; }
.barres .jauge { height: 14px; border-radius: 999px; background: var(--teinte-bleu); overflow: hidden; }
.barres .jauge span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bleu), var(--turquoise)); }
.barres p { margin: 0; color: var(--texte-doux); font-size: 17px; }
.postes-photo { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.postes-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); box-shadow: var(--ombre); }
.postes-photo ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.postes-photo li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; }
.postes-photo .num { width: 46px; height: 46px; border-radius: 50%; background: var(--teinte-turquoise); color: var(--indigo); display: grid; place-items: center; font-family: var(--titre); font-weight: 800; }
.postes-photo h3 { font-size: 21px; margin: 4px 0 6px; }
.postes-photo p { margin: 0; color: var(--texte-doux); font-size: 17px; }

/* Leviers : liste alternée et mosaïque */
.leviers-liste { display: grid; gap: 16px; }
.leviers-liste article { display: grid; grid-template-columns: 72px 1fr 1.2fr; gap: 28px; align-items: start; padding: 28px 32px; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre-douce); }
.leviers-liste article:nth-child(even) { background: var(--teinte-bleu); box-shadow: none; }
.leviers-liste .num { font-family: var(--titre); font-weight: 800; font-size: 44px; color: var(--turquoise); line-height: 1; letter-spacing: -0.04em; }
.leviers-liste .pour { font-size: 15px; font-weight: 700; color: var(--bleu); margin-bottom: 6px; }
.leviers-liste h3 { font-size: 22px; margin: 0 0 8px; }
.leviers-liste p { margin: 0; color: var(--texte-doux); font-size: 17px; }
.leviers-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.leviers-liste li { padding-left: 24px; position: relative; font-size: 16px; }
.leviers-liste li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.mosaique { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mosaique article { background: var(--blanc); border-radius: var(--rayon); padding: 30px 30px 28px; position: relative; overflow: hidden; box-shadow: var(--ombre-douce); }
.mosaique article:nth-child(3n+1) { background: var(--teinte-turquoise); box-shadow: none; }
.mosaique article:nth-child(3n+3) { background: var(--teinte-bleu); box-shadow: none; }
.mosaique article .pastille { position: absolute; right: -30px; top: -50px; width: 70px; height: 170px; opacity: 0.18; }
.mosaique .pour { font-size: 15px; font-weight: 700; color: var(--bleu); margin-bottom: 10px; }
.mosaique h3 { font-size: 21px; }
.mosaique p { color: var(--texte-doux); font-size: 16px; }
.mosaique ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.mosaique li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); margin-right: 10px; vertical-align: middle; }

/* Bénéfices : liste à cocher large et variante photo */
.benefices-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; }
.benefices-liste article { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; padding: 22px 0; }
.benefices-liste .coche { width: 40px; height: 40px; border-radius: 50%; background: var(--teinte-turquoise); position: relative; }
.benefices-liste .coche::before { content: ""; position: absolute; left: 14px; top: 9px; width: 9px; height: 16px; border-right: 3px solid var(--indigo); border-bottom: 3px solid var(--indigo); transform: rotate(45deg); }
.benefices-liste h3 { font-size: 21px; margin: 6px 0 6px; }
.benefices-liste p { margin: 0; color: var(--texte-doux); font-size: 17px; }
.benefices-photo { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.benefices-photo .photo { position: relative; }
.benefices-photo .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); box-shadow: var(--ombre); }
.benefices-photo .photo .pastille { position: absolute; left: -24px; bottom: -30px; width: 70px; height: 180px; opacity: 0.9; }
.benefices-photo ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.benefices-photo li { padding: 20px 24px; border-radius: var(--rayon-petit); background: var(--teinte-bleu); }
.benefices-photo li:nth-child(even) { background: var(--teinte-turquoise); }
.benefices-photo h3 { font-size: 20px; margin: 0 0 4px; }
.benefices-photo p { margin: 0; color: var(--texte-doux); font-size: 16px; }

/* Méthode : verticale avec introduction collante, et chevrons */
.methode-verticale { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
.methode-verticale .fixe { position: sticky; top: 120px; }
.methode-verticale ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.methode-verticale li { display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 28px 30px; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre-douce); }
.fond-gris .methode-verticale li, .fond-bleu .methode-verticale li { box-shadow: none; }
.methode-verticale .num { width: 52px; height: 52px; border-radius: 50%; background: var(--indigo); color: var(--blanc); display: grid; place-items: center; font-family: var(--titre); font-weight: 800; font-size: 20px; }
.methode-verticale li:nth-child(2) .num { background: var(--bleu); }
.methode-verticale li:nth-child(3) .num { background: var(--turquoise); }
.methode-verticale li:nth-child(4) .num { background: var(--orange); }
.methode-verticale h3 { font-size: 22px; margin: 8px 0 8px; }
.methode-verticale p { margin: 0; color: var(--texte-doux); font-size: 17px; }
.chevrons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.chevrons article { position: relative; padding: 34px 28px 30px 34px; background: rgba(255, 255, 255, 0.08); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%); }
.chevrons article:first-child { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); border-radius: var(--rayon-petit) 0 0 var(--rayon-petit); }
.chevrons .num { font-family: var(--titre); font-weight: 800; font-size: 15px; letter-spacing: 0.08em; color: var(--turquoise); margin-bottom: 10px; }
.chevrons h3 { color: var(--blanc); font-size: 21px; }
.chevrons p { color: #cfcbe9; font-size: 16px; margin: 0; }
.fond-indigo .inclus { background: rgba(255, 255, 255, 0.08); }
.fond-indigo .inclus strong { color: var(--blanc); }
.fond-indigo .inclus ul { color: #dedbf3; }
.fond-indigo .inclus li::before { background: var(--turquoise); }
.fond-indigo .reassurance { color: #cfcbe9; }

/* Calendrier de l'année énergétique */
.calendrier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.calendrier article { background: var(--blanc); border-radius: var(--rayon); padding: 28px 26px; box-shadow: var(--ombre-douce); position: relative; }
.fond-gris .calendrier article, .fond-bleu .calendrier article { box-shadow: none; }
.calendrier .periode { display: inline-block; font-size: 15px; font-weight: 700; color: var(--blanc); background: var(--bleu); border-radius: 999px; padding: 6px 14px; margin-bottom: 16px; }
.calendrier article:nth-child(2) .periode { background: var(--turquoise); }
.calendrier article:nth-child(3) .periode { background: var(--orange); }
.calendrier article:nth-child(4) .periode { background: var(--indigo); }
.calendrier h3 { font-size: 20px; }
.calendrier p { color: var(--texte-doux); font-size: 16px; margin: 0; }
.calendrier-ligne { display: grid; gap: 0; }
.calendrier-ligne article { display: grid; grid-template-columns: 180px 1fr 1.4fr; gap: 28px; align-items: center; padding: 26px 30px; border-radius: var(--rayon-petit); }
.calendrier-ligne article:nth-child(odd) { background: var(--teinte-bleu); }
.calendrier-ligne .periode { font-family: var(--titre); font-weight: 800; font-size: 22px; color: var(--indigo); }
.calendrier-ligne h3 { font-size: 20px; margin: 0; }
.calendrier-ligne p { margin: 0; color: var(--texte-doux); font-size: 16px; }

/* Profils concernés */
.profils { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.profils article { background: var(--teinte-bleu); border-radius: var(--rayon); padding: 30px 28px; }
.profils article:nth-child(even) { background: var(--teinte-turquoise); }
.profils .numero { font-family: var(--titre); font-weight: 800; font-size: 15px; letter-spacing: 0.08em; color: var(--bleu); margin-bottom: 10px; }
.profils h3 { font-size: 20px; }
.profils p { color: var(--texte-doux); font-size: 16px; margin: 0; }
.profils-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 40px; }
.profils-liste article { display: grid; grid-template-columns: 60px 1fr; gap: 18px; padding: 24px 0; }
.profils-liste .numero { font-family: var(--titre); font-weight: 800; font-size: 40px; color: var(--turquoise); line-height: 1; letter-spacing: -0.04em; }
.profils-liste h3 { font-size: 21px; margin: 4px 0 6px; }
.profils-liste p { margin: 0; color: var(--texte-doux); font-size: 17px; }

/* Différence : plateforme contre courtier */
.difference { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.difference .cote { border-radius: var(--rayon); padding: 40px 40px; }
.difference .plateforme { background: var(--fond); box-shadow: var(--ombre-douce); }
.fond-gris .difference .plateforme { background: var(--blanc); box-shadow: none; }
.difference .esy { background: var(--indigo); color: var(--blanc); position: relative; overflow: hidden; }
.difference .esy .pastille { position: absolute; right: -30px; top: -60px; width: 110px; height: 280px; opacity: 0.25; }
.difference .cote .surtitre { display: block; margin-bottom: 14px; }
.difference .esy .surtitre { color: var(--turquoise); }
.difference .esy p { color: #dedbf3; }
.difference .esy h3 { color: var(--blanc); }
.difference h3 { font-size: 24px; }
.difference p { font-size: 18px; }
.difference-citation { text-align: center; max-width: 900px; margin: 0 auto; }
.difference-citation blockquote { font-family: var(--titre); font-weight: 800; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -0.03em; color: var(--indigo); margin: 0 0 28px; }
.difference-citation p { font-size: 19px; color: var(--texte-doux); }

/* Vérifications : grille numérotée et chips */
.verifications { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; }
.verifications li { list-style: none; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; background: var(--blanc); border-radius: var(--rayon-petit); padding: 20px 22px; box-shadow: var(--ombre-douce); font-size: 17px; }
.fond-gris .verifications li, .fond-bleu .verifications li { box-shadow: none; }
.verifications .num { font-family: var(--titre); font-weight: 800; color: var(--turquoise); font-size: 15px; padding-top: 3px; }
.verifications-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; }
.verifications-chips li { list-style: none; background: var(--teinte-bleu); border-radius: 999px; padding: 12px 22px; font-size: 16px; font-weight: 600; color: var(--indigo); }
.fond-bleu .verifications-chips li { background: var(--blanc); }

/* Témoignages : bandeau indigo et variante photo */
.temoignage-bandeau { text-align: center; max-width: 900px; margin: 0 auto; }
.temoignage-bandeau .etoiles { color: var(--orange); font-size: 22px; letter-spacing: 3px; margin-bottom: 20px; }
.temoignage-bandeau blockquote { font-family: var(--titre); font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; letter-spacing: -0.02em; color: var(--blanc); margin: 0 0 28px; }
.temoignage-bandeau .auteur strong { display: block; color: var(--blanc); font-size: 18px; }
.temoignage-bandeau .auteur span { color: #cfcbe9; font-size: 16px; }
.temoignage-photo { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 0; align-items: stretch; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); background: var(--blanc); }
.temoignage-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.temoignage-photo .contenu { padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; }
.temoignage-photo .etoiles { color: var(--orange); font-size: 18px; letter-spacing: 2px; }
.temoignage-photo blockquote { font-family: var(--titre); font-weight: 700; font-size: 23px; line-height: 1.4; color: var(--indigo); margin: 14px 0 22px; letter-spacing: -0.015em; }
.temoignage-photo .auteur strong { display: block; color: var(--noir); }
.temoignage-photo .auteur span { color: var(--texte-doux); font-size: 15px; }
.temoignage-photo .contact-court { margin-top: 26px; padding-top: 22px; box-shadow: inset 0 1px 0 var(--teinte-bleu); font-size: 16px; color: var(--texte-doux); }
.temoignage-photo .contact-court a { font-weight: 700; }

/* FAQ : deux colonnes et variante avec titre collant */
.faq-2col { max-width: none; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; align-items: start; }
.faq-cote { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 64px; align-items: start; }
.faq-cote .fixe { position: sticky; top: 120px; }
.faq-cote .fixe .entete-section { margin-bottom: 20px; }
.faq-cote .faq { max-width: none; margin-top: 0; }

/* Expertises : avant/après, idées reçues, livrables, avis du fondateur, erreurs */
.avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.avant-apres .cote { border-radius: var(--rayon); padding: 36px 38px; }
.avant-apres .avant { background: var(--fond); box-shadow: var(--ombre-douce); }
.fond-gris .avant-apres .avant { background: var(--blanc); box-shadow: none; }
.avant-apres .apres { background: var(--indigo); color: var(--blanc); }
.avant-apres h3 { font-size: 22px; margin-bottom: 18px; }
.avant-apres .apres h3 { color: var(--turquoise); }
.avant-apres ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.avant-apres li { position: relative; padding-left: 30px; font-size: 17px; }
.avant-apres .avant li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: #c8c6d6; }
.avant-apres .apres li { color: #e8e6f6; }
.avant-apres .apres li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 7px; height: 13px; border-right: 3px solid var(--turquoise); border-bottom: 3px solid var(--turquoise); transform: rotate(45deg); }
.idees { display: grid; gap: 16px; }
.idees article { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0; border-radius: var(--rayon); overflow: hidden; }
.idees .idee { background: var(--teinte-orange); padding: 30px 32px; }
.idees .realite { background: var(--blanc); padding: 30px 32px; box-shadow: var(--ombre-douce); }
.fond-gris .idees .realite, .fond-bleu .idees .realite { box-shadow: none; }
.idees .etiquette { font-family: var(--titre); font-size: 15px; font-weight: 700; color: var(--orange); display: block; margin-bottom: 8px; }
.idees .realite .etiquette { color: var(--turquoise); }
.idees .idee strong { font-family: var(--titre); font-size: 21px; color: var(--noir); line-height: 1.3; display: block; }
.idees .realite p { margin: 0; color: var(--texte-doux); font-size: 17px; }
.livrables { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.livrables article { background: var(--blanc); border-radius: var(--rayon); padding: 30px 26px 26px; box-shadow: var(--ombre-douce); position: relative; overflow: hidden; }
.fond-gris .livrables article, .fond-bleu .livrables article { box-shadow: none; }
.livrables article::before { content: ""; position: absolute; left: 26px; top: 0; width: 44px; height: 6px; border-radius: 0 0 6px 6px; background: var(--turquoise); }
.livrables article:nth-child(2)::before { background: var(--bleu); }
.livrables article:nth-child(3)::before { background: var(--orange); }
.livrables article:nth-child(4)::before { background: var(--indigo); }
.livrables h3 { font-size: 20px; margin-top: 10px; }
.livrables p { color: var(--texte-doux); font-size: 16px; margin: 0; }
.avis-fondateur { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: center; background: var(--teinte-turquoise); border-radius: var(--rayon); padding: 44px 48px; }
.avis-fondateur img { width: 220px; height: 220px; object-fit: cover; border-radius: 50%; box-shadow: var(--ombre); }
.avis-fondateur .surtitre { display: block; margin-bottom: 12px; }
.avis-fondateur blockquote { font-family: var(--titre); font-weight: 700; font-size: 22px; line-height: 1.4; color: var(--indigo); margin: 0 0 14px; letter-spacing: -0.015em; }
.avis-fondateur .signature { color: var(--texte-doux); font-size: 16px; }
.erreurs-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.erreurs-liste article { background: var(--blanc); border-radius: var(--rayon); padding: 30px 28px; box-shadow: var(--ombre-douce); }
.fond-gris .erreurs-liste article, .fond-bleu .erreurs-liste article { box-shadow: none; }
.erreurs-liste .num { font-family: var(--titre); font-weight: 800; font-size: 44px; color: var(--orange); line-height: 1; letter-spacing: -0.04em; margin-bottom: 12px; }
.erreurs-liste h3 { font-size: 20px; }
.erreurs-liste p { color: var(--texte-doux); font-size: 16px; margin: 0; }

/* Guides : mise en page large et magazine */
.heros-plein.heros-article-plein { padding: 96px 0 72px; }
.heros-plein .meta-article, .heros-plein .meta-article a { color: #cfcbe9; }
.heros-plein .chapo { color: #dedbf3; font-size: 21px; font-weight: 300; max-width: 700px; }
.sommaire-ligne { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; padding: 0; list-style: none; }
.sommaire-ligne li a { display: inline-block; background: var(--teinte-bleu); border-radius: 999px; padding: 10px 18px; font-size: 15px; font-weight: 600; color: var(--indigo); }
.sommaire-ligne li a:hover { background: var(--teinte-turquoise); }
.article-large { max-width: 860px; margin: 0 auto; }
.article-large .article { max-width: none; }
.citation-ouverture { max-width: 900px; margin: 0 auto 48px; text-align: center; }
.citation-ouverture blockquote { font-family: var(--titre); font-weight: 800; font-size: clamp(24px, 3vw, 36px); line-height: 1.2; letter-spacing: -0.03em; color: var(--indigo); margin: 0 0 14px; }
.citation-ouverture .signature { color: var(--texte-doux); font-size: 16px; }
.definition-carte { background: var(--indigo); color: var(--blanc); border-radius: var(--rayon); padding: 30px 32px; margin: 0 0 40px; }
.definition-carte .surtitre { color: var(--turquoise); display: block; margin-bottom: 8px; }
.definition-carte strong { font-family: var(--titre); font-size: 22px; display: block; margin-bottom: 8px; color: var(--blanc); }
.definition-carte p { margin: 0; color: #dedbf3; font-size: 17px; }
.checklist { background: var(--teinte-turquoise); border-radius: var(--rayon); padding: 30px 32px; margin: 8px 0 40px; }
.checklist strong { font-family: var(--titre); font-size: 20px; color: var(--indigo); display: block; margin-bottom: 14px; }
.checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 34px; font-size: 17px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 6px; background: var(--blanc); }
.checklist li::after { content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 11px; border-right: 3px solid var(--turquoise); border-bottom: 3px solid var(--turquoise); transform: rotate(45deg); }
.plan-action { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan-action article { background: var(--blanc); border-radius: var(--rayon-petit); padding: 24px 22px; box-shadow: var(--ombre-douce); }
.fond-gris .plan-action article, .fond-bleu .plan-action article { box-shadow: none; }
.plan-action .num { width: 38px; height: 38px; border-radius: 50%; background: var(--indigo); color: var(--blanc); display: grid; place-items: center; font-family: var(--titre); font-weight: 800; margin-bottom: 12px; }
.plan-action h3 { font-size: 18px; }
.plan-action p { color: var(--texte-doux); font-size: 16px; margin: 0; }
.article-magazine { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.article-magazine .lateral { position: sticky; top: 110px; display: grid; gap: 20px; }
.article-magazine .lateral .sommaire { position: static; }
.article-magazine .article { max-width: none; }
.heros-editorial.heros-guide .panorama img { aspect-ratio: 21 / 8; border-radius: var(--rayon); }
.heros-editorial.heros-guide { padding-bottom: 72px; }
.cta-large { background: var(--indigo); color: var(--blanc); border-radius: var(--rayon); padding: 44px 48px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; position: relative; overflow: hidden; }
.cta-large .pastille { position: absolute; right: 18%; top: -80px; width: 110px; height: 280px; opacity: 0.25; }
.cta-large strong { font-family: var(--titre); font-size: 26px; display: block; margin-bottom: 8px; color: var(--blanc); letter-spacing: -0.02em; }
.cta-large p { margin: 0; color: #dedbf3; font-size: 18px; }
.cta-large .btn { position: relative; z-index: 1; white-space: nowrap; }

@media (max-width: 1024px) {
  .heros-plein .points, .heros-editorial .points { grid-template-columns: 1fr; }
  .heros-editorial .points { margin: 0; transform: translateY(-20px); border-radius: var(--rayon); }
  .heros-editorial .panorama img { aspect-ratio: 16 / 9; }
  .heros-duo .conteneur, .heros-liste .conteneur { grid-template-columns: 1fr; }
  .heros-duo .duo { min-height: 420px; }
  .heros-liste .bandeau-photo img { aspect-ratio: 2 / 1; }
  .chrono, .methode-verticale, .faq-cote, .postes-photo, .benefices-photo, .temoignage-photo { grid-template-columns: 1fr; gap: 32px; }
  .temoignage-photo { gap: 0; }
  .chrono .fixe, .methode-verticale .fixe, .faq-cote .fixe { position: static; }
  .bandes article { grid-template-columns: 90px 1fr; }
  .bandes article p { grid-column: 2; }
  .leviers-liste article { grid-template-columns: 56px 1fr; }
  .leviers-liste article ul { grid-column: 2; }
  .mosaique, .verifications, .erreurs-liste { grid-template-columns: repeat(2, 1fr); }
  .calendrier, .profils, .livrables, .plan-action { grid-template-columns: repeat(2, 1fr); }
  .chevrons { grid-template-columns: repeat(2, 1fr); }
  .chevrons article, .chevrons article:first-child { clip-path: none; border-radius: var(--rayon-petit); }
  .faq-2col { grid-template-columns: 1fr; }
  .article-magazine { grid-template-columns: minmax(0, 1fr); }
  .article-magazine .lateral { position: static; }
  .calendrier-ligne article { grid-template-columns: 1fr; gap: 8px; }
  .cta-large { grid-template-columns: 1fr; }
  .chiffres-grands { grid-template-columns: 1fr; gap: 20px; }
  .chiffres-grands.glisse { grid-template-columns: none; grid-auto-columns: 78%; }
}
@media (max-width: 640px) {
  .heros-plein { padding: 72px 0 56px; }
  .heros-editorial { padding-top: 56px; }
  .heros-duo .duo { min-height: 340px; }
  .heros-duo .duo .carte-flottante { display: none; }
  .chrono li { grid-template-columns: 1fr; gap: 6px; padding: 22px 20px; }
  .chrono .num { font-size: 40px; }
  .accordeon summary { grid-template-columns: 48px 1fr 28px; font-size: 18px; padding: 18px 18px; }
  .accordeon details p { padding: 0 18px 20px 18px; }
  .bandes article { grid-template-columns: 1fr; padding: 22px 22px; }
  .bandes article p { grid-column: 1; }
  .bandes .num { font-size: 40px; }
  .leviers-liste article { grid-template-columns: 1fr; padding: 22px 22px; }
  .leviers-liste article ul { grid-column: 1; }
  .mosaique, .verifications, .erreurs-liste, .calendrier, .profils, .livrables, .plan-action, .benefices-liste, .profils-liste, .difference, .avant-apres, .chevrons { grid-template-columns: 1fr; }
  .idees article { grid-template-columns: 1fr; }
  .avis-fondateur { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 30px 24px; }
  .temoignage-photo .contenu { padding: 28px 24px; }
  .temoignage-photo img { min-height: 240px; }
  .difference .cote, .avant-apres .cote { padding: 26px 24px; }
  .methode-verticale li { grid-template-columns: 1fr; padding: 22px 20px; }
  .cta-large { padding: 28px 24px; }
}

/* Verticale V2 : compléments */
.article .plan { margin: 48px 0; }
.article .cta-large { margin: 48px 0 56px; }
@media (min-width: 641px) { .mosaique:has(article:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
.article .plan-action { grid-template-columns: repeat(2, 1fr); }
.article .plan-action article { background: var(--teinte-bleue, #eef4fb); box-shadow: none; }
.article .plan-action p { margin: 0; font-size: 16px; }
.avis-fondateur.sans-photo { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }
.citation-ouverture.gauche { text-align: left; margin: 0 0 40px; }
.temoignage-photo .contact-court { margin-top: 20px; font-size: 16px; color: var(--texte-doux); }
.temoignage-photo .contact-court a { color: var(--bleu); font-weight: 600; }
.heros-plein .chiffres-inline { margin-top: 40px; }
@media (max-width: 640px) {
  .article .plan-action { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .chiffres-grands.glisse { grid-template-columns: none; grid-auto-columns: 72%; }
  .chiffres-grands.glisse .chiffre { padding-left: 18px; }
}

/* ==========================================================
   Version 14 : cohérence et symétrie
   Une seule échelle de titres, des cartes de même hauteur,
   des textes justifiés, des héros équilibrés, aucune bordure
   ni filet, un seul jeu de rayons.
   ========================================================== */

/* --- Échelle typographique unique --- */
h1, .heros h1, .heros-plein h1, .heros-editorial h1, .heros-duo h1, .heros-liste h1, .heros-article h1, .heros-hub h1 {
  font-size: clamp(34px, 3.9vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
h2, .article h2, .fond-indigo h2, .deux-colonnes h2, .chrono .fixe h2, .methode-verticale .fixe h2, .faq-cote .fixe h2, .editorial h2 {
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.entete-section h2 { margin-bottom: 0.45em; }
.entete-section p, .heros .accroche, .heros-plein .accroche, .heros-plein .chapo, .final .texte p { font-size: 20px; line-height: 1.55; }
.entete-section { max-width: 760px; }
.carte h3, .etape h3, .mosaique h3, .calendrier h3, .profils h3, .livrables h3, .erreurs-liste h3, .plan-action h3,
.benefices-photo h3, .benefices-liste h3, .postes-photo h3, .methode-verticale h3, .chrono h3, .bandes h3, .leviers-liste h3,
.ville h3, .barres h3, .avant-apres h3, .difference h3, .calendrier-ligne h3, .profils-liste h3,
.heros-plein .points h2, .heros-editorial .points h2, .heros-liste .panneau-points h2, .heros-duo .points-inline strong {
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.carte p, .etape p, .mosaique p, .calendrier p, .profils p, .livrables p, .erreurs-liste p, .plan-action p,
.benefices-photo p, .benefices-liste p, .postes-photo p, .methode-verticale p, .chrono p, .bandes p, .leviers-liste p,
.heros-plein .points p, .heros-editorial .points p, .heros-liste .panneau-points p, .heros-duo .points-inline span,
.idees .realite p, .calendrier-ligne p, .profils-liste p, .barres p { font-size: 16px; line-height: 1.6; }

/* --- Texte justifié : un cadre net pour chaque paragraphe --- */
.carte p, .etape p, .mosaique p, .calendrier p, .profils p, .livrables p, .erreurs-liste p,
.benefices-photo p, .benefices-liste p, .postes-photo p, .methode-verticale p, .chrono p, .bandes p, .leviers-liste p,
.heros-liste .panneau-points p, .heros-duo .points-inline span,
.idees .realite p, .calendrier-ligne p, .profils-liste p, .barres p,
.deux-colonnes p, .editorial p, .chrono .fixe p, .methode-verticale .fixe p, .faq-cote .fixe p,
.faq details p, .accordeon details p, .article p, .article li,
.difference p, .temoignage blockquote, .temoignage-photo blockquote,
.avis-fondateur blockquote, .encadre p, .avis-expert p, .definition-carte p, .cta-large p, .auteur-article p,
.panneau .encart span, .heros .accroche, .heros-plein .accroche, .heros-plein .chapo, .entete-section p,
.quand p, .encart-local p, .offre p {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}
.entete-section.centre p, .final .texte p { text-align: center; hyphens: manual; -webkit-hyphens: manual; }
.heros-editorial .accroche, .temoignage-bandeau blockquote, .difference-citation blockquote, .citation-ouverture blockquote,
.chiffres-grands .libelle, .heros-plein .points p, .heros-editorial .points p, .plan-action p, .ville p, .carte-flottante .detail {
  text-align: left; hyphens: manual; -webkit-hyphens: manual;
}

/* --- Grilles : cartes de même hauteur, boutons calés en bas, jamais d'orphelin --- */
.grille, .grille-2, .grille-3, .grille-4, .grille-5, .mosaique, .calendrier, .profils, .livrables, .plan-action, .erreurs-liste, .chevrons, .villes, .difference, .avant-apres {
  align-items: stretch;
}
.carte, .etape, .mosaique article, .calendrier article, .profils article, .livrables article, .plan-action article, .erreurs-liste article, .ville {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mosaique article p:last-child, .calendrier article p:last-child, .profils article p:last-child, .livrables article p:last-child, .erreurs-liste article p:last-child { margin-bottom: 0; }
.carte .lien, .carte .btn, .lien-carte .btn { margin-top: auto; align-self: flex-start; }
.lien-carte p { flex: 1 1 auto; margin-bottom: 20px; }
.etapes { align-items: stretch; }
.etape:nth-child(even) { margin-top: 0; }
.etapes::before { top: 64px; opacity: 0.25; }
.etapes.grille-2::before { display: none; }
@media (min-width: 1025px) {
  .grille-2:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .grille-3:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-left: auto; margin-right: auto; }
  .grille-4:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .grille-3:has(> :nth-child(4):last-child), .erreurs-liste:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
  .livrables:has(> :nth-child(3):last-child), .calendrier:has(> :nth-child(3):last-child), .profils:has(> :nth-child(3):last-child), .plan-action:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .benefices-liste:has(> :nth-child(3):last-child), .profils-liste:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
.fond-bleu .carte, .fond-gris .carte, .fond-turquoise .carte, .fond-bleu .lien-carte, .fond-gris .lien-carte { background: var(--blanc); box-shadow: var(--ombre-douce); }

/* --- Chiffres : ni filet ni cadre, alignés sur une même ligne --- */
.chiffres-grands { gap: 32px; align-items: start; }
.chiffres-grands .chiffre { padding: 0; box-shadow: none; border-radius: 0; text-align: center; display: grid; justify-items: center; }
.chiffres-grands .valeur { font-size: clamp(40px, 4vw, 56px); margin-bottom: 10px; }
.chiffres-grands .libelle { font-size: 16px; max-width: 300px; text-align: center; margin: 0 auto; }
.chiffres-inline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; margin-top: 44px; }
.chiffres-inline .chiffre { display: block; text-align: left; }
.chiffres-inline .valeur { display: block; font-size: 32px; margin-bottom: 4px; }
.chiffres-inline .libelle { display: block; }
.chiffre .valeur { white-space: nowrap; }

/* --- Livrables et citations : plus de barres de couleur ni de filets --- */
.livrables article::before { display: none; }
.livrables h3 { margin-top: 0; }
.livrables article { padding: 30px 28px; }
.livrables article:nth-child(2) { background: var(--teinte-bleu); box-shadow: none; }
.livrables article:nth-child(4) { background: var(--teinte-turquoise); box-shadow: none; }
.citation { box-shadow: none; padding: 26px 30px; background: var(--teinte-bleu); border-radius: var(--rayon); }

/* --- Sections éditoriales : l'image prend toute la hauteur de la colonne --- */
.benefices-photo, .postes-photo, .deux-colonnes, .editorial { align-items: stretch; }
.benefices-photo .photo, .postes-photo .photo, .postes-photo > figure, .benefices-photo > figure { position: relative; min-height: 440px; }
.benefices-photo .photo img, .postes-photo .photo img, .postes-photo > figure img, .benefices-photo > figure img {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: var(--rayon); box-shadow: var(--ombre);
}
.postes-photo > img, .benefices-photo > img { height: 100%; aspect-ratio: auto; min-height: 440px; object-fit: cover; }
.benefices-photo .photo .pastille { left: auto; right: -20px; top: -26px; bottom: auto; }
.deux-colonnes .panneau { min-height: 100%; }
.deux-colonnes > div:not(.panneau) { display: flex; flex-direction: column; justify-content: center; }
.benefices-photo ol, .postes-photo ol, .benefices-photo ul, .postes-photo ul, .benefices-photo > div, .postes-photo > div { align-self: center; }
@media (max-width: 1024px) {
  .benefices-photo .photo, .postes-photo .photo, .postes-photo > figure, .benefices-photo > figure { min-height: 0; }
  .benefices-photo .photo img, .postes-photo .photo img, .postes-photo > figure img, .benefices-photo > figure img { position: static; aspect-ratio: 4 / 3; height: auto; }
  .postes-photo > img, .benefices-photo > img { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
}

/* --- Vérifications et sommaires : grilles régulières plutôt que chips flottantes --- */
.verifications-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.verifications-chips li { border-radius: var(--rayon-petit); padding: 18px 22px; display: flex; align-items: center; text-align: left; font-size: 17px; }
.sommaire-ligne { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; counter-reset: sommaire; }
.sommaire-ligne li a { display: flex; align-items: center; height: 100%; border-radius: var(--rayon-petit); padding: 14px 18px; text-align: left; }
.sommaire-ligne li a::before { content: counter(sommaire, decimal-leading-zero); counter-increment: sommaire; font-family: var(--titre); font-weight: 800; color: var(--turquoise); margin-right: 12px; font-size: 14px; }
@media (max-width: 640px) { .verifications-chips, .sommaire-ligne { grid-template-columns: 1fr; } }

/* --- Héros : symétrie des deux colonnes --- */
.heros-duo .conteneur { grid-template-columns: 1fr 1fr; align-items: stretch; row-gap: 48px; }
.heros-duo .conteneur > div:first-child { display: flex; flex-direction: column; justify-content: center; }
.heros-duo .duo { min-height: 520px; height: 100%; }
.heros-duo .duo .grande { top: 0; bottom: 0; height: 100%; width: 80%; aspect-ratio: auto; }
.heros-duo .duo .petite { width: 44%; bottom: -24px; }
.heros-duo .duo .carte-flottante { right: 0; bottom: auto; top: 8%; }
.heros-duo .points-inline { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 0; }
.heros-duo .points-inline li { grid-template-columns: 40px 1fr; background: var(--blanc); border-radius: var(--rayon-petit); padding: 20px 22px; box-shadow: var(--ombre-douce); }
.heros-duo .points-inline strong { margin-bottom: 4px; }
.heros-liste .conteneur { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
.heros-liste .conteneur > div:first-child { display: flex; flex-direction: column; justify-content: center; }
.heros-liste .panneau-points { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.heros-plein .surtitre, .heros-article .surtitre, .fond-indigo .surtitre { color: var(--turquoise); }
.heros-plein .surtitre::before, .heros-article .surtitre::before { background: var(--turquoise); }
.heros-plein .points, .heros-editorial .points { align-items: stretch; }
.heros-plein .points article, .heros-editorial .points article { display: flex; flex-direction: column; }
.visuel-heros .cadre img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) {
  .heros-duo .conteneur, .heros-liste .conteneur { grid-template-columns: 1fr; row-gap: 32px; }
  .heros-duo .duo { height: auto; min-height: 420px; }
  .heros-duo .points-inline { grid-template-columns: 1fr; }
  .heros-liste .panneau-points { height: auto; }
}

/* --- Témoignages : citation lisible, taille contenue --- */
.temoignage blockquote { font-size: 18px; line-height: 1.55; }
.temoignage-photo blockquote { font-size: 21px; line-height: 1.45; }
.avis-fondateur blockquote { font-size: 21px; line-height: 1.45; }
.temoignage-bandeau blockquote { font-size: clamp(22px, 2.4vw, 30px); }
.difference-citation blockquote, .citation-ouverture blockquote { font-size: clamp(24px, 2.8vw, 34px); }

/* --- FAQ : fermées au repos, une seule ouverte à la fois --- */
.faq details, .accordeon details { transition: background 0.3s ease; }
.faq details p, .accordeon details p { max-width: none; }
.faq-2col { align-items: start; }

/* --- Rayons : deux valeurs, pas davantage --- */
.icone, .champ input, .champ select, .champ textarea, .preuves-heros .bloc-preuve { border-radius: var(--rayon-petit); }

/* --- Détails --- */
.chrono li { align-items: center; }
.postes-photo li, .benefices-photo li { align-items: start; }
.lien-carte .surtitre { margin-bottom: 10px; }
.sommaire-ligne li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.verifications-chips li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .heros-duo .duo { min-height: 0; height: auto; }
  .heros-duo .duo .grande { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .heros-duo .duo .petite, .heros-duo .duo .pastille { display: none; }
  .heros-duo .duo .carte-flottante { display: block; position: static; margin-top: 14px; max-width: none; animation: none; }
}

/* --- v14b : bandeau de chiffres centré, colonnes égales --- */
.chiffres { justify-content: center; gap: 28px 40px; }
.chiffres .chiffre { text-align: center; justify-items: center; }
.chiffres .chiffre .valeur { font-size: clamp(32px, 2.8vw, 44px); }
.chiffres .chiffre .libelle { max-width: 280px; margin: 0 auto; text-align: center; line-height: 1.5; }
@media (min-width: 1025px) {
  .chiffres:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin-left: auto; margin-right: auto; }
  .chiffres:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); max-width: 680px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 1024px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .chiffres { grid-template-columns: 1fr; gap: 24px; } }

/* --- v14b : héros éditorial, image entière et trois cartes détachées --- */
.heros-editorial .panorama img { border-radius: var(--rayon); }
.heros-editorial .points { gap: 20px; background: none; box-shadow: none; border-radius: 0; margin: 0; transform: translateY(-48px); }
.heros-editorial .points article { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 28px 30px; }
.heros-editorial .points article:nth-child(2) { background: var(--blanc); }
.heros-editorial { padding-bottom: 0; }
.heros-editorial .conteneur { padding-bottom: 8px; }
@media (max-width: 1024px) {
  .heros-editorial .points { gap: 14px; transform: translateY(-24px); }
}

/* ==========================================================
   v14c : passage au peigne fin
   Titres équilibrés, listes de deux cartes centrées,
   colonnes étroites en fer à gauche, témoignage centré,
   adresses e-mail insécables, FAQ deux colonnes sans orphelin.
   ========================================================== */

/* --- Titres : plus de mot isolé sur la dernière ligne --- */
h1, h2, h3, .faq summary, .accordeon summary, .chiffres .libelle, .citation p, .encadre h3 {
  text-wrap: balance;
}

/* --- Listes de villes ou de guides : deux cartes, centrées --- */
@media (min-width: 1025px) {
  .villes-3:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }
  .villes-3:has(> :nth-child(1):last-child) {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Colonnes étroites : texte en fer à gauche, sans rivières --- */
.grille-5.etapes .etape p, .grille-4.etapes .etape p, .grille-4 .carte p,
.chiffres .libelle, .points-inline p, .villes .ville p {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* --- Témoignage à côté d'une carte photo : contenu centré verticalement --- */
.deux-colonnes .temoignage { justify-content: center; }
.deux-colonnes .temoignage .auteur { margin-top: 28px; }

/* --- Adresses e-mail et numéros : jamais coupés en fin de ligne --- */
a[href^="mailto:"], a[href^="tel:"] { white-space: nowrap; }

/* --- FAQ en deux colonnes : la dernière question impaire prend toute la largeur --- */
@media (min-width: 1025px) {
  .faq-2col > details:nth-child(odd):last-child { grid-column: 1 / -1; }
}

/* --- Bandeau "inclus" : puces alignées sur une seule grille --- */
.inclus ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; }
@media (max-width: 640px) { .inclus ul { grid-template-columns: 1fr; } }

/* ==========================================================
   v14d : chiffres du héros plein, jamais plus larges que l'écran
   ========================================================== */
.chiffres-inline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chiffres-inline .chiffre { min-width: 0; }
.chiffres-inline .libelle { text-align: left; }
@media (max-width: 640px) {
  .chiffres-inline { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
}
/* Héros en deux colonnes : accroche en fer à gauche, sans rivières dans une colonne étroite */
.heros .accroche, .heros-plein .accroche, .heros-plein .chapo { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
/* Décors (pastilles) : jamais de défilement horizontal, quel que soit l'écran */
html, body { overflow-x: clip; }
@media (max-width: 1024px) {
  .benefices-photo .photo { overflow: hidden; }
}
@media (max-width: 1024px) {
  .benefices-photo .photo { border-radius: var(--rayon); }
  .benefices-photo .photo img, .postes-photo .photo img, .postes-photo > figure img, .benefices-photo > figure img,
  .postes-photo > img, .benefices-photo > img { aspect-ratio: 16 / 9; max-height: 360px; }
}

/* v14e : ligne de preuves, chaque mention reste sur une ligne et se centre sur mobile */
.preuve strong { font-weight: 600; white-space: nowrap; }
.preuve .source { white-space: nowrap; }
@media (max-width: 640px) {
  .preuves { flex-direction: column; gap: 14px; }
  .preuve { flex-wrap: wrap; justify-content: center; text-align: center; }
  .preuve .source { white-space: normal; }
}
/* v14e : bandeau de chiffres en carrousel, la piste garde ses colonnes automatiques et part du bord gauche */
@media (max-width: 1024px) {
  .chiffres.glisse { grid-template-columns: none; justify-content: start; }
}

/* ==========================================================
   Version 16 : en-tête transparent au chargement, blanc au
   défilement, méga menus et panneau mobile en accordéons
   ========================================================== */
:root { --h-entete: 84px; }
html { scroll-padding-top: 88px; }

.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.entete.solide, .entete.mega-actif {
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(38, 31, 119, 0.08);
}
.entete .conteneur { min-height: var(--h-entete); flex-wrap: nowrap; }
.entete.compacte .conteneur { min-height: 68px; }

/* Le héros passe sous l'en-tête transparent */
main > .heros:first-child { padding-top: calc(88px + var(--h-entete)); }
main > .heros-editorial:first-child { padding-top: calc(88px + var(--h-entete)); }
main > .heros-plein:first-child { padding-top: calc(112px + var(--h-entete)); }
main > .heros-plein.heros-article-plein:first-child { padding-top: calc(96px + var(--h-entete)); }

/* En-tête posé sur un héros sombre */
.entete.sur-sombre:not(.solide):not(.mega-actif) .logo img { filter: brightness(0) invert(1); }
.entete.sur-sombre:not(.solide):not(.mega-actif) .menu > li > a { color: var(--blanc); }
.entete.sur-sombre:not(.solide):not(.mega-actif) .menu > li > a:hover { background: rgba(255, 255, 255, 0.12); color: var(--blanc); }
.entete.sur-sombre:not(.solide):not(.mega-actif) .menu-mobile { background: rgba(255, 255, 255, 0.14); color: var(--blanc); }
.entete.sur-sombre:not(.solide):not(.mega-actif) .bouton-menu { background: rgba(255, 255, 255, 0.14); }
.entete.sur-sombre:not(.solide):not(.mega-actif) .bouton-menu span { background: var(--blanc); }

/* Barre de navigation */
.entete .navigation { align-self: stretch; display: flex; }
.menu { gap: 4px; align-items: stretch; }
.menu > li { display: flex; align-items: center; }
.menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  font-family: var(--titre);
  font-size: 16px;
  font-weight: 700;
  color: var(--noir);
  transition: background 0.2s ease, color 0.2s ease;
}
.menu > li > a:hover,
.menu > li.ouvert > a { background: var(--teinte-bleu); color: var(--indigo); }
.menu > li.actif > a, .menu > li > a[aria-current="page"] { color: var(--bleu); }
.menu .chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}
.menu > li.ouvert .chevron { transform: rotate(180deg); }

/* Panneau du méga menu */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding-top: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.28s ease, visibility 0.22s;
  pointer-events: none;
}
.a-mega.ouvert .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.mega-interieur {
  width: min(var(--conteneur), calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
  padding: 12px;
  background: var(--blanc);
  border-radius: 26px;
  box-shadow: 0 30px 70px rgba(38, 31, 119, 0.18);
}
.mega-corps { padding: 20px 16px 16px; display: flex; flex-direction: column; }
.mega-colonnes { display: grid; gap: 20px 24px; }
.mega-colonnes.mega-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-colonnes.mega-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px 12px;
  font-family: var(--titre);
  font-size: 14px;
  font-weight: 700;
  color: var(--texte-doux);
}
.mega-titre .ico { width: 18px; height: 18px; }
.mega-groupe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega-groupe a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 11px 12px;
  border-radius: 14px;
  color: var(--noir);
  transition: background 0.18s ease;
}
.mega-groupe a:hover, .mega-groupe a:focus-visible, .mega-groupe a[aria-current="page"] { background: var(--teinte-bleu); }
.mega-groupe a strong {
  display: block;
  font-family: var(--titre);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--noir);
}
.mega-groupe a:hover strong { color: var(--bleu); }
.mega-groupe a small { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.4; color: var(--texte-doux); }
.ico {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--bleu);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mega-groupe a .ico { margin-top: 1px; }
.mega-groupe .mega-villes a {
  display: block;
  padding: 8px 12px;
  font-family: var(--titre);
  font-size: 15.5px;
  font-weight: 600;
}
.mega-villes a:hover { color: var(--bleu); }
.mega-tout {
  align-self: flex-start;
  margin: 18px 0 0 12px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 15px;
  color: var(--bleu);
  text-decoration: underline;
  text-decoration-color: rgba(61, 125, 201, 0.35);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.mega-tout:hover { color: var(--indigo); text-decoration-color: var(--turquoise); }
.mega-carte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 12px 26px;
  border-radius: 20px;
  background:
    radial-gradient(260px 200px at 100% 0%, rgba(26, 202, 212, 0.42), transparent 70%),
    radial-gradient(220px 180px at 0% 100%, rgba(61, 125, 201, 0.45), transparent 70%),
    var(--indigo);
  color: #dedbf3;
}
.mega-carte-titre {
  margin: 0;
  font-family: var(--titre);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--blanc);
}
.mega-carte img { width: 100%; height: 150px; object-fit: cover; border-radius: 14px; margin-bottom: 8px; }
.mega-carte-titre, .mega-carte p, .mega-carte .btn { margin-left: 14px; margin-right: 14px; }
.mega-carte p { margin-top: 0; margin-bottom: 0; font-size: 16px; line-height: 1.5; }
.mega-carte .btn { align-self: flex-start; margin-top: auto; }

/* Bloc final, sans téléphone ni e-mail */
.final .contact-direct strong { display: block; color: var(--blanc); font-family: var(--titre); font-weight: 700; }

/* Tablette et mobile : le panneau prend le relais */
@media (max-width: 1024px) {
  .entete .navigation { display: none; }
}
@media (max-width: 767px) {
  :root { --h-entete: 70px; }
  html { scroll-padding-top: 76px; }
  .entete.compacte .conteneur { min-height: 62px; }
}
@media (max-width: 640px) {
  main > .heros:first-child { padding-top: calc(56px + var(--h-entete)); }
  main > .heros-editorial:first-child { padding-top: calc(56px + var(--h-entete)); }
  main > .heros-plein:first-child { padding-top: calc(72px + var(--h-entete)); }
  main > .heros-plein.heros-article-plein:first-child { padding-top: calc(64px + var(--h-entete)); }
}

/* Panneau mobile */
.panneau-menu {
  width: min(420px, 100vw);
  gap: 0;
  padding: 0 0 calc(20px + env(safe-area-inset-bottom));
}
.panneau-menu .tete {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 14px 20px;
  background: var(--blanc);
  box-shadow: 0 1px 0 rgba(38, 31, 119, 0.06);
}
.panneau-menu .tete img { height: 42px; width: auto; }
.panneau-menu .fermer {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
}
.panneau-menu .fermer svg { width: 22px; height: 22px; fill: none; stroke: var(--indigo); stroke-width: 2; stroke-linecap: round; }
.panneau-menu .liste-panneau { padding: 8px 12px; }
.panneau-menu .liste-panneau > li { box-shadow: inset 0 -1px 0 rgba(38, 31, 119, 0.07); }
.panneau-menu .liste-panneau > li:last-child { box-shadow: none; }
.panneau-menu .entree {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 10px;
  border: 0;
  background: none;
  font-family: var(--titre);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--noir);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}
.panneau-menu .entree[aria-current="page"], .panneau-menu .a-volet.actif > .entree { color: var(--bleu); }
.panneau-menu .entree .chevron {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}
.panneau-menu .deplie > .entree .chevron { transform: rotate(180deg); }
.panneau-menu .volet {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.36s ease, visibility 0.36s;
}
.panneau-menu .deplie > .volet { grid-template-rows: 1fr; visibility: visible; }
.panneau-menu .volet-interieur { overflow: hidden; min-height: 0; }
.panneau-menu .deplie .volet-interieur { padding-bottom: 14px; }
.panneau-menu .mega-colonnes { display: grid; grid-template-columns: 1fr; gap: 14px; }
.panneau-menu .mega-titre { margin: 4px 0 4px 10px; font-size: 13.5px; }
.panneau-menu .mega-groupe ul { gap: 0; }
.panneau-menu .mega-groupe li { opacity: 1; transform: none; }
.panneau-menu .mega-groupe a {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  font-size: 16px;
  box-shadow: none;
}
.panneau-menu .mega-groupe a .ico { width: 22px; height: 22px; margin: 0; }
.panneau-menu .mega-groupe a strong { font-size: 16px; font-weight: 600; }
.panneau-menu .mega-groupe a small { display: none; }
.panneau-menu .mega-groupe .mega-villes { grid-template-columns: 1fr 1fr; }
.panneau-menu .mega-groupe .mega-villes a { padding: 9px 10px; font-size: 15.5px; }
.panneau-menu .mega-tout { display: inline-block; margin: 14px 0 0 10px; }
.panneau-menu .pied-panneau { margin-top: auto; padding: 18px 20px 0; gap: 8px; }
.panneau-menu .rassure { margin: 0; text-align: center; font-size: 15px; color: var(--texte-doux); }

/* Version 16, correctifs du panneau mobile */
.panneau-menu { width: min(420px, 100%); }
.panneau-menu .liste-panneau a { font-family: var(--titre); box-shadow: none; letter-spacing: normal; }
.panneau-menu .liste-panneau .mega-groupe a { display: grid; }
.panneau-menu .liste-panneau .mega-groupe .mega-villes a { display: block; }
.panneau-menu .liste-panneau .mega-tout { padding: 0; font-size: 16px; font-weight: 700; color: var(--bleu); }
.panneau-menu .liste-panneau a.entree { font-size: 20px; padding: 18px 10px; letter-spacing: -0.02em; }
.entete.sur-sombre:not(.solide):not(.mega-actif) .actions .btn-secondaire.menu-mobile { background: rgba(255, 255, 255, 0.14); color: var(--blanc); }
.entete.sur-sombre:not(.solide):not(.mega-actif) .actions .btn-secondaire.menu-mobile:hover { background: rgba(255, 255, 255, 0.24); }

/* ==========================================================
   Version 18 : page de demande d'étude en quatre étapes,
   carte de démarrage en bas de chaque page, page de remerciement
   ========================================================== */

/* Section d'ouverture de la page de demande */
.demande {
  position: relative;
  overflow: hidden;
  padding: calc(56px + var(--h-entete)) 0 88px;
  background:
    radial-gradient(900px 520px at 90% 0%, rgba(26, 202, 212, 0.16), transparent 60%),
    radial-gradient(700px 480px at 0% 100%, rgba(61, 125, 201, 0.12), transparent 60%),
    var(--fond);
}
.demande .pastille { opacity: 0.22; }
.demande > .conteneur {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas: "intro parcours" "preuves parcours";
  grid-template-rows: auto 1fr;
  column-gap: 64px;
  row-gap: 36px;
  align-items: start;
}
.demande-intro { grid-area: intro; padding-top: 12px; }
.demande-intro h1 { margin-bottom: 18px; }
.demande-intro .accroche { font-size: 20px; line-height: 1.55; color: var(--texte-doux); text-align: left; max-width: 520px; }
.demande-intro .badge-avis { margin-bottom: 22px; }
.demande-preuves { grid-area: preuves; }
.parcours { grid-area: parcours; }

.demande-preuves-titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 17px;
  color: var(--indigo);
  margin: 0 0 14px;
}
.liste-cochee { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 14px; }
.liste-cochee li {
  position: relative;
  padding-left: 36px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--texte-doux);
}
.liste-cochee li strong { color: var(--noir); font-weight: 700; }
.liste-cochee li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--teinte-turquoise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23261f77' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.demande-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}
.demande-logos img { width: auto; opacity: 0.75; }

/* Carte du parcours */
.parcours {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: 0 30px 70px rgba(38, 31, 119, 0.14), 0 4px 14px rgba(38, 31, 119, 0.05);
  padding: 34px 38px 30px;
  color: var(--texte);
  scroll-margin-top: calc(var(--h-entete) + 16px);
}
.parcours-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 26px;
}
.parcours-compteur { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 15px; color: var(--bleu); }
.parcours-libre { margin: 0; font-size: 15px; color: var(--texte-doux); }
.parcours-jauge {
  flex-basis: 100%;
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--teinte-bleu);
  overflow: hidden;
}
.parcours-jauge span {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bleu), var(--turquoise));
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.parcours-pas { border: 0; margin: 0; padding: 0; min-width: 0; }
.parcours-pas + .parcours-pas { margin-top: 36px; }
.parcours-pas legend {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--noir);
}
.parcours-aide { margin: 0 0 22px; color: var(--texte-doux); font-size: 16px; }
.parcours-question { margin: 22px 0 12px; font-weight: 700; font-size: 16px; color: var(--indigo); }
.parcours-pas legend + .parcours-question { margin-top: 18px; }

/* Avec JavaScript : une étape à la fois */
.parcours.js .parcours-pas { display: none; }
.parcours.js .parcours-pas.actif { display: block; animation: parcours-entree 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.parcours.js .parcours-pas + .parcours-pas { margin-top: 0; }
@keyframes parcours-entree {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}
.parcours.js.recule .parcours-pas.actif { animation-name: parcours-retour; }
@keyframes parcours-retour {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}

/* Choix en cartes et en puces */
.choix { display: grid; gap: 12px; }
.choix input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choix-energie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choix-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 18px 20px;
  border-radius: var(--rayon-petit);
  background: var(--teinte-bleu);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.choix-carte:hover { background: var(--teinte-bleu-2); transform: translateY(-2px); }
.choix-ico {
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  fill: none;
  stroke: var(--bleu);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}
.choix-duo { display: inline-flex; gap: 2px; }
.choix-duo .choix-ico { width: 26px; }
.choix-titre { font-family: var(--titre); font-weight: 700; font-size: 18px; color: var(--noir); }
.choix-detail { font-size: 14.5px; line-height: 1.35; color: var(--texte-doux); }
.choix-carte:has(input:checked) {
  background: var(--indigo);
  box-shadow: 0 14px 30px rgba(38, 31, 119, 0.28);
}
.choix-carte:has(input:checked) .choix-titre { color: var(--blanc); }
.choix-carte:has(input:checked) .choix-detail { color: #cfcbe9; }
.choix-carte:has(input:checked) .choix-ico { stroke: var(--turquoise); }
.choix-carte:has(input:focus-visible),
.choix-puce:has(input:focus-visible) { outline: 3px solid rgba(61, 125, 201, 0.45); outline-offset: 2px; border-radius: var(--rayon-petit); }

.choix-puces { display: flex; flex-wrap: wrap; gap: 10px; }
.choix-puce { position: relative; cursor: pointer; }
.choix-puce span {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--teinte-bleu);
  font-weight: 600;
  font-size: 16px;
  color: var(--noir);
  transition: background 0.2s ease, color 0.2s ease;
}
.choix-puce:hover span { background: var(--teinte-bleu-2); }
.choix-puce input:checked + span { background: var(--indigo); color: var(--blanc); }
.choix-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choix-4 .choix-puce span { display: block; text-align: center; }

/* Dépôt de facture */
.depot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: var(--rayon-petit);
  background: var(--teinte-turquoise);
  cursor: pointer;
  transition: background 0.2s ease;
}
.depot:hover { background: #d3f5f7; }
.depot svg {
  flex: none;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--indigo);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.depot-texte { display: block; font-size: 16px; color: var(--noir); }
.depot-texte strong { font-weight: 700; }
.depot-texte small { display: block; margin-top: 2px; font-size: 14.5px; color: var(--texte-doux); }
.depot-facultatif, .facultatif { font-weight: 400; font-size: 14px; color: var(--texte-doux); }
.depot input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.depot:has(input:focus-visible) { outline: 3px solid rgba(61, 125, 201, 0.45); outline-offset: 2px; }
.depot-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.depot-liste:empty { display: none; }
.depot-liste li { padding: 6px 12px; border-radius: 999px; background: var(--teinte-bleu); font-size: 14px; color: var(--indigo); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot-liste li.trop { background: var(--teinte-orange); color: #9a4300; }

/* Coordonnées */
.parcours .champs { margin-top: 4px; }
.parcours .champ label { letter-spacing: 0; }
.parcours .champ textarea { min-height: 84px; }
.parcours .champ.invalide input { box-shadow: 0 0 0 2px rgba(243, 108, 9, 0.55); background: #fff6ef; }
.accord { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 15px; line-height: 1.45; color: var(--texte-doux); cursor: pointer; }
.accord input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--indigo); }
.accord.invalide span { color: #b54f00; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Navigation entre étapes */
.parcours-erreur { margin: 20px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--teinte-orange); color: #8a3c00; font-size: 15px; font-weight: 600; }
.parcours-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 28px; }
.parcours-actions .btn { margin: 0; }
.parcours-retour {
  margin-right: auto;
  padding: 12px 4px;
  border: 0;
  background: none;
  font-family: var(--corps);
  font-size: 16px;
  font-weight: 700;
  color: var(--texte-doux);
  cursor: pointer;
}
.parcours-retour:hover { color: var(--indigo); }
.parcours [hidden] { display: none; }
.parcours:not(.js) .parcours-retour, .parcours:not(.js) .parcours-suite { display: none; }
.parcours-envoi[disabled] { opacity: 0.7; cursor: progress; transform: none; }
.parcours .confidentialite { margin-top: 16px; font-size: 14px; color: var(--texte-doux); text-align: center; }

/* Carte de démarrage dans le bloc final des pages */
.carte-demande {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 34px 34px 28px;
  box-shadow: var(--ombre);
  color: var(--texte);
}
.carte-demande-titre { margin: 0 0 6px; font-family: var(--titre); font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: var(--noir); }
.carte-demande .note { margin: 0 0 20px; color: var(--texte-doux); font-size: 16px; }
.choix-liens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.choix-lien {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 16px;
  border-radius: var(--rayon-petit);
  background: var(--teinte-bleu);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 17px;
  color: var(--noir);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.choix-lien svg { width: 28px; height: 28px; fill: none; stroke: var(--bleu); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s ease; }
.choix-lien .choix-duo svg { width: 24px; }
.choix-lien:hover { background: var(--indigo); color: var(--blanc); transform: translateY(-2px); }
.choix-lien:hover svg { stroke: var(--turquoise); }
.carte-demande .btn { width: 100%; margin-top: 18px; }
.carte-demande .confidentialite { margin: 12px 0 0; font-size: 14px; color: var(--texte-doux); text-align: center; }
.carte-demande-avis { margin: 16px 0 0; padding-top: 16px; font-size: 15px; color: var(--texte-doux); text-align: center; background: linear-gradient(var(--teinte-bleu), var(--teinte-bleu)) top center / 60% 1px no-repeat; }
.carte-demande-avis .etoiles { color: var(--orange); letter-spacing: 1px; }
.carte-demande-avis strong { color: var(--indigo); }

/* Page de remerciement */
.demande-merci > .conteneur { display: block; }
.merci { max-width: 720px; margin: 0 auto; padding: 24px 0 8px; text-align: center; }
.merci-ico { display: block; width: 64px; height: 64px; margin: 0 auto 20px; fill: none; stroke: var(--turquoise); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.merci .accroche { font-size: 20px; line-height: 1.55; color: var(--texte-doux); margin: 0 auto 32px; }
.merci-etapes {
  counter-reset: merci;
  list-style: none;
  margin: 0 auto 36px;
  padding: 26px 30px;
  display: grid;
  gap: 16px;
  text-align: left;
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
}
.merci-etapes li { counter-increment: merci; position: relative; padding-left: 46px; font-size: 17px; line-height: 1.45; color: var(--texte-doux); }
.merci-etapes li strong { color: var(--noir); }
.merci-etapes li::before {
  content: counter(merci);
  position: absolute;
  left: 0;
  top: -2px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--indigo);
  color: var(--blanc);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 15px;
}
.merci .groupe-boutons { justify-content: center; }

@media (max-width: 1100px) {
  .demande > .conteneur { column-gap: 40px; }
  .parcours { padding: 30px 28px 26px; }
}
@media (max-width: 960px) {
  .demande { padding: calc(32px + var(--h-entete)) 0 64px; }
  .demande > .conteneur {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "parcours" "preuves";
    grid-template-rows: none;
    row-gap: 28px;
  }
  .demande-intro { padding-top: 0; }
  .demande-intro .accroche { max-width: none; }
}
@media (max-width: 640px) {
  .demande-intro .accroche { font-size: 18px; }
  .parcours { padding: 24px 18px 22px; border-radius: 18px; }
  .parcours-pas legend { font-size: 22px; }
  .parcours-libre { display: none; }
  .choix-energie { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .choix-carte { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px; }
  .choix-carte .choix-ico, .choix-carte .choix-duo { grid-row: 1 / 3; margin: 0; }
  .choix-puce span { padding: 11px 15px; font-size: 15px; }
  .choix-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parcours .champs { grid-template-columns: minmax(0, 1fr); }
  .parcours-actions .btn { flex: 1 1 auto; }
  .depot { padding: 16px; gap: 12px; }
  .carte-demande { padding: 26px 20px 22px; }
  .carte-demande-titre { font-size: 21px; }
  .choix-lien { align-items: center; text-align: center; padding: 16px 8px; font-size: 15.5px; }
  .merci-etapes { padding: 22px 20px; }
}
.carte-demande p, .parcours p { max-width: none; }

/* ---------- Version 20 : page contact ---------- */
.parcours-contact .choix-puces + .champs { margin-top: 26px; }
.parcours-contact .parcours-actions { justify-content: flex-end; }
.contact-bascule { color: var(--texte-doux); margin: 0 0 18px; max-width: none; }
.demande-contact .demande-preuves .btn { margin-bottom: 36px; }
@media (max-width: 640px) {
  .parcours-contact .parcours-actions .btn { width: 100%; }
  .demande-contact .demande-preuves .btn { width: 100%; }
}
.parcours .champ.invalide textarea { box-shadow: 0 0 0 2px rgba(243, 108, 9, 0.55); background: #fff6ef; }