/* ==========================================================================
   AF TRANS — site public
   Cette feuille sert l'accueil, la page « La flotte » et le recrutement. Elle
   vient après styles.css, dont
   elle réutilise les jetons, les polices et les couleurs de marque : la
   vitrine et le portail restent ainsi de la même maison.

   La page est forcée en thème sombre (data-theme="dark" sur <html>) : les
   photos sont presque toutes nocturnes, et le fond clair les faisait flotter.
   ========================================================================== */

.vitrine {
  background: var(--canvas);
  color: var(--ink);
}

.v-largeur {
  margin: 0 auto;
  padding: 0 24px;
  max-width: 1180px;
}

.saut-contenu {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 60;
  border-radius: 0 0 10px 10px;
  background: var(--brand);
  padding: 10px 16px;
  color: #fff;
  font-size: 13px;
  transition: top 160ms ease;
}

.saut-contenu:focus { top: 0; }

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

.v-entete {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}

/* Au premier défilement, l'en-tête se pose sur un fond : sans cela le menu
   devient illisible dès qu'une photo claire passe dessous. */
.v-entete.est-posee {
  border-bottom-color: var(--line);
  background: rgb(8 10 14 / 82%);
  backdrop-filter: saturate(140%) blur(14px);
}

.v-entete-corps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
}

.v-marque {
  display: flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}

.v-marque img { width: 42px; height: auto; }

.v-marque strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.v-marque small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.v-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.v-menu a {
  border-radius: 9px;
  padding: 9px 13px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease;
}

.v-menu a:hover { background: rgb(255 255 255 / 6%); color: var(--ink); }

/* L'entrée du portail est la seule action de l'en-tête : elle se distingue
   du reste de la navigation, qui ne fait que descendre dans la page. */
.v-portail {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  border: 1px solid var(--brand-line);
  background: rgb(255 59 82 / 12%);
  color: var(--brand) !important;
  font-weight: 600 !important;
}

.v-portail:hover {
  border-color: var(--brand);
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 0 22px var(--brand-glow);
}

.v-portail-point {
  display: block;
  border-radius: 50%;
  background: currentcolor;
  width: 6px;
  height: 6px;
  animation: v-pouls 2.4s ease-in-out infinite;
}

@keyframes v-pouls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.v-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  padding: 10px;
  cursor: pointer;
}

.v-burger span {
  display: block;
  border-radius: 2px;
  background: var(--ink);
  width: 17px;
  height: 2px;
  transition: 180ms ease;
}

/* --- Bandeau d'ouverture -------------------------------------------------- */

.v-hero {
  display: grid;
  position: relative;
  align-items: end;
  margin-top: -74px;
  min-height: min(88vh, 760px);
  overflow: hidden;
  isolation: isolate;
}

.v-hero-fond {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.v-hero-fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Léger appui sur les couleurs, et un poil d'échelle pour qu'aucun bord ne
     laisse voir le fond une fois la photo recadrée. */
  filter: saturate(108%) contrast(104%);
  transform: scale(1.04);
}

.v-hero-degrade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(8 10 14 / 78%) 0%, rgb(8 10 14 / 28%) 34%, rgb(8 10 14 / 88%) 100%),
    radial-gradient(900px 420px at 12% 88%, rgb(223 23 48 / 22%), transparent 70%);
}

.v-hero-corps {
  padding-top: 150px;
  padding-bottom: 74px;
}

.v-eyebrow {
  margin: 0 0 12px;
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.v-hero h1 {
  margin: 0 0 18px;
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: clamp(40px, 7.4vw, 78px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.v-hero-texte {
  margin: 0 0 30px;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.6;
}

.v-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Boutons -------------------------------------------------------------- */

.v-bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 14px 22px;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: 180ms ease;
}

.v-bouton-marque {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 34px rgb(223 23 48 / 34%);
}

.v-bouton-marque:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgb(223 23 48 / 44%); }

.v-bouton-fantome {
  border-color: rgb(255 255 255 / 22%);
  background: rgb(255 255 255 / 6%);
  color: var(--ink);
  backdrop-filter: blur(8px);
}

.v-bouton-fantome:hover { border-color: rgb(255 255 255 / 44%); background: rgb(255 255 255 / 12%); }

/* --- Avertissement -------------------------------------------------------- */

/* Elle doit se voir. Un site de transport qui ne dirait pas qu'il est fictif
   serait un site de transport qui ment. */
.v-avertissement {
  border-top: 1px solid var(--brand-line);
  border-bottom: 1px solid var(--brand-line);
  background: rgb(255 59 82 / 9%);
  padding: 14px 0;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.6;
}

.v-avertissement strong { color: var(--brand); }

/* --- Repères -------------------------------------------------------------- */

.v-reperes { border-bottom: 1px solid var(--line); padding: 34px 0; }

/* « min(…, 100%) » dans les grilles de cette feuille : une colonne ne réclame
   jamais plus que la largeur disponible, si bien qu'un téléphone de 320 px
   n'hérite pas d'une page qui défile de côté. */
.v-reperes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 26px;
}

