/*!
Theme Name: Divi Child
Theme URI: https://tntatelier.com/
Description: Thème enfant de Divi par TNT Atelier.
Author: Jérémy Gauthier - TNT Atelier
Author URI: https://tntatelier.com/
Template: Divi
Version: 1.0
*/

/*
          _____       __  __                                               _                                   _ _  __             _            
         / ____|     /_/  /_/                                             (_)                                 | ( ) /_/           (_)           
         | |     _ __ ___  ___    __ ___   _____  ___   _ __   __ _ ___ ___ _  ___  _ __    _ __   __ _ _ __  | |/  ___  __ _ _   _ _ _ __   ___ 
         | |    | '__/ _ \/ _ \  / _` \ \ / / _ \/ __| | '_ \ / _` / __/ __| |/ _ \| '_ \  | '_ \ / _` | '__| | |  / _ \/ _` | | | | | '_ \ / _ \
         | |___| | |  __/  __/ | (_| |\ V /  __/ (__  | |_) | (_| \__ \__ \ | (_) | | | | | |_) | (_| | |     | | |  __/ (_| | |_| | | |_) |  __/
         \_____|_|  \___|\___|  \__,_| \_/ \___|\___| | .__/ \__,|___/___/_|\___/|_| |_| | .__/ \__,_|_|     |_|  \___|\__, |\__,_|_| .__/ \___|
                                                      | |                                 | |                             | |       | |         
                                                      |_|                                 |_|                             |_|       |_|         
*/

