/* Rev'IA Social : feuille principale. Couleurs de docs/04 section 1.
   Aucun style en ligne (CSP) : les couleurs d'univers viennent de /univers.css. */
:root {
  --bleu-nuit: #0B3E7A; --bleu: #1264C4; --bleu-clair: #E8F1FB;
  --vert-nuit: #0B5D4E; --vert: #1F8A5B; --vert-clair: #E6F4EE;
  --degrade: linear-gradient(135deg, #0B3E7A 0%, #0B5D4E 100%);
  --texte: #14212B; --texte-doux: #5B6B7A; --fond: #F6F9FB; --carte: #FFFFFF;
  --alerte: #C62828; --attention: #E8692A; --ok: #1F8A5B;
  --bord: #D6E0E8; --orange-clair: #FDEBDD; --rouge-clair: #FBE4E4;
  --rayon: 10px; --u: #1264C4;
}
[data-theme="sombre"] {
  --bleu-clair: #13263D; --vert-clair: #12302A;
  --texte: #E6EDF3; --texte-doux: #9FB0BF; --fond: #0E1620; --carte: #16212D;
  --bord: #2A3A4A; --orange-clair: #3A2616; --rouge-clair: #3A1818;
  --bleu: #5EA2F0; --vert: #4CC38A;
}
* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.45;
  overflow-wrap: anywhere;
}
a { color: var(--bleu); }
h1 { font-size: 1.45rem; margin: .4rem 0 .8rem; }
h2 { font-size: 1.15rem; margin: 1.2rem 0 .6rem; }
h3 { font-size: 1rem; margin: .8rem 0 .4rem; }
img, svg { max-width: 100%; }
.contenu { max-width: 1200px; margin: 0 auto; padding: 1rem 1rem 6rem; }
.doux { color: var(--texte-doux); font-size: .9rem; }
.cache { display: none !important; }
.texte p { max-width: 70ch; }

/* Navigation : barre basse sur téléphone, barre haute dès 768 px. */
.nav-haut { display: none; }
.nav-bas {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: flex;
  background: var(--degrade); padding-bottom: env(safe-area-inset-bottom);
}
.nav-bas > a, .nav-bas > span, .nav-plus > summary {
  flex: 1; min-height: 52px; display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; font-size: .78rem; text-align: center; padding: 0 2px;
}
.nav-bas [aria-current] { font-weight: 700; background: rgba(255, 255, 255, .14); }
.nav-plus { flex: 1; display: flex; }
.nav-plus > summary { list-style: none; cursor: pointer; }
.nav-plus > summary::-webkit-details-marker { display: none; }
.nav-plus-menu {
  position: absolute; bottom: 100%; right: 0; left: 0; background: var(--carte);
  border-top: 1px solid var(--bord); box-shadow: 0 -4px 14px rgba(0, 0, 0, .15);
}
.nav-plus-menu a, .nav-plus-menu span {
  display: flex; align-items: center; min-height: 48px; padding: 0 1rem;
  border-bottom: 1px solid var(--bord); color: var(--texte); text-decoration: none;
}
.nav-inactif { opacity: .5; }
@media (min-width: 768px) {
  html { font-size: 16px; }
  .nav-bas { display: none; }
  .nav-haut {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem;
    background: var(--degrade); color: #fff; padding: .5rem 1rem;
  }
  .nav-haut nav { display: flex; flex-wrap: wrap; gap: .2rem; flex: 1; }
  .nav-haut a, .nav-haut .nav-inactif {
    color: #fff; text-decoration: none; padding: .45rem .6rem; border-radius: 6px;
  }
  .nav-haut [aria-current] { background: rgba(255, 255, 255, .18); }
  .marque { font-weight: 700; }
  .contenu { padding-bottom: 2rem; }
}
.badge {
  display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 1rem;
  background: var(--attention); color: #fff; font-size: .75rem; line-height: 1.3rem; text-align: center;
}

/* Cartes, listes, grilles */
.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: .9rem 1rem; margin-bottom: 1rem;
}
.grille { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .grille-2 { grid-template-columns: 1fr 1fr; } .grille-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .grille-3 { grid-template-columns: repeat(3, 1fr); } }
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem;
  padding: .6rem .2rem; border-bottom: 1px solid var(--bord);
}
.liste > li:last-child { border-bottom: 0; }
.liste .titre { flex: 1 1 12rem; min-width: 0; }
.vide { color: var(--texte-doux); font-style: italic; }
.en-retard, .rouge { color: var(--alerte); }
.ligne-retard { border-left: 3px solid var(--alerte); padding-left: .5rem !important; }

