/* Feuille de style de TRANSPORTLIB.
 *
 * Extraite du bloc <style> de index.html le 22/09/2026, quand le site est
 * passé de une à quatre pages : garder le CSS dans chaque page aurait signifié
 * le maintenir en quatre exemplaires. Un fichier partagé n'est téléchargé
 * qu'une fois puis réutilisé d'une page à l'autre.
 *
 * Reste servi depuis public/, donc couvert par la directive style-src 'self'
 * de la politique de sécurité.
 */

:root {
  --primary: #0f3d8f;
  --primary-dark: #071d3e;
  --primary-soft: #eaf2ff;
  --accent: #f4b740;
  --accent-soft: #fff4d6;
  --text: #1e2430;
  --muted: #58657a;
  --card: #ffffff;
  --bg: #f4f7fb;
  --border: #dde6f1;
  /* Contour des zones de saisie : assez soutenu pour délimiter chaque
     champ sur le fond bleu du formulaire, sans virer au trait dur. */
  --field-border: #b7cdea;
  --success: #1c9d5d;
  --shadow: 0 24px 55px rgba(15, 61, 143, 0.12);
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
.container {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
}

.btn {
  display: inline-block;
  padding: 0.95rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), #1a54c7);
  color: white;
  box-shadow: 0 16px 30px rgba(15, 61, 143, 0.25);
}
.btn-secondary {
  background: var(--accent-soft);
  color: var(--primary-dark);
}
.btn-success {
  background: linear-gradient(135deg, var(--success), #16794a);
  color: white;
  box-shadow: 0 16px 30px rgba(28, 157, 93, 0.3);
}

header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(221, 230, 241, 0.8);
}

/* Bandeau haut : logo, carrousel automatique et contact rapide.
   Les trois cellules font 300 x 140 px. Elles passent à la ligne d'elles-
   mêmes dès que la largeur manque (flex-wrap) au lieu de déborder ou de
   rétrécir : c'est ce qui garde le bandeau lisible du grand écran au
   téléphone, sans media query dédiée. */
.topband {
  background: #edf3ff;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.2rem;
  padding: 0.9rem 0;
}

.topband-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}

.topband-cell {
  /* 300 x 140 px est la taille de référence, pas une contrainte : la
     cellule s'étire jusqu'à 340 px sur grand écran et se réduit jusqu'à
     260 px avant que la ligne ne se coupe. Les images suivent, grâce au
     rapport imposé plus bas et aux srcset du balisage. */
  flex: 1 1 260px;
  max-width: 340px;
  /* Sans ceci, l'adresse email empêcherait la cellule de se réduire. */
  min-width: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 61, 143, 0.08);
}

/* Le rapport 300/140 est porté par les cellules illustrées : leur
   hauteur suit leur largeur, quel que soit l'écran. */
.topband-logo,
.carousel {
  aspect-ratio: 300 / 140;
}

.topband-cell picture {
  display: block;
  width: 100%;
  height: 100%;
}

.topband-logo img {
  width: 100%;
  height: 100%;
  /* contain : le logo doit rester entier, jamais rogné. */
  object-fit: contain;
  padding: 0.5rem;
  display: block;
}

/* Le carrousel conserve les classes .slide et .dot attendues par
   script.js — seule sa taille change. */
