/* Vigie — feuille de style.
   Charte Roch : la nuit violette, l'or pour la seule action principale,
   une teinte par service, Space Grotesk pour les titres, IBM Plex Sans pour
   l'interface, JetBrains Mono pour les données. Mobile d'abord. */

:root {
  color-scheme: dark light;

  /* Socle chromatique — nuit */
  --nuit: #0A0810;
  --surface: #15111F;
  --surface-2: #1C1628;
  --bordure: #241C33;
  --bordure-2: #3B3050;
  --texte: #EDE9F5;
  --texte-2: #B4A9C9;
  --texte-3: #8B7BA8;
  --texte-4: #7A6B94;

  /* L'or : fond de l'action principale (fixe) et accent texte (varie avec le thème) */
  --or: #F0A81E;
  --or-clair: #FFC04A;
  --sur-or: #1A1206;

  /* États : le texte, et la pastille / la barre (identiques la nuit) */
  --ok: #8FD14F;
  --alerte: #F0A81E;
  --hs: #F2789F;
  --inconnu: #8B7BA8;
  --ok-point: var(--ok);
  --alerte-point: var(--alerte);
  --hs-point: var(--hs);

  /* Une teinte par service (le bloc de l'icône, le liseré, le lavis) */
  --violet: #8B5CF6;
  --jade: #3BC9B0;
  --rose: #F2789F;
  --bleu: #7AA8FF;
  --vert: #8FD14F;
  --ciel: #5CC8F5;
  --sable: #E2C08D;
  --gris: #8B7BA8;

  --reserve: #0A0810;          /* le symbole en réserve dans les icônes */
  --voile-alerte: rgba(240, 168, 30, 0.10);

  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titre: 'Space Grotesk', var(--sans);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --rayon: 14px;
  --rayon-petit: 8px;
  --marge: 18px;
  --entete-h: 56px;
  --barre-basse-h: 64px;
}


/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nuit); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--barre-basse-h) + env(safe-area-inset-bottom, 0px));
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: 4px; }

.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.etiquette {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.sur-titre {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-3);
}

/* Couleurs d'état : le texte et la pastille suivent la même classe */
.etat-ok { color: var(--ok); }
.etat-degrade { color: var(--alerte); }
.etat-hs { color: var(--hs); }
.etat-inconnu { color: var(--inconnu); }
.etat-attente { color: var(--texte-3); }
.etat-maintenance { color: var(--bleu); }
.point {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.point.etat-ok, .etat-ok > .point { background: var(--ok-point); }
.point.etat-degrade, .etat-degrade > .point { background: var(--alerte-point); }
.point.etat-hs, .etat-hs > .point { background: var(--hs-point); }
.point.etat-inconnu, .etat-inconnu .point { opacity: 0.6; }

/* Teintes de service. --encre est la couleur du nom sur le lavis : la nuit, c'est le
   texte ; sur pierre claire, la version foncée de la teinte (Logos Roch · 04). */
.teinte-violet { --teinte: var(--violet); --encre: var(--violet-encre, var(--texte)); }
.teinte-jade   { --teinte: var(--jade);   --encre: var(--jade-encre, var(--texte)); }
.teinte-rose   { --teinte: var(--rose);   --encre: var(--rose-encre, var(--texte)); }
.teinte-bleu   { --teinte: var(--bleu);   --encre: var(--bleu-encre, var(--texte)); }
.teinte-vert   { --teinte: var(--vert);   --encre: var(--vert-encre, var(--texte)); }
.teinte-ciel   { --teinte: var(--ciel);   --encre: var(--ciel-encre, var(--texte)); }
.teinte-sable  { --teinte: var(--sable);  --encre: var(--sable-encre, var(--texte)); }
.teinte-gris   { --teinte: var(--gris);   --encre: var(--gris-encre, var(--texte)); }

/* ---------- Icônes (grille 200, symbole en réserve) ---------- */
.icone { width: 46px; height: 46px; flex: none; }
.icone .fond { fill: var(--teinte, var(--gris)); }
.icone .creux { fill: var(--teinte, var(--gris)); }
.icone .sym { fill: var(--reserve); }
.icone .trait { fill: none; stroke: var(--reserve); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.icone-img { border-radius: 10px; object-fit: cover; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  padding-top: env(safe-area-inset-top, 0px);
}
.entete-int {
  height: var(--entete-h);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.entete-gauche { display: flex; align-items: center; gap: 34px; min-width: 0; }
.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titre);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.marque .logo-vigie { width: 24px; height: 24px; }
.chip-demo {
  display: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alerte);
  background: var(--voile-alerte);
  border-radius: 5px;
  padding: 3px 7px;
}
body.demo .chip-demo { display: inline-block; }

.onglets { display: flex; gap: 4px; }
.onglet {
  background: transparent;
  border: none;
  border-radius: var(--rayon-petit);
  padding: 9px 18px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--texte-3);
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.onglet:hover { color: var(--texte); }
.onglet[aria-current="page"] { background: var(--bordure); color: var(--texte); }

.entete-droite { display: flex; align-items: center; gap: 14px; }
.pastille {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}
/* L'or : une seule action principale par écran — ici, rafraîchir */
.bouton-or {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--or);
  color: var(--sur-or);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color .15s;
}
.bouton-or:hover { background: var(--or-clair); }
.bouton-or svg { width: 16px; height: 16px; }
body.chargement .bouton-or svg { animation: tourner 1s linear infinite; }

