/* L’Abritant : Hummingbird habillé avec les jetons du design system V2, pour toutes les pages.

   Règles d'écriture :
   1. Jetons et @font-face hors couche, sur :root (ils viennent de tokens.css).
   2. Une valeur en dur de Bootstrap ou de Hummingbird se redéclare avec le MÊME sélecteur, dans la
      MÊME couche @layer que l'original (python3 bin/inventaire-litteraux.py <theme.css> pour les trouver).
   3. Jamais de sélecteur d'élément hors couche, jamais de nouvelle couche, jamais de !important.
   4. Uniquement des var(--…) pour couleurs, polices, rayons et espacements.
      Seule exception : les triplets --bs-*-rgb de Bootstrap (rgba(var(--bs-primary-rgb), …)), qu'aucun jeton
      ne fournit ; chacun reprend le jeton cité en commentaire (à verser au design system : variantes RVB).
   5. Les classes du kit (pg-*, ab-*) et les classes locales (a1-* en-tête, a2-* pied, x2-* icônes et
      messages) sont hors couche, comme maquettes.css. Rien ici n'est propre à une page : les gabarits de
      pages ont leur feuille (assets/css/pages/).

   Sommaire : §1 base · §2 composants (boutons, formulaires, messages, étiquettes, pagination, fil d’Ariane,
   fenêtres) · §3 en-tête (carte A1) · §4 pied (carte A2) · §5 icônes (carte X2) · §8 paliers
   (1 360 / 1 200 / 992 / 768 / 480 / 380 px). */


/* §1 Base ------------------------------------------------------------------------------------------ */

/* Correspondance Bootstrap / Hummingbird : même sélecteur que le :root hors couche de Hummingbird. */
:root,
[data-bs-theme=light] {
  /* Primaire = graphite (Hummingbird écrit du blanc sur la primaire) ; le jaune hauban est réservé à .btn-primary. */
  --bs-blue: var(--graphite);
  --bs-red: var(--erreur);
  --bs-green: var(--sapin);
  --bs-yellow: var(--jaune-hauban);
  --bs-primary: var(--graphite);
  --bs-primary-rgb: 31, 36, 33;               /* graphite */
  --bs-primary-text-emphasis: var(--graphite);
  --bs-primary-bg-subtle: var(--jaune-pale);
  --bs-primary-border-subtle: var(--trait);
  --bs-secondary: var(--ardoise);
  --bs-secondary-rgb: 90, 96, 91;             /* ardoise */
  --bs-secondary-text-emphasis: var(--graphite);
  --bs-secondary-bg-subtle: var(--toile-fonce);
  --bs-secondary-border-subtle: var(--trait);
  --bs-success: var(--sapin);
  --bs-success-rgb: 31, 92, 69;               /* sapin */
  --bs-success-text-emphasis: var(--sapin);
  --bs-success-bg-subtle: var(--sapin-pale);
  --bs-success-border-subtle: var(--sapin-pale);
  --bs-info: var(--ardoise);
  --bs-info-rgb: 90, 96, 91;                  /* ardoise */
  --bs-info-text-emphasis: var(--graphite);
  --bs-info-bg-subtle: var(--toile-fonce);
  --bs-info-border-subtle: var(--toile-fonce);
  --bs-warning: var(--attention);
  --bs-warning-rgb: 143, 82, 0;               /* attention */
  --bs-warning-text-emphasis: var(--graphite);
  --bs-warning-bg-subtle: var(--jaune-pale);
  --bs-warning-border-subtle: var(--jaune-pale);
  --bs-danger: var(--erreur);
  --bs-danger-rgb: 179, 38, 30;               /* erreur */
  --bs-danger-text-emphasis: var(--erreur);
  --bs-danger-bg-subtle: var(--erreur-pale);
  --bs-danger-border-subtle: var(--erreur);
  --bs-light: var(--toile-fonce);
  --bs-light-rgb: 233, 228, 215;              /* toile-fonce */
  --bs-dark: var(--graphite);
  --bs-dark-rgb: 31, 36, 33;                  /* graphite */

  /* Texte : Instrument Sans 17 / 27 px (style « corps »). */
  --bs-font-sans-serif: var(--font-texte);
  --bs-font-monospace: var(--font-technique);
  --bs-body-font-family: var(--font-texte);
  --bs-body-font-size: 1.0625rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5882;
  --bs-body-color: var(--texte);
  --bs-body-color-rgb: 31, 36, 33;            /* graphite */
  --bs-body-bg: var(--fond);
  --bs-body-bg-rgb: 244, 241, 232;            /* toile */
  --bs-emphasis-color: var(--graphite);
  --bs-emphasis-color-rgb: 31, 36, 33;        /* graphite */
  --bs-secondary-color: var(--texte-doux);
  --bs-secondary-color-rgb: 90, 96, 91;       /* ardoise */
  --bs-secondary-bg: var(--toile-fonce);
  --bs-secondary-bg-rgb: 233, 228, 215;       /* toile-fonce */
  --bs-tertiary-color: var(--texte-doux);
  --bs-tertiary-color-rgb: 90, 96, 91;        /* ardoise */
  --bs-tertiary-bg: var(--toile-fonce);
  --bs-tertiary-bg-rgb: 233, 228, 215;        /* toile-fonce */
  --bs-heading-color: var(--graphite);
  --bs-highlight-color: var(--graphite);
  --bs-highlight-bg: var(--jaune-pale);
  --bs-link-color: var(--graphite);
  --bs-link-color-rgb: 31, 36, 33;            /* graphite */
  --bs-link-decoration: underline;
  --bs-link-hover-color: var(--graphite-doux);
  --bs-link-hover-color-rgb: 52, 58, 54;      /* graphite-doux */

  /* Traits et angles : la marque est anguleuse, jamais de pilule. */
  --bs-border-width: var(--trait-fin);
  --bs-border-color: var(--trait);
  --bs-border-color-translucent: var(--trait);
  --bs-border-radius: var(--rayon-s);
  --bs-border-radius-sm: var(--rayon-s);
  --bs-border-radius-lg: var(--rayon-m);
  --bs-border-radius-xl: var(--rayon-m);
  --bs-border-radius-xxl: var(--rayon-m);
  --bs-border-radius-2xl: var(--rayon-m);
  --bs-border-radius-pill: var(--rayon-s);

  /* Ombres : la marque est plate ; seule l'ombre flottante (menus, fenêtres, survol). */
  --bs-box-shadow: var(--ombre-flottante);
  --bs-box-shadow-sm: var(--ombre-flottante);
  --bs-box-shadow-lg: var(--ombre-flottante);
  --bs-box-shadow-inset: none;

  /* Focus : anneau graphite de 3 px décalé de 2 px (§1, :focus-visible). */
  --bs-focus-ring-width: var(--trait-hauban);
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: var(--focus);
  --bs-form-valid-color: var(--sapin);
  --bs-form-valid-border-color: var(--sapin);
  --bs-form-invalid-color: var(--erreur);
  --bs-form-invalid-border-color: var(--erreur);
}