/*------------------------------------------TYPOGRAPHIE------------------------------------------*/
@font-face {
	font-family: 'Source Sans 3';
	font-style: italic;
	font-display: swap !important;
	font-weight: 100 900;
	src: url('/wp-content/themes/Divi-child/fonts/SourceSans3-VariableFont_wght-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.cursive{
	font-family: 'Timberline', sans-serif !important;
	color: #A4832E;
}

em {
	font-family: 'Timberline', sans-serif !important;
	color: #A4832E;
}

h1 em{
	font-size: 140px;
}

h2 em{
	font-size: 64px;
}

@media (max-width: 900px) {
    h1 em {
        font-size: 70px;
    }

	
	h1{
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 768px) {

	h2 em{
		font-size: 40px !important;
	}
	
}

@media (max-width: 570px) {
.et_pb_section_9 .et_pb_row {
    gap: 30px !important;
}
}


html {font-size: 100%;}

body, p, li {font-size: 18px; line-height: 1.6; font-weight: 400;
font-family: "articulat-cf", sans-serif;
font-weight: 400;
font-style: normal;}
h1 {font-size: 64px !important;
	font-family: "garage-gothic", sans-serif;
	font-style: normal;
	color: white !important;
	font-weight: 550 !important;
}
h2 {
	font-size: 48px;
	font-family: "garage-gothic", sans-serif;
	font-style: normal; color: #000E21 !important; font-weight: 550 !important;}
h3 {font-size: 32px !important; line-height: 1.3;
	font-family: "garage-gothic", sans-serif;
	font-weight: 500; color: #000E21 !important;
	font-style: normal;}
h4 {font-size: 38px !important; line-height: 1.35;
	font-family: "garage-gothic", sans-serif;
	font-weight: 800;
	font-style: normal;}
h5 {font-size: 30px !important; line-height: 1.4;
	font-family: "garage-gothic", sans-serif;
	font-weight: 800;
	font-style: normal;}
h6 {font-size: 24px !important; line-height: 1.4;
	font-family: "garage-gothic", sans-serif;
	font-weight: 800;
	font-style: normal;}

a{transition:0.3s; cursor:pointer;
	font-family: "articulat-cf", sans-serif;
	font-weight: 400;
	font-style: normal;}





.et_pb_row_5 a,
.et_pb_row_6 a,
.et_pb_row_7 a{
    text-decoration: underline;
    color: #A4832E;
}



.texte-blanc, .texte-blanc a, .texte-blanc p, .texte-blanc li, .texte-blanc h1, .texte-blanc h2, .texte-blanc h3, .texte-blanc h4, .texte-blanc h5, .texte-blanc h6{color:#FFF !important;}

/*p:not(.has-background):last-of-type{padding-bottom:1em;}*/

@media (max-width: 980px){
	body, p, li { font-size: 0.95rem; }
      h1 {font-size: 2.2rem;}
      h2 {font-size: 1.7rem;}
      h3 {font-size: 1.6rem;}
      h4 {font-size: 1.35rem;}
      h5 {font-size: 1.15rem;}
      h6 {font-size: 1rem;}
      #footercredit p, #footercredit a {font-size: 0.75rem;}
	
	.et_pb_section.header-page {height: 300px !important; min-height: 300px !important;}
.et_pb_section.header-page-accueil {height: 700px !important; min-height: 700px !important;}
}

.non-cursive{
	font-style: italic;
	font-size: 14px;
	font-weight: 500 !important;
	color: #ECEBE9;
}

.mob-menu-header-holder {padding-top: 5px;}

/*------------------------------------------CTA------------------------------------------*/
/* État normal : Tout doré, texte blanc */
/*.et_pb_button, .button, .submit, .wp-block-button__link, .wpcf7-submit, .wp-element-button, .woocommerce a.button {
    border-radius: 20; 
    color: #FFFFFF !important; 
    background-color: #c9a227 !important; 
    border: 3px solid #c9a227 !important; 
    text-align: center; 
    transition: 0.3s ease-in-out;
}*/

/* État Hover : Fond blanc, TEXTE NOIR */
/*.et_pb_button:hover, .button:hover, .submit:hover, .wp-block-button__link:hover, .wpcf7-submit:hover, .wp-element-button:hover, .woocommerce a.button:hover {
    padding: 20px 40px !important; 
    background-color: #FFFFFF !important; 
    color: #000000 !important; /* Ici on force le noir */
    /*border: 3px solid #FFFFFF !important; 
}*/

/* Suppression définitive de l'icône de flèche */
.et_pb_button:after, .button:after, .submit:after, .wp-block-button__link:after, .wpcf7-submit:after, .wp-element-button:after, .woocommerce a.button:after {
    display: none !important;
}


/* On cible le module qui a la classe ET son contenu interne */
.bouton-or, 
.bouton-or a, 
.bouton-or .et_pb_button {
    background-color: #A4832E !important;
    color: #ffffff !important;
    padding: 5px 30px !important;
    border-radius: 15px !important;
    display: inline-block !important;
    font-weight: bold !important;
    text-align: center !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

/* Effet Hover */
.bouton-or:hover, 
.bouton-or a:hover {
    background-color: #8e742a !important;
}


.bouton-blanc, 
.bouton-blanc a, 
.bouton-blanc .et_pb_button,
.header_btn_soumission a {
    background-color: white !important;
    color: black !important;
    padding: 5px 30px !important;
    border-radius: 15px !important;
    display: inline-block !important;
    font-weight: bold !important;
    text-align: center !important;
    border: none !important;
    transition: all 0.3s ease !important;
	font-size: 20px;
}

/* Effet Hover */
.bouton-blanc:hover, 
.bouton-blanc a:hover,
.header_btn_soumission a:hover {
    background-color: grey !important;
	color: white !important;
}


/* Réduit l'espace entre les titres h6 et les paragraphes p */
.texte-compact h6, 
.texte-compact p,
.texte-compact h3
{
    margin-bottom: 2px !important; /* Presque aucun espace en dessous */
    line-height: 1.3 !important;    /* Interligne serré */
    padding-bottom: 0 !important;
}

/* Optionnel : réduit aussi l'espace au-dessus du h6 s'il y en a trop */
.texte-compact h6 {
    margin-top: 8px !important; 
    font-weight: bold; /* S'assure que le titre ressort bien malgré le serrage */
}

.wpcf7-textarea {
    height: 200px !important;
}

.bouton-or, .bouton-or a, .bouton-or .et_pb_button {
    line-height: 1 !important; /* Diminue la hauteur de la ligne */
    padding-top: 10px !important; /* Ajuste ça si tu veux moins de lousse en haut */
    padding-bottom: 10px !important; /* Ajuste ça pour le bas */
}

.bouton-blanc, .bouton-blanc a, .bouton-blanc .et_pb_button, .header_btn_soumission a {
    line-height: 1 !important; /* Diminue la hauteur de la ligne */
    padding-top: 10px !important; /* Ajuste ça si tu veux moins de lousse en haut */
    padding-bottom: 10px !important; /* Ajuste ça pour le bas */
}

/*------------------------------------------GÉNÉRAUX------------------------------------------*/


.form-class p:last-of-type {
    padding-bottom: 20px !important;
}

.badge-image{
	pointer-events: none;
}

.et_pb_section_5 {
    position: relative !important;
}

/*
.et_pb_image_21 {
    position: absolute !important;
    bottom: 50px !important;
    right: 0px !important; 
}*/

.et_pb_group_carousel_0 .et_pb_group_carousel_container {
    background: linear-gradient(
        to bottom, 
        #000E21 0%, 
        #000E21 65%, 
        #F1EEE9 65%, 
        #F1EEE9 100%
    ) !important;
}

.footer-right {
    gap: 25px !important; /* C'est ÇA qui remplace ton padding-bottom */
}

.et_pb_row_35{
    all: unset !important; /* Ça reset TOUTES les propriétés */
}

body .footer-center .logo img {
    width: 300px !important;  /* Change le chiffre pour tester */
    height: auto !important;   /* Garde le ratio pour pas que ça soit écrasé */
    max-width: none !important; /* Enlève la limite de base si y'en a une */
}

/* Flèche de gauche */
.et_pb_group_carousel_arrow_prev {
    left: 10px !important;
}

/* Flèche de droite */
.et_pb_group_carousel_arrow_next {
    right: 10px !important;
}
.container::before{display:none;}
#sidebar{display:none;}
#left-area{width:100%; padding:0 !important;}
#page-container{padding-top: 0 !important;}
figure{margin-bottom: 0 !important;}
.grecaptcha-badge {visibility: hidden !important;}

.et_pb_column_2 a{
    font-size: 1.5rem !important;
	font-weight: 700 !important;
    color: #A4832E !important;
}

.wpcf7 .input-50 p{display:flex; justify-content:space-between;}
.wpcf7 .input-50 .wpcf7-form-control-wrap{width:46%;}

.wpcf7-form {
    background-color: #F2F0ED; /* Fond blanc cassé */
    font-family: 'Poppins', sans-serif;
}

input[type="file"]::file-selector-button {
    display: none !important;
}

.input-50 {
    display: flex;
    gap: 20px;
}

.field-container {
    position: relative;
    width: 50%;
    display: block;
}

.formulaire.field-container {
    width: 100%;
}
.wpcf7-form-control:not(.wpcf7-submit) {
    width: 100% !important;
    background-color: #E2DDD3 !important; /* Beige des champs */
    border: none !important;
    padding: 15px 15px 15px 25px !important; /* Espace à gauche pour l'astérisque */
    color: #333 !important;
    font-size: 16px;
    border-radius: 2px;
    box-sizing: border-box;
}

.wpcf7-textarea {
    height: 150px;
}

.ast-rouge {
    color: #ff0000 !important;
    position: absolute;
    left: 10px;
    top: 15px;
    z-index: 10;
    font-weight: bold;
    pointer-events: none;
}

.wpcf7-submit {
	border-radius: 16px !important;
	padding: 10px 40px !important;
}

.wpcf7-submit:hover {
    background-color: black !important;
	color: white !important;
	padding: 10px 40px !important;
    
}
@media (max-width: 767px) {
    .input-50 {
        flex-direction: column;
        gap: 15px;
    }
    .field-container {
        width: 100%;
    }
}

.et_pb_column_2 a {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #A4832E !important;
}

.et_pb_row_3 {
    width: 85% !important;
    max-width: 85% !important; /* Force Divi à dépasser sa limite habituelle */
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}



/* 1. MISE EN PLACE DES IMAGES */
/* On cible tes IDs d'images pour les superposer à gauche */
#img-chauffage, #img-litiere, #img-bbq {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    opacity: 0; /* On cache tout */
    transition: opacity 0.4s ease-in-out !important;
    visibility: hidden;
}

/* 2. IMAGE PAR DÉFAUT */
/* On affiche l'image chauffage au départ */
#img-chauffage {
    opacity: 1;
    visibility: visible;
    position: relative !important; /* Elle donne la hauteur à la colonne */
}

/* 3. LA LOGIQUE DE SURVOL (HOVER) */
/* Note : On utilise :has() si ton navigateur est moderne, 
   ou on passe par le parent commun (la Row) */

/* Si on survole le bloc qui contient link-litiere, on affiche l'image correspondante */
.et_pb_row:has(#link-litiere:hover) #img-litiere {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10;
}
/* Et on cache l'image par défaut pendant ce temps */
.et_pb_row:has(#link-litiere:hover) #img-chauffage {
    opacity: 0 !important;
}

/* Idem pour le BBQ */
.et_pb_row:has(#link-bbq:hover) #img-bbq {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10;
}
.et_pb_row:has(#link-bbq:hover) #img-chauffage {
    opacity: 0 !important;
}

/* Idem pour le Chauffage (au cas où on vient d'un autre) */
.et_pb_row:has(#link-chauffage:hover) #img-chauffage {
    opacity: 1 !important;
    visibility: visible !important;
}



/* 1. Force la ligne à ne pas avoir d'espacement entre les colonnes */
.et_pb_row_38.et_flex_row {
    gap: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
}

/* 2. Supprime les marges sur les colonnes de cette ligne */
.et_pb_row_38 > .et_pb_column {
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Force l'image à prendre toute la largeur de sa colonne sans blanc */
.et_pb_row_38 .et_pb_image_wrap {
    display: block !important;
}

.et_pb_row_38 .et_pb_module_image img {
    width: 100% !important;
    display: block !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 4. Alignement des textes à droite pour qu'ils touchent l'image */
#link-chauffage, #link-litiere, #link-bbq {
    margin-bottom: 0 !important; /* Enlève l'espace entre les blocs beiges */
}

/* --- UNIFORMISER LA TAILLE DES IMAGES (PUR CSS) --- */

/* 1. Cibler le conteneur de vos images produit (basé sur la structure Divi 5) */
.et_pb_module_image .et_pb_image_wrap {
    /* Forcer un ratio d'image constant. Choisissez votre ratio préféré : */
    aspect-ratio: 16 / 9 !important; /* Format paysage standard (plus large que haut) */
    /* Autres options possibles (décommentez pour utiliser) : */
    /* aspect-ratio: 4 / 3 !important; */ /* Format photo classique */
    /* aspect-ratio: 1 / 1 !important; */ /* Format carré parfait */
    
    /* Assurer que le conteneur prend toute la largeur */
    width: 100% !important;
    display: block !important;
    overflow: hidden !important; /* Masque tout ce qui dépasse du ratio fixé */
}

/* 2. Forcer l'image elle-même à remplir son conteneur sans se déformer */
.et_pb_module_image img {
    width: 100% !important;
    height: 100% !important;
    
    /* LE SECRET DU MASTER : */
    object-fit: cover !important; /* L'image se recadre automatiquement pour remplir le cadre sans s'étirer */
    object-position: center !important; /* L'image reste centrée dans son nouveau cadre */
    
    display: block !important;
}



/* 1. Aligner l'image au milieu verticalement dans sa colonne */
.et_pb_row_18 .et_pb_column {
    display: flex !important;
    flex-direction: column;
}



/* 3. Ajustement de la rangée */
.et_pb_row_18 {
    display: flex !important;
    flex-wrap: wrap; /* Évite que tout s'écrase sur une seule ligne */
}



.certifications a[target="_blank"]::after {
    content: ""; /* Obligatoire pour afficher le pseudo-élément */
    display: inline-block;
    
    /* REMPLACE L'URL CI-DESSOUS PAR TON IMAGE */
    background-image: url('https://devtntatelier.com/devtntatelier.com/granules-lg/wp-content/uploads/2026/04/link.svg'); 
    
    /* Réglages de la taille de l'image */
    width: 16px; 
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    
    /* Espacement entre le texte et l'image */
    margin-left: 8px;
    
    /* Aligne l'icône verticalement avec le texte */
    vertical-align: middle;
}


/*
.et_pb_column_22 {
--vertical-gap: 0px !important;

}*/


/* Carrousels équipe Accueil */
.carrousel-equipe .et_pb_group_carousel_center_mode .et_pb_group_carousel_track {align-items: start !important;}
.carrousel-equipe .et_pb_image_wrap {width: 100%; aspect-ratio: 1 / 1; overflow: hidden;}

.carrousel-equipe .et_pb_image_wrap img {width: 100%; height: 100%; object-fit: cover !important;}
.carrousel-equipe .et_pb_text {background-color: #002E6D; width: 100%; padding: 0 15px 15px 15px;}
.carrousel-equipe .et_pb_group_carousel_slide {background-color: #002E6D;}

/* Option : forcer une hauteur uniforme */
.carrousel-equipe  .et_pb_group_carousel_track {
height: 100% !important;
}

.carrousel-equipe  .et_pb_group_carousel_slide {
  height: 100% !important;
}



/* 1. On force la ligne à devenir un bloc solide sans trou en bas */
.et_pb_row {
    display: flex !important;
    align-items: stretch !important; /* Force l'image à descendre jusqu'en bas */
    row-gap: 5px !important;         /* Ton gap vertical de 5px */
    column-gap: 0px !important;      /* Pas de gap sur les côtés */
}

/* 2. On cible la colonne qui contient l'image */
.et_pb_column {
    display: flex !important;
    flex-direction: column !important;
}



/* 4. LA COLONNE DE DROITE : On s'assure que les blocs se touchent avec le gap */
.et_pb_column_22 { /* Celle-là semble être la bonne pour tes textes */
    justify-content: flex-start !important;
}

.et_pb_column_22 .et_pb_module {
    margin-bottom: 0 !important; /* On laisse le row-gap de la ligne gérer les 5px */
}


.et_pb_row_18 {
    max-width: 1700px !important;
	max-height 500px !important;
}

@media (max-width: 767px) {
    #link-chauffage::before, 
    #link-litiere::before, 
    #link-bbq::before {
        display: none !important;
    }
}


/* 1. On prépare les blocs pour accueillir la flèche */
#link-chauffage, #link-litiere, #link-bbq {
    position: relative !important;
}

/* 2. Création de la flèche (triangle) - VERSION ÉNORME (50px) */
#link-chauffage::before, 
#link-litiere::before, 
#link-bbq::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0; /* Position de départ (cachée derrière le bord) */
    transform: translateY(-50%);
    width: 0;
    height: 0;
    
    /* Grosseur augmentée à 50px pour un triangle imposant */
    border-top: 50px solid transparent;     /* Gère la hauteur verticale */
    border-bottom: 50px solid transparent;  /* Gère la hauteur verticale */
    border-right: 50px solid #E3DCCF;       /* Gère la profondeur vers la gauche */
    
    opacity: 0;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    z-index: 99;
}

/* 3. Effet au survol (la flèche sort vers la gauche) */
#link-chauffage:hover::before, 
#link-litiere:hover::before, 
#link-bbq:hover::before {
    opacity: 1;
    /* On décale de -50px pour correspondre à la nouvelle taille et coller au bloc */
    left: -50px; 
}

/* 4. IMPORTANT : On force la colonne à laisser dépasser la flèche */
/* (J'ai ajouté un sélecteur plus large pour être sûr que Divi ne bloque pas) */
.et_pb_column_22, .et_pb_column {
    overflow: visible !important;
}

.et_pb_group_carousel_2 .et_pb_group_carousel_container {
    /* Appliquer ce code dans Section > Avancé > CSS personnalisé > Élément principal */
background: linear-gradient(to bottom, #000E21 65%, #F1EEE9 35%) !important;
}






/* Classe pour créer le filtre bleu radial par-dessus l'image */
.filtre-bleu {
    position: relative !important;
    display: block !important;
    overflow: hidden !important; /* Pour bien garder le filtre dans les bords de l'image */
}

.filtre-bleu::before {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Dégradé radial avec ton bleu #000E21 */
    /* 0% : transparent au centre | 95% : bleu sombre sur les bords */
    background: radial-gradient(
        circle, 
        rgba(0, 14, 33, 0) 10%, 
        rgba(0, 14, 33, 0.8) 95%
    ) !important;
    z-index: 1;
    pointer-events: none; /* Laisse passer le clic pour les boutons en dessous */
}

/* On s'assure que l'image reste bien derrière le filtre */
.filtre-bleu img {
    position: relative !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
}



/* ROW */
.custom-row {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 5px;
}

/* COLONNES */
.col-left, .col-right {
    padding: 0;
    margin: 0;
}

/* COLONNE GAUCHE = CONTENEUR */
.col-left {
    position: relative;
    overflow: hidden;
}

/* LES MODULES IMAGE */
.col-left .img-stack {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* WRAPPER INTERNE DIVI */
.col-left .img-stack .et_pb_image_wrap {
    width: 100%;
    height: 100%;
}

/* IMAGE */
.col-left .img-stack img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ORDRE */
.img-1 { z-index: 1; }
.img-2 { z-index: 2; }
.img-3 { z-index: 3; }

/* DROITE */
.col-right {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.col-right .block {
    flex: 1;
}

/* --- ORDINATEUR LARGE (5 slides) --- */
@media (min-width: 1200px) {
    .et_pb_group_carousel_slide {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        width: 20% !important;
    }
}

/* --- PETIT ORDINATEUR / TABLETTE PAYSAGE (4 slides) --- */
@media (min-width: 981px) and (max-width: 1199px) {
    .et_pb_group_carousel_slide {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}

/* --- TABLETTE PORTRAIT (3 slides) --- */
@media (min-width: 768px) and (max-width: 980px) {
    .et_pb_group_carousel_slide {
        flex: 0 0 33.33% !important;
        max-width: 33.33% !important;
        width: 33.33% !important;
    }
	
	.carrousel-accueil h3 {font-size: 1.5rem !important;}
}

/* --- GROS TÉLÉPHONE (2 slides) --- */
@media (min-width: 480px) and (max-width: 767px) {
    .et_pb_group_carousel_slide {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
	
	.carrousel-accueil h3 {font-size: 1.5rem !important;}
}

/* --- PETIT TÉLÉPHONE (1 slide) --- */
@media (max-width: 479px) {
    .et_pb_group_carousel_slide {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
	
	.carrousel-accueil h3 {font-size: 1.5rem !important;}
}

.produit-slider {row-gap: 0px !important;}



.filtre {
    background: radial-gradient(
        ellipse at center,
        rgba(255,255,255,0.6) 0%,
        #000e21 110%
    );
}


/* S'applique uniquement aux modules ayant la classe 'ma-liste-fleche' */
.ma-liste-fleche ul {
    list-style: none !important;
    padding-left: 1.5em !important;
}

.ma-liste-fleche li {
    position: relative;
    margin-bottom: 10px;
    list-style-type: none !important;
}

.ma-liste-fleche li::before {
    content: "url('http://granuleslg.com/wp-content/uploads/2026/04/Icon-triangle.svg')";
    color: #c99b2e;
    display: inline-block;
    width: 1em;
    margin-left: -1.2em;
    font-size: 0.8em;
    vertical-align: middle;
    position: relative;
    top: -1px;
    padding-right: 10px;
}


/* Classe pour forcer l'image à remplir 100% de son conteneur */
.image-pleine-largeur img {
    width: 100% !important;
    max-width: 100% !important;
}


#main-content ul {
    list-style: none !important;
    padding-left: 1.5em !important;
}

#main-content li {
    position: relative;
    margin-bottom: 10px;
    list-style-type: none !important;
}

#main-content li::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background-image: url("https://granuleslg.com/wp-content/uploads/2026/04/Icon-triangle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
  vertical-align: middle;
}


/* Classe pour forcer l'image à remplir 100% de son conteneur */
.image-pleine-largeur img {
    width: 100% !important;
    max-width: 100% !important;
}

.slick-dots {
    display: none !important;
}

.slick-prev {
    display: none !important;
}

.slick-next {
    display: none !important;
}


/* 1. Force les colonnes à rester soudées et à avoir la même hauteur */
.bloc-equipe-row {
    display: flex !important;
    flex-wrap: wrap;
    padding: 0 !important;
}

/* 2. Supprime les espaces entre les colonnes */
.bloc-equipe-row .et_pb_column {
    margin-right: 0 !important;
    display: flex;
    flex-direction: column; /* Aligne l'image et le texte verticalement */
    background-color: #e8e2d6; /* TA COULEUR BEIGE ICI */
}

/* 3. Colle l'image et le texte (supprime les marges par défaut de Divi) */
.bloc-equipe-row .et_pb_module {
    margin-bottom: 0 !important;
}

/* 4. Force le module de texte à prendre tout l'espace restant pour égaliser le fond */
.bloc-equipe-row .et_pb_text {
    flex-grow: 1;
    padding: 20px 30px 30px 30px; /* Ajoute de l'espace interne pour le texte */
}

/* 5. Ajustement pour les images pour qu'elles touchent les bords */
.bloc-equipe-row .et_pb_image {
    line-height: 0;
}

.bloc-equipe-row .et_pb_image img {
    width: 100%;
    height: auto;
    display: block;
}
.bloc-equipe-row a {
    color: #A4832E !important; /* Ta couleur dorée */
    text-decoration: underline !important; /* Force le soulignement */
    font-weight: bold; /* Optionnel : rend le lien un peu plus visible */
}


/* --- L'AJOUT POUR CACHER LES VIDES SANS RIEN CASSER --- */
/* On cible les colonnes qui n'ont pas de module (image ou texte) */
.bloc-equipe-row .et_pb_column:not(:has(.et_pb_module)) {
    background-color: transparent !important; /* Enlève le beige */
    pointer-events: none; /* Empêche de cliquer dessus */
    opacity: 0; /* Rend totalement invisible */
}

.wpcf7-form br {
    display: none !important;
}

/*------------------------------------------HEADER 3 COLONNES---------------------------*/
#header {
    background: #000c1d !important;
    width: 100%;
}

.custom-header-wrapper {
    max-width: 1750px;
    margin: 0 auto;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important; 
    padding: 0 40px;
}

.menu-gauche ul, .menu-droite>ul {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.menu-gauche ul li, .menu-droite ul li {
    display: block !important;
    white-space: nowrap !important;
    position: relative !important;
}

.menu-gauche ul li a, .menu-droite ul li a {
    color: #A4832E !important; 
    text-decoration: none !important;
    font-size: 18px !important;
    transition: 0.3s;
}

.menu-gauche ul li a:hover, .menu-droite ul li a:hover {
    color: white !important;
}

/* Style de l'image du logo central */
.logo-image {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-image img {
    max-height: 80px !important; 
    width: auto !important;
    display: block;
}

/* --- SOUS-MENUS : UTILISATION DE TA PHOTO LINK.PNG --- */
.menu-gauche ul li ul.sub-menu, 
.menu-droite ul li ul.sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background-color: #edebe4 !important; 
    padding: 0 !important; 
    margin: 0 !important;
    min-width: 250px !important;
    z-index: 9999 !important;
    flex-direction: column !important;
    box-shadow: 0px 5px 10px rgba(0,0,0,0.2) !important;
    border: none !important;
}

.menu-gauche ul li:hover > ul.sub-menu, 
.menu-droite ul li:hover > ul.sub-menu {
    display: flex !important;
}

ul.sub-menu li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.sub-menu li a {
    color: black !important;
    padding: 10px 20px !important; 
    display: flex !important;
    justify-content: flex-start !important; 
    align-items: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    transition: background-color 0.1s ease;
}

ul.sub-menu li a:hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

/* --- INTEGRATION DE TON IMAGE LINK.PNG --- */
ul.sub-menu li a:after {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important; /* Taille de l'image */
    height: 18px !important;
    margin-left: 8px !important; /* Collée au texte */
    background-image: url('https://devtntatelier.com/devtntatelier.com/granules-lg/wp-content/uploads/2026/03/link.png') !important; /* Vérifie bien le chemin du fichier */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Flèche descendante menu parent */
.menu-item-has-children > a:after {
    content: " \25be"; 
    font-size: 12px !important;
    margin-left: 5px !important;
}

.et_pb_group_carousel_slide {margin: 15px}
.et_pb_group_carousel_slide > div {height: 100%; min-height: 100%; padding: 0 !important;}
.et_pb_group_carousel_slide > div span {height: 100%;}
.et_pb_group_carousel_slide > div img {width: 100%; height: 100%; object-fit: cover;}



.custom-header-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Centre l'ensemble */
    width: 100%;
    max-width: 1920px; /* Ou la largeur de ton site */
    margin: 0 auto;
}

/* On force les 3 blocs à avoir la même importance */
.menu-gauche, 
.menu-droite {
    flex: 1 !important; /* Ils occupent tout l'espace vide */
    display: flex !important;
    align-items: center !important;
}

.menu-gauche {
    justify-content: flex-start !important; /* Aligne les liens à gauche */
}

.menu-droite {
    justify-content: flex-end !important; /* Aligne les liens et le bouton à droite */
    gap: 20px; /* Espace entre le menu et ton bouton "Nous contacter" */
}

.logo-image {
    flex: 0 0 auto !important; /* Le logo ne s'étire pas, il garde sa taille */
    text-align: center !important;
    padding: 0 40px !important; /* Espace de sécurité autour du logo */
}

.logo-image img {
    max-height: 80px; /* Ajuste selon ton logo */
    width: auto !important;
    display: inline-block !important;
}


/* --- ÉTAT INITIAL (EN HAUT) --- */
#header {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    /* On part sur du transparent */
    background-color: rgba(255, 255, 255, 0) !important; 
    transition: background-color 0.4s ease-in-out, padding 0.4s ease-in-out !important;
}

/* --- ÉTAT AU SCROLL (BLEU) --- */
#header.header-scrolled {
    background-color: #000E21 !important; /* Remplace par ton bleu exact */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    padding: 5px 0; /* On peut le réduire un peu pour gagner de la place */
}


/* --- ÉTAT INITIAL (EN HAUT) --- */
#header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background-color: transparent !important;
    transition: all 0.4s ease-in-out !important;
}

.custom-header-wrapper {
    display: flex;
    /* On aligne tout en haut au début */
    align-items: flex-start !important; 
    justify-content: space-between;
    /* On réduit la hauteur ici pour qu'elle ne soit pas "trop grande" */
    min-height: 160px !important; 
    padding-top: 20px !important; /* Petit espace pour ne pas coller au plafond */
    transition: all 0.4s ease-in-out !important;
}

.logo-image img {
    height: 150px !important; /* Taille de départ */
    width: auto !important;
    max-height: none !important;
    transition: all 0.4s ease-in-out !important;
}

/* --- ÉTAT AU SCROLL (CENTRÉ ET PETIT) --- */

#header.header-scrolled {
    background-color: #000E21 !important;
}

#header.header-scrolled .custom-header-wrapper {
    /* On change l'alignement pour centrer verticalement au scroll */
    align-items: center !important; 
    min-height: 100px !important; 
    padding-top: 0 !important; /* On enlève l'espace du haut */
}

