/* Nodova, agence web à Metz
   Mise en page : grandes surfaces de matière liquide, papier autour, un seul geste fort par section.
   Le verre ne se pose que sur le liquide, jamais sur un fond uni. */

@font-face { font-family: 'Archivo'; src: url('../fonts/archivo.woff2') format('woff2'); font-weight: 300 800; font-stretch: 100% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-italic.woff2') format('woff2'); font-weight: 300 700; font-stretch: 100% 125%; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }

:root {
  /* Couleurs */
  --encre: #111214;
  --marine: #0C1C6E;
  --cobalt: #2340D8;
  --glace: #9FB0FF;
  --papier: #F3F3F0;
  --pierre: #E6E7E3;
  --texte: #2B2D30;
  --gris: #5E6064;
  --filet: #D5D6D2;
  --clair: #ECECE8;
  --clair-2: #C9CBCD;
  --clair-3: #B9BBBE;
  --brume: #D9DCE6;
  --verre: rgba(14, 15, 18, 0.45);
  --verre-filet: rgba(243, 243, 240, 0.25);
  --trait: rgba(17, 18, 20, 0.08);

  /* Formes : des angles adoucis partout, sauf le point du logo */
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 26px;
  --ombre: 0 1px 2px rgba(12, 28, 110, .04), 0 10px 30px rgba(12, 28, 110, .06);
  --ombre-haute: 0 2px 4px rgba(12, 28, 110, .05), 0 22px 50px rgba(12, 28, 110, .13);

  /* Typographie */
  --f-display: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --f-text: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Espace */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --section: clamp(64px, 8vw, 128px);

  /* Mouvement : une seule courbe */
  --ease: cubic-bezier(.22, 1, .36, 1);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-top: 96px;
  background: var(--papier);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--papier);
  color: var(--encre);
  font: 400 17px/1.55 var(--f-text);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
a:hover { color: var(--cobalt); }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.on-liquid :focus-visible, .glass :focus-visible { outline-color: var(--papier); }
::selection { background: var(--glace); color: var(--encre); }

[hidden] { display: none !important; }

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

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; background: var(--encre); color: var(--papier);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; color: var(--papier); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Typographie ---------- */

.display, .h1, .h2, .h3, .logo, .wordmark {
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 800;
}
.display { margin: 0; font-size: clamp(48px, 8.4vw, 124px); letter-spacing: -0.03em; line-height: 1; text-wrap: balance; }
.h1 { margin: 0; font-size: clamp(42px, 6.6vw, 100px); letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.h2 { margin: 0; font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
.h2--l { font-size: clamp(34px, 4.2vw, 64px); }
.h3 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1.05; }
.light { font-style: italic; font-weight: 300; }

.eyebrow { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--gris); }
.lead { margin: 0; max-width: 60ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--texte); }
.prose { max-width: 66ch; }
.prose p { margin: 0 0 1em; color: var(--texte); }
.prose p:last-child { margin-bottom: 0; }
.muted { color: var(--gris); }
.mono { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }

/* Logo : r resserré, point carré */
.logo {
  display: inline-flex; align-items: baseline;
  font-size: 28px; letter-spacing: -0.02em; line-height: 1;
  color: var(--encre); text-decoration: none;
}
.logo:hover { color: var(--encre); }

.dot { display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.07em; background: var(--cobalt); vertical-align: baseline; }
.dot--papier { background: var(--papier); }
.dot--glace { background: var(--glace); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 1px solid transparent;
  font: 600 16px/1.1 var(--f-text);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--s { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--l { min-height: 56px; padding: 0 28px; font-size: 17px; }
.btn--cobalt { background: var(--cobalt); color: var(--papier); }
.btn--cobalt:hover { background: var(--marine); color: var(--papier); }
.btn--papier { background: var(--papier); color: var(--encre); }
.btn--papier:hover { background: var(--glace); color: var(--encre); }
.btn--line { border-color: var(--encre); color: var(--encre); background: transparent; }
.btn--line:hover { background: var(--encre); color: var(--papier); }
.btn--glass {
  background: rgba(14, 15, 18, 0.3); border-color: rgba(243, 243, 240, 0.4); color: var(--papier);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  font-weight: 500;
}
.btn--glass:hover { background: rgba(14, 15, 18, 0.55); color: var(--papier); }

.link {
  font-weight: 600; color: var(--cobalt);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.link:hover { color: var(--marine); text-decoration-thickness: 2px; }

/* ---------- En-tête ---------- */

.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--papier);
  transition: box-shadow .35s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--filet); }
.site-header__in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 32px; min-height: 72px; padding-block: 12px;
}
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 15px; color: var(--encre); text-decoration: none;
}
.nav__link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--cobalt); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav .btn { margin-left: 8px; }
.menu-btn {
  display: none; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--encre); background: transparent; color: var(--encre);
  font: 600 15px/1 var(--f-text); cursor: pointer;
}
.menu-btn__bars { position: relative; width: 16px; height: 10px; }
.menu-btn__bars::before, .menu-btn__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.menu-btn__bars::before { top: 0; }
.menu-btn__bars::after { top: 8px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { top: 4px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .js .menu-btn { display: inline-flex; }
  .js .nav {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding-block: 8px 20px;
  }
  .js .nav.is-open { display: flex; }
  .js .nav__link {
    min-height: 56px; padding: 0; border-bottom: 1px solid var(--filet);
    font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 26px; letter-spacing: -0.02em;
  }
  .js .nav__link[aria-current="page"] { color: var(--cobalt); text-decoration: none; }
  .js .nav .btn { margin: 20px 0 0; }
}

/* ---------- Matière liquide et verre ---------- */

.liquid { position: relative; overflow: hidden; isolation: isolate; background: var(--marine); color: var(--papier); }
.liquid--light { background: var(--glace); }
.liquid__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.liquid__gl { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease); }
.liquid__gl.is-ready { opacity: 1; }
.liquid__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

@keyframes drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
.drift { animation: drift 28s ease-in-out infinite alternate; will-change: transform; }

.glass {
  background: var(--verre);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--verre-filet);
  color: var(--papier);
}

/* ---------- Accueil : hero ---------- */

.hero { position: relative; }
.hero__frame {
  display: flex; align-items: flex-end;
  min-height: clamp(600px, 62vw, 820px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 200px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 200px), transparent 100%);
}
.hero__frame .liquid__img { object-position: 30% 55%; }
.hero__shade { background: linear-gradient(90deg, rgba(14, 15, 18, .62) 0%, rgba(14, 15, 18, .2) 58%, rgba(14, 15, 18, 0) 100%); }
.hero__body {
  position: relative; width: 100%;
  padding-block: clamp(96px, 10vw, 140px) clamp(170px, 16vw, 230px);
  display: flex; flex-direction: column; gap: 26px;
}
.hero__eyebrow { font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--brume); }
.hero .display { max-width: 15ch; font-size: clamp(44px, 7.2vw, 112px); line-height: 1.02; }
.hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.hero__row p { margin: 0; max-width: 520px; font-size: 19px; line-height: 1.5; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 700px) {
  .hero__shade { background: linear-gradient(0deg, rgba(14, 15, 18, .7) 0%, rgba(14, 15, 18, .35) 55%, rgba(14, 15, 18, .2) 100%); }
  .hero__body { padding-block: 72px 150px; }
  .hero__row p { font-size: 17px; }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(40px, 5vw, 72px) var(--section); }
.section--rule { border-top: 1px solid var(--filet); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; margin-bottom: clamp(40px, 4.5vw, 64px); }
.section-head > * { min-width: 0; }
.section-head .lead { max-width: 46ch; }

