/* 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-hero */
/* ==========================================================================
   Hero slider
   ========================================================================== */

/* Plein écran à toutes les tailles (contrairement à la navbar juste
   au-dessus, qui elle est boxée à la largeur du container — cf. navbar.css).
   Référence LabtechCO, demande utilisateur 2026-09-20. */

/* Même chevauchement que .page-header sous la navbar (cf. page-header.css) :
   le slider passe derrière la moitié basse de la barre bleue (62.4px / 2 =
   31.2px), la navbar (z-index 200) restant au-dessus — demande utilisateur
   2026-09-21 (reproduire sur la home le décalage déjà en place sur les
   autres pages). */
.hero {
	position: relative;
	z-index: 1;
	margin-top: -31.2px;
}

.hero__viewport {
	position: relative;
	width: 100%;
	height: clamp(380px, 60vw, 560px);
}

/* Habillage clippé de l'image/dégradé, séparé de .hero__viewport : le panneau
   de texte (.hero__panel-wrap) a besoin, lui, de déborder sous l'image (cf.
   plus bas) sans être rogné par l'overflow. */
.hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Hauteur +50% sur mobile/tablette uniquement (desktop inchangé) — même seuil
   que le basculement Image Desktop/Mobile (cf. hero-slider.php). */
@media (max-width: 900px) {
	.hero__viewport {
		height: clamp(570px, 90vw, 840px);
	}
}

.hero__bg-picture {
	display: contents;
}

.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: opacity 0.35s ease;
}

.hero__bg.is-fading {
	opacity: 0;
}

.hero__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(8, 50, 64, 0.22) 0%, rgba(0, 0, 0, 0) 55%);
}

.hero__panel-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	pointer-events: none;
	z-index: 5;
}

.hero__panel-wrap .container {
	pointer-events: auto;
}

.hero__panel {
	width: min(390px, 90%);
	transition: opacity 0.35s ease;
}

/* Le panneau déborde sous l'image pour aligner son bas avec celui des flèches
   (.hero__arrows-bar, hauteur 52px) juste en dessous — comme sur la
   référence, où le bloc de texte "sort" du visuel plutôt que de s'arrêter à
   son bord. Seulement quand la barre de flèches existe (plusieurs slides). */
.hero__panel--overflow {
	transform: translateY(52px);
}

.hero__panel.is-fading {
	opacity: 0;
}

.hero__badge.is-hidden,
.hero__subtitle.is-hidden,
.hero__cta.is-hidden {
	display: none;
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-background);
	padding: 7px 16px;
	border-left: 4px solid var(--color-primary-light);
	font-size: 11px;
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hero__box {
	background-color: var(--color-primary-light);
	padding: clamp(20px, 3vw, 28px) clamp(16px, 2.5vw, 32px) clamp(24px, 3.5vw, 36px);
}

.hero__title {
	font-size: clamp(20px, 2.4vw, 30px);
	font-weight: 900;
	color: var(--color-background);
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin-bottom: 14px;
}

.hero__subtitle {
	font-size: clamp(13px, 1.1vw, 14px);
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.75;
	margin-bottom: 22px;
}

.hero__subtitle p {
	margin: 0;
}

.hero__subtitle p + p {
	margin-top: 0.6em;
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-background);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 2px solid rgba(255, 255, 255, 0.45);
	padding-bottom: 2px;
	transition: border-color var(--transition-base);
}

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

.hero__dots {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 10;
}

.hero__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-sm);
	background-color: rgba(255, 255, 255, 0.45);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: all 0.3s;
}

.hero__dot.is-active {
	width: 24px;
	background-color: var(--color-background);
}

.hero__arrows-bar {
	background-color: var(--color-background);
	display: flex;
}

.hero__arrows-inner {
	display: flex;
	justify-content: flex-end;
}

.hero__arrow {
	width: 56px;
	height: 52px;
	background-color: var(--color-primary);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-background);
	transition: background-color var(--transition-base);
	flex-shrink: 0;
}

.hero__arrow--next {
	background-color: var(--color-primary-light);
}

.hero__arrow:hover,
.hero__arrow:focus-visible {
	background-color: var(--color-primary-light);
}

.hero__arrow--next:hover,
.hero__arrow--next:focus-visible {
	background-color: var(--color-primary);
}

