/*!
 * VETA EXPERT — feuille de style du thème.
 *
 * FICHIER GÉNÉRÉ — ne pas modifier à la main.
 * Sources : src/styles/*.css et src/components/*.css (maquette React approuvée).
 * Régénérer : node wordpress/tools/build-assets.mjs
 */

/* ==========================================================
   src/styles/tokens.css
   ========================================================== */

/**
 * Système visuel VETA EXPERT.
 * Palette extraite du logo : bleu marine profond, bleu/teal, blanc et accent jaune chaud.
 */

:root {
  /* Bleu marine (texte « VETA », base de marque) */
  --navy-900: #0d2544;
  --navy-800: #123255;
  --navy-700: #1a4272;
  --navy-600: #24548c;

  /* Bleu / teal (croissant bleu du logo) */
  /* --blue-600 sert aussi aux petits textes : assombri pour respecter un contraste AA (>= 4.5:1). */
  --blue-600: #24608f;
  --blue-500: #3d8dc4;
  --blue-400: #63a6d3;
  --blue-200: #b9d9ec;
  --blue-100: #dcecf6;
  --blue-050: #eef6fb;

  /* Accent jaune (croissant jaune du logo) — usage restreint */
  --orange-600: #c2700a;
  --orange-500: #ff9d02;
  --orange-400: #ffb851;
  --orange-100: #fff0da;

  /* Neutres */
  --white: #ffffff;
  --grey-050: #f6f9fc;
  --grey-100: #eef2f7;
  --grey-200: #dfe6ee;
  --grey-300: #c6d1de;
  --grey-500: #6b7a8d;
  --grey-600: #556376;
  --grey-800: #2c3746;

  /* WhatsApp : vert assombri pour garantir le contraste du texte blanc */
  --whatsapp: #0b6b55;
  --whatsapp-dark: #084f3f;

  /* Rôles sémantiques */
  --color-bg: var(--white);
  --color-bg-alt: var(--grey-050);
  --color-surface: var(--white);
  --color-border: var(--grey-200);
  --color-text: var(--navy-900);
  --color-text-muted: var(--grey-600);
  --color-text-invert: var(--white);
  --color-primary: var(--navy-700);
  --color-accent: var(--orange-500);
  --color-focus: var(--blue-500);
  --color-error: #b42318;

  /* ---------------------------------------------------------------
     Accents par famille de catalogue.
     Tous les visuels de catégorie reposent sur un fond bleu marine :
     l'accent ne sert qu'au filigrane, au liseré et à la pastille,
     ce qui garantit un contraste AA quelle que soit la famille.
     --------------------------------------------------------------- */
  --accent-hygiene-sanitaire: #63a6d3;
  --accent-produits-hygiene: #9fc3e0;
  --accent-epi: #ff9d02;
  --accent-autres-solutions: #3fb3c9;

  --tint-hygiene-sanitaire: #dcecf6;
  --tint-produits-hygiene: #e3eaf3;
  --tint-epi: #fff0da;
  --tint-autres-solutions: #dbeef2;

  /* Typographie */
  --font-sans: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-md: 1.075rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.15rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.4vw, 3.1rem);

  /* Espacements */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 4rem;
  --space-9: 5.5rem;

  /* Formes et profondeur */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(13, 37, 68, 0.06), 0 1px 3px rgba(13, 37, 68, 0.05);
  --shadow-md: 0 4px 14px rgba(13, 37, 68, 0.08);
  --shadow-lg: 0 18px 40px rgba(13, 37, 68, 0.14);

  /* Gabarit
     Le conteneur suit la largeur de l'écran sur les grands moniteurs afin
     d'éviter les larges bandes vides autour du catalogue. */
  --container: min(1560px, 94vw);
  --container-narrow: 820px;
  /* Seule la barre de navigation est collante : hauteur utilisée pour scroll-padding. */
  --navbar-height: 52px;
  --transition: 180ms ease;

  /* Trames décoratives (visuels de catégorie, bannières) */
  --pattern-dots: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.6px);
  --pattern-hatch: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0 2px,
    transparent 2px 9px
  );
}

/* ==========================================================
   src/styles/global.css
   ========================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-height) + var(--space-4));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-3);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--navy-900);
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
}
h2 {
  font-size: var(--text-2xl);
}
h3 {
  font-size: var(--text-lg);
}

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

a {
  color: var(--navy-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--blue-600);
}

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

ul {
  margin: 0 0 var(--space-4);
  padding-left: 1.15rem;
}

li {
  margin-bottom: var(--space-2);
}

button {
  font: inherit;
  cursor: pointer;
}

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

/* Focus clavier visible sur toute la page */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Utilitaires de mise en page ---------- */

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

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-8);
}

.section--tight {
  padding-block: var(--space-7);
}

.section--alt {
  background-color: var(--color-bg-alt);
  border-block: 1px solid var(--color-border);
}

.grid {
  display: grid;
  gap: var(--space-5);
}

/* auto-fit (et non auto-fill) : les colonnes vides sont fusionnées,
   les cartes occupent donc toute la largeur disponible sans laisser de vide. */
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.lead {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-600);
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--orange-500);
}

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

.grid--tiles {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--space-5);
}

/**
 * Grille à rangées toujours complètes : le nombre de colonnes vient de
 * src/lib/gridColumns.ts et divise exactement le nombre d'éléments, ce qui
 * évite les grands vides en fin de rangée sur les écrans larges.
 */
.grid--cols {
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .grid--cols {
    grid-template-columns: repeat(var(--cols-md, 2), minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .grid--cols {
    grid-template-columns: repeat(var(--cols-lg, 3), minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .grid--cols {
    grid-template-columns: repeat(var(--cols-xl, 4), minmax(0, 1fr));
  }
}

/* En-tête de bloc catalogue : titre à gauche, action à droite */
.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.block-head__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-lg);
}

.block-head__title::before {
  content: '';
  width: 5px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--accent, var(--orange-500));
}

.block-head__meta {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--grey-600);
  white-space: nowrap;
}

.block-head__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy-700);
  text-decoration: none;
  white-space: nowrap;
}

.block-head__link:hover {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Pastille de famille : fond teinté + texte marine (contraste toujours suffisant) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--tint, var(--grey-100));
  color: var(--navy-900);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.5;
}

.badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, var(--blue-500));
}

.mx-auto {
  margin-inline: auto;
}

/* Accessibilité : contenu réservé aux lecteurs d'écran */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background: var(--navy-900);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition);
}

.skip-link:focus {
  top: var(--space-4);
  color: var(--white);
}

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

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

/* ==========================================================
   src/components/Button.css
   ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

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

.btn:active {
  transform: translateY(0);
}

.btn__icon {
  flex: none;
}

/* Variantes */
.btn--primary {
  background-color: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background-color: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
}

.btn--accent {
  background-color: var(--orange-500);
  border-color: var(--orange-500);
  color: var(--navy-900);
  box-shadow: var(--shadow-sm);
}

.btn--accent:hover {
  background-color: var(--orange-400);
  border-color: var(--orange-400);
  color: var(--navy-900);
}

.btn--whatsapp {
  background-color: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn--whatsapp:hover {
  background-color: var(--whatsapp-dark);
  border-color: var(--whatsapp-dark);
  color: var(--white);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--grey-300);
  color: var(--navy-800);
}

