/* Lux On — Système à deux thèmes (DA sombre / DA blanche), pack officiel fourni.
   Toutes les surfaces, textes, bordures et boutons du site reposent sur ces tokens :
   changer [data-theme] sur <html> change l'ensemble du système visuel. */

:root{
  /* Dégradé de marque officiel (fourni dans le pack, identique dans les deux DA) */
  --blue:#00CFFF; --indigo:#5239FF; --magenta:#EA18C8; --orange:#FF9A22;
  --gradient:linear-gradient(135deg,var(--blue),var(--indigo),var(--magenta),var(--orange));
  --radius:14px;
  --transition-theme: background-color .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease;
}

/* ---------- DA sombre (défaut) ---------- */
:root,
:root[data-theme="dark"]{
  --bg:#05070E;
  --bg-alt:#0A0F1E;
  --bg-dark:#05070E;
  --text:#FFFFFF;
  --text-secondary:#98A2C0;
  --border:rgba(255,255,255,0.14);
  --card-bg:rgba(18,23,42,0.55);
  --card-bg-solid:#0E1424;
  --shadow-color:rgba(0,0,0,0.55);
  --nav-bg:rgba(5,7,14,0.62);
  --btn-primary-bg:#FFFFFF;
  --btn-primary-text:#05070E;
  --btn-secondary-bg:rgba(255,255,255,0.06);
  --btn-secondary-border:rgba(255,255,255,0.32);
  --screen-bg:#04060C;
  --beam-1:0.55; --beam-2:0.45; --beam-3:0.42;
  --grad-text-1:#BEE0FF; --grad-text-2:#D9C7FF; --grad-text-3:#FFD0DA;
  --legal-note-bg: rgba(255,154,34,0.1);
  --legal-note-border: rgba(255,154,34,0.5);
  --legal-note-text:#FFD199;
  --success-bg: rgba(34,197,94,0.12);
  --success-border: rgba(34,197,94,0.4);
  --success-text:#86EFAC;
  --placeholder-a: rgba(255,255,255,0.05);
  --placeholder-b: rgba(255,255,255,0.09);
  --glass-nav-bg: rgba(24,29,48,0.55);
  --glass-nav-border: rgba(255,255,255,0.09);
  --glass-nav-shadow: rgba(0,0,0,0.35);
  --glass-nav-hover-bg: rgba(255,255,255,0.05);
  --glass-nav-active-bg: rgba(255,255,255,0.09);
  --glass-nav-icon-bg: rgba(255,255,255,0.07);
}

/* ---------- DA blanche ---------- */
:root[data-theme="light"]{
  --bg:#FFFFFF;
  --bg-alt:#F5F7FC;
  --bg-dark:#0B1220;
  --text:#0B1220;
  --text-secondary:#59647A;
  --border:rgba(11,18,32,0.12);
  --card-bg:#FFFFFF;
  --card-bg-solid:#FFFFFF;
  --shadow-color:rgba(11,18,32,0.14);
  --nav-bg:rgba(255,255,255,0.72);
  --btn-primary-bg:#0B1220;
  --btn-primary-text:#FFFFFF;
  --btn-secondary-bg:rgba(11,18,32,0.04);
  --btn-secondary-border:rgba(11,18,32,0.18);
  --screen-bg:#0B1220;
  --beam-1:0.30; --beam-2:0.24; --beam-3:0.22;
  --grad-text-1:#3E6FD9; --grad-text-2:#8B5FCB; --grad-text-3:#D9587B;
  --placeholder-a:#F0F1F3;
  --placeholder-b:#E7E9EC;
  --glass-nav-bg: rgba(255,255,255,0.6);
  --glass-nav-border: rgba(11,18,32,0.07);
  --glass-nav-shadow: rgba(11,18,32,0.12);
  --glass-nav-hover-bg: rgba(11,18,32,0.035);
  --glass-nav-active-bg: #FFFFFF;
  --glass-nav-icon-bg: rgba(11,18,32,0.045);
  --legal-note-bg: rgba(234,24,200,0.06);
  --legal-note-border: rgba(234,24,200,0.35);
  --legal-note-text:#9A1180;
  --success-bg: rgba(22,101,52,0.06);
  --success-border: rgba(22,101,52,0.3);
  --success-text:#166534;
}

html{transition:var(--transition-theme);}
body{transition:var(--transition-theme);}
header,footer,.cell,.btn,.field input,.field select,.field textarea,.checkbox-pill,.filter-btn{transition:var(--transition-theme), transform .25s ease, opacity .25s ease;}

/* Bascule du logo selon le thème actif */
.logo-dark{display:block;}
.logo-light{display:none;}
:root[data-theme="light"] .logo-dark{display:none;}
:root[data-theme="light"] .logo-light{display:block;}

