/*
 * Composants du thème MVMA : en-tête, bannière, rangées d'articles, section de
 * page réemployée, pied de page.
 *
 * Y figure aussi l'habillage des blocs du plugin `ved-mvma` que le site rend —
 * les pubs sur la une, le moteur de recherche DANS un article. Leurs feuilles
 * n'apportent que la structure ; la mise en forme est une affaire de thème, et
 * c'est ici qu'elle se décide. Les sélecteurs y sont volontairement plus
 * spécifiques que ceux du plugin : l'ordre d'insertion des feuilles ne doit
 * jamais décider du rendu.
 */

/* ======================================================================
   En-tête — une seule ligne, toujours
   ====================================================================== */

.c-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mvma-white);
  border-bottom: 1px solid rgba(8, 61, 145, 0.08);
  transition: box-shadow 0.2s ease;
}

.c-header.-scrolled {
  box-shadow: var(--mvma-shadow-soft);
}

.c-header__skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1.25rem;
  background: var(--mvma-night);
  color: var(--mvma-white);
  z-index: 100;
}

.c-header__skip:focus {
  left: 0;
}

/*
  Trois colonnes : logo | navigation | actions. `nowrap` est la règle, pas une
  préférence — une barre qui se plie en deux désaligne le logo et les boutons,
  et c'est exactement ce que la maquette ne montre pas. Sous 72rem le menu
  passe derrière le bouton burger plutôt que de chercher de la place.
*/
.c-header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  max-width: 1320px;
  min-height: var(--mvma-header-height);
  margin-inline: auto;
  padding-inline: var(--mvma-gutter);
}

.c-header__brand {
  flex: none;
  line-height: 0;
}

.c-header__nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.c-header__menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.c-header__link {
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--mvma-night);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.c-header__link:hover,
.c-header__link.-current {
  color: var(--mvma-ocean);
  border-bottom-color: var(--mvma-orange);
}

.c-header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  flex: none;
}

.c-header__search {
  display: none;
  flex: 0 1 18rem;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.25rem 0.25rem 0.9rem;
  border: 1px solid rgba(8, 61, 145, 0.18);
  border-radius: var(--mvma-radius-pill);
  background: var(--mvma-sky);
}

.c-header.-searching .c-header__search {
  display: flex;
}

.c-header__search-field {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.35rem 0;
  color: var(--mvma-ink);
}

.c-header__search-submit,
.c-header__search-toggle {
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--mvma-night);
  padding: 0.5rem;
  border-radius: var(--mvma-radius-pill);
  cursor: pointer;
}

.c-header__search-toggle:hover,
.c-header__search-submit:hover {
  background: var(--mvma-sky);
  color: var(--mvma-ocean);
}

/* La vignette d'agent du plugin prend l'habit du bouton contour du thème,
   sans que le plugin connaisse le thème. */
/*
  L'emplacement de la vignette et le conteneur du plugin qu'il porte étaient
  des blocs : la boîte faisait 41 px là où la pastille en fait 36 — l'écart
  vient de l'interligne d'un enfant en ligne —, et la rangée d'actions centrait
  la boîte, pas la pastille. En 390, la bulle ronde s'en trouvait 3 px plus
  haut que le burger et les jetons FR/EN.
*/
.c-header__vignette-slot,
.c-header__vignette-slot .c-header_vignette {
  display: flex;
  align-items: center;
}

.c-header__vignette-slot .c-agent-vignette__trigger {
  border: 2px solid var(--mvma-night);
  border-radius: var(--mvma-radius-pill);
  background: transparent;
  color: var(--mvma-night);
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
}

.c-header__vignette-slot .c-agent-vignette__trigger:hover {
  background: var(--mvma-night);
  color: var(--mvma-white);
}

.c-header__vignette-slot .c-agent-vignette__trigger.-identified {
  padding: 0.3rem 0.9rem 0.3rem 0.35rem;
}

/*
  Le chevron de la pastille anonyme est peint en blanc par le plugin, dont la
  pastille à lui est orange. Dans cet en-tête, elle est transparente sur fond
  blanc : le chevron y était donc INVISIBLE au repos tout en gardant sa place
  — 8 px et sa gouttière de 10 —, ce qui poussait le libellé hors du centre de
  sa pastille (18 px de marge à gauche, 36 à droite). Il ne se montrait qu'au
  survol, quand le fond passe au bleu nuit : la pastille semblait pousser une
  flèche au passage de la souris.

  L'en-tête n'a aucune autre icône de ce genre — ni les jetons FR/EN, ni le
  bouton « Demande d'information » du héros, qui ouvre la même fenêtre. Le
  libellé suffit, `aria-haspopup="dialog"` dit déjà qu'il ouvre quelque chose,
  et la pastille retrouve ses deux marges égales.
*/
.c-header__vignette-slot .c-agent-vignette__trigger.-anonymous .c-agent-vignette__chevron {
  display: none;
}

