/*
Theme Name: Institut Mirabeau Child
Theme URI: https://institut-mirabeau.org
Description: Thème enfant GeneratePress du fonds documentaire Institut Mirabeau. Charte tirée de l'identité du site d'origine (2015-2019) : écu, plume, encre sur papier. Mise en page de rapport imprimé, pas de site vitrine.
Template: generatepress
Version: 2.0.0
Text Domain: institut-mirabeau-child
*/

/* ==========================================================================
   Charte « Institut Mirabeau » — refonte du 2026-08-11.

   D'OÙ ELLE VIENT. Le site de 2015-2019 : écu bleu roi traversé d'une plume,
   mot-symbole en capitales, texte courant en serif justifié, colonne
   encadrée sur fond clair, gros guillemet en tête des encadrés, filets
   partout. C'est un vocabulaire de RAPPORT IMPRIMÉ. On le reprend.

   CE QU'ELLE REFUSE, ET POURQUOI. La v1 de ce thème dérivait du modèle
   FRESM : héro plein cadre à voile dégradé, grille de cartes à ombres et
   survol qui soulève, bandes dégradées, bandeau de titre en aplat dégradé.
   Recoloré, ça restait le même site. Ici : aucun dégradé, aucune ombre
   portée, aucune carte. Des filets, des aplats, une colonne. Un fonds
   documentaire ressemble à un document.

   PAS DE COULEUR D'ACCENT. Bleu d'encre et gris de papier, rien d'autre.
   Ce sont les filets et les capitales espacées qui hiérarchisent. Une
   troisième couleur ferait « marque » là où il faut « archive ».

   Contrastes vérifiés sur le papier (#f6f3ec) :
     encre 13,7:1   ·   bleu écu 8,2:1   ·   gris de plume 5,3:1
   Sur le bleu de pied (#1b3457) : papier clair 10,2:1.
   RÈGLE : --filet et --filet-fort ne portent JAMAIS de texte.

   Titres : Marcellus, auto-hébergée (RGPD : pas d'appel à Google Fonts),
   choisie pour sa parenté avec les capitales romaines de l'écu.
   Texte courant : pile serif système. Aucune requête, aucun tiers.
   ========================================================================== */

