:root {
        --history-max-w: var(--page-max-w, 1400px);
        --history-gap: 16px;
        --history-radius: 12px;
        --history-border: 1px solid var(--bordure, #e6e6e6);
        --history-box-bg: #fafafa;
}
      main.history-page {
        max-width: var(--history-max-w);
        margin-inline: auto;
        padding: var(--page-pad, 16px);
        display: grid;
        grid-template-rows: auto auto auto 1fr;
        gap: 20px;
        box-sizing: border-box;
}
      .history-header h1 {
        margin: 0;
        font-size: clamp(1.4rem, 1vw + 1rem, 2rem);
        font-family: "EB Garamond", serif;
}
      .history-subtitle {
        margin: 0;
        color: #555;
        font-size: clamp(1rem, .8vw + .7rem, 1.125rem);
        font-family: "Lora", serif;
}

      /* Grille 2 colonnes, mobile en 1 */
      .history-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--history-gap);
}
      @media (max-width: 900px){
        .history-grid {
                grid-template-columns: 1fr;
        }
        main.history-page {
                padding: 12px;
        }
}

      /* Blocs de contenu */
      .history-box {
        border: var(--history-border);
        border-radius: var(--history-radius);
        background: var(--history-box-bg);
        padding: 16px;
}
      .history-box h3 {
        margin: 0 0 8px 0;
        font-size: clamp(1.05rem, .6vw + .8rem, 1.25rem);
        font-family: "EB Garamond", serif;
}
      
	.history-box p{
  margin: 0;                     /* reset */
  /*font-size: clamp(1.06rem, 0.35vw + 0.96rem, 1.18rem);*/
  font-size: clamp(1.05rem, 0.33vw + 0.95rem, 1.17rem); /* ↓ un cran de plus */
  /*line-height: 1.6;*/
  line-height: 1.5;  
  /*color: #333;*/
  color: #262626;

}
.history-box p + p{
  margin-top: .38em;             /* “un poil” d’air entre paragraphes */
}

      .history-tag {
        display: inline-block;
        font-variant-numeric: tabular-nums;
        padding: 0 .35em;
        border-radius: .4em;
        border: 1px solid #d9d9d9;
        background: #fff;
        margin-right: .35em;
}

      /* Bandeaux section */
      .history-section-title {
        font-family: "EB Garamond", serif;
        font-weight: 600;
        font-size: clamp(1.1rem, .8vw + .8rem, 1.4rem);
        margin: 10px 0 4px 0;
}

      /* Image seule, responsive */
      .history-figure {
        margin: 0;
        border: var(--history-border);
        border-radius: var(--history-radius);
        overflow: hidden;
        background: #fff;
}
      .history-figure img {
        display: block;
        width: 100%;
        height: auto;
}
      .history-figcaption {
        font-size: .95rem;
        color: #555;
        padding: 8px 12px 12px 12px;
}

      /* Petite pagination locale si besoin (optionnelle) */
      .history-pager {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-top: 1px solid #e6e6e6;
        padding-top: 14px;
}
      .history-pager a {
        text-decoration: none;
        border: 1px solid #ddd;
        padding: 10px 14px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
}
      .history-pagecount {
        opacity: .8;
        font-variant-numeric: tabular-nums;
}
/* ===== Utilitaires pour tes lignes custom ===== */
  .layout-row {
    display: grid;
    gap: var(--history-gap,16px);
    align-items: start;                                     /* pas d'étirement par défaut */
    grid-template-columns: var(--layout-cols, 1fr 1fr);
}
  .layout-13 {
    --layout-cols: 1fr 2fr;
}            /* 1/3 | 2/3 */
  .layout-50 {
    --layout-cols: 1fr 1fr;
}            /* 50 | 50 */

  /* mêmes hauteurs sur la ligne quand tu ajoutes .layout-equal */
  .layout-equal > * {
    height: 100%;
}
  .layout-equal .history-figure {
    display: grid;
    grid-template-rows: 1fr auto;                                     /* image prend la place, légende en bas */
    height: 100%;
}            /* image non recadrée (pour ta ligne 1) */
  .figure-contain img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 420px;                                     /* ajuste si besoin */
}            /* mobile */
  @media (max-width: 900px){
    .layout-row {
        grid-template-columns: 1fr !important;
    }
    .layout-equal > * {
        height: auto;
    }
    .layout-equal .history-figure {
        height: auto;
        display: block;
    }
    .figure-contain img {
        height: auto;
    }
}
.palmares-list{
  margin: .35rem 0 0;               /* un poil moins d’air en haut, 0 en bas */
  padding-left: 1.2em;
  font-family: "Lora", serif;        /* police plus “texte long” */
  /*font-size: clamp(1.06rem, 0.32vw + 0.96rem, 1.18rem);*/ /* +~8–10% */
  font-size: clamp(1.02rem, 0.28vw + 0.94rem, 1.14rem);
  line-height: 1.4;                  /* lisibilité */
}
.palmares-list li{
  margin: 0;                         /* reset */
}
.palmares-list li + li{
  margin-top: .30rem;                /* espace inter-items un peu réduit */
}
/* petits raffinements */
.palmares-list strong{ font-weight: 600; color: #222; }
.palmares-list sup{ font-size: 80%; vertical-align: text-top; }

/* ================================================
   Bandeau titre — Sépia direct (même cadre que .history-box)
   ================================================ */
.g1418-header{
  margin-block: 2px 8px;
  padding: 16px;                          /* même padding que .history-box */
  border: var(--history-border);
  border-radius: var(--history-radius);
  background: #e9dec5;                    /* sépia */
  border-color: #cdb88d;
  color: #111;                             /* texte noir comme souhaité */
  box-shadow: none;
  display: block;
}

/* Titre : on neutralise tout fond/boîte bleus hérités d'ailleurs */
.g1418-header .page-title{
  margin: 0;
  line-height: 1.15;
  font-family: "EB Garamond", serif;
  font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem);
  color: currentColor;                    /* hérite de #111 */
  background: transparent !important;     /* ← tue le rectangle bleu */
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Par sécurité : s'il y a des décos via pseudo-éléments */
.g1418-header .page-title::before,
.g1418-header .page-title::after{
  content: none !important;
}

/* Sous-titre éventuel sous le H1 */
.g1418-header .history-subtitle{
  margin: 6px 0 0;
  color: #333;                            /* lisible sur sépia */
  font-family: "Lora", serif;
  font-size: clamp(1rem, .8vw + .7rem, 1.125rem);
  background: transparent !important;     /* au cas où */
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Figcaptions : taille/teinte communes pour les deux sections */
section[aria-label="Études supérieures et vie personnelle"] .history-figcaption,
section[aria-label="Palmarès"] .history-figcaption{
  margin-top: 6px;
  font-size: clamp(1.07rem, 0.33vw + 0.97rem, 1.20rem); /* entre tes deux réglages */
  line-height: 1.5;
  color: #262626;       /* plus foncé */
  font-weight: 550;     /* un peu de corps */
  text-align: center;   /* harmonise les deux */
}

/* La petite note un ton en dessous, pour les deux sections */
section[aria-label="Études supérieures et vie personnelle"] .history-figcaption .fig-note,
section[aria-label="Palmarès"] .history-figcaption .fig-note{
  color: #3a3a3a;
}

/* Palmarès : centrage du groupe image + légende, sans grand trou */
section[aria-label="Palmarès"] .history-figure{
  display: grid;
  grid-template-rows: auto auto;   /* image puis légende */
  align-content: center;           /* centre verticalement l’ensemble */
  justify-items: center;
}
section[aria-label="Palmarès"] .history-figure img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Ligne "Jeunesse et formation" : l'image remplit la largeur du cadre */
section[aria-label="Jeunesse et formation"] .figure-contain img{
  width: 100% !important;
  height: auto !important;
  max-height: none !important;   /* annule le cap à 420px */
  object-fit: contain;           /* pas de recadrage */
}
/* L’homme de presse : image + légende centrées verticalement, même hauteur que la colonne texte */
section[aria-label="L’homme de presse"] .history-figure{
  display: grid;
  grid-template-rows: auto auto;  /* image puis légende */
  align-content: center;          /* centre le groupe image+légende dans le cadre */
  justify-items: center;
  min-height: 260px;              /* remplace l’inline, ajuste si besoin */
}

section[aria-label="L’homme de presse"] .history-figure img{
  width: 100%;
  height: auto;
  object-fit: contain;            /* pas de recadrage */
}

section[aria-label="L’homme de presse"] .history-figcaption{
  margin-top: 6px;
  font-size: clamp(1.07rem, 0.33vw + 0.97rem, 1.20rem);
  line-height: 1.5;
  color: #262626;
  font-weight: 550;
  text-align: center;
}



.pager-min{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #e6e6e6;
}
.pager-min a{
  font-weight:600;
  text-decoration:none;
}
.pager-min a:hover,
.pager-min a:focus{ text-decoration:underline; }
.pager-min span{ width:0; height:0; overflow:hidden; }

/* Page 2 – L’homme de presse : image pleine largeur, centrée verticalement */
section[aria-label="L’homme de presse"] .history-figure{
  display: grid;
  grid-template-rows: auto auto;   /* image + légende */
  align-content: center;           /* centre le groupe dans le cadre égalisé */
  justify-items: stretch;          /* l’image prend toute la largeur */
  padding: 0;                      /* pas de padding parasite */
}

/* ← Neutralise le “tassement” hérité (.figure-contain img) */
section[aria-label="L’homme de presse"] .figure-contain img{
  width: 100% !important;
  height: auto !important;         /* au lieu de height:100% */
  max-height: none !important;     /* enlève le cap 420px */
  object-fit: contain;             /* pas de recadrage */
  margin: 0;
  display: block;
}

/* Figcaption présent et utile (taille + couleur) */
section[aria-label="L’homme de presse"] .history-figcaption{
  margin-top: 6px;
  font-size: clamp(1.07rem, 0.33vw + 0.97rem, 1.20rem);
  line-height: 1.5;
  color: #262626;
  font-weight: 550;
  text-align: center;
}
/* Dreyfus : on désactive l'égalisation de hauteur uniquement ici */
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] .layout-equal > *{
  height: auto !important;                 /* l'article n'est plus étiré */
}

/* ——— Section Dreyfus : ciblage propre ——— */

/* 1) La grille ne force rien côté dro ite */
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] .layout-row{
  align-items: start !important;
}

