/* ==========================================================================
   La marchande des frip'ouilles — feuille de style unique

   Systeme visuel : voir docs/DESIGN.md (la devanture de marche, vert
   Committed, une seule famille de caracteres). Historique des choix de
   fusion : docs/BACKLOG_FRIPOUILLES.md.

   Sommaire
     1. Police
     2. Jetons
     3. Base
     4. En-tete et menu
     5. Bandes
     6. Boutons
     7. Store
     8. Blocs de l'accueil
     8 bis. Cadres de visuels Canva et de cartes
     8 ter. Pied de page
     9. Carrousel
    10. Mouvement reduit
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Police

   Familjen Grotesk, variable, auto-hebergee. Pas de CDN Google : ce serait
   un appel a un tiers sur un site sans banniere de consentement. Le fichier
   pese 18 Ko, sous-ensemble latin (U+0000-00FF et la ponctuation courante).
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Familjen Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("familjen-grotesk-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Jetons

   Aucun neutre pur : tous les blancs et les gris sont teintes vers le vert
   de marque. Les valeurs hexadecimales en commentaire sont le repli des
   navigateurs sans `oklch()` (Safari anterieur a 15.4).
   -------------------------------------------------------------------------- */

:root {
	/* Vert — structure et surfaces porteuses */
	--vert-profond: #275147;
	--vert: #45786b;
	--vert-clair: #5d9385;
	--vert-voile: #ecf6f3;

	/* Neutres teintes */
	--craie: #f7fbfa;
	--encre: #3b3f44;

	/* Action et signal */
	--orange-action: #b4530f;
	--orange-vif: #ed7b24;
	--jaune: #fed012;

	/* Espacement */
	--e-1: 0.25rem;
	--e-2: 0.5rem;
	--e-3: 0.75rem;
	--e-4: 1rem;
	--e-6: 1.5rem;
	--e-8: 2rem;
	--e-12: 3rem;
	--e-16: 4rem;
	--e-24: 6rem;
	--lisiere: clamp(1rem, 4vw, 3rem);
	--mesure: 68ch;
	--page: 68rem;

	/* Formes */
	--r-2: 0.5rem;
	--r-pastille: 999px;

	/* Typographie */
	--police: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto,
		sans-serif;
	--t-h1: clamp(2rem, 1.4rem + 3vw, 3.55rem);
	--t-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
	--t-h3: clamp(1.15rem, 1rem + 0.7vw, 1.35rem);
	--t-corps: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
	--t-petit: 0.875rem;

	/* Mouvement */
	--sortie: cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (color: oklch(0.5 0.1 180)) {
	:root {
		--vert-profond: oklch(0.4 0.05 177);
		--vert: oklch(0.533 0.059 176);
		--vert-clair: oklch(0.621 0.062 176);
		--vert-voile: oklch(0.965 0.012 176);
		--craie: oklch(0.985 0.005 176);
		--encre: oklch(0.366 0.01 254);
		--orange-action: oklch(0.555 0.145 48);
		--orange-vif: oklch(0.701 0.167 52);
		--jaune: oklch(0.872 0.176 92);
	}
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

body {
	font-family: var(--police);
	font-size: var(--t-corps);
	line-height: 1.55;
	background-color: var(--vert-voile);
	color: var(--encre);
	-webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-wrap: balance;
}

h1 {
	font-size: var(--t-h1);
}

h2 {
	font-size: var(--t-h2);
}

h3 {
	font-size: var(--t-h3);
	letter-spacing: -0.01em;
}

p {
	line-height: 1.55;
	max-width: var(--mesure);
}

a {
	color: var(--encre);
}

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

img {
	height: auto;
}

/* Un seul style de focus pour tout le site. */
:focus-visible {
	outline: 3px solid var(--jaune);
	outline-offset: 2px;
	border-radius: var(--e-1);
}

.saut-contenu {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--e-3) var(--e-4);
	background: var(--vert-profond);
	color: var(--craie);
	font-weight: 700;
}

.saut-contenu:focus {
	left: var(--e-2);
	top: var(--e-2);
}

/* Mention de bas de page. Remplace les `<font size="1">` d'origine. */
.credits {
	font-size: var(--t-petit);
	color: var(--encre);
}

/* --------------------------------------------------------------------------
   4. En-tete et menu

   Le menu deroulant d'origine ne s'ouvrait qu'au `:hover` : inatteignable au
   clavier et au doigt. Il repose desormais sur `<details>`, qui donne
   l'ouverture au clic, le focus et l'etat annonce sans une ligne de
   JavaScript.
   -------------------------------------------------------------------------- */

.site-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	padding: var(--e-3) var(--lisiere);
	background: var(--craie);
	border-bottom: 1px solid var(--vert-clair);
}

