@font-face{font-family:"SG";src:url(/fonts/space-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"SG";src:url(/fonts/space-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"In";src:url(/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"In";src:url(/fonts/inter-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"In";src:url(/fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--noir:#0b0b0c;--texte:#6f7177;--rouge:#e2231a;--rouge2:#ff5a36;--gris:#f6f6f6;--peche:#fff1ed;--ligne:#e9e9ea;--blanc:#fff;--r:22px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanc);color:var(--noir);font:16px/1.65 "In",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,.sg{font-family:"SG","In",system-ui,sans-serif;letter-spacing:-.025em;line-height:1.08;margin:0}
.c{max-width:1180px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:99px;padding:8px 8px 8px 22px;font:600 15px/1 "In",sans-serif;text-decoration:none;white-space:nowrap;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal}
.btn-r{background:var(--rouge);color:#fff}.btn-r i{background:#fff;color:var(--rouge)}
.btn-l{border:1.5px solid var(--noir);color:var(--noir);background:#fff}.btn-l i{background:var(--noir);color:#fff}
.tag{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 "In",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--noir)}
.tag:before{content:"";width:22px;height:2px;background:var(--rouge)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--peche);color:var(--noir);border-radius:99px;padding:7px 16px;font:600 12px/1 "In",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.pill b{color:var(--rouge)}
.rouge{color:var(--rouge)}
section{padding:96px 0}
.tete{text-align:center;max-width:680px;margin:0 auto 54px}
.tete h2{font-size:clamp(32px,4.6vw,48px);margin:14px 0 14px}
.tete p{color:var(--texte);margin:0}

/* entête */
.hdr{position:sticky;top:12px;z-index:20;padding:0 20px}
.hdr .bar{max-width:1180px;margin:12px auto 0;background:rgba(246,246,246,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 20px}
.logo{white-space:nowrap;font:700 22px/1 "SG",sans-serif;letter-spacing:-.03em;text-decoration:none;color:var(--noir)}
.logo span{color:var(--rouge)}
.menu{display:flex;gap:28px}
.menu a{text-decoration:none;font-weight:500;font-size:15px}
.menu a:hover{color:var(--rouge)}
@media(max-width:900px){.menu{display:none}.hdr .court{display:none}.hdr .btn{padding:6px 6px 6px 16px;font-size:14px}.hdr .btn i{width:30px;height:30px}}

/* héros */
.hero{padding:70px 0 0;text-align:center;background:linear-gradient(180deg,#fff 0,#fff 30%,var(--peche) 100%);overflow:hidden;position:relative}
.hero h1{font-size:clamp(40px,7vw,78px);margin:22px auto 20px;max-width:900px}
.hero .sous{color:var(--texte);max-width:620px;margin:0 auto 30px;font-size:17px}
.hero .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.scene{position:relative;height:520px;max-width:1100px;margin:60px auto 0}
.scene:before{content:"";position:absolute;left:50%;top:150px;width:1300px;height:1300px;transform:translateX(-50%);border-radius:50%;background:#fff;opacity:.55}
.tel{position:absolute;left:50%;top:0;transform:translateX(-50%);width:290px;height:560px;background:#111;border-radius:46px;padding:10px;box-shadow:0 40px 80px rgba(0,0,0,.18);z-index:3}
.tel .ecran{background:#fff;border-radius:37px;height:100%;overflow:hidden;position:relative;text-align:left}
.tel .encoche{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:96px;height:26px;background:#111;border-radius:20px;z-index:2}
.tel .heure{font:600 12px/1 "In";padding:16px 22px 0}
.post-h{display:flex;align-items:center;gap:9px;padding:20px 14px 10px;font-size:12px;line-height:1.25}
.post-h .av{width:30px;height:30px;border-radius:50%;background:var(--rouge);color:#fff;display:grid;place-items:center;font:700 12px "SG"}
.post-h small{display:block;color:#888;font-size:10px}
.post-img{margin:0 10px;height:300px;border-radius:12px;background:#ddd center/cover}
.post-a{display:flex;gap:14px;padding:12px 16px 4px;font-size:12px;color:#222}
.post-t{padding:0 16px;font-size:11.5px;color:#333;line-height:1.45}
.post-t b{font-weight:600}
.post-t span{color:#1d5fbf}
.carte{position:absolute;background:#fff;border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.08);padding:16px 18px;text-align:left;z-index:4;font-size:12.5px;color:var(--texte);line-height:1.35}
.carte strong{display:block;color:var(--noir);font:700 17px/1.2 "SG";margin-bottom:3px}
.carte .ic{width:34px;height:34px;border-radius:50%;background:var(--peche);color:var(--rouge);display:grid;place-items:center;margin-bottom:10px;font-size:16px}
.courbe{display:block;width:100%;height:46px;margin-top:8px}
.puces{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.puces span{background:var(--peche);color:var(--rouge);border-radius:99px;padding:4px 9px;font:600 11px "In"}
.barres{display:flex;align-items:flex-end;gap:6px;height:56px;margin-top:10px}
.barres i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--rouge2),var(--rouge))}
.barres i:nth-child(-n+3){opacity:.45}
.coeur{color:var(--rouge)}
.vign{position:absolute;width:118px;height:150px;border-radius:16px;background:#ddd center/cover;box-shadow:0 18px 40px rgba(0,0,0,.12);z-index:2}
.vign em{position:absolute;left:-10px;bottom:-10px;background:#fff;border-radius:8px;font:600 11px/1 "In";font-style:normal;padding:7px 10px;color:var(--noir);box-shadow:0 6px 16px rgba(0,0,0,.1)}
.c1{left:calc(50% - 400px);top:10px;width:205px;transform:rotate(-5deg)}
.c2{left:calc(50% - 385px);top:250px;width:205px;transform:rotate(-3deg)}
.c3{left:calc(50% + 230px);top:0;width:205px;transform:rotate(3deg)}
.c4{left:calc(50% + 205px);top:255px;width:200px;transform:rotate(-2deg)}
.v1{left:calc(50% - 540px);top:120px;transform:rotate(-7deg)}
.v2{left:calc(50% + 160px);top:-30px;width:92px;height:116px;transform:rotate(5deg);z-index:1}
.v3{left:calc(50% + 425px);top:230px;transform:rotate(6deg)}
.flot{animation:flot 6s ease-in-out infinite}
.flot.d2{animation-delay:-2s}.flot.d3{animation-delay:-4s}
@keyframes flot{50%{translate:0 -10px}}
@media(max-width:1180px){.vign.v1,.vign.v3{display:none}}
@media(prefers-reduced-motion:reduce){.flot{animation:none}}
@media(max-width:900px){
 .scene{height:auto;padding-bottom:30px;display:flex;flex-direction:column;align-items:center}
 .scene:before,.vign{display:none}
 .tel{position:relative;left:auto;transform:none;width:260px;height:500px}
 .post-img{height:260px}
 .carte{position:relative;left:auto!important;right:auto!important;top:auto!important;transform:none!important;width:min(320px,100%)!important;margin-top:14px}
 .carte.c3,.carte.c4,.carte.c2{display:none}
}

/* pourquoi */
.pq{display:grid;grid-template-columns:1.05fr 1.6fr;gap:60px;align-items:start}
.pq h2{font-size:clamp(32px,4vw,44px);margin:16px 0 18px}
.pq p{color:var(--texte)}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.chiffre{border-left:1px solid var(--ligne);padding-left:22px;position:relative}
.chiffre:before{content:"";position:absolute;left:-6px;top:0;width:11px;height:11px;border-radius:50%;border:2px solid var(--rouge);background:#fff}
.chiffre .n{font:700 46px/1 "SG";margin:30px 0 10px}
.chiffre .n b{color:var(--rouge);font-size:.5em;letter-spacing:-.01em}
.chiffre h3{font:600 13px/1.3 "In";letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px}
.chiffre p{font-size:14.5px;margin:0}
.mosaique{margin-top:70px;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:18px;height:420px}
.mosaique figure{margin:0;border-radius:var(--r);background:#ccc center/cover;position:relative}
.mosaique figure:nth-child(2){margin-top:-30px}
.mosaique figcaption{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:99px;padding:7px 14px;font:600 13px "In"}
.defile{overflow:hidden;white-space:nowrap;margin-top:40px}
.defile div{display:inline-block;font:700 clamp(60px,10vw,130px)/1 "SG";color:#f0f0f0;letter-spacing:-.02em;animation:defile 30s linear infinite}
@keyframes defile{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.defile div{animation:none}}
@media(max-width:900px){.pq{grid-template-columns:1fr;gap:40px}.chiffres{grid-template-columns:1fr}.mosaique{grid-template-columns:1fr 1fr;height:auto}.mosaique figure{height:200px}.mosaique figure:nth-child(2){margin-top:0}.mosaique figure:nth-child(3){grid-column:span 2}}

/* services */
.services{background:var(--gris)}
.ligne-s{display:grid;grid-template-columns:80px 1.1fr 1.2fr 60px;align-items:center;gap:24px;padding:26px 14px;border-bottom:1px solid var(--ligne)}
.ligne-s:first-of-type{border-top:1px solid var(--ligne)}
.ligne-s .num{font:500 30px/1 "SG";color:#d4d4d6;border-right:1px solid var(--ligne)}
.ligne-s h3{font-size:24px}
.ligne-s p{color:var(--texte);margin:0;font-size:15px}
.ligne-s .fl{width:50px;height:50px;border-radius:50%;border:1.5px solid var(--rouge);color:var(--rouge);display:grid;place-items:center;font-size:18px;transition:.2s}
.ligne-s:hover .fl{background:var(--rouge);color:#fff}
.ligne-s .bientot{font:600 11px "In";background:var(--peche);color:var(--rouge);border-radius:99px;padding:4px 9px;vertical-align:middle;margin-left:8px;letter-spacing:.04em}
@media(max-width:800px){.ligne-s{grid-template-columns:50px 1fr;gap:6px 16px}.ligne-s .num{font-size:22px;border:0;grid-row:span 2}.ligne-s .fl{display:none}.ligne-s h3{font-size:20px}}

/* métiers */
.entete2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:46px}
.entete2 h2{font-size:clamp(32px,4.4vw,46px);margin-top:14px}
.entete2 p{color:var(--texte);margin:0}
.metiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.metier{background:var(--gris);border-radius:var(--r);padding:8px;overflow:hidden}
.metier .ph{height:230px;border-radius:16px;background:#ccc center/cover}
.metier div.t{padding:18px 16px 14px}
.metier small{font:600 11px "In";letter-spacing:.1em;text-transform:uppercase;color:var(--texte)}
.metier h3{font-size:24px;margin:6px 0 8px}
.metier p{color:var(--texte);margin:0;font-size:14.5px}
.autres{margin-top:30px;text-align:center;color:var(--texte)}
@media(max-width:900px){.entete2{grid-template-columns:1fr;gap:16px}.metiers{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.metiers{grid-template-columns:1fr}}

/* étapes */
.etapes-s{background:var(--gris)}
.cercle{position:relative;width:min(560px,100%);aspect-ratio:1;margin:0 auto}
.cercle:before{content:"";position:absolute;inset:60px;border:1.5px dashed #ddd;border-radius:50%}
.et{position:absolute;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%;background:#fff;box-shadow:0 0 0 14px rgba(0,0,0,.025);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0;text-align:center;font:600 14px/1.2 "SG";cursor:pointer;border:0;color:var(--noir);transition:.25s}
.et span{display:block;font-size:22px;line-height:1;color:var(--rouge)}
.et.actif,.et:hover{background:var(--rouge);color:#fff}
.et.actif span,.et:hover span{color:#fff}
.et:nth-of-type(1){left:50%;top:60px}
.et:nth-of-type(2){left:calc(100% - 60px);top:50%}
.et:nth-of-type(3){left:50%;top:calc(100% - 60px)}
.et:nth-of-type(4){left:60px;top:50%}
.cercle .txt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:210px;text-align:center;color:var(--texte);font-size:14.5px}
.cercle .txt b{display:block;color:var(--noir);font:700 18px "SG";margin-bottom:6px}
@media(max-width:560px){.cercle{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}.cercle:before{display:none}.et{position:static;margin:0;width:auto;height:110px;border-radius:20px}.cercle .txt{position:static;transform:none;grid-column:span 2;width:auto;margin-top:10px}}

/* confiance */
.conf{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center}
.conf h2{font-size:clamp(32px,4.4vw,46px);margin:14px 0 16px}
.conf>div>p{color:var(--texte)}
.garanties{background:var(--peche);border-radius:var(--r);padding:34px;display:grid;gap:22px}
.garantie{display:flex;gap:16px}
.garantie .ic{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--rouge);display:grid;place-items:center;font-size:19px}
.garantie h3{font-size:18px;margin:2px 0 4px}
.garantie p{margin:0;color:var(--texte);font-size:14.5px}
.garantie a{color:var(--rouge)}
@media(max-width:900px){.conf{grid-template-columns:1fr}}

/* offre */
.offre{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.of{border:1px solid var(--ligne);border-radius:var(--r);padding:30px}
.of.mise{background:var(--noir);color:#fff;border-color:var(--noir)}
.of h3{font-size:24px;margin-bottom:10px}
.of .px{font:700 40px/1 "SG";margin:14px 0 6px}
.of .px small{font:500 15px "In";color:var(--texte)}
.of.mise .px small,.of.mise p,.of.mise li{color:#c9c9cc}
.of p{color:var(--texte);margin:0 0 16px;font-size:14.5px}
.of ul{list-style:none;padding:0;margin:0 0 24px;font-size:14.5px}
.of li{padding:7px 0 7px 26px;position:relative;color:var(--texte)}
.of li:before{content:"✓";position:absolute;left:0;color:var(--rouge);font-weight:700}
@media(max-width:900px){.offre{grid-template-columns:1fr}}

/* FAQ */
.faq-s{background:var(--gris)}
.faq{max-width:800px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:0 20px}
.faq details[open]{background:var(--peche);border-color:transparent}
.faq summary{list-style:none;cursor:pointer;padding:18px 30px 18px 0;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:0;top:14px;font-size:22px;color:var(--rouge)}
.faq details[open] summary:after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--texte);font-size:15px}

/* appel */
.appel{background:var(--gris);border-radius:28px;display:grid;grid-template-columns:1.2fr 1fr;align-items:end;overflow:hidden;padding:60px 60px 0}
.appel h2{font-size:clamp(36px,5vw,58px);margin-bottom:18px}
.appel p{color:var(--texte);max-width:470px}
.appel .g{padding-bottom:60px}
.appel .tel{position:relative;left:auto;transform:none;margin:0 auto;height:440px;border-radius:46px 46px 0 0;padding-bottom:0}
.appel .tel .ecran{border-radius:37px 37px 0 0}
@media(max-width:900px){.appel{grid-template-columns:1fr;padding:40px 24px 0}.appel .g{padding-bottom:30px}.appel .tel{width:240px;height:380px}}

/* pied */
.pied{background:#000;color:#bdbdc1;padding:80px 0 0;position:relative;overflow:hidden}
.pied .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;position:relative;z-index:2}
.pied .logo{color:#fff;font-size:28px}
.pied h3{color:#fff;font:600 17px "SG";margin-bottom:22px;position:relative}
.pied h3:after{content:"";position:absolute;left:0;bottom:-10px;width:28px;height:2px;background:var(--rouge)}
.pied ul{list-style:none;margin:0;padding:0;font-size:14.5px}
.pied li{margin:9px 0}
.pied a{text-decoration:none}
.pied a:hover{color:#fff}
.pied p{font-size:14.5px}
.boite{border:1px solid #2a2a2c;background:#111113;border-radius:18px;padding:24px}
.boite h3:after{display:none}
.boite .btn{margin-top:6px}
.geant{font:700 clamp(54px,16.5vw,236px)/.8 "SG";color:transparent;-webkit-text-stroke:1px #2a2a2d;letter-spacing:-.04em;text-align:center;white-space:nowrap;margin:60px 0 0;user-select:none}
.bas{border-top:1px solid #1f1f22;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 20px 26px;font-size:13.5px;position:relative;z-index:2;background:#000}
.bas a{margin-left:16px}
@media(max-width:900px){.pied .cols{grid-template-columns:1fr 1fr}.bas a{margin:0 14px 0 0}}
@media(max-width:560px){.pied .cols{grid-template-columns:1fr}}

.apparait{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.apparait.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.apparait{opacity:1;transform:none;transition:none}}