/* Marqueurs d'univers : pastille et liseré, couleur fournie par .u-<slug> */
.marqueur { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--u); flex: none; }
.lisere { border-left: 3px solid var(--u); padding-left: .6rem; }
.etiquette { font-size: .8rem; color: var(--texte-doux); }

/* Formulaires et boutons : zones tactiles de 44 px */
label { display: block; font-weight: 600; margin: .6rem 0 .2rem; }
input[type=text], input[type=password], input[type=search], input[type=url], input[type=date],
input[type=number], input[type=email], select, textarea {
  width: 100%; min-height: 44px; padding: .5rem .65rem; font: inherit; color: var(--texte);
  background: var(--carte); border: 1px solid var(--bord); border-radius: 8px;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--bleu); outline-offset: 1px;
}
.case { display: flex; align-items: center; gap: .5rem; font-weight: 400; min-height: 44px; }
.case input { width: 22px; height: 22px; flex: none; }
.bouton, button {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-height: 44px; padding: .45rem .9rem; font: inherit; font-weight: 600;
  border-radius: 8px; border: 1px solid var(--bleu); background: var(--bleu); color: #fff;
  cursor: pointer; text-decoration: none;
}
.bouton-second { background: var(--carte); color: var(--bleu); }
.bouton-discret { background: transparent; border-color: transparent; color: var(--bleu); padding: .45rem .5rem; }
.bouton-danger { background: var(--alerte); border-color: var(--alerte); }
.bouton-ok { background: var(--vert); border-color: var(--vert); }
.boutons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.boutons form { display: inline; margin: 0; }
.en-ligne { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.en-ligne > * { flex: 1 1 10rem; }
.en-ligne > button, .en-ligne > .bouton { flex: 0 0 auto; }
fieldset { border: 1px solid var(--bord); border-radius: 8px; margin: .8rem 0; }
.segments { display: flex; flex-wrap: wrap; gap: .3rem; }
.segments button[aria-pressed="true"] { background: var(--bleu-nuit); border-color: var(--bleu-nuit); }

/* Messages */
.message { padding: .7rem 1rem; border-radius: 8px; background: var(--vert-clair); border-left: 4px solid var(--ok); }
.message-erreur { background: var(--rouge-clair); border-left-color: var(--alerte); }
.message-attention, .alerte-nom { background: var(--orange-clair); border-left: 4px solid var(--attention); }
.regle-univers { background: var(--bleu-clair); padding: .7rem 1rem; border-radius: 8px; margin: .5rem 0; }

/* Onglets */
.onglets { display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .3rem; margin-bottom: .8rem; }
.onglets a {
  flex: none; padding: .5rem .8rem; min-height: 44px; display: flex; align-items: center;
  border-radius: 2rem; background: var(--carte); border: 1px solid var(--bord);
  color: var(--texte); text-decoration: none; font-size: .92rem;
}
.onglets a[aria-current] { background: var(--bleu-nuit); border-color: var(--bleu-nuit); color: #fff; }

/* Tableaux : défilement horizontal limité au tableau lui-même */
.tableau { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--bord); vertical-align: top; }

/* Pastilles de santé */
.sante { display: flex; flex-wrap: wrap; gap: .4rem; }
.pastille { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 1rem; background: var(--carte); border: 1px solid var(--bord); font-size: .85rem; }
.pastille::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #9AA5B1; }
.pastille-vert::before { background: var(--ok); }
.pastille-orange::before { background: var(--attention); }
.pastille-rouge::before { background: var(--alerte); }

/* Connexion */
.boite-etroite { max-width: 26rem; margin: 2rem auto; }
.qr img { display: block; margin: .5rem auto; background: #fff; padding: 6px; border-radius: 8px; }
.codes { columns: 2; list-style: none; padding: 0; font-size: 1.1rem; }
.codes li { padding: .25rem 0; }
.form-deconnexion { margin: 0; }
.nav-haut .form-deconnexion button { color: #fff; min-height: 36px; }
.nav-plus-menu .form-deconnexion button { width: 100%; justify-content: flex-start; min-height: 48px; padding: 0 1rem; color: var(--texte); }

/* Textes copiables (posts, prompts) */
.bloc-texte { white-space: pre-wrap; background: var(--fond); border: 1px solid var(--bord); border-radius: 8px; padding: .7rem; font-size: .92rem; font-family: inherit; }