/* Boréale Santé, système de design v2
   Palette limitée à 3 couleurs : encre marine, bleu électrique, corail (réservé aux actions). */

:root {
  --fond: #FFFFFF;
  --fond-doux: #EEF3FF;
  --encre: #101A3E;
  --encre-douce: #3E4870;
  --bleu: #2F52FF;
  --bleu-fonce: #1E3AC8;
  --marine: #0D1533;
  --corail: #FF5C39;
  --corail-fonce: #E84420;
  --trait: #DCE4F7;
  --font-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-texte: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

img { max-width: 100%; height: auto; }
a { color: var(--bleu); }

.conteneur { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------- Étiquette de section ---------- */
.etiquette {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bleu);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid rgba(47, 82, 255, 0.25);
  border-radius: 999px;
  padding: 9px 20px;
  box-shadow: 0 4px 14px rgba(16, 26, 62, 0.06);
}
.etiquette::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--corail);
}

/* ---------- Surlignage marqueur ---------- */
.surligne {
  background: linear-gradient(transparent 62%, rgba(255, 92, 57, 0.28) 62%, rgba(255, 92, 57, 0.28) 96%, transparent 96%);
  padding: 0 2px;
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.nav-int { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--encre);
  text-decoration: none;
  display: flex; align-items: center; gap: 9px;
}
.logo .aurore {
  width: 15px; height: 15px;
  border-radius: 50% 50% 50% 4px;
  background: var(--corail);
}
.nav-liens { display: flex; gap: 26px; align-items: center; }
.nav-liens a {
  color: var(--encre-douce);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.nav-liens a:hover { color: var(--bleu); }
.nav-liens a.bouton-bleu { color: #fff; }
.nav-liens a.bouton-bleu:hover { color: #fff; background: var(--bleu-fonce); }
.nav-liens a.bouton-corail { color: #fff; }
a:focus-visible, .bouton:focus-visible, button:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  text-decoration: none;
  border-radius: 12px;
  padding: 15px 28px;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.bouton:active { transform: translateY(1px); }
.bouton-corail {
  background: var(--corail); color: #fff;
  text-shadow: 0 1px 2px rgba(16, 26, 62, 0.25);
  box-shadow: 0 6px 20px rgba(255, 92, 57, 0.35);
}
.bouton-corail:hover { background: var(--corail-fonce); }
.bouton-bleu { background: var(--bleu); color: #fff; }
.bouton-bleu:hover { background: var(--bleu-fonce); }
.bouton-blanc { background: #fff; color: var(--encre); border: 2px solid var(--trait); }
.bouton-blanc:hover { border-color: var(--bleu); color: var(--bleu); }
.bouton-lien {
  background: none; color: var(--bleu);
  text-decoration: underline; text-underline-offset: 4px;
  padding: 15px 6px;
}

/* ---------- Héros ---------- */
.heros {
  background:
    radial-gradient(60% 90% at 85% 10%, rgba(47, 82, 255, 0.10), transparent 60%),
    var(--fond);
  padding: 76px 0 60px;
  text-align: center;
}
.heros h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 21ch;
  margin: 26px auto 22px;
}
.heros .sous-titre {
  font-size: 20px;
  color: var(--encre-douce);
  max-width: 52ch;
  margin: 0 auto 32px;
}
.heros-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; }
.heros-preuves {
  margin-top: 40px;
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.heros-preuves span {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--encre);
}
.heros-preuves svg { flex: none; }

/* ---------- Situations ---------- */
.situations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.situation {
  border-radius: 18px;
  padding: 30px 26px 26px;
  display: flex; flex-direction: column;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.situation:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16, 26, 62, 0.10); }
.situation.bleue, .situation.jaune, .situation.rose { background: var(--fond-doux); }
.situation .picto {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  background: #fff;
}
.situation h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.situation p { font-size: 15.5px; color: var(--encre-douce); margin-bottom: 20px; flex: 1; }
.situation .bouton { align-self: flex-start; font-size: 15px; padding: 12px 20px; }

/* ---------- Mini-test TDAH ---------- */
.bloc-test {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.bloc-test h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.1;
  margin: 14px 0 14px;
}
.bloc-test .texte p { color: var(--encre-douce); font-size: 18px; margin-bottom: 12px; }
.mini-eval {
  background: #fff;
  border: 2px solid var(--encre);
  border-radius: 20px;
  box-shadow: 8px 8px 0 var(--bleu);
  overflow: hidden;
}
.mini-eval-tete {
  background: var(--bleu);
  color: #fff;
  padding: 16px 22px;
  display: flex; justify-content: space-between; align-items: center;
}
.mini-eval-tete .titre { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.mini-eval-tete .compte { font-size: 13px; opacity: 0.8; font-weight: 600; }
.mini-eval .barre { height: 5px; background: var(--fond-doux); }
.mini-eval .barre > div { height: 100%; width: 0%; background: var(--corail); transition: width 0.3s ease; }
.mini-eval-corps { padding: 24px 22px 22px; }
.mini-eval-corps .question {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 16px;
  min-height: 3.6em;
}
.mini-eval-reponses { display: grid; gap: 10px; }
.mini-eval-reponses button {
  font-family: var(--font-texte);
  font-weight: 600;
  font-size: 15.5px;
  text-align: left;
  padding: 13px 16px;
  border-radius: 11px;
  border: 2px solid var(--trait);
  background: #fff;
  color: var(--encre);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.mini-eval-reponses button:hover { border-color: var(--bleu); background: var(--fond-doux); }
.mini-eval-pied { padding: 0 22px 20px; font-size: 13px; color: var(--encre-douce); }
.mini-eval-resultat { padding: 24px 22px 24px; display: none; }
.mini-eval-resultat h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 10px;
}
.mini-eval-resultat p { color: var(--encre-douce); font-size: 15.5px; margin-bottom: 18px; }

/* ---------- Sections ---------- */
section { padding: 84px 0; }
section.douce {
  background: var(--fond-doux);
  border-radius: 48px;
  width: calc(100% - 32px);
  max-width: 1400px;
  margin: 8px auto;
}
.section-tete { max-width: 660px; margin: 0 auto 46px; text-align: center; }
.section-tete h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 16px 0 14px;
}
.section-tete p { color: var(--encre-douce); font-size: 18px; }

/* ---------- Parcours (v2 : icones + fleches de liaison) ---------- */
.parcours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.parcours-etape {
  background: #fff;
  border-radius: 18px;
  padding: 30px 26px;
  border: 1.5px solid var(--trait);
  position: relative;
  text-align: center;
  transition: border-color 0.15s ease;
}
.parcours-etape:hover { border-color: rgba(47, 82, 255, 0.45); }
.parcours-etape .icone-etape {
  width: 62px; height: 62px;
  border-radius: 18px;
  background: var(--fond-doux);
  color: var(--bleu);
  display: grid; place-items: center;
  margin: 0 auto 16px;
}
.parcours-etape .icone-etape svg { width: 30px; height: 30px; }
.parcours-etape .numero {
  position: absolute;
  top: 18px; left: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  color: var(--bleu);
  background: var(--fond-doux);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0;
}
.parcours-etape h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 8px;
}
.parcours-etape p { font-size: 15px; color: var(--encre-douce); }

/* Fleche de liaison entre les etapes (::before, ::after est pris par la lueur) */
.parcours-etape:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%; right: -24px;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232F52FF" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>') center / 16px no-repeat;
  border: 1.5px solid var(--trait);
  box-shadow: 0 4px 12px rgba(16, 26, 62, 0.10);
  z-index: 2;
}
@media (max-width: 920px) {
  .parcours-etape:not(:last-child)::before {
    top: auto; bottom: -26px; right: 50%;
    transform: translateX(50%) rotate(90deg);
  }
}

/* ---------- Prix ---------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service {
  background: #fff;
  border: 2px solid var(--trait);
  border-radius: 18px;
  padding: 30px 28px;
  display: flex; flex-direction: column;
}
.service.vedette { border-color: var(--corail); position: relative; }
.service.vedette::before {
  content: "Le plus demandé";
  position: absolute; top: -14px; left: 26px;
  background: var(--corail); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  border-radius: 999px;
  padding: 4px 14px;
}
.service h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  margin-bottom: 10px;
}
.service p { font-size: 15.5px; color: var(--encre-douce); margin-bottom: 18px; }
.service ul { list-style: none; margin: 0 0 24px; flex: 1; }
.service li { font-size: 15px; padding: 7px 0 7px 28px; position: relative; }
.service li::before {
  content: "";
  position: absolute; left: 3px; top: 14px;
  width: 12px; height: 7px;
  border-left: 3px solid var(--bleu);
  border-bottom: 3px solid var(--bleu);
  transform: rotate(-45deg);
}
.service .prix {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  margin-bottom: 16px;
}
.service .prix small { font-family: var(--font-texte); font-weight: 500; font-size: 14px; color: var(--encre-douce); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 4px 22px;
  margin-bottom: 12px;
}
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  padding: 16px 34px 16px 0;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 2px; top: 12px;
  font-size: 24px;
  color: var(--corail);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 18px; color: var(--encre-douce); font-size: 15.5px; }

/* ---------- Appel final ---------- */
.appel {
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
  color: #fff;
  border-radius: 24px;
  padding: 64px 56px;
  text-align: center;
  background-image:
    radial-gradient(50% 80% at 15% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    radial-gradient(40% 70% at 90% 100%, rgba(255, 92, 57, 0.4), transparent 60%),
    linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
}
.appel h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.08;
  max-width: 22ch;
  margin: 0 auto 16px;
}
.appel p { color: rgba(255, 255, 255, 0.94); font-size: 18px; max-width: 48ch; margin: 0 auto 30px; }

/* ---------- Pied ---------- */
.pied { border-top: 1px solid var(--trait); padding: 44px 0 40px; margin-top: 76px; font-size: 14px; color: var(--encre-douce); }
.pied-int { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.pied-liens { display: flex; gap: 24px; flex-wrap: wrap; }
.pied a { color: var(--encre-douce); text-decoration: none; }
.pied a:hover { color: var(--bleu); text-decoration: underline; }
.pied .legal { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--trait); font-size: 12.5px; color: #8A93B5; max-width: 95ch; }

/* ---------- Pages document (conditions, confidentialité) ---------- */
.document { max-width: 760px; margin: 0 auto; padding: 60px 24px 80px; }
.document h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 44px);
  margin: 18px 0 10px;
}
.document .maj { font-size: 13.5px; color: var(--encre-douce); margin-bottom: 34px; font-weight: 600; }
.document h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  margin: 40px 0 12px;
}
.document p, .document li { color: var(--encre-douce); margin-bottom: 12px; font-size: 16px; }
.document ul { padding-left: 22px; margin-bottom: 12px; }
.document .encadre {
  background: var(--fond-doux);
  border-left: 4px solid var(--bleu);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  margin: 20px 0;
}
.document .encadre p { margin: 0; color: var(--encre); }

