/* ==========================================================================
   ds-shell.css — CHROME GLOBAL (barre utilitaire, en-tete, navigation,
   selecteur de langue, fil d'Ariane, pied de page, bandeau cookies,
   notifications, champs de formulaire partages).

   Charge APRES app.css (lui-meme apres design-system.css) : a specificite
   egale, ce fichier gagne la cascade. Il ne redefinit aucun token et
   n'ecrit aucune couleur en dur — tout derive de --ds-*.

   Sommaire
     0.  Variables locales derivees
     1.  Barre utilitaire        .top-header__*
     2.  En-tete + nav bureau    .header__*
     3.  Selecteur de langue     .translate__*
     4.  Tiroir mobile           .header__mobile-*
     5.  Fil d'Ariane            .breadcrumb__*
     6.  Pied de page            .footer__*
     7.  Bandeau cookies         .cookie-banner__*
     8.  Notifications           .notification*
     9.  Champs de formulaire    .form-field*
     10. Section avantages       .avantages-*
     11. Mouvement reduit
   ========================================================================== */

/* ==========================================================================
   0. VARIABLES LOCALES DERIVEES
   Uniquement des derivations des 4 teintes de marque via color-mix().
   ========================================================================== */

.top-header,
.header,
.footer {
  /* Surfaces posees sur l'encre */
  --shell-on-ink-1: color-mix(in srgb, var(--ds-paper) 8%, transparent);
  --shell-on-ink-2: color-mix(in srgb, var(--ds-paper) 14%, transparent);
  --shell-on-ink-3: color-mix(in srgb, var(--ds-paper) 22%, transparent);
  /* Anneau de focus lisible sur fond encre (>= 3:1) */
  --shell-focus-inverse: color-mix(in srgb, var(--ds-accent) 45%, var(--ds-paper));
  /* Accent eclairci, lisible sur encre */
  --shell-accent-on-ink: color-mix(in srgb, var(--ds-accent) 42%, var(--ds-paper));
}

/* ==========================================================================
   1. BARRE UTILITAIRE (contact, aide, langue, compte)
   ========================================================================== */

.top-header {
  position: relative;
  z-index: var(--ds-z-sticky);
  background: var(--ds-ink);
  color: var(--ds-text-inverse-muted);
  border-bottom: 1px solid var(--ds-border-inverse);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-xs);
}

.top-header__container {
  max-width: var(--ds-container-wide);
  margin: 0 auto;
  padding: 0 var(--ds-gutter);
}

.top-header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  min-height: 40px;
}

/* --- Bloc contact --- */
.top-header__contact {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  min-width: 0;
}

.top-header__contact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: 32px;
  padding: var(--ds-space-1) var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-inverse-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ds-transition), background-color var(--ds-transition);
}

a.top-header__contact-item:hover {
  background: var(--shell-on-ink-1);
  color: var(--ds-text-inverse);
}

.top-header__contact-item:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: var(--ds-focus-offset);
}

.top-header__contact-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.8;
}

.top-header__contact-text {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  letter-spacing: var(--ds-tracking-normal);
}

/* --- Liens rapides --- */
.top-header__links {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  flex-shrink: 0;
}

.top-header__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: 32px;
  padding: var(--ds-space-1) var(--ds-space-3);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-full);
  background: none;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-inverse-muted);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--ds-transition), background-color var(--ds-transition),
    border-color var(--ds-transition);
}

.top-header__link:hover {
  background: var(--shell-on-ink-1);
  color: var(--ds-text-inverse);
}

.top-header__link:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: var(--ds-focus-offset);
}

.top-header__link--login {
  background: var(--shell-on-ink-2);
  border-color: var(--ds-border-inverse);
  color: var(--ds-text-inverse);
}

.top-header__link--login:hover {
  background: var(--shell-on-ink-3);
  border-color: var(--shell-on-ink-3);
}

.top-header__link-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* --- Menu compte --- */
.top-header__dropdown {
  position: relative;
}

.top-header__dropdown-icon {
  width: 11px;
  height: 11px;
  opacity: 0.7;
  transition: transform var(--ds-transition);
}

.top-header__dropdown[data-dropdown-open] .top-header__dropdown-icon {
  transform: rotate(180deg);
}

.top-header__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--ds-space-2));
  right: 0;
  z-index: var(--ds-z-dropdown);
  min-width: 240px;
  padding: var(--ds-space-2);
  background: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--ds-transition), transform var(--ds-transition),
    visibility var(--ds-transition);
}

.top-header__dropdown[data-dropdown-open] .top-header__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.top-header__dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  min-height: var(--ds-touch-target);
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text);
  text-decoration: none;
  transition: background-color var(--ds-transition), color var(--ds-transition);
}

.top-header__dropdown-link:hover {
  background: var(--ds-accent-subtle);
  color: var(--ds-accent-hover);
}

.top-header__dropdown-link:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-color);
  outline-offset: calc(var(--ds-focus-offset) * -1);
}

.top-header__dropdown-link--danger {
  color: var(--ds-danger);
}

.top-header__dropdown-link--danger:hover {
  background: var(--ds-danger-subtle);
  color: var(--ds-danger-hover);
}

.top-header__dropdown-link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.75;
}

.top-header__dropdown-link-text {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
  font-size: var(--ds-text-sm);
}

.top-header__dropdown-divider {
  height: 1px;
  margin: var(--ds-space-2) 0;
  background: var(--ds-border);
}

