/* ============================================================================
   BLOG / ARTICLE — hp-flottante.fr
   Feuille dédiée aux pages d'article et au hub, chargée APRÈS /scss/main.css.

   Pourquoi un fichier séparé et non un partial 7-1 : scss/main.css embarque
   des préfixes ajoutés par autoprefixer qu'une simple recompilation de
   main.scss ferait disparaître. Ce fichier évite de rejouer ce build.

   DIRECTION — « cahier d'ingénieur »
   Le sujet du site, c'est de la mesure : des pressions, des températures, des
   kWh cumac, des textes réglementaires. La page est donc traitée comme une
   revue technique imprimée et non comme une page de marque : fond papier chaud
   plutôt que blanc d'écran, encre plutôt que gris bleuté, filets plutôt que
   cartes flottantes, sections numérotées, et toutes les données (dates, durée,
   légendes, sources, barème) en monospace pour qu'on les lise comme des
   relevés. La couleur de marque est réservée aux liens et aux repères ; elle
   ne remplit plus des aplats.

   Trois familles, un rôle chacune :
   - Bricolage Grotesque : titrage. Grotesque contemporaine à forte
     personnalité, dessinée pour les grands corps, qui donne au titre le poids
     d'une une de magazine.
   - IBM Plex Mono : appareil de lecture. Dessinée pour l'ingénierie, elle
     signale d'un coup d'oeil ce qui est donnée et ce qui est prose.
   - Inter : corps de texte uniquement, déjà chargée par le reste du site.

   Aucune couleur de marque n'est inventée : primary, secondary et accent sont
   repris de scss/abstracts/_variables.scss. Les tons papier et encre sont
   propres au blog et déclarés ci-dessous.
   ========================================================================== */

:root {
  /* Marque, repris de _variables.scss */
  --blog-primary: #0056A6;
  --blog-primary-dark: #003D75;
  --blog-secondary: #00A3E0;
  --blog-accent: #FF6B35;
  --blog-accent-dark: #E55A28;

  /* Papier et encre, propres au blog */
  --blog-paper: #FAF8F3;
  --blog-paper-alt: #F2EEE4;
  --blog-ink: #15181C;
  --blog-ink-deep: #0C0E11;
  --blog-ink-soft: #4A5158;
  --blog-ink-faint: #8A9299;
  --blog-rule: #DCD5C5;
  --blog-rule-strong: #C4BBA6;
  --blog-white: #FFFFFF;

  /* Compatibilité : anciens noms encore utilisés par des composants du site */
  --blog-gray-100: #F2EEE4;
  --blog-gray-200: #DCD5C5;
  --blog-gray-600: #4A5158;
  --blog-gray-900: #15181C;

  --blog-font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --blog-font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --blog-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --blog-measure: 70ch;
  --blog-sidebar: 300px;
  --blog-gutter: 4.5rem;

  /* Grain papier. Une seule texture, réutilisée : elle donne de la matière
     sans une seule requête réseau. */
  --blog-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.26'/%3E%3C/svg%3E");
}

/* --------------------------------------------
   1. Support : papier
   -------------------------------------------- */
.p-article,
.p-hub {
  background-color: var(--blog-paper);
  background-image: var(--blog-grain);
  color: var(--blog-ink);
}

/* --------------------------------------------
   2. Barre de progression de lecture
   Fil unique en haut de page. Le mode sans animation la retire plutôt que
   de la laisser figée à zéro, ce qui serait un repère faux.
   -------------------------------------------- */
.p-article__progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 2px;
  background: var(--blog-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@supports (animation-timeline: scroll()) {
  .p-article__progress {
    animation: p-article-progress linear;
    animation-timeline: scroll(root block);
  }

  @keyframes p-article-progress {
    to { transform: scaleX(1); }
  }
}

/* --------------------------------------------
   3. Hero
   Encre profonde tramée d'une grille technique, filet accent en tête.
   Aucun dégradé de marque : le contraste vient du noir et du corps du titre.
   -------------------------------------------- */
.p-article__hero {
  position: relative;
  padding: 4rem 0 3.25rem;
  background-color: var(--blog-ink-deep);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(80% 120% at 78% 0%, rgba(0, 86, 166, 0.55), transparent 62%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
  color: var(--blog-paper);
  overflow: hidden;
}

.p-article__hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--blog-accent);
}

