/* ==========================================================================
   Taxi VTC Marseille — Panneau de Direction
   Monde : signalétique d'aéroport et de gare. Blanc, un bleu signal,
   flèches directionnelles, filets capillaires, chiffres de taille panneau.
   Aucune carte, aucun coin arrondi décoratif, aucune ombre décorative.
   ========================================================================== */

/* --- Fontes de signalétique, auto-hébergées ------------------------------ */
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- Jetons -------------------------------------------------------------- */
:root {
  --blanc:       #FFFFFF;
  --ciel-voile:  #F4F9FD;
  --ciel-pale:   #E6F1FA;
  --ciel:        #CFE4F3;
  --trait:       #BDD6E8;
  --trait-fort:  #8FB6D2;
  --bleu:        #0F6FB8;
  --bleu-nuit:   #0A4C82;
  --nuit:        #062A42;   /* le fond de l'illustration du hero */
  --encre:       #10202E;
  --encre-2:     #4A6377;
  --service:     #12855A;
  --jaune:       #F1C40F;   /* signal taxi, réservé au numéro du hero */
  --service-clair: #4BE39B; /* même lampe, sur le bleu profond du hero */
  --halo-clair:  rgba(75, 227, 155, 0.22);
  --halo-clair-2: rgba(75, 227, 155, 0.08);

  --sans: 'Barlow', system-ui, -apple-system, sans-serif;
  --cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;

  --gouttiere: 20px;
  --largeur: 1120px;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

/* Surfaces du navigateur : elles portent le design autant que le reste. */
::selection { background: var(--bleu); color: var(--blanc); }
:root { caret-color: var(--bleu); accent-color: var(--bleu); scrollbar-color: var(--trait-fort) var(--ciel-voile); }
:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
}
a { color: var(--bleu); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ciel-voile); }
::-webkit-scrollbar-thumb { background: var(--trait-fort); border: 3px solid var(--ciel-voile); }
::-webkit-scrollbar-thumb:hover { background: var(--bleu); }

/* Masqué sans sortir du flux vers la gauche : un décalage négatif élargit
   la zone défilable sur les très petits écrans. */
.saut-lien {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--bleu); color: var(--blanc);
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.08em;
  z-index: 60;
}
.saut-lien:focus {
  width: auto; height: auto;
  margin: 0; padding: var(--e3) var(--e5);
  overflow: visible;
  clip-path: none;
  left: var(--gouttiere); top: var(--e3);
}

.cadre {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* Titres de section : capitales condensées, au-dessus de la taille du corps. */
.etiquette {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre);
}

/* Flèches et pictogrammes : un seul trait, une seule graisse. */
.picto { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
.picto--sm { width: 16px; height: 16px; stroke-width: 2; }

/* ==========================================================================
   Bandeau de panneau
   ========================================================================== */
.bandeau {
  border-bottom: 1px solid var(--trait);
  background: var(--blanc);
}
.bandeau__interieur {
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-height: 56px;
  padding-block: var(--e2);
}
.etat { margin-right: auto; }
.etat {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--service);
  white-space: nowrap;
}
.lampe {
  width: 9px; height: 9px; flex: none;
  background: var(--service);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(18, 133, 90, 0.16);
}
.langue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bleu);
  text-decoration: none;
  padding: 6px var(--e2);
  border: 1px solid var(--trait);
  transition: background 0.18s var(--sortie), border-color 0.18s var(--sortie);
}
.langue:hover, .langue:focus-visible { background: var(--ciel-pale); border-color: var(--bleu); }
.drapeau {
  width: 24px;
  height: 16px;
  flex: none;
  display: block;
  outline: 1px solid rgba(255, 255, 255, 0.35);
  outline-offset: -1px;
}
@media (pointer: coarse), (max-width: 699px) { .langue { min-height: 44px; padding-inline: var(--e3); } }

@media (max-width: 559px) {
  .bandeau__interieur { gap: var(--e3); }
  .etat { font-size: 0.6875rem; letter-spacing: 0.07em; }
  .langue { font-size: 0.6875rem; padding: 5px 7px; }
}

