/* Socle commun du portail — jetons, chrome de page, composants partagés.
 *
 * Pourquoi ce fichier existe (audit du 03/09/2026) : les jetons de couleur, le
 * bandeau, le menu de compte et les onglets vivaient dans
 * `/pilotage/style.css`, que `/reservation/` chargeait pour en hériter. Ça
 * marchait, mais c'était faux à deux titres :
 *
 *   - une page de réservation — et demain une page d'accueil PUBLIQUE — n'a
 *     aucune raison de dépendre de la feuille de l'écran de pilotage ;
 *   - la règle de nommage du dépôt est « par rôle » : ce qui n'appartient à
 *     aucun écran en particulier va dans `commun/`, exactement comme
 *     `arene-module/commun/` porte ce qui ne relève d'aucun module.
 *
 * Le symptôme, déjà visible avant l'audit : `.lien-nav` et `.note` étaient
 * définis À L'IDENTIQUE des deux côtés, avec un commentaire qui constatait la
 * duplication sans pouvoir la résoudre.
 *
 * Contenu : jetons, base typographique, bandeau et navigation, menu de compte,
 * onglets, boutons, messages, dialogue. Rien qui soit propre au pilotage, au
 * calendrier ou à la vitrine — ces trois-là gardent leur feuille.
 */

:root {
  /* ── Couleurs ────────────────────────────────────────────────────────────
     Fonds assombris d'un cran par rapport à la première version (#14161a) :
     l'écran de pilotage gagne en contraste sur la zone vidéo, qui est noire,
     et les panneaux se détachent enfin du fond au lieu de flotter dedans. */
  --fond: #0e1116;
  --fond-panneau: #171b22;
  --fond-eleve: #1e232c;
  --bordure: #2a313c;
  --texte: #e9edf3;
  --texte-att: #98a2b0;

  --accent: #4c9aff;
  --accent-vif: #6fb2ff;
  /* Violet de marque : réservé aux moments d'IDENTITÉ (vitrine, accueil
     joueur). Jamais un état — les états sont --ok / --alerte / --danger, et
     mélanger les deux registres rendrait un écran de pilotage illisible. */
  --marque: #a78bfa;

  --ok: #2ecc71;
  --alerte: #e0b820;
  --danger: #e0453f;

  /* Fonds de pastilles d'état, jusqu'ici écrits en dur à sept endroits. */
  --fond-ok: #1a3a25;
  --fond-alerte: #3a2f1a;
  --fond-danger: #3a1a1a;
  --fond-info: #1a2a3a;

  /* ── Espacements et rayons (#86) ─────────────────────────────────────── */
  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-5: 1.5rem;
  --espace-6: 2.5rem;
  --rayon-sm: 4px;
  --rayon-md: 6px;
  --rayon-lg: 12px;

  --ombre-1: 0 1px 3px rgba(0, 0, 0, 0.3);
  --ombre-2: 0 4px 16px rgba(0, 0, 0, 0.4);
  --ombre-3: 0 12px 40px rgba(0, 0, 0, 0.5);

  /* Cible tactile minimale (CLAUDE.md, « Interface : PC et téléphone ») —
     répétée en dur dans une dizaine de règles avant ce fichier. */
  --cible-tactile: 44px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, sans-serif;
  /* Un peu de resserrage sur les titres : la pile système par défaut est très
     aérée, ce qui donne un rendu de document plutôt que de produit. */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Anneau de focus visible au clavier, sur TOUT le portail. Il n'y en avait
   aucun : la navigation au clavier était possible mais invisible, y compris
   sur l'écran de pilotage où elle est le mode d'entrée principal. */
:focus-visible {
  outline: 2px solid var(--accent-vif);
  outline-offset: 2px;
  border-radius: var(--rayon-sm);
}

/* Respecte un système réglé sur « animations réduites » — le portail n'a rien
   d'assez essentiel en mouvement pour l'imposer. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Bandeau de page ─────────────────────────────────────────────────────── */

/* Toujours visible, jamais recouvert (protocole §5). flex-wrap (#85) : à
   360 px, ses contrôles ne tiennent pas sur une ligne — sans lui, le bandeau
   débordait horizontalement au lieu de passer à la ligne. Un seul
   `margin-left: auto`, sur `.auth-zone` : deux en concurrence rendaient la
   répartition instable dès que le contenu changeait. */
.bandeau {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2) var(--espace-4);
  padding: var(--espace-3) var(--espace-4);
  background: var(--fond-panneau);
  border-bottom: 1px solid var(--bordure);
}

