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

   pf-tokens.css — le socle du systeme de design

   Les six fichiers de design/tokens/ reunis, moins leur @import
   Google Fonts : les polices sont auto-hebergees dans font.css.

   Ces variables sont ce sur quoi s ecrivent les composants de la
   refonte. Bootstrap ne les lit pas — voir REDESIGN.md : il reste
   charge pour les squelettes non repris, on ecrit a cote de lui.

   Ne pas modifier une valeur ici sans la reporter dans design/tokens/
   et dans le projet Claude Design : les trois doivent rester d accord.

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

:root {

  /* ===== Encres, gris, fonds, filets, accent — design/tokens/colors.css ===== */
  /* — Base — */
  --pf-ink: #222222;             /* titres, texte fort */
  --pf-ink-body: #252525;        /* corps de texte */
  --pf-ink-soft: #454545;        /* texte secondaire lisible, liens de nav */
  --pf-grey: #6B6B6B;            /* dates, crédits, métadonnées */
  --pf-grey-faint: #A8A59C;      /* numérotation, texte tertiaire */

  --pf-paper: #FFFFFF;           /* zones fonctionnelles, pied de page */
  --pf-bg: #FAFAF8;              /* fond de page */
  --pf-canvas: #EDEBE4;          /* fond hors-page (planches, aperçus) */

  --pf-rule: #DEDCD5;            /* filet standard */
  --pf-rule-faint: #EFEDE6;      /* filet discret */
  --pf-rule-strong: #222222;     /* filet d'ouverture de section */

  /* — Accent institutionnel (vert Presse fédéraliste) — */
  --pf-green: #007549;
  --pf-green-hover: #005E3B;
  --pf-green-tint: #C9E0D5;      /* soulignement discret sous un lien */

  /* — Accent secondaire, usage rare (chiffres, mise en avant) — */
  --pf-blue: #2F5AA8;

  /* — Alias sémantiques — */
  --pf-text-heading: var(--pf-ink);
  --pf-text-body: var(--pf-ink-body);
  --pf-text-meta: var(--pf-grey);
  --pf-text-caption: var(--pf-grey);
  --pf-link: var(--pf-green);
  --pf-link-hover: var(--pf-green-hover);
  --pf-label: var(--pf-green);
  --pf-surface-page: var(--pf-bg);
  --pf-surface-block: var(--pf-paper);
  --pf-border: var(--pf-rule);
  --pf-focus: var(--pf-green);

  /* ===== Familles, echelle de titres, corps, labels — design/tokens/typography.css ===== */
  --pf-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --pf-font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pf-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Titres — serif, poids 400/500, interlignage serré */
  --pf-h1-size: 54px;
  --pf-h1-size-mobile: 34px;
  --pf-h1-line: 1.08;
  --pf-h1-weight: 400;
  --pf-h1-tracking: -0.01em;
  --pf-h1-measure: 900px;

  --pf-h2-size: 30px;
  --pf-h2-line: 1.2;
  --pf-h2-weight: 500;

  --pf-h3-size: 23px;
  --pf-h3-line: 1.3;
  --pf-h3-weight: 500;

  /* Chapô — serif, un cran sous le corps en poids */
  --pf-lede-size: 21px;
  --pf-lede-line: 1.5;

  /* Corps — serif 19 px / 1,66, paragraphes espacés de ~1 em */
  --pf-body-size: 19px;
  --pf-body-size-mobile: 17.5px;
  --pf-body-line: 1.66;
  --pf-body-spacing: 1.05em;

  /* Interface — sans-serif */
  --pf-nav-size: 14px;
  --pf-meta-size: 14.5px;
  --pf-caption-size: 12.5px;
  --pf-cta-size: 14.5px;

  /* Label éditorial — petites capitales espacées */
  --pf-label-size: 12px;
  --pf-label-size-sm: 11px;
  --pf-label-tracking: 0.14em;
  --pf-label-tracking-lg: 0.16em;
  --pf-label-weight: 600;

  /* ===== Espacement, grille, largeurs de media — design/tokens/spacing.css ===== */
  --pf-space-1: 4px;
  --pf-space-2: 8px;
  --pf-space-3: 12px;
  --pf-space-4: 16px;
  --pf-space-5: 20px;
  --pf-space-6: 24px;
  --pf-space-8: 32px;
  --pf-space-10: 40px;
  --pf-space-12: 48px;
  --pf-space-14: 56px;
  --pf-space-18: 72px;
  --pf-space-24: 96px;

  /* Grille */
  /* Grille alignee sur les paliers Bootstrap 4, plus un palier xxl pour les
     ecrans 1920 : voir design/guidelines/spacing-grid.html. La colonne de
     lecture ne bouge pas — les pixels en plus vont au rail et a la reserve. */
  --pf-container: 1140px;      /* xl */
  --pf-container-xxl: 1600px;  /* >= 1400 */
  --pf-gutter: 30px;           /* gouttiere pleine, 15 par cote */
  --pf-columns: 12;
  --pf-measure: 760px;        /* largeur maximale de la colonne de lecture */
  --pf-measure-tight: 700px;  /* corps de texte long */
  --pf-measure-lg: 650px;     /* colonne de lecture au palier lg */
  --pf-rail: 220px;           /* rail de sommaire / metadonnees, xl et lg */
  --pf-rail-xxl: 300px;       /* >= 1400 */
  --pf-rail-gap: 60px;
  --pf-encart-marge: 40px;   /* debord et rembourrage des bandes sur fond blanc */

  /* Médias */
  --pf-cover-ratio: 142 / 200;   /* couverture d'ouvrage ou de revue */
  --pf-photo-ratio: 3 / 2;       /* photographie horizontale */
  --pf-portrait-width: 300px;    /* image verticale à côté du texte */
  --pf-small-photo-width: 300px; /* petite image horizontale, non agrandie */

  /* ===== Filets, absence d arrondi et d ombre, focus — design/tokens/lines.css ===== */
  --pf-hairline: 1px solid var(--pf-rule);
  --pf-hairline-faint: 1px solid var(--pf-rule-faint);
  --pf-rule-open: 1px solid var(--pf-ink);      /* ouverture de section */
  --pf-rule-heavy: 2px solid var(--pf-ink);     /* rail de métadonnées */
  --pf-radius: 0;                               /* aucun arrondi dans le système */
  --pf-shadow: none;                            /* aucune ombre dans le système */
  --pf-focus-ring: 2px solid var(--pf-green);
  --pf-focus-offset: 3px;

  /* ===== Durees et transition unique — design/tokens/motion.css ===== */
  --pf-duration: 160ms;
  --pf-duration-open: 200ms;   /* ouverture du sommaire, du menu */
  --pf-easing: ease;
  --pf-transition: color var(--pf-duration) var(--pf-easing),
                   border-color var(--pf-duration) var(--pf-easing),
                   background-color var(--pf-duration) var(--pf-easing);
}

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

   Socle. Le strict nécessaire pour que les composants de la refonte
   s'écrivent sans répéter les mêmes règles — pas une bibliothèque.

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

/* Le conteneur du système : 1200 px gouttières comprises, donc 1120 px
   de contenu. Ce n'est pas .container de Bootstrap, qui reste réglé de
   son côté pour les squelettes non repris. */
.pf-conteneur {
  max-width: var(--pf-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--pf-gutter) / 2);
  padding-right: calc(var(--pf-gutter) / 2);
}

/* Au-dela de 1400 px le conteneur s elargit, pas la colonne de lecture. */
@media (min-width: 1400px) {
  .pf-conteneur { max-width: var(--pf-container-xxl); }
}

/* Aucun arrondi, aucune ombre : c'est une règle du système, pas un défaut
   qu'on pourrait rétablir composant par composant. */
.pf-conteneur *,
.pf-bloc {
  border-radius: var(--pf-radius);
  box-shadow: var(--pf-shadow);
}

/* Anneau de focus visible sur tout élément interactif. La couleur seule ne
   signale jamais rien dans ce système. */
:focus-visible {
  outline: var(--pf-focus-ring);
  outline-offset: var(--pf-focus-offset);
}