/* ==========================================================================
   Page d'accueil (remplace Elementor) — wilfried, groupecoiff.com
   Police "Jost" relevée en direct sur les titres de la version Elementor (hero, "Votre partenaire
   de confiance", "le luxe est désormais accessible") ; le reste des titres/textes utilise la police
   système par défaut, comme sur la version d'origine.
   A placer dans : wp-content/themes/blocksy-1752578877-via-wpmarmite/assets/css/front-page.css
   ========================================================================== */

.gc-home { overflow: hidden; }

/* --- Bouton commun à toutes les sections --- */
.gc-btn {
	display: inline-block;
	background: #2C281C;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	padding: 12px 26px;
	border-radius: 4px;
	text-decoration: none;
	border: 1px solid #CD7F32;
	transition: background .15s ease, color .15s ease;
}
.gc-btn:hover { background: #b56b28; color: #fff; }
.gc-btn--outline {
	background: transparent;
	border: 1px solid #fff;
	color: #fff;
}
.gc-btn--outline:hover { background: rgba(255,255,255,.12); color: #fff; }
.gc-btn--dark {
	background: rgba(0,0,0,.55);
	border-color: rgba(255,255,255,.7);
}
.gc-btn--dark:hover { background: #CD7F32; border-color: #CD7F32; }
.gc-btn--grey {
	background: #4a4638;
	border-color: #4a4638;
	color: #fff;
}
.gc-btn--grey:hover { background: #5f5a48; border-color: #5f5a48; color: #fff; }

/* --- Carrousel de fond en fondu (hero + bandeau) --- */
.gc-bg-slider { position: absolute; inset: 0; overflow: hidden; }
.gc-bg-slider__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.gc-bg-slider__slide.is-active { opacity: 1; }

/* ==========================================================================
   HERO
   ========================================================================== */
.gc-hero {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #1f1f1f;
}
.gc-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 38%, rgba(255,255,255,.15) 70%, rgba(255,255,255,0) 100%);
}
/* Photo dédiée au mobile (voir media query 600px) : masquée par défaut, le carrousel de fond reste
   utilisé sur desktop/tablette. */
.gc-hero__mobile-img { display: none; }
/* !important nécessaire : le thème (.ct-container.is-width-constrained, 2 classes) est plus
   spécifique que .gc-hero__content seul et impose margin:0 auto (centrage) sinon. */
.gc-hero__content {
	position: relative;
	z-index: 1;
	max-width: 640px !important;
	width: 100%;
	padding: 60px 24px !important;
	text-align: left !important;
	margin-left: 5vw !important;
	margin-right: auto !important;
}
.gc-hero__title {
	font-family: 'Jost', sans-serif;
	font-size: 45px;
	font-weight: 600;
	letter-spacing: -1px;
	color: #7a7a7a;
	margin: 0 0 6px;
}
.gc-hero__subtitle {
	font-family: 'Jost', sans-serif;
	font-size: 39px;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.15;
	color: #7a7a7a;
	margin: 0 0 20px;
}
.gc-hero__text {
	font-family: 'Jost', sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: #080808;
	line-height: 1.4;
	margin: 0 0 28px;
}

/* ==========================================================================
   NOS TENDANCES DU MOMENT
   ========================================================================== */
.gc-tendances { position: relative; margin: 70px auto; }
/* Carré déco en fond : sort du conteneur centré pour aller se coller au bord droit réel de la
   page (jusqu'au bord de la fenêtre), et remonte au-dessus de la section (compense le
   margin-top:70px de .gc-tendances) pour venir se coller au bandeau "Nos Services et Garanties"
   juste au-dessus. S'étend jusque vers le début de la tuile "Fauteuil de coiffure" en largeur, et
   descend jusqu'au milieu de la ligne du bas (hauteur des tuiles de la ligne 4 colonnes, où se
   trouve "Comptoir D'accueil"). */
.gc-tendances__shape {
	position: absolute;
	top: -70px;
	right: calc((100% - 100vw) / 2);
	width: 62%;
	height: calc(70px + 320px + 16px + (230px / 2));
	background: #2c281bcc;
	z-index: 0;
	pointer-events: none;
}
.gc-tendances__grid { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.gc-tendances__row { display: grid; gap: 16px; }
.gc-tendances__row--3 { grid-template-columns: repeat(3, 1fr); }
.gc-tendances__row--4 { grid-template-columns: repeat(4, 1fr); }
.gc-tendances__intro {
	background: #2c281b;
	color: #fff;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}
.gc-tendances__title { font-size: 26px; font-weight: 700; margin: 0; color: #fff; }
.gc-tendances__text { font-size: 16px; line-height: 1.5; margin: 0; color: #e7e7e7; }
.gc-tendances__row--3 .gc-tendances__tile { min-height: 320px; }
.gc-tendances__row--4 .gc-tendances__tile { min-height: 230px; }
.gc-tendances__tile {
	position: relative;
	background-size: cover;
	background-position: center;
	display: block;
	text-decoration: none;
	overflow: hidden;
}
.gc-tendances__tile-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 100%);
	transition: background .2s ease;
}
.gc-tendances__tile:hover .gc-tendances__tile-overlay { background: rgba(0,0,0,.65); }
.gc-tendances__tile-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: 26px;
	justify-content: flex-end;
}
.gc-tendances__tile-title { font-size: 23px; font-weight: 700; color: #fff; }
.gc-tendances__tile-text { font-size: 15px; color: #fff; line-height: 1.4; }
.gc-tendances__tile .gc-btn { align-self: flex-start; }

@media (max-width: 1024px) {
	.gc-tendances__row--3, .gc-tendances__row--4 { grid-template-columns: repeat(2, 1fr); }
	.gc-tendances__shape { display: none; }
}
@media (max-width: 600px) {
	.gc-tendances__row--3, .gc-tendances__row--4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   NOS SERVICES ET GARANTIES (bandeau sous le hero)
   ========================================================================== */
.gc-services { background: #2c281b; padding: 34px 24px; }
.gc-services__title-main {
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	margin: 0 0 26px;
}
.gc-services__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}
.gc-services__title { font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.gc-services__text { font-size: 14px; color: #d8d8d8; margin: 0; line-height: 1.4; }

@media (max-width: 900px) {
	.gc-services__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.gc-services__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BANDEAUX (boutique + carrousel)
   ========================================================================== */
.gc-bandeau {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 90px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 320px;
}
.gc-bandeau__bg { position: absolute; inset: 0; }
.gc-bandeau__overlay { position: absolute; inset: 0; background: rgba(255,255,255,.55); }
.gc-bandeau__content { position: relative; z-index: 1; max-width: 760px; text-align: center; }
.gc-bandeau__title {
	font-size: 34px;
	font-weight: 700;
	color: #111;
	line-height: 1.25;
	margin: 0 0 26px;
}

/* Variante "boutique" : boîte plus sombre derrière le texte pour la lisibilité sur la photo. */
.gc-bandeau--boutique .gc-bandeau__overlay { background: rgba(0,0,0,.1); }
.gc-bandeau__textbox {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	background: rgba(20,18,12,.72);
	padding: 40px 50px;
	border-radius: 6px;
}
.gc-bandeau--boutique .gc-bandeau__title { color: #fff; margin: 0; }

/* ==========================================================================
   CONFIANCE (photo + compteur + texte)
   ========================================================================== */
/* !important nécessaire : même souci que pour le hero, .ct-container.is-width-constrained (thème,
   2 classes) est plus spécifique que .gc-confiance seul et peut écraser le display:grid — les deux
   colonnes ne se positionnaient plus correctement, d'où le déséquilibre gauche/droite. */
.gc-confiance {
	margin: 80px auto !important;
	max-width: 1100px !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 60px !important;
	align-items: center !important;
}
/* min-height : évite que ce bloc s'affiche à hauteur 0 tant que la photo n'a pas fini de charger
   (chargement "lazy" + connexion lente) — sinon le compteur "2000+" et le cadre déco, qui sont
   positionnés en absolu par rapport à ce bloc, se retrouvent mal placés et peuvent passer
   au-dessus du bouton "Découvrir nos produits" juste en dessous, l'empêchant d'être cliqué. */
.gc-confiance__visual { position: relative; min-height: 260px; }
.gc-confiance__shape {
	position: absolute;
	top: -30px;
	left: -30px;
	width: 60%;
	height: 60%;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANYAAADWAQMAAACXLe5tAAAABlBMVEUAAAC7ztXPrHSlAAAAAXRSTlMAQObYZgAAADVJREFUeNrt2LENADAIBLHff2YkskBoEYWv9QaXHquwRav8Y4wxxhhjjDHGGGOMscn81gv2AFz/0cDef/xFAAAAAElFTkSuQmCC') no-repeat center / contain;
	z-index: 0;
}
.gc-confiance__img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}
.gc-confiance__counter {
	position: absolute;
	z-index: 2;
	right: 20px;
	bottom: 12px;
	background: #2c281b;
	color: #fff;
	padding: 20px 26px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	max-width: 220px;
}
.gc-confiance__counter-num { font-size: 44px; font-weight: 600; line-height: 1; }
.gc-confiance__counter-suffix { font-size: 26px; font-weight: 600; }
.gc-confiance__counter-label { font-size: 15px; color: #e7e7e7; width: 100%; }
.gc-confiance__title {
	font-family: 'Jost', sans-serif;
	font-size: 40px;
	font-weight: 600;
	color: #000;
	line-height: 1.2;
	margin: 0 0 20px;
}
.gc-confiance__text { font-size: 16px; line-height: 1.6; color: #444; margin: 0 0 26px; }

@media (max-width: 900px) {
	/* !important obligatoire ici : la règle desktop ci-dessus (grid-template-columns: 1fr 1fr
	   !important) est plus forte qu'une règle mobile sans !important, donc sans ce !important le
	   bloc restait en 2 colonnes côte à côte même sur mobile au lieu de passer en 1 colonne empilée. */
	.gc-confiance { grid-template-columns: 1fr !important; gap: 60px !important; }
	/* Ordre forcé explicitement : la photo du siège + le compteur "2000+" en premier (en haut),
	   puis le bloc "Groupe Coiff : Votre partenaire de confiance" + le texte juste en dessous. */
	.gc-confiance__visual { margin-bottom: 20px; order: 1; }
	.gc-confiance__content { order: 2; }
	.gc-confiance__content .gc-btn { display: table; margin: 0 auto; }
}

/* ==========================================================================
   CARROUSEL PRODUITS ("Notre sélection" / "Les derniers arrivages")
   ========================================================================== */
.gc-prod-section { margin: 80px auto; }
.gc-prod-section__head { text-align: center; margin-bottom: 34px; }
.gc-prod-section__kicker { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: #CD7F32; font-weight: 600; margin: 0 0 6px; }
.gc-prod-section__title { font-size: 30px; font-weight: 700; color: #111; margin: 0; }

.gc-carousel { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; }
.gc-carousel__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 4px 16px;
	margin: 0;
	list-style: none;
	flex: 1;
	scrollbar-width: none;
}
.gc-carousel__track::-webkit-scrollbar { display: none; }

/* Cartes produit WooCommerce natives (content-product.php) affichées en carrousel */
.gc-prod-carousel li.product {
	scroll-snap-align: start;
	flex: 0 0 260px;
	width: 260px;
	text-align: left;
}
.gc-prod-carousel li.product img { border-radius: 4px; }
.gc-prod-carousel li.product .woocommerce-loop-product__title { font-size: 15px; font-weight: 700; margin: 10px 0 4px; }
.gc-prod-carousel li.product .price { font-size: 14px; }
.gc-prod-carousel li.product .button {
	display: inline-block;
	margin-top: 10px;
	background: #CD7F32;
	color: #fff;
	border-radius: 4px;
	padding: 8px 16px;
	font-size: 14px;
	text-decoration: none;
}
.gc-prod-carousel li.product .button:hover { background: #b56b28; }

@media (max-width: 600px) {
	.gc-prod-section__title { font-size: 24px; }
	/* Une seule carte pleine largeur à la fois (au lieu d'une carte + la suivante à moitié visible),
	   pour "Notre sélection" comme pour "Les derniers arrivages". */
	.gc-prod-carousel li.product { flex-basis: 100%; width: 100%; max-width: 100%; }
}

/* ==========================================================================
   BANDEAU "LE LUXE EST DESORMAIS ACCESSIBLE"
   ========================================================================== */
.gc-luxe {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 100px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}
.gc-luxe__overlay { position: absolute; inset: 0; background: rgba(255,255,255,.72); }
.gc-luxe__content { position: relative; z-index: 1; max-width: 720px; }
.gc-luxe__title {
	font-family: 'Jost', sans-serif;
	font-size: 40px;
	font-weight: 600;
	color: #070707;
	line-height: 1.2;
	margin: 0 0 18px;
}
.gc-luxe__text { font-size: 17px; color: #333; line-height: 1.6; margin: 0 0 26px; }

/* ==========================================================================
   3 BLOCS (Produits / Service client / Actualités)
   ========================================================================== */
.gc-blocs-info { margin: 0 auto 80px; }
.gc-blocs-info__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.gc-blocs-info__item {
	background: #2c281b;
	color: #fff;
	text-align: center;
	padding: 44px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.gc-blocs-info__title { font-size: 24px; font-weight: 700; color: #fff; margin: 0; }
.gc-blocs-info__text { font-size: 14px; line-height: 1.55; color: #d8d8d8; margin: 0 0 4px; }

@media (max-width: 900px) {
	.gc-blocs-info__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TEMOIGNAGES (widget Trustindex)
   ========================================================================== */
.gc-testimonials {
	margin: 0 auto 80px;
	text-align: center;
	font-family: 'Jost', sans-serif;
}
.gc-testimonials-title {
	font-family: 'Jost', sans-serif;
	font-size: 30px;
	font-weight: 600;
	margin: 0 0 26px;
	color: #111;
}

@media (max-width: 600px) {
	/* Le fondu diagonal (photo révélée à droite derrière le texte) est pensé pour un écran large :
	   sur mobile il n'y a pas la place pour la partie blanche du fondu, le texte finit par déborder
	   sur la photo et devient illisible. Sur mobile on passe donc en mode "empilé" : le carrousel de
	   fond est masqué, remplacé par une seule photo dédiée bien visible en haut, et le texte est
	   affiché juste en dessous (plus par-dessus), sur fond blanc uni. */
	.gc-hero { display: block; position: relative; min-height: 0; overflow: visible; background: #fff; }
	.gc-hero__bg { display: none; }
	.gc-hero__mobile-img {
		display: block;
		width: 100%;
		height: 280px;
		background-size: cover;
		background-position: center;
	}
	.gc-hero__content {
		position: static;
		background: #fff;
		margin-left: 0 !important;
		max-width: 100% !important;
		padding: 30px 20px !important;
		text-align: center !important;
	}
	.gc-hero__content .gc-btn { display: table; margin: 8px auto 0; }
	.gc-hero__title { font-size: 30px; }
	.gc-hero__subtitle { font-size: 23px; }
	.gc-hero__text { font-size: 16px; }
	.gc-services__title-main { font-size: 20px; }
	.gc-tendances__title { font-size: 22px; }
	.gc-tendances__intro { padding: 28px; }
	.gc-bandeau { padding: 60px 20px; min-height: 260px; }
	.gc-bandeau__textbox { padding: 26px 22px; gap: 16px; }
	.gc-bandeau__title, .gc-confiance__title, .gc-luxe__title { font-size: 26px; }
	.gc-confiance__counter { padding: 14px 18px; max-width: 170px; right: 10px; bottom: 10px; }
	.gc-confiance__counter-num { font-size: 32px; }
	.gc-confiance__counter-suffix { font-size: 20px; }
	.gc-confiance__counter-label { font-size: 13px; }
	.gc-luxe { padding: 60px 20px; }
	.gc-blocs-info__item { padding: 32px 24px; }
	.gc-blocs-info__title { font-size: 20px; }
	.gc-testimonials-title { font-size: 22px; }
}