/*
Theme Name: Gescop, vente au personnel
Theme URI: https://gescop.naxios.fr
Description: Habillage de l operation de vente au personnel des societes du groupe. Theme enfant de Storefront, aux couleurs de Gescop.
Author: naXios
Template: storefront
Version: 1.0
Text Domain: gescop
*/

/* ==================================================================
   Palette, reprise de la charte de gescop.fr
   ================================================================== */

:root{
	--bleu:#1b3f65;
	--bleu2:#26588d;
	--bleu3:#477eac;
	--bleu-nuit:#091620;
	--jaune:#f4a11d;
	--jaune2:#f3c830;
	--blanc:#ffffff;
	--gris:#f2f5f8;
	--gris2:#dfe6ed;
	--texte:#26323d;
	--texte2:#5b6b7b;
}

body{
	color:var(--texte);
	background:var(--blanc);
	font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

h1,h2,h3,h4,h5,h6,
.site-title a,
.woocommerce-loop-product__title{
	color:var(--bleu);
	font-weight:700;
}

a{color:var(--bleu2)}
a:hover{color:var(--jaune)}

/* ==================================================================
   En-tete
   ================================================================== */

/* Le logo de Gescop est bleu fonce et rouge : il lui faut un fond clair.
   La barre de navigation juste en dessous porte le bleu de la charte. */
.site-header{
	background:var(--blanc);
	border-bottom:1px solid var(--gris2);
	padding-top:.7em;
	padding-bottom:.7em;
}

/* Storefront affiche son propre bloc de titre ; le notre le remplace. */
.site-header .site-branding .site-title,
.site-header .site-branding .site-description{display:none}

.site-header .site-branding img,
.site-header .custom-logo{max-height:44px;width:auto}

.site-header-cart .cart-contents{color:var(--bleu)}
.site-header-cart .cart-contents:hover{color:var(--bleu2)}
.site-header-cart .count{background:var(--jaune);color:var(--bleu)}

.storefront-primary-navigation{
	background:var(--bleu);
	border-bottom:4px solid var(--jaune);
}

.main-navigation ul li a{
	color:var(--blanc);
	padding-top:.85em;
	padding-bottom:.85em;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a{color:var(--jaune)}

.ges-marque{display:flex;align-items:center;gap:13px;text-decoration:none}
.ges-marque img{width:104px;height:40px;object-fit:contain;object-position:left center;display:block}
.ges-marque span{
	color:var(--bleu);
	font-weight:700;
	font-size:1.02em;
	line-height:1.2;
	letter-spacing:.01em;
}
.ges-marque:hover span{color:var(--bleu2)}

/* ==================================================================
   Boutons
   ================================================================== */

button,
input[type=button],
input[type=submit],
.button,
.added_to_cart,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
	background:var(--jaune);
	color:var(--bleu);
	font-weight:700;
	border:0;
	border-radius:6px;
	padding:.72em 1.25em;
}

button:hover,
.button:hover,
.added_to_cart:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
	background:var(--jaune2);
	color:var(--bleu);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{
	background:var(--bleu2);
	color:var(--blanc);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
	background:var(--bleu);
	color:var(--blanc);
}

/* ==================================================================
   Page de garde
   ================================================================== */

.ges-hero{
	background:linear-gradient(155deg,var(--bleu-nuit) 0%,var(--bleu) 45%,var(--bleu2) 100%);
	color:var(--blanc);
	padding:34px 24px 44px;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:min(78vh,620px);
}

/* Le pave d accueil est la premiere chose que voit le salarie : il occupe
   le centre de l ecran et se lit de loin. */
.ges-hero-in{
	max-width:860px;
	width:100%;
	margin:0 auto;
	text-align:center;
	padding:54px 46px 50px;
	border-radius:16px;
	background:rgba(255,255,255,.055);
	border:1px solid rgba(255,255,255,.14);
	border-top:5px solid var(--jaune);
	box-shadow:0 22px 60px rgba(9,22,32,.38);
}

.ges-sur{
	margin:0 0 16px;
	font-size:.9em;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:var(--jaune);
	font-weight:700;
}

.ges-hero h1{
	color:var(--blanc);
	font-size:4em;
	line-height:1.06;
	letter-spacing:-.015em;
	margin:0 0 20px;
}

.ges-sous{
	margin:0 auto 38px;
	max-width:620px;
	font-size:1.32em;
	line-height:1.45;
	color:#d6e2ee;
}

.ges-bouton{
	display:inline-block;
	background:var(--jaune);
	color:var(--bleu);
	font-weight:700;
	font-size:1.2em;
	padding:.95em 2.6em;
	border-radius:8px;
	text-decoration:none;
}
.ges-bouton:hover{background:var(--jaune2);color:var(--bleu)}

.ges-note{
	margin:22px auto 0;
	max-width:520px;
	font-size:.92em;
	line-height:1.55;
	color:#aec4d8;
}

/* --- bandeau des societes --- */

.ges-logos{
	background:var(--blanc);
	border-bottom:1px solid var(--gris2);
	padding:38px 24px 34px;
}

.ges-logos-titre{
	text-align:center;
	margin:0 0 26px;
	font-size:.8em;
	letter-spacing:.17em;
	text-transform:uppercase;
	color:var(--texte2);
	font-weight:700;
}

.ges-logos-liste{
	max-width:1000px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:20px 34px;
}

.ges-logos-liste figure{
	margin:0;
	flex:0 0 auto;
	width:158px;
	height:88px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:8px;
	background:var(--blanc);
	border:1px solid var(--gris2);
	border-radius:8px;
}

/* Les logos sont des fichiers vectoriels sans dimensions intrinseques :
   sans boite explicite ils s ecrasent a zero. object-fit garde les proportions. */
.ges-logos-liste img{
	width:130px;
	height:58px;
	object-fit:contain;
	object-position:center;
	display:block;
}

/* --- presentation --- */

.ges-texte{
	max-width:760px;
	margin:0 auto;
	padding:54px 24px 10px;
	font-size:1.06em;
	line-height:1.75;
}
.ges-texte h2{margin-top:1.6em}
.ges-texte > :first-child{margin-top:0}

/* --- les trois etapes --- */

.ges-etapes{
	max-width:1000px;
	margin:0 auto;
	padding:24px 24px 72px;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:22px;
}

.ges-etape{
	background:var(--gris);
	border-radius:10px;
	padding:26px 24px;
	border-top:4px solid var(--jaune);
}

.ges-etape .num{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border-radius:50%;
	background:var(--bleu);
	color:var(--blanc);
	font-weight:700;
	margin-bottom:12px;
}

.ges-etape h3{margin:0 0 8px;font-size:1.08em}
.ges-etape p{margin:0;color:var(--texte2);font-size:.96em;line-height:1.6}

@media(max-width:768px){
	.ges-hero{min-height:0;padding:24px 16px 34px}
	.ges-hero-in{padding:34px 22px 32px}
	.ges-hero h1{font-size:2.3em}
	.ges-sous{font-size:1.08em;margin-bottom:28px}
	.ges-bouton{font-size:1.05em;padding:.9em 1.7em}
	.ges-etapes{grid-template-columns:1fr}
	.ges-logos-liste figure{width:132px;height:74px}
	.ges-logos-liste img{width:108px;height:50px}
	.ges-marque span{font-size:.92em}
}

/* ==================================================================
   Catalogue
   ================================================================== */

.gescop-rappel{
	background:#fff6e4;
	border-left:4px solid var(--jaune);
	padding:13px 16px;
	margin:0 0 1.8em;
	border-radius:0 6px 6px 0;
	font-size:.96em;
	color:var(--texte);
}

.woocommerce ul.products li.product{
	background:var(--blanc);
	border:1px solid var(--gris2);
	border-radius:10px;
	padding:18px;
	text-align:left;
	transition:border-color .15s;
}
.woocommerce ul.products li.product:hover{border-color:var(--bleu3)}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-size:1.02em;
	line-height:1.35;
	padding:0;
	margin:0 0 .4em;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{
	color:var(--bleu2);
	font-weight:700;
	font-size:1.22em;
}

.woocommerce ul.products li.product .button{margin-top:.7em}

.woocommerce span.onsale{background:var(--jaune);color:var(--bleu)}

/* Etat du materiel : entre le titre et le prix, c est le premier critere
   de choix sur du materiel d occasion. */
.ges-etat{
	display:inline-block;
	font-size:.74em;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--bleu);
	background:#fdf0d8;
	border:1px solid #f6d79b;
	border-radius:4px;
	padding:3px 9px;
	margin:.1em 0 .45em;
	line-height:1.5;
}
.woocommerce div.product .ges-etat{font-size:.82em;margin:.2em 0 .8em}
.ges-reference{
	display:block;
	font-size:.8em;
	color:var(--texte2);
	margin:.3em 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--bleu)}

