/* ============ FONTS ============ */
@font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/GeneralSans-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}

/* ============ TOKENS ============ */
:root{
  --encre:#16224E;
  --marine:#1B2A5E;
  --azur:#3E8FD8;
  --lagon:#2AA5A0;
  --ciel:#A9CCE3;
  --coquille:#F6F8FA;
  --or:#E3A84E;
  --display:'Clash Display',sans-serif;
  --texte:'General Sans',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:thin;scrollbar-color:var(--azur) var(--encre)}
body{font-family:var(--texte);background:var(--encre);color:var(--marine);-webkit-font-smoothing:antialiased}
::selection{background:var(--azur);color:#fff}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.04}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ============ LOADER ============ */
#loader{position:fixed;inset:0;z-index:100;background:var(--encre);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .7s ease,visibility .7s}
#loader.done{opacity:0;visibility:hidden}
#loader .word{font-family:var(--display);font-weight:500;font-size:clamp(15px,2vw,19px);letter-spacing:.38em;color:var(--coquille);text-indent:.38em}
#loader .bar{width:min(240px,55vw);height:2px;background:rgba(246,248,250,.14);border-radius:2px;overflow:hidden}
#loader .bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--azur),var(--lagon));transition:width .25s ease}
#loader .pct{font-size:11px;letter-spacing:.22em;color:rgba(246,248,250,.5)}

/* ============ BANDEAU PROMO ============ */
#bandeau-promo{position:fixed;top:0;left:0;right:0;z-index:62;height:38px;background:linear-gradient(90deg,var(--or),#EFC06A 55%,var(--or));color:var(--encre);display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.03em;text-align:center;padding:0 14px}
#bandeau-promo a{text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
@media(max-width:640px){#bandeau-promo{font-size:11px;height:36px}}

/* ============ HEADER ============ */
header{position:fixed;top:38px;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,4vw,54px);color:var(--coquille);transition:color .45s ease,background .45s ease,padding .45s ease;text-shadow:0 1px 14px rgba(10,16,40,.35)}
@media(max-width:640px){header{top:36px}}
header.on-light{color:var(--marine);text-shadow:none}
header.in-content{background:rgba(246,248,250,.94);padding-top:14px;padding-bottom:14px;box-shadow:0 1px 0 rgba(27,42,94,.08)}
header .brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:500;letter-spacing:.18em;font-size:13px;text-indent:.18em}
header .brand .pastille-logo{background:#fff;border-radius:10px;padding:3px 6px;box-shadow:0 2px 10px rgba(10,16,40,.18);display:flex;align-items:center}
header .brand .pastille-logo img{height:30px;width:auto;display:block}
header nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,18px);font-size:13px;letter-spacing:.06em}
header nav a.lien{opacity:.82;transition:opacity .25s;margin-right:clamp(4px,1vw,16px)}
header nav a.lien:hover{opacity:1}
header .btn-tel{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--marine);border-radius:999px;padding:10px 18px;font-weight:600;font-family:var(--texte);font-size:13.5px;box-shadow:0 2px 12px rgba(10,16,40,.18);transition:transform .25s}
header .btn-tel:hover{transform:translateY(-1px)}
header .btn-tel svg{width:15px;height:15px;flex-shrink:0}
header .cta{background:#2B78C0;/* azur accessible 4,6:1 sur blanc */color:#fff;border-radius:999px;padding:10px 20px;font-weight:600;font-size:13.5px;box-shadow:0 4px 16px -4px rgba(62,143,216,.55);transition:transform .25s,background .25s}
header .cta:hover{transform:translateY(-1px);background:#2E7CC4}
/* burger + menu mobile */
#burger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:currentColor}
#burger span{display:block;width:22px;height:2.5px;background:currentColor;border-radius:2px;margin:4.5px 0;transition:transform .3s,opacity .3s}
#menu-mobile{position:fixed;inset:0;z-index:90;background:linear-gradient(165deg,var(--encre),var(--marine) 70%,#23387B);display:flex;flex-direction:column;justify-content:center;padding:40px 34px;gap:6px;opacity:0;visibility:hidden;transform:translateY(-14px);transition:opacity .3s ease,transform .3s ease,visibility .3s}
#menu-mobile.ouvert{opacity:1;visibility:visible;transform:none}
#menu-mobile a{color:var(--coquille);text-decoration:none;font-family:var(--display);font-weight:600;font-size:29px;padding:13px 0;border-bottom:1px solid rgba(246,248,250,.12)}
#menu-mobile a.mm-cta{background:var(--or);color:var(--encre);border:none;border-radius:999px;text-align:center;font-size:18px;padding:16px;margin-top:26px}
#menu-mobile a.mm-tel{border:1px solid rgba(246,248,250,.3);border-radius:999px;text-align:center;font-size:17px;padding:14px;margin-top:12px;font-family:var(--texte);font-weight:600}
#menu-mobile .mm-fermer{position:absolute;top:18px;right:16px;background:none;border:none;color:var(--coquille);font-size:34px;line-height:1;cursor:pointer;padding:8px}
body.menu-ouvert{overflow:hidden}
@media(max-width:760px){
  header{padding:12px 14px}
  header nav{gap:8px}
  header nav a.lien{display:none}
  header .brand > span:last-child{display:none}
  header .brand .pastille-logo{padding:5px 8px;border-radius:12px}
  header .brand .pastille-logo img{height:32px}
  header .btn-tel{font-size:0;gap:0;width:40px;height:40px;padding:0;justify-content:center}
  header .btn-tel svg{width:17px;height:17px}
  header .cta{font-size:12px;padding:9px 13px;white-space:nowrap}
  #burger{display:block}
  #bandeau-promo .lg{display:none}
  #bandeau-promo{font-size:11px;gap:5px}
  #bandeau-promo a{font-size:11px}
}
header .cta{white-space:nowrap}
header .btn-tel{white-space:nowrap}

/* ============ FILM ============ */
#film-scroll{position:relative;height:850vh}
#film-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--encre)}
#film-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#film-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay}
#film-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(10,16,40,.5) 100%)}
#film-fade{position:absolute;inset:0;pointer-events:none;opacity:0;background:var(--coquille)}

/* beats */
.beat{position:absolute;z-index:5;opacity:0;pointer-events:none;color:var(--coquille);will-change:transform,opacity}
.beat .kicker{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--ciel);margin-bottom:18px;font-weight:500}
.beat h1,.beat h2{text-shadow:0 2px 40px rgba(10,16,40,.45)}
#beat-hero{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px}
#beat-hero .word{font-family:var(--display);font-weight:600;font-size:clamp(34px,7.2vw,104px);letter-spacing:.3em;text-indent:.3em;line-height:1.1}
#beat-hero .slogan{margin-top:22px;font-size:clamp(15px,1.7vw,21px);font-weight:400;letter-spacing:.04em;color:rgba(246,248,250,.92)}
#beat-hero .hero-titre{display:flex;flex-direction:column;align-items:center;font-weight:400;margin:0}
#beat-hero .sous{margin-top:18px;font-family:var(--texte);font-size:clamp(13px,1.45vw,17px);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ciel);max-width:22ch;line-height:1.5}
#beat-hero .badges{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#beat-hero .badge-h{display:inline-flex;align-items:center;gap:8px;font-size:clamp(11px,1.2vw,13.5px);font-weight:600;letter-spacing:.05em;padding:9px 18px;border-radius:999px;backdrop-filter:blur(6px)}
#beat-hero .badge-h.dec{background:rgba(246,248,250,.14);border:1px solid rgba(246,248,250,.35);color:var(--coquille)}
#beat-hero .badge-h.promo{background:var(--or);color:var(--encre);pointer-events:auto}
#beat-hero .badge-h svg{width:14px;height:14px;flex-shrink:0}
#beat-hero .hint{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(246,248,250,.65)}
#beat-hero .hint i{display:block;width:1px;height:44px;background:linear-gradient(to bottom,transparent,var(--ciel));animation:drop 2s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
#beat-2{left:clamp(20px,7vw,110px);top:50%;transform:translateY(-50%);max-width:520px}
#beat-2 h2,#beat-3 h2,#beat-4 h2{font-size:clamp(28px,4vw,54px)}
#beat-3{right:clamp(20px,7vw,110px);top:50%;transform:translateY(-50%);max-width:520px;text-align:right}
#beat-4{left:clamp(20px,7vw,110px);top:50%;transform:translateY(-50%);max-width:560px}
.beat ul{list-style:none;margin-top:20px;font-size:clamp(14px,1.4vw,17px);line-height:2;color:rgba(246,248,250,.9)}
.beat ul b{color:var(--ciel);font-weight:500}
#beat-final{inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:clamp(20px,8vw,130px);max-width:min(92vw,860px)}
#beat-final h2{font-size:clamp(32px,5vw,68px)}
#beat-final .cta-final{pointer-events:auto;margin-top:34px;display:inline-flex;align-items:center;gap:12px;background:var(--coquille);color:var(--marine);font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:.05em;padding:16px 30px;border-radius:999px;transition:transform .3s ease,background .3s}
#beat-final .cta-final:hover{transform:translateY(-2px);background:#fff}

/* chapter readout */
#chapitre{position:absolute;z-index:6;left:clamp(20px,4vw,54px);bottom:34px;color:var(--coquille);opacity:0;transition:opacity .5s}
#chapitre.on{opacity:1}
#chapitre .num{font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.3em;color:var(--ciel);text-transform:uppercase}
#chapitre .nom{font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:.06em;margin-top:6px}
#chapitre .rail{margin-top:12px;width:150px;height:1px;background:rgba(246,248,250,.22)}
#chapitre .rail i{display:block;height:100%;width:0%;background:var(--azur)}

/* ============ CONTENU ============ */
main{position:relative;z-index:10;background:var(--coquille)}
.section{padding:clamp(80px,11vw,150px) clamp(20px,7vw,110px)}
.kick{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--azur);font-weight:600;margin-bottom:20px}
.titre{font-size:clamp(30px,4.4vw,58px);color:var(--marine);max-width:16ch}