/* stbp-department-strip */
/* ==========================================================================
   DepartmentStrip — blocs d'accès rapide
   ========================================================================== */

.dept-strip {
	background-color: var(--color-background);
	padding: clamp(48px, 6vw, 72px) 0;
}

.dept-strip__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(32px, 5vw, 64px);
}

/* Carte avec inversion de couleur au survol (fond blanc -> bleu, textes
   sombres -> blancs), même logique que .mission-card (cf. about-section.css,
   section "Pourquoi rejoindre le syndicat") — demande utilisateur 2026-09-21. */
.dept-item {
	display: block;
	padding: clamp(24px, 3vw, 36px);
	border-radius: 0;
	background-color: var(--color-background);
	transition: background-color 0.25s;
}

.dept-item:hover,
.dept-item:focus-visible {
	background-color: var(--color-primary-light);
}

/* Icônes de marque (fournies par l'utilisateur, cf. department-strip.php) à
   76px, soit le double des icônes de contact de la navbar (38px — cf.
   navbar.css .navbar__contact-icon). Couleurs (bleu/fond bleu clair)
   factorisées ici plutôt que répétées dans le <style> de chaque SVG. */
.dept-item__icon {
	margin-bottom: 18px;
}

.dept-item__icon svg {
	width: 76px;
	height: 76px;
}

.dept-item__icon .cls-1 {
	fill: #208baf;
	transition: fill 0.25s;
}

.dept-item__icon .cls-2 {
	fill: #d9edf3;
	transition: fill 0.25s;
}

.dept-item:hover .dept-item__icon .cls-1,
.dept-item:focus-visible .dept-item__icon .cls-1 {
	fill: var(--color-background);
}

.dept-item:hover .dept-item__icon .cls-2,
.dept-item:focus-visible .dept-item__icon .cls-2 {
	fill: rgba(255, 255, 255, 0.25);
}

.dept-item__title {
	font-size: 17px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 12px;
	line-height: 1.3;
	letter-spacing: 0.01em;
	transition: color 0.25s;
}

.dept-item__desc {
	font-size: 14px;
	color: var(--color-text-muted);
	line-height: 1.65;
	margin-bottom: 18px;
	transition: color 0.25s;
}

.dept-item__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-primary-light);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: color 0.25s, gap 0.2s;
}

.dept-item:hover .dept-item__title,
.dept-item:focus-visible .dept-item__title {
	color: var(--color-background);
}

.dept-item:hover .dept-item__desc,
.dept-item:focus-visible .dept-item__desc {
	color: rgba(255, 255, 255, 0.72);
}

.dept-item:hover .dept-item__cta,
.dept-item:focus-visible .dept-item__cta {
	color: var(--color-background);
	gap: 10px;
}

@media (max-width: 768px) {
	.dept-strip__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

/* stbp-about-section */
/* ==========================================================================
   AboutSection — à propos + grille des missions
   ========================================================================== */

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

.about__intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto clamp(48px, 6vw, 72px);
}

.about__intro .section-title__eyebrow {
	margin-bottom: 18px;
}

.about__intro .section-title__heading {
	margin-bottom: 20px;
}

.about__lead {
	font-size: clamp(14px, 1.2vw, 16px);
	color: var(--color-text-muted);
	line-height: 1.8;
}

/* --- Grille missions --- */

.about-missions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1px, 0.15vw, 2px);
	background-color: var(--color-border);
}

.mission-card {
	background-color: var(--color-background);
	padding: clamp(24px, 3vw, 40px);
	transition: background-color 0.25s;
	position: relative;
	overflow: hidden;
}

.mission-card__num {
	position: absolute;
	top: 12px;
	right: 16px;
	font-size: 64px;
	font-weight: 900;
	color: var(--color-border-light);
	line-height: 1;
	pointer-events: none;
	transition: color 0.25s;
	user-select: none;
}

.mission-card__icon {
	color: var(--color-primary-light);
	margin-bottom: 16px;
	transition: color 0.25s;
}

.mission-card__title {
	font-size: 15px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 10px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	transition: color 0.25s;
}

.mission-card__desc {
	font-size: 13px;
	color: var(--color-text-muted);
	line-height: 1.65;
	transition: color 0.25s;
}

.mission-card:hover {
	background-color: var(--color-primary-light);
}

