:root {
  --yellow: #ffc400;
  --black: #111;
  --dark: #181818;
  --green-dark: #30421f;
  --paper: #f5f3ed;
  --content-width: 1320px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: #222;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--paper);
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}


/* =========================================================
   HERO
   ========================================================= */

.hero-stage {
  position: relative;

  height: 100vh;
  height: 100dvh;
  min-height: 0;

  overflow: hidden;
  background: #222;
}


/*
 * Composition graphique du Hero :
 * média + textes + éléments superposés.
 */
.hero-stage__composition {
  position: relative;
}



/* Couche 1 */

.hero-stage__background {
  position: absolute;
  inset: 0;
  z-index: 1;

  background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.02) 48%,
      rgba(0,0,0,.28) 100%
    ),
    url("../img/bg-local.webp");

  background-size: cover;
  background-position: center;
}

.hero-stage__background::after {
  position: absolute;
  inset: 0;
  content: "";

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.16) 0%,
      transparent 28%,
      transparent 72%,
      rgba(0,0,0,.46) 100%
    );
}


/* =========================================================
   NAVIGATION FLOTTANTE
   ========================================================= */

.hero-topbar {
  position: absolute;
  z-index: 1000;

  top: 0;
  left: 6px;
  right: 6px;

  display: flex;
  align-items: center;
  gap: 6px;

  color: white;
  text-shadow: 0 2px 5px rgba(0,0,0,.8);
}

.language-switcher {
  display: flex;
  gap: 3px;
}

.language-switcher a {
  padding: 6px 7px;

  color: #fff;
  font-size: .77rem;
  font-weight: 700;
  text-decoration: none;

  background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(255,255,255,.55);
}

.language-switcher a:hover,
.language-switcher a[aria-current="page"] {
  color: #fff;
  background: rgba(0, 0, 0, .72);
  border-color: #fff;
}

.hero-topbar__phone {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  text-decoration: none;
}

.hero-topbar__phone span {
  font-size: .87rem;
  letter-spacing: .06em;
}

.hero-topbar__phone strong {
  font-size: 1.25rem;
}

.hero-topbar__menu {
  font-size: 2rem;
  line-height: 1;
  text-decoration: none;
}


/* =========================================================
   COUCHE 2 — VEHICULE + CHAUFFEUR
   ========================================================= */

.hero-stage__vehicle {
  position: absolute;
  z-index: 3;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  /*
   * Le visuel véhicule + chauffeur constitue désormais
   * la grande photo du bandeau sur toute sa largeur.
   */
}

.hero-stage__vehicle img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}


/* =========================================================
   COUCHE 3 — CARTOUCHE
   ========================================================= */

.hero-stage__card {
  position: absolute;

  top: auto;
  right: 0;
  bottom: 5%;

  transform: none;

  z-index: 6;

  width: min(27.3vw, 427px);

  filter:
    drop-shadow(0 12px 18px rgba(0,0,0,.42))
    drop-shadow(0 25px 40px rgba(0,0,0,.22));
}

.hero-stage__card img {
  width: 100%;
  height: auto;
}


/* Contacts directs du Hero */











/* Mini boutons téléphone / e-mail en haut du Hero */

.hero-contact-mini {
  position: absolute;

  top: 0;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 3px;

  z-index: 1001;
}

.hero-contact-mini a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;

  text-decoration: none;

  background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(255,255,255,.55);
}


.hero-contact-mini a:hover,
.hero-contact-mini a:focus-visible {
  color: #fff;
  background: rgba(0, 0, 0, .72);
  border-color: #fff;
  outline: none;
}


/* =========================================================
   TEXTE BAS DE HERO
   ========================================================= */

.hero-stage__tagline {
  position: absolute;
  z-index: 7;

  left: 4%;
  bottom: 5%;

  display: flex;
  flex-direction: column;

  color: white;

  text-shadow:
    0 2px 4px rgba(0,0,0,.9),
    0 5px 18px rgba(0,0,0,.7);
}

.hero-stage__tagline strong {
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
}