/* Marque dans le bandeau : ramène l'utilisateur à l'accueil joueur depuis
   n'importe quel écran, et donne au portail un point fixe reconnaissable. */
.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  min-height: var(--cible-tactile);
  color: var(--texte);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.marque-logo { width: 24px; height: 24px; flex: none; }
.marque-nom .machina { color: var(--accent); }

.lien-nav {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  min-height: var(--cible-tactile);
  display: inline-flex;
  align-items: center;
}
.lien-nav:hover { color: var(--accent-vif); }

.titre-page {
  font-weight: 600;
  font-size: 1.05rem;
}

/* ── Compte (issue #37, menu #83) ────────────────────────────────────────── */

/* Seul élément du bandeau à porter `margin-left: auto` (#85) : pousse le
   compte à droite, sur sa propre ligne s'il passe à la suivante. */
.auth-zone {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--texte-att);
}
.auth-zone a,
.auth-zone button {
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  text-decoration: underline;
}

.compte { position: relative; }

.compte-bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 40px;
  height: 40px;
  min-width: var(--cible-tactile);
  min-height: var(--cible-tactile);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.compte-bouton:hover,
.compte-bouton[aria-expanded="true"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.compte-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.compte-avatar--initiales {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #06101f;
  font-weight: 700;
  font-size: 0.85rem;
}
.compte-menu {
  position: absolute;
  top: calc(100% + var(--espace-2));
  right: 0;
  z-index: 20;
  min-width: 12rem;
  background: var(--fond-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  padding: var(--espace-3);
  box-shadow: var(--ombre-2);
}
.compte-menu-entete {
  padding-bottom: var(--espace-2);
  margin-bottom: var(--espace-2);
  border-bottom: 1px solid var(--bordure);
}
.compte-menu-nom { font-weight: 600; color: var(--texte); }
.compte-menu-email {
  font-size: 0.8rem;
  color: var(--texte-att);
  overflow-wrap: break-word;
}
.compte-menu-role {
  font-size: 0.8rem;
  color: var(--texte-att);
  margin-top: var(--espace-1);
}
.compte-menu-item {
  width: 100%;
  min-height: var(--cible-tactile);
  text-align: left;
  padding: var(--espace-2) var(--espace-1);
  background: none;
  border: none;
  border-radius: var(--rayon-sm);
  color: var(--texte);
  font: inherit;
  cursor: pointer;
  /* `text-decoration` : depuis le 08/09/2026 ce menu contient aussi des LIENS
   * (« Administration »), pas seulement des boutons — sans ça, eux seuls
   * seraient soulignés. */
  text-decoration: none;
}

/* Centrage vertical dans la cible tactile de 44 px. La garde `:not([hidden])`
 * est l'idiome du projet depuis #99 : une propriété `display` sans elle
 * réafficherait un élément masqué par l'attribut `hidden`. */
.compte-menu-item:not([hidden]) {
  display: flex;
  align-items: center;
}
.compte-menu-item:hover { background: var(--fond); }

/* ── Onglets ─────────────────────────────────────────────────────────────── */

/* Visuel refait le 04/09/2026 (retour de Julien sur le panneau du pilotage) :
   la version précédente donnait à chaque onglet son propre encadré
   (`border` + `border-radius`), ce qui les faisait lire comme une rangée de
   BOUTONS indépendants plutôt que comme des onglets rattachés au contenu
   qu'ils font apparaître en dessous. Un vrai onglet est solidaire de sa
   barre : un seul trait continu sous le groupe (`border-bottom` sur la
   nav), et seul l'onglet actif s'en détache par un trait de couleur qui le
   relie visuellement à son contenu. `font: inherit` conservé — sans lui un
   <button> garde la police par défaut du navigateur (Arial 13,33 px sur
   Chrome), ce qui dépareillait déjà les onglets du reste de la page. */
.bascule-vues {
  display: flex;
  margin-bottom: var(--espace-4);
  border-bottom: 1px solid var(--bordure);
}
/* Même piège que `.champ:not([hidden])` plus bas : un `display: flex` sec écrase
   l'attribut `hidden`. La barre d'onglets de machines que reservation/js/main.js
   masque « tant qu'il n'y a qu'une machine » restait donc affichée, avec son
   unique onglet — vu en vérifiant #293 (un joueur n'a plus qu'un véhicule
   réservable). */
.bascule-vues[hidden] { display: none; }
.onglet {
  flex: 1;
  padding: var(--espace-2);
  min-height: var(--cible-tactile);
  background: transparent;
  color: var(--texte-att);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* chevauche le trait de .bascule-vues, pour ne jamais doubler l'épaisseur */
  font: inherit;
  cursor: pointer;
}
.onglet--actif { color: var(--texte); border-bottom-color: var(--accent); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.bouton, .bouton-discret {
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-3);
  font: inherit;
  font-weight: 600;
  border-radius: var(--rayon-sm);
  cursor: pointer;
}
.bouton {
  background: var(--accent);
  color: #06210f;
  border: none;
}
.bouton:hover { background: var(--accent-vif); }
.bouton-discret {
  background: transparent;
  color: var(--texte);
  border: 1px solid var(--bordure);
}
.bouton-discret:hover { border-color: var(--texte-att); }
.bouton-danger { background: var(--danger); color: #fff; }
.bouton:disabled, .bouton-discret:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Messages et notes ───────────────────────────────────────────────────── */

.message {
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-sm);
  margin: 0 0 var(--espace-3);
}
.message--erreur { background: var(--fond-danger); color: var(--danger); }
.message--succes { background: var(--fond-ok); color: var(--ok); }
.message--info { background: var(--fond-info); color: var(--accent); }

.note {
  color: var(--texte-att);
  font-size: 0.85rem;
  margin: var(--espace-1) 0;
}
/* Un lien DANS une note : sans règle, le navigateur le peint en bleu #0000EE,
   illisible sur fond sombre (vu sur l'accueil, audit du 30/09/2026, #280). Même
   couleur que les liens des pages légales (`juridique.css`). */
.note a { color: var(--accent); }
.note a:hover { color: var(--accent-vif); }

/* ── Listes d'information (libellé / valeur) ─────────────────────────────── */

.liste-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espace-1) var(--espace-3);
  margin: 0;
}
.liste-info dt { color: var(--texte-att); }
.liste-info dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ── Champs de formulaire ────────────────────────────────────────────────── */