/* --- Barre utilitaire responsive --- */
@media (max-width: 1024px) {
  .top-header__contact-item--desktop,
  .top-header__link--desktop {
    display: none;
  }
}

@media (max-width: 639px) {
  .top-header__content {
    gap: var(--ds-space-2);
  }

  .top-header__link .top-header__link-text {
    display: none;
  }

  .top-header__link {
    padding: var(--ds-space-1) var(--ds-space-2);
  }

  .top-header__dropdown-menu {
    right: calc(var(--ds-gutter) * -1 + var(--ds-space-2));
    min-width: min(280px, calc(100vw - var(--ds-space-8)));
  }
}

/* ==========================================================================
   2. EN-TETE PRINCIPAL + NAVIGATION BUREAU
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-fixed);
  height: 72px;
  background: color-mix(in srgb, var(--ds-ink) 96%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ds-border-inverse);
}

.header__container {
  max-width: var(--ds-container-wide);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--ds-gutter);
}

.header__content {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  height: 100%;
}

/* --- Logo --- */
.header__logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-1);
  margin-left: calc(var(--ds-space-1) * -1);
  border-radius: var(--ds-radius-sm);
  text-decoration: none;
  color: var(--ds-text-inverse);
}

.header__logo-mark {
  display: block;
  width: auto;
  height: 34px;
  flex-shrink: 0;
  color: var(--ds-text-inverse);
}

.header__logo-bar {
  fill: currentColor;
}

.header__logo-rule {
  fill: var(--shell-accent-on-ink);
  transition: fill var(--ds-transition);
}

.header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: var(--ds-leading-none);
}

.header__logo-name {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.1em;
  color: var(--ds-text-inverse);
  transition: color var(--ds-transition);
}

.header__logo-tagline {
  margin-top: 3px;
  font-size: 0.625rem;
  font-weight: var(--ds-weight-medium);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-text-inverse-muted);
}

.header__logo:hover .header__logo-rule {
  fill: var(--ds-text-inverse);
}

.header__logo:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: var(--ds-focus-offset);
}

/* --- Navigation --- */
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  margin-inline: auto;
}

.header__dropdown {
  position: relative;
}

.header__nav-link {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: 40px;
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-inverse-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ds-transition), background-color var(--ds-transition);
}

.header__nav-link:hover {
  background: var(--shell-on-ink-1);
  color: var(--ds-text-inverse);
}

.header__nav-link:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: var(--ds-focus-offset);
}

.header__nav-link--active {
  position: relative;
  color: var(--ds-text-inverse);
}

.header__nav-link--active::after {
  content: '';
  position: absolute;
  right: var(--ds-space-3);
  bottom: 2px;
  left: var(--ds-space-3);
  height: 2px;
  border-radius: 2px;
  background: var(--shell-accent-on-ink);
}

.header__nav-icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.header__nav-chevron {
  width: 11px;
  height: 11px;
  opacity: 0.55;
  transition: transform var(--ds-transition);
}

.header__dropdown:hover .header__nav-chevron,
.header__dropdown:focus-within .header__nav-chevron {
  transform: rotate(180deg);
}

/* --- Menu deroulant bureau --- */
.header__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: var(--ds-z-dropdown);
  min-width: 248px;
  margin-top: var(--ds-space-2);
  padding: var(--ds-space-2);
  background: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity var(--ds-transition), transform var(--ds-transition),
    visibility var(--ds-transition);
}

.header__dropdown:hover .header__dropdown-menu,
.header__dropdown:focus-within .header__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.header__dropdown-item {
  display: block;
  padding: var(--ds-space-3) var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text);
  text-decoration: none;
  transition: background-color var(--ds-transition), color var(--ds-transition);
}

.header__dropdown-item:hover {
  background: var(--ds-accent-subtle);
  color: var(--ds-accent-hover);
}

.header__dropdown-item:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-color);
  outline-offset: calc(var(--ds-focus-offset) * -1);
}

/* --- Actions --- */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin-left: auto;
}

.header__login-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: 40px;
  padding: 0 var(--ds-space-4);
  border: 1px solid var(--ds-border-inverse);
  border-radius: var(--ds-radius-full);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-inverse-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ds-transition), background-color var(--ds-transition),
    border-color var(--ds-transition);
}

.header__login-btn:hover {
  background: var(--shell-on-ink-1);
  border-color: var(--shell-on-ink-3);
  color: var(--ds-text-inverse);
}

.header__login-btn:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: var(--ds-focus-offset);
}

.header__login-icon {
  width: 16px;
  height: 16px;
}

.header__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: 40px;
  padding: 0 var(--ds-space-5);
  background: var(--ds-accent);
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-radius-full);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-on-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ds-transition), border-color var(--ds-transition);
}

.header__cta:hover {
  background: var(--ds-accent-hover);
  border-color: var(--ds-accent-hover);
  color: var(--ds-text-on-accent);
}

.header__cta:active {
  background: var(--ds-accent-active);
  border-color: var(--ds-accent-active);
}

.header__cta:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-paper);
  outline-offset: var(--ds-focus-offset);
}

.header__cta-icon {
  width: 14px;
  height: 14px;
  transition: transform var(--ds-transition);
}

.header__cta:hover .header__cta-icon {
  transform: translateX(2px);
}

