/* 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-woocommerce */
/* ==========================================================================
   WooCommerce — habillage minimal aux couleurs/typo de la marque STBP.
   La structure/grille reste celle de WooCommerce (CSS natif du plugin) :
   ce fichier ne fait qu'ajuster boutons, couleurs, rayons, formulaires.
   ========================================================================== */

.woocommerce-container {
	padding-top: clamp(32px, 4vw, 48px);
	padding-bottom: clamp(48px, 6vw, 80px);
}

/* La page de commande (et la page de remerciement, même page WordPress —
   cf. woocommerce/checkout/thankyou.php) est une page WP normale
   ([woocommerce_checkout] en contenu, gabarit page.php) : elle n'utilise
   jamais le wrapper `.woocommerce-container` ci-dessus (réservé aux gabarits
   natifs WooCommerce — boutique, fiche produit...), juste le `.container`
   générique de page.php, sans marge verticale propre — d'où le contenu
   collé à la banderole et au footer (bug rapporté 2026-09-23). `is_checkout()`
   est vrai sur les deux écrans, d'où cette classe commune aux deux.
   `.page-content` (cf. page.php) cible précisément CETTE div de contenu —
   pas `.container` seul, qui matche aussi navbar__topbar-inner/
   navbar__main-inner/page-header__inner (même classe "container" réutilisée
   partout) : viser `.container` tout court y ajoutait le même padding
   géant, d'où les grands espaces blancs/bleus signalés dans le header et la
   navbar (bug rapporté 2026-09-24). */
body.woocommerce-checkout .page-content {
	padding-top: clamp(32px, 4vw, 48px);
	padding-bottom: clamp(48px, 6vw, 80px);
}

/* Écran de connexion : la page n'a pas de bannière (cf. page.php), le titre
   collait à la barre de navigation et le formulaire au footer — plus d'air
   au-dessus et en dessous (demande utilisateur 2026-09-23). */
body.stbp-account-login .page-content {
	padding-top: clamp(56px, 7vw, 96px);
	padding-bottom: clamp(72px, 9vw, 128px);
}

/* --- Mise en page 2 colonnes (cf. woocommerce/checkout/form-checkout.php) :
   gauche = coordonnées de l'inscrit + upload facultatif de l'attestation,
   droite = code promo + résumé de commande + paiement + bouton — demande
   utilisateur 2026-09-24. Remplace l'ancien formulaire pleine largeur
   (bug "presque plein écran" du 2026-09-23) par une largeur propre, comme
   les autres pages "formulaire" du site (adhésion, tarifs...).
   Le code promo est un <form> à part (jamais imbriqué dans form.checkout,
   ce qui casserait le HTML) : `form.checkout` passe en `display:contents`
   pour que ses colonnes rejoignent directement cette grille, au même
   niveau que le code promo — cf. le commentaire du template pour le détail. */

.stbp-checkout-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	grid-template-rows: auto 1fr;
	gap: clamp(24px, 3vw, 40px) clamp(32px, 4vw, 56px);
	align-items: start;
	max-width: 1100px;
	margin: 0 auto;
}

@media (max-width: 860px) {
	.stbp-checkout-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
}

.woocommerce-checkout form.checkout.stbp-checkout {
	display: contents;
}

form.checkout_coupon.woocommerce-form-coupon {
	grid-column: 2;
	grid-row: 1;
}

.stbp-checkout-grid__col--form {
	grid-column: 1;
	grid-row: 1 / 3;
}

.stbp-checkout-grid__col--summary {
	grid-column: 2;
	grid-row: 2;
	position: sticky;
	top: 24px;
}

@media (max-width: 860px) {
	form.checkout_coupon.woocommerce-form-coupon,
	.stbp-checkout-grid__col--form,
	.stbp-checkout-grid__col--summary {
		grid-column: 1;
		grid-row: auto;
	}

	.stbp-checkout-grid__col--summary {
		position: static;
	}
}

.stbp-checkout-attestation {
	margin-top: 20px;
}

.stbp-checkout-attestation label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}

/*
 * WooCommerce ajoute `.woocommerce img, .woocommerce-page img { height: auto; }`
 * (woocommerce-layout.css) — un sélecteur `class + élément` (spécificité 0,1,1)
 * qui l'emporte sur nos classes uniques `.navbar__logo`/`.footer__logo`
 * (0,1,0), désactivant leur hauteur fixe sur toute page WooCommerce (boutique,
 * panier, paiement, compte). On restaure les dimensions voulues avec une
 * spécificité supérieure (0,2,0), sans jamais modifier le CSS du plugin.
 * .navbar-sticky__logo (bandeau condensé desktop, cf. navbar.css) manquait à
 * l'appel ici — logo énorme (non contraint) une fois ce bandeau visible sur
 * les pages WooCommerce, bug rapporté 2026-09-23 sur la page de commande.
 */
body.woocommerce .navbar__logo,
body.woocommerce-page .navbar__logo {
	height: 76.8px;
	width: auto;
}

body.woocommerce .navbar__mobile-logo,
body.woocommerce-page .navbar__mobile-logo {
	height: 32px;
	width: auto;
}

body.woocommerce .navbar-sticky__logo,
body.woocommerce-page .navbar-sticky__logo {
	height: 80px;
	width: auto;
}

body.woocommerce .footer__logo,
body.woocommerce-page .footer__logo {
	height: 70px;
	width: auto;
}

/* --- Boutons --- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
	background-color: var(--color-primary-light);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 14px;
	padding: 12px 24px;
	transition: background-color var(--transition-base);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--color-secondary);
	color: #fff;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--color-primary-light);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--color-secondary);
}

.woocommerce a.button.disabled,
.woocommerce button.button.disabled {
	opacity: 0.5;
}

/*
 * Depuis WooCommerce 8+, les pages Panier/Paiement générées automatiquement
 * utilisent les blocs Gutenberg WooCommerce (wc-blocks), pas les shortcodes
 * classiques : leurs boutons ont leurs propres classes, en plus de `.button`.
 */
.wc-block-components-button.contained,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background-color: var(--color-primary-light);
	color: #fff;
	border-radius: var(--radius-sm);
	font-weight: 700;
}

.wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--color-secondary);
	color: #fff;
}

/* Bloc "Nouveau dans la boutique" (panier vide) : bouton Gutenberg natif. */
.woocommerce-cart .wp-block-button__link,
.woocommerce-page .wp-block-button__link {
	background-color: var(--color-primary-light);
	border-radius: var(--radius-sm);
}

.woocommerce-cart .wp-block-button__link:hover,
.woocommerce-page .wp-block-button__link:hover {
	background-color: var(--color-secondary);
}

/* --- Prix, badges --- */

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--color-primary);
	font-weight: 700;
}

.woocommerce span.onsale {
	background-color: var(--color-accent);
	font-weight: 700;
	border-radius: var(--radius-circle);
}

.woocommerce .star-rating {
	color: var(--color-accent);
}