/* Second :root hors couche de Hummingbird : transitions de 120 ms (design system, « Mouvement »). */
:root {
  --bs-transition-default: color 120ms ease-out, background-color 120ms ease-out, border-color 120ms ease-out, box-shadow 120ms ease-out;
  --bs-box-shadow-md: var(--ombre-flottante);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bs-transition-default: none;
  }
}

@layer bs-base {
  /* Titres : Bricolage Grotesque, échelle titre-1 à titre-4, fluide entre deux paliers. */
  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titre);
    font-weight: 700;
    line-height: 1.25;
    color: var(--bs-heading-color);
  }

  .h1, h1 {
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -0.015em;
  }

  .h2, h2 {
    font-size: clamp(1.625rem, 2.4vw, 2.125rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
  }

  .h3, h3 {
    font-size: 1.5rem;
  }

  .h4, h4 {
    font-size: 1.1875rem;
  }

  .h5, h5 {
    font-size: 1.0625rem;
  }

  .h6, h6 {
    font-size: 0.9375rem;
  }

  /* Téléphone : échelle titre-1-tel (34 px) et titre-2-tel (28 px). */
  @media (max-width: 767.98px) {
    .h1, h1 {
      font-size: 2.125rem;
      line-height: 2.375rem;
    }

    .h2, h2 {
      font-size: 1.75rem;
      line-height: 2.125rem;
    }
  }

  ::selection {
    background-color: var(--jaune-hauban);
    color: var(--graphite);
  }

  :focus-visible {
    outline: var(--trait-hauban) solid var(--focus);
    outline-offset: 2px;
  }

  /* Conteneur du design system : 1 280 px au plus, marge de 48 px (16 px sous 992 px, §8). */
  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: calc(2 * var(--marge));
  }

  @media (min-width: 576px) {
    .container, .container-sm, .container-xs {
      max-width: calc(var(--conteneur) + 2 * var(--marge));
    }
  }

  @media (min-width: 768px) {
    .container, .container-md, .container-sm, .container-xs {
      max-width: calc(var(--conteneur) + 2 * var(--marge));
    }
  }

  @media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm, .container-xs {
      max-width: calc(var(--conteneur) + 2 * var(--marge));
    }
  }

  @media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xs {
      max-width: calc(var(--conteneur) + 2 * var(--marge));
    }
  }

  @media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xs, .container-xxl {
      max-width: calc(var(--conteneur) + 2 * var(--marge));
    }
  }
}

/* Lien d’évitement « Aller au contenu » (pg-evitement du kit, gabarit layouts/layout-both-columns.tpl). */
.x2-evitement { z-index: 1090; }


/* §2 Composants -------------------------------------------------------------------------------------- */