/* --- Bouton hamburger --- */
.header__mobile-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: var(--ds-touch-target);
  min-height: var(--ds-touch-target);
  padding: var(--ds-space-2);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  color: var(--ds-text-inverse);
  cursor: pointer;
  transition: background-color var(--ds-transition), border-color var(--ds-transition);
}

.header__mobile-btn:hover {
  background: var(--shell-on-ink-1);
  border-color: var(--ds-border-inverse);
}

.header__mobile-btn:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: var(--ds-focus-offset);
}

.header__hamburger,
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 22px;
  height: 16px;
}

.header__hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--ds-transition), opacity var(--ds-transition);
}

/* Etat ouvert : le controleur mobile_menu ajoute .active sur .hamburger */
.hamburger.active .header__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.active .header__hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger.active .header__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   3. SELECTEUR DE LANGUE (pilote par language_selector_controller.js)
   Cible .show sur le menu + aria-expanded sur le bouton : ne pas renommer.
   ========================================================================== */

.translate {
  position: relative;
}

.translate--bar {
  position: relative;
  inset: auto;
  z-index: auto;
}

.translate__dropdown {
  position: relative;
}

.translate__button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--ds-space-1) var(--ds-space-3);
  background: var(--shell-on-ink-1);
  border: 1px solid var(--ds-border-inverse);
  border-radius: var(--ds-radius-full);
  color: var(--ds-text-inverse-muted);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  cursor: pointer;
  box-shadow: none;
  min-width: 0;
  transition: background-color var(--ds-transition), border-color var(--ds-transition),
    color var(--ds-transition);
}

.translate__button:hover {
  background: var(--shell-on-ink-2);
  border-color: var(--shell-on-ink-3);
  color: var(--ds-text-inverse);
  box-shadow: none;
}

.translate__button:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: var(--ds-focus-offset);
}

.translate__current {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  width: 100%;
}

.translate__flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
}

.translate__text {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  color: inherit;
  white-space: nowrap;
}

.translate__arrow {
  display: inline-flex;
  width: 11px;
  height: 11px;
  color: inherit;
  opacity: 0.7;
  transition: transform var(--ds-transition);
  flex-shrink: 0;
}

.translate__arrow .arrow-icon {
  width: 11px;
  height: 11px;
}

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

.translate__menu {
  position: absolute;
  top: calc(100% + var(--ds-space-2));
  bottom: auto;
  right: 0;
  left: auto;
  z-index: var(--ds-z-dropdown);
  width: max-content;
  min-width: 190px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ds-space-2);
  background: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--ds-transition), transform var(--ds-transition),
    visibility var(--ds-transition);
}

.translate__menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.translate__option {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  min-height: var(--ds-touch-target);
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 0;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text);
  text-decoration: none;
  transition: background-color var(--ds-transition), color var(--ds-transition);
}

.translate__option:hover {
  background: var(--ds-accent-subtle);
  color: var(--ds-accent-hover);
}

.translate__option:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-color);
  outline-offset: calc(var(--ds-focus-offset) * -1);
}

.translate__option .translate__text {
  font-size: var(--ds-text-sm);
  color: inherit;
}

@media (max-width: 639px) {
  .translate--bar .translate__button .translate__text {
    display: none;
  }

  .translate__menu {
    right: 0;
    min-width: 180px;
  }
}

/* ==========================================================================
   4. TIROIR MOBILE
   Classes .active posees par mobile_menu_controller / mobile_dropdown_controller.
   ========================================================================== */

.header__mobile-overlay {
  display: block; /* neutralise le display:none herite d'app.css */
  position: fixed;
  inset: 0;
  z-index: var(--ds-z-backdrop);
  background: var(--ds-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ds-transition-slow), visibility var(--ds-transition-slow);
}

.header__mobile-overlay.active {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Le tiroir ci-dessous est en position:fixed avec transform:translateX(100%)
   quand il est ferme. Sa boite deportee compte malgre tout dans la largeur du
   document : le navigateur ajoute un defilement horizontal egal a la largeur du
   tiroir — mesure a +288px sur un viewport de 320px, +360px au-dela.
   Le symptome etait visible sur TOUTES les pages en mobile et tablette.

   overflow-x: clip supprime ce debordement sans transformer html/body en
   conteneur de defilement — contrairement a overflow-x: hidden, qui casserait
   position: sticky (en-tete colle) et le scroll-behavior fluide. */
html,
body {
  overflow-x: clip;
}

.header__mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--ds-z-modal);
  width: min(360px, 90vw);
  max-width: 100vw;
  height: auto; /* neutralise le height:100vh herite d'app.css */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ds-ink);
  border-left: 1px solid var(--ds-border-inverse);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--ds-transition-slow), visibility var(--ds-transition-slow);
  -webkit-overflow-scrolling: touch;
}

.header__mobile-menu.active {
  transform: translateX(0);
  visibility: visible;
}

.header__mobile-content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--ds-space-5) var(--ds-space-5) calc(var(--ds-space-6) + env(safe-area-inset-bottom, 0px));
}

.header__mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-5);
  padding-bottom: var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border-inverse);
}

.header__mobile-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-touch-target);
  height: var(--ds-touch-target);
  flex-shrink: 0;
  background: var(--shell-on-ink-1);
  border: 1px solid var(--ds-border-inverse);
  border-radius: var(--ds-radius-md);
  color: var(--ds-text-inverse);
  cursor: pointer;
  transition: background-color var(--ds-transition), border-color var(--ds-transition);
}

