/*
 * redesign-accueil.css - EcologicLife staging, 03/09/2026.
 * Suite a la demande explicite de moderniser/harmoniser le site (mock valide
 * par Khalil : https://claude.ai/code/artifact/8bf6578f-c186-4f4d-a18f-d96589c1404c).
 * Methode : CSS + JS injectes en overlay (comme le reste du theme depuis le
 * 27/08), AUCUN module Divi Builder modifie dans l'admin - reversible en
 * retirant les enqueues. Aucune couleur hors charte, aucune police ajoutee
 * (Lexend Deca uniquement, deja en place).
 *
 * Sommaire :
 * 1. Hero - scrim + accroche/CTA injectes (texte reel du site, voir .js)
 * 2. Grille gammes - asymetrique (baby en avant, day/pro empiles), bouton
 *    integre a la carte au lieu d'etre un module separe en-dessous
 * 3. Bande manifeste sombre - injectee apres la grille gammes, chiffres reels
 *    verifies (voir .js), pas de statistique inventee
 */

/* ==========================================================================
   1. HERO
   ========================================================================== */

.et_pb_section_0.et_pb_with_background{
	position:relative;
}
.et_pb_section_0.et_pb_with_background::after{
	content:"";
	position:absolute;inset:0;
	background:
		linear-gradient(180deg, rgba(61,70,80,.05) 0%, rgba(61,70,80,.02) 32%, rgba(61,70,80,.58) 100%),
		linear-gradient(100deg, rgba(61,70,80,.64) 0%, rgba(61,70,80,.2) 46%, rgba(61,70,80,0) 66%);
	pointer-events:none;
}
.ecl-hero-copy{
	position:absolute;left:0;right:0;bottom:0;z-index:2;
	padding:var(--ecl-space-6) var(--ecl-space-3);
	max-width:640px;
	color:#fff;
}
/* .ecl-eyebrow : regle CSS supprimee le 03/09/2026 (stop-slop) en meme temps
   que le JS qui l'injectait - eyebrow retiree du hero, plus aucun element ne
   porte cette classe. */
.ecl-hero-copy h1{
	font-family:"Lexend Deca", sans-serif;
	font-weight:800;letter-spacing:-.01em;line-height:1.05;
	font-size:clamp(28px,4.2vw,46px);
	margin:0 0 var(--ecl-space-2);
}
.ecl-hero-copy p{
	font-family:"Lexend Deca", sans-serif;
	font-weight:300;font-size:16px;line-height:1.55;
	color:rgba(255,255,255,.88);
	max-width:46ch;margin:0 0 var(--ecl-space-3);
}
.ecl-hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
.ecl-hero-cta a{
	display:inline-flex;align-items:center;justify-content:center;
	padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px;
	font-family:"Lexend Deca", sans-serif;
	transition:background-color var(--ecl-t-base) var(--ecl-ease-standard), transform .2s var(--ecl-ease-out), border-color var(--ecl-t-base) var(--ecl-ease-standard);
	min-height:44px;
}
.ecl-hero-cta a:active{transform:scale(.97);}
.ecl-hero-cta .ecl-btn-primary{background:var(--ecl-c-teal-a11y);color:#fff;border:1.5px solid transparent;}
.ecl-hero-cta .ecl-btn-primary:hover{background:var(--ecl-c-menthe);color:var(--ecl-c-dark);}
.ecl-hero-cta .ecl-btn-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.55);}
.ecl-hero-cta .ecl-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);}

@media (max-width:980px){
	.ecl-hero-copy{padding:var(--ecl-space-4) var(--ecl-space-2);}
	.ecl-hero-copy p{display:none;} /* respecte la regle hero : accroche courte sur mobile, pas de pave de texte sur une photo etroite */
}

/* ==========================================================================
   2. GRILLE GAMMES - asymetrique (remplace le "3 cartes egales")
   ========================================================================== */

@media (min-width:981px){
	.et_pb_row_2.et_pb_equal_columns{
		display:grid;
		grid-template-columns:1.4fr 1fr;
		grid-template-rows:1fr 1fr;
		gap:var(--ecl-space-3);
	}
	.et_pb_row_2.et_pb_equal_columns > .et_pb_column_3{grid-column:1;grid-row:1 / span 2;}
	.et_pb_row_2.et_pb_equal_columns > .et_pb_column_4{grid-column:2;grid-row:1;}
	.et_pb_row_2.et_pb_equal_columns > .et_pb_column_5{grid-column:2;grid-row:2;}

	/* Divi fixe encore width/max-width: 31.373% (calcule pour 3 colonnes
	   egales cote a cote) sur .et_pb_column_1_3 - cette largeur figee
	   l'emportait sur la cellule de grille (mesure : cellule 615px/440px
	   mais colonne rendue a 193px/137px), laissant les cartes minuscules et
	   tres hautes dans un espace bien plus grand qu'elles. !important
	   necessaire, meme pattern que le reste du fichier (regle Divi generee
	   dynamiquement, specificite egale ou superieure). */
	.et_pb_row_2.et_pb_equal_columns > .et_pb_column_1_3{
		width:100% !important;
		max-width:100% !important;
	}
}

