/* --------------------------------------------------

   pf-composants.css — les composants de la refonte

   Écrits avec les tokens de pf-tokens.css, sans classe Bootstrap : voir
   REDESIGN.md. Ce fichier grossit chantier par chantier ; Bootstrap reste
   chargé pour les squelettes non encore repris.

   Ordre : en-tête, navigation, pied, puis les règles de raccord qui font
   cohabiter .pf-conteneur avec la grille Bootstrap encore en place.

 ----------------------------------------------------- */


/* ===== En-tête ===== */

.pf-entete {
  border-bottom: var(--pf-hairline);
}

.pf-entete__haut {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
  align-items: baseline;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: var(--pf-space-10);
  padding-top: var(--pf-space-6);
}

.pf-entete__logo {
  display: block;
  line-height: 0;
}

.pf-entete__logo img {
  display: block;
  height: 32px;
  width: auto;
}

/* Le nom du site en repli quand aucun logo n'est posé dans l'espace privé. */
.pf-entete__nom {
  font-family: var(--pf-font-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--pf-ink);
  margin: 0;
  line-height: 1.1;
}

.pf-entete__baseline {
  font-family: var(--pf-font-sans);
  font-size: var(--pf-label-size-sm);
  letter-spacing: var(--pf-label-tracking-lg);
  text-transform: uppercase;
  color: var(--pf-grey);
  text-align: right;
}


/* ===== Navigation ===== */

.pf-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: var(--pf-space-6);
  padding-top: 18px;
  font-family: var(--pf-font-sans);
  font-size: var(--pf-nav-size);
}

.pf-nav__lien {
  color: var(--pf-ink-soft);
  text-decoration: none;
  padding-bottom: var(--pf-space-3);
  border-bottom: 2px solid transparent;
  transition: var(--pf-transition);
}

.pf-nav__lien:hover,
.pf-nav__lien:focus-visible {
  color: var(--pf-green);
  text-decoration: none;
}

.pf-nav__lien--actif {
  color: var(--pf-green);
  font-weight: 500;
  border-bottom-color: var(--pf-green);
}

/* La recherche ferme la ligne, poussée à droite, et ne se déplie qu au clic :
   un champ ouvert en permanence pèse lourd dans une barre de dix rubriques. */
.pf-recherche {
  margin-left: auto;
  position: relative;
}

.pf-recherche__bouton {
  list-style: none;
  cursor: pointer;
  color: var(--pf-grey);
  padding-bottom: var(--pf-space-3);
  border-bottom: 2px solid transparent;
  transition: var(--pf-transition);
}

.pf-recherche__bouton::-webkit-details-marker { display: none; }

.pf-recherche__bouton:hover,
.pf-recherche[open] > .pf-recherche__bouton {
  color: var(--pf-green);
  border-bottom-color: var(--pf-green);
}

/* Le panneau se pose sous la barre sans pousser la mise en page. */
.pf-recherche__panneau {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  min-width: 320px;
  background: var(--pf-paper);
  border: var(--pf-hairline);
  padding: var(--pf-space-4);
}

.pf-recherche__panneau .formulaire_recherche { margin: 0; }


/* ===== Pied ===== */

.pf-pied {
  border-top: var(--pf-hairline);
  background: var(--pf-paper);
  margin-top: var(--pf-space-24);
}

.pf-pied__colonnes {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px;
  padding-top: 44px;
  padding-bottom: 30px;
  font-family: var(--pf-font-sans);
  font-size: var(--pf-nav-size);
  color: var(--pf-ink-soft);
}

.pf-pied__nom {
  font-family: var(--pf-font-serif);
  font-size: 22px;
  color: var(--pf-ink);
}

.pf-pied__apropos {
  line-height: 1.6;
  color: var(--pf-grey);
  margin: var(--pf-space-3) 0 0;
  max-width: 320px;
}

