@font-face {
  font-family: 'Aptos Display';
  src: local('Aptos Display Bold'),
       local('AptosDisplay-Bold'),
       local('Aptos Display');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Aptos';
  src: local('Aptos'),
       local('Aptos Regular');
  font-weight: 400;
  font-style: normal;
}

/* ───────────────────────── RESET & VARIABLES ───────────────────────── */

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

:root {
  --deep-blue: #123f91;
  --blue: #1767d8;
  --cyan: #16c7ee;
  --cyan-soft: #bff4ff;
  --sky: #eafaff;
  --sky-2: #d7f4ff;
  --cloud: rgba(255, 255, 255, 0.84);
  --white: #ffffff;
  --ink: #08296b;
  --muted: #3b5f9c;
  --green: #9be7b1;
  --green-2: #d9f7d9;
  --sand: #fff3df;
  --border: rgba(23, 103, 216, 0.14);
  --shadow: 0 20px 55px rgba(18, 63, 145, 0.18);
  --shadow-soft: 0 10px 30px rgba(18, 63, 145, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: 'Aptos', 'Aptos Display', 'Segoe UI', system-ui, sans-serif;
  background:
    radial-gradient(
      circle at 50% 12%,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(234, 250, 255, 0.92) 34%,
      rgba(214, 245, 255, 0.78) 64%,
      rgba(190, 235, 255, 0.68) 100%
    ),
    linear-gradient(
      180deg,
      #f9feff 0%,
      #ddf7ff 45%,
      #c9efff 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  color: var(--ink);
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
nav a,
.btn-android,
.btn-primary,
.btn-secondary,
.section-eyebrow,
.step-num,
.feat-pill p,
.hero-tag,
.toc-title {
  font-family: 'Aptos Display', 'Aptos', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--cyan);
  text-decoration: underline;
}

strong {
  color: var(--ink);
}

/* ───────────────────────── HEADER ───────────────────────── */

header,
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 72px;
  padding: 0 clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(22, 199, 238, 0.18);
  box-shadow: 0 8px 30px rgba(18, 63, 145, 0.06);
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 8px 16px rgba(23, 103, 216, 0.12));
}

nav,
.site-header nav {
  display: flex;
  gap: 1.35rem;
  align-items: center;
}

nav a,
.site-header nav a {
  font-size: 0.9rem;
  color: var(--deep-blue);
  text-decoration: none;
  transition: color 0.2s, transform 0.2s;
}

nav a:hover,
.site-header nav a:hover {
  color: var(--cyan);
  transform: translateY(-1px);
  text-decoration: none;
}

.nav-ig,
.nav-pill {
  color: var(--white) !important;
  padding: 0.48rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 10px 24px rgba(22, 199, 238, 0.22);
}

.nav-ig {
  display: flex;
  align-items: center;
  gap: 7px;
}

.nav-ig:hover,
.nav-pill:hover {
  transform: translateY(-2px);
  color: var(--white) !important;
}

/* ───────────────────────── HOME HERO ───────────────────────── */

.hero {
  min-height: 100vh;
  padding: 112px 1.4rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: visible;
  background: transparent;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      35deg,
      transparent 0 48%,
      rgba(23, 103, 216, 0.04) 49% 51%,
      transparent 52%
    ),
    linear-gradient(
      125deg,
      transparent 0 48%,
      rgba(23, 103, 216, 0.035) 49% 51%,
      transparent 52%
    );
  background-size: 78px 78px;
  mask-image: radial-gradient(circle at 70% 4%, black, transparent 42%);
  pointer-events: none;
}

/* Photo d'illustration de la section « Pourquoi LokaVélo ».
   Coins arrondis + ombre douce pour rester cohérente avec .toc et
   .contact-card. max-height empêche qu'une photo lourde écrase la
   section sur grands écrans ; object-fit: cover recadre joliment au
   lieu de déformer. */
.why-photo {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  object-position: center;
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
  margin: 1.75rem 0 2rem;
}

/* Sur mobile, on réduit un peu pour ne pas voler trop d'espace au texte. */
@media (max-width: 720px) {
  .why-photo {
    max-height: 280px;
    border-radius: 22px;
    margin: 1.25rem 0 1.5rem;
  }
}

.map-line {
  position: absolute;
  color: rgba(22, 199, 238, 0.45);
  pointer-events: none;
  z-index: 0;
}

