:root {
  --gold:#C8922A; --gold-lt:#F5C96E; --gold-bg:#FFF8EC; --gold-dim:rgba(200,146,42,.12);
  --teal:#2A9E8E; --teal-bg:#EDF9F7;
  --green:#2E7D52; --green-bg:#EDF7F0;
  --text:#111710; --text-2:#4A5444; --text-3:#8A9284;
  --bg:#FAFAF7; --white:#FFFFFF; --border:#E4E4DC;
  --r:10px; --r-lg:18px; --r-xl:28px;
  --s1:0 2px 12px rgba(15,21,8,.05);
  --s2:0 8px 32px rgba(15,21,8,.09);
  --s3:0 20px 60px rgba(15,21,8,.13);
  --font:-apple-system,'Manrope',system-ui,sans-serif;
  --serif:'Manrope','Times New Roman',serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none}
 
/* ══ NAV — plein écran → pilule flottante ══════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:64px; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(250,250,247,.92);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--border);
  border-radius:0;
  transition:top .4s, left .4s, right .4s, border-radius .4s, box-shadow .4s, border-color .4s;
}
nav.floating {
  top:12px; left:14px; right:14px;
  border-radius:20px;
  border-color:rgba(228,228,220,.7);
  box-shadow:0 8px 32px rgba(15,21,8,.10), 0 2px 8px rgba(15,21,8,.06);
}
.logo{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:9px}
.logo-badge{width:30px;height:30px;background:var(--gold);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 8px rgba(200,146,42,.35)}
.nav-links{display:flex;gap:2px}
.nav-links a{padding:6px 13px;border-radius:100px;font-size:13px;font-weight:500;color:var(--text-2);transition:all .2s}
.nav-links a:hover{background:var(--border);color:var(--text)}
.nav-right{display:flex;gap:8px;align-items:center}
.nav-outline{padding:7px 16px;border-radius:100px;border:1.5px solid var(--border);color:var(--text-2);font-size:13px;font-weight:500;transition:all .2s}
.nav-outline:hover{border-color:var(--gold);color:var(--gold)}
.nav-cta{padding:8px 18px;border-radius:100px;background:var(--text);color:white;font-size:13px;font-weight:600;transition:all .2s;box-shadow:0 2px 8px rgba(15,21,8,.2)}
.nav-cta:hover{background:var(--gold);box-shadow:0 4px 14px rgba(200,146,42,.4)}
.nav-sim{padding:8px 18px;border-radius:100px;background:rgba(200,146,42,.4);color:black;font-size:13px;font-weight:600;transition:all .2s;box-shadow:0 2px 8px rgba(15,21,8,.2)}
.nav-sim:hover{background:var(--gold);box-shadow:0 4px 14px rgba(234, 201, 140, 0.4)}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-btn {
  padding: 6px 13px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all .2s;
}
.nav-dropdown-btn:hover {
  background: var(--border);
  color: var(--text);
}

.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.nav-dropdown-arrow {
  font-size: 10px;
  transition: transform .2s;
}
.nav-dropdown:hover .nav-dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 8px 32px rgba(15,21,8,.10);
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: dropIn .15s ease;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.nav-dropdown-menu a {
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 9px;
  transition: all .15s;
}
.nav-dropdown-menu a:hover {
  background: var(--gold-bg);
  color: var(--gold);
}
 
/* ══ HERO ═══════════════════════════════════════════════════ */
.hero {
  position:relative; min-height:100vh;
  overflow:hidden;
  display:flex; align-items:center;
}
 
/* Slides photos (s'empilent, opacity contrôlée) */
.hero-slides { position:absolute; inset:0; }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1s ease;
  background-color:#2A3820;
}
.hero-slide.active { opacity:1; }
 
