:root {
    --pola-ratio: 0.82;
    --micro-gap: .8vh;
    --small-gap: 1.2vh;
    --gap: 2vh;
    --large-gap: 5vh;
    --largeur-users: 80%;
    --largeur-cadre: calc(100vw - var(--large-gap));
    --largeur-cadre-nogaps: calc(var(--largeur-cadre) - ((var(--nb-colonnes) - 1) * var(--gap)));
    --hauteur-cadre: calc(100vh - var(--large-gap));
    --hauteur-infos: 2.5vh;
    --hauteur-trombi: calc(var(--hauteur-cadre) - var(--hauteur-infos) - var(--gap));
    --nb-gaps: calc(var(--nb-lignes) - 1);
    --hauteur-trombi-nogap: calc(var(--hauteur-trombi) - (var(--nb-gaps) * var(--gap)));
    --largeur-case: max(5vw, calc(var(--largeur-cadre-nogaps) / var(--nb-colonnes)));
    --hauteur-case: max(calc(5vw * var(--pola-ratio)), calc(var(--hauteur-trombi-nogap) / var(--nb-lignes)));

    --taille-texte: clamp(.6em, 0.8vw, 5em);
    --taille-icone: clamp(24px, 1.5vw, 32px);
    /* --largeur-case: clamp(10vw, var(--hauteur-cadre), 20vw);
    --hauteur-case: min(calc(var(--largeur-case) * var(--pola-ratio)), calc(var(--hauteur-cadre) / var(--nb-lignes))); */
}

html,
body {
    margin: 0;
    font-family: sans-serif;
    color: var(--couleur-du-texte)
}

@media (min-width: 800px) {

    html,
    body {
        height: 100vh;
        overflow: hidden;
    }
}

body {
    content: 'mobile';
}

@media (min-width: 800px) {
    body {
        content: 'desktop'
    }
}

.fond {
    background-color: var(--couleur-du-fond);
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.fond>img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wrapper {
    display: flex;
    gap: var(--gap);
    flex-direction: column;
    width: 100vw;
    align-items: center;
    justify-content: center;
    padding-block: var(--gap);

    /* --largeur-cadre: calc(100vw - var(--large-gap));
    --hauteur-cadre: calc(100vh - var(--large-gap));
    --largeur-cadre-sans-gaps: calc(var(--largeur-cadre) - (var(--gap) * (var(--nb-colonnes) - 1)));
    --hauteur-cadre-sans-gaps: calc(var(--hauteur-cadre) - (var(--gap) * (var(--nb-lignes) - 1)));
    --largeur-user: calc(var(--largeur-cadre-sans-gaps) / var(--nb-colonnes));
    --hauteur-user: calc(var(--hauteur-cadre-sans-gaps) / var(--nb-ligne)); */
}

@media (min-width: 800px) {
    .wrapper {
        height: calc(100vh - (var(--gap) * 2));
    }
}

.wrapper>* {
    width: var(--largeur-cadre);
}


.trombi {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 800px) {
    .trombi {
        height: var(--hauteur-trombi);
    }
}

.infos {
    display: flex;
    gap: var(--gap);
    flex-direction: column;
}

.infos>div:last-child {
    display: none;

    @media (min-width: 800px) {
        display: flex;
        justify-content: end;
    }
}

@media (min-width: 800px) {
    .infos {
        flex-direction: row;
    }

    .infos>div:last-child {
        flex: 1;
    }
}

.infos>div {
    display: flex;
    gap: var(--small-gap);
    font-variant: small-caps;
    font-family: 'police-grasse';
    font-size: var(--taille-texte);
    height: var(--hauteur-infos);
    align-items: center;
}

.infos time {
    color: inherit;
    transition: color .5s ease;
}

.infos time span {
    /* font-variant-numeric: tabular-nums; */
}

.infos time.loading {
    color: transparent;
}

.infos>div>*:not(:first-child) {
    padding-left: var(--small-gap);
    border-left: 1px solid var(--couleur-du-texte);
}

.legende {
    display: flex;
    gap: var(--gap)
}

.legende>div {
    display: flex;
    gap: var(--micro-gap);
    align-items: center;
}

.legende svg,
.legende img {
    width: var(--taille-icone);
    aspect-ratio: 1;
    object-fit: contain;
}

.users {
    width: var(--largeur-users);
    display: flex;
    flex-direction: column;
    gap: var(--gap)
}

.users .line {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.user {
    width: 100%;
    height: auto;
    aspect-ratio: var(--pola-ratio);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 800px) {

    .users {
        width: auto;
        /* width: var(--largeur-cadre); */
        /* height: var(--hauteur-cadre); */
    }

    .users .line {
        flex: 1;
        flex-direction: row;
    }


    .user {
        aspect-ratio: initial;
        flex: 1;
        width: var(--largeur-case);
        height: var(--hauteur-case);
    }
}


.user:not(:hover) .actions {
    display: none;
}

.user .actions {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user .actions div {
    display: flex;
    gap: 1px;
}

.user .actions div a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background-color: white;
    aspect-ratio: 1;
    color: black;
    width: 2vw;
}

/* @media (orientation: landscape) {
    figure {
        width: auto;
        height: 100%;
    }
}

@media (orientation: portrait) {
    figure {
        width: 100%;
        height: auto;
    }
} */

figure {
    /* display: none !important; */
    margin: 0;
    /* max-height: 15vw; */
    /* height: 100%; */
    /* width: auto; */
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

figure nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 94%;
    gap: 3%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    margin: 1%;
}

figure nav span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    aspect-ratio: 1;
    /* border-radius: 50%; */
    /* background-color: white; */
}

figure nav span svg,
figure nav span img {
    transform: translate(-15%, -25%);
    width: 80%;
    height: 80%;
    object-fit: contain;
    transform: rotate(-30deg);
    /* animation: blinkAnimation 5s linear infinite; */
}





@keyframes blinkAnimation {

    0%,
    20%,
    40%,
    50%,
    90%,
    100% {
        opacity: 0;
    }

    10%,
    30%,
    60% {
        opacity: 1;
    }
}

figure .image[src=""] {
    visibility: hidden;
}

figure .image {
    opacity: 1;
    aspect-ratio: var(--pola-ratio);
    /* height: 100%; */
    position: absolute;
    /* object-fit: contain; */
}

figure .image.ready {
    transition: opacity 1s ease;
}

@media (orientation: landscape) {
    figure .image {
        width: auto;
        height: 100%;
    }
}

@media (orientation: portrait) {
    figure .image {
        width: 100%;
        height: auto;
    }
}


figure span.image.big {
    position: relative;
    display: block;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}
figure span.image.big > img:not(.qr) {
	position:absolute;
	width:100%;
	height:100%;
}

.user.loading figure .image.big {
    opacity: 0;
}

.user:not(.loading) figure .image.micro {
    /* opacity: 0; */
}

figure .micro {
    overflow: hidden;
}

figure .micro img {
    width: 100%;
    height: 100%;
    transform: scale(1.01);
    filter: blur(8px);
}


[data-anniversaire="true"] .image.big {
    position: relative;
}

[data-anniversaire="true"] .image.big:after {
    content: '';
    position: absolute;
    top: 1%;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/images/cadre-anniv.png) no-repeat center;
    background-size: contain;
    transform: scale(1.1);
}

