/* Pages publiques de Guid’R : accueil et pages légales.
   Couleurs et police : variables de app.css. Idée directrice : la route, de l'inscription au permis. */
body.site { background: #fff; color: var(--ink); font-size: 16px; }
/* Les pages publiques gardent toujours leurs couleurs claires, même si l'appareil est en mode sombre. */
html:has(body.site) { color-scheme: light; background: #fff; }
.site {
  color-scheme: light;
  --mist: #F4F7FB; --ink-soft: #334155; --hair: #E2E8F0;
  --ink: #0F172A; --ink-2: #1E293B; --text: #0F172A; --muted: #64748B; --faint: #94A3B8;
  --bg: #F8FAFC; --surface: #FFFFFF; --surface-2: #F8FAFC; --line: #E2E8F0; --line-strong: #CBD5E1; --neutral-soft: #F1F5F9;
  --disabled-bg: #E2E8F0; --disabled-text: #94A3B8;
  --accent-text: #2563EB; --accent-soft: #EFF6FF; --accent-ink: #1D4ED8; --accent-line: #BFDBFE; --accent-ring: rgba(37, 99, 235, .22);
  --accent-2-text: #6D28D9; --accent-2-soft: #F5F3FF; --accent-2-line: #DDD6FE; --accent-2-ring: rgba(124, 58, 237, .2);
  --warn: #B45309; --warn-soft: #FFFBEB; --warn-line: #FDE68A; --danger: #DC2626; --danger-soft: #FEF2F2; --danger-line: #FECACA;
  --info: #6D28D9; --info-soft: #F5F3FF; --info-line: #DDD6FE;
  --topbar-bg: rgba(248, 250, 252, .88); --tabbar-bg: rgba(255, 255, 255, .96);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 24px rgba(15, 23, 42, .06);
}
.site-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.site a:focus-visible, .site summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------------ en-tête */
.site-head { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--hair); }
.site-head-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-stretch: 118%; font-size: 19px; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.site-brand img { border-radius: 7px; }
.site-brand:hover { color: var(--ink); }
.site-brand.small { font-size: 15px; gap: 8px; }
.site-brand.small img { border-radius: 5px; }
.site-nav { display: flex; gap: 28px; margin-left: 24px; }
.site-nav a, .site-link-login { color: var(--ink-soft); font-weight: 500; font-size: 15px; text-decoration: none; }
.site-nav a:hover, .site-link-login:hover { color: var(--blue); }
.site-link-login { margin-left: auto; }
.site-login { margin-left: auto; }

/* ------------------------------------------------------------------ bandeau d'ouverture */
.hero { padding: 96px 0 0; background: linear-gradient(to bottom, #fff 0, #fff 64%, var(--mist) 64%, var(--mist) 100%); }
.hero-title { font-size: clamp(40px, 6vw, 76px); font-stretch: 125%; font-weight: 750; line-height: 1.02; letter-spacing: -.04em; color: var(--ink); margin: 0; }
.nw { white-space: nowrap; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-top: 40px; }
.hero-lead { font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 58ch; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; align-items: center; }
.hero-note { flex-basis: 100%; text-align: right; font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.hero-shot-wrap { padding-top: 64px; padding-bottom: 96px; }

/* captures de l'application */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; }
.shot-desktop { border-radius: 14px; overflow: hidden; border: 1px solid var(--hair); box-shadow: 0 0 0 8px rgba(15, 23, 42, .035), 0 60px 120px -50px rgba(15, 23, 42, .45); background: #fff; }
.shot-phone { width: 300px; max-width: 78vw; border-radius: 40px; overflow: hidden; border: 10px solid var(--ink); box-shadow: 0 60px 100px -45px rgba(15, 23, 42, .5); justify-self: center; }

/* ------------------------------------------------------------------ titres de section */
.sec-title { font-size: clamp(28px, 3.6vw, 42px); font-stretch: 118%; font-weight: 720; line-height: 1.08; letter-spacing: -.03em; color: var(--ink); margin: 0; max-width: 22ch; }
.sec-lead { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; margin: 18px 0 0; }

/* ------------------------------------------------------------------ la route : de l'inscription au permis */
.journey { background: var(--mist); padding: 24px 0 112px; }
.road { position: relative; list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.road::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 12px; border-radius: 6px; background: var(--ink); }
.road::after { content: ""; position: absolute; left: 14px; right: 14px; top: 22px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 22px, transparent 22px 40px); background-size: 40px 2px; }
.stop { position: relative; z-index: 1; }
.stop-n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); color: var(--blue); font-weight: 750; font-stretch: 118%; font-size: 17px; font-variant-numeric: lining-nums; }
.stop-exam .stop-n { border-color: var(--violet); color: var(--violet); }
.stop h3 { font-size: 22px; font-stretch: 118%; font-weight: 700; letter-spacing: -.02em; margin: 26px 0 10px; color: var(--ink); }
.stop p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 34ch; }