/* --- Formulaires (checkout, compte, filtres) --- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page table.shop_table select {
	border-radius: 10px;
	border: 1.5px solid var(--color-border);
	padding: 12px 14px;
	font-family: var(--font-family-base);
	font-size: 15px;
	transition: border-color var(--transition-base);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--color-secondary);
}

/* --- Tableaux (panier, commandes) --- */

.woocommerce table.shop_table {
	border-radius: var(--radius-md);
	border-color: var(--color-border);
}

.woocommerce table.shop_table th {
	font-weight: 700;
	color: var(--color-text-secondary);
}

/* --- Notices --- */

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--color-secondary);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--color-secondary);
}

.woocommerce-error {
	border-top-color: #dc2626;
}

/* --- Mon compte : navigation --- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--color-border-light);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--color-secondary);
	font-weight: 700;
}

/* --- Connexion / Inscription (Mon compte, formulaires natifs WooCommerce) --- */

.account-login-header {
	margin-bottom: clamp(32px, 4vw, 48px);
}

.account-login-header .section-title {
	margin-bottom: 16px;
}

.account-login-header__lead {
	text-align: center;
	max-width: 480px;
	margin: 0 auto;
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.6;
}

/*
 * Inscription désactivée en permanence (cf. memberships.php,
 * pre_option_woocommerce_enable_myaccount_registration) : le plugin n'imprime
 * même plus le wrapper `#customer_login`/`.u-column1` dans ce cas (cf.
 * templates/myaccount/form-login.php) — seuls restent le <h2> et le
 * formulaire, en enfants directs de `div.woocommerce`.
 */

/*
 * Spécificité (0,2,2) : bat volontairement le `.woocommerce form.login`
 * natif (0,2,1, cf. woocommerce.css du plugin) qui pose une bordure — sans
 * ça la règle du plugin l'emporte malgré l'ordre de chargement.
 */
body.woocommerce-account form.woocommerce-form-login {
	max-width: 420px;
	margin: 0 auto;
	border: none;
}

/*
 * Le titre natif "Se connecter" est remplacé par l'en-tête section-title
 * injecté avant le formulaire (cf. inc/woocommerce.php +
 * template-parts/account/login-header.php). Quand l'inscription est
 * désactivée (cf. plus haut), le plugin n'imprime NI `#customer_login` NI
 * `.u-column1` : le <h2> est un enfant direct de `div.woocommerce`, juste
 * avant le formulaire.
 */
body.stbp-account-login div.woocommerce > h2 {
	display: none;
}

.woocommerce-form-register h2 {
	font-size: 20px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 20px;
}

/* Alignement pixel-perfect avec le bouton .btn-primary du formulaire
   d'adhésion (cf. adhesion-page.css) — même fond/rayon déjà hérités des
   règles boutons WooCommerce génériques ci-dessus, seuls le padding et la
   bordure différaient. */
/* Spécificité (0,2,2), au-delà du `.woocommerce button.button` natif (0,2,1)
   qui fixe sinon son propre padding/absence de bordure. */
body.woocommerce-account button.woocommerce-form-login__submit {
	padding: 13px 28px;
	border: 2px solid var(--color-primary-light);
}

body.woocommerce-account button.woocommerce-form-login__submit:hover,
body.woocommerce-account button.woocommerce-form-login__submit:focus-visible {
	border-color: var(--color-secondary);
}

.woocommerce-form-login .woocommerce-form-row label,
.woocommerce-form-register .woocommerce-form-row label {
	font-weight: 600;
	font-size: 14px;
	display: block;
	margin-bottom: 6px;
}

.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	margin-bottom: 16px;
}

.woocommerce-LostPassword.lost_password {
	margin-top: 14px;
	font-size: 13px;
}

.woocommerce-LostPassword.lost_password a {
	color: var(--color-primary-light);
	font-weight: 600;
}

.woocommerce-form-register p {
	font-size: 13px;
	color: var(--color-text-muted);
}

/* --- Panier (page "Panier", blocs WooCommerce/Gutenberg) : classes
   `.wc-block-*`. La page de commande, elle, est repassée au formulaire
   classique juste en dessous (shortcode [woocommerce_checkout]) — les blocs
   Checkout imposent toujours une adresse de facturation dès qu'aucune
   livraison n'est nécessaire (cas de ce site : uniquement des accès
   numériques), sans réglage natif pour la désactiver ; le shortcode classique,
   lui, respecte pleinement `woocommerce_checkout_fields` (cf. stbp-core,
   customer-accounts.php) pour ne garder que l'e-mail. Demande utilisateur
   2026-09-23. --- */

.wc-block-components-checkout-step__title {
	font-size: 18px;
	font-weight: 800;
	color: var(--color-text);
}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="url"] {
	border-radius: 10px;
	border-color: var(--color-border);
}

.wc-block-components-form .wc-block-components-text-input input[type="text"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="email"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="tel"]:focus,
.wc-block-components-text-input input[type="text"]:focus,
.wc-block-components-text-input input[type="email"]:focus,
.wc-block-components-text-input input[type="tel"]:focus {
	border-color: var(--color-secondary);
}

.wc-block-components-text-input label {
	font-size: 15px;
}

.wc-blocks-components-select__container {
	border-radius: 10px;
	border: 1.5px solid var(--color-border);
}

.wc-blocks-components-select__container select {
	font-family: var(--font-family-base);
}

.wc-block-components-radio-control__option {
	border-radius: var(--radius-sm);
	border-color: var(--color-border) !important;
}

.wc-block-components-radio-control__option-checked {
	border-color: var(--color-secondary) !important;
}

.wc-block-components-radio-control__input,
.wc-block-components-checkbox__input {
	accent-color: var(--color-secondary);
}

/* Panneau "Résumé de la commande" (colonne de droite) : carte identifiable,
   même traitement que les autres cartes du site plutôt que le fond neutre
   par défaut du plugin. */
.wc-block-components-sidebar.wc-block-checkout__sidebar {
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 24px;
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-item__label {
	color: var(--color-text);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--color-primary);
	font-weight: 800;
}

/* Champ code promo — toujours ouvert (cf. main.js initAutoExpandCoupon),
   le bouton "Ajouter des codes promo" disparaît une fois déplié. */
.wc-block-components-totals-coupon .wc-block-components-panel__button[aria-expanded="true"] {
	display: none;
}

.wc-block-components-totals-coupon__form {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.wc-block-components-totals-coupon__button {
	flex-shrink: 0;
}

/* --- Commande (formulaire classique, shortcode [woocommerce_checkout]) --- */

.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
	font-size: 18px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 16px;
}

.woocommerce-billing-fields .form-row label,
.woocommerce-additional-fields .form-row label {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	display: block;
}

/* Code promo toujours visible dès l'arrivée sur la page — pas de lien
   "cliquer ici pour l'afficher" (demande utilisateur 2026-09-23). Le plugin
   masque le formulaire en style inline (`display:none`), d'où l'!important. */
.woocommerce-form-coupon-toggle {
	display: none;
}

/* Placé dans la colonne de droite de la grille (grid-column/grid-row, cf.
   plus haut) — largeur pilotée par cette colonne, pas de max-width propre
   ici. */
form.checkout_coupon.woocommerce-form-coupon {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 0;
	background-color: var(--color-background-alt);
	border-radius: var(--radius-md);
	padding: 16px;
}

