/* Parc Atlas — écran d'accueil. Police du téléphone, aucune ressource externe. Sombre par défaut, clair selon le système ou le bouton. */
:root {
  --fond: #09090b; --ink: #f5f5f7; --doux: #8b8b93; --verre: rgba(255, 255, 255, .06); --trait: rgba(255, 255, 255, .09); --pouce: #2c2c31;
  --halo-r: rgba(229, 55, 43, .16); --halo-b: rgba(47, 109, 246, .14); --ombre-ic: 0 6px 18px rgba(0, 0, 0, .45), inset 0 0 0 .5px rgba(255, 255, 255, .12);
  --f-bg: #141416; --f-ink: #f5f5f7; --f-doux: #8b8b93; --f-trait: rgba(255, 255, 255, .1); --f-tuile: #1f1f23;
  --u-retard: #ff453a; --u-jour: #ff9f0a; --u-veille: #ffd60a; --u-bientot: #64d2ff; --u-remplir: #ffb340;
  --t-veille: #ffd60a; --t-bientot: #64d2ff;
  --hetzner: #e5372b; --anubiz: #2f6df6; --ok: #30d158;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fond: #f2f2f6; --ink: #111113; --doux: #6e6e76; --verre: rgba(0, 0, 0, .05); --trait: rgba(0, 0, 0, .07); --pouce: #ffffff;
    --halo-r: rgba(229, 55, 43, .10); --halo-b: rgba(47, 109, 246, .09); --ombre-ic: 0 6px 16px rgba(0, 0, 0, .12), inset 0 0 0 .5px rgba(0, 0, 0, .08);
    --f-bg: #ffffff; --f-ink: #111113; --f-doux: #6e6e76; --f-trait: rgba(0, 0, 0, .08); --f-tuile: #f2f2f6;
    --t-veille: #b58900; --t-bientot: #0a84c6; --ok: #248a3d;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --fond: #f2f2f6; --ink: #111113; --doux: #6e6e76; --verre: rgba(0, 0, 0, .05); --trait: rgba(0, 0, 0, .07); --pouce: #ffffff;
  --halo-r: rgba(229, 55, 43, .10); --halo-b: rgba(47, 109, 246, .09); --ombre-ic: 0 6px 16px rgba(0, 0, 0, .12), inset 0 0 0 .5px rgba(0, 0, 0, .08);
  --f-bg: #ffffff; --f-ink: #111113; --f-doux: #6e6e76; --f-trait: rgba(0, 0, 0, .08); --f-tuile: #f2f2f6;
  --t-veille: #b58900; --t-bientot: #0a84c6; --ok: #248a3d;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--fond); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: -20% -10% auto; height: 70vh; pointer-events: none; filter: blur(10px);
  background: radial-gradient(50% 50% at 30% 30%, var(--halo-r), transparent 70%), radial-gradient(45% 45% at 80% 20%, var(--halo-b), transparent 70%); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 10px; }
[hidden] { display: none !important; }

.page { position: relative; max-width: 980px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 20px max(60px, env(safe-area-inset-bottom)); }

/* En-tête */
.tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sur { margin: 0; font-size: 13px; font-weight: 600; color: var(--doux); letter-spacing: .02em; }
.sur.vieux { color: var(--u-retard); }
.mrr { margin: 6px 0 0; font-size: 56px; font-weight: 750; letter-spacing: -.055em; line-height: 1; font-variant-numeric: tabular-nums; }
.mrr small { font-size: 20px; font-weight: 600; color: var(--doux); letter-spacing: -.02em; margin-left: 4px; }
.resume { margin: 10px 0 0; color: var(--doux); font-size: 15px; }
.resume b { color: var(--ink); font-weight: 600; }
.actions { display: flex; gap: 8px; margin-top: 2px; }
.rond { width: 40px; height: 40px; border-radius: 50%; background: var(--verre); display: grid; place-items: center; }
.rond svg { width: 18px; height: 18px; stroke: var(--ink); }
.rond .plein { fill: var(--ink); stroke: none; }

