/* Couleurs et polices d'Aquirus Visual (aquirusvisual.com) */
:root {
  --encre: #0d1721;
  --encre-2: #15222f;
  --bleu: #1f689d;
  --bleu-vif: #2f86c4;
  --bleu-pale: #e6f0f8;
  --fond: #f6f9fb;
  --blanc: #ffffff;
  --gris: #4d5660;
  --ligne: #d3d8de;
  --rouge: #b42318;
  --titre: "Sora", system-ui, sans-serif;
  --texte: "Manrope", system-ui, sans-serif;
  --rayon: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.6 var(--texte); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--titre); line-height: 1.12; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); max-width: 22ch; margin: 0.4rem 0 2rem; }
h3 { font-size: 1.1rem; }
p { margin: 0; }
.enveloppe { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* Barre du haut */
.barre-haut { position: absolute; inset: 0 0 auto; z-index: 5; }
.barre-in { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 1rem/1 var(--titre); letter-spacing: 0.22em; }
.logo img { width: 42px; filter: brightness(0) invert(1); }
.places { display: inline-flex; align-items: center; gap: 8px; color: #dbe6ef; font-size: 0.85rem; font-weight: 600; padding: 8px 14px; border: 1px solid rgba(255,255,255,0.18); border-radius: 99px; background: rgba(255,255,255,0.05); }
.places i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,0.6); animation: pouls 1.8s infinite; }
@keyframes pouls { 70% { box-shadow: 0 0 0 9px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }

/* Hero */
.hero { position: relative; overflow: hidden; color: #fff; padding: 110px 0 72px;
  background: radial-gradient(900px 500px at 85% 10%, rgba(47,134,196,0.35), transparent 60%),
              radial-gradient(700px 500px at 0% 100%, rgba(31,104,157,0.25), transparent 60%), var(--encre); }
.ruban-deco { position: absolute; top: 74px; right: -140px; width: 620px; height: 46px; transform: rotate(-8deg); opacity: 0.16;
  background: repeating-linear-gradient(90deg, var(--bleu-vif) 0 38px, #3b93d1 38px 40px); border-radius: 3px; }
.hero-grille { position: relative; display: grid; gap: 28px 56px; grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas: "titre quiz" "video quiz"; align-items: start; }
.hero-titre { grid-area: titre; }
.hero-video { grid-area: video; }
.hero-quiz { grid-area: quiz; position: sticky; top: 24px; }
.pastille { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9cc8ea;
  padding: 7px 14px; border-radius: 99px; background: rgba(47,134,196,0.16); border: 1px solid rgba(47,134,196,0.4); }
h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); margin: 18px 0 18px; }
h1 em { font-style: normal; color: #8fc3ea; }
.hero-p { color: #c3cfda; font-size: 1.08rem; max-width: 52ch; }

.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--rayon); overflow: hidden; background: var(--encre-2); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-vide { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; color: #9fb2c3; font-size: 0.9rem;
  background: linear-gradient(135deg, #16283a, #0f1b27); }
.video-vide span { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--bleu); color: #fff; font-size: 1.4rem; padding-left: 4px; }
.garanties { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.garanties li { font-size: 0.85rem; color: #c3cfda; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.garanties b { display: block; font: 700 1.4rem/1.1 var(--titre); color: #fff; }

/* Questionnaire */
.quiz { background: var(--blanc); color: var(--encre); border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.65); overflow: hidden; }
.quiz-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px 14px; }
.quiz-tete strong { display: block; font: 700 1.05rem/1.2 var(--titre); }
.quiz-tete span { font-size: 0.8rem; color: var(--gris); }
.compteur { font-weight: 700; color: var(--bleu) !important; background: var(--bleu-pale); padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.progression { height: 5px; background: #edf1f5; }
.barre { height: 100%; width: 0; background: linear-gradient(90deg, var(--bleu), var(--bleu-vif)); transition: width 0.4s ease; }
#form { padding: 22px; }
.etapes { min-height: 300px; }
.etape { animation: entre 0.35s ease both; }
@keyframes entre { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.question { font: 700 1.2rem/1.3 var(--titre); margin-bottom: 6px; }
.sous-question { color: var(--gris); font-size: 0.9rem; margin-bottom: 4px; }
.options { display: grid; gap: 10px; margin-top: 16px; }
.options.grille { grid-template-columns: 1fr 1fr; }
.option { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: 600 0.98rem/1.3 var(--texte); color: var(--encre);
  padding: 14px 14px; border: 1.5px solid var(--ligne); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s; }
.option kbd { flex: none; width: 26px; height: 26px; display: grid; place-items: center; font: 700 0.75rem var(--texte); color: var(--bleu); border: 1.5px solid #c9dbea; border-radius: 7px; background: var(--bleu-pale); }
.option:hover { border-color: var(--bleu-vif); background: #f5f9fd; }
.option:active { transform: scale(0.99); }
.option.choisie { border-color: var(--bleu); background: var(--bleu-pale); }
.option.choisie kbd { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.bravo { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #e9f8ef; color: #17633a; font-weight: 600; font-size: 0.92rem; animation: entre 0.3s ease both; }
.champ { display: block; margin-top: 14px; }
.champ span { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
.champ input { width: 100%; font: 500 1rem var(--texte); padding: 13px 14px; border: 1.5px solid var(--ligne); border-radius: 12px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.champ input:focus { border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(31,104,157,0.12); }
.consentement { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 0.85rem; color: var(--gris); }
.consentement input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--bleu); flex: none; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.retour { background: none; border: 0; color: var(--gris); font: 600 0.9rem var(--texte); cursor: pointer; padding: 8px 0; }
.retour:hover { color: var(--encre); }
.suivant { margin-left: auto; font: 700 1rem var(--texte); color: #fff; background: var(--bleu); border: 0; border-radius: 12px; padding: 14px 22px; cursor: pointer; transition: background 0.15s; }
.suivant:hover { background: #185580; }
.suivant:disabled { opacity: 0.6; cursor: wait; }
.erreur { color: var(--rouge); font-size: 0.88rem; font-weight: 600; min-height: 1.2em; margin-top: 10px; }
.pot-de-miel { position: absolute; left: -9999px; }
.securite { margin-top: 12px; font-size: 0.78rem; color: var(--gris); text-align: center; }

/* Bande */
.bande { background: var(--bleu); color: #fff; overflow: hidden; }
.bande-in { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; padding: 16px 0; font-weight: 700; font-size: 0.9rem; }
.bande i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); }

/* Sections */
.section { padding: 88px 0 0; }
.surtitre { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bleu); }
.surtitre.clair { color: #8fc3ea; }
.tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tuile { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 24px; transition: transform 0.2s, box-shadow 0.2s; }
.tuile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(13,23,33,0.35); }
.tuile .num { font: 700 0.85rem var(--titre); color: var(--bleu); }
.tuile h3 { margin: 10px 0 8px; }
.tuile p { color: var(--gris); font-size: 0.95rem; }
.tuile p strong { color: var(--encre); }
.bouton-vsl { display: block; margin-top: 16px; text-align: center; }
.tuile small { display: block; margin-top: 8px; font-size: 0.78rem; color: #8a939c; }
.intro { max-width: 70ch; color: var(--gris); margin: -6px 0 24px; }

.section-sombre { margin-top: 88px; padding: 80px 0; color: #fff; background: radial-gradient(700px 400px at 100% 0%, rgba(47,134,196,0.25), transparent 60%), var(--encre); }
.frise { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: x; }
.frise li { padding: 26px; border-radius: var(--rayon); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
.frise b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bleu); font: 700 1.1rem var(--titre); margin-bottom: 16px; }
.frise h3 { margin-bottom: 8px; }
.frise p { color: #b8c6d3; font-size: 0.95rem; }

.tableau-defile { overflow-x: auto; border-radius: var(--rayon); border: 1px solid var(--ligne); background: #fff; }
.compare { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.95rem; }
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid #e7ebef; vertical-align: top; }
.compare th { font: 700 0.9rem var(--titre); color: var(--gris); }
.compare td:first-child { font-weight: 700; color: var(--encre); width: 24%; }
.compare td { color: var(--gris); }
.compare .nous { background: var(--bleu-pale); color: var(--encre); font-weight: 700; }
.compare th.nous { color: var(--bleu); }
.compare tr:last-child td { border-bottom: 0; }

.calcul { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; background: #fff; border: 1px solid var(--ligne); border-radius: 22px; padding: 40px; }
.calcul-texte h2 { margin-bottom: 0.8rem; }
.calcul-texte > p { color: var(--gris); margin-bottom: 24px; }
.curseur { display: block; margin-top: 20px; }
.curseur span { display: flex; justify-content: space-between; font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
.curseur b { color: var(--bleu); }
.curseur input { width: 100%; accent-color: var(--bleu); }
.calcul-resultat { background: var(--encre); color: #fff; border-radius: var(--rayon); padding: 30px; }
.calcul-resultat .petit { color: #b8c6d3; font-size: 0.9rem; }
.calcul-resultat .gros { font: 800 clamp(2.2rem, 5vw, 3rem)/1.1 var(--titre); margin: 6px 0; color: #8fc3ea; }
.calcul-resultat .moyen { font: 700 1.6rem var(--titre); margin-top: 4px; }
.calcul-resultat .moyen span { font: 500 0.85rem var(--texte); color: #b8c6d3; }
.calcul-resultat hr { border: 0; border-top: 1px solid rgba(255,255,255,0.12); margin: 20px 0; }
.calcul-resultat .note { margin-top: 16px; font-size: 0.78rem; color: #8597a8; }

.offre { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: start; }
.offre p { color: var(--gris); margin-bottom: 22px; }
.prix { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--ligne); }
.prix td { padding: 16px 20px; border-bottom: 1px solid #e7ebef; color: var(--gris); }
.prix td:first-child { font-weight: 700; color: var(--encre); width: 42%; }
.prix tr:last-child td { border-bottom: 0; }

.pastilles { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pastilles li { padding: 12px 16px 12px 40px; position: relative; border-radius: 99px; background: #fff; border: 1px solid var(--ligne); font-weight: 600; font-size: 0.95rem; }
.pastilles li::before { content: "✓"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--bleu); color: #fff; font-size: 0.7rem; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.liste { list-style: none; margin: 0; padding: 26px; border-radius: var(--rayon); background: #fff; border: 1px solid var(--ligne); display: grid; gap: 12px; align-content: start; }
.liste li { padding-left: 30px; position: relative; }
.liste li::before { position: absolute; left: 0; top: 1px; font-weight: 800; }
.oui li::before { content: "✓"; color: var(--bleu); }
.non li::before { content: "✕"; color: var(--rouge); }
.non { background: #fbfcfd; }

.faq details { background: #fff; border: 1px solid var(--ligne); border-radius: 14px; margin-bottom: 10px; padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; font: 700 1rem var(--titre); padding: 18px 0; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--bleu); font-size: 1.3rem; line-height: 1; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--gris); padding-bottom: 18px; }

.final { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 44px; border-radius: 22px; color: #fff;
  background: radial-gradient(600px 300px at 100% 0%, rgba(47,134,196,0.4), transparent 60%), var(--encre); }
.final h2 { margin: 0 0 8px; }
.final p { color: #b8c6d3; }
.bouton { display: inline-block; text-decoration: none; font: 700 1rem var(--texte); color: #fff; background: var(--bleu); padding: 15px 24px; border-radius: 12px; transition: background 0.15s, transform 0.15s; }
.bouton:hover { background: #185580; transform: translateY(-1px); }
.final .bouton { background: #fff; color: var(--encre); }
.final .bouton:hover { background: var(--bleu-pale); }

.pied { margin-top: 88px; padding: 36px 0 110px; border-top: 1px solid var(--ligne); font-size: 0.85rem; color: var(--gris); }
.pied p { margin-bottom: 8px; max-width: 80ch; }
.copie { color: #8a939c; }

.pied a { color: var(--bleu); }

.cta-mobile { display: none; }

.legal { max-width: 760px; padding: 48px 16px 80px; line-height: 1.65; }
.legal h1 { margin: 18px 0 6px; }
.legal h2 { margin: 32px 0 8px; font-size: 1.2rem; }
.legal ul { padding-left: 20px; }
.legal .maj, .retour-accueil { color: var(--gris); font-size: 0.9rem; }

/* Page merci */
.merci { min-height: 100vh; display: grid; place-items: center; padding: 100px 16px 40px; color: #fff; text-align: center;
  background: radial-gradient(800px 500px at 50% 0%, rgba(47,134,196,0.35), transparent 60%), var(--encre); }
.merci-carte { max-width: 620px; }
.merci .coche { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bleu); font-size: 2rem; }
.merci h1 { margin: 0 0 14px; }
.merci p { color: #c3cfda; font-size: 1.05rem; }
.merci ol { text-align: left; margin: 28px auto; padding: 22px 22px 22px 44px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--rayon); color: #dbe6ef; display: grid; gap: 8px; }
.merci .bouton { background: #fff; color: var(--encre); }
.merci { grid-template-columns: minmax(0, 1fr); }
.merci-carte.large { max-width: 880px; width: 100%; min-width: 0; }
.agenda { margin-top: 26px; border-radius: var(--rayon); overflow: hidden; background: #fff; }
.agenda iframe { display: block; width: 100%; min-height: 700px; border: 0; }
.agenda .video-vide { position: static; min-height: 320px; }
.resa { padding: 28px; color: var(--encre); text-align: left; }
.resa h2 { font-size: 1.15rem; margin: 0 0 14px; }
.resa h3 { font: 700 0.8rem var(--texte); color: var(--gris); margin: 0 0 8px; }
.resa form { margin-top: 22px; }
.resa .champ { display: block; margin-bottom: 12px; }
.jours { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 18px; scrollbar-width: thin; }
.jour { flex: 0 0 74px; display: grid; gap: 2px; justify-items: center; padding: 12px 6px; font: 500 0.78rem var(--texte); color: var(--gris); background: var(--fond); border: 1.5px solid var(--ligne); border-radius: 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.jour b { font: 700 1.35rem var(--titre); color: var(--encre); }
.jour:hover, .heure:hover { border-color: var(--bleu-vif); transform: translateY(-1px); }
.jour.choisie, .heure.choisie { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.jour.choisie b { color: #fff; }
.resa .fuseau { margin: -8px 0 16px; color: var(--gris); font-size: 0.88rem; }
.periode { margin-bottom: 16px; }
.heures { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.heure { padding: 11px 6px; font: 700 0.95rem var(--texte); color: var(--encre); background: #fff; border: 1.5px solid var(--ligne); border-radius: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.confirmer { width: 100%; padding: 16px 20px; font: 700 1.02rem var(--texte); color: #fff; background: var(--bleu); border: 0; border-radius: 12px; cursor: pointer; transition: background 0.15s; }
.confirmer:hover { background: var(--bleu-vif); }
.confirmer:disabled { opacity: 0.6; cursor: wait; }
.resa .piege { position: absolute; left: -9999px; }
.resa .resa-erreur { margin: 12px 0 0; color: var(--rouge); font-size: 0.92rem; font-weight: 600; min-height: 1em; }
.resa-ok { text-align: center; padding: 44px 28px; }
.resa-ok h2 { max-width: none; margin-bottom: 8px; }
.resa-ok p { color: var(--gris); margin: 0; }

@media (max-width: 960px) {
  .hero { padding-top: 90px; }
  .hero-grille { grid-template-columns: 1fr; grid-template-areas: "titre" "quiz" "video"; }
  .hero-quiz { position: static; }
  .tuiles { grid-template-columns: 1fr 1fr; }
  .frise, .calcul, .offre { grid-template-columns: 1fr; }
  .calcul { padding: 26px; }
}
@media (max-width: 600px) {
  .places { font-size: 0.75rem; padding: 6px 10px; }
  .logo span { display: none; }
  .tuiles, .duo { grid-template-columns: 1fr; }
  .garanties li { padding: 10px; font-size: 0.78rem; }
  .garanties b { font-size: 1.15rem; }
  .section { padding-top: 64px; }
  .section-sombre { margin-top: 64px; padding: 60px 0; }
  .final { padding: 28px; }
  #form { padding: 18px; }
  .etapes { min-height: 0; }
  .cta-mobile { display: block; position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 20; text-align: center; text-decoration: none;
    font: 700 1rem var(--texte); color: #fff; background: var(--bleu); padding: 15px; border-radius: 14px; box-shadow: 0 14px 30px -10px rgba(13,23,33,0.6);
    transition: opacity 0.2s, transform 0.2s; }
  .cta-mobile.cache { opacity: 0; transform: translateY(20px); pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }