/**
 * =========================================================
 * LSKAIZEN — custom.css (VERSION PROPRE + STABLE + DOCUMENTÉE)
 * Joomla 5/6 — Template LSKAIZEN
 *
 * OBJECTIF :
 * - CSS global du template (header/footer/forms/cards/joomla)
 * - CSS landing KAIZEN isolée STRICTEMENT sous .lk-page (pas de fuite)
 * - Zéro doublon .lk-hero / .lk-page / etc.
 * - Animations safe + accessibilité (prefers-reduced-motion)
 *
 * CONSEIL :
 * - Garde ce fichier comme “source de vérité”
 * - Si tu ajoutes une section, ajoute-la à la fin du bon chapitre
 * =========================================================
 */


/* =========================================================
   01) VARIABLES GLOBALES — TEMPLATE
   Utilisées dans tout le site HORS landing .lk-page
   ========================================================= */
:root{
  --ls-primary:#2563eb;
  --ls-secondary:#1e293b;
  --ls-accent:#06b6d4;

  --ls-text:#334155;
  --ls-muted:#64748b;

  --ls-bg:#ffffff;
  --ls-bg-alt:#f8fafc;
  --ls-border:#e2e8f0;

  --ls-radius:14px;
  --ls-shadow-sm:0 2px 8px rgba(0,0,0,.08);
  --ls-shadow-md:0 10px 30px rgba(0,0,0,.10);
  --ls-shadow-lg:0 18px 55px rgba(15,23,42,.15);

  --ls-transition: .22s ease;
}


/* =========================================================
   02) RESET + BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--ls-text);
  background:var(--ls-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Images */
img{ max-width:100%; height:auto; display:block; }

/* Liens */
a{ color:var(--ls-primary); text-decoration:none; transition: color var(--ls-transition); }
a:hover{ color:var(--ls-secondary); }

/* Container */
.container-fluid{
  max-width:1400px;
  margin:0 auto;
  padding:0 20px;
  width:100%;
}

/* Fix anti-scroll horizontal */
html, body { overflow-x:hidden; }
.moduletable, .module, p, li, a, span{ overflow-wrap:break-word; word-break:break-word; }


/* =========================================================
   03) GRID (Bootstrap-like) — uniquement si ton template en dépend
   Si tu utilises Bootstrap natif, tu peux supprimer ce bloc.
   ========================================================= */
.row{
  display:flex;
  flex-wrap:wrap;
  margin-left:-15px;
  margin-right:-15px;
  width:calc(100% + 30px);
}
.row > *{
  padding-left:15px;
  padding-right:15px;
  flex-shrink:0;
}
.col-12{ flex:0 0 100%; max-width:100%; }
.col-lg-3{ flex:0 0 25%; max-width:25%; }
.col-lg-4{ flex:0 0 33.333333%; max-width:33.333333%; }
.col-lg-6{ flex:0 0 50%; max-width:50%; }
.col-lg-9{ flex:0 0 75%; max-width:75%; }
.col-md-6{ flex:0 0 50%; max-width:50%; }

@media (max-width:991px){
  .col-lg-3,.col-lg-4,.col-lg-6,.col-lg-9{ flex:0 0 100%; max-width:100%; }
}
@media (max-width:767px){
  .col-md-6{ flex:0 0 100%; max-width:100%; }
}


/* =========================================================
   04) TOPBAR
   ========================================================= */
.topbar{
  background:var(--ls-secondary);
  color:#fff;
  padding:10px 0;
  font-size:14px;
}
.topbar a{ color:#fff; }
.topbar a:hover{ color:var(--ls-accent); }


/* =========================================================
   05) HEADER + NAV
   ========================================================= */
.site-header{
  background:#fff;
  padding:20px 0;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  position:relative;
  z-index:1000;
  width:100%;
}
.site-header.sticky-header{ position:sticky; top:0; }

.site-header .header-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
}
.site-branding{ display:flex; align-items:center; gap:15px; }
.site-logo{ max-height:50px; width:auto; transition: opacity var(--ls-transition); }
.site-logo:hover{ opacity:.85; }

.site-title{ color:var(--ls-secondary); }
.site-title h1{
  font-size:28px;
  font-weight:800;
  margin:0;
  color:var(--ls-secondary);
}
.site-title:hover,
.site-title:hover h1{ color:var(--ls-primary); }

/* Burger */
.mobile-menu-toggle{
  display:none;
  flex-direction:column;
  background:none;
  border:none;
  cursor:pointer;
  padding:10px;
}
.mobile-menu-toggle span{
  width:25px;
  height:3px;
  background:var(--ls-secondary);
  margin:3px 0;
  border-radius:2px;
  transition: background var(--ls-transition);
}
.mobile-menu-toggle:hover span{ background:var(--ls-primary); }
@media (max-width:991px){ .mobile-menu-toggle{ display:flex; } }