/* Overlay gradient : foncé à gauche pour lisibilité, transparent à droite */
.hero-overlay {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(10,16,6,.88) 0%,
    rgba(10,16,6,.72) 42%,
    rgba(10,16,6,.25) 70%,
    rgba(10,16,6,.05) 100%);
}
/* Découpe diagonale bas */
.hero-diag {
  position:absolute; bottom:-2px; left:0; right:0; z-index:3;
  height:90px; background:var(--bg); pointer-events:none;
  clip-path:polygon(0 55%,100% 0,100% 100%,0 100%);
}
 
.hero-inner {
  position:relative; z-index:2;
  width:100%; max-width:1280px; margin:0 auto;
  padding:0 72px;
  display:grid; grid-template-columns:1fr 340px;
  align-items:center; gap:56px; min-height:100vh;
}
 
/* ── Panel KNX-style ── */
.panel {
  background:rgba(12,18,8,.72);
  backdrop-filter:blur(28px) saturate(1.8);
  -webkit-backdrop-filter:blur(28px) saturate(1.8);
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  box-shadow:0 24px 64px rgba(0,0,0,.4);
  overflow:hidden;
  animation:panelIn .9s .3s both cubic-bezier(.2,.8,.2,1);
}
@keyframes panelIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
 
.panel-head {
  padding:14px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:space-between;
}
.panel-logo { font-family:var(--serif); font-size:15px; font-weight:700; color:var(--gold-lt); display:flex; align-items:center; gap:8px; }
.panel-online { display:flex; align-items:center; gap:5px; font-size:10px; color:rgba(255,255,255,.4); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.panel-dot { width:6px; height:6px; border-radius:50%; background:#4ADE80; box-shadow:0 0 6px #4ADE80; animation:pls 2s infinite; }
 
.panel-scene { padding:10px 18px 12px; border-bottom:1px solid rgba(255,255,255,.07); }
.panel-scene-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.3); margin-bottom:5px; font-weight:700; }
.panel-scene-val { font-size:13px; font-weight:600; color:white; display:flex; align-items:center; gap:7px; }
 
.panel-btns { padding:12px 14px; display:flex; flex-direction:column; gap:7px; border-bottom:1px solid rgba(255,255,255,.07); }
.pbtn {
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);
  cursor:pointer; transition:all .2s; text-align:left;
  font-family:var(--font);
}
.pbtn:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.14); }
.pbtn.active { background:rgba(200,146,42,.18); border-color:rgba(200,146,42,.4); }
.pbtn-icon { font-size:18px; flex-shrink:0; width:24px; text-align:center; }
.pbtn-body { flex:1; }
.pbtn-name { font-size:12px; font-weight:600; color:rgba(255,255,255,.55); line-height:1.2; }
.pbtn.active .pbtn-name { color:var(--gold-lt); }
.pbtn-sub { font-size:10px; color:rgba(255,255,255,.3); margin-top:1px; }
.pbtn.active .pbtn-sub { color:rgba(200,146,42,.6); }
 
