/* ==========================================================
   PRESIDENT.CSS
   2B ÉVÉNEMENT
   Version Premium V1.0
========================================================== */

/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --bleu:#0B3C5D;
    --bleu-clair:#164d73;
    --orange:#F39C12;
    --blanc:#ffffff;
    --gris:#f5f7fa;
    --texte:#2d3748;

}

/* ==========================================================
   RESET
========================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Poppins",sans-serif;

    background:linear-gradient(
        135deg,
        var(--bleu),
        var(--bleu-clair)
    );

    color:var(--blanc);

    overflow-x:hidden;

    position:relative;

    min-height:100vh;

}.president,
.president h1,
.president p,
.president .citation,
.president .texte,
.president .signature,
.president .edition {
    color: var(--orange);
}

/* ==========================================================
   FOND PREMIUM
========================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(243,156,18,.10),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(255,255,255,.05),
            transparent 35%
        ),

        radial-gradient(
            circle at 60% 30%,
            rgba(255,255,255,.03),
            transparent 40%
        );

    animation:backgroundMove 18s ease-in-out infinite;

    pointer-events:none;

    z-index:-1;

}

/* ==========================================================
   SECTION
========================================================== */

.president{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:70px 20px;

}

/* ==========================================================
   CONTENEUR
========================================================== */

.container{

    width:100%;

    max-width:1050px;

    background:rgba(255,255,255,.07);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    border-radius:28px;

    padding:60px;

    text-align:center;

    box-shadow:

        0 30px 80px rgba(0,0,0,.35),

        inset 0 1px 0 rgba(255,255,255,.08);

    animation:apparition 1s ease;

    transition:

        opacity .8s,

        transform .8s;

}

/* ==========================================================
   PHOTO
========================================================== */

.photo-president{

    width:430px;

    max-width:100%;

    display:block;

    margin:0 auto 40px;

    border-radius:18px;

    filter:drop-shadow(
        0 20px 40px rgba(0,0,0,.45)
    );

    transition:

        transform .5s,

        filter .5s;

    animation:zoomPhoto 1.4s ease;

}

.photo-president:hover{

    transform:scale(1.02);

    filter:drop-shadow(
        0 30px 60px rgba(0,0,0,.55)
    );

}

/* ==========================================================
   TITRE
========================================================== */

h1{

    font-size:3rem;

    font-weight:700;

    color:var(--orange);

    margin-bottom:12px;

    letter-spacing:.5px;

    animation:fadeDown .9s ease;

}

/* ==========================================================
   LIGNE DÉCORATIVE
========================================================== */

.ligne{

    width:0;

    height:4px;

    margin:20px auto 40px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--orange),
        transparent
    );

    animation:ligneTitre 1.2s forwards;

}

/* ==========================================================
   CITATION
========================================================== */

.citation{

    max-width:760px;

    margin:0 auto 45px;

    font-size:1.25rem;

    font-style:italic;

    line-height:1.8;

    color:#f1f1f1;

    opacity:.95;

}/* ==========================================================
   TEXTE
========================================================== */

.texte{

    text-align:justify;

    font-size:1.08rem;

    line-height:1.95;

    color:rgba(255,255,255,.96);

}

.texte p{

    margin-bottom:24px;

    opacity:0;

    animation:fadeTexte .8s forwards;

}

.texte p:nth-child(1){animation-delay:.30s;}
.texte p:nth-child(2){animation-delay:.55s;}
.texte p:nth-child(3){animation-delay:.80s;}
.texte p:nth-child(4){animation-delay:1.05s;}
.texte p:nth-child(5){animation-delay:1.30s;}
.texte p:nth-child(6){animation-delay:1.55s;}
.texte p:nth-child(7){animation-delay:1.80s;}
.texte p:nth-child(8){animation-delay:2.05s;}

/* ==========================================================
   LETTRINE
========================================================== */