.header__mobile-close:hover {
  background: var(--shell-on-ink-2);
  border-color: var(--shell-on-ink-3);
}

.header__mobile-close:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: var(--ds-focus-offset);
}

.header__mobile-close-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.header__mobile-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
}

.header__mobile-dropdown {
  border-bottom: 1px solid color-mix(in srgb, var(--ds-paper) 6%, transparent);
}

.header__mobile-dropdown:last-child {
  border-bottom: 0;
}

.header__mobile-link,
.header__mobile-toggle {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  width: 100%;
  min-height: var(--ds-touch-target);
  padding: var(--ds-space-3) var(--ds-space-3);
  background: none;
  border: none;
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-inverse);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ds-transition), color var(--ds-transition);
}

.header__mobile-link:hover,
.header__mobile-toggle:hover {
  background: var(--shell-on-ink-1);
  color: var(--ds-text-inverse);
}

.header__mobile-link:focus-visible,
.header__mobile-toggle:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: calc(var(--ds-focus-offset) * -1);
}

.header__mobile-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

.header__mobile-text {
  flex: 1 1 auto;
  min-width: 0;
}

.header__mobile-chevron {
  display: inline-flex;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform var(--ds-transition);
}

.header__mobile-chevron svg,
.header__mobile-chevron .header__mobile-chevron-icon {
  width: 13px;
  height: 13px;
  opacity: 0.6;
}

.header__mobile-submenu {
  display: none;
  padding: 0 0 var(--ds-space-2) var(--ds-space-8);
}

.header__mobile-submenu.active {
  display: block;
}

.header__mobile-sublink {
  display: block;
  min-height: var(--ds-touch-target);
  padding: var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-inverse-muted);
  text-decoration: none;
  transition: background-color var(--ds-transition), color var(--ds-transition);
}

.header__mobile-sublink:hover {
  background: var(--shell-on-ink-1);
  color: var(--ds-text-inverse);
}

.header__mobile-sublink:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: calc(var(--ds-focus-offset) * -1);
}

.header__mobile-cta {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-6);
  padding-top: var(--ds-space-5);
  border-top: 1px solid var(--ds-border-inverse);
}

.header__mobile-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-touch-target);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: none;
  border: 1px solid var(--ds-border-inverse);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-inverse);
  text-decoration: none;
  transition: background-color var(--ds-transition), border-color var(--ds-transition);
}

.header__mobile-login:hover {
  background: var(--shell-on-ink-1);
  border-color: var(--shell-on-ink-3);
  color: var(--ds-text-inverse);
}

.header__mobile-login:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: var(--ds-focus-offset);
}

.header__mobile-login-icon {
  width: 18px;
  height: 18px;
}

.header__mobile-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: 52px;
  padding: var(--ds-space-3) var(--ds-space-5);
  background: var(--ds-accent);
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-radius-full);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-on-accent);
  text-decoration: none;
  transition: background-color var(--ds-transition), border-color var(--ds-transition);
}

.header__mobile-apply:hover {
  background: var(--ds-accent-hover);
  border-color: var(--ds-accent-hover);
  color: var(--ds-text-on-accent);
}

.header__mobile-apply:active {
  background: var(--ds-accent-active);
  border-color: var(--ds-accent-active);
}

.header__mobile-apply:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-paper);
  outline-offset: var(--ds-focus-offset);
}

/* --- Bascule bureau / mobile --- */
@media (max-width: 1199px) {
  .header__nav {
    gap: 0;
  }

  .header__nav-link {
    padding: var(--ds-space-2);
    font-size: var(--ds-text-xs);
  }
}

@media (max-width: 1024px) {
  .header {
    height: 64px;
  }

  .header__nav,
  .header__login-btn {
    display: none;
  }

  .header__mobile-btn {
    display: inline-flex;
  }

  .header__logo-mark {
    height: 30px;
  }
}

@media (max-width: 479px) {
  .header__cta {
    padding: 0 var(--ds-space-4);
  }

  .header__cta-text {
    display: none;
  }

  .header__cta {
    min-width: var(--ds-touch-target);
    justify-content: center;
  }

  .header__logo-text {
    display: none;
  }
}

/* ==========================================================================
   5. FIL D'ARIANE
   ========================================================================== */

.breadcrumb {
  background: var(--ds-surface-sunken);
  border-bottom: 1px solid var(--ds-border);
}

.breadcrumb__container {
  max-width: var(--ds-container-wide);
  margin: 0 auto;
  padding: var(--ds-space-3) var(--ds-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}

/* Le separateur est desormais un <span aria-hidden> dans le markup :
   on neutralise l'ancien ::after herite d'app.css pour eviter le doublon. */
.breadcrumb__item:not(:last-child)::after {
  content: none;
}

.breadcrumb__separator {
  color: var(--ds-text-subtle);
  font-size: var(--ds-text-xs);
  line-height: 1;
  user-select: none;
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  padding: var(--ds-space-1) 0;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-muted);
  text-decoration: none;
  transition: color var(--ds-transition);
}

.breadcrumb__link:hover {
  color: var(--ds-accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.breadcrumb__link:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-color);
  outline-offset: var(--ds-focus-offset);
}

.breadcrumb__link--static,
.breadcrumb__link--static:hover {
  color: var(--ds-text-muted);
  text-decoration: none;
  cursor: default;
}

.breadcrumb__item--current {
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text);
}

