/* ============================================================================
   Sagittarius · L'espace en pleine page (version hub dynamique)
   À importer APRÈS sagittarius.css. Charte Kopo V1.4, tokens de shared.css.
   Toute la page est l'espace autour du trou noir : la nav, le HUD, le panneau
   d'observation et le tiroir « catalogue détaillé » flottent au-dessus.
   Aucun style inline (CSP stricte).
   ============================================================================ */

/* L'attribut hidden doit gagner contre les display:grid/flex des composants */
[hidden] { display: none !important; }

/* Aucun débordement horizontal, même transitoire (Kobot en transform) */
html { overflow-x: hidden; }

/* === Fond : gradient Encre (Nimbus → Vesper), variante Aurore pour Sgr B === */
body.space-body {
  background: linear-gradient(115deg, var(--nimbus) 0%, var(--vesper) 100%);
  min-height: 100vh;
  overflow: hidden;            /* l'espace ne défile pas */
  transition: background 1.5s ease; /* suit la durée du dézoom de scène (~2 s) */
}
/* Vue Voie lactée : espace profond, plus sombre, la galaxie ressort dessus */
body.space-body.scene-git {
  background: linear-gradient(115deg, #06080F 0%, var(--nimbus) 55%, var(--vesper) 100%);
}
body.space-body.mode-sheet { overflow: auto; } /* admin / connexion défilent */

#galaxyCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* mobile : suit la barre d'URL ; le JS fixe ensuite les px exacts */
  display: block;
  z-index: 0;
}

/* === Nav incluse dans l'espace ============================================ */
.nav-space {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(20, 26, 30, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(244, 249, 255, 0.08);
  color: var(--cumulus);
}
.nav-space .nav-logo { color: var(--cumulus); }
/* Liens en PILULES, même langage que les filtres de catégories du HUD.
   Le bloc est centré sur le VRAI milieu de l'écran (pas sur la colonne de
   grille, que le logo plus large que le badge décale visuellement). */
@media (min-width: 801px) {
  .nav-space > nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  /* Le menu sorti du flux, les actions (badge) héritent de la colonne
     centrale extensible : on les recolle au bord droit */
  .nav-space .nav-actions {
    grid-column: -2;
    justify-content: flex-end;
  }
}
.nav-space .nav-links { gap: 0.4rem; }
.nav-space .nav-links a {
  color: rgba(244, 249, 255, 0.82);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  opacity: 1;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.nav-space .nav-links a::after { display: none; } /* pas de soulignement du prototype */
.nav-space .nav-links a:hover {
  color: var(--cumulus);
  background: rgba(244, 249, 255, 0.06);
  border-color: rgba(188, 200, 210, 0.28);
}
.nav-space .nav-links a.active {
  color: var(--cirrus);
  background: color-mix(in srgb, var(--cirrus) 13%, transparent);
  border-color: color-mix(in srgb, var(--cirrus) 40%, transparent);
}
/* Burger : bouton verre dépoli, accent Cirrus quand le menu est ouvert */
.nav-space .nav-burger {
  border-color: rgba(244, 249, 255, 0.30);
  border-radius: 12px;
  background: rgba(244, 249, 255, 0.05);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.nav-space .nav-burger span { background: var(--cumulus); }
.nav-space .nav-burger:active { transform: scale(0.94); }
body.menu-open .nav-space .nav-burger {
  border-color: var(--cirrus);
  background: color-mix(in srgb, var(--cirrus) 14%, transparent);
}
body.menu-open .nav-space .nav-burger span { background: var(--cirrus); }
.nav-space .kopo-badge.badge-stratus {
  background: rgba(188, 200, 210, 0.18);
  color: var(--stratus);
}

/* === Menu mobile : l'espace continue dans le tiroir ====================== */
/* Le voile clair du prototype devient un ciel profond Nimbus → Vesper avec
   un halo Cirrus, et les liens entrent en cascade. */
.nav-mobile {
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--cirrus) 16%, transparent) 0%, color-mix(in srgb, var(--cirrus) 0%, transparent) 45%),
    radial-gradient(circle at 80% 90%, rgba(80, 74, 151, 0.35) 0%, rgba(80, 74, 151, 0) 55%),
    linear-gradient(165deg, rgba(8, 11, 17, 0.97) 0%, rgba(20, 26, 30, 0.97) 55%, rgba(35, 37, 93, 0.97) 100%);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  /* Padding symétrique (le prototype avait 6rem en haut / 3rem en bas) :
     le bloc de liens est centré au vrai milieu de l'écran */
  padding: 1.5rem;
}
.nav-mobile-links { gap: 1.6rem; }
.nav-mobile-links a {
  color: var(--cumulus);
  letter-spacing: -0.01em;
  position: relative;
  padding: 0.2rem 0.6rem;
}
/* Trait Cirrus sous le lien de la vue active, façon hud-label */
.nav-mobile-links a.active { color: var(--cirrus); }
.nav-mobile-links a.active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -8px;
  transform: translateX(-50%);
  width: 42px; height: 2px;
  border-radius: 2px;
  background: var(--cirrus);
  opacity: 0.8;
}
.nav-mobile-links a:hover,
.nav-mobile-links a:focus-visible { color: var(--cirrus); }
/* Entrée en cascade des liens à l'ouverture */
.nav-mobile .nav-mobile-links li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.35s var(--ease-out);
}
.nav-mobile.is-open .nav-mobile-links li { opacity: 1; transform: none; }
.nav-mobile.is-open .nav-mobile-links li:nth-child(1) { transition-delay: 0.05s; }
.nav-mobile.is-open .nav-mobile-links li:nth-child(2) { transition-delay: 0.12s; }
.nav-mobile.is-open .nav-mobile-links li:nth-child(3) { transition-delay: 0.19s; }
.nav-mobile.is-open .nav-mobile-links li:nth-child(4) { transition-delay: 0.26s; }

/* === HUD (titre au-dessus de l'espace) ==================================== */
.space-hud {
  position: fixed;
  top: 86px;
  left: clamp(1.25rem, 4vw, 3rem);
  z-index: 5;
  pointer-events: none;
}
.hud-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cirrus);
}
.hud-sub {
  margin-top: 0.55rem;
  max-width: 300px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--stratus);
}
.hud-label::after {
  content: '';
  display: block;
  width: 64px; height: 2px;
  background: var(--cirrus);
  border-radius: 2px;
  margin-top: 0.45rem;
  opacity: 0.7;
}

/* Catégories à gauche de l'espace : un clic estompe le reste de la galaxie */
.hud-cats {
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  pointer-events: auto;
}
.hud-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--stratus);
  background: rgba(20, 26, 30, 0.45);
  border: 1px solid rgba(188, 200, 210, 0.30);
  border-radius: 999px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.hud-cat svg { width: 13px; height: 13px; }
.hud-cat:hover { color: var(--cumulus); border-color: var(--cirrus); }
.hud-cat.is-active {
  color: var(--cirrus);
  border-color: var(--cirrus);
  background: color-mix(in srgb, var(--cirrus) 14%, transparent);
}
/* Pendant une observation, les filtres s'effacent : la carte centrée ne
   chevauche jamais les catégories, et on ne filtre pas en observant */
.hud-cats { transition: opacity 0.25s ease; }
body.observing .hud-cats { opacity: 0; pointer-events: none; }

/* Beaucoup de catégories : la colonne devient un déroulant compact, la
   space-card peut rester à gauche sans rien chevaucher. Même aspect que la
   colonne normale : les pilules se DÉROULENT du haut, sans bulle. */
.hud-cats-toggle { color: var(--cumulus); }
.hud-cats-chevron {
  width: 7px; height: 7px;
  margin-left: 0.1rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
.hud-cats-toggle[aria-expanded="true"] .hud-cats-chevron {
  transform: rotate(225deg) translate(-2px, -1px);
}
.hud-cats-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: max-height 0.28s var(--ease-out), opacity 0.2s ease,
    transform 0.28s var(--ease-out), visibility 0s 0.28s;
}
.hud-cats-panel.is-open {
  max-height: min(46vh, 380px);
  overflow-y: auto;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: max-height 0.28s var(--ease-out), opacity 0.2s ease,
    transform 0.28s var(--ease-out);
}
@media (max-width: 800px) {
  .hud-cats { display: none; } /* sur mobile, les chips du tiroir suffisent */
}

.space-hint {
  position: fixed;
  bottom: 1rem;
  left: clamp(1.25rem, 4vw, 3rem);
  /* Jamais sous la poignée du tiroir (centrée, ~90px de demi-largeur) :
     le texte s'arrête avant et passe sur deux lignes si besoin */
  right: calc(50% + 120px);
  z-index: 5;
  pointer-events: none;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: var(--stratus);
}

