/* =========================================================================
   components.css — Classes de composants réutilisables
   Dépend de variables.css + base.css. Charger en 3e position.
   Conventions : préfixes par bloc (.btn, .card, .site-header, .site-footer…).
   ========================================================================= */

/* =======================================================================
   LAYOUT
   ======================================================================= */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section {
  padding-block: var(--space-section);
  padding-inline: 1.5rem;
}

@media (min-width: 1024px) {
  .section {
    padding-inline: var(--gutter);
  }
}

/* =======================================================================
   BOUTONS
   ======================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3.75rem;
  padding-inline: 1.875rem;
  border-radius: var(--radius-md);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  text-transform: uppercase;
  text-align: center;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--c-white);
}
.btn--primary:hover {
  background-color: var(--c-purple);
  color: var(--c-white);
}

.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--c-white);
}
.btn--secondary:hover {
  background-color: var(--c-purple);
  color: var(--c-white);
}

.btn--ghost {
  background-color: var(--c-bg-light);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  height: auto;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  text-transform: none;
}

/* =======================================================================
   CARTES (générique — déclinaisons actu/pro plus tard)
   ======================================================================= */

.card {
  background-color: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.card:hover {
  box-shadow: var(--shadow-hover);
}

.card__media img {
  width: 100%;
  object-fit: cover;
}

.card__body {
  padding: 1.5rem;
}

/* =======================================================================
   HEADER / NAVIGATION
   Méga-menu déroulant au survol (desktop) + burger (mobile).
   Le comportement mobile (ouverture menu / sous-menus) est piloté par Alpine.
   ======================================================================= */

.site-header {
  position: relative;
  z-index: 100;
}

.navbar {
  display: flex;
  align-items: center;
  margin: 2.75rem var(--gutter) 0;
  padding: 0;
  background-color: var(--c-white);
  border-radius: var(--radius-md);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
}

.navbar__brand {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem 0.5rem 1.5rem; /* navbar ~76px (cf. prod), logo à 24px du bord */
}

.navbar__logo {
  height: 2.75rem;
  width: auto;
  /* léger décalage vers le bas : centrage optique (le glyphe du logo a
     du vide visuel en bas, le centre géométrique paraît trop haut) */
  margin-top: 4px;
}

.navbar__menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}

.navbar__cta {
  position: relative;
  z-index: 2; /* reste au-dessus du méga-menu déroulant (qui sort par-dessous) */
  margin-left: auto;
  margin-right: 12px; /* marge à droite du bouton (cf. prod) */
}
/* CTA annuaire : casse normale + padding/hauteur réduits (plus compact) */
.navbar__cta .btn {
  text-transform: none;
  height: auto;
  padding: 0.5rem 1rem;
  font-size: var(--fs-sm);
}
/* League Spartan place le glyphe haut dans sa boîte : on recentre le label
   optiquement avec l'icône (le pin reste centré, lui). */
.navbar__cta .btn span {
  padding-top: 0.18em;
}

/* Tablette / desktop étroit : navbar encore en mode desktop mais sans place
   pour le label du CTA → on masque le texte et on ne garde que l'icône
   marqueur (comme la prod, qui applique ce comportement de 1024 à 1385px). */
@media (min-width: 1024px) and (max-width: 1385px) {
  .navbar__cta .btn span {
    display: none;
  }
  /* Sans le label, le flex comprimerait l'icône (largeur intrinsèque 24px) :
     on la fige pour qu'elle reste pleine et centrée dans le bouton compact. */
  .navbar__cta .btn img {
    flex-shrink: 0;
  }
}

/* Item de 1er niveau */
.navbar__item {
  position: static; /* permet au méga-menu de s'étendre sur toute la largeur */
}

