/*!
Theme Name: Literiland
Author: b52
Author URI: https://www.b52.fr
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: literiland
*/

@import url(css/base.css);


/* VARIABLES */

:root {
	--color-rouge : #e94c38;
	--color-rouge-hover : #BD3B2A;
	--color-blanc : #fff;
	--color-gris : #F6F4F3;
	--color-gris-vert : #D7D9CE;
	--color-gris-vert-clair : #EEF0E5;
	--color-vert-noir : #01301B;
	--color-vert-logo : #005131;
	--container-width-desktop: 1200px;
	--font-main : 'Fredoka', sans-serif;
}


/* FONTS */

@font-face {
	font-family: 'Fredoka';
	font-stretch: 100;
	font-weight: 400-700;
	src: url(css/fonts/Fredoka/Fredoka-VariableFont_wdth,wght.ttf);
}


/* GLOBAL */

body {
	font-family: var(--font-main);
}

h1 {
	font-size: clamp( 2.5rem, 4vw, 5rem );
	line-height: 1;
	font-weight: 700;
}

h2 {
	font-size: clamp(1.875rem, 3vw, 3vw);
	line-height: 1.15;
	font-weight: 700;
}

h1 .rouge,
h2 .rouge {
	color: var(--color-rouge);
}

.bouton,
.elementor .e-button-base.bouton {
	font-weight: 600;
	padding-block-start: 8px;
	padding-block-end: 8px;
	padding-inline-start: 22px;
	padding-inline-end: 22px;
	border-radius: 2em;
	transition: all 300ms;
	display: inline-block;
	align-self: start;
	text-decoration: none;
	text-align: center;
}

.bouton-rouge,
.bouton-rouge:visited,
.elementor .e-button-base.bouton-rouge,
.elementor .e-button-base.bouton-gouge:visited {
	background-color: var(--color-rouge);
	border: 1px solid var(--color-rouge);
	color: var(--color-blanc);
}

.bouton-rouge:hover,
.elementor .e-button-base.bouton-rouge:hover {
	background-color: var(--color-rouge-hover);
	border: 1px solid var(--color-rouge-hover);
}

.bouton-border-rouge,
.elementor .e-button-base.bouton-border-rouge {
	border: 1px solid var(--color-rouge);
	color: var(--color-rouge);
}

.bouton-border-rouge:hover,
.elementor .e-button-base.bouton-border-rouge:hover {
	background-color: var(--color-rouge);
	border: 1px solid var(--color-rouge);
	color: var(--color-blanc);
}

.bouton-blanc,
.bouton-blanc:visited,
.elementor .e-button-base.bouton-blanc,
.elementor .e-button-base.bouton-blanc:visited {
	background-color: var(--color-blanc);
	border: 1px solid var(--color-blanc);
	color: var(--color-rouge);
}

.bouton-blanc:hover,
.elementor .e-button-base.bouton-blanc:hover {
	background-color: var(--color-rouge-hover);
	border: 1px solid var(--color-rouge-hover);
	color: var(--color-blanc);
}

.hero-reverse-small-star svg {
	display: block;
}


/* HEADER */

#masthead {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9;
	font-size: clamp(.95rem, 1.14vw, 1.2rem);
}

#header-top {
	background-color: var(--color-vert-logo);
	padding: 5px 5%;
	display: flex;
	justify-content: end;
}

#header-top .menu {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#masthead ul a {
	transition: all .3s;
	color: var(--color-blanc);
	text-decoration: none;
}

#masthead ul li:not(.bouton) a:hover {
	opacity: .7;
}

#masthead .bouton {
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	transition: 0s;
	border: 0;
}

#masthead .bouton a {
	display: block;
	padding-inline-start: 22px;
  	padding-inline-end: 22px;
	border-radius: 2em;
}

#masthead .bouton-rouge a {
	background-color: var(--color-rouge);
	color: var(--color-blanc);
}

#masthead .bouton-rouge a:hover {
	background-color: var(--color-rouge-hover);
}

#masthead .bouton-vert a {
	background-color: var(--color-vert-noir);
	color: var(--color-blanc);
}

#masthead .bouton-vert a:hover {
	background-color: var(--color-vert-noir);
}