/* 2) L'article (colonne droite) reste à la hauteur de son contenu */
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] .layout-equal > *{
  height: auto !important;
}

/* 3) COLONNE GAUCHE UNIQUEMENT :
   on égalise visuellement en donnant une hauteur mini au cadre image */
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] .layout-row > .history-figure{
  min-height: clamp(360px, 34vw, 560px) !important; /* ajuste à l'œil */
  display: grid;
  place-items: center; /* centre verticalement l’image dans le cadre */
}

/* Image gauche : propre, sans déformation */
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] .layout-row > .history-figure img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 4) FIGURE INLINE DANS L’ARTICLE (colonne droite) : reset total */
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] article .history-figure{
  min-height: auto !important;
  display: block !important;
  place-items: initial !important;
}
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] article .history-figure img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* La figure “inline” dans l’article reste simple et fluide */
.history-figure--inline{
  display: block;
  margin: .6em 0;
  overflow: hidden;
}
.history-figure--inline img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* ——— Dreyfus (propre) ——— */

/* La grille ne force pas l'étirement global */
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] .layout-row{
  align-items: start !important;
}

/* Pas d'égalisation de hauteur dans cette section */
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] .layout-equal > *{
  height: auto !important;
}

/* COLONNE GAUCHE (enfant direct de la grille) : cadre plus haut, image centrée */
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] .layout-row > .history-figure{
  min-height: clamp(360px, 34vw, 560px) !important; /* ajuste à l’œil */
  display: grid;
  place-items: center;
}
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] .layout-row > .history-figure img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* FIGURE “INLINE” DANS L’ARTICLE (colonne droite) : doit rester naturelle */
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] article .history-figure{
  min-height: auto !important;
  height: auto !important;         /* ← clé : plus de 100% ici */
  display: block !important;
}
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] article .history-figure img{
  width: 100%;
  height: auto !important;
  object-fit: contain;
}
/* Dreyfus — cadre gauche de même hauteur que la colonne droite + image centrée */
section[aria-label="Jean Jaurès et l’affaire Dreyfus"] .layout-row{
  align-items: start !important;                    /* la droite reste naturelle */
}

