/* Habillage OMS commun aux stations : grand logo, emblème de l'OMS en filigrane, écran d'accueil qui donne envie de jouer.
   --st est la couleur de la station (orange, bleu ou violet). */
.logos .logo{height:clamp(64px,10vh,110px)}
.logos .logo-text{height:clamp(64px,10vh,110px);font-size:.85rem}

/* Emblème de l'OMS en filigrane derrière toute la page, qui respire lentement. */
body::before{content:"";position:fixed;right:-10vmax;bottom:-12vmax;width:72vmax;aspect-ratio:528/466;background:var(--st);opacity:.07;pointer-events:none;z-index:0;
  -webkit-mask:url("../img/embleme-oms.png") center/contain no-repeat;mask:url("../img/embleme-oms.png") center/contain no-repeat;
  animation:oms-respire-fond 12s ease-in-out infinite}
@keyframes oms-respire-fond{50%{transform:scale(1.04) rotate(-2deg)}}
.logos,main,footer{position:relative;z-index:1}

/* Écran d'accueil : grand bandeau à la couleur de la station, emblème blanc en transparence. */
#ecran-accueil{position:relative;overflow:hidden;border-radius:28px;padding:clamp(24px,5vw,56px);color:#fff;
  background:radial-gradient(circle at 85% 15%, color-mix(in srgb,var(--st) 55%,#fff), var(--st) 45%, color-mix(in srgb,var(--st) 60%,#000));
  box-shadow:0 30px 60px -30px var(--st)}
#ecran-accueil::after{content:"";position:absolute;right:-30px;top:50%;width:min(44%,440px);aspect-ratio:528/466;background:#fff;opacity:.18;pointer-events:none;
  -webkit-mask:url("../img/embleme-oms.png") center/contain no-repeat;mask:url("../img/embleme-oms.png") center/contain no-repeat;
  transform:translateY(-50%);animation:oms-respire 8s ease-in-out infinite}
@keyframes oms-respire{50%{transform:translateY(-50%) scale(1.06)}}
#ecran-accueil > *{position:relative;z-index:1}
#ecran-accueil .eyebrow,#ecran-accueil h1,#ecran-accueil .sub,#ecran-accueil .choisir{color:#fff}
#ecran-accueil .sub{opacity:.95;max-width:46ch}
#ecran-accueil h1 .v,#ecran-accueil h1 .f{color:#fff;padding:0 .18em;border-radius:14px}
#ecran-accueil h1 .v{background:var(--vrai,#2B9B67)} #ecran-accueil h1 .f{background:var(--autre,#D9822B)}

/* Cartes d'âge : blanches, qui flottent chacune à leur rythme pour inviter à toucher. */
#ecran-accueil .age{background:#fff;color:#13304A;border:0;box-shadow:0 14px 30px -14px rgba(0,0,0,.45);animation:oms-flotte 4s ease-in-out infinite}
#ecran-accueil .age:nth-child(2){animation-delay:.4s} #ecran-accueil .age:nth-child(3){animation-delay:.8s}
#ecran-accueil .age:hover,#ecran-accueil .age:focus-visible{transform:translateY(-6px) scale(1.03);animation-play-state:paused}
#ecran-accueil .age strong,#ecran-accueil .age .age-tranche{color:inherit}
#ecran-accueil .age .age-tranche{color:#fff}
@keyframes oms-flotte{50%{transform:translateY(-6px)}}

/* Pages ACT : emblème blanc en transparence dans le bandeau. */
.bandeau{position:relative;overflow:hidden}
.bandeau::after{content:"";position:absolute;right:-24px;bottom:-24px;width:min(46%,260px);aspect-ratio:528/466;background:#fff;opacity:.18;pointer-events:none;
  -webkit-mask:url("../img/embleme-oms.png") center/contain no-repeat;mask:url("../img/embleme-oms.png") center/contain no-repeat}
.bandeau > *{position:relative;z-index:1}

@media (prefers-reduced-motion: reduce){body::before,#ecran-accueil::after,#ecran-accueil .age{animation:none}}

/* « Qui joue ? » : nombre de filles et de garçons du groupe, à remplir avant l'âge. Secoue si on l'oublie. */
.sexes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:4px 0 16px}
.sexes-titre{font-weight:800;color:#fff;margin-right:4px}
.sexe{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 16px;border-radius:999px;border:2px solid rgba(255,255,255,.7);background:rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:1.05rem;transition:background .15s}
.sexe.choisi{background:#fff;color:var(--st);border-color:#fff;box-shadow:0 10px 22px -10px rgba(0,0,0,.5)}
.sexe-nom span{margin-right:.3em}
.sexe b{min-width:2ch;text-align:center;font-size:1.3rem;font-variant-numeric:tabular-nums}
.sexe button{font:inherit;font-weight:800;font-size:1.3rem;line-height:1;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.25);color:inherit}
.sexe.choisi button{background:color-mix(in srgb,var(--st) 14%,#fff)}
.sexe button:active{transform:scale(.92)}
.sexes.manque .sexe{animation:oms-secoue .4s}
.sexes.manque::after{content:"↑ Indique combien de filles et de garçons jouent";flex-basis:100%;font-weight:700;color:#fff;background:rgba(0,0,0,.22);padding:6px 12px;border-radius:10px}
@keyframes oms-secoue{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}