@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --nuit: #14532D;
  --route: #1E7B3E;
  --ambre: #F5821F;
  --acacia: #17A24B;
  --sable: #FAFAF7;
  --encre: #1B1B1B;
  --blanc: #FFFFFF;
  --alerte: #D64545;
  --radius: 14px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--sable);
  color: var(--encre);
  font-family: 'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
img, svg { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }

/* Sous ~780px (téléphones et tablettes en portrait) : champs à 16px pour
   empêcher le zoom automatique de Safari iOS à l'ouverture du clavier — la
   première cause d'instabilité perçue sur mobile. */
@media (max-width: 780px) {
  input, select, textarea { font-size: 16px !important; }
}

/* .wrap n'impose plus sa propre hauteur : sa hauteur suit exactement l'écran
   actif (compte, réservation, confirmation...). C'est body qui centre
   verticalement quand ce contenu est plus court que l'écran du téléphone,
   ce qui supprime le grand vide blanc en dessous sur les écrans courts
   (ex. connexion/création de compte) tout en laissant les écrans plus longs
   (ex. réservation) s'afficher normalement depuis le haut, sans coupure. */
.wrap {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  /* Aligné en haut plutôt que centré verticalement : un écran court (ex.
     connexion/création de compte) ne doit pas laisser un grand vide en bas
     sur les téléphones à écran haut — le contenu commence en haut, comme
     une vraie app, plutôt que de "flotter" au milieu. */
  justify-content: flex-start;
  background: var(--blanc);
  box-shadow: 0 0 40px rgba(18,40,61,0.08);
}

.wrap > div:not(.masque) { width: 100%; }

/* ---------- HERO ---------- */
.hero {
  background: linear-gradient(160deg, var(--nuit) 0%, var(--route) 100%);
  color: var(--sable);
  padding: 30px 24px 34px;
  position: relative;
  overflow: hidden;
}
.marque-ligne { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; }
.logo-icone { height: 26px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.hero .marque {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--ambre);
  margin: 0;
}
.hero h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  margin: 0 0 14px;
}
.hero p { font-size: 14.5px; opacity: 0.85; margin: 0; max-width: 34ch; }

.trajet-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--sable);
}
.point { width: 9px; height: 9px; border-radius: 50%; background: var(--ambre); flex-shrink: 0; }
.point.avion { background: var(--acacia); }
.pointille {
  flex: 1;
  height: 0;
  border-top: 2px dotted rgba(245,239,226,0.45);
}

