/*
Theme Name: Madame S
Theme URI: https://leblogdemadames.com
Author: Refonte leblogdemadames.com
Author URI: https://leblogdemadames.com
Description: Thème du blog de Madame S. Intégration directe du prototype validé (structure, composants et styles) ; les contenus des pages sont administrables depuis Pages > Modifier.
Version: 0.1.52
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: madame-s
Tags: blog, custom-colors, custom-menu, editor-style, translation-ready
*/

/*
 * ---------------------------------------------------------------------------
 * À PARTIR D'ICI : feuille de styles du prototype validé, reprise SANS
 * MODIFICATION de `madame-s-prototype-site-v1/assets/css/madame-s.css`.
 *
 * Aucune règle n'a été ajoutée, retirée ni renommée : la feuille ne contient
 * aucune référence à un fichier externe (aucun `url()`, aucun `@import`), elle
 * est donc directement utilisable comme `style.css` de thème.
 *
 * Les éventuelles corrections d'intégration WordPress doivent être ajoutées
 * À LA FIN du fichier, dans une section « intégration WordPress » clairement
 * séparée, afin que la comparaison avec le prototype reste possible.
 * ---------------------------------------------------------------------------
 */
/* =====================================================================
   Le blog de Madame S — styles partagés du prototype
   Base visuelle : madame-s-homepage-v9.html (palette du bandeau,
   titres serif, grands aplats, contraste clair / bleu pétrole).
   Thème unique et assumé (identité de marque) : pas de mode sombre.
   Correspondance WordPress : ce fichier deviendra style.css du thème.
   ===================================================================== */

/* Composition : grille 12 colonnes large (max 1600 px), mesure de lecture
   séparée (~68 caractères), sections en aplats pleine largeur. */
:root {
  /* Palette issue du bandeau original */
  --ms-turquoise: #03A2A9;
  --ms-turquoise-fonce: #027F86;   /* fond du hero : texte blanc lisible */
  --ms-moutarde: #D2A536;
  --ms-rose: #D55F74;
  --ms-corail: #DA3A57;
  --ms-petrole: #00485A;
  --ms-nuit: #001F28;

  /* Neutres chauds, légèrement tirés vers la palette */
  --ms-papier: #FAF8F5;
  --ms-argile: #F2EDE4;
  --ms-blanc: #FFFFFF;
  --ms-encre: #1B1C1A;
  --ms-texte: #3F3D38;
  --ms-gris: #67635C;
  --ms-trait: #E0DCD3;
  --ms-trait-fort: #CFC7B9;
  --ms-beurre: #F9DC8A;            /* accents de texte sur fonds sombres */
  --ms-glace: #B5DFE8;             /* liens sur le pied de page */

  /* Typographie */
  --ms-serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --ms-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --ms-t-hero: clamp(2.9rem, 6vw, 6.4rem);
  --ms-t-h1: clamp(2.5rem, 4.6vw, 4.6rem);
  --ms-t-h2: clamp(2.2rem, 3.6vw, 3.6rem);
  --ms-t-h3: clamp(1.6rem, 2.2vw, 2.25rem);
  --ms-t-h4: clamp(1.3rem, 1.6vw, 1.6rem);
  --ms-t-lead: clamp(1.25rem, 1.7vw, 1.6rem);
  --ms-t-corps: 1.1875rem;          /* 19 px, serif */
  --ms-t-ui: 0.8125rem;             /* 13 px, sans */
  --ms-t-label: 0.71875rem;         /* 11.5 px, capitales */

  /* Espacements et largeurs */
  --ms-gouttiere: clamp(16px, 3.3vw, 48px);
  --ms-max: 1600px;
  --ms-mesure: 42rem;
  --ms-section: clamp(56px, 7vw, 112px);
  --ms-gap: clamp(24px, 3vw, 56px);
  --ms-rayon: 2px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ms-papier);
  color: var(--ms-encre);
  font-family: var(--ms-sans);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before {               /* bande de zone sûre au-dessus de l'en-tête collant */
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ms-papier);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--ms-turquoise); color: var(--ms-blanc); }
:focus-visible { outline: 2px solid var(--ms-corail); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--ms-serif); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
.ms-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms-skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ms-nuit); color: var(--ms-blanc); padding: 10px 14px;
  font: 700 var(--ms-t-ui) / 1 var(--ms-sans); text-decoration: none;
}
.ms-skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- conteneur ---------- */
.ms-wrap {
  width: 100%; max-width: var(--ms-max); margin-inline: auto;
  padding-left: max(var(--ms-gouttiere), env(safe-area-inset-left, 0px));
  padding-right: max(var(--ms-gouttiere), env(safe-area-inset-right, 0px));
}
.ms-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ms-gap); }
.ms-grid > * { min-width: 0; }

/* ---------- bandeau multicolore (signature) ---------- */
.ms-strip { display: grid; grid-template-columns: repeat(4, 1fr); height: 6px; }
.ms-strip--fin { height: 3px; }
.ms-strip span:nth-child(1) { background: var(--ms-turquoise); }
.ms-strip span:nth-child(2) { background: var(--ms-moutarde); }
.ms-strip span:nth-child(3) { background: var(--ms-rose); }
.ms-strip span:nth-child(4) { background: var(--ms-corail); }

/* ---------- typographie partagée ---------- */
.ms-label {
  font: 700 var(--ms-t-label) / 1.3 var(--ms-sans);
  letter-spacing: 0.2em; text-transform: uppercase;
}
.ms-date { font: 600 var(--ms-t-label) / 1.3 var(--ms-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ms-corail); }
.ms-copy { font-family: var(--ms-serif); font-size: var(--ms-t-corps); line-height: 1.62; color: var(--ms-texte); max-width: var(--ms-mesure); }
.ms-copy + .ms-copy { margin-top: 1em; }
.ms-h2 { font-size: var(--ms-t-h2); line-height: 1; font-weight: 500; letter-spacing: -0.03em; color: var(--ms-petrole); }
.ms-h3 { font-size: var(--ms-t-h3); line-height: 1.06; color: var(--ms-petrole); }

/* ---------- liens et boutons ---------- */
.ms-link {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 var(--ms-t-label) / 1.2 var(--ms-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ms-petrole); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
  transition: color .2s ease;
}
.ms-link:hover { color: var(--ms-corail); }
.ms-link::after { content: "→"; font-size: 1.15em; letter-spacing: 0; transition: transform .2s ease; }
.ms-link:hover::after { transform: translateX(3px); }

.ms-button {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 22px; border: 1px solid var(--ms-petrole); border-radius: var(--ms-rayon);
  background: var(--ms-petrole); color: var(--ms-blanc);
  font: 800 var(--ms-t-label) / 1 var(--ms-sans); letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ms-button::after { content: "→"; font-size: 1.2em; letter-spacing: 0; }
.ms-button:hover { background: var(--ms-corail); border-color: var(--ms-corail); }
.ms-button--clair { background: transparent; border-color: var(--ms-blanc); color: var(--ms-blanc); }
.ms-button--clair:hover { background: var(--ms-blanc); border-color: var(--ms-blanc); color: var(--ms-petrole); }

/* ---------- médias et emplacements neutres ---------- */
.ms-media { position: relative; background: var(--ms-argile); overflow: hidden; }
.ms-media img { width: 100%; height: 100%; object-fit: cover; }
.ms-media--16x9 { aspect-ratio: 16 / 9; }
.ms-media--4x3 { aspect-ratio: 4 / 3; }
/* Emplacement de prototype : affiché quand un média source ne se charge pas
   ou n'est pas encore disponible. Ce n'est jamais un contenu réel. */
.ms-ph {
  width: 100%; height: 100%; min-height: 160px;
  display: grid; place-content: center; gap: 6px; padding: 20px; text-align: center;
  background: var(--ms-argile);
  border: 1px dashed var(--ms-trait-fort); color: var(--ms-gris);
  font: 600 var(--ms-t-ui) / 1.35 var(--ms-sans);
}
.ms-ph strong { font: 800 var(--ms-t-label) / 1.2 var(--ms-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ms-petrole); }
.ms-ph code { font-family: ui-monospace, Consolas, monospace; font-size: 0.75rem; word-break: break-all; }

/* =====================================================================
   EN-TÊTE  (WordPress : header.php)
   ===================================================================== */
.ms-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--ms-papier); border-bottom: 1px solid var(--ms-trait);
}
.ms-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.ms-brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ms-petrole); flex-shrink: 0; }
.ms-brand__mono {
  height: 38px; padding: 0 12px; display: inline-flex; align-items: center;
  border: 1px solid rgba(27, 28, 26, .45); background: var(--ms-blanc);
  font: 800 0.72rem / 1 var(--ms-sans); letter-spacing: 0.24em; color: var(--ms-encre);
  text-transform: uppercase; white-space: nowrap;
  transition: border-color .2s ease;
}
.ms-brand__mono b { color: var(--ms-rose); font-weight: 800; }
.ms-brand:hover .ms-brand__mono { border-color: var(--ms-turquoise); }
.ms-brand__nom { font: 600 clamp(1.35rem, 2vw, 1.8rem) / 1 var(--ms-serif); letter-spacing: -0.02em; }

/* Bandeau image au-dessus du menu — ACCUEIL UNIQUEMENT (lot 62).
   Rendu seulement lorsqu'une image est choisie : aucune zone vide sinon.
   L'image n'est ni étirée ni rognée (hauteur déduite de ses proportions) ;
   le bandeau reste dans le flux : il n'est jamais fixé en haut de l'écran. */
.ms-bandeau-accueil { background: var(--ms-papier); }
.ms-bandeau-accueil__img { display: block; width: 100%; height: auto; }

.ms-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 1.5vw, 26px); }
.ms-nav a {
  display: block; padding: 6px 0; text-decoration: none; white-space: nowrap;
  font: 700 0.75rem / 1.2 var(--ms-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ms-encre);
  border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.ms-nav a:hover { color: var(--ms-turquoise-fonce); border-color: var(--ms-turquoise); }
.ms-nav a[aria-current="page"],
.ms-nav .current_page_parent > a,
.ms-nav .current-menu-item > a { color: var(--ms-turquoise-fonce); border-color: var(--ms-turquoise); }

.ms-social { display: flex; gap: 8px; flex-shrink: 0; }
.ms-social a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--ms-trait-fort); background: var(--ms-blanc); color: var(--ms-petrole);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ms-social svg { width: 15px; height: 15px; fill: currentColor; }
.ms-social a:hover { background: var(--ms-petrole); border-color: var(--ms-petrole); color: var(--ms-blanc); }

/* Bouton du menu mobile (lot 63) : trois barres seules, discrètes, en pétrole.
   Ni mot « MENU » visible, ni cadre, ni fond. La zone tactile reste confortable
   (44 x 44 px) et le nom accessible vient d'un texte masqué (.ms-sr). */
.ms-burger {
  display: none; align-items: center; justify-content: center; gap: 0;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 0; background: none; color: var(--ms-petrole); cursor: pointer;
}
.ms-burger__icone { width: 20px; height: 13px; display: grid; align-content: space-between; }
.ms-burger__icone span { height: 2px; background: currentColor; }

