/* Habillage volontairement sobre et neutre.
   Le vrai look viendra plus tard avec Claude Design : tout est regroupé ici,
   les gabarits n'ont aucun style en dur. */

:root {
  --fond: #f5f6f8;
  --carte: #ffffff;
  --texte: #1d2129;
  --discret: #6b7280;
  --trait: #dfe3e8;
  --accent: #2f6fb0;
  --danger: #b3261e;
  --succes: #1b7f4b;
  --rayon: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.5;
}

.entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.25rem;
  background: var(--carte);
  border-bottom: 1px solid var(--trait);
}
.marque { font-weight: 600; text-decoration: none; color: var(--texte); }
.nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nav a { color: var(--accent); text-decoration: none; }
.qui { color: var(--discret); }
.en-ligne { display: inline; }

.contenu { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }

.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.message {
  padding: .6rem .9rem; border-radius: var(--rayon);
  margin-bottom: .5rem; border: 1px solid var(--trait); background: var(--carte);
}
.message.erreur { border-color: var(--danger); color: var(--danger); }
.message.succes { border-color: var(--succes); color: var(--succes); }

.carte-login {
  max-width: 22rem; margin: 3rem auto; padding: 1.75rem;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

label { display: block; margin: .75rem 0 .25rem; font-weight: 500; }
input[type="text"], input[type="password"], input[type="number"], select {
  width: 100%; padding: .55rem .7rem; font-size: 1rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: #fff;
}
button {
  margin-top: .75rem; padding: .5rem .9rem; font-size: .95rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--carte); cursor: pointer;
}
.bouton-principal {
  width: 100%; background: var(--accent); color: #fff;
  border-color: var(--accent); font-weight: 600; padding: .65rem;
}
button.danger { color: var(--danger); border-color: var(--danger); }
button.lien {
  background: none; border: none; color: var(--accent);
  padding: 0; margin: 0; font-size: 1rem;
}

.bloc {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.25rem; margin-bottom: 1.5rem;
}

.tuiles {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.tuile a {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.25rem; text-decoration: none; color: var(--texte);
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); height: 100%;
}
.tuile a:hover { border-color: var(--accent); }
.tuile-icone { font-size: 1.6rem; }
.tuile-nom { font-weight: 600; }
.tuile-description { color: var(--discret); font-size: .875rem; }
.vide { color: var(--discret); }

/* Les tableaux d'admin peuvent déborder sur iPhone : on les laisse défiler
   horizontalement plutôt que de casser la mise en page. */
