/**
 * Accueil — handoff, « Ecran 1 ».
 *
 * Toutes les mesures viennent du handoff, au pixel pres sur desktop 1280 px.
 * Les couleurs passent par les tokens : aucune valeur hexadecimale ici, sauf
 * les rgba() de placage des visuels en attente, qui n'ont pas de token.
 */

/*
 * Les sections de l'accueil portent leur propre padding (hero 64/40/56, briques
 * 48/40…). La gouttiere generique de .odg-contenu ferait donc double emploi.
 */
.home .odg-contenu {
	padding: 0;
}

/*
 * Le conteneur de notices est toujours rendu, mais WooCommerce y depose un
 * wrapper vide quand il n'y a rien a dire : la gouttiere haute n'est posee que
 * s'il porte reellement une notice, sinon l'accueil gagnerait 16 px de vide.
 */
.odg-accueil__notices {
	padding-inline: var(--odg-espace-40);
}

.odg-accueil__notices > .woocommerce-notices-wrapper:not(:empty) {
	padding-top: var(--odg-espace-16);
}

/* --- Elements communs --- */

/* Sur-titre : Karla 11px/700, interlettrage 0.18em, terracotta. */
.odg-surtitre {
	margin: 0;
	font-size: var(--odg-texte-11);
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--odg-terracotta);
}

.odg-surtitre--inverse {
	color: var(--odg-vert-pale);
}

/* Le composant .odg-bouton est global : il est defini dans base.css. */

/* Lien secondaire : terracotta, souligne 1px. */
.odg-lien-accent {
	font-size: var(--odg-texte-15);
	font-weight: 600;
	color: var(--odg-terracotta);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.odg-lien-accent:hover,
.odg-lien-accent:focus-visible {
	color: var(--odg-vert-fonce);
}

/*
 * Visuel en attente. Aucun asset definitif n'est fourni (handoff, section
 * « Assets ») : on rend le cadre au bon gabarit, hachure, avec la legende du
 * besoin — assez explicite pour qu'on ne le confonde pas avec une illustration.
 */
.odg-visuel {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: var(--odg-espace-12);
	border-radius: var(--odg-rayon-4);
	background-color: var(--odg-papier-2);
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(125, 130, 117, 0.14) 0 8px,
		rgba(125, 130, 117, 0) 8px 16px
	);
}

/*
 * Emplacement pourvu d'un visuel definitif. Meme boite, meme hauteur et meme
 * rayon que le cadre d'attente — seuls le hachurage et la gouttiere interieure
 * sautent, l'image occupant tout le cadre. Le motion du lot 6 vise `.odg-visuel`
 * et continue donc de s'appliquer.
 *
 * `object-fit: cover` plutot qu'une deformation : les deux visuels fournis n'ont
 * ni le meme format (1264x848 et 1536x1024) ni celui du cadre, qui est fixe par
 * le handoff. Le recadrage est centre.
 */
.odg-visuel--image {
	padding: 0;
	overflow: hidden;
	background-image: none;
}

.odg-visuel__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
}