/* === Graphique de disponibilité (12 mois, 52 barres hebdo) ================ */
.avail-list { display: flex; flex-direction: column; gap: 0.7rem; }
.avail-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 0.8rem;
}
.avail-name {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.avail-name .led { flex-shrink: 0; }
/* Les 52 barres vivent dans une grille à pistes compressibles : le
   débordement est structurellement impossible, quelle que soit la largeur */
.avail-bars {
  display: grid;
  grid-template-columns: repeat(52, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.avail-bar {
  width: 100%;
  min-width: 0;
  height: 16px;
  border-radius: 1px;
}
/* Palette charte : Cirrus nominal, Aurore (mauve) dégradé, Sirocco incident */
.avail-bar.is-ok    { background: var(--cirrus); }
.avail-bar.is-warn  { background: var(--aurore); }
.avail-bar.is-bad   { background: var(--sirocco); }
.avail-bar.is-empty { background: var(--stratus-soft); }
.avail-pct {
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--nimbus);
  /* Largeur FIXE : chaque ligne est sa propre grille, sinon « 0.00% »
     (plus étroit que « 99.77% ») élargit sa piste de barres et décale
     la colonne — alignement identique sur toutes les lignes */
  min-width: 4.6em;
  text-align: right;
}
@media (max-width: 640px) {
  .avail-row { grid-template-columns: 1fr auto; }
  .avail-bars { grid-column: 1 / -1; order: 3; }
}

/* Case « Afficher » des dépôts Git (admin) */
.ai-check { display: inline-flex; align-items: center; flex-shrink: 0; }
.ai-check input { width: 16px; height: 16px; accent-color: var(--cirrus); cursor: pointer; }
.admin-item.is-disabled .ai-icon,
.admin-item.is-disabled .ai-body { opacity: 0.45; }

/* === Space-card (star map) ================================================ */
/* La space-card : carte blanche (Cumulus) posée sur l'espace, ouverte au
   clic sur une étoile ou une planète. Ni image, ni dégradé. */
.space-card {
  position: fixed;
  /* En bas à gauche : jamais sur le HUD (en haut à gauche), jamais sur le
     corps observé (cadré à droite par la caméra) */
  bottom: 3.4rem;
  left: clamp(1.25rem, 4vw, 3rem);
  width: min(400px, calc(100vw - 2.5rem));
  max-height: 56vh;
  overflow-y: auto;
  z-index: 20;
  background: var(--cumulus);
  border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 64px -24px rgba(4, 6, 11, 0.55);
  padding: 1.5rem 1.6rem;
  color: var(--nimbus);
  animation: obs-in 0.3s var(--ease-out);
}
@keyframes obs-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Écran assez haut : la carte se centre verticalement, l'espace respire */
@media (min-width: 801px) and (min-height: 720px) {
  .space-card {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    max-height: 74vh;
    animation-name: obs-in-c;
  }
}
@keyframes obs-in-c {
  from { opacity: 0; transform: translateY(-50%) translateX(-14px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
/* Bouton « quitter » : pastille sombre translucide posée SUR la cover (comme
   le bouton de l'aperçu d'édition), pour que l'image aille pleine largeur
   jusqu'au bord droit au lieu d'être entaillée par un carré blanc. */
.obs-close {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(4, 6, 11, 0.55);
  font-size: 0.8rem;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s ease;
}
.obs-close:hover { background: rgba(4, 6, 11, 0.78); }

/* Image téléversée affichée en bandeau, en haut de la carte, avant le kicker.
   Déborde le padding de la .space-card (1.5rem haut, 1.6rem côtés) pour coller
   aux bords et arrondir comme la carte. */
.obs-cover {
  display: block;
  width: calc(100% + 3.2rem);
  /* shared.css impose `img { max-width: 100% }`, ce qui rognait la cover de
     3.2rem à droite (bande blanche). On rétablit le débordement pleine largeur. */
  max-width: none;
  /* Mêmes valeurs que l'aperçu d'édition (.ie-cover.has-img) pour que la
     space-card publique soit identique au pixel près à l'aperçu. */
  margin: -1.5rem -1.6rem 0.85rem;
  max-height: 130px;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.obs-kicker {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cirrus);
}
.space-card h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0.3rem 0 0.5rem;
  padding-right: 2rem;
}
.obs-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
/* Accroche (sous-titre) — comme dans l'aperçu d'édition */
.obs-tagline {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-70);
  margin: -0.1rem 0 0.9rem;
  max-width: 60ch;
}
.obs-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 60ch;
  margin-bottom: 1rem;
}
.obs-section {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 1rem 0 0.5rem;
}
.obs-features { display: flex; flex-direction: column; gap: 0.45rem; }
.obs-features li {
  display: flex; gap: 0.55rem; align-items: flex-start;
  font-size: 0.85rem; line-height: 1.45;
  color: var(--ink-70);
}
.obs-features svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--cirrus); margin-top: 2px; }
.obs-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.1rem;
  font-size: 0.82rem;
}
.obs-meta dt { color: var(--ink-55); font-weight: 500; }
.obs-meta dd { margin: 0; min-width: 0; word-break: break-all; color: var(--nimbus); }
.obs-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-top: 1.2rem; }
.obs-list { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; }
.obs-list li { color: var(--ink-70); display: flex; gap: 0.5rem; align-items: baseline; }
.obs-list .led { flex-shrink: 0; }

/* === Poignée + tiroir du catalogue classique ============================== */
.drawer-handle {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50; /* au-dessus du tiroir : il sert aussi à le fermer */
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 9px 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cumulus);
  background: rgba(20, 26, 30, 0.60);
  border: 1px solid rgba(188, 200, 210, 0.35);
  border-radius: 999px;
  /* AUCUNE animation sur cette poignée : ni voyage de position, ni scale au
     clic (qui écrasait translateX(-50%) et la faisait sauter à droite), ni
     transitions — elle change d'état instantanément. */
}
.drawer-handle:hover { color: var(--cirrus); border-color: var(--cirrus); }
.drawer-chevron {
  width: 9px; height: 9px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg) translate(1px, 1px);
}
.drawer-handle[aria-expanded="true"] .drawer-chevron { transform: rotate(225deg) translate(2px, 2px); }
/* Tiroir ouvert : la poignée se pose sur son bord supérieur pour le fermer */
body.drawer-open .drawer-handle {
  bottom: calc(min(76vh, 760px) - 1.1rem);
  bottom: calc(min(76dvh, 760px) - 1.1rem);
  background: var(--nimbus);
}
/* Le menu mobile couvre tout : la poignée ne doit pas le transpercer */
body.menu-open .drawer-handle { display: none; }

.space-drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  height: min(76vh, 760px);
  height: min(76dvh, 760px);
  background: var(--page-bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -18px 60px -20px rgba(4, 6, 11, 0.8);
  animation: drawer-up 0.35s var(--ease-out);
}
@keyframes drawer-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.drawer-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 2rem clamp(1.25rem, 4vw, 3rem) 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  /* Le footer se cale en BAS du tiroir même quand le contenu est court
     (page vide : il flottait à mi-hauteur) */
  display: flex;
  flex-direction: column;
}
.drawer-scroll > #drawerServices,
.drawer-scroll > #drawerGit { margin-bottom: 2.5rem; }
.drawer-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--stratus-soft);
  font-size: 0.75rem;
  color: var(--ink-55);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Signature de l'éditeur : Kopo a conçu le logiciel, le reste du footer
   appartient à l'instance (clé footer_text de la personnalisation). */
.made-by {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  color: var(--ink-55);
}
.made-by .kobot-mini { width: 18px; height: 18px; }
/* À 18 px, l'œil du Kobot (7 % = 1.26 px) passe sous le pixel : taille fixe,
   calée sur la proportion de la nav (2 px paraissait trop gros) */
.made-by .kobot-mini::after { width: 1.5px; height: 1.5px; }
.made-by strong { color: var(--nimbus); font-weight: 700; letter-spacing: -0.01em; }
.made-by sup { font-size: 0.6em; opacity: 0.7; }

/* === Feuilles classiques (connexion / admin) ============================== */
.sheet { position: relative; z-index: 10; }
.sheet-inner {
  max-width: 1200px;
  margin: calc(64px + 1.5rem) auto 3rem;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 64px - 4.5rem);
  background: var(--page-bg);
  border-radius: var(--radius-lg);
  padding: 2rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
  box-shadow: 0 24px 80px -32px rgba(4, 6, 11, 0.85);
}
.sheet-narrow { max-width: 560px; }
.view-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.callout-spaced { margin-bottom: 2rem; max-width: 780px; }
.callout-narrow { max-width: 640px; }

