/* ==========================================================================
   Ovrea — sites vitrines & logiciel de gestion pour artisans
   Même direction artistique que l'application Ovrea : papier quadrillé,
   bleu nuit, bleu Ovrea et ambre, titres Archivo très larges en capitales,
   étiquettes IBM Plex Mono, ombres pleines décalées.
   ========================================================================== */

/* ---------- Polices (fichiers sur le site, licence SIL Open Font) ---------- */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-var.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plexmono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plexmono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-var.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-var.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic-var.woff2") format("woff2"); font-weight: 500 700; font-style: italic; font-display: swap; }

/* ---------- Tokens (repris de l'application) ---------- */
:root {
  --accent: #2447B8;
  --accent-deep: #16307F;
  --accent-soft: #DCE4FA;
  --amber: #F2A93B;
  --amber-ink: #2B1A00;
  --amber-soft: #FCEBCF;
  --band: #0E1832;
  --band-2: #16213F;
  --band-ink: #E9EEFA;
  --band-logo: #7D9BFF;
  --band-muted: #8E9BC0;
  --band-line: rgba(233, 238, 250, 0.16);
  --bg: #ECEFF5;
  --surface: #FFFFFF;
  --surface-2: #E3E8F1;
  --grid: rgba(36, 71, 184, 0.055);
  --ink: #0E1832;
  --line: #CDD5E3;
  --muted: #56627F;
  --ok: #1C7A4A;
  --ok-soft: #D8F0E2;
  --bad: #B4282E;
  --bad-soft: #F9DCDD;
  --warn: #9A5A08;
  --warn-soft: #FBEACB;
  --wood: #A4610F;
  --wood-soft: #FBEBD2;

  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Archivo", "Instrument Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-logo: "Space Grotesk", "Archivo", system-ui, sans-serif;

  --r: 6px;
  --r-btn: 4px;
  --max: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(80px, 9vw, 128px);
  --nav-h: 68px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--band); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, fieldset { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg use { pointer-events: none; }

::selection { background: var(--amber); color: var(--amber-ink); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 400;
  padding: 10px 16px;
  border-radius: var(--r-btn);
  background: var(--amber);
  color: var(--amber-ink);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform .4s var(--ease-out);
}
.skip:focus-visible { transform: none; }

.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- Surfaces ---------- */
.paper {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
}
.paper--alt { background-color: var(--surface-2); border-top: 2px solid var(--ink); }
.band {
  background-color: var(--band);
  background-image:
    linear-gradient(rgba(125, 155, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 155, 255, 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--band-ink);
}
.band--deep { background-color: #0B1329; }

/* ---------- Typographie ---------- */
.nowrap { white-space: nowrap; }
.display {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
}
.label {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent);
}
.label i { font-style: normal; opacity: .6; }
.label--amber { color: var(--amber); }
.band .label:not(.label--amber) { color: var(--band-muted); }

.h2 { font-size: clamp(30px, 3.9vw, 54px); font-stretch: 120%; }
.h2--xl { font-size: clamp(34px, 5vw, 74px); }
.head { max-width: 900px; margin-bottom: clamp(44px, 5vw, 72px); }
.head .label { margin-bottom: 18px; }
.head .h2 { padding-bottom: 22px; border-bottom: 2px solid currentColor; }
.head--center { margin-inline: auto; text-align: center; }
.head--center .h2 { border-bottom: 0; padding-bottom: 0; }
.lead {
  max-width: 640px;
  margin-top: 22px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--muted);
}
.band .lead { color: #C9D3EE; }
.head--center .lead { margin-inline: auto; }

.link {
  color: var(--accent);
  font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  padding-bottom: 2px;
  transition: background-size .5s var(--ease-out);
}
.link:hover { background-size: 0 2px; background-position: 100% 100%; }

/* Découpage des titres en mots (animations) */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.12em 0.03em 0.12em;
  margin: -0.12em -0.03em -0.12em;
}
.w__i { display: inline-block; }
.js [data-split]:not(.is-split) { visibility: hidden; }
.js [data-hero-item] { opacity: 0; }

/* ---------- Boutons ---------- */
.btn {
  --h: 48px;
  --shadow: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h);
  padding: 0 20px;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
  transition: translate .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .3s, color .3s, border-color .3s;
}
.btn--sm { --h: 40px; padding: 0 14px; font-size: 14px; }
.btn--lg { --h: 56px; padding: 0 26px; font-size: 16px; }
.btn--block { width: 100%; }

/* Bouton principal : ambre avec ombre pleine bleue, qui « s'enfonce » au clic */
.btn--amber {
  background: var(--amber);
  color: var(--amber-ink);
  box-shadow: 4px 4px 0 var(--shadow);
}
.btn--amber:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--shadow); }
.btn--amber:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--shadow); }
.offer--blue .btn--amber,
.about__card .btn--amber { --shadow: var(--ink); }

.btn--line { border-color: var(--band-ink); color: var(--band-ink); }
.btn--line:hover { background: var(--band-ink); color: var(--band); }

.btn--ink { border-color: var(--ink); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn--ink:hover { background: var(--ink); color: #fff; translate: -2px -2px; box-shadow: 5px 5px 0 var(--amber); }
.btn--ink:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }

.roll { position: relative; display: inline-grid; overflow: hidden; height: 1.25em; line-height: 1.25; }
.roll > span { grid-area: 1 / 1; display: block; transition: transform .55s var(--ease-in-out); }
.roll > span + span { transform: translateY(110%); }
.btn:hover .roll > span:first-child { transform: translateY(-110%); }
.btn:hover .roll > span + span { transform: none; }

.btn__icon { position: relative; width: 18px; height: 18px; overflow: hidden; flex-shrink: 0; }
.btn__icon svg { position: absolute; inset: 0; width: 18px; height: 18px; transition: transform .55s var(--ease-in-out); }
.btn__icon svg + svg { transform: translateX(-130%); }
.btn:hover .btn__icon svg:first-child { transform: translateX(130%); }
.btn:hover .btn__icon svg + svg { transform: none; }

/* ---------- Logo ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--band-ink); --logo: var(--band-logo); }
.brand__mark { width: 34px; height: 34px; overflow: visible; }
.brand__mark use { transition: transform .6s var(--ease-out); }
.brand__word { font-family: var(--f-logo); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.brand:hover .brand__mark { animation: wobble .8s var(--ease-out); }
@keyframes wobble {
  0% { transform: rotate(0); }
  30% { transform: rotate(-12deg) scale(1.08); }
  60% { transform: rotate(6deg); }
  100% { transform: rotate(0); }
}

/* ---------- Curseur & progression ---------- */
.cursor { position: fixed; inset: 0 auto auto 0; z-index: 300; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.has-cursor,
.has-cursor * { cursor: none !important; }
.has-cursor input,
.has-cursor textarea { cursor: text !important; }
.cursor__dot,
.cursor__ring { position: fixed; top: 0; left: 0; will-change: transform; }
.cursor__dot { width: 8px; height: 8px; background: var(--amber); border-radius: 2px; transform-origin: center; transition: opacity .3s; }
.cursor__ring {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--accent);
  transition: width .45s var(--ease-out), height .45s var(--ease-out), background-color .35s, box-shadow .35s, opacity .3s, border-radius .45s;
}
.cursor__label { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-ink); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.cursor.is-link .cursor__ring { width: 54px; height: 54px; background: rgba(242, 169, 59, 0.18); box-shadow: inset 0 0 0 2px var(--amber); }
.cursor.is-label .cursor__ring { width: 92px; height: 92px; background: var(--amber); box-shadow: none; }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-link .cursor__dot,
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-down .cursor__ring { width: 26px; height: 26px; }
.cursor.is-text .cursor__ring,
.cursor.is-text .cursor__dot,
.cursor.is-out .cursor__ring,
.cursor.is-out .cursor__dot { opacity: 0; }

.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: 3px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left center; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--nav-h);
  background: var(--band);
  border-bottom: 3px solid var(--amber);
  transition: transform .7s var(--ease-out);
}
.nav.is-hidden { transform: translateY(-110%); }
.nav__inner {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav__links { display: flex; gap: 6px; margin-right: auto; }
.nav__links a {
  position: relative;
  padding: 8px 12px;
  border-radius: var(--r-btn);
  font-size: 15px;
  font-weight: 600;
  color: var(--band-ink);
  transition: color .3s, background-color .3s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); transform-origin: left center; }
.nav__links a.is-active { color: var(--amber); }
.nav__actions { display: flex; align-items: center; gap: 10px; }

.burger {
  position: relative;
  display: none;
  width: 44px;
  height: 40px;
  border: 1.5px solid var(--band-ink);
  border-radius: var(--r-btn);
}
.burger span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--band-ink);
  transition: transform .5s var(--ease-out), top .5s var(--ease-out);
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 22px; }
.menu-open .burger span:nth-child(1) { top: 18px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: 18px; transform: rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-h) + 36px) var(--gutter) max(28px, env(safe-area-inset-bottom));
  background: var(--band);
  color: var(--band-ink);
  clip-path: inset(0% 0% 100% 0%);
  visibility: hidden;
  transition: clip-path .8s var(--ease-in-out), visibility 0s linear .8s;
}
.menu-open .menu { clip-path: inset(0% 0% 0% 0%); visibility: visible; transition: clip-path .8s var(--ease-in-out), visibility 0s; }
.menu__links a {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--band-line);
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 120%;
  font-size: clamp(28px, 8.4vw, 48px);
  line-height: 1.25;
  text-transform: uppercase;
}
.menu__links a span { display: block; padding: 6px 0; transform: translateY(105%); transition: transform .8s var(--ease-out); }
.menu-open .menu__links a span { transform: none; }
.menu-open .menu__links a:nth-child(2) span { transition-delay: .05s; }
.menu-open .menu__links a:nth-child(3) span { transition-delay: .1s; }
.menu-open .menu__links a:nth-child(4) span { transition-delay: .15s; }
.menu-open .menu__links a:nth-child(5) span { transition-delay: .2s; }
.menu-open .menu__links a:nth-child(6) span { transition-delay: .25s; }
.menu__foot { display: grid; gap: 14px; }

/* ---------- Accueil ---------- */
.hero { position: relative; padding: calc(var(--nav-h) + clamp(56px, 8vw, 104px)) 0 clamp(64px, 8vw, 112px); overflow: hidden; }
.hero__text { position: relative; z-index: 2; }
.hero__text .label { margin-bottom: 22px; }
.hero__title {
  max-width: 1120px;
  font-size: clamp(34px, 4.6vw, 70px);
  font-stretch: 118%;
  color: var(--band-ink);
}
.mark { color: var(--amber); }
.hero__lead {
  max-width: 660px;
  margin-top: 26px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: #C9D3EE;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__note { margin-top: 18px; font-size: 14px; color: var(--band-muted); }

.duo { margin-top: clamp(56px, 7vw, 96px); perspective: 1600px; }
.duo__scene {
  position: relative;
  height: clamp(320px, 40vw, 520px);
  transform-style: preserve-3d;
  will-change: transform;
}
.win {
  position: absolute;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  will-change: transform;
}
.win--site { left: 0; top: 0; width: 62%; height: 88%; box-shadow: 10px 10px 0 var(--accent); }
.win--app { right: 0; bottom: 0; width: 50%; box-shadow: 10px 10px 0 var(--amber); }
.win__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 36px;
  padding: 0 12px;
  border-bottom: 2px solid var(--ink);
  background: var(--surface-2);
}
.win__dots { display: flex; gap: 6px; }
.win__dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); }
.win__url { padding: 3px 12px; border-radius: 3px; background: var(--surface); font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }
.win__tag {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.win__tag--amber { top: auto; bottom: 10px; background: var(--amber); color: var(--amber-ink); }

.site-mini { display: grid; gap: 12px; height: calc(100% - 36px); padding: 14px 16px; background: #FBF7F0; }
.site-mini__nav { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.site-mini__nav b { margin-right: auto; font-family: var(--f-display); font-weight: 900; font-stretch: 112%; font-size: 17px; text-transform: uppercase; }
.site-mini__nav span { width: 46px; height: 7px; border-radius: 2px; background: rgba(14, 24, 50, 0.16); }
.site-mini__nav em { padding: 5px 10px; border-radius: 3px; background: var(--wood); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 700; }
.site-mini__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 18px;
  overflow: hidden;
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 46px),
    linear-gradient(135deg, #6B4423, #3A2412);
  color: #FBEBD2;
}
.site-mini__hero p { font-family: var(--f-display); font-weight: 900; font-stretch: 118%; font-size: clamp(18px, 2.4vw, 34px); line-height: .95; text-transform: uppercase; }
.site-mini__btn { align-self: flex-start; margin-top: 10px; padding: 7px 12px; border-radius: 3px; background: #FBEBD2; color: #3A2412; font-size: 12px; font-weight: 700; }
.site-mini__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.site-mini__tiles i { height: clamp(36px, 5vw, 64px); border-radius: 4px; border: 1.5px solid rgba(14, 24, 50, 0.14); background: var(--wood-soft); }

.dash__top {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  background: var(--band);
  color: var(--band-ink);
  border-bottom: 3px solid var(--amber);
  --logo: var(--band-logo);
}
.dash__logo { width: 20px; height: 20px; }
.dash__top b { font-family: var(--f-logo); font-size: 15px; letter-spacing: -0.03em; margin-right: 10px; }
.dash__title,
.dash__sample { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.dash__sample { margin-left: auto; color: var(--amber); }
.dash__body {
  display: grid;
  gap: 10px;
  padding: 12px;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 18px 18px;
}
.dash__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
}
.kpi--amber { border-top-color: var(--amber); }
.kpi--ink { border-top-color: var(--ink); }
.kpi small { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kpi b { font-family: var(--f-display); font-weight: 900; font-stretch: 112%; font-size: clamp(18px, 2vw, 26px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi em { font-style: normal; font-size: 11px; color: var(--muted); }
.dash__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--bad);
  border-radius: 4px;
  background: var(--surface);
  font-size: 12px;
}
.dash__row b { display: block; font-size: 12.5px; }
.dash__row small { color: var(--muted); }
.dash__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: var(--bad-soft); color: var(--bad); }
.dash__ic svg { width: 15px; height: 15px; }
.dash__btn { padding: 5px 10px; border-radius: 3px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; }
.chat { display: grid; gap: 6px; padding: 10px; border-radius: 4px; background: var(--accent-soft); font-size: 12px; }
.chat__q { justify-self: end; padding: 6px 10px; border-radius: 4px; background: var(--accent); color: #fff; font-weight: 600; }
.chat__a { padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.chat__a small { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.chat__a small svg { width: 12px; height: 12px; color: var(--amber); }
.stamp {
  position: absolute;
  right: 5%;
  top: 8%;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--ok-soft);
  color: var(--ok);
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: clamp(13px, 1.3vw, 17px);
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-6deg);
  white-space: nowrap;
}

/* ---------- Rubans de chantier ---------- */
.tapes {
  position: relative;
  z-index: 2;
  height: clamp(150px, 15vw, 210px);
  margin-top: -1px;
  overflow: hidden;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.tape {
  position: absolute;
  left: -5%;
  right: -5%;
  top: 50%;
  padding: 14px 0;
  border-block: 2px solid var(--ink);
  overflow: hidden;
  user-select: none;
}
.tape--amber { background: var(--amber); color: var(--amber-ink); transform: translateY(-50%) rotate(-3deg); z-index: 2; }
.tape--navy { background: var(--band); color: var(--band-ink); transform: translateY(-50%) rotate(2.5deg); }
.tape__track { display: flex; width: max-content; will-change: transform; }
.tape__group { display: flex; align-items: center; flex-shrink: 0; }
.tape__group span {
  padding: 0 .55em;
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 120%;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.tape__group i { font-style: normal; font-size: clamp(14px, 1.4vw, 20px); }
.tape--navy .tape__group i { color: var(--amber); }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--section-y); }

/* Repère de partie : 01 L'application, 02 Les sites vitrines */
.chapter {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-bottom: 16px;
  border-bottom: 2px dashed currentColor;
}
.chapter__n {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(64px, 8vw, 120px);
  line-height: .78;
  color: transparent;
  -webkit-text-stroke: 2px var(--amber);
}
.paper .chapter__n { -webkit-text-stroke-color: var(--accent); }
.chapter__t { padding-bottom: 6px; font-family: var(--f-mono); font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.band .chapter__t { color: var(--amber); }

/* ---------- Offres ---------- */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); align-items: stretch; }
.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3vw, 38px);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--ink);
  transition: box-shadow .35s var(--ease-out), translate .35s var(--ease-out);
}
.offer:hover { translate: -4px -4px; box-shadow: 12px 12px 0 var(--ink); }
.offer--blue { background: var(--accent); color: #fff; box-shadow: 8px 8px 0 var(--amber); }
.offer--blue:hover { box-shadow: 12px 12px 0 var(--amber); }
.offer__title { font-size: clamp(24px, 2.4vw, 34px); font-stretch: 115%; }
.offer__text { max-width: 48ch; color: var(--muted); }
.offer--blue .offer__text { color: var(--accent-soft); }
.ticks { display: grid; gap: 10px; padding-top: 18px; border-top: 2px solid currentColor; }
.ticks li { position: relative; display: flex; align-items: flex-start; gap: 12px; font-weight: 500; }
.ticks li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 4px;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8.5' fill='none' stroke='%232447B8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.offer--blue .ticks li::before { background-color: var(--amber); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8.5' fill='none' stroke='%232B1A00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.offer__foot { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: auto; padding-top: 10px; }
.offer__price { display: grid; gap: 4px; max-width: 300px; font-family: var(--f-display); font-weight: 900; font-stretch: 112%; font-size: 20px; line-height: 1.15; text-transform: uppercase; }
.offer__price em { font-style: normal; font-family: var(--f-body); font-stretch: 100%; font-size: 15px; font-weight: 600; text-transform: none; }
.offer__price small { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.offer__price b { font-size: clamp(38px, 3.6vw, 52px); line-height: 1; font-variant-numeric: tabular-nums; }
.offer--blue .offer__price small { color: var(--amber); }

/* ---------- Sites vitrines : le studio ----------
   Le visiteur tape le nom de son entreprise, choisit son métier, sa couleur
   et son écran : l'aperçu de site se reconstruit en direct dans l'appareil. */
@property --ms-acc { syntax: "<color>"; inherits: true; initial-value: #0E7CC2; }
@property --ms-acc-ink { syntax: "<color>"; inherits: true; initial-value: #FFFFFF; }
@property --st-acc { syntax: "<color>"; inherits: true; initial-value: #0E7CC2; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.studio {
  --st-acc: #0E7CC2;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 368px) minmax(0, 1fr);
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--band);
  color: var(--band-ink);
  box-shadow: 10px 10px 0 var(--accent);
  transition: --st-acc .7s var(--ease-out);
}

/* Panneau de réglages */
.studio__panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px 24px 24px;
  background: var(--band-2);
  box-shadow: inset -1px 0 0 var(--band-line);
}
.studio__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--band-muted);
}
.studio__live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 3px; background: rgba(242, 169, 59, 0.14); color: var(--amber); font-weight: 600; }
.studio__live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.studio__live i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--amber); animation: live-ping 1.8s var(--ease-out) infinite; }
@keyframes live-ping { 0% { transform: scale(.5); opacity: 1; } 80%, 100% { transform: scale(1.8); opacity: 0; } }