.btn--outline:hover {
  border-color: var(--navy-700);
  background-color: var(--blue-050);
  color: var(--navy-800);
}

.btn--outline-invert {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.btn--outline-invert:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  color: var(--white);
}

.btn--quiet {
  padding: 0.5rem 0;
  background: none;
  color: var(--navy-700);
  font-weight: 700;
}

.btn--quiet:hover {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Tailles */
.btn--sm {
  padding: 0.55rem 0.9rem;
  font-size: var(--text-xs);
}

.btn--lg {
  padding: 1rem 1.75rem;
  font-size: var(--text-base);
}

.btn--block {
  width: 100%;
}

@media (max-width: 480px) {
  .btn--lg {
    width: 100%;
  }
}

/* ==========================================================
   src/components/SearchBar.css
   ========================================================== */

.search {
  display: flex;
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
  transition: border-color var(--transition);
}

.search:hover {
  border-color: var(--grey-500);
}

.search:focus-within {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(61, 141, 196, 0.18);
}

.search__field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  border: 0;
  background: transparent;
  font-size: var(--text-sm);
}

.search__field:focus {
  outline: none;
}

.search__field::placeholder {
  color: var(--grey-500);
}

/* Masque la croix native de Chrome, redondante avec le bouton d'envoi */
.search__field::-webkit-search-cancel-button {
  appearance: none;
}

.search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: none;
  padding-inline: var(--space-4);
  border: 0;
  background: var(--navy-700);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background-color var(--transition);
}

.search__submit:hover {
  background: var(--navy-800);
}

.search__submit-label {
  display: none;
}

@media (min-width: 1040px) {
  .search__submit-label {
    display: inline;
  }
}

.search--block {
  max-width: none;
}

/* ==========================================================
   src/components/Header.css
   ========================================================== */

/* =========================================================
   En-tête catalogue à trois niveaux :
   1. barre utilitaire (coordonnées)
   2. barre principale (logo, recherche, contact, devis)
   3. barre de navigation collante (+ menu des catégories)
   ========================================================= */

.header {
  position: relative;
  z-index: 100;
  background: var(--white);
}

/* ---------- 1. Barre utilitaire ---------- */
.utility {
  background: var(--navy-900);
  color: var(--blue-100);
  font-size: var(--text-xs);
}

.utility__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  min-height: 38px;
  padding-block: var(--space-1);
}

.utility__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--blue-100);
}

.utility__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
}

.utility__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.utility__link:hover {
  color: var(--orange-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.utility__link svg {
  color: var(--orange-500);
}

/* ---------- 2. Barre principale ---------- */
.masthead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.masthead__logo {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

.masthead__logo img {
  height: 52px;
  width: auto;
}

.masthead__search {
  display: flex;
  justify-content: center;
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Bloc téléphone façon e-commerce B2B */
.masthead__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.masthead__phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  color: var(--navy-700);
  transition: background-color var(--transition);
}

.masthead__phone:hover .masthead__phone-icon {
  background: var(--blue-100);
}

.masthead__phone-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--grey-600);
}

.masthead__phone-value {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy-900);
}

/* Actions mobiles (affichées sous 1024px) */
.masthead__mobile {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--navy-800);
  transition:
    background-color var(--transition),
    border-color var(--transition);
}

.icon-button:hover {
  background: var(--blue-050);
  border-color: var(--blue-200);
}

.icon-button--whatsapp {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--white);
}

.icon-button--whatsapp:hover {
  background: var(--whatsapp-dark);
  border-color: var(--whatsapp-dark);
  color: var(--white);
}

/* ---------- 3. Barre de navigation ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 99;
  background: var(--navy-800);
  box-shadow: 0 2px 10px rgba(13, 37, 68, 0.18);
}

.navbar__inner {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  min-height: var(--navbar-height);
}

.navbar__list {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar__list li {
  margin: 0;
}

.navbar__link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding-inline: var(--space-4);
  color: var(--blue-100);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition:
    background-color var(--transition),
    color var(--transition);
}

.navbar__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.navbar__link.is-active {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-bottom-color: var(--orange-500);
}

/* Bouton « Toutes nos catégories » */
.megabtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  border: 0;
  background: var(--navy-900);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background-color var(--transition);
}

.megabtn:hover {
  background: var(--navy-700);
}

.megabtn__chevron {
  transition: transform var(--transition);
}

.megabtn[aria-expanded='true'] .megabtn__chevron {
  transform: rotate(180deg);
}

/* ---------- Méga-menu des catégories ---------- */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 98;
  background: var(--white);
  border-bottom: 3px solid var(--orange-500);
  box-shadow: var(--shadow-lg);
}

.mega__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  padding-block: var(--space-6);
}

.mega__col-title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.mega__col-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--tint, var(--blue-050));
  color: var(--navy-800);
}

.mega__col-title h3 {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.35;
}

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

.mega__list li {
  margin-bottom: var(--space-1);
}

.mega__list a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--grey-800);
  font-size: var(--text-sm);
  text-decoration: none;
  transition:
    background-color var(--transition),
    color var(--transition);
}

.mega__list a:hover {
  background: var(--blue-050);
  color: var(--navy-800);
}

.mega__list svg {
  flex: none;
  color: var(--accent, var(--blue-500));
}

.mega__footer {
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--grey-050);
}

.mega__footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* ---------- Panneau mobile ---------- */
.mobile-panel {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--navy-900);
}

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

.mobile-panel__inner {
  padding-block: var(--space-4) var(--space-5);
}

.mobile-panel__search {
  margin-bottom: var(--space-4);
}

.mobile-panel__nav {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-4);
}

.mobile-panel__link {
  padding: 0.8rem var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--blue-100);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
}

.mobile-panel__link:hover,
.mobile-panel__link.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

/* « Toutes nos catégories » sur mobile : même menu, en accordéon */
.panel-mega {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0.85rem var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--orange-500);
  color: var(--navy-900);
  font-size: var(--text-sm);
  font-weight: 700;
}

.panel-mega:hover {
  background: var(--orange-400);
}

.panel-mega__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.panel-mega__chevron {
  transition: transform var(--transition);
}

.panel-mega__chevron.is-open {
  transform: rotate(180deg);
}

.mfam-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.mfam {
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.mfam__head {
  display: flex;
  align-items: stretch;
}

.mfam__link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-3);
  padding: 0.75rem var(--space-3);
  border-left: 3px solid var(--accent, var(--blue-500));
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.mfam__link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.mfam__count {
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: var(--blue-100);
  font-size: var(--text-xs);
  font-weight: 700;
}

.mfam__toggle {
  flex: none;
  width: 48px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--blue-100);
}

.mfam__toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.mfam__toggle svg {
  margin-inline: auto;
  transition: transform var(--transition);
}

.mfam__toggle svg.is-open {
  transform: rotate(180deg);
}

.mfam__items {
  margin: 0;
  padding: var(--space-2) 0 var(--space-3);
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mfam__items li {
  margin: 0;
}

.mfam__items a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem var(--space-4) 0.55rem var(--space-5);
  color: var(--blue-100);
  font-size: var(--text-sm);
  text-decoration: none;
}

.mfam__items a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.mfam__items svg {
  flex: none;
  color: var(--accent, var(--blue-400));
}