/* Ce qui demande d'agir */
.signaux { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 22px -20px 0; padding: 0 20px; }
.signaux::-webkit-scrollbar { display: none; }
.signal { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 18px; background: var(--verre); border: .5px solid var(--trait); text-align: left; }
.signal .lg { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
.signal strong { display: block; font-size: 14px; font-weight: 600; }
.signal span { display: block; font-size: 12.5px; color: var(--doux); }
.signal.retard span { color: var(--u-retard); } .signal.jour span { color: var(--u-jour); } .signal.veille span { color: var(--t-veille); }
.signal.bientot span { color: var(--t-bientot); } .signal.remplir span { color: var(--u-remplir); }

.recherche { margin-top: 18px; display: none; }
.recherche.ouverte { display: block; }
.recherche input { width: 100%; height: 42px; border-radius: 12px; border: 0; background: var(--verre); color: var(--ink); padding: 0 14px; font: inherit; font-size: 16px; outline: none; }

/* Choix du serveur */
.seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0 8px; padding: 3px; border-radius: 12px; background: var(--verre); max-width: 360px; }
.seg button { position: relative; z-index: 1; height: 32px; font-size: 14px; font-weight: 600; color: var(--doux); transition: color .25s; }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg .pouce { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 9px; background: var(--pouce); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: transform .4s cubic-bezier(.2, .9, .25, 1); }
.seg .pouce.p1 { transform: translateX(100%); }
.seg .pouce.p2 { transform: translateX(200%); }