.v-reperes-grille span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.v-reperes-grille strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* --- Sections ------------------------------------------------------------- */

.v-section { padding: 84px 0; }

.v-section-sombre {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.v-section h2 {
  margin: 0 0 22px;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.v-deux-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 54px;
}

.v-inverse .v-photo-cadre { order: -1; }

.v-colonne-texte p {
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.72;
}

.v-liste {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.v-liste li {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: 11px 0 11px 22px;
  font-size: 14px;
}

.v-liste li::before {
  position: absolute;
  top: 11px;
  left: 0;
  color: var(--brand);
  content: "—";
  font-family: var(--font-mono);
}

.v-photo-cadre { margin: 0; }

.v-photo-cadre img {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  width: 100%;
  /* Les attributs width/height de la balise réservent la place avant le
     chargement ; sans « auto », la hauteur de 900 px qu'ils annoncent
     l'emporterait sur le ratio ci-dessous. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.v-photo-cadre figcaption {
  margin-top: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

/* --- Cartes --------------------------------------------------------------- */

.v-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 16px;
  margin-top: 34px;
}

.v-carte {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 26px 24px 24px;
  overflow: hidden;
}

.v-carte::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  content: "";
  background: var(--brand);
  box-shadow: 0 0 16px var(--brand-glow);
}

.v-carte-num {
  display: block;
  margin-bottom: 14px;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.v-carte h3 {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.v-carte p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.65;
}

/* --- Galerie -------------------------------------------------------------- */

.v-galerie {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 168px;
  gap: 12px;
  margin-top: 34px;
}

.v-vignette {
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
}

/* La première photo est verticale : elle occupe deux rangées, ce qui donne à
   la grille son relief sans avoir à découper les autres. */
.v-vignette.v-grande { grid-row: span 2; grid-column: span 1; }

.v-vignette img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.3, 1), filter 260ms ease;
  filter: saturate(96%);
}

.v-vignette:hover img { transform: scale(1.06); filter: saturate(112%); }

/* --- Recrutement ---------------------------------------------------------- */

.v-recrutement {
  position: relative;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(760px 340px at 50% 0%, rgb(223 23 48 / 16%), transparent 70%),
    var(--canvas);
  text-align: center;
}

.v-recrutement-corps { max-width: 720px; }

.v-recrutement h2 { margin-inline: auto; max-width: none; }

.v-recrutement-texte {
  margin: 0 auto 26px;
  max-width: 56ch;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.72;
}

.v-recrutement-conditions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-bottom: 30px;
}

.v-recrutement-conditions span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 8px 15px;
  font-size: 13px;
}

.v-bouton-discord {
  background: #5865f2;
  padding: 16px 28px;
  color: #fff;
  font-size: 15.5px;
  box-shadow: 0 12px 38px rgb(88 101 242 / 38%);
}

.v-bouton-discord:hover { transform: translateY(-2px); box-shadow: 0 18px 48px rgb(88 101 242 / 50%); }

.v-discord-glyphe { font-size: 17px; }

.v-recrutement-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* --- Réseaux -------------------------------------------------------------- */

.v-reseaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 14px;
  margin-top: 30px;
}

.v-reseau {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
  transition: 180ms ease;
}

.v-reseau:hover {
  border-color: var(--brand-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.v-reseau-glyphe {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--surface-soft);
  width: 44px;
  height: 44px;
  font-size: 19px;
}

.v-reseau strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -0.02em;
}

.v-reseau small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* --- Pied de page --------------------------------------------------------- */

.v-pied {
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 50px 0 26px;
}

.v-pied-corps {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 28px;
}

.v-pied-marque {
  display: flex;
  align-items: center;
  gap: 16px;
}

.v-pied-marque img {
  border-radius: 10px;
  background: #fff;
  width: 62px;
  height: auto;
  padding: 6px;
}

.v-pied-marque p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
}