@layer bs-components {
  /* Boutons (ab-bouton) : 48 px, Instrument Sans 600 16 px, trait de 2 px, rayon 4 px. */
  .btn {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-font-family: var(--font-texte);
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.25rem;
    --bs-btn-color: var(--graphite);
    --bs-btn-border-width: var(--trait-moyen);
    --bs-btn-border-radius: var(--rayon-s);
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-disabled-opacity: 0.45;
  }

  .btn:focus-visible {
    outline: var(--trait-hauban) solid var(--focus);
    outline-offset: 2px;
    box-shadow: none;
  }

  /* Principal : jaune hauban, un seul par décision. */
  .btn-primary {
    --bs-btn-color: var(--sur-action);
    --bs-btn-bg: var(--action);
    --bs-btn-border-color: var(--sur-action);
    --bs-btn-hover-color: var(--sur-action);
    --bs-btn-hover-bg: var(--action);
    --bs-btn-hover-border-color: var(--sur-action);
    --bs-btn-active-color: var(--sur-action);
    --bs-btn-active-bg: var(--action);
    --bs-btn-active-border-color: var(--sur-action);
    --bs-btn-disabled-color: var(--sur-action);
    --bs-btn-disabled-bg: var(--action);
    --bs-btn-disabled-border-color: var(--sur-action);
    --bs-btn-active-shadow: none;
  }

  .btn-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--ombre-tampon);
  }

  .btn-primary:active {
    transform: none;
    box-shadow: none;
  }

  /* Secondaire : graphite plein. */
  .btn-secondary,
  .btn-dark {
    --bs-btn-color: var(--toile);
    --bs-btn-bg: var(--graphite);
    --bs-btn-border-color: var(--graphite);
    --bs-btn-hover-color: var(--toile);
    --bs-btn-hover-bg: var(--graphite-doux);
    --bs-btn-hover-border-color: var(--graphite-doux);
    --bs-btn-active-color: var(--toile);
    --bs-btn-active-bg: var(--graphite-doux);
    --bs-btn-active-border-color: var(--graphite-doux);
    --bs-btn-disabled-color: var(--toile);
    --bs-btn-disabled-bg: var(--graphite);
    --bs-btn-disabled-border-color: var(--graphite);
    --bs-btn-active-shadow: none;
  }

  /* Contour : graphite sur fond transparent, jaune pâle au survol. */
  .btn-outline-primary,
  .btn-outline-secondary,
  .btn-outline-dark,
  .btn-light {
    --bs-btn-color: var(--graphite);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--graphite);
    --bs-btn-hover-color: var(--graphite);
    --bs-btn-hover-bg: var(--jaune-pale);
    --bs-btn-hover-border-color: var(--graphite);
    --bs-btn-active-color: var(--graphite);
    --bs-btn-active-bg: var(--jaune-pale);
    --bs-btn-active-border-color: var(--graphite);
    --bs-btn-disabled-color: var(--graphite);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--graphite);
    --bs-btn-active-shadow: none;
  }

  .btn-danger,
  .btn-outline-danger {
    --bs-btn-color: var(--erreur);
    --bs-btn-bg: var(--blanc);
    --bs-btn-border-color: var(--erreur);
    --bs-btn-hover-color: var(--erreur);
    --bs-btn-hover-bg: var(--erreur-pale);
    --bs-btn-hover-border-color: var(--erreur);
    --bs-btn-active-color: var(--erreur);
    --bs-btn-active-bg: var(--erreur-pale);
    --bs-btn-active-border-color: var(--erreur);
    --bs-btn-disabled-color: var(--erreur);
    --bs-btn-disabled-bg: var(--blanc);
    --bs-btn-disabled-border-color: var(--erreur);
  }

  /* Lien d’action (ab-bouton--lien) : souligné de 2 px, surligné jaune au survol. */
  .btn-link {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--graphite);
    --bs-btn-hover-color: var(--graphite);
    --bs-btn-active-color: var(--graphite);
    --bs-btn-disabled-color: var(--ardoise);
    text-decoration: underline;
    text-decoration-thickness: var(--trait-moyen);
    text-underline-offset: 4px;
  }

  .btn-link:hover {
    background: linear-gradient(transparent 58%, var(--jaune-hauban) 58%);
  }

  /* Champs (ab-champ) : 48 px, trait de 2 px trait-fort, fond blanc, focus graphite. */
  .form-control {
    min-height: var(--controle);
    padding: 0.625rem 1rem;
    font-size: 1.0625rem;
    line-height: 1.5rem;
    color: var(--graphite);
    background-color: var(--blanc);
    border: var(--trait-moyen) solid var(--trait-fort);
    border-radius: var(--rayon-s);
  }

  .form-control:focus {
    color: var(--graphite);
    background-color: var(--blanc);
    border-color: var(--graphite);
    box-shadow: none;
    outline: var(--trait-hauban) solid var(--focus);
    outline-offset: 2px;
  }

  .form-control::placeholder {
    color: var(--ardoise);
  }

  .form-select {
    min-height: var(--controle);
    font-size: 1.0625rem;
    color: var(--graphite);
    background-color: var(--blanc);
    border: var(--trait-moyen) solid var(--trait-fort);
    border-radius: var(--rayon-s);
  }

  .form-select:focus {
    border-color: var(--graphite);
    box-shadow: none;
    outline: var(--trait-hauban) solid var(--focus);
    outline-offset: 2px;
  }

  .form-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--graphite);
  }

  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1875rem;
    border: var(--trait-moyen) solid var(--trait-fort);
  }

  .form-check-input:focus {
    border-color: var(--graphite);
    box-shadow: none;
    outline: var(--trait-hauban) solid var(--focus);
    outline-offset: 2px;
  }

  .form-check-input:checked {
    background-color: var(--graphite);
    border-color: var(--graphite);
  }

  .form-check-input[type=checkbox]:indeterminate {
    background-color: var(--graphite);
    border-color: var(--graphite);
  }

  .form-range::-webkit-slider-thumb {
    background-color: var(--graphite);
  }

  .form-range::-webkit-slider-thumb:active {
    background-color: var(--graphite-doux);
  }

  .form-range::-moz-range-thumb {
    background-color: var(--graphite);
  }

  .form-range::-moz-range-thumb:active {
    background-color: var(--graphite-doux);
  }

  .form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 var(--trait-hauban) var(--focus);
  }

  .form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 var(--trait-hauban) var(--focus);
  }

  /* Messages (pg-message) : icône et mot en tête, rayon de 8 px, sans filet. */
  .alert {
    --bs-alert-padding-x: var(--espace-4);
    --bs-alert-padding-y: var(--espace-4);
    --bs-alert-border-radius: var(--rayon-m);
    --bs-alert-border: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--espace-3);
    font-size: 0.9375rem;
    line-height: 1.375rem;
  }

  .alert-success {
    --bs-alert-color: var(--graphite);
    --bs-alert-bg: var(--sapin-pale);
    --bs-alert-link-color: var(--sapin);
  }

  .alert-info {
    --bs-alert-color: var(--graphite);
    --bs-alert-bg: var(--toile-fonce);
    --bs-alert-link-color: var(--graphite);
  }

  .alert-warning {
    --bs-alert-color: var(--graphite);
    --bs-alert-bg: var(--jaune-pale);
    --bs-alert-link-color: var(--graphite);
  }

  .alert-danger {
    --bs-alert-color: var(--graphite);
    --bs-alert-bg: var(--erreur-pale);
    --bs-alert-link-color: var(--erreur);
  }

  /* Bouton de fermeture : cible de 44 px, opaque, focus dessiné. */
  .btn-close {
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 1;
    --bs-btn-close-focus-shadow: none;
    box-sizing: border-box;
    width: var(--cible-min);
    height: var(--cible-min);
    padding: 0;
    border-radius: var(--rayon-s);
  }

  .btn-close:focus {
    outline: var(--trait-hauban) solid var(--focus);
    outline-offset: 2px;
  }

  .alert-dismissible .btn-close {
    padding: 0;
    top: var(--espace-1);
    right: var(--espace-1);
  }

  /* Étiquettes (ab-etiquette) : mono, capitales, rayon de 4 px. */
  .badge {
    --bs-badge-padding-x: var(--espace-2);
    --bs-badge-padding-y: var(--espace-1);
    --bs-badge-font-size: 0.75rem;
    --bs-badge-font-weight: 600;
    --bs-badge-color: var(--toile);
    --bs-badge-border-radius: var(--rayon-s);
    font-family: var(--font-technique);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Pagination : cibles de 44 px, page courante en jaune pâle + trait graphite de 3 px. */
  .pagination {
    --bs-pagination-padding-x: var(--espace-3);
    --bs-pagination-padding-y: var(--espace-2);
    --bs-pagination-font-size: 0.9375rem;
    --bs-pagination-color: var(--graphite);
    --bs-pagination-hover-color: var(--graphite);
    --bs-pagination-hover-bg: var(--jaune-pale);
    --bs-pagination-focus-color: var(--graphite);
    --bs-pagination-focus-bg: transparent;
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: var(--graphite);
    --bs-pagination-active-bg: var(--jaune-pale);
    --bs-pagination-active-border-color: var(--graphite);
    --bs-pagination-disabled-color: var(--ardoise);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-border-radius: var(--rayon-s);
  }

  .page-link {
    min-width: var(--cible-min);
    min-height: var(--cible-min);
    justify-content: center;
    font-weight: 600;
  }

  .page-link:focus {
    outline: var(--trait-hauban) solid var(--focus);
    outline-offset: 2px;
  }

  .page-item.active .page-link {
    box-shadow: inset 0 calc(-1 * var(--trait-hauban)) 0 var(--graphite);
  }

  /* Fil d’Ariane (pg-ariane) : 13 px, texte doux, liens soulignés, chevrons du gabarit. */
  .breadcrumb {
    --bs-breadcrumb-padding-y: var(--espace-2);
    --bs-breadcrumb-font-size: 0.8125rem;
    --bs-breadcrumb-divider-color: var(--texte-doux);
    --bs-breadcrumb-item-padding-x: 0;
    --bs-breadcrumb-item-active-color: var(--texte);
    color: var(--texte-doux);
  }

  .breadcrumb-item + .breadcrumb-item::before {
    content: none;
  }

  /* Fenêtres (modales Bootstrap) : surface blanche, rayon de 8 px, ombre flottante, filet graphite. */
  .modal {
    --bs-modal-bg: var(--blanc);
    --bs-modal-color: var(--graphite);
    --bs-modal-border-color: var(--graphite);
    --bs-modal-border-width: var(--trait-moyen);
    --bs-modal-border-radius: var(--rayon-m);
    --bs-modal-box-shadow: var(--ombre-flottante);
    --bs-modal-header-border-color: var(--trait);
    --bs-modal-header-border-width: var(--trait-fin);
    --bs-modal-footer-border-color: var(--trait);
    --bs-modal-padding: var(--espace-6);
    --bs-modal-header-padding: var(--espace-4) var(--espace-6);
  }

  .modal-title {
    font-family: var(--font-titre);
    font-weight: 700;
  }

  /* Notifications éphémères (toast) : blanc, filet graphite. */
  .toast {
    --bs-toast-bg: var(--blanc);
    --bs-toast-color: var(--graphite);
    --bs-toast-border-color: var(--graphite);
    --bs-toast-border-width: var(--trait-moyen);
    --bs-toast-border-radius: var(--rayon-m);
    --bs-toast-box-shadow: var(--ombre-flottante);
    --bs-toast-header-bg: var(--blanc);
    --bs-toast-header-color: var(--graphite);
    --bs-toast-font-size: 0.9375rem;
  }

  .dropdown-menu {
    --bs-dropdown-link-active-bg: var(--jaune-pale);
    --bs-dropdown-link-active-color: var(--graphite);
    --bs-dropdown-link-hover-bg: var(--jaune-pale);
    --bs-dropdown-border-radius: var(--rayon-m);
    --bs-dropdown-box-shadow: var(--ombre-flottante);
  }

  .list-group {
    --bs-list-group-active-bg: var(--jaune-pale);
    --bs-list-group-active-color: var(--graphite);
    --bs-list-group-active-border-color: var(--graphite);
  }

  .nav-pills {
    --bs-nav-pills-link-active-bg: var(--jaune-pale);
    --bs-nav-pills-link-active-color: var(--graphite);
  }

  .nav-link:focus-visible {
    box-shadow: none;
    outline: var(--trait-hauban) solid var(--focus);
    outline-offset: 2px;
  }

  .accordion {
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: var(--jaune-pale);
    --bs-accordion-active-color: var(--graphite);
  }

  .progress,
  .progress-stacked {
    --bs-progress-bar-bg: var(--graphite);
  }

  .table-primary {
    --bs-table-bg: var(--jaune-pale);
    --bs-table-border-color: var(--trait);
    --bs-table-striped-bg: var(--toile-fonce);
    --bs-table-active-bg: var(--toile-fonce);
    --bs-table-hover-bg: var(--jaune-pale);
  }
}

