/**
 * Fiche produit — handoff, « Ecran 2 ».
 *
 * Toutes les mesures viennent du handoff. Les couleurs passent par les tokens :
 * aucune valeur hexadecimale n'est ecrite ici.
 */

/* --- Mise en page : deux colonnes, gap 48 px, padding 40 px. --- */
.odg-produit__colonnes {
	display: flex;
	align-items: flex-start;
	gap: var(--odg-espace-48);
	padding: var(--odg-espace-40);
}

.odg-produit__visuels {
	flex: 0 0 46%;
	min-width: 0;
}

.odg-produit__achat {
	flex: 1 1 auto;
	min-width: 0;
}

/* --- Galerie : visuel principal 420 px, vignettes 76 px. --- */
.odg-galerie {
	margin: 0;
}

.odg-galerie__principal {
	height: 420px;
	overflow: hidden;
	border-radius: var(--odg-rayon-4);
	background-color: var(--odg-papier-2);
}

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

.odg-galerie__vignettes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--odg-espace-12);
	margin-top: var(--odg-espace-12);
}

.odg-galerie__vignette {
	height: 76px;
	overflow: hidden;
	border-radius: var(--odg-rayon-4);
	background-color: var(--odg-papier-2);
}

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

/* --- Fil d'Ariane : Karla 12 px, gris tertiaire. --- */
.odg-fil,
.odg-fil .woocommerce-breadcrumb {
	font-size: var(--odg-texte-12);
	color: var(--odg-gris-texte);
	margin: 0;
}

.odg-fil a {
	color: var(--odg-gris-texte);
}

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

/* --- Titre : Newsreader 38 px / 500, interligne 1.1. Le suffixe sort du H1. --- */
.odg-produit__titre {
	margin-top: var(--odg-espace-8);
	font-size: var(--odg-texte-38);
	font-weight: 500;
	line-height: 1.1;
}

.odg-produit__suffixe {
	margin-top: var(--odg-espace-4);
	font-size: var(--odg-texte-14);
	color: var(--odg-gris-texte);
}

/* --- Ligne de confiance : 13 px, etoiles terracotta. --- */
.odg-confiance {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--odg-espace-8);
	margin-top: var(--odg-espace-12);
	font-size: var(--odg-texte-13);
	color: var(--odg-encre-douce);
}

.odg-confiance__etoiles {
	color: var(--odg-terracotta);
	letter-spacing: 0.06em;
}

.odg-confiance__separateur {
	color: var(--odg-gris-texte);
}

/* --- Accroche --- */
.odg-produit__accroche {
	margin-top: var(--odg-espace-18);
	max-width: 34em;
}

.odg-produit__accroche p {
	font-size: var(--odg-texte-16);
	color: var(--odg-encre-douce);
}

/*
 * Le selecteur de format et les cartes vivent desormais dans formats.css :
 * l'accueil (lot 3) affiche les memes cartes et ne peut pas charger toute la
 * feuille de la fiche produit. Cette feuille en depend a l'enfilement.
 */

/* --- Quantite et bouton d'ajout --- */
.odg-achat__ligne {
	display: flex;
	align-items: stretch;
	gap: var(--odg-espace-12);
	margin-top: var(--odg-espace-24);
}

.odg-stepper {
	display: flex;
	align-items: center;
	gap: var(--odg-espace-4);
	padding: 0 var(--odg-espace-8);
	border: 1px solid var(--odg-encre);
	border-radius: var(--odg-rayon-999);
}

.odg-stepper__bouton {
	width: 28px;
	height: 44px;
	font-size: var(--odg-texte-16);
	line-height: 1;
	color: var(--odg-encre);
}

.odg-stepper .quantity {
	margin: 0;
}

.odg-stepper__champ,
.odg-stepper input.qty {
	width: 2.5ch;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: var(--odg-texte-15);
	-moz-appearance: textfield;
	appearance: textfield;
}

