/*
Theme Name: Perles du Temps
Theme URI: https://perlesdutemps.fr/
Description: Thème du magazine du bien-vieillir. Les valeurs de lisibilité ne sont pas des préférences : elles sont relevées sur aarp.org, health.harvard.edu et nia.nih.gov le 03/08/2026. Voir DESIGN.md.
Author: La rédaction de Perles du Temps
Template: hello-elementor
Version: 3.3.5
Text Domain: perlesdutemps
*/

/* ==========================================================================
   PERLES DU TEMPS, système de lecture
   Écrit depuis une feuille vide le 03/08/2026. Préfixe .pdt- unique au site.

   Toutes les valeurs ci-dessous viennent d'une mesure, pas d'un goût :

     NIA (National Institute on Aging), autorité mondiale de l'UX senior
       corps 23,4 px, interligne 1,5, colonne 60 caractères, contraste 17,22:1
       liens du texte soulignés, bleu ardoise #3f57a6, contraste 6,72:1
       échelle de titres presque plate : H1 38 / H2 34 / H3 30, graisses 600-700

     AARP, page d'article
       corps 20 px, interligne 1,5, colonne 68 caractères, contraste 18,73:1
       liens du texte tous soulignés

     Harvard Health
       corps 16 px, interligne 1,75, avertissement daté visible,
       date de dernière révision en <time datetime>

   Ce qu'on en retient : corps entre 20 et 23 px, interligne 1,5, mesure entre
   60 et 68 caractères, contraste du corps au-dessus de 16:1, liens du texte
   soulignés ET contrastés, échelle de titres resserrée pour aider le balayage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces. Blanc cassé teinté vers l'ardoise (chroma 0,003 sur la teinte
     250), jamais vers le chaud : un fond crème est le réflexe par défaut. */
  --pdt-papier:        oklch(0.976 0.003 250);
  --pdt-blanc:         oklch(0.995 0.001 250);
  --pdt-encart:        oklch(0.955 0.008 252);

  /* Encres. Cible : au-dessus de 16:1 pour le corps, comme les trois références. */
  --pdt-encre:         oklch(0.220 0.018 250);
  --pdt-encre-2:       oklch(0.420 0.020 250);

  /* Accent unique. Calé sur le bleu de lien du NIA, seul accent du site. */
  --pdt-ardoise:       oklch(0.400 0.090 258);
  --pdt-ardoise-fonce: oklch(0.285 0.070 258);
  --pdt-ardoise-pale:  oklch(0.930 0.035 258);

  --pdt-trait:         oklch(0.880 0.006 250);
  --pdt-trait-fort:    oklch(0.760 0.012 250);

  /* Une seule famille, plusieurs graisses. Pile système : elle s'affiche sans
     requête ni saut de mise en page, ce qui compte plus qu'un caractère
     distant quand le lecteur pousse le zoom à 150 %. AARP utilise Lato,
     le NIA Source Sans Pro : deux linéales humanistes, comme celles-ci. */
  --pdt-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
              Helvetica, Arial, Roboto, sans-serif;

  /* Corps : plancher 20 px imposé, 22 px dès 900 px, dans la bande AARP-NIA. */
  --pdt-corps:         1.25rem;
  --pdt-corps-large:   1.375rem;
  --pdt-interligne:    1.55;
  --pdt-mesure:        62ch;      /* entre les 60 du NIA et les 68 d'AARP */

  --pdt-page:          1240px;
  --pdt-rayon:         4px;       /* système unique, appliqué partout */

  /* Rythme vertical unique. Toutes les sections de premier niveau respirent
     de la même valeur : sans ça on obtient 51 px ici, 57 là, 64 ailleurs, et
     l'empilement se voit. */
  --pdt-rythme:        clamp(2.5rem, 4.5vw, 3.5rem);
  --pdt-transition:    150ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Échelle de plans, jamais de valeur arbitraire. */
  --pdt-plan-sommaire: 10;
  --pdt-plan-entete:   20;
  --pdt-plan-evitement:30;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Piège de grille CSS, corrigé ici une fois pour toutes.
   Un enfant de grille a `min-width: auto` : il refuse de descendre sous sa
   largeur de contenu minimale. Une colonne implicite en `auto` éclate donc
   dès qu'un enfant porte un `max-width` large, et la page déborde de la
   valeur exacte de la marge du conteneur. C'est ce qui donnait 20 px de
   débordement à droite sur mobile. */