/* NAV */
.site-navigation{
  background:var(--ls-bg-alt);
  border-bottom:1px solid var(--ls-border);
  width:100%;
}
.navigation-wrapper{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.site-navigation ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
.site-navigation ul li{ position:relative; }
.site-navigation ul li a{
  display:block;
  padding:18px 20px;
  color:var(--ls-text);
  font-weight:600;
  border-bottom:3px solid transparent;
  transition: background var(--ls-transition), color var(--ls-transition), border-color var(--ls-transition);
}
.site-navigation ul li a:hover,
.site-navigation ul li.active a,
.site-navigation ul li.current a{
  color:var(--ls-primary);
  border-bottom-color:var(--ls-primary);
  background:#fff;
}

/* User actions */
.user-actions{ display:flex; align-items:center; gap:15px; padding:10px 0; }
.user-profile{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  background:#fff;
  border:1px solid var(--ls-border);
  border-radius:var(--ls-radius);
  color:var(--ls-text);
  transition: background var(--ls-transition), color var(--ls-transition), border-color var(--ls-transition);
}
.user-profile:hover{
  background:var(--ls-primary);
  color:#fff;
  border-color:var(--ls-primary);
}
.user-profile svg{ stroke:currentColor; }

.btn-login,.btn-logout{
  padding:8px 20px;
  background:var(--ls-primary);
  color:#fff;
  border-radius:var(--ls-radius);
  font-weight:700;
  border:none;
  cursor:pointer;
  transition: transform var(--ls-transition), box-shadow var(--ls-transition), background var(--ls-transition);
}
.btn-login:hover,.btn-logout:hover{
  background:var(--ls-secondary);
  transform: translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

@media (max-width:991px){
  .site-navigation{ display:none; }
  .site-navigation.mobile-open{ display:block; }
  .navigation-wrapper{ flex-direction:column; }
  .site-navigation ul{ flex-direction:column; width:100%; }
  .site-navigation ul li{ width:100%; }
  .site-navigation ul li a{ border-bottom:1px solid var(--ls-border); }
}


/* =========================================================
   06) HERO / BANNER (GENERIC)
   ========================================================= */
.site-banner{
  background:linear-gradient(135deg, var(--ls-primary) 0%, var(--ls-secondary) 100%);
  color:#fff;
  padding:80px 0;
  text-align:center;
}
.site-banner h1,.site-banner h2{ color:#fff; margin-bottom:20px; }
.site-banner p{ font-size:18px; max-width:800px; margin:0 auto; }


/* =========================================================
   07) BREADCRUMB
   ========================================================= */
.breadcrumb-section{
  background:var(--ls-bg-alt);
  padding:15px 0;
  border-bottom:1px solid var(--ls-border);
}
.breadcrumb{ background:none; padding:0; margin:0; }


/* =========================================================
   08) MAIN / SIDEBAR
   ========================================================= */
.site-main{ padding:60px 0; min-height:50vh; }

.sidebar{ padding:20px; }
.sidebar .module{
  background:#fff;
  border-radius:var(--ls-radius);
  padding:25px;
  margin-bottom:30px;
  box-shadow:var(--ls-shadow-sm);
  transition: transform var(--ls-transition), box-shadow var(--ls-transition);
}
.sidebar .module:hover{
  transform: translateY(-2px);
  box-shadow:var(--ls-shadow-md);
}
.sidebar .module h3{
  color:var(--ls-secondary);
  font-size:20px;
  margin:0 0 15px;
  padding-bottom:10px;
  border-bottom:2px solid var(--ls-primary);
}


/* =========================================================
   09) CARDS / BUTTONS (GLOBAL)
   ========================================================= */
.card{
  background:#fff;
  border-radius:var(--ls-radius);
  box-shadow:var(--ls-shadow-sm);
  margin-bottom:30px;
  overflow:hidden;
  transition: transform var(--ls-transition), box-shadow var(--ls-transition);
}
.card:hover{ transform: translateY(-2px); box-shadow:var(--ls-shadow-md); }
.card-header{ background:var(--ls-primary); color:#fff; padding:15px 20px; font-weight:800; }
.card-body{ padding:20px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 24px;
  background:var(--ls-primary);
  color:#fff;
  border-radius:var(--ls-radius);
  font-weight:800;
  border:none;
  cursor:pointer;
  transition: transform var(--ls-transition), box-shadow var(--ls-transition), background var(--ls-transition);
}
.btn:hover{
  background:var(--ls-secondary);
  transform: translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.14);
}
.btn-secondary{ background:var(--ls-secondary); }
.btn-secondary:hover{ background:var(--ls-primary); }
.btn-outline{
  background:transparent;
  color:var(--ls-primary);
  border:2px solid var(--ls-primary);
}
.btn-outline:hover{ background:var(--ls-primary); color:#fff; }


/* =========================================================
   10) ALERTS
   ========================================================= */
.alert{
  padding:15px 20px;
  border-radius:var(--ls-radius);
  margin-bottom:20px;
  border-left:4px solid;
}
.alert-info{ background:#dbeafe; border-left-color:var(--ls-primary); color:#1e40af; }
.alert-success{ background:#d1fae5; border-left-color:#10b981; color:#065f46; }
.alert-warning{ background:#fef3c7; border-left-color:#f59e0b; color:#92400e; }
.alert-danger{ background:#fee2e2; border-left-color:#ef4444; color:#991b1b; }


/* =========================================================
   11) FORMS (GLOBAL)
   ========================================================= */
.form-control{
  width:100%;
  padding:12px;
  border:1px solid var(--ls-border);
  border-radius:var(--ls-radius);
  font-size:16px;
  transition: border-color var(--ls-transition), box-shadow var(--ls-transition), background var(--ls-transition);
}
.form-control:focus{
  outline:none;
  border-color:var(--ls-primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}
.form-label{ display:block; margin-bottom:8px; font-weight:700; color:var(--ls-text); }


/* =========================================================
   12) FOOTER
   ========================================================= */
.site-footer{
  background:var(--ls-secondary);
  color:#fff;
  padding:40px 0 20px;
  width:100%;
}
.site-footer .container-fluid{ max-width:1400px; }
.footer-content{
  padding-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:20px;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:40px;
  margin-bottom:30px;
}
.footer-bottom{
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:15px;
}
.footer-bottom p{ margin:0; font-size:14px; color:rgba(255,255,255,.72); }
.site-footer h3,.site-footer h4{ color:#fff !important; font-size:18px; margin:0 0 20px; font-weight:800; }
.site-footer ul{ list-style:none !important; padding:0 !important; margin:0 !important; }
.site-footer ul li{ margin-bottom:10px; }
.site-footer a{
  color:rgba(255,255,255,.82) !important;
  transition: transform var(--ls-transition), color var(--ls-transition);
  display:inline-block;
}
.site-footer a:hover{ color:#fff !important; transform: translateX(4px); }

@media (max-width:768px){
  .footer-grid{ grid-template-columns:1fr !important; gap:30px !important; }
  .footer-bottom{ flex-direction:column; text-align:center; gap:10px; }
}


/* =========================================================
   13) com_users PROFILE (LSKAIZEN override)
   ========================================================= */
.ls-profile{ padding:6px 0; }
.ls-profile__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:0 0 18px;
}
.ls-profile__title{
  margin:0;
  font-size:1.6rem;
  color:#1e293b;
  font-weight:900;
}
.ls-profile__subtitle{ margin:6px 0 0; color:#64748b; }
.ls-profile__btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#2563eb;
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition: transform var(--ls-transition), filter var(--ls-transition);
}
.ls-profile__btn:hover{ filter:brightness(.95); transform: translateY(-1px); }

.ls-profile__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:900px){ .ls-profile__grid{ grid-template-columns:1fr; } }

.ls-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.ls-card__title{
  margin:0 0 12px;
  font-size:1.05rem;
  font-weight:900;
  color:#1e293b;
  padding-bottom:10px;
  border-bottom:1px solid #e2e8f0;
}
.ls-dl{ margin:0; }
.ls-dl__row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:10px;
  padding:10px 0;
  border-bottom:1px dashed #e2e8f0;
}
.ls-dl__row:last-child{ border-bottom:0; }
.ls-dl__row dt{ margin:0; color:#64748b; font-weight:900; }
.ls-dl__row dd{ margin:0; color:#334155; word-break:break-word; }
.ls-muted{ margin:0; color:#64748b; }


/* =========================================================
   14) ACYMAILING — PROFIL UTILISATEUR (frontusers)
   ========================================================= */
.acym_front_page form{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:22px 26px;
  box-shadow:0 12px 30px rgba(15,23,42,.10);
}

.acym_front_page fieldset.adminform,
.acym_front_page fieldset{
  border:1px solid #e2e8f0 !important;
  border-radius:14px;
  padding:16px 18px;
  margin:0 0 14px;
}
.acym_front_page legend{ padding:0 10px; font-weight:900; color:#0f172a; }
.acym_front_page label{ font-weight:800; color:#0f172a; font-size:14px; }

.acym_front_page input[type="text"],
.acym_front_page input[type="email"],
.acym_front_page input[type="password"],
.acym_front_page select,
.acym_front_page textarea{
  width:100% !important;
  border-radius:12px !important;
  border:1px solid #cbd5e1 !important;
  padding:10px 12px !important;
  font-size:14px !important;
  background:#f8fafc !important;
  margin-top:6px;
}

.acym_front_page input:focus,
.acym_front_page select:focus,
.acym_front_page textarea:focus{
  outline:none !important;
  border-color:#2563eb !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.15) !important;
}

/* Boutons Acy (style global) */
.acym_front_page .acymodifybutton .btn,
.acym_front_page button.btn,
.acym_front_page input[type="submit"],
.acym_front_page button{
  background:linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color:#fff !important;
  border:none !important;
  border-radius:9999px !important;
  padding:10px 18px !important;
  font-weight:900 !important;
  box-shadow:0 10px 24px rgba(37,99,235,.25);
  transition: transform var(--ls-transition), box-shadow var(--ls-transition), opacity var(--ls-transition);
}
.acym_front_page .acymodifybutton .btn:hover,
.acym_front_page button.btn:hover,
.acym_front_page input[type="submit"]:hover,
.acym_front_page button:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 28px rgba(37,99,235,.30);
  opacity:.98;
}

/* Boutons abonnement custom (si tu les utilises) */
.lsk-acym-btn{
  border:none;
  border-radius:9999px;
  padding:8px 16px;
  font-weight:900;
  cursor:pointer;
  transition: transform var(--ls-transition), box-shadow var(--ls-transition);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.lsk-acym-sub{ background:linear-gradient(135deg, #2563eb, #1d4ed8); color:#fff; }
.lsk-acym-sub:hover{ transform: translateY(-1px); box-shadow:0 10px 22px rgba(37,99,235,.35); }

.lsk-acym-unsub{ background:linear-gradient(135deg, #dc2626, #b91c1c); color:#fff; }
.lsk-acym-unsub:hover{ transform: translateY(-1px); box-shadow:0 10px 22px rgba(220,38,38,.35); }

/* Force rouge (priorité max) */
.acym_front_page .lsk-acym-unsub,
.acym_front_page .lsk-acym-unsub.btn,
.acym_front_page button.lsk-acym-unsub,
.acym_front_page a.lsk-acym-unsub{
  background:linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color:#fff !important;
  border:none !important;
}


/* =========================================================
   15) RESPONSIVE GLOBAL
   ========================================================= */
@media (max-width:768px){
  .container-fluid{ padding:0 15px; }
  .site-main{ padding:30px 0; }
  .site-banner{ padding:40px 0; }
  .site-header{ padding:15px 0; }
  .site-logo{ max-height:40px; }
}


/* =========================================================
   16) LANDING KAIZEN — ISOLÉE (IMPORTANT)
   Tout ce qui suit ne s'applique QUE dans .lk-page
   ========================================================= */
.lk-page{
  /* Thème landing */
  --lk-bg:#f5f7ff;
  --lk-ink:#0f172a;
  --lk-muted:#64748b;
  --lk-line:rgba(15,23,42,.10);

  --lk-blue:#2563eb;
  --lk-navy:#0b1b3b;

  --lk-card:#ffffff;
  --lk-radius:22px;
  --lk-shadow:0 18px 55px rgba(2,6,23,.12);
  --lk-container:1180px;

  color:var(--lk-ink);
  background:var(--lk-bg);

  /* Full width même dans un article Joomla */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

.lk-page *{ box-sizing:border-box; }
.lk-page img{ max-width:100%; height:auto; }

/* Neutralise la “carte blanche” Joomla autour si l’article contient .lk-page */
body .item-page:has(.lk-page),
body .com-content-article:has(.lk-page),
body .blog-item:has(.lk-page){
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* Container landing */
.lk-page .lk-container{
  max-width:var(--lk-container);
  margin:0 auto;
  padding:0 18px;
}

/* Sections */
.lk-page .lk-section{ padding:68px 0; }
.lk-page .lk-section--alt{
  background:linear-gradient(180deg,#ffffff 0%, var(--lk-bg) 100%);
}

/* Titres */
.lk-page .lk-h2{
  text-align:center;
  margin:0 0 10px;
  font-size:clamp(1.6rem,2.2vw,2.1rem);
}
.lk-page .lk-sub{
  text-align:center;
  color:var(--lk-muted);
  margin:0 auto 34px;
  max-width:760px;
  line-height:1.7;
}

/* ===========================
   HERO landing
   =========================== */
.lk-page .lk-hero{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 26px 80px rgba(2,6,23,.18);
  background:linear-gradient(135deg, #2a6bff 0%, #0b2a63 100%);
  padding:56px 0 140px; /* espace pour mockup + trust */
  margin:10px 0 18px;
}

/* Texture dots */
.lk-page .lk-dots{
  position:absolute;
  inset:0;
  border-radius:28px;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
  background-size:14px 14px;
  opacity:.35;
  pointer-events:none;
}

/* Layout hero */
.lk-page .lk-hero__inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:26px;
  align-items:center;
}

.lk-page .lk-kicker{
  margin:0 0 10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(255,255,255,.75);
}
.lk-page .lk-title{
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(2.2rem,3.2vw,3.2rem);
  line-height:1.08;
  font-weight:900;
}
.lk-page .lk-lead{
  margin:0 0 18px;
  color:rgba(255,255,255,.78);
  line-height:1.7;
  max-width:560px;
}

/* Boutons landing */
.lk-page .lk-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.lk-page .lk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.18);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  text-decoration:none;
}
.lk-page .lk-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 30px rgba(2,6,23,.18);
  filter:brightness(1.03);
}
.lk-page .lk-btn--primary{
  background:#fff;
  color:#1d4ed8;
  border-color:#fff;
}
.lk-page .lk-btn--ghost{
  background:rgba(255,255,255,.10);
  color:#fff;
}

/* Badges hero */
.lk-page .lk-badges{ display:flex; gap:10px; flex-wrap:wrap; }
.lk-page .lk-badge{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}

/* Visual mockup */
.lk-page .lk-hero__visual{
  position:relative;
  min-height:380px;
  z-index:6;
  overflow:visible;
}

/* Panneau “glass” derrière image */
.lk-page .lk-mockup{
  position:absolute;
  right:12px;
  bottom:8px;
  width:min(820px, 52vw);
  z-index:6;
  isolation:isolate;
}
.lk-page .lk-mockup::before{
  content:"";
  position:absolute;
  left:-90px;
  top:-60px;
  width:calc(100% + 120px);
  height:calc(100% + 120px);
  border-radius:26px;
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 26px 80px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index:0;
}
.lk-page .lk-mockup::after{
  content:"";
  position:absolute;
  left:-60px;
  top:-90px;
  width:520px;
  height:420px;
  border-radius:999px;
  background:radial-gradient(closest-side, rgba(59,130,246,.32), transparent 70%);
  filter:blur(18px);
  opacity:.9;
  z-index:-1;
}
.lk-page .lk-mockup img{
  width:100%;
  height:auto;
  display:block;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  box-shadow:0 22px 70px rgba(0,0,0,.34);
  transform:perspective(1200px) rotateY(-7deg) rotateX(2deg);
  transform-origin:right bottom;
  position:relative;
  z-index:2;
  transition: transform .65s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.lk-page .lk-hero__visual:hover .lk-mockup img{
  transform:perspective(1200px) rotateY(-5deg) rotateX(1deg) translateY(-4px);
  box-shadow:0 28px 90px rgba(0,0,0,.35);
}

/* Bulles (texte au-dessus du PC) — visibles même sans JS */
.lk-page .lk-float{
  position:absolute;
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 14px 40px rgba(2,6,23,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lk-page .lk-float::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(37,99,235,.95);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}

/* Positions desktop */
.lk-page .lk-float--1{ right:310px; top:40%; }
.lk-page .lk-float--2{ right:34px;  top:66%; }

/* Animations bulles (CSS only, safe) */
@keyframes lkFloatIn{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes lkFloaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.lk-page .lk-float--1{ animation: lkFloatIn .75s cubic-bezier(.2,.8,.2,1) .15s both, lkFloaty 4.8s ease-in-out 1.1s infinite; }
.lk-page .lk-float--2{ animation: lkFloatIn .75s cubic-bezier(.2,.8,.2,1) .35s both, lkFloaty 4.8s ease-in-out 1.3s infinite; }

/* Trust bar */
.lk-page .lk-trust{
  position:relative;
  z-index:4;
  margin-top:-52px;
  padding:0 0 10px;
}
.lk-page .lk-trust__bar{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:18px;
  box-shadow:0 18px 55px rgba(2,6,23,.10);
}
.lk-page .lk-trust__title{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9aa3b2;
}
.lk-page .lk-marquee{ position:relative; overflow:hidden; border-radius:14px; }
.lk-page .lk-marquee::before,
.lk-page .lk-marquee::after{
  content:"";
  position:absolute;
  top:0;
  width:70px;
  height:100%;
  z-index:2;
  pointer-events:none;
}
.lk-page .lk-marquee::before{ left:0; background:linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%); }
.lk-page .lk-marquee::after{ right:0; background:linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%); }

@keyframes lkMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.lk-page .lk-marquee__track{
  display:flex;
  align-items:center;
  gap:70px;
  padding:10px 10px;
  width:max-content;
  will-change:transform;
  animation: lkMarquee 18s linear infinite;
}
.lk-page .lk-marquee:hover .lk-marquee__track{ animation-play-state:paused; }
.lk-page .lk-logo{
  height:44px;
  width:auto;
  max-width:190px;
  object-fit:contain;
  display:block;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

/* Cards sections */
.lk-page .lk-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.lk-page .lk-card{
  background:#fff;
  border:1px solid var(--lk-line);
  border-radius:18px;
  box-shadow:0 12px 30px rgba(15,23,42,.06);
  padding:22px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lk-page .lk-card:hover{
  transform: translateY(-4px);
  box-shadow:0 18px 60px rgba(15,23,42,.12);
  border-color: rgba(37,99,235,.18);
}
.lk-page .lk-card h3{ margin:0 0 8px; font-size:1.15rem; }
.lk-page .lk-card p{ margin:0; color:var(--lk-muted); line-height:1.7; }

/* Shots */
.lk-page .lk-shots{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.lk-page .lk-shot{
  background:#fff;
  border:1px solid var(--lk-line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 14px 40px rgba(15,23,42,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lk-page .lk-shot:hover{
  transform: translateY(-4px);
  box-shadow:0 18px 60px rgba(15,23,42,.12);
  border-color: rgba(37,99,235,.18);
}
.lk-page .lk-shot img{ width:100%; display:block; height:auto; }
.lk-page .lk-shot__cap{ padding:14px 14px 16px; }
.lk-page .lk-shot__cap strong{ display:block; margin-bottom:6px; }
.lk-page .lk-shot__cap span{ color:var(--lk-muted); line-height:1.6; display:block; }

/* Testimonial glass */
.lk-page .lk-testimonial{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 40px rgba(2,6,23,.08);
}
.lk-page .lk-testimonial--glass{
  min-height:240px;
  background:
    linear-gradient(135deg, rgba(37,99,235,.18), rgba(11,27,59,.30)),
    var(--lk-testi-bg);
  background-size: cover;
  background-position: center;
}
.lk-page .lk-testimonial--glass::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 320px at 18% 35%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(90deg, rgba(11,27,59,.55) 0%, rgba(11,27,59,.20) 55%, rgba(11,27,59,.45) 100%);
}
.lk-page .lk-testimonial--glass .lk-quote{
  position:relative;
  z-index:2;
  max-width:760px;
  margin:22px;
  padding:24px 24px 20px;
  border-radius:18px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 22px 60px rgba(2,6,23,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.lk-page .lk-quote__text{
  margin:0 0 16px;
  font-size:18px;
  line-height:1.65;
  color:#fff;
}
.lk-page .lk-quote__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.lk-page .lk-person{ display:flex; align-items:center; gap:12px; }
.lk-page .lk-avatar{
  width:44px; height:44px;
  border-radius:999px;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.28);
}
.lk-page .lk-person__txt strong{ display:block; font-size:14px; color:#fff; }
.lk-page .lk-person__txt span{ display:block; font-size:13px; color:rgba(255,255,255,.78); }
.lk-page .lk-quote__tag{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  white-space:nowrap;
}

/* CTA final */
.lk-page .lk-ctaBar{
  background: linear-gradient(135deg, var(--lk-blue) 0%, var(--lk-navy) 100%);
  border-radius:22px;
  padding:28px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  box-shadow:0 18px 55px rgba(2,6,23,.25);
}

/* ===========================
   Responsive landing
   =========================== */
@media (max-width:980px){
  .lk-page .lk-hero{ padding:44px 0 90px; border-radius:18px; }
  .lk-page .lk-hero__inner{ grid-template-columns:1fr; }
  .lk-page .lk-hero__visual{ min-height:320px; order:-1; }

  .lk-page .lk-mockup{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
  }
  .lk-page .lk-mockup::before,
  .lk-page .lk-mockup::after{ display:none; }
  .lk-page .lk-mockup img{ transform:none; }

  /* Bulles visibles sous l’image */
  .lk-page .lk-float{
    position:relative;
    top:auto; right:auto;
    margin-top:10px;
    animation:none;
  }
  .lk-page .lk-hero__visual{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .lk-page .lk-trust{ margin-top:-30px; }
  .lk-page .lk-cards{ grid-template-columns:1fr; }
  .lk-page .lk-shots{ grid-template-columns:1fr; }

  .lk-page .lk-testimonial--glass .lk-quote{
    margin:16px;
    padding:18px;
  }

  .lk-page .lk-ctaBar{ flex-direction:column; align-items:flex-start; }
}


/* =========================================================
   17) ACCESSIBILITÉ — REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior:auto !important;
    animation:none !important;
    transition:none !important;
  }
}

/* =========================================================
   KAIZEN — PATCH URGENCE (layout cassé / sections hors container)
   A coller TOUT EN BAS du custom.css
   ========================================================= */

/* 1) Sécurise la page Kaizen : padding + typographie + pas de marge chelou */
.lk-page{
  padding: 0 0 70px;
}

/* 2) Beaucoup de pages cassent car des sections n'ont pas de .lk-container :
      on force un "container automatique" sur le contenu direct */
.lk-page > section,
.lk-page > div > section,
.lk-page .lk-section{
  width: 100%;
}

/* Ajoute une marge latérale + centrage même si tu as oublié .lk-container */
.lk-page > section,
.lk-page .lk-section{
  padding-left: 18px;
  padding-right: 18px;
}
.lk-page > section > *,
.lk-page .lk-section > *{
  max-width: var(--lk-container, 1180px);
  margin-left: auto;
  margin-right: auto;
}

/* 3) Les titres/paragraphes peuvent être écrasés par Joomla : on normalise */
.lk-page h1, .lk-page h2, .lk-page h3{
  color: var(--lk-ink, #0f172a);
  letter-spacing: -0.01em;
}
.lk-page p{
  color: var(--lk-muted, #64748b);
}

/* 4) Menu ancres (Bénéfices / Fonctionnalités / etc.) - si ton HTML l'a */
.lk-page .lk-anchorNav,
.lk-page .lk-anchors,
.lk-page .lk-subnav{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 0 0;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
}
.lk-page .lk-anchorNav a,
.lk-page .lk-anchors a,
.lk-page .lk-subnav a{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  color: rgba(15,23,42,.72);
  background: rgba(2,6,23,.04);
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.lk-page .lk-anchorNav a:hover,
.lk-page .lk-anchors a:hover,
.lk-page .lk-subnav a:hover{
  transform: translateY(-1px);
  background: rgba(37,99,235,.10);
  color: #1d4ed8;
}

/* 5) Si tes grilles existent dans le HTML mais ne s'affichent pas correctement */
.lk-page .lk-cards,
.lk-page .lk-shots{
  align-items: stretch;
}

/* 6) Fix : listes “Ils nous font confiance” -> si tu as une liste brute */
.lk-page ul{
  margin: 10px 0;
  padding-left: 18px;
}
.lk-page li{
  margin: 6px 0;
}

/* 7) Empêche des wrappers Joomla de couper la landing */
body .item-page:has(.lk-page),
body .com-content-article:has(.lk-page),
body .blog-item:has(.lk-page){
  overflow: visible !important;
}

/* 8) Responsive : évite le “gros vide” et resserre les blocs */
@media (max-width: 980px){
  .lk-page > section,
  .lk-page .lk-section{
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* =========================================================
   LSKAIZEN – Kaizen Landing (STYLE CAPTURE)
   Scopé à .lk-page (ne casse pas le template Joomla)
   ========================================================= */

.lk-page{
  --lk-blue-950:#081736;
  --lk-blue-900:#0a1f4a;
  --lk-blue-800:#0b2f6f;
  --lk-blue-700:#0b3b8f;
  --lk-blue-600:#2563eb;
  --lk-sky-400:#38bdf8;

  --lk-text:#0f172a;
  --lk-muted:rgba(15,23,42,.70);
  --lk-border:rgba(2,6,23,.08);

  /* ombres très soft (comme ta capture) */
  --lk-shadow-sm: 0 8px 22px rgba(2,6,23,.06);
  --lk-shadow-md: 0 16px 40px rgba(2,6,23,.08);

  /* fond page très clair */
  background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 35%, #ffffff 100%);
  color: var(--lk-text);
  padding-bottom: 48px;
}

.lk-page *{ box-sizing:border-box; }

/* Container */
.lk-page .lk-container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 18px;
}

/* =========================================================
   MINI NAV ANCRES (ligne fine, style capture)
   ========================================================= */
.lk-page .lk-anchor{
  padding: 10px 0 0;
}
.lk-page .lk-anchor__inner{
  display:flex;
  justify-content:flex-end;
  gap: 14px;
  flex-wrap:wrap;
}
.lk-page .lk-anchor a{
  font-weight: 900;
  font-size: 12px;
  text-decoration:none;
  color: rgba(15,23,42,.62);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: 0 8px 18px rgba(2,6,23,.05);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.lk-page .lk-anchor a:hover{
  transform: translateY(-1px);
  background:#fff;
  color: rgba(15,23,42,.80);
}

/* =========================================================
   HERO
   ========================================================= */
.lk-page .lk-hero{
  position:relative;
  margin-top: 10px;
  border-radius: 26px;
  overflow:hidden;
  box-shadow: 0 26px 80px rgba(2,6,23,.14);
  border: 1px solid rgba(255,255,255,.18);
}
.lk-page .lk-hero__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(56,189,248,.40), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(37,99,235,.52), transparent 60%),
    linear-gradient(135deg, #0a1f4a 0%, #0b3b8f 45%, #0a2a66 75%, #081736 100%);
  z-index:0;
}
.lk-page .lk-hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.12) 52%, rgba(0,0,0,0) 74%);
}
.lk-page .lk-hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items:center;
  padding: 46px 0;
}
@media (max-width: 980px){
  .lk-page .lk-hero__inner{ grid-template-columns: 1fr; padding: 30px 0; }
}

/* Typo hero */
.lk-page .lk-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.74rem;
  color:rgba(255,255,255,.78);
  margin:0 0 12px 0;
}
.lk-page .lk-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
}
.lk-page .lk-title{
  font-size: clamp(1.9rem, 3.2vw, 3.1rem);
  line-height: 1.06;
  margin:0 0 12px 0;
  color:#fff;
  font-weight: 950;
}
.lk-page .lk-title__accent{ color: rgba(56,189,248,.85); }
.lk-page .lk-lead{
  margin:0 0 16px 0;
  color: rgba(255,255,255,.82);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 58ch;
}

/* CTA hero */
.lk-page .lk-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }

/* Boutons */
.lk-page .lk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 14px;
  font-weight: 950;
  text-decoration:none;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
  white-space:nowrap;
}
.lk-page .lk-btn:active{ transform: translateY(1px); }

.lk-page .lk-btn--ghost{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.20);
  color:#fff;
}
.lk-page .lk-btn--ghost:hover{
  background: rgba(255,255,255,.18);
  box-shadow: 0 18px 55px rgba(2,6,23,.20);
}

.lk-page .lk-btn--primary{
  background: linear-gradient(180deg, rgba(56,189,248,.95), rgba(37,99,235,.95));
  color: #06122c;
  border-color: rgba(255,255,255,.18);
}
.lk-page .lk-btn--primary:hover{ box-shadow: 0 18px 55px rgba(37,99,235,.22); }
.lk-page .lk-btn--lg{ padding: 13px 18px; border-radius: 16px; }

/* bullets hero (2 lignes) */
.lk-page .lk-bullets-inline{
  margin: 14px 0 0 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap: 10px;
  color: rgba(255,255,255,.84);
  font-size: 13px;
}
.lk-page .lk-bullets-inline li{
  position:relative;
  padding-left: 18px;
  line-height:1.6;
}
.lk-page .lk-bullets-inline li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(56,189,248,.92);
  box-shadow: 0 0 0 3px rgba(56,189,248,.18);
}

/* Media hero (look capture) */
.lk-page .lk-media{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(2,6,23,.22);
  overflow:hidden;
}
.lk-page .lk-media img{ display:block; width:100%; height:auto; }

/* =========================================================
   TRUSTBAR (pills)
   ========================================================= */
.lk-page .lk-trustbar{ padding: 16px 0 8px; }
.lk-page .lk-trustbar__title{
  text-align:center;
  margin: 4px 0 12px;
  color: rgba(15,23,42,.62);
  font-weight: 950;
  font-size: 12px;
}
.lk-page .lk-logos,
.lk-page .lk-awards{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 10px;
}
.lk-page .lk-logo,
.lk-page .lk-award{
  background: #fff;
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 950;
  color: rgba(15,23,42,.60);
  box-shadow: 0 10px 22px rgba(2,6,23,.05);
  font-size: 12px;
}

/* =========================================================
   SECTIONS (espacement + look capture)
   ========================================================= */
.lk-page .lk-section{ padding: 44px 0; }
.lk-page .lk-section--alt{ background: rgba(2,6,23,.018); }
.lk-page .lk-section__head{ text-align:center; margin-bottom: 22px; }

.lk-page .lk-h2{
  margin:0;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 950;
  color:#0f172a;
}
.lk-page .lk-sub{
  margin: 10px auto 0;
  max-width: 86ch;
  color: rgba(15,23,42,.58);
  line-height:1.7;
  font-size: 13px;
}

/* Split */
.lk-page .lk-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){ .lk-page .lk-split{ grid-template-columns: 1fr; } }

/* Gallery cards */
.lk-page .lk-gallery{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){ .lk-page .lk-gallery{ grid-template-columns: 1fr; } }

.lk-page .lk-figure{
  margin:0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.06);
  background:#fff;
  box-shadow: var(--lk-shadow-md);
}
.lk-page .lk-figure img{ width:100%; height:auto; display:block; }
.lk-page .lk-figure figcaption{
  padding: 10px 12px;
  font-weight: 950;
  color: rgba(15,23,42,.62);
  border-top: 1px solid rgba(2,6,23,.06);
  background: rgba(2,6,23,.015);
  font-size: 12px;
}

/* Checks (cards très soft) */
.lk-page .lk-checks{ display:grid; gap: 12px; }
.lk-page .lk-check{
  display:grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.06);
  background: #fff;
  box-shadow: var(--lk-shadow-sm);
}
.lk-page .lk-check__icon{
  width: 26px; height: 26px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 950;
  color: #0b3b8f;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.14);
}
.lk-page .lk-check h3{ margin:0 0 6px; font-weight: 950; font-size: 13px; }
.lk-page .lk-check p{ margin:0; color: rgba(15,23,42,.60); line-height:1.6; font-size: 12px; }

/* Quote */
.lk-page .lk-quote{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(37,99,235,.12);
  background: linear-gradient(180deg, rgba(37,99,235,.06), rgba(56,189,248,.04));
  box-shadow: var(--lk-shadow-sm);
}
.lk-page .lk-quote p{ margin:0 0 6px; font-weight: 950; color: rgba(15,23,42,.78); }
.lk-page .lk-quote span{ color: rgba(15,23,42,.56); font-weight: 850; font-size: 12px; }

/* Features grid */
.lk-page .lk-grid4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px){ .lk-page .lk-grid4{ grid-template-columns: 1fr; } }

.lk-page .lk-feature{
  background:#fff;
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--lk-shadow-sm);
}
.lk-page .lk-feature__icon{
  width: 34px; height: 34px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.12);
  margin-bottom: 10px;
}
.lk-page .lk-feature h3{ margin:0 0 6px; font-weight: 950; font-size: 13px; }
.lk-page .lk-feature p{ margin:0; color: rgba(15,23,42,.60); line-height:1.6; font-size: 12px; }

/* Wide block */
.lk-page .lk-wide{
  margin-top: 16px;
  border-radius: 22px;
  border: 1px solid rgba(2,6,23,.06);
  background: #fff;
  box-shadow: var(--lk-shadow-md);
  padding: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:center;
}
@media (max-width:980px){ .lk-page .lk-wide{ grid-template-columns: 1fr; } }
.lk-page .lk-wide__text h3{ margin:0 0 8px; font-weight: 950; font-size: 14px; }
.lk-page .lk-wide__text p{ margin:0; color: rgba(15,23,42,.60); line-height:1.65; font-size: 12px; }
.lk-page .lk-wide__media img{
  width:100%; height:auto; display:block;
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,.06);
}

/* Integrations pills */
.lk-page .lk-integrations{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 10px;
  margin-top: 14px;
}
.lk-page .lk-pilllogo{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.06);
  background:#fff;
  font-weight: 950;
  color: rgba(15,23,42,.60);
  box-shadow: 0 10px 22px rgba(2,6,23,.05);
  font-size: 12px;
}

/* Security */
.lk-page .lk-security{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  align-items:start;
}
@media (max-width:980px){ .lk-page .lk-security{ grid-template-columns: 1fr; } }

.lk-page .lk-security__badges{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lk-page .lk-badge{
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(56,189,248,.04));
  border: 1px solid rgba(37,99,235,.12);
  color: rgba(10,31,74,.92);
  font-weight: 950;
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--lk-shadow-sm);
  font-size: 12px;
}
.lk-page .lk-badge::before{
  content:"✓";
  display:inline-flex;
  width: 20px; height: 20px;
  align-items:center; justify-content:center;
  margin-right: 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.14);
  color: #0b3b8f;
  font-weight: 950;
  font-size: 12px;
}
.lk-page .lk-security__content{
  background:#fff;
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--lk-shadow-sm);
}
.lk-page .lk-bullets{
  margin:0;
  padding-left: 18px;
  color: rgba(15,23,42,.68);
  line-height: 1.7;
  font-size: 12px;
}
.lk-page .lk-bullets li{ margin: 8px 0; }

/* Onboarding */
.lk-page .lk-onboard{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width:980px){ .lk-page .lk-onboard{ grid-template-columns: 1fr; } }
.lk-page .lk-onboard__card{
  background:#fff;
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--lk-shadow-sm);
}
.lk-page .lk-onboard__card h3{ margin:0 0 8px; font-weight: 950; font-size: 13px; }
.lk-page .lk-onboard__card p{ margin:0; color: rgba(15,23,42,.60); line-height: 1.65; font-size: 12px; }

/* Final CTA */
.lk-page .lk-final{ padding: 34px 0 56px; }
.lk-page .lk-final__inner{
  background:#fff;
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--lk-shadow-md);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
@media (max-width:980px){
  .lk-page .lk-final__inner{ flex-direction:column; align-items:flex-start; }
}
.lk-page .lk-final__left h2{ margin:0 0 6px; font-weight: 950; font-size: 16px; }
.lk-page .lk-final__left p{ margin:0; color: rgba(15,23,42,.60); font-size: 12px; }
.lk-page .lk-final__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 6px;
}
@media (max-width:980px){ .lk-page .lk-final__right{ align-items:flex-start; } }
.lk-page .lk-final__hint{
  margin: 6px 0 0 0;
  color: rgba(15,23,42,.52);
  font-weight: 850;
  font-size: 12px;
}

/* =========================================================
   KAIZEN – PATCH FINAL
   - Supprime fond bleu hero
   - Texte noir
   - Animations pro
   ========================================================= */

/* ===== HERO : enlever le fond bleu foncé ===== */
.lk-page .lk-hero{
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 0;
}

.lk-page .lk-hero__bg{
  display: none !important;
}

/* ===== HERO : texte en NOIR ===== */
.lk-page .lk-kicker,
.lk-page .lk-title,
.lk-page .lk-lead{
  color: #0f172a !important;
}

.lk-page .lk-title__accent{
  color: #2563eb !important;
}

.lk-page .lk-bullets-inline{
  color: rgba(15,23,42,.75) !important;
}
.lk-page .lk-bullets-inline li::before{
  background: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.18) !important;
}

/* ===== HERO media : plus clair ===== */
.lk-page .lk-media{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.15) !important;
}

/* ===== BOUTONS HERO ===== */
.lk-page .lk-btn--ghost{
  background: rgba(37,99,235,.08) !important;
  border-color: rgba(37,99,235,.25) !important;
  color: #1e293b !important;
}
.lk-page .lk-btn--ghost:hover{
  background: rgba(37,99,235,.14) !important;
}

/* =========================================================
   ANIMATIONS PRO (CSS only – safe)
   ========================================================= */

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .lk-anim,
  .lk-reveal{
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Animations normales */
@media (prefers-reduced-motion: no-preference){

  /* Apparition douce */
  .lk-reveal{
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity .7s cubic-bezier(.2,.8,.2,1),
      transform .7s cubic-bezier(.2,.8,.2,1);
  }

  /* Visible (si JS ou fallback) */
  .lk-reveal.is-in,
  .lk-page .lk-reveal{
    opacity: 1;
    transform: translateY(0);
  }

  /* Cards / blocs */
  .lk-page .lk-feature,
  .lk-page .lk-check,
  .lk-page .lk-onboard__card,
  .lk-page .lk-figure{
    transition:
      transform .25s ease,
      box-shadow .25s ease,
      border-color .25s ease;
  }

  .lk-page .lk-feature:hover,
  .lk-page .lk-check:hover,
  .lk-page .lk-onboard__card:hover,
  .lk-page .lk-figure:hover{
    transform: translateY(-4px);
    box-shadow: 0 20px 55px rgba(15,23,42,.14);
    border-color: rgba(37,99,235,.25);
  }

  /* Boutons */
  .lk-page .lk-btn{
    transition:
      transform .2s ease,
      box-shadow .2s ease,
      background .2s ease;
  }

  .lk-page .lk-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(15,23,42,.18);
  }
}

/* =========================================================
   CTA FINAL – bouton unique (déjà OK côté HTML)
   ========================================================= */

.lk-page .lk-final{
  margin-top: 40px;
}

.lk-page .lk-final__inner{
  background: #ffffff !important;
}

/* Police bien noire */
.lk-page .lk-final__left h2,
.lk-page .lk-final__left p{
  color: #0f172a !important;
}

/* =========================================================
   KAIZEN – HERO PREMIUM (fond bleu + texte blanc)
   ========================================================= */

/* ===== HERO : fond bleu dégradé (comme avant) ===== */
.lk-page .lk-hero{
  position: relative;
  background: linear-gradient(
    135deg,
    #0a1f4a 0%,
    #0b3b8f 45%,
    #0a2a66 75%,
    #081736 100%
  ) !important;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(2,6,23,.35);
}

/* Lueur subtile */
.lk-page .lk-hero::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(600px 380px at 15% 20%, rgba(56,189,248,.35), transparent 60%),
    radial-gradient(600px 380px at 85% 15%, rgba(37,99,235,.45), transparent 60%);
  pointer-events:none;
}

/* ===== TEXTE HERO EN BLANC ===== */
.lk-page .lk-kicker,
.lk-page .lk-title,
.lk-page .lk-lead,
.lk-page .lk-bullets-inline{
  color: #ffffff !important;
}

.lk-page .lk-title__accent{
  color: #38bdf8 !important;
}

/* bullets */
.lk-page .lk-bullets-inline li::before{
  background: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.22);
}

/* ===== IMAGE HERO ===== */
.lk-page .lk-media{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 30px 80px rgba(2,6,23,.45);
}

/* =========================================================
   BOUTONS – TOUS BLEUS (comme "Voir les fonctionnalités")
   ========================================================= */

.lk-page .lk-btn{
  font-weight: 900;
  border-radius: 16px;
}

/* Bouton principal / ghost */
.lk-page .lk-btn--ghost,
.lk-page .lk-btn--primary{
  background: linear-gradient(180deg, #38bdf8, #2563eb) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 18px 45px rgba(37,99,235,.45);
}

.lk-page .lk-btn--ghost:hover,
.lk-page .lk-btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(37,99,235,.55);
}

/* =========================================================
   ANIMATIONS PRO (premium, fluides)
   ========================================================= */

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .lk-page *{
    animation: none !important;
    transition: none !important;
  }
}

/* Apparition au chargement */
@media (prefers-reduced-motion: no-preference){

  .lk-page .lk-hero__content,
  .lk-page .lk-hero__visual{
    animation: heroFadeUp .9s cubic-bezier(.2,.8,.2,1) both;
  }

  .lk-page .lk-hero__visual{
    animation-delay: .12s;
  }

  @keyframes heroFadeUp{
    from{
      opacity:0;
      transform: translateY(22px);
    }
    to{
      opacity:1;
      transform: translateY(0);
    }
  }

  /* Hover cartes */
  .lk-page .lk-feature,
  .lk-page .lk-check,
  .lk-page .lk-figure,
  .lk-page .lk-onboard__card{
    transition:
      transform .25s ease,
      box-shadow .25s ease;
  }

  .lk-page .lk-feature:hover,
  .lk-page .lk-check:hover,
  .lk-page .lk-figure:hover,
  .lk-page .lk-onboard__card:hover{
    transform: translateY(-6px);
    box-shadow: 0 26px 70px rgba(2,6,23,.18);
  }

  /* Boutons */
  .lk-page .lk-btn{
    transition:
      transform .2s ease,
      box-shadow .2s ease;
  }

  .lk-page .lk-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 22px 55px rgba(37,99,235,.55);
  }
}

/* =========================================================
   CTA FINAL – cohérent avec hero
   ========================================================= */

.lk-page .lk-final__inner{
  background: #ffffff;
  box-shadow: 0 26px 70px rgba(2,6,23,.14);
}

/* =========================================================
   KAIZEN – ENRICHISSEMENT VISUEL SÉCURITÉ & CONFORMITÉ
   (CSS ONLY – aucun HTML modifié)
   ========================================================= */

/* Base : donner plus de présence à la section */
.lk-page #securite{
  position: relative;
  overflow: hidden;
}

