/* ============================================
   RACHAT-VOITURE — Design fidèle au screenshot
   Header: logo + 2 téléphones + bouton rouge
   Hero: texte à gauche, photo + diagonale rouge à droite
   ============================================ */

:root {
    --navy: #2c3e6b;
    --navy-dark: #1e2d4d;
    --red: #e74c3c;
    --red-dark: #c0392b;
    --red-light: #f15a4a;
    --text: #555;
    --dark: #333;
    --light: #f8f8f8;
    --border: #e5e5e5;
    --white: #fff;
    --green: #25d366;
    --font: 'Lato', Arial, sans-serif;
    --t: .25s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--font);font-size:15px;line-height:1.7;color:var(--text);background:var(--white);overflow-x:hidden}
a{color:var(--red);text-decoration:none;transition:var(--t)}
a:hover{color:var(--red-dark)}
ul{list-style:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 30px}

/* ==== HEADER ==== */
.header{
    background:var(--white);
    padding:0 0;
    position:sticky;top:0;z-index:1000;
    border-bottom:1px solid var(--border);
    transition:box-shadow .3s;
}
.header.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.07)}
.header-wrap{
    max-width:1200px;margin:0 auto;padding:0 30px;
    display:flex;align-items:center;justify-content:space-between;
    height:85px;
}

/* Logo */
.logo{display:flex;align-items:center;gap:10px}
.logo-text{display:flex;flex-direction:column}
.logo-name{font-size:24px;font-weight:900;color:var(--navy);line-height:1.1;letter-spacing:-.5px}
.logo-tagline{font-size:9px;font-weight:700;color:var(--text);letter-spacing:3px;text-transform:uppercase}

/* Header right */
.header-right{display:flex;align-items:center;gap:30px}
.header-phone{display:flex;align-items:center;gap:6px}
.phone-num{font-size:20px;font-weight:700;letter-spacing:.5px}
.phone-red .phone-num{color:var(--red);transition:transform .2s ease}
.phone-red:hover .phone-num{transform:scale(1.05)}
.phone-blue .phone-num{color:var(--navy)}

.btn-cta{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--red);color:#fff;
    font-family:var(--font);font-size:14px;font-weight:700;
    letter-spacing:1px;text-transform:uppercase;
    padding:14px 30px;border-radius:3px;border:none;cursor:pointer;
    transition:var(--t);
}
.btn-cta:hover{background:var(--red-dark);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(231,76,60,.35)}
.btn-cta:active{transform:translateY(0);box-shadow:none}
.btn-cta{position:relative;overflow:hidden}
.btn-cta .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);transform:scale(0);animation:ripple .6s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.btn-cta-large{font-size:16px;padding:18px 40px}
.btn-cta-full{width:100%;padding:16px;font-size:15px}

