/* =====================================================================
   NOVOTLY : feuille de style (v4, 21/10/2026)
   Reprise de la finition de nlbstudio.fr (même code de base) : fonds
   minéraux, encre ardoise, un seul accent terre cuite, une seule police
   (Satoshi, auto-hébergée), blocs colorés à motifs, mascotte.
   Téléphone d'abord : la base vise 390 px, les media queries enrichissent.
   Mode sombre automatique selon le réglage de l'appareil.
   ===================================================================== */

/* ----------------------------------------------------------------------
   1. Police (hébergée sur le site : aucune requête vers Google)
   ---------------------------------------------------------------------- */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-v2.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------------
   2. Tokens
   ---------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --bg:          #F6F6F3;   /* fond */
  --bg-soft:     #ECEDE9;   /* fond de section */
  --surface:     #FFFFFF;   /* champs de formulaire, blocs posés */
  --ink:         #1D2427;   /* titres */
  --text:        #3C4448;   /* texte courant */
  --muted:       #5B6468;   /* texte secondaire (AA sur les deux fonds) */
  --line:        #D9DCD6;   /* filets */
  --line-strong: #B9BEB8;
  --accent:      #B5482A;   /* terre cuite : boutons */
  --on-accent:   #FFFFFF;   /* texte sur bouton */
  --accent-text: #93391F;   /* terre cuite : liens et prix */
  --shadow:      rgba(29, 36, 39, 0.16);

  --font: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 1160px;
  --gutter: clamp(1rem, 5vw, 2.5rem);
  --section-y: clamp(4rem, 10vw, 7.5rem);
  --radius: 12px;          /* images et blocs */
  --radius-pill: 999px;    /* boutons */

  --promo-h: 0px;          /* bandeau d'offre (scripts/promo.js) */
  --header-h: 68px;
}

/* thème sombre (choisi par le visiteur) */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:          #161A1C;
    --bg-soft:     #1E2326;
    --surface:     #232A2D;
    --ink:         #EEF0EE;
    --text:        #C9CECC;
    --muted:       #9AA3A6;
    --line:        #2F373B;
    --line-strong: #4A5458;
    --accent:      #E07A55;
    --on-accent:   #161A1C;
    --accent-text: #E58A68;
    --shadow:      rgba(0, 0, 0, 0.45);
  }

/* ----------------------------------------------------------------------
   3. Base
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--promo-h) + var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 420;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--promo-h);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

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

/* ----------------------------------------------------------------------
   4. Typographie
   ---------------------------------------------------------------------- */
h1, h2, h3 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 7.2vw, 4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.8rem, 4.6vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.45rem); letter-spacing: -0.012em; line-height: 1.25; }

p { max-width: 65ch; text-wrap: pretty; }

.lead {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  line-height: 1.55;
  color: var(--text);
}

.section-intro { margin-top: 1rem; color: var(--muted); }

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

/* ----------------------------------------------------------------------
   5. Boutons
   ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 20px -12px var(--accent);
}
.btn--primary:hover { background: var(--accent-text); color: #fff; }
/* thème sombre (choisi par le visiteur) */
:root[data-theme="dark"] .btn--primary:hover { background: var(--accent-text); color: var(--on-accent); }

.btn--quiet {
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.btn--quiet:hover { background: var(--bg-soft); }

/* ----------------------------------------------------------------------
   7. En-tête et navigation
   ---------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: var(--promo-h);
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.brand svg { width: 30px; height: 30px; flex: none; }
/* thème sombre (choisi par le visiteur) */


.nav { display: none; }
.header-cta { display: none; }

@media (min-width: 960px) {
  .nav {
    display: flex;
    gap: 1.6rem;
    margin-left: auto;
  }
  .nav a {
    text-decoration: none;
    font-weight: 500;
    color: var(--text);
    padding-block: 0.4rem;
  }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
  .header-cta { display: inline-flex; min-height: 44px; padding: 0.6rem 1.2rem; }
}

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  margin-right: -10px;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 960px) { .burger { display: none; } }

