/* ── Font fallbacks — site lisible même sans Google Fonts ── */
:root {
  --font-display: 'Outfit', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}
.font-display { font-family: var(--font-display) !important; }
body { font-family: var(--font-body); }


:root{--orange:#F14E1D;--orange-h:#d63d12;--violet:#A3167D;--font-d:'Outfit',sans-serif;--font-b:'Inter',sans-serif;--font-m:'JetBrains Mono',monospace}
html,body{font-family:var(--font-b);background:#f0ede8;overflow-x:hidden;color:#1e293b;-webkit-font-smoothing:antialiased}
.font-display{font-family:var(--font-d)}.font-mono{font-family:var(--font-m)}
.dot-grid{background-size:22px 22px;background-image:radial-gradient(rgba(100,90,80,0.18) 1px,transparent 1px)}
.glass-card{background:rgba(255,255,255,.30);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid rgba(255,255,255,.55);box-shadow:0 20px 60px rgba(15,23,42,.07),inset 0 1.5px 0 rgba(255,255,255,.75)}
.site-nav{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:50;width:95%;max-width:56rem;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;background:rgba(255,252,248,.55);backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);border:1px solid rgba(255,255,255,.70);border-radius:9999px;box-shadow:0 4px 24px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.9);transition:all .5s}
.site-nav.scrolled{background:rgba(255,252,248,.72);box-shadow:0 8px 32px rgba(15,23,42,.09),inset 0 1px 0 rgba(255,255,255,.95);padding:8px 20px}
@keyframes orbA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-50px) scale(1.2)}66%{transform:translate(-40px,80px) scale(.85)}}
@keyframes orbB{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-70px,60px) scale(.9)}66%{transform:translate(50px,-40px) scale(1.15)}}
@keyframes orbC{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(50px,40px) scale(1.1)}66%{transform:translate(-50px,30px) scale(.9)}}
@keyframes rotR{to{transform:rotate(360deg)}}@keyframes rotL{to{transform:rotate(-360deg)}}
@keyframes fU{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes fD{0%,100%{transform:translateY(0)}50%{transform:translateY(15px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}
@keyframes bp1{0%,100%{height:65%}50%{height:20%}}@keyframes bp2{0%,100%{height:85%}50%{height:40%}}@keyframes bp3{0%,100%{height:55%}50%{height:15%}}@keyframes bp4{0%,100%{height:92%}50%{height:50%}}@keyframes bp5{0%,100%{height:70%}50%{height:30%}}@keyframes bp6{0%,100%{height:100%}50%{height:60%}}
@keyframes cf1{0%,100%{transform:translateY(4px) rotate(6deg)}50%{transform:translateY(-4px) rotate(6deg)}}@keyframes cf2{0%,100%{transform:translateY(-4px) rotate(-6deg)}50%{transform:translateY(4px) rotate(-6deg)}}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,100%{transform:scale(2);opacity:0}}
@keyframes slideR{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.orb-a{animation:orbA 20s ease-in-out infinite}.orb-b{animation:orbB 26s ease-in-out infinite}.orb-c{animation:orbC 18s ease-in-out infinite}
.ring-cw{animation:rotR 70s linear infinite}.ring-ccw{animation:rotL 90s linear infinite}
.float-u{animation:fU 6s ease-in-out infinite}.float-d{animation:fD 8s ease-in-out infinite}
.ping-dot{animation:ping 1.5s ease-in-out infinite}
.bar1{animation:bp1 1.5s ease-in-out infinite}.bar2{animation:bp2 1.2s ease-in-out infinite .3s}.bar3{animation:bp3 1.7s ease-in-out infinite .2s}.bar4{animation:bp4 1.4s ease-in-out infinite .5s}.bar5{animation:bp5 1.6s ease-in-out infinite .4s}.bar6{animation:bp6 1.1s ease-in-out infinite .6s}
.card-f1{animation:cf1 5s ease-in-out infinite}.card-f2{animation:cf2 5s ease-in-out infinite .5s}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0f172a;border-radius:50%;border:2px solid white;box-shadow:0 2px 6px rgba(15,23,42,.25)}
input[type=range].h-1\.5::-webkit-slider-runnable-track{height:6px;background:#e2e8f0;border-radius:999px}
input[type=range].h-2::-webkit-slider-runnable-track{height:8px;background:#e2e8f0;border-radius:999px}
.faq-answer{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s}
.faq-answer.open{max-height:500px;opacity:1}
.faq-icon{transition:transform .3s}.faq-icon.open{transform:rotate(180deg)}
.faq-filter-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:999px;font-size:.72rem;font-weight:600;font-family:var(--font-d);letter-spacing:.04em;border:1.5px solid rgba(203,213,225,.7);background:rgba(255,255,255,.5);color:#64748b;cursor:pointer;transition:all .2s;backdrop-filter:blur(8px)}
.faq-filter-btn:hover{border-color:#F14E1D;color:#F14E1D;background:rgba(241,78,29,.05)}
.faq-filter-btn.sel{background:linear-gradient(to right,#F14E1D,#DF3351);color:#fff !important;border-color:transparent;box-shadow:0 4px 14px rgba(241,78,29,.30)}
.faq-filter-btn.sel .faq-count{background:rgba(255,255,255,.28);color:#fff}
.faq-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;font-size:.62rem;font-weight:700;background:rgba(100,116,139,.12);color:#64748b;transition:all .2s}
.faq-item.faq-hidden{display:none !important}
#faq-search{width:100%;padding:11px 18px 11px 44px;border-radius:14px;border:1.5px solid rgba(203,213,225,.7);background:rgba(255,255,255,.55);backdrop-filter:blur(12px);font-size:.8rem;font-family:var(--font-b);color:#1e293b;outline:none;transition:border-color .2s,box-shadow .2s}
#faq-search:focus{border-color:#F14E1D;box-shadow:0 0 0 3px rgba(241,78,29,.10)}
#faq-search::placeholder{color:#94a3b8}
/* estep managed inline */
.progress-grad{background:linear-gradient(to right,var(--orange),#DF3351,var(--violet));transition:width .5s cubic-bezier(.4,0,.2,1)}
.cond-btn{transition:all .2s cubic-bezier(.16,1,.3,1);cursor:pointer;text-align:left;border-radius:.75rem;padding:.75rem;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.4);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 4px rgba(15,23,42,.04)}
.cond-btn:hover{background:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px rgba(15,23,42,.07)}.cond-btn.sel{background:#0f172a;border-color:#0f172a;color:white;transform:scale(1.03);box-shadow:0 8px 24px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.07)}
.cond-btn.sel .cond-desc{color:#cbd5e1}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}.reveal.visible{opacity:1;transform:translateY(0)}
.hover-lift{transition:transform .3s ease}.hover-lift:hover{transform:scale(1.01)}
.btn-grad{background:linear-gradient(to right,var(--orange),#DF3351,var(--violet));color:white;transition:all .2s}
.btn-grad:hover:not(:disabled){transform:scale(1.01);box-shadow:0 8px 24px rgba(241,78,29,.2)}
.btn-grad:disabled{background:#cbd5e1;color:#94a3b8;cursor:not-allowed}
.type-btn{transition:all .25s cubic-bezier(.16,1,.3,1);cursor:pointer;text-align:left;padding:1.1rem;border-radius:1rem;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.45);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:relative;overflow:hidden;box-shadow:0 2px 12px rgba(15,23,42,.05),inset 0 1px 0 rgba(255,255,255,.8)}
.type-btn.sel{background:#0f172a;color:white;border-color:#0f172a;transform:scale(1.02);box-shadow:0 12px 32px rgba(15,23,42,.22),inset 0 1px 0 rgba(255,255,255,.08)}
.type-btn.sel .t-desc{color:#94a3b8}
.type-check{display:none;width:20px;height:20px;background:#10b981;border-radius:50%;align-items:center;justify-content:center;color:white}
.type-btn.sel .type-check{display:flex}
.hero-a1{animation:fadeDown .8s ease forwards}
.hero-a2{opacity:0;animation:fadeUp .8s ease .08s forwards}
.hero-a3{opacity:0;animation:fadeUp .8s ease .16s forwards}
.hero-a4{opacity:0;animation:fadeUp .8s ease .24s forwards}
.hero-a5{opacity:0;animation:fadeUp .8s ease .32s forwards}

/* ── Inputs Apple glass ── */
.input-glass{background:rgba(255,255,255,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.7);border-radius:.75rem;padding:.625rem .875rem;font-family:var(--font-b);font-size:.8125rem;color:#1e293b;outline:none;width:100%;transition:all .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 3px rgba(15,23,42,.04)}
.input-glass:focus{background:rgba(255,255,255,.80);border-color:rgba(15,23,42,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 3px rgba(15,23,42,.06)}
.input-glass::placeholder{color:#94a3b8}
/* ── Select glass ── */
.select-glass{background:rgba(255,255,255,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.7);border-radius:.75rem;padding:.625rem .875rem;font-family:var(--font-b);font-size:.8125rem;color:#1e293b;outline:none;width:100%;transition:all .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 3px rgba(15,23,42,.04);appearance:none;-webkit-appearance:none;cursor:pointer}
.select-glass:focus{background:rgba(255,255,255,.8);border-color:rgba(15,23,42,.3)}
/* ── Label upper style ── */
.field-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#64748b;display:block;margin-bottom:.4rem}
/* ── type-icon color quand selected ── */
.type-btn.sel .type-icon{background:rgba(255,255,255,.12);color:white}

/* ── Estimator card wrapper ── */
.est-card { position:relative; }

/* ── cond-btn selected state glass ── */
.cond-btn.sel {
  background:rgba(15,23,42,.85) !important;
  border-color:rgba(15,23,42,.9) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.2),inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform:scale(1.03);
}
.cond-btn.sel .cond-name { color:white !important; }
.cond-btn.sel .cond-desc { color:rgba(255,255,255,.4) !important; }

/* ── type-btn selected state glass ── */
.type-btn.sel {
  background:rgba(15,23,42,.88) !important;
  border-color:rgba(15,23,42,.9) !important;
  box-shadow:0 12px 32px rgba(15,23,42,.25),inset 0 1px 0 rgba(255,255,255,.06) !important;
  transform:scale(1.02);
}
.type-btn.sel .type-icon { background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.15) !important; color:white !important; }
.type-btn.sel .font-display { color:white !important; }
.type-btn.sel .t-desc { color:rgba(255,255,255,.45) !important; }
.type-btn:not(.sel):hover { background:rgba(255,255,255,.38) !important; transform:scale(1.01); }
.cond-btn:not(.sel):hover { background:rgba(255,255,255,.38) !important; }

/* ── Slider styling ── */
.est-slider { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:999px; outline:none; cursor:pointer; background:rgba(255,255,255,.20); }
.est-slider::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#0f172a; border:3px solid white; box-shadow:0 2px 8px rgba(15,23,42,.25); }

/* Input placeholder */
input::placeholder { color:rgba(15,23,42,.3) !important; }

/* ── Footer boutons estimateur ── */
.est-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.20);
}

.btn-prev-glass:hover {
  background: rgba(220,180,175,0.40) !important;
  border-color: rgba(241,78,29,0.30) !important;
  color: #4a2020 !important;
}

.cond-row:hover:not([style*="rgba(241,78,29"]) {
  background: rgba(230,190,185,0.35) !important;
  border-color: rgba(220,160,150,0.45) !important;
}

#carQuery:hover {
  background: rgba(235,205,200,0.35) !important;
}
input[type=text]:hover, input[type=number]:hover, input[type=tel]:hover, input[type=email]:hover {
  background: rgba(235,205,200,0.30) !important;
}

#carList button:hover {
  background: rgba(235,190,180,0.45) !important;
}

/* ══ TOGGLE SWITCH ══ */
.toggle-sw { position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0; cursor:pointer; }
.toggle-sw input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:rgba(200,170,165,0.45); border-radius:999px; transition:.3s; border:1px solid rgba(220,160,150,0.35); }
.toggle-slider::before { content:''; position:absolute; width:20px; height:20px; left:2px; top:50%; transform:translateY(-50%); background:white; border-radius:50%; transition:.3s; box-shadow:0 1px 4px rgba(0,0,0,0.15); }
.toggle-sw input:checked + .toggle-slider { background:linear-gradient(to right,#F14E1D,#e11d48); border-color:#F14E1D; }
.toggle-sw input:checked + .toggle-slider::before { left:calc(100% - 22px); }

/* ══ MEC BUTTONS ══ */
.mec-btn:hover { transform:scale(1.02); }
.mec-btn.sel { border-color:rgba(241,78,29,0.55) !important; background:rgba(241,78,29,0.14) !important; }

/* ══ EQUIP CHIP ══ */
.equip-chip { padding:10px 12px; border-radius:12px; border:1.5px solid rgba(200,170,165,0.35); background:rgba(200,185,185,0.12); font-size:11px; font-weight:600; color:#9a8080; cursor:pointer; transition:all .18s; display:flex; align-items:center; gap:8px; position:relative; text-decoration:line-through; text-decoration-color:rgba(180,140,135,0.5); }
.equip-chip.on { background:rgba(16,185,129,0.10); border-color:rgba(16,185,129,0.50); color:#0f4a35; text-decoration:none; }
.equip-chip.on .chip-icon { background:#10b981; border-color:#10b981; color:#fff; }
.chip-icon { width:18px; height:18px; border-radius:5px; border:1.5px solid rgba(180,140,135,0.45); background:rgba(200,185,185,0.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; font-size:11px; color:transparent; }
.equip-chip:not(.on) .chip-icon::after { content:''; }
.equip-chip.on .chip-icon::after { content:'✓'; color:#fff; font-size:11px; font-weight:700; line-height:1; }

/* ══ HEADER ESTIMATEUR barre progress 5 steps ══ */
.step-dots { display:flex; gap:5px; align-items:center; }
.step-dot { width:6px; height:6px; border-radius:50%; background:rgba(220,160,150,0.35); transition:all .3s; }
.step-dot.active { width:20px; border-radius:3px; background:#F14E1D; }
.step-dot.done { background:rgba(241,78,29,0.4); }

/* ══════════════════════════════════════
   ANIMATIONS & MICRO-INTERACTIONS
══════════════════════════════════════ */

/* ── Transition entre steps ── */
@keyframes stepIn {
  from { opacity:0; transform:translateX(28px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes stepInBack {
  from { opacity:0; transform:translateX(-28px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes stepOut {
  from { opacity:1; transform:translateX(0); }
  to   { opacity:0; transform:translateX(-28px); }
}
.m-estep-anim-in { animation: stepIn 0.28s cubic-bezier(0.16,1,0.3,1) forwards; }

/* ── Feedback clic bouton ── */
.btn-grad { position:relative; overflow:hidden; }
.btn-grad::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:rgba(255,255,255,0.18); opacity:0;
  transition:opacity 0.15s;
}
.btn-grad:active::after { opacity:1; }
.btn-grad { transition:transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s; }
.btn-grad:hover  { transform:scale(1.03) translateY(-1px); }
.btn-grad:active { transform:scale(0.97); }

/* ── Toggle switch animation améliorée ── */
.toggle-slider { transition:background .3s, border-color .3s; }
.toggle-slider::before { transition:left .28s cubic-bezier(0.34,1.56,0.64,1), background .2s; }
.toggle-sw input:checked + .toggle-slider::before { box-shadow:0 2px 8px rgba(241,78,29,0.35); }

/* ── Equip chip ── */
.equip-chip {
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  user-select:none;
}
.equip-chip:active { transform:scale(0.93); }
.equip-chip.on { transform:scale(1.03); }

/* ── Cond row ── */
.cond-row { transition:all 0.22s cubic-bezier(0.16,1,0.3,1); }
.cond-row:active { transform:scale(0.97); }

/* ── Mec btn ── */
.mec-btn { transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.mec-btn:active { transform:scale(0.94); }
.mec-btn.sel { transform:scale(1.04); }

/* ── Toggle row hover ── */
.toggle-row {
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.toggle-row:hover { background:rgba(235,205,200,0.28) !important; transform:translateX(2px); }

/* ── Input focus ring animé ── */
input:focus { transition:all 0.2s cubic-bezier(0.16,1,0.3,1) !important; }

/* ── Bouton Précédent hover ── */
.btn-prev:hover {
  background:rgba(235,205,195,0.40) !important;
  border-color:rgba(241,78,29,0.35) !important;
  transform:translateX(-2px);
}
.btn-prev { transition:all 0.2s cubic-bezier(0.16,1,0.3,1); }

/* ── Step dot animation ── */
.step-dot { transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1); }

/* ── Progress bar ── */
#estProgress { transition:width 0.5s cubic-bezier(0.34,1.56,0.64,1) !important; }

/* ── Carte estimateur — légère élévation au hover ── */
#estimator-box > div { transition:box-shadow 0.3s; }
#estimator-box:hover > div {
  box-shadow:0 40px 100px rgba(15,23,42,0.16),inset 0 1.5px 0 rgba(255,255,255,0.65) !important;
}

/* ── Ripple sur toggles ── */
@keyframes togglePop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.18); }
  70%  { transform:scale(0.95); }
  100% { transform:scale(1); }
}
.toggle-pop { animation: togglePop 0.35s cubic-bezier(0.34,1.56,0.64,1); }

/* ── Checkmark draw ── */
@keyframes checkDraw {
  from { stroke-dashoffset:30; }
  to   { stroke-dashoffset:0; }
}
.check-anim { stroke-dasharray:30; stroke-dashoffset:30; animation:checkDraw 0.3s ease forwards 0.05s; }

/* ── Loader pulsation ── */
@keyframes loaderPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:0.7; transform:scale(0.95); }
}
.loader-pulse { animation:loaderPulse 1.5s ease-in-out infinite; }

/* ── Success bounce ── */
@keyframes successPop {
  0%   { transform:scale(0); opacity:0; }
  60%  { transform:scale(1.2); }
  80%  { transform:scale(0.92); }
  100% { transform:scale(1); opacity:1; }
}
.success-pop { animation:successPop 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ── Badge valeur slider ── */
@keyframes badgePop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.15); }
  100% { transform:scale(1); }
}
.badge-pop { animation:badgePop 0.25s cubic-bezier(0.34,1.56,0.64,1); }

/* ── Scroll doux de la carte ── */
#estimator-box {
  scroll-behavior: smooth;
}

/* ══ HERO ORNEMENTS — apparition + animations ══ */
@keyframes orntFadeIn {
  from { opacity:0; transform:scale(0.92) rotate(var(--r,0deg)); }
  to   { opacity:1; transform:scale(1) rotate(var(--r,0deg)); }
}
@keyframes orntFloat1 {
  0%,100% { transform:translateY(0px) rotate(0deg); }
  50%     { transform:translateY(-12px) rotate(3deg); }
}
@keyframes orntFloat2 {
  0%,100% { transform:translateY(0px) rotate(0deg); }
  50%     { transform:translateY(10px) rotate(-2deg); }
}
@keyframes orntSpin {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to   { transform:translate(-50%,-50%) rotate(360deg); }
}

.hero-ornt { animation-fill-mode:forwards; }
.hero-ornt-1 {
  animation: orntFadeIn 1s ease 0.6s forwards, orntFloat1 8s ease-in-out 1.6s infinite;
}
.hero-ornt-2 {
  animation: orntFadeIn 1s ease 0.9s forwards, orntFloat2 10s ease-in-out 1.9s infinite;
}
.hero-ornt-3 {
  animation: orntFadeIn 1s ease 0.75s forwards, orntFloat1 12s ease-in-out 1.75s infinite;
}
.hero-ornt-4 {
  animation: orntFadeIn 1s ease 1.0s forwards, orntFloat2 9s ease-in-out 2s infinite;
}
.hero-ornt-5 {
  animation: orntFadeIn 1.5s ease 0.4s forwards;
}
.hero-ornt-5 ellipse:last-child {
  animation: none;
  transform-origin: center;
}

/* ── Grille subtile en fond ── */
section#hero svg:first-of-type { animation: orntFadeIn 2s ease 0.2s forwards; }

/* ══ BUBBLE BUTTON ══ */
#bubbleBtn:hover { transform:translateY(-4px) scale(1.03); box-shadow:0 14px 40px rgba(241,78,29,0.50),0 4px 12px rgba(0,0,0,0.12); }
#bubbleBtn:active { transform:scale(0.97); }

/* ══ ESTIMATOR MODAL ══ */
#estModal { display:none; opacity:0; }
#estModal.open { display:flex; animation:modalFadeIn .3s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes modalFadeIn {
  from { opacity:0; transform:scale(0.97); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes modalFadeOut {
  from { opacity:1; }
  to   { opacity:0; }
}
/* Contenu modal */
#estModal > div:last-child {
  animation: modalContentIn .35s cubic-bezier(0.22,1,0.36,1) .05s both;
}
@keyframes modalContentIn {
  from { opacity:0; transform:translateY(20px) scale(0.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
#m_estimator-box { animation:modalSlideUp .3s cubic-bezier(.16,1,.3,1); }
@keyframes modalSlideUp { from{transform:translateY(32px);opacity:0} to{transform:translateY(0);opacity:1} }

/* Scrollbar modal */
#m_estimator-box::-webkit-scrollbar { width:4px; }
#m_estimator-box::-webkit-scrollbar-track { background:transparent; }
#m_estimator-box::-webkit-scrollbar-thumb { background:rgba(241,78,29,0.3);border-radius:4px; }

/* ══ SECTION 2 ANIMATIONS ══ */

/* ── Hover cards — transitions ultra-smooth ── */
.s2-card {
  transition: transform 0.65s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.65s cubic-bezier(0.22,1,0.36,1) !important;
  will-change: transform;
}
.s2-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 36px rgba(15,23,42,0.07),
              0 4px 12px rgba(15,23,42,0.04) !important;
}
.s2-card-bar {
  transition: transform 1s cubic-bezier(0.22,1,0.36,1) !important;
}
.s2-card:hover .s2-card-bar { transform: scaleX(1) !important; }
.s2-icon {
  transition: transform 0.65s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.65s cubic-bezier(0.22,1,0.36,1) !important;
}
.s2-card:hover .s2-icon {
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 3px 10px rgba(241,78,29,0.10);
}

/* Stats hover */
.s2-stat {
  transition: transform 0.65s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.65s cubic-bezier(0.22,1,0.36,1) !important;
  will-change: transform;
}
.s2-stat:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(241,78,29,0.07) !important;
}

/* CTA hover */
.s2-cta {
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.55s cubic-bezier(0.22,1,0.36,1) !important;
}
.s2-cta:hover {
  transform: scale(1.02) translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(241,78,29,0.30) !important;
}
.s2-cta:active { transform: scale(0.98) !important; transition-duration: 0.12s !important; }

/* Pills comparatif hover */
.comp-pill {
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.comp-pill:hover { transform: translateX(2px); }

/* Pills comparatif */
.comp-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  width: fit-content;
}
.comp-yes {
  color: #059669;
  background: rgba(5,150,105,0.08);
  border: 1px solid rgba(5,150,105,0.18);
}
.comp-yes::before { content:'✓'; font-size:9px; }
.comp-no {
  color: #ef4444;
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.14);
}
.comp-no::before { content:'✗'; font-size:9px; }

/* Animations entrée séquencées */
@keyframes s2FadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

.s2-header.in    { animation: s2FadeUp .7s cubic-bezier(.16,1,.3,1) forwards; }
.s2-stat.in      { animation: s2FadeUp .6s cubic-bezier(.16,1,.3,1) forwards; }
.s2-card.in      { animation: s2FadeUp .6s cubic-bezier(.16,1,.3,1) forwards; }
.s2-card-dark.in { animation: s2FadeUp .6s cubic-bezier(.16,1,.3,1) forwards; }
.s2-comparatif.in{ animation: s2FadeUp .7s cubic-bezier(.16,1,.3,1) forwards; }

/* ── Reviews grid responsive ── */
@media (max-width: 768px) {
  .reviews-grid { grid-template-columns: 1fr !important; }
  .reviews-grid > div:first-child { grid-column: auto !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .reviews-grid { grid-template-columns: 1fr 1fr !important; }
  .reviews-grid > div:first-child { grid-column: 1/-1 !important; }
}

/* ── Section Avis — toujours visible, animation scroll bonus ── */
.avis-anim { opacity:1; transform:none; }
.avis-card {
  opacity:1;
  transform:none;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.5s cubic-bezier(0.22,1,0.36,1);
}
.avis-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(15,23,42,0.10),inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* ── Navbar — overflow sur petits écrans ── */
@media (max-width: 640px) {
  .site-nav nav { display: none !important; }
}
@media (max-width: 380px) {
  .site-nav { padding: 8px 14px !important; }
}

/* ── Pulse animation pour le dot live ── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.animate-pulse { animation: pulse 1.8s ease-in-out infinite; }

/* ── Active nav link ── */
[data-nav].active {
  background: rgba(241,78,29,0.08);
  color: #F14E1D !important;
  font-weight: 700 !important;
}

/* ── Hover cards avis — fix ── */
.avis-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 48px rgba(15,23,42,0.10) !important;
}

/* ── Hero split responsive ── */
@media (max-width: 768px) {
  #heroRight { display: none !important; }
  #heroLeft  { width: 100% !important; padding-right: 0 !important; }
  #heroLeft h1 { align-items: center !important; text-align: center !important; }
}

/* ══ HERO SPLIT ANIMATION — smooth & propre ══ */

/* État initial */
#heroSplit {
  display: flex;
  align-items: center;
  justify-content: center;
}

#heroLeft {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Transition uniquement sur les props qui bougent */
  transition:
    width       0.75s cubic-bezier(0.16, 1, 0.3, 1),
    padding     0.75s cubic-bezier(0.16, 1, 0.3, 1),
    opacity     0.5s  ease;
}

#heroRight {
  width: 0;
  opacity: 0;
  overflow: hidden;
  flex-shrink: 0;
  /* Transition séparée pour chaque propriété */
  transition:
    width       0.75s cubic-bezier(0.16, 1, 0.3, 1),
    opacity     0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
    transform   0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
  transform: translateX(20px);
}

/* État ouvert */
#heroSplit.hero-split-open {
  align-items: stretch;
}

#heroLeft.hero-left-open {
  width: 50%;
  padding-right: 40px;
}

#heroRight.hero-right-open {
  width: 50%;
  opacity: 1;
  transform: translateX(0);
}

/* Responsive — désactiver le split sur mobile */
@media (max-width: 768px) {
  #heroLeft.hero-left-open  { width: 100%; padding-right: 0; }
  #heroRight.hero-right-open { display: none; }
}

/* ══ BACK TO TOP ══ */
#backToTop { transition: opacity .3s ease, background .2s ease !important; }

/* ══ PRINT STYLES ══ */
@media print {
  #siteNav, #bubbleBtn, #backToTop, #cookieBanner,
  #hero canvas, .hero-ornt, section#rachat { display:none !important; }
  body { background:white !important; }
  .glass-card { box-shadow:none !important; border:1px solid #ddd !important; }
}

/* ══ FOCUS VISIBLE (accessibilité) ══ */
:focus-visible {
  outline: 2px solid #F14E1D;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ══ SELECTION COLOR ══ */
::selection { background: rgba(241,78,29,0.2); color: #0f172a; }

/* ══ SMOOTH SCROLL ══ */
html { scroll-behavior: smooth; }

/* ══ LOADING SKELETON pour les images ══ */
img { loading: lazy; }

/* ── Documents grid responsive ── */
@media (max-width: 768px) {
  #docsGrid { grid-template-columns: 1fr !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  #docsGrid { grid-template-columns: 1fr 1fr !important; }
}
.doc-card:hover {
  box-shadow: 0 12px 36px rgba(15,23,42,0.09) !important;
  transform: translateY(-3px);
}

/* ── Doc cards — transitions premium ── */
.doc-card {
  transition: box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),
              transform  0.4s cubic-bezier(0.16,1,0.3,1) !important;
  will-change: transform;
}
.doc-card:hover {
  box-shadow: 0 12px 36px rgba(15,23,42,0.09) !important;
  transform: translateY(-3px) !important;
}
.doc-card:active {
  transform: scale(0.98) !important;
  transition-duration: 0.12s !important;
}

/* Hint text transition */
#doc1-hint, #doc2-hint, #doc3-hint {
  transition: color 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════
   COUCHE MOBILE v2 — header, bottom-sheet, garanties, comparatif
   Desktop intact : tout est scopé via media queries / nouveaux ids
═══════════════════════════════════════════════════════════════ */

/* ── Comparatif par lignes (alignement garanti à toutes largeurs) ── */
.comp-table { display:grid; grid-template-columns:1.15fr 1fr 1fr; align-items:center; }
.comp-th   { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:#94a3b8; padding:16px 20px 8px; }
.comp-crit { font-size:11px; font-weight:600; color:#64748b; padding:7px 20px; }
.comp-cell { padding:4px 20px; }
.comp-col-siara { background:rgba(241,78,29,0.03); }
.comp-table > :nth-child(3n+1),
.comp-table > :nth-child(3n+2) { border-right:1px solid rgba(0,0,0,0.05); align-self:stretch; display:flex; align-items:center; }
.comp-table > :nth-last-child(-n+3) { padding-bottom:16px; }

/* ── Header mobile : CTA compact + hamburger visibles ── */
@media (max-width: 640px) {
  #navCtaDesktop     { display:none !important; }
  #navMobileControls { display:flex !important; }
  .site-nav          { top:12px; }
}

/* Hamburger → croix */
#mobileMenu { z-index:55 !important; } /* au-dessus de la navbar (50) */
#hamburgerBtn .hb-bar { transform-origin:center; }
#hamburgerBtn.open .hb-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
#hamburgerBtn.open .hb-bar:nth-child(2) { opacity:0; }
#hamburgerBtn.open .hb-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); width:16px !important; align-self:center !important; margin-left:0 !important; }

/* ── Bottom-sheet estimateur (mobile) ──
   Le #heroFormBox déplacé dans le panneau prend toute la largeur */
#mobileSheetPanel > #heroFormBox {
  width:100% !important;
  max-width:100%;
  max-height:86vh;
  max-height:86dvh;
  border-radius:22px 22px 0 0 !important;
  box-shadow:0 -20px 60px rgba(15,23,42,0.25) !important;
}
/* iOS : police ≥16px dans le sheet pour empêcher le zoom auto au focus */
@media (max-width: 768px) {
  #mobileSheetPanel input,
  #mobileSheetPanel select { font-size:16px !important; }
}

/* Bulle + back-to-top masqués quand un overlay est ouvert */
body.overlay-open #floatBubble,
body.overlay-open #backToTop { display:none !important; }

/* ── Section GARANTIES responsive ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .s2-grid { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width: 768px) {
  .s2-grid { grid-template-columns:repeat(2,1fr) !important; }
  #garanties, #avis { min-height:auto !important; padding:64px 5vw !important; }
  /* Lisibilité : labels 9px → 10px */
  .s2-stat > div:last-child { font-size:10px !important; letter-spacing:.08em !important; }
  .s2-card p { font-size:11.5px !important; }
}
@media (max-width: 400px) {
  .s2-grid { gap:8px !important; }
  .s2-card { padding:16px 13px !important; }
  .s2-stat { padding:14px 10px !important; }
}

/* Comparatif compact sur mobile */
@media (max-width: 640px) {
  .comp-th   { padding:12px 10px 6px; font-size:10px; letter-spacing:.08em; }
  .comp-crit { padding:6px 10px; font-size:10.5px; }
  .comp-cell { padding:3px 8px; }
  .comp-pill { font-size:9.5px; padding:3px 8px; gap:4px; }
}

/* ── Pages Local (SEO) : hero 2 colonnes → empilé sur mobile ── */
@media (max-width: 768px) {
  .page-wrap [style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Bulle flottante compacte sur mobile (texte masqué, icône € seule) ── */
@media (max-width: 640px) {
  #floatBubble { bottom:16px; right:16px; }
  #floatBubble > a,
  #floatBubble > button {
    font-size:0 !important;
    gap:0 !important;
    width:58px; height:58px;
    padding:0 !important;
    justify-content:center !important;
  }
  #floatBubble > a > span,
  #floatBubble > button > span {
    width:32px !important; height:32px !important; font-size:17px !important;
  }
  #backToTop { bottom:88px !important; right:25px !important; }
  /* Bandeau cookies : cibles tactiles confortables */
  #cookieBanner button { padding:11px 20px !important; }
}