section[aria-label="Jean Jaurès et l’affaire Dreyfus"] .layout-row > .history-figure{
  align-self: stretch;                              /* ← la figure gauche prend la même hauteur que la droite */
  display: grid;
  place-items: center;                              /* centre l'image dans le cadre */
  /* option confort : un léger padding interne */
  /* padding: 6px; box-sizing: border-box; */
}

section[aria-label="Jean Jaurès et l’affaire Dreyfus"] .layout-row > .history-figure img{
  width: 100%;
  height: 100%;
  object-fit: contain;                              /* pas de recadrage : bandes haut/bas si besoin */
  display: block;
}
/* Ligne "La peine de mort" : image pleine largeur/hauteur du cadre, légende dessous */
section[aria-label="La peine de mort"] .history-figure{
  display: grid;
  grid-template-rows: 1fr auto; /* image prend la place, légende en bas */
}

section[aria-label="La peine de mort"] .history-figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* remplit le cadre, supprime les blancs */
  object-position: center;      /* recadrage centré (léger si besoin) */
}

section[aria-label="La peine de mort"] .history-figcaption{
  margin-top: 6px;
  text-align: center;
  font-size: clamp(1.06rem, 0.32vw + 0.96rem, 1.18rem);
  color: #262626;
  font-weight: 550;
}