form.checkout_coupon.woocommerce-form-coupon .form-row {
	margin: 0;
	flex: 1 1 200px;
}

/* Moyens de paiement : une seule option (virement) — WooCommerce masque
   alors le bouton radio lui-même (rien à choisir), on garde juste une carte
   avec le libellé et les instructions. */
.wc_payment_method {
	list-style: none;
	background-color: var(--color-background-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 16px 18px;
}

.wc_payment_method label {
	font-weight: 700;
	color: var(--color-text);
}

.wc_payment_method .payment_box {
	margin-top: 8px;
	padding: 0;
	background: none;
	font-size: 13px;
	color: var(--color-text-muted);
}

.wc_payment_method .payment_box::before {
	display: none;
}

.woocommerce-terms-and-conditions-wrapper {
	margin: 20px 0;
	font-size: 13px;
	color: var(--color-text-muted);
}

.woocommerce-form__input-checkbox {
	accent-color: var(--color-secondary);
}

/* Bouton pleine largeur retiré : un bouton normal, centré, comme les
   autres CTA du site (demande utilisateur 2026-09-23). Le plugin le flotte
   à droite par défaut via `.woocommerce #payment #place_order{float:right}`
   (woocommerce-layout.css) — `text-align:center` seul sur le parent n'a
   donc aucun effet ; il faut reprendre le même sélecteur (2 ID) pour gagner
   en spécificité, un simple `#place_order` (1 ID) ne suffit pas. */
.woocommerce-checkout .place-order {
	text-align: center;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
	float: none;
	display: inline-block;
	width: auto;
}

/* --- Page de remerciement (cf. woocommerce/checkout/thankyou.php) --- */

.thankyou-page {
	max-width: 680px;
	margin: 0 auto;
}

.thankyou-page__hero {
	text-align: center;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.thankyou-page__hero-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-circle);
	background-color: rgba(55, 170, 103, 0.12);
	color: var(--color-secondary);
	margin-bottom: 16px;
}

.thankyou-page__title {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 900;
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}

.thankyou-page__lead {
	color: var(--color-text-muted);
	font-size: 15px;
}

.thankyou-page__overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0 0 24px;
}

.thankyou-page__overview-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 14px 16px;
}

.thankyou-page__overview-item dt {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-light);
	margin-bottom: 6px;
}

.thankyou-page__overview-item dd {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
	margin: 0;
	overflow-wrap: anywhere;
}

/* Numéro de commande : bien identifiable, l'utilisateur en a besoin pour
   référencer son virement (demande utilisateur 2026-09-23). */
.thankyou-page__overview-item--highlight {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	grid-column: 1 / -1;
}

.thankyou-page__overview-item--highlight dt {
	color: rgba(255, 255, 255, 0.75);
}

.thankyou-page__overview-item--highlight dd {
	color: var(--color-background);
	font-size: 22px;
	font-weight: 900;
}

/* Message le plus important de l'écran (l'utilisateur doit comprendre que
   son inscription n'est pas encore active) : gras et plus grand que le
   reste du texte courant, demande utilisateur 2026-09-23. */
.thankyou-page__notice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background-color: rgba(55, 170, 103, 0.08);
	border: 1px solid rgba(55, 170, 103, 0.25);
	border-radius: var(--radius-md);
	padding: 20px 22px;
	margin-bottom: 24px;
	color: var(--color-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

.thankyou-page__notice svg {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--color-secondary);
	margin-top: 2px;
}

.thankyou-page__notice p {
	margin: 0;
}

.thankyou-page__payment-instructions {
	background-color: var(--color-background-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	margin-bottom: 32px;
	font-size: 14px;
	color: var(--color-text-secondary);
}

.thankyou-page__payment-instructions p:last-child {
	margin-bottom: 0;
}

/* Coordonnées bancaires (cf. woocommerce_thankyou_bacs, injectées via
   stbp-core/includes/payment.php) : le RIB doit sauter aux yeux — c'est la
   seule info dont le client a besoin pour faire son virement, demande
   utilisateur 2026-09-24. */
.thankyou-page__payment-instructions .wc-bacs-bank-details-heading {
	font-size: 15px;
	font-weight: 800;
	color: var(--color-text);
	margin: 16px 0 10px;
}

.thankyou-page__payment-instructions .wc-bacs-bank-details-account-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 8px;
}

.thankyou-page__payment-instructions ul.wc-bacs-bank-details {
	list-style: none;
	margin: 0;
	padding: 0;
}

.thankyou-page__payment-instructions ul.wc-bacs-bank-details li {
	padding: 5px 0;
	font-size: 14px;
}

.thankyou-page__payment-instructions ul.wc-bacs-bank-details li.account_number {
	font-size: 19px;
	font-weight: 800;
	color: var(--color-primary);
	letter-spacing: 0.02em;
	padding: 8px 0;
}

.thankyou-page__section-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 12px;
}

.thankyou-page__items {
	margin-bottom: 28px;
}

.thankyou-page__thanks {
	text-align: center;
	color: var(--color-text-muted);
	font-size: 14px;
}

.thankyou-page__failed {
	text-align: center;
	padding: 32px 0;
}

.thankyou-page__failed-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}

/* --- Onglet "Mon adhésion" --- */

.stbp-membership__status {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	margin-bottom: 20px;
	background-color: var(--color-background-alt);
	color: var(--color-text-secondary);
}

.stbp-membership__status--active {
	background-color: rgba(55, 170, 103, 0.12);
	color: var(--color-secondary);
}

.stbp-membership__status--pending_review,
.stbp-membership__status--awaiting_document,
.stbp-membership__status--pending_payment {
	background-color: rgba(245, 158, 11, 0.12);
	color: var(--color-accent);
}

.stbp-membership__status--rejected,
.stbp-membership__status--expired {
	background-color: rgba(220, 38, 38, 0.1);
	color: #dc2626;
}

.stbp-membership__notice--error {
	color: #dc2626;
	font-weight: 600;
}

.stbp-membership__notice--warning {
	background-color: rgba(245, 158, 11, 0.1);
	color: #92400e;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	font-weight: 600;
}

.stbp-membership__notice--warning a {
	color: var(--color-primary);
	text-decoration: underline;
	font-weight: 700;
}

.stbp-membership__hint {
	color: var(--color-text-muted);
	font-size: 14px;
}

.stbp-membership__payment-instructions {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background-color: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.25);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	margin-top: 4px;
}

.stbp-membership__payment-icon {
	flex-shrink: 0;
	color: var(--color-accent);
	margin-top: 2px;
}

.stbp-membership__payment-text {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin-bottom: 8px;
}

.stbp-membership__payment-email {
	display: inline-block;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: underline;
}

.stbp-membership__receipts {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
}

.stbp-membership__receipts-title {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 10px;
}

.stbp-membership__receipts-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
}

.stbp-membership__form,
.stbp-membership__renew {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: 16px;
}

.stbp-membership__form label,
.stbp-membership__renew label {
	font-weight: 600;
	font-size: 14px;
}

.stbp-membership__renew {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
}