.v-pied-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.v-pied-liens a {
  display: inline-block;
  /* Quelques pixels de hauteur en plus : une cible de moins de 24 px se
     manque au doigt, sur tablette comme sur un écran tactile. */
  padding: 4px 0;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.v-pied-liens a:hover { color: var(--brand); }

.v-pied-mentions {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.v-pied-mentions p {
  margin: 0;
  color: var(--muted-2);
  font-size: 11.5px;
  line-height: 1.7;
}

/* --- La flotte : un showroom ------------------------------------------------
   Le rayon à gauche, le camion choisi à droite. Ce n'est pas une grille de
   vignettes, et c'est le point : une grille de douze cases donne à voir douze
   fois rien, alors qu'ici chaque camion prend toute la place quand c'est son
   tour, les autres restant à portée de clic.

   Sur écran étroit, le rayon bascule à l'horizontale au-dessus du plateau. Il
   reste un rayon — on fait glisser au lieu de descendre — plutôt que de se
   transformer en menu déroulant, qui cacherait justement les photos qui font
   qu'on vient sur cette page. */

.v-showroom {
  padding: 132px 0 84px;
  background:
    radial-gradient(880px 420px at 15% 0%, rgb(223 23 48 / 13%), transparent 68%),
    var(--canvas);
}

.v-showroom-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
  padding-bottom: 22px;
}

.v-showroom-tete h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.v-showroom-compte {
  margin: 0;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.v-showroom-corps {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* --- Le rayon --------------------------------------------------------------- */

.v-rayon {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Le rayon suit la page tant qu'il tient à l'écran : on change de camion
     sans avoir à remonter, même au bas d'un album de quinze photos. */
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding-right: 4px;
}

.v-rayon-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 9px 12px 9px 9px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.v-rayon-ligne:hover {
  background: var(--surface);
}

.v-rayon-ligne.est-choisi {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--brand);
}

.v-rayon-vignette {
  display: grid;
  width: 58px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: var(--surface-soft);
}

.v-rayon-vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(92%);
}

.v-rayon-sans-photo {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--muted-2);
}

.v-rayon-copie {
  min-width: 0;
  flex: 1 1 auto;
}