@media (max-width: 1400px) {
  .ms-burger { display: inline-flex; }
  .ms-header .ms-social { display: none; }
  .ms-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ms-papier); border-bottom: 1px solid var(--ms-trait);
    padding-block: 8px 24px;
    padding-left: max(var(--ms-gouttiere), env(safe-area-inset-left, 0px));
    padding-right: max(var(--ms-gouttiere), env(safe-area-inset-right, 0px));
  }
  .ms-nav[data-ouvert="false"] { display: none; }
  .ms-nav ul { flex-direction: column; gap: 0; }
  .ms-nav a { padding: 14px 0; font-size: 0.875rem; border-bottom: 1px solid var(--ms-trait); }
  .ms-nav a[aria-current="page"],
  .ms-nav .current_page_parent > a,
  .ms-nav .current-menu-item > a { border-color: var(--ms-trait); box-shadow: inset 3px 0 0 var(--ms-turquoise); padding-left: 12px; }
  .ms-nav .ms-social--nav { display: flex; margin-top: 18px; }
}
@media (min-width: 1401px) { .ms-social--nav { display: none; } }
@media (max-width: 520px) {
  /* L'identité encadrée reste affichée sur mobile : elle est seulement resserrée
     pour tenir à côté du bouton « Menu », sans collision ni débordement. */
  .ms-brand__nom { font-size: 1.2rem; }
  .ms-brand__mono { font-size: 0.66rem; letter-spacing: 0.18em; padding: 0 9px; height: 34px; }
}

/* =====================================================================
   ACCUEIL  (WordPress : front-page.php)
   ===================================================================== */

/* --- Hero : fond blanc uni (lot 62, 2026-11-03) ----------------------------
   Demande de la cliente : remplacer le fond de la hero par du blanc pur.
   Le dégradé gris et le halo (dégradé radial) sont retirés : plus aucun effet de
   fond. Les deux tracés décoratifs SVG (moutarde et rose) sont CONSERVÉS, ainsi
   que la mise en forme des textes, la citation et la couverture choisie. */
.ms-hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--ms-petrole);
  background: #ffffff;
}
.ms-hero__ligne { position: absolute; pointer-events: none; z-index: 0; display: none; }
.ms-hero__ligne--moutarde { top: -40px; right: -30px; width: 430px; height: 330px; }
.ms-hero__ligne--rose { bottom: -140px; left: -10px; width: 760px; height: 170px; }
/* Fenêtres basses (zoom fort, petits écrans d'ordinateur) : la ligne rose
   affleure moins, pour ne jamais croiser la citation. */
@media (min-width: 981px) and (max-height: 700px) {
  .ms-hero__ligne--rose { bottom: -160px; }
}
@media (min-width: 1024px) { .ms-hero__ligne { display: block; } }
.ms-hero__grid { position: relative; z-index: 1; align-items: center; }
.ms-hero__texte { grid-column: 1 / span 7; padding-block: clamp(64px, 8vw, 128px); padding-left: clamp(0px, 2.5vw, 40px); }
.ms-hero h1 { font-size: clamp(3.45rem, 6vw, 6.9rem); line-height: .92; font-weight: 500; letter-spacing: -.035em; color: var(--ms-petrole); max-width: 860px; }
.ms-hero__intro { margin-top: clamp(12px, 1.6vh, 20px); font: 400 clamp(0.9375rem, 1.05vw, 1.0625rem) / 1.45 var(--ms-sans); color: var(--ms-texte); max-width: 900px; }
.ms-hero__intro p + p { margin-top: .6em; }
.ms-hero__intro a { color: var(--ms-petrole); text-decoration-color: var(--ms-turquoise); text-underline-offset: 3px; }
.ms-hero__intro a:hover { color: var(--ms-corail); }
.ms-hero__intro a:focus-visible { outline: 2px solid var(--ms-corail); outline-offset: 2px; }
.ms-hero__citation { margin: clamp(12px, 1.6vh, 18px) 0 0; font: italic 400 clamp(0.95rem, min(1.2vw, 1.9vh), 1.15rem) / 1.4 var(--ms-serif); color: var(--ms-petrole); max-width: 900px; }
.ms-hero__livre { grid-column: 8 / span 5; position: relative; display: flex; align-items: center; justify-content: center; min-height: 430px; }
.ms-hero__cercle { position: absolute; left: 8%; top: 21%; width: 360px; height: 360px; border-radius: 50%; border: 1px solid rgba(0, 72, 90, .14); }
.ms-hero__couverture { position: relative; z-index: 1; width: min(92%, 500px); margin: 0; }
.ms-hero__couverture img { width: 100%; height: auto; filter: drop-shadow(0 28px 34px rgba(0, 31, 40, .28)); }
.ms-hero__couverture .ms-ph { min-height: 420px; }


@media (max-width: 980px) {
  .ms-hero__texte, .ms-hero__livre { grid-column: 1 / -1; }
  /* Hero mobile (lot 63) : le titre est plus petit et plus proche de la navbar.
     Seuls les espacements et la taille du titre changent : le texte courant, la
     citation et la couverture restent identiques. */
  .ms-hero__texte { padding-block: 26px 0; padding-left: 0; }
  .ms-hero h1 { font-size: clamp(1.9rem, 9.2vw, 3.2rem); line-height: 1.1; letter-spacing: -.03em; }
  .ms-hero__intro { margin-top: 10px; }
  .ms-hero__livre { padding-block: 24px 64px; }
  .ms-hero__couverture { width: min(72%, 380px); }
  .ms-hero__cercle { width: 250px; height: 250px; }
}

/* --- Article à la une --- */
.ms-une { background: var(--ms-papier); padding-block: var(--ms-section); border-bottom: 1px solid var(--ms-trait); }
.ms-une__titre-section { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid rgba(0, 72, 90, .22); margin-bottom: clamp(28px, 3.5vw, 48px); }
.ms-une__titre-section .ms-label { color: var(--ms-petrole); }
.ms-une__image { grid-column: 1 / span 7; }
.ms-une__image .ms-media { aspect-ratio: 16 / 10; }
.ms-une__texte { grid-column: 8 / span 5; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.ms-une__texte h2 { font-size: clamp(2.1rem, 3.4vw, 3.5rem); line-height: 0.98; letter-spacing: -0.03em; color: var(--ms-petrole); }
.ms-une__texte h2 a { text-decoration: none; }
.ms-une__texte h2 a:hover { color: var(--ms-corail); }
.ms-une__filet { width: 64px; height: 3px; background: var(--ms-moutarde); }
@media (max-width: 980px) {
  .ms-une__image, .ms-une__texte { grid-column: 1 / -1; }
}

/* --- Enquête + auteure --- */
.ms-enquete { background: var(--ms-blanc); padding-block: var(--ms-section); border-bottom: 1px solid var(--ms-trait); }
.ms-enquete__principal { grid-column: 1 / span 8; padding-right: clamp(0px, 3vw, 48px); border-right: 1px solid var(--ms-trait); }
.ms-enquete__principal .ms-h3 { font-size: clamp(2rem, 3vw, 3rem); max-width: 18ch; margin: 16px 0 28px; }
.ms-enquete__principal .ms-label { color: var(--ms-rose); }
.ms-enquete__principal .ms-copy strong { font-weight: 600; color: var(--ms-petrole); }
.ms-enquete__principal .ms-actions { margin-top: 36px; }
.ms-auteure { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 18px; align-self: start; }
.ms-auteure .ms-label { color: var(--ms-corail); }
.ms-auteure h3 { font-size: var(--ms-t-h3); line-height: 1.04; color: var(--ms-petrole); }
.ms-auteure h3 a { text-decoration: none; }
.ms-auteure h3 a:hover { color: var(--ms-corail); }
.ms-auteure__sous { font: italic 500 1.35rem / 1.2 var(--ms-serif); color: var(--ms-rose); }
.ms-auteure .ms-copy { font-size: 1.0625rem; line-height: 1.6; }
@media (max-width: 980px) {
  .ms-enquete__principal, .ms-auteure { grid-column: 1 / -1; }
  .ms-enquete__principal { border-right: 0; padding-right: 0; padding-bottom: 40px; border-bottom: 1px solid var(--ms-trait); }
}

/* --- Le livre : aplat moutarde --- */
.ms-livre { background: var(--ms-moutarde); color: var(--ms-encre); padding-block: clamp(48px, 6vw, 88px); }
.ms-livre__couverture { grid-column: 1 / span 3; }
.ms-livre__couverture .ms-media { background: var(--ms-papier); padding: 10px; }
.ms-livre__couverture .ms-ph { min-height: 300px; }
.ms-livre__texte { grid-column: 4 / span 6; display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.ms-livre__texte .ms-label { color: var(--ms-nuit); }
.ms-livre__texte h2 { font-size: var(--ms-t-h2); line-height: 1; font-weight: 500; letter-spacing: -0.03em; color: var(--ms-nuit); }
.ms-livre__texte .ms-copy { color: var(--ms-nuit); }
.ms-livre__achat { grid-column: 10 / span 3; align-self: center; display: flex; flex-direction: column; gap: 14px; padding-left: clamp(0px, 2vw, 32px); border-left: 1px solid rgba(0, 31, 40, .28); }
.ms-livre__achat .ms-label { color: var(--ms-nuit); }
.ms-livre__achat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ms-livre__achat li a {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(0, 31, 40, .22);
  font: 600 0.95rem / 1.3 var(--ms-sans); color: var(--ms-nuit); text-decoration: none;
}
.ms-livre__achat li a::after { content: "↗"; }
.ms-livre__achat li a:hover { color: var(--ms-blanc); }
.ms-livre .ms-button { background: var(--ms-nuit); border-color: var(--ms-nuit); align-self: flex-start; }
.ms-livre .ms-button:hover { background: var(--ms-corail); border-color: var(--ms-corail); }
@media (max-width: 1100px) {
  .ms-livre__couverture { grid-column: 1 / span 4; }
  .ms-livre__texte { grid-column: 5 / span 8; }
  .ms-livre__achat { grid-column: 5 / span 8; border-left: 0; padding-left: 0; }
}
@media (max-width: 700px) {
  .ms-livre__couverture { grid-column: 1 / -1; max-width: 240px; }
  .ms-livre__texte, .ms-livre__achat { grid-column: 1 / -1; }
}

/* --- Confinettes --- */
.ms-confinettes { background: var(--ms-papier); padding-block: var(--ms-section); border-bottom: 1px solid var(--ms-trait); }
.ms-section-tete { align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--ms-trait); margin-bottom: clamp(32px, 4vw, 56px); }
.ms-section-tete__titre { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 14px; }
.ms-section-tete__intro { grid-column: 6 / span 7; }
.ms-section-tete__intro .ms-copy { font-style: italic; max-width: 48rem; }
.ms-confinettes .ms-section-tete .ms-label { color: var(--ms-turquoise-fonce); }
.ms-video { display: flex; flex-direction: column; gap: 18px; }
.ms-video__vignette { position: relative; display: block; text-decoration: none; }
.ms-video__vignette .ms-media { aspect-ratio: 16 / 9; }
.ms-video__lecture {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--ms-corail); color: var(--ms-blanc);
  font: 800 var(--ms-t-label) / 1 var(--ms-sans); letter-spacing: 0.15em; text-transform: uppercase;
}
.ms-video__lecture::before { content: ""; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ms-video__vignette:hover .ms-video__lecture { background: var(--ms-petrole); }
.ms-video h3 { font-size: var(--ms-t-h4); line-height: 1.1; color: var(--ms-encre); }
.ms-video--une { grid-column: 1 / span 8; }
.ms-video--une h3 { font-size: var(--ms-t-h3); }
.ms-confinettes__liste { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 32px; padding-left: clamp(0px, 2vw, 32px); border-left: 1px solid var(--ms-trait); }
.ms-video--titre { flex-direction: row; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--ms-trait); }
.ms-video--titre .ms-video__vignette { flex: 0 0 42%; }
.ms-video--titre .ms-video__lecture { padding: 8px 10px; font-size: 0.625rem; }
.ms-video--titre .ms-ph { min-height: 0; padding: 8px; }
.ms-video--titre h3 { font-size: 1.3rem; }
.ms-section-pied { margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--ms-trait); }
@media (max-width: 980px) {
  .ms-section-tete__titre, .ms-section-tete__intro, .ms-video--une, .ms-confinettes__liste { grid-column: 1 / -1; }
  .ms-confinettes__liste { border-left: 0; padding-left: 0; }
}