.navbar__link {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: var(--color-primary);
  border-radius: var(--radius-md);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.navbar__item:hover > .navbar__link {
  background-color: var(--c-white);
}

/* Caret corail sur les items à sous-menu (indicateur de déroulé, cf. prod) */
.navbar__caret {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.5rem;
  border-right: 2px solid var(--color-secondary);
  border-bottom: 2px solid var(--color-secondary);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
.navbar__item--has-sub:hover .navbar__caret {
  transform: rotate(225deg) translateY(-2px);
}

/* Méga-menu déroulant */
.navbar__dropdown {
  position: absolute;
  z-index: 1; /* sous le bouton CTA (z-index 2) → pas de chevauchement */
  left: var(--gutter);
  right: var(--gutter);
  /* Collé sous la barre blanche (remonte par-dessus le radius bas) : la
     jonction est invisible, comme sur le prod. */
  top: 100%;
  margin-top: -1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  background-color: var(--c-white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  /* Ombre portée sur les côtés/bas seulement (pas en haut → pas de liseré). */
  box-shadow: 0 0.75rem 1rem -0.25rem rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}

.navbar__item:hover .navbar__dropdown,
.navbar__item:focus-within .navbar__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar__subitem {
  display: flex;
  flex-direction: column;
  /* Contenu ancré en haut (et non centré) : ainsi les titres des 3 cartes
     démarrent à la même hauteur Y, quel que soit le nombre de lignes de la
     description. Un `center` décalerait les titres des cartes au texte plus
     long. */
  justify-content: flex-start;
  min-height: 6.875rem; /* 110px, comme le prod → cartes aérées et régulières */
  padding: 1rem 1.25rem;
  background-color: var(--c-purple-extra-light);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  transition: background-color 0.2s ease;
}
.navbar__subitem:hover {
  background-color: var(--c-bg-light);
  color: var(--color-primary);
}
/* Ligne titre : icône alignée verticalement avec le texte du titre */
.navbar__subitem-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.navbar__subitem-title img {
  flex-shrink: 0;
  width: 1.5rem;
  /* Hauteur figée (et non `auto`) : certaines icônes (ex. marqueur) ont un
     ratio plus vertical et étiraient leur ligne de titre, décalant la
     description vers le bas. À 24×24 + object-fit, toutes les cartes ont une
     ligne de titre de même hauteur → titres ET descriptions alignés en Y. */
  height: 1.5rem;
  object-fit: contain;
}
/* La goutte (viewBox 16×20, dessin sans marge interne) remplit toute sa boîte
   et paraît plus grosse que les autres icônes du menu. On réduit le dessin
   dans sa boîte 24×24 (l'encombrement reste identique → alignement préservé). */
.navbar__subitem-title img[src$="icon-goutte.svg"] {
  /* léger décalage vertical vers le haut pour aligner optiquement la goutte */
  transform: translateY(-2px) scale(0.8);
}
.navbar__subitem-desc {
  margin-top: 0.5rem; /* écart titre / sous-titre, cf. prod (8px) */
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
}

/* Burger (caché en desktop) */
.navbar__burger {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--c-white);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.navbar__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: currentColor;
}

/* --- Mobile (burger) --------------------------------------------------- */
@media (max-width: 1023px) {
  .navbar {
    margin: 1.5rem;
    padding: 0.75rem 1rem;
  }

  .navbar__burger {
    display: inline-flex;
  }

  .navbar__menu {
    display: none;
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: calc(100% + 0.5rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 1rem;
    background-color: var(--color-primary);
    border-radius: var(--radius-md);
  }
  .navbar__menu.is-open {
    display: flex;
  }

  .navbar__link {
    color: var(--c-white);
  }
  .navbar__item:hover > .navbar__link {
    background-color: transparent;
  }

  /* En mobile, le sous-menu se déplie en accordéon (toggle via Alpine) */
  .navbar__dropdown {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    grid-template-columns: 1fr;
    padding: 0.5rem 0 0.5rem 1rem;
  }
  .navbar__dropdown.is-open {
    display: grid;
  }
  .navbar__subitem {
    min-height: auto;
  }

  .navbar__cta {
    margin: 0.5rem 0 0;
  }
  .navbar__cta .btn {
    width: 100%;
  }
}

/* =======================================================================
   FOOTER
   ======================================================================= */

.site-footer {
  min-height: 39rem;
  background-color: var(--c-purple-darker-bis);
  color: var(--c-white);
  padding: 4rem var(--gutter) 2rem;
}

.site-footer a {
  color: var(--c-white);
}
.site-footer a:hover {
  color: var(--c-coral-soft);
}

.site-footer__logo {
  margin-bottom: 2rem;
}

.site-footer__sep {
  width: 5.37rem;
  height: 0.375rem;
  background-color: var(--color-secondary);
  margin-top: 14px;
  border: none;
}

.site-footer__main-link {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  margin-top: 2.5rem;
  display: block;
}

.site-footer__item-link {
  font-weight: var(--fw-medium);
  margin-block: 1.5rem;
  display: block;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 4rem;
}

@media (max-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

.site-footer__copyright {
  border-top: 1px solid var(--c-purple);
  margin-top: 3rem;
  padding-top: 1.5rem;
  font-size: var(--fs-xs);
}

.site-footer__legal-link {
  color: inherit;
  text-decoration: underline;
}

.site-footer__legal-link:hover {
  text-decoration: none;
}

/* =======================================================================
   BLOCS DE CONTENU ÉDITORIAL (info / link / encadrés)
   ======================================================================= */

.callout {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  margin-block: 1.25rem;
  border-radius: var(--radius-md);
  color: var(--c-purple-deep);
}
.callout--info {
  background-color: rgba(255, 208, 87, 0.3); /* #ffd0574d — jaune */
}
.callout--link {
  background-color: rgba(109, 235, 205, 0.2); /* #6debcd33 — vert */
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.callout--link:hover {
  background-color: rgba(109, 235, 205, 0.35);
  color: var(--c-purple-deep);
}
/* Encadré téléchargement sans fichier (PDF à (re)uploader au Panel) */
.callout--disabled {
  opacity: 0.7;
  cursor: default;
}
.callout__icon {
  flex-shrink: 0;
  width: 75px; /* taille icône du prod */
  height: 75px;
}
.callout__body {
  margin: 0;
}
.callout__body :last-child {
  margin-bottom: 0;
}
.callout__intro {
  display: block;
}
.callout__file {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-primary);
  text-decoration: underline;
}

/* Opt-out Matomo — case d'opposition à la mesure d'audience (mentions légales) */
.optout-matomo {
  margin-block: 1.25rem;
}
.optout-matomo__intro {
  margin-bottom: 0.75rem;
}
.optout-matomo__frame {
  width: 100%;
  min-height: 200px;
  border: 1px solid var(--c-purple-deep);
  border-radius: var(--radius-md);
}

/* =======================================================================
   BLOC ENCADRÉ-LIEN (remplace les .highlight-link-section du legacy)
   Illustration + titre + description + flèche CTA.
   ======================================================================= */

/* Carte arrondie contenue dans la colonne de contenu (pas full-bleed) :
   illustration + texte + pastille CTA. */
.encadre-lien {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-block: 1.75rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-lg);
  background-color: var(--c-purple-light);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
a.encadre-lien:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  color: inherit;
}
.encadre-lien__media {
  flex-shrink: 0;
}
.encadre-lien__media img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}
.encadre-lien__body {
  flex: 1;
}
.encadre-lien__title {
  margin: 0;
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  line-height: var(--lh-tight);
}
.encadre-lien__desc {
  margin: 0.25rem 0 0;
  color: var(--color-text);
  font-size: var(--fs-base);
}
/* CTA = pastille ronde corail avec flèche. Réagit au survol de la carte. */
.encadre-lien__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--color-secondary);
  color: var(--c-white);
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}
a.encadre-lien:hover .encadre-lien__cta {
  background-color: var(--color-primary);
  transform: translateX(3px);
}