.hero-stage__tagline span {
  margin-top: 7px;

  color: var(--yellow);

  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-stage__scroll {
  position: absolute;
  z-index: 8;

  right: 3%;
  bottom: 3%;

  color: white;

  font-size: 2rem;
  text-decoration: none;
}


/* =========================================================
   CONTENU SOUS LE BANDEAU
   ========================================================= */

.content-stage {
  min-height: 680px;

  background:
    linear-gradient(
      rgba(255,255,255,.18),
      rgba(255,255,255,.18)
    ),
    url("../img/bg-local.webp");

  background-size: cover;
  background-position: center;
}

.content-layout {
  display: grid;
  grid-template-columns: 210px 520px;
  gap: 0;
  align-items: start;
  justify-content: end;

  width: calc(100% - 20px);

  margin: 0 20px 0 0;
  padding: 45px 0 65px;
}


/* =========================================================
   NAVIGATION LATERALE
   ========================================================= */

.main-nav {
  display: flex;
  flex-direction: column;
}

.main-nav__item {
  padding: 11px 14px;

  color: #fff;
  font-weight: 700;
  text-decoration: none;

  background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(255,255,255,.55);
  border-right: 0;
}

.main-nav__item:hover,
.main-nav__item.is-active {
  color: #fff;
  background: rgba(0, 0, 0, .72);
  border-color: #fff;
  border-right: 0;
}

.sidebar-phone {
  display: flex;
  flex-direction: column;

  margin-top: 34px;
  padding: 15px;

  color: white;

  text-decoration: none;

  background: var(--dark);
  border-left: 6px solid var(--yellow);
}

.sidebar-phone span {
  font-size: .85rem;
}

.sidebar-phone strong {
  margin-top: 3px;
  font-size: 1.2rem;
}


/* =========================================================
   CONTENU ACCUEIL
   ========================================================= */

.home-content {
  width: 520px;
  max-width: 100%;
  padding: 28px 30px 32px;

  background: rgba(75, 75, 75, .58);
  border: 1px solid rgba(255,255,255,.42);
}

.home-content__kicker {
  margin: 0 0 6px;

  color: rgba(255,255,255,.78);

  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
}

.home-content h1 {
  width: 100%;
  margin: 0 0 18px;

  color: #fff;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.05;
  text-align: center;
}

.home-content > p:not(.home-content__kicker) {
  width: 100%;
  max-width: none;

  color: #fff;

  font-size: 1rem;
  line-height: 1.65;
  text-align: justify;
  text-justify: inter-word;
}

.home-callout {
  display: flex;
  flex-direction: column;

  max-width: 650px;

  margin: 0 0 20px;
  padding: 13px 20px;

  text-align: center;

  background: var(--yellow);
}

.home-callout strong {
  font-size: 1.2rem;
}

.home-callout span {
  margin-top: 3px;
}

.home-content--accueil h2 {
  color: #fff;
}


/*
 * Accueil : légère respiration entre les étiquettes de navigation.
 * Desktop uniquement afin de préserver le responsive mobile existant.
 */
@media (min-width: 721px) {
  .content-layout--accueil .main-nav {
    gap: 5px;
  }
}

/*
 * Accueil — disposition desktop dédiée.
 *
 * Desktop intermédiaire :
 * cadre 900 px, navigation séparée de 20 px.
 *
 * Grand écran :
 * cadre 1000 px exactement centré dans la page ;
 * navigation indépendante dans l'espace latéral gauche,
 * selon la logique visuelle de la page Infos & Events.
 */
.home-content--accueil .home-callout {
  margin: 0 auto 20px;
}

@media (min-width: 1150px) and (max-width: 1469px) {
  .content-layout--accueil {
    grid-template-columns: 210px 900px;
    column-gap: 20px;
  }

  .home-content--accueil {
    width: 900px;
  }
}

@media (min-width: 1470px) {
  .content-layout--accueil {
    /*
     * 234 px = retrait gauche 24 px + navigation 210 px.
     * Le cadre de contenu est centré dans tout l'espace restant
     * entre le bord droit des étiquettes et le bord droit de la page.
     */
    grid-template-columns: 234px minmax(0, 1fr);
    column-gap: 0;

    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .content-layout--accueil > aside {
    grid-column: 1;
    grid-row: 1;

    width: 210px;
    margin-left: 24px;

    justify-self: start;
  }

  .home-content--accueil {
    grid-column: 2;
    grid-row: 1;

    width: 1000px;
    justify-self: center;
  }
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 25px;

  padding: 22px max(30px, calc((100vw - var(--content-width)) / 2));

  color: #ccc;

  font-size: .84rem;

  background: #151515;
}

.site-footer nav {
  display: flex;
  gap: 18px;
}




/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .hero-topbar {
    top: 14px;
    right: 14px;
  }

  .language-switcher {
    display: none;
  }

  .hero-topbar__phone span {
    display: none;
  }

  .hero-topbar__phone strong {
    font-size: .94rem;
  }

  .content-layout {
    display: flex;
    flex-direction: column;

    width: calc(100% - 30px);

    padding-top: 30px;
  }

  .main-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .sidebar-phone {
    margin-top: 14px;
  }

  .site-footer {
    flex-direction: column;
  }

}


@media (max-width: 440px) {

  .main-nav {
    grid-template-columns: 1fr;
  }

}

/* Correctifs responsive smartphone */

@media (max-width: 720px) {

  .language-switcher {
    display: flex;
    gap: 2px;
  }

  .language-switcher a {
    padding: 5px 6px;
    font-size: .70rem;
  }

  .hero-topbar {
    left: 4px;
    right: 4px;
    gap: 4px;
  }
}

@media (max-width: 380px) {

  .language-switcher a {
    padding: 4px 5px;
    font-size: .66rem;
  }
}

/* =========================================================
   SMARTPHONE — ACCUEIL SIMPLIFIE
   ========================================================= */

@media (max-width: 720px) {

  /* Texte d'abord, appel ensuite */
  .content-layout {
    align-items: center;
  }

  .home-content {
    order: 1;

    width: calc(100% - 32px);
    max-width: 520px;

    margin: 0 auto;
  }

  /* Suppression des raccourcis latéraux sur smartphone */
  .main-nav {
    display: none;
  }

  /* Le bloc restant contient uniquement l'appel */
  .site-sidebar {
    order: 2;

    width: calc(100% - 32px);
    max-width: 520px;

    margin: 0 auto;
  }

  .sidebar-phone {
    align-items: center;

    width: 100%;
    margin: 14px auto 0;

    text-align: center;
  }
}

/* ===== SMARTPHONE PORTRAIT GLOBAL DSS ===== */

@media (max-width: 720px) and (orientation: portrait) {

  /* Bandeau directement collé au haut de l'écran */
  body {
    margin: 0;
    padding: 0;
  }

  /* Cartouche graphique inutile sur petit écran */
  /* Les raccourcis latéraux disparaissent sur toutes les pages */
  .main-nav {
    display: none !important;
  }

  /* Menu + langues/contact restent dans la couche supérieure */
  .hero-topbar {
    top: 0;
    margin-top: 0;
  }

  /* Zone sous le bandeau */
  .content-layout {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    margin: 0;
    padding: 24px 0 40px;
  }

  /* Cadre texte centré */
  .home-content {
    order: 1;

    width: calc(100% - 32px);
    max-width: 520px;

    margin: 0 auto;
  }

  /* Le sidebar ne sert plus qu'au bouton d'appel */
  .site-sidebar {
    order: 2;

    width: calc(100% - 32px);
    max-width: 520px;

    margin: 0 auto;
  }

  .sidebar-phone {
    align-items: center;

    width: 100%;
    margin: 14px auto 0;

    text-align: center;
  }
}

/* ===== FIN SMARTPHONE PORTRAIT GLOBAL DSS ===== */


/* ===== PAGE TARIFS ===== */

.tariff-section {
  margin-top: 24px;
}

.tariff-section:first-of-type {
  margin-top: 12px;
}

.tariff-section h2 {
  margin: 0 0 12px;
  padding-bottom: 7px;

  color: #fff;
  font-size: 1.22rem;
  text-align: center;

  border-bottom: 1px solid rgba(255,255,255,.42);
}

.tariff-intro,
.tariff-note,
.tariff-small {
  color: #fff;
}

.tariff-intro {
  margin: 0 0 12px;
  text-align: center;
}

.tariff-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tariff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 9px 11px;

  color: #fff;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.34);
}

.tariff-row strong {
  flex: 0 0 auto;
  text-align: right;
}

.tariff-small {
  margin: 8px 0 0;
  font-size: .78rem;
  text-align: center;
  opacity: .78;
}

.airport-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px;
}

.airport-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 84px;
  padding: 10px 7px;

  color: #fff;
  text-align: center;

  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.42);
}

.airport-card span {
  font-size: .86rem;
}

.airport-card strong {
  margin-top: 5px;
  font-size: 1.35rem;
}

.tariff-note {
  margin: 11px 0 0;
  font-size: .91rem;
  line-height: 1.5;
  text-align: justify;
}

.tariff-highlight {
  margin: 12px 0 0;
  padding: 10px 12px;

  color: #fff;
  line-height: 1.45;
  text-align: center;

  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.34);
}

.parcel-price {
  padding: 12px;

  color: #fff;
  text-align: center;

  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.42);
}

.parcel-price strong {
  font-size: 1.45rem;
}

