/* ══════════════════════════════════════════════════════════════════════════════
   STYLES V8 — LA VITRINE [2026-08-27, demande owner]

   Chargée EN DERNIER : tout ce qui est ici a le dernier mot sur styles.css …
   styles-v7-braise.css, sans qu'aucune de ces feuilles ait à être éditée. Les
   trois règles qui écrasent l'existant sont signalées par « ⟵ ÉCRASE ».

   Ce que cette feuille habille, dans l'ordre de la page :
     1. la barre de découverte (2ᵉ bande de navigation, visible sur TOUS les écrans)
     2. la pastille d'ouverture du hero + les deux voies de commande
     3. les horloges du click & collect et les trois inquiétudes levées
     4. les pages Avis et Réseaux
     5. le pied de page : réseaux sociaux + message sanitaire

   Deux thèmes cohabitent et ne doivent JAMAIS être mélangés :
     · la NAV vit sur le crème → jetons --ink / --gray-* / --orange-text
     · le HERO, les pages vitrine ET LE PIED DE PAGE vivent sur du noir
       → jetons --x-* pour la vitrine, blancs translucides pour le pied de page
   ⚠️ Le pied de page trompe l'œil quand on lit le code : il porte
   `background: var(--ink)` DE FAÇON PERMANENTE (styles.css:1097), sur toutes les pages,
   y compris le menu et le tunnel qui sont clairs. J'ai d'abord habillé ses deux nouveaux
   blocs avec les jetons du thème clair — le message sanitaire est sorti en gris foncé sur
   noir, illisible, et il est légalement tenu d'être « clairement lisible ». Constaté en
   capture, corrigé ici. Avant d'ajouter quoi que ce soit au pied de page : il est NOIR.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Hauteur de la bande de découverte. Elle sert à TROIS endroits (la bande
     elle-même, la hauteur totale de la nav, et la hauteur du tiroir mobile) :
     une constante, sinon les trois divergent au premier ajustement. */
  --navx-h: 56px;
}
@media (min-width: 768px) { :root { --navx-h: 60px; } }

/* ═══ 1. LA BARRE DE DÉCOUVERTE ═══════════════════════════════════════════ */

/* ⟵ ÉCRASE styles.css:136 — `.lc-nav { height: var(--nav-h-sm) }`.
   La nav portait une hauteur FIXE, calculée pour une seule rangée : la deuxième
   bande y aurait débordé sous la bordure. `height:auto` la laisse grandir, et la
   rangée du logo reprend la hauteur exacte que la nav avait, au pixel près — la
   page ne bouge donc pas d'un cran sous la barre. */
.lc-nav { height: auto; }
.lc-nav-row { height: var(--nav-h-sm); }
@media (min-width: 768px) { .lc-nav-row { height: var(--nav-h); } }

/* ⟵ ÉCRASE styles.css:233 — le tiroir mobile se dimensionnait sur la seule
   rangée du logo. Il est positionné en `top:100%` de la nav : maintenant que la
   nav est plus haute de --navx-h, sans ce correctif le tiroir dépasserait le bas
   de l'écran d'exactement cette hauteur, et ses derniers liens deviendraient
   inatteignables — le défaut « barre de navigation cassée » de juillet, à
   l'identique. */
.lc-mobile-menu {
  height: calc(100vh - var(--nav-h-sm) - var(--navx-h));
  height: calc(100dvh - var(--nav-h-sm) - var(--navx-h));
}
@media (min-width: 768px) {
  .lc-mobile-menu {
    height: calc(100vh - var(--nav-h) - var(--navx-h));
    height: calc(100dvh - var(--nav-h) - var(--navx-h));
  }
}

