/* ==========================================================================
   Open Edit — feuille de style du site statique
   S'appuie sur les jetons Web Awesome. Aucune couleur, taille de police ou
   espacement n'est écrit en dur dans le HTML : tout passe par les tokens
   --wa-* redéfinis ici ou par les classes utilitaires (wa-stack, wa-grid…).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices — Poppins, auto-hébergée en woff2 (4 graisses)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Thème — identité Open Edit branchée sur les jetons Web Awesome
   -------------------------------------------------------------------------- */

:root {
  /* --- Couleurs de marque (usage décoratif, hors texte) ------------------ */
  --oe-red: #e6224d;
  --oe-yellow: #ffd030; /* teinte exacte des formes décoratives de la maquette */
  --oe-cyan: #00b3b9;
  --oe-ink: #42495b;
  --oe-ink-strong: #2e3142; /* titres : plus soutenu que le texte courant */

  /* --- Rampe de teintes de la variante « brand » ------------------------
     Web Awesome dérive fill / border / on à partir de cette rampe.
     La redéfinir entièrement suffit à rebrander tous les composants.
     Teinte 347°, saturation 80 % — calée sur le rouge Open Edit. */
  --wa-color-brand-95: hsl(347 80% 96%);
  --wa-color-brand-90: hsl(347 80% 91%);
  --wa-color-brand-80: hsl(347 80% 82%);
  --wa-color-brand-70: hsl(347 80% 72%);
  --wa-color-brand-60: hsl(347 80% 62%);
  --wa-color-brand-50: hsl(347 80% 52%);
  --wa-color-brand-40: hsl(347 80% 42%);
  --wa-color-brand-30: hsl(347 80% 32%);
  --wa-color-brand-20: hsl(347 80% 22%);
  --wa-color-brand-10: hsl(347 80% 13%);
  --wa-color-brand-05: hsl(347 80% 8%);

  /* Valeurs explicites pour les rôles porteurs de texte.
     #d81f48 plutôt que #e6224d : contraste 4,96:1 avec du blanc, donc
     conforme AA pour du texte de taille normale (#e6224d plafonne à 4,47:1). */
  --wa-color-brand-fill-loud: #d81f48;
  --wa-color-brand-fill-normal: hsl(347 80% 92%);
  --wa-color-brand-fill-quiet: hsl(347 80% 96%);
  --wa-color-brand-border-loud: #d81f48;
  --wa-color-brand-border-normal: hsl(347 60% 78%);
  --wa-color-brand-border-quiet: hsl(347 60% 88%);
  --wa-color-brand-on-loud: #ffffff;
  --wa-color-brand-on-normal: hsl(347 80% 25%);
  --wa-color-brand-on-quiet: hsl(347 80% 28%);

  /* --- Surfaces et texte ------------------------------------------------ */
  --wa-color-text-normal: var(--oe-ink);
  --wa-color-text-quiet: #7c8194;
  --wa-color-text-link: #b81a3d;

  /* --- Typographie ------------------------------------------------------ */
  --wa-font-family-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wa-font-family-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wa-font-family-longform: var(--wa-font-family-body);
  --wa-font-weight-heading: 600;
  --wa-font-weight-body: 400;
  --wa-font-weight-action: 500;

  /* --- Formes ------------------------------------------------------------
     La maquette repose sur des angles très arrondis et des ombres larges et
     diffuses, jamais sur des bordures marquées. */
  --wa-border-radius-scale: 1.5;
  --oe-radius-card: 1.5rem;
  --oe-shadow-card: 0 1.25rem 2.5rem -1.5rem rgb(46 49 66 / 0.3);
  --oe-shadow-card-hover: 0 1.5rem 3rem -1.5rem rgb(46 49 66 / 0.45);

  /* --- Gabarit ----------------------------------------------------------- */
  --oe-measure: 68rem; /* largeur de contenu maximale */
  --oe-measure-text: 46rem; /* largeur de lecture confortable */
}

/* --------------------------------------------------------------------------
   3. Réinitialisation requise par <wa-page>
   -------------------------------------------------------------------------- */

html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--wa-font-family-body);
  color: var(--wa-color-text-normal);
  background: var(--wa-color-surface-default);
  -webkit-font-smoothing: antialiased;
}

