/* Briques de la boutique, communes à l'accueil, aux catégories, aux archives et aux fiches :
   carte montre, grille, tête de rubrique, fil d'Ariane, accordéons, chiffres, réassurance. */

/* ---- Tête de rubrique : titre à gauche, lien « Voir tout » à droite ---- */
.cs-rubrique-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}

/* ---- Grille et carte montre ---- */
.cs-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ecart-grille)}
.cs-carte{display:block;color:var(--encre)}
.cs-carte:hover{color:var(--encre)}
.cs-carte__photo{position:relative;display:block;aspect-ratio:3/4;background:var(--encre);overflow:hidden}
/* Sélecteur à 2 classes : « .woocommerce img{height:auto} » (WooCommerce, pages boutique) l'emporterait sinon. */
.cs-carte .cs-carte__image{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .6s ease}
.cs-carte:hover .cs-carte__image{transform:scale(1.03)}
.cs-carte__etiquette{position:absolute;left:12px;top:12px}
.cs-carte__marque{display:block;padding-top:16px;font-size:var(--t-surtitre);letter-spacing:.14em;text-transform:uppercase;color:var(--discret)}
.cs-carte__nom{display:block;font:500 var(--t-carte)/1.15 var(--police-titre);margin:4px 0 6px}
.cs-carte__bas{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-petit)}
.cs-carte__epoque{color:var(--discret)}
.cs-carte__prix{font-weight:600;white-space:nowrap}
.cs-carte--vendue .cs-carte__image{opacity:.85}

/* ---- Fil d'Ariane ---- */
.cs-ariane{display:flex;flex-wrap:wrap;gap:10px;padding-top:32px;font-size:var(--t-surtitre);letter-spacing:.14em;text-transform:uppercase;color:var(--discret)}
.cs-ariane a{color:var(--discret);text-decoration:underline 1px transparent;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.cs-ariane a:hover,.cs-ariane a:focus-visible{text-decoration-color:currentColor} /* léger soulignement au survol */
.cs-ariane [aria-current]{color:var(--encre)}

/* ---- Accordéons (fiche, FAQ) : signe + / − à l'accent ---- */
.cs-accordeons{border-bottom:1px solid var(--bord)}
.cs-accordeon{border-top:1px solid var(--bord)}
.cs-accordeon summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0}
.cs-accordeon__titre{font:500 24px/1.15 var(--police-titre);letter-spacing:-.005em}
.cs-accordeon p{margin:0;padding:0 40px 24px 0;font-size:15px;line-height:1.7;color:var(--texte)}
.cs-plus{position:relative;flex:none;width:16px;height:16px}
.cs-plus::before,.cs-plus::after{content:"";position:absolute;background:var(--accent)}
.cs-plus::before{left:0;right:0;top:50%;height:1px}
.cs-plus::after{top:0;bottom:0;left:50%;width:1px;transition:opacity .2s}
.cs-accordeon[open] .cs-plus::after{opacity:0}

/* ---- Bandeau de chiffres clés ---- */
.cs-chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.cs-chiffres--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-chiffres--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-chiffres>div{padding:34px 28px 34px 0}
.cs-chiffres p{margin:0}
.cs-chiffres__valeur{font:500 clamp(28px,2.8vw,40px)/1 var(--police-titre);letter-spacing:-.02em;margin-bottom:10px!important}
.cs-chiffres__legende{font-size:var(--t-surtitre);letter-spacing:.14em;text-transform:uppercase;color:var(--discret)}

/* ---- Réassurance (fond encre) ---- */
.cs-reassurance{background:var(--encre);color:var(--blanc)}
.cs-reassurance__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-top:72px;padding-bottom:56px;position:relative}
.cs-reassurance__in::after{content:"";position:absolute;left:var(--gouttiere);right:var(--gouttiere);bottom:0;height:1px;background:rgba(255,255,255,.2)}
.cs-reassurance__item{display:flex;gap:18px;align-items:flex-start}
.cs-reassurance__item svg{flex:none;width:40px;height:40px}
.cs-reassurance p{margin:0}
.cs-reassurance__titre{font:500 24px/1.15 var(--police-titre);margin-bottom:6px!important}
.cs-reassurance__texte{font-size:var(--t-petit);line-height:1.5;color:var(--bord-fort)}