@media (max-width: 520px) {

  .tariff-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .tariff-row strong {
    text-align: left;
  }

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

  .airport-card {
    min-height: 62px;
  }
}

/* ===== FIN PAGE TARIFS ===== */

/* ===== PAGE AEROPORT ===== */

/* Univers photographique Aéroport */

.page-airport .hero-stage__background {
  background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.02) 50%,
      rgba(0,0,0,.25) 100%
    ),
    url("../img/bg-aeroport.webp");

  background-size: cover;
  background-position: center;
}

.page-airport .content-stage {
  background:
    linear-gradient(
      rgba(255,255,255,.12),
      rgba(255,255,255,.12)
    ),
    url("../img/bg-aeroport.webp");

  background-size: cover;
  background-position: center;
}

/*
 * Premier placement desktop Aéroport :
 * raccourcis + cadre solidaires à gauche.
 * Le placement reste propre à cette page.
 */

@media (min-width: 721px) {

  .page-airport .content-layout {
    justify-content: start;

    width: calc(100% - 20px);
    margin: 0 0 0 20px;
  }
}


/* Contenu */

.airport-lead {
  margin: 8px 0 20px !important;

  color: #fff !important;

  font-size: 1.16rem !important;
  font-weight: 800;
  line-height: 1.45 !important;
  text-align: center !important;
}

.airport-prices {
  margin-top: 24px;
}

.airport-prices h2 {
  margin: 0 0 12px;
  padding-bottom: 7px;

  color: #fff;
  font-size: 1.22rem;
  text-align: center;

  border-bottom: 1px solid rgba(255,255,255,.42);
}

/* ===== FIN PAGE AEROPORT ===== */

/* ===== PAGE PROFESSIONNELS ===== */

.page-professionnels .hero-stage__background {
  background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.02) 50%,
      rgba(0,0,0,.25) 100%
    ),
    url("../img/bg-professionnels-v3.webp");

  background-size: cover;
  background-position: center;
}

.page-professionnels .content-stage {
  background:
    linear-gradient(
      rgba(255,255,255,.12),
      rgba(255,255,255,.12)
    ),
    url("../img/bg-professionnels-v3.webp");

  background-size: cover;
  background-position: center;
}


/* Premier placement : disposition de référence.
   À valider au visuel avant figer la page. */

.professionnels-lead {
  margin: 8px 0 20px !important;

  color: #fff !important;
  font-size: 1.16rem !important;
  font-weight: 800;
  line-height: 1.45 !important;
  text-align: center !important;
}

.professionnels-services {
  margin-top: 24px;
}

.professionnels-services h2 {
  margin: 0 0 12px;
  padding-bottom: 7px;

  color: #fff;
  font-size: 1.18rem;
  text-align: center;

  border-bottom: 1px solid rgba(255,255,255,.42);
}

.professionnels-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.professionnels-card {
  display: flex;
  flex-direction: column;
  gap: 4px;

  padding: 10px 12px;

  color: #fff;

  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.34);
}

.professionnels-card strong {
  font-weight: 800;
}

.professionnels-card span {
  font-size: .91rem;
  line-height: 1.4;
}

.professionnels-highlight {
  margin: 18px 0 0 !important;
  padding: 11px 12px;

  color: #fff !important;
  text-align: center !important;

  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.42);
}

.professionnels-invoice {
  margin: 12px 0 0 !important;

  color: rgba(255,255,255,.82) !important;
  font-size: .85rem !important;
  text-align: center !important;
}

/* ===== FIN PAGE PROFESSIONNELS ===== */

/* Professionnels — placement desktop à gauche */

@media (min-width: 721px) {

  .page-professionnels .content-layout {
    display: grid;
    grid-template-columns: 520px 210px;
    gap: 0;
    align-items: start;
    justify-content: start;

    width: calc(100% - 20px);
    margin: 0 0 0 20px;
  }

  .page-professionnels .home-content {
    grid-column: 1;
    grid-row: 1;

    width: 520px;
  }

  .page-professionnels .site-sidebar {
    grid-column: 2;
    grid-row: 1;

    width: 210px;
  }

  .page-professionnels .main-nav__item {
    border-left: 0;
    border-right: 1px solid rgba(255,255,255,.55);
  }

  .page-professionnels .main-nav__item:hover,
  .page-professionnels .main-nav__item.is-active {
    border-left: 0;
    border-right: 1px solid #fff;
  }
}

/* =========================================================
   MENU PRINCIPAL SUPERIEUR
   ========================================================= */

.hero-topbar__menu {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;
  padding: 0;

  color: #fff;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;

  cursor: pointer;

  background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(255,255,255,.55);
}

.hero-topbar__menu:hover,
.hero-topbar__menu:focus-visible,
.hero-topbar__menu[aria-expanded="true"] {
  color: #fff;
  background: rgba(0, 0, 0, .72);
  border-color: #fff;
  outline: none;
}

.hero-menu-panel {
  position: absolute;
  z-index: 1100;

  top: 34px;
  left: 6px;

  width: 210px;

  background: rgba(0, 0, 0, .82);
  border: 1px solid rgba(255,255,255,.55);
}

.hero-menu-panel[hidden] {
  display: none;
}

.hero-menu-panel__item {
  display: block;

  padding: 10px 13px;

  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;

  border-bottom: 1px solid rgba(255,255,255,.20);
}

.hero-menu-panel__item:last-child {
  border-bottom: 0;
}

.hero-menu-panel__item:hover,
.hero-menu-panel__item:focus-visible,
.hero-menu-panel__item.is-active {
  color: #fff;
  background: rgba(255,255,255,.14);
  outline: none;
}

@media (max-width: 720px) and (orientation: portrait) {

  .hero-menu-panel {
    top: 34px;
    left: 4px;

    width: min(230px, calc(100% - 8px));
  }

  .hero-menu-panel__item {
    padding: 11px 13px;
  }
}

/* ===== PAIEMENTS ET PAGE PETITS COLIS ===== */

.payment-note {
  margin: 18px 0 0 !important;
  padding: 9px 11px;

  color: rgba(255,255,255,.88) !important;

  font-size: .84rem !important;
  line-height: 1.4 !important;
  text-align: center !important;

  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.30);
}


/* Univers Petits colis */

.page-colis .hero-stage__background {
  background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.02) 50%,
      rgba(0,0,0,.25) 100%
    ),
    url("../img/bg-colis-v4.webp");

  background-size: cover;
  background-position: center;
}

.page-colis .content-stage {
  background:
    linear-gradient(
      rgba(255,255,255,.12),
      rgba(255,255,255,.12)
    ),
    url("../img/bg-colis-v4.webp");

  background-size: cover;
  background-position: center;
}