/* ---------- Sélecteur de thème (segmenté, persistant) ----------
   Intégré dans la barre de nav (toujours visible, jamais de chevauchement avec le contenu).
   Sur mobile, il redevient un pill flottant en bas d'écran pour ne pas surcharger la nav. */
.theme-switch{display:inline-flex;gap:0.25rem;background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:999px;padding:4px;}
.theme-switch-btn{border:none;background:transparent;color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;width:36px;height:32px;padding:0;border-radius:999px;cursor:pointer;transition:background-color .25s ease,color .25s ease;}
.theme-switch-btn:hover{color:var(--text);}
.theme-switch-btn[aria-pressed="true"]{background:var(--btn-primary-bg);color:var(--btn-primary-text);}
.theme-switch-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
/* Sur mobile, le sélecteur de la barre de nav est masqué (peu de place à côté du CTA + burger) ;
   un second exemplaire (identique, .theme-switch-btn ciblé par js/theme.js via querySelectorAll)
   vit dans le menu déroulant mobile — voir .mobile-menu .theme-switch ci-dessous.
   Astuce évitée : position:fixed ici serait piégé par le backdrop-filter du <header>, qui crée
   un containing block local et casse l'ancrage au viewport. */
@media(max-width:640px){
  header > .nav-wrap > .nav-actions > .theme-switch{display:none;}
}
.mobile-menu .theme-switch{display:none;}
@media(max-width:640px){
  .mobile-menu .theme-switch{display:flex;align-self:center;margin-top:0.25rem;}
}

