/* ============================================================
   BOUTIQUE — l'habillage propre à la page de la carte
   ------------------------------------------------------------
   Servie UNIQUEMENT sur `is_shop()`. C'est le seul écran public
   qui ait sa feuille à lui, et c'est délibéré : la boutique est
   la page où l'on vend, elle mérite une atmosphère que les pages
   de contenu n'ont pas besoin de porter.

   Le même raisonnement que Comptoir applique à la Caisse et à la
   Cuisine : une couche générique par-dessus un écran dessiné ne
   l'améliore pas, elle l'aplatit.

   MER, BOIS, NATURE. Les couleurs viennent du kit Elementor, avec
   leur repli en dur : une variable absente ne doit jamais rendre
   du texte invisible. La mer porte l'atmosphère, le cidre reste
   la SEULE couleur forte - et il ne sert qu'aux boutons. Un pastel
   sans point d'appui n'est pas doux, il est mou.

   MOBILE D'ABORD, au sens strict : tout ce qui est écrit hors
   requête media vaut pour le téléphone, et on ÉLARGIT vers le
   haut. Aucune règle en `max-width` dans ce fichier.
   ============================================================ */

/* LES JETONS NE SONT PAS ICI, ET C EST LE CORRECTIF.
 *
 * Cette feuille en declarait onze a elle - `--bq-craie`, `--bq-rayon`,
 * `--bq-ombre`... - pendant que `charte.css` en declarait autant sous
 * un autre prefixe. 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.
 *
 * C est exactement le defaut trouve le matin meme dans `style.css`,
 * ou trois blocs decrivaient la meme grille. Reproduit le soir, dans
 * un fichier neuf.
 *
 * Ils vivent desormais une seule fois, dans `charte.css`, sous le
 * prefixe `--ch-`. Cette feuille les CONSOMME. Les deux alias qui
 * restent ci-dessous existent pour que le reste du fichier n ait pas
 * a etre reecrit ligne a ligne - ils pointent vers la source, ils ne
 * la redefinissent pas.
 */
.bq {
	--bq-rayon: var( --ch-rayon );
	--bq-serif: var( --ch-serif );

	color: var( --ch-encre );
}

/* ---------- 1. Le bandeau ---------- */

.bq-hero {
	position: relative;
	border-radius: var( --bq-rayon );
	overflow: hidden;
	background: var( --ch-ecume );
	margin: 0 0 28px;
}

.bq-hero__image {
	display: block;
	width: 100%;
	height: auto;
	/* Sur téléphone on serre : un 16/9 laisse le sujet minuscule. */
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Le voile part du BAS et remonte : le texte se pose sur la partie
   la plus sombre de la photo, jamais au milieu du sujet. */
.bq-hero__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba( 20, 32, 31, .82 ) 0%,
		rgba( 20, 32, 31, .55 ) 38%,
		rgba( 20, 32, 31, .06 ) 72%,
		rgba( 20, 32, 31, 0 ) 100%
	);
}

.bq-hero__mots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px 18px 22px;
}

.bq-oeil {
	display: block;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --ch-mer );
	margin: 0 0 6px;
}

.bq-hero__titre {
	font-family: var( --bq-serif );
	font-weight: 400;
	font-size: clamp( 1.7rem, 7vw, 3.2rem );
	line-height: 1.08;
	margin: 0 0 8px;
	color: #fff;
	text-wrap: balance;
}

.bq-hero__phrase {
	margin: 0;
	font-size: .98rem;
	line-height: 1.5;
	color: rgba( 255, 255, 255, .9 );
	max-width: 46ch;
}

/* ---------- 2. Les pastilles de repère ---------- */

.bq-reperes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.bq-repere {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .16 );
	border: 1px solid rgba( 255, 255, 255, .28 );
	color: #fff;
	font-size: .82rem;
	line-height: 1;
	/* Un chiffre dans une pastille doit s'aligner d'une ligne à l'autre. */
	font-variant-numeric: tabular-nums;
}

.bq-repere b { font-weight: 600; }

/* ---------- 3. L'introduction ---------- */

.bq-intro {
	background: var( --ch-sable );
	border-radius: var( --bq-rayon );
	padding: 20px 18px;
	margin: 0 0 28px;
}

.bq-intro p {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.62;
	color: var( --ch-sarrasin );
	max-width: 62ch;
}

.bq-intro p + p { margin-top: 10px; }

.bq-intro strong { color: var( --ch-encre ); font-weight: 600; }

/* ---------- 4. Les rayons ---------- */

.bq-titre-section {
	font-family: var( --bq-serif );
	font-weight: 400;
	font-size: clamp( 1.3rem, 4.5vw, 1.85rem );
	line-height: 1.2;
	margin: 0 0 4px;
	color: var( --ch-encre );
}

.bq-sous-titre {
	margin: 0 0 16px;
	color: var( --ch-sarrasin );
	font-size: .95rem;
}

.bq-rayons {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 12px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}