.stbp-membership__renew select {
	border-radius: 10px;
	border: 1.5px solid var(--color-border);
	padding: 10px 12px;
}

/* --- Onglet "Mon laboratoire" --- */

.stbp-laboratoire__form {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 20px;
	max-width: 460px;
}

.stbp-laboratoire__form label {
	font-weight: 600;
	font-size: 14px;
	margin-top: 14px;
}

.stbp-laboratoire__form input[type="text"],
.stbp-laboratoire__form input[type="email"],
.stbp-laboratoire__form input[type="url"],
.stbp-laboratoire__form select,
.stbp-laboratoire__form textarea {
	border-radius: 10px;
	border: 1.5px solid var(--color-border);
	padding: 11px 14px;
	font-family: var(--font-family-base);
}

.stbp-laboratoire__form textarea {
	resize: vertical;
}

.stbp-laboratoire__checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500 !important;
}

.stbp-laboratoire__form button {
	margin-top: 20px;
	align-self: flex-start;
}

/* ==========================================================================
   Mon compte — mise en page d'ensemble
   ========================================================================== */

/*
 * Le conteneur grid réel : "Mon compte" est une Page classique (page.php) —
 * `woocommerce_before/after_main_content` (inc/woocommerce.php, qui ajoute
 * `.woocommerce-container`) ne se déclenche que sur les templates WooCommerce
 * natifs (boutique, produit...), jamais sur une Page avec le shortcode
 * [woocommerce_my_account]. Le vrai parent direct de nav/contenu est le
 * <div class="woocommerce"> du shortcode lui-même.
 */
body.woocommerce-account div.woocommerce {
	display: grid;
	grid-template-columns: 260px 1fr;
	align-items: start;
	gap: 28px;
}

/*
 * Écran de connexion (non connecté) : ni navigation ni
 * `.woocommerce-MyAccount-content` ne sont présents, seuls l'en-tête et
 * `#customer_login` — la grille nav+contenu ci-dessus n'a pas lieu d'être et
 * placerait ces deux blocs côte à côte au lieu de les empiler.
 */
body.stbp-account-login div.woocommerce {
	display: block;
}

/* Placement explicite (pas d'auto-placement) : évite toute ambiguïté avec
   l'ordre de sortie WooCommerce natif. */
body.woocommerce-account div.woocommerce > .woocommerce-MyAccount-navigation {
	grid-column: 1;
}

body.woocommerce-account div.woocommerce > .woocommerce-MyAccount-content {
	grid-column: 2;
}

/*
 * WooCommerce core (woocommerce-layout.css) positionne nav/contenu avec
 * `float` + `width: 30%/68%` (même spécificité, 0,2,0, que nos règles) : selon
 * l'ordre de chargement des feuilles de style, cette règle native peut
 * l'emporter sur le passage en grid ci-dessus. On neutralise explicitement
 * les deux avec une spécificité supérieure (préfixe `body`), plutôt que de
 * dépendre de l'ordre d'enqueue.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* --- Navigation (carte, icônes) --- */

body.woocommerce-account .woocommerce-MyAccount-navigation {
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	padding: 8px;
	position: sticky;
	top: 24px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border: none;
	border-radius: 0;
	overflow: visible;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	margin-top: 2px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-secondary);
	transition: all var(--transition-base);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	background-color: var(--color-background-alt);
	color: var(--color-text);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: rgba(55, 170, 103, 0.1);
	color: var(--color-secondary);
	font-weight: 700;
}

.stbp-account-nav__icon {
	display: flex;
	flex-shrink: 0;
}

.stbp-account-nav__label {
	flex: 1;
	min-width: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--color-border-light);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--color-text-muted);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background-color: rgba(220, 38, 38, 0.08);
	color: #dc2626;
}

/* --- Contenu (carte) --- */

body.woocommerce-account .woocommerce-MyAccount-content {
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	padding: clamp(24px, 3vw, 40px);
}

/* --- Tableau de bord --- */

.stbp-dashboard__welcome {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--color-border);
	flex-wrap: wrap;
}

.stbp-dashboard__avatar {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	overflow: hidden;
	flex-shrink: 0;
}

.stbp-dashboard__avatar img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
	padding: 4px;
}

.stbp-dashboard__avatar--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary-light);
	color: #fff;
	font-size: 22px;
	font-weight: 800;
}

.stbp-dashboard__welcome-text {
	flex: 1;
	min-width: 160px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.stbp-dashboard__greeting {
	font-size: 18px;
	color: var(--color-text);
}

.stbp-dashboard__welcome .stbp-membership__status {
	margin-bottom: 0;
	align-self: flex-start;
}

.stbp-dashboard__logout {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-text-muted);
	padding: 9px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: all var(--transition-base);
}

.stbp-dashboard__logout:hover,
.stbp-dashboard__logout:focus-visible {
	border-color: #dc2626;
	color: #dc2626;
}

.stbp-dashboard__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

.stbp-dashboard__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: all var(--transition-base);
}

.stbp-dashboard__card:hover,
.stbp-dashboard__card:focus-visible {
	border-color: var(--color-secondary);
	box-shadow: 0 4px 16px rgba(55, 170, 103, 0.12);
	transform: translateY(-1px);
}

.stbp-dashboard__card-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: rgba(32, 139, 175, 0.08);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

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

.stbp-dashboard__card-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text);
}

.stbp-dashboard__card-desc {
	font-size: 12px;
	color: var(--color-text-muted);
}

.stbp-dashboard__card svg {
	flex-shrink: 0;
	color: var(--color-text-light);
}

/* --- Titres/contenus natifs de l'onglet (ex. formulaires, listes) --- */

body.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: 17px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 16px;
}

/* --- Commandes --- */

.woocommerce-account .woocommerce-orders-table {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.woocommerce-account .woocommerce-orders-table thead th {
	background-color: var(--color-background-alt);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.woocommerce-account .woocommerce-orders-table tbody tr:hover {
	background-color: var(--color-background-alt);
}

.woocommerce-account .woocommerce-orders-table .button {
	padding: 8px 16px;
	font-size: 12px;
}

.woocommerce-account mark.order-status {
	background: none;
	font-weight: 700;
	color: var(--color-secondary);
}

/* --- Adresses --- */

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.woocommerce-account .woocommerce-Addresses .u-column1 {
	grid-column: 1;
	grid-row: 1;
}

.woocommerce-account .woocommerce-Addresses .u-column2 {
	grid-column: 2;
	grid-row: 1;
}

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

	.woocommerce-account .woocommerce-Addresses .u-column1,
	.woocommerce-account .woocommerce-Addresses .u-column2 {
		grid-column: 1;
		grid-row: auto;
	}
}

/*
 * Même piège que #customer_login (cf. plus haut) : WooCommerce core applique
 * `float` + `width: 48%` à `.col2-set .col-1/.col-2` (même sélecteur que
 * `.u-column1`/`.u-column2` ici) — même spécificité (0,3,0) que notre règle
 * ci-dessous, donc pas de garantie de gagner selon l'ordre de chargement des
 * feuilles de style. Préfixe `body` pour une spécificité supérieure garantie.
 */
body.woocommerce-account .woocommerce-Addresses .u-column1,
body.woocommerce-account .woocommerce-Addresses .u-column2 {
	float: none;
	width: 100%;
}

.woocommerce-account .woocommerce-Address {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin-bottom: 0;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	color: var(--color-text-secondary);
	line-height: 1.7;
}

/* --- Formulaires (détails du compte, adresses) --- */

body.woocommerce-account .woocommerce-MyAccount-content .form-row label {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	display: block;
}

body.woocommerce-account .woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px;
	margin-top: 24px;
}