/* Carte : le bouton "Decouvrir" est un module Divi separe (et_pb_button_
   module_wrapper), mais verifie dans le DOM reel : c'est deja un enfant de
   .et_pb_column (frere de .et_pb_blurb), pas besoin de le deplacer en JS.
   Seul un flex column + flex:1 sur le blurb suffit a le pousser en bas de
   la carte au lieu de flotter en-dessous, visuellement detache. */
.et_pb_column:has(> .et_pb_module.et_pb_blurb .et_pb_main_blurb_image){
	display:flex;flex-direction:column;
}
.et_pb_column:has(> .et_pb_module.et_pb_blurb .et_pb_main_blurb_image) .et_pb_blurb{
	flex:1;display:flex;flex-direction:column;
}
.et_pb_column:has(> .et_pb_module.et_pb_blurb .et_pb_main_blurb_image) .et_pb_blurb_content{
	flex:1;display:flex;flex-direction:column;
}
.et_pb_column:has(> .et_pb_module.et_pb_blurb .et_pb_main_blurb_image) .et_pb_blurb_description{
	flex:1;
}
.et_pb_column:has(> .et_pb_module.et_pb_blurb .et_pb_main_blurb_image) .et_pb_button_module_wrapper{
	padding:0 var(--ecl-space-3) var(--ecl-space-3);
	margin-top:calc(-1 * var(--ecl-space-1));
}
.et_pb_column:has(> .et_pb_module.et_pb_blurb .et_pb_main_blurb_image) .et_pb_button_module_wrapper .et_pb_button{
	width:100%;text-align:center;
}
.et_pb_column_3 .et_pb_module_header{font-size:clamp(20px,1.8vw,24px);}

/*
 * Cartes gammes - photo + panneau (04/09/2026, mock valide par Khalil :
 * https://claude.ai/code/artifact/2fe9b264-e3e7-410c-b941-8772822f99ee).
 * Remplace la photo pleine carte + degrade (retour Khalil : texte illisible
 * par endroits selon la photo, quel que soit le degrade essaye) par une
 * carte a 2 zones empilees : photo en haut a hauteur fixe (jamais de texte
 * dessus), contenu sur fond plein en bas - contraste garanti quelle que
 * soit la photo, plus de degrade a calibrer. Bouton identique au CTA
 * principal du site (pilule teal, meme classe visuelle que le hero).
 */
.ecl-gamme-photo-card{
	position:relative;overflow:hidden;isolation:isolate;
	border-radius:var(--ecl-radius-lg);
	background:#fff;
	box-shadow:var(--ecl-shadow-rest);
	transition:box-shadow var(--ecl-t-base) var(--ecl-ease-out),transform var(--ecl-t-base) var(--ecl-ease-out);
	display:flex !important;flex-direction:column;
	/* align-self:stretch (comportement par defaut d'un item de grille, laisse
	   explicite pour la lisibilite) : la carte "baby" (grid-row:1/span 2)
	   remplit la hauteur cumulee DayByDay+Seniors - c'est voulu (carte
	   "featured"). Le vide qui apparaissait auparavant entre le texte et le
	   bouton (mesure reelle : jusqu'a ~600px) est desormais absorbe par LA
	   PHOTO (flex:1 sur .ecl-gamme-bg ci-dessous, pas de hauteur fixe) plutot
	   que par un espace vide sous le texte - le texte/bouton restent a taille
	   naturelle, c'est la zone photo qui s'agrandit. Sans texte dessus, une
	   photo plus ou moins haute n'a aucun impact sur la lisibilite. */
	align-self:stretch;
}
.ecl-gamme-photo-card:hover{
	box-shadow:var(--ecl-shadow-hover);
	transform:translateY(-2px);
}

.ecl-gamme-bg{
	position:relative;z-index:0;flex:1 1 auto;min-height:180px;
	background-size:cover;background-position:center;
	background-color:var(--ecl-c-dark);
}
/* Carte "Seniors" : aucune photo de gamme disponible en mediatheque
   (produits pas encore lances, Khalil confirme) - degrade mauve de la
   charte plutot qu'une photo empruntee a une autre gamme. */