#header-main {
	padding: 10px 5%;
	background-color: #005131B3;
	display: flex;
	justify-content: center;
	align-items: center;
}

#header-main .custom-logo-link {
	width: 180px;
}

#header-main .custom-logo-link img {
	display: block;
}

#header-main .menu {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-weight: 700;
}

#header-main .menu .menu-item--has-product-mega-menu .sub-menu {
	display: none;
}


/* FOOTER */

footer#colophon {
	position: relative;
	margin-top: -80px;
	padding: 50px 5% 0;
	background-color: var(--color-vert-logo);
	border-radius: 80px 80px 0 0;
}

#footer-top  {
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding-bottom: 30px;
}

#footer-top .footer-logo .custom-logo-link {
	max-width: 225px;
}

#footer-top .footer-menus {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

#footer-top .titre {
	color: var(--color-blanc);
	margin-bottom: 20px;
	line-height: 1;
	font-weight: 700;
}

footer#colophon .menu {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

footer#colophon .menu a {
	opacity: .7;
	transition: all .3s;
	color: var(--color-blanc);
	text-decoration: none;
}

footer#colophon .menu a:hover {
	opacity: 1;
}

#footer-bottom {
	margin-top: 30px;
	padding-top: 20px;
	padding-bottom: 20px;
	border-top: 1px solid #ffffff0f;
	display: flex;
	gap:25px;
	flex-direction: column;
	align-items: center;
}

#footer-bottom .legal {
	display: flex;
	align-items: center;
	font-size: .875em;
}

#footer-bottom .legal .menu {
	flex-direction: row;
	gap: 15px;
}

#footer-bottom .social {
	display: flex;gap: 15px;
}

#footer-bottom .social a {
	transition: all .3s;
	display: block;
}

#footer-bottom .social a:hover {
	opacity: .7;
}

#footer-bottom .social a img {
	display: block;
}




/* HOMEPAGE */


.contenu-home {
	/*background: conic-gradient(from 90deg,rgba(0, 81, 49, 1) 0deg,rgba(1, 36, 20, 1) 65.0653deg,rgba(1, 48, 27, 1) 167.885deg, rgba(0, 81, 49, 1) 360deg);*/
	background: linear-gradient(87deg,rgba(1, 37, 21, 1) 25%, rgba(0, 81, 49, 1) 100%);
}

.text-animation p {
    animation: text-animation 10s linear infinite;
    position: absolute;
    white-space: nowrap;
}

@keyframes text-animation {
    0%   { transform: translate(100%, 0); }
    100% { transform: translate(-100%, 0); }
}





/* PRODUCT CARD */

.product-card {
	position: relative;
	background: rgba(1, 48, 27, 0.85);
	border: 2px solid var(--color-rouge);
	border-radius: 30px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.product-card:hover {
	border-color: var(--color-rouge-hover);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.product-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* Bandeau "Promo" : le wrapper est un carré plaqué dans le coin (jamais
   plus grand que la card) qui clippe la bande diagonale en son sein.
   Cela évite de dépendre d'un overflow:hidden sur .product-card, qui doit
   pouvoir laisser déborder les photos détourées. */
.product-card__badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 4;
	width: 140px;
	height: 140px;
	overflow: hidden;
	pointer-events: none;
}

.product-card__badge-text {
	position: absolute;
	top: 30px;
	right: -42px;
	width: 160px;
	padding: 2px 0;
	background: var(--color-rouge);
	color: var(--color-gris);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
	transform: rotate(45deg);
	line-height: 1;
}

.product-card:has(.product-card__overlay:hover) .product-card__cta {
	opacity: 0.85;
}

.product-card__img-wrap {
	flex-shrink: 0;
	overflow: hidden;
	aspect-ratio: 1 / .5;
}

.product-card:not(.product-card--detouree) .product-card__img-wrap {
	background: rgba(0,0,0,.1);
}

.product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.35s ease;
}

.product-card:hover .product-card__img {
	transform: scale(1.05);
}

.product-card--detouree .product-card__img {
	object-fit: contain;
}

.product-card--detouree .product-card__img-wrap {
	padding-top: 20px;
}

.product-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 10px 5px 16px 10px;
}

.product-card__brand {
	display: block;
	color: var(--color-gris-vert);
}