/* --- Presse : aplat bleu pétrole --- */
.ms-presse { background: var(--ms-petrole); color: var(--ms-blanc); padding-block: var(--ms-section); }
.ms-presse__tete { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 14px; }
.ms-presse__tete .ms-label { color: var(--ms-beurre); }
.ms-presse__tete h2 { font-size: var(--ms-t-h2); line-height: 1; font-weight: 500; letter-spacing: -0.03em; color: var(--ms-papier); }
.ms-presse__corps { grid-column: 5 / span 8; }
.ms-presse__intro { font: italic 400 clamp(1.2rem, 1.5vw, 1.45rem) / 1.5 var(--ms-serif); color: rgba(255, 255, 255, .92); max-width: 46rem; }
.ms-presse__liste { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.ms-presse__item { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 12px 28px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.ms-presse__item .ms-label { color: var(--ms-glace); }
.ms-presse__item h3 { font-size: clamp(1.4rem, 1.8vw, 1.75rem); line-height: 1.15; color: var(--ms-papier); }
.ms-presse__item h3 a { text-decoration: none; }
.ms-presse__item h3 a:hover { color: var(--ms-beurre); }
.ms-presse__source { font: 600 0.8125rem / 1.3 var(--ms-sans); color: rgba(255, 255, 255, .78); text-align: right; }
.ms-presse .ms-button--clair { margin-top: 36px; }
@media (max-width: 980px) {
  .ms-presse__tete, .ms-presse__corps { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ms-presse__item { grid-template-columns: 1fr; }
  .ms-presse__source { text-align: left; }
}

/* =====================================================================
   PIED DE PAGE  (WordPress : footer.php)
   ===================================================================== */
.ms-footer { background: var(--ms-nuit); color: var(--ms-blanc); padding-block: 56px 32px; }
.ms-footer__haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.ms-footer .ms-brand { color: var(--ms-papier); }
.ms-footer .ms-brand__mono { background: var(--ms-petrole); color: var(--ms-blanc); border-color: rgba(3, 162, 169, .5); }
.ms-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ms-footer__nav a { font: 700 0.6875rem / 1.4 var(--ms-sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ms-glace); text-decoration: none; }
.ms-footer__nav a:hover { color: var(--ms-blanc); }
.ms-footer__bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-top: 24px; }
.ms-footer .ms-social a { background: transparent; border-color: rgba(181, 223, 232, .4); color: var(--ms-glace); }
.ms-footer .ms-social a:hover { background: var(--ms-turquoise); border-color: var(--ms-turquoise); color: var(--ms-blanc); }
.ms-footer__note { font: 500 0.75rem / 1.4 var(--ms-sans); color: #8DBEC8; }
.ms-footer .ms-link { color: var(--ms-beurre); }

/* =====================================================================
   PAGES INTÉRIEURES
   ===================================================================== */

/* --- En-tête de page : aplat de couleur (variante par page) --- */
.ms-page-tete { padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 72px); background: var(--ms-petrole); color: var(--ms-papier); }
.ms-page-tete--turquoise { background: var(--ms-turquoise); }
.ms-page-tete--corail { background: var(--ms-corail); }
.ms-page-tete--moutarde { background: var(--ms-moutarde); color: var(--ms-nuit); }
.ms-page-tete--rose { background: var(--ms-rose); }
.ms-page-tete--nuit { background: var(--ms-nuit); }
.ms-page-tete .ms-grid { align-items: end; }
.ms-page-tete__titre { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 16px; }
.ms-page-tete__titre .ms-label { opacity: .85; }
.ms-page-tete h1 { font-size: var(--ms-t-h1); line-height: .96; font-weight: 500; letter-spacing: -.035em; }
.ms-page-tete__intro { grid-column: 8 / span 5; font: italic 400 clamp(1.15rem, 1.4vw, 1.35rem) / 1.5 var(--ms-serif); }
.ms-page-tete__intro p + p { margin-top: .8em; }
@media (max-width: 980px) { .ms-page-tete__titre, .ms-page-tete__intro { grid-column: 1 / -1; } }

.ms-corps { padding-block: var(--ms-section); }
.ms-corps--blanc { background: var(--ms-blanc); }
.ms-fil { font: 600 var(--ms-t-ui) / 1.4 var(--ms-sans); color: inherit; opacity: .85; }
.ms-fil a { color: inherit; }

/* --- Bloc « contenu à raccorder » : emplacement neutre de texte --- */
.ms-a-raccorder {
  border: 1px dashed var(--ms-trait-fort); background: var(--ms-argile); color: var(--ms-gris);
  padding: 18px 20px; font: 600 var(--ms-t-ui) / 1.5 var(--ms-sans); max-width: var(--ms-mesure);
}
.ms-a-raccorder strong { display: block; margin-bottom: 4px; font: 800 var(--ms-t-label) / 1.3 var(--ms-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ms-petrole); }
.ms-a-raccorder code { font-family: ui-monospace, Consolas, monospace; font-size: .75rem; word-break: break-all; }
.ms-titre-ph { display: inline-block; font: 600 1.05rem / 1.3 var(--ms-sans); color: var(--ms-gris); border-bottom: 1px dashed var(--ms-trait-fort); }

/* --- Bandeau de démonstration (formulaires sans service) --- */
.ms-demo {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 24px;
  background: #FFF6DC; border-left: 3px solid var(--ms-moutarde); color: var(--ms-nuit);
  font: 600 var(--ms-t-ui) / 1.45 var(--ms-sans);
}

/* --- Liste d'articles (home.php / archive.php) --- */
.ms-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ms-trait); }
.ms-liste__item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto; gap: 16px clamp(20px, 3vw, 48px); align-items: center; padding-block: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--ms-trait); }
.ms-liste__item .ms-media { aspect-ratio: 16 / 10; display: block; }
.ms-liste__item .ms-ph { min-height: 0; }
.ms-liste__texte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ms-liste__texte h2 { font-size: clamp(1.5rem, 2.2vw, 2.25rem); line-height: 1.06; color: var(--ms-petrole); }
.ms-liste__texte h2 a { text-decoration: none; }
.ms-liste__texte h2 a:hover { color: var(--ms-corail); }
.ms-liste__item--sans-image { grid-template-columns: minmax(0, 11fr) auto; }
.ms-liste__item--une { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-top: 0; }
.ms-liste__item--une .ms-liste__texte h2 { font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: .98; }
.ms-liste__item--une .ms-liste__suite { grid-column: 2; }
.ms-externe { font: 600 .75rem / 1.3 var(--ms-sans); color: var(--ms-gris); }
@media (max-width: 860px) {
  .ms-liste__item, .ms-liste__item--une, .ms-liste__item--sans-image { grid-template-columns: 1fr; }
  .ms-liste__item--une .ms-liste__suite { grid-column: auto; }
}

/* --- Pagination --- */
.ms-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.ms-pagination ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.ms-pagination a, .ms-pagination span[aria-current] {
  min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 12px;
  border: 1px solid var(--ms-trait-fort); text-decoration: none;
  font: 700 .875rem / 1 var(--ms-sans); color: var(--ms-petrole); font-variant-numeric: tabular-nums;
}
.ms-pagination a:hover { border-color: var(--ms-petrole); }
.ms-pagination span[aria-current] { background: var(--ms-petrole); border-color: var(--ms-petrole); color: var(--ms-blanc); }
.ms-pagination__sens { display: flex; gap: 8px; }
.ms-pagination__sens a { font-size: var(--ms-t-label); letter-spacing: .14em; text-transform: uppercase; }

/* =====================================================================
   ARTICLE (single.php) — image en plein écran, corps 3/4, colonne 1/4
   Structure et valeurs du prototype, version 2.
   ===================================================================== */
.ms-article-hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: calc(100vh - var(--ms-chrome) - var(--ms-bandeau-h)); min-height: calc(100svh - var(--ms-chrome) - var(--ms-bandeau-h));
  background: var(--ms-petrole); color: var(--ms-blanc);
}
.ms-article-hero__image { position: absolute; inset: 0; z-index: -2; }
.ms-article-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.ms-article-hero__image .ms-ph {
  position: absolute; inset: 0; border: 0; background: var(--ms-petrole);
  color: rgba(255, 255, 255, .6); place-content: start end; text-align: right;
}
.ms-article-hero__image .ms-ph strong { color: var(--ms-beurre); }
/* Voile : assure la lisibilité de la date et du titre quelle que soit l'image */
.ms-article-hero__voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 31, 40, .15) 0%, rgba(0, 31, 40, .45) 45%, rgba(0, 31, 40, .9) 100%);
}
.ms-article-hero__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-block: clamp(48px, 9vh, 112px); }
.ms-article-hero__rubrique { color: var(--ms-blanc); text-decoration: none; padding: 8px 12px; background: var(--ms-corail); }
.ms-article-hero__rubrique:hover { background: var(--ms-turquoise); }
.ms-article-hero .ms-date { color: var(--ms-beurre); }
.ms-article-hero h1 {
  max-width: 22ch; font-size: clamp(2.3rem, min(5vw, 8vh), 5.4rem); line-height: .98; font-weight: 500;
  letter-spacing: -.035em; color: var(--ms-papier);
}

.ms-article-corps { background: var(--ms-papier); padding-block: var(--ms-section); }
.ms-article-corps .ms-grid { align-items: start; }
.ms-article-corps__texte { grid-column: 1 / span 9; min-width: 0; }
.ms-article-corps__texte .ms-prose { max-width: 46rem; }
.ms-article-corps__texte .ms-voisins { margin-top: clamp(48px, 6vw, 80px); max-width: 46rem; }