/* Le bouton de thème : soleil la nuit (pour passer au clair), lune le jour */
.bouton-theme {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--bordure);
  background: transparent;
  color: var(--texte-3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: color .15s, border-color .15s;
}
.bouton-theme:hover { color: var(--texte); border-color: var(--bordure-2); }
.bouton-theme svg { width: 16px; height: 16px; }
:root[data-theme="clair"] .bouton-theme .ic-soleil { display: none; }
:root[data-theme="nuit"] .bouton-theme .ic-lune { display: none; }
/* un petit point or quand le thème est forcé (ne suit plus le téléphone) */
.bouton-theme.force::after { content: ''; position: absolute; right: -1px; top: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--or); border: 2px solid var(--surface); }
@keyframes tourner { to { transform: rotate(360deg); } }

/* Bandeau hors ligne / dernier état connu */
.bandeau {
  background: var(--voile-alerte);
  border-bottom: 1px solid var(--bordure);
  color: var(--alerte);
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  padding: 8px var(--marge);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bandeau[hidden] { display: none; }

/* ---------- Page ---------- */
.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px var(--marge) 28px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.heros { display: flex; flex-direction: column; gap: 14px; }
.heros-gauche { display: flex; flex-direction: column; gap: 7px; }
.titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.synthese { font-size: 15px; line-height: 1.55; color: var(--texte-2); max-width: 34em; text-wrap: pretty; }
.synthese.alerte { color: var(--texte); }

/* Cartes */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 18px;
}