/*
 * Exception : le schema des trois etapes.
 *
 * `cover` convient a une photographie — le hero garde donc son cadre de 340 px et
 * son recadrage. Il ne convient pas a un schema legende. Le cadre des ressources
 * avait une hauteur fixe (260 px, 200 px en mobile) pour une largeur qui suit la
 * colonne : il devenait plus panoramique que la source (rapport 1,5) des que
 * cette largeur depassait 390 px, ce qui est le cas partout. `cover` remplissait
 * alors la largeur puis rognait la hauteur, et les trois titres
 * « 1 Positionner les greffons », « 2 Ligaturer avec Sylvalien », « 3 Greffe
 * terminee » disparaissaient du rendu. Le visuel cense expliquer le geste
 * n'expliquait plus rien.
 *
 * Direction retenue : ce seul emplacement abandonne sa hauteur fixe et epouse le
 * rapport de la source (1536x1024 = 3/2). La hauteur devient donc fonction de la
 * largeur, et differe de celle du cadre hachure qu'il remplace — c'est assume :
 * un schema se lit en entier ou ne se lit pas.
 *
 * Pourquoi pas `contain` dans le cadre existant : il aurait laisse deux bandes
 * au-dessus et en dessous. Le fond du schema est blanc pur, celui de la section
 * est `--odg-papier` (#fbfaf5) — `--odg-papier-2` (#f5f3ec) est plus eloigne
 * encore. Aucun des deux tokens n'est blanc : la bande se serait vue comme un
 * defaut d'affichage. En faisant coincider les rapports, il n'y a pas de bande du
 * tout, et `cover` ne rogne plus rien de perceptible (les vignettes de srcset
 * arrondissent a 1024x683, soit 0,05 % d'ecart — moins d'un demi-pixel).
 *
 * Deux classes : la regle passe donc devant `.odg-visuel--ressources`, y compris
 * la hauteur de 200 px du palier mobile, ou le cadre etait encore plus
 * panoramique (343x200, rapport 1,7) et le rognage donc pire.
 *
 * Mesure apres correction : 600x400 en desktop 1280 et 343x229 en 375, rapport
 * 1,500 et 1,498, image et cadre au pixel pres — aucun rognage, aucune bande.
 */
.odg-visuel--image.odg-visuel--ressources {
	height: auto;
	aspect-ratio: 3 / 2;
}

/*
 * L'image se dimensionne d'elle-meme au lieu de dependre d'un `height: 100%`
 * resolu contre une hauteur que le conteneur tient lui-meme de son
 * `aspect-ratio`. Le rapport rendu est alors celui du fichier, par construction,
 * et `object-fit` n'a plus rien a arbitrer. L'`aspect-ratio` du conteneur reste
 * utile : il reserve la place avant que l'image soit chargee, donc pas de saut de
 * mise en page.
 */
.odg-visuel--image.odg-visuel--ressources .odg-visuel__image {
	height: auto;
}

.odg-visuel__note {
	padding: 3px var(--odg-espace-8);
	border-radius: 2px;
	background-color: var(--odg-papier);
	font-size: var(--odg-texte-11);
	letter-spacing: 0.02em;
	color: var(--odg-gris-texte);
}

/* --- Hero : flex, gap 56px, padding 64px 40px 56px, align-items center. --- */
.odg-hero {
	display: flex;
	align-items: center;
	gap: var(--odg-espace-56);
	padding: var(--odg-espace-64) var(--odg-espace-40) var(--odg-espace-56);
}

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

.odg-hero__titre {
	margin-top: var(--odg-espace-16);
	font-size: var(--odg-texte-56);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.odg-hero__chapo {
	max-width: 30em;
	margin-top: var(--odg-espace-24);
	font-size: var(--odg-texte-17);
	line-height: 1.6;
	color: var(--odg-encre-douce);
}

.odg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--odg-espace-24);
	margin-top: var(--odg-espace-28);
}

/* Trois puces : Karla 13px, pastille 6px, gap 18px. */
.odg-puces {
	display: flex;
	flex-wrap: wrap;
	gap: var(--odg-espace-18);
	margin-top: var(--odg-espace-24);
	font-size: var(--odg-texte-13);
	color: var(--odg-encre-douce);
}

.odg-puces li {
	display: flex;
	align-items: center;
	gap: var(--odg-espace-8);
}

.odg-puces li::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: var(--odg-rayon-999);
	background-color: var(--odg-vert-fonce);
}

/* Colonne visuelle : 460px fixes, image 460x340 puis deux images de 110px. */
.odg-hero__visuels {
	flex: 0 0 460px;
	display: flex;
	flex-direction: column;
	gap: var(--odg-espace-12);
}

.odg-visuel--hero {
	height: 340px;
}