/* ---------- Apparitions ---------- */
.apparait { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.apparait.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .apparait { opacity: 1; transform: none; transition: none; }
  .bouton, .situation, .mini-eval .barre > div { transition: none; }
}

/* ---------- Réactif ---------- */
@media (max-width: 920px) {
  .situations { grid-template-columns: 1fr; }
  .bloc-test { grid-template-columns: 1fr; gap: 36px; }
  .parcours { grid-template-columns: 1fr 1fr; }
  .services { grid-template-columns: 1fr; }
  .appel { padding: 46px 28px; }
}
@media (max-width: 620px) {
  .nav-liens { display: none; }
  .parcours { grid-template-columns: 1fr; }
  .heros { padding: 56px 0 48px; }
}

/* ---------- Groupes de tarifs ---------- */
.services.deux { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin: 0 auto; }
.service .categorie {
  display: inline-block;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bleu);
  background: var(--fond-doux);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}
.service.avenir {
  border-style: dashed;
  background: transparent;
  justify-content: center;
  text-align: center;
}
.service.avenir h3 { color: var(--encre-douce); }

/* ---------- Page TDAH ---------- */
.parcours.cinq { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 920px) { .parcours.cinq { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .parcours.cinq { grid-template-columns: 1fr; } }
.tableau-cadre {
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(16, 26, 62, 0.08);
}
.tableau { width: 100%; border-collapse: collapse; min-width: 680px; background: #fff; }
.tableau th, .tableau td { padding: 17px 24px; text-align: left; font-size: 15.5px; border-bottom: 1px solid var(--trait); }
.tableau thead th { font-weight: 800; font-size: 15px; background: var(--fond-doux); }
.tableau td:first-child { font-weight: 700; width: 18%; }
.tableau td:nth-child(2) { color: var(--encre-douce); }

/* La colonne du parcours habituel : grisee, marquee d'un x */
.tableau td:nth-child(2)::before {
  content: "\2715";
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #EDEFF5;
  color: #9AA3BF;
  font-size: 10px; font-weight: 700;
  margin-right: 12px;
  vertical-align: -4px;
}

/* La colonne Medovia : grosse separation, fond teinte, coche bleue */
.tableau th:last-child, .tableau td:last-child {
  border-left: 3px solid var(--bleu);
  background: rgba(47, 82, 255, 0.05);
  width: 34%;
}
.tableau thead th:last-child {
  background: var(--bleu);
  color: #fff;
  font-size: 16px;
}
.tableau td:last-child { font-weight: 700; }
.tableau td:last-child::before {
  content: "\2713";
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bleu);
  color: #fff;
  font-size: 11px; font-weight: 700;
  margin-right: 12px;
  vertical-align: -4px;
}
.tableau tbody tr:last-child td { border-bottom: none; }

/* ---------- Finition v3 : vie et lumière ---------- */

/* Bouton principal qui respire (halo pulsé) */
@keyframes pulsation-corail {
  0%, 100% { box-shadow: 0 6px 20px rgba(255, 92, 57, 0.35); }
  50% { box-shadow: 0 6px 30px rgba(255, 92, 57, 0.65), 0 0 0 6px rgba(255, 92, 57, 0.12); }
}
.bouton-corail { animation: pulsation-corail 2.4s ease-in-out infinite; }
.bouton-corail:hover { animation-play-state: paused; }

/* Étincelles décoratives */
.scintille {
  position: absolute !important;
  display: block;
  width: 14px; height: 14px;
  pointer-events: none;
  color: var(--bleu);
  opacity: 0;
  animation: scintillement 3.2s ease-in-out infinite;
}
.scintille.corail { color: var(--corail); }
.scintille svg { width: 100%; height: 100%; display: block; }
@keyframes scintillement {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1) rotate(45deg); }
}
.heros { position: relative; overflow: hidden; }
.appel { position: relative; overflow: hidden; }
.appel .scintille { color: rgba(255, 255, 255, 0.9); }

