@font-face {
	font-family: "Quicksand";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/quicksand-700.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("fonts/poppins-300.woff2") format("woff2");
}

:root {
	--v-fond: #DCE8EA;
	--v-panneau: #F4FAFB;
	--v-teal: #0E5464;
	--v-teal-vif: #1B7F91;
	--v-teal-nuit: #08323C;
	--v-rose: #EA80FC;
	--v-rose-texte: #B23CC8;
	--v-fuchsia: #D500F9;
	--v-menthe: #1DE9B6;
	--v-anis: #B7CE1F;
	--v-anis-voile: #F6F8DA;
	--v-prune: #78008C;
	--v-erreur: #A80D35;
	--v-erreur-voile: #FFE3E9;
	--v-encre: #2C4650;
	--v-doux: #3E5660;
	--v-blanc: #FFFFFF;
	--v-police-mot: "Quicksand", var(--police);
	--v-geant: 48px;
	--v-titre: 40px;
	--v-titre-carte: 28px;
	--v-intertitre: 20px;
	--v-chapo: 18px;
	--v-texte: 16px;
	--v-petit: 14px;
	--v-bouton: 16px;
	--v-chiffre: 80px;
	--v-chiffre-petit: 32px;
	--v-section: clamp(48px, 42px + 1.524vw, 64px);
	--v-pad-panneau: clamp(24px, 15px + 2.286vw, 48px);
	--v-ecart-titre: clamp(12px, 10.5px + .381vw, 16px);
	--v-ecart-action: clamp(20px, 18.5px + .381vw, 24px);
	--v-rayon: clamp(24px, 19.5px + 1.143vw, 36px);
	--v-rayon-petit: clamp(16px, 14.5px + .381vw, 20px);
	--v-rayon-champ: 12px;
	--v-decale: clamp(8px, 5.8px + .571vw, 14px);
	--v-ombre-posee: 0 8px 24px rgb(8 50 60 / .12);
	--v-ombre-objet: drop-shadow(0 14px 18px rgb(8 50 60 / .2));
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 112px; }

