/* ==========================================================================
   Thierry Chopin — feuille de style principale
   Variables et reset : reutilises sur toutes les pages du site.
   Section "Header" : nav sticky + menu mobile en hamburger.
   ========================================================================== */

/* Police "General Sans" (menus / texte courant).
   Fichiers verifies presents dans assets/fonts/ (8 fichiers recus : Regular,
   Medium, Bold + Extralight/Light + italiques). On active ici les 3 graisses
   utilisees par le site pour l'instant ; les autres graisses deja livrees
   pourront etre activees de la meme facon plus tard si besoin. */
@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/GeneralSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/GeneralSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/GeneralSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette sobre et professionnelle, calee sur la maquette du header */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f7f5;
  --color-text: #002266;         /* bleu Europe plus fonce */
  --color-text-muted: #46578a;   /* meme teinte, adoucie pour les textes secondaires */
  --color-accent: #1c3d5a;
  --color-accent-hover: #14293d;
  --color-gold: #e0b400;         /* jaune Europe, encore plus lumineux */
  --color-border: #e5e5e2;
  --color-border-strong: #9a9dab; /* separateurs plus visibles (accordeon "Approche"), calque sur la maquette */

  /* "Thierry Chopin" et tous les titres/numeros en Bodoni Moda (Google Fonts,
     chargee dans includes/header.php), retenue suite au comparatif typo. */
  --font-serif: "Bodoni Moda", "Times New Roman", Times, "Liberation Serif", serif;

  /* Menus / texte courant en General Sans, avec repli sur une police systeme proche */
  --font-sans: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --header-height: 84px;
  --container-width: 1440px;
}

/* Reset minimal */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 32px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
}

.site-header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  /* Ecart entre le logo et le menu : continue de grandir avec l'ecran
     (pas de palier fixe), donc plus d'air sur les tres grands ecrans. */
  gap: clamp(32px, -25px + 3.8vw, 110px);
  height: var(--header-height);
  position: relative;
}

/* Echelle fluide : la taille du logo et du menu diminue/augmente en continu
   avec la largeur d'ecran (au lieu de sauter brutalement par paliers), du
   desktop large (1600px) jusqu'au point de bascule vers le menu mobile
   (1150px). En dessous de 1150px, .site-nav passe en menu deroulant (voir
   plus bas) donc la valeur plancher du clamp() n'a plus besoin d'etre
   utilisee telle quelle : elle sert surtout de garde-fou.
   Le rapport de taille logo/menu est volontairement accentue (le logo croit
   plus vite que le menu) pour garder une hierarchie visuelle nette a toutes
   les tailles d'ecran. */

.site-logo {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.3rem, -1.022rem + 4.622vw, 3.6rem);
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
  flex-shrink: 0;
}

.site-nav {
  min-width: 0;
}

.site-nav ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* Ecart entre chaque item : plus genereux qu'avant, notamment sur les
     ecrans moyens (type MacBook Air, ~1280-1440px). Le menu restant ancre
     a droite (justify-content:space-between sur .site-header__inner), le
     grossir rapproche mecaniquement son bord gauche du logo : l'ecart
     logo/menu diminue et les items eux-memes respirent davantage. */
  gap: clamp(32px, -29.3px + 5.33vw, 56px);
  /* Alignement optique : la boite du menu est deja centree verticalement
     (align-items:center sur .site-header__inner), mais "Thierry Chopin"
     descend plus bas (jambages du y et du p) qu'il ne monte, donc son
     centre visuel est legerement plus bas que le centre de sa boite. Ce
     petit decalage recale le menu sur ce centre visuel plutot que sur la
     boite brute. */
  transform: translateY(5px);
}

.site-nav li {
  flex-shrink: 0;
}

.site-nav a {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(0.65rem, 0.394rem + 0.356vw, 0.75rem);
  font-weight: 500; /* General Sans Medium, plus lisible que Regular */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 8px 0;
  white-space: nowrap;
  transition: opacity .2s ease;
}

.site-nav a:hover {
  opacity: 0.65;
}

.site-nav a.is-active {
  font-weight: 700; /* General Sans Bold, pour se distinguer du reste du menu (desormais en Medium) */
  color: var(--color-gold);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-text);
  display: block;
  transition: all .2s ease;
}

/* En dessous de 1150px, le menu horizontal n'a plus la place de respirer
   correctement (logo agrandi + espacement du menu augmente en 2026) : on
   bascule proprement sur un menu mobile empile, avec des tailles fixes et
   confortables plutot que le clamp() du desktop. */
