/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* =========================================================================
   Soramtfr — ajustements Teriyaweb — 22/09/2026
   Identité conservée : vert rgb(36,142,12), Poppins (texte), Rosarivo (titres).
   Aucune couleur de marque n'est modifiée.
   ========================================================================= */

:root {
	--soram-vert: rgb(36, 142, 12);
	--soram-vert-clair: rgba(36, 142, 12, 0.08);
	--soram-encre: #242424;
	--soram-gris: #6b6b6b;
	--soram-trait: rgba(0, 0, 0, 0.09);
}

/* -------------------------------------------------------------------------
   1. Éléments flottants du bas d'écran
   Trois éléments se disputaient les coins bas : le bouton « retour en haut »
   du thème (en bas à droite), la bulle de chat Tidio (au même endroit, une
   fois le consentement cookies donné) et le sélecteur de langue GTranslate
   (en bas à gauche, à 32 px du bord).

   On répartit : le chat garde le coin droit, le bouton « retour en haut »
   passe à gauche. Les règles du thème arrivant après cette feuille, il faut
   les marquer en important.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.scrollToTop {
		right: auto !important;
		left: 12px !important;
		bottom: 12px !important;
	}
}

/* -------------------------------------------------------------------------
   2. Sélecteur de langue flottant
   Il était affiché deux fois sur mobile : en bas à gauche (bloc fixe) et dans
   le menu mobile. On garde celui du menu — accessible, et il ne recouvre
   rien — et on masque le flottant, qui se superposait au contenu et venait
   buter contre le bouton « retour en haut ».
   Le flottant est le seul en position fixe : il est enfant de
   .gtranslate_wrapper, alors que celui du menu vit dans .menu-item-gtranslate.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.gtranslate_wrapper > .gt_switcher_wrapper {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   3. Pied de page
   Le fond est le vert de la marque, rgba(57,155,48,.75). Les textes y étaient
   posés en gris foncé (#333) et gris moyen (#6b6b6b) : contraste très
   insuffisant pour de la lecture. On repasse tout en blanc et blanc adouci,
   sans toucher à la couleur de fond.

   Le nom de la marque était un <h1> (deux H1 par page). Devenu un paragraphe,
   il retrouve ici son allure de titre.
   ------------------------------------------------------------------------- */
.wd-footer,
.wd-footer p,
.wd-footer .widget-title,
.wd-footer .widget_nav_menu .menu li a,
.wd-footer-contact__list a {
	color: #ffffff;
}

.wd-footer .footer-column-1 p,
.wd-footer-contact__intro,
.wd-footer-contact__zones {
	color: rgba(255, 255, 255, 0.86);
}

.wd-footer .wd-footer-brand {
	margin-bottom: 10px;
	font-family: "Rosarivo", Georgia, serif;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 0.06em;
	color: #ffffff;
}

.wd-footer .wd-footer-brand strong {
	font-weight: 400;
}

.wd-footer .main-footer {
	padding-top: 55px;
	padding-bottom: 35px;
}

.wd-footer .footer-column-1 p {
	max-width: 34ch;
}

/* Les titres de colonnes ne prennent pas de « position: relative » :
   le thème y accroche le bouton d'accordéon du pied de page mobile, qui
   viendrait alors se poser par-dessus le texte du titre. */
.wd-footer .widget-title {
	margin-bottom: 16px;
}

/* Liens de menu : cible tactile plus large, survol en blanc adouci */
.wd-footer .widget_nav_menu .menu li a {
	display: inline-block;
	padding: 5px 0;
	transition: color 0.18s ease;
}

.wd-footer .widget_nav_menu .menu li a:hover,
.wd-footer-contact__list a:hover {
	color: rgba(255, 255, 255, 0.72);
}

/* -------------------------------------------------------------------------
   4. Bloc contact du pied de page (4e colonne)
   ------------------------------------------------------------------------- */