.ms-article-lateral { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 40px; }
.ms-lateral-bloc { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: 3px solid var(--ms-petrole); }
.ms-lateral-bloc > .ms-label { color: var(--ms-corail); }
.ms-lateral-bloc--livre { padding: 22px; border-top: 0; background: var(--ms-moutarde); }
.ms-lateral-bloc--livre > .ms-label { color: var(--ms-nuit); }
.ms-lateral-bloc--livre .ms-button { background: var(--ms-nuit); border-color: var(--ms-nuit); align-self: flex-start; }
.ms-lateral-bloc--livre .ms-button:hover { background: var(--ms-corail); border-color: var(--ms-corail); }
.ms-lateral-titre { font: 600 1.4rem / 1.15 var(--ms-serif); color: var(--ms-petrole); letter-spacing: -.01em; }
.ms-lateral-bloc--livre .ms-lateral-titre { color: var(--ms-nuit); font-style: italic; font-weight: 500; }
.ms-lateral-liens { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* Note sur l'usage des images (intelligence artificielle), en dernière position
   du bloc « À lire aussi », sous les cartes des autres articles. Petite et
   discrète, mais dans un contraste lisible (texte gris sur papier). */
.ms-lateral-note {
    margin: 0;
    padding-top: 28px;
    border-top: 1px solid var(--ms-trait);
    font: 400 0.85rem / 1.5 var(--ms-sans);
    color: var(--ms-gris);
    text-align: justify;
}

/* Cartes de la colonne latérale (« À lire aussi ») */
.ms-cartes { display: flex; flex-direction: column; gap: 22px; }
.ms-carte { display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid var(--ms-trait); }
.ms-carte:last-child { border-bottom: 0; padding-bottom: 0; }
.ms-carte .ms-media { display: block; aspect-ratio: 16 / 9; }
.ms-carte .ms-ph { min-height: 0; padding: 8px; }
.ms-carte .ms-ph span, .ms-carte .ms-ph code { display: none; }
.ms-carte h3 { font-size: 1.15rem; line-height: 1.2; letter-spacing: -.01em; color: var(--ms-encre); }
.ms-carte h3 a { text-decoration: none; }
.ms-carte h3 a:hover { color: var(--ms-corail); }

@media (max-width: 1100px) {
  .ms-article-corps__texte { grid-column: 1 / span 8; }
  .ms-article-lateral { grid-column: 9 / span 4; }
}
@media (max-width: 860px) {
  .ms-article-hero { min-height: 72svh; }
  .ms-article-corps__texte, .ms-article-lateral { grid-column: 1 / -1; }
  .ms-article-lateral { margin-top: 24px; }
  .ms-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .ms-carte { border-bottom: 0; padding-bottom: 0; }
}

/* Typographie du contenu WordPress (the_content) : mesure de lecture fixe */
.ms-prose { max-width: var(--ms-mesure); font-family: var(--ms-serif); font-size: 1.25rem; line-height: 1.65; color: var(--ms-texte); }
.ms-prose > * + * { margin-top: 1.1em; }
.ms-prose h2 { margin-top: 2em; font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.08; color: var(--ms-petrole); }
.ms-prose h3 { margin-top: 1.8em; font-size: 1.55rem; line-height: 1.15; color: var(--ms-petrole); }
.ms-prose a { color: var(--ms-petrole); text-decoration-color: var(--ms-turquoise); text-underline-offset: 3px; }
.ms-prose a:hover { color: var(--ms-corail); }
.ms-prose ul, .ms-prose ol { padding-left: 1.3em; }
.ms-prose li + li { margin-top: .4em; }
.ms-prose li::marker { color: var(--ms-corail); }
.ms-prose blockquote { margin-left: 0; margin-right: 0; padding-left: 24px; border-left: 3px solid var(--ms-corail); font-style: italic; color: var(--ms-encre); }
.ms-prose figure { margin-left: 0; margin-right: 0; }
.ms-prose figcaption { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ms-trait); font: italic 400 .95rem / 1.45 var(--ms-serif); color: var(--ms-gris); }
.ms-prose hr { border: 0; height: 1px; background: var(--ms-trait); }
.ms-prose .ms-chapo { font-size: 1.45rem; line-height: 1.5; color: var(--ms-encre); }
.ms-prose .ms-button { color: var(--ms-blanc); text-decoration: none; }
.ms-prose .ms-signature { font: 700 var(--ms-t-label) / 1.3 var(--ms-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ms-petrole); }

/* Articles précédent et suivant (dans la colonne de texte) */
.ms-voisins { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ms-trait); }
.ms-voisins a { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 24px 0; text-decoration: none; border-bottom: 1px solid var(--ms-trait); }
.ms-voisins a + a { padding: 24px 0 24px 24px; border-left: 1px solid var(--ms-trait); text-align: right; }
.ms-voisins strong { font: 600 1.3rem / 1.15 var(--ms-serif); color: var(--ms-petrole); }
.ms-voisins a:hover strong { color: var(--ms-corail); }
.ms-voisins .ms-label { color: var(--ms-gris); }
/* Un seul voisin (article le plus récent ou le plus ancien) : il occupe la ligne. */
.ms-voisins > a:only-child { grid-column: 1 / -1; padding-right: 0; border-left: 0; text-align: left; }
@media (max-width: 560px) {
  .ms-voisins { grid-template-columns: 1fr; }
  .ms-voisins a + a { padding: 24px 0; border-left: 0; text-align: left; }
}



/* --- Formulaires (contact, recherche) --- */
.ms-form { display: grid; gap: 20px; max-width: 760px; }
.ms-form__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .ms-form__ligne { grid-template-columns: 1fr; } }
.ms-champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ms-champ label { font: 700 var(--ms-t-label) / 1.3 var(--ms-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ms-petrole); }
.ms-champ label small { font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--ms-gris); }
.ms-champ input, .ms-champ textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--ms-trait-fort); border-radius: var(--ms-rayon);
  background: var(--ms-blanc); color: var(--ms-encre); font: 400 1.0625rem / 1.5 var(--ms-sans);
}
.ms-champ textarea { min-height: 180px; resize: vertical; }
.ms-champ input:focus, .ms-champ textarea:focus { outline: 2px solid var(--ms-turquoise); outline-offset: 0; border-color: var(--ms-turquoise); }
.ms-champ[data-erreur] input, .ms-champ[data-erreur] textarea { border-color: var(--ms-corail); }
.ms-champ__erreur { font: 600 var(--ms-t-ui) / 1.3 var(--ms-sans); color: #B4233D; }
.ms-form__statut { font: 600 .9375rem / 1.45 var(--ms-sans); padding: 14px 16px; background: var(--ms-argile); border-left: 3px solid var(--ms-petrole); }
.ms-form button { justify-self: start; cursor: pointer; }

/* --- Contact --- */
.ms-contact__form { grid-column: 1 / span 7; }
.ms-contact__aside { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 18px; padding-top: 8px; border-top: 3px solid var(--ms-corail); }
@media (max-width: 980px) { .ms-contact__form, .ms-contact__aside { grid-column: 1 / -1; } }

/* --- Livre --- */
.ms-livres-nav { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid rgba(0, 31, 40, .3); width: fit-content; max-width: 100%; }
.ms-livres-nav a { padding: 14px 20px; text-decoration: none; font: 700 var(--ms-t-label) / 1.3 var(--ms-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ms-nuit); }
.ms-livres-nav a + a { border-left: 1px solid rgba(0, 31, 40, .3); }
.ms-livres-nav a[aria-current="page"] { background: var(--ms-nuit); color: var(--ms-blanc); }
.ms-livres-nav a:not([aria-current]):hover { background: rgba(255, 255, 255, .35); }
.ms-fiche { align-items: start; }
.ms-fiche__couverture { grid-column: 1 / span 4; position: sticky; top: calc(100px + env(safe-area-inset-top, 0px)); }
.ms-fiche__couverture .ms-media { background: var(--ms-blanc); padding: 12px; border: 1px solid var(--ms-trait); }
.ms-fiche__couverture .ms-ph { min-height: 420px; }
.ms-fiche__texte { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.ms-fiche__bloc { display: flex; flex-direction: column; gap: 18px; padding-top: 20px; border-top: 1px solid var(--ms-trait); }
.ms-fiche__bloc > .ms-label { color: var(--ms-corail); }
.ms-fiche__bloc h2 { font-size: var(--ms-t-h3); color: var(--ms-petrole); }
@media (max-width: 980px) {
  .ms-fiche__couverture { position: static; grid-column: 1 / -1; max-width: 340px; }
  .ms-fiche__texte { grid-column: 1 / -1; }
}
.ms-achats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); border-top: 1px solid var(--ms-trait); }
.ms-achats a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--ms-trait); text-decoration: none; font: 600 1rem / 1.3 var(--ms-sans); color: var(--ms-petrole); }
.ms-achats a::after { content: "↗"; color: var(--ms-corail); }
.ms-achats a:hover { color: var(--ms-corail); }
.ms-achats small { display: block; font-weight: 500; font-size: .8125rem; color: var(--ms-gris); }
.ms-avis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ms-avis__item { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--ms-argile); }
.ms-avis__auteur { font: 700 var(--ms-t-label) / 1.3 var(--ms-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ms-petrole); }
.ms-etoiles { max-width: 220px; }
.ms-etoiles .ms-ph { min-height: 70px; }
@media (max-width: 640px) { .ms-avis { grid-template-columns: 1fr; } }

/* --- Confinettes (page) ---
   Lot 56 : trois cartes par ligne sur ordinateur, disposition régulière.
   La première confinette n'est plus mise en avant (la classe `ms-video--une`
   n'est plus passée par template-parts/pages/confinettes.php) : les douze
   cartes ont la même largeur et remplissent quatre lignes de trois.
   Les colonnes sont de largeur fixe (1/3, puis 1/2, puis pleine) : une dernière
   ligne incomplète garde donc des cartes à leur largeur normale, sans étirement.
   Un seul écart, identique dans les deux directions, aligne la grille.
   Seuils : 3 colonnes au-delà de 980 px, 2 de 561 à 980 px, 1 en dessous.
   Portée : `.ms-videos`, grille propre à cette page (l'accueil utilise
   `.ms-confinettes`). Les cartes `.ms-video` et leurs proportions (vignette
   16/9) ne changent pas. */
.ms-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.5vw, 56px); }
@media (max-width: 980px) { .ms-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ms-videos { grid-template-columns: 1fr; } }

