/* ============================================================
   1. TYPOGRAPHIE
   ============================================================ */

@font-face { font-family:'Formiga'; src:url('fonts/formiga-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Formiga'; src:url('fonts/formiga-bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Formiga'; src:url('fonts/formiga-extrabold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Formiga'; src:url('fonts/formiga-black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }

@font-face { font-family:'GillSansHZ'; src:url('fonts/gill-sans.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'GillSansHZ'; src:url('fonts/gill-sans-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'GillSansHZ'; src:url('fonts/gill-sans-medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'GillSansHZ'; src:url('fonts/gill-sans-bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ============================================================
   2. JETONS DE MARQUE
   ============================================================ */

:root {
  --navy:#1C104A;
  --vert:#00FF80;
  --lavande:#AAB0EF;
  --teal:#78C7CE;
  --sable:#EFEEE9;
  --gris:#8A877F;
  --gris-clair:#E8E6E0;

  --navy-2:#251765;
  --navy-3:#2E1D7A;
  --gradient:linear-gradient(180deg, var(--vert) 0%, var(--lavande) 100%);

  --font-display:'Formiga','Arial Narrow',Impact,sans-serif;
  --font-body:'GillSansHZ','Gill Sans MT',Calibri,sans-serif;

  --page:min(1240px, 100% - 3rem);
  --gutter:clamp(1.25rem, 5vw, 4rem);
}

/* ============================================================
   3. BASE
   ============================================================ */

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

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(1rem,0.97rem + 0.15vw,1.075rem);
  line-height:1.7;
  color:var(--sable);
  background:var(--navy);
  overflow-x:hidden;
}

h1,h2,h3,h4 {
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-0.015em;
  line-height:0.92;
  text-wrap:balance;
}

h1 { font-size:clamp(2.15rem,5vw,4.1rem); font-weight:900; }
h2 { font-size:clamp(2.1rem,5vw,4rem); }
h3 { font-size:clamp(1.15rem,1.6vw,1.4rem); font-weight:700; letter-spacing:0.005em; }

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

::selection { background:var(--vert); color:var(--navy); }

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

.wrap { width:var(--page); margin-inline:auto; }

.eyebrow {
  font-family:var(--font-body);
  font-weight:700;
  font-size:0.75rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--vert);
  display:block;
  margin-bottom:1.25rem;
}

.lede {
  font-size:clamp(1.1rem,1.5vw,1.3rem);
  line-height:1.65;
  color:color-mix(in srgb, var(--sable) 72%, transparent);
  max-width:52ch;
}

.skip {
  position:absolute; left:-9999px;
  background:var(--vert); color:var(--navy);
  padding:0.75rem 1.25rem; font-weight:700; z-index:200;
}
.skip:focus { left:1rem; top:1rem; }

/* ============================================================
   4. SIGNATURE — jauge de progression au scroll
   Reprend la barre de points de l'application.
   ============================================================ */

.gauge {
  position:fixed;
  top:0; left:0;
  width:3px; height:100vh;
  background:color-mix(in srgb, var(--sable) 10%, transparent);
  z-index:90;
}
.gauge span {
  display:block;
  width:100%; height:0%;
  background:var(--gradient);
  transition:height 0.1s linear;
}

@media (max-width:860px) { .gauge { display:none; } }

/* ============================================================
   5. NAVIGATION
   ============================================================ */

.nav {
  position:fixed; inset:0 0 auto 0;
  z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:1rem var(--gutter);
  background:color-mix(in srgb, var(--navy) 88%, transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid color-mix(in srgb, var(--sable) 8%, transparent);
}

.nav-mark { display:flex; align-items:center; flex-shrink:0; min-height:44px; padding-right:0.5rem; }
.nav-mark img { height:clamp(20px,2.4vw,26px); width:auto; }

.nav-links { display:flex; gap:1.5rem; align-items:center; }
.nav-links a {
  font-size:0.82rem; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
  padding-inline:0.25rem;
  color:color-mix(in srgb, var(--sable) 62%, transparent);
  transition:color 0.2s;
}
.nav-links a:hover { color:var(--sable); }

@media (max-width:860px) { .nav-links { display:none; } }

.btn {
  display:inline-block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:0.92rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  padding:0.85rem 1.75rem;
  border:none; border-radius:100px;
  background:var(--vert); color:var(--navy);
  cursor:pointer;
  transition:transform 0.2s, background 0.2s;
}
.btn:hover { background:var(--sable); transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

.btn-ghost {
  background:transparent;
  color:var(--sable);
  border:1px solid color-mix(in srgb, var(--sable) 28%, transparent);
}
.btn-ghost:hover { background:var(--sable); color:var(--navy); }

.nav .btn { padding:0.6rem 1.35rem; font-size:0.8rem; }

/* ============================================================
   6. RYTHME DES SECTIONS
   ============================================================ */

.section { padding-block:clamp(5rem,11vw,9rem); }
.section--tight { padding-block:clamp(3.5rem,7vw,5.5rem); }
.section--sable { background:var(--sable); color:var(--navy); }
.section--sable .lede { color:color-mix(in srgb, var(--navy) 70%, transparent); }
.section--sable .eyebrow { color:var(--navy); opacity:0.5; }

.rule {
  height:1px; border:0;
  background:color-mix(in srgb, var(--sable) 12%, transparent);
}

/* ============================================================
   7. HERO
   ============================================================ */

.hero {
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:9rem var(--gutter) 5rem;
  position:relative;
}

.hero::after {
  content:'';
  position:absolute; inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--vert) 40%, transparent), transparent);
}

.hero-inner { max-width:min(1020px, 100%); }

.hero h1 { margin-bottom:2rem; }
.hero h1 em {
  font-style:normal;
  padding-top:0.14em; /* l'arrière-plan en dégradé couvre aussi les accents (É) */
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-actions {
  display:flex; flex-wrap:wrap; gap:0.85rem;
  margin-top:2.75rem;
}

.hero-meta {
  margin-top:1.5rem;
  font-size:0.82rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--sable) 45%, transparent);
}

@media (max-width:960px) {
  .hero { padding-top:8rem; }
  .hero-inner { max-width:100%; }
}

/* ============================================================
   8. CONSTAT
   ============================================================ */

.constat {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
.constat-body p + p { margin-top:1.25rem; }
.constat-body strong { font-weight:700; color:var(--sable); }

.claim {
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(1.7rem,3.6vw,2.9rem);
  line-height:0.98;
  letter-spacing:-0.015em;
  padding-left:1.5rem;
  border-left:3px solid var(--vert);
}

@media (max-width:860px) { .constat { grid-template-columns:1fr; } }

/* ============================================================
   9. ÉCRANS DE L'APPLICATION
   ============================================================ */

.screens {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(3rem,6vw,4.5rem);
}

.screen { text-align:center; }
.screen img {
  margin-inline:auto;
  max-width:230px;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,0.4));
}
.screen h3 { margin:1.75rem 0 0.6rem; }
.screen p {
  font-size:0.93rem;
  color:color-mix(in srgb, var(--sable) 62%, transparent);
  max-width:30ch; margin-inline:auto;
}

@media (max-width:860px) {
  .screens { grid-template-columns:1fr; gap:3.5rem; }
}
@media (max-width:620px) {
  .screens { grid-template-columns:1fr; gap:3.5rem; }
  .screen img { max-width:240px; }
}

/* ============================================================
   11 bis. NOTE DES FONDATEURS
   ============================================================ */

.note { max-width:62ch; }
.note p {
  font-size:clamp(1.05rem,1.4vw,1.22rem);
  line-height:1.72;
  color:color-mix(in srgb, var(--navy) 78%, transparent);
}
.note p + p { margin-top:1.15rem; }
.note h2 { margin-bottom:1.75rem; }

.signature {
  display:flex; align-items:center; gap:0.9rem;
  margin-top:2.5rem; padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb, var(--navy) 18%, transparent);
}
.signature-line { width:40px; height:2px; background:var(--navy); flex-shrink:0; }
.signature-text {
  font-size:0.88rem; line-height:1.4;
  color:color-mix(in srgb, var(--navy) 62%, transparent);
}
.signature-text strong {
  display:block; font-weight:700;
  color:var(--navy); letter-spacing:0.01em;
}
.section--sable .note a { color:var(--navy); text-decoration-thickness:1px; text-underline-offset:3px; }

/* ============================================================
   12. PARTENAIRES
   ============================================================ */

.partners { display:grid; gap:1px; margin-top:clamp(2.5rem,5vw,4rem);
  background:color-mix(in srgb, var(--sable) 12%, transparent); }

.partner {
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(1.5rem,4vw,4rem);
  padding:clamp(2rem,4vw,3rem) 0;
  background:var(--navy);
  align-items:start;
}
.partner-head h3 {
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:800;
}
.partner-kind {
  font-size:0.75rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--teal);
  display:block; margin-bottom:0.75rem;
}
.partner-body p { color:color-mix(in srgb, var(--sable) 72%, transparent); }
.partner-gains { list-style:none; margin-top:1.25rem; display:grid; gap:0.6rem; }
.partner-gains li {
  position:relative; padding-left:1.6rem;
  font-size:0.97rem;
  color:color-mix(in srgb, var(--sable) 78%, transparent);
}
.partner-gains li::before {
  content:''; position:absolute;
  left:0; top:0.62em;
  width:8px; height:8px; border-radius:50%;
  background:var(--vert);
}

@media (max-width:860px) { .partner { grid-template-columns:1fr; gap:1rem; } }

/* ============================================================
   13. FAQ
   ============================================================ */

.faq { margin-top:clamp(2.5rem,5vw,3.5rem); max-width:auto; }
.faq details {
  border-top:1px solid color-mix(in srgb, var(--sable) 12%, transparent);
}
.faq details:last-of-type { border-bottom:1px solid color-mix(in srgb, var(--sable) 12%, transparent); }

.faq summary {
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:1.5rem 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-weight:700; font-size:clamp(1.02rem,1.5vw,1.2rem);
  text-transform:uppercase; letter-spacing:0.005em;
  transition:color 0.2s;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--vert); }
