/**
 * Poderm — feuille de base (jetons de design, typographie, composants communs).
 * Aucune ressource externe : polices Texta locales, tout est auto-hébergé.
 *
 * Jetons consommés par theme-shop (contrat) :
 *   --color-foreground / --color-foreground-rgb / --color-background / --color-accent
 *   --color-muted / --color-border / --color-gray-1..3 / --color-blue / --color-blue-light
 *   --font-body-family / --font-body-weight / --font-heading-family / --font-heading-weight
 *   --page-width / --page-gutter / --grid-gap-desktop / --grid-row-gap-desktop
 *   --grid-gap-mobile / --grid-row-gap-mobile / --buttons-radius / --buttons-height
 *   --inputs-radius / --color-sale / --color-sale-bg
 */

/* ------------------------------------------------------------------
 * 1. Polices locales (Texta — WOFF2, aucune requête externe)
 * ------------------------------------------------------------------ */
@font-face {
	font-family: 'Texta';
	src: url('../fonts/Texta-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Texta';
	src: url('../fonts/Texta-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Texta';
	src: url('../fonts/Texta-It.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Texta';
	src: url('../fonts/Texta-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Texta';
	src: url('../fonts/Texta-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Texta';
	src: url('../fonts/Texta-Heavy.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Texta';
	src: url('../fonts/Texta-Black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------
 * 2. Jetons de design (mesurés sur la référence à 1440 px)
 * ------------------------------------------------------------------ */
:root {
	/* Couleurs */
	--color-foreground: #2c303b;
	--color-foreground-rgb: 44, 48, 59;
	--color-background: #ffffff;
	--color-background-rgb: 255, 255, 255;
	--color-accent: #c81e39;
	--color-accent-rgb: 200, 30, 57;
	--color-sale: #c81e39;
	--color-sale-bg: #fdeaed;
	--color-muted: #888c96;
	--color-white: #ffffff;
	--color-black: #2c303b;
	--color-dark: #000000;
	--color-gray-1: #f5f5f7;
	--color-gray-2: #d9dce4;
	--color-gray-3: #888c96;
	--color-blue: #81b3bd;
	--color-blue-light: #c1d8df;
	--color-turquoise: #58818a;
	--color-green: #45bd8c;
	--color-border: rgba(44, 48, 59, 0.12);
	--color-border-soft: rgba(44, 48, 59, 0.08);
	--color-overlay: rgba(44, 48, 59, 0.5);

	/* Typographie */
	--font-body-family: 'Texta', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--font-heading-family: 'Texta', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--font-body-weight: 400;
	--font-body-weight-light: 300;
	--font-body-weight-medium: 500;
	--font-body-weight-bold: 700;
	--font-body-weight-heavy: 800;
	--font-heading-weight: 400;
	--font-body-size: 1.6rem;
	--font-body-line-height: 1.1;

	/* Grille */
	--page-width: 250rem; /* 2500 px : pleine largeur Dawn */
	--page-gutter: 4rem; /* 40 px desktop */
	--page-gutter-mobile: 1.4rem;
	--grid-gap-desktop: 20px;
	--grid-row-gap-desktop: 40px;
	--grid-gap-mobile: 12px;
	--grid-row-gap-mobile: 24px;

	/* Composants */
	--buttons-radius: 3px;
	--buttons-radius-outset: 4px;
	--buttons-height: 44px;
	--inputs-radius: 3px;
	--inputs-border-width: 1px;
	--badge-radius: 0px;
	--card-radius: 0px;
	--media-radius: 0px;
	--variant-pills-radius: 6px;

	/* Animations */
	--duration-short: 0.1s;
	--duration-default: 0.25s;
	--duration-long: 0.45s;

	/* En-tête (mesuré : barre d'annonce 35 px, header 91.6 px) */
	--announcement-height: 35px;
	--header-height: 91.6px;
	--header-z: 100;
}

/* ------------------------------------------------------------------
 * 3. Reset minimal
 * ------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 62.5%; /* 1rem = 10px */
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	background: var(--color-background);
	color: var(--color-foreground);
	font-family: var(--font-body-family);
	font-size: var(--font-body-size);
	font-weight: var(--font-body-weight);
	line-height: 1.76rem; /* référence : 17.6 px fixes (Dawn) */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.no-scroll {
	overflow: hidden;
}

img,
svg,
video,
iframe,
picture {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
	border: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--color-accent);
}

button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	margin: 0;
	font-family: var(--font-heading-family);
	font-weight: var(--font-heading-weight);
	line-height: 1;
	letter-spacing: 0;
	color: var(--color-foreground);
	text-transform: uppercase;
}

h1,
.h1 {
	font-size: 5rem;
}

h2,
.h2 {
	font-size: 4rem;
}

h3,
.h3 {
	font-size: 2.4rem;
}

h4,
.h4 {
	font-size: 2rem;
}

h5,
.h5 {
	font-size: 1.8rem;
}

h6,
.h6 {
	font-size: 1.6rem;
}

/* ------------------------------------------------------------------
 * 4. Mise en page
 * ------------------------------------------------------------------ */
.page-width {
	width: 100%;
	max-width: var(--page-width);
	margin: 0 auto;
	padding-left: var(--page-gutter);
	padding-right: var(--page-gutter);
}

.page-width--full {
	padding-left: 0;
	padding-right: 0;
}

.section {
	padding: 0;
}

.section__heading {
	margin: 0;
	font-size: 4rem;
	line-height: 1;
	font-weight: 400;
	text-transform: uppercase;
}

.section__heading--center {
	text-align: center;
}

.section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 2.4rem;
}

.grid {
	display: grid;
	gap: var(--grid-gap-desktop);
}

.grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ------------------------------------------------------------------
 * 5. Utilitaires
 * ------------------------------------------------------------------ */
.visually-hidden,
.sr-only {
	position: absolute !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
}

.hidden {
	display: none !important;
}

.text-center {
	text-align: center;
}

.text-uppercase {
	text-transform: uppercase;
}

.no-wrap {
	white-space: nowrap;
}

:focus-visible {
	outline: 0.2rem solid var(--color-accent);
	outline-offset: 0.3rem;
}

.skip-to-content-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: var(--color-background);
	padding: 1rem 2rem;
}

.skip-to-content-link:focus {
	left: 0;
}

/* ------------------------------------------------------------------
 * 6. Boutons
 * ------------------------------------------------------------------ */
.button,
.btn,
button.button,
input[type='submit'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	min-height: var(--buttons-height);
	padding: 1.2rem 2.4rem;
	border: 1px solid var(--color-foreground);
	border-radius: var(--buttons-radius);
	background: var(--color-foreground);
	color: var(--color-white);
	font-family: var(--font-body-family);
	font-size: 1.4rem;
	font-weight: var(--font-body-weight-medium);
	letter-spacing: 0.1rem;
	line-height: 1.1;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--duration-default) ease, color var(--duration-default) ease, border-color var(--duration-default) ease;
}

.button:hover,
.btn:hover,
button.button:hover,
input[type='submit']:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-white);
}

.button--secondary {
	background: transparent;
	color: var(--color-foreground);
}

.button--secondary:hover {
	background: var(--color-foreground);
	color: var(--color-white);
	border-color: var(--color-foreground);
}

.button--accent {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-white);
}

