/*
 * Braillard — Section Missions (widget braillard-mission)
 * Maquette : chaque vignette = boîte 517×280 = 4 COLONNES de la grille (12 col),
 * gouttière = 32px (gouttière de grille), hauteur fixe (ratio 517/280), photo en cover.
 * 3 vignettes remplissent la largeur (4+4+4 col). Au-delà : défilement horizontal + flèches.
 */

.br-mission {
  padding: clamp(64px, 7vw, 120px) clamp(20px, 3.24vw, 56px);
  background: var(--br-white);
  color: var(--br-black);
}

/* Titre : même convention que la section Actualité (Inter, aligné à droite) */
.br-mission__head {
  text-align: right;
  margin: 0 0 clamp(24px, 3vw, 48px);
}
.br-mission__heading {
  font-family: var(--br-font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(34px, 3.47vw, 60px); /* Figma : 60px @1728 */
  line-height: 1.2; /* Figma : 72/60 */
  margin: 0;
}

/* Viewport full-bleed jusqu'au padding de section */
.br-mission__viewport {
  margin: 0 calc(-1 * clamp(20px, 3.24vw, 56px));
  padding: 0 clamp(20px, 3.24vw, 56px);
  overflow: hidden;
}
.br-mission--scroll .br-mission__viewport {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.br-mission--scroll .br-mission__viewport::-webkit-scrollbar { display: none; }
.br-mission--scroll .br-mission__viewport.is-dragging { cursor: grabbing; user-select: none; }

/* Gouttière entre vignettes = gouttière de grille (32px @1728) */
.br-mission__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 1.85vw, 32px);
}
.br-mission--scroll .br-mission__track { width: max-content; }

/* Largeur posée par le JS (= 4 colonnes). */
.br-mission__item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