.odg-stepper input.qty::-webkit-outer-spin-button,
.odg-stepper input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce .odg-produit button.odg-bouton-ajout,
.woocommerce .odg-produit button.odg-bouton-ajout.button {
	flex: 1 1 auto;
	padding: var(--odg-espace-16) 26px;
	border: 0;
	border-radius: var(--odg-rayon-999);
	background-color: var(--odg-vert-fonce);
	color: var(--odg-creme);
	font-family: var(--odg-police-ui);
	font-size: var(--odg-texte-16);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 250ms;
}

.woocommerce .odg-produit button.odg-bouton-ajout:hover:not(.disabled) {
	background-color: var(--odg-vert-fonce);
	transform: translateY(-2px);
	box-shadow: var(--odg-ombre-survol-ajout);
}

.woocommerce .odg-produit button.odg-bouton-ajout:active:not(.disabled) {
	transform: scale(0.985);
}

.woocommerce .odg-produit button.odg-bouton-ajout.disabled,
.woocommerce .odg-produit button.odg-bouton-ajout[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Le prix natif de la variation fait doublon avec le libelle du bouton. */
.odg-achat .woocommerce-variation-price,
.odg-achat .woocommerce-variation-description {
	display: none;
}

/* La disponibilite est deja dite dans la ligne de confiance, sous le titre. */
.odg-achat .woocommerce-variation-availability {
	display: none;
}

/* --- Encart livraison : sous le bouton, sans defilement. --- */
.odg-livraison {
	margin-top: var(--odg-espace-16);
	padding: var(--odg-espace-16) var(--odg-espace-18);
	border-radius: var(--odg-rayon-4);
	background-color: var(--odg-papier-2);
	font-size: var(--odg-texte-13);
	color: var(--odg-encre-douce);
}

.odg-livraison__ligne {
	margin: 0;
	font-size: inherit;
	color: inherit;
	line-height: 1.55;
}

.odg-livraison__ligne strong {
	color: var(--odg-encre);
}

/* --- Onglets --- */
.odg-produit__onglets {
	margin-top: var(--odg-espace-40);
}

/*
 * WooCommerce dessine ses onglets en pastilles grises avec des pseudo-elements
 * arrondis aux angles. Le handoff demande de simples libelles soulignes par un
 * filet de 2 px sur l'onglet actif : la mise en forme native est donc annulee.
 */
.woocommerce div.product .odg-produit__onglets .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--odg-espace-24);
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--odg-trait);
	list-style: none;
}

.woocommerce div.product .odg-produit__onglets .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .odg-produit__onglets .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.woocommerce div.product .odg-produit__onglets .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .odg-produit__onglets .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .odg-produit__onglets .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 var(--odg-espace-12);
	border-bottom: 2px solid transparent;
	font-size: var(--odg-texte-15);
	font-weight: 400;
	color: var(--odg-gris-texte);
	text-shadow: none;
}

.woocommerce div.product .odg-produit__onglets .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--odg-encre);
	color: var(--odg-encre);
	font-weight: 500;
}

.woocommerce div.product .odg-produit__onglets .woocommerce-Tabs-panel {
	padding-top: var(--odg-espace-24);
}

.woocommerce div.product .odg-produit__onglets .woocommerce-Tabs-panel > h2 {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* --- Fiche technique : grille 2 colonnes, filets pointilles. --- */
.odg-fiche-technique {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--odg-espace-40);
	margin: 0;
}

.odg-fiche-technique__ligne {
	display: flex;
	gap: var(--odg-espace-8);
	padding: var(--odg-espace-12) 0;
	border-bottom: 1px dashed var(--odg-pointille);
	font-size: var(--odg-texte-14);
}

.odg-fiche-technique dt {
	color: var(--odg-encre);
	font-weight: 500;
	white-space: nowrap;
}

.odg-fiche-technique dt::after {
	content: " —";
	color: var(--odg-gris-texte);
}

.odg-fiche-technique dd {
	flex: 1 1 auto;
	margin: 0;
	text-align: left;
	color: var(--odg-encre-douce);
}

/* --- Mode d'emploi --- */
.odg-utilisation__intro p {
	font-size: var(--odg-texte-15);
}

.odg-utilisation {
	display: grid;
	gap: var(--odg-espace-12);
	margin: var(--odg-espace-18) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: odg-etape;
}