#header.header-scrolled .logo-image img {
    height: 80px !important; /* Taille finale */
}




/*------------------------------------------FOOTER------------------------------------------*/
#footercredit{width:80%; max-width:1110px; margin:auto; text-align: center; padding:30px 0;}
#footercredit p, #footercredit a{font-size: 0.875rem !important; color:#000;}

/* 1. STYLE GÉNÉRAL DU FOOTER */
#main-footer {
    background-color: #000c1d !important;
    padding: 60px 0 !important;
    color: #ffffff !important;
    width: 100% !important;
}

/* 2. ALIGNEMENT ALIGNÉ SUR LE HEADER */
.row-footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    /* On utilise la même largeur que ton header */
    max-width: 1750px !important; 
    margin: 0 auto !important; /* Centre le bloc */
    padding: 0 40px !important; /* Marge interne pour respirer un peu */
    box-sizing: border-box !important;
}

/* 3. CONFIGURATION DES COLONNES */
.footer-col {
    flex: 1; 
    display: flex;
    flex-direction: column;
}

/* Alignements des blocs */
.footer-left { text-align: left !important; align-items: flex-start !important; }
.footer-center { text-align: center !important; align-items: center !important; }
.footer-right { text-align: right !important; align-items: flex-end !important; }

/* 4. LOGOS ET TEXTES */
.footer-center .logo img {
    max-width: 180px !important; /* Ajuste la taille de ton logo central ici */
    height: auto !important;
}