/* --- Presse (page) --- */
.ms-rubrique { padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--ms-trait); }
.ms-rubrique:first-child { border-top: 0; padding-top: 0; }
.ms-rubrique .ms-grid { align-items: start; }
.ms-rubrique__tete { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 10px; position: sticky; top: calc(100px + env(safe-area-inset-top, 0px)); }
.ms-rubrique__tete h2,
.ms-rubrique__tete h3 { font-size: var(--ms-t-h3); color: var(--ms-petrole); }
.ms-rubrique__tete .ms-compte { font: 600 var(--ms-t-ui) / 1 var(--ms-sans); color: var(--ms-gris); font-variant-numeric: tabular-nums; }
.ms-rubrique__liste { grid-column: 4 / span 9; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ms-trait); }
@media (max-width: 980px) { .ms-rubrique__tete { position: static; grid-column: 1 / -1; } .ms-rubrique__liste { grid-column: 1 / -1; } }
.ms-ref { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px 32px; align-items: start; padding-block: 22px; border-bottom: 1px solid var(--ms-trait); cursor: pointer; }
.ms-ref--image { grid-template-columns: 160px minmax(0, 1fr) 200px; }
.ms-ref h4 { font-size: clamp(1.3rem, 1.6vw, 1.6rem); line-height: 1.15; color: var(--ms-encre); }
.ms-ref h4 a { text-decoration: none; }
/* Toute la carte est cliquable : le lien du titre étend sa zone à la carte
   entière (motif du « lien étiré »). Le bouton « Lire » et le bouton tactile
   restent au-dessus par leur empilement. */
.ms-ref h4 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ms-ref h4 a:hover { color: var(--ms-corail); }
.ms-ref__source { font: 600 .8125rem / 1.4 var(--ms-sans); color: var(--ms-gris); text-align: right; }
.ms-ref__source b { display: block; color: var(--ms-petrole); }
.ms-ref .ms-media { aspect-ratio: 3 / 1; }
.ms-ref .ms-media img { object-fit: contain; background: var(--ms-blanc); }
.ms-ref .ms-ph { min-height: 0; padding: 6px; }
.ms-ref .ms-ph span, .ms-ref .ms-ph code { display: none; }
@media (max-width: 760px) {
  .ms-ref, .ms-ref--image { grid-template-columns: 1fr; }
  .ms-ref__source { text-align: left; }
  .ms-ref .ms-media { max-width: 240px; }
}
.ms-insta { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.ms-insta a { display: block; aspect-ratio: 710 / 836; text-decoration: none; }
.ms-insta .ms-media { height: 100%; }
.ms-insta .ms-ph { min-height: 0; padding: 8px; }
/* Carte Instagram : zoom très léger, aller-retour fluide au survol.
   L'image est rognée par `.ms-media` (overflow: hidden), donc rien ne déborde. */
.ms-insta a img { transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
@media (hover: hover) and (pointer: fine) {
  .ms-insta a:hover img { transform: scale(1.045); }
}
.ms-insta a:focus-visible img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .ms-insta a img { transition: none; }
}

/* --- Auteure --- */
.ms-bio { align-items: start; }
.ms-bio__texte { grid-column: 1 / span 7; }
/* Bandeau de conclusion (lot 58, revu) : il remplace les règles de la première
   version (phrase dans la colonne de texte). Voir le bloc détaillé plus bas,
   section « PAGE “L’AUTEURE” — BANDEAU DE CONCLUSION ». */
.ms-bio__aside { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--ms-petrole); color: var(--ms-papier); }
.ms-bio__aside h2 { font-size: var(--ms-t-h4); color: var(--ms-papier); }
.ms-bio__aside .ms-link { color: var(--ms-beurre); }
.ms-bio__aside .ms-label { color: var(--ms-beurre); }
@media (max-width: 980px) { .ms-bio__texte, .ms-bio__aside { grid-column: 1 / -1; } }

/* --- Galerie --- */
.ms-galerie { columns: 3 280px; column-gap: 20px; }
.ms-galerie figure { break-inside: avoid; margin: 0 0 20px; }
.ms-galerie a { display: block; }
.ms-galerie img { width: 100%; height: auto; background: var(--ms-argile); }
.ms-galerie .ms-ph { min-height: 220px; }
.ms-galerie figcaption { margin-top: 8px; font: italic 400 .95rem / 1.4 var(--ms-serif); color: var(--ms-gris); }

/* --- Guide des styles --- */
.ms-nuancier { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ms-nuance { border: 1px solid var(--ms-trait); background: var(--ms-blanc); }
.ms-nuance span { display: block; height: 88px; }
.ms-nuance p { padding: 10px 12px; font: 600 .8125rem / 1.35 var(--ms-sans); }
.ms-nuance code { display: block; font-family: ui-monospace, Consolas, monospace; font-size: .75rem; color: var(--ms-gris); }
.ms-guide-bloc { display: flex; flex-direction: column; gap: 24px; padding-block: 48px; border-top: 1px solid var(--ms-trait); }
.ms-guide-bloc > h2 { font-size: var(--ms-t-h3); color: var(--ms-petrole); }
.ms-guide-rangee { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

/* --- Hero + bandeau + en-tête = hauteur de l'écran (accueil, écrans larges) ---
   --ms-chrome = bandeau multicolore (6 px) + en-tête (77 px avec sa bordure) + filet sous le hero (3 px).
   Les tailles du hero suivent la hauteur de l'écran pour que tout tienne. */
/* Composition du haut de l'accueil (lot 62) : le bandeau image, la navbar et le
   bandeau multicolore sont comptés. `--ms-bandeau-h` vaut 0 tant qu'aucune image
   de bandeau n'est choisie (aucun bloc n'est alors rendu) ; quand une image est
   choisie, sa hauteur est déduite de ses proportions et transmise par la page
   (`--ms-bandeau-h`), de sorte que bandeau + navbar + hero = hauteur visible. */
:root { --ms-bandeau-h: 0px; --ms-chrome: 86px; }
/* Hauteur du bandeau (lot 63) : elle suit l'image RÉELLEMENT affichée. Les
   proportions de chaque image sont transmises par la page (`--ms-bandeau-desk`
   et `--ms-bandeau-mob`) ; sous 980 px c'est l'image mobile qui est affichée par
   le <picture>, sa hauteur remplace donc celle de l'ordinateur (avec repli sur
   l'image ordinateur quand aucune image mobile n'est choisie). Aucun ratio
   figé. */
body.ms-avec-bandeau { --ms-bandeau-h: var(--ms-bandeau-desk, 0px); }
@media (max-width: 980px) {
  body.ms-avec-bandeau { --ms-bandeau-h: var(--ms-bandeau-mob, var(--ms-bandeau-desk, 0px)); }
}
@media (min-width: 981px) {
  /* Hauteur MINIMALE et non fixe : depuis le texte de présentation long, la hero
     doit grandir pour rester entièrement lisible (aucune troncature), tout en
     gardant au moins la hauteur de l'écran sur les textes courts. */
  .ms-hero { min-height: calc(100vh - var(--ms-chrome) - var(--ms-bandeau-h)); min-height: calc(100svh - var(--ms-chrome) - var(--ms-bandeau-h)); display: flex; align-items: center; }
  .ms-hero__grid { min-height: 100%; }
  /* Composition tenant dans l'écran : texte sur 8 colonnes, couverture sur 4,
     plafonnée à 340 px (proportions conservées), espacements verticaux réduits. */
  .ms-hero__texte { grid-column: 1 / span 8; padding-block: clamp(20px, 2.4vh, 34px) clamp(20px, 2.6vh, 36px); }
  .ms-hero__livre { grid-column: 9 / span 4; }
  /* Titre sur UNE seule ligne (lot 62) : le saut de ligne enregistré est masqué
     et la taille est calculée pour tenir dans la colonne de texte à toutes les
     largeurs d'écran. L'espace placée avant la balise par le gabarit évite de
     coller « l'univers » et « de Madame S ». */
  .ms-hero__saut { display: none; }
  .ms-hero h1 { font-size: clamp(2.2rem, 3.85vw, 3.6rem); max-width: 100%; }
  .ms-hero__intro { margin-top: clamp(12px, 1.6vh, 20px); font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); line-height: 1.45; }
  .ms-hero__citation { margin-top: clamp(12px, 1.6vh, 18px); font-size: clamp(0.95rem, min(1.2vw, 1.9vh), 1.15rem); }
  .ms-hero__livre { min-height: 0; height: 100%; }
  .ms-hero__couverture { width: auto; display: flex; justify-content: center; max-width: 340px; }
  .ms-hero__couverture img { width: auto; max-width: 100%; max-height: calc(100svh - var(--ms-chrome) - 10vh); }
  .ms-hero__cercle { width: min(360px, 42vh); height: min(360px, 42vh); }
}
/* Fenêtres basses (1366 x 768 et moins, sur écran large) : quand un bandeau
   image est affiché, la place restante ne suffit plus aux tailles prévues pour
   les grands écrans. Les gains sont MODÉRÉS et ne portent que sur des marges,
   la taille du texte (15 -> 14,4 px) et son interligne (1,45 -> 1,42) : la
   taille du titre est inchangée, le texte est identique, rien n'est tronqué ni
   masqué, et la hauteur du hero reste un minimum (la page s'allonge si le
   texte est plus long). Sans bandeau, rien ne change. */
@media (min-width: 981px) and (max-height: 860px) {
  .ms-avec-bandeau .ms-hero__texte { padding-block: 16px 18px; }
  .ms-avec-bandeau .ms-hero__intro { margin-top: 10px; font-size: clamp(0.9rem, 1.05vw, 1.0625rem); line-height: 1.42; }
  .ms-avec-bandeau .ms-hero__intro p + p { margin-top: .5em; }
  .ms-avec-bandeau .ms-hero__citation { margin-top: 9px; }
}
/* Téléphones et tablettes : le hero occupe au moins l'écran ; le texte complet
   et le livre empilés dépassent forcément une seule hauteur d'écran. */
@media (max-width: 980px) {
  .ms-hero { min-height: calc(100svh - var(--ms-chrome) - var(--ms-bandeau-h)); }
}

/* =====================================================================
   INTÉGRATION WORDPRESS — ajouts UNIQUEMENT (fin de fichier)
   =====================================================================
   Tout ce qui précède est la feuille du prototype validé, à l'identique.
   Cette section ne contient QUE les règles nécessaires au balisage propre à
   WordPress (formulaire de commentaires natif, liste de commentaires,
   navigation légale, masquage accessible). Aucune règle du prototype n'est
   modifiée : les corrections éventuelles sont additives et regroupées ici,
   afin que la comparaison avec le prototype reste possible.
   ===================================================================== */

/* Masquage accessible (classe standard WordPress, absente du prototype). */
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--ms-blanc); clip-path: none; color: var(--ms-encre);
  display: block; font: 600 .875rem/1.4 var(--ms-sans); height: auto;
  left: 8px; padding: 12px 16px; top: 8px; width: auto; z-index: 100000;
}

/* Informations légales du pied de page (rendues seulement si le menu existe). */
.ms-footer__legal { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); }
.ms-footer__legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ms-footer__legal a { font: 500 var(--ms-t-ui)/1.3 var(--ms-sans); color: var(--ms-glace); text-decoration: none; }
.ms-footer__legal a:hover { text-decoration: underline; }

/* Recherche : le formulaire natif suit la grille du prototype. */
.ms-form--recherche { max-width: 560px; }

/* Formulaire fourni par FormLayer : conserve le rythme vertical du prototype. */
.ms-form--formlayer > form { display: grid; gap: 20px; }
/* =====================================================================
   AJUSTEMENT DEMANDÉ — visuel de la hero de l'accueil légèrement réduit
   Environ -10 % à toutes les tailles, proportions et composition inchangées.
   Aucun autre élément n'est modifié : texte, cercle décoratif, formes et
   espacements restent identiques.
   ===================================================================== */