.mission-card:hover .mission-card__num {
	color: rgba(255, 255, 255, 0.12);
}

.mission-card:hover .mission-card__icon,
.mission-card:hover .mission-card__title {
	color: var(--color-background);
}

.mission-card:hover .mission-card__desc {
	color: rgba(255, 255, 255, 0.72);
}

/* --- CTA --- */

.about__cta-wrap {
	text-align: center;
	margin-top: clamp(32px, 4vw, 48px);
}

/* --- Responsive --- */

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

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

/* stbp-annuaire-section */
/* ==========================================================================
   AnnuaireSection — home ("Annuaire des biologistes et laboratoires")
   ========================================================================== */

/* Mise en page "We are the trusted experts / We keep things simple"
   (référence LabtechCO demo1). Reconstruite le 2026-09-22 à partir de mesures
   précises prises directement sur le site de référence (rects DOM +
   elementFromPoint pour vérifier l'empilement réel), après deux tentatives
   approximatives :
   - Le panneau bleu déborde jusqu'au bord GAUCHE de l'écran, et sa largeur
     s'arrête à 58.3% du container (mesuré : 682/1170) — PAS un simple 50/50.
   - La photo occupe le reste jusqu'au bord DROIT du container (pas de
     l'écran : elle ne déborde pas à droite, contrairement au panneau).
   - La photo chevauche le panneau sur sa gauche (~11.1% du container) ET
     déborde par le HAUT au-dessus de la ligne panneau/photo (~27% de sa
     hauteur) pour venir affleurer le titre. Vérifié via elementFromPoint que
     c'est le PANNEAU qui est au-dessus dans la zone de chevauchement
     gauche (z-index panneau > photo), pas l'inverse. */

.annuaire-home {
	background-color: var(--color-background);
	padding-top: clamp(56px, 7vw, 96px);
}

.annuaire-home .section-title {
	margin-bottom: clamp(24px, 3vw, 40px);
}

/* Le titre ne doit jamais toucher la photo qui déborde par le haut à droite
   (cf. .annuaire-home__media-photo) : largeur limitée pour forcer un retour
   à la ligne bien avant la zone de chevauchement (demande utilisateur
   2026-09-22). Uniquement au-delà de 900px : en dessous, la photo repasse en
   flux normal (cf. media query plus bas), pas de risque de contact. */
@media (min-width: 901px) {
	.annuaire-home .section-title__heading {
		max-width: 560px;
	}
}

.annuaire-home__row {
	display: grid;
	grid-template-columns: calc(max(var(--container-padding), (100vw - var(--container-width)) / 2 + var(--container-padding)) + var(--container-width) * 0.583) 1fr;
	align-items: stretch;
	padding-right: max(var(--container-padding), calc((100vw - var(--container-width)) / 2 + var(--container-padding)));
}

.annuaire-home__panel {
	position: relative;
	z-index: 2;
	background-color: var(--color-primary-light);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(40px, 6vw, 64px);
	padding-right: clamp(32px, 5vw, 64px);
	padding-left: max(var(--container-padding), calc((100vw - var(--container-width)) / 2 + var(--container-padding)));
}

.annuaire-home__panel-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--color-background);
	line-height: 1.3;
	margin-bottom: 14px;
}

.annuaire-home__lead {
	font-size: 15px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.82);
	max-width: 48ch;
	margin-bottom: 28px;
}

/* --- KPI --- */

.annuaire-home__kpis {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 36px);
	margin-bottom: 32px;
}

.annuaire-home__kpi-value {
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 900;
	color: var(--color-background);
	line-height: 1;
	letter-spacing: -0.02em;
}

.annuaire-home__kpi-label {
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.72);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 8px;
	max-width: 16ch;
}

/* --- CTA --- */

.annuaire-home__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	background-color: var(--color-background);
	color: var(--color-primary-light);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
	padding: 14px 30px;
	border-radius: var(--radius-sm);
	transition: all var(--transition-base);
}

.annuaire-home__cta:hover,
.annuaire-home__cta:focus-visible {
	background-color: var(--color-secondary);
	color: var(--color-background);
	transform: translateY(-1px);
}

/* --- Photo : chevauche le panneau à gauche, déborde par le haut,
   s'arrête au bord droit du container (pas de l'écran) --- */

