[hidden] { display: none !important; }

@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --papier: #f2f5fa;
  --papier-fort: #e4eaf4;
  --encre: #13203b;
  --encre-douce: #4a5672;
  --outremer: #2b3be8;
  --outremer-fonce: #1d2bc0;
  --rose: #ff3d6e;
  --brume: #8792a8;
  --trait: #d3dbe9;
  --carte-fond: #e8edf7;
  --surface: #ffffff;
  --largeur: 72rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0d1530;
    --papier-fort: #141e40;
    --encre: #e9edf7;
    --encre-douce: #aab4cc;
    --outremer: #6f7bff;
    --outremer-fonce: #8d97ff;
    --brume: #6c7795;
    --trait: #263257;
    --carte-fond: #111b3a;
    --surface: #131c3b;
    color-scheme: dark;
  }
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "Bricolage", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-variation-settings: "opsz" 14;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
  border-radius: 4px;
}

.bandeau {
  margin: 0;
  padding: 0.55rem 1rem;
  background: var(--encre);
  color: var(--papier);
  font-size: 0.875rem;
  text-align: center;
}

.entete {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 750;
  font-size: 1.3rem;
  font-stretch: 85%;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.marque-icone { width: 1.75rem; height: 1.75rem; }
.pin-gris { fill: var(--brume); opacity: 0.55; }
.pin-rose { fill: var(--rose); }

.nav { display: flex; gap: 1.5rem; margin-left: auto; }
.nav a { text-decoration: none; color: var(--encre-douce); font-size: 0.95rem; }
.nav a:hover { color: var(--encre); }

.bouton {
  display: inline-block;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  background: var(--outremer);
  color: #fff;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 0.15s;
}
.bouton:hover { background: var(--outremer-fonce); }
.bouton-petit { padding: 0.55rem 1rem; font-size: 0.95rem; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: center;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

h1 {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1;
  font-weight: 800;
  font-stretch: 78%;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 96;
}

.ville-titre {
  display: inline-block;
  white-space: nowrap;
}
.ville-titre.change { animation: roule 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes roule {
  from { transform: translateY(0.35em); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.hero-intro {
  max-width: 32rem;
  margin: 1.5rem 0 2rem;
  font-size: 1.2rem;
  color: var(--encre-douce);
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.note { margin: 0; font-size: 0.95rem; color: var(--encre-douce); }

.carte {
  margin: 0;
  padding: 1rem;
  border-radius: 28px;
  background: var(--carte-fond);
  border: 1px solid var(--trait);
}

.carte-svg { display: block; width: 100%; height: auto; overflow: visible; }

.graticule line { stroke: var(--trait); stroke-width: 1; opacity: 0.7; }
.terres { fill: none; stroke: var(--brume); stroke-opacity: 0.42; stroke-width: 5.5; stroke-linecap: round; }
.graticule .equateur { stroke: var(--brume); stroke-opacity: 0.45; stroke-dasharray: 2 6; }

.trajet {
  fill: none;
  stroke: var(--rose);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 2 9;
}

.point-reel circle { fill: var(--brume); stroke: var(--carte-fond); stroke-width: 3; }
.point-reel text { fill: var(--encre); font-size: 21px; font-family: "Bricolage", sans-serif; font-weight: 600; }

.pin path { fill: var(--rose); }
.pin-trou { fill: var(--carte-fond); }
.pin-halo { fill: var(--rose); opacity: 0.22; transform-box: fill-box; transform-origin: center; }
.pin.pose .pin-halo { animation: halo 0.7s ease-out; }

@keyframes halo {
  from { transform: scale(0.3); opacity: 0.5; }
  to { transform: scale(1.6); opacity: 0; }
}

.carte-lecture {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0.75rem 0.5rem 1rem;
  font-size: 0.95rem;
  color: var(--encre-douce);
}
.carte-lecture strong { color: var(--encre); font-size: 1.25rem; font-weight: 750; }
.coordonnees { font-variant-numeric: tabular-nums; margin-left: auto; }

.villes { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.villes button {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: var(--surface);
  color: var(--encre);
  cursor: pointer;
}
.villes button:hover { border-color: var(--brume); }
.villes button[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: #fff; }
.villes .retour { margin-left: auto; background: transparent; border-style: dashed; }
.villes .retour[aria-pressed="true"] { background: var(--brume); border-color: var(--brume); border-style: solid; }

.section {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 4.5rem 1.5rem;
  border-top: 1px solid var(--trait);
}

h2 {
  margin: 0 0 2.25rem;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  line-height: 1.05;
  font-weight: 780;
  font-stretch: 80%;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 72;
}

h3 { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 700; line-height: 1.2; }

.etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.etapes li { counter-increment: etape; }
.etapes li::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  border: 2px solid var(--outremer);
  color: var(--outremer);
  font-weight: 750;
}
.etapes p, .usages-liste li { margin: 0; color: var(--encre-douce); max-width: 34ch; }

.usages-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.usages-liste li { max-width: 44ch; }
.usages-liste strong { display: block; color: var(--encre); font-size: 1.15rem; margin-bottom: 0.25rem; }

.prix-intro { margin: -1.25rem 0 2.25rem; color: var(--encre-douce); max-width: 50ch; }

.offres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.offre {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border-radius: 20px;
  border: 1px solid var(--trait);
  background: var(--surface);
  scroll-margin-top: 2rem;
}

.offre-phare { border: 2px solid var(--outremer); }

.montant {
  margin: 0.5rem 0 0;
  font-size: 2.75rem;
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.duree { margin: 0.35rem 0 1.25rem; color: var(--encre-douce); font-size: 0.95rem; }

.offre ul { margin: 0 0 1.75rem; padding: 0; list-style: none; flex: 1; }
.offre li { padding: 0.45rem 0; border-top: 1px solid var(--trait); font-size: 0.98rem; }

.bouton-plein { text-align: center; }
.bouton[aria-disabled="true"] {
  background: var(--papier-fort);
  color: var(--encre-douce);
  cursor: not-allowed;
}

.faq { max-width: 46rem; }
.faq details { border-top: 1px solid var(--trait); }
.faq details:last-child { border-bottom: 1px solid var(--trait); }

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-weight: 650;
  font-size: 1.1rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--outremer); font-weight: 600; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.25rem; color: var(--encre-douce); max-width: 62ch; }

.pied {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
  border-top: 1px solid var(--trait);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: 0.9rem;
  color: var(--encre-douce);
}
.pied p { margin: 0; max-width: 46ch; }
.pied nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.legal { max-width: 46rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 2rem; }
.legal h2 { margin: 2.5rem 0 1rem; font-size: 1.6rem; }
.legal p, .legal li { color: var(--encre-douce); }
.a-completer { background: var(--papier-fort); border-radius: 4px; padding: 0 0.3em; color: var(--encre); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2rem; padding-bottom: 3.5rem; }
  .etapes, .offres { grid-template-columns: 1fr; }
  .usages-liste { grid-template-columns: 1fr; }
  .nav { display: none; }
  .entete .bouton-petit { margin-left: auto; }
}

@media (max-width: 520px) {
  .entete, .hero, .section, .pied { padding-left: 1rem; padding-right: 1rem; }
  .carte { padding: 0.6rem; border-radius: 20px; }
  .coordonnees { margin-left: 0; width: 100%; }
  .villes .retour { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ville-titre.change, .pin.pose .pin-halo { animation: none; }
}

.scene {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 36rem at 78% 30%, rgba(255, 61, 110, 0.28), transparent 60%),
    radial-gradient(50rem 40rem at 10% 100%, rgba(120, 140, 255, 0.35), transparent 65%),
    #2229d6;
  color: #fff;
}

.scene .marque, .scene .nav a { color: #fff; }
.scene .nav a { opacity: 0.8; }
.scene .nav a:hover { opacity: 1; color: #fff; }
.scene .pin-gris { fill: #fff; opacity: 0.6; }
.scene .bouton { background: var(--rose); box-shadow: 0 10px 30px -8px rgba(255, 61, 110, 0.8); }
.scene .bouton:hover { background: #ff2a5f; }
.scene .bouton-petit { background: #fff; color: #2229d6; box-shadow: none; }
.scene .bouton-petit:hover { background: #ffe3eb; }

.scene .hero { padding-top: 2.5rem; padding-bottom: 6rem; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); }
.scene h1 { font-size: clamp(3rem, 7.4vw, 6.4rem); line-height: 0.92; letter-spacing: -0.035em; text-wrap: balance; }
.scene .ville-titre { color: #ff7aa0; text-shadow: 0 0 40px rgba(255, 61, 110, 0.65); }
.scene .hero-intro, .scene .note { color: rgba(255, 255, 255, 0.82); }
.scene .hero .bouton { font-size: 1.1rem; padding: 1rem 1.7rem; }

.scene .carte {
  background: rgba(8, 12, 110, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 40px 90px -30px rgba(5, 8, 80, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
}
.scene .graticule line { stroke: rgba(255, 255, 255, 0.1); opacity: 1; }
.scene .graticule .equateur { stroke: rgba(255, 255, 255, 0.3); }
.scene .terres { stroke: #fff; stroke-opacity: 0.38; }
.scene .point-reel circle { fill: #fff; stroke: rgba(34, 41, 214, 0.9); }
.scene .point-reel text { fill: #fff; }
.scene .pin-trou { fill: #2229d6; }
.scene .carte-lecture { color: rgba(255, 255, 255, 0.7); }
.scene .carte-lecture strong { color: #fff; font-size: 1.5rem; }
.scene .villes button { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.scene .villes button:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); }
.scene .villes button[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); box-shadow: 0 6px 20px -6px rgba(255, 61, 110, 0.9); }
.scene .villes .retour { background: transparent; border-style: dashed; }
.scene .villes .retour[aria-pressed="true"] { background: #fff; color: #2229d6; border-style: solid; }

.trajet { stroke: #ff7aa0; stroke-width: 3; stroke-dasharray: 3 10; animation: defile 0.9s linear infinite; }
.trajet-lueur { fill: none; stroke: var(--rose); stroke-width: 10; stroke-linecap: round; opacity: 0.25; filter: blur(6px); }

@keyframes defile { to { stroke-dashoffset: -13; } }

.pin-onde { fill: none; stroke: var(--rose); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: onde 2.2s ease-out infinite; }

@keyframes onde {
  from { transform: scale(0.4); opacity: 0.9; }
  to { transform: scale(2.6); opacity: 0; }
}

.bandeau { background: #12168f; }

.etapes li::before { background: var(--outremer); color: #fff; border: 0; width: 3rem; height: 3rem; font-size: 1.25rem; box-shadow: 0 8px 20px -8px var(--outremer); }

.offre-phare {
  background: linear-gradient(160deg, #ff3d6e, #ff6b5a);
  border: 0;
  color: #fff;
  transform: translateY(-0.75rem);
  box-shadow: 0 30px 60px -25px rgba(255, 61, 110, 0.75);
}
.offre-phare .duree { color: rgba(255, 255, 255, 0.85); }
.offre-phare li { border-top-color: rgba(255, 255, 255, 0.3); }
.offre-phare .bouton[aria-disabled="true"] { background: rgba(255, 255, 255, 0.25); color: #fff; }
.ancien-prix { display: block; font-size: 1.1rem; font-weight: 600; opacity: 0.75; text-decoration-thickness: 2px; margin-bottom: 0.25rem; }
.offre-phare h3::after { content: "Le plus choisi"; margin-left: 0.6rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: #fff; color: var(--rose); font-size: 0.8rem; font-weight: 700; vertical-align: middle; }
.offre:not(.offre-phare) .montant { padding-top: calc(1.1rem * 1.55 + 0.25rem); }

@media (max-width: 900px) {
  .scene .hero { grid-template-columns: 1fr; padding-bottom: 4rem; }
  .offre-phare { transform: none; }
  .offre:not(.offre-phare) .montant { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .trajet, .pin-onde { animation: none; }
}

.lien-compte { text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.lien-compte:hover { text-decoration: underline; }
.scene .lien-compte { color: #fff; }
@media (max-width: 900px) {
  .lien-compte { margin-left: auto; }
  .entete .lien-compte + .bouton-petit { margin-left: 0; }
  .entete { gap: 1.25rem; }
}
.entete .lien-compte, .entete .bouton-petit { white-space: nowrap; }
@media (max-width: 400px) {
  .entete { gap: 0.9rem; padding-left: 1rem; padding-right: 1rem; }
}