/* ═══════════════════════════════════════════════════════════════════════════
   styles-v6-brand.css — VITRINE « LE SERVICE DE NUIT »   [S7 · 2026-07-29]
   ───────────────────────────────────────────────────────────────────────────
   Feuille de SURCHARGE. Chargée EN DERNIER (après styles-mobile.css).
   Ne réécrit jamais v1→v5 : elle ne fait qu'ajouter des classes `lc-v6-*` et
   corriger des défauts nommés.

   POURQUOI CETTE DIRECTION (elle ne sort pas d'un catalogue de styles) :
   les photos studio du Cayenne SONT des scènes nocturnes — fond noir, néons
   orange, logo gravé au mur — et le restaurant n'ouvre que de 18 h à minuit.
   La marque est nocturne ; le site l'habillait en crème. La vitrine rejoint
   donc le monde de ses propres photos. Le TUNNEL de commande reste clair
   (propriété S8, non touché) : on séduit dans la nuit, on commande en pleine
   lumière.

   ZONES MINÉES RESPECTÉES (pièges documentés du repo) :
   - JAMAIS de transform/filter/backdrop-filter sur .lc-app, main, .lcf-page
     ni .lc-container → casse .lcf-cta-bar (position:fixed). Tout est scopé
     sous .lc-v6-*, qui n'est ancêtre d'aucun élément fixed.
   - prefers-reduced-motion respecté.
   - Aucune ressource externe (pas de CDN, pas d'import de police).
   - Les photos sources font ≤ 800 px : on ne les agrandit JAMAIS au-delà,
     sinon flou. La qualité perçue vient du cadrage, pas de la résolution.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Le noir des photos studio, pas un gris neutre : il est chaud. */
  --v6-nuit:     #0B0A09;
  --v6-nuit-2:   #16120E;
  --v6-braise:   #F4501E;  /* orange de marque (CLAUDE.md §3bis) */
  --v6-neon:     #FFB800;  /* jaune de marque = les néons des photos */
  --v6-creme:    #FBF7F0;
  --v6-sur-nuit:      rgba(255, 250, 245, 0.94);
  --v6-sur-nuit-doux: rgba(255, 250, 245, 0.62);
  --v6-filet:    rgba(255, 250, 245, 0.14);
}

/* ───────────────────────────────────────────────────────────────────────────
   1. SIGNATURE — le halo de néon
   ⚠️ RECTIFICATION (audit RED cycle 15). Une classe `.lc-v6-neon` était déclarée ici
   comme « l'élément signature » du design — et n'a JAMAIS été rendue dans le JSX.
   Du code mort qui affirmait porter la signature de la page : retiré.
   La signature EST bien livrée, mais par des halos intégrés plutôt que par un filet
   séparé : le halo de braise du hero (`.lc-v6-hero::before`), l'ombre portée colorée du
   CTA, et la pastille d'ouverture. Ne pas laisser une feuille de style revendiquer ce
   qu'elle ne fait pas.
   ─────────────────────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────────────────────
   2. HERO NOCTURNE
   Mobile  : la photo D'ABORD, intacte, en pleine largeur (défaut corrigé :
             elle était repoussée sous ~1 900 px de texte).
   Desktop : texte à gauche, photo à droite. Le fond noir de la section et le
             fond noir de la photo se confondent → la photo paraît sans bord.
             C'est le bénéfice direct de la direction nocturne.
   ─────────────────────────────────────────────────────────────────────────── */
.lc-v6-hero {
  position: relative;
  background: var(--v6-nuit);
  color: var(--v6-sur-nuit);
  overflow: hidden;
  isolation: isolate;
}

/* Halo de braise : rappelle l'éclairage des photos, coûte 0 image. */
.lc-v6-hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -20% -10% auto -10%;
  height: 120%;
  background:
    radial-gradient(60% 55% at 72% 45%, rgba(244, 80, 30, 0.22), transparent 70%),
    radial-gradient(40% 40% at 12% 8%, rgba(255, 184, 0, 0.10), transparent 70%);
  pointer-events: none;
}

/* La « scène » = photo + texte. Les preuves vivent EN DEHORS, sinon elles
   se retrouveraient sur la même rangée que le hero en desktop. */
.lc-v6-hero-scene { position: relative; }

