/*
Theme Name: Confort Cars
Theme URI: https://shop.piksite.fr
Description: Thème enfant de Storefront pour la boutique Confort Cars — accessoires auto. Direction claire et rassurante.
Author: Confort Cars
Template: storefront
Version: 1.0.0
Text Domain: confort-cars
*/

/* ==========================================================================
   1. Jetons de couleur et de typographie
   Une seule source de vérité : tout le reste s'y réfère.
   ========================================================================== */
:root {
	--cc-encre: #16212c;          /* texte principal */
	--cc-encre-douce: #5a6b7b;    /* texte secondaire */
	--cc-bleu: #124a78;           /* couleur de marque, confiance */
	--cc-bleu-fonce: #0d3556;
	--cc-bleu-pale: #eaf2f9;      /* fonds de section */
	--cc-ambre: #e07b1a;          /* appels à l'action */
	--cc-ambre-fonce: #c26410;
	--cc-vert: #1c7a52;           /* réassurance, disponibilité */
	--cc-blanc: #ffffff;
	--cc-gris: #f6f8fa;
	--cc-bord: #e2e8ee;
	--cc-rayon: 12px;
	--cc-ombre: 0 1px 2px rgba(22, 33, 44, .06), 0 8px 24px rgba(22, 33, 44, .06);
	--cc-ombre-forte: 0 2px 4px rgba(22, 33, 44, .08), 0 16px 40px rgba(22, 33, 44, .10);
}

body,
button, input, select, textarea {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--cc-encre);
}

body {
	background: var(--cc-blanc);
	line-height: 1.65;
}