.ecl-gamme-photo-card.ecologiclife-seniors-card .ecl-gamme-bg{
	background-image:linear-gradient(160deg,var(--ecl-c-mauve),var(--ecl-c-mauve-deep)) !important;
}

.ecl-gamme-photo-card .et_pb_main_blurb_image{display:none;}

/* min-height:0 !important obligatoire : Divi genere .et_pb_blurb{min-height:
   450px} (reliquat de l'ancien mode "3 colonnes egales hauteur"). Sans ce
   reset, chaque carte affiche un vide de ~450px sous le texte, quel que soit
   son contenu reel - mesure reelle (450px pile), pas suppose. */
.ecl-gamme-photo-card .et_pb_blurb{
	flex:none !important;display:flex;flex-direction:column;min-height:0 !important;
}
.ecl-gamme-photo-card .et_pb_blurb_content{
	flex:none;display:flex;flex-direction:column;gap:10px;
	padding:var(--ecl-space-3);
}
.et_pb_row_2.et_pb_equal_columns > .et_pb_column_3.ecl-gamme-photo-card .et_pb_blurb_content{
	padding:var(--ecl-space-4);gap:14px;
}
.ecl-gamme-photo-card .et_pb_blurb_description{flex:none;}

/* Etiquette de gamme (kicker), injectee en JS juste avant le titre - reprend
   un nom deja utilise ailleurs sur le site (menu principal, footer : voir
   redesign-footer.js), rien d'invente, simple repere visuel colore. */