/* — La scène photo —
   Volontairement HORS du .lc-container en mobile : la photo doit toucher les
   deux bords de l'écran, un conteneur à marges la réduirait en vignette. */
.lc-v6-hero-media {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 2;      /* ratio natif des photos (800×533) : zéro déformation */
  overflow: hidden;
}
.lc-v6-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;  /* le produit vit dans la moitié basse du cadre */
  display: block;
}
/* Fondu de la photo dans la nuit.
   L'`inset box-shadow` feutre les QUATRE bords d'un coup : sans lui, la photo est
   « posée » sur la section et laisse une ligne franche visible en haut et en bas.
   Comme le fond de la photo est déjà quasi noir, le raccord devient invisible —
   c'est le bénéfice concret de la direction nocturne. */
.lc-v6-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 10, 9, 0) 52%, rgba(11, 10, 9, 0.88) 86%, var(--v6-nuit) 100%);
  box-shadow: inset 0 0 70px 30px var(--v6-nuit);
  pointer-events: none;
}

/* — Le texte — */
.lc-v6-hero-text {
  position: relative;
  z-index: 2;
  padding: 0 0 40px;
  margin-top: -28px;   /* le texte mord sur le fondu : une seule scène continue */
}

.lc-v6-hero-statut {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v6-sur-nuit-doux);
  border: 1px solid var(--v6-filet);
  border-radius: 999px;
  padding: 8px 15px;
  background: rgba(255, 255, 255, 0.03);
}
.lc-v6-hero-statut b { color: var(--v6-neon); font-weight: 800; }
.lc-v6-hero-pastille {
  width: 7px; height: 7px; border-radius: 999px;
  background: #35D06A;
  box-shadow: 0 0 8px 1px rgba(53, 208, 106, 0.9);
}

/* Échelle typographique trouée + crénage négatif : c'est CE détail qui sépare
   une vitrine moderne d'une vitrine générique, et il coûte une ligne. */