/* ==========================================================================
   La plaque — premier viewport
   ========================================================================== */
.plaque { padding-block: var(--e7) var(--e6); }

.plaque__titre {
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(1.75rem, 7.5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--encre);
  margin-bottom: var(--e3);
}

/* Le numéro : chiffres de taille panneau, tabulaires. */
.numero {
  display: block;
  text-decoration: none;
  color: var(--encre);
  border-top: 2px solid var(--encre);
  border-bottom: 2px solid var(--encre);
  padding-block: var(--e4);
}
.numero__chiffres {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: clamp(2.5rem, 11.2vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  white-space: nowrap;
  color: var(--encre);
  transition: color 0.18s var(--sortie);
}
.numero:hover .numero__chiffres,
.numero:focus-visible .numero__chiffres { color: var(--bleu); }
.numero:active .numero__chiffres { color: var(--bleu-nuit); }

/* La barre d'appel : l'action primaire, pleine largeur, atteignable au pouce. */

.plaque__note {
  margin-top: var(--e3);
  font-size: 0.9375rem;
  color: var(--encre-2);
}

/* ==========================================================================
   Le hero en situation.
   L'illustration est SOMBREE UNIFORMEMENT, jamais masquée : un voile plat
   sur toute la hauteur relève le contraste du texte tout en laissant chaque
   forme lisible. Le fondu vers le blanc n'occupe que le pied, et interpole
   en oklab pour ne pas passer par un gris désaturé.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background-color: var(--nuit);
  background-image: url('../img/marseille-portrait.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom in oklab,
      rgba(6, 42, 66, 0)    90%,
      var(--ciel-pale)      97%,
      var(--blanc)         100%),
    linear-gradient(to bottom in oklab,
      rgba(6, 42, 66, 0.74)  0%,
      rgba(6, 42, 66, 0.52) 12%,
      rgba(6, 42, 66, 0.56) 45%,
      rgba(6, 42, 66, 0.62) 90%);
}

/* Le bandeau de marque se pose sur l'illustration, en blanc. */
.hero .bandeau { background: transparent; border-bottom: 0; }
.hero .etat    { color: var(--blanc); }
.hero .lampe   { background: var(--service-clair); box-shadow: 0 0 0 3px var(--halo-clair); }
.hero .langue  { color: var(--blanc); border-color: var(--blanc); }
.hero .langue:hover, .hero .langue:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--blanc);
}