.annuaire-home__media {
	position: relative;
	z-index: 1;
}

.annuaire-home__media-photo {
	/* right/bottom ancrés + width/height explicites (plutôt que left+right
	   avec width:auto) : sur un élément remplacé (<img>) positionné en
	   absolute, laisser le navigateur déduire une dimension "auto" à partir
	   des 4 offsets se heurte à l'algorithme de rendu des éléments remplacés
	   (résultat imprévisible avec object-fit) — mieux vaut fixer explicitement
	   width/height. */
	position: absolute;
	right: 0;
	bottom: 0;
	width: calc(100% + 0.111 * var(--container-width));
	max-width: none; /* la règle globale img{max-width:100%} (base.css) bridait sinon la largeur calculée ci-dessus */
	height: 127%;
	object-fit: cover;
}

/* --- Responsive : mobile-first, cf. §9 --- */

@media (max-width: 900px) {
	.annuaire-home__row {
		display: flex;
		flex-direction: column;
		padding-right: 0;
	}

	.annuaire-home__panel {
		width: 100%;
		padding-inline: var(--container-padding);
		text-align: center;
		align-items: center;
	}

	.annuaire-home__lead {
		margin-left: auto;
		margin-right: auto;
	}

	.annuaire-home__kpis {
		justify-content: center;
	}

	.annuaire-home__kpi-label {
		max-width: none;
	}

	.annuaire-home__media {
		order: -1;
		height: 280px;
	}

	.annuaire-home__media-photo {
		position: static;
		width: 100%;
		height: 100%;
	}
}

/* stbp-cta-banner */
/* ==========================================================================
   CTABanner — bannière d'adhésion
   ========================================================================== */

.cta-banner {
	background-color: var(--color-primary-light);
	padding: clamp(56px, 7vw, 96px) clamp(16px, 3vw, 40px);
	position: relative;
	overflow: hidden;
}

.cta-banner__circle {
	position: absolute;
	border-radius: var(--radius-circle);
	border: 1px solid rgba(255, 255, 255, 0.06);
	pointer-events: none;
}

.cta-banner__circle--top {
	top: -100px;
	right: -100px;
	width: 440px;
	height: 440px;
}

.cta-banner__circle--bottom {
	bottom: -60px;
	left: 8%;
	width: 280px;
	height: 280px;
	border-color: rgba(255, 255, 255, 0.05);
}

.cta-banner__inner {
	max-width: var(--container-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	position: relative;
	z-index: 1;
}

.cta-banner__content {
	max-width: 620px;
}

.cta-banner__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-pill);
	padding: 6px 16px;
	margin-bottom: 24px;
}

.cta-banner__badge span {
	color: rgba(255, 255, 255, 0.9);
	font-size: 13px;
	font-weight: 600;
}

.cta-banner__title {
	font-size: clamp(26px, 3.2vw, 46px);
	font-weight: 900;
	color: var(--color-background);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: 20px;
}

.cta-banner__lead {
	font-size: clamp(14px, 1.2vw, 17px);
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.7;
	margin-bottom: 32px;
}

.cta-banner__benefits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 20px;
	margin-bottom: 40px;
}

.cta-benefit {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.88);
	font-weight: 500;
}

.cta-benefit__check {
	width: 18px;
	height: 18px;
	border-radius: var(--radius-circle);
	background-color: rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}

.cta-banner__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.cta-banner__btn {
	font-size: 14px;
	padding: 14px 32px;
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all var(--transition-base);
}