/* Les ancres du menu ne doivent pas passer sous l'en-tête collant. */
html {
  scroll-behavior: smooth;
  scroll-padding-block-start: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   4. Gabarit de page
   -------------------------------------------------------------------------- */

wa-page {
  --menu-width: auto;
}

/* <wa-page> applique un padding aux éléments slottés ; les styles du document
   l'emportent toujours sur ses règles ::slotted().

   « main » n'en veut aucun : ses sections gèrent leur propre gouttière via
   .oe-wrap, ce qui permet les bandes de couleur pleine largeur. */
wa-page > main {
  padding: 0;
}

/* Le pied de page, lui, a besoin de marges intérieures. Elles sont posées ici
   et non sur .oe-footer : ce sélecteur est plus spécifique (0-1-2 contre
   0-1-0) et l'emporterait, collant le contenu aux bords de la bande sombre. */
wa-page > footer[slot='footer'] {
  padding-block: var(--wa-space-3xl) var(--wa-space-xl);
  padding-inline: 0;
}

/* Avant l'enregistrement du composant, les contenus slottés s'afficheraient
   en clair les uns sous les autres. On masque les deux qui n'ont de sens
   qu'une fois <wa-page> actif — le reste de la page demeure lisible sans JS. */
wa-page:not(:defined) > [slot='navigation'],
wa-page:not(:defined) > [slot='skip-to-content'] {
  display: none;
}

.oe-wrap {
  width: 100%;
  max-width: var(--oe-measure);
  margin-inline: auto;
  padding-inline: var(--wa-space-l);
}

.oe-section {
  padding-block: var(--wa-space-3xl);
}

.oe-measure {
  max-width: var(--oe-measure-text);
}

.oe-center {
  text-align: center;
}

.oe-center .oe-measure {
  margin-inline: auto;
}

/* Titres. La maquette abandonne la barre jaune sous le titre au profit d'un
   sur-titre rose placé au-dessus. */
main :is(h1, h2, h3, h4) {
  color: var(--oe-ink-strong);
}

.oe-title {
  margin: 0;
  line-height: var(--wa-line-height-condensed);
  letter-spacing: -0.015em;
}

.oe-eyebrow {
  margin: 0 0 var(--wa-space-2xs);
  color: var(--oe-red);
  font-size: var(--wa-font-size-s);
  font-weight: 600;
}

/* --- Formes décoratives ---------------------------------------------------
   Aplats jaunes de la maquette. Purement ornementaux : masqués aux
   technologies d'assistance et insensibles au pointeur.

   Ils forment un véritable calque d'arrière-plan : « main » porte le contexte
   d'empilement, les aplats s'y placent en z-index négatif. Ils passent donc
   derrière tout le contenu et peuvent déborder d'une section à l'autre — ce
   qui suppose qu'aucune section ne pose de fond blanc opaque par-dessus. */
main {
  position: relative;
  z-index: 0;
  /* Les aplats sortent volontairement du cadre : on borne l'axe horizontal
     pour éviter une barre de défilement, sans créer de conteneur de
     défilement vertical (« clip » et non « hidden »). */
  overflow-x: clip;
}

.oe-has-blob {
  position: relative;
}

.oe-blob {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  height: auto;
}

.oe-blob--top-right {
  inset-block-start: -18%;
  inset-inline-end: -8%;
  width: min(46rem, 70%);
}

.oe-blob--top-left {
  inset-block-start: -12%;
  inset-inline-start: -16%;
  width: min(24rem, 42%);
}

.oe-blob--bottom-left {
  inset-block-end: -25%;
  inset-inline-start: -14%;
  width: min(32rem, 52%);
}

.oe-flex-icon {
  display: flex;
  align-items: center;

  & > wa-icon:first-child {
    width: var(--wa-font-size-xl);

    & + span {
      flex: 1 0 calc(100% - var(--wa-font-size-xl));
      padding-left: var(--wa-space-m);
      text-align: left;
      line-height: 1.2;
    }
  }
}

/* Sous ~48rem le contenu occupe toute la largeur : un aplat placé derrière
   passerait sous le texte et nuirait à la lisibilité. On les retire. */
@media (max-width: 48rem) {
  .oe-blob {
    display: none;
  }
}

/* --- Boutons ---------------------------------------------------------------
   Les appels à l'action de la maquette sont des pilules en capitales. */
.oe-btn-cta::part(base) {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. En-tête et navigation
   -------------------------------------------------------------------------- */

/* Barre d'en-tête pleine largeur. Le logo, les cinq entrées de menu et les
   appels à l'action réclament ~1150px : les caler sur la mesure de contenu
   (68rem = 1088px) les ferait passer à la ligne. Plutôt qu'un alignement
   approximatif, l'en-tête occupe toute la largeur — parti pris courant et
   stable quelle que soit la taille d'écran. */
.oe-header {
  width: 100%;
  gap: var(--wa-space-m);
  align-items: center;
  padding-inline: var(--wa-space-s);
}

.oe-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.oe-header__logo img {
  display: block;
  width: 9.5rem;
  height: auto;
}

/* Entrées de menu en pilules, comme la barre de navigation de la maquette. */
.oe-nav a {
  color: var(--wa-color-text-normal);
  text-decoration: none;
  font-weight: var(--wa-font-weight-action);
  font-size: var(--wa-font-size-s);
  padding: var(--wa-space-2xs) var(--wa-space-s);
  border-radius: var(--wa-border-radius-pill);
  transition: color var(--wa-transition-fast), background var(--wa-transition-fast);
}

.oe-nav a:hover,
.oe-nav a:focus-visible {
  color: var(--oe-red);
  background: var(--wa-color-brand-fill-quiet);
}

/* Liens du tiroir mobile : plus aérés, empilés. */
.oe-drawer-nav a {
  color: var(--wa-color-text-normal);
  text-decoration: none;
  font-weight: var(--wa-font-weight-action);
  padding-block: var(--wa-space-s);
  border-block-end: 1px solid var(--wa-color-surface-border);
}

.oe-drawer-nav a:hover,
.oe-drawer-nav a:focus-visible {
  color: var(--oe-red);
}

/* Web Awesome ne fournit pas de classes utilitaires de marge : on détache le
   bouton d'appel à l'action des liens en CSS. */
.oe-drawer-nav wa-button {
  margin-block-start: var(--wa-space-l);
}

/* Recette « liens dans l'en-tête sur desktop, tiroir sur mobile ». */
wa-page[view='mobile'] .oe-nav,
wa-page[view='mobile'] .oe-header__cta {
  display: none;
}

wa-page[view='desktop']::part(navigation) {
  display: none;
}

/* --------------------------------------------------------------------------
   6. Bandeau d'introduction (bande jaune + vidéo)
   -------------------------------------------------------------------------- */

/* Aucun fond : le blanc vient du <body>. Poser ici un blanc opaque
   masquerait le calque d'aplats situé derrière. */
.oe-hero {
  background: transparent;
}

/* Première section de la page : davantage d'air sous l'en-tête collant que
   le rythme courant des sections. */
.oe-hero .oe-section {
  padding-block-start: var(--wa-space-4xl);
}

.oe-hero__inner {
  display: grid;
  gap: var(--wa-space-2xl);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .oe-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Titre en Poppins Light, mots-clés en semi-gras : le contraste de graisse
   de la maquette. C'est le seul endroit qui emploie la graisse 300. */
.oe-hero__title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1.8rem, 1rem + 2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.oe-hero__title strong {
  font-weight: 600;
}

/* --- Façade vidéo : le fichier n'est chargé qu'au clic ------------------- */

.oe-video {
  position: relative;
  margin: 0;
  border-radius: var(--oe-radius-card);
  overflow: hidden;
  background: #000;
  aspect-ratio: 2878 / 1614;
  box-shadow: var(--oe-shadow-card);
}

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

.oe-video__play {
  position: absolute;
  inset: 0;
  /* La réinitialisation de Web Awesome impose une hauteur aux <button>, qui
     l'emporte sur l'étirement induit par `inset`. On la neutralise. */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgb(0 0 0 / 0.25);
  color: #ffffff;
  transition: background var(--wa-transition-normal);
}

.oe-video__play:hover,
.oe-video__play:focus-visible {
  background: rgb(0 0 0 / 0.4);
}

/* La pastille est portée par l'icône elle-même : un pseudo-élément en
   position absolue ne se centre pas de façon fiable dans un conteneur flex. */
.oe-video__play wa-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--wa-color-brand-fill-loud);
  box-shadow: var(--wa-shadow-l);
  font-size: 1.75rem;
  padding-inline-start: 0.35rem; /* recentre optiquement le triangle */
  transition: transform var(--wa-transition-normal);
}

.oe-video__play:hover wa-icon,
.oe-video__play:focus-visible wa-icon {
  transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   7. Section « Pourquoi choisir Open Edit »
   -------------------------------------------------------------------------- */

/* Aspect de carte commun à toute la maquette : fond blanc, angles très
   arrondis, ombre large et diffuse, aucune bordure. Les composants
   <wa-card> sont en appearance="plain" pour ne pas avoir à lutter contre
   leur bordure par défaut. */
.oe-card {
  border-radius: var(--oe-radius-card);
  background: var(--wa-color-surface-default);
  box-shadow: var(--oe-shadow-card);
  transition: box-shadow var(--wa-transition-normal), transform var(--wa-transition-normal);
}

/* 26rem force deux colonnes au maximum : les quatre valeurs se rangent en
   2 × 2 plutôt que 3 + 1 orpheline, et repassent sur une colonne en dessous
   de ~54rem de large. */
.oe-values {
  --min-column-size: 26rem;
}

.oe-value {
  height: 100%;
}

.oe-value::part(body) {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-s);
  height: 100%;
}

/* Pictogramme aligné avec le titre, comme dans la maquette. */
.oe-value__head {
  --flank-size: 2.25rem;
  align-items: center;
}

.oe-value__icon {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.oe-value__title {
  margin: 0;
}

.oe-value p {
  margin: 0;
  color: var(--wa-color-text-quiet);
}

/* --------------------------------------------------------------------------
   8. Section « La collecte » — parcours en étapes
   Reprend les deux planches de la plaquette : collecte des infos touristiques
   et collecte des adhésions. Chaque parcours est une suite d'étapes reliées
   par une flèche jaune, horizontale sur grand écran, verticale sur mobile.
   -------------------------------------------------------------------------- */

.oe-collect__lead {
  margin: 0;
  max-width: var(--oe-measure-text);
  color: var(--wa-color-text-quiet);
}

.oe-collect__lead strong {
  color: var(--wa-color-text-normal);
  font-weight: 600;
}

/* Quatre colonnes sur grand écran, une seule en dessous. L'écart est
   volontairement large : c'est lui qui loge les flèches. */
.oe-flow {
  display: grid;
  gap: var(--wa-space-2xl);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
}

@media (min-width: 62rem) {
  .oe-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wa-space-xl);
  }
}

