@import url('https://fonts.googleapis.com/css2?family=Adamina&family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');

/* Pour les petits écrans (mobiles) */
@media {

    body{
        font-family: Afacad, sans-serif;
        overflow-x: hidden;
    }

    #entré{
        height: 90vh;
        width: auto;
        position: relative;
        overflow: hidden;
    }

    #entré .moi{
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: auto;
        width: 27em;
    }

    #entré .name{
        position: absolute;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        font-family: Afacad, sans-serif;
        color: #1D3458;
        font-weight: bold;
        /*font-size: 140px;*/
        font-size: clamp(120px, 23vw, 400px);

    }

    #entré .future{
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translateX(-50%);
        text-transform: uppercase;
        color : #1D3458;
        font-weight: 600;
        font-size: clamp(15px, 4vw, 26px);
        width: 20em;
        text-align: center;
    }

    #entré span{
        position: absolute;
        bottom: -0.5%;
        width: 100%;
        height: 60px;
        background: linear-gradient(to bottom, transparent 0%, white 100%);
    }

    #entré .fleurgauche{
        position: absolute;
        top: 8%;
        left: -10%;
        width: 15em;
        height: auto;
    }

    #entré .fleurdroite{
        position: absolute;
        top: 8%;
        right: -10%;
        width: 15em;
        height: auto;
        transform: scaleX(-1);
    }

    h1{
        text-transform: uppercase;
        color: #1D3458;
        font-weight: bolder;
        font-size: clamp(16px, 8vw, 60px);
        text-align: center;
        margin: 2em 1em;
    }

    .highlight{
        color: white;
        -webkit-text-stroke: 1px #1D3458;
        text-stroke: 1px #1D3458;
    }

    #citation{
        position: relative;
        height: 35vh;
        overflow: hidden;
    }

    .citation{
        color: #1D3458;
        font-size: clamp(25px, 4vw, 38px);
        width: 65%;
        margin: 0 1em;
        font-weight: 400;
    }

    .auteur{
        color: rgba(41, 59, 88, 0.57);
        font-size: clamp(15px, 2vw, 24px);
        margin-left: 5em;
        margin-top: 10px;
    }

    .guillemet{
        font-size: 500px;
        font-family: 'Adamina', sans-serif;
        position: absolute;
        right: -8%;
        top: -10%;
    }

    #univers{
        text-align: center;
        background-color: #1D3458;
        color: #DEDEDE;
        font-size: clamp(14px, 4vw, 28px);
        padding: 2em 2em 1em 2em;
    }

    #univers h2{
        font-size: clamp(16px, 8vw, 45px);
        text-transform: uppercase;
        margin-top: 2em;
    }

    #univers button{
        margin: 10px 15px 15px 15px;
        padding: 5px 15px;
        font-size: clamp(14px, 4vw, 28px);
        background-color: white;
        /*border: none;*/
        color: #1D3458;
        font-family: Afacad, sans-serif;
        border-radius: 2px;
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 1px 2px rgba(0,0,0,0.08); /* <-- ombre très légère */
        cursor: pointer;
        transition: box-shadow 150ms ease, transform 150ms ease;
    }

    #univers button:hover{
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        transform: translateY(-1px);
        color: #102342;
        background-color: rgba(255, 255, 255, 0.84);

    }

    .mavie h2{
        color: #1D3458;
        text-transform: uppercase;
        font-weight: bolder;
        font-size: clamp(14px, 6vw, 42px);
        text-align: center;
    }

    .mavie img{
        margin-bottom: 10px;
        border-radius: 2px;
    }

    .mavie p{
        font-size: clamp(14px, 4vw, 24px);
    }

    .mavie .mylife{
        margin-bottom: 3em;
    }

    .mavie .mylife div{
        padding: 20px 40px;
    }

    .mavie img{
        -webkit-filter: grayscale(100%); /* Pour les navigateurs Chrome, Safari, Opera */
        filter: grayscale(100%); /* Firefox */
        ;
        transition: 0.2s ease-in-out;
    }

    .mavie img:hover{
        -webkit-filter: grayscale(0%); /* Pour les navigateurs Chrome, Safari, Opera */
        filter: grayscale(0%); /* Firefox */
    ;
    }

    .work{
        text-align: center;
    }
    .work button{
        margin: 10px 15px 15px 15px;
        padding: 5px 15px;
        font-size: clamp(14px, 4vw, 28px);
        background-color: #1D3458;
        /*border: none;*/
        color: #ffffff;
        font-family: Afacad, sans-serif;
        border-radius: 2px;
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 1px 2px rgba(0,0,0,0.08); /* <-- ombre très légère */
        cursor: pointer;
        transition: box-shadow 150ms ease, transform 150ms ease;
    }

    .work button:hover{
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        transform: translateY(-1px);
        color: white;
        background-color: #102342;
    }

    #call{
        background-color: #1D3458;
        margin-top: 30px;
        padding: 2em 5em;
    }

    .call{
        text-align: center;
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 1px 2px rgba(0,0,0,0.10); /* <-- ombre très légère */
        background-color: white;
        border-radius: 2px;
        padding: 5px;
    }

    .call h1{
        margin: 1em;
    }

    .call button{
        margin: 10px 15px 15px 15px;
        padding: 5px 15px;
        font-size: clamp(14px, 4vw, 28px);
        background-color: #1D3458;
        /*border: none;*/
        color: #ffffff;
        font-family: Afacad, sans-serif;
        border-radius: 2px;
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 1px 2px rgba(0,0,0,0.08); /* <-- ombre très légère */
        cursor: pointer;
        transition: box-shadow 150ms ease, transform 150ms ease;
    }

    .call button:hover{
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        transform: translateY(-1px);
        color: white;
        background-color: #102342;
    }
}