h1, h2, h3, h4,
.site-title, .cc-titre {
	color: var(--cc-encre);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

a { color: var(--cc-bleu); }
a:hover { color: var(--cc-bleu-fonce); }

/* ==========================================================================
   2. En-tête
   ========================================================================== */
.site-header {
	background: var(--cc-blanc);
	border-bottom: 1px solid var(--cc-bord);
	padding-top: 1.2em;
	padding-bottom: 1.2em;
}

.site-header .site-branding .site-title a {
	color: var(--cc-bleu);
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-decoration: none;
}

.site-header .site-branding .site-description {
	color: var(--cc-encre-douce);
	font-size: .82rem;
	margin: .2em 0 0;
}

.main-navigation ul li a {
	color: var(--cc-encre);
	font-weight: 600;
	font-size: .95rem;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
	color: var(--cc-bleu);
}

.site-header-cart .cart-contents {
	color: var(--cc-encre);
	font-weight: 600;
}

.site-header-cart .cart-contents .count {
	background: var(--cc-ambre);
	color: var(--cc-blanc);
	border-radius: 999px;
	padding: .05em .55em;
	font-size: .78rem;
	font-weight: 700;
}

/* Bandeau de confiance sous l'en-tête */
.cc-bandeau {
	background: var(--cc-bleu);
	color: var(--cc-blanc);
	font-size: .86rem;
	text-align: center;
	padding: .6em 1em;
	letter-spacing: .01em;
}
.cc-bandeau strong { color: var(--cc-blanc); }
.cc-bandeau span { opacity: .55; margin: 0 .7em; }
@media (max-width: 600px) {
	.cc-bandeau span { display: none; }
	.cc-bandeau b { display: block; }
}

/* ==========================================================================
   3. Boutons
   ========================================================================== */
button, .button, input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button {
	background: var(--cc-bleu);
	color: var(--cc-blanc);
	border-radius: 8px;
	font-weight: 600;
	padding: .78em 1.4em;
	border: 0;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

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

/* L'action principale — ajout au panier, commander — passe en ambre */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce div.product form.cart .button,
.cc-cta {
	background: var(--cc-ambre);
	color: var(--cc-blanc);
	box-shadow: 0 2px 0 var(--cc-ambre-fonce);
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce div.product form.cart .button:hover,
.cc-cta:hover {
	background: var(--cc-ambre-fonce);
	color: var(--cc-blanc);
}

.cc-cta {
	display: inline-block;
	padding: .95em 1.9em;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1.03rem;
	text-decoration: none;
}

.cc-cta--fantome {
	background: transparent;
	color: var(--cc-bleu);
	border: 2px solid var(--cc-bord);
	box-shadow: none;
}
.cc-cta--fantome:hover {
	background: var(--cc-bleu-pale);
	color: var(--cc-bleu-fonce);
	border-color: var(--cc-bleu);
}

/* ==========================================================================
   4. Page d'accueil
   ========================================================================== */
.home .site-content .col-full > .cc-accueil { max-width: none; }

.cc-hero {
	background: linear-gradient(180deg, var(--cc-bleu-pale) 0%, var(--cc-blanc) 100%);
	border-radius: var(--cc-rayon);
	padding: 3.4em 2.2em 3em;
	text-align: center;
	margin-bottom: 2.6em;
}

.cc-hero .cc-surtitre {
	display: inline-block;
	background: var(--cc-blanc);
	border: 1px solid var(--cc-bord);
	color: var(--cc-bleu);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: .45em 1em;
	border-radius: 999px;
	margin-bottom: 1.3em;
}

.cc-hero h1 {
	font-size: clamp(1.9rem, 4.6vw, 3.1rem);
	max-width: 22ch;
	margin: 0 auto .7em;
}

.cc-hero p.cc-chapo {
	font-size: clamp(1rem, 2vw, 1.18rem);
	color: var(--cc-encre-douce);
	max-width: 56ch;
	margin: 0 auto 1.9em;
}

.cc-hero .cc-actions {
	display: flex;
	gap: .9em;
	justify-content: center;
	flex-wrap: wrap;
}

/* Réassurance : 4 colonnes */
.cc-reassurance {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1em;
	margin: 0 0 3.2em;
}

.cc-reassurance div {
	background: var(--cc-blanc);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
	padding: 1.3em 1.1em;
	text-align: center;
}

.cc-reassurance strong {
	display: block;
	font-size: .97rem;
	margin-bottom: .25em;
}

.cc-reassurance span {
	display: block;
	font-size: .85rem;
	color: var(--cc-encre-douce);
	line-height: 1.5;
}

@media (max-width: 767px) {
	.cc-reassurance { grid-template-columns: repeat(2, 1fr); }
}

/* Titres de section */
.cc-section { margin-bottom: 3.4em; }

.cc-section > h2 {
	font-size: clamp(1.45rem, 3vw, 2rem);
	margin-bottom: .35em;
}

.cc-section > p.cc-intro {
	color: var(--cc-encre-douce);
	max-width: 62ch;
	margin-bottom: 1.8em;
}

/* Deux colonnes de texte */
.cc-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.4em;
	align-items: start;
}
@media (max-width: 767px) { .cc-duo { grid-template-columns: 1fr; gap: 1.6em; } }

.cc-encart {
	background: var(--cc-gris);
	border: 1px solid var(--cc-bord);
	border-left: 4px solid var(--cc-bleu);
	border-radius: var(--cc-rayon);
	padding: 1.5em 1.6em;
}
.cc-encart h3 { font-size: 1.05rem; margin: 0 0 .5em; }
.cc-encart p:last-child { margin-bottom: 0; }

/* FAQ */
.cc-faq details {
	background: var(--cc-blanc);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
	padding: 1.05em 1.3em;
	margin-bottom: .7em;
}
.cc-faq details[open] { box-shadow: var(--cc-ombre); }
.cc-faq summary {
	font-weight: 650;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 1.8em;
}
.cc-faq summary::-webkit-details-marker { display: none; }
.cc-faq summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: -.1em;
	font-size: 1.4em;
	font-weight: 400;
	color: var(--cc-bleu);
	line-height: 1;
}
.cc-faq details[open] summary::after { content: "\2013"; }
.cc-faq details p { margin: .8em 0 0; color: var(--cc-encre-douce); }

/* Appel final */
.cc-final {
	background: var(--cc-bleu);
	color: var(--cc-blanc);
	border-radius: var(--cc-rayon);
	padding: 2.8em 2em;
	text-align: center;
}
.cc-final h2 { color: var(--cc-blanc); margin-bottom: .5em; }
.cc-final p { color: rgba(255,255,255,.82); max-width: 52ch; margin: 0 auto 1.6em; }
.cc-final .cc-cta { background: var(--cc-blanc); color: var(--cc-bleu); box-shadow: none; }
.cc-final .cc-cta:hover { background: var(--cc-bleu-pale); color: var(--cc-bleu-fonce); }

/* ==========================================================================
   5. Grille produits et fiche produit
   ========================================================================== */
ul.products li.product {
	background: var(--cc-blanc);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
	padding: .9em;
	transition: box-shadow .18s ease, border-color .18s ease;
}

/* Le survol ne s'applique qu'aux appareils qui en ont un : sur mobile
   un tap laisserait l'effet collé. */
@media (hover: hover) {
	ul.products li.product:hover {
		box-shadow: var(--cc-ombre-forte);
		border-color: var(--cc-bleu);
	}
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: .98rem !important;
	font-weight: 650;
	line-height: 1.35;
	color: var(--cc-encre);
}

ul.products li.product .price {
	color: var(--cc-encre);
	font-weight: 700;
}

ul.products li.product .price del { color: var(--cc-encre-douce); font-weight: 400; }

ul.products li.product a.button {
	background: var(--cc-bleu);
	font-size: .9rem;
	width: 100%;
	text-align: center;
}

.woocommerce span.onsale {
	background: var(--cc-ambre);
	color: var(--cc-blanc);
	border-radius: 999px;
	font-weight: 700;
	padding: .35em .9em;
	min-height: 0;
	line-height: 1.5;
}

/* Fiche produit */
.woocommerce div.product .product_title {
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	margin-bottom: .4em;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--cc-encre);
	font-size: 1.75rem;
	font-weight: 800;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 1.03rem;
	color: var(--cc-encre-douce);
	border-left: 3px solid var(--cc-bleu-pale);
	padding-left: 1.1em;
	margin-bottom: 1.6em;
}

