/* ═══════════════════════════════════════════════════════════════════════
   L'espace client — la feuille propre à `espace-client.html`.

   Elle vient APRÈS `commun.css` et n'en refait rien : la palette, le
   bandeau, les boutons et le pied de page viennent de là. Ici il n'y a que
   ce qui n'existe nulle part ailleurs — la porte, les onglets, la liste des
   pièces du dossier, la jauge de paiement et le fil des messages.

   Le parti pris : l'espace client garde l'habit du site public (fond nuit,
   or, mêmes polices), là où l'administration a le sien. Un client qui se
   connecte doit se sentir chez la même agence, pas dans un outil.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La porte ──
   Plein écran tant qu'on n'est pas entré, et centrée : c'est le seul écran
   du site qui n'a rien à faire défiler. */
.porte-cli { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 110px 20px 60px; }
/* `display: grid` l'emporte sur le `[hidden]` du navigateur : sans cette
   ligne, la porte reste affichée sous l'espace une fois entré. */
.porte-cli[hidden] { display: none; }
.porte-cli__boite {
  width: 100%; max-width: 430px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(224,163,60,.3); border-radius: 24px; padding: 32px 30px;
  display: grid; gap: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.porte-cli__boite h1 { font-family: var(--titre); font-size: 26px; margin: 4px 0 0; color: #fff; }
.porte-cli__boite > p { font-size: 14.5px; line-height: 1.6; color: var(--gris); margin: 0 0 6px; }
.porte-cli__boite label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--gris); display: grid; gap: 6px; }
.porte-cli__boite input {
  width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(10,22,52,.45); color: #fff; font-family: var(--texte); font-size: 15px;
}
.porte-cli__boite input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.porte-cli__boite .btn { border: 0; cursor: pointer; font-family: var(--texte); width: 100%; }
.porte-cli__boite form { display: grid; gap: 14px; }
/* Encore le même piège que sur `.porte-cli` : `display: grid` l'emporte sur
   le `[hidden]` du navigateur, et les deux formulaires s'affichaient l'un
   sous l'autre. */
.porte-cli__boite form[hidden] { display: none; }

/* ── La porte, un seul formulaire ──
   Les deux onglets « Se connecter » / « Première connexion » ont été retirés le
   28 août 2026 : le bloc du code se déplie dans le même formulaire quand il
   faut. Un client n'a pas à choisir dans quel temps il se trouve. */
/* Le bloc déplié est un enfant de la grille du formulaire : ses propres champs
   ne recevaient donc aucun espacement et se collaient les uns aux autres. */
#premiereFois { display: grid; gap: 14px; }
#premiereFois[hidden] { display: none; }
/* ── L'ATTENTE ──
   Le même encadré que la porte, avec une seule phrase : c'est ce qu'on voit
   pendant que le serveur vérifie la session gardée dans ce navigateur. Il n'y
   a rien à cliquer, donc rien de plus à dessiner — le point qui bat suffit à
   dire que ça travaille. */
.porte-cli__attente { font-size: 14.5px; color: var(--gris); margin: 0; }
.porte-cli__attente::after {
  content: '…'; display: inline-block; width: 0; overflow: hidden;
  vertical-align: bottom; animation: attente-points 1.4s steps(4, end) infinite;
}
@keyframes attente-points { to { width: 1.2em; } }
/* Une animation qui ne sert qu'à décorer se coupe pour qui n'en veut pas. */
@media (prefers-reduced-motion: reduce) {
  .porte-cli__attente::after { animation: none; width: 1.2em; }
}