.carousel {
  position: relative;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

.slide.active {
  opacity: 1;
  visibility: visible;
}

.slide img {
  width: 100%;
  height: 100%;
  /* cover : les photos sont au format libre, elles remplissent la
     cellule quitte à être recadrées. */
  object-fit: cover;
  display: block;
}

/* Un fondu qui se déclenche tout seul peut gêner ou donner la nausée :
   il disparaît pour qui a demandé moins d'animations, sans empêcher le
   défilement des photos. */
@media (prefers-reduced-motion: reduce) {
  .slide {
    transition: none;
  }
}

.topband-contact {
  /* La cellule de contact ne suit pas le rapport 300/140 : elle doit
     pouvoir grandir si le texte passe à la ligne sur un écran étroit. */
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 0.95rem;
}

.topband-label {
  margin: 0 0 0.1rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

.topband-contact a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.2;
  /* L'adresse email est longue : elle se coupe plutôt que de déborder
     de la cellule sur les petits écrans. */
  overflow-wrap: anywhere;
}

.topband-contact a:hover,
.topband-contact a:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

.topband-contact svg,
.topband-contact img {
  width: 18px;
  height: 18px;
  flex: none;
}

.topband-contact svg {
  fill: var(--primary);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--primary-dark);
}
.brand img {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  object-fit: cover;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.nav-links a:hover {
  color: var(--primary);
}

.nav-dropdown {
  position: relative;
}
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle {
  color: var(--primary);
}
.nav-dropdown-caret {
  font-size: 0.7em;
  transition: transform 0.2s ease;
}
.nav-dropdown.open .nav-dropdown-caret {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 0.5rem;
  min-width: 220px;
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  z-index: 50;
}
.nav-dropdown.open .nav-dropdown-menu {
  display: flex;
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  color: var(--primary-dark);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  background: var(--accent-soft);
}
.nav-dropdown-menu .menu-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.contact-item a {
  color: var(--primary);
  text-decoration: underline;
}
.contact-item a:hover {
  color: var(--primary-dark);
}

.hero {
  position: relative;
  color: white;
  z-index: 1;
  margin-top: 0.2rem;
}
.hero-banner {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(
    125deg,
    rgba(5, 22, 52, 0.88),
    rgba(15, 61, 143, 0.68)
  );
  background-size: cover;
  background-position: center;
  padding: 1.2rem 0 2rem;
  border-radius: 0 0 0 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.5rem;
  align-items: end;
  width: 100%;
}
.hero-badge {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  background: rgba(244, 183, 64, 0.14);
  border: 1px solid rgba(244, 183, 64, 0.35);
  color: #f9e7af;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
h1 {
  margin: 0 0 0.8rem;
  font-size: clamp(2.4rem, 4.2vw, 4.3rem);
  line-height: 1.08;
}
.lead {
  max-width: 630px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.hero-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 1.4rem;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.stat:last-child {
  border-bottom: none;
}
.stat small {
  color: rgba(255, 255, 255, 0.7);
}
.stat strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.9rem;
}
.stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(244, 183, 64, 0.14);
  color: #f9d989;
}

.section {
  padding: 4.5rem 0;
}
.section-header {
  margin-bottom: 2.2rem;
  text-align: center;
}
.section-header h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--primary-dark);
}
.section-header p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}
.service-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 1.8rem;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(15, 61, 143, 0.14);
}
.service-icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.service-card h3 {
  margin: 0 0 0.6rem;
  font-size: 1.4rem;
  color: var(--primary-dark);
}
.service-card p {
  margin: 0;
  color: var(--muted);
}

.about {
  background: linear-gradient(180deg, #edf4ff 0%, #f6f9ff 100%);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.about-image {
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.about-image picture {
  display: block;
  width: 100%;
  height: 100%;
}
.about-image img {
  width: 100%;
  height: 100%;
  /* Le cadre est plus haut que large : à 574 px, couvrir ces 420 px
     demande 770 px d'image, d'où les variantes 800 et 1408 px. */
  min-height: 420px;
  object-fit: cover;
}
.about-content {
  background: var(--card);
  border-radius: 28px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 2rem;
}
.about-content h3 {
  margin: 0.8rem 0 1rem;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--primary-dark);
}
.feature-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}
.feature-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.feature-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 0.3rem;
  flex-shrink: 0;
}
.feature-item strong {
  display: block;
}

.process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.process-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.step-number {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  margin-bottom: 1rem;
}
.process-step h4 {
  margin: 0 0 0.4rem;
  color: var(--primary-dark);
}
.process-step p {
  margin: 0;
  color: var(--muted);
}