.ecl-gamme-kicker{
	align-self:flex-start;padding:3px 12px;border-radius:999px;
	font-family:"Lexend Deca",sans-serif;font-size:11px;font-weight:700;
	text-transform:uppercase;letter-spacing:.05em;
}
.ecologiclife-baby-card .ecl-gamme-kicker{background:var(--ecl-c-corail);color:#7a4a26;}
.ecologiclife-day-card .ecl-gamme-kicker{background:var(--ecl-c-teal-brut);color:#fff;}
.ecologiclife-seniors-card .ecl-gamme-kicker{background:var(--ecl-c-mauve-deep);color:#fff;}

/* Titre/description en texte sombre : fond desormais clair (plus de photo
   derriere le texte). Specificite 4 classes toujours necessaire (Divi genere
   .et_pb_blurb_1.et_pb_blurb .et_pb_module_header, 3 classes !important,
   et-core-unified-136.min.css - mesure reelle, pas supposee). */
.et_pb_row_2 .ecl-gamme-photo-card .et_pb_module_header,
.et_pb_row_2 .ecl-gamme-photo-card .et_pb_module_header span{color:var(--ecl-c-dark) !important;}
/* Uniquement le paragraphe, jamais les span - 2 spans de la description
   "baby"/"day" portent une couleur de marque inline (le "ecologic|" bicolore)
   a preserver telle quelle, ne pas l'ecraser. */
.ecl-gamme-photo-card .et_pb_blurb_description p{color:rgba(61,70,80,.78) !important;}

.ecl-gamme-photo-card .et_pb_button_module_wrapper{
	padding:0 var(--ecl-space-3) var(--ecl-space-3);
	margin-top:0 !important;
}
.et_pb_row_2.et_pb_equal_columns > .et_pb_column_3.ecl-gamme-photo-card .et_pb_button_module_wrapper{
	padding:0 var(--ecl-space-4) var(--ecl-space-4);
}
/* Bouton harmonise avec le CTA principal du site (meme couleur ET meme
   gabarit que .ecl-btn-primary du hero : padding/min-height/police) plutot
   que la couleur/taille custom par module Divi (mesure reelle : sans ca,
   padding 3.9px/13px force par le CSS natif "et_pb_button, et_pb_button:hover"
   -> bouton haut de ~30px, sous le minimum 44px deja corrige ailleurs sur ce
   site pour les boutons WooCommerce, buttons-pill.css) - demande explicite
   (retour Khalil) : boutons coherents entre eux. */
.ecl-gamme-photo-card .et_pb_button{
	background:var(--ecl-c-teal-a11y) !important;
	color:#fff !important;
	border:1.5px solid transparent !important;
	display:inline-flex !important;align-items:center;justify-content:center;
	padding:14px 26px !important;min-height:44px;
	font-size:15px !important;font-weight:600;
	font-family:"Lexend Deca", sans-serif;
	/* !important requis : les boutons "Decouvrir" (baby/day) ont chacun une
	   couleur custom posee dans Divi Builder, rendue via un selecteur avec ID
	   (#page-container ... .et_pb_button_0/_1, meme mecanisme que le bouton
	   Seniors ci-dessous) qui pose border-radius:15px SANS !important - battait
	   quand meme "body .et_pb_button" (buttons-pill.css, pas d'ID) malgre le
	   999px voulu partout. Mesure reelle : les boutons "Decouvrir" restaient a
	   15px alors que "Bientot disponible" (deja corrige avec #page-container)
	   passait bien en pilule. */
	border-radius:999px !important;
}
.ecl-gamme-photo-card .et_pb_button:hover{
	background:var(--ecl-c-menthe) !important;
	color:var(--ecl-c-dark) !important;
}
/* "Bientot disponible" (Seniors) : lien reel vers "/" faute de page produit
   - rendu explicitement non cliquable, style "disabled" du systeme de
   boutons pilule (voir .disabled dans buttons-pill.css).
   Prefixe #page-container : ce module a une couleur/fond custom posee dans
   Divi Builder, rendue dans le CSS unifie du theme via un selecteur avec ID
   ("body #page-container .et_pb_section .et_pb_button_2", mesure reelle via
   CSS.getMatchedStylesForNode) - une classe seule ne peut jamais battre un
   ID, quel que soit le nombre de !important. Sans #page-container ici, le
   bouton restait blanc sur fond mauve (l'ancien style du module), le rendant
   invisible sur la carte Seniors desormais claire. */
#page-container .ecl-gamme-photo-card.ecologiclife-seniors-card .et_pb_button{
	background:transparent !important;
	border:1.5px solid rgba(61,70,80,.22) !important;
	color:rgba(61,70,80,.45) !important;
	border-radius:999px !important;
	pointer-events:none;
	cursor:not-allowed;
}

/* ==========================================================================
   3. BANDE MANIFESTE (injectee en JS apres la grille gammes)
   Chiffres reels uniquement : 3-5j livraison et 14j retour deja affirmes
   ailleurs sur le site (sidebar reassurance) ; "3 univers" = compte reel des
   gammes. Aucun pourcentage de matieres recyclees invente - le site dit
   "en majeure partie", jamais 100%, on reprend cette formulation telle
   quelle plutot qu'un chiffre precis non verifie.
   ========================================================================== */

.ecl-manifesto{
	background:var(--ecl-c-dark);color:#fff;
	padding:var(--ecl-space-6) var(--ecl-space-3);
	position:relative;overflow:hidden;
}
.ecl-manifesto-inner{
	max-width:1200px;margin:0 auto;
	position:relative;z-index:1;
}
/* .ecl-manifesto h2 : regles supprimees le 03/09/2026 (stop-slop, titre
   slogan retire du JS) - la bande ne contient plus que les 3 chiffres. */
.ecl-manifesto-stats{
	display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--ecl-space-6);
	max-width:760px;margin:0 auto;text-align:center;
}
.ecl-stat b{
	display:block;font-family:"Lexend Deca", sans-serif;
	font-size:clamp(30px,3vw,42px);font-weight:800;color:var(--ecl-c-menthe);
	line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums;
}
.ecl-stat span{font-size:13px;color:rgba(255,255,255,.7);line-height:1.4;font-family:"Lexend Deca", sans-serif;font-weight:300;}

@media (max-width:980px){
	.ecl-manifesto-stats{grid-template-columns:1fr;gap:var(--ecl-space-4);}
}

/* ==========================================================================
   4. BOUTON "SOLUTIONS POUR PROFESSIONNELS" (section_3) - meme gabarit que
   le reste des boutons pilule du site (retour Khalil : "agrandis-le pareil
   que les autres", apres le correctif generique de rayon dans
   buttons-pill.css). Meme padding/min-height/police que .ecl-btn-primary
   (hero) et les boutons des cartes gammes ci-dessus - juste le format,
   couleur du module (#33889c) et texte inchanges.
   !important necessaire : meme mecanisme que les autres boutons de ce
   fichier, ".et_pb_button, .et_pb_button:hover{padding:3.9px 13px!important}"
   (regle native Divi, mesure reelle) l'emporterait sinon.
   ========================================================================== */
.et_pb_section_3 .et_pb_button{
	display:inline-flex !important;align-items:center;justify-content:center;
	padding:14px 26px !important;min-height:44px;
	font-size:15px !important;font-weight:600;
	font-family:"Lexend Deca", sans-serif;
}