/* Les icônes, rangées par serveur */
.zone { margin-top: 26px; }
.zone h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 13px; font-weight: 600; color: var(--doux); }
.srv { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; color: #fff; }
.zone h2 .srv { height: 20px; font-size: 11px; }
.srv-hetzner { background: var(--hetzner); }
.srv-anubiz { background: var(--anubiz); }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 24px 10px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .grille { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 30px 16px; } }
.icone { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .25s cubic-bezier(.2, .9, .25, 1); }
.icone:active { transform: scale(.92); }
.icone-boite { position: relative; }
.icone .lg { width: 68px; height: 68px; border-radius: 19px; box-shadow: var(--ombre-ic); font-size: 22px; transition: transform .3s cubic-bezier(.2, .9, .25, 1); }
@media (min-width: 720px) { .icone .lg { width: 84px; height: 84px; border-radius: 23px; } }
@media (hover: hover) { .icone:hover .lg { transform: translateY(-3px); } }
.icone .nom { font-size: 12.5px; font-weight: 500; line-height: 1.25; max-width: 100%; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.icone .meta { margin-top: -5px; }
.icone .meta { font-size: 11px; color: var(--doux); }
.icone.demo .lg { filter: saturate(.8); }
.icone.remplir .lg { box-shadow: 0 0 0 2px var(--fond), 0 0 0 3.5px var(--u-remplir); }
.pastille-u { position: absolute; top: -7px; right: -9px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center; color: #000; box-shadow: 0 0 0 2.5px var(--fond); z-index: 2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pastille-u.retard { background: var(--u-retard); color: #fff; } .pastille-u.jour { background: var(--u-jour); } .pastille-u.veille { background: var(--u-veille); }
.pastille-u.bientot { background: var(--u-bientot); } .pastille-u.remplir { background: var(--u-remplir); } .pastille-u.manque { background: #48484f; color: #fff; }
.vide-msg { color: var(--doux); text-align: center; padding: 40px 0; }

/* Logo */
.lg { position: relative; display: grid; place-items: center; overflow: hidden; flex: none; font-weight: 650; letter-spacing: -.02em; background: #ffffff; }
.lg img { width: 100%; height: 100%; object-fit: contain; padding: 9%; }
.lg.vide { background: linear-gradient(145deg, #3a3a3e, #1f1f22); color: rgba(255, 255, 255, .85); }

/* La fiche : monte du bas sur téléphone, au centre sur ordi */
.voile { position: fixed; inset: 0; background: rgba(0, 0, 0, .42); opacity: 0; pointer-events: none; transition: opacity .35s ease; z-index: 40; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.feuille { position: fixed; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; background: var(--f-bg); color: var(--f-ink);
  border-radius: 28px 28px 0 0; transform: translateY(105%); transition: transform .5s cubic-bezier(.2, .9, .25, 1), visibility 0s .5s; z-index: 41; box-shadow: 0 -20px 60px rgba(0, 0, 0, .25);
  padding-bottom: max(24px, env(safe-area-inset-bottom)); visibility: hidden; }
.feuille.tire { transition: none; }
.fiche-ouverte .voile { opacity: 1; pointer-events: auto; }
.fiche-ouverte .feuille { transform: translateY(0); visibility: visible; transition: transform .5s cubic-bezier(.2, .9, .25, 1); }
.fiche-ouverte { overflow: hidden; }
@media (min-width: 720px) {
  .feuille { left: 50%; right: auto; bottom: 50%; width: 460px; border-radius: 28px; transform: translate(-50%, 60%) scale(.96); opacity: 0;
    transition: transform .45s cubic-bezier(.2, .9, .25, 1), opacity .25s ease, visibility 0s .45s; }
  .fiche-ouverte .feuille { transform: translate(-50%, 50%); opacity: 1; transition: transform .45s cubic-bezier(.2, .9, .25, 1), opacity .25s ease; }
  .poignee { visibility: hidden; }
}
.f-tete { --marque: var(--f-tuile); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 20px 22px; touch-action: none;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent, var(--marque)) 28%, var(--marque)) 0%, var(--marque) 60%); color: var(--f-ink); }
.f-tete.sur-sombre { color: #f5f5f7; }
.f-tete.sur-clair { color: #111; }
.poignee { width: 38px; height: 5px; border-radius: 3px; background: currentColor; opacity: .25; margin: 0 auto 18px; }
.fermer { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(128, 128, 128, .22); display: grid; place-items: center; font-size: 14px; }
.f-logo { width: 92px; height: 92px; border-radius: 26px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 0 0 0 .5px rgba(128, 128, 128, .2); font-size: 30px; }
.f-nom { margin: 14px 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
.f-sous { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 14px; opacity: .9; }
.f-corps { padding: 18px 20px 0; }
.f-remplir { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--u-remplir) 16%, transparent); font-size: 14px; line-height: 1.4; }
.f-tuiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }
.tuile { background: var(--f-tuile); border-radius: 16px; padding: 12px 12px 11px; min-width: 0; }
.t-val { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-lib { display: block; font-size: 12px; color: var(--f-doux); margin-top: 2px; }
.tuile.u-retard .t-val, .tuile.u-retard .t-lib { color: var(--u-retard); }
.tuile.u-jour .t-val, .tuile.u-jour .t-lib { color: var(--u-jour); }
.tuile.u-veille .t-lib, .tuile.u-bientot .t-lib { color: var(--f-ink); font-weight: 600; }
.tuile.u-manque .t-val { color: var(--f-doux); }
.f-liste { margin: 0; }
.f-liste div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 11px 0; border-top: .5px solid var(--f-trait); font-size: 14.5px; }
.f-liste div:first-child { border-top: 0; }
.f-liste dt { color: var(--f-doux); }
.f-liste dd { margin: 0; overflow-wrap: anywhere; }
.pastilles { display: inline-flex; gap: 5px; margin-left: 8px; vertical-align: -3px; }
.pastilles i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(128, 128, 128, .5); }
.http-ok { color: var(--ok); font-weight: 600; }
.http-ko { color: var(--u-retard); font-weight: 600; }
.f-manque { margin: 12px 0 0; font-size: 13px; color: var(--f-doux); }

.entree { animation: entree .6s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes entree { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .entree { animation: none; } .seg .pouce, .feuille, .voile, .icone, .icone .lg { transition: none; } }

/* Pied : qui est connecté, et la sortie */
.pied { margin-top: 48px; text-align: center; font-size: 13px; color: var(--doux); }
.pied button { color: var(--doux); text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }

/* Écran de connexion */
.ecran-connexion { display: grid; place-items: center; min-height: 100svh; padding: 24px 20px max(24px, env(safe-area-inset-bottom)); }
.connexion { width: 100%; max-width: 340px; text-align: center; position: relative; }
.c-icone { width: 72px; height: 72px; border-radius: 20px; box-shadow: var(--ombre-ic); }
.connexion h1 { margin: 18px 0 6px; font-size: 30px; font-weight: 750; letter-spacing: -.04em; }
.c-sous { margin: 0 0 26px; color: var(--doux); font-size: 15px; line-height: 1.4; }
.champ { display: block; text-align: left; margin-bottom: 12px; }
.champ span { display: block; font-size: 12.5px; font-weight: 600; color: var(--doux); margin: 0 0 6px 4px; }
.champ input { width: 100%; height: 50px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); background: color-mix(in srgb, var(--ink) 8%, var(--fond)); color: var(--ink); padding: 0 16px; font: inherit; font-size: 17px; outline: none; transition: border-color .2s, background .2s; }
.champ input:focus { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.c-erreur { margin: 4px 0 10px; color: var(--u-retard); font-size: 14px; }
.c-bouton { width: 100%; height: 52px; margin-top: 8px; border-radius: 14px; background: var(--ink); color: var(--fond); font-size: 17px; font-weight: 650; letter-spacing: -.01em; transition: transform .15s, opacity .2s; }
.c-bouton:active { transform: scale(.98); }
.c-bouton:disabled { opacity: .5; }
.c-aide { margin: 18px 0 0; color: var(--doux); font-size: 13px; }