/* =========================================================================
   TheDiffuseur — feuille de style du CONTENU, indépendante du thème.
   =========================================================================

   Règle de construction, et raison d'être du fichier :

   **On ne style que ce qu'on possède.** Aucun sélecteur de thème ici — ni
   `.site-header`, ni `.site-logo`, ni une variable de Twenty Twenty-One. Ces
   sélecteurs n'existent que dans un thème sur deux cents : une règle qui les
   vise ne casse rien, elle ne fait simplement *rien*, et le site retombe nu au
   premier changement de thème. Tout ce qui suit vise des classes `.td-*` que
   **nous** posons dans le contenu, plus les balises de blocs Gutenberg du cœur,
   présentes partout.

   **On ne fixe jamais une couleur de texte ni de fond de page.** 236 des 290
   thèmes sont des thèmes de blocs qui portent leur propre palette, et certains
   sont sombres. Un `color: #222` ici rendrait le texte illisible sur fond noir.
   Les fonds de nos bandeaux sont donc dérivés de `currentColor` par
   `color-mix()` : sur un thème clair ils s'éclaircissent, sur un thème sombre
   ils s'assombrissent, sans qu'on ait à les connaître. Seul l'orange de la
   marque est absolu — c'est le propre d'une marque.

   **On ne dépend pas de `alignfull`.** Le plein écran d'un bandeau n'est pas
   obtenu par la classe `alignfull` (qui exige que le thème déclare
   `align-wide` *et* la mette en page), mais par une échappée géométrique
   `margin-inline: calc(50% - 50vw)`. Elle fonctionne dans n'importe quel
   conteneur, classique ou bloc.
   ========================================================================= */

:root {
  --td-orange:        #7C3AED;
  --td-orange-clair:  #A78BFA;
  --td-orange-sombre: #5B21B6;
  --td-rayon:         14px;
  /* La colonne de lecture. 46rem ≈ 75 caractères par ligne : au-delà, l'œil
     perd la ligne suivante en revenant à gauche, et une page de conditions
     d'utilisation en fait dix écrans. Certains thèmes de la sélection laissent
     le texte courir sur 1200 px — ce plafond les corrige sans toucher au
     reste.

     **Une seule largeur, pour tout.** On avait d'abord donné aux grilles de
     cartes une colonne plus large qu'aux paragraphes. Le résultat, vérifié en
     capture : les titres de section se retrouvaient décalés de neuf rem vers
     l'intérieur par rapport aux cartes qu'ils annoncent. Deux colonnes
     concurrentes ne s'alignent jamais ; une seule s'aligne toujours. Les
     cartes descendent donc à trois de front au lieu de quatre — c'est le prix,
     et il est plus faible que celui du décalage. */
  --td-largeur:       48rem;
}

/* L'échappée des bandeaux déborde de 100vw ; `clip` empêche la barre de
   défilement horizontale que `hidden` provoquerait, sans casser `position:
   sticky` des en-têtes de thèmes (ce que `hidden` casse). */
html { overflow-x: clip; }

/* ------------------------------------------------------------------ socle */

.td-bloc { margin-block: 2.5rem; }

/* L'échappée pleine largeur, et son retour exact.
   ------------------------------------------------------------------
   `margin-inline: calc(50% - 50vw)` fait déborder le bandeau jusqu'aux
   bords de la fenêtre, quel que soit le conteneur du thème.

   Le `padding` est l'opération **inverse**, et c'est là qu'est l'astuce :
   un pourcentage de `padding` se calcule sur la largeur du *bloc parent*,
   pas sur celle de l'élément. `calc(50vw - 50%)` vaut donc exactement la
   gouttière du thème — la distance entre le bord de l'écran et sa colonne
   de contenu. Le texte du bandeau se recale ainsi au pixel sur celui des
   paragraphes voisins, **sans qu'on ait à connaître la largeur du
   conteneur** : elle peut valoir 1200 px chez Astra et 650 px chez Frost,
   le calcul suit.

   Le `max()` garde une gouttière minimale sur les écrans étroits, où la
   colonne occupe toute la largeur et où le calcul tomberait à zéro. */
.td-large {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.25rem, calc(50vw - 50%));
  box-sizing: border-box;
}

/* La colonne de lecture, appliquée aux enfants directs du contenu et à ceux
   des bandeaux. Les deux plafonds étant les mêmes de part et d'autre et les
   blocs étant centrés, le texte d'un bandeau s'aligne exactement sur celui des
   paragraphes voisins — sur un thème à conteneur étroit comme sur un thème à
   conteneur large, où le plafond seul entre en jeu. */
.td-page > p,
.td-page > h1, .td-page > h2, .td-page > h3, .td-page > h4,
.td-page > ul, .td-page > ol, .td-page > dl,
.td-page > blockquote, .td-page > pre, .td-page > table, .td-page > hr,
.td-page > figure,
/* ⚠️ `.td-code` est l'enveloppe que `mu-copier.js` pose AUTOUR du `<pre>`. Sans
   cette ligne, envelopper un bloc de code lui fait perdre la colonne de lecture :
   il cesse d'être enfant direct de `.td-page`, et s'étale sur toute la largeur du
   conteneur du thème. Mesuré le 2026-10-20 sur /builders/ — 1 396 px au lieu de
   928. C'est la règle générale de cette feuille : tout ce qui s'interpose entre
   `.td-page` et un bloc doit reprendre le plafond à son compte. */
.td-page > .td-code {
  max-width: var(--td-largeur);
  margin-inline: auto;
}

/* Le contenu d'un bandeau, lui, est enveloppé d'un `td-inner` par
   `publier.py` : un seul conteneur porte la colonne, et aucun enfant n'a
   besoin d'être plafonné individuellement. C'est ce qui évite le défaut
   observé en capture — un `<h1>` portant sa propre marge échappe au centrage
   automatique, et le titre se colle au bord pendant que le chapô reste centré. */
.td-inner {
  max-width: var(--td-largeur);
  margin-inline: auto;
}