/* ==========================================================================
   6. PIED DE PAGE
   ========================================================================== */

.footer {
  background: var(--ds-ink);
  color: var(--ds-text-inverse-muted);
  border-top: 1px solid var(--ds-border-inverse);
}

.footer__container {
  max-width: var(--ds-container-wide);
  margin: 0 auto;
  padding: var(--ds-section-y) var(--ds-gutter) var(--ds-space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-10) var(--ds-space-8);
}

@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
    gap: var(--ds-space-8);
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  max-width: 42ch;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .footer__brand {
    grid-column: 1 / -1;
  }
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3);
  align-self: flex-start;
  padding: var(--ds-space-1);
  margin-left: calc(var(--ds-space-1) * -1);
  border-radius: var(--ds-radius-sm);
  text-decoration: none;
  color: var(--ds-text-inverse);
}

.footer__logo:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: var(--ds-focus-offset);
}

.footer__logo-mark {
  display: block;
  height: 32px;
  width: auto;
  color: var(--ds-text-inverse);
}

.footer__logo-bar {
  fill: currentColor;
}

.footer__logo-rule {
  fill: var(--shell-accent-on-ink);
}

.footer__logo-name {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.1em;
  color: var(--ds-text-inverse);
}

.footer__description {
  margin: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-inverse-muted);
}

.footer__title {
  margin: 0 0 var(--ds-space-4);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-text-inverse);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__link {
  display: inline-block;
  padding: var(--ds-space-2) 0;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-inverse-muted);
  text-decoration: none;
  transition: color var(--ds-transition);
}

.footer__link:hover {
  color: var(--ds-text-inverse);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer__link:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: var(--ds-focus-offset);
  border-radius: var(--ds-radius-sm);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  color: var(--ds-text-inverse-muted);
  text-decoration: none;
  transition: color var(--ds-transition);
}

a.footer__contact-item:hover {
  color: var(--ds-text-inverse);
}

a.footer__contact-item:focus-visible {
  outline: var(--ds-focus-width) solid var(--shell-focus-inverse);
  outline-offset: var(--ds-focus-offset);
  border-radius: var(--ds-radius-sm);
}

.footer__contact-icon {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  flex-shrink: 0;
  opacity: 0.7;
}

.footer__column {
  min-width: 0;
}

.footer__contact-label {
  display: block;
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
  color: var(--ds-text-inverse-muted);
  opacity: 0.75;
}

.footer__contact-value {
  display: block;
  margin-top: 2px;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-inverse);
  overflow-wrap: anywhere;
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  /* Pas de margin-top : elle s'ajoutait au padding ci-dessous et creait une
     bande vide d'environ 64px entre les colonnes et la ligne de copyright. */
  margin-top: 0;
  padding-top: var(--ds-space-6);
  border-top: 1px solid var(--ds-border-inverse);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-6);
  }
}

.footer__copyright {
  margin: 0;
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-inverse-muted);
}

.footer__reg {
  white-space: nowrap;
}

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

.footer__cert {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-1) var(--ds-space-3);
  border: 1px solid var(--ds-border-inverse);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-inverse-muted);
  white-space: nowrap;
}

.footer__cert-icon {
  width: 13px;
  height: 13px;
  opacity: 0.8;
}

/* ==========================================================================
   7. BANDEAU COOKIES — barre basse discrete, non bloquante
   Classes pilotees par cookie_banner_controller.js : .hidden,
   .cookie-banner--visible (ne pas renommer).
   ========================================================================== */

.cookie-banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--ds-z-fixed);
  padding: var(--ds-space-4) var(--ds-gutter) calc(var(--ds-space-4) + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: opacity var(--ds-transition-slow), transform var(--ds-transition-slow);
}

.cookie-banner.hidden {
  display: none;
}

.cookie-banner.cookie-banner--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-banner__panel {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  max-width: var(--ds-container);
  margin: 0 auto;
  padding: var(--ds-space-5);
  background: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
}

@media (min-width: 1024px) {
  .cookie-banner__panel {
    flex-direction: row;
    align-items: center;
    gap: var(--ds-space-8);
  }
}

.cookie-banner__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.cookie-banner__title {
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
}

.cookie-banner__description {
  margin: 0;
  max-width: var(--ds-measure);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.cookie-banner__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-3);
  margin-top: var(--ds-space-1);
  font-size: var(--ds-text-xs);
}

.cookie-banner__link {
  color: var(--ds-accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  border-radius: var(--ds-radius-sm);
  transition: color var(--ds-transition);
}

.cookie-banner__link:hover {
  color: var(--ds-accent-active);
}

.cookie-banner__link:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-color);
  outline-offset: var(--ds-focus-offset);
}

.cookie-banner__separator {
  color: var(--ds-text-subtle);
  user-select: none;
}

.cookie-banner__actions {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .cookie-banner__actions {
    flex-direction: row;
  }
}

.cookie-banner__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-touch-target);
  padding: var(--ds-space-3) var(--ds-space-6);
  border-radius: var(--ds-radius-full);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--ds-transition), border-color var(--ds-transition),
    color var(--ds-transition);
}

.cookie-banner__button:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-color);
  outline-offset: var(--ds-focus-offset);
}

.cookie-banner__button--accept {
  background: var(--ds-accent);
  border: 1px solid var(--ds-accent);
  color: var(--ds-text-on-accent);
}