body.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	font-weight: 800;
	padding: 0 8px;
}

/* --- Responsive --- */

@media (max-width: 900px) {
	body.woocommerce-account div.woocommerce {
		grid-template-columns: 1fr;
	}

	/* Sans ce reset, le placement explicite (grid-column: 2) du contenu créerait
	   une 2e colonne implicite au lieu d'empiler nav/contenu sur une seule. */
	body.woocommerce-account div.woocommerce > .woocommerce-MyAccount-navigation,
	body.woocommerce-account div.woocommerce > .woocommerce-MyAccount-content {
		grid-column: 1;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 1 1 auto;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}
}

@media (max-width: 600px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		width: 100%;
		float: none;
	}

	.stbp-dashboard__welcome {
		flex-direction: column;
		align-items: flex-start;
	}

	.stbp-dashboard__logout {
		align-self: stretch;
		justify-content: center;
	}

	.stbp-account-nav__label {
		font-size: 13px;
	}
}

/* ==========================================================================
   Étape 2 — formulaire d'inscription au congrès (panier = inscription à un
   événement, cf. form-checkout.php / stbp-core event-registration.php)
   ========================================================================== */

.stbp-reg-head {
	margin-bottom: 8px;
}

.stbp-reg-head__title {
	margin: 0;
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 800;
	color: var(--color-text);
}

.stbp-reg-head__event {
	margin: 4px 0 24px;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-primary-light);
}

.stbp-reg-login {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	background-color: var(--color-background-tint);
	border: 1px solid var(--color-border-tint);
	font-size: 14px;
	color: var(--color-text-secondary);
}

.stbp-reg-login a {
	color: var(--color-primary-light);
	font-weight: 700;
	text-decoration: underline;
}

.stbp-reg-section {
	margin: 0 0 24px;
	padding: 22px 24px 8px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-background);
	min-width: 0;
}

.stbp-reg-section__title {
	padding: 0 8px;
	margin-left: -8px;
	font-size: 16px;
	font-weight: 800;
	color: var(--color-primary-light);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.stbp-reg-section .woocommerce-billing-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	column-gap: 4%;
}

.stbp-reg-section .form-row {
	width: 100%;
	float: none;
	margin-bottom: 16px;
}

.stbp-reg-section .form-row-first,
.stbp-reg-section .form-row-last {
	width: 48%;
}

/* Radios : libellé de question au-dessus, options en ligne ou empilées */
.stbp-reg-section .form-row > label:first-child {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
}

.stbp-reg-section input[type="radio"] {
	margin: 0 6px 0 0;
	accent-color: var(--color-primary-light);
}

.stbp-reg-section input[type="radio"] + label {
	display: inline;
	margin: 0 18px 0 0;
	font-weight: 500;
	cursor: pointer;
}

.stbp-reg-section .stbp-stacked-radios .woocommerce-input-wrapper {
	display: grid;
	grid-template-columns: auto 1fr;
	row-gap: 8px;
	align-items: center;
}

.stbp-reg-section .stbp-stacked-radios input[type="radio"] + label {
	margin-right: 0;
}

/* Choix du pack : cartes cliquables */
.stbp-reg-section .stbp-choice-cards .woocommerce-input-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
}

.stbp-reg-section .stbp-choice-cards input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.stbp-reg-section .stbp-choice-cards input[type="radio"] + label {
	display: flex;
	align-items: center;
	min-height: 64px;
	margin: 0;
	padding: 12px 14px;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-weight: 700;
	line-height: 1.35;
	transition: border-color var(--transition-base), background-color var(--transition-base);
}

.stbp-reg-section .stbp-choice-cards input[type="radio"]:checked + label {
	border-color: var(--color-primary-light);
	background-color: var(--color-background-tint);
	color: var(--color-primary-light);
}

.stbp-reg-section .stbp-choice-cards input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--color-primary-light);
	outline-offset: 2px;
}

/* Récapitulatif : tarif appliqué + avertissement tarif adhérent */
.stbp-review-profil th,
.stbp-review-profil td {
	color: var(--color-primary-light);
	font-weight: 700;
}

.stbp-review-warning td {
	font-size: 13px;
	line-height: 1.5;
	color: #7c2d12;
	background-color: #fff8eb;
}

.stbp-review-warning a {
	font-weight: 700;
	text-decoration: underline;
}

@media (max-width: 600px) {
	.stbp-reg-section {
		padding: 18px 16px 4px;
	}

	.stbp-reg-section .form-row-first,
	.stbp-reg-section .form-row-last {
		width: 100%;
	}
}

/* WooCommerce répète l'astérisque "obligatoire" sur chaque option d'un
   groupe de radios : on ne le garde que sur l'intitulé de la question. */
.stbp-reg-section .woocommerce-input-wrapper label .required,
.stbp-reg-section .woocommerce-input-wrapper label abbr {
	display: none;
}

/* Les libellés du formulaire d'inscription indiquent déjà les champs
   facultatifs ("privé", "en cas de demande de facture") : pas de
   "(facultatif)" automatique en plus. */
.stbp-reg-section label .optional {
	display: none;
}

/* Mon compte → Inscriptions : aucune inscription (sans bouton "Parcourir les produits") */
.stbp-orders-empty {
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: #eef6f9;
  color: var(--color-text-secondary);
}

.stbp-orders-empty p {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary-darker);
}

.stbp-orders-empty .stbp-orders-empty__hint {
  margin-top: 6px;
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.woocommerce-orders-table__cell-order-summary {
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* Mon laboratoire : sélecteur de position (OpenStreetMap) */
.stbp-laboratoire__geo {
	margin: 18px 0 6px;
}

.stbp-laboratoire__geo-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.stbp-geo__status {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--color-text-muted);
}

.stbp-geo__map {
	z-index: 0;
	border: 1px solid var(--color-border);
}

.stbp-geo__reset {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 13px;
}

.stbp-geo__map {
	isolation: isolate;
	position: relative;
}

/* Détails du compte : consentement "contact par les partenaires" (stbp-core partner-consent.php). */
.woocommerce-EditAccountForm .stbp-account-consent {
	margin: 24px 0;
	padding: 16px 18px;
	border: 1.5px solid var(--color-border);
	border-radius: 12px;
	background-color: var(--color-background);
}

.woocommerce-EditAccountForm .stbp-account-consent legend {
	padding: 0 6px;
	font-weight: 700;
	font-size: 15px;
}

/* ==========================================================================
   Inscription — offre d'adhésion + connexion sur la page (2026-09-28,
   template-parts/checkout/join-offer.php, login-dialog.php)
   ========================================================================== */

.stbp-join-known {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: var(--radius-md);
	background-color: var(--color-background-tint);
	border: 1px solid var(--color-border-tint);
	font-size: 14px;
	color: var(--color-text-secondary);
}

.stbp-join-known--ok {
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: #37aa6714;
	border-color: #37aa6740;
	color: #1f7a4a;
	font-weight: 700;
}

.stbp-join-known a {
	font-weight: 700;
	color: var(--color-primary-light);
}

.stbp-join-login {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 0 0 24px;
	padding: 18px 22px;
	border-radius: var(--radius-md);
	background-color: var(--color-background-tint);
	border: 1px solid var(--color-border-tint);
}

.stbp-join-login p {
	margin: 0;
	flex: 1 1 260px;
	font-size: 15px;
	color: var(--color-text-secondary);
}

.stbp-join-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border: 2px solid var(--color-primary-light);
	border-radius: 10px;
	background-color: transparent;
	font-size: 15px;
	font-weight: 800;
	color: var(--color-primary-light);
	cursor: pointer;
	transition: all var(--transition-base);
}