.faq summary::after {
  content:'+';
  font-size:1.5rem; font-weight:400; line-height:1;
  color:var(--vert);
  flex-shrink:0;
  transition:transform 0.25s;
}
.faq details[open] summary::after { transform:rotate(45deg); }
.faq-answer { padding-bottom:1.75rem; max-width:68ch; }
.faq-answer p { color:color-mix(in srgb, var(--sable) 70%, transparent); }
.faq-answer p + p { margin-top:0.85rem; }

/* ============================================================
   14. LISTE D'ATTENTE
   ============================================================ */

.waitlist {
  position:relative;
  padding-block:clamp(5rem,10vw,8rem);
  background:var(--navy-2);
  overflow:hidden;
}
.waitlist::before {
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--gradient);
}
.waitlist-inner {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}

.form { display:grid; gap:0.85rem; }
.field { display:grid; gap:0.4rem; }
.field label {
  font-size:0.75rem; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--sable) 55%, transparent);
}
.field input, .field select {
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--sable);
  background:color-mix(in srgb, var(--sable) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--sable) 16%, transparent);
  border-radius:10px;
  padding:0.9rem 1.1rem;
  width:100%;
  transition:border-color 0.2s, background 0.2s;
}
.field input::placeholder { color:color-mix(in srgb, var(--sable) 34%, transparent); }
.field input:focus, .field select:focus {
  border-color:var(--vert);
  background:color-mix(in srgb, var(--sable) 11%, transparent);
  outline:none;
}
.field select option { background:var(--navy); color:var(--sable); }

