/* =========================================================================
   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:        #fb5604;
  --td-orange-clair:  #e0792a;
  --td-orange-sombre: #f75504;
  --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:       1024px;
}

/* 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 {
  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é. */
  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; }

/* --------------------------------------------------------------- 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;
  border-radius: 0 var(--td-rayon) var(--td-rayon) 0;
}

.td-page code {
  background: color-mix(in srgb, currentColor 8%, transparent);
  padding: 0.12em 0.35em;
  border-radius: 4px;
  font-size: 0.92em;
}

/* 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;
}

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;
}