.v-rayon-copie strong {
  display: block;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v-rayon-copie small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted-2);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v-rayon-compte {
  flex: 0 0 auto;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* --- Le plateau ------------------------------------------------------------- */

.v-plateau {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.v-plateau-scene {
  display: grid;
  position: relative;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0;
  background: var(--surface-soft);
  cursor: zoom-in;
}

.v-plateau-scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(98%);
  transition: transform 520ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.v-plateau-scene:hover img { transform: scale(1.02); }

.v-plateau-scene.est-vide {
  color: var(--muted-2);
  cursor: default;
  font-size: 13px;
}

.v-plateau-legende {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 42px 20px 16px;
  background: linear-gradient(transparent, rgb(4 5 8 / 86%));
  color: #fff;
  font-size: 13px;
  text-align: left;
}

.v-plateau-rang {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  padding: 5px 11px;
  background: rgb(12 14 18 / 74%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  backdrop-filter: blur(8px);
}

.v-plateau-fiche h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.v-plateau-soustitre {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
}

.v-plateau-texte {
  margin: 14px 0 0;
  max-width: 68ch;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.75;
}

/* --- La bande de photos ----------------------------------------------------- */

.v-plateau-bande {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 118px;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.v-plateau-vignette {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0;
  background: var(--surface-soft);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 180ms ease, border-color 180ms ease;
}

.v-plateau-vignette:hover { opacity: 0.9; }

/* La photo en cours est pleinement visible ; les autres s'effacent. C'est
   l'inverse d'un contour ajouté : rien ne bouge, seule la lumière change. */
.v-plateau-vignette.est-choisie {
  border-color: var(--brand);
  opacity: 1;
}

.v-plateau-vignette img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v-flotte-message {
  margin: 26px 0 0;
  color: var(--muted-2);
  font-size: 14px;
}

/* --- L'appel du bas --------------------------------------------------------- */

.v-flotte-appel {
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
  text-align: center;
}

.v-flotte-appel h2,
.v-flotte-appel p {
  margin-inline: auto;
}

/* « :not(.v-eyebrow) » : sans lui, cette règle, plus précise que celle du
   surtitre, repeignait « Nous rejoindre » en gris et en 15 px, au lieu du
   petit surtitre rouge des autres pages. */
.v-flotte-appel p:not(.v-eyebrow) {
  max-width: 52ch;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.7;
}

.v-flotte-appel .v-hero-actions {
  justify-content: center;
  margin-top: 26px;
}

@media (max-width: 900px) {
  .v-showroom { padding-top: 112px; }

  .v-showroom-corps {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  /* Le rayon passe à l'horizontale : on fait glisser au lieu de descendre. */
  .v-rayon {
    position: static;
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .v-rayon-ligne {
    flex: 0 0 auto;
    width: auto;
    max-width: 230px;
  }

  .v-plateau-scene { aspect-ratio: 4 / 3; }
}

/* --- Visionneuse ---------------------------------------------------------- */

.v-visionneuse {
  border: 0;
  border-radius: 16px;
  background: transparent;
  padding: 0;
  max-width: 94vw;
  max-height: 92vh;
  overflow: visible;
}

.v-visionneuse::backdrop { background: rgb(4 5 8 / 88%); backdrop-filter: blur(6px); }

.v-visionneuse img {
  display: block;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 16px;
  max-width: 94vw;
  max-height: 92vh;
  object-fit: contain;
}

.v-visionneuse-fermer {
  display: grid;
  position: absolute;
  top: -16px;
  right: -16px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 50%;
  background: #14181f;
  width: 38px;
  height: 38px;
  color: #fff;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

/* --- Écrans étroits ------------------------------------------------------- */

@media (max-width: 900px) {
  .v-deux-colonnes { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .v-inverse .v-photo-cadre { order: 0; }
  .v-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
}

@media (max-width: 720px) {
  .v-burger { display: flex; }

  /* Le menu se déplie sous l'en-tête plutôt que de recouvrir la page : sur un
     site de six liens, un panneau plein écran serait démesuré. */
  .v-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 16px;
    left: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #0f1319;
    padding: 10px;
    box-shadow: var(--shadow-lg);
  }

  .v-menu.est-ouvert { display: flex; }
  .v-portail { justify-content: center; margin: 6px 0 0; }

  .v-entete.est-posee,
  .v-menu.est-ouvert ~ * { backdrop-filter: none; }

  .v-hero { min-height: 84vh; }
  .v-hero-corps { padding-top: 130px; padding-bottom: 54px; }
  .v-section { padding: 60px 0; }
  .v-pied-corps { flex-direction: column; }
}

/* --- Retour au site, depuis la page de connexion -------------------------- */

/* Ces deux règles servent à login.html, qui charge cette feuille pour elles
   seules : sans porte de sortie, on arrive au portail et on y reste. */

.auth-retour {
  /* La colonne de gauche pose une trame en ::before, en position absolue sur
     toute sa surface. Sans calage explicite, ce bouton reste dessous et le
     clic ne l'atteint jamais : c'est pour la même raison que .auth-brand et
     .auth-visual-copy portent déjà un z-index. */
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-bottom: 22px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  padding: 7px 15px;
  color: rgb(255 255 255 / 78%);
  font-size: 12.5px;
  text-decoration: none;
  transition: 160ms ease;
}

.auth-retour:hover {
  border-color: rgb(255 255 255 / 42%);
  background: rgb(255 255 255 / 10%);
  color: #fff;
}

/* Sur grand écran la colonne de gauche porte déjà le lien : le doublon du
   panneau de droite ne sert que lorsqu'elle disparaît. */
.auth-retour-mobile { display: none; }

@media (max-width: 900px) {
  .auth-retour-mobile {
    display: inline-flex;
    margin-bottom: 18px;
    border-color: var(--line);
    color: var(--muted);
  }

  .auth-retour-mobile:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand); }
}

/* --- Accès au portail, depuis l'en-tête ------------------------------------
   Un seul emplacement, deux états : « Connexion » tant que personne n'est
   identifié, « Portail » ensuite. Le formulaire se déplie sous l'onglet, dans
   la page : aller sur une autre page pour taper deux champs, puis revenir,
   n'avait pas de sens. */

.v-acces { position: relative; margin-left: 8px; }

.is-hidden { display: none !important; }

button.v-portail {
  margin-left: 0;
  border-radius: 9px;
  padding: 9px 13px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  cursor: pointer;
}

.v-portail-ouvert { text-decoration: none; }

/* Le panneau -------------------------------------------------------------- */

.v-connexion {
  display: block;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: #0f1319;
  padding: 20px;
  width: 306px;
  box-shadow: var(--shadow-lg);
  animation: v-deplie 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes v-deplie {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.v-connexion-titre {
  margin: 0 0 16px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.v-connexion label { display: block; margin-bottom: 12px; }

.v-connexion label span {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
}

.v-connexion input {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #080a0e;
  padding: 10px 12px;
  width: 100%;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.v-connexion input:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(255 59 82 / 18%);
}

.v-connexion-valider {
  margin-top: 6px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  padding: 11px 14px;
  width: 100%;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 160ms ease;
}

.v-connexion-valider:hover { background: #ff5468; }
.v-connexion-valider[disabled] { opacity: 0.6; cursor: progress; }

.v-connexion-erreur {
  margin: 0 0 12px;
  border: 1px solid rgb(255 92 112 / 34%);
  border-radius: 9px;
  background: rgb(255 92 112 / 10%);
  padding: 9px 11px;
  color: #ff8b9b;
  font-size: 12.5px;
  line-height: 1.5;
}

.v-connexion-aide {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  text-decoration: none;
}

.v-connexion-aide:hover { color: var(--brand); }

/* L'état connecté --------------------------------------------------------- */

.v-connecte {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.v-connecte button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-decoration: underline;
  cursor: pointer;
}

.v-connecte button:hover { color: var(--brand); }

@media (max-width: 720px) {
  .v-acces { margin: 6px 0 0; }

  /* Dans le menu déplié, le panneau prend la largeur disponible plutôt que de
     déborder de l'écran. */
  .v-connexion {
    position: static;
    margin-top: 8px;
    width: auto;
    box-shadow: none;
  }

  .v-connecte { justify-content: center; padding: 8px 0 2px; }
}


/* ==========================================================================
   PAGE RECRUTEMENT — recrutement.html
   Même vocabulaire visuel que l'accueil : jetons de styles.css, en-tête et
   pied identiques. Ce qui est nouveau ici, ce sont les champs de saisie : la
   vitrine n'en avait aucun, et ceux du portail (.input) appartiennent à un
   fond clair. On les redessine donc pour le fond sombre.
   ========================================================================== */

/* L'onglet en cours dans le menu du site. */
.v-menu a.est-active {
  background: rgb(255 255 255 / 8%);
  color: var(--ink);
}

/* --- Ouverture ------------------------------------------------------------ */

.v-recrut-tete {
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 50% -10%, rgb(223 23 48 / 18%), transparent 70%),
    var(--canvas);
  padding: 128px 0 54px;
  text-align: center;
}

.v-recrut-tete h1 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.v-recrut-chapo {
  margin: 0 auto 28px;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.74;
}

.v-recrut-tete .v-recrutement-conditions { margin-bottom: 0; }

/* --- Disposition : la feuille, et ce qui se passe ensuite ------------------ */

.v-recrut-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
  gap: 34px;
}

@media (max-width: 900px) {
  .v-recrut-grille { grid-template-columns: 1fr; }
}

/* --- La feuille ----------------------------------------------------------- */

.v-formulaire {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 30px;
}

.v-formulaire h2 {
  margin: 0 0 24px;
  font-size: clamp(22px, 2.6vw, 30px);
}

.v-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 18px;
}

.v-champ-large { grid-column: 1 / -1; }

.v-champ {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.v-champ > span {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Le mot « obligatoire » plutôt qu'un astérisque : personne n'a jamais eu à
   deviner ce que veut dire un mot écrit en toutes lettres. */
.v-champ > span em {
  margin-left: 6px;
  color: var(--brand);
  font-style: normal;
}

.v-champ input[type="text"],
.v-champ input[type="email"],
.v-champ select,
.v-champ textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(255 255 255 / 4%);
  padding: 12px 14px;
  width: 100%;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14.5px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.v-champ textarea {
  min-height: 132px;
  line-height: 1.6;
  resize: vertical;
}

.v-champ input::placeholder,
.v-champ textarea::placeholder { color: var(--muted); }

.v-champ input:focus,
.v-champ select:focus,
.v-champ textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(223 23 48 / 22%);
}

/* La liste déroulante native reste blanche sur fond blanc dans certains
   navigateurs : on impose la couleur des options, sans quoi elles seraient
   illisibles à l'ouverture. */
.v-champ select option { background: #12161e; color: #e9ecf2; }

.v-champ small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.v-champ-case {
  flex-direction: row;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(255 255 255 / 3%);
  padding: 14px 16px;
}

.v-champ-case input {
  flex: none;
  margin-top: 2px;
  width: 17px;
  height: 17px;
  accent-color: var(--brand);
}

.v-champ-case > span {
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 13.5px;
  letter-spacing: normal;
  line-height: 1.6;
  text-transform: none;
}

.v-formulaire-erreur {
  margin: 20px 0 0;
  border: 1px solid rgb(255 59 82 / 42%);
  border-radius: 10px;
  background: rgb(255 59 82 / 12%);
  padding: 12px 15px;
  color: #ff8b9b;
  font-size: 13.5px;
  line-height: 1.55;
}

.v-formulaire-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 26px;
}

.v-formulaire-pied .v-recrutement-note { margin: 0; }

.v-formulaire-pied button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* --- Ce qui se passe ensuite ---------------------------------------------- */

.v-recrut-cote {
  position: sticky;
  top: 96px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgb(223 23 48 / 8%), transparent 45%),
    var(--surface);
  padding: 28px;
}

@media (max-width: 900px) {
  .v-recrut-cote { position: static; }
}

.v-cote-titre {
  margin: 0 0 20px;
  font-size: 22px;
}

.v-etapes {
  display: grid;
  gap: 18px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.v-etapes li {
  display: grid;
  gap: 4px;
  position: relative;
  padding-left: 40px;
  counter-increment: etape;
}

.v-etapes li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgb(223 23 48 / 45%);
  border-radius: 50%;
  background: rgb(223 23 48 / 12%);
  width: 27px;
  height: 27px;
  color: var(--brand);
  content: counter(etape, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
}

.v-etapes strong { font-size: 15px; }

.v-etapes span {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.6;
}

.v-cote-discord {
  justify-content: center;
  width: 100%;
}

/* --- Remerciement --------------------------------------------------------- */

.v-recrut-merci { text-align: center; }

.v-recrut-merci-corps {
  margin: 0 auto;
  max-width: 640px;
}

.v-merci-marque {
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  border: 1px solid rgb(52 211 153 / 45%);
  border-radius: 50%;
  background: rgb(52 211 153 / 12%);
  width: 62px;
  height: 62px;
  color: #34d399;
  font-size: 27px;
}

.v-recrut-merci h2 { margin: 0 0 14px; }

.v-recrut-merci p {
  margin: 0 auto 28px;
  max-width: 52ch;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.7;
}

.v-recrut-merci .v-hero-actions { justify-content: center; }

.v-recrutement-actions { justify-content: center; }


/* ==========================================================================
   PAGE D'ERREUR — 404.html
   L'ouverture est celle du recrutement (.v-recrut-tete).
   ========================================================================== */

/* La 404 n'a qu'une ouverture : elle tient l'écran, plutôt que de laisser le
   pied de page remonter à mi-hauteur. */
.v-erreur {
  display: grid;
  align-content: center;
  min-height: 72vh;
}

.v-erreur > .v-largeur { width: 100%; }

.v-erreur-actions { justify-content: center; }

/* --- La flotte : la phrase d'introduction sous le titre ------------------- */

.v-showroom-intro {
  margin: 10px 0 0;
  max-width: 58ch;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}

/* --- Téléphones ----------------------------------------------------------- */

@media (max-width: 720px) {
  /* La croix était posée 16 px hors d'une photo déjà large de 94 % de
     l'écran : elle en sortait. Elle passe dans l'angle de l'image. */
  .v-visionneuse-fermer { top: 8px; right: 8px; }

  /* Liens du pied de page : une cible assez haute pour le pouce. */
  .v-pied-liens a { display: inline-block; padding: 8px 0; }
}

@media (max-width: 480px) {
  .v-largeur { padding: 0 16px; }

  .v-formulaire,
  .v-recrut-cote { padding: 22px 18px; }
}


/* ==========================================================================
   SEPTEMBRE 2026 — nouvelles pages, en-tête à six liens, finitions
   Nos métiers, le réseau, la charte, le contact et les mentions ; les
   prochains rendez-vous de l'accueil ; un pied de page en colonnes. Et deux
   corrections : le texte du bandeau d'ouverture, qui se centrait au lieu de
   s'aligner sur l'en-tête, et un menu qui ne tenait plus sur une ligne une
   fois passé à six liens.
   ========================================================================== */

/* --- Bandeau d'ouverture : aligné sur l'en-tête --------------------------------
   Élément de grille à marges automatiques, le corps du bandeau prenait la
   largeur de son texte et se centrait : le titre flottait au milieu de la
   photo, décalé du logo et posé sur le camion. Étiré, il retrouve
   l'alignement du reste du site. */
.v-hero-corps {
  width: 100%;
  justify-self: stretch;
}

/* --- En-tête : six liens, un menu qui se replie plus tôt ------------------------ */

.v-burger span { transform-origin: center; }

.v-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.v-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.v-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  .v-burger { display: flex; }

  .v-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 16px;
    left: 16px;
    max-height: calc(100vh - 96px);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #0f1319;
    padding: 10px;
    box-shadow: var(--shadow-lg);
  }

  .v-menu.est-ouvert { display: flex; }
  .v-menu a { padding: 12px 14px; font-size: 15px; }
  .v-portail { justify-content: center; margin: 6px 0 0; }
}

/* Sur tablette, le menu déplié reste un panneau à droite plutôt qu'une bande
   de toute la largeur : six liens n'ont pas besoin de neuf cents pixels. */
@media (min-width: 721px) and (max-width: 1040px) {
  .v-menu { left: auto; width: 320px; }
}

/* --- Ouverture des pages intérieures, sur photo --------------------------------- */

.v-page-tete {
  display: grid;
  position: relative;
  align-items: end;
  margin-top: -74px;
  min-height: min(62vh, 560px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}

.v-page-tete-fond {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.v-page-tete-fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: saturate(105%);
  transform: scale(1.03);
}

.v-page-tete::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(8 10 14 / 72%) 0%, rgb(8 10 14 / 34%) 40%, rgb(8 10 14 / 94%) 100%),
    radial-gradient(820px 380px at 8% 100%, rgb(223 23 48 / 24%), transparent 70%);
  content: "";
}

.v-page-tete-corps {
  width: 100%;
  justify-self: stretch;
  padding-top: 150px;
  padding-bottom: 56px;
}

.v-page-tete h1 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(38px, 6.4vw, 68px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.v-page-chapo {
  margin: 0;
  max-width: 58ch;
  color: var(--ink-2);
  font-size: clamp(15px, 1.6vw, 17.5px);
  line-height: 1.65;
}

.v-section-intro {
  margin: -6px 0 30px;
  max-width: 64ch;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.7;
}

.v-reperes-bordees {
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

/* Deux sections claires qui se suivent : un trait les sépare. */
.v-section-bordee { border-bottom: 1px solid var(--line); }

/* Le surtitre d'une colonne de texte. « .v-colonne-texte p », plus précis que
   « .v-eyebrow », le repeignait en paragraphe — blanc, en 15 px, espacé comme
   un titre —, si bien que « La maison » ne ressemblait à aucun autre surtitre
   du site. */
.v-colonne-texte .v-eyebrow {
  margin: 0 0 12px;
  color: var(--brand);
  font-size: 10.5px;
  line-height: normal;
}

/* --- Nos métiers : le déroulé d'un transport ------------------------------------ */

.v-parcours {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: parcours;
}

.v-parcours li {
  display: grid;
  position: relative;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 60px 18px 20px;
  counter-increment: parcours;
}

.v-parcours li::before {
  display: grid;
  position: absolute;
  top: 18px;
  left: 18px;
  place-items: center;
  border: 1px solid rgb(223 23 48 / 45%);
  border-radius: 50%;
  background: rgb(223 23 48 / 12%);
  width: 30px;
  height: 30px;
  color: var(--brand);
  content: counter(parcours, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Le fil qui relie une étape à la suivante, à la hauteur de leur numéro. */
.v-parcours li:not(:last-child)::after {
  position: absolute;
  top: 33px;
  right: -15px;
  left: 58px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand-line), transparent);
  content: "";
}

.v-parcours strong {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.02em;
}

.v-parcours span {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .v-parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-parcours li::after { display: none; }
}

@media (max-width: 560px) {
  .v-parcours { grid-template-columns: minmax(0, 1fr); }
}

/* --- Le réseau : plan des lignes ---------------------------------------------------
   Un plan de lignes, pas une carte : des positions à peu près justes, des
   traits nets, et aucune tuile d'un service extérieur — la politique de
   contenu du site n'en chargerait de toute façon aucune. */

.v-reseau-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 48px;
}

.v-carte-reseau {
  position: sticky;
  top: 96px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(420px 320px at 16% 62%, rgb(223 23 48 / 14%), transparent 70%),
    var(--surface);
  padding: 18px 18px 14px;
}

.v-carte-reseau svg {
  display: block;
  width: 100%;
  height: auto;
}

.reseau-trame path {
  fill: none;
  stroke: rgb(255 255 255 / 5%);
  stroke-width: 1;
}

.reseau-ligne {
  fill: none;
  stroke: var(--brand);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.reseau-ligne.est-secondaire { stroke: #6d7686; stroke-width: 3; }
.reseau-ligne.est-ferry { stroke: #5b9bff; stroke-dasharray: 2 7; stroke-width: 2.5; }

.reseau-ville circle {
  fill: #0f1319;
  stroke: #edf0f5;
  stroke-width: 2.5;
}

.reseau-ville text {
  fill: #dbe0e9;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  paint-order: stroke;
  stroke: #12161e;
  stroke-linejoin: round;
  stroke-width: 4px;
}

.reseau-ville.est-base circle { fill: var(--brand); stroke: #fff; stroke-width: 3; }

.reseau-ville.est-base text {
  fill: #fff;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}

.v-carte-reseau figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.reseau-legende { display: inline-flex; align-items: center; gap: 8px; }

.reseau-legende i {
  display: block;
  border-top: 4px solid var(--brand);
  border-radius: 2px;
  width: 22px;
  height: 0;
}

.reseau-legende i.est-secondaire { border-top: 3px solid #6d7686; }
.reseau-legende i.est-ferry { border-top: 3px dotted #5b9bff; }

.v-lignes h2 { margin-bottom: 14px; }

.v-ligne { border-top: 1px solid var(--line); padding: 16px 0; }

.v-ligne header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
}

.v-ligne strong {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.02em;
}

.v-ligne header span {
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.v-ligne p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .v-reseau-grille { grid-template-columns: minmax(0, 1fr); gap: 34px; }

  .v-carte-reseau {
    position: static;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }
}

/* --- Contact et questions fréquentes ------------------------------------------------ */

.v-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 14px;
  margin-top: 30px;
}

.v-contact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 20px;
  color: inherit;
  text-decoration: none;
  transition: 180ms ease;
}

a.v-contact:hover {
  border-color: var(--brand-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.v-contact.est-principal {
  border-color: rgb(88 101 242 / 45%);
  background: linear-gradient(160deg, rgb(88 101 242 / 16%), transparent 60%), var(--surface);
}

.v-contact.est-adresse { border-style: dashed; }
.v-contact .v-reseau-glyphe { flex: none; }

.v-contact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
}

.v-contact small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.v-contact em {
  display: block;
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-style: normal;
  line-height: 1.55;
}

.v-faq-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 48px;
}

.v-faq-tete { position: sticky; top: 96px; }
.v-faq-tete .v-section-intro { margin-top: 0; }

.v-faq { display: grid; gap: 10px; }

.v-faq details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 160ms ease;
}

.v-faq details[open] { border-color: var(--brand-line); }

.v-faq summary {
  display: block;
  position: relative;
  padding: 17px 52px 17px 20px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
}

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

.v-faq summary::after {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -7px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  width: 9px;
  height: 9px;
  content: "";
  transform: rotate(45deg);
  transition: transform 180ms ease, margin 180ms ease;
}

.v-faq details[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.v-faq summary:hover { color: #fff; }
.v-faq summary:focus-visible { border-radius: 14px; outline: 2px solid var(--brand); outline-offset: 2px; }

.v-faq details p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.7;
}

.v-faq a,
.v-texte a { color: var(--brand); text-underline-offset: 3px; }

@media (max-width: 900px) {
  .v-faq-grille { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .v-faq-tete { position: static; }
}

/* --- La charte du chauffeur ----------------------------------------------------------- */

.v-charte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: regle;
}

.v-charte > li {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 26px 26px 22px 86px;
  counter-increment: regle;
}

.v-charte > li::before {
  display: grid;
  position: absolute;
  top: 24px;
  left: 24px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--brand), var(--brand-dark));
  width: 42px;
  height: 42px;
  box-shadow: 0 8px 22px var(--brand-glow);
  color: #fff;
  content: counter(regle, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

.v-charte h2 {
  margin: 0 0 8px;
  max-width: none;
  font-size: clamp(20px, 2.2vw, 24px);
}

.v-charte p {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.7;
}

.v-charte ul { margin: 0; padding: 0; list-style: none; }

.v-charte ul li {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 8px 0 8px 20px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}

.v-charte ul li::before {
  position: absolute;
  left: 0;
  color: var(--brand);
  content: "—";
  font-family: var(--font-mono);
}

.v-encadre {
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgb(223 23 48 / 12%), transparent 60%), var(--surface);
  padding: 28px;
}

.v-encadre-titre {
  margin: 0 0 10px;
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.v-encadre p:not(.v-encadre-titre) {
  margin: 0 0 22px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .v-charte { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .v-charte > li { padding: 78px 20px 18px; }
  .v-charte > li::before { top: 20px; left: 20px; }
}

/* --- Mentions : un texte à lire ---------------------------------------------------------- */

.v-texte { max-width: 760px; }

.v-texte h2 {
  margin: 44px 0 14px;
  max-width: none;
  font-size: clamp(22px, 2.6vw, 28px);
}

.v-texte h2:first-child { margin-top: 0; }

.v-texte h3 {
  margin: 22px 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.01em;
}

.v-texte p {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.75;
}

.v-texte .v-texte-date {
  margin-top: 36px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* --- Accueil : la compagnie en détail ------------------------------------------------------ */

.v-liens-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 14px;
  margin-top: 30px;
}

.v-lien-carte {
  display: grid;
  position: relative;
  align-content: start;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 24px 24px 22px;
  color: inherit;
  text-decoration: none;
  transition: 180ms ease;
}

.v-lien-carte::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--brand);
  box-shadow: 0 0 16px var(--brand-glow);
  content: "";
  transition: width 260ms ease;
}

.v-lien-carte:hover {
  border-color: var(--brand-line);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.v-lien-carte:hover::after { width: 100%; }

.v-lien-carte span {
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.v-lien-carte strong {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.02em;
}

.v-lien-carte p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}

.v-lien-carte em {
  margin-top: 6px;
  color: var(--ink);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
}

.v-lien-carte em::after {
  margin-left: 6px;
  color: var(--brand);
  content: "→";
  transition: margin 180ms ease;
}

.v-lien-carte:hover em::after { margin-left: 10px; }

/* --- Accueil : les prochains rendez-vous ---------------------------------------------------- */

.v-rdv-section[hidden] { display: none !important; }

.v-rdv-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 14px;
  margin-top: 30px;
}

.v-rdv {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 20px;
}

.v-rdv-date {
  display: grid;
  align-content: start;
  justify-items: center;
  border-radius: 14px;
  background: linear-gradient(160deg, rgb(223 23 48 / 22%), rgb(223 23 48 / 6%));
  padding: 12px 6px;
  text-align: center;
}

.v-rdv-date strong {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
}

.v-rdv-date span {
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.v-rdv-date small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

.v-rdv-corps { min-width: 0; }

.v-rdv-type {
  margin: 0 0 4px;
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.v-rdv h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.v-rdv-trajet { margin: 0 0 6px; color: var(--ink-2); font-size: 14px; }

.v-rdv-texte {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.v-rdv-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
}

.v-rdv-pied span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  color: var(--muted);
}

/* --- Pied de page en colonnes ---------------------------------------------------------------- */

.v-pied-colonnes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 18px 56px;
}

.v-pied-colonne {
  display: grid;
  align-content: start;
  gap: 2px;
}

.v-pied-titre {
  margin: 0 0 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.v-pied-liens a[aria-current="page"] { color: var(--ink); }

/* --- Téléphones : finitions ---------------------------------------------------------------------- */

@media (max-width: 720px) {
  .v-pied-colonnes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
    width: 100%;
  }

  .v-page-tete { min-height: 0; }
  .v-page-tete-corps { padding-top: 126px; padding-bottom: 40px; }
  .v-rdv { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px; }
}

@media (max-width: 480px) {
  /* Les boutons d'appel prennent la largeur : deux boutons côte à côte de
     tailles différentes, sur un téléphone, faisaient une ligne bancale. */
  .v-hero-actions { flex-direction: column; align-items: stretch; }
  .v-hero-actions .v-bouton { justify-content: center; }
  .v-pied-colonnes { grid-template-columns: minmax(0, 1fr); }
}