.pf-pied__titre {
  font-size: var(--pf-label-size-sm);
  letter-spacing: var(--pf-label-tracking);
  font-weight: var(--pf-label-weight);
  text-transform: uppercase;
  color: var(--pf-ink);
  margin: 0 0 14px;
}

.pf-pied__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 9px;
}

.pf-pied__liste a {
  color: var(--pf-ink-soft);
  text-decoration: none;
}

.pf-pied__liste a:hover,
.pf-pied__liste a:focus-visible {
  color: var(--pf-green);
}

.pf-pied__legal {
  border-top: var(--pf-hairline-faint);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: var(--pf-space-6);
  padding-top: var(--pf-space-5);
  padding-bottom: var(--pf-space-8);
  font-family: var(--pf-font-sans);
  font-size: var(--pf-caption-size);
  color: var(--pf-grey);
}

.pf-pied__legal a {
  color: var(--pf-grey);
}

.pf-pied__legal a:hover,
.pf-pied__legal a:focus-visible {
  color: var(--pf-green);
}

.pf-pied__services {
  display: -ms-flexbox;
  display: flex;
  gap: 18px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}


/* ===== Mobile ===== */

@media (max-width: 767px) {
  .pf-entete__haut {
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--pf-space-3);
  }

  .pf-entete__baseline {
    text-align: left;
  }

  .pf-nav {
    gap: var(--pf-space-4);
  }

  .pf-recherche {
    margin-left: 0;
    position: static;
  }

  .pf-recherche__panneau {
    position: static;
    min-width: 0;
    margin-top: var(--pf-space-3);
  }

  .pf-pied__colonnes {
    grid-template-columns: 1fr;
    gap: var(--pf-space-8);
  }
}

/* ===== Grille de page ===== */

.pf-fil {
  padding-top: 34px;
  font-family: var(--pf-font-sans);
  font-size: var(--pf-caption-size);
  color: var(--pf-grey);
}

.pf-fil a { color: var(--pf-ink-soft); }

.pf-grille {
  display: grid;
  gap: var(--pf-rail-gap);
  grid-template-columns: minmax(0, 1fr) 280px;
  -ms-flex-align: start;
  align-items: start;
  padding-bottom: var(--pf-space-18);
}

/* Page article : rail étroit à gauche, colonne de lecture à droite. Le
   contenu reste premier dans le HTML, c'est `order` qui le déplace.
   Les paliers suivent design/guidelines/spacing-grid.html : la colonne de
   lecture ne s'élargit jamais, les pixels en plus vont au rail. */
.page_article .pf-grille {
  grid-template-columns: var(--pf-rail) minmax(0, 1fr);
}

@media (min-width: 1400px) {
  .page_article .pf-grille {
    grid-template-columns: var(--pf-rail-xxl) minmax(0, 1fr);
  }
}

@media (max-width: 1199px) {
  .page_article .pf-grille__contenu { max-width: var(--pf-measure-lg); }
}

/* Sous 768 px le rail disparaît de la colonne : la page passe en une seule. */
@media (max-width: 767px) {
  .pf-grille { grid-template-columns: 1fr; }
  .page_article .pf-grille { grid-template-columns: 1fr; }
  .page_article .pf-grille__rail { -ms-flex-order: 0; order: 0; }
  .pf-grille__rail { position: static; }
}

.page_article .pf-grille__rail {
  -ms-flex-order: -1;
  order: -1;
}

.page_article .pf-grille__contenu {
  max-width: var(--pf-measure);
}

/* Le rail est le seul élément fixé à l'écran du système. */
.pf-grille__rail {
  position: -webkit-sticky;
  position: sticky;
  top: var(--pf-space-8);
  font-family: var(--pf-font-sans);
}


/* ===== Article ===== */

.pf-article__entete {
  padding-top: var(--pf-space-12);
}

.pf-article__titre {
  font-family: var(--pf-font-serif);
  font-size: var(--pf-h1-size);
  line-height: var(--pf-h1-line);
  font-weight: var(--pf-h1-weight);
  letter-spacing: var(--pf-h1-tracking);
  color: var(--pf-ink);
  max-width: var(--pf-h1-measure);
  margin: 0;
  text-wrap: pretty;
}