.form .btn { margin-top:0.6rem; justify-self:start; }
.form-note {
  font-size:0.8rem;
  color:color-mix(in srgb, var(--sable) 42%, transparent);
  margin-top:0.4rem;
}
.hp { position:absolute; left:-9999px; }

@media (max-width:860px) {
  .waitlist-inner { grid-template-columns:1fr; }
  .form .btn { justify-self:stretch; }
}

/* ============================================================
   15. PIED DE PAGE
   ============================================================ */

.footer {
  padding:clamp(3rem,6vw,4rem) 0 2.5rem;
  border-top:1px solid color-mix(in srgb, var(--sable) 10%, transparent);
}
.footer-top {
  display:flex; flex-wrap:wrap; gap:2rem;
  justify-content:space-between; align-items:flex-end;
}
.footer-mark { line-height:0; flex:1 1 320px; max-width:520px; }
.footer-mark img { width:100%; height:auto; }

.footer-links { display:flex; flex-wrap:wrap; gap:0.25rem 1.5rem; }
.footer-links a {
  font-size:0.85rem; text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
  color:color-mix(in srgb, var(--sable) 60%, transparent);
  transition:color 0.2s;
}
.footer-links a:hover { color:var(--vert); }

.footer-legal {
  margin-top:3rem; padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb, var(--sable) 8%, transparent);
  font-size:0.78rem;
  color:color-mix(in srgb, var(--sable) 35%, transparent);
}

