@charset "UTF-8";
/* ==========================================================================
   TOPCONSTRUCT — Blog & espace de rédaction
   --------------------------------------------------------------------------
   Complète assets/css/style.css : ce fichier ne contient que ce qui est
   propre au blog et à l'admin. Tout le reste (boutons, cartes, formulaires,
   en-tête, pied de page) vient de la feuille principale.

   Ce fichier utilisait les tokens de l'ancienne feuille (--marine, --jaune,
   --line, --muted, --muted-2, --cream). Ils n'existent plus depuis la
   refonte : 22 références ne résolvaient plus vers rien, et le blog comme
   l'admin s'affichaient sans bordures ni couleurs. Tout est repassé sur les
   tokens --tc-*.

   Sommaire
     01. Blog — liste et filtres
     02. Blog — corps d'article
     03. Admin — ossature
     04. Admin — tableaux et badges
     05. Admin — authentification et formulaires
     06. Admin — messages d'état
   ========================================================================== */


/* ==========================================================================
   01. BLOG — LISTE ET FILTRES
   ========================================================================== */

.cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
}

/* Filtre de catégorie. Rayon 8px comme les boutons du système : les pilules
   à 20px de l'ancienne version sortaient de l'échelle de la charte. */
.chip-cat {
  display: inline-block;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid var(--tc-filet);
  border-radius: var(--r-btn);
  color: var(--tc-marine);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.chip-cat:hover { border-color: var(--tc-jaune); }

.chip-cat.active {
  background: var(--tc-marine);
  border-color: var(--tc-marine);
  color: #fff;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  margin-top: var(--esp-5);
}

.pager-info {
  color: var(--tc-texte-doux);
  font-size: 14px;
}

/* Largeurs de lecture d'un article. Une seule source de vérité, au lieu des
   trois `max-width` en ligne qui se contredisaient. */
.wrap--lecture { max-width: 840px; }
.wrap--visuel  { max-width: 900px; margin-top: var(--esp-4); }

/* Image principale d'un article. Le rapport est fixé en CSS parce que les
   dimensions du fichier téléversé sont inconnues à l'écriture du gabarit :
   sans lui, la page sauterait au chargement de l'image (CLS). */
.post-hero {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--tc-vert-doux);
  border-radius: var(--r-carte);
  object-fit: cover;
}

/* Vignette d'article dans la liste. La même classe sert à l'image et, quand
   un article n'en a pas, à un bloc vide de mêmes dimensions : sans lui, les
   cartes de la grille n'auraient pas la même hauteur. */
.ph {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--tc-vert-doux);
  object-fit: cover;
}

/* Dans une carte, la vignette est collée aux angles supérieurs. */
.card .ph { border-radius: 0; }

/* Extrait affiché sous le titre dans la liste des articles.
   Remplace un style en ligne qui référençait un token supprimé. */
.post-extrait {
  margin: 0 0 10px;
  color: var(--tc-texte-doux);
  font-size: 15px;
}

/* Date de publication — liste et en-tête d'article. */
.post-date {
  margin: 10px 0 0;
  color: var(--tc-texte-tenu);
  font-size: 14px;
}


/* ==========================================================================
   02. BLOG — CORPS D'ARTICLE
   --------------------------------------------------------------------------
   Le HTML des articles est saisi par les rédacteurs : ces règles doivent
   couvrir tout ce qu'ils peuvent produire, sans classe à ajouter.
   ========================================================================== */

.post-body {
  max-width: 70ch;          /* longueur de ligne confortable en lecture */
  color: var(--tc-texte-doux);
  font-size: 17px;
  line-height: 1.8;
}

.post-body h2 {
  margin: 1.6em 0 .5em;
  color: var(--tc-marine);
  font-size: 26px;
  font-weight: 600;
}

.post-body h3 {
  margin: 1.4em 0 .4em;
  color: var(--tc-marine);
  font-size: 20px;
  font-weight: 500;
}

.post-body p { margin: 0 0 1.1em; }