.stbp-join-btn--primary {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	color: #fff;
}

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

.stbp-join-btn--ghost:hover,
.stbp-join-btn--ghost:focus-visible {
	border-color: var(--color-text-muted);
	color: var(--color-text-secondary);
}

.stbp-join {
	margin: 0 0 24px;
	padding: clamp(22px, 3vw, 32px);
	border-radius: 20px;
	background: linear-gradient(135deg, #0f3a6b 0%, #1a6c9a 100%);
	color: #fff;
	box-shadow: 0 16px 44px rgba(15, 58, 107, 0.25);
}

.stbp-join__kicker {
	display: inline-block;
	margin-bottom: 8px;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background-color: var(--color-secondary);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.stbp-join__title {
	margin: 0 0 20px;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 800;
	line-height: 1.25;
	color: #fff;
}

.stbp-join__prices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}

.stbp-join__price {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border-radius: 14px;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.stbp-join__price--total {
	background-color: #fff;
	color: var(--color-text);
}

.stbp-join__price-label {
	font-size: 13px;
	font-weight: 600;
	opacity: 0.85;
}

.stbp-join__price-value {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
}

.stbp-join__price-value small {
	font-size: 15px;
	font-weight: 600;
}

.stbp-join__price--total .stbp-join__price-value {
	color: var(--color-secondary);
}

.stbp-join__price-note {
	font-size: 13px;
	opacity: 0.85;
}

.stbp-join__benefits {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 20px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.stbp-join__benefits li {
	position: relative;
	padding-left: 24px;
	color: rgba(255, 255, 255, 0.9);
}

.stbp-join__benefits li::before {
	content: "✓";
	position: absolute;
	left: 0;
	font-weight: 800;
	color: #7dd6f0;
}

.stbp-join__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.stbp-join__actions .stbp-join-btn--ghost {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.stbp-join__actions .stbp-join-btn--ghost:hover,
.stbp-join__actions .stbp-join-btn--ghost:focus-visible {
	border-color: #fff;
	color: #fff;
}

.stbp-join__form {
	margin-top: 4px;
	padding: 22px;
	border-radius: 14px;
	background-color: #fff;
	color: var(--color-text);
}

.stbp-join__form label {
	display: block;
	margin: 12px 0 6px;
	font-weight: 700;
	font-size: 14px;
}

.stbp-join__form-intro {
	display: flex;
	gap: 8px;
	margin: 0 0 6px;
	padding: 10px 14px;
	border-radius: 10px;
	background-color: #37aa6714;
	font-size: 14px;
	font-weight: 600;
	color: #1f7a4a;
}

.stbp-join__form-intro svg {
	flex: none;
	margin-top: 2px;
}

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

.stbp-join__form .password-field,
.stbp-login-dialog .password-field {
	position: relative;
}

.stbp-join__form .password-field__icon--hide,
.stbp-login-dialog .password-field__icon--hide,
.stbp-join__form .password-field__toggle[aria-pressed="true"] .password-field__icon--show,
.stbp-login-dialog .password-field__toggle[aria-pressed="true"] .password-field__icon--show {
	display: none;
}

.stbp-join__form .password-field__toggle[aria-pressed="true"] .password-field__icon--hide,
.stbp-login-dialog .password-field__toggle[aria-pressed="true"] .password-field__icon--hide {
	display: block;
}

.stbp-join__form .password-field input,
.stbp-login-dialog .password-field input {
	width: 100%;
	padding-right: 50px;
}

.stbp-join__form .password-field__toggle,
.stbp-login-dialog .password-field__toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text-light);
	cursor: pointer;
}

.stbp-join__hint,
.stbp-join__terms {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--color-text-muted);
	line-height: 1.5;
}

.stbp-join__terms {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--color-border);
}

.stbp-join__upload {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 600;
}

.stbp-join__upload.is-ok {
	color: #1f7a4a;
}

.stbp-join__upload.is-error {
	color: #dc2626;
}

.stbp-join__form label.stbp-join__later {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	font-weight: 600;
	cursor: pointer;
}

.stbp-join__later input {
	margin-top: 4px;
	accent-color: var(--color-primary-light);
}

.stbp-join__later small {
	display: block;
	font-weight: 500;
	color: var(--color-text-muted);
}

.stbp-join__cancel {
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-muted);
	text-decoration: underline;
	cursor: pointer;
}

.stbp-login-dialog {
	width: min(440px, calc(100% - 32px));
	padding: 0;
	border: 0;
	border-radius: 20px;
	box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3);
}

.stbp-login-dialog::backdrop {
	background: rgba(15, 23, 42, 0.55);
}

.stbp-login-dialog__box {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px;
}

.stbp-login-dialog__box label {
	margin: 14px 0 6px;
	font-weight: 700;
	font-size: 14px;
}

.stbp-login-dialog__box .input-text {
	width: 100%;
}

.stbp-login-dialog__close {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 6px;
	border: 0;
	background: none;
	color: var(--color-text-muted);
	cursor: pointer;
}

.stbp-login-dialog__title {
	margin: 0 0 4px;
	font-size: 21px;
	font-weight: 800;
}

.stbp-login-dialog__text {
	margin: 0;
	font-size: 14px;
	color: var(--color-text-muted);
}

.stbp-login-dialog__error {
	margin: 14px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #dc2626;
}

.stbp-login-dialog__submit {
	margin-top: 20px;
}

.stbp-login-dialog__lost {
	margin-top: 12px;
	font-size: 13px;
	text-align: center;
	color: var(--color-primary-light);
}

@media (max-width: 700px) {
	.stbp-join__prices,
	.stbp-join__benefits,
	.stbp-join__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.stbp-join__actions .stbp-join-btn {
		width: 100%;
	}
}

/* L'attribut hidden l'emporte sur les display:flex/grid ci-dessus. */
.stbp-join-login[hidden],
.stbp-join[hidden],
.stbp-join [hidden],
.stbp-adherent-question[hidden] {
	display: none !important;
}