.p-article__hero-inner {
  position: relative;
  max-width: 62rem;
  text-align: left;
}

/* --------------------------------------------
   4. Fil d'Ariane
   -------------------------------------------- */
.p-article__breadcrumb {
  margin-bottom: 2.25rem;
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.p-article__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-article__breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: rgba(250, 248, 243, 0.35);
}

.p-article__breadcrumb a {
  color: rgba(250, 248, 243, 0.7);
  text-decoration: none;
}

.p-article__breadcrumb a:hover,
.p-article__breadcrumb a:focus-visible {
  color: var(--blog-accent);
}

.p-article__breadcrumb [aria-current] {
  color: rgba(250, 248, 243, 0.45);
}

/* --------------------------------------------
   5. Surtitre, titre, chapô, signature
   -------------------------------------------- */
.p-article__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.5rem;
  color: var(--blog-accent);
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.p-article__eyebrow::after {
  content: "";
  flex: 0 0 3.5rem;
  height: 1px;
  background: rgba(255, 107, 53, 0.5);
}

.p-article__title {
  margin: 0 0 1.75rem;
  max-width: 18ch;
  color: var(--blog-paper);
  font-family: var(--blog-font-display);
  font-size: clamp(2.5rem, 6.2vw, 4.75rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.p-article__standfirst {
  max-width: 46ch;
  margin: 0 0 2.75rem;
  color: rgba(250, 248, 243, 0.78);
  font-family: var(--blog-font-display);
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}

.p-article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 248, 243, 0.14);
  color: rgba(250, 248, 243, 0.6);
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.p-article__avatar {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(250, 248, 243, 0.3);
  color: var(--blog-paper);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.p-article__byline-author {
  color: var(--blog-paper);
  font-weight: 500;
}

.p-article__byline-sep {
  color: rgba(250, 248, 243, 0.25);
}

/* --------------------------------------------
   6. Image de couverture
   Contenue, jamais recadrée : les schémas techniques du site sont carrés et
   un cadrage panoramique les rend illisibles. Hauteur volontairement basse,
   l'image ouvre l'article, elle ne le remplace pas.
   -------------------------------------------- */
/* Le cadre porte sur l'image seule : une legende plus large que l'illustration
   fabriquerait un bloc blanc vide autour d'elle. */
.p-article__cover {
  position: relative;
  z-index: 2;
  margin: -2.5rem 0 0;
}

.p-article__cover img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 260px;
  padding: 0.75rem;
  border: 1px solid var(--blog-rule);
  background: var(--blog-white);
}

.p-article__cover figcaption,
.p-article__figure figcaption {
  max-width: 62ch;
  margin-top: 0.875rem;
  color: var(--blog-ink-faint);
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  line-height: 1.55;
}

@media (max-width: 767px) {
  .p-article__cover img { max-height: 220px; }
}

/* --------------------------------------------
   7. Grille de lecture
   Une colonne de texte étroite, une colonne d'appareil. La marge gauche
   accueille les numéros de section à partir de 1200 px.
   -------------------------------------------- */
.p-article__body {
  padding: 3.5rem 0 4rem;
}

.p-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--blog-sidebar);
  gap: var(--blog-gutter);
  align-items: start;
}

.p-article__main {
  min-width: 0;
  max-width: var(--blog-measure);
}

/* La goulotte des numeros de section s'ajoute a la mesure au lieu de la
   rogner : le texte garde sa largeur de lecture. */
@media (min-width: 1200px) {
  .p-article__main {
    max-width: calc(var(--blog-measure) + 3.25rem);
    padding-left: 3.25rem;
  }
}

@media (max-width: 991px) {
  .p-article__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
  .p-article__main { max-width: none; }
}

/* --------------------------------------------
   8. L'essentiel
   Encadré à filets. C'est le bloc le plus cité par les moteurs : il est posé
   haut, sans ornement, pour être lu en trois secondes.
   -------------------------------------------- */
.p-article__key {
  margin: 0 0 3rem;
  padding: 1.5rem 0 1.75rem;
  border-top: 2px solid var(--blog-ink);
  border-bottom: 1px solid var(--blog-rule);
}