.colis-lead {
  margin: 8px 0 20px !important;

  color: #fff !important;
  font-size: 1.16rem !important;
  font-weight: 800;
  line-height: 1.45 !important;
  text-align: center !important;
}

.colis-tarif {
  margin-top: 24px;
}

.colis-tarif h2 {
  margin: 0 0 12px;
  padding-bottom: 7px;

  color: #fff;
  font-size: 1.18rem;
  text-align: center;

  border-bottom: 1px solid rgba(255,255,255,.42);
}

/* ===== FIN PAIEMENTS ET PAGE PETITS COLIS ===== */

/* ===== PETITS COLIS — RACCOURCIS A GAUCHE ===== */

@media (min-width: 721px) {

  /* Raccourcis indépendants à 20 px du bord gauche */
  .page-colis .site-sidebar {
    position: absolute;
    left: 20px;

    width: 210px;
  }

  /* Le texte reste dans sa colonne normale */
  .page-colis .home-content {
    grid-column: 2;
    grid-row: 1;

    width: 520px;
    max-width: 520px;
  }

}

/* ===== FIN PETITS COLIS — RACCOURCIS A GAUCHE ===== */

/* ===== PAGE CONTACT RESERVATION ===== */

.contact-lead {
  margin: 8px 0 18px !important;

  color: #fff !important;
  font-size: 1.08rem !important;
  font-weight: 700;
  line-height: 1.5 !important;
  text-align: center !important;
}

.contact-direct {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;

  margin: 18px 0 12px;
}

.contact-direct__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 68px;
  padding: 9px;

  color: #fff;
  text-align: center;
  text-decoration: none;

  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.40);
}

.contact-direct__item:hover,
.contact-direct__item:focus-visible {
  background: rgba(0,0,0,.72);
  border-color: #fff;
  outline: none;
}

.contact-direct__item span {
  font-size: .78rem;
  opacity: .80;
}

.contact-direct__item strong {
  max-width: 100%;
  margin-top: 4px;

  font-size: .96rem;
  overflow-wrap: anywhere;
}

.contact-urgent {
  margin: 10px 0 20px !important;

  color: rgba(255,255,255,.88) !important;
  font-size: .88rem !important;
  text-align: center !important;
}

.reservation-section {
  margin-top: 22px;
}

.reservation-section h2 {
  margin: 0 0 14px;
  padding-bottom: 7px;

  color: #fff;
  font-size: 1.2rem;
  text-align: center;

  border-bottom: 1px solid rgba(255,255,255,.42);
}

.reservation-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.reservation-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;

  min-width: 0;

  color: #fff;
  font-size: .82rem;
  font-weight: 700;
}

.reservation-form input,
.reservation-form textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;

  color: #fff;
  font: inherit;

  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 0;
}

.reservation-form input:focus,
.reservation-form textarea:focus {
  background: rgba(0,0,0,.65);
  border-color: #fff;
  outline: none;
}

.reservation-form textarea {
  resize: vertical;
}

.reservation-submit {
  min-height: 44px;
  margin-top: 4px;
  padding: 10px 14px;

  color: #fff;
  font: inherit;
  font-weight: 800;

  cursor: pointer;

  background: rgba(0,0,0,.52);
  border: 1px solid rgba(255,255,255,.55);
}

.reservation-submit:hover,
.reservation-submit:focus-visible {
  background: rgba(0,0,0,.78);
  border-color: #fff;
  outline: none;
}

.reservation-warning {
  margin: 14px 0 0 !important;
  padding: 9px 10px;

  color: #fff !important;
  font-size: .82rem !important;
  line-height: 1.45 !important;
  text-align: center !important;

  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.30);
}

.reservation-privacy {
  margin: 9px 0 0 !important;

  color: rgba(255,255,255,.76) !important;
  font-size: .74rem !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

.reservation-privacy a {
  color: inherit;
}

@media (max-width: 520px) {

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

  .reservation-form input,
  .reservation-form textarea {
    font-size: 16px;
  }
}

/* ===== FIN PAGE CONTACT RESERVATION ===== */

/* =========================================================
   FORMULAIRES — SECURITE / RETOURS
   ========================================================= */

.form-honeypot {
  position: absolute !important;
  left: -10000px !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;
}

.form-status {
  margin: 0 0 16px;
  padding: 10px 12px;

  color: #fff;
  text-align: center;

  background: rgba(0,0,0,.48);
  border: 1px solid rgba(255,255,255,.45);
}

.form-status[hidden] {
  display: none;
}

/* =========================================================
   CONTEXTE LOCAL / VISIBILITE ORGANIQUE
   ========================================================= */

.seo-local-context {
  margin-top: 20px;
  padding-top: 14px;

  color: rgba(255,255,255,.88);

  font-size: .9rem;
  line-height: 1.55;
  text-align: justify;

  border-top: 1px solid rgba(255,255,255,.28);
}

.seo-local-context p {
  margin: 0;
}

.seo-local-context strong {
  color: #fff;
}

/* =========================================================
   SEO-03B — MAILLAGE INTERNE CONTEXTUEL DSS
   ========================================================= */

.seo-context-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: .06em;
  text-underline-offset: .15em;
}

.seo-context-link:hover,
.seo-context-link:focus-visible {
  text-decoration-thickness: .1em;
}

.seo-heading-link {
  color: inherit;
  text-decoration: none;
}

.seo-heading-link:hover,
.seo-heading-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: .12em;
}

/* SEO/DSS — PAGE MENTIONS LEGALES : DEBUT */

.legal-content {
  width: min(980px, 100%);
  max-width: 1100px;
}

.legal-lead {
  margin-bottom: 22px;
}

.legal-section {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.26);
}

.legal-section h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

.legal-section p {
  line-height: 1.65;
  text-align: justify;
}

.legal-details {
  margin: 0;
}

.legal-details > div {
  display: grid;
  grid-template-columns: minmax(145px, .8fr) minmax(0, 1.4fr);
  gap: 16px;

  padding: 10px 0;

  border-bottom: 1px solid rgba(255,255,255,.14);
}

.legal-details dt {
  font-weight: 700;
}

.legal-details dd {
  margin: 0;
}

.legal-section--contact {
  margin-bottom: 8px;
}

@media (max-width: 720px) {
  .legal-content {
    width: 100%;
    max-width: 520px;
  }

  .legal-details > div {
    display: block;
  }

  .legal-details dt {
    margin-bottom: 4px;
  }

  .legal-section p {
    text-align: left;
  }
}

/* SEO/DSS — PAGE MENTIONS LEGALES : FIN */

/* =========================================================
   MENTIONS LEGALES — LARGEUR DOCUMENTAIRE DESKTOP
   ========================================================= */