/* Arrière-plan décoratif abstrait */
.lk-page #securite::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(420px 280px at 20% 35%, rgba(37,99,235,.10), transparent 65%),
    radial-gradient(420px 280px at 80% 65%, rgba(56,189,248,.12), transparent 65%);
  pointer-events:none;
  z-index:0;
  animation: securityGlow 14s ease-in-out infinite alternate;
}

@keyframes securityGlow{
  from{ transform: translateY(0); opacity:.85; }
  to{ transform: translateY(-18px); opacity:1; }
}

/* S'assurer que le contenu passe au-dessus */
.lk-page #securite > .lk-container{
  position: relative;
  z-index:1;
}

/* =========================================================
   BADGES – effet carte premium + hover animé
   ========================================================= */

.lk-page .lk-security__badges .lk-badge{
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease,
    background .35s ease;
  background:
    linear-gradient(180deg,
      rgba(37,99,235,.14),
      rgba(56,189,248,.08)
    );
}

.lk-page .lk-security__badges .lk-badge:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(37,99,235,.22);
  background:
    linear-gradient(180deg,
      rgba(37,99,235,.20),
      rgba(56,189,248,.12)
    );
}

/* Animation douce d'apparition en cascade */
.lk-page .lk-security__badges .lk-badge{
  animation: badgeIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.lk-page .lk-security__badges .lk-badge:nth-child(1){ animation-delay:.05s; }
.lk-page .lk-security__badges .lk-badge:nth-child(2){ animation-delay:.15s; }
.lk-page .lk-security__badges .lk-badge:nth-child(3){ animation-delay:.25s; }
.lk-page .lk-security__badges .lk-badge:nth-child(4){ animation-delay:.35s; }

@keyframes badgeIn{
  from{
    opacity:0;
    transform: translateY(18px) scale(.96);
  }
  to{
    opacity:1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   LISTE – style plus moderne + animation
   ========================================================= */

.lk-page .lk-bullets li{
  position: relative;
  padding-left: 8px;
  transition: transform .25s ease, color .25s ease;
}

.lk-page .lk-bullets li:hover{
  transform: translateX(4px);
  color: #0b3b8f;
}

/* =========================================================
   ICÔNE DÉCORATIVE (cadenas flottant abstrait)
   ========================================================= */

.lk-page #securite::after{
  content:"🔒";
  position:absolute;
  right: 6%;
  top: 24%;
  font-size: 120px;
  opacity: .06;
  transform: rotate(-12deg);
  pointer-events:none;
  animation: lockFloat 10s ease-in-out infinite;
}

@keyframes lockFloat{
  0%{ transform: translateY(0) rotate(-12deg); }
  50%{ transform: translateY(-18px) rotate(-8deg); }
  100%{ transform: translateY(0) rotate(-12deg); }
}

/* =========================================================
   Responsive : icône plus discrète sur mobile
   ========================================================= */
@media(max-width:980px){
  .lk-page #securite::after{
    font-size: 80px;
    right: 4%;
    top: 12%;
  }
}

/* =========================================================
   KAIZEN – MATIÈRE VISUELLE SECTION SÉCURITÉ
   (illustration + profondeur, CSS only)
   ========================================================= */

/* Section sécurité : base renforcée */
.lk-page #securite{
  position: relative;
  padding: 70px 0;
  overflow: hidden;
}