.p-article__key-title {
  margin: 0 0 1.25rem;
  color: var(--blog-ink);
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.p-article__key ul {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: key;
}

.p-article__key li {
  position: relative;
  margin-bottom: 0.875rem;
  padding-left: 2.5rem;
  color: var(--blog-ink);
  font-size: 1.0625rem;
  line-height: 1.6;
  counter-increment: key;
}

.p-article__key li::before {
  content: counter(key, decimal-leading-zero);
  position: absolute;
  top: 0.15em;
  left: 0;
  color: var(--blog-accent);
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
}

.p-article__key li:last-child { margin-bottom: 0; }

/* --------------------------------------------
   9. Corps de texte
   19 px sur 66 caractères : la mesure du confort en lecture longue.
   -------------------------------------------- */
.p-article__prose {
  counter-reset: section;
  color: var(--blog-ink);
  font-family: var(--blog-font-body);
  font-size: 1.1875rem;
  line-height: 1.75;
}

.p-article__prose p {
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}

/* Lettrine sur le premier paragraphe : le seul ornement de la page, et il
   sert à quelque chose, il marque l'entrée dans le texte. */
.p-article__prose > p:first-of-type {
  font-size: 1.25rem;
  line-height: 1.65;
}

.p-article__prose > p:first-of-type::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--blog-ink);
  font-family: var(--blog-font-display);
  font-size: 3.6em;
  font-weight: 700;
  line-height: 0.78;
}

/* Titres de section, numérotés. Le numéro passe en marge sur grand écran,
   au-dessus du titre en dessous : jamais superposé au texte. */
.p-article__prose h2 {
  position: relative;
  margin: 3.5rem 0 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--blog-rule);
  color: var(--blog-ink);
  font-family: var(--blog-font-display);
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  counter-increment: section;
  text-wrap: balance;
}

