/* stbp-fonts */
/* Plus Jakarta Sans — auto-hébergée (fichiers variables Google Fonts, poids 300-800) */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('https://www.stbp.tn/wp-content/themes/stbp/assets/fonts/PlusJakartaSans-normal-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;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('https://www.stbp.tn/wp-content/themes/stbp/assets/fonts/PlusJakartaSans-normal-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.stbp.tn/wp-content/themes/stbp/assets/fonts/PlusJakartaSans-italic-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;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.stbp.tn/wp-content/themes/stbp/assets/fonts/PlusJakartaSans-italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* stbp-base */
/* ==========================================================================
   STBP — Design tokens
   Valeurs extraites de la référence graphique (stbp.zip / Figma).
   ========================================================================== */

:root {
  /* Couleurs de marque */
  --color-primary: #208baf;
  --color-primary-light: #208baf;
  /* Nuance claire du bleu de marque — bannière titre + fil d'Ariane, pour la
     distinguer de la barre de menu #208baf (demande utilisateur 2026-09-23). */
  --color-primary-soft: #4fadcc;
  --color-primary-dark: #176a87;
  --color-primary-darker: #0c3a4a;
  --color-secondary: #37aa67;
  --color-accent: #f59e0b;
  --color-info: #208baf;

  /* Texte */
  --color-text: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6b7280;
  --color-text-light: #9ca3af;

  /* Fonds & bordures */
  --color-background: #ffffff;
  --color-background-alt: #f5f6f8;
  --color-background-tint: #eef7fa;
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  --color-border-tint: #e1eef2;
  --color-icon-border: #d3eaf2;

  /* Typographie */
  --font-family-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-base: 16px;

  /* Rayons */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* Layout */
  --container-width: 1280px;
  --container-padding: 24px;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 4px 16px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12);

  /* Transitions */
  --transition-base: 0.2s ease;
}

/* Breakpoints de référence (utilisés en media queries, non exploitables en CSS custom property) :
   1024px (desktop standard) / 900px (tablette) / 768px / 600px / 540px (mobile) */

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  /* Garde-fou : aucun élément ne doit provoquer de défilement horizontal
     de la page (audit mobile 2026-09-23). `clip` plutôt que `hidden` : ne
     crée pas de conteneur de défilement, donc ne casse pas position:sticky.
     Les vrais débordements restent corrigés à la source (grilles en
     minmax(0, 1fr), titres longs coupés, tableaux empilés sur mobile). */
  overflow-x: clip;
}

body {
  overflow-x: clip;
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
}

p {
  margin: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   Accessibilité — réduction des animations
   ========================================================================== */

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

/* ==========================================================================
   Responsive foundation
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
  }
}

@media (max-width: 540px) {
  :root {
    --container-padding: 16px;
  }
}

/* stbp-components */
/* ==========================================================================
   Composants réutilisables
   ========================================================================== */

/* --- Section title (eyebrow + titre) --- */

.section-title--center {
	text-align: center;
}

.section-title__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.section-title--center .section-title__eyebrow {
	display: inline-flex;
}

.section-title__eyebrow-line {
	display: block;
	width: 28px;
	height: 2px;
	background-color: var(--color-secondary);
}

.section-title__eyebrow-text {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--color-secondary);
	text-transform: uppercase;
}

.section-title__heading {
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.section-title__heading--xl {
	font-size: clamp(22px, 3vw, 40px);
}

.section-title__heading--lg {
	font-size: clamp(24px, 3vw, 38px);
}

.section-title__heading--md {
	font-size: clamp(20px, 2.4vw, 32px);
}

.section-title__heading--sm {
	font-size: clamp(18px, 2.2vw, 28px);
}

.section-title__heading--uppercase {
	text-transform: uppercase;
}

.section-title__heading--base-text {
	color: var(--color-text);
}

.section-title__heading--base-primary {
	color: var(--color-primary-light);
}

.section-title__heading--base-white {
	color: var(--color-background);
}

.section-title__accent--primary {
	color: var(--color-primary-light);
}

.section-title__accent--muted {
	color: var(--color-text-light);
}

.section-title__accent--light-blue {
	color: #8fcde2;
}

/* --- Article individuel générique (actualite/formation/evenement/partenaire) --- */

.single-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-primary-light);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 24px;
	transition: color var(--transition-base);
}

.single-back:hover,
.single-back:focus-visible {
	color: var(--color-secondary);
}

.single-title {
	font-size: clamp(26px, 3.5vw, 42px);
	font-weight: 900;
	color: var(--color-text);
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin-bottom: 28px;
}

.single-content {
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text-secondary);
	/* Un mot ou une adresse très longs passent à la ligne au lieu de déborder. */
	overflow-wrap: anywhere;
	min-width: 0;
}

.single-content p {
	margin-bottom: 20px;
}

.single-content h2,
.single-content h3,
.single-content h4 {
	color: var(--color-text);
	font-weight: 800;
	margin: 32px 0 14px;
}

.single-content ul,
.single-content ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

/* base.css remet list-style à none sur tous les ul/ol (reset) : on rétablit
   les puces dans les contenus éditoriaux, sinon une liste saisie dans
   l'éditeur ne se distingue plus d'une suite de paragraphes. */
.single-content ul {
	list-style: disc;
}

.single-content ol {
	list-style: decimal;
}

.single-content li::marker {
	color: var(--color-primary-light);
}

.single-content li {
	margin-bottom: 6px;
}

.single-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
	font-size: 14px;
}

.single-content th,
.single-content td {
	border: 1px solid var(--color-border);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}

.single-content th {
	background-color: var(--color-primary);
	color: #fff;
	font-weight: 700;
	border-color: var(--color-primary);
}

.single-content tbody tr:nth-child(even) {
	background-color: var(--color-background-alt);
}

.single-content img {
	border-radius: var(--radius-md);
	margin: 12px 0;
}

/* --- Contenu réservé aux adhérents (cf. §4 réponses client) --- */

.membership-gate {
	text-align: center;
	padding: 40px 24px;
	background-color: var(--color-background-alt);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
}

.membership-gate svg {
	margin: 0 auto 12px;
	color: var(--color-secondary);
}

.membership-gate__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 6px;
}

.membership-gate__text {
	font-size: 14px;
	color: var(--color-text-muted);
	max-width: 420px;
	margin: 0 auto 20px;
}