.post-body img {
  max-width: 100%;
  height: auto;
  margin: 1.4em 0;
  border-radius: var(--r-carte);
}

.post-body ul,
.post-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }

.post-body li { margin-bottom: .4em; }

/* Lien souligné en jaune : le jaune reste l'accent, le texte reste lisible. */
.post-body a {
  color: var(--tc-marine);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--tc-jaune);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.post-body blockquote {
  margin: 1.4em 0;
  padding: .3em 0 .3em 1.2em;
  border-left: 2px solid var(--tc-jaune);   /* bordure d'accent, 0px de rayon */
  color: var(--tc-marine);
  font-style: normal;                       /* la charte ne prévoit pas d'italique */
  font-weight: 300;
}

.post-body table {
  width: 100%;
  margin: 1.4em 0;
  border-collapse: collapse;
  font-size: 15px;
}

.post-body th,
.post-body td {
  padding: 8px 12px;
  border: 1px solid var(--tc-filet);
  text-align: left;
}

.post-body th { color: var(--tc-marine); font-weight: 600; }

/* Un tableau large ne doit pas faire déborder la page. */
.post-body .table-wrap { overflow-x: auto; }

/* Ligne de contexte sous le chapô (commune · surface · budget). */
.post-meta {
  color: var(--tc-texte-doux);
  font-size: 15px;
}

/* Un bouton dans le corps d'article ne doit pas hériter du souligné des liens. */
.post-body .btn { text-decoration: none; }


/* --- Encadré de mise en avant ------------------------------------------
   Fond vert doux : la charte le réserve aux encadrés de confiance. */
.encadre {
  margin: 1.6em 0;
  padding: var(--esp-3);
  background: var(--tc-vert-doux);
  border-radius: var(--r-carte);
}

.encadre > :last-child { margin-bottom: 0; }


/* --- Tuiles de statistique --------------------------------------------
   Ce n'est pas un graphique : trois valeurs autonomes, sans encodage par la
   couleur, donc ni palette à valider ni survol à prévoir. Deux règles de la
   charte de visualisation s'appliquent tout de même :

     · la valeur est en SemiBold, pas en Bold — une valeur de tuile n'est pas
       un titre héros ;
     · pas de `tabular-nums` : à 26px, la chasse fixe déliera « 100 % » et
       « 21 nov. 2025 ». Les chiffres proportionnels sont réservés aux
       valeurs autonomes, la chasse fixe aux colonnes qui doivent s'aligner.

   Le libellé porte un token de texte, jamais une couleur d'accent. */
.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chiffre b {
  display: block;
  color: var(--tc-marine);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
}

.chiffre span {
  color: var(--tc-texte-doux);
  font-size: 14px;
}


/* ==========================================================================
   03. ADMIN — OSSATURE
   --------------------------------------------------------------------------
   L'espace de rédaction est un outil interne, pas une surface de marque.
   Les couleurs d'état (erreur, succès) y sont donc conservées : signaler une
   erreur en jaune serait moins clair, et le risque d'une saisie perdue est
   plus grave qu'un écart de palette sur un écran que seuls les rédacteurs
   voient. Ces couleurs n'apparaissent nulle part sur le site public.
   ========================================================================== */

body.admin {
  background: var(--tc-blanc-chaud);
  font-family: var(--tc-police);
}

.admin-bar {
  padding: 12px 0;
  background: var(--tc-marine);
}

.admin-bar a {
  margin-left: 2px;
  color: #C6CCD6;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.admin-bar a:hover,
.admin-bar a:focus-visible { color: var(--tc-jaune); }

.admin-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--esp-4) var(--gouttiere) var(--esp-7);
}

.admin-main h1 { margin: 0 0 var(--esp-3); }


/* ==========================================================================
   04. ADMIN — TABLEAUX ET BADGES
   ========================================================================== */

/* Conteneur de défilement : la liste des articles a beaucoup de colonnes. */
.admin-table-wrap { overflow-x: auto; }

.admin-table {
  width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tc-filet);
  border-radius: var(--r-carte);
  border-collapse: collapse;
}