.user[data-gagnant="true"] .image.big {
    position: relative;
}
.user:not(.bravo)[data-gagnant="true"]  .image.big{
    filter: drop-shadow(0 0 0.75rem black);
    scale: 1.1;
}

.user[data-gagnant="true"] .image.big:after{
    content: '';
    position: absolute;
    width: 30%;
    aspect-ratio: 1;
    top: 0;
    left: 0;
    background: var(--picto-avent) no-repeat center;
    background-size: contain;
    transform: rotate(-20deg);
}

.user.bravo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    gap: 1em;
}

.user.bravo:before {
    content: 'Gagnant(e) du jour:';
    display: block;
    font-family: 'police-grasse';
}

.user.bravo.display {
    opacity: 1;
	z-index:99999999
}

.user.bravo.end {
    opacity: 0;
}

.user.bravo figure {
    width: 50%;
    height: 50%;
}

body:not(:has(.user .erreur-adhesion)) .infos .erreur-adhesion {
    display: none;
}
body:not(:has(.user .erreur-ticket)) .infos .erreur-ticket {
    display: none;
}
.user .qr{
	position: absolute;
  width: 25%;
top: 9%;
  left: 10%;
}

.user:has([class*="erreur-"]) .le-polaroid{
	border:4px dotted red;
    box-sizing: border-box;
	  animation: borderFade 1s infinite;
	//filter: sepia(100%) saturate(1500%) hue-rotate(756grad) brightness(120%);
}
@keyframes borderFade {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: red;
  }
  100% {
    border-color: transparent;
  }
}
.user:has([class*="erreur-"]){
}

.user[data-location]:not([data-location=""]) .image:before {
    content: '';
    background: url(/images/poulailler.png) no-repeat center;
    background-size: contain;
    position: absolute;
    width: 25%;
    aspect-ratio: 1;
    bottom: 13%;
    left: 4%;
    z-index: 10;
}

.user[data-location="pti-poulailler"] .image:before {
    background-image: url(/images/pti-poulailler.png) !important;
}

.user[data-location="cantina"] .image:before {
    background-image: url(/images/cantina.png) !important;
}
.user[data-location="racine"] .image:before {
    background-image: url(/images/racine.png) !important;
}


@media (min-width: 800px) {
    .user.autres {
        display: none;
    }
}

@media (max-width: 800px) {
    .user.autres {
        background-color: var(--couleur-du-texte);
        color: var(--couleur-du-fond);
        text-transform: uppercase;
        padding: var(--gap);
        box-sizing: border-box;
        text-align: center;
        font-family: 'police-grasse';
    }

    :root {
        --largeur-users: 40%;
        --largeur-cadre: 100%;
    }

    .infos>div {
        justify-content: center;
    }

    .infos>div>span:not(:first-child) {
        display: none;
    }

    .infos date {
        display: none;
    }

    .users .line:not(:first-child),
    .line .user:nth-child(n + 5):not(.autres) {
        display: none !important;
    }

}

.user:not([data-badge="true"]) .badge {
	display:none;
}

.user:not([data-cafe="true"]) .cafe{
	display:none;
}
.user .goodies {

	position:absolute;
	top:5%;
	right:8%;
	content:'';
	width:9%;
	z-index:2;
	display:grid;
	gap:1%;
	padding:1%;
	>span {
		width:100%;
		aspect-ratio:1;
		background-size:contain;
		background-repeat: no-repeat;
		background-position: center;
	}
}

[data-debit="true"] .goodies {
	display:none !important;
}