.oe-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
  padding: var(--wa-space-l);
}

.oe-flow__step p {
  margin: 0;
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
  line-height: var(--wa-line-height-normal);
}

.oe-flow__step strong {
  color: var(--wa-color-text-normal);
  font-weight: 600;
}

/* Flèche de liaison, dessinée en CSS (deux bordures pivotées) plutôt qu'avec
   une icône : elle est purement décorative et ne doit pas peser une requête. */
.oe-flow__step:not(:last-child)::after {
  content: '';
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  border-block-start: 3px solid var(--oe-yellow);
  border-inline-end: 3px solid var(--oe-yellow);
  /* Mobile : sous la carte, pointe vers le bas. */
  inset-block-end: calc(var(--wa-space-2xl) / -2 - 0.35rem);
  inset-inline-start: calc(50% - 0.35rem);
  transform: rotate(135deg);
}

@media (min-width: 62rem) {
  /* Grand écran : dans la gouttière, pointe vers la droite. */
  .oe-flow__step:not(:last-child)::after {
    inset-block-end: auto;
    inset-block-start: calc(50% - 0.35rem);
    inset-inline-start: auto;
    inset-inline-end: calc(var(--wa-space-xl) / -2 - 0.35rem);
    transform: rotate(45deg);
  }
}

/* Pastille d'icône rose, cohérente avec le vocabulaire de la maquette. */
.oe-flow__icons {
  display: flex;
  gap: var(--wa-space-2xs);
}

