*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}img{display:block;max-width:100%}h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}ul,ol{list-style:none;padding:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--fond)}
.mods{background:#101418;color:#fff;font:600 .85rem/1.25 Arial,sans-serif;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.1rem;padding-block:.55rem}.mods a{color:#fff;text-underline-offset:3px}.mods a[aria-current]{color:#ffb000;text-decoration:none}.mods .ret{margin-right:auto}.mods span{color:#aab2bd}
.fictif{background:#ffb000;color:#14100a;font:600 .85rem/1.3 Arial,sans-serif;text-align:center;padding-block:.5rem}
.g{padding-left:max(clamp(16px,4vw,56px),env(safe-area-inset-left,0px));padding-right:max(clamp(16px,4vw,56px),env(safe-area-inset-right,0px))}
.c{max-width:1280px;margin-inline:auto;width:100%}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
address{font-style:normal}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Animations d'images, pilotees par le defilement quand le navigateur le permet */
.mv{overflow:clip}.mv-z,.mv-d{view-timeline:--mv block}
@keyframes mv-ouvre{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes mv-zoom{from{transform:scale(1.16)}to{transform:none}}
@keyframes mv-derive{from{transform:translateY(-5%) scale(1.12)}to{transform:translateY(5%) scale(1.12)}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
.mv-o{animation:mv-ouvre linear both;animation-timeline:view();animation-range:entry 5% cover 38%}
.mv-z img,.mv-z .vid{animation:mv-zoom linear both;animation-timeline:--mv;animation-range:entry 0% cover 55%}
.mv-d img{animation:mv-derive linear both;animation-timeline:--mv;animation-range:cover}
}}
/* Reseau travaux : sarcelle, orange, formes arrondies, titres grotesques gras. Choix du projet, avant/apres. */
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--fond:#f4f8f7;--sar:#00514f;--nuit:#062b2b;--or:#fb793e;--pale:#dfeeeb;--ligne:#cfe0dc;--mute:#4b6462;--t:"Plus Jakarta Sans",Arial,sans-serif;color-scheme:light}
body{margin:0;background:var(--fond);color:var(--nuit);font:400 1.03rem/1.6 var(--t)}
h1,h2{font-weight:800;letter-spacing:-.022em;line-height:1.08;text-wrap:balance}h1{font-size:clamp(2.4rem,5.4vw,4.4rem)}h2{font-size:clamp(1.9rem,3.5vw,2.8rem)}h3{font-size:1.15rem;font-weight:700;line-height:1.25}
p{max-width:60ch}a{color:inherit}
.bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + .75rem);z-index:30;margin-top:.75rem;height:0}.bar .c{height:64px;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff;border-radius:18px;padding-inline:clamp(.9rem,2vw,1.4rem);box-shadow:0 10px 30px rgba(6,43,43,.14)}
.logo{font-weight:800;letter-spacing:-.02em;font-size:clamp(1.05rem,1.9vw,1.35rem);text-decoration:none;white-space:nowrap;color:var(--sar)}.logo i{font-style:normal;color:var(--or)}
.bar nav{display:flex;gap:clamp(.8rem,2vw,1.6rem);font-weight:600;font-size:.93rem}.bar nav a{text-decoration:none}.bar nav a:hover{color:var(--or)}
.bt{display:inline-flex;align-items:center;gap:.5rem;background:var(--or);color:#2b1205;font-weight:700;text-decoration:none;padding:.72rem 1.15rem;border-radius:12px;transition:transform .25s,background .25s;white-space:nowrap}.bt:hover{transform:translateY(-2px);background:#ff8e58}.bt.d{background:var(--sar);color:#fff}.bt.d:hover{background:var(--nuit)}
.fl{transition:transform .25s}.bt:hover .fl{transform:translateX(4px)}
.heros{position:relative;padding:0;margin:0;overflow:hidden;border-radius:0 0 34px 34px;isolation:isolate;color:#fff}
.heros .im{position:absolute;inset:0;z-index:-2}.heros .im img,.heros .im picture{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.heros::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 64% 72% at 50% 48%,rgba(6,43,43,.68),rgba(6,43,43,.16))}
@media (max-width:760px){.heros::after{background:rgba(6,43,43,.6)}}
@keyframes lent{from{transform:scale(1.08)}to{transform:none}}.heros .im img{animation:lent 14s cubic-bezier(.16,1,.3,1) both}
.heros .c{display:grid;justify-items:center;text-align:center;gap:1rem;padding-top:clamp(7.5rem,12vw,9.5rem);padding-bottom:clamp(3rem,7vw,5rem)}
.heros p{font-size:1.15rem}
.proj{display:flex;gap:.5rem;background:#fff;border-radius:16px;padding:.5rem;width:min(100%,620px);margin-top:.5rem;box-shadow:0 18px 44px rgba(6,43,43,.3)}
.proj select{flex:1;min-width:0;border:0;background:transparent;font:600 1rem var(--t);padding:.6rem;color:var(--nuit)}
.mini{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.5rem}.mini span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:.3rem .8rem;font-size:.85rem}
.sec{padding-block:clamp(3rem,7vw,5.5rem)}
.etapes{background:var(--pale);border-radius:28px;padding:clamp(1.75rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:2rem;align-items:start}
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.carte{background:#fff;border-radius:18px;padding:1.2rem;display:grid;gap:.4rem;align-content:start}.carte b{width:36px;height:36px;border-radius:11px;background:var(--or);color:#2b1205;display:grid;place-items:center;font-weight:800}
.cat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.75rem}.sv{background:#fff;border:1px solid var(--ligne);border-radius:20px;overflow:clip;display:grid;text-decoration:none;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}.sv:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(6,43,43,.14)}.sv .vu picture{display:block;width:100%;height:100%}.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .65s}.vid.on{opacity:1}.sv .vu{position:relative;aspect-ratio:16/10;overflow:clip;background:var(--nuit)}.sv img{width:100%;height:100%;object-fit:cover}.sv div.t{padding:1.1rem;display:grid;gap:.5rem}.sv ul{display:grid;gap:.2rem}.sv li::before{content:"> ";color:var(--or);font-weight:800}
.ap{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/10;margin-top:1.5rem;background:var(--pale);--p:50%}.ap>picture img,.ap .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ap .av{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}.ap .bar2{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:#fff;transform:translateX(-1.5px)}.ap .bar2::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;color:var(--sar);display:grid;place-items:center;font-weight:800;box-shadow:0 8px 18px rgba(0,0,0,.28)}
.ap input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.lab{position:absolute;top:.8rem;background:rgba(6,43,43,.76);color:#fff;border-radius:99px;padding:.2rem .75rem;font-size:.82rem;font-weight:600;pointer-events:none}.lab.g1{left:.8rem}.lab.d1{right:.8rem}
.fict2{margin-top:.6rem;font-size:.86rem;color:var(--mute)}
.zone{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.zone span{background:#fff;border:1px solid var(--ligne);border-radius:99px;padding:.4rem .9rem;font-weight:600;font-size:.93rem}
.final{background:var(--sar);color:#fff;border-radius:28px;padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem;align-items:center}.final h2{color:#fff}
.deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,5vw,4rem);align-items:start}.ls li{padding-block:.65rem;border-bottom:1px solid var(--ligne)}
.page .im img{animation:lent 14s cubic-bezier(.16,1,.3,1) both}@media (prefers-reduced-motion:reduce){.heros .im img,.page .im img{animation:none}}
.page{position:relative;overflow:hidden;isolation:isolate;border-radius:0 0 28px 28px;color:#fff}.page .im{position:absolute;inset:0;z-index:-2}.page .im img,.page .im picture{width:100%;height:100%;object-fit:cover}.page::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,43,43,.9),rgba(6,43,43,.35))}.page .c{display:grid;gap:1rem;padding-top:clamp(7rem,11vw,9rem);padding-bottom:clamp(2.5rem,5vw,4rem)}.fil{font-size:.86rem}
.note{background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:1rem 1.2rem;color:var(--mute)}
.pied{background:var(--nuit);color:#cfe0dc;padding-block:2.75rem;margin-top:3rem}.pied .c{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}.pied h2{color:#fff;font-size:1.25rem}.hor{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.1rem 1rem}
.apparait{animation:app linear both;animation-timeline:view();animation-range:entry 0% cover 24%}@keyframes app{from{opacity:.3;transform:translateY(30px)}to{opacity:1;transform:none}}@supports not (animation-timeline:view()){.apparait{animation:none}}
.mob{display:none}
@media (max-width:860px){.etapes,.cartes,.cat,.deux,.final,.pied .c{grid-template-columns:minmax(0,1fr)}.ap{aspect-ratio:4/3}}
@media (max-width:760px){.bar nav,.bar .bt{display:none}.proj{flex-direction:column}.bt{justify-content:center}body{padding-bottom:calc(4.2rem + env(safe-area-inset-bottom,0px))}.mob{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;position:fixed;left:.5rem;right:.5rem;bottom:calc(.5rem + env(safe-area-inset-bottom,0px));z-index:40}.mob a{text-align:center;padding:.85rem;border-radius:12px;font-weight:700;text-decoration:none;background:var(--or);color:#2b1205}.mob a:first-child{background:var(--sar);color:#fff}}