.odg-utilisation__etape {
	counter-increment: odg-etape;
	display: grid;
	grid-template-columns: 8em 1fr;
	gap: var(--odg-espace-12);
	padding-bottom: var(--odg-espace-12);
	border-bottom: 1px dashed var(--odg-pointille);
	font-size: var(--odg-texte-14);
}

.odg-utilisation__titre {
	font-weight: 700;
	color: var(--odg-encre);
}

.odg-utilisation__titre::before {
	content: counter(odg-etape) ". ";
	color: var(--odg-terracotta);
}

.odg-utilisation__texte {
	color: var(--odg-encre-douce);
}

/* --- Questions --- */
.odg-questions {
	margin: 0;
}

.odg-questions__ligne {
	padding: var(--odg-espace-12) 0;
	border-bottom: 1px dashed var(--odg-pointille);
}

.odg-questions dt {
	font-size: var(--odg-texte-15);
	font-weight: 700;
	color: var(--odg-encre);
}

.odg-questions dd {
	margin: var(--odg-espace-4) 0 0;
	font-size: var(--odg-texte-14);
	color: var(--odg-encre-douce);
}

/* --- Avis : trois colonnes, gap 16 px, filet superieur 2 px. --- */
.odg-avis__provenance {
	font-size: var(--odg-texte-13);
	color: var(--odg-gris-texte);
}

.odg-avis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--odg-espace-16);
	margin-top: var(--odg-espace-18);
}

.odg-avis__carte {
	margin: 0;
	padding-top: var(--odg-espace-12);
	border-top: 2px solid var(--odg-encre);
}

.odg-avis__etoiles {
	display: block;
	font-size: var(--odg-texte-13);
	color: var(--odg-terracotta);
}

.odg-avis__texte {
	margin: var(--odg-espace-8) 0 0;
	padding: 0;
	border: 0;
	font-family: var(--odg-police-titre);
	font-size: var(--odg-texte-17);
	line-height: 1.45;
	color: var(--odg-encre);
}

.odg-avis__attribution {
	margin-top: var(--odg-espace-8);
	font-size: var(--odg-texte-12);
	color: var(--odg-gris-texte);
}

/* -------------------------------------------------------------------------
 * Barre d'achat persistante — handoff, « Ecran 4 — Mobile »
 *
 * « position: sticky; bottom: 0, fond #f5f3ec, filet superieur 1px solid
 * #e6e3d6, padding 12px 16px. A gauche le format retenu (11px #7d8275) et son
 * prix (Newsreader 20px), a droite le bouton d'ajout. »
 *
 * Trois choses a savoir en lisant ces regles :
 *
 * 1. La barre est rendue avec l'attribut `hidden` et c'est le script qui le
 *    retire quand le bouton d'ajout principal sort du champ de vision. Sans
 *    JavaScript, elle ne s'affiche donc jamais — plutot qu'un bouton inerte,
 *    conformement a la consigne « le site doit rester utilisable sans JS ».
 *    D'ou la regle `[hidden]` explicite : sans elle, le `display: flex`
 *    ci-dessous l'emporterait sur le comportement natif de l'attribut.
 * 2. Elle est mobile uniquement : hors du palier, `display: none` sans
 *    condition.
 * 3. Elle est posee en dernier enfant de `.odg-page` (voir footer.php) : c'est
 *    ce bloc qui lui sert de bloc conteneur, et le collage au bas de la fenetre
 *    tient donc sur toute la hauteur du document. Le motion d'entree
 *    (translateY) est le lot 6, il n'est volontairement pas ecrit ici.
 * ---------------------------------------------------------------------- */
.odg-barre {
	display: none;
}

/* -------------------------------------------------------------------------
 * Ecrans etroits — 899 px, passage en une colonne.
 *
 * L'empilement des cartes de format vit dans formats.css : l'accueil affiche
 * les memes cartes sans charger cette feuille.
 * ---------------------------------------------------------------------- */
