/*==============================*/
/* ==== PALETTE -- COULEUR ==== */
/*==============================*/


:root {
    --fond-principal:#0F0F0F;
    --font-contenu:#1A1A1A;
    --font-contours:#2E2E2E;

    --ombre-douce: #1A1A1A; 
    --ombre-moyenne: #1F1F1F; 
    --ombre-forte: #242424;  
    
    --texte-titre:#ffffff;
    --texte-courant:#d1d1d1;
    --texte-lien:#6f6f6f;
    
    --objet-survol:#6E40C9;
    --objet-permanent:#8B5CF6; 
    --objet-clic:#9B6DED;
}




/*==============================*/
/* ==== PALETTE -- TEXTES ==== */
/*=============================*/


/*  Police d'écriture  */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');

:root {
    --police-titre: "DM Serif Text", serif;
    --police-texte: "Comic Neue", cursive;
}


/*  taille écran  */
@media(min-width:1000px){
    :root {
    --taille-titre-principal: 1.8rem;
    --taille-titre-second: 1.5rem;
    --taille-texte: 1.2rem;
    --taille-liens:1.2rem;
    --gras-titre: 700;
    --gras-texte: 400;   
}}

@media(max-width:999px){
    :root {
    --taille-titre-principal: 1.5rem;
    --taille-titre-second: 1.2rem;  
    --taille-texte: 0.9rem;
    --taille-liens: 0.9rem;  
    --gras-titre: 700;
    --gras-texte: 400;     
}}


/*  style titre  */
h1 {
    cursor: text;  
    font-family: var(--police-titre);
    font-weight: var(--gras-titre);
    font-size: var(--taille-titre-principal);
    color: var(--texte-titre);
    margin-bottom: 0.5em;
    transition: 0.5s;
}

h2, h3 {
    cursor: text;  
    font-family: var(--police-titre);
    font-weight: var(--gras-titre);
    font-size: var(--taille-titre-second);
    color: var(--texte-titre);
    margin-bottom: 0.5em;
    transition: 0.5s;
}


/*  style texte  */
p, span {
    cursor: text;  
    font-family: var(--police-texte);
    font-weight: var(--gras-texte);
    font-size: var(--taille-texte);
    color: var(--texte-courant);
    line-height: 1.6;
}


/*  style lien  */
a {
    cursor: pointer;
    font-style: oblique;
    font-weight: 500;
    text-decoration: underline;
    color: var(--texte-lien);
}


/*  clic  */
a:active {
    cursor: pointer;
    color: var(--objet-clic);
}




/*=============================*/
/* ==== PALETTE -- BULLE ==== */
/*=============================*/


/*  bulle_secondaire  */
.bulle_secondaire {
    background-color: var(--font-contenu);
    color:var(--font-contours);
    border: solid var(--font-contours);
    box-shadow: 0px 0px 20px var(--ombre-moyenne);
    text-align: center;
    border-radius: 50px;
}

@media(min-width:1000px){
   .bulle_secondaire {
        padding: 1px;
        margin: 0% 25% 0% 25%;
    }
}
@media(max-width:999px){
   .bulle_secondaire {
        padding: 1px;
        margin: 25% 0.5% 0% 0.5%;
    }
}


/*  bulle_info  */
.bulle_info {
    display: flex;
    justify-content: space-around;
    background-color: var(--font-contenu);
    border: solid var(--font-contours);
    box-shadow: 0px 0px 15px var(--ombre-douce);
    text-align: center;
    border-radius: 100px;
    transition: 1s;
}

@media(min-width:1000px){
    .bulle_info {
        padding: 1px;
        margin: 1% 10% 1% 10%;
    }
}
@media(max-width:999px){
    .bulle_info {
        padding: 2px;
        margin: 2% 2% 2% 2%;
    }
}


/*  survol  */
@media(min-width:1000px){
    .bulle_info:hover {
        border: solid var(--objet-survol);
        transform: scale(1.05);
        box-shadow: 0px 0px 10px var(--objet-survol);
        transition: 1s;      
    }
}


/*  survol  */
@media(min-width:1000px){
    .bulle_info:hover {
        border: solid var(--objet-survol);
        box-shadow: 0px 0px 10px var(--objet-survol);
        transform: scale(1.05);    
        transition: 1s;
    }
}


/* clic  */
@media(max-width:999px){
    .bulle_info:active {
        box-shadow: 0px 0px 20px var(--objet-clic);
        transform: scale(1.05);
        transition: 0.5s;
    }
}




/*===========================*/
/* ==== PALETTE -- LOGO ==== */
/*===========================*/


/*  taille écran  */
@media(min-width:1000px){
    .logo {
        width: 40px;
        height: 40px;
    }
}
@media(max-width:999px){
    .logo {
        width: 30px;
        height: 30px;
    }
}


/*  Survol  */
@media(min-width:1000px){
    .logo:hover {
        transform: scale(1.15);
        opacity: 50%;
        transition: 1s;
    }
}




/*=============================*/
/* ==== VISEULLE APLIQUER ==== */
/*=============================*/


/*  body  */
body {
    background-color: var(--fond-principal);
    text-align: center;
}

.photo {
    margin: 1% 0px 1% 0px;
    border-radius: 25px;
    border: solid 5px;
    color: var(--font-contours);
    object-fit: cover;
}

@media(min-width:1000px){
  .photo {
        width: 150px;
        height: 75px;
        object-position: 0px -25px;
    }  
}
@media(max-width:999px){
    .photo {
        width: 100px;
        height: 50px;
        object-position: 0px -20px;
    }
}


/*  survol  */
@media(min-width:1000px){
    .photo:hover {
        opacity: 50%;
    }  
}
@media(max-width:999px){
    .photo:active {
        opacity: 50%;
    }
}

.premier_bloc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1% 0px 1% 0px;
}

.section_titre {
    display: flex;
    justify-content: center;
}

section {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0px 0px 5px 0px;
}