/* Design tokens + règles génériques communes à plusieurs sites (boutons/badges/alertes/
   pagination/formulaires/titres…), extraites de composent.css. Étendu le 2026-08-11 après
   comparaison précise (règle par règle, pas juste par bloc) sur vent-d'ouest-objets,
   zephyr-impression, Orsade et Astusystem.

   Le :root ci-dessous porte les valeurs identiques sur au moins 3 des 4 sites (uniquement
   --font-sans diffère réellement — Roboto ici en valeur par défaut). Certaines règles ci-dessous
   portent aussi une valeur par défaut "majoritaire" (ex. tailles de titres, .btn) : le site dont
   la valeur diffère la restaure via une redéclaration dans son propre composent.css, qui DOIT se
   charger après ce fichier dans le layout pour gagner la cascade (même sélecteur, propriété
   redéclarée). Ne jamais ajouter de valeur de marque (couleur de bouton, police) directement
   ici : ce fichier reste commun à tous les sites qui le chargent. */

:root {
  --c-bg: #fff;
  --c-fg: #1a1a1a;
  --c-muted: #6b7280;
  --c-subtle: #9ca3af;
  --c-border: #e5e7eb;
  --c-surface: #f9fafb;
  --c-surface-2: #f3f4f6;
  --c-accent: #1a1a1a;
  --c-accent-fg: #fff;
  --c-accent-hover: #374151;
  --c-sale: #dc2626;
  --c-success: #16a34a;
  --c-link: #2563eb;
  --font-sans: Roboto, sans-serif;
  --font-heading: var(--font-sans);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-14: 3.5rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --r-sm: 0.25rem;
  --r: 0.375rem;
  --r-lg: 0.5rem;
  --r-xl: 0.75rem;
  --r-2xl: 1rem;
  --r-full: 9999px;
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0/0.1), 0 1px 2px -1px rgb(0 0 0/0.1);
  --shadow-md: 0 10px 15px -3px rgb(0 0 0/0.1), 0 4px 6px -4px rgb(0 0 0/0.1);
  --max-w: 1280px;
  --header-h: 64px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --t: 150ms ease;
  --t-md: 250ms ease;
  --t-lg: 350ms ease;
  --z-header: 50;
  --z-drawer: 60;
  --z-overlay: 55;
}

.hidden {
  display: none;
}
.gap-2 {
  gap: var(--s-2);
}
.text-muted {
  color: var(--c-muted);
}
.text-subtle {
  color: var(--c-subtle);
}
.text-sale {
  color: var(--c-sale);
}
.text-success {
  color: var(--c-success);
}
.bold {
  font-weight: bold;
}
.uppercase {
  text-transform: uppercase;
}

/* XS (par défaut) */
.text-start {
  text-align: left;
}

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

.text-end {
  text-align: right;
}
.text-right {
  text-align: right;
}

.position-relative {
  position: relative;
}

/* SM ≥576px */
@media (min-width: 576px) {
  .text-sm-start {
    text-align: left;
  }

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

  .text-sm-end {
    text-align: right;
  }
}

/* MD ≥768px */
@media (min-width: 768px) {
  .text-md-start {
    text-align: left;
  }

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

  .text-md-end {
    text-align: right;
  }
}

/* LG ≥992px */
@media (min-width: 992px) {
  .text-lg-start {
    text-align: left;
  }

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

  .text-lg-end {
    text-align: right;
  }
}

/* XL ≥1200px */
@media (min-width: 1200px) {
  .text-xl-start {
    text-align: left;
  }

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

  .text-xl-end {
    text-align: right;
  }
}

/* XXL ≥1400px */
@media (min-width: 1400px) {
  .text-xxl-start {
    text-align: left;
  }

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

  .text-xxl-end {
    text-align: right;
  }

  .container {
    max-width: 1410px;
  }
}

.w-100 {
  width: 100%;
}

.font-17 {
  font-size: 17px;
}

.font-16 {
  font-size: 16px;
}

.font-13 {
  font-size: 13px;
}