@layer bs-custom-components {
  /* Fil d’Ariane : sur le fond de la page (pas de bande), qui passe à la ligne. */
  .breadcrumb__wrapper {
    background-color: transparent;
    margin-bottom: var(--espace-4);
  }

  .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-2);
  }

  .breadcrumb-item + .breadcrumb-item::before {
    padding-inline-end: 0;
  }

  .form-label.required::after {
    color: var(--erreur);
  }
}

@layer ps-components {
  .breadcrumb-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-min);
    color: var(--texte-doux);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .breadcrumb-item [aria-current="page"] {
    color: var(--texte);
    font-weight: 600;
  }

  .pagination__number {
    font-family: var(--font-technique);
    font-size: 0.875rem;
  }
}

@layer ps-modules {
  .search-filters__form-check--color .color:focus-visible {
    box-shadow: none;
    outline: var(--trait-hauban) solid var(--focus);
    outline-offset: 2px;
  }

  .stars-selector:has(.stars-selector__input:focus-visible) {
    box-shadow: none;
    outline: var(--trait-hauban) solid var(--focus);
    outline-offset: 2px;
  }

  .product-comment-modal input[name=comment_title].error:focus,
  .product-comment-modal input[name=customer_name].error:focus,
  .product-comment-modal textarea.error:focus {
    box-shadow: none;
    outline: var(--trait-hauban) solid var(--erreur);
    outline-offset: 2px;
  }
}