/* Notification flottante qui apparaît selon l'état */
.panel-notif {
  margin:10px 14px 14px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(42,158,142,.15);
  border:1px solid rgba(42,158,142,.25);
  display:flex; align-items:center; gap:9px;
  min-height:46px;
  transition:all .4s;
}
.panel-notif-icon { font-size:16px; flex-shrink:0; }
.panel-notif-text { font-size:11px; color:rgba(255,255,255,.7); line-height:1.45; }
.panel-notif-text strong { color:white; display:block; font-size:11px; margin-bottom:1px; }
.hero-text{transform: translateY(-50px);}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--gold-bg);border:1px solid rgba(200,146,42,.2);padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px;margin-right:auto;}
.hero-eyebrow span{width:5px;height:5px;background:var(--gold);border-radius:50%;animation:pls 2s infinite}
@keyframes pls{0%,100%{opacity:1}50%{opacity:.3}}
h1{font-family:var(--serif);font-size:clamp(34px,4vw,58px);font-weight:700;line-height:1.1;color:var(--text);margin-bottom:16px}
h1 em{color:var(--gold)}
.hero-p{font-size:16px;color:var(--text-2);line-height:1.75;margin-bottom:28px;max-width:480px}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.btn-gold{background:var(--gold);color:white;padding:12px 26px;border-radius:100px;font-size:14px;font-weight:600;box-shadow:0 4px 18px rgba(200,146,42,.35);transition:all .2s;display:inline-block}
.btn-gold:hover{background:#B07A1A;transform:translateY(-1px)}
.btn-outline{background:var(--white);color:var(--text-2);padding:12px 22px;border-radius:100px;border:1.5px solid var(--border);font-size:14px;font-weight:500;transition:all .2s;display:inline-block}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}
.hero-tags{display:flex;gap:16px;flex-wrap:wrap}
.hero-tag{font-size:12px;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:5px}
.hero-tag::before{content:'✓';color:var(--teal);font-weight:700;font-size:11px}
.slot-outer { overflow:hidden; height:1.2em; }
.slot-inner { display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.4,0,.2,1); }
.slot-word  { height:1.2em; display:flex; align-items:center; color:#D4A853; font-style:italic; }
 
/* ══ BROWSER MOCKUP ════════════════════════════════════════ */
.browser-wrap {
  position:relative;
  /* perspective 3D — incliné comme les SaaS sites */
  transform:perspective(1400px) rotateX(4deg) rotateY(-6deg);
  transform-origin:center center;
  filter:drop-shadow(0 24px 64px rgba(15,21,8,.18));
  animation:mockFloat 6s ease-in-out infinite;
}
@keyframes mockFloat{0%,100%{transform:perspective(1400px) rotateX(4deg) rotateY(-6deg) translateY(0)}50%{transform:perspective(1400px) rotateX(4deg) rotateY(-6deg) translateY(-8px)}}
 
.browser {
  background:var(--white); border-radius:14px;
  border:1px solid rgba(200,200,190,.6);
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}
/* Chrome bar */
.browser-chrome {
  background:#F2F0EA; padding:10px 14px 0;
  border-bottom:1px solid rgba(200,200,190,.5);
  display:flex; flex-direction:column; gap:8px;
}
.chrome-top{display:flex;align-items:center;gap:10px}
.chrome-dots{display:flex;gap:5px}
.chrome-dot{width:11px;height:11px;border-radius:50%}
.chrome-dot.r{background:#FF5F57} .chrome-dot.y{background:#FEBC2E} .chrome-dot.g{background:#28C840}
.chrome-url {
  flex:1; height:24px; background:rgba(255,255,255,.8);
  border:1px solid rgba(200,200,190,.5); border-radius:6px;
  display:flex; align-items:center; padding:0 10px;
  font-size:10px; color:var(--text-3);
  overflow:hidden; white-space:nowrap;
}
/* Tabs */
.browser-tabs {
  display:flex; gap:2px; padding:0 0 0 2px;
  overflow-x:auto; scrollbar-width:none;
}
.browser-tabs::-webkit-scrollbar{display:none}
.btab {
  padding:6px 14px; font-size:10px; font-weight:600;
  color:var(--text-3); border-radius:8px 8px 0 0;
  cursor:pointer; white-space:nowrap; border:none;
  background:transparent; font-family:var(--font);
  transition:all .2s; border-top:2px solid transparent;
}
.btab:hover{color:var(--text);background:rgba(255,255,255,.5)}
.btab.active{color:var(--gold);background:var(--white);border-top-color:var(--gold)}
/* Viewport iframe */
.browser-viewport {
  height:380px; position:relative; overflow:hidden; background:#f5f5f0;
}
.browser-viewport iframe {
  width:100%; height:100%; border:none;
  display:block;
  /* Scale down pour que tout rentre */
  transform-origin:top left;
}
.iframe-overlay {
  position:absolute; inset:0; z-index:2;
  cursor:pointer; background:transparent;
}
.iframe-overlay:hover{background:rgba(200,146,42,.04)}
/* Loader dans l'iframe */
.iframe-loader {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; background:#f5f5f0;
}
.iframe-loader-spin{width:28px;height:28px;border:2.5px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.iframe-loader-text{font-size:11px;color:var(--text-3)}
 
/* ══ STATS inline (light) ══════════════════════════════════ */
.stats-row {
  background:var(--white); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:20px 80px;
  display:flex; align-items:center; justify-content:center; gap:0;
}
.stat-sep{width:1px;height:36px;background:var(--border);margin:0 40px;flex-shrink:0}
.stat-item{display:flex;align-items:center;gap:12px}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.si-gold{background:var(--gold-bg)} .si-teal{background:var(--teal-bg)} .si-green{background:var(--green-bg)}
.stat-num{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--text);line-height:1}
.stat-lbl{font-size:11px;color:var(--text-3);line-height:1.3;margin-top:2px}
 
/* ══ EN BREF ════════════════════════════════════════════════ */
.en-bref {
  background:var(--bg); padding:52px 80px;
  display:flex; align-items:flex-start; gap:20px;
  max-width:1100px; margin:0 auto;
}
.en-bref-badge {
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background:var(--gold-bg); border:1px solid rgba(200,146,42,.2);
  display:flex; align-items:center; justify-content:center; font-size:18px; margin-top:2px;
}
.en-bref-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--gold);margin-bottom:8px}
.en-bref-text{font-size:15px;color:var(--text-2);line-height:1.75}
.en-bref-text strong{color:var(--text);font-weight:600}
 