.pf-article__surtitre,
.pf-article__soustitre {
  font-family: var(--pf-font-sans);
  font-size: var(--pf-meta-size);
  color: var(--pf-grey);
  margin: 0 0 var(--pf-space-2);
}

.pf-article__soustitre {
  margin: var(--pf-space-3) 0 0;
}

.pf-article__chapo {
  font-family: var(--pf-font-serif);
  font-size: var(--pf-lede-size);
  line-height: var(--pf-lede-line);
  color: var(--pf-ink-body);
  margin-top: 26px;
  text-wrap: pretty;
}

.pf-article__texte {
  font-family: var(--pf-font-serif);
  font-size: var(--pf-body-size);
  line-height: var(--pf-body-line);
  color: var(--pf-ink-body);
  max-width: var(--pf-measure-tight);
  margin-top: var(--pf-space-10);
}

.pf-article__texte p { margin: 0 0 var(--pf-body-spacing); }

.pf-article__texte h2,
.pf-article__texte h3 {
  font-family: var(--pf-font-serif);
  color: var(--pf-ink);
  margin: 1.8em 0 22px;
}

.pf-article__texte h2 { font-size: var(--pf-h2-size); line-height: var(--pf-h2-line); font-weight: var(--pf-h2-weight); }
.pf-article__texte h3 { font-size: var(--pf-h3-size); line-height: var(--pf-h3-line); font-weight: var(--pf-h3-weight); }

.pf-article__texte a { color: var(--pf-link); }

/* Une citation détachée : filet vert, italique, jamais d'ombre ni de fond. */
.pf-article__texte blockquote {
  margin: 2em 0;
  padding: 0 0 0 26px;
  border-left: 2px solid var(--pf-green);
  font-size: 24px;
  line-height: 1.4;
  font-style: italic;
  color: var(--pf-ink);
}

.pf-figure {
  margin: var(--pf-space-10) 0 0;
}

.pf-figure img { max-width: 100%; height: auto; display: block; }

.pf-figure__legende {
  font-family: var(--pf-font-sans);
  font-size: var(--pf-caption-size);
  color: var(--pf-text-caption);
  margin-top: var(--pf-space-3);
}

.pf-postscriptum,
.pf-notes {
  margin-top: var(--pf-space-10);
  padding-top: var(--pf-space-4);
  border-top: var(--pf-hairline);
  font-family: var(--pf-font-serif);
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--pf-ink-soft);
  max-width: var(--pf-measure-tight);
}

.pf-partage {
  margin-top: 36px;
  padding-top: var(--pf-space-4);
  border-top: var(--pf-hairline);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: var(--pf-space-6);
  font-family: var(--pf-font-sans);
  font-size: 13.5px;
  max-width: var(--pf-measure-tight);
}