/* Le logo en long prend toute la place que lui laisse le bouton du menu :
   environ 215 px sur un telephone de 375 px, 320 px au plus. En dessous de
   200 px le nom ne se lit plus, d'ou le plancher. */
.site-entete__marque {
	display: grid;
	gap: var(--e-1);
	flex: 1 1 auto;
	min-width: 0;
	max-width: 320px;
	text-decoration: none;
}

.site-entete__marque img {
	width: 100%;
	min-width: 200px;
	height: auto;
}

/* Le slogan du logo, sorti de l'image pour rester lisible. `--vert` sur
   craie donne 4,85 : il passe a 14 px. */
.site-entete__slogan {
	font-size: var(--t-petit);
	font-weight: 700;
	line-height: 1.25;
	color: var(--vert);
}

.menu {
	position: relative;
}

.menu__bouton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	min-width: 48px;
	min-height: 48px;
	padding: 0 var(--e-4);
	border: 2px solid var(--vert);
	border-radius: var(--r-pastille);
	background: var(--craie);
	color: var(--encre);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

/* Sur telephone, le mot « Menu » prenait 60 px au logo. Il reste lu par les
   lecteurs d'ecran ; la cible garde ses 48 x 48 px. */
@media (max-width: 29.99rem) {
	.menu__bouton {
		padding: 0;
		font-size: 1.35rem;
	}

	.menu__texte {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Retire le triangle natif du `<summary>`, sur toutes les familles. */
.menu__bouton::-webkit-details-marker {
	display: none;
}

.menu[open] .menu__bouton {
	background: var(--vert-profond);
	color: var(--craie);
	border-color: var(--vert-profond);
}

.menu__liste {
	position: absolute;
	right: 0;
	top: calc(100% + var(--e-2));
	z-index: 1000;
	min-width: min(20rem, calc(100vw - 2 * var(--lisiere)));
	padding: var(--e-2);
	list-style: none;
	background: var(--craie);
	border: 2px solid var(--vert-profond);
	border-radius: var(--r-2);
	box-shadow: 0 8px 24px rgb(39 81 71 / 22%);
}

.menu__liste a {
	display: block;
	padding: var(--e-3) var(--e-3);
	border-radius: var(--e-1);
	text-decoration: none;
	font-weight: 700;
}

.menu__liste a:hover {
	background: var(--vert-voile);
	color: var(--orange-action);
}

/* Page affichee. Le liseré lateral d'origine etait une bordure coloree posee
   sur le bord d'un element : un motif a bannir, et il etait de toute facon
   mort, `aria-current` n'ayant jamais ete pose avant le 08/08/2026. */
.menu__liste [aria-current="page"] {
	background: var(--vert-voile);
	color: var(--orange-action);
}

/* --------------------------------------------------------------------------
   5. Bandes

   Une idee par bande, pleine largeur, le fond change d'une bande a l'autre.
   Le contenu est borne a `--page` et cale a gauche : pas de pile centree.
   -------------------------------------------------------------------------- */

.bande {
	padding: var(--e-16) var(--lisiere);
}

.bande > * {
	max-width: var(--page);
	margin-inline: auto;
}

.bande--serree {
	padding-block: var(--e-12);
}

.bande--craie {
	background: var(--craie);
}

.bande--vert {
	background: var(--vert);
	color: var(--craie);
}

.bande--ardoise {
	background: var(--vert-profond);
	color: var(--craie);
}

.bande--vert a,
.bande--ardoise a {
	color: var(--craie);
}

/* Le texte clair parait plus leger : il lui faut plus d'air. */
.bande--vert p,
.bande--ardoise p {
	line-height: 1.62;
}

/* Rythme vertical des bandes. Le reset a remis toutes les marges a zero :
   ces deux regles les redonnent la ou elles portent du sens. */
.bande h1,
.bande h2 {
	margin-bottom: var(--e-4);
}

.bande h3 {
	margin-bottom: var(--e-3);
}

.bande p {
	margin-bottom: var(--e-6);
}

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

/* Le kicker fait 14 px : trop petit pour le seuil des grands textes, donc
   4,5:1 exige. `--orange-vif` n'y arrive sur aucun des trois fonds — 2,70
   sur craie, 1,80 sur vert, 3,17 sur ardoise. Il lui faut une couleur par
   fond, chacune mesuree. */
.kicker {
	display: block;
	margin-bottom: var(--e-3);
	font-size: var(--t-petit);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--orange-action);
}

/* Sur ardoise, le jaune donne 6,05. */
.bande--ardoise .kicker {
	color: var(--jaune);
}

/* Sur `--vert`, aucun orange ni jaune de la palette n'atteint 4,5 a cette
   taille : le jaune plafonne a 3,43. La craie passe a 4,85. Le kicker y perd
   sa couleur d'accent, il garde sa taille, sa graisse et son interlettrage. */
.bande--vert .kicker {
	color: var(--craie);
}

/* --------------------------------------------------------------------------
   6. Boutons

   `.boutonStandard` portait `float: right` et un `line-height: 0.8rem` qui
   ecrasait son propre texte. `.action` le remplace : hauteur de cible reelle,
   contraste mesure (craie sur `--orange-action` = 4,81).
   -------------------------------------------------------------------------- */

.action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-3);
	min-height: 48px;
	padding: var(--e-3) var(--e-6);
	border: 2px solid transparent;
	border-radius: var(--r-pastille);
	background: var(--orange-action);
	color: var(--craie);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.16s var(--sortie), transform 0.16s var(--sortie);
}