.cookie-banner__button--accept:hover {
  background: var(--ds-accent-hover);
  border-color: var(--ds-accent-hover);
}

.cookie-banner__button--accept:active {
  background: var(--ds-accent-active);
  border-color: var(--ds-accent-active);
}

.cookie-banner__button--decline {
  background: var(--ds-surface-raised);
  border: 1px solid var(--ds-border-strong);
  color: var(--ds-text);
}

.cookie-banner__button--decline:hover {
  background: var(--ds-ink-subtle);
  border-color: var(--ds-muted);
}

@media (max-width: 479px) {
  .cookie-banner__button {
    width: 100%;
  }
}

/* ==========================================================================
   8. NOTIFICATIONS / MESSAGES FLASH
   Markup genere par notification_controller.js : ne renommer aucune classe.
   ========================================================================== */

.notifications-container {
  position: fixed;
  top: var(--ds-space-4);
  right: var(--ds-space-4);
  z-index: var(--ds-z-tooltip);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  width: min(400px, calc(100vw - var(--ds-space-8)));
  pointer-events: none;
}

.notification {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  position: relative;
  overflow: hidden;
  padding: var(--ds-space-4);
  background: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-muted);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-md);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
  pointer-events: auto;
  transform: translateX(110%);
  opacity: 0;
  animation: ds-shell-toast-in var(--ds-transition-slow) ease-out forwards;
}

.notification::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.35;
}

.notification--with-progress::before {
  animation: ds-shell-toast-progress var(--progress-duration, 5000ms) linear forwards;
}

.notification--success,
.notification--info {
  border-left-color: var(--ds-accent);
  color: var(--ds-accent-hover);
}

.notification--success .notification__icon,
.notification--info .notification__icon {
  color: var(--ds-accent);
}

.notification--warning {
  border-left-color: var(--ds-ink);
  color: var(--ds-ink);
}

.notification--warning .notification__icon {
  color: var(--ds-ink);
}

.notification--error {
  border-left-color: var(--ds-danger);
  color: var(--ds-danger-hover);
}

.notification--error .notification__icon {
  color: var(--ds-danger);
}

.notification__icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex-shrink: 0;
}

.notification__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.notification__content {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ds-text);
}

.notification__title {
  margin: 0 0 var(--ds-space-1);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}

.notification__message {
  margin: 0;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
  overflow-wrap: anywhere;
}

.notification__content-extra {
  margin-top: var(--ds-space-2);
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}

.notification__content-extra ul,
.notification__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.notification__content-extra li,
.notification__list li {
  position: relative;
  margin-bottom: var(--ds-space-1);
  padding-left: var(--ds-space-4);
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}

.notification__content-extra li::before,
.notification__list li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: var(--ds-space-1);
  width: 4px;
  height: 4px;
  border-radius: var(--ds-radius-full);
  background: currentColor;
  opacity: 0.6;
}

.notification__list li:last-child,
.notification__content-extra li:last-child {
  margin-bottom: 0;
}

.notification__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -4px 0 0;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: background-color var(--ds-transition), color var(--ds-transition);
}

.notification__close:hover {
  background: var(--ds-ink-subtle);
  color: var(--ds-text);
}

.notification__close:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-color);
  outline-offset: calc(var(--ds-focus-offset) * -1);
}

.notification__close svg {
  width: 15px;
  height: 15px;
}

.notification--removing {
  animation: ds-shell-toast-out var(--ds-transition-slow) ease-out forwards;
}

.notification--loading .notification__icon {
  animation: ds-shell-spin 1s linear infinite;
}

@keyframes ds-shell-toast-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes ds-shell-toast-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}

@keyframes ds-shell-toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

@keyframes ds-shell-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 639px) {
  .notifications-container {
    top: var(--ds-space-3);
    right: var(--ds-space-3);
    left: var(--ds-space-3);
    width: auto;
  }

  .notification {
    transform: translateY(-120%);
    animation-name: ds-shell-toast-in-top;
  }

  .notification--removing {
    animation-name: ds-shell-toast-out-top;
  }
}

@keyframes ds-shell-toast-in-top {
  from { transform: translateY(-120%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes ds-shell-toast-out-top {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(-120%); opacity: 0; }
}

/* ==========================================================================
   9. CHAMPS DE FORMULAIRE PARTAGES (_form_field / _field_errors)
   Les primitives .ds-field / .ds-input / .ds-field-error font le gros du
   travail : on ne garde ici que les alias historiques .form-field*.
   ========================================================================== */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-5);
}

.form-field__label {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-1);
  margin: 0;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text);
}

.form-field__label-text,
.form-field__label label {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text);
}

.form-field__required {
  color: var(--ds-danger);
  font-weight: var(--ds-weight-semibold);
}

.form-field__input-wrapper {
  position: relative;
}

.form-field__input,
.form-field__select,
.form-field__textarea {
  width: 100%;
}

.form-field__error-icon {
  position: absolute;
  top: 50%;
  right: var(--ds-space-3);
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--ds-danger);
  pointer-events: none;
}

.form-field__error-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.form-field__help {
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted);
}

.form-field-errors {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
}

.form-field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-normal);
  color: var(--ds-danger);
}