.product-card__title {
	font-size: clamp(1.2rem, 1.6vw, 3rem);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-gris);
	margin: 0;
}

.product-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 8px;
}

.product-card__features {
	list-style: none;
	font-size: .85em;
	color: var(--color-gris);
	line-height: 1.2;
}

.product-card__cta {
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 29%;
	aspect-ratio: 1 / .96;
	text-decoration: none;
	transition: opacity 300ms;
	min-width: 50px;
}

.product-card__cta-star {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.product-card__cta-star path {
	transition: fill 0.2s;
}

.product-card:hover .product-card__cta-star path {
	fill: var(--color-rouge-hover);
}

.product-card__cta-label {
	position: relative;
	z-index: 1;
	font-weight: 700;
	line-height: 1;
	color: var(--color-gris);
}

.product-card__cta:hover {
	opacity: 0.85;
}


/* VENEZ VIVRE L'EXPERIENCE */

#vivre-experience .bouton {
	align-self: center !important;
}

#vivre-experience video {
	height: 100% !important;
}


/* FORMULAIRES */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	border-radius: 5px;
	padding: 8px 15px;
	background: #fff;
}

.wpcf7-form select {
	padding: 13px 15px;
}

.wpcf7-form .cols-2 {
	display: flex;
	gap: 16px;
}

.wpcf7-form .cols-2 > * {
	width: 50%;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder  {
	opacity: 1;
	color: var(--color-vert-noir);
}

.wpcf7-form p {
	margin-bottom: 16px;
}

.wpcf7-acceptance .wpcf7-list-item {
	margin-left: 0;
	color: #fff;
}

.wpcf7-acceptance .wpcf7-list-item a {
	color: #fff;
}

.wpcf7-form .submit {
	position: relative;
	text-align: center;
	margin-top: 30px;
}

.wpcf7-form input[type="submit"] {
	border-radius: 30px;
	padding: 8px 15px;
	color: var(--color-blanc);
	background: var(--color-vert);
	border: 1px solid var(--color-vert);
	transition: all .3s;
	margin: auto;
}

.wpcf7-form input[type="submit"]:hover {
	background: var(--color-vert-secondaire);
	border: 1px solid var(--color-vert-secondaire);
}

.wpcf7-form input[type="submit"] {
	font-weight: 600;
	padding: 8px 22px;
	border-radius: 2em;
	transition: all 300ms;
	display: inline-block;
	align-self: start;
	text-decoration: none;
	text-align: center;
	background-color: var(--color-blanc);
	border: 1px solid var(--color-blanc);
	color: var(--color-rouge);
	line-height: 1.75;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover {
	background-color: var(--color-rouge-hover);
	border: 1px solid var(--color-rouge-hover);
	color: var(--color-blanc);
}

.wpcf7-form .submit .wpcf7-spinner {
	position: absolute;
	top: 5px;
	right: 0;
	margin: 0;
}

.wpcf7-response-output,
.wpcf7-not-valid-tip {
	color: #fff;
}

#form-rdv {
	color: #fff;
}

#form-rdv .infos-rdv {
	padding-bottom: 50px;
	margin-bottom: 50px;
	border-bottom: 1px dotted #fff;
}


/* PAGE GUTENBERG */

.page-gutenberg {
	padding: 100px 5vw 150px;
	color: var(--color-vert-noir);
}

.page-gutenberg h1 {
	margin-bottom: 1.75em;
	font-size: clamp( 2.5rem, 3.25vw, 3.25rem );
}

.page-gutenberg h2 {
	font-size: clamp(1.875rem, 1.75vw, 1.75vw);
	margin-top: 1.5em;
}



/* ============================================================
   Product Finder — panneau de transition d'entrée
   La variable --color-pf-bg est partagée avec product-finder.css.
   ============================================================ */

.pf-entry-panel {
	position: fixed;
	inset: 0;
	background-color: var(--color-gris-vert);
	z-index: 99999;
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.pf-entry-panel--slide {
	transform: translateY(0);
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.pf-entry-panel {
		transition: none;
	}
}




/* BANNIERE COOKIES */

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	animation-delay: 2s !important;
	grid-row-gap: 5px !important;
}

.cmplz-cookiebanner .cmplz-title {
	font-weight: bold !important;
}

.cmplz-cookiebanner .cmplz-buttons {
	margin-bottom: 5px;
}