/* ---------- Tuiles (vue Maison) ---------- */
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tuile {
  position: relative;
  min-width: 0;                /* la tuile se resserre, le sous-titre se coupe en … */
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 16px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--texte);
  transition: border-color .15s, background-color .15s;
}
.tuile:hover { border-color: var(--teinte); background: var(--surface-2); }
.tuile .icone { width: 32px; height: 32px; }
.tuile .icone-img { border-radius: 7px; }
.tuile-lien { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.tuile-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tuile-nom { font-family: var(--titre); font-size: 16px; font-weight: 500; }
.tuile-sous { font-size: 12px; color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile > .point { position: absolute; top: 18px; right: 18px; }
.tuile.etat-tuile-hs { border-color: color-mix(in srgb, var(--hs) 45%, var(--bordure)); }
.tuile.etat-tuile-degrade { border-color: color-mix(in srgb, var(--alerte) 40%, var(--bordure)); }

/* Le lien vers l'extérieur : petit, secondaire, jamais dans la marge de l'icône */
.externe {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 2;
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid var(--bordure-2);
  color: var(--texte-3);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  transition: color .15s, border-color .15s;
}
.externe:hover { color: var(--texte); border-color: var(--teinte, var(--texte-3)); }
.externe svg { width: 13px; height: 13px; }
/* Zones tactiles : 44 px minimum au doigt, sans grossir les boutons */
@media (max-width: 719px) {
  .externe::before, .bouton-theme::before, .bouton-or::before { content: ''; position: absolute; inset: -8px; }
  .bouton-or { position: relative; }
}
.tuile:has(> .externe) .tuile-texte { padding-right: 30px; }


/* ---------- Vue Système ---------- */
.bouton-contour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--bordure-2);
  border-radius: 9px;
  padding: 10px 16px;
  font-family: var(--titre);
  font-size: 14px;
  color: var(--texte);
  cursor: pointer;
  transition: border-color .15s;
}
.bouton-contour:hover { border-color: var(--or); }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat-valeur {
  font-family: var(--titre);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-valeur small { font-size: 0.5em; font-weight: 500; color: var(--texte-3); letter-spacing: 0; }
.stat-sous { font-size: 13px; color: var(--texte-3); }

.bloc { display: flex; flex-direction: column; gap: 14px; }
.bloc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bloc-note { font-size: 11px; color: var(--texte-3); text-align: right; }

/* Machines */
.machines { display: grid; grid-template-columns: 1fr; gap: 12px; }
.machine { display: flex; flex-direction: column; gap: 12px; }
.machine-tete { display: flex; align-items: center; gap: 14px; }
.machine .icone { width: 40px; height: 40px; }
.machine-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.machine-nom { font-family: var(--titre); font-size: 18px; font-weight: 500; line-height: 1.1; }
.machine-ip { font-size: 11px; color: var(--texte-3); }
.machine-etat { font-size: 14px; }
.machine-detail { font-size: 13px; color: var(--texte-3); margin-top: -6px; }
.machine-pied { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--texte-3); }
.machine-pied span { white-space: nowrap; }
.machine-pied .etat-hs, .machine-pied .etat-degrade { color: inherit; }
.machine-sec {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--texte-3);
  padding-top: 10px; border-top: 1px solid var(--surface-2);
}
.machine.etat-carte-hs { border-color: color-mix(in srgb, var(--hs) 45%, var(--bordure)); }

/* Barre d'historique — un battement par trait, du plus ancien au plus récent */
.barre { display: flex; gap: 2px; height: 16px; align-items: stretch; }
.barre .b { flex: 1; min-width: 2px; border-radius: 2px; background: var(--bordure); }
.barre .b.ok { background: var(--ok-point); opacity: 0.85; }
.barre .b.degrade { background: var(--alerte-point); }
.barre .b.hs { background: var(--hs-point); }
.barre .b.maintenance { background: var(--bleu); opacity: 0.7; }
.barre .b.vide { background: var(--surface-2); }
.barre-vide { display: flex; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--texte-4); height: 16px; }

/* Groupes de services par machine */
.groupe { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 4px 18px 6px; }
.groupe + .groupe { margin-top: 12px; }
.groupe-tete { display: flex; align-items: center; gap: 10px; padding: 14px 0 10px; border-bottom: 1px solid var(--bordure); flex-wrap: wrap; }
.groupe-nom { font-family: var(--titre); font-size: 17px; font-weight: 500; }
.groupe-ip { font-size: 11px; color: var(--texte-3); }
.groupe-compte { margin-left: auto; font-size: 11px; color: var(--texte-3); }

.lignes { display: flex; flex-direction: column; }
/* Sur téléphone : icône | nom + état | lien ↗, puis la ligne 24 h · historique · latence.
   Sur bureau : une seule ligne, colonnes alignées sur l'en-tête. */
