/*
Theme Name: LIZIWEB - Theme enfant Divi
Description: Theme enfant du theme Divi. Vous pouvez desormais le personnaliser sans risquer de perdre vos modifications
Author: LIZIWEB
Author URI: https://liziweb.com
Template: Divi
Version: 1.0
*/
/* ==========================================================
   HEADER LIGNES INSPIRANTES
   ========================================================== */


/* ----------------------------------------------------------
   1. SECTION PRINCIPALE DU HEADER
   Header transparent superposé au contenu de la page
   ---------------------------------------------------------- */

.header-lignes-inspirantes {
    position: absolute !important;
    top: 0;
    left: 0;

    width: 100%;
    z-index: 9999;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
}


/* ----------------------------------------------------------
   2. LIGNE DU HEADER
   Elle occupe toute la largeur de l'écran
   ---------------------------------------------------------- */

.header-lignes-inspirantes .header-inner {
    position: relative;

    width: 100% !important;
    max-width: none !important;

    padding: 15px 25px !important;
    margin: 0 auto !important;

    background: transparent !important;
}


/* ----------------------------------------------------------
   3. LOGO
   Toujours centré horizontalement
   ---------------------------------------------------------- */

.header-lignes-inspirantes .header-logo {
    display: block;
    width: 100%;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center;
}

.header-lignes-inspirantes .header-logo img {
    display: block;

    width: 130px;
    max-width: 100%;
    height: auto;

    margin: 0 auto;
}


/* ----------------------------------------------------------
   4. MODULE CODE DES RÉSEAUX SOCIAUX
   Le MODULE ENTIER est positionné en haut à droite
   ---------------------------------------------------------- */

.header-lignes-inspirantes .header-socials-module {
    position: absolute !important;

    top: 15px;
    right: 25px;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 10;
}


/* ----------------------------------------------------------
   5. CONTENEUR DES 3 RÉSEAUX SOCIAUX
   ---------------------------------------------------------- */

.header-lignes-inspirantes .header-socials {
    display: flex;

    align-items: flex-start;
    justify-content: flex-end;

    gap: 8px;

    margin: 0;
    padding: 0;

    /* IMPORTANT :
       aucun position:absolute ici */
    position: static;
    transform: none;
}


/* ----------------------------------------------------------
   6. LIENS DES RÉSEAUX SOCIAUX
   ---------------------------------------------------------- */

.header-lignes-inspirantes .header-socials a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin: 0;
    padding: 0;

    text-decoration: none;

    transition: opacity 0.2s ease;
}


/* ----------------------------------------------------------
   7. SVG DES RÉSEAUX SOCIAUX
   Taille desktop : 46 x 46 px
   ---------------------------------------------------------- */

.header-lignes-inspirantes .header-socials img {
    display: block;

    width: 46px;
    height: 46px;

    max-width: none;

    margin: 0;
    padding: 0;

    object-fit: contain;
}


/* ----------------------------------------------------------
   8. SURVOL DES RÉSEAUX
   ---------------------------------------------------------- */

.header-lignes-inspirantes .header-socials a:hover {
    opacity: 0.65;
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 980px) {

    .header-lignes-inspirantes .header-inner {
        padding: 12px 20px !important;
    }

    .header-lignes-inspirantes .header-logo img {
        width: 115px;
    }

    .header-lignes-inspirantes .header-socials-module {
        top: 12px;
        right: 20px;
    }

    .header-lignes-inspirantes .header-socials {
        gap: 6px;
    }

    .header-lignes-inspirantes .header-socials a,
    .header-lignes-inspirantes .header-socials img {
        width: 36px;
        height: 36px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .header-lignes-inspirantes .header-inner {
        padding: 10px 15px !important;
    }

    .header-lignes-inspirantes .header-logo img {
        width: 100px;
    }

    .header-lignes-inspirantes .header-socials-module {
        top: 10px;
        right: 15px;
    }

    .header-lignes-inspirantes .header-socials {
        gap: 5px;
    }

    .header-lignes-inspirantes .header-socials a,
    .header-lignes-inspirantes .header-socials img {
        width: 30px;
        height: 30px;
    }

}

/* ----------------------------------- */
/* - Corps des pages -------------------*/

h1 {
	color: #6F7B68!important;
	font-size:56px;
}


/* Petite ligne sous le H1 */
h1::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background-color: #C79A66;
    margin-top: 18px;
}
/* ==========================================================
   Formulaire de contact 
   ========================================================== */


h2.gform_title {
    display: none;
}
.block-formulaire {
    background-color: #F1E9DF;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #D8C9B8;
}
label.gfield_label.gform-field-label, legend.gfield_label.gform-field-label {
    font-family: 'Montserrat';
    font-size: 12px;
    color: #4F4C46;
}


#gform_1 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
#gform_1 textarea,
#gform_1 select{
    border: none !important;
    background-color: #F8F3EC !important;
    font-size: 11px;
    padding: 12px 15px;
    border-radius: 0;
    box-shadow: none;
    outline: none;
}
/* Réduit l'espace entre les lignes de champs */
#gform_1 .gform_fields {
    row-gap: 18px !important;
}
/* retirer légende champs obligatoire*/
p.gform_required_legend {
    display: none;
}

.block-formulaire h2 {
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
	font-size:14px;
	text-align:center;
	display:block;
	margin-bottom:20px
}

/* Options radio sur une ligne */
#gform_1 .gfield_radio {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 25px;
}