/* Paliers de consultation (page tarifs) */
.paliers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.palier {
  background: #fff;
  border: 2px solid var(--trait);
  border-radius: 18px;
  padding: 30px 28px;
  display: flex; flex-direction: column;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.palier:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16, 26, 62, 0.10); }
.palier .niveau {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 12px;
}
.palier h3 { font-weight: 800; font-size: 23px; margin-bottom: 8px; }
.palier .duree { color: var(--encre-douce); font-size: 14.5px; margin-bottom: 14px; }
.palier .prix { font-weight: 800; font-size: 38px; margin-bottom: 16px; }
.palier ul { list-style: none; margin: 0 0 24px; flex: 1; text-align: left; }
.palier li { font-size: 15px; padding: 7px 0 7px 28px; position: relative; }
.palier li::before {
  content: "";
  position: absolute; left: 3px; top: 14px;
  width: 12px; height: 7px;
  border-left: 3px solid var(--bleu);
  border-bottom: 3px solid var(--bleu);
  transform: rotate(-45deg);
}
.palier.recommande {
  border-color: var(--corail);
  position: relative;
  box-shadow: 0 16px 40px rgba(255, 92, 57, 0.12);
}
.palier.recommande::before {
  content: "Le choix le plus fréquent";
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--corail); color: #fff;
  font-weight: 700; font-size: 13px;
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
}
@media (max-width: 920px) { .paliers { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .bouton-corail { animation: none; }
  .scintille { animation: none; opacity: 0.5; }
}

/* ---------- Micro-interactions souris (v4) ---------- */

/* Lueur qui suit la souris sur les cartes */
.service, .palier, .situation, .parcours-etape, .mini-eval, .faq details {
  position: relative;
}
.service::after, .palier::after, .situation::after, .parcours-etape::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(47, 82, 255, 0.14), transparent 65%);
}
.service:hover::after, .palier:hover::after, .situation:hover::after, .parcours-etape:hover::after {
  opacity: 1;
}
.palier.recommande::after {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 92, 57, 0.16), transparent 65%);
}

