/* ABLOGUI — widget « mission » (repris de la maquette d'accueil, maquettes/css/accueil.css) */
.ab-qui__titre { font-size: var(--ab-fs-xl); line-height: 1.12; letter-spacing: -.02em; max-width: 24ch; }
.ab-qui__bouton { margin-top: 36px; }
.mb2-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.mq-texte .ab-qui__titre { margin-bottom: 20px; }
.mq-texte p { color: var(--ab-texte-doux); font-size: var(--ab-fs-m); max-width: 56ch; }
.mq-texte p + p { margin-top: 14px; }
.mb2-grappe { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin-inline: auto; }
.mb2-rond { position: absolute; margin: 0; border-radius: 50%; overflow: hidden; transition: transform .9s var(--ab-doux); }
.mb2-rond img { width: 100%; height: 100%; object-fit: cover; }
.mb2-rond--1 { width: 64%; aspect-ratio: 1; left: 0; top: 4%; z-index: 2; }
.mb2-rond--1 img { object-position: center 30%; }
.mb2-rond--2 { width: 46%; aspect-ratio: 1; right: 0; bottom: 0; z-index: 3; }
.mb2-rond--3 { width: 32%; aspect-ratio: 1; right: 6%; top: 0; z-index: 1; }
.mb2-grappe:hover .mb2-rond--1 { transform: translate(-6px, -4px); }
.mb2-grappe:hover .mb2-rond--2 { transform: translate(6px, 6px); }
.mb2-grappe:hover .mb2-rond--3 { transform: translate(4px, -6px); }
.mb2-pastille { position: absolute; left: 6%; bottom: 6%; z-index: 5; padding: 14px 18px; border-radius: 16px; background: var(--ab-jaune); color: var(--ab-noir); font-weight: 900; line-height: 1.1; }
.mb2-pastille b { display: block; font-family: var(--ab-script); font-weight: 400; font-size: 2.2rem; }
@media (max-width: 900px) {
  .mb2-grille { grid-template-columns: 1fr; }
  .mb2-grappe { width: min(100%, 420px); }
}
.mq-texte .mq-statuts { margin: 22px 0 0; padding: 2px 0 2px 20px; border-left: 4px solid var(--ab-vert); }
.mq-texte .mq-statuts p { color: var(--ab-noir); font-weight: 700; line-height: 1.5; }
.mq-statuts cite { display: block; margin-top: 8px; font-style: normal; font-size: var(--ab-fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ab-texte-doux); }

/* Triptyque : trois bandes verticales qui se chevauchent, celle du centre devant et plus bas */
.mb2-triptyque { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1.02; margin-inline: auto; }
.mb2-bande { position: absolute; width: 41%; aspect-ratio: 1 / 2.05; margin: 0; border: 6px solid #fff; border-radius: 22px; overflow: hidden; background: var(--ab-papier); box-shadow: 0 30px 50px -34px rgba(29, 29, 27, .55); }
.mb2-bande img { width: 100%; height: 100%; object-fit: cover; }
.mb2-bande--1 { left: 0; top: 3%; z-index: 1; }
.mb2-bande--2 { left: 29.5%; top: 13%; z-index: 3; }
.mb2-bande--3 { right: 0; top: 0; z-index: 2; }
.mb2-triptyque .mb2-pastille { left: -2%; bottom: 7%; z-index: 5; }
@media (max-width: 900px) {
  .mb2-triptyque { width: min(100%, 440px); }
  .mb2-bande { border-width: 4px; border-radius: 16px; }
  .mb2-triptyque .mb2-pastille { left: 0; bottom: 4%; }
}