/* S33D HOSTING : espace client. Chargée après style.css.
   Tout ce qui est propre à cette page vit ici, avec ses propres jetons,
   pour ne pas dépendre des détails de la feuille commune. */

.page-espace {
  --e-fond: #ffffff;
  --e-fond-doux: #f5f7fa;
  --e-fond-appui: #eaf0f7;
  --e-trait: #dfe5ec;
  --e-trait-fort: #c6d1dd;
  --e-encre: #0e2233;
  --e-texte: #33475b;
  --e-doux: #5f7185;
  --e-accent: #2563eb;
  --e-accent-fonce: #1d4ed8;
  --e-accent-doux: #e8effd;
  --e-ok: #15803d;
  --e-ok-doux: #e6f6ec;
  --e-alerte: #92400e;
  --e-alerte-doux: #fdf3e2;
  --e-refus: #b91c1c;
  --e-refus-doux: #fdecec;
  --e-rayon: 10px;
  background: var(--e-fond-doux);
}
.page-espace main { background: var(--e-fond-doux); }

/* --- zone compte de l'en-tête --- */
.page-espace .compte { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; justify-content: flex-end;
  font-size: .88rem; font-weight: 650; min-width: 0; }
.page-espace .compte .compte-nom { display: inline-flex; align-items: center; gap: .4rem; color: var(--e-encre);
  max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-espace .compte .compte-nom .icone { width: 18px; height: 18px; color: var(--e-doux); }
.page-espace .compte a { color: var(--e-texte); }
.page-espace .compte a:hover { color: var(--e-accent-fonce); }
.page-espace .compte a[aria-current="page"] { color: var(--e-accent-fonce); }
.page-espace .compte .compte-sortie { background: none; border: 0; padding: 0; font: inherit; color: var(--e-texte);
  cursor: pointer; }
.page-espace .compte .compte-sortie:hover { color: var(--e-refus); text-decoration: underline; }
.page-espace .compte .bouton.petit { color: #fff; }

/* --- structure --- */
.esp { padding: 1.6rem 0 3rem; min-height: 65vh; }
.esp-chargement { color: var(--e-doux); padding: 2rem 0; margin: 0; }
.esp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.esp .carte { border-radius: var(--e-rayon); border-color: var(--e-trait); box-shadow: none; }

.esp-tete { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.esp-titre { display: flex; align-items: baseline; gap: .7rem; }
.esp-titre h1 { font-size: 1.55rem; margin: 0; letter-spacing: -.01em; }
.esp-titre h1:focus { outline: none; }
.esp-compteur { color: var(--e-doux); font-weight: 650; font-size: .92rem; }
.esp .message { margin-bottom: 1rem; }

/* --- connexion --- */
.esp-connexion { max-width: 420px; margin: 2rem auto; text-align: center; padding: 2rem 1.6rem; }
.esp-connexion h1 { font-size: 1.5rem; margin: .6rem 0 .4rem; }
.esp-connexion p { color: var(--e-doux); }
.esp-connexion-icone { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: var(--e-accent-doux); color: var(--e-accent-fonce); }
.esp-connexion-bas { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--e-trait); font-size: .9rem; }

.esp-vide { text-align: center; padding: 2.2rem 1.4rem; }
.esp-vide h2 { font-size: 1.2rem; }
.esp-vide p { color: var(--e-doux); max-width: 52ch; margin-inline: auto; }

/* --- grille liste + détail --- */
.esp-grille { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 860px) { .esp-grille { grid-template-columns: minmax(0, 1fr); } }

.esp-liste { background: var(--e-fond); border: 1px solid var(--e-trait); border-radius: var(--e-rayon); overflow: hidden; }
.esp-liste ul { list-style: none; margin: 0; padding: 0; }
.esp-liste li + li { border-top: 1px solid var(--e-trait); }
.esp-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .6rem; width: 100%; text-align: left;
  background: none; border: 0; border-left: 3px solid transparent; padding: .75rem .9rem; font: inherit;
  color: var(--e-texte); cursor: pointer; }
.esp-item:hover { background: var(--e-fond-doux); }
.esp-item[aria-current="true"] { background: var(--e-accent-doux); border-left-color: var(--e-accent); }
.esp-item:focus-visible { outline: 2px solid var(--e-accent); outline-offset: -2px; }
.esp-item.nouvelle { box-shadow: inset 0 0 0 2px var(--e-accent); }
.esp-item-nom { font-weight: 750; color: var(--e-encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esp-item-bas { grid-column: 1 / -1; display: flex; gap: .7rem; flex-wrap: wrap; font-size: .82rem; color: var(--e-doux); }
.esp-item-bas .mono { font-size: .8rem; color: var(--e-texte); }
.esp-item .esp-mini { grid-column: 1 / -1; height: 4px; }

/* badge : repris ici pour ne pas dépendre de la feuille commune */
.esp .badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 750;
  padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; align-self: center; line-height: 1.5; }
.esp .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.esp .badge.active { background: var(--e-ok-doux); color: var(--e-ok); }
.esp .badge.arretee { background: var(--e-fond-appui); color: var(--e-texte); }
.esp .badge.provisionnement, .esp .badge.suppression { background: var(--e-accent-doux); color: var(--e-accent-fonce); }
.esp .badge.en_attente_capacite { background: var(--e-alerte-doux); color: var(--e-alerte); }
.esp .badge.erreur { background: var(--e-refus-doux); color: var(--e-refus); }
.esp .badge.provisionnement::before, .esp .badge.suppression::before { animation: esp-pouls 1.2s infinite; }
@keyframes esp-pouls { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .esp .badge::before { animation: none !important; } }

/* --- détail --- */
.esp-detail { background: var(--e-fond); border: 1px solid var(--e-trait); border-radius: var(--e-rayon); min-width: 0; }
.esp-detail.nouvelle { box-shadow: 0 0 0 3px var(--e-accent-doux); border-color: var(--e-accent); }
.esp-d-tete { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--e-trait); }
.esp-d-tete h2 { font-size: 1.2rem; margin: 0; overflow-wrap: anywhere; }
.esp-d-tete h2:focus { outline: none; }
.esp-d-tete .esp-ref { margin-left: auto; color: var(--e-doux); font-size: .82rem; font-weight: 650; }
.esp-bloc { padding: 1rem 1.2rem; border-bottom: 1px solid var(--e-trait); }
.esp-bloc:last-child { border-bottom: 0; }
.esp-bloc h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--e-doux); margin: 0 0 .7rem; font-weight: 750; }
.esp-bloc p { margin: 0 0 .6rem; }
.esp-bloc p:last-child { margin-bottom: 0; }