.file-input {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.btn-file { position: relative; cursor: pointer; }
.btn-file:focus-within { outline: 2px solid var(--cirrus); outline-offset: 2px; }

/* === Widgets HTML du dashboard (module notes) ============================= */
.dash-widgets { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.dash-widgets:empty { display: none; }
.dash-widget {
  background: var(--cumulus);
  border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(20, 26, 30, 0.04);
  padding: 1.25rem 1.5rem;
}
.dash-widget h3 {
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-70);
  margin-bottom: 0.6rem;
}
.dash-widget p { font-size: 0.88rem; color: var(--ink-70); line-height: 1.55; max-width: 60ch; }
.dash-widget p + p { margin-top: 0.5rem; }

/* === État vide · premier démarrage (dans le tiroir) ======================= */
.first-run {
  padding: 3rem 1rem 3.5rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 0.85rem;
}
.first-run h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; }
.first-run p { font-size: 0.95rem; color: var(--ink-70); max-width: 46ch; line-height: 1.55; }
.first-run .btn { margin-top: 0.75rem; }

/* === Vue connexion ========================================================= */
.login-card { max-width: 420px; }
.login-card .callout { margin-top: 1rem; }

/* === Admin ================================================================= */
.admin-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
/* Onglets de l'admin : un espace de travail par tâche. Barre collante sous
   la nav pour changer de section sans remonter la page. */
.admin-tabs {
  position: sticky;
  top: 64px;
  z-index: 5;
  display: flex;
  gap: 0.35rem;
  margin: 0 0 1.75rem;
  padding: 0.5rem 0;
  background: var(--page-bg);
  border-bottom: 1px solid var(--stratus-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-tab {
  flex-shrink: 0;
  padding: 0.5rem 1.05rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-55);
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.admin-tab:hover { color: var(--nimbus); background: rgba(8, 12, 20, 0.05); }
.admin-tab:active { transform: scale(0.96); }
.admin-tab.is-active {
  color: var(--cirrus);
  background: color-mix(in srgb, var(--cirrus) 12%, transparent);
}
/* Entrée d'un panneau : les blocs se révèlent en cascade (un seul moment
   orchestré vaut mieux que des micro-effets éparpillés) */
.admin-panel { margin-bottom: 2rem; }
.admin-panel > * {
  animation: apanel-in 0.34s var(--ease-out) backwards;
}
.admin-panel > *:nth-child(2) { animation-delay: 0.05s; }
.admin-panel > *:nth-child(3) { animation-delay: 0.1s; }
@keyframes apanel-in {
  from { opacity: 0; transform: translateY(10px); }
}
/* Carte seule dans un panneau : largeur de lecture, pas de colonne fantôme */
.admin-single { max-width: 760px; }
/* Cartes empilées d'un panneau (onglet Compte) : de l'air entre elles, une
   ombre douce pour qu'elles se détachent du fond au lieu de se coller. */
.admin-panel .form-card { box-shadow: 0 1px 2px rgba(16, 20, 31, 0.04); }
.admin-panel .form-card + .form-card { margin-top: 1.25rem; }
.admin-layout { margin-bottom: 1rem; }
.admin-tab svg { width: 14px; height: 14px; margin-right: 0.4rem; vertical-align: -2px; }

/* Le Kobot guide chaque onglet : une astuce courte, ton Aurore (charte) */
.kopo-tip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
  padding: 0.7rem 1rem;
  background: rgba(80, 74, 151, 0.06);
  border-left: 3px solid var(--aurore);
  border-radius: var(--radius-sm);
}
.kopo-tip .kobot-mini { width: 28px; height: 28px; }
.kopo-tip p { font-size: 0.85rem; color: var(--ink-70); line-height: 1.45; text-wrap: pretty; }

/* Cartes radio : choisir en regardant (type et source d'une page) */
.radio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.radio-card { position: relative; display: block; cursor: pointer; }
.radio-card input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.radio-card .rc-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-sm);
  background: var(--cumulus);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.radio-card:hover .rc-body { border-color: var(--cirrus); }
.radio-card input:checked + .rc-body {
  border-color: var(--cirrus);
  background: color-mix(in srgb, var(--cirrus) 10%, transparent);
  box-shadow: inset 0 0 0 1px var(--cirrus);
}
.radio-card input:focus-visible + .rc-body {
  outline: 2px solid var(--cirrus);
  outline-offset: 2px;
}
.radio-card input:disabled + .rc-body { opacity: 0.5; cursor: not-allowed; }
.radio-card input:disabled:checked + .rc-body { opacity: 0.75; }
.rc-icon { width: 48px; height: 24px; color: var(--vesper); }
.radio-card input:checked + .rc-body .rc-icon { color: var(--cirrus); }
.rc-title { font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em; }
.rc-desc { font-size: 0.76rem; color: var(--ink-55); line-height: 1.4; text-wrap: pretty; }
@media (max-width: 640px) {
  .radio-cards { grid-template-columns: 1fr; }
}

/* Barre de filtre de la liste des services (recherche + page) */
.admin-filter {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1rem;
}
.admin-filter .search-wrap { flex: 1; min-width: 0; }
.admin-filter .ai-select {
  flex-shrink: 0;
  padding: 0.5rem 0.6rem;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--nimbus);
  background: var(--cumulus);
  border: 1px solid var(--stratus);
  border-radius: var(--radius-sm);
}
/* Sous-titre de groupe (une page) dans la liste des services */
.ai-group {
  margin: 1rem 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.ai-group:first-child { margin-top: 0; }
/* Bouton d'action d'un état vide (mène à l'onglet qui débloque) */
.admin-empty-cta { margin-top: 0.75rem; }
.admin-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.admin-list-spaced { margin-top: 1.25rem; }
.admin-item .ai-badge { flex-shrink: 0; }
.admin-item .ai-select {
  flex-shrink: 0;
  padding: 0.4rem 0.55rem;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--nimbus);
  background: var(--cumulus);
  border: 1px solid var(--stratus);
  border-radius: var(--radius-sm);
}
.admin-item .ai-select:focus { outline: none; border-color: var(--cirrus); }

/* === Admin · pages ======================================================== */
/* Avertissement souple : une page Étoiles dépasse les ~20 éléments
   (encre Haboob, la même que badge-haboob) */
.ai-warn { margin-top: 0.3rem; font-size: 0.75rem; color: #8a5a2b; }
/* Libellé au-dessus d'une case à cocher : même rendu que les <label> */
.form-field .field-label {
  display: block;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-70);
  margin-bottom: 0.35rem;
}
.form-field .check-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: var(--nimbus);
  cursor: pointer; padding: 0.45rem 0; margin-bottom: 0;
}
.check-label input { width: 16px; height: 16px; accent-color: var(--cirrus); cursor: pointer; }
/* Titre de carte + sélecteur de page git sur la même ligne */
.card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card-head-row .ai-select {
  padding: 0.4rem 0.55rem;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--nimbus);
  background: var(--cumulus);
  border: 1px solid var(--stratus);
  border-radius: var(--radius-sm);
}

/* Sous-titre d'aide sous le titre d'un formulaire */
.form-step {
  margin: -0.75rem 0 1.25rem;
  font-size: 0.8rem;
  color: var(--ink-55);
}

/* === Sections repliables du formulaire d'ajout =========================== */
.adv-disclosure {
  border-top: 1px solid var(--stratus-soft);
  margin-top: 1rem;
  padding-top: 0.25rem;
}
.adv-disclosure > summary {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 0;
  list-style: none;
  cursor: pointer;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--nimbus);
  user-select: none;
}
.adv-disclosure > summary::-webkit-details-marker { display: none; }
.adv-disclosure > summary:hover { color: var(--cirrus); }
.adv-chevron {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s var(--ease-out);
  flex-shrink: 0;
}
.adv-disclosure[open] > summary .adv-chevron { transform: rotate(45deg); }
.adv-disclosure[open] > summary { color: var(--cirrus); }
.adv-disclosure > .form-grid { padding: 0.35rem 0 1rem; }

/* === Aperçu en direct de la personnalisation ============================= */
.settings-preview {
  margin-bottom: 1.5rem;
  border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(150deg, var(--nimbus) 0%, var(--vesper) 100%);
  color: var(--cumulus);
}
.sp-nav {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(244, 249, 255, 0.10);
  background: rgba(20, 26, 30, 0.45);
}
.sp-logo {
  width: 22px; height: 22px; border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 50% 50%, var(--cirrus) 0 30%, var(--vesper) 32% 60%, var(--cumulus) 62% 100%);
}
.sp-title { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }
.sp-badge {
  margin-left: auto;
  font-size: 0.68rem; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(188, 200, 210, 0.18);
  color: var(--stratus);
  white-space: nowrap;
  max-width: 50%; overflow: hidden; text-overflow: ellipsis;
}
.sp-body { padding: 1.1rem 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.sp-eyebrow {
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cirrus);
}
.sp-subtitle { font-size: 0.85rem; color: rgba(244, 249, 255, 0.78); line-height: 1.4; }
.sp-footer {
  padding: 0.6rem 1rem;
  font-size: 0.68rem;
  color: rgba(244, 249, 255, 0.5);
  border-top: 1px solid rgba(244, 249, 255, 0.08);
}