.wd-footer-contact__intro {
	margin-bottom: 14px;
	max-width: 36ch;
}

.wd-footer-contact__list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.wd-footer-contact__list li {
	margin-bottom: 6px;
}

.wd-footer-contact__list a {
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.18s ease;
}

.wd-footer-contact__zones {
	margin-bottom: 16px;
	max-width: 36ch;
	font-size: 13px;
	line-height: 1.6;
}

.wd-footer-contact__zones strong {
	display: block;
	margin-bottom: 3px;
	color: #ffffff;
}

/* Lien TikTok */
.wd-footer-social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	color: #ffffff;
	font-size: 13px;
	line-height: 1;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.wd-footer-social:hover {
	border-color: #ffffff;
	background-color: rgba(255, 255, 255, 0.14);
	color: #ffffff;
}

.wd-footer-social svg {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   5. Bandeau de copyright
   Il affichait deux fois la même ligne. Les deux blocs portent désormais des
   contenus distincts : on les sépare proprement et on les empile sur mobile.
   ------------------------------------------------------------------------- */
.wd-copyrights {
	font-size: 13px;
	color: #ffffff;
}

.wd-copyrights a {
	color: #ffffff;
}

.wd-copyrights a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 768px) {
	.wd-copyrights .wd-col-start,
	.wd-copyrights .wd-col-end {
		text-align: center;
	}

	.wd-copyrights .wd-col-end {
		margin-top: 6px;
	}
}

/* -------------------------------------------------------------------------
   6. Pied de page sur mobile : colonnes empilées, plus lisibles
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.wd-footer .main-footer {
		padding-top: 35px;
		padding-bottom: 25px;
	}

	.wd-footer .footer-column {
		margin-bottom: 8px;
	}

	.wd-footer .footer-column-1 p,
	.wd-footer-contact__intro,
	.wd-footer-contact__zones {
		max-width: none;
	}
}

/* -------------------------------------------------------------------------
   7. Bandeau de réassurance (au-dessus du pied de page)
   Quatre repères repris des informations réelles de la boutique : franco de
   port, moyens de paiement, retours, remise en main propre.
   ------------------------------------------------------------------------- */
.wd-prefooter {
	border-top: 1px solid var(--soram-trait);
	background-color: #fbfbfa;
}

.soram-reassurance {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 34px 0;
}

.soram-reassurance__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 12px;
}

.soram-reassurance__item + .soram-reassurance__item {
	border-left: 1px solid var(--soram-trait);
}

.soram-reassurance svg {
	width: 26px;
	height: 26px;
	margin-bottom: 11px;
	color: var(--soram-vert);
}

.soram-reassurance__t {
	font-family: "Rosarivo", Georgia, serif;
	font-size: 15px;
	line-height: 1.3;
	color: var(--soram-encre);
}

.soram-reassurance__s {
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--soram-gris);
}

/* Deux colonnes sur tablette, deux sur mobile : les repères restent lisibles
   sans transformer le bandeau en longue liste verticale. */
@media (max-width: 1024px) {
	.soram-reassurance {
		grid-template-columns: repeat(2, 1fr);
		gap: 26px 12px;
		padding: 28px 0;
	}

	.soram-reassurance__item + .soram-reassurance__item {
		border-left: none;
	}
}

@media (max-width: 480px) {
	.soram-reassurance__t {
		font-size: 14px;
	}

	.soram-reassurance__s {
		font-size: 12px;
	}

	.soram-reassurance svg {
		width: 23px;
		height: 23px;
		margin-bottom: 9px;
	}
}