/* `:not([hidden])` — piège rencontré pour de vrai en testant #94 : un
   `display: flex` sec écrase l'attribut `hidden`, et un élément que le JS
   croit masquer reste visible. Trois symptômes distincts venaient de cette
   seule cause (PR #99). Toute règle d'affichage posée ici sur un élément que
   du JS peut masquer DOIT porter cette garde. */
.champ:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
  margin: var(--espace-2) 0;
  font-size: 0.85rem;
}

.champ input, .champ select {
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-2);
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
}

/* Import de photo (#140) — le fichier lui-même n'a pas la contrainte de
 * hauteur des champs texte ci-dessus (`min-height` casserait le rendu natif
 * du sélecteur de fichier selon le navigateur). */
.champ-photo input[type="file"] {
  padding: var(--espace-1) 0;
  border: none;
  background: none;
}
.champ-photo-previsualisation {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--rayon-sm);
  background: var(--fond-eleve);
}
.champ-photo-statut {
  margin: 0;
}

/* :not([hidden]) — même piège que .champ ci-dessus. */
.case:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  min-height: var(--cible-tactile);
  font-size: 0.8rem;
}

.etiquette {
  margin: var(--espace-2) 0 var(--espace-1);
  font-size: 0.8rem;
  color: var(--texte-att);
}

/* ── Panneau d'administration (#94, déplacé ici le 08/09/2026) ──────────────
   Bloc générique de panneau exploitant — d'abord propre à /reservation/,
   repris tel quel par l'écran d'arène (#136) pour son propre panneau
   d'administration. Deux écrans, une seule feuille : ce qui ne relève d'aucun
   écran en particulier vit ici, comme le reste de ce fichier. */
