/* =========================================================
   Callon Avocat & Conseil - le journal
   Liste d'articles, article, resultats de recherche, commentaires.

   Charge UNIQUEMENT dans un contexte d'article (liste, archive,
   recherche, article seul) - cf. PERFORMANCE.md section 5 : pas
   d'asset global pour un gabarit. Depend de `callon-pages`, qui
   apporte `.page-head`, `.rubrique` et `.prose`.

   Contraintes de direction artistique reprises de l'accueil :
   - jamais de blanc pur ni de noir pur (--bg / --ink)
   - pas de cartes : uniquement des filets fins et des aplats
   - deux serifs, aucun sans-serif
   ========================================================= */

/* ====================================================
   FILTRES PAR CATEGORIE
   Pas de pastilles ni de boutons : la meme typographie que les
   marqueurs de section, un filet dore sous l'entree active.
   ==================================================== */
.journal { padding: var(--section-y) 0; }

.journal__filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(20px, 2.6vw, 36px);
  margin-bottom: clamp(36px, 4vw, 56px);
}
.journal__filtre {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
/* Le selecteur global `a:not(.btn-outline):not(.link-arrow):not(.brand)`
   (style.css) pese 0,3,1 : il impose le turquoise et le soulignement anime des
   liens de contenu. On reprend ses negations pour peser plus lourd sans
   `!important`. Meme mecanique partout dans cette feuille. */
a.journal__filtre:not(.btn-outline):not(.link-arrow):not(.brand) {
  color: var(--ink-muted);
  background-image: none;
  padding-bottom: 8px;
}
a.journal__filtre:not(.btn-outline):not(.link-arrow):not(.brand):hover,
a.journal__filtre:not(.btn-outline):not(.link-arrow):not(.brand):focus-visible {
  color: var(--ink);
  border-bottom-color: var(--rule-strong);
}
a.journal__filtre.is-active:not(.btn-outline):not(.link-arrow):not(.brand) {
  color: var(--ink);
  border-bottom-color: var(--or);
}

/* ====================================================
   LISTE D'ARTICLES
   Une suite de lignes pleine largeur separees par un filet -
   jamais une grille de cartes (regle de DA).
   ==================================================== */
.journal__liste { border-top: 1px solid var(--rule); }

.entree {
  position: relative;
  display: grid;
  grid-template-columns: clamp(200px, 22vw, 300px) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding: clamp(32px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--rule);
}
/* Sans vignette, le texte reprend toute la largeur : pas de cadre vide.
   Le cas est courant tant que les articles n'ont pas d'image a la une. */
.entree--sans-media { grid-template-columns: 1fr; }

.entree__media {
  border: 1px solid var(--rule);
  background: #E5DFCD;
  overflow: hidden;
}
.entree__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.entree:hover .entree__media img { transform: scale(1.03); }

.entree__cat {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--or-deep);
  margin: 0 0 14px;
}
.entree__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
}
/* Toute la ligne est cliquable : le lien du titre s'etend sur l'entree.
   Un seul lien par article dans le DOM - la vignette et le renvoi
   « Lire l'article » ne sont que du decor, rien a annoncer deux fois
   pour un lecteur d'ecran. */
.entree__title a:not(.btn-outline):not(.link-arrow):not(.brand) {
  color: var(--ink);
  background-image: none;
  padding-bottom: 0;
  transition: color 200ms ease;
}
.entree__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.entree:hover .entree__title a:not(.btn-outline):not(.link-arrow):not(.brand),
.entree__title a:not(.btn-outline):not(.link-arrow):not(.brand):focus-visible {
  color: var(--or-deep);
}

.entree__excerpt {
  color: var(--ink-soft);
  max-width: 42em;
  margin: 0 0 22px;
}
/* `.link-arrow` (style.css) n'anime qu'au survol du lien lui-meme. Ici le
   renvoi est un <span> : c'est le survol de la ligne entiere qui l'anime. */
.entree:hover .entree__more {
  color: var(--ink);
  gap: 16px;
}
.entree:hover .entree__more::after { transform: translateX(4px); }

/* Aucun article : on ne laisse pas une liste vide sans explication. */
.journal__vide {
  border-top: 1px solid var(--rule);
  padding: clamp(48px, 6vw, 80px) 0;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.5;
  margin: 0;
}

/* ====================================================
   PAGINATION
   ==================================================== */