/* === Modules & widgets (admin) ============================================ */
.module-list { display: flex; flex-direction: column; gap: 0.75rem; }
.module-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-md);
}
.module-item .mi-body { flex: 1; min-width: 0; }
.module-item .mi-name { font-size: 0.9rem; font-weight: 600; }
.module-item .mi-desc { font-size: 0.78rem; color: var(--ink-70); line-height: 1.45; }

.widget-list { display: flex; flex-direction: column; gap: 1rem; }
.widget-item {
  border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
}
.widget-item .wi-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.widget-item .wi-name { font-size: 0.9rem; font-weight: 600; flex: 1; min-width: 0; }
.widget-item .wi-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.widget-form { margin-top: 1rem; }
.widget-form .form-actions { margin-top: 1rem; }

/* === Utilitaires (ex-styles inline du prototype) ========================== */
.g-badge { margin-left: auto; }
.d-block-gap { margin-top: 0.6rem; }
.muted-note-spaced { margin-bottom: 1rem; }
.form-actions-flush { margin-top: 0; }

/* === Responsive ============================================================ */
@media (max-width: 800px) {
  /* Nav : burger à GAUCHE, logo centré, colonne fantôme à droite en balance */
  .nav-space { grid-template-columns: 40px 1fr 40px; }
  .nav-space .nav-burger { grid-row: 1; grid-column: 1; justify-self: start; }
  .nav-space .nav-logo { grid-row: 1; grid-column: 2; justify-self: center; }

  .space-hud { top: 76px; max-width: 70vw; }
  .space-hint { display: none; }

  /* La space-card se pose EN BAS, CENTRÉE, au-dessus de la poignée du tiroir */
  .space-card {
    top: auto;
    bottom: 4.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 1.8rem));
    max-height: 46vh;
    padding: 1.1rem 1.2rem;
  }
  @keyframes obs-in {
    from { opacity: 0; transform: translateX(-50%) translateY(14px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  .space-drawer {
    height: min(82vh, 760px);
    height: min(82dvh, 760px);
  }
  /* La poignée se cale sur la VRAIE hauteur du tiroir mobile (82dvh, pas
     76vh) : elle se posait au milieu du contenu sur téléphone */
  body.drawer-open .drawer-handle {
    bottom: calc(min(82vh, 760px) - 1.1rem);
    bottom: calc(min(82dvh, 760px) - 1.1rem);
  }
  .sheet-inner { margin-top: calc(64px + 0.75rem); border-radius: var(--radius-md); }
}


/* === Admin v2 · cartes de pages =========================================== */
/* Chaque page est une carte-accordéon : en-tête toujours visible, corps en
   trois zones (menu des éléments · éditeur · modules et catégories). */
.page-cards { display: flex; flex-direction: column; gap: 0.9rem; }
.page-card {
  background: var(--cumulus);
  border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(20, 26, 30, 0.04);
  overflow: hidden;
}
.page-card.is-open { border-color: color-mix(in srgb, var(--cirrus) 45%, transparent); }
.pc-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.85rem 0.35rem 0.35rem;
}
.pc-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.6rem;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.pc-toggle:hover { background: rgba(8, 12, 20, 0.04); }
.pc-chevron {
  width: 7px; height: 7px;
  flex-shrink: 0;
  border-right: 1.5px solid var(--ink-55);
  border-bottom: 1.5px solid var(--ink-55);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
.page-card.is-open .pc-chevron { transform: rotate(45deg); }
.pc-name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-meta {
  font-size: 0.74rem;
  color: var(--ink-55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-actions { display: flex; gap: 0.3rem; flex-shrink: 0; }
.pc-warn { margin: 0 1rem 0.6rem; }
/* Corps de carte BLANC (variante « sections encadrées ») : fini le gris sur
   gris — ce sont les GROUPES de tuiles qui portent le panneau gris. */
.pc-body {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 1.25rem;
  padding: 1rem;
  border-top: 1px solid var(--stratus-soft);
  background: var(--cumulus);
}
.pc-body > * { min-width: 0; }
@media (max-width: 980px) {
  .pc-body { grid-template-columns: 1fr; }
}

/* === Scène d'édition : aperçu vivant en tuiles ============================ */
.pc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem;
  /* Tuiles de hauteur égale par rangée : les badges s'alignent même quand les
     accroches ont des longueurs différentes. */
  align-items: stretch;
}

/* Variante « corps blanc » : toute la carte est blanche (zone des éléments
   comprise), les tuiles se délimitent par leur fin liséré. */
/* Sous-titre de catégorie dans la scène d'édition */
.pc-cat-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 1.2rem 0 0.45rem;
}
.pc-cat-head:first-child { margin-top: 0; }
/* Zone « Ajouter » détachée des catégories du dessus (sinon ça paraît collé). */
.pc-tiles-add { margin-top: 1.5rem; }
/* Tuile d'aperçu (proche de la carte publique) */
.pc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem;
  text-align: left;
  background: var(--cumulus);
  border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.pc-tile:hover {
  border-color: var(--cirrus);
  box-shadow: 0 1px 2px rgba(20, 26, 30, 0.05), 0 10px 24px -16px color-mix(in srgb, var(--cirrus) 60%, transparent);
  transform: translateY(-2px);
}
.pc-tile:focus-visible { outline: 2px solid var(--cirrus); outline-offset: 2px; }
.pc-tile.is-off { opacity: 0.55; }
.pct-visual {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--brume, #eef2f6);
  border: 1px solid var(--stratus-soft);
  color: var(--vesper);
  overflow: hidden;
}
.pct-visual img { width: 100%; height: 100%; object-fit: cover; }
.pct-name { font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; }
.pct-tag {
  font-size: 0.78rem; color: var(--ink-55); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Dernière ligne de la tuile (statut ou hôte) épinglée en bas : alignée d'une
   tuile à l'autre quelle que soit la hauteur du contenu au-dessus. */
.pct-badge { align-self: flex-start; margin-top: auto; }
.pct-host { margin-top: auto; }
.pct-del {
  position: absolute; top: 0.45rem; right: 0.45rem;
  opacity: 0; transition: opacity 0.15s ease;
}
.pc-tile:hover .pct-del, .pct-del:focus-visible { opacity: 1; }
/* Tuile pointillée « Ajouter » */
.pc-add-tile {
  align-items: center;
  justify-content: center;
  min-height: 132px;
  gap: 0.5rem;
  color: var(--ink-55);
  background: transparent;
  border: 1px dashed var(--stratus);
  text-align: center;
}
.pc-add-tile:hover {
  color: var(--cirrus); border-color: var(--cirrus); border-style: dashed;
  background: color-mix(in srgb, var(--cirrus) 6%, transparent);
  transform: none; box-shadow: none;
}
.pct-add-label { font-size: 0.85rem; font-weight: 600; }
.pc-empty-note { grid-column: 1 / -1; }

/* Tuile en cours d'édition : occupe toute la largeur, aperçu vivant + form */
.pc-tile.editing {
  grid-column: 1 / -1;
  cursor: default;
  border-color: var(--cirrus);
  box-shadow: 0 1px 2px rgba(20, 26, 30, 0.05), 0 14px 32px -18px color-mix(in srgb, var(--cirrus) 55%, transparent);
  transform: none;
}
.pct-live {
  display: flex; align-items: center; gap: 0.8rem;
  padding-bottom: 0.85rem; margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--stratus-soft);
}
.pct-live .pct-visual { width: 52px; height: 52px; flex-shrink: 0; }
.pct-live .pct-name { font-size: 1rem; }
.pct-form-host .form-card { box-shadow: none; border: 0; padding: 0; background: transparent; }
.pct-form-host #adminForm { background: transparent; }
/* Bouton Enregistrer toujours accessible : la barre d'actions colle en bas */
.pct-form-host .form-actions,
.pc-tile.editing .pct-foot {
  position: sticky;
  bottom: 0;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0.5rem -0.9rem -0.9rem;
  padding: 0.75rem 0.9rem;
  background: linear-gradient(to top, var(--cumulus) 70%, transparent);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* === Pop-up d'édition d'élément : aperçu « vue espace » ==================== */
/* Éditeur : hauteur DÉFINIE (pas seulement max) pour que la scène remplisse
   l'écran — la space-card a alors de la place et scrolle beaucoup moins. */
.modal-card.modal-editor {
  width: min(960px, 100%);
  height: min(94vh, 880px);
  max-height: min(94vh, 880px);
}
.modal-editor .modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.modal-editor .item-editor { flex: 1; min-height: 0; }
.modal-editor .modal-body #formTitle { display: none; } /* titre déjà en en-tête */
/* #adminForm = entrepôt de valeurs caché. Sauvegarde auto → plus de barre
   d'actions (ni Enregistrer ni Annuler) ; on ferme par la croix / le voile. */
.modal-editor .pct-form-host #adminForm > * { display: none; }
.modal-editor .pct-form-host .form-actions { display: none; }
/* Barre d'actions collée au bas du corps de modale (padding 1.25rem) */
.modal-body .pct-form-host .form-actions {
  margin: 0.6rem -1.25rem -1.25rem;
  padding: 0.85rem 1.25rem;
  gap: 0.9rem;
}
.item-editor { display: flex; flex-direction: column; gap: 1rem; }
/* Vraie vue espace : la galaxie (moteur) remplit toute la scène ; la space-card
   éditable FLOTTE par-dessus, à gauche — exactement comme quand on clique sur
   une carte. Pas deux colonnes. */
.ie-stage {
  position: relative;
  flex: 1;            /* prend toute la hauteur dispo de la modale */
  min-height: 420px;
  border-radius: var(--radius-md);
  border: 1px solid var(--stratus-soft);
  background: linear-gradient(115deg, var(--nimbus) 0%, var(--vesper) 100%);
  overflow: hidden;
}
/* Le moteur occupe TOUTE la scène (canvas transparent par-dessus le dégradé). */
.ie-right { position: absolute; inset: 0; }
.ie-node { width: 100%; height: 100%; display: block; }
/* Slider importance / taille : flotte en bas à droite, fond sombre lisible. */
.ie-size {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 3;
  display: flex; flex-direction: column; gap: 0.3rem; width: 190px;
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
  background: rgba(8, 11, 17, 0.5); backdrop-filter: blur(4px);
}
.ie-size-cap {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(244, 249, 255, 0.8);
}
.ie-size-range { width: 100%; accent-color: var(--cirrus); cursor: pointer; }
/* La space-card flotte à gauche, par-dessus la galaxie (scroll interne si haute). */
.ie-card.space-card.is-preview {
  position: absolute; left: 1rem; top: 50%; z-index: 2;
  transform: translateY(-50%); /* centrée verticalement dans la scène */
  width: min(360px, 62%);
  max-height: calc(100% - 2rem);
  margin: 0; animation: none;
  overflow-y: auto; scrollbar-width: thin;
  box-shadow: 0 16px 40px -18px rgba(4, 6, 11, 0.6);
}
/* Couverture : invite pointillée si vide ; image pleine largeur si présente. */
.ie-cover { cursor: pointer; }
.ie-cover:not(.has-img) {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  height: 58px; margin: 0 0 0.7rem; border: 1px dashed var(--stratus);
  border-radius: var(--radius-sm); color: var(--ink-55); font-size: 0.8rem;
}
.ie-cover:not(.has-img):hover { border-color: var(--cirrus); color: var(--cirrus); }
.ie-cover-hint { display: inline-flex; align-items: center; gap: 0.4rem; }
.ie-cover.has-img {
  position: relative; width: calc(100% + 3.2rem); margin: -1.5rem -1.6rem 0.85rem;
}
.ie-cover.has-img .obs-cover {
  display: block; width: 100%; margin: 0; max-height: 130px; object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.ie-cover-clear {
  position: absolute; top: 0.5rem; right: 0.5rem; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(4, 6, 11, 0.55); color: #fff; cursor: pointer;
}

/* Nom éditable, stylé comme le titre de la carte */
.ie-name {
  width: 100%; border: 0; background: transparent;
  font-family: inherit; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--nimbus); margin: 0.3rem 0 0.3rem; padding: 0 0 2px;
  border-bottom: 1px dashed transparent;
}
.ie-name::placeholder { color: var(--ink-40, #aeb8c2); }
.ie-name:focus, .ie-tagline:focus { outline: none; border-bottom-color: var(--cirrus); }
/* Accroche éditable (sous-titre discret) */
.ie-tagline {
  width: 100%; border: 0; border-bottom: 1px dashed transparent; background: transparent;
  font-family: inherit; font-size: 0.9rem; color: var(--ink-70);
  margin: 0 0 0.65rem; padding: 0 0 2px;
}
.ie-tagline::placeholder { color: var(--ink-40, #aeb8c2); }

/* Badges éditables (statut, catégorie, visibilité, icône) */
.ie-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.7rem; }
.ie-badge {
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
  font-family: inherit; font-size: 0.72rem; font-weight: 600;
}
button.ie-badge { border: 0; }
button.kopo-badge { cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 600; }
select.ie-cat, .ie-iconpick {
  padding: 5px 10px; border: 1px solid var(--stratus-soft); border-radius: 999px;
  background: var(--brume, #eef2f6); color: var(--nimbus);
}
select.ie-cat { cursor: pointer; }

/* Description éditable */
.ie-desc {
  width: 100%; border: 1px solid transparent; background: transparent; resize: vertical;
  font-family: inherit; font-size: 0.9rem; line-height: 1.55; color: var(--ink-70);
  margin-bottom: 0.5rem; padding: 0.25rem 0.3rem; min-height: 2.6em;
  border-radius: var(--radius-sm);
}
.ie-desc::placeholder { color: var(--ink-40, #aeb8c2); }
.ie-desc:focus { outline: none; border-color: var(--stratus-soft); background: rgba(20, 26, 30, 0.02); }

/* Section repliable « Accès » + champs techniques, dans la carte */
.ie-more { margin-top: 0.4rem; }
/* Champs « Accès » toujours visibles (plus de repli) */
.ie-more-title { margin: 0.2rem 0 0.4rem; }
.ie-fld { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.5rem; }
.ie-fld > span { font-size: 0.7rem; font-weight: 600; color: var(--ink-55); }
.ie-fld input, .ie-fld textarea {
  width: 100%; padding: 0.4rem 0.5rem; font-family: inherit; font-size: 0.82rem;
  border: 1px solid var(--stratus-soft); border-radius: var(--radius-sm);
  background: var(--cumulus); color: var(--nimbus); resize: vertical;
}
.ie-fld input:focus, .ie-fld textarea:focus { outline: none; border-color: var(--cirrus); }
.ie-linkurl { margin: -0.05rem 0 0.7rem; }
@media (max-width: 640px) {
  /* Mobile : galaxie plein cadre, carte flottante en bas, slider en haut. */
  .ie-stage { height: 520px; }
  .ie-card.space-card.is-preview {
    left: 0.6rem; right: 0.6rem; top: auto; bottom: 0.6rem;
    width: auto; max-height: 62%; transform: none;
  }
  .ie-size { left: 0.6rem; right: auto; top: 0.6rem; bottom: auto; }
}

/* Choix du type d'élément (modale) */
.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.6rem;
}
.type-cell {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.9rem 0.5rem;
  color: var(--nimbus);
  background: var(--cumulus);
  border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-sm);
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.type-cell:hover { border-color: var(--cirrus); background: color-mix(in srgb, var(--cirrus) 7%, transparent); }
.type-cell:active { transform: scale(0.96); }
.type-icon { color: var(--vesper); }
.type-label { font-size: 0.78rem; font-weight: 600; }
.pc-zone-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 0.6rem;
}
.pc-zone-spaced { margin-top: 1.25rem; }

/* Menu de gauche : les éléments de la page */
.pc-menu-list { display: flex; flex-direction: column; gap: 0.25rem; }
.pc-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  text-align: left;
  color: var(--nimbus);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.pc-item:hover { background: rgba(8, 12, 20, 0.05); }
.pc-item.is-active {
  background: color-mix(in srgb, var(--cirrus) 12%, transparent);
  color: var(--cirrus);
  font-weight: 600;
}
.pc-item.is-off { opacity: 0.55; }
.pc-item-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-filter { margin-bottom: 0.6rem; max-width: none; }
.pc-add-item { margin-top: 0.75rem; width: 100%; }

/* Zone centrale : l'éditeur contextuel (formulaires déplacés ici) */
.pc-editor { min-height: 220px; }
.pc-editor .form-card { box-shadow: none; }
.pc-empty {
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-align: center;
  padding: 1.5rem;
  border: 1px dashed var(--stratus);
  border-radius: var(--radius-md);
}
.pc-empty .kobot-mini { width: 36px; height: 36px; opacity: 0.8; }
.pc-empty p { font-size: 0.85rem; color: var(--ink-55); max-width: 34ch; line-height: 1.5; text-wrap: pretty; }
.pc-repo-editor h3 { display: flex; align-items: center; gap: 0.5rem; }
.pc-repo-show { margin: 0.75rem 0 1rem; }

/* Colonne de droite : interrupteurs de modules + catégories */
.rail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.83rem;
  color: var(--nimbus);
  cursor: pointer;
  padding: 0.3rem 0;
}
.rail-toggle input { width: 15px; height: 15px; accent-color: var(--cirrus); cursor: pointer; flex-shrink: 0; }
.rail-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0; }
.rail-row .rail-toggle { flex: 1; min-width: 0; }
.rail-note { margin: 0.3rem 0 0.5rem; }
.rail-add-source { width: 100%; margin-bottom: 0.45rem; padding: 8px 16px; }
.rail-source-name,
.rail-cat-name {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.83rem;
  text-align: left;
  color: var(--nimbus);
  overflow: hidden;
}
.rail-source-name span,
.rail-cat-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.rail-source-name { border-radius: var(--radius-sm); padding: 0.25rem 0.3rem; transition: color 0.15s ease; }
button.rail-source-name:hover { color: var(--cirrus); }
.pc-cat-add { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.pc-cat-add input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--nimbus);
  background: var(--cumulus);
  border: 1px solid var(--stratus);
  border-radius: var(--radius-sm);
}
.pc-cat-add input:focus { outline: none; border-color: var(--cirrus); }

/* Le bouton + entre les cartes : créer une page */
.page-add-wrap { display: flex; justify-content: center; padding: 1.1rem 0 0.4rem; }
.page-add {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-55);
  background: var(--cumulus);
  border: 1px dashed var(--stratus);
  border-radius: 50%;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.12s ease, background 0.15s ease;
}
.page-add svg { width: 18px; height: 18px; }
.page-add:hover {
  color: var(--cirrus);
  border-color: var(--cirrus);
  border-style: solid;
  background: color-mix(in srgb, var(--cirrus) 8%, transparent);
}
.page-add:active { transform: scale(0.96); }
.page-add[aria-expanded="true"] { color: var(--cirrus); border-color: var(--cirrus); border-style: solid; }
.page-create-host { margin-top: 0.9rem; }
.page-create-host .form-card { max-width: 760px; margin: 0 auto; }

/* Couleurs libres (Personnalisé) */
.color-row { display: flex; align-items: center; gap: 0.5rem; }
.color-row input[type="color"] {
  width: 56px; height: 34px;
  padding: 2px;
  background: var(--cumulus);
  border: 1px solid var(--stratus);
  border-radius: var(--radius-sm);
  cursor: pointer;
}


/* === Aperçus animés du type de page ======================================= */
/* Le choix Étoiles / Voie lactée se montre : un mini-espace en vraie
   perspective (rotateX), qui se CONSTRUIT à l'ouverture puis VIT en continu
   (orbites réelles, accrétion qui tourne, disque qui dérive). Rien ne
   disparaît, rien ne clignote. Encre Kopo en dur : les couleurs libres ne
   touchent pas l'espace, même en miniature. */
.rc-scene {
  position: relative;
  display: block;
  width: 100%;
  height: 72px;
  margin-bottom: 0.2rem;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(80, 74, 151, 0.35) 0%, transparent 60%),
    linear-gradient(115deg, #0B0F16 0%, #141A1E 55%, #23255D 100%);
  overflow: hidden;
  perspective: 240px;
}
/* Poussière d'étoiles fixe en fond */
.rc-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1px at 12% 22%, rgba(244, 249, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle 1px at 86% 18%, rgba(244, 249, 255, 0.5) 0 1px, transparent 1.5px),
    radial-gradient(circle 1px at 70% 78%, rgba(244, 249, 255, 0.45) 0 1px, transparent 1.5px),
    radial-gradient(circle 1px at 28% 80%, rgba(244, 249, 255, 0.35) 0 1px, transparent 1.5px),
    radial-gradient(circle 1px at 48% 12%, rgba(244, 249, 255, 0.4) 0 1px, transparent 1.5px);
  animation: rcs-fade 0.8s var(--ease-out) backwards;
}
/* Le plan incliné : tout ce qui orbite vit dedans */
.rcs-plane {
  position: absolute;
  inset: 0;
  transform: rotateX(58deg);
  transform-style: preserve-3d;
}
/* — Étoiles (Sgr A*) — */
.rcs-hole {
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: #05070D;
  box-shadow: 0 0 0 1.5px rgba(87, 184, 255, 0.65), 0 0 14px 3px rgba(87, 184, 255, 0.35);
  animation: rcs-pop-in 0.6s var(--ease-out) backwards;
}
/* Anneau d'accrétion : conic-gradient découpé en anneau, rotation lente */
.rcs-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: conic-gradient(
    rgba(87, 184, 255, 0) 0deg,
    rgba(87, 184, 255, 0.85) 80deg,
    rgba(244, 249, 255, 0.9) 120deg,
    rgba(87, 184, 255, 0.4) 200deg,
    rgba(87, 184, 255, 0) 330deg);
  -webkit-mask: radial-gradient(circle, transparent 0 46%, #000 50% 70%, transparent 74%);
  mask: radial-gradient(circle, transparent 0 46%, #000 50% 70%, transparent 74%);
  animation: rcs-rotate 7s linear infinite, rcs-fade 0.9s var(--ease-out) 0.25s backwards;
}
.rcs-orbit {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(188, 200, 210, 0.20);
  border-radius: 50%;
  animation: rcs-fade 0.9s var(--ease-out) 0.35s backwards;
}
.rcs-o1 { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.rcs-o2 { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
/* Les étoiles ORBITENT : wrapper en rotation, étoile redressée (billboard) */
.rcs-spin {
  position: absolute;
  left: 50%; top: 50%;
  transform-style: preserve-3d;
  animation: rcs-rotate linear infinite;
}
.rcs-s1 { width: 64px; height: 64px; margin: -32px 0 0 -32px; animation-duration: 9s; }
.rcs-s2 { width: 64px; height: 64px; margin: -32px 0 0 -32px; animation-duration: 9s; animation-delay: -4.5s; }
.rcs-s3 { width: 104px; height: 104px; margin: -52px 0 0 -52px; animation-duration: 16s; animation-delay: -3s; }
.rcs-spin .rcs-star {
  position: absolute;
  left: 50%; top: -2px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #F4F9FF;
  box-shadow: 0 0 5px 1.5px rgba(244, 249, 255, 0.55);
  transform: rotateX(-58deg);
  animation: rcs-fade 0.5s var(--ease-out) 0.55s backwards;
}
.rcs-spin .rcs-star.rcs-faint { width: 3px; height: 3px; opacity: 0.8; animation-delay: 0.7s; }
.rcs-spin .rcs-star.rcs-big {
  width: 5px; height: 5px;
  box-shadow: 0 0 7px 2px rgba(87, 184, 255, 0.6);
  animation-delay: 0.85s;
}
/* — Voie lactée — */
.rcs-galaxy {
  position: absolute;
  left: 50%; top: 50%;
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  animation: rcs-rotate 70s linear infinite, rcs-grow 0.9s var(--ease-out) backwards;
}
.rcs-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(244, 249, 255, 0.95) 0%,
    rgba(87, 184, 255, 0.45) 38%,
    rgba(80, 74, 151, 0.25) 65%,
    transparent 80%);
  animation: rcs-breathe 5s ease-in-out infinite;
}
/* Bras spiraux : des poussières posées le long de deux bras */
.rcs-dot {
  position: absolute;
  width: 2.5px; height: 2.5px;
  border-radius: 50%;
  background: rgba(188, 200, 210, 0.75);
  animation: rcs-fade 0.5s var(--ease-out) backwards;
}
.rcd-1  { left: 56%; top: 30%; animation-delay: 0.35s; }
.rcd-2  { left: 68%; top: 36%; animation-delay: 0.42s; }
.rcd-3  { left: 76%; top: 47%; width: 2px; height: 2px; animation-delay: 0.49s; }
.rcd-4  { left: 78%; top: 60%; animation-delay: 0.56s; }
.rcd-5  { left: 70%; top: 72%; width: 2px; height: 2px; animation-delay: 0.63s; }
.rcd-6  { left: 42%; top: 68%; animation-delay: 0.45s; }
.rcd-7  { left: 30%; top: 61%; animation-delay: 0.52s; }
.rcd-8  { left: 23%; top: 50%; width: 2px; height: 2px; animation-delay: 0.59s; }
.rcd-9  { left: 22%; top: 38%; animation-delay: 0.66s; }
.rcd-10 { left: 31%; top: 27%; width: 2px; height: 2px; animation-delay: 0.73s; }
/* Deux systèmes : une étoile vive + sa planète en orbite */
.rcs-sys {
  position: absolute;
  width: 18px; height: 18px;
  animation: rcs-fade 0.5s var(--ease-out) backwards;
}
.rcsys-1 { left: 58%; top: 22%; animation-delay: 0.8s; }
.rcsys-2 { left: 18%; top: 58%; animation-delay: 0.95s; }
.rcs-sys .rcs-sun {
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #F4F9FF;
  box-shadow: 0 0 6px 2px rgba(87, 184, 255, 0.65);
}
.rcs-spin-s {
  position: absolute;
  inset: 0;
  animation: rcs-rotate 5s linear infinite;
}
.rcs-spin-s.rcs-rev { animation-direction: reverse; animation-duration: 7s; }
.rcs-spin-s .rcs-planet {
  position: absolute;
  left: 50%; top: 0;
  width: 2.5px; height: 2.5px;
  margin-left: -1.25px;
  border-radius: 50%;
  background: #BCC8D2;
}
@keyframes rcs-rotate { to { transform: rotate(360deg); } }
@keyframes rcs-fade { from { opacity: 0; } }
@keyframes rcs-pop-in {
  0% { transform: scale(0); }
  70% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes rcs-grow {
  from { opacity: 0; scale: 0.4; }
  to { opacity: 1; scale: 1; }
}
@keyframes rcs-breathe {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.75; }
}
/* Vignettes du choix de type : statiques au repos, animées au survol. */
.radio-card:not(:hover) .rc-scene *,
.radio-card:not(:hover) .rc-scene::before { animation: none !important; }
.radio-card:not(:hover) .rcs-s1 { transform: rotate(35deg); }
.radio-card:not(:hover) .rcs-s2 { transform: rotate(160deg); }
.radio-card:not(:hover) .rcs-s3 { transform: rotate(260deg); }
.radio-card:not(:hover) .rcs-spin-s { transform: rotate(120deg); }
.radio-card:not(:hover) .rcs-spin-s.rcs-rev { transform: rotate(300deg); }

@media (prefers-reduced-motion: reduce) {
  .rc-scene *, .rc-scene::before { animation: none !important; }
}



/* === Modal générique (sélecteur d'icônes, bibliothèque de widgets) ======== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 11, 17, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modal-fade 0.2s ease;
}
/* Modale de 2e niveau : par-dessus l'éditeur */
.modal-overlay-top { z-index: 130; }

/* === Cadrage d'image (point de cadrage) =================================== */
.framer-grid { display: grid; grid-template-columns: 1fr 190px; gap: 1rem; align-items: start; }
.framer-stage {
  position: relative; cursor: crosshair; touch-action: none;
  border-radius: var(--radius-sm); overflow: hidden; max-height: 48vh;
  background: var(--brume, #eef2f6);
}
.framer-img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.framer-dot {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none;
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(8, 11, 17, 0.5), 0 2px 8px rgba(0, 0, 0, 0.45);
}
.framer-prevs { display: flex; flex-direction: column; gap: 0.9rem; position: sticky; top: 0; align-self: start; }
/* Actions dans la colonne droite, sous les vignettes : pleine largeur, empilées. */
.framer-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.2rem; }
.framer-actions .btn { width: 100%; justify-content: center; }
.framer-fig { margin: 0; }
.framer-fig figcaption { margin-top: 0.3rem; text-align: center; font-size: 0.7rem; color: var(--ink-55); }
.framer-prev { overflow: hidden; border: 1px solid var(--stratus-soft); border-radius: var(--radius-sm); background: var(--brume, #eef2f6); }
.framer-prev img { display: block; width: 100%; height: 100%; object-fit: cover; }
.framer-cover { aspect-ratio: 16 / 6; }
.framer-tile { width: 84px; height: 84px; margin: 0 auto; }
@media (max-width: 640px) {
  .framer-grid { grid-template-columns: 1fr; }
  .framer-prevs { flex-direction: row; flex-wrap: wrap; justify-content: center; position: static; }
  .framer-actions { flex-basis: 100%; flex-direction: row; justify-content: center; }
  .framer-actions .btn { width: auto; }
}
.modal-card {
  width: min(620px, 100%);
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--cumulus);
  border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 6px rgba(20, 26, 30, 0.12), 0 32px 80px -28px rgba(4, 6, 11, 0.6);
  animation: modal-in 0.25s var(--ease-out);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem 0.8rem;
  border-bottom: 1px solid var(--stratus-soft);
}
.modal-head h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.modal-head .d-close { position: static; }
.modal-body { padding: 1rem 1.25rem 1.25rem; overflow-y: auto; scrollbar-width: thin; }
body.modal-open { overflow: hidden; }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

/* Sélecteur d'icônes : recherche + grille Lucide complète */
.icon-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--nimbus);
  background: var(--cumulus);
  border: 1px solid var(--stratus);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}
.icon-pick:hover { border-color: var(--cirrus); }
.icon-pick .ip-preview { display: inline-flex; color: var(--vesper); }
.icon-pick .ip-name { font-size: 0.8rem; color: var(--ink-70); }
.icon-pick.ip-compact { width: auto; padding: 0.45rem 0.55rem; }
.ip-search { max-width: none; margin-bottom: 0.9rem; }
.ip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 0.3rem;
}
.ip-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  color: var(--nimbus);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.ip-cell:hover { border-color: var(--cirrus); background: color-mix(in srgb, var(--cirrus) 8%, transparent); }
.ip-cell:active { transform: scale(0.92); }
.ip-cell.is-current { border-color: var(--cirrus); background: color-mix(in srgb, var(--cirrus) 14%, transparent); color: var(--cirrus); }
.ip-more { width: 100%; margin-top: 0.8rem; }

/* Bibliothèque de widgets : une carte par module */
.lib-lead { margin-bottom: 0.9rem; }
.lib-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.lib-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.9rem 1rem;
  text-align: left;
  background: var(--cumulus);
  border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.lib-card:hover { border-color: var(--cirrus); background: color-mix(in srgb, var(--cirrus) 6%, transparent); }
.lib-card:active { transform: scale(0.98); }
.lib-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  color: var(--vesper);
  background: var(--brume, #Eef2F6);
  border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-sm);
}
.lib-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.lib-name { font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; }
.lib-desc { font-size: 0.78rem; color: var(--ink-55); line-height: 1.45; text-wrap: pretty; }
.lib-add { color: var(--cirrus); flex-shrink: 0; }