.cta-banner__btn--primary {
	background-color: var(--color-background);
	color: var(--color-primary-light);
	font-weight: 800;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.cta-banner__btn--primary:hover,
.cta-banner__btn--primary:focus-visible {
	background-color: var(--color-secondary);
	color: var(--color-background);
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.cta-banner__btn--outline {
	background-color: transparent;
	color: var(--color-background);
	font-weight: 600;
	padding: 14px 28px;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.cta-banner__btn--outline:hover,
.cta-banner__btn--outline:focus-visible {
	border-color: var(--color-background);
	background-color: rgba(255, 255, 255, 0.08);
}

/* --- Carte cotisation --- */

.cta-banner__card-wrap {
	flex-shrink: 0;
	margin-right: 80px;
}

.cta-card__box {
	background-color: #d6edf5;
	border: 1px solid rgba(32, 139, 175, 0.15);
	border-radius: var(--radius-md);
	padding: 36px 32px;
	min-width: 300px;
	color: var(--color-primary-darker);
}

.cta-card__label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #5a93a8;
	margin-bottom: 8px;
}

.cta-card__price {
	font-size: 52px;
	font-weight: 900;
	line-height: 1;
	margin-bottom: 4px;
	color: var(--color-primary-light);
}

.cta-card__price span {
	font-size: 24px;
	font-weight: 700;
}

.cta-card__period {
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 28px;
}

.cta-card__divider {
	height: 1px;
	background-color: rgba(32, 139, 175, 0.15);
	margin-bottom: 24px;
}

.cta-card__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--color-primary-dark);
	margin-bottom: 12px;
}

.cta-card__item svg {
	color: var(--color-secondary);
	flex-shrink: 0;
}

.cta-card__submit {
	display: block;
	width: 100%;
	margin-top: 28px;
	padding: 14px;
	background-color: var(--color-primary-light);
	color: var(--color-background);
	border: none;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 800;
	text-align: center;
	cursor: pointer;
	font-family: var(--font-family-base);
	transition: background-color var(--transition-base);
}

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

/* --- Responsive --- */

@media (max-width: 900px) {
	.cta-grid {
		flex-direction: column;
		align-items: center;
	}

	.cta-card {
		min-width: unset;
		width: 100%;
		max-width: 420px;
		margin-right: 0;
	}

	.cta-benefits {
		grid-template-columns: 1fr;
	}
}

/* stbp-testimonial-stats */
/* ==========================================================================
   TestimonialStats — témoignages + KPI
   ========================================================================== */

.testimonial-stats__spacer {
	height: clamp(32px, 5vw, 64px);
	background-color: var(--color-background-alt);
}

/* Mise en page centrée reprise du site de référence LabtechCO — demo3 (About
   Us) : titre centré, avatar circulaire centré, citation centrée, auteur
   centré, flèches aux extrémités gauche/droite du container (demande
   utilisateur 2026-09-22, remplace la version précédente inspirée de la
   demo2 — grande photo à gauche + texte à droite). */

.testimonial {
	background-color: var(--color-background);
	padding-block: clamp(56px, 7vw, 88px);
}

.testimonial .section-title {
	margin-bottom: clamp(32px, 4vw, 48px);
}

.testimonial__carousel {
	position: relative;
	max-width: 760px;
	margin-inline: auto;
}

.testimonial__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.testimonial__avatar {
	margin-bottom: 24px;
}

.testimonial__avatar img {
	width: 110px;
	height: 110px;
	border-radius: var(--radius-circle);
	object-fit: cover;
	object-position: center top;
}

.testimonial__quote {
	margin: 0 0 24px;
	font-size: clamp(16px, 1.8vw, 22px);
	color: var(--color-primary-darker);
	font-style: italic;
	font-weight: 500;
	line-height: 1.7;
}

.testimonial__name {
	font-size: 13px;
	font-weight: 800;
	color: var(--color-primary-light);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 4px;
}

.testimonial__role {
	font-size: 13px;
	color: var(--color-text-muted);
}

/* Flèches nues (pas de cercle ni de fond) aux extrémités gauche/droite,
   centrées verticalement sur le bloc avatar+citation. */
.testimonial__nav-btn {
	position: absolute;
	top: 90px;
	width: auto;
	height: auto;
	padding: 2px;
	border: none;
	border-radius: 0;
	background-color: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-light);
	transition: color var(--transition-base);
}

.testimonial__nav-btn--prev {
	left: clamp(-56px, -6vw, 0px);
}

.testimonial__nav-btn--next {
	right: clamp(-56px, -6vw, 0px);
}

.testimonial__nav-btn:hover,
.testimonial__nav-btn:focus-visible {
	background-color: transparent;
	color: var(--color-primary-light);
}

/* --- Barre KPI --- */

/* .stats-bar est désormais dans sa propre section (stats-section.php,
   remontée juste après "À propos" sur la home) : le rythme vertical vient de
   .stats-section ci-dessous plutôt que d'une marge calée sur le témoignage. */
.stats-section {
	padding: clamp(40px, 5vw, 64px) 0;
}