.journal__pagination { margin-top: clamp(40px, 5vw, 64px); }
.journal__pagination ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.journal__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--ink-muted);
  border: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.journal__pagination a:not(.btn-outline):not(.link-arrow):not(.brand) {
  color: var(--ink-muted);
  background-image: none;
  padding-bottom: 0;
}
.journal__pagination a:not(.btn-outline):not(.link-arrow):not(.brand):hover,
.journal__pagination a:not(.btn-outline):not(.link-arrow):not(.brand):focus-visible {
  color: var(--ink);
  border-color: var(--rule-strong);
}
.journal__pagination .current {
  color: var(--ink);
  border-color: var(--ink);
}
.journal__pagination .dots { border-color: transparent; }

/* ====================================================
   ARTICLE - EN-TETE
   PREMIERE section du <main>, donc exemptee du reveal au scroll
   (`main > section:first-child`). L'image a la une y est incluse a
   dessein : posee dans une section suivante, elle serait masquee par
   le JS alors qu'elle est au-dessus du pli - c'est exactement ce
   qu'interdit PERFORMANCE.md section 2.
   ==================================================== */
.article-head {
  background: var(--bg-alt);
  padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.article-head__cats {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--or-deep);
  margin: 0 0 18px;
}
.article-head__cats a:not(.btn-outline):not(.link-arrow):not(.brand) {
  color: var(--or-deep);
  background-image: linear-gradient(currentColor, currentColor);
}
.article-head__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 auto;
  max-width: 18em;
}
.article-head__title em { font-style: italic; color: var(--or); }

/* Chapeau : l'extrait de l'article, quand il est saisi a la main. */
.article-head__deck {
  font-family: var(--display);
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 36em;
  margin: clamp(22px, 2.6vw, 32px) auto 0;
}

/* Ni auteur ni signature : le cabinet publie d'une seule voix
   (demande du 03/08). Il ne reste que la date et le temps de lecture,
   separes par un point median pose en CSS. */
.article-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 14px;
  margin: clamp(24px, 3vw, 36px) 0 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.article-head__meta > * + *::before {
  content: "\00B7";
  margin-right: 14px;
  color: var(--rule-strong);
}
.article-head__figure {
  margin: clamp(40px, 5vw, 64px) 0 0;
  border: 1px solid var(--rule-strong);
  background: #E5DFCD;
}
.article-head__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ====================================================
   ARTICLE - CORPS
   Colonne centree sous un en-tete centre. `.prose` (pages.css)
   apporte la couleur, la mesure et les titres ; on n'ajoute ici
   que ce que l'editeur peut produire en plus.
   ==================================================== */
/* Deux largeurs, et deux seulement :
   --colonne : la colonne de lecture, en rem pour ne pas dependre du corps
               local (`.prose--article` est a 1.05em) ;
   --debord  : ce dont sortent de chaque cote le sommaire, les images, la FAQ
               et le bloc de partage. C'est ce decrochement qui casse
               l'alignement d'une page autrement entierement rectiligne.
   Le debord est plafonne en vw pour rester inferieur a la gouttiere du
   conteneur (5vw) sur petit ecran : rien ne peut deborder de la page. */
:root {
  --colonne: 40rem;
  --debord: clamp(0px, 4vw, 88px);
}

/* Respiration serree, a dessein : l'en-tete de l'article apporte deja tout
   l'air necessaire au-dessus, et le bloc de partage ferme le texte en bas.
   Le rythme des sections du site (--section-y, jusqu'a 160px) creusait ici
   deux vides que rien ne venait occuper. */
.article-corps {
  padding: 30px 0;
  /* Blanc commun a tous les blocs de fin d'article : le meme entre le texte et
     la foire aux questions qu'entre celle-ci et le partage. Une seule valeur a
     regler, aucun ecart possible entre les deux paliers. */
  --bloc-espace: clamp(48px, 6vw, 88px);
}
.prose--article {
  max-width: var(--colonne);
  margin: 0 auto;
  font-size: 1.05em;
}

/* --- Elements en debord ------------------------------------------------ */
/* Poses DANS la colonne : ils en sortent par la marge negative. */
.prose--article > figure,
.prose--article > .wp-block-image,
.prose--article > .wp-block-gallery,
.prose--article > .wp-block-columns,
.prose--article > .wp-block-table,
.prose--article > .wp-block-embed,
.prose--article > .block-faq-article,
.prose--article > .block-share-article {
  width: calc(100% + var(--debord) * 2);
  max-width: none;
  margin-left: calc(var(--debord) * -1);
  margin-right: calc(var(--debord) * -1);
}
/* Poses HORS de la colonne (le sommaire, la liste des derniers articles) :
   ils se centrent a la largeur correspondante. */