/* ==========================================================================
   Inscription à un congrès — « Vos centres d'intérêt » (2026-09-30)
   Cases à cocher + « En savoir plus » (fenêtre sur la page),
   cf. template-parts/checkout/event-interests.php
   ========================================================================== */

.stbp-reg-section--interets {
	padding-bottom: 22px;
}

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

.stbp-interests {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stbp-interest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	margin: 0;
	padding: 12px 14px;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-base), background-color var(--transition-base);
}

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

.stbp-interest__check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
}

.stbp-interest__check input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--color-primary-light);
	flex-shrink: 0;
}

.stbp-interest:has(input:checked) .stbp-interest__check {
	color: var(--color-primary-light);
}

.stbp-interest__more,
.stbp-interest__survey {
	padding: 4px 0;
	border: 0;
	background: none;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-primary-light);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.stbp-interest__more:hover,
.stbp-interest__more:focus-visible,
.stbp-interest__survey:hover,
.stbp-interest__survey:focus-visible {
	color: var(--color-primary-dark);
}

.stbp-interest__survey {
	flex-basis: 100%;
	text-align: left;
	color: var(--color-accent);
}

.stbp-interest__survey.is-done {
	color: var(--color-secondary);
}

.stbp-interest__survey[hidden] {
	display: none;
}

/* Fenêtre flottante */
.stbp-interest-dialog {
	width: min(820px, calc(100% - 32px));
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	padding: 0;
	border: 0;
	border-radius: 20px;
	box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3);
	overflow: hidden;
}

.stbp-interest-dialog[open] {
	display: flex;
}

.stbp-interest-dialog::backdrop {
	background: rgba(15, 23, 42, 0.55);
}

.stbp-interest-dialog__box {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}

.stbp-interest-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px 14px;
	border-bottom: 1px solid var(--color-border);
}

.stbp-interest-dialog__head--floating {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	padding: 12px;
	border: 0;
}

.stbp-interest-dialog__title {
	margin: 0;
	font-size: 21px;
	font-weight: 800;
	color: var(--color-primary-light);
}

.stbp-interest-dialog__close {
	display: flex;
	padding: 8px;
	border: 0;
	border-radius: 50%;
	background: var(--color-background-alt);
	color: var(--color-text-secondary);
	cursor: pointer;
}

.stbp-interest-dialog__close:hover,
.stbp-interest-dialog__close:focus-visible {
	background: var(--color-border);
}

.stbp-interest-dialog__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 20px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.stbp-interest-dialog__body > :first-child {
	margin-top: 0;
}

.stbp-interest-dialog__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 24px;
	border-top: 1px solid var(--color-border);
	background: var(--color-background-alt);
}

.stbp-interest-dialog__foot .stbp-join-btn {
	padding: 10px 20px;
}

/* Questionnaire dans la fenêtre : pas de cadre supplémentaire. */
.stbp-interest-dialog--survey .lab-survey {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
}

.stbp-interest-dialog--survey .lab-survey__head {
	padding-right: 44px;
}

html.stbp-dialog-open {
	overflow: hidden;
}

@media (max-width: 640px) {
	.stbp-interests {
		grid-template-columns: minmax(0, 1fr);
	}

	.stbp-interest-dialog {
		width: calc(100% - 16px);
		max-height: calc(100dvh - 16px);
		border-radius: 16px;
	}

	.stbp-interest-dialog__head,
	.stbp-interest-dialog__body,
	.stbp-interest-dialog__foot {
		padding-left: 16px;
		padding-right: 16px;
	}

	.stbp-interest-dialog__foot .stbp-join-btn {
		flex: 1 1 auto;
	}
}

/* --- Espace exposant (Mon compte, 2026-10-06) --- */
.stbp-exposant__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
	padding: 6px;
}

.stbp-exposant__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 8px;
}

.stbp-exposant__facts div {
	padding: 14px 16px;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	background: #fff;
}

