/*
Theme Name: Confort Cars
Theme URI: https://shop.piksite.fr
Description: Thème enfant de Storefront pour Confort Cars — page de vente mono-produit. Direction claire : blanc, encre noire, prix rouge.
Author: Confort Cars
Template: storefront
Version: 4.9.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.
   ========================================================================== */
/* Polices auto-hebergees. Deux fichiers variables suffisent : Google renvoie
   le meme fichier pour chaque graisse demandee, en telecharger sept revenait a
   servir 386 ko au lieu de 113. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
	/* Direction claire : blanc, gris, encre presque noire. Une seule couleur
	   vive, le rouge du prix. Tout le reste est neutre, comme sur les grandes
	   boutiques d'accessoires : c'est la photo produit qui doit ressortir. */
	--cc-fond: #ffffff;           /* fond general */
	--cc-fond-2: #f6f6f6;         /* sections alternees */
	--cc-carte: #ffffff;          /* cartes et blocs */
	--cc-carte-haute: #f2f2f2;    /* carte au survol, fond d'image, champs */
	--cc-encre: #111111;          /* texte principal */
	--cc-encre-douce: #6b6b6b;    /* texte secondaire, 5,7:1 sur blanc */
	--cc-bord: #e4e4e4;
	--cc-bord-clair: #d4d4d4;

	/* L'action principale n'est pas coloree : elle est noire. Les anciens noms
	   « ambre » et « bleu » restent, remappes -- le reste de la feuille et le
	   PHP s'y referent, les renommer partout n'apporterait rien. */
	--cc-ambre: #111111;
	--cc-ambre-fonce: #000000;
	--cc-ambre-pale: #f2f2f2;     /* fond d'encart teinte */

	--cc-bleu: #111111;
	--cc-bleu-fonce: #333333;
	--cc-bleu-pale: #f2f2f2;

	/* Le rouge ne sert qu'au prix et aux rares mentions de promotion. */
	--cc-prix: #cc1e1d;

	/* Vert de reassurance : encart livraison et coches. */
	--cc-vert: #4a7c4a;
	--cc-vert-pale: #ebede8;

	/* Gris fonce du bandeau d'annonce et du pied de page. */
	--cc-sombre: #333333;

	--cc-blanc: #ffffff;

	/* Anciens noms conserves : le reste de la feuille et le PHP s'y referent.
	   Les remapper ici evite de reecrire chaque regle. */
	--cc-creme: var(--cc-fond);
	--cc-creme-fonce: var(--cc-fond-2);
	--cc-gris: var(--cc-carte);

	--cc-rayon: 8px;
	--cc-rayon-large: 12px;
	--cc-rayon-pilule: 999px;     /* boutons */
	/* Sur fond clair, la profondeur vient d'un trait de bordure, pas d'une
	   ombre : une ombre marquee ferait « modele de theme ». */
	--cc-ombre: 0 1px 2px rgba(0,0,0,.06);
	--cc-ombre-forte: 0 4px 16px rgba(0,0,0,.10);
	/* Une seule famille, comme sur les boutiques dont on reprend la mise en
	   page : une grotesque neutre en gras pour les titres. Space Grotesk,
	   trop typee, n'est plus chargee. */
	--cc-titre: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--cc-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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-carte);
	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-carte);
	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-carte);
	color: var(--cc-encre-douce);
	font-size: .86rem;
	text-align: center;
	padding: .6em 1em;
	letter-spacing: .01em;
}
.cc-bandeau strong { color: var(--cc-encre); }
.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-fond-2) 0%, var(--cc-fond) 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-ambre-pale);
	border: 1px solid var(--cc-ambre-fonce);
	color: var(--cc-ambre);
	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-carte);
	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-carte);
	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-encre); color: var(--cc-fond); box-shadow: none; }
.cc-final .cc-cta:hover { background: var(--cc-blanc); color: var(--cc-fond); }

/* ==========================================================================
   5. Grille produits et fiche produit
   ========================================================================== */
ul.products li.product {
	background: var(--cc-carte);
	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-carte);
}

.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-carte);
	border-bottom-color: var(--cc-carte);
}

.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; }

/* Le selecteur est cale en absolu a droite de la rangee de navigation, la ou
   Storefront pose aussi le panier : son panneau blanc venait recouvrir la fin
   du badge « 0 articles ». On lui reserve sa gouttiere plutot que de le
   deplacer -- il reste ainsi a l'aplomb du champ de recherche, la ou l'oeil
   le cherche. Desktop seulement : sous 768 px le panier de l'en-tete est
   masque et le selecteur revient dans le flux. */
@media (min-width: 768px) {
	/* Selecteur long a dessein : Storefront cale « margin-right: 0 » via
	   « .woocommerce-active .site-header .site-header-cart », qui l'emporte sur
	   une regle a deux classes. Sa largeur fixe de 21,7 % passe en « auto » :
	   le bloc n'a plus a reserver une colonne entiere pour trois elements. */
	.woocommerce-active .site-header .storefront-primary-navigation .site-header-cart {
		width: auto;
		margin-right: 10.5em;
	}
	/* Storefront partage cette rangee en 73,9 % pour le menu et 21,7 % pour le
	   panier, soit 100 % : la gouttiere ci-dessus faisait deborder le panier,
	   qui tombait alors sur sa propre ligne. Le menu n'occupe reellement que
	   la moitie de la largeur, on lui en rend une part. */
	.woocommerce-active .site-header .storefront-primary-navigation .main-navigation { width: 62%; }
}

@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; }
}

/* ==========================================================================
   10. Univers annoncés mais pas encore ouverts
   Une catégorie vide reste affichée — elle décrit la gamme à venir — mais
   sans lien : cliquer pour arriver sur « aucun produit » coûte plus de
   confiance que la promesse n'en apporte.
   ========================================================================== */
.cc-univers-bientot {
	display: block;
	position: relative;
	background: var(--cc-carte);
	border: 1px dashed var(--cc-bord);
	border-radius: var(--cc-rayon);
	padding: 1.4em 1.2em;
	color: var(--cc-encre-douce);
	font-weight: 650;
	font-size: .97rem;
}
.cc-univers-bientot small {
	display: block;
	font-weight: 400;
	font-size: .84rem;
	margin-top: .3em;
}
.cc-univers-bientot em {
	display: inline-block;
	margin-top: .7em;
	font-style: normal;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cc-bleu);
	background: var(--cc-bleu-pale);
	border-radius: 999px;
	padding: .2em .7em;
}

/* ==========================================================================
   11. Univers éditorial : cartes de conseils et pied d'article
   ========================================================================== */
.cc-conseils a { background: var(--cc-carte); box-shadow: var(--cc-ombre); }

.cc-encart--article {
	margin-top: 2.6em;
}
.cc-encart--article .cc-cta { margin-top: .6em; }

/* Les articles sont faits pour être lus : on borne la longueur de ligne. */
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > h2,
.single-post .entry-content > h3 {
	max-width: 40em;
}
.single-post .entry-content h2 {
	margin-top: 1.8em;
	font-size: 1.35rem;
	color: var(--cc-bleu-fonce);
}
.single-post .entry-content li { margin-bottom: .5em; }
.cc-chapo { font-size: 1.12rem; color: var(--cc-encre-douce); line-height: 1.65; }

/* ==========================================================================
   12. Fiche produit : blocs d'aide à la décision
   ========================================================================== */
.cc-bloc-produit {
	margin: 3em 0;
	padding-top: 2.2em;
	border-top: 1px solid var(--cc-bord);
	clear: both;
}
.cc-bloc-produit h2 {
	font-size: 1.35rem;
	color: var(--cc-bleu-fonce);
	margin-bottom: .9em;
}

.cc-cas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1em;
}
@media (max-width: 900px) { .cc-cas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cc-cas { grid-template-columns: 1fr; } }
.cc-cas > div {
	background: var(--cc-gris);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
	padding: 1.2em;
}
.cc-cas h3 {
	font-size: 1rem;
	margin-bottom: .4em;
	color: var(--cc-encre);
}
.cc-cas p { font-size: .9rem; color: var(--cc-encre-douce); margin: 0; }

.cc-tableau {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
}
.cc-tableau th,
.cc-tableau td {
	text-align: left;
	padding: .8em .9em;
	border-bottom: 1px solid var(--cc-bord);
	vertical-align: top;
}
.cc-tableau thead th {
	background: var(--cc-bleu-pale);
	color: var(--cc-bleu-fonce);
	font-size: .82rem;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.cc-note { font-size: .86rem; color: var(--cc-encre-douce); margin-top: .8em; }

/* Sur téléphone, un tableau à trois colonnes devient illisible : chaque ligne
   se replie en bloc et reprend l'intitulé de colonne. */
@media (max-width: 600px) {
	.cc-tableau thead { display: none; }
	.cc-tableau tr {
		display: block;
		border: 1px solid var(--cc-bord);
		border-radius: var(--cc-rayon);
		margin-bottom: .8em;
		padding: .4em .2em;
	}
	.cc-tableau td { display: block; border: 0; padding: .35em .9em; }
	.cc-tableau td:nth-child(2)::before { content: 'Pour qui : '; color: var(--cc-encre-douce); }
	.cc-tableau td:nth-child(3)::before { content: 'Couvre : '; color: var(--cc-encre-douce); }
}

/* ==========================================================================
   13. Page guide
   ========================================================================== */
.cc-hero--guide { padding-bottom: 1.4em; }

.cc-zones {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1em;
}
@media (max-width: 900px) { .cc-zones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cc-zones { grid-template-columns: 1fr; } }
.cc-zones > div {
	background: var(--cc-carte);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
	padding: 1.3em;
	box-shadow: var(--cc-ombre);
}
.cc-zones h3 {
	font-size: 1.05rem;
	color: var(--cc-bleu-fonce);
	margin-bottom: .5em;
}
.cc-zones p { font-size: .92rem; margin-bottom: .6em; }
.cc-zones p:last-child { margin-bottom: 0; color: var(--cc-encre-douce); }

.cc-section--pale {
	background: var(--cc-bleu-pale);
	border-radius: var(--cc-rayon);
	padding: 1.8em;
}
.cc-intro--large {
	font-size: 1.25rem;
	font-weight: 650;
	color: var(--cc-bleu-fonce);
	line-height: 1.5;
}
.cc-guide a.cc-cta,
.cc-guide a.cc-cta:hover,
.cc-guide .cc-univers a,
.cc-guide .cc-univers a:hover { text-decoration: none; }

.cc-lien-guide {
	margin-top: 1.2em;
	font-weight: 650;
}
.cc-lien-guide a { color: var(--cc-bleu); }

/* ==========================================================================
   14. Corrections constatees au rendu (17/08)
   ========================================================================== */

/* Storefront cible ses liens de pied de page avec « a:not(.button) », plus
   specifique que notre « a » : ses couleurs sombres restaient sur notre fond
   sombre. On reprend son selecteur exact. */
.site-footer a:not(.button):not(.components-button) { color: rgba(255,255,255,.86); }
.site-footer a:not(.button):not(.components-button):hover { color: var(--cc-blanc); }
.site-info { display: none; }

/* Les cartes d'univers et de conseils sont des blocs cliquables, pas des liens
   dans une phrase : Storefront souligne tous les liens du contenu. */
.cc-univers a,
.cc-univers a:hover,
.cc-conseils a,
.cc-conseils a:hover,
.entry-content .cc-univers a,
.entry-content .cc-univers a:hover { text-decoration: none; }

/* Avec un catalogue court, la grille en quarts laissait une carte minuscule
   perdue a gauche. En flex, une carte seule occupe un tiers et reste lisible ;
   la grille se remplit normalement quand le catalogue s'etoffe. */
.cc-accueil ul.products,
.cc-guide ul.products {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em;
	margin: 0;
}
.cc-accueil ul.products li.product,
.cc-guide ul.products li.product {
	width: calc(33.333% - .8em) !important;
	margin: 0 !important;
	clear: none !important;
	float: none !important;
}
@media (max-width: 900px) {
	.cc-accueil ul.products li.product,
	.cc-guide ul.products li.product { width: calc(50% - .6em) !important; }
}
@media (max-width: 520px) {
	.cc-accueil ul.products li.product,
	.cc-guide ul.products li.product { width: 100% !important; }
}

/* Storefront souligne tout lien de contenu via « .hentry .entry-content a ».
   Nos cartes sont des blocs cliquables : on reprend son selecteur en le
   prefixant, plutot qu'un !important. */
.hentry .entry-content .cc-univers a,
.hentry .entry-content .cc-univers a:hover,
.hentry .entry-content .cc-conseils a,
.hentry .entry-content .cc-conseils a:hover,
.hentry .entry-content a.cc-cta,
.hentry .entry-content a.cc-cta:hover { text-decoration: none; }

/* Le hero du guide porte deja le titre : celui du theme faisait doublon. */
.cc-titre-dans-le-contenu .entry-header,
.cc-titre-dans-le-contenu h1.entry-title { display: none; }

/* Meta d'article : la boutique n'a qu'un auteur, le nommer n'apprend rien et
   Storefront laissait « par — » quand le nom public est vide. */
.hentry .entry-header .post-author,
.hentry .entry-header .post-comments { display: none; }

/* ==========================================================================
   15. Direction editoriale
   Une page de vente a un seul produit ne peut pas compter sur la densite de
   son catalogue : elle se joue sur le contraste, l'air et le rythme. Titres en
   Space Grotesk, texte en Inter, fond sombre pour que la photo produit -- prise
   sur fond noir -- se fonde dans la page au lieu d'y etre posee.
   ========================================================================== */

body {
	font-family: var(--cc-texte);
	font-size: 17px;
	line-height: 1.65;
	color: var(--cc-encre);
	background-color: var(--cc-creme);
	-webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea,
.site-content,
.woocommerce-page { font-family: var(--cc-texte); }

h1, h2, h3, h4,
.site-title,
.entry-title,
.cc-hero h1,
.woocommerce div.product .product_title {
	font-family: var(--cc-titre);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--cc-encre);
}

/* Echelle typographique : chaque niveau se distingue nettement du suivant,
   sinon la hierarchie repose sur la couleur seule. */
.cc-hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); }
.cc-section h2,
.cc-final h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: .5em; }
.woocommerce div.product .product_title { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.cc-bloc-produit h2 { font-size: 1.6rem; }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }

.cc-surtitre {
	font-family: var(--cc-texte);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--cc-ambre);
}

.cc-chapo,
.cc-intro {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--cc-encre-douce);
	max-width: 40em;
}

/* --------------------------------------------------------------------------
   En-tete
   -------------------------------------------------------------------------- */
.site-header {
	background: var(--cc-creme) !important;
	border-bottom: 1px solid var(--cc-bord);
	padding-top: 1.4em;
	padding-bottom: 1.2em;
}
.site-header .site-title,
.site-header .beta.site-title a {
	font-family: var(--cc-titre);
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: -.02em;
	color: var(--cc-encre) !important;
}
.site-header .site-description {
	font-size: .82rem;
	color: var(--cc-encre-douce);
	letter-spacing: .01em;
}
.main-navigation ul.menu > li > a {
	font-size: .95rem;
	font-weight: 500;
	color: var(--cc-encre) !important;
	padding-left: .9em;
	padding-right: .9em;
	border-radius: 8px;
	transition: background .15s ease, color .15s ease;
}
@media (hover: hover) {
	.main-navigation ul.menu > li > a:hover { background: var(--cc-creme-fonce); }
}
.main-navigation ul.menu > li.current-menu-item > a { color: var(--cc-bleu) !important; }

/* La recherche de Storefront est un gros champ gris : on l'allege. */
.site-header .site-search .widget_product_search input[type="search"] {
	background: var(--cc-carte);
	border: 1px solid var(--cc-bord);
	border-radius: 999px;
	padding: .6em 1.1em;
	font-size: 15px;
}

/* Bandeau de confiance : moins de contraste brut, plus de tenue. */
.cc-bandeau {
	background: var(--cc-carte);
	border-top: 1px solid var(--cc-bord);
	border-bottom: 1px solid var(--cc-bord);
	color: var(--cc-encre-douce);
	font-size: .84rem;
	letter-spacing: .01em;
	padding: .72em 1em;
}

/* --------------------------------------------------------------------------
   Hero et vitrine produit
   -------------------------------------------------------------------------- */
.cc-hero {
	background: transparent;
	padding: 3.2em 0 2.4em;
	text-align: left;
}
.cc-hero .cc-chapo { margin-left: 0; margin-right: 0; }
.cc-actions { display: flex; flex-wrap: wrap; gap: .8em; margin-top: 1.8em; }

.cc-vitrine {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5em, 4vw, 3.4em);
	align-items: center;
	background: var(--cc-carte);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon-large);
	padding: clamp(1.4em, 3vw, 2.6em);
	box-shadow: var(--cc-ombre);
	margin-bottom: 4em;
}
@media (max-width: 800px) { .cc-vitrine { grid-template-columns: 1fr; } }

.cc-vitrine__image {
	border-radius: var(--cc-rayon);
	overflow: hidden;
	background: var(--cc-creme-fonce);
	aspect-ratio: 1 / 1;
}
.cc-vitrine__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
@media (hover: hover) {
	.cc-vitrine:hover .cc-vitrine__image img { transform: scale(1.03); }
}
.cc-vitrine h2 {
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	margin: .35em 0 .5em;
}
.cc-vitrine__prix {
	font-family: var(--cc-titre);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--cc-encre);
	margin: .2em 0 .9em;
}
.cc-vitrine__prix small {
	font-family: var(--cc-texte);
	font-size: .82rem;
	font-weight: 400;
	color: var(--cc-encre-douce);
	margin-left: .5em;
}
.cc-vitrine ul {
	list-style: none;
	margin: 0 0 1.6em;
	padding: 0;
}
.cc-vitrine ul li {
	position: relative;
	padding-left: 1.7em;
	margin-bottom: .55em;
	font-size: .97rem;
	color: var(--cc-encre-douce);
}
/* Coche dessinee en CSS : pas d'emoji, pas de requete supplementaire. */
.cc-vitrine ul li::before {
	content: "";
	position: absolute;
	left: .1em;
	top: .45em;
	width: .52em;
	height: .28em;
	border-left: 2px solid var(--cc-vert);
	border-bottom: 2px solid var(--cc-vert);
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.cc-cta,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	font-family: var(--cc-texte);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .005em;
	border-radius: 999px;
	padding: .85em 1.7em;
	background: var(--cc-ambre);
	color: var(--cc-blanc);
	border: 0;
	box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px rgba(255,106,19,.35);
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
	.cc-cta:hover,
	.woocommerce a.button.alt:hover,
	.woocommerce button.button.alt:hover {
		background: var(--cc-ambre-fonce);
		transform: translateY(-1px);
		box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 12px 26px rgba(255,106,19,.45);
	}
}
.cc-cta:focus-visible,
.woocommerce button.button.alt:focus-visible {
	outline: 3px solid var(--cc-bleu);
	outline-offset: 3px;
}
.cc-cta--fantome {
	background: transparent;
	color: var(--cc-encre);
	border: 1px solid var(--cc-bord);
	box-shadow: none;
}
@media (hover: hover) {
	.cc-cta--fantome:hover {
		background: var(--cc-carte);
		border-color: var(--cc-encre-douce);
		color: var(--cc-encre);
		box-shadow: var(--cc-ombre);
	}
}

/* --------------------------------------------------------------------------
   Sections, cartes, encarts
   -------------------------------------------------------------------------- */
.cc-section { margin-bottom: 4.2em; }
.cc-section > h2 { position: relative; padding-top: .6em; }
.cc-section > h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.4em;
	height: 3px;
	border-radius: 2px;
	background: var(--cc-ambre);
}

.cc-reassurance > div,
.cc-univers a,
.cc-univers-bientot,
.cc-cas > div,
.cc-zones > div {
	background: var(--cc-carte);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover: hover) {
	.cc-univers a:hover,
	.cc-conseils a:hover {
		transform: translateY(-2px);
		box-shadow: var(--cc-ombre);
		border-color: var(--cc-bleu);
		background: var(--cc-carte);
	}
}
.cc-univers-bientot { background: transparent; border-style: dashed; box-shadow: none; }

.cc-encart {
	background: var(--cc-creme-fonce);
	border: 0;
	border-left: 3px solid var(--cc-ambre);
	border-radius: var(--cc-rayon);
	padding: 1.5em 1.6em;
}

.cc-final {
	background: var(--cc-bleu-fonce);
	border-radius: var(--cc-rayon-large);
	padding: clamp(2em, 5vw, 3.2em);
	text-align: center;
}
.cc-final h2 { color: var(--cc-blanc); }
.cc-final p { color: rgba(255,255,255,.86); max-width: 34em; margin-left: auto; margin-right: auto; }

.cc-faq details {
	background: var(--cc-carte);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
	margin-bottom: .7em;
	padding: .1em .4em;
}
.cc-faq summary {
	font-weight: 600;
	font-size: 1rem;
	padding: 1em 1.1em;
	cursor: pointer;
}
.cc-faq details[open] { box-shadow: var(--cc-ombre); }

/* --------------------------------------------------------------------------
   Fiche produit
   -------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: var(--cc-rayon); }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--cc-titre);
	font-weight: 600;
	font-size: 1.75rem;
	color: var(--cc-encre);
}
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 1.05rem;
	color: var(--cc-encre-douce);
	border-left: 3px solid var(--cc-ambre);
	padding-left: 1.1em;
	margin-bottom: 1.6em;
}
.cc-fiche-reassurance {
	background: var(--cc-carte);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
}
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--cc-titre) !important;
	font-weight: 600;
	font-size: 1.02rem !important;
	letter-spacing: -.01em;
}
ul.products li.product img { border-radius: var(--cc-rayon); }

/* --------------------------------------------------------------------------
   Articles
   -------------------------------------------------------------------------- */
.single-post .entry-content > p { font-size: 1.06rem; }
.single-post .entry-content h2 {
	font-family: var(--cc-titre);
	font-size: 1.55rem;
	color: var(--cc-encre);
	margin-top: 2em;
}
.hentry .entry-header .posted-on {
	font-size: .82rem;
	color: var(--cc-encre-douce);
	letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
	background: var(--cc-encre);
	color: rgba(255,255,255,.7);
}
.cc-pied-legal p { color: rgba(255,255,255,.55); }

/* Mouvement reduit : on desactive les deplacements, pas les changements d'etat. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.cc-vitrine:hover .cc-vitrine__image img,
	.cc-cta:hover { transform: none; }
}


/* ==========================================================================
   16. Passage en sombre : ce que la bascule des jetons ne suffisait pas a regler
   ========================================================================== */

/* Un titre de produit n'est pas un lien dans une phrase. Souligne et colore,
   il ressemblait a une URL brute -- d'autant plus visible sur fond sombre. */
.cc-vitrine h2 a,
.cc-vitrine h2 a:hover,
.cc-vitrine h2 a:visited {
	color: var(--cc-encre);
	text-decoration: none;
}
@media (hover: hover) {
	.cc-vitrine h2 a:hover { color: var(--cc-ambre); }
}

/* Le fond d'attente derriere la photo doit etre plus sombre qu'elle, sinon
   il forme un cadre clair le temps du chargement. */
.cc-vitrine__image { background: var(--cc-fond); }

/* Champs de saisie : sur fond sombre, un champ sans surface propre disparait.
   Storefront les laisse en blanc systeme. */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select,
