/* Portail Sendia — feuille de style unique, mobile d'abord. */

:root {
  color-scheme: light dark;
  --fond: #f4f6f8;
  --surface: #ffffff;
  --texte: #1b2330;
  --texte-doux: #5b6675;
  --bord: #dde3ea;
  --marque: #0f766e;
  --marque-fonce: #0b574f;
  --marque-douce: #e6f3f1;
  --succes: #0f766e;
  --succes-fond: #e6f3f1;
  --erreur: #b3261e;
  --erreur-fond: #fdeceb;
  --attention: #8a5a00;
  --attention-fond: #fdf4e2;
  --rayon: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #11161c;
    --surface: #1a2029;
    --texte: #e8edf3;
    --texte-doux: #a3aebd;
    --bord: #2c3440;
    --marque: #2dd4bf;
    --marque-fonce: #14b8a6;
    --marque-douce: #14312e;
    --succes: #2dd4bf;
    --succes-fond: #14312e;
    --erreur: #ff8a80;
    --erreur-fond: #3a1d1b;
    --attention: #f3c163;
    --attention-fond: #3a2f17;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.conteneur {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ------------------------------------------------------------------ entete */
.entete {
  background: var(--marque);
  color: #fff;
  padding-block: 14px;
}
.entete-inner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.logo { font-size: 1.3rem; font-weight: 700; letter-spacing: .5px; }
.logo-sous { font-size: .85rem; opacity: .85; }
.entete-form { margin-left: auto; }
.entete .bouton-discret {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}

main.conteneur { flex: 1; padding-block: 20px 32px; }

/* ------------------------------------------------------------------ cartes */
.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 20px 18px;
  margin-bottom: 18px;
}
.carte-etroite { max-width: 520px; margin-inline: auto; }
.carte-succes { border-color: var(--succes); }
.carte-erreur { border-color: var(--erreur); }

h1 { font-size: 1.35rem; margin: 0 0 12px; line-height: 1.3; }
h2 { font-size: 1.05rem; margin: 22px 0 8px; }
h2:first-of-type { margin-top: 12px; }
p { margin: 0 0 12px; }
.note { color: var(--texte-doux); font-size: .88rem; }

/* ----------------------------------------------------------------- formulaires */
label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin: 14px 0 6px;
}
label.case { font-weight: 400; font-size: .88rem; display: flex; align-items: center; gap: 8px; }
input[type="text"], input[type="password"], textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--bord);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
  color: var(--texte);
}
textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92rem; }
input:focus, textarea:focus {
  outline: 2px solid var(--marque);
  outline-offset: 1px;
  border-color: var(--marque);
}

.bouton {
  display: inline-block;
  margin-top: 16px;
  padding: 11px 18px;
  background: var(--marque);
  color: #fff;
  border: 1px solid var(--marque);
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}
.bouton:hover { background: var(--marque-fonce); }
.bouton-discret {
  background: transparent;
  color: var(--marque);
  border-color: var(--bord);
  font-weight: 500;
  padding: 7px 12px;
  margin-top: 0;
  min-height: 36px;
  font-size: .85rem;
}
.bouton-discret:hover { background: var(--marque-douce); }

/* ------------------------------------------------------------------ alertes */
.alerte {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: .92rem;
  margin: 0 0 14px;
  border: 1px solid transparent;
}
.alerte ul { margin: 0; padding-left: 20px; }
.alerte-erreur, .alerte-warn { background: var(--erreur-fond); color: var(--erreur); border-color: currentColor; }
.alerte-ok { background: var(--succes-fond); color: var(--succes); border-color: currentColor; }
.alerte-attention { background: var(--attention-fond); color: var(--attention); border-color: currentColor; }

.badge-succes {
  display: inline-block;
  background: var(--succes-fond);
  color: var(--succes);
  font-weight: 600;
  font-size: .85rem;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* --------------------------------------------------------------- invitation */
.numero-vedette {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--marque);
  background: var(--marque-douce);
  padding: 12px 14px;
  border-radius: 8px;
  text-align: center;
  word-break: break-word;
}

.fiche { margin: 12px 0; }
.fiche dt { font-weight: 600; font-size: .85rem; color: var(--texte-doux); margin-top: 10px; }
.fiche dd { margin: 4px 0 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
  background: var(--marque-douce);
  color: var(--texte);
  padding: 3px 7px;
  border-radius: 6px;
  word-break: break-all;
}
code[data-copiable] { cursor: pointer; }
code[data-copiable]::after {
  content: " ⧉";
  opacity: .55;
  font-size: .8em;
}
code.copie::after { content: " ✓ copié"; opacity: 1; color: var(--succes); }

/* ----------------------------------------------------------------- listes */
.liste-erreurs { margin: 0; padding-left: 20px; font-size: .92rem; }
.liste-erreurs code { background: var(--erreur-fond); }
.liste-liens { list-style: none; margin: 0; padding: 0; }
.liste-liens li {
  padding: 10px 0;
  border-top: 1px solid var(--bord);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.liste-liens .numero { font-weight: 600; }
.lien { display: block; }

/* -------------------------------------------------------------- compteurs */
.compteurs { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.pastille-pending { color: var(--marque); background: var(--marque-douce); }
.pastille-used { color: var(--succes); background: var(--succes-fond); }
.pastille-expired { color: var(--attention); background: var(--attention-fond); }
.pastille-revoked { color: var(--erreur); background: var(--erreur-fond); }

/* --------------------------------------------------------------- tableaux */
.tableau-defilant { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; color: var(--texte-doux); }
td form { display: inline; }

/* Sur petit ecran, le tableau se replie en fiches empilees. */
@media (max-width: 640px) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr {
    border: 1px solid var(--bord);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 6px 4px;
  }
  td { border: none; padding: 5px 10px; }
  td::before {
    content: attr(data-libelle);
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--texte-doux);
  }
}

/* ------------------------------------------------------------------- pied */
.pied {
  border-top: 1px solid var(--bord);
  padding-block: 14px;
  font-size: .8rem;
  color: var(--texte-doux);
}
.lien-retour { color: var(--marque); }