/* ---------- Projets (accueil) ---------- */

.projects { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 104px); }
.proj { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; color: var(--encre); text-decoration: none; }
.proj:hover { color: var(--encre); }
.proj--rev { flex-wrap: wrap-reverse; }
.proj__text { flex: 4 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.proj__text p { margin: 0; max-width: 46ch; color: var(--texte); }
.proj__name { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(30px, 3vw, 42px); letter-spacing: -0.025em; line-height: 1.05; }
.proj__more { font-weight: 600; color: var(--cobalt); text-decoration: underline; text-underline-offset: 4px; }
.proj:hover .proj__more { color: var(--marine); }

.stage { flex: 8 1 560px; min-width: 0; max-width: 100%; position: relative; aspect-ratio: 16 / 11; overflow: hidden; isolation: isolate; }
.stage--light { background: var(--glace); }
.stage--dark { background: var(--marine); }
.stage__desk { position: absolute; top: 9%; width: 76%; }
.stage__desk--l { left: 6%; }
.stage__desk--r { right: 6%; }
.stage__phone { position: absolute; bottom: 7%; width: 21%; }
.stage__phone--r { right: 5%; }
.stage__phone--l { left: 5%; }
.shot { transition: transform .6s var(--ease); }
.proj:hover .shot, .stage:hover .shot { transform: translateY(-6px); }
.shot--desk { width: 100%; height: auto; border: 1px solid rgba(17, 18, 20, .12); box-shadow: 0 24px 60px rgba(12, 28, 110, .35); }
.stage--dark .shot--desk { border-color: rgba(243, 243, 240, .18); box-shadow: 0 24px 60px rgba(14, 15, 18, .5); }
.device { padding: 6px; background: var(--encre); border-radius: 22px; box-shadow: 0 24px 50px rgba(12, 28, 110, .45); }
.device img { width: 100%; height: auto; border-radius: 16px; }
@media (max-width: 560px) { .device { padding: 3px; border-radius: 12px; } .device img { border-radius: 9px; } }

/* ---------- La scène du nom ---------- */

.scene { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.scene__sticky {
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(32px, 5vh, 64px);
  padding-block: clamp(56px, 7vw, 104px);
}
.scene__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; }
.scene__top .h2 { max-width: 18ch; }
.scene__readout { font-family: var(--f-mono); font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scene__readout b { font-weight: 500; color: var(--cobalt); }
.wordmark {
  display: block; margin: 0; white-space: nowrap;
  font-size: clamp(60px, 15vw, 220px); line-height: .82; letter-spacing: -0.02em;
}
.wordmark .dot { transform-origin: 0 100%; }
.wordmark {
  background: url('../img/band-hebergement.webp') 20% 50% / 140% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.wordmark .dot { -webkit-text-fill-color: initial; }
@keyframes liquidText { from { background-position: 0% 40%; } to { background-position: 100% 60%; } }
@media (prefers-reduced-motion: no-preference) { .wordmark { animation: liquidText 40s ease-in-out infinite alternate; } }
.defs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin: 0; }
.def { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--filet); transition: opacity .5s var(--ease), border-color .5s var(--ease); }
.def dt { display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: 18px; }
.def dt .mono { font-weight: 400; color: var(--gris); }
.def dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--texte); }
.def.is-on { border-top-color: var(--encre); }
@media (max-width: 760px) { .defs { grid-template-columns: 1fr; gap: 16px; } .def dd { font-size: 15px; } }

.scrub .scene { height: 270vh; }
.scrub .scene__sticky { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; padding-block: clamp(88px, 12vh, 120px) clamp(32px, 6vh, 64px); }
.scrub .def { opacity: .32; }
.scrub .def.is-on { opacity: 1; }

/* ---------- Prix ---------- */

.price { font-size: 15px; }
.price b { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; letter-spacing: -0.02em; font-size: 30px; }

/* ---------- Deux colonnes ---------- */

.split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 72px; }
.split__main { flex: 7 1 480px; min-width: 0; }
.split__side { flex: 5 1 340px; min-width: 0; }

/* ---------- Appel à l'action ---------- */

.cta-wrap { margin-top: clamp(24px, 4vw, 56px); }
.cta {
  display: flex; align-items: center;
  min-height: clamp(480px, 44vw, 620px);
  padding-block: clamp(120px, 12vw, 180px) clamp(56px, 6vw, 96px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
}
.cta::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(17, 18, 20, 0), var(--encre)); }
.cta .liquid__img { object-position: 30% 50%; }
.cta > .wrap { position: relative; }
.cta__panel { max-width: 720px; padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 20px; }
.cta__title { margin: 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(40px, 6vw, 88px); letter-spacing: -0.03em; line-height: 1; }
.cta__lead { margin: 0; font-size: 17px; color: var(--brume); }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; font-size: 17px; }
.cta__row a:not(.btn) { color: var(--papier); text-underline-offset: 4px; overflow-wrap: anywhere; }
.cta-wrap + .site-footer, .cta-wrap ~ .site-footer { margin-top: 0; }

/* ---------- Pied de page ---------- */