.lc-navx {
  height: var(--navx-h);
  border-top: 1px solid rgba(10, 10, 10, 0.06);
  background: rgba(255, 255, 255, 0.42);
}
.lc-navx-piste {
  height: 100%;
  display: flex;
  align-items: stretch;
  /* Cinq entrées tiennent à partir de ~360 px. En dessous — et sur les gros
     doigts qui zooment — la piste défile au lieu de comprimer les libellés
     jusqu'à l'illisible. Aucune barre de défilement visible : c'est une nav,
     pas un tableau. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  gap: 2px;
}
.lc-navx-piste::-webkit-scrollbar { display: none; }

.lc-navx-item {
  position: relative;
  flex: 1 0 auto;
  min-width: 62px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--gray-4);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-spring);
}
@media (min-width: 768px) {
  /* Sur grand écran on ne veut pas cinq colonnes étirées sur 1200 px : les
     entrées se groupent au centre, comme sur une fiche de restaurant. */
  .lc-navx-piste { justify-content: center; gap: clamp(8px, 3vw, 46px); }
  .lc-navx-item { flex: 0 0 auto; min-width: 84px; }
}
.lc-navx-ico { display: block; line-height: 0; }
.lc-navx-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (min-width: 768px) { .lc-navx-lbl { font-size: 12.5px; } }

.lc-navx-item:hover,
.lc-navx-item:focus-visible { color: var(--ink); }
.lc-navx-item:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; border-radius: 10px; }
.lc-navx-item.is-on { color: var(--orange-text); }

/* Le soulignement de l'onglet actif. En ::after plutôt qu'en border-bottom : il
   se dessine de 0 à 100 % de large, ce qu'une bordure ne sait pas animer. */
.lc-navx-item::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 2.5px;
  border-radius: 3px 3px 0 0;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-spring);
}
.lc-navx-item.is-on::after { transform: scaleX(1); }

/* ═══ 2. LE HERO ══════════════════════════════════════════════════════════ */

/* ⟵ ÉCRASE styles-v7-braise.css:378 — `.lcx-titre { line-height: 0.80 }` + rien au-dessus.
   LE TITRE NE LAISSAIT PAS DE PLACE AUX CAPITALES ACCENTUÉES. Constaté en capture sur
   « LE GOÛT / DU MÉTIER. » : le circonflexe du Û était COUPÉ par le haut de la boîte, et
   l'accent du É de MÉTIER percutait la ligne au-dessus.
   Ce n'est pas un défaut de la phrase, c'est un défaut du gabarit : Anton dessine bien les
   accents, mais à 0,80 la hauteur de ligne est plus courte que capitale + accent (~0,87 em
   sur cette police). Tout titre français un peu ambitieux — goût, métier, qualité, à, é —
   tombait donc dessus. Deux titres avaient échappé au piège par hasard, en n'ayant aucun
   accent.
   0,94 garde un empilement serré (une hauteur de ligne sous 1 reste très resserrée) tout en
   dégageant de quoi loger un accent. J'ai d'abord essayé 0,88, qui satisfaisait la mesure
   mais PAS l'œil : l'accent du É se logeait dans le creux du Û au-dessus et se lisait comme
   une salissure orange sur la lettre crème. Un test vert n'a jamais prouvé qu'une image est
   bonne — la capture, si.
   Le `padding-top` empêche le rognage de la PREMIÈRE ligne, que la hauteur de ligne ne peut
   pas régler : rien ne se trouve au-dessus d'elle pour la pousser vers le bas.
   Ne pas revenir à 0,80 pour « resserrer » : ça recasse tous les titres accentués.
   Vérifié par tests-e2e/titre-hero-2026-08-27.regression.js, qui mesure l'ENCRE. */
.lcx-titre {
  line-height: 0.94;
  padding-top: 0.10em;
}


/* ⟵ ÉCRASE styles-v7-braise.css:394 — `.lcx-sous { max-width: 30ch; font-size: 15px }`.
   30ch était taillé pour l'ancien sous-titre, une énumération de quatre mots. La phrase de
   marque qui l'a remplacé y tombait sur QUATRE lignes dans une colonne de 303 px, alors que
   le hero en offre 588 : hachée à ce point, une phrase qu'on veut mettre en valeur se lit
   comme une note de bas de page. 44ch la ramène à deux ou trois lignes, et le corps monte
   à 17 px sur grand écran — assez pour qu'elle soutienne le titre au lieu de s'en excuser.
   Reste sous la largeur du titre : le bloc garde son bord gauche et sa silhouette. */
.lcx-sous {
  max-width: 42ch;
  font-size: 15.5px;
  line-height: 1.55;
}
@media (min-width: 1024px) {
  .lcx-sous { max-width: 44ch; font-size: 17px; }
}

