/*
Theme Name: DhraagiOffice-VTC
Theme URI: https://dhraagicab.fr/dhraagioffice-vtc
Author: Xavier LALIZEL
Author URI: https://dhraagicab.fr/
Description: Un thème WordPress moderne et minimaliste conçu spécifiquement pour les exploitants VTC — mobile-first.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dhraagioffice-vtc
*/

/* ================================================
   0) Variables & normalisation légère (mobile base)
   ================================================ */
:root {
  /* typo fluide (mobile → desktop) */
  --step--1: clamp(0.88rem, 0.84rem + 0.2vw, 0.95rem);
  --step-0 : clamp(1.00rem, 0.96rem + 0.4vw, 1.125rem);
  --step-1 : clamp(1.125rem, 1.05rem + 0.6vw, 1.30rem);
  --step-2 : clamp(1.35rem, 1.20rem + 1.0vw, 1.62rem);
  --step-3 : clamp(1.62rem, 1.38rem + 1.6vw, 2.00rem);

  /* conteneurs */
  --container    : 92vw;   /* mobile */
  --container-md : 100vw;   /* ≥768px */
  --container-lg : 100vw; /* ≥1024px */

  /* rythme & UI */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --radius: 14px;

  /* couleurs : accent injecté par functions.php → --accent-color */
  --bg: #ffffff;
  --fg: #333333;
}

html { box-sizing: border-box; font-size: 16px; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  
  background-image: url('https://www.lmdg.dhraagicab.fr/wp-content/uploads/2025/09/tarentaise.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

img, svg, video, iframe { max-width: 100%; height: auto; }

/* liens : ne force pas la couleur pour laisser l’accent du Customizer agir */
a { text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent-color, #7202e2); outline-offset: 2px; }

/* utilitaire accessibilité */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===========================
   1) Structure
   =========================== */
.wrapper, #site-content { width: var(--container); margin-inline: auto; }
#site-content { padding: 20px; }

/* ===========================
   2) En-tête & navigation
   =========================== */
.site-header.fixed-header,
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100vw;
  max-width: 100vw;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 20px;
}


.site-branding { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em; }
.site-branding img {
  height: auto !important;
  width: auto !important;
  max-width: 40px;       /* ajuste selon la place désirée en mobile */
  min-width: 0;           /* sécurité si le container contraint trop */
  display: block;
}

.main-navigation { display: none; width: 100%; }
.main-navigation.active { display: block; }

.main-navigation ul { list-style: none; margin: 0; padding: 0; }
.main-navigation li { padding: 6px 0; }
.main-navigation a {
  text-decoration: none; /* couleur héritée (accent via functions.php) */
  font-size: 1.1em;
  padding: 10px 0;
}

/* bouton burger */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none; border: 0; cursor: pointer; padding: 10px;
  position: absolute; right: 20px; top: 10px;
}
.menu-toggle .icon-bar {
  display: block; width: 25px; height: 3px; background-color: currentColor; margin-bottom: 5px;
  transition: transform .2s ease, opacity .2s ease;
}
/* état ouvert via aria-expanded (JS) */
.menu-toggle[aria-expanded="true"] .icon-bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .icon-bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .icon-bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ===========================
   3) Composants
   =========================== */