/* Bordure qui s'allume vers la souris */
.service:hover, .parcours-etape:hover { border-color: rgba(47, 82, 255, 0.45); }

/* Inclinaison 3D subtile (posee par le JS) */
.service, .palier, .situation { will-change: transform; transform-style: preserve-3d; }

/* Boutons magnetiques : le JS pose --tx / --ty */
.bouton-corail, .bouton-bleu {
  transform: translate(var(--tx, 0), var(--ty, 0));
  transition: transform 0.18s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.bouton-corail:active, .bouton-bleu:active { transform: translate(var(--tx, 0), calc(var(--ty, 0) + 1px)); }

/* Halo global qui suit la souris dans les heros et l'appel */
.lueur-souris {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(47, 82, 255, 0.10), transparent 60%);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 0;
  z-index: 0;
}
.heros:hover .lueur-souris, .appel:hover .lueur-souris { opacity: 1; }
.appel .lueur-souris { background: radial-gradient(circle, rgba(255, 92, 57, 0.16), transparent 60%); }
.heros > .conteneur, .appel > *:not(.scintille):not(.lueur-souris) { position: relative; z-index: 1; }

/* Tableau comparatif vivant */
.tableau tbody tr { transition: background 0.15s ease; }
.tableau tbody tr:hover td { background: var(--fond-doux); }
.tableau tbody tr:hover td:last-child { background: rgba(47, 82, 255, 0.10); }