.btn-white{
    display:inline-flex;align-items:center;gap:6px;
    background:#fff;color:var(--dark);
    font-family:var(--font);font-size:15px;font-weight:700;
    padding:14px 28px;border-radius:3px;border:2px solid #fff;
    transition:var(--t);
}
.btn-white:hover{background:#f0f0f0;color:var(--dark)}

/* Language switch */
.lang-switch{display:flex;align-items:center;gap:2px;margin-left:16px}
.lang-switch a{display:inline-block;padding:4px 8px;font-size:12px;font-weight:700;color:var(--navy);border-radius:4px;text-decoration:none;transition:var(--t);letter-spacing:.5px}
.lang-switch a:hover{color:var(--red)}
.lang-switch a.active{background:var(--red);color:#fff}
.lang-switch a.active:hover{background:var(--red-dark);color:#fff}

.burger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:6px}
.burger span{display:block;width:28px;height:2px;background:var(--dark);transition:var(--t)}

/* Mobile nav */
.mobile-nav{
    display:none;flex-direction:column;
    background:var(--white);border-top:1px solid var(--border);
    box-shadow:0 8px 30px rgba(0,0,0,.08);
}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:14px 30px;font-size:14px;font-weight:600;color:var(--dark);border-bottom:1px solid var(--border)}
.mobile-nav a:hover{color:var(--red);background:var(--light)}
.mobile-phones{display:flex;gap:20px;padding:16px 30px}
.mobile-phones a{font-size:18px;font-weight:700;color:var(--red)}

/* ==== HERO ==== */
.hero{
    background:var(--white);
    overflow:hidden;
}
.hero-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:550px;
}
.hero-left{
    display:flex;flex-direction:column;justify-content:center;
    padding:60px 50px 60px 30px;
    max-width:600px;
}
.hero h1{
    font-size:42px;font-weight:400;line-height:1.25;
    color:var(--navy);margin-bottom:24px;
}
/* Hero entrance animations */
.hero-left>*{opacity:0;transform:translateY(20px);animation:heroIn .7s ease forwards}
.hero-left>*:nth-child(1){animation-delay:.1s}
.hero-left>*:nth-child(2){animation-delay:.3s}
.hero-left>*:nth-child(3){animation-delay:.45s}
.hero-left>*:nth-child(4){animation-delay:.6s}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}
.hero h1 strong{font-weight:900}
.hero-desc{font-size:17px;color:var(--dark);margin-bottom:8px;line-height:1.5}
.hero-sub{font-size:15px;color:var(--text);margin-bottom:32px;line-height:1.6}

.hero-right{
    position:relative;
    background:#d0d8df;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
}
.hero-right>img{
    width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
}
.hero-diagonal{
    position:absolute;
    left:-2px;top:0;bottom:0;width:80px;
    background:var(--white);
    clip-path:polygon(0 0, 100% 0, 0 100%);
}
.hero-diagonal::after{
    content:'';position:absolute;
    right:-4px;top:0;bottom:0;width:8px;
    background:var(--red);
    clip-path:polygon(0 0, 100% 0, 0 100%);
}