.membership-gate__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--color-primary-light);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 11px 24px;
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-base);
}

.membership-gate__cta:hover,
.membership-gate__cta:focus-visible {
	background-color: var(--color-secondary);
}

.membership-gate__login {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--color-text-muted);
}

.membership-gate__login a {
	font-weight: 700;
	color: var(--color-primary-light);
}

/* --- Bouton CTA de section (home : missions/actualités/partenaires...) ---
   Un seul style partagé plutôt que trois boutons différents par section
   (demande utilisateur 2026-09-22 : "homogénéiser tous ces boutons") — bleu
   plein, léger radius, jamais de bordure, hover vert. */
.btn-section-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: var(--color-primary-light);
	color: var(--color-background);
	border: none;
	padding: 13px 32px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 3px;
	transition: background-color var(--transition-base);
}

.btn-section-cta:hover,
.btn-section-cta:focus-visible {
	background-color: var(--color-secondary);
	color: var(--color-background);
}

/* --- Boutons génériques (pages Contact, Adhésion...) ---
   Alignés sur .btn-section-cta (demande utilisateur 2026-09-23 : "homogénéiser
   les boutons sur toutes les pages comme la home") — bleu plein, hover vert.
   Même règle appliquée à tous les boutons pleins du thème et de WooCommerce. */

.btn-primary,
.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	font-size: 14px;
	padding: 13px 28px;
	border-radius: var(--radius-sm);
	transition: all var(--transition-base);
}

.btn-primary {
	background-color: var(--color-primary-light);
	color: #fff;
	border: 2px solid var(--color-primary-light);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	color: #fff;
}

.btn-outline {
	background-color: transparent;
	color: var(--color-primary-light);
	border: 2px solid var(--color-primary-light);
}

.btn-outline:hover,
.btn-outline:focus-visible {
	border-color: var(--color-secondary);
	color: #fff;
	background-color: var(--color-secondary);
}

/* --- Zone de dépôt de fichier (drag & drop) ---
   Générique et partagée : utilisée sur la page "Devenir adhérent" (attestation
   d'exercice) et sur la page de commande (attestation d'adhésion au syndicat,
   cf. woocommerce/checkout/form-checkout.php) — même composant partout
   plutôt que dupliqué, demande utilisateur 2026-09-24 ("utilise le même
   champ d'upload que dans l'adhésion"). JS partagé : assets/js/file-dropzone.js. */

.file-dropzone {
	position: relative;
	border: 1.5px dashed var(--color-border);
	border-radius: 10px;
	padding: 24px 16px;
	text-align: center;
	cursor: pointer;
	background-color: var(--color-background-alt);
	transition: border-color var(--transition-base), background-color var(--transition-base);
}

.file-dropzone:hover,
.file-dropzone.is-dragover {
	border-color: var(--color-secondary);
	background-color: rgba(55, 170, 103, 0.06);
}

.file-dropzone.is-filled {
	border-style: solid;
	border-color: var(--color-secondary);
}

.file-dropzone.is-invalid {
	border-color: #dc2626;
}

.file-dropzone__input {
	display: none;
}

.file-dropzone__icon {
	margin: 0 auto 8px;
	color: var(--color-text-light);
}

.file-dropzone.is-dragover .file-dropzone__icon,
.file-dropzone.is-filled .file-dropzone__icon {
	color: var(--color-secondary);
}

.file-dropzone__text {
	font-size: 14px;
	color: var(--color-text-muted);
	margin-bottom: 2px;
}

.file-dropzone__cta {
	color: var(--color-primary-light);
	font-weight: 700;
}

.file-dropzone__hint {
	font-size: 12px;
	color: var(--color-text-light);
}

.file-dropzone__filename {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-secondary);
}

/* --- Lightbox générique (image en grand, fond assombri) ---
   Overlay unique partagé par tout le site (cf. footer.php + main.js
   initLightbox), demande utilisateur 2026-09-21. */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background-color: rgba(12, 58, 74, 0.88);
}

.lightbox[hidden] {
	display: none;
}

.lightbox__img {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--radius-md);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}

.lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--transition-base);
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
	background-color: rgba(255, 255, 255, 0.22);
}

body.lightbox-open {
	overflow: hidden;
}

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

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* --- Badge "à valider" (chiffres non confirmés par le client) : visible
   uniquement des administrateurs connectés, cf. stbp_to_verify_badge(). --- */
.stbp-to-verify {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: var(--radius-pill);
	background-color: #fde68a;
	color: #7c2d12;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.6;
	text-transform: uppercase;
	vertical-align: middle;
	cursor: help;
}

/* --- Indicateur d'étapes du parcours d'inscription (tarifs → inscription
   → confirmation), cf. template-parts/components/registration-stepper.php --- */
.reg-stepper {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 20px 0 32px;
	padding: 0;
	counter-reset: none;
}

.reg-stepper__step {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text-light);
}

/* Trait de liaison dessiné à la FIN de chaque étape (sauf la dernière) :
   il remplit tout l'espace restant jusqu'à l'étape suivante. Dessiné au
   début de l'étape suivante, il laissait un vide après la 1re étape
   (chaque étape occupe 1/3 de la largeur). La dernière étape ne prend que
   la place de son contenu. */
.reg-stepper__step:not(:last-child)::after {
	content: '';
	flex: 1 1 auto;
	height: 2px;
	min-width: 16px;
	margin: 0 14px;
	background-color: var(--color-border);
}

.reg-stepper__step:last-child {
	flex: 0 0 auto;
}

.reg-stepper__step--done::after {
	background-color: var(--color-primary-light);
}

.reg-stepper__step a,
.reg-stepper__step > .reg-stepper__num {
	flex-shrink: 0;
}

.reg-stepper__step a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
}

.reg-stepper__step:not(:has(a)) > .reg-stepper__num {
	margin-right: 10px;
}

.reg-stepper__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-circle);
	border: 2px solid var(--color-border);
	background-color: var(--color-background);
	font-size: 14px;
	font-weight: 800;
}

.reg-stepper__label {
	line-height: 1.25;
}

.reg-stepper__step--current {
	color: var(--color-primary-light);
}

.reg-stepper__step--current .reg-stepper__num {
	border-color: var(--color-primary-light);
	background-color: var(--color-primary-light);
	color: #fff;
}

.reg-stepper__step--done {
	color: var(--color-secondary);
}