.pf-partage__moyens { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; gap: 18px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.pf-partage__titre { color: var(--pf-grey); }
.pf-partage__moyens a { color: var(--pf-ink-soft); text-decoration: none; border-bottom: var(--pf-hairline); }
.pf-partage__moyens a:hover { color: var(--pf-green); }
.pf-partage__rubrique { color: var(--pf-grey); }
.pf-partage__rubrique a { color: var(--pf-green); }

.pf-auteurs {
  margin-top: 44px;
  padding-top: 18px;
  border-top: var(--pf-rule-open);
  max-width: var(--pf-measure-tight);
}

.pf-auteur { display: -ms-flexbox; display: flex; gap: 20px; -ms-flex-align: start; align-items: flex-start; margin-top: var(--pf-space-3); }
.pf-auteur__portrait { width: 72px; height: 72px; -ms-flex: none; flex: none; object-fit: cover; }
.pf-auteur__nom { font-family: var(--pf-font-serif); font-size: 20px; color: var(--pf-ink); }

.pf-auteur__bio {
  font-family: var(--pf-font-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--pf-ink-soft);
  margin: var(--pf-space-2) 0 var(--pf-space-3);
  max-width: 560px;
}


/* ===== Éléments partagés ===== */

.pf-label {
  font-family: var(--pf-font-sans);
  font-size: var(--pf-label-size);
  letter-spacing: var(--pf-label-tracking);
  font-weight: var(--pf-label-weight);
  text-transform: uppercase;
  color: var(--pf-label);
  margin: 0 0 var(--pf-space-5);
}

.pf-label a { color: inherit; text-decoration: none; }
.pf-label--encre { color: var(--pf-ink); font-size: var(--pf-label-size-sm); letter-spacing: var(--pf-label-tracking-lg); margin-bottom: var(--pf-space-3); }

.pf-meta {
  font-family: var(--pf-font-sans);
  font-size: var(--pf-meta-size);
  color: var(--pf-text-meta);
  border-top: var(--pf-hairline);
  padding-top: 14px;
  margin: var(--pf-space-6) 0 0;
}

.pf-meta a { color: var(--pf-ink-soft); }
.pf-meta__sep { padding: 0 var(--pf-space-2); }

.pf-lien-fleche {
  font-family: var(--pf-font-sans);
  font-size: var(--pf-cta-size);
  font-weight: 600;
  color: var(--pf-green);
  text-decoration: none;
  border-bottom: 1px solid var(--pf-green);
  padding-bottom: 2px;
  transition: var(--pf-transition);
}

.pf-rail__bloc { margin-bottom: var(--pf-space-8); }

.pf-rail__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--pf-space-2);
  font-size: var(--pf-caption-size);
}

.pf-rail__liste a { color: var(--pf-ink-soft); text-decoration: none; }
.pf-rail__liste a:hover { color: var(--pf-green); }
.pf-rail__liste--articles { font-size: var(--pf-nav-size); gap: var(--pf-space-3); }


/* ===== Listes d'articles ===== */

.pf-liste { margin-top: var(--pf-space-12); }

.pf-liste__titre {
  font-family: var(--pf-font-sans);
  font-size: var(--pf-label-size);
  letter-spacing: 0.2em;
  font-weight: var(--pf-label-weight);
  text-transform: uppercase;
  color: var(--pf-ink);
  border-top: var(--pf-rule-open);
  padding-top: var(--pf-space-3);
  margin: 0 0 var(--pf-space-2);
}

/* Une ligne par article, séparées d'un filet. La vignette est à droite :
   c'est ce qui garde la liste alignée quand une ligne sur cinq a une image. */
.pf-ligne {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: var(--pf-space-10);
  padding: var(--pf-space-6) 0;
  border-bottom: var(--pf-hairline);
}

.pf-ligne__texte { min-width: 0; }

.pf-ligne__titre {
  font-family: var(--pf-font-serif);
  font-size: var(--pf-h3-size);
  line-height: 1.25;
  font-weight: var(--pf-h3-weight);
  margin: 0;
  text-wrap: pretty;
}

.pf-ligne__titre a { color: var(--pf-ink); text-decoration: none; }
.pf-ligne__titre a:hover { color: var(--pf-green); }

.pf-ligne__resume {
  font-family: var(--pf-font-serif);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--pf-ink-soft);
  margin: var(--pf-space-3) 0 0;
  max-width: 62ch;
}

.pf-ligne__vignette {
  -ms-flex: none;
  flex: none;
  display: block;
  line-height: 0;
}

.pf-ligne__vignette img { display: block; width: 160px; height: auto; }

/* La ligne de métadonnées sans son filet, pour l'intérieur d'une liste. */
.pf-meta--nu {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--pf-space-2);
}

.pf-pagination {
  margin-top: var(--pf-space-8);
  font-family: var(--pf-font-sans);
  font-size: var(--pf-nav-size);
}