@media (max-width: 980px) {
  .ms-hero__couverture { width: min(66%, 345px); }
}
/* Emplacement neutre (aucune image choisie) : même réduction, pour que le
   visuel garde la même taille relative dans les deux cas. */
.ms-hero__couverture .ms-ph { min-height: 380px; }
@media (min-width: 981px) {
    .ms-hero__couverture img { max-height: calc(100svh - var(--ms-chrome) - 18vh); }
}
/* Écrans larges : la colonne du livre dépasse 440 px, la couverture peut donc
   prendre un peu plus de place. Le plafond reste borné par la largeur de sa
   colonne (`min(100%, …)`) et par la hauteur de l'écran : la hero ne grandit
   pas (sa hauteur minimale d'écran reste maîtresse) et l'image n'est ni étirée
   ni rognée. */
@media (min-width: 1600px) {
    .ms-hero__couverture { max-width: min(100%, 380px); }
}

/* =====================================================================
   PAGE PRESSE — cartes de hauteur uniforme et dépliage ciblé
   ---------------------------------------------------------------------
   Retouche de PRÉSENTATION demandée le 2026-10-20, distincte du lot de
   restauration des contenus (clôturé, doc 30). Aucun texte, lien ni
   métadonnée n'est modifié : les valeurs restent entières dans le HTML
   et en base ; seul leur affichage au repos est masqué (débordement).

   Portée STRICTEMENT limitée à la page Presse : tout est sous
   `.ms-presse-page`, classe posée par template-parts/pages/presse.php.
   La section « Presse » de l'accueil utilise `.ms-presse` (autre classe)
   et n'est donc pas concernée.

   Le balisage n'est activé que lorsque le script a posé
   `data-ms-cartes="pret"`. Sans JavaScript, la page conserve la
   présentation antérieure (liste) et les textes complets.
   ===================================================================== */

/* Grille de cartes : la carte dépliée n'étire pas ses voisines. */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: clamp(14px, 1.5vw, 20px);
  align-items: start;
  border-top: 0;
}

/* Carte au repos : même hauteur pour toutes les cartes d'une grille. */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref,
.ms-presse-page[data-ms-cartes="pret"] .ms-ref--image {
  --ms-carte-h: 15rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .6rem;
  height: var(--ms-carte-h);
  padding: .85rem .95rem .95rem;
  border: 1px solid var(--ms-trait);
  background: var(--ms-blanc);
  overflow: hidden;
  transition: height .18s cubic-bezier(.2, .7, .3, 1), box-shadow .26s ease, border-color .26s ease;
}

@media (min-width: 641px) {
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref,
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref--image { --ms-carte-h: 16.5rem; }
}
@media (min-width: 981px) {
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref,
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref--image { --ms-carte-h: 17.5rem; }
}
@media (min-width: 1200px) {
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref,
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref--image { --ms-carte-h: 18.5rem; }
}

/* Vignette (deux cartes seulement) : bande de hauteur fixe, document entier. */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref .ms-media {
  flex: 0 0 auto;
  width: 100%;
  height: 4.75rem;
  aspect-ratio: auto;
  background: var(--ms-argile);
}
.ms-presse-page[data-ms-cartes="pret"] .ms-ref .ms-media img { object-fit: contain; background: var(--ms-argile); }

/* Titre : trois lignes au repos (deux pour les cartes à vignette). */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref h4 {
  flex: 0 0 auto;
  font-size: clamp(1.05rem, .5vw + .92rem, 1.28rem);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.ms-presse-page[data-ms-cartes="pret"] .ms-ref--image h4 { -webkit-line-clamp: 2; }

/* Texte : source + précision, masqués au-delà de l'espace disponible. */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref__texte {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* Fondu obtenu par un masque vers le TRANSPARENT, et non par un dégradé
     vers une couleur figée : il laisse donc voir la couleur de fond réelle de
     la carte, y compris pendant sa transition de survol. C'est ce qui évite la
     bande blanche qui apparaissait alors que le fond devenait pétrole. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4rem), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4rem), transparent 100%);
}
.ms-presse-page[data-ms-cartes="pret"] .ms-ref__source {
  text-align: left;
  font: 400 .78rem / 1.5 var(--ms-sans);
  color: var(--ms-gris);
  margin: 0;
}
.ms-presse-page[data-ms-cartes="pret"] .ms-ref__source b {
  display: block;
  margin-bottom: .15rem;
  font: 700 .7rem / 1.3 var(--ms-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ms-petrole);
}