/* Accents de texte */
.cs-surtitre--accent{color:var(--accent)}
.cs-surtitre--clair{color:var(--accent-clair)}
.cs-souligne{border-bottom:1px solid currentColor}
.cs-btn--bloc{display:flex;width:100%;padding:18px;font-size:var(--t-surtitre);font-weight:500}

@media (max-width:1024px){
	.cs-grille{gap:40px 20px}
	.cs-reassurance__in{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:56px;padding-bottom:44px}
	.cs-chiffres,.cs-chiffres--3{grid-template-columns:repeat(2,minmax(0,1fr))}
	.cs-chiffres>div{padding:24px 16px 24px 0}
}
@media (max-width:900px){
	.cs-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
	.cs-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
	.cs-carte__bas{flex-direction:column;gap:2px}
	.cs-reassurance__in{grid-template-columns:minmax(0,1fr);gap:24px}
	.cs-accordeon p{padding-right:0}
}

/* ---- Popin « ajoutée au panier » (inc/commande.php) : confirmation compacte, vignette de la montre ---- */
.cs-popin{position:fixed;inset:0;margin:auto;height:fit-content;border:0;padding:24px 28px 22px;width:min(440px,calc(100vw - 32px));max-width:none;background:var(--blanc);color:var(--encre);box-shadow:0 24px 64px rgba(0,0,0,.22)}
.cs-popin::backdrop{background:rgba(20,20,20,.45)}
.cs-popin__tete{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--bord)}
.cs-popin__tete form{margin:0}
.cs-popin__statut{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--t-surtitre);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cs-popin__statut:focus{outline:none}
.cs-popin__fermer{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-right:-6px;background:none;border:0;cursor:pointer;color:var(--encre)}
.cs-popin__montre{display:flex;align-items:center;gap:18px;padding:20px 0}
.cs-popin__vignette{flex:none;width:84px;aspect-ratio:3/4;background:var(--surface);overflow:hidden}
.cs-popin__vignette img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.cs-popin__infos{display:flex;flex-direction:column;min-width:0}
.cs-popin .cs-carte__marque{padding-top:0}
.cs-popin__titre{font:500 21px/1.2 var(--police-titre);margin:4px 0 6px}
.cs-popin__prix{font-weight:600;font-size:var(--t-petit)}
.cs-popin__boutons{display:flex;flex-direction:column;gap:10px}
.cs-popin__boutons form{margin:0}
.cs-popin__continuer{display:block;width:100%;margin-top:4px;padding:8px 0;background:none;border:0;font:inherit;font-size:var(--t-mini);color:var(--encre);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cs-popin__service{margin:12px 0 0;font-size:var(--t-mini);color:var(--discret);text-align:center}
@media (max-width:600px){.cs-popin{padding:20px 20px 18px}.cs-popin__vignette{width:72px}.cs-popin__titre{font-size:19px}}

/* ---- Messages de WooCommerce (partout : fiche, boutique, panier, commande, compte) : bandeau sobre, centré,
   sans filet de couleur ni icône ; le lien (« Voir le panier »…) en petites capitales soulignées. ---- */
:is(.woocommerce-notices-wrapper,.cs-tunnel,.woocommerce) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error){list-style:none;margin:0 0 28px;padding:18px 24px;border:0;border-radius:0;background:var(--surface);color:var(--encre);font-size:var(--t-petit);line-height:1.6;text-align:center;display:block}
:is(.woocommerce-notices-wrapper,.cs-tunnel,.woocommerce) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error)::before{content:none;display:none}
:is(.woocommerce-notices-wrapper,.cs-tunnel,.woocommerce) .woocommerce-error li{margin:0;padding:0}
:is(.woocommerce-notices-wrapper,.cs-tunnel,.woocommerce) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error) :is(.button,a){float:none;display:inline;margin-left:14px;padding:0 0 1px;background:none;border:0;border-bottom:1px solid currentColor;border-radius:0;color:var(--encre);font:inherit;font-size:var(--t-mini);letter-spacing:var(--ls-bouton);text-transform:uppercase;white-space:nowrap}
:is(.woocommerce-notices-wrapper,.cs-tunnel,.woocommerce) :is(.woocommerce-message,.woocommerce-info,.woocommerce-error) :is(.button,a):hover{background:none;color:var(--accent)}
.woocommerce-notices-wrapper:focus,.woocommerce-notices-wrapper :focus,[role="alert"]:focus{outline:none}