.pf-pagination ul { list-style: none; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--pf-space-2); margin: 0; padding: 0; }
.pf-pagination .page-link,
.pf-pagination a { color: var(--pf-ink-soft); text-decoration: none; padding: 4px 10px; border: var(--pf-hairline); }
.pf-pagination .page-link:hover,
.pf-pagination a:hover { color: var(--pf-green); border-color: var(--pf-green); }
.pf-pagination .active > .page-link,
.pf-pagination .on { color: var(--pf-green); border-color: var(--pf-green); font-weight: 500; }


/* ===== Page de rubrique ===== */

.pf-rubrique__entete { padding-top: var(--pf-space-12); }

.pf-rubrique__titre {
  font-family: var(--pf-font-serif);
  font-size: var(--pf-h1-size);
  line-height: var(--pf-h1-line);
  font-weight: var(--pf-h1-weight);
  letter-spacing: var(--pf-h1-tracking);
  color: var(--pf-ink);
  max-width: var(--pf-h1-measure);
  margin: 0;
}

.pf-rubrique__texte {
  font-family: var(--pf-font-serif);
  font-size: var(--pf-lede-size);
  line-height: var(--pf-lede-line);
  color: var(--pf-ink-body);
  margin-top: var(--pf-space-6);
  max-width: var(--pf-measure);
}

.pf-plan { list-style: none; margin: 0; padding: 0; }
.pf-plan li { padding: var(--pf-space-4) 0; border-bottom: var(--pf-hairline); }
.pf-plan li a { font-family: var(--pf-font-serif); font-size: var(--pf-h3-size); color: var(--pf-ink); text-decoration: none; }
.pf-plan li a:hover { color: var(--pf-green); }
.pf-plan .pf-plan { margin-top: var(--pf-space-3); }
.pf-plan .pf-plan li { padding: var(--pf-space-2) 0 var(--pf-space-2) var(--pf-space-6); border: 0; }
.pf-plan .pf-plan li a { font-size: var(--pf-nav-size); font-family: var(--pf-font-sans); color: var(--pf-ink-soft); }

@media (max-width: 767px) {
  .pf-ligne { -ms-flex-direction: column-reverse; flex-direction: column-reverse; gap: var(--pf-space-4); }
  .pf-ligne__vignette img { width: 100%; }
}


/* ===== Accueil (composition 4a, bandes successives) ===== */

/* Pas de rail : l'accueil est une suite de bandes pleine largeur. */
.page_sommaire .pf-grille { display: block; }
.page_sommaire .pf-fil { display: none; }

/* Les bandes sur fond blanc debordent le conteneur d autant qu elles se
   rembourrent : le texte reste donc aligne sur le reste de la page, et le
   blanc respire de 40 px autour de lui. Sans ce couple, le fond commencait
   exactement ou commence le texte. */
.pf-identite {
  background: var(--pf-paper);
  border-bottom: var(--pf-hairline);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: var(--pf-space-10);
  padding: 34px var(--pf-encart-marge);
  margin-inline: calc(var(--pf-encart-marge) * -1);
  margin-top: var(--pf-space-6);
}

.pf-identite__phrase {
  font-family: var(--pf-font-serif);
  font-size: 27px;
  line-height: 1.35;
  color: var(--pf-ink);
  max-width: 780px;
  margin: 0;
  text-wrap: pretty;
}

.pf-identite__reperes {
  font-family: var(--pf-font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--pf-grey);
  text-align: right;
  -ms-flex: none;
  flex: none;
}

/* Chaque zone s'ouvre sur un filet noir et son intitule en capitales. */
.pf-zone { padding-top: 56px; }
.pf-zone + .pf-zone { padding-top: 64px; }

.pf-zone__entete {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
  align-items: baseline;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: var(--pf-space-6);
  border-top: var(--pf-rule-open);
  padding-top: var(--pf-space-3);
}

