/* ==========================================================================
   HiveShop — base : reinitialisation, typographie, elements de formulaire
   Aucune couleur en dur : tout passe par les variables --hs-* generees par
   includes/dynamic-css.php a partir du personnalisateur.
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;

	/* 🔑 Reserve en permanence la place de la barre de defilement.
	   Sans cette regle, une page assez longue pour deborder affiche une barre
	   d'environ 15 px qui retrecit la zone de contenu, tandis qu'une page
	   courte n'en a pas : le contenu centre se decale donc horizontalement
	   d'une page a l'autre, et le site parait « sauter » a chaque navigation.
	   La regle se pose sur html, jamais sur un conteneur interne. */
	scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--hs-bg);
	color: var(--hs-text);
	font-family: var(--hs-font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Le defilement est bloque quand un tiroir est ouvert. La place de la barre
   etant deja reservee sur html, aucune compensation n'est necessaire ici. */
body.hs-locked {
	overflow: hidden;
}

/* === TYPOGRAPHIE === */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	color: var(--hs-heading);
	font-family: var(--hs-font-heading);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; }

p,
ul,
ol,
dl,
figure,
blockquote {
	margin: 0 0 1.15em;
}

a {
	color: var(--hs-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--hs-transition);
}

a:hover,
a:focus {
	color: var(--hs-primary-dark);
}

strong, b { font-weight: 600; }
small { font-size: 0.875em; color: var(--hs-text-muted); }

blockquote {
	padding: 0.2em 0 0.2em 1.2em;
	border-left: 3px solid var(--hs-primary);
	color: var(--hs-heading);
	font-size: 1.0625rem;
}

hr {
	height: 1px;
	margin: 2.5rem 0;
	border: 0;
	background: var(--hs-border);
}

code, pre, kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

code {
	padding: 0.15em 0.4em;
	border-radius: var(--hs-radius-sm);
	background: var(--hs-bg-alt);
}

pre {
	overflow-x: auto;
	padding: 1.2rem;
	border-radius: var(--hs-radius);
	background: var(--hs-bg-alt);
}

/* === MEDIAS === */

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* 🔴 LA BARRE D'ADMINISTRATION N'EST PAS A NOUS.
 *
 * Signale par Chris le 21/08/2026, capture a l'appui : l'element HiveProtect
 * de la barre s'affichait sur DEUX lignes, son icone au-dessus du texte.
 *
 * La cause est la regle juste au-dessus. « display: block » est le bon reglage
 * pour les images d'un site — il supprime l'espace fantome que laisse la ligne
 * de base sous une image en ligne. Mais WordPress compose sa barre EN LIGNE :
 * une icone passee en bloc prend sa propre ligne, et le texte descend.
 *
 * Mesure sur le lien HiveProtect :
 *
 *   avec la regle      contenu reel 50 px, dans un conteneur bloque a 32
 *   sans la regle      contenu reel 32 px
 *
 * Les 18 px de trop sont exactement la hauteur de l'icone. Le conteneur, lui,
 * garde 32 px — « #wpadminbar .ab-item » les impose — donc rien ne s'agrandit :
 * l'icone deborde par-dessous, et c'est ce debordement qu'on voit.
 *
 * 🔑 C'EST UN DEFAUT INVISIBLE POUR LE VISITEUR.
 *
 * La barre n'apparait qu'aux utilisateurs connectes. Le proprietaire de la
 * boutique le voit sur chacune de ses pages, tous les jours ; personne ne peut
 * le lui signaler, et aucun test de rendu public ne le rencontre.
 *
 * « max-width: none » compte autant : une icone de 20 px n'a pas besoin d'etre
 * bornee, et la borne pourrait la retrecir dans un conteneur etroit. */
#wpadminbar img,
#wpadminbar svg,
#wpadminbar picture {
	display: inline-block;
	max-width: none;
}

figure > img { border-radius: var(--hs-radius); }

figcaption {
	margin-top: 0.5rem;
	color: var(--hs-text-muted);
	font-size: 0.875rem;
}

/* === TABLEAUX === */

table {
	width: 100%;
	margin-bottom: 1.5rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

th, td {
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--hs-border);
	text-align: left;
}

th {
	color: var(--hs-heading);
	font-weight: 600;
}

/* === FORMULAIRES === */

input,
select,
textarea,
button {
	font: inherit;
	color: inherit;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-sm);
	background: var(--hs-bg);
	color: var(--hs-text);
	transition: border-color var(--hs-transition), box-shadow var(--hs-transition);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--hs-primary);
	box-shadow: 0 0 0 3px rgba(var(--hs-primary-rgb), 0.16);
	outline: none;
}

::placeholder {
	color: var(--hs-text-muted);
	opacity: 1;
}

label {
	display: inline-block;
	margin-bottom: 0.35rem;
	color: var(--hs-heading);
	font-size: 0.9375rem;
	font-weight: 500;
}

textarea { min-height: 8rem; resize: vertical; }

select {
	appearance: none;
	padding-right: 2.2rem;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* === ACCESSIBILITE === */

:focus-visible {
	outline: 2px solid var(--hs-primary);
	outline-offset: 2px;
}

/* 🔴 LE BLEU QUI N'EST DANS AUCUNE PALETTE VIENT DU NAVIGATEUR.
 *
 * Deux couleurs sont posees par le navigateur lui-meme quand personne ne les
 * declare — et elles sont bleues, quelle que soit la charte du site :
 *
 *   -webkit-tap-highlight-color   le voile qui recouvre un lien au TOUCHER,
 *                                 sur telephone et tablette. C'est celui-la
 *                                 qu'on voit en tapant sur une entree du menu.
 *   ::selection                   le surlignage d'un texte selectionne.
 *
 * Elles ne se remarquent pas en developpement — a la souris, la premiere ne se
 * declenche jamais — et sautent aux yeux des le premier essai sur un vrai
 * telephone. Elles reprennent donc la couleur principale de la palette, en
 * transparence pour rester un signal et non un aplat. */
html {
	-webkit-tap-highlight-color: rgba(var(--hs-primary-rgb), 0.14);
}

::selection {
	background: rgba(var(--hs-primary-rgb), 0.22);
	color: var(--hs-heading);
}

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

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: 0.7rem 1.2rem;
	border-radius: var(--hs-radius-sm);
	background: var(--hs-primary);
	color: var(--hs-on-primary);
	text-decoration: none;
	transition: top var(--hs-transition);
}

.skip-link:focus {
	top: 1rem;
	color: var(--hs-on-primary);
}