@media (max-width: 1150px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    min-width: auto;
  }

  .site-nav.is-open {
    max-height: 520px;
  }

  .site-nav ul {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0;
    padding: 8px 32px 20px;
    /* Le recalage optique ne concerne que la ligne horizontale desktop. */
    transform: none;
  }

  .site-nav li {
    width: 100%;
  }

  .site-nav a {
    font-size: 0.95rem;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    width: 100%;
    white-space: normal;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: 64px 0 72px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.footer-name {
  justify-self: start;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500; /* General Sans Medium, plus lisible que Regular */
  color: var(--color-text);
  transition: opacity .2s ease;
}

.footer-name:hover {
  opacity: 0.65;
}

.footer-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end; /* LinkedIn reste a droite */
  color: var(--color-text);
  transition: opacity .2s ease;
}

.footer-icon-link--mail {
  /* Grace a la grille 1fr auto 1fr, ce lien occupe la colonne centrale :
     il est donc toujours au milieu du footer, quelle que soit la largeur
     du nom a gauche ou de l'icone LinkedIn a droite. */
  justify-self: center;
}

.footer-icon-link:hover {
  opacity: 0.65;
}

.footer-icon {
  width: 28px;
  height: 28px;
}

.footer-icon--mail {
  width: 36px;
  height: 36px;
}

@media (max-width: 700px) {
  .site-footer {
    padding: 40px 0 48px;
  }

  .site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

/* ==========================================================================
   Bloc "Expertise" (page d'accueil)
   ========================================================================== */

.block-expertise {
  padding: 56px 0 24px;
}

.block-expertise__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.25;
  color: var(--color-gold);
  max-width: 900px;
  margin-bottom: 48px;
  /* Toujours sur une seule ligne, quelle que soit la largeur d'ecran : en
     dessous de ~760px (voir le media query plus bas), la taille de police
     se resserre en plus pour continuer a tenir sur une ligne. */
  white-space: nowrap;
}

/* En dessous de ce seuil, la taille de police "desktop" (clamp ci-dessus)
   devient trop grande pour tenir sur une seule ligne : on bascule sur une
   formule qui suit la largeur d'ecran de plus pres, afin que le titre ne
   retourne jamais a la ligne, meme sur mobile. */
@media (max-width: 759px) {
  .block-expertise__heading {
    font-size: clamp(0.75rem, 4.13vw - 2.97px, 1.5rem);
  }
}

.block-expertise__content {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 40px;
  /* "stretch" (comportement par defaut de grid) : les deux colonnes font
     la hauteur de la plus grande des deux, donc l'image et le texte se
     terminent toujours a la meme hauteur, quelle que soit la longueur du
     texte ou la largeur d'ecran. */
  align-items: stretch;
  /* Le bloc image+texte est volontairement moins large que la page (titre,
     header, footer) : il est centre dans une colonne plus etroite pour
     creer un rythme editorial, plutot que d'etaler le texte sur toute la
     largeur disponible. */
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.block-expertise__media {
  margin: 0; /* reset de la marge par defaut du <figure> */
  height: 100%;
}

.block-expertise__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-expertise__text {
  /* Compense l'espace optique au-dessus des lettres cree par le line-height :
     sans ca, le haut visuel du texte parait plus bas que le haut de l'image
     alors que leurs boites s'alignent parfaitement. */
  margin-top: -7px;
}

.block-expertise__text p {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium, plus lisible que Regular */
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: none;
  hyphens: none; /* jamais de coupure de mot avec un tiret */
}

.block-expertise__text p + p {
  margin-top: 20px;
}

@media (max-width: 760px) {
  .block-expertise {
    padding: 40px 0;
  }

  .block-expertise__heading {
    margin-bottom: 32px;
  }

  .block-expertise__content {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: none;
    margin-left: 0; /* pleine largeur sur mobile, le retrecissement n'a plus lieu d'etre */
    margin-right: 0;
  }

  /* Empile image puis texte : la logique "meme hauteur" ne s'applique
     qu'en colonnes cote a cote, donc on redonne a l'image un format carre
     fixe pour un rendu propre une fois empilee. */
  .block-expertise__media {
    height: auto;
  }

  .block-expertise__media img {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* ==========================================================================
   Bloc "Valeurs et approche" (page d'accueil)
   ========================================================================== */

.block-values {
  padding: 24px 0 56px;
  text-align: center;
}

.block-values__inner {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.block-values__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.25;
  color: var(--color-gold);
  margin-bottom: 24px;
}

.block-values__intro {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 680px;
  margin: 0 auto 64px;
}

/* Variante "page dediee" (valeurs-et-approche.php) : le titre et le texte
   d'intro sont au bord gauche du container (comme "Mon parcours"), pas
   centres avec le reste du bloc comme dans le teaser de la home. Seule la
   grille 01/02/03 garde l'encart centre a 90% (.block-values__inner). */
.block-values--page {
  /* Meme distance entre la navbar et le premier mot du bloc que sur les
     autres pages (voir .block-expertise, .block-offre, .block-references). */
  padding-top: 56px;
  text-align: left;
}

.block-values--page .block-values__intro {
  margin: 0 0 64px;
  font-size: 1.1rem;
}

.block-values__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* "stretch" (comportement par defaut) : les 3 colonnes font la hauteur
     de la plus grande d'entre elles, donc les separateurs verticaux
     s'etirent toujours jusqu'au texte le plus long (colonne "Analyse"). */
  text-align: left;
  margin-bottom: 56px;
}

.block-values__item {
  padding: 0 40px;
}

.block-values__item:first-child {
  padding-left: 0;
}

.block-values__item:last-child {
  padding-right: 0;
}

.block-values__item:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.block-values__number {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  line-height: 1;
  color: var(--color-gold);
  text-align: right;
  margin-bottom: 32px;
}

.block-values__title {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.375rem);
  line-height: 1.3;
  color: var(--color-gold);
  margin-bottom: 16px;
}

.block-values__text {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium, plus lisible que Regular */
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.block-values__link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 0.95rem;
  color: var(--color-gold);
  transition: opacity .2s ease;
}

.block-values__link:hover {
  opacity: 0.65;
}

.block-values__arrow {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.block-values__link:hover .block-values__arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   Bloc "Approche" (page valeurs-et-approche.php) : intro + accordeon
   ========================================================================== */

.block-approche {
  padding: 0 0 56px;
  text-align: left;
}

.block-approche__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  color: var(--color-gold);
  margin-bottom: 24px;
}

.block-approche__intro {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 680px;
  margin: 0 0 48px;
}

.block-approche__inner {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.block-approche__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border-strong);
}

.block-approche__item {
  border-bottom: 1px solid var(--color-border-strong);
}

.block-approche__toggle {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 18px;
  padding: 28px 0;
  background: none;
  border: none;
  margin: 0;
  font: inherit;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}

.block-approche__arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
  color: var(--color-gold);
  transition: transform .25s ease;
}

