/* Lutopie Business Club — couche editorial luxury
   Chargée par toutes les pages. Voir lux.js pour la classification.
   Les !important surchargent les styles inline du markup. */

/* ============================================================
   LBC — couche "editorial luxury" (page de démonstration)
   Portée : uniquement [data-lbc-lux], soit cette page.
   Aucune dépendance externe. Tokens du design system uniquement.
   Les !important surchargent les styles inline du markup existant.
   ============================================================ */

/* --- 0. ACCESSIBILITÉ DE L'OR ---------------------------------
   --lbc-gold sur crème donne 1,87:1, très en dessous du seuil AA
   de 4,5:1. Sur forêt il donne 6,04:1 et reste inchangé.
   Ce token ne sert qu'au TEXTE doré posé sur fond clair ; les filets,
   sceaux et bordures gardent l'or de marque. */
:root{ --text-gold-on-light:#745D28; }   /* 5,16:1 sur #F0E8D6 */
[data-lbc-lux] .lux-gold-on-light{
  color:var(--text-gold-on-light) !important;
}

/* --- 1. ÉCHELLE TYPOGRAPHIQUE : creuser l'écart grand / petit --- */
[data-lbc-lux] h1{
  font-size:clamp(56px,9vw,132px) !important;
  letter-spacing:-.04em !important;
  line-height:.98 !important;
  font-variation-settings:"opsz" var(--display-opsz,40);
}
[data-lbc-lux] h2{
  font-size:clamp(38px,4.6vw,68px) !important;
  letter-spacing:-.03em !important;
  line-height:1.06 !important;
}
/* Pages d'article : le titre est long et précède un texte à lire.
   À 132px il mangeait l'écran entier, chapô compris. Plafond distinct.
   Cette règle bat aussi celle du media query mobile (spécificité supérieure). */
[data-lbc-lux].lux-article h1{
  font-size:clamp(34px,4.4vw,72px) !important;
  line-height:1.08 !important;
  letter-spacing:-.03em !important;
}
/* Eyebrows : plus petites, tracking beaucoup plus large */
[data-lbc-lux] .lux-eyebrow{
  font-size:11px !important;
  letter-spacing:.32em !important;
}
/* Chiffres du bandeau : chasse tabulaire, pas de décalage */
[data-lbc-lux] .lux-figure{
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:-.03em !important;
}

/* --- 2. RESPIRATION : le vide comme matériau --- */
/* .lux-full = section à hauteur imposée (bandeau vidéo) : on n'y touche pas. */
[data-lbc-lux] section:not(.lux-full){
  padding-top:clamp(96px,13vw,200px) !important;
  padding-bottom:clamp(96px,13vw,200px) !important;
}
/* Le hero porte déjà son propre vide (sceau, filet, sous-titre) :
   la générosité générale l'y rendait creux. On resserre. */
[data-lbc-lux] section:first-of-type:not(.lux-full){
  padding-top:clamp(56px,6vw,96px) !important;
  padding-bottom:clamp(64px,7vw,112px) !important;
}
/* Pages d'article : on lit d'une traite. Le grand vide de section coupait
   le fil entre le chapô et le corps. Placée APRÈS la règle du hero, avec
   laquelle elle est à égalité de spécificité — c'est l'ordre qui tranche. */
[data-lbc-lux].lux-article section:not(.lux-full){
  padding-top:clamp(40px,4.5vw,76px) !important;
  padding-bottom:clamp(40px,4.5vw,76px) !important;
}

/* --- 3. MATIÈRE : grain argentique + vignettage --- */
[data-lbc-lux]::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-lbc-lux] section.lux-dark{ position:relative; }
[data-lbc-lux] section.lux-dark::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(4,31,28,.42) 100%);
}
/* Filets : s'estompent aux extrémités au lieu de couper net */
[data-lbc-lux] .lux-rule-gold{
  background:linear-gradient(90deg,transparent,var(--lbc-gold),transparent) !important;
}
[data-lbc-lux] .lux-rule-quiet{
  background:linear-gradient(90deg,transparent,var(--border-on-dark),transparent) !important;
}

/* --- 4. MOUVEMENT : révélation au scroll --- */
/* L'état masqué est posé par JS après le rendu : sans transition:none,
   le navigateur anime 1 -> 0 et le contenu apparaît avant de se cacher.
   La transition n'est armée qu'à la frame suivante, via .lux-armed. */
[data-lbc-lux] .lux-r{
  opacity:0; transform:translateY(24px);
  transition:none;
}
[data-lbc-lux] .lux-r.lux-armed{
  transition:opacity .7s var(--ease-quiet),
             transform .7s var(--ease-quiet);
  transition-delay:calc(var(--i,0) * 80ms);
}
[data-lbc-lux] .lux-r.is-in{ opacity:1; transform:none; }

