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

:root{

    --ly-bg:#24211f;

    --ly-surface:#2b2725;

    --ly-gold:#b08a5a;

    --ly-gold-light:#d9ba84;

    --ly-gold-border:rgba(176,138,90,.30);

    --ly-text:#f3f3f3;

    --ly-text-soft:#d6d6d6;

    --ly-radius:20px;

}


/*==================================================
=                 PASSEPORT
==================================================*/

.ly-passport{

    max-width:900px;

    margin:50px auto;

    padding:60px;

    background:var(--ly-bg);

    border:1px solid var(--ly-gold-border);

    border-radius:var(--ly-radius);

    box-shadow:
        0 12px 45px rgba(0,0,0,.45);

    color:var(--ly-text);

}


/*==================================================
=                 HEADER
==================================================*/

.ly-passport__header{

    text-align:center;

    margin-bottom:45px;

}


/*==================================================
=                 LOGO
==================================================*/

.ly-passport__logo{

    display:block;

    width:105px;

    margin:0 auto 18px;

}


/*==================================================
=                 MARQUE
==================================================*/

.ly-passport__brand{

    color:var(--ly-gold);

    text-transform:uppercase;

    letter-spacing:8px;

    font-size:12px;

    margin-bottom:22px;

}


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

.ly-passport__title{

    margin:0;

    font-size:40px;

    font-weight:300;

    letter-spacing:1px;

}


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

.ly-passport__quote{

    max-width:620px;

    margin:22px auto 0;

    color:var(--ly-gold-light);

    font-size:17px;

    line-height:1.9;

    font-style:italic;

}


/*==================================================
=                 LIGNE
==================================================*/

.ly-passport hr{

    border:none;

    height:1px;

    background:rgba(176,138,90,.20);

    margin:45px 0;

}

/*==================================================
=                 BADGES
==================================================*/

.ly-passport__badges{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin:35px 0 50px;

}

.ly-passport__badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 20px;

    border:1px solid var(--ly-gold-border);

    border-radius:50px;

    background:rgba(176,138,90,.05);

    color:var(--ly-gold);

    font-size:13px;

    letter-spacing:1px;

    text-transform:uppercase;

}


/*==================================================
=                 CERTIFICAT
==================================================*/

.ly-passport-auth{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

    margin:70px 0 40px;

    position:relative;

}

.ly-passport-auth::after{

    content:"";

    position:absolute;

    left:50%;

    top:10%;

    bottom:10%;

    width:1px;

    background:rgba(176,138,90,.20);

    transform:translateX(-50%);

}


/*==========================
Colonne gauche
==========================*/

.ly-passport-auth__intro{

    display:flex;

    align-items:flex-start;

    gap:24px;

    padding-right:30px;

}

.ly-passport-auth__icon{

    width:74px;

    height:74px;

    border:1px solid var(--ly-gold-border);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--ly-gold);

    font-size:30px;

    flex-shrink:0;

}

.ly-passport-auth__content h3{

    margin:0 0 14px;

    color:var(--ly-gold);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:14px;

    font-weight:500;

}

.ly-passport-auth__content p{

    margin:0;

    color:var(--ly-text-soft);

    line-height:1.9;

    font-size:16px;

}


/*==========================
Certificat
==========================*/

.ly-passport-auth__certificate{

    display:flex;

    justify-content:center;

}

.ly-passport-auth__certificate-inner{

    width:100%;

    max-width:320px;

    padding:34px;

    border:1px solid rgba(176,138,90,.45);

    border-radius:18px;

    background:rgba(176,138,90,.03);

    text-align:center;

}

.ly-passport-auth__certificate-inner h3{

    margin:0 0 18px;

    color:var(--ly-gold);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:22px;

    font-weight:500;

}

.ly-passport-auth__certificate-inner p{

    margin:10px 0;

    color:var(--ly-text);

    font-size:16px;

    line-height:1.8;

}

.ly-passport-auth__certificate-inner p:last-child{

    color:var(--ly-gold-light);

}

/*==========================
Responsive
==========================*/

@media(max-width:768px){

    .ly-passport-auth{

    grid-template-columns:1fr;

}

.ly-passport-auth::after{

    display:none;

}

.ly-passport-auth__intro{

    padding-right:0;

}

.ly-passport-auth__certificate{

    margin-top:20px;

} }


/*==================================================
=                 INFORMATIONS
==================================================*/

.ly-passport__section{

    text-align:center;

    margin:34px 0;

}

.ly-passport__section h3{

    margin:0 0 14px;

    color:var(--ly-gold);

    text-transform:uppercase;

    letter-spacing:5px;

    font-size:12px;

    font-weight:500;

}

.ly-passport__section p{

    margin:0;

    color:var(--ly-text);

    font-size:28px;

    font-weight:300;

    line-height:1.4;

}


/*==================================================
=                 SÉPARATEUR
==================================================*/

.ly-passport__divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin:36px 0;

}

.ly-passport__divider span{

    flex:1;

    max-width:240px;

    height:1px;

    background:rgba(176,138,90,.30);

}

.ly-passport__divider i{

    color:var(--ly-gold);

    font-style:normal;

    font-size:18px;

}