.block-approche__item.is-open .block-approche__arrow {
  transform: rotate(90deg);
}

.block-approche__title {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--color-text);
}

.block-approche__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}

.block-approche__item.is-open .block-approche__panel {
  grid-template-rows: 1fr;
}

.block-approche__panel-inner {
  overflow: hidden;
}

.block-approche__text {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium, plus lisible que Regular */
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 680px;
  padding: 0 0 28px 36px;
}

.block-approche__note {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
  text-align: center;
  max-width: 860px;
  margin: 48px auto 0;
}

/* ==========================================================================
   Bloc "Mon parcours" (page d'accueil)
   ========================================================================== */

.block-bio {
  padding: 24px 0 56px;
  /* Centre "Mon parcours" sur la page, comme "Mon offre de service" et
     "Valeurs et approche" au-dessus. */
  text-align: center;
}

.block-bio__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.25;
  color: var(--color-gold);
  margin-bottom: 24px;
}

.block-bio__subheading {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--color-text);
  max-width: 640px;
  margin: 0 auto 40px;
}

.block-bio__content {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 40px;
  /* Meme logique que .block-expertise__content : la photo et le texte se
     terminent toujours a la meme hauteur (stretch = comportement par
     defaut de grid). */
  align-items: stretch;
  max-width: 90%;
  /* Encart centre sur la page, comme le titre "Mon parcours" au-dessus
     (et comme .block-expertise__content plus haut sur la meme page). */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 48px;
  /* text-align:center herite de .block-bio ; a l'interieur de la grille,
     le texte doit rester en justifie/gauche normal (voir .block-bio__text
     p plus bas, deja en text-align:justify). */
  text-align: left;
}

.block-bio__media {
  margin: 0;
  height: 100%;
}

.block-bio__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-bio__text p {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium, plus lisible que Regular */
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: none;
  hyphens: none;
}

.block-bio__text p + p {
  margin-top: 20px;
}

.block-bio__closing {
  max-width: 84%;
  margin: 0 auto;
  text-align: center;
}

.block-bio__closing p {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
}

.block-bio__closing p + p {
  margin-top: 24px;
}

