/* ==========================================================================
   Taxi Jbolide — feuille de style unique (mobile d'abord)
   Aucune police externe : polices système. Aucun style en ligne (CSP stricte).
   ========================================================================== */

:root {
  --nuit: #0b1220;
  --nuit-2: #131d31;
  --nuit-3: #1c2840;
  --clair: #eef2f8;
  --clair-doux: #c3cddd;
  --jaune: #ffc527;
  --jaune-vif: #ffd34f;
  --encre: #111827;
  --vert: #137a43;
  --vert-vif: #16904f;
  --carte: #ffffff;
  --texte: #18202f;
  --gris: #4d586b;
  --bordure: #aab5c6;
  --fond-champ: #f7f9fc;
  --erreur: #b3261e;
  --erreur-fond: #fdecea;
  --ok: #146c2e;
  --ok-fond: #e7f6ec;
  --info-fond: #fff6d6;
  --focus: #1a56db;
  --rayon: 14px;
  --ombre: 0 18px 50px rgba(0, 0, 0, .35);
  --largeur: 1180px;
  font-size: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.75rem; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--clair);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--jaune); text-underline-offset: .18em; }
a:hover { color: var(--jaune-vif); }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.evitement {
  position: absolute; left: .5rem; top: -4rem; z-index: 100;
  background: var(--jaune); color: var(--encre); padding: .6rem 1rem; border-radius: 8px; font-weight: 700;
}
.evitement:focus { top: .5rem; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 1rem; }

/* --------------------------------------------------------------------------
   Barre du haut (collante) : marque + appel
   -------------------------------------------------------------------------- */
.barre {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 18, 32, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .barre { background: rgba(11, 18, 32, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
.barre-int { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.5rem; }
.marque {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--jaune); text-decoration: none; font-weight: 900; letter-spacing: .04em; font-size: 1.15rem;
  text-transform: uppercase;
}
.marque:hover { color: var(--jaune-vif); }
.marque img { width: 30px; height: 30px; }
.barre-appel {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--jaune); color: var(--encre); text-decoration: none; font-weight: 800;
  padding: .45rem .9rem; border-radius: 999px; font-size: .95rem; white-space: nowrap; min-height: 2.75rem;
}
.barre-appel:hover { background: var(--jaune-vif); color: var(--encre); }
.barre-appel svg { width: 1.05em; height: 1.05em; }

/* --------------------------------------------------------------------------
   Haut de page : accroche (photo) + formulaire
   -------------------------------------------------------------------------- */
.haut { position: relative; }
.haut-grille { display: grid; grid-template-columns: 1fr; }

.accroche { position: relative; overflow: hidden; isolation: isolate; }
.accroche .fond { position: absolute; inset: 0; z-index: -2; }
.accroche .fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.accroche::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 18, 32, .6) 0%, rgba(11, 18, 32, .66) 45%, rgba(11, 18, 32, .96) 100%);
}
.accroche-int { padding: 2.2rem 1rem 2rem; text-align: center; }
.sur-titre {
  display: inline-block; margin: 0 0 .9rem; padding: .25rem .75rem; border-radius: 999px;
  background: rgba(255, 197, 39, .14); border: 1px solid rgba(255, 197, 39, .45);
  color: var(--jaune); font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
}
.accroche h1 { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); font-weight: 900; margin-bottom: .5rem; }
.accroche h1 .h1-marque { display: block; color: var(--jaune); text-transform: uppercase; letter-spacing: .02em; }
.accroche h1 .h1-sous { display: block; font-size: .5em; font-weight: 700; color: var(--clair); margin-top: .35rem; letter-spacing: 0; }
.accroche-texte { color: var(--clair-doux); max-width: 34rem; margin: 0 auto 1.4rem; }