.mobile-menu {
  position: fixed;
  inset: calc(var(--promo-h) + var(--header-h)) 0 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.5rem var(--gutter) 2rem;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility .2s ease;
}
.mobile-menu.open { visibility: visible; opacity: 1; }
.mobile-menu a:not(.btn) {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.mobile-menu .btn { margin-top: 1.5rem; }
@media (min-width: 960px) { .mobile-menu { display: none; } }

/* ----------------------------------------------------------------------
   8. Tokens v2 : fond chaud, courbe d'animation
   ---------------------------------------------------------------------- */
:root {
  --warm: #F4E6DF;          /* terre cuite très claire : bande engagements, blocs accent */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/* thème sombre (choisi par le visiteur) */
:root[data-theme="dark"] { --warm: #2A2321; }

/* ----------------------------------------------------------------------
   9. Animations (vivantes mais sobres)
   La classe .js est posée dans le <head> : sans JavaScript, tout reste visible.
   ---------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Images : un rideau de la couleur du fond se retire vers le haut + léger dézoom.
   On ne masque jamais l'image elle-même : Chrome ne charge pas une image
   différée (loading="lazy") qu'il juge invisible. */
.js [data-reveal="image"] { opacity: 1; transform: none; }
.js [data-reveal="image"]::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--curtain, var(--bg));
  transform-origin: top;
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
  pointer-events: none;
  z-index: 1;
}
.js [data-reveal="image"].is-in::after { transform: scaleY(0); }
.js [data-reveal="image"] > img {
  transform: scale(1.08);
  transition: transform 1.4s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal="image"].is-in > img { transform: none; }
.section--soft { --curtain: var(--bg-soft); }
.section--warm { --curtain: var(--warm); }
.tile--photo { --curtain: var(--bg-soft); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal="image"] > img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js [data-reveal="image"]::after { display: none; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ----------------------------------------------------------------------
   10. Éléments communs
   ---------------------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--warm { background: var(--warm); }
.section-head { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }

.icon { width: 1.6rem; height: 1.6rem; flex: none; color: var(--accent-text); }

/* Photo : cadre arrondi, image recadrée */
.ph {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--zoom img { transition: transform .8s var(--ease-out); }
a:hover .ph--zoom.is-in > img, a:focus-visible .ph--zoom.is-in > img { transform: scale(1.04); }

/* Cartes et boutons : petite élévation au survol */
@media (hover: hover) {
  .plan, .niche { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
  .plan:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -30px var(--shadow); }
}

/* ----------------------------------------------------------------------
   11. Couleurs fixes des blocs colorés (identiques en clair et en sombre)
   ---------------------------------------------------------------------- */
:root {
  --terra: #B5482A;        /* blocs terre cuite : texte blanc (contraste 5,3) */
  --slate: #1D2427;        /* blocs ardoise : texte clair */
  --hl: #F2C9B8;           /* surligneur des titres */
}
/* thème sombre (choisi par le visiteur) */
:root[data-theme="dark"] { --slate: #0E1214; --hl: rgba(224, 122, 85, 0.38); }

.hl, .unused-hl {
  background: linear-gradient(transparent 60%, var(--hl) 60%, var(--hl) 92%, transparent 92%);
  padding-inline: 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.btn--lg { min-height: 56px; padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn--white { background: #fff; color: #1D2427; }
.btn--white:hover { background: #F4E6DF; }

@media (min-width: 900px) {
  .section-head--split {
    max-width: none;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: end;
  }
  .section-head--split .section-intro { margin-top: 0; }
}

/* Cadres : navigateur et téléphone, la page défile à l'intérieur */
.browser {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 34px 60px -28px rgba(20, 24, 26, 0.5), 0 0 0 1px rgba(20, 24, 26, 0.08);
}
.browser-bar {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EFEFEC;
}
.browser-bar span {
  font-size: 11px;
  line-height: 1;
  color: #5B6468;
  background: #fff;
  border-radius: 999px;
  padding: 5px 16px;
}
.browser .screen { aspect-ratio: 16 / 10; }
/* L'écran est un conteneur : 100cqh = sa hauteur. L'image (la page entière)
   glisse avec transform, ce que le navigateur confie à la carte graphique. */
.screen { position: relative; overflow: hidden; container-type: size; }
.screen img {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: auto;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.phone {
  background: #15191B;
  border-radius: 28px;
  padding: 7px;
  box-shadow: 0 30px 50px -22px rgba(20, 24, 26, 0.55);
}
.phone .screen { border-radius: 22px; overflow: hidden; aspect-ratio: 9 / 19; background: #fff; }

@keyframes page-scroll {
  0%, 8% { transform: translate3d(0, 0, 0); }
  92%, 100% { transform: translate3d(0, calc(-100% + 100cqh), 0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ----------------------------------------------------------------------
   12. Haut de page
   ---------------------------------------------------------------------- */
.hero3 { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); overflow: hidden; }
.hero3-grid { display: grid; gap: clamp(3rem, 7vw, 4rem); align-items: center; }
@media (min-width: 960px) { .hero3-grid { grid-template-columns: 1fr 1.08fr; } }
.hero3 h1 { font-size: clamp(2.7rem, 7.4vw, 4.7rem); line-height: 1.02; letter-spacing: -0.04em; }
.hero3 .lead { margin-top: 1.5rem; max-width: 33rem; }

.hero3-visual { position: relative; aspect-ratio: 1 / 0.86; margin-inline: 0 -2%; }
.hero3-panel {
  position: absolute;
  inset: 9% 0 0 12%;
  border-radius: 40px;
  background:
    radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.3px) 0 0 / 18px 18px,
    var(--terra);
}
.browser--hero { position: absolute; left: 0; top: 0; width: 80%; transform: rotate(-3deg); }
.browser--hero .screen img { animation: page-scroll 22s cubic-bezier(.45, 0, .55, 1) 1.2s infinite alternate; will-change: transform; }
.phone--hero { position: absolute; right: 5%; bottom: -3%; width: 27%; transform: rotate(5deg); }
.badge-rot {
  position: absolute;
  left: 3%;
  bottom: 3%;
  width: clamp(92px, 13vw, 124px);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 14px 30px -16px var(--shadow);
  animation: spin 22s linear infinite;
}
.badge-rot text { font-size: 10.6px; font-weight: 700; letter-spacing: 1.6px; fill: var(--ink); }

/* Entrée du haut de page */
.js .hero3-text > :not(h1), .js .hero3-visual > * { animation: rise .9s var(--ease-out) both; }
.js .hero3-text > :nth-child(2) { animation-delay: .08s; }
.js .hero3-text > :nth-child(3) { animation-delay: .16s; }
.js .hero3-visual > .hero3-panel { animation-name: pop; animation-delay: .1s; }
.js .hero3-visual > .browser--hero { animation-name: rise-tilt-l; animation-delay: 0s; }
.js .hero3-visual > .phone--hero { animation-name: rise-tilt-r; animation-delay: .4s; }
.js .hero3-visual > .badge-rot { animation: pop .8s var(--ease-out) .55s both, spin 22s linear 1.4s infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes pop { from { opacity: 0; transform: scale(.92); } }
@keyframes rise-tilt-l { from { transform: translateY(40px) rotate(-6deg); } }
@keyframes rise-tilt-r { from { opacity: 0; transform: translateY(50px) rotate(10deg); } }

/* ----------------------------------------------------------------------
   13. Bande des métiers
   ---------------------------------------------------------------------- */
.marquee { overflow: hidden; background: var(--slate); color: #F2F3F1; padding-block: 1.15rem; }
.marquee-track { display: flex; width: max-content; animation: marquee 50s linear infinite; will-change: transform; }
.marquee li {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding-right: 1.8rem;
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marquee .icon { width: 1.5rem; height: 1.5rem; color: color-mix(in srgb, var(--terra) 55%, #fff); }

/* ----------------------------------------------------------------------
   14. Exemples de sites
   ---------------------------------------------------------------------- */
.ex-grid { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
@media (min-width: 800px) {
  .ex-grid { grid-template-columns: 1fr 1fr; column-gap: clamp(1.25rem, 3vw, 2rem); }
  .ex:nth-child(even) { margin-top: 4rem; }
}
.ex-stage {
  background: var(--ex);
  border-radius: 28px;
  padding: clamp(1.4rem, 4vw, 2.8rem) clamp(1.4rem, 4vw, 2.8rem) 0;
  overflow: hidden;
}
.browser--ex { border-radius: 14px 14px 0 0; transform: translateY(5%); transition: transform .7s var(--ease-out); margin-bottom: -5%; }
.browser--ex .screen { aspect-ratio: 16 / 11; }
.browser--ex .screen img { transition: transform 1.6s var(--ease-out); }
.ex-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; padding: 1.1rem .25rem 0; }
.ex-meta h3 { font-size: 1.3rem; }
.ex-meta p { color: var(--muted); font-size: .95rem; }
@media (hover: hover) {
  .ex:hover .browser--ex { transform: translateY(1.5%); }
  .ex:hover .browser--ex .screen img { transform: translate3d(0, calc(-100% + 100cqh), 0); transition: transform 8s cubic-bezier(.45, 0, .55, 1); will-change: transform; }
}
@media (hover: none) {
  .ex.is-in .browser--ex .screen img { animation: page-scroll 18s cubic-bezier(.45, 0, .55, 1) 1s infinite alternate; }
}

/* ----------------------------------------------------------------------
   15. Services : 4 blocs colorés, chacun avec son visuel
   ---------------------------------------------------------------------- */
.svc-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 900px) {
  .svc-grid { grid-template-columns: repeat(12, 1fr); }
  .svc--terra { grid-column: 1 / 8; }
  .svc--ink { grid-column: 8 / 13; }
  .svc--warm { grid-column: 1 / 6; }
  .svc--light { grid-column: 6 / 13; }
}
.svc {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 21rem;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: 28px;
}
.svc h3 { font-size: clamp(1.55rem, 3vw, 2.1rem); letter-spacing: -0.025em; }
.svc p { margin-top: .7rem; max-width: 34ch; }
.svc--terra { background: var(--terra); color: #fff; min-height: 25rem; }
.svc--terra h3 { color: #fff; }
.svc--terra .svc-text { max-width: 58%; }
.phone--svc { position: absolute; right: 7%; bottom: -34%; width: 31%; transform: rotate(7deg); transition: transform .8s var(--ease-out); }
.phone--svc .screen img { animation: page-scroll 16s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.svc--terra:hover .phone--svc { transform: rotate(3deg) translateY(-6%); }
@media (max-width: 599px) {
  .svc--terra { min-height: 30rem; }
  .svc--terra .svc-text { max-width: none; }
  .phone--svc { width: 44%; bottom: -26%; right: 8%; }
}
.svc--ink { background: var(--slate); color: #D9DEDC; }
.svc--ink h3 { color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: auto; padding-top: 1.6rem; }
.chips li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
}
.chips .icon { width: 1.15rem; height: 1.15rem; color: color-mix(in srgb, var(--terra) 55%, #fff); }
.svc--warm { background: var(--warm); }
.palettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-top: auto; padding-top: 1.6rem; }
.palettes li { display: flex; height: 5.2rem; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 24px -16px var(--shadow); transition: transform .5s var(--ease-out); }
.palettes li:nth-child(odd) { transform: translateY(.6rem); }
.svc--warm:hover .palettes li { transform: translateY(-.3rem); }
.palettes span:nth-child(1) { flex: 2; background: var(--c1); }
.palettes span:nth-child(2) { flex: 1; background: var(--c2); }
.palettes span:nth-child(3) { flex: 1; background: var(--c3); }
.svc--light { background: var(--surface); border: 1px solid var(--line); }
.tick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.2rem; margin-top: auto; padding-top: 1.6rem; }
.tick-grid li { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--ink); }
.tick-grid .icon { width: 1.3rem; height: 1.3rem; padding: .2rem; border-radius: 50%; background: var(--warm); box-sizing: content-box; }

/* ----------------------------------------------------------------------
   16. Méthode : 5 étapes en cartes, la pastille se colore une à une
   ---------------------------------------------------------------------- */
.journey { display: grid; gap: 1rem; }
@media (min-width: 640px) { .journey { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .journey { grid-template-columns: repeat(5, 1fr); } }
.journey li {
  padding: 1.5rem 1.35rem 1.7rem;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.journey-n {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  background: var(--warm);
  color: var(--accent-text);
  font-size: 1.25rem;
  font-weight: 800;
  transition: background-color .6s var(--ease-out), color .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 140ms + 250ms);
}
.journey li.is-in .journey-n { background: var(--terra); color: #fff; transform: rotate(-8deg); }
.journey h3 { font-size: 1.15rem; }
.journey p { margin-top: .4rem; color: var(--muted); font-size: .97rem; }
.journey li:last-child { background: var(--terra); border-color: transparent; color: rgba(255, 255, 255, .92); }
.journey li:last-child h3 { color: #fff; }
.journey li:last-child p { color: rgba(255, 255, 255, .92); }
.journey li:last-child .journey-n, .journey li:last-child.is-in .journey-n { background: #fff; color: var(--terra); }

/* ----------------------------------------------------------------------
   18 bis. Qui je suis + engagements
   ---------------------------------------------------------------------- */
.about3 { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .about3 { grid-template-columns: .8fr 1.2fr; } }
.about3-visual { position: relative; width: min(100%, 380px); margin-inline: auto; }
.about3-disc {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #ECEDE9;
  box-shadow: 0 0 0 12px var(--warm), 0 40px 60px -40px var(--shadow);
}
.about3-disc img { width: 100%; height: 100%; object-fit: cover; }
.sticker {
  position: absolute;
  right: -4%;
  top: 6%;
  padding: .7rem 1.15rem;
  border-radius: 999px;
  background: var(--terra);
  color: #fff;
  font-weight: 700;
  transform: rotate(7deg);
  box-shadow: 0 16px 30px -18px var(--shadow);
}
.about3-text .lead { margin-top: 1.2rem; }
.promises3 { display: grid; gap: .9rem; margin-top: 2rem; }
@media (min-width: 600px) { .promises3 { grid-template-columns: 1fr 1fr; } }
.promises3 li { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 18px; background: var(--bg-soft); }
.promises3 .icon { width: 1.9rem; height: 1.9rem; }
.promises3 h3 { font-size: 1.02rem; }
.promises3 p { color: var(--muted); font-size: .95rem; margin-top: .15rem; }

/* Mouvement réduit : tout s'arrête */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .badge-rot, .screen img, .js .hero3-text > *, .js .hero3-visual > * { animation: none !important; }
}

/* ----------------------------------------------------------------------
   18. Questions fréquentes (ouverture en douceur quand le navigateur le permet)
   ---------------------------------------------------------------------- */
.faq-layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .faq-layout { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
  .faq-aside { position: sticky; top: calc(var(--promo-h) + var(--header-h) + 2rem); }
}
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-text);
  transition: transform .35s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent-text); }
.faq .answer { padding-bottom: 1.4rem; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* ----------------------------------------------------------------------
   19. Contact
   ---------------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.contact-intro .lead { margin-top: 1.2rem; }
.reassure { display: grid; gap: 0.75rem; margin-top: 1.6rem; }
.reassure li { display: flex; gap: 0.7rem; align-items: flex-start; }
.reassure .icon { width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; }
.reassure strong { color: var(--ink); }
.ph--contact { aspect-ratio: 3 / 2; margin-top: 2rem; max-width: 420px; }
@media (max-width: 899px) { .ph--contact { display: none; } }
.contact-direct { margin-top: 1.6rem; }
.contact-direct a { font-weight: 600; color: var(--accent-text); }

.form { display: grid; gap: 1.2rem; }
.form-row { display: grid; gap: 1.2rem; }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; color: var(--ink); font-size: 0.98rem; }
.field .hint { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 1px;
  border-color: var(--accent-text);
}
.form-privacy { font-size: 0.9rem; color: var(--muted); }
.form-privacy a { color: inherit; }
.form-status { font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-success { color: var(--ink); padding: 1rem; border-radius: 8px; background: var(--bg); border: 1px solid var(--line-strong); }
.form-status.is-error { color: var(--accent-text); }
.hp { position: absolute; left: -9999px; }

/* ----------------------------------------------------------------------
   21. Pages simples (mentions, confidentialité, merci, 404)
   ---------------------------------------------------------------------- */
.page { padding-block: clamp(3rem, 8vw, 5.5rem); }
.prose { max-width: 46rem; }
.prose h1 { margin-bottom: 1.5rem; }
.prose h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin-top: 2.6rem; margin-bottom: 0.8rem; }
.prose p, .prose li { margin-top: 0.7rem; }
.prose ul { list-style: disc; padding-left: 1.3rem; }
.prose a:not(.btn) { color: var(--accent-text); }
.prose .updated { margin-top: 2.5rem; color: var(--muted); font-size: 0.95rem; }

/* ----------------------------------------------------------------------
   22. Pied de page
   ---------------------------------------------------------------------- */
.site-footer {
  padding-block: 3rem 2rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--muted);
}
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand { display: flex; gap: 0.8rem; align-items: flex-start; }
.footer-brand svg { width: 28px; height: 28px; flex: none; }
.footer-brand strong { color: var(--ink); }
.footer-title { font-weight: 700; color: var(--ink); margin-bottom: 0.6rem; font-size: 1rem; }
.footer-links { display: grid; gap: 0.4rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.88rem; }

/* Exposants (1re) sans décaler la ligne */
sup { font-size: 0.7em; line-height: 0; vertical-align: super; }

/* Menu : section en cours de lecture */
@media (min-width: 960px) {
  .nav a.is-current { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }
}

/* Contact dans un grand panneau terre cuite */
.contact-panel { background: var(--terra); color: rgba(255, 255, 255, .92); border-radius: 36px; padding: clamp(1.6rem, 5vw, 4rem); }
.contact-panel .contact-grid { padding-inline: 0; }
.contact-panel h1, .contact-panel h2 { color: #fff; }
.contact-panel .lead { color: rgba(255, 255, 255, .95); }
.contact-panel .reassure strong { color: #fff; }
.contact-panel .reassure .icon { color: #fff; }
.contact-panel .contact-direct a { color: #fff; }
.contact-panel .form { background: var(--surface); color: var(--text); padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: 24px; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .5); }
.contact-panel :focus-visible { outline-color: #fff; }
.contact-panel .form :focus-visible { outline-color: var(--accent-text); }
.contact-panel .text-link, .contact-panel a { color: #fff; }
.contact-panel .form a { color: inherit; }

/* Boutons du haut de page */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.2rem; }
.footer-legal { max-width: none; }
@media (max-width: 599px) {
  .svc--ink, .svc--warm, .svc--light { min-height: 0; }
  .tick-grid { grid-template-columns: 1fr; }
}


/* ======================================================================
   23. Finitions (audit v3b)
   ====================================================================== */

/* Grain très léger sur toute la page : casse l'aspect « trop numérique » */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* thème sombre (choisi par le visiteur) */
:root[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .035; }

/* Soulignement dessiné à la main sous les mots clés */
.scribble { position: relative; white-space: nowrap; display: inline-block; }
.scribble-line {
  position: absolute;
  left: -2%;
  bottom: -0.16em;
  width: 104%;
  height: .38em;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
}
.scribble-line path {
  fill: none;
  stroke: var(--terra);
  stroke-width: 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 340;
  stroke-dashoffset: 0;
}
.scribble { isolation: isolate; }
.js .hero3 .scribble-line path { animation: draw 1.1s var(--ease-out) .5s both; }
.js [data-reveal] .scribble-line path { stroke-dashoffset: 340; transition: stroke-dashoffset 1.1s var(--ease-out) .35s; }
.js [data-reveal].is-in .scribble-line path { stroke-dashoffset: 0; }
@keyframes draw { from { stroke-dashoffset: 340; } }
/* thème sombre (choisi par le visiteur) */
:root[data-theme="dark"] .scribble-line path { stroke: var(--accent); }

/* Boutons principaux : flèche qui avance au survol */
.btn .icon { width: 1.15rem; height: 1.15rem; color: currentColor; transition: transform .35s var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }

/* Cadre de navigateur : trois pastilles comme une vraie fenêtre */
.browser-bar { position: relative; }
.browser-bar i { position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #D5D6D2; }
.browser-bar i:nth-child(1) { left: 12px; }
.browser-bar i:nth-child(2) { left: 25px; }
.browser-bar i:nth-child(3) { left: 38px; }

/* Haut de page : le téléphone reste immobile, il flotte doucement */
.phone--hero .screen img { animation: none; }
.js .hero3-visual > .phone--hero { animation: rise-tilt-r .9s var(--ease-out) .4s both, float 7s ease-in-out 1.6s infinite; }
@keyframes float { 0%, 100% { transform: rotate(5deg) translate3d(0, 0, 0); } 50% { transform: rotate(4deg) translate3d(0, -10px, 0); } }

/* Exemples : étiquette, police et nuancier */
.ex-stage { position: relative; }
.ex-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  color: #1D2427;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ex-meta { align-items: center; }
.ex-design { display: inline-flex; align-items: center; gap: .55rem; font-size: .88rem; color: var(--muted); }
.ex-dots { display: inline-flex; }
.ex-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -5px; }
.ex-dots i:first-child { margin-left: 0; }

/* Services : motifs discrets dans les blocs colorés */
.svc--terra { background: radial-gradient(rgba(255, 255, 255, .14) 1.2px, transparent 1.3px) 0 0 / 18px 18px, var(--terra); }
.svc--ink {
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--slate);
}
.svc--warm { background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--terra) 6%, transparent) 14px 15px), var(--warm); }
.logo-mark { width: 1.05rem; height: 1.05rem; flex: none; }
.chips li { transition: background-color .3s ease, transform .3s var(--ease-out); }
.chips li:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }

/* Méthode : pointillés qui relient les étapes */
@media (min-width: 1000px) {
  .journey { position: relative; }
  .journey::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 3rem;
    border-top: 2px dashed var(--line-strong);
    z-index: 0;
  }
  .journey li { position: relative; z-index: 1; }
}

/* Questions : la question ouverte se détache */
.faq details { transition: background-color .3s ease; border-radius: 14px; }
.faq details[open] { background: var(--surface); border-bottom-color: transparent; padding-inline: 1rem; margin-inline: -1rem; }
.faq details[open] summary { color: var(--accent-text); }

/* ---- Devis : texte + feuille de devis + tampon ---- */
.devis { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 960px) { .devis { grid-template-columns: 1fr .95fr; } }
.devis-text h2 { font-size: clamp(2rem, 4.8vw, 3rem); }
.devis-text .lead { margin-top: 1.2rem; max-width: 36rem; }
.devis-steps { display: grid; gap: .8rem; margin-top: 1.8rem; }
.devis-steps li { display: flex; align-items: center; gap: .85rem; }
.devis-steps .icon {
  width: 1.3rem; height: 1.3rem; padding: .55rem; box-sizing: content-box;
  border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line);
}
.devis-steps strong { color: var(--ink); }
.devis-visual { position: relative; max-width: 470px; margin-inline: auto; width: 100%; }
.paper {
  position: relative;
  padding: 2rem 1.9rem 1.7rem;
  border-radius: 6px 6px 18px 18px;
  background: #FFFDF9;
  color: #2A3134;
  transform: rotate(1.6deg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .04), 0 40px 70px -40px rgba(29, 36, 39, .45);
  transition: transform .6s var(--ease-out);
}
/* bord supérieur en dents de scie, comme une feuille détachée */
.paper::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -9px;
  height: 10px;
  background: radial-gradient(circle at 7px 0, transparent 6px, #FFFDF9 6.5px) 0 0 / 14px 10px repeat-x;
}
.devis-visual:hover .paper { transform: rotate(0deg) translateY(-4px); }
.paper-head { display: flex; align-items: center; gap: .8rem; padding-bottom: 1.1rem; border-bottom: 2px solid #1D2427; }
.paper-head svg { width: 30px; height: 30px; flex: none; }
.paper-head strong { display: block; font-size: 1.25rem; color: #1D2427; }
.paper-head span { font-size: .85rem; color: #5B6468; }
.paper-label { margin-top: 1.2rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--terra); }
.paper-lines, .paper-total { display: grid; gap: .55rem; margin-top: .8rem; }
.paper-lines li, .paper-total li { display: flex; align-items: baseline; gap: .5rem; font-size: .97rem; }
.paper-lines li span, .paper-total li span { display: flex; flex: 1; align-items: baseline; }
.paper-lines li span::after, .paper-total li span::after {
  content: ""; flex: 1; min-width: 1.5rem; margin: 0 .45rem; border-bottom: 2px dotted #C9CCC6; transform: translateY(-.25em);
}
.paper-lines b { font-weight: 600; color: #5B6468; }
.paper-total { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed #C9CCC6; }
.paper-total li { font-weight: 700; color: #1D2427; }
.paper-total b { font-size: 1.1rem; color: var(--terra); }
.paper-note { margin-top: 1.1rem; font-size: .8rem; color: #5B6468; }
.stamp {
  position: absolute;
  right: -5%;
  top: -9%;
  width: clamp(104px, 14vw, 132px);
  transform: rotate(-12deg);
  filter: drop-shadow(0 12px 18px rgba(147, 57, 31, .25));
}
.stamp circle { fill: var(--terra); }
.stamp .stamp-inner { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; stroke-dasharray: 3 4; }
.stamp text { fill: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; }
.js .devis-visual .stamp { transform: rotate(-12deg) scale(.6); opacity: 0; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) .5s, opacity .3s ease .5s; }
.js .devis-visual.is-in .stamp { transform: rotate(-12deg) scale(1); opacity: 1; }
#devis .price-note { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ---- Mascotte ---- */
.about3-disc { background: var(--warm); }
.about3-disc img { object-fit: contain; padding: 8%; animation: float-soft 6s ease-in-out infinite; }
.about3-disc--photo { aspect-ratio: 4 / 5; border-radius: 999px 999px 28px 28px; }
.about3-disc--photo img { object-fit: cover; object-position: 50% 55%; padding: 0; animation: none; }
.about3-visual:hover .about3-disc--photo img { animation: none; }
@keyframes float-soft { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -8px, 0) rotate(-2deg); } }
.about3-visual:hover .about3-disc img { animation: wave .8s ease-in-out 2; }
@keyframes wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.contact-wrap { position: relative; }
.peek {
  position: absolute;
  top: 0;
  right: clamp(1.5rem, 9%, 7rem);
  width: clamp(84px, 10vw, 118px);
  z-index: 2;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--bg), 0 18px 30px -16px var(--shadow);
  transform: rotate(8deg);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.contact-wrap .contact-panel { position: relative; z-index: 1; }
.contact-wrap:hover .peek { transform: rotate(-4deg) translateY(-10px); }
.contact-panel {
  background: radial-gradient(rgba(255, 255, 255, .12) 1.2px, transparent 1.3px) 0 0 / 20px 20px, var(--terra);
}

/* ---- Grande signature en bas de page ---- */
.footer-mark {
  margin-top: 2.5rem;
  max-width: none;
  font-size: clamp(3.6rem, 15vw, 12.5rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -0.055em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .about3-disc img, .phone--hero, .hero3-visual > .phone--hero { animation: none !important; }
  .scribble-line path { stroke-dashoffset: 0 !important; animation: none !important; transition: none !important; }
  .js .devis-visual .stamp { opacity: 1 !important; transform: rotate(-12deg) !important; }
}
@media (max-width: 599px) {
  .stamp { right: -1%; top: -11%; }
  .scribble-line { left: 0; width: 100%; }
}


/* ======================================================================
   24. Palettes : un clic change les couleurs de tout le site, en fondu
   Les couleurs sont des propriétés enregistrées (@property) : le navigateur
   sait donc les interpoler, et toute la page glisse d'une palette à l'autre.
   ====================================================================== */
@property --terra { syntax: "<color>"; inherits: true; initial-value: #B5482A; }
@property --slate { syntax: "<color>"; inherits: true; initial-value: #1D2427; }
@property --bg { syntax: "<color>"; inherits: true; initial-value: #F6F6F3; }
@property --bg-soft { syntax: "<color>"; inherits: true; initial-value: #ECEDE9; }
@property --warm { syntax: "<color>"; inherits: true; initial-value: #F4E6DF; }
@property --hl { syntax: "<color>"; inherits: true; initial-value: #F2C9B8; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #B5482A; }
@property --accent-text { syntax: "<color>"; inherits: true; initial-value: #93391F; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #1D2427; }
@property --text { syntax: "<color>"; inherits: true; initial-value: #3C4448; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #5B6468; }
@property --surface { syntax: "<color>"; inherits: true; initial-value: #FFFFFF; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #D9DCD6; }
@property --line-strong { syntax: "<color>"; inherits: true; initial-value: #B9BEB8; }
:root {
  /* fondu lent : la page glisse d'une palette à l'autre sans à-coup */
  --tone-t: .7s cubic-bezier(.4, 0, .2, 1);
  transition: --terra var(--tone-t), --slate var(--tone-t), --bg var(--tone-t),
    --bg-soft var(--tone-t), --warm var(--tone-t), --hl var(--tone-t),
    --accent var(--tone-t), --accent-text var(--tone-t), --ink var(--tone-t), --text var(--tone-t),
    --muted var(--tone-t), --surface var(--tone-t), --line var(--tone-t), --line-strong var(--tone-t);
}
@media (prefers-reduced-motion: reduce) { :root { transition: none; } }

/* Palettes de venues (sélecteur du bloc « In your colors » et teintes au défilement) */
:root[data-palette="barn"] { --terra: #8E2B20; --slate: #23382D; --bg: #F5F3EE; --bg-soft: #ECE7DF; --warm: #F2DED8; --hl: #E9BFB5; --accent: #8E2B20; --accent-text: #7C2419; }
:root[data-palette="estate"] { --terra: #1F4A3A; --slate: #18241F; --bg: #F4F4F1; --bg-soft: #E7EAE5; --warm: #F1E4E0; --hl: #E8CFC8; --accent: #1F4A3A; --accent-text: #1F4A3A; }
:root[data-palette="vineyard"] { --terra: #6B2D4A; --slate: #2A1E24; --bg: #F7F4F2; --bg-soft: #EEE7E6; --warm: #F1E0E6; --hl: #E3C1D0; --accent: #6B2D4A; --accent-text: #612842; }
:root[data-palette="lakeside"] { --terra: #2F5A73; --slate: #18242C; --bg: #F4F6F6; --bg-soft: #E6ECEE; --warm: #E0ECF1; --hl: #BFD6E2; --accent: #2F5A73; --accent-text: #2A5068; }
/* thème sombre (choisi par le visiteur) */
:root[data-theme="dark"][data-palette="barn"] { --terra: #8E2B20; --slate: #121A15; --bg: #16130F; --bg-soft: #201B16; --warm: #2B1E1A; --hl: rgba(233, 140, 120, .35); --accent: #E98C78; --accent-text: #EE9E8C; }
:root[data-theme="dark"][data-palette="estate"] { --terra: #1F4A3A; --slate: #0E1512; --bg: #121715; --bg-soft: #18201C; --warm: #26201F; --hl: rgba(140, 200, 172, .3); --accent: #8CC8AC; --accent-text: #9DD2B9; }
:root[data-theme="dark"][data-palette="vineyard"] { --terra: #6B2D4A; --slate: #140D11; --bg: #171214; --bg-soft: #21191C; --warm: #2C1D24; --hl: rgba(222, 150, 186, .33); --accent: #DE96BA; --accent-text: #E5A8C6; }
:root[data-theme="dark"][data-palette="lakeside"] { --terra: #2F5A73; --slate: #0D1418; --bg: #121618; --bg-soft: #182024; --warm: #1C262C; --hl: rgba(130, 182, 210, .33); --accent: #82B6D2; --accent-text: #96C3DB; }

/* Sélecteur de palettes (dans le bloc « À votre image ») */
.palette-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-top: auto; padding-top: 1.6rem; }
.palette-btn {
  display: flex;
  height: 4.6rem;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 24px -16px var(--shadow);
  transition: transform .5s var(--ease-out), box-shadow .3s ease, outline-color .3s ease;
  outline: 3px solid transparent;
  outline-offset: 3px;
}
.palette-btn:nth-child(odd) { transform: translateY(.6rem); }
.svc--warm:hover .palette-btn { transform: translateY(-.3rem); }
.palette-btn:hover { transform: translateY(-.6rem) scale(1.04) !important; box-shadow: 0 18px 28px -16px var(--shadow); }
.palette-btn:active { transform: translateY(-.2rem) scale(.98) !important; }
.palette-btn[aria-pressed="true"] { outline-color: var(--ink); transform: translateY(-.5rem) !important; }
.palette-btn:focus-visible { outline-color: var(--accent-text); }
.palette-btn span:nth-child(1) { flex: 2; background: var(--c1); }
.palette-btn span:nth-child(2) { flex: 1; background: var(--c2); }
.palette-btn span:nth-child(3) { flex: 1; background: var(--c3); }
.palette-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .8rem;
  margin-top: 1.3rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}
.palette-hint > .icon { width: 1.2rem; height: 1.2rem; color: var(--accent-text); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -3px, 0); } }
.palette-reset {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: .85rem;
  font-weight: 700;
}
.palette-reset[hidden] { display: none; }
.palette-reset .icon { width: 1rem; height: 1rem; color: currentColor; }

.palette-hint { display: grid; grid-template-columns: auto 1fr; align-items: start; }
.palette-hint > .icon { margin-top: .1rem; }
.palette-reset { grid-column: 1 / -1; justify-self: start; }
/* Feuille de devis : prix d'appel mis en valeur */
.paper-total .paper-from { padding-bottom: .55rem; margin-bottom: .2rem; border-bottom: 1px dashed #C9CCC6; }
.paper-total .paper-from b { font-size: 1.25rem; font-weight: 800; }

/* ======================================================================
   27. Bouton thème clair / sombre
   ====================================================================== */
.theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  transition: background-color .25s ease, transform .3s var(--ease-out);
}
.theme-toggle:hover { transform: rotate(-12deg); }
.theme-toggle .icon { position: absolute; width: 1.2rem; height: 1.2rem; color: currentColor; transition: opacity .35s ease, transform .5s var(--ease-out); }
.theme-toggle .icon:last-child { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle .icon:first-child { opacity: 0; transform: rotate(90deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle .icon:last-child { opacity: 1; transform: none; }
.header-inner .theme-toggle { margin-left: .4rem; }
@media (max-width: 959px) { .header-inner .theme-toggle { margin-left: 0; } .header-inner { gap: .6rem; } }
.brand span { white-space: nowrap; }

/* ======================================================================
   29. Ajouts Novotly
   ====================================================================== */
/* Logo : le « n » en arche sur fond ardoise, point terre cuite */
.brand-mark rect { fill: var(--ink); }
.brand-mark path { stroke: var(--bg); }
.brand-mark circle { fill: var(--accent); }
.brand span { font-size: 1.2rem; letter-spacing: -0.02em; }

/* Démos : lien vers la démo en ligne sous chaque carte */
.ex-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; padding: .7rem .25rem 0; }
.ex-links .text-link { display: inline-flex; align-items: center; gap: .35rem; }
.ex-links .text-link .icon { width: 1rem; height: 1rem; color: currentColor; }
.ex-note { margin-top: clamp(2.5rem, 5vw, 3.5rem); color: var(--muted); }
.ex-meta h3 + p { margin-top: .1rem; }

/* Formulaire : erreurs champ par champ, état d'envoi */
.field-error { font-size: .88rem; font-weight: 600; color: var(--accent-text); }
.field-error:empty { display: none; }
.field [aria-invalid="true"] { border-color: var(--accent-text); }
.form-status.is-pending { color: var(--muted); }
.form-foot { display: grid; gap: 1rem; justify-items: start; }

/* Pages simples (confidentialité, conditions, mentions, merci, 404) */
.page-head { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.page-head h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); }
.page-head .lead { margin-top: 1rem; max-width: 46rem; }
.draft-banner {
  display: inline-block; margin-bottom: 1.2rem; padding: .3rem .8rem; border-radius: 999px;
  background: var(--warm); color: var(--accent-text); font-size: .88rem; font-weight: 700;
}
.page-paper { padding-bottom: var(--section-y); }
.page-paper .prose { padding: clamp(1.5rem, 4vw, 2.6rem); border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.prose h2:first-child { margin-top: 0; }
.prose dl { display: grid; gap: .9rem; margin-top: .8rem; }
.prose dt { font-weight: 700; color: var(--ink); }
.prose strong { color: var(--ink); }
.center-page { min-height: 62vh; display: grid; align-content: center; justify-items: start; gap: 1rem; padding-block: var(--section-y); }
.center-page .lead a { color: var(--accent-text); font-weight: 600; }
.center-page .btn { margin-top: 1rem; }
.center-page img { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 8px var(--warm); }

/* Pied de page : quatre colonnes au plus, signature en contour */
.footer-brand p { max-width: 30ch; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--ink); text-decoration: underline; }

/* Démo : la ville de l'aperçu, sous la grille d'exemples */
.preview-line { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.preview-line > p { font-weight: 700; color: var(--ink); }
.preview-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.preview-chips li {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600;
}
.preview-chips .icon { width: 1.1rem; height: 1.1rem; }

/* Méthode en 4 étapes (au lieu de 5 sur nlbstudio.fr) */
@media (min-width: 1000px) { .journey--4 { grid-template-columns: repeat(4, 1fr); } }

/* La scène de chaque démo est un lien vers la démo en ligne */
a.ex-stage { display: block; color: inherit; text-decoration: none; }
a.ex-stage:focus-visible { outline-offset: 4px; border-radius: 28px; }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
/* Signature : le mot est court, on l'agrandit pour qu'il occupe la largeur comme sur nlbstudio.fr */
.footer-mark { font-size: clamp(5rem, 24vw, 19rem); padding-bottom: .12em; }
/* Bouton de thème : collé à droite, à côté du menu (pas de sélecteur de langue ici) */
.header-inner .theme-toggle { margin-left: auto; }
@media (min-width: 960px) { .header-inner .theme-toggle { margin-left: .4rem; } }
/* La feuille de devis reste claire en thème sombre : son logo garde ses couleurs */
.paper .brand-mark rect { fill: #1D2427; }
.paper .brand-mark path { stroke: #F6F6F3; }
.paper .brand-mark circle { fill: #E07A55; }