@media (max-width: 760px) {
  .block-bio {
    padding: 16px 0 40px;
  }

  .block-bio__subheading {
    margin-bottom: 32px;
  }

  .block-bio__content {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 32px;
  }

  .block-bio__media {
    height: auto;
  }

  .block-bio__media img {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .block-bio__closing {
    max-width: none;
  }
}

/* ==========================================================================
   Bloc "Presse" - bandeau defilant des logos (page d'accueil)
   ========================================================================== */

.block-press {
  padding: 8px 0 56px;
  overflow: hidden;
}

.block-press__track-wrap {
  width: 100%;
  overflow: hidden;
  /* Fondu en degrade sur les bords gauche/droit, comme sur la maquette :
     le contenu semble apparaitre/disparaitre plutot que d'etre coupe net. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.block-press__track {
  display: flex;
  width: max-content;
  animation: block-press-scroll 46s linear infinite;
}

/* Au survol, on marque une pause pour laisser le temps de lire un logo. */
.block-press__track-wrap:hover .block-press__track {
  animation-play-state: paused;
}

.block-press__list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 96px;
  padding: 0 32px;
  margin: 0;
  flex-shrink: 0;
}

.block-press__list img {
  display: block;
  height: 52px;
  width: auto;
}

/* Le logo Deutsche Welle fourni n'est que le pictogramme rond : on lui
   accole le nom en texte pour rester lisible/identifiable, comme sur la
   maquette envoyee (pictogramme + "Deutsche Welle"). */
.block-press__dw {
  display: flex;
  align-items: center;
  gap: 10px;
}

.block-press__dw img {
  height: 44px;
}

.block-press__dw span {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1.3rem;
  color: #0a2d59; /* calee sur le bleu du pictogramme DW */
  white-space: nowrap;
}

/* Le logo Financial Times est un mot-symbole tres large et bas : cale sur
   la meme hauteur que les autres, il ecraserait toute la rangee. On reduit
   sa hauteur pour que sa largeur reste comparable aux autres logos. */
.block-press__ft img {
  height: 31px;
}

@keyframes block-press-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Les 4 listes dupliquees font chacune un quart de la largeur totale
       (marge large pour rester sans coupure meme sur tres grand ecran) :
       translater d'un quart ramene exactement au point de depart visuel,
       ce qui cree une boucle infinie sans a-coup. */
    transform: translateX(-25%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .block-press__track {
    animation: none;
  }
}

@media (max-width: 760px) {
  .block-press {
    padding: 0 0 40px;
  }

  .block-press__list {
    gap: 64px;
    padding: 0 22px;
  }

  .block-press__list img {
    height: 38px;
  }

  .block-press__dw img {
    height: 32px;
  }

  .block-press__dw span {
    font-size: 1.05rem;
  }

  .block-press__ft img {
    height: 22px;
  }
}

@media (max-width: 700px) {
  .block-values {
    padding: 16px 0 40px;
  }

  .block-values--page {
    /* Meme distance navbar/premier mot que sur les autres pages en mobile. */
    padding-top: 40px;
  }

  .block-values__inner {
    max-width: none;
  }

  .block-values__intro {
    margin-bottom: 48px;
  }

  .block-values__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }

  .block-values__item {
    padding: 0;
  }

  .block-values__item:not(:last-child) {
    padding-bottom: 32px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .block-values__item:last-child {
    padding-bottom: 0;
  }

  .block-approche__inner {
    max-width: none;
  }

  .block-approche__toggle {
    padding: 20px 0;
    gap: 14px;
  }

  .block-approche__text {
    padding: 0 0 20px 32px;
  }

  .block-approche__note {
    margin-top: 36px;
  }
}

/* ==========================================================================
   Bloc "Offre de service" (page d'accueil)
   ========================================================================== */

.block-services {
  padding: 24px 0 56px;
  text-align: center;
}

.block-services__inner {
  /* Meme largeur que le bloc photo/texte au-dessus (.block-expertise__content),
     jamais plus large que lui, meme sur tres grand ecran. */
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.block-services__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  color: var(--color-gold);
  margin-bottom: 24px;
}

.block-services__intro {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium, notre equivalent "semi-bold" */
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 640px;
  margin: 0 auto 72px;
}

.block-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: left;
  margin-bottom: 56px;
}

.block-services__item {
  padding: 0 40px;
}

.block-services__item:first-child {
  padding-left: 0;
  border-right: 1px solid var(--color-border);
}

.block-services__item:last-child {
  padding-right: 0;
}

.block-services__number {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  line-height: 1;
  color: var(--color-gold);
  text-align: right;
  margin-bottom: 28px;
}