/* ---------- Points de rupture ---------- */
@media (max-width: 1023px) {
  .masthead {
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
  }

  .masthead__search,
  .masthead__actions {
    display: none;
  }

  .masthead__mobile {
    display: flex;
    justify-content: flex-end;
  }

  .navbar__list,
  .megabtn {
    display: none;
  }

  .navbar__inner {
    min-height: 0;
  }

  .navbar {
    position: static;
    box-shadow: none;
  }

  .mega {
    display: none;
  }
}

@media (max-width: 640px) {
  .utility__item--address {
    display: none;
  }

  .utility__inner {
    justify-content: center;
  }

  .masthead__logo img {
    height: 42px;
  }
}

/* ==========================================================
   src/components/Hero.css
   ========================================================== */

/**
 * Bannière d'accueil pleine largeur.
 * Traitement visuel « hygiène industrielle » : dégradé marine, trame technique,
 * arcs de marque et composition vectorielle — aucune photo produit fictive.
 */
.hero {
  /* Hauteur de l'illustration : sert aussi de réserve d'espace sous le texte. */
  --hero-band-h: clamp(96px, 14vw, 176px);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7, 28, 53, 0.98) 0%, rgba(10, 42, 76, 0.95) 44%, rgba(13, 37, 68, 0.66) 100%),
    url('../photos/hero-professional-hygiene.webp') center / cover no-repeat,
    var(--pattern-dots) 0 0 / 22px 22px,
    linear-gradient(118deg, var(--navy-900) 0%, var(--navy-800) 46%, var(--navy-700) 100%);
  color: var(--white);
}

/* Halos d'accent (bleu et jaune du logo) */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  right: -8%;
  top: -34%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 45% 55%, rgba(61, 141, 196, 0.55), transparent 66%);
}

.hero::after {
  left: -12%;
  bottom: -46%;
  width: 42%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 40%, rgba(242, 177, 52, 0.26), transparent 64%);
}

/* Illustration d'ambiance, alignée en bas de la bannière */
.hero__band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: var(--hero-band-h);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding-block: var(--space-8) calc(var(--space-6) + var(--hero-band-h));
  text-align: center;
}

.hero h1 {
  color: var(--white);
  margin-bottom: var(--space-4);
}

.hero__accent {
  color: var(--orange-400);
}

.hero__lead {
  max-width: 64ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  font-size: var(--text-md);
  color: var(--blue-100);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Puces de familles sous les actions */
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__chips li {
  margin: 0;
}

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--transition),
    border-color var(--transition);
}

.hero__chip:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.42);
  color: var(--white);
}

@media (max-width: 1023px) {
  .hero__inner {
    /* Conserve la réserve d'espace sous le texte pour l'illustration. */
    padding-block: var(--space-7) calc(var(--space-5) + var(--hero-band-h));
  }
}

/* ==========================================================
   src/components/TrustStrip.css
   ========================================================== */

/** Bande « atouts » : chevauche légèrement la bannière pour ancrer le contenu. */
.trust {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--space-6));
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.trust__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
}

.trust__item + .trust__item {
  border-left: 1px solid var(--color-border);
}

.trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  color: var(--navy-700);
}

.trust__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  color: var(--navy-900);
}

.trust__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 1023px) {
  .trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust__item:nth-child(odd) {
    border-left: 0;
  }

  .trust__item:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 560px) {
  .trust {
    margin-top: calc(-1 * var(--space-5));
  }

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

  .trust__item {
    border-left: 0;
    padding: var(--space-4);
  }

  .trust__item + .trust__item {
    border-top: 1px solid var(--color-border);
  }
}

/* ==========================================================
   src/components/CategoryVisual.css
   ========================================================== */

/**
 * Zone visuelle d'une carte catalogue.
 * Mode photo : <img> plein cadre avec voile marine pour garder les textes lisibles.
 * Mode graphique (repli) : dégradé marine + trame industrielle + filigrane de
 * l'icône de la catégorie, décliné par famille et varié par carte.
 * Le fond reste toujours sombre, ce qui garantit la lisibilité des textes en blanc.
 */
.cat-visual {
  position: relative;
  overflow: hidden;
  background:
    var(--pattern-dots) 0 0 / 16px 16px,
    var(--pattern-hatch),
    linear-gradient(140deg, var(--navy-700) 0%, var(--navy-900) 78%);
  color: var(--white);
  isolation: isolate;
}

/* Liseré d'accent de famille, épaissi au survol de la carte */
.cat-visual::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent, var(--blue-500));
  transition: height var(--transition);
}

.cat-visual--tile {
  aspect-ratio: 16 / 10;
}

.cat-visual--card {
  aspect-ratio: 16 / 9;
}

.cat-visual--sector {
  aspect-ratio: 16 / 9;
}

.cat-visual--banner {
  aspect-ratio: 3 / 1;
  border-radius: var(--radius-md);
}

/* ---------- Mode photographie ---------- */
.cat-visual__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}

/* Voile dégradé : contraste garanti pour l'icône et le titre incrustés */
.cat-visual--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    170deg,
    rgba(13, 37, 68, 0.35) 0%,
    rgba(13, 37, 68, 0.55) 55%,
    rgba(13, 37, 68, 0.82) 100%
  );
}

/**
 * Sur photo, le haut du voile est volontairement léger : une image claire en
 * haut à gauche délaverait l'icône incrustée. On lui donne donc un fond marine
 * opaque plutôt que translucide, ce qui garantit son contraste quelle que soit
 * la photographie utilisée.
 */
.cat-visual--photo .cat-visual__icon {
  background: rgba(13, 37, 68, 0.58);
  border-color: rgba(255, 255, 255, 0.45);
}

/* ---------- Mode graphique (repli de marque) ---------- */

/* Halo d'accent */
.cat-visual:not(.cat-visual--photo)::before {
  content: '';
  position: absolute;
  right: -22%;
  top: -46%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--accent, var(--blue-500)), transparent 68%);
  opacity: 0.3;
  z-index: -1;
}

/* Filigrane : icône de la catégorie, très agrandie et rognée */
.cat-visual__mark {
  position: absolute;
  right: -6%;
  bottom: -18%;
  width: 58%;
  height: auto;
  color: var(--accent, var(--blue-500));
  opacity: 0.42;
  stroke-width: 0.9;
  transition:
    transform 380ms ease,
    opacity var(--transition);
}

/* Icône secondaire : donne de la profondeur aux cartes secteur */
.cat-visual__mark-alt {
  position: absolute;
  left: 6%;
  bottom: -8%;
  width: 30%;
  height: auto;
  color: var(--white);
  opacity: 0.16;
  stroke-width: 1.1;
  transition: transform 380ms ease;
}

/* Ligne d'étagère / de sol, suggère un environnement de travail */
.cat-visual__shelf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.24) 18%,
    rgba(255, 255, 255, 0.24) 82%,
    transparent
  );
}

.cat-visual__shelf::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 46px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
}

/* ---------- Variations : évitent l'effet « cartes identiques » ---------- */
.cat-visual--v1 .cat-visual__mark {
  right: auto;
  left: -8%;
  bottom: -22%;
  width: 54%;
  transform: rotate(9deg);
}