/* === Tableau de bord admin ================================================ */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.dash-kpis .kpi-card {
  background: var(--cumulus);
  border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
}
.dash-days {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  padding-top: 0.5rem;
}
.day-bar {
  flex: 1;
  min-width: 0;
  border-radius: 3px 3px 0 0;
  background: var(--stratus-soft);
  transition: height 0.5s var(--ease-out);
}
.day-bar.has-clicks { background: color-mix(in srgb, var(--cirrus) 75%, transparent); }
.dash-top { display: flex; flex-direction: column; gap: 0.45rem; }
.stat-row { display: flex; align-items: center; gap: 0.6rem; }
.stat-name {
  flex: 0 0 38%;
  min-width: 0;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-bar {
  flex: 1;
  height: 8px;
  background: var(--stratus-soft);
  border-radius: 999px;
  overflow: hidden;
}
.stat-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cirrus) 80%, transparent);
  transition: width 0.5s var(--ease-out);
}
.stat-count {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 2.2em;
  text-align: right;
}

/* === Liens sociaux ======================================================== */
/* Public : pilules rondes sous le HUD (fond sombre) et dans le footer */
.social-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
  pointer-events: auto;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  color: var(--stratus);
  background: rgba(20, 26, 30, 0.45);
  border: 1px solid rgba(188, 200, 210, 0.30);
  border-radius: 50%;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.social-btn:hover { color: var(--cirrus); border-color: var(--cirrus); }
