/* ============================================================
   CHARTE — le pastel, les formes, et la galette qui roule
   ------------------------------------------------------------
   Servie sur TOUTES les pages publiques.

   POURQUOI UN FICHIER A PART plutot que dans style.css : celui-ci
   fait 4 700 lignes et porte l'histoire du site. Ce qu'on ajoute
   aujourd'hui doit pouvoir se retirer d'un `rm` et d'une ligne de
   `functions.php`, sans relire quatre mille lignes pour savoir ce
   qui appartenait a quoi.

   LES COULEURS VIENNENT DU KIT, avec leur repli en dur. Une
   variable absente ne doit jamais rendre du texte invisible.
   ============================================================ */

:root {
	--ch-mer:      var( --e-global-color-mer, #8FB8B5 );
	--ch-fond-mer: var( --e-global-color-merprofonde, #3D6A66 );

	/* LA COULEUR D'ACTION, et elle n'est plus la mer.
	   Elle vient de `primary` : le jour ou le client change sa charte
	   dans Elementor, ses boutons suivent. Ecrire le cuivre ici le
	   figerait pour toujours, et c'est exactement ce qu'on a passe la
	   journee a defaire. */
	--ch-action: var( --e-global-color-primary, #A85B24 );
	--ch-action-survol: color-mix( in srgb, var( --ch-action ) 84%, #000 );
	--ch-ecume:    var( --e-global-color-ecume, #EAF2F1 );
	--ch-sable:    var( --e-global-color-sable, #F5EFE4 );
	--ch-pommier:  var( --e-global-color-pommierclair, #A8BE9C );
	--ch-papier:   var( --e-global-color-papier, #EFEAE0 );
	--ch-craie:    var( --e-global-color-craie, #FBFAF7 );
	--ch-trait:    var( --e-global-color-trait, #DDD5C7 );
	--ch-sarrasin: var( --e-global-color-sarrasin, #6E6152 );
	--ch-encre:    var( --e-global-color-text, #2A2622 );
	--ch-cidre:    var( --e-global-color-accent, #C8892B );

	/* Le fond sombre du site, devenu marine. La vague du pied de page
	   doit etre EXACTEMENT de la meme couleur que le pied : une vague
	   d'un ton a cote se voit plus qu'une separation droite. D'ou un
	   jeton unique - et qui vient du KIT, pas du theme. Une couleur
	   ecrite dans le theme est une couleur que le commercant ne peut
	   pas changer depuis son administration. */
	--ch-profond: var( --e-global-color-profond, #2C403E );
	--ch-clair:   var( --e-global-color-encreclaire, #EEF3F2 );

	/* L'assombrissement du survol se CALCULE a partir de la couleur
	   d'action. Ecrire un second code en dur, c'est un ton a maintenir
	   en double : le jour ou la charte bouge, le survol reste sur
	   l'ancienne teinte et personne ne le remarque avant longtemps. */
	--ch-fond-mer-survol: color-mix( in srgb, var( --ch-fond-mer ) 84%, #000 );

	/* Les jetons DERIVES. Ils ne sont declares qu'ici - `boutique.css`
	   les consomme, il ne les redeclare pas. Deux jeux de jetons qui
	   decrivent la meme charte finissent toujours par diverger, et la
	   divergence porte toujours sur la valeur qu'on venait d'ajuster. */
	--ch-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
	--ch-rayon: 14px;
	--ch-ombre: 0 10px 30px rgba( 31, 29, 26, .07 );
}

/* ============================================================
   1. LES FORMES — casser l'alignement au cordeau
   ------------------------------------------------------------
   Une page ou tout porte le meme rayon a l'air dessinee par une
   machine, parce qu'elle l'est. Ce qui trahit la generation
   automatique n'est pas la couleur, c'est la REGULARITE : quatre
   tuiles identiques au pixel, des angles tous a 12 px, des
   separations toutes horizontales.

   On casse ici par les rayons ASYMETRIQUES, qui varient d'une tuile
   a l'autre. Les separations en vague, elles, sont des reglages
   Elementor - voir 1.2.
   ============================================================ */

/* 1.1 — Les rayons asymetriques.

   Quatre variantes qui tournent avec `nth-child`. Ecrites a la
   main plutot que tirees au hasard : une valeur aleatoire change
   a chaque chargement, et la page se met a bouger sous les yeux
   de quelqu'un qui revient dessus. */

.woocommerce ul.products li.product,
.bq-rayon,
.ch-carte {
	border-radius: 22px 9px 20px 11px;
}

.woocommerce ul.products li.product:nth-child( 4n + 2 ),
.bq-rayon:nth-child( 4n + 2 ) { border-radius: 10px 21px 10px 22px; }

.woocommerce ul.products li.product:nth-child( 4n + 3 ),
.bq-rayon:nth-child( 4n + 3 ) { border-radius: 20px 12px 24px 8px; }

.woocommerce ul.products li.product:nth-child( 4n + 4 ),
.bq-rayon:nth-child( 4n + 4 ) { border-radius: 9px 24px 11px 19px; }

/* L'image epouse le coin du haut, sinon un carre depasse d'un
   arrondi et on voit l'angle vif. */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a img {
	border-radius: inherit;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* 1.2 — LES SÉPARATIONS SONT NATIVES, PAS MAISON.

   J'avais écrit une vague en masque CSS, puis une vague en SVG injecté
   par JavaScript. Les deux ont rendu des artefacts — une forme grise
   tronquée, puis « un rond moche » — que je ne pouvais pas voir, et que
   le porteur de projet a dû me signaler deux fois.

   > **Elementor sait faire ça nativement** : « Séparateur de forme »
   > sur un conteneur, avec vingt tracés, une hauteur, une couleur et un
   > sens. J'ai écrit du CSS et du JavaScript pour refaire, moins bien,
   > une fonction qui existait — et que le client peut régler lui-même.

   La règle du projet le disait déjà : réglage natif d'abord, variable
   ensuite, CSS de l'élément en dernier. J'ai commencé par le dernier.

   Les séparateurs vivent donc dans les réglages de chaque section
   (`shape_divider_top`), remplis de la couleur de la section du DESSUS.
   Rien ici.
   ============================================================ */

/* Le pied de page garde son fond marine. Sa separation d'avec la
   derniere section est un separateur de forme Elementor, pose sur la
   section, comme toutes les autres. */
.elementor-location-footer {
	background-color: var( --ch-profond );
}

/* ============================================================
   2. LE PASTEL, SUR TOUT LE SITE
   ============================================================ */

/* 2.1 — Les boutons.

   MESURE DU 2026-08-17 : le bouton ambre portait du texte blanc a
   2,97:1. Le minimum lisible est 4,5:1. C'etait un defaut
   d'accessibilite sur l'element le plus clique du site, et il
   datait d'avant ce chantier. La mer profonde monte a 6,08:1. */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var( --ch-action );
	color: #fff;
	border: 0;
	border-radius: 999px;
	transition: background-color .18s ease, transform .18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var( --ch-action-survol, #8F4517 );
	color: #fff;
	transform: translateY( -1px );
}

/* 2.1 bis — La vignette produit, PARTOUT.

   Elle etait habillee dans `boutique.css`, donc seulement sur la
   boutique - alors que la meme vignette apparait sur la fiche
   produit, dans les widgets Elementor et sur les six pages locales.
   Un aspect a un endroit et un autre ailleurs, sans que rien ne le
   dise. */

.woocommerce ul.products li.product {
	background: var( --ch-craie );
	border: 1px solid var( --ch-trait );
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var( --ch-mer );
	box-shadow: var( --ch-ombre );
	transform: translateY( -3px );
}

.woocommerce ul.products li.product .price {
	color: var( --ch-fond-mer );
	font-variant-numeric: tabular-nums;
}

/* 2.1 ter — LES BOUTONS SUR FOND SOMBRE.

   MESURE DU 2026-08-17, sur une capture d'ecran : le bouton
   « Commander maintenant » du bas de page etait a **1,81:1** sur la
   bande marine. Le minimum pour qu'une forme se distingue de son fond
   est 3:1. Il ne se voyait pas.

   J'avais regle le bouton pour les fonds CLAIRS - 6,08:1, mesure, juste -
   et oublie qu'un tiers de la page est sombre. Un reglage global qui ne
   couvre qu'un des deux fonds du site n'est pas un reglage global.

   > Une couleur d'action ne se choisit pas contre du blanc. Elle se
   > choisit contre CHAQUE fond sur lequel elle se posera.

   Sur sombre, on inverse : ecume dessous, encre dessus. 9,67:1 contre
   la bande, 13,2:1 pour le texte. Le cidre serait a 3,70:1 - suffisant
   pour une forme, trop juste pour l'element le plus clique. */

.ch-sombre .elementor-button,
.ch-sombre a.button,
.ch-sombre button.button,
.ch-sombre .emporter-points__lien {
	background-color: var( --ch-ecume );
	color: var( --ch-encre );
	border-color: transparent;
}

.ch-sombre .elementor-button:hover,
.ch-sombre a.button:hover,
.ch-sombre button.button:hover,
.ch-sombre .emporter-points__lien:hover {
	background-color: #fff;
	color: var( --ch-encre );
}

/* Le second bouton d'une paire reste en contour : deux aplats clairs
   cote a cote sur du sombre se disputent le regard, et on ne sait plus
   lequel est l'action principale. */
.ch-sombre .ch-second .elementor-button,
.ch-sombre .elementor-button.elementor-size-sm + .elementor-button {
	background-color: transparent;
	color: var( --ch-clair );
	border: 1px solid rgba( 255, 255, 255, .45 );
}

/* 2.2 — Les liens de contenu.

   On ne touche pas aux liens des menus ni des boutons Elementor :
   ils portent leurs propres reglages, et les ecraser ici ferait
   mentir l'editeur - on y verrait une couleur, la page en
   afficherait une autre. */
.entry-content a:not( .button ):not( .elementor-button ),
.woocommerce-page .entry-content a:not( .button ):not( .elementor-button ) {
	color: var( --ch-fond-mer );
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* 2.3 — Les champs de formulaire. */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.elementor-field-textual {
	border: 1px solid var( --ch-trait );
	border-radius: 12px 5px 12px 5px;
	background: var( --ch-craie );
	color: var( --ch-encre );
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.elementor-field-textual:focus {
	outline: 3px solid var( --ch-mer );
	outline-offset: 1px;
	border-color: var( --ch-fond-mer );
}

/* 2.4 — La pastille « Promo » et les bandeaux. */

.woocommerce span.onsale {
	background-color: var( --ch-pommier );
	color: var( --ch-encre );
	border-radius: 999px;
}

/* ============================================================
   3. LA GALETTE QUI ROULE
   ------------------------------------------------------------
   Un temoin de lecture : une galette qui roule le long d'un fil,
   du haut vers le bas de la page. Elle mesure quelque chose de
   vrai - ou l'on en est - plutot que de decorer.

   ELLE ROULE POUR DE BON. La rotation est liee a la DISTANCE
   parcourue, pas au temps : un tour complet par circonference,
   comme une roue. Une galette qui tourne a vitesse fixe pendant
   qu'elle se deplace glisse au lieu de rouler, et l'oeil le voit
   sans savoir le nommer.

   Le script l'injecte : aucune page n'a besoin de la porter.
   ============================================================ */

.ch-piste {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var( --ch-trait );
	z-index: 60;
	pointer-events: none;
}

.ch-piste__fait {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: var( --ch-mer );
}

.ch-galette {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 26px;
	height: 26px;
	/* On la pose par son CENTRE : sans ça elle roule un demi-diametre
	   trop loin et sort de l'ecran a la fin de la page. */
	margin-left: -13px;
	will-change: transform;
}

/* Sous 782 px - la rupture de WordPress, pour ne pas avoir deux
   avis differents sur ce qu'est un petit ecran - la galette
   retrecit : 26 px sur un fil de 3 px mange le bas d'un telephone
   deja occupe par la barre du navigateur. */
@media ( max-width: 782px ) {
	.ch-galette { width: 20px; height: 20px; margin-left: -10px; }
}

@media ( prefers-reduced-motion: reduce ) {

	/* La galette ne roule pas, et elle n'existe pas : le script
	   n'injecte rien. Cette regle est le filet, au cas ou une piste
	   aurait ete posee avant que le reglage change. */
	.ch-piste { display: none; }

	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce ul.products li.product,
	.bq-rayon {
		transition: none !important;
		transform: none !important;
	}
}

/* ============================================================
   4. LES TROIS FAMILLES DE BOUTONS, RAMENEES A UNE SEULE
   ------------------------------------------------------------
   LE SITE A TROIS SYSTEMES DE STYLE, et chacun a ses boutons :

     - le THEME Hello, pour ce que WordPress rend lui-meme ;
     - le KIT Elementor, qui ne vise que `.elementor-button` ;
     - WOOCOMMERCE, avec `.button`, `.add_to_cart_button`, `#submit` ;
     - et EMPORTER, qui ajoute les siens - `.emporter-points__lien`.

   MESURE DU 2026-08-17 : le kit compile bien `border-radius: 999px`,
   mais sous le selecteur `.elementor-kit-451 .elementor-button`. Les
   boutons de WooCommerce et d'Emporter n'etaient donc PAS arrondis, et
   le porteur de projet voyait des boutons carres a cote de boutons en
   pilule sur la meme page.

   > Un reglage « global » qui ne couvre qu'un des quatre producteurs de
   > boutons du site n'est pas un reglage global. C'est un reglage
   > Elementor.

   D'ou ce bloc : la MEME apparence pour les quatre, tiree des memes
   jetons.

   MAIS `.elementor-button` N'EST PAS DANS CES LISTES, ET C'EST VOULU.
   Le kit le style deja. Le remettre ici creerait deux sources pour la
   meme propriete, et c'est alors la SPECIFICITE qui tranche - pas la
   decision. Le jour ou quelqu'un change le rayon dans Elementor, il ne
   se passerait rien, et personne ne saurait pourquoi.

   On n'etend la decision du kit qu'aux boutons qu'il NE VOIT PAS :
   WooCommerce, Emporter, blocs WordPress.
   ============================================================ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .button.add_to_cart_button,
.emporter-points__lien,
.emporter-bouton,
.wp-block-button__link {
	border-radius: 999px;
	border-width: 0;
	font-weight: 600;
	letter-spacing: .2px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

/* Les boutons qui ne viennent PAS du kit n'ont ni fond ni couleur de
   texte : on leur donne ceux du kit, par la variable, pour qu'un
   changement de charte les emmene avec lui. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .button.add_to_cart_button,
.emporter-points__lien,
.emporter-bouton,
.wp-block-button__link {
	background-color: var( --ch-action );
	color: #fff;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .button.add_to_cart_button:hover,
.emporter-points__lien:hover,
.emporter-bouton:hover,
.wp-block-button__link:hover {
	background-color: var( --ch-action-survol, #8F4517 );
	color: #fff;
	transform: translateY( -1px );
}

/* La cible tactile : 46 px, la meme partout. Un bouton de 34 px a cote
   d'un bouton de 48 px sur la meme page se rate au pouce. */
.woocommerce a.button,
.woocommerce button.button,
.emporter-points__lien,
.emporter-bouton {
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}


/* ============================================================
   5. LES FEUILLES QU'ON NE POSSEDE PAS
   ------------------------------------------------------------
   Emporter apporte sa propre feuille, et elle ecrit `#c8892b` en dur
   pour marquer le jour en cours. On ne modifie PAS le fichier d'un
   plugin pour la charte d'un client : la prochaine mise a jour
   l'ecraserait, et sans le moindre message.

   On surcharge ici, avec la variable du kit. Le plugin garde sa valeur
   par defaut pour qui l'installe ailleurs ; ce site suit sa charte.
   ============================================================ */

.emporter-jour.est-aujourdhui {
	background: var( --e-global-color-cidre, #c8892b );
	border-color: var( --e-global-color-cidre, #c8892b );
	color: var( --ch-encre );
}

/* MOINS D'ORANGE, ET C'EST UNE DECISION.

   Le cidre reste le signal de « maintenant » - la pastille du jour, la
   case du jour en cours. Ce sont des marques de quelques pixels, et
   elles doivent sauter aux yeux.

   Mais il servait aussi de fond a DEUX GROS BOUTONS - celui du bandeau
   du jour et celui de la barre. Deux aplats orange de deux cents pixels
   sur une page pastel, ce n'est plus un accent : c'est la couleur
   dominante. Ils passent a l'ecume, comme tous les boutons sur fond
   sombre.

   > Un accent occupe peu de place. Sinon ce n'est plus un accent,
   > c'est la charte. */

.emporter-auj .emporter-bouton,
.emporter-bandeau__cta {
	background: var( --ch-ecume );
	color: var( --ch-encre );
	border-radius: 999px;
}

.emporter-auj .emporter-bouton:hover,
.emporter-bandeau__cta:hover {
	background: #fff;
	color: var( --ch-encre );
}

/* L'etiquette et le jour gardent le cidre : c'est du TEXTE de quelques
   caracteres sur fond sombre, ou il passe largement le seuil. */
.emporter-auj__etiq,
.emporter-bandeau__jour {
	color: var( --e-global-color-cidre, #c8892b );
}

/* ============================================================
   6. LE BENTO — la seule regle sans equivalent natif
   ------------------------------------------------------------
   Elementor n'a AUCUN controle « cette tuile occupe deux
   colonnes ». Tout le reste du bloc est natif : le widget
   Produits sert les vrais plats, leurs vrais prix, leur vrai
   stock. Ecrire « 13,00 EUR » dans une page en ferait un
   mensonge au premier changement de carte.

   > Huit tuiles egales n'ont pas de point focal. Une tuile
   > double en cree un, et on la donne a ce qui rapporte le
   > plus : la formule.

   La regle est scopee sur `.rlg-bento` : elle ne peut pas
   fuir sur la boutique ni sur les pages locales, qui affichent
   la meme grille de produits.
   ============================================================ */

@media ( min-width: 620px ) {

	.rlg-bento ul.products li.product:first-child {
		grid-column: span 2;
	}

	/* Une tuile deux fois plus large avec une image carree
	   devient une tuile deux fois plus HAUTE. On aplatit
	   l'image pour que la rangee garde sa hauteur. */
	.rlg-bento ul.products li.product:first-child a img {
		aspect-ratio: 16 / 9;
	}
}

/* Sous 620 px la grille est a deux colonnes : « span 2 » ferait
   une tuile pleine largeur suivie de rangees depareillees. Le
   bento n'a de sens qu'a partir de trois colonnes. */


/* ============================================================
   7. LE BANDEAU DU JOUR — l'air qui lui manquait
   ------------------------------------------------------------
   Signale par le porteur de projet : la bande etait collee au
   bandeau au-dessus et aux rayons en dessous. Elle porte
   pourtant l'information la plus perissable de la page, celle
   qu'on lit en premier.

   Le rembourrage vient du PLUGIN, qui ne connait pas la charte
   de ce site. On le surcharge ici plutot que de modifier son
   fichier : sa prochaine mise a jour l'ecraserait sans un mot.
   ============================================================ */

.emporter-bandeau,
.emporter-auj {
	padding-top: 18px;
	padding-bottom: 18px;
}

@media ( min-width: 782px ) {

	.emporter-bandeau,
	.emporter-auj {
		padding-top: 22px;
		padding-bottom: 22px;
	}
}

/* La pastille du jour reste en cidre : c'est une marque de quelques
   pixels, et c'est le seul endroit ou le chaud sert a dire
   « maintenant » plutot qu'« achetez ». Deux chaleurs differentes
   pour deux fonctions differentes. */
.emporter-bandeau__point,
.jour__pt {
	background: var( --e-global-color-cidre, #C8892B );
}

/* ============================================================
   8. LA RARETE REELLE
   ------------------------------------------------------------
   « Prochain retrait 12 h 15, il reste 9 galettes ». Deux faits
   que le site connait deja et ne disait pas.

   Le cidre marque le creneau : c'est le seul endroit ou le
   chaud sert a dire « maintenant » plutot qu'« achetez ». Le
   cuivre des boutons dit l'action, le cidre dit l'heure. Deux
   chaleurs, deux fonctions, jamais la meme.
   ============================================================ */

.rlg-urgence {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-size: .86rem;
	font-variant-numeric: tabular-nums;
}

.rlg-urgence__creneau b {
	color: var( --e-global-color-cidre, #C8892B );
	font-weight: 700;
}

/* Le restant se detache : c'est lui qui fait commander maintenant.
   Une pastille plutot qu'un mot dans la phrase. */
.rlg-urgence__reste {
	background: rgba( 200, 137, 43, .18 );
	border: 1px solid rgba( 200, 137, 43, .5 );
	color: var( --ch-clair );
	padding: 3px 11px;
	border-radius: 999px;
	line-height: 1.3;
}

/* Sur fond clair, la pastille reprend l'encre : le meme trait sur
   du blanc serait illisible. */
.bande--craie .rlg-urgence__reste,
.rlg-sur-clair .rlg-urgence__reste {
	color: var( --ch-encre );
	background: rgba( 200, 137, 43, .16 );
}

/* ============================================================
   9. LES TROIS CHIFFRES DU PREMIER ECRAN
   ------------------------------------------------------------
   Ils se comptent, ils ne s'ecrivent pas. Voir `urgence.php`.

   Ils sont poses SUR le bandeau, pas dans une bande a part : le
   modele de reference les met sous le hero, ce qui pousse la
   premiere image d'assiette encore plus bas. Ici ils tiennent
   dans le meme ecran que le titre.
   ============================================================ */

.rlg-chiffres {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 18px 0 0;
	padding: 0;
}

.rlg-chiffres li {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.rlg-chiffres b {
	font-family: var( --ch-serif );
	font-weight: 400;
	font-size: 1.7rem;
	color: var( --e-global-color-cidre, #C8892B );
	font-variant-numeric: tabular-nums;
}

.rlg-chiffres span {
	font-size: .8rem;
	color: rgba( 255, 255, 255, .82 );
	max-width: 15ch;
}

/* Sur fond clair, l'intitule reprend l'encre attenuee. */
.bande--craie .rlg-chiffres span,
.rlg-sur-clair .rlg-chiffres span {
	color: var( --ch-sarrasin );
}

@media ( min-width: 782px ) {
	.rlg-chiffres { gap: 12px 40px; margin-top: 24px; }
	.rlg-chiffres b { font-size: 2.1rem; }
}

/* ============================================================
   10. LES ANIMATIONS D'ENTREE, ET LEUR GARDE-FOU
   ------------------------------------------------------------
   Elementor pose les animations nativement, et c'est tant mieux :
   le client peut les changer element par element depuis le
   panneau.

   MAIS IL N'HONORE PAS `prefers-reduced-motion`. Un visiteur qui
   a demande a son systeme de reduire les animations - parce que
   le mouvement lui donne la nausee, parce qu'il est sujet aux
   vertiges - voit quand meme toute la page monter.

   > Ce reglage n'est pas une preference esthetique. Pour
   > certaines personnes c'est un symptome qu'on declenche.

   `elementor-invisible` est la classe qu'Elementor pose sur un
   element en attente d'animation : il est en `visibility:
   hidden` jusqu'a ce que le script le revele. Si on coupe
   seulement l'animation sans lever cette classe, le contenu
   reste INVISIBLE. C'est le piege, et c'est pire que l'animation
   qu'on voulait eviter.
   ============================================================ */

@media ( prefers-reduced-motion: reduce ) {

	.elementor-element.elementor-invisible {
		visibility: visible !important;
		animation: none !important;
	}

	.elementor-element.animated {
		animation: none !important;
	}
}

/* ============================================================
   11. L'AIR SUR TELEPHONE
   ------------------------------------------------------------
   Signale par le porteur de projet : la bande du jour colle au
   bandeau sur mobile.

   La cause est structurelle. Sur grand ecran la bande fait UNE
   ligne : elle se lit comme un bandeau d'information, et 22 px
   suffisent. Sous 782 px elle passe a trois ou quatre lignes
   empilees - le jour, l'heure, la rarete, le bouton - et le meme
   rembourrage donne un pave colle a la photo.

   > Un rembourrage juste sur un ecran large ne l'est pas sur un
   > ecran etroit, parce que ce n'est pas le meme objet : une
   > ligne d'un cote, un bloc de l'autre.

   On separe donc les deux cas au lieu de chercher une valeur
   moyenne qui ne va nulle part.
   ============================================================ */

@media ( max-width: 781px ) {

	.rlg-bande-jour,
	.emporter-bandeau,
	.emporter-auj {
		padding-top: 26px;
		padding-bottom: 26px;
		row-gap: 10px;
	}

	/* Le bouton du bandeau prend toute la largeur : sur trois lignes
	   empilees, un bouton court flotte a droite sans rien pour le
	   retenir. */
	.emporter-bandeau__cta,
	.emporter-auj .emporter-bouton {
		width: 100%;
		margin-top: 4px;
	}

	/* La rarete passe a la ligne et respire : c'est l'information la
	   plus perissable de la page, elle ne doit pas etre serree entre
	   deux autres. */
	.rlg-urgence {
		width: 100%;
		gap: 8px 14px;
		padding-top: 4px;
	}

	/* Le bandeau photo garde de l'air sous son texte, sinon le titre
	   touche la bande qui suit. */
	.rlg-hero-mots,
	.elementor-element.ch-sombre > .e-con-inner {
		padding-bottom: 8px;
	}
}

/* ============================================================
   12. LE SOUFFLE ENTRE LES BLOCS
   ------------------------------------------------------------
   Le rembourrage des sections est regle dans Elementor, section
   par section - c'est la bonne place, le client peut l'ajuster.
   Ce qui suit ne touche qu'a ce qu'Elementor ne voit pas : l'ecart
   entre un titre et la grille qui le suit, et entre deux tuiles.
   ============================================================ */

/* Une grille de produits collee a son titre se lit comme une seule
   masse. Trois quarts d'une ligne suffisent a les separer. */
.woocommerce ul.products {
	margin-top: 6px;
}

/* Les tuiles respirent a l'interieur, pas seulement entre elles. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding-top: 4px;
}

.woocommerce ul.products li.product .button {
	margin-top: 10px;
	margin-bottom: 4px;
}

/* ============================================================
   13. LES FILTRES DE RAYON
   ------------------------------------------------------------
   Quatre pastilles en haut de la boutique. Pas un menu deroulant :
   sur un telephone, un menu demande deux gestes et cache ses
   options ; quatre pastilles se lisent d'un coup.

   Le rayon actif prend la couleur d'action - c'est le seul endroit
   du site ou le cuivre dit « vous etes ici » plutot que
   « cliquez ». Le contexte suffit a lever l'ambiguite : un
   element `aria-current` ne se clique pas pour aller ailleurs.
   ============================================================ */

.rlg-filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
	padding: 0;
}

.rlg-filtre {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 42px;
	padding: 0 16px;
	border-radius: 999px;
	background: var( --ch-craie );
	border: 1px solid var( --ch-trait );
	color: var( --ch-encre );
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.rlg-filtre:hover {
	border-color: var( --ch-action );
	transform: translateY( -1px );
}

.rlg-filtre.est-actif {
	background: var( --ch-action );
	border-color: var( --ch-action );
	color: #fff;
}

.rlg-filtre__n {
	font-size: .78rem;
	opacity: .72;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   14. LA GRILLE DE LA BOUTIQUE S'ANIME AUSSI
   ------------------------------------------------------------
   Les six autres pages sont animees par Elementor. La boutique
   est une ARCHIVE WooCommerce : aucun conteneur Elementor, donc
   aucun reglage d'entree ne l'atteint. Elle etait la seule page
   figee du site.

   D'ou ces quelques lignes - le seul endroit ou une animation
   s'ecrit en CSS plutot que se regler dans le panneau.

   ELLE EST SANS FILET : pas de JavaScript, pas d'observateur.
   Une animation `animation-delay` joue au chargement, meme si le
   produit est encore hors de l'ecran. C'est moins fin qu'une
   revelation au defilement, et ca ne peut pas laisser une
   vignette invisible - ce qui est arrive deux fois aujourd'hui.
   ============================================================ */

@media ( prefers-reduced-motion: no-preference ) {

	.woocommerce-shop ul.products li.product {
		animation: rlg-monte .5s ease both;
	}

	/* L'escalier s'arrete a la sixieme : au-dela le visiteur a deja
	   defile, et le retard devient une absence. */
	.woocommerce-shop ul.products li.product:nth-child( 2 ) { animation-delay: .05s; }
	.woocommerce-shop ul.products li.product:nth-child( 3 ) { animation-delay: .1s; }
	.woocommerce-shop ul.products li.product:nth-child( 4 ) { animation-delay: .15s; }
	.woocommerce-shop ul.products li.product:nth-child( 5 ) { animation-delay: .2s; }
	.woocommerce-shop ul.products li.product:nth-child( n + 6 ) { animation-delay: .25s; }
}

@keyframes rlg-monte {
	from { opacity: 0; transform: translateY( 14px ); }
	to   { opacity: 1; transform: none; }
}

/* ============================================================
   15. L'AIR, POUR DE BON
   ------------------------------------------------------------
   Le rembourrage des sections vit dans Elementor. Ce qui suit ne
   touche qu'a ce qu'Elementor ne voit pas : l'interieur des
   grilles WooCommerce, et l'ecart entre un bloc et le suivant sur
   les pages qui n'ont pas ete rebaties.
   ============================================================ */

.woocommerce ul.products {
	row-gap: 30px;
	margin-bottom: 8px;
}

@media ( min-width: 782px ) {
	.woocommerce ul.products { row-gap: 40px; }
}

/* La vignette respire a l'interieur. 11 px en bas serrait le bouton
   contre le cadre. */
.woocommerce ul.products li.product {
	padding-bottom: 16px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 6px 14px 2px;
	line-height: 1.3;
}

.woocommerce ul.products li.product .price {
	margin: 0 14px 4px;
	display: block;
}

.woocommerce ul.products li.product .button {
	margin: 8px 14px 0;
}

/* Les blocs de contenu Elementor : un titre colle a son paragraphe
   se lit comme un seul pave. */
.elementor-widget-heading + .elementor-widget-text-editor {
	margin-top: 2px;
}