.tableau td:last-child { transition: color 0.15s ease; }

/* FAQ : le + tourne a l'ouverture */
.faq summary::after { transition: transform 0.25s ease, color 0.15s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.faq details:hover { border-color: rgba(47, 82, 255, 0.45); box-shadow: 0 6px 18px rgba(16, 26, 62, 0.06); }

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .service::after, .palier::after, .situation::after, .parcours-etape::after { display: none; }
  .lueur-souris { display: none; }
  .bouton-corail, .bouton-bleu { transform: none; }
}

/* ---------- Questionnaire QCM (v2, contraste et relief) ---------- */
.page-quiz {
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(47, 82, 255, 0.08), transparent 70%),
    linear-gradient(180deg, #EEF3FF 0%, #fff 260px);
  background-color: #EEF3FF;
  min-height: 100vh;
}
.page-quiz .nav { background: rgba(255, 255, 255, 0.88); }
.quiz-enveloppe { max-width: 780px; margin: 0 auto; padding: 36px 24px 130px; }

/* Barre de progression, posee sur une carte */
.quiz-progres {
  position: sticky; top: 76px; z-index: 40;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 16px;
  padding: 16px 20px 14px;
  box-shadow: 0 10px 30px rgba(16, 26, 62, 0.08);
}
.quiz-progres .barre-fond { height: 10px; background: var(--fond-doux); border-radius: 999px; overflow: hidden; }
.quiz-progres .barre-avancee {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--bleu), var(--corail));
  border-radius: 999px;
  transition: width 0.4s ease;
}
.quiz-progres .etat {
  font-size: 13.5px; font-weight: 700; color: var(--encre);
  margin-top: 10px; display: flex; justify-content: space-between;
}
.quiz-progres .etat span:last-child { color: var(--bleu); }