.social-btn:active { transform: scale(0.92); }
/* Variante footer (fond clair) */
.social-row-footer { margin-top: 0; }
.social-row-footer .social-btn {
  width: 26px; height: 26px;
  color: var(--ink-55);
  background: var(--cumulus);
  border-color: var(--stratus-soft);
}
.social-row-footer .social-btn:hover { color: var(--cirrus); border-color: var(--cirrus); }
/* Éditeur admin : lignes répétables */
.social-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }
.social-edit-row { display: flex; align-items: center; gap: 0.5rem; }
.social-edit-row .se-url { flex: 2; min-width: 0; }
.social-edit-row .se-label { flex: 1; min-width: 0; }
.social-edit-row input {
  padding: 0.5rem 0.65rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--nimbus);
  background: var(--cumulus);
  border: 1px solid var(--stratus);
  border-radius: var(--radius-sm);
}
.social-edit-row input:focus { outline: none; border-color: var(--cirrus); }

/* === Upload d'image ======================================================= */
/* Plus de champ URL : aperçu + bouton « Téléverser » + « Retirer ». */
.upload-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.upload-row .btn { flex-shrink: 0; padding: 8px 16px; }
.img-field {
  width: 64px; height: 64px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--brume, #eef2f6);
  border: 1px solid var(--stratus-soft);
  color: var(--vesper);
  overflow: hidden;
}
.img-field img { width: 100%; height: 100%; object-fit: cover; }
.img-field.is-empty { color: var(--ink-55); }
.img-clear { flex-shrink: 0; }

