/*
Theme Name: Woodmart Child
Template: woodmart
Version: 1.0.0
*/

/*************************************
** Thomas Gottvalles @ Tesseract IT **
**    Styles CSS du thème enfant    **
**************************************/

/************
* Générale  *
*************/

html {
    scroll-behavior: smooth !important;
}

/* corps de la page */
body {
	overflow-x: hidden;
}

/* Liens */
.lien-bleu {
    color: #cdc2e2 !important; /* Code couleur Les Créa'So */
    text-decoration: underline;
    transition: color 0.3s ease;
}

.lien-bleu:hover {
    color: #ccd9e9 !important;
}

.lien-or {
    color: #c8b6a6 !important; /* Code couleur Les Créa'So */
    text-decoration: underline;
    transition: color 0.3s ease;
}

.lien-or:hover {
    color: #ccd9e9 !important;
}

/* Couleurs de la charte graphique */
.couleur-or {
	color: #c8b6a6 !important;
}

.couleur-rose {
	color: #e4c4dd;
}

.couleur-bleu {
	color: #ccd9e9;
}

.couleur-violet {
	color: #cdc2e2;
}

/* Déplacement du bouton Scroll to Top à gauche */

.scrollToTop {
    right: auto !important;
    left: 20px !important;
}

/*  Assurance que l'affichage reste correct */
.scrollToTop.button-show {
    display: flex !important; /* Ou block selon le style initial */
    align-items: center;
    justify-content: center;
}

/* Style du trait sous les titres */
.titre-avec-trait {
    position: relative;
    padding-bottom: 10px; /* Espace entre le texte et le trait */
    margin-bottom: 20px;
    display: inline-block;
}

.titre-avec-trait::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px; /* Largeur du trait */
    height: 2px; /* Épaisseur du trait */
    background-color: #ccd9e9; /* Couleur OR */
}

.decalage-liste {
    padding-left: 60px !important;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Optionnel : on réduit le décalage sur mobile pour "Les Créa'so" */
@media (max-width: 768px) {
    .decalage-liste {
        padding-left: 15px !important;
    }
}

/* Ancres */
#suite, #contact-form {
	scroll-margin-top: 180px;
}

.text-slider{
    text-shadow: 2px 2px 2px rgba(0,0,0,1), 4px 4px 4px rgba(0,0,0,1), 8px 8px 8px rgba(0,0,0,0.1), 16px 16px 16px rgba(0,0,0,0.1), 16px 16px 50px rgba(0,0,0,0.1);
}


/**********
* Header  *
***********/

/* Logo : état normal et préparation */
.site-logo img, 
.whb-sticky-prepared .site-logo img {
    max-height: 200px !important; 
    width: auto !important;
    position: relative;
    z-index: 999; 
    transition: all 0.3s ease-in-out;
    margin-top: -40px;
}

/* Logo : vrai scroll uniquement */
.whb-sticked .site-logo img {
    max-height: 110px !important; 
    margin-top: 0 !important;
}

/* Stucture : marge sous le menu */
/* Ciblage du header complet pour que la marge reste, même au mouvement de souris */
.whb-header {
    margin-bottom: 50px !important;
}

/* Optionnel : pour que le contenu remonte un peu sous le menu fixe au scroll, on ajuster ici */
.whb-sticked {
    margin-bottom: 0px !important; 
}

/* Applique un dégradé sur la bande de titre de page */
header + .wd-page-title, 
.wd-page-title.page-title-default {
    background-image: linear-gradient(135deg, #ccd9e9 0%, #cdc2e2 50%, #e4c4dd 100%) !important;
    background-attachment: scroll !important; /* Évite les bugs de fixité */
    border: #c8b6a6 solid 2px;
}

.wd-page-title .entry-title {
    -webkit-text-stroke: 2px #746A72; /* Épaisseur et couleur de la bordure (ex: blanc) */
    color: #c8b6a6 !important; /* Couleur de l'intérieur de tes lettres (ton violet) */
}

/**********
* Footer  *
***********/

/* Applique un dégradé sur toute la zone du footer */
.footer-container, 
.main-footer {
    background: linear-gradient(135deg, #ccd9e9 0%, #cdc2e2 50%, #e4c4dd 100%) !important;
    color: #444444; /* Une couleur de texte douce pour les widgets */
		border: #c8b6a6 solid 2px;
}

/* Pour que les titres des widgets (ex: Contact, Liens utiles) soient lisibles */
.footer-container .widget-title {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}

.force-full-width {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

.footer-container a {
	color: #000000 !important;
	text-decoration: none !important;
}

.footer-container a:hover {
	color: #444444 !important;
	text-decoration: underline !important;
}

/**********
* Blocks  *
***********/

/* On force le conteneur à être un Flexbox horizontal */
.custom-contact-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    margin-bottom: 20px !important;
}

/* On force l'icône à rester sur la gauche */
.custom-contact-item .custom-icon {
    display: flex !important;
    flex: 0 0 50px !important; /* Largeur fixe pour l'icône */
    justify-content: center !important;
    margin-right: 15px !important;
}

/* On force le texte à se comporter en colonne à droite */
.custom-contact-item .custom-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* On nettoie les marges des éléments enfants pour coller le texte */
.custom-contact-item .custom-label {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.custom-contact-item .custom-value {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/********
* Form  *
*********/

/* Aligner le nom et l'email sur une ligne */
.form-ligne {
    display: flex !important;
    gap: 20px !important; /* Espace entre les deux champs */
}

.form-colonne {
    flex: 1 !important; /* Donne la même largeur aux deux colonnes */
}

/* Sur mobile, on les remet l'un sous l'autre pour la lisibilité */
@media (max-width: 768px) {
    .form-ligne {
        flex-direction: column !important;
        gap: 0 !important;
		
	}
}
    
/*******
* HOME *
********/	


