/* ==========================================================================
   3A-ARCHITECTURE — CARNET
   Sommaire des articles et gabarit de lecture.

   Parti pris : un carnet technique, pas un blog. Les cartes sont numérotées
   comme des planches, séparées par des filets plutôt que posées sur des
   cartouches, et la colonne de lecture reste étroite. Rien n'est emprunté
   au vocabulaire habituel du billet de blog — vignette, encadré coloré,
   bouton « lire la suite ».
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SOMMAIRE DE TÊTE
   Sur treize articles, un sommaire vaut mieux qu'une rangée de filtres : il
   annonce le plan, il fonctionne sans JavaScript, et il reste imprimable.
   -------------------------------------------------------------------------- */
.carnet-sommaire {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--gris-clair);
}

.carnet-sommaire__titre {
  margin-bottom: var(--space-md);
  font-family: var(--font-condensed);
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--bordeaux);
}

.carnet-sommaire ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--space-lg);
  counter-reset: theme;
}

.carnet-sommaire li {
  counter-increment: theme;
}

.carnet-sommaire a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gris-clair);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--noir);
  text-decoration: none;
  transition: color var(--t-fast);
}

/* Numéro du thème, en préfixe */
.carnet-sommaire a::before {
  content: counter(theme, decimal-leading-zero);
  font-family: var(--font-condensed);
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--bordeaux);
}

.carnet-sommaire a > span {
  margin-left: auto;
  font-family: var(--font-condensed);
  font-size: var(--fs-nano);
  font-weight: 600;
  color: var(--gris-moyen);
}

.carnet-sommaire a:hover {
  color: var(--bordeaux);
}

/* --------------------------------------------------------------------------
   1 bis. GROUPES THÉMATIQUES
   -------------------------------------------------------------------------- */
.carnet-theme {
  margin-bottom: var(--space-2xl);
  scroll-margin-top: calc(var(--nav-height) + var(--space-md));
}

.carnet-theme:last-child {
  margin-bottom: 0;
}

.carnet-theme__titre {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 1.75rem;
  color: var(--noir);
}

/* Filet qui prolonge le titre jusqu'au bord : sépare les groupes sans
   avoir à les encadrer. */
.carnet-theme__titre::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gris-clair);
}

/* --------------------------------------------------------------------------
   2. SOMMAIRE
   -------------------------------------------------------------------------- */
.carnet-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--space-2xl);
}

.carnet-carte[hidden] {
  display: none;
}

.carnet-carte a {
  position: relative;
  display: block;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--gris-clair);
  text-decoration: none;
}

/* Le filet supérieur se colore à l'approche : le repère de lecture est le
   trait, pas une ombre portée. */
.carnet-carte a::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto 0;
  height: 2px;
  background: var(--bordeaux);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-medium) var(--ease-out-expo);
}

.carnet-carte a:hover::before,
.carnet-carte a:focus-visible::before {
  transform: scaleX(1);
}

/* Numéro de planche, en filigrane */
.carnet-carte__num {
  position: absolute;
  top: var(--space-md);
  right: 0;
  font-family: var(--font-serif);
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--noir);
  opacity: 0.07;
  pointer-events: none;
}

.carnet-carte h3 {
  margin: 0.625rem 0 0.75rem;
  font-size: 1.625rem;
  line-height: 1.25;
  color: var(--noir);
  transition: color var(--t-fast);
}

.carnet-carte a:hover h3,
.carnet-carte a:focus-visible h3 {
  color: var(--bordeaux);
}

.carnet-carte__chapo {
  margin-bottom: var(--space-md);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--gris-mineral);
}

.carnet-carte .link-arrow {
  color: var(--bordeaux);
}

/* --------------------------------------------------------------------------
   3. LIGNE DE MÉTADONNÉES
   -------------------------------------------------------------------------- */
.art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-condensed);
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gris-moyen);
}

.art-meta > * + *::before {
  content: '·';
  margin-right: 0.625rem;
  color: var(--gris-moyen);
}