/* Chaque choix : rond + texte */
#gform_1 .gfield_radio .gchoice {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0 !important;
}
input#gform_submit_button_1 {
    background-color: #87917C;
}

.block-formulaire p {
    font-size: 10px;
}
h2.gform_title {
    display: none;
}
/* Petite ligne sous le H2 */
.block-formulaire h2::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background-color: #C79A66;
    margin: 20px auto 0;
}

/* ==========================================================
   BLOC VALEURS SUR HOME PAGE
   ========================================================== */

.bloc-valeurs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;
    box-sizing: border-box;

    background-color: #f2eadf;
    border-radius: 30px;

    padding: 22px 20px;
}


/* ----------------------------------------------------------
   CHAQUE ÉLÉMENT
   ---------------------------------------------------------- */

.bloc-valeurs .valeur-item {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;

    text-align: center;

    padding: 0 20px;

    box-sizing: border-box;
}


/* ----------------------------------------------------------
   SÉPARATEURS VERTICAUX
   Desktop : séparateur entre chaque élément
   ---------------------------------------------------------- */

.bloc-valeurs .valeur-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 10px;
    right: 0;

    width: 1px;
    height: calc(100% - 20px);

    background-color: #d2c2ae;
}


/* ==========================================================
   ÉCRANS <= 1500px
   PASSAGE EN 2 COLONNES
   ========================================================== */

@media (max-width: 1500px) {

    .bloc-valeurs {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 30px;

        padding: 25px 20px;
    }


    .bloc-valeurs .valeur-item {
        min-width: 0;

        padding: 20px;
    }


    /* On supprime tous les séparateurs du mode 4 colonnes */
    .bloc-valeurs .valeur-item::after {
        display: none;
    }


    /* Séparateur uniquement après les éléments 1 et 3
       = entre colonne gauche et colonne droite */
    .bloc-valeurs .valeur-item:nth-child(odd)::after {
        content: "";

        display: block;

        position: absolute;

        top: 10px;
        right: 0;

        width: 1px;
        height: calc(100% - 20px);

        background-color: #d2c2ae;
    }

}


/* ==========================================================
   MOBILE <= 767px
   PASSAGE EN 1 COLONNE
   ========================================================== */

@media (max-width: 767px) {

    .bloc-valeurs {
        grid-template-columns: 1fr;

        row-gap: 0;

        padding: 25px 20px;

        border-radius: 25px;
    }


    .bloc-valeurs .valeur-item {
        padding: 25px 10px;
    }


    /* Suppression de tous les séparateurs verticaux */
    .bloc-valeurs .valeur-item::after {
        display: none !important;
    }


    /* Séparateur horizontal entre chaque élément */
    .bloc-valeurs .valeur-item:not(:last-child)::before {
        content: "";

        position: absolute;

        bottom: 0;
        left: 50%;

        transform: translateX(-50%);

        width: 60px;
        height: 1px;

        background-color: #d2c2ae;
    }

}


/* ==========================================================
   CERCLE AUTOUR DES ICONES
   ========================================================== */

.bloc-valeurs .valeur-icone-cercle {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d2c2ae;
    border-radius: 50%;

    box-sizing: border-box;

    margin: 0 auto 14px;
}


/* ==========================================================
   SVG À L'INTÉRIEUR DU CERCLE
   ========================================================== */

.bloc-valeurs .valeur-icone {
    display: block;

    width: 68px;
    height: 68px;
    max-width: none;

    object-fit: contain;

    margin: 0;
    padding: 0;

    border: none;
}


/* ----------------------------------------------------------
   TITRES
   ---------------------------------------------------------- */

.bloc-valeurs .valeur-item h3 {
    margin: 0 0 7px;
    padding: 0;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #57534e;
}


/* ----------------------------------------------------------
   TEXTES
   ---------------------------------------------------------- */

.bloc-valeurs .valeur-item p {
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 400;
    color: #99938c;
}
/* ==========================================================
   TABLETTE
   2 éléments par ligne
   ========================================================== */

@media (max-width: 980px) {

    .bloc-valeurs {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 0;
        padding: 25px 15px;
    }

    /*
     * On retire les séparateurs d'origine
     */
    .bloc-valeurs .valeur-item::after {
        display: none;
    }

    /*
     * Séparateur entre les colonnes
     */
    .bloc-valeurs .valeur-item:nth-child(odd)::after {
        content: "";
        display: block;
        position: absolute;
        top: 10px;
        right: 0;
        width: 1px;
        height: calc(100% - 20px);
        background-color: #d2c2ae;
    }

}


/* ==========================================================
   MOBILE
   1 élément par ligne
   ========================================================== */

@media (max-width: 767px) {

    .bloc-valeurs {
       grid-template-columns: 1fr;
       padding: 28px 20px;
        border-radius: 25px;
    }

    .bloc-valeurs .valeur-item {
        padding: 25px 10px;
    }

    /*
     * Aucun séparateur vertical sur mobile
     */
    .bloc-valeurs .valeur-item::after {
        display: none !important;
    }

    /*
     * Petit séparateur horizontal entre les éléments
     */
    .bloc-valeurs .valeur-item:not(:last-child)::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 1px;
        background-color: #d2c2ae;
    }

    .bloc-valeurs .valeur-icone {
        width: 70px;
        height: 70px;
        margin-bottom: 12px;
    }

    .bloc-valeurs .valeur-item h3 {
        font-size: 14px;
    }

    .bloc-valeurs .valeur-item p {
        font-size: 13px;
    }

}