/* ============================================================================
   TAXI 624 by GETTAXI — la réservation (/reserver) et le suivi (/suivi) en
   VERSION 3 (Amine, 18.10.2026, phase 2). Habillage seul : chargée APRÈS les
   styles de chaque page, cette feuille change les couleurs, les rayons, l'en-tête
   et les boutons — jamais un identifiant, un texte, un calcul ni un prix.
   Les jetons (--v3-*) et les polices viennent de /v3.css ; nuit par défaut,
   jour sous html.jour (07 h–19 h, heure suisse, v3.js) — la classe « clair »
   de ces deux pages suit « jour » (petit script du <head>).
   Servie par le hub sous /v3-resa.<empreinte>.css, cache un an.
   ========================================================================== */

/* ---------- 1. LES COULEURS DES PAGES, PRISES DANS LA CHARTE V3 ---------- */
:root {
  --noir:#05070D; --carte:#0C0F19; --carte2:#141824; --ligne:#2A3142;
  --texte:#E6E8EC; --sourd:#A9B4CB; --jaune:#5C94FF; --jaune2:#93B6FF;
  --bleu:#4E88FF; --bleu2:#93B6FF; --vert:#3EDFA5;
}
html.clair {
  --noir:#F4F7FF; --carte:#FFFFFF; --carte2:#F2F5FC; --ligne:#D3DBEA;
  --texte:#0A1428; --sourd:#3E4A63; --jaune:#2F6BEF; --jaune2:#1F56D6;
  --bleu:#2F6BEF; --bleu2:#1F56D6; --vert:#0A7F58;
}
html.gros { --sourd:#C5CEE0; } html.gros.clair { --sourd:#26314A; }
html { background:var(--v3-fond); }
body.pResa, body.pSuivi { background:transparent; font-family:var(--v3-police); -webkit-font-smoothing:antialiased; }
body.pResa::before, body.pSuivi::before { display:none; }

/* le décor d'offre.html : la carte de Lausanne la nuit, voilée, et le halo bleu (WebP, 20 Ko, en cache avec le site) */
.v3decor { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.v3decor .dcCarte { position:absolute; left:50%; top:0; width:720px; height:1160px; margin-left:-360px; background:url(/img/connexion-lausanne-nuit.webp) 0 0 / 720px 1160px no-repeat; opacity:var(--v3-decor-opacite); }
.v3decor .dcVoile { position:absolute; inset:0; background:linear-gradient(180deg, transparent 0%, var(--v3-fond) 55%); }
.v3decor .dcLueur { position:absolute; left:0; right:0; top:0; height:380px; background:radial-gradient(ellipse at 50% 0%, var(--v3-halo) 0%, transparent 62%); }
@media (min-width:760px) { .v3decor .dcCarte { width:1440px; margin-left:-720px; background-size:1440px 1160px; } }
html.compact .v3decor { display:none; }

/* ---------- 2. L'EN-TÊTE : la marque · A+ · jour/nuit · FR | EN ---------- */
.v3haut { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:56px; margin:0 0 2px; }
.v3marque { display:flex; align-items:center; min-height:48px; flex:none; color:var(--v3-fort); text-decoration:none; }
.v3marque svg { display:block; height:32px; width:auto; }
.v3outils { display:flex; align-items:center; gap:8px; }
body .grosBtn, .v3theme { position:static; top:auto; right:auto; width:44px; height:44px; padding:0; display:inline-grid; place-items:center; border-radius:50%;
  border:1px solid var(--v3-bord); background:var(--v3-verre); color:var(--v3-fort); font:inherit; font-size:15px; font-weight:800; letter-spacing:0; cursor:pointer;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:transform .16s ease; }
body .grosBtn:active, .v3theme:active { transform:scale(.94); }
body .grosBtn.on { background:var(--v3-degrade-bouton) border-box; border-color:transparent; color:#fff; }
.v3theme svg { width:20px; height:20px; }
.v3theme .soleil, .v3theme .lune { display:none; }
html.jour .v3theme .soleil, html.nuit .v3theme .lune { display:block; }
/* la bascule FR | EN glissante (celle du site) */
.v3-langues { position:relative; display:inline-flex; padding:4px; border-radius:999px; background:var(--v3-verre); border:1px solid var(--v3-bord); isolation:isolate;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.v3-langues::before { content:""; position:absolute; z-index:-1; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:999px; background:var(--v3-degrade-bouton);
  box-shadow:0 4px 14px rgba(47,107,239,.35); transition:transform .32s cubic-bezier(.2,.8,.2,1); }
.v3-langues.en::before { transform:translateX(100%); }
.v3-langues button { min-width:44px; min-height:38px; padding:0; display:inline-grid; place-items:center; border:0; border-radius:999px; background:transparent;
  color:var(--v3-doux); font:inherit; font-size:14px; font-weight:800; letter-spacing:.04em; cursor:pointer; transition:color .32s; }
.v3-langues [aria-pressed="true"] { color:#fff; }
@media (max-width:374px) {
  .v3marque svg { height:26px; } .v3outils { gap:6px; }
  body .grosBtn, .v3theme { width:40px; height:40px; } .v3-langues button { min-width:38px; }
}
@media (prefers-reduced-motion:reduce) { .v3-langues::before { transition:none; } }

/* ---------- 3. LA RÉSERVATION (/reserver) ---------- */
body.pResa { max-width:540px; padding-top:calc(8px + env(safe-area-inset-top, 0px)); color:var(--texte); }
body.pResa header { text-align:left; padding:6px 2px 16px; }
body.pResa .titrePage { margin:0; font-size:28px; line-height:1.15; font-weight:800; letter-spacing:-.02em; color:var(--v3-fort); text-align:left; text-wrap:balance; }
html.gros body.pResa .titrePage { font-size:32px; }
/* les cartes : des feuilles de verre arrondies, comme l'offre */
body.pResa .carte { padding:22px 18px 18px; border-radius:28px; background:var(--v3-verre); border:1px solid var(--v3-bord);
  -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3); box-shadow:var(--v3-ombre); }
body.pResa #formulaire::before { display:none; }
body.pResa .micro { font-size:13px; letter-spacing:.08em; color:var(--sourd); }
html.gros body.pResa .micro { font-size:14px; }
/* les champs : 54 px, arrondis, gros caractères lisibles la nuit */
body.pResa input, body.pResa textarea, body.pResa select { border-radius:16px; font-size:17px; font-weight:600; color:var(--v3-fort); }
body.pResa input:not([type=hidden]):not([type=checkbox]):not([type=radio]), body.pResa select { min-height:54px; }
html.gros body.pResa input, html.gros body.pResa textarea, html.gros body.pResa select { font-size:18px; }
body.pResa input:focus, body.pResa textarea:focus, body.pResa select:focus { border-color:var(--v3-bleu2); box-shadow:0 0 0 3px var(--v3-anneau); }
body.pResa input::placeholder, body.pResa textarea::placeholder, body.pSuivi input::placeholder, body.pSuivi textarea::placeholder { color:#8A94AB; opacity:1; }
html.clair body.pResa input::placeholder, html.clair body.pResa textarea::placeholder, html.clair body.pSuivi input::placeholder, html.clair body.pSuivi textarea::placeholder { color:#5A6580; }
html.clair body.pResa input, html.clair body.pResa textarea, html.clair body.pResa select { background-color:#F7F9FE; }
html.clair body.pResa #telephone { background:#FFFFFF; }
/* les choix (Maintenant / Planifier, Mme / M., Cash / Carte / TWINT…) : le choisi prend le dégradé bleu → vert */
body.pResa .segments { border-radius:18px; }
body.pResa .segments button { min-height:48px; border-radius:14px; }
body.pResa .segments button.on, html.clair body.pResa .segments button.on,
#segCivilite button.on, #segTrajet button.on, html.clair #segCivilite button.on, html.clair #segTrajet button.on { background-image:var(--v3-degrade-bouton); background-origin:border-box; border-color:transparent; color:#fff; box-shadow:0 4px 14px rgba(47,107,239,.30); }
#segCivilite button, #segTrajet button { border-radius:14px; }
body.pResa .rapides button { min-height:46px; border-radius:14px; }
body.pResa .rapides button.on { background-image:var(--v3-degrade-bouton); background-origin:border-box; border-color:transparent; color:#fff; }
body.pResa .calendrier { border-radius:20px; }
body.pResa .calNav { border-radius:14px; }
body.pResa .calJour.choisi::before, html.clair body.pResa .calJour.choisi::before { background-image:var(--v3-degrade-bouton); }
body.pResa .compteur, body.pResa .stepper { border-radius:16px; }
body.pResa .stepper button { border-radius:12px; }
body.pResa .stepper button:active, html.clair body.pResa .stepper button:active { background:var(--v3-degrade-bouton); color:#fff; }
body.pResa .optionsBtn, body.pResa .btnSecondaire { border-radius:16px; min-height:52px; }
body.pResa .chipLieu { min-height:42px; }
body.pResa .choixAv { border-radius:18px; }
body.pResa .choixAv.on { border-color:var(--v3-bleu2); box-shadow:0 0 0 3px var(--v3-anneau); }
body.pResa .vehiculesGroupe, body.pResa .groupeConf, body.pResa .arretAnnuler { border-radius:16px; }
body.pResa .promoBandeau { border-radius:20px; }
body.pResa .sugAR { border-radius:16px; }
body.pResa .sugBtn, body.pResa .cqBtn, body.pResa .ajoutArret .plus, body.pResa .promoPuce { background-image:var(--v3-degrade-bouton); }
/* le prix : grand, en dégradé, jamais animé (translate="no" dans la page) */
body.pResa .estimation { border-radius:22px; border:1px solid color-mix(in srgb, var(--v3-bleu2) 38%, transparent); padding:16px 18px;
  background:linear-gradient(160deg, rgba(47,107,239,.16), rgba(62,223,165,.05)), var(--carte2); }
html.clair body.pResa .estimation { background:linear-gradient(160deg, rgba(47,107,239,.08), rgba(14,159,110,.05)), #FFFFFF !important; }
body.pResa .estimation .prix, html.clair body.pResa .estimation .prix { font-size:38px; line-height:1.08; letter-spacing:-.02em; background-image:var(--v3-degrade-texte); }
html.gros body.pResa .estimation .prix { font-size:44px; }
/* LE bouton principal de l'écran : dégradé bleu → vert, lueur douce */
body.pResa .reserver, html.clair body.pResa .reserver { min-height:58px; border-radius:18px; color:#fff; background-color:#2F6BEF; background-image:var(--v3-degrade-bouton);
  box-shadow:var(--v3-lueur), inset 0 1px 0 rgba(255,255,255,.3); }
@keyframes reserverPret624 { 0%,100% { box-shadow:var(--v3-lueur), inset 0 1px 0 rgba(255,255,255,.3); } 50% { box-shadow:0 12px 34px rgba(47,107,239,.55), 0 0 0 4px rgba(62,223,165,.25), inset 0 1px 0 rgba(255,255,255,.3); } }
body.pResa .reserver.pret { animation:reserverPret624 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { body.pResa .reserver.pret { animation:none; } }
body.pResa .erreur { border-radius:14px; }
html.clair body.pResa .erreur { background:#FFF1F2; border-color:#E5484D; color:#B4232A; }
body.pResa .note { font-size:13px; line-height:1.5; }
html.gros body.pResa .note { font-size:15px; }
/* la confirmation */
body.pResa #confirmation h2 { font-size:26px; letter-spacing:-.01em; color:var(--v3-fort); }
body.pResa #confPayer, body.pResa #confFin, body.pResa #confChauffeur, body.pResa #confCentral, body.pResa #blocMotifs { border-radius:18px !important; }
body.pResa #confSuiviFrame { border-radius:20px; }
body.pResa .confQuittance { border-radius:18px; }
body.pResa .motifA { border-radius:14px; }
/* annuler : discret, comme sur le suivi (jamais le bouton le plus visible de l'écran) */
body.pResa .annulBtn { border:0; background:transparent; color:var(--sourd); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
body.pResa .annulBtn:hover { color:#FF8A8E; }
/* le téléphone, discret : deux petites pilules, jamais l'élément dominant */
body.pResa .basNumero { margin-top:28px; }
body.pResa .basTexte { font-size:12px; letter-spacing:.08em; margin-bottom:10px; }
body.pResa .numero, html.clair body.pResa .numero { min-height:46px; padding:0 18px; font-size:16px; letter-spacing:.5px; color:var(--v3-fort); background:var(--v3-verre); border:1px solid var(--v3-bord); }
html.gros body.pResa .numero { font-size:19px; }
body.pResa .numero span, html.clair body.pResa .numero span { background-image:var(--v3-degrade-texte); }
body.pResa .waPill, html.clair body.pResa .waPill { min-height:46px; padding:0 18px; font-size:15px; color:var(--v3-fort); background:var(--v3-verre); border:1px solid color-mix(in srgb, #25D366 45%, transparent); }
/* le pied : la signature de la version 3 */
body.pResa footer { margin-top:30px; padding-top:20px; border-top:1px solid var(--v3-bord); font-size:13px; color:var(--sourd); }
.signature { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:8px; }
.signature .trait { width:44px; height:5px; flex:none; border-radius:999px; background:var(--v3-degrade); box-shadow:0 2px 12px rgba(47,107,239,.4); }
.signature b { font-size:15px; font-weight:800; letter-spacing:3px; color:var(--v3-fort); }
.signature small { font-size:11px; font-weight:700; letter-spacing:1px; color:var(--v3-doux); margin-left:-4px; }
/* les suggestions de Google, lisibles de jour comme de nuit */
.pac-container .pac-item-query { color:var(--v3-fort); }
html.clair .pac-item:hover, html.clair .pac-item-selected { background:#EEF2FB; }

/* ---------- 4. LE SUIVI (/suivi) ---------- */
body.pSuivi { max-width:560px; color:var(--texte); }
body.pSuivi header { gap:10px; }
body.pSuivi header .marque { flex:none; }
body.pSuivi header .ref { flex:1; text-align:right; }
@media (max-width:519px) { body.pSuivi header .ref { display:none; } body.pSuivi header .v3outils { margin-left:auto; } }
/* la carte plein écran : la marque et les réglages flottent en haut, chacun dans sa pastille de verre */
body.pSuivi.s3carte > header { left:12px; right:12px; height:auto; padding:0; border:0; border-radius:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; pointer-events:none; }
body.pSuivi.s3carte > header .marque, body.pSuivi.s3carte > header .v3outils { pointer-events:auto; }
body.pSuivi.s3carte > header .marque { height:46px; padding:0 16px; border-radius:23px; background:var(--v3-verre); border:1px solid var(--v3-bord);
  -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3); box-shadow:var(--v3-ombre); }
body.pSuivi.s3carte > header .v3outils { margin-left:auto; }
body.pSuivi.s3carte { background-color:transparent; }
/* les cartes et les blocs */
body.pSuivi .fiche { border-radius:22px; }
body.pSuivi .bandeau { border-radius:22px; }
body.pSuivi #carte { border-radius:22px; }
body.pSuivi .final, body.pSuivi .avis { border-radius:24px; }
body.pSuivi .motifA { border-radius:14px; }
body.pSuivi .final button, body.pSuivi .arBtn.plein, body.pSuivi .grBtn.plein, body.pSuivi .grNum { background-image:var(--v3-degrade-bouton); }
body.pSuivi .final button { min-height:56px; border-radius:18px; box-shadow:var(--v3-lueur); }
body.pSuivi .arBtn { border-radius:16px; min-height:48px; }
body.pSuivi .btnNouveau { border-radius:16px; }
/* la feuille posée sur la carte : verre sombre la nuit, verre clair le jour */
body.pSuivi.s3carte #feuille3 { background-color:var(--v3-verre); border-color:var(--v3-bord); box-shadow:var(--v3-ombre); }
html.clair body.pSuivi.s3carte #feuille3 { background-color:rgba(255,255,255,.94); box-shadow:0 10px 30px rgba(20,40,90,.18); }
#feuille3 .bandeau .titre, #resume3 .q { color:var(--v3-fort); }
#feuille3 .fiche, #details3 .trajet { border-top-color:var(--ligne); }
html.clair #feuille3 .btnAppelCh { background-color:rgba(10,20,40,.05); border-color:var(--ligne); color:var(--v3-fort); }
html.clair body.s3carte #poignee3::before { background-color:rgba(10,20,40,.25); }
html.clair body.s3carte .carteBox::after { background-image:linear-gradient(180deg, rgba(244,247,255,.85) 0%, rgba(244,247,255,0) 100%); }
html.clair body.s3carte .recentrer { background-color:rgba(255,255,255,.94); border-color:rgba(10,20,40,.12); color:var(--texte); }
html.clair #avis.avis3 { background-color:#FFFFFF; box-shadow:0 8px 30px rgba(20,40,90,.10); }
html.clair #details3 .btnCentral { color:var(--bleu2); border-color:rgba(47,107,239,.30); }
/* la course réservée : la confirmation porte déjà la marque et l'état — le titre du formulaire se retire (navigateurs récents) */
body.pResa:has(#confirmation[style*="block"]) header .titrePage { display:none; }
/* la carte plein écran garde ses angles droits ; le bandeau posé dans la feuille reste sans cadre, le jour aussi */
body.pSuivi.s3carte #carte { border-radius:0; }
html.clair #feuille3 .bandeau { background:none; box-shadow:none; }
/* le jour, les verts de la charte s'assombrissent pour rester lisibles sur le blanc */
html.clair body.pResa .arInfo, html.clair body.pResa .bonjour { color:#0A7F58; }
html.clair body.pResa .garanti { background-image:linear-gradient(90deg,#0A7F58,#0A7F58); }
/* sur un ordinateur, la feuille garde la largeur d'un téléphone, centrée sur la carte */
@media (min-width:760px) { body.pSuivi.s3carte #feuille3 { max-width:560px; margin:0 auto; } }
html.clair #attDetail .offert { color:#0A7F58; } html.clair #attDetail .facture, html.clair #attBloc.depasse .eta { color:#C23B47; }