.porte-cli__intro { font-size: 13.5px; line-height: 1.6; color: var(--gris); margin: 0; }
.aide-porte { font-size: 12.5px; line-height: 1.5; color: #9fb2d6; margin: -4px 0 0; }
.porte-cli__mot { min-height: 20px; margin: 0; font-size: 13.5px; line-height: 1.5; color: #ffb4ac; }
/* tant qu'il n'y a rien à dire, la ligne ne prend pas sa place : sans ça, la
   porte gardait cent pixels de vide entre « mot de passe oublié » et l'encadré
   de démonstration. */
.porte-cli__mot:empty { display: none; }
.porte-cli__mot.ok { color: #7fd4a8; }

/* ── L'ŒIL, ET LE REFUS QUI SE VOIT (Thomas, 3 septembre 2026) ──
   Deux demandes d'un même écran : « rajoute un logo d'œil pour voir et ne plus
   voir le mot de passe tapé », et « s'il y a une tentative de moins de 8
   caractères, fais une animation d'erreur et mets en avant ce message ».

   L'œil est posé par `js/espace-client.js` sur TOUT champ de mot de passe de la
   page — la porte, la création de compte par invitation, et les trois champs de
   « Mes informations ». Rien à écrire dans le HTML : les formulaires de
   l'espace sont réécrits à chaque dessin, un bouton posé à la main y
   disparaîtrait. La CSP interdit le script en ligne, l'écouteur est donc dans
   le fichier, pas dans la page.

   Le champ garde sa place pendant la secousse : `transform` ne pousse rien.
   Six allers-retours de quatre pixels, 380 ms — assez pour qu'un œil de
   soixante ans le remarque, trop court pour agacer. */
.champ-mdp { position: relative; display: block; }
.champ-mdp input { padding-right: 46px !important; }
.oeil {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: #9fb2d6; border-radius: 8px; transition: color .15s ease, background .15s ease;
}
.oeil:hover { color: var(--accent); background: rgba(224,163,60,.12); }
.oeil:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.oeil svg { width: 20px; height: 20px; display: block; }
.oeil[aria-pressed="true"] { color: var(--accent); }

/* Le champ refusé : contour rouge, halo, et la secousse. */
@keyframes secousse {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  80% { transform: translateX(-2px); }
}
.champ--faux {
  animation: secousse .38s cubic-bezier(.36, .07, .19, .97) both;
  border-color: #ff8a80 !important;
  box-shadow: 0 0 0 3px rgba(255, 138, 128, .18);
}

/* LE MESSAGE MIS EN AVANT. La ligne d'erreur était un texte rose de treize
   pixels sous le bouton : à côté d'un champ qui vient de trembler, elle ne se
   voyait pas. Elle devient un encadré, et elle entre en s'agrandissant — c'est
   le mouvement qui attire l'œil, pas la couleur. */
@keyframes surgit {
  from { opacity: 0; transform: translateY(-4px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.porte-cli__mot.alerte, .mot-cli.alerte {
  padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: #ffd9d5; background: rgba(255, 100, 88, .14);
  border: 1px solid rgba(255, 138, 128, .45);
  animation: surgit .22s ease-out both;
}

/* Qui a demandé moins de mouvement n'en reçoit pas : le contour rouge et
   l'encadré disent la même chose sans bouger. */
@media (prefers-reduced-motion: reduce) {
  .champ--faux { animation: none; }
  .porte-cli__mot.alerte, .mot-cli.alerte { animation: none; }
}
/* L'aide de démonstration : elle dit tout haut que rien n'est réel, et donne
   de quoi essayer. Elle disparaîtra le jour où les comptes seront vrais. */
.porte-cli__essai {
  margin: 4px 0 0; padding: 14px 16px; border-radius: 12px; font-size: 13px; line-height: 1.6;
  background: rgba(224,163,60,.1); border: 1px dashed rgba(224,163,60,.45); color: var(--gris);
}
.porte-cli__essai b { color: var(--accent); font-weight: 600; }
.porte-cli__essai p { margin: 0 0 10px; }
/* La liste des clients, pendant le temps de l'essai. Elle prend la même
   hauteur de doigt que les champs de la porte — 44 px — parce que Thomas s'en
   sert d'abord depuis son téléphone. */
.porte-cli__essai label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.porte-cli__essai select {
  display: block; width: 100%; margin-top: 5px; min-height: 44px;
  padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(143,180,248,.34); color: #fff;
}
.porte-cli__essai select option { color: #10275a; }
.porte-cli__essai button {
  display: inline-block; margin-top: 10px; background: none; border: 0; padding: 4px 0;
  color: var(--marque); font: inherit; text-decoration: underline; cursor: pointer;
}
.porte-cli__oubli { margin: -2px 0 0; text-align: center; }
.porte-cli__oubli button {
  background: none; border: 0; padding: 4px; cursor: pointer; font: inherit;
  font-size: 13px; color: var(--marque); text-decoration: underline; text-underline-offset: 3px;
}
.porte-cli__oubli button:hover { color: var(--accent); }
/* Le code renvoyé s'affiche à l'écran tant qu'aucun serveur ne l'envoie par
   courriel. Il est encadré et monospace : on le recopie sans se tromper de
   caractère, et l'encadré dit assez qu'il ne devrait pas être là. */
.porte-cli__code {
  margin: 0; padding: 14px 16px; border-radius: 12px;
  background: rgba(224,163,60,.12); border: 1px solid rgba(224,163,60,.4);
  font-size: 13px; line-height: 1.6; color: #f0e0c2;
}
.porte-cli__code b { display: block; margin-top: 6px; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 20px; letter-spacing: .12em; color: var(--accent); }
.porte-cli__retour { font-size: 13.5px; text-align: center; }

/* ── changer son mot de passe, changer son adresse ──
   Deux formulaires dans « Mes informations », du même dessin que les blocs
   qui les entourent : fond blanc, champs à l'encre du site. */
.form-cli { display: grid; gap: 14px; max-width: 460px; margin-top: 18px; }
.form-cli label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--gris-fonce); display: grid; gap: 6px; }
/* Le `select` de l'indicatif prend le même habit que les champs de saisie :
   posé à côté d'eux, un menu déroulant laissé au navigateur ne ressemble à
   rien de la page. */
.form-cli input, .form-cli select {
  font: inherit; font-size: 15px; text-transform: none; letter-spacing: normal;
  padding: 12px 14px; border-radius: 11px; width: 100%;
  border: 1px solid rgba(16,39,90,.2); background: #fff; color: var(--encre);
}
.form-cli input:focus-visible, .form-cli select:focus-visible { outline: 2px solid #2a6ae4; outline-offset: 1px; }
.form-cli .btn { border: 0; cursor: pointer; font-family: var(--texte); justify-self: start; }
.mot-cli { min-height: 18px; margin: 0; font-size: 13.5px; line-height: 1.5; color: #b3261e; }
.mot-cli.ok { color: #1f7a4d; }

/* ── L'en-tête de l'espace, une fois entré ── */
.cli-tete { position: relative; padding: 132px 0 40px; background: linear-gradient(170deg, #071431 0%, var(--espace) 45%, #13306c 100%); overflow: hidden; }
.cli-tete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,163,60,.55) 22%, rgba(224,163,60,.55) 78%, transparent);
}
.cli-tete__inner { max-width: min(1280px, 92vw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.cli-tete__inner > div:first-child { flex: 1 1 420px; min-width: 0; }
.cli-tete h2 { font-family: var(--titre); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.14; margin: 0 0 8px; color: #fff; }
/* Pas de `max-width` : « Votre départ pour « Sous le soleil de la Russie » est
   prévu le 10 septembre 2026. » se coupait aux deux tiers de l'écran et
   laissait un blanc à droite. Demande de Thomas, 1er septembre 2026. */
.cli-tete p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.86); margin: 0; }
.cli-tete__sortir { font-size: 13.5px; color: var(--gris); background: none; border: 1px solid rgba(143,180,248,.32); border-radius: 999px; padding: 9px 16px; cursor: pointer; font-family: var(--texte); }
.cli-tete__sortir:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 767px) { .cli-tete { padding: 104px 0 32px; } }

/* ── Le compte à rebours du départ ── */
.compteur {
  display: inline-flex; align-items: baseline; gap: 10px; margin-top: 16px;
  background: rgba(224,163,60,.14); border: 1px solid rgba(224,163,60,.4);
  border-radius: 999px; padding: 9px 18px;
}
/* QUATRIÈME FOIS QUE CE PIÈGE SE REFERME, ET C'EST TOUJOURS LE MÊME :
   `display: inline-flex` l'emporte sur le `[hidden]` du navigateur. Le
   compte à rebours se cache quand aucun départ n'est en vue — `compteur.hidden
   = true` dans `dessineTete()` — mais il restait dessiné : une pastille dorée
   vide de vingt pixels sous « Voici l'état de vos dossiers chez Aventurusse ».
   C'est l'encadré vide que Thomas voyait dans son compte le 3 septembre 2026.
   Toute règle `display` posée sur un élément que le script cache doit être
   suivie de sa contrepartie `[hidden]`. */
.compteur[hidden] { display: none; }
.compteur b { font-family: var(--titre); font-size: 20px; color: var(--accent); }
.compteur span { font-size: 13.5px; color: rgba(255,255,255,.86); }

/* ── Le choix du dossier, quand il y en a plusieurs ── */
.choix-dossier { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
/* Même piège que `.compteur` : la rangée se cache quand il n'y a qu'un dossier,
   et sans cette ligne elle gardait ses vingt-six pixels de marge. */
.choix-dossier[hidden] { display: none; }
.choix-dossier button {
  font-family: var(--texte); font-size: 13.5px; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--gris-fonce); border: 1px solid rgba(16,39,90,.16);
  border-radius: 999px; padding: 9px 16px; transition: border-color .18s ease, color .18s ease;
}
.choix-dossier button:hover { border-color: var(--marque); color: var(--encre); }
.choix-dossier button[aria-current="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }

/* ── Les onglets ── */
.onglets-cli { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid rgba(16,39,90,.14); margin: 0 0 34px; }
.onglets-cli button {
  font-family: var(--texte); font-size: 14.5px; font-weight: 600; cursor: pointer;
  background: none; border: 0; border-bottom: 3px solid transparent; color: var(--gris-fonce);
  padding: 12px 16px; margin-bottom: -1px; transition: color .18s ease, border-color .18s ease;
}
.onglets-cli button:hover { color: var(--encre); }
.onglets-cli button[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--accent); }
/* LA PASTILLE D'UN ONGLET DIT CE QU'IL RESTE À FAIRE (5 septembre 2026).
   Thomas : « le client doit voir ce qu'il doit faire quand il est sur son
   espace ». Trois onglets la portent — Mon dossier, Formulaire de visa,
   Messages — et elle s'éteint d'elle-même quand il n'y a plus rien. Le style
   existait déjà, sans personne pour le poser ; c'est `poseLesPastilles()` dans
   js/espace-client.js qui l'accroche maintenant.
   `[hidden]` doit être dit en toutes lettres : `display: inline-block` gagne
   sinon sur la règle par défaut du navigateur, et un onglet sans rien à faire
   afficherait une pastille vide. */
.onglets-cli .pastille-onglet {
  display: inline-block; min-width: 18px; margin-left: 7px; padding: 1px 6px;
  background: var(--rouge); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700;
  line-height: 1.5; text-align: center; vertical-align: 1px;
}
.onglets-cli .pastille-onglet[hidden] { display: none; }

/* ── Les cartes de contenu, sur fond clair ── */
.bloc-cli { background: #fff; border: 1px solid rgba(16,39,90,.12); border-radius: 18px; padding: 26px 26px; box-shadow: 0 10px 30px rgba(16,39,90,.08); }
.bloc-cli + .bloc-cli { margin-top: 20px; }
.bloc-cli h2 { font-family: var(--titre); font-size: 20px; margin: 0 0 6px; color: var(--encre); }
/* DEUX TITRES DE MEME RANG SE LISENT DE MEME TAILLE. « Ce qui est compris » en
   vingt et « Ce qui ne l'est pas » en seize donnaient a lire une hierarchie qui
   n'existe pas : ce sont deux moities de la meme information. Le h3 garde son
   rang dans le document — c'est ce que lisent Google et les lecteurs d'ecran —
   et prend la taille du h2. Demande de Thomas, 31 aout 2026. */
.bloc-cli h3 { font-family: var(--titre); font-size: 20px; margin: 26px 0 10px; color: var(--encre); }
/* Un titre suivi d'une liste, et non d'un paragraphe, n'avait aucun air sous
   lui : le jour 1 du programme venait se coller a « Votre programme, jour par
   jour ». Les six pixels du h2 sont faits pour un chapeau, pas pour une liste. */
.bloc-cli h2 + .programme-cli, .bloc-cli h2 + .puces, .bloc-cli h2 + .pieces,
.bloc-cli h2 + .heberges { margin-top: 16px; }
.bloc-cli > p { font-size: 14.5px; line-height: 1.7; color: var(--gris-fonce); margin: 0 0 14px; }
.bloc-cli > p:last-child { margin-bottom: 0; }
/* Un bouton ou une aide qui suit une liste de pièces respire. */
.pieces + p, .puces + p.aide-cli { margin-top: 20px; }
/* `align-items: start` : sans lui, les deux encadres prennent la hauteur du
   plus grand, et « Ou vous dormez » — deux hotels — s'etirait sur toute la
   hauteur de la liste d'a cote, avec un demi-cadre de blanc dessous. */
/* Les deux boutons d'un document reçu. `.btn` du site est fait pour un appel à
   l'action pleine largeur ; ici il en faut deux, petits, côte à côte, dans une
   ligne de liste. */
.btn-doc {
  display: inline-block; cursor: pointer; border: 1px solid var(--trait, #dfe6f3);
  background: #fff; color: var(--encre, #10275a); border-radius: 8px;
  padding: 6px 12px; font-size: 13px; font-weight: 600; margin-left: 8px;
  font-family: inherit; transition: background .15s ease, border-color .15s ease;
}
.btn-doc:hover { background: #f4f7fc; border-color: #2a6ae4; }
/* Retirer un document est un geste sans retour : le bouton le dit, sans crier —
   il reste de la taille des deux autres, et ne devient rouge qu'au survol. */
.btn-doc--retirer { color: #a52114; border-color: #f0cfcb; }
.btn-doc--retirer:hover { background: #fdeceb; border-color: #a52114; }
@media (max-width: 620px) { .btn-doc { margin: 6px 8px 0 0; } }

.duo-cli { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
/* `.bloc-cli + .bloc-cli` ne voyait pas le duo : les deux encadrés du bas
   venaient se coller au programme du dessus. Le même écart, dans les deux
   sens. */
.bloc-cli + .duo-cli, .duo-cli + .bloc-cli, .duo-cli + .duo-cli { margin-top: 20px; }
@media (max-width: 900px) { .duo-cli { grid-template-columns: 1fr; } }

/* L'INDICATIF ET LE NUMÉRO, comme sur les questionnaires du site : une colonne
   étroite pour l'indicatif, le reste pour le numéro. Sous 420 px les deux
   passent l'un sous l'autre — à deux colonnes, le numéro n'a plus la place de
   s'écrire. `.duo-cli` ne convient pas ici : ses deux colonnes sont égales. */
.tel-cli { display: grid; grid-template-columns: minmax(0, 160px) 1fr; gap: 14px; align-items: start; }

@media (max-width: 420px) { .tel-cli { grid-template-columns: 1fr; } }

/* ── Le bandeau du voyage ── */
.voyage-tete { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 24px; align-items: center; }
@media (max-width: 700px) { .voyage-tete { grid-template-columns: 1fr; } }
.voyage-tete img { width: 100%; height: 100%; max-height: 190px; object-fit: cover; border-radius: 14px; display: block; }
.voyage-tete h2 { margin-bottom: 4px; }
.voyage-tete .sous { font-size: 15px; color: var(--gris-fonce); margin: 0 0 14px; }

/* ── Les faits d'un dossier : date, durée, montant… ── */
.faits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.faits li { border-left: 3px solid var(--accent); padding: 4px 0 4px 14px; }
.faits b { display: block; font-family: var(--titre); font-size: 17px; color: var(--encre); line-height: 1.25; }
.faits span { display: block; font-size: 12.5px; color: var(--gris-fonce); margin-top: 4px; }

/* ── Le programme, jour par jour ── */
.programme-cli { list-style: none; margin: 0; padding: 0; }
.programme-cli li { position: relative; padding: 0 0 20px 34px; border-left: 2px solid rgba(16,39,90,.12); }
.programme-cli li:last-child { border-left-color: transparent; padding-bottom: 0; }
.programme-cli li::before {
  content: attr(data-jour); position: absolute; left: -14px; top: 0; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%; background: var(--encre); color: #fff;
  font-size: 12px; font-weight: 700; font-family: var(--titre);
}
.programme-cli h4 { font-family: var(--titre); font-size: 15.5px; margin: 3px 0 5px; color: var(--encre); }
.programme-cli p { font-size: 14px; line-height: 1.6; color: var(--gris-fonce); margin: 0; }

/* ── Les pièces du dossier ──
   Quatre états, quatre couleurs, et la même dans la pastille et dans le
   liseré : c'est ce que le client regarde en premier en arrivant. */
.pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pieces li {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  padding: 14px 16px; border-radius: 12px; background: #f7f9fd;
  border: 1px solid rgba(16,39,90,.1); border-left: 4px solid var(--etat-c, #9fb0d0);
}
.pieces .nom { font-size: 14.5px; font-weight: 600; color: var(--encre); flex: 1 1 200px; }
.pieces .quand { font-size: 12.5px; color: var(--gris-fonce); }
.etat {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 5px 11px;
  background: var(--etat-f, #eef2f9); color: var(--etat-c, #4c5b7d);
}
[data-etat="valide"]   { --etat-c: #1c7a4f; --etat-f: #e4f4ec; }
[data-etat="recu"]     { --etat-c: #2a6ae4; --etat-f: #e8f0ff; }
[data-etat="arefaire"] { --etat-c: #a52114; --etat-f: #fdeceb; }
[data-etat="attendu"]  { --etat-c: #8a6a15; --etat-f: #fdf3df; }
/* Un document envoyé PAR l'agence n'est jugé par personne : il n'a ni le vert
   du validé ni le bleu du reçu, seulement le gris de ce qui est là (4 septembre
   2026). Le liseré reste, sinon la ligne paraît cassée à côté des autres. */
[data-etat="agence"]   { --etat-c: #5a6b8c; --etat-f: #eef2f8; }

/* ── La jauge : avancement des pièces, et paiement ── */
.jauge { height: 10px; border-radius: 999px; background: rgba(16,39,90,.12); overflow: hidden; margin: 12px 0 8px; display: flex; }
.jauge i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2a6ae4, #e0a33c); }
/* Les quatre couleurs des pièces, les mêmes que les pastilles de la liste et
   que la barre de l'administration : le client et l'agence voient la même
   chose. Le fond clair de la piste tient lieu de « rien reçu ». */
.jauge .j--valide { background: #1f8a5f; border-radius: 999px 0 0 999px; }
.jauge .j--recu { background: #2a6ae4; border-radius: 0; }
.jauge .j--refaire { background: #d52b1e; border-radius: 0 999px 999px 0; }
.jauge .j--valide:only-child, .jauge .j--recu:first-child, .jauge .j--refaire:first-child { border-radius: 999px 0 0 999px; }
.jauge-mot { font-size: 13.5px; color: var(--gris-fonce); margin: 0; }

/* ── Le fil des messages ── */
.fil-msg { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fil-msg li { padding: 14px 16px; border-radius: 14px; background: #f7f9fd; border: 1px solid rgba(16,39,90,.1); }
.fil-msg li.moi { background: #eef4ff; border-color: rgba(42,106,228,.25); }
.fil-msg .qui { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-fonce); }
.fil-msg .qui b { color: var(--encre); font-weight: 700; }
.fil-msg p { font-size: 14.5px; line-height: 1.65; color: var(--gris-fonce); margin: 6px 0 0; }
.ecrire { display: grid; gap: 12px; margin-top: 20px; }
.ecrire textarea {
  width: 100%; min-height: 110px; resize: vertical; padding: 13px 14px; border-radius: 12px;
  border: 1px solid rgba(16,39,90,.18); background: #fff; color: var(--encre);
  font-family: var(--texte); font-size: 15px; line-height: 1.6;
}
.ecrire textarea:focus-visible { outline: 2px solid var(--marque); outline-offset: 1px; }
.ecrire .btn { border: 0; cursor: pointer; font-family: var(--texte); justify-self: start; }

/* ── Mes informations ── */
.infos-cli { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.infos-cli li { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 13px 0; border-bottom: 1px solid rgba(16,39,90,.1); }
.infos-cli li:last-child { border-bottom: 0; }
.infos-cli .cle { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--gris-fonce); flex: 0 0 220px; }
.infos-cli .val { font-size: 14.5px; color: var(--encre); flex: 1 1 200px; }
@media (max-width: 600px) { .infos-cli .cle { flex-basis: 100%; } }

/* ── L'avertissement de maquette ──
   Il ne se cache pas : cette page ne conserve rien, et le client doit le
   lire avant de croire qu'il vient d'envoyer quelque chose à l'agence. */
.avis-maquette {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 26px;
  padding: 15px 18px; border-radius: 14px;
  background: rgba(224,163,60,.12); border: 1px dashed rgba(180,130,30,.5);
  font-size: 13.5px; line-height: 1.6; color: #6b5010;
}
.avis-maquette b { color: #6b5010; }

/* ── Les listes simples : inclus, non inclus, hébergements ── */
.puces { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.puces li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.6; color: var(--gris-fonce); }
.puces li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.puces--non li::before { background: #c9d3e6; }

/* ── Où vous dormez ──
   Une fiche par hôtel plutôt qu'une puce : la ville, le nom, le rang, l'adresse
   quand elle est connue, et le nombre de nuits. Une ligne à puces ne tenait plus
   dès qu'on y ajoutait une rue, et l'adresse est ce qu'un voyageur cherche en
   premier — pour la montrer à un chauffeur, ou la donner à un proche.
   L'ADRESSE VIENT DES DONNÉES, ELLE NE S'INVENTE PAS : `hebergements[].adresse`
   reste vide tant que Thomas ne l'a pas fournie, et la fiche se tait alors au
   lieu de mentir. Le mot d'aide sous la liste change en conséquence. */
.heberges { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.heberges li {
  border: 1px solid rgba(16,39,90,.12); border-radius: 12px;
  padding: 16px 17px; background: #fbfcfe;
}
/* Quatre lignes empilées sans air se lisaient comme un seul pavé. Chacune
   reprend son souffle — demande de Thomas, 1er septembre 2026. */
.heberges p { margin: 0; line-height: 1.5; }
.heberges__ville { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--gris-fonce); }
.heberges__nom { font-family: var(--titre); font-size: 16px; color: var(--encre); margin-top: 7px; }
.heberges__nom span { font-family: var(--texte); font-size: 12.5px; font-weight: 600; color: var(--accent); margin-left: 6px; white-space: nowrap; }
.heberges__adresse { font-size: 14px; line-height: 1.55; color: var(--gris-fonce); margin-top: 9px; }
.heberges__nuits { font-size: 13.5px; color: var(--gris-fonce); margin-top: 9px; }

/* Une aide qui s'affiche sous un bouton qu'on ne peut pas encore utiliser. */
.bouton-mort { opacity: .55; cursor: not-allowed; }
.aide-cli { font-size: 12.5px; color: var(--gris-fonce); margin: 10px 0 0; }

/* ══════════════════════════════════════════════════════════════════════════
   L'ESPACE, SUR UN TÉLÉPHONE

   Le reproche était juste : on avait le nez collé à l'écran. Le titre montait
   à 29 px, l'avertissement de maquette occupait un tiers de la vue, et les
   cinq onglets se répartissaient sur TROIS lignes — si bien qu'il fallait
   défiler une fois et demie avant d'apercevoir la première ligne du voyage.

   Rien n'est retiré, tout est ramené à l'échelle d'un écran de 390 px : les
   onglets tiennent sur une seule ligne qui se pousse du doigt, l'en-tête perd
   un tiers de sa hauteur, et le contenu commence dans le premier écran.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* ── L'en-tête ── */
  .cli-tete { padding: 92px 0 24px; }
  .cli-tete__inner { gap: 14px; }
  .cli-tete h2 { font-size: 1.5rem; margin-bottom: 5px; }
  .cli-tete p { font-size: 14.5px; line-height: 1.55; }
  .compteur { margin-top: 12px; padding: 7px 15px; gap: 8px; }
  .compteur b { font-size: 17px; }
  .compteur span { font-size: 12.5px; }
  .cli-tete__sortir { font-size: 12.5px; padding: 7px 14px; }

  /* ── L'avertissement de maquette ──
     Il doit rester lisible : c'est lui qui empêche de croire qu'un paiement
     affiché ici a été encaissé. Mais il n'a pas à occuper le premier écran. */
  .avis-maquette { font-size: 12.5px; line-height: 1.55; padding: 12px 14px; gap: 9px; }

  /* ── Le choix du dossier ── */
  .choix-dossier { gap: 8px; margin-bottom: 18px; }
  .choix-dossier button { font-size: 12.5px; padding: 8px 13px; }

  /* ── Les onglets, sur UNE ligne qui se pousse du doigt ──
     Cinq onglets à 14,5 px demandent 480 px : ils retombaient sur trois lignes
     et 200 px de haut. En rangée défilante ils tiennent en 42 px. Le dernier
     onglet est volontairement coupé par le bord — c'est ce qui dit qu'il y en
     a d'autres à droite, mieux qu'une flèche que personne ne regarde.
     `scroll-snap` fait que le geste s'arrête sur un onglet entier, jamais au
     milieu d'un mot. */
  .onglets-cli {
    flex-wrap: nowrap; overflow-x: auto; gap: 2px; margin-bottom: 22px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* LA LARGEUR VIENT DU VIEWPORT, PAS DU PARENT, et c'est la seule façon
       qui marche ici : `.band` est en `flex-direction: column`, si bien que
       `.band__inner` s'étire à la largeur de son enfant le plus large au lieu
       de le contraindre. Avec la rangée en `nowrap`, tout le bloc passait à
       497 px : la page débordait par la droite, l'avertissement se coupait en
       plein mot et la photo du voyage sortait de l'écran. Ni `overflow-x`, ni
       `max-width: 100%`, ni `min-width: 0` sur le parent n'y changeaient rien
       — il fallait une mesure qui ne dépende d'aucun ancêtre. 48 px, ce sont
       les deux marges de 24 px de `.band__inner`. */
    width: calc(100vw - 48px); max-width: 100%;
  }
  .onglets-cli::-webkit-scrollbar { display: none; }
  .onglets-cli button { flex: none; font-size: 13.5px; padding: 11px 13px; scroll-snap-align: start; }

  /* ── Les cartes ── */
  .bloc-cli { padding: 18px 16px; border-radius: 14px; }
  .bloc-cli h2 { font-size: 17.5px; }
  .bloc-cli h3 { font-size: 17.5px; margin-top: 22px; }
  .bloc-cli > p { font-size: 13.5px; line-height: 1.65; }
}

/* LE TÉLÉPHONE, ET UN LECTEUR QUI N'A PLUS VINGT ANS — voir css/commun.css. */
@media (max-width: 767px) {
  .porte-cli__boite > p, .porte-cli__essai, .porte-cli__retour,
  .bloc-cli > p, .puces li, .fil-msg p, .programme-cli p { font-size: 16px; line-height: 1.62; }
  .heberges__adresse { font-size: 15.5px; }
  .heberges__nom { font-size: 17px; }
  .porte-cli__intro, .aide-porte, .jauge-mot { font-size: 14px; }
}


/* ══════════ Votre avis ══════════
   Le formulaire de témoignage, en bas de « Mon voyage ». Les étoiles sont cinq
   boutons radio : c'est le seul contrôle qui se remplisse d'un doigt sans rien
   ouvrir, qui se navigue au clavier, et que les lecteurs d'écran annoncent
   correctement. Les radios sont posées AVANT leur étiquette et dans l'ordre
   décroissant : c'est ce qui permet d'allumer, en CSS seul et sans JavaScript,
   toutes les étoiles jusqu'à celle qu'on survole ou qu'on a choisie
   (`~` ne regarde que les frères SUIVANTS). */
#formAvis { display: grid; gap: 14px; margin-top: 16px; }
#formAvis label { display: grid; gap: 6px; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; color: var(--gris-fonce); }
#formAvis label span { text-transform: none; letter-spacing: 0; font-weight: 500; }
#formAvis input[type="text"], #formAvis textarea {
  width: 100%; padding: 11px 13px; border-radius: 10px; font: inherit;
  font-size: 15px; text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--encre); background: #fbfcfe; border: 1px solid rgba(16,39,90,.2);
}
#formAvis textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
#formAvis input:focus-visible, #formAvis textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.avis-cli__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .avis-cli__ligne { grid-template-columns: 1fr; } }

/* Le piège à robots : hors de l'écran, hors du parcours au clavier, jamais lu
   à voix haute. `display: none` ne convient pas — beaucoup de robots ignorent
   les champs cachés ainsi, et le piège ne prendrait plus rien. */
#formAvis .piege, .ecrire .piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* LES SÉLECTEURS PORTENT `#formAvis` PARCE QUE `#formAvis label` LE PORTE.
   Un identifiant l'emporte sur n'importe quel nombre de classes : sans lui ici,
   la règle générale des étiquettes du formulaire — grise, petite, en grille —
   reprenait la main et les cinq étoiles restaient ternes et minuscules. */
#formAvis .etoiles-choix { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row-reverse;
  justify-content: flex-end; gap: 2px; }
#formAvis .etoiles-choix legend { font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--gris-fonce); margin-bottom: 6px; padding: 0; }
#formAvis .etoiles-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#formAvis .etoiles-choix label { display: block; font-size: 32px; line-height: 1; color: #d7deec;
  cursor: pointer; padding: 0 2px; text-transform: none; letter-spacing: 0; gap: 0; }
#formAvis .etoiles-choix input:checked ~ label,
#formAvis .etoiles-choix label:hover, #formAvis .etoiles-choix label:hover ~ label { color: #f0a500; }
#formAvis .etoiles-choix input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#formAvis button { justify-self: start; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ══════════ Le dépôt d'une pièce ══════════ */
.depot { display: grid; gap: 13px; margin-top: 16px; max-width: 520px; }
.champ-cli { display: grid; gap: 6px; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; color: var(--gris-fonce); }
.champ-cli select, .champ-cli input[type="file"] {
  width: 100%; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 15px;
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--encre);
  background: #fbfcfe; border: 1px solid rgba(16,39,90,.2);
}
.champ-cli input[type="file"] { padding: 9px 10px; }
.depot button { justify-self: start; }

/* L'avertissement sur les pièces d'identité. Il ne crie pas — c'est un
   encadré, pas une alerte rouge — mais il ne se confond pas avec l'aide
   ordinaire, sinon personne ne le lit. */
.avert-cli {
  border-left: 3px solid var(--accent); background: #fdf7ec;
  padding: 11px 14px; border-radius: 0 10px 10px 0; margin-top: 12px;
}

/* Le mot d'accueil du client invité, en tête de la porte. */
.invit-cli { background: rgba(224,163,60,.14); border: 1px solid rgba(224,163,60,.5);
  border-radius: 12px; padding: 13px 15px; font-size: 14.5px; line-height: 1.6;
  color: var(--blanc); margin: 0 0 16px; }


/* ══════════ LE BOUTON « ENVOYER MON AVIS » ══════════
   `.btn--gold` porte une ombre dorée de vingt pixels, faite pour le fond nuit
   du site public. Posée sur une carte blanche, elle dessinait un halo qui se
   lisait comme un contour criard — « pas dans le thème », Thomas, 1er septembre
   2026. Le halo part, et le bouton prend le trait des cadres qui l'entourent :
   le même `rgba(16,39,90,.12)` que `.bloc-cli`. */
/* La même règle vaut pour « Envoyer ce document » et « Envoyer » : leur
   `.btn--solid` porte une ombre bleue de vingt pixels qui, sur une carte
   blanche, se lit comme un contour noir. Thomas, 1er septembre 2026 : « le
   contour du bouton envoyer ce document est noir, mets-le comme les autres ». */
#formAvis button, .depot button, .ecrire .btn, .visa-pied .btn {
  box-shadow: none;
  border: 1px solid rgba(16,39,90,.12);
}
#formAvis button:hover, .depot button:hover, .ecrire .btn:hover, .visa-pied .btn:hover {
  box-shadow: 0 4px 12px rgba(16,39,90,.12);
}


/* ══════════ VOS ANCIENS VOYAGES ══════════
   Les départs déjà rentrés. Ils viennent de deux endroits : les dossiers dont
   le voyage est passé, et les voyages notés à la main par l'agence sur la
   fiche du client — ceux d'avant l'espace client, qui n'ont jamais eu de
   dossier ici. Demande de Thomas, 1er septembre 2026. */
.anciens { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.anciens li {
  border: 1px solid rgba(16,39,90,.12); border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 16px 18px; background: #fbfcfe;
}
.anciens h3 { font-family: var(--titre); font-size: 17px; margin: 0; color: var(--encre); }
.anciens__quand { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--gris-fonce); margin: 0 0 6px; }
.anciens__villes { font-size: 14.5px; line-height: 1.55; color: var(--gris-fonce); margin: 8px 0 0; }
.anciens__note { font-size: 14px; line-height: 1.55; color: var(--gris-fonce); margin: 8px 0 0; font-style: italic; }


/* ══════════ LE QUESTIONNAIRE DE VISA ══════════
   Les vingt-neuf questions du consulat, telles qu'elles sont posées dans le
   formulaire que l'agence faisait remplir sur Google. Elles ne concernent PAS
   tous les clients : le bloc n'apparaît que si l'agence a coché « formulaire de
   visa » à l'ouverture du dossier.

   Chaque question est numérotée et séparée de la suivante : c'est une heure de
   travail pour le client, souvent en plusieurs fois, et il doit pouvoir
   retrouver où il en était. Les réponses s'enregistrent d'un bloc. */
.visa-q { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 22px; counter-reset: visa; }
.visa-q > li { counter-increment: visa; padding-left: 42px; position: relative; }
.visa-q > li::before {
  content: counter(visa); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--encre); color: #fff; font-family: var(--titre); font-size: 13px; font-weight: 700;
}
.visa-q .q-titre { display: block; font-size: 15.5px; line-height: 1.5; font-weight: 600;
  color: var(--encre); margin: 4px 0 4px; }
.visa-q .q-titre .obl { color: #a52114; margin-left: 3px; }
.visa-q .q-aide { font-size: 14px; line-height: 1.55; color: var(--gris-fonce);
  margin: 0 0 9px; white-space: pre-line; }
.visa-q input[type="text"], .visa-q textarea {
  width: 100%; padding: 11px 13px; border-radius: 10px; font: inherit; font-size: 15px;
  color: var(--encre); background: #fbfcfe; border: 1px solid rgba(16,39,90,.2);
}
.visa-q textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.visa-q input:focus-visible, .visa-q textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.visa-pied { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 24px; }
.visa-pied .btn { cursor: pointer; font-family: var(--texte); }
.visa-fait {
  margin: 0 0 4px; padding: 13px 16px; border-radius: 12px;
  background: #e4f4ec; border: 1px solid rgba(28,122,79,.3);
  font-size: 14.5px; line-height: 1.6; color: #125a3d;
}
@media (max-width: 767px) {
  .visa-q .q-titre { font-size: 16px; }
  .visa-q .q-aide { font-size: 15px; }
  .anciens__villes, .anciens__note { font-size: 15.5px; }
}


/* ══════════ LE QUESTIONNAIRE DE VISA PASSE DERRIÈRE UN BOUTON ══════════
   Vingt-neuf questions étalées sous la liste des pièces, c'était un écran
   qu'on referme — et les pièces, qui sont l'objet de l'onglet, disparaissaient
   dessous. Le questionnaire s'ouvre depuis SA ligne dans la liste, et les
   réponses envoyées se relisent du même endroit.
   Demande de Thomas, 1er septembre 2026. */
.btn-piece {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 14px; min-height: 40px; border-radius: 999px;
  background: #fff; color: var(--encre); border: 1px solid rgba(16,39,90,.18);
  white-space: nowrap; margin-left: auto;
}
.btn-piece:hover { border-color: var(--accent); color: var(--encre); }
/* Celui qui reste à faire se voit : c'est une heure de travail que le client
   ne devinera pas si le bouton ressemble à tous les autres. */
.btn-piece--faire { background: var(--accent); border-color: var(--accent); }
.btn-piece--faire:hover { filter: brightness(1.06); }

/* Le retour vers les pièces, en tête du questionnaire. */
.retour-cli {
  display: inline-block; margin: -4px 0 12px; padding: 6px 0;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px;
  font-weight: 600; color: var(--lien); text-decoration: underline; text-underline-offset: 3px;
}
.retour-cli:hover { color: var(--accent); }

/* Les réponses relues, côté client. Même dessin que dans l'administration. */
.visa-lu { margin: 16px 0 0; padding-left: 22px; }
.visa-lu li { margin-bottom: 18px; }
.visa-lu li::marker { color: var(--gris-fonce); font-weight: 700; }
.visa-lu__q { font-weight: 600; color: var(--encre); margin: 0 0 5px; line-height: 1.5; font-size: 15px; }
.visa-lu__r {
  margin: 0; padding: 10px 14px; border-left: 3px solid rgba(16,39,90,.14);
  background: #fbfcfe; border-radius: 0 10px 10px 0; line-height: 1.6;
  white-space: pre-line; font-size: 14.5px; color: var(--gris-fonce);
}
.visa-lu__r--vide { color: #a52114; font-style: italic; border-left-color: #e8b4ae; background: #fdf6f5; }


/* ══════════ VOS ANCIENS VOYAGES : LA PHOTO, ET LE MOIS ══════════
   Thomas, 1er septembre 2026 : la photo du voyage, le mois seul, et rien
   d'autre. Le jour exact d'un départ de l'an dernier n'apprend rien. */
.anciens li.anciens--photo { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
.anciens img {
  width: 100%; height: 100%; max-height: 150px; object-fit: cover;
  border-radius: 10px; display: block;
}
@media (max-width: 700px) {
  .anciens li.anciens--photo { grid-template-columns: 1fr; gap: 14px; }
  .anciens img { max-height: 170px; }
}
@media (max-width: 767px) {
  .visa-lu__q { font-size: 16px; }
  .visa-lu__r { font-size: 15.5px; }
  .btn-piece { font-size: 14px; min-height: 44px; }
}


/* ── LE VOYAGE SUR MESURE, ET CE QUI LUI MANQUE ENCORE (3 septembre 2026) ──
   Un sur-mesure qu'on vient d'ouvrir n'a ni photo, ni dates, ni hôtels. La
   tête du voyage est une grille photo + texte : sans photo, le texte doit
   reprendre toute la largeur au lieu de laisser une colonne vide. */
.voyage-tete--sans-photo { grid-template-columns: 1fr; }

/* La photo d'une journée, déposée depuis l'administration. Un rapport de 3:2,
   le même que les images de la frise des voyages, pour qu'une photo reprise
   d'une page publique tombe juste. */
/* LA PHOTO D'UNE JOURNÉE NE PREND PLUS TOUTE LA LARGEUR (5 septembre 2026).
   Thomas : « règle la taille pour que ce ne soit pas énorme comme ça l'est
   actuellement lorsque je rajoute une image pour chaque jour ». Sur un écran
   de bureau, un `width: 100%` sans borne étalait une photo de journée sur
   toute la colonne du programme : elle écrasait le texte qu'elle illustre et
   il fallait faire défiler entre chaque jour. Quatre cent quarante pixels
   suffisent à reconnaître la place Rouge. Sur téléphone, la colonne est plus
   étroite que cette borne : rien n'y change. */
.programme-cli__photo {
  display: block; width: 100%; max-width: 440px; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 12px; margin: 0 0 12px;
}

/* Ce que l'agence dit d'un hôtel, sous son adresse. */
.heberges__mot { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--gris-fonce); }

/* Un bloc seul dans la paire prend toute la largeur. Depuis que les blocs
   vides ne se dessinent plus (3 septembre 2026), « Où vous dormez » pouvait
   se retrouver seul et n'occuper que la moitié gauche de l'écran, avec un
   grand vide à sa droite. */
.duo-cli > .bloc-cli:only-child { grid-column: 1 / -1; }

/* ═══════ LE CHOIX DU VOYAGEUR, DANS L'ONGLET DU VISA ═══════
   Un dossier de deux personnes demande deux questionnaires (Thomas,
   4 septembre 2026). Cette liste ne paraît qu'au-delà d'un voyageur : à un
   seul, un choix à faire est un obstacle, pas une aide. */
.visa-gens { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .visa-gens { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.visa-gens button {
  width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid rgba(16,39,90,.16); border-radius: 12px;
  padding: 14px 16px; display: grid; gap: 3px; min-height: 44px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.visa-gens button:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(16,39,90,.1); }
.visa-gens b { font-family: var(--titre); font-size: 16px; color: var(--encre); }
.visa-gens i { font-style: normal; font-size: 13.5px; color: var(--gris-fonce); }
.visa-gens--choisi button { border-color: var(--accent); border-width: 2px; background: #fffdf7; }


/* ══════════════════════════════════════════════════════════════════════════
   CE QUE L'AGENCE RÉPOND AU QUESTIONNAIRE DE VISA (5 septembre 2026)

   Deux nouvelles possibles, et deux couleurs qui ne se confondent pas : le
   vert d'un questionnaire validé, l'or d'une précision attendue. Jamais de
   rouge — le client n'a rien fait de mal, il manque seulement une ligne au
   consulat, et un bandeau rouge sur vingt-neuf questions déjà remplies
   décourage plus qu'il n'aide.
   ══════════════════════════════════════════════════════════════════════════ */
.visa-mot {
  margin: 0 0 18px; padding: 14px 18px; border-radius: 12px;
  border-left: 4px solid; line-height: 1.6;
}
.visa-mot p { margin: 0 0 8px; }
.visa-mot p:last-child { margin-bottom: 0; }
.visa-mot__titre { font-weight: 700; font-size: 17px; }
.visa-mot--precisions { border-left-color: #d29a1e; background: #fffaf0; }
.visa-mot--valide { border-left-color: #1f8a5f; background: #f2fbf7; }

.visa-mot--recues { border-left-color: #2a6ae4; background: #f2f6ff; }

/* LA QUESTION SUR LAQUELLE UNE PRÉCISION EST ATTENDUE.

   ATTENTION AU PADDING : `.visa-q > li` porte `padding-left: 42px` et son
   numéro est posé en absolu à `left: 0`, dans cette gouttière-là. Une règle
   qui redonne un `padding` complet écrase les 42 pixels — et le numéro se
   retrouve PAR-DESSUS le texte de la question. C'est ce que Thomas a vu le
   5 septembre 2026. La gouttière est donc reprise ici, augmentée du décalage
   du cadre, et le numéro suit. */
.visa-q > li.q--preciser {
  border-left: 4px solid #d29a1e; background: #fffaf0;
  padding: 12px 14px 12px 56px; border-radius: 0 12px 12px 0; margin-left: -14px;
}
.visa-q > li.q--preciser::before { left: 14px; top: 12px; }

/* La même marque dans la LECTURE des réponses, où il n'y a pas de gouttière :
   la liste `.visa-lu` numérote avec son propre `::marker`. */
.visa-lu > li.q--preciser {
  border-left: 4px solid #d29a1e; background: #fffaf0;
  padding: 10px 14px; border-radius: 0 12px 12px 0; margin-left: -14px;
}
.q-preciser { margin: 4px 0 8px; font-weight: 600; color: #8a6410; font-size: 14px; }

/* Le bouton de correction, remonté au-dessus des questions. */
.visa-pied--haut { margin: 0 0 6px; }


/* ══════════════════════════════════════════════════════════════════════════
   LA BARRE DE CHARGEMENT D'UN DOCUMENT (5 septembre 2026)

   Thomas : « fais une barre de chargement qui avance que le client voit pour
   lui indiquer que son document charge bien ».

   TROIS PARTIS PRIS.
   Elle est HAUTE — dix pixels, pas trois : le public de l'agence n'a pas
   toujours de bons yeux, et un filet de trois pixels sur un téléphone ne se
   voit pas. Elle a une TRANSITION de 250 ms, si bien qu'un saut de trente
   pour cent se lit comme un mouvement et non comme un clignotement. Et elle
   porte un reflet qui glisse : pendant les secondes où la barre ne bouge pas
   — le serveur travaille, la page attend — c'est lui qui dit que rien n'est
   figé.

   `prefers-reduced-motion` éteint le reflet. La barre, elle, continue
   d'avancer : c'est une information, pas une décoration.
   ══════════════════════════════════════════════════════════════════════════ */
.jauge {
  position: relative; height: 10px; border-radius: 6px; overflow: hidden;
  background: rgba(20, 40, 90, .1); margin: 4px 0 6px;
}
/* `position: relative` + `overflow: hidden` SUR LE TRAIT, pas sur la piste :
   sans eux, le reflet se positionne par rapport à la piste entière et glisse
   aussi sur la partie vide, ce qui donne l'impression que la barre est pleine
   alors qu'elle est au quart. */
.jauge i {
  display: block; position: relative; overflow: hidden; height: 100%; width: 0;
  background: linear-gradient(90deg, #2a6ae4, #4f8dfb);
  border-radius: 6px; transition: width .25s ease-out;
}
.jauge i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-100%); animation: jauge-reflet 1.4s linear infinite;
}
.jauge--rate i { background: linear-gradient(90deg, #b3261e, #d52b1e); }
.jauge--rate i::after { animation: none; }
.jauge__mot { margin: 0 0 2px; font-size: 13px; color: #56688c; min-height: 17px; }

@keyframes jauge-reflet { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .jauge i::after { animation: none; }
  .jauge i { transition: none; }
}

/* ── L'AVIS « REGARDEZ VOS INDÉSIRABLES » ──
   Il vit à deux endroits : sur la porte (fond nuit) et sous le formulaire des
   messages (fond blanc). Deux jeux de couleurs, un seul gabarit.

   LES DEUX SÉLECTEURS PORTENT UN PARENT, et il le faut : `.porte-cli__boite >
   p` et `.bloc-cli p` ont deux crans de spécificité et repeignaient l'encadré
   en gris de note de bas de page — c'est-à-dire en la seule chose qu'il ne
   doit pas être. Écrit en fin de feuille pour la même raison. */
.porte-cli__boite > .avis-spam,
.bloc-cli .avis-spam {
  display: block; margin: 18px 0 0; padding: 13px 15px; border-radius: 12px;
  font-size: 14.5px; line-height: 1.55; font-weight: 500;
  color: #ffe4b3; background: rgba(224, 163, 60, .17);
  border: 1px solid rgba(224, 163, 60, .65);
}
.porte-cli__boite > .avis-spam b { color: #fff; font-weight: 700; }
/* Sur fond blanc, l'or pâle serait illisible : le texte passe en brun doré. */
.bloc-cli .avis-spam { color: #7a5410; background: rgba(224, 163, 60, .14); }
.bloc-cli .avis-spam b { color: var(--encre); font-weight: 700; }