.action:hover {
	background: var(--vert-profond);
}

.action:active {
	transform: translateY(1px);
}

.action img,
.action svg {
	width: 28px;
	height: auto;
	flex: none;
}

.action--creuse {
	background: transparent;
	border-color: var(--vert);
	color: var(--encre);
}

.action--creuse:hover {
	background: var(--vert-profond);
	border-color: var(--vert-profond);
	color: var(--craie);
}

/* Sur fond vert ou ardoise, le bouton creux s'inverse. */
.bande--vert .action--creuse,
.bande--ardoise .action--creuse {
	border-color: var(--craie);
	color: var(--craie);
}

.bande--vert .action--creuse:hover,
.bande--ardoise .action--creuse:hover {
	background: var(--craie);
	color: var(--vert-profond);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
}

/* --------------------------------------------------------------------------
   7. Store

   `.store` est la rayure du logo. Une seule occurrence par page : c'est un
   element de structure, pas un motif de fond.
   -------------------------------------------------------------------------- */

.store {
	height: 14px;
	background: repeating-linear-gradient(
		90deg,
		var(--jaune) 0 28px,
		var(--orange-vif) 28px 56px
	);
}

/* --------------------------------------------------------------------------
   8. Blocs de l'accueil
   -------------------------------------------------------------------------- */

.accroche {
	display: grid;
	gap: var(--e-8);
	align-items: center;
}

@media (min-width: 52rem) {
	.accroche {
		grid-template-columns: 1.35fr 1fr;
	}
}