/* Illustration abstraite type réseau / sécurité */
.lk-page #securite::before{
  content:"";
  position:absolute;
  left: -8%;
  top: 10%;
  width: 520px;
  height: 520px;
  background:
    radial-gradient(circle at 30% 30%, rgba(37,99,235,.18), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(56,189,248,.18), transparent 55%);
  filter: blur(2px);
  opacity: .9;
  pointer-events:none;
  z-index:0;
  animation: securityBlob 18s ease-in-out infinite alternate;
}

/* Deuxième couche décorative (effet matière) */
.lk-page #securite::after{
  content:"";
  position:absolute;
  right: -6%;
  bottom: -12%;
  width: 420px;
  height: 420px;
  background:
    radial-gradient(circle at 40% 40%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(circle at 60% 60%, rgba(56,189,248,.14), transparent 60%);
  opacity: .75;
  pointer-events:none;
  z-index:0;
  animation: securityBlob2 22s ease-in-out infinite alternate;
}

@keyframes securityBlob{
  from{ transform: translateY(0) translateX(0); }
  to{ transform: translateY(-24px) translateX(16px); }
}
@keyframes securityBlob2{
  from{ transform: translateY(0) translateX(0); }
  to{ transform: translateY(18px) translateX(-18px); }
}

/* S'assurer que le contenu reste au-dessus */
.lk-page #securite > .lk-container{
  position: relative;
  z-index:1;
}