.c-header__vignette-slot .c-agent-vignette__name {
  color: inherit;
}

/* --- sélecteur de langue ------------------------------------------------ */

.c-langs {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-langs__link {
  display: inline-block;
  padding: 0.35rem 0.55rem;
  border-radius: var(--mvma-radius-s);
  color: var(--mvma-muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.c-langs__link:hover {
  background: var(--mvma-sky);
  color: var(--mvma-ocean);
}

.c-langs__link.-current {
  color: var(--mvma-night);
  background: var(--mvma-sky);
}

.c-langs.-light {
  gap: 0.5rem;
  margin-top: 1rem;
}

.c-langs.-light .c-langs__link {
  padding: 0.25rem 0.6rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.08);
}

.c-langs.-light .c-langs__link.-current {
  color: var(--mvma-night);
  background: var(--mvma-white);
}

/* --- burger et navigation repliée --------------------------------------- */

.c-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--mvma-radius-s);
  background: var(--mvma-sky);
  cursor: pointer;
}

.c-header__burger-bar {
  display: block;
  height: 2px;
  background: var(--mvma-night);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.c-header__burger[aria-expanded='true'] .c-header__burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.c-header__burger[aria-expanded='true'] .c-header__burger-bar:nth-child(2) {
  opacity: 0;
}

.c-header__burger[aria-expanded='true'] .c-header__burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 72rem) {
  .c-header__inner {
    flex-wrap: wrap;
  }

  .c-header__burger {
    display: flex;
    order: 2;
  }

  .c-header__actions {
    order: 3;
  }

  .c-header__nav {
    display: none;
    order: 4;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding-bottom: 1rem;
  }

  .c-header.-open .c-header__nav {
    display: flex;
  }

  .c-header__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .c-header__item + .c-header__item {
    border-top: 1px solid rgba(8, 61, 145, 0.08);
  }

  .c-header__link {
    padding: 0.85rem 0;
    font-size: 1.05rem;
  }

  /* Le formulaire n'est plus dans le `<nav>` : il suit le panneau du burger
     par sa propre règle, et garde le même comportement qu'avant. */
  .c-header__search {
    order: 5;
    flex: 1 1 auto;
    width: 100%;
  }

  .c-header.-open .c-header__search {
    display: flex;
  }

  .c-header__search-toggle {
    display: none;
  }
}

/* ======================================================================
   Piste de carrousel partagée
   ======================================================================

   Même contrat de DOM que `ved-wp-multi-dev` : une fenêtre qui coupe, un
   conteneur en ligne, des volets qui ne rétrécissent JAMAIS. C'est cette
   dernière règle qui manquait : des volets élastiques se partagent la largeur
   visible au lieu de déborder, et douze cartes finissent à cent pixels de
   large.

   Sans le script Embla, la fenêtre reste une rangée à défilement horizontal
   ordinaire (`overflow-x: auto`) et les flèches sont masquées : la liste se
   parcourt quand même, au doigt comme à la molette.
   ====================================================================== */

.c-carousel {
  position: relative;
  display: block;
}

.c-carousel_viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.c-carousel_viewport::-webkit-scrollbar {
  display: none;
}

/* Embla prend la main sur le défilement : il translate le conteneur, la
   fenêtre n'a plus à défiler elle-même. */
.c-carousel.-ready .c-carousel_viewport {
  overflow: hidden;
  scroll-snap-type: none;
}