/* ---------- Hero premium avec halos lumineux animés ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;isolation:isolate;}
.hero-bg{position:absolute;top:-4%;left:-4%;width:108%;height:108%;object-fit:cover;object-position:center;z-index:-4;will-change:transform;pointer-events:none;animation:heroBgDrift 34s ease-in-out infinite alternate;}
@keyframes heroBgDrift{
  from{transform:scale(1) translate(0,0);}
  to{transform:scale(1.07) translate(-1.4%,1.1%);}
}
.hero-bg-tint{position:absolute;inset:0;z-index:-4;background:var(--bg);opacity:0.08;pointer-events:none;}
:root[data-theme="light"] .hero-bg-tint{opacity:0.12;}
.hero-bg-light{display:none;}
:root[data-theme="light"] .hero-bg-dark{display:none;}
:root[data-theme="light"] .hero-bg-light{display:block;}
.hero-halo{position:absolute;border-radius:50%;filter:blur(70px);z-index:-3;will-change:transform,opacity;pointer-events:none;}
.halo-blue{width:46vw;height:46vw;max-width:640px;max-height:640px;left:-12%;top:6%;background:radial-gradient(circle,var(--blue),transparent 70%);opacity:var(--beam-1);animation:haloBlue 19s ease-in-out infinite;}
.halo-violet{width:40vw;height:40vw;max-width:580px;max-height:580px;left:34%;top:-10%;background:radial-gradient(circle,var(--indigo),transparent 70%);opacity:var(--beam-2);animation:haloViolet 23s ease-in-out infinite;animation-delay:-6s;}
.halo-orange{width:44vw;height:44vw;max-width:620px;max-height:620px;right:-14%;bottom:-10%;background:radial-gradient(circle,var(--orange),transparent 70%);opacity:var(--beam-3);animation:haloOrange 21s ease-in-out infinite;animation-delay:-11s;}

@keyframes haloBlue{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(3%,4%,0) scale(1.07);}
}
@keyframes haloViolet{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(-4%,3%,0) scale(1.09);}
}
@keyframes haloOrange{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(-3%,-4%,0) scale(1.06);}
}

.hero-parallax{position:absolute;inset:-5%;z-index:-3;will-change:transform;transition:transform .3s ease-out;}

.hero-content{position:relative;z-index:1;max-width:640px;padding:7rem 1.5rem 3rem;}
.hero-content .label{background:var(--nav-bg);backdrop-filter:blur(8px);border:1px solid var(--border);padding:0.4rem 0.9rem;border-radius:999px;display:inline-flex;}
.hero-title{margin-top:1.1rem;color:var(--text);}
/* Accent dégradé Lux On — à réserver à une expression forte par grand titre, jamais au titre entier. */
.luxon-gradient-text{background:linear-gradient(100deg,#00CFFF 0%,#5239FF 35%,#EA18C8 68%,#FF9A22 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.hero-lead{color:var(--text-secondary);font-size:1.08rem;margin:1.25rem 0 2rem;max-width:480px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:0.85rem;}

@media (prefers-reduced-motion: reduce){
  .hero-halo{animation:none !important;}
  .hero-bg{animation:none !important;}
  .hero-parallax{transform:none !important;}
}
@media (max-width:900px){
  .hero-parallax{display:contents;}
}

/* ---------- Symbole Lux On centré dans les écrans en gradient ---------- */
.screen-symbol{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20%;min-width:36px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 14px rgba(255,255,255,0.4));z-index:2;}
.screen-symbol.symbol-small{width:13%;}

/* ---------- Blocs éditoriaux "Nos solutions" (3 max) ---------- */
.solutions-editorial{display:grid;grid-template-columns:1fr;gap:1.25rem;}
@media(min-width:900px){.solutions-editorial{grid-template-columns:repeat(3,1fr);}}
.solution-block{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:var(--transition-theme), transform .3s ease, box-shadow .3s ease;}
.solution-block:hover{transform:translateY(-4px);box-shadow:0 24px 50px -20px var(--shadow-color);border-color:var(--blue);}
.solution-block-visual{position:relative;aspect-ratio:4/3;background:var(--screen-bg);overflow:hidden;}
.solution-block-visual .solution-gradient{position:absolute;inset:0;background:var(--gradient);opacity:0.85;}
.solution-block-body{padding:1.5rem;display:flex;flex-direction:column;gap:0.6rem;flex:1;}
.solution-block-icon{width:2.5rem;height:2.5rem;color:var(--text);}
.solution-block-body h3{font-size:1.15rem;color:var(--text);}
.solution-block-body p{color:var(--text-secondary);font-size:0.92rem;flex:1;}
.solution-block-body span:last-child{font-size:0.85rem;font-weight:700;color:var(--text);display:inline-flex;align-items:center;gap:0.35rem;}

.software-section{background:var(--card-bg);border:1px solid var(--border);border-radius:24px;padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;}
@media(min-width:900px){.software-section{grid-template-columns:1.1fr 1fr;}}
.software-visual{position:relative;aspect-ratio:16/10;background:var(--screen-bg);border-radius:16px;overflow:hidden;}
.software-visual .solution-gradient{position:absolute;inset:0;background:var(--gradient);opacity:0.8;}

/* ---------- Navigation par icônes entre les solutions (page Produits) ----------
   Direction "verre premium Lux On" : capsule flottante centrée, glass translucide,
   boutons de largeur égale, icône active sur carré dégradé officiel. */
#ecrans-vitrine,#menu-boards,#ecrans-muraux,#totems-bornes,#video-wall,#ecrans-tactiles,#solutions-entreprise,#logiciel-gestion{scroll-margin-top:150px;}
.solutions-icon-nav{
  position:sticky;top:82px;z-index:90;
  max-width:1200px;margin:0.75rem auto 0;
  display:flex;gap:0.35rem;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  background:var(--glass-nav-bg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-nav-border);
  border-radius:22px;
  box-shadow:0 16px 40px -28px var(--glass-nav-shadow);
  padding:0.4rem;
}
.solutions-icon-nav::-webkit-scrollbar{display:none;}
.icon-nav-item{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0.35rem;padding:0.6rem 0.5rem;border-radius:16px;
  background:transparent;box-shadow:none;
  color:var(--text-secondary);text-align:center;
  transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
  scroll-snap-align:center;
}
@media(min-width:860px){
  .icon-nav-item{flex:1 1 0;min-width:0;}
  .icon-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
}
.icon-nav-item:hover{background:var(--glass-nav-hover-bg);transform:translateY(-2px);}
.icon-nav-item.active{
  color:var(--text);
  background:var(--glass-nav-active-bg);
  box-shadow:0 8px 20px -12px var(--glass-nav-shadow);
}
.icon-nav-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex-shrink:0;border-radius:10px;
  background:var(--glass-nav-icon-bg);
  transition:background .2s ease;
}
.icon-nav-icon svg{display:block;width:20px;height:20px;}
.icon-nav-item.active .icon-nav-icon{
  background:linear-gradient(135deg,#00CFFF 0%,#5239FF 45%,#EA18C8 75%,#FF9A22 100%);
}
.icon-nav-item.active .icon-nav-icon svg,
.icon-nav-item.active .icon-nav-icon svg *{fill:#fff;stroke:#fff;}
.icon-nav-label{font-size:0.68rem;font-weight:700;}
@media(max-width:859px){
  .solutions-icon-nav{margin:0.75rem 1rem 0;max-width:none;justify-content:flex-start;scroll-snap-type:x mandatory;padding:0.4rem 0.6rem;}
  .icon-nav-item{padding:0.6rem 0.85rem;}
}
@media (prefers-reduced-motion: reduce){
  .icon-nav-item,.icon-nav-icon{transition:none !important;}
}