.map-line-left {
  top: 160px;
  left: -20px;
  width: 280px;
}

.map-line-right {
  top: 95px;
  right: -15px;
  width: 250px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 820px;
  width: 100%;
  padding-top: 0.4rem;
}

.hero-logo {
  width: clamp(145px, 20vw, 205px);
  margin-bottom: 0.9rem;
  filter: drop-shadow(0 16px 30px rgba(23, 103, 216, 0.18));
  animation: logo-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes logo-in {
  from {
    transform: scale(0.78) translateY(28px);
    opacity: 0;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.hero h1 {
  font-size: clamp(2.45rem, 6.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--deep-blue);
  max-width: 880px;
  margin-bottom: 1.05rem;
  text-shadow: 0 10px 30px rgba(255, 255, 255, 0.9);
  animation: fade-up 0.6s 0.16s both;
}

.hero h1 .accent {
  color: var(--cyan);
}

.hero-sub {
  font-size: clamp(1.05rem, 2.2vw, 1.38rem);
  font-weight: 700;
  color: var(--ink);
  max-width: 640px;
  margin-bottom: 2.15rem;
  line-height: 1.38;
  animation: fade-up 0.6s 0.3s both;
}

.hero-sub strong {
  color: var(--cyan);
}

@keyframes fade-up {
  from {
    transform: translateY(18px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ───────────────────────── HOME FEATURE PILLS ───────────────────────── */

.features-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 650px;
  margin-bottom: 1.6rem;
  animation: fade-up 0.6s 0.44s both;
}

.feat-pill {
  min-height: 92px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 0.95rem 1.25rem;
  display: grid;
  grid-template-columns: 74px 1px 1fr;
  align-items: center;
  gap: 1.25rem;
  text-align: left;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  transition: transform 0.2s, box-shadow 0.2s;
}

.feat-pill:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.feat-divider {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, transparent, var(--cyan), transparent);
}

.feat-icon {
  width: 58px;
  height: 58px;
  justify-self: center;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: linear-gradient(145deg, var(--blue), var(--cyan));
  box-shadow: 0 12px 24px rgba(22, 199, 238, 0.24);
}

.feat-icon svg {
  width: 32px;
  height: 32px;
}

.feat-pill p {
  font-size: clamp(0.98rem, 2vw, 1.12rem);
  color: var(--deep-blue);
  line-height: 1.2;
  margin: 0;
}

.feat-pill span {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--muted);
  display: block;
  margin-top: 0.22rem;
}

/* ───────────────────────── BUTTONS & CTA ───────────────────────── */

.cta-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
  animation: fade-up 0.6s 0.58s both;
}

.btn-android,
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.btn-android {
  min-height: 58px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: var(--white);
  font-size: clamp(1rem, 2vw, 1.15rem);
  padding: 0.9rem 2.4rem;
  gap: 10px;
  box-shadow: 0 16px 34px rgba(22, 199, 238, 0.28);
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-android::before,
.btn-android::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 34px;
  height: 18px;
  border-top: 3px solid var(--cyan);
  border-bottom: 3px solid transparent;
  opacity: 0.72;
}

.btn-android::before {
  right: calc(100% + 18px);
  transform: translateY(-50%) rotate(18deg);
  border-left: 3px solid var(--cyan);
  border-radius: 18px 0 0 0;
}

.btn-android::after {
  left: calc(100% + 18px);
  transform: translateY(-50%) rotate(-18deg);
  border-right: 3px solid var(--cyan);
  border-radius: 0 18px 0 0;
}

.btn-android:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(22, 199, 238, 0.38);
  color: var(--white);
  text-decoration: none;
}

.btn-primary,
.btn-secondary {
  min-height: 46px;
  padding: 0.75rem 1.2rem;
  font-size: 1rem;
}

.btn-primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 12px 28px rgba(22, 199, 238, 0.24);
}