.pf-zone__titre {
  font-family: var(--pf-font-sans);
  font-size: var(--pf-label-size);
  letter-spacing: 0.2em;
  font-weight: var(--pf-label-weight);
  text-transform: uppercase;
  color: var(--pf-ink);
  margin: 0;
}

.pf-numero {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 260px;
  gap: 56px;
  margin-top: var(--pf-space-8);
  -ms-flex-align: start;
  align-items: start;
}

/* La couverture est le visuel du premier ecran : cadre, pas d'ombre. */
.pf-numero__couverture {
  border: var(--pf-hairline);
  background: var(--pf-paper);
  padding: 9px;
}

.pf-numero__couverture img { display: block; width: 100%; height: auto; }

.pf-numero__titre {
  font-family: var(--pf-font-serif);
  font-size: 44px;
  line-height: 1.08;
  font-weight: 400;
  color: var(--pf-ink);
  margin: var(--pf-space-2) 0 0;
}

.pf-numero__texte {
  font-family: var(--pf-font-serif);
  font-size: 22px;
  color: var(--pf-grey);
  margin: var(--pf-space-3) 0 0;
}

.pf-numero__sommaire {
  margin-top: var(--pf-space-8);
  border-top: var(--pf-hairline);
  padding-top: var(--pf-space-3);
}

.pf-numero__liste {
  list-style: none;
  margin: 0 0 var(--pf-space-6);
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--pf-space-4);
}

/* Le selecteur vise l entree elle-meme, pas n importe quel lien : #LESAUTEURS
   enveloppe la signature dans un <a>, qui heritait sinon du corps du titre. */
.pf-numero__liste > li > a {
  font-family: var(--pf-font-serif);
  font-size: 21px;
  line-height: 1.3;
  color: var(--pf-ink);
  text-decoration: none;
}

.pf-numero__liste > li > a:hover { color: var(--pf-green); }

.pf-numero__signature a {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: none;
}

.pf-numero__signature a:hover { color: var(--pf-green); }

.pf-numero__signature {
  display: block;
  font-family: var(--pf-font-sans);
  font-size: 13.5px;
  color: var(--pf-grey);
}

.pf-abonnement {
  border: var(--pf-rule-open);
  padding: 24px 22px;
}

.pf-abonnement__argument {
  font-family: var(--pf-font-serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--pf-ink-body);
  margin: 0 0 var(--pf-space-5);
}

.pf-abonnement__mention {
  font-family: var(--pf-font-sans);
  font-size: var(--pf-caption-size);
  color: var(--pf-grey);
  margin: var(--pf-space-4) 0 0;
}

/* Un seul bouton plein par page, c'est celui-ci. */
.pf-bouton {
  display: block;
  text-align: center;
  background: var(--pf-green);
  color: var(--pf-bg);
  font-family: var(--pf-font-sans);
  font-size: var(--pf-cta-size);
  font-weight: 600;
  padding: var(--pf-space-3) var(--pf-space-5);
  text-decoration: none;
  transition: var(--pf-transition);
}

.pf-bouton:hover { background: var(--pf-green-hover); color: var(--pf-bg); }

.pf-nouveautes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  margin-top: var(--pf-space-8);
}

.pf-ouvrage__couverture {
  display: block;
  border: var(--pf-hairline);
  background: var(--pf-paper);
  padding: 8px;
  margin-bottom: var(--pf-space-4);
}

.pf-ouvrage__couverture img { display: block; width: 100%; height: auto; }

.pf-ouvrage__titre {
  font-family: var(--pf-font-serif);
  font-size: 20px;
  line-height: 1.25;
  font-style: italic;
  font-weight: 400;
  margin: var(--pf-space-2) 0 var(--pf-space-3);
}

.pf-ouvrage__titre a { color: var(--pf-ink); text-decoration: none; }
.pf-ouvrage__titre a:hover { color: var(--pf-green); }

.pf-actualites {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: var(--pf-space-8);
}

.pf-carte__image { display: block; margin-bottom: var(--pf-space-4); }
.pf-carte__image img { display: block; width: 100%; height: auto; }