/* ============================================================
   16. RÉVÉLATION AU SCROLL
   ============================================================ */

.js .reveal { opacity:0; transform:translateY(22px); transition:opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.seen { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  .reveal { opacity:1; transform:none; }
  .gauge span { transition:none; }
}

/* ============================================================
   17. VILLES (accueil) — cartes vers les pages ville
   ============================================================ */

.villes {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; margin-top:clamp(2.5rem,5vw,4rem);
  background:color-mix(in srgb, var(--sable) 12%, transparent);
}
.ville {
  display:flex; flex-direction:column; gap:0.75rem;
  padding:clamp(1.75rem,3vw,2.5rem) clamp(1.25rem,2.5vw,2rem);
  background:var(--navy);
  text-decoration:none;
  transition:background 0.2s;
}
.ville:hover { background:var(--navy-2); }
.ville h3 { font-size:clamp(1.3rem,2.2vw,1.75rem); font-weight:800; }
.ville p { font-size:0.95rem; color:color-mix(in srgb, var(--sable) 66%, transparent); }
.ville-kind {
  font-size:0.75rem; font-weight:700; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--teal);
}
.ville-cta {
  margin-top:auto; padding-top:0.5rem;
  font-family:var(--font-display); font-weight:800; font-size:0.85rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--vert);
}
@media (max-width:860px) { .villes { grid-template-columns:1fr; } }

/* ============================================================
   18. PAGES VILLE
   ============================================================ */

.crumbs {
  font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  color:color-mix(in srgb, var(--sable) 45%, transparent);
  margin-bottom:1.75rem;
}
.crumbs a { text-decoration:none; color:color-mix(in srgb, var(--sable) 70%, transparent); }
.crumbs a:hover { color:var(--vert); }

.hero--ville { min-height:auto; padding-bottom:clamp(4rem,8vw,6rem); }

.offre {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(2.5rem,5vw,4rem);
}
.offre article { border-top:2px solid var(--vert); padding-top:1.5rem; }
.offre h3 { margin-bottom:0.85rem; }
.offre p { color:color-mix(in srgb, var(--sable) 70%, transparent); font-size:0.98rem; }
@media (max-width:960px) { .offre { grid-template-columns:1fr; } }

.lieux { list-style:none; margin-top:clamp(2rem,4vw,3rem); display:grid; gap:1px;
  background:color-mix(in srgb, var(--navy) 14%, transparent); }
.lieux li {
  display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
  gap:clamp(1rem,3vw,3rem); padding:1.5rem 0; background:var(--sable);
}
.lieux h3 { font-size:clamp(1.05rem,1.5vw,1.25rem); }
.lieux p { color:color-mix(in srgb, var(--navy) 74%, transparent); font-size:0.98rem; }
@media (max-width:760px) { .lieux li { grid-template-columns:1fr; gap:0.5rem; } }
.section--sable .lede a, .section--sable p a { color:var(--navy); text-underline-offset:3px; }

.steps { list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(2rem,4vw,3rem); }
.steps li { counter-increment:step; }
.steps li::before {
  content:counter(step, decimal-leading-zero);
  display:block; font-family:var(--font-display); font-weight:900;
  font-size:2.4rem; line-height:1; margin-bottom:1rem;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.steps h3 { margin-bottom:0.6rem; }
.steps p { color:color-mix(in srgb, var(--sable) 70%, transparent); font-size:0.98rem; }
@media (max-width:860px) { .steps { grid-template-columns:1fr; } }

.cta-band { text-align:left; }
.cta-band .hero-actions { margin-top:2rem; }
.autres-villes { margin-top:2.5rem; font-size:0.95rem; color:color-mix(in srgb, var(--sable) 62%, transparent); }
.autres-villes a { color:var(--sable); text-underline-offset:3px; }

.footer-villes { margin-top:2rem; display:flex; flex-wrap:wrap; gap:0.25rem 1.5rem; }
.footer-villes a {
  font-size:0.85rem; text-decoration:none; display:inline-flex; align-items:center; min-height:44px;
  color:color-mix(in srgb, var(--sable) 60%, transparent);
}
.footer-villes a:hover { color:var(--vert); }