/* =========================================================
   COLONNE VISUELLE IMPLICITE (donne de la présence)
   ========================================================= */

.lk-page .lk-security{
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
  border-radius: 26px;
  padding: 26px;
  box-shadow: 0 30px 80px rgba(2,6,23,.12);
}

/* =========================================================
   BADGES : encore plus “card premium”
   ========================================================= */

.lk-page .lk-security__badges{
  gap: 16px;
}

.lk-page .lk-security__badges .lk-badge{
  position: relative;
  overflow: hidden;
}

/* reflet léger animé */
.lk-page .lk-security__badges .lk-badge::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,.35),
    transparent 70%
  );
  opacity: .0;
  transform: translateX(-100%);
  transition: opacity .3s ease;
}

.lk-page .lk-security__badges .lk-badge:hover::after{
  opacity: .6;
  transform: translateX(100%);
  transition: transform .9s ease;
}

/* =========================================================
   LISTE : renforcer la densité visuelle
   ========================================================= */

.lk-page .lk-bullets{
  background: rgba(255,255,255,.75);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 20px 55px rgba(2,6,23,.10);
}

.lk-page .lk-bullets li{
  margin: 10px 0;
}

/* =========================================================
   RESPONSIVE : alléger sur mobile
   ========================================================= */

@media(max-width:980px){
  .lk-page #securite::before,
  .lk-page #securite::after{
    width: 300px;
    height: 300px;
    opacity: .6;
  }

  .lk-page .lk-security{
    padding: 18px;
  }
}