.btn-secondary {
  color: var(--deep-blue);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(23, 103, 216, 0.14);
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.scan-note {
  font-family: 'Aptos Display', 'Aptos', sans-serif;
  font-weight: 700;
  color: var(--blue);
  font-size: 1rem;
}

.hero-qr-placeholder {
  width: 150px;
  height: 150px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 18px 35px rgba(18, 63, 145, 0.2);
  border: 1px solid rgba(22, 199, 238, 0.18);
  margin-bottom: 0.5rem;
  display: grid;
  place-items: center;
  color: rgba(18, 63, 145, 0.18);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Padding intérieur léger pour que le QR ne touche pas les bords arrondis. */
  padding: 8px;
}

/* Le QR à l'intérieur doit suivre la taille du conteneur (qui varie selon
   le viewport via les media queries). Sans ça, l'attribut `width="150"` du
   <img> garde 150px en dur et déborde du placeholder réduit sur mobile. */
.hero-qr-placeholder a {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-qr-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

/* ── QR de la section "Télécharger" (en bas de page) ──
   Plus grand que le QR du hero pour rester scannable d'un coup d'œil quand
   le visiteur arrive sur la zone download. Le QR du hero garde sa taille
   compacte (150px) parce qu'il est entouré de boutons CTA et de SVG ; ici
   on a tout l'espace de la carte pour soi. */
.qr-card .hero-qr-placeholder {
  width: 150px;
  height: 150px;
  border-radius: 24px;
  padding: 10px;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Corrige le bouton dans les cartes CTA finales */
.faq-cta-card .btn-android {
  flex-shrink: 0;
  margin-left: auto;
}

/* Retire les petites décorations latérales uniquement dans les CTA finales */
.faq-cta-card .btn-android::before,
.faq-cta-card .btn-android::after {
  display: none;
}

/* ───────────────────────── HOME SECTIONS ───────────────────────── */

.landscape {
  width: 100%;
  margin-top: auto;
  position: relative;
  z-index: 1;
  line-height: 0;
}

.bottom-ribbon {
  display: none;
}

.why,
.how,
.download,
.faq-preview,
.faq-page,
.faq-cta {
  background: transparent;
  padding: 5.5rem 1.4rem;
  position: relative;
  overflow: visible;
}

.how::before,
.download::before {
  display: none;
}

.section-inner {
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.section-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.45rem;
}

.section-title {
  font-size: clamp(1.85rem, 4vw, 3rem);
  color: var(--deep-blue);
  margin-bottom: 0.65rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.section-sub {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 2.4rem;
  max-width: 620px;
}

.steps-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
  font-family: 'Aptos Display', 'Aptos', sans-serif;
  font-weight: 700;
}

.steps-label::before {
  content: '';
  width: 28px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  display: block;
  border-radius: 999px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.6rem;
}

.step {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 26px;
  padding: 1.55rem;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  transition: transform 0.2s, box-shadow 0.2s;
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.step-num {
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg, var(--blue), var(--cyan));
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.94rem;
  margin-bottom: 1rem;
  box-shadow: 0 12px 24px rgba(22, 199, 238, 0.22);
}

.step h3 {
  font-size: 1rem;
  color: var(--deep-blue);
  margin-bottom: 0.4rem;
}

.step p {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted);
  margin: 0;
}

/* Petite capture d'écran illustrant une étape : place un <img> dans le div
   et le cadre pointillé + le libellé disparaissent automatiquement. */
.step-shot {
  margin-top: 1rem;
  min-height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.6rem;
  border: 1.5px dashed rgba(23, 103, 216, 0.30);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.45);
}

.step-shot::before {
  content: 'Capture à insérer';
  color: rgba(59, 95, 156, 0.55);
  font-family: 'Aptos Display', 'Aptos', sans-serif;
  font-size: 0.8rem;
}

.step-shot img {
  display: block;
  width: min(300px, 80vw);
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.step-shot:has(img) {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.step-shot:has(img)::before {
  content: none;
}

/* ───────────────────────── DOWNLOAD SECTION ───────────────────────── */

.download-inner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.dl-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.qr-card,
.ig-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 26px;
  padding: 1.2rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.qr-box {
  width: 94px;
  height: 94px;
  background: var(--white);
  border-radius: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(23, 103, 216, 0.08);
}

.qr-grid {
  display: grid;
  grid-template-columns: repeat(6, 9px);
  grid-template-rows: repeat(6, 9px);
  gap: 3px;
}

.qc {
  background: var(--deep-blue);
  border-radius: 2px;
}

.qe {
  background: transparent;
}

.playstore-badge {
  width: min(100%, 250px);
  height: auto;
}

.qr-label h4,
.ig-label h4 {
  font-size: 1rem;
  color: var(--deep-blue);
  margin-bottom: 0.2rem;
}

.qr-label p,
.ig-label p {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
}

.ig-card {
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ig-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.ig-icon {
  width: 54px;
  height: 54px;
  background: var(--white);
  border-radius: 17px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(23, 103, 216, 0.08);
}

.ig-icon svg {
  width: 30px;
  height: 30px;
}

/* ───────────────────────── LEGAL & CONTACT PAGES ───────────────────────── */

.page-hero {
  min-height: auto;
  padding: 92px 1.4rem 1.6rem;
  display: block;
  text-align: center;
  overflow: hidden;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  box-shadow: 0 12px 28px rgba(22, 199, 238, 0.24);
  position: relative;
  z-index: 1;
}

.hero-date {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.container {
  width: min(1040px, calc(100% - 2.8rem));
  margin: 0 auto 5rem;
}

.toc,
.container > section,
.contact-card {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  padding: clamp(1.3rem, 3vw, 2rem);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.toc {
  margin-bottom: 1.2rem;
}

.toc-title {
  color: var(--deep-blue);
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

/* Numérotation automatique : 1, 2, 3, 3.1, 3.2... */
.toc ol {
  counter-reset: item;
  list-style: none;
  padding-left: 0;
}

/* Sommaire principal en 2 colonnes — CSS grid plutôt que `columns: 2`.
   Raison : `columns` équilibre automatiquement la hauteur des colonnes pour
   les remplir au mieux, ce qui désaligne les titres top-level quand le 3e
   item (Mon compte, plus petit) est ajouté. Avec grid + `align-items: start`,
   chaque <li> reste calé en haut de sa cellule → Locataire et Propriétaire
   sont parfaitement alignés sur la 1re ligne, et Mon compte tombe
   naturellement en col 1 ligne 2, juste sous Locataire. */
.toc > ol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.34rem 2.4rem;       /* row-gap aligne sur l'espacement vertical des <li> */
  align-items: start;
}

.toc li {
  counter-increment: item;
  break-inside: avoid;
  margin: 0.34rem 0;
  color: var(--muted);
}

.toc li::before {
  content: counters(item, ".") ". ";
  font-weight: 600;
  color: var(--muted);
}

/* Sous-parties : 3.1, 3.2... */
.toc li ol {
  counter-reset: item;
  columns: 1;
  padding-left: 1.2rem;
  margin-top: 0.35rem;
}

.container > section {
  margin-top: 1.2rem;
}

.container > section h2,
.contact-card h2 {
  color: var(--deep-blue);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
}

.container > section h3 {
  color: var(--blue);
  font-size: 1.08rem;
  margin: 1.2rem 0 0.45rem;
}

p,
li {
  color: var(--muted);
}

p + p {
  margin-top: 0.75rem;
}

ul,
ol {
  padding-left: 1.25rem;
}

.container > section ul,
.container > section ol {
  margin: 0.7rem 0 0;
}

.container > section li {
  margin: 0.45rem 0;
}

.highlight-box,
.warning-box {
  margin: 1rem 0;
  border-radius: 22px;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(22, 199, 238, 0.22);
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
}

.highlight-box {
  box-shadow: inset 4px 0 0 var(--cyan);
}

.warning-box {
  box-shadow: inset 4px 0 0 #ffb84d;
  background: rgba(255, 247, 230, 0.72);
}

.email-obfuscated {
  color: var(--ink);
  font-family: 'Aptos Display', 'Aptos', sans-serif;
  font-weight: 700;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.contact-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}

.contact-form label {
  display: grid;
  gap: 0.4rem;
  color: var(--deep-blue);
  font-family: 'Aptos Display', 'Aptos', sans-serif;
  font-weight: 700;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(23, 103, 216, 0.18);
  border-radius: 18px;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(22, 199, 238, 0.16);
}

.contact-form textarea {
  resize: vertical;
}

.gotcha-field {
  display: none;
}

/* ───────────────────────── FAQ ───────────────────────── */

.faq-hero {
  min-height: auto;
  padding-bottom: 3.5rem;
}

.faq-preview-grid,
.faq-list {
  display: grid;
  gap: 1rem;
}

.faq-preview-grid {
  /* Une seule colonne : la réponse s'ouvre toujours juste sous sa question
     (un accordéon sur 2 colonnes faisait apparaître la réponse dans l'autre
     colonne). */
  grid-template-columns: 1fr;
}

.faq-item {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 26px;
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  transition: transform 0.2s, box-shadow 0.2s;
}

.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  color: var(--deep-blue);
  font-family: 'Aptos Display', 'Aptos', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: linear-gradient(145deg, var(--blue), var(--cyan));
  box-shadow: 0 10px 20px rgba(22, 199, 238, 0.22);
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-item p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 0.85rem;
}

/* Catégories de la FAQ : regroupent les questions par thème */
.faq-category {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 2.8rem 0 1.1rem;
  font-size: clamp(1.15rem, 3vw, 1.35rem);
  color: var(--deep-blue);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.faq-category:first-of-type {
  margin-top: 0.4rem;
}

.faq-category::before {
  content: '';
  flex: 0 0 30px;
  width: 30px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.faq-preview-link {
  display: flex;
  justify-content: center;
  margin-top: 1.6rem;
}

.faq-cta-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  padding: clamp(1.3rem, 3vw, 2rem);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.faq-cta-card .section-sub {
  margin-bottom: 0;
}

/* ── FAQ « document » : même gabarit que les pages légales ──
   (header/page-hero/.container/.toc/.container > section déjà stylés) */

/* Questions repliables, alignées comme le texte d'une page légale */
.faq-q {
  border-top: 1px solid var(--border);
}

.container > section h3 + .faq-q {
  border-top: 0;
}

.faq-q > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  color: var(--deep-blue);
  font-family: 'Aptos Display', 'Aptos', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}

.faq-q > summary::-webkit-details-marker {
  display: none;
}

.faq-q > summary::after {
  content: '+';
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: linear-gradient(145deg, var(--blue), var(--cyan));
  font-weight: 700;
}

.faq-q[open] > summary {
  color: var(--blue);
}

.faq-q[open] > summary::after {
  content: '−';
}

.faq-a {
  padding: 0 0 1rem;
}

.faq-a ul {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}

.faq-a li {
  margin: 0.35rem 0;
}

.faq-a p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.faq-a p + p {
  margin-top: 0.6rem;
}

/* Emplacement réservé pour une capture d'écran : il suffit de placer un
   <img src="..." alt="..."> dans le div, le cadre pointillé et le libellé
   disparaissent automatiquement. */
.faq-shot {
  margin: 0.5rem 0 0.2rem;
  min-height: 160px;
  display: flex;
  flex-flow: row wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border: 1.5px dashed rgba(23, 103, 216, 0.30);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.45);
}

.faq-shot::before {
  content: 'Capture d’écran à insérer ici';
  color: rgba(59, 95, 156, 0.55);
  font-family: 'Aptos Display', 'Aptos', sans-serif;
  font-size: 0.85rem;
}

.faq-shot img {
  display: block;
  width: min(280px, 80vw);
  height: auto;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.faq-shot:has(img) {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-flow: row wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: flex-start;
}

.faq-shot:has(img)::before {
  content: none;
}

/* ───────────────────────── ABOUT PAGE ───────────────────────── */

.about-hero {
  min-height: auto;
  padding-bottom: 3rem;
}

.about-card p + p {
  margin-top: 1rem;
}

.about-hero-content {
  max-width: 1080px;
  display: grid;
  grid-template-columns: minmax(220px, 330px) 1fr;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  text-align: left;
}

.about-hero-text {
  width: 100%;
}

.about-hero-text .hero-sub {
  margin-bottom: 0;
}

.about-photo-card,
.about-card,
.about-step,
.about-value-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.about-photo-card {
  border-radius: 32px;
  padding: 0.85rem;
  text-align: center;
  transform: rotate(-1.5deg);
}

.about-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.9), rgba(214, 245, 255, 0.75)),
    linear-gradient(135deg, var(--blue), var(--cyan));
}

.about-photo-caption {
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.about-section {
  background: transparent;
  padding: 3rem 1.4rem;
  position: relative;
  overflow: visible;
}

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
}

.about-card {
  border-radius: 28px;
  padding: clamp(1.3rem, 3vw, 2rem);
}

.about-card p {
  color: var(--muted);
}

.about-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.about-step,
.about-value-card {
  border-radius: 26px;
  padding: 1.55rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.about-step:hover,
.about-value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.about-step-num {
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg, var(--blue), var(--cyan));
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Aptos Display', 'Aptos', sans-serif;
  font-weight: 700;
  font-size: 0.94rem;
  margin-bottom: 1rem;
  box-shadow: 0 12px 24px rgba(22, 199, 238, 0.22);
}

.about-step h3,
.about-value-card h3 {
  font-size: 1rem;
  color: var(--deep-blue);
  margin-bottom: 0.45rem;
  font-family: 'Aptos Display', 'Aptos', sans-serif;
  font-weight: 700;
}

.about-step p,
.about-value-card p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
}

.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.about-roadmap {
  margin-top: 1.2rem;
}

@media (max-width: 860px) {
  .about-hero-content,
  .about-grid,
  .about-timeline,
  .about-values {
    grid-template-columns: 1fr;
  }

  .about-hero-content {
    text-align: center;
  }

  .about-photo-card {
    width: min(280px, 100%);
    margin: 0 auto;
  }

  .about-hero-text .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 520px) {
  .about-section {
    padding: 2.5rem 1rem;
  }

  .about-hero {
    padding-bottom: 2.5rem;
  }

  #qui {
    padding-top: 1.5rem;
  }

  #avenir {
    padding-bottom: 1rem;
  }

  #avenir + .faq-cta {
    padding-top: 1rem;
  }

  .about-photo-card,
  .about-card,
  .about-step,
  .about-value-card {
    border-radius: 22px;
  }
}