/* Image de bloc (figure) dans le contenu */
.block-image {
  margin: 1.5rem 0;
}
.block-image img {
  max-width: 100%; /* ne dépasse pas la colonne, mais garde sa taille native (cf. prod) */
  height: auto;
  border-radius: var(--radius-sm);
}
.block-image figcaption {
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--c-purple);
}

/* Vidéo de bloc (lecteur HTML5) dans le contenu */
.block-video {
  margin: 2rem 0;
}
.block-video__title {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}
.block-video__player {
  display: block;
  width: 100%;
  max-width: 48rem; /* lecteur lisible sans occuper toute la colonne large */
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: var(--radius-md);
}

/* Vidéo YouTube de bloc (iframe embarquée), ratio 16/9 responsive */
.block-youtube {
  margin: 2rem 0;
}
.block-youtube__title {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}
.block-youtube__frame {
  position: relative;
  width: 100%;
  max-width: 48rem;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.block-youtube__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =======================================================================
   PAGE INSTITUTIONNELLE (template default)
   Reprend .page-standard / .intro / .content / .summary du legacy.
   ======================================================================= */

/* Largeur du contenu : marges latérales en POURCENTAGE du viewport (repris
   du legacy), pas une largeur fixe → le contenu s'élargit avec l'écran.
   Mobile/tablette : marges réduites ; desktop : 24.54% (cf. bulmaStyles). */
.page-standard .section.intro,
.page-standard .section.content {
  padding-inline: 1.5rem;
}

.page-standard .section.intro {
  padding-bottom: 0;
}
.page-standard .section.intro h1 {
  color: var(--color-primary);
  font-size: var(--fs-display); /* 42px desktop, cf. prod */
  font-weight: var(--fw-bold);
}
.page-standard .content-intro {
  /* Aligne la 1re lettre du sous-titre sur celle du titre : la barre déco
     et son padding sont décalés vers la gauche (marge négative). */
  margin-bottom: 2rem;
  border-left: 0.5rem solid var(--color-primary);
  padding-left: 1rem;
  margin-left: -1.5rem;
}

/* Image d'en-tête : pleine largeur, hauteur recadrée (≈ prod) */
.img-header-container {
  background-color: var(--c-bg-light);
}
.img-header {
  display: block;
  width: 100%;
  max-height: 34rem; /* ≈ 539px prod */
  object-fit: cover;
}

.page-standard .section.content {
  padding-block: 3rem;
}
/* Le .container interne ne contraint pas ici : c'est le padding % de la
   section qui définit la largeur du contenu. */
.page-standard .section.content .container {
  max-width: none;
  padding-inline: 0;
}

/* Desktop : marges latérales en % comme le prod. */
@media (min-width: 1024px) {
  .page-standard .section.intro {
    padding: 3rem 24.54% 0 18.68%;
  }
  .page-standard .section.content {
    padding: 3rem 24.54%;
  }
}

/* Variante pleine largeur (rubriques, listes) : pas de marges en %. */
.page-standard .section.content--full {
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
  .page-standard .section.content--full {
    padding-inline: var(--gutter);
  }
}
/* Pas de plafond de largeur : la zone occupe tout l'espace (moins le gutter),
   comme le prod → davantage de cartes par ligne sur grand écran. */
.page-standard .section.content--full .container {
  max-width: none;
  padding-inline: 0;
}

/* Fiches à télécharger : exceptionnellement alignées à gauche. Le snippet est
   injecté dans la .section.content (padding-left 24.54vw sur desktop) ; on
   « sort » les blocs de cette marge avec une marge négative pour les ramener au
   niveau du titre (18.68vw), et on borne leur largeur pour ne pas les étirer. */
.fiches-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .fiches-list {
    margin-left: calc(18.68vw - 24.54vw); /* -5.86vw : aligne sur le titre */
    max-width: 32rem;
  }
}