/* le seul mouvement de la page : la route défile une fois, les étapes s'allument dans l'ordre */
.road.will-animate::after { animation: none; }
.road.is-visible::after { animation: drive 1.8s cubic-bezier(.25, .8, .25, 1) both; }
.road.will-animate .stop-n { background: #fff; border-color: #CBD5E1; color: #94A3B8; transition: background .35s, border-color .35s, color .35s; }
.road.is-visible .stop-n { border-color: var(--blue); color: #fff; background: var(--blue); }
.road.is-visible .stop-exam .stop-n { border-color: var(--violet); background: var(--violet); }
.road.is-visible .stop:nth-child(2) .stop-n { transition-delay: .35s; }
.road.is-visible .stop:nth-child(3) .stop-n { transition-delay: .7s; }
.road.is-visible .stop:nth-child(4) .stop-n { transition-delay: 1.05s; }
@keyframes drive { from { background-position: 0 0; } to { background-position: -400px 0; } }

/* ------------------------------------------------------------------ sections avec capture */
.split { padding: 112px 0; background: #fff; }
.split-alt { background: var(--mist); }
.split-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: center; }
.split-rev { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.split-text .sec-title { margin-bottom: 22px; }
.split-text p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 14px; max-width: 54ch; }
.facts { margin: 32px 0 0; border-top: 1px solid var(--hair); }
.facts div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.facts dt { color: var(--muted); font-size: 14.5px; }
.facts dd { margin: 0; color: var(--ink); font-size: 15px; font-weight: 500; }

/* ------------------------------------------------------------------ l'équipe */
.team { padding: 112px 0; background: #fff; }
.team-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 80px; align-items: start; }
.roles { margin: 0; border-top: 2px solid var(--ink); }
.roles div { display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.roles dt { font-weight: 700; font-stretch: 118%; font-size: 19px; letter-spacing: -.015em; color: var(--ink); }
.roles dd { margin: 0; color: var(--ink-soft); line-height: 1.6; }

/* ------------------------------------------------------------------ tarifs */
.pricing { padding: 112px 0; background: var(--mist); }
.price-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; background: #fff; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.tier { display: flex; flex-direction: column; padding: 36px 32px 32px; border-left: 1px solid var(--hair); }
.tier:first-child { border-left: 0; }
.tier-rec { box-shadow: inset 0 4px 0 var(--blue); }
.tier h3 { font-size: 24px; font-stretch: 118%; font-weight: 720; letter-spacing: -.02em; margin: 0; color: var(--ink); }
.tier-for { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 8px 0 26px; min-height: 3.1em; }
.tier-price { margin: 0; color: var(--muted); font-size: 15px; }
.tier-price b { font-size: 46px; font-stretch: 112%; font-weight: 720; letter-spacing: -.035em; color: var(--ink); margin-right: 6px; font-variant-numeric: lining-nums; }
.tier-year { margin: 4px 0 26px; color: var(--muted); font-size: 14px; }
.tier ul { list-style: none; margin: 0 0 30px; padding: 22px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 11px; flex: 1; }
.tier li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); line-height: 1.45; }
.tier li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 11px; height: 6px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.tier li.off { color: var(--faint); }
.tier li.off::before { width: 10px; height: 0; top: 10px; border-left: 0; border-bottom-color: var(--faint); transform: none; }
.price-note { color: var(--muted); font-size: 14px; margin: 20px 0 0; }

/* ------------------------------------------------------------------ confiance */
.trust { padding: 96px 0; background: #fff; }
.trust-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 80px; }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.trust-list li { font-size: 17px; line-height: 1.6; color: var(--ink-soft); padding-left: 22px; border-left: 2px solid var(--hair); }
.trust-list b { color: var(--ink); font-weight: 650; }

/* ------------------------------------------------------------------ questions */
.faq { padding: 96px 0 112px; background: #fff; border-top: 1px solid var(--hair); }
.faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 80px; }
.faq-list { border-top: 1px solid var(--hair); }
.faq-list details { border-bottom: 1px solid var(--hair); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s; }
.faq-list details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq-list summary:hover { color: var(--blue); }
.faq-list details p { margin: -6px 0 24px; color: var(--ink-soft); line-height: 1.7; max-width: 62ch; }

/* ------------------------------------------------------------------ dernier appel */
.final { position: relative; background: var(--ink); color: #CBD5E1; padding: 112px 0 104px; overflow: hidden; }
.final::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 40px, transparent 40px 72px); }
.final h2 { font-size: clamp(32px, 4.6vw, 56px); font-stretch: 122%; font-weight: 740; letter-spacing: -.035em; line-height: 1.04; color: #fff; margin: 0; max-width: 18ch; }
.final p { font-size: 18px; line-height: 1.6; max-width: 54ch; margin: 22px 0 0; }
.final-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.final .final-ghost { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.final .final-ghost:hover, .final .final-ghost:active { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; }
.final .final-ghost:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.final-contact { font-size: 15px !important; color: #94A3B8; }
.final-contact a { color: #fff; }

/* ------------------------------------------------------------------ pied de page */
.site-foot { background: #fff; border-top: 1px solid var(--hair); padding: 32px 0; color: var(--muted); font-size: 14px; }
.site-foot-in { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 24px; margin-left: auto; }
.site-foot a { color: var(--ink-soft); text-decoration: none; }
.site-foot a:hover { color: var(--blue); }

/* ------------------------------------------------------------------ pages légales */
.site-legal { padding: 72px 0 96px; }
.site-narrow { max-width: 760px; }
.site-legal h1 { font-size: clamp(32px, 4.4vw, 48px); font-stretch: 122%; font-weight: 740; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); margin: 0 0 14px; }
.site-legal .updated { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 0 44px; }
.site-legal h2 { font-size: 22px; font-stretch: 115%; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 44px 0 12px; }
.site-legal p, .site-legal li { line-height: 1.75; color: var(--ink-soft); font-size: 16.5px; }
.site-legal ul { padding-left: 22px; }
.site-legal li { margin-bottom: 6px; }
.site-legal mark { background: var(--warn-soft); color: var(--warn); padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.site-legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15.5px; border-top: 2px solid var(--ink); }
.site-legal th, .site-legal td { text-align: left; padding: 13px 12px 13px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.site-legal th { color: var(--muted); font-weight: 500; width: 36%; }
.site-legal td { color: var(--ink); }

/* ------------------------------------------------------------------ écrans moyens et petits */
@media (max-width: 1020px) {
  .site-nav { display: none; }
  .hero-row, .split-in, .split-rev, .team-in, .trust-in, .faq-in { grid-template-columns: 1fr; gap: 40px; }
  .hero-actions { justify-content: flex-start; }
  .hero-note { text-align: left; }
  .split-rev .shot { order: 2; }
  .road { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .road::before, .road::after { display: none; }
  .price-table { grid-template-columns: 1fr; }
  .tier { border-left: 0; border-top: 1px solid var(--hair); }
  .tier:first-child { border-top: 0; }
  .tier-for { min-height: 0; }
}
@media (max-width: 640px) {
  .site-wrap { padding: 0 20px; }
  .site-head-in { gap: 14px; }
  .site-head-cta { display: none; }
  .hero { padding-top: 56px; }
  .hero-title { font-size: clamp(30px, 9vw, 44px); font-stretch: 108%; letter-spacing: -.03em; }
  .hero-lead { font-size: 17px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-shot-wrap { padding-top: 40px; padding-bottom: 64px; }
  .journey { padding-bottom: 80px; }
  .road { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; padding-left: 64px; }
  .road::before { display: block; left: 17px; right: auto; top: 0; bottom: 0; width: 12px; height: auto; }
  .road::after { display: block; left: 22px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .85) 0 22px, transparent 22px 40px); background-size: 2px 40px; }
  .stop-n { position: absolute; left: -64px; top: -6px; }
  .stop h3 { margin-top: 0; }
  .split, .team, .pricing { padding: 72px 0; }
  .trust, .faq { padding: 64px 0; }
  .final { padding: 72px 0; }
  .facts div, .roles div { grid-template-columns: 1fr; gap: 4px; }
  .final-actions .btn { flex: 1 1 100%; }
  .site-foot nav { margin-left: 0; }
}
@media (max-width: 640px) {
  .road.is-visible::after { animation-name: driveV; }
}
@keyframes driveV { from { background-position: 0 0; } to { background-position: 0 -400px; } }
@media (prefers-reduced-motion: reduce) {
  .road.is-visible::after { animation: none; }
  .road .stop-n { transition: none !important; }
}