/* Boîte image : ratio 517/280, hauteur = largeur * 280/517, photo en cover */
.br-mission__media {
  position: relative;
  width: 100%;
  aspect-ratio: 517 / 280;
  overflow: hidden;
  background: #c7c7c7;
}
.br-mission__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.br-mission__num {
  position: absolute;
  left: clamp(14px, 1.5vw, 28px);
  bottom: clamp(6px, 0.6vw, 14px);
  font-family: var(--br-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(56px, 7.6vw, 131px);
  line-height: 0.8;
  color: var(--br-white);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.br-mission__body { margin-top: clamp(18px, 1.4vw, 26px); }
.br-mission__title {
  font-family: var(--br-font-body);
  font-weight: 500;
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.25;
  margin: 0 0 8px;
}
.br-mission__text {
  font-family: var(--br-font-body);
  font-weight: 500; /* Figma Heading 4 : Helvetica Neue Medium */
  font-size: clamp(20px, 1.62vw, 28px); /* Figma : 28px */
  line-height: 1.2;
  margin: 0;
}
/* Contenu riche (WYSIWYG, issue #9) : paragraphes/listes serrés, liens charte. */
.br-mission__text p { margin: 0 0 .5em; }
.br-mission__text p:last-child { margin-bottom: 0; }
.br-mission__text ul, .br-mission__text ol { margin: 0 0 .5em; padding-left: 1.1em; }
.br-mission__text li { margin: 0 0 .2em; }
.br-mission__text a { color: var(--br-black, #000); text-decoration: underline; }

/* Flèches : sous le carrousel, uniquement en mode défilement, alignées à GAUCHE */
.br-mission__nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(16px, 2vw, 20px);
  margin-top: clamp(28px, 3vw, 48px);
}
.br-mission--fill .br-mission__nav { display: none; }
.br-mission__arrow {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--br-black);
  display: inline-flex;
  -webkit-tap-highlight-color: transparent;
}
.br-mission__arrow:hover { opacity: 0.6; }
.br-mission__arrow[disabled] { opacity: 0.25; cursor: default; }
.br-mission__arrow-svg { width: clamp(56px, 6vw, 84px); height: auto; display: block; }

/* Pagination numérotée (issue #48/#56) — même système que le carrousel Actualité :
   numéros en PP Eiko italique, injectés par JS (un par page). */
.br-mission__dots { display: flex; gap: clamp(12px, 1.16vw, 20px); font-family: var(--br-font-display); font-style: italic; font-size: clamp(18px, 1.74vw, 30px); }
.br-mission__dot { -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; color: #c2bdb5; transition: color 0.2s ease; line-height: 1; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }
.br-mission__dot:hover, .br-mission__dot:focus, .br-mission__dot:active { background: none !important; box-shadow: none !important; outline: none; }
.br-mission__dot.is-active { color: var(--br-black); }

@media (max-width: 760px) {
  .br-mission__num { font-size: clamp(56px, 14vw, 96px); }
}

/* =====================================================================
   Variante « page contenu » (.br-mission--narrow) — posée par mission.js
   quand le widget vit dans une colonne < 80% du viewport (pages 2 col).
   Maquette TW/Présentation : vignettes alignées sur le bord du conteneur
   (pas de padding de section), numéros proportionnés, texte en corps
   compact (pas le Heading 4 de la home).
   ===================================================================== */
.br-mission--narrow{
  padding: clamp(16px, 1.5vw, 32px) 0 0;
  /* Vignettes calées sur le bord gauche du GRAND LOGO du footer = colonne 4
     Figma stricte (min(468px, 27.08vw), formule de .br-footer__logo) — retour
     client 2026-07-13, même ancrage que l'image du slideshow page contenu.
     Le module pose le widget au retrait des textes (35 % du conteneur =
     35vw − 39.2px en absolu) → la marge fait la différence ; à droite,
     jusqu'au bord du viewport (compense les 56px de marge de page). */
  margin-left: calc(min(468px, 27.08vw) - 35vw + 39.2px);
  margin-right: -56px;
}
.br-mission--narrow .br-mission__viewport { margin: 0; padding: 0; }
.br-mission--narrow .br-mission__heading { font-size: clamp(24px, 2vw, 34px); }
/* Numéros : taille home (131px @1728, clamp générique) — Figma les garde pleins. */
.br-mission--narrow .br-mission__media { aspect-ratio: 380 / 280; } /* Figma 2 col (home : 517/280) */
.br-mission--narrow .br-mission__body { margin-top: clamp(24px, 3.07vw, 53px); }
.br-mission--narrow .br-mission__title { font-size: clamp(13px, 0.93vw, 16px); }
.br-mission--narrow .br-mission__text {
  font-weight: 400;
  font-size: clamp(12px, 0.81vw, 14px);
  line-height: 1.38;
  max-width: 91%; /* Figma : texte 346 sur vignette 380 */
}

/* CTA optionnel par vignette (libellé + lien, retours client 2026-07-13) :
   libellé + FLÈCHE longue (pattern Donate/hero), calé EN BAS de la carte
   (les cartes s'étirent à hauteur égale, le bouton est poussé au fond). */
.br-mission__track{ align-items: stretch; }   /* cartes à hauteur égale (était flex-start) */
.br-mission__body{ display: flex; flex-direction: column; flex: 1 1 auto; }
.br-mission__btn{
  display: inline-flex; align-items: center; gap: clamp(12px, 1.2vw, 18px);
  margin-top: auto; padding-top: clamp(14px, 1.4vw, 22px);   /* margin-top:auto = bas de carte */
  align-self: flex-start;
  color: var(--br-black, #000);
  font-family: var(--br-font-body); font-size: clamp(14px, 1vw, 16px);
  text-decoration: none; white-space: nowrap;
}
.br-mission__btn:hover span{ text-decoration: underline; }

/* Image cliquable (même lien que le CTA) : aucun habillage, curseur seul. */
.br-mission__media-link{ display: block; line-height: 0; color: inherit; }

/* =====================================================================
   Overlay photo (issue #46), cohérent avec le hero : voile dégradé plus dense
   en BAS — là où le grand numéro blanc est incrusté — pour garder le numéro
   lisible sur les photos claires, sans dénaturer l'image. Le voile passe SOUS le
   numéro (z-index) ; pas de voile sur le placeholder gris (.is-empty).
   ===================================================================== */
.br-mission__media:not(.is-empty)::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,0) 65%);
}
.br-mission__num{ z-index: 2; }