.cat-visual--v1:not(.cat-visual--photo)::before {
  right: auto;
  left: -26%;
  top: -40%;
}

.cat-visual--v2 .cat-visual__mark {
  right: -10%;
  bottom: -30%;
  width: 68%;
  transform: rotate(-4deg);
}

.cat-visual--v2:not(.cat-visual--photo)::before {
  top: auto;
  bottom: -54%;
  right: -18%;
}

.cat-visual--v3 .cat-visual__mark {
  right: -2%;
  bottom: -12%;
  width: 48%;
  transform: rotate(-13deg);
}

.cat-visual--v3:not(.cat-visual--photo)::before {
  right: 40%;
  top: -58%;
  width: 86%;
}

/* ---------- Éléments incrustés ---------- */
.cat-visual__icon {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  backdrop-filter: blur(2px);
  transition:
    background-color var(--transition),
    border-color var(--transition);
}

.cat-visual__family {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-3);
  z-index: 2;
  max-width: calc(100% - 2 * var(--space-4));
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent, var(--blue-400));
}

.cat-visual__title {
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-4);
  z-index: 2;
  margin: 0;
  color: var(--white);
  font-size: var(--text-lg);
  text-shadow: 0 1px 12px rgba(13, 37, 68, 0.65);
}

@media (max-width: 520px) {
  .cat-visual--banner {
    aspect-ratio: 2 / 1;
  }
}

/* ==========================================================
   src/components/Cards.css
   ========================================================== */

/* =========================================================
   Cartes du catalogue
   Hiérarchie : visuel → famille → titre → usages → action.
   ========================================================= */

/* ---------- Base commune ---------- */
.tile,
.card,
.sector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    box-shadow 220ms ease,
    border-color 220ms ease,
    transform 220ms ease;
}

.tile:hover,
.card:hover,
.sector-card:hover {
  border-color: var(--accent, var(--blue-200));
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Chorégraphie de survol : le visuel réagit avec la carte */
.tile:hover .cat-visual__mark,
.card:hover .cat-visual__mark,
.sector-card:hover .cat-visual__mark {
  transform: scale(1.08) rotate(var(--mark-tilt, 0deg));
  opacity: 0.55;
}

.tile:hover .cat-visual__img,
.card:hover .cat-visual__img,
.sector-card:hover .cat-visual__img {
  transform: scale(1.05);
}

.tile:hover .cat-visual::after,
.card:hover .cat-visual::after,
.sector-card:hover .cat-visual::after {
  height: 5px;
}

.tile:hover .cat-visual__icon,
.card:hover .cat-visual__icon,
.sector-card:hover .cat-visual__icon {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Conserve l'inclinaison propre à chaque variation pendant le survol */
.cat-visual--v1 {
  --mark-tilt: 9deg;
}
.cat-visual--v2 {
  --mark-tilt: -4deg;
}
.cat-visual--v3 {
  --mark-tilt: -13deg;
}

/* ---------- Tuile compacte (grille d'accueil) ---------- */
.tile__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.tile__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-md);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.tile__usages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  flex: 1 1 auto;
  align-content: flex-start;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.tile__usages li {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--grey-600);
}

/* Séparateur discret entre les usages */
.tile__usages li + li::before {
  content: '·';
  margin-right: var(--space-2);
  color: var(--grey-300);
}

.tile__footer {
  margin-top: auto;
}

/* ---------- Carte détaillée (page catalogue) ---------- */
.card.is-target {
  border-color: var(--accent, var(--blue-500));
  box-shadow:
    0 0 0 3px var(--tint, var(--blue-100)),
    var(--shadow-md);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-5);
}

.card__badge {
  margin: 0 0 var(--space-3);
}

.card__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.card__text {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1 1 auto;
  align-content: flex-start;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.card__tags li {
  margin: 0;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--grey-050);
  border: 1px solid var(--color-border);
  color: var(--grey-600);
  font-size: var(--text-xs);
  font-weight: 600;
}

.card__footer {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ---------- Carte secteur ---------- */
.sector-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-5);
}

.sector-card__text {
  flex: 1 1 auto;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.sector-card__footer {
  margin-top: auto;
}

/* ---------- Carte valeur ---------- */
.value-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--orange-500);
  border-radius: var(--radius-md);
  height: 100%;
}

.value-card__icon {
  flex: none;
  color: var(--navy-700);
}

.value-card__title {
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
}

.value-card__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ==========================================================
   src/components/CategoryGroupCard.css
   ========================================================== */

.group-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition),
    border-color var(--transition);
}

.group-card:hover {
  border-color: var(--blue-200);
  box-shadow: var(--shadow-md);
}

.group-card__header {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.group-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--navy-700), var(--blue-600));
  color: var(--white);
}

.group-card__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-md);
}

.group-card__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.group-card__list {
  flex: 1 1 auto;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) 0 0;
  border-top: 1px dashed var(--color-border);
  list-style: none;
  columns: 2;
  column-gap: var(--space-4);
}

.group-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  break-inside: avoid;
  font-size: var(--text-sm);
  color: var(--grey-800);
}

.group-card__list svg {
  flex: none;
  margin-top: 4px;
  color: var(--blue-600);
}

.group-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
}

.group-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy-700);
  text-decoration: none;
}

.group-card__link:hover {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 620px) {
  .group-card__list {
    columns: 1;
  }
}

/* ==========================================================
   src/components/SectionHeading.css
   ========================================================== */

.section-heading {
  margin-bottom: var(--space-6);
  max-width: 70ch;
}

.section-heading .lead {
  margin-bottom: 0;
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading--center .lead {
  margin-inline: auto;
}

.section-heading--center .eyebrow {
  justify-content: center;
}

/* ==========================================================
   src/components/PageHero.css
   ========================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-6) var(--space-7);
  background:
    radial-gradient(circle at 88% -10%, rgba(242, 177, 52, 0.14), transparent 45%),
    radial-gradient(circle at 8% 110%, rgba(61, 141, 196, 0.16), transparent 50%),
    var(--blue-050);
  border-bottom: 1px solid var(--color-border);
}

.page-hero__inner {
  position: relative;
  max-width: 76ch;
}

.page-hero h1 {
  margin-bottom: var(--space-4);
}

.page-hero .lead {
  margin-bottom: 0;
  font-size: var(--text-md);
  color: var(--grey-600);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb {
  margin-bottom: var(--space-4);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--grey-600);
}

.breadcrumb svg {
  color: var(--grey-500);
}

.breadcrumb a {
  color: var(--navy-700);
  font-weight: 600;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb [aria-current='page'] {
  font-weight: 700;
  color: var(--grey-800);
}

/* ==========================================================
   src/components/CtaBand.css
   ========================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--blue-600) 100%);
  color: var(--white);
}

.cta-band::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(242, 177, 52, 0.35), transparent 68%);
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-7);
}

.cta-band__content {
  max-width: 60ch;
}

.cta-band h2 {
  color: var(--white);
  margin-bottom: var(--space-3);
}

.cta-band p {
  margin-bottom: 0;
  color: var(--blue-100);
  font-size: var(--text-md);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cta-band__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}

.cta-band__phone svg {
  color: var(--orange-500);
}

.cta-band__phone:hover {
  color: var(--orange-400);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 860px) {
  .cta-band__actions {
    width: 100%;
  }
}

/* ==========================================================
   src/components/ContactForm.css
   ========================================================== */

.form {
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.form__field--full {
  grid-column: 1 / -1;
}

.form__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy-900);
}

