/* Le Web de chez nous — identité moderne, deux ambiances.
   Les composants partagent leurs couleurs; les concepts du portfolio gardent
   leur direction artistique propre. Charger après style.css. */
:root {
  color-scheme: light;
  --paper: #f8f9fc;
  --white: #ffffff;
  --ink: #171b25;
  --muted: #586173;
  --accent: #1f52aa;
  --accent-dark: #17458e;
  --sand: #edf0f7;
  --sage: #e8edf8;
  --line: #d5dbe6;
  --surface: #ffffff;
  --surface-alt: #eef1f8;
  --surface-accent: #e8edf9;
  --field: #f8f9fc;
  --edge: #8290aa;
  --button-bg: #17365c;
  --button-text: #ffffff;
  --button-hover: #1f52aa;
  --art-bg: #e2e8f5;
  --art-grid: #cbd5eb;
  --shadow: #1c2d561c;
  --success-bg: #e9f5ed;
  --success-text: #255a38;
  --success-edge: #518a64;
  --error-bg: #fff0ed;
  --error-text: #9d3426;
  --error-edge: #b74a3b;
  --display: Arial, Helvetica, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101216;
  --white: #171b22;
  --ink: #f2f4fa;
  --muted: #afb8ca;
  --accent: #9ec6ff;
  --accent-dark: #c4dcff;
  --sand: #1b212d;
  --sage: #1e273b;
  --line: #363e50;
  --surface: #171b22;
  --surface-alt: #1d2330;
  --surface-accent: #202b45;
  --field: #10151e;
  --edge: #7e8ba5;
  --button-bg: #c4d0ff;
  --button-text: #101828;
  --button-hover: #e1e7ff;
  --art-bg: #202b43;
  --art-grid: #344460;
  --shadow: #00000045;
  --success-bg: #162d23;
  --success-text: #b6e8c8;
  --success-edge: #7db795;
  --error-bg: #351e22;
  --error-text: #ffbfb6;
  --error-edge: #f29589;
}
::selection { background: var(--accent); color: var(--paper); }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.055em; line-height: 1.06; }
h1 em, h2 em, h3 em { font-family: inherit; font-weight: inherit; font-style: normal; }
.hero-copy h1 { font-size: clamp(58px, 5.35vw, 79px); letter-spacing: -.06em; line-height: 1.06; }
.page-hero h1 { font-size: clamp(55px, 5.7vw, 84px); }
.hero-intro { max-width: 440px; }
.eyebrow { letter-spacing: .13em; }
.button { border-radius: 9px; font-size: 13px; }
.button-primary { background: var(--button-bg); color: var(--button-text); border-color: var(--button-bg); }
.button-primary:hover { background: var(--button-hover); color: var(--button-text); border-color: var(--button-hover); }
.button-outline, .text-link, .copy-button { border-color: var(--edge); }
.button-outline:hover, .round-link:hover, .service-feature:hover .circle-arrow { background: var(--button-bg); color: var(--button-text); border-color: var(--button-bg); }
.skip-link { background: var(--button-bg); color: var(--button-text); }
.header-inner { gap: 24px; height: 92px; }
.brand { gap: 10px; }
.brand-monogram { width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 12px; font: 600 29px/38px var(--sans); letter-spacing: -.06em; padding: 0; text-align: center; }
.brand-monogram > span { font: 500 16px/1 var(--sans); right: 2px; top: 1px; }
.brand-name { font: 600 22px/1.05 var(--sans); letter-spacing: -.045em; }
.brand-name > span { font-size: 12px; font-weight: 500; letter-spacing: .015em; margin-top: 4px; }
.header-nav { gap: 22px; font-size: 12px; }
.header-contact { margin-left: 0; border-color: var(--edge); }
.menu-toggle, .menu-close { border-color: var(--edge); border-radius: 9px; }
.menu-sign, .menu-close > span { font-family: var(--sans); }
.theme-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--edge); border-radius: 99px; background: var(--surface); color: var(--ink); font: 600 11px/1 var(--sans); }
.theme-toggle:hover { border-color: var(--accent); }
[data-theme-label] { min-width: 39px; text-align: left; }
.theme-track { display: block; position: relative; width: 32px; height: 20px; border-radius: 20px; background: var(--line); border: 1px solid var(--edge); }
.theme-thumb { position: absolute; width: 12px; height: 12px; top: 3px; left: 3px; border-radius: 50%; background: var(--ink); transition: transform .2s var(--ease); }
[data-theme="dark"] .theme-thumb { transform: translateX(12px); background: var(--button-bg); }
.studio-menu::backdrop { background: var(--paper); }
.menu-links > a > span:nth-child(2) { font-family: var(--sans); font-weight: 500; font-size: clamp(22px, 2.2vw, 33px); letter-spacing: -.04em; }
.menu-intro h2 { font-size: clamp(48px, 4.6vw, 69px); }
.hero-art-back { inset: 40px -65px 15px 65px; border: 1px solid var(--art-grid); border-radius: 32px; transform: rotate(7deg); background-color: var(--art-bg); background-image: linear-gradient(var(--art-grid) 1px, transparent 1px), linear-gradient(90deg, var(--art-grid) 1px, transparent 1px); background-size: 52px 52px; }
.hero-art-word { color: var(--accent); font: 500 55px/1 var(--sans); letter-spacing: -.06em; opacity: .75; }
.hero-artboard { border-radius: 12px; border-color: var(--line); box-shadow: 16px 28px 55px var(--shadow); }
.hero-seal { border-color: var(--edge); box-shadow: 0 10px 30px var(--shadow); }
.caption-rule { background: var(--edge); }
.location-dot, .motion-dot { background: var(--accent); }
.hero-location { font-size: 10px; line-height: 1.6; letter-spacing: .035em; }
.hero-location .location-dot { flex-shrink: 0; }
.quebec-icon { display: block; width: 16px; height: 18px; flex: 0 0 auto; color: var(--accent); }
.hero-seal .quebec-icon { width: 34px; height: 40px; }
.regional-label { display: inline-flex; align-items: center; gap: 8px; }
.regional-label .quebec-icon { width: 12px; height: 14px; }
.service-feature, .offer, .hosting-tile, .contact-card { border-color: var(--line); border-radius: 16px; }
.service-feature:hover { border-color: var(--accent); }
.service-creation, .offer, .hosting-tile { background: var(--surface); }
.service-hosting, .offer-highlight { background: var(--surface-accent); }
.service-feature h3 { font-family: var(--sans); font-size: clamp(32px, 3.2vw, 47px); font-weight: 500; letter-spacing: -.05em; }
.circle-arrow, .service-foot, .round-link { border-color: var(--edge); }
.work-art-sand, .service-art, .case-stage-sand { background: var(--surface-alt); }
.work-art-sage, .case-stage-sage { background: var(--surface-accent); }
.work-art, .case-stage, .service-art { border-radius: 20px; border: 1px solid var(--line); }
.work-caption h3, .hosting-tile h3, .principle h3, .process-step h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -.045em; }
.work-caption h3 { font-size: 26px; }
.hosting-detail { background: var(--surface-alt); border-color: var(--line); }
.hosting-tile h3 { font-size: 26px; }
.tile-icon, .principle-symbol, .step-number, .process-flower { color: var(--accent); }
.scope-note, .contact-note { border-color: var(--accent); }
.principle { border-color: var(--line); }
.principle h3 { font-size: 30px; }
.concept-label { border-color: var(--edge); border-radius: 5px; }
.case-note > span { color: var(--accent); }
.case-note > p { color: var(--muted); }
.offer h2 { font-size: clamp(40px, 3.6vw, 54px); }
.clean-list li { border-color: var(--line); }
.step-number { font-family: var(--sans); font-style: normal; font-size: 32px; }
.process-step h3 { font-size: 37px; }
.contact-card > h2 { font-size: 44px; }
.form-mode { background: var(--surface-alt); border-color: var(--accent); border-radius: 0 8px 8px 0; }
.contact-card input, .contact-card select, .contact-card textarea { background: var(--field); border-color: var(--edge); border-radius: 8px; font-size: 16px; }
.contact-card input::placeholder, .contact-card textarea::placeholder { color: var(--muted); opacity: 1; }
.contact-card input:hover, .contact-card select:hover, .contact-card textarea:hover { border-color: var(--accent); }
.contact-card [aria-invalid="true"] { border-color: var(--error-edge); outline-color: var(--error-edge); }
.form-feedback { background: var(--success-bg); color: var(--success-text); border-color: var(--success-edge); }
.form-feedback.error { background: var(--error-bg); color: var(--error-text); border-color: var(--error-edge); }
.site-footer { background: var(--surface-alt); border-color: var(--line); }
.footer-invite, .footer-bottom, .footer-location { border-color: var(--line); }
.footer-invite h2 { font-size: clamp(48px, 5.3vw, 78px); }
.footer-wordmark { color: var(--ink); font-family: var(--sans); font-weight: 600; font-size: clamp(48px, 11.5vw, 160px); line-height: 1; letter-spacing: -.065em; white-space: normal; overflow-wrap: anywhere; }
.footer-wordmark > span { display: block; color: var(--accent); font-style: normal; }
.footer-bottom { color: var(--muted); }
.motion-toggle { background: var(--surface); color: var(--muted); border-color: var(--edge); min-height: 44px; }
.motion-toggle:hover { border-color: var(--accent); }
/* Ces scènes sont des aperçus de projets fictifs, pas des composants du site. */
.mockup, .hero-phone, .mini-browser, .mini-swatch, .host-core { --accent: #945b3f; --muted: #626960; color: #282e2c; color-scheme: light; }
.hero-phone { box-shadow: 10px 15px 30px var(--shadow); }
/* L’en-tête garde le changement d’ambiance visible, y compris à 320 px. */
@media(max-width: 1280px) { .header-contact { display: none; } }
@media(max-width: 950px) {
  .header-nav { display: none; }
  .theme-toggle { margin-left: auto; }
  .header-inner { gap: 14px; height: 82px; }
  .fallback-nav { margin-left: 0; }
  .hero-copy h1 { font-size: clamp(55px, 8.7vw, 78px); }
  .page-hero h1 { font-size: clamp(50px, 7.5vw, 74px); }
}
@media(max-width: 650px) {
  .header-inner { height: 76px; gap: 9px; }
  .brand { gap: 7px; }
  .brand-monogram { width: 32px; height: 34px; font-size: 23px; line-height: 30px; padding: 0; border-radius: 9px; }
  .brand-monogram > span { font-size: 12px; top: 1px; right: 1px; }
  .brand-name { font-size: 16px; }
  .brand-name > span { font-size: 9px; letter-spacing: .01em; margin-top: 3px; }
  .theme-toggle { gap: 6px; padding: 8px; font-size: 10px; }
  [data-theme-label] { min-width: 35px; }
  .menu-toggle { gap: 10px; padding: 8px 10px; min-height: 44px; font-size: 11px; }
  .menu-sign { font-size: 23px; }
  .hero-copy h1 { font-size: clamp(39px, 9vw, 57px); line-height: 1.07; letter-spacing: -.06em; }
  .title-spark { top: -21px; right: 1px; font-size: 25px; }
  h2, .intro-statement, .care-layout h2, .detail-sticky h2, .note-layout h2, .contact-aside h2 { font-size: clamp(34px, 8.3vw, 49px); }
  .page-hero h1 { font-size: clamp(39px, 10vw, 58px); }
  .hero-art-back { inset: 25px -10px 15px 45px; border-radius: 22px; background-size: 35px 35px; }
  .hero-art-word { font-size: 40px; }
  .hero-location { font-size: 9px; letter-spacing: .02em; }
  .hero-seal .quebec-icon { width: 22px; height: 26px; }
  .service-feature { padding: 28px 24px 22px; }
  .service-feature h3 { font-size: 36px; }
  .offer h2 { font-size: 42px; }
  .contact-card > h2 { font-size: 36px; }
  .case-heading h2 { font-size: 49px; }
  .menu-intro h2 { font-size: 36px; }
  .menu-links > a > span:nth-child(2) { font-size: 29px; }
  .process-step h3 { font-size: 32px; }
  .footer-invite h2 { font-size: clamp(32px, 7.7vw, 46px); }
  .footer-wordmark { font-size: 12vw; }
}
@media(max-width: 360px) {
  .header-inner { gap: 7px; }
  .brand { gap: 6px; }
  .brand-name { font-size: 15px; }
  .theme-toggle { gap: 5px; padding-inline: 6px; }
  .theme-track { width: 28px; }
  [data-theme="dark"] .theme-thumb { transform: translateX(8px); }
  .menu-toggle { gap: 7px; padding-inline: 8px; }
  .hero-copy h1 { font-size: 39px; }
}
@media(prefers-reduced-motion: reduce) { .theme-thumb { transition: none; } }
@media(forced-colors: active) {
  .theme-toggle, .theme-track { border: 1px solid ButtonText; }
  .theme-thumb, [data-theme="dark"] .theme-thumb { background: ButtonText; }
  .button-primary { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
}
@media print {
  :root, :root[data-theme="dark"] { --paper: #fff; --surface: #fff; --surface-alt: #fff; --surface-accent: #fff; --ink: #000; --muted: #333; --accent: #234299; --accent-dark: #234299; --field: #fff; color-scheme: light; }
}

/* Réalisations : compositions éditoriales, sans capture ni chargement externe. */
.real-work{background:var(--surface);border-block:1px solid var(--line)}
.real-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.project-card{min-width:0;scroll-margin-top:120px}
.project-cover{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;min-height:340px;overflow:hidden;border-radius:14px;padding:25px;color:#fff;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease}
.project-inspection{background:#17365c}.project-fruitier{background:#284b38}.project-carrelage{background:#292e37}
.project-cover-top{display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:10px;letter-spacing:.1em}
.project-cover-top>span:last-child{font-size:28px;line-height:1}
.project-cover-copy{position:relative;z-index:1;max-width:260px;padding-block:30px}
.project-cover-copy>span{font-size:11px;display:block;margin-bottom:15px}
.project-cover-copy>strong{display:block;font:600 clamp(28px,2.7vw,39px)/1.08 var(--sans);letter-spacing:-.045em;overflow-wrap:normal}
.project-cover-copy>small{display:block;margin-top:20px;font-size:12px;line-height:1.6}
.project-domain{position:relative;z-index:1;font-size:11px;overflow-wrap:anywhere}
.project-shape{position:absolute;z-index:-1;right:-45px;bottom:48px;width:190px;height:190px;border:1px solid #ffffff35;transform:rotate(30deg);border-radius:18px}
.project-inspection .project-shape{border-width:18px;transform:rotate(45deg);border-radius:0}
.project-fruitier .project-shape{border-radius:50%;border-width:36px;width:210px;height:210px;right:-95px}
.project-carrelage .project-shape{background:repeating-linear-gradient(90deg,transparent 0 42px,#ffffff24 42px 43px),repeating-linear-gradient(0deg,transparent 0 42px,#ffffff24 42px 43px);border:0;width:230px;height:230px;right:-65px}
.project-info{padding:25px 0 0}.project-info .small-label{font-size:10px;color:var(--muted);margin-bottom:12px}
.project-info h3{font:600 24px/1.2 var(--sans);letter-spacing:-.035em;margin:0 0 14px;overflow-wrap:anywhere}
.project-info>p:not(.small-label){font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:18px}
.project-info .text-link{font-size:12px;min-height:44px}
.project-cover:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
@media(hover:hover) and (pointer:fine){.project-cover:hover{transform:translateY(-5px);box-shadow:0 12px 28px var(--shadow)}}
@media(max-width:950px){.real-project-grid{gap:20px}.project-cover{padding:20px;min-height:320px}.project-cover-copy>strong{font-size:30px}.project-info h3{font-size:22px}}
@media(max-width:760px){.real-project-grid{grid-template-columns:1fr;gap:45px}.project-cover{min-height:290px;padding:25px}.project-cover-copy{max-width:320px}.project-cover-copy>strong{font-size:36px}.project-info h3{font-size:26px}}
@media(prefers-reduced-motion:reduce){.project-cover{transition:none}.project-cover:hover{transform:none}}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Grandes démonstrations : seule la démo choisie est chargée. */
.project-demo-section{border-bottom:1px solid var(--line)}
.project-demo-section .section-heading>div:last-child{max-width:350px}
.project-demo-section .section-heading h3{font-size:18px;line-height:1.4;margin-bottom:12px}
.project-demo-section .section-heading p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.8}
.project-demo{border:1px solid var(--line);border-radius:16px;background:var(--surface-alt);overflow:hidden}
.demo-toolbar{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.demo-address{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.demo-views{display:flex;gap:5px;flex-wrap:wrap}
.demo-views button{min-height:44px;padding:10px 15px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.demo-views button[aria-pressed=true]{background:var(--button-bg);color:var(--button-text);border-color:var(--button-bg)}
.demo-toolbar .text-link{min-height:44px;font-size:12px}
.demo-screen{width:100%;margin-inline:auto;min-width:0;background:var(--surface);height:720px}
.demo-screen[data-view=mobile]{width:min(390px,100%)}
.demo-poster{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;color:#fff;background-image:radial-gradient(ellipse at 90% 90%,#ffffff1a,transparent 65%)}
.demo-poster>strong{font:600 clamp(34px,5vw,72px)/1.05 var(--sans);letter-spacing:-.05em;max-width:780px;margin-block:30px}
.demo-poster>p{font-size:16px;line-height:1.7;margin-bottom:30px}
.demo-poster>.button{color:#fff;border-color:#ffffff88;background:transparent;white-space:normal;line-height:1.5}
.demo-poster>.button:hover{background:#fff;color:#17365c}
.demo-mount,.demo-mount iframe{width:100%;height:100%;display:block;border:0;background:#fff}
.demo-bottom{padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.demo-bottom>p{font-size:12px;line-height:1.7;color:var(--muted);max-width:780px;margin:0}
.demo-bottom>button{flex-shrink:0;min-height:44px;background:none;border:0;color:var(--ink);cursor:pointer}
.demo-poster[hidden],.demo-mount[hidden],.demo-views button[hidden],.demo-bottom>button[hidden]{display:none}
.demo-views button:focus-visible,.demo-bottom>button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Forfaits à prix fixe : les conditions proposées restent visibles. */
.pricing-draft{margin-top:35px;border:1px solid var(--edge);background:var(--surface-accent);padding:20px 24px;border-radius:12px;font-size:14px;line-height:1.8;color:var(--ink)}
.pricing-draft strong{display:block;font-size:16px;margin-bottom:4px}
.priced-offer{display:flex;flex-direction:column;min-width:0}
.priced-offer h2{font-size:clamp(32px,3vw,46px)}
.offer-price{margin:25px 0 30px;display:flex;flex-direction:column;gap:9px}
.offer-price>strong{font:600 clamp(40px,4.5vw,62px)/1 var(--sans);letter-spacing:-.06em;color:var(--ink)}
.offer-price>span{font-size:12px;line-height:1.6;color:var(--muted)}
.priced-offer>.clean-list{margin-bottom:35px}
.priced-offer>.offer-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:16px}
.priced-offer .offer-bottom>span{font-size:12px;line-height:1.6;color:var(--muted)}
.priced-offer .offer-bottom>.button{width:100%;min-width:0;white-space:normal;line-height:1.6;justify-content:space-between}
.hosting-plans{background:var(--surface-alt)}
.hosting-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.hosting-plan{border:1px solid var(--line);border-radius:14px;padding:40px;background:var(--surface);display:flex;flex-direction:column;align-items:flex-start}
.hosting-plan h3{font-size:30px;line-height:1.2;letter-spacing:-.04em;margin-top:20px}
.hosting-plan>.clean-list{margin-bottom:25px}
.hosting-plan>p:not(.small-label){font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:25px}
.hosting-plan>.button{margin-top:auto;white-space:normal;line-height:1.6}
@media(max-width:950px){.demo-toolbar{gap:12px}.demo-address{flex-basis:100%}.offers-grid:has(.priced-offer){grid-template-columns:1fr}.priced-offer{padding:30px}.priced-offer>.clean-list{min-height:0}.offer-price>strong{font-size:52px}}
@media(max-width:650px){.demo-screen{height:600px}.demo-toolbar{padding:14px}.demo-toolbar .text-link{font-size:11px}.demo-poster{padding:25px}.demo-poster>strong{font-size:42px;overflow-wrap:anywhere}.demo-poster>p{font-size:14px}.demo-bottom{padding:14px;align-items:flex-start;flex-direction:column;gap:10px}.hosting-plan-grid{grid-template-columns:1fr}.hosting-plan{padding:28px}.pricing-draft{padding:18px;font-size:13px}.project-demo-section .section-heading h2{font-size:42px}}