.tableau { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.tableau th, .tableau td {
  text-align: left; padding: .5rem .6rem;
  border-bottom: 1px solid var(--trait); vertical-align: top;
}
.tableau tr.inactif { opacity: .55; }
.case { display: block; font-weight: 400; margin: .15rem 0; }
.case input { width: auto; }
.actions details { margin-bottom: .5rem; }
.actions summary { cursor: pointer; color: var(--accent); }
small { color: var(--discret); display: block; }
code { background: var(--fond); padding: .1rem .3rem; border-radius: 4px; }

.formulaire { max-width: 24rem; }

/* --- Santé : couleurs d'état -------------------------------------------- */
/* Le vert reste discret, c'est voulu : seul un problème doit attirer l'œil. */
:root { --sante-ok: #1b7f4b; --sante-attention: #b26b00; --sante-critique: #b3261e; }

.sante-ok       { --teinte: var(--sante-ok); }
.sante-attention{ --teinte: var(--sante-attention); }
.sante-critique { --teinte: var(--sante-critique); }
.sante-inconnu  { --teinte: var(--discret); }

.pastille {
  width: .7rem; height: .7rem; border-radius: 50%;
  flex: 0 0 auto; background: var(--teinte, var(--discret));
}
.ic { display: block; }

/* --- Tuile de santé sur le bureau --------------------------------------- */
/* Même gabarit que les tuiles d'applis : elle s'insère dans la grille sans la
   déformer. Tout doit tenir dans cet espace — d'où les icônes à la place des
   libellés. */
.tuile-sante { border-left: 3px solid var(--teinte); border-radius: var(--rayon); }
.tuile-sante a { gap: .7rem; }

.tuile-entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; width: 100%;
}
.sante-global { color: var(--teinte); display: flex; }

/* Pastilles côte à côte, réparties automatiquement : deux fois plus compact
   qu'un empilement icône-au-dessus-de-l'état, ce qui permet de tenir dans le
   gabarit d'une tuile d'appli. */
.badges { display: flex; flex-wrap: wrap; gap: .3rem .55rem; }
.badge {
  display: inline-flex; align-items: center; gap: .12rem;
  color: var(--teinte); line-height: 1;
}
.badge-ok        { --teinte: var(--sante-ok); }
.badge-attention { --teinte: var(--sante-attention); }
.badge-critique  { --teinte: var(--sante-critique); }
.badge-inconnu   { --teinte: var(--discret); }

/* Le chiffre remplace la coche : il en dit plus qu'un simple « ça va ». */
.badge-valeur { font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Page dédiée --------------------------------------------------------- */
.sante-entete {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .7rem .9rem; background: var(--carte);
  border: 1px solid var(--trait); border-left: 4px solid var(--teinte);
  border-radius: var(--rayon);
}
.sante-age { margin-left: auto; color: var(--discret); font-size: .85rem; }

.sante-carte { border-left: 4px solid var(--teinte); }
.sante-carte h2 { display: flex; align-items: center; gap: .5rem; }
.sante-message { margin: 0 0 .5rem; }

.sante-alerte {
  margin: 1rem 0; padding: .6rem .8rem;
  background: var(--carte); border: 1px solid var(--danger);
  border-radius: var(--rayon); color: var(--danger); font-weight: 500;
}
.sante-detail {
  margin: .2rem 0 0; padding-left: 1.1rem;
  color: var(--discret); font-size: .9rem;
}
.sante-pied { color: var(--discret); font-size: .85rem; }

/* Dans les tableaux, colorer le texte plutôt que le fond : plus lisible, et
   ça reste discret quand tout va bien. */
.tableau tr.sante-critique td,
.tableau tr.sante-attention td { color: var(--teinte); font-weight: 500; }

/* --- Titre avec action alignée à droite --------------------------------- */
.titre-action {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.titre-action h1 { margin-bottom: 0; }
.titre-action form { margin: 0; }
.bouton-icone {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0; color: var(--accent); border-color: var(--trait);
}

/* --- Séquence de remise en service (mode dégradé uniquement) -------------
   Volontairement voyante et EN HAUT de la page : quand elle s'affiche, c'est
   la seule chose qui compte. Elle n'apparaît jamais en fonctionnement normal. */
.secours { border-left: 4px solid var(--sante-attention); background: #fffaf2; }
.secours h2 {
  display: flex; align-items: center; gap: .5rem;
  color: var(--sante-attention);
}
.secours-etapes { margin: 1rem 0 0; padding-left: 1.4rem; }
.secours-etapes li { margin-bottom: 1.1rem; }
.secours-etapes form { margin: .4rem 0 0; }

/* Résultat de la restauration : il doit rester lisible APRÈS coup. Un message
   éphémère disparaissait au rechargement, et on ne savait plus si les données
   étaient revenues ni de quand elles dataient. */
.restauration {
  margin: .6rem 0; padding: .55rem .8rem;
  border-radius: var(--rayon); border: 1px solid var(--trait);
  background: var(--carte);
}
.restauration.reussie  { border-color: var(--sante-ok); color: var(--sante-ok); }
.restauration.echouee  { border-color: var(--danger);   color: var(--danger); }
.restauration.en-cours { border-color: var(--sante-attention); color: var(--sante-attention); }
/* Reconstruction de la carte : 10 à 20 minutes pendant lesquelles la page
   doit dire où on en est. La phase est affichée en toutes lettres à côté de la
   barre — une barre seule ne dit pas ce qui se passe. */
.clonage {
  margin: .6rem 0; padding: .6rem .8rem;
  border-radius: var(--rayon); border: 1px solid var(--sante-attention);
  background: var(--carte); color: var(--sante-attention);
}
.clonage progress {
  display: block; width: 100%; max-width: 26rem; height: 1.1rem;
  margin: .45rem 0 .3rem;
}
.clonage-phase { font-size: .9rem; color: var(--discret); }
.clonage.reussie { border-color: var(--sante-ok); color: var(--sante-ok); }
.clonage.echouee { border-color: var(--danger);   color: var(--danger); }
.clonage.fige    { border-color: var(--danger);   color: var(--danger); }

.restauration-detail { margin: .3rem 0 .5rem; }
.restauration-detail summary { cursor: pointer; color: var(--accent); font-size: .9rem; }

/* Ce qu'il reste à faire quand aucune carte n'est insérée : une consigne, pas
   une étape. La distinction compte — une étape laisse croire qu'il y a quelque
   chose à cliquer ici. */
.secours-attente {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 1.2rem 0 0; padding: .8rem 1rem;
  background: var(--carte); border: 1px dashed var(--sante-attention);
  border-radius: var(--rayon);
}
.secours-attente .ic { flex: 0 0 auto; margin-top: .2rem; color: var(--sante-attention); }

/* --- Actions machine (admin) --------------------------------------------
   Volontairement discrètes et en bas de page : éteindre le Pi coupe le service
   pour toute la famille, ce n'est pas un geste quotidien. */
.machine {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-top: 2.5rem; padding: .75rem 1rem;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.machine-titre {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--discret); font-size: .9rem; font-weight: 500;
}
.machine button { margin: 0; }

/* Sources de sauvegarde disponibles, affichées AVANT le clic de restauration :
   sans elles, on ne sait pas si l'opération fait avancer ou reculer. */
.tableau.sources { max-width: 26rem; margin: .5rem 0 .3rem; }
.tableau.sources td, .tableau.sources th { padding: .3rem .5rem; font-size: .9rem; }

/* Verrou pendant une reconstruction : le bouton disparaît, remplacé par une
   explication. Un second clic relancerait un effacement complet à la fin du
   premier — sans raison, et sans que rien ne l'annonce. */
.clonage-verrou {
  margin: .5rem 0; padding: .4rem .7rem; font-size: .9rem;
  color: var(--discret); border-left: 3px solid var(--trait);
}