/* ==================================================================
   Selection et validation
   ================================================================== */

.woocommerce-info,
.woocommerce-message{border-top-color:var(--bleu2)}
.woocommerce-info::before,
.woocommerce-message::before{color:var(--bleu2)}
.woocommerce-error{border-top-color:#c0392b}

.woocommerce table.shop_table th{color:var(--bleu)}

#payment .place-order{padding-top:1em}

/* ==================================================================
   Pied de page
   ================================================================== */

.site-footer{
	background:var(--bleu-nuit);
	color:#b9c7d4;
	border-top:4px solid var(--jaune);
}
.site-footer a{color:var(--jaune2)}
.site-footer a:hover{color:var(--jaune)}
.site-footer h1,.site-footer h2,.site-footer h3{color:var(--blanc)}
.site-info{font-size:.9em}

/* ==================================================================
   Resserrage des en-tetes de page
   Storefront laisse beaucoup de vide autour du fil d Ariane et du titre.
   ================================================================== */

.storefront-breadcrumb{
	margin-bottom:0;
	padding:1.1em 0 0;
}

.woocommerce-products-header,
.page .entry-header,
.woocommerce .page-title{
	margin:0;
	padding:0;
}

.woocommerce-products-header{margin:0 0 1.1em}

.woocommerce-products-header__title.page-title,
.woocommerce-page .entry-title,
.woocommerce .page-title{
	font-size:2.1em;
	line-height:1.2;
	text-align:left;
	margin:.7em 0 .5em;
	padding:0;
}

.site-content .col-full{padding-top:0}
.woocommerce-products-header__subtitle{margin:0 0 .8em}

/* La barre de tri et le compte de resultats collent au rappel de quota. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{margin-bottom:1.2em}

.woocommerce ul.products{margin-top:0}