/* Sans image, la carte s'ouvre sur un filet : les deux formes cohabitent
   dans la meme rangee sans desequilibre. */
.pf-carte--sans-image { border-top: var(--pf-hairline); padding-top: var(--pf-space-4); }

.pf-carte__meta {
  display: -ms-flexbox;
  display: flex;
  gap: var(--pf-space-3);
  -ms-flex-align: baseline;
  align-items: baseline;
  font-family: var(--pf-font-sans);
  font-size: var(--pf-caption-size);
  color: var(--pf-grey);
  margin: 0 0 var(--pf-space-2);
}

.pf-carte__categorie {
  text-transform: uppercase;
  letter-spacing: var(--pf-label-tracking);
  font-weight: var(--pf-label-weight);
  color: var(--pf-green);
}

.pf-carte__titre {
  font-family: var(--pf-font-serif);
  font-size: 23px;
  line-height: 1.25;
  font-weight: 400;
  margin: 0 0 var(--pf-space-3);
}

.pf-carte__titre a { color: var(--pf-ink); text-decoration: none; }
.pf-carte__titre a:hover { color: var(--pf-green); }

.pf-carte__resume {
  font-family: var(--pf-font-serif);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--pf-ink-soft);
  margin: 0 0 var(--pf-space-3);
}

.pf-collections { list-style: none; margin: var(--pf-space-6) 0 0; padding: 0; }

.pf-collection {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 36px;
  padding: 20px 0;
  border-bottom: var(--pf-hairline);
}

.pf-collection__nom {
  -ms-flex: none;
  flex: none;
  width: 260px;
  font-family: var(--pf-font-serif);
  font-size: 24px;
  color: var(--pf-ink);
  text-decoration: none;
}

.pf-collection__nom:hover { color: var(--pf-green); }

.pf-collection__texte {
  -ms-flex: 1;
  flex: 1;
  font-family: var(--pf-font-serif);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--pf-ink-soft);
  margin: 0;
}

.pf-collection__compte {
  -ms-flex: none;
  flex: none;
  width: 110px;
  text-align: right;
  font-family: var(--pf-font-sans);
  font-size: 13px;
  color: var(--pf-grey);
  font-variant-numeric: tabular-nums;
}

.pf-collection__fleche { -ms-flex: none; flex: none; color: var(--pf-green); }

.pf-fonds {
  margin-top: 72px;
  background: var(--pf-paper);
  border-top: var(--pf-hairline);
  border-bottom: var(--pf-hairline);
  padding: 48px var(--pf-encart-marge);
  margin-inline: calc(var(--pf-encart-marge) * -1);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 72px;
  -ms-flex-align: start;
  align-items: start;
}

.pf-fonds__phrase {
  font-family: var(--pf-font-serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--pf-ink-body);
  max-width: 600px;
  margin: var(--pf-space-5) 0 var(--pf-space-6);
}

.pf-fonds__recherche .formulaire_recherche { margin: 0; }