@font-face {
  font-family: 'Marcellus';
  src: url('fonts/marcellus-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bleu-ecu: #24487e;
  --bleu-encre: #14294d;
  --bleu-pied: #1b3457;
  --encre: #23262b;
  --gris-plume: #5c6670;
  --papier: #f6f3ec;
  --papier-clair: #fdfcf9;
  --papier-pale: #ece7dc;
  --filet: #d8d0c0;
  --filet-fort: #b9ae99;
  --titres: 'Marcellus', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --courant: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --colonne: 40rem;
}

/* --- Base ----------------------------------------------------------------- */
body {
  background-color: var(--papier);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 18px;
  line-height: 1.72;
  overflow-x: clip;
}
/* Débordement horizontal : ceinture et bretelles. clip ne crée pas de
   conteneur de défilement ; hidden en secours ancien. Jamais de 100vw :
   l'unité inclut l'ascenseur. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

#page { max-width: none; }
.site-content { max-width: none; }
.content-area { max-width: none; margin: 0; }
.one-container .site-content { padding: 0; }

/* La page entière est une feuille posée sur le papier : un bloc blanc cassé
   centré, cerné d'un filet. C'est la structure du site d'origine. */
.site-main {
  max-width: 1080px;
  margin: 0 auto 4rem;
  background: var(--papier-clair);
  border: 1px solid var(--filet);
  border-top: none;
}

.entry-content > * {
  box-sizing: border-box;
  max-width: var(--colonne);
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}
.entry-content > .im-planche,
.entry-content > .im-sommaire,
.entry-content > .im-encadre { max-width: 860px; }
.entry-content > :last-child { margin-bottom: 3rem; }

/* Texte courant justifié avec césure, comme le rapport d'origine. Seulement
   au-delà de 700 px : justifier une colonne étroite creuse des rivières. */
@media (min-width: 700px) {
  .entry-content > p { text-align: justify; hyphens: auto; }
}

a { color: var(--bleu-ecu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--bleu-encre); }
.entry-content a { text-decoration: underline; }

/* --- Titres ---------------------------------------------------------------- */
h1, h2, h3, h4, .entry-title {
  font-family: var(--titres);
  font-weight: 400;
  color: var(--bleu-encre);
  line-height: 1.24;
}
h1, .entry-title { font-size: clamp(1.9rem, 4vw, 2.5rem); }

/* Titre de section : capitales espacées sur un filet plein largeur. Aucun
   bloc coloré, aucun soulignement décoratif court. */
.entry-content > h2 {
  font-size: clamp(1.18rem, 2.2vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--bleu-ecu);
  margin-top: 3.2rem;
  margin-bottom: 1.1rem;
  padding-top: .7rem;
  border-top: 2px solid var(--filet-fort);
}
.entry-content > h3 {
  font-size: 1.16rem;
  margin-top: 2rem;
  margin-bottom: .5rem;
}

.entry-content > p { margin-bottom: 1.35rem; }
.entry-content > ul, .entry-content > ol { margin-bottom: 1.6rem; }
.entry-content > ul li, .entry-content > ol li { margin-bottom: .55rem; }

/* --- En-tête : écu + mot-symbole ------------------------------------------- */
.site-header {
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
}
.site-header .inside-header {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem 28px 1.3rem;
}
.im-marque { display: flex; align-items: center; gap: 16px; }
.im-ecu { width: 46px; height: 52px; flex: none; display: block; }
.main-title {
  font-family: var(--titres);
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  letter-spacing: .17em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}
.main-title a, .main-title a:hover, .main-title a:focus {
  color: var(--bleu-encre);
  text-decoration: none;
}
.im-devise {
  display: block;
  color: var(--gris-plume);
  font-family: var(--courant);
  font-size: .78rem;
  font-style: italic;
  letter-spacing: .01em;
  text-transform: none;
  margin-top: .35rem;
}
.site-description { display: none; }

/* --- Navigation : réglure, pas barre colorée -------------------------------- */
.main-navigation,
.main-navigation ul ul { background-color: var(--papier); }
nav.main-navigation {
  border-bottom: 2px solid var(--bleu-ecu);
  margin-bottom: 2.6rem;
}
.main-navigation .inside-navigation {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  padding: 0 14px;
}
/* Sept items sur une seule ligne à 1080 px : au-delà, la barre se replie et
   le dernier item se retrouve seul sur un rang, ce qui casse la réglure.
   Les libellés sont courts pour la même raison ; l'écu ramène à l'accueil. */
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
  color: var(--bleu-encre);
  font-family: var(--titres);
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .95rem 12px;
}
.main-navigation .main-nav ul li > a { box-shadow: inset 0 0 0 rgba(0,0,0,0); }
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a {
  color: var(--bleu-ecu);
  background-color: var(--papier-pale);
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current_page"] > a {
  color: var(--bleu-encre);
  background-color: transparent;
  box-shadow: inset 0 -5px 0 var(--bleu-ecu);
}

/* --- Bandeau de titre des pages intérieures --------------------------------- */
/* Pas d'aplat coloré : un sur-titre en capitales, le titre, un filet double. */
/* Même largeur que la colonne de texte : le titre et le premier paragraphe
   doivent partager le même bord gauche. Les planches et le sommaire, eux,
   s'échappent à 860 px — c'est voulu, ce sont des hors-texte. */