@media (min-width: 721px) {
  .page-legal .content-layout {
    grid-template-columns: 210px minmax(0, 1100px);
  }

  .page-legal .legal-content {
    width: 100%;
    max-width: 1100px;
  }
}

/* =========================================================
   MENTIONS LEGALES — PRESENTATION DOCUMENTAIRE FINALE
   ========================================================= */

.page-legal .legal-content {
  color: #fff;
  background: rgba(0, 0, 0, .78);
}

.page-legal .legal-content h1,
.page-legal .legal-content h2,
.page-legal .legal-content p,
.page-legal .legal-content dt,
.page-legal .legal-content dd,
.page-legal .legal-content strong,
.page-legal .legal-content a {
  color: #fff;
}

/* Grand écran : cadre documentaire réellement centré */
@media (min-width: 1301px) {
  .page-legal .content-layout {
    position: relative;
    display: block;

    width: 100%;
    margin: 0;
    padding: 45px 20px 65px;
  }

  .page-legal .site-sidebar {
    position: absolute;
    top: 45px;
    left: 20px;
    width: 210px;
  }

  .page-legal .legal-content {
    width: min(1100px, calc(100% - 40px));
    max-width: 1100px;
    margin: 0 auto;
  }
}

/* Desktop plus étroit : on évite le chevauchement avec le menu */
@media (min-width: 721px) and (max-width: 1300px) {
  .page-legal .content-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1100px);
    justify-content: center;

    width: calc(100% - 40px);
    margin: 0 auto;
  }

  .page-legal .legal-content {
    width: 100%;
    max-width: 1100px;
  }
}

/* =========================================================
   CONFIDENTIALITE & CREDITS
   ========================================================= */

.privacy-dss-credit {
  padding: 14px 16px;
  background: rgba(255,255,255,.08);
  border-left: 3px solid rgba(255,255,255,.75);
}

.credits-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 18px;
}

.credit-item {
  padding: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
}

.credit-item h3 {
  margin: 0 0 10px;
  color: #fff;
}

.credit-item p,
.legal-note {
  color: #fff;
}

@media (max-width: 900px) {
  .credits-list {
    grid-template-columns: 1fr;
  }
}

/* MODULE VISIBILITE LOCALE DSS — DEBUT */

.visibility-content {
  width: 100%;
  max-width: 1100px;

  color: #fff;
}

.visibility-content p,
.visibility-content h1,
.visibility-content h2,
.visibility-content strong,
.visibility-content span {
  color: #fff;
}

.visibility-lead {
  font-size: 1.05rem;
  font-weight: 600;
}

.visibility-intro {
  margin-top: 20px;
  padding: 18px 20px;

  background: rgba(0,0,0,.58);
  border: 1px solid rgba(255,255,255,.18);
}

.visibility-intro p {
  margin: 0;
  color: #fff;

  line-height: 1.6;
  text-align: justify;
}

.visibility-intro p + p {
  margin-top: 12px;
}

.visibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;

  margin-top: 24px;
}

.visibility-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  padding: 20px;

  color: #fff;
  background: rgba(0,0,0,.68);
  border: 1px solid rgba(255,255,255,.24);
}

.visibility-card__category {
  margin-bottom: 8px;

  color: #fff;

  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.visibility-card h2 {
  margin: 0 0 12px;

  color: #fff;

  font-size: 1.08rem;
  line-height: 1.25;
}

.visibility-card p {
  flex: 1;

  margin: 0 0 16px;

  color: #fff;

  font-size: .93rem;
  line-height: 1.5;
}

.visibility-card__link {
  color: #fff;

  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .16em;
}

/* Desktop : Infos & Events centré indépendamment des raccourcis */

@media (min-width: 1301px) {
  .page-infos-events .content-layout {
    position: relative;
    display: block;

    width: 100%;
    margin: 0;
    padding: 45px 20px 65px;
  }

  .page-infos-events .site-sidebar {
    position: absolute;
    top: 45px;
    left: 20px;

    width: 210px;
  }

  .page-infos-events .visibility-content {
    width: min(1100px, calc(100% - 40px));
    max-width: 1100px;

    margin: 0 auto;
  }
}

/* Desktop plus étroit : maintien sans chevauchement */
@media (min-width: 721px) and (max-width: 1300px) {
  .page-infos-events .content-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1100px);
    justify-content: center;

    width: calc(100% - 40px);
    margin: 0 auto;
  }

  .page-infos-events .visibility-content {
    width: 100%;
    max-width: 1100px;
  }
}

@media (max-width: 720px) {
  .visibility-content {
    width: calc(100% - 32px);
    max-width: 520px;
  }

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

  .visibility-intro p {
    text-align: left;
  }
}

/* MODULE VISIBILITE LOCALE DSS — FIN */

/* =========================================================
   NAVIGATION LATERALE — RESPIRATION TRANSVERSALE DSS

   Objectif :
   - 5 px entre les étiquettes visibles hors mobile ;
   - léger décollage horizontal de 10 px lorsque le menu
     et le cadre appartiennent réellement à la même grille ;
   - aucune modification des couleurs, bordures, contenus,
     largeurs documentaires ou règles smartphone.
   ========================================================= */

@media (min-width: 721px) {

  /*
   * Toutes les pages hors accueil.
   * L'accueil possède déjà sa règle qualifiée à 5 px.
   */
  .content-layout:not(.content-layout--accueil) .main-nav {
    gap: 5px;
  }

  /*
   * Pages dont menu et contenu restent voisins dans la grille :
   * pages standard, Aéroport et Professionnels.
   *
   * Petits colis est exclu : son sidebar est déjà indépendant.
   * Legal et Infos & Events sont traités séparément ci-dessous.
   */
  body:not(.page-colis):not(.page-legal):not(.page-infos-events)
    .content-layout:not(.content-layout--accueil) {
    column-gap: 10px;
  }
}

/*
 * Legal et Infos & Events :
 * sur grand écran le sidebar est déjà positionné indépendamment.
 * On ne crée donc le petit décollage que dans leur variante
 * desktop/tablette intermédiaire en grille.
 */
@media (min-width: 721px) and (max-width: 1300px) {
  .page-legal .content-layout,
  .page-infos-events .content-layout {
    column-gap: 10px;
  }
}


/* =========================================================
   MODULE VISIBILITE SEO DSS — STRUCTURE DES VIGNETTES
   ========================================================= */

.visibility-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 12px;
}

.visibility-card__header .visibility-card__category {
  margin: 0;
}

.visibility-card__badge {
  flex: 0 0 auto;

  padding: 4px 7px;

  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;

  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
}

.visibility-card__meta {
  margin-top: auto;
  padding-top: 12px;

  color: rgba(255,255,255,.82);

  font-size: .78rem;
  font-weight: 600;

  border-top: 1px solid rgba(255,255,255,.18);
}