.form__optional {
  font-weight: 500;
  color: var(--grey-600);
}

.form__control {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: var(--text-sm);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.form__control:hover {
  border-color: var(--grey-500);
}

.form__control:focus {
  border-color: var(--blue-500);
}

.form__control[aria-invalid='true'] {
  border-color: var(--color-error);
  background-color: #fef4f3;
}

textarea.form__control {
  min-height: 130px;
  resize: vertical;
}

select.form__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--grey-600) 50%),
    linear-gradient(135deg, var(--grey-600) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.form__error {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-error);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.form__note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--grey-600);
  max-width: 44ch;
}

.form__feedback {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.form__feedback--ok {
  background: #e9f6f1;
  border: 1px solid #9fd4c3;
  color: #0a5c49;
}

.form__feedback--warn {
  background: var(--orange-100);
  border: 1px solid var(--orange-400);
  color: #7a4e05;
}

.form__feedback svg {
  flex: none;
  margin-top: 2px;
}

.form__feedback p {
  margin: 0;
}

.form__feedback a {
  color: inherit;
  font-weight: 700;
}

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

  /* Espace réservé sous le bouton pour ne pas être masqué par le CTA flottant */
  .form__actions {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 4.5rem;
  }
}

/* ==========================================================
   src/components/FloatingWhatsApp.css
   ========================================================== */

.fab {
  position: fixed;
  right: clamp(var(--space-4), 3vw, var(--space-6));
  bottom: clamp(var(--space-4), 3vw, var(--space-6));
  bottom: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.85rem 1.15rem;
  background-color: var(--whatsapp);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition:
    background-color var(--transition),
    transform var(--transition);
}

.fab:hover {
  background-color: var(--whatsapp-dark);
  color: var(--white);
  transform: translateY(-2px);
}

.fab svg {
  flex: none;
}

.fab__label {
  white-space: nowrap;
}

/* Sur mobile : pastille compacte pour ne pas masquer le contenu */
@media (max-width: 720px) {
  .fab {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
  }

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

/* ==========================================================
   src/components/Footer.css
   ========================================================== */

.footer {
  background: var(--navy-900);
  color: var(--blue-100);
}

/* Les boutons conservent leurs propres couleurs (contraste garanti). */
.footer a:not(.btn) {
  color: var(--blue-100);
  text-decoration: none;
}

.footer a:not(.btn):hover {
  color: var(--orange-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Bandeau devis ---------- */
.footer__cta {
  background:
    var(--pattern-hatch),
    linear-gradient(120deg, var(--navy-800) 0%, var(--navy-700) 60%, var(--blue-600) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-5);
}

.footer__cta h2 {
  margin-bottom: var(--space-1);
  color: var(--white);
  font-size: var(--text-lg);
}

.footer__cta p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--blue-100);
}

/* ---------- Colonnes ---------- */
.footer__main {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1.2fr;
  padding-block: var(--space-7) var(--space-6);
}

.footer__logo {
  display: inline-block;
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--white);
  border-radius: var(--radius-md);
}

.footer__logo img {
  height: 44px;
  width: auto;
}

.footer__about {
  font-size: var(--text-sm);
  color: var(--blue-100);
  max-width: 40ch;
}

.footer__title {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--orange-500);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-block;
}

.footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.footer__list li {
  margin-bottom: var(--space-3);
}

.footer__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__list svg {
  flex: none;
  color: var(--blue-400);
}

.footer__sector {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--blue-100);
}

.footer__sector svg {
  color: var(--orange-500);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.footer__contact-item svg {
  flex: none;
  margin-top: 3px;
  color: var(--orange-500);
}

.footer__contact-item address {
  font-style: normal;
}

.footer__contact-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--blue-200);
}

.footer__contact-value {
  font-weight: 700;
  color: var(--white);
}

/* ---------- Bas de page ---------- */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--text-xs);
  color: var(--blue-200);
}

.footer__tagline {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-400);
  font-weight: 700;
}

@media (max-width: 1100px) {
  .footer__main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .footer__main {
    grid-template-columns: 1fr;
    padding-block: var(--space-6) var(--space-5);
  }

  .footer__cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================
   src/pages/HomePage.css
   ========================================================== */

/* ---------- Blocs de familles (grille catalogue) ---------- */
.family-block + .family-block {
  margin-top: var(--space-7);
}

.family-block__desc {
  margin: calc(-1 * var(--space-3)) 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 78ch;
}

/* ---------- Bloc « Pourquoi » ---------- */
.why {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--space-7);
  align-items: start;
}

.why__mission {
  padding: var(--space-5);
  margin: 0;
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-left: 4px solid var(--blue-500);
  border-radius: var(--radius-md);
}

.why__mission p {
  margin-bottom: 0;
  font-size: var(--text-sm);
  color: var(--navy-800);
}

.why__mission footer {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-600);
}

.why__values {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.why__actions {
  margin-top: var(--space-5);
}

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

/* ==========================================================
   src/pages/SolutionsPage.css
   ========================================================== */

/* =========================================================
   Catalogue : barre latérale de filtres + grille dense
   ========================================================= */

.catalog {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* ---------- Barre latérale ---------- */
.catalog__aside {
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-4));
}

.filters {
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.filters__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.filters__search {
  margin-bottom: var(--space-4);
}

.filters__field {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--text-sm);
  transition: border-color var(--transition);
}

.filters__field:hover {
  border-color: var(--grey-500);
}

.filters__field:focus {
  border-color: var(--blue-500);
}

.filters__field::placeholder {
  color: var(--grey-500);
}

.filters__list {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.filters__list li {
  margin: 0 0 var(--space-1);
}

.filters__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--grey-800);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  transition:
    background-color var(--transition),
    color var(--transition);
}

.filters__option:hover {
  background: var(--blue-050);
  color: var(--navy-800);
}

.filters__option[aria-pressed='true'] {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
}

.filters__count {
  flex: none;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--grey-100);
  color: var(--grey-600);
  font-size: var(--text-xs);
  font-weight: 700;
}

.filters__option[aria-pressed='true'] .filters__count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.filters__reset {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-700);
  font-size: var(--text-xs);
  font-weight: 700;
}

.filters__reset:hover {
  background: var(--blue-050);
  border-color: var(--blue-200);
}

/* Encart d'aide WhatsApp sous les filtres */
.aside-help {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background:
    var(--pattern-dots) 0 0 / 16px 16px,
    linear-gradient(140deg, var(--navy-700), var(--navy-900));
  color: var(--white);
}

.aside-help h2 {
  margin-bottom: var(--space-2);
  color: var(--white);
  font-size: var(--text-base);
}

.aside-help p {
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  color: var(--blue-100);
}

/* Bouton d'ouverture des filtres (mobile) */
.catalog__filter-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.75rem;
  margin-bottom: var(--space-4);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--navy-800);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* ---------- Zone de résultats ---------- */
.catalog__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--grey-050);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.catalog__count {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--grey-800);
}

.catalog__count strong {
  color: var(--navy-900);
}

.catalog__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--grey-600);
}