/* `:not(.td-large)` est indispensable : un bandeau porte les DEUX classes
   (`td-bloc td-large`), et un plafond de largeur annulerait l'échappée qui le
   fait déborder jusqu'aux bords de l'écran. Vérifié en capture : sans cette
   exclusion, le héros rentre dans la colonne et le fond dégradé disparaît des
   marges. */
.td-page > .td-bloc:not(.td-large),
.td-inner > .td-bloc {
  max-width: var(--td-largeur);
  margin-inline: auto;
}

/* Un fond qui s'adapte au thème : 5 % de la couleur du texte courant mélangée
   au fond. Clair sur thème clair, sombre sur thème sombre. */
.td-fond      { background: color-mix(in srgb, currentColor 5%, transparent); }
.td-fond-fort { background: color-mix(in srgb, currentColor 9%, transparent); }

/* --------------------------------------------------------------- le héros */

.td-hero {
  padding-block: clamp(3rem, 8vw, 5.5rem);
  background:
    radial-gradient(90rem 40rem at 15% -10%,
      color-mix(in srgb, var(--td-orange) 16%, transparent), transparent 60%),
    radial-gradient(70rem 36rem at 95% 0%,
      color-mix(in srgb, var(--td-orange-clair) 12%, transparent), transparent 55%),
    color-mix(in srgb, currentColor 4%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.td-hero__surtitre {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--td-orange) 80%, currentColor);
  background: color-mix(in srgb, var(--td-orange) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--td-orange) 30%, transparent);
  padding: 0.35em 0.85em;
  border-radius: 999px;
  margin: 0 0 1.25rem;
}

.td-hero h1,
.td-hero .td-hero__titre {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.td-hero__chapo {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.55;
  margin: 0 0 2rem;
  opacity: 0.88;
}

/* --------------------------------------------------------------- boutons */

.td-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Depuis le passage au balisage de blocs, `td-bouton` est porté par
   l'enveloppe `wp-block-button` et le visuel appartient au lien qu'elle
   contient. Trois classes de profondeur : les thèmes écrivent couramment
   `.wp-block-button .wp-block-button__link`, il faut passer devant. */
.td-boutons .td-bouton .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.78em 1.5em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  /* Beaucoup de thèmes soulignent tous les liens du contenu — c'est une bonne
     règle d'accessibilité pour un lien de texte, et un défaut visuel sur un
     bouton, qui se signale déjà par sa forme et son fond. Ils le font depuis
     un sélecteur plus fort que le nôtre (`.entry-content a`), d'où le
     `!important` : c'est le seul moyen de tenir sur 290 feuilles inconnues. */
  text-decoration: none !important;
  border: 1.5px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.td-boutons .td-bouton--plein .wp-block-button__link {
  background: var(--td-orange);
  color: #fff;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--td-orange) 80%, transparent);
}
.td-boutons .td-bouton--plein .wp-block-button__link:hover,
.td-boutons .td-bouton--plein .wp-block-button__link:focus-visible {
  background: var(--td-orange-sombre);
  color: #fff;
}

.td-boutons .td-bouton--creux .wp-block-button__link {
  background: transparent;
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  color: inherit;
}
.td-boutons .td-bouton--creux .wp-block-button__link:hover,
.td-boutons .td-bouton--creux .wp-block-button__link:focus-visible {
  border-color: var(--td-orange);
  color: color-mix(in srgb, var(--td-orange) 80%, currentColor);
}

.td-boutons .td-bouton .wp-block-button__link:hover { transform: translateY(-1px); }

/* ---------------------------------------------------------------- cartes */

.td-cartes {
  display: grid;
  /* 17rem dans une colonne de 48rem donne deux colonnes : les sections en
     comptent quatre éléments, et 2×2 se lit mieux que 3 + 1 esseulé. */
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.td-carte {
  background: color-mix(in srgb, currentColor 4%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--td-rayon);
  padding: 1.35rem 1.4rem;
  margin: 0;
}

.td-carte > :first-child { margin-top: 0; }
.td-carte > :last-child  { margin-bottom: 0; }

.td-carte__titre {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.td-carte p { margin: 0; font-size: 0.97rem; line-height: 1.6; opacity: 0.9; }

/* Le liseré orange qui identifie la marque sans repeindre la carte. */
.td-carte--accent { border-top: 3px solid var(--td-orange); }

/* ---------------------------------------------------------------- étapes */

.td-etapes {
  display: grid;
  /* 17rem dans une colonne de 48rem donne deux colonnes : les sections en
     comptent quatre éléments, et 2×2 se lit mieux que 3 + 1 esseulé.

     🔴 CE CALCUL SUPPOSAIT UNE COLONNE DE 48 rem, et l'intention tombait dès
     qu'un site l'élargissait. Mesuré le 2026-10-20 sur www.machinapolis.com,
     dont `--td-largeur` vaut 58 rem : la grille fait 928 px, 17 rem en donne
     TROIS colonnes, et les quatre étapes de la Civitiĝo sortaient en 3 + 1
     esseulé — exactement ce que ce commentaire disait vouloir éviter. La règle
     `:has()` plus bas rétablit l'intention en comptant les éléments, au lieu de
     la déduire d'une largeur qu'un autre fichier décide. */
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  counter-reset: td-etape;
  margin: 0;
  padding: 0;
  list-style: none;
}

.td-etape {
  position: relative;
  padding: 1.5rem 1.4rem 1.4rem;
  border-radius: var(--td-rayon);
  background: color-mix(in srgb, currentColor 4%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  margin: 0;
  counter-increment: td-etape;
}

.td-etape::before {
  content: counter(td-etape);
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--td-orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
}

.td-etape__titre { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.4rem; }
.td-etape p { margin: 0; font-size: 0.97rem; line-height: 1.6; opacity: 0.9; }

/* ------------------------------------------- quatre éléments : jamais 3 + 1

   `auto-fit` remplit la largeur disponible sans savoir combien d'éléments il
   range : quatre cartes dans trois colonnes donnent une rangée de trois et une
   carte seule, qui se lit comme un oubli. Le nombre d'éléments se compte
   pourtant en CSS — `:has(> :last-child:nth-child(4))` ne vaut que si le
   quatrième enfant est aussi le dernier.

   On élargit alors le plancher à 21 rem : la grille retombe à deux colonnes
   jusqu'à 63 rem de large, et 2 × 2 se lit comme une figure. `min(…, 100%)`
   garde l'empilement sur mobile — sans lui, un plancher de 21 rem dépasse un
   écran de 360 px et force un défilement horizontal.

   Deux et trois éléments sont laissés tels quels : une rangée pleine, déjà. */
.td-etapes:has(> :last-child:nth-child(4)),
.td-cartes:has(> :last-child:nth-child(4)) {
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
}

/* --------------------------------------------------------------- badges */

/* `td-badges` et `td-chiffres` sont des listes du cœur depuis le passage aux
   blocs : il faut retirer la puce et le retrait que `wp-block-list` pose. */
.td-badges,
.td-chiffres { list-style: none; padding-left: 0; margin-left: 0; }

.td-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.td-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  font-size: 0.93rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
}

.td-badge::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

.td-badge--actif {
  border-color: color-mix(in srgb, var(--td-orange) 45%, transparent);
  background: color-mix(in srgb, var(--td-orange) 10%, transparent);
}
.td-badge--actif::before { background: var(--td-orange); opacity: 1; }

/* -------------------------------------------------------------- bandeaux */

.td-bandeau {
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
  border-block: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
}

.td-bandeau > :first-child { margin-top: 0; }
.td-bandeau > :last-child  { margin-bottom: 0; }

.td-cta {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--td-orange) 12%, transparent),
      color-mix(in srgb, var(--td-orange-clair) 8%, transparent));
  border-block: 1px solid color-mix(in srgb, var(--td-orange) 22%, transparent);
}