/* Contenu éditorial (rendu kirbytext) */
.prose {
  color: var(--color-text);
}
.prose h2 {
  color: var(--c-purple-h2);
  scroll-margin-top: var(--header-height);
}
.prose h3 {
  color: var(--color-primary);
  scroll-margin-top: var(--header-height);
}
.prose ul {
  margin-left: 0;
}
.prose img {
  max-width: 100%;
  height: auto;
}

/* Sommaire */
.summary {
  border-radius: var(--radius-md);
  background-color: var(--c-purple-light);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  font-size: var(--fs-sm);
}
.summary__title {
  margin: 0 0 1rem;
  color: var(--color-primary);
  font-size: var(--fs-display); /* 42px, comme le prod */
  font-weight: var(--fw-extrabold);
}
.summary p,
.summary ul li {
  list-style: none;
  margin: 1.35rem 0;
  line-height: var(--lh-tight);
}
.summary a {
  display: flex;
  align-items: center;
  color: var(--color-primary);
}
.summary a:hover {
  color: var(--color-secondary);
}
.summary__bullet {
  flex-shrink: 0;
  margin-right: 0.3rem;
}
.summary ul {
  margin: 0 0 0 1rem;
  padding: 0;
}

/* =======================================================================
   ESPACE PRO (page maître : cartes illustrées groupées par catégorie)
   ======================================================================= */