.block-services__title {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  /* Echelle fluide (meme logique que le header) : plus grand et
     proportionnel a la largeur d'ecran plutot qu'une taille fixe.
     Reduite legerement par rapport a l'ancienne echelle, surtout au
     plafond (grand ecran). */
  font-size: clamp(1.3rem, 0.589rem + 1.111vw, 1.7rem);
  line-height: 1.4;
  color: var(--color-text);
  text-align: center;
}

/* Les 3 lignes du 1er item sont forcees a partir de 1000px : c'est la
   largeur a partir de laquelle la colonne est assez large (compte tenu de
   la taille de police fluide ci-dessus) pour que chaque segment tienne
   reellement sur une seule ligne. En dessous (y compris entre 701 et
   999px, ou les 2 colonnes sont deja cote a cote mais encore etroites), le
   texte reste en un seul flux et retourne a la ligne naturellement : forcer
   ces memes 3 lignes plus tot casserait chaque segment en 2 lignes au lieu
   d'une, ce qui donnerait 5-6 lignes au lieu de 3.
   L'espace entre les <span> dans le HTML fournit l'espace normal entre les
   segments quand ils restent en ligne. */
.block-services__title-line {
  display: inline;
}

@media (min-width: 1000px) {
  .block-services__title-line {
    display: block;
  }
}

.block-services__link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 0.95rem;
  color: var(--color-gold);
  transition: opacity .2s ease;
}

.block-services__link:hover {
  opacity: 0.65;
}

.block-services__arrow {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.block-services__link:hover .block-services__arrow {
  transform: translateX(4px);
}

@media (max-width: 700px) {
  .block-services {
    padding: 16px 0 40px;
  }

  .block-services__inner {
    max-width: none; /* pleine largeur sur mobile, comme le bloc du dessus */
  }

  .block-services__intro {
    margin-bottom: 48px;
  }

  .block-services__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }

  .block-services__item {
    padding: 0;
  }

  .block-services__item:first-child {
    padding: 0 0 32px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .block-services__item:last-child {
    padding: 0;
  }
}

/* ==========================================================================
   Bloc "Offre de service" (page offre-de-service.php) : intro
   ========================================================================== */

.block-offre {
  /* Meme distance entre la navbar et le premier mot du bloc que sur les
     autres pages (voir .block-expertise, .block-values--page,
     .block-references). */
  padding: 56px 0 56px;
  text-align: left;
}

.block-offre__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.25;
  color: var(--color-gold);
  margin-bottom: 24px;
}

.block-offre__subheading {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 760px;
  margin: 0 0 40px;
}

.block-offre__content {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 40px;
  /* Meme logique que .block-bio__content / .block-expertise__content :
     la photo et le texte se terminent toujours a la meme hauteur. */
  align-items: stretch;
  max-width: 90%;
  margin: 0 auto 64px;
}

.block-offre__media {
  margin: 0; /* reset de la marge par defaut du <figure> */
  height: 100%;
}

.block-offre__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-offre__intro-text {
  /* Compense l'espace optique au-dessus des lettres cree par le line-height,
     comme .block-expertise__text. */
  margin-top: -7px;
}

.block-offre__lead {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text);
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: none;
  hyphens: none; /* jamais de coupure de mot avec un tiret */
}

.block-offre__lead + .block-offre__lead {
  margin-top: 20px;
}

.block-offre__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* "stretch" (comportement par defaut) : les 2 colonnes font la hauteur
     de la plus grande d'entre elles, donc le separateur vertical s'etire
     toujours jusqu'au texte le plus long. */
  text-align: left;
}

.block-offre__item {
  padding: 0 64px;
}

.block-offre__item:first-child {
  padding-left: 0;
}

.block-offre__item:last-child {
  padding-right: 0;
}

.block-offre__item:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.block-offre__number {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  line-height: 1;
  color: var(--color-gold);
  text-align: right;
  margin-bottom: 40px;
}

.block-offre__title {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: clamp(1.3rem, 0.589rem + 1.111vw, 1.7rem);
  line-height: 1.4;
  color: var(--color-gold);
  text-align: center;
  margin-bottom: 20px;
}