/* ══ TYPES ══════════════════════════════════════════════════ */
.types-bar{background:var(--white);border-bottom:1px solid var(--border);padding:14px 80px;display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
.types-bar-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-right:22px}
.type-chip{padding:6px 14px;border-radius:100px;font-size:12px;font-weight:500;color:var(--text-2);margin:3px;border:1px solid var(--border);background:var(--bg);transition:all .2s}
.type-chip:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-bg)}
 
/* ══ SECTIONS ═══════════════════════════════════════════════ */
.section{padding:80px 80px}
.section-inner{max-width:1200px;margin:0 auto}
.section.tinted{background:var(--bg)}
.section.white{background:var(--white);border-top:1px solid var(--border)}
 
.sec-num{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.sec-num::before{content:'';width:22px;height:1.5px;background:var(--gold)}
.sec-num.center{justify-content:center}
.sec-num.center::before{display:none}
h2{font-family:var(--serif);font-size:clamp(26px,3.5vw,44px);font-weight:700;line-height:1.15;color:var(--text);margin-bottom:14px}
h2 em{color:var(--gold)}
.sec-sub{font-size:15px;color:var(--text-2);line-height:1.7;max-width:520px}
 
/* ── Why cards ── */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--border);margin-top:48px}
.why-card{background:var(--white);padding:28px 24px;position:relative;overflow:hidden;transition:background .2s}
.why-card:hover{background:var(--gold-bg)}
.why-bg-num{position:absolute;top:-10px;right:12px;font-family:var(--serif);font-size:60px;font-weight:700;color:var(--border);line-height:1;pointer-events:none;transition:color .3s}
.why-card:hover .why-bg-num{color:rgba(200,146,42,.1)}
.why-icon{width:42px;height:42px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:12px;transition:background .2s}
.why-card:hover .why-icon{background:white}
.why-title{font-size:14px;font-weight:700;margin-bottom:6px}
.why-desc{font-size:13px;color:var(--text-2);line-height:1.6}
 
/* ── Steps ── */
.steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:52px;position:relative}
.step{position:relative}
.step-bg{font-family:var(--serif);font-size:72px;font-weight:700;color:var(--border);line-height:1;margin-bottom:-12px;transition:color .3s}
.step:hover .step-bg{color:rgba(200,146,42,.1)}
.step-dot{width:44px;height:44px;border-radius:50%;border:2px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;z-index:1;position:relative;transition:all .2s}
.step:hover .step-dot{border-color:var(--gold);background:var(--gold-bg)}
.step-title{font-size:15px;font-weight:700;margin-bottom:6px}
.step-desc{font-size:13px;color:var(--text-2);line-height:1.65}
 