@media (max-width: 899px) {
	.odg-produit__colonnes {
		flex-direction: column;
		gap: var(--odg-espace-24);
		padding: var(--odg-espace-24);
	}

	.odg-produit__visuels {
		flex: 1 1 auto;
		width: 100%;
	}

	.odg-fiche-technique,
	.odg-avis {
		grid-template-columns: minmax(0, 1fr);
	}

	.odg-achat__ligne {
		flex-wrap: wrap;
	}
}

/* -------------------------------------------------------------------------
 * Mobile — cible 375 px (handoff, « Ecran 4 », maquette dessinee a 300 px).
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	/*
	 * Gouttiere unique (lot 7). `.odg-contenu` pose deja les 16 px du palier
	 * mobile (base.css) et toute la fiche vit dans ce bloc : garder ici un
	 * padding horizontal de 16 px cumulait deux gouttieres a 32 px par cote et
	 * ramenait les cartes de format a 311 px dans une fenetre de 375, la ou le
	 * handoff les veut en pleine largeur. On supprime le cumul a la source
	 * plutot que de le compenser par une marge negative : le padding horizontal
	 * tombe a 0 et la fiche mesure 343 px, comme le reste du site.
	 */
	.odg-produit__colonnes {
		padding: var(--odg-espace-24) 0;
	}

	/* Le visuel principal de 420 px mangerait la moitie d'un ecran de telephone. */
	.odg-galerie__principal {
		height: 260px;
	}

	.odg-galerie__vignettes {
		gap: var(--odg-espace-8);
	}

	.odg-galerie__vignette {
		height: 64px;
	}

	/* Handoff, « Ecran 4 » : titre Newsreader 24 px. */
	.odg-produit__titre {
		font-size: var(--odg-texte-24);
	}

	/*
	 * Stepper et bouton ne tiennent pas sur une ligne a 375 px : le stepper garde
	 * sa largeur naturelle, le bouton passe dessous en pleine largeur.
	 */
	.woocommerce .odg-produit button.odg-bouton-ajout,
	.woocommerce .odg-produit button.odg-bouton-ajout.button {
		flex: 1 1 100%;
	}

	.odg-produit__onglets {
		margin-top: var(--odg-espace-28);
	}

	.woocommerce div.product .odg-produit__onglets .woocommerce-tabs ul.tabs {
		gap: 0 var(--odg-espace-16);
	}

	.woocommerce div.product .odg-produit__onglets .woocommerce-tabs ul.tabs li a {
		padding: var(--odg-espace-8) 0 var(--odg-espace-12);
		font-size: var(--odg-texte-14);
	}

	.odg-utilisation__etape {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--odg-espace-4);
	}

	/* --- La barre d'achat persistante --- */
	.odg-barre {
		position: sticky;
		bottom: 0;
		z-index: 20;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--odg-espace-16);
		padding: var(--odg-espace-12) var(--odg-espace-16);
		border-top: 1px solid var(--odg-trait);
		background-color: var(--odg-papier-2);
	}

	.odg-barre[hidden] {
		display: none;
	}

	.odg-barre__format {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.odg-barre__libelle {
		font-size: var(--odg-texte-11);
		line-height: 1.3;
		color: var(--odg-gris-texte);
	}

	/*
	 * 20 px : valeur du handoff pour cette barre. L'echelle typographique
	 * (56/38/32/28/24/22/17/16/15/14/13/12/11/10) ne la porte pas, il n'y a donc
	 * pas de token a utiliser — meme cas que les 26 px du prix des cartes et les
	 * 18 px du nom de marque.
	 */
	.odg-barre__prix {
		font-family: var(--odg-police-titre);
		font-size: 20px;
		font-weight: 500;
		line-height: 1.2;
		color: var(--odg-encre);
	}

	/*
	 * Le bouton reprend le composant .odg-bouton de base.css. Ne reste ici que
	 * la hauteur de frappe et le fait qu'il ne se laisse pas comprimer par le
	 * libelle de gauche.
	 */
	.odg-barre__bouton {
		flex: 0 0 auto;
		min-height: 44px;
		padding: var(--odg-espace-12) var(--odg-espace-24);
		white-space: nowrap;
	}

	.odg-barre__bouton[disabled] {
		opacity: 0.45;
		cursor: not-allowed;
	}
}