.sommaire {
  max-width: calc(var(--colonne) + var(--debord) * 2);
  margin-left: auto;
  margin-right: auto;
}
.prose--article > figure img,
.prose--article > .wp-block-image img { width: 100%; }
.prose--article > h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.18;
  color: var(--ink);
  margin: 56px 0 20px;
}
.prose--article > h2:first-child,
.prose--article > h3:first-child { margin-top: 0; }
.prose--article > h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 1.5vw, 22px);
  color: var(--ink);
  margin: 36px 0 12px;
}
/* --- Images ------------------------------------------------------------ */
.prose--article figure { margin-top: 44px; margin-bottom: 44px; }
.prose--article figure img { border: 1px solid var(--rule); }
/* Legende : petite, italique, centree sous l'image.
   style.css compose TOUS les <figcaption> en petites capitales interlettrees
   (c'est le dessin des reperes photo de l'accueil). Il faut donc defaire
   explicitement la famille, la graisse, l'interlettrage et la casse : ne
   redefinir que la taille laissait la legende en capitales. */
.prose--article figcaption,
.prose--article .wp-element-caption {
  font-family: var(--body);
  font-size: 0.88em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: var(--ink-muted);
  margin-top: 12px;
}

/* Deux images cote a cote : colonnes Gutenberg ou galerie a deux vignettes.
   Les figures internes perdent leur marge propre, sinon la rangee se
   desaligne verticalement. */
.prose--article .wp-block-columns,
.prose--article .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
  /* Longhand : un raccourci `margin` remettrait a zero les marges
     negatives qui font deborder ce bloc de la colonne de texte. */
  margin-top: 44px;
  margin-bottom: 44px;
}
.prose--article .wp-block-columns > .wp-block-column { min-width: 0; }
.prose--article .wp-block-columns figure,
.prose--article .wp-block-gallery figure { margin-top: 0; margin-bottom: 0; }
.prose--article .wp-block-columns figure img,
.prose--article .wp-block-gallery figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Une galerie a trois vignettes ou plus reste sur trois colonnes. */
.prose--article .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }

/* --- Tableau ------------------------------------------------------------ */
/* Le tableau deborde de la colonne (voir plus haut) : sur petit ecran il
   defile dans sa propre boite plutot que d'elargir la page. */
.prose--article .wp-block-table { margin-top: 44px; margin-bottom: 44px; overflow-x: auto; }
.prose--article .wp-block-table figcaption { margin-top: 14px; }
/* Citation : un filet dore a gauche, pas de guillemets decoratifs. */
.prose--article blockquote {
  margin: 40px 0;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--or);
  font-family: var(--display);
  font-size: clamp(21px, 1.8vw, 27px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
}
.prose--article blockquote p:last-child { margin-bottom: 0; }
.prose--article hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 48px 0;
}
.prose--article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.95em;
}
/* Le CSS du coeur pose `border: 1px solid` sur CHAQUE cellule
   (`.wp-block-table td, th`) : la grille complete, verticales comprises, que
   la charte du site n'emploie nulle part. On la defait avant de reposer les
   seules horizontales. Selecteur a 0,2,1 pour peser plus lourd que le sien. */
.prose--article .wp-block-table th,
.prose--article .wp-block-table td,
.prose--article th,
.prose--article td {
  border: 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: baseline;
  padding: 16px 28px 16px 0;
}
.prose--article tr > *:last-child { padding-right: 0; }

/* En-tete : le marqueur du site, discret, sur un simple filet. Ni fond, ni
   zebrure, ni filet epais — c'etait ce trait noir qui ecrasait le tableau. */
.prose--article .wp-block-table thead th,
.prose--article thead th {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
}
/* La premiere colonne porte l'entree de lecture : elle passe a l'encre pleine,
   les colonnes de valeurs restent en gris chaud. */
.prose--article tbody td { color: var(--ink-soft); }
.prose--article tbody td:first-child { color: var(--ink); }
.prose--article tbody tr:last-child > * { border-bottom: 0; }

/* ====================================================
   SOMMAIRE - panneau depliant
   <details> ferme par defaut : le sommaire s'ouvre, il ne
   s'impose pas avant la premiere ligne. Meme mecanique que
   les « affaires recentes » des pages domaine, zero JavaScript.
   ==================================================== */