.lc-v6-hero-titre {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(52px, 13vw, 132px);
  /* 0.95 faisait mordre la VIRGULE de « Fait maison, » sur la ligne du dessous :
     exactement le défaut de collision reproché à l'ancien hero. Anton a des
     capitales qui remplissent presque tout le cadratin, donc 1.0 reste très
     serré à l'œil tout en laissant passer les jambages descendants. */
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.lc-v6-hero-titre em {
  font-style: normal;
  display: block;
  color: var(--v6-braise);
}

.lc-v6-hero-sous {
  margin: 20px 0 0;
  max-width: 30ch;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.5;
  color: var(--v6-sur-nuit-doux);
}
.lc-v6-hero-sous b { color: var(--v6-sur-nuit); font-weight: 600; }

.lc-v6-hero-cta { margin-top: 30px; }

/* Un seul bouton plein par écran (le hero en avait trois en concurrence).
   ⚠️ NE PAS réécrire le FOND de ce bouton. Une première version le repassait en
   --v6-braise (#F4501E) : blanc sur ce fond = 3,49:1 (calculé), alors que 14px gras
   exige 4,5:1. C'était annuler le heal WCAG documenté en styles.css:310, qui avait
   justement assombri le fond vers --orange-text (#C2410C = 5,18:1). Trouvé par
   l'audit adversarial RED cycle 1. On ne garde ici QUE le halo. */
.lc-v6-hero .lc-btn--orange {
  box-shadow: 0 10px 30px -8px rgba(244, 80, 30, 0.75);
}

/* ───────────────────────────────────────────────────────────────────────────
   3. LES 4 PREUVES — le mandat owner, au-dessus de la ligne de flottaison
   viande fraîche · frites fraîches maison · fait maison · savoureux
   ─────────────────────────────────────────────────────────────────────────── */
.lc-v6-preuves {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--v6-filet);
  border-top: 1px solid var(--v6-filet);
  border-bottom: 1px solid var(--v6-filet);
}
.lc-v6-preuve {
  background: var(--v6-nuit);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lc-v6-preuve-ico { font-size: 22px; line-height: 1; }
.lc-v6-preuve-t {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.lc-v6-preuve-d {
  font-size: 13px;
  line-height: 1.45;
  color: var(--v6-sur-nuit-doux);
}

/* ───────────────────────────────────────────────────────────────────────────
   4. CORRECTIFS NOMMÉS sur l'existant (surcharge, pas réécriture)
   ─────────────────────────────────────────────────────────────────────────── */

/* D3 — collision typographique : le contour de « GALETTE. » touchait la ligne
   du dessus. Cause : -webkit-text-stroke de 2px FIXE (styles.css:291) combiné à
   line-height 0.92 (styles.css:285). Le contour déborde hors des glyphes.
   Correction : épaisseur PROPORTIONNELLE + interligne desserré d'un cheveu. */
/* ⚠️ Les deux règles `.lc-hero h1` qui vivaient ici sont RETIRÉES (audit RED cycle 16).
   Elles corrigeaient la collision typographique de l'ANCIEN hero `.lc-hero`, entièrement
   remplacé par `.lc-v6-hero` : 0 occurrence en JSX, 0 dans le DOM. Le titre actuel a son
   propre traitement (`.lc-v6-hero-titre`, line-height 1) où la collision est déjà réglée.
   Mon commit du cycle 15 annonçait avoir retiré CE bloc aussi — c'était inexact, il n'en
   avait retiré que deux sur trois. Une annonce non vérifiée est une annonce fausse. */

/* D7 — esthétique « commentaire de code » : les eyebrows étaient en police mono,
   registre de développeur pour un restaurant. On repasse en grotesque. */
/* `.lc-hero-art-tag` et `.lc-v6-eyebrow` retirées de ce groupe : 0 nœud sur les 4 routes
   (audit RED cycle 17). Le commentaire qui suivait affirmait `.lc-v6-eyebrow` « retirée »
   alors qu'elle était déclarée deux lignes plus haut — troisième annonce non vérifiée de
   cette session. Seule `.lc-eyebrow`, bien vivante, est conservée. */
.lc-eyebrow {
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  letter-spacing: 0.16em;
}

/* ───────────────────────────────────────────────────────────────────────────
   4bis. D6 — TROIS RÉGIMES PHOTO DANS LA MÊME GRILLE
   La vignette avait un dégradé ORANGE. Trois familles d'images s'y posaient :
   photos studio opaques à fond noir (elles apparaissaient en boîte à lettres,
   rectangle sombre cerné d'orange), détourés à fond transparent, et un actif
   corrompu à damier (tacos — réparé côté fichier).
   On ne peut pas deviner la famille d'une image en CSS. Mais on n'en a pas
   besoin : en passant la scène en NOCTURNE, les bandes de letterbox des photos
   sombres deviennent invisibles (même noir de part et d'autre) ET les détourés
   gagnent une scène éclairée. Un seul changement réconcilie les trois familles.
   ─────────────────────────────────────────────────────────────────────────── */
/* `.lc-detail-art` = le panneau photo de la FICHE PRODUIT. Oublié à la première passe
   (audit RED cycle 3) : 15 actifs sur 76 n'ont pas de canal alpha, donc 9 produits —
   les 4 sandwichs signature et 5 burgers — s'y affichaient en rectangle noir à bords
   nets sur le dégradé orange, à côté d'autres produits détourés. Deux directions
   artistiques dans le même composant, exactement le défaut corrigé sur les vignettes. */
.lc-card-item-thumb,
.lc-detail-art,
.lc-featured-art,
.lc-gallery-tile {
  background: radial-gradient(72% 68% at 50% 44%, #241B15 0%, #100C0A 58%, var(--v6-nuit) 100%);
}

/* Les pastilles étaient sombres : sur une scène nocturne elles disparaissaient.
   Fond = --orange-text (#C2410C) et NON --v6-braise : en blanc sur braise le ratio
   tombe à 3,49:1 (calculé) pour un texte de ~10px gras qui exige 4,5:1.
   Blanc sur #C2410C = 5,18:1. Même leçon que le CTA ci-dessus (RED cycle 1). */
.lc-card-item-badge {
  background: var(--orange-text, #C2410C);
  color: #FFFFFF;
}
/* Le jaune néon ne porte QUE du texte encre : 12,4:1. */
.lc-card-item-badge--top {
  background: var(--v6-neon);
  color: #12100E;
}

/* ───────────────────────────────────────────────────────────────────────────
   4ter. « CE QU'ON CUISINE » — les 9 familles
   Section CLAIRE, donc on n'y met que des visuels DÉTOURÉS (régime B) : c'est la
   règle P5, on ne pose jamais une photo à fond noir sur du crème.
   ─────────────────────────────────────────────────────────────────────────── */
.lc-v6-familles {
  display: grid;
  /* 9 tuiles : 9 ne tombe juste qu'en 1 ou 3 colonnes — jamais en 2, qui laissait
     « MENU ENFANT » seule sur sa 5ᵉ ligne (audit RED cycle 12).
     ⚠️ 3 colonnes À TOUTES LES LARGEURS, sans palier. Ma première correction basculait
     en 1 colonne sous 520 px : ça supprimait bien l'orpheline (241 px) mais créait une
     FALAISE de 6,5× sur un seul pixel de largeur — la section passait de 754 px à
     4 869 px — et cette bande couvre TOUS les téléphones réels (375/390/412/430).
     Les visuels y étaient de surcroît agrandis ×1,54 au-delà de leur source de 640 px,
     dans des cartes à ~60 % de vide. Mesuré par l'audit RED cycle 13 : 3 colonnes
     tiennent à 360 px (746 px de hauteur, 0 rognage). Énième forme du même défaut de
     méthode : « mon correctif casse ailleurs », ici sur une autre largeur. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}
.lc-v6-famille {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 14px 14px 18px;
  border: 1px solid var(--gray-1, #ECE8DE);
  border-radius: 20px;
  background: var(--paper, #FFFFFF);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.lc-v6-famille:hover { border-color: var(--v6-braise); box-shadow: 0 10px 26px -14px rgba(244, 80, 30, 0.6); }
.lc-v6-famille:focus-visible { outline: 3px solid var(--v6-braise); outline-offset: 2px; }

.lc-v6-famille-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Halo chaud très léger : pose le produit détouré au lieu de le laisser flotter. */
  background: radial-gradient(58% 58% at 50% 58%, rgba(244, 80, 30, 0.10), transparent 72%);
}
.lc-v6-famille-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lc-v6-famille-emoji { font-size: 44px; }
.lc-v6-famille-nom {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink, #0A0A0A);
}
.lc-v6-famille-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--gray-3, #6F6A60);
}

/* Sur les écrans les plus étroits, on resserre plutôt que de casser la grille.
   ⚠️ CE BLOC DOIT RESTER APRÈS les règles de base ci-dessus. Il était écrit AVANT
   elles, à spécificité identique : 3 déclarations sur 5 (padding, border-radius,
   font-size) ne s'appliquaient donc JAMAIS — la cascade les écrasait. Résultat réel :
   « MENU ENFANT » passait sur 2 lignes et la 3ᵉ rangée était plus haute que les deux
   autres, alors que mon commentaire ET mon message de commit affirmaient le contraire
   (audit RED cycle 14). Un correctif non vérifié vaut un correctif absent, et ici il
   valait pire : une affirmation fausse dans le dépôt. */
@media (max-width: 400px) {
  .lc-v6-familles { gap: 7px; }
  .lc-v6-famille { padding: 9px 8px 12px; border-radius: 15px; }
  .lc-v6-famille-nom { font-size: 13px; }
  .lc-v6-famille-desc { display: none; }
}

/* 3 chiffres : 1 colonne en mobile, 3 en desktop — jamais une tuile orpheline.
   `!important` requis : styles-mobile.css:66 impose `repeat(2,1fr) !important`, et c'était
   le SEUL endroit du périmètre où la couche v1→v5 battait une intention v6 (audit RED
   cycle 10 : la 3ᵉ tuile « 38 PLATS AU MENU » restait seule sur sa ligne à 320-600 px). */
@media (max-width: 899px) {
  /* ⚠️ SCOPÉ au mobile. Au cycle 10 je l'avais posé HORS media query : il battait alors
     aussi ma propre règle desktop (3 colonnes) et laissait 1 colonne à 1024 et 1440 px.
     Corriger en cassant ailleurs — exactement le défaut que cette session traque. */
  .lc-stats-grid { grid-template-columns: 1fr !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   4quinquies. TUILES ORPHELINES (audit RED cycle 11)
   Le critère posé au cycle 10 (« jamais une tuile seule sur sa ligne ») n'avait été
   appliqué qu'à la grille de stats. Trois autres grilles le violaient à des largeurs
   courantes — dont une que J'AI CRÉÉE en réduisant « pourquoi » de 4 à 3 arguments
   sans adapter les colonnes héritées de styles-v2.css:25.
   ─────────────────────────────────────────────────────────────────────────── */
/* 3 arguments ⇒ 3 colonnes, SANS BORNE HAUTE.
   `styles-v2.css` en pose 2 à partir de 700 px et 4 à partir de 1100 px : les DEUX
   laissent une tuile orpheline avec 3 éléments. Ma première passe n'avait couvert que
   la bande 700-1099 px — une bande de largeurs sur deux, énième répétition du défaut de
   méthode de cette session. Une seule règle sans max-width couvre les deux. */
@media (min-width: 700px) {
  .lc-why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 4 produits : 3 colonnes laissaient le 4ᵉ seul entre 900 et 1199 px → 2×2. */
@media (min-width: 900px) and (max-width: 1199px) {
  .lc-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 5 photos : aucun nombre de colonnes < 5 ne tombe juste. En dessous de la largeur qui
   permet 5 vraies photos, la galerie devient une bande qui DÉFILE, avec la dernière
   tuile coupée au bord pour signaler la suite — c'est le motif retenu dans le moodboard
   (principe P15) plutôt qu'un rang bancal. */
@media (max-width: 1099px) {
  .lc-gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 46%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .lc-gallery-tile { scroll-snap-align: start; }
}
@media (min-width: 1100px) {
  .lc-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ───────────────────────────────────────────────────────────────────────────
   5. DESKTOP
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  /* La photo passe à droite, calée verticalement, SANS être agrandie au-delà
     de sa résolution source. Le texte occupe la colonne de gauche. */
  .lc-v6-hero-scene { display: flex; align-items: center; min-height: 74vh; padding: 40px 0; }
  .lc-v6-hero-scene > .lc-container { width: 100%; }
  .lc-v6-hero-media {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);   /* sûr : cet élément ne contient aucun position:fixed */
    width: 52%;
    max-width: 800px;              /* au-delà de 800 px la source floute */
    aspect-ratio: 3 / 2;
  }
  .lc-v6-hero-text {
    margin-top: 0;
    padding: 0;
    max-width: 46%;
  }
  /* En desktop le fondu part de la gauche : la photo se fond dans le texte. */
  .lc-v6-hero-media::after {
    background: linear-gradient(to right, var(--v6-nuit) 0%, rgba(11, 10, 9, 0.55) 22%, rgba(11, 10, 9, 0) 42%);
  }
  .lc-v6-preuves { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lc-v6-preuve { padding: 30px 26px; }
  .lc-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 9 familles = 3×3 exactement. Le palier est à 700 px et NON à 900 : entre les deux,
   une grille à 2 colonnes laissait « Menu enfant » seule sur une 5ᵉ rangée. */
@media (min-width: 700px) {
  .lc-v6-familles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   4quater. « OUVERT MAINTENANT » illisible (audit RED cycle 5)
   `.lc-hours-status` (styles-v2.css:167) utilise --green-text #0C6B31, un jeton
   conçu pour du texte sur fond CLAIR — mais le panneau horaires est sombre.
   Résultat mesuré : 2,4:1. La variante « fermé » avait reçu une surcharge blanche en
   style inline ; la variante « ouvert » n'en avait pas.
   Pourquoi 4 cycles d'audit ne l'ont pas vu : `isOpenNow()` (screens.jsx) n'est vrai
   qu'entre 18 h et minuit — hors de cette plage, la pastille verte n'existe pas.
   Vert clair lisible sur nuit : ~10:1 sur le fond composité de la pastille.
   ─────────────────────────────────────────────────────────────────────────── */
.lc-hours .lc-hours-status { color: #6EE7A0; }

/* ───────────────────────────────────────────────────────────────────────────
   5bis. PETITS ÉCRANS (≤ 400 px) — le bouton menu était COUPÉ
   Trouvé par l'audit adversarial RED cycle 2 : à 360 px, le bord droit du bouton
   burger tombait à 382 px. Invisible aux tests de débordement classiques, parce que
   `document.scrollWidth` reste à 360 — l'élément est rogné, pas débordant.
   Cause : marque + Panier + « Se connecter » + burger ne tiennent pas sur 360 px.
   Correction : sous 400 px, le MOT « Le Cayenne » s'efface, le monogramme LC reste
   (il garde son rôle de retour à l'accueil). On ne touche NI au bouton burger, qui
   doit conserver sa cible tactile de 44 px (styles.css:207-210), NI à l'entrée
   « Se connecter » : masquer une porte de connexion pour gagner des pixels serait
   régler un problème de mise en page en cassant une fonction.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  /* [UX MISSION-5 2026-07-31] La marque est désormais un <img class="lc-nav-logo"> (plus de <span>
     enfant) → l'ancienne règle span:display:none était MORTE et le logo ~117px ne se réduisait plus,
     re-rognant le burger (seul accès Menu/Commandes/Fidélité) sous 360px. On BORNE le logo + on resserre
     les gaps. On NE touche NI au burger (cible 44px WCAG 2.5.5) NI à l'entrée « Se connecter ». */
  .lc-nav-logo { height: 24px; }
  .lc-nav-row { gap: 8px; }
  .lc-nav-brand > span:not(.lc-nav-brand-mark) { display: none; }
  .lc-nav-actions { gap: 6px; }
  .lc-nav-btn-cart, .lc-nav-btn-account { padding-left: 10px; padding-right: 10px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   6. ACCESSIBILITÉ & MOUVEMENT
   ─────────────────────────────────────────────────────────────────────────── */
/* Focus visible sur fond sombre : l'anneau par défaut y est invisible. */
/* 3 bras retirés (liens du hero, boutons du hero, liens des preuves) : 0 nœud
   correspondant sur les 4 routes — le hero n'a qu'un bouton, porté par `.lc-btn`
   (audit RED cycle 17). */
.lc-v6-hero .lc-btn:focus-visible,
.lc-v6-preuves button:focus-visible {
  outline: 3px solid var(--v6-neon);
  outline-offset: 3px;
  border-radius: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .lc-v6-hero,
  .lc-v6-hero * {
    animation: none !important;
    transition: none !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   7. IMPRESSION
   Le projet n'avait AUCUNE règle @media print (audit RED cycle 4) : la page
   imprimée sortait à ~60 % blanche, titre gris illisible, contenu coupé hors
   page. Un client qui imprime la carte ou les horaires doit obtenir une feuille
   lisible — et une vitrine nocturne qui s'imprime telle quelle vide une cartouche.
   On repasse donc en encre noire sur papier blanc et on retire le décor.
   ─────────────────────────────────────────────────────────────────────────── */
/* `styles-v2.css:127-129` fait tourner des dégradés DÉCORATIFS sur les tuiles de la
   galerie, dont `:nth-child(5n)` en JAUNE VIF. Spécificité 0-2-0, donc supérieure à ma
   règle de scène nocturne (0-1-0) : la 5ᵉ tuile s'affichait en carré jaune au milieu de
   4 photos de studio nocturnes.
   Ce défaut a été RÉVÉLÉ par mon propre heal du cycle 7 : en retirant le fond `#0A0A0A`
   codé en dur en style inline, qui uniformisait les 5 tuiles par accident, j'ai exposé
   la rotation qu'il masquait. Leçon : vérifier non seulement ce qu'un correctif corrige,
   mais ce qu'il DÉCOUVRE.
   `:nth-child(n)` = même spécificité (0-2-0) et déclaré plus tard ⇒ neutralise les
   trois branches d'un coup, sans réécrire v2. */
.lc-gallery-tile:nth-child(n) {
  background: radial-gradient(72% 68% at 50% 44%, #241B15 0%, #100C0A 58%, var(--v6-nuit) 100%);
}

/* Repli des tuiles de la galerie quand une photo manque (audit RED cycle 7) : sans lui,
   la section tombait en rectangles noirs vides. */
.lc-v6-galerie-repli {
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
  font-size: 34px;
  background: radial-gradient(72% 68% at 50% 44%, #241B15 0%, #100C0A 58%, var(--v6-nuit) 100%);
}

/* Carte épuisée : l'atténuation porte sur la PHOTO, jamais sur le texte.
   (audit RED cycle 6 — l'opacity globale faisait tomber le motif de rupture à 2,46:1) */
.lc-card-item.is-soldout .lc-card-item-thumb { opacity: 1; }
/* L'atténuation porte sur la PHOTO seule, pas sur la vignette : la pastille « ÉPUISÉ »
   est rendue À L'INTÉRIEUR de la vignette (screens.jsx), donc une opacité posée sur le
   parent la traversait — elle tombait à 4,42:1 pour un seuil de 4,5 (audit RED cycle 7).
   L'opacité d'un ancêtre s'applique à TOUS ses descendants : on ne peut pas la « rendre »
   à un enfant, il faut ne jamais l'appliquer au parent. */
.lc-card-item.is-soldout .lc-card-item-thumb img { opacity: 0.5; }
.lc-card-item.is-soldout .lc-card-item-body { opacity: 1; }

@media print {
  /* Remise à plat GLOBALE. La première version ne ciblait que les classes .lc-v6-* :
     Chrome désactivant les fonds par défaut, 72 fragments tombaient sous 3:1 — dont
     beaucoup à 1,00:1, blanc sur blanc (tableau des horaires, adresse, comparatif,
     pied de page, prix du Méga). Fonds activés, c'était trois pavés noirs pleine page.
     On force donc encre noire sur papier blanc pour TOUT, puis on retire le décor. */
  *, *::before, *::after {
    background: transparent !important;
    background-image: none !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-color: #999999 !important;
  }
  html, body { background: #FFFFFF !important; }

  /* Décor pur : aucune valeur sur papier, et ça coûte de l'encre. */
  .lc-v6-hero::before,
  .lc-v6-hero-media::after,
  .lc-marquee,
  .lc-v6-hero-pastille,
  .lc-v6-hero-cta,
  .lc-card-item-add { display: none !important; }

  /* Une feuille de papier n'a pas de navigation ni de panier : on retire la barre
     entiere. Accessoirement, c'etait le dernier fragment illisible a l'impression
     (le lien actif est blanc sur pastille noire, et les fonds ne s'impriment pas). */
  .lc-nav { display: none !important; }

  /* Une modale ouverte se réimprimait sur chaque page (backdrop en position:fixed). */
  .lcf-cta-bar { display: none !important; }

  /* La FICHE PRODUIT est une modale. Historique de MES deux demi-corrections :
     · cycle 6 : je masquais `.lc-modal-backdrop` → imprimer une fiche imprimait la page
       DERRIÈRE (le menu complet, 9 pages) ;
     · cycle 7 : je la rendais visible en flux normal → elle s'imprimait bien, mais À LA
       SUITE du menu (10 pages, 94 % de l'encre hors sujet).
     Il fallait les DEUX moitiés : la modale visible ET la page masquée.
     La modale est un frère de <main id="main"> (index.html:377-413), jamais son
     descendant : masquer la page ne peut donc pas masquer la fiche. */
  .lc-modal-backdrop {
    position: static !important;
    display: block !important;
    overflow: visible !important;
    height: auto !important;
  }
  /* Une modale ouverte ⇒ on imprime SON contenu, pas la page qui est derrière. */
  body:has(.lc-modal-backdrop) #main,
  body:has(.lc-modal-backdrop) .lc-footer { display: none !important; }

  /* La bande DÉFILANTE de la galerie (posée au cycle 11 pour éviter une rangée bancale)
     ampute 3 photos sur 5 sur papier : A4 ≈ 794 px, donc la branche `max-width: 1099px`
     s'applique et `overflow-x: auto` coupe ce qui dépasse. Sur papier il n'y a pas de
     défilement — on repasse donc en rangée complète. « Mon correctif casse ailleurs »,
     cette fois à l'impression (audit RED cycle 12). */
  .lc-gallery {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  /* Les photos restent, mais ne doivent pas manger une page entière. */
  .lc-v6-hero-media { max-height: 8cm !important; }
  .lc-v6-hero-media img,
  .lc-card-item-thumb img,
  .lc-v6-famille-art img { max-height: 6cm !important; object-fit: contain !important; }

  /* Une section ne doit pas être coupée en deux par un saut de page. */
  .lc-v6-preuve,
  .lc-v6-famille,
  .lc-card-item,
  .lc-hours-row,
  .lc-faq-item { break-inside: avoid; page-break-inside: avoid; }
}