.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-40 {
  margin-top: 40px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-60 {
  margin-top: 60px;
}
.mt-70 {
  margin-top: 70px;
}
.mt-80 {
  margin-top: 80px;
}
.mt-90 {
  margin-top: 90px;
}
.mt-100 {
  margin-top: 100px;
}

.mb-10 {
  margin-bottom: 10px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mb-50 {
  margin-bottom: 50px;
}
.mb-60 {
  margin-bottom: 60px;
}
.mb-70 {
  margin-bottom: 70px;
}
.mb-80 {
  margin-bottom: 80px;
}
.mb-90 {
  margin-bottom: 90px;
}
.mb-100 {
  margin-bottom: 100px;
}

/* Titres */
h1 {
  font-size: 32px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: var(--text-lg);
}
h6 {
  font-size: var(--text-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 500;
}

ul,
ol {
  list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

table {
  border-collapse: collapse;
}

/* .table / .table-bordered — classes Bootstrap utilisées par mentions-legales.liquid
   (tableaux RGPD/cookies, mutualisé sur les 6 sites) mais non stylées : seul
   bootstrap-grid.min.css est chargé (pas le CSS des composants Bootstrap). Reproduites
   ici à l'identique du composant table Bootstrap 5, réutilisables par n'importe quel
   site/page ayant besoin d'un tableau. */
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  vertical-align: top;
  border-color: #dee2e6;
  border-collapse: collapse;
}
.table-bordered > :not(caption) > * {
  border-width: 1px 0;
  border-style: solid;
  border-color: #dee2e6;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
  border-style: solid;
  border-color: #dee2e6;
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid #dee2e6;
}

small {
  font-size: 12px;
}

.label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ced4da;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--c-subtle);
}
.textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--c-muted);
}
.form-error {
  font-size: var(--text-xs);
  color: var(--c-sale);
}

/* Alert */
.alert {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.alert-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}
.alert-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
}
.alert-warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309;
}
.alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.6em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  line-height: 1;
}
.badge-sale {
  background: var(--c-sale);
  color: #fff;
}
.badge-new {
  background: var(--c-fg);
  color: var(--c-bg);
}
.badge-out {
  background: var(--c-muted);
  color: #fff;
}
.badge-eco {
  background: #d1fae5;
  color: #065f46;
}
.badge-promo {
  background: #fef3c7;
  color: #92400e;
}
.badge-img {
  height: 14px;
}

/* Buttons — cœur commun ; chaque site rajoute dans son propre composent.css ce qui
   diffère réellement (poids de police, hauteur, hover, border-radius, couleurs de marque) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.375rem 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--t),
    color var(--t),
    border-color var(--t),
    box-shadow var(--t);
  white-space: nowrap;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  color: white;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.btn-primary {
  cursor: pointer;
  color: white;
}
.btn-outline {
  background: transparent;
  color: var(--c-fg);
  border-color: var(--c-border);
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--c-fg);
}
.btn-ghost {
  background: transparent;
  padding-inline: var(--s-3);
  width: inherit;
  font-weight: 500;
  color: inherit;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--c-surface);
}

/* .btn.btn-full (et pas .btn-full seul) : composent.css charge .btn-primary
   (width: inherit) après ce fichier dans la cascade réelle de la page — à
   spécificité égale il l'emporterait. Une classe composée bat .btn-primary
   sans dépendre de l'ordre de chargement des fichiers, sans !important. */
.btn.btn-full {
  width: 100%;
}

/* Panier / Checkout — structure et responsive communs à plusieurs sites (identique
   au 2026-08-13 sur Astusystem, Orsade, vent-d'ouest-objets, zephyr-impression, hors
   couleurs de marque : .checkout-page .card-header et .nav-checkout .active restent
   redéclarés dans le composent.css/main.css de chaque site, chargé après ce fichier). */
.checkout-page {
  .form-group {
    flex-direction: column;
    align-items: initial;
    margin-top: 5px;
    margin-bottom: var(--s-3);
  }
  .card-header {
    padding: 0.5rem 1rem 0.5rem 0rem;
    margin-bottom: 0;
    border-bottom: 1px solid #e4e4e4;
    background-color: rgba(0, 0, 0, 0);
    font-size: 17px;
    padding-top: 0px;
  }
  .card-header p {
    margin: 0;
  }
  small {
    display: block;
    margin-bottom: var(--s-3);
  }
}