.woocommerce-product-search input[type="search"],
.site-header .widget_product_search input[type="search"] {
	background: var(--cc-carte-haute);
	border: 1px solid var(--cc-bord-clair);
	color: var(--cc-encre);
	border-radius: 10px;
}
input::placeholder,
textarea::placeholder { color: var(--cc-encre-douce); opacity: 1; }
input:focus,
textarea:focus,
select:focus {
	border-color: var(--cc-ambre);
	outline: 2px solid rgba(255,106,19,.25);
	outline-offset: 1px;
}

/* Selecteur de langue TranslatePress : il pose son propre fond blanc. */
.cc-langues .trp-language-switcher > div,
.cc-langues .trp-ls-shortcode-current-language,
.cc-langues .trp-ls-shortcode-language,
.cc-langues select {
	background: var(--cc-carte-haute) !important;
	border-color: var(--cc-bord-clair) !important;
	color: var(--cc-encre) !important;
}
.cc-langues a { color: var(--cc-encre) !important; }

/* Liens de contenu : le bleu clair reste lisible, mais le souligne permanent
   hache les paragraphes. On le garde au survol seulement. */
.hentry .entry-content a:not(.button):not(.cc-cta) { text-decoration: none; }
@media (hover: hover) {
	.hentry .entry-content a:not(.button):not(.cc-cta):hover { text-decoration: underline; }
}

/* Tableaux et separateurs herites de Storefront : bordures pensees clair. */
table, th, td { border-color: var(--cc-bord); }
hr { border-color: var(--cc-bord); }

/* ==========================================================================
   17. Fiche produit en page de vente
   La fiche n'est plus une carte d'identite suivie d'onglets : c'est la page
   qui doit repondre a tout ce qu'on se demande avant de payer. La galerie
   reste collee a l'ecran, la colonne de droite deroule le detail, et les
   sections pleine largeur reprennent la main sous le bloc d'achat.
   ========================================================================== */

/* Storefront pose la galerie et le resume en flottants a largeur fixe. Une
   grille les remplace : c'est elle qui permet de coller la galerie, et elle
   rend aux sections du bas toute la largeur. */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	column-gap: clamp(2em, 4vw, 3.6em);
	align-items: start;
}
/* Storefront pose un clearfix sur ce bloc. En grille, ::before et ::after
   deviennent de vrais elements : ils occupaient la premiere case et
   decalaient la galerie d'une colonne. */
.single-product div.product::before,
.single-product div.product::after { display: none; }
/* Placement explicite : la galerie a gauche, l'achat a droite, quoi que le
   flux automatique decide. */
.single-product div.product > .cc-colonne-visuels { grid-column: 1; grid-row: 1; }
.single-product div.product > .summary { grid-column: 2; grid-row: 1; }
/* La cage s'etire sur toute la hauteur de la ligne : c'est elle qui donne sa
   course au collage, et surtout sa limite. */
.single-product div.product > .cc-colonne-visuels { align-self: stretch; }
.single-product div.product > .cc-colonne-visuels,
.single-product div.product > .summary {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}
.cc-colonne-visuels > .woocommerce-product-gallery {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}
/* Storefront pose « overflow-x: hidden » sur body ET sur .hfeed.site. Un
   overflow autre que « visible » fait de l'element un conteneur de
   defilement : « position: sticky » se calait donc sur .site au lieu de la
   fenetre, et la regle ci-dessous ne collait rien du tout depuis le debut.
   « clip » coupe le meme debordement horizontal sans creer ce conteneur --
   la barre horizontale que les bandes pleine largeur avaient coutee reste
   donc coupee, et le collage fonctionne enfin. */
body,
.hfeed.site { overflow-x: clip; }

/* Meme piege, un cran plus bas et c'est celui qui bloquait vraiment :
   Storefront pose « overflow: hidden » sur .single-product div.product, le
   parent direct de la galerie. C'etait un clearfix du temps des flottants,
   sans objet depuis que ce bloc est une grille. Il faisait de lui le
   conteneur de defilement de reference, donc la galerie « collait » a un
   bloc qui ne defile pas -- autant dire nulle part. */
.single-product div.product { overflow: clip; }

/* C'est la galerie qui reste a l'ecran pendant qu'on lit la colonne d'achat.
   Le sens du collage n'est pas un gout : « sticky » n'a de course que si la
   colonne d'en face est plus haute. La galerie fait environ 540 px (une grande
   photo et ses vignettes) contre 1 827 px pour la colonne d'achat -- c'est
   donc elle qui colle, et elle seule le peut.
   Le decalage tient compte de la barre de marque, en « fixed », qui se revele
   au defilement : sans lui la photo collee passait dessous, rognee par le
   haut. */
/* Selecteur long a dessein : Storefront cale « position: relative » via
   « .single-product div.product .woocommerce-product-gallery », qui l'emporte
   sur deux classes -- le collage etait ecrit sans jamais s'appliquer. */
.single-product div.product .cc-colonne-visuels > .woocommerce-product-gallery {
	position: sticky;
	top: calc(var(--cc-barre-hauteur, 50px) + 1.2em);
}
/* Tout ce qui n'est ni la colonne des visuels ni le resume passe sous les
   deux colonnes. */
.single-product div.product > *:not(.cc-colonne-visuels):not(.summary) {
	grid-column: 1 / -1;
}
@media (max-width: 860px) {
	.single-product div.product { display: block; }
	.single-product div.product .cc-colonne-visuels > .woocommerce-product-gallery { position: static; }
	.single-product div.product > .summary { margin-top: 2em !important; }
}

/* --------------------------------------------------------------------------
   Colonne de droite : le detail sous le bouton d'achat
   -------------------------------------------------------------------------- */
.cc-colonne-details { margin-top: 2.4em; }

.cc-colonne-accroche {
	font-family: var(--cc-titre);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cc-encre);
	margin-bottom: 1.6em;
}

/* Chaque bloc de verification est un <details>. Le titre reste la meme
   etiquette en petites capitales qu'avant, mais il devient cliquable : le
   trait de separation sert desormais de ligne de depliage. */
.cc-colonne-bloc { margin-bottom: 0; }
/* Les blocs s'empilent en une seule liste de lignes depliables : le premier
   ferme la liste par le haut, sinon elle commencerait sur un trait manquant. */
.cc-colonne-details > .cc-colonne-bloc:first-of-type > summary { border-top: 1px solid var(--cc-bord); }
.cc-colonne-bloc > summary {
	font-family: var(--cc-titre);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cc-encre-douce);
	margin: 0;
	padding: .95em 1.8em .95em 0;
	border-bottom: 1px solid var(--cc-bord);
	cursor: pointer;
	list-style: none;
	position: relative;
	transition: color .15s ease;
}
.cc-colonne-bloc > summary::-webkit-details-marker { display: none; }
/* Le chevron reprend le signe des accordeons de FAQ : meme geste, meme dessin
   d'un bout a l'autre du site. */
.cc-colonne-bloc > summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5em;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--cc-bleu);
	line-height: 1;
}
.cc-colonne-bloc[open] > summary::after { content: "\2013"; }
.cc-colonne-bloc > summary:hover { color: var(--cc-encre); }
.cc-colonne-bloc > summary:focus-visible {
	outline: 2px solid var(--cc-bleu);
	outline-offset: 3px;
	border-radius: 3px;
}
/* Le contenu deplie respire sous sa ligne de titre, et retrouve la respiration
   qui separait les blocs avant qu'ils ne se replient. */
.cc-colonne-bloc[open] > :not(summary) { margin-top: .9em; }
.cc-colonne-bloc[open] { padding-bottom: 1.2em; }
.cc-colonne-bloc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .95rem;
}
.cc-colonne-bloc li {
	position: relative;
	padding-left: 1.3em;
	margin-bottom: .55em;
	color: var(--cc-encre-douce);
}
.cc-colonne-bloc li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--cc-ambre);
}
.cc-colonne-bloc--coches li::before {
	content: "\2713";
	top: 0;
	width: auto;
	height: auto;
	background: none;
	color: var(--cc-vert);
	font-weight: 700;
}

/* Specifications : intitule et valeur sur la meme ligne tant que la place le
   permet, l'un sous l'autre des que la colonne se resserre. */
.cc-specs {
	display: grid;
	grid-template-columns: minmax(6.5em, auto) 1fr;
	column-gap: 1em;
	margin: 0;
	font-size: .95rem;
}
.cc-specs dt {
	font-weight: 600;
	color: var(--cc-encre);
	margin: 0 0 .6em;
}
.cc-specs dd {
	margin: 0 0 .6em;
	color: var(--cc-encre-douce);
}
@media (max-width: 420px) {
	.cc-specs { grid-template-columns: 1fr; }
	.cc-specs dt { margin-bottom: .1em; }
}

/* L'encart livraison garde son fond, mais le titre reste une ligne de
   depliage : on decale le fond a l'interieur plutot que d'encadrer un bloc
   ferme qui ne montrerait qu'un titre. */
.cc-colonne-bloc--encadre { margin-top: .6em; }
.cc-colonne-bloc--encadre > summary {
	background: var(--cc-carte);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
	padding-left: 1.1em;
	padding-right: 2.6em;
}
.cc-colonne-bloc--encadre > summary::after { right: 1.1em; }
.cc-colonne-bloc--encadre[open] > summary {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: transparent;
}
.cc-colonne-bloc--encadre[open] > .cc-colonne-bloc__corps {
	background: var(--cc-carte);
	border: 1px solid var(--cc-bord);
	border-top: 0;
	border-bottom-left-radius: var(--cc-rayon);
	border-bottom-right-radius: var(--cc-rayon);
	margin-top: 0;
	padding: 1.1em 1.1em .45em;
}
.cc-colonne-bloc--encadre[open] { padding-bottom: 0; }
/* Le premier paragraphe ajoutait sa marge au calage de l'encart : deux fois
   plus d'air sous le titre qu'au-dessus du bas de bloc. */
.cc-colonne-bloc__corps > p:first-child { margin-top: 0; }
.cc-colonne-bloc--encadre p {
	font-size: .92rem;
	color: var(--cc-encre-douce);
	margin-bottom: .7em;
}
.cc-colonne-bloc--encadre strong { color: var(--cc-encre); }

/* --------------------------------------------------------------------------
   Sections pleine largeur sous le bloc d'achat
   -------------------------------------------------------------------------- */
.cc-bloc-produit {
	margin-top: 3.4em;
	padding-top: 3em;
	border-top: 1px solid var(--cc-bord);
}
.cc-bloc-produit > h2 {
	font-family: var(--cc-titre);
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	margin: 0 0 1.2em;
}

.cc-description__texte { max-width: 62ch; }
.cc-description__texte h3 {
	font-family: var(--cc-titre);
	font-size: 1.12rem;
	margin: 1.8em 0 .5em;
}
.cc-description__texte h3:first-child { margin-top: 0; }

/* Grille des visuels : trois formats, trois teintes. Les legendes disent ce
   que la photo montre, elles ne vendent rien. */
.cc-visuels__chapeau {
	max-width: 60ch;
	color: var(--cc-encre-douce);
	font-size: .95rem;
	margin-top: -.6em;
	margin-bottom: 2em;
}
.cc-visuels__ligne { margin-bottom: 2.2em; }
.cc-visuels__ligne h3 {
	font-family: var(--cc-titre);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cc-encre-douce);
	margin: 0 0 .8em;
}
.cc-visuels__images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em;
}
.cc-visuels__images figure {
	margin: 0;
	background: var(--cc-carte);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
	overflow: hidden;
}
.cc-visuels__images img {
	display: block;
	width: 100%;
	height: auto;
}
.cc-visuels__images figcaption {
	padding: .6em .9em .7em;
	font-size: .85rem;
	color: var(--cc-encre-douce);
}
/* Sur telephone on garde les trois teintes cote a cote : la grille sert
   justement a les comparer. Une image passee en pleine largeur ecrasait les
   deux autres et cassait la comparaison. */
@media (max-width: 560px) {
	.cc-visuels__images { gap: .45em; }
	.cc-visuels__images figcaption { padding: .4em .5em .45em; font-size: .74rem; }
}

