/* Espace client (/espace) — le CHROME : bandeau de vue admin, en-tête, onglets, barre du bas, sélecteur de
   site, pied, pages publiques, et les composants propres à l'espace (préfixe esp-).

   DA « Viseur » du cockpit depuis le 23/10/2026 (Franck : « On reprend le même design que le cockpit, mêmes
   typos, couleurs, etc. Mais la version admin reste SF. Augmente la largeur pour prendre plus de place. »).
   Chargée APRÈS app.css et espace-viseur.css (jetons --esp-*, pont vers les variables d'app.css, composants
   remis à la DA). Barres sombres comme la « Double barre » du cockpit, contenu clair, police Archivo servie
   par le site, aucun arrondi.
   Mobile d'abord : barre d'onglets en bas sous 900 px, onglets sous l'en-tête au-delà.
   Rien ici ne doit toucher un écran admin : feuille chargée par templates/espace/base.html.twig seulement. */

/* ---------- Socle tactile ---------- */
body.espace { overflow-x: clip; }
.espace { --esp-top: 52px; --esp-imperso: 0px; --esp-nav: 60px; }
/* 52 px et non 44 : le bandeau ne doit pas serrer son propre bouton de sortie, qui
   est une cible tactile de 44 px (WCAG 2.5.8) et le SEUL moyen de quitter la vue. */
.espace.esp-vue-admin { --esp-imperso: 52px; }
/* 16 px : iOS ne zoome plus au focus. */
.espace input[type=text], .espace input[type=email], .espace input[type=password], .espace input[type=search],
.espace input[type=number], .espace input[type=date], .espace input[type=url], .espace input[type=file],
.espace select, .espace textarea { font-size: 16px; min-height: 44px; }
.espace input[type=checkbox], .espace input[type=radio] { width: 20px; height: 20px; }
@media (pointer: coarse) {
  .espace .btn, .espace .btn-sm, .espace .seg, .espace .pill { min-height: 44px; }
  .espace .pill { display: inline-flex; align-items: center; padding: 0 14px; }
  .espace .seg { padding: 0 14px; }
}
.espace .btn { min-height: 44px; }
.espace .help, .espace .page-sub, .espace .muted { color: var(--muted); }
.esp-btn-plein { width: 100%; }
/* Bouton pleine largeur : libellé fer à gauche (règle du cockpit, .ac-btn-block). */
.espace .btn.esp-btn-plein { justify-content: flex-start; }

/* ---------- Plancher de lisibilité : 12 px ----------
   Rien de peint dans l'espace ne descend sous 12 px. app.css est la feuille de
   l'ADMIN, où Franck lit des tableaux denses sur un 27 pouces ; ici le marchand lit
   son téléphone au comptoir. L'interlettrage des capitales reste mesuré : à 12 px,
   .1em rallonge le mot de 12 % et remet « À VALIDER » sur deux lignes à 320 px. */
.espace .site-metrics .m span { font-size: 12px; letter-spacing: .04em; }
.espace .kpi .kpi-label { font-size: 12px; letter-spacing: .1em; }
.espace label { font-size: 12px; }
.espace th { font-size: 12px; letter-spacing: .1em; }
.espace .badge { font-size: 12px; letter-spacing: .06em; }
.espace .btn.btn-sm { font-size: 12px; }
.espace .comment .meta { font-size: 12px; }
.espace .dsp-barres-bornes { font-size: 12px; }
.espace .perf-legend { font-size: 12px; }

/* ---------- Bandeau de vue administrateur ----------
   Aplat d'accent (le rouge du cockpit, en version lisible sous un texte blanc) : on sait d'un coup d'œil qu'on
   n'est pas « chez soi ». */