.catalog__chip-active {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.2rem 0.3rem 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--blue-050);
  border: 1px solid var(--blue-200);
  color: var(--navy-800);
  font-size: var(--text-xs);
  font-weight: 700;
}

.catalog__chip-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--white);
}

.catalog__chip-clear:hover {
  background: var(--navy-900);
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: var(--space-5);
}

.catalog__family {
  margin-bottom: var(--space-7);
}

.catalog__family:last-child {
  margin-bottom: 0;
}

.catalog__empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  background: var(--blue-050);
  border: 1px dashed var(--blue-200);
  border-radius: var(--radius-lg);
}

.catalog__empty h2 {
  font-size: var(--text-lg);
}

.catalog__note {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--orange-100);
  border: 1px solid var(--orange-400);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--grey-800);
}

.catalog__note svg {
  flex: none;
  margin-top: 2px;
  color: var(--orange-600);
}

.catalog__note p {
  margin: 0;
}

/* ---------- Adaptation mobile ---------- */
@media (max-width: 920px) {
  .catalog {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .catalog__aside {
    position: static;
  }

  .catalog__filter-toggle {
    display: flex;
  }

  .catalog__aside--collapsed {
    display: none;
  }
}

/* ==========================================================
   src/pages/AboutPage.css
   ========================================================== */

.about__intro {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--space-7);
  align-items: start;
}

.about__text p {
  font-size: var(--text-md);
  color: var(--grey-800);
}

.about__aside {
  padding: var(--space-5);
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
}

.about__aside-logo {
  display: block;
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

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

.about__facts div {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--blue-200);
}

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

.about__facts dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-600);
}

.about__facts dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy-900);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-5);
}

.pillar {
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--blue-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.pillar--vision {
  border-top-color: var(--orange-500);
}

.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--blue-050);
  color: var(--navy-700);
}

.pillar p:last-child {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

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

/* ==========================================================
   src/pages/ContactPage.css
   ========================================================== */

.contact {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-7);
  align-items: start;
}

.contact__cards {
  display: grid;
  gap: var(--space-4);
}

.contact__card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.contact__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--blue-050);
  color: var(--navy-700);
}

.contact__card--whatsapp .contact__card-icon {
  background: #e9f6f1;
  color: var(--whatsapp);
}

.contact__card h3 {
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
}

.contact__card p,
.contact__card address {
  margin: 0;
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-text-muted);
}

.contact__card a {
  font-weight: 700;
  color: var(--navy-700);
  text-decoration: none;
}

.contact__card a:hover {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact__map {
  margin-top: var(--space-2);
}

.contact__steps {
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
}

.contact__steps h3 {
  font-size: var(--text-base);
}

.contact__steps ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: var(--text-sm);
  color: var(--grey-800);
}

.contact__steps li:last-child {
  margin-bottom: 0;
}

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

/* ==========================================================
   Compléments WordPress
   ========================================================== */

/* Décale la barre de navigation collante sous la barre d'administration. */
.admin-bar .navbar {
  top: 32px;
}

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

/* Classe d'accessibilité attendue par WordPress. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  z-index: 200;
  top: var(--space-4);
  left: var(--space-4);
  width: auto;
  height: auto;
  padding: var(--space-3) var(--space-4);
  clip-path: none;
  background: var(--navy-900);
  color: var(--white);
  border-radius: var(--radius-sm);
}

/* Messages de retour du formulaire (succès, erreurs de validation). */
.notice-veta {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.notice-veta svg {
  flex: none;
  margin-top: 2px;
}

.notice-veta p {
  margin: 0;
}

.notice-veta--error {
  background: #fdecea;
  border: 1px solid #f0b4ae;
  color: #8c1d13;
}

.notice-veta--success {
  background: #e9f6f1;
  border: 1px solid #9fd4c3;
  color: #0a5c49;
}

.notice-veta__list {
  margin: var(--space-2) 0 0;
  padding-left: 1.1rem;
}

.notice-veta__list li {
  margin-bottom: var(--space-1);
}

/* Contenu libre de l'éditeur WordPress. */
.entry-content > * + * {
  margin-top: var(--space-4);
}

.entry-content img {
  border-radius: var(--radius-md);
}

/* Champ anti-spam : invisible pour les humains, atteignable par les robots. */
.veta-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Adaptations du balisage WordPress --- */

/* Les menus WordPress rendent des <ul> : on neutralise les styles de liste. */
.navbar__list,
.mobile-panel__menu,
.footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Accent de la famille « Matériel & équipement de nettoyage », ajoutée après
   la maquette de référence (les quatre autres sont définies dans tokens.css). */
:root {
  --accent-materiel-equipement-nettoyage: #4db6a4;
  --tint-materiel-equipement-nettoyage: #dff2ee;
  --accent-laboratoire: #7fb0e0;
  --tint-laboratoire: #e4eefa;
  --accent-nuisibles: #d9a441;
  --tint-nuisibles: #fbf0dc;
  --accent-emballage: #5fc2d4;
  --tint-emballage: #ddf1f6;
}

/* --- Page d'une catégorie --- */

.produit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-7);
  align-items: start;
}

.produit__visuel .cat-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* La description allonge la colonne de droite : le visuel suit la lecture. */
.produit__visuel {
  position: sticky;
  top: calc(var(--space-6) + 4rem);
}

/* Photo du client : fond clair, car les produits sont détourés sur blanc. */
.produit__photo {
  margin: 0;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.produit__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

/* Visuel d'une carte quand la catégorie a une photo de produit.
   Le produit est détouré sur fond clair : ni voile marine, ni recadrage, sinon
   l'article se retrouve tronqué et assombri. */
/* Fond blanc uni : les photos sont détourées sur blanc, un dégradé ferait
   apparaître leur fond comme un carré rapporté. */
.cat-visual--produit {
  background: var(--white);
  border-bottom: 1px solid var(--color-border);
}

.cat-visual--produit .cat-visual__img {
  padding: var(--space-4);
  object-fit: contain;
}

/* Ni voile de lecture, ni halo d'accent : le halo vient de
   « .cat-visual--vN:not(.cat-visual--photo)::before », qui vise aussi cette
   variante et teinterait le pourtour du produit détouré. Cette règle compte
   deux classes ; la classe est donc répétée pour l'emporter proprement,
   plutôt que de recourir à !important. */
.cat-visual--produit.cat-visual--produit::after,
.cat-visual--produit.cat-visual--produit::before {
  content: none;
}

/* Le zoom au survol recadrerait le produit : on le neutralise. */
.tile:hover .cat-visual--produit .cat-visual__img,
.card:hover .cat-visual--produit .cat-visual__img {
  transform: none;
}

/* Produit encore sans photo : l'icône de la catégorie tient la place. */
.produit__sans-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  color: var(--navy-700);
}