body:not(.home) .entry-header,
.blog .page-header, .archive .page-header {
  max-width: var(--colonne);
  margin: 0 auto 2.6rem;
  padding: 2.6rem 28px 0;
}
body:not(.home) .entry-header .entry-title,
.blog .page-header h1, .archive .page-header h1 {
  color: var(--bleu-encre);
  margin: 0 0 1.1rem;
}
body:not(.home) .entry-header::after,
.blog .page-header::after, .archive .page-header::after {
  content: "";
  display: block;
  border-top: 3px double var(--filet-fort);
}

/* --- Frontispice de l'accueil ----------------------------------------------- */
/* Ce qui remplace le héro plein cadre : une page de titre encadrée. */
.home .entry-header {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.im-frontispice {
  max-width: 860px;
  margin: 2.8rem auto 3rem;
  padding: 2.6rem 28px;
  border-top: 3px double var(--filet-fort);
  border-bottom: 3px double var(--filet-fort);
  text-align: center;
}
.im-frontispice-sur {
  font-family: var(--titres);
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: .74rem;
  color: var(--gris-plume);
  margin: 0 0 1.1rem;
}
.im-frontispice-titre {
  font-family: var(--titres);
  color: var(--bleu-encre);
  font-size: clamp(2.1rem, 5.4vw, 3.3rem);
  text-transform: uppercase;
  letter-spacing: .09em;
  line-height: 1.08;
  margin: 0 0 1.2rem;
}
.im-frontispice-texte {
  max-width: 34rem;
  margin: 0 auto 1.6rem;
  color: var(--encre);
  font-size: 1.04rem;
}
.im-annee {
  font-family: var(--titres);
  letter-spacing: .22em;
  font-size: .76rem;
  color: var(--gris-plume);
  text-transform: uppercase;
  margin: 2rem 0 0;
}

/* --- Liens d'appel : bordés, jamais des boutons pleins ---------------------- */
.im-liens { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
a.im-lien {
  display: inline-block;
  border: 1px solid var(--bleu-ecu);
  color: var(--bleu-ecu);
  background: transparent;
  padding: .62rem 1.4rem;
  font-family: var(--titres);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
a.im-lien:hover, a.im-lien:focus {
  background: var(--bleu-ecu);
  color: var(--papier-clair);
}

/* --- Planche illustrée ------------------------------------------------------ */
/* L'image est une planche de rapport : filet fin, marge blanche, légende en
   petites capitales. Pas de coins arrondis, pas d'ombre, pas de recadrage
   uniforme imposé — une planche garde ses proportions. */
.entry-content figure,
.im-planche {
  margin: 2.8rem auto;
  padding: 12px;
  border: 1px solid var(--filet);
  background: var(--papier);
}
.entry-content figure img,
.im-planche img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
figcaption, .im-planche-legende {
  color: var(--gris-plume);
  font-size: .82rem;
  line-height: 1.5;
  text-align: left;
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--filet);
}

/* --- Sommaire --------------------------------------------------------------- */
/* Ce qui remplace la grille de cartes : une table des matières numérotée. */
ol.im-sommaire {
  list-style: none;
  counter-reset: im;
  margin: 2.2rem auto 2.6rem;
  padding-left: 28px;
  padding-right: 28px;
  border-top: 1px solid var(--filet);
}
ol.im-sommaire > li {
  counter-increment: im;
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  gap: 0 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--filet);
  margin: 0;
}
ol.im-sommaire > li::before {
  content: counter(im, decimal-leading-zero);
  font-family: var(--titres);
  font-size: 1.15rem;
  color: var(--filet-fort);
  letter-spacing: .06em;
  padding-top: .1rem;
}
ol.im-sommaire h3 {
  font-family: var(--titres);
  font-size: 1.22rem;
  margin: 0 0 .3rem;
}
ol.im-sommaire h3 a { color: var(--bleu-encre); text-decoration: none; }
ol.im-sommaire h3 a:hover, ol.im-sommaire h3 a:focus {
  color: var(--bleu-ecu);
  text-decoration: underline;
}
ol.im-sommaire p { margin: 0; color: var(--gris-plume); font-size: .95rem; }

/* --- Encadré ---------------------------------------------------------------- */
/* Ce qui remplace la bande dégradée : un aplat de papier entre deux filets. */
.im-encadre {
  margin: 3rem auto 0;
  padding: 2.2rem 28px;
  background: var(--papier);
  border-top: 3px double var(--filet-fort);
  border-bottom: 3px double var(--filet-fort);
  text-align: center;
}
.im-encadre h2 {
  font-family: var(--titres);
  color: var(--bleu-encre);
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  margin: 0 0 .7rem;
  border: none;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
}
.im-encadre p { max-width: 34rem; margin: 0 auto 1.5rem; }

/* --- Note de transparence ---------------------------------------------------- */
/* Le gros guillemet ouvrant du site d'origine, repris comme marque de citation
   documentaire. */
.im-note {
  position: relative;
  background: var(--papier);
  border-left: 3px solid var(--bleu-ecu);
  padding: 1.1rem 1.3rem 1.1rem 3.4rem;
  font-size: .96rem;
  color: var(--encre);
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}
.im-note::before {
  content: "\00AB";
  position: absolute;
  left: 1.1rem;
  top: .55rem;
  font-family: var(--titres);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--filet-fort);
}