/* Autocomplete */
.suggestions {
  position: absolute; z-index: 9999; width: 100%;
  background: #fff; color: #000;
  border: none ; max-height: 200px; overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.suggestions ul { list-style: none; margin: 0; padding: 0; }
.suggestions li { padding: 8px 12px; cursor: pointer; background: #fff; color: #000; font-size: 14px; }
.suggestions li:hover { background: #f0f0f0; }

/* Carte (Mapbox) */
#map-itineraire, .mapboxgl-map {
  width: 100% !important; max-width: 100vw;
  min-height: 350px !important; height: 350px !important;
  position: relative !important; z-index: 10;
}

/* Bouton CF7 */
.wpcf7 input[type="submit"] {
  background-color: #444; color: #fff;
  padding: 18px 28px; border: none; border-radius: 6px;
  font-size: 1.125rem; font-weight: 600; cursor: pointer;
  transition: background-color .3s ease;
}
.wpcf7 input[type="submit"]:hover { background-color: #7100e2; }

/* Footer */
.site-footer-menu { text-align: center; margin-bottom: 1em; }
.footer-menu { list-style: none; padding: 0; margin: 0; display: inline-block; }
.footer-menu li { display: inline; margin: 0 1em; }
.footer-menu a { text-decoration: none; color: inherit; }

/* Icônes contact */
.contact-icons { display: flex; gap: .5em; font-size: 1.2em; }
.contact-icon { color: var(--accent-color, #7202e2); text-decoration: none; transition: color .3s ease; }
.contact-icon:hover { color: #fff; }

/* ===========================
   4) Ajustements mobiles
   =========================== */
@media (max-width: 767.98px) {
  .site-description, .contact-icons { display: none; }
  /*.site-header, .site-header.fixed-header { padding: 10px; }*/
  /*.site-branding img { height: 30px !important; }*/

  .site-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    gap: var(--space-3);
  }
  
  .site-branding {
    flex: 1 1 auto;
    min-width: 0;
    /* logo à gauche */
  }
  
  /* Burger à droite */
  .menu-toggle {
    position: absolute;
    right: 20px;
    top: 10px;
  }
  
  /* Menu navigation : déplié sous le header en mobile */
  .main-navigation {
    display: none;
    width: 100%; /* pleine largeur */
    position: absolute;
    top: 100%;    /* juste sous le header */
    left: 0;
    z-index: 999;
    padding-left: 20px;
    background: var(--header-bg-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  }
  
  .main-navigation.active {
    display: block;
  }
  
  /* menu : on laisse gérer l’affichage via .active + aria-expanded côté JS */
}

/* ==========================================
   5) Échelons (mobile-first → min-width)
   ========================================== */

/* ≥ 768px : tablettes */
@media (min-width: 768px) {
  #site-content { padding: 40px; }
  .wrapper, #site-content { width: var(--container-md); }

  .site-header, .site-header.fixed-header { position: fixed; width: 75%; }
  .menu-toggle { display: none; }           /* cache le burger */
  .main-navigation { display: block; width: auto; }
  .main-navigation ul { display: flex; gap: 0; }
  .main-navigation li { padding: 0 15px; }
}

/* ≥ 1024px : laptops */
@media (min-width: 1024px) {
  .wrapper, #site-content { width: min(var(--container-lg), 88vw); }
}

/* ≥ 1280px : grands écrans */
@media (min-width: 1280px) {
  .wrapper, #site-content { width: min(var(--container-lg), 84vw); }
}

/* ===========================
   6) Motion & préférences
   =========================== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ================================
   7) Typographie mobile-first (fluide)
   ================================ */
:root {
  /* Échelle fluide : captions → display */
  --step--2: clamp(0.78rem, 0.74rem + 0.15vw, 0.90rem);
  --step--1: clamp(0.88rem, 0.84rem + 0.25vw, 1.00rem);
  --step-0 : clamp(1.00rem, 0.96rem + 0.40vw, 1.125rem);
  --step-1 : clamp(1.125rem, 1.05rem + 0.60vw, 1.30rem);
  --step-2 : clamp(1.35rem, 1.20rem + 1.00vw, 1.62rem);
  --step-3 : clamp(1.62rem, 1.38rem + 1.60vw, 2.00rem);
  --step-4 : clamp(2.00rem, 1.70rem + 2.40vw, 2.50rem);

  /* Rythme & lisibilité */
  --lh-body: 1.55;   /* ≥ 1.5 recommandé pour les paragraphes */
  --lh-tight: 1.25;
  --lh-head: 1.2;
  --measure: 65ch;   /* longueur de ligne confortable */
}

/* Base : tout hérite de body */
html { -webkit-text-size-adjust: 100%; }
body {
  font-size: var(--step-0);
  line-height: var(--lh-body);
}

/* Titres */
h1 { font-size: var(--step-1); line-height: var(--lh-head); margin: 0 0 .6em; }
h2 { font-size: var(--step--1); line-height: var(--lh-head); margin: 0 0 .6em; }
h3 { font-size: var(--step--1); line-height: var(--lh-head); margin: 0 0 .6em; }
h4 { font-size: var(--step--1); line-height: var(--lh-tight); margin: 0 0 .6em; }
h5 { font-size: var(--step--1); line-height: var(--lh-tight); margin: 0 0 .6em; }
h6 { font-size: var(--step--2); line-height: var(--lh-tight); margin: 0 0 .6em; }

/* Texte courant & listes */
p, li, dd {
  font-size: var(--step--1);
  line-height: var(--lh-body);
  max-width: var(--measure);
}
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li > ul, li > ol { margin-top: .5em; }

/* Définitions */
dl { margin: 0 0 1em; }
dt { font-weight: 600; }
dd { margin-left: 0; }

/* Éléments inline & sémantiques */
span, strong, em, mark, time, address { font-size: var(--step--1); }
small, .meta, figcaption, caption { font-size: var(--step--1); line-height: 1.4; }
sub, sup { font-size: var(--step--2); line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.4em; } sub { bottom: -0.2em; }


/* Liens (la couleur reste gérée par ta charte/Customizer) */
a { font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* Code & préformatés */
code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: var(--step--1); }
pre {
  font: 1em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  overflow-x: auto; padding: .75rem 1rem; border-radius: 10px; background: #f6f7f9;
}

/* Tableaux */
table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
th, td { padding: .6rem .75rem; border-bottom: 1px solid #e5e7eb; line-height: 1.4; }
caption { caption-side: bottom; margin-top: .5rem; }

/* Figures / citations */
figure { margin: 0 0 1.2em; }
blockquote {
  margin: 0 0 1.2em; padding-left: 1rem; border-left: 4px solid #e5e7eb;
  font-size: var(--step-0); line-height: var(--lh-body);
}

/* Formulaires (générique) — scoped aux <form> uniquement 
form label {
  font-size: var(--step--1);
  line-height: 1.4;
  display: inline-block;
  margin-bottom: .35rem;
}
form :is(input, select, textarea, button) {
  font-size: var(--step-0);
  line-height: 1.4;
}
form :is(input, textarea)::placeholder {
  font-size: calc(var(--step-0) - 1px);
}
*/

/* Navigation */
nav, nav a, .menu a { font-size: var(--step-0); line-height: 1.4; }


/* Utilitaires de taille (pour n’importe quel élément : span, li, button, etc.) */
.text--2 { font-size: var(--step--2) !important; }
.text--1 { font-size: var(--step--1) !important; }
.text-0  { font-size: var(--step-0)  !important; }
.text-1  { font-size: var(--step-1)  !important; }
.text-2  { font-size: var(--step-2)  !important; }
.text-3  { font-size: var(--step-3)  !important; }
.text-4  { font-size: var(--step-4)  !important; }

/* Utilitaires de hauteur de ligne */
.leading-tight   { line-height: var(--lh-tight) !important; }
.leading-normal  { line-height: 1.4 !important; }
.leading-relaxed { line-height: var(--lh-body) !important; }

/* Limiteur de mesure (longueur de ligne confortable) */
.measure { max-width: var(--measure); }

.vtc-booking{ padding:12px 0; }
.vtc-steps{ display:flex; gap:.5rem; list-style:none; padding:0; margin:0 0 .75rem; }
.vtc-steps li{ font-size:.9rem; opacity:.5; } .vtc-steps li.is-active{ opacity:1; font-weight:600; }
.vtc-title{ font-size:clamp(1.25rem,1.1rem + 1vw,1.6rem); margin:0 0 .8rem; }
.vtc-label{ font-size:.95rem; display:inline-block; margin:0 0 .35rem; }
.vtc-group{ margin:0 0 .9rem; }

.vtc-input{ width:100%; padding:14px 16px; border-radius:14px; border: 1px solid #e5e7eb; background:#fff;
  font-size:1rem; line-height:1.35; outline:0; transition:border-color .2s, box-shadow .2s; }
.vtc-input:focus{ border-color:var(--accent-color,#7202e2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color,#7202e2) 20%, transparent); }

.vtc-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.vtc-col{ min-width:0; }
@media (max-width:520px){ .vtc-row{ grid-template-columns:1fr; } }
.vtc-row-compact{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media (max-width:420px){ .vtc-row-compact{ grid-template-columns:1fr; } }

.vtc-suggest ul{ list-style:none; padding:0; margin:0; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; background:#fff; }
.vtc-suggest li{ padding:12px 14px; border-top:1px solid #f2f3f5; }
.vtc-suggest li:first-child{ border-top:0; }
.vtc-suggest button{ all:unset; display:block; width:100%; cursor:pointer; padding:8px 0; }

.vtc-map{ width:100%; min-height:320px; border-radius:16px; overflow:hidden; background:#f3f4f6; margin:1rem 0; }

.vtc-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.vtc-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .75rem; border-radius:999px;
  border:1px solid #e5e7eb; background:#020000; cursor:pointer; font-size:.95rem; }
.vtc-chip input{ accent-color:var(--accent-color,#7202e2); }

.vtc-actions{ margin-top:1rem; display:flex; gap:.5rem; justify-content:flex-end; }
.vtc-actions.top{ justify-content:flex-start; }

.vtc-btn{ border-radius:999px; padding:12px 18px; font-weight:600; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.vtc-btn-primary{ background:var(--accent-color,#7202e2); color:#fff; border-color:transparent; }
.vtc-btn[disabled]{ opacity:.5; cursor:not-allowed; }

.vtc-stickybar{ position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.75rem; margin-top:1rem; border:1px solid #e5e7eb; border-radius:16px;
  background:var(--bg); backdrop-filter:saturate(180%) blur(8px); }
.vtc-fare{ display:flex; flex-direction:column; }
.vtc-fare-title{ font-size:.8rem; opacity:.7; }d
.vtc-fare-value{ font-weight:700; font-size:1.05rem; }

/*.vtc-screen[hidden]{ display:none !important; }*/
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* --- Tuiles (Accueil / Écran 1) --- */
.vtc-tiles{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:.75rem; margin:1rem 0;
}
@media (max-width:640px){
  .vtc-tiles{ grid-template-columns:repeat(2,1fr); }
}
.vtc-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.75rem .25rem; min-height:86px;
  border-radius:16px; border:1px solid #e5e7eb; background:#fff;
  cursor:pointer; font-size:.85rem; line-height:1.3; font-weight:600; text-align:center;
  text-decoration:none; color:inherit; transition:background .2s, transform .2s;
}
.vtc-tile:hover{ background:#f9fafb; transform:translateY(-2px); }
.vtc-tile span{ margin-top:.35rem; font-size:.85rem; }
.vtc-tile--ghost{ background:#fff; border-color:#e5e7eb; }


/* ====== Tuiles: 4 colonnes fixes, carrées, sans scroll ni superposition ====== */
.vtc-tiles{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)); /* 4 colonnes fixes, compressibles */
  gap:.6rem;
  margin:1rem 0;
  max-width:100%;
  overflow-x:hidden; /* ceinture anti-scroll horizontal */
}

/* chaque tuile est un carré parfait qui ne déborde jamais sa colonne */
.vtc-tile{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;

  width:100%;
  aspect-ratio:1/1;               /* carré */
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;

  text-align:center;
  font-weight:600;
  font-size:.9rem;
  line-height:1.25;

  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s, transform .2s;

  min-width:0;                    /* autorise la colonne à rétrécir */
  overflow:hidden;                /* coupe tout dépassement interne */
}

/* lien ou bouton: occupe 100% de la tuile sans l’étirer */
.vtc-tiles a.vtc-tile,
.vtc-tiles button.vtc-tile{
  display:flex;                   /* réassure le layout */
  width:100%;
  border:1px solid #e5e7eb;
  background:#fff;
}

/* libellé: jamais de wrap ni de débordement, tronquage propre */
.vtc-tile span{
  display:block;
  max-width:100%;
  padding:0 .25rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:.85rem;
}

/* hover léger (optionnel) */
.vtc-tile:hover{ background:#f9fafb; transform:translateY(-2px); }
.vtc-tile--ghost{ background:#fff; border-color:#e5e7eb; }

/* hardening contre styles globaux qui cassent les tuiles */
.vtc-tiles .vtc-tile *{ box-sizing:border-box; }
.vtc-tiles .vtc-tile .icon, 
.vtc-tiles .vtc-tile svg{ max-width:60%; max-height:60%; }

/* Barre rapide sous la recherche */
.vtc-quickbar{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:.75rem;
  align-items:center;
  margin:.5rem 0 1rem;
}
.vtc-quickitem{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid #e5e7eb; border-radius:14px; background:#fff;
  padding:.55rem .8rem; min-height:46px; width:100%;
}
.vtc-quickselect{
  appearance:none; border:0; background:transparent; width:100%;
  font-size:1rem; line-height:1.3; padding:0; outline:none;
}
.vtc-quickbtn{
  justify-content:flex-start; cursor:pointer;
}
.vtc-dot{
  width:10px; height:10px; border-radius:50%; background:#3b82f6; display:inline-block;
}
.vtc-calendar{
  width:16px; height:16px; border-radius:4px; border:2px solid #6b7280; display:inline-block; position:relative;
}
.vtc-calendar::after{
  content:""; position:absolute; left:2px; right:2px; top:6px; height:2px; background:#6b7280;
}

/* Popover date/heure */
.vtc-when-popover{
  border:1px solid #e5e7eb; border-radius:14px; background:#fff; padding:.75rem;
  margin-top:.25rem; box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.vtc-when-row{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media (max-width:420px){ .vtc-when-row{ grid-template-columns:1fr; } }
.vtc-when-actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:.6rem; }

/* Conteneur principal de ta page réservation */
.vtc-booking {
  max-width: 420px;        /* largeur confortable sur mobile */
  margin: 0 auto;          /* centre horizontalement */
  padding: 0 1rem;         /* petit espace gauche/droite */
  box-sizing: border-box;
}

/* Tuiles */
.vtc-tile {
  color: #000;                /* texte en noir */
  background: #fff;           /* fond blanc */
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
  aspect-ratio: 1/1;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
  overflow: hidden;
}

.vtc-tile span {
  color: #000;                /* labels en noir */
}

/* Boutons de mode pour la destination */
.vtc-dest-mode{ display:flex; gap:.5rem; margin:.4rem 0 .5rem; flex-wrap:wrap; }
.vtc-chipbtn{
  border:1px solid #e5e7eb; background:#fff; color:#111; font-weight:600;
  border-radius:999px; padding:.4rem .6rem; cursor:pointer;  width: 100%;
  box-sizing: border-box;
}
.vtc-chipbtn.is-active{ border-color: var(--accent-color, #7202e2); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-color,#7202e2) 25%, transparent); }

.vtc-start-block { margin: .75rem 0 1rem; }

.vtc-current-start {
  margin: 0 0 .5rem;
  font-weight: 600;
  color: #111;
}

.vtc-chipbtn{
  border:1px solid #e5e7eb; background:#fff; color:#111; font-weight:600;
  border-radius:999px; padding:.45rem .8rem; cursor:pointer;
}

/* Le conteneur du bouton doit prendre toute la ligne */
.vtc-when-wrap{
  position: relative;
  display: block;
  width: 100%;
  /* si le wrap est dans une grille/colonne, on force l'étendue */
  grid-column: 1 / -1;
}

/* Popover ancré sous le bouton, ÉTIRÉ sur toute la largeur du conteneur */
.vtc-when-popover{
  position: absolute;
  top: 100%;                  /* juste sous le bouton */
  left: 0;
  right: 0;                   /* ← étire à 100% du conteneur */
  margin-top: .5rem;
  width: auto;                /* pas de largeur fixe */
  max-width: 100%;            /* jamais plus large que le conteneur */
  box-sizing: border-box;
  z-index: 9999;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: .75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Si un parent a overflow:hidden, on empêche la coupe horizontale */
.vtc-booking, .vtc-start-block{
  overflow: visible;          /* important pour ne pas rogner le popover */
}

.vtc-quickbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

/* Ligne départ */
.vtc-start-line {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
#mon-depart { width: 100%; }

/* Popover date/heure */
.vtc-when-wrap { width: 100%; position: relative; }
.vtc-when-popover {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  margin-top: .5rem;
  width: 100%;
  z-index: 9999;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: .75rem;
}

/* Tuiles en 3 colonnes */
.vtc-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.vtc-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  color: #111;
}
.vtc-tile span { margin-top: .25rem; }

/* Carte : 30vh 30% plein écran, pas de scroll horizontal */
#map-itineraire, .mapboxgl-map, .mapboxgl-canvas {
  height: 30vh !important;
  min-height: 220px !important;
  width: 100% !important;
}


/* Écrans : visibles par défaut, cachés seulement si [hidden] */
.vtc-screen { display: block; }
.vtc-screen[hidden] { display: none !important; }

/* Carte : hauteur raisonnable */
#map-itineraire, .mapboxgl-map, .mapboxgl-canvas {
  height: 33vh !important;   /* ajuste si besoin */
  min-height: 220px !important;
  width: 100% !important;
}


/* couleur des éléments principaux */

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

a, .accent-color {
  color: var(--accent-color);
}

.site-header {
  background-color: var(--header-bg-color);
  color: var(--header-text-color);
}

.site-footer {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
}



.content-wrapper {
  background-color: var(--background-color);
  color: var(--text-color);
  padding: 20px;
  border-radius: 8px;
  max-width: 1200px;
  margin: auto;
}