/* ============================
   KRAFTEL ENGINEERING - PRO UI
   Compatible avec TON HTML
============================ */

/* ---- Reset & base ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  
  background:white;
  overflow-x:hidden; /* IMPORTANT: supprime les débordements à droite */
}

img, video{
  max-width:100%;
  height:auto;
  display:block;
}

a{ color:inherit; }
.container{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
}

/* ---- variables ---- */
:root{
  --brand:blue;
  --dark:black;

  --hdr-bg: rgba(10,10,10,.55);
  --hdr-bg-top: rgba(0,0,0,.35);
  --hdr-border: rgba(255,255,255,.12);
  --hdr-text: rgba(255,255,255,.92);
  --hdr-muted: rgba(255,255,255,.72);
  --hdr-blur: blur(14px);

  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px white;
  --shadow-hard: 0 20px 70px white;

  --bg-soft:#f6f7fb;
  --line:#e8ecf5;
}

/* ============================
   Cookies
============================ */
.cookie-banner{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 11000;
  display:none;
}
.cookie-banner.show{ display:block; }

.cookie-content{
  background: rgba(20, 23, 28, .92);
  color:#fff;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: var(--shadow-hard);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cookie-content p{
  margin:0;
  font-size: 13px;
  opacity:.95;
}
.cookie-content a{
  color:#fff;
  text-decoration: underline;
}
.cookie-buttons{
  display:flex;
  gap:10px;
  align-items:center;
}

/* ============================
   Buttons (shared)
============================ */
.btn{
  border:0;
  cursor:pointer;
  text-decoration:none;
  font-weight: 800;
  border-radius: var(--radius-pill);
  padding: 11px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
  will-change: transform;
  user-select:none;
  line-height: 1;
  font-size: 13px;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px) scale(.99); }

.btn-primary{
  background: var(--brand);
  color:#fff;
}
.btn-outline{
  background: transparent;
  color: var(--dark);
  border:1px solid rgba(11,18,32,.16);
}
.btn-accept{ background: #22c55e; color:#fff; }
.btn-refuse{ background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.25); color:#fff; }

/* hero buttons */
.btn-hero-primary{
  background: var(--brand);
  color:#fff;
  box-shadow: 0 18px 40px rgba(239,68,68,.22);
}
.btn-hero-outline{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  backdrop-filter: blur(10px);
}

/* ============================
   HEADER (Starlink-like)
============================ */
.header-container{
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  color: var(--hdr-text);
  transform: translateZ(0);
}

/* top bar */
.header-top{
  background: var(--hdr-bg-top);
  backdrop-filter: var(--hdr-blur);
  -webkit-backdrop-filter: var(--hdr-blur);
  border-bottom: 1px solid var(--hdr-border);
}
.header-top{
  padding: 0 20px;
}
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.header-contact{
  display:flex;
  gap: 16px;
  align-items:center;
  flex-wrap: wrap;
  font-size: 13px;
}
.header-contact a{
  color: var(--hdr-muted);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 0;
  transition: opacity .2s ease;
  white-space: nowrap;
}
.header-contact a:hover{ opacity:.92; }

/* language selector */
.language-selector{
  display:flex;
  gap: 10px;
  align-items:center;
}
.language-selector a{
  color: var(--hdr-muted);
  text-decoration:none;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.language-selector a:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
}
.language-selector a.active{
  color:#fff;
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
}

/* main bar */
.header-main{
  background: var(--hdr-bg);
  backdrop-filter: var(--hdr-blur);
  -webkit-backdrop-filter: var(--hdr-blur);
  border-bottom: 1px solid var(--hdr-border);
}
.header-wrapper{
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 20px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

/* logo */
.logo-container{
  display:flex;
  align-items:center;
  min-width: 150px;
  flex: 0 0 auto;
}
.logo-container img{
  height: 42px;
  width:auto;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

/* desktop nav */
.desktop-navigation{
  display:flex;
  gap: 16px;
  align-items:center;
  justify-content:center;
  flex: 1 1 auto;
  min-width: 0;
  overflow:hidden;
}
.desktop-navigation a{
  color: rgba(255,255,255,.86);
  text-decoration:none;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  position: relative;
  padding: 10px 6px;
  white-space: nowrap;
  transition: color .2s ease;
}
.desktop-navigation a::after{
  content:"";
  position:absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 2px;
  background: rgba(255,255,255,.92);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
  opacity:.9;
}
.desktop-navigation a:hover{ color:#fff; }
.desktop-navigation a:hover::after{ transform: scaleX(1); }

/* actions */
.header-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}
.header-actions .btn{
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  white-space: nowrap;
}
.header-actions .btn:hover{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.30);
}


/* burger */
.menu-toggle{
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius-pill);
  transition: background .2s ease;
}
.menu-toggle:hover{ background: rgba(255,255,255,.06); }
.menu-toggle span{
  display:block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

/* burger -> X */
.header-container.menu-open .menu-toggle span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.header-container.menu-open .menu-toggle span:nth-child(2){ opacity: 0; }
.header-container.menu-open .menu-toggle span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* scroll shrink */
.header-container.is-scrolled .header-top{
  transform: translateY(-100%);
  opacity:0;
  pointer-events:none;
  transition: transform .25s ease, opacity .25s ease;
}
.header-container.is-scrolled .header-wrapper{
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ============================
   Drawer mobile (nav)
============================ */
.site-overlay{
  position: fixed;
  inset:0;
  background: black;
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease;
  z-index: 10000;
}
.site-overlay.is-visible{
  opacity:1;
  pointer-events:auto;
}

.mobile-navigation{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(390px, 86vw);
  background: blue;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: white;
  transform: translateX(110%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  z-index: 10001;
  padding: 86px 18px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -30px 0 80px blue;
}
.header-container.menu-open .mobile-navigation{ transform: translateX(0); }

.mobile-navigation .drawer-close{
  position:absolute;
  top: 18px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: background .2s ease, transform .2s ease;
}
.mobile-navigation .drawer-close:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.drawer-lang{
  display:flex;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 8px;
}
.drawer-lang a{
  color:#fff;
  text-decoration:none;
  font-weight: 900;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  opacity:.9;
}
.drawer-lang a.is-active{
  opacity:1;
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}

.mobile-navigation a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 10px;
  color: rgba(255,255,255,.92);
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  transition: background .2s ease, color .2s ease;
}
.mobile-navigation a:hover{
  background: rgba(255,255,255,.06);
  color:#fff;
}

/* ============================
   HERO
============================ */
.hero{
  position: relative;
  min-height: clamp(520px, 78vh, 780px);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.04);
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 20% 30%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.62));
}
.hero-content{
  position:relative;
  z-index: 2;
  text-align: left;
  width:min(1180px, calc(100% - 40px));
  color:#fff;
  padding-top: 40px;
}
.hero-title{
  margin: 0 0 10px 0;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 16px 50px rgba(0,0,0,.35);
  animation: heroIn .9s ease both;
}
.hero-subtitle{
  margin: 0 0 18px 0;
  max-width: 720px;
  font-size: clamp(14px, 1.3vw, 18px);
  opacity: .92;
  line-height: 1.55;
  animation: heroIn .9s ease .08s both;
}
.hero-cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  animation: heroIn .9s ease .16s both;
}
.video-control{
  position:absolute;
  z-index: 5;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease;
}
.video-control:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.48);
}

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

/* ============================
   Sections global
============================ */
section{ padding: 72px 0; }

.section-header{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.section-header.center{
  text-align:center;
  justify-content:center;
  flex-direction:column;
  align-items:center;
}
.section-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11,18,32,.65);
}
.section-header h2{
  margin: 10px 0 0 0;
  font-size: clamp(22px, 2.2vw, 36px);
  letter-spacing: -0.02em;
}

/* fade-in (trigger JS) */
.fade-in{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-in.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* ============================
   Safety banner
============================ */
.safety-banner{
  padding: 22px 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.safety-content{
  display:flex;
  align-items:center;
  gap: 14px;
}
.safety-icon{
  width: 46px;
  height: 46px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.safety-text h3{
  margin:0;
  font-size: 16px;
}
.safety-text p{
  margin:4px 0 0 0;
  opacity:.75;
  font-size: 13px;
}

/* ============================
   Mission
============================ */
.mission{ background: #fff; }
.mission-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items:center;
}
.mission-image{
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  background:#000;
}
.mission-image img{
  width:100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.mission-image:hover img{ transform: scale(1.04); }

.mission-content p{
  margin: 10px 0;
  line-height: 1.65;
  opacity:.86;
}
.mission-stats{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.stat{
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.stat-number{
  display:block;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.stat-label{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  opacity:.75;
  font-weight: 700;
}

/* ============================
   Expertises
============================ */
.expertises{ background: var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.expertises-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.expertise-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.05);
  transition: transform .22s ease, box-shadow .22s ease;
}
.expertise-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 46px rgba(0,0,0,.10);
}
.expertise-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.18);
  margin-bottom: 10px;
}
.expertise-card h3{
  margin: 8px 0 8px 0;
  font-size: 16px;
}
.expertise-card p{
  margin:0;
  font-size: 13px;
  line-height: 1.55;
  opacity: .8;
}

/* ============================
   Projects
============================ */
.projects{ background:#fff; }
.project-filters{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.filter-btn{
  border:1px solid rgba(11,18,32,.12);
  background: #fff;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.filter-btn:hover{ transform: translateY(-1px); }
.filter-btn.active{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.25);
}

.projects-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.project-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  display:grid;
  grid-template-columns: 1fr;
  transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.project-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 55px rgba(0,0,0,.10);
}
.project-image{
  position:relative;
  aspect-ratio: 16/9;
  overflow:hidden;
  background:#0b1220;
}
.project-image img{
  width:100%;
  height:100%;
  object-fit: cover;
  transition: transform .55s ease, opacity .55s ease;
  opacity:.98;
}
.project-card:hover .project-image img{ transform: scale(1.05); }

.project-content{ padding: 16px 16px 18px; }
.project-content h3{ margin: 0 0 8px 0; font-size: 18px; }
.project-meta{
  margin:0 0 10px 0;
  font-size: 12px;
  opacity:.72;
  font-weight: 700;
}
.project-content p{
  margin: 0 0 12px 0;
  line-height: 1.55;
  opacity:.82;
  font-size: 13px;
}
.project-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  color: var(--brand);
  text-decoration:none;
}
.project-link:hover{ text-decoration: underline; }

/* hide animation for filter */
.project-card.is-hidden{
  opacity:0;
  transform: scale(.98);
  pointer-events:none;
  height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
}

/* ============================
   Map
============================ */
.map-section{ background: var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.map-container{
  width:100%;
  height: 420px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  background: #cfd8ea;
}

/* ============================
   Careers
============================ */
.careers{ background:#fff; }
.jobs-table{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.job-row{
  display:grid;
  grid-template-columns: 1.4fr 1fr .5fr .6fr;
  gap: 10px;
  align-items:center;
  background: #fff;
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.05);
}
.job-title{ font-weight: 900; }
.job-location{ opacity:.75; font-weight: 700; }
.job-type{
  font-weight: 900;
  font-size: 12px;
  opacity:.75;
}
.job-apply{
  justify-self:end;
  font-weight: 900;
  color: var(--brand);
  text-decoration:none;
}
.job-apply:hover{ text-decoration: underline; }

/* ============================
   Docs
============================ */
.documentation{ background: var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.doc-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.doc-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.05);
  transition: transform .22s ease, box-shadow .22s ease;
}
.doc-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 46px rgba(0,0,0,.10);
}
.doc-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(11,18,32,.06);
  border:1px solid rgba(11,18,32,.10);
  margin-bottom: 10px;
}
.doc-card h4{ margin: 8px 0 12px 0; }

/* ============================
   Contact + form
============================ */
.contact{ background:#fff; }
.contact-grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 18px;
  align-items:start;
}
.contact-info{
  background: var(--bg-soft);
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.04);
}
.contact-item h4{ margin: 0 0 6px 0; }
.contact-item p{ margin: 0 0 14px 0; opacity:.85; line-height: 1.6; }

.contact-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.05);
  display:grid;
  gap: 10px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  border:1px solid rgba(11,18,32,.14);
  border-radius: 14px;
  padding: 12px 12px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color: rgba(239,68,68,.45);
  box-shadow: 0 0 0 4px rgba(239,68,68,.10);
}
.contact-form button{ justify-content:center; }

