/* ═══════════════════════════════════════════════════════════
   ACB Taxis — Site vitrine
   Direction artistique alignée sur ACB Geo v2.1.

   Parti pris : sobriété éditoriale. Les surfaces sont plates,
   séparées par des filets et non par des ombres portées. Le bleu
   est réservé aux actions. La hiérarchie est portée par la
   typographie et l'alignement, pas par des cartes flottantes —
   c'est ce qui distingue une compagnie établie d'une page
   d'atterrissage générique.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800&display=swap');

:root {
  --bg: #f6f7f9;
  --sheet: #ffffff;
  --tint: #eef1f6;
  --rule: #dfe4ec;
  --rule-strong: #c8d1de;
  --text: #101c31;
  --text2: #4a5769;
  --text3: #8592a5;
  --blue: #2563eb;
  --blue2: #1d54cf;
  --maxw: 1240px;
  --gut: clamp(20px, 4vw, 44px);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

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

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ── En-tête ─────────────────────────────────────────────── */

header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246, 247, 249, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}

.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand-text .name { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.035em; }

.nav-links { display: flex; align-items: center; gap: 2px; }

.nav-links > a { padding: 8px 13px; font-size: 14.5px; font-weight: 600; color: var(--text2); border-radius: 7px; }
.nav-links > a:hover { color: var(--text); }
/* Un filet sous l'onglet courant plutôt qu'une pastille colorée. */
.nav-links > a.active { color: var(--text); border-radius: 0; box-shadow: inset 0 -2px 0 var(--blue); }

.nav-links > a.nav-cta {
  margin-left: 12px;
  padding: 10px 16px;
  border-radius: 9px;
  color: #ffffff;
  font-weight: 700;
  background: var(--blue2);
}

.nav-links > a.nav-cta:hover { background: #17459f; color: #ffffff; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.ico-burger { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gut) 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links > a { padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .nav-links > a.active { box-shadow: none; color: var(--blue2); }
  .nav-links > a.nav-cta { margin: 14px 0 0; text-align: center; border-radius: 9px; border-bottom: none; }
}

/* ── Hero en deux colonnes ───────────────────────────────── */
/* Le texte est tenu au bord gauche de la grille, la scène occupe la
   colonne de droite et file jusqu'au bord de l'écran. Le hero pleine
   largeur laissait un vide à gauche sur grand écran, et obligeait à
   poser un dégradé sur l'image pour rendre le texte lisible. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(52px, 9vh, 92px);
  padding-right: clamp(28px, 4vw, 64px);
  padding-left: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
}

.hero-bg { position: relative; overflow: hidden; background: var(--tint); border-left: 1px solid var(--rule); }
.hero-bg canvas { width: 100%; height: 100%; display: block; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-inner { padding-inline: var(--gut); padding-block: clamp(44px, 7vh, 68px) 36px; }
  .hero-bg { height: clamp(280px, 42vh, 400px); border-left: none; border-top: 1px solid var(--rule); }
}

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text2); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }

.hero-title {
  margin-top: 18px;
  font-size: clamp(40px, 5.2vw, 66px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.99;
  text-wrap: balance;
}

.hero-title b { font-weight: 800; color: var(--blue2); }

.hero-sub { margin-top: 20px; max-width: 46ch; font-size: clamp(15.5px, 1.5vw, 17.5px); color: var(--text2); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* Ligne de crédibilité : des faits vérifiables, pas un slogan. */
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--text3);
}

.hero-trust span { white-space: nowrap; }
.hero-trust b { color: var(--text2); font-weight: 700; }

/* ── Boutons ─────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 48px; padding-inline: 20px;
  border-radius: 9px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  transition: background 0.16s, border-color 0.16s;
}

.btn-primary { color: #ffffff; background: var(--blue2); }
.btn-primary:hover { background: #17459f; }
.btn-whatsapp { color: var(--text); background: transparent; border: 1px solid var(--rule-strong); }
.btn-whatsapp:hover { border-color: var(--text3); background: var(--sheet); }

/* ── Sections ────────────────────────────────────────────── */

.block { padding-block: clamp(54px, 8vh, 92px); }
.block + .block { border-top: 1px solid var(--rule); }

.page-header { padding-block: clamp(44px, 6vh, 72px) clamp(28px, 4vh, 44px); border-bottom: 1px solid var(--rule); }
.page-header h1 { font-size: clamp(32px, 4.6vw, 50px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
.page-header p { margin-top: 14px; max-width: 62ch; font-size: 16px; color: var(--text2); }

/* Structure éditoriale : le titre de section tient la colonne de gauche, le
   contenu occupe la droite. En bandes pleine largeur, un titre court laissait
   la moitié droite de l'écran vide et le contenu paraissait posé au hasard. */
.block .container:has(> .section-head) {
  display: grid;
  grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

@media (max-width: 900px) {
  .block .container:has(> .section-head) { grid-template-columns: 1fr; row-gap: 26px; }
}

.section-head { margin-bottom: clamp(26px, 4vh, 38px); }
.block .container:has(> .section-head) > .section-head { margin-bottom: 0; position: sticky; top: 96px; }
@media (max-width: 900px) { .block .container:has(> .section-head) > .section-head { position: static; } }
.section-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text3); margin-bottom: 12px; }
.section-title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.12; text-wrap: balance; }