/* Engagements de la boutique : huit promesses courtes, verifiables, alignees
   sur les CGV. Un picto dessine vaut mieux qu'un emoji, qui change de dessin
   sur chaque appareil. */
.cc-engagements__grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.6em 1.4em;
}
@media (max-width: 900px) { .cc-engagements__grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cc-engagements__grille { grid-template-columns: 1fr; } }
.cc-engagement h3 {
	font-family: var(--cc-titre);
	font-size: .98rem;
	margin: .7em 0 .3em;
}
.cc-engagement p {
	font-size: .88rem;
	color: var(--cc-encre-douce);
	margin: 0;
	line-height: 1.5;
}
.cc-icone { color: var(--cc-ambre); }

/* --------------------------------------------------------------------------
   Corrections heritees du passage en sombre
   -------------------------------------------------------------------------- */
/* Storefront peint le corps des tableaux en blanc, depuis un style injecte
   dans le <head> : « table:not(.has-background) tbody td ». Sur fond sombre,
   le texte clair disparaissait ligne apres ligne. On reprend son selecteur en
   le prefixant plutot que de sortir un !important. */
table.cc-tableau:not(.has-background) tbody td,
table.cc-tableau:not(.has-background) tbody tr:nth-child(2n) td {
	background-color: transparent;
	color: inherit;
}
table.cc-tableau:not(.has-background) tbody tr:nth-child(2n) td { background-color: rgba(255,255,255,.02); }
table.cc-tableau:not(.has-background) thead th { background-color: var(--cc-bleu-pale); }

/* Le pied de page reprenait la couleur d'encre -- devenue claire en sombre --
   comme fond, avec du texte blanc dessus : plus rien n'etait lisible. */
.site-footer {
	background: var(--cc-fond-2);
	color: var(--cc-encre-douce);
	border-top: 1px solid var(--cc-bord);
}
.site-footer a:not(.button) { color: var(--cc-encre); }
.cc-pied-legal p { color: var(--cc-encre-douce); }

/* ==========================================================================
   18. Direction claire : ce que la bascule des jetons ne suffit pas a regler
   Le fond est blanc, l'encre presque noire, l'action noire et le prix rouge.
   Les regles ci-dessous reprennent une a une les surfaces qui portaient une
   couleur en dur pensee pour le fond sombre.
   ========================================================================== */

body { background: var(--cc-fond); }

/* Bandeau d'annonce : bande sombre pleine largeur, tout en haut de page. */
.cc-bandeau {
	background: var(--cc-sombre);
	color: rgba(255,255,255,.82);
	font-size: .82rem;
	padding: .55em 1em;
}
.cc-bandeau strong,
.cc-bandeau b { color: var(--cc-blanc); }
.cc-bandeau span { opacity: .45; }

/* En-tete blanc, nom de boutique en noir. */
.site-header {
	background: var(--cc-blanc);
	border-bottom: 1px solid var(--cc-bord);
}
.site-header .site-branding .site-title a { color: var(--cc-encre); }

/* --------------------------------------------------------------------------
   Boutons : pilule noire pour l'action, contour pour le reste
   -------------------------------------------------------------------------- */
button, .button, input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button,
.cc-cta {
	border-radius: var(--cc-rayon-pilule);
	letter-spacing: .01em;
}
/* Action principale : noir plein, sans ombre portee coloree. */
.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-encre);
	color: var(--cc-blanc);
	box-shadow: none;
}
.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: #333333;
	color: var(--cc-blanc);
}
/* Action secondaire : contour noir sur blanc. */
button, .button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
	background: var(--cc-blanc);
	color: var(--cc-encre);
	border: 1px solid var(--cc-encre);
}
button:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--cc-encre);
	color: var(--cc-blanc);
}
.cc-cta--fantome {
	background: var(--cc-blanc);
	color: var(--cc-encre);
	border: 1px solid var(--cc-bord-clair);
}
.cc-cta--fantome:hover {
	background: var(--cc-carte-haute);
	color: var(--cc-encre);
	border-color: var(--cc-encre);
}
/* Le compteur du panier reste un point noir discret. */
.site-header-cart .cart-contents .count {
	background: var(--cc-encre);
	color: var(--cc-blanc);
}

/* --------------------------------------------------------------------------
   Prix : la seule couleur vive de la page
   -------------------------------------------------------------------------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.cc-vitrine__prix,
ul.products li.product .price {
	color: var(--cc-prix);
	font-weight: 700;
}
.woocommerce div.product p.price del,
ul.products li.product .price del { color: var(--cc-encre-douce); font-weight: 400; }
.cc-vitrine__prix small { color: var(--cc-encre-douce); font-weight: 400; }

/* --------------------------------------------------------------------------
   Surfaces : cartes blanches sur fond blanc, separees par un trait
   -------------------------------------------------------------------------- */
.cc-reassurance > div,
.cc-univers a,
.cc-univers-bientot,
.cc-cas > div,
.cc-zones > div,
.cc-faq details,
.cc-visuels__images figure {
	background: var(--cc-blanc);
	border: 1px solid var(--cc-bord);
	box-shadow: none;
}
@media (hover: hover) {
	.cc-univers a:hover,
	.cc-conseils a:hover {
		border-color: var(--cc-encre);
		box-shadow: var(--cc-ombre);
	}
}
/* Le fond d'attente des images redevient gris clair, comme les vignettes. */
.cc-vitrine__image,
.woocommerce div.product .woocommerce-product-gallery__image,
ul.products li.product img,
.cc-visuels__images img { background: var(--cc-carte-haute); }

/* Encart d'accroche : liseré noir plutot que barre coloree. */
.cc-encart { background: var(--cc-fond-2); border-left: 3px solid var(--cc-encre); }
.cc-hero .cc-surtitre {
	background: var(--cc-fond-2);
	border: 1px solid var(--cc-bord-clair);
	color: var(--cc-encre);
}
.cc-section > h2::before { background: var(--cc-encre); }

/* Bloc de rappel en fin de page : noir plein. */
.cc-final { background: var(--cc-encre); }
.cc-final .cc-cta {
	background: var(--cc-blanc);
	color: var(--cc-encre);
	border-color: var(--cc-blanc);
}
.cc-final .cc-cta:hover { background: var(--cc-carte-haute); color: var(--cc-encre); }

/* --------------------------------------------------------------------------
   Fiche produit
   -------------------------------------------------------------------------- */
/* Reassurance sous le bouton : encart vert tres pale, comme le bloc de
   livraison des boutiques qui affichent leur delai avant paiement. */
.cc-fiche-reassurance {
	background: var(--cc-vert-pale);
	border: 0;
	border-left: 3px solid var(--cc-vert);
	border-radius: 0 var(--cc-rayon) var(--cc-rayon) 0;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	border-left-color: var(--cc-bord-clair);
	color: var(--cc-encre-douce);
}
/* Encart livraison de la colonne : gris clair, sans bordure. */
.cc-colonne-bloc--encadre > summary,
.cc-colonne-bloc--encadre[open] > .cc-colonne-bloc__corps {
	background: var(--cc-fond-2);
	border-color: transparent;
}
/* Les questions sur fond gris, comme la section FAQ des boutiques dont on
   reprend la mise en page. */
.cc-faq {
	background: var(--cc-fond-2);
	border-radius: var(--cc-rayon-large);
	padding: 2.4em clamp(1.2em, 3vw, 2.4em);
	border-top: 0;
}
.cc-faq details { border-color: var(--cc-bord); }
.cc-faq details[open] { box-shadow: none; border-color: var(--cc-bord-clair); }

/* Tableau d'aide au choix : entete gris, plus de teinte bleue. */
.cc-tableau thead th {
	background: var(--cc-fond-2);
	color: var(--cc-encre);
}
table.cc-tableau:not(.has-background) thead th { background-color: var(--cc-fond-2); }
table.cc-tableau:not(.has-background) tbody tr:nth-child(2n) td { background-color: transparent; }

/* --------------------------------------------------------------------------
   Champs, liens, pied de page
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	background: var(--cc-blanc);
	border: 1px solid var(--cc-bord-clair);
	border-radius: var(--cc-rayon);
}
input:focus,
textarea:focus,
select:focus {
	border-color: var(--cc-encre);
	outline: 2px solid rgba(0,0,0,.15);
}
.cc-langues .trp-language-switcher > div,
.cc-langues .trp-ls-shortcode-current-language,
.cc-langues .trp-ls-shortcode-language,
.cc-langues select {
	background: var(--cc-blanc) !important;
	border-color: var(--cc-bord-clair) !important;
}

/* Un lien dans un paragraphe est noir souligne : sans couleur d'accent, le
   souligne est le seul signal qui reste. */
.hentry .entry-content a:not(.button):not(.cc-cta):not(.cc-univers a) {
	color: var(--cc-encre);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cc-colonne-bloc--encadre a { color: var(--cc-encre); text-decoration: underline; }

/* Pied de page sombre, seule zone foncee avec le bandeau d'annonce. */
.site-footer {
	background: var(--cc-sombre);
	color: rgba(255,255,255,.78);
	border-top: 0;
}
.site-footer a:not(.button) { color: rgba(255,255,255,.88); }
.site-footer a:not(.button):hover { color: var(--cc-blanc); }
.cc-pied-legal p { color: rgba(255,255,255,.6); }

/* --------------------------------------------------------------------------
   Galerie produit : cadre gris, image centree
   L'image servie par WooCommerce est plus etroite que sa colonne. Calee a
   gauche sur un fond gris, elle laissait une bande vide sur la droite.
   -------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	background: var(--cc-carte-haute);
	border-radius: var(--cc-rayon);
	overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery__image { text-align: center; }
.woocommerce div.product .woocommerce-product-gallery__image img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	border-radius: 0;
}

/* FlexSlider affiche les vignettes non selectionnees a 50 % d'opacite : sur
   fond sombre cela passait inapercu, sur fond blanc elles paraissent delavees
   et donnent l'impression d'images ratees. */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	opacity: 1;
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
	background: var(--cc-carte-haute);
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
	border-color: var(--cc-encre);
}

/* Le champ de recherche de l'en-tete : la loupe de Storefront se posait sur
   le texte d'invite. */
.site-header .widget_product_search input[type="search"],
.site-header .woocommerce-product-search input[type="search"] { padding-left: 2.4em; }

/* Bouton d'achat desactive tant qu'aucune variante n'est choisie : il reste
   noir, simplement attenue -- un bouton gris ressemble a une panne. */
.woocommerce div.product form.cart .button:disabled,
.woocommerce div.product form.cart .button.disabled {
	background: var(--cc-encre);
	color: var(--cc-blanc);
	opacity: .35;
}

/* Le titre du produit en vitrine est un lien, mais pas un lien de phrase :
   souligne, il ressemblait a une URL brute. La regle des liens de contenu
   est reprise ici, prefixee, pour la desactiver a cet endroit precis. */