.td-cta h2 { margin-top: 0; font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
.td-cta .td-boutons { justify-content: center; }

/* Le chapeau des pages longues (conditions, confidentialité) : il donne au
   lecteur la date de mise à jour et la nature du document avant dix écrans. */
.td-chapeau {
  padding-block: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
}
.td-chapeau h1 { margin: 0 0 0.5rem; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
.td-chapeau p  { margin: 0; opacity: 0.8; font-size: 1.02rem; }

/* ------------------------------------------- chiffres / points de preuve */

.td-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.td-chiffre { text-align: center; padding: 1.1rem 0.75rem; }
.td-chiffre strong {
  display: block;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--td-orange) 80%, currentColor);
  letter-spacing: -0.02em;
}
.td-chiffre br { display: none; }
.td-chiffre {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.4;
}
.td-chiffre-libelle-espace {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.4;
}

/* ====================================================================
   Le contenu courant : tableaux, titres, citations.
   Ces règles sont portées par nos propres classes `.td-page` (posée sur
   le corps de chaque page par le poseur), jamais par `.entry-content`
   seul — qui n'existe pas dans les thèmes de blocs.
   ==================================================================== */

.td-page table,
.td-page .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.93em;
  margin-block: 1.6em;
}

.td-page th,
.td-page td {
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  padding: 0.6em 0.8em;
  text-align: left;
  vertical-align: top;
}

.td-page thead th {
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-weight: 700;
}

.td-page tbody tr:nth-child(even) {
  background: color-mix(in srgb, currentColor 3%, transparent);
}

/* Un titre de section doit s'attraper à l'œil quand on parcourt dix écrans. */
.td-page h2 {
  border-left: 4px solid var(--td-orange);
  padding-left: 0.6em;
  margin-top: 2.4em;
  line-height: 1.2;
}

/* …mais pas dans nos bandeaux : le liseré s'y retrouverait collé au bord de
   l'écran, à plusieurs centimètres du titre qu'il est censé désigner, et
   à contresens d'un rappel à l'action centré. */
.td-large h2,
.td-cta h2,
.td-bandeau h2 {
  border-left: 0;
  padding-left: 0;
  margin-top: 0;
}

.td-page blockquote {
  border-left: 4px solid var(--td-orange-clair);
  background: color-mix(in srgb, currentColor 4%, transparent);
  padding: 0.9em 1.2em;
  margin-inline: 0;        /* annule le retrait par défaut du navigateur */
  border-radius: 0 var(--td-rayon) var(--td-rayon) 0;
}

/* 🔴 …mais une citation posée au premier niveau de la page appartient à la
   colonne de lecture, et doit donc rester centrée comme les paragraphes qui
   l'entourent.

   Le `margin-inline: 0` ci-dessus annule le retrait du navigateur — ce qu'on
   veut — mais il annule AUSSI le `margin-inline: auto` que la règle de colonne
   pose plus haut sur `.td-page > blockquote`. Les deux sélecteurs ont la même
   spécificité (0,1,1) : c'est le dernier écrit qui gagne, et c'est celui-ci.

   Résultat : la citation sortait collée au bord gauche du conteneur, 184 px à
   gauche de tout le reste. Mesuré le 2026-10-19 sur machinapolis.com —
   18 pages sur 24 touchées, et le défaut existe partout où une citation est
   posée au premier niveau. Il ne se voit pas tant qu'aucune page n'en porte. */
.td-page > blockquote { margin-inline: auto; }

/* ⚠️ `:not(pre) >` n'est pas de la coquetterie. Sans lui, la règle atteint aussi
   le `<code>` INTÉRIEUR d'un bloc de code, qui reçoit alors un fond et un rayon
   par-dessus ceux du `<pre>` — un cadre dans un cadre, et un rembourrage qui
   décale la première ligne. Invisible jusqu'au 2026-10-20 : la méthode ne
   produisait aucun bloc de code (cf. `fenced_code` dans `publier.py`). */
.td-page :not(pre) > code {
  background: color-mix(in srgb, currentColor 8%, transparent);
  padding: 0.12em 0.35em;
  border-radius: 4px;
  font-size: 0.92em;
}