/* --- Le premier écran : titre, numéro, voiture, bouton. Tout centré, rien qui sépare. --- */
.hero .plaque { padding-top: 100px; padding-bottom: 88px; text-align: center; }
.hero .plaque__titre {
  color: var(--blanc);
  font-size: clamp(2.25rem, 9.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  max-width: 19ch;
  margin-inline: auto;
  margin-bottom: var(--e5);
}
.hero .plaque__note { color: rgba(255, 255, 255, 0.84); margin-top: var(--e4); }

/* Le numéro : centré, sans filets, aussi grand que la largeur le permet. */
.numero--jaune {
  border: 0;
  padding: 0;
  display: block;
}
.numero--jaune .numero__chiffres {
  color: var(--jaune);
  font-size: clamp(2.75rem, 12.4vw, 6.5rem);
  letter-spacing: -0.02em;
}
.numero--jaune .numero__chiffres--intl { font-size: clamp(2.3rem, 10.4vw, 5.4rem); }
.numero--jaune:hover .numero__chiffres,
.numero--jaune:focus-visible .numero__chiffres,
.numero--jaune:active .numero__chiffres { color: var(--blanc); }

/* La voiture vient se glisser sous le numéro, sans cadre, sans ombre. */
.hero__voiture {
  display: block;
  margin: -6px auto 0;
  max-width: 560px;
  text-decoration: none;
}
.hero__voiture img { width: 100%; }

/* Le bouton d'appel : une pastille, un combiné, pas de flèche. */
.bouton-appel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  min-height: 64px;
  margin-top: var(--e2);
  padding: var(--e4) var(--e7);
  border-radius: 999px;
  border: 2px solid var(--blanc);
  background: var(--bleu);
  color: var(--blanc);
  text-decoration: none;
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(1.375rem, 5.6vw, 1.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s var(--sortie), transform 0.2s var(--sortie);
}
.bouton-appel .picto { width: 26px; height: 26px; }
.bouton-appel:hover, .bouton-appel:focus-visible { background: var(--bleu-nuit); }
.bouton-appel:active { background: var(--bleu-nuit); transform: translateY(1px); }

/* Le texte d'introduction, descendu au-dessus des destinations. */
.intro {
  max-width: 62ch;
  margin-bottom: var(--e6);
  font-size: 1.0625rem;
  color: var(--encre-2);
}

@media (prefers-reduced-motion: no-preference) {
  .hero .lampe { animation: veille-claire 2.8s ease-in-out infinite; }
  @keyframes veille-claire {
    0%, 100% { box-shadow: 0 0 0 3px var(--halo-clair); }
    50%      { box-shadow: 0 0 0 6px var(--halo-clair-2); }
  }
}

/* ==========================================================================
   Destinations — le panneau directionnel
   ========================================================================== */
.destinations { padding-block: var(--e8) var(--e6); }
.destinations__titre { margin-bottom: var(--e4); }

/* Chaque ligne est un lien d'appel : la flèche promet une action qui existe. */
.destination {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--e4);
  row-gap: 2px;
  min-height: 64px;
  padding-block: var(--e3);
  border-top: 1px solid var(--trait);
  color: var(--encre);
  text-decoration: none;
  transition: background 0.18s var(--sortie);
}
.destinations li:last-child .destination { border-bottom: 1px solid var(--trait); }
.destination:hover, .destination:focus-visible { background: var(--ciel-voile); }
.destination__picto { grid-row: 1 / span 2; color: var(--bleu); }
.destination__nom {
  grid-column: 2;
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(1.0625rem, 4.4vw, 1.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  text-wrap: balance;
}
.destination__code {
  grid-column: 2;
  font-family: var(--sans);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--encre-2);
}
.destination__fleche {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--bleu);
  transition: transform 0.3s var(--sortie), color 0.18s var(--sortie);
}
.destination:hover .destination__fleche,
.destination:active .destination__fleche { transform: translateX(5px); color: var(--bleu-nuit); }
.destination:active { background: var(--ciel-pale); }

/* ==========================================================================
   Le tableau des prestations — un panneau, pas des cartes
   ========================================================================== */
.prestations { padding-block: var(--e6) var(--e8); }
.prestations__titre { margin-bottom: var(--e5); }

.tableau { border-top: 2px solid var(--encre); }