.admin-table th {
  padding: 12px 14px;
  background: var(--tc-vert-doux);
  color: var(--tc-marine);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
}

.admin-table td {
  padding: 14px;
  border-top: 1px solid var(--tc-filet);
  font-size: 14px;
  vertical-align: top;
}

.actions { white-space: nowrap; }

.actions a {
  color: var(--tc-marine);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
}

.actions a:hover { color: var(--tc-jaune); }

/* Bouton d'apparence textuelle pour une action destructrice. */
.linkbtn {
  padding: 0;
  background: none;
  border: 0;
  color: #9E2A22;              /* rouge d'état — outil interne, voir §03 */
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.badge {
  padding: 3px 10px;
  border-radius: var(--r-btn);
  font-size: 12px;
  font-weight: 600;
}

.badge.pub { background: #DFF0E3; color: #1B6B2F; }   /* publié */
.badge.dft { background: var(--tc-filet); color: var(--tc-texte-doux); }   /* brouillon */


/* ==========================================================================
   05. ADMIN — AUTHENTIFICATION ET FORMULAIRES
   ========================================================================== */

.auth-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 82vh;
  padding: var(--esp-3);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: var(--esp-4);
  background: #fff;
  border: 1px solid var(--tc-filet);
  border-radius: var(--r-carte);
}

.auth-card h1,
.auth-card h2 { margin: 0 0 6px; }

/* Champ de slug préfixé par l'URL du blog. */
.slug-row {
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(26, 46, 74, .28);
  border-radius: var(--r-btn);
}

.slug-row span {
  padding: 0 2px 0 12px;
  color: var(--tc-texte-tenu);
  font-size: 14px;
  white-space: nowrap;
}

.slug-row input {
  border: 0 !important;
  outline-offset: -2px;
}

/* Saisie du HTML de l'article : police à largeur fixe. */
textarea.mono {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
}

/* Texte d'aide sous un champ (formats acceptés, précision technique).
   `.field .aide` existe dans la feuille principale, mais ces mentions-ci
   ne sont pas toujours dans un `.field` : il faut une règle autonome. */
.aide {
  margin: 6px 0 0;
  color: var(--tc-texte-tenu);
  font-size: 13px;
}

/* Séparateur entre deux groupes de champs du formulaire d'article. */
.sep {
  margin: var(--esp-3) 0;
  border: 0;
  border-top: 1px solid var(--tc-filet);
}


/* ==========================================================================
   06. ADMIN — MESSAGES D'ÉTAT
   --------------------------------------------------------------------------
   `role="alert"` côté HTML fait annoncer le message par les lecteurs
   d'écran ; l'icône textuelle évite de ne compter que sur la couleur.
   ========================================================================== */

.err,
.ok {
  margin-bottom: var(--esp-2);
  padding: 10px 14px;
  border-radius: var(--r-btn);
  font-size: 14px;
  font-weight: 500;
}

.err {
  background: #FBE9E7;
  border: 1px solid #E7B8B3;
  color: #9E2A22;
}

.ok {
  background: #DFF0E3;
  border: 1px solid #B4DCBE;
  color: #1B6B2F;
}

/* Préfixe textuel : le sens ne repose pas sur la seule couleur. */
.err::before { content: "⚠ "; }
.ok::before  { content: "✓ "; }

@media (max-width: 820px) {
  .admin-main .grid.c2 { grid-template-columns: 1fr; }
}


/* ==========================================================================
   DEMANDES DE CONTACT — tableau de bord  (préfixe .dm-)
   --------------------------------------------------------------------------
   Ajouté avec l'intégration Brevo. Tout est préfixé « dm- » pour qu'aucune
   règle ne puisse interférer avec celles de l'espace rédaction.

   Sur les couleurs : les pastilles d'état utilisent du rouge et du vert, comme
   les messages d'erreur et de succès plus haut dans ce fichier. C'est la même
   entorse assumée à la charte, pour la même raison — l'espace
   d'administration est un outil interne, pas une surface de marque, et un
   « échec d'envoi » en marine ne serait pas lu comme un signal. Le libellé
   accompagne toujours la couleur : le sens ne repose jamais sur elle seule.
   ========================================================================== */

.dm-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
}