/* — La pastille d'ouverture — */
.lcx-statut-ligne { margin-top: 20px; }
.lcx-statut {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 17px 9px 14px;
  border: 1px solid var(--x-filet);
  border-radius: 999px;
  background: rgba(255, 248, 240, 0.045);
  /* Le halo n'existe QUE quand c'est ouvert (règle plus bas) : une pastille
     « fermé » qui rayonne enverrait le signal inverse de ce qu'elle dit. */
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.lcx-statut.est-ouvert {
  border-color: rgba(53, 208, 127, 0.34);
  box-shadow: 0 0 0 1px rgba(53, 208, 127, 0.06), 0 10px 30px -16px rgba(53, 208, 127, 0.5);
}
.lcx-statut.est-ouvert.est-urgent {
  border-color: rgba(244, 80, 30, 0.42);
  box-shadow: 0 0 0 1px rgba(244, 80, 30, 0.08), 0 10px 30px -16px rgba(244, 80, 30, 0.55);
}
.lcx-statut-corps { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.lcx-statut-etat {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--x-fumee);
}
/* Le rebours est l'information qui BOUGE : c'est lui qui prend la taille et la
   couleur, pas l'intitulé au-dessus qui, lui, ne change qu'une fois par soir. */
.lcx-statut-rebours {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--x-creme);
}
.lcx-statut.est-ouvert .lcx-statut-rebours { color: #6FE8A9; }
.lcx-statut.est-urgent .lcx-statut-rebours { color: var(--x-braise-2); }

/* Le pendant « fermé » du pouls vert : un point sourd, immobile. Il occupe la
   même place et la même taille, pour que la pastille ne saute pas de largeur au
   basculement de 18h00 sous les yeux du client. */
.lcx-dodo {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--x-fumee);
  opacity: 0.55;
  flex: 0 0 auto;
}
.lcx-statut .lcx-pouls { flex: 0 0 auto; }

/* — Les deux voies de commande — */
.lcx-voies {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: 20px;
}
.lcx-voie { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.lcx-voie-etiq {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--x-fumee);
  padding-left: 2px;
}
.lcx-voie .lcx-btn { width: 100%; justify-content: center; }
/* La contrepartie de chaque voie, en petit sous le bouton : c'est elle qui fait
   le choix, pas le libellé du bouton. Masquée sous 380 px, où deux boutons +
   deux étiquettes + deux notes empilent déjà six lignes avant la photo. */
.lcx-voie-note {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--x-fumee);
  padding-left: 2px;
  max-width: 22ch;
}
@media (max-width: 379px) { .lcx-voie-note { display: none; } }

/* « Voir le menu » sous le numéro : il occupe la place d'une note, il en a donc la
   discrétion — mais c'est une ACTION, et ça doit se voir sans avoir à survoler. D'où
   le soulignement permanent (la couleur seule ne signale pas un lien, WCAG 1.4.1) et
   une zone de frappe de 44 px de haut, la même règle que partout ailleurs sur ce site :
   posé juste sous un bouton, un lien trop fin se rate au pouce et fait appeler le
   restaurant par accident. */
.lcx-voie-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  color: var(--x-creme);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 248, 240, 0.35);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-spring);
}
.lcx-voie-lien:hover { color: var(--x-braise-2); text-decoration-color: currentColor; }
.lcx-voie-lien:focus-visible { outline: 3px solid var(--x-neon); outline-offset: 3px; border-radius: 6px; }
.lcx-voie-lien svg { transition: transform 260ms var(--x-spring); }
.lcx-voie-lien:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .lcx-voie-lien:hover svg { transform: none; } }

/* — Les trois faits sous les boutons — */
.lcx-hero-faits {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.lcx-hero-faits li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--x-fumee);
}
.lcx-hero-faits li svg { flex: 0 0 auto; opacity: 0.75; }

/* — Le marqueur « incontournable » des tuiles produit — */
/* Petit, en tête de tuile, sous la photo : il qualifie ce qui suit sans voler la vedette
   au nom du produit. En or plutôt qu'en braise — la braise est déjà la couleur du prix et
   du bouton d'ajout sur la même tuile, un troisième orange y ferait une bouillie. */