/* ── Chiffres : une rangée, des filets, aucune boîte ─────── */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
         border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat { padding: 26px 26px 26px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .stat + .stat { padding-left: 26px; border-left: 1px solid var(--rule); } }
.stat .num { font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .label { margin-top: 9px; font-size: 13px; color: var(--text2); }

/* ── Prestations : une liste éditoriale, pas des cartes ──── */

/* Nombre de colonnes FIXÉ, jamais auto-fit : les filets sont posés au
   nth-child, donc ils ne tombent juste que si la grille a bien le nombre de
   colonnes qu'ils supposent. En auto-fit, une quatrième colonne apparaissait
   et les traits verticaux se retrouvaient au mauvais endroit. */
.grid, .grid--pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }

.card { padding: 30px 0; border-bottom: 1px solid var(--rule); background: transparent; }
.grid > .card:last-child, .grid--pair > .card:last-child { border-bottom: none; }

@media (min-width: 720px) {
  .grid, .grid--pair { grid-template-columns: 1fr 1fr; }
  .grid > .card, .grid--pair > .card { padding-inline: 28px; }
  .grid > .card:nth-child(odd), .grid--pair > .card:nth-child(odd) { padding-left: 0; }
  .grid > .card:nth-child(even), .grid--pair > .card:nth-child(even) { border-left: 1px solid var(--rule); }
  /* Une dernière ligne incomplète : la cellule orpheline garde son filet bas,
     qui coïncide alors avec celui du conteneur. */
  .grid > .card:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}

/* L'icône n'est plus une pastille bleue : juste un trait, discret. */
.card-icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--blue2);
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}

.card-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.card h3 { font-size: 17px; font-weight: 750; letter-spacing: -0.025em; margin-bottom: 10px; }
.card p { font-size: 14.5px; color: var(--text2); line-height: 1.62; }

/* ── Arguments : deux colonnes filetées ──────────────────── */

.checklist { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0;
             border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .checklist { grid-template-columns: 1fr 1fr; } }
.checklist li { padding: 18px 26px; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--text2); }
.checklist li::before { content: '—'; margin-right: 10px; color: var(--blue2); font-weight: 700; }

@media (min-width: 760px) {
  .checklist li:nth-child(odd) { padding-left: 0; }
  .checklist li:nth-child(even) { border-left: 1px solid var(--rule); }
}

/* ── Bandeau d'appel : à plat, aligné à gauche ───────────── */

.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 40px; row-gap: 22px;
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--sheet);
  text-align: left;
}

.cta-band h2 { grid-column: 1; grid-row: 1; font-size: clamp(21px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; max-width: 20ch; }
.cta-band p { grid-column: 1; grid-row: 2; margin-top: 0; font-size: 15px; color: var(--text2); }
.cta-band .hero-actions { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
@media (max-width: 720px) {
  .cta-band { grid-template-columns: 1fr; }
  .cta-band .hero-actions { grid-column: 1; grid-row: auto; }
}

/* ── Contact ─────────────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.info-row { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.info-row:first-child { border-top: 1px solid var(--rule); }
.info-row .ic { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--text3); margin-top: 2px; }
.info-row .ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.info-row .label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text3); }
.info-row .value { margin-top: 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }

.form-card { padding: 30px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--sheet); }

.field { display: block; margin-bottom: 16px; }
.field .label { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 700; color: var(--text2); }

.field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--rule-strong);
  background: var(--sheet);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  transition: border-color 0.16s;
}

.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.field textarea { resize: vertical; min-height: 130px; }

/* ── Pages de texte ──────────────────────────────────────── */

.prose { max-width: 72ch; }
.prose h2 { margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: clamp(19px, 2.4vw, 24px); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.prose h3 { margin-top: 26px; font-size: 16px; font-weight: 750; letter-spacing: -0.02em; }
.prose p { margin-top: 13px; font-size: 15px; color: var(--text2); line-height: 1.72; }
.prose ul { margin-top: 13px; padding-left: 20px; }
.prose li { margin-top: 8px; font-size: 15px; color: var(--text2); line-height: 1.72; }
.prose a { color: var(--blue2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text); font-weight: 700; }

/* ── Pied de page ────────────────────────────────────────── */

footer { border-top: 1px solid var(--rule); padding-block: clamp(44px, 6vh, 62px) 26px; }

.footer-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr; gap: 30px; } }

.footer-brand p { margin-top: 14px; max-width: 38ch; font-size: 14px; color: var(--text2); }
.footer-col h4 { font-size: 11px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text3); margin-bottom: 14px; }
.footer-col a { display: block; padding: 5px 0; font-size: 14.5px; color: var(--text2); }
.footer-col a:hover { color: var(--blue2); }

.footer-bottom { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--text3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}