/* =========================================================
   PAGE ACCUEIL – CORRECTIONS VISUELLES
   ========================================================= */

/* =========================================================
   1️⃣ DOUBLE FOND FLOU (PC / MOBILE)
   → on supprime le doublon
   → on fixe le z-index
   ========================================================= */

/* Supprimer le fond flou en trop (souvent ::after ou ::before) */
.home .lk-hero__visual::after,
.home .lk-hero__visual::before{
  display: none !important;
}

/* Garder UN SEUL fond flou propre */
.home .lk-media{
  position: relative;
  z-index: 1;
}

/* S'assurer que le texte passe TOUJOURS devant */
.home .lk-hero__content{
  position: relative;
  z-index: 2;
}

/* =========================================================
   2️⃣ BOUTONS BLEUS → TEXTE BLANC
   ========================================================= */

/* Tous les boutons bleus */
.home .lk-btn--primary,
.home .lk-btn--ghost{
  color: #ffffff !important;
}

/* Hover sécurisé */
.home .lk-btn--primary:hover,
.home .lk-btn--ghost:hover{
  color: #ffffff !important;
}

/* =========================================================
   3️⃣ TÉMOIGNAGE – TEXTE BLANC SUR FOND BLEU
   ========================================================= */

.home .lk-testimonial,
.home .lk-quote{
  color: #ffffff !important;
}