/* manifesto — landing zone: fond du seam vers coquille géré en JS */
#manifesto{color:var(--marine)}
#manifesto .inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:34px}
#manifesto .slogan-grand{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.6vw,62px);line-height:1.08;color:var(--marine);max-width:19ch}
#manifesto .slogan-grand em{font-style:normal;color:var(--azur)}
#manifesto p{max-width:56ch;font-size:clamp(15px,1.5vw,18px);line-height:1.75;color:#3A4368}

/* métiers */
#metiers{background:var(--coquille)}
#metiers .grille{margin-top:52px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));border-top:1px solid #D8DEE8;border-left:1px solid #D8DEE8}
#metiers .m{border-right:1px solid #D8DEE8;border-bottom:1px solid #D8DEE8;padding:26px 22px 30px;background:var(--coquille);transition:background .35s ease;position:relative;overflow:hidden}
#metiers .m:hover{background:#fff}
#metiers .m .pic{width:46px;height:46px;border-radius:13px;background:#E3EEFB;color:var(--azur);display:flex;align-items:center;justify-content:center;transition:background .35s,color .35s}
#metiers .m .pic svg{width:22px;height:22px}
#metiers .m:hover .pic{background:var(--azur);color:#fff}
#metiers .m h3{font-size:19px;font-weight:600;margin-top:22px;color:var(--marine)}
#metiers .m p{margin-top:8px;font-size:13.5px;line-height:1.6;color:#5A6284}
#metiers .m::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--azur),var(--lagon));transition:width .4s ease}
#metiers .m:hover::after{width:100%}

