/* ======================================================================
   MB RH Consulting — styles de composants
   Dépend des variables définies dans style.css (:root)
   ====================================================================== */

/* --- Base typographique --- */
body {
  font-family: var(--mb-font-body);
  color: var(--mb-ink);
  background: var(--mb-cream);
}
/* Titres de section (H2/H3/H4) : serif humaniste. */
h2, h3, h4, .mb-title {
  font-family: var(--mb-font-title);
  color: var(--mb-espresso);
  line-height: 1.2;
}
/* Grands titres (H1) : script pinceau, réservé aux en-têtes de page.
   Kaushan est incliné et plus étroit : on augmente la taille et l'interligne. */
h1 {
  font-family: var(--mb-font-display);
  color: var(--mb-espresso);
  font-weight: 400;
  line-height: 1.15;
  font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
  letter-spacing: .01em;
}
/* H2 de section fluides (les presets WP xx-large/x-large étant vides, les titres
   tombaient sur le 28px fixe de Kadence → écart H1/H2 écrasé en mobile). */
.mb-section h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); font-weight: 600; }
.mb-section h3 { font-weight: 600; }

/* --- Utilitaires de section --- */
.mb-section { padding-block: clamp(3rem, 6vw, 6rem); background: var(--mb-cream); }
/* Gouttière latérale sur les sections Gutenberg (le layout "constrained" n'en
   pose aucune → le contenu collait au bord sur mobile). Les sections de template
   utilisent .mb-wrap qui gère déjà son padding, donc on ne cible que les blocs. */
.mb-section.is-layout-constrained { padding-inline: clamp(1.25rem, 4vw, 2rem); }
/* Les sections gèrent leur propre respiration via le padding : aucune marge
   inter-blocs (sinon Kadence insère un margin-bottom de 32px = bande blanche
   entre deux sections de couleurs différentes). !important car Kadence cible
   .wp-block-group avec une priorité équivalente chargée après notre feuille. */
.mb-section, .mb-band { margin-block: 0 !important; }

/* Séparateur visuel entre deux sections claires consécutives (même fond crème) :
   fin filet sable. On l'enlève sur les sections foncées / bande photo et juste
   après elles, puisque le changement de couleur y fait déjà la séparation. */
.mb-section { border-top: 1px solid rgba(34, 26, 22, .14); }
.mb-hero,
.mb-section--espresso,
.mb-section--rust,
.mb-section--sand,
.mb-band { border-top: 0; }
.mb-hero + .mb-section,
.mb-section--espresso + .mb-section,
.mb-section--rust + .mb-section,
.mb-section--sand + .mb-section,
.mb-band + .mb-section { border-top: 0; }

/* Variante compacte (marges hautes/basses réduites) */
.mb-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem) !important; }
.mb-section--cream { background: var(--mb-cream); }
.mb-section--sand { background: var(--mb-sand); }
/* En-têtes de page : aplat uni « terre battue » (remplace l'espresso).
   Utilisé uniquement pour les heros/en-têtes, jamais pour du contenu. */
.mb-section--espresso { background: var(--mb-terre); color: var(--mb-cream); }
.mb-section--espresso h1,
.mb-section--espresso h2,
.mb-section--espresso h3 { color: #fff; }
.mb-wrap { max-width: var(--mb-maxw); margin-inline: auto; padding-inline: 1.25rem; }

/* --- Boutons --- */
.mb-btn,
.wp-block-button.is-style-mb .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--mb-terracotta);
  color: var(--mb-white);
  font-family: var(--mb-font-body);
  font-weight: 700;
  letter-spacing: .01em;
  padding: .85rem 1.5rem;
  border-radius: var(--mb-radius);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
/* Bouton contour : WordPress le rend en bleu par défaut (style is-style-outline
   jamais défini) → on le ramène dans la palette terracotta. */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--mb-copper-dark) !important; /* bat la règle Kadence :not(.has-text-color) */
  border: 1.5px solid var(--mb-terracotta);
  font-family: var(--mb-font-body);
  font-weight: 700;
  padding: .85rem 1.5rem;
  border-radius: var(--mb-radius);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--mb-terracotta);
  color: #fff !important;
}
.mb-btn:hover { background: var(--mb-copper-dark); transform: translateY(-1px); }
.mb-btn--ghost {
  background: transparent;
  color: var(--mb-terracotta);
  border: 1.5px solid var(--mb-terracotta);
}
.mb-btn--ghost:hover { background: var(--mb-terracotta); color: var(--mb-white); }

/* --- Liens (contraste AA en petit corps) --- */
a { color: var(--mb-copper-dark); }
a:hover { color: var(--mb-terracotta); }

/* --- Listes ❌ / ✅ (cœur du discours candidat) --- */
.mb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.mb-list li { display: flex; gap: .65rem; align-items: flex-start; }
.mb-list--no li::before  { content: "✕"; color: var(--mb-copper-dark); font-weight: 700; }
.mb-list--yes li::before { content: "✓"; color: var(--mb-terracotta); font-weight: 700; }

/* --- Cards (offres / piliers) --- */
.mb-card {
  background: var(--mb-white);
  border: 1px solid rgba(34,26,22,.08);
  border-radius: var(--mb-radius);
  padding: 1.5rem;
  box-shadow: 0 6px 24px rgba(34,26,22,.06);
}

/* --- Verbatim / citation --- */
.mb-quote {
  font-family: var(--mb-font-title);
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--mb-espresso);
  border-left: 3px solid var(--mb-terracotta);
  padding-left: 1rem;
}
/* Variante centrée (sans filet) — bandeau Vision */
.mb-quote.has-text-align-center { border-left: 0; padding-left: 0; line-height: 1.4; }

