:root{--sable:#FAF6F0;--sable2:#F0E8DC;--blanc:#fff;--lagon:#0B4A50;--lagon2:#12707A;--turq:#BFE3DC;--corail:#E9735A;--encre:#10272A;--gris:#5E6E6F;--lin:rgba(16,39,42,.1);
--serif:'Instrument Serif',Georgia,serif;--sans:'Manrope',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--sable);color:var(--encre);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.it{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--lagon2)}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--corail);margin-bottom:14px}
h2{font-size:64px;line-height:1;letter-spacing:-.045em;font-weight:700}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px}
.head p{max-width:380px;color:var(--gris)}
section{padding:120px 0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:99px;font-weight:700;font-size:15px;background:var(--corail);color:#fff;white-space:nowrap}
.btn.w{background:#fff;color:var(--encre)}
.btn.l{background:var(--lagon)}
.btn .ar{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:12px}

/* ---------- HERO ---------- */
.hero{margin:18px;border-radius:44px;overflow:hidden;position:relative;height:860px;background:url(img/hero.webp) center 60%/cover}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,74,80,.4) 0%,rgba(11,74,80,0) 30%,rgba(11,74,80,0) 50%,rgba(11,74,80,.8) 100%)}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:28px 40px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px;color:#fff}
.logo .mk{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}
.logo .mk svg{width:22px}
.logo .it{color:#fff;font-size:22px}
.links{display:flex;gap:4px;background:rgba(255,255,255,.18);backdrop-filter:blur(12px);padding:6px;border-radius:99px;box-shadow:0 0 0 1px rgba(255,255,255,.3) inset}
.links a{color:#fff;font-size:14px;font-weight:600;padding:9px 18px;border-radius:99px}
.links a.on{background:#fff;color:var(--encre)}
.hin{position:absolute;left:60px;bottom:60px;right:60px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;color:#fff}
.hero h1{font-size:112px;line-height:.92;font-weight:700;letter-spacing:-.05em;max-width:800px}
.hero h1 .it{color:#fff;font-size:1.06em}
.hin p{max-width:360px;font-size:17px;opacity:.92;margin-bottom:22px}
.chip{position:absolute;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-radius:22px;padding:14px 18px;box-shadow:0 30px 60px -25px rgba(16,39,42,.5);color:var(--encre)}
.chip b{font-size:14px}.chip small{display:block;font-size:12px;color:var(--gris)}
.chip.a{right:70px;top:140px;width:300px}
.chip.a .pal{display:flex;gap:6px;margin-top:10px}
.chip.a .pal i{width:28px;height:28px;border-radius:9px}
.chip.a .fnt{margin-top:10px;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--lin);padding-top:10px}
.chip.a .fnt span{font-family:'Cormorant Garamond',serif;font-size:24px;font-style:italic}
.chip.b{right:400px;top:260px;display:flex;align-items:center;gap:12px}
.chip.b .c{width:46px;height:46px;border-radius:50%;background:conic-gradient(var(--corail) 0 70%,var(--sable2) 0);display:grid;place-items:center}
.chip.b .c:after{content:"10";width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}

/* ---------- MANIFESTE ---------- */
.mani{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.mani h2{font-size:58px}
.mani .rules{display:grid;gap:14px}
.mani .rules>div{background:#fff;border-radius:22px;padding:20px 24px;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.mani .rules i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-style:normal;font-weight:800;color:#fff}
.mani .rules b{display:block;font-size:17px}
.mani .rules span{color:var(--gris);font-size:14px}

/* ---------- REALISATIONS (bento) ---------- */
.demo-tag{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:700;color:var(--gris);background:#fff;border-radius:99px;padding:6px 12px;box-shadow:0 0 0 1px var(--lin) inset}
.demo-tag:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--corail)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.case{background:#fff;border-radius:34px;padding:26px;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--lin)}
.case .stage{border-radius:24px;display:flex;align-items:center;justify-content:center;padding:34px 20px;position:relative;overflow:hidden}
.case .meta{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-top:20px}
.case h3{font-size:22px;letter-spacing:-.03em;line-height:1.1}
.case h3 small{display:block;font-size:13px;color:var(--gris);font-weight:600;letter-spacing:0;margin-top:4px}
.case .dna{display:flex;gap:5px;align-items:center;flex-shrink:0}
.case .dna i{width:18px;height:18px;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.06) inset}
.case .dna em{font-style:normal;font-size:12px;color:var(--gris);margin-left:6px;white-space:nowrap}
.why{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.why div{background:var(--sable);border-radius:16px;padding:12px 14px;font-size:13px;color:#33484a}
.why b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lagon2);margin-bottom:2px}

/* devices */
.laptop{width:100%;max-width:700px}
.laptop .scr{border:10px solid #16191b;border-bottom-width:14px;border-radius:16px 16px 0 0;height:400px;overflow:hidden;position:relative;background:#fff}
.laptop .base{height:14px;background:linear-gradient(180deg,#d6d8da,#aeb2b5);border-radius:0 0 14px 14px;margin:0 -30px;position:relative}
.laptop .base:before{content:"";position:absolute;left:50%;top:0;width:110px;height:6px;background:#9da1a4;border-radius:0 0 8px 8px;transform:translateX(-50%)}
.phone{width:230px;border-radius:38px;background:#111;padding:9px;box-shadow:0 40px 60px -30px rgba(16,39,42,.6)}
.phone .scr{border-radius:30px;overflow:hidden;height:470px;position:relative;background:#fff}
.phone .scr:before{content:"";position:absolute;left:50%;top:8px;width:66px;height:19px;border-radius:12px;background:#111;transform:translateX(-50%);z-index:9}
.tablet{width:100%;max-width:420px;border-radius:28px;background:#1a1c1e;padding:14px;box-shadow:0 40px 60px -30px rgba(16,39,42,.6)}
.tablet .scr{border-radius:16px;overflow:hidden;height:460px;position:relative;background:#fff}

/* === site 1 : gîte (Playfair, sauge, éditorial large) === */
.sg{height:100%;font-family:'Manrope',sans-serif;background:#F4F1EA;color:#2F3A2F}
.sg .nv{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.sg .nv b{font-family:'Playfair Display',serif;font-size:17px;letter-spacing:0;text-transform:none;font-weight:500}
.sg .nv span{background:#2F3A2F;color:#F4F1EA;padding:6px 12px;border-radius:2px}
.sg .hr{margin:0 22px;height:228px;background:url(img/gite.webp) center/cover;position:relative}
.sg .hr .tt{position:absolute;left:18px;bottom:16px;color:#fff;font-family:'Playfair Display',serif;font-size:34px;line-height:1;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.sg .hr .tt i{font-style:italic}
.sg .bk{position:absolute;right:16px;bottom:-22px;background:#fff;display:flex;gap:0;box-shadow:0 10px 30px -10px rgba(0,0,0,.3);font-size:9px}
.sg .bk div{padding:9px 14px;border-right:1px solid #e5e1d8;position:static;color:#2F3A2F;font-family:'Manrope';font-size:9px;text-shadow:none}
.sg .bk div b{display:block;font-size:11px}
.sg .bk span{background:#7C8B6A;color:#fff;padding:0 16px;display:grid;place-items:center;font-weight:700}
.sg .rw{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:36px 22px 0}
.sg .rw div{height:50px;background:center/cover;border-radius:2px}

/* === site 2 : salon (Cormorant, rose poudré, centré minimal) === */
.ss{height:100%;background:#F7EDEA;color:#4A3B3B;text-align:center;font-family:'Manrope'}
.ss .tp{padding:40px 16px 0;font-size:8px;letter-spacing:.3em;text-transform:uppercase}
.ss h4{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:44px;line-height:.9;margin:10px 0 0}
.ss h4 i{display:block;font-size:26px;color:#B7787E}
.ss .ov{width:140px;height:150px;border-radius:90px 90px 0 0;margin:18px auto 0;background:url(img/salon.webp) center/cover;filter:sepia(.25) saturate(.8)}
.ss ul{list-style:none;margin:14px 22px 0;font-size:10px;text-align:left}
.ss li{display:flex;justify-content:space-between;border-bottom:1px solid #e3cfcb;padding:6px 0;font-family:'Cormorant Garamond',serif;font-size:14px}
.ss .go{margin:14px 22px 0;border:1px solid #4A3B3B;padding:9px;font-size:9px;letter-spacing:.2em;text-transform:uppercase}

/* === site 3 : plongée (Oswald, plein écran immersif) === */
.sp{height:100%;background:url(img/plongee.webp) center/cover;position:relative;color:#fff;font-family:'Manrope'}
.sp:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,40,60,.2),rgba(0,30,50,.85) 75%)}
.sp .in{position:absolute;inset:auto 16px 18px 16px;z-index:1}
.sp .lb{font-size:9px;font-weight:800;letter-spacing:.2em;color:#7FF3E4}
.sp h4{font-family:'Oswald',sans-serif;font-weight:700;font-size:40px;line-height:.9;text-transform:uppercase;margin:6px 0 10px}
.sp .tg{display:flex;gap:6px;flex-wrap:wrap}
.sp .tg span{font-size:9px;border:1px solid rgba(255,255,255,.5);border-radius:99px;padding:4px 8px}
.sp .pr{display:flex;justify-content:space-between;align-items:center;background:#7FF3E4;color:#062A33;border-radius:14px;padding:10px 12px;margin-top:12px;font-weight:800;font-size:11px}
.sp .pr b{font-family:'Oswald';font-size:20px;white-space:nowrap}
.sp .top{position:absolute;top:40px;left:16px;right:16px;display:flex;justify-content:space-between;z-index:1;font-family:'Oswald';font-size:15px;letter-spacing:.06em}

/* === site 4 : boulangerie (Fraunces, crème et brun, arche) === */
.sb{height:100%;background:#F3E9DA;color:#3B2716;font-family:'Manrope';padding:18px}
.sb .tp{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.sb .tp b{font-family:'Fraunces',serif;font-size:18px;letter-spacing:0;text-transform:none;font-weight:400}
.sb .gd{display:grid;grid-template-columns:1fr 120px;gap:16px;margin-top:20px;align-items:end}
.sb h4{font-family:'Fraunces',serif;font-weight:400;font-size:30px;line-height:.95;letter-spacing:-.02em}
.sb h4 i{color:#A0522D}
.sb p{font-size:10px;margin-top:10px;color:#6b5646}
.sb .ar{height:230px;border-radius:120px 120px 4px 4px;background:url(img/pain.webp) center/cover}
.sb .hr{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border-top:1px solid #d9c6ab;border-bottom:1px solid #d9c6ab}
.sb .hr div{padding:10px 8px;font-size:9px;border-right:1px solid #d9c6ab}
.sb .hr div:last-child{border:none}
.sb .hr b{display:block;font-family:'Fraunces';font-size:15px;font-weight:400}
.sb .st{margin-top:14px;background:#3B2716;color:#F3E9DA;border-radius:99px;text-align:center;padding:10px;font-size:10px;font-weight:700}

/* === site 5 : pizzeria (Shrikhand, rouge et noir, festif) === */
.sz{height:100%;background:#141111;color:#FFF3E6;font-family:'Manrope'}
.sz .hd{height:200px;background:url(img/pizza.webp) center/cover;position:relative;clip-path:polygon(0 0,100% 0,100% 86%,0 100%)}
.sz h4{font-family:'Shrikhand',cursive;font-weight:400;font-size:40px;line-height:.95;color:#FF4B2B;padding:6px 16px 0;transform:rotate(-4deg);text-shadow:3px 3px 0 #000}
.sz .sub{padding:4px 16px;font-size:10px;opacity:.75}
.sz .mn{margin:10px 16px 0}
.sz .mn>div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed rgba(255,243,230,.2);padding:6px 0;font-size:11px;font-weight:700}
.sz .mn>div span{font-weight:500;opacity:.6;font-size:9px;display:block;margin-top:1px}
.sz .mn b{color:#FFC93C}
.sz .go{position:absolute;left:16px;right:16px;bottom:16px;background:#FF4B2B;border-radius:12px;padding:11px;text-align:center;font-weight:800;font-size:11px}

/* === site 6 : artisan (Archivo large, jaune chantier, confiance) === */
.sa{height:100%;background:#fff;color:#161616;font-family:'Archivo',sans-serif;display:grid;grid-template-columns:1.05fr 1fr}
.sa .l{padding:22px;display:flex;flex-direction:column;justify-content:space-between}
.sa .lg{font-weight:800;font-stretch:125%;font-size:14px;display:flex;align-items:center;gap:8px}
.sa .lg i{width:22px;height:22px;background:#FFD400;display:grid;place-items:center;font-style:normal;font-size:13px}
.sa h4{font-weight:800;font-stretch:112%;font-size:28px;line-height:.95;letter-spacing:-.03em}
.sa h4 span{background:#FFD400;padding:0 4px}
.sa p{font-size:11px;color:#555;margin-top:10px;font-family:'Manrope'}
.sa .tr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sa .tr div{border:1.5px solid #161616;padding:8px;font-size:9px;font-family:'Manrope';font-weight:700}
.sa .tr b{display:block;font-family:'Archivo';font-stretch:110%;font-size:13px;white-space:nowrap}
.sa .cta{display:flex;gap:6px}
.sa .cta span{background:#161616;color:#fff;padding:10px 12px;font-size:10px;font-weight:700;font-family:'Manrope'}
.sa .cta span.y{background:#FFD400;color:#161616}
.sa .r{background:url(img/artisan.webp) center/cover;position:relative}
.sa .r div{position:absolute;left:14px;bottom:14px;background:#fff;padding:10px 12px;font-size:10px;font-family:'Manrope';font-weight:700;box-shadow:0 10px 20px -8px rgba(0,0,0,.4)}
.sa .r div b{display:block;font-size:18px;font-family:'Archivo';font-stretch:120%}

/* ---------- DU COMMERCE AU SITE ---------- */
.flow{background:#fff;border-radius:44px;padding:50px;display:grid;grid-template-columns:1fr 60px 1.1fr 60px 1fr;align-items:center}
.flow .ar{font-size:30px;color:var(--corail);text-align:center;font-weight:800}
.flow .st small{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-bottom:12px}
.flow .src{height:300px;border-radius:24px;background:url(img/pain.webp) center/cover;position:relative}
.flow .src span{position:absolute;left:12px;bottom:12px;background:#fff;border-radius:12px;padding:8px 12px;font-size:12px;font-weight:600}
.flow .dec{display:grid;gap:10px}
.flow .dec div{background:var(--sable);border-radius:18px;padding:14px 16px}
.flow .dec b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--lagon2);display:block;margin-bottom:6px}
.flow .dec .p{display:flex;gap:6px}
.flow .dec .p i{flex:1;height:34px;border-radius:10px}
.flow .dec .f{font-family:'Fraunces',serif;font-size:30px;line-height:1}
.flow .dec .f i{font-style:italic;color:#A0522D}
.flow .dec span{font-size:13px;color:#33484a}
.flow .res .tablet{max-width:none;padding:10px}
.flow .res .tablet .scr{height:300px}
.flow .res .sb{padding:14px}
.flow .res .sb h4{font-size:30px}
.flow .res .sb .ar{height:160px}

/* ---------- AVANT APRES ---------- */
.aa{background:#fff;border-radius:44px;padding:50px;display:grid;grid-template-columns:1fr 1fr;gap:28px;position:relative}
.aa .lab{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:99px;padding:6px 14px;margin-bottom:16px}
.fb{background:#F2F3F5;border-radius:24px;padding:22px;font-family:system-ui}
.fb .top{display:flex;gap:10px;align-items:center}.fb .top i{width:40px;height:40px;border-radius:50%;background:#c9ccd1}
.fb b{font-size:14px}.fb .top span{display:block;font-size:11px;color:#888}
.fb p{font-size:13px;margin:12px 0}
.fb .img{height:190px;border-radius:12px;background:url(img/pizza.webp) center/cover;filter:saturate(.6)}
.fb .q{margin-top:10px;display:grid;gap:6px}
.fb .q div{font-size:12px;color:#555;background:#fff;border-radius:16px;padding:8px 12px}
.fb .q div b{font-size:12px}
.fb .q div em{font-style:normal;color:#c0392b;font-size:11px;display:block}
.aa .after{display:flex;justify-content:center;background:#1B1616;border-radius:24px;padding:26px 0}
.aa .after .phone{width:250px}
.aa .after .phone .scr{height:500px;position:relative}
.aa .vs{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:var(--corail);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 0 0 8px #fff;z-index:2}
.gain{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.gain div{background:#fff;border-radius:22px;padding:20px 22px}
.gain b{display:block;font-size:17px}
.gain span{font-size:14px;color:var(--gris)}

/* ---------- OFFRE ---------- */
.offer{background:var(--lagon);border-radius:44px;color:#fff;padding:70px;display:grid;grid-template-columns:1fr 1fr;gap:60px;position:relative;overflow:hidden}
.offer:before{content:"";position:absolute;left:-200px;bottom:-300px;width:700px;height:700px;border-radius:50%;background:radial-gradient(closest-side,rgba(191,227,220,.3),transparent)}
.offer .eyebrow{color:var(--turq)}
.price{font-size:150px;font-weight:700;letter-spacing:-.06em;line-height:.9;white-space:nowrap}
.price .it{color:var(--turq);font-size:66px}
.offer p{opacity:.78;margin-top:22px;max-width:390px}
.offer .pay{display:flex;gap:10px;margin-top:26px}
.offer .pay div{background:rgba(255,255,255,.1);border-radius:18px;padding:14px 18px;font-size:13px}
.offer .pay b{display:block;font-size:22px}
.ul{position:relative;background:rgba(255,255,255,.08);border-radius:28px;padding:10px 28px}
.ul div{display:flex;justify-content:space-between;align-items:center;padding:19px 0;border-bottom:1px solid rgba(255,255,255,.12);font-weight:600}
.ul div:last-child{border:none}
.ul span{background:var(--turq);color:var(--lagon);font-size:12px;font-weight:800;border-radius:99px;padding:4px 12px;white-space:nowrap}
.ul span.co{background:var(--corail);color:#fff}

/* ---------- ETAPES ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.steps div{background:#fff;border-radius:28px;padding:26px;position:relative}
.steps div:before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:var(--turq);color:var(--lagon);font-weight:800}
.steps h3{font-size:21px;letter-spacing:-.03em;margin:22px 0 6px}
.steps p{font-size:14px;color:var(--gris)}
.steps .d{position:absolute;right:22px;top:30px;font-size:12px;font-weight:800;color:var(--corail)}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.faq div{background:#fff;border-radius:26px;padding:26px 28px}
.faq b{font-size:18px;letter-spacing:-.02em;display:block;margin-bottom:8px}
.faq span{color:var(--gris);font-size:15px}

/* ---------- FIN ---------- */
.end{border-radius:44px;overflow:hidden;position:relative;background:url(img/fin.webp) center/cover;padding:100px 70px;color:#fff}
.end:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,74,80,.92),rgba(11,74,80,.4))}
.end>*{position:relative}
.end h2{font-size:76px;max-width:760px}
.end h2 .it{color:var(--turq)}
.end p{max-width:520px;margin:22px 0 32px;opacity:.9;font-size:18px}
.end .ct{display:flex;gap:12px;flex-wrap:wrap}
footer{display:flex;justify-content:space-between;padding:40px 0 60px;color:var(--gris);font-size:13px}

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  .wrap{padding:0 18px}
  section{padding:70px 0}
  .hero{margin:10px;border-radius:30px;height:760px}
  .links,.chip.a,.chip.b{display:none}
  .nav{padding:20px}
  .hin{left:22px;right:22px;bottom:28px;flex-direction:column;align-items:flex-start;gap:20px}
  .hero h1{font-size:58px}
  h2,.mani h2{font-size:40px}.end h2{font-size:44px}
  .head{flex-direction:column;align-items:flex-start;gap:14px}
  .mani,.aa,.offer,.faq,.gain{grid-template-columns:1fr;gap:18px}
  .steps{grid-template-columns:1fr 1fr}
  .bento>*{grid-column:1/-1!important}
  .flow{grid-template-columns:1fr;gap:16px;padding:24px}.flow .ar{transform:rotate(90deg)}
  .aa,.offer{padding:26px}.aa .vs{display:none}
  .price{font-size:84px}.price .it{font-size:40px}
  .laptop .scr{height:260px}
  .case .meta{flex-direction:column}
  .why{grid-template-columns:1fr}
  .end{padding:50px 26px}
}

/* ---------- AJOUTS DU SITE EN LIGNE ---------- */
a{color:inherit;text-decoration:none}
.btn{transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(16,39,42,.45)}
.links a{transition:background .15s ease}
.links a:hover{background:rgba(255,255,255,.22)}
:focus-visible{outline:3px solid var(--corail);outline-offset:3px;border-radius:12px}
section[id],div[id]{scroll-margin-top:24px}
html{scroll-behavior:smooth}
.ex{display:inline-block;font-size:11px;font-weight:700;color:var(--gris);background:var(--sable2);border-radius:99px;padding:3px 10px;margin-left:8px;vertical-align:middle;letter-spacing:0;text-transform:none}
.fb .q div i{display:inline-block;width:18px;height:18px;border-radius:50%;background:#c9ccd1;vertical-align:-4px;margin-right:6px}

/* développement */
.dev{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dev>div{background:#fff;border-radius:28px;padding:26px}
.dev .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff}
.dev .ic svg{width:22px;height:22px}
.dev h3{font-size:20px;letter-spacing:-.03em;margin:20px 0 6px;line-height:1.15}
.dev p{font-size:14px;color:var(--gris)}
.devband{margin-top:16px;background:var(--encre);color:#fff;border-radius:34px;padding:34px 40px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.devband h3{font-size:28px;letter-spacing:-.035em;line-height:1.1}
.devband h3 .it{color:var(--turq)}
.devband p{opacity:.75;margin-top:8px;max-width:620px;font-size:15px}

footer a{text-decoration:underline;text-underline-offset:3px}
footer .r{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}

@media (max-width:900px){
  .dev{grid-template-columns:1fr}
  .devband{flex-direction:column;align-items:flex-start;padding:28px 26px}
  footer{flex-direction:column;gap:10px}
  footer .r{justify-content:flex-start}
}
@media (max-width:520px){
  .hero h1{font-size:50px}
  .steps{grid-template-columns:1fr}
  .price{font-size:72px}
  .offer .pay{flex-direction:column}
  .nav .btn{padding:12px 16px;font-size:14px}
}
footer.wrap{padding-top:40px;padding-bottom:60px}

/* pages simples (mentions légales, 404) */
.simple .top{display:flex;justify-content:space-between;align-items:center;padding:28px 0}
.simple .logo{color:var(--encre)}
.simple .logo .mk{background:var(--lagon);box-shadow:none}
.simple .logo .it{color:var(--lagon2)}
.doc{background:#fff;border-radius:34px;padding:50px 56px;max-width:860px;margin:10px auto 0}
.doc h1{font-size:52px;line-height:1;letter-spacing:-.045em;margin-bottom:10px}
.doc h2{font-size:22px;letter-spacing:-.02em;margin:34px 0 8px;line-height:1.2}
.doc p,.doc li{color:#33484a;font-size:15px}
.doc ul{list-style:none;display:grid;gap:4px}
.doc a{color:var(--lagon2);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.doc{padding:30px 22px}.doc h1{font-size:38px}}
#contact{padding-bottom:20px}
/* bouton collé en bas de l'écran de la pizzeria : le menu passe dessous proprement */
.sz .go{box-shadow:0 -26px 18px 4px #141111}
@media (max-width:520px){
  .nav .btn{display:none}
  .sg .nv b{font-size:13px}
  .sg .hr{height:150px;margin:0 14px}
  .sg .hr .tt{font-size:22px;left:12px;bottom:12px}
  .sg .bk{display:none}
  .sg .rw{margin:14px 14px 0}
  .sb .gd{grid-template-columns:1fr 92px;gap:10px}
  .sb h4{font-size:24px}
  .sb .ar{height:170px}
  .sb .hr b{font-size:13px;white-space:nowrap}
}