.c-carousel_container {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

.c-carousel_slide {
  flex: 0 0 auto;
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
}

.c-carousel_slide > * {
  width: 100%;
}

/* Les flèches n'existent qu'une fois le script en place : sans lui elles ne
   feraient rien. */
.c-carousel_previous,
.c-carousel_next {
  display: none;
}

.c-carousel.-ready .c-carousel_previous,
.c-carousel.-ready .c-carousel_next {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  border: 0;
  border-radius: var(--mvma-radius-pill);
  background: var(--mvma-night);
  color: var(--mvma-white);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(8, 61, 145, 0.28);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.c-carousel_previous {
  left: -0.5rem;
  transform: rotate(180deg);
}

.c-carousel_next {
  right: -0.5rem;
}

.c-carousel.-ready .c-carousel_previous:disabled,
.c-carousel.-ready .c-carousel_next:disabled {
  opacity: 0;
  pointer-events: none;
}

/* Bouton d'arrêt du défilement automatique (WCAG 2.2.2). Présent dans le
   balisage, il n'est utile qu'une fois Embla en place : sans script, rien ne
   défile tout seul et il n'y a rien à arrêter. Posé dans le coin bas droit du
   volet, hors de la trajectoire des flèches. */
.c-carousel_toggle {
  display: none;
}

.c-carousel.-ready .c-carousel_toggle {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--mvma-radius-pill);
  background: rgba(8, 61, 145, 0.75);
  color: var(--mvma-white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/*
  Mouvement réduit demandé par le système : aucun greffon de défilement n'est
  monté, le script pose donc `hidden` sur le bouton — il n'y a rien à arrêter.
  Mais `.c-carousel.-ready .c-carousel_toggle { display: grid }` l'emportait
  sur `[hidden]`, et le bouton restait visible et inerte.
*/
.c-carousel .c-carousel_toggle[hidden] {
  display: none;
}

.c-carousel.-ready .c-carousel_toggle:hover,
.c-carousel.-ready .c-carousel_toggle:focus-visible {
  background: var(--mvma-night);
}

/* Une seule icône à la fois : le bouton dit ce qu'il va FAIRE. */
.c-carousel_toggle .c-icon.-play,
.c-carousel.-paused .c-carousel_toggle .c-icon.-pause {
  display: none;
}

.c-carousel.-paused .c-carousel_toggle .c-icon.-play {
  display: block;
}

.c-carousel_dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
}

.c-carousel_dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: var(--mvma-radius-pill);
  background: rgba(8, 61, 145, 0.25);
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.c-carousel_dot.-current {
  width: 1.4rem;
  background: var(--mvma-orange);
}

/* Trois cartes visibles, la quatrième amorcée : la rangée se lit tout de suite
   comme défilante, sans flèche pour l'annoncer. */
.c-carousel.-articles .c-carousel_slide,
.c-carousel.-packages .c-carousel_slide {
  width: 85vw;
}

@media (min-width: 48rem) {
  .c-carousel.-articles .c-carousel_slide,
  .c-carousel.-packages .c-carousel_slide {
    width: clamp(260px, 42vw, 380px);
  }
}

@media (min-width: 62rem) {
  .c-carousel.-articles .c-carousel_slide,
  .c-carousel.-packages .c-carousel_slide {
    width: clamp(280px, 30%, 380px);
  }
}

/* ======================================================================
   Carrousel d'ouverture
   ====================================================================== */

.c-carousel.-hero {
  background: var(--mvma-night);
}

.c-carousel.-hero .c-carousel_container {
  gap: 0;
}

.c-carousel.-hero .c-carousel_slide {
  width: 100%;
}

.c-carousel.-hero .c-carousel_dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  margin: 0;
}

.c-carousel.-hero .c-carousel_dot {
  background: rgba(255, 255, 255, 0.5);
}

.c-carousel.-hero .c-carousel_dot.-current {
  background: var(--mvma-orange);
}

.c-carousel.-ready.-hero .c-carousel_previous {
  left: 1rem;
}

.c-carousel.-ready.-hero .c-carousel_next {
  right: 1rem;
}

.c-hero_slide {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: max(520px, 60vh);
  padding: clamp(3rem, 7vw, 5rem) 0;
  color: var(--mvma-white);
  overflow: hidden;
}

@media (min-width: 62rem) {
  .c-hero_slide {
    min-height: max(520px, 70vh);
  }
}

.c-hero_media,
.c-hero_image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.c-hero_image {
  object-fit: cover;
}

/* Voile porté par la GAUCHE : les trois photos ont leur sujet à droite et un
   ciel ou un mur calme à gauche, où le titre se pose. */
.c-hero_scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg, rgba(8, 61, 145, 0.92) 0%, rgba(8, 61, 145, 0.72) 38%, rgba(8, 61, 145, 0.08) 72%),
    linear-gradient(0deg, rgba(8, 61, 145, 0.35) 0%, rgba(8, 61, 145, 0) 40%);
}

.c-hero_inner {
  position: relative;
  width: 100%;
  max-width: var(--mvma-wide);
  margin-inline: auto;
  padding-inline: var(--mvma-gutter);
}