.bloc-admin {
  padding: var(--espace-3);
  margin-bottom: var(--espace-3);
  background: var(--fond-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
}
/* Entête de bloc portant une action à droite du titre (le « + » d'ajout
 * manuel d'un temps, 08/09/2026). */
.bloc-admin-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
}

.bloc-admin h3 { margin: 0 0 var(--espace-1); font-size: 0.95rem; }

/* Étape d'une suite logique À L'INTÉRIEUR d'un bloc-admin (#140, retour de
 * test du 09/09/2026 : activation, parcours, défi et ses photos « vont
 * ensemble ») — séparée par un simple filet, jamais sa propre carte comme
 * .bloc-admin : ce n'est pas un réglage indépendant. */
.sous-section-admin {
  padding-top: var(--espace-3);
  margin-top: var(--espace-3);
  border-top: 1px solid var(--bordure);
}
.sous-section-admin:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.sous-section-admin h4 {
  margin: 0 0 var(--espace-1);
  font-size: 0.85rem;
  color: var(--texte-att);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.classement-admin { display: flex; flex-direction: column; gap: var(--espace-1); margin-top: var(--espace-2); }
.classement-admin-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2);
  padding: var(--espace-1) var(--espace-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  font-variant-numeric: tabular-nums;
}

/* ── Dialogue ────────────────────────────────────────────────────────────── */

.dialogue {
  max-width: min(28rem, calc(100vw - 2rem));
  padding: var(--espace-4);
  background: var(--fond-panneau);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
}
.dialogue::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialogue-cout { font-weight: 600; }
.dialogue-champ {
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
  margin-top: var(--espace-3);
  font-size: 0.85rem;
}
.dialogue-champ select {
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-2);
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
}
/* ── Cases à cocher (#174) ───────────────────────────────────────────────────
 *
 * La case et son libellé forment UNE cible tactile (tout est dans le <label>),
 * et la hauteur minimale vaut celle des boutons : au doigt, viser une case de
 * 13 px est un exercice, pas une interaction. La note passe sous le libellé,
 * en deuxième ligne de la grille — à 360 px elle ne tiendrait pas à côté. */
.champ-case {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--espace-2);
  min-height: var(--cible-tactile);
  margin-top: var(--espace-3);
  cursor: pointer;
}
.champ-case input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.champ-case-note {
  grid-column: 2;
  font-size: 0.8rem;
  color: var(--texte-att);
}
/* Une case désactivée doit se VOIR : sans ça, un joueur coche dans le vide et
   croit avoir demandé un rappel qui ne partira jamais. */
.champ-case:has(input:disabled) {
  opacity: 0.55;
  cursor: default;
}
.champ-case:has(input:disabled) input { cursor: default; }

/* ── Liens d'agenda (#172) ───────────────────────────────────────────────────
 *
 * Dans `commun/` et non dans une feuille d'écran : les mêmes deux liens
 * servent le dialogue de réservation et la carte « prochaine session » de
 * /jouer/, comme le module JS qui les construit.
 *
 * `flex-wrap` plutôt qu'une grille à deux colonnes : à 360 px, « Autre agenda
 * (.ics) » ne tient pas à côté de « Google Agenda », et une colonne trop
 * étroite tronquerait le libellé au lieu de passer à la ligne. */
.agenda-liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
  margin-top: var(--espace-2);
}
/* Les liens sont des <a> : sans ça, ils s'affichent en ligne et perdent la
   hauteur de cible tactile que .bouton-discret donne aux <button>. */
.agenda-liens a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.agenda-liens--compact a {
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-2);
  font-size: 0.8rem;
}

.dialogue-titre {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: var(--espace-2);
}

.dialogue-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--espace-2);
  margin-top: var(--espace-4);
}