.esp-imperso {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  height: var(--esp-imperso); padding: 0 12px;
  background: var(--esp-accent-face); color: #fff;
  font-size: 13px; line-height: 1.2;
}
.esp-imperso-txt { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .3em; white-space: nowrap; overflow: hidden; }
.esp-imperso-role { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
/* Ce qui RESTE quand la place manque : l'ÉCHÉANCE, jamais autre chose. Le conteneur
   coupe son dernier enfant (overflow: hidden) ; on rend donc rétractables, avec
   points de suspension, tous les enfants QUI PRÉCÈDENT l'échéance, et on la laisse
   seule en `flex: none`. Masquer le nom sous 480 px ne suffisait pas : mesuré à
   0/32 px d'heure visible à 320, 400, 402, 414, 428, 430 et 480 px. */
.esp-imperso-txt > * { flex: none; }
.esp-imperso-txt > .esp-imperso-role { flex: 0 1 auto; min-width: 3.5em; overflow: hidden; text-overflow: ellipsis; }
.esp-imperso-txt > .esp-imperso-nom { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.esp-imperso-txt > .esp-imperso-fin { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.esp-imperso-form { margin: 0; flex: none; }
.esp-imperso-btn {
  min-height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .7);
  background: transparent; color: #fff; cursor: pointer;
  font: 800 12px var(--esp-font); letter-spacing: .1em; text-transform: uppercase;
}
.esp-imperso-btn:hover { background: #fff; color: var(--esp-accent-text); }
.esp-imperso-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Liseré d'accent autour de tout l'écran : on sait toujours qu'on n'est pas « chez soi ». */
.esp-imperso-frame { position: fixed; inset: 0; z-index: 80; pointer-events: none; box-shadow: inset 0 0 0 3px var(--esp-accent); }
/* Points de rupture ALIGNÉS SUR LA MESURE (et non sur des largeurs rondes) : à 480 px
   comme à 430 px, « lecture seule » + nom + échéance + bouton ne tiennent pas. Le seuil
   est 540 px, largeur à partir de laquelle l'échéance était déjà entière.
   Ce qui disparaît est redondant : « lecture seule » est dit par l'aplat rouge et le
   liseré, le nom du client est répété juste dessous dans l'en-tête. L'échéance, elle,
   n'est écrite nulle part ailleurs : « jusqu'à 09:58 » coupé se lit « jusqu'à 10 »,
   une heure fausse et plausible. */
@media (max-width: 539px) { .esp-long { display: none; } .esp-imperso-nom { display: none; } }

/* ---------- En-tête : barre sombre du cockpit ----------
   Encre pleine (--acb-low), marque « KLOREL » en capitales espacées et carré d'accent, icônes en gris clair. */
.esp-top {
  position: sticky; top: var(--esp-imperso); z-index: 55;
  display: flex; align-items: center; gap: 12px;
  height: var(--esp-top); padding: 0 12px 0 16px;
  background: var(--esp-barre-fonce); color: #fff;
}
/* Règle graduée du cockpit au bas de l'en-tête (au téléphone ; au-delà, elle passe sur la barre d'onglets). */
.esp-top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--esp-regle); pointer-events: none;
}
.esp-marque { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; color: #fff; min-height: 44px; }
.esp-marque:hover { text-decoration: none; color: #fff; }
.esp-logo { display: block; flex: none; height: 30px; width: auto; padding: 3px 6px; background: #fff; box-sizing: content-box; }
.esp-logo-lg { height: 48px; padding: 6px 10px; }
.esp-marque-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.esp-marque-nom { display: inline-flex; align-items: center; gap: 8px; font-family: var(--esp-font); font-size: 13px; letter-spacing: .22em; font-weight: 800; }
/* Carré d'accent du bandeau du cockpit (.ac-top__mark). */
.esp-marque-nom::after { content: ''; width: 7px; height: 7px; background: var(--esp-accent); flex: none; }
.esp-marque-sous { color: var(--esp-barre-encre); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esp-top-actions { display: flex; align-items: center; gap: 0; flex: none; }
.esp-icone {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--esp-barre-encre);
  transition: background .12s, color .12s;
}
.esp-icone:hover { color: #fff; background: var(--esp-barre-survol); text-decoration: none; }
/* Page ouverte : blanc et souligné d'accent, comme l'onglet actif. */
.esp-icone.on { color: #fff; background: var(--esp-barre-survol); box-shadow: inset 0 -2px 0 var(--esp-accent); }
.esp-icone:focus-visible { outline: 2px solid var(--esp-accent-on-dark); outline-offset: -2px; }
.esp-icone .ic, .esp-tab .ic { width: 20px; height: 20px; }
.espace .ic { display: inline-block; }

/* ---------- Navigation : barre du bas (téléphone) ----------
   La barre des onglets du cockpit, posée en bas comme lui : gris anthracite, règle graduée en haut, onglet
   courant à l'encre avec un filet d'accent de 2 px. Colonnes de 44 px au moins : si un 8e onglet ne tient
   plus (320 px), la barre défile de côté plutôt que de rétrécir les cibles sous le doigt. */
.esp-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(44px, 1fr);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--esp-regle) top / 100% 3px no-repeat, var(--esp-barre);
  border-top: 1px solid var(--esp-barre-bd);
  counter-reset: esp-onglet;
}
.esp-tabs::-webkit-scrollbar { display: none; }
.esp-tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--esp-nav); padding: 6px 2px;
  color: var(--esp-barre-encre); font-size: 12px; font-weight: 600; line-height: 1.1; text-align: center;
  counter-increment: esp-onglet;
  transition: background .12s, color .12s;
}
.esp-tab:hover { color: #fff; background: var(--esp-barre-survol); text-decoration: none; }
.esp-tab.on { color: #fff; background: var(--esp-barre-fonce); box-shadow: inset 0 2px 0 var(--esp-accent); }
.esp-tab.on .ic { color: var(--esp-accent-on-dark); }
.esp-tab:focus-visible { outline: 2px solid var(--esp-accent-on-dark); outline-offset: -3px; }
.esp-tab-court { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Libellé complet : lu par les lecteurs d'écran sur mobile, affiché sur grand écran. */
.esp-tab-long { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.esp-tab-compteur {
  position: absolute; top: 5px; left: calc(50% + 6px);
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--esp-accent-face); color: #fff;
  font: 800 12px/20px var(--esp-font); font-variant-numeric: tabular-nums; text-align: center;
}

/* ---------- Sélecteur de site ----------
   Puces carrées cadrées ; le site choisi passe à l'ENCRE (filtre neutre : l'accent est réservé à ce qui
   alerte — règle .ac-seg-ink du cockpit). */
.esp-sites { max-width: var(--esp-cadre); margin: 0 auto; padding: 16px 16px 0; }
.esp-sites-piste {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding: 3px 2px 8px; margin: -3px -2px 0;
}
.esp-site {
  /* `position: relative` OBLIGATOIRE : la pastille contient un `.kl-sr` en position
     absolue (l'état du site, pour les lecteurs d'écran). Sans ancêtre positionné, son
     bloc conteneur est le bloc initial, donc EN DEHORS de la piste : elle échappe au
     découpage de `.esp-sites-piste`, étire la zone de défilement du DOCUMENT et la page
     entière se déplace latéralement au doigt (mesuré : 8 sites à 390 px → document de
     1418 px et déplacement de 600 px). `clip-path` découpe la peinture, pas le
     débordement de disposition. */
  position: relative;
  display: inline-flex; align-items: center; gap: 8px; flex: none; scroll-snap-align: start;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--esp-n400); background: var(--esp-panel); color: var(--esp-ink);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.esp-site:hover { border-color: var(--esp-ink); color: var(--esp-ink); text-decoration: none; }
.esp-site.on { border-color: var(--esp-ink); color: #fff; background: var(--esp-ink); }
/* WCAG 1.4.1 — la couleur n'est jamais seule. Deux signes s'ajoutent à la teinte :
   la FORME de la diode (rond = en ligne, carré = hors ligne, losange = surveillance
   indisponible), lisible même en deutéranopie, et le LIBELLÉ écrit en clair dès que
   l'état n'est pas « en ligne » (l'animation `pouls` ne compte pas : elle est
   neutralisée par prefers-reduced-motion). Les formes sont posées dans espace-viseur.css
   (toutes les diodes sont carrées, sauf « en ligne » qui reste ronde). */
.esp-site.on .dot.up { background: #fff; }
.esp-site-etat-court { font-size: 12px; font-weight: 700; }
.esp-site-etat-bad { color: var(--esp-danger); }
.esp-site-etat-warn { color: var(--esp-alerte); }
.esp-site-etat-inconnu { color: var(--muted); }
.esp-site.on .esp-site-etat-court { color: inherit; }
.esp-sites-note { max-width: var(--esp-cadre); margin: 0 auto; padding: 12px 16px 0; color: var(--muted); font-size: 13px; }

/* ---------- Contenu et pied ---------- */
.esp-main { padding-top: 20px; padding-bottom: 28px; }
/* Micro-titre « 03 / DISPONIBILITÉ » posé par base.html.twig au-dessus du titre de la page. */
.esp-main > .esp-kicker { margin-bottom: 6px; }
.esp-pied {
  max-width: var(--esp-cadre); margin: 0 auto;
  padding: 16px 16px calc(var(--esp-nav) + 24px + env(safe-area-inset-bottom));
  color: var(--muted); font-size: 13px; text-align: center;
}
.esp-pied::before { content: ''; display: block; height: 1px; margin-bottom: 14px; background: var(--esp-n300); }
.esp-pied p { margin: 4px 0; max-width: none; }
/* Passe finale du 23/10/2026 (Franck : « même design que le cockpit ») : n600 donnait 3,85:1 sur le fond, sous
   le seuil WCAG AA d'un texte de 12 px ; --esp-muted (5,8:1), la couleur du texte secondaire du cockpit. */
.esp-pied-sig { letter-spacing: .18em; text-transform: uppercase; font-size: 12px; font-weight: 800; color: var(--esp-muted); }
.esp-titre-section { margin-top: 32px; }

/* ---------- Composants de page ---------- */
.esp-kpis { margin-bottom: 4px; }
/* Téléphone : deux tuiles par rangée (cinq tuiles empilées repoussaient « Vos sites » à trois écrans).
   Plus de place : au-delà de 1 200 px, les tuiles tiennent sur UNE rangée (cinq à 1 440 px). */
@media (min-width: 360px) and (max-width: 639px) {
  .espace .grid.esp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .espace .esp-kpis .kpi { padding: 14px 14px 16px; }
  .espace .esp-kpis .kpi .kpi-value { font-size: 26px; overflow-wrap: anywhere; }
  .espace .esp-kpis .kpi .kpi-label { letter-spacing: .06em; }
  .espace .esp-kpis .esp-rv-tuile .esp-rv-tuile-valeur { font-size: 18px; }
}
@media (min-width: 1200px) {
  .espace .grid.esp-kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
/* Cartes de site (aperçu, disponibilité) : autant de colonnes que la largeur en loge (une carte par site
   jusqu'à deux, trois côte à côte à 1 440 px dès le troisième site). */
@media (min-width: 640px) {
  .espace .grid.grid-2:has(> .esp-site-carte),
  .espace .grid.grid-2:has(> .esp-dsp-carte) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
}
.esp-kpi-lien { display: block; color: inherit; }
.esp-kpi-lien:hover { text-decoration: none; }
.esp-kpi-note { color: var(--muted); font-size: 13px; margin-top: 6px; }
.esp-statut { display: inline-flex; align-items: center; gap: 7px; }

.esp-site-carte .esp-site-tete { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.esp-site-dot { margin-top: 8px; }
.esp-site-etat { display: block; margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.esp-etat-ok { color: var(--esp-ok); }
.esp-etat-warn { color: var(--esp-alerte); }
.esp-etat-bad { color: var(--esp-danger); }
/* Dans une grille, l'écart vient du `gap` : pas de marge basse en plus. */
.espace .grid > .card { margin-bottom: 0; }
.espace .grid { margin-bottom: 16px; }
.esp-site-nom { flex: 1; min-width: 0; }
.esp-site-nom strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esp-site-nom small { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esp-site-chiffres { margin-bottom: 12px; }
/* Disponibilité 30 j et attente serveur de la carte : une ligne de texte plutôt que
   deux cases de plus — au téléphone, la carte doit tenir sous le pouce. */
.esp-site-mesure { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.esp-site-mesure strong { color: var(--fg); font-weight: 800; }
.esp-site-mesure .esp-dispo-ok { color: var(--esp-ok); }
.esp-site-mesure .esp-dispo-warn { color: var(--esp-alerte); }
.esp-site-mesure .esp-dispo-bad { color: var(--esp-danger); }
.esp-site-liens { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding-top: 4px; border-top: 1px solid var(--esp-n300); max-width: none; }
.esp-site-liens a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.esp-site-liens a:hover { text-decoration: underline; }

/* Listes en cartes (tickets, factures…) : une ligne = un bloc cliquable de 44 px mini. */
.esp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.esp-row {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 10px 14px; border: 1px solid var(--esp-n300);
  background: var(--esp-panel); color: var(--fg);
  transition: background .12s, border-color .12s, box-shadow .12s;
}
a.esp-row:hover { border-color: var(--esp-n400); background: var(--esp-champ); box-shadow: inset 3px 0 0 var(--esp-accent); text-decoration: none; }
.esp-row-corps { flex: 1; min-width: 0; }
.esp-row-titre { display: block; font-weight: 700; overflow-wrap: anywhere; }
.esp-row-meta { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.esp-row-fin { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }

.esp-dl { display: grid; grid-template-columns: 1fr; gap: 2px 18px; margin: 0; }
.esp-dl dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; margin-top: 10px; }
.esp-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .esp-dl { grid-template-columns: max-content 1fr; }
  .esp-dl dt { margin-top: 0; padding-top: 3px; }
}

.esp-journal { list-style: none; margin: 0 0 8px; padding: 0; }
.esp-journal li { display: grid; grid-template-columns: 1fr; gap: 0 12px; padding: 9px 0; border-top: 1px solid var(--esp-n300); }
.esp-journal li:first-child { border-top: 0; }
.esp-journal li.bad .esp-journal-quoi { color: var(--esp-danger); }
.esp-journal-date { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }
.esp-journal-qui { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
@media (min-width: 640px) { .esp-journal li { grid-template-columns: 140px 1fr auto; align-items: baseline; } }

.esp-vide { text-align: center; }
.esp-vide h1 { margin-bottom: 8px; }

/* ---------- Pages publiques ----------
   Boîte centrée encadrée des quatre équerres du cockpit (cadre de visée), marque au-dessus. */
.esp-auth { min-height: 100vh; min-height: 100dvh; padding: 32px 16px calc(32px + env(safe-area-inset-bottom)); background: var(--esp-bg); }
.esp-auth .auth-box { max-width: 440px; }
/* Sur le fond clair, le carré blanc du logo prend un filet pour ne pas flotter. */
.esp-auth .esp-logo { box-shadow: 0 0 0 1px var(--esp-n300); }
.esp-auth-tete { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 26px; }
.esp-auth-titre {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font: 800 13px/1.2 var(--esp-font); letter-spacing: .24em; text-transform: uppercase; color: var(--fg);
}
.esp-auth-titre::before { content: ''; width: 8px; height: 8px; background: var(--esp-accent); flex: none; }
.esp-auth .auth-box > .card { position: relative; padding: 26px 24px 22px; }
.esp-auth .auth-box > .card::after {
  content: ''; position: absolute; inset: -10px; pointer-events: none;
  background:
    linear-gradient(var(--esp-ink), var(--esp-ink)) top left / 16px 2px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) top left / 2px 16px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) top right / 16px 2px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) top right / 2px 16px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) bottom left / 16px 2px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) bottom right / 2px 16px no-repeat;
}
.esp-auth-intro { margin: 0 0 14px; color: var(--muted); }
.esp-auth-intro strong { color: var(--fg); }
.esp-auth-lien { text-align: center; margin: 16px 0 4px; max-width: none; }
.esp-auth-lien a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.esp-auth-note { text-align: center; color: var(--muted); font-size: 12px; margin: 10px auto 0; letter-spacing: .04em; }
.esp-case { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; margin: 4px 0 16px; color: var(--fg); font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.esp-case .help { flex-basis: 100%; margin-top: 0; font-weight: 400; }

/* ---------- Marges de sécurité (encoche, coins arrondis) et LARGEUR ----------
   base.html.twig déclare `viewport-fit=cover` : la page s'étend SOUS l'encoche et sous
   les coins arrondis. En PAYSAGE, Safari renseigne `-left` et `-right` à 44-59 px :
   `max(...)` les respecte, et retombe sur la gouttière quand elles valent 0.
   « Augmente la largeur pour prendre plus de place » (Franck, 23/10/2026) : le contenu
   va jusqu'à 1 760 px (--esp-cadre, marges comprises), gouttières de 16 / 24 / 40 / 48 px
   selon la largeur ; les barres sombres restent pleine largeur et alignent leur contenu
   sur le même cadre. Le texte courant, lui, reste borné à ~75 caractères (espace-viseur.css). */
.esp-top {
  padding-left: max(var(--esp-gouttiere), env(safe-area-inset-left), calc((100% - var(--esp-cadre)) / 2 + var(--esp-gouttiere)));
  padding-right: max(calc(var(--esp-gouttiere) - 4px), env(safe-area-inset-right), calc((100% - var(--esp-cadre)) / 2 + var(--esp-gouttiere) - 4px));
}
.esp-imperso { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.esp-tabs { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.espace .container, .esp-sites, .esp-sites-note, .esp-pied {
  max-width: var(--esp-cadre);
  padding-left: max(var(--esp-gouttiere), env(safe-area-inset-left));
  padding-right: max(var(--esp-gouttiere), env(safe-area-inset-right));
}

/* ---------- Grand écran : onglets sous l'en-tête ----------
   Barre des onglets du cockpit : numéro « 01 » en accent clair, libellé en capitales espacées, sans picto
   (règle de Franck pour le menu du cockpit), onglets étirés à parts égales, filet d'accent sur l'onglet
   courant. Le numéro vient d'un compteur CSS : aucun balisage, et il n'est pas lu par les lecteurs d'écran.
   Paliers MESURÉS dans Chrome (banc socle-design, 7 onglets réels + un 8e simulé pour le futur « Outils ») :
   les huit libellés entiers tiennent à chaque largeur, la barre ne défile jamais de côté ; le défilement
   (overflow-x) ne reste qu'en filet de sécurité pour un libellé plus long ajouté plus tard.
     900-1 099 px  : casse normale 13 px, sans numéro   (8 onglets : ~770 px pour 852)
     1 100-1 359 px : capitales .06em, sans numéro        (8 onglets : ~970 px pour 1 052)
     1 360-1 499 px : capitales .1em, numérotés            (8 onglets : ~1 250 px pour 1 280)
     1 500 px et +  : capitales .14em, numérotés, aérés    (8 onglets : 1 371 px pour 1 420) */
@media (min-width: 900px) {
  .espace { --esp-top: 56px; }
  .esp-top::after { content: none; }
  .esp-tabs {
    position: sticky; top: calc(var(--esp-imperso) + var(--esp-top)); bottom: auto; z-index: 54;
    display: flex; gap: 0; overflow-x: auto;
    padding-left: max(var(--esp-gouttiere), env(safe-area-inset-left), calc((100% - var(--esp-cadre)) / 2 + var(--esp-gouttiere)));
    padding-right: max(var(--esp-gouttiere), env(safe-area-inset-right), calc((100% - var(--esp-cadre)) / 2 + var(--esp-gouttiere)));
    border-top: 0; border-bottom: 1px solid var(--esp-barre-fonce);
  }
  .esp-tab {
    flex: 1 0 auto; flex-direction: row; gap: 7px;
    min-height: 48px; padding: 0 8px;
    border-left: 1px solid var(--esp-barre-sep);
    font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap;
  }
  .esp-tab:first-child { border-left: 0; }
  .esp-tab:last-child { border-right: 1px solid var(--esp-barre-sep); }
  .esp-tab .ic { display: none; }
  .esp-tab-court { display: none; }
  .esp-tab-long { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
  .esp-tab-compteur { position: static; }
  .esp-main { padding-top: 28px; padding-bottom: 36px; }
  .esp-pied { padding-bottom: 32px; }
}
@media (min-width: 1100px) {
  .esp-tab { padding: 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
}
@media (min-width: 1360px) {
  .esp-tab { padding: 0 12px; letter-spacing: .1em; }
  .esp-tab::before {
    content: counter(esp-onglet, decimal-leading-zero);
    content: counter(esp-onglet, decimal-leading-zero) / '';
    color: var(--esp-accent-on-dark); font-size: 12px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  }
}
@media (min-width: 1500px) {
  .esp-tab { padding: 0 16px; gap: 9px; letter-spacing: .14em; }
}

/* ---------- Impression : fond blanc, sans navigation ---------- */
@media print {
  body.espace { background: #fff !important; color: #000; }
  .esp-tabs, .esp-sites, .esp-top-actions, .esp-imperso, .esp-imperso-frame, .esp-pied { display: none !important; }
  .esp-top { position: static; background: none; color: #000; }
  .esp-top::after { content: none; }
  .esp-marque, .esp-marque:hover { color: #000; }
  .espace .card { background: #fff; border-color: #ccc; box-shadow: none; color: #000; }
  .espace .muted, .espace .help, .espace .page-sub { color: #444; }
  .esp-main { padding-bottom: 0; }
}

/* Téléphone de Mon compte (passe finale du 23/10/2026) : champ et bouton sur la même ligne, bords alignés (en ligne,
   ils s'alignaient sur la ligne de base et le bouton descendait de 2 px) ; l'aide passe dessous. */
.espace #telephone form { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.espace #telephone input[type=tel] { flex: 1 1 200px; width: auto; max-width: 320px; margin: 0; }
.espace #telephone .btn { margin: 0; }
.espace #telephone .help { flex: 1 1 100%; margin-top: 0; }

/* Case « Notification e-mail » de Mon compte (07/10/2026) : la phrase à côté de la case, cible de 44 px. */
.esp-bascule { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin: 0 0 12px; color: var(--fg); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; line-height: 1.5; cursor: pointer; }
.esp-bascule input { flex: none; margin-top: 1px; }