.block-offre__text {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium, plus lisible que Regular */
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (max-width: 700px) {
  .block-offre {
    /* Meme distance navbar/premier mot que sur les autres pages en mobile. */
    padding-top: 40px;
  }

  .block-offre__subheading {
    margin-bottom: 32px;
  }

  .block-offre__content {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 40px;
  }

  .block-offre__media {
    height: auto;
  }

  .block-offre__media img {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .block-offre__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .block-offre__item {
    padding: 0;
  }

  .block-offre__item:not(:last-child) {
    padding-bottom: 32px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

/* ==========================================================================
   Bloc "Des formats personnalises" (page offre-de-service.php) : intro +
   accordeon. Meme visuel et meme fonctionnement que l'accordeon "Approche"
   de la page valeurs-et-approche.php (voir .block-approche__*).
   ========================================================================== */

.block-formats {
  padding: 56px 0 56px;
  text-align: left;
}

.block-formats__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  color: var(--color-gold);
  margin-bottom: 24px;
}

.block-formats__subheading {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 760px;
  margin: 0 0 48px;
  padding-left: 56px;
}

.block-formats__inner {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.block-formats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border-strong);
}

.block-formats__item {
  border-bottom: 1px solid var(--color-border-strong);
}

.block-formats__toggle {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 18px;
  padding: 28px 0;
  background: none;
  border: none;
  margin: 0;
  font: inherit;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}

.block-formats__arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
  color: var(--color-gold);
  transition: transform .25s ease;
}

.block-formats__item.is-open .block-formats__arrow {
  transform: rotate(90deg);
}

.block-formats__title {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--color-text);
}

.block-formats__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}

.block-formats__item.is-open .block-formats__panel {
  grid-template-rows: 1fr;
}

.block-formats__panel-inner {
  overflow: hidden;
}

.block-formats__lead {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium, plus lisible que Regular */
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-gold);
  max-width: 680px;
  padding: 0 0 20px 36px;
}

.block-formats__bullets {
  list-style: none;
  margin: 0;
  padding: 0 0 28px 36px;
  max-width: 680px;
}

.block-formats__bullets li {
  position: relative;
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium, plus lisible que Regular */
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  padding-left: 18px;
}

.block-formats__bullets li:not(:last-child) {
  margin-bottom: 4px;
}

.block-formats__bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
}

@media (max-width: 700px) {
  .block-formats {
    padding: 40px 0 40px;
  }

  .block-formats__subheading {
    padding-left: 0;
    margin-bottom: 36px;
  }

  .block-formats__inner {
    max-width: none;
  }

  .block-formats__toggle {
    padding: 20px 0;
    gap: 14px;
  }

  .block-formats__lead {
    padding: 0 0 16px 32px;
  }

  .block-formats__bullets {
    padding: 0 0 20px 32px;
  }
}

/* ==========================================================================
   Bloc "References" (page references.php) : simple empilement de logos
   ========================================================================== */

.block-references {
  /* Meme distance entre la navbar et le premier logo que le premier mot des
     autres pages (voir .block-expertise, .block-values--page,
     .block-offre). */
  padding: 56px 0 64px;
}

.block-references__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}

.block-references__list img {
  display: block;
  max-width: 280px;
  max-height: 72px;
  width: auto;
  height: auto;
}

/* Le logo de la Caisse de depot et placement du Quebec est plus fin que les
   autres (ratio tres large) : a taille max identique il paraissait bien
   plus petit visuellement, d'ou cet agrandissement dedie. */
.block-references__list img.block-references__logo--large {
  max-width: 380px;
  max-height: 100px;
}

@media (max-width: 700px) {
  .block-references {
    padding: 40px 0;
  }

  .block-references__list {
    gap: 56px;
  }

  .block-references__list img {
    max-width: 220px;
    max-height: 56px;
  }

  .block-references__list img.block-references__logo--large {
    max-width: 280px;
    max-height: 76px;
  }
}

/* ==========================================================================
   Bloc "Media" (page media.php)
   ========================================================================== */

.block-media {
  /* Meme distance navbar/premier mot que sur les autres pages (voir
     .block-expertise, .block-values--page, .block-offre, .block-references). */
  padding: 56px 0 56px;
  text-align: left;
}

.block-media__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.25;
  color: var(--color-gold);
  margin-bottom: 24px;
}

.block-media__text {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 900px;
}

.block-media__text + .block-media__text {
  margin-top: 16px;
}

.block-media__press {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 140px;
}

.block-media__press-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.block-media__press-item img {
  display: block;
  width: 190px;
  height: 62px;
  object-fit: contain;
  object-position: center;
}

/* Le logo "Le Grand Continent" est un long bandeau tres fin (ratio ~7,9:1) :
   dans la boite standard 190x62 en object-fit:contain, il se retrouve
   beaucoup plus petit visuellement que Le Monde / Les Echos / Telos.
   On lui donne une boite plus large pour qu'il ressorte avec un poids
   visuel comparable aux autres logos. */
.block-media__press-item img.block-media__press-logo--grand-continent {
  width: 300px;
}

.block-media__press-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 0.95rem;
  color: var(--color-text);
  transition: opacity .2s ease;
}

.block-media__press-link:hover {
  opacity: 0.65;
}