/* -------------------------------------------------------------------------
   8. Bandeau de consentement aux cookies sur mobile
   Il occupait 488 px de haut sur un écran de 844 px, soit 58 % de la surface :
   la première chose que voit une nouvelle visiteuse masquait la boutique.
   On resserre les espacements et on plafonne la hauteur ; au-delà, le texte
   défile dans le bandeau plutôt que de pousser les boutons hors de l'écran.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.cookieadmin_law_container.cookieadmin_box {
		max-height: 68vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.cookieadmin_law_container .cookieadmin_consent_inside {
		padding: 16px 16px 14px;
	}

	.cookieadmin_law_container #cookieadmin_notice_title {
		margin-bottom: 6px;
		font-size: 15px;
		line-height: 1.35;
	}

	.cookieadmin_law_container #cookieadmin_notice {
		font-size: 12.5px;
		line-height: 1.5;
	}

	.cookieadmin_law_container .cookieadmin_consent_btns {
		gap: 8px;
	}

	.cookieadmin_law_container .cookieadmin_btn {
		padding: 9px 12px;
		font-size: 12.5px;
	}
}

/* -------------------------------------------------------------------------
   9. Bandeau promotionnel du haut
   Le texte de l'offre passait sur deux lignes serrées sur les petits écrans.
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.whb-top-bar .wd-header-text {
		font-size: 12.5px;
		line-height: 1.4;
	}
}

/* -------------------------------------------------------------------------
   10. Titre du diaporama d'accueil sur mobile
   Le calque du titre est posé par Slider Revolution avec une largeur figée
   (240 px) et « white-space: nowrap » : la phrase ne pouvait donc jamais
   revenir à la ligne et sortait de son cadre (404 px de texte dans 240 px).
   Réduire la taille de police ne corrigeait rien, seul le retour à la ligne
   le fait. La graisse 100 en blanc sur une photo claire était par ailleurs
   difficile à lire ; on la remonte sans toucher à la couleur.
   Les styles du diaporama étant posés en ligne par son script, il faut les
   marquer en important pour passer devant.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* Ce calque-ci n'est pas positionné par « left » mais par son conteneur :
	   on ne touche donc qu'à sa largeur, sans quoi il se décale hors cadre. */
	#SR7_1_1-1-0 {
		width: calc(100% - 110px) !important;
		white-space: normal !important;
		font-size: 13px !important;
		letter-spacing: 0.04em !important;
	}

	#SR7_1_1-1-1 {
		left: 45px !important;
		/* largeur relative : 300 px sur un écran de 390, 230 sur un 320,
		   pour ne jamais sortir du cadre sur les petits téléphones */
		width: calc(100% - 90px) !important;
		white-space: normal !important;
		font-size: 19px !important;
		line-height: 1.3 !important;
		font-weight: 300 !important;
		text-align: center !important;
		/* Texte blanc sur photo claire : on renforce l'ombre portée déjà
		   posée par le diaporama, sans modifier la couleur de la marque. */
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.35) !important;
	}

	/* Le bouton était posé à 138 px du haut du visuel alors que le titre,
	   une fois autorisé à revenir à la ligne, court jusqu'à 178 px : les deux
	   se chevauchaient. On descend le bouton sous le titre. */
	#SR7_1_1-1-2 {
		top: 186px !important;
	}
}

/* -------------------------------------------------------------------------
   11. En-tête sur les très petits écrans (320 px, iPhone SE)
   Les outils de droite (compte, panier) dépassaient de 24 px.
   ------------------------------------------------------------------------- */
@media (max-width: 359px) {
	/* WoodMart compense la gouttière de ses colonnes par une marge de -10 px.
	   À 320 px cette compensation fait sortir la colonne de droite du cadre. */
	/* La feuille du header est générée dans /uploads et chargée après
	   celle-ci : il faut marquer ces règles en important pour passer devant. */
	.whb-main-header .whb-column,
	.whb-top-bar .whb-column {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.whb-main-header .wd-tools-element {
		margin-left: 6px !important;
		margin-right: 6px !important;
	}

	.whb-main-header .wd-tools-element .wd-tools-text {
		display: none;
	}

	.whb-main-header .wd-logo img {
		max-width: 110px;
	}
}