.presta {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: var(--e4) var(--e5);
  align-items: start;
  align-content: start;
  padding-block: var(--e5);
  border-bottom: 1px solid var(--trait);
}
.presta__vignette { grid-row: span 2; }
.presta__vignette img { width: 108px; mix-blend-mode: multiply; }
.presta__nom {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--e1);
}
.presta__resume { font-size: 0.9375rem; color: var(--encre-2); }
.presta__liste { grid-column: 2; display: grid; gap: 6px; }
.presta__liste li {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.presta__liste .picto { color: var(--bleu); position: relative; top: 3px; }

/* ==========================================================================
   La plaque de fin
   ========================================================================== */
.fin {
  background: var(--ciel-pale);
  border-top: 1px solid var(--trait);
  padding-block: var(--e8);
  text-align: center;
}
.fin__phrase {
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(1.125rem, 4.4vw, 1.5rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre);
  margin-bottom: var(--e5);
}
/* Bloc, pas inline-block : sur desktop il reste de la place sur la ligne et
   la pastille remonterait se coller au numéro, alignée sur la ligne de base. */
.fin .numero { display: block; border: 0; padding: 0; }
.fin .numero .numero__chiffres { font-size: clamp(2.5rem, 11.6vw, 5.5rem); }
.fin .numero .numero__chiffres--intl { font-size: clamp(2.3rem, 10.4vw, 5.4rem); }
.fin .bouton-appel { margin-top: var(--e5); }

/* ==========================================================================
   Pied
   ========================================================================== */
.pied {
  border-top: 1px solid var(--trait);
  padding-block: var(--e5);
  background: var(--blanc);
}
.pied__interieur {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--encre-2);
}
.pied__mentions { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Barre d'appel fixe — mobile uniquement, atteignable au pouce
   ========================================================================== */
.barre-fixe {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  min-height: 62px;
  padding: var(--e3) var(--e4);
  padding-bottom: max(var(--e3), env(safe-area-inset-bottom));
  background: var(--bleu);
  color: var(--blanc);
  text-decoration: none;
  font-family: var(--cond);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-top: 2px solid var(--bleu-nuit);
  transform: translateY(100%);
  transition: transform 0.42s var(--sortie);
}
.barre-fixe:active { background: var(--bleu-nuit); }
.barre-fixe__num { font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
body.est-descendu .barre-fixe { transform: translateY(0); }

@media (min-width: 700px) {
  .barre-fixe { display: none; }
}
@media (max-width: 699px) {
  body { padding-bottom: 74px; }
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 700px) {
  body { font-size: 18px; }

  .hero { background-image: url('../img/marseille-paysage.webp'); }
  @media (min-resolution: 2dppx) {
    .hero { background-image: url('../img/marseille-paysage-2x.webp'); }
  }
  .hero .plaque { padding-top: 96px; padding-bottom: 176px; }
  :root { --gouttiere: 40px; }

  .plaque { padding-block: var(--e9) var(--e7); }
  .hero .plaque__titre {
    font-size: clamp(2.75rem, 4.4vw, 3.875rem);
    max-width: 24ch;
    margin-bottom: var(--e5);
  }
  .hero__voiture { max-width: 580px; margin-top: -18px; }

  .destination { grid-template-columns: auto minmax(0, 1fr) auto auto; min-height: 76px; }
  .destination__nom { grid-column: 2; grid-row: 1; }
  .destination__code { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; }
  .destination__fleche { grid-column: 4; grid-row: 1; }

  .destination { padding-block: var(--e5); }

  .tableau {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--trait);
  }
  .presta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e3);
    padding: var(--e6) var(--e5);
    border-bottom: 0;
    border-left: 1px solid var(--trait);
  }
  .presta:first-child { border-left: 0; padding-left: 0; }
  .presta:last-child { padding-right: 0; }
  .presta__vignette { grid-row: auto; }
  .presta__vignette img { width: 168px; }
  .presta__liste { grid-column: auto; }
}

/* Écrans larges mais peu hauts (portables 720p) : le bouton doit rester
   visible sans défiler, c'est le seul geste que la page attend. */
@media (min-width: 700px) {
  .hero { min-height: 0; }
}

@media (min-width: 700px) and (max-height: 820px) {
  .hero .plaque { padding-top: 48px; padding-bottom: 132px; }
  .hero .plaque__titre { font-size: clamp(2.25rem, 3.4vw, 3rem); margin-bottom: var(--e4); }
  .hero__voiture { max-width: 460px; }
  .bouton-appel { min-height: 58px; }
}

@media (min-width: 1000px) {
  .numero__chiffres { letter-spacing: -0.03em; }
}

/* ==========================================================================
   Le moment de mouvement : la plaque se pose une fois, en sortie
   exponentielle, depuis un état déjà visible.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .pose { animation: pose 0.72s var(--sortie) both; }
  .pose--2 { animation-delay: 0.06s; }
  .pose--3 { animation-delay: 0.12s; }
  @keyframes pose {
    from { transform: translateY(14px); opacity: 0.55; }
    to   { transform: none; opacity: 1; }
  }
  .lampe { animation: veille 2.8s ease-in-out infinite; }
  @keyframes veille {
    0%, 100% { box-shadow: 0 0 0 3px rgba(18, 133, 90, 0.16); }
    50%      { box-shadow: 0 0 0 6px rgba(18, 133, 90, 0.06); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .barre-fixe { transition: none; }
}

@media print {
  .barre-fixe, .langue, .saut-lien { display: none; }
  body { padding-bottom: 0; }
}