.site-footer { padding-block: clamp(56px, 7vw, 96px) 28px; background: var(--encre); color: var(--clair); }
.site-footer a { color: var(--clair); text-decoration: none; }
.site-footer a:hover { color: var(--glace); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.site-footer :focus-visible { outline-color: var(--glace); }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.footer-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 64px; padding-bottom: clamp(40px, 5vw, 64px); }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.footer-brand .logo, .footer-brand .logo:hover { color: var(--clair); text-decoration: none; font-size: clamp(52px, 6vw, 84px); line-height: .82; }
.footer-brand .logo .dot { background: var(--glace); }
.footer-brand p { margin: 0; max-width: 36ch; font-size: 17px; line-height: 1.5; color: var(--clair-2); }
.footer-contact { display: flex; flex-direction: column; gap: 12px; }
.footer-contact li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.footer-contact span { font-size: 13px; color: var(--clair-3); }
.footer-contact a { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.site-footer .btn--papier { color: var(--encre); }
.site-footer .btn--papier:hover { color: var(--encre); background: var(--glace); text-decoration: none; }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; min-width: 0; }
.footer-title { margin: 0 0 12px; font-family: var(--f-text); font-stretch: 100%; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--clair-3); }
.footer-col { min-width: 0; }
.footer-col ul { display: flex; flex-direction: column; }
.footer-col a { display: inline-block; padding-block: 7px; font-size: 16px; line-height: 1.3; }
.footer-note { margin: 12px 0 0; font-size: 14px; color: var(--clair-3); }
.footer-zones { padding-block: clamp(32px, 4vw, 48px); border-top: 1px solid #2B2D30; }
.footer-zones__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.footer-zones__head .footer-title { margin: 0; }
.footer-zones__head a { font-size: 14px; color: var(--clair-2); text-decoration: underline; text-underline-offset: 4px; }
.footer-zones__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
.footer-zone { min-width: 0; }
.footer-zone h3 { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: #8A8C8F; }
.footer-zone ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
.footer-zone a { display: inline-block; padding-block: 5px; font-size: 15px; color: var(--clair-2); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding-top: 24px; border-top: 1px solid #2B2D30; font-size: 14px; color: var(--clair-3); }
.footer-base .mono { font-size: 12.5px; }
@media (max-width: 1000px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-zones__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer-col--legal { grid-column: 1 / -1; }
  .footer-zones__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .footer-base { flex-direction: column; }
}

/* Liste à puces carrées (le point du logo) */
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ticks li { position: relative; padding-left: 22px; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: var(--cobalt); }
.glass .ticks li::before, .ink .ticks li::before { background: var(--glace); }

/* ---------- Page projets ---------- */

.case { padding-block: var(--section); border-top: 1px solid var(--filet); }
.case:first-of-type { border-top: 0; padding-top: clamp(24px, 3vw, 40px); }
.case__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 56px; margin-bottom: clamp(32px, 4vw, 56px); }
.case__head > div { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.case__head .lead { max-width: 52ch; }
.meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 24px; margin: 0; font-size: 15px; }
.meta dt { color: var(--gris); }
.meta dd { margin: 0; font-weight: 600; }
.case .stage { aspect-ratio: 16 / 9; }
.case__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; margin-top: clamp(40px, 5vw, 72px); }
.case__body > div { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.case__body p { margin: 0; color: var(--texte); }
.case__body h3 { margin: 0; font-size: 14px; font-weight: 500; color: var(--gris); }
.stack { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; font-family: var(--f-mono); font-size: 13px; }
.stack li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--filet); }
.stack li span:last-child { color: var(--gris); text-align: right; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery figure { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gallery img { width: 100%; height: auto; border: 1px solid var(--filet); }
.gallery figcaption { font-size: 14px; color: var(--gris); }
@media (max-width: 980px) { .case__body { grid-template-columns: 1fr; } .gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gallery, .gallery--3 { grid-template-columns: 1fr; } }

/* ---------- Page offres ---------- */

.note { font-size: 14px; color: var(--gris); max-width: 72ch; }

/* FAQ */
.faq { border-top: 1px solid var(--encre); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  min-height: 64px; padding-block: 16px; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 600; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 12px; height: 12px;
  background: linear-gradient(var(--encre), var(--encre)) center / 12px 2px no-repeat,
              linear-gradient(var(--encre), var(--encre)) center / 2px 12px no-repeat;
  transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--cobalt); }
.faq .faq__a { padding: 0 0 24px; max-width: 70ch; color: var(--texte); }
.faq .faq__a p { margin: 0 0 .8em; }
.faq .faq__a p:last-child { margin: 0; }

/* ---------- Page hébergement ---------- */

.term {
  background: var(--encre); color: var(--clair);
  font-family: var(--f-mono); font-size: 13.5px; line-height: 1.75;
  overflow-x: auto;
}
.term__bar { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid #2B2D30; color: var(--clair-3); font-size: 12.5px; }
.term pre { margin: 0; padding: 20px; font: inherit; white-space: pre; }
.term .t-time { color: var(--clair-3); }
.term .t-ok { color: var(--glace); }
.term .t-dim { color: #8A8C8F; }
.term .t-cur { display: inline-block; width: .6em; height: 1.1em; vertical-align: -0.2em; background: var(--glace); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.ink { background: var(--encre); color: var(--clair); }
.ink .eyebrow, .ink .muted { color: var(--clair-3); }
.ink p { color: var(--clair-2); }
.infra-box { padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px 64px; align-items: start; }
.infra-box .price { color: var(--clair-3); font-size: 16px; }
.infra-box .price b { color: var(--clair); font-size: clamp(48px, 5vw, 72px); letter-spacing: -0.03em; }
.infra-box .btn--papier:hover { background: var(--glace); }
@media (max-width: 860px) { .infra-box { grid-template-columns: 1fr; } }

/* ---------- Page agence ---------- */

.rows-crenage { display: flex; flex-direction: column; gap: 4px; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(30px, 4.2vw, 58px); line-height: 1.05; white-space: nowrap; }
.rows-crenage > span:nth-child(1) { letter-spacing: 0.32em; color: #B4B6B2; }
.rows-crenage > span:nth-child(2) { letter-spacing: 0.12em; color: #8A8C8F; }
.rows-crenage > span:nth-child(3) { letter-spacing: -0.02em; color: var(--encre); }
.rows-crenage small { display: block; margin-top: 12px; font-family: var(--f-mono); font-stretch: 100%; font-weight: 400; font-size: 12.5px; letter-spacing: 0; color: var(--gris); white-space: normal; }

.tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tools li { padding: 8px 12px; border: 1px solid var(--filet); font-family: var(--f-mono); font-size: 13px; }

/* ---------- Page contact ---------- */

.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 64px; align-items: start; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }

.form { display: flex; flex-direction: column; gap: 28px; }
.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form legend, .form label.lbl { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.form .opt { font-weight: 400; color: var(--gris); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1px solid var(--encre); border-radius: 0; background: #FBFBF9; color: var(--encre);
  font: 400 17px/1.4 var(--f-text);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 168px; resize: vertical; }
.select {
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 2px var(--cobalt); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 1px #B3261E; }
.err { display: block; margin-top: 8px; font-size: 14px; color: #B3261E; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--filet); background: #FBFBF9; font-size: 15px; font-weight: 500;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.choice input:hover + span { border-color: var(--encre); }
.choice input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.choice input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form__foot .note { margin: 0; flex: 1 1 260px; }
.btn[disabled] { opacity: .6; cursor: progress; }

.panel { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 16px; }
.panel--ok { background: var(--encre); color: var(--clair); }
.panel--ok p { margin: 0; color: var(--clair-2); }
.panel--warn { border: 1px solid var(--encre); }
.panel--warn p { margin: 0; color: var(--texte); }
.panel pre { margin: 0; padding: 16px; max-height: 240px; overflow: auto; background: #FBFBF9; border: 1px solid var(--filet); font: 13px/1.6 var(--f-mono); white-space: pre-wrap; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.copy-row .mono { font-size: 14px; user-select: all; }

.aside { display: flex; flex-direction: column; gap: 16px; }
.aside__card { min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; }
.aside__card .liquid__img { object-position: 60% 40%; }
.aside__card .glass { margin: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.aside__card dl { margin: 0; display: grid; gap: 12px; }
.aside__card dt { font-size: 13px; color: var(--brume); }
.aside__card dd { margin: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.aside__card a { color: var(--papier); }
.next { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; counter-reset: next; }
.next li { counter-increment: next; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.next li::before { content: counter(next); font-family: var(--f-mono); font-size: 13px; color: var(--cobalt); grid-row: span 2; padding-top: 2px; }
.next b { font-size: 16px; }
.next span { font-size: 15px; color: var(--texte); }

/* ---------- Mentions légales ---------- */

.legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 32px 72px; }
.legal__nav { position: sticky; top: 104px; align-self: start; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.legal__nav a { text-decoration: none; color: var(--texte); }
.legal__nav a:hover { color: var(--cobalt); }
.legal section { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--filet); }
.legal section:last-child { border-bottom: 0; }
.legal h2 { margin: 0 0 16px; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.02em; line-height: 1.1; }
.legal p, .legal li { color: var(--texte); max-width: 70ch; }
.legal ul { padding-left: 20px; }
@media (max-width: 860px) { .legal { grid-template-columns: 1fr; } .legal__nav { position: static; } }

/* ---------- 404 ---------- */

.lost { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: var(--gutter); }
.lost .glass { max-width: 720px; padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 24px; }

/* ---------- Crénage animé (titres) ---------- */
.kt.is-kerning { white-space: nowrap; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .drift, .term .t-cur { animation: none; }
  .shot, .btn, .liquid__gl { transition: none; }
  .proj:hover .shot, .stage:hover .shot { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Utilitaires ---------- */
.mt-s { margin-top: 12px; margin-bottom: 0; }
.mt-m { margin-top: 20px; margin-bottom: 0; }
.mt-l { margin-top: 28px; margin-bottom: 0; }
.mb-m { margin-bottom: 24px; }
.pt-s { padding-top: 16px; }
.col { display: flex; flex-direction: column; }
.col--s { gap: 12px; }
.col--m { gap: 20px; }
.col--l { gap: 24px; }
.brume { color: var(--brume); }

.infra-box p { margin: 0; }

.lost__p { margin: 0; font-size: 18px; }

/* ---------- Fil d'Ariane ---------- */
.crumbs { padding-top: clamp(20px, 3vw, 32px); }
.crumbs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: var(--gris); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--filet); }
.crumbs a { color: var(--gris); text-decoration: none; }
.crumbs a:hover { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--encre); }

/* ---------- Liens de villes ---------- */
.city-links { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 32px; }
.city-links li { border-bottom: 1px solid var(--filet); }
.city-links a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; text-decoration: none; font-weight: 600; }
.city-links a span { font-family: var(--f-mono); font-size: 12.5px; font-weight: 400; color: var(--gris); white-space: nowrap; }
.city-links a:hover span { color: var(--cobalt); }

.tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 7px 12px; border: 1px solid var(--filet); font-size: 14px; color: var(--texte); }
.tags a { display: inline-block; padding: 7px 12px; border: 1px solid var(--encre); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .3s var(--ease), color .3s var(--ease); }
.tags a:hover { background: var(--encre); color: var(--papier); }
.tags--links li { padding: 0; border: 0; }

/* ---------- Mini projets (pages ville) ---------- */
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mini { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--encre); }
.mini:hover { color: var(--encre); }
.mini__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; max-width: 100%; }
.mini__img .liquid__img { z-index: 0; }
.mini__img .shot { position: absolute; left: 8%; top: 10%; width: 84%; height: auto; border: 1px solid rgba(17, 18, 20, .12); box-shadow: 0 18px 40px rgba(12, 28, 110, .3); }
.mini:hover .shot { transform: translateY(-6px); }
.mini b { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.mini span { font-size: 15px; color: var(--texte); }
@media (max-width: 640px) { .minis { grid-template-columns: 1fr; } }

/* ---------- Carte des zones ---------- */
.map { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.map svg { width: 100%; height: auto; display: block; background: var(--pierre); }
.map .ring { fill: none; stroke: #C7C9C5; stroke-width: 1; stroke-dasharray: 3 5; }
.map .ring-label { font-family: var(--f-mono); font-size: 11px; fill: #8A8C8F; }

.map .dot-near { fill: var(--cobalt); }
.map .dot-far { fill: var(--papier); stroke: var(--encre); stroke-width: 2; }
.map .dot-home { fill: var(--encre); }
.map .label { font-family: var(--f-text); font-size: 17px; font-weight: 600; fill: var(--encre); paint-order: stroke; stroke: var(--pierre); stroke-width: 4px; stroke-linejoin: round; }
.map .label-km { font-family: var(--f-mono); font-size: 12.5px; fill: var(--gris); paint-order: stroke; stroke: var(--pierre); stroke-width: 4px; }
.map a:hover .label, .map a:focus .label { fill: var(--cobalt); }
.map a:focus { outline: none; }
.map a:focus-visible circle { stroke: var(--cobalt); stroke-width: 4; }
.map figcaption { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--gris); }
.map .key { display: inline-flex; align-items: center; gap: 8px; }
.map .key i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.map .key .k-near { background: var(--cobalt); }
.map .key .k-far { background: var(--papier); border: 2px solid var(--encre); }

/* ---------- Guides ---------- */

.article { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 32px 72px; }
.toc { position: sticky; top: 104px; align-self: start; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.toc a { color: var(--texte); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--cobalt); }
.article__body { max-width: 70ch; }
.article__body h2 { margin: 48px 0 16px; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(24px, 2.3vw, 32px); letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
.article__body h2:first-child { margin-top: 0; }
.article__body h3 { margin: 28px 0 10px; font-size: 19px; font-weight: 700; }
.article__body p, .article__body li { color: var(--texte); }
.article__body p { margin: 0 0 1em; }
.article__body ul, .article__body ol { margin: 0 0 1.2em; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.article__body ul { list-style: none; padding-left: 0; }
.article__body ul li { position: relative; padding-left: 22px; }
.article__body ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--cobalt); }
.article__body strong { color: var(--encre); }
.article__body a { color: var(--cobalt); text-underline-offset: 3px; }
.callout { margin: 24px 0; padding: 20px 24px; background: var(--pierre); border-left: 3px solid var(--cobalt); }
.callout p:last-child { margin-bottom: 0; }
.table-wrap { position: relative; overflow-x: auto; margin: 0 0 1.4em; }
.table { width: 100%; border-collapse: collapse; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
.table th { font-size: 13px; font-weight: 500; color: var(--gris); border-bottom-color: var(--encre); }
.table td:last-child, .table th:last-child { padding-right: 0; }
@media (max-width: 860px) { .article { grid-template-columns: 1fr; } .toc { position: static; padding: 20px; background: var(--pierre); } }

/* ---------- Liens vers les services ---------- */

.svc-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-size: 15px; }
.svc-links a { font-weight: 600; color: var(--encre); text-underline-offset: 4px; }
.svc-links a:hover { color: var(--cobalt); }

/* ---------- Fondateurs ---------- */
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.founder { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.founder__card { aspect-ratio: 4 / 3; max-width: 100%; display: flex; align-items: flex-end; padding: 20px; margin-bottom: 6px; }
.founder__mono { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(64px, 8vw, 120px); line-height: .8; letter-spacing: -0.02em; color: var(--papier); }
.founder__name { margin: 0; font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.015em; line-height: 1.15; }
.founder__role { font-size: 14px; color: var(--gris); }
.founder p { margin: 6px 0 0; color: var(--texte); max-width: 52ch; }
.founders--compact { gap: 16px; }
.founders--compact .founder__card { aspect-ratio: 1 / 1; }
.founders--compact .founder__mono { font-size: clamp(56px, 6vw, 88px); }
.founders--compact .founder__name { font-size: 18px; }
@media (max-width: 640px) { .founders { grid-template-columns: minmax(0, 1fr); } .founders--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .founders--compact .founder__name { font-size: 16px; } }

/* ---------- Accueil : formules ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { position: relative; min-width: 0; padding: clamp(24px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.plan p { margin: 0; font-size: 16px; line-height: 1.5; }
.plan .ticks { font-size: 15px; gap: 8px; }
.plan .btn { align-self: flex-start; margin-top: 4px; }
.plan__tag { font-size: 13px; font-weight: 600; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid currentColor; font-size: 14px; }
.plan__price b { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: 28px; letter-spacing: -0.02em; }
.plan--line { border: 1px solid var(--encre); }
.plan--line p, .plan--line .ticks { color: var(--texte); }
.plan--line .plan__tag, .plan--line .plan__price span:last-child { color: var(--gris); }
.plan--line .plan__price { border-top-color: var(--filet); }
.plan--ink { background: var(--encre); color: var(--clair); }
.plan--ink p, .plan--ink .ticks { color: var(--clair-2); }
.plan--ink .plan__tag, .plan--ink .plan__price span:last-child { color: var(--clair-3); }
.plan--ink .plan__price { border-top-color: #2B2D30; }
.plan--feature { padding: 0; background: var(--cobalt); display: flex; }
.plan--feature .liquid__img { object-position: 50% 50%; }
.plan__panel { margin: 14px; padding: clamp(20px, 2.2vw, 28px); flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; }
.plan__panel .plan__tag, .plan__panel .plan__price span:last-child { color: var(--brume); }
.plan__panel .plan__price { border-top-color: var(--verre-filet); }
.monthly { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; border: 1px solid var(--encre); }
.monthly__item { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 24px; text-decoration: none; color: var(--encre); transition: background-color .35s var(--ease), color .35s var(--ease); min-width: 0; }
.monthly__item + .monthly__item { border-left: 1px solid var(--encre); }
.monthly__item > span:first-child { font-size: 15px; color: var(--texte); }
.monthly__item b { display: block; font-size: 18px; color: var(--encre); margin-bottom: 2px; }
.monthly__price { white-space: nowrap; font-size: 14px; }
.monthly__price b { display: inline; font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.monthly__item:hover { background: var(--encre); color: var(--papier); }
.monthly__item:hover > span:first-child, .monthly__item:hover b { color: var(--papier); }
@media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); } .plan { min-height: 0; } }
@media (max-width: 700px) {
  .monthly { grid-template-columns: minmax(0, 1fr); }
  .monthly__item + .monthly__item { border-left: 0; border-top: 1px solid var(--encre); }
  .monthly__item { flex-direction: column; align-items: flex-start; }
}

/* ---------- Hébergement : deux abonnements ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.infra-box--single { grid-template-columns: minmax(0, 1fr); }
.duo .ticks { margin-top: 4px; }
.duo__feature { display: flex; background: var(--cobalt); min-width: 0; }
.duo__feature .liquid__img { object-position: 50% 50%; }
.duo__panel { margin: 16px; padding: clamp(24px, 3vw, 40px); flex: 1 1 auto; }
.duo__panel .price { font-size: 16px; color: var(--brume); }
.duo .h2 { font-size: clamp(28px, 2.8vw, 40px); }
@media (max-width: 860px) { .duo { grid-template-columns: minmax(0, 1fr); } }

.spacer { height: var(--section); }

/* ======================================================================
   Pages intérieures : composants (en-tête liquide, cartes, chiffres, frise…)
   ====================================================================== */

/* ---------- Icônes ---------- */
.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }

/* ---------- En-tête de page sur matière liquide ---------- */
.ih { position: relative; }
.ih__frame {
  display: flex; align-items: flex-end;
  min-height: clamp(600px, 52vw, 780px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 190px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 190px), transparent 100%);
}
.ih__frame .liquid__img { object-position: 50% 45%; }
.ih__shade { background: linear-gradient(90deg, rgba(14, 15, 18, .74) 0%, rgba(14, 15, 18, .46) 46%, rgba(14, 15, 18, .16) 100%); }
.ih__body {
  position: relative; width: 100%;
  padding-block: clamp(80px, 7vw, 104px) clamp(150px, 12vw, 190px);
  display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px);
}
.ih__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 40px clamp(40px, 5vw, 96px); align-items: end; }
.ih__grid--solo { grid-template-columns: minmax(0, 1fr); }
.ih__main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ih__eyebrow { font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--brume); }
.ih .h1 { font-size: clamp(40px, 5.4vw, 84px); max-width: 15ch; }
.ih--long .h1 { font-size: clamp(34px, 4.1vw, 62px); max-width: 21ch; }
.ih__lead { margin: 0; max-width: 58ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: #E7E9F1; }
.ih__side { min-width: 0; }
.ih__card { padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 14px; }
.ih__card-t { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brume); }
.ih__shot { width: 100%; height: auto; border: 1px solid var(--verre-filet); }
.ih__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 600; color: var(--papier); text-decoration: none; }
.ih__more:hover { color: var(--glace); }
.ih__more .ico { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.ih__more:hover .ico { transform: translateX(4px); }
.kv { margin: 0; display: flex; flex-direction: column; }
.kv > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--verre-filet); }
.kv dt { font-size: 14px; color: var(--brume); }
.kv dd { margin: 0; font-size: 16px; font-weight: 600; text-align: right; }
.ih__trust { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ih__trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--papier); }
.ih__trust .ico { width: 18px; height: 18px; color: var(--glace); stroke-width: 2.4; }
.ih .crumbs { padding: 0; }
.ih .crumbs ol, .ih .crumbs a { color: var(--brume); }
.ih .crumbs a:hover { color: var(--papier); }
.ih .crumbs [aria-current] { color: var(--papier); }
.ih .crumbs li + li::before { color: rgba(243, 243, 240, .4); }
.ih--compact .ih__frame { min-height: clamp(480px, 40vw, 600px); }
.ih + .section, .ih + .case, .ih + .stone > .section:first-child { padding-top: clamp(16px, 2.4vw, 40px); }
.ih--compact .ih__body { padding-bottom: clamp(160px, 13vw, 200px); }
@media (max-width: 1000px) {
  .ih__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ih__side { width: 100%; max-width: 560px; }
}
@media (max-width: 700px) {
  .ih__shade { background: linear-gradient(0deg, rgba(14, 15, 18, .74) 0%, rgba(14, 15, 18, .5) 55%, rgba(14, 15, 18, .34) 100%); }
  .ih__body { padding-block: 64px 150px; gap: 24px; }
  .ih__main { gap: 18px; }
  .ih .btn-row { width: 100%; }
  .ih .btn-row .btn { flex: 1 1 auto; }
  .kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .kv > div { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0; }
  .kv dd { text-align: left; font-size: 15px; }
  .ih__trust { gap: 8px 18px; }
  .ih__trust li { font-size: 14px; }
  .ih--guide .ih__side { display: none; }
}

/* ---------- Fond pierre pour alterner les sections ---------- */
.stone { background: var(--pierre); }
.stone .card, .stone .cmp-wrap { background: #FBFBF9; }

/* ---------- Cartes cliquables et panneaux de points ---------- */
/* Pastille d'icône : carré arrondi teinté, l'icône en cobalt */
.card__ico {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 14px; color: var(--cobalt);
  background: linear-gradient(150deg, #F1F3FF 0%, #DEE4FB 100%);
  box-shadow: inset 0 0 0 1px rgba(35, 64, 216, .10);
}
.card__ico .ico { width: 22px; height: 22px; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: clamp(24px, 2.4vw, 30px);
  background: #FFFFFF; color: var(--encre);
  border: 1px solid var(--trait); border-radius: var(--r-m);
  box-shadow: var(--ombre);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
a.card { text-decoration: none; }
a.card:hover { color: var(--encre); border-color: rgba(35, 64, 216, .35); transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.card__ico + .card__t { margin-top: 6px; }
.card__t { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; }
.card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--texte); }
.card__meta { margin-top: auto; padding: 6px 12px; border-radius: 999px; background: var(--pierre); font-family: var(--f-mono); font-size: 12px; color: var(--texte); }
.card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 600; color: var(--cobalt); }
.card__meta + .card__go { margin-top: 0; }
.card__go .ico { width: 18px; height: 18px; transition: transform .35s var(--ease); }
a.card:hover .card__go .ico, a.mini:hover .card__go .ico, a.gcard:hover .card__go .ico { transform: translateX(4px); }
.card--ink { background: var(--encre); border-color: var(--encre); color: var(--clair); box-shadow: 0 18px 44px rgba(14, 15, 18, .22); }
.card--ink p { color: var(--clair-2); }
.card--ink .card__ico, .gcard--big .card__ico { background: rgba(159, 176, 255, .14); color: var(--glace); box-shadow: inset 0 0 0 1px rgba(159, 176, 255, .22); }
.card--ink .card__meta { background: rgba(243, 243, 240, .08); color: var(--clair-2); }
.card--ink .card__go { color: var(--glace); }
a.card--ink:hover { color: var(--clair); border-color: var(--cobalt); }
.cards--compact .card { gap: 8px; padding: 22px 24px; }
.cards--compact .card__ico { width: 40px; height: 40px; border-radius: 12px; }
.cards--compact .card__ico .ico { width: 20px; height: 20px; }
.cards--compact .card__t { font-size: 17px; }
.cards--compact .card p { font-size: 14.5px; }
@media (max-width: 1100px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards, .cards--4, .cards--2 { grid-template-columns: minmax(0, 1fr); } .card { padding: 22px; } }

/* Points d'information : un seul panneau, de fins filets entre les points */
.points {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--trait); border: 1px solid var(--trait); border-radius: var(--r-l); overflow: hidden;
  box-shadow: var(--ombre);
}
.points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.points--1 { grid-template-columns: minmax(0, 1fr); }
.point { min-width: 0; display: flex; gap: 18px; align-items: flex-start; padding: clamp(24px, 2.8vw, 36px); background: #FFFFFF; }
.point__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.point__t { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.point p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--texte); }
.point__meta { margin-top: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--gris); }
@media (max-width: 900px) { .points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .points, .points--2 { grid-template-columns: minmax(0, 1fr); }
  .point { padding: 22px; gap: 16px; }
  .point .card__ico { width: 42px; height: 42px; border-radius: 12px; }
}
/* Trois points sur deux colonnes : le dernier prend toute la largeur */
@media (max-width: 900px) and (min-width: 641px) { .points:not(.points--2) .point:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---------- Chiffres en matière liquide ---------- */
.figs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--encre); }
.figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fig { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 28px) 0 0; }
.fig + .fig { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--filet); }
.fig__n {
  font-family: var(--f-display); font-stretch: 125%; font-weight: 800;
  font-size: clamp(56px, 7vw, 116px); line-height: .86; letter-spacing: -0.035em; white-space: nowrap;
  color: var(--cobalt);
}
.fig__n small { font-size: .38em; letter-spacing: -0.01em; margin-left: .08em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fig__n {
    background: url('../img/band-projets.webp') 20% 50% / 320% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .fig:nth-child(2) .fig__n { background-position: 48% 30%; }
  .fig:nth-child(3) .fig__n { background-position: 72% 60%; }
  .fig:nth-child(4) .fig__n { background-position: 96% 40%; }
}
@media (prefers-reduced-motion: no-preference) { .fig__n { animation: liquidText 36s ease-in-out infinite alternate; } }
.fig > span { max-width: 26ch; font-size: 16px; line-height: 1.45; color: var(--texte); }
@media (max-width: 860px) {
  .figs, .figs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig:nth-child(odd) { padding-left: 0; border-left: 0; }
  .fig:nth-child(n+3) { margin-top: 28px; border-top: 1px solid var(--filet); }
}

/* ---------- Frise des étapes ---------- */
.tl { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tl li {
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 24px 22px 22px; background: #FFFFFF; border: 1px solid var(--trait); border-radius: var(--r-m); box-shadow: var(--ombre);
}
.tl li:not(:last-child)::after {
  content: ""; position: absolute; top: 44px; right: -12px; z-index: 1; width: 8px; height: 8px;
  border-top: 2px solid var(--cobalt); border-right: 2px solid var(--cobalt); transform: rotate(45deg);
}
.tl__n {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 14px;
  background: linear-gradient(150deg, #F1F3FF 0%, #DEE4FB 100%); box-shadow: inset 0 0 0 1px rgba(35, 64, 216, .10);
  font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; color: var(--cobalt);
}
.tl__t { font-size: 18px; line-height: 1.25; }
.tl__p { font-size: 15px; line-height: 1.55; color: var(--texte); }
.tl__chip { margin-top: auto; padding: 6px 12px; border-radius: 999px; background: var(--pierre); font-size: 12.5px; font-weight: 600; color: var(--encre); }
@media (max-width: 1100px) { .tl { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tl li:nth-child(3)::after { display: none; } }
@media (max-width: 700px) {
  .tl { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tl li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 16px; padding: 20px; }
  .tl__n { grid-row: span 3; margin: 0; }
  .tl__chip { justify-self: start; margin-top: 6px; }
  .tl li:not(:last-child)::after { display: none; }
}

/* ---------- Questions fréquentes + carte « une autre question » ---------- */
.faqx { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.faqx__side { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 32px; }
.ask { display: flex; align-items: flex-end; min-height: 300px; }
.ask .liquid__img { object-position: 30% 50%; }
.ask__panel { margin: 14px; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ask__t { font-size: 20px; line-height: 1.2; }
.ask__panel p { margin: 0; font-size: 15.5px; line-height: 1.5; color: #E7E9F1; }
.faqx .faq summary { font-size: 18px; }
@media (max-width: 860px) {
  .faqx { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faqx__side { display: contents; }
  .faqx__side .h2 { order: 1; }
  .faqx > .faq { order: 2; }
  .ask { order: 3; min-height: 240px; }
}

/* ---------- Relance au milieu de la page ---------- */
.nudge-wrap { padding-block: clamp(16px, 2vw, 32px); }
.nudge { display: flex; align-items: center; min-height: 280px; padding: clamp(14px, 1.6vw, 20px); }
.nudge .liquid__img { object-position: 60% 40%; }
.nudge__in { width: 100%; max-width: 980px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(24px, 3vw, 40px); }
.nudge__text { flex: 1 1 360px; display: flex; flex-direction: column; gap: 10px; }
.nudge__t { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(24px, 2.5vw, 36px); letter-spacing: -0.02em; line-height: 1.08; }
.nudge__text p { margin: 0; max-width: 56ch; color: #E7E9F1; }
@media (max-width: 640px) { .nudge .btn-row, .nudge .btn { width: 100%; } }

/* ---------- Les deux interlocuteurs ---------- */
.who { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(24px, 2.6vw, 32px); background: #FBFBF9; border: 1px solid var(--filet); }
.who__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; width: 100%; }
.who__list li { display: flex; align-items: center; gap: 14px; }
.who__list b { display: block; font-size: 17px; line-height: 1.3; }
.who__list li > span:last-child > span { font-size: 14px; color: var(--gris); }
.who p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--texte); }
.av { width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.av > span { position: relative; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 22px; line-height: 1; color: var(--papier); }
.av .liquid__img { z-index: 0; }
.av > span { z-index: 1; }

/* ---------- Puces cochées ---------- */
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.checks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; line-height: 1.5; color: var(--texte); }
.checks .ico { width: 28px; height: 28px; padding: 5px; background: var(--cobalt); color: var(--papier); stroke-width: 2.6; }
.checks--card, .checks-box { padding: clamp(24px, 3vw, 40px); background: #FBFBF9; border: 1px solid var(--filet); }
.checks-box { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.incl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 5vw, 80px); align-items: start; }
.incl__head { display: flex; flex-direction: column; gap: 28px; }
.incl .h2 { font-size: clamp(30px, 3vw, 44px); }
.price-panel { display: flex; min-height: 300px; }
.price-panel__in { margin: 14px; padding: 24px; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; }
.price-panel .price { font-size: 16px; color: var(--brume); }
.price-panel .price b { color: var(--papier); font-size: clamp(36px, 3.6vw, 48px); }
.price-panel .btn { margin-top: 8px; }
@media (max-width: 900px) { .incl { grid-template-columns: minmax(0, 1fr); } }

.note-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: clamp(24px, 3vw, 40px); background: #FBFBF9; border: 1px solid var(--filet); }
.split--center { align-items: center; }

/* ---------- Formule conseillée (pages services) ---------- */
.offer-wide { display: flex; min-height: 320px; padding: clamp(14px, 1.6vw, 20px); }
.offer-wide__in { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; padding: clamp(24px, 3.4vw, 48px); }
.offer-wide__text { flex: 1 1 420px; display: flex; flex-direction: column; gap: 14px; }
.offer-wide__text p { margin: 0; max-width: 56ch; color: #E7E9F1; }
.offer-wide__end { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.offer-wide .price { font-size: 16px; color: var(--brume); }
.offer-wide .price b { color: var(--papier); font-size: clamp(40px, 4.4vw, 60px); }

/* ---------- Offres : formules complètes, sur mesure, comparatif ---------- */
.plans--full .plan { gap: 16px; }
.plans--full .plan .ticks { font-size: 15.5px; gap: 9px; }
.plans--full .plan .btn { align-self: stretch; }
.plan__facts { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.plan__facts b { font-weight: 700; }
.plan--line .plan__facts { color: var(--gris); }
.plan--line .plan__facts b { color: var(--encre); }
.plan--ink .plan__facts, .plan__panel .plan__facts { color: var(--clair-3); }
.plan--ink .plan__facts b, .plan__panel .plan__facts b { color: var(--papier); }
.plans--full .plan__price b { font-size: 34px; }
.plans--full .plan__price span:last-child { color: inherit; }
.wide { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; gap: 24px 48px; align-items: center; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--encre); }
.wide__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.wide__head p { margin: 0; color: var(--texte); }
.wide__list { font-size: 15.5px; }
.wide__end { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.wide__end .price b { font-size: 30px; }
@media (max-width: 960px) { .wide { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.cmp-wrap { position: relative; margin: 0; background: #FBFBF9; border: 1px solid var(--filet); }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.cmp th, .cmp td { padding: 15px 20px; border-bottom: 1px solid var(--filet); text-align: center; vertical-align: middle; }
.cmp tbody th { text-align: left; font-weight: 500; color: var(--texte); }
.cmp thead th { padding-block: 26px 20px; vertical-align: bottom; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; }
.cmp thead th span { display: block; margin-top: 6px; font-family: var(--f-text); font-stretch: 100%; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--gris); }
.cmp thead th.is-hl span { color: var(--cobalt); }
.cmp .is-hl { background: #E9ECFA; }
.cmp thead .is-hl { box-shadow: inset 0 3px 0 var(--cobalt); }
.cmp tbody tr:first-child td { font-weight: 700; color: var(--encre); }
.cmp tbody tr:hover th, .cmp tbody tr:hover td { background-color: #F1F2F6; }
.cmp tbody tr:hover td.is-hl { background-color: #DFE4F8; }
.cmp tfoot td { padding-block: 22px 26px; border-bottom: 0; }
.cmp .yes { display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--cobalt); color: var(--papier); vertical-align: middle; }
.cmp .yes .ico { width: 17px; height: 17px; stroke-width: 2.6; }
.cmp .no { color: var(--clair-3); }
@media (max-width: 800px) {
  .cmp tbody th, .cmp thead td, .cmp tfoot td:first-child { position: sticky; left: 0; z-index: 1; background: #FBFBF9; box-shadow: 1px 0 0 var(--filet); }
  .cmp tbody th { min-width: 170px; }
}

/* ---------- Guides : cartes en texte seul ---------- */
.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gcards--1 { grid-template-columns: minmax(0, 1fr); }
.gcard {
  min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: clamp(24px, 2.4vw, 30px);
  background: #FFFFFF; color: var(--encre); text-decoration: none;
  border: 1px solid var(--trait); border-radius: var(--r-m); box-shadow: var(--ombre);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.gcard:hover { color: var(--encre); border-color: rgba(35, 64, 216, .35); transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.gcard__top { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 6px; }
.gcard__tag { padding: 6px 12px; border-radius: 999px; background: var(--pierre); font-size: 13px; font-weight: 600; color: var(--texte); }
.gcard__n { margin-left: auto; font-family: var(--f-mono); font-size: 13px; color: var(--gris); }
.gcard__t { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: 21px; letter-spacing: -0.015em; line-height: 1.2; }
.gcard__p { font-size: 15.5px; line-height: 1.55; color: var(--texte); }
.gcard .card__go { margin-top: auto; }
.gcard--big { grid-column: span 2; padding: clamp(28px, 3.4vw, 44px); background: var(--encre); border-color: var(--encre); color: var(--clair); box-shadow: 0 18px 44px rgba(14, 15, 18, .22); }
.gcard--big:hover { color: var(--clair); border-color: var(--cobalt); }
.gcard--big .gcard__top { padding-bottom: 12px; }
.gcard--big .gcard__tag { background: rgba(243, 243, 240, .08); color: var(--clair-2); }
.gcard--big .gcard__n { color: var(--clair-3); }
.gcard--big .gcard__t { font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.025em; max-width: 18ch; }
.gcard--big .gcard__p { max-width: 52ch; font-size: 17px; color: var(--clair-2); }
.gcard--big .card__go { margin-top: 8px; color: var(--glace); }
@media (max-width: 960px) { .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gcards, .gcards--2 { grid-template-columns: minmax(0, 1fr); } .gcard--big { grid-column: auto; } }

/* ---------- Article : sommaire et relance, auteurs ---------- */
.article__side { position: sticky; top: 104px; align-self: start; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.article__side .toc { position: static; }
.side-cta { display: flex; align-items: flex-end; min-height: 240px; }
.side-cta__in { margin: 12px; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.side-cta__in b { font-size: 18px; }
.side-cta__in p { margin: 0; font-size: 15px; color: #E7E9F1; }
.author { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; padding: 24px; background: #FBFBF9; border: 1px solid var(--filet); }
.author > div { flex: 1 1 280px; min-width: 0; }
.author__avs { display: flex; }
.author__avs .av + .av { margin-left: -8px; }
.author b { display: block; font-size: 18px; color: var(--encre); }
.article__body .author p { margin: 6px 0 12px; font-size: 15.5px; }
@media (max-width: 860px) { .article__side { position: static; } .side-cta { display: none; } }

/* ---------- Carte des pages ville ---------- */
.zone-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(40px, 5vw, 80px); align-items: start; }
.cmap { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cmap svg { width: 100%; height: auto; background: var(--pierre); }
.cmap .ring { fill: none; stroke: #C2C4C0; stroke-width: 1.2; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.cmap .ring-label { font-family: var(--f-mono); fill: #8A8C8F; }
.cmap .region { font-family: var(--f-mono); letter-spacing: .24em; fill: #9A9C9F; }
.cmap .dot-other { fill: #A9ABAE; }
.cmap .label-other { font-family: var(--f-text); font-weight: 500; fill: #6E7074; paint-order: stroke; stroke: var(--pierre); stroke-linejoin: round; }
.cmap .dot-home { fill: var(--encre); }
.cmap .dot-city { fill: var(--cobalt); }
.cmap .halo { fill: rgba(35, 64, 216, .14); stroke: var(--cobalt); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cmap .trip { fill: none; stroke: var(--cobalt); stroke-width: 2.5; stroke-dasharray: 8 7; vector-effect: non-scaling-stroke; }
.cmap .label { font-family: var(--f-text); font-weight: 600; fill: var(--encre); paint-order: stroke; stroke: var(--pierre); stroke-linejoin: round; }
.cmap .label--big { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; }
.cmap .label-km { font-family: var(--f-mono); fill: var(--cobalt); paint-order: stroke; stroke: var(--pierre); stroke-linejoin: round; }
.cmap figcaption { font-size: 14px; color: var(--gris); }
@media (prefers-reduced-motion: no-preference) {
  .cmap .trip { animation: trip 1.6s linear infinite; }
  @keyframes trip { to { stroke-dashoffset: -30; } }
}
@media (max-width: 900px) { .zone-grid { grid-template-columns: minmax(0, 1fr); } .cmap { max-width: 560px; } }

.mini .card__go { margin-top: 0; }
.chips { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 10px; background: var(--pierre); font-size: 13px; font-weight: 600; color: var(--encre); }

/* ---------- Agence : citation sur matière ---------- */
.quote { margin: 0; display: flex; align-items: flex-end; min-height: 420px; }
.quote__in { margin: 16px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 16px; }
.quote__in p { margin: 0; font-family: var(--f-display); font-stretch: 112%; font-weight: 300; font-style: italic; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; letter-spacing: -0.01em; }
.quote__in footer { font-size: 14px; color: var(--brume); }

/* ---------- Projets : blocs en cartes ---------- */
.case__body > div { padding: clamp(24px, 2.6vw, 32px); background: #FBFBF9; border: 1px solid var(--filet); }
.case__ico { width: 44px; height: 44px; display: grid; place-items: center; background: var(--cobalt); color: var(--papier); }
.case__ico .ico { width: 22px; height: 22px; }

/* ---------- Contact : formulaire posé sur la matière ---------- */
.contact-sheet { position: relative; z-index: 2; margin-top: calc(-1 * clamp(120px, 10vw, 160px)); }
.form-card { min-width: 0; padding: clamp(24px, 3.4vw, 48px); background: #FBFBF9; border: 1px solid var(--filet); box-shadow: 0 30px 80px rgba(12, 28, 110, .16); }
.form-card .input, .form-card .select, .form-card .textarea, .form-card .choice span { background: #FFFFFF; }
.form__intro { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.form__intro p { margin: 0; }
.assure { margin: 0; padding: clamp(20px, 2.4vw, 28px); list-style: none; display: flex; flex-direction: column; gap: 18px; background: #FBFBF9; border: 1px solid var(--filet); box-shadow: 0 30px 80px rgba(12, 28, 110, .12); }
.assure li { display: flex; gap: 14px; align-items: flex-start; }
.assure .card__ico { width: 40px; height: 40px; }
.assure .card__ico .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.assure b { display: block; font-size: 16px; }
.assure li > span:last-child { font-size: 15px; color: var(--texte); line-height: 1.45; }
.aside__card { min-height: 260px; }
@media (max-width: 960px) { .contact-sheet { margin-top: -110px; } }

/* ---------- Barre d'action fixe sur téléphone ---------- */
.stick { display: none; }
@media (max-width: 760px) {
  .js .stick {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    display: flex; gap: 8px;
    transform: translateY(calc(100% + 32px)); transition: transform .45s var(--ease);
  }
  .js .stick.is-on { transform: none; }
  .stick .btn { flex: 1 1 auto; min-height: 54px; box-shadow: 0 14px 34px rgba(12, 28, 110, .38); }
  .stick__mail { width: 54px; flex: none; display: grid; place-items: center; background: var(--encre); color: var(--papier); box-shadow: 0 14px 34px rgba(14, 15, 18, .3); }
  .stick__mail:hover { color: var(--glace); }
}

/* ---------- Apparition au défilement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
  .js .rv.is-in { opacity: 1; transform: none; }
  .js a.card.rv.is-in:hover, .js .gcard.rv.is-in:hover { transform: translateY(-4px); }
}

.spacer--s { height: clamp(24px, 3vw, 48px); }

@media (max-width: 700px) {
  .cards.cards--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cards--compact .card { padding: 16px; }
  .cards--compact .card__t { font-size: 16px; }
  .cards--compact .card p { font-size: 14px; }
  .cards--compact .card__ico { width: 36px; height: 36px; }
}

/* ======================================================================
   Formes arrondies : un seul jeu de rayons pour tout le site
   (--r-s boutons et champs, --r-m cartes, --r-l grands panneaux).
   Le point du logo et les puces restent carrés : c'est la signature.
   ====================================================================== */
.btn, .menu-btn, .skip { border-radius: var(--r-s); }
.input, .select, .textarea { border-radius: var(--r-s); border-color: #B9BBBE; }
.input:hover:not(:focus), .select:hover:not(:focus), .textarea:hover:not(:focus) { border-color: var(--gris); }
.choice span, .tags li, .tags a, .tools li, .chips li { border-radius: 999px; }
.choice span { padding: 0 18px; }

.glass { border-radius: var(--r-m); }
.cta__panel, .lost .glass { border-radius: var(--r-l); }
.plan__panel, .duo__panel, .ask__panel, .nudge__in, .price-panel__in, .offer-wide__in, .quote__in, .side-cta__in, .aside__card .glass { border-radius: 16px; }

.plan, .plan--feature, .duo__feature, .infra-box, .nudge, .ask, .price-panel, .offer-wide, .quote, .side-cta, .aside__card,
.stage, .mini__img, .founder__card, .wide, .cmp-wrap, .form-card, .assure, .who, .checks--card, .checks-box, .note-card,
.case__body > div, .author, .term, .monthly, .panel { border-radius: var(--r-l); }
.founder__card { border-radius: var(--r-m); }
.monthly, .term { overflow: hidden; }
.av { border-radius: 14px; }
.shot--desk { border-radius: 10px; }
.ih__shot { border-radius: 12px; }
.gallery img { border-radius: 14px; }
.map svg, .cmap svg { border-radius: var(--r-m); }
.callout { border-radius: 14px; }
@media (max-width: 860px) { .toc { border-radius: var(--r-m); } }

/* Surfaces claires : blanc, filet doux, ombre légère (plutôt qu'un trait noir) */
.plan--line, .wide, .who, .checks--card, .checks-box, .note-card, .case__body > div, .author, .assure, .cmp-wrap {
  background: #FFFFFF; border: 1px solid var(--trait); box-shadow: var(--ombre);
}
.plan--line .plan__price { border-top-color: var(--trait); }
.monthly { border-color: var(--trait); background: #FFFFFF; box-shadow: var(--ombre); }
.monthly__item + .monthly__item { border-left-color: var(--trait); }
@media (max-width: 700px) { .monthly__item + .monthly__item { border-top-color: var(--trait); } }
.form-card { background: #FFFFFF; border-color: var(--trait); }
.stone .card, .stone .cmp-wrap, .stone .points { background-color: #FFFFFF; }
.stone .points { background-color: var(--trait); }

/* Pastilles dans les études de cas : comme les cartes */
.case__ico {
  border-radius: 14px; color: var(--cobalt);
  background: linear-gradient(150deg, #F1F3FF 0%, #DEE4FB 100%); box-shadow: inset 0 0 0 1px rgba(35, 64, 216, .10);
}

/* Coches rondes */
.checks .ico { border-radius: 999px; }
.cmp .yes { border-radius: 999px; }

/* Questions fréquentes : chaque question dans sa carte */
.faq { border-top: 0; display: flex; flex-direction: column; gap: 10px; }
.faq details { background: #FFFFFF; border: 1px solid var(--trait); border-radius: 16px; box-shadow: 0 1px 2px rgba(12, 28, 110, .04); transition: border-color .35s var(--ease), box-shadow .35s var(--ease); }
.faq details[open] { border-color: rgba(35, 64, 216, .3); box-shadow: var(--ombre); }
.faq summary { padding: 16px 20px 16px 24px; min-height: 64px; }
.faq summary::after {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(var(--cobalt), var(--cobalt)) center / 12px 2px no-repeat,
              linear-gradient(var(--cobalt), var(--cobalt)) center / 2px 12px no-repeat, #EEF1FD;
}
.faq .faq__a { padding: 0 24px 22px; }

/* Barre fixe sur téléphone */
@media (max-width: 760px) { .stick .btn, .stick__mail { border-radius: 16px; } }
.stone .card--ink { background-color: var(--encre); }