.reg-stepper__step--done .reg-stepper__num {
	border-color: var(--color-secondary);
	background-color: var(--color-secondary);
	color: #fff;
}

@media (max-width: 600px) {
	.reg-stepper__label {
		display: none;
	}

	.reg-stepper__step--current .reg-stepper__label {
		display: inline;
	}
}

/* Titres pouvant contenir de longs noms (partenaires, textes officiels) :
   un mot plus large que l'écran est coupé plutôt que de déborder. */
.single-title,
.page-header__title,
.partner-card__name,
.regl-card__title {
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Documents PDF (Mon compte → Mes documents, Mon adhésion) — cf.
   template-parts/account/documents.php, stbp-core documents.php
   ========================================================================== */
.stbp-docs__intro {
  color: var(--color-text-secondary);
  margin: 0 0 20px;
}

.stbp-docs__empty {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: #eef6f9;
  color: var(--color-text-secondary);
}

.stbp-docs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.stbp-doc {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid #dbe7ec;
  border-radius: var(--radius-md);
  background: #fff;
}

.stbp-doc__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eef6f9;
  color: var(--color-primary);
}

.stbp-doc--badge .stbp-doc__icon {
  background: #eaf6ef;
  color: var(--color-secondary);
}

.stbp-doc__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stbp-doc__title {
  font-weight: 700;
  color: var(--color-primary-darker);
}

.stbp-doc__meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.stbp-doc__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.stbp-doc__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.stbp-doc__btn:hover,
.stbp-doc__btn:focus-visible {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.stbp-doc__btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.stbp-doc__btn--primary:hover,
.stbp-doc__btn--primary:focus-visible {
  background: var(--color-secondary);
  color: #fff;
}

@media (max-width: 600px) {
  .stbp-doc {
    flex-wrap: wrap;
  }

  .stbp-doc__actions {
    width: 100%;
  }

  .stbp-doc__btn {
    flex: 1;
    justify-content: center;
  }
}

/* Page de vérification du QR code (?stbp_verif=…) */
.stbp-verif {
  padding-block: 56px 72px;
  display: flex;
  justify-content: center;
}

.stbp-verif__card {
  width: 100%;
  max-width: 520px;
  padding: 36px 32px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(12, 58, 74, 0.1);
  border-top: 6px solid var(--color-secondary);
  text-align: center;
}

.stbp-verif__card--invalid,
.stbp-verif__card--unknown {
  border-top-color: #dc2626;
}

.stbp-verif__status {
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eaf6ef;
  color: var(--color-secondary);
}

.stbp-verif__card--invalid .stbp-verif__status,
.stbp-verif__card--unknown .stbp-verif__status {
  background: #fdecec;
  color: #dc2626;
}

.stbp-verif__title {
  margin: 0 0 8px;
  font-size: 1.6rem;
  color: var(--color-primary-darker);
}

.stbp-verif__text {
  margin: 0 0 24px;
  color: var(--color-text-secondary);
}

.stbp-verif__details {
  margin: 0;
  text-align: left;
  border-radius: 12px;
  background: #eef6f9;
  padding: 6px 18px;
}

.stbp-verif__details div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #d5e6ee;
}

.stbp-verif__details div:last-child {
  border-bottom: 0;
}