/* Etape */
.quiz-etape { display: none; }
.quiz-etape.active { display: block; animation: quiz-entree 0.35s ease; }
@keyframes quiz-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.quiz-etape h2 {
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.12;
  margin: 30px 0 10px;
}
.quiz-etape .consigne {
  color: var(--encre-douce);
  font-size: 16.5px;
  margin-bottom: 28px;
  max-width: 56ch;
}
.quiz-etape h3.groupe {
  font-weight: 800; font-size: 17px;
  margin: 30px 0 14px;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--bleu);
}
.quiz-etape h3.groupe::before {
  content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--corail);
}

/* Cartes de question : blanches, en relief sur le fond doux */
.quiz-question {
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(16, 26, 62, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  position: relative;
}
.quiz-question:hover { box-shadow: 0 12px 30px rgba(16, 26, 62, 0.10); transform: translateY(-1px); }
.quiz-question.repondue { border-color: rgba(47, 82, 255, 0.45); }
.quiz-question.repondue::after {
  content: "\2713";
  position: absolute; top: 14px; right: 16px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bleu); color: #fff;
  font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
}
.quiz-question.manquante { border-color: var(--corail); box-shadow: 0 0 0 4px rgba(255, 92, 57, 0.14); }
.quiz-question .numero-q {
  display: inline-block;
  font-size: 12px; font-weight: 800;
  color: var(--bleu);
  background: var(--fond-doux);
  border-radius: 7px;
  padding: 3px 9px;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.quiz-question .enonce { font-weight: 600; font-size: 16px; line-height: 1.45; margin-bottom: 14px; padding-right: 30px; }

/* Pastilles de reponse */
.quiz-options { display: flex; flex-wrap: wrap; gap: 9px; }
.quiz-options button {
  font-family: var(--font-texte);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--trait);
  background: var(--fond-doux);
  color: var(--encre);
  cursor: pointer;
  transition: all 0.13s ease;
}
.quiz-options button:hover {
  border-color: var(--bleu); color: var(--bleu);
  background: #fff;
  transform: translateY(-1px);
}
.quiz-options button.choisi {
  background: var(--bleu); border-color: var(--bleu); color: #fff;
  box-shadow: 0 4px 14px rgba(47, 82, 255, 0.35);
}