/* ── Split sections ── */
.split{overflow:hidden;background:var(--bg);padding:0;border-top:1px solid var(--border)}
.split-grid{display:grid;grid-template-columns:1fr 1fr;min-height:580px}
.split-img{position:relative;min-height:580px}
.split-content{display:flex;flex-direction:column;justify-content:center;padding:64px 60px}
 
/* ── Feature items ── */
.feat-list-carre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 24px;
}
.feat-list{display:flex;flex-direction:column;gap:9px;margin-top:24px}
.feat-item{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--border);transition:all .2s;opacity:0;transform:translateX(-12px)}
.feat-item.rev{transform:translateX(12px)}
.feat-item.vis{opacity:1;transform:none}
.feat-item:hover{border-color:var(--gold);box-shadow:var(--s1)}
.feat-ico{width:36px;height:36px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.fi-g{background:var(--gold-bg)} .fi-t{background:var(--teal-bg)} .fi-v{background:var(--green-bg)}
.feat-title{font-size:13px;font-weight:700;margin-bottom:2px}
.feat-desc{font-size:12px;color:var(--text-2);line-height:1.55}
 
/* ── Testimonials ── */
.temos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.temo{background:var(--white);border-radius:var(--r-lg);padding:24px;border:1px solid var(--border);box-shadow:var(--s1);opacity:0;transform:translateY(14px);transition:all .5s}
.temo.vis{opacity:1;transform:none}
.temo:hover{box-shadow:var(--s2);border-color:rgba(200,146,42,.2)}
.temo-stars{color:var(--gold);font-size:12px;margin-bottom:10px;letter-spacing:1.5px}
.temo-text{font-size:13px;color:var(--text-2);line-height:1.75;margin-bottom:16px;font-style:italic}
.temo-author{display:flex;align-items:center;gap:10px}
.temo-avatar{width:36px;height:36px;border-radius:50%;background:var(--gold-bg);display:flex;align-items:center;justify-content:center;font-size:18px}
.temo-name{font-size:13px;font-weight:600}
.temo-role{font-size:11px;color:var(--text-3)}
 
/* ══ PRICING (light) ════════════════════════════════════════ */
.price-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px;flex-wrap:wrap;gap:20px}
.price-toggle{display:flex;align-items:center;gap:10px}
.tgl-lbl{font-size:13px;color:var(--text-3);font-weight:500}
.tgl{width:46px;height:24px;border-radius:100px;background:var(--border);position:relative;cursor:pointer;transition:background .2s}
.tgl.on{background:var(--gold)}
.tgl-k{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:white;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.tgl.on .tgl-k{left:24px}
.eco{background:var(--green-bg);color:var(--green);padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700}
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pc{border-radius:var(--r-xl);padding:26px 22px;display:flex;flex-direction:column;border:1.5px solid var(--border);background:var(--white);position:relative;overflow:hidden;opacity:0;transform:translateY(18px);transition:border-color .2s;box-shadow:var(--s1)}
.pc.vis{animation:pcIn .5s ease forwards}
@keyframes pcIn{to{opacity:1;transform:none}}
.pc:hover{border-color:rgba(200,146,42,.3);box-shadow:var(--s2)}
.pc.star{border-color:var(--gold);box-shadow:0 4px 24px rgba(200,146,42,.15)}
.pc-crown{position:absolute;top:16px;right:16px;background:var(--gold);color:white;font-size:10px;font-weight:700;padding:3px 10px;border-radius:100px}
.pc-name{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--text);margin-bottom:3px}
.pc-tag{font-size:11px;color:var(--text-3);margin-bottom:18px;line-height:1.4}
.pc-price{display:flex;align-items:baseline;gap:3px;margin-bottom:3px}
.pc-n{font-family:var(--serif);font-size:40px;font-weight:700;color:var(--gold);line-height:1;transition:all .3s}
.pc-u{font-size:12px;color:var(--text-3)}
.pc-ms{font-size:10px;color:var(--text-3);margin-bottom:18px}
.pc-sep{height:1px;background:var(--border);margin-bottom:16px}
.pc-feats{flex:1;display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.pc-f{font-size:12px;color:var(--text-2);display:flex;gap:7px;line-height:1.4}
.pc-f::before{content:'✓';color:var(--teal);font-weight:700;flex-shrink:0}
.pc-f.off{color:var(--text-3)}
.pc-f.off::before{content:'—';color:var(--border)}
.pc-cta{display:block;text-align:center;padding:10px;border-radius:100px;font-size:13px;font-weight:600;border:1.5px solid var(--border);color:var(--text-2);background:transparent;cursor:pointer;transition:all .2s;font-family:var(--font)}
.pc-cta:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-bg)}
.pc.star .pc-cta{background:var(--gold);border-color:var(--gold);color:white}
.pc.star .pc-cta:hover{background:#B07A1A}
 
.included{max-width:860px;margin:40px auto 0;background:var(--bg);border-radius:var(--r-xl);border:1px solid var(--border);padding:24px 28px}
.inc-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);text-align:center;margin-bottom:16px}
.inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.inc-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2)}
.inc-item::before{content:'✓';color:var(--teal);font-weight:700;flex-shrink:0}
 