.nav-checkout {
  margin-bottom: 40px;
}
.nav-checkout .active {
  font-weight: 600;
}
.cart-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding-block: var(--s-6);
}
.cart-item:last-child {
  border: none;
}
.cart-item__image {
  padding-right: 15px;
  img {
    max-height: 150px;
    max-width: 135px;
  }
}
.cart-item__title {
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
}
@media (max-width: 992px) {
  /* Nom de l'article tronqué avec "…" en format mobile, plutôt que de laisser
     le titre pousser la ligne et forcer un scroll horizontal — même pattern
     que .il-checkout-s13 (_shared/assets/cart-checkout.css) sur le
     récapitulatif checkout. min-width: 0 sur la chaîne flex qui mène au
     titre (.cart-item .col-md-6.d-flex, flex item du .row.cart-item ; son
     enfant .d-flex.flex-column, qui contient directement le titre) : sans
     lui, un flex item ne rétrécit jamais sous la largeur de son contenu,
     l'ellipsis ne se déclenche donc jamais.
  */
  .cart-item .col-md-6.d-flex {
    min-width: 0;
  }
  .cart-item .col-md-6.d-flex > .d-flex {
    min-width: 0;
  }
  .cart-item__title {
    display: block;
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.cart-item__remove {
  text-align: left;
  font-size: 15px;
  margin-top: 10px;
}
.cart-item__remove:hover {
  color: var(--c-sale);
}
.cart-header {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
}
.cart-header span,
.cart-item > div {
  text-align: center;
}
.cart-item__meta {
  font-size: 13px;
  text-align: left;
}
.cart-item__price {
  font-weight: 600;
}
[data-cart-moq-error] {
  margin-bottom: var(--s-3);
}
.cart-summary__lines {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.cart-summary__line {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}
.cart-summary__line--total {
  font-size: var(--text-base);
  font-weight: 700;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
  margin-top: var(--s-2);
}
@media (max-width: 768px) {
  /* Les libellés de colonnes n'ont plus de sens une fois les lignes empilées */
  .cart-header {
    display: none;
  }
  /* Bootstrap fixe une largeur (width) en plus du flex sur .col-* : un simple
     "flex" ne suffit pas à la neutraliser, d'où le !important ici (pas d'autre
     moyen fiable de gagner contre une classe posée directement dans le HTML). */
  .cart-item {
    flex-wrap: wrap;
    row-gap: var(--s-2);
    text-align: center;
  }
  /* stylelint-disable declaration-no-important -- voir commentaire ci-dessus : seul
     moyen fiable de battre les classes .col-* Bootstrap posées dans le HTML. */
  .cart-item > div {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center;
  }
  /* Prix unitaire HT / Total HT restent côte à côte (2 × 50%) au lieu de
     s'empiler comme le reste. Structure à 4 colonnes (image+nom fusionnés,
     cart.js partagé) : nth-child(1) image+nom, (2) quantité, (3) prix
     unitaire, (4) total. */
  .cart-item > div:nth-child(3),
  .cart-item > div:nth-child(4) {
    width: 50% !important;
    max-width: 50% !important;
  }
  /* stylelint-enable declaration-no-important */
  .cart-item__image img {
    max-width: 100%;
  }

  /* Le libellé de colonne ("Prix unitaire HT"/"Total HT") disparaît avec
     .cart-header : on le réaffiche directement devant chaque valeur. */
  .cart-item__unit-price::before {
    content: "Prix unitaire HT : ";
    font-weight: 400;
  }
  .cart-item__price::before {
    content: "Total HT : ";
  }
}

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

input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus-visible,
textarea:focus {
  outline: none;
  box-shadow: none;
}

a {
  color: inherit;
  text-decoration: none;
}
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Search */
.search-hero {
  background: var(--c-surface);
  padding-block: var(--s-12);
  margin-bottom: var(--s-10);
}
.search-form {
  max-width: 600px;
  margin-inline: auto;
}
.search-form__inner {
  position: relative;
  display: flex;
}
.search-form__input {
  flex: 1;
  padding: var(--s-4) var(--s-6);
  padding-right: 3.5rem;
  font-size: var(--text-base);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-bg);
}
.search-form__input:focus {
  outline: none;
  border-color: var(--c-fg);
  box-shadow: 0 0 0 4px rgb(26 26 26/0.06);
}
.search-form__btn {
  position: absolute;
  right: var(--s-2);
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: var(--c-fg);
  color: var(--c-bg);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}
.search-form__btn svg {
  width: 16px;
  height: 16px;
}

/* 404 / 500 */
.error-page {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-16) var(--s-4);
}
.error-page__code {
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--c-surface-2);
  margin-bottom: var(--s-6);
  user-select: none;
}
.error-page__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--s-4);
}
.error-page__desc {
  color: var(--c-muted);
  margin-bottom: var(--s-8);
  max-width: 400px;
}
.error-page__actions {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  justify-content: center;
}