/* La couverture d'un article, posée par le mu-plugin quand le thème ne la rend
   pas. Elle ouvre la lecture : un peu d'air sous elle, et le même rayon que les
   autres cadres de la page pour qu'elle n'ait pas l'air collée. */
.td-page > .td-couverture { margin: 0 auto 2rem; }
.td-page > .td-couverture img {
  width: 100%;
  height: auto;
  border-radius: var(--td-rayon);
  display: block;
}

/* ----------------------------------------------- les blocs de code, copiables

   Un bloc de code sur une page d'acquisition est une commande à jouer, pas une
   illustration. `mu-copier.js` l'enveloppe dans `.td-code` et y pose un bouton ;
   tout ce qui suit ne sert QUE quand ce script a tourné — sans JavaScript, le
   `<pre>` reste exactement ce qu'il était. */

.td-code { position: relative; }

.td-code__copier {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: color-mix(in srgb, currentColor 7%, Canvas);
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
  /* Il s'efface tant qu'on ne s'approche pas du bloc : un bouton permanent
     au-dessus du code attire l'œil avant le code lui-même. Il reste PRÉSENT
     (opacité, pas `display`) pour rester atteignable au clavier. */
  opacity: 0.35;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.td-code:hover .td-code__copier,
.td-code__copier:focus-visible { opacity: 1; }

.td-code__copier[data-etat="ok"] {
  opacity: 1;
  border-color: color-mix(in srgb, var(--td-orange) 60%, transparent);
  color: color-mix(in srgb, var(--td-orange) 85%, currentColor);
}

.td-code__copier[data-etat="echec"] { opacity: 1; font-weight: 700; }

/* Le bouton flotte AU-DESSUS du code : sur un bloc étroit — une URL seule — il
   recouvrirait la fin de la première ligne. On réserve sa place à droite.

   ⚠️ Le sélecteur porte `.td-page` exprès. Une feuille PROPRE au site est chargée
   après celle-ci et y redéclare volontiers `.td-page pre { padding: … }` — c'est
   le cas de machinapolis.com. À poids égal, la dernière gagne et la réserve
   disparaissait : mesuré le 2026-10-20, 18,4 px au lieu de 88. */
.td-page .td-code > pre { padding-right: 5.5rem; }

/* Sur un écran étroit, le bouton passe sous le bloc : à 360 px, 5,5 rem de
   réserve ne laissent plus assez de place à une ligne de commande. */
@media (max-width: 30rem) {
  .td-code__copier { position: static; opacity: 1; margin-top: 0.5rem; display: block; }
  .td-page .td-code > pre { padding-right: 1.15rem; }
}

/* Les liens de contenu portent l'orange — mais seulement dans NOTRE contenu :
   repeindre tous les liens du site casserait la navigation des thèmes sombres.

   **La teinte s'ajuste au fond.** Vérifié en capture sur OnyxPulse (fond noir) :
   l'orange foncé `#B93A0B` y devient presque illisible. Plutôt que de deviner
   si le thème est clair ou sombre, on mélange l'orange de la marque à la
   couleur du texte courant : sur fond clair, le texte est sombre et le lien
   fonce ; sur fond noir, le texte est clair et le lien s'éclaircit. Une seule
   règle, les deux cas. */
.td-page a {
  color: color-mix(in srgb, var(--td-orange) 78%, currentColor);
  text-underline-offset: 2px;
}
.td-page a:hover { color: var(--td-orange-clair); }
.td-page .td-boutons a { color: inherit; }

/* Sur la page d'accueil, le héros PORTE le titre. Laisser le thème l'afficher
   une seconde fois au-dessus donnerait deux titres empilés. `body.home` est
   posé par `body_class()`, donc présent sur les 290 thèmes. */
body.home .wp-block-post-title,
body.home .entry-title,
body.home .page-title,
body.td-a-hero .wp-block-post-title,
body.td-a-hero .entry-title,
body.td-a-hero .page-title { display: none !important; }

/* ⚠️ Mais le titre d'un ARTICLE dans une liste n'est pas le titre de la page.
   La règle ci-dessus les attrapait tous les deux, `!important` compris — défaut
   invisible tant qu'aucune page ne combinait un héros ET une liste d'articles,
   c'est-à-dire jusqu'au premier blog monté par la méthode (2026-10-06, sur
   lmvi-conseil.fr : neuf cartes sans titre, images et extraits intacts). */
body.home .wp-block-query .wp-block-post-title,
body.td-a-hero .wp-block-query .wp-block-post-title { display: block !important; }

/* ====================================================================
   Deux garde-fous, et deux seulement.
   ====================================================================

   Ces règles sont les seules à viser des classes de thème. On s'y résout
   parce qu'elles corrigent un *défaut*, pas un parti pris : un thème qui
   affiche une image de 512 px à sa taille d'origine n'a pas choisi de le
   faire, il n'a rien choisi du tout. Les classes visées (`custom-logo`,
   `site-title`, `entry-title`, et leurs équivalents en blocs) sont posées
   par WordPress lui-même, pas par un thème particulier : elles existent
   donc partout, ou nulle part — dans les deux cas, sans casse.

   Tout le reste de cette feuille ne touche qu'à nos propres classes.

   **Et ces deux-là portent `!important`.** Mesuré, pas supposé : sans lui,
   Twenty Twenty-One gagne — il écrit `.site-logo .custom-logo`, deux classes
   contre une, et `.singular .entry-title`, idem. On ne peut pas gagner cette
   course sur 290 feuilles qu'on n'a pas lues, chacune avec ses propres
   enchaînements de classes ; la seule borne qui tienne quel que soit
   l'adversaire est celle-ci. C'est admissible parce que ce sont des
   *plafonds* : un thème qui reste en dessous n'est pas touché. */

.custom-logo,
.wp-block-site-logo img {
  max-height: 3.4rem !important;
  width: auto;
  height: auto;
}

/* Twenty Twenty-One affiche les titres de page en 96 px : sur une page de
   conditions d'utilisation, le mot « Conditions » occupe le premier écran
   entier. Le plafond ne mord que sur ces cas-là ; les thèmes raisonnables
   sont déjà au-dessous. */
.entry-title,
.page-title,
.wp-block-post-title {
  font-size: clamp(1.7rem, 4.2vw, 3rem) !important;
  line-height: 1.15;
}

/* ------------------------------------------------------- pied de page nôtre */

.td-credit {
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: 0.87rem;
  line-height: 1.6;
  opacity: 0.8;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.td-credit p { margin: 0 0 0.4rem; }
.td-credit p:last-child { margin-bottom: 0; }
.td-credit a { color: inherit; }

/* Beaucoup de thèmes affichent « Fièrement propulsé par WordPress » dans leur
   pied. Ce n'est pas faux, mais un examinateur de plateforme y lit un site
   monté à la hâte. On le masque là où il porte une classe stable. */
.powered-by,
.wp-block-site-tagline + .powered-by { display: none; }

/* --------------------------------------------------------------- alterne

   Une suite « image + texte » dont le sens s'inverse d'une entrée à l'autre.

   Pourquoi : six sections de texte à la file se lisent comme un mur, et l'œil
   décroche à la troisième — constaté sur thesocle.eu/use-cases/ le 2026-10-06.
   Alternées, les mêmes six se parcourent : à chaque entrée le regard repart du
   côté opposé, ce qui marque la coupure sans trait de séparation.

   L'inversion est faite ICI, par `:nth-child(even)`, et non dans le HTML :
   l'ordre du document reste celui de la lecture — titre, puis texte — ce qui
   est aussi l'ordre qu'annonce un lecteur d'écran. Un zigzag écrit en dur dans
   le contenu dirait « image » avant « titre » une fois sur deux. */

.td-alterne { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }

.td-alterne__item {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: center;
}

@media (min-width: 52rem) {
  .td-alterne__item { grid-template-columns: 1fr 1fr; }
  /* Le visuel vient après le texte dans le document ; en grande largeur on le
     ramène à gauche une entrée sur deux. */
  .td-alterne__item:nth-child(odd) .td-alterne__visuel  { grid-column: 1; grid-row: 1; }
  .td-alterne__item:nth-child(odd) .td-alterne__texte   { grid-column: 2; grid-row: 1; }
  .td-alterne__item:nth-child(even) .td-alterne__visuel { grid-column: 2; grid-row: 1; }
  .td-alterne__item:nth-child(even) .td-alterne__texte  { grid-column: 1; grid-row: 1; }
}

.td-alterne__visuel { margin: 0; }
.td-alterne__visuel img,
.td-alterne__visuel figure { margin: 0; width: 100%; height: auto; display: block; }
.td-alterne__visuel figure { border-radius: var(--td-rayon); overflow: hidden; }

.td-alterne__texte > :first-child { margin-top: 0; }
.td-alterne__texte > :last-child  { margin-bottom: 0; }

.td-alterne__titre {
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.18;
  margin: 0 0 .75rem;
}

/* Une entrée sans image ne doit pas laisser une colonne vide. */
.td-alterne__item:not(:has(.td-alterne__visuel)) { grid-template-columns: 1fr; }

/* --------------------------------------------------------------- mobile */

@media (max-width: 600px) {
  .td-hero { padding-block: 2.5rem; }
  .td-boutons { flex-direction: column; align-items: stretch; }
  .td-bouton { justify-content: center; }
  .td-page table { font-size: 0.86em; }
}

/* Respecter le réglage système : nos seules animations sont des micro-levées. */
@media (prefers-reduced-motion: reduce) {
  .td-bouton { transition: none; }
  .td-bouton:hover { transform: none; }
}

/* ======================================================================
   Héros à vidéo de fond — `::: hero` avec `video:`
   ====================================================================== */

/* La vidéo couvre la section et passe DERRIÈRE le texte. Un voile la tempère :
   sans lui, un titre sombre sur une image claire devient illisible dès que la
   vidéo change de plan — et elle change tout le temps. */
.td-hero--video {
  position: relative;
  overflow: hidden;
  /* L'image d'attente est posée ici en fond : elle ne dépend ni de la lecture
     automatique, ni du format accepté par le navigateur. La vidéo se superpose
     quand elle le peut ; sinon, on voit l'image, jamais un aplat gris. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.td-hero--video .td-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.td-hero--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 60%, rgba(0, 0, 0, .25) 100%);
  z-index: 1;
}

.td-hero--video .td-inner {
  position: relative;
  z-index: 2;
}

.td-hero--video .td-hero__titre,
.td-hero--video .td-hero__chapo,
.td-hero--video .td-hero__surtitre {
  color: #fff;
}

/* Le mouvement n'est pas une option pour tout le monde : qui demande moins
   d'animation ne reçoit que l'image d'attente. */
@media (prefers-reduced-motion: reduce) {
  .td-hero--video .td-hero__video {
    display: none;
  }
}

/* ======================================================================
   Zigzag — `::: zigzag`
   ====================================================================== */

/* Des rangées alternées image / texte. À lire comme un raisonnement, là où une
   grille de cartes se lit comme un catalogue. */
.td-zigzag {
  display: grid;
  gap: 3rem;
}

.td-zigzag__ligne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

/* L'alternance tient au rang, et à rien d'autre : insérer une rangée au milieu
   ne doit pas obliger à retoucher les suivantes. */
.td-zigzag__ligne:nth-child(even) .td-zigzag__media {
  order: 2;
}

.td-zigzag__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--td-rayon);
}

.td-zigzag__titre {
  margin-top: 0;
}

/* Une rangée sans image n'a pas à laisser une colonne vide. */
.td-zigzag__ligne:not(:has(.td-zigzag__media)) {
  grid-template-columns: 1fr;
}

@media (max-width: 48rem) {
  .td-zigzag__ligne {
    grid-template-columns: 1fr;
  }
  /* Sur un téléphone, l'image repasse toujours au-dessus du texte : l'alternance
     n'a plus de sens sur une seule colonne, et une image orpheline en bas de
     bloc ne se rattache à rien. */
  .td-zigzag__ligne:nth-child(even) .td-zigzag__media {
    order: 0;
  }
}

/* Sur un fond vidéo sombre, un bouton « creux » dessiné pour du texte foncé sur
   fond clair devient invisible — c'est le cas le plus courant, et il ne se voit
   qu'à la capture. On le repasse en blanc tant qu'il est dans un héros vidéo. */
.td-hero--video .wp-block-button.is-style-outline .wp-block-button__link,
.td-hero--video .td-bouton--creux {
  color: #fff;
  border-color: rgba(255, 255, 255, .85);
  background: transparent;
}

.td-hero--video .wp-block-button.is-style-outline .wp-block-button__link:hover,
.td-hero--video .td-bouton--creux:hover {
  background: rgba(255, 255, 255, .15);
  border-color: #fff;
}

/* ======================================================================
   Liste d'articles — `::: articles`
   ====================================================================== */

/* Une grille de cartes : image, titre, date et rubriques, extrait. C'est la
   forme qu'un blog prend naturellement — un titre nu par ligne ne donne à lire
   ni le sujet ni la fraîcheur. */
.td-articles .wp-block-post-template {
  gap: 1.75rem;
}

/* ⚠️ NE PAS repasser `.wp-block-post-template` en `display: grid` pour forcer
   trois colonnes : essayé le 2026-10-06, la page est sortie à 19 495 px de haut
   avec un caractère par ligne. Le gabarit est un conteneur flex dont les cartes
   portent leur propre base ; le passer en grille leur retire cette base et
   `minmax(0, 1fr)` les laisse tomber à zéro. Le nombre de colonnes se règle par
   l'attribut du bloc (`colonnes:` dans `::: articles`), pas par la feuille. */

.td-articles .wp-block-post {
  display: flex;
  flex-direction: column;
  border: 1px solid #e6e6e6;
  border-radius: var(--td-rayon);
  overflow: hidden;
  background: #fff;
}

.td-articles .wp-block-post-featured-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Le `!important` n'est pas une facilité : le titre d'article est un `h3` que
   le thème dimensionne par ses propres règles de titre (48 px chez Astra). Sans
   lui, neuf cartes de blog sortent en titres de niveau héros. */
.td-articles .td-article__titre,
.td-articles .wp-block-post-title,
.td-articles .wp-block-post-title a {
  margin: 1rem 1rem 0;
  font-size: 1.05rem !important;
  line-height: 1.3;
  text-decoration: none;
}

.td-articles .wp-block-post-title a {
  margin: 0;
}

/* Trois colonnes, posées DANS le modèle flex que le bloc emploie déjà — et non
   en basculant le conteneur en grille, qui fait tomber la largeur des cartes à
   zéro (voir l'avertissement plus bas). */
.td-articles .wp-block-post-template.is-flex-container.columns-3 > li {
  flex-basis: calc((100% - 2 * 1.75rem) / 3);
  max-width: calc((100% - 2 * 1.75rem) / 3);
}

@media (max-width: 60rem) {
  .td-articles .wp-block-post-template.is-flex-container.columns-3 > li {
    flex-basis: calc((100% - 1.75rem) / 2);
    max-width: calc((100% - 1.75rem) / 2);
  }
}

@media (max-width: 40rem) {
  .td-articles .wp-block-post-template.is-flex-container.columns-3 > li {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* La date et les rubriques sur une seule ligne discrète : c'est ce qui permet
   de repérer un article récent sans lire le titre. */
.td-articles .td-article__meta {
  margin: .4rem 1rem 0;
  gap: .5rem;
  font-size: .8rem;
  color: #666;
}

.td-articles .td-article__meta a {
  color: #666;
}

.td-articles .wp-block-post-excerpt {
  margin: .6rem 1rem 1rem;
  font-size: .9rem;
}

.td-articles .wp-block-post-excerpt__more-link {
  color: var(--td-orange);
}

.td-articles .wp-block-query-pagination {
  margin-top: 2rem;
  gap: .75rem;
  justify-content: center;
}

@media (max-width: 48rem) {
  .td-articles .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}

/* Variante `::: articles grand` — pour un portfolio : moins de cartes par rang,
   l'image en grand devant, parce que c'est elle qui donne envie d'ouvrir. */
.td-articles--grand .wp-block-post-featured-image img {
  height: 320px;
}

.td-articles--grand .td-article__titre,
.td-articles--grand .wp-block-post-title,
.td-articles--grand .wp-block-post-title a {
  font-size: 1.3rem !important;
}

.td-articles--grand .wp-block-post-template.is-flex-container.columns-2 > li {
  flex-basis: calc((100% - 1.75rem) / 2);
  max-width: calc((100% - 1.75rem) / 2);
}

@media (max-width: 48rem) {
  .td-articles--grand .wp-block-post-template.is-flex-container.columns-2 > li {
    flex-basis: 100%;
    max-width: 100%;
  }
  .td-articles--grand .wp-block-post-featured-image img { height: 220px; }
}

/* ======================================================================
   Les archives — catégorie, étiquette, date, auteur
   ======================================================================

   Un site dont le blog est une grille soignée et dont les archives sortent en
   gabarit de thème raconte deux histoires. Or on arrive sur une archive en
   cliquant « par thème » ou « par date » : c'est la deuxième page que voit un
   lecteur, pas une page oubliée. Les règles ci-dessous ne font qu'aligner le
   gabarit du thème sur la grille d'articles — elles ne le remplacent pas. */

body.archive .entry-title,
body.archive .entry-title a,
body.search .entry-title,
body.search .entry-title a {
  font-size: 1.05rem !important;
  line-height: 1.3;
  /* Sans cela, un titre long se coupe en syllabes au milieu d'un mot dès que la
     colonne se resserre — « Industrialis / ation d'une plateforme ». */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* 🔴 LE FIL D'ÉTIQUETTES D'UNE VIGNETTE RESTE AU BLEU DU THÈME.
   Il est rendu par le gabarit d'Astra, donc HORS de `.td-page` : la règle de
   lien de la méthode ne l'atteint pas, et une grille composée à l'accent du
   site se retrouve ponctuée de bleu Astra sous chaque vignette. Constaté sur
   www.machinapolis.com le 2026-10-20, `rgb(4, 107, 210)` dans
   `.ast-taxonomy-container`. La méta d'archive est reprise avec, pour la même
   raison. */
body.archive .ast-taxonomy-container a,
body.search .ast-taxonomy-container a,
body.single .ast-taxonomy-container a,
body.archive .entry-meta a,
body.search .entry-meta a,
body.single .entry-meta a,
body.archive .post-meta a,
body.search .post-meta a,
body.single .post-meta a {
  color: color-mix(in srgb, var(--td-orange) 82%, currentColor);
}

/* ⚠️ La méta n'est pas qu'une suite de liens : Astra peint **le conteneur** en
   bleu, si bien que la DATE — un `<span>`, pas un `<a>` — restait bleue quand
   bien même tous les liens étaient repris. Mesuré le 2026-10-20 :
   `.entry-meta` en `rgb(4, 107, 210)`, rubrique en bronze, date en bleu, dans la
   même ligne. Une ligne de méta se lit en retrait du texte, pas en avant de lui :
   on la pose en gris de la couleur courante, les liens gardant l'accent. */
body.archive .entry-meta, body.search .entry-meta, body.single .entry-meta,
body.archive .post-meta,  body.search .post-meta,  body.single .post-meta,
body.archive .ast-blog-meta-container, body.single .ast-blog-meta-container {
  color: color-mix(in srgb, currentColor 62%, transparent);
}

/* ⚠️ `inherit`, et le sélecteur descendant, parce qu'Astra écrit
   `.entry-meta, .entry-meta *` : il repeint CHAQUE descendant, si bien que
   reprendre le seul conteneur laissait la date bleue à l'intérieur d'une ligne
   devenue grise. `inherit` plutôt qu'un second `color-mix` : mélangé une fois
   par niveau, le gris se délaverait à chaque imbrication. Les liens repassent
   devant — `… .entry-meta a` pèse plus lourd que `… .entry-meta *`. */
body.archive .entry-meta *, body.search .entry-meta *, body.single .entry-meta *,
body.archive .post-meta *,  body.search .post-meta *,  body.single .post-meta *,
body.archive .ast-blog-meta-container *, body.single .ast-blog-meta-container * {
  color: inherit;
}

/* 🔴 LE TITRE D'UN ARTICLE ÉCHAPPE À LA COLONNE DE LECTURE.
   Même cause, gabarit suivant : sur un article seul, le titre et la ligne de
   méta sont rendus par le thème, au-dessus de `the_content` et donc HORS de
   `.td-page`. Ils prennent la largeur entière du conteneur pendant que la prose
   reste dans sa colonne. Mesuré le 2026-10-20 sur le premier article de
   www.machinapolis.com : titre à 1 400 px et aligné à 20 px du bord, texte à
   928 px et commençant à 256 — deux alignements à l'écran, dans le même article.

   C'est exactement la liste du piège 19 déroulée jusqu'au bout : pour tout
   gabarit servi par le thème, vérifier **couleur des liens, titres, méta,
   pagination**. Les titres manquaient. */
body.single .entry-header,
body.single .ast-single-post-order,
body.single .entry-title,
body.single .entry-meta {
  max-width: var(--td-largeur);
  margin-inline: auto;
}

/* Un auteur vide ne doit pas laisser un « Par / » orphelin : les billets posés
   avant le correctif de `poser_contenus.php` ont `post_author = 0`, et un lien
   sans texte reste dans le flux comme un trou. Celui-là disparaît ; le correctif
   de fond, lui, est côté poseur. */
.entry-meta a:empty,
.post-meta a:empty { display: none; }

body.archive article,
body.search article {
  border: 1px solid #e6e6e6;
  border-radius: var(--td-rayon);
  overflow: hidden;
  background: #fff;
}

/* Toutes les vignettes à la même hauteur : sans cadre commun, une image carrée
   et une image panoramique décalent toute la rangée. */
body.archive .ast-blog-featured-section img,
body.search .ast-blog-featured-section img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

body.archive .ast-blog-single-element,
body.search .ast-blog-single-element {
  padding-left: 1rem;
  padding-right: 1rem;
}

body.archive .entry-content,
body.search .entry-content {
  font-size: .9rem;
}

/* Une ancre atterrit sous l'en-tête fixe du thème si rien ne l'en écarte : le
   lecteur arrive sur la bonne section, mais son titre est caché par la barre de
   navigation, et il croit s'être trompé. */
[id] {
  scroll-margin-top: 6rem;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ======================================================================
   Un article seul
   ====================================================================== */

/* Le thème donne au titre d'un article la taille d'un titre de héros : sur un
   titre long, cela fait cinq lignes et un écran entier avant la première phrase.
   Celui qui arrive depuis « lire plus » a déjà lu l'accroche — on lui doit le
   texte, pas une seconde affiche. */
/* `!important` pour la même raison que sur les archives : le thème pose sa taille
   de titre après notre feuille, et à spécificité égale c'est lui qui gagne.
   Mesuré avant correction : 48 px, un titre de 300 px de haut. */
body.single .entry-title,
body.single .entry-title a {
  font-size: 1.9rem !important;
  line-height: 1.25;
  margin-bottom: .35rem;
}

body.single .entry-meta,
body.single .ast-single-post-meta {
  margin-bottom: 1.25rem;
}

/* Et l'espace vide que le thème laisse entre la signature et le contenu. */
body.single .entry-content > .td-page > *:first-child,
body.single .entry-content > *:first-child {
  margin-top: 0;
}

/* Le bandeau d'une archive : même dégradé, même allure que celui d'une page.
   Il sort dans le flux des articles, donc il lui faut reprendre la largeur
   pleine du conteneur plutôt que celle d'une carte. */
/* ⚠️ Le bandeau sort DANS le conteneur des articles, qui est une grille ou un
   conteneur flex : sans ces deux lignes il est traité comme une carte et se
   range à côté du premier article, au lieu d'occuper sa propre rangée. */
.td-hero--archive {
  margin-bottom: 2rem;
  width: 100%;
  grid-column: 1 / -1;
  /* `flex-basis: 100%` ne suffit pas : le rétrécissement par défaut ramène le
     bandeau à 990 px dès que l'article voisin réclame sa part, et les deux se
     partagent la rangée. `flex: 0 0 100%` interdit ce partage — mesuré. */
  flex: 0 0 100%;
  max-width: 100%;
  /* ⚠️ `.td-large` déborde volontairement jusqu'aux bords de l'écran
     (`margin-inline: calc(50% - 50vw)`). Dans une PAGE, c'est ce qui donne les
     bandeaux pleine largeur. Dans la rangée d'articles d'une archive, large de
     990 px, ce calcul vaut −225 px : le bandeau sort du conteneur par la gauche
     et l'article remonte à côté. Mesuré le 2026-10-06 : x = −205. */
  margin-inline: 0;
  padding-inline: 2rem;
}

/* Le thème affiche déjà le titre de l'archive, en haut : avec le bandeau, le
   lecteur le lit deux fois. On masque celui du thème — et **lui seul** : viser
   `.entry-title` ici masquerait le titre de chaque article de la liste. */
body.archive .ast-archive-description .page-title,
body.archive .page-title,
body.archive .ast-archive-description > .ast-archive-title {
  display: none !important;
}

.td-hero--archive .td-hero__titre {
  margin-bottom: .25rem;
}

.td-hero--archive .td-hero__chapo p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------- la colonne « par thème / par date »
   Née de lmvi-conseil.fr, généralisée le 2026-10-23 : une page `colonne: droite`
   reçoit la colonne latérale d'Astra, garnie par colonne_blog.php (catégories,
   archives, derniers billets). Une colonne de navigation se parcourt du regard :
   elle doit être dense. Par défaut le thème lui donne la taille et l'interligne
   d'un corps de texte, et douze rubriques occupent alors plus que trois articles. */
body:has(.td-articles-bloc) .td-bloc .td-inner {
  max-width: none;
}

.widget-area.secondary .widget-title {
  font-size: 1rem;
  line-height: 1.2;
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.widget-area.secondary .widget {
  margin-bottom: 1.5rem;
}

.widget-area.secondary ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.25;
}

.widget-area.secondary li {
  font-size: .78rem;
  line-height: 1.15;
  margin: 0;
  padding: .06rem 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}

.widget-area.secondary li:last-child {
  border-bottom: 0;
}

/* Le thème pose aussi un interligne et une marge sur les liens eux-mêmes :
   resserrer la liste sans les resserrer ne change presque rien à l'œil. */
.widget-area.secondary li a {
  display: block;
  line-height: 1.15;
  padding: 0;
  margin: 0;
  color: color-mix(in srgb, currentColor 75%, transparent);
  text-decoration: none;
}

.widget-area.secondary li a:hover {
  color: var(--td-orange);
}

/* Sur une page à colonne, un bandeau pleine largeur passerait SOUS la colonne et
   rendrait ses liens illisibles sur fond sombre (vu sur test-wp le 2026-10-23).
   Il reste dans la colonne de contenu, avec sa gouttière intérieure. */
body.ast-right-sidebar .td-large,
body.ast-left-sidebar .td-large {
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: 1.5rem;
  border-radius: var(--td-rayon, 0);
}

/* Astra ouvre chaque archive par son propre en-tête (`.ast-archive-description`,
   le titre nu). Notre bandeau le remplace ; masquer le seul titre laissait une
   boîte vide de 150 px au-dessus du bandeau (vu sur /blog/builders/ le 2026-10-23). */
body.archive .ast-archive-description {
  display: none;
}

/* Sur une archive à colonne, le bandeau sort dans `.ast-row`, qui porte des marges
   négatives : il débordait du bord gauche du contenu. On le remet à l'aplomb des
   cartes. */
body.archive.ast-right-sidebar .ast-row > .td-hero--archive,
body.archive.ast-left-sidebar .ast-row > .td-hero--archive {
  margin-inline: 1.25rem;
  /* Mesuré : les cartes visibles d'Astra (`.ast-article-inner`) vont de 21 à 910 px
     dans une rangée de 0 à 931 ; le bandeau doit aller de 20 à 911, pas de 20 à 951. */
  width: calc(100% - 2.5rem);
  /* La rangée est un conteneur flex et `.td-hero--archive` porte `flex: 0 0 100%` :
     c'est la base flex qui fait la largeur, pas `width`. */
  flex-basis: calc(100% - 2.5rem);
  max-width: calc(100% - 2.5rem);
}

/* L'ALIGNEMENT DES CARTES SUR LE BANDEAU — mesuré le 2026-10-23 sur machinapolis.com :
   le bandeau allait de 20 à 911 px, les cartes de 64 à 887. Deux décalages :
   - le `ul` du gabarit garde le retrait de liste du thème (20 px à gauche, 0 à droite) ;
   - sur une page à colonne, la section des articles porte la même gouttière intérieure
     que le bandeau — mais le bandeau est une boîte peinte, sa gouttière est dedans ;
     la section est transparente, la sienne devient un retrait visible.
   Les bords des cartes tombent désormais sur ceux du bandeau. */
.td-articles .wp-block-post-template {
  padding-inline: 0;
  margin-inline: 0;
}

body.ast-right-sidebar .td-articles-bloc.td-large,
body.ast-left-sidebar .td-articles-bloc.td-large {
  padding-inline: 0;
}