.sommaire {
  margin-bottom: clamp(40px, 5vw, 64px);
  background: var(--bg-alt);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.sommaire__tete {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(22px, 3vw, 34px);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color 200ms ease;
}
.sommaire__tete::-webkit-details-marker { display: none; }
.sommaire__tete::after {
  content: "";
  flex: none;
  width: 12px;
  height: 7px;
  background: var(--or);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 240ms ease;
}
.sommaire[open] .sommaire__tete::after { transform: rotate(-180deg); }
.sommaire__tete:hover,
.sommaire__tete:focus-visible { color: var(--ink); }

.sommaire__liste {
  counter-reset: sommaire;
  padding: 0 clamp(22px, 3vw, 34px) 24px;
}
.sommaire__item { border-top: 1px solid var(--rule); }
.sommaire__item a:not(.btn-outline):not(.link-arrow):not(.brand) {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  color: var(--ink-soft);
  background-image: none;
  transition: color 200ms ease;
}
.sommaire__item a:not(.btn-outline):not(.link-arrow):not(.brand):hover,
.sommaire__item a:not(.btn-outline):not(.link-arrow):not(.brand):focus-visible {
  color: var(--or-deep);
}
/* Chiffres romains, comme les rubriques du reste du site. Numerotes en CSS :
   rien a renumeroter quand un titre est ajoute dans l'article. */
.sommaire__item--n2 { counter-increment: sommaire; }
.sommaire__item--n2 > a::before {
  content: counter(sommaire, upper-roman);
  flex: none;
  width: 2.2em;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1em;
  color: var(--or);
}
/* Sous-parties : alignees sur le LIBELLE des titres de premier niveau, pas
   sur leur chiffre. Elles n'ont pas de numero — une sous-partie n'est pas une
   rubrique — d'ou le decalage, qui les rattache visuellement a ce qui precede.

   Les negations sont obligatoires : la regle de base ci-dessus pese 0,4,1 a
   cause d'elles, et un simple `.sommaire__item--n3 > a` (0,1,1) se faisait
   ecraser par son `padding: 11px 0`. La sous-partie restait alors collee a
   gauche, sous la colonne des chiffres. */
/* Pas de filet au-dessus d'une sous-partie : elle appartient au titre qui la
   precede. Le filet l'en detachait et la faisait lire comme une rubrique a
   part entiere, sans numero — donc comme un oubli. Elle se colle a son parent
   (padding haut nul) et seul le filet suivant referme l'ensemble. */
.sommaire__item--n3,
.sommaire__item--n4 { border-top: 0; }
.sommaire__item--n3 > a:not(.btn-outline):not(.link-arrow):not(.brand) {
  padding-left: calc(2.2em + 16px);
  padding-top: 0;
  padding-bottom: 11px;
  font-size: 0.95em;
}
.sommaire__item--n4 > a:not(.btn-outline):not(.link-arrow):not(.brand) {
  padding-left: calc(3.4em + 16px);
  padding-top: 0;
  padding-bottom: 11px;
  font-size: 0.92em;
}

/* ====================================================
   PARTAGE (bloc de fin d'article)
   ==================================================== */
.block-share-article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px clamp(24px, 4vw, 48px);
  margin-top: var(--bloc-espace);
  /* Longhand : un raccourci `padding` serait sans risque, mais on garde la
     meme ecriture que les marges de ce fichier pour ne pas melanger. */
  padding-top: 26px;
  padding-bottom: 0;
  /* Filet haut seulement : celui du bas doublait le changement de fond du
     bloc « Derniers articles » qui suit immediatement. */
  border-top: 1px solid var(--rule);
  border-bottom: 0;
}
.share-article-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(16px, 2vw, 26px);
}
.block-share-article .title {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.block-share-article .links { display: flex; gap: 10px; }
/* Pas de pastille ronde ni d'aplat de marque : un carre au filet fin, qui
   se remplit d'encre au survol. Les icones sont inlinees et prennent la
   couleur du bouton (currentColor). */
.announce-share-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
}
a.announce-share-link:not(.btn-outline):not(.link-arrow):not(.brand) {
  color: var(--ink-soft);
  background-image: none;
  padding-bottom: 0;
}
.announce-share-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}
/* Survol : le filet et le pictogramme passent a l'or, sans aplat. Rempli
   d'encre, le carre devenait un pave noir au milieu d'une page qui n'en
   comporte aucun — et la marque de chaque reseau restait de toute facon
   absente, puisque les icones sont monochromes. */