.form-field-error__icon {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

.form-field-error__message {
  flex: 1 1 auto;
  min-width: 0;
}

/* Champ en erreur : la primitive gere [aria-invalid=true]; on double
   la regle pour le wrapper historique .form-field--error. */
.form-field--error .form-field__input,
.form-field--error .form-field__select,
.form-field--error .form-field__textarea {
  border-color: var(--ds-danger);
}

.form-field--error .form-field__input:focus-visible,
.form-field--error .form-field__select:focus-visible,
.form-field--error .form-field__textarea:focus-visible {
  outline-color: var(--ds-danger);
  box-shadow: 0 0 0 3px var(--ds-danger-ring);
}

/* ==========================================================================
   10. SECTION AVANTAGES (partial reutilisable)
   ========================================================================== */

.avantages-section {
  padding: var(--ds-section-y) 0;
  background: var(--ds-surface-sunken);
}

.avantages-section .container {
  max-width: var(--ds-container);
  margin: 0 auto;
  padding: 0 var(--ds-gutter);
}

.avantages-section .section-header {
  max-width: 60ch;
  margin: 0 auto var(--ds-space-12);
  text-align: center;
}

.avantages-section .section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-5);
  padding: var(--ds-space-1) var(--ds-space-3);
  background: var(--ds-accent-subtle);
  border: 1px solid var(--ds-accent-border);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  letter-spacing: var(--ds-tracking-wide);
  color: var(--ds-accent-hover);
}

.avantages-section .section-badge svg {
  width: 14px;
  height: 14px;
}

.avantages-section .section-header h2 {
  margin: 0 0 var(--ds-space-4);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-text);
}

.avantages-section .section-header p {
  margin: 0;
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

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

.avantage-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding: var(--ds-space-6);
  background: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}

.avantage-card:hover {
  border-color: var(--ds-accent-border);
  box-shadow: var(--ds-shadow-sm);
}

.avantage-card.featured {
  grid-column: 1 / -1;
  background: var(--ds-ink);
  border-color: var(--ds-ink);
  color: var(--ds-text-inverse);
}

.avantage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--ds-space-2);
  background: var(--ds-accent-subtle);
  border: 1px solid var(--ds-accent-border);
  border-radius: var(--ds-radius-md);
  color: var(--ds-accent-hover);
}

.avantage-card.featured .avantage-icon {
  background: color-mix(in srgb, var(--ds-paper) 10%, transparent);
  border-color: color-mix(in srgb, var(--ds-paper) 20%, transparent);
  color: var(--ds-text-inverse);
}

.avantage-icon svg {
  width: 22px;
  height: 22px;
}

.avantage-card h3 {
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  color: inherit;
}

.avantage-card p {
  margin: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.avantage-card.featured p {
  color: var(--ds-text-inverse-muted);
}

.avantage-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-1);
}

.avantage-stats .stat {
  display: inline-flex;
  align-items: center;
  padding: var(--ds-space-1) var(--ds-space-3);
  border: 1px solid color-mix(in srgb, var(--ds-paper) 20%, transparent);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-inverse);
}

/* ==========================================================================
   11. MOUVEMENT REDUIT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .header__mobile-menu,
  .header__mobile-overlay,
  .header__dropdown-menu,
  .top-header__dropdown-menu,
  .translate__menu,
  .cookie-banner,
  .notification,
  .header__cta-icon,
  .header__nav-chevron,
  .header__mobile-chevron,
  .translate__arrow,
  .top-header__dropdown-icon,
  .header__hamburger-line,
  .avantage-card {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .notification {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-contrast: more) {
  .header__nav-link,
  .header__mobile-link,
  .header__mobile-sublink,
  .footer__link,
  .top-header__link,
  .top-header__contact-item {
    color: var(--ds-text-inverse);
  }

  .notification,
  .cookie-banner__panel,
  .header__dropdown-menu,
  .top-header__dropdown-menu,
  .translate__menu {
    border-color: var(--ds-ink);
  }
}

/* ==========================================================================
   12. AUDIT RESPONSIVE — CORRECTIFS GLOBAUX
   ==========================================================================
   Ajoute par l'agent d'audit responsive. ds-shell.css est la SEULE feuille
   chargee sur toutes les pages ET placee en dernier dans le <head>
   (base.html.twig l.139, apres importmap('app') donc apres app.css) :
   c'est le seul endroit d'ou l'on peut corriger un bug global sans toucher
   au markup.

   Convention de specificite : certains correctifs ciblent des regles ecrites
   dans un <style> inline place dans le <body>, donc PLUS TARD dans l'ordre de
   cascade qu'un <link> du <head>. A specificite egale elles gagnent. On double
   donc le nom de classe (.x.x = 0,2,0) pour reprendre la main SANS !important
   et SANS modifier le markup. Le !important n'est utilise que la ou la regle
   fautive en utilise deja un.
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 .ds-btn — white-space: nowrap fait deborder les libelles longs
   --------------------------------------------------------------------------
   design-system.css l.390 pose `white-space: nowrap` sur la primitive .ds-btn.
   Un libelle qui ne tient pas sur une ligne ne peut donc pas se replier : il
   sort du bouton et pousse la page en scroll horizontal.

   Cas reel mesure sur /fr/connexion a 320px :
     .auth-page (gutter 16px) -> 288px
     .auth-card (padding 24px) -> 240px
     .ds-btn--block (padding-inline 24px) -> 192px utiles
     contenu = icone 18px + gap 8px + « Se connecter en toute securite »
               (30 caracteres a 14px) ~= 253px  => ~61px de debordement.
   Meme probleme en es (« Iniciar sesion de forma segura », 30 car.) et en pt
   (« Iniciar sessao em seguranca », 27 car.), et sur /fr/simulation-credit
   (« Voir le tableau d'amortissement », 31 car.).

   Correctif :
     - un bouton pleine largeur n'a aucune raison de rester sur une ligne ;
     - en dessous de 640px on autorise le repli pour tous les boutons.
   min-height: 44px est conserve, le bouton grandit simplement en hauteur.
   L'agent services avait deja pose ce correctif, mais scope a sa seule zone
   (.svc-card/.svc-hero/.svc-cta/.svc-split/.svc-confirm) : on le generalise.
   -------------------------------------------------------------------------- */