.block-media__press-arrow {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.block-media__press-link:hover .block-media__press-arrow {
  transform: translateX(4px);
}

@media (max-width: 700px) {
  .block-media {
    padding-top: 40px;
  }

  .block-media__press {
    flex-direction: column;
    align-items: center;
    gap: 64px;
    margin-top: 40px;
  }

  .block-media__press-item img {
    width: 160px;
    height: 52px;
    object-fit: contain;
    object-position: center;
  }
}


/* ==========================================================================
   Bloc "Publication" (tribunes) : affiche sur media.php, juste en
   dessous du bloc presse (deplace depuis publication.php)
   ========================================================================== */

.block-publication {
  /* Meme distance navbar/premier mot que sur les autres pages. */
  padding: 56px 0 56px;
  text-align: left;
}

.block-publication__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.25;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.block-publication__intro {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1.05rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.block-publication__empty {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-top: 32px;
}

.block-publication__list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  /* Liste centree dans le bloc sur grand ecran (le titre "Publication"
     reste lui a gauche, aligne sur le reste du site). */
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.block-publication__item {
  padding: 40px 0;
  border-top: 1px solid var(--color-border);
}

.block-publication__item:first-child {
  padding-top: 0;
  border-top: none;
}

.block-publication__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.block-publication__logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  object-position: left center;
}

.block-publication__source {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
}

.block-publication__sep {
  color: var(--color-border-strong);
  font-size: 0.75rem;
}

.block-publication__date {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.block-publication__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.35;
  color: var(--color-text);
  max-width: 820px;
  margin-bottom: 10px;
}

.block-publication__note {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  max-width: 820px;
  margin-bottom: 10px;
}

.block-publication__excerpt {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 820px;
  margin-bottom: 20px;
}

.block-publication__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
  transition: opacity .2s ease;
}

.block-publication__link:hover {
  opacity: 0.65;
}

.block-publication__arrow {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.block-publication__link:hover .block-publication__arrow {
  transform: translateX(4px);
}

@media (max-width: 700px) {
  .block-publication {
    padding-top: 40px;
  }

  .block-publication__list {
    margin-top: 24px;
  }

  .block-publication__item {
    padding: 28px 0;
  }

  .block-publication__logo {
    height: 22px;
    max-width: 120px;
  }

  .block-publication__title {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   Bloc "Books" (page publication.php) : ouvrages publies
   ========================================================================== */

.block-books {
  /* Meme distance navbar/premier mot que sur les autres pages. */
  padding: 56px 0 56px;
  text-align: left;
}

.block-books__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.25;
  color: var(--color-gold);
  margin-bottom: 24px;
}

.block-books__intro {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 900px;
}

.block-books__subheading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.25;
  color: var(--color-gold);
  margin-top: 40px;
}

/* "01 / 02 / 03" devant "Ouvrages" / "Rapports" / "Articles / Policy paper" :
   meme logique que les numeros des blocs "Offre de service" / "Valeurs et
   approche" (serif italique, doré), mais affiches en ligne devant le titre
   plutot qu'au-dessus, puisqu'il s'agit ici de titres de section simples. */
.block-publication__num {
  font-style: italic;
  margin-right: 10px;
}

.block-books__empty {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-top: 32px;
}

.block-books__grid {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  text-align: center;
}

.block-books__grid--featured + .block-books__grid--secondary {
  margin-top: 64px;
}

.block-books__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.block-books__cover {
  display: flex;
  align-items: flex-end;
  margin-bottom: 24px;
}

.block-books__cover img {
  display: block;
  width: auto;
  max-width: 100%;
  box-shadow: 0 4px 18px rgba(6, 16, 41, 0.12);
}

.block-books__caption {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 300px;
}

.block-books__caption em {
  font-style: italic;
}

/* Grille "mise en avant" : 2 colonnes, couvertures plus grandes. */
.block-books__grid--featured {
  grid-template-columns: 1fr 1fr;
}

.block-books__grid--featured .block-books__cover img {
  height: 280px;
}

/* Grille "secondaire" : 3 colonnes, couvertures plus petites. */
.block-books__grid--secondary {
  grid-template-columns: repeat(3, 1fr);
  row-gap: 48px;
}

.block-books__grid--secondary .block-books__cover img {
  height: 200px;
}

/* Separateurs verticaux entre colonnes (a partir de 701px : voir
   .block-services__item pour le meme principe applique a un nombre
   fixe d'elements ; ici on utilise nth-child pour que le trait
   reste correctement place meme si de nouveaux livres sont ajoutes
   depuis l'admin et font retomber les elements sur plusieurs lignes). */
@media (min-width: 701px) {
  .block-books__item {
    padding: 0 32px;
  }

  .block-books__grid--featured .block-books__item:nth-child(2n+1) {
    padding-left: 0;
    border-right: 1px solid var(--color-border);
  }

  .block-books__grid--featured .block-books__item:nth-child(2n) {
    padding-right: 0;
  }

  .block-books__grid--secondary .block-books__item:nth-child(3n+1) {
    padding-left: 0;
    border-right: 1px solid var(--color-border);
  }

  .block-books__grid--secondary .block-books__item:nth-child(3n+2) {
    border-right: 1px solid var(--color-border);
  }

  .block-books__grid--secondary .block-books__item:nth-child(3n) {
    padding-right: 0;
  }
}

@media (max-width: 700px) {
  .block-books {
    padding-top: 40px;
  }

  .block-books__subheading {
    margin-top: 32px;
  }

  .block-books__grid {
    grid-template-columns: 1fr !important;
    row-gap: 40px;
    margin-top: 40px;
  }

  .block-books__grid--featured + .block-books__grid--secondary {
    margin-top: 40px;
  }

  .block-books__item {
    padding: 0 0 40px;
    border-bottom: 1px solid var(--color-border);
  }

  .block-books__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .block-books__grid--featured .block-books__cover img {
    height: 220px;
  }

  .block-books__grid--secondary .block-books__cover img {
    height: 170px;
  }
}

/* ==========================================================================
   Bloc "Reports" (page publication.php, juste en dessous du bloc
   "Books") : rapports publies, toujours ranges 2 par ligne.
   ========================================================================== */

.block-reports {
  padding: 56px 0 56px;
  text-align: left;
}

.block-reports__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.25;
  color: var(--color-gold);
  margin-bottom: 24px;
}