.button--accent:hover {
	background: var(--color-foreground);
	border-color: var(--color-foreground);
}

.button--small {
	min-height: 34px;
	padding: 0.8rem 1.6rem;
	font-size: 1.3rem;
}

.button--full {
	width: 100%;
}

.link-underline {
	text-decoration: underline;
	text-underline-offset: 0.4rem;
	text-decoration-thickness: 0.1rem;
	transition: text-decoration-thickness var(--duration-short) ease;
}

.link-underline:hover {
	text-decoration-thickness: 0.2rem;
	color: var(--color-foreground);
}

/* Lien « tout voir » de la référence : souligné fin, flèche */
.link-all {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.4rem;
	font-weight: var(--font-body-weight-medium);
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.4rem;
	text-decoration-thickness: 0.1rem;
}

.link-all svg {
	width: 1.4rem;
	height: 1.4rem;
}

/* ------------------------------------------------------------------
 * 7. Formulaires (thème-shop consomme ces bases)
 * ------------------------------------------------------------------ */
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='search'],
input[type='number'],
textarea,
select,
.field__input {
	width: 100%;
	min-height: 44px;
	padding: 1.1rem 1.4rem;
	border: var(--inputs-border-width) solid var(--color-gray-2);
	border-radius: var(--inputs-radius);
	background: var(--color-white);
	color: var(--color-foreground);
	font-family: var(--font-body-family);
	font-size: 1.5rem;
	line-height: 1.3;
	transition: border-color var(--duration-default) ease;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='tel']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='number']:focus,
textarea:focus,
select:focus {
	border-color: var(--color-foreground);
	outline: none;
}

textarea {
	min-height: 12rem;
	resize: vertical;
}

label {
	display: inline-block;
	margin-bottom: 0.6rem;
	font-size: 1.4rem;
	font-weight: var(--font-body-weight-medium);
}

