/* ══════════════════════════════════════
   layout.css
   Styles partagés : pages, sections,
   navbar, footer, hero, phone mock
══════════════════════════════════════ */

/* ══ PAGES ══ */
.page        { display: none; min-height: 100vh; }
.page.active { display: block; }

/* ══ NAV ══ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; height: 68px;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-m);
  transition: box-shadow .3s;
}
nav.scrolled { box-shadow: 0 2px 24px rgba(9, 117, 244, .09); }

.logo {
  font-family: 'Poppins', sans-serif;
  font-weight: 800; font-size: 1.5rem;
  color: var(--text); cursor: pointer; letter-spacing: -.5px;
}
.logo span { color: var(--blue); }

.nav-links  { display: flex; gap: 0; align-items: center; }
.nav-link {
  text-decoration: none; color: var(--gray);
  font-size: .85rem; font-weight: 500;
  padding: .5rem 1rem; border-radius: 8px;
  transition: color .2s, background .2s;
  cursor: pointer; background: none; border: none; font-family: inherit;
}
.nav-link:hover      { color: var(--blue); background: var(--blue-bg); }
.nav-link.active-link{ color: var(--blue); font-weight: 600; }

.nav-right { display: flex; align-items: center; gap: .6rem; }

.lang-toggle { display: flex; gap: .2rem; }
.lang-btn {
  background: transparent; border: 1.5px solid var(--gray-m);
  color: var(--gray); padding: .25rem .65rem; border-radius: 6px;
  cursor: pointer; font-size: .75rem; font-family: inherit;
  font-weight: 600; transition: all .2s;
}
.lang-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }

.nav-cta {
  background: var(--blue); color: #fff;
  font-weight: 700; padding: .55rem 1.3rem;
  border-radius: 9px; text-decoration: none; font-size: .85rem;
  transition: background .2s, transform .2s, box-shadow .2s;
  cursor: pointer; border: none; font-family: inherit;
}
.nav-cta:hover {
  background: var(--blue-d);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(9, 117, 244, .3);
}

/* Hamburger */
.hamburger {
  display: none; flex-direction: column;
  gap: 5px; cursor: pointer; padding: .4rem;
}
.hamburger span {
  width: 22px; height: 2px;
  background: var(--gray); border-radius: 2px; transition: all .3s;
}

/* Menu mobile */
.mobile-menu {
  display: none; position: fixed;
  top: 68px; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid var(--gray-m);
  padding: 1rem 5%; flex-direction: column; gap: .4rem; z-index: 199;
}
.mobile-menu.open { display: flex; }
.mobile-link {
  padding: .7rem 1rem; border-radius: 8px;
  color: var(--gray); font-weight: 500; font-size: .9rem;
  cursor: pointer; transition: background .2s, color .2s;
  border: none; background: transparent;
  font-family: inherit; text-align: left;
}
.mobile-link:hover { background: var(--blue-bg); color: var(--blue); }

/* ══ SECTIONS ══ */
.sec     { padding: 6rem 5%; }
.sec-alt { background: var(--gray-l); }
.sec-blue{ background: var(--blue); }

/* Chip / badge section */
.chip {
  display: inline-block;
  background: var(--blue-bg); color: var(--blue);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .9rem; border-radius: 999px;
  margin-bottom: .9rem; border: 1px solid var(--blue-soft);
}
.chip-white {
  background: rgba(255,255,255,.18);
  color: #fff; border-color: rgba(255,255,255,.25);
}

/* Titres de section */
h2.title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800; letter-spacing: -1px; line-height: 1.1;
}
h2.title em       { font-style: normal; color: var(--blue); }
h2.title.white    { color: #fff; }
h2.title.white em { color: rgba(255,255,255,.75); }

.sub {
  color: var(--gray); font-size: .97rem;
  margin-top: .9rem; max-width: 520px; line-height: 1.75;
}
.sub.white { color: rgba(255,255,255,.8); }

/* ══ HERO ══ */
.hero {
  min-height: 100vh; padding: 7rem 5% 5rem;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  background: #fff;
}
.hero-blob {
  position: absolute; right: -200px; top: -100px;
  width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(ellipse at 30% 40%,
    var(--blue-bg) 0%, rgba(238,245,255,.3) 60%, transparent 80%);
  pointer-events: none;
}
.hero-dots {
  position: absolute; left: 0; bottom: 0;
  width: 300px; height: 300px;
  background-image: radial-gradient(var(--gray-m) 1.5px, transparent 1.5px);
  background-size: 22px 22px; opacity: .5;
  pointer-events: none;
}
.hero-inner {
  display: grid; grid-template-columns: 1fr 420px;
  gap: 4rem; align-items: center;
  width: 100%; position: relative; z-index: 1;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--blue-bg); color: var(--blue);
  padding: .38rem 1rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  margin-bottom: 1.4rem; border: 1px solid var(--blue-soft);
}
.hero-tag-dot {
  width: 7px; height: 7px; background: var(--blue);
  border-radius: 50%; animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -1px;
  animation: fadeUp .5s .1s ease both;
}
.hero h1       { font-family: 'Poppins', sans-serif; color: var(--text); }
.hero h1 em    { font-style: normal; color: var(--blue); }
.hero-sub {
  margin-top: 1.2rem; font-size: 1.05rem;
  color: var(--gray); line-height: 1.75;
  font-weight: 400; max-width: 500px;
}
.hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem;
}