/* ---------- SECTIONS ---------- */
.section { padding: 26px 24px; border-bottom: 1px solid #EDE6D6; }
.section h2 {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  margin: 0 0 4px;
}
.section .souligne { font-size: 13px; color: #6B6659; margin: 0 0 18px; }

/* ---------- OPTIONS TRAJET ---------- */
.options-trajet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.option-trajet {
  border: 1.5px solid #E4DCC8;
  border-radius: var(--radius);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
  background: var(--blanc);
  box-shadow: 0 1px 3px rgba(30, 26, 15, .04);
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
  min-height: 128px;
}
.option-trajet:hover { border-color: var(--ambre); box-shadow: 0 3px 10px rgba(30, 26, 15, .08); transform: translateY(-1px); }
.option-trajet.actif { border-color: var(--acacia); background: #F1F8F4; box-shadow: 0 3px 10px rgba(53, 118, 79, .12); }
.option-trajet .libelle { font-weight: 600; font-size: 14px; line-height: 1.25; }
.option-trajet .detail { font-size: 12px; color: #6B6659; line-height: 1.35; flex: 1; }
.option-trajet .prix { font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; color: var(--nuit); white-space: nowrap; margin-top: auto; align-self: flex-end; }

@media (max-width: 380px) {
  .options-trajet { grid-template-columns: 1fr; }
}

/* ---------- FORMULAIRE ---------- */
.champ { margin-bottom: 16px; }
.champ-adresse { position: relative; }
.ligne-champ-position { display: flex; gap: 8px; align-items: stretch; }
.ligne-champ-position input { flex: 1; min-width: 0; }
.btn-position-actuelle {
  flex-shrink: 0; width: 44px; border: 1.5px solid #E4DCC8; border-radius: 10px;
  background: var(--blanc); font-size: 17px; cursor: pointer; color: var(--route);
  display: flex; align-items: center; justify-content: center;
}
.btn-position-actuelle:active { background: var(--sable); }
.btn-position-actuelle.chargement { opacity: 0.5; pointer-events: none; }
.suggestions-adresse {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: #fff; border: 1.5px solid #E4DCC8; border-radius: 10px;
  box-shadow: 0 10px 24px rgba(11,27,41,0.12); z-index: 20; overflow: hidden;
  max-height: 220px; overflow-y: auto; display: none;
}
.suggestions-adresse.visible { display: block; }
.suggestions-adresse .suggestion {
  padding: 10px 12px; font-size: 12.5px; color: var(--nuit); cursor: pointer;
  border-bottom: 1px solid #F1EBDC;
}
.suggestions-adresse .suggestion:last-child { border-bottom: none; }
.suggestions-adresse .suggestion:hover { background: #FBF7EC; }
.champ label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--nuit); }
.champ input, .champ select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #E4DCC8;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14.5px;
  background: var(--blanc);
  color: var(--encre);
}
.champ input:focus, .champ select:focus { outline: none; border-color: var(--route); }
.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- PAIEMENT ---------- */
.modes-paiement { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mode {
  border: 1.5px solid #E4DCC8;
  border-radius: 10px;
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
}
.mode.actif { border-color: var(--ambre); background: #FBF3E1; color: var(--nuit); }
.mode .pastille { width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pastille.especes { background: var(--acacia); }
.pastille.wave, .pastille.orange_money { background: transparent; }
.pastille svg { display: block; }

/* ---------- RÉCAP / BOUTONS ---------- */
.recap-montant {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--nuit); color: var(--sable);
  border-radius: var(--radius); padding: 16px 18px; margin-top: 18px;
}
.recap-montant .label { font-size: 13px; opacity: 0.75; }
.recap-montant .valeur { font-family: 'Fraunces', serif; font-size: 24px; color: var(--ambre); }

.devis-recap-prix {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--nuit); color: var(--sable);
  border-radius: var(--radius); padding: 12px 16px; margin-top: 8px;
}
.devis-recap-prix span:first-child { font-size: 12.5px; opacity: 0.8; }
.devis-total { font-family: 'Fraunces', serif; font-size: 19px; color: var(--ambre); }

.btn {
  display: block; width: 100%; text-align: center;
  background: var(--acacia); color: #fff;
  border: none; border-radius: 10px;
  padding: 15px; font-size: 15px; font-weight: 600;
  cursor: pointer; margin-top: 16px; font-family: inherit;
}
.btn:active { transform: scale(0.99); }
.btn.secondaire { background: transparent; color: var(--nuit); border: 1.5px solid var(--nuit); }
.btn.ambre { background: var(--ambre); color: var(--nuit); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.erreur { color: var(--alerte); font-size: 13px; margin-top: 8px; display: none; }

/* ---------- CONFIRMATION ---------- */
.ecran-confirmation { padding: 36px 24px; text-align: center; }
.icone-check {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--acacia); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin: 0 auto 18px;
}
.numero-resa { font-family: 'Fraunces', serif; font-size: 22px; color: var(--nuit); margin: 6px 0 20px; }
.carte-recap {
  text-align: left; background: var(--sable); border-radius: var(--radius);
  padding: 16px 18px; margin: 18px 0; font-size: 13.5px;
}
.carte-recap .ligne { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #DCD2B9; }
.carte-recap .ligne:last-child { border-bottom: none; }
.carte-recap .ligne span:first-child { color: #6B6659; }
.carte-recap .ligne span:last-child { font-weight: 600; }

.badge-paiement { display: inline-block; padding: 4px 12px; border-radius: 30px; font-size: 12px; font-weight: 600; }
.badge-paiement.en_attente { background: #FCEFD9; color: #8A5A0B; }
.badge-paiement.paye { background: #E2F3EA; color: #1E6B47; }

/* ---------- SUIVI ---------- */
#carte-suivi { width: 100%; height: 280px; border-radius: var(--radius); overflow: hidden; background: #E4DCC8; }
.statut-course { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 13.5px; font-weight: 600; color: var(--nuit); }
.point-statut { width: 10px; height: 10px; border-radius: 50%; background: var(--acacia); animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,143,111,0.5);} 70% { box-shadow: 0 0 0 8px rgba(47,143,111,0);} 100% { box-shadow: 0 0 0 0 rgba(47,143,111,0);} }

/* ---------- COMPTE CLIENT ---------- */
.compte-tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.compte-tabs button {
  flex: 1; padding: 12px; border-radius: 10px; border: 1.5px solid #E4DCC8;
  background: var(--blanc); font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--nuit); cursor: pointer;
}
.compte-tabs button.actif { background: var(--nuit); color: var(--sable); border-color: var(--nuit); }

.photo-champ { text-align: center; }
.photo-apercu {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 10px;
  background: var(--sable); border: 1.5px dashed #C9BE9F;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #6B6659; text-align: center; overflow: hidden;
  cursor: pointer; background-size: cover; background-position: center;
}
#creation-photo { display: block; margin: 0 auto; font-size: 12.5px; }

.barre-profil {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 24px; background: var(--sable); border-bottom: 1px solid #EDE6D6;
}
.barre-profil img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: #E4DCC8; flex-shrink: 0;
}
.barre-profil span { font-size: 13.5px; font-weight: 600; color: var(--nuit); flex: 1; }
.barre-profil button {
  background: none; border: none; font-size: 12px; color: var(--route);
  text-decoration: underline; cursor: pointer; font-family: inherit; margin-left: 10px;
}

/* ---------- HISTORIQUE ---------- */
.carte-historique {
  border: 1.5px solid #E4DCC8; border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 10px; font-size: 13px;
}
.carte-historique .haut { display: flex; justify-content: space-between; font-weight: 600; color: var(--nuit); }
.carte-historique .bas { font-size: 12px; color: #6B6659; margin-top: 4px; }
.carte-historique .statut-mini {
  display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; margin-top: 6px;
}
.statut-mini.confirmee, .statut-mini.nouvelle { background: #E7EEF4; color: var(--route); }
.statut-mini.en_route, .statut-mini.traitee { background: #FCEFD9; color: #8A5A0B; }
.statut-mini.terminee, .statut-mini.cloturee { background: #E2F3EA; color: #1E6B47; }
.statut-mini.annulee { background: #FBE4DF; color: var(--alerte); }
.statut-mini.validee { background: #E2F3EA; color: #1E6B47; margin-left:6px; }

/* ---------- SERVICES SUR DEVIS ---------- */
.options-services { display: flex; flex-direction: column; gap: 10px; }
.option-service {
  border: 1.5px solid #E4DCC8; border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer; transition: border-color .15s;
}
.option-service:hover { border-color: var(--ambre); }
.option-service .libelle { font-weight: 600; font-size: 14.5px; }
.option-service .detail { font-size: 12.5px; color: #6B6659; margin-top: 2px; }

/* ---------- RESTAURATION (menu + panier) ---------- */
.menu-categorie-titre {
  font-family: 'Fraunces', serif; font-size: 16px; color: var(--nuit);
  margin: 22px 0 10px;
}
.menu-categorie-titre:first-child { margin-top: 0; }
.carte-menu {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid #E4DCC8; border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 10px;
}
.carte-menu img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; background: var(--sable); flex-shrink: 0; }
.carte-menu .sans-photo-menu {
  width: 54px; height: 54px; border-radius: 10px; background: var(--sable); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.carte-menu .infos { flex: 1; min-width: 0; }
.carte-menu .nom { font-weight: 600; font-size: 14px; color: var(--nuit); }
.carte-menu .desc { font-size: 12px; color: #6B6659; margin-top: 2px; }
.carte-menu .prix { font-family: 'Fraunces', serif; font-size: 14.5px; color: var(--nuit); margin-top: 4px; }
.carte-menu .stepper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.carte-menu .stepper button {
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--acacia);
  background: #fff; color: var(--acacia); font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.carte-menu .stepper button.ajouter { background: var(--acacia); color: #fff; border-color: var(--acacia); }
.carte-menu .stepper span { font-weight: 600; min-width: 14px; text-align: center; font-size: 14px; }

.panier-flottant {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: var(--nuit); color: var(--sable);
  padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 -4px 16px rgba(18,40,61,0.18);
}
.panier-flottant div { display: flex; flex-direction: column; font-size: 12px; opacity: 0.85; }
.panier-flottant #panier-flottant-total { font-family: 'Fraunces', serif; font-size: 17px; color: var(--ambre); opacity: 1; }
.panier-flottant button {
  background: var(--ambre); color: var(--nuit); border: none; border-radius: 10px;
  padding: 11px 18px; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit;
}

.ligne-panier {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px dashed #DCD2B9;
}
.ligne-panier .nom { font-size: 13.5px; font-weight: 600; color: var(--nuit); }
.ligne-panier .sous-total { font-size: 12.5px; color: #6B6659; }
.ligne-panier .stepper { display: flex; align-items: center; gap: 8px; }
.ligne-panier .stepper button {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #E4DCC8;
  background: #fff; color: var(--nuit); font-size: 15px; cursor: pointer;
}

.masque { display: none !important; }

.pied { text-align: center; padding: 22px; font-size: 12px; color: #9A9484; }

/* ----- Widget flottant : état de connexion au serveur (petit, compact) ----- */
.widget-serveur {
  position: fixed; bottom: 14px; right: 14px; z-index: 900;
  display: flex; align-items: center; gap: 0;
  background: var(--nuit); color: var(--sable);
  border-radius: 999px; box-shadow: 0 6px 14px rgba(11,27,41,0.3);
  cursor: pointer; user-select: none; font-family: inherit;
  padding: 7px; max-width: 26px; overflow: hidden;
  transition: max-width .2s ease, padding .2s ease;
}
.widget-serveur.ouvert { max-width: 190px; padding: 7px 12px 7px 8px; }
.widget-serveur .point-serveur {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #8A8473; transition: background .2s ease;
}
.widget-serveur .point-serveur.connecte { background: var(--acacia); box-shadow: 0 0 0 0 rgba(23,162,75,0.55); animation: pulse-serveur 2s infinite; }
.widget-serveur .point-serveur.deconnecte { background: var(--alerte); }
.widget-serveur .texte-serveur {
  white-space: nowrap; font-size: 11px; font-weight: 600; margin-left: 0; max-width: 0;
  opacity: 0; transition: opacity .15s ease, max-width .2s ease, margin-left .2s ease;
}
.widget-serveur.ouvert .texte-serveur { opacity: 1; max-width: 170px; margin-left: 7px; }
@keyframes pulse-serveur {
  0% { box-shadow: 0 0 0 0 rgba(23,162,75,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(23,162,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(23,162,75,0); }
}
/* Masqué sur mobile : uniquement visible sur poste bureau */
@media (max-width: 780px) {
  .widget-serveur { display: none !important; }
}

/* ----- Bandeau : installer l'application sur l'écran d'accueil ----- */
.bandeau-install {
  position: fixed; left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 950;
  max-width: 460px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--nuit); color: var(--sable);
  border-radius: 14px; padding: 10px 10px 10px 12px;
  box-shadow: 0 10px 26px rgba(11,27,41,0.35);
}
.bandeau-install-logo { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: block; }
.bandeau-install-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bandeau-install-texte b { font-size: 12.5px; line-height: 1.2; }
.bandeau-install-texte span { font-size: 10.5px; opacity: 0.75; line-height: 1.25; }
.bandeau-install-btn {
  background: var(--ambre); color: var(--nuit); border: none; border-radius: 8px;
  padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0; font-family: inherit;
}
.bandeau-install-fermer {
  background: transparent; border: none; color: var(--sable); opacity: 0.55; font-size: 13px;
  cursor: pointer; padding: 4px 5px; flex-shrink: 0; line-height: 1;
}

/* ----- Modale : instructions installation iOS ----- */
.popup-install-fond {
  position: fixed; inset: 0; background: rgba(18,40,61,0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 960;
}
.popup-install-boite {
  background: var(--blanc); border-radius: 16px; max-width: 320px; width: 100%;
  padding: 26px 22px 22px; position: relative; text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.popup-install-logo { width: 40px; height: 40px; border-radius: 10px; margin: 0 auto 10px; display: block; }
.popup-install-boite h3 { font-family: 'Fraunces', serif; font-size: 17px; margin: 0 0 14px; color: var(--nuit); }
.popup-install-boite ol { text-align: left; padding-left: 20px; margin: 0 0 14px; font-size: 13px; line-height: 1.6; }
.popup-install-boite p { font-size: 11.5px; color: #6B6659; margin: 0; }
.popup-install-fermer {
  position: absolute; top: 10px; right: 10px; border: none; background: #F1ECDF; color: var(--encre);
  width: 26px; height: 26px; border-radius: 50%; font-size: 12px; cursor: pointer; line-height: 1;
}

/* ----- Info paiement mobile (Wave / Orange Money) ----- */
.info-paiement-mobile {
  background: #FCEFD9; border: 1.5px dashed #E7C88C; border-radius: 12px;
  padding: 10px 14px; font-size: 12.5px; line-height: 1.4; color: #6B4A0B; margin: 10px 0 4px;
}
.info-paiement-mobile b { color: var(--nuit); }

/* ----- Badge de statut paiement "déclaré, en attente" ----- */
.badge-paiement.declare { background: #FCEFD9; color: #8A5A0B; }

/* ---------- Statut du chauffeur (Libre / En course), côté client ---------- */
.badge-statut-chauffeur-client {
  display: none; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; padding: 10px 14px; border-radius: 12px;
  margin: 14px 0;
}
.badge-statut-chauffeur-client.visible { display: flex; }
.badge-statut-chauffeur-client.libre { background: #E2F3EA; color: #1E6B47; }
.badge-statut-chauffeur-client.en_course { background: #FCEFD9; color: #8A5A0B; }

/* ----- Évaluation du chauffeur ----- */
.etoiles-choix { display: flex; justify-content: center; gap: 8px; margin: 6px 0 14px; }
.etoiles-choix .etoile {
  font-size: 34px; color: #E4DCC8; cursor: pointer; transition: color .1s ease, transform .1s ease; line-height: 1;
}
.etoiles-choix .etoile.choisie { color: var(--ambre); transform: scale(1.08); }
#eval-commentaire {
  width: 100%; border: 1.5px solid #E4DCC8; border-radius: 10px; padding: 10px 12px;
  font-family: inherit; font-size: 14px; resize: vertical; color: var(--encre);
}
.bloc-evaluation-faite { margin-top: 8px; }
.etoiles-affichees { color: var(--ambre); font-size: 15px; letter-spacing: 1px; }
.commentaire-evalue { font-size: 12px; color: #6B6659; font-style: italic; margin-top: 3px; }

/* ----- Code promo ----- */
.bloc-code-promo { display: flex; gap: 8px; margin: 6px 0 4px; }
.bloc-code-promo input { flex: 1; min-width: 0; text-transform: uppercase; }
.bloc-code-promo button {
  flex-shrink: 0; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--nuit);
  background: var(--nuit); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit;
}
.msg-code-promo { font-size: 12px; margin: 4px 0 8px; }
.msg-code-promo.valide { color: var(--acacia); }
.msg-code-promo.invalide { color: var(--alerte); }

/* ----- Guide touristique ----- */
.liste-sites-touristiques { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.carte-site-touristique {
  border: 1.5px solid #E4DCC8; border-radius: var(--radius); padding: 14px 16px;
  cursor: pointer; background: var(--blanc); transition: border-color .15s, background .15s;
}
.carte-site-touristique:hover { border-color: var(--ambre); }
.carte-site-touristique.actif { border-color: var(--route); background: #F3F8F1; }
.carte-site-touristique .haut { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.carte-site-touristique .nom { font-weight: 600; font-size: 14.5px; }
.carte-site-touristique .distance { font-size: 11.5px; color: #6B6659; white-space: nowrap; }
.carte-site-touristique .description { font-size: 12.5px; color: #6B6659; margin-top: 3px; }
.carte-site-touristique .prix { font-size: 13px; color: var(--route); font-weight: 600; margin-top: 6px; }

.bloc-site-choisi {
  border: 1.5px solid var(--route); border-radius: var(--radius); padding: 16px; background: #F3F8F1;
}
.site-choisi-distance { font-size: 12.5px; color: #6B6659; margin: 2px 0 10px; }
.devis-total-ligne { border-top: 1px dashed #C9D9CE; padding-top: 8px; margin-top: 4px; font-weight: 700; }


/* ================= MOBILE : zones de sécurité (encoche, barre d'accueil) ================= */
/* Avec viewport-fit=cover, la page s'étend sous l'encoche et la barre du
   bas. On réserve donc ces zones, et on peint la bande du haut en vert pour
   que l'heure/batterie (texte clair) restent lisibles sur tous les écrans. */
body {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top);
  background: var(--nuit); z-index: 999; pointer-events: none;
}
.wrap { padding-bottom: env(safe-area-inset-bottom); }
.panier-flottant { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.widget-serveur { bottom: calc(14px + env(safe-area-inset-bottom)); right: calc(14px + env(safe-area-inset-right)); }

/* ================= ÉCRAN COMPTE : formulaires compacts ================= */
.hero-compte { padding: 18px 20px 16px; }
.hero-compte .marque-ligne { margin-bottom: 10px; }
.hero-compte h1 { font-size: 22px; margin: 0 0 3px; }
.hero-compte p { font-size: 12.5px; max-width: none; }
.section-compte { padding: 14px 18px 12px; border-bottom: none; }
.compte-tabs { gap: 6px; margin-bottom: 12px; }
.compte-tabs button { padding: 8px 6px; font-size: 12.5px; border-radius: 8px; }

.form-compact .champ-c { margin-bottom: 9px; }
.champ-c label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 3px; color: var(--nuit); }
.champ-c input, .champ-tel select {
  width: 100%; height: 38px; padding: 0 10px; border: 1.5px solid #E4DCC8; border-radius: 8px;
  background: var(--blanc); color: var(--encre); font-size: 14px;
}
.champ-c input:focus, .champ-tel select:focus { outline: none; border-color: var(--route); }
.champ-tel { display: flex; gap: 6px; }
.champ-tel select { width: 96px; flex-shrink: 0; padding: 0 4px; font-weight: 600; }
.champ-tel input { flex: 1; min-width: 0; }
.btn-compact { padding: 10px; font-size: 13.5px; margin-top: 4px; border-radius: 9px; }
.form-compact .erreur { margin: 2px 0 4px; font-size: 12px; }

.ligne-profil { display: flex; align-items: flex-end; gap: 10px; }
.ligne-profil .champ-nom-c { flex: 1; min-width: 0; }
.photo-apercu-mini { width: 58px; height: 58px; margin: 0 0 9px; font-size: 20px; flex-shrink: 0; }
.compte-contact { text-align: center; font-size: 10.5px; line-height: 1.5; color: #8A8473; margin: 10px 0 0; }
.compte-contact:empty { display: none; }

/* ================= PETITS ÉCRANS (≤ 360 px) ================= */
@media (max-width: 360px) {
  .hero { padding: 22px 16px 24px; }
  .hero h1 { font-size: 24px; }
  .section { padding: 20px 16px; }
  .barre-profil { padding: 10px 14px; flex-wrap: wrap; }
  .modes-paiement { gap: 6px; }
  .champ-tel select { width: 88px; }
}