/**
 * Base — reset leger, document, typographie de base, accessibilite.
 * Ecrit a la main : pas de normalize.css importe.
 */

/* --- Reset leger --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul {
	margin: 0;
}

ul[class],
ol[class] {
	padding: 0;
	list-style: none;
}

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

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* --- Document --- */
body {
	background-color: var(--odg-desk);
	color: var(--odg-encre);
	font-family: var(--odg-police-ui);
	font-size: var(--odg-texte-16);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Le fond de page est --odg-desk ; le contenu, centre sur 1280 px, est sur --odg-papier. */
.odg-page {
	width: 100%;
	max-width: var(--odg-largeur-contenu);
	margin-inline: auto;
	background-color: var(--odg-papier);
}

.odg-contenu {
	padding: var(--odg-espace-48) var(--odg-espace-40);
}

/* --- Typographie de base --- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--odg-police-titre);
	font-weight: 500;
	line-height: 1.15;
	color: var(--odg-encre);
	text-wrap: balance;
}

h1 { font-size: var(--odg-texte-38); letter-spacing: -0.02em; }
h2 { font-size: var(--odg-texte-32); }
h3 { font-size: var(--odg-texte-28); }
h4 { font-size: var(--odg-texte-24); }
h5 { font-size: var(--odg-texte-22); }
h6 { font-size: var(--odg-texte-17); }

p {
	color: var(--odg-encre-douce);
	text-wrap: pretty;
}

a {
	color: var(--odg-vert-fonce);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--odg-terracotta);
}

strong, b { font-weight: 700; }

small { font-size: var(--odg-texte-13); }

hr {
	border: 0;
	border-top: 1px solid var(--odg-trait);
	margin: var(--odg-espace-40) 0;
}

/* --- Bouton ---
 * Composant global : utilise par l'accueil, l'encart produit du gabarit
 * d'article et les gabarits a venir. Il vit donc ici, dans la feuille enfilee
 * sur toutes les pages, et non dans une feuille d'ecran.
 */

/* Bouton primaire : plein vert, 15px/600, padding 15px 26px, rayon 999. */
.odg-bouton {
	display: inline-flex;
	align-items: baseline;
	gap: var(--odg-espace-8);
	padding: 15px 26px;
	border: 0;
	border-radius: var(--odg-rayon-999);
	font-family: var(--odg-police-ui);
	font-size: var(--odg-texte-15);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 250ms;
}

.odg-bouton--primaire {
	background-color: var(--odg-vert-fonce);
	color: var(--odg-papier);
}

.odg-bouton--inverse {
	background-color: var(--odg-creme);
	color: var(--odg-encre);
}

.odg-bouton:hover,
.odg-bouton:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--odg-ombre-survol);
}

.odg-bouton--primaire:hover,
.odg-bouton--primaire:focus-visible {
	color: var(--odg-papier);
}

.odg-bouton--inverse:hover,
.odg-bouton--inverse:focus-visible {
	color: var(--odg-encre);
}

.odg-bouton:active {
	transform: scale(0.985);
}

/* « à partir de 15 € » : meme ligne, graisse et opacite reduites. */
.odg-bouton__mention {
	font-weight: 400;
	opacity: 0.75;
}

/* --- Accessibilite --- */
:focus-visible {
	outline: 2px solid var(--odg-vert-fonce);
	outline-offset: 2px;
}

.odg-lien-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--odg-espace-12) var(--odg-espace-16);
	background: var(--odg-vert-fonce);
	color: var(--odg-papier);
	border-radius: 0 0 var(--odg-rayon-4) 0;
}

.odg-lien-evitement:focus {
	left: 0;
	color: var(--odg-papier);
}

/* Masque a l'oeil, lisible par les lecteurs d'ecran. */
.odg-lecteur-ecran {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Ecrans etroits — lot 5
 *
 * Deux paliers, partages par toutes les feuilles du theme :
 *
 * - 899 px : passage en une colonne. C'est la largeur en dessous de laquelle
 *   les gabarits a deux colonnes du handoff (fiche produit 46 % + reste,
 *   article corps + 200 px, accueil deux briques) ne tiennent plus. La valeur
 *   etait deja celle d'article.css ; produit.css etait a 900 px, ce qui
 *   laissait un pixel ou les deux feuilles se contredisaient.
 * - 767 px : mobile proprement dit, cible 375 px du handoff (« Ecran 4 »).
 *   En-tete compact, gouttieres de 16 px, barre d'achat persistante. Le seuil
 *   couvre les telephones en portrait comme en paysage sans attraper les
 *   tablettes, ou la barre persistante n'aurait pas de sens.
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	/*
	 * Gouttiere generique : 40 px sur desktop, 16 px en mobile. Elle sert le
	 * gabarit d'article, les pages fonctionnelles, le panier et le compte
	 * client — l'accueil, lui, annule ce padding et porte le sien.
	 */
	.odg-contenu {
		padding: var(--odg-espace-28) var(--odg-espace-16);
	}

	/* Une mesure de 68ch reste confortable ; c'est la taille qui doit baisser. */
	h1 { font-size: var(--odg-texte-32); }
	h2 { font-size: var(--odg-texte-28); }
	h3 { font-size: var(--odg-texte-24); }
	h4 { font-size: var(--odg-texte-22); }
}

/* --- Mouvement reduit : obligatoire (handoff, section « Interactions & motion design »). --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		animation-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	/*
	 * Lot 6 — le motion passe d'abord par `assets/js/motion-classe.js` (le seul
	 * script du <head>, coupe de `motion.js` au lot 7), qui refuse de
	 * poser la classe `.odg-motion` quand le mouvement reduit est demande : ni
	 * masquage, ni cascade du hero, ni compteurs (les chiffres restent a leur
	 * valeur finale rendue par le serveur, jamais 0).
	 *
	 * Ces trois regles sont le second verrou : elles couvrent le cas ou le
	 * reglage systeme change apres le chargement, la classe etant deja posee.
	 * Le raccourci `animation-duration: 0.01ms` ci-dessus suffirait a faire
	 * apparaitre le contenu, mais laisserait un `translate`/`scale` residuel sur
	 * les elements dont l'animation n'a pas encore demarre.
	 */
	.odg-motion .odg-anim,
	.odg-motion .odg-anim--masque,
	.odg-motion .odg-hero__texte > *,
	.odg-motion .odg-hero__visuels .odg-visuel,
	.odg-motion .odg-barre:not([hidden]) {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}

	/*
	 * Survol : aucun deplacement non plus (boutons, cartes de format, bouton
	 * d'ajout). `!important` est necessaire ici : formats.css et produit.css sont
	 * enfilees APRES base.css et portent les memes selecteurs, voire plus
	 * specifiques (`.woocommerce .odg-produit button.odg-bouton-ajout:hover`).
	 */
	.odg-bouton,
	.odg-format {
		transition: none !important;
	}

	.odg-bouton:hover,
	.odg-bouton:focus-visible,
	.odg-bouton:active,
	.odg-format:hover:not([disabled]),
	.odg-bouton-ajout:hover,
	.odg-bouton-ajout:focus-visible,
	.odg-bouton-ajout:active {
		transform: none !important;
	}
}