/* ============================
   FOOTER - style EXACT screenshot
   (à coller TOUT EN BAS)
============================ */
.footer{
  background:#0b74d6;                 /* bleu du screenshot */
  color:#fff;
  padding: 56px 0 22px;
}

.footer-wrapper{
  width:min(1200px, calc(100% - 64px));
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 38px;
  align-items:start;
}

.footer-column h4{
  margin:0 0 18px 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .95;
}

.footer-column a{
  display:block;
  padding: 9px 0;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  font-weight: 700;
  opacity: .95;
}

.footer-column a:hover{
  opacity: 1;
  text-decoration: underline;
}

.arrow-link{
  font-weight: 900;
}

.social-links{
  display:flex;
  gap: 12px;
  margin-top: 16px;
}

.social-links a{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .18s ease, background .18s ease;
}

.social-links a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.22);
}

/* Ligne de séparation + bottom comme screenshot */
.footer-bottom{
  width:min(1200px, calc(100% - 64px));
  margin: 34px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.35);
  text-align:center;

  display:flex;
  flex-direction: column;
  gap: 8px;

  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}

.footer-bottom a{
  color:#fff;
  text-decoration: underline;
}

/* Responsive (mobile) */
@media (max-width: 992px){
  .footer-wrapper{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 26px;
    width:min(1200px, calc(100% - 40px));
  }
  .footer-bottom{
    width:min(1200px, calc(100% - 40px));
  }
}

@media (max-width: 640px){
  .footer-wrapper{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .social-links{
    justify-content:flex-start;
    flex-wrap: wrap;
  }
}

/* ============================
   Responsive (anti débordement)
============================ */
@media (max-width: 1100px){
  .desktop-navigation{ gap: 12px; }
  .projects-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 992px){
  .desktop-navigation{ display:none; }
  .header-actions .btn.btn-secondary{ display:none; } /* tablette => clean */
  .header-actions .contact-btn{ display:inline-flex; }
  .expertises-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mission-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .doc-grid{ grid-template-columns: 1fr; }
  .footer-wrapper{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .job-row{ grid-template-columns: 1fr 1fr; }
  .job-type, .job-apply{ justify-self:start; }
}

@media (max-width: 768px){
  section{ padding: 56px 0; }
  .header-top{ padding: 0 14px; }
  .header-contact{ display:none; } /* mobile clean */
  .header-wrapper{ padding: 10px 14px; }
  .logo-container img{ height: 38px; }
  .hero-content{ padding-top: 26px; }
  .mission-stats{ grid-template-columns: 1fr; }
  .expertises-grid{ grid-template-columns: 1fr; }
  .footer-wrapper{ grid-template-columns: 1fr; }
  .video-control{ right: 12px; bottom: 12px; }
}

@media (max-width: 420px){
  .header-actions .contact-btn{ display:none; } /* ultra small => burger only */
}

/* ===============================
   POF – 3 BLOCS COMPACTS ALIGNÉS
================================ */

/* fond blanc global de la zone */
.pof-row{
  background: #fff;
  width: min(1080px, calc(100% - 48px)); /* PLUS ÉTROIT */
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px; /* PLUS SERRÉ */
}

/* chaque case */
.pof-row .pof{
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;          /* plus net */
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* contenu interne */
.pof-row .pof .container{
  width: 100%;
  padding: 14px 14px 12px;
}

/* titres plus compacts */
.pof-row .section-label{
  font-size: 11px;
  letter-spacing: .08em;
}
.pof-row h2{
  font-size: 18px;
  margin: 6px 0 4px;
}
.pof-row .section-desc{
  font-size: 13px;
  opacity: .75;
}

/* zone logos */
.pof-row .logo-grid{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px;
  border-top: 1px solid rgba(0,0,0,.10);
  min-height: 120px; /* PLUS PETIT */
}

/* cartes logos */
.pof-row .logo-card{
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* logos standard */
.pof-row .logo-card img{
  max-height: 42px;   /* PLUS PETIT */
  width: auto;
  object-fit: contain;
}

/* logos certifications */
.pof-row .logo-card--cert img{
  max-height: 64px;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 1024px){
  .pof-row{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .pof-row{
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
  }
}


/* font-weight reset SUPPRIMÉ — restauration de la hiérarchie typographique */


/* ==========================
   FIFA - Base (BTP pro)
========================== */
.fifa-container{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
}

.fifa-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color:#0b74d6;
}

.fifa-title{
  margin:10px 0 0 0;
  font-size: clamp(22px, 2.2vw, 36px);
  color:#0b1220;
}

.fifa-text{
  margin: 10px 0;
  line-height: 1.7;
  color: rgba(11,18,32,.78);
}

/* ==========================
   FIFA - Reveal animations
========================== */
.fifa-reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .75s ease, transform .75s ease;
}
.fifa-reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* ==========================
   FIFA - Safety
========================== */
.fifa-safety{
  padding: 18px 0;
  background:#ffffff;
  border-top:1px solid rgba(11,18,32,.10);
  border-bottom:1px solid rgba(11,18,32,.10);
}
.fifa-safety__wrap{
  display:flex;
  align-items:center;
  gap:14px;
}
.fifa-safety__icon{
  width:46px;
  height:46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(11,18,32,.10);
  background:#fff;
}
.fifa-safety__title{
  margin:0;
  font-size:16px;
  color:#0b1220;
}
.fifa-safety__sub{
  margin:4px 0 0 0;
  color: rgba(11,18,32,.65);
  font-size:13px;
}

/* ==========================
   FIFA - Mission
========================== */
.fifa-mission{
  padding: 72px 0;
  background:#ffffff;
}
.fifa-mission__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items:center;
}
.fifa-mission__media{
  margin:0;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(11,18,32,.10);
  background:#0b1220;
}
.fifa-mission__img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
  transition: transform .6s ease;
}
.fifa-mission__media:hover .fifa-mission__img{
  transform: scale(1.08);
}

.fifa-stats{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.fifa-stat{
  background:#fff;
  border:1px solid rgba(11,18,32,.10);
  border-radius: 16px;
  padding: 14px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.fifa-stat:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}
.fifa-stat__num{
  display:block;
  font-size: 22px;
  color:#0b1220;
}
.fifa-stat__label{
  display:block;
  margin-top:6px;
  font-size: 12px;
  color: rgba(11,18,32,.70);
}

/* ==========================
   FIFA - Expertises
========================== */
.fifa-expertises{
  padding: 72px 0;
  background:#ffffff;
}
.fifa-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 22px;
}
.fifa-head--center{
  text-align:center;
  justify-content:center;
  flex-direction:column;
  align-items:center;
}

.fifa-cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.fifa-card{
  background:#ffffff;
  border:1px solid rgba(11,18,32,.10);
  border-radius: 18px;
  padding: 18px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative;
  overflow:hidden;
}
.fifa-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 160px at 20% 0%, rgba(11,116,214,.18), transparent 55%);
  opacity:0;
  transition: opacity .35s ease;
}
.fifa-card:hover::before{ opacity:1; }
.fifa-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  border-color: rgba(11,116,214,.25);
}
.fifa-card__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(11,116,214,.18);
  background: rgba(11,116,214,.08);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.fifa-card__title{
  margin: 6px 0 8px 0;
  font-size: 16px;
  color:#0b1220;
  position: relative;
  z-index: 1;
}
.fifa-card__text{
  margin:0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(11,18,32,.75);
  position: relative;
  z-index: 1;
}

/* ==========================
   FIFA - Projects (BTP pro)
========================== */
.fifa-projects{
  padding: 72px 0;
  background:#ffffff;
}

.fifa-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin: 18px 0 22px;
}
.fifa-filter{
  border:1px solid rgba(11,18,32,.14);
  background:#fff;
  border-radius: 999px;
  padding: 10px 14px;
  cursor:pointer;
  font-size: 12px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: rgba(11,18,32,.85);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.fifa-filter:hover{ transform: translateY(-1px); }
.fifa-filter.is-active{
  border-color: rgba(11,116,214,.35);
  background: rgba(11,116,214,.10);
  color:#0b1220;
}

.fifa-projectGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
.fifa-project{
  background:#fff;
  border:1px solid rgba(11,18,32,.10);
  border-radius: 18px;
  overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.fifa-project:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 60px rgba(0,0,0,.14);
}

.fifa-project__media{
  aspect-ratio: 16/9;
  overflow:hidden;
  background:#0b1220;
}
.fifa-project__img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
  transition: transform .65s ease;
}
.fifa-project:hover .fifa-project__img{ transform: scale(1.10); }

.fifa-project__body{
  padding: 16px 16px 18px;
}
.fifa-project__title{
  margin:0 0 8px 0;
  font-size: 18px;
  color:#0b1220;
}
.fifa-project__meta{
  margin:0 0 10px 0;
  font-size: 12px;
  color: rgba(11,18,32,.62);
}
.fifa-project__text{
  margin:0 0 12px 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(11,18,32,.75);
}
.fifa-project__link{
  display:inline-flex;
  gap:8px;
  text-decoration:none;
  color:#0b74d6;
}
.fifa-project__link:hover{ text-decoration: underline; }

/* hide animation filter */
.fifa-project.is-hidden{
  opacity:0;
  transform: scale(.98);
  pointer-events:none;
  height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
}