.stbp-verif__details dt {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.stbp-verif__details dd {
  margin: 0;
  font-weight: 700;
  color: var(--color-primary-darker);
  text-align: right;
  overflow-wrap: anywhere;
}

.stbp-verif__staff {
  margin-top: 24px;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.stbp-verif__staff p {
  margin: 0;
}

.stbp-verif__notice {
  padding: 8px 14px;
  border-radius: 8px;
  background: #eaf6ef;
  color: #1f7a47;
  font-weight: 600;
}

.stbp-verif__cash {
  margin: 0 0 16px;
  padding: 18px 20px;
  border: 2px solid #f0b429;
  border-radius: 12px;
  background: #fff8e6;
  text-align: center;
}

.stbp-verif__cash-label {
  margin: 0;
  font-weight: 700;
  color: #8a5a00;
}

.stbp-verif__cash-amount {
  margin: 4px 0 14px;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-text, #0c3a4a);
}

.stbp-verif__cash-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.stbp-verif__cash-hint {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.stbp-verif__checkins {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.stbp-membership__receipts + .stbp-membership__hint {
  margin-top: 20px;
}

/* Mon adhésion → Mon attestation d'exercice (remplacement par le titulaire) */
.stbp-exercice__replace {
  margin-top: 12px;
}

.stbp-exercice__replace summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
}

.stbp-exercice__replace summary::-webkit-details-marker {
  display: none;
}

.stbp-exercice__replace summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s;
}

.stbp-exercice__replace[open] summary::before {
  transform: rotate(45deg);
}

.stbp-exercice__replace summary:hover {
  color: var(--color-secondary);
}

.stbp-exercice__hint {
  margin: 10px 0 12px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.stbp-exercice__form {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.stbp-exercice__form .file-dropzone {
  width: 100%;
}

/* Pages de texte légales (page.php : mentions légales, CGV, confidentialité) */
.page-content--text {
  max-width: 880px;
  padding-block: clamp(40px, 6vw, 72px);
}

.page-content--text .single-content h2 {
  margin-top: 2em;
  font-size: 1.35rem;
  color: var(--color-primary-darker);
}

.page-content--text .single-content h2:first-child {
  margin-top: 0;
}

.page-content--text .single-content a {
  color: var(--color-primary);
  overflow-wrap: anywhere;
}

/* --- Interrupteur (case à cocher en bascule oui / non) --- */
.stbp-switch {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	font-weight: 400;
}

.stbp-switch__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.stbp-switch__track {
	position: relative;
	flex-shrink: 0;
	width: 44px;
	height: 24px;
	margin-top: 1px;
	border-radius: 999px;
	background-color: #cbd5e1;
	transition: background-color 0.2s ease;
}

.stbp-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease;
}

.stbp-switch__input:checked + .stbp-switch__track {
	background-color: var(--color-secondary, #37aa67);
}

.stbp-switch__input:checked + .stbp-switch__track::after {
	transform: translateX(20px);
}

.stbp-switch__input:focus-visible + .stbp-switch__track {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.stbp-switch__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 14px;
	line-height: 1.4;
}

.stbp-switch__text strong {
	font-weight: 600;
}

.stbp-switch__text small {
	font-size: 12.5px;
	color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   Pagination des archives (stbp_pagination(), inc/theme-functions.php)
   Précédent à gauche · numéros au centre · Suivant à droite.
   -------------------------------------------------------------------------- */

.stbp-pagination {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	/* Flèches alignées sur la rangée de numéros (« Page x sur y » en dessous). */
	align-items: start;
	gap: 16px;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--color-border);
}

.stbp-pagination__side--prev {
	justify-self: start;
}

.stbp-pagination__side--next {
	justify-self: end;
}

.stbp-pagination__arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1.5px solid var(--color-border);
	background-color: var(--color-background);
	color: var(--color-text-secondary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--transition-base), color var(--transition-base), background-color var(--transition-base);
}

a.stbp-pagination__arrow:hover,
a.stbp-pagination__arrow:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.stbp-pagination__arrow.is-disabled {
	opacity: 0.4;
	cursor: default;
}

.stbp-pagination__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.stbp-pagination__pages {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.stbp-pagination__pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.stbp-pagination__pages a.page-numbers:hover,
.stbp-pagination__pages a.page-numbers:focus-visible {
	background-color: var(--color-border-tint);
	color: var(--color-primary-dark);
}

.stbp-pagination__pages .page-numbers.current {
	background-color: var(--color-primary);
	color: #fff;
}

.stbp-pagination__pages .page-numbers.dots {
	min-width: 20px;
	padding: 0;
	color: var(--color-text-light);
}

.stbp-pagination__status {
	margin: 0;
	font-size: 12.5px;
	color: var(--color-text-muted);
}

@media (max-width: 560px) {
	.stbp-pagination {
		gap: 8px;
	}

	.stbp-pagination__arrow {
		min-height: 34px;
		padding: 0 10px;
	}

	/* Flèches seules sur petit écran ; libellé conservé pour les lecteurs d'écran. */
	.stbp-pagination__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.stbp-pagination__pages .page-numbers {
		min-width: 34px;
		height: 34px;
		padding: 0 6px;
	}
}

/* Validation de présence : choix du lieu du scan (2026-10-06). */
.stbp-verif__form {
  width: 100%;
  display: grid;
  gap: 16px;
}

.stbp-verif__locations {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 10px;
  text-align: left;
}

.stbp-verif__locations legend {
  margin-bottom: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.stbp-verif__locations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stbp-verif__location {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.stbp-verif__location input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-primary);
}

.stbp-verif__location-name {
  font-weight: 700;
  color: var(--color-primary-darker);
  overflow-wrap: anywhere;
}

.stbp-verif__location:hover,
.stbp-verif__location:has(input:focus-visible) {
  border-color: var(--color-primary-soft);
}

.stbp-verif__location:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-background-tint);
}

.stbp-verif__location--main {
  min-height: 72px;
  padding: 16px 18px;
}

.stbp-verif__location--main .stbp-verif__location-name {
  font-size: 1.25rem;
}

.stbp-verif__location--main input {
  width: 24px;
  height: 24px;
}

.stbp-verif__location.is-done {
  cursor: not-allowed;
  opacity: 0.6;
  background: var(--color-background-alt);
}

.stbp-verif__location-tag {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eaf6ef;
  color: #1f7a47;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.stbp-verif__submit {
  width: 100%;
  justify-content: center;
}

.stbp-verif__notice--error {
  background: #fdecec;
  color: #b42318;
}

@media (max-width: 420px) {
  .stbp-verif__locations-grid {
    grid-template-columns: 1fr;
  }
}

/* Page de vérification — compte exposant (scan des stands, 2026-10-06) */
.stbp-verif__stand-name {
	margin: 0 0 10px;
	font-weight: 800;
	color: var(--color-primary-darker);
}

/* Scan des badges : période de pointage et ordre (entrée d'abord) — 2026-10-10 */
.stbp-verif__notice--info {
  background: var(--color-background-alt);
  color: var(--color-primary-darker);
}
.stbp-verif__location.is-locked {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--color-background-alt);
}
.stbp-verif__location-tag--muted {
  background: var(--color-border-light);
  color: var(--color-text-muted);
}

/* Déjeuner du jour sur la page de scan (restaurant, 2026-10-19) */
.stbp-verif__lunch { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; border: 2px solid; text-align: left; }
.stbp-verif__lunch-label { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
.stbp-verif__lunch-state { font-size: 1.35rem; font-weight: 800; line-height: 1.25; }
.stbp-verif__lunch small { font-size: 0.85rem; opacity: 0.9; }
.stbp-verif__lunch--ok { background: #ecfdf3; border-color: #37aa67; color: #14532d; }
.stbp-verif__lunch--no { background: #fef2f2; border-color: #dc2626; color: #7f1d1d; }
.stbp-verif__lunch--served { background: #fff7ed; border-color: #ea8a1a; color: #7c2d12; }
.stbp-verif__notice--warning { background: #fff7ed; border: 1px solid #ea8a1a; color: #7c2d12; }
.stbp-verif__notice--warning p { margin: 0 0 10px; font-weight: 700; }
.stbp-verif__notice--warning form { margin: 0; }
.stbp-verif__notice--warning button { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; background: #ea8a1a; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.stbp-verif__notice--warning button:hover,
.stbp-verif__notice--warning button:focus-visible { background: #c2410c; }

/* Vidéo intégrée dans un communiqué (iframe Facebook, YouTube…) — 2026-10-21 */
.stbp-video{margin:32px 0}
.stbp-video__frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg,16px);overflow:hidden;background:#0c3a4a}
.stbp-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.stbp-video figcaption{margin-top:10px;font-size:14px;color:var(--color-text-muted,#5b6b75)}
.stbp-video figcaption a{font-weight:600}

/* stbp-navbar */
/* ==========================================================================
   Navbar
   ========================================================================== */

/* En-tête "boxé" (largeur du container, comme le reste du site) et non en
   pleine largeur d'écran — contrairement au hero juste en dessous, qui lui
   est en plein écran (cf. hero.css). Référence LabtechCO, demande
   utilisateur 2026-09-20.
   Révisé le 2026-09-22 : le header n'est plus sticky en desktop — il défile
   normalement avec la page (plus d'effet "disparaît brutalement" au
   basculement). Un second bandeau indépendant et toujours position:fixed
   (.navbar-sticky, cf. plus bas) prend le relais une fois le header
   entièrement sorti de l'écran. En mobile, le header reste sticky comme
   avant : pas de bandeau condensé séparé à cette largeur, c'est la même
   barre compacte (logo + burger) qui doit rester accessible en permanence. */
.navbar {
	position: relative;
	z-index: 200;
	max-width: var(--container-width);
	margin-inline: auto;
}

@media (max-width: 900px) {
	.navbar {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}

	/* L'admin bar de WordPress est aussi en position fixed en haut de l'écran :
	   sans ce décalage, la navbar sticky se colle sous elle et se retrouve à
	   moitié masquée au scroll. Le seuil auquel l'admin bar passe de 32px à
	   46px est fixé par WP à 782px (wp-includes/css/admin-bar.css), PAS par
	   notre propre breakpoint de 900px : entre 783px et 900px l'admin bar
	   fait encore 32px, donc réutiliser 46px ici créait un espace de 14px
	   au-dessus de la navbar sticky (bug rapporté 2026-09-21). */
	body.admin-bar .navbar {
		top: 32px;
	}
}

@media (max-width: 782px) {
	body.admin-bar .navbar {
		top: 46px;
	}
}

/* --- Barre de contact (haut, blanche) --- */

.navbar__topbar {
	background-color: var(--color-background);
	border-bottom: 1px solid var(--color-border-tint);
}

.navbar__topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.navbar__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.navbar__logo {
	height: 76.8px; /* 64px + 20%, desktop uniquement (topbar masquée <=900px) */
	width: auto;
}

.navbar__brand-text {
	line-height: 1.25;
}

.navbar__brand-line1,
.navbar__brand-line2 {
	display: block;
	color: var(--color-primary-light);
}

.navbar__brand-line1 {
	font-size: 18px;
	font-weight: 800;
}

.navbar__brand-line2 {
	font-size: 13px;
	font-weight: 500;
}

.navbar__contacts {
	display: flex;
	gap: clamp(16px, 2.2vw, 32px);
	align-items: center;
	flex-wrap: nowrap;
}

/* Adresse longue (56, rue Ibn Charaf, Belvédère, 1002 Tunis, Tunisie) : elle
   passe sur 2 lignes dans sa colonne plutôt que de renvoyer tout le bloc
   sous les autres coordonnées. */
.navbar__contact-item:last-child .navbar__contact-value {
	max-width: 230px;
}

.navbar__contact-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.navbar__contact-icon {
	width: 38px;
	height: 38px;
	border-radius: var(--radius-circle);
	border: 1.5px solid var(--color-icon-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--color-primary-light);
}

.navbar__contact-text {
	display: block;
}

.navbar__contact-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-text);
}

.navbar__contact-value {
	display: block;
	font-size: 12px;
	color: var(--color-text-muted);
}

/* --- Barre bleue de navigation --- */

.navbar__main {
	background-color: var(--color-primary-light);
	position: relative;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* --- Bandeau condensé (desktop uniquement) : élément séparé, toujours
   position:fixed, glisse depuis le haut une fois le header d'origine
   entièrement sorti de l'écran (cf. main.js initStickyNavbar) — jamais un
   toggle de position sur le header lui-même, pour ne jamais provoquer de
   saut de mise en page (demande utilisateur 2026-09-22). Plein écran (le
   fond blanc va jusqu'aux bords), contenu centré via .container. Durée de
   la descente : 0.36s — 20% plus lente que les 0.3s précédents. */
.navbar-sticky {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 300;
	background-color: var(--color-background);
	box-shadow: 0 4px 24px rgba(12, 58, 74, 0.14);
	transform: translateY(-100%);
	transition: transform 0.36s ease;
}

.navbar-sticky.is-visible {
	transform: translateY(0);
}

body.admin-bar .navbar-sticky {
	top: 32px;
}

.navbar-sticky__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 104px;
}

.navbar-sticky__brand {
	display: flex;
	align-items: center;
	margin-right: 20px;
}

.navbar-sticky__logo {
	height: 80px;
	width: auto;
}

.navbar-sticky__nav {
	display: flex;
	align-items: center;
	margin-left: 16px;
}

.navbar-sticky__nav .navbar__dropdown {
	position: relative;
}

.navbar-sticky__nav .navbar__link,
.navbar-sticky__nav .navbar__dropdown-toggle {
	height: 104px;
	padding: 0 11px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	font-family: var(--font-family-base);
	cursor: pointer;
	transition: color var(--transition-base), border-color var(--transition-base);
}

.navbar-sticky__nav .navbar__link:hover,
.navbar-sticky__nav .navbar__link:focus-visible,
.navbar-sticky__nav .navbar__dropdown:hover .navbar__dropdown-toggle,
.navbar-sticky__nav .navbar__dropdown:focus-within .navbar__dropdown-toggle {
	color: var(--color-primary-light);
	border-bottom-color: var(--color-primary-light);
}

.navbar-sticky__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.navbar-sticky__login-link {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--color-text);
	white-space: nowrap;
	transition: color var(--transition-base);
}

.navbar-sticky__login-link:hover,
.navbar-sticky__login-link:focus-visible {
	color: var(--color-primary-light);
}

.navbar-sticky__cta {
	background-color: var(--color-primary-light);
	color: var(--color-background);
	font-size: 11px;
	font-weight: 800;
	padding: 8px 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color var(--transition-base);
}

.navbar-sticky__cta:hover,
.navbar-sticky__cta:focus-visible {
	background-color: var(--color-secondary);
}

@media (min-width: 901px) {
	.navbar-sticky {
		display: block;
	}
}

/* Hauteur +20% (52px → 62.4px), demande utilisateur 2026-09-21 — répercuté
   sur .navbar__link/.navbar__dropdown-toggle (même hauteur, plus bas) et sur
   le chevauchement page-header/hero (désormais -31.2px = moitié de cette
   nouvelle hauteur, cf. page-header.css et hero.css). */
.navbar__main-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 62.4px;
	position: relative;
}

.navbar__mobile-brand {
	display: none;
	align-items: center;
	gap: 10px;
}

.navbar__mobile-logo {
	height: 36px;
	width: auto;
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	padding: 2px 4px;
	flex-shrink: 0;
}

.navbar__brand-line1--mobile {
	font-size: 13px;
	color: var(--color-background);
}

.navbar__brand-line2--mobile {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.8);
}

.navbar__nav {
	display: flex;
	align-items: center;
	margin-left: 24px;
}

.navbar__dropdown {
	position: relative;
}

.navbar__dropdown-toggle {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-background);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0 16px;
	height: 62.4px;
	display: flex;
	align-items: center;
	gap: 6px;
	border-bottom: 3px solid transparent;
	font-family: var(--font-family-base);
	transition: border-color var(--transition-base);
}

.navbar__dropdown-toggle svg {
	transition: transform var(--transition-base);
}

.navbar__dropdown:hover .navbar__dropdown-toggle,
.navbar__dropdown:focus-within .navbar__dropdown-toggle {
	border-bottom-color: var(--color-background);
}

.navbar__dropdown:hover .navbar__dropdown-toggle svg,
.navbar__dropdown:focus-within .navbar__dropdown-toggle svg {
	transform: rotate(180deg);
}

.navbar__dropdown-panel {
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--color-background);
	min-width: 200px;
	box-shadow: 0 8px 32px rgba(32, 139, 175, 0.18);
	z-index: 999;
	border-top: 3px solid var(--color-primary-light);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.navbar__dropdown:hover .navbar__dropdown-panel,
.navbar__dropdown:focus-within .navbar__dropdown-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.navbar__dropdown-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
	font-size: 13px;
	font-weight: 600;
	color: #1f2937;
	border-bottom: 1px solid #eef7fa;
	transition: background-color 0.15s, color 0.15s, padding-left 0.15s;
}

.navbar__dropdown-link:last-child {
	border-bottom: none;
}

.navbar__dropdown-link:hover,
.navbar__dropdown-link:focus-visible {
	background-color: var(--color-background-tint);
	color: var(--color-primary-light);
	padding-left: 26px;
}

.navbar__link {
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0 14px;
	height: 62.4px;
	display: flex;
	align-items: center;
	border-bottom: 3px solid transparent;
	transition: color var(--transition-base), border-color var(--transition-base);
	white-space: nowrap;
}

.navbar__link:hover,
.navbar__link:focus-visible {
	color: var(--color-background);
	border-bottom-color: var(--color-background);
}

.navbar__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.navbar__login-link {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
	transition: color var(--transition-base);
}

.navbar__login-link:hover,
.navbar__login-link:focus-visible {
	color: var(--color-background);
}

.navbar__cta {
	background-color: var(--color-background);
	color: var(--color-primary-light);
	font-size: 12px;
	font-weight: 800;
	padding: 9px 20px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color var(--transition-base);
}

.navbar__cta:hover,
.navbar__cta:focus-visible {
	background-color: var(--color-secondary);
	color: var(--color-background);
}

.navbar__toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-background);
	padding: 6px;
}

.navbar__toggle-icon-close {
	display: none;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon-open {
	display: none;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon-close {
	display: block;
}

/* --- Menu mobile --- */

.navbar__mobile-panel {
	display: none;
	background-color: var(--color-primary-darker);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar__mobile-panel.is-open {
	display: block;
}

.navbar__mobile-accordion-toggle {
	width: 100%;
	background: none;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	padding: 14px var(--container-padding);
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--color-background);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	font-family: var(--font-family-base);
}

.navbar__mobile-accordion-toggle svg {
	transition: transform var(--transition-base);
}

.navbar__mobile-accordion-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.navbar__mobile-accordion-panel {
	display: none;
	background-color: rgba(0, 0, 0, 0.2);
}

.navbar__mobile-accordion-panel.is-open {
	display: block;
}

.navbar__mobile-sublink {
	display: block;
	padding: 12px clamp(32px, 6vw, 60px);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	font-weight: 600;
}

.navbar__mobile-link {
	display: block;
	padding: 14px var(--container-padding);
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.navbar__mobile-cta-wrap {
	padding: 16px var(--container-padding);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.navbar__mobile-login-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.navbar__mobile-cta {
	display: block;
	background-color: var(--color-primary-light);
	color: var(--color-background);
	text-align: center;
	padding: 12px 20px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Responsive : bascule desktop / mobile à 900px --- */

@media (max-width: 900px) {
	.navbar__topbar,
	.navbar__nav,
	.navbar__cta {
		display: none !important;
	}

	.navbar__mobile-brand {
		display: flex;
	}

	.navbar__toggle {
		display: flex;
	}
}

@media (min-width: 901px) {
	.navbar__mobile-panel {
		display: none !important;
	}
}

/* Topbar desktop étroite (901–1150px) : logo horizontal un peu réduit pour
   laisser tenir les 3 coordonnées sur une seule ligne. */
@media (min-width: 901px) and (max-width: 1150px) {
	.navbar__logo,
	body.woocommerce .navbar__logo,
	body.woocommerce-page .navbar__logo {
		height: 60px;
	}
}

/* Compte connecté : « Bonjour » en petit, nom en dessous (stbp_account_link_label). */
.account-greeting {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}

.account-greeting__hello {
	font-size: 10px;
	font-weight: 500;
	opacity: 0.8;
}

.account-greeting__name {
	max-width: 180px;
	overflow: hidden;
	font-size: 13px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.navbar-sticky__login-link .account-greeting__name {
	font-size: 12px;
}

.navbar__mobile-login-link .account-greeting {
	align-items: center;
	text-align: center;
}

.navbar__mobile-login-link .account-greeting__name {
	max-width: 240px;
	font-size: 14px;
}

/* Petits écrans d'ordinateur (901–1240px) : le menu, « Se connecter » et
   « Devenir adhérent » dépassaient du cadre (ex. 1024px). On resserre les
   espacements ; sous 1060px, le lien de connexion ne garde que son icône
   (texte toujours lu par les lecteurs d'écran). 2026-11-02. */
@media (min-width: 901px) and (max-width: 1240px) {
	.navbar__nav {
		margin-left: 8px;
	}

	.navbar__nav .navbar__link,
	.navbar__nav .navbar__dropdown-toggle {
		padding: 0 9px;
		font-size: 12px;
		letter-spacing: 0.02em;
	}

	.navbar__actions {
		gap: 8px;
	}

	.navbar__cta {
		padding: 9px 14px;
		letter-spacing: 0.05em;
	}

	.navbar-sticky__brand {
		margin-right: 8px;
	}

	.navbar-sticky__logo {
		height: 64px;
	}

	.navbar-sticky__nav {
		margin-left: 4px;
	}

	.navbar-sticky__nav .navbar__link,
	.navbar-sticky__nav .navbar__dropdown-toggle {
		padding: 0 8px;
		letter-spacing: 0.02em;
	}

	.navbar-sticky__actions {
		gap: 8px;
	}

	.navbar-sticky__cta {
		padding: 8px 12px;
		letter-spacing: 0.04em;
	}

	.navbar__login-link .account-greeting__name,
	.navbar-sticky__login-link .account-greeting__name {
		max-width: 110px;
	}
}

@media (min-width: 901px) and (max-width: 1060px) {
	.navbar__nav .navbar__link,
	.navbar__nav .navbar__dropdown-toggle {
		padding: 0 7px;
	}

	.navbar__cta {
		padding: 8px 12px;
		font-size: 11px;
	}

	.navbar__login-link,
	.navbar-sticky__login-link {
		gap: 0;
		font-size: 0;
	}

	.navbar__login-link > svg,
	.navbar-sticky__login-link > svg {
		width: 18px;
		height: 18px;
	}

	.navbar__login-link .account-greeting,
	.navbar-sticky__login-link .account-greeting {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.navbar-sticky__logo {
		height: 52px;
	}

	.navbar-sticky__nav .navbar__link,
	.navbar-sticky__nav .navbar__dropdown-toggle {
		padding: 0 6px;
	}
}

/* Pages WooCommerce : woocommerce.css impose 80px au logo du bandeau fixe. */
@media (min-width: 901px) and (max-width: 1240px) {
	body.woocommerce .navbar-sticky__logo,
	body.woocommerce-page .navbar-sticky__logo {
		height: 64px;
	}
}

@media (min-width: 901px) and (max-width: 1060px) {
	body.woocommerce .navbar-sticky__logo,
	body.woocommerce-page .navbar-sticky__logo {
		height: 52px;
	}
}

/* stbp-footer */
/* ==========================================================================
   Footer principal
   ========================================================================== */

.footer__inner {
	/* Texte du footer : bleu de la teinte du fond, plus saturé et plus foncé (demande client 2026-10-09). */
	--footer-text: #1d6f8c;      /* contraste 5,2:1 sur #eef7fa */
	--footer-text-soft: #2a7591; /* contraste 4,8:1 */
	background-color: var(--color-background-tint);
	padding: clamp(40px, 6vw, 64px) 0 clamp(32px, 4vw, 48px);
}

/* --- Grille principale --- */

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr;
	gap: clamp(24px, 3vw, 48px);
	margin-bottom: clamp(24px, 3vw, 48px);
}

.footer__logo {
	height: 70px;
	width: auto;
	margin-bottom: 20px;
}

.footer__desc {
	font-size: 14px;
	color: var(--footer-text);
	line-height: 1.75;
	max-width: 280px;
	margin-bottom: 24px;
	font-weight: 500;
}

.footer__socials {
	display: flex;
	gap: 10px;
}

.footer__social-link {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	background-color: var(--color-icon-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	transition: all var(--transition-base);
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
	background-color: var(--color-secondary);
	color: var(--color-background);
}

/* --- Bandeau partenaire digital (toute la largeur, 2026-10-09) ---
   Version compacte : texte à gauche, logo à droite, sans bouton. */

.footer-partner {
	margin-bottom: clamp(24px, 3vw, 40px);
}

.footer-partner__card {
	/* Largeur ajustée au contenu (texte + logo), logo juste après le texte (2026-10-09). */
	display: inline-flex;
	max-width: 100%;
	align-items: center;
	gap: 16px 32px;
	padding: clamp(12px, 1.6vw, 16px) clamp(16px, 3vw, 32px);
	background-color: var(--color-background);
	border: 1px solid var(--color-icon-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

a.footer-partner__card:hover,
a.footer-partner__card:focus-visible {
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
	border-color: var(--color-primary);
}

.footer-partner__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.footer-partner__eyebrow {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #02d0d0; /* turquoise de « Bio » dans le logo BioExpert */
}

.footer-partner__title {
	font-size: clamp(13px, 1.4vw, 15px);
	font-weight: 800;
	line-height: 1.3;
	color: var(--color-primary-darker);
}

.footer-partner__logo {
	flex-shrink: 0;
}

.footer-partner__logo img {
	display: block;
	height: clamp(30px, 3.6vw, 44px);
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

@media (max-width: 540px) {
	.footer-partner__card {
		gap: 16px;
		padding: 12px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	a.footer-partner__card:hover,
	a.footer-partner__card:focus-visible {
		transform: none;
	}
}

.footer-col__title {
	font-size: 13px;
	font-weight: 800;
	color: var(--color-primary-dark);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--color-secondary);
	display: inline-block;
}

.footer-col__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-col__list a {
	color: var(--footer-text);
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: color var(--transition-base);
	font-weight: 500;
}

.footer-col__list a:hover,
.footer-col__list a:focus-visible {
	color: var(--color-primary-darker);
}

/* --- Newsletter --- */

.footer-newsletter__desc {
	font-size: 13px;
	color: var(--footer-text);
	line-height: 1.6;
	margin-bottom: 16px;
	font-weight: 500;
}

.footer-newsletter__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.footer-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-newsletter__form input[type="email"] {
	width: 100%;
	padding: 11px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border-tint);
	background-color: var(--color-background);
	color: var(--color-text);
	font-size: 13px;
}

.footer-newsletter__form input[type="email"]::placeholder {
	color: var(--color-text-light);
}

.footer-newsletter__form input[type="email"]:focus {
	outline: none;
	border-color: var(--color-primary-light);
}

.footer-newsletter__form button {
	padding: 10px 16px;
	border: none;
	border-radius: var(--radius-sm);
	background-color: var(--color-primary-light);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--transition-base);
}

.footer-newsletter__form button:hover,
.footer-newsletter__form button:focus-visible {
	background-color: var(--color-secondary);
}

.footer-newsletter__notice {
	font-size: 12px;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	margin-bottom: 12px;
}

.footer-newsletter__notice--success {
	background-color: rgba(55, 170, 103, 0.12);
	color: #1f7a45;
}

.footer-newsletter__notice--error {
	background-color: rgba(220, 90, 90, 0.12);
	color: #b13a3a;
}

/* --- Ligne de contact --- */

.footer-contact {
	border-top: 1px solid var(--color-border-tint);
	padding-top: 36px;
	margin-bottom: 32px;
	display: grid;
	/* Colonnes à la largeur du contenu : même écart entre adresse, téléphone et e-mail (2026-10-09). */
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	gap: 32px 56px;
}

.footer-contact__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.footer-contact__icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	background-color: var(--color-icon-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--color-primary);
}

.footer-contact__label {
	font-size: 11px;
	font-weight: 700;
	color: var(--footer-text-soft);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 4px;
}

.footer-contact__value {
	font-size: 14px;
	color: var(--footer-text);
	font-weight: 500;
}

/* --- Bas de page --- */

.footer-bottom {
	border-top: 1px solid var(--color-border-tint);
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.footer-bottom__copyright {
	font-size: 13px;
	color: var(--footer-text-soft);
	font-weight: 500;
}

.footer-bottom__legal {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.footer-bottom__legal a {
	font-size: 13px;
	color: var(--footer-text-soft);
	transition: color var(--transition-base);
	font-weight: 500;
}

.footer-bottom__legal a:hover,
.footer-bottom__legal a:focus-visible {
	color: var(--color-primary-darker);
}

/* --- Responsive --- */

@media (max-width: 900px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-contact {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 540px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

/* stbp-page-header */
/* ==========================================================================
   PageHeader — bannière plein écran, titre + fil d'Ariane
   ========================================================================== */

/* Chevauche le bas de la navbar de moitié de la hauteur de sa barre bleue
   (62.4px / 2 = 31.2px) : la navbar (z-index 200, cf. navbar.css) passe par
   dessus, donc seule la moitié basse de ce chevauchement reste visible —
   comme sur la référence LabtechCO (margin-top négatif + z-index inférieur
   à celui du header), demande utilisateur 2026-09-22. */
.page-header {
	position: relative;
	z-index: 1;
	overflow: hidden;
	min-height: clamp(120px, 12vw, 170px);
	margin-top: -31.2px;
	display: flex;
	align-items: center;
}

.page-header__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

/* Teinte bleue sur la photo (dominante bleue demandée), superposée en
   ::after plutôt que mélangée à l'image dynamique (background-image est
   posé en style inline, cf. page-header.php — un ::after reste indépendant
   de cette valeur inline). */
.page-header__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-primary-soft);
	/* Opacité réduite de ~25% (0.84 → 0.63) : la bannière était trop sombre,
	   trop proche du bleu de la navbar juste au-dessus — ce décalage de
	   luminosité les distingue mieux (demande utilisateur 2026-09-21). */
	opacity: 0.85;
}

/* Deux colonnes (demande utilisateur 2026-09-23) : titre à gauche, fil
   d'Ariane à droite dans sa propre colonne — un titre long passe à la ligne
   dans sa colonne au lieu de venir buter contre le fil d'Ariane. */
.page-header__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: clamp(24px, 4vw, 64px);
	row-gap: 12px;
	width: 100%;
	/* 31.2px = part de la bannière masquée sous la navbar (cf. margin-top
	   négatif plus haut) : le texte démarre sous ce chevauchement, avec de
	   l'air, même quand un titre long passe sur 2-3 lignes. */
	padding-top: calc(31.2px + 20px);
	padding-bottom: 24px;
}

.page-header__title {
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 800;
	color: var(--color-background);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0;
}

.page-header__breadcrumb {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	max-width: min(36vw, 420px);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
	white-space: nowrap;
}

/* Page au titre long : la dernière miette est tronquée (…) plutôt que
   d'élargir la colonne du fil d'Ariane au détriment du titre. */
.page-header__breadcrumb-current {
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.page-header__breadcrumb a {
	color: rgba(255, 255, 255, 0.65);
	transition: color var(--transition-base);
}

.page-header__breadcrumb a:hover,
.page-header__breadcrumb a:focus-visible {
	color: var(--color-background);
}

.page-header__breadcrumb-current {
	color: var(--color-background);
	font-weight: 600;
}

@media (max-width: 600px) {
	.page-header__breadcrumb {
		justify-content: flex-start;
		max-width: 100%;
	}

	.page-header {
		align-items: flex-start;
	}

	/* Sur mobile, le chevauchement décoratif avec la navbar (cf. plus haut)
	   rognait carrément le haut du titre (accents/majuscules coupés) — pas
	   juste "trop proche". On garde l'image qui continue de passer derrière
	   la navbar, mais on pousse le texte sous ce chevauchement avec un vrai
	   espace de respiration (demande utilisateur 2026-09-23). */
	.page-header__inner {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		padding-top: 52px;
		padding-bottom: 20px;
	}
}

/* stbp-contact */
/* ==========================================================================
   Page Contact
   ========================================================================== */

.contact-page {
	background-color: var(--color-background);
	padding: clamp(56px, 7vw, 96px) 0;
}

.contact-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 48px;
	max-width: 1000px;
	margin: 0 auto;
}

.contact-page__notice {
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 20px;
}

.contact-page__notice--success {
	background-color: rgba(55, 170, 103, 0.12);
	color: var(--color-secondary);
}

.contact-page__notice--error {
	background-color: rgba(220, 38, 38, 0.1);
	color: #dc2626;
}

.contact-page__form {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.contact-page__form label {
	font-weight: 600;
	font-size: 14px;
	margin-top: 14px;
}

.contact-page__form input[type="text"],
.contact-page__form input[type="email"],
.contact-page__form input[type="tel"],
.contact-page__form textarea {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border-radius: 10px;
	border: 1.5px solid var(--color-border);
	padding: 12px 14px;
	font-family: var(--font-family-base);
	font-size: 15px;
}

.contact-page__form input:focus,
.contact-page__form textarea:focus {
	outline: none;
	border-color: var(--color-secondary);
}

.contact-page__form textarea {
	resize: vertical;
}

.contact-page__form button {
	margin-top: 24px;
	align-self: flex-start;
}

.contact-page__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-page__info {
	display: flex;
	flex-direction: column;
	gap: 24px;
	background-color: var(--color-background-alt);
	border-radius: var(--radius-md);
	padding: 32px;
	height: fit-content;
}

.contact-page__info-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.contact-page__info-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: rgba(55, 170, 103, 0.1);
	color: var(--color-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.contact-page__info-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-light);
	margin-bottom: 4px;
}

.contact-page__info-value {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
}

@media (max-width: 800px) {
	.contact-page__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}