.woocommerce div.product form.cart .variations label {
	font-weight: 650;
	color: var(--cc-encre);
}

.woocommerce div.product form.cart .variations select {
	border: 1px solid var(--cc-bord);
	border-radius: 8px;
	padding: .65em .8em;
	/* 16 px minimum : en dessous, Safari iOS zoome sur le champ et ne dézoome jamais. */
	font-size: 16px;
	background: var(--cc-blanc);
}

.woocommerce div.product form.cart .button {
	font-size: 1.05rem;
	padding: .9em 2em;
}

.woocommerce div.product .quantity input.qty {
	border: 1px solid var(--cc-bord);
	border-radius: 8px;
	font-size: 16px;
	padding: .6em .4em;
}

/* Réassurance sous le bouton d'achat */
.cc-fiche-reassurance {
	list-style: none;
	margin: 1.6em 0 0;
	padding: 1.2em 1.3em;
	background: var(--cc-gris);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
	font-size: .92rem;
}
.cc-fiche-reassurance li {
	margin: 0 0 .55em;
	padding-left: 1.6em;
	position: relative;
	color: var(--cc-encre);
}
.cc-fiche-reassurance li:last-child { margin-bottom: 0; }
.cc-fiche-reassurance li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .42em;
	width: .95em;
	height: .5em;
	border-left: 2px solid var(--cc-vert);
	border-bottom: 2px solid var(--cc-vert);
	transform: rotate(-45deg);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--cc-blanc);
	border-bottom-color: var(--cc-blanc);
}

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

.woocommerce div.product .woocommerce-tabs .panel h3 {
	font-size: 1.12rem;
	margin-top: 1.6em;
	color: var(--cc-bleu);
}
.woocommerce div.product .woocommerce-tabs .panel h3:first-child { margin-top: 0; }

.woocommerce-message, .woocommerce-info {
	border-top-color: var(--cc-bleu);
	background: var(--cc-bleu-pale);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--cc-bleu); }

/* Champs de commande : 16 px pour bloquer le zoom iOS */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	font-size: 16px;
	border: 1px solid var(--cc-bord);
	border-radius: 8px;
	padding: .7em .85em;
}

/* ==========================================================================
   6. Catégories en vitrine
   ========================================================================== */
.cc-univers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1em;
}
@media (max-width: 900px) { .cc-univers { grid-template-columns: repeat(2, 1fr); } }