.oe-flow__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-loud);
  color: #ffffff;
  font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   9. Section « Compatibilité »
   -------------------------------------------------------------------------- */

.oe-compat {
  --min-column-size: 9rem;
  align-items: stretch;
}

/* La maquette pose les logos directement sur le fond, sans cartouche gris :
   seul l'espacement les sépare. */
.oe-compat__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--wa-space-s);
  padding: var(--wa-space-m);
}

.oe-compat__item img {
  width: 100%;
  max-width: 6.5rem;
  height: 4rem;
  object-fit: contain;
}

.oe-compat__item span {
  font-weight: var(--wa-font-weight-action);
  font-size: var(--wa-font-size-s);
}

/* --------------------------------------------------------------------------
   10. Section « Actualités »
   Recette Web Awesome employée : « grille de cartes responsive »
   (wa-grid + wa-card). Tant qu'il n'y a qu'un article, la grille laisse place
   à une carte unique en orientation horizontale (voir .oe-news--solo).
   -------------------------------------------------------------------------- */

.oe-section-head {
  gap: var(--wa-space-m);
}

.oe-news {
  --min-column-size: 18rem;
  align-items: stretch;
}

.oe-news__item {
  height: 100%;
  overflow: hidden; /* le visuel doit épouser les angles arrondis de la carte */
}