/* Bouton « Lire la suite » / « Réduire » : réservé aux ÉCRANS TACTILES, où le
   survol n'existe pas. À la souris, le script ne crée aucun bouton : rien ne
   réserve d'espace en bas de carte, le texte occupe toute la hauteur libre et
   la carte garde sa hauteur uniforme au repos. */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref__plus {
  position: relative; z-index: 2;
  flex: 0 0 auto;
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .3rem .8rem;
  background: var(--ms-blanc);
  border: 1px solid var(--ms-trait-fort);
  color: var(--ms-petrole);
  font: 700 .68rem / 1 var(--ms-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.ms-presse-page[data-ms-cartes="pret"] .ms-ref__plus:hover { border-color: var(--ms-petrole); }
.ms-presse-page[data-ms-cartes="pret"] .ms-ref__plus:focus-visible {
  outline: 2px solid var(--ms-corail);
  outline-offset: 2px;
}

/* Carte dépliée : hauteur naturelle, texte entier, plus de fondu. */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref[data-ms-ouvert="true"] { height: auto; }
.ms-presse-page[data-ms-cartes="pret"] .ms-ref[data-ms-ouvert="true"] h4 {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.ms-presse-page[data-ms-cartes="pret"] .ms-ref[data-ms-ouvert="true"] .ms-ref__texte {
  flex: 0 0 auto;
  overflow: visible;
}
.ms-presse-page[data-ms-cartes="pret"] .ms-ref[data-ms-ouvert="true"] .ms-ref__texte {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Accent de survol : uniquement sur les périphériques qui survolent vraiment. */
@media (hover: hover) and (pointer: fine) {
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref:hover {
    border-color: var(--ms-trait-fort);
    box-shadow: 0 12px 28px rgba(0, 31, 40, .09);
  }
}

/* Accent de focus : le lien du titre reçoit le focus au clavier, la carte
   s'ouvre alors (le script) et se signale comme la carte active. */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref:focus-within {
  border-color: var(--ms-trait-fort);
  box-shadow: 0 12px 28px rgba(0, 31, 40, .09);
}

/* Mouvement réduit : aucune animation de hauteur. */
@media (prefers-reduced-motion: reduce) {
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref { transition: none; }
}

/* =====================================================================
   BOUTON « LIRE » ET SURVOL DES CARTES (retouche 2026-10-20)
   ---------------------------------------------------------------------
   Chaque carte de texte reçoit un bouton « Lire » en bas à droite, lien
   direct vers la référence (même adresse que le titre). La carte change de
   fond au survol et à la prise de focus, avec inversion des couleurs pour
   rester lisible (pétrole en fond : papier, glace et beurre pour les textes).
   Les cartes de la rubrique Instagram ne reçoivent PAS ce bouton : elles
   gardent leur zoom d'image (règle ci-dessus).
   ===================================================================== */
.ms-ref__lire {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .45rem;
  justify-self: start;
  min-height: 36px;
  padding: .35rem .9rem;
  border: 1px solid var(--ms-trait-fort);
  background: var(--ms-blanc);
  color: var(--ms-petrole);
  font: 700 var(--ms-t-label) / 1 var(--ms-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}
.ms-ref__lire::after { content: "→"; font-size: 1.05em; letter-spacing: 0; }
.ms-ref__lire:hover { border-color: var(--ms-petrole); }
.ms-ref__lire:focus-visible { outline: 2px solid var(--ms-corail); outline-offset: 2px; }

/* Dans la grille de cartes : bouton fixé en bas à droite de la carte. */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref {
  position: relative;
  padding-bottom: 2.9rem;
  transition: height .18s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}
.ms-presse-page[data-ms-cartes="pret"] .ms-ref__lire {
  position: absolute;
  z-index: 2;
  right: .95rem;
  bottom: .95rem;
  justify-self: auto;
}

/* Transitions de couleur, pour que l'inversion se fasse tout en douceur. */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref h4,
.ms-presse-page[data-ms-cartes="pret"] .ms-ref h4 a,
.ms-presse-page[data-ms-cartes="pret"] .ms-ref__source,
.ms-presse-page[data-ms-cartes="pret"] .ms-ref__source b {
  transition: color .28s ease;
}

/* Survol (pointeur qui survole réellement) : fond pétrole, textes inversés. */
@media (hover: hover) and (pointer: fine) {
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref:hover {
    background: var(--ms-petrole);
    border-color: var(--ms-petrole);
    box-shadow: 0 14px 30px rgba(0, 31, 40, .2);
  }
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref:hover h4,
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref:hover h4 a { color: var(--ms-papier); }
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref:hover .ms-ref__source { color: var(--ms-glace); }
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref:hover .ms-ref__source b { color: var(--ms-beurre); }

  .ms-presse-page[data-ms-cartes="pret"] .ms-ref:hover .ms-ref__lire {
    background: var(--ms-papier);
    border-color: var(--ms-papier);
    color: var(--ms-petrole);
  }
}

/* Même état à la prise de focus au clavier (le survol n'y existe pas). */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref:focus-within {
  background: var(--ms-petrole);
  border-color: var(--ms-petrole);
  box-shadow: 0 14px 30px rgba(0, 31, 40, .2);
}
.ms-presse-page[data-ms-cartes="pret"] .ms-ref:focus-within h4,
.ms-presse-page[data-ms-cartes="pret"] .ms-ref:focus-within h4 a { color: var(--ms-papier); }
.ms-presse-page[data-ms-cartes="pret"] .ms-ref:focus-within .ms-ref__source { color: var(--ms-glace); }
.ms-presse-page[data-ms-cartes="pret"] .ms-ref:focus-within .ms-ref__source b { color: var(--ms-beurre); }

.ms-presse-page[data-ms-cartes="pret"] .ms-ref:focus-within .ms-ref__lire {
  background: var(--ms-papier);
  border-color: var(--ms-papier);
  color: var(--ms-petrole);
}

/* Mouvement réduit : les couleurs changent sans transition. */
@media (prefers-reduced-motion: reduce) {
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref,
  .ms-ref__lire,
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref h4,
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref h4 a,
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref__source,
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref__source b { transition: none; }
}
/* =====================================================================
   FORMULAIRE DE CONTACT (FormLayer) — direction artistique du site
   ---------------------------------------------------------------------
   Le formulaire est fourni par FormLayer et raccordé par le champ
   `formulaire` du profil Contact. Aucun champ du profil n'est ajouté,
   aucune autre page n'est concernée : tout est sous `.ms-form--formlayer`.

   Reprise EXACTE des codes du site (prototype validé) : libellés Source
   Sans 3 en petites capitales pétrole, champs à filet `--ms-trait-fort`,
   focus turquoise, bouton identique à `.ms-button`, messages sur fond
   `--ms-argile` à liseré pétrole (erreurs : liseré corail).

   Les sélecteurs sont volontairement plus spécifiques que ceux de
   l'extension (`.ms-form.ms-form--formlayer …`) pour que l'apparence
   par défaut de FormLayer ne transparaisse pas.
   ===================================================================== */

.ms-form.ms-form--formlayer { max-width: 760px; }

/* Le conteneur de l'extension : aucun fond, aucune marge propre. */
.ms-form.ms-form--formlayer .formlayer-form-wrapper,
.ms-form.ms-form--formlayer .formlayer-form {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  max-width: none;
}

/* Grille des champs : deux colonnes pour les champs « demi-largeur ». */
.ms-form.ms-form--formlayer .formlayer-form-fields-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.ms-form.ms-form--formlayer .formlayer-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  grid-column: 1 / -1;
}
.ms-form.ms-form--formlayer .formlayer-field-wrap.formlayer-width-50 {
  grid-column: span 1;
  width: 100%;
}

@media (max-width: 640px) {
  .ms-form.ms-form--formlayer .formlayer-form-fields-wrapper { grid-template-columns: 1fr; }
  .ms-form.ms-form--formlayer .formlayer-width-50 { grid-column: 1 / -1; }
}

/* Libellés : mêmes valeurs que `.ms-champ label`. */
.ms-form.ms-form--formlayer .formlayer-label {
  margin: 0;
  font: 700 var(--ms-t-label) / 1.3 var(--ms-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ms-petrole);
}
.ms-form.ms-form--formlayer .required-indicator {
  color: var(--ms-corail);
  margin-left: .3em;
}
.ms-form.ms-form--formlayer .formlayer-help-text {
  font: 400 var(--ms-t-ui) / 1.45 var(--ms-sans);
  color: var(--ms-gris);
}

/* Champs : mêmes valeurs que `.ms-champ input, textarea`. */
.ms-form.ms-form--formlayer .formlayer-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--ms-trait-fort);
  border-radius: var(--ms-rayon);
  background: var(--ms-blanc);
  color: var(--ms-encre);
  font: 400 1.0625rem / 1.5 var(--ms-sans);
  appearance: none;
  box-shadow: none;
}
.ms-form.ms-form--formlayer textarea.formlayer-input {
  min-height: 180px;
  resize: vertical;
}
.ms-form.ms-form--formlayer .formlayer-input::placeholder {
  color: var(--ms-gris);
  opacity: .85;
}
.ms-form.ms-form--formlayer .formlayer-input:focus {
  outline: 2px solid var(--ms-turquoise);
  outline-offset: 0;
  border-color: var(--ms-turquoise);
}

/* Erreurs par champ : convention du thème (`[data-erreur]` + `.ms-champ__erreur`). */
.ms-form.ms-form--formlayer .formlayer-field-wrap[data-erreur] .formlayer-input {
  border-color: var(--ms-corail);
}
.ms-form.ms-form--formlayer .formlayer-field-wrap[data-erreur] .formlayer-label {
  color: #B4233D;
}
.ms-form.ms-form--formlayer .ms-champ__erreur {
  margin: 0;
  font: 600 var(--ms-t-ui) / 1.3 var(--ms-sans);
  color: #B4233D;
}

/* Bouton d'envoi : mêmes valeurs que `.ms-button` (flèche comprise). */
.ms-form.ms-form--formlayer .formlayer-submit-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  margin: 0;
}
.ms-form.ms-form--formlayer .formlayer-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border: 1px solid var(--ms-petrole);
  border-radius: var(--ms-rayon);
  background: var(--ms-petrole);
  color: var(--ms-blanc);
  font: 800 var(--ms-t-label) / 1 var(--ms-sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ms-form.ms-form--formlayer .formlayer-submit-btn::after {
  content: "→";
  font-size: 1.2em;
  letter-spacing: 0;
}
.ms-form.ms-form--formlayer .formlayer-submit-btn:hover {
  background: var(--ms-corail);
  border-color: var(--ms-corail);
  color: var(--ms-blanc);
}
.ms-form.ms-form--formlayer .formlayer-submit-btn:focus-visible {
  outline: 2px solid var(--ms-corail);
  outline-offset: 3px;
}
.ms-form.ms-form--formlayer .formlayer-submit-btn[disabled],
.ms-form.ms-form--formlayer .formlayer-submit-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Messages du formulaire : mêmes valeurs que `.ms-form__statut`. */
.ms-form.ms-form--formlayer .formlayer-form-status:not(:empty) {
  grid-column: 1 / -1;
  padding: 14px 16px;
  background: var(--ms-argile);
  border-left: 3px solid var(--ms-petrole);
  font: 600 .9375rem / 1.45 var(--ms-sans);
  color: var(--ms-encre);
}
.ms-form.ms-form--formlayer .formlayer-form-status.formlayer-error-message {
  background: #FDF1F3;
  border-left-color: var(--ms-corail);
  color: #7A1226;
}
.ms-form.ms-form--formlayer .formlayer-form-status:focus {
  outline: 2px solid var(--ms-turquoise);
  outline-offset: 3px;
}
/* Une zone de statut vide ne doit jamais se dessiner : l'extension donne à
   `.formlayer-error-message` un fond, une bordure et une ombre même sans texte,
   ce qui produisait un cadre rouge vide. Une zone sans texte n'a rien à dire :
   elle ne s'affiche pas. */
.ms-form.ms-form--formlayer .formlayer-form-status:empty {
  display: none !important;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* Note « mise en service » : factuelle, dans les tons du site. */
.ms-formulaire-note {
  max-width: 760px;
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--ms-argile);
  border-left: 3px solid var(--ms-petrole);
  font: 600 .9375rem / 1.45 var(--ms-sans);
  color: var(--ms-encre);
}

/* Formulaire en mise en service : champs visiblement hors service. */
.ms-form.ms-form--formlayer.ms-form--en-service .formlayer-input,
.ms-form.ms-form--formlayer.ms-form--en-service .formlayer-submit-btn {
  opacity: .55;
  cursor: not-allowed;
}
.ms-form.ms-form--formlayer.ms-form--en-service .formlayer-label { color: var(--ms-gris); }

/* Champ leurre (antispam) : hors écran, hors tabulation, hors lecteur d'écran. */
.ms-form.ms-form--formlayer .ms-pot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* =====================================================================
/* =====================================================================
   VIDÉO EN MODALE — page Confinettes
   La vignette reste un lien vers YouTube (fonctionnement sans JavaScript) ;
   le script y ajoute l'ouverture d'un calque intégré.

   Le calque n'est PAS un `<dialog>` : la fenêtre de préférences de
   CookieAdmin est un simple <div> en z-index 999999. Un élément de la couche
   supérieure du navigateur passerait au-dessus d'elle et la rendrait
   inutilisable. On reste donc juste sous ce z-index.
   ===================================================================== */
.ms-video__vignette--modale { cursor: pointer; }
html.ms-modale-ouverte { overflow: hidden; }

.ms-video-fond {
  position: fixed; inset: 0;
  z-index: 99990;
  display: flex; align-items: center; justify-content: center;
  padding: var(--ms-gouttiere);
  background: rgba(0, 31, 40, .82);
  overflow: auto;
}
.ms-video-fond[hidden] { display: none; }

.ms-video-modale {
  position: relative; z-index: 99991;
  width: min(1100px, 100%);
  max-height: 100%;
  background: var(--ms-papier);
  color: var(--ms-encre);
  overflow: auto;
}

.ms-video-modale__entete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 18px 20px; border-bottom: 1px solid var(--ms-trait);
}
.ms-video-modale__titre {
  font: 500 clamp(1.15rem, 1.6vw, 1.5rem) / 1.2 var(--ms-serif);
  color: var(--ms-petrole); letter-spacing: -.01em;
}
.ms-video-modale__fermer {
  flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--ms-blanc); border: 1px solid var(--ms-trait-fort); color: var(--ms-petrole);
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ms-video-modale__fermer:hover { background: var(--ms-corail); border-color: var(--ms-corail); color: var(--ms-blanc); }
.ms-video-modale__fermer:focus-visible { outline: 3px solid var(--ms-turquoise); outline-offset: 3px; }
.ms-video-modale__croix { font: 600 1.1rem / 1 var(--ms-sans); }

.ms-video-modale__cadre { position: relative; aspect-ratio: 16 / 9; background: var(--ms-nuit); }
.ms-video-modale__cadre[hidden] { display: none; }
.ms-video-modale__lecteur { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ms-video-modale__panneau { display: grid; gap: 16px; justify-items: start; padding: clamp(24px, 4vw, 40px); }
.ms-video-modale__panneau[hidden] { display: none; }
.ms-video-modale__panneau-titre {
  font: 700 var(--ms-t-label) / 1.3 var(--ms-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ms-corail);
}
.ms-video-modale__panneau .ms-copy { max-width: 52ch; }

.ms-video-modale__pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 16px 20px; border-top: 1px solid var(--ms-trait); background: var(--ms-argile);
}
.ms-video-modale__note { font: 400 var(--ms-t-ui) / 1.45 var(--ms-sans); color: var(--ms-gris); }

@media (max-width: 640px) {
  .ms-video-fond { padding: 0; }
  .ms-video-modale { width: 100%; max-height: 100svh; min-height: 100svh; }
  .ms-video-modale__entete { padding: 14px 16px; }
  .ms-video-modale__fermer { width: 48px; height: 48px; }
  .ms-video-modale__pied { padding: 14px 16px; }
}

/* =====================================================================
   PAGE PRESSE — section « Ce qu’en disent les lecteurs et les critiques »
   ---------------------------------------------------------------------
   Bloc ajouté à la demande de la cliente (lot 50) : les avis des lecteurs
   et les critiques, auparavant sur la page « Le livre », sont présentés ici
   dans leur propre rubrique, sous les rubriques existantes.

   Réemploi strict des composants déjà en place : `.ms-rubrique` (filet de
   séparation, colonne de titre collante), `.ms-avis` (grille de cartes),
   `.ms-avis__item` et `.ms-avis__auteur`, `.ms-copy`, `.ms-etoiles`.
   Seuls les espacements entre les deux groupes sont nouveaux.
   ===================================================================== */
.ms-avis-section .ms-avis__groupe + .ms-avis__groupe {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid var(--ms-trait);
}
.ms-avis-section .ms-avis__groupe > .ms-label { display: block; margin: 0 0 14px; color: var(--ms-corail); }
.ms-avis-section .ms-etoiles { margin: 0 0 18px; }
.ms-avis-section .ms-avis__groupe .ms-avis + .ms-avis { margin-top: 24px; }

/* =====================================================================
   PAGE PRESSE — regroupement en deux ensembles (lot 52)
   ---------------------------------------------------------------------
   Deux ensembles coiffent les quatre rubriques, qui ne changent ni de
   contenu, ni d'ordre, ni de présentation :

     « Ce que dit la presse »  → Presse / Écriture, Radio / TV
     « Les réseaux sociaux »   → Podcast / Blog, Instagram

   Réemploi strict des composants en place : `.ms-rubrique`, `.ms-grid`,
   `.ms-rubrique__tete`, `.ms-rubrique__liste`, `.ms-ref-liste`, `.ms-insta`.
   Aucun filtre, onglet, accordéon ni navigation nouvelle : le regroupement
   est un simple niveau de titre au-dessus des rubriques existantes.

   Hiérarchie des titres : titre de la page (h1), titres d'ensemble (h2),
   noms de rubrique (h3), titres des cartes (h4). Les tailles suivent les
   jetons déjà en usage.
   ===================================================================== */
/* Filet et respiration entre deux ensembles ; le premier n'en a pas besoin
   (l'en-tête de la page le précède directement). */
.ms-ensemble + .ms-ensemble {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--ms-trait);
}
.ms-ensemble__tete { margin: 0 0 clamp(20px, 2.8vw, 34px); }
.ms-ensemble__tete h2 { font-size: var(--ms-t-h2); line-height: 1; font-weight: 500; letter-spacing: -0.03em; color: var(--ms-petrole); }

