/* Accueil : volet qui se lève, diagnostic, sections. Repris de demo-erm/index.html. */

.express{white-space:nowrap;display:inline-flex;align-items:center;gap:.65rem;background:var(--rouge);color:#fff;border-radius:999px;padding:.55rem 1.1rem .55rem .8rem;font-weight:600;font-size:.98rem;box-shadow:0 14px 30px -14px rgba(177,18,38,.8)}
.express i{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:dotw 1.8s infinite}
@keyframes dotw{70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.express b{font-family:var(--titre);font-weight:800;letter-spacing:.01em}
.express em{font-style:normal;opacity:.55}

/* ouverture : le volet qui se lève */
.erm main .hero{position:relative;padding:0;min-height:calc(100vh - 74px);min-height:calc(100svh - 74px);overflow:hidden;display:flex;align-items:center;background:#2b2a27}
.hero-img{position:absolute;inset:0;overflow:hidden}
.hero-img picture,.hero-img img{width:100%;height:100%}
.hero-img img{object-fit:cover;object-position:60% 6%;transform-origin:72% 14%;filter:brightness(.42) saturate(.7);transition:filter 2.2s var(--ease) .5s}
.hero.open .hero-img img{filter:none;animation:zoom 18s ease-in-out 1.2s infinite alternate}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.12) translate3d(-1.2%,1%,0)}}
.hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,247,240,.96) 0%,rgba(250,247,240,.88) 30%,rgba(250,247,240,.35) 52%,rgba(250,247,240,0) 66%)}
.beam{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,228,170,0) 46%,rgba(255,228,170,.35) 54%,rgba(255,228,170,0) 64%);opacity:0;mix-blend-mode:screen}
.hero.open .beam{animation:beam 3.2s var(--ease) .9s both}
@keyframes beam{0%{opacity:0;transform:translateX(-12%)}40%{opacity:1}100%{opacity:.55;transform:translateX(0)}}
.hero .wrap{position:relative;z-index:3;padding:64px 0 96px}
.hero-txt{max-width:560px}
.hero .kick{margin-top:1rem}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.6rem);font-weight:800;margin:.9rem 0 1.2rem}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.hero h1 em{font-style:normal;color:var(--rouge)}
.hero.open h1 .l span{transform:none}
.hero.open h1 .l:nth-child(2) span{transition-delay:.12s}
.hero.open h1 .l:nth-child(3) span{transition-delay:.24s}
.hero-sub{font-size:1.12rem;color:#3c475a;max-width:500px}
.hero .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.chip{font-size:.82rem;font-weight:500;background:#fff;border:1px solid var(--trait);border-radius:999px;padding:.35rem .8rem;color:var(--ardoise-2)}
.fade{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero.open .fade{opacity:1;transform:none}
.hero.open .fade.d1{transition-delay:.45s}.hero.open .fade.d2{transition-delay:.6s}.hero.open .fade.d3{transition-delay:.75s}.hero.open .fade.d4{transition-delay:.3s}
.scroll{position:absolute;left:50%;bottom:22px;z-index:3;width:24px;height:38px;border:2px solid var(--ardoise-2);border-radius:14px;opacity:.5;transform:translateX(-50%)}
.scroll::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;border-radius:2px;background:var(--ardoise-2);transform:translateX(-50%);animation:sc 1.8s infinite}
@keyframes sc{60%{transform:translate(-50%,10px);opacity:0}100%{opacity:0}}

.volet{position:absolute;inset:0;z-index:10;pointer-events:none}
.coffre{position:absolute;left:0;right:0;top:0;height:30px;background:linear-gradient(180deg,#f4f5f6,#d9dde1 70%,#b9c0c6);box-shadow:0 6px 14px rgba(0,0,0,.25);z-index:3}
.tablier{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 6%,transparent 94%,rgba(0,0,0,.18)),repeating-linear-gradient(180deg,#E9ECEF 0,#f6f7f8 7px,#C9D0D6 30px,#9AA4AD 37px,#7d8790 38px,#E9ECEF 40px);will-change:transform}
.tablier::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(180deg,#c3cad0,#8c959e);box-shadow:0 -1px 0 #fff inset}
.tablier .lueur{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 37px,rgba(255,226,160,0) 37px 38px);transition:background .4s}
.volet.go .tablier{animation:monte 2.1s cubic-bezier(.55,.05,.25,1) .55s forwards}
.volet.go .tablier .lueur{background:repeating-linear-gradient(180deg,transparent 0 37px,rgba(255,226,160,.9) 37px 38.5px)}
@keyframes monte{0%{transform:translateY(0)}12%{transform:translateY(-3%)}18%{transform:translateY(-2.4%)}100%{transform:translateY(-100%)}}
.volet.done{display:none}
.volet .mot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;font-family:var(--titre);font-weight:800;color:var(--ardoise);font-size:clamp(1rem,2vw,1.3rem);letter-spacing:.2em;text-transform:uppercase;opacity:.55;transition:opacity .3s}
.volet.go .mot{opacity:0}
/* sans script : contenu visible tout de suite */
.no-js .volet{display:none}
.no-js .fade,.no-js .hero h1 .l span{opacity:1;transform:none}
.no-js .hero-img img{filter:none}

/* bande de confiance */
.band{background:var(--ardoise);color:#e2e8f0;padding:26px 0}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.band .wrap > div{display:flex;gap:.8rem;align-items:center;font-size:.93rem}
.band svg{flex:0 0 34px;height:34px;color:#fca5a5}
.band b{color:#fff;display:block;font-family:var(--titre);font-size:1.02rem}

/* diagnostic */
.erm main .diag{background:var(--sable)}
.diag-box{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.steps-ind{display:flex;gap:.5rem;margin-bottom:1.2rem}
.steps-ind span{flex:1;height:4px;border-radius:4px;background:var(--trait);transition:background .4s}
.steps-ind span.on{background:var(--rouge)}
.q{display:none}.q.on{display:block;animation:qin .5s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateY(10px)}}
.q h3{font-size:1.35rem;margin-bottom:1rem}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.opt{background:#fff;border:1.5px solid var(--trait);border-radius:14px;padding:1rem 1.1rem;text-align:left;font-family:var(--ui);font-size:.97rem;cursor:pointer;display:flex;gap:.8rem;align-items:center;transition:border-color .2s,transform .2s,box-shadow .2s;color:var(--txt)}
.opt:hover,.opt:focus-visible{border-color:var(--rouge);transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(30,41,59,.4)}
.opt .ic{flex:0 0 40px;height:40px;border-radius:10px;background:var(--creme);display:grid;place-items:center;color:var(--rouge)}
.opt .ic svg{width:22px;height:22px}
.opt small{display:block;color:var(--gris);font-size:.8rem}
.opts-eq{grid-template-columns:repeat(3,1fr)}
.opts-eq .opt{flex-direction:column;align-items:flex-start;gap:.6rem}
.sits .opt{min-height:64px}
.hero-aussi{margin-top:1.1rem;font-size:.92rem;color:#475569}
.hero-aussi a{color:var(--ardoise);font-weight:600;text-decoration:underline;text-decoration-color:rgba(177,18,38,.4);text-underline-offset:3px}
.hero-aussi a:hover{color:var(--rouge)}
.back{background:none;border:0;color:var(--gris);font-family:var(--ui);cursor:pointer;margin-top:.8rem;font-size:.9rem;padding:0}
.side{background:#fff;border:1px solid var(--trait);border-radius:20px;padding:26px;position:sticky;top:100px}
.side h4{font-size:1.1rem;margin-bottom:.6rem}
.side .tip{font-size:.95rem;color:#475569}
.side .tip p{margin-bottom:.7rem}
.side .tip strong{color:var(--ardoise)}
.side .ph{display:flex;gap:.6rem;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--trait);font-size:.9rem;color:var(--gris)}
.side .ph svg{flex:0 0 20px}
.side .ph a{color:#128C4A;font-weight:600;text-decoration:underline}

/* deux entrées */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ent{position:relative;border-radius:24px;overflow:hidden;min-height:600px;display:flex;flex-direction:column;justify-content:flex-end;padding:34px;color:#fff;isolation:isolate}
.ent.dep{background:var(--ardoise)}
.ent .bg{position:absolute;inset:0;z-index:-2}
.ent .bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ent:hover .bg img{transform:scale(1.05)}
.ent::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,22,34,.05) 0%,rgba(15,22,34,.25) 28%,rgba(15,22,34,.82) 52%,rgba(15,22,34,.94))}
.ent.dep::before{background:radial-gradient(120% 80% at 80% 0%,rgba(177,18,38,.45),transparent 60%)}
.erm .ent h3{color:#fff;font-size:2rem;margin:.5rem 0 .7rem}
.ent p{color:#e2e8f0;max-width:440px}
.ent ul{list-style:none;padding:0;margin:1rem 0 1.4rem;display:flex;flex-wrap:wrap;gap:.45rem}
.ent li{font-size:.83rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:.3rem .7rem;border-radius:99px}
.ent .kick{color:#fca5a5}
.ent-b{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.ent .lien{font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:3px}
.mini{position:relative;align-self:flex-end;margin-bottom:auto;flex:0 0 auto;width:150px;height:170px;border-radius:6px;overflow:hidden;background:linear-gradient(160deg,#ffe2a6,#f6b65f 60%,#d98a3a);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.mini::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,rgba(255,255,255,.5) 48% 52%,transparent 52%),linear-gradient(0deg,transparent 48%,rgba(255,255,255,.5) 48% 52%,transparent 52%)}
.mini .sl{position:absolute;inset:0;background:repeating-linear-gradient(180deg,#e9ecef 0,#f6f7f8 3px,#c9d0d6 12px,#9aa4ad 15px,#e9ecef 16px);transform:translateY(-8%);animation:mini 5s var(--ease) infinite}
.mini .cf{position:absolute;left:0;right:0;top:0;height:12px;background:#d9dde1;z-index:2}
@keyframes mini{0%,15%{transform:translateY(0)}45%,70%{transform:translateY(-88%)}100%{transform:translateY(0)}}

/* déroulé d'une intervention */
.erm main .inter{background:var(--creme)}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.tl::before{content:"";position:absolute;top:27px;left:6%;right:6%;height:2px;background:repeating-linear-gradient(90deg,var(--trait) 0 8px,transparent 8px 14px)}
.st{position:relative}
.st .n{width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--rouge);display:grid;place-items:center;font-family:var(--titre);font-weight:800;color:var(--rouge);font-size:1.2rem;margin-bottom:1.1rem;position:relative}
.st h3{font-size:1.15rem;margin-bottom:.4rem}
.st p{font-size:.95rem;color:#475569}

/* autres métiers */
.erm main .autres{background:var(--ardoise);color:#e2e8f0}
.erm .autres h2{color:#fff}
.autres .kick{color:#fca5a5}
.autres .lead{color:#cbd5e1}
.grid-met{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.met{position:relative;display:flex;flex-direction:column;background:#26324a;border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
a.met:hover,a.met:focus-visible{transform:translateY(-5px);border-color:rgba(252,165,165,.45);box-shadow:0 26px 40px -26px rgba(0,0,0,.7)}
.met-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#1a2436}
.met-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
a.met:hover .met-img img{transform:scale(1.06)}
.met-corps{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:30px 18px 18px;flex:1}
.met-ic{position:absolute;top:-22px;left:16px;width:44px;height:44px;border-radius:12px;background:var(--rouge);color:#fff;display:grid;place-items:center;box-shadow:0 10px 20px -10px rgba(177,18,38,.9)}
.met-ic .erm-ico{width:22px;height:22px}
.met strong{font-family:var(--titre);color:#fff;font-size:1.08rem}
.met-desc{font-size:.88rem;color:#cbd5e1}
.met-plus{margin-top:auto;padding-top:.6rem;font-size:.85rem;font-weight:600;color:#fca5a5}
.met-autre{background:transparent;border:1.5px dashed rgba(252,165,165,.45);justify-content:center}
.met-autre .met-corps{padding:26px 22px;justify-content:center;gap:.6rem}
.met-autre strong{font-size:1.25rem}
.met-autre .erm-btn{align-self:flex-start;margin-top:.6rem;padding:.8rem 1.2rem}

/* zone */
.zone-g{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.zone-g .lead{margin-top:1rem}
.carte{background:#fff;border:1px solid var(--trait);border-radius:24px;padding:24px;aspect-ratio:1/1}
.carte svg{width:100%;height:100%}
.carte .dep{fill:#F7CDD3;stroke:#fff;stroke-width:3}
.carte .c2{fill:#F7CDD3}
.carte .c93{fill:#EC9AA6}
.carte text{font-family:var(--titre);font-weight:800;fill:var(--ardoise-2);font-size:20px}
.pin{animation:pin 2.4s infinite}
@keyframes pin{0%{r:6;opacity:1}100%{r:34;opacity:0}}
.seo{margin-top:1.6rem;font-size:.97rem;color:#475569}



/* réalisations */

@media (max-width:1000px){
  .band .wrap{grid-template-columns:1fr 1fr}
  .grid-met{grid-template-columns:1fr 1fr;gap:16px}
  .tl{grid-template-columns:1fr 1fr;row-gap:36px}.tl::before{display:none}
}
@media (max-width:760px){
  .erm main .hero{min-height:auto;display:block;background:var(--creme)}
  .hero-img{position:relative;height:56vh;min-height:330px;max-height:520px}
  .hero-img img{object-position:50% 4%}
  .hero-veil{top:calc(56vh - 90px);height:90px;background:linear-gradient(180deg,rgba(250,247,240,0),var(--creme))}
  .beam{height:56vh;bottom:auto}
  .hero .wrap{padding:6px 0 56px}
  .hero h1{margin:.6rem 0 .9rem}
  .hero-sub{font-size:1rem}
  .express{font-size:.88rem;padding:.5rem .9rem .5rem .7rem}
  .scroll{display:none}
  .diag-box,.duo,.zone-g{grid-template-columns:1fr}
  .side{position:static}
  .opts{grid-template-columns:1fr}
  .opts-eq{grid-template-columns:1fr 1fr}
  .ent{min-height:440px;padding:26px}
  .mini{width:96px;height:110px}
  .grid-met{grid-template-columns:1fr 1fr;gap:12px}
  .met-corps{padding:28px 14px 14px}
  .met-desc{font-size:.82rem}
  .band .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .volet{display:none}
  .hero-img img{animation:none!important;filter:none}
  .fade,.hero h1 .l span{opacity:1!important;transform:none!important;transition:none!important}
  .mini .sl{animation:none}
}
@media (max-width:480px){.met-desc,.met-plus{display:none}.met strong{font-size:.95rem}.met-corps{padding:26px 12px 14px}.met-ic{width:38px;height:38px;top:-19px;left:12px}.met-autre .met-desc{display:block}.met-autre .erm-btn{font-size:.85rem;padding:.7rem .9rem}}