/* --- Étapes / process --- */
.mb-steps { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .mb-steps { grid-auto-flow: column; } }
.mb-step__num {
  font-family: var(--mb-font-title);
  font-size: 2rem;
  color: var(--mb-terracotta);
}

/* --- Accessibilité : focus visible --- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.mb-btn:focus-visible {
  outline: 3px solid var(--mb-copper-dark);
  outline-offset: 2px;
}

/* ======================================================================
   DA « format post » — apprise de l'annonce réelle de Marine
   (terracotta profond, labels capitales, badges ronds, motifs éditoriaux)
   ====================================================================== */

/* --- Sur-titre / eyebrow (label capitales espacées) --- */
.mb-eyebrow {
  font-family: var(--mb-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8rem;
  color: var(--mb-copper-dark);
  margin: 0 0 .5rem;
}
/* Crème pleine opacité sur les fonds foncés : garantit le contraste AA du
   petit label capitales sur l'aplat terre battue (l'ivoire à 85 % passait dessous). */
.mb-section--rust .mb-eyebrow,
.mb-section--espresso .mb-eyebrow { color: var(--mb-cream); opacity: 1; }

/* --- Section terracotta profond (aplats forts, façon post) --- */
.mb-section--rust {
  background: linear-gradient(160deg, var(--mb-rust) 0%, var(--mb-rust-dark) 100%);
  color: var(--mb-ivory);
}
.mb-section--rust h1,
.mb-section--rust h2,
.mb-section--rust h3 { color: #fff; }
.mb-section--rust a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Bouton « clair » sur fond rust/espresso (CTA inversé) */
.wp-block-button.is-style-mb-light .wp-block-button__link {
  background: var(--mb-ivory);
  color: var(--mb-espresso);
  font-weight: 700;
  border-radius: var(--mb-radius);
}
.wp-block-button.is-style-mb-light .wp-block-button__link:hover { background: #fff; }

/* --- Filet / keyline (rappel du cadre du logo) --- */
.mb-divider { height: 1px; background: var(--mb-sand); border: 0; margin-block: var(--mb-space-l); }
.mb-section--rust .mb-divider { background: rgba(255,255,255,.25); }

/* --- Badge rond à icône (système d'icônes du post) --- */
.mb-icon-badge {
  width: 60px; height: 60px;
  flex: 0 0 60px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--mb-terracotta);
  color: var(--mb-terracotta);
  background: color-mix(in srgb, var(--mb-terracotta) 8%, transparent);
}
.mb-icon-badge svg { width: 27px; height: 27px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.mb-section--rust .mb-icon-badge,
.mb-section--espresso .mb-icon-badge { border-color: rgba(255,255,255,.6); color: #fff; }

/* --- Bloc « feature » : badge + label + texte (méthode, valeurs) --- */
.mb-feature { display: flex; gap: 1rem; align-items: flex-start; }
.mb-feature__label {
  font-family: var(--mb-font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .85rem;
  margin: .35rem 0 .15rem;
}
.mb-feature__text { margin: 0; color: var(--mb-muted); }
.mb-section--rust .mb-feature__text { color: var(--mb-ivory); opacity: .9; }
/* Cartes piliers/features : de l'air entre le badge d'icône et le libellé */
.mb-pillars .mb-card .mb-icon-badge { margin-bottom: .9rem; }

/* --- Liste de métiers (cartes « Ce que je recrute ») : puces sobres, alignées
   sur le libellé (pas d'indentation par défaut), sans coches (ce sont des
   postes, pas des bénéfices). --- */
/* padding: 0 !important → une règle de thème impose padding-left:34px aux <ul>,
   ce qui décalait les métiers par rapport à leur titre. */
.mb-roles { list-style: none; margin: .25rem 0 0; padding: 0 !important; display: grid; gap: .5rem; }
.mb-roles li {
  position: relative; padding-left: 1rem; min-width: 0; overflow-wrap: break-word;
  color: var(--mb-ink); font-size: .95rem; line-height: 1.35;
}
.mb-roles li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 7px; height: 1.5px; border-radius: 1px; background: var(--mb-terracotta);
}

/* ======================================================================
   Page Offre — hero « format post » (reprend le visuel des annonces)
   ====================================================================== */
.mb-offre-hero {
  background: linear-gradient(160deg, var(--mb-rust) 0%, var(--mb-rust-dark) 100%);
  color: var(--mb-ivory);
  border-radius: var(--mb-radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.mb-offre-hero h1 { color: #fff; margin: 0 0 .5rem; }
.mb-offre-hero__lieu {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 1.1rem; color: var(--mb-ivory); margin-bottom: 1.5rem;
}
.mb-offre-hero__lieu svg { width: 20px; height: 20px; }

/* Grille des caractéristiques (établissement, périmètre, contrat, rému…) */
.mb-offre-meta { display: grid; gap: 1rem 1.5rem; margin: 0; padding: 0; }
@media (min-width: 600px) { .mb-offre-meta { grid-template-columns: 1fr 1fr; } }
.mb-offre-meta .mb-feature__label { color: #fff; }
.mb-offre-hero .mb-feature__text { color: var(--mb-ivory); opacity: 1; }

/* Grille des dernières offres (accueil) : 4 offres → 1 col. / 2×2 / 4 en ligne.
   Colonnes explicites (pas d'auto-fill) : garantit qu'il n'y a jamais d'orpheline. */
.mb-offres .wp-block-post-template.is-layout-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .mb-offres .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .mb-offres .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Cartes offres (accueil + archive) : relief, filet haut terracotta, survol */
.mb-offres .mb-card,
.mb-card--offre {
  position: relative;
  border-top: 3px solid var(--mb-terracotta);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mb-offres .mb-card:hover,
.mb-card--offre:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(34,26,22,.14);
}
.mb-offres .mb-card .wp-block-post-title a { color: var(--mb-espresso); text-decoration: none; }
.mb-offres .mb-card .wp-block-post-title a:hover { color: var(--mb-terracotta); }
/* Terme « ville » : mention discrète sous le titre */
.mb-offres .mb-card .taxonomy-ville {
  color: var(--mb-muted); font-size: .95rem;
}
/* Terme « secteur » : même pastille que sur l'archive, pour un langage commun */
.mb-offres .mb-card .taxonomy-secteur {
  /* La carte est en flux bloc (layout constrained) : sans inline-block la
     pastille s'étirerait sur toute la largeur. */
  display: inline-block;
  width: fit-content;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mb-terracotta) 12%, transparent);
  color: var(--mb-copper-dark);
  font-size: .78rem;
  font-weight: 600;
}
.mb-offres .mb-card .taxonomy-secteur a { color: inherit; text-decoration: none; }
/* Lien « Lire l'offre » : traité comme une action, pas du texte courant */
.mb-offres .mb-card .wp-block-post-excerpt__more-link {
  display: inline-block; margin-top: .35rem;
  color: var(--mb-copper-dark); font-weight: 600; text-decoration: none;
}
.mb-offres .mb-card .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }

/* --- Card offre (archive) --- */
.mb-card--offre { display: flex; flex-direction: column; gap: .5rem; height: 100%; }
.mb-card--offre .mb-tag {
  align-self: flex-start;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  color: var(--mb-copper-dark);
  border: 1px solid var(--mb-sand); border-radius: 999px;
  padding: .25rem .7rem;
}
.mb-card--offre h3 { margin: .25rem 0; }
.mb-card--offre .mb-card__lieu { color: var(--mb-muted); font-size: .95rem; display: inline-flex; align-items: center; gap: .35rem; }
/* Icônes inline (hors badge) : taille contrainte */
.mb-card__lieu svg,
.mb-offre-hero__lieu svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ======================================================================
   FAQ (accordéon natif <details> — Schema FAQPage)
   ====================================================================== */
.mb-faq { display: grid; gap: .75rem; max-width: 760px; margin-inline: auto; }
.mb-faq details {
  border: 1px solid var(--mb-sand);
  border-radius: var(--mb-radius);
  background: var(--mb-white);
  padding: 0 1.25rem;
}
.mb-faq summary {
  font-family: var(--mb-font-title); font-size: 1.15rem; color: var(--mb-espresso);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0;
}
.mb-faq summary::-webkit-details-marker { display: none; }
.mb-faq summary::after { content: "+"; font-size: 1.5rem; color: var(--mb-terracotta); transition: transform .2s; }
.mb-faq details[open] summary::after { transform: rotate(45deg); }
.mb-faq details > p { margin: 0 0 1.1rem; color: var(--mb-muted); }

/* ======================================================================
   Formulaires — maquette CSS (en attendant Fluent Forms)
   ====================================================================== */
.mb-form {
  background: var(--mb-white);
  border: 1px solid var(--mb-sand);
  border-radius: var(--mb-radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--mb-shadow-sm);
  display: grid; gap: 1.1rem;
  max-width: 720px; margin-inline: auto;
}
.mb-form__row { display: grid; gap: 1.1rem; }
@media (min-width: 600px) { .mb-form__row--2 { grid-template-columns: 1fr 1fr; } }
.mb-field { display: grid; gap: .35rem; }
.mb-field label { font-weight: 700; font-size: .9rem; color: var(--mb-espresso); }
.mb-field input,
.mb-field select,
.mb-field textarea {
  font-family: var(--mb-font-body); font-size: 1rem;
  padding: .75rem .9rem;
  border: 1.5px solid var(--mb-sand); border-radius: var(--mb-radius);
  background: var(--mb-cream); color: var(--mb-ink);
  width: 100%;
}
.mb-field input:focus,
.mb-field select:focus,
.mb-field textarea:focus {
  outline: none; border-color: var(--mb-terracotta);
  background: #fff;
}
.mb-field textarea { min-height: 120px; resize: vertical; }
.mb-form__consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--mb-muted); }
.mb-form__note { font-size: .82rem; color: var(--mb-muted); margin: 0; }

/* ======================================================================
   Choix candidat / établissement (page Échanger)
   ====================================================================== */
.mb-split { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .mb-split { grid-template-columns: 1fr 1fr; } }
.mb-split__card {
  border: 1px solid var(--mb-sand); border-radius: var(--mb-radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem); background: var(--mb-white);
  text-align: center;
  display: flex; flex-direction: column;
}
/* Le CTA (dernier paragraphe) est poussé en bas → boutons alignés entre cartes */
.mb-split__card > p:last-child { margin-top: auto; margin-bottom: 0; }
.mb-split__card--rust {
  background: linear-gradient(160deg, var(--mb-rust) 0%, var(--mb-rust-dark) 100%);
  color: var(--mb-ivory); border: 0;
}
.mb-split__card--rust h3, .mb-split__card--rust p { color: #fff; }
/* Carte rust : badge d'icône et CTA lisibles sur le fond terracotta */
.mb-split__card--rust .mb-icon-badge {
  border-color: rgba(255,255,255,.6); color: #fff; background: rgba(255,255,255,.12);
}
.mb-split__card--rust .mb-btn { background: var(--mb-ivory); color: var(--mb-copper-dark); }
.mb-split__card--rust .mb-btn:hover { background: #fff; color: var(--mb-copper-dark); }

/* --- Grille de piliers (Ma démarche) --- */
.mb-pillars { display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .mb-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .mb-pillars { grid-template-columns: repeat(3, 1fr); } }
/* Variante 2×2 (grille de 4 cartes, pour éviter l'orpheline 3+1) */
.mb-pillars--2col { max-width: 820px !important; margin-inline: auto; }
@media (min-width: 900px) { .mb-pillars--2col { grid-template-columns: repeat(2, 1fr); } }

/* ======================================================================
   Correctifs UX (audit page Candidats) — s'appliquent partout où c'est utile
   ====================================================================== */

/* --- FluentForm : aligner sur la charte (le formulaire échappe au design
   system, rendu FluentForm par défaut). !important pour battre les styles
   injectés par FluentForm (scoped .fluent_form_X). --- */
.fluentform {
  background: var(--mb-white);
  border: 1px solid var(--mb-sand);
  border-radius: var(--mb-radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 2px 20px rgba(34, 26, 22, .05);
  max-width: 720px !important; /* bat la règle FluentForm scopée .fluentform_wrapper_N */
  margin-inline: auto;
}
.fluentform .ff-el-form-control {
  font-family: var(--mb-font-body) !important;
  border: 1.5px solid var(--mb-sand) !important;
  background: var(--mb-cream) !important;
  border-radius: var(--mb-radius);
}
.fluentform .ff-el-form-control:focus {
  border-color: var(--mb-terracotta) !important;
  background: #fff !important;
  outline: none;
}
.fluentform .ff-btn-submit {
  background: var(--mb-terracotta) !important;
  font-weight: 700;
  padding: .85rem 1.5rem;
  border-radius: var(--mb-radius);
}
.fluentform .ff-btn-submit:hover { background: var(--mb-copper-dark) !important; }

/* --- Texte secondaire "muted" (preset color WP vide → rendait en encre pleine) --- */
.has-muted-color { color: var(--mb-muted) !important; }
.mb-hero .has-muted-color,
.mb-section--rust .has-muted-color,
.mb-section--espresso .has-muted-color { color: var(--mb-ivory) !important; }

/* --- Chapô (has-large-font-size) : rendait à 32px et concurrençait le titre au-dessus
   (hero ET sections de contenu comme « Le constat »). WP met !important sur ces classes. --- */
.mb-section p.has-large-font-size { font-size: clamp(1.15rem, 1rem + .6vw, 1.35rem) !important; }

/* --- Section proximité (rust) : image plus présente (moins de vide autour) --- */
@media (min-width: 768px) {
  .mb-section--rust .mb-figure--sm { max-width: 460px; }
}

/* --- Parcours 4 étapes : réserver 2 lignes au titre pour aligner les descriptions --- */
@media (min-width: 768px) {
  .mb-steps h3:not(.mb-step__num) { min-height: 2.3em; }
}

/* ======================================================================
   Correctifs UX (audit page Ma démarche)
   ====================================================================== */

/* --- Timeline : compacter chaque entrée (une règle globale sur <p> imposait 32px
   de marge entre année / rôle / description → l'unité se lisait éclatée) --- */
.mb-timeline__year { margin: 0 !important; }
.mb-timeline__role { margin: .2rem 0 0 !important; }
.mb-timeline__desc { margin: .4rem 0 0 !important; }

/* --- « En deux mots » : portrait plafonné pour resserrer la section (le portrait
   de 506px imposait une grande zone vide face à un texte de 183px) --- */
.mb-section--tight .mb-figure--portrait { max-width: 320px; }

/* --- Boutons : égaliser la hauteur du plein et du contour (la bordure du contour
   ajoutait ~2px) via une bordure transparente sur le plein --- */
.wp-block-button.is-style-mb .wp-block-button__link { border: 1.5px solid transparent; }

/* --- Mobile : les groupes de 2+ boutons passent en pleine largeur (fini l'effet
   escalier des largeurs différentes) --- */
@media (max-width: 600px) {
  .wp-block-buttons:has(.wp-block-button:nth-child(2)) .wp-block-button { width: 100%; }
  .wp-block-buttons:has(.wp-block-button:nth-child(2)) .wp-block-button__link { display: block; text-align: center; }
}

/* --- Portrait Marine (hero + parcours) : cadre + grade chaud de marque --- */
.mb-portrait-fig {
  position: relative;
  display: block;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  border-radius: var(--mb-radius-lg);
  overflow: hidden;
  box-shadow: var(--mb-shadow-md);
  border: 1px solid var(--mb-sand);
}
.mb-portrait-fig .mb-portrait {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Léger vignettage bas pour l'ancrage de la légende (pas de teinte sur la peau) */
.mb-portrait-fig::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(34,26,22,.18));
  pointer-events: none;
}
/* Portrait nu (repli sans figure) */
.mb-portrait {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  border-radius: var(--mb-radius-lg);
  box-shadow: var(--mb-shadow-md);
  object-fit: cover;
}
.mb-portrait--round { border-radius: 999px; max-width: 320px; aspect-ratio: 1; }

/* Hero d'accueil : portrait un cran plus compact */
.mb-section--espresso .mb-portrait-fig { max-width: 360px; }

/* Section Vision : encart plus resserré (largeur + hauteur) */
.mb-vision { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.mb-vision .mb-quote { font-size: clamp(1.4rem, 1rem + 1.6vw, 1.9rem); line-height: 1.4; }
/* Petit filet terracotta pour assumer la vision comme une accroche manifeste. */
.mb-vision .mb-quote::before {
  content: ""; display: block; width: 48px; height: 3px; border-radius: 2px;
  background: var(--mb-terracotta); margin: 0 auto 1.6rem;
}

/* Mots-clés en ligne (bloc candidat) : rythme fin séparé de points terracotta */
.mb-keywords {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: .5rem 1.4rem;
  list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.mb-keywords li {
  position: relative;
  font-family: var(--mb-font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; font-size: .82rem;
  color: var(--mb-espresso);
}
.mb-keywords li:not(:first-child)::before {
  content: "·"; color: var(--mb-terracotta);
  font-weight: 700; margin-right: 1.4rem;
}

/* ======================================================================
   Header — logo + navigation (Kadence)
   ====================================================================== */
.site-header .site-branding .custom-logo,
.site-header .site-branding img.custom-logo,
.site-branding a img { height: 56px !important; width: auto !important; }
/* Masque le titre texte (doublon du logo) */
.site-header .site-title,
.site-branding .site-title { display: none !important; }
.site-header-row .site-container { align-items: center; }
/* Liens de menu : couleur de marque + état actif */
.site-header .header-navigation a { font-family: var(--mb-font-body); font-weight: 600; }
.site-header .header-navigation .current-menu-item > a { color: var(--mb-terracotta); }
.site-header { border-bottom: 1px solid var(--mb-sand); }

/* ======================================================================
   Footer personnalisé
   ====================================================================== */
.mb-footer {
  background: var(--mb-terre); /* aplat uni « terre battue », assorti aux en-têtes */
  color: var(--mb-cream);
  padding-block: var(--mb-space-xl);
}
.mb-footer .mb-wrap { max-width: var(--mb-maxw); margin-inline: auto; padding-inline: 1.25rem; }
.mb-footer__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .mb-footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr; } }
.mb-footer__logo { display: inline-block; }
.mb-footer__logo svg { height: 60px; width: auto; }
.mb-footer__brand p { color: var(--mb-ivory); opacity: .8; max-width: 38ch; margin: 1rem 0 0; }
.mb-footer__loc { font-size: .85rem; letter-spacing: .06em; opacity: .6 !important; }
.mb-footer h3 {
  font-family: var(--mb-font-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; font-size: .8rem; color: var(--mb-ivory); opacity: .7;
  margin: 0 0 1rem;
}
.mb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.mb-footer a { color: var(--mb-cream); text-decoration: none; }
/* Hovers en clair : sur l'aplat terre battue, le terracotta manquait de contraste. */
.mb-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mb-footer__contact .mb-footer__cta { margin-top: 1.25rem; color: #fff; border-color: rgba(255,255,255,.7); }
.mb-footer__contact .mb-footer__cta:hover { background: var(--mb-cream); border-color: var(--mb-cream); color: var(--mb-terre); }
.mb-footer .mb-divider { background: rgba(255,255,255,.15); margin-block: var(--mb-space-l); }
.mb-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .85rem;
}
.mb-footer__bottom p { margin: 0; opacity: .65; }
.mb-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --- Réassurance : preuves en ligne --- */
.mb-proofs { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .mb-proofs { grid-template-columns: repeat(4, 1fr); } }
.mb-proof { text-align: center; }
.mb-proof .mb-icon-badge { margin-inline: auto; margin-bottom: .6rem; }
.mb-proof strong { display: block; font-family: var(--mb-font-title); font-size: 1.05rem; }

/* ===================================================================
   Refresh premium — timeline parcours, imagerie d'ambiance, signature
   =================================================================== */

/* --- Grille offres (archive) : remplit la ligne, pas d'orpheline --- */
.mb-offres-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  justify-content: start;
}

/* --- Filtre par secteur (pastilles) --- */
.mb-offre-filters {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  margin-bottom: 2.5rem;
}
.mb-filter {
  font-family: var(--mb-font-body); font-weight: 700; font-size: .9rem;
  color: var(--mb-ink); background: transparent;
  border: 1.5px solid var(--mb-sand); border-radius: 999px;
  padding: .5rem 1.15rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mb-filter:hover { border-color: var(--mb-terracotta); color: var(--mb-terracotta); }
.mb-filter.is-active {
  background: var(--mb-terracotta); border-color: var(--mb-terracotta); color: #fff;
}
.mb-filter__count { font-size: .78em; opacity: .65; font-weight: 700; }
.mb-filter.is-active .mb-filter__count { opacity: .85; }

/* Tags de carte (contrat + secteur) sur une même ligne */
.mb-card--offre .mb-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; align-self: flex-start; }
.mb-card--offre .mb-tag--secteur {
  border-color: transparent;
  background: color-mix(in srgb, var(--mb-terracotta) 12%, transparent);
  color: var(--mb-copper-dark);
}
.mb-offres-empty-filter { text-align: center; color: var(--mb-muted); margin-top: 1.5rem; }

/* --- Timeline parcours (remplace les listes à coches pour le CV) --- */
.mb-timeline {
  position: relative;
  display: grid;
  gap: 1.4rem;
  margin-top: .5rem;
  padding-left: 1.75rem;
}
.mb-timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: .45rem; bottom: .45rem;
  width: 2px;
  background: linear-gradient(var(--mb-terracotta), var(--mb-sand));
}
.mb-timeline__item { position: relative; min-width: 0; }
.mb-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1.75rem + 1px); top: .3rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--mb-terracotta);
  box-shadow: 0 0 0 4px var(--mb-cream);
}
.mb-timeline__year {
  font-family: var(--mb-font-title);
  font-weight: 700;
  color: var(--mb-copper-dark);
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mb-timeline__role { font-weight: 700; line-height: 1.3; margin: .1rem 0 0; overflow-wrap: break-word; }
.mb-timeline__role span { font-weight: 400; color: var(--mb-muted); }
.mb-timeline__desc { color: var(--mb-muted); margin: .15rem 0 0; overflow-wrap: break-word; }

/* --- Figure d'ambiance (image + grade chaud de marque) --- */
.mb-figure {
  position: relative;
  border-radius: var(--mb-radius-lg);
  overflow: hidden;
  box-shadow: var(--mb-shadow-md);
  border: 1px solid rgba(34,26,22,.06);
  margin: 0;
}
.mb-figure img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
/* Variante réduite (image carrée, plus petite, centrée dans sa colonne) */
.mb-figure--sm { max-width: 320px; margin-inline: auto; }
.mb-figure--sm img { aspect-ratio: 1 / 1; }
/* Variante portrait (photo verticale montrée sans recadrage) */
.mb-figure--portrait { max-width: 380px; margin-inline: auto; }
.mb-figure--portrait img { aspect-ratio: 3 / 4; }
.mb-figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(176,110,67,.20), rgba(34,26,22,.28));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* --- Bande d'ambiance pleine largeur avec accroche --- */
.mb-band {
  position: relative;
  margin-block: 0;
  min-height: clamp(240px, 36vw, 420px);
  display: grid; place-items: center;
  background-size: cover; background-position: center 40%;
  text-align: center;
}
.mb-band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(34,26,22,.55), rgba(34,26,22,.65));
}
.mb-band__inner { position: relative; z-index: 1; max-width: 760px; padding: clamp(2rem,6vw,4rem) 1.5rem; color: #fff; }
.mb-band__inner p { color: #fff; }
.mb-band__quote {
  font-family: var(--mb-font-title);
  font-style: italic;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  line-height: 1.3;
  margin: 0;
}

/* --- Signature mise en valeur (hero accueil) --- */
.mb-signature {
  font-family: var(--mb-font-title);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.35;
  padding-left: 1.1rem;
  border-left: 3px solid var(--mb-terracotta);
}
.mb-section--espresso .mb-signature { border-left-color: var(--mb-terracotta); }

/* --- Boutons de contact (Échanger) avec icônes --- */
.mb-contact-cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.25rem; }
.mb-contact-cta .mb-btn { display: inline-flex; align-items: center; gap: .5rem; }
.mb-contact-cta svg { width: 18px; height: 18px; }
/* Mobile : boutons de contact empilés en pleine largeur (fini l'escalier) */
@media (max-width: 600px) {
  .mb-contact-cta { flex-direction: column; align-items: stretch; }
  .mb-contact-cta .mb-btn { width: 100%; justify-content: center; }
}

/* --- Sécurité : pas de mot coupé dans les listes flex --- */
.mb-list li { min-width: 0; overflow-wrap: break-word; }

/* ======================================================================
   Hero (dégradé chaud marque) + header transparent → plein au scroll
   Appliqué à toutes les pages ayant une section .mb-hero en tête.
   ====================================================================== */

/* Hero : aplat uni « terre battue » (remplace l'ancien dégradé espresso → terracotta). */
.mb-hero {
  background: var(--mb-terre) !important;
}

/* CTA du hero sur terre battue : hiérarchie par position (le 1er bouton est le
   principal, quel que soit son style is-style-* — le rôle candidat/établissement
   s'inverse selon les pages). Principal = crème plein (ressort au maximum),
   secondaire = contour clair. Bat les styles is-style-mb / is-style-mb-light. */
.mb-hero .wp-block-buttons .wp-block-button:first-child .wp-block-button__link {
  background: var(--mb-cream) !important;
  color: var(--mb-espresso) !important;
  border: 1.5px solid var(--mb-cream) !important;
}
.mb-hero .wp-block-buttons .wp-block-button:first-child .wp-block-button__link:hover {
  background: #fff !important;
  border-color: #fff !important;
}
.mb-hero .wp-block-buttons .wp-block-button:not(:first-child) .wp-block-button__link {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, .7) !important;
}
.mb-hero .wp-block-buttons .wp-block-button:not(:first-child) .wp-block-button__link:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: #fff !important;
}
/* Le hero passe sous le header transparent : on dégage sa hauteur */
body:has(.mb-hero) .mb-hero { padding-top: calc(84px + clamp(1.5rem, 4vw, 3.5rem)); }
/* Les colonnes flex du hero ne sont pas centrées par le layout WP (règle :where
   de spécificité 0, écrasée) : on force largeur pleine + centrage explicite. */