.hentry .entry-content .cc-vitrine h2 a,
.hentry .entry-content .cc-conseils a,
.hentry .entry-content .cc-univers a { text-decoration: none; }
@media (hover: hover) {
	.hentry .entry-content .cc-vitrine h2 a:hover { text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   Champs restants
   -------------------------------------------------------------------------- */
/* Storefront place son icone de recherche par-dessus le debut du champ :
   l'invite passait sous la loupe. */
.site-search .widget_product_search input[type="search"],
.site-search .widget_product_search input[type="text"] { padding-left: 2.9em; }

/* Les listes deroulantes gardaient l'apparence du systeme, seul element
   de la page a ne pas suivre la charte. Fleche dessinee en fond, sans
   dependre d'une police d'icones. */
select,
.woocommerce-ordering select,
.woocommerce div.product form.cart .variations select {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--cc-blanc);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7em center;
	background-size: 1.05em;
	padding: .6em 2.4em .6em .9em;
	border: 1px solid var(--cc-bord-clair);
	border-radius: var(--cc-rayon);
	color: var(--cc-encre);
	font-size: 16px;   /* sous 16 px, iOS zoome sur le champ au focus */
}
.woocommerce-ordering { margin-bottom: 1.5em; }

/* La regle de padding du champ de recherche vit plus haut dans cette feuille,
   avec un selecteur plus specifique : on la complete la ou elle gagne. */
.site-header .site-search .widget_product_search input[type="search"] { padding-left: 2.9em; }

/* --------------------------------------------------------------------------
   Messages WooCommerce
   Storefront les peint en vert avec du texte blanc ; la personnalisation des
   couleurs a eclairci le fond sans toucher au texte, qui restait blanc sur
   gris clair -- « Votre panier est vide » etait illisible.
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background-color: var(--cc-fond-2);
	color: var(--cc-encre);
	border-left: 3px solid var(--cc-encre);
	border-radius: 0 var(--cc-rayon) var(--cc-rayon) 0;
}
.woocommerce-message { border-left-color: var(--cc-vert); }
.woocommerce-error { border-left-color: var(--cc-prix); }
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-noreviews a {
	color: var(--cc-encre);
	text-decoration: underline;
}
.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover { color: var(--cc-encre); opacity: .75; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--cc-encre); }

/* --------------------------------------------------------------------------
   Corrections d'ergonomie (audit du 18/08/2026)
   -------------------------------------------------------------------------- */
/* Un champ de saisie est un element d'interface : sa bordure doit atteindre
   3:1 avec le fond (WCAG 1.4.11). L'ancienne, a 1,6:1, disparaissait sur
   ecran lumineux. */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { border-color: #949494; }

/* Les drapeaux du selecteur de langue arrivaient sans dimensions : la ligne
   sautait a leur chargement. */
.trp-flag-image { width: 18px; height: 12px; }

/* La liste des declinaisons porte maintenant le prix de chacune : elle a
   besoin de respirer, et de ne jamais deborder de la colonne. */
.woocommerce div.product form.cart .variations select { max-width: 100%; }
.woocommerce div.product form.cart .variations td.label { padding-bottom: .3em; }

/* ==========================================================================
   20. Accueil : la meme sequence que la fiche produit
   Un bloc d'entree qui donne les trois chemins possibles, les univers, la
   selection, les conseils, les engagements, puis les questions.
   ========================================================================== */

/* Bloc d'entree : le texte a gauche, les raccourcis a droite. Fond sombre,
   comme la bande d'annonce et le pied de page -- les trois seules zones
   foncees du site. */
.cc-hero--duo {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.6em, 4vw, 3.4em);
	align-items: center;
	text-align: left;
	background: var(--cc-sombre);
	color: rgba(255,255,255,.82);
	padding: clamp(2.2em, 5vw, 3.6em);
	border-radius: var(--cc-rayon-large);
}
@media (max-width: 860px) {
	.cc-hero--duo { grid-template-columns: 1fr; }
}
.cc-hero--duo h1 { color: var(--cc-blanc); margin-bottom: .5em; }
.cc-hero--duo .cc-chapo { color: rgba(255,255,255,.78); margin-left: 0; margin-right: 0; max-width: 46ch; }
.cc-hero--duo .cc-surtitre {
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.22);
	color: rgba(255,255,255,.9);
}
.cc-hero--duo .cc-actions { justify-content: flex-start; }
.cc-hero--duo .cc-cta { background: var(--cc-blanc); color: var(--cc-encre); }
.cc-hero--duo .cc-cta:hover { background: var(--cc-carte-haute); color: var(--cc-encre); }
.cc-hero--duo .cc-cta--fantome {
	background: transparent;
	color: var(--cc-blanc);
	border: 1px solid rgba(255,255,255,.45);
}
.cc-hero--duo .cc-cta--fantome:hover { background: rgba(255,255,255,.12); color: var(--cc-blanc); }
.cc-hero__note { font-size: .86rem; color: rgba(255,255,255,.6); margin: 1.2em 0 0; }

.cc-hero__raccourcis { display: grid; gap: .8em; }
.cc-hero__raccourcis a {
	display: block;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: var(--cc-rayon);
	padding: 1em 1.2em;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.cc-hero__raccourcis strong { display: block; color: var(--cc-blanc); font-size: 1rem; }
.cc-hero__raccourcis span { display: block; color: rgba(255,255,255,.62); font-size: .87rem; margin-top: .15em; }
@media (hover: hover) {
	.cc-hero__raccourcis a:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.34); }
}

/* Surtitre de section, au-dessus du titre. */
.cc-surtitre-section {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cc-encre-douce);
	margin: 0 0 .3em;
}
.cc-section > .cc-surtitre-section + h2 { padding-top: 0; }
.cc-section > .cc-surtitre-section + h2::before { display: none; }

/* Cinq engagements de front sur grand ecran, comme la bande de reassurance
   des boutiques qui la placent avant le pied de page. */
.cc-engagements__grille--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .cc-engagements__grille--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .cc-engagements__grille--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px)  { .cc-engagements__grille--5 { grid-template-columns: 1fr; } }

/* Bande d'information : un texte, un bouton, rien d'autre. */
.cc-bande {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.6em;
	background: var(--cc-fond-2);
	border-radius: var(--cc-rayon-large);
	padding: clamp(1.6em, 3.5vw, 2.4em);
	margin-bottom: 4.2em;
}
.cc-bande h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 0 0 .4em; }
.cc-bande p { color: var(--cc-encre-douce); margin: 0; max-width: 62ch; }
.cc-bande .cc-cta { flex-shrink: 0; }

/* Le titre du produit en vitrine restait souligne : la regle des liens de
   contenu de Storefront le rattrapait par un selecteur plus specifique que le
   notre. On reprend le sien, prefixe. */
.hentry .entry-content .cc-vitrine h2 a:not(.button):not(.cc-cta) { text-decoration: none; }

/* Dans le bloc d'entree, le titre partage la largeur avec les raccourcis :
   la taille pleine lui faisait occuper quatre lignes. */
.cc-hero--duo h1 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }

/* --------------------------------------------------------------------------
   Pied de page en colonnes
   Une seule ligne de liens legaux ne disait ni ce qu'on vend, ni ou trouver
   de l'aide. Les colonnes donnent au visiteur arrive en bas de page les trois
   chemins qu'il cherche : acheter, comprendre, verifier.
   -------------------------------------------------------------------------- */
.cc-pied {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: 2em;
	padding-bottom: 2em;
	margin-bottom: 1.6em;
	border-bottom: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 900px) { .cc-pied { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cc-pied { grid-template-columns: 1fr; gap: 1.6em; } }

.cc-pied__nom {
	font-family: var(--cc-titre);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--cc-blanc);
	margin: 0 0 .4em;
	letter-spacing: -.02em;
}
.cc-pied__marque p { color: rgba(255,255,255,.62); font-size: .9rem; margin: 0; max-width: 40ch; }

.cc-pied__colonne h2 {
	font-family: var(--cc-titre);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255,255,255,.55);
	margin: 0 0 .8em;
}
.cc-pied__colonne ul { list-style: none; margin: 0; padding: 0; }
.cc-pied__colonne li { margin-bottom: .5em; }
.cc-pied__colonne a { font-size: .93rem; text-decoration: none; }
@media (hover: hover) { .cc-pied__colonne a:hover { text-decoration: underline; } }

.cc-pied-legal p { font-size: .84rem; margin: 0; }

/* Le bouton des cartes de la grille produit heritait du fond noir de l'action
   principale et de l'encre noire du bouton secondaire : le libelle devenait
   invisible. On le declare franchement comme une action principale. */
ul.products li.product .button,
ul.products li.product a.button,
ul.products li.product a.button.add_to_cart_button {
	background: var(--cc-encre);
	color: var(--cc-blanc);
	border: 1px solid var(--cc-encre);
}
ul.products li.product .button:hover,
ul.products li.product a.button:hover {
	background: #333333;
	color: var(--cc-blanc);
	border-color: #333333;
}

/* ==========================================================================
   21. Accueil refaite sur le modele de smartwayparis.com (18/08/2026)
   Des bandes pleine largeur qui alternent blanc et gris, un bloc d'entree
   sombre, des cartes a bord fin et un rouge reserve aux liens d'action.
   Les valeurs (tailles, graisses, rayons, respirations) sont reprises de leur
   page ; les couleurs passent par nos jetons.
   ========================================================================== */

:root {
	/* Le sombre du bloc d'entree. Plus profond que le gris du bandeau
	   d'annonce et du pied de page : c'est la premiere image de la page. */
	--cc-nuit: #0f1720;
	--cc-nuit-texte: #d7e1e8;
}

/* Les bandes vont d'un bord a l'autre : on neutralise, sur l'accueil
   seulement, la gouttiere que Storefront pose sur le contenu. Chaque bande
   remet sa propre marge interieure. */
.home .site-content .col-full {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	/* Sous 768 px, Storefront passe sa gouttiere du padding a la marge : sans
	   cette ligne, les bandes s'arretaient a 14 px des bords sur telephone. */
	margin-left: 0;
	margin-right: 0;
}
.home .site-content .content-area,
.home .site-content .site-main,
.home .site-content .hentry,
.home .site-content .entry-content {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: none;
}
.home .site-content .hentry { border: 0; }

.cc-home-bande { background: var(--cc-fond); }
.cc-home-bande--gris { background: var(--cc-fond-2); }
.cc-home-bande--nuit { background: var(--cc-nuit); color: var(--cc-nuit-texte); }

.cc-home__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 36px 16px;
}
@media (min-width: 750px) {
	.cc-home__inner { padding: 48px 32px; }
}

/* Un titre de bande et son chapo. */
.cc-home-bande h2 {
	margin: 0;
	font-size: 28px;
	font-weight: 850;
	line-height: 1.12;
	letter-spacing: 0;
}
.cc-home-bande h2::before { display: none; }
.cc-home-bande__chapo {
	max-width: 72ch;
	margin: 8px 0 0;
	color: var(--cc-encre-douce);
	font-size: 14px;
	line-height: 1.45;
}
.cc-home-bande__tete { margin-bottom: 16px; }
@media (min-width: 750px) {
	.cc-home-bande h2 { font-size: 32px; }
}

/* Boutons de l'accueil : rectangle a coins doux, rouge pour l'action, contour
   pour le second choix. Le reste du site garde ses pilules noires ; ici on
   suit le modele. */
.cc-home-bouton {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: var(--cc-rayon);
	padding: 0 20px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}