/* Les rubriques d'un ensemble : la première n'ajoute ni filet ni marge haute
   (le titre de l'ensemble tient leur place), les suivantes gardent le filet de
   séparation qui existait déjà d'une rubrique à l'autre. */
.ms-ensemble .ms-rubrique { padding-block: 0; border-top: 0; }
.ms-ensemble .ms-rubrique + .ms-rubrique {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--ms-trait);
}

@media (max-width: 640px) {
  .ms-ensemble + .ms-ensemble { margin-top: clamp(36px, 9vw, 52px); padding-top: clamp(32px, 8vw, 48px); }
  .ms-ensemble__tete { margin-bottom: clamp(16px, 4vw, 24px); }
  .ms-ensemble .ms-rubrique + .ms-rubrique { margin-top: clamp(26px, 7vw, 40px); padding-top: clamp(24px, 6vw, 34px); }
}

/* =====================================================================
   PAGE LIVRE — l'extrait (lot 55, revu le 2026-11-02)
   ---------------------------------------------------------------------
   Demande de la cliente : pas de composition nouvelle. L'extrait reprend
   exactement les repères du résumé :

   - le libellé est un `span.ms-label` dans un `.ms-fiche__bloc`, comme
     « Le livre — Résumé » : même point de départ, même police, même taille,
     même graisse, même couleur, même espacement des lettres, et le même
     espacement de 18 px entre le libellé et le texte (donné par le bloc) ;
   - le texte est un simple `div.ms-copy`, comme celui du résumé : même
     largeur disponible, même alignement, même taille, même interligne.

   Deux différences seulement, voulues : l'extrait est en italique (EB Garamond,
   la police de lecture existante) et il est encadré de guillemets français
   ajoutés au rendu par le gabarit — jamais dans la valeur enregistrée.

   Aucune largeur, marge, interligne ni centrage propre à l'extrait : tout vient
   des composants existants. Portée : `.ms-fiche__bloc.ms-extrait` uniquement.
   ===================================================================== */
.ms-fiche__bloc.ms-extrait .ms-copy { font-style: italic; }
/* =====================================================================
   PAGE « L’AUTEURE » — BANDEAU DE CONCLUSION (lot 58, revu)
   ---------------------------------------------------------------------
   Demande de la cliente : un vrai bandeau de conclusion, pleine largeur du
   conteneur de la page, fond clair chaud, composition centrée et hiérarchisée.

   1. La question, phrase principale : EB Garamond italique (la vraie variante
      italique, déjà servie par assets/css/fonts.css), 32 à 36 px sur
      ordinateur, pétrole, retours à la ligne équilibrés.
   2. L’invitation, plus discrète, juste en dessous.
   3. Le domaine, lien souligné d’un filet corail, avec survol et focus visibles.

   Aucun dégradé, aucune ombre, aucun coin arrondi, aucun pictogramme, aucune
   police ajoutée. Fond `--ms-argile` : clair et chaud, distinct du blanc de la
   page et du pétrole foncé du pied de page.
   Le bandeau est le dernier élément du corps : le bas de section est ramené à
   zéro pour ne pas laisser de vide résiduel avant le pied de page.
   ===================================================================== */
.ms-corps--conclusion { padding-bottom: 0; }

.ms-conclusion {
  margin-top: clamp(48px, 6vw, 88px);
  padding: clamp(36px, 4.2vw, 64px) clamp(24px, 4vw, 64px) clamp(40px, 4.6vw, 72px);
  background: var(--ms-argile);
  text-align: center;
}

/* 1. Phrase principale */
.ms-conclusion__phrase {
  margin: 0 auto;
  max-width: 20em;
  font-family: var(--ms-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw + 0.5rem, 2.25rem);
  line-height: 1.24;
  color: var(--ms-petrole);
  text-wrap: balance;
}

/* 2. Invitation, plus discrète */
.ms-conclusion__invitation {
  margin: clamp(10px, 1.4vw, 18px) auto 0;
  max-width: 30em;
  font-family: var(--ms-serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ms-gris);
}
.ms-conclusion__invitation p { margin: 0; }
.ms-conclusion__invitation p + p { margin-top: clamp(6px, 0.8vw, 10px); }

/* 3. Le lien : filet corail fin, états de survol et de focus visibles */
.ms-conclusion__invitation a {
  color: var(--ms-petrole);
  text-decoration: none;
  border-bottom: 1px solid var(--ms-corail);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.ms-conclusion__invitation a:hover { color: var(--ms-corail); border-bottom-color: var(--ms-petrole); }
.ms-conclusion__invitation a:focus-visible { outline: 2px solid var(--ms-corail); outline-offset: 3px; }

@media (max-width: 640px) {
  .ms-conclusion { margin-top: 40px; padding: 32px 20px 36px; }
  .ms-conclusion__phrase { max-width: 16em; font-size: 1.625rem; line-height: 1.28; }
  .ms-conclusion__invitation { margin-top: 12px; font-size: 1rem; }
}

/* =====================================================================
   En-tête de page : bloc complémentaire, colonne de droite (lot 64).
   Même place que l'ancienne introduction des pages de livre.
   ===================================================================== */
.ms-page-tete__extra { grid-column: 8 / span 5; }
@media (max-width: 980px) {
  .ms-page-tete__extra { grid-column: 1 / -1; }
}

/* =====================================================================
   « Autre livre disponible » (lot 64) — dans le bandeau d'EN-TÊTE de la
   page de livre, à la place de l'ancienne navigation « Page 1 / Page 2 ».
   Libellé discret, puis le titre du livre voisin, cliquable. Les couleurs
   sont héritées de la variante de l'en-tête (moutarde : texte nuit).
   ===================================================================== */
.ms-autre-livre { margin: 0; }
.ms-autre-livre .ms-label { display: block; color: inherit; opacity: .8; }
.ms-autre-livre__titre {
  margin: 6px 0 0;
  font: 500 clamp(1.2rem, 1.6vw, 1.5rem) / 1.2 var(--ms-serif);
  letter-spacing: -.01em;
}
.ms-autre-livre__titre a {
  color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.ms-autre-livre__titre a:hover { opacity: .85; }
@media (max-width: 980px) { .ms-autre-livre { margin-top: 18px; } }
/* =====================================================================
   Cartes de référence de la page Presse SANS VIGNETTE (lot 66)
   ---------------------------------------------------------------------
   Les rubriques « Presse / Écriture », « Radio / TV » et
   « Podcasts, blogs et plateformes sociales » n'affichent plus d'image :
   l'espace qui leur était réservé disparaît et la carte devient
   purement textuelle. Les publications Instagram (.ms-insta) et les avis
   (.ms-etoiles) ne sont pas concernés.
   Titres en capitales (par le CSS seulement : les valeurs enregistrées ne
   changent pas), plus grands, sans troncature ni masquage ; nom du média
   plus visible, distinct du texte de précision. Tout est limité à
   `.ms-presse-page`, la page Presse.
   ===================================================================== */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref {
  /* Hauteur FIXE (rétablie) : toutes les cartes d'une rangée ont la même taille,
     le texte de précision qui dépasse est masqué par le fondu et la carte se
     déploie au survol (`data-ms-ouvert`). Sans hauteur fixe, plus rien ne
     débordait et le dépliage n'avait aucun effet. */
  height: var(--ms-carte-h);
  min-height: 0;
  padding: .95rem 1.05rem 1.05rem;
  padding-bottom: 2.9rem;
}

/* Titre : le contenu enregistré est repris tel quel, seules les capitales et la
   taille changent. Plus de limitation de lignes : retour à la ligne naturel. */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref h4 {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  font-size: clamp(1.06rem, .42vw + .97rem, 1.2rem);
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ms-presse-page[data-ms-cartes="pret"] .ms-ref--image h4 { -webkit-line-clamp: unset; }

/* Nom du média : plus grand, plus gras, toujours en tête du bloc de précision
   et nettement distinct du texte qui suit. */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref__source {
  font-size: .82rem;
  line-height: 1.55;
}
.ms-presse-page[data-ms-cartes="pret"] .ms-ref__source b {
  margin-bottom: .2rem;
  font: 800 .9rem / 1.3 var(--ms-sans);
  letter-spacing: .06em;
}
/* Repli sans JavaScript : la grille de cartes n'existe qu'une fois le script
   exécuté (`data-ms-cartes="pret"`). Les titres et les sources gardent donc ici
   la même présentation — capitales, taille et graisse — pour que la demande
   soit visible dans les deux états. Portée : la page Presse uniquement. */
.ms-presse-page .ms-ref h4 {
  font-size: clamp(1.06rem, .42vw + .97rem, 1.2rem);
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.ms-presse-page .ms-ref__source { font-size: .82rem; line-height: 1.55; }
.ms-presse-page .ms-ref__source b {
  font: 800 .9rem / 1.3 var(--ms-sans);
  letter-spacing: .06em;
}
/* Hauteurs de carte : la bande de vignette (4,75 rem + l'écart) n'existe plus,
   la hauteur uniforme est donc réduite d'autant, sans jamais imposer moins que
   le titre + la source + le bouton. */
.ms-presse-page[data-ms-cartes="pret"] .ms-ref { --ms-carte-h: 14rem; }
@media (min-width: 641px) {
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref { --ms-carte-h: 16rem; }
}
@media (min-width: 981px) {
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref { --ms-carte-h: 17rem; }
}
@media (min-width: 1200px) {
  .ms-presse-page[data-ms-cartes="pret"] .ms-ref { --ms-carte-h: 18rem; }
}
/* Vignettes secondaires de la section « Confinettes » de l'accueil (lot 67) :
   toutes la même mise en page — vignette, titre, description éventuelle — et
   donc la même taille de vignette. La variante « ligne » (`.ms-video--titre`)
   n'est plus utilisée ; ses règles restent sans effet. */
.ms-confinettes__liste .ms-video > .ms-copy { margin-top: 0; }