body.vitrine {
	margin: 0;
	background: var(--v-fond);
	color: var(--v-encre);
	font-family: var(--police);
	font-size: var(--v-texte);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

h1, h2, h3 { margin: 0; color: var(--v-teal); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: var(--v-titre); letter-spacing: -.02em; line-height: 1.12; }
h2 { font-size: var(--v-titre); }
h3 { font-size: var(--v-intertitre); }
p, li { text-wrap: pretty; }
p { margin: 0; }
a { color: var(--v-teal); }
img { max-width: 100%; height: auto; }

.slogan { font-size: var(--v-titre); line-height: 1.12; }
.partage-texte h2, .final h2 { font-size: var(--v-geant); line-height: 1.08; }
.carte-menthe h2, .savoir h2, .offre h2 { font-size: var(--v-titre-carte); }
.texte-long h2 { font-size: var(--v-intertitre); letter-spacing: 0; }
.contact-aide h2 { font-size: var(--v-intertitre); }
.hero-fonction, .tete-panneau p, .carte-menthe p, .direct-panneau > p, .partage-texte p {
	font-size: var(--v-chapo);
	font-weight: 300;
	line-height: 1.5;
	color: var(--v-teal-nuit);
	max-width: 30em;
}
.mention { font-size: var(--v-petit); color: var(--v-doux); }
.mention strong { color: var(--v-teal); }

.mot {
	font-family: var(--v-police-mot);
	font-weight: 700;
	font-size: 1.125em;
	font-size: round(1.125em, 1px);
	line-height: 1;
	letter-spacing: -.005em;
	white-space: nowrap;
	color: var(--v-rose-texte);
}
.mot--menthe { color: var(--v-menthe); }
.mot--rose { color: var(--v-rose); }
.mot--prune { color: var(--v-prune); }

.ui-icone {
	width: 1.2em;
	height: 1.2em;
	flex: 0 0 auto;
	vertical-align: -.2em;
	fill: none;
	stroke: currentColor;
	vector-effect: non-scaling-stroke;
}

:focus-visible { outline: 3px solid var(--v-focus, var(--v-teal)); outline-offset: 3px; border-radius: 8px; }
:is(.hero-panneau, .direct-panneau, .partage-texte, .final, .pied, .offre--devis, .fonction--nuit .panneau, .nav-mobile-liste) { --v-focus: var(--v-menthe); }

.insecable { white-space: nowrap; }

[hidden] { display: none !important; }
.fpil:focus-visible { border-radius: var(--r-pilule); }

.evitement {
	position: absolute;
	left: 16px;
	top: -60px;
	padding: 8px 16px;
	background: var(--v-teal);
	color: #fff !important;
	border-radius: 9px;
	z-index: 30;
}
.evitement:focus { top: 8px; }

.cadre { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.cadre--etroit { max-width: 860px; }

.bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 26px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	font-size: var(--v-bouton);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, filter .15s;
}
@media (hover: hover) {
	.bouton:hover { filter: brightness(1.05); }
}
.bouton--rose { background: var(--v-rose); color: var(--v-teal-nuit); }
.bouton--anis { background: var(--v-anis); color: var(--v-teal-nuit); }
.bouton--contour { background: transparent; color: var(--v-teal); border-color: var(--v-teal); }
.bouton--contour-clair { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .75); }
.bouton--grand { min-height: 56px; padding: 0 28px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lien-fort { display: inline-flex; align-items: center; gap: 6px; padding-block: 8px; font-weight: 700; font-size: var(--v-texte); text-decoration: none; color: var(--v-teal); }
@media (hover: hover) { .lien-fort:hover { text-decoration: underline; text-underline-offset: 4px; } }

.entete { position: sticky; top: 0; z-index: 20; padding-top: 16px; margin-bottom: -88px; pointer-events: none; }
.entete-pilule {
	position: relative;
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 72px;
	padding: 0 12px 0 28px;
	border-radius: 999px;
	box-shadow: var(--v-ombre-posee);
}
.entete-pilule::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgba(244, 250, 251, .94);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.entete-logo { display: flex; flex: none; padding: 8px 0; }
.logo { height: 40px; width: auto; display: block; }
.nav { display: flex; gap: 4px; margin: 0 auto; }
.nav a { padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: var(--v-petit); color: var(--v-teal-nuit); text-decoration: none; transition: background-color .15s; }
@media (hover: hover) { .nav a:hover { background: var(--v-fond); } }
.nav a[aria-current="page"] { background: var(--v-menthe); }
.entete-actions { display: flex; align-items: center; gap: 8px; }
.entete-connexion {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 14px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	color: var(--v-teal);
	font-weight: 600;
	font-size: var(--v-petit);
	text-decoration: none;
}
@media (hover: hover) { .entete-connexion:hover { background: var(--v-fond); color: var(--v-teal); } }
.entete-action { min-height: 48px; padding: 0 20px; font-size: var(--v-petit); }
.nav-mobile { display: none; }

.fond-caddies { background: var(--v-teal) url("img/vitrine/fond-caddies.webp") center / cover no-repeat; }

.carte-photo {
	position: relative;
	margin: 0;
	border-radius: var(--v-rayon);
	overflow: hidden;
	box-shadow: var(--v-decale) var(--v-decale) 0 var(--ombre-carte, var(--v-teal-nuit));
	transform: rotate(var(--angle, -3deg));
	background: var(--v-teal);
}
.carte-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carte-photo::after {
	content: "";
	position: absolute;
	top: 22px;
	right: 22px;
	width: 46px;
	height: 52px;
	background: url("img/vitrine/signe-blanc.svg") center / contain no-repeat;
	opacity: .85;
}
.carte--menthe { background: var(--v-menthe); }
.carte--anis { background: var(--v-anis); }
.carte--teal { background: var(--v-teal); }
.carte-ecran { padding: 32px 28px; }
.carte-ecran::after { display: none; }

.panneau { background: var(--v-panneau); border-radius: var(--v-rayon); }

.bande { padding: var(--v-section) 0; }
.bande--gris { background: var(--v-fond); }
.bande--clair { background: var(--v-panneau); }
.bande--rose { background: var(--v-rose); }
.bande--menthe { background: var(--v-menthe); }

.ecran { position: relative; padding-top: 24px; border-radius: 14px; background: #fff; overflow: hidden; }
.ecran::before { content: ""; position: absolute; top: 8px; left: 12px; width: 40px; height: 8px; background: radial-gradient(circle 4px at 4px 4px, var(--v-fond) 99%, transparent) 0 0 / 16px 8px repeat-x; }
.ecran img { display: block; width: 100%; height: auto; }

.hero { padding: 132px 0 104px; overflow-x: clip; }
.hero-cadre { display: grid; grid-template-columns: minmax(0, 1fr) 460px; align-items: center; }
.hero-panneau {
	position: relative;
	z-index: 1;
	margin-right: -100px;
	padding: 36px 148px 36px 48px;
	background: var(--v-teal-nuit);
	box-shadow: calc(-1 * var(--v-decale)) var(--v-decale) 0 var(--v-menthe);
}
.hero h1 { max-width: 22ch; color: #fff; }
.hero h1 .mot { color: var(--v-menthe); }
.hero .hero-fonction { margin-top: var(--v-ecart-titre); color: #D5E9EC; }
.hero .actions { margin-top: 20px; }
.hero .lien-fort { color: var(--v-menthe); }
.hero-garanties { list-style: none; margin: 21px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 24px; }
.hero-garanties li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--v-petit); line-height: 1.4; color: #D5E9EC; }
.hero-garanties .ui-icone { width: 16px; height: 16px; margin-top: 2px; color: var(--v-menthe); }
.hero-visuel { position: relative; z-index: 2; margin: 0 0 48px; translate: clamp(0px, 50vw - 630px, 40px) 40px; }
.hero-visuel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: var(--v-rayon);
	background: var(--v-anis);
	box-shadow: var(--v-decale) var(--v-decale) 0 var(--v-rose);
	transform: translate(-4%, -11%) rotate(-9deg) scale(.92);
}
.hero-carte { --angle: 4deg; padding: 84px 24px 24px; background: var(--v-rose); }
.hero-carte .ecran { box-shadow: var(--v-ombre-posee); }
.hero-telephone { position: absolute; z-index: 1; left: -120px; bottom: -40px; width: 150px; filter: drop-shadow(0 16px 28px rgb(0 0 0 / .35)); }
.origine-logo-lien { display: grid; place-items: center; aspect-ratio: 800 / 520; border-radius: 8px; }

.film { padding: 24px 0 var(--v-section); background: var(--v-panneau); }
.film-cadre { max-width: 1080px; text-align: center; }
.film h2 { margin-bottom: 28px; }
.film-ecran {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 9;
	border-radius: var(--v-rayon);
	overflow: hidden;
	background: var(--v-teal-nuit);
	box-shadow: var(--v-decale) var(--v-decale) 0 var(--v-rose);
}
.film-ecran img, .film-ecran video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-lancer {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 0;
	border: 0;
	background: rgb(8 50 60 / .18);
	font: inherit;
	color: #fff;
	cursor: pointer;
}
.film-rond { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--v-rose); color: var(--v-teal-nuit); box-shadow: 0 10px 30px rgb(8 50 60 / .35); transition: transform .2s ease; }
.film-rond svg { width: 34px; height: 34px; }
.film-duree { padding: 6px 14px; border-radius: var(--rayon-pilule); background: var(--v-teal-nuit); font-weight: 600; font-size: var(--v-petit); }
.film-lancer:focus-visible .film-rond { transform: scale(1.08); }
@media (hover: hover) { .film-lancer:hover .film-rond { transform: scale(1.08); } }
.film-lancer:focus-visible { outline: 3px solid var(--v-menthe); outline-offset: -6px; border-radius: var(--v-rayon); }
.film-ecran video { cursor: pointer; }
.film-ecran video:focus-visible { outline: 3px solid var(--v-menthe); outline-offset: -6px; border-radius: var(--v-rayon); }
.film-ecran--calme, .film-ecran--calme video { cursor: none; }
.film-barre { --avance: 0%; position: absolute; left: 28px; right: 28px; bottom: 22px; width: auto; height: 24px; margin: 0; padding: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; transition: opacity .2s ease; }
.film-ecran--calme .film-barre { opacity: 0; pointer-events: none; }
.film-barre:focus-visible { outline: 3px solid var(--v-menthe); outline-offset: 4px; border-radius: var(--rayon-pilule); }
.film-barre::-webkit-slider-runnable-track { height: 8px; border-radius: var(--rayon-pilule); background: linear-gradient(to right, var(--v-rose) var(--avance), rgb(255 255 255 / .45) var(--avance)); box-shadow: 0 2px 8px rgb(8 50 60 / .35); }
.film-barre::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6px; border: 4px solid var(--v-rose); border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgb(8 50 60 / .35); }
.film-barre::-moz-range-track { height: 8px; border-radius: var(--rayon-pilule); background: rgb(255 255 255 / .45); box-shadow: 0 2px 8px rgb(8 50 60 / .35); }
.film-barre::-moz-range-progress { height: 8px; border-radius: var(--rayon-pilule); background: var(--v-rose); }
.film-barre::-moz-range-thumb { box-sizing: border-box; width: 20px; height: 20px; border: 4px solid var(--v-rose); border-radius: 50%; background: #fff; }
@media (max-width: 640px) {
	.film-barre { left: 16px; right: 16px; bottom: 12px; }
}

.duo { --pile-decale: clamp(0px, 656px - 50vw, 36px); display: grid; grid-template-columns: 400px minmax(0, 1fr); align-items: center; }
.pile {
	--pose-0: translate(0%, 0%) rotate(-3deg) scale(1);
	--pose-1: translate(-8%, 2%) rotate(-10deg) scale(.95);
	--pose-2: translate(8%, 1%) rotate(6deg) scale(.93);
	--pose-fond: translate(1%, 14%) rotate(3deg) scale(.9);
	position: relative;
	z-index: 2;
	width: 100%;
	aspect-ratio: 4 / 5;
	margin-bottom: calc(var(--v-section) + 24px);
	translate: var(--pile-decale) 0;
}
.pile .carte-photo { position: absolute; inset: 0; z-index: 1; transform: var(--pose-2); will-change: transform; box-shadow: calc(var(--v-decale) / 2) calc(var(--v-decale) / 2) 0 var(--ombre-carte, var(--v-teal-nuit)); }
.pile .carte-photo::after { opacity: .55; }
.pile .carte-photo:first-child { z-index: 3; transform: var(--pose-0); }
.pile .carte-photo:nth-child(2) { z-index: 2; transform: var(--pose-1); }
.pile .carte-photo:last-of-type { z-index: 0; transform: var(--pose-fond); }
.pile-ombre { position: absolute; inset: 6% 8%; border-radius: var(--v-rayon); box-shadow: 0 28px 48px rgb(8 50 60 / .3); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.duo .panneau { margin-left: -60px; padding: var(--v-pad-panneau) var(--v-pad-panneau) var(--v-pad-panneau) calc(128px + var(--pile-decale)); }
.points-courts { list-style: none; margin: var(--v-ecart-titre) 0 0; padding: 0; display: grid; gap: 8px; }
.points-courts li { display: flex; gap: 12px; font-size: var(--v-texte); line-height: 1.5; color: var(--v-teal-nuit); }
.points-courts li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: var(--v-rose); }

.incline { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; max-width: 1080px; }
.comptez-visuel { position: relative; margin: 0; --angle: -4deg; --ombre-carte: var(--v-fuchsia); }
.comptez-visuel .carte-photo { aspect-ratio: 4 / 5; }
.comptez-visuel .carte-photo::after { opacity: .55; }
.comptez-objet { position: absolute; left: -6%; top: 5%; width: 21%; height: auto; transform: rotate(-8deg); filter: var(--v-ombre-objet); }
.pastille-appli { position: absolute; left: -9%; top: 34%; max-width: 36%; padding: 10px 14px; border-radius: 16px; background: #fff; box-shadow: var(--v-ombre-posee); font-size: var(--v-petit); font-weight: 600; line-height: 1.25; color: var(--v-teal-nuit); }
.pastille-appli b { display: block; font-size: var(--v-intertitre); color: var(--v-rose-texte); }
.carte-menthe { position: relative; padding: 44px 40px 96px; border-radius: var(--v-rayon); background: var(--v-menthe); transform: rotate(4deg); }
.carte-menthe::after {
	content: "";
	position: absolute;
	bottom: 26px;
	right: 30px;
	width: 46px;
	height: 52px;
	background: url("img/vitrine/signe-blanc.svg") center / contain no-repeat;
	opacity: .75;
}
.carte-menthe h2 { color: var(--v-teal-nuit); }
.carte-menthe p { margin-top: var(--v-ecart-titre); }
.carte-menthe p + p { margin-top: 8px; }

.puces { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; font-size: var(--v-texte); }
.puces li { display: flex; gap: 14px; align-items: flex-start; }
.puces li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--v-teal-nuit); }