.lcx-carte-top {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--x-neon);
  white-space: nowrap;
}

/* ═══ 3. CLICK & COLLECT ══════════════════════════════════════════════════ */

/* L'HORLOGE DE L'ÉTAPE.
   La grille de v7-braise déclare trois zones (num / titre / detail) ; il en faut
   une quatrième. Deux fausses bonnes idées écartées en chemin :
     · la poser dans la zone `num` → cette colonne fait 44 px de large, la puce y
       serait tronquée ou casserait la largeur de la colonne du chiffre ;
     · la mettre en position:absolute en haut à droite → sur téléphone, un titre
       long (« TU VIENS CHERCHER ») passe DESSOUS. Un chevauchement qui ne se voit
       que sur trois mots précis est exactement le défaut qui traverse une revue.
   La zone est donc déclarée pour de bon, au-dessus du titre — la même place que
   les `.lcx-oeil` du reste de la page : c'est déjà la grammaire de ce site. */
.lcx-cc-etape {
  grid-template-areas: 'num quand' 'num titre' 'num detail';
}
@media (min-width: 760px) {
  .lcx-cc-etape { grid-template-areas: 'num' 'quand' 'titre' 'detail'; gap: 8px; }
}
.lcx-cc-quand {
  grid-area: quand;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 184, 0, 0.28);
  border-radius: 999px;
  background: rgba(255, 184, 0, 0.08);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--x-neon);
  white-space: nowrap;
}
@media (min-width: 760px) { .lcx-cc-quand { margin-bottom: 0; } }

/* — Les trois inquiétudes levées — */
.lcx-cc-doutes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}
@media (min-width: 760px) { .lcx-cc-doutes { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.lcx-cc-doute {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'ico titre' 'ico detail';
  align-items: start;
  gap: 2px 12px;
  padding: 15px 16px;
  border: 1px solid var(--x-filet);
  border-radius: 16px;
  background: rgba(255, 248, 240, 0.025);
}
.lcx-cc-doute-ico {
  grid-area: ico;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(244, 80, 30, 0.12);
  color: var(--x-braise-2);
}
.lcx-cc-doute b {
  grid-area: titre;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--x-creme);
  line-height: 1.3;
}
.lcx-cc-doute span:last-child {
  grid-area: detail;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--x-fumee);
}

/* ═══ 4. LES PAGES VITRINE (Avis · Réseaux) ═══════════════════════════════ */

.lcx-page { padding-top: clamp(26px, 4vw, 52px); }
.lcx-page-intro {
  max-width: 56ch;
  margin: 16px 0 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--x-fumee);
}

/* — Réseaux — */
.lcx-reseaux { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .lcx-reseaux { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.lcx-reseau {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 17px 18px;
  border: 1px solid var(--x-filet);
  border-radius: 18px;
  background: var(--x-nuit-2);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) ease, transform var(--dur-base) var(--x-spring);
}
a.lcx-reseau:hover { border-color: rgba(244, 80, 30, 0.5); transform: translateY(-2px); }
a.lcx-reseau:focus-visible { outline: 3px solid var(--x-neon); outline-offset: 3px; }
/* Le compte à venir se lit comme désactivé AVANT d'être lu : pas de curseur
   main, pas de relief, un logo estompé. Il reste largement au-dessus du seuil
   de contraste d'un texte informatif — « bientôt » doit se lire, pas se deviner. */
.lcx-reseau.est-bientot { opacity: 0.62; cursor: default; }
.lcx-reseau-marque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(255, 248, 240, 0.06);
  color: var(--x-creme);
  flex: 0 0 auto;
}
/* La couleur de marque n'est servie qu'au réseau RÉELLEMENT ouvert : elle
   devient alors une information (« celui-ci marche »), pas une décoration. */