.accroche p {
	margin-block: var(--e-4) var(--e-6);
	font-size: 1.15em;
}

.accroche > picture img {
	width: 100%;
	border-radius: var(--r-2);
}

/* Bande d'accueil : sur telephone, 64 px de marge haute repoussaient
   l'adresse sous la ligne de flottaison. */
@media (max-width: 51.99rem) {
	.bande--accroche {
		padding-top: var(--e-8);
	}
}

/* La photo de la boutique est un portrait : en pleine largeur sur un
   telephone, elle ferait 460 px de haut pour une seule information. */
.bande--accroche picture {
	justify-self: center;
	max-width: 22rem;
}

/* Adresse, horaires, tram. Des filets plutot qu'une carte, comme `.liste`. */
.infos {
	display: grid;
	margin-block: var(--e-6);
	max-width: var(--mesure);
	border-top: 2px solid var(--vert-clair);
}

.infos > div {
	display: grid;
	gap: var(--e-1) var(--e-4);
	padding-block: var(--e-3);
	border-bottom: 1px solid var(--vert-clair);
}

@media (min-width: 30rem) {
	.infos > div {
		grid-template-columns: 6rem 1fr;
	}
}

/* Pas de capitales : DESIGN.md n'en autorise qu'un kicker par page.
   `--orange-action` sur craie = 4,81. */
.infos dt {
	font-weight: 700;
	color: var(--orange-action);
}

.infos dd {
	line-height: 1.4;
}

.infos address {
	font-style: normal;
	font-weight: 700;
}

.accroche .accroche__annonce {
	margin-block: var(--e-6) 0;
	font-size: 1em;
}

.duo {
	display: grid;
	gap: var(--e-8);
	align-items: center;
}

@media (min-width: 52rem) {
	.duo {
		grid-template-columns: 1fr 1fr;
	}
}

/* En colonne, une photo posee en premier occupe tout le premier ecran et
   repousse le titre sous la ligne de flottaison. Le texte passe devant. */
@media (max-width: 51.99rem) {
	.duo > picture:first-child {
		order: 2;
	}
}

/* Cible la photo du bloc, pas l'icone d'un bouton pose dans la meme colonne. */
.duo > picture img {
	width: 100%;
	border-radius: var(--r-2);
}

.raisons {
	margin: var(--e-6) 0 0;
	padding: 0;
	list-style: none;
	max-width: var(--mesure);
}

.raisons li {
	padding: var(--e-4) 0;
	border-top: 1px solid var(--vert-clair);
}

.raisons li:last-child {
	border-bottom: 1px solid var(--vert-clair);
}

.raisons b {
	display: block;
	font-size: var(--t-h3);
}

/* Marques de chaussures : une vignette carree a gauche, le texte a droite,
   des filets comme `.raisons`. Une marque sans photo garde l'alignement du
   texte. */
.marques {
	margin: var(--e-6) 0 0;
	padding: 0;
	list-style: none;
	max-width: var(--mesure);
}

.marques li {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: var(--e-4);
	align-items: center;
	padding: var(--e-4) 0;
	border-top: 1px solid var(--vert-clair);
}

.marques li:last-child {
	border-bottom: 1px solid var(--vert-clair);
}

.marques img {
	display: block;
	width: 100%;
	border-radius: var(--r-2);
}

.marques li > div:only-child {
	grid-column: 2;
}

.marques b {
	display: block;
	font-size: var(--t-h3);
}

/* Deux photos de rayon cote a cote, meme sur telephone : en colonne, elles
   ajouteraient 700 px a la page pour une information d'ambiance. */
.galerie {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--e-3);
	max-width: 40rem;
}

.galerie img {
	display: block;
	width: 100%;
	border-radius: var(--r-2);
}

/* Points de depot. Un filet en tete plutot qu'une carte : trois cartes
   identiques cote a cote, c'est le reflexe qu'on evite. */
.points {
	display: grid;
	gap: var(--e-6);
	margin-top: var(--e-8);
	padding: 0;
	list-style: none;
}