.visibility-card__footer {
  margin-top: 12px;
}

.visibility-card__link {
  display: inline-block;
}



/* =========================================================
   MODULE VISIBILITE SEO DSS — 5 SLOTS FIXES

   1 : priorité métier, pleine largeur
   2-5 : grille 2 colonnes desktop / 1 colonne mobile
   ========================================================= */

.visibility-slots
  > .visibility-card[data-public-slot="PRIORITE"] {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .visibility-slots
    > .visibility-card[data-public-slot="PRIORITE"] {
    grid-column: auto;
  }
}

/* =========================================================
   HERO RESPONSIVE DSS — REGLE PAR ORIENTATION

   PAYSAGE :
   - composition complète issue du desktop ;
   - proportions fluides ;
   - suppression du min-height desktop sur écrans <= 1300 px.

   PORTRAIT :
   - composition simplifiée ;
   - véhicule en largeur naturelle ;
   - cartouche masqué.
   ========================================================= */


/* ---------------------------------------------------------
   PAYSAGE — TOUS FORMATS
   --------------------------------------------------------- */

@media (orientation: landscape) {

  /*
   * Hero plein écran.
   * Le média conserve ses proportions, remplit le Hero
   * et privilégie son bord supérieur.
   *
   * Les objets graphiques utilisent le même coefficient
   * d'échelle que le média en object-fit: cover.
   */

  .hero-stage__composition {
    position: absolute;
    z-index: 2;

    inset: 0;

    container-type: size;
  }

  .hero-stage__vehicle img {
    display: block;
    object-position: center top;
  }

  .hero-stage__card {
    bottom: 0;

    width: max(
      27.799479cqw,
      41.699219cqh
    );
  }

  .hero-stage__tagline {
    bottom: 0;
  }

  .hero-stage__tagline strong {
    font-size: max(
      2.743837cqw,
      4.115756cqh
    );
  }

  .hero-stage__tagline span {
    margin-top: max(
      0.375134cqw,
      0.562701cqh
    );

    font-size: max(
      0.814577cqw,
      1.221865cqh
    );
  }

}





/* ---------------------------------------------------------
   PORTRAIT — TABLETTE + SMARTPHONE
   --------------------------------------------------------- */

@media (max-width: 1300px) and (orientation: portrait) {

  .hero-stage {
    height: auto;
    min-height: 0;

    padding: 0 0 28px;
  }

  .hero-stage__background {
    display: none;
  }

  .hero-stage__vehicle {
    position: relative;

    top: 0;
    left: 0;
    bottom: auto;

    width: 100%;
    height: auto;

    margin: 0;

    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-stage__vehicle img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
    object-position: center;
  }

  .hero-stage__card {
    display: none !important;
  }

  .hero-stage__tagline {
    position: relative;

    left: auto;
    bottom: auto;

    width: calc(100% - 40px);

    margin: 22px auto 0;
  }

  .hero-stage__scroll {
    display: none;
  }

}


/* =========================================================
   PREVIEW PUBLIQUE MULTILINGUE — 2026-09-09
   Ajouts ciblés : ne modifient pas le socle visuel existant.
   ========================================================= */
.preview-notice {
  margin: 0 auto 22px;
  padding: 12px 16px;
  max-width: 760px;
  color: #fff;
  line-height: 1.55;
  text-align: center;
  background: rgba(17,17,17,.76);
  border-left: 6px solid var(--yellow);
}
.preview-notice strong { color: var(--yellow); }
.preview-contact-links { text-align: center !important; }
.preview-contact-links a { font-weight: 800; }
.preview-authorisation {
  margin: 18px 0 20px;
  padding: 14px 18px;
  color: #fff;
  line-height: 1.55;
  text-align: center;
  background: rgba(48,66,31,.76);
  border: 1px solid rgba(255,255,255,.36);
}
.preview-authorisation strong { color: var(--yellow); }
.preview-legal-note {
  padding: 12px 15px;
  background: rgba(255,196,0,.12);
  border-left: 4px solid var(--yellow);
}
@media (max-width: 720px) {
  .language-switcher { display: flex; }
  .language-switcher a { padding: 5px 6px; font-size: .72rem; }
  .hero-contact-mini a { padding: 5px 6px; }
  .preview-notice { margin-bottom: 18px; }
}


/* ---------------------------------------------------------
   PREVIEW — ANNUAIRE OFFICIEL D'AYWAILLE
   Lien texte uniquement : aucune capture / prévisualisation.
   --------------------------------------------------------- */
.preview-directory {
  margin: 26px 0 28px;
  padding: 18px;
  color: #fff;
  background: rgba(17, 17, 17, .62);
  border: 1px solid rgba(255, 255, 255, .28);
}

.preview-directory h2 {
  margin-top: 0;
  text-align: center;
}

.preview-directory > p {
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  line-height: 1.6;
}

.preview-directory__cta {
  margin-top: 12px !important;
  text-align: center !important;
  font-weight: 800;
}


/* ACCUEIL — LARGEUR +220 PX — 20260916 */
@media (min-width: 721px) and (max-width: 1149px) {
  .content-layout--accueil {
    grid-template-columns: 210px minmax(0, 740px);
  }
  .home-content--accueil {
    width: 740px;
    max-width: 100%;
    height: auto;
  }
}
@media (min-width: 1150px) and (max-width: 1469px) {
  .content-layout--accueil {
    grid-template-columns: 210px minmax(0, 1120px);
  }
  .home-content--accueil {
    width: 1120px;
    max-width: 100%;
    height: auto;
  }
}
@media (min-width: 1470px) {
  .home-content--accueil {
    width: 1220px;
    max-width: 100%;
    height: auto;
  }
}

/* NOS TAXIS — LARGEUR +300 PX */
@media (min-width: 721px) {
  .page-nos-taxis .content-layout {
    grid-template-columns: 210px minmax(0, 820px);
  }
  .page-nos-taxis .home-content {
    width: 820px;
    max-width: 100%;
    height: auto;
  }
}

/* NOS TAXIS — TITRE PAIEMENT BLANC */
.page-nos-taxis .home-content h2 {
  color: #fff;
}