/* Photo placeholders */
.hero-img-placeholder{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    color:rgba(255,255,255,.6);font-size:13px;text-align:center;padding:20px;
}
.hero-img-placeholder .small{font-size:11px;opacity:.5}
.img-placeholder{
    background:#e8eaed;border:2px dashed #ccc;border-radius:3px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    min-height:220px;width:100%;color:#999;font-size:12px;text-align:center;padding:20px;
}
.img-placeholder.sm{min-height:170px;background:#eee}

/* ==== CHIFFRES CLÉS ==== */
.chiffres{padding:40px 0;background:var(--navy)}
.chiffres-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.chiffre{padding:16px 10px}
.chiffre-val{font-size:42px;font-weight:900;color:#fff;line-height:1}
.chiffre-suffix{font-size:24px;font-weight:700;color:var(--red-light)}
.chiffre p{font-size:13px;color:rgba(255,255,255,.75);margin-top:6px;text-transform:uppercase;letter-spacing:1px}

/* ==== AVANTAGES ==== */
.avantages{padding:40px 0;background:var(--light);border-bottom:1px solid var(--border)}
.avantages-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.avantage{display:flex;align-items:flex-start;gap:14px;padding:10px 0}
.avantage-icon{color:var(--red);flex-shrink:0;margin-top:2px;transition:transform .3s ease, color .3s ease}
.avantage:hover .avantage-icon{transform:scale(1.2) rotate(-5deg);color:var(--red-dark)}
.avantage strong{display:block;font-size:14px;color:var(--dark);margin-bottom:2px}
.avantage p{font-size:13px;color:var(--text);margin:0;line-height:1.5}

/* ==== SECTION HEADS ==== */
.section-head{text-align:center;max-width:680px;margin:0 auto 45px}
.section-head.light h2{color:#fff}
.section-head.light p{color:rgba(255,255,255,.7)}
.section-head h2{font-size:30px;font-weight:700;color:var(--navy);margin-bottom:12px;line-height:1.3}
.head-bar{width:0;height:3px;background:var(--red);margin:0 auto 16px;border-radius:2px;transition:width .6s ease}
.head-bar.vis{width:50px}
.head-bar.light{background:#fff}
.head-bar.left{margin:0 0 16px}
.section-head p{font-size:15px;color:var(--text)}

/* ==== ÉTAPES ==== */
.etapes{padding:70px 0;background:var(--white)}
.etapes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.etape-card{
    background:var(--light);border:1px solid var(--border);border-radius:4px;
    overflow:hidden;transition:var(--t);position:relative;
}
.etape-card:hover{box-shadow:0 12px 35px rgba(0,0,0,.1);transform:translateY(-6px)}
.etape-card:hover .etape-num{transform:scale(1.15);box-shadow:0 0 0 6px rgba(231,76,60,.2)}
.etape-img{overflow:hidden;height:200px}
.etape-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.etape-card:hover .etape-img img{transform:scale(1.05)}
.etape-body{padding:24px 22px 28px}
.etape-num{
    position:absolute;top:14px;right:14px;
    width:34px;height:34px;background:var(--red);color:#fff;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:15px;font-weight:900;z-index:2;
    transition:transform .3s ease, box-shadow .3s ease;
}
.etape-num.pulse{animation:numPulse .6s ease}
@keyframes numPulse{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.etape-body h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:10px}
.etape-body p{font-size:13px;color:var(--text);line-height:1.7}

/* ==== ESTIMATION WIZARD ==== */
.estimation-section{
    padding:70px 0 80px;
    background:var(--light);
    position:relative;
    overflow:hidden;
}
.wizard-bg{
    position:absolute;right:-80px;top:0;bottom:0;width:40%;
    background:var(--navy);
    clip-path:polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
    opacity:.04;
    pointer-events:none;
}
.wizard-title{
    text-align:center;font-size:34px;font-weight:900;color:var(--navy);
    letter-spacing:2px;margin-bottom:8px;
}
.wizard-subtitle{
    text-align:center;font-size:16px;color:var(--text);margin-bottom:16px;
    font-style:italic;
}
.wizard-bar{width:50px;height:3px;background:var(--red);margin:0 auto 40px;border-radius:2px}

.wizard-box{
    max-width:820px;margin:0 auto;background:#fff;border-radius:8px;
    box-shadow:0 4px 40px rgba(0,0,0,.08);padding:40px 44px 32px;
    position:relative;min-height:320px;
}
.wizard-counter{
    text-align:center;font-size:11px;font-weight:700;
    letter-spacing:3px;text-transform:uppercase;color:var(--text);
    margin-bottom:6px;
}
.wizard-step{display:none;animation:wizFadeIn .4s ease}
.wizard-step.active{display:block}
@keyframes wizFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.wizard-step-title{
    text-align:center;font-size:24px;font-weight:700;color:var(--navy);
    margin-bottom:28px;
}

/* Wizard cards */
.wizard-cards{
    display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
}
.wcard{
    background:#fff;border:2px solid var(--border);border-radius:10px;
    padding:20px 16px;text-align:center;cursor:pointer;
    width:130px;transition:all .25s ease;
    display:flex;flex-direction:column;align-items:center;gap:10px;
}
.wcard:hover{border-color:#ccc;box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-3px)}
.wcard.selected{border-color:var(--navy);background:rgba(44,62,107,.04);box-shadow:0 4px 20px rgba(44,62,107,.12)}
.wcard-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.wcard-icon svg{transition:transform .3s ease}
.wcard:hover .wcard-icon svg{transform:scale(1.1)}
.wcard.selected .wcard-icon svg g{stroke:var(--navy)}
.wcard span{font-size:12px;font-weight:600;color:var(--dark);line-height:1.3}
.wcard.selected span{color:var(--navy);font-weight:700}

/* Wizard vehicle fields (step 1) */
.wizard-vehicle-fields{max-width:400px;margin:0 auto}
.wizard-vehicle-fields .fg{margin-bottom:18px}
.wizard-vehicle-fields select{
    width:100%;padding:12px 14px;border:2px solid var(--navy);border-radius:3px;
    font-family:var(--font);font-size:15px;color:#fff;
    background-color:var(--navy);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;
    cursor:pointer;outline:none;transition:var(--t);-webkit-appearance:none;-moz-appearance:none;appearance:none;
}
.wizard-vehicle-fields select:focus{border-color:var(--navy);box-shadow:0 0 0 2px rgba(44,62,107,.15)}
.wizard-vehicle-fields input{
    width:100%;padding:12px 14px;border:2px solid var(--navy);border-radius:3px;
    font-family:var(--font);font-size:15px;color:#fff;background:var(--navy);outline:none;transition:var(--t)
}
.wizard-vehicle-fields input:focus{border-color:var(--navy);box-shadow:0 0 0 2px rgba(44,62,107,.15)}
.wizard-vehicle-fields input::placeholder{color:rgba(255,255,255,.5)}
.wizard-vehicle-fields select option{background:#fff;color:var(--dark)}
.btn-next-step{margin-top:8px;border-radius:30px;max-width:300px;margin-left:auto;margin-right:auto;display:block}
.btn-next-step:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* Wizard back button */
.wizard-back{
    display:inline-flex;align-items:center;gap:4px;
    background:none;border:none;cursor:pointer;
    font-family:var(--font);font-size:13px;font-weight:600;color:var(--text);
    margin-top:24px;padding:6px 0;transition:var(--t);
}
.wizard-back:hover{color:var(--red)}

/* Wizard step 4 : form */
.wizard-upload{
    border:2px dashed var(--border);border-radius:6px;padding:32px;text-align:center;
    cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
    color:#aaa;font-size:13px;transition:var(--t);margin-bottom:24px;
}
.wizard-upload:hover{border-color:var(--red);background:rgba(231,76,60,.02)}
.wizard-upload input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload-or{font-size:11px;color:#ccc;margin:4px 0}
.upload-link{color:var(--red);font-weight:600;font-size:13px;cursor:pointer;text-decoration:underline}
.upload-count{font-size:11px;color:#bbb;position:absolute;bottom:8px;right:14px}

.wizard-contact{margin-bottom:16px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.fg{margin-bottom:14px}
.fg label{display:block;font-size:12px;font-weight:700;color:var(--dark);margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.fg input,.fg select,.fg textarea{
    width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:3px;
    font-family:var(--font);font-size:14px;color:var(--dark);background:#fff;
    transition:var(--t);outline:none
}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--red);box-shadow:0 0 0 2px rgba(231,76,60,.1)}
.fg input::placeholder,.fg textarea::placeholder{color:#bbb}
.fg select{cursor:pointer}

/* Override pour wizard step 1 */
.wizard-vehicle-fields .fg input,
.wizard-vehicle-fields .fg select{
    background-color:var(--navy) !important;color:#fff !important;border-color:var(--navy) !important;border-width:2px;font-size:15px;padding:12px 14px;
}
.wizard-vehicle-fields .fg select{
    -webkit-appearance:none;-moz-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;background-position:right 14px center !important;
}
.wizard-vehicle-fields .fg input::placeholder{color:rgba(255,255,255,.5) !important}
.wizard-vehicle-fields .fg input:focus,
.wizard-vehicle-fields .fg select:focus{border-color:var(--navy) !important;box-shadow:0 0 0 3px rgba(44,62,107,.2) !important}
.wizard-vehicle-fields .fg select option{background:#fff;color:var(--dark)}
.fg textarea{resize:vertical}

.wizard-info-wa{
    text-align:center;font-size:14px;color:var(--dark);margin-bottom:24px;
    padding:14px 20px;background:rgba(37,211,102,.08);border-radius:6px;border:1px solid rgba(37,211,102,.2);
    line-height:1.5;font-weight:500;
}
.wizard-consent{font-size:11px;color:#999;text-align:center;margin-bottom:16px;line-height:1.5}
.wizard-consent a{color:var(--red);font-weight:600}

.btn-send{
    background:var(--red);border-radius:30px;font-size:16px;
    padding:16px 40px;letter-spacing:2px;max-width:300px;margin:0 auto;display:block;
}

/* ==== SERVICES ==== */
.services{padding:70px 0;background:var(--light)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{
    background:#fff;border:1px solid var(--border);border-radius:4px;
    overflow:hidden;transition:var(--t)
}
.svc:hover{box-shadow:0 10px 30px rgba(0,0,0,.1);transform:translateY(-5px)}
.svc::before{content:'';position:absolute;bottom:0;left:0;width:0;height:3px;background:var(--red);transition:width .4s ease}
.svc:hover::before{width:100%}
.svc{position:relative;overflow:hidden}
.svc-img{overflow:hidden;height:180px}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc:hover .svc-img img{transform:scale(1.08)}
.svc h3{font-size:16px;font-weight:700;color:var(--navy);padding:18px 18px 6px}
.svc p{font-size:13px;color:var(--text);padding:0 18px 18px;line-height:1.6}

/* ==== TÉMOIGNAGES ==== */
.temoignages{padding:70px 0;background:#fff}
.temoignages-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.temoin{
    background:var(--light);border:1px solid var(--border);border-radius:4px;
    padding:26px;transition:var(--t)
}
.temoin:hover{box-shadow:0 8px 25px rgba(0,0,0,.08);border-color:var(--red);transform:translateY(-3px)}
.temoin::after{content:'❝';position:absolute;top:12px;right:18px;font-size:48px;color:var(--red);opacity:0;transition:opacity .3s ease, transform .3s ease;transform:translateY(8px)}
.temoin:hover::after{opacity:.15;transform:translateY(0)}
.temoin{position:relative;overflow:hidden}
.temoin-stars{color:#f4b400;font-size:15px;letter-spacing:2px;margin-bottom:10px}
.temoin p{font-size:14px;color:var(--text);font-style:italic;line-height:1.7;margin-bottom:14px}
.temoin-who strong{color:var(--dark);font-size:14px}
.temoin-who{font-size:13px;color:var(--text)}

/* ==== FAQ ==== */
.faq-section{padding:70px 0;background:#fff}
.faq-list{max-width:780px;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:4px;margin-bottom:10px;overflow:hidden;transition:var(--t)}
.faq-item:hover{border-color:#ccc}
.faq-item summary{
    padding:18px 22px;font-size:15px;font-weight:700;color:var(--navy);
    cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
    transition:var(--t);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:22px;font-weight:300;color:var(--red);transition:transform .3s ease}
.faq-item[open] summary::after{content:'−'}
.faq-item[open] summary{background:var(--light)}
.faq-item p{padding:0 22px 18px;font-size:14px;color:var(--text);line-height:1.7}

/* ==== CTA ==== */
.cta-band{padding:50px 0;background:var(--red)}
.cta-flex{display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta-band h2{font-size:26px;font-weight:700;color:#fff;margin-bottom:4px}
.cta-band p{color:rgba(255,255,255,.8);font-size:15px}
.cta-btns{display:flex;gap:12px;flex-shrink:0}

/* ==== CONTACT ==== */
.contact{padding:70px 0;background:var(--light)}
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:start}
.contact-info h2{font-size:26px;font-weight:700;color:var(--navy);margin-bottom:8px}
.ci{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.ci svg{flex-shrink:0;margin-top:2px}
.ci strong{display:block;font-size:13px;color:var(--dark);margin-bottom:1px}
.ci p{font-size:13px;color:var(--text);margin:0}
.ci a{color:var(--red)}
.ci a:hover{text-decoration:underline}
.contact-map{border-radius:4px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.08);border:1px solid var(--border);min-height:360px}

/* ==== FOOTER ==== */
.footer{background:#1e1e1e;color:rgba(255,255,255,.5);padding:50px 0 0;font-size:13px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.06)}
.fcol h3{color:#fff;font-size:15px;font-weight:700;margin-bottom:14px}
.fcol p{line-height:1.7}
.fcol li{margin-bottom:6px}
.fcol a{color:rgba(255,255,255,.5);transition:var(--t)}
.fcol a:hover{color:var(--red)}
.footer-bot{padding:16px 0;text-align:center;font-size:11px;color:rgba(255,255,255,.5)}

/* ==== FLOATING ==== */
.fl{
    position:fixed;right:18px;width:54px;height:54px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#fff;z-index:999;transition:var(--t);box-shadow:0 3px 14px rgba(0,0,0,.25)
}
.fl-wa{bottom:22px;background:var(--green);animation:pwa 2s infinite}
.fl-tel{bottom:88px;background:var(--red)}
.fl:hover{transform:scale(1.08);color:#fff}
@keyframes pwa{0%{box-shadow:0 0 0 0 rgba(37,211,102,.4)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ==== CHATBOT WHATSAPP ==== */
.chatbot{
    position:fixed;bottom:90px;right:18px;width:370px;max-height:520px;
    background:#e5ddd5;border-radius:14px;overflow:hidden;z-index:1000;
    box-shadow:0 8px 40px rgba(0,0,0,.25);flex-direction:column;
    transform:scale(0.5);opacity:0;transform-origin:bottom right;
    transition:transform .3s ease,opacity .3s ease;
    pointer-events:none;display:flex;visibility:hidden;
}
.chatbot.open{transform:scale(1);opacity:1;pointer-events:auto;visibility:visible}
.chatbot-header{
    background:#075e54;color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
    flex-shrink:0;
}
.chatbot-header-info{display:flex;align-items:center;gap:10px}
.chatbot-header-info strong{font-size:15px;display:block;line-height:1.2}
.chatbot-header-info span{font-size:11px;opacity:.7}
.chatbot-avatar{
    width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.15);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.chatbot-close{
    background:none;border:none;color:#fff;font-size:26px;cursor:pointer;
    line-height:1;padding:0 4px;opacity:.8;transition:opacity .2s;
}
.chatbot-close:hover{opacity:1}
.chatbot-messages{
    flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:6px;
    background:#e5ddd5 url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' patternUnits='userSpaceOnUse' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23d4cec3' stroke-width='.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23p)'/%3E%3C/svg%3E");
    min-height:200px;
}
.chatbot-bubble{
    max-width:82%;padding:8px 12px;border-radius:8px;font-size:13.5px;line-height:1.5;
    position:relative;word-wrap:break-word;animation:cbFadeIn .3s ease;
}
@keyframes cbFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.chatbot-bubble.bot{
    background:#fff;color:#333;align-self:flex-start;border-top-left-radius:0;
    box-shadow:0 1px 1px rgba(0,0,0,.08);
}
.chatbot-bubble.user{
    background:#dcf8c6;color:#333;align-self:flex-end;border-top-right-radius:0;
    box-shadow:0 1px 1px rgba(0,0,0,.08);
}
.chatbot-typing{
    align-self:flex-start;background:#fff;padding:10px 16px;border-radius:8px;border-top-left-radius:0;
    display:flex;gap:4px;box-shadow:0 1px 1px rgba(0,0,0,.08);
}
.chatbot-typing span{
    width:7px;height:7px;border-radius:50%;background:#999;
    animation:cbTyping 1.2s infinite;
}
.chatbot-typing span:nth-child(2){animation-delay:.2s}
.chatbot-typing span:nth-child(3){animation-delay:.4s}
@keyframes cbTyping{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.chatbot-reply{
    padding:10px 14px;background:#f0f0f0;border-top:1px solid #ddd;flex-shrink:0;
    display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
}
.chatbot-reply select{
    width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:20px;
    font-family:var(--font);font-size:13px;background:#fff;cursor:pointer;
    outline:none;
}
.chatbot-reply select:focus{border-color:#25d366}
.chatbot-reply input[type="text"]{
    flex:1;padding:10px 14px;border:1px solid #ccc;border-radius:20px;
    font-family:var(--font);font-size:13px;outline:none;
}
.chatbot-reply input[type="text"]:focus{border-color:#25d366}
.chatbot-reply .cb-send-input{
    width:36px;height:36px;border-radius:50%;background:#25d366;color:#fff;border:none;
    cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;transition:background .2s;
}
.chatbot-reply .cb-send-input:hover{background:#1da851}
.chatbot-reply .cb-btn{
    padding:8px 16px;border-radius:20px;border:1.5px solid #25d366;background:#fff;
    font-family:var(--font);font-size:12.5px;font-weight:600;color:#075e54;cursor:pointer;
    transition:all .2s;
}
.chatbot-reply .cb-btn:hover{background:#25d366;color:#fff}
.chatbot-reply .cb-btn-wa{
    padding:10px 24px;border-radius:20px;border:none;background:#25d366;
    font-family:var(--font);font-size:13px;font-weight:700;color:#fff;cursor:pointer;
    transition:all .2s;width:100%;
}
.chatbot-reply .cb-btn-wa:hover{background:#1da851}

/* ==== RESPONSIVE ==== */
@media(max-width:1024px){
    .header-right{gap:16px}
    .phone-num{font-size:16px}
    .hero h1{font-size:34px}
    .etapes-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
    .chatbot{width:calc(100% - 24px);right:12px;bottom:84px;max-height:460px}
    .chiffres-row{grid-template-columns:repeat(2,1fr);gap:16px}
    .header-right .header-phone,.header-right .btn-cta{display:none}
    .burger{display:flex}
    .header-wrap{padding:0 16px;height:70px}
    .logo-name{font-size:18px}
    .logo-tagline{font-size:7px;letter-spacing:2px}
    .logo-icon svg{width:40px;height:40px}
    .lang-switch{margin-left:auto;margin-right:12px;gap:1px}
    .lang-switch a{padding:3px 6px;font-size:11px}
    .hero-wrap{grid-template-columns:1fr;min-height:auto}
    .hero-left{padding:40px 20px}
    .hero h1{font-size:30px}
    .hero-right{min-height:300px}
    .hero-diagonal{display:none}
    .avantages-row{grid-template-columns:1fr 1fr;gap:16px}
    .services-grid{grid-template-columns:1fr}
    .temoignages-grid{grid-template-columns:1fr}
    .fg2{grid-template-columns:1fr;gap:0}
    .wizard-box{padding:28px 20px}
    .wizard-title{font-size:26px}
    .wcard{width:110px;padding:14px 10px}
    .fg2{grid-template-columns:1fr;gap:0}
    .contact-grid{grid-template-columns:1fr}
    .cta-flex{flex-direction:column;text-align:center}
    .cta-btns{justify-content:center;flex-wrap:wrap}
    .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:500px){
    .chatbot{right:0;bottom:0;width:100%;max-height:100%;border-radius:0;max-height:100vh;height:100vh}
    .avantages-row{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .hero h1{font-size:26px}
    .chiffres-row{grid-template-columns:1fr 1fr}
    .chiffre-val{font-size:32px}
    .logo-name{font-size:16px}
    .logo-icon svg{width:36px;height:36px}
    .logo{gap:6px}
}

/* Breadcrumbs */
.breadcrumb{padding:95px 0 0;background:var(--white)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;padding:0 30px;max-width:1200px;margin:0 auto;font-size:13px}
.breadcrumb li+li::before{content:"›";color:var(--text);margin-right:6px}
.breadcrumb a{color:var(--navy);font-weight:700;text-decoration:none}
.breadcrumb a:hover{color:var(--red)}
.breadcrumb span{color:var(--text)}