/* `auto-fit` plutot qu'un nombre fixe de colonnes : la liste tient aussi bien
   avec un seul point qu'avec quatre, et la borne haute evite qu'un point
   solitaire s'etire sur toute la bande. */
@media (min-width: 52rem) {
	.points {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 22rem));
	}
}

.points p {
	margin: 0;
}

.points address {
	font-style: normal;
}

.points li {
	display: grid;
	gap: var(--e-3);
	justify-items: start;
	padding-top: var(--e-4);
	border-top: 2px solid var(--vert-clair);
}

/* Enfant direct seulement : un `<b>` dans le texte d'un point ne doit pas
   prendre la taille du titre. */
.points > li > b {
	font-size: var(--t-h3);
	line-height: 1.2;
}

/* Contacts : chaque ligne est une cible tactile, pas une icone de 15 px. */
.contacts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
	margin-top: var(--e-6);
	padding: 0;
	list-style: none;
}

.contacts a {
	display: inline-flex;
	align-items: center;
	gap: var(--e-3);
	min-height: 48px;
	padding: var(--e-2) var(--e-4);
	border: 2px solid var(--vert-clair);
	border-radius: var(--r-pastille);
	background: var(--craie);
	text-decoration: none;
	font-weight: 700;
}

.contacts a:hover {
	border-color: var(--orange-action);
	color: var(--orange-action);
}

.contacts img {
	width: 24px;
	height: 24px;
}

.reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
	margin-top: var(--e-6);
	padding: 0;
	list-style: none;
}

.reseaux a {
	display: inline-flex;
	align-items: center;
	gap: var(--e-3);
	min-height: 48px;
	padding: var(--e-2) var(--e-4);
	border: 2px solid var(--craie);
	border-radius: var(--r-pastille);
	text-decoration: none;
	font-weight: 700;
}

.reseaux a:hover {
	background: var(--craie);
	color: var(--vert-profond);
}

.reseaux svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   8 bis. Cadres de visuels Canva et de cartes

   Les pages posaient chacune leur propre boite `position:relative` en style
   en ligne, avec un ratio different a chaque fois. `.cadre` reprend le
   procede une bonne fois : le ratio se regle par `--ratio` sur l'element.
   -------------------------------------------------------------------------- */

.cadre {
	position: relative;
	width: 100%;
	max-width: 40rem;
	height: 0;
	padding-top: var(--ratio, 125%);
	overflow: hidden;
	border-radius: var(--r-2);
	background: var(--vert-voile);
}

.cadre iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* Listes de lieux et de conditions. Le contenu vivait dans l'attribut `alt`
   d'une image blanche de calage : invisible a l'ecran, invisible pour Google. */
.liste {
	display: grid;
	gap: 0;
	margin-top: var(--e-4);
	padding: 0;
	list-style: none;
	max-width: var(--mesure);
}

.liste li {
	padding: var(--e-2) 0;
	border-top: 1px solid var(--vert-clair);
}

/* Champ des pages legales qui attend une information de Nathalie. Volontairement
   voyant : ces pages ne doivent pas partir en FTP tant qu'il en reste un. */
.a-completer {
	padding: 0 var(--e-2);
	background: var(--jaune);
	color: var(--encre);
	font-weight: 700;
	border-radius: var(--e-1);
}

.colonnes {
	display: grid;
	gap: var(--e-8);
	margin-top: var(--e-8);
}

@media (min-width: 52rem) {
	.colonnes {
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	}
}

/* --------------------------------------------------------------------------
   8 ter. Pied de page

   Pose sur les 12 pages par le generateur. C'est la reponse au « on ne
   trouve jamais ses reseaux » : ils sont desormais au meme endroit partout,
   en toutes lettres et pas en icone de 100 px.
   -------------------------------------------------------------------------- */

.pied {
	padding: var(--e-16) var(--lisiere) var(--e-6);
	background: var(--vert-profond);
	color: var(--craie);
}

