@font-face {
    font-family: 'gotham_condensedbold';
    src: url('../fonts/gotham_condensed_bold.woff2') format('woff2'),
         url('../fonts/gotham_condensed_bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family:"pf-venue";
    src:url("https://use.typekit.net/af/2b0dc7/0000000000000000774f2b0e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/2b0dc7/0000000000000000774f2b0e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/2b0dc7/0000000000000000774f2b0e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 2160px;
    height: 3840px;
    overflow-x: hidden; /* Empêche le défilement horizontal */
    background: url('../images/bg.png') no-repeat center center;
    background-size: cover;
}

body {
    margin: 0 auto; /* Centre la page dans la fenêtre du navigateur */
    position: relative;
}

#videobg {
    position: absolute;
    bottom: 185px;
    z-index: -1;
    width: 100%;
}

#container {
    position: absolute;
    top: 624px;
    left: calc((2160px - 1500px) / 2); /* Centrage exact du conteneur par rapport au document de 2160px */
    width: 1500px;
    height: 1960px;
    background-color: white;
    padding: 33px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#square {
    width: 100%;
    position: relative;
    padding-bottom: 100%; /* Ratio pour un carré */
    background: url(../images/quoi-face.png) no-repeat center center;
    background-size: cover;
    aspect-ratio: 0.94488189;
    transition: all 0.5s ease;
}

body.step1 #square{
    aspect-ratio: 1;
}

#slogan {
    left:0;
    right:0;
    bottom:8.86%;
    position:absolute;
    aspect-ratio: calc(1518 / 353);
    background: url(../images/quoi-text.png) no-repeat center center;
    background-size: cover;
    animation: growShake 20s ease-in-out infinite;
}

#webcamContainer {
    top: 0;
    bottom: 0;
    overflow: hidden;
    position: absolute;
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    width: 100%;
}
#webcamVideo {
    height: 1434px;
    rotate: 90deg;
    object-fit: cover; /* Remplit le conteneur en couvrant tout, sans déformation */
}

#button-container {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    flex-grow: 1; /* Prend toute la place restante disponible sous l'image carrée */
    height: auto; /* Permet à la hauteur de s'adapter */
}

.btn {
    position: relative;
    height: 201px;
    border: #fff 12px solid;
    background: #e37287;
    font-size: 85px;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-radius: 105px;
    padding: 0 145px;
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.32) 0px 20px 72px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 2px;
    font-family: 'gotham_condensedbold';
    margin-top: 20px;
    overflow: hidden; /* pour masquer le reflet qui dépasse */
    transition: all 0.5s ease;
}

.btn.grey {
    background: #cacaca;
    margin-right: 80px;
}

.btn.smallpadding {
    padding: 0 40px;
}

/* Ajouter un pseudo-élément pour l'effet de reflet */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 110%; /* Début en dehors du bouton */
    height: 100%;
    width: 130%; /* Taille supérieure pour créer un large reflet */
    background: rgba(255, 255, 255, 0.4);
    transform: skewX(-45deg); /* Incliner pour l'effet de reflet */
    transition: none;
    animation: shine 8s ease-in-out infinite;
}

#countdown {
    font-size: 48px;
    width: 700px;
    height: 700px;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 50%;
    color: #fff;
    font-size:450px;
    padding-top:90px;
    background: radial-gradient(circle, rgba(14, 14, 14, 0) 0%, rgb(227, 114, 135) 120%);
    font-family: "pf-venue", sans-serif;
}

#countdown.active {
    animation: countdown 5s steps(5) forwards;
}

#countdown.active::before {
    content: "5";
    animation: countdownText 5s steps(5) forwards;
}

#flash {
    width:100%;
    height:100%;
    position:absolute;
}

#flash.active {
    animation: flash 0.3s cubic-bezier(0.85, 0, 0.15, 1) 1 forwards;
}

#photo {
    width: 100%;
    height: 100%;
}

#qrcontainer {
    box-shadow: rgba(0, 0, 0, 0.32) 0px 20px 72px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 2px;
    width: 600px;
    height: 600px;
    background: #fff;
    position: absolute;
    bottom: 220px;
    padding: 110px;
    border-radius: 80px;
}

#arrow {
    width: 174px;
    height: 244px;
    background: url(../images/arrow.png);
    filter: brightness(9) contrast(99999999);
    background-size: contain;
    position: absolute;
    margin-left: -675px;
    bottom: 150px;
    mix-blend-mode: multiply;
}

body.step4 #qrcontainer {
    display: flex !important;
    animation: zoomBounce 0.5s ease-out forwards;
}

body.step4 #arrow{
    animation: brightnessAnimation 1s 1s 1 cubic-bezier(0, 0, 0, 0.99) forwards;
}

#legend {
    font-family: 'gotham_condensedbold';
    font-size:70px;
    bottom: 60px;
    position: absolute;
    color:#e37287;
}

@keyframes brightnessAnimation {
    from { filter: brightness(1.9) contrast(99999999); }
    to { filter: brightness(0.35) contrast(99999999); }
}

@keyframes flash {
    0% { background-color: transparent; }
    15% { background-color: white; }
    100% { background-color: transparent; }
}

@keyframes countdown {
    0% { visibility: visible; }
    98% { visibility: hidden; }
    100% { visibility: hidden; }
}

@keyframes countdownText {
    0% { content: "5"; }
    20% { content: "4"; }
    40% { content: "3"; }
    60% { content: "2"; }
    80% { content: "1"; }
    99% { content: "1"; }
    100% { content: ""; }
}

@keyframes shine {
    0% { left: -100%; }
    5% { left: 110%; }
    5.01% { left: 110%; }
    100% { left: 110%; }
}

@keyframes growShake {
    0% { transform: scale(0.9); }
    0.3% { transform: scale(1.1) translate(0, 0); }
    0.6% { transform: scale(1.1) translate(-7px, 0); }
    0.9% { transform: scale(1.1) translate(7px, 7px); }
    1.2% { transform: scale(1.1) translate(-7px, 0); }
    1.5% { transform: scale(1.1) translate(7px, -7px); }
    1.8% { transform: scale(1.1) translate(0, 7px); }
    2.1% { transform: scale(1.1) translate(-7px, -7px); }
    2.4% { transform: scale(1.1) translate(7px, 0); }
    2.7% { transform: scale(1.1) translate(0, 0); }
    3.2% { transform: scale(0.9); }
    100% { transform: scale(0.9); }
}

@keyframes zoomBounce {
    0% { opacity: 0; transform: scale(0); }
    60% { opacity: 1; transform: scale(1.2); }
    80% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

body [class^="step"], body [class*="step"]{
    display: none !important;
}

body.step1 .step1,
body.step2 .step2,
body.step3 .step3,
body.step4 .step4,
body.step5 .step5 {
    display:block !important;
}

body.step2 #webcamContainer {
    display: flex !important;
}