.block-reports__empty {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text-muted);
}

.block-reports__grid {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 48px;
  text-align: center;
}

.block-reports__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.block-reports__cover {
  display: flex;
  align-items: flex-end;
  margin-bottom: 24px;
}

.block-reports__cover img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 260px;
  box-shadow: 0 4px 18px rgba(6, 16, 41, 0.12);
}

.block-reports__caption {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 320px;
}

.block-reports__caption em {
  font-style: italic;
}

@media (min-width: 701px) {
  .block-reports__item {
    padding: 0 32px;
  }

  .block-reports__item:nth-child(2n+1) {
    padding-left: 0;
    border-right: 1px solid var(--color-border);
  }

  .block-reports__item:nth-child(2n) {
    padding-right: 0;
  }
}

@media (max-width: 700px) {
  .block-reports {
    padding-top: 40px;
  }

  .block-reports__grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
    margin-top: 40px;
  }

  .block-reports__item {
    padding: 0 0 40px;
    border-bottom: 1px solid var(--color-border);
  }

  .block-reports__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .block-reports__cover img {
    height: 200px;
  }
}

.block-articles {
  padding: 56px 0 56px;
  text-align: left;
}

.block-articles__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.25;
  color: var(--color-gold);
  margin-bottom: 24px;
}

.block-articles__text {
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 900px;
}

.block-articles__text + .block-articles__text {
  margin-top: 16px;
}

.block-articles__logos {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 150px;
}

.block-articles__logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.block-articles__logo-img {
  display: block;
  width: auto;
}

/* Les deux logos n'ont pas la meme forme (le premier est un pictogramme
   carre, le second un bandeau large) : on les cale sur des hauteurs
   differentes plutot que sur une boite commune, pour qu'ils occupent au
   final une place visuelle equivalente plutot que le pictogramme carre
   paraisse minuscule a cote du bandeau large. */
/* Les deux logos ont maintenant un ratio proche (le fichier Montaigne a
   ete recadre au plus pres de son contenu reel, qui etait auparavant
   noye dans une grosse marge blanche) : une hauteur commune suffit a les
   equilibrer visuellement. */
.block-articles__logo-img--square,
.block-articles__logo-img--wide {
  height: 108px;
}

.block-articles__logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 500; /* General Sans Medium */
  font-size: 0.95rem;
  color: var(--color-text);
  transition: opacity .2s ease;
}

.block-articles__logo-link:hover {
  opacity: 0.65;
}

.block-articles__logo-arrow {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.block-articles__logo-link:hover .block-articles__logo-arrow {
  transform: translateX(4px);
}

@media (max-width: 700px) {
  .block-articles {
    padding-top: 40px;
  }

  .block-articles__logos {
    flex-direction: column;
    align-items: center;
    gap: 64px;
    margin-top: 32px;
  }

  .block-articles__logo-img--square,
  .block-articles__logo-img--wide {
    height: 84px;
  }
}