a.lcx-reseau .lcx-reseau-marque--facebook { background: rgba(24, 119, 242, 0.16); color: #4E9BF5; }
.lcx-reseau-corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lcx-reseau-nom {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--x-creme);
}
.lcx-reseau-quoi { font-size: 12.5px; line-height: 1.45; color: var(--x-fumee); }
.lcx-reseau-etat {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--x-fumee);
  padding: 5px 10px;
  border: 1px solid var(--x-filet);
  border-radius: 999px;
  white-space: nowrap;
}
.lcx-reseau-etat.est-actif { color: var(--x-neon); border-color: rgba(255, 184, 0, 0.32); }

/* — Avis — */
.lcx-avis {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--x-filet);
  border-radius: 22px;
  background: var(--x-nuit-2);
}
@media (min-width: 820px) { .lcx-avis { grid-template-columns: 1.25fr 1fr; gap: 40px; } }
.lcx-avis-p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--x-creme); max-width: 46ch; }
.lcx-avis-p--fine { font-size: 14px; color: var(--x-fumee); }
.lcx-avis-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
/* Cinq étoiles VIDES : c'est le sujet de la page. Une seule d'entre elles
   remplie serait déjà une note inventée. */
.lcx-avis-etoiles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 18px;
  border: 1px dashed var(--x-filet);
  border-radius: 18px;
}
.lcx-avis-etoile { color: rgba(255, 248, 240, 0.22); line-height: 0; }
.lcx-avis-etoiles-note {
  flex: 1 0 100%;
  text-align: center;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--x-fumee);
}

/* ═══ 5. LE PIED DE PAGE (fond NOIR permanent — cf. avertissement en tête) ═══ */

.lc-footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.lc-footer-social-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Même jaune que les intitulés de colonne du pied de page (`.lc-footer-col h4`) :
     « SUIVEZ-NOUS » est un intitulé de section, il doit se lire comme les autres. */
  color: var(--yellow);
}
.lc-footer-social-liste { display: flex; gap: 8px; }
.lc-footer-social-lien {
  /* 44 px : cible tactile WCAG 2.5.5, la même règle que le hamburger de la nav. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  transition: border-color var(--dur-fast) var(--ease-spring),
              background var(--dur-fast) ease,
              transform var(--dur-fast) var(--ease-spring);
}
/* Le réseau OUVERT est le seul plein : sur une rangée de quatre pastilles, c'est le
   remplissage qui dit « celui-ci marche », avant même qu'on lise la note à côté. */
a.lc-footer-social-lien { background: #fff; color: var(--ink); border-color: #fff; }
a.lc-footer-social-lien:hover { transform: translateY(-2px); background: var(--yellow); border-color: var(--yellow); }
a.lc-footer-social-lien:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
/* Les comptes à venir : perceptibles, jamais cliquables. La note qui suit porte
   l'information ; ces pastilles ne font que la rendre reconnaissable d'un coup d'œil. */
.lc-footer-social-lien.est-bientot { color: rgba(255, 255, 255, 0.34); cursor: default; }
.lc-footer-social-note { font-size: 13px; color: rgba(255, 255, 255, 0.7); }

/* LE MESSAGE SANITAIRE réglementaire (arrêté du 27 février 2007).
   La loi le veut « clairement lisible » : blanc à 70 % sur --ink donne 9,7:1, soit la même
   lisibilité que le reste du pied de page. Un gris décoratif serait à la fois illégal et
   inutile. Le lien est SOULIGNÉ en plus d'être plus clair — la couleur seule ne suffit pas
   à signaler un lien (WCAG 1.4.1). */
.lc-footer-sante {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 20px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.lc-footer-sante a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.lc-footer-sante a:hover { color: var(--yellow); }

/* ═══ MOUVEMENT RÉDUIT ═══════════════════════════════════════════════════
   Le site respecte déjà prefers-reduced-motion partout ailleurs (v7-braise
   §1077). Tout ce que cette feuille ajoute de mobile s'y range aussi — sinon
   la seule animation qui resterait à l'écran serait celle qu'on vient
   d'ajouter, ce qui est la définition d'une régression d'accessibilité. */
@media (prefers-reduced-motion: reduce) {
  .lc-navx-item::after { transition: none; }
  .lc-navx-item.is-on::after { transform: scaleX(1); }
  .lcx-statut { transition: none; }
  a.lcx-reseau:hover { transform: none; }
  a.lc-footer-social-lien:hover { transform: none; }
}