.actions { display: grid; gap: .75rem; max-width: 26rem; margin: 0 auto; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .7rem 1.3rem; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; text-align: center;
}
.bouton svg { width: 1.25em; height: 1.25em; flex: none; }
.bouton-appel {
  background: var(--jaune); color: var(--encre); font-size: 1.3rem; min-height: 4rem;
  box-shadow: 0 10px 30px rgba(255, 197, 39, .28);
}
.bouton-appel:hover { background: var(--jaune-vif); color: var(--encre); }
.bouton-appel small { display: block; font-size: .72em; font-weight: 700; opacity: .85; }
.bouton-appel span { line-height: 1.15; }
.bouton-whatsapp { background: var(--vert); color: #fff; }
.bouton-whatsapp:hover { background: var(--vert-vif); color: #fff; }
.bouton-secondaire { background: transparent; color: var(--clair); border-color: rgba(255, 255, 255, .45); }
.bouton-secondaire:hover { border-color: var(--jaune); color: var(--jaune); }

/* Carte du formulaire */
.zone-formulaire { padding: 0 .75rem 2.5rem; background: var(--nuit); }
.carte {
  background: var(--carte); color: var(--texte); border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 1.4rem 1.1rem 1.6rem; max-width: 42rem; margin: 0 auto;
}
.carte h2 { color: var(--texte); font-size: 1.55rem; margin-bottom: .35rem; }
.carte a { color: #1d4ed8; }
.carte a:hover { color: #1e3a8a; }
.carte :focus-visible { outline-color: var(--focus); }
.carte-intro { color: var(--gris); font-size: .97rem; }
.carte-intro strong { color: var(--texte); }

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */
.formulaire { margin-top: 1rem; }
.formulaire fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.formulaire legend, .champ > label, .etiquette {
  display: block; font-weight: 750; font-size: 1rem; margin-bottom: .4rem; padding: 0; color: var(--texte);
}
.requis { color: var(--erreur); font-weight: 800; }
.facultatif { color: var(--gris); font-weight: 500; font-size: .9em; }
.aide { color: var(--gris); font-size: .9rem; margin: .1rem 0 .5rem; }
.obligatoires { color: var(--gris); font-size: .9rem; margin-bottom: 1rem; }

.champ { margin-bottom: 1.15rem; }
.sous-champ { margin-bottom: .7rem; }
.sous-champ label { display: block; font-size: .9rem; color: var(--gris); font-weight: 600; margin-bottom: .2rem; }
.ligne { display: grid; grid-template-columns: 1fr; gap: 0 .75rem; }
.ligne-2 { grid-template-columns: 1fr 1fr; }

input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="time"], select, textarea {
  width: 100%; min-height: 3rem; padding: .65rem .8rem;
  font: inherit; font-size: 1.0625rem; color: var(--texte);
  background: var(--fond-champ); border: 1.5px solid var(--bordure); border-radius: 10px;
  appearance: none; -webkit-appearance: none;
}
input[type="date"], input[type="time"] { display: block; }
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
  background-size: .35rem .35rem, .35rem .35rem; background-repeat: no-repeat; padding-right: 2.2rem;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); background: #fff; }
[aria-invalid="true"] { border-color: var(--erreur) !important; background: #fff8f7; }

.choix { display: grid; gap: .5rem; }
.choix-2 { grid-template-columns: 1fr 1fr; }
.option {
  position: relative; display: flex; align-items: center; gap: .65rem;
  padding: .7rem .85rem; border: 1.5px solid var(--bordure); border-radius: 10px; background: var(--fond-champ);
  cursor: pointer; font-weight: 600; min-height: 3rem;
}
.option input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: #1d4ed8; }
.option:has(input:checked) { border-color: #1d4ed8; background: #eef3ff; }
.option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }

.erreur { color: var(--erreur); font-size: .92rem; font-weight: 650; margin: .3rem 0 0; }
.erreur:empty { display: none; }

/* Champ piège : hors écran pour les humains, présent pour les robots */
.piege { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.alerte { border-radius: 10px; padding: .85rem 1rem; margin: 1rem 0; font-size: .97rem; }
.alerte:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.alerte p { margin: 0 0 .4rem; }
.alerte p:last-child, .alerte ul:last-child { margin-bottom: 0; }
.alerte ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.alerte-erreur { background: var(--erreur-fond); color: #7a1a14; border-left: 5px solid var(--erreur); }
.alerte-info { background: var(--info-fond); color: #5c4400; border-left: 5px solid #d39e00; }
.alerte-ok { background: var(--ok-fond); color: var(--ok); border-left: 5px solid var(--ok); }

.envoi { margin-top: 1.4rem; }
.envoi .bouton { width: 100%; background: var(--encre); color: #fff; font-size: 1.15rem; min-height: 3.4rem; border-radius: 12px; }
.envoi .bouton:hover { background: #24324d; }
.envoi .bouton[disabled] { opacity: .7; cursor: progress; }
.mention-donnees { color: var(--gris); font-size: .85rem; margin: .9rem 0 0; }

/* --------------------------------------------------------------------------
   Sections d'information
   -------------------------------------------------------------------------- */
.section { padding: 3rem 0; }
.section-alt { background: var(--nuit-2); }
.section-intro { color: var(--clair-doux); max-width: 46rem; }
.grille-services { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .9rem; }
.service {
  background: var(--nuit-3); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--rayon);
  padding: 1.15rem 1.15rem 1.2rem; display: flex; gap: .9rem; align-items: flex-start;
}
.service svg { width: 2.1rem; height: 2.1rem; flex: none; color: var(--jaune); }
.service h3 { margin: .1rem 0 .3rem; }
.service p { margin: 0; color: var(--clair-doux); font-size: .98rem; }

.zone { display: grid; gap: 1.5rem; align-items: center; }
.zone-carte {
  border-radius: var(--rayon); background: var(--nuit-3); border: 1px solid rgba(255, 255, 255, .07);
  padding: 1.4rem; display: flex; gap: 1rem; align-items: center;
}
.zone-carte svg { width: 3rem; height: 3rem; color: var(--jaune); flex: none; }
.zone-carte p { margin: 0; }
.zone-carte strong { display: block; font-size: 1.25rem; color: #fff; }

.contact-liste { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .9rem; }
.contact-liste .bouton { width: 100%; }

/* --------------------------------------------------------------------------
   Pages de texte (mentions légales, confirmation, 404)
   -------------------------------------------------------------------------- */
.page-texte { padding: 2.2rem 0 3.5rem; }
.page-texte .carte { max-width: 50rem; }
.page-texte h1 { color: var(--texte); font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem); }
.page-texte h2 { color: var(--texte); font-size: 1.3rem; margin-top: 1.8rem; }
.page-texte dl { display: grid; grid-template-columns: 1fr; gap: .15rem 1rem; margin: 0 0 1rem; }
.page-texte dt { font-weight: 700; margin-top: .5rem; }
.page-texte dd { margin: 0; color: var(--gris); }
.page-texte ul { padding-left: 1.2rem; }
.centre { text-align: center; }
.page-texte .actions { margin-top: 1.4rem; }
.page-texte .bouton-secondaire { color: var(--texte); border-color: var(--bordure); }
.page-texte .bouton-secondaire:hover { color: #1d4ed8; border-color: #1d4ed8; }
.icone-ok { width: 4rem; height: 4rem; margin: 0 auto 1rem; color: var(--ok); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied { border-top: 1px solid rgba(255, 255, 255, .08); padding: 1.6rem 0 2rem; color: var(--clair-doux); font-size: .92rem; }
.pied p { margin: .2rem 0; }
.pied a { color: var(--clair); }

/* --------------------------------------------------------------------------
   Autocomplétion des adresses (motif combobox / listbox)
   -------------------------------------------------------------------------- */
.combo { position: relative; }
.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  margin: 0; padding: .3rem; list-style: none; background: #fff;
  border: 1.5px solid var(--focus); border-radius: 12px; box-shadow: 0 14px 34px rgba(17, 24, 39, .28);
  max-height: min(55vh, 22rem); overflow-y: auto; overscroll-behavior: contain;
}
.suggestion {
  display: flex; flex-direction: column; justify-content: center; gap: .1rem;
  min-height: 3rem; padding: .45rem .7rem; border-radius: 8px; cursor: pointer;
  color: var(--texte); line-height: 1.25;
}
.suggestion + .suggestion { margin-top: 2px; }
.suggestion:hover { background: #f1f5ff; }
.suggestion[aria-selected="true"] { background: #e3ebff; box-shadow: inset 3px 0 0 #1d4ed8; }
.suggestion-nom { font-weight: 700; overflow-wrap: anywhere; }
.suggestion-ville { font-size: .9rem; color: var(--gris); }

/* --------------------------------------------------------------------------
   Champ « date et heure » (ouvre la fenêtre)
   -------------------------------------------------------------------------- */
.champ-quand {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 3.25rem; padding: .65rem .85rem;
  font: inherit; font-size: 1.0625rem; text-align: left; color: var(--gris); cursor: pointer;
  background: var(--fond-champ); border: 1.5px solid var(--bordure); border-radius: 10px;
}
.champ-quand svg { width: 1.4rem; height: 1.4rem; flex: none; color: #1d4ed8; }
.champ-quand.rempli { color: var(--texte); font-weight: 700; }
.champ-quand:hover { border-color: #1d4ed8; }
.champ-quand:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* --------------------------------------------------------------------------
   Fenêtre de choix de la date et de l'heure (dialog natif, plein écran sur mobile)
   -------------------------------------------------------------------------- */
html:has(dialog[open]) { overflow: hidden; }
.fenetre {
  padding: 0; border: 0; margin: 0; color: var(--texte); background: #fff;
  width: 100%; max-width: 100%; height: 100%; height: 100dvh; max-height: 100%; max-height: 100dvh;
}
.fenetre::backdrop { background: rgba(5, 10, 20, .72); }
.fenetre :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fenetre-cadre { display: flex; flex-direction: column; height: 100%; }
.fenetre-entete {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .75rem .6rem 1rem; border-bottom: 1px solid #e5e9f0;
}
.fenetre-entete h2 { font-size: 1.1rem; margin: 0; color: var(--texte); }
.fenetre-fermer {
  flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%;
  background: #eef1f6; color: var(--texte); font: inherit; font-size: 1.15rem; cursor: pointer;
}
.fenetre-corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .5rem .5rem 1rem; }
.fenetre-pied { border-top: 1px solid #e5e9f0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: #fff; }
.fq-etape { display: block; font-weight: 800; font-size: 1rem; margin: .5rem 0 .45rem; padding: 0 .25rem; color: var(--texte); }
.fq-raccourcis { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 .25rem .5rem; }
.fq-raccourci, .cal-nav {
  min-height: 2.75rem; border: 1.5px solid var(--bordure); border-radius: 10px; background: var(--fond-champ);
  font: inherit; font-weight: 700; color: var(--texte); cursor: pointer;
}
.fq-raccourci:hover, .cal-nav:hover:not(:disabled) { border-color: #1d4ed8; }
.cal-entete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .25rem .25rem .2rem; }
.cal-entete h3 { margin: 0; font-size: 1.05rem; color: var(--texte); }
.cal-nav { width: 2.75rem; font-size: 1.5rem; line-height: 1; }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th { font-size: .8rem; font-weight: 700; color: var(--gris); padding: .3rem 0; text-align: center; }
.cal td { padding: 1px; text-align: center; }
.cal-jour {
  display: block; width: 100%; min-height: 2.75rem; border: 0; border-radius: 10px; background: transparent;
  font: inherit; font-weight: 650; color: var(--texte); cursor: pointer;
}
.cal-jour:hover { background: #eef3ff; }
.cal-jour[aria-current="date"] { box-shadow: inset 0 0 0 2px #9fb3d9; }
.cal td[aria-selected="true"] .cal-jour { background: #1d4ed8; color: #fff; }
.cal-jour[aria-disabled="true"] { color: #b4bccb; background: transparent; cursor: not-allowed; }
.fq-creneaux { border: 0; padding: 0; margin: .8rem 0 0; min-width: 0; }
.fq-grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; padding: 0 .25rem; }
.creneau { position: relative; display: block; }
.creneau input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.creneau span {
  display: flex; align-items: center; justify-content: center; min-height: 2.75rem;
  border: 1.5px solid var(--bordure); border-radius: 10px; background: var(--fond-champ); font-weight: 650; font-size: .95rem;
}
.creneau input:hover:not(:disabled) + span { border-color: #1d4ed8; }
.creneau input:checked + span { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.creneau input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.creneau input:disabled { cursor: not-allowed; }
.creneau input:disabled + span { color: #b4bccb; background: #f1f3f7; border-color: #e3e7ee; text-decoration: line-through; }
.fq-recap { margin: 0 0 .6rem; font-weight: 800; font-size: 1.05rem; min-height: 1.5em; }
.fq-actions { display: grid; grid-template-columns: 1fr 2fr; gap: .6rem; }
.fq-actions .bouton { border-radius: 12px; min-height: 3rem; }
.bouton-discret { background: #eef1f6; color: var(--texte); }
.bouton-discret:hover { background: #e2e7ef; }
.bouton-valider { background: #1d4ed8; color: #fff; }
.bouton-valider:hover:not(:disabled) { background: #1e40af; }
.bouton-valider:disabled { opacity: .45; cursor: not-allowed; }

/* Très petits écrans (320 à 359 px) */
@media (max-width: 359px) {
  .conteneur { padding: 0 .75rem; }
  .marque { font-size: 1rem; gap: .4rem; }
  .marque img { width: 26px; height: 26px; }
  .barre-appel { padding: .45rem .75rem; }
  .zone-formulaire { padding-left: .5rem; padding-right: .5rem; }
  .carte { padding: 1.2rem .9rem 1.4rem; }
  .fenetre-corps { padding: .5rem .25rem 1rem; }
  .cal td { padding: 0; }
}
@media (min-width: 360px) {
  .fenetre-corps { padding: .5rem .75rem 1rem; }
}
@media (min-width: 560px) {
  .fenetre {
    width: min(31rem, calc(100% - 2rem)); height: auto; max-height: min(92vh, 52rem);
    margin: auto; border-radius: 16px; box-shadow: var(--ombre);
  }
  .fenetre-cadre { max-height: min(92vh, 52rem); }
  .fenetre-corps { padding: .75rem 1.25rem 1rem; }
}

/* --------------------------------------------------------------------------
   Nombre de passagers : boutons radio natifs présentés en boutons segmentés
   -------------------------------------------------------------------------- */
.segments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.segment { position: relative; display: block; }
.segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segment > span {
  display: flex; align-items: center; justify-content: center; gap: .3rem; min-height: 3rem;
  border: 1.5px solid var(--bordure); border-radius: 10px; background: var(--fond-champ);
  font-weight: 750; font-size: 1.2rem; color: var(--texte);
}
.segment input:hover + span { border-color: #1d4ed8; }
/* Sélection visible autrement que par la couleur : coche + bordure épaisse */
.segment input:checked + span { background: #eef3ff; color: #1d4ed8; border: 3px solid #1d4ed8; }
.segment input:checked + span::before { content: "✓"; font-size: .9em; font-weight: 900; }
.segment input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Téléphone : indicatif pays (select natif sans JavaScript, bouton drapeau avec)
   -------------------------------------------------------------------------- */
.tel-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: stretch; }
select.tel-indicatif { width: 8.5rem; min-width: 0; }
.tel-pays {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 3rem; padding: 0 .7rem;
  font: inherit; font-size: 1.0625rem; font-weight: 700; color: var(--texte); cursor: pointer;
  background: var(--fond-champ); border: 1.5px solid var(--bordure); border-radius: 10px;
}
.tel-pays:hover { border-color: #1d4ed8; }
.tel-pays:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.tel-chevron { color: var(--gris); font-size: .8em; }

/* Fenêtre de choix du pays */
.fp-recherche { padding: .6rem 1rem; border-bottom: 1px solid #e5e9f0; }
.fp-recherche input {
  width: 100%; min-height: 3rem; padding: .6rem .8rem; font: inherit; font-size: 1.0625rem; color: var(--texte);
  background: var(--fond-champ); border: 1.5px solid var(--bordure); border-radius: 10px;
}
.fp-recherche input:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); background: #fff; }
.fp-corps { padding: .25rem .5rem 1rem; }
.fp-groupe-titre {
  position: sticky; top: 0; z-index: 1; background: #fff; padding: .6rem .5rem .3rem;
  font-size: .85rem; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: .04em;
}
.fp-option {
  display: flex; align-items: center; gap: .7rem; min-height: 3rem; padding: .35rem .6rem;
  border-radius: 8px; cursor: pointer; color: var(--texte);
}
.fp-option:hover { background: #f1f5ff; }
.fp-option.fp-actif { background: #e3ebff; box-shadow: inset 3px 0 0 #1d4ed8; }
.fp-option[aria-selected="true"] .fp-nom { font-weight: 800; }
.fp-option[aria-selected="true"] .fp-nom::after { content: " ✓"; color: #1d4ed8; }
.fp-nom { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fp-code { color: var(--gris); font-variant-numeric: tabular-nums; }
.fp-vide { color: var(--gris); padding: .5rem; margin: 0; }
.fp-vide:empty { display: none; }
@media (min-width: 560px) {
  .fenetre-pays { height: min(92vh, 40rem); }
  .fenetre-pays .fenetre-cadre { height: 100%; }
}

/* --------------------------------------------------------------------------
   Logo-bouton et bulle du compteur de visites
   -------------------------------------------------------------------------- */
.barre-int { position: relative; }
.marque-bouton {
  min-height: 2.75rem; padding: 0 .25rem 0 0; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 900; letter-spacing: .04em; font-size: 1.15rem; text-transform: uppercase; color: var(--jaune);
}
.marque-bouton:hover { color: var(--jaune-vif); }
.marque-bouton[aria-expanded="true"] { text-decoration: underline; text-underline-offset: .25em; }
.bulle {
  position: absolute; top: calc(100% + .5rem); left: 1rem; z-index: 70;
  width: max-content; max-width: min(24rem, calc(100vw - 2rem));
  background: #fff; color: var(--texte); border-radius: 12px; padding: .8rem 1rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4); font-size: .98rem; line-height: 1.45;
}
.bulle::before {
  content: ""; position: absolute; top: -7px; left: 1.4rem; width: 14px; height: 14px;
  background: #fff; transform: rotate(45deg);
}
.bulle p { margin: 0; position: relative; }
@media (max-width: 359px) {
  .marque-bouton { font-size: 1rem; }
  .bulle { left: .75rem; }
}

/* --------------------------------------------------------------------------
   Questions fréquentes (details/summary natifs) et plan du site en pied de page
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .7rem; margin-top: 1.4rem; max-width: 52rem; }
.faq-item { background: var(--nuit-3); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--rayon); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3rem; padding: .85rem 1.1rem; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; color: var(--jaune); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item summary h3 { margin: 0; font-size: 1.05rem; }
.faq-item summary:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; border-radius: var(--rayon); }
.faq-item p { margin: 0; padding: 0 1.1rem 1rem; color: var(--clair-doux); }
.pied-nav ul { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; }
.pied-nav a { display: inline-block; padding: .35rem 0; }

/* --------------------------------------------------------------------------
   Écrans plus larges
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .ligne-cp { grid-template-columns: 2fr 1fr; }
  .actions { max-width: 30rem; }
  .carte { padding: 1.8rem 1.8rem 2rem; }
  .grille-services { grid-template-columns: 1fr 1fr; }
  .page-texte dl { grid-template-columns: 14rem 1fr; }
  .page-texte dt { margin-top: 0; }
  .contact-liste { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  body { font-size: 1.075rem; }
  .barre-int { min-height: 4rem; }
  .haut-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; }
  .accroche { min-height: 100%; }
  .accroche-int {
    position: sticky; top: 4rem; text-align: left; padding: 4.5rem 2.5rem 3rem max(2rem, calc((100vw - var(--largeur)) / 2 + 1rem));
  }
  .accroche-texte { margin-left: 0; }
  .actions { margin: 0; }
  .zone-formulaire { padding: 2.5rem max(2rem, calc((100vw - var(--largeur)) / 2 + 1rem)) 3rem 2.5rem; }
  .carte { margin: 0; }
  .grille-services { grid-template-columns: repeat(3, 1fr); }
  .zone { grid-template-columns: 1.3fr 1fr; }
  .section { padding: 4rem 0; }
}

/* Drapeaux : planche générée par outils/pays_drapeaux.py depuis flag-icons 7.5.0 (licence MIT). */
.drapeau { display: inline-block; flex: none; width: 24px; height: 18px; border-radius: 2px; vertical-align: middle;
  background-color: #d7dce5; background-repeat: no-repeat; background-image: url("../img/drapeaux.png");
  background-size: 384px 288px; box-shadow: 0 0 0 1px rgba(17, 24, 39, .18); }
.d-af { background-position: -0px -0px; }
.d-za { background-position: -24px -0px; }
.d-al { background-position: -48px -0px; }
.d-dz { background-position: -72px -0px; }
.d-de { background-position: -96px -0px; }
.d-ad { background-position: -120px -0px; }
.d-ao { background-position: -144px -0px; }
.d-ai { background-position: -168px -0px; }
.d-ag { background-position: -192px -0px; }
.d-sa { background-position: -216px -0px; }
.d-ar { background-position: -240px -0px; }
.d-am { background-position: -264px -0px; }
.d-aw { background-position: -288px -0px; }
.d-au { background-position: -312px -0px; }
.d-at { background-position: -336px -0px; }
.d-az { background-position: -360px -0px; }
.d-bs { background-position: -0px -18px; }
.d-bh { background-position: -24px -18px; }
.d-bd { background-position: -48px -18px; }
.d-bb { background-position: -72px -18px; }
.d-be { background-position: -96px -18px; }
.d-bz { background-position: -120px -18px; }
.d-bj { background-position: -144px -18px; }
.d-bm { background-position: -168px -18px; }
.d-bt { background-position: -192px -18px; }
.d-by { background-position: -216px -18px; }
.d-bo { background-position: -240px -18px; }
.d-ba { background-position: -264px -18px; }
.d-bw { background-position: -288px -18px; }
.d-br { background-position: -312px -18px; }
.d-bn { background-position: -336px -18px; }
.d-bg { background-position: -360px -18px; }
.d-bf { background-position: -0px -36px; }
.d-bi { background-position: -24px -36px; }
.d-kh { background-position: -48px -36px; }
.d-cm { background-position: -72px -36px; }
.d-ca { background-position: -96px -36px; }
.d-cv { background-position: -120px -36px; }
.d-cl { background-position: -144px -36px; }
.d-cn { background-position: -168px -36px; }
.d-cy { background-position: -192px -36px; }
.d-co { background-position: -216px -36px; }
.d-km { background-position: -240px -36px; }
.d-cg { background-position: -264px -36px; }
.d-cd { background-position: -288px -36px; }
.d-kp { background-position: -312px -36px; }
.d-kr { background-position: -336px -36px; }
.d-cr { background-position: -360px -36px; }
.d-ci { background-position: -0px -54px; }
.d-hr { background-position: -24px -54px; }
.d-cu { background-position: -48px -54px; }
.d-cw { background-position: -72px -54px; }
.d-dk { background-position: -96px -54px; }
.d-dj { background-position: -120px -54px; }
.d-dm { background-position: -144px -54px; }
.d-eg { background-position: -168px -54px; }
.d-ae { background-position: -192px -54px; }
.d-ec { background-position: -216px -54px; }
.d-er { background-position: -240px -54px; }
.d-es { background-position: -264px -54px; }
.d-ee { background-position: -288px -54px; }
.d-sz { background-position: -312px -54px; }
.d-va { background-position: -336px -54px; }
.d-us { background-position: -360px -54px; }
.d-et { background-position: -0px -72px; }
.d-fj { background-position: -24px -72px; }
.d-fi { background-position: -48px -72px; }
.d-fr { background-position: -72px -72px; }
.d-ga { background-position: -96px -72px; }
.d-gm { background-position: -120px -72px; }
.d-ge { background-position: -144px -72px; }
.d-gh { background-position: -168px -72px; }
.d-gi { background-position: -192px -72px; }
.d-gr { background-position: -216px -72px; }
.d-gd { background-position: -240px -72px; }
.d-gl { background-position: -264px -72px; }
.d-gp { background-position: -288px -72px; }
.d-gu { background-position: -312px -72px; }
.d-gt { background-position: -336px -72px; }
.d-gg { background-position: -360px -72px; }
.d-gn { background-position: -0px -90px; }
.d-gq { background-position: -24px -90px; }
.d-gw { background-position: -48px -90px; }
.d-gy { background-position: -72px -90px; }
.d-gf { background-position: -96px -90px; }
.d-ht { background-position: -120px -90px; }
.d-hn { background-position: -144px -90px; }
.d-hk { background-position: -168px -90px; }
.d-hu { background-position: -192px -90px; }
.d-cx { background-position: -216px -90px; }
.d-ac { background-image: none; }
.d-im { background-position: -264px -90px; }
.d-nf { background-position: -288px -90px; }
.d-ax { background-position: -312px -90px; }
.d-ky { background-position: -336px -90px; }
.d-cc { background-position: -360px -90px; }
.d-ck { background-position: -0px -108px; }
.d-fo { background-position: -24px -108px; }
.d-fk { background-position: -48px -108px; }
.d-mp { background-position: -72px -108px; }
.d-mh { background-position: -96px -108px; }
.d-sb { background-position: -120px -108px; }
.d-tc { background-position: -144px -108px; }
.d-vg { background-position: -168px -108px; }
.d-vi { background-position: -192px -108px; }
.d-in { background-position: -216px -108px; }
.d-id { background-position: -240px -108px; }
.d-iq { background-position: -264px -108px; }
.d-ir { background-position: -288px -108px; }
.d-ie { background-position: -312px -108px; }
.d-is { background-position: -336px -108px; }
.d-il { background-position: -360px -108px; }
.d-it { background-position: -0px -126px; }
.d-jm { background-position: -24px -126px; }
.d-jp { background-position: -48px -126px; }
.d-je { background-position: -72px -126px; }
.d-jo { background-position: -96px -126px; }
.d-kz { background-position: -120px -126px; }
.d-ke { background-position: -144px -126px; }
.d-kg { background-position: -168px -126px; }
.d-ki { background-position: -192px -126px; }
.d-xk { background-position: -216px -126px; }
.d-kw { background-position: -240px -126px; }
.d-re { background-position: -264px -126px; }
.d-la { background-position: -288px -126px; }
.d-ls { background-position: -312px -126px; }
.d-lv { background-position: -336px -126px; }
.d-lb { background-position: -360px -126px; }
.d-lr { background-position: -0px -144px; }
.d-ly { background-position: -24px -144px; }
.d-li { background-position: -48px -144px; }
.d-lt { background-position: -72px -144px; }
.d-lu { background-position: -96px -144px; }
.d-mo { background-position: -120px -144px; }
.d-mk { background-position: -144px -144px; }
.d-mg { background-position: -168px -144px; }
.d-my { background-position: -192px -144px; }
.d-mw { background-position: -216px -144px; }
.d-mv { background-position: -240px -144px; }
.d-ml { background-position: -264px -144px; }
.d-mt { background-position: -288px -144px; }
.d-ma { background-position: -312px -144px; }
.d-mq { background-position: -336px -144px; }
.d-mu { background-position: -360px -144px; }
.d-mr { background-position: -0px -162px; }
.d-yt { background-position: -24px -162px; }
.d-mx { background-position: -48px -162px; }
.d-fm { background-position: -72px -162px; }
.d-md { background-position: -96px -162px; }
.d-mc { background-position: -120px -162px; }
.d-mn { background-position: -144px -162px; }
.d-me { background-position: -168px -162px; }
.d-ms { background-position: -192px -162px; }
.d-mz { background-position: -216px -162px; }
.d-mm { background-position: -240px -162px; }
.d-na { background-position: -264px -162px; }
.d-nr { background-position: -288px -162px; }
.d-np { background-position: -312px -162px; }
.d-ni { background-position: -336px -162px; }
.d-ne { background-position: -360px -162px; }
.d-ng { background-position: -0px -180px; }
.d-nu { background-position: -24px -180px; }
.d-no { background-position: -48px -180px; }
.d-nc { background-position: -72px -180px; }
.d-nz { background-position: -96px -180px; }
.d-om { background-position: -120px -180px; }
.d-ug { background-position: -144px -180px; }
.d-uz { background-position: -168px -180px; }
.d-pk { background-position: -192px -180px; }
.d-pw { background-position: -216px -180px; }
.d-ps { background-position: -240px -180px; }
.d-pa { background-position: -264px -180px; }
.d-pg { background-position: -288px -180px; }
.d-py { background-position: -312px -180px; }
.d-nl { background-position: -336px -180px; }
.d-bq { background-position: -360px -180px; }
.d-pe { background-position: -0px -198px; }
.d-ph { background-position: -24px -198px; }
.d-pl { background-position: -48px -198px; }
.d-pf { background-position: -72px -198px; }
.d-pr { background-position: -96px -198px; }
.d-pt { background-position: -120px -198px; }
.d-qa { background-position: -144px -198px; }
.d-cf { background-position: -168px -198px; }
.d-do { background-position: -192px -198px; }
.d-ro { background-position: -216px -198px; }
.d-gb { background-position: -240px -198px; }
.d-ru { background-position: -264px -198px; }
.d-rw { background-position: -288px -198px; }
.d-eh { background-position: -312px -198px; }
.d-bl { background-position: -336px -198px; }
.d-kn { background-position: -360px -198px; }
.d-sm { background-position: -0px -216px; }
.d-mf { background-position: -24px -216px; }
.d-sx { background-position: -48px -216px; }
.d-pm { background-position: -72px -216px; }
.d-vc { background-position: -96px -216px; }
.d-sh { background-position: -120px -216px; }
.d-lc { background-position: -144px -216px; }
.d-sv { background-position: -168px -216px; }
.d-ws { background-position: -192px -216px; }
.d-as { background-position: -216px -216px; }
.d-st { background-position: -240px -216px; }
.d-sn { background-position: -264px -216px; }
.d-rs { background-position: -288px -216px; }
.d-sc { background-position: -312px -216px; }
.d-sl { background-position: -336px -216px; }
.d-sg { background-position: -360px -216px; }
.d-sk { background-position: -0px -234px; }
.d-si { background-position: -24px -234px; }
.d-so { background-position: -48px -234px; }
.d-sd { background-position: -72px -234px; }
.d-ss { background-position: -96px -234px; }
.d-lk { background-position: -120px -234px; }
.d-se { background-position: -144px -234px; }
.d-ch { background-position: -168px -234px; }
.d-sr { background-position: -192px -234px; }
.d-sj { background-position: -216px -234px; }
.d-sy { background-position: -240px -234px; }
.d-tj { background-position: -264px -234px; }
.d-tw { background-position: -288px -234px; }
.d-tz { background-position: -312px -234px; }
.d-td { background-position: -336px -234px; }
.d-cz { background-position: -360px -234px; }
.d-io { background-position: -0px -252px; }
.d-th { background-position: -24px -252px; }
.d-tl { background-position: -48px -252px; }
.d-tg { background-position: -72px -252px; }
.d-tk { background-position: -96px -252px; }
.d-to { background-position: -120px -252px; }
.d-tt { background-position: -144px -252px; }
.d-ta { background-image: none; }
.d-tn { background-position: -192px -252px; }
.d-tm { background-position: -216px -252px; }
.d-tr { background-position: -240px -252px; }
.d-tv { background-position: -264px -252px; }
.d-ua { background-position: -288px -252px; }
.d-uy { background-position: -312px -252px; }
.d-vu { background-position: -336px -252px; }
.d-ve { background-position: -360px -252px; }
.d-vn { background-position: -0px -270px; }
.d-wf { background-position: -24px -270px; }
.d-ye { background-position: -48px -270px; }
.d-zm { background-position: -72px -270px; }
.d-zw { background-position: -96px -270px; }