.ligne {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 26px;
  grid-template-areas: "icone id externe" "icone etat externe" "detail detail detail";
  gap: 4px 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--surface-2);
}
.ligne:last-child { border-bottom: none; }
.ligne-entete { display: none; }
.ligne .icone { grid-area: icone; width: 36px; height: 36px; align-self: start; }
.ligne .icone-img { border-radius: 8px; }
.ligne-id { grid-area: id; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ligne-nom { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-nom:hover { color: var(--alerte); }
.ligne-url { font-size: 11px; color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-etat { grid-area: etat; display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; }
.ligne-detail { grid-area: detail; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 4px; }
.ligne-uptime, .ligne-ping { font-size: 12px; color: var(--texte-3); white-space: nowrap; }
.ligne-uptime { min-width: 52px; }
.ligne-ping { min-width: 44px; text-align: right; }
.ligne > .externe, .ligne > .externe-vide { grid-area: externe; position: static; width: 26px; height: 26px; }
.ligne.etat-ligne-inconnu .ligne-nom, .ligne.etat-ligne-inconnu .icone { opacity: 0.7; }

/* Erreur sans état connu */
.erreur { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.erreur p { color: var(--texte-2); max-width: 40em; }
.erreur .petit { font-size: 12px; color: var(--texte-3); word-break: break-all; }

/* ---------- Pied ---------- */
.pied {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px var(--marge) 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texte-4);
  text-align: center;
}

/* ---------- Barre d'onglets basse (téléphone) ---------- */
@media (max-width: 719px) {
  .onglets {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    background: var(--surface);
    border-top: 1px solid var(--bordure);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  .onglet { flex: 1; padding: 12px 0; text-align: center; font-family: var(--titre); font-weight: 500; }
  .sous-long { display: none; }   /* sur téléphone la tuile ne garde que la mesure */
  .vedette-hote { display: none; }
}

/* ---------- Tablette et bureau ---------- */
@media (min-width: 720px) {
  :root { --marge: 28px; --entete-h: 66px; --barre-basse-h: 0px; }
  .marque { font-size: 19px; letter-spacing: -0.02em; }
  .marque .logo-vigie { width: 30px; height: 30px; }
  .pastille { font-size: 12px; }
  .page { padding: 44px 40px 52px; gap: 40px; }
  .heros { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .heros-gauche { gap: 10px; }
  .sur-titre { font-size: 12px; letter-spacing: 0.18em; }
  .titre { font-size: 44px; letter-spacing: -0.03em; }
  .synthese { font-size: 16px; line-height: 1.6; text-align: right; max-width: 340px; }
  .carte { padding: 26px; }

  .tuiles { gap: 18px; }
  .tuile { flex-direction: row; align-items: center; gap: 18px; padding: 24px; min-height: 0; border-radius: var(--rayon); }
  .tuile .icone { width: 46px; height: 46px; }
  .tuile .icone-img { border-radius: 10px; }
  .tuile-nom { font-size: 19px; }
  .tuile-sous { font-size: 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
  .tuile > .point { position: static; }
  .externe { position: static; margin-left: -6px; }
  .tuile-lien { z-index: 1; }


  .stats { gap: 18px; }
  .stat { gap: 12px; }
  .stat-valeur { font-size: 34px; }
  .stat-sous { font-size: 14px; }
  .bloc { gap: 18px; }
  .machines { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
  .machine-nom { font-size: 19px; }
  .groupe { padding: 6px 26px 8px; }
  .groupe + .groupe { margin-top: 18px; }
  .groupe-tete { padding: 18px 0 12px; }
  .bouton-contour { padding: 12px 20px; font-size: 15px; }
  .pied { font-size: 12px; padding: 28px var(--marge) 48px; }
}

@media (min-width: 900px) {
  .tuiles { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .ligne {
    grid-template-columns: 36px 1.4fr 180px 70px minmax(160px, 1fr) 70px 26px;
    grid-template-areas: "icone id etat detail detail detail externe";
    gap: 16px;
    padding: 14px 0;
  }
  .ligne .icone { align-self: center; }
  .ligne-detail { grid-template-columns: 70px minmax(0, 1fr) 70px; gap: 16px; margin-top: 0; }
  .ligne-uptime { min-width: 0; }
  .ligne-ping { min-width: 0; text-align: left; }
  .ligne-entete {
    display: grid;
    padding: 12px 0 10px;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texte-3);
    border-bottom: 1px solid var(--bordure);
  }
  .ligne-entete .ligne-detail { display: grid; }
  .ligne-etat { font-size: 14px; }
  .ligne-uptime, .ligne-ping { font-size: 13px; }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 0.001s !important; }
}

/* =====================================================================
   Maison — l'accueil : trio en vedette, grille de la famille, atelier replié
   ===================================================================== */

/* En-tête : la clef de voûte, la tour de guet sur l'onglet Vigie */
.logo-maison { width: 26px; height: 26px; flex: none; }
.logo-maison .fente { fill: var(--surface); }
.onglet { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.onglet .logo-vigie { width: 15px; height: 15px; }

/* Les trois grandes cartes (Écrans Roch · 01 Portail) */
.vedettes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vedette {
  position: relative;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-top: 2px solid var(--teinte, var(--gris));
  border-radius: var(--rayon);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--texte);
  transition: border-color .15s, background-color .15s, transform .15s;
}
.vedette:first-child { grid-column: 1 / -1; }
.vedette:hover { background: var(--surface-2); border-color: var(--teinte, var(--bordure-2)); }
.vedette-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vedette .icone { width: 44px; height: 44px; }
.vedette .icone-img { border-radius: 10px; }
.vedette-nom { font-family: var(--titre); font-size: 20px; font-weight: 500; line-height: 1.15; }
.vedette-desc { font-size: 14px; line-height: 1.5; color: var(--texte-2); text-wrap: pretty; }
.vedette-pied { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; font-size: 11px; }
.vedette-etat { color: var(--texte-3); }
.vedette-hote { color: var(--texte-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vedette .externe { position: absolute; top: 14px; right: 40px; }
.vedette.etat-carte-hs { border-color: color-mix(in srgb, var(--hs) 45%, var(--bordure)); border-top-color: var(--hs); }
.vedette.etat-carte-degrade { border-top-color: var(--alerte); }

/* L'atelier replié */
.atelier {
  background: var(--surface);
  border: 1px dashed var(--bordure-2);
  border-radius: var(--rayon);
}
.atelier-tete {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  user-select: none;
}
.atelier-tete::-webkit-details-marker { display: none; }
.atelier-tete .icone { width: 32px; height: 32px; }
.atelier-titre { font-family: var(--titre); font-size: 17px; font-weight: 500; }
.atelier-compte { font-size: 11px; color: var(--texte-3); margin-left: auto; }
.atelier .chevron { width: 18px; height: 18px; color: var(--texte-3); transition: transform .2s; }
.atelier[open] .chevron { transform: rotate(180deg); }
.atelier[open] .atelier-tete { border-bottom: 1px dashed var(--bordure); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 16px; }
.puce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: var(--nuit);
  font-size: 14px;
  color: var(--texte);
  transition: border-color .15s;
}
.puce:hover { border-color: var(--texte-3); }
.puce .icone { width: 22px; height: 22px; }
.puce.etat-puce-hs { border-color: color-mix(in srgb, var(--hs) 50%, var(--bordure)); }
.puce.etat-puce-degrade { border-color: color-mix(in srgb, var(--alerte) 45%, var(--bordure)); }
.puce.etat-puce-inconnu { opacity: 0.7; }

@media (min-width: 720px) {
  .logo-maison { width: 30px; height: 30px; }
  .onglet .logo-vigie { width: 16px; height: 16px; }
  .vedettes { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .vedette:first-child { grid-column: auto; }
  .vedette { padding: 26px; gap: 14px; }
  .vedette .icone { width: 52px; height: 52px; }
  .vedette .icone-img { border-radius: 12px; }
  .vedette-nom { font-size: 24px; }
  .vedette-desc { font-size: 15px; }
  .vedette-pied { font-size: 12px; padding-top: 10px; }
  .vedette .externe { top: 22px; right: 48px; }
  .atelier-tete { padding: 18px 22px; }
  .puces { padding: 18px 22px 22px; gap: 10px; }
  .tuiles-famille { grid-template-columns: repeat(2, 1fr); }
  .sous-court { display: none; }  /* sur bureau la tuile garde la description */
}
@media (min-width: 1000px) {
  .tuiles-famille { grid-template-columns: repeat(4, 1fr); }
}


/* =====================================================================
   Pierre claire — thème clair « pastel teinté »
   Fond blanc cassé chaud, un lavis pâle de sa teinte sur chaque carte, le nom
   dans l'encre foncée de la charte, l'icône en version pleine. L'or reste le
   seul bouton d'action. Activé par data-theme="clair" sur <html> (posé avant le
   premier rendu depuis le réglage du téléphone ou le choix mémorisé).
   ===================================================================== */
:root[data-theme="nuit"] { color-scheme: dark; }
:root[data-theme="clair"] {
  color-scheme: light;
  --nuit: #FAF8F4;
  --surface: #FFFFFF;
  --surface-2: #F5F2EC;
  --bordure: #EBE6EC;
  --bordure-2: #D6D0DC;
  --texte: #0A0810;
  --texte-2: #4A4655;
  --texte-3: #6E6480;
  --texte-4: #6E6480;
  --or-clair: #E9A21A;
  --voile-alerte: rgba(229, 161, 27, 0.14);
  --reserve: #0A0810;

  /* états : libellé foncé, pastille vive */
  --ok: #3F6B1E;      --ok-point: #5FB33A;
  --alerte: #7A5306;  --alerte-point: #E5A11B;
  --hs: #9D2B5B;      --hs-point: #E8578A;
  --inconnu: #6E6480;

  /* teintes : le bloc de l'icône et le lavis (un cran plus profondes que la nuit,
     pour tenir sur le blanc), et l'encre du nom */
  --violet: #7C4DF0; --violet-encre: #5B21B6;
  --jade:   #2DB09B; --jade-encre:   #0F766E;
  --rose:   #EE5F8E; --rose-encre:   #9D2B5B;
  --bleu:   #5A90FF; --bleu-encre:   #2B4E9D;
  --vert:   #7AC13A; --vert-encre:   #3F6B1E;
  --ciel:   #2FB4E6; --ciel-encre:   #0B5F80;
  --sable:  #D9A85A; --sable-encre:  #7A4E1E;
  --gris:   #8B7BA8; --gris-encre:   #5C5175;

  --lavis-pct: 13%;
}

/* En-tête : le fond chaud translucide, les onglets en capsule */
/* Le flou est réservé au bureau : sous 720 px la barre d'onglets est en position fixe dans
   l'en-tête, et un backdrop-filter en ferait le bloc conteneur (elle remonterait en haut). */
@media (min-width: 720px) {
  :root[data-theme="clair"] .entete {
    background: color-mix(in srgb, var(--nuit) 86%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
}
:root[data-theme="clair"] .bouton-or { border: 1px solid rgba(26, 18, 6, 0.18); box-shadow: 0 6px 16px -6px rgba(240, 168, 30, 0.55); }
:root[data-theme="clair"] .chip-demo { color: var(--alerte); }
@media (min-width: 720px) {
  :root[data-theme="clair"] .onglets { padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--texte) 6%, transparent); }
  :root[data-theme="clair"] .onglet[aria-current="page"] { background: var(--surface); box-shadow: 0 1px 2px rgba(26, 21, 35, 0.08), 0 0 0 1px rgba(26, 21, 35, 0.03); }
}
:root[data-theme="clair"] .bandeau { background: var(--voile-alerte); }

/* Les cartes teintées : vedettes, cartes moyennes, puces d'atelier */
:root[data-theme="clair"] .vedette,
:root[data-theme="clair"] .tuile,
:root[data-theme="clair"] .puce {
  --lavis: color-mix(in srgb, var(--teinte) var(--lavis-pct), #FFFFFF);
  --lavis-fort: color-mix(in srgb, var(--teinte) calc(var(--lavis-pct) + 8%), #FFFFFF);
  border-color: transparent;
  background: var(--surface);   /* repli si color-mix() est inconnu */
  background:
    radial-gradient(130% 100% at 0% 0%, var(--lavis-fort) 0%, transparent 62%),
    var(--lavis);
  color: var(--encre);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(26, 21, 35, 0.04), 0 12px 28px -20px color-mix(in srgb, var(--teinte) 55%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
:root[data-theme="clair"] .vedette { --lavis-pct: 14%; border-top-color: transparent; }
:root[data-theme="clair"] .tuile { --lavis-pct: 12%; }
:root[data-theme="clair"] .puce { --lavis-pct: 11%; }
:root[data-theme="clair"] .vedette:hover,
:root[data-theme="clair"] .tuile:hover,
:root[data-theme="clair"] .puce:hover {
  --lavis-pct: 19%;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 4px rgba(26, 21, 35, 0.05), 0 20px 36px -18px color-mix(in srgb, var(--teinte) 60%, transparent);
}
:root[data-theme="clair"] .vedette-nom,
:root[data-theme="clair"] .tuile-nom,
:root[data-theme="clair"] .puce-nom { color: var(--encre); }
:root[data-theme="clair"] .vedette-desc,
:root[data-theme="clair"] .tuile-sous { color: color-mix(in srgb, var(--encre) 58%, #3E3848); }
:root[data-theme="clair"] .vedette-etat,
:root[data-theme="clair"] .vedette-hote { color: color-mix(in srgb, var(--encre) 70%, #3E3848); }
:root[data-theme="clair"] .tuile-sous.etat-hs, :root[data-theme="clair"] .vedette-etat.etat-hs { color: var(--hs); }
:root[data-theme="clair"] .tuile-sous.etat-degrade, :root[data-theme="clair"] .vedette-etat.etat-degrade { color: var(--alerte); }
:root[data-theme="clair"] .externe { background: rgba(255, 255, 255, 0.7); border-color: color-mix(in srgb, var(--teinte) 30%, #FFFFFF); color: var(--encre); }
:root[data-theme="clair"] .externe:hover { background: #FFFFFF; }

/* Une panne : le lavis passe au rose, le libellé le dit */
:root[data-theme="clair"] .vedette.etat-carte-hs,
:root[data-theme="clair"] .tuile.etat-tuile-hs,
:root[data-theme="clair"] .puce.etat-puce-hs { --teinte: var(--rose); --encre: var(--rose-encre); }
:root[data-theme="clair"] .tuile.etat-tuile-degrade,
:root[data-theme="clair"] .puce.etat-puce-degrade { --teinte: var(--sable); --encre: var(--sable-encre); }

/* L'atelier et les cartes de Vigie : blanc sur pierre chaude */
:root[data-theme="clair"] .atelier { background: var(--surface); border-color: var(--bordure-2); }
:root[data-theme="clair"] .carte,
:root[data-theme="clair"] .groupe { box-shadow: 0 1px 2px rgba(26, 21, 35, 0.04), 0 10px 24px -20px rgba(26, 21, 35, 0.35); }
:root[data-theme="clair"] .stat-valeur small { color: var(--texte-3); }
:root[data-theme="clair"] .bouton-contour:hover { border-color: var(--or-clair); }
:root[data-theme="clair"] .point.etat-inconnu, :root[data-theme="clair"] .etat-inconnu .point { background: var(--inconnu); opacity: 0.5; }
:root[data-theme="clair"] :focus-visible { outline-color: #B17C16; }