.galerie__note {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.boutique__intro {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
}

/* L'ancre de secteur est un conteneur flex : sans cette règle, la carte se
   dimensionne sur son contenu. Un secteur sans description se retrouvait deux
   fois plus étroit que les autres. */
.sector-anchor > * {
  flex: 1;
  min-width: 0;
}

/* Boutique sans colonne de filtres : elle prend toute la largeur, au lieu de
   rester dans la colonne étroite que .catalog réserve aux filtres. */
.catalog--sans-colonne {
  grid-template-columns: minmax(0, 1fr);
}

.boutique__vide {
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

.boutique__vide a {
  font-weight: 600;
}

/* La boutique reprend la grille du catalogue : filtres à gauche, produits à
   droite. Le fond blanc de .filters suffit à détacher la colonne de la bande
   grise, rien à ajouter ici. */

/* Encart d'aide en pleine largeur : le format de la colonne du catalogue est
   trop étroit, le texte y serait minuscule et le bouton démesuré. */
.aside-help--bande {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-6);
  padding: var(--space-5);
}

.aside-help--bande .aside-help__texte {
  max-width: 46ch;
}

.aside-help--bande h2 {
  font-size: var(--text-lg);
}

.aside-help--bande p {
  margin-bottom: 0;
  font-size: var(--text-sm);
}

.aside-help--bande .btn {
  flex: none;
}

@media (max-width: 620px) {
  .aside-help--bande {
    align-items: stretch;
  }

  .aside-help--bande .btn {
    width: 100%;
  }
}

/* --- Secteurs : pastille et intitulé, sans photo --- */

.sector-tile {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  height: 100%;
  padding: var(--space-4) var(--space-5);
  color: var(--color-primary);
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition:
    background 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.sector-tile:hover,
.sector-tile:focus-visible {
  color: var(--white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.sector-tile__pastille {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--white);
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition:
    background 200ms ease,
    color 200ms ease;
}

/* Au survol la carte devient marine : la pastille s'inverse pour rester lisible. */
.sector-tile:hover .sector-tile__pastille,
.sector-tile:focus-visible .sector-tile__pastille {
  color: var(--color-primary);
  background: var(--white);
}

.sector-tile__nom {
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.25;
}

@media (max-width: 520px) {
  .sector-tile {
    padding: var(--space-4);
  }

  .sector-tile__pastille {
    width: 44px;
    height: 44px;
  }

  .sector-tile__nom {
    font-size: var(--text-base);
  }
}

/* --- Plan du siège, pied de page --- */

.footer__plan {
  margin-top: var(--space-4);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
}

.footer__plan iframe {
  display: block;
  width: 100%;
  height: 160px;
  border: 0;
}

.footer__plan-lien {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
}

.footer__plan-lien:hover {
  color: var(--color-accent);
}

/* --- Plan du siège, page Contact --- */

.contact__plan {
  margin: var(--space-5) 0 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.contact__plan iframe {
  display: block;
  width: 100%;
  /* Un plan trop haut repousse la suite ; trop bas, il ne situe plus rien. */
  height: clamp(240px, 32vw, 340px);
  border: 0;
}

.contact__plan figcaption {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border-top: 1px solid var(--color-border);
}

/* --- Carrousel des nouveautés --- */

.carrousel {
  position: relative;
}

.carrousel__piste {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Les cartes portent une ombre au survol : sans marge, elle serait rognée. */
  padding: var(--space-1) var(--space-1) var(--space-3);
  /* Sans cela, l'aimantation compte la marge intérieure et la position de
     départ vaut 4 et non 0 : la flèche « précédent » ne se désactiverait
     jamais tout à fait. */
  scroll-padding-inline: var(--space-1);
  scrollbar-width: thin;
}

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

.carrousel__piste > * {
  flex: 0 0 clamp(200px, 24vw, 250px);
  scroll-snap-align: start;
}

.carrousel__fleche {
  position: absolute;
  /* Centré sur la photo, pas sur la carte entière : le titre et le bouton
     occupent le bas et la flèche les masquerait. */
  top: 32%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--color-primary);
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}

.carrousel__fleche--prec {
  left: 0;
}

.carrousel__fleche--suiv {
  right: 0;
}

/* Une seule icône de chevron existe : celle de gauche en est le miroir. */
.carrousel__fleche--prec svg {
  transform: scaleX(-1);
}

/* Arrivée en butée, la flèche s'efface : grisée, elle couvrirait une photo
   sans rien pouvoir faire. */
.carrousel__fleche[disabled] {
  visibility: hidden;
}

/* Piste entièrement visible : les flèches n'auraient rien à faire défiler. */
.carrousel--immobile .carrousel__fleche {
  display: none;
}

/* Au doigt, le défilement est naturel : les flèches encombreraient. */
@media (max-width: 619px) {
  .carrousel__fleche {
    display: none;
  }
}

/* --- Boutique d'une catégorie --- */

.boutique {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4);
}

.produit-carte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.produit-carte:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.produit-carte__media {
  display: block;
  background: var(--white);
  border-bottom: 1px solid var(--color-border);
}

.produit-carte__image {
  display: block;
  width: 100%;
  height: auto;
  padding: var(--space-4);
  aspect-ratio: 1;
  object-fit: contain;
}

.produit-carte__sans-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: linear-gradient(160deg, var(--white) 0%, var(--tint, var(--grey-100)) 100%);
  color: var(--navy-700);
}

.produit-carte__corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.produit-carte__titre {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.produit-carte__titre a {
  color: var(--navy-900);
  text-decoration: none;
}

.produit-carte__titre a:hover {
  color: var(--blue-600);
}

.produit-carte__corps .btn {
  margin-top: auto;
}

/* --- Ajout au panier, sur la fiche produit --- */

.ajout-panier__ligne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}

.ajout-panier__ligne label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--grey-600);
}

.ajout-panier__ligne input {
  width: 6rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-900);
  font: inherit;
  text-align: center;
}

/* --- Raccourci du panier dans l'en-tête --- */

.panier-lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--navy-800);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.panier-lien:hover {
  border-color: var(--navy-700);
  color: var(--navy-900);
}

.panier-lien__compte {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--navy-800);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* --- Page du panier --- */

.panier__lignes {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}

.panier__ligne {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.panier__ligne:last-child {
  border-bottom: 0;
}

.panier__visuel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-700);
}

.panier__visuel img {
  width: 100%;
  height: 100%;
  padding: var(--space-2);
  object-fit: contain;
}

.panier__titre {
  margin: 0;
  font-size: var(--text-base);
}

.panier__titre a {
  color: var(--navy-900);
  text-decoration: none;
}

.panier__titre a:hover {
  color: var(--blue-600);
}

.panier__categorie {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.panier__categorie a {
  color: var(--color-text-muted);
}

.panier__quantite {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.panier__quantite label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--grey-600);
}

.panier__quantite input {
  width: 5.5rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-900);
  font: inherit;
  text-align: center;
}

.panier__retirer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--grey-600);
  cursor: pointer;
}

.panier__retirer:hover {
  border-color: #c0392b;
  color: #c0392b;
}

.panier__outils {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-6);
}

.panier__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.panier__resume {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--accent, var(--orange-500));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.panier__compte {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--navy-900);
}

.panier__aide {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.panier__aide svg {
  flex: none;
  margin-top: 2px;
  color: var(--blue-600);
}

.panier__suite {
  margin: var(--space-5) 0 0;
}

.panier__suite a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}