.stats-bar {
	background-color: var(--color-background);
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.stats-item {
	text-align: center;
	padding: clamp(32px, 4vw, 52px) clamp(16px, 2vw, 24px);
}

.stats-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 14px;
	color: var(--color-primary-light);
}

.stats-item__icon svg {
	width: 56px;
	height: 56px;
}

.stats-item__value {
	font-size: clamp(40px, 5vw, 68px);
	font-weight: 900;
	color: var(--color-primary-light);
	line-height: 1;
	letter-spacing: -0.03em;
}

.stats-item__label {
	font-size: 11px;
	font-weight: 700;
	color: var(--color-text-light);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-top: 10px;
}

/* Note "données estimatives" (astérisque des chiffres de la présentation
   institutionnelle, cf. stbp_key_figures()). */
.stats-section__note {
	margin: 4px 0 0;
	text-align: center;
	font-size: 12px;
	font-style: italic;
	color: var(--color-text-light);
}

/* --- Responsive --- */

@media (max-width: 768px) {
	/* Flèches sous le contenu plutôt qu'aux extrémités de l'écran (pas assez
	   de place à côté du bloc centré en mobile). */
	.testimonial__carousel {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.testimonial__content {
		order: 1;
	}

	.testimonial__nav-btn {
		position: static;
		order: 2;
		margin-top: 12px;
	}

	.stats-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* stbp-partners-section */
/* ==========================================================================
   PartnersSection — bandeau défilant
   ========================================================================== */

@keyframes stbp-marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.partners {
	background-color: var(--color-background);
	padding: clamp(80px, 10vw, 128px) 0;
	border-top: 1px solid var(--color-border);
}

.partners__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.partners__header .section-title__heading {
	letter-spacing: -0.01em;
}


/* --- Défilement infini --- */

.partners__marquee-wrap {
	overflow: hidden;
	position: relative;
}

.partners__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}

.partners__fade--left {
	left: 0;
	background: linear-gradient(to right, var(--color-background), transparent);
}

.partners__fade--right {
	right: 0;
	background: linear-gradient(to left, var(--color-background), transparent);
}

.partners__track {
	display: flex;
	align-items: center;
	gap: 0;
	width: max-content;
	animation: stbp-marquee var(--stbp-marquee-duration, 60s) linear infinite;
}

.partners__track:hover {
	animation-play-state: paused;
}

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

.partner-item {
	flex-shrink: 0;
	width: clamp(190px, 16vw, 260px);
	padding: clamp(16px, 2vw, 24px) clamp(16px, 2vw, 28px);
	border-right: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background-color var(--transition-base);
}

.partner-item:hover {
	background-color: #f3f9fb;
}

.partner-item__logo {
	width: 100%;
	max-width: 171px;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 900;
	border: 1.5px solid transparent;
}

.partner-item__logo--blue {
	background-color: #208baf12;
	color: var(--color-primary-light);
	border-color: #208baf20;
}

.partner-item__logo--green {
	background-color: #37aa6712;
	color: var(--color-secondary);
	border-color: #37aa6720;
}

.partner-item__logo--amber {
	background-color: #f59e0b18;
	color: var(--color-accent);
	border-color: #f59e0b20;
}

.partner-item__logo-image {
	width: 100%;
	max-width: 171px;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.partner-item__logo-image img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.partner-item__category {
	font-size: 10px;
	font-weight: 600;
	color: var(--color-text-light);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* stbp-news-section */
/* ==========================================================================
   NewsSection — dernières actualités
   ========================================================================== */

/* Fond blanc (plus bleu) et espace ajouté avant la section, au-dessus des
   témoignages (demande utilisateur 2026-09-21, inspiration LabtechCO). */
.news {
	background-color: var(--color-background);
	padding: clamp(88px, 9vw, 128px) 0 clamp(56px, 7vw, 96px);
}

.news__header {
	margin-bottom: clamp(28px, 4vw, 48px);
}

.news__header .section-title__eyebrow {
	margin-bottom: 14px;
}

.news__header .section-title__heading {
	letter-spacing: 0.02em;
}

/* --- Grille cartes --- */

/* Architecture reprise du site de référence LabtechCO — demo1, section
   "Latest News & Blogs" (demande utilisateur 2026-09-22) : image large
   (ratio 3:2, pas de crop carré/portrait), ligne date sous l'image. Ajusté le
   2026-09-22 : plus de ruban/icône dans le coin (supprimé), et la carte est
   maintenant entourée d'un contour fin — même épaisseur/couleur que le trait
   séparant l'extrait du pied de page (cf. .news-card__footer plus bas). */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(28px, 3.5vw, 48px);
	margin-bottom: clamp(28px, 4vw, 44px);
}

.news-card {
	border: 1px solid var(--color-border-light);
	cursor: pointer;
}

.news-card__media {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--color-border-light);
}

.news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.news-card:hover .news-card__media img,
.news-card:focus-within .news-card__media img {
	transform: scale(1.05);
}

.news-card__tag {
	position: absolute;
	top: 0;
	right: 0;
	color: var(--color-background);
	font-size: 10px;
	font-weight: 700;
	padding: 5px 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.news-card__tag--blue {
	background-color: #5fb6d3;
}

.news-card__tag--green {
	background-color: var(--color-secondary);
}

.news-card__tag--amber {
	background-color: var(--color-accent);
}

.news-card__body {
	padding: 22px 10px;
}

.news-card__meta {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-primary-light);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.news-card__title {
	font-size: clamp(17px, 1.35vw, 20px);
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 12px;
}

.news-card__title a {
	color: var(--color-primary-darker);
	transition: color var(--transition-base);
}

.news-card__title a:hover,
.news-card__title a:focus-visible {
	color: var(--color-primary-light);
}

.news-card__excerpt {
	font-size: 14px;
	color: var(--color-text-muted);
	line-height: 1.7;
	margin-bottom: 20px;
}

.news-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 18px;
	border-top: 1px solid var(--color-border-light);
}

.news-card__link {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-primary-darker);
	display: flex;
	align-items: center;
	gap: 6px;
	transition: color var(--transition-base);
}