/* Espacements compacts sur la page À propos */

#qui {
  padding-top: 2rem;
}

#avenir {
  padding-bottom: 1.5rem;
}

#avenir + .faq-cta {
  padding-top: 1.5rem;
}

.faq-cta {
  padding-bottom: 4rem;
}

/* ───────────────────────── FOOTER ───────────────────────── */

footer,
.site-footer {
  background: linear-gradient(90deg, #083287, #105fd1);
  color: rgba(255, 255, 255, 0.86);
  text-align: center;
  padding: 1.8rem 1.4rem;
  font-size: 0.88rem;
}

footer a,
.site-footer a {
  color: var(--white);
  text-decoration: none;
}

footer a:hover,
.site-footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer-links {
  margin-top: 0.7rem;
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.footer-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

/* ───────────────────────── RESPONSIVE ───────────────────────── */

@media (max-width: 860px) {
  .page-hero {
    padding-top: 84px;
    padding-bottom: 1.4rem;
  }

  header,
  .site-header {
    height: 66px;
  }

  nav a:not(.nav-pill):not(.nav-ig),
  .site-header nav a:not(.nav-pill):not(.nav-ig) {
    display: none;
  }

  .hero {
    padding-top: 92px;
    background: transparent;
  }

  /* Sommaire principal en 1 colonne sur mobile (sinon la grid 1fr 1fr
     desktop reste active et écrase les titres sur les petits écrans).
     Les sous-listes restent en `columns: 1` par défaut, rien à override. */
  .toc > ol {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .faq-preview-grid {
    grid-template-columns: 1fr;
  }

  .faq-cta-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .faq-cta-card .btn-android {
    margin-left: 0;
  }

  .feat-pill {
    grid-template-columns: 62px 1px 1fr;
    gap: 0.9rem;
    border-radius: 21px;
  }

  .feat-icon {
    width: 52px;
    height: 52px;
  }

  .steps,
  .download-inner {
    grid-template-columns: 1fr;
  }

  .download-inner {
    gap: 1.8rem;
  }

  .map-line-left,
  .map-line-right {
    opacity: 0.55;
    width: 180px;
  }

  .hero-qr-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    padding: 6px;
  }

  /* Sur mobile, on aère le bas du hero pour qu'il ne colle pas au texte
     "Louer avec LokaVélo ?" de la section suivante (l'enchaînement direct
     hero → .why donnait l'impression que les deux blocs se touchaient). */
  .hero {
    padding-bottom: 2.5rem;
  }

  /* Carte "Google Play Store" + carte Instagram : sur mobile, le QR et le
     texte se retrouvaient collés à 1.2rem de gap. On augmente l'espace pour
     que la lecture reste confortable même quand le QR est petit. */
  .qr-card,
  .ig-card {
    gap: 1.6rem;
  }

  /* Override du QR download sur tablette : reste imposant pour conserver
     l'impact visuel mais s'adapte à la largeur réduite de la carte. */
  .qr-card .hero-qr-placeholder {
    width: 140px;
    height: 140px;
    border-radius: 22px;
    padding: 9px;
  }
}

@media (max-width: 520px) {
  .page-hero {
    padding-top: 78px;
    padding-bottom: 1.2rem;
  }

  header,
  .site-header {
    padding: 0 1rem;
  }

  .logo img {
    height: 42px;
  }

  .nav-ig,
  .nav-pill {
    padding: 0.42rem 0.82rem;
    font-size: 0.82rem;
  }

  .hero h1 {
    font-size: clamp(2.15rem, 11vw, 3.2rem);
  }

  .hero-sub {
    font-size: 1rem;
  }

  .feat-pill {
    min-height: 86px;
    padding: 0.82rem 0.9rem;
    grid-template-columns: 50px 1px 1fr;
  }

  .feat-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }

  .feat-icon svg {
    width: 27px;
    height: 27px;
  }

  .feat-pill p {
    font-size: 0.92rem;
  }

  .feat-pill span {
    display: none;
  }

  .btn-android::before,
  .btn-android::after {
    display: none;
  }

  .qr-card,
  .ig-card {
    align-items: flex-start;
  }

  .hero-qr-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 14px;
    padding: 5px;
  }

  /* Petit écran : on aère encore davantage le bas du hero. */
  .hero {
    padding-bottom: 2rem;
  }

  /* Sur très petit écran, on garde un gap raisonnable dans .ig-card mais on
     passe la .qr-card en COLONNE : le QR du download est désormais grand
     (170px) et un layout row le ferait dévorer toute la largeur, laissant
     le texte "Google Play Store / Disponible…" écrasé à 30px de large.
     QR centré au-dessus + texte centré en dessous : lecture confortable. */
  .ig-card {
    gap: 1.4rem;
  }

  .qr-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  /* Override du QR download sur smartphone. Reste très grand pour rester
     lisible/scannable depuis ~30 cm. */
  .qr-card .hero-qr-placeholder {
    width: 140px;
    height: 140px;
    border-radius: 20px;
    padding: 8px;
  }

  .container {
    width: min(100% - 1.5rem, 1040px);
  }

  .toc,
  .container > section,
  .contact-card,
  .faq-cta-card {
    border-radius: 22px;
    padding: 1.1rem;
  }
}