/* AEROPORT — CADRE +150 PX — DROITE 25 PX */
@media (min-width: 721px) {
  .page-airport .content-layout {
    width: calc(100% - 45px);
    margin: 0 25px 0 20px;
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .page-airport .home-content {
    width: 670px;
    max-width: 100%;
    justify-self: end;
    height: auto;
  }
}

/* TARIFS — PLACEMENT IDENTIQUE AEROPORT */
@media (min-width: 721px) {
  .page-tarifs .content-layout {
    width: calc(100% - 45px);
    margin: 0 25px 0 20px;
    grid-template-columns: 210px minmax(0, 1fr);
    justify-content: start;
  }
  .page-tarifs .home-content {
    width: 670px;
    max-width: 100%;
    justify-self: end;
    height: auto;
  }
}

/* PROFESSIONNELS — CADRE +150 PX */
@media (min-width: 721px) {
  .page-professionnels .content-layout {
    grid-template-columns: minmax(0, 670px) 210px;
  }
  .page-professionnels .home-content {
    width: 670px;
    max-width: 100%;
    height: auto;
  }
}


/* VALIDATION CLIENT R3 — APPEL JAUNE ET PIED DE PAGE BLANC */
.sidebar-phone,
.sidebar-phone span,
.sidebar-phone strong {
  color: var(--yellow);
}
.site-footer,
.site-footer a {
  color: #fff;
}

/* =========================================================
   DSS — RESPONSIVE LAPTOP COMPACT GLOBAL
   Cible :
   - 1366x768
   - 1440x900
   - 1536x864
   - desktop large inchangé
   - mobile/tablette <= 720px inchangés

   Principe :
   réduction proportionnelle de :
   - typographie
   - paddings
   - espacements
   - largeur navigation
   - largeur cadres
   ========================================================= */

@media
  (min-width: 721px) and (max-width: 1536px),
  (min-width: 721px) and (max-height: 864px) {

  /* -------------------------
     TYPOGRAPHIE GENERALE
     ------------------------- */

  body {
    font-size: 0.88rem;
  }

  .home-content h1,
  .legal-content h1,
  .visibility-content h1 {
    font-size: clamp(1.65rem, 2.4vw, 2.5rem);
  }

  .home-content h2,
  .legal-content h2,
  .visibility-content h2 {
    font-size: clamp(1rem, 1.35vw, 1.2rem);
  }

  .home-content p,
  .legal-content p,
  .visibility-content p,
  .professionnels-card span,
  .contact-content,
  .airport-content,
  .tarifs-content {
    font-size: clamp(0.78rem, 0.95vw, 0.9rem);
    line-height: 1.45;
  }

  /* -------------------------
     NAVIGATION LATERALE
     ------------------------- */

  .site-sidebar {
    width: 180px;
  }

  .main-nav__item {
    padding: 8px 10px;
    font-size: clamp(0.72rem, 0.9vw, 0.82rem);
  }

  .sidebar-phone {
    margin-top: 22px;
    padding: 10px 12px;
  }

  .sidebar-phone span {
    font-size: 0.72rem;
  }

  .sidebar-phone strong {
    font-size: 1rem;
  }

  /* -------------------------
     BLOCS GENERAUX
     ------------------------- */

  .home-content {
    padding: 20px 22px 24px;
  }

  .content-layout {
    padding-top: 30px;
    padding-bottom: 45px;
  }

  /* -------------------------
     PAGES STANDARD
     ------------------------- */

  .page-airport .content-layout,
  .page-tarifs .content-layout {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .page-airport .home-content,
  .page-tarifs .home-content {
    width: min(600px, 100%);
  }

  .page-professionnels .content-layout {
    grid-template-columns: minmax(0, 600px) 180px;
  }

  .page-professionnels .home-content {
    width: min(600px, 100%);
  }

  .page-nos-taxis .content-layout {
    grid-template-columns: 180px minmax(0, 730px);
  }

  .page-nos-taxis .home-content {
    width: min(730px, 100%);
  }

  /* -------------------------
     ACCUEIL
     ------------------------- */

  .home-content--accueil {
    width: min(1000px, 100%);
  }

  /* -------------------------
     INFOS & EVENTS
     ------------------------- */

  .visibility-grid {
    gap: 12px;
    margin-top: 18px;
  }

  .visibility-card {
    padding: 14px;
  }

  .visibility-card__header {
    gap: 8px;
    margin-bottom: 8px;
  }

  .visibility-card__category {
    font-size: clamp(0.62rem, 0.76vw, 0.7rem);
  }

  .visibility-card__badge {
    padding: 3px 5px;
    font-size: clamp(0.58rem, 0.7vw, 0.64rem);
  }

  .visibility-card h2 {
    margin-bottom: 8px;
    font-size: clamp(0.9rem, 1.1vw, 1rem);
  }

  .visibility-card p {
    margin-bottom: 10px;
    font-size: clamp(0.74rem, 0.9vw, 0.82rem);
    line-height: 1.4;
  }

  .visibility-card__meta {
    padding-top: 8px;
    font-size: clamp(0.64rem, 0.78vw, 0.72rem);
  }

  .visibility-card__footer {
    margin-top: 8px;
  }

  .visibility-card__link {
    font-size: clamp(0.68rem, 0.82vw, 0.76rem);
  }

  /* -------------------------
     PROFESSIONNELS
     ------------------------- */

  .professionnels-services {
    margin-top: 16px;
  }

  .professionnels-services h2 {
    margin-bottom: 8px;
    padding-bottom: 5px;
  }

  .professionnels-grid {
    gap: 4px;
  }

  .professionnels-card {
    gap: 3px;
    padding: 7px 9px;
  }

  .professionnels-highlight {
    margin-top: 12px !important;
    padding: 8px 10px;
  }

  /* -------------------------
     LEGAL / CONFIDENTIALITE
     ------------------------- */

  .privacy-dss-credit,
  .credit-item {
    padding: 11px 12px;
  }

  .credits-list {
    gap: 10px;
    margin-top: 12px;
  }
}


/* =========================================================
   DSS — PROFESSIONNELS
   Menu latéral au bord droit — miroir Petits colis
   ========================================================= */

@media (min-width: 721px) {

  .page-professionnels .content-layout {
    display: grid;
    grid-template-columns:
      minmax(0, 670px)
      1fr
      210px;

    width: calc(100% - 40px);
    margin: 0 20px;

    justify-content: stretch;
    align-items: start;
  }

  .page-professionnels .home-content {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .page-professionnels .site-sidebar {
    grid-column: 3;
    grid-row: 1;

    width: 210px;
    justify-self: end;
  }

  .page-professionnels .main-nav__item {
    border-left: 0;
    border-right: 1px solid rgba(255,255,255,.55);
  }

  .page-professionnels .main-nav__item:hover,
  .page-professionnels .main-nav__item.is-active {
    border-left: 0;
    border-right: 1px solid #fff;
  }
}

@media
  (min-width: 721px) and (max-width: 1536px),
  (min-width: 721px) and (max-height: 864px) {

  .page-professionnels .content-layout {
    grid-template-columns:
      minmax(0, 600px)
      1fr
      180px;
  }

  .page-professionnels .home-content {
    width: min(600px, 100%);
  }

  .page-professionnels .site-sidebar {
    width: 180px;
  }
}


/* =========================================================
   DSS — LAPTOP COMPACT
   Réduction des cadres éditoriaux + hauteur naturelle
   Legal / Confidentialité / Infos & Events
   ========================================================= */

@media (min-width: 721px) and (max-width: 1536px) {

  /* -------------------------------------------------------
     MENTIONS LEGALES / CONFIDENTIALITE
     Cadre de lecture volontairement moins large
     ------------------------------------------------------- */

  .page-legal .legal-content {
    width: min(900px, calc(100vw - 270px));
    max-width: 900px;

    padding: 18px 20px 22px;
  }

  .page-legal .content-layout {
    align-items: start;
  }

  .privacy-content {
    width: min(900px, calc(100vw - 270px));
    max-width: 900px;
  }

  /* Réduction des respirations verticales */
  .legal-content h1 {
    margin-bottom: 12px;
  }

  .legal-content h2 {
    margin-top: 14px;
    margin-bottom: 8px;
  }

  .legal-content p {
    margin-top: 6px;
    margin-bottom: 8px;
  }

  .privacy-dss-credit {
    padding: 9px 11px;
  }


  /* -------------------------------------------------------
     INFOS & EVENTS
     Cadre global plus compact
     ------------------------------------------------------- */

  .page-infos-events .visibility-content {
    width: min(960px, calc(100vw - 250px));
    max-width: 960px;

    padding: 18px 20px 22px;
  }

  .visibility-intro {
    margin-top: 12px;
    padding: 11px 14px;
  }

  .visibility-intro p {
    line-height: 1.4;
  }

  .visibility-intro p + p {
    margin-top: 7px;
  }


  /* -------------------------------------------------------
     VIGNETTES
     Chaque carte prend sa propre hauteur naturelle
     ------------------------------------------------------- */

  .visibility-grid {
    gap: 10px;
    margin-top: 14px;

    align-items: start;
  }

  .visibility-card {
    height: auto;
    min-height: 0;

    align-self: start;

    padding: 11px 13px;
  }

  .visibility-card__header {
    gap: 7px;
    margin-bottom: 6px;
  }

  .visibility-card__category {
    margin-bottom: 0;
  }

  .visibility-card h2 {
    margin-bottom: 6px;
  }

  .visibility-card p {
    flex: 0 0 auto;

    margin-bottom: 7px;
    line-height: 1.35;
  }

  .visibility-card__meta {
    margin-top: 0;
    padding-top: 6px;
  }

  .visibility-card__footer {
    margin-top: 5px;
  }

  .visibility-card__link {
    line-height: 1.3;
  }

}


/* =========================================================
   DSS — INFOS & EVENTS — LAPTOP COMPACT
   Largeur conservée, cadre calé à droite
   ========================================================= */

@media (min-width: 721px) and (max-width: 1536px) {

  .page-infos-events .visibility-content {
    width: min(960px, calc(100vw - 250px));
    max-width: 960px;

    margin-left: auto;
    margin-right: 20px;
  }

}


/* =========================================================
   DSS — WIDGET METEO IRM
   ========================================================= */

.dss-weather-widget {
  display: block;

  width: 100%;
  max-width: 358px;
  height: 110px;

  margin: 6px auto 8px;

  border: 0;
  overflow: hidden;
}

@media (min-width: 721px) and (max-width: 1536px) {
  .dss-weather-widget {
    max-width: 320px;
    height: 100px;
    margin: 4px auto 6px;
  }
}

@media (max-width: 720px) {
  .dss-weather-widget {
    max-width: 100%;
    height: 110px;
  }
}



/* =========================================================
   DSS — METEO IRM
   Widget vertical complet dans une vignette à hauteur libre
   ========================================================= */

.dss-weather-widget {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 225px;
  margin: 8px auto 10px;
  border: 0;
  overflow: hidden;
}

.visibility-card[data-public-slot="METEO"] {
  height: auto;
  min-height: 0;
  align-self: start;
}


/* DSS — widget IRM large */
.dss-weather-widget {
  display: block;
  width: 334px;
  max-width: 100%;
  height: 175px;
  margin: 8px auto 10px;
  border: 0;
  overflow: hidden;
}


/* DSS — IRM horizontal 2 jours — dimensions natives */
.dss-weather-widget {
  display: block;
  width: 358px;
  max-width: 358px;
  height: 91px;
  margin: 8px auto 10px;
  border: 0;
  overflow: hidden;
}


/* DSS — hauteur supplémentaire vignette météo */
.visibility-card[data-public-slot="METEO"] {
  min-height: 320px;
}

@media (min-width: 721px) and (max-width: 1536px) {
  .visibility-card[data-public-slot="METEO"] {
    min-height: 300px;
  }
}


/* DSS — vignette météo : hauteur réellement augmentée */
.visibility-card[data-public-slot="METEO"] {
  min-height: 440px;
}

@media (min-width: 721px) and (max-width: 1536px) {
  .visibility-card[data-public-slot="METEO"] {
    min-height: 420px;
  }
}


/* DSS — IRM : afficher toute la hauteur du widget météo */
.dss-weather-widget {
  width: 334px;
  max-width: 100%;
  height: 245px;
  margin: 8px auto 10px;
  border: 0;
  overflow: hidden;
}

.visibility-card[data-public-slot="METEO"] {
  height: auto;
  min-height: 0;
}


/* DSS — ajustement fin hauteur widget météo */
.dss-weather-widget {
  height: 235px;
}


/* DSS — IRM NL : compensation des libellés néerlandais plus longs */
html[lang="nl"] .dss-weather-widget {
  width: 370px;
  max-width: 100%;
  height: 255px;
}



/* =========================================================
   DSS — CAPACITE MAXIMALE 4 PASSAGERS
   Accueil / Aéroport / Professionnels
   ========================================================= */

.passenger-capacity-note {
  margin: 10px 0 18px !important;
  padding: 10px 14px !important;

  color: #111 !important;
  background: var(--yellow);

  border: 1px solid rgba(0,0,0,.45);

  font-size: 0.95rem !important;
  font-weight: 800;
  line-height: 1.35 !important;
  text-align: center !important;
}

.passenger-capacity-note strong {
  color: #111 !important;
}

@media (min-width: 721px) and (max-width: 1536px) {
  .passenger-capacity-note {
    margin: 7px 0 12px !important;
    padding: 7px 10px !important;
    font-size: 0.82rem !important;
  }
}

@media (max-width: 720px) {
  .passenger-capacity-note {
    margin: 8px 0 14px !important;
    padding: 9px 11px !important;
    font-size: 0.9rem !important;
  }
}