/* Sélecteurs à UNE seule classe volontairement : les règles de colonnes des
   composants, écrites plus bas, doivent gagner par ordre d'écriture. Un
   sélecteur plus spécifique ici casserait toutes les mises en page à deux
   colonnes sur grand écran. */
.pdt-corps,
.pdt-suite,
.pdt-rubriques,
.pdt-une-grille,
.pdt-position-grille,
.pdt-tete-rubrique-grille,
.pdt-pied-grille { grid-template-columns: minmax(0, 1fr); }

.pdt-corps > *,
.pdt-suite > *,
.pdt-rubriques > *,
.pdt-une-grille > *,
.pdt-position-grille > *,
.pdt-tete-rubrique-grille > *,
.pdt-pied-grille > *,
.pdt-liste article > *,
.pdt-aussi li { min-width: 0; }

body.pdt {
  margin: 0;
  background: var(--pdt-papier);
  color: var(--pdt-encre);
  font-family: var(--pdt-sans);
  font-size: var(--pdt-corps);
  line-height: var(--pdt-interligne);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) {
  body.pdt { font-size: var(--pdt-corps-large); }
}

.pdt img { max-width: 100%; height: auto; display: block; }
.pdt ::selection { background: var(--pdt-ardoise-pale); color: var(--pdt-encre); }

.pdt-page {
  width: 100%;
  max-width: var(--pdt-page);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 760px)  { .pdt-page { padding-inline: 2rem; } }
@media (min-width: 1120px) { .pdt-page { padding-inline: 3rem; } }

/* Focus : le lecteur au clavier ou à la loupe doit le voir sans le chercher. */
.pdt :focus-visible {
  outline: 4px solid var(--pdt-ardoise);
  outline-offset: 2px;
  border-radius: var(--pdt-rayon);
}

.pdt-saut {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--pdt-plan-evitement);
  padding: 1rem 1.5rem;
  background: var(--pdt-encre);
  color: #fff;
  font-weight: 700;
}
.pdt-saut:focus { left: 0; }

.pdt-lecteur-seul {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Typographie
   Échelle resserrée, calquée sur le NIA : le H2 fait environ 70 % du H1 au
   lieu des 50 % habituels. Sur cette cible, un sous-titre trop petit ne se
   repère pas au balayage.
   -------------------------------------------------------------------------- */

.pdt h1, .pdt h2, .pdt h3, .pdt h4 {
  margin: 0 0 0.5em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--pdt-encre);
}

.pdt h1 { font-size: clamp(2.1rem, 3.6vw, 2.9rem); font-weight: 700; }
.pdt h2 { font-size: clamp(1.6rem, 2.6vw, 2.05rem); }
.pdt h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -0.005em; }
.pdt h4 { font-size: clamp(1.15rem, 1.6vw, 1.3rem); }

.pdt p { text-wrap: pretty; }

.pdt-intro {
  font-size: 1.15em;
  line-height: 1.5;
  color: var(--pdt-encre-2);
  max-width: 58ch;
}

.pdt-info {
  font-size: 0.95rem;
  color: var(--pdt-encre-2);
}

.pdt-rubrique {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pdt-ardoise);
  text-decoration: none;
}
.pdt-rubrique:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   4. Liens
   Règle de base à spécificité (0,1,1). Tout sélecteur d'une seule classe
   perdrait contre elle : d'où le préfixe .pdt sur tout ce qui repeint un lien.
   -------------------------------------------------------------------------- */

.pdt a { color: var(--pdt-ardoise); }

.pdt .pdt-titre-lien { color: var(--pdt-encre); text-decoration: none; }
.pdt .pdt-titre-lien:hover,
.pdt .pdt-titre-lien:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* Dans le corps d'un article : soulignés et contrastés, comme au NIA.
   Jamais signalés par la seule couleur. */