#cmplz-document h2{
	font-size: clamp(1.875rem, 1.75vw, 1.75vw) !important;
	margin-top: 1.5em !important;
	margin-bottom: inherit !important;
}

#cmplz-document,
.editor-styles-wrapper .cmplz-unlinked-mode,
#cmplz-document p {
	font-size: clamp(.95rem, 1.14vw, 1.14vw) !important;
	max-width: 100% !important;
}




/* RESPONSIVE */

@media screen and (min-width: 500px) {

	#footer-top .footer-menus {
		flex-direction: row;
		gap: 25;
		justify-content: center;
	}

}

@media screen and (min-width: 768px) {

	#footer-bottom {
		flex-direction: row;
		justify-content: space-between;
	}

	.product-card__body {
		padding: 10px 10px 16px 19px;
	}

}

@media screen and (min-width: 1025px) {

	#header-main {
		justify-content: space-between;
	}

	#header-main .custom-logo-link {
		width: 14vw;
	}

	#footer-top  {
		flex-direction: row;
	}

	#footer-top .footer-logo {
		width: 25%;
		padding-right: 100px;
	}

	#footer-top .footer-menus {
		width: 75%;
		justify-content: start;
		gap: 50px;
	}

	/* Product Card — desktop : la card est la zone visible exacte */
	.product-card {
		background: transparent;
		border: none;
		border-radius: 0;
		overflow: visible;
		display: flex;
		flex-direction: column;
		position: relative;
		margin: 0 12%; /* réduit la card à sa surface visible */
		box-shadow: none;
	}

	.product-card:hover {
		box-shadow: none;
	}

	/* Fond vert couvre toute la card (qui est déjà à la bonne taille) */
	.product-card::before {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(1, 48, 27, 0.85);
		border: 2px solid var(--color-rouge);
		border-radius: 30px;
		transition: border-color 0.2s, box-shadow 0.2s;
	}

	.product-card:hover::before {
		/*border-color: var(--color-rouge-hover);*/
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
	}

	.product-card__img-wrap {
		position: relative;
		border-radius: 0;
		overflow: hidden;
		z-index: 1;
		aspect-ratio: 1 / .5;
	}

	/* Photo détourée : déborde de part et d'autre (12% colonne / 76% card ≈ 15.8%) */
	.product-card--detouree .product-card__img-wrap {
		margin: 2px -15.8% 0;
		padding-top: 20px;
		aspect-ratio: 1 / 0.380; /* compense la largeur accrue : 0.5 ÷ 1.316 ≈ 0.380 */
	}

	/* Featured image : respecte les coins arrondis de la card et la bordure rouge */
	.product-card:not(.product-card--detouree) .product-card__img-wrap {
		margin: 2px 2px 0;
		border-radius: 28px 28px 0 0; /* rayon interne = 30px - 2px de bordure */
	}

	.product-card__img {
		width: 100%;
		height: 100% !important;
		object-fit: cover;
		object-position: center;
	}

	.product-card--detouree .product-card__img {
		object-fit: contain;
	}

	.product-card__body {
		position: relative;
		z-index: 2;
		padding: 25px 10px 24px 8%;
		display: flex;
		flex-direction: column;
		flex: 1;
		box-sizing: border-box;
	}

	.product-card__cta {
		width: 38%;
	}

	#masthead .bouton-vert a {
		background-color: var(--color-vert-logo);
	}

	#masthead .bouton-vert a:hover {
		background-color: var(--color-vert-noir);
	}

	main#primary {
		padding-top: 36px;
	}
    
}

@media screen and (min-width: 1200px){

	#footer-top .footer-menus {
		gap: 150px;
	}

}

@media screen and (min-width: 1367px){

	.product-card__features {
		line-height: 1.5;
	}

	.page-gutenberg {
		padding: 175px 15vw;
	}
	
}


@media screen and (max-width: 1199px){

	

}

@media screen and (max-width: 1024px) {

	#footer-top .footer-logo {
		margin: 0 auto;
	}

	.footer-menus > * {
		text-align: center;
	}

}

@media screen and (max-width: 767px) {

	

}

@media screen and (max-width: 499px) {

	.footer-menu {
		font-size: 1.25em;
	}
	
}