/* ==========================
   Responsive
========================== */
@media (max-width: 992px){
  .fifa-mission__grid{ grid-template-columns: 1fr; }
  .fifa-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fifa-projectGrid{ grid-template-columns: 1fr; }
  .fifa-stats{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .fifa-cards{ grid-template-columns: 1fr; }
}


/* =========================================
   FIFA – PALETTE STRICTE BLEU / BLANC
   Override total couleurs
========================================= */

:root{
  --fifa-blue: #0b74d6;
  --fifa-blue-soft: rgba(11,116,214,.10);
  --fifa-blue-border: rgba(11,116,214,.25);
  --fifa-white: #ffffff;
}

/* reset couleurs global */
.fifa-safety,
.fifa-mission,
.fifa-expertises,
.fifa-projects{
  background: var(--fifa-white) !important;
  color: var(--fifa-blue) !important;
}

/* TITRES */
.fifa-title,
.fifa-card__title,
.fifa-project__title,
.fifa-safety__title{
  color: var(--fifa-blue) !important;
}

/* TEXTES */
.fifa-text,
.fifa-card__text,
.fifa-project__text,
.fifa-project__meta,
.fifa-safety__sub,
.fifa-stat__label{
  color: rgba(11,116,214,.85) !important;
}

/* KICKERS */
.fifa-kicker{
  color: var(--fifa-blue) !important;
}

/* =========================
   SAFETY
========================= */
.fifa-safety{
  border-top: 1px solid var(--fifa-blue-border);
  border-bottom: 1px solid var(--fifa-blue-border);
}
.fifa-safety__icon{
  background: var(--fifa-white);
  border: 1px solid var(--fifa-blue-border);
  color: var(--fifa-blue);
}

/* =========================
   MISSION
========================= */
.fifa-mission__media{
  border: 1px solid var(--fifa-blue-border);
}
.fifa-mission__img{
  filter: saturate(1.05);
}

.fifa-stat{
  background: var(--fifa-white);
  border: 1px solid var(--fifa-blue-border);
}
.fifa-stat__num{
  color: var(--fifa-blue);
}

/* =========================
   EXPERTISES
========================= */
.fifa-card{
  background: var(--fifa-white);
  border: 1px solid var(--fifa-blue-border);
}
.fifa-card::before{
  background: radial-gradient(
    600px 160px at 20% 0%,
    rgba(11,116,214,.20),
    transparent 55%
  );
}
.fifa-card__icon{
  background: var(--fifa-blue-soft);
  border: 1px solid var(--fifa-blue-border);
  color: var(--fifa-blue);
}

/* =========================
   PROJETS
========================= */
.fifa-filter{
  background: var(--fifa-white);
  border: 1px solid var(--fifa-blue-border);
  color: var(--fifa-blue);
}
.fifa-filter.is-active{
  background: var(--fifa-blue-soft);
  border-color: var(--fifa-blue);
}

.fifa-project{
  background: var(--fifa-white);
  border: 1px solid var(--fifa-blue-border);
}
.fifa-project__media{
  background: var(--fifa-blue);
}
.fifa-project__link{
  color: var(--fifa-blue);
}

/* =========================
   ANIMATIONS (PRO, SOBRES)
========================= */
.fifa-card:hover,
.fifa-project:hover,
.fifa-stat:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(11,116,214,.20);
}

.fifa-project:hover .fifa-project__img,
.fifa-mission__media:hover .fifa-mission__img{
  transform: scale(1.08);
}

/* =========================
   REVEAL SCROLL
========================= */
.fifa-reveal{
  opacity: 0;
  transform: translateY(16px);
}
.fifa-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   RESPONSIVE CLEAN
========================= */
@media (max-width: 992px){
  .fifa-mission__grid{ grid-template-columns: 1fr; }
  .fifa-cards{ grid-template-columns: repeat(2,1fr); }
  .fifa-projectGrid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .fifa-cards{ grid-template-columns: 1fr; }
}

/* =========================================================
   DIOR HEADER — Starlink-like + BTP/Infrastructure
   Palette STRICTE : BLANC + BLEU CIEL BTP
   -> Colle ce bloc TOUT EN BAS de ton CSS (override)
   -> Ajoute class="header-container dior-header"
========================================================= */

:root{
  --dior-blue:#2E86C1;                 /* BLEU CIEL BTP */
  --dior-blue-10: rgba(46,134,193,.10);
  --dior-blue-18: rgba(46,134,193,.18);
  --dior-blue-28: rgba(46,134,193,.28);
  --dior-blue-45: rgba(46,134,193,.45);
  --dior-white:#ffffff;
}

/* HEADER container */
.dior-header{
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background: transparent;
  transform: translateZ(0);
}

/* top bar */
.dior-header .header-top{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--dior-blue-18);
  padding: 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.dior-header .header-contact{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}
.dior-header .header-contact a{
  color: rgba(46,134,193,.88);
  text-decoration:none;
  font-size: 13px;
  padding: 10px 0;
}

/* language */
.dior-header .language-selector{
  display:flex;
  gap:10px;
  align-items:center;
}
.dior-header .language-selector a{
  color: rgba(46,134,193,.85);
  text-decoration:none;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.dior-header .language-selector a:hover{
  background: var(--dior-blue-10);
  border-color: var(--dior-blue-18);
  transform: translateY(-1px);
}
.dior-header .language-selector a.active{
  background: var(--dior-blue-10);
  border-color: var(--dior-blue-28);
  color: var(--dior-blue);
}

/* main bar */
.dior-header .header-main{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--dior-blue-18);
  box-shadow: 0 18px 50px rgba(46,134,193,.10);
}

.dior-header .header-wrapper{
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

/* logo */
.dior-header .logo-container{
  display:flex;
  align-items:center;
  min-width: 150px;
  flex: 0 0 auto;
}
.dior-header .logo-container img{
  height: 42px;
  width:auto;
  display:block;
  filter: none;
  transition: transform .22s ease;
}
.dior-header .logo-container:hover img{
  transform: translateY(-1px);
}

/* desktop nav */
.dior-header .desktop-navigation{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content:center;
  flex: 1 1 auto;
  min-width: 0;
  overflow:hidden;
}
.dior-header .desktop-navigation a{
  color: rgba(46,134,193,.92);
  text-decoration:none;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 10px 6px;
  position: relative;
  white-space: nowrap;
  transition: transform .18s ease, color .18s ease;
}
.dior-header .desktop-navigation a::after{
  content:"";
  position:absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 2px;
  background: var(--dior-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
  opacity: .95;
}
.dior-header .desktop-navigation a:hover{
  color: var(--dior-blue);
  transform: translateY(-1px);
}
.dior-header .desktop-navigation a:hover::after{
  transform: scaleX(1);
}

/* actions */
.dior-header .header-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}
.dior-header .header-actions .btn{
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid var(--dior-blue-28);
  background: var(--dior-white);
  color: var(--dior-blue);
  box-shadow: 0 14px 40px rgba(46,134,193,.10);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.dior-header .header-actions .btn:hover{
  transform: translateY(-1px);
  background: var(--dior-blue-10);
  border-color: var(--dior-blue-45);
}

/* CTA contact */
.dior-header .header-actions .contact-btn{
  background: var(--dior-blue);
  color: var(--dior-white);
  border-color: var(--dior-blue);
  box-shadow: 0 18px 55px rgba(46,134,193,.22);
}
.dior-header .header-actions .contact-btn:hover{
  background: var(--dior-blue);
}

/* burger */
.dior-header .menu-toggle{
  background: var(--dior-white);
  border: 1px solid var(--dior-blue-28);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 999px;
  transition: transform .18s ease, background .18s ease;
}
.dior-header .menu-toggle:hover{
  transform: translateY(-1px);
  background: var(--dior-blue-10);
}
.dior-header .menu-toggle span{
  display:block;
  width: 22px;
  height: 2px;
  background: var(--dior-blue);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

/* burger -> X */
.header-container.menu-open .menu-toggle span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.header-container.menu-open .menu-toggle span:nth-child(2){
  opacity: 0;
}
.header-container.menu-open .menu-toggle span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* shrink on scroll */
.header-container.is-scrolled .header-top{
  transform: translateY(-100%);
  opacity:0;
  pointer-events:none;
  transition: transform .25s ease, opacity .25s ease;
}
.header-container.is-scrolled .header-wrapper{
  padding-top: 8px;
  padding-bottom: 8px;
}

/* overlay */
.site-overlay{
  background: rgba(46,134,193,.35);
}

/* drawer mobile */
.dior-header .mobile-navigation{
  background: rgba(255,255,255,.96);
  color: var(--dior-blue);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: -30px 0 80px rgba(46,134,193,.20);
  border-left: 1px solid var(--dior-blue-18);
}
.dior-header .mobile-navigation a{
  color: rgba(46,134,193,.92);
  border-bottom: 1px solid var(--dior-blue-18);
  font-weight: 600;
}
.dior-header .mobile-navigation a:hover{
  background: var(--dior-blue-10);
  color: var(--dior-blue);
}

/* close button */
.dior-header .mobile-navigation .drawer-close{
  border: 1px solid var(--dior-blue-28);
  background: var(--dior-white);
  color: var(--dior-blue);
}
.dior-header .mobile-navigation .drawer-close:hover{
  background: var(--dior-blue-10);
}

/* drawer lang */
.dior-header .drawer-lang a{
  border: 1px solid var(--dior-blue-18);
  background: var(--dior-white);
  color: rgba(46,134,193,.92);
  font-weight: 600;
}
.dior-header .drawer-lang a.is-active{
  outline: 2px solid var(--dior-blue-45);
  outline-offset: 2px;
}

/* responsive */
@media (max-width: 992px){
  .dior-header .desktop-navigation{ display:none; }
  .dior-header .header-actions .btn.btn-secondary{ display:none; }
}
@media (max-width: 768px){
  .dior-header .header-top{ padding: 0 14px; }
  .dior-header .header-contact{ display:none; }
  .dior-header .header-wrapper{ padding: 10px 14px; }
  .dior-header .logo-container img{ height: 38px; }
}
@media (max-width: 420px){
  .dior-header .header-actions .contact-btn{ display:none; }
}

/* focus (accessibilité) */
.dior-header .menu-toggle:focus-visible,
.dior-header .mobile-navigation a:focus-visible,
.dior-header .desktop-navigation a:focus-visible,
.dior-header .language-selector a:focus-visible,
.dior-header .btn:focus-visible{
  outline: 2px solid var(--dior-blue);
  outline-offset: 3px;
}

/* ===================================================== */
/*            BTP CORPORATE ULTRA PREMIUM CSS           */
/*                    BLEU & BLANC                       */
/* ===================================================== */


/* ================= VARIABLES ================= */

:root {

  --primary: #0052cc;
  --primary-dark: #003f99;
  --primary-light: #e6f0ff;

  --dark: #0a1f44;
  --text: #5f6b7a;
  --white: #ffffff;
  --border: #dbe4f5;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 10px 25px rgba(0,82,204,0.08);
  --shadow-md: 0 20px 50px rgba(0,82,204,0.12);
  --shadow-lg: 0 30px 70px rgba(0,82,204,0.18);

  --transition: all 0.35s ease;

}


/* ================= RESET ================= */

.btp-premium * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.btp-premium {
  padding: 120px 0;
  background: var(--white);
  font-family: 'Segoe UI', Arial, sans-serif;
  position: relative;
  overflow: hidden;
}


/* Decorative Industrial Line */

.btp-premium::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 6px;
  background: var(--primary);
}


/* Blueprint background subtle */

.btp-premium::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0,82,204,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,82,204,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  top: 0;
  left: 0;
  z-index: 0;
}


/* Container */

.btp-premium .men-container {
  width: 90%;
  max-width: 1250px;
  margin: auto;
  position: relative;
  z-index: 2;
}


/* ================= HEADER ================= */

.btp-premium .men-section-header {
  text-align: center;
  margin-bottom: 80px;
}

.btp-premium .men-section-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-block;
}

.btp-premium .men-section-header h2 {
  font-size: 44px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 20px;
}

.btp-premium .men-section-header p {
  font-size: 18px;
  color: var(--text);
  max-width: 700px;
  margin: auto;
  line-height: 1.6;
}


/* ================= MAP ================= */

.btp-premium .men-map-box {
  height: 480px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-light), var(--white));
  border: 4px solid var(--primary);
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
  position: relative;
}

.btp-premium .men-map-box:hover {
  transform: scale(1.01);
}

.btp-premium .men-map-box::before {
  content: "ZONE D'INTERVENTION";
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--primary);
  color: white;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 30px;
}


/* ================= JOBS ================= */

.btp-premium .men-jobs-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.btp-premium .men-job-row {
  background: var(--white);
  padding: 35px;
  border-radius: var(--radius-md);
  border-left: 6px solid var(--primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  position: relative;
}

.btp-premium .men-job-row:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.btp-premium .men-job-row::after {
  content: "";
  position: absolute;
  right: 20px;
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0.3;
}

.btp-premium .men-job-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--dark);
}

.btp-premium .men-job-location {
  font-size: 14px;
  color: var(--text);
  margin-top: 6px;
}

.btp-premium .men-job-type {
  background: var(--primary);
  color: white;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  margin-right: 20px;
}