/* ───────────────────────── ABOUT PAGE OVERRIDES ───────────────────────── */

/* Espacement général de la page À propos */
.hero.about-hero {
  min-height: auto !important;
  padding-bottom: 2rem !important;
}

.about-section {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.about-section + .about-section {
  padding-top: 1.75rem !important;
}

#qui {
  padding-top: 1rem !important;
}

#avenir {
  padding-bottom: 1rem !important;
}

#avenir + .faq-cta {
  padding-top: 1rem !important;
  padding-bottom: 3rem !important;
}

/* Section "Qui je suis" plus équilibrée */
#qui .section-inner {
  max-width: 1180px;
}

.about-grid-wide {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) !important;
  gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  align-items: start;
}

.about-intro {
  max-width: 300px;
}

/* Encadré texte + photo */
.about-card-with-photo {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  width: 100%;
}

.about-card-photo {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 22px;
  box-shadow: 0 14px 28px rgba(18, 63, 145, 0.14);
}

.about-card-text {
  width: 100%;
  max-width: none;
}

.about-card-text p + p {
  margin-top: 1rem;
}

/* Images optionnelles dans les autres encadrés */
.about-step-image,
.about-value-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  margin-bottom: 1rem;
  box-shadow: 0 12px 24px rgba(18, 63, 145, 0.12);
}

/* Mobile et tablette */
@media (max-width: 860px) {
  .about-grid-wide,
  .about-card-with-photo {
    grid-template-columns: 1fr !important;
  }

  .about-intro,
  .about-card-text {
    max-width: none;
  }

  .about-card-photo {
    max-width: 100%;
    aspect-ratio: 16 / 10;
  }

  .faq-cta-card .btn-android {
    margin-left: 0;
  }
}

@media (max-width: 520px) {
  .hero.about-hero {
    padding-bottom: 1.5rem !important;
  }

  .about-section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  #qui {
    padding-top: 0.75rem !important;
  }

  #avenir + .faq-cta {
    padding-top: 0.75rem !important;
  }

  .about-card-with-photo {
    gap: 1rem;
  }
}

/* Décalage des ancres sous le header fixe */
section[id],
h2[id],
h3[id] {
  scroll-margin-top: 90px;
}

@media (max-width: 860px) {
  section[id],
  h2[id],
  h3[id] {
    scroll-margin-top: 80px;
  }
}