.dm-exports {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
}

/* Les boutons d'export sont des liens : on annule le soulignement hérité et on
   aligne leur hauteur sur celle des boutons de formulaire. */
.dm-exports .btn {
  padding: 10px 18px;
  font-size: 14px;
  text-decoration: none;
}

.dm-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-2);
  padding: var(--esp-2);
  margin-bottom: var(--esp-3);
  background: var(--tc-vert-doux);
  border-radius: var(--r-carte);
}

.dm-champ {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 6px;
}

.dm-champ-court { flex: 0 1 240px; }

.dm-champ > span {
  color: var(--tc-texte-doux);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.dm-champ input,
.dm-champ select {
  width: 100%;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--tc-filet);
  border-radius: var(--r-btn);
  color: var(--tc-marine);
  font-family: inherit;
  font-size: 15px;
}

.dm-champ input:focus-visible,
.dm-champ select:focus-visible {
  border-color: var(--tc-marine);
  outline: 2px solid var(--tc-jaune);
  outline-offset: 1px;
}

.dm-filtres .btn { padding: 11px 20px; text-decoration: none; }

/* --- Le tableau ------------------------------------------------------- */

.dm-table { font-size: 13px; }

.dm-date { font-size: 12.5px; }

.dm-table td { padding: 12px; }

/* Une ligne sur deux teintée : sur sept colonnes, c'est ce qui permet de
   suivre une ligne du regard jusqu'au bout. */
.dm-table tbody tr:nth-child(even) { background: #FAFAF8; }

.dm-date {
  color: var(--tc-texte-doux);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dm-contact a {
  color: var(--tc-marine);
  font-weight: 500;
  white-space: nowrap;
}

/* Largeurs contraintes. Sept colonnes laissées libres débordaient du
   conteneur de 1200px : la colonne des états d'envoi se retrouvait coupée à
   droite, et le stade s'empilait un mot par ligne. Constaté à l'écran. */
.dm-projet { min-width: 200px; max-width: 260px; }
.dm-lieu   { min-width: 78px; }
.dm-stade  { min-width: 116px; }

.dm-projet summary {
  cursor: pointer;
  color: var(--tc-texte-doux);
}

.dm-projet summary:focus-visible {
  outline: 2px solid var(--tc-jaune);
  outline-offset: 2px;
}

.dm-projet details[open] summary { margin-bottom: 8px; font-weight: 600; }

.dm-complet {
  padding: 10px 12px;
  background: var(--tc-vert-doux);
  border-radius: var(--r-btn);
  color: var(--tc-marine);
  line-height: 1.6;
}

/* --- Pastilles d'état des envois -------------------------------------- */

/* Les pastilles sont en ligne, et la cellule reste une cellule de tableau.
   En faisant du <td> un conteneur flex, on perdait l'alignement vertical
   commun aux autres colonnes. */
.dm-envois { min-width: 88px; }

.dm-pastille {
  display: inline-block;
  margin: 0 3px 3px 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.dm-pastille.oui { background: #DFF0E3; color: #1B6B2F; }
.dm-pastille.non { background: #F7DEDE; color: #9B1C1C; }

/* Le point marque l'échec sans dépendre de la couleur — utile en impression
   comme pour un daltonien. */
.dm-pastille.non::after { content: " ✕"; }

.dm-pages {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}

.dm-pages .btn { text-decoration: none; }

@media (max-width: 720px) {
  .dm-tete { align-items: stretch; }
  .dm-exports .btn { flex: 1 1 auto; text-align: center; }
}

/* Pastille neutre — page de diagnostic Brevo. Ni succès ni échec : un fait
   à connaître, qui ne doit pas être lu comme une alerte. */
.dm-pastille.neutre { background: var(--tc-filet); color: var(--tc-texte-doux); }