/* === Finitions (skills frontend-design / make-interfaces-feel-better) ===== */
/* Rien ne force la mise en page à déborder : les items de grid et de flex
   ont min-width:auto par défaut, une URL longue dans une liste admin
   poussait toute la colonne hors de l'écran (masqué par overflow-x:hidden).
   En dessous de 640 px le formulaire passe en colonne. */
.form-field,
.admin-layout > *,
.admin-stack > *,
.admin-item .ai-body { min-width: 0; }
.admin-item .ai-meta { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* Pression tactile : 0.96 exactement, interruptible (transition CSS) */
.chip, .hud-cat, .icon-btn {
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease,
    transform 0.12s ease;
}
/* PAS la poignée du tiroir : son transform de base est translateX(-50%) —
   l'écraser par un scale la faisait SAUTER à droite au clic. */
.btn:active, .chip:active, .hud-cat:active, .icon-btn:active { transform: scale(0.96); }
/* Chiffres qui bougent : largeur fixe, aucun saut de mise en page */
.kpi-value, .g-meta, .ai-meta, .made-by, .avail-name {
  font-variant-numeric: tabular-nums;
}
/* Titres équilibrés, paragraphes sans orphelines */
.view-title, .space-card h2, .d-head h2, .first-run h2, .form-card h3 {
  text-wrap: balance;
}
.view-lead, .obs-desc, .d-desc, .hint, .mi-desc, .muted-note {
  text-wrap: pretty;
}
/* Le « Détails → » des cartes ne glisse plus vers la droite (retour
   utilisateur : l'animation distrait plus qu'elle ne guide) */
.svc-card .more .arrow,
.svc-card:hover .more .arrow { transition: none; transform: none; }
/* Liseré discret sur les images : la profondeur reste cohérente quel que
   soit le visuel fourni */
.tile img, .svc-detail .cover {
  outline: 1px solid rgba(8, 12, 20, 0.08);
  outline-offset: -1px;
}
/* Ombres en couches : une ambiante courte + une portée longue, la
   profondeur paraît naturelle sur n'importe quel fond */
.svc-card:hover,
.svc-card:focus-visible {
  box-shadow: 0 1px 2px rgba(20, 26, 30, 0.05), 0 12px 28px -16px color-mix(in srgb, var(--cirrus) 30%, transparent);
}
.git-card:hover {
  box-shadow: 0 1px 2px rgba(20, 26, 30, 0.05), 0 10px 26px -16px color-mix(in srgb, var(--cirrus) 28%, transparent);
}
.svc-detail {
  box-shadow: 0 2px 6px rgba(20, 26, 30, 0.12), 0 24px 64px -24px rgba(20, 26, 30, 0.35);
}
/* Sortie du toast plus douce et plus courte que son entrée */
.toast:not(.is-visible) { transform: translateY(6px); transition-duration: 0.22s; }
/* Titres en graisse poussée (Satoshi variable 300-900), tracking resserré :
   la hiérarchie vient du contraste de graisse, pas seulement de la taille */
.view-title, .d-head h2, .first-run h2 { font-weight: 800; letter-spacing: -0.03em; }
.kpi-value { font-weight: 800; }
/* Le détail d'un service : les fonctionnalités arrivent en cascade après
   l'expansion FLIP de la carte */
.svc-detail .d-features li { animation: apanel-in 0.3s var(--ease-out) 0.2s backwards; }
.svc-detail .d-features li:nth-child(2) { animation-delay: 0.26s; }
.svc-detail .d-features li:nth-child(3) { animation-delay: 0.32s; }
.svc-detail .d-features li:nth-child(4) { animation-delay: 0.38s; }
.svc-detail .d-features li:nth-child(n+5) { animation-delay: 0.44s; }
.svc-detail .d-body { scrollbar-width: thin; }
/* Connexion : les blocs de la feuille arrivent en cascade */
#view-login.is-active .sheet-inner > * { animation: apanel-in 0.34s var(--ease-out) backwards; }
#view-login.is-active .sheet-inner > *:nth-child(2) { animation-delay: 0.06s; }
#view-login.is-active .sheet-inner > *:nth-child(3) { animation-delay: 0.12s; }
/* Le Kobot accueille le premier lancement, en flottement très lent */
.first-run .kobot-mini {
  width: 64px; height: 64px;
  margin-bottom: 0.4rem;
  animation: fr-float 4.5s ease-in-out infinite;
}
@keyframes fr-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .space-card, .space-drawer { animation: none; }
  .nav-mobile .nav-mobile-links li { transition: none; }
  .hud-cats-panel { transition: none; }
  .admin-panel > *,
  .svc-detail .d-features li,
  #view-login.is-active .sheet-inner > *,
  .first-run .kobot-mini { animation: none; }
  /* PAS la poignée du tiroir : transform: none écraserait son centrage
     translateX(-50%) et la ferait sauter à droite au toucher. */
  .btn:active, .chip:active, .hud-cat:active, .icon-btn:active,
  .admin-tab:active { transform: none; }
}