.pf-decennies {
  list-style: none;
  margin: var(--pf-space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.pf-decennies li {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: var(--pf-space-3);
  border-bottom: var(--pf-hairline);
  padding-bottom: var(--pf-space-2);
  font-family: var(--pf-font-sans);
  font-size: 14.5px;
}

.pf-decennies a { color: var(--pf-ink-soft); text-decoration: none; }
.pf-decennies a:hover { color: var(--pf-green); }
.pf-decennies__compte { color: var(--pf-grey); font-variant-numeric: tabular-nums; }

.pf-label--menu { font-size: 10.5px; letter-spacing: 0.18em; margin-bottom: var(--pf-space-2); }
.pf-lien-fleche--menu { font-size: 13.5px; }

@media (max-width: 1199px) {
  .pf-numero { grid-template-columns: 220px minmax(0, 1fr); }
  .pf-abonnement { grid-column: 1 / -1; }
  .pf-nouveautes { grid-template-columns: repeat(2, 1fr); }
  .pf-fonds { grid-template-columns: 1fr; gap: var(--pf-space-10); }
}

@media (max-width: 767px) {
  /* Les bandes sur fond blanc debordent le conteneur d autant qu elles se
   rembourrent : le texte reste donc aligne sur le reste de la page, et le
   blanc respire de 40 px autour de lui. Sans ce couple, le fond commencait
   exactement ou commence le texte. */
.pf-identite { -ms-flex-direction: column; flex-direction: column; gap: var(--pf-space-5); }
  .pf-identite__reperes { text-align: left; }
  .pf-identite__phrase { font-size: 22px; }
  .pf-numero { grid-template-columns: 1fr; gap: var(--pf-space-8); }
  .pf-actualites { grid-template-columns: 1fr; }
  .pf-collection { -ms-flex-direction: column; flex-direction: column; gap: var(--pf-space-2); }
  .pf-collection__nom, .pf-collection__compte { width: auto; text-align: left; }
  .pf-decennies { grid-template-columns: 1fr; }
}


/* ===== Survols ===== */

/* Le systeme ne connait qu un survol de carte : le filet superieur passe au
   vert. Pas de changement d echelle, pas d elevation, pas d ombre.

   Une carte a image n a pas de filet visible au repos ; elle en porte un
   peint dans le fond de page, pour que l apparition du vert ne decale rien.
   Peint dans le fond et non « transparent » : la valeur transparente se
   resolvait ici en couleur du texte, ce qui tracait une ligne sombre. */

.pf-carte {
  border-top: 1px solid var(--pf-bg);
  transition: var(--pf-transition);
}

.pf-carte--sans-image { border-top-color: var(--pf-rule); padding-top: var(--pf-space-4); }

.pf-carte:hover { border-top-color: var(--pf-green); }
.pf-carte:hover .pf-carte__titre a { color: var(--pf-green); }

/* Pour un ouvrage, la carte est le cadre de la couverture. */
.pf-ouvrage__couverture { transition: var(--pf-transition); }

.pf-ouvrage:hover .pf-ouvrage__couverture { border-color: var(--pf-green); }
.pf-ouvrage:hover .pf-ouvrage__titre a { color: var(--pf-green); }

/* Une ligne de liste n est pas une carte : c est son titre qui repond,
   mais depuis toute la surface de la ligne. */
.pf-ligne__titre a { transition: var(--pf-transition); }
.pf-ligne:hover .pf-ligne__titre a { color: var(--pf-green); }

/* Meme principe pour une collection et pour une entree de sommaire. */
.pf-collection__nom,
.pf-collection__fleche { transition: var(--pf-transition); }

.pf-collection:hover .pf-collection__nom { color: var(--pf-green); }

.pf-numero__liste > li > a { transition: var(--pf-transition); }


/* La couverture d'un numero, ou le logo d'une rubrique : cas B du systeme
   d'image adaptatif — verticale, petite, a cote du texte, hauteur naturelle,
   jamais agrandie. Sans logo, la colonne n'existe pas : le titre reprend
   toute la largeur, aucun espace n'est reserve. */
.pf-rubrique__entete {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: var(--pf-space-12);
}

.pf-rubrique__intro { min-width: 0; -ms-flex: 1; flex: 1; }

.pf-rubrique__couverture {
  -ms-flex: none;
  flex: none;
  -ms-flex-order: 2;
  order: 2;
  width: 300px;
  max-width: 40%;
  border: var(--pf-hairline);
  background: var(--pf-paper);
  padding: 9px;
}

.pf-rubrique__couverture img { display: block; width: 100%; height: auto; }

@media (max-width: 767px) {
  .pf-rubrique__entete { -ms-flex-direction: column; flex-direction: column; gap: var(--pf-space-6); }
  .pf-rubrique__couverture { -ms-flex-order: 0; order: 0; width: 220px; max-width: 100%; }
}