/* ── Pied de page ────────────────────────────────────────────────────────────
 *
 * Remonté de `accueil.css` vers ce fichier avec les pages légales (#169) : il
 * n'appartenait plus à la seule vitrine dès lors que l'espace joueur devait
 * porter les mêmes liens obligatoires. Même raisonnement que l'audit du
 * 03/09/2026, qui a sorti les jetons de `pilotage/style.css`.
 *
 * `--largeur` a une VALEUR DE REPLI ici : le jeton n'est défini que par
 * `.vitrine`, et sans repli `max-width` serait invalide — donc ignoré — sur
 * toute autre page, étalant le pied sur toute la largeur de l'écran.
 *
 * L'écran de pilotage n'a délibérément PAS de pied de page : il occupe la
 * hauteur visible et ne défile pas au téléphone (CLAUDE.md, retour de #106).
 * Les liens légaux s'y atteignent par l'accueil et l'espace joueur.
 */
.pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
  max-width: var(--largeur, 68rem);
  margin: 0 auto;
  padding: var(--espace-5) var(--espace-4) var(--espace-6);
  border-top: 1px solid var(--bordure);
  color: var(--texte-att);
  font-size: 0.85rem;
}

/* Les liens légaux eux-mêmes. `gap` vertical autant qu'horizontal : à 360 px
   ils passent à la ligne, et sans lui ils se collent. Cible tactile assurée
   par le remplissage vertical — ces liens doivent rester cliquables au doigt
   comme le reste du portail. */
.liens-pied {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2) var(--espace-4);
}

.liens-pied a {
  display: inline-block;
  padding: var(--espace-2) 0;
  color: var(--texte-att);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.liens-pied a:hover {
  color: var(--texte);
  border-bottom-color: var(--bordure);
}


/* ── Ma prochaine réservation, au centre du bandeau (#269) ──────────────────
   `margin-inline: auto` pousse l'indicateur vers le centre ; `.auth-zone`
   garde son `margin-left: auto` (#85), les deux se partagent l'espace libre.
   À 360 px il tient sur la ligne du bandeau : forme COURTE, arène et véhicule
   dans l'infobulle. Le clignotement ne porte jamais seul le signal — le texte change
   aussi — et il est coupé sous prefers-reduced-motion. */
.rs {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  margin-inline: auto;
  min-width: 0;
}
.rs[hidden] { display: none; }

.rs-resume {
  min-height: var(--cible-tactile);
  max-width: 100%;
  padding: 0 var(--espace-3);
  background: none;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  color: var(--texte);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.rs-texte--longue,
.rs-detail-inline { display: none; }
@media (min-width: 760px) {
  .rs-texte--longue { display: inline; }
  .rs-texte--courte { display: none; }
}
@media (min-width: 1100px) {
  .rs-detail-inline { display: inline; margin-left: var(--espace-2); font-weight: 400; color: var(--texte-att); }
}

.rs--jaune .rs-resume { color: var(--alerte); border-color: var(--alerte); background: var(--fond-alerte); }
.rs--rouge .rs-resume { color: #ff8a85; border-color: var(--danger); background: var(--fond-danger); }
.rs--info .rs-resume  { color: var(--accent-vif); border-color: var(--accent); background: var(--fond-info); }
.rs--jaune .rs-detail-inline,
.rs--rouge .rs-detail-inline { color: inherit; }

/* Lent (période 1,4 s, bien en dessous de 3 éclairs par seconde, WCAG 2.3.1). */
@keyframes rs-clignote {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.rs--clignote .rs-resume { animation: rs-clignote 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .rs--clignote .rs-resume { animation: none !important; }
}

.rs-piloter {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-3);
  background: var(--accent);
  border-radius: var(--rayon-md);
  color: #06101f;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.rs-piloter[hidden] { display: none; }
.rs-piloter:hover { background: var(--accent-vif); }

.rs-annonce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Écran de pilotage, téléphone : « ← » seul, pour que l'indicateur tienne sur
   la ligne du bandeau sans repousser les commandes (#106). */
@media (max-width: 480px) {
  .lien-nav-texte { display: none; }
}

/* Toutes pages, téléphone : quand l'indicateur est là, le nom de la marque cède
   la place (le logo reste) — sinon le compte passe sur une seconde ligne. */
@media (max-width: 480px) {
  .bandeau:has(.rs:not([hidden])) .marque-nom { display: none; }
}