/* Maquettes de démonstration, largeur fixe 900 px (mises à l'échelle dans les cartes). */
.tp{width:900px;font-size:16px;line-height:1.35;overflow:hidden}
.tp h1,.tp h2,.tp p{margin:0}
.tp nav{display:flex;align-items:center;gap:28px;padding:26px 44px;font-size:14px}
.tp nav b{font-size:20px}
.tp nav em,.tp header em,.tp aside em,.tp form em{font-style:normal;padding:11px 20px;font-weight:600;font-size:14px;white-space:nowrap}
.tp footer{padding:36px 44px;display:flex;gap:24px;align-items:center;justify-content:space-between}

/* 1. Maison Calvet, boulangerie */
.t-calvet{background:#f7d774;color:#3a2212;font-family:Geist,sans-serif}
.t-calvet nav b{font-family:"Playfair Display",serif;font-size:24px;margin-right:auto}
.t-calvet nav em{background:#3a2212;color:#f7d774;border-radius:999px}
.t-calvet header{text-align:center;padding:40px 44px 0}
.t-calvet header p{font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.t-calvet h1{font-family:"Playfair Display",serif;font-weight:500;font-size:112px;line-height:.98;margin:16px 0 40px;letter-spacing:-.02em}
.t-calvet .arch{height:330px;width:520px;margin:0 auto;border-radius:260px 260px 0 0;background:radial-gradient(ellipse 60% 44% at 50% 62%,#c98a3c 0 40%,#a8641f 62%,#7a4313 100%),#3a2212;box-shadow:inset 0 0 0 14px #3a2212}
.t-calvet .facts{display:grid;grid-template-columns:repeat(3,1fr);background:#3a2212;color:#f7d774;padding:34px 44px;gap:24px}
.t-calvet .facts b{display:block;font-family:"Playfair Display",serif;font-size:24px}
.t-calvet .facts span{font-size:14px;opacity:.8}
.t-calvet .prods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:54px 44px 30px}
.t-calvet .prods i{display:block;aspect-ratio:1;border-radius:50%;margin-bottom:16px}
.t-calvet .prods .a{background:radial-gradient(circle at 38% 34%,#8a5a2b,#4a2a10 70%)}
.t-calvet .prods .b{background:radial-gradient(circle at 38% 34%,#f3c46b,#c47f21 70%)}
.t-calvet .prods .c{background:radial-gradient(circle at 38% 34%,#d9a45a,#8c5a22 70%)}
.t-calvet .prods b{display:block;font-family:"Playfair Display",serif;font-size:22px}
.t-calvet footer{border-top:2px solid #3a2212;margin:0 44px;padding:26px 0 40px}
.t-calvet footer b{font-family:"Playfair Display",serif;font-style:italic;font-size:26px}

/* 2. Braise, restaurant */
.t-braise{background:#120c0a;color:#f4e9df;font-family:Geist,sans-serif}
.t-braise nav{justify-content:space-between;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.t-braise nav b{font-family:Anton,sans-serif;font-size:30px;letter-spacing:.06em;color:#ff5a1f}
.t-braise nav em{border:1px solid #ff5a1f;color:#ff5a1f;letter-spacing:.12em;font-size:12px}
.t-braise header{position:relative;padding:60px 44px 70px;overflow:hidden}
.t-braise .ember{position:absolute;right:-140px;top:-40px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,#ffb347 0,#ff5a1f 22%,#8f1d05 46%,transparent 68%);filter:blur(6px);animation:ember 4s ease-in-out infinite alternate}
@keyframes ember{to{transform:scale(1.08);opacity:.82}}
.t-braise h1{position:relative;font-family:Anton,sans-serif;font-weight:400;font-size:168px;line-height:.92;letter-spacing:.01em}
.t-braise header p{position:relative;max-width:360px;margin-top:28px;color:#d8c4b4}
.t-braise .menu{padding:20px 44px 50px}
.t-braise .menu h2{font-family:Anton,sans-serif;font-weight:400;font-size:44px;color:#ff5a1f;margin-bottom:18px;text-transform:uppercase}
.t-braise .menu div{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid #3a2a22;font-size:21px}
.t-braise .menu b{font-weight:400}
.t-braise .menu span{font-family:Anton,sans-serif;color:#ff5a1f}
.t-braise footer{background:#ff5a1f;color:#120c0a;text-transform:uppercase;letter-spacing:.1em;font-size:13px}
.t-braise footer b{font-family:Anton,sans-serif;font-weight:400;font-size:30px;letter-spacing:.04em}

/* 3. Studio Onde, pilates */
.t-onde{background:#e3ebdd;color:#22312a;font-family:Outfit,sans-serif}
.t-onde nav b{font-weight:300;font-size:26px;letter-spacing:-.02em;margin-right:auto}
.t-onde nav em,.t-onde header em{background:#22312a;color:#e3ebdd;border-radius:999px;font-weight:400}
.t-onde header{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;padding:40px 44px 60px;align-items:center}
.t-onde h1{font-weight:300;font-size:78px;line-height:1;letter-spacing:-.035em}
.t-onde header p{margin:22px 0 30px;font-size:19px;max-width:330px;opacity:.8}
.t-onde header em{display:inline-block;padding:15px 26px}
.t-onde .blobs{position:relative;height:420px}
.t-onde .blobs i{position:absolute;border-radius:50%;animation:floaty 7s ease-in-out infinite alternate}
.t-onde .blobs i:nth-child(1){inset:0 40px 60px 0;background:#f2a488;border-radius:58% 42% 50% 50%/46% 52% 48% 54%}
.t-onde .blobs i:nth-child(2){width:210px;height:210px;right:0;bottom:0;background:#7fa08a;animation-delay:-2s}
.t-onde .blobs i:nth-child(3){width:90px;height:90px;left:20px;bottom:30px;background:#22312a;animation-delay:-4s}
@keyframes floaty{to{transform:translateY(-16px) rotate(5deg)}}
.t-onde .plan{background:#f4f7f0;border-radius:36px;margin:0 28px;padding:36px}
.t-onde .plan h2{font-weight:300;font-size:36px;margin-bottom:14px;letter-spacing:-.02em}
.t-onde .plan div{display:flex;align-items:center;gap:12px;padding:16px 0;border-top:1px solid #d3ddcc;font-size:18px}
.t-onde .plan span{width:52px;opacity:.6}
.t-onde .plan b{font-weight:500;margin-right:auto}
.t-onde .plan i{font-style:normal;font-size:14px;padding:7px 14px;border-radius:999px;border:1px solid #22312a}
.t-onde footer{justify-content:center;font-size:22px}
.t-onde footer b{font-weight:300}

/* 4. Garage Lemaire */
.t-lemaire{background:#1b1c1e;color:#f2f2ee;font-family:"JetBrains Mono",monospace}
.t-lemaire nav{font-size:12px;text-transform:uppercase;border-bottom:2px solid #ffd400}
.t-lemaire nav b{font-family:Anton,sans-serif;font-weight:400;font-size:24px;letter-spacing:.04em;margin-right:auto}
.t-lemaire nav em{background:#ffd400;color:#1b1c1e;font-size:12px}
.t-lemaire header{position:relative;padding:50px 44px 0}
.t-lemaire header p{color:#ffd400;font-size:14px}
.t-lemaire h1{font-family:Anton,sans-serif;font-weight:400;font-size:150px;line-height:.94;margin:14px 0 46px}
.t-lemaire .stripes{height:54px;margin:0 -44px;background:repeating-linear-gradient(-45deg,#ffd400 0 28px,#1b1c1e 28px 56px)}
.t-lemaire .grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#3a3b3f;padding:2px 0}
.t-lemaire .grid div{background:#1b1c1e;padding:34px 44px;display:grid;gap:8px}
.t-lemaire .grid i{font-style:normal;color:#ffd400;font-size:13px}
.t-lemaire .grid b{font-family:Anton,sans-serif;font-weight:400;font-size:34px;text-transform:uppercase}
.t-lemaire .grid span{font-size:13px;opacity:.7}
.t-lemaire footer{background:#ffd400;color:#1b1c1e}
.t-lemaire footer b{font-family:Anton,sans-serif;font-weight:400;font-size:32px;text-transform:uppercase}

/* 5. Cabinet des Tilleuls, dentiste */
.t-tilleuls{background:#f6f9fc;color:#14233b;font-family:Geist,sans-serif}
.t-tilleuls nav b{font-weight:600;font-size:18px;margin-right:auto;color:#2a5bd7}
.t-tilleuls nav em,.t-tilleuls aside em{background:#2a5bd7;color:#fff;border-radius:10px}
.t-tilleuls header{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;padding:54px 44px 60px;align-items:center}
.t-tilleuls h1{font-size:62px;line-height:1.04;letter-spacing:-.035em;font-weight:600}
.t-tilleuls header p{margin-top:20px;font-size:19px;color:#52627a;max-width:400px}
.t-tilleuls aside{background:#fff;border-radius:20px;padding:28px;display:grid;gap:6px;box-shadow:0 30px 60px -30px rgb(42 91 215/.45)}
.t-tilleuls aside b{font-size:13px;color:#52627a;font-weight:500}
.t-tilleuls aside span{font-size:30px;font-weight:600;letter-spacing:-.02em}
.t-tilleuls aside i{font-style:normal;color:#52627a;margin-bottom:14px}
.t-tilleuls aside em{text-align:center}
.t-tilleuls .care{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 44px}
.t-tilleuls .care div{background:#e8effb;border-radius:16px;padding:22px;display:grid;gap:46px}
.t-tilleuls .care i{width:38px;height:38px;border-radius:12px;background:#2a5bd7}
.t-tilleuls .care div:nth-child(2) i{border-radius:50%}.t-tilleuls .care div:nth-child(3) i{border-radius:4px 20px}.t-tilleuls .care div:nth-child(4) i{border-radius:50% 50% 8px 8px}
.t-tilleuls .note{margin:44px;padding:30px;border-radius:20px;background:#14233b;color:#fff;display:grid;gap:6px}
.t-tilleuls .note b{font-size:26px;letter-spacing:-.02em}
.t-tilleuls .note span{opacity:.75}
.t-tilleuls footer{padding-top:0;color:#52627a;font-size:14px}

/* 6. Les Embruns, hôtel */
.t-embruns{background:#f1ece2;color:#0e2238;font-family:Geist,sans-serif}
.t-embruns nav{justify-content:space-between;font-size:13px;letter-spacing:.1em;text-transform:uppercase;position:absolute;width:900px;color:#f1ece2;z-index:1}
.t-embruns nav b{font-family:"Playfair Display",serif;font-size:28px;letter-spacing:0;text-transform:none;font-weight:500}
.t-embruns{position:relative}
.t-embruns header{position:relative;height:640px;display:grid;place-items:center;text-align:center;color:#f1ece2}
.t-embruns .sea{position:absolute;inset:0;background:linear-gradient(#f0b98a 0,#e58f7b 24%,#6d7fa6 44%,#1e3e63 45%,#16304f 62%,#0e2238 100%)}
.t-embruns .sea::after{content:"";position:absolute;left:50%;top:22%;width:120px;height:120px;margin-left:-60px;border-radius:50%;background:#fff3d6;box-shadow:0 0 80px 30px rgb(255 243 214/.5)}
.t-embruns h1{position:relative;font-family:"Playfair Display",serif;font-weight:400;font-size:104px;line-height:1.02;margin-top:120px}
.t-embruns form{position:absolute;left:44px;right:44px;bottom:-44px;background:#f1ece2;color:#0e2238;display:flex;align-items:center;text-align:left;box-shadow:0 30px 60px -30px rgb(14 34 56/.6)}
.t-embruns form div{flex:1;padding:22px 26px;border-right:1px solid #d9d1c0;display:grid;gap:2px}
.t-embruns form span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.t-embruns form b{font-family:"Playfair Display",serif;font-size:22px;font-weight:500}
.t-embruns form em{background:#0e2238;color:#f1ece2;margin:0 22px;padding:16px 26px;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.t-embruns .rooms{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;padding:110px 44px 30px}
.t-embruns .rooms i{display:block;height:300px;margin-bottom:16px;background:linear-gradient(160deg,#c9b89a,#8e7f6a)}
.t-embruns .rooms article:nth-child(2) i{height:380px;background:linear-gradient(200deg,#7f9bb8,#1e3e63)}
.t-embruns .rooms b{display:block;font-family:"Playfair Display",serif;font-size:28px;font-weight:500}
.t-embruns .rooms span{opacity:.7}
.t-embruns footer{justify-content:center;font-family:"Playfair Display",serif;font-size:22px}

/* 7. Verdier Paysage */
.t-verdier{background:#17402a;color:#eef5e4;font-family:Bricolage,sans-serif}
.t-verdier nav b{font-weight:800;font-size:26px;margin-right:auto;letter-spacing:-.03em}
.t-verdier nav em{background:#c8f169;color:#17402a;border-radius:999px}
.t-verdier header{padding:50px 44px 46px}
.t-verdier h1{font-weight:700;font-size:92px;line-height:.98;letter-spacing:-.04em;max-width:760px}
.t-verdier .tiles{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:230px 230px;gap:12px;padding:0 44px}
.t-verdier .tiles div{border-radius:26px;padding:20px;display:flex;flex-direction:column;justify-content:flex-end}
.t-verdier .tiles b{font-size:22px}.t-verdier .tiles span{font-size:14px;opacity:.8}
.t-verdier .x{grid-row:span 2;background:radial-gradient(circle at 70% 20%,#c8f169 0 12%,transparent 13%),radial-gradient(ellipse at 20% 90%,#3f8f52 0 40%,transparent 41%),radial-gradient(ellipse at 90% 100%,#2b6b3c 0 50%,transparent 51%),#1f5536}
.t-verdier .y{grid-column:span 2;background:repeating-linear-gradient(90deg,#a5713f 0 34px,#8f5f33 34px 38px)}
.t-verdier .z{background:#c8f169;color:#17402a}
.t-verdier .w{background:radial-gradient(ellipse at 50% 70%,#7fd0d6 0 46%,#2f7e86 47% 60%,transparent 61%),#1f5536}
.t-verdier .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:54px 44px 30px}
.t-verdier .steps b{display:block;font-size:30px;letter-spacing:-.03em;color:#c8f169}
.t-verdier .steps span{opacity:.8}
.t-verdier footer{margin:10px 44px 44px;padding:26px 30px;border-radius:26px;border:1.5px solid #c8f169;font-size:20px}

/* 8. Kopa, coffee shop */
.t-kopa{background:#fff3e6;color:#2b3cff;font-family:Bricolage,sans-serif}
.t-kopa nav{font-weight:600}
.t-kopa nav b{font-weight:800;font-size:38px;letter-spacing:-.06em;margin-right:auto}
.t-kopa nav em{border:2.5px solid #2b3cff;border-radius:999px}
.t-kopa header{position:relative;padding:30px 44px 0;height:560px}
.t-kopa h1{font-weight:800;font-size:150px;line-height:.86;letter-spacing:-.06em;max-width:640px}
.t-kopa h1 i{font-style:normal;color:#ff7a59}
.t-kopa header b{position:absolute;display:grid;place-items:center;text-align:center;width:150px;height:150px;border-radius:50%;font-size:19px;line-height:1.1}
.t-kopa .s1{right:60px;top:20px;background:#ff7a59;color:#fff3e6;transform:rotate(12deg);animation:wob 5s ease-in-out infinite alternate}
.t-kopa .s2{right:230px;top:300px;background:#2b3cff;color:#fff3e6;transform:rotate(-10deg);width:120px;height:120px;font-size:16px}
@keyframes wob{to{transform:rotate(-8deg) scale(1.05)}}
.t-kopa .cup{position:absolute;right:50px;bottom:0;width:230px;height:250px;border-radius:20px 20px 110px 110px;background:#2b3cff}
.t-kopa .cup::before{content:"";position:absolute;right:-64px;top:44px;width:90px;height:110px;border:26px solid #2b3cff;border-left:0;border-radius:0 70px 70px 0}
.t-kopa .band{display:flex;gap:44px;padding:22px 44px;background:#2b3cff;color:#fff3e6;font-weight:800;font-size:40px;letter-spacing:-.04em;white-space:nowrap}
.t-kopa .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:44px}
.t-kopa .cards div{border:2.5px solid #2b3cff;border-radius:28px;padding:26px;display:grid;gap:60px}
.t-kopa .cards div:nth-child(2){background:#ff7a59;color:#fff3e6;border-color:#ff7a59;transform:rotate(-2deg)}
.t-kopa .cards b{font-size:28px;letter-spacing:-.04em}
.t-kopa .cards span{font-weight:600}
.t-kopa footer{padding-top:0;font-size:26px;letter-spacing:-.03em}

/* 9. Nord et Associés, avocats */
.t-nord{background:#f2f1ee;color:#141414;font-family:Geist,sans-serif}
.t-nord nav{border-bottom:1px solid #141414;font-size:13px}
.t-nord nav b{font-family:"Playfair Display",serif;font-weight:500;font-size:24px;margin-right:auto}
.t-nord header{padding:90px 44px 80px;border-bottom:1px solid #141414}
.t-nord h1{font-family:"Playfair Display",serif;font-weight:400;font-size:88px;line-height:1.04;letter-spacing:-.02em;max-width:780px}
.t-nord header p{margin-top:30px;max-width:380px;font-size:18px}
.t-nord .cols{display:grid;grid-template-columns:repeat(3,1fr)}
.t-nord .cols div{padding:40px 30px 60px 44px;border-right:1px solid #141414;display:grid;gap:10px;align-content:start}
.t-nord .cols div:last-child{border:0}
.t-nord .cols b{font-family:"Playfair Display",serif;font-weight:500;font-size:26px}
.t-nord .cols span{color:#555}
.t-nord .quote{background:#141414;color:#f2f1ee;padding:80px 44px}
.t-nord .quote p{font-family:"Playfair Display",serif;font-style:italic;font-size:50px;line-height:1.12;max-width:700px}
.t-nord footer b{border-bottom:1px solid #141414;padding-bottom:3px;font-weight:500}

/* 10. Volt, électricien */
.t-volt{background:#0a0f1f;color:#e9edf7;font-family:Outfit,sans-serif}
.t-volt nav b{font-weight:800;font-size:28px;letter-spacing:.02em;margin-right:auto;color:#d7ff3e}
.t-volt nav em{background:#d7ff3e;color:#0a0f1f;border-radius:8px}
.t-volt header{position:relative;padding:60px 44px 150px;overflow:hidden}
.t-volt header p{font-family:"JetBrains Mono",monospace;font-size:14px;color:#d7ff3e}
.t-volt h1{font-weight:600;font-size:78px;line-height:1.02;letter-spacing:-.035em;max-width:720px;margin-top:20px}
.t-volt .wire{position:absolute;left:0;right:0;bottom:50px;height:4px;background:#1c2540}
.t-volt .wire::after{content:"";position:absolute;top:-4px;width:180px;height:12px;border-radius:6px;background:#d7ff3e;box-shadow:0 0 30px 6px rgb(215 255 62/.5);animation:wire 2.6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes wire{from{left:-180px}to{left:900px}}
.t-volt .rows div{display:grid;grid-template-columns:90px 1fr auto;align-items:baseline;gap:10px;padding:32px 44px;border-top:1px solid #1c2540}
.t-volt .rows i{font-family:"JetBrains Mono",monospace;font-style:normal;color:#d7ff3e}
.t-volt .rows b{font-size:36px;font-weight:500;letter-spacing:-.03em}
.t-volt .rows span{opacity:.65}
.t-volt footer{background:#d7ff3e;color:#0a0f1f}
.t-volt footer b{font-weight:700;font-size:30px;letter-spacing:-.02em}