.c-hero_eyebrow {
  margin: 0 0 0.25rem;
  font-family: var(--wp--preset--font-family--caveat, Caveat), cursive;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.1;
  color: #ffc069;
}

.c-hero_title {
  margin: 0 0 0.75rem;
  max-width: 18ch;
  font-size: var(--wp--preset--font-size--display-xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--mvma-white);
  text-shadow: 0 2px 20px rgba(8, 61, 145, 0.4);
}

.c-hero_text {
  margin: 0 0 1.75rem;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 10px rgba(8, 61, 145, 0.45);
}

.c-hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

/* ======================================================================
   Cartes
   ====================================================================== */

.c-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--mvma-radius-m);
  overflow: hidden;
  background: var(--mvma-white);
  box-shadow: var(--mvma-shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.c-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mvma-shadow-card);
}

.c-card_link {
  color: inherit;
  text-decoration: none;
}

.c-card.-package .c-card_link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.c-card.-article .c-card_link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Cadre photo à rapport FIXE : une image absente ou en échec ne fait pas
   sauter la hauteur de la carte, et la rangée reste alignée. */
.c-card_media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--mvma-sky);
}

.c-card_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.c-card:hover .c-card_image {
  transform: scale(1.04);
}

.c-card_placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--mvma-ocean);
  opacity: 0.35;
}

.c-card_placeholder .c-icon {
  width: 2.75rem;
  height: 2.75rem;
}

.c-card_body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem 1.1rem;
}

.c-card_eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mvma-muted);
}

.c-card.-article .c-card_eyebrow {
  color: var(--mvma-ocean);
}

.c-card_title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mvma-night);
}

.c-card_excerpt {
  font-size: 0.9rem;
  color: var(--mvma-muted);
}

.c-card_date {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--mvma-muted);
}

.c-card_stars {
  margin: 0;
  color: var(--mvma-orange);
  letter-spacing: 0.06em;
}

.c-card_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.c-chip {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.6rem;
  border-radius: var(--mvma-radius-s);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mvma-white);
  background: var(--mvma-night);
}

.c-chip.-inclusive {
  background: #0f9d58;
}

/* Pastille de prix posée sur la photo, comme la référence du réseau. */
.c-price-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1.1rem 0.6rem;
  border-bottom-right-radius: var(--mvma-radius-s);
  background: var(--mvma-night);
  color: var(--mvma-white);
  text-align: center;
}

.c-price-badge_label,
.c-price-badge_unit {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.c-price-badge_value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
}

/* ======================================================================
   Rangées d'articles
   ====================================================================== */

.c-posts,
.c-packages {
  max-width: var(--mvma-wide);
  margin-inline: auto;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--mvma-gutter);
}

.c-posts_grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

/* ======================================================================
   Forfaits en vedette
   ====================================================================== */

.c-packages {
  max-width: none;
  background: var(--mvma-sky);
}

.c-packages_inner {
  max-width: var(--mvma-wide);
  margin-inline: auto;
}

.c-packages_empty {
  margin: 0;
  color: var(--mvma-muted);
  text-align: center;
}

.c-packages_cta {
  margin: 1.75rem 0 0;
  text-align: center;
}

/* ======================================================================
   Section de page réemployée
   ====================================================================== */

.c-page-section {
  background: var(--mvma-white);
}

.c-section-head.-centered {
  justify-content: center;
  text-align: center;
}

.c-page-section__body {
  max-width: 68rem;
  margin-inline: auto;
}

.c-page-section.-condensed {
  text-align: center;
}

.c-page-section__lead {
  max-width: 44rem;
  margin: 0 auto 1.5rem;
  font-size: 1.1rem;
  color: var(--mvma-ink);
}

.c-page-section__more {
  margin: 0;
}

/* ======================================================================
   Forfaits en vedette (bloc du plugin)
   ====================================================================== */

.c-packages {
  background: var(--mvma-sky);
  max-width: none;
}

.c-packages > * {
  max-width: var(--mvma-wide);
  margin-inline: auto;
}

/* ======================================================================
   Page d'article — mise en page magazine
   ======================================================================

   Photo large, colonne de lecture d'environ 760 px, colonne latérale collante
   à droite. Une colonne étroite au milieu d'une page vide n'est pas une mise
   en page : c'est un gabarit par défaut.
   ====================================================================== */

.c-article-header {
  max-width: var(--mvma-wide);
  margin-inline: auto;
  padding: clamp(1rem, 2.5vw, 1.75rem) var(--mvma-gutter) 0;
}