.cc-univers a {
	display: block;
	background: var(--cc-gris);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
	padding: 1.4em 1.2em;
	text-decoration: none;
	color: var(--cc-encre);
	font-weight: 650;
	font-size: .97rem;
	transition: border-color .15s ease, background .15s ease;
}
@media (hover: hover) {
	.cc-univers a:hover {
		background: var(--cc-bleu-pale);
		border-color: var(--cc-bleu);
		color: var(--cc-bleu-fonce);
	}
}
.cc-univers a small {
	display: block;
	font-weight: 400;
	color: var(--cc-encre-douce);
	font-size: .84rem;
	margin-top: .3em;
}

/* ==========================================================================
   7. Pied de page
   ========================================================================== */
.site-footer {
	background: var(--cc-encre);
	color: rgba(255,255,255,.72);
	padding-top: 2.8em;
}
.site-footer h2, .site-footer h3, .site-footer .widget-title {
	color: var(--cc-blanc);
	font-size: 1rem;
	letter-spacing: 0;
}
.site-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.site-footer a:hover { color: var(--cc-blanc); text-decoration: underline; }

.cc-pied-legal {
	border-top: 1px solid rgba(255,255,255,.14);
	margin-top: 2em;
	padding: 1.4em 0;
	font-size: .84rem;
	line-height: 1.7;
}
.cc-pied-legal nav a { margin-right: 1.2em; display: inline-block; }

/* Zones tactiles de 44 px minimum, recommandation Apple, sans décaler le rendu */
@media (max-width: 767px) {
	.site-footer a, .cc-pied-legal nav a {
		display: inline-block;
		min-height: 44px;
		line-height: 44px;
	}
}

/* ==========================================================================
   8. Divers
   ========================================================================== */
.woocommerce .quantity .qty { width: 4.2em; }

/* Storefront affiche un fil d'Ariane utile, on le rend discret */
.woocommerce-breadcrumb {
	font-size: .86rem;
	color: var(--cc-encre-douce);
}
.woocommerce-breadcrumb a { color: var(--cc-encre-douce); }
.woocommerce-breadcrumb a:hover { color: var(--cc-bleu); }

/* ==========================================================================
   9. Corrections de Storefront constatées au rendu
   ========================================================================== */

/* Storefront pose 4.235801em (68 px) de marge sous l'en-tête, via des
   sélecteurs plus spécifiques que « .site-header » seul. On reprend les siens
   à l'identique : notre feuille se charge après, elle gagne à spécificité
   égale — pas besoin de !important. */
.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header,
.no-wc-breadcrumb .site-header,
.site-header { margin-bottom: 0; }
.cc-bandeau { margin-bottom: 2.2em; }

/* Le titre de page « Accueil » répète le hero juste en dessous. */
.home .entry-header,
.home h1.entry-title,
.home .page-title { display: none; }

/* Storefront souligne les liens du contenu ; nos boutons n'en sont pas. */
.cc-accueil a.cc-cta,
.cc-accueil a.cc-cta:hover,
.cc-final a.cc-cta,
.cc-univers a,
.cc-univers a:hover { text-decoration: none; }

/* Sélecteur de langue : placé dans l'en-tête plutôt qu'en flottant, où il
   recouvrait la barre d'icônes du bas sur téléphone. */
.cc-langues {
	position: absolute;
	top: 1.2em;
	right: 0;
	z-index: 5;
}
/* TranslatePress génère une ancre en flux et un calque positionné par-dessus.
   Habiller ce calque nous-mêmes dessinait une boîte vide sous le sélecteur :
   on se limite au placement et on laisse le module gérer son apparence. */
.cc-langues .trp-language-switcher { margin: 0; }
.site-header .col-full { position: relative; }

@media (max-width: 767px) {
	/* « static » laissait le calque de TranslatePress s'ancrer sur l'en-tête
	   entier : il venait recouvrir le nom de la boutique. En « relative » il
	   s'ancre sur son propre bloc, qui reste dans le flux. */
	.cc-langues {
		position: relative;
		top: auto;
		right: auto;
		/* Le nom de la boutique est en float chez Storefront : sans clear, notre
		   bloc démarre en haut du conteneur et le recouvre. */
		clear: both;
		display: block;
		margin: .9em 0 .2em;
		text-align: left;
	}
}

/* Le champ de recherche de Storefront descend trop bas sur mobile. */
@media (max-width: 767px) {
	.site-header { padding-bottom: .8em; }
}