.ds-btn--block {
  white-space: normal;
}

@media (max-width: 639.98px) {
  .ds-btn {
    white-space: normal;
    height: auto;
  }
}

/* Un .ds-btn place dans un conteneur flex/grid doit pouvoir retrecir : sans
   min-width: 0 un flex item garde sa largeur min-content et deborde.
   .ds-btn--icon est EXCLU : design-system.css l.506-510 lui impose
   width/min-width = 44px pour tenir la cible tactile, et cette feuille etant
   chargee apres, un `.ds-btn { min-width: 0 }` nu l'ecraserait (specificite
   egale, ordre de source) et laisserait le bouton icone retrecir sous 44px. */
.ds-btn:not(.ds-btn--icon) {
  min-width: 0;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   12.2 Barre superieure — cibles tactiles sous 44px sur mobile
   --------------------------------------------------------------------------
   Sur mobile la .top-header reste affichee et ne conserve que deux controles
   reellement cliquables : le lien telephone (.top-header__contact-item, 32px
   de haut, l.52) et le selecteur de langue (.translate__button, 32px, l.669).
   Les variantes --desktop sont bien masquees, mais ces deux-la restent a 32px,
   sous le minimum de 44px exige. Le probleme est present sur TOUTES les pages.

   On ne remonte la hauteur qu'en dessous de 1024px : au-dessus le pointeur est
   une souris et la barre compacte reste pertinente.
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
  .top-header__contact-item,
  .top-header__link,
  .translate--bar .translate__button {
    min-height: var(--ds-touch-target);
  }

  .top-header__content {
    min-height: calc(var(--ds-touch-target) + var(--ds-space-2));
  }
}

/* --------------------------------------------------------------------------
   12.3 Page « application mobile » — .support__stats deborde a 320px
   --------------------------------------------------------------------------
   templates/banking_services/components/mobile_app/_mobile_app_support.html.twig
   l.332 : `.support__stats { grid-template-columns: repeat(auto-fit,
   minmax(300px, 1fr)) }`. Les voisines (.support__channels, .support__faq-grid,
   .support__contact) sont bien repliees dans les media queries 1024/768px,
   mais .support__stats est OUBLIEE : elle n'est reprise dans AUCUNE media query.
   A 320px le .support__container n'offre que 288px (padding 1rem) alors que la
   piste minimale vaut 300px => debordement horizontal de la page entiere.

   La page /fr/mobile-banking/application-mobile n'a aucune feuille dediee : tout
   son style vit dans des <style> inline du <body>. On passe donc par
   `.support .support__stats` (0,2,0) pour battre `.support__stats` (0,1,0).
   Le pattern minmax(min(100%, X), 1fr) ne peut jamais depasser le conteneur.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   12.4 Back-office — tableaux larges sans conteneur de defilement
   --------------------------------------------------------------------------
   Les pages d'administration ne figuraient dans le perimetre d'aucun agent.
   Trois defauts distincts, tous sur des tableaux de 6 a 10 colonnes :

   a) .table-container — utilisee par admin/epargne/list_accounts.html.twig l.29
      et admin/epargne/history.html.twig l.28 et l.72, mais DEFINIE NULLE PART
      (verifie par grep sur assets/styles/**.css et sur tous les <style> inline).
      C'etait donc un simple <div> sans largeur ni overflow.

   b) .admin-table-container — admin/transfers/index.html.twig l.148 lui donne
      `overflow: hidden`, ce qui ROGNE le tableau de 9 colonnes au lieu de le
      faire defiler : les dernieres colonnes (montant, statut, actions) sont
      inatteignables sous ~900px. Regle ecrite dans un <style> du <body>, d'ou
      le doublement de classe.

   c) admin/epargne_management.html.twig l.77 et l.103 : deux tableaux de 8
      colonnes poses directement dans des <div class="row"> / <div
      class="col-md-6"> — des classes Bootstrap, alors que Bootstrap n'est
      charge nulle part. Ces conteneurs n'existent pas : aucun wrapper a cibler.
      On rend donc le tableau lui-meme scrollable (display: block + overflow-x),
      seule correction possible sans toucher au markup.
   -------------------------------------------------------------------------- */

.table-container,
.admin-table-container.admin-table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.table-container > table,
.admin-table-container > table {
  min-width: 100%;
}

/* Tableaux orphelins de admin/epargne_management.html.twig (aucun wrapper
   stylable dans le markup). display: block conserve la mise en page interne
   des cellules via une boite de tableau anonyme. */
.row > .col-md-6 > table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Les conteneurs de defilement ci-dessus sont atteignables au clavier. */
.table-container:focus-visible,
.admin-table-container:focus-visible,
.row > .col-md-6 > table:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-color);
  outline-offset: var(--ds-focus-offset);
}