/* ══ FAQ ════════════════════════════════════════════════════ */
.faq-list{margin-top:44px;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;cursor:pointer;font-size:14px;font-weight:600;background:var(--white);gap:16px;transition:background .2s;user-select:none}
.faq-q:hover,.faq-item.open .faq-q{background:var(--gold-bg);color:var(--gold)}
.faq-arr{flex-shrink:0;color:var(--text-3);font-size:18px;transition:transform .3s,color .2s;font-weight:300}
.faq-item.open .faq-arr{transform:rotate(45deg);color:var(--gold)}
.faq-a{display:none;padding:0 24px 18px;font-size:13px;color:var(--text-2);line-height:1.75;background:var(--gold-bg)}
.faq-item.open .faq-a{display:block}
 
/* ══ CTA ════════════════════════════════════════════════════ */
.cta-sec {
  background:var(--white);padding:72px 80px;text-align:center;position:relative;overflow:hidden;}
.cta-sec::before{content:'';position:absolute;font-size:300px;opacity:.07;right:-40px;top:50%;transform:translateY(-50%);pointer-events:none;animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-50%)}50%{transform:translateY(-53%)}}
.cta-sec h2{font-size:clamp(26px,4vw,50px);position:relative;margin-bottom:10px}
.cta-sec p{font-size:16px;margin-bottom:32px;position:relative}
.cta-btns{display:flex;gap:12px;justify-content:center;position:relative;flex-wrap:wrap}
.btn-white{background:white;color:var(--gold);padding:13px 30px;border-radius:100px;font-size:14px;font-weight:700;display:inline-block;box-shadow:0 4px 18px rgba(15,21,8,.15);transition:all .2s}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(15,21,8,.2)}
.btn-wh-outline{background:rgba(255,255,255,.2);color:white;padding:13px 24px;border-radius:100px;font-size:14px;font-weight:600;display:inline-block;border:1.5px solid rgba(255,255,255,.4);backdrop-filter:blur(8px);transition:all .2s}
.btn-wh-outline:hover{background:rgba(255,255,255,.32)}
.btn-black{background:white;color:black;padding:13px 30px;border-radius:100px;font-size:14px;font-weight:700;display:inline-block;box-shadow:0 4px 18px rgba(15,21,8,.15);transition:all .2s}