/* méthode */
#methode{background:var(--marine);color:var(--coquille)}
#methode .titre{color:var(--coquille)}
#methode .etapes{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border-top:1px solid rgba(246,248,250,.16)}
#methode .e{padding:34px 26px 10px;border-left:1px solid rgba(246,248,250,.16)}
#methode .e:first-child{border-left:none;padding-left:0}
#methode .e .idx{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.4vw,44px);color:var(--azur)}
#methode .e h3{font-size:19px;margin-top:16px}
#methode .e p{margin-top:10px;font-size:14px;line-height:1.65;color:rgba(246,248,250,.72)}
#methode .assurance{margin-top:64px;display:flex;flex-wrap:wrap;gap:12px}
#methode .badge{border:1px solid rgba(246,248,250,.25);border-radius:999px;padding:10px 20px;font-size:13px;letter-spacing:.05em;color:rgba(246,248,250,.9)}
#methode .badge b{color:var(--or);font-weight:600}

/* pour qui */
#clients .liste{margin-top:48px}
#clients .c{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:26px 0;border-bottom:1px solid #D8DEE8;transition:padding-left .35s ease}
#clients .c:first-child{border-top:1px solid #D8DEE8}
#clients .c:hover{padding-left:14px}
#clients .c h3{font-size:clamp(20px,2.6vw,32px);font-weight:600;color:var(--marine)}
#clients .c p{font-size:14px;color:#5A6284;text-align:right;max-width:44ch}

