/* Page « Agence de création de site internet à Lisieux » : socle creation.css + galerie de site-vitrine.css, classes lz- */
.lz-hero-bg{object-position:50% 50%}

/* fiche d'agence du hero */
.lz-fiche{justify-self:end;width:100%;max-width:400px;padding:clamp(20px,2vw,28px);border-radius:var(--r);background:rgba(11,20,25,.78);backdrop-filter:blur(6px)}
.lz-fiche-t{font-size:1.15rem;font-weight:900;color:#fff}
.lz-fiche ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px}
.lz-fiche li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;font-size:.92rem;line-height:1.45;color:#c8d3d9}
.lz-fiche .ico{width:32px;height:32px}
.lz-fiche .ico .s{stroke:#e9f0f3}
.lz-fiche .ico .fs{fill:rgba(255,255,255,.1)}
.lz-fiche li span>b,.lz-fiche li span>a{display:block;font-size:1rem;font-weight:800;color:#fff;text-decoration:none}
.lz-fiche li span>a:hover{text-decoration:underline}

/* l'agence : les deux fondateurs, puis le bandeau « qui fait quoi » */
.lz-ag{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,88px);align-items:center}
.lz-duo{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;padding-bottom:30px}
.lz-duo::before{content:"";position:absolute;left:12%;right:0;top:14%;bottom:0;z-index:0;border-radius:var(--r);background:linear-gradient(145deg,#0067c7 0%,#00baff 100%)}
.lz-duo figure{position:relative;z-index:1;margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -28px rgba(7,30,60,.7)}
.lz-duo img{width:100%;height:auto;aspect-ratio:492/587;object-fit:cover;transition:transform .9s var(--ease)}
.lz-duo figure:hover img{transform:scale(1.04)}
.lz-p1{grid-column:1/8;grid-row:1}
.lz-p2{grid-column:7/13;grid-row:1;margin-top:60px!important;z-index:2!important}
.lz-p1{margin-right:0}
.lz-p1 figcaption{right:calc(100% / 7 + 10px)}
.lz-duo figcaption{position:absolute;left:10px;right:10px;bottom:10px;display:grid;padding:8px 12px;border-radius:var(--r);background:rgba(7,18,28,.86);color:#d3dde2;font-size:.8rem;line-height:1.35}
.lz-duo figcaption b{color:#fff;font-size:.92rem;font-weight:800}
.lz-ag-t{display:grid;gap:18px}
.lz-ag-t p{color:var(--ink-2)}
.lz-ag-t .lz-ag-l{font-size:clamp(1.08rem,1rem + .3vw,1.24rem);line-height:1.55;font-weight:600;color:var(--slate)}
.lz-qui{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,3fr);gap:clamp(20px,3vw,44px);align-items:center;margin-top:clamp(40px,5vw,64px);padding:clamp(24px,3vw,40px);border-radius:var(--r);background:linear-gradient(110deg,#07121c 0%,#0b2a4a 65%,#0067c7 120%)}
.lz-qui-t{font-size:clamp(1.3rem,1rem + 1vw,1.75rem);font-weight:900;line-height:1.15;color:#fff}
.lz-qui ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.lz-qui li{display:grid;gap:10px;align-content:start}
.lz-qui .ico{width:40px;height:40px}
.lz-qui .ico .s{stroke:#e9f0f3}
.lz-qui li div{display:grid;gap:4px}
.lz-qui b{color:#fff;font-weight:800;line-height:1.3}
.lz-qui span{color:#c8d3d9;font-size:.94rem;line-height:1.5}

/* projets */
.lz-pj{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lz-pj a{display:grid;grid-template-columns:48px minmax(0,1fr) 18px;gap:16px;align-items:start;height:100%;padding:24px;border-radius:var(--r);background:#fff;color:var(--ink-2);text-decoration:none;box-shadow:var(--shadow);transition:transform .4s var(--ease)}
.lz-pj a:hover{transform:translateY(-3px)}
.lz-pj .ico{width:48px;height:48px}
.lz-pj h3{margin-bottom:8px;transition:color .3s}
.lz-pj a:hover h3{color:var(--blue)}
.lz-pj p{font-size:.98rem;line-height:1.55}
.lz-pj a>svg:last-child{width:18px;height:18px;margin-top:4px;color:var(--blue)}

/* recherches locales */
.lz-rc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:start}
.lz-rc-t{display:grid;gap:16px}
.lz-rc-t p{color:var(--ink-2)}
.lz-src{font-size:.86rem;line-height:1.5}
.lz-tb{overflow-x:auto;border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.lz-tb table{width:100%;border-collapse:collapse;font-size:.96rem}
.lz-tb th,.lz-tb td{padding:12px 16px;text-align:left;vertical-align:top;line-height:1.4}
.lz-tb thead th{font-size:.82rem;font-weight:800;color:#0067c7;background:var(--soft)}
.lz-tb tbody tr+tr>*{border-top:1px solid #e6edf3}
.lz-tb tbody th{font-weight:800;color:var(--slate);white-space:nowrap}
.lz-tb .n{text-align:right;font-weight:800;color:var(--slate);white-space:nowrap}
.lz-tb td:last-child{color:var(--ink-2)}

/* réalisations */
.lz-rf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.lz-rf figure{margin:0;display:grid;gap:18px;align-content:start}
.lz-rf figcaption{display:grid;gap:10px;justify-items:start}
.lz-rf figcaption p{color:var(--ink-2)}

/* déroulé */
.lz-st{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.lz-st li{display:flex;flex-direction:column;gap:10px;padding:20px 18px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.lz-st-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;font-weight:900}
.lz-st h3{font-size:1.06rem}
.lz-st p{flex:1;color:var(--ink-2);font-size:.94rem;line-height:1.5}
.lz-st em{font-style:normal;font-size:.84rem;font-weight:800;color:#0067c7}

/* parcours immersif : un téléphone fixe, l'écran change à chaque étape.
   Sans JavaScript et sous 1000 px, chaque étape porte son propre écran. */
.lz-im{position:relative;overflow:clip;isolation:isolate;background:linear-gradient(160deg,#07121c 0%,#0b1f33 55%,#07121c 100%);padding-block:clamp(64px,8vw,112px)}
.lz-im::after{content:"";position:absolute;right:-60px;bottom:-60px;z-index:-1;width:420px;height:420px;background:url(img/maxelik-symbole.svg) center/contain no-repeat;opacity:.05}
.lz-im-h{display:grid;gap:16px;margin-bottom:clamp(36px,4vw,56px)}
.lz-im-h p{max-width:85%;font-size:1.06rem;color:#d3dde2}
.lz-im-g{display:block}
.lz-im-stage{display:none}
.lz-im-st{display:grid;gap:24px}
.lz-im-st+.lz-im-st{margin-top:56px}
.lz-im-tx{display:grid;gap:12px;align-content:center}
.lz-im-n{font-size:.95rem;font-weight:900;color:#7fd8ff}
.lz-im-tx h3{font-size:clamp(1.4rem,1.1rem + 1.2vw,2.05rem);font-weight:800;line-height:1.2}
.lz-im-tx p:last-child{color:#d3dde2;font-size:1.06rem}
.lz-im a{color:#7fd8ff}
.lz-im-note{margin-top:32px;font-size:.84rem;color:#a9b8c0}

/* écrans */
.lz-sc{position:relative;width:100%;max-width:300px;min-height:440px;margin-inline:auto;padding:18px 16px;border-radius:22px;background:#fff;color:var(--slate);font-size:.82rem;line-height:1.4;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,131,255,.55)}
.lz-sc b{font-weight:800}
.lz-sc small{display:block;font-size:.7rem;color:#4a575e}
.lz-sc-t{font-size:.95rem;font-weight:900}
.lz-sc-q{display:flex;align-items:center;height:42px;margin-top:12px;padding:0 14px;border-radius:999px;background:var(--soft);font-weight:800}
.lz-sc-q span{display:inline-block;overflow:hidden;white-space:nowrap}
.lz-sc-l{margin-top:18px;font-weight:800;color:#0067c7}
.lz-sc-tree{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.lz-sc-tree li{padding:9px 12px;border-radius:var(--r);background:var(--soft);font-weight:700}
.lz-sc-tree li:first-child{background:var(--grad);color:#fff}
.lz-sc-tree li:not(:first-child){margin-left:14px}
.lz-sc-g{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:999px;background:var(--soft)}
.lz-sc-g b{color:#0067c7}
.lz-sc-res{display:grid;gap:3px;margin-top:12px;padding:12px;border-radius:var(--r);background:#f7f9fb}
.lz-sc-res.is-nous{background:#fff;box-shadow:0 12px 28px -12px rgba(0,80,170,.45)}
.lz-sc-res.is-nous b{font-size:.98rem;color:#0067c7}
.lz-sc-res i{display:block;height:7px;border-radius:4px;background:#dfe6ec}
.lz-sc-res i:nth-child(2){width:80%}.lz-sc-res i:nth-child(3){width:60%}
.lz-sc-psi{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:var(--r);background:#0b1f33;color:#fff}
.lz-sc-psi b{font-size:1.3rem;font-weight:900;color:#7fd8ff}
.lz-sc-map{position:relative;height:170px;margin:-18px -16px 0;background:linear-gradient(115deg,transparent 46%,#fff 46%,#fff 50%,transparent 50%),linear-gradient(20deg,transparent 62%,#fff 62%,#fff 65%,transparent 65%),linear-gradient(160deg,#dcebf7,#cfe6dc)}
.lz-sc-pin{position:absolute;left:52%;top:42%;width:24px;height:24px;border-radius:50% 50% 50% 0;background:var(--grad);transform:rotate(-45deg);box-shadow:0 10px 18px -6px rgba(0,80,170,.7)}
.lz-sc-pin::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.lz-sc-fi{position:relative;display:grid;gap:2px;margin-top:-22px;padding:12px;border-radius:var(--r);background:#fff;box-shadow:0 12px 28px -12px rgba(0,80,170,.45)}
.lz-sc-ia{margin-top:16px;padding:14px;border-radius:var(--r);background:#0b1f33;color:#fff}
.lz-sc-ia small{color:#7fd8ff;font-weight:800}
.lz-sc-ia p{margin-top:6px}
.lz-sc-site{display:grid;gap:2px}
.lz-sc-site b{font-size:1.15rem;font-weight:900}
.lz-sc-ph{height:150px;margin-top:12px;border-radius:var(--r);background:url(img/photos/contenus-menuisier-atelier.webp) center/cover}
.lz-sc-cta{display:grid;grid-template-columns:1.5fr 1fr;gap:8px;margin-top:12px}
.lz-sc-cta span{display:grid;place-items:center;height:40px;border-radius:var(--r);background:var(--soft);font-weight:800}
.lz-sc-cta span:first-child{background:var(--grad);color:#fff}
.lz-sc-notif{position:absolute;left:12px;right:12px;bottom:18px;padding:12px 14px;border-radius:var(--r);background:#0b1f33;color:#fff;box-shadow:0 18px 34px -14px rgba(0,0,0,.7)}
.lz-sc-notif small{color:#7fd8ff;font-weight:800}

/* animations jouées quand l'écran devient actif ; sans elles, l'état final reste affiché */
@keyframes lzFrappe{from{max-width:0}to{max-width:100%}}
@keyframes lzMonte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lzNotif{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lzPin{from{opacity:0;transform:rotate(-45deg) translate(14px,-14px)}to{opacity:1;transform:rotate(-45deg)}}
.lz-sc.is-on .lz-sc-q span{animation:lzFrappe 1.1s steps(17) both}
.lz-sc.is-on .lz-sc-tree li{animation:lzMonte .5s var(--ease) both}
.lz-sc.is-on .lz-sc-tree li:nth-child(1){animation-delay:1s}.lz-sc.is-on .lz-sc-tree li:nth-child(2){animation-delay:1.1s}.lz-sc.is-on .lz-sc-tree li:nth-child(3){animation-delay:1.2s}.lz-sc.is-on .lz-sc-tree li:nth-child(4){animation-delay:1.3s}.lz-sc.is-on .lz-sc-tree li:nth-child(5){animation-delay:1.4s}.lz-sc.is-on .lz-sc-tree li:nth-child(6){animation-delay:1.5s}
.lz-sc.is-on .lz-sc-res,.lz-sc.is-on .lz-sc-psi{animation:lzMonte .55s var(--ease) both}
.lz-sc.is-on .lz-sc-res:nth-of-type(3){animation-delay:.12s}.lz-sc.is-on .lz-sc-res:nth-of-type(4){animation-delay:.24s}.lz-sc.is-on .lz-sc-psi{animation-delay:.42s}
.lz-sc.is-on .lz-sc-pin{animation:lzPin .6s var(--ease) both}
.lz-sc.is-on .lz-sc-fi{animation:lzMonte .55s .2s var(--ease) both}
.lz-sc.is-on .lz-sc-ia{animation:lzMonte .55s .5s var(--ease) both}
.lz-sc.is-on .lz-sc-notif{animation:lzNotif .6s .7s var(--ease) both}
@media (prefers-reduced-motion:reduce){.lz-sc.is-on *{animation:none!important}}

/* version scène : posée par le script à partir de 1000 px */
html.lz-scene .lz-im-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
html.lz-scene .lz-im-stage{position:sticky;top:calc(var(--head-bar) + 20px);display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:28px;height:calc(100vh - var(--head-bar) - 40px);max-height:600px;min-height:480px}
html.lz-scene .lz-im-halo{position:absolute;left:50%;top:50%;z-index:-1;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,131,255,.5),transparent);transition:transform 1s var(--ease),opacity 1s}
html.lz-scene [data-etape="2"] .lz-im-halo{transform:translate(50px,-40px)}
html.lz-scene [data-etape="3"] .lz-im-halo{transform:translate(-50px,40px)}
html.lz-scene [data-etape="4"] .lz-im-halo{transform:scale(1.2)}
html.lz-scene .lz-im-tel{position:relative;width:272px;height:100%;max-height:560px;padding:10px;border-radius:34px;background:#02080e;box-shadow:0 40px 90px -30px rgba(0,131,255,.6)}
html.lz-scene .lz-im-ecran{position:relative;width:100%;height:100%;border-radius:25px;overflow:hidden;background:#fff}
html.lz-scene .lz-im-ecran .lz-sc{position:absolute;inset:0;max-width:none;min-height:0;border-radius:0;box-shadow:none;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
html.lz-scene .lz-im-ecran .lz-sc.is-on{opacity:1;visibility:visible}
html.lz-scene .lz-sc-tree{gap:10px}
html.lz-scene .lz-sc-tree li{padding:11px 12px}
html.lz-scene .lz-sc-res{padding:14px 12px}
html.lz-scene .lz-sc-map{height:270px}
html.lz-scene .lz-sc-ia{font-size:.9rem}
html.lz-scene .lz-sc-ph{height:220px}
html.lz-scene .lz-im-rail{list-style:none;margin:0;padding:0;display:grid;gap:18px;font-size:.84rem;font-weight:800;color:#8ea0ab}
html.lz-scene .lz-im-rail li{display:flex;align-items:center;gap:10px;transition:color .4s}
html.lz-scene .lz-im-rail li::before{content:"";width:10px;height:10px;border-radius:50%;background:#2c4052;transition:background-color .4s,transform .4s}
html.lz-scene .lz-im-rail li.is-on{color:#fff}
html.lz-scene .lz-im-rail li.is-on::before{background:var(--cyan);transform:scale(1.4)}
/* le bas réservé garde le téléphone entier sous le menu à la dernière étape */
html.lz-scene .lz-im-steps{padding-top:clamp(50px,12vh,120px);padding-bottom:max(50px,calc(525px - 50vh))}
html.lz-scene .lz-im-st{padding-block:clamp(28px,4.5vh,44px);opacity:.32;transition:opacity .5s}
html.lz-scene .lz-im-st.is-on{opacity:1}
html.lz-scene .lz-im-st+.lz-im-st{margin-top:0}
html.lz-scene .lz-im-tx{transform:none;opacity:1}
html.lz-scene .lz-im-n{font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;color:#7fd8ff}

/* accompagnement global : mosaïque autour du site, les services s'annoncent par des pastilles de liens */
.lz-mo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"t1 hub t2" "t3 hub t4" "t5 hub t6";gap:14px}
.lz-mo .t1{grid-area:t1}.lz-mo .t2{grid-area:t2}.lz-mo .t3{grid-area:t3}.lz-mo .t4{grid-area:t4}.lz-mo .t5{grid-area:t5}.lz-mo .t6{grid-area:t6}
.lz-tu{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r);background:var(--soft);transition:background-color .35s,transform .45s var(--ease),box-shadow .35s}
.lz-tu:hover{background:#fff;transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(0,80,170,.5)}
.lz-tu .ico{width:44px;height:44px}
.lz-tu h3{font-size:1.14rem}
.lz-tu p{flex:1;color:var(--ink-2);font-size:.96rem;line-height:1.5}
.lz-ch{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.lz-ch a{display:inline-block;padding:6px 12px;border-radius:999px;background:#fff;color:#0067c7;font-size:.84rem;font-weight:800;line-height:1.3;text-decoration:none;transition:background-color .25s,color .25s}
.lz-tu:hover .lz-ch a{background:var(--soft)}
.lz-ch a:hover,.lz-tu:hover .lz-ch a:hover{background:#0067c7;color:#fff}
.lz-hub{grid-area:hub;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;min-height:340px;padding:clamp(24px,2.6vw,36px);border-radius:var(--r);background:linear-gradient(180deg,rgba(7,18,28,.1) 0%,rgba(7,18,28,.82) 42%,#07121c 62%),url(img/photos/site-poste-developpement-soir.webp) top center/auto 60% no-repeat,#07121c;color:#d3dde2}
.lz-hub-t{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.05rem);font-weight:900;line-height:1.15;color:#fff}
.lz-hub-n{font-size:.92rem;line-height:1.5;color:#c3d0d8}

.lz-note{margin-top:clamp(28px,3vw,40px);padding:20px 22px;border-radius:var(--r);background:var(--soft);color:var(--ink-2)}

/* zone, sur photo de Lisieux */
.lz-zn-s{position:relative;overflow:clip;isolation:isolate;background:#141d22;padding-block:clamp(64px,8vw,104px)}
.lz-zn-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.lz-zn-s::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,24,32,.94) 0%,rgba(15,24,32,.88) 60%,rgba(15,24,32,.68) 100%)}
.lz-zn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,64px);align-items:center}
.lz-zn>div{display:grid;gap:16px}
.lz-zn p{color:#d7e0e5}
.lz-zn p a{color:#7fd8ff}

@media (max-width:1100px){
  .lz-fiche{display:none}
  .cs-hero-g:has(>.lz-fiche){grid-template-columns:minmax(0,1fr)}
  .lz-mo{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"hub hub" "t1 t2" "t3 t4" "t5 t6"}
  .lz-hub{min-height:0;background:linear-gradient(rgba(7,18,28,.86),rgba(7,18,28,.92)),url(img/photos/site-poste-developpement-soir.webp) center/cover no-repeat,#07121c}
  .lz-st{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .lz-ag,.lz-rc,.lz-rf,.lz-zn,.lz-qui{grid-template-columns:minmax(0,1fr)}
  .lz-duo{max-width:520px}
  .lz-zn .btn{justify-self:start}
  .lz-zn-s::before{background:rgba(15,24,32,.9)}
}
@media (max-width:760px){
  .lz-qui ul{grid-template-columns:minmax(0,1fr)}
  .lz-p2{margin-top:36px!important}
  .lz-mo{grid-template-columns:minmax(0,1fr);grid-template-areas:"hub" "t1" "t2" "t3" "t4" "t5" "t6"}
  .lz-im-h p{max-width:none}
  .lz-pj,.lz-st{grid-template-columns:minmax(0,1fr)}
  .lz-pj a{grid-template-columns:40px minmax(0,1fr);padding:20px}
  .lz-pj .ico{width:40px;height:40px}
  .lz-pj a>svg:last-child{display:none}
  .lz-tb table,.lz-tb thead,.lz-tb tbody{display:block}
  .lz-tb tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
  .lz-tb th,.lz-tb td{padding:0}
  .lz-tb thead tr{padding:10px 14px;background:var(--soft)}
  .lz-tb thead th{background:none}
  .lz-tb thead th:last-child{display:none}
  .lz-tb tbody tr{padding:12px 14px}
  .lz-tb tbody tr+tr>*{border-top:0}
  .lz-tb tbody tr+tr{border-top:1px solid #e6edf3}
  .lz-tb td:last-child{grid-column:1/-1;margin-top:4px;font-size:.92rem}
}