.mb-hero > .wp-block-columns { width: 100%; max-width: 1180px; margin-inline: auto; }
/* Titre de hero : échelle fluide propre (le preset xx-large de WP est vide → le H1
   retombait sur le défaut Kadence 32px, figé). On lui rend une vraie dominante. */
.mb-hero h1 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.4rem); line-height: 1.08; }

/* Header transparent posé au-dessus du hero (uniquement pages avec hero) */
body:has(.mb-hero) .site-header {
  position: fixed !important; inset: 0 0 auto 0 !important; z-index: 99;
  background: transparent !important; border-bottom: 0 !important;
  transition: background .25s ease, box-shadow .25s ease;
}
body:has(.mb-hero) .site-header .site-header-wrap,
body:has(.mb-hero) .site-header #main-header { background: transparent !important; }

/* Logo clair + nav ivoire sur le hero sombre */
body:has(.mb-hero) .site-branding a.brand {
  display: inline-block; width: 200px; height: 56px;
  background: url(../img/logo-header-light.svg) left center / contain no-repeat;
}
body:has(.mb-hero) .site-branding a.brand img { visibility: hidden; }
body:has(.mb-hero) .header-navigation a { color: var(--mb-ivory) !important; }
body:has(.mb-hero) .header-navigation .current-menu-item > a { color: #fff !important; }
/* Hamburger mobile : ivoire sur le hero sombre */
body:has(.mb-hero) .menu-toggle-open,
body:has(.mb-hero) .menu-toggle-open .menu-toggle-icon { color: var(--mb-ivory) !important; }

/* Au scroll : barre pleine crème + logo foncé d'origine + nav encre */
body:has(.mb-hero) .site-header.mb-header-solid {
  background: var(--mb-cream) !important;
  box-shadow: 0 2px 16px rgba(34,26,22,.12);
}
body:has(.mb-hero) .site-header.mb-header-solid .site-branding a.brand { background: none; }
body:has(.mb-hero) .site-header.mb-header-solid .site-branding a.brand img { visibility: visible; }
body:has(.mb-hero) .site-header.mb-header-solid .header-navigation a { color: var(--mb-ink) !important; }
body:has(.mb-hero) .site-header.mb-header-solid .header-navigation .current-menu-item > a { color: var(--mb-terracotta) !important; }
body:has(.mb-hero) .site-header.mb-header-solid .menu-toggle-open,
body:has(.mb-hero) .site-header.mb-header-solid .menu-toggle-open .menu-toggle-icon { color: var(--mb-ink) !important; }

/* ======================================================================
   Header « deux voies » — regroupement par audience (filets desktop +
   intertitres drawer), « Échanger » en CTA, état actif visible.
   ====================================================================== */

/* --- Desktop : filets de séparation au début de chaque groupe --- */
.header-navigation .menu > li.mb-nav-grp { position: relative; margin-left: .4rem; padding-left: 1.2rem; }
.header-navigation .menu > li.mb-nav-grp::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 1.3em; border-radius: 1px;
}
body:has(.mb-hero) .header-navigation li.mb-nav-grp::before { background: var(--mb-ivory); opacity: .32; }
body:has(.mb-hero) .site-header.mb-header-solid .header-navigation li.mb-nav-grp::before { background: var(--mb-sand); opacity: 1; }