/* Texte principal */
.home .lk-testimonial p,
.home .lk-quote p{
  color: rgba(255,255,255,.95) !important;
}

/* Nom / signature */
.home .lk-testimonial span,
.home .lk-quote span{
  color: rgba(255,255,255,.75) !important;
}

/* Badge éventuel */
.home .lk-testimonial .lk-badge,
.home .lk-quote .lk-badge{
  color: #ffffff !important;
}

/* =========================================================
   BONUS : meilleure lisibilité globale
   ========================================================= */

/* Léger renfort de contraste sur le fond bleu */
.home .lk-hero{
  isolation: isolate;
}

/* =========================================================
   ACCUEIL – CORRECTIONS DÉFINITIVES (FORCÉES)
   ========================================================= */

/* =========================================================
   1️⃣ DOUBLE FOND FLOU (PC + MOBILE)
   → on supprime TOUS les overlays flous
   ========================================================= */

/* Supprime tous les pseudo-éléments flous possibles */
.home .lk-hero__visual::before,
.home .lk-hero__visual::after,
.home .lk-media::before,
.home .lk-media::after,
.home .lk-hero::before,
.home .lk-hero::after{
  display: none !important;
  content: none !important;
}

/* S'assure qu'il n'y a QU'UN SEUL fond */
.home .lk-media{
  background: rgba(255,255,255,.08) !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* =========================================================
   2️⃣ PROBLÈME MAJEUR : LE FLOU PASSE DEVANT LE TEXTE
   → correction de Z-INDEX (FORCÉ)
   ========================================================= */

.home .lk-hero{
  position: relative !important;
  isolation: isolate !important;
}

.home .lk-hero__content{
  position: relative !important;
  z-index: 10 !important;
}

.home .lk-hero__visual{
  position: relative !important;
  z-index: 1 !important;
}

/* =========================================================
   3️⃣ BOUTONS BLEUS → TEXTE BLANC (FORCÉ)
   ========================================================= */

.home a.lk-btn,
.home .lk-btn,
.home .lk-btn--primary,
.home .lk-btn--ghost{
  color: #ffffff !important;
}

/* Hover */
.home a.lk-btn:hover,
.home .lk-btn:hover{
  color: #ffffff !important;
}

/* =========================================================
   4️⃣ TÉMOIGNAGE – TEXTE BLANC (FORCÉ)
   ========================================================= */

.home .lk-testimonial,
.home .lk-testimonial * ,
.home .lk-quote,
.home .lk-quote *{
  color: #ffffff !important;
}

/* Texte secondaire */
.home .lk-testimonial span,
.home .lk-quote span{
  color: rgba(255,255,255,.75) !important;
}

/* =========================================================
   5️⃣ FILET DE SÉCURITÉ – TEMPLATE JOOMLA
   (certains templates injectent un overlay global)
   ========================================================= */

.home section::before,
.home section::after{
  z-index: auto !important;
}

/* =========================================================
   KAIZEN – FIX HERO ACCUEIL (FINAL)
   - 1 seul fond flou (derrière les devices)
   - Plus jamais au-dessus du texte
   - Boutons bleus → texte blanc
   - Badges "Hébergé en Europe / SSO" → blanc
   - Animations pro légères
   ========================================================= */

/* ---------- RESET DES FLOUS PARASITES ---------- */
.lk-hero::before,
.lk-hero::after,
.lk-hero-bg::before,
.lk-hero-bg::after,
.lk-hero *::before,
.lk-hero *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* ---------- TEXTE TOUJOURS AU-DESSUS ---------- */
.lk-hero-content,
.lk-hero-text,
.lk-hero-left {
  position: relative;
  z-index: 3 !important;
}

/* ---------- UN SEUL FOND FLOU PRO (DEVICES) ---------- */
.lk-hero-visual {
  position: relative;
  z-index: 1;
}

.lk-hero-visual::before {
  content: "";
  position: absolute;
  inset: -48px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  border-radius: 32px;
  z-index: -1;
}

/* ---------- OMBRE PRO DEVICES ---------- */
.lk-hero-visual img {
  display: block;
  filter: drop-shadow(0 40px 90px rgba(0,0,0,0.35));
}

/* ---------- BOUTONS BLEUS = TEXTE BLANC ---------- */
.lk-btn,
.lk-btn *,
.btn,
.btn *,
button,
button * {
  color: #ffffff !important;
}

/* ---------- BADGES / LABELS HERO = BLANC ---------- */
.lk-hero .lk-badge,
.lk-hero .lk-pill,
.lk-hero .lk-feature-badge,
.lk-hero .lk-info,
.lk-hero small,
.lk-hero span {
  color: #ffffff !important;
}

/* ---------- ANIMATIONS PRO ---------- */
@keyframes kaizenFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lk-hero-content {
  animation: kaizenFadeUp 0.9s ease-out both;
}

.lk-hero-visual {
  animation: kaizenFadeUp 0.9s ease-out both;
  animation-delay: 0.15s;
}

/* ---------- MICRO ANIMATION HOVER ---------- */
.lk-btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lk-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

/* =========================================================
   FIX DEFINITIF – OVERLAY HERO JOOMLA
   ========================================================= */

/* ❌ Désactivation totale de l’overlay parasite */
#image-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ❌ Sécurité : pseudo-elements éventuels */
#image-overlay::before,
#image-overlay::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   TEXTE BLANC FORCÉ (BOUTONS + BADGES + TÉMOIGNAGE)
   ========================================================= */

/* Boutons */
.lk-btn,
.lk-btn *,
.btn,
.btn *,
button,
button * {
  color: #ffffff !important;
}

/* Badges hero */
.lk-hero span,
.lk-hero small,
.lk-hero .badge,
.lk-hero .pill {
  color: #ffffff !important;
}

/* Témoignage */
.lk-quote,
.lk-quote p,
.lk-quote span,
.lk-testimonial,
.lk-testimonial * {
  color: #ffffff !important;
}

/* =========================================================
   Z-INDEX : TEXTE AU-DESSUS DE TOUT
   ========================================================= */

.lk-hero-content,
.lk-hero-text,
.lk-hero-left {
  position: relative;
  z-index: 10 !important;
}

.lk-hero-visual {
  position: relative;
  z-index: 5 !important;
}

/* =========================================================
   FLOU UNIQUE PRO (DEVICES SEULEMENT)
   ========================================================= */

.lk-hero-visual::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-radius: 30px;
  z-index: -1;
}

/* Ombre premium devices */
.lk-hero-visual img {
  filter: drop-shadow(0 40px 90px rgba(0,0,0,0.35));
}

/* =========================================================
   ANIMATION PRO
   ========================================================= */

@keyframes kaizenFadeUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lk-hero-content,
.lk-hero-visual {
  animation: kaizenFadeUp 0.8s ease-out both;
}

.lk-hero-visual {
  animation-delay: 0.15s;
}