/* Pousse le pied de carte en bas quelle que soit la longueur du résumé, pour
   que les liens « Lire la suite » s'alignent d'une carte à l'autre. */
.oe-news__item::part(body) {
  flex: 1;
}

/* --- Carte unique, pleine largeur -----------------------------------------
   Une seule actualité : plutôt qu'une carte étroite isolée à gauche, on
   occupe toute la colonne. En orientation horizontale, <wa-card> demande une
   largeur pour le visuel, sans quoi il absorbe la moitié de la carte. */
.oe-news--solo .oe-news__item {
  height: auto;
}

/* « contain » et non « cover » : le visuel est une infographie, un recadrage
   en amputerait le contenu. */
.oe-news--solo img[slot='media'] {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 48rem) {
  .oe-news--solo img[slot='media'] {
    max-width: 26rem;
  }
}

/* Sous 48rem, l'orientation horizontale écraserait le texte : on repasse la
   carte en colonne. L'attribut « orientation » n'étant pas réactif, la bascule
   se fait ici. */
@media (max-width: 47.99rem) {
  .oe-news--solo .oe-news__item {
    flex-direction: column;
  }

  .oe-news--solo img[slot='media'] {
    max-width: none;
    aspect-ratio: 16 / 9;
  }
}

.oe-news__meta {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

.oe-news__title {
  margin: 0;
}

.oe-news__item p {
  margin: 0;
  color: var(--wa-color-text-quiet);
}

/* Emplacement d'image en attente du visuel définitif. Convention Web Awesome :
   une surface sourde annonçant la taille attendue, jamais un <img> cassé ni un
   service de placeholder externe. */
.oe-media-placeholder {
  display: grid;
  place-items: center;
  background-color: var(--wa-color-surface-lowered);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

/* --------------------------------------------------------------------------
   11. Page d'article (gabarit d'actualité)
   Le corps repose sur l'utilitaire wa-prose, qui gère la colonne de lecture
   et le rythme vertical. Ne pas lui imposer de marges ici.
   -------------------------------------------------------------------------- */

/* Colonne de lecture commune à l'en-tête, au corps et au pied de l'article. */
.oe-article {
  --oe-article-col: 68ch;
}

.oe-article__col {
  max-width: var(--oe-article-col);
  margin-inline: auto;
}

.oe-article__breadcrumb {
  margin-block-end: var(--wa-space-l);
}

.oe-article__meta {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

.oe-article__title {
  margin: 0;
  line-height: var(--wa-line-height-condensed);
}

/* Sur mobile, le corps 3xl fait courir le titre sur quatre lignes ou plus.
   Cette feuille étant chargée après les utilitaires Web Awesome, la règle
   l'emporte sur wa-heading-3xl à spécificité égale. */
@media (max-width: 48rem) {
  .oe-article__title {
    font-size: var(--wa-font-size-2xl);
  }
}

/* Le chapô résume l'article : plus gros que le corps, plus discret que le titre. */
.oe-article__lead {
  margin: 0;
  color: var(--wa-color-text-quiet);
  line-height: var(--wa-line-height-normal);
}

.oe-article__author {
  --flank-size: 3rem;
}

.oe-article__author strong {
  display: block;
}

/* Le visuel principal déborde la colonne de lecture pour occuper toute la
   largeur de contenu : respiration classique en mise en page éditoriale. */
.oe-article__hero {
  margin-block: var(--wa-space-2xl);
  margin-inline: auto;
}

.oe-article__hero figcaption {
  margin-block-start: var(--wa-space-xs);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

/* wa-prose contraint déjà la mesure ; on l'aligne sur celle de l'en-tête. */
.oe-article__body {
  --wa-prose-line-length: var(--oe-article-col);
  margin-inline: auto;
}

.oe-article__body figure {
  margin-inline: 0;
}

.oe-article__body figcaption {
  margin-block-start: var(--wa-space-xs);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

.oe-article__body blockquote {
  margin-inline: 0;
  padding-inline-start: var(--wa-space-l);
  border-inline-start: 4px solid var(--oe-yellow);
  font-size: var(--wa-font-size-l);
  line-height: var(--wa-line-height-normal);
}

/* Un tableau ne descend pas sous la largeur minimale de son contenu : sur
   mobile il déborde donc de la colonne de lecture, et sa dernière colonne se
   retrouve coupée hors de l'écran sans que la page ne défile pour autant.
   « display: block » en fait un bloc défilable qui reste dans la colonne. */
.oe-article__body table,
.oe-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.oe-article__footer {
  margin-block-start: var(--wa-space-2xl);
}

/* Navigation article précédent / suivant. */
.oe-article__siblings {
  --min-column-size: 16rem;
}

.oe-article__sibling {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-3xs);
  padding: var(--wa-space-m);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  text-decoration: none;
  color: var(--wa-color-text-normal);
  transition: border-color var(--wa-transition-fast), background var(--wa-transition-fast);
}

.oe-article__sibling:hover,
.oe-article__sibling:focus-visible {
  border-color: var(--wa-color-brand-border-normal);
  background: var(--wa-color-surface-lowered);
}

.oe-article__sibling span {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

.oe-article__sibling strong {
  font-weight: var(--wa-font-weight-action);
}

.oe-article__sibling--next {
  text-align: end;
}

/* --------------------------------------------------------------------------
   12. Bande d'appel à l'action
   -------------------------------------------------------------------------- */

/* Bandeau rose à angles arrondis, posé dans la colonne de contenu — la
   « bannière campagne » de la maquette. */
.oe-cta__banner {
  padding: var(--wa-space-2xl) var(--wa-space-xl);
  border-radius: var(--oe-radius-card);
  background: var(--wa-color-brand-fill-loud);
  color: #ffffff;
  box-shadow: var(--oe-shadow-card);
}

.oe-cta__banner :is(h2, p) {
  color: #ffffff;
}

.oe-cta__banner p {
  opacity: 0.9;
}

/* Bouton blanc sur fond rose : le variant « brand » y serait invisible. */
.oe-cta__banner wa-button::part(base) {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--wa-color-brand-fill-loud);
}

/* --------------------------------------------------------------------------
   13. Pied de page
   -------------------------------------------------------------------------- */

/* Les marges intérieures sont posées plus haut, sur le sélecteur
   « wa-page > footer[slot='footer'] », seul assez spécifique pour l'emporter. */
.oe-footer {
  background: var(--oe-ink);
  color: #ffffff;
}

.oe-footer__inner {
  width: 100%;
  max-width: var(--oe-measure);
  margin-inline: auto;
  padding-inline: var(--wa-space-l);
  display: grid;
  gap: var(--wa-space-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .oe-footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.oe-footer a {
  color: #ffffff;
  text-decoration: none;
}

.oe-footer a:hover,
.oe-footer a:focus-visible {
  text-decoration: underline;
}

.oe-footer__logo img {
  display: block;
  width: 11rem;
  height: auto;
}

.oe-footer__title {
  margin: 0;
  font-size: var(--wa-font-size-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--oe-yellow);
}

.oe-footer address {
  font-style: normal;
  line-height: var(--wa-line-height-normal);
}

.oe-footer__legal {
  width: 100%;
  max-width: var(--oe-measure);
  margin-inline: auto;
  padding-inline: var(--wa-space-l);
  margin-block-start: var(--wa-space-xl);
  padding-block-start: var(--wa-space-m);
  border-block-start: 1px solid rgb(255 255 255 / 0.15);
  font-size: var(--wa-font-size-s);
  color: rgb(255 255 255 / 0.75);
}

.oe-footer__social {
  font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   14. Bouton « retour en haut »
   -------------------------------------------------------------------------- */

.oe-to-top {
  position: fixed;
  inset-block-end: var(--wa-space-l);
  inset-inline-end: var(--wa-space-l);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--wa-transition-normal), visibility var(--wa-transition-normal);
}

.oe-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   15. Pages de contenu éditorial (mentions légales…)
   -------------------------------------------------------------------------- */

.oe-prose {
  max-width: var(--oe-measure-text);
}

.oe-prose h2 {
  margin-block: var(--wa-space-xl) var(--wa-space-s);
}

.oe-prose h3 {
  margin-block: var(--wa-space-l) var(--wa-space-2xs);
}

.oe-prose p,
.oe-prose ul {
  margin-block: 0 var(--wa-space-m);
  line-height: var(--wa-line-height-expanded);
}