/* 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}}