/* Boutons principaux */
.btn-blue {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--blue); color: #fff; font-weight: 700;
  padding: .82rem 1.8rem; border-radius: 11px;
  text-decoration: none; font-size: .95rem;
  font-family: inherit; border: none; cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn-blue:hover {
  background: var(--blue-d); transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(9,117,244,.32);
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: .55rem;
  background: transparent; border: 2px solid var(--blue);
  color: var(--blue); font-weight: 700;
  padding: .8rem 1.8rem; border-radius: 11px;
  text-decoration: none; font-size: .95rem;
  font-family: inherit; cursor: pointer; transition: all .2s;
}
.btn-ghost:hover { background: var(--blue); color: #fff; }

/* Trust bar */
.hero-trust {
  display: flex; align-items: center; gap: 1.4rem;
  margin-top: 2.8rem; flex-wrap: wrap;
}
.trust-avatars { display: flex; }
.trust-av {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2.5px solid #fff; margin-left: -10px;
  background: var(--blue-soft);
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.trust-av:first-child { margin-left: 0; }
.trust-text         { font-size: .82rem; color: var(--gray); }
.trust-text strong  { color: var(--text); }
.hero-rating        { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--gray); }
.stars-gold         { color: #f59e0b; font-size: .9rem; }

/* ══ PHONE MOCK ══ */
.phone-wrap   { position: relative; display: flex; justify-content: center; }
.phone-glow   {
  position: absolute; inset: -30px;
  background: radial-gradient(ellipse at 50% 60%,
    rgba(9,117,244,.12) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.phone-3d {
  width: 240px;
  filter: drop-shadow(0 30px 60px rgba(9,117,244,.2))
          drop-shadow(0 8px 16px rgba(0,0,0,.12));
  animation: levitate 4s ease-in-out infinite;
}
@keyframes levitate {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-14px) rotate(1deg); }
}
.ph {
  width: 100%; aspect-ratio: 9/19.5;
  background: #fff; border-radius: 38px;
  border: 7px solid #1a1a1a;
  box-shadow: inset 0 0 0 1px #333;
  overflow: hidden; display: flex; flex-direction: column;
}
.ph-top    { background: #1a1a1a; height: 28px; display: flex; align-items: center; justify-content: center; }
.ph-notch  { width: 78px; height: 18px; background: #1a1a1a; border-radius: 0 0 14px 14px; }
.ph-body   {
  flex: 1; padding: .75rem;
  overflow: hidden; display: flex; flex-direction: column; gap: .5rem;
}
.ph-logo   { text-align: center; font-family: 'Poppins',sans-serif; font-weight: 800; font-size: .85rem; color: var(--blue); }
.ph-logo span { color: var(--text); }
.ph-search { background: var(--gray-l); border-radius: 8px; padding: .38rem .65rem; font-size: .6rem; color: #aaa; display: flex; align-items: center; gap: .35rem; }
.ph-card   {
  background: #fff; border: 1px solid var(--gray-m);
  border-radius: 10px; padding: .55rem .6rem;
  display: flex; align-items: center; gap: .55rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.ph-av  { width: 30px; height: 30px; border-radius: 50%; background: var(--blue-bg); display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.ph-nm  { font-size: .62rem; font-weight: 700; }
.ph-rl  { font-size: .54rem; color: var(--gray); }
.ph-st  { font-size: .52rem; color: #f59e0b; }
.ph-bd  { margin-left: auto; font-size: .52rem; padding: .12rem .38rem; border-radius: 999px; font-weight: 700; }
.bd-g   { background: #dcfce7; color: #16a34a; }
.bd-b   { background: var(--blue-bg); color: var(--blue); }
.ph-banner { background: var(--blue); border-radius: 8px; padding: .45rem .6rem; color: #fff; font-size: .58rem; font-weight: 600; text-align: center; }

/* ══ STATS BAND ══ */
.stats-band  { background: var(--blue); padding: 2.8rem 5%; }
.stats-grid  { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; text-align: center; }
.stat-n      { font-family: 'Poppins',sans-serif; font-size: 2.8rem; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; }
.stat-plus   { color: rgba(255,255,255,.55); }
.stat-l      { color: rgba(255,255,255,.72); font-size: .83rem; margin-top: .3rem; }

/* ══ STAT ITEMS (page techniciens) ══ */
.stat-item {
  background: #fff; border: 1.5px solid var(--blue);
  border-radius: var(--r); padding: .9rem 1.4rem; min-width: 130px;
}
.stat-num   { font-family: 'Poppins',sans-serif; font-weight: 800; }
.stat-label { font-size: .75rem; color: var(--gray); margin-top: .2rem; }

/* ══ STEPS (comment ça marche) ══ */
.steps { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1.5rem; margin-top: 3.5rem; }
.step  {
  position: relative; padding: 2rem 1.6rem;
  background: #fff; border: 1.5px solid var(--gray-m);
  border-radius: var(--r2);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.step:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-3px); }
.step-num   { font-family: 'Poppins',sans-serif; font-size: 3.5rem; font-weight: 800; color: var(--blue-soft); line-height: 1; margin-bottom: .8rem; }
.step-icon  { width: 48px; height: 48px; background: var(--blue-bg); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; }
.step-title { font-weight: 700; font-size: 1rem; margin-bottom: .4rem; }
.step-desc  { color: var(--gray); font-size: .86rem; line-height: 1.6; }
.step-arrow { position: absolute; right: -20px; top: 50%; transform: translateY(-50%); color: var(--blue-soft); font-size: 1.5rem; z-index: 1; }

/* ══ DOWNLOAD ══ */
.dl-inner {
  background: var(--blue); border-radius: var(--r3);
  padding: 4rem; display: flex; align-items: center;
  gap: 3rem; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.dl-inner::after  { content:''; position:absolute; right:-100px; top:-100px; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,.05); }
.dl-inner::before { content:''; position:absolute; left:-80px; bottom:-80px; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.04); }
.dl-text     { flex: 1; min-width: 240px; position: relative; z-index: 1; }
.store-row   { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.store-btn   {
  display: flex; align-items: center; gap: .8rem;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.28);
  padding: .82rem 1.3rem; border-radius: 13px;
  text-decoration: none; color: #fff;
  transition: background .2s, transform .2s;
  min-width: 158px; font-family: inherit;
}
.store-btn:hover { background: rgba(255,255,255,.25); transform: translateY(-2px); }
.store-ico   { font-size: 1.7rem; flex-shrink: 0; }
.store-sub   { font-size: .6rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .06em; }
.store-name  { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .4rem; }
.store-chip  { font-size: .55rem; background: rgba(255,255,255,.18); color: #fff; padding: .1rem .42rem; border-radius: 999px; font-weight: 700; }
.qr-box      {
  width: 110px; height: 110px;
  background: rgba(255,255,255,.14); border: 2px dashed rgba(255,255,255,.3);
  border-radius: 14px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: .65rem; color: rgba(255,255,255,.65);
  text-align: center; gap: .4rem; position: relative; z-index: 1; padding: .5rem;
}
.qr-box .qi { font-size: 1.8rem; }

/* ══ FOOTER ══ */
footer { background: var(--gray-d); color: rgba(255,255,255,.7); padding: 4rem 5% 2rem; }
.footer-top  {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem; margin-bottom: 3rem;
}
.footer-brand h3      { font-family: 'Poppins',sans-serif; font-weight: 800; font-size: 1.4rem; color: #fff; margin-bottom: .8rem; }
.footer-brand h3 span { color: var(--blue); }
.footer-brand p       { font-size: .85rem; line-height: 1.7; max-width: 260px; }
.footer-col h4 {
  color: #fff; font-weight: 700; font-size: .88rem;
  margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .08em;
}
.footer-col a {
  display: block; font-size: .84rem; color: rgba(255,255,255,.6);
  text-decoration: none; margin-bottom: .55rem;
  transition: color .2s; cursor: pointer;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 1rem;
}
.footer-bottom p { font-size: .8rem; }
.footer-badges   { display: flex; gap: .8rem; flex-wrap: wrap; }
.f-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px; padding: .3rem .8rem;
  font-size: .72rem; color: rgba(255,255,255,.6);
}