/* réalisations — comparateur « coup de rouleau » */
#realisations{background:var(--coquille)}
#realisations .cmp-wrap{margin-top:52px;max-width:1040px}
.cmp{position:relative;width:100%;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--marine);cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 24px 60px -24px rgba(22,34,78,.35)}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:opacity .45s ease}
.cmp .calque-apres{position:absolute;inset:0;pointer-events:none;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.cmp .calque-apres img{position:absolute;inset:0}
.cmp .etq{position:absolute;top:16px;z-index:4;font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.28em;padding:7px 14px;border-radius:999px;pointer-events:none}
.cmp .etq.avant{right:16px;background:rgba(22,34,78,.55);color:var(--coquille);backdrop-filter:blur(4px)}
.cmp .etq.apres{left:16px;background:rgba(246,248,250,.82);color:var(--marine)}
.cmp .barre{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;margin-left:-1.5px;background:linear-gradient(to bottom,var(--azur),var(--lagon));z-index:5;pointer-events:none;box-shadow:0 0 14px rgba(62,143,216,.55)}
.cmp .rouleau{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);z-index:6;pointer-events:none;filter:drop-shadow(0 6px 16px rgba(22,34,78,.45))}
.cmp:focus-visible{outline:3px solid var(--azur);outline-offset:3px}
#realisations .projets{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
#realisations .pj{border:1px solid #C9D2E0;background:transparent;border-radius:999px;padding:11px 20px;font-family:var(--texte);font-size:14px;font-weight:500;color:#3A4368;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:9px}
#realisations .pj .tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--azur);font-weight:600}
#realisations .pj:hover{border-color:var(--azur)}
#realisations .pj.actif{background:var(--marine);border-color:var(--marine);color:var(--coquille)}
#realisations .pj.actif .tag{color:var(--ciel)}
#realisations .aide{margin-top:14px;font-size:12.5px;color:#8A93B0;letter-spacing:.04em}