.sf { display: grid; gap: 18px; }
.sf__field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sf__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--band-muted);
}
.sf__label b { font-weight: 600; color: var(--amber); }
.sf__input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--band-line);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.04);
  color: var(--band-ink);
  font-size: 16px;
  font-weight: 600;
  caret-color: var(--amber);
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.sf__input:hover { border-color: rgba(233, 238, 250, 0.42); }
.sf__input:focus,
.sf__input.is-typing { border-color: var(--amber); background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.18); }
.sf__input--big { height: 56px; font-family: var(--f-display); font-size: 20px; font-weight: 800; font-stretch: 110%; letter-spacing: -0.005em; }

.trades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trade,
.swatch,
.screens label { position: relative; display: block; }
.trade input,
.swatch input,
.screens input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.trade > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 11px 4px 10px;
  border: 1.5px solid var(--band-line);
  border-radius: var(--r-btn);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.1;
  transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s var(--ease-out), translate .3s var(--ease-out);
}
.trade svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
.trade:hover > span { border-color: rgba(233, 238, 250, 0.55); }
.trade:hover svg { transform: rotate(-8deg) scale(1.1); }
.trade input:checked + span { border-color: var(--amber); background: var(--amber); color: var(--amber-ink); box-shadow: 3px 3px 0 var(--accent); translate: -1px -1px; }
.trade input:focus-visible + span,
.swatch input:focus-visible + span,
.screens input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
.trade.is-press > span { animation: trade-press .5s var(--ease-out); }
@keyframes trade-press { 0% { transform: scale(1); } 35% { transform: scale(.9); } 100% { transform: scale(1); } }
/* « Autre métier » : une case où le visiteur tape le sien */
.trade--other { grid-column: 1 / -1; }
.trade--other > span { flex-direction: row; justify-content: flex-start; gap: 10px; height: 46px; padding: 0 12px 0 14px; cursor: text; }
.trade--other svg { flex: none; width: 19px; height: 19px; }
.trade--other input {
  position: static;
  z-index: auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  opacity: 1;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: text;
  caret-color: var(--amber);
}
.trade--other input::placeholder { color: var(--band-muted); font-weight: 500; opacity: 1; }
.trade--other:focus-within > span,
.trade--other.is-typing > span { border-color: var(--amber); background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.18); }
.trade--other.is-on > span { border-color: var(--amber); background: var(--amber); color: var(--amber-ink); box-shadow: 3px 3px 0 var(--accent); translate: -1px -1px; }
.trade--other.is-on input { caret-color: var(--amber-ink); }
.trade--other.is-on input::placeholder { color: inherit; opacity: .6; }
@media (pointer: coarse) { .trade--other input { font-size: 16px; } } /* sous 16 px, l'iPhone zoome sur le champ */
.sf__input::placeholder { color: var(--band-muted); opacity: 1; }

.sf__duo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px; }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch > span {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sw, #0E7CC2);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
  transition: transform .35s var(--ease-out), box-shadow .3s, background-color .5s;
}
.swatch:hover > span { transform: scale(1.1); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--band-2), 0 0 0 4px var(--amber); }
.screens { display: flex; overflow: hidden; border: 1.5px solid var(--band-line); border-radius: var(--r-btn); }
.screens label + label { box-shadow: inset 1px 0 0 var(--band-line); }
.screens label > span { display: grid; place-items: center; width: 42px; height: 34px; color: var(--band-muted); transition: background-color .3s, color .3s; }
.screens svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.screens label:hover > span { color: var(--band-ink); }
.screens input:checked + span { background: var(--band-ink); color: var(--band); }

.studio__cta { display: grid; gap: 10px; margin-top: auto; }
.studio__cta p { font-size: 13px; color: var(--band-muted); text-align: center; }
.studio__note { margin-top: 20px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; color: var(--muted); }

