/* Le blog — feuille complémentaire, chargée APRÈS celle de la marque.
 *
 * Elle ne redéfinit ni l'entête, ni le pied, ni les boutons : ceux-là doivent rester
 * identiques au reste du site, sinon un lecteur qui arrive par un article ne reconnaît
 * pas la page d'accueil ensuite. Ce fichier ne traite que ce qui n'existait pas encore :
 * une colonne de lecture, des tableaux de chiffres, un sommaire, des cartes d'articles.
 *
 * Les deux marques n'ont pas les mêmes noms de variables — l'une parle de basalte et de
 * craie, l'autre d'encre et de papier. Plutôt que de dupliquer la feuille, on déclare
 * ici un jeu d'alias qui pioche dans l'une ou l'autre, avec une valeur de repli. Une
 * troisième marque n'aura rien à changer ici.
 */

:root {
  --b-encre:   var(--encre,       var(--texte,       #1B1F26));
  --b-doux:    var(--acier,       var(--texte-doux,  #5C6B7D));
  --b-papier:  var(--papier,      var(--craie,       #F1F4F7));
  --b-pur:     var(--papier-pur,  #FFFFFF);
  --b-trait:   var(--trait,       #D3DBE3);
  --b-signal:  var(--signal,      var(--vert,        #C2402A));
  --b-rayon:   var(--rayon,       2px);
}

/* Le fil d'Ariane vit maintenant dans les feuilles de marque : la page de contact
   l'utilise aussi et ne charge pas cette feuille-ci. */

/* ------------------------------------------------------------ index du blog */

.blog__tete { padding: clamp(2.4rem, 6vw, 4.4rem) 0 clamp(1.6rem, 4vw, 2.6rem); }
.blog__tete .surtitre,
.article__tete .surtitre {
  margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--b-signal); font-weight: 600;
}
.blog__intro { max-width: 62ch; color: var(--b-doux); font-size: 1.06rem; }

/* L'espace sous la grille est une MARGE, pas une garniture : le fond gris qui dessine les
   filets s'étendrait sinon sous la dernière carte, en une bande grise de trois centimètres. */
.cartes {
  list-style: none; margin: 0 0 clamp(2.5rem, 6vw, 4.5rem); padding: 0;
  display: grid; gap: 1px; background: var(--b-trait); border: 1px solid var(--b-trait);
}
@media (min-width: 900px) {
  .cartes { grid-template-columns: 1fr 1fr; }

  /* Nombre impair d'articles : la dernière carte prend la ligne entière.

     Les filets d'un pixel entre les cartes ne sont pas des bordures — c'est le fond de la
     grille qui affleure dans un écart d'un pixel. Élégant tant que la grille est pleine ;
     dès qu'une case reste vide, ce fond apparaît en grand et fait une tache grise à côté
     du dernier article. Plutôt que de renoncer aux filets, on supprime la case vide. */
  .carte:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Sur toute la largeur, le résumé partirait sur une seule ligne interminable. */
  .carte:last-child:nth-child(odd) .carte__resume { max-width: 62ch; }
}

.carte { background: var(--b-pur); }
.carte__lien {
  display: block; padding: clamp(1.4rem, 3vw, 2.1rem); height: 100%;
  color: inherit; text-decoration: none; transition: background .14s;
}
.carte__lien:hover { background: var(--b-papier); }
.carte__etiquette {
  display: inline-block; margin-bottom: .7rem; padding: .18rem .5rem;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--b-signal); border: 1px solid currentColor;
}
.carte__titre { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 0 0 .55rem; }
.carte__lien:hover .carte__titre { color: var(--b-signal); }
.carte__resume { margin: 0 0 .9rem; color: var(--b-doux); font-size: .96rem; }
.carte__meta { font-size: .8rem; color: var(--b-doux); font-variant-numeric: tabular-nums; }
.carte--vide { padding: 2rem; color: var(--b-doux); }

/* --------------------------------------------------------------- l'article */

.conteneur--article { max-width: 720px; }

.article__tete { padding: clamp(2.2rem, 5vw, 3.6rem) 0 1.4rem; }
.article__tete h1 { max-width: 20ch; }
.article__etiquette {
  display: inline-block; margin-bottom: .8rem; padding: .18rem .5rem;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--b-signal); border: 1px solid currentColor;
}
.article__resume {
  margin: 1rem 0 1.3rem; font-size: 1.14rem; line-height: 1.55; color: var(--b-encre);
  max-width: 60ch;
}
.article__meta {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: baseline;
  padding-top: 1rem; border-top: 1px solid var(--b-trait);
  font-size: .84rem; color: var(--b-doux);
}
.article__maj { font-style: italic; }

/* Le corps. La largeur est bornée en ch et non en pixels : c'est le nombre de
   caractères par ligne qui fatigue l'œil, pas la largeur de l'écran. */
.article__corps { padding-bottom: clamp(2rem, 5vw, 3.4rem); }
.article__corps > * { max-width: 68ch; }
.article__corps h2 {
  margin: 2.6rem 0 .9rem; padding-top: 1.4rem; border-top: 1px solid var(--b-trait);
  scroll-margin-top: 1.5rem;
}
.article__corps h3 { margin: 1.9rem 0 .6rem; scroll-margin-top: 1.5rem; }
.article__corps p { margin: 0 0 1.05rem; }
.article__corps ul, .article__corps ol { margin: 0 0 1.2rem; padding-left: 1.25rem; }
.article__corps li { margin-bottom: .45rem; }
.article__corps li::marker { color: var(--b-signal); }

.article__corps blockquote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem;
  border-left: 3px solid var(--b-signal);
  font-size: 1.06rem; color: var(--b-encre);
}
.article__corps blockquote p { margin: 0; }

.article__corps code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
  background: var(--b-papier); padding: .1em .35em; border: 1px solid var(--b-trait);
}

.rues {
  font-size: .9rem; color: var(--b-doux); margin: -.4rem 0 1.4rem;
  padding-left: .9rem; border-left: 2px solid var(--b-trait);
}
.rues span { font-weight: 600; color: var(--b-encre); }

/* ---------------------------------------------------------- les tableaux */

/* Un tableau de onze secteurs ne tient pas sur un téléphone. Il défile donc dans sa
   propre boîte : c'est la page qui ne doit jamais défiler de côté, pas le tableau. */
.tableau { margin: 1.8rem 0 2rem; max-width: none; }
.tableau > table { width: 100%; }
.tableau { overflow-x: auto; }
.article__corps .tableau { max-width: 100%; }

.tableau table { border-collapse: collapse; min-width: 420px; font-size: .93rem; }
.tableau caption {
  caption-side: top; text-align: left; padding-bottom: .7rem;
  font-weight: 600; font-size: .95rem;
}
.tableau th, .tableau td {
  padding: .58rem .8rem; text-align: left; border-bottom: 1px solid var(--b-trait);
}
.tableau thead th {
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--b-doux); font-weight: 600; border-bottom: 2px solid var(--b-encre);
  white-space: nowrap;
}
.tableau tbody th { font-weight: 600; white-space: nowrap; }
.tableau tbody tr:hover { background: var(--b-pur); }
.tableau .chiffre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau .discret { color: var(--b-doux); }
.tableau .vide { color: var(--b-doux); cursor: help; }
.tableau figcaption,
figure.tableau > figcaption {
  margin-top: .8rem; font-size: .82rem; line-height: 1.5; color: var(--b-doux);
  max-width: 68ch;
}

.evo { font-weight: 600; }
.evo--hausse { color: #1F7A4C; }
.evo--baisse { color: var(--b-signal); }
.evo--stable { color: var(--b-doux); }

/* ----------------------------------------------------------- le sommaire */

.sommaire {
  margin: 0 0 2.2rem; padding: 1.1rem 1.3rem;
  background: var(--b-pur); border: 1px solid var(--b-trait);
}
.sommaire__titre {
  margin: 0 0 .6rem; font-size: .74rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--b-doux); font-weight: 600;
}
.sommaire ol { margin: 0; padding-left: 1.15rem; }
.sommaire li { margin-bottom: .3rem; font-size: .94rem; }
.sommaire a { color: var(--b-encre); text-decoration: none; }
.sommaire a:hover { color: var(--b-signal); text-decoration: underline; }

/* ------------------------------------------------------------ l'appel */

.appel {
  margin: 2.4rem 0; padding: clamp(1.3rem, 3vw, 1.9rem);
  background: var(--b-encre); color: var(--b-papier); max-width: 68ch;
}
.appel__titre {
  font-family: inherit; font-weight: 600; font-size: 1.12rem; margin: 0 0 .6rem;
  color: var(--b-pur);
}
.appel p { color: rgba(255, 255, 255, .78); font-size: .96rem; }
.appel .bouton { margin-top: .5rem; }
.appel__note { display: block; margin-top: .7rem; font-size: .82rem; color: rgba(255, 255, 255, .6); }

/* -------------------------------------------------------------- à lire aussi */

.suite { border-top: 1px solid var(--b-trait); padding: clamp(2rem, 5vw, 3rem) 0; background: var(--b-pur); }
.suite h2 { font-size: 1.3rem; margin-bottom: 1.1rem; }
.suite__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.suite__liste a { display: block; color: inherit; text-decoration: none; }
.suite__liste strong { display: block; margin-bottom: .2rem; }
.suite__liste a:hover strong { color: var(--b-signal); }
.suite__liste span { font-size: .9rem; color: var(--b-doux); }