.pied__grille {
	display: grid;
	gap: var(--e-12);
	max-width: var(--page);
	margin-inline: auto;
}

@media (min-width: 52rem) {
	.pied__grille {
		grid-template-columns: 1.2fr 1fr 1fr;
	}
}

.pied h2 {
	margin-bottom: var(--e-3);
	font-size: var(--t-h3);
}

.pied p {
	margin-bottom: var(--e-4);
	line-height: 1.62;
}

.pied a {
	color: var(--craie);
}

.pied .reseaux {
	margin-top: 0;
}

.pied__liens {
	display: grid;
	gap: var(--e-1);
	padding: 0;
	list-style: none;
}

/* L'adresse electronique fait 41 caracteres : sans cette regle elle deborde
   sur les petits ecrans. */
.pied__liens a,
.contacts a {
	overflow-wrap: anywhere;
}

.pied__liens a {
	display: inline-block;
	padding: var(--e-2) 0;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pied__liens a:hover {
	text-decoration: none;
}

.pied .credits {
	max-width: var(--page);
	margin: var(--e-12) auto 0;
	padding: var(--e-4) 0 0;
	border-top: 1px solid var(--vert-clair);
	text-align: left;
	color: var(--craie);
}

/* --------------------------------------------------------------------------
   9. Carrousel

   Les diapositives sont empilees dans le flux : sans JavaScript, elles
   s'affichent toutes les trois a la suite, ce qui reste lisible. Le script
   ajoute le defilement lateral et ne charge l'iframe Canva qu'a l'affichage
   de sa diapositive.
   -------------------------------------------------------------------------- */

/* Titre a gauche, diapositives a droite : sans cette grille, le carrousel se
   centre seul et laisse la moitie de la bande vide. */
.actus {
	display: grid;
	gap: var(--e-8);
	align-items: center;
}

@media (min-width: 52rem) {
	.actus {
		grid-template-columns: 1fr 24rem;
	}
}

.carrousel {
	display: grid;
	gap: var(--e-4);
}

.carrousel__piste {
	display: grid;
	gap: var(--e-6);
}

.carrousel__diapo {
	display: grid;
	gap: var(--e-3);
	justify-items: center;
}

.carrousel__cadre {
	position: relative;
	width: 100%;
	max-width: 24rem;
	height: 0;
	padding-top: min(125%, 30rem);
	overflow: hidden;
	border-radius: var(--r-2);
	background: var(--vert-voile);
}

.carrousel__cadre iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.carrousel__commandes {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--e-3);
}

.carrousel__fleche {
	min-width: 48px;
	min-height: 48px;
	border: 2px solid var(--vert);
	border-radius: var(--r-pastille);
	background: var(--craie);
	color: var(--encre);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.carrousel__fleche:hover {
	background: var(--vert-profond);
	border-color: var(--vert-profond);
	color: var(--craie);
}

.carrousel__points {
	display: flex;
	gap: var(--e-2);
}

.carrousel__point {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 2px solid var(--vert);
	border-radius: 50%;
	background: var(--craie);
	cursor: pointer;
}

.carrousel__point[aria-current="true"] {
	background: var(--orange-vif);
	border-color: var(--orange-action);
}

/* Etat pilote par le script : une seule diapositive visible a la fois. */
.carrousel--anime .carrousel__piste {
	display: flex;
	overflow: hidden;
	gap: 0;
}

.carrousel--anime .carrousel__diapo {
	flex: 0 0 100%;
	transition: transform 0.24s var(--sortie);
}

.carrousel--anime .carrousel__commandes {
	display: flex;
}

/* Formulaire JotForm : le script tiers insere son propre iframe, on se
   contente de le borner. */
.formulaire iframe {
	width: 100% !important;
	max-width: 100%;
	border: none;
}

/* --------------------------------------------------------------------------
   10. Mouvement reduit
   -------------------------------------------------------------------------- */

@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;
	}
}