/* Les filets d'or se TRACENT au lieu d'apparaître : de 15 % à pleine
   largeur quand leur bloc entre à l'écran. L'état de repos reste
   scaleX(1) — quand settle() retire .lux-r, le filet ne bouge pas. */
[data-lbc-lux] .lux-r .lux-rule-gold{
  transform:scaleX(.15); opacity:0;
  transition:transform 1.1s var(--ease-quiet) .15s,
             opacity .5s ease .15s;
}
[data-lbc-lux] .lux-r.is-in .lux-rule-gold{ transform:scaleX(1); opacity:1; }

/* --- 5. SURVOL : rien qui rebondit, tout qui respire --- */
[data-lbc-lux] a{ transition:color .24s ease,background-color .24s ease,border-color .24s ease,transform .24s ease,box-shadow .24s ease; }

/* CTA en contour : le jaune saturé cède la place à un filet d'or.
   La couleur du texte s'adapte au fond — l'or sur crème ne fait que 1,88:1.
   data-lux-on est posé en JS d'après la luminance du fond réel. */
[data-lbc-lux] .lux-cta{
  background:transparent !important;
  border:1px solid var(--lbc-gold) !important;
  color:var(--text-heading) !important;          /* défaut : fond clair */
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
[data-lbc-lux] .lux-cta[data-lux-on="dark"]{
  color:var(--lbc-gold) !important;              /* or sur forêt : 6,0:1 */
}
[data-lbc-lux] .lux-cta:hover,
[data-lbc-lux] .lux-cta:focus-visible{
  background:var(--lbc-gold) !important;
  color:var(--lbc-forest) !important;            /* forêt sur or : 6,0:1 */
  transform:translateY(-2px);
  box-shadow:0 12px 32px -16px rgba(201,168,76,.55);
}
/* Liens de texte : le filet passe à l'or */
[data-lbc-lux] a.lux-underline:hover{ border-bottom-color:var(--lbc-gold) !important; }
/* Cartes : le filet s'éclaire, la carte s'élève d'un cheveu */
[data-lbc-lux] .lux-card{
  transition:border-color .3s ease,transform .3s var(--ease-quiet),box-shadow .3s ease;
}
[data-lbc-lux] .lux-card:hover{
  border-color:var(--lbc-gold) !important;
  transform:translateY(-3px);
  box-shadow:0 18px 44px -28px rgba(6,51,46,.5);
}
/* Puces (secteurs, écosystème) : remplissage discret, pas de soulèvement */
[data-lbc-lux] .lux-chip{ transition:border-color .28s ease,background-color .28s ease; }
[data-lbc-lux] .lux-chip:hover{
  border-color:var(--lbc-gold) !important;
  background-color:rgba(201,168,76,.07) !important;
}

/* --- 6. PHOTOS : traitement editorial --- */
[data-lbc-lux] .lux-photo{
  position:relative; border:1px solid transparent;
  transition:border-color .35s ease;
}
[data-lbc-lux] .lux-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--lbc-forest); mix-blend-mode:multiply; opacity:.16;
  transition:opacity .45s ease;
}
[data-lbc-lux] .lux-photo:hover{ border-color:var(--lbc-gold) !important; }
[data-lbc-lux] .lux-photo:hover::after{ opacity:0; }
[data-lbc-lux] a[href*="instagram"] img{
  filter:saturate(.82) contrast(1.05);
  transition:transform .8s var(--ease-quiet),filter .5s ease;
}
[data-lbc-lux] a[href*="instagram"]:hover img{ transform:scale(1.05); filter:saturate(1) contrast(1); }
[data-lbc-lux] [data-parallax]{ filter:saturate(.88) contrast(1.04); will-change:transform; }

/* --- 7. ACCESSIBILITÉ --- */
[data-lbc-lux] a:focus-visible,
[data-lbc-lux] [onClick]:focus-visible{
  outline:2px solid var(--lbc-gold); outline-offset:4px; border-radius:2px;
}

/* --- 8. RESPONSIVE : la générosité se resserre sur petit écran ---
   data-lux-cols est posé en JS d'après le nombre réel de colonnes calculées. */
@media (max-width:860px){
  [data-lbc-lux] [data-lux-cols="2"],
  [data-lbc-lux] [data-lux-cols="3"],
  [data-lbc-lux] [data-lux-cols="4"]{ grid-template-columns:1fr !important; }
  [data-lbc-lux] [data-lux-cols="6"]{ grid-template-columns:repeat(3,1fr) !important; }
  [data-lbc-lux] section{ padding-left:24px !important; padding-right:24px !important; }
  [data-lbc-lux] h1{ font-size:clamp(40px,11vw,60px) !important; }
  [data-lbc-lux] h2{ font-size:clamp(30px,7.5vw,42px) !important; }
}