/* ══ FOOTER (light) ═════════════════════════════════════════ */
footer{background:var(--white);border-top:1px solid var(--border);padding:56px 80px 32px;display:flex;flex-direction:column;}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--border)}
.footer-logo{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.footer-desc{font-size:12px;color:var(--text-3);line-height:1.7;max-width:240px;margin-bottom:20px}
.footer-newsletter label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-bottom:7px}
.nl-row{display:flex;gap:6px}
.nl-input{flex:1;padding:8px 14px;border-radius:100px;background:var(--bg);border:1px solid var(--border);color:var(--text);font-size:12px;font-family:var(--font);outline:none;transition:border-color .2s}
.nl-input:focus{border-color:var(--gold)}
.nl-btn{padding:8px 16px;border-radius:100px;background:var(--gold);color:white;font-size:12px;font-weight:600;border:none;cursor:pointer;font-family:var(--font);transition:all .2s}
.nl-btn:hover{background:#B07A1A}
.footer-col h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);margin-bottom:12px}
.footer-col a{display:block;font-size:12px;color:var(--text-2);margin-bottom:8px;transition:color .2s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-3);width:100%;}
.footer-bottom-links{display:flex;gap:18px}
.footer-bottom-links a{color:var(--text-3);transition:color .2s}
.footer-bottom-links a:hover{color:var(--gold)}
 
/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(16px);transition:all .6s ease}
.reveal.vis{opacity:1;transform:none}
 
/* ═══════════════════════════════════════════════════
   CAVALIO — CSS Mobile complet et propre
   Remplace toute la section responsive existante
   ═══════════════════════════════════════════════════ */

/* ── Empêcher débordement global ── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ── Hamburger caché par défaut (desktop) ── */
.nav-hamburger { display: none; }
.nav-close     { display: none; }

/* ── Nav de base ── */
#nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 64px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* ── Nav flottante ── */
#nav.floating {
  position: fixed;
  top: 10px;
  left: 12px;
  right: 12px;
  width: auto;
  max-width: calc(100% - 24px);
  border-radius: 18px;
  border: 1px solid rgba(228,228,220,.7);
  box-shadow: 0 8px 32px rgba(15,21,8,.10);
  background: rgba(250,250,247,.95);
  backdrop-filter: blur(20px);
  box-sizing: border-box;
}

/* ════════════════════════════════
   TABLETTE — 1100px
════════════════════════════════ */
@media(max-width:1100px){
  .hero-inner  { padding:0 40px; gap:32px; grid-template-columns:1fr 300px }
  .section     { padding:60px 40px }
  .stats-row   { padding:20px 40px; gap:0; flex-wrap:wrap }
  .stat-sep    { margin:0 24px }
  .en-bref     { padding:44px 40px }
  .types-bar   { padding:14px 40px }
  footer       { padding:48px 40px 28px }
}

@media(max-width:1024px){
  .hero-inner         { grid-template-columns:1fr 280px; padding:0 36px; gap:28px }
  .panel-btns .pbtn   { padding:9px 12px }
  .pbtn-icon          { font-size:16px }
}

