/* =========================================================
   Wah! — page « À propos » (templates/a-propos.php)
   Chargé après homepage.css, dont il reprend les jetons et les bases (.wah-home).
   ========================================================= */

/* Ouverture */
.wah-apropos .ouverture::before{width:min(900px,62vw);right:-12%;top:50%;bottom:auto;translate:0 -50%;background-image:url(../img/fond.png);transform:rotate(14deg)}
.wah-apropos .ouverture .wrap{display:block;padding-top:clamp(56px,7vw,112px);padding-bottom:clamp(64px,8vw,128px)}
.wah-apropos .ouverture h1{color:var(--cyan);font-size:clamp(3.4rem,9vw,8rem);line-height:.86;letter-spacing:-.04em}
.wah-apropos .ouverture .chapo{font-size:clamp(1.25rem,2.1vw,1.85rem);font-weight:700;line-height:1.28;margin-top:clamp(22px,2.6vw,36px);max-width:26ch;text-wrap:balance}
.wah-apropos .ouverture .chapo-2{font-size:clamp(1rem,1.2vw,1.1rem);color:var(--lavande-2);margin-top:18px;max-width:46ch;line-height:1.65}

/* Têtes de section : titre puis texte, en colonne */
.wah-apropos .tete{display:block}
.wah-apropos .tete p{color:var(--encre-douce);max-width:52ch;margin-top:14px}

/* Pourquoi : trois constats */
.wah-apropos .constats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:3px solid var(--nuit)}
.wah-apropos .constats li{padding:clamp(24px,3vw,40px) clamp(20px,2.4vw,36px) clamp(28px,3vw,44px);border-bottom:3px solid var(--nuit)}
.wah-apropos .constats li:first-child{padding-left:0}
.wah-apropos .constats li+li{border-left:3px solid var(--nuit)}
.wah-apropos .constats .num{display:block;font-size:14px;font-weight:600;color:var(--encre-douce);font-variant-numeric:tabular-nums}
.wah-apropos .constats h3{font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.05;letter-spacing:-.025em;margin-top:8px}
.wah-apropos .constats h3 span{background:var(--trait) no-repeat 0 78%/100% .5em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wah-apropos .constats li:nth-child(1){--trait:var(--trait-cyan)}
.wah-apropos .constats li:nth-child(2){--trait:var(--trait-lilas)}
.wah-apropos .constats li:nth-child(3){--trait:var(--trait-rouge)}
.wah-apropos .constats p{margin-top:14px;max-width:38ch}

/* Ce que fait Wah! : missions → rubriques */
.wah-apropos .missions-bande{background:var(--lavande);position:relative;overflow:hidden;isolation:isolate}
.wah-apropos .missions-bande::before{content:"";position:absolute;z-index:-1;width:min(560px,56vw);aspect-ratio:2000/1800;left:-16%;bottom:-34%;background:url(../img/fond.png) center/contain no-repeat;transform:rotate(-150deg)}
.wah-apropos .grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,88px);align-items:start}
.wah-apropos .missions-bande .tete{position:sticky;top:32px}
.wah-apropos .missions-bande .illu{width:min(100%,300px);margin-top:clamp(24px,3vw,40px)}
.wah-apropos .missions a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;padding:22px 0;border-top:2px solid var(--nuit)}
.wah-apropos .missions li:last-child a{border-bottom:2px solid var(--nuit)}
.wah-apropos .missions strong{display:block;font-size:clamp(1.35rem,2.2vw,1.9rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.wah-apropos .missions strong span{background:var(--trait-cyan) no-repeat 0 60%/0% .5em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .55s var(--ease)}
.wah-apropos .missions a:hover strong span,.wah-apropos .missions a:focus-visible strong span{background-size:100% .5em}
.wah-apropos .missions p{color:var(--encre-douce);margin-top:6px;max-width:54ch}
.wah-apropos .missions .vers{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;white-space:nowrap}
.wah-apropos .missions .vers svg{width:22px;height:22px;flex:none;transition:transform .4s var(--ease)}
.wah-apropos .missions a:hover .vers svg{transform:translateX(6px)}

/* Qui porte Wah! : partenaires du lancement, soutiens publics */
.wah-apropos .porteurs .tete p{color:var(--encre);font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:600;line-height:1.45;max-width:30ch}
.wah-apropos .porteurs .illu{width:min(100%,340px);margin-top:clamp(28px,3.5vw,48px)}
.wah-apropos .groupes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3vw,48px) clamp(24px,3vw,48px)}
.wah-apropos .groupe h3{font-size:14px;font-weight:700;line-height:1.4;letter-spacing:.02em;padding-bottom:10px;border-bottom:3px solid var(--nuit);display:flex;align-items:center;gap:10px}
.wah-apropos .groupe h3 i{width:26px;height:10px;border-radius:8px 3px 9px 4px;flex:none}
.wah-apropos .pastille-rouge{background:var(--rouge);opacity:.7}
.wah-apropos .groupe>p{color:var(--encre-douce);font-size:15px;margin-top:12px}
.wah-apropos .groupe ul{margin-top:6px}
.wah-apropos .groupe li{padding:10px 0;border-bottom:1px solid var(--filet);line-height:1.35}
.wah-apropos .groupe li strong{font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.wah-apropos .groupe li span{display:block;font-size:14px;color:var(--encre-douce);margin-top:2px}
.wah-apropos .soutiens{grid-column:1/-1}
.wah-apropos .soutiens ul{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,3vw,48px)}

/* ---------- Responsive ---------- */
@media (max-width:1060px){
  .wah-apropos .ouverture::before{right:-45%;top:auto;bottom:-30%;translate:none;width:min(760px,130vw)}
  .wah-apropos .grille{grid-template-columns:minmax(0,1fr)}
  .wah-apropos .missions-bande .tete{position:static}
  .wah-apropos .missions-bande .illu{display:none}
  .wah-apropos .porteurs .illu{width:min(60%,240px)}
}
@media (max-width:820px){
  .wah-apropos .constats{grid-template-columns:minmax(0,1fr)}
  .wah-apropos .constats li,.wah-apropos .constats li:first-child{padding-left:0;padding-right:0}
  .wah-apropos .constats li+li{border-left:0}
}
@media (max-width:720px){
  .wah-apropos .ouverture .wrap{padding-bottom:200px}
  .wah-apropos .ouverture::before{width:540px;right:-190px;bottom:-250px}
  .wah-apropos .missions-bande::before{display:none}
  .wah-apropos .missions a{grid-template-columns:minmax(0,1fr)}
  .wah-apropos .missions .vers{margin-top:6px}
  .wah-apropos .groupes,.wah-apropos .soutiens ul{grid-template-columns:minmax(0,1fr)}
}