/* --- « Échanger » en bouton CTA --- */
.header-navigation .menu > li.mb-nav-cta { margin-left: .7rem; }
.header-navigation .menu > li.mb-nav-cta > a {
  background: var(--mb-terracotta); padding: .5rem 1.2rem; border-radius: 999px;
  transition: background .2s ease;
}
.header-navigation .menu > li.mb-nav-cta > a:hover { background: var(--mb-copper-dark); }
body:has(.mb-hero) .site-header .header-navigation li.mb-nav-cta > a,
body:has(.mb-hero) .site-header.mb-header-solid .header-navigation li.mb-nav-cta > a { color: #fff !important; }

/* --- État actif visible (souligné terracotta), hors CTA --- */
.header-navigation .current-menu-item:not(.mb-nav-cta) > a { position: relative; }
.header-navigation .current-menu-item:not(.mb-nav-cta) > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px; background: var(--mb-terracotta);
}

/* --- Drawer mobile : refonte charte (était fond noir, actif bleu, 14px) --- */
#mobile-drawer .drawer-content {
  background: linear-gradient(200deg, var(--mb-rust) -10%, #3a241a 48%, var(--mb-espresso) 110%) !important;
}
#mobile-drawer .drawer-inner { padding: 2.2rem 1.6rem; }
#mobile-drawer .menu,
#mobile-drawer .menu > li.menu-item { border: 0 !important; }
#mobile-drawer .menu > li.menu-item > a {
  color: var(--mb-ivory) !important;
  font-family: var(--mb-font-body); font-weight: 600; font-size: 1.05rem !important;
  padding: .55rem 0 !important;
}
#mobile-drawer .menu > li.current-menu-item > a { color: #fff !important; }
#mobile-drawer .menu-toggle-close { color: var(--mb-ivory) !important; }
/* Intertitres de groupe (drawer uniquement) */
#mobile-drawer .menu > li.mb-nav-grp::before {
  display: block; font-family: var(--mb-font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; font-size: .72rem;
  color: var(--mb-terracotta); margin: 1.5rem 0 .2rem;
}
#mobile-drawer .menu > li.mb-nav-grp--candidats::before { content: "Pour les candidats"; }
#mobile-drawer .menu > li.mb-nav-grp--etab::before { content: "Pour les établissements"; }
#mobile-drawer .menu > li.mb-nav-grp--apropos::before { content: "À propos"; }
/* CTA « Échanger » plein en bas du drawer */
#mobile-drawer .menu > li.mb-nav-cta { margin-top: 1.8rem; }
#mobile-drawer .menu > li.mb-nav-cta > a {
  background: var(--mb-terracotta); color: #fff !important;
  text-align: center; border-radius: 999px; padding: .85rem 1.2rem !important; font-weight: 700;
}