/* En-tête spécifique : seule la zone haute de la page (la marge au-dessus de
   la navbar, la navbar elle-même, puis le bandeau titre) baigne dans un fond
   violet clair ; le reste de la page garde le fond clair normal. La navbar
   reste une carte blanche flottant par-dessus ce fond.
   La marge supérieure de la navbar (2.75rem) est transférée en padding sur le
   .site-header pour que le violet couvre aussi cet espace au-dessus d'elle. */
body.espace-professionnels .site-header {
  padding-top: 2.75rem;
  background-color: var(--c-purple-light);
}
body.espace-professionnels .navbar {
  /* Haut ET bas à 0 : sur mobile, .navbar { margin: 1.5rem } réintroduit une
     marge basse qui, faute de padding-bottom sur .site-header, s'échappe par
     margin-collapsing et laisse une bande de fond clair entre le violet du
     header et celui de .espace-pro-header. On la neutralise pour souder les
     deux blocs violets. La marge latérale (gutter) est conservée. */
  margin-block: 0;
}
/* La goutte est ancrée sur l'en-tête, dont le sommet jouxte le bas de la
   navbar. Son sommet est calé au bord supérieur de l'en-tête (0) pour qu'elle
   reste sous la navbar et ne déborde pas dans la bande violette qui l'entoure. */
.espace-pro-header {
  padding: 2.5rem 1.5rem 2rem 2.75rem;
  background:
    url("../img/espace-pro/bck-goutte.svg") 0.75rem 0.5rem / auto 8.5rem no-repeat,
    var(--c-purple-light);
  color: var(--color-primary);
}
.espace-pro-header h1 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 800; /* extra-bold, cf. prod */
  color: var(--color-primary);
}
.espace-pro-header__subtitle {
  margin-top: 0.5rem;
  font-size: 1.125rem;
}

@media (min-width: 1024px) {
  .espace-pro-header {
    padding: 4.5rem 1.5rem 4.5rem 8rem;
    background-position:
      2.5rem 0.5rem,
      0 0;
    background-size:
      auto 12rem,
      auto;
  }
  .espace-pro-header h1 {
    margin-bottom: 0.5rem;
    font-size: var(--fs-display); /* 42px, cf. prod */
  }
  .espace-pro-header__subtitle {
    font-size: 1.75rem;
  }
}