/* Scène : l'appareil, les cartes flottantes et le curseur de démonstration */
.stage {
  position: relative;
  --pad-t: 58px;
  --pad-r: 40px;
  --pad-b: 108px;
  --pad-l: 40px;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(58% 58% at 58% 40%, color-mix(in srgb, var(--st-acc) 34%, transparent), transparent 72%),
    linear-gradient(rgba(125, 155, 255, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(125, 155, 255, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--band);
}
.stage[data-mode="tablet"],
.stage[data-mode="phone"] { --pad-t: 52px; --pad-r: 32px; --pad-b: 40px; --pad-l: 280px; }
.stage[data-mode="tablet"] { --pad-l: 260px; }
.stage__word {
  position: absolute;
  left: -0.03em;
  bottom: -0.17em;
  z-index: -1;
  font-family: var(--f-display);
  font-size: clamp(96px, 12vw, 176px);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(233, 238, 250, 0.05);
  pointer-events: none;
  user-select: none;
}

.dev {
  position: absolute;
  inset: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
  z-index: 1;
  width: 680px;
  height: 444px;
  margin: auto;
  transition: top .9s var(--ease-in-out), right .9s var(--ease-in-out), bottom .9s var(--ease-in-out), left .9s var(--ease-in-out);
}
.dev__body {
  position: absolute;
  top: 0;
  left: 0;
  width: 1040px;
  height: 680px;
  padding: 0;
  border-radius: 14px;
  background: #1A2442;
  box-shadow: 20px 20px 0 var(--st-acc), 0 60px 110px -40px rgba(0, 0, 0, 0.7);
  transform: scale(.654);
  transform-origin: 0 0;
  transition: padding .8s var(--ease-in-out), border-radius .8s var(--ease-in-out), background-color .5s;
}
.dev--tablet .dev__body { padding: 16px; border-radius: 42px; background: #0A0F1E; }
.dev--phone .dev__body { padding: 12px; border-radius: 56px; background: #0A0F1E; }
.dev__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 13px;
  background: #0B1329;
  transition: border-radius .8s var(--ease-in-out);
}
.dev--tablet .dev__inner { border-radius: 26px; }
.dev--phone .dev__inner { border-radius: 44px; }
.dev__notch { position: absolute; top: 11px; left: 50%; z-index: 4; width: 100px; height: 28px; margin-left: -50px; border-radius: 16px; background: #0A0F1E; opacity: 0; transition: opacity .4s; }
.dev--phone .dev__notch { opacity: 1; }
.dev__bar {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
  height: 48px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(233, 238, 250, 0.08);
  background: #121B35;
  transition: height .6s var(--ease-in-out), padding .6s var(--ease-in-out);
}
.dev--phone .dev__bar { height: 76px; padding: 36px 16px 8px; }
.dev__dots { display: flex; flex: none; gap: 8px; }
.dev__dots i { width: 13px; height: 13px; border-radius: 50%; background: #F26B5B; }
.dev__dots i:nth-child(2) { background: #F5BE4F; }
.dev__dots i:nth-child(3) { background: #5BC46B; }
.dev--tablet .dev__dots,
.dev--phone .dev__dots { display: none; }
.dev__url {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  max-width: 520px;
  height: 32px;
  margin: 0 auto;
  padding: 0 16px;
  border-radius: 9px;
  background: rgba(233, 238, 250, 0.08);
  font-family: var(--f-mono);
  font-size: 14px;
  color: #C9D3EE;
  white-space: nowrap;
}
.dev__url > span { overflow: hidden; text-overflow: ellipsis; }
.dev__url svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--st-acc); stroke-width: 2.2; stroke-linecap: round; }
.dev__url.is-pulse { animation: url-pulse .7s var(--ease-out); }
@keyframes url-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st-acc) 70%, transparent); }
  100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--st-acc) 0%, transparent); }
}
.dev__screen { --hero-h: 632px; position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #0B1329; container: ms / inline-size; }
.dev__wipe {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: var(--st-acc);
  color: var(--st-ink, #FFFFFF);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.dev__wipe i { font-family: var(--f-display); font-size: 150px; font-style: normal; font-weight: 900; font-stretch: 125%; line-height: 1; }

/* Cartes flottantes */
.fc {
  position: absolute;
  z-index: 4;
  margin: 0;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--amber);
}
.fc--search { left: 22px; bottom: 20px; width: 300px; rotate: -1.5deg; transition: bottom .9s var(--ease-in-out), width .9s var(--ease-in-out); }
.stage[data-mode="tablet"] .fc--search,
.stage[data-mode="phone"] .fc--search { bottom: calc(50% - 96px); width: 236px; }
.fc__label { margin-bottom: 10px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fc__site { display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1.25; }
.fc__site i { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--st-acc); color: var(--st-ink, #FFFFFF); font-family: var(--f-display); font-size: 10.5px; font-style: normal; font-weight: 800; }
.fc__site b,
.fc__site small { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc__site b { font-weight: 600; }
.fc__site small { font-size: 11.5px; color: var(--muted); }
.fc__title { margin-top: 9px; font-size: 16px; font-weight: 600; line-height: 1.25; color: #1A3FB0; }
.fc__desc { display: -webkit-box; margin-top: 4px; overflow: hidden; font-size: 12.5px; line-height: 1.45; color: var(--muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fc--lead { right: 22px; top: 66px; display: flex; align-items: center; gap: 12px; width: 290px; box-shadow: 6px 6px 0 var(--st-acc); opacity: 0; visibility: hidden; }
.fc__ic { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border-radius: 6px; background: var(--amber); color: var(--amber-ink); }
.fc__ic svg { width: 21px; height: 21px; }
.fc__lead { display: grid; gap: 2px; min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.fc__lead small { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ok); }
.fc__lead b { font-size: 15px; color: var(--ink); }

/* Indicateur de construction */
.build {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  height: 32px;
  margin: 0 auto;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(10, 16, 34, 0.88);
  box-shadow: inset 0 0 0 1px var(--band-line);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--band-muted);
  opacity: 0;
  visibility: hidden;
}
.build__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: build-blink .8s steps(2) infinite; }
.build.is-done .build__dot { background: #5BC46B; animation: none; }
@keyframes build-blink { 50% { opacity: .25; } }
.build__t { font-weight: 600; color: var(--band-ink); }
.build__s { display: inline-flex; align-items: center; gap: 6px; opacity: .4; transition: opacity .25s, color .25s; }
.build__s::before { content: ""; width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; }
.build__s.is-done { opacity: 1; color: var(--amber); }
.build__s.is-done::before { background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%232B1A00' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px no-repeat; box-shadow: none; }

/* Curseur de la visite guidée */
.ghost { position: absolute; top: 0; left: 0; z-index: 6; width: 26px; height: 26px; margin: -4px 0 0 -5px; opacity: 0; pointer-events: none; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.4)); }
.ghost svg { width: 100%; height: 100%; }
.ghost__ring { position: absolute; top: 0; left: 0; z-index: 5; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid var(--amber); border-radius: 50%; opacity: 0; pointer-events: none; }

/* ---------- Les sites d'exemple : un style par métier ----------
   Chaque site est dessiné à 1040 px de large (ou 760 / 384 px), puis mis à l'échelle.
   Plombier « Letters », menuisier « Notion », paysagiste « Seed », boulangerie « Slush »,
   restaurant « Air », coiffeur « Dala ». */
.ms { position: relative; min-height: 100%; font-family: var(--f-body); font-size: 16px; line-height: 1.5; transition: --ms-acc .6s var(--ease-out), --ms-acc-ink .6s var(--ease-out); }
.ms[hidden] { display: none !important; }
.mw { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .04em .18em; margin: -.08em -.04em -.18em; }
.mw > span { display: inline-block; }
.ms-caret { display: none; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: currentColor; animation: ms-caret 1s steps(1) infinite; }
[data-tour="msg"].is-focus .ms-caret { display: inline-block; }
@keyframes ms-caret { 50% { opacity: 0; } }
.dev[data-tone="light"] .dev__inner,
.dev[data-tone="light"] .dev__screen { background: #FFFFFF; }
.dev--desktop[data-tone="light"] .dev__body { background: #D5DCE7; }
.dev[data-tone="light"] .dev__bar { border-bottom-color: #E2E5EA; background: #F2F4F7; }
.dev[data-tone="light"] .dev__url { background: #FFFFFF; color: #3A4660; }

/* ===== Plombier · « Letters » ===== */
@property --lt-p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --lt-ba { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.ms--letters {
  --ms-acc: #2597D0;
  --lt-ink: #070709;
  --lt-char: #60606C;
  --lt-slate: #8B8B8B;
  --lt-line: #E6E6EA;
  --lt-shadow: 0 17px 37px rgba(16, 55, 132, 0.05), 0 67px 67px rgba(16, 55, 132, 0.04), 0 150px 90px rgba(16, 55, 132, 0.03);
  background: #FFFFFF;
  color: var(--lt-ink);
  letter-spacing: -0.01em;
}
.lt-nav { position: relative; z-index: 3; display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 32px; border-bottom: 1px solid var(--lt-line); background: #FFFFFF; }
.lt-logo { display: flex; align-items: center; gap: 9px; min-width: 0; margin-right: auto; font-size: 16px; font-weight: 600; white-space: nowrap; }
.lt-logo > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.lt-logo__ic { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--lt-ink); }
.lt-logo__ic svg { width: 17px; height: 17px; fill: none; stroke: var(--ms-acc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lt-links { display: flex; gap: 24px; font-size: 14px; font-weight: 500; }
.lt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 38px; padding: 0 18px; border: 1px solid transparent; border-radius: 100px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: transform .45s var(--ease-out), background-color .3s; }
.lt-btn i { font-style: normal; transition: transform .45s var(--ease-out); }
.lt-btn--ghost { border-color: #BEBECC; }
.lt-btn--dark { background: var(--lt-ink); color: #FFFFFF; box-shadow: 0 1px 2px rgba(36, 36, 40, 0.1), 0 3px 3px rgba(36, 36, 40, 0.09), 0 6px 4px rgba(36, 36, 40, 0.05), 0 11px 4px rgba(36, 36, 40, 0.01); }
.lt-btn--lg { height: 50px; padding: 0 26px; font-size: 16px; }
.lt-btn.is-hover { transform: translateY(-2px); }
.lt-btn.is-hover i { transform: translateX(4px); }
.lt-btn.is-press { transform: scale(.96); }
.lt-burger,
.nt-burger,
.sd-burger,
.dl-burger { display: none; align-content: center; justify-items: center; gap: 5px; width: 38px; height: 38px; border-radius: 100px; }
.lt-burger { box-shadow: inset 0 0 0 1px #BEBECC; }
.lt-burger i,
.nt-burger i,
.sd-burger i,
.dl-burger i { width: 15px; height: 1.5px; background: currentColor; }

.lt-hero { position: relative; padding: 64px 40px 0; overflow: hidden; text-align: center; }
.lt-sky { position: absolute; inset: 0 0 170px; overflow: hidden; background: linear-gradient(180deg, #779BC1 0%, #9ABFDA 58%, #CBDCEC 100%); }
.lt-sun { position: absolute; left: 72%; top: -36%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); animation: lt-sun 9s ease-in-out infinite alternate; }
@keyframes lt-sun { from { opacity: .7; scale: .9; } to { opacity: 1; scale: 1.08; } }
.lt-cloud { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); aspect-ratio: 3; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0)); translate: -50% -50%; animation: lt-cloud var(--d) ease-in-out infinite alternate; }
@keyframes lt-cloud { from { translate: -64% -50%; } to { translate: -36% -50%; } }
.lt-hero__in { position: relative; z-index: 1; display: grid; justify-items: center; }
.lt-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 100px; background: rgba(255, 255, 255, 0.86); font-size: 13px; font-weight: 500; box-shadow: 0 1px 1px rgba(23, 107, 197, 0.08), 0 3px 3px rgba(23, 107, 197, 0.07); }
.lt-pill svg,
.lt-tag svg { width: 16px; height: 16px; fill: none; stroke: var(--ms-acc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lt-title { margin-top: 22px; font-size: clamp(36px, 7.6cqw, 80px); font-weight: 600; line-height: .92; letter-spacing: -0.045em; color: #FFFFFF; }
.lt-sub { max-width: 30em; margin-top: 22px; font-size: 18px; line-height: 1.45; color: rgba(255, 255, 255, 0.92); }
.lt-hero .lt-btn--lg { margin-top: 28px; }
.lt-docs { position: relative; z-index: 2; width: min(660px, 92%); height: 330px; margin: 46px auto 0; }
.lt-doc { position: absolute; top: 0; width: 54%; }
.lt-doc--before { left: 0; top: 36px; rotate: -5deg; }
.lt-doc--after { right: 0; rotate: 3deg; }
.lt-doc__in { position: relative; padding: 22px 22px 24px; border-radius: 18px; background: #FFFFFF; text-align: left; box-shadow: var(--lt-shadow), 0 1px 2px rgba(36, 36, 40, 0.07), 0 0 0 1px #EEF0F4; animation: lt-float 6s ease-in-out infinite alternate; }
.lt-doc--after .lt-doc__in { animation-delay: -3s; }
@keyframes lt-float { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
.lt-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border: 1px solid var(--lt-ink); border-radius: 100px; font-size: 12.5px; font-weight: 500; }
.lt-tag--blue { border-color: var(--ms-acc); color: var(--ms-acc); }
.lt-hand { margin-top: 14px; font-family: "Fraunces", Georgia, serif; font-size: 19px; font-style: italic; font-weight: 500; line-height: 1.35; color: #1D3A8A; filter: url(#lt-wobble); }
.lt-hand--sign { margin-top: 10px; font-size: 22px; text-align: right; }
.lt-doc__h { margin-top: 14px; font-size: 15px; font-weight: 600; }
.lt-lines { display: grid; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--lt-char); }
.lt-lines li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--lt-line); }
.lt-lines b,
.lt-total b { font-weight: 600; color: var(--lt-ink); font-variant-numeric: tabular-nums; }
.lt-total { display: flex; justify-content: space-between; margin-top: 10px; font-size: 15px; font-weight: 600; }
.lt-when { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; color: var(--lt-char); }
.lt-when svg { width: 15px; height: 15px; color: var(--ms-acc); }
.lt-stamp { position: absolute; right: 18px; bottom: 20px; padding: 6px 12px; border: 2px solid var(--ms-acc); border-radius: 100px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ms-acc); rotate: -8deg; }

.lt-sec { padding: 72px 40px; }
.lt-h2 { max-width: 20ch; margin: 0 auto; font-size: clamp(28px, 4.2cqw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -0.04em; text-align: center; }
.lt-h2--left { margin: 0; text-align: left; }
.lt-chip { display: inline-block; padding: 0 .28em; border-radius: 100px; background: color-mix(in srgb, var(--ms-acc) 15%, #FFFFFF); color: var(--ms-acc); }
.lt-kick { margin-bottom: 10px; font-size: 14px; font-weight: 500; color: var(--ms-acc); text-align: center; }
.lt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.lt-card { position: relative; display: grid; align-content: start; gap: 12px; padding: 30px; border-radius: 24px; background: #FFFFFF; box-shadow: var(--lt-shadow), 0 0 0 1px #F0F0F3; transition: transform .55s var(--ease-out), box-shadow .55s; }
.lt-card.is-hover { transform: translateY(-6px); box-shadow: var(--lt-shadow), 0 0 0 1.5px color-mix(in srgb, var(--ms-acc) 55%, #FFFFFF); }
.lt-card .lt-tag { justify-self: start; }
.lt-card__h { font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.lt-card__p { font-size: 15px; color: var(--lt-char); }
.lt-card--wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; }
.lt-card--wide > div { display: grid; justify-items: start; gap: 12px; }
.lt-drop { position: relative; display: grid; justify-items: center; gap: 8px; min-height: 140px; margin-top: 6px; padding: 20px 16px 64px; overflow: hidden; border: 1px dashed #BEBECC; border-radius: 12px; font-size: 13px; color: var(--lt-char); text-align: center; }
.lt-drop__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--ms-acc) 12%, #FFFFFF); color: var(--ms-acc); }
.lt-drop__ic svg { width: 20px; height: 20px; }
.lt-drop__file { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 9px 12px 12px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 6px 16px rgba(16, 55, 132, 0.12), 0 0 0 1px #EEF0F4; color: var(--lt-ink); text-align: left; animation: lt-upload 6s var(--ease-out) infinite; }
.lt-drop__file > i { flex: none; width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, #9ABFDA, var(--ms-acc)); }
.lt-drop__file > span { flex: 1; font-size: 12.5px; }
.lt-drop__file b { font-size: 12.5px; font-weight: 600; color: var(--ms-acc); animation: lt-done 6s infinite; }
.lt-drop__file em { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; overflow: hidden; border-radius: 3px; background: #EEF0F4; }
.lt-drop__file em i { display: block; height: 100%; background: var(--ms-acc); transform-origin: 0 50%; animation: lt-prog 6s var(--ease-in-out) infinite; }
@keyframes lt-upload { 0% { transform: translateY(150%); opacity: 0; } 10%, 86% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes lt-prog { 0%, 12% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
@keyframes lt-done { 0%, 56% { opacity: 0; } 62%, 88% { opacity: 1; } 100% { opacity: 0; } }
.lt-wave { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 0 0 1px #EEF0F4, 0 6px 16px rgba(16, 55, 132, 0.06); }
.lt-wave__play { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ms-acc); }
.lt-wave__play i { width: 0; height: 0; margin-left: 3px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #FFFFFF; }
.lt-wave__bars { position: relative; flex: 1; height: 36px; }
.lt-wave__row { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.lt-wave__row i { flex: 1; height: calc(var(--h) * 100%); border-radius: 2px; background: #CFD9E6; animation: lt-eq 1.1s ease-in-out var(--dl) infinite alternate; }
.lt-wave__row--on { clip-path: inset(0 calc(100% - var(--lt-p)) 0 0); animation: lt-play 9s linear infinite; }
.lt-wave__row--on i { background: var(--ms-acc); }
@keyframes lt-eq { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes lt-play { from { --lt-p: 0%; } to { --lt-p: 100%; } }
.lt-wave__time { font-size: 12.5px; font-weight: 500; color: var(--lt-char); font-variant-numeric: tabular-nums; }
.lt-transcript { font-size: 13.5px; font-style: italic; color: var(--lt-char); }
.lt-check { display: grid; gap: 10px; }
.lt-check li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #F5F5F5; font-size: 14px; font-weight: 500; }
.lt-check li::before { content: ""; flex: none; width: 20px; height: 20px; border: 1.5px solid #BEBECC; border-radius: 50%; background: transparent center / 12px no-repeat; animation: lt-tick 8s infinite; }
.lt-check li:nth-child(2)::before { animation-delay: .7s; }
.lt-check li:nth-child(3)::before { animation-delay: 1.4s; }
.lt-check li:nth-child(4)::before { animation-delay: 2.1s; }
@keyframes lt-tick {
  0%, 8% { border-color: #BEBECC; background-color: transparent; background-image: none; }
  12%, 88% { border-color: var(--ms-acc); background-color: var(--ms-acc); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  92%, 100% { border-color: #BEBECC; background-color: transparent; background-image: none; }
}
.lt-sec--gray { background: #F5F5F5; }
.lt-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.lt-shot { margin: 0; padding: 10px 10px 16px; border-radius: 22px; background: #FFFFFF; box-shadow: var(--lt-shadow); transition: transform .55s var(--ease-out); }
.lt-shot.is-hover { transform: translateY(-6px); }
.lt-ba { position: relative; aspect-ratio: 160 / 104; overflow: hidden; border-radius: 14px; animation: lt-ba 7s var(--ease-in-out) infinite alternate; }
.lt-shot:nth-child(2) .lt-ba { animation-delay: -2.3s; }
.lt-shot:nth-child(3) .lt-ba { animation-delay: -4.6s; }
.lt-ba svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lt-ba__b { filter: grayscale(1) sepia(.45) brightness(.86) contrast(.9); }
.lt-ba__a { clip-path: inset(0 0 0 var(--lt-ba)); }
.lt-ba__h { position: absolute; top: 0; bottom: 0; left: var(--lt-ba); width: 2px; margin-left: -1px; background: #FFFFFF; }
.lt-ba__h::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); }
.lt-ba__l,
.lt-ba__r { position: absolute; top: 8px; padding: 3px 9px; border-radius: 100px; background: rgba(7, 7, 9, 0.62); color: #FFFFFF; font-size: 11px; font-weight: 600; }
.lt-ba__l { left: 8px; }
.lt-ba__r { right: 8px; background: var(--ms-acc); }
@keyframes lt-ba { from { --lt-ba: 74%; } to { --lt-ba: 24%; } }
.lt-shot figcaption { display: grid; gap: 2px; padding: 14px 6px 0; }
.lt-shot figcaption b { font-size: 16px; font-weight: 600; }
.lt-shot figcaption span { font-size: 13px; color: var(--lt-char); }
.lt-quote { padding-block: 64px; text-align: center; }
.lt-q { max-width: 26ch; margin: 0 auto; font-size: clamp(22px, 3cqw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; }
.lt-who { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--lt-char); }
.lt-who i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--ms-acc) 14%, #FFFFFF); color: var(--ms-acc); font-size: 12px; font-style: normal; font-weight: 700; }
.lt-contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 44px; }
.lt-contact > div:first-child { display: grid; gap: 12px; }
.lt-contact .lt-kick { margin: 0; text-align: left; }
.lt-form { display: grid; gap: 12px; padding: 28px; border-radius: 24px; background: #FFFFFF; box-shadow: var(--lt-shadow), 0 0 0 1px #F0F0F3; }
.lt-field { display: grid; gap: 4px; padding: 11px 14px; border: 1px solid #E4E5E7; border-radius: 12px; font-size: 15px; transition: border-color .3s, box-shadow .3s; }
.lt-field small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lt-slate); }
.lt-field--msg { align-content: start; min-height: 96px; }
.lt-field--msg.is-focus { border-color: var(--ms-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-acc) 22%, transparent); }
.lt-send { justify-self: start; height: 46px; }
.lt-send.is-sent { background: #1C7A4A; }
.lt-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 40px; border-top: 1px solid var(--lt-line); font-size: 13px; color: var(--lt-char); }
.lt-foot .lt-logo { margin: 0; color: var(--lt-ink); }

/* ===== Menuisier · « Notion » ===== */
.ms--notion { --ms-acc: #0075DE; --nt-graphite: #615D59; --nt-line: rgba(0, 0, 0, 0.08); background: #F6F5F4; color: rgba(0, 0, 0, 0.95); }
.nt-nav { position: relative; z-index: 3; display: flex; align-items: center; gap: 20px; height: 64px; padding: 0 32px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 .7px 1.5px rgba(0, 0, 0, 0.015), 0 3px 9px rgba(0, 0, 0, 0.03); }
.nt-logo { display: flex; align-items: center; gap: 9px; min-width: 0; margin-right: auto; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.nt-logo > span { overflow: hidden; text-overflow: ellipsis; }
.nt-logo i { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border: 2px solid #000000; border-radius: 7px; background: #FFFFFF; font-size: 11.5px; font-style: normal; font-weight: 800; box-shadow: 2px 2px 0 #000000; }
.nt-links { display: flex; gap: 2px; font-size: 14px; font-weight: 500; color: rgba(0, 0, 0, 0.54); }
.nt-links span { padding: 8px 10px; border-radius: 8px; }
.nt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: transform .2s ease, filter .2s; }
.nt-btn i { font-style: normal; transition: transform .2s ease; }
.nt-btn--blue { background: var(--ms-acc); color: var(--ms-acc-ink); }
.nt-btn--tint { background: color-mix(in srgb, var(--ms-acc) 10%, #FFFFFF); color: var(--ms-acc); }
.nt-btn--text { color: rgba(0, 0, 0, 0.9); }
.nt-btn--lg { height: 44px; padding: 0 20px; font-size: 15px; }
.nt-btn.is-hover { transform: translateY(-1px); filter: brightness(1.08); }
.nt-btn.is-hover i { transform: translateX(3px); }
.nt-btn.is-press { transform: scale(.96); }
.nt-burger { background: rgba(0, 0, 0, 0.05); border-radius: 8px; }
.nt-hero { position: relative; display: grid; justify-items: center; padding: 54px 40px 0; overflow: hidden; text-align: center; }
.nt-marks { display: flex; gap: 10px; }
.nt-mark { display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--c); border-radius: 50%; background: #FFFFFF; }
.nt-mark svg { width: 22px; height: 22px; fill: none; stroke: #000000; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; animation: nt-bounce 3s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.nt-mark:nth-child(2) svg { animation-delay: .15s; }
.nt-mark:nth-child(3) svg { animation-delay: .3s; }
.nt-mark:nth-child(4) svg { animation-delay: .45s; }
.nt-mark:nth-child(5) svg { animation-delay: .6s; }
@keyframes nt-bounce { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-6px) rotate(-10deg); } 80% { transform: translateY(0) rotate(0); } 88% { transform: translateY(-2px) rotate(4deg); } }
.nt-title { margin-top: 24px; font-size: clamp(36px, 7cqw, 72px); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; color: #000000; }
.ms--notion .mw--c > span { padding: 0 .26em; border-radius: 999px; background: #F6D5B8; }
.nt-sub { max-width: 34em; margin-top: 18px; font-family: "Fraunces", Georgia, serif; font-size: 19px; font-weight: 500; line-height: 1.5; color: var(--nt-graphite); }
.nt-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.nt-doodle { position: absolute; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nt-doodle--a { left: 7%; top: 150px; width: 110px; stroke: #F64932; }
.nt-doodle--b { right: 11%; top: 96px; width: 34px; stroke: #FFB110; animation: nt-spin 7s linear infinite; }
.nt-doodle--c { right: 8%; top: 236px; width: 74px; stroke: #097FE8; }
@keyframes nt-spin { to { rotate: 360deg; } }
.nt-app { position: relative; width: min(860px, 100%); margin-top: 44px; overflow: hidden; border-radius: 12px 12px 0 0; background: #FFFFFF; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--nt-line); text-align: left; }
.nt-app__bar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--nt-line); font-size: 13px; color: rgba(0, 0, 0, 0.6); }
.nt-dots { display: flex; gap: 6px; }
.nt-dots i { width: 10px; height: 10px; border-radius: 50%; background: #E3E2E0; }
.nt-crumb { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-share { padding: 4px 10px; border-radius: 6px; background: var(--ms-acc); color: var(--ms-acc-ink); font-size: 12px; font-weight: 500; }
.nt-app__body { padding: 22px 26px 26px; }
.nt-page { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.nt-views { display: flex; gap: 4px; margin: 14px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--nt-line); font-size: 13px; color: rgba(0, 0, 0, 0.5); }
.nt-views span { padding: 4px 8px; border-radius: 6px; }
.nt-views .is-on { background: rgba(0, 0, 0, 0.05); color: #000000; font-weight: 500; }
.nt-board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; }
.nt-col { display: grid; align-content: start; gap: 8px; min-height: 196px; padding: 8px; border-radius: 10px; background: #F7F6F5; }
.nt-col__h { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; font-size: 12px; color: rgba(0, 0, 0, 0.45); }
.nt-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.8); font-size: 12px; font-style: normal; font-weight: 500; white-space: nowrap; }
.nt-pill--gray { background: #E3E2E0; }
.nt-pill--yellow { background: #FDECC8; color: #8A5A00; }
.nt-pill--green { background: #DBEDDB; color: #1C6E3A; }
.nt-task { position: relative; display: grid; gap: 4px; padding: 9px 34px 10px 11px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--nt-line); font-size: 13px; }
.nt-task b { font-weight: 600; }
.nt-task span { font-size: 12px; color: rgba(0, 0, 0, 0.5); }
.nt-tag { justify-self: start; padding: 1px 7px; border-radius: 4px; background: #F1E6DC; color: #6B4A2B; font-size: 11px; font-style: normal; }
.nt-av { position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--c); border-radius: 50%; background: #FFFFFF; font-size: 10px; font-style: normal; font-weight: 700; }
.nt-cursor { position: absolute; z-index: 3; display: flex; align-items: flex-start; pointer-events: none; animation: nt-cur-a 9s ease-in-out infinite; }
.nt-cursor svg { width: 18px; height: 18px; fill: #F64932; stroke: #FFFFFF; stroke-width: 1.5; stroke-linejoin: round; }
.nt-cursor i { margin: 13px 0 0 -2px; padding: 2px 7px; border-radius: 5px; background: #F64932; color: #FFFFFF; font-size: 11px; font-style: normal; font-weight: 600; }
.nt-cursor--b { animation-name: nt-cur-b; animation-duration: 11s; }
.nt-cursor--b svg { fill: #097FE8; }
.nt-cursor--b i { background: #097FE8; }
@keyframes nt-cur-a { 0%, 100% { left: 18%; top: 34%; } 30% { left: 52%; top: 66%; } 55% { left: 72%; top: 22%; } 80% { left: 30%; top: 74%; } }
@keyframes nt-cur-b { 0%, 100% { left: 80%; top: 72%; } 25% { left: 40%; top: 16%; } 60% { left: 10%; top: 58%; } 85% { left: 62%; top: 40%; } }
.nt-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 44px; padding: 46px 40px 6px; color: rgba(0, 0, 0, 0.4); }
.nt-l1 { font-family: var(--f-display); font-size: 19px; font-weight: 900; font-stretch: 125%; letter-spacing: .04em; }
.nt-l2 { font-family: "Fraunces", Georgia, serif; font-size: 24px; font-style: italic; font-weight: 600; }
.nt-l3 { font-family: var(--f-mono); font-size: 16px; font-weight: 600; letter-spacing: .22em; }
.nt-l4 { font-family: "Space Grotesk", sans-serif; font-size: 23px; font-weight: 700; letter-spacing: -0.04em; }
.nt-l5 { font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 700; }
.nt-l6 { font-family: var(--f-display); font-size: 24px; font-weight: 800; font-stretch: 70%; letter-spacing: .06em; }
.nt-sec { padding: 72px 40px; }
.nt-sec--white { background: #FFFFFF; }
.nt-h2 { font-size: clamp(30px, 5cqw, 54px); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; text-align: center; color: #000000; }
.nt-h2--left { text-align: left; }
.nt-serif { max-width: 36em; margin: 14px auto 0; font-family: "Fraunces", Georgia, serif; font-size: 18px; font-weight: 500; line-height: 1.55; color: var(--nt-graphite); text-align: center; }
.nt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.nt-card { position: relative; display: grid; align-content: start; gap: 8px; padding: 24px; overflow: hidden; border-radius: 12px; transition: transform .25s ease; }
.nt-card--wide { grid-column: 1 / -1; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 28px; }
.nt-card--white { background: #FFFFFF; box-shadow: 0 0 0 1px var(--nt-line); }
.nt-card--yellow { background: #FFB110; }
.nt-card--sky { background: #62AEF0; }
.nt-card--dark { background: #02093A; color: #FFFFFF; }
.nt-card__h { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.nt-card__p { font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, 0.66); }
.nt-card--dark .nt-card__p { color: rgba(255, 255, 255, 0.7); }
.nt-more { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--ms-acc); }
.nt-shotframe { margin-top: 10px; overflow: hidden; border-radius: 8px; background: #FFFFFF; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.nt-shotframe svg { display: block; width: 100%; height: auto; }
.nt-card--wide .nt-shotframe { justify-self: end; width: 100%; max-width: 360px; }
.nt-card.is-hover { transform: translateY(-4px) rotate(-.6deg); }
.nt-card.is-hover .nt-shotframe { transform: scale(1.04) rotate(1.2deg); }
.nt-ruler { position: relative; height: 96px; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.nt-ruler__track { position: absolute; top: 0; bottom: 0; left: 0; right: -60px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.75) 0 1.5px, transparent 1.5px 12px) 0 0 / 12px 30% repeat-x, repeating-linear-gradient(90deg, #FFB110 0 2px, transparent 2px 60px) 0 0 / 60px 55% repeat-x; animation: nt-ruler 3s linear infinite; }
@keyframes nt-ruler { to { transform: translateX(-60px); } }
.nt-ruler__v { position: absolute; right: 16px; bottom: 12px; font-family: var(--f-mono); font-size: 22px; font-weight: 600; color: #FFB110; }
.nt-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.nt-shot { margin: 0; overflow: hidden; border-radius: 12px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--nt-line); transition: transform .25s ease, box-shadow .25s; }
.nt-shot__cover { overflow: hidden; }
.nt-shot__cover svg { display: block; width: 100%; height: auto; transition: transform .8s var(--ease-out); }
.nt-shot figcaption { display: grid; gap: 8px; padding: 12px 14px 14px; }
.nt-shot figcaption b { font-size: 15px; font-weight: 600; }
.nt-shot figcaption span { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-shot.is-hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--nt-line), 0 12px 24px rgba(0, 0, 0, 0.08); }
.nt-shot.is-hover .nt-shot__cover svg { transform: scale(1.06); }
.nt-quote { display: grid; justify-items: center; gap: 16px; text-align: center; }
.nt-mark--lg { width: 56px; height: 56px; }
.nt-q { max-width: 28ch; font-family: "Fraunces", Georgia, serif; font-size: clamp(22px, 3.2cqw, 32px); font-weight: 500; line-height: 1.3; }
.nt-who { font-size: 14px; color: var(--nt-graphite); }
.nt-contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 40px; }
.nt-contact .nt-serif { margin: 12px 0 0; text-align: left; }
.nt-form { display: grid; gap: 10px; padding: 24px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--nt-line); }
.nt-field { display: grid; gap: 3px; padding: 9px 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.03); box-shadow: inset 0 0 0 1px var(--nt-line); font-size: 15px; transition: box-shadow .2s, background-color .2s; }
.nt-field small { font-size: 12px; color: rgba(0, 0, 0, 0.45); }
.nt-field--msg { align-content: start; min-height: 92px; }
.nt-field--msg.is-focus { background: #FFFFFF; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ms-acc) 55%, transparent); }
.nt-send { justify-self: start; }
.nt-send.is-sent { background: #1C6E3A; color: #FFFFFF; }
.nt-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 40px; border-top: 1px solid var(--nt-line); font-size: 13px; color: rgba(0, 0, 0, 0.5); }
.nt-foot .nt-logo { margin: 0; color: #000000; }

/* ===== Paysagiste · « Seed » ===== */
.ms--seed { --ms-acc: #D3FA99; --sd-forest: #1C3A13; --sd-snow: #FCFCF7; --sd-stone: #EEEEE9; --sd-pewter: #666666; background: var(--sd-snow); color: var(--sd-forest); font-family: var(--f-display); font-stretch: 100%; font-weight: 400; }
.sd-promo { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; overflow: hidden; border-bottom: 1px solid rgba(28, 58, 19, 0.08); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.sd-promo svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sd-promo u { text-underline-offset: 3px; }
.sd-nav { display: flex; align-items: center; gap: 24px; height: 70px; padding: 0 36px; }
.sd-logo { display: flex; align-items: center; gap: 6px; min-width: 0; margin-right: auto; font-size: 20px; letter-spacing: -0.02em; white-space: nowrap; }
.sd-logo > span { overflow: hidden; text-overflow: ellipsis; }
.sd-logo i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3F8F2A; }
.sd-links { display: flex; gap: 22px; font-size: 15px; }
.sd-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border-radius: 1000px; font-size: 15px; white-space: nowrap; transition: background-color .3s, color .3s, transform .45s var(--ease-out); }
.sd-btn--dark { background: var(--sd-forest); color: var(--sd-snow); }
.sd-btn--line { box-shadow: inset 0 0 0 1.5px var(--sd-forest); }
.sd-btn--light { background: var(--sd-snow); color: var(--sd-forest); }
.sd-btn--lg { height: 52px; padding: 0 26px; font-size: 16px; }
.sd-btn.is-hover { transform: translateY(-2px); }
.sd-btn.is-press { transform: scale(.96); }
.sd-burger { box-shadow: inset 0 0 0 1.5px var(--sd-forest); border-radius: 1000px; }
.sd-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 40px; padding: 26px 36px 64px; }
.sd-code { display: inline-block; justify-self: start; padding: 5px 10px; border-radius: 1000px; box-shadow: inset 0 0 0 1.5px currentColor; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.sd-code--light { color: var(--sd-snow); }
.sd-title { margin-top: 20px; font-size: clamp(34px, 5.4cqw, 56px); font-weight: 300; line-height: 1.06; letter-spacing: -0.02em; }
.sd-sub { max-width: 30em; margin-top: 18px; font-size: 17px; line-height: 1.5; color: #3E5236; }
.sd-sub--light { color: rgba(252, 252, 247, 0.78); }
.sd-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; }
.sd-link { padding: 6px 2px; font-size: 15px; box-shadow: inset 0 -1.5px 0 currentColor; }
.sd-visual { position: relative; aspect-ratio: 1 / 1.02; overflow: hidden; border-radius: 32px; background: var(--sd-stone); }
.sd-plant { position: absolute; left: 4%; right: 4%; top: 4%; bottom: 0; width: 92%; height: 96%; }
.sd-br { fill: none; stroke: var(--sd-forest); stroke-linecap: round; }
.sd-fruit { fill: var(--ms-acc); stroke: var(--sd-forest); stroke-width: 1; }
.sd-sway { transform-box: view-box; transform-origin: 200px 460px; animation: sd-sway 7s ease-in-out infinite alternate; }
@keyframes sd-sway { from { rotate: -1.5deg; } to { rotate: 2deg; } }
.sd-glass { position: absolute; left: 6%; bottom: 6%; width: 52%; padding: 16px 18px; border-radius: 16px; background: rgba(196, 199, 196, 0.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sd-badge { display: inline-block; padding: 4px 9px; border-radius: 1000px; background: var(--ms-acc); color: var(--sd-forest); font-size: 11px; font-weight: 500; }
.sd-glass__code { margin-top: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; }
.sd-glass__name { font-size: 22px; font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; }
.sd-glass dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 10px 0 0; font-family: var(--f-mono); font-size: 11px; }
.sd-glass dt { opacity: .6; }
.sd-glass dd { margin: 0; }
.sd-dark { padding: 72px 36px; background: var(--sd-forest); color: var(--sd-snow); }
.sd-dark__head { display: grid; justify-items: start; gap: 16px; margin-bottom: 36px; }
.sd-h2 { font-size: clamp(30px, 4.4cqw, 48px); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; }
.sd-h2--ink { color: var(--sd-forest); }
.sd-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sd-prod { position: relative; display: grid; align-content: start; gap: 8px; padding: 14px 14px 18px; border-radius: 16px; transition: background-color .4s, transform .5s var(--ease-out); }
.sd-prod.is-hover { background: rgba(252, 252, 247, 0.07); transform: translateY(-4px); }
.sd-pill { justify-self: start; padding: 4px 9px; border-radius: 1000px; box-shadow: inset 0 0 0 1.5px currentColor; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; }
.sd-pill--ink { color: var(--sd-forest); }
.sd-prod .sd-badge { position: absolute; top: 14px; right: 14px; }
.sd-prod__img { aspect-ratio: 1; margin: 4px 0; }
.sd-prod__img svg { width: 100%; height: 100%; }
.sd-leaf,
.sd-tree { transform-box: fill-box; transform-origin: 50% 100%; animation: sd-leaf 4s ease-in-out infinite alternate; }
.sd-leaf--r { animation-delay: -2s; }
@keyframes sd-leaf { from { rotate: -5deg; } to { rotate: 6deg; } }
.sd-prod.is-hover .sd-leaf { animation-duration: .9s; }
.sd-prod__name { font-size: 22px; font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; }
.sd-prod__price { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.sd-prod .sd-btn { justify-self: start; height: 36px; margin-top: 8px; padding: 0 16px; font-size: 14px; }
.sd-sci { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 40px; padding: 80px 36px; }
.sd-sci > div { display: grid; justify-items: start; }
.sd-sci .sd-h2 { margin-top: 16px; }
.sd-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(28, 58, 19, 0.15); }
.sd-specs b { display: block; font-size: 30px; font-weight: 300; letter-spacing: -0.02em; }
.sd-specs span { font-family: var(--f-mono); font-size: 11px; color: var(--sd-pewter); }
.sd-roots { width: 100%; height: auto; }
.sd-rt { fill: none; stroke: var(--sd-forest); stroke-linecap: round; }
.sd-node { fill: var(--ms-acc); stroke: var(--sd-forest); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: sd-node 2.6s ease-in-out infinite; }
@keyframes sd-node { 0%, 100% { scale: .7; } 50% { scale: 1.3; } }
.sd-gallery-sec { padding: 72px 36px; background: var(--sd-stone); }
.sd-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.sd-shot { margin: 0; }
.sd-shot__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; }
.sd-shot__img svg { display: block; width: 100%; height: 100%; transition: transform 1s var(--ease-out); }
.sd-shot.is-hover .sd-shot__img svg { transform: scale(1.06); }
.sd-shot figcaption { display: grid; justify-items: start; gap: 6px; padding-top: 14px; }
.sd-shot figcaption b { font-size: 22px; font-weight: 300; letter-spacing: -0.02em; }
.sd-shot figcaption > span:last-child { font-family: var(--f-mono); font-size: 11px; color: var(--sd-pewter); }
.sd-quote { padding: 80px 36px; text-align: center; }
.sd-q { max-width: 24ch; margin: 0 auto; font-size: clamp(24px, 3.6cqw, 40px); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; }
.sd-who { margin-top: 16px; font-family: var(--f-mono); font-size: 12px; color: var(--sd-pewter); }
.sd-contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 40px; }
.sd-contact > div:first-child { display: grid; justify-items: start; gap: 14px; }
.sd-form { display: grid; gap: 12px; }
.sd-field { display: grid; gap: 4px; padding: 12px 16px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(252, 252, 247, 0.85); font-size: 15px; transition: box-shadow .3s; }
.sd-field small { font-family: var(--f-mono); font-size: 11px; opacity: .7; }
.sd-field--msg { align-content: start; min-height: 96px; }
.sd-field--msg.is-focus { box-shadow: inset 0 0 0 2px var(--ms-acc); }
.sd-send { justify-self: start; }
.sd-send.is-sent { background: var(--ms-acc); }
.sd-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 36px; font-size: 13px; color: var(--sd-pewter); }
.sd-foot .sd-logo { margin: 0; color: var(--sd-forest); font-size: 17px; }

/* ===== Boulangerie · « Slush » ===== */
.ms--slush { --ms-acc: #4DA2FF; background: #DCEEFF; color: #000000; }
.sl-marq { height: 34px; overflow: hidden; background: #000000; color: #FFFFFF; }
.sl-marq p { display: flex; align-items: center; width: max-content; height: 100%; animation: sl-marq 24s linear infinite; }
.sl-marq span { padding: 0 22px; font-size: 12px; font-weight: 700; letter-spacing: .032em; text-transform: uppercase; white-space: nowrap; }
@keyframes sl-marq { to { transform: translateX(-50%); } }
.sl-nav { position: relative; z-index: 4; display: flex; align-items: center; gap: 6px; height: 72px; padding: 0 22px; }
.sl-logo { display: grid; flex: none; place-items: center; width: 46px; height: 46px; margin-right: auto; border: 1.5px solid #000000; border-radius: 50%; background: #FFFFFF; font-family: var(--f-display); font-size: 15px; font-weight: 900; }
.sl-links { display: flex; gap: 4px; margin-right: auto; }
.sl-links span,
.sl-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 1.5px solid #000000; border-radius: 1600px; background: #FFFFFF; font-size: 12.5px; font-weight: 700; letter-spacing: .032em; text-transform: uppercase; white-space: nowrap; }
.sl-btn { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.sl-btn--dark { background: #000000; color: #FFFFFF; }
.sl-btn--lg { height: 52px; padding: 0 26px; font-size: 14px; }
.sl-btn.is-hover { transform: rotate(-3deg) scale(1.05); }
.sl-btn.is-press { transform: scale(.94); }
.sl-plus { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border: 1.5px solid #000000; border-radius: 50%; background: #FFFFFF; font-size: 22px; font-weight: 700; line-height: 1; }
.sl-hero { position: relative; display: grid; align-content: start; justify-items: center; min-height: calc(var(--hero-h) - 106px); padding: 34px 30px 48px; overflow: hidden; text-align: center; }
.sl-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-ribbon__g { transform-box: view-box; transform-origin: 50% 50%; animation: sl-breathe 7s ease-in-out infinite alternate; }
@keyframes sl-breathe { from { scale: 1; translate: 0 0; } to { scale: 1.04; translate: 0 -10px; } }
.sl-rb { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sl-rb--shade { stroke: color-mix(in srgb, var(--ms-acc) 68%, #000000); stroke-width: 84; translate: 0 10px; }
.sl-rb--main { stroke: var(--ms-acc); stroke-width: 74; }
.sl-rb--light { stroke: color-mix(in srgb, var(--ms-acc) 30%, #FFFFFF); stroke-width: 16; translate: -6px -17px; opacity: .85; }
.sl-display { position: relative; z-index: 1; font-family: var(--f-display); font-size: 19cqw; font-weight: 900; font-stretch: 88%; line-height: .78; letter-spacing: -0.01em; text-transform: uppercase; }
.sl-display--md { font-size: 11cqw; text-align: center; }
.sl-left { max-width: 62%; text-align: left; }
.sl-stickers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sl-st { --k: 1; position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--s) * var(--k) * 1cqw); height: calc(var(--s) * var(--k) * 1cqw); margin: calc(var(--s) * var(--k) * -.5cqw) 0 0 calc(var(--s) * var(--k) * -.5cqw); }
.sl-st__in { display: block; width: 100%; height: 100%; overflow: visible; animation: sl-bob 3.4s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes sl-bob { from { transform: translateY(-5%) rotate(calc(var(--r) * 1deg - 4deg)); } to { transform: translateY(5%) rotate(calc(var(--r) * 1deg + 4deg)); } }
.sl-tag { position: relative; z-index: 3; max-width: 26em; margin-top: 30px; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.sl-ctas { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.sl-sec { position: relative; padding: 72px 30px; overflow: hidden; }
.sl-sec--white { background: #FFFFFF; }
.sl-sec--gray { background: #CCCCCC; }
.sl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.sl-card { display: grid; justify-items: start; gap: 8px; padding: 24px; border: 1.5px solid #000000; border-radius: 30px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.sl-card--lav { background: #E9CCFF; }
.sl-card--mint { background: #55DB9C; }
.sl-card--sky { background: #DCEEFF; }
.sl-card__st { width: 110px; height: 110px; margin: -4px 0 6px -6px; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.sl-card__h { font-family: var(--f-display); font-size: clamp(26px, 3.2cqw, 34px); font-weight: 900; font-stretch: 88%; line-height: .85; text-transform: uppercase; }
.sl-card p:not(.sl-card__h) { font-size: 15px; font-weight: 500; }
.sl-card .sl-btn { margin-top: 10px; }
.sl-card.is-hover { transform: rotate(-2deg) translateY(-6px); }
.sl-card.is-hover .sl-card__st { transform: rotate(12deg) scale(1.12); }
.sl-badge { position: absolute; top: 60px; right: 7%; width: 150px; height: 150px; }
.sl-badge__txt { transform-box: view-box; transform-origin: 100px 100px; animation: sl-spin 14s linear infinite; }
@keyframes sl-spin { to { rotate: 360deg; } }
.sl-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.sl-shot { margin: 0; padding: 10px; border: 1.5px solid #000000; border-radius: 20px; background: #FFFFFF; transform: rotate(-2deg); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.sl-shot:nth-child(2) { transform: rotate(1.5deg); }
.sl-shot:nth-child(3) { transform: rotate(-1deg); }
.sl-shot.is-hover { transform: rotate(0deg) scale(1.04); }
.sl-shot__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1.5px solid #000000; border-radius: 14px; }
.sl-shot--sky .sl-shot__img { background: #4DA2FF; }
.sl-shot--lav .sl-shot__img { background: #5C4ADE; }
.sl-shot--mint .sl-shot__img { background: #55DB9C; }
.sl-shot__a { position: absolute; left: 12%; top: 10%; width: 62%; height: 78%; --r: -6; animation: sl-bob 3s ease-in-out infinite alternate; }
.sl-shot__b { position: absolute; right: 6%; bottom: 6%; width: 36%; height: 46%; --r: 12; animation: sl-bob 2.6s ease-in-out -1s infinite alternate; }
.sl-shot figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 6px 4px; font-size: 15px; font-weight: 700; }
.sl-shot figcaption span { font-size: 13px; font-weight: 500; }
.sl-qr { display: inline-flex; align-items: center; margin-top: 30px; overflow: hidden; border: 1.5px solid #000000; border-radius: 20px; background: #5C4ADE; }
.sl-qr__code { position: relative; width: 120px; height: 120px; padding: 10px; border-right: 1.5px solid #000000; background: #FFFFFF; }
.sl-qr__code svg { width: 100%; height: 100%; }
.sl-qr__code i { position: absolute; left: 8px; right: 8px; top: 10px; height: 3px; border-radius: 3px; background: var(--ms-acc); box-shadow: 0 0 12px var(--ms-acc); animation: sl-scan 2.4s ease-in-out infinite alternate; }
@keyframes sl-scan { from { top: 10px; } to { top: 106px; } }
.sl-qr p { padding: 0 26px; color: #FFFFFF; font-family: var(--f-display); font-size: 30px; font-weight: 900; font-stretch: 88%; line-height: .9; text-transform: uppercase; }
.sl-contact { background: #DCEEFF; }
.sl-form { display: grid; gap: 12px; max-width: 560px; margin: 0 auto; padding: 32px; border: 1.5px solid #000000; border-radius: 40px; background: #FFFFFF; }
.sl-form > p:not(.sl-form__h) { font-size: 15px; font-weight: 500; }
.sl-form__h { font-family: var(--f-display); font-size: 48px; font-weight: 900; font-stretch: 88%; line-height: .85; text-transform: uppercase; }
.sl-field { display: grid; gap: 2px; padding: 12px 20px; border: 1.5px solid #000000; border-radius: 22px; font-size: 15px; font-weight: 500; transition: background-color .25s, box-shadow .25s; }
.sl-field small { font-size: 11px; font-weight: 700; letter-spacing: .032em; text-transform: uppercase; }
.sl-field--msg { align-content: start; min-height: 98px; }
.sl-field--msg.is-focus { background: #FFFBE0; box-shadow: 0 0 0 3px var(--ms-acc); }
.sl-send { justify-self: start; }
.sl-send.is-sent { background: #55DB9C; color: #000000; }
.sl-foot { padding-top: 40px; overflow: hidden; background: #FFFFFF; }
.sl-big { width: max-content; overflow: hidden; padding: 0 12px; font-family: var(--f-display); font-size: 120px; font-weight: 900; font-stretch: 88%; line-height: .8; text-transform: uppercase; white-space: nowrap; }
.sl-big .ch { display: inline-block; }
.sl-foot__row { display: flex; justify-content: space-between; gap: 16px; padding: 18px 24px 22px; font-size: 13px; font-weight: 500; }

/* ===== Restaurant · « Air » ===== */
.ms--air {
  --ms-acc: #F2A93B;
  --ms-canvas: #0B1329;
  --ms-haze: #ECEFF5;
  --ms-ink: #0E1832;
  --ms-twilight: #7D9BFF;
  --ms-soft: rgba(233, 238, 250, 0.72);
  --ms-line: rgba(233, 238, 250, 0.13);
  --ms-ink-muted: #56627F;
  background: var(--ms-canvas);
  color: #FFFFFF;
  font-weight: 500;
}
.ms--air .mw--c > span { padding-right: .06em; font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--ms-acc); }

/* ===== Coiffeur · « Dala » ===== */
.ms--dala { --ms-acc: #8052FF; background: #000000; color: #FFFFFF; font-family: var(--f-display); font-stretch: 100%; font-weight: 400; }
.dl-nav { position: relative; z-index: 3; display: flex; align-items: center; gap: 28px; height: 72px; padding: 0 36px; }
.dl-logo { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; font-size: 17px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.dl-logo > span { overflow: hidden; text-overflow: ellipsis; }
.dl-tri { flex: none; width: 22px; height: 20px; background: linear-gradient(135deg, var(--ms-acc), #15846E); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.dl-links { display: flex; gap: 24px; font-size: 13px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; color: #9A9A9A; }
.dl-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 24px; background: var(--ms-acc); color: var(--ms-acc-ink); font-size: 13px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; white-space: nowrap; transition: transform .45s var(--ease-out), box-shadow .45s; }
.dl-btn--lg { height: 50px; padding: 0 24px; font-size: 14px; }
.dl-btn.is-hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--ms-acc); }
.dl-btn.is-press { transform: scale(.96); }
.dl-burger { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.dl-hero { position: relative; display: grid; align-content: center; min-height: calc(var(--hero-h) - 72px); padding: 20px 36px 60px; overflow: hidden; }
.dl-canvas { position: absolute; top: 0; right: 0; width: 62%; height: 100%; }
.dl-hero__txt { position: relative; z-index: 1; max-width: 560px; }
.dl-label { font-size: 13px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; color: #FFB829; }
.dl-title { margin-top: 18px; font-size: clamp(40px, 8.4cqw, 92px); font-weight: 400; line-height: .98; letter-spacing: -0.045em; }
.dl-body { max-width: 30em; margin-top: 22px; font-size: 18px; font-weight: 200; line-height: 1.5; }
.dl-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 30px; }
.dl-ghost { font-size: 14px; color: #9A9A9A; }
.dl-sec { padding: 90px 36px; }
.dl-zig { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 50px; }
.dl-art { aspect-ratio: 1; }
.dl-art svg,
.dl-shot__img svg { width: 100%; height: 100%; overflow: visible; }
.dl-tris { fill: none; stroke-width: 1.2; transform-box: view-box; transform-origin: 0 0; animation: dl-rot 70s linear infinite; } /* le centre du viewBox (-100 -100 200 200) */
.dl-tris polygon:nth-child(5n) { animation: dl-tw 2.2s ease-in-out infinite alternate; }
.dl-tris polygon:nth-child(7n) { animation: dl-tw 3s ease-in-out -1s infinite alternate; }
[data-dl-art="wave"] .dl-tris { animation: dl-wave 7s ease-in-out infinite alternate; }
@keyframes dl-rot { to { rotate: 360deg; } }
@keyframes dl-wave { from { rotate: -6deg; translate: -6px 4px; } to { rotate: 6deg; translate: 6px -4px; } }
@keyframes dl-tw { from { opacity: .15; } to { opacity: 1; } }
.dl-h2 { margin-top: 14px; font-size: clamp(32px, 5.4cqw, 60px); font-weight: 400; line-height: 1.02; letter-spacing: -0.04em; }
.dl-h2--xl { font-size: clamp(40px, 7.6cqw, 84px); }
.dl-list { margin-top: 30px; }
.dl-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px; padding: 18px 0; transition: transform .5s var(--ease-out); }
.dl-row span { font-size: 12px; font-weight: 600; color: #FFB829; }
.dl-row b { font-size: 30px; font-weight: 400; letter-spacing: -0.03em; transition: color .35s; }
.dl-row em { font-size: 14px; font-style: normal; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; color: #9A9A9A; }
.dl-row p { grid-column: 2 / -1; font-size: 16px; font-weight: 200; color: #BDBDBD; }
.dl-row.is-hover { transform: translateX(10px); }
.dl-row.is-hover b { color: var(--ms-acc); }
.dl-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.dl-shot { margin: 0; }
.dl-shot__img { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 24px; background: #0B0B10; transition: transform .7s var(--ease-out); }
.dl-shot figcaption { display: grid; gap: 4px; padding-top: 16px; }
.dl-shot figcaption span { font-size: 12px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; color: var(--ms-acc); }
.dl-shot figcaption b { font-size: 26px; font-weight: 400; letter-spacing: -0.03em; }
.dl-shot.is-hover .dl-shot__img { transform: scale(1.03); }
.dl-q { max-width: 22ch; font-size: clamp(28px, 4.2cqw, 46px); font-weight: 400; line-height: 1.12; letter-spacing: -0.035em; }
.dl-q em { font-style: normal; color: #FFB829; }
.dl-who { margin-top: 20px; font-size: 14px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; color: #9A9A9A; }
.dl-contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 40px; }
.dl-form { display: grid; gap: 12px; }
.dl-field { display: grid; gap: 4px; padding: 13px 18px; border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); font-size: 15px; font-weight: 300; transition: box-shadow .3s; }
.dl-field small { font-size: 11px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; color: #9A9A9A; }
.dl-field--msg { align-content: start; min-height: 100px; }
.dl-field--msg.is-focus { box-shadow: inset 0 0 0 1.5px var(--ms-acc); }
.dl-send { justify-self: start; }
.dl-send.is-sent { background: #15846E; color: #FFFFFF; }
.dl-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 30px 36px; font-size: 13px; color: #9A9A9A; }
.dl-foot .dl-logo { margin: 0; color: #FFFFFF; }

/* ===== Tablette ===== */
@container ms (max-width: 820px) {
  .ms--letters .lt-links,
  .ms--letters .lt-nav .lt-btn--ghost,
  .ms--notion .nt-links,
  .ms--notion .nt-nav .nt-btn--text,
  .ms--seed .sd-links,
  .ms--seed .sd-nav .sd-btn--line,
  .ms--slush .sl-links,
  .ms--dala .dl-links { display: none; }
  .ms--letters .lt-cards,
  .ms--letters .lt-card--wide { grid-template-columns: minmax(0, 1fr); }
  .ms--letters .lt-shots,
  .ms--notion .nt-gallery,
  .ms--seed .sd-gallery,
  .ms--slush .sl-shots,
  .ms--dala .dl-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms--letters .lt-shot:last-child,
  .ms--notion .nt-shot:last-child,
  .ms--seed .sd-shot:last-child,
  .ms--slush .sl-shot:last-child,
  .ms--slush .sl-card:last-child,
  .ms--dala .dl-shot:last-child { display: none; }
  .ms--letters .lt-contact,
  .ms--notion .nt-contact,
  .ms--seed .sd-contact,
  .ms--seed .sd-hero,
  .ms--seed .sd-sci,
  .ms--dala .dl-zig,
  .ms--dala .dl-contact { grid-template-columns: minmax(0, 1fr); }
  .ms--notion .nt-doodle--a,
  .ms--notion .nt-doodle--c { display: none; }
  .ms--seed .sd-visual { aspect-ratio: 16 / 12; }
  .ms--seed .sd-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms--slush .sl-display { font-size: 22cqw; }
  .ms--slush .sl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms--slush .sl-badge { width: 110px; height: 110px; }
  .ms--slush .sl-st { --k: 1.3; }
  .ms--dala .dl-canvas { width: 100%; opacity: .55; }
  .ms--dala .dl-art { max-width: 320px; }
}

/* ===== Téléphone ===== */
@container ms (max-width: 520px) {
  .ms--letters .lt-nav,
  .ms--notion .nt-nav { gap: 10px; height: 58px; padding: 0 16px; }
  .ms--letters .lt-nav .lt-btn--dark,
  .ms--notion .nt-nav .nt-btn--blue,
  .ms--seed .sd-nav .sd-btn--dark,
  .ms--dala .dl-nav .dl-btn { display: none; }
  .ms--letters .lt-burger,
  .ms--notion .nt-burger,
  .ms--seed .sd-burger,
  .ms--dala .dl-burger { display: grid; }
  .ms--letters .lt-hero { padding: 40px 18px 0; }
  .ms--letters .lt-sub,
  .ms--notion .nt-sub { font-size: 15.5px; }
  .ms--letters .lt-btn--lg { height: 46px; padding: 0 20px; font-size: 14.5px; }
  .ms--letters .lt-docs { width: 100%; height: 380px; margin-top: 34px; }
  .ms--letters .lt-doc { width: 82%; }
  .ms--letters .lt-doc--before { top: 0; }
  .ms--letters .lt-doc--after { top: 118px; }
  .ms--letters .lt-sky { bottom: 230px; }
  .ms--letters .lt-sec,
  .ms--notion .nt-sec { padding: 52px 18px; }
  .ms--letters .lt-card { padding: 22px; }
  .ms--letters .lt-shots,
  .ms--notion .nt-gallery,
  .ms--notion .nt-grid,
  .ms--seed .sd-gallery,
  .ms--slush .sl-cards,
  .ms--slush .sl-shots,
  .ms--dala .dl-gallery { grid-template-columns: minmax(0, 1fr); }
  .ms--notion .nt-card--wide { grid-template-columns: minmax(0, 1fr); }
  .ms--letters .lt-shot:last-child,
  .ms--notion .nt-shot:last-child,
  .ms--seed .sd-shot:last-child,
  .ms--slush .sl-shot:last-child,
  .ms--dala .dl-shot:last-child { display: block; }
  .ms--slush .sl-card:last-child { display: grid; }
  .ms--letters .lt-foot,
  .ms--notion .nt-foot,
  .ms--seed .sd-foot,
  .ms--dala .dl-foot { flex-direction: column; align-items: flex-start; padding: 22px 18px; }
  .ms--notion .nt-hero { padding: 36px 18px 0; }
  .ms--notion .nt-marks { gap: 6px; }
  .ms--notion .nt-mark { width: 40px; height: 40px; }
  .ms--notion .nt-app__body { padding: 16px 12px 18px; }
  .ms--notion .nt-page { font-size: 20px; }
  .ms--notion .nt-board { gap: 6px; }
  .ms--notion .nt-col { min-height: 150px; padding: 5px; }
  .ms--notion .nt-task { padding: 7px 8px; font-size: 11px; }
  .ms--notion .nt-task span,
  .ms--notion .nt-task .nt-tag,
  .ms--notion .nt-av { display: none; }
  .ms--notion .nt-col__h { gap: 4px; font-size: 10px; }
  .ms--notion .nt-pill { padding: 1px 6px; font-size: 10px; }
  .ms--notion .nt-logos { gap: 12px 24px; padding: 30px 18px 0; }
  .ms--seed .sd-promo { justify-content: flex-start; font-size: 10.5px; }
  .ms--seed .sd-nav,
  .ms--dala .dl-nav { gap: 10px; height: 60px; padding: 0 18px; }
  .ms--seed .sd-hero { gap: 26px; padding: 12px 18px 44px; }
  .ms--seed .sd-visual { aspect-ratio: 1 / 1.05; }
  .ms--seed .sd-glass { width: 72%; }
  .ms--seed .sd-dark,
  .ms--seed .sd-sci,
  .ms--seed .sd-gallery-sec,
  .ms--seed .sd-quote { padding: 52px 18px; }
  .ms--seed .sd-products { gap: 10px; }
  .ms--seed .sd-prod__name { font-size: 17px; }
  .ms--seed .sd-specs b { font-size: 24px; }
  .ms--slush .sl-nav { height: 62px; padding: 0 14px; }
  .ms--slush .sl-logo { width: 40px; height: 40px; }
  .ms--slush .sl-nav .sl-btn--dark { height: 36px; padding: 0 12px; font-size: 11px; }
  .ms--slush .sl-hero { padding: 26px 16px 40px; }
  .ms--slush .sl-display { font-size: 25cqw; }
  .ms--slush .sl-st { --k: 1.7; }
  .ms--notion .nt-doodle--b { display: none; }
  .ms--slush .sl-tag { margin-top: 22px; font-size: 17px; }
  .ms--slush .sl-ctas { flex-direction: column; width: 100%; }
  .ms--slush .sl-sec { padding: 52px 16px; }
  .ms--slush .sl-display--md { font-size: 16cqw; }
  .ms--slush .sl-left { max-width: none; }
  .ms--slush .sl-badge { top: 24px; right: 14px; width: 84px; height: 84px; }
  .ms--slush .sl-form { padding: 22px; border-radius: 30px; }
  .ms--slush .sl-form__h { font-size: 34px; }
  .ms--slush .sl-foot__row { flex-direction: column; gap: 4px; }
  .ms--dala .dl-hero { align-content: end; padding: 20px 18px 50px; }
  .ms--dala .dl-canvas { height: 57%; opacity: .95; }
  .ms--dala .dl-body { font-size: 16px; }
  .ms--dala .dl-sec { padding: 56px 18px; }
  .ms--dala .dl-row b { font-size: 24px; }
}

/* ---------- Restaurant · « Air » (suite) : ciel de minuit et sculptures de verre ----------
   Style « ciel de minuit et sculptures de verre », aux couleurs d'Ovrea : fond bleu
   nuit, nuages et formes de verre animés, titres très condensés, un mot en italique,
   boutons fantômes ou clairs, cartes plates sans ombre. */
@property --ga { syntax: "<angle>"; inherits: false; initial-value: 0deg; }


/* Navigation transparente posée sur le ciel */
.ms-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; gap: 28px; height: 72px; padding: 0 36px; }
.ms-logo { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.ms-logo > span { overflow: hidden; text-overflow: ellipsis; }
.ms-mono { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ms-acc); color: var(--ms-acc-ink); font-family: var(--f-display); font-size: 12px; font-style: normal; font-weight: 800; }
.ms-links { display: flex; gap: 26px; font-size: 14px; color: rgba(255, 255, 255, 0.78); }
.ms-ghost { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 8px; font-size: 14px; white-space: nowrap; }
.ms-burger { display: none; align-content: center; justify-items: center; gap: 5px; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 8px; }
.ms-burger i { width: 16px; height: 1.5px; background: #FFFFFF; }

/* Accueil plein écran */
.ms-hero { position: relative; display: grid; align-content: start; justify-items: center; min-height: var(--hero-h); padding: calc(var(--hero-h) * .16) 40px 0; overflow: hidden; text-align: center; }
.ms-hero__in { position: relative; z-index: 5; display: grid; justify-items: center; max-width: 800px; }
.ms-eyebrow { font-size: 14px; color: color-mix(in srgb, var(--ms-twilight) 55%, #FFFFFF); }
.ms-title { margin-top: 14px; font-size: clamp(30px, 5.8cqw, 62px); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; }
.ms-sub { max-width: 46ch; margin-top: 18px; font-size: 17px; color: var(--ms-soft); }
.ms-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .35s, color .35s, border-color .35s, transform .45s var(--ease-out);
}
.ms-btn i { font-style: normal; transition: transform .45s var(--ease-out); }
.ms-btn--haze { background: var(--ms-haze); color: var(--ms-ink); }
.ms-btn--ghost { border-color: rgba(255, 255, 255, 0.9); color: #FFFFFF; }
.ms-btn.is-hover { transform: translateY(-2px); }
.ms-btn--haze.is-hover { background: #FFFFFF; }
.ms-btn--ghost.is-hover { background: rgba(255, 255, 255, 0.1); }
.ms-btn.is-hover i { transform: translateX(5px); }
.ms-btn.is-press { transform: scale(.96); }
.ms-scroll { position: absolute; left: 36px; bottom: 22px; z-index: 5; display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.62); }
.ms-scroll i { width: 1px; height: 30px; background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); transform-origin: 50% 0; animation: ms-scroll 2.4s var(--ease-in-out) infinite; }
@keyframes ms-scroll { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Le ciel : dégradés de nuit, nuages, étoiles et grain photographique */
.sky {
  --sky-top: #02050D;
  --sky-mid: #0B1329;
  --sky-low: #16307F;
  --glow: #2447B8;
  --spot: #7D9BFF;
  --cloud: 220, 228, 250;
  --gs: 1;
  --gx: 1;
  --gy: 0;
  --ay: 74%;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background:
    radial-gradient(38% 44% at 50% var(--ay), color-mix(in srgb, var(--spot) 38%, transparent), transparent 72%),
    radial-gradient(95% 62% at 50% 112%, color-mix(in srgb, var(--glow) 90%, transparent), transparent 74%),
    linear-gradient(180deg, var(--sky-top), var(--sky-mid) 50%, var(--sky-low));
}
.sky[data-mood="dusk"] { --sky-top: #03060F; --sky-mid: #16213F; --sky-low: color-mix(in srgb, #16213F 58%, #F2A93B); --glow: #F2A93B; --spot: #FCEBCF; --cloud: 252, 235, 207; }
.sky[data-mood="dawn"] { --sky-top: #0E1832; --sky-mid: #2447B8; --sky-low: #7D9BFF; --glow: #DCE4FA; --spot: #FFFFFF; --cloud: 255, 255, 255; }
.sky[data-mood="sunrise"] { --sky-top: #0B1329; --sky-mid: #16307F; --sky-low: color-mix(in srgb, #2447B8 40%, #F2A93B); --glow: #F2A93B; --spot: #FCEBCF; --cloud: 252, 235, 207; }
.sky[data-mood="ember"] { --sky-top: #02040A; --sky-mid: #0B1329; --sky-low: color-mix(in srgb, #0E1832 64%, #F2A93B); --glow: color-mix(in srgb, #F2A93B 75%, #16213F); --spot: #F2A93B; --cloud: 233, 238, 250; }
.sky[data-mood="deep"] { --sky-top: #050A18; --sky-mid: #16307F; --sky-low: #2447B8; --glow: #7D9BFF; --spot: #DCE4FA; }
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  opacity: .09;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
}
.sky__clouds,
.sky__glass { position: absolute; inset: 0; }
.sky--hero { --ay: 82%; }
.sky__aura { position: absolute; left: 50%; top: var(--ay); z-index: 1; width: 64cqw; aspect-ratio: 1.5; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ms-acc) 30%, transparent), transparent); translate: -50% -50%; animation: ms-aura 7s ease-in-out infinite alternate; }
@keyframes ms-aura { from { scale: .88; opacity: .65; } to { scale: 1.08; opacity: 1; } }
.cloud {
  position: absolute;
  z-index: var(--z, 1);
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1cqw);
  aspect-ratio: 2.4;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--cloud), var(--o)), rgba(var(--cloud), 0));
  translate: -50% -50%;
  animation: ms-cloud var(--d) ease-in-out var(--dl) infinite alternate;
}
@keyframes ms-cloud { from { translate: calc(-50% - 7cqw) -50%; } to { translate: calc(-50% + 7cqw) -50%; } }
.star { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: max(1.5px, calc(var(--w) * 1cqw)); aspect-ratio: 1; border-radius: 50%; background: #FFFFFF; animation: ms-star var(--d) ease-in-out var(--dl) infinite alternate; }
@keyframes ms-star { from { opacity: .08; } to { opacity: .9; } }
.sky[data-mood="dawn"] .star { display: none; }

/* Les sculptures de verre */
.g {
  position: absolute;
  z-index: 2;
  left: calc((50 + (var(--x) - 50) * var(--gx)) * 1%);
  top: calc((var(--y) + var(--gy)) * 1%);
  width: calc(var(--s) * var(--gs) * 1cqw);
  translate: -50% -50%;
  animation: g-float var(--fd, 7s) ease-in-out var(--fl, 0s) infinite alternate;
}
@keyframes g-float { from { translate: -50% -57%; } to { translate: -50% -43%; } }
.g__b {
  --tint: #7D9BFF;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 1);
  overflow: hidden;
  border-radius: 50%;
  transform: rotate(calc(var(--r, 0) * 1deg)) scale(1, var(--fy, 1));
  background:
    radial-gradient(70% 55% at 30% 16%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 62%),
    radial-gradient(80% 70% at 72% 90%, color-mix(in srgb, var(--tint) 75%, transparent), transparent 72%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.03) 58%, color-mix(in srgb, var(--tint) 34%, transparent));
  box-shadow:
    inset 0 0 0 max(1px, .1cqw) rgba(255, 255, 255, 0.36),
    inset 0 .3cqw .2cqw rgba(255, 255, 255, 0.5),
    inset 0 -1.4cqw 2.6cqw color-mix(in srgb, var(--tint) 55%, transparent),
    0 1.4cqw 4.6cqw -1.2cqw color-mix(in srgb, var(--tint) 65%, transparent);
}
.sky--hero .g__b {
  -webkit-backdrop-filter: blur(.7cqw) saturate(170%) brightness(1.15);
  backdrop-filter: blur(.7cqw) saturate(170%) brightness(1.15);
}
.g--a .g__b { --tint: var(--ms-acc); }
.g--w .g__b { --tint: #DCE4FA; }
.g--d .g__b { --tint: #2447B8; }
.g--drop .g__b { border-radius: 0 50% 50% 50%; transform: rotate(calc(45deg + var(--r, 0) * 1deg)); }
.g--ring .g__b { -webkit-mask: radial-gradient(closest-side, transparent 66%, #000 67.5%); mask: radial-gradient(closest-side, transparent 66%, #000 67.5%); }
.g--flat .g__b { --fy: .3; }
.g--plank .g__b { border-radius: 2.4% / 13%; }
.g--slab .g__b { border-radius: 7% / 4%; }
.g--pill .g__b,
.g--blade .g__b { border-radius: 999px; }
.g--leaf .g__b { border-radius: 0 100% 0 100%; transform: rotate(calc(-45deg + var(--r, 0) * 1deg)); }
.g--arch .g__b { border-radius: 50% 50% 8% 8% / 40% 40% 6% 6%; }
.g--dome .g__b { border-radius: 50% 50% 4% 4% / 96% 96% 6% 6%; }
.g--spark .g__b { border-radius: 0; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }

/* Reflet qui fait le tour de la forme, éclat qui la traverse, lueur intérieure */
.g--rim .g__b::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: max(1px, .16cqw);
  border-radius: inherit;
  background: conic-gradient(from var(--ga), transparent 0 58%, color-mix(in srgb, var(--ms-acc) 80%, #FFFFFF) 70%, transparent 82%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: g-rim 6s linear infinite;
}
@keyframes g-rim { to { --ga: 360deg; } }
.g__s { position: absolute; top: -30%; bottom: -30%; left: -50%; width: 30%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)); rotate: 20deg; animation: g-shine var(--sd, 7s) ease-in-out var(--sl, 0s) infinite; }
@keyframes g-shine { 0%, 58% { translate: 0 0; } 88%, 100% { translate: 560% 0; } }
.g__glow { position: absolute; inset: 24% 16% 0; border-radius: 50% 50% 0 0; background: radial-gradient(60% 75% at 50% 100%, var(--ms-acc), color-mix(in srgb, var(--ms-acc) 0%, transparent)); animation: g-flicker 1.7s ease-in-out infinite alternate; }
@keyframes g-flicker { 0% { opacity: .5; transform: scaleY(.9); } 50% { opacity: .95; } 100% { opacity: .7; transform: scaleY(1.06); } }

/* Mouvements : flotter, osciller, onduler, monter, tomber, couper, scintiller */
.g--still { animation: none; }
.g--sync { --fl: 0s !important; --fd: 7s !important; }
.g--sway { animation: g-float var(--fd, 7s) ease-in-out var(--fl, 0s) infinite alternate, g-sway 5.5s ease-in-out var(--fl, 0s) infinite alternate; }
@keyframes g-sway { from { rotate: -5deg; } to { rotate: 6deg; } }
.g--ripple { animation: g-ripple 3.6s cubic-bezier(.2, .7, .3, 1) var(--fl, 0s) infinite; }
@keyframes g-ripple { 0% { scale: .3; opacity: 0; } 14% { opacity: 1; } 100% { scale: 1.15; opacity: 0; } }
.g--rise { animation: g-rise var(--fd, 5s) linear var(--fl, 0s) infinite; }
@keyframes g-rise { 0% { translate: -50% 0; opacity: 0; } 12% { opacity: .95; } 100% { translate: -50% -1400%; opacity: 0; } }
.g--fall { animation: g-fall 3.6s cubic-bezier(.55, 0, .9, .6) var(--fl, 0s) infinite; }
@keyframes g-fall { 0% { translate: -50% -50%; opacity: 0; } 8% { opacity: 1; } 34% { translate: -50% 420%; opacity: 1; } 36%, 100% { translate: -50% 420%; opacity: 0; } }
.g--snipl { animation: g-float 7s ease-in-out 0s infinite alternate, g-snip-l 3s ease-in-out infinite; }
.g--snipr { animation: g-float 7s ease-in-out 0s infinite alternate, g-snip-r 3s ease-in-out infinite; }
@keyframes g-snip-l { 0%, 55%, 100% { rotate: 0deg; } 64%, 80% { rotate: 9deg; } 72% { rotate: 1deg; } }
@keyframes g-snip-r { 0%, 55%, 100% { rotate: 0deg; } 64%, 80% { rotate: -9deg; } 72% { rotate: -1deg; } }
.g--twinkle { animation: g-twinkle 2.4s ease-in-out var(--fl, 0s) infinite; }
@keyframes g-twinkle { 0%, 100% { scale: .3; opacity: .2; rotate: 0deg; } 50% { scale: 1; opacity: 1; rotate: 45deg; } }

/* Grand titre condensé qui défile */
.ms-poster { overflow: hidden; padding: 44px 0 40px; border-top: 1px solid var(--ms-line); }
.ms-marq { display: flex; width: max-content; animation: ms-marq 28s linear infinite; }
.ms-marq span { padding-right: .32em; font-family: var(--f-display); font-size: 15cqw; font-weight: 900; font-stretch: 62%; line-height: .85; letter-spacing: -0.005em; text-transform: uppercase; white-space: nowrap; }
.ms-marq--rev { margin-top: .5cqw; animation-direction: reverse; animation-duration: 34s; }
.ms-marq--rev span { color: transparent; -webkit-text-stroke: max(1px, .14cqw) var(--ms-acc); }
@keyframes ms-marq { to { transform: translateX(-50%); } }

/* Bandeau de garanties, monochrome */
.ms-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 26px 40px; border-block: 1px solid var(--ms-line); }
.ms-trust li { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.74); white-space: nowrap; }
.ms-trust svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ms-acc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Sections */
.ms-sec { padding: 76px 40px; }
.ms-head { display: grid; justify-items: center; gap: 10px; margin-bottom: 38px; text-align: center; }
.ms-kick { font-size: 18px; color: var(--ms-twilight); }
.ms-h { max-width: 20ch; font-size: clamp(28px, 4.6cqw, 50px); font-weight: 500; line-height: 1.04; letter-spacing: -0.03em; }
.ms-text { max-width: 44ch; font-size: 16px; color: var(--ms-soft); }

.ms-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ms-card { display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: 12px; background: var(--ms-haze); color: var(--ms-ink); transition: background-color .45s, transform .55s var(--ease-out); }
.ms-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.ms-card__n { font-family: var(--f-mono); font-size: 12px; color: var(--ms-ink-muted); }
.ms-ic { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(14, 24, 50, 0.16); border-radius: 8px; transition: background-color .45s, color .45s, border-color .45s, transform .6s var(--ease-out); }
.ms-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ms-card b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.ms-card p { font-size: 14.5px; color: var(--ms-ink-muted); }
.ms-more { justify-self: start; margin-top: 10px; padding-bottom: 2px; font-size: 14px; font-style: normal; box-shadow: inset 0 -2px 0 var(--ms-acc); }
.ms-card.is-hover { background: #FFFFFF; transform: translateY(-4px); }
.ms-card.is-hover .ms-ic { border-color: var(--ms-ink); background: var(--ms-ink); color: var(--ms-acc); transform: rotate(-8deg); }

.ms-sec--gallery { padding-top: 0; }
.ms-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ms-shot { margin: 0; }
.ms-shot__img { position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; border-radius: 12px; }
.ms-shot__img .sky { --ay: 60%; transition: transform 1.1s var(--ease-out); }
.ms-shot.is-hover .ms-shot__img .sky { transform: scale(1.07); }
.ms-shot figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 2px 0; font-size: 15px; }
.ms-shot small { font-size: 13px; color: var(--ms-twilight); }

.ms-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--ms-line); }
.ms-stat { padding: 34px 30px 30px; }
.ms-stat + .ms-stat { box-shadow: inset 1px 0 0 var(--ms-line); }
.ms-stat b { display: block; font-family: var(--f-display); font-size: clamp(54px, 9cqw, 104px); font-weight: 900; font-stretch: 62%; line-height: .85; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.ms-stat em { font-style: normal; color: var(--ms-acc); }
.ms-stat > span { display: block; margin-top: 12px; font-size: 14px; color: var(--ms-twilight); }

.ms-quote { text-align: center; }
.ms-q-mark { display: block; height: .46em; font-family: "Fraunces", Georgia, serif; font-size: 120px; font-style: italic; line-height: .9; color: var(--ms-acc); }
.ms-q { max-width: 26ch; margin: 0 auto; font-size: clamp(22px, 3.3cqw, 34px); font-weight: 500; line-height: 1.22; letter-spacing: -0.02em; }
.qw { display: inline; }
.ms-stars { margin-top: 18px; font-size: 14px; letter-spacing: .3em; color: var(--ms-acc); }
.ms-who { margin-top: 6px; font-size: 14px; color: var(--ms-twilight); }

.ms-contact { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 48px; border-top: 1px solid var(--ms-line); }
.ms-contact .ms-head { justify-items: start; margin: 0; text-align: left; }
.ms-phone { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding-bottom: 3px; font-size: 15px; box-shadow: inset 0 -2px 0 var(--ms-acc); }
.ms-phone svg { width: 18px; height: 18px; fill: none; stroke: var(--ms-acc); stroke-width: 1.8; stroke-linejoin: round; }
.ms-form { display: grid; gap: 12px; padding: 22px; border-radius: 12px; background: var(--ms-haze); color: var(--ms-ink); }
.ms-field { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; background: #FFFFFF; font-size: 15px; transition: border-color .3s, box-shadow .3s; }
.ms-field small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-ink-muted); }
.ms-field--msg { align-content: start; min-height: 98px; }
.ms-field--msg.is-focus { border-color: var(--ms-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-acc) 45%, transparent); }
.ms-send { justify-self: start; border-color: var(--ms-ink); background: var(--ms-haze); color: var(--ms-ink); }
.ms-send.is-hover { background: #FFFFFF; }
.ms-send.is-sent { border-color: var(--ms-ink); background: var(--ms-ink); color: #FFFFFF; }

/* Pied de page : le nom de l'entreprise en très grand */
.ms-foot { padding-top: 56px; overflow: hidden; border-top: 1px solid var(--ms-line); }
.ms-foot__big { width: max-content; overflow: hidden; padding: 0 12px; font-family: var(--f-display); font-size: 120px; font-weight: 900; font-stretch: 62%; line-height: .82; letter-spacing: -0.005em; text-transform: uppercase; white-space: nowrap; }
.ms-foot__big .ch { display: inline-block; }
.ms-foot__big .ch:last-child { color: var(--ms-acc); }
.ms-foot__row { display: flex; justify-content: space-between; gap: 16px; padding: 20px 40px 24px; font-size: 13px; color: rgba(255, 255, 255, 0.6); }

/* Tablette et téléphone : le site se réorganise vraiment */
@container ms (max-width: 820px) {
  .ms .ms-links { display: none; }
  .ms .ms-hero { padding-top: calc(var(--hero-h) * .14); }
  .ms-hero > .sky { --gs: 1.3; --gx: 1.15; --gy: 0; }
  .ms .ms-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
  .ms .ms-contact { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@container ms (max-width: 520px) {
  .ms .ms-nav { gap: 10px; height: 62px; padding: 0 16px; }
  .ms .ms-nav .ms-ghost { display: none; }
  .ms .ms-burger { display: grid; }
  .ms .ms-logo { font-size: 14.5px; }
  .ms .ms-mono { width: 28px; height: 28px; font-size: 11px; }
  .ms .ms-hero { padding: calc(var(--hero-h) * .13) 18px 0; }
  .ms-hero > .sky { --gs: 1.85; --gx: 1.45; --gy: 2; }
  .ms .ms-title { font-size: 34px; }
  .ms .ms-sub { font-size: 15px; }
  .ms .ms-btns { flex-direction: column; align-items: stretch; width: 100%; }
  .ms .ms-scroll { display: none; }
  .ms .ms-poster { padding: 30px 0 26px; }
  .ms .ms-trust { padding: 20px 18px; }
  .ms .ms-trust li { justify-content: flex-start; font-size: 13px; }
  .ms .ms-sec { padding: 52px 18px; }
  .ms .ms-sec--gallery { padding-top: 0; }
  .ms .ms-cards,
  .ms .ms-gallery,
  .ms .ms-stats { grid-template-columns: minmax(0, 1fr); }
  .ms .ms-stat { padding: 24px 18px; }
  .ms .ms-stat + .ms-stat { box-shadow: inset 0 1px 0 var(--ms-line); }
  .ms .ms-q-mark { font-size: 90px; }
  .ms .ms-foot__row { flex-direction: column; gap: 4px; padding-inline: 18px; }
}

/* Studio : adaptations à l'écran du visiteur */
@media (max-width: 1080px) {
  .studio { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
  .studio__panel { padding-inline: 20px; }
  .fc--search { width: 270px; }
}
/* Sur tablette et téléphone, l'aperçu se place juste sous le nom de l'entreprise */
@media (max-width: 899px) {
  .studio { grid-template-columns: minmax(0, 1fr); }
  .studio__panel,
  .sf { display: contents; }
  .studio__kicker { order: 1; padding: 22px 20px 16px; }
  .sf__field--name { order: 2; padding: 0 20px 22px; }
  .stage { order: 3; min-height: 600px; }
  .sf__field--city { order: 4; padding: 22px 20px 0; }
  .sf__field--trades { order: 5; margin-top: 18px; padding: 0 20px; } /* une légende reste au-dessus du padding */
  .sf__duo { order: 6; padding: 18px 20px 0; }
  .studio__cta { order: 7; padding: 22px 20px 24px; }
}
@media (max-width: 560px) {
  .studio { box-shadow: 6px 6px 0 var(--accent); }
  .studio__kicker { padding-inline: 16px; }
  .sf__field--name,
  .sf__field--city,
  .sf__field--trades,
  .sf__duo,
  .studio__cta { padding-inline: 16px; }
  .sf__duo { gap: 14px; }
  .stage,
  .stage[data-mode="tablet"],
  .stage[data-mode="phone"] { --pad-t: 52px; --pad-r: 14px; --pad-b: 24px; --pad-l: 14px; min-height: 540px; }
  .fc--search { display: none; }
  .fc--lead { top: auto; right: 12px; bottom: 14px; left: 12px; width: auto; }
  .build__s { display: none; }
  .dev__body { box-shadow: 12px 12px 0 var(--st-acc), 0 40px 80px -30px rgba(0, 0, 0, 0.7); }
}

.incl {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 36px);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--accent);
}
.incl .label { margin-bottom: 12px; }
.incl__h { margin-bottom: 18px; font-family: var(--f-display); font-weight: 900; font-stretch: 112%; font-size: clamp(20px, 2vw, 26px); line-height: 1.15; text-transform: uppercase; }
.incl .ticks { padding-top: 0; border-top: 0; }

/* ---------- Ovrea ---------- */
.tour {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.features { display: grid; }
.feature {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-content: center;
  gap: 6px 10px;
  min-height: 44vh;
  padding: 24px 0;
  border-top: 2px solid var(--band-line);
  opacity: .35;
  transition: opacity .5s var(--ease-out), border-color .5s;
}
.feature:last-child { border-bottom: 2px solid var(--band-line); }
.feature.is-active { opacity: 1; border-top-color: var(--amber); }
.feature__n { grid-row: span 2; padding-top: 6px; font-family: var(--f-mono); font-size: 13px; color: var(--amber); }
.feature__title { font-family: var(--f-display); font-weight: 900; font-stretch: 115%; font-size: clamp(22px, 2.3vw, 32px); text-transform: uppercase; line-height: 1.05; }
.feature p { max-width: 40ch; color: #C9D3EE; }
.tour__sticky { position: sticky; top: calc(var(--nav-h) + 32px); }
.tour__caption { margin-top: 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--band-muted); text-align: right; }

/* Vidéo de présentation */
.vid { margin: 0 0 clamp(64px, 8vw, 120px); }
.vid__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--accent);
  box-shadow: 10px 10px 0 var(--amber);
  container-type: inline-size;
}
.vid__media { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--band); }
.vid__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 32.5% 20px 0; /* sous le logo et le slogan de l’affiche */
  border: 0;
  background: linear-gradient(to top, rgba(14, 24, 50, 0.45), rgba(14, 24, 50, 0) 45%);
  color: #fff;
  text-align: center;
  transition: opacity .45s var(--ease-out), visibility .45s;
}
.vid__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(48px, 8vw, 104px);
  width: clamp(48px, 9cqw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--amber);
  color: var(--amber-ink);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.vid__btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  animation: vid-pulse 2.2s var(--ease-out) infinite;
}
.vid__btn svg { width: clamp(20px, 3.4cqw, 40px); height: clamp(20px, 3.4cqw, 40px); } /* le triangle est déjà centré optiquement dans son symbole */
.vid__play:hover .vid__btn,
.vid__play:focus-visible .vid__btn { transform: translate(-3px, -3px) scale(1.05); box-shadow: 9px 9px 0 var(--ink); }
.vid__play:focus-visible { outline: 3px solid var(--amber); outline-offset: -6px; }
.vid__txt b { display: block; font-family: var(--f-display); font-weight: 900; font-stretch: 115%; font-size: clamp(13px, 1.9cqw, 22px); line-height: 1.1; text-transform: uppercase; }
.vid__txt small { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.vid:not(.is-ready) .vid__play { display: none; } /* sans JavaScript : lecteur natif */
.vid.is-playing .vid__play { opacity: 0; visibility: hidden; pointer-events: none; }
@container (max-width: 720px) { .vid__txt small { display: none; } .vid__play { gap: 10px; } }
@container (max-width: 480px) { .vid__txt { display: none; } }
.vid__cap { display: flex; justify-content: space-between; gap: 20px; margin-top: 22px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--band-muted); }
.vid__time { color: var(--amber); }
@keyframes vid-pulse {
  0% { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
/* pendant la lecture, la vraie flèche revient pour utiliser les commandes */
.has-cursor .vid.is-playing .vid__frame,
.has-cursor .vid.is-playing .vid__frame * { cursor: auto !important; }
.has-cursor:has(.vid.is-playing .vid__frame:hover) .cursor { opacity: 0; }

/* Lien « Voir la vidéo » de l'accueil */
.watch { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 4px; font-size: 16px; font-weight: 700; color: var(--band-ink); }
.watch__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--amber); color: var(--amber); transition: background-color .3s, color .3s, transform .4s var(--ease-out); }
.watch__ic svg { width: 16px; height: 16px; }
.watch:hover .watch__ic { background: var(--amber); color: var(--amber-ink); transform: scale(1.08); }
.watch__t small { margin-left: 8px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--band-muted); }

/* Maquette de l'application (dessinée à 900 × 560, mise à l'échelle) */
.app { position: relative; width: 100%; aspect-ratio: 900 / 560; }
.app__win {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-rows: 50px 1fr;
  width: 900px;
  height: 560px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 12px 12px 0 var(--amber);
  transform: scale(var(--app-scale, 1));
  transform-origin: 0 0;
}
.app__top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  background: var(--band);
  color: var(--band-ink);
  border-bottom: 3px solid var(--amber);
  --logo: var(--band-logo);
}
.app__brand { display: flex; align-items: center; gap: 8px; margin-right: 16px; }
.app__brand svg { width: 24px; height: 24px; }
.app__brand b { font-family: var(--f-logo); font-size: 18px; letter-spacing: -0.03em; }
.app__nav { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 4px; font-size: 12.5px; font-weight: 600; color: #C9D3EE; transition: color .35s, background-color .35s; }
.app__nav svg { width: 15px; height: 15px; }
.app__nav.is-active { color: var(--amber); background: rgba(242, 169, 59, 0.12); }
.app__main {
  position: relative;
  min-height: 0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.panel { position: absolute; inset: 0; padding: 20px 26px; opacity: 0; visibility: hidden; }
.panel.is-active { opacity: 1; visibility: visible; }
.panel__date { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.panel__h { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 30px; line-height: 1; text-transform: uppercase; }
.panel__sub { font-size: 12.5px; color: var(--muted); }
.panel__actions { display: flex; gap: 8px; }
.pbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 4px;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pbtn svg { width: 14px; height: 14px; }
.pbtn--line { border: 1.5px solid var(--ink); background: var(--surface); }
.pbtn--blue { background: var(--accent); color: #fff; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpis .kpi { padding: 12px 14px; }
.kpis .kpi b { font-size: 24px; }
.todo { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-top: 4px solid var(--amber); border-radius: 6px; background: var(--surface); }
.todo__h { display: flex; justify-content: space-between; margin-bottom: 10px; font-family: var(--f-display); font-weight: 900; font-stretch: 115%; font-size: 15px; text-transform: uppercase; }
.todo__h span { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--muted); }
.todo__row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.todo__row small { color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 3px; }
.dot--bad { background: var(--bad); }
.dot--warn { background: var(--amber); }

.seg { display: flex; align-items: center; gap: 0; margin-bottom: 14px; font-size: 12px; font-weight: 600; }
.seg i { padding: 6px 12px; border: 1.5px solid var(--ink); border-left-width: 0; background: var(--surface); font-style: normal; }
.seg i:first-child { border-left-width: 1.5px; border-radius: 4px 0 0 4px; }
.seg i:nth-child(5) { border-radius: 0 4px 4px 0; }
.seg i.is-on { background: var(--ink); color: #fff; }
.seg span { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.table { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface); }
.table__row { display: grid; grid-template-columns: 1fr 1.3fr 1fr 0.9fr; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.table__row--head { border-top: 0; border-bottom: 2px solid var(--ink); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.table__row span:nth-child(3) { font-weight: 700; font-variant-numeric: tabular-nums; }
.table__row span:first-child { font-family: var(--f-mono); font-size: 12px; }
.st { display: inline-block; padding: 3px 8px; border-radius: 3px; font-style: normal; font-size: 11px; font-weight: 700; }
.st--ok { background: var(--ok-soft); color: var(--ok); }
.st--info { background: var(--accent-soft); color: var(--accent); }
.st--draft { background: var(--surface-2); color: var(--muted); }
.st--bad { background: var(--bad-soft); color: var(--bad); }
.st--warn { background: var(--warn-soft); color: var(--warn); }
.sign { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 10px 14px; border: 1.5px dashed var(--ink); border-radius: 6px; background: var(--surface); }
.sign span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sign svg { width: 200px; height: 50px; }
.sign path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.letter { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--bad); border-radius: 6px; background: var(--surface); }
.letter__h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-weight: 700; }
.letter__h svg { width: 16px; height: 16px; color: var(--bad); }
.letter p:last-child { color: var(--muted); }
.legend { display: flex; gap: 8px; }
.lg { padding: 3px 8px; border: 1px solid currentColor; border-radius: 3px; font-family: var(--f-mono); font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.lg--rdv { color: var(--accent); background: var(--accent-soft); }
.lg--visit { color: var(--muted); background: var(--surface-2); }
.lg--site { color: var(--wood); background: var(--wood-soft); }
.week { display: grid; grid-template-rows: auto 1fr; height: calc(100% - 62px); }
.week__days { display: grid; grid-template-columns: 34px repeat(6, 1fr); border-bottom: 2px solid var(--ink); }
.week__days span { padding: 6px 0; text-align: center; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.week__days .is-today { background: var(--amber); color: var(--amber-ink); }
.week__body { display: grid; grid-template-columns: 34px repeat(6, 1fr); min-height: 0; background: var(--surface); }
.week__hours { display: grid; align-content: space-between; padding: 4px 0 8px; font-family: var(--f-mono); font-size: 10px; color: var(--muted); }
.week__col { position: relative; border-left: 1px solid var(--line); }
.week__col.is-today { background: rgba(242, 169, 59, 0.12); }
.ev {
  position: absolute;
  top: var(--t);
  left: 4px;
  right: 4px;
  height: var(--h);
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 5px 7px;
  overflow: hidden;
  border-radius: 3px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.ev small { font-weight: 500; color: var(--muted); }
.ev--visit { border-left-color: var(--muted); background: var(--surface-2); }
.ev--site { border-left-color: var(--wood); background: var(--wood-soft); color: var(--amber-ink); }
.ev--free { border: 1.5px dashed var(--ok); background: var(--ok-soft); color: var(--ok); }
.talk { display: grid; gap: 10px; max-width: 720px; }
.talk__q { justify-self: end; max-width: 70%; padding: 10px 14px; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 600; }
.talk__a { max-width: 80%; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 6px; background: var(--surface); }
.typing { display: inline-flex; gap: 5px; }
.typing i { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(64px, 8vw, 112px); }
.pillar { padding-top: 18px; border-top: 3px solid var(--amber); }
.pillar h3 { margin: 10px 0 8px; font-family: var(--f-display); font-weight: 900; font-stretch: 112%; font-size: 18px; line-height: 1.15; text-transform: uppercase; }
.pillar p:last-child { color: #C9D3EE; font-size: 15px; }

/* ---------- Tarifs ---------- */
.band .offer:not(.offer--blue) { color: var(--ink); box-shadow: 8px 8px 0 var(--accent); }
.band .offer:not(.offer--blue) .label { color: var(--accent); }
.band .offer:not(.offer--blue):hover { box-shadow: 12px 12px 0 var(--accent); }
.solo { margin-top: clamp(72px, 9vw, 120px); padding-top: clamp(48px, 6vw, 72px); border-top: 2px dashed var(--band-line); }
.solo__head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.solo__head .lead { margin-inline: auto; }
.solo__title { margin-top: 14px; font-size: clamp(24px, 2.8vw, 38px); font-stretch: 118%; }
.link--light { color: var(--amber); }
.launch {
  display: grid;
  gap: 6px;
  max-width: 920px;
  margin: 0 auto 36px;
  padding: 22px 26px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--amber);
  color: var(--amber-ink);
  box-shadow: 8px 8px 0 var(--accent);
}
.band .launch .label { color: var(--amber-ink); opacity: .75; }
.launch__h { font-family: var(--f-display); font-weight: 900; font-stretch: 112%; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1100px; margin-inline: auto; }
.plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border: 1.5px solid var(--band-line);
  border-radius: var(--r);
  background: var(--band-2);
  transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.plan:hover { translate: -4px -4px; box-shadow: 8px 8px 0 var(--accent); border-color: var(--band-ink); }
.plan--best { border: 2px solid var(--amber); box-shadow: 8px 8px 0 var(--amber); }
.plan--best:hover { box-shadow: 12px 12px 0 var(--amber); border-color: var(--amber); }
.plan__badge { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 3px; background: var(--amber); color: var(--amber-ink); letter-spacing: .08em; }
.plan__price { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-display); font-weight: 900; font-stretch: 112%; font-size: clamp(44px, 4.6vw, 64px); line-height: 1; }
.plan__price b { font-weight: 900; font-variant-numeric: tabular-nums; }
.plan__price small { font-family: var(--f-body); font-stretch: 100%; font-weight: 500; font-size: 15px; color: var(--band-muted); }
.plan__text { flex: 1; color: #C9D3EE; }
.included {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
  max-width: 900px;
  margin: 44px auto 0;
}
.included li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.included li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8.5' fill='none' stroke='%232B1A00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.fineprint { margin-top: 26px; text-align: center; font-size: 13px; color: var(--band-muted); }

/* ---------- Méthode ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 46px; }
.steps__line { position: absolute; top: 8px; left: 0; right: 0; height: 3px; background: var(--line); }
.steps__line i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.step { position: relative; }
.step::before {
  content: "";
  position: absolute;
  top: -46px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--amber);
  transform: rotate(12deg);
}
.step__n { font-family: var(--f-mono); font-size: 13px; color: var(--accent); }
.step__title { margin: 10px 0 8px; font-family: var(--f-display); font-weight: 900; font-stretch: 115%; font-size: 22px; text-transform: uppercase; }
.step p { max-width: 30ch; color: var(--muted); }

/* ---------- À propos ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.about__body { margin-top: 24px; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; font-weight: 500; }
.about__card {
  display: grid;
  gap: 8px;
  padding: 30px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--accent);
  color: #fff;
  box-shadow: 10px 10px 0 var(--amber);
}
.about__big { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: clamp(110px, 12vw, 170px); line-height: .82; }
.about__label { max-width: 18ch; font-size: 20px; font-weight: 600; line-height: 1.3; }
.about__sign { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 2px solid rgba(255, 255, 255, 0.3); font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; --logo: #DCE4FA; }
.about__sign svg { width: 22px; height: 22px; }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact__text .h2 { padding-bottom: 22px; border-bottom: 2px solid currentColor; }
.contact__text .label { margin-bottom: 18px; }
.contact__list { display: grid; gap: 12px; margin-top: 30px; }
.contact__list li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.contact__list svg { width: 22px; height: 22px; padding: 3px; border-radius: 4px; background: var(--amber); color: var(--amber-ink); }

.form {
  position: relative;
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2.6vw, 32px);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--amber);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field__label { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field input,
.field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  transition: border-color .25s, box-shadow .25s;
}
.field input::placeholder { color: #8E9BC0; }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:hover,
.field textarea:hover { border-color: var(--muted); }
.field input:focus,
.field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.toggles { display: flex; flex-wrap: wrap; gap: 0; padding: 0; border: 0; }
.toggles legend { width: 100%; margin-bottom: 8px; padding: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.toggles label { position: relative; }
.toggles input { position: absolute; inset: 0; margin: 0; opacity: 0; }
.toggles span {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  border-left-width: 0;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  transition: background-color .25s, color .25s;
}
.toggles label:first-of-type span { border-left-width: 1.5px; border-radius: 4px 0 0 4px; }
.toggles label:last-of-type span { border-radius: 0 4px 4px 0; }
.toggles label:hover span { background: var(--accent-soft); }
.toggles input:checked + span { background: var(--ink); color: #fff; }
.toggles input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
.form__error { font-size: 14px; font-weight: 600; color: var(--bad); }
.form__error:empty { display: none; }
.form__hp { display: none; }
.form__success {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 32px;
  border-radius: inherit;
  background: var(--surface);
  text-align: center;
}
.form__success[hidden] { display: none; }
.form__success svg { width: 64px; height: 64px; color: var(--ok); }
.form__success circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw 1.2s var(--ease-out) forwards; }
.form__success path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .8s var(--ease-out) .5s forwards; }
.form__thanks { font-family: var(--f-display); font-weight: 900; font-stretch: 120%; font-size: 30px; text-transform: uppercase; }
.form__success p:last-child { max-width: 32ch; color: var(--muted); }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Pied de page ---------- */
.footer { position: relative; padding-top: clamp(64px, 8vw, 104px); overflow: hidden; border-top: 3px solid var(--amber); }
.footer__top { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.footer__brand p { max-width: 360px; margin-top: 18px; color: var(--band-muted); }
.footer__col { display: grid; align-content: start; gap: 10px; }
.footer__col .label { margin-bottom: 4px; }
.footer__col a { justify-self: start; position: relative; padding-bottom: 2px; font-weight: 600; }
.footer__col a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease-out);
}
.footer__col a:hover::after { transform: scaleX(1); transform-origin: left center; }
.footer__poster {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 6vw, 88px);
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 19vw;
  line-height: .8;
  letter-spacing: -0.02em;
  color: var(--band-ink);
  user-select: none;
}
.fp { display: inline-block; overflow: hidden; padding-top: .08em; }
.fp > span { display: inline-block; transition: color .4s, transform .6s var(--ease-out); }
.fp:last-child > span { color: var(--amber); }
.fp:hover > span { color: var(--band-logo); transform: translateY(-6%) rotate(-3deg); }
.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px 26px;
  border-top: 1px solid var(--band-line);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--band-muted);
}
.to-top { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--band-ink); }
.to-top svg { width: 16px; height: 16px; transition: transform .45s var(--ease-out); }
.to-top:hover svg { transform: translateY(-4px); }

/* ---------- Responsive ---------- */
@media (max-width: 1140px) {
  .nav__links a { padding: 8px 8px; font-size: 14px; }
  .nav__try { display: none; }
  .nav__inner { gap: 20px; }
}

@media (max-width: 899px) {
  :root { --nav-h: 62px; }
  .nav__links { display: none; }
  .nav__inner { justify-content: space-between; }
  .burger { display: block; }
  .duo__scene { height: clamp(380px, 110vw, 560px); }
  .win--site { width: 92%; height: 58%; }
  .win--app { width: 86%; }
  .stamp { right: 4%; top: 50%; }
  .offers,
  .incl { grid-template-columns: 1fr; }
  .tour { grid-template-columns: 1fr; gap: 0; }
  .tour__sticky { order: -1; top: calc(var(--nav-h) + 10px); z-index: 2; padding-bottom: 14px; background: var(--band); }
  .tour__caption { display: none; }
  .feature { min-height: 30vh; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 520px; }
  .included { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .steps__line { display: none; }
  .about { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .vid__frame { box-shadow: 6px 6px 0 var(--amber); }
  .vid__cap { flex-direction: column; gap: 6px; }
  .watch { justify-content: center; }
  .nav__actions .btn--amber { display: none; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .form__row { grid-template-columns: 1fr; }
  .offer__foot { flex-direction: column; align-items: stretch; }
  .pillars,
  .steps { grid-template-columns: 1fr; }
  .toggles span { padding: 0 10px; font-size: 13px; }
  .win--app .chat { display: none; }
  .stamp,
  .dash__sample,
  .site-mini__tiles { display: none; }
  .win--site { height: 54%; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Informations légales ---------- */
.form__notice { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.form__notice a,
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; }
.footer__legal a:hover { color: var(--band-ink); }

.legal-top { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--band-line); }
.legal-top__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--nav-h); }
.legal { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 120px); }
.legal__in { max-width: calc(820px + 2 * var(--gutter)); }
.legal__title { margin: 14px 0 12px; font-size: clamp(32px, 5vw, 60px); font-stretch: 118%; }
.legal__date { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.legal__intro { margin-top: 26px; font-size: 18px; line-height: 1.6; }
.legal section { margin-top: 44px; padding-top: 24px; border-top: 2px solid var(--ink); }
.legal h2 { margin: 0 0 16px; font-family: var(--f-display); font-weight: 900; font-stretch: 112%; font-size: clamp(19px, 2.2vw, 25px); line-height: 1.15; text-transform: uppercase; }
.legal p, .legal li, .legal dd { font-size: 16px; line-height: 1.65; }
.legal p { margin: 0; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 12px; }
.legal ul { padding-left: 1.2em; list-style: disc; }
.legal li + li { margin-top: 6px; }
.legal li::marker { color: var(--accent); }
.legal dl { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 10px 24px; margin: 0; }
.legal dt { padding-top: 4px; font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.legal dd { margin: 0; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
mark.todo { padding: 1px 6px; border-radius: 4px; background: var(--amber-soft); color: var(--amber-ink); box-shadow: inset 0 0 0 1.5px var(--amber); }
.legal-foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 24px 28px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--band-muted); }
.legal-foot a { color: var(--band-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-foot a[aria-current="page"] { color: var(--amber); }
@media (max-width: 560px) {
  .legal dl { grid-template-columns: 1fr; gap: 2px; }
  .legal dd { margin-bottom: 12px; }
}

/* ==========================================================================
   Deux univers : le logiciel Ovrea ou les sites vitrines, choisis en haut.
   Sans JavaScript, l'attribut data-univers n'existe pas : tout reste visible.
   ========================================================================== */
html[data-univers="ovrea"] [data-only="sites"],
html[data-univers="sites"] [data-only="ovrea"],
html[data-univers] [data-variant="tous"],
html:not([data-univers="ovrea"]) [data-variant="ovrea"],
html:not([data-univers="sites"]) [data-variant="sites"] { display: none !important; }

/* Le sélecteur, dans la barre du haut : la pastille ambre glisse sous l'univers choisi */
.switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: none;
  padding: 4px;
  border: 1.5px solid var(--band-line);
  border-radius: calc(var(--r-btn) + 4px);
  background: rgba(255, 255, 255, 0.04);
}
.switch__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--r-btn);
  color: var(--band-ink);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .45s var(--ease-out);
}
.switch__opt:hover { color: var(--amber); }
.switch__opt[aria-selected="true"] { color: var(--amber-ink); }
.switch__opt:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.switch__n { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; opacity: .7; }
.switch__pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--r-btn);
  background: var(--amber);
  box-shadow: 3px 3px 0 var(--accent);
  transition: transform .7s var(--ease-out);
}
html[data-univers="sites"] .switch__pill { transform: translateX(100%); }

/* Rideau de passage : ambre, puis bleu nuit quadrillé avec le nom de l'univers */
.swap { position: fixed; inset: 0; z-index: 58; overflow: hidden; pointer-events: none; visibility: hidden; }
.swap__layer { position: absolute; inset: 0; }
.swap__layer--amber { background: var(--amber); }
.swap__layer--navy {
  display: grid;
  place-items: center;
  padding: var(--nav-h) var(--gutter) 0;
  background:
    linear-gradient(rgba(125, 155, 255, 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(125, 155, 255, 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--band);
  color: var(--band-ink);
}
.swap__t {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0 .35em;
  overflow: hidden;
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(34px, 7vw, 108px);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
}
.swap__t > span { display: block; }
.swap__n { padding-top: .55em; font-family: var(--f-mono); font-size: .2em; font-weight: 600; letter-spacing: .12em; color: var(--amber); }

/* Tarifs : chaque univers met ses offres en premier */
html[data-univers="ovrea"] #tarifs > .container { display: flex; flex-direction: column; }
html[data-univers="ovrea"] #tarifs .solo { order: 1; margin-top: 0; padding-top: 0; border-top: 0; }
html[data-univers="ovrea"] #tarifs .head { margin-bottom: 22px; } /* le texte des formules suit directement le titre */
html[data-univers="ovrea"] #tarifs .solo__head > .label,
html[data-univers="ovrea"] #tarifs .solo__title { display: none; }
html[data-univers="ovrea"] #tarifs .offers {
  order: 2;
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  margin-top: clamp(72px, 9vw, 120px);
  padding-top: clamp(48px, 6vw, 72px);
  border-top: 2px dashed var(--band-line);
}
html[data-univers="sites"] #tarifs .offers > [data-only="sites"] { order: -1; }

/* Barre du haut : les liens secondaires passent dans le menu quand la place manque */
.nav__inner .switch { margin-right: 0; }
@media (max-width: 1280px) {
  .nav__links { display: none; }
  .nav__inner .switch { margin-right: auto; }
  .burger { display: block; }
}
/* Téléphone et tablette : le sélecteur occupe une deuxième ligne, sur toute la largeur */
@media (max-width: 899px) {
  :root { --nav-h: 114px; }
  .nav__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "switch switch";
    align-content: center;
    gap: 10px 12px;
  }
  .nav__inner .brand { grid-area: brand; justify-self: start; }
  .nav__inner .nav__actions { grid-area: actions; }
  .nav__inner .switch { grid-area: switch; margin-right: 0; }
  .switch__opt { height: 34px; padding: 0 10px; font-size: 14px; }
}
@media (max-width: 380px) {
  .switch__n { display: none; }
}

/* ==========================================================================
   Ruban : une bande ambre qui se déroule, puis le dernier mot de la phrase
   défile dans une étiquette bleu nuit (tâches d'Ovrea ou métiers des sites)
   ========================================================================== */
.roller {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  padding-block: clamp(44px, 6vw, 76px);
  overflow: hidden;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.roller__band {
  position: relative;
  margin-inline: -5%;
  padding: clamp(16px, 2vw, 24px) 5%;
  border-block: 2px solid var(--ink);
  background: var(--amber);
  color: var(--amber-ink);
  rotate: -2deg;
  box-shadow: 0 10px 0 var(--accent);
}
.roller__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .28em .42em;
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(19px, 2.8vw, 46px);
  font-weight: 900;
  font-stretch: 120%;
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
}
.roller__slot {
  position: relative;
  display: inline-block;
  height: 1.3em;
  padding: 0 .3em;
  overflow: hidden;
  border-radius: var(--r-btn);
  background: var(--band);
  color: var(--amber);
  box-shadow: .1em .1em 0 var(--ink);
  vertical-align: middle;
}
.roller__w { display: block; line-height: 1.3; white-space: nowrap; }
/* Avec les animations, les mots se superposent et défilent un par un */
.has-motion .roller__w { position: absolute; top: 0; left: .3em; }
.roller__line.is-stacked { flex-direction: column; }