.odg-hero__paire {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--odg-espace-12);
}

.odg-visuel--paire {
	height: 110px;
}

/*
 * --- Bande de reassurance ---
 * Les separateurs de 1px sont le fond de la grille vu au travers du `gap`.
 * Le nombre de cellules varie (une cellule sans donnee disparait) : le gabarit
 * pose `--odg-colonnes`. `auto-fit` ferait le meme rendu mais en creant des
 * centaines de pistes vides, ce qui n'est pas une base saine.
 */
.odg-reassurance {
	display: grid;
	grid-template-columns: repeat(var(--odg-colonnes, 4), 1fr);
	gap: 1px;
	background-color: var(--odg-trait);
	border-top: 1px solid var(--odg-trait);
	border-bottom: 1px solid var(--odg-trait);
}

.odg-reassurance__cellule {
	display: flex;
	flex-direction: column;
	gap: var(--odg-espace-4);
	padding: 22px 26px;
	background-color: var(--odg-papier-2);
}

.odg-reassurance__chiffre {
	font-family: var(--odg-police-titre);
	font-size: var(--odg-texte-22);
	font-weight: 600;
	line-height: 1.2;
	color: var(--odg-encre);
}

.odg-reassurance__libelle {
	font-size: var(--odg-texte-13);
	line-height: 1.45;
	color: var(--odg-encre-douce);
}

/* --- Les deux briques : deux colonnes, gap 24px, padding 48px 40px. --- */
.odg-briques {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--odg-espace-24);
	padding: var(--odg-espace-48) var(--odg-espace-40);
	align-items: stretch;
}

/*
 * Poids visuel equivalent : meme padding, meme rayon, meme hauteur (`stretch`),
 * et le bouton pousse en bas des deux cotes. La brique 2 n'est pas un encart.
 */
.odg-brique {
	display: flex;
	flex-direction: column;
	padding: var(--odg-espace-28);
	border-radius: var(--odg-rayon-5);
}

.odg-brique--materiel {
	border: 1px solid var(--odg-trait-fort);
	background-color: var(--odg-papier);
}

.odg-brique--carnet {
	background-color: var(--odg-vert-fonce);
	color: var(--odg-vert-texte);
}

.odg-brique__titre {
	margin-top: var(--odg-espace-12);
	font-size: var(--odg-texte-28);
	font-weight: 500;
	line-height: 1.15;
}

.odg-brique--carnet .odg-brique__titre {
	color: var(--odg-creme);
}

.odg-brique__texte {
	margin-top: var(--odg-espace-16);
	font-size: var(--odg-texte-15);
	line-height: 1.6;
}

.odg-brique--carnet .odg-brique__texte {
	color: var(--odg-vert-texte);
}

/* La brique 1 est un formulaire : il porte la colonne, pas seulement les cartes. */
.odg-brique__achat {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.odg-brique__achat .odg-selecteur {
	margin-top: var(--odg-espace-24);
}

/* `margin-top: auto` : le bouton s'aligne en bas, les deux briques finissent ensemble. */
.odg-brique__bouton {
	align-self: flex-start;
	margin-top: auto;
	padding-top: var(--odg-espace-16);
	padding-bottom: var(--odg-espace-16);
}

.odg-brique__achat .odg-brique__bouton {
	margin-top: var(--odg-espace-24);
}

.odg-visuel--carnet {
	height: 200px;
	margin-top: var(--odg-espace-24);
	background-color: rgba(242, 241, 231, 0.08);
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(242, 241, 231, 0.12) 0 8px,
		rgba(242, 241, 231, 0) 8px 16px
	);
}