.logos-certifications {
    display: flex !important;
    gap: 50px !important;
}

.logos-certifications img {
    height: 70px !important;
    width: auto !important;
}

/* Ramène le logo Facebook à une taille normale et centrée */
.footer-center .reseaux-sociaux {
    display: flex !important;
    justify-content: center !important;
    margin-top: 30px !important; /* Espace sous le logo LG */
}

.footer-center .reseaux-sociaux img {
    /* Taille fixe et normale pour le cercle Facebook */
    width: 46px !important; 
    max-width: 46px !important;
    height: auto !important;
    display: block !important;
}


/* 1. LES CONTACTS (Tél 1, Tél 2, Courriel) : FORCE LA TAILLE */
.footer-right .telephone, 
.footer-right .telephone *, /* Cible tout ce qui est à l'intérieur (liens, spans) */
.footer-right .telephone_2, 
.footer-right .telephone_2 *, 
.footer-right .footer_courriel,
.footer-right .footer_courriel * {
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 0 !important;
    letter-spacing: -1px !important;
    margin-bottom: 5px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: "garage-gothic", sans-serif !important;
}

/* 2. LES TITRES ET LES ADRESSES : UNIFORMISATION */
.footer-right .titre-site,
.footer-right .adresse-site,
.footer-right .adresse-site * {
    font-size: 20px !important; 
    font-weight: 550 !important; 
    line-height: 1.3 !important;
    color: #ffffff !important;
}