/* bloc devis (copie haute de page + pages internes) */
#devis-express{padding-top:clamp(90px,12vw,160px)}
.bloc-devis{background:linear-gradient(160deg,#16224E,#1B2A5E 60%,#23387B);border-radius:22px;padding:clamp(28px,4vw,46px);color:var(--coquille);box-shadow:0 30px 70px -40px rgba(22,34,78,.6)}
.bloc-devis .t1{font-family:var(--display);font-weight:600;font-size:clamp(24px,3.4vw,34px);text-align:center}
.bloc-devis .t2{text-align:center;color:var(--ciel);margin:8px 0 26px;font-size:15px}
.bloc-devis form{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px;margin:0 auto}
.bloc-devis input,.bloc-devis select,.bloc-devis textarea{width:100%;border:none;background:#fff;border-radius:12px;padding:16px 17px;font-family:var(--texte);font-size:15.5px;color:var(--marine);outline:3px solid transparent;transition:outline-color .2s}
.bloc-devis input:focus,.bloc-devis select:focus,.bloc-devis textarea:focus{outline-color:var(--azur)}
.bloc-devis ::placeholder{color:#8A93B0}
.bloc-devis .large{grid-column:span 2}
.bloc-devis textarea{min-height:110px;resize:vertical}
.bloc-devis select{appearance:none;color:var(--marine)}
.bloc-devis .rgpd{grid-column:span 2;display:flex;gap:10px;font-size:12.5px;color:var(--ciel);line-height:1.55;align-items:flex-start}
.bloc-devis .rgpd input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--azur)}
.bloc-devis .rgpd a{color:var(--coquille);text-decoration:underline}
.bloc-devis button[type=submit]{grid-column:span 2;background:var(--or);color:var(--encre);border:none;border-radius:999px;padding:18px;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.03em;cursor:pointer;transition:transform .2s,filter .2s}
.bloc-devis button[type=submit]:hover{transform:translateY(-2px);filter:brightness(1.06)}
.bloc-devis .confiance{grid-column:span 2;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ciel);margin-top:4px}
.bloc-devis form.envoi button[type=submit]{filter:grayscale(.4);cursor:wait}
.bloc-devis .succes{max-width:560px;margin:0 auto;text-align:center;animation:apparait .55s cubic-bezier(.2,.9,.3,1.2)}
.bloc-devis .succes svg{width:82px;height:82px;display:block;margin:0 auto 16px}
.bloc-devis .succes .c1{fill:none;stroke:var(--lagon);stroke-width:5;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;animation:trace .7s .15s ease-out forwards}
.bloc-devis .succes .c2{fill:none;stroke:var(--coquille);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:trace .45s .75s ease-out forwards}
.bloc-devis .succes h3{font-family:var(--display);font-weight:600;font-size:24px}
.bloc-devis .succes p{margin-top:8px;color:rgba(246,248,250,.85);font-size:14.5px;line-height:1.7}
.bloc-devis [hidden]{display:none!important}
@media(max-width:560px){.bloc-devis form{grid-template-columns:1fr}.bloc-devis .large,.bloc-devis .rgpd,.bloc-devis button[type=submit],.bloc-devis .confiance{grid-column:span 1}}

/* cas clients — bento avec balayage avant/après */
#cas-clients{background:var(--coquille)}
.bento{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:52px}
.bcase{display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--marine);box-shadow:0 14px 40px -26px rgba(22,34,78,.45);transition:transform .3s ease,box-shadow .3s ease}
.bcase:hover{transform:translateY(-4px);box-shadow:0 22px 50px -24px rgba(22,34,78,.55)}
.bcase.grande{grid-row:span 2}
.bcase .visuel{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(150deg,var(--marine),#23387B)}
.bcase.grande .visuel{aspect-ratio:auto;flex:1;min-height:300px}
.bcase .visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bcase .visuel img.ap{clip-path:inset(0 100% 0 0);animation:balayage 6s ease-in-out infinite}
.bcase .visuel::after{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:linear-gradient(to bottom,var(--azur),var(--lagon));box-shadow:0 0 12px rgba(62,143,216,.6);animation:balayage-ligne 6s ease-in-out infinite;z-index:2}
@keyframes balayage{0%,8%{clip-path:inset(0 100% 0 0)}42%,58%{clip-path:inset(0 0 0 0)}92%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes balayage-ligne{0%,8%{left:0}42%,58%{left:calc(100% - 3px)}92%,100%{left:0}}
.bcase .visuel .et{position:absolute;top:12px;z-index:3;font-family:var(--display);font-weight:500;font-size:10.5px;letter-spacing:.22em;padding:5px 12px;border-radius:99px}
.bcase .visuel .et.avl{left:12px;background:rgba(246,248,250,.85);color:var(--marine)}
.bcase .visuel .et.apl{right:12px;background:rgba(22,34,78,.55);color:var(--coquille);backdrop-filter:blur(3px)}
.bcase .visuel .sans-photo{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--ciel);font-size:13px}
.bcase .visuel.vide img,.bcase .visuel.vide::after,.bcase .visuel.vide .et{display:none}
.bcase .visuel.vide .sans-photo{display:flex}
.bcase .infos{padding:20px 22px 22px}
.bcase .tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--azur)}
.bcase h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.9vw,24px);margin:8px 0 14px;line-height:1.15}
.bcase .chiffres{display:flex;border-top:1px solid #E4E8F1;padding-top:14px}
.bcase .chiffres div{flex:1;text-align:center;border-left:1px solid #E4E8F1;padding:0 8px}
.bcase .chiffres div:first-child{border-left:none}
.bcase .chiffres b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px);color:var(--marine)}
.bcase .chiffres span{font-size:11px;color:#6A739A;letter-spacing:.04em}
.bcase .voir{display:inline-block;margin-top:14px;font-weight:600;font-size:13.5px;color:var(--azur)}
@media(max-width:860px){.bento{grid-template-columns:1fr}.bcase.grande{grid-row:auto}.bcase.grande .visuel{aspect-ratio:16/10;min-height:0}}
@media (prefers-reduced-motion: reduce){.bcase .visuel img.ap{animation:none;clip-path:inset(0 50% 0 0)}.bcase .visuel::after{animation:none;left:50%}}

/* équipe — effectifs par corps de métier */
#equipe .effectifs{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid #D8DEE8;border-left:1px solid #D8DEE8}
#equipe .e{border-right:1px solid #D8DEE8;border-bottom:1px solid #D8DEE8;padding:34px 26px;background:var(--coquille);transition:background .35s;position:relative;overflow:hidden}
#equipe .e:hover{background:#fff}
#equipe .e .nb{font-family:var(--display);font-weight:600;font-size:clamp(44px,5vw,64px);line-height:1;color:var(--azur)}
#equipe .e h3{font-size:17px;font-weight:600;color:var(--marine);margin-top:12px}
#equipe .e::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--azur),var(--lagon));transition:width .4s ease}
#equipe .e:hover::after{width:100%}
#equipe .total{margin-top:26px;font-size:14.5px;color:#5A6284}
#equipe .total b{color:var(--marine)}

/* avis clients */
#avis{background:var(--coquille);overflow:hidden}
#avis .rail-wrap{position:relative;margin-top:52px}
#avis .rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;scrollbar-width:none;cursor:grab}
#avis .rail::-webkit-scrollbar{display:none}
#avis .rail.drag{cursor:grabbing;scroll-snap-type:none}
#avis .carte{position:relative;flex:0 0 clamp(300px,27vw,390px);border-radius:18px;scroll-snap-align:start;background:#fff;box-shadow:0 16px 44px -24px rgba(22,34,78,.32);border:1px solid #E4E8F1;display:flex;flex-direction:column}
#avis .carte .texte{padding:26px 26px 24px;display:flex;flex-direction:column;flex:1}
#avis .carte .guillemet{font-family:var(--display);font-weight:600;font-size:52px;line-height:.6;color:var(--ciel);margin-bottom:16px}
#avis .carte .chiffre{font-family:var(--display);font-weight:600;font-size:clamp(30px,3vw,40px);line-height:1;color:var(--azur)}
#avis .carte .chiffre-l{margin-top:5px;font-size:13.5px;font-weight:500;color:#5A6284}
#avis .carte blockquote{margin:16px 0 0;font-size:14.5px;line-height:1.65;color:#26305C;flex:1}
#avis .carte .qui{margin-top:18px;font-weight:600;font-size:14px;color:var(--marine)}
#avis .carte .quoi{margin-top:3px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A93B0}
#avis .carte .etoiles{margin-top:6px;color:var(--or);font-size:13px;letter-spacing:2px}
#avis .fleches{display:flex;gap:10px;margin-top:6px;justify-content:flex-end}
#avis .fl{width:46px;height:46px;border-radius:999px;border:1px solid #C9D2E0;background:transparent;color:var(--marine);font-size:18px;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}
#avis .fl:hover{background:var(--marine);color:var(--coquille);border-color:var(--marine)}

/* partenaires — marquee */
#partenaires{background:#fff;padding:clamp(50px,6vw,80px) 0;overflow:hidden}
#partenaires .kick{text-align:center;margin-bottom:34px}
#partenaires .bande{display:flex;width:max-content;animation:defile 30s linear infinite}
#partenaires .bande:hover{animation-play-state:paused}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#partenaires .p{display:flex;align-items:center;gap:12px;margin:0 clamp(24px,3.5vw,50px);white-space:nowrap;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.9vw,24px);letter-spacing:.06em;color:#9AA3BE;transition:color .3s}
#partenaires .p:hover{color:var(--marine)}
#partenaires .p img{height:clamp(34px,4vw,52px);width:auto;display:block;filter:grayscale(1) opacity(.65);transition:filter .3s}
#partenaires .p:hover img{filter:grayscale(0) opacity(1)}
#partenaires .p .nom{display:none}
#partenaires .p.sans-img img{display:none}
#partenaires .p.sans-img .nom{display:inline-flex;align-items:center;gap:12px}
#partenaires .p .rond{width:9px;height:9px;border-radius:99px;background:var(--ciel);flex-shrink:0}
@media (prefers-reduced-motion: reduce){#partenaires .bande{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* formulaire de contact */
#contact .formulaire{max-width:640px;margin:44px auto 0;text-align:left;display:grid;grid-template-columns:1fr 1fr;gap:12px}
#contact .formulaire input,#contact .formulaire select,#contact .formulaire textarea{width:100%;border:1px solid rgba(246,248,250,.25);background:rgba(246,248,250,.07);border-radius:11px;padding:13px 15px;font-family:var(--texte);font-size:14px;color:var(--coquille);outline:none;transition:border-color .25s}
#contact .formulaire input::placeholder,#contact .formulaire textarea::placeholder{color:rgba(246,248,250,.45)}
#contact .formulaire input:focus,#contact .formulaire select:focus,#contact .formulaire textarea:focus{border-color:var(--azur)}
#contact .formulaire select{appearance:none;color:rgba(246,248,250,.85)}
#contact .formulaire select option{color:var(--marine)}
#contact .formulaire .large{grid-column:span 2}
#contact .formulaire textarea{min-height:110px;resize:vertical}
#contact .formulaire button{grid-column:span 2;background:var(--azur);color:#fff;border:none;border-radius:999px;padding:15px;font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:.04em;cursor:pointer;transition:transform .25s,background .25s}
#contact .formulaire button:hover{transform:translateY(-1px);background:#2E7CC4}
#contact .formulaire button:disabled{opacity:.6;cursor:wait}
#contact .promo-note{grid-column:span 2;display:flex;align-items:center;gap:10px;background:rgba(227,168,78,.15);border:1px solid rgba(227,168,78,.45);border-radius:11px;padding:11px 15px;font-size:13.5px;color:var(--or);font-weight:600}
#contact .form-ok{grid-column:span 2;background:rgba(42,165,160,.18);border:1px solid rgba(42,165,160,.5);border-radius:11px;padding:13px 15px;font-size:14px;color:#7FE0DB;display:none}
@media(max-width:640px){#contact .formulaire{grid-template-columns:1fr}#contact .formulaire .large,#contact .formulaire button,#contact .promo-note,#contact .form-ok{grid-column:span 1}}

/* CTA */
#contact{background:linear-gradient(160deg,var(--encre),var(--marine) 60%,#23387B);color:var(--coquille);text-align:center}
#contact .kick{color:var(--ciel)}
#contact .titre{color:var(--coquille);margin:0 auto;max-width:20ch}
#contact .tel-grand{display:inline-block;margin-top:44px;font-family:var(--display);font-weight:600;font-size:clamp(34px,6vw,80px);letter-spacing:.04em;color:var(--coquille);transition:color .3s}
#contact .tel-grand:hover{color:var(--or)}
#contact .mail{display:inline-block;margin-top:18px;font-size:clamp(15px,1.8vw,20px);color:var(--ciel);border-bottom:1px solid rgba(169,204,227,.4);padding-bottom:3px}
#contact .zone{margin-top:34px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,248,250,.6)}
#contact .note{margin-top:10px;font-size:14px;color:rgba(246,248,250,.75)}

/* footer */
footer{background:var(--encre);color:rgba(246,248,250,.75);padding:44px clamp(20px,7vw,110px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;font-size:13px}
footer .fb{display:inline-flex;align-items:center;gap:10px;color:var(--coquille);opacity:.85;transition:opacity .25s}
footer .fb:hover{opacity:1}
footer .fb svg{width:18px;height:18px;fill:currentColor}
footer .word{font-family:var(--display);letter-spacing:.3em;font-size:12px;color:var(--coquille)}

/* mobile (en fin de feuille pour gagner la cascade) */
@media(max-width:760px){
  #beat-hero .word{font-size:clamp(22px,7.6vw,34px);letter-spacing:.14em;text-indent:.14em}
  #beat-hero .slogan{font-size:14px;padding:0 14px}
  #beat-hero .sous{font-size:11.5px;letter-spacing:.09em;margin-top:12px;max-width:26ch}
  #beat-2,#beat-4{left:20px;right:20px;max-width:none}
  #beat-3{text-align:left;right:auto;left:20px;max-width:none}
  #beat-final{padding-left:20px;padding-right:20px}
  #chapitre .rail{width:110px}
  #clients .c{flex-direction:column;align-items:flex-start;gap:8px}
  #clients .c p{text-align:left}
  #equipe .duo{flex-direction:column;gap:34px}
  #equipe .photos{width:100%;overflow-x:auto;padding-bottom:6px}
  #equipe .pcol{flex-direction:row}
  #equipe .pcol.decale{margin-top:0}
  #equipe .photos{flex-wrap:wrap}
  #equipe .ph{width:calc(50vw - 28px)}
}

/* formulaire v2 — imposant et clair */
#contact .formulaire{max-width:680px;gap:13px;background:rgba(246,248,250,.06);border:1px solid rgba(246,248,250,.14);border-radius:22px;padding:clamp(20px,3vw,34px)}
#contact .formulaire input,#contact .formulaire select,#contact .formulaire textarea{background:#fff;border:none;color:var(--marine);font-size:15.5px;padding:16px 17px;border-radius:12px;outline:3px solid transparent;transition:outline-color .2s}
#contact .formulaire input::placeholder,#contact .formulaire textarea::placeholder{color:#8A93B0}
#contact .formulaire input:focus,#contact .formulaire select:focus,#contact .formulaire textarea:focus{outline-color:var(--azur);border-color:transparent}
#contact .formulaire select{color:var(--marine)}
#contact .formulaire .rgpd{grid-column:span 2;display:flex;gap:10px;font-size:12.5px;color:var(--ciel);line-height:1.55;align-items:flex-start;text-align:left}
#contact .formulaire .rgpd input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--azur)}
#contact .formulaire .rgpd a{color:var(--coquille);text-decoration:underline}
#contact .formulaire button{background:var(--or);color:var(--encre);font-size:18px;padding:18px}
#contact .formulaire button:hover{filter:brightness(1.06)}
#contact .formulaire .confiance{grid-column:span 2;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ciel)}
@media(max-width:560px){#contact .formulaire{grid-template-columns:1fr}#contact .formulaire .large,#contact .formulaire .rgpd,#contact .formulaire button,#contact .formulaire .confiance{grid-column:span 1}}

/* animation succès formulaire */
#contact .formulaire[hidden]{display:none}
#form-succes[hidden]{display:none}
#contact .formulaire.envoi button{background:#7FA8D8;cursor:wait}
#contact .formulaire.envoi button::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;border:2px solid #fff;border-top-color:transparent;border-radius:99px;vertical-align:-2px;animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
#form-succes{max-width:640px;margin:44px auto 0;background:rgba(246,248,250,.07);border:1px solid rgba(246,248,250,.2);border-radius:18px;padding:38px 30px;animation:apparait .55s cubic-bezier(.2,.9,.3,1.2)}
@keyframes apparait{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
#form-succes svg{width:82px;height:82px;display:block;margin:0 auto 18px}
#form-succes .c1{fill:none;stroke:var(--lagon);stroke-width:5;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;animation:trace .7s .15s ease-out forwards}
#form-succes .c2{fill:none;stroke:var(--coquille);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:trace .45s .75s ease-out forwards}
@keyframes trace{to{stroke-dashoffset:0}}
#form-succes h3{font-family:var(--display);font-weight:600;font-size:26px}
#form-succes p{margin-top:10px;font-size:15px;line-height:1.7;color:rgba(246,248,250,.85)}
@media (prefers-reduced-motion: reduce){
  #form-succes,#form-succes .c1,#form-succes .c2{animation:none;stroke-dashoffset:0}
}

/* reveals contenu */
.rvl{opacity:0;transform:translateY(34px)}
@media (prefers-reduced-motion: reduce){
  .rvl{opacity:1;transform:none}
  #beat-hero .hint i{animation:none}
}

/* ---- sceau garantie décennale ---- */
.sceau-dec{display:inline-flex;align-items:center;gap:16px;background:#fff;border:1px solid rgba(27,42,94,.10);border-radius:16px;padding:12px 20px 12px 12px;box-shadow:0 20px 44px -26px rgba(10,16,40,.75);text-align:left}
.sceau-dec img{width:106px;height:80px;object-fit:contain;flex-shrink:0;display:block}
.sceau-dec .txt{font-size:13px;line-height:1.5;color:#2E3860}
.sceau-dec .txt b{display:block;font-family:'Clash Display',sans-serif;font-weight:600;font-size:15.5px;letter-spacing:.02em;margin-bottom:2px;color:var(--encre)}
.sceau-wrap{display:flex;justify-content:center;margin:0 0 26px}
.sceau-dec.grand{max-width:660px;gap:24px;padding:18px 30px 18px 18px;border-radius:20px}
.sceau-dec.grand img{width:168px;height:126px}
.sceau-dec.grand .txt{font-size:14.5px;line-height:1.6}
.sceau-dec.grand .txt b{font-size:21px;margin-bottom:4px}
@media(max-width:560px){.sceau-dec,.sceau-dec.grand{flex-direction:column;text-align:center;gap:12px;padding:16px 20px}.sceau-dec.grand img{width:132px;height:99px}}

/* ---- responsive : ancres + sceau ---- */
.sceau-dec{max-width:100%;box-sizing:border-box}
.sceau-wrap{max-width:100%}
@media(max-width:380px){
  .sceau-dec,.sceau-dec.grand{padding:15px 16px;gap:10px}
  .sceau-dec img,.sceau-dec.grand img{width:94px;height:71px}
  .sceau-dec .txt,.sceau-dec.grand .txt{font-size:12.5px}
  .sceau-dec .txt b,.sceau-dec.grand .txt b{font-size:15px}
}
section[id]{scroll-margin-top:124px}
@media(max-width:640px){section[id]{scroll-margin-top:104px}}
@media(max-width:360px){#bandeau-promo{font-size:10.5px;gap:4px;letter-spacing:.01em}}