/* ════════════════════════════════
   MOBILE — 900px
════════════════════════════════ */
/* ── Desktop — s'assurer que le panel est visible ── */
@media(max-width:900px){

  /* ── Nav ── */
  nav { padding: 0 16px; background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; }
  #nav.floating { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; top: 0; left: 0; right: 0; border-radius: 0; }
  .nav-links { display: none; }
  .nav-right  { display: none !important; }

  /* ── Hamburger rond ── */
  .nav-hamburger {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    margin-top: 20px;
    margin-left: auto;
    z-index: 1002;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #FAFAF7;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .nav-hamburger span {
    display: block;
    width: 20px; height: 2px;
    background: #000000;
    border-radius: 2px;
    transition: all .3s;
  }
  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── Menu slide ── */
  .nav-links {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background: #FAFAF7;
    z-index: 1000;
    padding: 90px 32px 40px;
    overflow-y: auto;
    display: flex !important;
    flex-direction: column;
    gap: 0;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    visibility: hidden;
  }
  .nav-links.open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
  .nav-links a {
    font-size: 20px; font-weight: 700;
    color: #111710 !important;
    padding: 16px 0;
    border-bottom: 1px solid #E4E4DC;
    display: block;
  }
  .nav-links .nav-dropdown-btn {
    font-size: 20px; font-weight: 700;
    color: #111710; padding: 16px 0;
    width: 100%; text-align: left;
    border: none; border-bottom: 1px solid #E4E4DC;
    background: none; cursor: pointer; font-family: inherit;
  }
  .nav-links .nav-dropdown-menu {
    position: static !important;
    display: flex !important;
    flex-direction: column;
    background: none; box-shadow: none; border: none;
    padding-left: 20px; transform: none !important;
  }
  .nav-links .nav-dropdown-menu a {
    font-size: 16px; font-weight: 500;
    color: #4A5444 !important;
    padding: 12px 0;
    border-bottom: 1px solid #E4E4DC;
  }
  .nav-mobile-cta {
    margin-top: 32px; padding-top: 24px;
    border-top: 1px solid #E4E4DC;
    display: flex; flex-direction: column; gap: 12px;
  }
  .nav-mobile-cta a {
    display: block !important; text-align: center;
    padding: 14px !important; border-radius: 100px;
    font-size: 15px; font-weight: 600;
    border-bottom: none !important;
  }
  .nav-mobile-cta .nav-sim { background: #F5F0E8; color: #C8922A; border: 1.5px solid #C8922A !important; }
  .nav-mobile-cta .nav-cta { background: #111710; color: #fff !important; }

  /* ── Hero ── */
  .hero { min-height: 100svh; }
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding: 10px 20px 60px !important;
    gap: 0 !important;
    align-items: flex-start !important;
    width: 100% !important;
  }
  .hero-text {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }
  .panel { display: none !important; }

  .hero-text > div[style*="bottom:-130px"] {
    position: relative !important;
    bottom: auto !important; left: auto !important;
    margin-bottom: 50px;
    order: -1;
  }

  .hero-eyebrow {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
  .hero-p { font-size: 14px !important; }
  .hero-btns { flex-direction: column !important; gap: 10px !important; }
  .hero-btns a { text-align: center; display: block; }
  .hero-tags { flex-wrap: wrap; gap: 8px; }

  /* ── Sections ── */
  .stats-row   { flex-direction: column; padding: 24px; gap: 16px; }
  .stat-sep    { width: 100%; height: 1px; margin: 4px 0; }
  .why-grid    { grid-template-columns: 1fr 1fr; }
  .steps-row   { grid-template-columns: 1fr; gap: 28px; }
  .steps-row::before { display: none; }
  .split-grid  { grid-template-columns: 1fr; }
  .split-img   { min-height: 240px; }
  .feat-list   { grid-template-columns: 1fr; }
  .temos       { grid-template-columns: 1fr; }
  .pgrid       { grid-template-columns: 1fr; }
  .inc-grid    { grid-template-columns: 1fr 1fr; }
  .section     { padding: 48px 20px; }
  .cta-sec     { padding: 52px 24px; }
  .en-bref     { padding: 32px 20px; }
  .types-bar   { padding: 12px 20px; }

  /* ── Footer ── */
  footer { padding: 40px 20px 24px; overflow: hidden; max-width: 100%; box-sizing: border-box; }
  .footer-top  { grid-template-columns: 1fr !important; gap: 24px; }
  .footer-col  { width: 100%; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ── Desktop — s'assurer que le panel est visible ── */
@media(min-width:901px){
  .nav-hamburger { display: none !important; }
  .nav-close     { display: none !important; }
  .nav-mobile-cta{ display: none !important; }
  .nav-overlay   { display: none !important; }

  .panel { display: block !important; }
  .hero-text { transform: translateY(-50px); }

  .hero-inner {
    grid-template-columns: 1fr 420px;
    align-items: center;
  }

  .hero-text > div[style*="bottom:-130px"] {
    position: absolute !important;
    bottom: -130px !important;
    left: 0 !important;
  }
}