.checkbox,
.radio {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	font-size: 1.4rem;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
 * 8. Prix (partagés avec la carte produit et la boutique)
 * ------------------------------------------------------------------ */
.price {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.6rem;
	font-size: 1.6rem;
	font-weight: var(--font-body-weight-bold);
	line-height: 1.1;
	color: var(--color-foreground);
}

.price__regular {
	text-decoration: line-through;
	color: var(--color-muted);
	font-weight: var(--font-body-weight);
}

.price__sale {
	color: var(--color-foreground);
	font-weight: var(--font-body-weight-bold);
}

.price__badge {
	color: var(--color-accent);
}

/* ------------------------------------------------------------------
 * 9. Badges
 * ------------------------------------------------------------------ */
.badge {
	display: inline-block;
	padding: 0.1rem 0.8rem;
	border-radius: var(--badge-radius);
	background: var(--color-white);
	color: var(--color-foreground);
	font-size: 1.4rem;
	font-weight: var(--font-body-weight-heavy);
	line-height: 1.1;
	letter-spacing: 0.02rem;
	text-transform: uppercase;
}

.badge--sale {
	background: var(--color-accent);
	color: var(--color-white);
}

/* ------------------------------------------------------------------
 * 10. Médias / images produit
 * ------------------------------------------------------------------ */
.media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--color-gray-1);
}

.media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.media--product {
	background: var(--color-gray-1);
}

/* ------------------------------------------------------------------
 * 11. Accessibilité / impression
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------
 * 12. Responsive : gouttières
 * ------------------------------------------------------------------ */
@media screen and (max-width: 749px) {
	:root {
		--page-gutter: var(--page-gutter-mobile);
		--grid-row-gap-desktop: var(--grid-row-gap-mobile);
	}

	h1,
	.h1,
	h2,
	.h2,
	.section__heading {
		font-size: 4rem;
	}

	.grid--4,
	.grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--grid-gap-mobile);
	}
}

/* ------------------------------------------------------------------
 * 13. Carte produit partagée (home + PLP + PDP)
 * ------------------------------------------------------------------ */
.card-product {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
}

.card-product__media {
	position: relative;
	display: block;
	padding-top: 109.89%; /* ratio 1500 × 1650 de la référence */
	overflow: hidden;
	background: var(--color-gray-1);
}

.card-product__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-product__img--secondary {
	opacity: 0;
	transition: opacity var(--duration-default) ease;
}

.card-product__media:hover .card-product__img--secondary {
	opacity: 1;
}

.card-product__badge {
	position: absolute;
	top: 11px;
	left: 12px;
	z-index: 1;
	margin: 0;
	background: var(--color-accent);
	color: var(--color-white);
	font-size: 1.4rem;
	font-weight: var(--font-body-weight-heavy);
	line-height: 1.1;
	letter-spacing: 0.028rem;
	text-transform: uppercase;
	padding: 1px 8px;
}

.card-product__info {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 8px 0 10px;
}

.card-product .card-product__title {
	margin: 0 0 10px;
	font-size: 1.8rem;
	font-weight: var(--font-body-weight-heavy);
	line-height: 1;
	letter-spacing: 0.016rem;
	text-transform: uppercase;
	min-height: 1.8rem;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-product__title a {
	color: var(--color-foreground);
}

.card-product__title a:hover {
	color: var(--color-accent);
}

.card-product__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 18px;
	line-height: 18px;
	margin: 0 0 10px;
	font-size: 1.2rem;
	color: var(--color-muted);
}

.card-product__stars {
	font-size: 1.2rem;
	line-height: 18px;
	letter-spacing: 0.1rem;
	color: var(--color-foreground);
}

.card-product__reviews-count {
	font-size: 1.2rem;
	line-height: 18px;
	color: var(--color-muted);
}

.card-product__price {
	margin: 0 0 9px;
	font-size: 1.8rem;
	font-weight: var(--font-body-weight-bold);
	letter-spacing: 0.016rem;
}

.card-product__price .price__regular {
	color: var(--color-muted);
	font-weight: 400;
	text-decoration: line-through;
}

.card-product__price .price__sale {
	color: var(--color-accent);
	font-weight: 700;
}

.card-product__bullets {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	overflow: hidden;
}

.card-product__bullets li {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.1;
	color: var(--color-foreground);
	margin-bottom: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-product__bullets li:last-child {
	margin-bottom: 0;
}

.card-product__bullets li::before {
	content: '•';
	margin-right: 0.6rem;
	color: var(--color-muted);
}

.card-product__add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 42px;
	margin-top: 17px;
	border-radius: 3px;
	background: var(--color-foreground);
	color: var(--color-white);
	font-size: 1.4rem;
	font-weight: var(--font-body-weight-heavy);
	letter-spacing: 0.07rem;
	line-height: 1;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	transition: background-color var(--duration-default) ease;
}

.card-product__add:hover {
	background: var(--color-accent);
	color: var(--color-white);
}

.card-product__add--disabled {
	background: var(--color-gray-2);
	color: var(--color-muted);
	cursor: not-allowed;
}