.p-article__prose h2::before {
  content: counter(section, decimal-leading-zero);
  display: block;
  margin-bottom: 0.5rem;
  color: var(--blog-accent);
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

@media (min-width: 1200px) {
  .p-article__prose h2::before {
    position: absolute;
    top: 1.65rem;
    left: -3.25rem;
    margin: 0;
  }
}

.p-article__prose h3 {
  margin: 2.5rem 0 0.875rem;
  color: var(--blog-primary-dark);
  font-family: var(--blog-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.p-article__prose ul,
.p-article__prose ol {
  margin: 0 0 1.5rem;
  padding-left: 0;
  list-style: none;
}

.p-article__prose ul li,
.p-article__prose ol li {
  position: relative;
  margin-bottom: 0.75rem;
  padding-left: 1.75rem;
}

.p-article__prose ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--blog-accent);
  font-family: var(--blog-font-mono);
}

.p-article__prose ol {
  counter-reset: pl;
}

.p-article__prose ol li {
  counter-increment: pl;
}

.p-article__prose ol li::before {
  content: counter(pl) ".";
  position: absolute;
  left: 0;
  color: var(--blog-accent);
  font-family: var(--blog-font-mono);
  font-size: 0.875rem;
  font-weight: 600;
}

.p-article__prose strong {
  font-weight: 600;
}

/* Liens : le souligné s'épaissit au survol au lieu de changer de couleur.
   Le repère reste lisible pour qui distingue mal les teintes. */
.p-article__prose a {
  color: var(--blog-primary);
  text-decoration: none;
  background-image: linear-gradient(var(--blog-primary), var(--blog-primary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.18s ease, color 0.18s ease;
}

.p-article__prose a:hover,
.p-article__prose a:focus-visible {
  color: var(--blog-primary-dark);
  background-size: 100% 3px;
}

/* --------------------------------------------
   10. Citation
   -------------------------------------------- */
.p-article__quote {
  margin: 2.75rem 0;
  padding: 0 0 0 1.75rem;
  border-left: 3px solid var(--blog-accent);
  color: var(--blog-ink);
  font-family: var(--blog-font-display);
  font-size: 1.375rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
}

.p-article__quote cite {
  display: block;
  margin-top: 1rem;
  color: var(--blog-ink-faint);
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.04em;
}

.p-article__quote cite::before {
  content: "— ";
}

/* --------------------------------------------
   11. Figure de contenu
   Bornée à 400 px et alignée sur la colonne : une illustration technique se
   lit, elle n'a pas à occuper l'écran.
   -------------------------------------------- */
.p-article__figure {
  margin: 2.5rem 0;
}

.p-article__figure img {
  display: block;
  width: auto;
  max-width: min(100%, 400px);
  height: auto;
  max-height: 300px;
  padding: 0.75rem;
  border: 1px solid var(--blog-rule);
  background: var(--blog-white);
}

/* --------------------------------------------
   12. Composants du site repris dans la prose
   Encadré, tableau et chiffre clé sont des composants existants : ils sont
   ici ramenés au registre papier, sans aplats ni ombres.
   -------------------------------------------- */
.p-article__prose .c-info-box {
  margin: 2.25rem 0;
  padding: 1.25rem 1.5rem;
  border: 0;
  border-left: 3px solid var(--blog-primary);
  border-radius: 0;
  background: var(--blog-paper-alt);
  box-shadow: none;
}

.p-article__prose .c-info-box__title {
  margin: 0 0 0.5rem;
  color: var(--blog-primary-dark);
  font-family: var(--blog-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.p-article__prose .c-info-box__content p:last-child {
  margin-bottom: 0;
}

.p-article__prose .c-table-wrapper {
  margin: 2.25rem 0;
  overflow-x: auto;
}

.p-article__prose .c-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  box-shadow: none;
  font-size: 0.9375rem;
}

.p-article__prose .c-table caption {
  margin-bottom: 0.875rem;
  color: var(--blog-ink-faint);
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: left;
}

.p-article__prose .c-table th {
  padding: 0.625rem 1rem 0.625rem 0;
  border: 0;
  border-bottom: 2px solid var(--blog-ink);
  background: transparent;
  color: var(--blog-ink);
  font-family: var(--blog-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}

.p-article__prose .c-table td {
  padding: 0.875rem 1rem 0.875rem 0;
  border: 0;
  border-bottom: 1px solid var(--blog-rule);
  background: transparent;
  vertical-align: top;
}

.p-article__prose .c-stats-card {
  margin: 2.5rem 0;
  padding: 1.75rem 0;
  border: 0;
  border-top: 2px solid var(--blog-ink);
  border-bottom: 1px solid var(--blog-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.p-article__prose .c-stats-card__number {
  color: var(--blog-ink);
  font-family: var(--blog-font-display);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.p-article__prose .c-stats-card__label {
  max-width: 44ch;
  margin: 0.875rem 0 0;
  color: var(--blog-ink-soft);
  font-family: var(--blog-font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* --------------------------------------------
   13. Sommaire
   Filet vertical, repère plein sur la section lue. L'état actif porte aussi
   aria-current : le repère ne tient pas qu'à la couleur.
   -------------------------------------------- */
.p-article__toc {
  padding-left: 1.25rem;
  border-left: 1px solid var(--blog-rule);
}

.p-article__toc-title {
  margin: 0 0 1rem;
  color: var(--blog-ink-faint);
  font-family: var(--blog-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.p-article__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.p-article__toc-list li {
  counter-increment: toc;
}

.p-article__toc-list a {
  position: relative;
  display: block;
  padding: 0.4rem 0;
  color: var(--blog-ink-soft);
  font-size: 0.875rem;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.16s ease, transform 0.16s ease;
}

.p-article__toc-list a::before {
  content: counter(toc, decimal-leading-zero);
  margin-right: 0.65rem;
  color: var(--blog-ink-faint);
  font-family: var(--blog-font-mono);
  font-size: 0.6875rem;
}

.p-article__toc-list a:hover,
.p-article__toc-list a:focus-visible {
  color: var(--blog-ink);
  transform: translateX(2px);
}

.p-article__toc-list a.is-active {
  color: var(--blog-ink);
  font-weight: 600;
}

.p-article__toc-list a.is-active::before {
  color: var(--blog-accent);
}

.p-article__toc .p-article__toc-list a.is-active::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: -1.3rem;
  width: 3px;
  height: 1rem;
  background: var(--blog-accent);
}

/* Sommaire replié, sous 992 px */
.p-article__toc-mobile {
  display: none;
  margin: 0 0 2.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--blog-rule);
  border-bottom: 1px solid var(--blog-rule);
}

.p-article__toc-mobile summary {
  cursor: pointer;
  color: var(--blog-ink);
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  list-style: none;
  text-transform: uppercase;
}

.p-article__toc-mobile summary::-webkit-details-marker { display: none; }

.p-article__toc-mobile summary::after {
  content: "+";
  float: right;
  font-weight: 400;
}

.p-article__toc-mobile[open] summary::after { content: "\2212"; }

.p-article__toc-mobile .p-article__toc-list { margin-top: 1rem; }

@media (max-width: 991px) {
  .p-article__toc-mobile { display: block; }
  .p-article__toc { display: none; }
}

/* --------------------------------------------
   14. Colonne latérale
   -------------------------------------------- */
.p-article__aside {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: sticky;
  top: 1.5rem;
}

@media (max-width: 991px) {
  .p-article__aside { position: static; }
}

.p-article__widget {
  padding: 1.5rem;
  border: 1px solid var(--blog-rule);
  background: var(--blog-white);
}

.p-article__widget--form {
  border: 0;
  padding: 1.75rem 1.5rem;
  background-color: var(--blog-ink-deep);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--blog-paper);
}

.p-article__widget-title {
  margin: 0 0 0.5rem;
  font-family: var(--blog-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.p-article__widget--form .p-article__widget-title {
  color: var(--blog-paper);
}

.p-article__widget--form p {
  margin: 0 0 1rem;
  color: rgba(250, 248, 243, 0.72);
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
}

/* --------------------------------------------
   15. Partage
   -------------------------------------------- */
.p-article__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin: 3.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--blog-rule);
}

.p-article__share-label {
  color: var(--blog-ink-faint);
  font-family: var(--blog-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.p-article__share-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blog-ink-soft);
  font-family: var(--blog-font-mono);
  font-size: 0.8125rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.16s ease;
}

.p-article__share-link::before {
  content: "↗ ";
  color: var(--blog-ink-faint);
}

.p-article__share-link:hover,
.p-article__share-link:focus-visible {
  color: var(--blog-accent-dark);
}

/* --------------------------------------------
   16. Bloc auteur (E-E-A-T)
   -------------------------------------------- */
.p-article__author {
  display: flex;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--blog-rule);
  border-bottom: 1px solid var(--blog-rule);
}

.p-article__author-avatar {
  flex: 0 0 3rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--blog-ink);
  color: var(--blog-ink);
  font-family: var(--blog-font-mono);
  font-size: 0.875rem;
  font-weight: 600;
}

.p-article__author-name {
  margin: 0 0 0.25rem;
  color: var(--blog-ink);
  font-family: var(--blog-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.p-article__author-role {
  margin: 0 0 0.75rem;
  color: var(--blog-ink-faint);
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}

.p-article__author-bio {
  margin: 0;
  color: var(--blog-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.p-article__author-bio a {
  color: var(--blog-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --------------------------------------------
   17. Questions fréquentes
   -------------------------------------------- */
.p-article__faq {
  margin-top: 3.5rem;
}

.p-article__faq h2 {
  margin: 0 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--blog-ink);
  color: var(--blog-ink);
  font-family: var(--blog-font-display);
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.p-article__faq-item {
  border-bottom: 1px solid var(--blog-rule);
}

.p-article__faq-item summary {
  position: relative;
  padding: 1.125rem 2.5rem 1.125rem 0;
  color: var(--blog-ink);
  font-family: var(--blog-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color 0.16s ease;
}

.p-article__faq-item summary::-webkit-details-marker { display: none; }

.p-article__faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  color: var(--blog-accent);
  font-family: var(--blog-font-mono);
  font-size: 1.25rem;
  font-weight: 400;
}

.p-article__faq-item[open] summary::after { content: "\2212"; }

.p-article__faq-item summary:hover,
.p-article__faq-item summary:focus-visible {
  color: var(--blog-primary);
}

.p-article__faq-answer {
  padding: 0 2.5rem 1.375rem 0;
  color: var(--blog-ink-soft);
  font-size: 1rem;
  line-height: 1.7;
}

.p-article__faq-answer p { margin: 0; }

/* Ouverture animée là où le navigateur sait interpoler une hauteur auto */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .p-article__faq-item::details-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.28s ease, opacity 0.28s ease, content-visibility 0.28s allow-discrete;
  }

  .p-article__faq-item[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

/* --------------------------------------------
   18. Sources
   Volontairement discret : la liste sert la vérification, pas la lecture.
   Numérotation visible pour pouvoir citer « source 2 » dans un échange.
   -------------------------------------------- */
.p-article__sources {
  margin: 3rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--blog-rule);
}

.p-article__sources-title {
  margin: 0 0 1.125rem;
  color: var(--blog-ink-faint);
  font-family: var(--blog-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.p-article__sources-list {
  margin: 0;
  /* main.css remet list-style à none sur tous les ol : la numérotation doit
     être redéclarée ici pour que « source 2 » veuille dire quelque chose. */
  list-style: decimal;
  padding-left: 1.5rem;
  color: var(--blog-ink-soft);
  font-family: var(--blog-font-mono);
  font-size: 0.8125rem;
  line-height: 1.65;
}

.p-article__sources-list li {
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

.p-article__sources-list li::marker {
  color: var(--blog-ink-faint);
}

.p-article__sources-list li:last-child { margin-bottom: 0; }

.p-article__sources-list a {
  color: var(--blog-primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.p-article__sources-list a:hover,
.p-article__sources-list a:focus-visible {
  color: var(--blog-primary-dark);
}

/* --------------------------------------------
   19. Bandeau d'appel à l'action
   -------------------------------------------- */
.p-article__cta {
  position: relative;
  margin-top: 3rem;
  padding: 2.75rem 2.25rem;
  background-color: var(--blog-ink-deep);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  color: var(--blog-paper);
}

.p-article__cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--blog-accent);
}

.p-article__cta h2 {
  max-width: 20ch;
  margin: 0 0 0.875rem;
  color: var(--blog-paper);
  font-family: var(--blog-font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.p-article__cta p {
  max-width: 52ch;
  margin: 0 0 1.75rem;
  color: rgba(250, 248, 243, 0.75);
  font-size: 1rem;
  line-height: 1.65;
}

/* --------------------------------------------
   20. Articles liés
   -------------------------------------------- */
.p-article__related {
  padding: 4rem 0;
  border-top: 1px solid var(--blog-rule);
  background: var(--blog-paper-alt);
}

.p-article__related-title {
  margin: 0 0 2rem;
  color: var(--blog-ink);
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.p-article__related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border-top: 1px solid var(--blog-rule-strong);
}

.p-article__related-card {
  padding: 1.5rem 1.5rem 1.75rem 0;
  border-bottom: 1px solid var(--blog-rule);
  transition: background-color 0.18s ease;
}

@media (min-width: 768px) {
  .p-article__related-card + .p-article__related-card {
    padding-left: 1.5rem;
    border-left: 1px solid var(--blog-rule);
  }
}

.p-article__related-card:hover {
  background: rgba(255, 255, 255, 0.55);
}

.p-article__related-tag {
  margin: 0 0 0.625rem;
  color: var(--blog-accent);
  font-family: var(--blog-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.p-article__related-card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--blog-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.p-article__related-card h3 a {
  color: var(--blog-ink);
  text-decoration: none;
}

.p-article__related-card h3 a:hover,
.p-article__related-card h3 a:focus-visible {
  color: var(--blog-primary);
}

.p-article__related-card p {
  margin: 0;
  color: var(--blog-ink-soft);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* --------------------------------------------
   21. Hub — page de listing
   Le listing est une table des matières, pas une galerie : filets, index,
   pas de vignette. Sur un sujet technique, le titre est l'illustration.
   -------------------------------------------- */
.p-hub__hero {
  position: relative;
  padding: 5rem 0 4.5rem;
  background-color: var(--blog-ink-deep);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(70% 110% at 82% 0%, rgba(0, 86, 166, 0.5), transparent 60%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
  color: var(--blog-paper);
  overflow: hidden;
}

.p-hub__hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--blog-accent);
}

.p-hub__hero-inner {
  position: relative;
  max-width: 54rem;
  /* main.css centre le contenu de certaines sections : le titrage
     editorial s'aligne sur la colonne, pas sur l'axe de la page. */
  text-align: left;
}

.p-hub__title {
  max-width: 16ch;
  margin: 0 0 1.75rem;
  color: var(--blog-paper);
  font-family: var(--blog-font-display);
  font-size: clamp(2.5rem, 6.5vw, 5rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.p-hub__standfirst {
  max-width: 52ch;
  margin: 0 0 2rem;
  color: rgba(250, 248, 243, 0.75);
  font-family: var(--blog-font-display);
  font-size: clamp(1rem, 1.8vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
}

.p-hub__count {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  color: rgba(250, 248, 243, 0.6);
  font-family: var(--blog-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.p-hub__count::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--blog-accent);
}

.p-hub__grid-wrap {
  padding: 0 0 4rem;
}

.p-hub__grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 2px solid var(--blog-ink);
  counter-reset: hub;
}

.p-hub__card {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 9rem;
  gap: 1.5rem;
  align-items: start;
  padding: 2rem 0;
  border-bottom: 1px solid var(--blog-rule);
  counter-increment: hub;
  transition: background-color 0.18s ease;
}

.p-hub__card::before {
  content: counter(hub, decimal-leading-zero);
  color: var(--blog-accent);
  font-family: var(--blog-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.p-hub__card:hover {
  background: rgba(255, 255, 255, 0.5);
}

.p-hub__card-body { min-width: 0; }

.p-hub__card-tag {
  display: block;
  margin-bottom: 0.625rem;
  color: var(--blog-ink-faint);
  font-family: var(--blog-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.p-hub__card-title {
  max-width: 26ch;
  margin: 0 0 0.75rem;
  font-family: var(--blog-font-display);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.p-hub__card-title a {
  color: var(--blog-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--blog-accent), var(--blog-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 0.24s ease;
}

.p-hub__card-title a:hover,
.p-hub__card-title a:focus-visible {
  background-size: 100% 2px;
}

.p-hub__card-excerpt {
  max-width: 62ch;
  margin: 0;
  color: var(--blog-ink-soft);
  font-size: 1rem;
  line-height: 1.65;
}

.p-hub__card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  color: var(--blog-ink-faint);
  font-family: var(--blog-font-mono);
  font-size: 0.75rem;
  text-align: right;
}

.p-hub__card-lire {
  color: var(--blog-ink);
  font-weight: 600;
}

.p-hub__card-lire::after {
  content: " →";
  color: var(--blog-accent);
}

@media (max-width: 767px) {
  .p-hub__card {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0 1rem;
  }
  .p-hub__card-meta {
    grid-column: 2;
    flex-direction: row;
    gap: 1rem;
    margin-top: 1rem;
    text-align: left;
  }
}

.p-hub__note {
  padding: 4rem 0;
  border-top: 1px solid var(--blog-rule);
  background: var(--blog-paper-alt);
}

.p-hub__note-inner {
  max-width: 62ch;
}

.p-hub__note h2 {
  margin: 0 0 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--blog-ink);
  color: var(--blog-ink);
  font-family: var(--blog-font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.p-hub__note p {
  margin: 0 0 1.25rem;
  color: var(--blog-ink-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.p-hub__note a {
  color: var(--blog-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.p-hub__note .c-btn {
  text-decoration: none;
}

/* --------------------------------------------
   22. Accessibilité et préférences de mouvement
   -------------------------------------------- */
.p-article a:focus-visible,
.p-hub a:focus-visible,
.p-article button:focus-visible,
.p-article summary:focus-visible {
  outline: 2px solid var(--blog-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .p-article__progress { display: none; }

  .p-article__faq-item::details-content,
  .p-article__related-card,
  .p-article__share-link,
  .p-article__toc-list a,
  .p-hub__card,
  .p-hub__card-title a,
  .p-article__prose a {
    animation: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------
   23. Impression
   -------------------------------------------- */
@media print {
  .p-article__progress,
  .p-article__aside,
  .p-article__share,
  .p-article__cta,
  .p-article__related,
  .p-article__toc-mobile {
    display: none !important;
  }

  .p-article,
  .p-hub {
    background: #FFF;
  }

  .p-article__hero {
    padding: 0 0 1.5rem;
    background: #FFF;
    color: #000;
  }

  .p-article__title,
  .p-article__standfirst,
  .p-article__byline,
  .p-article__breadcrumb a {
    color: #000;
  }

  .p-article__layout {
    display: block;
  }

  .p-article__prose {
    font-size: 11pt;
  }

  .p-article__sources-list a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}