.announce-share-link:hover,
.announce-share-link:focus-visible,
a.announce-share-link:not(.btn-outline):not(.link-arrow):not(.brand):hover,
a.announce-share-link:not(.btn-outline):not(.link-arrow):not(.brand):focus-visible {
  background: transparent;
  border-color: var(--or);
  color: var(--or-deep);
  outline: none;
}
/* Confirmation de copie : une etiquette posee au-dessus du bouton, le temps
   que la classe reste. Aucune boite de dialogue. */
.announce-share-link.is-copie::after {
  content: "Lien copié";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 5px 10px;
}
.block-share-article .more-articles { flex: none; }
/* Apres la FAQ, le filet haut ferait doublon avec celui qui referme la liste
   des questions : deux traits separes par un blanc, sans rien entre eux. Le
   blanc suffit. Le filet reste quand le partage suit directement le texte.
   Son padding tombe avec lui, sinon le blanc entre la FAQ et le partage
   depasserait celui qui separe le texte de la FAQ. */
.block-faq-article + .block-share-article {
  border-top: 0;
  padding-top: 0;
}

/* ====================================================
   FAQ (bloc de fin d'article)
   Panneaux depliants, exactement le vocabulaire des « affaires
   recentes » des pages domaine : <details> a ouverture exclusive,
   chevron dore, volet ouvert pose sur l'aplat beige. Zero JavaScript,
   et aucune numerotation — une question n'est pas une rubrique.
   ==================================================== */
/* Pas de filet au-dessus du titre : « Foire aux questions » est compose en
   grand serif, il annonce la rupture a lui seul. Le trait ne faisait que
   fermer une zone que rien n'obligeait a fermer. */
.block-faq-article {
  margin-top: var(--bloc-espace);
  padding-top: 0;
  border-top: 0;
}
.faq-category-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.block-faqs { border-top: 1px solid var(--rule); }
.faq-item {
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.faq-item__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-family: var(--display);
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  transition: color 200ms ease;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: "";
  flex: none;
  width: 12px;
  height: 7px;
  align-self: center;
  background: var(--or);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 240ms ease;
}
.faq-item[open] .faq-item__q::after { transform: rotate(-180deg); }
.faq-item__q:hover,
.faq-item__q:focus-visible { color: var(--or-deep); }
/* Volet ouvert pose sur l'aplat beige : sans lui, la reponse flottait sous
   la question sans que rien ne signale la zone depliee. */
.faq-item__r {
  margin: 0 0 22px;
  padding: 20px 24px;
  background: var(--bg-alt);
  color: var(--ink-soft);
}
.faq-item__r > .text-wrapper > *:last-child { margin-bottom: 0; }

/* ====================================================
   DERNIERS ARTICLES (pied d'article)
   Reprend la liste, en plus serre et sans extrait.
   ==================================================== */
.journal--connexe { padding: clamp(56px, 7vw, 88px) 0; }
/* `.rubrique--alt` (pages.css) pose un filet haut. Ici l'aplat beige suit
   immediatement le filet bas du bloc de partage : le changement de fond
   separe deja les deux zones, le filet n'ajoutait qu'un second trait. */
.journal--connexe.rubrique--alt { border-top: 0; }
/* Aligne sur la largeur des blocs en debord de l'article, pas sur le
   conteneur du site : etale sur 1320px sous une colonne de 640px, la liste
   partait beaucoup plus loin a gauche que tout ce qui la precede. */
.journal--connexe .container {
  max-width: calc(var(--colonne) + var(--debord) * 2 + var(--gutter) * 2);
}
.journal--connexe .section-title {
  font-size: clamp(28px, 2.8vw, 40px);
  margin-bottom: clamp(28px, 3vw, 40px);
}
/* Le bandeau d'appel qui suit porte deja un filet haut : sans cela, la fin de
   l'aplat beige et le debut du bandeau posent deux filets a 1px d'intervalle. */
.journal--connexe + .appel { border-top: 0; }
.journal--connexe .entree {
  grid-template-columns: clamp(140px, 16vw, 200px) 1fr;
  padding: clamp(24px, 2.6vw, 34px) 0;
  align-items: center;
}
.journal--connexe .entree__title {
  font-size: clamp(20px, 1.8vw, 26px);
  margin-bottom: 0;
}
.journal--connexe .entree__cat { margin-bottom: 10px; }