.cta-band {
  background: linear-gradient(
    135deg,
    var(--primary-dark),
    var(--primary)
  );
  color: white;
  border-radius: 28px;
  padding: 2rem 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: var(--shadow);
}
.cta-band h3 {
  margin: 0 0 0.3rem;
  font-size: clamp(1.6rem, 2vw, 2.2rem);
}
.cta-band p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
}
.info-card,
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.info-card {
  padding: 2rem;
}
.contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.contact-item:last-child {
  border-bottom: none;
}
.icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--primary);
  font-size: 1.2rem;
}
.form-card {
  padding: 2rem;
  /* Fond bleu très clair, tiré du bleu du bouton « Envoyer »
     (--primary) : il détache le formulaire du reste de la page et
     montre d'un coup d'œil la zone à remplir. */
  background: var(--primary-soft);
  border-color: #c7d9f2;
}
form {
  display: grid;
  gap: 1.1rem;
}
.field {
  display: grid;
  gap: 0.45rem;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
/* La date occupe dix caractères, l'heure cinq : à parts égales, le champ
   de l'heure paraîtrait démesuré. */
.field-row-datetime {
  grid-template-columns: 1.35fr 1fr;
}
.field-error {
  min-height: 18px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #d12d2d;
  margin: 0 0 0.2rem;
  display: none;
  font-weight: 700;
}
.field-error.visible {
  display: block;
}
.field-hint {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
  margin: -0.2rem 0 0.2rem;
}
.suggestions {
  margin-top: 0.35rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 61, 143, 0.08);
  overflow: hidden;
  display: none;
  max-height: 220px;
  overflow-y: auto;
}
.suggestions.visible {
  display: block;
}
.suggestion-item {
  width: 100%;
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease;
}
.suggestion-item:last-child {
  border-bottom: none;
}
.suggestion-item:hover,
.suggestion-item:focus,
.suggestion-item.active {
  background: var(--primary-soft);
}
label {
  color: var(--primary-dark);
  font-weight: 700;
}
input,
textarea,
select {
  width: 100%;
  /* Chaque zone de saisie est encadrée et reste blanche : sur le fond
     bleu clair de la carte, le contraste suffit à repérer où écrire,
     sans alourdir le formulaire. */
  border: 1px solid var(--field-border);
  box-shadow: 0 1px 2px rgba(15, 61, 143, 0.05);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  font: inherit;
  background: #fff;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
select {
  /* Flèche dessinée en CSS : les flèches natives sont trop discrètes
     sur mobile, et le champ ne ressemble alors pas à une liste. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%),
    linear-gradient(135deg, var(--primary) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Mention « obligatoire » : discrète mais repérable au survol du regard. */
.required-mark {
  color: var(--primary);
  font-weight: 800;
}

.form-legend {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  color: var(--muted);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(15, 61, 143, 0.08);
}
input.invalid,
textarea.invalid,
select.invalid {
  border-color: #d12d2d;
  box-shadow: 0 0 0 4px rgba(209, 45, 45, 0.08);
}
textarea {
  min-height: 150px;
  resize: vertical;
}
.message {
  min-height: 24px;
  font-size: 0.95rem;
  color: var(--muted);
}
.message.success {
  color: var(--success);
}
.message.error {
  color: #d12d2d;
}

footer {
  padding: 1.4rem 0 3rem;
  text-align: center;
  color: var(--muted);
}

/* Barre de contact fixe, sur téléphone uniquement.
   Raison d'être : l'essentiel du trafic arrive sur mobile depuis une
   publicité, atterrit en haut de page et repart avant d'avoir vu le
   formulaire, sept écrans plus bas. Ces deux boutons mettent l'appel et
   WhatsApp à portée de pouce en permanence.
   Masquée au-delà de 760 px : sur grand écran, l'en-tête et le bloc
   « Contact rapide » remplissent déjà ce rôle. */
.mobile-contact-bar {
  display: none;
}

@media (max-width: 760px) {
  .mobile-contact-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 0.6rem 0.8rem;
    /* Marge basse des iPhone à encoche : sans ça, la barre passe sous
       l'indicateur d'accueil et devient à moitié intouchable. */
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(15, 61, 143, 0.12);
    transition: transform 0.2s ease;
  }

  /* Escamotée pendant la saisie : sur mobile, le clavier remonte la
     page et une barre fixe viendrait recouvrir le champ en cours. */
  .mobile-contact-bar.hidden-while-typing {
    transform: translateY(110%);
  }

  .mobile-contact-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* 52 px : au-dessus du minimum recommandé pour une cible tactile,
       on vise le pouce d'une personne pressée. */
    min-height: 52px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
  }

  .mobile-contact-bar .bar-call {
    background: linear-gradient(135deg, var(--primary), #1a54c7);
    color: #fff;
  }

  .mobile-contact-bar .bar-whatsapp {
    background: #fff;
    color: var(--primary-dark);
    border: 1px solid var(--field-border);
  }

  .mobile-contact-bar img,
  .mobile-contact-bar svg {
    width: 22px;
    height: 22px;
    flex: none;
  }

  .mobile-contact-bar .bar-call svg {
    fill: #fff;
  }

  /* Réserve la hauteur de la barre pour que le bas de page et le bouton
     d'envoi du formulaire restent atteignables. */
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-contact-bar {
    transition: none;
  }
}

@media (max-width: 900px) {
  .hero-grid,
  .about-grid,
  .contact-grid,
  .services-grid,
  .process {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .nav {
    flex-direction: column;
    text-align: center;
    padding: 1rem 0 1.2rem;
  }
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }
  .cta-band {
    flex-direction: column;
    text-align: center;
  }
  .field-row-datetime {
    grid-template-columns: 1fr;
  }
}