/* Messagerie Alpinux — feuille unique, sans dépendance.
   Les couleurs sont des variables : une seule redéfinition suffit pour le
   thème sombre, que l'on suit sans demander (personne ne veut d'un fond blanc
   à 23 h en préparant l'envoi du lendemain). */

:root {
  /* Déclaré pour que le navigateur sache que la page gère les deux thèmes.
     Sans cette ligne, Chrome sur Android applique en plus son inversion
     automatique par-dessus le thème sombre ci-dessous : le texte saisi dans
     un champ prend alors la couleur du fond et devient invisible — on croit
     que le clavier ne fonctionne pas. Elle règle aussi la couleur native du
     curseur, de la sélection et des contrôles. */
  color-scheme: light dark;

  --fond:        #f7f7f5;
  --fond-bloc:   #ffffff;
  --texte:       #1c1c1a;
  --texte-doux:  #6b6b66;
  --trait:       #dedcd7;
  --accent:      #1b6b4c;
  --accent-clair:#e8f3ee;
  --alerte:      #a33228;
  --alerte-clair:#fbeae8;
  --succes:      #1b6b4c;
  --succes-clair:#e8f3ee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond:        #17181a;
    --fond-bloc:   #1f2124;
    --texte:       #e8e8e4;
    --texte-doux:  #9a9a94;
    --trait:       #34373b;
    --accent:      #5cc39a;
    --accent-clair:#1c2a25;
    --alerte:      #e8877c;
    --alerte-clair:#2c1f1e;
    --succes:      #5cc39a;
    --succes-clair:#1c2a25;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 12px 20px;
  background: var(--fond-bloc);
  border-bottom: 1px solid var(--trait);
}
.marque { font-weight: 600; color: var(--texte); text-decoration: none; margin-right: auto; }
/* Menu principal : trois sections, et rien d'autre à ce niveau. */
header nav { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
header nav a { color: var(--texte-doux); text-decoration: none; }
header nav a:hover { color: var(--accent); }
.sections a.actif { color: var(--texte); font-weight: 600; }

/* Sous-menu de la section ouverte, sur sa propre ligne. */
.sous-menu {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding: 8px 20px;
  background: var(--fond-bloc);
  border-bottom: 1px solid var(--trait);
}
.sous-menu a { color: var(--texte-doux); text-decoration: none; font-size: 0.92rem; padding: 2px 0; }
.sous-menu a:hover { color: var(--accent); }
.sous-menu a.actif { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.utilisateur { color: var(--texte-doux); }

main { max-width: 980px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 1.5rem; margin: 0 0 20px; }
h2 { font-size: 1.15rem; margin: 32px 0 12px; }
a { color: var(--accent); }

/* Cartes de chiffres du tableau de bord */
.cartes { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.carte {
  flex: 1 1 200px; padding: 16px;
  background: var(--fond-bloc); border: 1px solid var(--trait); border-radius: 8px;
}
.chiffre { display: block; font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.libelle { color: var(--texte-doux); font-size: 0.85rem; }

table { width: 100%; border-collapse: collapse; background: var(--fond-bloc); }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--trait); }
th { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-doux); }
tr.inactif td { opacity: 0.55; }

/* Les tableaux peuvent déborder sur mobile : on les laisse défiler seuls
   plutôt que de faire défiler la page entière. */
@media (max-width: 640px) {
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Tous les champs de saisie, et pas seulement text et email : un sélecteur
   d'attribut ne s'applique qu'au type qu'il nomme, si bien qu'un champ de
   recherche ou d'URL se retrouvait sans couleur définie — donc illisible sur
   un thème sombre. La liste est explicite plutôt que négative : on voit d'un
   coup d'œil ce qui est couvert. */
input[type=text], input[type=email], input[type=search], input[type=url],
input[type=tel], input[type=password], input[type=number], input[type=date],
input:not([type]), select, textarea {
  width: 100%; max-width: 560px; padding: 7px 9px;
  background: var(--fond-bloc); color: var(--texte);
  border: 1px solid var(--trait); border-radius: 5px;
  font: inherit;
  /* Le curseur suit la couleur du texte : sur mobile, un caret invisible
     donne l'impression que le champ n'accepte rien. */
  caret-color: var(--texte);
  /* Chrome sur Android, quand l'utilisateur force le thème sombre dans ses
     réglages, réécrit « color » sur les champs de saisie. Il respecte en
     revanche text-fill-color, qui l'emporte sur color : c'est la seule
     propriété qui garantisse un texte visible dans tous les cas. */
  -webkit-text-fill-color: var(--texte);
}

/* Le remplissage automatique impose sa propre couleur de texte sur les
   navigateurs WebKit ; sans cette ligne, une adresse rappelée par le
   navigateur s'affiche en sombre sur sombre. */
input:-webkit-autofill {
  -webkit-text-fill-color: var(--texte);
  -webkit-box-shadow: 0 0 0 40px var(--fond-bloc) inset;
}
textarea { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: 13px; }
label { display: block; font-weight: 500; }
label input, label select, label textarea { font-weight: 400; margin-top: 4px; }

.btn, .btn-sm, .btn-danger {
  display: inline-block; padding: 8px 15px;
  background: var(--accent); color: #fff;
  border: 0; border-radius: 5px; font: inherit; cursor: pointer; text-decoration: none;
}
.btn-sm { padding: 4px 10px; font-size: 0.85rem; }
.btn-danger { background: var(--alerte); }
.lien { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
form.inline { display: inline; }

.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 18px; }
.flash-ok     { background: var(--succes-clair); color: var(--succes); }
.flash-erreur { background: var(--alerte-clair); color: var(--alerte); }

.badge { font-size: 0.78rem; padding: 2px 8px; border-radius: 10px; background: var(--trait); }
.badge-envoye, .badge-terminee, .badge-actif { background: var(--succes-clair); color: var(--succes); }
.badge-echec, .badge-bounce, .badge-annulee, .badge-plainte { background: var(--alerte-clair); color: var(--alerte); }
.badge-prete, .badge-en_cours { background: var(--accent-clair); color: var(--accent); }

.discret { color: var(--texte-doux); font-size: 0.88rem; }
code { background: var(--trait); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
progress { width: 140px; vertical-align: middle; }
details { margin: 16px 0; }
summary { cursor: pointer; color: var(--accent); }
footer { border-top: 1px solid var(--trait); padding: 16px 20px; color: var(--texte-doux); font-size: 0.85rem; }

/* Page publique de désabonnement : pas de barre de navigation, donc on
   recentre le propos. */
body.public main { max-width: 540px; padding-top: 56px; }
body.public .pied { margin-top: 36px; color: var(--texte-doux); font-size: 0.85rem; }

/* Messagerie interne. Rien de neuf dans le vocabulaire visuel : les mêmes
   couleurs, les mêmes arrondis, pour que les deux parties du site se
   ressemblent malgré leurs usages opposés. */
.pastille {
  display: inline-block; min-width: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--accent); color: var(--fond-bloc);
  font-size: 0.75rem; text-align: center; line-height: 18px;
}
.onglets { display: flex; gap: 16px; margin: 0 0 14px; border-bottom: 1px solid var(--trait); }
.onglets a { padding: 6px 0; color: var(--texte-doux); text-decoration: none; }
.onglets a.actif { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
tr.non-lu td { font-weight: 600; }
.message {
  background: var(--fond-bloc); border: 1px solid var(--trait);
  border-radius: 8px; padding: 16px 18px; margin-bottom: 24px;
}
.message h2 { margin-top: 4px; }
/* Le corps est saisi au clavier, retours à la ligne compris : on les respecte,
   sans laisser une longue ligne déborder de la page. */
.corps {
  margin: 0; font: inherit;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Recherche d'abonnés. Le formulaire tient sur une ligne, et passe à la ligne
   de lui-même sur un écran étroit. */
.recherche { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.recherche label { font-weight: 500; }
.recherche input[type=search] { min-width: 240px; }
.pagination { display: flex; gap: 10px; margin-top: 14px; }

/* Aperçu du message. On imite une fenêtre de courrier : un cadre, des en-têtes
   en tête, le corps rendu en dessous — de quoi juger d'un coup d'œil, sans
   prétendre reproduire le rendu de chaque client mail. */
.apercu {
  background: var(--fond-bloc); border: 1px solid var(--trait);
  border-radius: 8px; overflow: hidden;
}
.apercu .entetes {
  display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px;
  margin: 0; padding: 12px 18px;
  background: var(--accent-clair); border-bottom: 1px solid var(--trait);
  font-size: 0.88rem;
}
.apercu .entetes dt { color: var(--texte-doux); }
.apercu .entetes dd { margin: 0; overflow-wrap: anywhere; }
.apercu-corps { padding: 6px 18px 18px; }
.apercu-corps h2 { font-size: 1.15rem; margin: 18px 0 8px; }
.apercu-corps h3 { font-size: 1rem; margin: 16px 0 6px; }
.apercu-corps blockquote {
  margin: 12px 0; padding: 2px 14px;
  border-left: 3px solid var(--trait); color: var(--texte-doux);
}
.apercu-corps hr { border: 0; border-top: 1px solid var(--trait); margin: 18px 0; }
.apercu-corps img { max-width: 100%; }

/* Choix par puces plutôt que menu déroulant : tout est visible d'un coup,
   y compris le nombre de destinataires, avant de cliquer. */
.choix { border: 1px solid var(--trait); border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; }
.choix legend { padding: 0 6px; color: var(--texte-doux); font-size: 0.88rem; }
.choix-ligne { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-weight: 400; cursor: pointer; }

/* Confirmation avant une action sans retour. Une page plutôt qu'une boîte de
   dialogue du navigateur : celle-ci disparaît dès que JavaScript est absent,
   et ne laisse pas relire ce qu'on s'apprête à envoyer. */
.confirmation {
  border: 1px solid var(--alerte); border-radius: 8px;
  background: var(--alerte-clair); padding: 4px 18px 12px; margin-bottom: 24px;
}
.confirmation h2 { margin-top: 14px; }

/* En-tête d'un message de discussion : le nom, la date, et les actions du
   gestionnaire sur la même ligne. Un <div> et non un <p>, qui ne peut pas
   contenir de formulaire. */
.entete-message { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.entete-message form { display: inline; }