.pdt-texte a {
  color: var(--pdt-ardoise);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.pdt-texte a:hover { background: var(--pdt-ardoise-pale); }

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */

.pdt .pdt-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.85rem 1.6rem;
  border: 2px solid var(--pdt-ardoise-fonce);
  border-radius: var(--pdt-rayon);
  background: var(--pdt-ardoise-fonce);
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pdt-transition), border-color var(--pdt-transition);
}
.pdt .pdt-bouton:hover { background: var(--pdt-encre); border-color: var(--pdt-encre); color: #fff; }
.pdt .pdt-bouton:active { transform: translateY(1px); }

.pdt .pdt-bouton-clair {
  background: var(--pdt-blanc);
  color: var(--pdt-encre);
  border-color: var(--pdt-blanc);
}
.pdt .pdt-bouton-clair:hover { background: transparent; border-color: var(--pdt-blanc); color: #fff; }

.pdt .pdt-bouton-ligne {
  background: transparent;
  color: var(--pdt-encre);
  border-color: var(--pdt-trait-fort);
}
.pdt .pdt-bouton-ligne:hover { background: var(--pdt-encre); border-color: var(--pdt-encre); color: #fff; }

/* --------------------------------------------------------------------------
   6. En-tête
   -------------------------------------------------------------------------- */

.pdt-entete {
  position: relative;
  z-index: var(--pdt-plan-entete);
  background: var(--pdt-blanc);
  border-bottom: 4px solid var(--pdt-ardoise-fonce);
}

.pdt-entete-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-block: 0.9rem;
}

/* Le titre du site doit dominer la navigation sans l'écraser. La v3.0.0 le
   posait en graisse 800 à 29,6 px face à une nav en 600 à 17 px : l'écart
   était trop brutal et le bloc lisait comme un logo posé, pas comme un
   bandeau de titre. Graisse 700, taille resserrée, sous-titre calmé. */
.pdt-titre-site { text-decoration: none; display: block; }
.pdt-titre-site b {
  display: block;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--pdt-encre);
}
.pdt-titre-site span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pdt-encre-2);
}

.pdt-entete-actions { display: flex; align-items: center; gap: 0.5rem 1.5rem; flex-wrap: wrap; }
.pdt-entete-actions a:not(.pdt-bouton) {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--pdt-encre);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.pdt-entete-actions a:not(.pdt-bouton):hover,
.pdt-entete-actions a:not(.pdt-bouton):focus-visible { border-bottom-color: var(--pdt-ardoise); }

.pdt-entete .pdt-bouton { min-height: 50px; padding-inline: 1.25rem; font-size: 1rem; }

.pdt-nav { border-top: 1px solid var(--pdt-trait); }
.pdt-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.pdt-nav a {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0.5rem 1rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--pdt-encre);
  text-decoration: none;
  border-bottom: 4px solid transparent;
  transition: background var(--pdt-transition), border-color var(--pdt-transition);
}
.pdt-nav a:hover,
.pdt-nav a:focus-visible { background: var(--pdt-papier); border-bottom-color: var(--pdt-ardoise); }
.pdt-nav li:first-child a { padding-left: 0; }
.pdt-nav [aria-current="page"] { border-bottom-color: var(--pdt-encre); }