/*
 * Exception, deuxieme cas : le montage du Carnet.
 *
 * Meme piege qu'au schema des trois etapes, en pire. Le visuel livre est un
 * montage a deux panneaux (1575x998, rapport 1,578), chacun portant un ecran de
 * telephone et du texte fin. Le cadre, lui, faisait 532x200 en desktop
 * (rapport 2,66) et 343x160 en mobile (2,14) : `cover` aurait remplit la largeur
 * puis rogne pres de 40 % de la hauteur, coupant les titres des deux panneaux
 * — « Tout votre greffage, dans votre poche » et « Des statistiques pour
 * comprendre et progresser » — donc exactement ce qui porte le sens.
 *
 * Ce cadre epouse donc le rapport de la source, comme celui des ressources. La
 * hauteur passe de 200 a 337 px en desktop : c'est le maximum lisible que cet
 * emplacement puisse offrir, et la brique 1 suit par `align-items: stretch`.
 *
 * Le fond n'a pas besoin d'etre traite : la marge exterieure du montage est un
 * aplat uniforme mesure a #f5f2e9 sur les quatre bords, soit --odg-creme (#f2f1e7)
 * a un point pres. Sur le vert fonce de la brique, l'image se lit comme une carte
 * creme, pas comme un rectangle rapporte. Le hachurage du cadre d'attente saute
 * avec `.odg-visuel--image` ; son fond translucide reste declare mais l'image le
 * recouvre entierement, les deux rapports coincidant.
 */
.odg-visuel--image.odg-visuel--carnet {
	height: auto;
	aspect-ratio: 1575 / 998;
}

/*
 * Comme aux ressources : l'image se dimensionne d'elle-meme plutot que de
 * resoudre `height: 100%` contre une hauteur que le conteneur tient de son
 * `aspect-ratio`. Le rapport rendu est celui du fichier, `object-fit` n'arbitre
 * plus rien, et l'`aspect-ratio` du conteneur reserve la place avant le
 * chargement — pas de saut de mise en page.
 */
.odg-visuel--image.odg-visuel--carnet .odg-visuel__image {
	height: auto;
}

.odg-visuel--carnet .odg-visuel__note {
	background-color: rgba(34, 38, 31, 0.55);
	color: var(--odg-vert-pale);
}

/* --- Avis : trois colonnes, gap 16px, filet superieur 2px. --- */
.odg-temoignages {
	padding: 0 var(--odg-espace-40) var(--odg-espace-48);
}

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

.odg-temoignage {
	display: flex;
	flex-direction: column;
	gap: var(--odg-espace-8);
	padding-top: var(--odg-espace-12);
	border-top: 2px solid var(--odg-encre);
}

.odg-temoignage__etoiles {
	font-size: var(--odg-texte-13);
	letter-spacing: 0.05em;
	color: var(--odg-terracotta);
}

.odg-temoignage__texte {
	font-family: var(--odg-police-titre);
	font-size: var(--odg-texte-17);
	line-height: 1.45;
	color: var(--odg-encre);
}

.odg-temoignage__attribution {
	font-size: var(--odg-texte-12);
	color: var(--odg-gris-texte);
}

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

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

/* --- Guide & ressources : deux colonnes 46% / reste, gap 40px. --- */
.odg-ressources {
	display: flex;
	align-items: flex-start;
	gap: var(--odg-espace-40);
	padding: 0 var(--odg-espace-40) var(--odg-espace-64);
}

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

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

.odg-ressources__titre {
	margin-top: var(--odg-espace-12);
	font-size: var(--odg-texte-32);
	font-weight: 500;
	line-height: 1.15;
}

.odg-ressources__chapo {
	margin-top: var(--odg-espace-16);
	font-size: var(--odg-texte-15);
	line-height: 1.6;
	color: var(--odg-encre-douce);
}

.odg-ressources__liste {
	margin-top: var(--odg-espace-24);
	font-size: var(--odg-texte-14);
}

.odg-ressources__liste li + li {
	border-top: 1px solid var(--odg-trait);
}

.odg-ressources__liste a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--odg-espace-16);
	padding: var(--odg-espace-12) 0;
	color: var(--odg-encre);
	transition: color 200ms;
}

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

