/* =========================================================================
   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:        #FF6600;
  --td-orange-clair:  #FF8A3D;
  --td-orange-sombre: #D45500;
  --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 {
  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; }

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

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