.pdt-nav-bascule {
  display: none;
  align-items: center;
  min-height: 54px;
  margin-block: 0.5rem;
  padding: 0.65rem 1.1rem;
  border: 2px solid var(--pdt-encre);
  border-radius: var(--pdt-rayon);
  background: none;
  color: var(--pdt-encre);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.pdt-mobile-seul { display: none; }

@media (max-width: 899px) {
  .pdt-nav-bascule { display: inline-flex; }
  .pdt-nav ul { display: none; flex-direction: column; padding-bottom: 0.75rem; }
  .pdt-nav ul.pdt-ouvert { display: flex; }
  .pdt-nav a { padding-left: 0; border-bottom: 1px solid var(--pdt-trait); }
  .pdt-nav a:hover { border-bottom-color: var(--pdt-trait); }

  /* L'en-tête tenait sur 4 rangs et 213 px de haut. « Qui sommes-nous »
     descend dans le menu déroulant, il reste le titre et un bouton sur le
     premier rang, le bouton des rubriques sur le second. */
  .pdt-mobile-seul { display: block; }
  /* Spécificité (0,3,0) obligatoire : la règle d'affichage des liens de la
     barre du haut est en (0,2,1) et gagnerait sur une simple classe. */
  .pdt-entete-actions a.pdt-hors-mobile { display: none; }
  .pdt-entete-haut { padding-block: 0.75rem; gap: 0.6rem 1rem; }
  .pdt-titre-site b { font-size: 1.25rem; }
  .pdt-titre-site span { font-size: 0.75rem; }
  .pdt-entete .pdt-bouton { min-height: 48px; padding-inline: 1rem; font-size: 0.9375rem; }
  .pdt-nav-bascule { margin-block: 0.4rem; min-height: 50px; }
}

/* --------------------------------------------------------------------------
   7. Accueil : article de tête en écran partagé asymétrique
   -------------------------------------------------------------------------- */

.pdt-une { padding-block: var(--pdt-rythme); border-bottom: 1px solid var(--pdt-trait); }
.pdt-une-grille { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
@media (min-width: 900px) { .pdt-une-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.pdt-une-texte > * + * { margin-top: 1rem; }
.pdt-une-texte h1 { margin: 0.6rem 0 0; }
.pdt-une-visuel { margin: 0; overflow: hidden; border-radius: var(--pdt-rayon); background: var(--pdt-trait); aspect-ratio: 8 / 5; }
.pdt-une-visuel img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   8. Sections
   Titre de section avec une barre courte au-dessus : un repère visuel qui
   n'est pas la petite étiquette en majuscules espacées posée sur chaque
   section, laquelle est la signature la plus reconnaissable d'une page générée.
   -------------------------------------------------------------------------- */

.pdt-section { padding-block: var(--pdt-rythme); }
.pdt-section + .pdt-section { border-top: 1px solid var(--pdt-trait); }

.pdt-section-titre {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 0.9rem;
  border-top: 5px solid var(--pdt-encre);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   9. Trois articles suivants
   -------------------------------------------------------------------------- */

.pdt-suite { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 640px) { .pdt-suite { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .pdt-suite { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pdt-suite article { display: flex; flex-direction: column; gap: 0.8rem; height: 100%; }
.pdt-suite h3 { margin: 0; font-size: 1.3rem; line-height: 1.3; }
.pdt-suite p { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--pdt-encre-2); }
.pdt-suite .pdt-info { margin-top: auto; }

.pdt-vignette { margin: 0; overflow: hidden; border-radius: var(--pdt-rayon); background: var(--pdt-trait); aspect-ratio: 3 / 2; }
.pdt-vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1); }
.pdt-suite article:hover .pdt-vignette img,
.pdt-liste li:hover .pdt-vignette img { transform: scale(1.03); }

/* --------------------------------------------------------------------------
   10. Sommaire des rubriques : liste éditoriale, pas une grille de cartes
   -------------------------------------------------------------------------- */

.pdt-rubriques { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .pdt-rubriques { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

.pdt-rubriques ol { list-style: none; margin: 0; padding: 0; counter-reset: rub; }
.pdt-rubriques li { border-top: 1px solid var(--pdt-trait); }
.pdt-rubriques li:last-child { border-bottom: 1px solid var(--pdt-trait); }
.pdt-rubriques li a {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
  padding-block: 1.15rem;
  color: var(--pdt-encre);
  text-decoration: none;
  transition: background var(--pdt-transition);
}
.pdt-rubriques li a::before {
  counter-increment: rub;
  content: counter(rub, decimal-leading-zero);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pdt-ardoise);
  font-variant-numeric: tabular-nums;
}
.pdt-rubriques li a:hover,
.pdt-rubriques li a:focus-visible { background: var(--pdt-blanc); }
.pdt-rubriques strong { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.pdt-rubriques span { display: block; grid-column: 2; margin-top: 0.25rem; font-size: 1.0625rem; line-height: 1.5; color: var(--pdt-encre-2); }
.pdt-rubriques figure { margin: 0; }
.pdt-rubriques figure img { border-radius: var(--pdt-rayon); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.pdt-rubriques figcaption { margin-top: 0.85rem; font-size: 1rem; line-height: 1.5; color: var(--pdt-encre-2); }

/* --------------------------------------------------------------------------
   11. Bande de position, fond ardoise
   -------------------------------------------------------------------------- */

.pdt-position { background: var(--pdt-ardoise-fonce); color: oklch(0.95 0.01 250); padding-block: var(--pdt-rythme); }
.pdt-position h2 { color: #fff; max-width: 24ch; }
.pdt-position p { max-width: 60ch; }
.pdt-position-grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .pdt-position-grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.pdt-position figure { margin: 0; }
.pdt-position figure img { border-radius: var(--pdt-rayon); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.pdt-position > .pdt-page > * + *,
.pdt-position-grille > div > * + * { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   12. Article
   Deux colonnes au-delà de 1060 px : le sommaire reste visible pendant la
   lecture. C'est ce qui permet de naviguer sans faire défiler à l'aveugle.
   -------------------------------------------------------------------------- */

.pdt-article { padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(3rem, 5vw, 4rem); }

.pdt-fil { margin: 0 0 1.25rem; font-size: 1rem; color: var(--pdt-encre-2); }

.pdt-article-tete { max-width: 34rem; }
.pdt-article-tete h1 { margin: 0.6rem 0 0; }

/* Ligne d'auteur, de date et de révision. Signature collective, jamais un nom. */
.pdt-signature {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: 1.1rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--pdt-trait);
  border-bottom: 1px solid var(--pdt-trait);
  font-size: 1rem;
  color: var(--pdt-encre-2);
}
.pdt-signature b { color: var(--pdt-encre); font-weight: 700; }

.pdt-partage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.1rem; font-size: 1rem; }
/* Sous 560 px, l'étiquette prend sa propre ligne et les quatre boutons
   forment une grille régulière plutôt qu'un enroulement bancal. */
@media (max-width: 559px) {
  .pdt-partage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdt-partage > .pdt-info { grid-column: 1 / -1; }
}
.pdt-partage a, .pdt-partage button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.5rem 1rem;
  border: 2px solid var(--pdt-trait-fort);
  border-radius: var(--pdt-rayon);
  background: var(--pdt-blanc);
  color: var(--pdt-encre);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pdt-transition), border-color var(--pdt-transition);
}
.pdt-partage a:hover, .pdt-partage button:hover { background: var(--pdt-encre); border-color: var(--pdt-encre); color: #fff; }

.pdt-article-visuel { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; border-radius: var(--pdt-rayon); overflow: hidden; background: var(--pdt-trait); }
.pdt-article-visuel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pdt-article-visuel figcaption { padding: 0.7rem 0 0; font-size: 0.95rem; color: var(--pdt-encre-2); }

.pdt-corps { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 1060px) {
  .pdt-corps { grid-template-columns: minmax(0, 1fr) 17.5rem; align-items: start; }
}

/* Réponse courte, avant tout le reste. */
.pdt-reponse {
  margin: 0 0 2rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 3px solid var(--pdt-encre);
  border-radius: var(--pdt-rayon);
  background: var(--pdt-encart);
}
.pdt-reponse h2 {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pdt-ardoise-fonce);
}
.pdt-reponse p { margin: 0; font-size: 1.1em; line-height: 1.5; }

/* Sommaire à ancres */
.pdt-sommaire {
  border: 1px solid var(--pdt-trait);
  border-radius: var(--pdt-rayon);
  background: var(--pdt-blanc);
  padding: 1.25rem 1.35rem;
}
@media (min-width: 1060px) {
  .pdt-sommaire { position: sticky; top: 1.5rem; z-index: var(--pdt-plan-sommaire); max-height: calc(100vh - 3rem); overflow-y: auto; }
}
.pdt-sommaire h2 {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pdt-encre-2);
}
.pdt-sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: som; }
.pdt-sommaire li + li { border-top: 1px solid var(--pdt-trait); }
.pdt-sommaire a {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.5rem;
  padding-block: 0.7rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--pdt-encre);
  text-decoration: none;
}
.pdt-sommaire a::before {
  counter-increment: som;
  content: counter(som) ".";
  color: var(--pdt-ardoise);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pdt-sommaire a:hover, .pdt-sommaire a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.pdt-sommaire .pdt-niveau-3 { padding-left: 2.25rem; font-size: 0.9375rem; }

/* Corps de texte. Mesure 62 caractères, entre les 60 du NIA et les 68 d'AARP. */
.pdt-texte { max-width: var(--pdt-mesure); font-size: 1.0625em; }
.pdt-texte > * + * { margin-top: 1.35em; }
.pdt-texte h2 { margin-top: 2.1em; scroll-margin-top: 1.5rem; }
.pdt-texte h3 { margin-top: 1.8em; scroll-margin-top: 1.5rem; }
.pdt-texte ul, .pdt-texte ol { padding-left: 1.4em; }
.pdt-texte li + li { margin-top: 0.5em; }
.pdt-texte li::marker { color: var(--pdt-ardoise); font-weight: 700; }
.pdt-texte strong { font-weight: 700; }
.pdt-texte img { border-radius: var(--pdt-rayon); margin-block: 2em; }
.pdt-texte figure { margin-inline: 0; }
.pdt-texte blockquote {
  margin: 2em 0;
  padding: 1.35rem 1.6rem;
  border: 1px solid var(--pdt-trait-fort);
  border-radius: var(--pdt-rayon);
  background: var(--pdt-blanc);
}
.pdt-texte blockquote > :first-child { margin-top: 0; }
.pdt-texte table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.pdt-texte th, .pdt-texte td { border: 1px solid var(--pdt-trait); padding: 0.75rem; text-align: left; }
.pdt-texte th { background: var(--pdt-encart); font-weight: 700; }

/* Un tableau d'article ne peut pas rétrécir sous la largeur de ses colonnes.
   Sur un écran de 360 px il débordait de la page entière. Il défile désormais
   dans son propre cadre, la page ne bouge plus. Le cadre est posé au rendu,
   le contenu stocké n'est pas modifié. */
.pdt-tableau {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--pdt-trait);
  border-radius: var(--pdt-rayon);
}
.pdt-tableau table { border: 0; min-width: 30rem; }
.pdt-tableau:focus-visible { outline: 4px solid var(--pdt-ardoise); }

/* Lien interne posé dans le flux par le thème. Il se distingue d'un lien
   sortant : petite flèche, et jamais dans un paragraphe qui porte déjà un
   lien externe. */
.pdt-texte .pdt-lien-interne::after {
  content: " \2192";
  text-decoration: none;
  display: inline-block;
}

/* Bloc de conversion posé au deux tiers de l'article. */
.pdt-relais {
  max-width: var(--pdt-mesure);
  margin: 2.5em 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--pdt-trait-fort);
  border-left-width: 1px;
  border-radius: var(--pdt-rayon);
  background: var(--pdt-encart);
  font-size: 1rem;
  line-height: 1.5;
}
.pdt-relais b { display: block; margin-bottom: 0.35rem; font-size: 1.0625rem; color: var(--pdt-encre); }
.pdt-relais p { margin: 0; }
.pdt-relais a { font-weight: 700; }

/* Bloc de preuve, modèle NIA : date de révision + attribution collective. */
.pdt-preuve {
  max-width: var(--pdt-mesure);
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  padding: clamp(1.25rem, 3vw, 1.6rem);
  border: 1px solid var(--pdt-trait-fort);
  border-radius: var(--pdt-rayon);
  background: var(--pdt-blanc);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--pdt-encre-2);
}
.pdt-preuve h2 { margin: 0 0 0.75rem; font-size: 1.125rem; color: var(--pdt-encre); }
.pdt-preuve p + p { margin-top: 0.75rem; }
.pdt-preuve b { color: var(--pdt-encre); }
.pdt-preuve ul { margin: 0.75rem 0 0; padding-left: 1.3em; }
.pdt-preuve li + li { margin-top: 0.4em; }

/* À lire aussi */
.pdt-aussi { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.pdt-aussi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
@media (min-width: 700px) { .pdt-aussi ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pdt-aussi h3 { margin: 0.7rem 0 0; font-size: 1.125rem; line-height: 1.35; }

/* --------------------------------------------------------------------------
   13. Archives et listes
   -------------------------------------------------------------------------- */

.pdt-tete-rubrique { padding-block: var(--pdt-rythme); border-bottom: 1px solid var(--pdt-trait); background: var(--pdt-blanc); }
.pdt-tete-rubrique-grille { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 820px) { .pdt-tete-rubrique-grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.pdt-tete-rubrique h1 { margin: 0 0 0.6rem; }
.pdt-tete-rubrique figure { margin: 0; }
.pdt-tete-rubrique img { border-radius: var(--pdt-rayon); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

.pdt-liste { list-style: none; margin: 0; padding: 0; }
.pdt-liste > li { border-bottom: 1px solid var(--pdt-trait); }
.pdt-liste > li:first-child { border-top: 1px solid var(--pdt-trait); }
.pdt-liste article { display: grid; gap: 1.25rem; padding-block: clamp(1.5rem, 3vw, 2rem); align-items: start; }
@media (min-width: 700px) { .pdt-liste article { grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; } }
.pdt-liste h2 { margin: 0.5rem 0 0; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.pdt-liste p { margin: 0.6rem 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--pdt-encre-2); max-width: 60ch; }
.pdt-liste .pdt-info { display: block; margin-top: 0.65rem; }

.pdt-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.pdt-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 54px;
  padding-inline: 0.9rem;
  border: 2px solid var(--pdt-trait-fort);
  border-radius: var(--pdt-rayon);
  background: var(--pdt-blanc);
  color: var(--pdt-encre);
  font-weight: 700;
  text-decoration: none;
}
.pdt-pagination .page-numbers:hover,
.pdt-pagination .page-numbers.current { background: var(--pdt-ardoise-fonce); border-color: var(--pdt-ardoise-fonce); color: #fff; }

/* --------------------------------------------------------------------------
   14. Contact, seule conversion du site
   -------------------------------------------------------------------------- */

.pdt-appel { background: var(--pdt-ardoise-fonce); color: oklch(0.95 0.01 250); padding-block: var(--pdt-rythme); }
.pdt-appel h2 { color: #fff; max-width: 26ch; }
.pdt-appel p { max-width: 58ch; }
.pdt-appel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.pdt .pdt-appel-courriel { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pdt-appel > .pdt-page > * + * { margin-top: 0.9rem; }

.pdt-formulaire {
  border: 3px solid var(--pdt-encre);
  border-radius: var(--pdt-rayon);
  background: var(--pdt-blanc);
  padding: clamp(1.4rem, 4vw, 2.5rem);
}
.pdt-formulaire h2 { margin-top: 0; }
.pdt-formulaire-intro { max-width: 56ch; color: var(--pdt-encre-2); }
.pdt-formulaire-direct { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--pdt-trait); font-size: 1.0625rem; }

.pdt-formulaire .fluentform label,
.pdt-formulaire .frm-fluent-form label {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: var(--pdt-encre) !important;
  margin-bottom: 0.4rem !important;
}
.pdt-formulaire .fluentform input[type="text"],
.pdt-formulaire .fluentform input[type="email"],
.pdt-formulaire .fluentform input[type="tel"],
.pdt-formulaire .fluentform textarea,
.pdt-formulaire .fluentform select {
  width: 100% !important;
  min-height: 56px !important;
  padding: 0.85rem 1rem !important;
  border: 2px solid var(--pdt-trait-fort) !important;
  border-radius: var(--pdt-rayon) !important;
  background: #fff !important;
  color: var(--pdt-encre) !important;
  font-family: var(--pdt-sans) !important;
  font-size: 1.0625rem !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}
.pdt-formulaire .fluentform ::placeholder { color: var(--pdt-encre-2) !important; opacity: 1 !important; }
.pdt-formulaire .fluentform input:focus,
.pdt-formulaire .fluentform textarea:focus,
.pdt-formulaire .fluentform select:focus {
  border-color: var(--pdt-ardoise) !important;
  outline: 4px solid var(--pdt-ardoise) !important;
  outline-offset: 2px !important;
}
.pdt-formulaire .fluentform textarea { min-height: 165px !important; }
.pdt-formulaire .fluentform .ff-btn-submit,
.pdt-formulaire .fluentform button[type="submit"] {
  min-height: 58px !important;
  padding: 1rem 2.2rem !important;
  border: 2px solid var(--pdt-ardoise-fonce) !important;
  border-radius: var(--pdt-rayon) !important;
  background: var(--pdt-ardoise-fonce) !important;
  color: #fff !important;
  font-family: var(--pdt-sans) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  width: 100%;
}
@media (min-width: 700px) {
  .pdt-formulaire .fluentform .ff-btn-submit,
  .pdt-formulaire .fluentform button[type="submit"] { width: auto; }
}
.pdt-formulaire .fluentform .ff-btn-submit:hover { background: var(--pdt-encre) !important; border-color: var(--pdt-encre) !important; }
.pdt-formulaire .fluentform .ff-el-form-check-label { font-weight: 400 !important; }
.pdt-formulaire .fluentform .text-danger { color: oklch(0.44 0.17 27) !important; font-size: 1rem !important; }

/* --------------------------------------------------------------------------
   15. Pied de page
   -------------------------------------------------------------------------- */

/* Aucune marge au-dessus du pied. La bande de contact le précède sur tous les
   gabarits, et une marge laissait entre les deux une bande de fond de page
   morte de 64 px. Le sélecteur adjacent ne suffit pas : la bande de contact
   vit dans <main>, le pied est le frère de <main>, pas de la bande. Le pied
   porte déjà sa propre respiration en padding interne. */
.pdt-pied { margin-top: 0; padding-block: var(--pdt-rythme) 1.75rem; background: var(--pdt-encre); color: oklch(0.86 0.012 250); font-size: 1.0625rem; }
.pdt-pied a { color: #fff; }
.pdt-pied h2 { margin: 0 0 1rem; color: #fff; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.pdt-pied-grille { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); padding-bottom: 2.25rem; border-bottom: 1px solid oklch(0.4 0.02 250); }
.pdt-pied ul { list-style: none; margin: 0; padding: 0; }
.pdt-pied li + li { margin-top: 0.6rem; }
.pdt-pied-marque p { max-width: 42ch; margin: 0; }
.pdt-pied-bas { display: flex; flex-wrap: wrap; gap: 0.85rem 1.75rem; justify-content: space-between; padding-top: 1.6rem; font-size: 1rem; }
.pdt-pied-bas p { margin: 0; max-width: 62ch; }
.pdt-pied-bas ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
/* Mention d'identification du contenu commercial. Prend sa propre ligne :
   `flex-basis: 100%` force le retour, sinon elle s'insere dans la rangee
   `space-between` et decale le copyright et les liens. Meme taille et meme
   couleur que le reste du pied, la cible lit mal le petit texte grise. */
.pdt-pied-mention { flex-basis: 100%; margin: 0; max-width: 62ch; }

/* --------------------------------------------------------------------------
   16. Recherche, 404
   -------------------------------------------------------------------------- */

.pdt-vide { padding-block: clamp(2.5rem, 5vw, 4rem); }
.pdt-recherche { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; max-width: 34rem; }
.pdt-recherche input[type="search"] {
  flex: 1 1 220px;
  min-height: 56px;
  padding: 0.85rem 1rem;
  border: 2px solid var(--pdt-trait-fort);
  border-radius: var(--pdt-rayon);
  background: #fff;
  color: var(--pdt-encre);
  font-family: var(--pdt-sans);
  font-size: 1.0625rem;
}
.pdt-recherche input[type="search"]::placeholder { color: var(--pdt-encre-2); opacity: 1; }

/* --------------------------------------------------------------------------
   17. Mouvement
   Volontairement au plancher : survol, focus, appui. Rien n'entre en scène au
   défilement, aucun contenu n'est masqué en attendant une animation. Sur cette
   cible, un texte qui bouge tout seul gêne la lecture au lieu de la servir.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pdt *, .pdt *::before, .pdt *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   18. Impression
   -------------------------------------------------------------------------- */

@media print {
  .pdt-entete, .pdt-pied, .pdt-appel, .pdt-aussi, .pdt-formulaire, .pdt-sommaire, .pdt-partage, .pdt-relais { display: none !important; }
  body.pdt { background: #fff; color: #000; font-size: 12pt; }
  .pdt-corps { display: block; }
  .pdt-texte { max-width: none; }
  .pdt-texte a::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
}