.pro-group {
  margin-bottom: 3rem;
}
.pro-group__title {
  margin: 0 0 1.5rem;
  font-size: 2rem; /* 32px, cf. prod */
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}
.pro-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 22.2rem));
  align-items: start; /* chaque carte garde sa hauteur propre (pas d'étirement) */
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
.pro-cards li {
  list-style: none;
}
.pro-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Radius sur toute la carte + overflow hidden : les coins de l'illustration
     épousent ceux de la carte, comme la bande titre en bas. */
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--c-white);
  transition: transform 0.2s ease;
}
.pro-card:hover {
  transform: translateY(-4px);
  color: var(--c-white);
}
/* Cadre carré uniforme. Fond violet visible derrière les images dont le ratio
   n'est pas carré (cf. object-fit: contain ci-dessous). */
.pro-card__media {
  display: block;
  background-color: #504c9f;
}
.pro-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* contain : l'image est affichée en entier dans le cadre carré (pas de
     rognage). Les images verticales laissent des bandes de fond sur les côtés. */
  object-fit: contain;
}
/* Bande titre violette sous l'illustration */
.pro-card__title {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 1.875rem 1.25rem; /* 30px 20px, cf. prod */
  background-color: var(--color-primary);
  font-size: 1.25rem; /* 20px */
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

/* Pied des sous-pages : « Retour au sommaire » + nav précédent / suivant. */
.espace-pro-nav__back {
  display: inline-flex;
  margin-top: 2rem;
}
.espace-pro-nav {
  display: flex;
  gap: 1.5rem;
  margin: 2rem 0;
}
/* Encart violet arrondi : prev poussé à gauche, next à droite. */
.espace-pro-nav__item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 22rem;
  padding: 1.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--c-white);
}
.espace-pro-nav__item:hover {
  color: var(--c-white);
  background-color: var(--c-purple-darker);
}
.espace-pro-nav__item--prev {
  margin-right: auto;
}
.espace-pro-nav__item--next {
  margin-left: auto;
  text-align: right;
}
.espace-pro-nav__item svg {
  flex-shrink: 0;
  width: 3.25rem;
  height: auto;
}
.espace-pro-nav__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.espace-pro-nav__label {
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-coral-soft); /* libellé corail, cf. prod */
}
.espace-pro-nav__title {
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

@media (max-width: 640px) {
  .espace-pro-nav {
    flex-direction: column;
  }
  .espace-pro-nav__item {
    max-width: none;
  }
  .espace-pro-nav__item svg {
    width: 2.5rem;
  }
}

/* =======================================================================
   PUBLICATIONS MÉDICALES (bloc en bas de page)
   ======================================================================= */

.publications {
  margin: 2rem 0 0;
  padding: 0;
}
.publications__item {
  list-style: none;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--c-grey-light);
}
.publications__title {
  color: var(--color-secondary);
  text-decoration: underline;
}
.publications__authors {
  display: block;
  color: var(--color-primary);
}
.publications__review {
  display: block;
  color: var(--c-purple);
  font-size: var(--fs-sm);
}

/* =======================================================================
   PARTENAIRES (logos) — cartes en grille fluide (cf. prod : ~3/ligne sur
   grand écran, logo occupant toute la carte, URL en violet).
   ======================================================================= */

/* flex-wrap de cartes à largeur fixe (~412px comme le prod) : le nombre de
   cartes par ligne suit naturellement la largeur dispo, identique au prod. */
.partners {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
}
.partners__item {
  list-style: none;
  flex: 0 1 25.75rem; /* ≈ 412px ; se range comme le prod */
}
.partners__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-md);
  background-color: var(--c-white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.partners__link:hover {
  box-shadow: var(--shadow-hover);
}
/* Zone logo : ratio calé sur celui des visuels à fond plein (413/232) →
   ces logos (AFH, AGOF) remplissent sans liseret. Les logos transparents
   gardent leur ratio (contain) sur fond blanc, sans rognage. */
.partners__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 413 / 232;
  background-color: var(--c-white);
}
.partners__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.partners__url {
  display: block;
  padding: 1rem;
  text-align: center;
  font-size: var(--fs-base);
  color: var(--color-primary);
  word-break: break-word;
}