@layer utilities {
  .text-danger-on-dark {
    color: var(--erreur-pale);
  }
}

/* Messages de la boutique (_partials/notifications.tpl) : icône en tête, en erreur ou en sapin. */
.x2-message__icone { flex: none; margin-top: -1px; }
.alert-danger .x2-message__icone, .alert-danger .x2-message__texte > b { color: var(--erreur); }
.alert-success .x2-message__icone { color: var(--sapin); }
.alert-warning .x2-message__icone { color: var(--attention); }
.x2-message__texte { flex: 1; min-width: 0; padding-right: var(--espace-8); }
.x2-message__texte > b { margin-right: var(--espace-1); }
.x2-ariane__chevron { flex: none; color: var(--texte-doux); }


/* §3 En-tête (carte A1, gabarit 3) --------------------------------------------------------------------- */

/* La barre collante du design system remplace la fixation de tout l’en-tête par Hummingbird. */
@layer ps-base {
  .header {
    position: relative;
    background-color: var(--fond);
  }
}

/* Barre utilitaire : code postal, téléphone, Aide et Suivi de commande ; cibles de 44 px. */
.a1-util .pg-util .pg-wrap { height: auto; min-height: var(--cible-min); gap: var(--espace-6); }
.a1-util__liens a, .a1-util__tel a { display: inline-flex; align-items: center; min-height: var(--cible-min); }
.a1-util__tel a { font-family: var(--font-technique); font-weight: 500; }
.a1-cp { position: relative; }
.a1-cp__bouton { min-height: var(--cible-min); padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.a1-cp__panneau { position: absolute; top: 100%; left: 0; z-index: 1040; display: grid; width: min(380px, calc(100vw - 2 * var(--marge))); padding: var(--espace-6); background: var(--blanc); color: var(--texte); border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-m); box-shadow: var(--ombre-flottante); font-size: 15px; line-height: 22px; }
.a1-cp__panneau[hidden] { display: none; }
.a1-cp__panneau :focus-visible { outline-color: var(--focus); }
.a1-cp__form { display: grid; gap: var(--espace-3); }
.a1-cp__form .ab-champ__saisie { min-width: 0; }
.a1-cp__erreur { display: flex; align-items: flex-start; gap: var(--espace-2); color: var(--erreur); font-weight: 600; }
.a1-cp__erreur[hidden] { display: none; }

/* Barre principale : logo à icône 50 / 32 / 13, recherche, compte, panier, devis en contour. */
.a1-entete { position: relative; }
.a1-recherche .pg-recherche__champ { width: 100%; min-width: 0; margin: 0; font-family: var(--font-texte); line-height: 20px; color: var(--graphite); }
.a1-recherche .pg-recherche__champ::placeholder { color: var(--ardoise); opacity: 1; }
.a1-recherche .pg-recherche__champ:focus { border-color: var(--graphite); }
.a1-recherche .pg-recherche__champ::-webkit-search-cancel-button { cursor: pointer; }
.a1-recherche .pg-recherche__btn { flex: none; padding: 0; border: 0; cursor: pointer; }
.a1-recherche .pg-recherche__btn:hover { background: var(--graphite-doux); }
.a1-recherche .pg-suggest { z-index: 1040; }
.a1-actions > div { display: flex; }
.a1-action { min-height: var(--cible-min); color: var(--graphite); }
.a1-action:hover b { text-decoration: underline; text-underline-offset: 3px; }
.a1-action__texte { display: block; white-space: nowrap; }
.a1-btn { position: relative; display: flex; align-items: center; justify-content: center; width: var(--cible-min); height: var(--cible-min); padding: 0; background: none; border: 0; border-radius: var(--rayon-s); color: var(--graphite); cursor: pointer; }
.a1-btn:hover { background: var(--jaune-pale); }
.a1-burger { display: none; }

