/*
Theme Name:   Divi Child
Template:     Divi
Description:  Theme Enfant Divi
Author:       ABTEL AGENCE WEB
URI:          http://abtel.fr
Template:     Divi
Version:      2.0.0 
*/
@import url(all-themes/theme02/style.css);

:root {
    /* Variables pour les tailles de base */
    --h1-size: 3.5rem;
    --h2-size: 3rem;
    --h3-size: 2rem;
    --h4-size: 2rem;
    --h5-size: 1.75rem;
    --h6-size: 1.5rem;

    /* Variables pour les tailles de base dans bloc type liste blog, projet */
    --bloc-h2-size: 1.5rem;


    /* Variables pour les espacements */
    --title-spacing: clamp(1rem, 2vw, 2rem);
    --bloc-title-spacing: clamp(0.2rem, 1vw, 1rem);

    /* Variables pour l'épaisseur de la police */
    --title-weight-heavy: 800;
    --title-weight-gras: 700;
    --title-weight-medium: 400;
    --title-weight-light: 300;

    /* Variables pour la hauteur de ligne */
    --title-line-height: 1;
    /* Variables font family */
    --font-family-title: "avenir-lt-pro", sans-serif;
}

/* ========================================================== 
                    1 - TEXTE 
   ========================================================== */
sup {
    bottom: .8em;
    font-size: 0.6em;
}
/* Styles de base pour tous les titres */
h1,
h2,
h3,
h4,
h5,
h6 {

    line-height: var(--title-line-height);
    /*margin-bottom: var(--title-spacing);*/
    color: currentColor;
    width: 100%;
    font-family: var(--font-family-title);
}

/* Styles pour les grands écrans (1200px et plus) */
@media (min-width: 75em) {
    :root {
        --title-spacing: 0.5em;
    }
}

/* Styles pour les tablettes (768px à 1199px) */
@media (max-width: 74.9375em) {
    :root {
        --title-spacing: 1.5rem;
    }
}

/* Styles pour les mobiles (767px et moins) */
@media (max-width: 47.9375em) {
    :root {
        --title-spacing: 1rem;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        --title-line-height: 1.3;
    }
}



/* Styles spécifiques pour chaque niveau de titre */
#main-content .et_pb_text h1, #main-content .et_pb_title_container h1 {
    font-size: clamp(2rem, 5vw, var(--h1-size));
    font-weight: var(--title-weight-gras);
}

#main-content h2 {
    font-size: clamp(1.8rem, 4vw, var(--h2-size));
    font-weight: var(--title-weight-heavy);
    margin-bottom: var(--title-spacing);
}

#main-content .et_pb_text h3 {
    font-size: clamp(1.6rem, 3.5vw, var(--h3-size));
    font-weight: var(--title-weight-heavy);
}

#main-content .et_pb_text h4 {
    font-size: clamp(1.4rem, 3vw, var(--h4-size));
    font-weight: var(--title-weight-gras);
}

#main-content .et_pb_text h5 {
    font-size: clamp(1.2rem, 2.5vw, var(--h5-size));
    font-weight: var(--title-weight-gras);
}

#main-content .et_pb_text h6 {
    font-size: clamp(1rem, 2vw, var(--h6-size));
    font-weight: var(--title-weight-gras);
}



/* ============== Styles spécifiques pour Divi ============== */

/* Bloc texte */
#main-content .et_pb_text h1,
#main-content .et_pb_text h2,
#main-content .et_pb_text h3,
#main-content .et_pb_text h4,
#main-content .et_pb_text h5,
#main-content .et_pb_text h6 {
    padding-bottom: 0;
}

/* Bloc Réassurance */

#reassurance h3 {
    font-size: clamp(1.1rem, 1.2vw, var(--h6-size));
    font-weight: var(--title-weight-gras);
    margin-bottom: 30px;
}

/* Bloc Porfolio filtrable Projet */

/* Titre */
#main-content .et_pb_filterable_portfolio_grid .et_pb_portfolio_item h2 {
    font-size: clamp(1rem, 1.1vw, var(--h6-size));
    font-weight: var(--title-weight-gras);
}

/* Bloc blog liste */

#main-content .et_pb_blog_grid h2 {
    font-size: clamp(1.5rem, 1.7vw, var(--bloc-h2-size));
    font-weight: var(--title-weight-gras);
    margin-bottom: var(--bloc-title-spacing)
}

/* ============== FIN ============== */

/* Animation optionnelle pour les titres */
@media (prefers-reduced-motion: no-preference) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        transition: font-size 0.3s ease;
    }
}

/* fin */


/* LISTES */

#main-content .et_pb_text ul,
#main-content .et_pb_text ol {
    margin: 10px 0 20px 0;
    line-height: 1.2em;
    padding-bottom: 1px;
    list-style: none;
}

#main-content .et_pb_text ul li,
#main-content .et_pb_text ol li {
    margin: 0 0 10px 0;
    width: fit-content;
}

#main-content .et_pb_text ul li::before,
#main-content .et_pb_text ol li::before {
    content: ">";
    margin-right: 10px;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 300ms ease-in-out;
}

a:hover {
    color: var(--default-color);
}

/* BLOCKQUOTE */

blockquote {
    border-left: 5px solid #dedede !important;
    font-size: 25px;
    line-height: 1.3em;
    font-family: "baskerville-display-pt", serif;
    font-weight: 700;
    font-style: normal;
    margin-bottom: 60px;
    color: #000;
}


/* ========================================================== 
                    2 - MENU 
   ========================================================== */

/* Accueil */
.home .et_pb_menu .et_pb_menu__search-form {
    border-bottom: 1px solid #fff;
}

.home .et_pb_menu__search-input {
    border: 0;
    width: 100%;
    color: #fff;
    background: transparent;
}

.content .et_pb_menu__search-input {
    border: 0;
    width: 70%;
    color: #000;
    background: #e4dfdf;
    padding: 10px;
}

.nav li ul {
    width: 340px;
}
.et-menu li li a {
    width: 100%;
    font-size: 100%!important;
    font-weight: normal!important;
}
.nav li li {
    line-height: 1.4em;
    width: 100%;
    padding:0;
}
/* Mega-menu */
.sub-menu {
    margin-left: 20px;
}

.sub-menu .sub-menu {
    margin-left: 20px;
}

.sub-menu .sub-menu .sub-menu {
    margin-left: 20px;
}

#menu-mega-menu-test .sub-menu li a {
    font-size: clamp(1rem, 1.1vw, var(--h6-size)) !important;
    font-weight: var(--title-weight-light);
}

/* ========================================================== 
                    3 - TINY-MCE 
   ========================================================== */

img.alignright {
    display: inline;
    float: right;
    margin:50px 0 50px 35px;
}

img.alignleft {
    display: inline;
    float: left;
    margin:10px 35px 50px 0;
}

img.alignright,
img.alignleft {
    max-width: 50%;
}

/* ========================================================== 
                    3 - FOOTER 
   ========================================================== */
@media only screen and (max-width:980px) {
    .et_pb_image_0_tb_footer {
        float: unset !important;
        width: unset !important;
        text-align: left;
        margin-left: 0;
    }

    .et_pb_text_0_tb_footer {
        margin-top: unset !important;
        float: unset !important;
    }
}

/* ========================================================== 
                    4 - CODE UTILE 
   ========================================================== */

/* Positionner contenu dans colonne */

.vertical-center {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
}

.vertical-bottom {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
}