/* Identite */
.quiz-identite {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(16, 26, 62, 0.06);
  margin-bottom: 22px;
}
.quiz-identite label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 7px; }
.quiz-identite input {
  width: 100%;
  font-family: var(--font-texte);
  font-size: 15.5px;
  padding: 13px 15px;
  border: 1.5px solid var(--trait);
  border-radius: 11px;
  background: var(--fond-doux);
  transition: border-color 0.13s ease, background 0.13s ease;
}
.quiz-identite input:focus { outline: none; border-color: var(--bleu); background: #fff; box-shadow: 0 0 0 3px rgba(47, 82, 255, 0.15); }

/* Pied flottant */
.quiz-pied {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 45;
  width: min(740px, calc(100% - 32px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--trait);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(16, 26, 62, 0.16);
  padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.quiz-pied .note { font-size: 12.5px; color: var(--encre-douce); text-align: center; }

/* Resultats */
.quiz-resultats { padding-top: 10px; }
.quiz-resultats .score-carte {
  background: #fff;
  border: 1.5px solid var(--trait);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  box-shadow: 0 6px 20px rgba(16, 26, 62, 0.06);
}
.quiz-resultats .score-carte strong { font-size: 15.5px; }
.quiz-resultats .score-carte span {
  font-weight: 800; font-size: 17px;
  color: var(--bleu);
  background: var(--fond-doux);
  border-radius: 999px;
  padding: 7px 16px;
  white-space: nowrap;
}
.note-aide {
  background: #fff;
  border: 1.5px solid rgba(47, 82, 255, 0.35);
  border-left: 4px solid var(--bleu);
  border-radius: 12px;
  padding: 15px 18px;
  margin: 18px 0;
  font-size: 14.5px;
  color: var(--encre-douce);
  box-shadow: 0 6px 20px rgba(16, 26, 62, 0.05);
}
@media (max-width: 620px) {
  .quiz-identite { grid-template-columns: 1fr; }
  .quiz-pied .note { display: none; }
  .quiz-progres { top: 66px; }
}

/* ---------- Héros avec photo ---------- */
.heros-duo {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  text-align: left;
}
.heros-duo h1 { margin-left: 0; margin-right: 0; max-width: 16ch; }
.heros-duo .sous-titre { margin-left: 0; max-width: 46ch; }
.heros-duo .heros-actions, .heros-duo .heros-preuves { justify-content: flex-start; }
.heros-visuel { position: relative; }
.heros-visuel img {
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(16, 26, 62, 0.18);
  display: block;
}
.heros-visuel .badge-photo {
  position: absolute;
  left: 18px; bottom: 18px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  display: flex; align-items: center; gap: 9px;
  box-shadow: 0 8px 24px rgba(16, 26, 62, 0.16);
}
.heros-visuel .badge-photo .point {
  width: 9px; height: 9px; border-radius: 50%;
  background: #22B24C;
  animation: pulsation-point 1.6s ease-in-out infinite;
}
@keyframes pulsation-point {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 178, 76, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(34, 178, 76, 0); }
}
.section-photo { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.section-photo img {
  width: 100%; border-radius: 20px;
  box-shadow: 0 20px 50px rgba(16, 26, 62, 0.14);
  display: block;
}
@media (max-width: 920px) {
  .heros-duo { grid-template-columns: 1fr; text-align: center; }
  .heros-duo h1, .heros-duo .sous-titre { margin-left: auto; margin-right: auto; }
  .heros-duo .heros-actions, .heros-duo .heros-preuves { justify-content: center; }
  .section-photo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .heros-visuel .badge-photo .point { animation: none; } }

/* ---------- Photos des situations ---------- */
.situation { overflow: hidden; padding-top: 0; }
.situation .photo-situation {
  margin: 0 -26px 20px;
  height: 190px;
  overflow: hidden;
}
.situation .photo-situation img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  transition: transform 0.4s ease;
}
.situation:hover .photo-situation img { transform: scale(1.05); }
.photo-douce {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(16, 26, 62, 0.14);
  display: block;
  margin: 28px auto 0;
  max-width: 520px;
}

/* ---------- Raffinements v5 (mouvement doux, nav vivante, menu mobile) ---------- */

/* Titre du heros : mots qui se revelent en douceur */
.mot-anime {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
  animation: mot-entree 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes mot-entree {
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* Titres de section : flottent a l'arrivee */
.section-tete h2 { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.section-tete.visible h2, .visible .section-tete h2, .section-tete h2.flotte { opacity: 1; transform: none; }

/* Nav qui reagit au defilement */
.nav { transition: box-shadow 0.25s ease, background 0.25s ease; }
.nav.defilee { box-shadow: 0 8px 28px rgba(16, 26, 62, 0.10); background: rgba(255, 255, 255, 0.98); }

/* Menu mobile */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  border: 1.5px solid var(--trait);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  place-items: center;
  gap: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.nav-burger span { display: block; width: 20px; height: 2.5px; background: var(--encre); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-mobile {
  display: none;
  background: #fff;
  border-top: 1px solid var(--trait);
  padding: 10px 24px 18px;
}
.nav-mobile.ouvert { display: block; }
.nav-mobile a {
  display: block;
  padding: 13px 4px;
  font-weight: 600;
  font-size: 16px;
  color: var(--encre);
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
}
.nav-mobile a:last-child { border-bottom: none; }
@media (max-width: 620px) {
  .nav-burger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .mot-anime { animation: none; opacity: 1; filter: none; transform: none; }
  .section-tete h2 { opacity: 1; transform: none; transition: none; }
}

/* ---------- Ligne de réassurance (courte, visible) ---------- */
.note-reassurance {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--encre);
  margin-top: 16px;
}
.note-reassurance::before {
  content: "\2713";
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(47, 82, 255, 0.12);
  color: var(--bleu);
  font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
}

/* ---------- Page réservation ---------- */
.resa-duo {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 24px 90px;
}
.resa-etapes { list-style: none; margin: 26px 0 0; }
.resa-etapes li {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--encre-douce);
}
.resa-etapes .rond {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--trait);
  background: #fff;
  color: var(--encre-douce);
  font-size: 13px; font-weight: 800;
  display: grid; place-items: center;
}
.resa-etapes li.active { color: var(--encre); }
.resa-etapes li.active .rond { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.carte-reservation {
  background: #fff;
  border: 1.5px solid var(--trait);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(16, 26, 62, 0.12);
  overflow: hidden;
}
.carte-reservation .tete {
  background: var(--bleu);
  color: #fff;
  padding: 18px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.carte-reservation .tete .titre { font-weight: 800; font-size: 16px; }
.carte-reservation .tete .etape { font-size: 13px; font-weight: 600; opacity: 0.9; }
.choix-service {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  padding: 18px 22px;
  border-bottom: 1px solid var(--trait);
  background: #fff;
  text-decoration: none;
  transition: background 0.12s ease;
}
.choix-service:hover { background: var(--fond-doux); box-shadow: inset 3px 0 0 var(--bleu); }
.choix-service .infos { flex: 1; }
.choix-service .nom { font-weight: 700; font-size: 16px; color: var(--encre); }
.choix-service .detail { font-size: 13.5px; color: var(--encre-douce); margin-top: 2px; }
.choix-service .prix-s { font-weight: 800; font-size: 17px; color: var(--bleu); white-space: nowrap; }
.carte-reservation .pied-carte { padding: 16px 22px; background: var(--fond-doux); }
.carte-reservation .note-demo {
  font-size: 13px;
  color: var(--encre-douce);
  text-align: center;
}
@media (max-width: 920px) {
  .resa-duo { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; }
}

/* ---------- Liste compacte (documents) ---------- */
.liste-simple {
  background: #fff;
  border: 1.5px solid var(--trait);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(16, 26, 62, 0.07);
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
}
.liste-simple .ligne {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--trait);
}
.liste-simple .ligne:last-child { border-bottom: none; }
.liste-simple .infos { flex: 1; }
.liste-simple .nom { font-weight: 700; font-size: 16.5px; color: var(--encre); }
.liste-simple .detail { font-size: 14px; color: var(--encre-douce); margin-top: 2px; }
.liste-simple .prix-l {
  font-weight: 800; font-size: 18px;
  color: var(--bleu);
  background: var(--fond-doux);
  border-radius: 999px;
  padding: 7px 16px;
  white-space: nowrap;
}
.note-sous-liste {
  text-align: center;
  font-size: 14px;
  color: var(--encre-douce);
  max-width: 62ch;
  margin: 18px auto 0;
}

/* ---------- Milo, la mascotte ---------- */
.logo .milo {
  width: 27px; height: 27px;
  color: var(--corail);
  flex: none;
}
.logo:hover .milo { animation: milo-salut 0.5s ease; }
@keyframes milo-salut {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(-8deg); }
  70% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) { .logo:hover .milo { animation: none; } }