/* Espacement entre les blocs */
.footer-right .info-site {
    margin-top: 30px !important;
}

/* Transition douce pour l'effet de couleur */
.footer-right a {
    transition: color 0.3s ease !important;
}

/* Changement de couleur au survol (Hover) */
.footer-right a:hover, 
.footer-right a:hover * {
    color: #c9a227 !important;
}

.footer-left a{
    font-size: 32px;
    font-family: "garage-gothic", sans-serif !important;
}

.certifications {
    padding-top: 30px !important;
    display: flex !important;
    flex-direction: column !important;
}

.footer-left p {
    font-family: "garage-gothic", sans-serif !important;
    font-size: 32px !important;
}



.footer-right p{
    font-family: "garage-gothic", sans-serif;
}

.titre-site {
    font-family: 'Alexandria', sans-serif !important;
}
#block-18 p {
    font-family: 'Alexandria', sans-serif !important;
}
#block-20 p {
    font-family: 'Alexandria', sans-serif !important;
}

.menu-gauche a{
font-family: 'Alexandria', sans-serif !important;

}
.menu-droite a{
font-family: 'Alexandria', sans-serif !important;

}

/*------------------------------------------PAGE 404------------------------------------------*/
.erreur_404{margin-top: 5%; margin-bottom:5%;}

