/* ============================================================
   Socle — base typographique, conteneurs, boutons, formulaires.
   Aucune couleur en dur : tout vient de tokens.css.
   ============================================================ */

/* --- Alignement des variables GeneratePress sur la charte --------
 *
 * GP définit ses propres couleurs globales (--accent bleu #1e73be par défaut)
 * et s'en sert dans son CSS dynamique inline pour tout ce qu'il rend lui-même.
 * Les régler au Customizer les mettrait EN BASE — hors de Git, non déployables
 * par rsync : c'est ce que refuse l'ADR-001. On les redéfinit ici.
 *
 * Ce fichier est chargé après `generate-style-inline-css` (vérifié dans le HTML
 * rendu) : la redéfinition gagne sans un seul !important.
 * ---------------------------------------------------------------- */
:root {
	--accent: var(--bepc-logo-brun);
	--contrast: var(--bepc-encre);
	--contrast-2: var(--bepc-brun);
	--contrast-3: var(--bepc-muted);
	--base: var(--bepc-pierre);
	--base-2: var(--bepc-creme);
	--base-3: var(--bepc-surface);
}

body {
	background: var(--bepc-bg);
	color: var(--bepc-text);
	font-family: var(--bepc-font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--bepc-font-title);
	color: var(--bepc-encre);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); }

p { max-width: var(--bepc-max-text); }

a {
	color: var(--bepc-logo-brun);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
	color: var(--bepc-terre);
}

/* Focus visible partout — public adolescent, navigation clavier réelle. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--bepc-miel);
	outline-offset: 2px;
	border-radius: var(--bepc-radius-sm);
}

/* --- Gabarits codés : neutraliser deux réglages de GeneratePress ---
 *
 * 1. GP pose `display: flex` sur `.site-content` pour aligner contenu et
 *    sidebar. Nos sections en sont enfants directs : sans ce `block`, elles
 *    s'affichent EN COLONNES côte à côte. Piège déjà consigné pour Lambert.
 * 2. `#page.grid-container` borne à 1200 px, ce qui empêche les fonds de
 *    section (pierre, miel) de filer d'un bord à l'autre de l'écran.
 *
 * Scopé à `.bepc-tpl-coded` (posé en PHP), jamais appliqué globalement : les
 * pages éditoriales normales doivent garder le comportement de GP.
 * ---------------------------------------------------------------- */
.bepc-tpl-coded .site-content {
	display: block;
}

.bepc-tpl-coded #page.grid-container,
.bepc-tpl-coded #page.container {
	max-width: none;
	padding: 0;
}

/* --- Conteneurs ------------------------------------------------ */

.bepc-container {
	width: 100%;
	max-width: var(--bepc-max-width);
	margin-inline: auto;
	padding-inline: var(--bepc-s-5);
}

/* Sticky footer : le pied de page reste en bas sur les pages courtes
   (panier vide, confirmation de commande). */
body {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

/* `width: 100%` n'est pas décoratif ici.
 *
 * GeneratePress pose `margin-left: auto; margin-right: auto` sur
 * `.grid-container`. Sur un ÉLÉMENT FLEX — ce que `#page` devient à cause du
 * pied de page collant ci-dessus — des marges automatiques sur l'axe
 * transversal **annulent l'étirement** : l'élément se dimensionne à son
 * contenu, puis se centre.
 *
 * Conséquence observée : la boutique s'affichait dans une colonne de 385 px au
 * milieu de l'écran, alors que l'accueil paraissait normal — ses sections font
 * 100 % de large, donc « s'ajuster au contenu » y donnait la pleine largeur.
 * Le symptôme ne se voyait que sur les pages au contenu étroit. */
#page.site {
	flex: 1;
	width: 100%;
}

/* --- Section ---------------------------------------------------- */

.bepc-section {
	padding-block: var(--bepc-s-16);
}

.bepc-section--tight { padding-block: var(--bepc-s-12); }
.bepc-section--honey { background: var(--bepc-miel-pale); }

/* Bande informative : fond presque blanc, tenu par deux filets miel très fins
   plutôt qu'un aplat coloré. Un pavé plein aurait fait une quatrième couleur
   dominante et volé l'attention à la photo, au titre et aux boutons, qui sont
   les vrais points d'accroche. */
.bepc-section--band {
	background: var(--bepc-beige);
	border-block: 1px solid var(--bepc-sable);
}

.bepc-section__head {
	max-width: var(--bepc-max-text);
	margin-bottom: var(--bepc-s-10);
}

.bepc-section__kicker {
	display: block;
	margin-bottom: var(--bepc-s-2);
	color: var(--bepc-terre);
	font-family: var(--bepc-font-body);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bepc-section__title { margin: 0; }

.bepc-section__intro {
	margin-top: var(--bepc-s-4);
	color: var(--bepc-text-2);
	font-size: 1.075rem;
}

/* --- Boutons --------------------------------------------------- */

.bepc-btn,
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bepc-s-2);
	padding: var(--bepc-s-3) var(--bepc-s-6);
	border: 0;
	border-radius: var(--bepc-radius-pill);
	background: var(--bepc-miel);
	color: var(--bepc-encre);
	font-family: var(--bepc-font-body);
	font-weight: 650;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--bepc-d-base) ease, transform var(--bepc-d-fast) ease;
}

.bepc-btn:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
	background: var(--bepc-miel-clair);
	color: var(--bepc-encre);
}

.bepc-btn:active { transform: translateY(1px); }

.bepc-btn--brand {
	background: var(--bepc-caramel);
	color: #fff;
}

.bepc-btn--brand:hover {
	background: var(--bepc-logo-brun);
	color: #fff;
}

.bepc-btn--ghost {
	background: transparent;
	color: var(--bepc-logo-brun);
	box-shadow: inset 0 0 0 2px var(--bepc-border-strong);
}

.bepc-btn--ghost:hover {
	background: var(--bepc-miel-pale);
	color: var(--bepc-logo-brun);
}

/* --- Cartes ---------------------------------------------------- */

.bepc-card {
	background: var(--bepc-surface);
	border: 1px solid var(--bepc-border);
	border-radius: var(--bepc-radius);
	box-shadow: var(--bepc-shadow-sm);
}

/* --- Pastilles de statut --------------------------------------- */

.bepc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.28em 0.7em;
	border-radius: var(--bepc-radius-pill);
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: 0.02em;
}

.bepc-badge--stock {
	background: var(--bepc-in-stock-soft);
	color: var(--bepc-in-stock);
}

.bepc-badge--out {
	background: var(--bepc-out-stock-soft);
	color: var(--bepc-out-stock);
}

.bepc-badge--honey {
	background: var(--bepc-miel-pale);
	color: var(--bepc-logo-brun);
}

/* --- Champs de formulaire -------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
	width: 100%;
	padding: var(--bepc-s-3) var(--bepc-s-4);
	border: 1px solid var(--bepc-border-strong);
	border-radius: var(--bepc-radius-sm);
	background: var(--bepc-surface);
	color: var(--bepc-text);
	font-family: var(--bepc-font-body);
	font-size: 1rem;
}

/* --- Accessibilité --------------------------------------------- */

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

/* Alpine : évite le flash des éléments encore non initialisés. */
[x-cloak] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}