.art-cat {
  color: var(--bordeaux);
}

.page-header .art-meta {
  margin-bottom: var(--space-sm);
}

.page-header .art-cat {
  color: var(--bordeaux-light);
}

/* --------------------------------------------------------------------------
   4. PAGE D'ARTICLE
   -------------------------------------------------------------------------- */
.page-header--article h1 {
  max-width: 24ch;
}

.prose--article {
  max-width: 40rem;
  font-size: 1rem;
}

.prose--article > p:first-of-type {
  font-size: 1.0625rem;
}

.prose--article h2 {
  margin-top: var(--space-xl);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--gris-clair);
  font-size: 1.75rem;
}

.prose--article h3 {
  margin-top: var(--space-lg);
  font-family: var(--font-condensed);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--bordeaux);
}

.prose--article ul {
  padding-left: 0;
  list-style: none;
}

/* Puce en tiret bordeaux, comme les listes des cartes « missions » */
.prose--article ul li {
  position: relative;
  padding-left: 1.25rem;
}

.prose--article ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 8px;
  height: 1px;
  background: var(--bordeaux);
}

/* --------------------------------------------------------------------------
   4 bis. TABLEAUX
   Pas de bordures fermées : des filets horizontaux, comme un tableau de
   nomenclature sur un plan. Le tableau peut être plus large que la colonne
   de lecture — il déborde symétriquement, et défile seul s'il le faut.
   -------------------------------------------------------------------------- */
.tableau {
  margin: var(--space-lg) 0;
}

.tableau__defile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.prose--article table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.prose--article th,
.prose--article td {
  padding: 0.75rem 1rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--gris-clair);
}

.prose--article th {
  font-family: var(--font-condensed);
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--noir);
  white-space: nowrap;
  border-bottom-color: var(--bordeaux);
}

.prose--article tbody tr:last-child th,
.prose--article tbody tr:last-child td {
  border-bottom: none;
}

/* Première colonne : c'est l'entrée de lecture, on la distingue. */
.prose--article tbody th {
  padding-right: var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  color: var(--noir);
  border-bottom-color: var(--gris-clair);
}

.prose--article td {
  color: var(--gris-mineral);
}

/* Marqueur de régime, repris dans les tableaux de nomenclature */
.regime {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-condensed);
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.regime--rien { background: var(--gris-clair); color: var(--gris-mineral); }
.regime--dp   { background: rgba(139, 26, 26, 0.10); color: var(--bordeaux); }
.regime--pc   { background: var(--bordeaux); color: var(--blanc-pur); }

.tableau figcaption {
  margin-top: 0.625rem;
  font-size: var(--fs-micro);
  font-style: italic;
  color: var(--gris-moyen);
}

/* --- Avertissement de fin d'article --------------------------------------- */
.note-legale {
  margin-top: var(--space-xl);
  padding: var(--space-md) 1.5rem;
  background: var(--blanc);
  border-left: 2px solid var(--bordeaux);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.note-legale p {
  margin-bottom: 0;
  font-size: var(--fs-small);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   5. ARTICLE PRÉCÉDENT / SUIVANT
   -------------------------------------------------------------------------- */
.art-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gris-clair);
  border-top: 1px solid var(--gris-clair);
}

.art-nav__lien {
  display: block;
  padding: var(--space-lg) var(--gutter);
  background: var(--blanc);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--noir);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}

.art-nav__lien:hover {
  background: var(--blanc-pur);
  color: var(--bordeaux);
}

.art-nav__lien span {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-condensed);
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gris-moyen);
}

/* Le lien « suivant » se lit de droite à gauche : le sens de lecture
   renseigne la direction sans avoir besoin d'une flèche. */
.art-nav__lien--suiv {
  text-align: right;
}

/* Un seul voisin : il occupe toute la largeur */
.art-nav__lien:only-child {
  grid-column: 1 / -1;
}