/* Navigation : univers à méga-menu au clic, rubrique courante et menu ouvert en jaune pâle + trait de 3 px. */
.a1-nav .pg-nav__item { min-height: var(--controle); margin: 0; background: none; border: 0; color: var(--graphite); font-family: var(--font-texte); cursor: pointer; transition: background-color 120ms ease-out; }
.a1-nav .pg-nav__item:hover { background: var(--jaune-pale); }
.a1-nav .pg-nav__item[aria-expanded="true"] { background: var(--jaune-pale); box-shadow: inset 0 calc(-1 * var(--trait-hauban)) 0 var(--graphite); padding-left: 18px; }
.a1-nav .pg-nav__item .pg-ico { transition: transform 120ms ease-out; }
.a1-nav .pg-nav__item[aria-expanded="true"] .pg-ico { transform: rotate(180deg); }
.a1-nav .pg-wrap, .a1-nav .pg-nav__univers, .a1-nav .pg-nav__plus { min-width: 0; }
.a1-nav .pg-nav__univers { overflow: hidden; }
.a1-mega { position: absolute; left: 0; right: 0; z-index: 1035; max-height: calc(100vh - 160px); overflow-y: auto; }
.a1-mega[hidden] { display: none; }
.a1-mega .pg-mega__col li { padding: 0; }
.a1-mega .pg-mega__col li a { display: flex; align-items: center; min-height: var(--cible-min); }
.a1-mega .pg-mega__col li a:hover, .a1-mega .pg-mega__col h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.a1-mega .pg-mega__col li a.a1-usage { display: grid; justify-items: start; gap: 2px; padding: var(--espace-1) 0; }
.a1-usage .pg-gamme { flex-wrap: nowrap; }
.a1-mega .pg-mega__conseil .pg-message { align-items: flex-start; }
.a1-mega .pg-mega__conseil .pg-message a { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.a1-mega .pg-mega__voir { justify-self: start; display: inline-flex; align-items: center; min-height: var(--cible-min); }

/* Barre collante : apparaît quand le reste de l’en-tête tient sous elle (marque.js), 160 ms. */
.a1-collant { position: fixed; top: 0; left: 0; right: 0; max-width: 100vw; overflow: hidden; z-index: 1030; transform: translateY(-110%); visibility: hidden; transition: transform 160ms ease-out, visibility 0s linear 160ms; }
.a1-collant.est-visible { transform: none; visibility: visible; transition: transform 160ms ease-out; }
.a1-collant .pg-wrap { align-items: center; gap: var(--espace-4); min-width: 0; }
.a1-collant .pg-logo-ligne { flex: none; }
.a1-collant__nav { gap: var(--espace-4); min-width: 0; height: 100%; overflow: hidden; }
.a1-collant__nav .pg-nav__item, .a1-collant__nav .pg-nav__item:first-child { padding: 0 var(--espace-2); white-space: nowrap; font-size: 14px; }
.a1-collant__nav .pg-nav__item:hover { background: var(--jaune-pale); }
.a1-collant .pg-collant__btn { padding: 0; background: none; border: 0; border-radius: var(--rayon-s); color: var(--graphite); cursor: pointer; }
.a1-collant .pg-collant__btn:hover { background: var(--jaune-pale); }
.a1-collant .a1-panier__lien { justify-content: center; width: var(--cible-min); height: var(--cible-min); }
.a1-collant .a1-panier__lien .pg-badge { left: 22px; top: 2px; }
.a1-collant .a1-action__texte { display: none; }
.a1-collant__menu { display: none; }

/* Logo à icône : tailles de la barre collante (40 / 26) et du panneau (50 / 26). */
.pg-logo-ligne { color: inherit; text-decoration: none; }
.pg-logo-ligne--panneau .pg-logo-ligne__mot { height: 26px; }

/* Panneau de menu (téléphone, et bouton menu de la barre collante de 992 à 1 359 px). */
.a1-panneau { position: fixed; inset: 0; z-index: 1050; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--fond); }
.a1-panneau[hidden] { display: none; }
.a1-panneau__tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--espace-4); background: var(--fond); border-bottom: var(--trait-moyen) solid var(--graphite); }
.a1-mob-menu summary { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); min-height: var(--controle); padding: 12px var(--espace-4); border-bottom: var(--trait-fin) solid var(--trait); font-size: 16px; font-weight: 600; list-style: none; cursor: pointer; }
.a1-mob-menu summary::-webkit-details-marker { display: none; }
.a1-mob-menu details[open] > summary { background: var(--jaune-pale); border-bottom: var(--trait-moyen) solid var(--graphite); }
.a1-mob-menu details[open] > summary .pg-ico { transform: rotate(180deg); }
.a1-mob-menu ul { padding: var(--espace-1) 0 var(--espace-2); }
.a1-mob-menu li { padding: 0 var(--espace-6); font-size: 15px; }
.a1-mob-menu li a { display: flex; align-items: center; gap: var(--espace-2); min-height: var(--cible-min); }
.a1-mob-menu li a.a1-usage { display: flex; flex-wrap: wrap; }
.a1-mob-menu li.a1-inter { padding-top: var(--espace-2); font-family: var(--font-technique); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.a1-mob-menu li.a1-voir a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.a1-panneau__lien { display: flex; align-items: center; min-height: var(--controle); padding: 12px var(--espace-4); border-bottom: var(--trait-fin) solid var(--trait); font-size: 16px; font-weight: 600; }
.a1-panneau__lien.a1-raccourci { font-weight: 500; }
.a1-panneau__pied { display: grid; gap: var(--espace-3); padding: var(--espace-4); }
.a1-panneau__pied .ab-bouton { width: 100%; }
.a1-panneau__tel { display: flex; align-items: center; justify-content: center; gap: var(--espace-2); min-height: var(--cible-min); font-size: 14px; }
.a1-panneau__liens { display: flex; justify-content: center; flex-wrap: wrap; column-gap: var(--espace-6); font-size: 14px; }
.a1-panneau__liens a { display: inline-flex; align-items: center; min-height: var(--cible-min); text-decoration: underline; text-underline-offset: 3px; }

/* Aperçu du panier (état 04) et recherche instantanée (état 05), construits par marque.js. */
.a1-apercu { position: fixed; z-index: 1045; max-width: calc(100vw - 2 * var(--espace-4)); color: var(--texte); }
.a1-apercu[hidden] { display: none; }
.a1-apercu__lignes { max-height: calc(4 * 97px); overflow-y: auto; }
.a1-apercu .pg-panier__ligne img { object-fit: contain; background: var(--blanc); }
.a1-apercu .pg-panier__ligne a { color: inherit; }
.a1-apercu__vide { display: grid; gap: var(--espace-3); padding: var(--espace-6); font-size: 15px; line-height: 22px; }
.a1-apercu__info { display: flex; align-items: flex-start; gap: var(--espace-2); font-size: 13px; line-height: 18px; color: var(--texte-doux); }
.a1-apercu__qte { font-family: var(--font-technique); font-size: 13px; line-height: 18px; }
.a1-apercu__decl { display: block; color: var(--texte-doux); }
.a1-apercu__prix { font-family: var(--font-technique); white-space: nowrap; }
.a1-apercu .pg-panier__actions .ab-bouton--lien { justify-self: center; width: auto; min-height: var(--cible-min); }
.a1-sugg__titre { padding: 10px var(--espace-4) 6px; border-bottom: var(--trait-fin) solid var(--trait); font-family: var(--font-technique); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.a1-sugg__sous { display: block; font-family: var(--font-technique); font-size: 12px; line-height: 16px; color: var(--texte-doux); }
.a1-sugg__prix { font-family: var(--font-technique); font-size: 13px; white-space: nowrap; }
.a1-sugg__sans-image { display: block; width: 56px; height: 56px; background: var(--toile-fonce); border-radius: var(--rayon-s); }
.pg-suggest .pg-suggest__ligne { color: inherit; }
.pg-suggest .pg-suggest__ligne img { object-fit: contain; background: var(--blanc); }
.pg-suggest .pg-suggest__ligne:hover { background: var(--jaune-pale); }
.a1-sugg__conseil { display: flex; align-items: center; gap: var(--espace-3); min-height: var(--cible-min); padding: 0 var(--espace-4); border-bottom: var(--trait-fin) solid var(--trait); font-size: 15px; line-height: 20px; color: inherit; }
.a1-sugg__conseil .pg-ico { color: var(--texte-doux); }
.a1-sugg__conseil:hover, .a1-sugg__conseil.on { background: var(--jaune-pale); }
.a1-sugg__pied { padding: 12px var(--espace-4); }
.a1-sugg__pied .ab-bouton--lien { display: inline-flex; align-items: center; min-height: var(--cible-min); }
.a1-sugg__vide { padding: var(--espace-4); font-size: 15px; line-height: 20px; color: var(--texte-doux); }

/* Défilement de la page bloqué quand le panneau de menu est ouvert. */
.a1-sans-defilement { overflow: hidden; }


/* §4 Pied de page (carte A2, gabarit 6) ----------------------------------------------------------------- */

.a2-pied { margin-top: var(--espace-16); }
.a2-reass__item { color: inherit; }
.a2-reass__icone { flex: none; width: 28px; height: 28px; object-fit: contain; }
.a2-reass__desc { font-size: 13px; line-height: 18px; color: var(--texte-doux); }
.a2-reass__desc p { margin: 0; }
.a2-lettre__texte { margin-top: var(--espace-2); max-width: 52ch; }
.a2-lettre__message { margin-bottom: var(--espace-3); }
.a2-lettre .pg-lettre__form .ab-champ__saisie:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
.a2-lettre .pg-lettre__mention a { text-decoration: underline; text-underline-offset: 3px; }
.a2-pied .pg-pied a:hover { text-decoration: underline; text-underline-offset: 3px; }
.a2-pied .pg-pied__tel a { text-decoration: none; }
.pg-pied__univers a { text-decoration: underline; text-underline-offset: 3px; }
.a2-pied .pg-pied__social { margin-right: var(--espace-2); }
.a2-lien-bouton { display: inline; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.a2-lien-bouton:hover { text-decoration: underline; text-underline-offset: 3px; }
.a2-acc__tete { display: none; }
.a2-pied .pg-pied__renoncer:hover { background: var(--graphite-doux); text-decoration: none; }


/* §5 Icônes (carte X2) : icônes Material de Hummingbird remplacées par le sprite Lucide (marque.js). */
.x2-icone { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: inherit; }
.x2-icone svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }


/* §8 Paliers --------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .a1-collant, .a1-collant.est-visible, .a1-nav .pg-nav__item, .a1-nav .pg-nav__item .pg-ico { transition: none; }
}

/* Barre collante : les univers en liens directs dès 1 360 px, sinon le bouton menu. */
@media (max-width: 1359.98px) {
  .a1-collant__nav { display: none; }
  .a1-collant__menu { display: flex; }
}

/* Moins de 1 200 px : téléphone masqué, compte et panier en icônes. */
@media (max-width: 1199.98px) {
  .a1-util__tel { display: none; }
  .a1-action__texte { display: none; }
  .a1-actions { gap: var(--espace-2); }
  .a1-action { justify-content: center; width: var(--cible-min); }
  .a1-barre .pg-wrap { gap: var(--espace-6); }
}

/* Moins de 992 px : version téléphone de l’en-tête ; marge de 16 px. */
@media (max-width: 991.98px) {
  :root { --marge: 16px; }
  .a1-util__liens { display: none; }
  .a1-util .pg-util .pg-wrap { justify-content: center; }
  .a1-barre .pg-wrap { flex-wrap: wrap; height: auto; column-gap: var(--espace-2); row-gap: 0; }
  .a1-barre .pg-logo-ligne { min-height: 56px; }
  .a1-barre .pg-logo-ligne__mot, .a1-collant .pg-logo-ligne__mot { height: 26px; }
  .a1-barre .pg-logo-ligne__icone, .a1-collant .pg-logo-ligne__icone { width: 50px; height: 50px; }
  .a1-actions { gap: 0; }
  .a1-burger { display: flex; }
  .a1-recherche { order: 3; flex: 1 0 100%; max-width: none; padding: 12px 0; }
  .a1-barre { border-bottom: var(--trait-moyen) solid var(--graphite); }
  .a1-mega { display: none; }
  .a1-collant .pg-wrap { height: 56px; gap: var(--espace-2); }
  .a1-collant__compte, .a1-collant .a1-devis { display: none; }
  .a1-collant .pg-collant__actions { gap: 0; }
}

/* Moins de 768 px : pied en une colonne ; « Nos produits » et « À propos » en accordéon. */
@media (max-width: 767.98px) {
  .a2-pied { margin-top: var(--espace-12); }
  .a2-reass .pg-reass__item, .a2-reass .pg-reass__item:first-child { padding: var(--espace-4) 0; border-left: 0; border-top: var(--trait-fin) solid var(--trait); }
  .a2-reass .pg-reass__item:first-child { border-top: 0; }
  .a2-lettre.pg-lettre .pg-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--espace-4); padding: var(--espace-8) 0; }
  .a2-lettre .titre-2 { font-size: 28px; line-height: 34px; }
  .a2-lettre .pg-lettre__form .ab-bouton { padding: 0 var(--espace-4); }
  .a2-pied .pg-pied .pg-wrap { gap: 0; padding: var(--espace-8) 0 var(--espace-4); }
  .a2-pied .pg-pied__marque { padding-bottom: var(--espace-6); }
  .a2-pied .pg-pied li { display: flex; align-items: center; min-height: var(--cible-min); padding: 0; }
  .a2-pied .pg-pied li > a, .a2-pied .a2-lien-bouton { display: flex; align-items: center; min-height: var(--cible-min); }
  .a2-col { padding: var(--espace-4) 0; border-top: var(--trait-fin) solid var(--graphite-doux); }
  .a2-acc { padding: 0; }
  .a2-acc h3 { margin: 0; }
  .a2-acc__titre { display: none; }
  .a2-acc__tete { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--controle); padding: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .a2-acc__tete .pg-ico { color: var(--toile); }
  .a2-acc__tete[aria-expanded="true"] .pg-ico { transform: rotate(180deg); }
  .a2-acc ul { padding-bottom: var(--espace-3); }
  .a2-pied .pg-pied__renoncer { width: 100%; justify-content: center; }
  .a2-pied .pg-pied__bas .pg-wrap { flex-direction: column; align-items: flex-start; gap: var(--espace-3); padding: var(--espace-4) 0 var(--espace-6); }
  .a2-pied .pg-pied--court .a2-col:first-child { border-top: 0; padding-top: 0; }
}

/* À partir de 768 px, les colonnes de l’accordéon restent ouvertes quoi qu’en dise marque.js. */
@media (min-width: 768px) {
  .a2-acc ul[hidden] { display: block; }
}

/* Moins de 480 px : rien de propre au socle (grilles de produits : feuilles de pages). */

/* Moins de 380 px : logo 40 / 22, écart de 8 px, boutons de 40 px. */
@media (max-width: 379.98px) {
  .a1-barre .pg-logo-ligne, .a1-collant .pg-logo-ligne, .pg-logo-ligne--panneau { gap: var(--espace-2); }
  .a1-barre .pg-logo-ligne__icone, .a1-collant .pg-logo-ligne__icone, .pg-logo-ligne--panneau .pg-logo-ligne__icone { width: 40px; height: 40px; }
  .a1-barre .pg-logo-ligne__mot, .a1-collant .pg-logo-ligne__mot, .pg-logo-ligne--panneau .pg-logo-ligne__mot { height: 22px; }
  .a1-actions .a1-action, .a1-burger, .a1-collant .pg-collant__btn, .a1-collant .a1-panier__lien { width: var(--cible-min); height: var(--cible-min); min-height: var(--cible-min); }
}