.btp-premium .men-btn-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  position: relative;
  transition: var(--transition);
}

.btp-premium .men-btn-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--primary);
  transition: var(--transition);
}

.btp-premium .men-btn-link:hover::after {
  width: 100%;
}


/* ================= DOCUMENTS ================= */

.btp-premium .men-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}

.btp-premium .men-doc-card {
  background: var(--white);
  padding: 55px 35px;
  border-radius: var(--radius-lg);
  border-top: 5px solid var(--primary);
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  position: relative;
}

.btp-premium .men-doc-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-lg);
}

.btp-premium .men-doc-icon {
  font-size: 48px;
  margin-bottom: 25px;
}

.btp-premium .men-btn-outline {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 24px;
  border: 2px solid var(--primary);
  color: var(--primary);
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

.btp-premium .men-btn-outline:hover {
  background: var(--primary);
  color: white;
}


/* ================= CONTACT ================= */

.btp-premium .men-contact-wrapper {
  display: flex;
  gap: 70px;
  flex-wrap: wrap;
}

.btp-premium .men-contact-sidebar {
  flex: 1;
}

.btp-premium .men-contact-card {
  background: var(--white);
  padding: 30px;
  border-radius: var(--radius-md);
  margin-bottom: 30px;
  border-left: 5px solid var(--primary);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.btp-premium .men-contact-card:hover {
  transform: translateX(5px);
}

.btp-premium .men-form {
  flex: 1.5;
  background: var(--white);
  padding: 55px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.btp-premium .men-form-group {
  display: flex;
  gap: 25px;
  margin-bottom: 25px;
}

.btp-premium input,
.btp-premium textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: var(--transition);
}

.btp-premium input:focus,
.btp-premium textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,82,204,0.15);
}

.btp-premium .men-btn-submit {
  margin-top: 25px;
  padding: 16px 32px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btp-premium .men-btn-submit:hover {
  background: var(--primary-dark);
  transform: translateY(-3px);
}


/* ================= FADE ANIMATION ================= */

.men-fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease;
}

.men-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ================= RESPONSIVE ================= */

@media (max-width: 992px) {

  .btp-premium {
    padding: 90px 0;
  }

  .btp-premium .men-contact-wrapper {
    flex-direction: column;
  }

  .btp-premium .men-job-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .btp-premium .men-form-group {
    flex-direction: column;
  }

  .btp-premium .men-section-header h2 {
    font-size: 32px;
  }

}

@media (max-width: 576px) {

  .btp-premium {
    padding: 70px 0;
  }

  .btp-premium .men-section-header h2 {
    font-size: 26px;
  }

  .btp-premium .men-form {
    padding: 30px;
  }

}

/* =========================================================
   KRAFTEL ENGINEERING - FULL BTP CORPORATE SYSTEM
========================================================= */
:root {
  --dior-blue: #2E86C1;
  --dior-white: #ffffff;
  --border: rgba(46, 134, 193, 0.18);
  --shadow: 0 18px 40px rgba(46, 134, 193, 0.15);
  --radius: 12px;
  --primary: #0052cc;
}

/* RESET & TYPO PRO (Fini le important sur tout) */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; color: #4a5568; line-height: 1.6; }
h1, h2, h3, b, strong { font-weight: 700 !important; color: #0a1f44; }

/* HEADER DIOR STARLINK-LIKE */
.header-container { position: sticky; top: 0; z-index: 9999; width: 100%; transition: 0.3s; }
.header-main { background: rgba(255,255,255,0.95); backdrop-filter: blur(15px); border-bottom: 1px solid var(--border); }
.header-container.is-scrolled { box-shadow: var(--shadow); }

/* MENU HAMBURGER -> CROIX */
.menu-toggle { display: flex; flex-direction: column; gap: 6px; padding: 10px; cursor: pointer; border-radius: 50%; border: 1px solid var(--border); }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--dior-blue); transition: 0.3s; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ANIMATIONS DE REVEAL */
.fade-in, .fifa-reveal, .men-fade-in { opacity: 0; transform: translateY(30px); transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.is-visible, .visible { opacity: 1 !important; transform: translateY(0) !important; }

/* CARTES ET EXPERTISES (FIFA + BTP) */
.fifa-card, .fifa-project, .men-job-row { 
  background: var(--dior-white); border: 1px solid var(--border); 
  border-radius: var(--radius); padding: 25px; transition: 0.3s ease; 
}
.fifa-card:hover, .fifa-project:hover { transform: translateY(-5px); border-color: var(--dior-blue); box-shadow: var(--shadow); }

/* FILTRES PROJETS */
.fifa-filter { padding: 10px 25px; border-radius: 50px; border: 1px solid var(--border); cursor: pointer; font-weight: 600; }
.fifa-filter.is-active { background: var(--dior-blue); color: white; }

/* SECTION BTP "SHIT" AVEC GRID */
.btp-premium { padding: 100px 0; background: #fff; position: relative; }
.btp-premium::after {
  content: ""; position: absolute; inset: 0; 
  background-image: linear-gradient(rgba(46,134,193,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(46,134,193,0.05) 1px, transparent 1px);
  background-size: 40px 40px; pointer-events: none;
}

/* SECTION PARTENAIRES (LOGOS ANIMÉS) */
.partners-slider { display: flex; overflow: hidden; gap: 50px; padding: 40px 0; align-items: center; }
.partner-logo { filter: grayscale(100%); opacity: 0.6; transition: 0.3s; height: 40px; }
.partner-logo:hover { filter: grayscale(0%); opacity: 1; }

/* OVERLAY ET MOBILE */
.site-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: 0.3s; z-index: 9000; }
.site-overlay.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 992px) {
  .desktop-navigation { display: none; }
  .fifa-cards { grid-template-columns: 1fr 1fr; }
}

/* Style du conteneur de la carte */
#mapContainer {
    width: 100%;
    height: 450px; /* Taille de la carte */
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    z-index: 1; /* Pour ne pas passer au-dessus du header */
}

/* Optionnel : Griser un peu la carte pour le look Corporate */
.leaflet-container {
    background: #f0f2f5;
}


/* SECTION DOCUMENTS - STYLE BTP & INGÉNIERIE */
.docs-section { padding: 80px 0; background: #fdfdfd; }

.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.doc-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--dior-blue); /* Barre d'accentuation pro */
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    border-radius: 4px; /* Plus carré pour le côté industriel */
}

.doc-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transform: translateY(-3px);
    background: #fafafa;
}

.doc-info h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #1a202c;
}

