/**{
    box-sizing: border-box;
}

body {
    margin: 0;
    height: 100vh;
    background-color: #c7ff18;
    background-image:
            radial-gradient(at top left,    #99cc00, transparent 70%),
            radial-gradient(at top right,   #88a300, transparent 70%),
            radial-gradient(at bottom left, #e3f88b, transparent 70%),
            radial-gradient(at bottom right,#ddfd1a, transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    color: white;
}
h1{
    font-size: 4vw;
    margin: 0;
    font-family: Helvetica Neue, Helvetica, Inter, Arial, Segoe UI, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
#qr{
    position: absolute;
    top: 10px;
    left: 10px;
}
#qr img{
    height: 25vh;
    aspect-ratio: 1;
}
#network-qr{
    position: absolute;
    top: 10px;
    right: 10px;
}
#network-qr img{
    height: 25vh;
    aspect-ratio: 1;
}

#logo {
    flex: 1;
    line-height: 40vh;
}
#logo img{
    vertical-align: middle;
    height: 30vh;
}
#counter{
    flex: 1;
    font-size: 30vh;
    color: white;
    font-family: "Antonio", sans-serif;
    line-height: 40vh;
}
*/
:root{
    --ivoire:#F6F5F2;
    --txt:#0F172A;
}

/* Base plein écran */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--txt);
    background:var(--ivoire);
    overflow:hidden;
}
.screen{
    position:relative;
    min-height:100vh;
    display:grid;
    place-items:center;
    text-align:center;
    padding:6rem 1.2rem 5rem;
}

/* Positionnement des formes (SVG) */
.shape{ position:absolute; display:block }

/* QR en haut gauche/droite */
.qr-left{ left:0; top:0; width:min(40vmin,400px); height:auto; }
.qr-right{ right:0; top:0; width:min(40vmin,400px); height:auto; }

/* Logo centré au-dessus du titre */
.logo-wrap{
    position:relative;
    width:min(24vmin,190px); height:auto;
    margin-bottom:1rem;
    filter:drop-shadow(0 26px 44px rgba(234,158,72,.20));
}

/* Ruban du compteur au centre */
.counter-wrap{
    position:relative;
    width:min(1100px,92vw); height:auto;
    margin-top:.4rem;
    filter:drop-shadow(0 28px 48px rgba(120,100,200,.18));
}

/* Titre */
.title{
    z-index:1;
    margin:.2rem 0 1rem;
    font-weight:800;
    font-size:clamp(1.2rem,1rem + 2vw,2.4rem);
    letter-spacing:.2px;
    text-shadow:0 8px 20px rgba(0,0,0,.06);
}

/* Responsive mineur */
@media (max-width:640px){
    .title{ font-size:clamp(1.1rem,1rem + 1.6vw,2rem) }
}