/* Hero (landing page campagne) */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: var(--c-surface);
  overflow: hidden;
}
.hero--dark {
  background: var(--c-fg);
  color: var(--c-bg);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgb(0 0 0/0.6) 0%,
    rgb(0 0 0/0.2) 60%,
    transparent 100%
  );
}
.hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--s-24);
  max-width: 600px;
}
.hero--with-bg .hero__content {
  color: #fff;
}
.hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
  opacity: 0.7;
}
.hero__title {
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-6);
}
.hero__subtitle {
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  opacity: 0.8;
  margin-bottom: var(--s-8);
  line-height: 1.6;
  max-width: 480px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding-block: var(--s-4);
  font-size: 14px;
}
.breadcrumb__link:hover {
  opacity: 0.7;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination__dots {
  font-size: var(--text-sm);
  color: var(--c-muted);
  padding-inline: var(--s-2);
}
.pagination__sep {
  color: var(--c-border);
}

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

/* Images fluides */
.img-fluid {
  max-width: 100%;
  height: auto;
}

/* Stepper quantité — .qty__input varie par site (largeur/bordure/police), laissé local */
.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  overflow: hidden;
  height: 48px;
}
.qty__btn {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  line-height: 1;
  transition: background var(--t);
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
}
.qty__btn:hover {
  background: var(--c-surface);
}

/* RTE */
.rte {
  line-height: 1.7;
}
.rte > * + * {
  margin-top: var(--s-4);
}
.rte h2,
.rte h3,
.rte h4 {
  margin-top: var(--s-8);
}
.rte a {
  color: var(--c-link);
  text-decoration: underline;
}
.rte ul,
.rte ol {
  padding-left: var(--s-6);
}
.rte ul {
  list-style: disc;
}
.rte ol {
  list-style: decimal;
}
.rte img {
  border-radius: var(--r);
}
.rte table {
  width: 100%;
  border: 1px solid var(--c-border);
}
.rte th,
.rte td {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border);
}
.rte th {
  background: var(--c-surface);
  font-weight: 600;
}
.rte blockquote {
  border-left: 4px solid var(--c-border);
  padding-left: var(--s-4);
  color: var(--c-muted);
  font-style: italic;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--s-16) var(--s-4);
}
.empty-state__icon {
  width: 64px;
  height: 64px;
  margin-inline: auto;
  margin-bottom: var(--s-6);
  color: var(--c-muted);
}
.empty-state__title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.empty-state__desc {
  color: var(--c-muted);
  margin-bottom: var(--s-6);
  max-width: 400px;
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 9999;
  padding: var(--s-3) var(--s-6);
  background: var(--c-accent);
  color: var(--c-accent-fg);
  border-radius: var(--r);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: top var(--t);
}
.skip-link:focus {
  top: var(--s-4);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.divider {
  border: none;
  border-top: 1px solid var(--c-border);
}

/* Overlay */
/* Backdrop généré dynamiquement par le composant Offcanvas de Bootstrap 5
   (bootstrap.bundle.min.js) : seul bootstrap-grid.min.css est chargé sur
   les sites qui chargent ce fichier, qui ne fournit pas le CSS des
   composants — reproduit ici. */
.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0/0.4);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--t-md);
}
.offcanvas-backdrop.show {
  opacity: 1;
}

/* Mentions légales */
.mentions-legales-page a {
  color: inherit;
}
.mentions-legales-page a:hover {
  text-decoration: underline;
}

/* Drawer mobile — cœur commun (position/animation) ; chaque site garde dans
   son propre main.css .mobile-drawer__title (couleur de marque) et les
   propriétés qui diffèrent réellement d'un site à l'autre (z-index, padding). */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 100vw);
  background: var(--c-bg);
  transform: translateX(-100%);
  transition: transform var(--t-md);
  overflow-y: auto;
}
.mobile-drawer.show {
  transform: translateX(0);
}
.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.mobile-drawer__divider {
  margin-block: var(--s-4);
}
.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.mobile-drawer__link {
  display: flex;
  align-items: center;
  padding: var(--s-3) var(--s-2);
  font-size: var(--text-base);
  font-weight: 500;
  border-radius: var(--r);
  transition: background var(--t);
}
.mobile-drawer__link:hover {
  background: var(--c-surface);
}

/* Animations */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}