/* Pour les écrans moyens (tablettes) */
@media (min-width: 601px) {
    #entré{
        height: 70vh;
        width: auto;
        position: relative;
        overflow: hidden;
    }

    #entré .moi{
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: auto;
        width: 27em;
    }

    #entré .name{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        font-family: Afacad, sans-serif;
        color: #1D3458;
        font-weight: bold;
        /*font-size: 140px;*/
        font-size: clamp(140px, 25vw, 400px);

    }

    #entré .future{
        top: 40px;
    }

    #entré .fleurgauche{
        position: absolute;
        top: 2%;
        left: -10%;
        width: 20em;
        height: auto;
    }

    #entré .fleurdroite{
        position: absolute;
        top: 2%;
        right: -10%;
        width: 20em;
        height: auto;
        transform: scaleX(-1);
    }

    #citation{
        height: 40vh;
    }

    .guillemet{
        font-size: 700px;
        top: -45%;
        right: -5%;
    }
    #call{
        background-color: #1D3458;
        margin-top: 30px;
        padding: 2em 8em;
    }

    .call{
        text-align: center;
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 1px 2px rgba(0,0,0,0.10); /* <-- ombre très légère */
        background-color: white;
        border-radius: 2px;
        padding: 1.5em;
    }
}

/* Pour les grands écrans (desktop) */
@media (min-width: 1025px) {
    #entré{
        height: 80vh;
        width: auto;
        position: relative;
        overflow: hidden;
    }

    #entré .moi{
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: auto;
        width: 32em;
    }

    #entré .name{
        position: absolute;
        top: auto;
        bottom: -19%;
        left: 50%;
        transform: translateX(-50%);
        font-family: Afacad, sans-serif;
        color: #1D3458;
        font-weight: bold;
        /*font-size: 340px;*/
        font-size: clamp(140px, 25vw, 400px);

    }

    #entré .future{
        position: absolute;
        top: 45%;
        right: 12%;
        left: auto;
        transform: translateX(0%);
        width: 15em;
        text-align: right;
    }

    #entré span{
        height: 100px;
    }

    #entré .fleurgauche{
        position: absolute;
        top: 0;
        left: -15%;
        width: 40em;
        height: auto;
    }

    #entré .fleurdroite{
        position: absolute;
        top: 0;
        right: -15%;
        width: 40em;
        height: auto;
        transform: scaleX(-1);
    }

    .guillemet{
        font-size: 800px;
        top: -55%;
        right: -3%;
    }
    #call{
        background-color: #1D3458;
        margin-top: 30px;
        padding: 2em 15em;
    }
    .call{
        text-align: center;
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 1px 2px rgba(0,0,0,0.10); /* <-- ombre très légère */
        background-color: white;
        border-radius: 2px;
        padding: 3em;
    }
}