.incline + .cadre { margin-top: 96px; max-width: 1080px; }
.causes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.cause:nth-child(9) { grid-column: 2 / span 2; }
.cause { grid-column: span 2; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-content: center; padding: 16px 18px 16px 14px; border-radius: var(--v-rayon-petit); background: var(--v-panneau); }
.cause img { grid-row: 1 / 3; align-self: center; width: 56px; height: 56px; object-fit: contain; }
.cause h3 { align-self: end; font-size: 18px; color: var(--v-teal-nuit); }
.cause p { margin-top: 4px; font-size: var(--v-petit); line-height: 1.4; color: var(--v-doux); }
.causes-appel { display: grid; gap: 4px; margin-top: 40px; text-align: center; font-size: var(--v-texte); color: var(--v-teal-nuit); }
.causes-appel b { font-size: var(--v-intertitre); }
.causes-appel p:last-child { margin-top: 8px; }
.causes-appel .lien-fort { color: var(--v-teal-nuit); }

.direct { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: center; }
.direct-visuel { position: relative; z-index: 2; margin: 0 -80px 0 0; }
.direct-photo { --angle: 3deg; --ombre-carte: var(--v-rose); aspect-ratio: 4 / 5; }
.direct { margin-bottom: 72px; }
.direct-panneau { position: relative; padding: var(--v-pad-panneau) var(--v-pad-panneau) calc(var(--v-pad-panneau) + 48px) 128px; background: var(--v-teal-nuit); }
.direct-fiche { position: absolute; right: -20px; bottom: -88px; z-index: 3; width: 200px; height: auto; transform: rotate(7deg); filter: drop-shadow(0 14px 24px rgb(8 50 60 / .3)); }
.direct-panneau h2, .direct-panneau > p, .direct-panneau li { color: #fff; }
.direct-panneau > p { margin-top: var(--v-ecart-titre); }
.direct-panneau li::before { background: var(--v-menthe); }
.direct-panneau .actions { margin-top: var(--v-ecart-action); }
.direct-panneau .lien-fort { color: var(--v-menthe); }

.collectes { background: var(--v-fond); padding: var(--v-section) 0; }
.collectes h2 { color: var(--v-teal-nuit); }
.collectes-nb { margin-top: 8px; color: var(--v-doux); }
.collectes-cartes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.collecte { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; border-radius: var(--v-rayon-petit); background: var(--v-panneau); box-shadow: var(--v-decale) var(--v-decale) 0 var(--v-teal-nuit); color: var(--v-teal-nuit); text-decoration: none; transition: translate .2s; }
@media (hover: hover) { .collecte:hover { translate: 0 -3px; } }
.collecte-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; }
.collecte-etat { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--v-teal-nuit); color: #fff; font-size: var(--v-petit); font-weight: 700; }
.collecte-etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--v-menthe); }
.collecte-logo { height: 40px; width: auto; max-width: 120px; object-fit: contain; }
.collecte-org { margin-top: 8px; font-size: var(--v-petit); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v-doux); }
.collecte-nom { font-size: var(--v-texte); font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collecte-total { margin-top: 4px; color: var(--v-teal-nuit); }
.collecte-total b { font-weight: 700; font-size: var(--v-chiffre-petit); line-height: 1.1; letter-spacing: -.02em; color: var(--v-rose-texte); }
.collecte-faits { font-size: var(--v-petit); color: var(--v-doux); }
.collecte-lien { display: inline-flex; gap: 4px; align-items: center; margin-top: auto; padding-top: 8px; font-weight: 700; font-size: var(--v-petit); color: var(--v-teal); }
.collectes-sous-titre { margin-top: 40px; color: var(--v-teal-nuit); }
.collectes-lignes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.collectes-lignes a { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; padding: 14px 20px; border-radius: var(--v-rayon-petit); background: var(--v-panneau); color: var(--v-teal-nuit); text-decoration: none; }
@media (hover: hover) { .collectes-lignes a:hover .collectes-ligne-nom { text-decoration: underline; text-underline-offset: 4px; } }
.collectes-ligne-nom { font-weight: 600; }
.collectes-lignes b { font-weight: 700; font-size: var(--v-intertitre); color: var(--v-rose-texte); }

.partage { display: grid; grid-template-columns: minmax(0, 47%) minmax(0, 53%); min-height: 560px; }
.partage-image { display: grid; place-items: center; padding: 72px 40px; background: var(--v-anis); overflow: hidden; }
.partage-photo { --angle: -6deg; width: min(80%, 380px); aspect-ratio: 4 / 5; }
.partage-texte { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 56px clamp(24px, 5vw, 72px); background: var(--v-teal); color: #fff; }
.partage-signe { width: 88px; height: auto; margin-bottom: 24px; }
.partage-texte h2 { max-width: 13em; color: #fff; }
.partage-texte p { margin-top: var(--v-ecart-titre); color: #fff; }
.partage-texte .actions { margin-top: var(--v-ecart-action); }
.partage-texte .lien-fort { color: var(--v-menthe); }

.origine { background: var(--v-menthe); padding: calc(var(--v-section) + 24px) 0 calc(var(--v-section) + 16px); overflow-x: clip; }
.origine-cadre { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 96px; align-items: center; }
.origine-carte { position: relative; margin: 0; padding: 46px 30px 20px; border-radius: var(--v-rayon); background: var(--v-blanc); box-shadow: var(--v-decale) var(--v-decale) 0 var(--v-teal); transform: rotate(-3deg); }
.origine-logo { display: block; width: 82%; }
.origine-date { position: absolute; top: 0; right: 26px; width: 60px; }
.origine-objet { position: absolute; filter: var(--v-ombre-objet); }
.origine-objet--croquettes { width: 100px; left: -40px; bottom: -48px; transform: rotate(-14deg); }
.origine-objet--patee { width: 78px; right: -26px; bottom: -28px; transform: rotate(10deg); }
.origine h2 { color: var(--v-teal-nuit); }
.origine-chiffre { display: flex; align-items: center; gap: 24px; margin-top: var(--v-ecart-titre); color: var(--v-teal-nuit); }
.origine-chiffre strong { flex: none; font-family: var(--police-chiffre); font-weight: 400; font-size: var(--v-chiffre); line-height: .9; white-space: nowrap; }
.origine-chiffre span { max-width: 22em; font-size: var(--v-chapo); line-height: 1.45; }
.origine-faits { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.origine-faits li { padding: 18px 20px; border-radius: var(--v-rayon-petit); background: var(--v-panneau); color: var(--v-teal-nuit); font-size: var(--v-petit); line-height: 1.35; }
.origine-faits strong { display: block; margin-bottom: 6px; font-family: var(--police-chiffre); font-weight: 400; font-size: var(--v-chiffre-petit); line-height: 1; color: var(--v-teal); }
.origine-bas {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 240px 240px;
	grid-template-areas: "vedette vedette fiche liste" "temoin court fiche liste";
	gap: 24px;
	align-items: center;
	margin-top: 64px;
}
.origine-bas:not(:has(.vedette)) { grid-template-areas: "temoin court fiche liste"; }
.origine-bas:not(:has(.vedette)) .temoin { align-self: center; }
.origine-rangee { display: contents; }
.vedette { grid-area: vedette; margin: 0; padding: 32px; border-radius: var(--v-rayon); background: var(--v-panneau); }
.vedette-bulles { margin: 0; display: grid; gap: 12px; justify-items: start; }
.bulle { padding: 12px 18px; border-radius: 20px 20px 20px 6px; background: var(--v-menthe); color: var(--v-teal-nuit); font-weight: 600; font-size: var(--v-chapo); line-height: 1.3; }
.bulle--grande { font-size: 24px; }
.bulle--rose { background: var(--v-rose); }
.vedette-qui { margin-top: 20px; display: flex; gap: 12px; align-items: center; font-size: var(--v-petit); line-height: 1.35; color: var(--v-doux); }
.vedette-qui b { display: block; color: var(--v-teal-nuit); font-size: var(--v-texte); }
.temoin { grid-area: temoin; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 28px; border-radius: var(--v-rayon-petit); background: var(--v-rose); color: var(--v-teal-nuit); }
.temoin--court { grid-area: court; background: var(--v-teal-nuit); color: #fff; }
.temoin blockquote { margin: 0; }
.temoin blockquote p { font-size: var(--v-texte); font-weight: 600; line-height: 1.45; }
.temoin--court blockquote p { font-size: 24px; line-height: 1.25; }
.temoin-qui { display: flex; gap: 10px; align-items: center; font-size: var(--v-petit); }
.temoin-qui::before { content: ""; flex: none; width: 24px; height: 3px; border-radius: 2px; background: currentColor; }
.temoin--court .temoin-qui::before { background: var(--v-menthe); }
.origine-image { overflow: hidden; border-radius: var(--v-rayon-petit); background: var(--v-blanc); box-shadow: var(--v-decale) var(--v-decale) 0 var(--v-teal-nuit); }
.origine-image picture, .origine-image img { display: block; width: 100%; height: auto; }
.origine-image--fiche { grid-area: fiche; transform: rotate(-3deg); }
.origine-image--liste { grid-area: liste; transform: rotate(3deg); }

.final { position: relative; padding: 152px 0 120px; background: var(--v-teal-nuit) url("img/vitrine/paniers-final.webp") center / cover no-repeat; }
@media (min-width: 1377px) {
	.final { background: linear-gradient(#03839f, #057490 13%, #036681 25%, #045a72 37%, #024d62 50%, #033e50 63%, #023040 75%, #042431 87%, #031b25) center / 100% 768px no-repeat, var(--v-teal-nuit); }
	.final::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 688px); width: 1376px; background: url("img/vitrine/paniers-final.webp") center / 1376px auto no-repeat; mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent); }
}
.final-panneau {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 48px 40px 52px;
	border-radius: var(--v-rayon);
	background: var(--v-teal-nuit);
	text-align: center;
}
.final-panneau::after {
	content: "";
	position: absolute;
	top: 30px;
	right: 40px;
	width: 46px;
	height: 52px;
	background: url("img/vitrine/signe-blanc.svg") center / contain no-repeat;
	opacity: .5;
}
.final h2 { color: #fff; }
.final p { margin: 16px auto 0; max-width: 32em; font-size: var(--v-chapo); line-height: 1.5; color: #fff; }
.final .actions { margin-top: 32px; justify-content: center; }

.tete { position: relative; overflow: hidden; padding: 128px 0 var(--v-section); }
.tete::before {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -120px;
	width: 520px;
	aspect-ratio: 47 / 52;
	background: url("img/vitrine/signe-blanc.svg") center / contain no-repeat;
	opacity: .12;
	transform: rotate(-12deg);
	pointer-events: none;
}
.tete--teal { background: var(--v-teal); }
.tete--anis { background: var(--v-anis); }
.tete--rose { background: var(--v-rose); }
.tete-cadre { z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; }
.tete-cadre:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.tete-panneau { position: relative; z-index: 1; margin-right: -120px; padding: 40px 168px 44px 44px; }
.tete-cadre:has(> :only-child) .tete-panneau { margin-right: 0; padding: 40px 44px; max-width: 900px; }
.tete-panneau p { margin-top: var(--v-ecart-titre); max-width: 36em; }
.tete-photo { z-index: 2; --angle: 5deg; aspect-ratio: 4 / 5; }
.tete-photo::after { display: none; }

.fonction { display: grid; grid-template-columns: 420px minmax(0, 1fr); align-items: center; }
.fonction-visuel { z-index: 2; }
.fonction .panneau { margin-left: -60px; padding: var(--v-pad-panneau) var(--v-pad-panneau) var(--v-pad-panneau) 108px; }
.fonction--inverse { grid-template-columns: minmax(0, 1fr) 420px; }
.fonction--inverse .fonction-visuel { order: 2; --angle: 3deg; }
.fonction--inverse .panneau { order: 1; margin: 0 -60px 0 0; padding: var(--v-pad-panneau) 108px var(--v-pad-panneau) var(--v-pad-panneau); }
.fonction--large { grid-template-columns: 540px minmax(0, 1fr); }
.fonction--large.fonction--inverse { grid-template-columns: minmax(0, 1fr) 540px; }
.fonction--portrait .fonction-visuel { aspect-ratio: 4 / 5; }
.fonction--nuit .panneau { background: var(--v-teal); }
.fonction--nuit .fonction-visuel { --ombre-carte: var(--v-rose); }
.fonction--nuit h2 { color: #fff; }
.fonction--nuit .points li { color: rgba(255, 255, 255, .88); }
.fonction--nuit .points strong { color: #fff; }
.fonction--nuit .points li > .ui-icone { color: var(--v-menthe); }
.fonction .panneau h2 { color: var(--v-teal-nuit); }
.fonction--nuit .panneau h2 { color: #fff; }
.fonction-visuels { display: flex; justify-content: center; gap: 4%; margin-top: 28px; }
.fonction-visuels img { width: 29%; border-radius: 12px; box-shadow: var(--v-ombre-posee); }
.fonction-visuels img:nth-child(1) { transform: rotate(-4deg); }
.fonction-visuels img:nth-child(3) { transform: rotate(4deg); }
.points { list-style: none; margin: 20px 0 0; padding: 0; columns: 2; column-gap: 32px; }
.fonction--large .points { columns: 1; }
.points li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; break-inside: avoid; font-size: var(--v-texte); line-height: 1.5; color: var(--v-encre); }
.points li > .ui-icone { color: var(--v-teal); margin-top: 2px; }
.points strong { color: var(--v-encre); font-weight: 600; }

.savoir { padding: 40px 44px; border-radius: var(--v-rayon); box-shadow: var(--v-decale) var(--v-decale) 0 var(--v-teal-nuit); color: var(--v-teal-nuit); }
.savoir--anis { background: var(--v-anis); }
.savoir--blanc { background: var(--v-blanc); }
.savoir h2 { color: var(--v-teal-nuit); }

.offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: stretch; max-width: 1060px; margin: 0 auto; }
.offre { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 40px 36px; border-radius: var(--v-rayon); }
.offre--gratuite { background: var(--v-menthe); transform: rotate(-1.2deg); box-shadow: var(--v-decale) var(--v-decale) 0 var(--v-teal-nuit); }
.offre--devis { background: var(--v-teal-nuit); }
.offre-etiquette { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--v-teal-nuit); color: #fff; font-weight: 700; font-size: var(--v-petit); }
.offre--devis .offre-etiquette { background: var(--v-rose); color: var(--v-teal-nuit); }
.offre h2 { color: var(--v-teal-nuit); }
.offre p:not(.offre-etiquette) { color: var(--v-teal-nuit); font-size: var(--v-texte); }
.offre--devis h2, .offre--devis p:not(.offre-etiquette) { color: #fff; }
.offre .bouton { margin-top: auto; }
.offre-faits { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; color: var(--v-teal-nuit); font-size: var(--v-texte); line-height: 1.3; }
.offre-faits strong { display: block; font-family: var(--police-chiffre); font-weight: 400; font-size: var(--v-chiffre-petit); line-height: 1; color: var(--v-teal-nuit); white-space: nowrap; }

.contact-grille { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
.contact-aide { color: var(--v-teal-nuit); }
.contact-aide h2 { color: var(--v-teal-nuit); }
.contact-aide .lien-fort { margin-top: 8px; font-size: var(--v-chapo); color: var(--v-teal-nuit); }
.etapes { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.etapes li { display: flex; gap: 16px; align-items: center; font-size: var(--v-texte); font-weight: 400; }
.etapes strong { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--v-menthe); font-weight: 700; font-size: var(--v-texte); line-height: 1; color: var(--v-teal-nuit); }
.contact-email { margin-top: 40px; display: grid; justify-items: start; }
.contact-photo { margin-top: 56px; width: 280px; aspect-ratio: 4 / 5; --angle: 4deg; }
.contact-photo::after { display: none; }
.contact-suite { margin-top: 20px; }
.formulaire-panneau { padding: 40px 44px 44px; }
.formulaire { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.champ { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.champ label, .champ legend { font-weight: 600; font-size: var(--v-petit); padding: 0; color: var(--v-encre); }
.facultatif { font-weight: 400; color: var(--v-doux); }
.champ input, .champ select, .champ textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--bord-controle);
	border-radius: var(--v-rayon-champ);
	background: #fff;
	color: var(--v-encre);
	font: inherit;
	font-size: var(--v-texte);
}
.champ textarea { resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--v-teal); outline-offset: 2px; border-color: var(--v-teal); }
.champ [aria-invalid="true"] { border-color: var(--v-erreur); }
.champ-erreur { color: var(--v-erreur); font-size: var(--v-petit); font-weight: 600; }
.champ-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.choix { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.choix-option { position: relative; font-weight: 400 !important; }
.choix-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-option span {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--bord-controle);
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	font-size: var(--v-texte);
}
.choix-option input:checked + span { background: var(--v-teal); border-color: var(--v-teal); color: #fff; }
.choix-option input:focus-visible + span { outline: 3px solid var(--v-teal); outline-offset: 2px; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire-fin { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.message { display: flex; gap: 14px; align-items: flex-start; padding: 22px 26px; border-radius: var(--v-rayon-petit); }
.message > .ui-icone { width: 26px; height: 26px; margin-top: 2px; }
.message--succes { background: var(--v-menthe); color: var(--v-teal-nuit); }
.message--succes p + p { margin-top: 4px; }
.message--erreur { background: var(--v-erreur-voile); color: var(--v-erreur); margin-bottom: 20px; }

.texte-long { max-width: 900px; padding: 40px 44px; }
.texte-long h2 { margin-top: 36px; }
.texte-long h2:first-child { margin-top: 0; }
.texte-long h2 + p { margin-top: 10px; }
.texte-long p + p { margin-top: 12px; }
.texte-long :is(.etapes, .puces) + p { margin-top: 20px; }

.savoir .aide-lien { margin-top: 16px; }
.aide-bande { padding-top: 24px; }
@media (min-width: 960px) {
	.aide-tete { padding-bottom: 24px; }
	.aide-tete .tete-cadre:has(> :only-child) .tete-panneau { padding-block: 24px; }
	.aide-tete + .aide-bande .aide-recherche { margin-bottom: 24px; }
}
.aide-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.aide-carte { padding: var(--v-pad-panneau); }
.aide-carte h2, .aide-lies h2 { font-size: var(--v-intertitre); }
.aide-liens { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; }
.aide-liens a { font-weight: 700; }
.aide-liens p { margin-top: 4px; font-size: var(--v-petit); color: var(--v-doux); }
.aide-liens p a { font-weight: 400; color: inherit; }
.aide-etape { display: block; font-weight: 700; color: var(--v-encre); }
.aide-etape-liens { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.aide-etape-liens a { font-weight: 600; }
.aide-recherche { margin-bottom: 32px; }
.aide-resultats { padding: var(--e2); }
.aide-vide { margin-top: 12px; color: var(--v-doux); }
.aide-vide p + p { margin-top: 6px; color: var(--v-encre); }
.aide-capture { margin: 24px 0 0; }
.aide-capture img { display: block; width: 100%; height: auto; border: 1px solid var(--v-fond); border-radius: var(--v-rayon-petit); box-shadow: var(--v-ombre-posee); }
.aide-capture--telephone img { max-width: 320px; }
.aide-capture--fenetre img { max-width: 472px; }
.aide-capture figcaption { margin-top: 8px; font-size: var(--v-petit); color: var(--v-doux); }
.aide-agrandir { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: zoom-in; }
.aide-capture--telephone .aide-agrandir { max-width: 320px; }
.aide-agrandir::after { content: "Agrandir"; display: table; margin: 8px 0 0 auto; padding: 6px 12px; border-radius: var(--r-pilule); background: var(--v-blanc); box-shadow: var(--v-ombre-posee); font-weight: 600; font-size: var(--v-petit); line-height: 1.2; color: var(--v-teal-nuit); }
.aide-agrandir + figcaption { margin-top: calc(-1.2em - 12px); padding-right: 112px; line-height: calc(1.2em + 12px); }
.aide-agrandir:focus-visible { border-radius: var(--v-rayon-petit); }
#aide-visionneuse { width: fit-content; max-width: calc(100% - var(--espace-6)); }
#aide-visionneuse .ui-feuille-corps { max-height: calc(88vh - 41px); padding: 0; overflow: auto; }
.aide-visionneuse img { display: block; max-width: none; height: auto; }
@media (min-width: 960px) { .aide-visionneuse img { max-width: 100%; } }
.aide-question { margin-top: 32px; font-weight: 600; }
.aide-question p + p { margin-top: 8px; }
.texte-long .aide-question { margin-top: 36px; }
.aide-lies { max-width: 900px; margin-top: 32px; padding: 0 44px; }
.faq-sommaire { max-width: 900px; margin-bottom: 24px; }
.aide-faq + .aide-faq { margin-top: 24px; }
.aide-faq h2 { display: flex; align-items: center; gap: 14px; font-size: var(--v-titre-carte); }
.texte-long h3 { margin-top: 24px; font-size: var(--v-chapo); }
.texte-long h3 + p { margin-top: 6px; }
.aide-faq-icone { flex: none; box-sizing: border-box; width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: var(--c-action-voile); color: var(--c-action); }
.aide-faq-fin h3 { display: flex; align-items: center; gap: 14px; margin-top: 0; }

.pied { background: var(--v-teal); color: #fff; padding: 48px 0; }
.pied-cadre { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.pied-logo { height: 44px; margin-bottom: 16px; }
.pied .logo path[fill="#0e5464"] { fill: #fff; }
.pied-marque p { color: rgba(255, 255, 255, .85); font-size: var(--v-petit); }
.reseaux { list-style: none; display: flex; gap: 8px; margin: 16px 0 0; padding: 0; }
.reseaux a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; opacity: .85; transition: opacity .15s, background-color .15s; }
@media (hover: hover) { .reseaux a:hover { opacity: 1; background: rgb(255 255 255 / .12); } }
.reseaux svg { width: 24px; height: 24px; }
.pied .reseaux { margin-left: -10px; }
.reseaux--pastilles a { background: var(--v-teal); opacity: 1; }
@media (hover: hover) { .reseaux--pastilles a:hover { background: var(--v-teal-nuit); } }
.contact-reseaux { margin-top: 40px; }
.pied-liens { display: grid; grid-template-columns: repeat(2, auto); gap: 0 40px; align-content: start; }
.pied-liens a { padding: 10px 0; color: #fff; text-decoration: none; font-size: var(--v-petit); }
@media (hover: hover) { .pied-liens a:hover { color: var(--v-menthe); text-decoration: underline; } }

@media (max-width: 1119px) {
	html:has(.nav-mobile[open]) { overflow: hidden; }
	html:has(.nav-mobile[open]) :is(main, .pied, .evitement) { visibility: hidden; }
	.entete-logo { position: relative; z-index: 2; }
	.entete-pilule:has(.nav-mobile[open]) .logo path[fill="#0e5464"] { fill: #fff; }
	.entete-pilule { gap: 12px; }
	.nav, .entete-connexion { display: none; }
	.entete-actions { margin-left: auto; }
	.entete-pilule:has(.nav-mobile[open]) .entete-actions { visibility: hidden; }
	.nav-mobile { display: block; }
	.nav-mobile summary {
		position: relative;
		z-index: 2;
		list-style: none;
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: var(--v-teal-nuit);
		color: #fff;
		cursor: pointer;
	}
	.nav-mobile[open] summary { background: var(--v-rose); color: var(--v-teal-nuit); }
	.nav-mobile summary::-webkit-details-marker { display: none; }
	.nav-mobile summary .ui-icone { width: 24px; height: 24px; }
	.nav-mobile-fermer, .nav-mobile[open] .nav-mobile-ouvrir { display: none; }
	.nav-mobile[open] .nav-mobile-fermer { display: block; }
	.nav-mobile-liste {
		position: fixed;
		inset: 0;
		z-index: 1;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		padding: 112px 24px 32px;
		background: var(--v-teal-nuit) url("img/vitrine/caddie-rose.webp") right 16px bottom 16px / 110px auto no-repeat;
	}
	.nav-mobile-liste > a { padding: 12px 0; color: #fff; font-weight: 700; font-size: 24px; line-height: 1.2; text-decoration: none; }
	.nav-mobile-liste > a[aria-current="page"] { color: var(--v-menthe); }
	.nav-mobile-actions { display: grid; gap: 12px; margin-top: 28px; }
}

@media (max-width: 1339px) {
	.hero-telephone { left: -100px; }
	.origine-objet--croquettes { left: -12px; }
}

@media (max-width: 1239px) {
	.saut-large { display: none; }
	.points { columns: 1; }
	.hero-cadre { grid-template-columns: minmax(0, 1fr) 420px; }
	.hero-telephone { width: 124px; left: -76px; }
	.origine-objet--croquettes { width: 90px; }
	.origine-cadre { gap: 72px; }
	.origine-bas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 200px 200px; }
	.fonction--large { grid-template-columns: 460px minmax(0, 1fr); }
	.fonction--large.fonction--inverse { grid-template-columns: minmax(0, 1fr) 460px; }
	.causes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.cause:nth-child(9) { grid-column: span 2; }
	.cause:nth-child(10) { grid-column: 2 / span 2; }
}

@media (max-width: 1080px) {
	.aide-cartes { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	:root { --v-geant: 40px; --v-titre: 32px; --v-titre-carte: 24px; --v-intertitre: 18px; --v-chapo: 16px; --v-chiffre: 64px; --v-chiffre-petit: 28px; }
	.fond-caddies { background-image: url("img/vitrine/fond-caddies-portrait.webp"); }
	.hero-cadre { grid-template-columns: minmax(0, 1fr); gap: 80px; }
	.hero-panneau { margin-right: 0; padding: 36px 40px 40px; }
	.hero-visuel { width: min(480px, calc(100% - 72px)); justify-self: center; translate: none; }
	.hero-telephone { width: 104px; left: -56px; bottom: -96px; }
	.duo, .direct, .fonction, .fonction--inverse, .fonction--large, .fonction--large.fonction--inverse, .tete-cadre { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.pile { width: min(340px, 76%); justify-self: center; margin-bottom: 0; translate: none; }
	.duo .panneau, .direct-panneau, .fonction .panneau, .fonction--inverse .panneau { order: 1; margin: -48px 0 0; padding: 96px 40px 44px; }
	.duo .panneau { padding-top: 136px; }
	.direct-panneau { padding-bottom: 170px; }
	.direct-fiche { width: 180px; right: 16px; bottom: -48px; }
	.incline { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.comptez-visuel { width: min(400px, 82%); justify-self: center; }
	.carte-menthe { width: min(560px, 100%); justify-self: center; }
	.causes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cause:nth-child(10) { grid-column: span 2; }
	.cause:nth-child(11) { grid-column: 2 / span 2; }
	.direct-visuel { width: min(380px, 82%); justify-self: center; margin: 0; }
	.collectes-cartes { grid-template-columns: minmax(0, 1fr); }
	.partage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.partage-image { padding: 64px 24px 56px; }
	.partage-photo { width: min(64%, 340px); }
	.origine-cadre { grid-template-columns: minmax(0, 1fr); gap: 64px; }
	.origine-carte { width: min(360px, 82%); justify-self: center; }
	.origine-objet--croquettes { left: -40px; }
	.origine-bas { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "vedette vedette" "temoin court" "fiche liste"; margin-top: 48px; }
	.origine-bas:not(:has(.vedette)) { grid-template-areas: "temoin court" "fiche liste"; }
	.origine-image { width: min(320px, 100%); justify-self: center; }
	.origine-image--fiche { align-self: start; }
	.tete-panneau { margin-right: 0; padding: 40px 32px 72px; }
	.tete-photo { width: min(240px, 56%); justify-self: center; margin-top: -40px; }
	.fonction-visuel { width: min(420px, 88%); justify-self: center; order: 0 !important; }
	.fonction--large .fonction-visuel { width: min(560px, 92%); }
	.offres { grid-template-columns: minmax(0, 1fr); }
	.offre--gratuite { transform: none; }
	.contact-grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.contact-photo { display: none; }
}

@media (max-width: 640px) {
	:root { --v-geant: 32px; --v-titre: 28px; --v-chiffre: 56px; }
	html { scroll-padding-top: 90px; }
	.cadre { padding: 0 16px; }
	.entete { padding-top: 10px; margin-bottom: -74px; }
	.entete-pilule { min-height: 64px; padding: 0 8px 0 20px; }
	.entete-action { padding: 0 16px; }
	.logo { height: 30px; }
	.hero { padding: 96px 0 56px; }
	.hero-cadre { gap: 64px; }
	.hero-panneau { padding: 28px 22px; }
	.hero-visuel { width: calc(100% - 56px); justify-self: end; margin: 0 8px 64px 0; }
	.hero-carte { padding: 56px 14px 14px; }
	.hero-telephone { width: 84px; left: -44px; bottom: -64px; }
	.carte-photo::after { width: 30px; height: 34px; top: 14px; right: 14px; }
	.duo .panneau, .direct-panneau, .fonction .panneau, .fonction--inverse .panneau { padding: 80px 22px 30px; }
	.duo .panneau { padding-top: 120px; }
	.direct-panneau { padding-bottom: 190px; }
	.direct-fiche { width: 140px; right: 12px; bottom: -36px; }
	.pile { width: 72%; }
	.comptez-visuel { width: calc(100% - 40px); }
	.carte-menthe { padding: 32px 24px 72px; transform: none; }
	.carte-menthe::after { width: 34px; height: 38px; bottom: 20px; right: 20px; }
	.pastille-appli { left: -4%; padding: 8px 10px; }
	.pastille-appli b { font-size: var(--v-texte); }
	.incline + .cadre { margin-top: 64px; }
	.causes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.cause:nth-child(n) { grid-column: auto; grid-template-columns: 48px minmax(0, 1fr); padding: 12px 16px 12px 12px; }
	.cause img { width: 48px; height: 48px; }
	.cause h3 { font-size: 16px; }
	.direct-visuel { width: 76%; }
	.collectes-cartes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding-bottom: 16px; }
	.collectes-cartes > li { flex: 0 0 280px; scroll-snap-align: start; }
	.partage-texte { padding: 40px 22px; }
	.partage-signe { width: 64px; margin-bottom: 16px; }
	.partage-photo { width: 64%; }
	.origine-carte { padding: 38px 20px 16px; transform: rotate(-2deg); }
	.origine-date { width: 48px; top: 0; right: 18px; }
	.film h2 { margin-bottom: 20px; }
	.film-rond { width: 72px; height: 72px; }
	.film-rond svg { width: 26px; height: 26px; }
	.origine-objet--croquettes { width: 70px; left: -46px; bottom: -28px; }
	.origine-objet--patee { width: 56px; right: -20px; bottom: -8px; }
	.origine-faits { grid-template-columns: minmax(0, 1fr); }
	.origine-faits li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
	.origine-faits strong { flex: none; min-width: 52px; margin: 0; }
	.origine-bas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "vedette" "temoin" "court" "fiche" "liste"; gap: 28px; }
	.origine-bas:not(:has(.vedette)) { grid-template-areas: "temoin" "court" "fiche" "liste"; }
	.origine-image { width: min(300px, 100%); }
	.vedette { padding: 22px 18px; }
	.vedette-qui { margin-top: 16px; }
	.bulle { padding: 10px 14px; }
	.bulle--grande { font-size: 20px; }
	.temoin { padding: 20px 22px; }
	.temoin--court blockquote p { font-size: 20px; }
	.origine-image--fiche { transform: rotate(-2deg); }
	.origine-image--liste { transform: rotate(2deg); }
	.final { padding: 96px 0 72px; background-image: url("img/vitrine/paniers-final-portrait.webp"); }
	.final-panneau { padding: 36px 22px 40px; }
	.final-panneau::after { display: none; }
	.tete { padding: 92px 0 44px; }
	.tete::before { width: 300px; right: -60px; bottom: -80px; }
	.tete-panneau, .tete-cadre:has(> :only-child) .tete-panneau { padding: 28px 22px; }
	.tete-cadre:has(> .tete-photo) .tete-panneau { padding-bottom: 64px; }
	.tete-photo { width: 168px; justify-self: end; margin: -48px 16px 0 0; }
	.fonction-visuel, .fonction--large .fonction-visuel { width: calc(100% - 32px); }
	.carte-ecran { padding: 20px 16px; }
	.offre { padding: 30px 24px; }
	.offre-faits { gap: 8px; }
	.formulaire-panneau, .texte-long, .savoir { padding: 28px 22px; }
	.aide-lies { padding: 0 22px; }
	.champ-paire { grid-template-columns: minmax(0, 1fr); }
	.choix { gap: 8px; }
	.choix-option span { padding: 0 14px; font-size: var(--v-petit); }
	.bouton { padding: 0 22px; }
	.pied { padding: 40px 0; }
	.pied-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
}

@media (max-width: 519px) {
	.entete-actions { display: none; }
	.nav-mobile { margin-left: auto; }
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.comptez-visuel, .carte-menthe, .fonction-visuel, .offre--gratuite, .savoir, .partage-photo {
			animation: entree linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}
	}
	@keyframes entree { from { opacity: 0; translate: 0 48px; } }
	.collecte-etat::before { animation: pouls 1.6s ease-in-out infinite; }
	@keyframes pouls { 50% { opacity: .35; } }
	@media (hover: hover) {
		.cause { transition: translate .2s, rotate .2s; }
		.cause:hover { translate: 0 -4px; rotate: -1deg; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.bouton { transition: none; }
}