/* ==========================================================================
   Cosmoshop : fiche produit premium (02/10/2026, agent Site)
   Chargé seulement sur les fiches produit, après direction.css (cosmo-fiche.php, cosmo_fp_styles).
   Direction de l'accueil (design Novamira « Cosmoshop, le monde dans votre cuisine ») : bleu nuit #080E19,
   turquoise #087D89 pour les actions sur fond clair, or #FFC52C et cyan #35B9CA sur fond nuit, gris #F5F7F6,
   bordures #DCE3E4, rayon 8px, cartes sans ombre. Variables courtes (--night, --teal…) : site.css de l'accueil.
   Retour arrière : supprimer ce fichier (la fiche reprend les styles de style.css et direction.css).
   ========================================================================== */

.cosmo-fiche {
	--fp-nuit: var(--night, #080e19);
	--fp-encre: var(--ink, #15202b);
	--fp-gris: var(--muted, #586772);
	--fp-turquoise: var(--teal, #087d89);
	--fp-turquoise-fonce: var(--teal-dark, #06616b);
	--fp-turquoise-doux: #e6f2f3;
	--fp-cyan: var(--cyan, #35b9ca);
	--fp-or: var(--gold, #ffc52c);
	--fp-surface: var(--paper, #f5f7f6);
	--fp-ligne: var(--line, #dce3e4);
	--fp-ligne-nuit: #25303c;
	--fp-texte-clair: #e0e8ed;
	--fp-gris-clair: #aebbc6;
	--fp-ambre: #b26a00;
	padding-bottom: 88px;
}

/* ---------- Zone haute ---------- */
@media (min-width: 900px) {
	.cosmo-fiche .cosmo-fiche__haut { grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.88fr); gap: 64px; margin-top: 8px; }
}

/* Photo sur fond uni, comme avant la refonte (02/10/2026 soir, demande du propriétaire :
   ni filigrane, ni dégradé, ni ombre derrière le produit). Cadre = surface grise unie de direction.css. */
.cosmo-fiche .cosmo-galerie__scene { position: relative; background: none; }
.cosmo-fiche .cosmo-galerie__cadre { position: relative; background: var(--fp-surface); border: 0; border-radius: 8px; }
.cosmo-fiche .cosmo-galerie__image { padding: 7% 9% 9%; background: transparent; mix-blend-mode: multiply; transition: transform 0.25s ease; }
.cosmo-fiche .cosmo-galerie__zoom { z-index: 2; border-color: var(--fp-ligne); background: rgba(255, 255, 255, 0.92); }
.cosmo-fiche .cosmo-galerie__zoom:hover { border-color: var(--fp-turquoise); color: var(--fp-turquoise); }
.cosmo-fiche .cosmo-galerie__vignette { background: var(--fp-surface); border-color: transparent; }
.cosmo-fiche .cosmo-galerie__vignette img { mix-blend-mode: multiply; }
.cosmo-fiche .cosmo-galerie__vignette[aria-pressed="true"] { border-color: var(--fp-turquoise); background: #fff; }
.cosmo-fiche .cosmo-galerie--vide .cosmo-galerie__cadre { background: var(--fp-surface); }
@media (prefers-reduced-motion: reduce) { .cosmo-fiche .cosmo-galerie__image { transition: none; } }

/* ---------- Colonne d'achat ---------- */
.cosmo-fiche .cosmo-fiche__marque { margin-bottom: 10px; font-size: 12px; letter-spacing: 0.1em; }
.cosmo-fiche .cosmo-fiche__nom { margin-bottom: 18px; font-size: clamp(30px, 3.1vw, 42px); line-height: 1.08; letter-spacing: -0.035em; color: var(--fp-encre); }
.cosmo-fiche .cosmo-fiche__meta { gap: 8px 10px; }
.cosmo-fiche .cosmo-fiche__contenance,
.cosmo-fiche .cosmo-fiche__origine {
	display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 14px;
	border-radius: 999px; font-size: 14px; font-weight: 650; line-height: 1.2;
}
.cosmo-fiche .cosmo-fiche__contenance { background: var(--fp-surface); color: var(--fp-encre); }
.cosmo-fiche .cosmo-fiche__origine { background: var(--fp-turquoise-doux); color: var(--fp-turquoise-fonce); text-decoration: none; }
.cosmo-fiche .cosmo-fiche__origine:hover { background: var(--fp-turquoise); color: #fff; }
.cosmo-fiche .cosmo-fiche__origine .cosmo-ico { width: 16px; height: 16px; }
.cosmo-fiche .cosmo-fiche__resume { margin-top: 18px; font-size: 15px; line-height: 1.6; }
.cosmo-fiche .cosmo-fiche__resume a { color: var(--fp-turquoise); }

/* Prix : le chiffre d'abord, le prix au kilo ou au litre juste dessous */
.cosmo-fiche .cosmo-prix { margin-top: 24px; padding: 22px 0 20px; border: 0; border-block: 1px solid var(--fp-ligne); border-radius: 0; background: transparent; }
.cosmo-fiche .cosmo-prix__actuel { font-size: clamp(40px, 4vw, 52px); font-weight: 750; letter-spacing: -0.04em; color: var(--fp-encre); }
.cosmo-fiche .cosmo-prix__actuel--promo { color: #c2410c; }
.cosmo-fiche .cosmo-prix__unite { margin-top: 8px !important; font-size: 14px; font-weight: 600; color: var(--fp-gris); }
.cosmo-fiche .cosmo-prix__absent { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; color: var(--fp-encre); }
.cosmo-fiche .cosmo-prix__note { margin-top: 6px !important; font-size: 14px; color: var(--fp-gris); }

/* Encadrés avant l'achat */
.cosmo-fiche .cosmo-allergenes { margin-top: 18px; background: var(--fp-surface); border: 1px solid var(--fp-ligne); }
.cosmo-fiche .cosmo-achat { display: block; margin-top: 20px; }
.cosmo-fiche .cosmo-achat > .cosmo-achat__bouton:disabled { width: 100%; }
.cosmo-fiche .cosmo-achat__bouton { min-height: 54px; font-size: 16px; font-weight: 700; }
.cosmo-fiche .cosmo-garanties { gap: 12px; margin-top: 24px; padding-top: 20px; }
.cosmo-fiche .cosmo-garanties li { font-size: 14px; color: var(--fp-encre); }

/* ---------- Bande « Provenance » (bleu nuit) ---------- */
.cosmo-provenance {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin: 72px 0 0; padding: 28px 24px;
	overflow: hidden; border-radius: 8px; background: var(--fp-nuit); color: var(--fp-texte-clair); scroll-margin-top: 80px;
}
.cosmo-provenance__art { width: 104px; }
.cosmo-provenance__globe { display: block; width: 100%; height: auto; fill: none; stroke: var(--fp-cyan); stroke-width: 1.3; stroke-opacity: 0.75; }
.cosmo-provenance__globe .is-orbite { stroke: var(--fp-or); stroke-opacity: 0.9; stroke-width: 1.5; }
.cosmo-provenance__globe .is-or { fill: var(--fp-or); stroke: none; }
.cosmo-provenance__label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fp-cyan); }
.cosmo-provenance__titre { margin: 0; font-size: clamp(34px, 4.2vw, 56px); font-weight: 750; line-height: 1.04; letter-spacing: -0.04em; color: #fff; text-wrap: balance; }
.cosmo-provenance__note { margin: 12px 0 0; max-width: 40ch; font-size: 14px; line-height: 1.5; color: var(--fp-gris-clair); }
.cosmo-provenance__reperes { display: grid; gap: 0; margin: 0; }
.cosmo-provenance__reperes > div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--fp-ligne-nuit); }
.cosmo-provenance__reperes > div:first-child { border-top: 0; padding-top: 0; }
.cosmo-provenance__reperes dt { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fp-gris-clair); }
.cosmo-provenance__reperes dt .cosmo-ico { width: 16px; height: 16px; color: var(--fp-cyan); }
.cosmo-provenance__reperes dd { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; color: #fff; }
.cosmo-provenance__reperes dd small { font-size: 13px; font-weight: 500; color: var(--fp-gris-clair); }
.cosmo-provenance__reperes a { color: var(--fp-or); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cosmo-provenance__reperes a:hover { color: #fff; }
.cosmo-provenance :focus-visible { outline-color: var(--fp-or); }
@media (min-width: 700px) {
	.cosmo-provenance { grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 28px 40px; padding: 40px; }
	.cosmo-provenance__art { width: 150px; }
	.cosmo-provenance__reperes { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 32px; padding-top: 24px; border-top: 1px solid var(--fp-ligne-nuit); }
	.cosmo-provenance__reperes > div, .cosmo-provenance__reperes > div:first-child { padding: 0; border: 0; }
}
@media (min-width: 1100px) {
	.cosmo-provenance { grid-template-columns: 190px minmax(0, 1fr) minmax(300px, 0.85fr); padding: 48px 56px; gap: 56px; }
	.cosmo-provenance__art { width: 190px; }
	.cosmo-provenance__reperes { grid-column: auto; grid-template-columns: minmax(0, 1fr); padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--fp-ligne-nuit); }
	.cosmo-provenance__reperes > div { padding: 14px 0; border-top: 1px solid var(--fp-ligne-nuit); }
	.cosmo-provenance__reperes > div:first-child { padding-top: 0; border-top: 0; }
	.cosmo-provenance__reperes > div:last-child { padding-bottom: 0; }
}

/* ---------- Ancres et sections ---------- */
.cosmo-fiche .cosmo-ancres { margin-top: 40px; }
.cosmo-fiche .cosmo-ancres ul { gap: 30px; }
.cosmo-fiche .cosmo-ancres a { font-size: 14px; }
.cosmo-fiche .cosmo-infos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; columns: auto; }
.cosmo-fiche .cosmo-infos__col { display: grid; gap: 20px; align-content: start; }
@media (min-width: 900px) {
	.cosmo-fiche .cosmo-infos--deux { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 24px; }
	.cosmo-fiche .cosmo-infos__col { gap: 24px; }
}
.cosmo-fiche .cosmo-infos__bloc { margin: 0; padding: 26px 22px; border: 1px solid var(--fp-ligne); border-radius: 8px; background: #fff; }
@media (min-width: 900px) { .cosmo-fiche .cosmo-infos__bloc { padding: 32px 36px; } }
.cosmo-fiche .cosmo-infos__titre { margin: 0 0 16px; font-size: 21px; font-weight: 750; line-height: 1.15; letter-spacing: -0.02em; color: var(--fp-encre); }
.cosmo-fiche .cosmo-infos__contenu { font-size: 16px; line-height: 1.65; }
.cosmo-fiche .cosmo-infos__contenu p { color: var(--fp-gris); }
.cosmo-fiche .cosmo-infos__contenu a { color: var(--fp-turquoise); }
.cosmo-fiche .cosmo-infos__ingredients { color: var(--fp-encre) !important; }
.cosmo-fiche .cosmo-infos__ingredients strong { font-weight: 750; text-transform: uppercase; letter-spacing: 0.02em; }

/* Allergènes dans la section */
.cosmo-fiche .cosmo-infos__allergenes { margin: 16px 0 0; padding: 16px 18px; border: 1px solid var(--fp-ligne); border-radius: 8px; background: var(--fp-surface); }
.cosmo-fiche .cosmo-infos__allergenes p { margin: 0 !important; color: var(--fp-encre); }
.cosmo-fiche .cosmo-infos__allergenes-titre { display: flex; align-items: center; gap: 8px; }
.cosmo-fiche .cosmo-infos__allergenes-titre .cosmo-ico { color: var(--fp-ambre); }
.cosmo-fiche .cosmo-infos__allergenes-titre + p { margin-top: 8px !important; font-size: 15px; }
.cosmo-fiche .cosmo-infos__puces { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.cosmo-fiche .cosmo-infos__puces li { padding: 4px 14px; border: 1.5px solid var(--fp-ambre); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--fp-encre); }

/* Paragraphe avec pictogramme (conservation, pour l'apprécier) */
.cosmo-fiche .cosmo-infos__icone { display: flex; align-items: flex-start; gap: 14px; margin: 0 !important; }
.cosmo-fiche .cosmo-infos__icone .cosmo-ico { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; color: var(--fp-turquoise); }
.cosmo-fiche .cosmo-infos__bloc--apprecier { border-color: transparent; background: var(--fp-turquoise-doux); }
.cosmo-fiche .cosmo-infos__bloc--apprecier .cosmo-infos__contenu p { color: var(--fp-encre); }

/* Nutrition : énergie en tête, repères en grammes pour 100 g */
.cosmo-fiche .cosmo-nut__energie { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 18px !important; padding-bottom: 16px; border-bottom: 1px solid var(--fp-ligne); }
.cosmo-fiche .cosmo-nut__kcal { font-size: 44px; font-weight: 750; line-height: 1; letter-spacing: -0.04em; color: var(--fp-encre); font-variant-numeric: tabular-nums; }
.cosmo-fiche .cosmo-nut__unite { font-size: 14px; font-weight: 600; color: var(--fp-gris); }
.cosmo-fiche .cosmo-nutrition { font-size: 15px; }
.cosmo-fiche .cosmo-nutrition caption { padding-bottom: 12px; font-size: 13px; line-height: 1.45; color: var(--fp-gris); }
.cosmo-fiche .cosmo-nutrition thead th { border-bottom: 2px solid var(--fp-encre); font-size: 12px; color: var(--fp-gris); }
.cosmo-fiche .cosmo-nutrition tbody th, .cosmo-fiche .cosmo-nutrition td { padding: 11px 0; border-bottom-color: var(--fp-ligne); vertical-align: top; }
.cosmo-fiche .cosmo-nutrition td { padding-left: 16px; white-space: nowrap; color: var(--fp-encre); }
.cosmo-nut__barre { display: block; height: 4px; margin-top: 8px; max-width: 220px; border-radius: 999px; background: var(--fp-surface, #f5f7f6); overflow: hidden; }
.cosmo-nut__barre > span { display: block; height: 100%; border-radius: 999px; background: var(--fp-turquoise, #087d89); }
.cosmo-nutrition__sous .cosmo-nut__barre > span { background: var(--fp-cyan, #35b9ca); }

/* Informations légales */
.cosmo-fiche .cosmo-infos__liste { gap: 12px 28px; }
.cosmo-fiche .cosmo-infos__liste dt { font-size: 14px; color: var(--fp-gris); }
.cosmo-fiche .cosmo-infos__liste dd { font-size: 15px; font-weight: 600; color: var(--fp-encre); }
.cosmo-fiche .cosmo-infos__bloc--avis { margin-top: 24px; }
.cosmo-fiche .cosmo-infos__source { margin-top: 18px; font-size: 13px; color: var(--fp-gris); }

/* ---------- Produits du même rayon (carte produit commune) ---------- */
.cosmo-fiche .cosmo-assoc { margin-top: 80px; }
.cosmo-fiche .cosmo-assoc__entete { align-items: flex-end; margin-bottom: 20px; }
.cosmo-fiche .cosmo-assoc__entete h2 { font-size: clamp(27px, 3vw, 36px); font-weight: 750; letter-spacing: -0.035em; line-height: 1.08; }
.cosmo-fiche .cosmo-assoc__sous { margin: 6px 0 0; font-size: 15px; font-weight: 600; }
.cosmo-fiche .cosmo-assoc__sous a { color: var(--fp-turquoise); text-decoration: none; }
.cosmo-fiche .cosmo-assoc__sous a:hover { text-decoration: underline; }
.cosmo-fiche .cosmo-assoc__piste { gap: 16px; padding: 2px 2px 18px; }
.cosmo-fiche .cosmo-assoc__item { display: flex; flex: 0 0 168px; scroll-snap-align: start; }
.cosmo-fiche .cosmo-assoc__item > .cosmo-carte { flex: 1 1 auto; width: 100%; }
@media (min-width: 600px) { .cosmo-fiche .cosmo-assoc__item { flex-basis: 210px; } }
@media (min-width: 1100px) { .cosmo-fiche .cosmo-assoc__item { flex-basis: calc((100% - 5 * 16px) / 6); min-width: 190px; } }
.cosmo-fiche .cosmo-assoc__tout { margin: 6px 0 0; }
.cosmo-fiche .cosmo-assoc__tout a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--fp-turquoise); text-decoration: underline; text-underline-offset: 4px; }
.cosmo-fiche .cosmo-assoc__tout a:hover { color: var(--fp-turquoise-fonce); }