/* --- 9. MOUVEMENT RÉDUIT : tout reste, rien ne bouge --- */
@media (prefers-reduced-motion: reduce){
  [data-lbc-lux] .lux-r{ opacity:1 !important; transform:none !important; transition:none !important; }
  [data-lbc-lux] .lux-r .lux-rule-gold{ opacity:1 !important; transform:none !important; transition:none !important; }
  [data-lbc-lux] a[style*="var(--accent)"]:hover,
  [data-lbc-lux] .lux-card:hover{ transform:none !important; }
  [data-lbc-lux] .lux-photo:hover img{ transform:none !important; }
  [data-lbc-lux] [data-parallax]{ transform:none !important; }
}

/* ============================================================
   LES DOMAINES — grille statique
   Remplace un bandeau qui défilait en boucle sur 72 s. Le mouvement
   perpétuel attirait l'œil sans rien lui apprendre, et la typo — du
   display 32 px en graisse 500 — pesait bien trop lourd pour une
   simple nomenclature : douze intitulés en gros caractères mobiles
   lisaient comme une bannière publicitaire.

   Ici c'est une liste, et elle se tient comme telle : petites
   capitales espacées en graisse légère, filets dorés d'un pixel pour
   toute séparation, aucune animation. On lit les douze domaines d'un
   coup d'œil au lieu d'en attendre le défilement.
   ============================================================ */
[data-lbc-lux] .lbc-fields{
  background:var(--lbc-forest-900); color:var(--lbc-cream);
  padding:clamp(56px,7vw,104px) clamp(20px,5vw,90px);
  border-block:1px solid var(--border-on-dark);
}
[data-lbc-lux] .lbc-fields__in{ max-width:1080px; margin:0 auto; text-align:center; }
[data-lbc-lux] .lbc-fields__eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--lbc-gold-soft,#D2B978); margin:0 0 14px;
}
[data-lbc-lux] .lbc-fields__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(26px,3.2vw,42px); line-height:1.1; letter-spacing:-.02em;
  color:var(--lbc-cream); margin:0 0 clamp(34px,4.5vw,56px);
}
[data-lbc-lux] .lbc-fields__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  /* La gouttière est nulle : ce sont les filets qui séparent, pas le vide. */
  gap:0;
}
[data-lbc-lux] .lbc-fields__grid li{
  padding:clamp(17px,1.9vw,24px) clamp(10px,1.6vw,22px);
  border-top:1px solid rgba(184,150,63,.20);
  border-left:1px solid rgba(184,150,63,.20);
  position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
  /* La hauteur réserve la place du détail, même quand il ne se voit
     pas : une cellule qui grandit au survol pousse ses voisines et fait
     sauter la grille sous le curseur. */
  min-height:clamp(92px,8.4vw,122px);
  transition:background .35s var(--ease-quiet);
}
[data-lbc-lux] .lbc-fields__grid b{
  /* Corps réduit, graisse légère, chasse ouverte : la nomenclature
     s'efface derrière le propos au lieu de le concurrencer. */
  font-family:var(--font-body); font-weight:400;
  font-size:clamp(11.5px,1.05vw,13px); letter-spacing:.19em; text-transform:uppercase;
  color:color-mix(in srgb, var(--lbc-cream) 82%, transparent);
  transition:color .35s var(--ease-quiet), transform .35s var(--ease-quiet);
}
/* Hors du flux : sans cela le détail, même invisible, poussait le nom
   vers le haut de sa cellule et laissait un vide sous lui. Le nom est
   maintenant centré au repos, et ne se déplace qu'au survol. */
[data-lbc-lux] .lbc-fields__grid i{
  position:absolute; left:12px; right:12px; bottom:clamp(12px,1.4vw,18px);
  font-style:normal;
  font-size:clamp(11.5px,1vw,12.5px); line-height:1.45; letter-spacing:0;
  text-transform:none;
  color:color-mix(in srgb, var(--lbc-cream) 58%, transparent);
}
/* Un treillis ne doit porter de filet qu'entre ses cellules, jamais sur
   son pourtour : sinon il se lit comme un tableau encadré. */
[data-lbc-lux] .lbc-fields__grid li:nth-child(3n+1){ border-left:0; }
[data-lbc-lux] .lbc-fields__grid li:nth-child(-n+3){ border-top:0; }
/* Le détail ne se montre qu'à la demande, là où il y a un curseur pour
   le demander. Il reste dans le document : un lecteur d'écran l'énonce
   quoi qu'il arrive, l'opacité ne le lui cache pas. */