.panier-vide {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

.panier-vide svg {
  color: var(--grey-400, var(--grey-600));
}

.panier-vide h2 {
  margin: var(--space-4) 0 var(--space-2);
}

.panier-vide .btn {
  margin-top: var(--space-4);
}

/* Le panier porte déjà son bouton de devis : le raccourci ferait doublon. */
.page-template-template-panier .fab {
  display: none;
}

@media (max-width: 720px) {
  .panier__ligne {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas: 'visuel texte retirer' 'visuel quantite quantite';
    row-gap: var(--space-3);
  }

  .panier__visuel {
    grid-area: visuel;
    width: 64px;
    height: 64px;
  }

  .panier__texte {
    grid-area: texte;
  }

  .panier__quantite {
    grid-area: quantite;
  }

  .panier__retirer {
    grid-area: retirer;
  }

  .panier__resume {
    flex-direction: column;
    align-items: stretch;
  }

  .panier__resume .btn {
    width: 100%;
  }
}

.produit__texte {
  margin-bottom: var(--space-6);
  color: var(--color-text);
}

.produit__texte p {
  margin: 0 0 var(--space-3);
  line-height: 1.75;
}

.produit__texte p:last-child {
  margin-bottom: 0;
}

.produit__badge {
  margin: 0 0 var(--space-3);
}

.produit__titre {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

.produit__usages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.produit__usages li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--tint, var(--grey-100));
  color: var(--navy-900);
  font-size: var(--text-sm);
  font-weight: 600;
}

.produit__usages svg {
  color: var(--navy-700);
}

.produit__devis {
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--accent, var(--orange-500));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.produit__devis p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.produit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.produit__meta,
.produit__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
}

.produit__meta a {
  font-weight: 700;
  color: var(--navy-800);
}

.produit__note {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--grey-600);
}

.produit__meta svg,
.produit__note svg {
  flex: none;
  margin-top: 2px;
  color: var(--blue-600);
}

@media (max-width: 900px) {
  .produit {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .produit__visuel {
    position: static;
  }
}

/* Titres et visuels de cartes cliquables vers la page de la catégorie. */
.tile__title a,
.card__title a {
  color: inherit;
  text-decoration: none;
}

.tile__title a:hover,
.card__title a:hover {
  color: var(--blue-600);
}

.tile__media,
.card__media {
  display: block;
}

/* Ancre de secteur : la carte doit rester étirée dans la grille, et le titre
   ne doit pas passer sous la barre de navigation collante. */
.sector-anchor {
  display: flex;
  scroll-margin-top: calc(var(--navbar-height) + var(--space-5));
}

/* Secteurs d'activité dans le panneau mobile */
.mobile-panel__secteurs {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.mobile-panel__secteurs li {
  margin: 0;
}

.mobile-panel__secteurs a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--blue-100);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.mobile-panel__secteurs a:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.mobile-panel__secteurs svg {
  flex: none;
  color: var(--orange-500);
}

/* --- Familles de catalogue dans la barre de navigation --- */

/* Pages et familles partagent la même liste : l'ordre vient du gabarit. */
.navbar__item {
  margin: 0;
}

.navbar__family {
  position: relative;
  margin: 0;
}

.navbar__family > .navbar__link {
  gap: var(--space-2);
  border-bottom: 3px solid transparent;
}

.navbar__caret {
  flex: none;
  opacity: 0.7;
  transition: transform var(--transition);
}

/* Sous-menu : ouvert au survol et au focus clavier, sans JavaScript. */
.navbar__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99;
  display: none;
  min-width: 268px;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  background: var(--white);
  border-top: 3px solid var(--accent, var(--blue-500));
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.navbar__family:hover > .navbar__submenu,
.navbar__family:focus-within > .navbar__submenu {
  display: block;
}

.navbar__family:hover > .navbar__link,
.navbar__family:focus-within > .navbar__link {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-bottom-color: var(--accent, var(--orange-500));
}

.navbar__family:hover .navbar__caret,
.navbar__family:focus-within .navbar__caret {
  transform: rotate(180deg);
}

.navbar__submenu li {
  margin: 0;
}

.navbar__submenu a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem var(--space-4);
  color: var(--grey-800);
  font-size: var(--text-sm);
  text-decoration: none;
  transition:
    background-color var(--transition),
    color var(--transition);
}

.navbar__submenu a:hover {
  background: var(--blue-050);
  color: var(--navy-800);
}

.navbar__submenu svg {
  flex: none;
  color: var(--accent, var(--blue-500));
}

/* --- Bannière sans illustration d'ambiance ---
   L'illustration vectorielle du bas de bannière a été retirée : la photo reste
   seule. On rend donc au contenu un rembourrage normal, sans la réserve
   d'espace qui lui était destinée. */
.hero__inner {
  padding-block: var(--space-8);
}

@media (max-width: 1023px) {
  .hero__inner {
    padding-block: var(--space-7);
  }
}

/* Sécurité : si des libellés de familles très longs étaient saisis, la barre
   passe sur deux rangées au lieu de déborder horizontalement. */
.navbar__inner {
  flex-wrap: wrap;
}

/* Sept familles plus quatre pages : on resserre dès 1600 px pour garder une
   seule rangée. */
@media (max-width: 1600px) {
  .navbar__link {
    padding-inline: var(--space-3);
    font-size: var(--text-xs);
  }

  .navbar__family > .navbar__link {
    gap: var(--space-1);
  }
}

/* Sous 1150 px, resserrer ne suffit plus : les liens de pages remontent dans
   la barre du haut. Une seule des deux listes est affichée à la fois. */
.utility__nav {
  display: none;
}

.utility__menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.utility__menu li {
  margin: 0;
}

.utility__menu a {
  color: var(--blue-100);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
}

.utility__menu a:hover,
.utility__menu a.is-active {
  color: var(--orange-400);
}

@media (max-width: 1400px) {
  .navbar__item--page {
    display: none;
  }

  .utility__nav {
    display: block;
  }

  /* L'accueil reste dans la barre : on ne le répète pas en haut. */
  .utility__menu .menu-item-home {
    display: none;
  }
}

/* Dernier palier avant le panneau mobile : neuf entrées à loger. */
@media (max-width: 1150px) {
  .navbar__link {
    padding-inline: var(--space-2);
    font-size: 0.72rem;
    letter-spacing: -0.01em;
  }

  .navbar__caret {
    width: 12px;
    height: 12px;
  }
}

/* Sous 1024 px, toute la barre passe par le panneau mobile
   (.navbar__list est déjà masquée à ce palier). */
@media (max-width: 1023px) {
  .utility__nav {
    display: none;
  }
}

.mobile-panel__menu li {
  margin: 0;
}

/* Les filtres du catalogue sont des liens (fonctionnent sans JavaScript). */
.filters__option {
  text-decoration: none;
}

.filters__option[aria-current='true'] {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
}

.filters__option[aria-current='true'] .filters__count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.filters__reset {
  display: block;
  text-align: center;
  text-decoration: none;
}

.catalog__chip-clear {
  text-decoration: none;
}

/* Le logo personnalisé de WordPress reprend la taille du logo du thème. */
.masthead__logo .custom-logo {
  height: 52px;
  width: auto;
}

@media (max-width: 640px) {
  .masthead__logo .custom-logo {
    height: 42px;
  }
}

/* Liens des réseaux sociaux du pied de page. */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.footer__social li {
  margin: 0;
}

/* Pagination des archives. */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.pagination .page-numbers {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--navy-800);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
}

.pagination .page-numbers.current {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
}