.esp-tache { display: grid; gap: .45rem; }
.esp-tache-ligne { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; font-size: .9rem; }
.esp-tache-ligne strong { color: var(--e-encre); }
.esp-tache-ligne span { color: var(--e-doux); font-weight: 650; font-variant-numeric: tabular-nums; }
.esp-barre { height: 6px; background: var(--e-fond-appui); border-radius: 999px; overflow: hidden; }
.esp-barre > i { display: block; height: 100%; background: var(--e-accent); transition: width .4s; }

.esp-attente { background: var(--e-alerte-doux); color: var(--e-alerte); border-radius: 8px; padding: .7rem .9rem; font-size: .92rem; }
.esp-info { background: var(--e-accent-doux); color: var(--e-accent-fonce); border-radius: 8px; padding: .7rem .9rem; font-size: .92rem; }
.esp-erreur { background: var(--e-refus-doux); color: var(--e-refus); border-radius: 8px; padding: .7rem .9rem; font-size: .92rem; }

/* tableau des caractéristiques */
.esp-specs { margin: 0; display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr); font-size: .92rem; }
.esp-specs dt, .esp-specs dd { padding: .5rem 0; border-top: 1px solid var(--e-trait); margin: 0; }
.esp-specs dt:first-of-type, .esp-specs dt:first-of-type + dd { border-top: 0; }
.esp-specs dt { color: var(--e-doux); font-weight: 600; padding-right: .8rem; }
.esp-specs dd { color: var(--e-encre); font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.esp-specs dd small { display: block; color: var(--e-doux); font-weight: 600; font-size: .8rem; }
.esp-specs .esp-na { color: var(--e-doux); font-weight: 600; }
@media (max-width: 520px) {
  .esp-specs { grid-template-columns: minmax(0, 1fr); }
  .esp-specs dt { padding-bottom: 0; }
  .esp-specs dd { border-top: 0; padding-top: .1rem; }
}
.esp .mono { font-family: ui-monospace, Consolas, "Cascadia Mono", monospace; font-size: .86rem; }

.esp-copie { display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; }
.esp-copie .mono { overflow-wrap: anywhere; }
.esp-copier { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; flex: none;
  border: 1px solid var(--e-trait-fort); background: var(--e-fond); color: var(--e-texte); cursor: pointer; padding: 0; }
.esp-copier:hover { border-color: var(--e-accent); color: var(--e-accent-fonce); }
.esp-copier .icone { width: 15px; height: 15px; }
.esp-copier.ok { color: var(--e-ok); border-color: var(--e-ok); }

/* actions */
.esp-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.esp .bouton .icone { width: 16px; height: 16px; }
.esp .bouton:focus-visible, .esp-copier:focus-visible, .page-espace .compte a:focus-visible,
.page-espace .compte button:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 2px; }
.esp .bouton:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* sauvegarde */
.esp-sauv-tete { display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; margin-bottom: .6rem; }
.esp-sauv-tete h3 { margin: 0; }
.esp-sauv { list-style: none; margin: 0; padding: 0; border: 1px solid var(--e-trait); border-radius: 8px; }
.esp-sauv li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .75rem; font-size: .9rem; }
.esp-sauv li + li { border-top: 1px solid var(--e-trait); }
.esp-sauv time { color: var(--e-encre); font-weight: 650; font-variant-numeric: tabular-nums; }
.esp-sans { color: var(--e-doux); font-size: .9rem; }

@media (max-width: 640px) {
  .page-espace .entete .large { flex-wrap: wrap; row-gap: .3rem; padding: .5rem 0; }
  .page-espace .compte { width: 100%; justify-content: flex-start; }
}
@media (max-width: 480px) {
  .esp-d-tete, .esp-bloc { padding: .9rem; }
  .esp-actions .bouton { flex: 1 1 auto; }
  .page-espace .compte { gap: .6rem; font-size: .82rem; }
  .page-espace .compte .compte-nom { max-width: 14ch; }
}

/* Console : réglages du port et du mot de passe */
.esp-console-reglages { display: grid; gap: .6rem; margin-top: .9rem; }
.esp-console-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.esp-console-ligne label { color: var(--e-doux); font-weight: 600; min-width: 11rem; }
.esp-champ { font: inherit; padding: .4rem .6rem; border: 1px solid var(--e-trait); border-radius: 8px;
  background: transparent; color: var(--e-encre); width: 12rem; max-width: 100%; }
.esp-champ[type="number"] { width: 7.5rem; }
@media (max-width: 560px) { .esp-console-ligne label { min-width: 100%; } }