.doc-info p {
    font-size: 0.85rem;
    color: #718096;
    margin-bottom: 20px;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: #f1f5f9;
    color: var(--dior-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 4px;
    transition: 0.2s;
}

.btn-download:hover {
    background: var(--dior-blue);
    color: #ffffff;
}

/* Badge PDF */
.doc-icon {
    font-weight: 800;
    color: #e53e3e; /* Rouge PDF classique */
    font-size: 0.75rem;
    margin-bottom: 15px;
    display: inline-block;
}


/* SECTION CARRIÈRES */
.careers-section {
    padding: 90px 0;
    background: #ffffff;
}

.jobs-container {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.job-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    transition: all 0.3s ease;
}

.job-card:hover {
    border-color: var(--dior-blue);
    box-shadow: 0 10px 30px rgba(46, 134, 193, 0.08);
    transform: translateX(5px); /* Petit décalage pro au survol */
}

.job-main h3 {
    font-size: 1.25rem;
    color: #1a202c;
    margin-bottom: 8px;
}

.job-meta {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: #718096;
}

.job-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-apply {
    padding: 12px 25px;
    background: var(--dior-blue);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: 0.2s;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.btn-apply:hover {
    background: #1B4F72;
    box-shadow: 0 4px 12px rgba(27, 79, 114, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .job-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .btn-apply {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   SECTION CONTACT - STYLE BTP & INGÉNIERIE TECHNIQUE
========================================================= */
:root {
    --btp-blue: #004A99;      /* Bleu Industriel */
    
    
    --btp-dark:#1B4F72;
    --btp-silver: #E2E8F0;
    --btp-accent: black;    /* Orange de sécurité pour les petits accents */
}

.contact-section { 
    padding: 100px 0; 
    background-color: #f8fafc;
    border-top: 5px solid var(--btp-blue); /* Rappel de structure */
}

.contact-grid {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 50px;
    margin-top: 50px;
}

/* --- COLONNE INFOS (Style Fiche Technique) --- */
.contact-info {
    background: var(--btp-dark);
    color: white;
    padding: 40px;
    border-radius: 4px; /* Coins plus fermes */
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.info-icon {
    font-size: 1.2rem;
    color: var(--btp-accent);
    background: rgba(255, 255, 255, 0.1);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--btp-accent);
}

.info-text h4 {
    color: #cbd5e1;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.info-text p {
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

/* --- FORMULAIRE (Style Bureau d'Étude) --- */
.contact-form {
    background: white;
    padding: 50px;
    border: 1px solid var(--btp-silver);
    box-shadow: 10px 10px 0px rgba(0, 74, 153, 0.05); /* Ombre géométrique */
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* Champs robustes */
.contact-form input, 
.contact-form textarea {
    width: 100%;
    padding: 14px 18px;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    font-size: 0.95rem;
    color: #1B4F72;
    transition: all 0.2s;
    font-family: 'Roboto', sans-serif;
}

.contact-form input:focus, 
.contact-form textarea:focus {
    outline: none;
    border-color: var(--btp-blue);
    background: #fff;
}

/* Bouton "CHANTIER" (Solide et Visible) */
.btn-submit {
    margin-top: 10px;
    padding: 16px 40px;
    background: var(--btp-blue);
    color: white;
    border: none;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-submit:hover {
    background: var(--btp-accent); /* Changement vers l'orange au survol pour l'alerte action */
    color: var(--btp-dark);
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-info { order: 2; }
    .contact-form { order: 1; }
}

/* =========================================================
   BURGER & CROIX - STYLE INGÉNIERIE (REVISITÉ)
========================================================= */

/* Le bouton hamburger */
.menu-toggle {
  background: var(--btp-blue, #004A99); /* Ton bleu Cobalt */
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 10px;
  width: 44px;
  height: 44px;
  border-radius: 4px; /* Carré BTP pour la solidité */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 10002;
}

.menu-toggle:hover {
  background: var(--btp-dark, #002D5E);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 3px; /* Épaisseur robuste */
  background: #fff;
  border-radius: 1px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), 
              opacity .35s ease, 
              background-color .35s ease;
}

/* --- TRANSFORMATION : LA CROIX SORT ET DESCEND --- */

/* Le bouton descend un peu pour sortir du cadre comme demandé */
.header-container.menu-open .menu-toggle {
  transform: translateY(12px); /* Décalage vers le bas */
  background: var(--btp-accent, #F59E0B); /* Orange de sécurité pour la croix */
  border-color: #fff;
}

/* Les barres deviennent une croix précise */
.header-container.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  background-color: #000; /* Croix noire sur bouton orange pour un max de contraste */
}

.header-container.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
  transform: translateX(-15px);
}

.header-container.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  background-color: #000;
}

/* Ajustement du header pour laisser la place à la descente */
.header-main {
    transition: padding 0.4s ease;
}
.header-container.menu-open .header-main {
    padding-bottom: 20px; /* On étire un peu le header vers le bas */
}

/* Modification du Drawer Mobile (Nav) pour le look BTP */
.mobile-navigation {
    background: var(--btp-dark, #002D5E); /* Fond bleu foncé industriel */
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
    border-left: 4px solid var(--btp-accent, #F59E0B); /* Bordure orange technique */
}

/* --- TRANSFORMATION : LA CROIX SORT ET RESTE BLANCHE --- */

/* Le bouton descend de 12px comme convenu */
.header-container.menu-open .menu-toggle {
  transform: translateY(12px); 
  background: var(--btp-blue, #004A99); /* On garde ton bleu cobalt */
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* On force les barres à rester blanches ici */
.header-container.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  background-color: #fff !important; /* Force le blanc */
}

.header-container.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
  transform: translateX(-15px);
}

.header-container.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  background-color: #fff !important; /* Force le blanc */
}

.skill-item { margin-bottom: 25px; }
.skill-info { display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 700; color: var(--btp-dark); }
.progress-line {
    height: 10px;
    background: #e2e8f0;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.progress-line span {
    height: 100%;
    width: 0; /* Départ à 0 pour l'animation */
    background: var(--btp-blue);
    display: block;
    transition: width 1.5s cubic-bezier(0.1, 0.42, 0.41, 1);
    position: relative;
}
/* Petit effet de brillance sur la barre */
.progress-line span::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}
/* Force la visibilité du conteneur */
#mapContainer {
    height: 450px; /* Hauteur obligatoire */
    width: 100%;
    background-color: #e5e5e5; /* Couleur de secours pendant le chargement */
    border: 2px solid #0b74d6; /* Ton bleu Kraftel */
    position: relative;
    display: block !important;
}

/* Évite les conflits de hauteur avec le conteneur parent */
.men-map-box {
    min-height: 450px;
    width: 100%;
}

.btp-cookie-banner {
    position: fixed; bottom: 20px; left: 20px; right: 20px;
    background: #1a1a1a; color: white; padding: 20px;
    border-radius: 8px; border-left: 5px solid #0b74d6;
    z-index: 99999; box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}
.btp-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.btp-btn { padding: 10px 15px; border: none; cursor: pointer; font-weight: bold; border-radius: 4px; }
.btp-btn-primary { background: #0b74d6; color: white; }
.btp-btn-outline { background: transparent; border: 1px solid white; color: white; }
.btp-btn-danger { background: #444; color: white; }

.btp-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.8);
    z-index: 100000; display: none; align-items: center; justify-content: center;
}
.btp-modal-content { background: white; color: #333; width: 90%; max-width: 400px; border-radius: 8px; padding: 20px; }
.cookie-option { display: flex; justify-content: space-between; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }

/* ==========================================
   KRAFTEL PREMIUM MODAL SYSTEM
   Design: Industrial Modern High-Tech
   ========================================== */

:root {
    --primary-blue: #0b74d6;
    --dark-surface: #121212;
    --text-main: #2d3436;
    --text-muted: #636e72;
    --white: #ffffff;
    --transition-fast: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 1. Le lien footer (Style Minimaliste & Pointu) */
.k-link-mentions {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: var(--transition-fast);
    position: relative;
    padding-bottom: 4px;
}

.k-link-mentions::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 15px; /* Ligne courte style ingénierie */
    height: 1.5px;
    background: var(--primary-blue);
    transition: var(--transition-fast);
}

.k-link-mentions:hover {
    color: var(--white);
}

.k-link-mentions:hover::after {
    width: 100%; /* S'étend au survol */
}

/* 2. L'Overlay (Effet Verre Dépoli High-End) */
.k-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6); /* Teinte bleutée foncée */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    z-index: 1000000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 3. La Carte Modal (Structure Robuste) */
.k-modal-card {
    background: var(--white);
    width: 100%;
    max-width: 650px;
    max-height: 85vh;
    border-radius: 4px; /* Coins droits mais très légèrement adoucis pour le côté industriel */
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    animation: kEntrance 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 4. Header (Hiérarchie Claire) */
.k-modal-header {
    padding: 24px 32px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.k-modal-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--dark-surface);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.k-close-x {
    background: #edf2f7;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
}

.k-close-x:hover {
    background: #e2e8f0;
    color: var(--dark-surface);
    transform: rotate(90deg);
}

/* 5. Corps du Texte (Typographie Technique) */
.k-modal-body {
    padding: 32px 40px;
    overflow-y: auto;
    color: var(--text-main);
    font-size: 14.5px;
    line-height: 1.7;
}

.k-modal-body section {
    margin-bottom: 30px;
}

.k-modal-body h3 {
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.k-modal-body h3::before {
    content: "■"; /* Symbole carré BTP */
    font-size: 8px;
}

.k-modal-body p {
    margin: 0;
}

/* 6. Footer (Action Grise et Bleue) */
.k-modal-footer {
    padding: 20px 32px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

.k-btn-primary {
    background: var(--primary-blue);
    color: var(--white);
    border: none;
    padding: 12px 28px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 4px 6px -1px rgba(11, 116, 214, 0.2);
}

.k-btn-primary:hover {
    background: #0961b3;
    box-shadow: 0 10px 15px -3px rgba(11, 116, 214, 0.3);
    transform: translateY(-1px);
}

/* Animations de haut niveau */
@keyframes kEntrance {
    from { 
        opacity: 0; 
        transform: scale(0.95) translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

/* Personnalisation de la Scrollbar (Chrome/Edge/Safari) */
.k-modal-body::-webkit-scrollbar {
    width: 6px;
}
.k-modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.k-modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.k-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--primary-blue);
}

.k-faq-white {
    padding: 100px 0;
    background: #ffffff;
}
.k-container { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.k-faq-header { text-align: center; margin-bottom: 50px; }
.k-label-blue { color: #0b74d6; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; }
.k-title-dark { color: #1a1a1a; font-size: 32px; font-weight: 900; margin: 10px 0; }
.k-bar-blue { width: 40px; height: 4px; background: #0b74d6; margin: 0 auto; }

.k-faq-grid { border-top: 1px solid #eee; margin-top: 30px; }
.k-faq-box { border-bottom: 1px solid #eee; transition: all 0.3s; }
.k-faq-btn { width: 100%; padding: 25px; background: none; border: none; display: flex; align-items: center; cursor: pointer; text-align: left; }
.k-faq-num { font-size: 14px; font-weight: 800; color: #0b74d6; margin-right: 20px; opacity: 0.6; font-family: monospace; }
.k-faq-txt { flex: 1; font-size: 16px; font-weight: 700; color: #333; }
.k-faq-plus { width: 20px; height: 20px; position: relative; }
.k-faq-plus::before, .k-faq-plus::after { content: ""; position: absolute; background: #0b74d6; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.3s; }
.k-faq-plus::before { width: 14px; height: 2px; }
.k-faq-plus::after { width: 2px; height: 14px; }

.k-faq-box.active { background: #f9f9f9; }
.k-faq-box.active .k-faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.k-faq-body { max-height: 0; overflow: hidden; transition: all 0.4s ease-in-out; }
.k-faq-inner { padding: 0 25px 25px 60px; color: #666; font-size: 15px; line-height: 1.6; }
.k-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 34, 77, 0.4);
    backdrop-filter: blur(15px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; z-index: 10000;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.k-modal-overlay.is-active { opacity: 1; visibility: visible; }
.k-modal-container {
    background: #ffffff;
    width: 90%; max-width: 600px;
    padding: 50px; border-radius: 4px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2);
    transform: translateY(50px);
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
}
.k-modal-overlay.is-active .k-modal-container { transform: translateY(0); }
.k-modal-close {
    position: absolute; top: 20px; right: 20px;
    background: none; border: none; font-size: 35px;
    color: #0b74d6; cursor: pointer;
}
.k-modal-inner h2 { color: #0b74d6; font-size: 28px; font-weight: 900; margin-bottom: 20px; text-transform: uppercase; }
.k-modal-inner p { color: #444; line-height: 1.8; font-size: 16px; margin: 0; }
/* ==============================================
   KRAFTEL PREMIUM ENHANCEMENTS
   Loading Screen | Particles | Scroll Reveal | Floating Buttons
   ============================================== */

/* --- LOADING SCREEN --- */
.k-loader{position:fixed;inset:0;background:#0a0e17;z-index:999999;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .8s,visibility .8s}
.k-loader.hide{opacity:0;visibility:hidden}
.k-loader-logo{font-size:2.5rem;font-weight:900;color:white;letter-spacing:6px;animation:k-pulse 1.5s ease-in-out infinite;position:relative}
.k-loader-logo span{color:#f59e0b}
.k-loader-bar{width:200px;height:3px;background:rgba(255,255,255,.1);border-radius:10px;margin-top:30px;overflow:hidden}
.k-loader-progress{height:100%;background:linear-gradient(90deg,#0b74d6,#f59e0b);border-radius:10px;animation:k-load 2s ease forwards}
@keyframes k-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes k-load{0%{width:0}100%{width:100%}}

/* --- FLOATING ACTION BUTTONS --- */
.k-fab-container{position:fixed;bottom:30px;right:30px;z-index:9998;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.k-fab{width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px;color:white;box-shadow:0 6px 20px rgba(0,0,0,.3);transition:all .3s cubic-bezier(.4,0,.2,1);text-decoration:none}
.k-fab:hover{transform:scale(1.15);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.k-fab-whatsapp{background:#25D366}
.k-fab-whatsapp:hover{background:#128C7E}
.k-fab-top{background:rgba(11,116,214,.9);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:all .4s ease}
.k-fab-top.visible{opacity:1;pointer-events:all}
.k-fab-top:hover{background:#f59e0b}

/* --- SCROLL REVEAL ANIMATIONS --- */
.k-reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1)}
.k-reveal.revealed{opacity:1;transform:translateY(0)}
.k-reveal-left{opacity:0;transform:translateX(-60px);transition:opacity .8s, transform .8s}
.k-reveal-left.revealed{opacity:1;transform:translateX(0)}
.k-reveal-right{opacity:0;transform:translateX(60px);transition:opacity .8s, transform .8s}
.k-reveal-right.revealed{opacity:1;transform:translateX(0)}
.k-reveal-scale{opacity:0;transform:scale(.85);transition:opacity .8s, transform .8s}
.k-reveal-scale.revealed{opacity:1;transform:scale(1)}

/* --- ANIMATED COUNTER STAT (inline) --- */
.k-stat-anim .stat-value{transition:color .3s}
.k-stat-anim:hover .stat-value{color:#f59e0b}

/* --- HERO PARTICLE CANVAS --- */
#k-particle-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* --- PREMIUM GRADIENT TEXT --- */
.k-gradient-text{background:linear-gradient(135deg,#0b74d6 0%,#38bdf8 40%,#f59e0b 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* --- GLOWING BORDER CARD --- */
.k-glow-card{position:relative;border-radius:16px;overflow:hidden}
.k-glow-card::before{content:'';position:absolute;inset:-2px;background:linear-gradient(135deg,#0b74d6,#f59e0b,#0b74d6);z-index:-1;border-radius:18px;opacity:0;transition:opacity .5s}
.k-glow-card:hover::before{opacity:1}

/* --- SMOOTH SECTION DIVIDERS --- */
.k-section-divider{width:100%;height:80px;background:linear-gradient(to bottom, transparent, rgba(11,116,214,.05))}

/* --- NEWSLETTER SECTION --- */
.k-newsletter{background:linear-gradient(135deg,#001a33 0%,#0b2e5c 50%,#0b74d6 100%);padding:60px 0;text-align:center;position:relative;overflow:hidden}
.k-newsletter::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.k-newsletter h3{font-size:1.8rem;font-weight:900;color:white;margin-bottom:8px;position:relative}
.k-newsletter p{color:rgba(255,255,255,.7);margin-bottom:25px;position:relative;font-size:.95rem}
.k-nl-form{position:relative;max-width:500px;margin:0 auto;display:flex;gap:0}
.k-nl-form input{flex:1;padding:16px 20px;border:none;border-radius:8px 0 0 8px;font-size:.95rem;background:rgba(255,255,255,.1);color:white;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15)}
.k-nl-form input::placeholder{color:rgba(255,255,255,.4)}
.k-nl-form input:focus{outline:none;background:rgba(255,255,255,.15);border-color:var(--btp-accent,#f59e0b)}
.k-nl-form button{padding:16px 30px;background:#f59e0b;color:#001a33;font-weight:900;border:none;border-radius:0 8px 8px 0;cursor:pointer;font-size:.85rem;letter-spacing:1px;transition:all .3s}
.k-nl-form button:hover{background:white}

/* --- NEWS TICKER --- */
.k-ticker{background:#001a33;border-bottom:2px solid rgba(11,116,214,.3);overflow:hidden;white-space:nowrap;padding:10px 0}
.k-ticker-inner{display:inline-block;animation:k-scroll 25s linear infinite}
.k-ticker-item{display:inline-block;padding:0 40px;color:rgba(255,255,255,.6);font-size:.8rem;letter-spacing:1px}
.k-ticker-item::before{content:'';display:inline-block;width:6px;height:6px;background:#f59e0b;border-radius:50%;margin-right:10px;vertical-align:middle}
@keyframes k-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ==============================================
   KRAFTEL MEGA PREMIUM 2026  
   AI Chat | Dark Mode | Cursor | 3D | Timeline
   ============================================== */

/* --- AI CHATBOT --- */
.k-chat-trigger{position:fixed;bottom:100px;right:30px;z-index:9997;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#0b74d6,#6366f1);border:none;cursor:pointer;color:white;font-size:24px;box-shadow:0 8px 30px rgba(99,102,241,.4);transition:all .3s;display:flex;align-items:center;justify-content:center}
.k-chat-trigger:hover{transform:scale(1.1);box-shadow:0 12px 40px rgba(99,102,241,.6)}
.k-chat-trigger::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:linear-gradient(135deg,#0b74d6,#f59e0b);z-index:-1;opacity:0;animation:k-chat-glow 2s ease-in-out infinite}
@keyframes k-chat-glow{0%,100%{opacity:0;transform:scale(.95)}50%{opacity:.4;transform:scale(1.05)}}
.k-chat-panel{position:fixed;bottom:170px;right:30px;width:380px;max-height:520px;background:rgba(10,14,23,.97);backdrop-filter:blur(25px);border:1px solid rgba(99,102,241,.2);border-radius:20px;z-index:9997;display:flex;flex-direction:column;transform:translateY(20px) scale(.95);opacity:0;visibility:hidden;transition:all .4s cubic-bezier(.19,1,.22,1);box-shadow:0 25px 60px rgba(0,0,0,.5)}
.k-chat-panel.open{transform:translateY(0) scale(1);opacity:1;visibility:visible}
.k-chat-head{padding:18px 22px;background:linear-gradient(135deg,#0b74d6,#6366f1);border-radius:20px 20px 0 0;display:flex;align-items:center;gap:12px;position:relative}
.k-chat-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:20px}
.k-chat-info h4{color:white;font-size:.9rem;font-weight:800;margin:0}
.k-chat-info p{color:rgba(255,255,255,.7);font-size:.7rem;margin:0}
.k-chat-status{width:8px;height:8px;background:#22c55e;border-radius:50%;position:absolute;left:52px;bottom:18px;border:2px solid rgba(10,14,23,.97);animation:k-status-blink 2s infinite}
@keyframes k-status-blink{0%,100%{opacity:1}50%{opacity:.4}}
.k-chat-close{position:absolute;right:15px;top:50%;transform:translateY(-50%);background:none;border:none;color:white;font-size:20px;cursor:pointer;opacity:.7;transition:.3s}
.k-chat-close:hover{opacity:1}
.k-chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;max-height:320px;scrollbar-width:thin;scrollbar-color:rgba(99,102,241,.3) transparent}
.k-chat-msg{max-width:85%;padding:10px 16px;border-radius:16px;font-size:.85rem;line-height:1.5;animation:k-msg-in .3s ease}
@keyframes k-msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.k-chat-msg.bot{background:rgba(99,102,241,.12);color:#c4b5fd;align-self:flex-start;border-bottom-left-radius:4px}
.k-chat-msg.user{background:linear-gradient(135deg,#0b74d6,#6366f1);color:white;align-self:flex-end;border-bottom-right-radius:4px}
.k-chat-typing{display:flex;gap:4px;padding:8px 16px;align-self:flex-start}
.k-chat-typing span{width:7px;height:7px;background:rgba(99,102,241,.5);border-radius:50%;animation:k-typing .8s ease-in-out infinite}
.k-chat-typing span:nth-child(2){animation-delay:.15s}
.k-chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes k-typing{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.k-chat-input-area{padding:12px;border-top:1px solid rgba(99,102,241,.1);display:flex;gap:8px}
.k-chat-input-area input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(99,102,241,.15);border-radius:12px;padding:10px 16px;color:white;font-size:.85rem;outline:none;transition:.3s}
.k-chat-input-area input:focus{border-color:rgba(99,102,241,.5);background:rgba(255,255,255,.08)}
.k-chat-input-area input::placeholder{color:rgba(255,255,255,.3)}
.k-chat-input-area button{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#0b74d6,#6366f1);border:none;color:white;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:.3s}
.k-chat-input-area button:hover{transform:scale(1.08)}
.k-chat-suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.k-chat-sug{padding:6px 12px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);border-radius:20px;color:#a5b4fc;font-size:.72rem;cursor:pointer;transition:.2s;white-space:nowrap}
.k-chat-sug:hover{background:rgba(99,102,241,.2);color:white}

/* --- DARK/LIGHT MODE TOGGLE --- */
.k-theme-toggle{position:fixed;top:100px;right:20px;z-index:9996;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.06);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;color:#f59e0b;transition:all .3s;opacity:.7}
.k-theme-toggle:hover{opacity:1;transform:scale(1.1)}

/* --- CUSTOM CURSOR --- */
.k-cursor{width:20px;height:20px;border:2px solid rgba(11,116,214,.6);border-radius:50%;position:fixed;pointer-events:none;z-index:99999;transition:transform .15s,width .2s,height .2s,border-color .2s;transform:translate(-50%,-50%)}
.k-cursor-dot{width:5px;height:5px;background:#0b74d6;border-radius:50%;position:fixed;pointer-events:none;z-index:99999;transform:translate(-50%,-50%)}
.k-cursor.hover{width:40px;height:40px;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.06)}
@media(max-width:768px){.k-cursor,.k-cursor-dot{display:none}}

/* --- SCROLL PROGRESS BAR --- */
.k-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#0b74d6,#6366f1,#f59e0b);z-index:99998;transition:width .05s;border-radius:0 2px 2px 0;box-shadow:0 0 10px rgba(99,102,241,.5)}

/* --- 3D TILT CARD --- */
.k-tilt{transition:transform .3s ease;transform-style:preserve-3d;perspective:1000px}

/* --- COOKIE CONSENT --- */
.k-cookie{position:fixed;bottom:0;left:0;right:0;background:rgba(10,14,23,.97);backdrop-filter:blur(20px);border-top:1px solid rgba(99,102,241,.15);padding:18px 30px;z-index:99990;display:flex;align-items:center;justify-content:space-between;gap:20px;transform:translateY(100%);transition:transform .6s cubic-bezier(.19,1,.22,1)}
.k-cookie.show{transform:translateY(0)}
.k-cookie p{color:#94a3b8;font-size:.82rem;line-height:1.5;flex:1;margin:0}
.k-cookie p a{color:#a5b4fc}
.k-cookie-btns{display:flex;gap:10px;flex-shrink:0}
.k-cookie-btn{padding:10px 22px;border-radius:10px;font-size:.8rem;font-weight:700;cursor:pointer;border:none;transition:all .3s}
.k-cookie-accept{background:linear-gradient(135deg,#0b74d6,#6366f1);color:white}
.k-cookie-accept:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,.4)}
.k-cookie-reject{background:rgba(255,255,255,.05);color:#94a3b8;border:1px solid rgba(255,255,255,.1)}
.k-cookie-reject:hover{background:rgba(255,255,255,.1)}

/* --- INTERACTIVE TIMELINE --- */
.k-timeline{position:relative;padding:40px 0}
.k-timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,rgba(99,102,241,.3),rgba(11,116,214,.3),transparent);transform:translateX(-50%)}
.k-tl-item{display:flex;align-items:center;gap:30px;margin-bottom:40px;position:relative}
.k-tl-item:nth-child(even){flex-direction:row-reverse}
.k-tl-content{flex:1;background:rgba(255,255,255,.03);border:1px solid rgba(99,102,241,.1);border-radius:16px;padding:25px;transition:all .3s}
.k-tl-content:hover{border-color:rgba(99,102,241,.3);transform:translateY(-3px)}
.k-tl-content h4{color:white;font-size:1rem;font-weight:800;margin-bottom:5px}
.k-tl-content p{color:#94a3b8;font-size:.85rem;margin:0}
.k-tl-dot{width:14px;height:14px;background:linear-gradient(135deg,#0b74d6,#6366f1);border-radius:50%;flex-shrink:0;position:relative;z-index:1;box-shadow:0 0 15px rgba(99,102,241,.4)}
.k-tl-year{flex:1;text-align:right;font-size:1.3rem;font-weight:900;color:rgba(99,102,241,.4);letter-spacing:2px}
.k-tl-item:nth-child(even) .k-tl-year{text-align:left}
@media(max-width:768px){.k-timeline::before{left:20px}.k-tl-item,.k-tl-item:nth-child(even){flex-direction:column;align-items:flex-start;padding-left:50px}.k-tl-dot{position:absolute;left:14px}.k-tl-year{text-align:left !important;font-size:1rem}}

/* --- TESTIMONIAL CAROUSEL --- */
.k-testimonials{overflow:hidden;position:relative;padding:20px 0}
.k-tst-track{display:flex;transition:transform .6s cubic-bezier(.25,.8,.25,1)}
.k-tst-card{min-width:100%;padding:0 30px;box-sizing:border-box}
.k-tst-inner{background:rgba(255,255,255,.03);border:1px solid rgba(99,102,241,.1);border-radius:20px;padding:40px;text-align:center;position:relative}
.k-tst-inner::before{content:'\201C';position:absolute;top:15px;left:25px;font-size:4rem;color:rgba(99,102,241,.15);font-family:serif;line-height:1}
.k-tst-text{color:#cbd5e1;font-size:1rem;line-height:1.8;font-style:italic;margin-bottom:20px}
.k-tst-author{font-weight:800;color:white;font-size:.9rem}
.k-tst-role{color:rgba(99,102,241,.6);font-size:.8rem;margin-top:3px}
.k-tst-stars{color:#f59e0b;font-size:.85rem;margin-bottom:15px;letter-spacing:3px}
.k-tst-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.k-tst-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);cursor:pointer;transition:.3s}
.k-tst-dot.active{background:#6366f1;width:24px;border-radius:4px}
.k-tst-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(99,102,241,.15);border:none;width:40px;height:40px;border-radius:50%;color:white;font-size:18px;cursor:pointer;transition:.3s;display:flex;align-items:center;justify-content:center;z-index:2}
.k-tst-nav:hover{background:rgba(99,102,241,.3)}
.k-tst-prev{left:5px}
.k-tst-next{right:5px}

/* --- MAGNETIC BUTTON EFFECT --- */
.k-magnetic{transition:transform .2s ease}

/* --- TEXT SPLIT REVEAL --- */
.k-split-word{display:inline-block;overflow:hidden}
.k-split-char{display:inline-block;transform:translateY(100%);opacity:0;transition:transform .6s cubic-bezier(.19,1,.22,1),opacity .6s}
.k-split-word.revealed .k-split-char{transform:translateY(0);opacity:1}

/* ==============================================
   KRAFTEL ULTRA PREMIUM 2026 - BATCH 2
   10 Additional Premium Features
   ============================================== */

/* --- 1. SMOOTH SECTION REVEAL (LEFT/RIGHT) --- */
.k-reveal-left{transform:translateX(-60px);opacity:0;transition:all .8s cubic-bezier(.19,1,.22,1)}
.k-reveal-right{transform:translateX(60px);opacity:0;transition:all .8s cubic-bezier(.19,1,.22,1)}
.k-reveal-left.revealed,.k-reveal-right.revealed{transform:translateX(0);opacity:1}
.k-reveal-up{transform:translateY(50px);opacity:0;transition:all .7s cubic-bezier(.19,1,.22,1)}
.k-reveal-up.revealed{transform:translateY(0);opacity:1}
.k-reveal-scale{transform:scale(.85);opacity:0;transition:all .7s cubic-bezier(.19,1,.22,1)}
.k-reveal-scale.revealed{transform:scale(1);opacity:1}

/* --- 2. GLASSMORPHISM STAT CARDS --- */
.k-glass{background:rgba(255,255,255,.04) !important;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.08) !important;box-shadow:0 8px 32px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05)}

/* --- 3. ANIMATED GRADIENT BORDERS --- */
.k-gradient-border{position:relative;overflow:hidden}
.k-gradient-border::before{content:'';position:absolute;inset:-2px;background:linear-gradient(45deg,#0b74d6,#6366f1,#f59e0b,#ec4899,#0b74d6);background-size:300% 300%;z-index:-1;border-radius:inherit;animation:k-border-anim 4s ease infinite}
@keyframes k-border-anim{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.k-gradient-border::after{content:'';position:absolute;inset:2px;background:inherit;border-radius:inherit;z-index:-1}

/* --- 4. RIPPLE CLICK EFFECT --- */
.k-ripple{position:relative;overflow:hidden}
.k-ripple-wave{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);transform:scale(0);animation:k-ripple-anim .6s linear;pointer-events:none}
@keyframes k-ripple-anim{to{transform:scale(4);opacity:0}}

/* --- 5. ANIMATED TEXT GRADIENT ON HEADINGS --- */
.k-text-shine{background:linear-gradient(90deg,#0b74d6,#6366f1,#f59e0b,#ec4899,#0b74d6);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:k-text-shine 3s linear infinite}
@keyframes k-text-shine{to{background-position:200% center}}

/* --- 6. CARD FLIP ON HOVER --- */
.k-flip-container{perspective:1000px}
.k-flip-card{position:relative;transition:transform .7s cubic-bezier(.19,1,.22,1);transform-style:preserve-3d}
.k-flip-container:hover .k-flip-card{transform:rotateY(180deg)}
.k-flip-front,.k-flip-back{backface-visibility:hidden;position:absolute;inset:0;border-radius:16px}
.k-flip-back{transform:rotateY(180deg);background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(11,116,214,.1));display:flex;align-items:center;justify-content:center;padding:25px;color:#a5b4fc;font-size:.9rem;line-height:1.6;text-align:center}

/* --- 7. ANIMATED MESH GRADIENT BACKGROUND --- */
.k-mesh-bg{position:relative;overflow:hidden}
.k-mesh-bg::before{content:'';position:absolute;inset:-50%;width:200%;height:200%;background:radial-gradient(circle at 20% 50%,rgba(99,102,241,.06) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(245,158,11,.04) 0%,transparent 50%),radial-gradient(circle at 50% 80%,rgba(11,116,214,.05) 0%,transparent 50%);animation:k-mesh-move 15s ease-in-out infinite;z-index:0}
@keyframes k-mesh-move{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(30px,-30px) rotate(1deg)}66%{transform:translate(-20px,20px) rotate(-1deg)}}

/* --- 8. FLOATING "NOUVEAU" BADGE --- */
.k-badge-new{position:relative}
.k-badge-new::after{content:'NEW';position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg,#f59e0b,#ec4899);color:white;font-size:.55rem;font-weight:900;padding:3px 8px;border-radius:10px;letter-spacing:1px;animation:k-badge-pulse 2s ease-in-out infinite;z-index:5}
@keyframes k-badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* --- 9. SMOOTH ACCORDION (BETTER FAQ TRANSITIONS) --- */
.k-faq-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.19,1,.22,1),padding .5s;opacity:0}
.k-faq-box.open .k-faq-body{max-height:500px;opacity:1}
.k-faq-btn{transition:all .3s}
.k-faq-box.open .k-faq-btn{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.3)}
.k-faq-box.open .k-faq-plus{transform:rotate(45deg)}

/* --- 10. GLITCH TEXT EFFECT (LOADER) --- */
.k-glitch{position:relative}
.k-glitch::before,.k-glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%}
.k-glitch::before{color:#0b74d6;animation:k-glitch-1 2s infinite linear alternate-reverse;clip-path:polygon(0 0,100% 0,100% 35%,0 35%)}
.k-glitch::after{color:#f59e0b;animation:k-glitch-2 2s infinite linear alternate-reverse;clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%)}
@keyframes k-glitch-1{0%,100%{transform:translate(0)}20%{transform:translate(-3px,3px)}40%{transform:translate(-3px,-3px)}60%{transform:translate(3px,3px)}80%{transform:translate(3px,-3px)}}
@keyframes k-glitch-2{0%,100%{transform:translate(0)}20%{transform:translate(3px,3px)}40%{transform:translate(3px,-3px)}60%{transform:translate(-3px,3px)}80%{transform:translate(-3px,-3px)}}

/* --- SMOOTH SCROLLBAR STYLING --- */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#0b74d6,#6366f1);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,#6366f1,#f59e0b)}

/* --- FOCUS VISIBLE RING --- */
:focus-visible{outline:2px solid rgba(99,102,241,.5);outline-offset:3px;border-radius:4px}

/* --- SELECTION COLOR --- */
::selection{background:rgba(99,102,241,.3);color:white}

/* --- SMOOTH ANCHOR SCROLLING --- */
html{scroll-behavior:smooth}

/* ==============================================
   KRAFTEL ULTRA 2026 - BATCH 3
   15 UNIQUE CUTTING-EDGE FEATURES
   ============================================== */

/* --- 1. AURORA BOREALIS BACKGROUND --- */
.k-aurora{position:relative;overflow:hidden}
.k-aurora::before{content:'';position:absolute;top:-50%;left:-50%;right:-50%;bottom:-50%;background:linear-gradient(45deg,transparent 40%,rgba(99,102,241,.03) 45%,rgba(11,116,214,.04) 55%,transparent 60%),linear-gradient(-45deg,transparent 40%,rgba(245,158,11,.02) 45%,rgba(236,72,153,.03) 55%,transparent 60%);animation:k-aurora-move 12s ease-in-out infinite;z-index:0;pointer-events:none}
@keyframes k-aurora-move{0%{transform:translateX(-10%) translateY(-10%) rotate(0deg)}33%{transform:translateX(10%) translateY(5%) rotate(5deg)}66%{transform:translateX(-5%) translateY(10%) rotate(-3deg)}100%{transform:translateX(-10%) translateY(-10%) rotate(0deg)}}

/* --- 2. MATRIX/DIGITAL RAIN OVERLAY --- */
.k-matrix-canvas{position:absolute;inset:0;z-index:0;opacity:.06;pointer-events:none}

/* --- 3. MORPHING BLOB SHAPES --- */
.k-blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.08;animation:k-blob-morph 8s ease-in-out infinite;z-index:0;pointer-events:none}
.k-blob-1{width:300px;height:300px;background:linear-gradient(135deg,#0b74d6,#6366f1);top:10%;right:5%}
.k-blob-2{width:250px;height:250px;background:linear-gradient(135deg,#f59e0b,#ec4899);bottom:20%;left:5%;animation-delay:-3s}
.k-blob-3{width:200px;height:200px;background:linear-gradient(135deg,#22c55e,#0b74d6);top:60%;right:30%;animation-delay:-6s}
@keyframes k-blob-morph{0%,100%{border-radius:50%;transform:translate(0,0) scale(1)}25%{border-radius:40% 60% 70% 30%;transform:translate(20px,-20px) scale(1.1)}50%{border-radius:60% 40% 30% 70%;transform:translate(-10px,10px) scale(.9)}75%{border-radius:30% 70% 60% 40%;transform:translate(10px,20px) scale(1.05)}}

/* --- 4. HOVER SPOTLIGHT EFFECT --- */
.k-spotlight{position:relative;overflow:hidden}
.k-spotlight::after{content:'';position:absolute;width:200px;height:200px;background:radial-gradient(circle,rgba(99,102,241,.07) 0%,transparent 70%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s;transform:translate(-50%,-50%)}
.k-spotlight:hover::after{opacity:1}

/* --- 5. NOISE TEXTURE OVERLAY --- */
.k-noise{position:relative}
.k-noise::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.03;pointer-events:none;z-index:1;mix-blend-mode:overlay}

/* --- 6. MAGNETIC CARD SHADOWS --- */
.k-shadow-dynamic{transition:box-shadow .3s ease}
.k-shadow-dynamic:hover{box-shadow:0 20px 60px rgba(99,102,241,.15),0 0 40px rgba(11,116,214,.08),inset 0 1px 0 rgba(255,255,255,.05)}

/* --- 7. ANIMATED SKILL PROGRESS BARS --- */
.k-skill-bar{background:rgba(255,255,255,.05);border-radius:8px;height:8px;overflow:hidden;margin:8px 0}
.k-skill-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,#0b74d6,#6366f1);width:0;transition:width 1.5s cubic-bezier(.19,1,.22,1)}
.k-skill-fill.animated{width:var(--skill-pct)}
.k-skill-label{display:flex;justify-content:space-between;font-size:.8rem;color:#94a3b8;margin-bottom:3px}
.k-skill-label span:last-child{color:#6366f1;font-weight:700}

/* --- 8. FLOATING SOCIAL PROOF NOTIFICATION --- */
.k-social-proof{position:fixed;bottom:90px;left:30px;background:rgba(10,14,23,.95);backdrop-filter:blur(15px);border:1px solid rgba(99,102,241,.15);border-radius:14px;padding:14px 20px;z-index:9990;display:flex;align-items:center;gap:12px;transform:translateX(-120%);transition:transform .6s cubic-bezier(.19,1,.22,1);max-width:320px;box-shadow:0 15px 40px rgba(0,0,0,.3)}
.k-social-proof.show{transform:translateX(0)}
.k-social-proof-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#0b74d6,#6366f1);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.k-social-proof-text{font-size:.78rem;line-height:1.4;color:#cbd5e1}
.k-social-proof-text strong{color:white;display:block;font-size:.82rem}
.k-social-proof-close{position:absolute;top:6px;right:10px;background:none;border:none;color:#64748b;cursor:pointer;font-size:14px}

/* --- 9. HOVER GLOWING TEXT --- */
.k-glow-text{transition:text-shadow .3s}
.k-glow-text:hover{text-shadow:0 0 20px rgba(99,102,241,.4),0 0 40px rgba(99,102,241,.2),0 0 60px rgba(99,102,241,.1)}

/* --- 10. ELASTIC SCROLL SECTIONS --- */
.k-elastic{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.k-elastic.bounce{transform:translateY(-5px)}

/* --- 11. DYNAMIC COUNTER BADGE ON CHATBOT --- */
.k-chat-badge{position:absolute;top:-5px;right:-5px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#ef4444,#ec4899);color:white;font-size:.6rem;font-weight:900;display:flex;align-items:center;justify-content:center;animation:k-chat-bounce 2s infinite;border:2px solid rgba(10,14,23,.9)}
@keyframes k-chat-bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* --- 12. GRADIENT LINE SEPARATORS --- */
.k-divider{height:2px;background:linear-gradient(90deg,transparent,rgba(99,102,241,.3),rgba(245,158,11,.3),transparent);margin:40px 0;border:none}

/* --- 13. TYPING CURSOR ANIMATION --- */
.k-typing-cursor{display:inline-block;width:3px;height:1em;background:#f59e0b;margin-left:4px;animation:k-blink 1s step-end infinite;vertical-align:text-bottom}
@keyframes k-blink{50%{opacity:0}}

/* --- 14. FLOATING PARTICLES ON SCROLL --- */
.k-scroll-particle{position:fixed;pointer-events:none;z-index:99995;border-radius:50%;animation:k-particle-float 1s ease-out forwards}
@keyframes k-particle-float{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-60px) scale(0)}}

/* --- 15. 3D PERSPECTIVE SECTION TILT --- */
.k-perspective-section{transition:transform .6s cubic-bezier(.19,1,.22,1);transform-style:preserve-3d}

/* --- MICRO INTERACTION: BUTTON PRESS --- */
button:active,.btn:active{transform:scale(.97) !important;transition:transform .1s !important}

/* --- PREMIUM LINK UNDERLINE --- */
.footer-column a,.pp-nav a{position:relative;display:inline-block}
.footer-column a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:linear-gradient(90deg,#0b74d6,#6366f1);transition:width .3s}
.footer-column a:hover::after{width:100%}

/* --- CARD CORNER ACCENT --- */
.k-corner-accent{position:relative}
.k-corner-accent::before{content:'';position:absolute;top:0;right:0;width:30px;height:30px;border-top:2px solid rgba(99,102,241,.3);border-right:2px solid rgba(99,102,241,.3);border-radius:0 16px 0 0;pointer-events:none}
.k-corner-accent::after{content:'';position:absolute;bottom:0;left:0;width:30px;height:30px;border-bottom:2px solid rgba(245,158,11,.3);border-left:2px solid rgba(245,158,11,.3);border-radius:0 0 0 16px;pointer-events:none}

/* ==============================================
   LOGO FIX - Remove white background
   ============================================== */
.dior-logo img{mix-blend-mode:multiply;border-radius:8px;background:transparent !important;filter:brightness(1.05) contrast(1.1)}
.light-mode .dior-logo img{mix-blend-mode:multiply;filter:none}

/* ==============================================
   KRAFTEL AI-POWERED FEATURES 2026
   ============================================== */

/* --- AI SMART SEARCH --- */
.k-ai-search{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background:rgba(0,0,0,.85);backdrop-filter:blur(20px);display:none;align-items:flex-start;justify-content:center;padding-top:15vh}
.k-ai-search.active{display:flex}
.k-ai-search-box{width:90%;max-width:600px;background:rgba(20,25,40,.95);border:1px solid rgba(99,102,241,.2);border-radius:20px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.k-ai-search-input{width:100%;padding:16px 20px;background:rgba(255,255,255,.05);border:1px solid rgba(99,102,241,.15);border-radius:12px;color:white;font-size:1.1rem;outline:none;font-family:inherit}
.k-ai-search-input::placeholder{color:#64748b}
.k-ai-search-input:focus{border-color:rgba(99,102,241,.4);box-shadow:0 0 20px rgba(99,102,241,.1)}
.k-ai-search-results{margin-top:16px;max-height:300px;overflow-y:auto}
.k-ai-search-item{padding:12px 16px;border-radius:10px;cursor:pointer;color:#94a3b8;transition:all .2s;display:flex;align-items:center;gap:10px}
.k-ai-search-item:hover{background:rgba(99,102,241,.1);color:white}
.k-ai-search-item .icon{font-size:1.2rem}
.k-ai-search-close{position:absolute;top:20px;right:30px;background:none;border:none;color:#64748b;font-size:24px;cursor:pointer}

/* --- VOICE COMMAND --- */
.k-voice-btn{position:fixed;bottom:180px;right:30px;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#ef4444,#ec4899);color:white;border:none;font-size:20px;cursor:pointer;z-index:9996;box-shadow:0 8px 25px rgba(239,68,68,.3);transition:all .3s}
.k-voice-btn:hover{transform:scale(1.1)}
.k-voice-btn.listening{animation:k-voice-pulse 1s infinite}
@keyframes k-voice-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 15px rgba(239,68,68,0)}}

/* --- CALCULATOR MODAL --- */
.k-calc-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99998;background:rgba(0,0,0,.8);backdrop-filter:blur(15px);display:none;align-items:center;justify-content:center}
.k-calc-modal.active{display:flex}
.k-calc-box{background:rgba(20,25,40,.95);border:1px solid rgba(99,102,241,.2);border-radius:20px;padding:30px;max-width:450px;width:90%;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.k-calc-box h3{color:white;margin:0 0 20px;font-size:1.2rem;text-align:center}
.k-calc-group{margin-bottom:15px}
.k-calc-group label{display:block;color:#94a3b8;font-size:.8rem;margin-bottom:5px;text-transform:uppercase;letter-spacing:1px}
.k-calc-group input,.k-calc-group select{width:100%;padding:12px;background:rgba(255,255,255,.05);border:1px solid rgba(99,102,241,.15);border-radius:10px;color:white;font-size:.95rem;outline:none;font-family:inherit;box-sizing:border-box}
.k-calc-result{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(11,116,214,.1));border-radius:12px;padding:20px;text-align:center;margin-top:15px}
.k-calc-result .amount{font-size:1.8rem;font-weight:900;color:#f59e0b}
.k-calc-result .label{font-size:.75rem;color:#64748b;margin-top:5px}
.k-calc-close{position:absolute;top:15px;right:20px;background:none;border:none;color:#64748b;font-size:20px;cursor:pointer}

/* --- SMART AVAILABILITY --- */
.k-availability{position:fixed;top:80px;right:30px;padding:10px 18px;border-radius:50px;font-size:.75rem;font-weight:700;z-index:9994;letter-spacing:1px;display:flex;align-items:center;gap:8px;backdrop-filter:blur(10px)}
.k-availability.open{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.2)}
.k-availability.closed{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
.k-availability .dot{width:8px;height:8px;border-radius:50%;animation:k-avail-pulse 2s infinite}
.k-availability.open .dot{background:#22c55e}
.k-availability.closed .dot{background:#ef4444}
@keyframes k-avail-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* --- VISITOR COUNTER --- */
.k-visitors{position:fixed;bottom:30px;left:30px;padding:8px 15px;border-radius:20px;background:rgba(10,14,23,.8);backdrop-filter:blur(10px);border:1px solid rgba(99,102,241,.1);color:#94a3b8;font-size:.7rem;z-index:9994;display:flex;align-items:center;gap:6px}
.k-visitors .live-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:k-avail-pulse 1.5s infinite}

/* --- QR CODE --- */
.k-qr-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99998;background:rgba(0,0,0,.8);backdrop-filter:blur(15px);display:none;align-items:center;justify-content:center}
.k-qr-modal.active{display:flex}
.k-qr-box{background:rgba(20,25,40,.95);border:1px solid rgba(99,102,241,.2);border-radius:20px;padding:30px;text-align:center;max-width:350px}
.k-qr-canvas{background:white;padding:15px;border-radius:12px;margin:15px auto;display:inline-block}

/* --- PERSONALIZED GREETING --- */
.k-greeting{position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:12px 24px;border-radius:50px;background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(11,116,214,.1));backdrop-filter:blur(15px);border:1px solid rgba(99,102,241,.15);color:white;font-size:.85rem;z-index:9997;opacity:0;transform:translateX(-50%) translateY(-20px);transition:all .5s;display:none}
.k-greeting.show{opacity:1;transform:translateX(-50%) translateY(0);display:block}

/* --- PUSH NOTIFICATION --- */
.k-push-prompt{position:fixed;bottom:90px;right:30px;background:rgba(20,25,40,.95);border:1px solid rgba(99,102,241,.2);border-radius:16px;padding:18px 22px;max-width:300px;z-index:9995;box-shadow:0 15px 40px rgba(0,0,0,.4);display:none}
.k-push-prompt.show{display:block;animation:k-slide-up .5s ease}
@keyframes k-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.k-push-title{color:white;font-weight:700;font-size:.9rem;margin-bottom:6px}
.k-push-text{color:#94a3b8;font-size:.8rem;line-height:1.4;margin-bottom:12px}
.k-push-btns{display:flex;gap:8px}
.k-push-btns button{flex:1;padding:8px;border-radius:8px;border:none;cursor:pointer;font-size:.75rem;font-weight:700}
.k-push-yes{background:#0b74d6;color:white}
.k-push-no{background:rgba(255,255,255,.05);color:#94a3b8}

/* --- SEARCH TRIGGER KEY HINT --- */
.k-search-hint{position:fixed;bottom:30px;right:90px;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.05);color:#64748b;font-size:.65rem;z-index:9993;border:1px solid rgba(255,255,255,.08);display:none}
@media(min-width:768px){.k-search-hint{display:block}}

/* ==============================================
   MOBILE FIXES (URGENT)
   ============================================== */
@media (max-width: 768px) {
  /* Fix container width */
  .container { width: 92% !important; margin: 0 auto !important; padding: 0 !important; }
  
  /* Fix AI Features on Mobile */
  .k-ai-search-box { width: 95% !important; margin-top: 10vh !important; padding: 15px !important; }
  .k-calc-box { width: 95% !important; max-height: 80vh; overflow-y: auto; }
  .k-voice-btn { bottom: 90px !important; right: 20px !important; width: 45px !important; height: 45px !important; }
  .k-visitors { bottom: 10px !important; left: 10px !important; font-size: 0.65rem !important; padding: 6px 10px !important; }
  .k-availability { top: 70px !important; right: 10px !important; padding: 6px 12px !important; font-size: 0.65rem !important; }
  .k-push-prompt { bottom: 10px !important; right: 10px !important; left: 10px !important; max-width: none !important; }
  
  /* Fix overflow issues */
  body, html { overflow-x: hidden !important; width: 100% !important; }
  img { max-width: 100% !important; height: auto !important; }
  
  /* Fix Typography */
  h1 { font-size: 2rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.5rem !important; }
  p { font-size: 0.95rem !important; line-height: 1.6 !important; }
  
  /* Fix Header */
  .header-actions .contact-btn { display: none !important; } /* Hide large button on mobile */
  .logo-container img { height: 32px !important; }
  
  /* Fix Grids */
  .expertises-grid, .mission-grid, .projects-grid, .stats-grid, .fifa-cards, .logo-grid, .footer-wrapper {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* --- CRITICAL MOBILE & OVERFLOW FIXES --- */
body, html {
  max-width: 100vw;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}
main, header, footer {
  overflow-x: hidden;
  max-width: 100vw;
}
/* Ensure reveal animations don't cause horizontal stretching */
.reveal, .reveal-left, .reveal-right, .reveal-up {
  max-width: 100vw;
}
/* Ensure grids collapse properly on mobile */
@media (max-width: 768px) {
  .logo-card img { max-width: 120px !important; }
  .expertises-grid, .mission-grid, .projects-grid, .stats-grid, .fifa-cards, .logo-grid, .footer-wrapper, .k-contact-content {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 1.5rem !important;
  }
}