.c-breadcrumb_list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--mvma-muted);
}

.c-breadcrumb_item + .c-breadcrumb_item::before {
  content: '›';
  margin-right: 0.35rem;
  color: var(--mvma-muted);
}

.c-breadcrumb_item a {
  color: var(--mvma-muted);
  text-decoration: none;
}

.c-breadcrumb_item a:hover {
  color: var(--mvma-ocean);
  text-decoration: underline;
}

.c-article-header_media {
  border-radius: var(--mvma-radius-m);
  overflow: hidden;
  background: var(--mvma-sky);
}

.c-article-header_image {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
}

.c-article-header_body {
  max-width: 48rem;
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  text-align: center;
}

.c-article-header.-compact .c-article-header_body {
  margin-top: 1rem;
}

.c-article-header_eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.c-article-header_eyebrow a {
  color: var(--mvma-ocean);
  text-decoration: none;
}

.c-article-header_title {
  margin: 0;
  font-size: var(--wp--preset--font-size--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--mvma-night);
}

.c-article-header_meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: var(--mvma-muted);
}

.c-article-header_reading {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.c-article-header_reading .c-icon {
  width: 1rem;
  height: 1rem;
}

/* --- corps en deux colonnes -------------------------------------------- */

.c-article {
  max-width: var(--mvma-wide);
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--mvma-gutter);
}

.c-article_body {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .c-article_body {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }
}

.c-article_body.-single {
  grid-template-columns: 1fr;
}

.c-article_reading {
  max-width: 760px;
  min-width: 0;
  margin-inline: auto;
  width: 100%;
}

.c-article_tags {
  margin-top: 2rem;
  color: var(--mvma-muted);
}

/* La colonne latérale suit la lecture plutôt que de défiler hors de vue. */
@media (min-width: 62rem) {
  .c-article_aside {
    position: sticky;
    top: calc(var(--mvma-header-height) + 1rem);
    display: grid;
    gap: 1rem;
  }
}

.c-aside-card {
  padding: 1rem;
  border-radius: var(--mvma-radius-m);
  background: var(--mvma-sky);
}

.c-aside-card.-contact {
  display: flex;
  justify-content: center;
  background: var(--mvma-night);
}

.c-aside-card.-contact .c-agent-vignette__trigger {
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--mvma-radius-pill);
  background: transparent;
  color: var(--mvma-white);
  padding: 0.6rem 1.2rem;
  font-weight: 600;
}

.c-aside-card.-contact .c-agent-vignette__trigger:hover {
  background: var(--mvma-white);
  color: var(--mvma-night);
}

/* Dans la colonne, les rangées perdent leur gouttière et leur fond : elles
   sont déjà dans une carte. */
.c-aside-card .c-posts,
.c-aside-card .c-packages,
.c-aside-card .c-packages_inner {
  max-width: none;
  padding: 0;
  background: transparent;
}

.c-aside-card .c-posts_grid {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.c-aside-card .c-section-head {
  margin-bottom: 0.75rem;
}

.c-aside-card .c-section-head__title {
  font-size: 1.05rem;
}

/* --- partage ------------------------------------------------------------ */

.c-share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(8, 61, 145, 0.12);
}

.c-share_label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mvma-muted);
}