@media (hover: hover) and (pointer: fine){
  [data-lbc-lux] .lbc-fields__grid i{
    opacity:0; transform:translateY(5px);
    transition:opacity .32s var(--ease-quiet), transform .32s var(--ease-quiet);
  }
  [data-lbc-lux] .lbc-fields__grid li:hover i{ opacity:1; transform:none; }
  /* Le nom remonte pour laisser la place : les deux ne se croisent
     jamais, et le mouvement dit d'où vient le détail. */
  [data-lbc-lux] .lbc-fields__grid li:hover b{ transform:translateY(-16px); }
}
/* Au doigt, aucun survol n'existe : le détail est là d'emblée, et le
   nom lui laisse la place une fois pour toutes. */
@media (hover: none){
  /* Au doigt le détail est permanent : il lui faut donc sa vraie place
     dans le flux, pas un calage en bas de cellule. Posé en absolu comme
     sur ordinateur, il venait s'écrire par-dessus le nom. */
  [data-lbc-lux] .lbc-fields__grid li{
    flex-direction:column; min-height:0;
    padding-block:clamp(18px,3vw,26px);
  }
  [data-lbc-lux] .lbc-fields__grid i{
    position:static; margin-top:9px; max-width:34ch;
  }
  [data-lbc-lux] .lbc-fields__grid b{ transform:none; }
}
[data-lbc-lux] .lbc-fields__grid li:hover{ background:rgba(184,150,63,.05); }
[data-lbc-lux] .lbc-fields__grid li:hover b{ color:var(--lbc-gold-soft,#D2B978); }
@media (prefers-reduced-motion: reduce){
  [data-lbc-lux] .lbc-fields__grid i,
  [data-lbc-lux] .lbc-fields__grid b{ transition:opacity .01s; transform:none !important; }
}

@media (max-width:860px){
  [data-lbc-lux] .lbc-fields__grid{ grid-template-columns:repeat(2,1fr); }
  [data-lbc-lux] .lbc-fields__grid li:nth-child(3n+1){ border-left:1px solid rgba(184,150,63,.20); }
  [data-lbc-lux] .lbc-fields__grid li:nth-child(-n+3){ border-top:1px solid rgba(184,150,63,.20); }
  [data-lbc-lux] .lbc-fields__grid li:nth-child(2n+1){ border-left:0; }
  [data-lbc-lux] .lbc-fields__grid li:nth-child(-n+2){ border-top:0; }
}
@media (max-width:430px){
  [data-lbc-lux] .lbc-fields__grid b{ letter-spacing:.15em; }
  [data-lbc-lux] .lbc-fields__grid li{ padding-inline:8px; }
}


/* --- le relief au pointeur (armTilt, lux.js) --- */
[data-lbc-lux] .lux-tilt{
  transition:transform .35s var(--ease-quiet);
  transform-style:preserve-3d; position:relative; will-change:transform;
}
[data-lbc-lux] .lux-tilt::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(440px circle at var(--lx,50%) 10%,
             rgba(255,240,205,.13), transparent 60%);
  opacity:0; transition:opacity .4s ease;
}
[data-lbc-lux] .lux-tilt:hover::after{ opacity:1; }

/* --- le fil de lecture (armLecture, lux.js) --- */
.lux-fil{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:var(--lbc-gold,#C9A84C);
  transform:scaleX(0); transform-origin:left center;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  [data-lbc-lux] .lux-tilt{ transition:none; }
  [data-lbc-lux] .lux-tilt::after{ display:none; }
}


/* le jeu : la poussière d'or et les boutons aimantés */
.lux-poussiere{
  position:fixed; inset:0; z-index:300; pointer-events:none;
}
[data-lbc-lux] .lux-aimant{
  transition:translate .3s var(--ease-quiet);
  will-change:translate;
}


/* le petit seuil : voile crème des navigations internes */
.seuil-doux{
  position:fixed; inset:0; z-index:400; pointer-events:none;
  background:var(--lbc-cream,#F0E8D6);
  /* 24/09/2026 : ease-in voulu. lux.js cadence le depart a 170 ms (setTimeout) :
     le voile est plein a l'instant de la navigation, un depart vif ferait une coupe. */
  opacity:0; transition:opacity .17s ease-in;
}
.seuil-doux.est-la{ opacity:1; }
/* à l'arrivée, la dissolution est plus lente que la levée : on entre */
.seuil-doux:not(.est-la){ transition:opacity .3s ease-out; }