/* === Plateforme (invitations, comptes) — onglet Compte, admin d'instance == */
.platform-list { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.6rem 0 1rem; }
.platform-row {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.45rem 0.6rem; border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-sm); background: var(--cumulus);
}
.platform-code { font-size: 0.85rem; letter-spacing: 0.06em; }
.platform-handle { font-weight: 600; color: var(--cirrus); text-decoration: none; }
.platform-handle:hover { text-decoration: underline; }
.btn-sm { padding: 4px 10px; font-size: 0.75rem; }

/* === Sécurité & accès : blocs empilés dans l'onglet Compte =============== */
.sec-block { padding: 0.9rem 0 0.6rem; border-top: 1px solid var(--stratus-soft); margin-top: 0.9rem; }
.sec-block:first-of-type { border-top: 0; margin-top: 0.4rem; }
.sec-block .pc-zone-title { margin-top: 0; }
/* Respiration : jamais un bouton collé au champ au-dessus */
.sec-block .form-actions { margin-top: 1rem; }

/* Droits d'accès cochables (annuaire SSO) */
.rights-title { margin: 1rem 0 0.4rem; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-60); }
.rights-list { display: flex; flex-direction: column; gap: 0.35rem; }
.rights-row {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.4rem 0.6rem; border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-sm); background: var(--cumulus);
}
.rights-name { font-weight: 600; }
.rights-note { color: var(--ink-60); font-size: 0.8rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rights-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; margin-left: auto; }
.rights-check + .rights-check { margin-left: 0; }
.rights-add { display: flex; gap: 0.5rem; margin-top: 0.6rem; align-items: center; }
.rights-add input { flex: 1; min-width: 0; }

/* Fiche Keycloak dépliable (panneau SSO) */
.kc-help { margin: 0.8rem 0 0.4rem; }
.kc-help summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--ink-70); }
.kc-grid { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; }
.kc-row {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.35rem 0.6rem; border: 1px solid var(--stratus-soft);
  border-radius: var(--radius-sm); background: var(--cumulus);
}
.kc-key { font-size: 0.8rem; font-weight: 600; min-width: 220px; }
.kc-val { font-size: 0.8rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-row .btn { margin-left: auto; }

/* Bouton de déconnexion : contour et texte Sirocco, plein au survol */
.btn-logout {
  background: transparent;
  color: var(--sirocco);
  border: 1px solid var(--sirocco);
}
.btn-logout:hover, .btn-logout:focus-visible {
  background: var(--sirocco);
  color: #fff;
  border-color: var(--sirocco);
}

/* Écran de connexion : cartes espacées, séparateur « ou » entre SSO et admin */
.login-card + .login-card { margin-top: 0; }
.login-sep {
  display: flex; align-items: center; gap: 0.8rem;
  margin: 1.1rem 0; color: var(--ink-60);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.login-sep::before, .login-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--stratus-soft);
}
#ssoCard .btn { width: 100%; justify-content: center; }
#ssoCard .form-actions { margin-top: 0.9rem; }

/* Sélecteur de rôles à cases à cocher (accès « Groupe ») */
.rp-list { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; padding: 0.2rem 0; }
.rp-chk { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; }
.rp-chk input { margin: 0; }
.ie-roles-fld { display: block; }
.ie-roles-fld > span { display: block; font-size: 0.75rem; color: var(--ink-60); margin-bottom: 0.25rem; }

/* Fiche Keycloak : notes sur plusieurs lignes */
#kcNotes { white-space: pre-line; }