/* --- Maillage interne des pages métier × ville --- */
/* Deux colonnes de liens traités comme des pastilles cliquables : le maillage
   doit se voir et s'utiliser, pas ressembler à un pied de page dupliqué. */
.mb-maillage {
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 782px) {
  .mb-maillage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mb-maillage__list {
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.mb-maillage__list li { margin: 0; }
.mb-maillage__list a {
  display: inline-block;
  padding: .45rem .95rem;
  border: 1px solid var(--mb-sand);
  border-radius: 999px;
  background: var(--mb-white);
  color: var(--mb-copper-dark);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.mb-maillage__list a:hover,
.mb-maillage__list a:focus-visible {
  background: var(--mb-terracotta);
  border-color: var(--mb-terracotta);
  color: var(--mb-white);
}

/* Mini-réponse sous un H2 (AEO) : le paragraphe que l'IA doit extraire.
   Légèrement détaché du développement qui suit, sans devenir un encadré. */
.mb-lead {
  color: var(--mb-espresso);
  font-weight: 500;
  line-height: 1.55;
  margin-bottom: 1.4rem;
}

/* --- Sources citées (E-E-A-T) --- */
/* Discret : la source crédibilise sans concurrencer le contenu. */
.mb-sources ul {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.mb-sources li { font-size: .88rem; color: var(--mb-muted); }
.mb-sources a { color: var(--mb-muted); text-decoration: underline; text-underline-offset: 3px; }
.mb-sources a:hover { color: var(--mb-terracotta); }

/* --- Schéma « recrutement inversé » --- */
/* Visuel entièrement CSS : porte le concept sans dépendre d'un shooting.
   Les deux chaînes se lisent en miroir — c'est l'inversion qui fait le sens. */
.mb-inversion {
  display: grid;
  gap: .9rem;
}
.mb-inversion__row {
  border-radius: var(--mb-radius);
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--mb-sand);
  background: var(--mb-white);
}
.mb-inversion__row--new {
  background: linear-gradient(160deg, var(--mb-rust) 0%, var(--mb-rust-dark) 100%);
  border-color: transparent;
  color: var(--mb-ivory);
}
.mb-inversion__label {
  font-family: var(--mb-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: var(--mb-copper-dark);
  margin: 0 0 .6rem;
}
.mb-inversion__row--new .mb-inversion__label { color: var(--mb-ivory); opacity: .85; }

/* Sélecteur redoublé : Kadence impose un padding-left de 2em aux <ol> avec une
   spécificité supérieure, ce qui désalignait la chaîne de son label. */
.mb-inversion .mb-inversion__chain {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .55rem;
}
.mb-inversion__chain li {
  font-family: var(--mb-font-title);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--mb-espresso);
  margin: 0;
}
.mb-inversion__row--new .mb-inversion__chain li { color: #fff; }
/* Chevron de liaison entre deux maillons (pas après le dernier). */
.mb-inversion__chain li + li::before {
  content: "›";
  display: inline-block;
  margin-right: .55rem;
  color: var(--mb-terracotta);
  font-weight: 700;
}
.mb-inversion__row--new .mb-inversion__chain li + li::before { color: var(--mb-ivory); opacity: .7; }
/* Le maillon d'arrivée est la promesse : on l'appuie. */
.mb-inversion__row--new .mb-inversion__chain li:last-child { font-weight: 700; }
/* L'ancien réflexe est montré comme dépassé, sans être illisible. */
.mb-inversion__row--old .mb-inversion__chain li { color: var(--mb-muted); }

/* --- Bande photo de ville (pages métier × ville) --- */
/* Pleine largeur, ratio verrouillé : l'image ne doit provoquer aucun décalage
   de mise en page pendant le chargement (CLS). */
.mb-band-ville {
  margin: 0 !important;
  line-height: 0;
  background: var(--mb-espresso);
}
.mb-band-ville img {
  display: block;
  width: 100%;
  height: clamp(220px, 32vw, 400px);
  object-fit: cover;
  object-position: center 50%;
}
/* Pas de filet de séparation autour de la bande : le changement de nature
   visuelle suffit, comme pour .mb-band. */
.mb-band-ville + .mb-section { border-top: 0; }

/* ======================================================================
   Blog « Ressources » — articles (guides & actualités)
   ====================================================================== */

/* En-tête de section sur l'archive Ressources */
.mb-section__head { text-align: center; max-width: 640px; margin-inline: auto; }
.mb-section__head p { margin-top: .5rem; }

/* Méta d'article : date · temps de lecture */
.mb-article__meta {
  margin-top: 1rem;
  color: var(--mb-ivory);
  opacity: .8;
  font-size: .95rem;
  display: inline-flex;
  gap: .6rem;
  align-items: center;
}

/* Image à la une : pleine largeur, ratio verrouillé (pas de CLS) */
.mb-article__cover { margin: 0; line-height: 0; background: var(--mb-espresso); }
.mb-article__cover img {
  display: block;
  width: 100%;
  height: clamp(240px, 40vw, 480px);
  object-fit: cover;
}

/* Corps d'article : colonne de lecture confortable */
.mb-article__body { max-width: 760px; }
.mb-article__content { font-size: 1.08rem; }

/* Sommaire (guides) : encadré discret au-dessus du contenu */
.mb-toc {
  background: var(--mb-ivory);
  border: 1px solid var(--mb-sand);
  border-radius: var(--mb-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.mb-toc ol { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.mb-toc a { color: var(--mb-copper-dark); text-decoration: none; }
.mb-toc a:hover { color: var(--mb-terracotta); text-decoration: underline; }

/* Encadré « conseil de Marine » dans un article */
.mb-callout {
  background: color-mix(in srgb, var(--mb-terracotta) 8%, var(--mb-white));
  border-left: 3px solid var(--mb-terracotta);
  border-radius: var(--mb-radius);
  padding: 1.25rem 1.5rem !important;
  margin-block: 2rem;
}
.mb-callout .mb-eyebrow { margin-bottom: .35rem; }
.mb-callout p:last-child { margin-bottom: 0; }

/* Prose : rythme de lecture des articles */
.mb-prose > * + * { margin-top: 1.15rem; }
.mb-prose h2 { margin-top: 2.5rem; }
.mb-prose h3 { margin-top: 1.75rem; }
.mb-prose ul, .mb-prose ol { padding-left: 1.3rem; display: grid; gap: .4rem; }
.mb-prose li { margin: 0; }
/* Ancrage : le titre visé ne se colle pas sous le header au clic du sommaire */
.mb-prose h2[id] { scroll-margin-top: 90px; }