.news-card__link:hover,
.news-card__link:focus-visible {
	color: var(--color-primary-light);
}

.news-card__duration {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--color-text-light);
}

/* --- Bouton "voir tout" --- */

.news__more-wrap {
	display: flex;
	justify-content: center;
}

/* --- Archive (page dédiée /actualites/) --- */

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

.news-archive__grid {
	margin-bottom: clamp(32px, 4vw, 48px);
}

/* --- Article individuel (/actualites/mon-article/) --- */

.single-actualite__hero {
	height: clamp(220px, 40vw, 420px);
	overflow: hidden;
}

.single-actualite__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-actualite__container {
	max-width: 760px;
	padding-top: clamp(32px, 4vw, 48px);
	padding-bottom: clamp(48px, 6vw, 80px);
}

.single-actualite__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.single-actualite__badge {
	position: static;
}

/* --- Responsive --- */

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

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

/* ==========================================================================
   Communiqués publics / réservés aux adhérents (2026-10-09)
   ========================================================================== */

/* Filtres de la page Communiqués */
.news-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(24px, 3vw, 36px);
}

.news-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--color-icon-border);
	border-radius: var(--radius-pill);
	background-color: var(--color-background);
	color: var(--color-primary-dark);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.news-filter:hover,
.news-filter:focus-visible {
	border-color: var(--color-primary);
}

.news-filter.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-background);
}

.news-filter__count {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: var(--radius-pill);
	background-color: var(--color-background-tint);
	color: var(--color-primary-dark);
	font-size: 12px;
	text-align: center;
}

.news-filter.is-active .news-filter__count {
	background-color: rgba(255, 255, 255, 0.22);
	color: var(--color-background);
}

/* Pastille « Réservé aux adhérents » */
.news-card__media {
	position: relative;
}

.news-card__access {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: var(--radius-pill);
	background-color: #fef3c7;
	color: #92400e;
	font-size: 12px;
	font-weight: 700;
}

.news-card__access--inline {
	position: static;
}

/* Bouton cadenas (non-adhérent), comme les conventions */
.news-card__footer--locked {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.news-card__lock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1.5px solid var(--color-primary);
	border-radius: var(--radius-pill);
	color: var(--color-primary);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.news-card__lock:hover,
.news-card__lock:focus-visible {
	background-color: var(--color-primary);
	color: var(--color-background);
}

.news-card__login {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary-dark);
	text-align: center;
}