/*-------------------------------------------------------------------------------------RESPONSIVE--------------------------------------------------------------------------------------------*/
/* TABLETTE (Paysage) */
@media (max-width: 1200px) {
    .footer-right .telephone, 
    .footer-right .telephone,
    .footer-right .telephone_2, 
    .footer-right .telephone_2,
    .footer-right .footer_courriel,
    .footer-right .footer_courriel {
        font-size: 24px;
        white-space: nowrap !important; /* Empêche le numéro de se casser en deux */
    }
}

/* TABLETTE (Paysage) */
@media (max-width: 1024px) {
    .footer-right .telephone, 
    .footer-right .telephone,
    .footer-right .telephone_2, 
    .footer-right .telephone_2,
    .footer-right .footer_courriel,
    .footer-right .footer_courriel {
        font-size: 24px;
        white-space: nowrap !important; /* Empêche le numéro de se casser en deux */
    }
}

/* TABLETTE (Portrait) & GÉNÉRAL MOBILE */
@media (max-width: 980px) {
    /* On empile les colonnes */
    .row-footer {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .footer-col {
        width: 100% !important;
        text-align: center !important;
        align-items: center !important;
    }

    /* Ordre : Centre (1), Droite (2), Gauche (3) */
    .footer-center { order: 1 !important; }
    .footer-right { order: 2 !important; }
    .footer-left { order: 3 !important; }

    /* Ajustement des textes en mode empilé */
    .footer-right .telephone, 
    .footer-right .telephone_2, 
    .footer-right .footer_courriel {
        font-size: 25px;
        text-align: center !important;
    }

    .footer-right .info-site {
        text-align: center !important;
    }

    .logos-certifications {
        justify-content: center !important;
    }
}

/* PETIT MOBILE (iPhone, etc.) */
@media (max-width: 480px) {
    .footer-right .telephone, 
    .footer-right .telephone_2, 
    .footer-right .footer_courriel {
        font-size: 26px !important; /* Taille lisible sur petit écran */
    }

    .footer-right .titre-site,
    .footer-right .adresse-site {
        font-size: 18px !important;
    }
    
    .footer-center .logo img {
        max-width: 140px !important; /* Logo un peu plus petit sur mobile */
    }
}