.texte p:first-child::first-letter{

    float:left;

    font-size:4.2rem;

    line-height:.90;

    padding-right:10px;

    color:var(--orange);

    font-weight:700;

}

/* ==========================================================
   MOTS EN GRAS
========================================================== */

strong{

    color:var(--orange);

    font-weight:600;

}

/* ==========================================================
   SIGNATURE
========================================================== */

.signature{

    margin-top:50px;

    font-size:1.30rem;

    line-height:1.8;

    color:var(--orange);

    font-weight:700;

}

/* ==========================================================
   EDITION
========================================================== */

.edition{

    margin-top:15px;

    font-size:.90rem;

    letter-spacing:3px;

    text-transform:uppercase;

    color:rgba(255,255,255,.75);

}

/* ==========================================================
   BOUTON PREMIUM
========================================================== */

.btn-site{

    position:relative;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    margin-top:45px;

    padding:18px 48px;

    border-radius:50px;

    background:var(--orange);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    font-size:1rem;

    letter-spacing:.5px;

    transition:all .35s ease;

    box-shadow:

        0 15px 35px rgba(0,0,0,.25);

}

/* Effet lumineux */

.btn-site::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:70%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-20deg);

    transition:.8s;

}

.btn-site:hover::before{

    left:160%;

}

.btn-site:hover{

    transform:translateY(-5px);

    background:#ffffff;

    color:var(--bleu);

    box-shadow:

        0 20px 45px rgba(0,0,0,.35);

}

.btn-site:active{

    transform:translateY(-2px);

}

/* ==========================================================
   DISPARITION AVANT COMPTE À REBOURS
========================================================== */

.container.fade-out{

    opacity:0;

    transform:scale(.98);

    transition:.8s ease;

}/* ==========================================================
   COMPTE À REBOURS CINÉMA
========================================================== */

#countdown{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#000;

    opacity:0;

    visibility:hidden;

    transition:opacity .6s ease;

    z-index:99999;

}

#countdown.show{

    opacity:1;

    visibility:visible;

}

#number{

    font-size:16rem;

    font-weight:700;

    letter-spacing:-8px;

    color:#ffffff;

    font-variant-numeric:tabular-nums;

    text-shadow:

        0 0 25px rgba(255,255,255,.30),

        0 0 60px rgba(255,255,255,.20),

        0 0 120px rgba(255,255,255,.10);

    transition:transform .25s ease;

}

/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes apparition{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes zoomPhoto{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes ligneTitre{

    from{

        width:0;

    }

    to{

        width:190px;

    }

}

@keyframes fadeTexte{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes backgroundMove{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-25px,-20px);

    }

    100%{

        transform:translate(0,0);

    }

}

@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:992px){

    .container{

        padding:45px;

    }

    .photo-president{

        width:340px;

    }

}

@media (max-width:768px){

    .president{

        padding:40px 15px;

    }

    .container{

        padding:35px 25px;

        border-radius:20px;

    }

    .photo-president{

        width:250px;

    }

    h1{

        font-size:2.2rem;

    }

    .citation{

        font-size:1rem;

        margin-bottom:35px;

    }

    .texte{

        text-align:left;

        font-size:1rem;

        line-height:1.8;

    }

    .texte p:first-child::first-letter{

        font-size:3.2rem;

    }

    .signature{

        font-size:1.10rem;

    }

    .btn-site{

        width:100%;

        padding:16px;

    }

    #number{

        font-size:8rem;

        letter-spacing:-3px;

    }

}

@media (max-width:480px){

    .container{

        padding:30px 20px;

    }

    .photo-president{

        width:200px;

    }

    h1{

        font-size:1.8rem;

    }

    .ligne{

        margin:15px auto 30px;

    }

    .texte{

        font-size:.95rem;

    }

    #number{

        font-size:6rem;

        letter-spacing:-2px;

    }

}#countdown.fade-out{

    animation:fadeOut .8s forwards;

}

/* ==========================================================
   FIN DU FICHIER
========================================================== */