.cc-home-bouton--principal { background: var(--cc-prix); color: var(--cc-blanc); }
.cc-home-bouton--fantome {
	border: 1px solid rgba(255,255,255,.38);
	color: var(--cc-blanc);
}
.cc-home-bouton--sombre { background: var(--cc-encre); color: var(--cc-blanc); }
@media (hover: hover) {
	.cc-home-bouton--principal:hover { background: #a81817; color: var(--cc-blanc); }
	.cc-home-bouton--fantome:hover { background: rgba(255,255,255,.12); color: var(--cc-blanc); }
	.cc-home-bouton--sombre:hover { background: #333333; color: var(--cc-blanc); }
}

/* --------------------------------------------------------------------------
   Bloc d'entree
   -------------------------------------------------------------------------- */
.cc-home-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.cc-home-hero__copie { max-width: 720px; }

.cc-home-hero__surtitre {
	margin: 0 0 12px;
	color: var(--cc-nuit-texte);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
}

.cc-home-bande--nuit h1 {
	max-width: 20ch;
	margin: 0;
	color: var(--cc-blanc);
	font-size: 42px;
	font-weight: 850;
	line-height: 1.04;
	letter-spacing: -.01em;
}
.cc-home-hero__chapo {
	max-width: 62ch;
	margin: 16px 0 0;
	color: var(--cc-nuit-texte);
	font-size: 16px;
	line-height: 1.45;
}
.cc-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}
.cc-home-hero__note {
	margin: 14px 0 0;
	color: var(--cc-nuit-texte);
	font-size: 13px;
	line-height: 1.4;
}

.cc-home-hero__tuiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.cc-home-hero__tuile {
	display: grid;
	gap: 6px;
	min-height: 86px;
	align-content: center;
	justify-items: center;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--cc-rayon);
	background: rgba(255,255,255,.06);
	padding: 12px 10px;
	text-decoration: none;
	transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.cc-home-hero__tuile span { color: var(--cc-blanc); font-size: 14px; font-weight: 850; }
.cc-home-hero__tuile small {
	max-width: 24ch;
	color: var(--cc-nuit-texte);
	font-size: 12px;
	font-weight: 650;
	line-height: 1.25;
	text-align: center;
}
@media (hover: hover) {
	.cc-home-hero__tuile:hover {
		border-color: rgba(255,255,255,.42);
		background: rgba(255,255,255,.12);
		transform: translateY(-1px);
	}
}
@media (min-width: 750px) {
	.cc-home-hero {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
		align-items: center;
		gap: 42px;
	}
	.cc-home-bande--nuit h1 { font-size: 54px; }
	.cc-home-hero__tuiles { grid-template-columns: 1fr; gap: 12px; }
	.cc-home-hero__tuile { justify-items: start; text-align: left; padding: 14px 16px; }
	.cc-home-hero__tuile small { text-align: left; max-width: 34ch; }
}
@media (max-width: 420px) {
	.cc-home-bande--nuit h1 { font-size: 34px; }
	.cc-home-hero__tuiles { grid-template-columns: 1fr; }
	.cc-home-bouton { width: 100%; padding: 0 14px; }
}

/* --------------------------------------------------------------------------
   Cartes « par besoin »
   -------------------------------------------------------------------------- */
.cc-home-besoins { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cc-home-besoins__carte {
	display: grid;
	gap: 18px;
	min-height: 188px;
	align-content: space-between;
	border: 1px solid rgba(17,17,17,.10);
	border-radius: var(--cc-rayon);
	background: var(--cc-carte);
	color: inherit;
	padding: 20px;
	text-decoration: none;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.cc-home-besoins__carte h3 {
	margin: 0 0 9px;
	color: var(--cc-encre);
	font-size: 22px;
	font-weight: 850;
	line-height: 1.12;
}
.cc-home-besoins__carte p {
	margin: 0;
	color: var(--cc-encre-douce);
	font-size: 14px;
	line-height: 1.45;
}
.cc-home-besoins__cta {
	color: var(--cc-prix);
	font-size: 14px;
	font-weight: 850;
	line-height: 1.2;
}
@media (hover: hover) {
	.cc-home-besoins__carte:hover {
		border-color: rgba(204,30,29,.34);
		box-shadow: 0 12px 30px rgba(17,17,17,.08);
		transform: translateY(-1px);
	}
}
@media (min-width: 750px) {
	.cc-home-besoins { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

/* --------------------------------------------------------------------------
   Selection du moment
   -------------------------------------------------------------------------- */
.cc-home-selection__tete {
	display: grid;
	gap: 12px;
	margin-bottom: 16px;
}
.cc-home-selection__surtitre {
	margin: 0 0 7px;
	color: var(--cc-prix);
	font-size: 12px;
	font-weight: 850;
	line-height: 1.2;
	text-transform: uppercase;
}
.cc-home-selection__tout {
	color: var(--cc-prix);
	font-size: 14px;
	font-weight: 850;
	text-decoration: none;
}
@media (min-width: 750px) {
	.cc-home-selection__tete { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

.cc-home-grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.cc-home-produit {
	min-width: 0;
	border: 1px solid rgba(17,17,17,.10);
	border-radius: var(--cc-rayon);
	background: var(--cc-carte);
	overflow: hidden;
}
.cc-home-produit > a {
	display: grid;
	gap: 8px;
	height: 100%;
	align-content: start;
	color: inherit;
	padding: 10px;
	text-decoration: none;
}
.cc-home-produit__media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--cc-carte-haute);
}
.cc-home-produit__media img {
	display: block;
	width: 100%;
	height: 100%;
	/* cover, pas contain : le visuel principal est desormais en 16/9 comme le
	   reste de la galerie, alors que ce cadre est carre. cover recadre au centre,
	   la ou se trouve le crochet : meme rendu qu'avant le passage en 16/9. */
	object-fit: cover;
	mix-blend-mode: multiply;
}
.cc-home-produit__rayon {
	justify-self: start;
	border-radius: 999px;
	background: var(--cc-fond-2);
	color: var(--cc-encre-douce);
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.2;
}
.cc-home-produit strong {
	display: -webkit-box;
	min-height: 40px;
	overflow: hidden;
	color: var(--cc-encre);
	font-size: 13px;
	font-weight: 850;
	line-height: 1.25;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.cc-home-produit__prix {
	color: var(--cc-encre);
	font-size: 17px;
	font-weight: 850;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}
.cc-home-produit__prix .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.cc-home-produit__prix del { color: var(--cc-encre-douce); font-size: 12px; font-weight: 500; }
@media (hover: hover) {
	.cc-home-produit:hover { border-color: rgba(204,30,29,.34); box-shadow: 0 12px 30px rgba(17,17,17,.08); }
}
@media (min-width: 750px) {
	.cc-home-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
	.cc-home-produit > a { padding: 12px; }
	.cc-home-produit strong { min-height: 48px; font-size: 16px; }
	.cc-home-produit__prix { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   Cartes « zone par zone »
   -------------------------------------------------------------------------- */
.cc-home-zones { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cc-home-zones__carte {
	display: grid;
	align-content: start;
	overflow: hidden;
	border: 1px solid rgba(17,17,17,.10);
	border-radius: var(--cc-rayon);
	background: var(--cc-fond-2);
	color: inherit;
	text-decoration: none;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.cc-home-zones__media {
	display: grid;
	aspect-ratio: 16 / 9;
	place-items: center;
	background: linear-gradient(135deg, var(--cc-fond-2) 0%, #ecefec 100%);
	color: var(--cc-prix);
}
.cc-home-zones__media svg { width: 64px; height: 64px; }
.cc-home-zones__media--banquette { color: #b3161c; }
.cc-home-zones__media--conduite { color: #34475a; }
.cc-home-zones__contenu {
	display: grid;
	gap: 14px;
	align-content: space-between;
	min-height: 178px;
	padding: 18px;
}
.cc-home-zones__carte h3 {
	margin: 0;
	color: var(--cc-encre);
	font-size: 20px;
	font-weight: 850;
	line-height: 1.15;
}
.cc-home-zones__carte p {
	margin: 0;
	color: var(--cc-encre-douce);
	font-size: 14px;
	line-height: 1.45;
}
.cc-home-zones__cta {
	color: var(--cc-prix);
	font-size: 14px;
	font-weight: 850;
	line-height: 1.2;
}
@media (hover: hover) {
	.cc-home-zones__carte:hover {
		border-color: rgba(204,30,29,.34);
		box-shadow: 0 12px 30px rgba(17,17,17,.08);
		transform: translateY(-1px);
	}
}
@media (min-width: 750px) {
	.cc-home-zones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

/* --------------------------------------------------------------------------
   Bande de confiance
   -------------------------------------------------------------------------- */
.cc-home-confiance { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cc-home-confiance__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	border: 1px solid rgba(17,17,17,.10);
	border-radius: var(--cc-rayon);
	background: var(--cc-carte);
	padding: 16px;
}
.cc-home-confiance__pastille {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border-radius: 999px;
	background: rgba(204,30,29,.10);
}
.cc-home-confiance__pastille::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--cc-prix);
}
.cc-home-confiance__item h3 {
	margin: 0 0 8px;
	color: var(--cc-encre);
	font-size: 17px;
	font-weight: 850;
	line-height: 1.2;
}
.cc-home-confiance__item p {
	margin: 0;
	color: var(--cc-encre-douce);
	font-size: 13px;
	line-height: 1.45;
}
@media (min-width: 750px) {
	.cc-home-confiance { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 1100px) {
	.cc-home-confiance { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Bande livraison et retours
   -------------------------------------------------------------------------- */
.cc-home-livraison { display: grid; gap: 18px; }
.cc-home-livraison p {
	max-width: 90ch;
	margin: 10px 0 0;
	color: var(--cc-encre-douce);
	font-size: 14px;
	line-height: 1.5;
}
.cc-home-livraison .cc-home-bouton { justify-self: start; }
@media (min-width: 750px) {
	.cc-home-livraison { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (max-width: 420px) {
	.cc-home-livraison .cc-home-bouton { width: 100%; }
}

/* --------------------------------------------------------------------------
   Ce que Storefront rattrape
   -------------------------------------------------------------------------- */
/* Nos liens de contenu sont noirs et soulignes, par une regle a trois :not()
   (« .hentry .entry-content a:not(.button):not(.cc-cta):not(.cc-univers a) »).
   Dans les bandes de l'accueil, les liens SONT les cartes et les boutons : un
   soulignement fait passer un titre pour une URL collee, et l'encre noire rend
   le libelle d'un bouton noir invisible. On reprend donc son selecteur, avec
   ses :not(), pour lui passer devant -- jamais un !important. */
.hentry .entry-content .cc-home-besoins__carte:not(.button):not(.cc-cta):not(.cc-univers a),
.hentry .entry-content .cc-home-zones__carte:not(.button):not(.cc-cta):not(.cc-univers a),
.hentry .entry-content .cc-home-produit a:not(.button):not(.cc-cta):not(.cc-univers a),
.hentry .entry-content .cc-home-hero__tuile:not(.button):not(.cc-cta):not(.cc-univers a) {
	color: inherit;
	text-decoration: none;
}

/* Un bouton porte son fond : son libelle est blanc, quel que soit le fond de
   la bande. */
.hentry .entry-content a.cc-home-bouton:not(.button):not(.cc-cta):not(.cc-univers a) {
	color: var(--cc-blanc);
	text-decoration: none;
}

/* « Tout voir » et les appels a l'action des cartes restent rouges : c'est le
   seul endroit ou le rouge sert de signal de lien. */
.hentry .entry-content a.cc-home-selection__tout:not(.button):not(.cc-cta):not(.cc-univers a) {
	color: var(--cc-prix);
	text-decoration: none;
}
@media (hover: hover) {
	.hentry .entry-content a.cc-home-selection__tout:not(.button):not(.cc-cta):hover { text-decoration: underline; }
}

/* Les sections de l'ancienne accueil qui restent en bas de page gardent la
   gouttiere que les bandes viennent de retirer au conteneur. */
.cc-home-reste {
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px 16px 48px;
}
@media (min-width: 750px) {
	.cc-home-reste { padding: 8px 32px 60px; }
}
.cc-home-reste .cc-section:last-child,
.cc-home-reste .cc-final { margin-bottom: 0; }

/* ==========================================================================
   22. Le tunnel d'achat : panier, commande, confirmation (18/08/2026)
   Storefront centre un titre de 44 px sur toute la largeur de l'ecran, puis
   pose un tableau sans bordure dans le vide. Ces pages arrivent apres la
   fiche produit : elles doivent en garder la largeur, les cartes et le calme.
   ========================================================================== */

/* Une colonne, pas un ecran. Au-dela, l'oeil perd la ligne entre le libelle
   a gauche et le montant a droite. */
.cc-tunnel .col-full { max-width: 1080px; }

/* Le titre reprend l'echelle des titres de section du site, aligne a gauche
   comme partout ailleurs. */
.cc-tunnel .entry-title,
.woocommerce-order-received .entry-title {
	font-size: clamp(1.9rem, 4vw, 2.5rem);
	text-align: left;
	margin: 0 0 1.2em;
}

/* Le pays n'a qu'une reponse possible : le champ reste poste, pas affiche. */
.cc-champ-masque { display: none !important; }

/* Storefront reserve 100 px sous le titre de page. C'etait fait pour un titre
   centre au milieu du vide ; ici le contenu commence tout de suite. */
/* Storefront cible ce bloc avec deux classes de corps de page : il faut la
   meme laisse pour passer devant. */
.storefront-full-width-content.cc-tunnel .entry-header,
.storefront-full-width-content.woocommerce-order-received .entry-header { padding-bottom: 1.2em; }

/* --- Le panier ---------------------------------------------------------- */

.woocommerce-cart .shop_table.cart {
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon-large);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--cc-carte);
	margin-bottom: 1.6em;
}
.woocommerce-cart .shop_table.cart thead th {
	background: var(--cc-fond-2);
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cc-encre-douce);
	padding: 1em 1.2em;
	border: 0;
}
.woocommerce-cart .shop_table.cart td {
	padding: 1.2em;
	border: 0;
	border-top: 1px solid var(--cc-bord);
	vertical-align: middle;
}
/* La miniature de 63 px de Storefront ne montre rien du produit : on double. */
.woocommerce-cart .shop_table.cart td.product-thumbnail img {
	width: 96px;
	border-radius: var(--cc-rayon);
	background: var(--cc-carte-haute);
}
/* La regle de liens du site (specificite 0,5,1) souligne tout ce qui est
   dans un contenu : il faut reprendre ses :not() pour passer devant, jamais
   un !important. */
.woocommerce-cart .shop_table.cart td.product-name a:not(.button):not(.cc-cta):not(.cc-univers a) {
	font-weight: 600;
	text-decoration: none;
}
.woocommerce-cart .shop_table.cart td.product-name a:not(.button):not(.cc-cta):not(.cc-univers a):hover { text-decoration: underline; }
.woocommerce-cart .shop_table.cart .variation {
	color: var(--cc-encre-douce);
	font-size: .9rem;
	margin: .35em 0 0;
}
.woocommerce-cart .shop_table.cart td.actions { background: var(--cc-fond-2); }

.cc-tunnel-retour { margin: 0 0 2.4em; }
.cc-tunnel .cc-tunnel-retour a:not(.button):not(.cc-cta):not(.cc-univers a) {
	color: var(--cc-encre-douce);
	text-decoration: none;
	font-weight: 600;
}
.cc-tunnel .cc-tunnel-retour a:not(.button):not(.cc-cta):not(.cc-univers a)::before { content: "\2190\00a0"; }
.cc-tunnel .cc-tunnel-retour a:not(.button):not(.cc-cta):not(.cc-univers a):hover { color: var(--cc-encre); }

/* Le total du panier dans une carte, comme le recapitulatif de commande. */
.woocommerce-cart .cart_totals {
	background: var(--cc-carte);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon-large);
	padding: 1.6em;
}
.woocommerce-cart .cart_totals h2 { font-size: 1.15rem; margin: 0 0 .8em; }
.woocommerce-cart .cart_totals table { margin: 0; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--cc-bord);
	padding: .8em 0;
	font-weight: 500;
}
.woocommerce-cart .cart_totals table td { text-align: right; }
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td { font-size: 1.1rem; }

/* « Les options de livraison seront mises a jour lors de la commande » :
   il n'y a qu'un tarif, gratuit, et il ne bougera pas a l'etape suivante. */
.woocommerce-shipping-destination { display: none; }

/* --- La commande -------------------------------------------------------- */

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
	font-size: 1.15rem;
	margin: 0 0 1em;
}
.woocommerce-checkout .woocommerce form .form-row label,
.woocommerce-checkout .form-row label {
	font-size: .9rem;
	font-weight: 600;
	margin-bottom: .35em;
}
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--cc-carte);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon-large);
	padding: 1.6em;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table { margin: 0; }
/* L'en-tete du recapitulatif est deja dans une carte : sa bande grise formait
   une seconde boite a l'interieur de la premiere. */
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	background: transparent;
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cc-encre-douce);
	font-weight: 600;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	padding: .8em 0;
	border: 0;
	border-bottom: 1px solid var(--cc-bord);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
	font-size: 1.15rem;
	border-bottom: 0;
}
/* Storefront grise la colonne des libelles du pied de tableau : dans une carte
   blanche, ca dessine une colonne grise qui ne veut rien dire. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
	background: transparent;
	font-weight: 500;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th { font-weight: 700; }
/* Les montants a droite, les libelles a gauche : l'oeil suit une seule ligne. */
.woocommerce-checkout .woocommerce-checkout-review-order-table td { text-align: right; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th { text-align: left; }
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name { text-align: left; }

.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment div.payment_box { border-radius: var(--cc-rayon); }
.woocommerce-checkout #place_order { width: 100%; padding: 1em; font-size: 1.05rem; }

/* --- La reassurance, aux deux etapes ------------------------------------ */

.cc-tunnel-reassurance {
	margin-top: 1.4em;
	background: var(--cc-vert-pale);
	border-radius: var(--cc-rayon-large);
	padding: 1.2em 1.4em;
}
.cc-tunnel-reassurance .cc-fiche-reassurance { margin: 0; }

/* --- La confirmation ---------------------------------------------------- */

.woocommerce-order-received .woocommerce-order > .woocommerce-notice--success {
	background: var(--cc-vert-pale);
	border-top: 0;
	border-left: 4px solid var(--cc-vert);
	border-radius: var(--cc-rayon-large);
	padding: 1.2em 1.4em;
	font-size: 1.05rem;
}
.woocommerce-order-received .woocommerce-order-overview {
	background: var(--cc-carte);
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon-large);
	padding: 1.4em;
	margin: 1.6em 0;
}

@media (max-width: 767px) {
	.woocommerce-cart .shop_table.cart td { padding: .9em; }
	.woocommerce-cart .shop_table.cart td.product-thumbnail img { width: 72px; }
	.woocommerce-checkout .woocommerce-checkout-review-order { padding: 1.2em; }
}

/* ==========================================================================
   23. Le choix de la variante, sans menu deroulant (18/08/2026)
   Deux questions au lieu d'une liste de neuf lignes : la couleur en pastilles,
   le lot en cartes avec son prix a l'unite. Le <select> d'origine reste dans
   la page, hors ecran : c'est lui que WooCommerce lit.
   ========================================================================== */

.cc-variations-masquees { display: none; }

.cc-choix { margin: 0 0 1.6em; }
.cc-choix__bloc {
	border: 0;
	padding: 0;
	margin: 0 0 1.3em;
}
.cc-choix__titre {
	display: block;
	padding: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cc-encre-douce);
	margin: 0 0 .6em;
}

/* --- Les pastilles de couleur ------------------------------------------- */

.cc-choix__couleurs { display: flex; flex-wrap: wrap; gap: .6em; }

.cc-pastille {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .5em .9em .5em .55em;
	border: 1px solid var(--cc-bord);
	border-radius: 999px;
	background: var(--cc-carte);
	cursor: pointer;
	font-size: .95rem;
	line-height: 1;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cc-pastille input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-pastille__rond {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .18);
	flex: 0 0 auto;
}
.cc-pastille:hover { border-color: var(--cc-bord-clair); }
.cc-pastille:has( input:checked ) {
	border-color: var(--cc-encre);
	box-shadow: inset 0 0 0 1px var(--cc-encre);
}
/* Le focus clavier doit se voir : le vrai bouton radio est hors ecran. */
.cc-pastille:has( input:focus-visible ) { outline: 2px solid var(--cc-encre); outline-offset: 2px; }

/* --- Les cartes de lot --------------------------------------------------- */

.cc-choix__lots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .6em;
}
@media (max-width: 480px) { .cc-choix__lots { grid-template-columns: 1fr; } }

/* Les cartes d'une question unique portent le libelle entier du fournisseur
   (« Boitier noir + pince de securite + housse ») : une grille de trois les
   couperait en trois lignes. On laisse les colonnes s'adapter. */
.cc-choix__lots--liste {
	grid-template-columns: repeat(auto-fit, minmax(13.5em, 1fr));
}
.cc-choix__lots--liste .cc-lot__nom { line-height: 1.35; }

.cc-lot {
	display: block;
	padding: .85em .9em;
	border: 1px solid var(--cc-bord);
	border-radius: var(--cc-rayon);
	background: var(--cc-carte);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cc-lot input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-lot__nom {
	display: block;
	font-weight: 600;
	font-size: .95rem;
	margin-bottom: .25em;
}
.cc-lot__prix {
	display: block;
	color: var(--cc-prix);
	font-weight: 700;
}
.cc-lot__unite {
	display: block;
	font-size: .8rem;
	color: var(--cc-encre-douce);
	margin-top: .15em;
}
.cc-lot:hover { border-color: var(--cc-bord-clair); }
.cc-lot:has( input:checked ) {
	border-color: var(--cc-encre);
	box-shadow: inset 0 0 0 1px var(--cc-encre);
}
.cc-lot:has( input:focus-visible ) { outline: 2px solid var(--cc-encre); outline-offset: 2px; }

/* Filet pour les navigateurs sans :has() -- la selection reste visible par
   la couleur du texte, faute de pouvoir styler le parent. */
@supports not selector(:has(*)) {
	.cc-choix__couleurs, .cc-choix__lots { gap: .8em; }
	.cc-pastille input, .cc-lot input { position: static; opacity: 1; width: auto; height: auto; }
}

/* ==========================================================================
   25. Identite de marque : le signe, l'en-tete, les tuiles, les details
   Rien de la copie ne bouge ici : on ajoute un signe reconnaissable, on
   raccourcit l'en-tete, on le rend collant, et on unifie les etats.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Le monogramme
   -------------------------------------------------------------------------- */
.cc-logo {
	display: inline-block;
	flex: 0 0 auto;
	width: var(--cc-logo-taille, 40px);
	height: var(--cc-logo-taille, 40px);
	color: var(--cc-encre);
	line-height: 0;
	transition: transform .18s ease;
}
.cc-logo svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Le trio de marque dans l'en-tete
   Storefront posait le nom seul, en haut a gauche, sur 204 px de hauteur.
   -------------------------------------------------------------------------- */
.site-header .cc-marque { margin-bottom: 0; }
.cc-marque__lien {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	text-decoration: none;
	color: inherit;
}
.cc-marque__mots { display: block; }
.cc-marque__nom {
	display: block;
	font-family: var(--cc-titre);
	font-weight: 700;
	font-size: 1.42rem;
	line-height: 1.15;
	letter-spacing: -.025em;
	color: var(--cc-encre);
}
.cc-marque__baseline {
	display: block;
	margin-top: .18em;
	font-size: .8rem;
	line-height: 1.35;
	color: var(--cc-encre-douce);
}
.cc-marque__lien:hover .cc-marque__nom { color: var(--cc-encre); }
@media (hover: hover) {
	.cc-marque__lien:hover .cc-logo { transform: translateY(-1px); }
}

/* --------------------------------------------------------------------------
   La barre de marque au defilement
   « position: sticky » est inoperant ici : body et .hfeed.site portent tous
   deux un overflow-x, ce qui en fait le conteneur de reference. On passe donc
   par une barre en « fixed », qui s'en echappe.
   -------------------------------------------------------------------------- */
:root { --cc-barre-hauteur: 50px; }
.cc-barre {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 120;
	background: var(--cc-blanc);
	border-bottom: 1px solid var(--cc-bord);
	box-shadow: 0 1px 12px rgba(0,0,0,.07);
	transform: translateY(-101%);
	transition: transform .22s ease;
	will-change: transform;
}
.cc-barre--visible { transform: translateY(0); }
.cc-barre__inner {
	max-width: 1216px;
	margin: 0 auto;
	padding: 9px 20px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.cc-barre__marque {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	flex: 0 0 auto;
	font-family: var(--cc-titre);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -.02em;
	color: var(--cc-encre);
	text-decoration: none;
}
.cc-barre__nav { margin-left: auto; }
.cc-barre__menu {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cc-barre__menu li { margin: 0; }
.cc-barre__menu a {
	display: block;
	padding: .4em .7em;
	border-radius: 8px;
	font-size: .9rem;
	font-weight: 500;
	color: var(--cc-encre);
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease;
}
@media (hover: hover) {
	.cc-barre__menu a:hover { background: var(--cc-fond-2); }
}
.cc-barre__panier {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: .35em;
	color: var(--cc-encre);
	text-decoration: none;
}
.cc-barre__panier-icone {
	display: block;
	width: 23px;
	height: 23px;
	background-color: currentColor;
	-webkit-mask: var(--cc-icone-panier) center / contain no-repeat;
	mask: var(--cc-icone-panier) center / contain no-repeat;
}
.cc-barre__compteur {
	position: absolute;
	top: -1px;
	right: -4px;
	min-width: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--cc-prix);
	color: var(--cc-blanc);
	font-size: .68rem;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}
/* Sur telephone, Storefront pose deja sa propre barre en bas de l'ecran
   (compte, recherche, panier) : une deuxieme barre en haut ferait deux
   paniers a l'ecran en meme temps. On s'efface. */
@media (max-width: 767px) {
	.cc-barre { display: none; }
}

/* --------------------------------------------------------------------------
   L'en-tete sur telephone
   Les trois blocs de la rangee de navigation -- langue, bouton Menu, panier --
   tombaient chacun sur sa ligne, dans cet ordre : on lisait le drapeau avant
   le menu, et le panier finissait seul en bas a gauche. On les regroupe.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.storefront-primary-navigation .col-full {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
	}
	/* Le menu garde toute la largeur : son panneau deroulant s'ouvre dessous
	   et doit pouvoir s'etendre. */
	.storefront-primary-navigation .main-navigation { order: 1; flex: 1 1 100%; margin: 0; }
	.storefront-primary-navigation .cc-langues { order: 3; margin: 0 0 0 auto; }

	/* Le panier du haut disparait : Storefront en pose deja un, avec son
	   compteur, dans la barre fixe du bas. En restant, il n'avait plus la
	   place d'ecrire « 0 article » et le rendait en pastille sur deux lignes. */
	.storefront-primary-navigation .site-header-cart { display: none; }

	/* Le selecteur de langue est cale « right: 0 » en absolu : sur telephone
	   il sortait de l'ecran par la droite, tronque en « Fran… ». On le rend
	   au flux pour qu'il se range avec le reste. */
	.storefront-primary-navigation .cc-langues {
		position: static;
		width: auto;
		max-width: 100%;
	}
	/* Le libelle ne tient pas dans la largeur restante : « Français » sortait
	   en « Fran… ». Le drapeau suffit a designer la langue courante, et le
	   panneau deroulant, lui, ecrit les deux noms en entier. */
	.storefront-primary-navigation .cc-langues .trp-current-language-item__wrapper .trp-language-item .trp-language-item-name { display: none; }
	.storefront-primary-navigation .cc-langues .trp-switcher-dropdown-list .trp-language-item-name { display: inline; }
}
/* La barre d'achat collante de Storefront doit rester au-dessus. */
.woocommerce .storefront-sticky-add-to-cart { z-index: 130; }

/* --------------------------------------------------------------------------
   Le panier prend son icone
   Il etait ecrit « 0,00 € 0 article » en texte nu, au milieu du blanc.
   -------------------------------------------------------------------------- */
.site-header-cart .cart-contents {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-weight: 600;
}
:root {
	--cc-icone-panier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h13l-1.4 8.4a2 2 0 0 1-2 1.6H9.4a2 2 0 0 1-2-1.6L6 7Z'/%3E%3Cpath d='M6 7 5 3H3'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E");
}
.site-header-cart .cart-contents::before {
	content: "";
	display: inline-block;
	width: 21px;
	height: 21px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--cc-icone-panier) center / contain no-repeat;
	mask: var(--cc-icone-panier) center / contain no-repeat;
}
/* Storefront pose sa propre icone de panier en « ::after », dans sa police
   d'icones. Elle etait en « float: right » a l'autre bout d'un bloc large de
   21,7 %, donc masquee par le panneau du selecteur de langue -- on avait deux
   paniers sans le voir. Le bloc s'ajustant desormais a son contenu, elle
   revenait se coller a cote du notre. */
.site-header-cart .cart-contents::after { display: none; }

.site-header-cart .cart-contents .count {
	border-radius: 999px;
	padding: .12em .5em;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Signature : le filet court sous les surtitres
   Le surtitre rouge existait deja ; le filet en fait un motif qu'on
   reconnait de section en section.
   -------------------------------------------------------------------------- */
.cc-home-hero__surtitre,
.cc-home-selection__surtitre,
.cc-surtitre {
	display: inline-flex;
	align-items: center;
	gap: .55em;
}
.cc-home-hero__surtitre::before,
.cc-home-selection__surtitre::before,
.cc-surtitre::before {
	content: "";
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Les tuiles d'entree : picto, mots, fleche
   Elles etaient trois rectangles de texte, sans rien pour dire qu'on clique.
   -------------------------------------------------------------------------- */
.cc-home-hero__tuile {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .95em;
	transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.cc-home-hero__picto {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	opacity: .9;
	line-height: 0;
}
.cc-home-hero__picto svg { display: block; width: 100%; height: 100%; }
/* Les deux lignes de texte etaient des cases de la grille : passees dans un
   conteneur, elles redeviennent inline et se collent bout a bout. */
.cc-home-hero__mots { display: block; min-width: 0; }
.cc-home-hero__mots > span { display: block; }
.cc-home-hero__mots > small { display: block; margin-top: 3px; }
.cc-home-hero__fleche {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	opacity: .45;
	line-height: 0;
	transition: transform .18s ease, opacity .18s ease;
}
.cc-home-hero__fleche svg { display: block; width: 100%; height: 100%; }
@media (hover: hover) {
	.cc-home-hero__tuile:hover { transform: translateY(-2px); }
	.cc-home-hero__tuile:hover .cc-home-hero__fleche { transform: translateX(3px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Etats uniformes : ce qui se souleve, se souleve pareil partout
   -------------------------------------------------------------------------- */
.cc-home-besoins__carte,
.cc-home-zones__carte,
.cc-conseils__carte {
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover: hover) {
	.cc-home-besoins__carte:hover,
	.cc-home-zones__carte:hover,
	.cc-conseils__carte:hover {
		transform: translateY(-2px);
		box-shadow: var(--cc-ombre-forte);
	}
}

/* Le focus clavier etait celui du navigateur, invisible sur les cartes
   sombres et absent sur les tuiles. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.cc-home-hero__tuile:focus-visible,
.cc-marque__lien:focus-visible {
	outline: 2px solid var(--cc-encre);
	outline-offset: 3px;
	border-radius: 4px;
}
.cc-home-bande--nuit a:focus-visible,
.cc-home-hero__tuile:focus-visible { outline-color: var(--cc-blanc); }

/* Les prix et les quantites ne doivent pas danser d'une ligne a l'autre. */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.cc-vitrine__prix,
ul.products li.product .price,
.cc-choix__prix,
.woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Le pied de page reprend le signe
   -------------------------------------------------------------------------- */
.cc-pied__nom {
	display: flex;
	align-items: center;
	gap: .5em;
}
.cc-logo--pied { color: var(--cc-blanc); --cc-logo-encre: var(--cc-sombre); }

/* --------------------------------------------------------------------------
   Mouvement : personne n'est oblige de le subir
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cc-logo,
	.site-header,
	.cc-home-hero__tuile,
	.cc-home-hero__fleche,
	.cc-home-besoins__carte,
	.cc-home-zones__carte,
	.cc-conseils__carte { transition: none; }
	.cc-home-hero__tuile:hover,
	.cc-home-besoins__carte:hover,
	.cc-home-zones__carte:hover,
	.cc-conseils__carte:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Telephone : la marque tient sur une ligne, la baseline passe dessous
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.cc-marque__lien { gap: .55em; }
	.cc-logo { --cc-logo-taille: 36px; }
	.cc-marque__nom { font-size: 1.22rem; }
	.cc-marque__baseline { font-size: .74rem; }
	.cc-home-hero__tuile { gap: .75em; }
	.cc-home-hero__picto { width: 32px; height: 32px; }
	/* La grille d'origine centrait ses cases ; avec un picto a gauche et une
	   fleche a droite, un texte centre entre les deux tombe de travers. */
	.cc-home-hero__tuile { justify-items: stretch; text-align: left; }
	.cc-home-hero__mots > small { max-width: none; text-align: left; }
}

/* ==========================================================================
   26. Le bloc de paiement (19/08/2026)
   Stripe est branche en production : le formulaire de carte arrive dans une
   iframe, avec sa propre feuille de style. Ce qu'on peut habiller, c'est ce
   qui l'entoure.
   ========================================================================== */

/* Le bouton de paiement express est desactive dans les reglages, mais le
   plugin pose quand meme son conteneur (48 px de vide) et son separateur
   « — OU — » : un « ou » sans premiere branche, tout en haut de la commande.
   Les deux sont masques ensemble, sinon l'un des deux subsiste. */
/* Le separateur est le seul endroit du site ou un « !important » se
   justifie : ce n'est pas un selecteur du theme parent qui gagne, c'est le
   JS du plugin qui ecrit « display: block » en attribut inline. Aucune
   specificite de feuille de style ne passe devant. */
#wc-stripe-express-checkout-element,
#wc-stripe-express-checkout-button-separator {
	display: none !important;
}

/* Le bouton radio du moyen de paiement arrive au violet Stripe. Une seule
   couleur vive existe sur ce site, et c'est le prix. */
.woocommerce-checkout #payment input[type="radio"] {
	accent-color: var( --cc-encre );
}

/* Le formulaire de carte met plusieurs secondes a se monter : Stripe charge
   son script, ouvre l'iframe, puis peint les champs. Sans reserve de hauteur,
   le bloc s'ouvre vide puis pousse le bouton « Commander » vers le bas au
   moment ou l'acheteur allait cliquer. On garde la place des le depart. */
.woocommerce-checkout #payment .payment_box .wc-upe-form {
	min-height: 234px;
}

/* ==========================================================================
   26. Une seule verticale pour tout le site (19/08/2026)

   Chaque session avait pose la largeur de son propre bloc : Storefront tenait
   ses pages a 1219 px, la page d'accueil refaite le 18/08 s'etalait a 1280, le
   tunnel d'achat se resserrait a 1169, et la barre collante a 1216. Resultat
   mesure au navigateur : sur l'accueil en 1440 px, le titre commencait 42 px a
   gauche du logo qui le surmonte, et le panier decalait tout le site de 26 px
   vers la droite. Sur telephone, le contenu de l'accueil touchait le bord a
   16 px quand l'en-tete et le pied se tenaient a 24 px.

   Une seule largeur, un seul retrait lateral, pour l'en-tete, le fil d'ariane,
   le contenu, le pied, le tunnel et la barre d'achat : les elements se posent
   tous sur la meme verticale, d'une page a l'autre.
   ========================================================================== */

:root {
	--cc-page-max: 1219px;
	--cc-page-pad: 24px;
}

@media (min-width: 768px) {
	:root { --cc-page-pad: 44px; }
}

.site-header .col-full,
.storefront-primary-navigation .col-full,
.storefront-breadcrumb .col-full,
.site-content > .col-full,
.site-footer .col-full,
.storefront-sticky-add-to-cart .col-full,
.cc-tunnel .col-full,
.cc-home__inner,
.cc-barre__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--cc-page-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--cc-page-pad);
	padding-right: var(--cc-page-pad);
}

/* Le lien vers la fiche suivante, en haut a droite, sortait du cadre entre
   900 et 1050 px : son titre ne se coupait nulle part. */
.storefront-product-pagination__title {
	max-width: 100%;
	overflow-wrap: break-word;
}