.stbp-exposant__facts dt {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.stbp-exposant__facts dd {
	margin: 4px 0 0;
	font-weight: 700;
	color: var(--color-primary-darker);
	overflow-wrap: anywhere;
}

.stbp-exposant__note,
.stbp-exposant__intro,
.stbp-exposant__dates,
.stbp-exposant__empty {
	color: var(--color-text-secondary);
	font-size: 14px;
}

.stbp-exposant__note {
	margin: 0 0 22px;
}

.stbp-exposant h3 {
	margin: 26px 0 10px;
	font-size: 18px;
	color: var(--color-primary-darker);
}

.stbp-exposant__event {
	margin-top: 18px;
	padding: 18px 20px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: #fff;
}

.stbp-exposant__event h3 {
	margin-top: 0;
	margin-bottom: 2px;
}

.stbp-exposant__actions a + a {
	margin-left: 14px;
}

.stbp-exposant__pending {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stbp-exposant__pending li {
	padding: 10px 14px;
	margin-bottom: 8px;
	border-radius: 10px;
	background: #fff8e6;
}

.stbp-exposant__pending span {
	display: block;
	font-size: 13px;
	color: var(--color-text-muted);
}

.stbp-exposant__form {
	max-width: 560px;
}

.stbp-exposant__form select,
.stbp-exposant__form input[type="file"] {
	width: 100%;
}

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

/* Inscription — information sur le scan des badges (2026-10-06) */
.stbp-interests__privacy {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--color-text-muted);
}

/* Espace exposant — Mes visiteurs (2026-10-06) */
.stbp-exposant__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 14px 0;
}
.stbp-exposant__stats div {
	padding: 12px 14px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: #f7fbfd;
}
.stbp-exposant__stats strong {
	display: block;
	font-size: 24px;
	line-height: 1.2;
	color: var(--color-primary-darker);
}
.stbp-exposant__stats span {
	font-size: 13px;
	color: var(--color-text-secondary);
}
.stbp-exposant__table {
	width: 100%;
	font-size: 14px;
}
.stbp-exposant__table td {
	overflow-wrap: anywhere;
}
.stbp-exposant__muted {
	font-size: 12.5px;
	color: var(--color-text-muted);
}
@media (max-width: 600px) {
	.stbp-exposant__stats {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Formulaire d'inscription / paiement : champs à compléter (2026-10-09)
   Classe .stbp-field-invalid posée par assets/js/checkout-errors.js sur le
   bloc du champ (y compris les choix à boutons radio) ; .woocommerce-invalid
   est aussi posée par WooCommerce quand on quitte un champ obligatoire vide.
   ========================================================================== */

.woocommerce form .form-row.stbp-field-invalid,
.stbp-field-invalid {
	position: relative;
	border-radius: 10px;
	background-color: #fff5f5;
	box-shadow: 0 0 0 2px #d92d20;
	padding: 10px 12px;
}

.woocommerce form .form-row.woocommerce-invalid > label,
.stbp-field-invalid > label,
.stbp-field-invalid > legend {
	color: #b42318;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea,
.stbp-field-invalid input.input-text,
.stbp-field-invalid input[type="password"],
.stbp-field-invalid select,
.stbp-field-invalid textarea {
	border-color: #d92d20;
}

.stbp-reg-section .stbp-choice-cards.stbp-field-invalid input[type="radio"] + label {
	border-color: #f3a39b;
}

.checkout-inline-error-message {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: #b42318;
}

.checkout-inline-error-message strong {
	font-weight: 700;
}

/* Attire l'œil sur le premier champ à compléter, une fois. */
.stbp-field-flash {
	animation: stbp-field-flash 0.9s ease-out 1;
}

@keyframes stbp-field-flash {
	0% { box-shadow: 0 0 0 2px #d92d20, 0 0 0 0 rgba(217, 45, 32, 0.45); }
	60% { box-shadow: 0 0 0 2px #d92d20, 0 0 0 10px rgba(217, 45, 32, 0); }
	100% { box-shadow: 0 0 0 2px #d92d20, 0 0 0 0 rgba(217, 45, 32, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.stbp-field-flash {
		animation: none;
	}
}

/* Liste des erreurs en haut du formulaire : liens vers les champs. */
.woocommerce-NoticeGroup-checkout li[data-id] a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Adhérent reconnu par son e-mail (récapitulatif d'inscription, 2026-10-16) */
.stbp-review-member td { padding: 8px 0 12px !important; border: 0; }
.stbp-member-banner { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: #e8f6ee; border: 2px solid var(--color-secondary, #37aa67); color: #14532d; text-align: left; }
.stbp-member-banner strong { font-size: 1.05rem; font-weight: 800; color: #166534; }
.stbp-member-banner strong::before { content: "\2713"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--color-secondary, #37aa67); color: #fff; font-size: 13px; vertical-align: 1px; }
.stbp-member-banner span { font-size: 0.9rem; line-height: 1.45; font-weight: 500; }

/* Déjà inscrit(e) à l'événement (récapitulatif d'inscription, 2026-10-17) */
.stbp-review-duplicate td { padding: 8px 0 12px !important; border: 0; }
.stbp-dup-banner { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: #fef2f2; border: 2px solid #dc2626; color: #7f1d1d; text-align: left; }
.stbp-dup-banner strong { font-size: 1.05rem; font-weight: 800; color: #991b1b; }
.stbp-dup-banner strong::before { content: "!"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: #dc2626; color: #fff; font-size: 13px; font-weight: 800; vertical-align: 1px; }
.stbp-dup-banner span { font-size: 0.9rem; line-height: 1.45; font-weight: 500; }

/* Mon compte → Inscriptions : statut en pastille, preuve de paiement (2026-10-21) */
.stbp-order-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid; font-size: 0.8125rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.stbp-order-badge--pending { background: #fff4e0; border-color: #f5b041; color: #8a4b08; }
.stbp-order-badge--verification { background: #e7f1fb; border-color: #7fb2e0; color: #0c4f86; }
.stbp-order-badge--completed { background: #e6f6ec; border-color: #7cc79a; color: #14643a; }
.stbp-order-badge--sur-place, .stbp-order-badge--processing { background: #e5f5f8; border-color: #73c2d4; color: #0c5566; }
.stbp-order-badge--cancelled, .stbp-order-badge--failed { background: #fdecec; border-color: #ec9a9a; color: #9b1c1c; }
.stbp-order-badge--refunded, .stbp-order-badge--checkout-draft { background: #f1f3f5; border-color: #cbd2d9; color: #4b5563; }
.stbp-proof-banner { display: flex; flex-direction: column; gap: 4px; margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: #fff4e0; border: 2px solid #f5b041; color: #6b3a06; }
.stbp-proof-banner strong { font-size: 1rem; font-weight: 800; color: #8a4b08; }
.stbp-proof-banner span { font-size: 0.9rem; line-height: 1.45; }
.stbp-proof { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stbp-proof--account { max-width: 290px; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions { min-width: 250px; }
.woocommerce-account .woocommerce-orders-table__cell-order-summary { min-width: 180px; }
.stbp-proof__send { white-space: nowrap; }
.stbp-proof__form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.stbp-proof__file { width: 100%; max-width: 100%; font-size: 0.8125rem; }
.stbp-proof__file::file-selector-button { margin-right: 8px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.stbp-proof__send { padding: 10px 16px; border: 0; border-radius: 999px; background: #e8890c; color: #fff; font: inherit; font-size: 0.875rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(232, 137, 12, 0.28); }
.stbp-proof__send:hover, .stbp-proof__send:focus-visible { background: #c46f06; }
.stbp-proof.is-sent .stbp-proof__send { background: var(--color-primary-light); box-shadow: none; }
.stbp-proof__hint { color: var(--color-text-muted); font-size: 0.75rem; }
.stbp-proof__sent { margin: 0; color: #14643a; font-size: 0.875rem; font-weight: 700; }
.stbp-proof__more summary { cursor: pointer; color: var(--color-primary-light); font-size: 0.8125rem; font-weight: 600; }
.stbp-proof__more[open] summary { margin-bottom: 8px; }
.stbp-proof__msg { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; }
.stbp-proof__msg--ok { background: #e6f6ec; color: #14643a; }
.stbp-proof__msg--error { background: #fdecec; color: #9b1c1c; }
.stbp-proof__done { color: #14643a; font-weight: 700; font-size: 0.875rem; }
.stbp-proof__none { color: var(--color-text-muted); }
.stbp-proof--thankyou { margin: 24px 0; padding: 20px 22px; border: 2px solid #f5b041; border-radius: 14px; background: #fffaf1; }
.stbp-proof--thankyou.is-sent { border-color: #7cc79a; background: #f3fbf6; }
.stbp-proof__title { margin: 0; font-size: 1.15rem; color: #8a4b08; }
.stbp-proof__text { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.stbp-proof--thankyou .stbp-proof__form { flex-direction: row; flex-wrap: wrap; align-items: center; }
.stbp-proof--thankyou .stbp-proof__file { width: auto; flex: 1 1 260px; }
@media (max-width: 768px) {
  .stbp-proof--account { max-width: none; }
  .woocommerce-account .woocommerce-orders-table__cell-order-actions,
  .woocommerce-account .woocommerce-orders-table__cell-order-summary { min-width: 0; }
  .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { text-align: left; }
  .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before { float: none; display: block; margin-bottom: 8px; }
  .stbp-proof__send { width: 100%; white-space: normal; }
}

/* Mon adhésion : paiement de la cotisation par virement (2026-10-31) */
.stbp-mproof__bank{margin:0 0 18px;padding:16px 18px;border:1px solid #cfe3ec;border-left:4px solid var(--color-primary-light,#208baf);border-radius:10px;background:#f5fafc}
.stbp-mproof__lead{margin:0 0 10px}
.stbp-mproof__rib{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
.stbp-mproof__rib dt{font-weight:600;color:#5b6b75}
.stbp-mproof__rib dd{margin:0}
.stbp-mproof__rib-number{font-size:1.1em;letter-spacing:.03em}
.stbp-mproof .stbp-exercice__form label{display:block;font-weight:600;margin:14px 0 8px}
@media (max-width:560px){.stbp-mproof__rib{grid-template-columns:1fr;gap:2px}.stbp-mproof__rib dd{margin-bottom:8px}}