/* --- Citation ---------------------------------------------------------------- */
.entry-content blockquote {
  border-left: 3px solid var(--filet-fort);
  margin-left: 0;
  padding-left: 1.4rem;
  font-style: italic;
  color: var(--gris-plume);
}

/* --- Pied de page ------------------------------------------------------------ */
.footer-widgets {
  background: var(--bleu-pied);
  color: var(--papier-pale);
  font-size: .93rem;
  padding: 3rem 28px 2.4rem;
}
.footer-widgets .inside-footer-widgets {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  max-width: 1080px;
  margin: 0 auto;
}
.footer-widgets .inside-footer-widgets > div { flex: 1 1 240px; padding: 0; float: none; width: auto; }
.footer-widgets h2, .footer-widgets h3 {
  color: #ffffff;
  font-family: var(--titres);
  font-size: .82rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .17em;
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(246, 243, 236, .28);
}
.footer-widgets p { margin-bottom: .7rem; }
.footer-widgets ul { list-style: none; margin: 0; padding: 0; }
.footer-widgets li { margin-bottom: .5rem; }
.footer-widgets a { color: var(--papier-pale); text-decoration: none; }
.footer-widgets a:hover, .footer-widgets a:focus { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

.site-info {
  background-color: var(--bleu-encre);
  color: #b6c3d6;
  font-size: .83rem;
  padding: 1.1rem 28px;
  text-align: center;
}
.site-info a { color: #dbe3ee; }
.site-info a:hover { color: #ffffff; }

/* --- Petits écrans ------------------------------------------------------------ */
@media (max-width: 768px) {
  body { font-size: 17px; }
  .site-main { margin-bottom: 2.5rem; border-left: none; border-right: none; }

  /* --- En-tête mobile : une seule ligne -------------------------------------
     GeneratePress empile l'en-tête (86 px) puis la barre du bouton MENU
     (94 px) : 180 px avalés avant le premier mot. Le bouton vit dans
     `.main-navigation`, qui est un FRÈRE de `.site-header` — on ne peut donc
     pas le remonter par un simple flex. On le sort du flux et on le place par
     rapport à `#page`, ancêtre commun des deux.
     Effet de bord voulu : `.inside-navigation` n'ayant plus que le panneau
     (masqué au repos), la barre du menu tombe à 0 et son filet bleu devient
     le trait sous l'en-tête. Une ligne au lieu de deux, 64 px au lieu de 180.
     L'en-tête garde donc une HAUTEUR FIXE : le calage du bouton en dépend. */
  #page { position: relative; }
  .site-header .inside-header {
    height: 64px;
    /* Le bouton étant hors flux, il ne réserve pas sa place : sans cette
       réserve à droite il recouvre le mot-symbole, qui se retrouve coupé au
       milieu. 99 px de bouton + 14 px de marge + une respiration. */
    padding: 0 126px 0 16px;
    display: flex;
    align-items: center;
  }
  .im-marque { gap: 11px; }
  .im-ecu { width: 30px; height: 34px; }
  .main-title { font-size: .97rem; letter-spacing: .12em; }
  /* Le slogan sort de l'en-tête : sur 390 px il tenait sur deux lignes et
     écrasait le mot-symbole. Il reste dans le frontispice et dans le pied. */
  .im-devise { display: none; }

  .entry-content > * { padding-left: 20px; padding-right: 20px; }
  .im-frontispice { padding: 1.8rem 20px; margin: 1.1rem auto 2rem; }
  .im-encadre { padding: 1.8rem 20px; }
  ol.im-sommaire { padding-left: 20px; padding-right: 20px; }
  ol.im-sommaire > li { grid-template-columns: 2.4rem 1fr; gap: 0 .7rem; }
  body:not(.home) .entry-header { padding: 1.9rem 20px 0; }

  /* Menu mobile : panneau pleine largeur sur papier, grandes zones tactiles,
     filets entre les items, item courant marqué d'une barre bleue à gauche. */
  nav.main-navigation { margin-bottom: 1.1rem; }
  .main-navigation .inside-navigation { padding: 0; }

  /* Bouton calé dans la ligne d'en-tête, à droite. 44 px de haut : cible
     tactile franche. Le mot MENU reste affiché — l'icône seule priverait le
     bouton de son nom accessible, et aucun `aria-label` n'est posable d'ici. */
  .main-navigation .menu-toggle {
    position: absolute;
    /* L'ancre n'est pas `#page` : GeneratePress met `.inside-navigation` en
       position relative, et l'en-tête n'est même pas dans `#page` — les deux
       sont frères sous `body`. On remonte donc depuis le haut de la barre de
       menu, qui commence exactement au bas de l'en-tête :
       -(64 px de hauteur d'en-tête + 1 px de filet) + 10 px pour centrer un
       bouton de 44 px dans les 64. L'écart ne dépend que de la hauteur fixée
       douze lignes plus haut. La changer, c'est changer ce -55px. */
    top: -55px;
    right: 14px;
    width: auto;
    height: 44px;
    padding: 0 .9rem;
    display: flex;
    align-items: center;
    gap: .5em;
    border: 1px solid var(--filet-fort);
    background: var(--papier-clair);
    color: var(--bleu-ecu);
    font-size: .72rem;
    letter-spacing: .16em;
  }
  .main-navigation .menu-toggle:hover,
  .main-navigation .menu-toggle:focus {
    background: var(--bleu-ecu);
    color: var(--papier-clair);
    border-color: var(--bleu-ecu);
  }
  .main-navigation .menu-toggle .mobile-menu { margin-left: 0; }
  .main-navigation .main-nav ul li a {
    padding: 1rem 20px;
    font-size: .95rem;
    letter-spacing: .09em;
    border-top: 1px solid var(--filet);
  }
  .main-navigation .main-nav ul li[class*="current-menu-"] > a,
  .main-navigation .main-nav ul li[class*="current_page"] > a {
    background-color: var(--papier-pale);
    box-shadow: inset 5px 0 0 var(--bleu-ecu);
  }

  .entry-content figure, .im-planche { margin: 2rem auto; padding: 8px; }
  .footer-widgets { padding: 2.3rem 20px 1.9rem; }
  .footer-widgets .inside-footer-widgets { gap: 1.8rem; }
}

@media (max-width: 480px) {
  .im-liens { flex-direction: column; align-items: stretch; }
  a.im-lien { text-align: center; }
}