.c-share_list {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-share_link {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(8, 61, 145, 0.2);
  border-radius: var(--mvma-radius-pill);
  background: var(--mvma-white);
  color: var(--mvma-night);
  cursor: pointer;
}

.c-share_link:hover {
  background: var(--mvma-night);
  color: var(--mvma-white);
}

.c-share_copy.-copied {
  background: #0f9d58;
  border-color: #0f9d58;
  color: var(--mvma-white);
}

/* ======================================================================
   Corps d'article normalisé
   ======================================================================

   Le normaliseur retire la mise en forme en ligne des articles ; c'est ici que
   le thème reprend la main. Les sélecteurs visent ce que les rédacteurs ont
   réellement employé au fil des ans (boutons de campagne, encadrés, listes).
   ====================================================================== */

.entry-content > * + * {
  margin-top: 1.1rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: 2rem;
  color: var(--mvma-night);
  line-height: 1.2;
}

.entry-content a {
  color: var(--mvma-ocean);
  text-underline-offset: 0.15em;
}

.entry-content img {
  border-radius: var(--mvma-radius-s);
}

.entry-content figure {
  margin-inline: 0;
}

/* Une vidéo étirée sur toute la largeur écrase le texte qui l'entoure : elle
   garde une largeur de lecture et se centre, comme dans l'article d'origine. */
.entry-content .wp-block-embed,
.entry-content iframe {
  max-width: 46rem;
  margin-inline: auto;
}

.entry-content .wp-block-embed__wrapper {
  border-radius: var(--mvma-radius-m);
  overflow: hidden;
}

/* Boutons hérités : quelle que soit la classe d'origine, ils prennent la
   pilule orange du site. */
.entry-content a.button,
.entry-content .wp-block-button__link,
.entry-content a[class*='btn'] {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: var(--mvma-radius-pill);
  background: var(--mvma-orange);
  color: var(--mvma-white);
  font-weight: 600;
  text-decoration: none;
}

.entry-content a.button:hover,
.entry-content .wp-block-button__link:hover,
.entry-content a[class*='btn']:hover {
  background: #e67a00;
  color: var(--mvma-white);
}

/* Encadrés hérités : carte bleu ciel, jamais un aplat de campagne. */
.entry-content blockquote,
.entry-content .wp-block-group.has-background,
.entry-content div[class*='box'],
.entry-content div[class*='encadre'] {
  padding: 1.25rem 1.5rem;
  border: 0;
  border-left: 4px solid var(--mvma-ocean);
  border-radius: var(--mvma-radius-m);
  background: var(--mvma-sky);
  color: var(--mvma-ink);
}

/*
  Widget de prix embarqué dans les articles.

  Sa feuille de style est conservée par le normaliseur — c'est sa mise en page,
  pas une décoration : la retirer transforme le calendrier en liste de nombres.
  Elle apporte en revanche la palette rouge des campagnes, déclarée en
  variables sur `.vsud`. Le thème n'a donc qu'à redéfinir ces variables pour
  que tout le composant passe aux couleurs du site, sans toucher à une seule de
  ses règles de disposition.

  Le widget lui-même est migré en tâche 16 ; d'ici là il fonctionne, aux bonnes
  couleurs.
*/
.entry-content .vsud {
  --ac-rouge: var(--mvma-orange);
  --ac-rouge-lt: #ffa63d;
  --ac-rouge-dk: #c96a00;
  --ac-sable: var(--mvma-sand);
}

.entry-content .vsudHeroVisuel {
  background: linear-gradient(160deg, var(--mvma-night), #0b57c9 62%, var(--mvma-ocean));
}

.entry-content ul {
  padding-left: 1.25rem;
}

.entry-content ul li::marker {
  color: var(--mvma-orange);
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.entry-content th,
.entry-content td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(8, 61, 145, 0.12);
  text-align: left;
}

.entry-content th {
  color: var(--mvma-night);
}

/* Un tableau large ne doit pas élargir la page : il défile dans son coin. */
.entry-content .wp-block-table,
.entry-content figure.wp-block-table {
  overflow-x: auto;
}

/* ======================================================================
   Pied de page
   ====================================================================== */

.c-footer {
  background: var(--mvma-night);
  color: rgba(255, 255, 255, 0.82);
  margin-top: clamp(2rem, 6vw, 4rem);
}

.c-footer__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  max-width: var(--mvma-wide);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--mvma-gutter);
}

@media (min-width: 62rem) {
  .c-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
    align-items: start;
  }
}

.c-footer__brand-link {
  display: inline-block;
  line-height: 0;
}

.c-footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem;
}

.c-footer__column-title {
  margin: 0 0 0.6rem;
  color: var(--mvma-white);
  font-size: 0.95rem;
  font-weight: 700;
}

.c-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.c-footer__link {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  text-decoration: none;
}

.c-footer__link:hover {
  color: var(--mvma-white);
  text-decoration: underline;
}

.c-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  max-width: var(--mvma-wide);
  margin-inline: auto;
  padding: 1rem var(--mvma-gutter) 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
}

.c-footer__legal-line,
.c-footer__pride {
  margin: 0;
}

.c-footer__legal-line .c-footer__link {
  margin-left: 0.5rem;
  text-decoration: underline;
}

/* ======================================================================
   Petits écrans
   ====================================================================== */

@media (max-width: 48rem) {
  /* La largeur des volets est déjà donnée par la piste ; il ne reste ici que
     ce qui change vraiment de forme sur un petit écran. */
  .c-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .c-posts_grid {
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   Repli sans Timber : le site reste navigable, sans décoration
   ====================================================================== */

.c-header.-plain,
.c-footer.-plain {
  padding: 1rem var(--mvma-gutter);
}

.c-header.-plain ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}