.odg-ressources__fleche {
	flex: 0 0 auto;
	color: var(--odg-gris-texte);
}

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

.odg-visuel--ressources {
	height: 260px;
}

/* -------------------------------------------------------------------------
 * Ecrans etroits — lot 5.
 *
 * Le handoff ne dessine que la fiche produit en mobile (« Ecran 4 »). L'accueil
 * est donc adapte en suivant le systeme deja pose : les gabarits a deux colonnes
 * passent en pile a 899 px, les gouttieres de 40 px tombent a 16 px a 767 px, et
 * la seule taille qui change est celle du H1 — 56 px depasse la largeur d'un
 * telephone des le premier mot. On descend a 32 px, valeur de l'echelle
 * typographique du handoff, pas une taille inventee.
 * ---------------------------------------------------------------------- */
@media (max-width: 899px) {
	.odg-hero {
		flex-direction: column;
		align-items: stretch;
		gap: var(--odg-espace-40);
	}

	.odg-hero__visuels {
		flex: 1 1 auto;
	}

	/* Quatre cellules a 26 px de padding ne tiennent plus : deux lignes de deux. */
	.odg-reassurance {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.odg-briques,
	.odg-temoignages__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	.odg-ressources {
		flex-direction: column;
	}

	.odg-ressources__texte,
	.odg-ressources__visuel {
		flex: 1 1 auto;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.odg-accueil__notices {
		padding-inline: var(--odg-espace-16);
	}

	.odg-hero {
		gap: var(--odg-espace-28);
		padding: var(--odg-espace-40) var(--odg-espace-16) var(--odg-espace-28);
	}

	.odg-hero__titre {
		font-size: var(--odg-texte-32);
	}

	.odg-hero__chapo {
		font-size: var(--odg-texte-16);
	}

	/* Les deux actions se lisent l'une sous l'autre plutot que serrees cote a cote. */
	.odg-hero__actions {
		gap: var(--odg-espace-16);
	}

	.odg-hero__actions .odg-bouton {
		justify-content: center;
		width: 100%;
	}

	/*
	 * Hauteur de frappe (lot 7). Le lien ne faisait que 24 px de haut — sa boite
	 * de ligne — contre les 44 px tenus partout ailleurs en mobile. Il reste un
	 * lien souligne : c'est la zone cliquable qui grandit, pas le dessin. La
	 * pleine largeur suit celle du bouton juste au-dessus, dont il est
	 * l'alternative.
	 */
	.odg-hero__actions .odg-lien-accent {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 44px;
	}

	.odg-visuel--hero {
		height: 220px;
	}

	.odg-visuel--paire {
		height: 90px;
	}

	.odg-reassurance__cellule {
		padding: var(--odg-espace-18) var(--odg-espace-16);
	}

	.odg-briques {
		gap: var(--odg-espace-16);
		padding: var(--odg-espace-28) var(--odg-espace-16);
	}

	.odg-brique {
		padding: var(--odg-espace-24) var(--odg-espace-18);
	}

	.odg-brique__titre {
		font-size: var(--odg-texte-24);
	}

	.odg-brique__bouton {
		align-self: stretch;
		justify-content: center;
	}

	.odg-visuel--carnet {
		height: 160px;
	}

	.odg-temoignages {
		padding: 0 var(--odg-espace-16) var(--odg-espace-28);
	}

	.odg-ressources {
		gap: var(--odg-espace-28);
		padding: 0 var(--odg-espace-16) var(--odg-espace-40);
	}

	.odg-ressources__titre {
		font-size: var(--odg-texte-28);
	}

	/* Hauteur de frappe : 14 px de texte + 2 x 15 px de padding = 44 px. */
	.odg-ressources__liste a {
		padding: 15px 0;
	}

	.odg-visuel--ressources {
		height: 200px;
	}
}