/* ====================================================
   COMMENTAIRES
   Volontairement discrets : un filet de tete, une liste a plat,
   un formulaire dessine comme celui de la page contact.
   ==================================================== */
.comments-area {
  padding: var(--section-y) 0;
  border-top: 1px solid var(--rule);
}
.comments-area > * {
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.title-comments,
.comment-reply-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 32px;
}
.comment-reply-title { margin-top: 56px; }
.comment-list { border-top: 1px solid var(--rule); }
.comment-list li {
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.comment-list .children {
  margin-top: 20px;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid var(--rule);
}
.comment-list .children li:last-child { border-bottom: 0; padding-bottom: 0; }
.comment-author {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 600;
  color: var(--ink);
}
.comment-author img { border-radius: 50%; flex: none; }
.comment-metadata {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 6px 0 14px;
}
.comment-content { color: var(--ink-soft); }
.comment-content > *:last-child { margin-bottom: 0; }
.reply,
.comment-respond .comment-notes,
.comment-respond .logged-in-as {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.reply { margin-top: 12px; }
.no-comments { color: var(--ink-muted); font-style: italic; }

.comment-form { margin-top: 8px; }
.comment-form label {
  display: block;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.comment-form .required { color: var(--or-deep); }
.comment-form .user_inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form input:not([type]),
.comment-form textarea {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 10px 0;
  width: 100%;
  transition: border-color 200ms ease;
}
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-bottom-color: var(--or);
}
.comment-form .form-submit { margin-top: 8px; }
.comment-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 56px;
  padding: 0 32px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease;
}
.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus-visible {
  background: var(--or-deep);
  border-color: var(--or-deep);
}
/* Consentement : la case et son libelle sur une seule ligne, alignes sur la
   premiere ligne de texte et non sur le bloc entier. */
.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9em;
  color: var(--ink-muted);
}
.comment-form-cookies-consent input[type="checkbox"] {
  flex: none;
  width: auto;
  margin-top: 4px;
  accent-color: var(--or-deep);
}
.comment-form-cookies-consent label { margin-bottom: 0; font-size: inherit; }

/* ====================================================
   RESPONSIVE
   ==================================================== */
/* Le debord s'arrete a la tablette. Passe une certaine etroitesse il n'aere
   plus rien : il rapproche les blocs du bord de l'ecran pendant que le texte
   garde sa gouttiere, et les deux alignements se contredisent. A 768px il ne
   restait que 8px entre une image et le bord de la page, contre 38px pour le
   paragraphe juste au-dessus.

   Mise a zero, tout se realigne d'un coup : le sommaire, les images, les
   colonnes, le tableau, la FAQ, le partage et la liste des derniers articles
   sont calcules a partir de cette seule variable. */
@media (max-width: 900px) {
  .article-corps,
  .journal--connexe { --debord: 0px; }

  .comment-form .user_inputs { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 700px) {
  /* Deux images cote a cote deviennent illisibles sous ~350px de large. */
  .prose--article .wp-block-columns,
  .prose--article .wp-block-gallery,
  .prose--article .wp-block-gallery.columns-3 { grid-template-columns: 1fr; }
  .faq-item__r { padding: 16px 18px; }
  .block-share-article { justify-content: flex-start; }
}

@media (max-width: 768px) {
  .entree,
  .journal--connexe .entree {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* Vignette en pleine largeur. Plafonnee a 380px elle laissait un vide a sa
     droite alors que le titre et l'extrait, eux, allaient jusqu'au bord :
     l'entree paraissait mal cadree. Le format passe en 16/9, plus juste
     qu'un 4/3 etire sur toute la largeur de l'ecran. */
  .entree__media { max-width: none; }
  .entree__media img,
  .journal--connexe .entree__media img { aspect-ratio: 16 / 9; }

  .article-head__title { max-width: none; }

  /* A partir d'ici, la colonne de lecture cesse de s'imposer une largeur : la
     gouttiere du site suffit a tenir la mesure. Tout l'article — texte, images,
     tableau, FAQ, partage, derniers articles — s'aligne alors sur le meme
     retrait que l'en-tete et le reste des sections. Une seule marge sur la
     page, plus deux imbriquees. */
  .prose--article {
    max-width: none;
    font-size: 1em;
  }
  .sommaire { max-width: none; }
  .journal--connexe .container { max-width: var(--max-w); }
}