.bq-rayon {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var( --bq-rayon );
	overflow: hidden;
	background: var( --ch-craie );
	border: 1px solid var( --ch-trait );
	text-decoration: none;
	color: inherit;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.bq-rayon:hover,
.bq-rayon:focus-visible {
	transform: translateY( -3px );
	box-shadow: var( --ch-ombre );
	border-color: var( --ch-mer );
}

/* Le focus doit se voir : c'est la seule façon de parcourir la page
   au clavier, et le survol ne la donne pas. */
.bq-rayon:focus-visible {
	outline: 3px solid var( --ch-fond-mer );
	outline-offset: 2px;
}

.bq-rayon__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s ease;
}

.bq-rayon:hover .bq-rayon__image { transform: scale( 1.05 ); }

.bq-rayon__mots {
	padding: 11px 13px 14px;
}

.bq-rayon__nom {
	display: block;
	font-family: var( --bq-serif );
	font-size: 1.02rem;
	line-height: 1.25;
	margin: 0 0 3px;
}

.bq-rayon__compte {
	display: block;
	font-size: .82rem;
	color: var( --ch-sarrasin );
	font-variant-numeric: tabular-nums;
}

/* ---------- 5. La grille de produits ---------- */

/* RIEN ICI, ET C EST VOULU.
 *
 * Cette section habillait la vignette produit - fond, cadre, survol,
 * prix - mais SEULEMENT sur la boutique, et avec un rayon uniforme de
 * 14 px. Deux problemes, et le second est le pire :
 *
 * 1. La meme vignette apparait sur la fiche produit, dans les widgets
 *    Elementor et sur les pages locales. L habiller ici donnait un
 *    aspect a la boutique et un autre partout ailleurs.
 * 2. Le rayon uniforme se battait avec les rayons ASYMETRIQUES que la
 *    charte pose - et c est justement l uniformite qui donne l air
 *    genere par une machine.
 *
 * L habillage de la vignette vit desormais dans `charte.css`, une
 * seule fois, pour tout le site.
 */

/* ---------- 6. Le bandeau de fin ---------- */

.bq-pied {
	position: relative;
	border-radius: var( --bq-rayon );
	overflow: hidden;
	margin: 34px 0 0;
	background: var( --ch-ecume );
}

.bq-pied__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 1;
	object-fit: cover;
}

.bq-pied__mots {
	padding: 18px;
}

.bq-pied__mots p {
	margin: 0;
	color: var( --ch-sarrasin );
	font-size: .96rem;
	line-height: 1.6;
	max-width: 60ch;
}

/* ============================================================
   L'ÉLARGISSEMENT — on ne redescend jamais, on monte
   ============================================================ */

@media ( min-width: 620px ) {

	.bq-hero__image { aspect-ratio: 2 / 1; }
	.bq-hero__mots  { padding: 30px 28px 32px; }
	.bq-intro       { padding: 26px 28px; }
	.bq-rayons      { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 16px; }
	.bq-pied__mots  { padding: 24px 28px; }
}

@media ( min-width: 1000px ) {

	.bq-hero__image { aspect-ratio: 21 / 9; }
	.bq-hero__mots  { padding: 40px 44px 44px; }
	.bq-intro       { padding: 32px 44px; }
	.bq-intro p     { font-size: 1.08rem; }
	.bq-rayons      { gap: 22px; }
	.bq-pied__mots  { padding: 30px 44px; }
}

/* ============================================================
   LA RÉVÉLATION AU DÉFILEMENT
   ------------------------------------------------------------
   ELLE AMÉLIORE, ELLE NE PORTE PAS. L'état par défaut est
   VISIBLE : sans JavaScript - réseau coupé, extension de
   sécurité, navigateur ancien - la page s'affiche entière.
   C'est le script qui pose `.bq--anime` et ouvre la porte à
   l'animation, jamais l'inverse.

   Une page dont le contenu est caché en CSS et révélé en JS
   devient une page blanche le jour où le script ne charge pas.
   ============================================================ */

.bq--anime .bq-monte {
	opacity: 0;
	transform: translateY( 14px );
	transition: opacity .55s ease, transform .55s ease;
}

.bq--anime .bq-monte.est-vu {
	opacity: 1;
	transform: none;
}

/* L'escalier : chaque tuile part un souffle après la précédente.
   60 ms - assez pour qu'on le sente, trop peu pour qu'on l'attende. */
.bq--anime .bq-rayon.bq-monte:nth-child( 2 ) { transition-delay: .06s; }
.bq--anime .bq-rayon.bq-monte:nth-child( 3 ) { transition-delay: .12s; }
.bq--anime .bq-rayon.bq-monte:nth-child( 4 ) { transition-delay: .18s; }

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

	/* Tout est visible, tout de suite, et plus rien ne bouge.
	   Y compris le survol : une carte qui saute sous le doigt
	   est exactement ce que ce réglage demande d'éviter. */
	.bq--anime .bq-monte,
	.bq--anime .bq-monte.est-vu {
		opacity: 1;
		transform: none;
		transition: none;
	}

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