/* ============================================================
   DEVISALY — Design System "L'Atelier"
   Identité : le plan de travail de l'artisan.
   Papier ivoire, traits de mesure fins, or comme l'outil précieux,
   encre comme le trait du crayon. Signature : lignes de cotation
   et repères de mesure, comme un plan technique.
   ============================================================ */

:root {
  /* ---- Palette "L'Atelier" ---- */
  --paper: #f7f4ee;        /* fond ivoire profond (papier) */
  --paper-2: #efeae0;      /* zones secondaires (papier usé) */
  --card: #fffdf9;         /* panels / cartes (papier neuf) */
  --card-2: #faf7f0;       /* surfaces hover */
  --ink: #191713;          /* encre (trait du crayon) */
  --ink-2: #3d3830;        /* texte secondaire */
  --muted: #6f675a;        /* texte tertiaire */
  --faint: #7d7463;        /* texte discret (contraste AA 4.5:1) */

  --gold: #b08a3e;         /* or principal (outil précieux) */
  --gold-2: #8a6a2a;       /* or profond */
  --gold-3: #6e5320;       /* or le plus profond */
  --gold-line: rgba(176,138,62,.30);
  --gold-bg: rgba(176,138,62,.07);
  --gold-soft: #e9dcc0;    /* or clair (liserés) */

  --danger: #b23a2e;
  --ok: #3d7a4a;

  --line: #e6dfd0;         /* bordures (traits fins) */
  --line-soft: #efe9dc;

  --shadow-sm: 0 1px 2px rgba(25,23,19,.04), 0 2px 8px rgba(25,23,19,.04);
  --shadow-md: 0 4px 12px rgba(25,23,19,.06), 0 12px 32px rgba(25,23,19,.08);
  --shadow-lg: 0 8px 24px rgba(25,23,19,.08), 0 24px 60px rgba(25,23,19,.12);

  --radius: 6px;           /* rayons sobres, presque droits (plan technique) */
  --radius-lg: 10px;

  /* ---- Typo ---- */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* ---- Tokens sémantiques (refonte 2026-09) ----
     Règle de contraste WCAG mesurée sur fond cartes/ivoire :
       --gold  #b08a3e = 3,16:1  -> AA gros éléments seulement (icônes, filets, aplat or)
       --gold-2#8a6a2a = 4,58:1  -> AA texte (>= 4.5) : TOUT texte or doit l'utiliser
       --gold-3#6e5320 = 6,55:1  -> AAA, réservé aux libellés fins sur or très clair
     Ne jamais écrire `color: var(--gold)` sur du texte < 18px : utiliser --accent. */
  --accent: var(--gold-2);        /* or lisible (texte, liens, petites icônes) */
  --accent-strong: var(--gold-3); /* or profond (libellés fins, hover) */
  --deco: var(--gold);            /* or décoratif (filets, aplats, gros éléments) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
  font-size: 15px;
  transition: color .3s ease;
}

::selection { background: var(--gold); color: #fff; }

/* ---- Signature : quadrillage de plan technique en fond (léger, discret) ---- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 640px at 84% -14%, rgba(176,138,62,.07), transparent 60%),
    radial-gradient(820px 560px at -8% 30%, rgba(176,138,62,.05), transparent 55%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(25,23,19,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,23,19,.02) 1px, transparent 1px);
  background-size: 48px 48px;
}
.container, .topbar-inner, .auth-card, .footer { position: relative; z-index: 1; }

/* ---- Repères de mesure (signature) ---- */
.measure {
  display: flex; align-items: center; gap: 12px;
  color: var(--accent); font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
}
.measure::before, .measure::after {
  content: ""; height: 1px; background: var(--gold-line); flex: 1;
}
.measure::before { background: repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 6px); }

/* Repères de cotation verticaux (marges d'atelier) */
.measure-rail {
  display: flex; align-items: center; gap: 14px;
}
.measure-rail .rail-line {
  flex: 1; height: 1px; align-self: center;
  background: repeating-linear-gradient(90deg, var(--gold-2) 0 3px, transparent 3px 7px);
  opacity: .55;
}
.measure-rail .rail-ticks {
  display: flex; gap: 0; flex-direction: column; align-items: center;
  color: var(--accent); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 1.5px;
}

/* Repères de coin (mire d'atelier) — appliqués aux cartes/panels clés */
.atelier-corner {
  position: relative;
}
.atelier-corner::before,
.atelier-corner::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  pointer-events: none; z-index: 2;
}
.atelier-corner::before {
  top: 10px; left: 10px;
  border-top: 1px solid var(--gold); border-left: 1px solid var(--gold);
}
.atelier-corner::after {
  bottom: 10px; right: 10px;
  border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold);
}

/* ============ BOUTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: all .2s ease; letter-spacing: .01em; line-height: 1;
  white-space: nowrap; position: relative;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn.primary {
  color: #fff;
  background: linear-gradient(165deg, #c9a457 0%, #b08a3e 48%, #8a6a2a 100%);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 2px 6px rgba(176,138,62,.3), 0 8px 20px rgba(176,138,62,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(176,138,62,.35), 0 14px 32px rgba(176,138,62,.3), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.primary:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(110,83,32,.3); }

.btn.ghost {
  color: var(--ink);
  background: var(--card);
  border-color: var(--line);
}
.btn.ghost:hover { border-color: var(--gold); color: var(--gold-2); background: var(--card-2); }

.btn.big { padding: 16px 34px; font-size: 15px; border-radius: var(--radius-lg); line-height: 1.3; }

/* ============ TOPBAR ============ */
.topbar {
  background: rgba(255,253,249,.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 60;
}
.topbar-inner { max-width: 1120px; margin: 0 auto; padding: 8px 28px; display: flex; align-items: center; justify-content: space-between; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-mark {
  width: 32px; height: 32px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: transparent;
  box-shadow: none;
}
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-name { font-family: var(--font-serif); font-weight: 600; font-size: 16px; letter-spacing: .01em; color: var(--ink); line-height: 1; }
.brand-name span { color: var(--gold-2); }
.brand-sub { font-size: 12px; color: var(--faint); letter-spacing: 2.5px; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav > a:not(.btn) { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: color .15s; position: relative; }
.nav > a:not(.btn):hover { color: var(--gold-2); }
.nav > a.active { color: var(--gold-2); }
.nav > a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--gold); }
.nav .logout { color: var(--danger); }
.nav .btn { padding: 7px 15px; font-size: 12px; border-radius: var(--radius); }

/* ============ SÉLECTEUR DE LANGUE ============ */
.lang-switch { display: flex; align-items: center; gap: 2px; margin-left: 2px; }
.lang-link {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--faint);
  text-decoration: none; padding: 5px 8px; border: 1px solid transparent; border-radius: var(--radius);
  transition: color .15s, border-color .15s;
}
.lang-link:hover { color: var(--gold-2); border-color: var(--line); }

/* ============ BANDEAU VÉRIFICATION EMAIL ============ */
.verify-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 20px;
  border: 1px solid var(--gold-line); border-radius: var(--radius);
  background: var(--gold-bg); color: var(--ink); font-size: 14px;
}
.verify-banner svg { color: var(--gold-2); flex-shrink: 0; }
.verify-banner a { color: var(--gold-2); font-weight: 600; text-decoration: none; }
.verify-banner a:hover { text-decoration: underline; }

/* ============ MENU UTILISATEUR ============ */
.user-menu { position: relative; display: flex; align-items: center; }
.user-menu-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); cursor: pointer; transition: border-color .15s; height: 30px;
}
.user-menu-btn:hover { border-color: var(--gold); }
.user-menu-btn svg { color: var(--faint); }
.user-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 11px; color: #fff;
  background: linear-gradient(160deg, #d8b97c, #a9863f);
}
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 8px; display: none; z-index: 70;
}
.user-menu.open .user-dropdown { display: block; }
.user-dropdown .ud-head { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.user-dropdown .ud-name { font-weight: 600; font-size: 14px; }
.user-dropdown .ud-plan { font-size: 12px; color: var(--gold-2); }
.user-dropdown a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius);
  font-size: 14px; color: var(--ink); text-decoration: none; transition: background .12s;
}
.user-dropdown a:hover { background: var(--card-2); color: var(--gold-2); }
.user-dropdown a.logout { color: var(--danger); }
.user-dropdown a.logout:hover { background: rgba(178,58,46,.08); color: var(--danger); }

/* ============ MENU LATÉRAL (drawer) ============ */
.burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; padding: 10px;
}
.burger span { display: block; height: 1.5px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s; }
.burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.drawer-scrim {
  position: fixed; inset: 0; background: rgba(25,23,19,.42);
  backdrop-filter: blur(2px); z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: 380px; max-width: 90vw;
  background: var(--card); border-left: 1px solid var(--line);
  z-index: 201; transform: translateX(100%); transition: transform .3s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(25,23,19,.12);
}
.drawer.open { transform: translateX(0); }
body.drawer-open { overflow: hidden; }

.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
.drawer-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.drawer-mark { display: inline-flex; width: 30px; height: 30px; }
.drawer-mark img { width: 100%; height: 100%; }
.drawer-wordmark { font-family: var(--font-serif); font-weight: 600; font-size: 19px; color: var(--ink); }
.drawer-wordmark span { color: var(--gold-2); }
.drawer-close { background: transparent; border: none; cursor: pointer; color: var(--muted); padding: 6px; display: inline-flex; border-radius: var(--radius); transition: background .15s, color .15s; }
.drawer-close:hover { background: var(--paper); color: var(--ink); }

.drawer-user { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; }
.drawer-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-2); display: grid; place-items: center; font-family: var(--font-serif); font-size: 19px; font-weight: 600; flex-shrink: 0; }
.drawer-user-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.drawer-user-plan { font-size: 12px; color: var(--muted); }

.drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 16px 20px 0; padding: 14px 18px; background: var(--gold-grad, linear-gradient(165deg, var(--gold), var(--gold-2)));
  color: #fff; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: 14.5px;
  min-height: 48px;
}
.drawer-cta.ghost { background: transparent; color: var(--gold-2); border: 1px solid var(--gold-line); margin-top: 10px; }

.drawer-nav { flex: 1; overflow-y: auto; padding: 18px 20px 8px; }
.drawer-group-label { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); font-weight: 700; margin: 6px 0 10px; }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.drawer-grid a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 13px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 500;
  min-height: 74px; transition: border-color .15s, background .15s;
}
.drawer-grid a:hover { border-color: var(--gold-line); background: var(--gold-bg); }
.drawer-grid a svg { color: var(--gold-2); }

.drawer-list { display: flex; flex-direction: column; margin-bottom: 18px; }
.drawer-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 2px; text-decoration: none; color: var(--ink); font-size: 14px;
  border-bottom: 1px solid var(--line-soft); transition: color .15s;
}
.drawer-list a:last-child { border-bottom: none; }
.drawer-list a:hover { color: var(--gold-2); }
.drawer-tag { font-family: var(--font-mono); font-size: 11.5px; color: var(--gold-2); background: var(--gold-soft); padding: 3px 9px; border-radius: 999px; }

.drawer-more { border-top: 1px solid var(--line-soft); padding-top: 6px; margin-bottom: 16px; }
.drawer-more summary {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  padding: 12px 2px; font-size: 13.5px; font-weight: 600; color: var(--muted); list-style: none;
}
.drawer-more summary::-webkit-details-marker { display: none; }
.drawer-more[open] summary { color: var(--gold-2); }
.drawer-more[open] summary svg { transform: rotate(180deg); }
.drawer-more summary svg { transition: transform .2s; }
.drawer-more .drawer-list { margin: 4px 0 12px; }

.drawer-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.drawer-logout { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 12px; text-decoration: none; color: var(--danger); font-size: 13.5px; font-weight: 500; border-radius: var(--radius); }
.drawer-logout:hover { background: rgba(154,59,46,.06); }
.drawer-foot .drawer-cta { margin: 0; }
.hm-section a.logout:hover { background: rgba(178,58,46,.08); }
.hm-section a svg { opacity: .65; }

/* ============ CONTENEURS / SECTIONS ============ */
.container { max-width: 1120px; margin: 0 auto; padding: 0 28px 20px; }
.container.narrow { max-width: 840px; }

.page-head { margin-bottom: 34px; padding-top: 24px; }
.page-head h1 { font-family: var(--font-serif); font-size: 42px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.page-head p { color: var(--muted); font-size: 15px; margin-top: 8px; max-width: 560px; }

/* En-tête de page centré (pages marketing : pricing, contact, logiciel…) */
.page-head.centered { text-align: center; margin-bottom: 44px; padding-top: 24px; }

/* En-tête de page posé sur le plan d'atelier 3D (builder, tarifs).
   Le canvas est un fond absolu ; l'intensité est réglée par data-intensity. */
.page-head-3d {
  position: relative; overflow: hidden; border-radius: 16px; z-index: 0;
  padding-bottom: 54px;   /* laisse de la place au sol en perspective */
}
.page-head-3d.centered { padding-bottom: 34px; }
.page-head-3d > *:not(.bg3d) { position: relative; z-index: 1; }
.bg3d {
  position: absolute; inset: -6px -16px 0 -16px; z-index: 0;
  width: auto; height: auto; pointer-events: none;
  /* fondu haut/bas : la scène se dissout au lieu de finir net */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 80%, transparent 100%);
}
.page-head.centered .eyebrow { justify-content: center; margin-bottom: 12px; }
.page-head.centered h1 { font-size: 56px; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.page-head.centered p { margin: 12px auto 0; }
.page-head.centered .measure { max-width: 420px; margin: 16px auto 0; }
.page-head.centered .cta-row { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; align-items: center; }
.page-head.centered .trust { display: flex; gap: 24px; margin-top: 22px; flex-wrap: wrap; }
.page-head.centered .trust span { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.page-head.centered .trust .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(176,138,62,.4); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--gold); }

/* ============ CARTES ============ */
.card, .panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-title, .panel-title {
  font-family: var(--font-serif); font-weight: 600; font-size: 17px;
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px; color: var(--ink);
}
.card-title .num {
  width: 28px; height: 28px; border-radius: var(--radius); flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; font-family: var(--font-mono);
  background: var(--gold-bg); color: var(--gold-2); border: 1px solid var(--gold-line);
}
.card-sub { color: var(--faint); font-size: 13px; margin-bottom: 20px; }
.panel-sub { color: var(--faint); font-size: 13px; margin-bottom: 22px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }

/* ============ FORMULAIRES ============ */
label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); margin: 16px 0 7px; }
select, input[type=number], input[type=tel], input[type=text], input[type=email], input[type=password], textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--radius); font-size: 14px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); outline: none;
  font-family: var(--font-sans); transition: border-color .15s, box-shadow .15s;
}
select:focus, input:focus, textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.12); background: var(--card);
}
select option { background: var(--card); color: var(--ink); }
textarea { min-height: 90px; resize: vertical; }
input::placeholder { color: var(--faint); }

.region-hint {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 15px;
  border-radius: var(--radius); background: var(--gold-bg); border: 1px solid var(--gold-line);
  font-size: 13px; color: var(--gold-2);
}

/* ============ PRESTATIONS ============ */
.services-list { display: flex; flex-direction: column; gap: 10px; }
.service-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px; transition: border-color .15s, box-shadow .15s;
}
.service-item:hover { border-color: var(--gold-line); box-shadow: var(--shadow-sm); }
.service-item .info { flex: 1; min-width: 0; }
.service-item .info select, .service-item .info input[type=text] { background: var(--card); }
.service-item .s-label { font-size: 13px; font-weight: 600; }
.service-item .s-price { font-size: 12px; color: var(--gold-2); margin-top: 3px; font-family: var(--font-mono); }
/* Prix conseillé CLIQUABLE : reprend la valeur dans le champ en un clic.
   Rendu comme un petit bouton discret (l'artisan peut aussi taper son prix). */
.service-item button.s-price {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--gold-bg); border: 1px dashed var(--gold-line);
  border-radius: 6px; padding: 3px 8px; text-align: left;
  transition: background .15s, border-color .15s;
}
.service-item button.s-price::after { content: "+"; font-weight: 700; opacity: .7; }
.service-item button.s-price:hover { background: rgba(176,138,62,.16); border-color: var(--gold); }
.service-item button.s-price.used { border-style: solid; background: rgba(176,138,62,.18); }
.service-item button.s-price.used::after { content: "✓"; }
.service-item .price-wrap { display: flex; align-items: center; gap: 12px; }
.service-item .field { display: flex; align-items: center; gap: 6px; }
.service-item .field-label { font-size: 11px; color: var(--faint); font-weight: 600; white-space: nowrap; }
.service-item .field-input { display: flex; align-items: center; gap: 4px; }
.service-item .price { width: 80px; padding: 9px 11px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); font-size: 13px; text-align: right; outline: none; color: var(--ink); font-family: var(--font-mono); }
.service-item .price:focus { border-color: var(--gold); }
.service-item .price-unit { font-size: 12px; color: var(--faint); }
.service-item .qty { width: 60px; padding: 9px 11px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); font-size: 13px; text-align: center; outline: none; color: var(--ink); font-family: var(--font-mono); }
.service-item .qty:focus { border-color: var(--gold); }
.service-item .remove {
  width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
  color: var(--faint); cursor: pointer; flex-shrink: 0; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.service-item .remove:hover { border-color: var(--danger); color: var(--danger); }

.add-service {
  margin-top: 14px; padding: 12px 18px; border-radius: var(--radius);
  border: 1px dashed var(--gold-line); background: transparent;
  color: var(--gold-2); cursor: pointer; font-size: 13px; font-weight: 600; width: 100%;
  transition: all .15s;
}
.add-service:hover { background: var(--gold-bg); border-style: solid; }
/* CTA add-service + bouton réinitialiser dans la même rangée */
.svc-actions { display: flex; gap: 10px; align-items: stretch; margin-top: 14px; }
.svc-actions .add-service { margin-top: 0; flex: 1; }
.clear-draft {
  padding: 12px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card);
  color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all .15s; white-space: nowrap;
}
.clear-draft:hover { border-color: var(--danger); color: var(--danger); background: rgba(185,67,38,.05); }
@media (max-width:600px) {
  .svc-actions { flex-direction: column; }
  .svc-actions .add-service, .clear-draft { width: 100%; }
}

/* ============ CLIENT ============ */
.client-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.client-fields .full { grid-column: 1 / -1; }

/* ============ BUILDER ============ */
.builder { display: grid; grid-template-columns: 1fr 372px; gap: 30px; align-items: start; }
@media (max-width: 820px) { .builder { grid-template-columns: 1fr; } }
.main-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; max-width: 100%; }

/* Recherche de métier */
.trade-search-wrap { display: flex; flex-direction: column; gap: 8px; }
.trade-search-wrap input {
  padding: 10px 15px; border-radius: var(--radius); font-size: 14px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); outline: none;
}
.trade-search-wrap input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.12); }

.summary-col { position: sticky; top: 88px; }
.summary {
  background: var(--card);
  border: 1px solid var(--gold-line); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.summary::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.summary-title { font-family: var(--font-serif); font-weight: 600; font-size: 18px; margin-bottom: 18px; color: var(--gold-2); }
.summary-lines { max-height: 280px; overflow-y: auto; margin-bottom: 16px; }
.summary-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.summary-line .sl-label { color: var(--muted); }
.summary-line .sl-price { font-weight: 600; color: var(--ink); font-family: var(--font-mono); }
.summary-empty { color: var(--faint); font-size: 13px; text-align: center; padding: 24px 0; }
.summary-totals { border-top: 1px solid var(--line); padding-top: 16px; }
.summary-totals > div { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; color: var(--muted); }
.tva-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; color: var(--muted); }
.tva-input-wrap { display: flex; align-items: center; gap: 5px; }
.tva-input { width: 62px; padding: 6px 8px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); font-size: 13px; text-align: center; color: var(--ink); outline: none; font-family: var(--font-mono); }
.tva-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.12); }
.summary-totals .grand {
  font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: var(--gold-2);
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px;
}
.summary-totals .grand span:last-child { font-weight: 700; }
.summary-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.summary-actions .btn { width: 100%; }
.summary-actions .dl-row { display: flex; gap: 8px; }
.summary-actions .dl-row .btn { flex: 1; font-size: 12.5px; padding: 11px 10px; }
.summary-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.summary-head .summary-title { margin-bottom: 0; }
.draft-flag { font-size: 11px; color: var(--faint); font-family: var(--font-mono); transition: color .2s; }
.draft-flag.on { color: var(--gold-2); }
.card.step { position: relative; }
.card.step .card-title .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--gold-soft);
  color: var(--gold-2); font-size: 13px; font-weight: 700; margin-right: 8px;
  font-family: var(--font-mono);
}
.client-pick { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.client-pick select { flex: 1; }
.btn.btn-sm { padding: 8px 14px; font-size: 12.5px; }
.custom-unit-wrap { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mini-label { font-size: 11.5px; color: var(--muted); margin: 0; }
.custom-unit { width: auto; max-width: 130px; padding: 6px 10px; font-size: 12.5px; }
.client-stats { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 8px 10px; background: var(--paper); border: 1px solid var(--gold-line); border-radius: var(--radius); font-size: 12.5px; color: var(--muted); }
.client-stats .cs-total { font-family: var(--font-mono); font-weight: 600; color: var(--gold-2); }
.client-stats.muted { justify-content: center; color: var(--faint); }
.btn.btn-block { display: block; width: 100%; text-align: center; margin-top: 10px; }
.back-link { display: inline-block; font-size: 13px; color: var(--gold-2); margin-bottom: 10px; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.client-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.client-info-grid > div { display: flex; flex-direction: column; gap: 3px; }
.ci-label { font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.ci-val { font-size: 14px; color: var(--ink); }
/* Code promo */
.promo-box { margin: 12px 0; padding: 14px; border: 1px dashed var(--gold-line); border-radius: var(--radius); background: var(--paper); }
.promo-box label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.promo-row { display: flex; gap: 8px; }
.promo-row input { flex: 1; text-transform: uppercase; }
.promo-msg { font-size: 12.5px; margin-top: 8px; min-height: 16px; }
.promo-msg.ok { color: var(--success, #2e7d32); }
.promo-msg.err { color: var(--danger); }
.promo-temp { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 12px; background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--radius); font-size: 12px; color: var(--gold-2); line-height: 1.35; }
.promo-temp svg { flex: 0 0 auto; }
/* Billing / rétention */
.billing-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bs-plan { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-weight: 600; font-size: 13px; color: var(--muted); }
.bs-plan.pro { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-2); }
.bs-note { font-size: 13px; color: var(--muted); }
.bs-note.warn { color: var(--danger); }
.billing-features { list-style: none; padding: 0; margin: 14px 0 18px; }
.billing-features li { position: relative; padding: 6px 0 6px 22px; font-size: 14px; color: var(--ink); }
.billing-features li::before { content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 7px; border-left: 2px solid var(--gold-2); border-bottom: 2px solid var(--gold-2); transform: rotate(-45deg); }
.billing-actions { margin: 10px 0; }
.billing-actions .btn, .billing-cancel-zone .btn { width: 100%; }
.billing-cancel-zone { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.retention-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.retention-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.retention-card.keep { border-color: var(--gold-line); background: var(--paper); }
.retention-card h3 { font-family: var(--font-serif); font-size: 16px; color: var(--gold-2); margin-bottom: 12px; }
.retention-card ul { list-style: none; padding: 0; }
.retention-card li { padding: 5px 0 5px 20px; position: relative; font-size: 13.5px; }
.retention-card li.muted::before { content: ""; position: absolute; left: 0; top: 11px; width: 11px; height: 2px; background: var(--faint); }
.retention-card.keep li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 7px; border-left: 2px solid var(--gold-2); border-bottom: 2px solid var(--gold-2); transform: rotate(-45deg); }
.retention-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.retention-actions .btn { width: 100%; }
.danger-zone { border-color: var(--danger); border-width: 1.5px; }
/* ==== Bibliothèque de prix (builder + page) ==== */
.svc-actions { flex-wrap: wrap; }
.add-service.lib-btn { border-style: solid; border-color: var(--gold-line); background: var(--gold-bg); }
.field-cost .field-input input { width: 80px; }
.margin-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 0; font-size: 13px; color: var(--gold-2); font-weight: 600; }
.margin-row span:last-child { font-family: var(--font-mono); }
.lib-overlay { z-index: 60; }
.lib-modal { max-width: 560px; }
#lib-search { width: 100%; margin: 10px 0 14px; }
.lib-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.lib-item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s, background .15s; }
.lib-item:hover { border-color: var(--gold); background: var(--gold-bg); }
.li-label { flex: 1; font-size: 13.5px; font-weight: 500; }
.li-meta { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.li-add { font-size: 11.5px; color: var(--gold-2); font-weight: 600; white-space: nowrap; }
.lib-empty { padding: 22px; text-align: center; color: var(--faint); font-size: 13px; }
.lib-import { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
/* ==== Chantiers ==== */
.chantier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.chantier-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cc-num { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.cc-client { font-family: var(--font-serif); font-size: 17px; font-weight: 600; }
.cc-status { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.cc-status.cc-en_cours { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-2); }
.cc-status.cc-paid { background: #eaf5ea; border-color: #bfe0bf; color: #2e7d32; }
.cc-meta { font-size: 12.5px; color: var(--muted); margin: 8px 0 14px; }
.cc-progress-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 12px; }
.cc-progress-wrap label { font-size: 11.5px; color: var(--faint); text-transform: uppercase; }
.cc-bar { height: 10px; background: var(--paper); border: 1px solid var(--gold-line); border-radius: 999px; overflow: hidden; cursor: pointer; }
.cc-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.cc-pct { font-family: var(--font-mono); font-size: 12px; color: var(--gold-2); }
.cc-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.cc-dates label { display: block; font-size: 11px; color: var(--faint); margin-bottom: 4px; }
.cc-paid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; background: var(--paper); border-radius: var(--radius); margin-bottom: 14px; }
.cc-paid label { display: block; font-size: 11px; color: var(--faint); }
.cc-paid-amt, .cc-balance { font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.cc-balance { color: var(--danger); }
.cc-pnl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; background: var(--card-2); border-radius: var(--radius); margin-bottom: 14px; }
.cc-pnl label { display: block; font-size: 11px; color: var(--faint); }
.cc-cost, .cc-margin { font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.cc-cost { color: var(--muted); }
.cc-margin.pos { color: #2e7d32; }
.cc-margin.neg { color: var(--danger); }
.cc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ==== Collaborateurs ==== */
.collab-status { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); }
.collab-status.invited { color: var(--muted); }
.collab-status.active { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-2); }
@media (max-width: 600px) {
  .chantier-grid { grid-template-columns: 1fr; }
  .cc-dates, .cc-paid { grid-template-columns: 1fr; }
  .cc-progress-wrap { grid-template-columns: 1fr; }
  .cc-actions .btn { flex: 1 1 100%; min-height: 44px; }
}

/* ⚠️ Débordement horizontal de TABLETTE (601-1100px), corrigé 2026-09.
   `.mock-glow` (halo décoratif du hero) est en `position:absolute` avec des
   `inset` négatifs assumés sur desktop. Le correctif n'existait QUE sous 600px
   (`inset: 0` dans la media query mobile) : entre 601 et 1100px, le halo
   sortait de la page et créait un défilement horizontal (mesuré : 59-76px à
   768px et 900px). `overflow-x: clip` ne coûte rien ici et ne casse pas les
   éléments `position:sticky`. */
@media (min-width: 601px) and (max-width: 1100px) {
  html, body { overflow-x: clip; max-width: 100%; }
  .mock-glow { inset: -6% -4%; }
}

.error { color: var(--danger); font-size: 13px; margin-top: 10px; }

/* Bandeau upsell Pro dans le récapitulatif */
.upsell-banner {
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--gold-bg), rgba(176,138,62,.03));
}
/* Bandeau d'upsell repliable : replié tant que le visiteur n'a rien chiffré,
   il ne doit pas occuper 40 % du récapitulatif ni distraire de l'action. */
.upsell-banner > summary { display: block; cursor: pointer; list-style: none; }
.upsell-banner > summary::-webkit-details-marker { display: none; }
.ub-head {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--gold-2);
  margin-bottom: 0;
}
.upsell-banner .ub-body { margin-top: 12px; }
.ub-list { list-style: none; margin: 0 0 14px; }
.ub-list li { font-size: 13px; color: var(--muted); padding: 5px 0; display: flex; align-items: center; gap: 8px; }
/* Coche dessinée en CSS (aucun caractère emoji/dingbat dans l'UI) */
.ub-list li::before {
  content: ""; width: 12px; height: 7px; flex-shrink: 0;
  border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg); margin: 0 2px 3px 1px;
}
.upsell-banner .btn { width: 100%; }
.ub-note { text-align: center; color: var(--faint); font-size: 12px; margin-top: 12px; }

/* ---- Verrouillage des prix pour les visiteurs non connectés ----
   On floute les DONNÉES DE MARCHÉ (prix conseillés, étude de concurrence) :
   c'est la valeur du produit, elle se mérite par un compte.
   MAIS on laisse VISIBLE le total que le visiteur a lui-même composé : il a
   saisi ses prestations, lui cacher sa propre somme est de la frustration pure
   (le compte est gratuit, il n'y a rien à protéger). C'est ce total visible qui
   crée l'investissement -> il s'inscrit pour l'enregistrer et l'exporter. */
.guest .region-hint,
.guest .service-item .s-price,
.guest .service-item .price-unit,
.guest .competition .comp-table {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  position: relative;
}
.guest .region-hint::after,
.guest .service-item .s-price::after {
  content: "Connectez-vous pour voir les prix conseillés";
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; color: var(--gold-2); font-weight: 600; font-size: 12px;
  filter: none; z-index: 2; white-space: nowrap;
}
.guest .service-item .s-price::after { font-size: 11px; }
/* Le bouton « prix conseillé » reste CLIQUABLE pour un visiteur : c'est le
   geste le plus répété du builder, et le rendre inerte pénalisait 100 % du
   trafic Google (il était `pointer-events:none` + flou). On garde l'indication
   que c'est une donnée de marché, sans bloquer l'action. */
/* Le prix conseillé est lisible ET cliquable pour un visiteur : il vient de
   composer un devis, lui cacher la valeur qu'il est invité à reprendre n'a
   aucun sens (et le flou sur un bouton actionnable est trompeur). Ce qui reste
   réservé, c'est l'ÉTUDE DE MARCHÉ détaillée (concurrence) — voir .competition. */
.guest .service-item button.s-price { pointer-events: auto; cursor: pointer; filter: none; }
.guest .service-item button.s-price::after { content: "+"; font-size: 12px; }
.guest .service-item .price-unit { filter: none; pointer-events: auto; }
.guest .competition::before {
  content: "Étude de marché réservée aux comptes Pro";
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  text-align: center; color: var(--gold-2); font-weight: 600; font-size: 13px; z-index: 3;
  filter: none;
}
.guest .competition { position: relative; }

/* Les totaux du devis restent visibles pour les visiteurs (voir commentaire
   ci-dessus) : plus de message "Total réservé aux comptes". */

/* ============ RÉSULTAT / DOCUMENT ============ */
.result { display: none; margin-top: 28px; min-width: 0; }
.result.show { display: block; }
#quote-body { min-width: 0; overflow-x: auto; }

.quote-doc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.quote-doc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 28px;
  background: linear-gradient(135deg, #8a6a2a, #b08a3e 55%, #6e5320);
  color: #fff; position: relative;
}
.quote-doc-head::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, transparent 2px 8px);
}
.quote-doc-head .q-title { font-family: var(--font-serif); font-size: 20px; font-weight: 700; }
.quote-doc-head .q-sub { font-size: 12px; opacity: .85; margin-top: 3px; }
.quote-doc .q-note { font-size: 11px; color: var(--muted); margin: 8px 0 4px; font-style: italic; }
.quote-doc-head .q-num { font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: 2px; opacity: .9; }

.quote-table { width: 100%; border-collapse: collapse; }
.quote-table thead th {
  text-align: left; padding: 14px 28px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.quote-table thead th.num, .quote-table tbody td.num { text-align: right; }
.quote-table tbody td { padding: 16px 28px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle; }
.quote-table tbody tr:last-child td { border-bottom: none; }
.quote-table .q-label { font-weight: 600; color: var(--ink); }
.quote-table .q-detail { color: var(--faint); font-size: 12px; margin-top: 2px; }
.quote-table .q-price { font-family: var(--font-mono); font-weight: 600; color: var(--gold-2); }

.quote-totals { background: var(--paper-2); border-top: 1px solid var(--line); padding: 22px 28px; }
.quote-totals-row { display: flex; justify-content: flex-end; gap: 20px; align-items: center; padding: 6px 0; font-size: 14px; color: var(--muted); }
.quote-totals-row .label { width: 150px; text-align: right; }
.quote-totals-row .value { width: 120px; text-align: right; font-weight: 600; color: var(--ink); font-family: var(--font-mono); }
.quote-totals-row.grand { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.quote-totals-row.grand .label { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--gold-2); }
.quote-totals-row.grand .value { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--gold-2); }

/* Étude de marché */
.competition { margin-top: 22px; background: var(--card); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.competition h3 { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--gold-2); padding: 18px 28px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.comp-table { width: 100%; border-collapse: collapse; }
.comp-table th { text-align: left; padding: 12px 28px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-soft); }
.comp-table th.num, .comp-table td.num { text-align: right; }
.comp-table td { padding: 12px 28px; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); }
.comp-table tr:last-child td { border-bottom: none; }
.comp-table .c-label { color: var(--ink); font-weight: 500; }
.comp-table td.num { font-family: var(--font-mono); }
.comp-note { padding: 13px 28px; font-size: 12px; color: var(--faint); border-top: 1px solid var(--line-soft); }

/* ============ LANDING ============ */
.hero {
  display: grid; grid-template-columns: 1fr 0.92fr; gap: 48px; align-items: center;
  padding: 38px 0 54px; position: relative;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 44px; padding: 24px 0 48px; } }
.hero-copy { text-align: left; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-2); font-weight: 700;
  background: var(--gold-bg); border: 1px solid var(--gold-line); padding: 9px 20px; border-radius: 40px;
}
.hero .eyebrow::before, .hero .eyebrow::after { content: ""; width: 18px; height: 1px; background: var(--gold); }
.hero h1 {
  font-family: var(--font-serif); font-size: 56px; font-weight: 500; line-height: 1.06;
  letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}
@media (max-width: 600px) { .hero h1 { font-size: 34px; letter-spacing: -.025em; } }
@media (min-width: 601px) and (max-width: 900px) { .hero h1 { font-size: 44px; } }
.hero h1 .accent, .page-head h1 .accent {
  background: linear-gradient(120deg, #c9a457, #8a6a2a, #b08a3e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic; font-weight: 600;
}
.hero p { color: var(--ink-2); margin: 26px 0 0; font-size: 20px; max-width: 560px; line-height: 1.65; }
.cta-row { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; align-items: center; }
.cta-row .btn { max-width: 100%; }
.hero .cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; align-items: center; }
.hero .cta-row .btn.big { padding: 15px 32px; font-size: 15.5px; }  /* legerement reduit (demande utilisateur) */
.hero .trust { display: flex; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.hero .trust span { font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; font-weight: 500; }
.hero .trust .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(176,138,62,.5); }

/* ============ COUCHE 3D : PLAN D'ATELIER + PROFONDEUR ============
   Le hero pose une perspective d'atelier : plan technique au sol (canvas
   #atelier3d) + mockup du builder incliné qui réagit au pointeur.
   Tout est décoratif (aria-hidden) et coupé si prefers-reduced-motion. */
.hero-3d {
  position: absolute; inset: -10px -20px; z-index: 0;
  pointer-events: none; overflow: hidden; border-radius: 16px;
}
.hero-3d canvas { display: block; width: 100%; height: 100%; }
.hero-copy { position: relative; z-index: 2; }
.hero-mock {
  position: relative; z-index: 1;
  transform-style: preserve-3d; will-change: transform;
}
.mock-glow {
  position: absolute; inset: -16% -12%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(176,138,62,.20), transparent 72%);
  filter: blur(20px); animation: mockGlow 7s ease-in-out infinite;
}
@keyframes mockGlow {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: .9; transform: scale(1.06); }
}
.mock-window { transform-style: preserve-3d; backface-visibility: hidden; }
/* Reflet qui balaie l'écran du mockup */
.mock-window::after {
  content: ""; position: absolute; top: -60%; left: -30%; width: 45%; height: 220%;
  z-index: 3; pointer-events: none; rotate: 18deg;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  animation: mockSheen 8s ease-in-out infinite;
}
@keyframes mockSheen {
  0%, 60% { transform: translateX(-160%); }
  88%, 100% { transform: translateX(360%); }
}
/* Repos incliné (JS absent / reduced-motion) — desktop uniquement */
@media (min-width: 901px) {
  .hero-mock.mock-static .mock-window {
    transform: perspective(1500px) rotateY(-13deg) rotateX(7deg);
  }
}
/* Halo 3D sous le hero : la scène flotte au-dessus du papier */
.hero h1 { text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 18px 44px rgba(25,23,19,.10); }

/* Badges différenciateurs : alignés, même hauteur, même style */
.hero-badges { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; width: fit-content;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink);
}
.hero-badge svg { flex-shrink: 0; color: var(--gold-2); }
.hero-badge span { line-height: 1.4; }

/* Mockup du builder (aperçu produit) */
.hero-mock { position: relative; }
.hero-mock::before {
  content: ""; position: absolute; inset: -40px -30px; z-index: 0; pointer-events: none;
  background: radial-gradient(520px 360px at 50% 38%, rgba(176,138,62,.18), transparent 70%);
}
.mock-window {
  position: relative; z-index: 1;
  background: var(--card); border: 1px solid var(--gold-line); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(25,23,19,.18), 0 8px 24px rgba(176,138,62,.18);
  overflow: hidden;
}
.mock-window::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.mock-bar {
  display: flex; align-items: center; gap: 6px; padding: 13px 16px;
  background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mock-dot:first-child { background: var(--gold-soft); }
.mock-title { margin-left: 10px; font-size: 12px; color: var(--faint); letter-spacing: 1px; }
.mock-body { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0; }
.mock-col { padding: 24px; }
.mock-field { margin-bottom: 18px; }
.mock-label { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 6px; }
.mock-select { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; color: var(--ink); background: var(--card); }
.mock-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-2); }
.mock-line .mock-price { font-family: var(--font-mono); color: var(--gold-2); font-weight: 600; }
.mock-summary { padding: 24px; background: var(--paper-2); border-left: 1px solid var(--line); }
.mock-sum-title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--gold-2); margin-bottom: 16px; }
.mock-total { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; color: var(--muted); }
.mock-total span:last-child { font-family: var(--font-mono); color: var(--ink); font-weight: 600; }
.mock-total.mock-grand { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; }
.mock-total.mock-grand span { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--gold-2); }
.mock-btn { margin-top: 20px; padding: 13px; text-align: center; border-radius: var(--radius); color: #fff; font-size: 14px; font-weight: 600; background: linear-gradient(165deg, #c19a4e, #b08a3e 50%, #8a6a2a); box-shadow: 0 3px 8px rgba(176,138,62,.3), inset 0 1px 0 rgba(255,255,255,.28); }

/* Sections */
.section { padding: 8px 0 20px; }
.section-head { text-align: center; margin-bottom: 22px; }
.section-head .eyebrow { justify-content: center; margin-bottom: 12px; }
.section-head .eyebrow::after { content: ""; width: 30px; height: 1px; background: var(--gold); }
.section-head h2 { font-family: var(--font-serif); font-size: 38px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.section-head p { color: var(--muted); margin-top: 14px; max-width: 560px; margin-inline: auto; font-size: 15px; }
.section-head .measure { max-width: 420px; margin: 18px auto 0; }

/* Étapes */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-sm); position: relative; text-align: left; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.step::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px 160px at var(--mx,50%) -20%, rgba(176,138,62,.14), transparent 60%); opacity: 0; transition: opacity .3s ease;
}
.step:hover { transform: translateY(-4px); border-color: var(--gold-line); box-shadow: 0 8px 24px rgba(25,23,19,.07), 0 20px 50px rgba(176,138,62,.12), inset 0 1px 0 rgba(255,255,255,.5); }
.step:hover::after { opacity: 1; }
.step .step-num {
  position: absolute; top: 20px; right: 22px;
  font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: 1px;
}
.step .step-icon {
  width: 48px; height: 48px; border-radius: var(--radius); margin-bottom: 18px;
  display: grid; place-items: center; color: var(--gold-2);
  background: linear-gradient(160deg, var(--gold-soft), var(--gold-bg));
  border: 1px solid var(--gold-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.step h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.step p { color: var(--muted); font-size: 14px; line-height: 1.7; }

/* Ligne discrète vers l'offre Visibilité Pro (site web + SEO, 199 €/mois) */
.hero-alt { color: var(--muted); font-size: 14px; margin-top: 16px; }
.hero-alt a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold-line); }
.hero-alt a:hover { border-color: var(--accent); }

/* CTA alternatif discret (2e action hero sans bouton plein) */
.cta-alt {
  color: var(--accent); font-weight: 600; font-size: 15px; text-decoration: none;
  border-bottom: 1px solid var(--gold-line); padding-bottom: 2px; transition: border-color .15s, color .15s;
}
.cta-alt:hover { border-color: var(--accent); color: var(--accent-strong); }

/* FAQ accordéon (landing) — replié par défaut, allège fortement la page.
   Distinct de .faq-item (utilisé tel quel par les pages SEO métiers). */
.faq-acc-wrap { max-width: 780px; margin: 0 auto; }
.faq-acc {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: border-color .2s ease;
}
.faq-acc:hover { border-color: var(--gold-line); }
.faq-acc summary {
  cursor: pointer; list-style: none; padding: 19px 24px;
  font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-acc summary:hover { color: var(--accent); }
.faq-plus { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform .22s ease;
}
.faq-plus::before { top: 6.2px; left: 0; width: 14px; height: 1.6px; }
.faq-plus::after { left: 6.2px; top: 0; width: 1.6px; height: 14px; }
.faq-acc[open] .faq-plus::after { transform: scaleY(0); }
.faq-acc[open] summary { color: var(--accent); }
.faq-acc-body { padding: 0 24px 20px; }
.faq-acc-body p { color: var(--muted); font-size: 14px; line-height: 1.75; }

/* CTA final */
.cta-final {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #f6f1e6, #efe8d6);
  border: 1px solid var(--gold-line); border-radius: var(--radius-lg);
  padding: 64px 36px; text-align: center; box-shadow: var(--shadow-md); margin-bottom: 70px;
}
.cta-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 300px at 50% -20%, rgba(176,138,62,.18), transparent 70%);
}
.cta-final::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.cta-final .eyebrow { justify-content: center; margin-bottom: 14px; }
.cta-final h2 { font-family: var(--font-serif); font-size: 38px; font-weight: 500; color: var(--ink); position: relative; letter-spacing: -.02em; }
.cta-final p { color: var(--muted); margin: 16px auto 30px; max-width: 480px; position: relative; font-size: 15px; }
.cta-final .btn { position: relative; margin-inline: auto; display: inline-flex; }
.cta-final .free { font-size: 13px; color: var(--faint); margin-top: 18px; position: relative; }

/* Témoignage */
.testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.testimonial {
  max-width: 680px; margin: 0 auto; text-align: center;
  padding: 30px 28px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.testimonials .testimonial { max-width: none; }
.t-stars { display: flex; justify-content: center; gap: 2px; margin-bottom: 14px; }
.t-quote { margin-bottom: 18px; }
.t-text {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.6;
  color: var(--ink); font-weight: 500; margin-bottom: 20px;
}
.t-author { display: flex; align-items: center; justify-content: center; gap: 12px; }
.t-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 16px; color: #fff;
  background: linear-gradient(160deg, #d8b97c, #a9863f);
}
.t-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.t-role { font-size: 12px; color: var(--faint); }

/* Bandeau de rassurance */
.trust-bar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px;
  margin: 0 0 8px; padding: 18px 0;
}
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.trust-item svg { color: var(--gold-2); flex-shrink: 0; }

/* Bandeau de confiance pricing */
.pricing-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px;
  margin-top: 28px; padding: 18px 0; border-top: 1px solid var(--line-soft);
}
.pt-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.pt-item svg { color: var(--gold-2); flex-shrink: 0; }

/* Barre de partage du devis */
.share-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.share-label { font-size: 12px; color: var(--faint); margin-right: 4px; }
.share-btn {
  width: 34px; height: 34px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card);
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: all .15s;
}
.share-btn:hover { border-color: var(--gold); color: var(--gold-2); }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 24px; }
.blog-card {
  display: block; padding: 24px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink); transition: all .15s;
}
.blog-card:hover { border-color: var(--gold); box-shadow: var(--shadow-md); }
.blog-card h2, .blog-card h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; margin: 8px 0; color: var(--ink); }
.blog-card p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.blog-cat { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.blog-meta { font-size: 12px; color: var(--faint); margin-top: 12px; }
.blog-article { max-width: 720px; margin: 0 auto; }
.blog-article h1 { font-family: var(--font-serif); font-size: 34px; font-weight: 600; margin: 12px 0; line-height: 1.2; }
.blog-article h2 { font-family: var(--font-serif); font-size: 24px; font-weight: 600; margin: 28px 0 12px; }
.blog-article p { color: var(--muted); font-size: 15px; line-height: 1.8; }
.blog-intro { font-size: 17px !important; color: var(--ink) !important; }
.blog-cta { background: linear-gradient(160deg, #f6f1e6, #efe8d6); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); padding: 28px; text-align: center; margin: 32px 0; }
.blog-cta h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.blog-cta p { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.blog-faq { margin-top: 32px; }
.blog-related { margin-top: 40px; }

/* Footer — 4 colonnes équilibrées (refonte 2026-09).
   Avant : 5 colonnes auto-fit -> mur vertical de ~1280px sur mobile.
   Désormais : grille explicite desktop, 2 colonnes sur mobile. */
.footer { border-top: 1px solid var(--line); padding: 40px 0 26px; }
.footer-grid {
  display: grid; gap: 34px;
  grid-template-columns: 1.5fr 1fr 1.15fr 0.85fr;
}
.footer h4 { font-family: var(--font-serif); font-size: 14px; font-weight: 600; margin-bottom: 14px; color: var(--accent); }
.footer a { display: block; color: var(--muted); text-decoration: none; font-size: 13px; padding: 4px 0; transition: color .15s; }
.footer a:hover { color: var(--accent); }
.footer-tagline { color: var(--faint); font-size: 13px; line-height: 1.7; max-width: 260px; }
.footer-mail { margin-top: 10px; color: var(--accent); font-weight: 500; }
.footer .bottom { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-soft); text-align: center; color: var(--faint); font-size: 13px; }
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tagline { max-width: 420px; }
}
@media (max-width: 420px) {
  .footer a { padding: 5px 0; }
}

/* ============ DASHBOARD ============ */
.plan-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 9px 18px; border-radius: 40px; font-size: 13px; color: var(--muted);
  background: var(--card); border: 1px solid var(--line);
}
.plan-badge b { color: var(--gold-2); font-weight: 600; }
.plan-badge a { color: var(--gold-2); font-weight: 600; text-decoration: none; }
.plan-badge.pro { background: var(--gold-bg); border-color: var(--gold-line); color: var(--gold-2); }
.plan-badge.free { color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 28px; }
.stat-card {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.stat-card .label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.stat-card .value { font-family: var(--font-serif); font-size: 32px; font-weight: 600; color: var(--gold-2); margin-top: 8px; }
.stat-card .value.plain { color: var(--ink); }

.empty { text-align: center; padding: 48px 20px; color: var(--faint); }
.empty .big { font-size: 36px; margin-bottom: 16px; color: var(--accent); }
.empty p { margin-bottom: 20px; }

/* Table devis */
.quote-table { width: 100%; border-collapse: collapse; }
.quote-table th {
  text-align: left; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.quote-table td { padding: 14px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle; }
.quote-table tbody tr { transition: background .12s; }
.quote-table tbody tr:hover td { background: var(--card-2); }
.quote-table .client { font-weight: 600; color: var(--ink); }
.quote-table .muted { color: var(--muted); }
.quote-table .amount { font-family: var(--font-mono); font-weight: 600; color: var(--gold-2); }
.quote-table .actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Table leads admin */
.lead-table-wrap { overflow-x: auto; }
.lead-table th:first-child, .lead-table td:first-child { white-space: nowrap; }
.lead-row-new td { background: var(--gold-bg); }
.lead-phone { font-size: 12px; color: var(--faint); }
.lead-msg { max-width: 240px; }
.lead-status-form { margin: 0; }
.lead-status-select { width: auto; padding: 7px 11px; font-size: 13px; border-radius: var(--radius); }

.icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--card); color: var(--muted); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold-2); }
.icon-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

/* Bouton danger (suppression) */
.btn.danger {
  background: transparent; color: var(--danger);
  border: 1px solid var(--danger);
}
.btn.danger:hover { background: var(--danger); color: #fff; }

/* Filtres du dashboard */
.dash-filters { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.dash-search {
  flex: 1; min-width: 200px; max-width: 340px;
  padding: 10px 15px; border-radius: var(--radius); font-size: 13px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); outline: none;
}
.dash-search:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,62,.12); }
.dash-status {
  width: auto; padding: 10px 15px; border-radius: var(--radius); font-size: 13px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); cursor: pointer;
}
.q-status { width: auto; padding: 6px 9px; font-size: 12px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.q-status:focus { border-color: var(--gold); }

/* ============ PRICING ============ */
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 16px; box-shadow: var(--shadow-sm); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.faq-item:hover { border-color: var(--gold-line); box-shadow: 0 8px 24px rgba(25,23,19,.06), 0 16px 40px rgba(176,138,62,.1), inset 0 1px 0 rgba(255,255,255,.5); }
.faq-item h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.faq-item p { color: var(--muted); font-size: 14px; line-height: 1.75; }
.why-block { background: var(--card); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); padding: 32px 36px; max-width: 780px; margin: 0 auto; box-shadow: var(--shadow-sm); }
.why-block p { color: var(--muted); font-size: 15px; line-height: 1.85; }
.other-trades { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 920px; margin: 0 auto; }

/* ── « Voir plus » : les 150-268 liens de maillage étaient rendus en puces
   plates → mur de liens illisible (mesuré : 268 liens sur /prix/<metier>,
   12 361 px de haut). Repliés dans un dépliant discret.
   ⚠️ Les liens RESTENT dans le DOM (donc crawlables) : on ne referme que
   VISUELLEMENT. Le SEO de maillage est préservé intégralement. */
.more-links { max-width: 920px; margin: 18px auto 0; text-align: center; }
.more-links > summary {
  display: inline-block; cursor: pointer; list-style: none;
  padding: 9px 18px; border: 1px solid var(--gold-line); border-radius: 999px;
  color: var(--accent); font-size: 13.5px; letter-spacing: .01em;
  transition: background .15s, border-color .15s;
}
.more-links > summary::-webkit-details-marker { display: none; }
.more-links > summary::after { content: " +"; color: var(--faint); }
.more-links[open] > summary::after { content: " –"; }
.more-links > summary:hover { background: rgba(176,138,62,.07); border-color: var(--accent); }
.more-links[open] > summary { margin-bottom: 16px; }
.more-links .other-trades { margin-top: 0; }

/* Index des départements (/prix-par-departement) : 101 entrées alignées en
   colonnes. Ce n'est PAS un nuage de puces — c'est une table de matières. */
.dept-index { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; max-width: 920px; margin: 0 auto; }
.dept-index li { background: var(--card); }
.dept-index a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 11px 16px; color: var(--muted); font-size: 14px; text-decoration: none; transition: background .15s, color .15s; }
.dept-index a:hover { background: rgba(176,138,62,.07); color: var(--ink); }
.dept-index .dept-code { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Tableau long (160 lignes) rendu défilant : la page cesse d'être un mur, mais
   chaque ligne reste présente dans le DOM. Barre de défilement thémée depuis la
   palette (un défaut du navigateur n'appartient à aucun système). */
.table-scroll { border: 1px solid var(--line); border-radius: var(--radius-lg); }
.table-scroll .quote-table { margin: 0; }
.table-scroll::-webkit-scrollbar { width: 10px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 999px; border: 3px solid var(--card); }
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Grille de métiers vedettes (landing) */
.trade-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 920px; margin: 0 auto; }
@media (max-width: 900px) { .trade-grid { grid-template-columns: repeat(2, 1fr); } }
.trade-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.trade-card:hover { border-color: var(--gold-line); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.trade-card .trade-icon {
  width: 40px; height: 40px; border-radius: var(--radius); flex-shrink: 0;
  display: grid; place-items: center; color: var(--gold-2);
  background: var(--gold-bg); border: 1px solid var(--gold-line);
}
.trade-card .trade-name { font-size: 14px; font-weight: 600; flex: 1; }
.trade-card .trade-arrow { color: var(--faint); transition: color .15s, transform .15s; }
.trade-card:hover .trade-arrow { color: var(--gold-2); transform: translateX(2px); }
.trade-all { text-align: center; margin-top: 22px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: stretch; }
.plan {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 36px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.plan::before, .plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.plan::before { padding: 1px; background: linear-gradient(135deg, rgba(176,138,62,.35), rgba(230,223,208,.1) 40%, rgba(176,138,62,.18)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.plan:hover { transform: translateY(-5px); box-shadow: 0 12px 34px rgba(25,23,19,.08), 0 24px 60px rgba(176,138,62,.14), 0 1px 0 rgba(255,255,255,.6) inset; border-color: rgba(176,138,62,.4); }
.plan.featured {
  border-color: rgba(176,138,62,.45);
  box-shadow: 0 8px 26px rgba(176,138,62,.14), 0 26px 64px rgba(176,138,62,.16), 0 1px 0 rgba(255,255,255,.6) inset;
}
.plan.featured::before { background: linear-gradient(135deg, rgba(193,154,78,.55), rgba(230,223,208,.15) 45%, rgba(176,138,62,.3)); }
.plan.featured::after {
  content: ""; position: absolute; top: -40%; left: -20%; width: 60%; height: 120%; rotate: 25deg;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  animation: planSheen 4.5s ease-in-out infinite;
}
@keyframes planSheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(320%); } }
.plan.featured .tag {
  display: inline-block; align-self: flex-start;
  background: linear-gradient(160deg, #c19a4e, #b08a3e); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 40px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(176,138,62,.3);
}
.plan .name { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.plan .price { font-family: var(--font-serif); font-size: 50px; font-weight: 600; color: var(--gold-2); margin: 14px 0 4px; }
.plan .price small { font-size: 14px; color: var(--faint); font-weight: 500; }
.plan .desc { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.plan ul { list-style: none; margin-bottom: 24px; flex: 1; }
.plan li { padding: 9px 0; font-size: 14px; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.plan li .check, .plan li .x {
  position: relative; width: 16px; height: 16px; flex-shrink: 0;
  display: inline-block;
}
/* Coche dessinée en CSS (aucun emoji/caractère dans le HTML) */
.plan li .check::before {
  content: ""; position: absolute; left: 3px; top: 6px;
  width: 9px; height: 5px; border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent); transform: rotate(-45deg);
}
/* Croix dessinée en CSS */
.plan li .x::before, .plan li .x::after {
  content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 1.6px;
  background: var(--faint); border-radius: 2px;
}
.plan li .x::before { transform: rotate(45deg); }
.plan li .x::after { transform: rotate(-45deg); }
.plan li.muted { color: var(--faint); }

/* Cellules du comparatif : Oui / Non sans caractère texte */
.quote-table td.yes, .quote-table td.no { position: relative; }
.quote-table td.yes::before {
  content: ""; display: inline-block; width: 9px; height: 5px; margin: 0 6px 2px 0;
  border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}
.quote-table td.no::before {
  content: ""; display: inline-block; width: 11px; height: 1.6px; margin-bottom: 3px;
  background: var(--faint); border-radius: 2px; transform: rotate(45deg);
}

/* Carte d'offre seule : largeur maîtrisée (évite le grand vide à droite) */
.plans.one { grid-template-columns: minmax(0, 560px); justify-content: center; }
/* Grille à deux offres (Gratuit + Pro) : deux colonnes centrées */
.plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
@media (max-width: 700px) { .plans.two { grid-template-columns: 1fr; } }

.note { text-align: center; color: var(--faint); font-size: 13px; margin-top: 32px; }

/* ============ AUTH ============ */
.auth-body {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; min-height: 100vh; padding: 0;
  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(176,138,62,.08), transparent 60%),
    radial-gradient(600px 400px at 90% 100%, rgba(176,138,62,.05), transparent 55%),
    var(--paper);
}
.auth-body .topbar { width: 100%; }
.auth-body .auth-card { margin: auto; }
.auth-card {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 40px; width: 100%; max-width: 440px;
  position: relative; overflow: hidden;
}
/* Variante élargie : page de création de compte (plus de champs) */
.auth-card.wide { max-width: 520px; padding: 40px; }
.auth-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.auth-card::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.auth-card .card-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.auth-card .brand { margin-bottom: 0; }
.auth-card h1 { font-family: var(--font-serif); font-size: 30px; font-weight: 600; margin-bottom: 6px; color: var(--ink); letter-spacing: -.01em; }
.auth-card .sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.auth-card .btn { width: 100%; margin-top: 24px; }
.auth-card .btn.big { padding: 15px 20px; font-size: 15px; }
.alt { text-align: center; margin-top: 22px; font-size: 13px; color: var(--muted); }
.alt a { color: var(--gold-2); font-weight: 600; text-decoration: none; }
.alt a:hover { text-decoration: underline; }
.back { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--faint); text-decoration: none; }
.back:hover { color: var(--gold-2); }

/* Sections de formulaire (auth) : diviseur or + label — signature "atelier" */
.form-section {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 4px; padding-top: 4px;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.form-section:first-of-type { margin-top: 0; }
.form-section::before, .form-section::after {
  content: ""; height: 1px; flex: 0 0 22px; background: var(--gold);
}
.form-section::after { flex: 1; background: repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 6px); opacity: .5; }

.form-row { display: flex; gap: 12px; }
.form-row > * { flex: 1; }
.form-row .f2 { flex: 2; }

/* Champ mot de passe avec œil */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: none; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--faint); border-radius: var(--radius);
  transition: color .15s, background .15s;
}
.pw-toggle:hover { color: var(--gold-2); background: var(--card-2); }
.pw-toggle svg { display: block; }

/* ============ ACCOUNT / PROFILE ============ */
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.info-row:last-child { border-bottom: none; }
.info-row .label { color: var(--muted); font-size: 14px; }
.info-row .value { font-weight: 600; font-size: 14px; color: var(--ink); }
.hint { font-size: 12px; color: var(--faint); margin-top: 8px; }
.hint code { background: var(--paper-2); padding: 2px 6px; border-radius: 4px; color: var(--gold-2); }

/* ============ FLASH ============ */
.flash { padding: 14px 18px; border-radius: var(--radius); font-size: 13px; margin-bottom: 20px; border: 1px solid; }
.flash.error { background: rgba(178,58,46,.06); border-color: rgba(178,58,46,.25); color: var(--danger); }
.flash.success { background: rgba(61,122,74,.06); border-color: rgba(61,122,74,.25); color: var(--ok); }

/* ============ FOOTER inline (app pages) ============ */
.footer-inline { text-align: center; color: var(--faint); font-size: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-soft); }

/* ============ LEADS / SITE WEB ============ */
.lead-hero { text-align: center; padding: 44px 0 44px; }
.lead-hero h1 { font-family: var(--font-serif); font-size: 46px; font-weight: 500; line-height: 1.06; color: var(--ink); letter-spacing: -.02em; }
.lead-hero h1 .accent {
  background: linear-gradient(120deg, #c19a4e, #8a6a2a, #b08a3e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic; font-weight: 600;
}
.lead-hero p { color: var(--muted); margin: 20px auto 0; font-size: 16px; max-width: 560px; }

.lead-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; max-width: 980px; margin: 0 auto; }
@media (max-width: 820px) { .lead-layout { grid-template-columns: 1fr; } }

.lead-benefits h3, .lead-form-wrap h3 { font-family: var(--font-serif); font-size: 24px; font-weight: 600; margin-bottom: 24px; color: var(--ink); }
.lead-benefit { display: flex; gap: 15px; margin-bottom: 22px; }
.lead-benefit .lb-icon {
  width: 42px; height: 42px; border-radius: var(--radius); flex-shrink: 0;
  display: grid; place-items: center; color: var(--gold-2);
  background: var(--gold-bg); border: 1px solid var(--gold-line);
}
.lead-benefit strong { font-size: 14px; color: var(--ink); display: block; margin-bottom: 3px; }
.lead-benefit p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.lead-note {
  display: flex; align-items: center; gap: 8px; margin-top: 26px;
  padding: 13px 17px; border-radius: var(--radius); color: var(--gold-2);
  background: var(--gold-bg); border: 1px solid var(--gold-line); font-size: 13px;
}

.lead-form-wrap { background: var(--card); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-md); }
.lead-form-wrap h3 { margin-bottom: 10px; }
.lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .lead-row { grid-template-columns: 1fr; } }
.lead-privacy { text-align: center; color: var(--faint); font-size: 12px; margin-top: 14px; }
/* Case de consentement RGPD (opt-in explicite) */
.consent-box { margin-top: 16px; display: flex; align-items: flex-start; gap: 10px; }
.consent-box input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold-2); flex-shrink: 0; }
.consent-box label.consent-label { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; font-weight: 400; }
.consent-box label.consent-label a { color: var(--gold-2); text-decoration: underline; }

.lead-success { text-align: center; max-width: 540px; margin: 30px auto; padding: 54px 32px; background: var(--card); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.lead-success-icon { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #c19a4e, #8a6a2a); }
.lead-success h2 { font-family: var(--font-serif); font-size: 28px; font-weight: 600; margin-bottom: 12px; color: var(--ink); }
.lead-success p { color: var(--muted); margin-bottom: 26px; }

/* ============ LEGAL / CGV ============ */
.legal-card h1 { font-family: var(--font-serif); font-size: 30px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.legal-card .updated { color: var(--faint); font-size: 13px; margin-bottom: 24px; }
.legal-card h2 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; margin: 26px 0 10px; color: var(--gold-2); }
.legal-card p, .legal-card li { color: var(--muted); font-size: 14px; line-height: 1.8; }
.legal-card ul { padding-left: 20px; margin: 8px 0; }
.legal-card strong { color: var(--ink); }

/* ============ RÉVÉLATION AU SCROLL ============ */
/* Toujours visible. L'animation est un simple léger translateY qui ne masque
   JAMAIS le contenu (pas d'opacity:0) — robuste même si JS échoue. */
.reveal { opacity: 1; }
/* Révélation en profondeur : on n'anime QUE le transform (jamais l'opacité),
   donc le contenu reste lisible même si le JS ou l'observer échoue. */
.js-anim .reveal {
  transform: perspective(1200px) translateY(26px) rotateX(7deg);
  transform-origin: 50% 100%;
  transition: transform .85s cubic-bezier(.22,.61,.36,1);
}
.js-anim .reveal.visible { transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 600px) {
  /* Jamais de débordement horizontal de la page, quel que soit le contenu */
  html, body { overflow-x: clip; width: 100%; max-width: 100%; }
  .topbar-inner { padding: 13px 18px; }
  .container { padding: 0 18px 20px; }

  /* ===== CLAVIER ANDROID : ne doit pas déranger la saisie =====
     Le problème : quand le clavier s'ouvre, le champ actif peut se retrouver
     masqué par le clavier, et la colonne récap « sticky » se colle au-dessus.
     Solutions appliquées :
     - scroll-margin-bottom : laisse la place au clavier sous le champ focus.
     - scroll-padding-bottom sur html : idem pour scrollIntoView.
     - la colonne récap passe en STATIQUE (déjà fait) et les champs gardent
       une hauteur tactile confortable. */
  html { scroll-padding-bottom: 46vh; }
  /* ⚠️ Spécificité : `.service-item .price` (2 classes) bat `.service-item input`
     (1 classe) → il faut cibler les classes RÉELLES pour porter la police à 16px
     (en dessous de 16px, Android/iOS zooment automatiquement au focus). */
  .builder input, .builder select, .builder textarea,
  .client-fields input, .custom-label, .custom-unit,
  .service-item .price, .service-item .qty, .service-item .s-select {
    scroll-margin-bottom: 44vh;
    font-size: 16px;
  }
  /* Barre d'action fixe : laisse de la place au-dessus du clavier */
  body.app-mode .app-action-bar { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  /* Champs de saisie : hauteur tactile confortable et cibles larges */
  .service-item .field-input input { min-height: 44px; }
  .service-item .remove { min-width: 44px; min-height: 44px; }
  /* L'aperçu résultat ne doit pas sauter sous le clavier */
  #result { scroll-margin-bottom: 40vh; }
  /* Quand le clavier Android est ouvert (classe posée en JS) : on masque la
     barre d'action FIXE pour qu'elle ne chevauche pas le clavier.
     (La colonne récap est en flux sur mobile → on ne la masque pas, cela
     provoquerait un saut de mise en page.) */
  body.kb-open .app-action-bar { display: none; }

  /* Hero mobile : audacieux mais sans débordement */
  .hero { padding: 14px 0 22px; gap: 18px; }
  .hero .eyebrow { margin-bottom: 12px; padding: 7px 14px; font-size: 11.5px; letter-spacing: 2px; }
  .hero h1 { font-size: clamp(32px, 9.8vw, 42px); line-height: 1.06; margin-bottom: 0; letter-spacing: -.025em; }
  /* H1 des autres gabarits (page-head, trade, price, price_dept, services) :
     ils étaient hérités de tailles desktop (34-42px) et paraissaient
     disproportionnés sur un écran de 360-390px. Le hero est EXCLU de cette
     règle : il a sa propre taille, plus grande (voir .hero h1 ci-dessus),
     sinon cette règle l'écrase (même spécificité, déclarée après). */
  .page-head h1, .visi-hero h1, .section-head h2 {
    font-size: clamp(24px, 7.5vw, 30px); line-height: 1.15;
  }
  .section-head h2 { font-size: clamp(21px, 6.5vw, 26px); }
  .hero p { font-size: 16.5px; margin-top: 12px; line-height: 1.55; }
  .hero-badges { gap: 8px; margin-top: 16px; }
  .hero-badge { margin-top: 0; padding: 7px 12px; font-size: 12px; gap: 6px; }
  /* Boutons : le nowrap global débordait avec les libellés longs sur 360px.
     Sur mobile, on autorise le retour à la ligne et on borne la largeur. */
  .btn { white-space: normal; text-align: center; line-height: 1.3; max-width: 100%; }
  .btn.big { line-height: 1.35; }
  .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  .cta-row .btn { flex: 1 1 100%; }
  .hero .cta-row { margin-top: 16px; gap: 10px; }
  .hero .cta-row .btn {
    width: 100%; padding: 13px 16px; font-size: 14.5px;
    white-space: normal; text-align: center; line-height: 1.35;
  }
  /* Liste d'arguments : 2 colonnes nettes. minmax(0,1fr) est OBLIGATOIRE :
     avec "1fr 1fr", la piste ne peut pas descendre sous la largeur de son
     contenu (min-width:auto) et débordait du conteneur (392px pour 354px). */
  .hero .trust {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px 16px; margin-top: 14px;
  }
  .hero .trust span { font-size: 13px; min-width: 0; }
  .hero .trust span:last-child { grid-column: 1 / -1; }
  .hero-note { margin-top: 10px; font-size: 12px; }
  .hero-alt { font-size: 13px; margin-top: 12px; line-height: 1.5; }
  /* Form rows : sur mobile, empiler pour éviter un label sur 2 lignes qui décale un champ */
  .form-row { flex-direction: column; gap: 0; }
  .form-row .f2 { flex: 1; }
  /* MOBILE : le hero est empilé (texte puis maquette). Si la scène 3D couvrait
     tout le hero, son sol (sous l'horizon, à 60%) tomberait DERRIÈRE la
     maquette et serait invisible -> fond animé perçu comme buggé.
     On limite donc la scène à la zone de texte, avec un fondu en bas. */
  /* FOND ANIMÉ RETIRÉ SUR MOBILE (demande utilisateur : « c'est laid »).
     La scène 3D n'est plus affichée sous 700px : on masque le conteneur
     (display:none, donc plus rien à peindre ni à calculer) ET le JS ne
     démarrera même pas l'animation (voir atelier3d.js). */
  .hero-3d { display: none !important; }
  /* Les décors du hero utilisaient des `inset` négatifs (débord volontaire sur
     desktop) : sur mobile ils décalaient tout le bloc. On les contient. */
  .hero { overflow: hidden; }
  .hero-mock::before { inset: -12px -4px; }
  .mock-glow { inset: 0; }
  /* Mini-builder : passer en 1 colonne. En 2 colonnes sur 354px, la colonne
     « récapitulatif » tombait à ~150px et le contenu débordait. */
  .mock-body { grid-template-columns: 1fr; }
  .mock-summary { border-left: none; border-top: 1px solid var(--line); }
  .mock-col { padding: 14px; }
  .mock-summary { padding: 14px; }
  .mock-field { margin-bottom: 12px; }
  .mock-bar { padding: 8px 12px; }
  .mock-label { font-size: 10px; margin-bottom: 2px; }
  .mock-select, .mock-control { padding: 9px 11px; font-size: 13px; }
  .mock-line { padding: 7px 0; font-size: 12px; }
  .mock-sum-title { font-size: 13px; margin-bottom: 6px; }
  .mock-total { padding: 4px 0; font-size: 12px; }
  .mock-total.mock-grand { margin-top: 4px; padding-top: 7px; }
  .mock-total.mock-grand span { font-size: 15px; }
  .mock-btn { margin-top: 10px; padding: 11px; font-size: 13px; }

  /* Sections : rythme vertical lisible sur mobile.
     ⚠️ Une passe de « compactage » antérieure avait mis 4px/12px : les
     sections se touchaient (0px d'écart mesuré entre deux sections) et la
     page paraissait « collée ». On rétablit une respiration correcte. */
  .section { padding: 34px 0; }
  .section-head { margin-bottom: 22px; }
  .section-head h2 { font-size: clamp(21px, 6.5vw, 26px); }
  .section-head p { font-size: 14.5px; margin-top: 10px; line-height: 1.6; }

  /* Bandeaux collés au hero : ils étaient à 8-10px du bloc précédent. */
  .trust-bar { margin-top: 18px; margin-bottom: 0; }
  .stats-real { margin: 22px 0 0; }

  /* Cartes de prix : mobile compact — resserre les items pour réduire
     l'écart de hauteur entre Gratuit (peu d'items) et Pro (10 items) */
  .plans { gap: 14px; }
  .plan { padding: 22px 16px; }
  .plan .price { font-size: 36px; margin: 9px 0 2px; }
  .plan .price small { font-size: 12.5px; }
  .plan li { padding: 6px 0; font-size: 12.5px; gap: 9px; }
  .plan li .check, .plan li .x { transform: scale(.92); }
  .plan ul { margin-bottom: 14px; }
  .plan .desc { margin-bottom: 14px; font-size: 12.5px; }
  .plans.one { grid-template-columns: 1fr; }


  /* Étapes en liste compacte */
  /* Trust-bar : 2x2 propre (au lieu d'un wrap désordonné) */
  .trust-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 11px 16px;
    justify-items: start; padding: 14px 0; margin-bottom: 4px;
  }
  .trust-item { font-size: 12px; }
  .trust-item svg { width: 15px; height: 15px; }
  .pricing-trust { display: grid; grid-template-columns: 1fr; gap: 10px; justify-items: center; }

  .steps { grid-template-columns: 1fr; gap: 12px; }
  .step { padding: 20px 20px; }
  .step .step-icon { width: 40px; height: 40px; margin-bottom: 12px; }
  .step h3 { font-size: 16px; }
  .step p { font-size: 13px; }

  /* Métiers : le maillage interne compte ~160 chips (160 métiers) -> 3500px
     de mur sur mobile. On plafonne la hauteur avec un défilement INTERNE :
     tous les liens restent présents dans le DOM (crawlables), la page reste
     courte. */
  .other-trades {
    display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
    max-height: 210px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-right: 6px;
  }
  .chip { padding: 8px 10px; font-size: 12px; text-align: center; }
  .trade-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .trade-card { padding: 14px; }
  .trade-card .trade-icon { width: 36px; height: 36px; }
  .trade-card .trade-name { font-size: 13px; }

  /* CTA final compact */
  /* Blog index : 47 articles -> liste compacte sur mobile (les liens restent
     dans le DOM pour le crawl, seul le visuel est condensé) */
  .blog-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
  .blog-card { padding: 14px 16px; }
  .blog-card h2 { font-size: 15px; margin: 4px 0 0; line-height: 1.35; }
  .blog-card p { display: none; }
  .blog-meta { margin-top: 6px; font-size: 12px; }

  .faq-acc summary { padding: 16px 18px; font-size: 16px; }
  .faq-acc-body { padding: 0 18px 16px; }
  .cta-final { padding: 40px 20px; margin-bottom: 40px; }
  .cta-final h2 { font-size: 26px; }
  .cta-final p { font-size: 14px; margin: 12px auto 22px; }

  .client-fields { grid-template-columns: 1fr; }
  .summary-col { position: static; }
  .page-head h1 { font-size: 26px; }
  .page-head.centered { padding-top: 24px; margin-bottom: 32px; }
  .page-head.centered h1 { font-size: 30px; }
  .page-head-3d.centered { padding-bottom: 28px; }
  .page-head.centered .measure { margin: 16px auto 0; }
  .card, .panel { padding: 22px; min-width: 0; }
  .quote-doc-head { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; }
  /* Compte-rendu : le tableau scroll en interne SANS faire déborder la page */
  #quote-body { width: 100%; max-width: 100%; overflow: visible; }
  .quote-doc { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .quote-table, .comp-table {
    width: 100%;
    min-width: 100%;
    white-space: normal;
    table-layout: auto;
  }
  /* Étude de marché : le conteneur a overflow:hidden en base -> sur mobile il
     coupe le tableau au lieu de le faire scroller. On le fait scroller en
     interne SANS faire déborder la page, comme .quote-doc. */
  .competition { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .competition .comp-table { min-width: 480px; }
  .quote-table thead th, .quote-table tbody td { padding: 10px 12px; white-space: normal; }
  .comp-table th, .comp-table td { padding: 9px 12px; white-space: normal; }

  /* Dashboard "Mes devis" : le tableau 8 colonnes devient des cartes empilées
     sur mobile (évite le décalage / compression des colonnes) */
  .panel .quote-table thead { display: none; }
  .panel .quote-table, .panel .quote-table tbody, .panel .quote-table tr, .panel .quote-table td {
    display: block; width: 100%;
  }
  .panel .quote-table tr {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 14px 16px; margin-bottom: 12px; background: var(--card);
  }
  .panel .quote-table td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px;
  }
  .panel .quote-table td:last-child { border-bottom: none; }
  .panel .quote-table td::before {
    content: attr(data-label); font-size: 12px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--faint); font-weight: 600;
  }
  .panel .quote-table td.actions { justify-content: flex-end; }
  .panel .quote-table td.actions::before { display: none; }
  .panel .quote-table .actions { justify-content: flex-end; }

  .quote-totals { padding: 16px 18px; }
  .quote-totals-row { gap: 10px; }
  .quote-totals-row .label { width: auto; flex-shrink: 0; }
  .quote-totals-row .value { width: auto; flex-shrink: 0; }
  .quote-totals-row.grand .value { font-size: 20px; }
  .competition h3 { padding: 14px 18px; }
  .comp-note { padding: 12px 18px; }
  .nav > a:not(.btn):not(.logout) { display: none; }
  .nav > .btn:not(.logout) { display: none; }  /* le CTA reste dans le hamburger */
  .burger { display: flex; }  /* afficher le burger sur mobile */
  /* Le sélecteur FR/EN reste VISIBLE sur mobile : c'était le seul chemin
     de changement de langue, le cacher rendait le site monolingue. */
  .lang-switch { display: flex; margin-left: 0; }
  .lang-link { padding: 5px 9px; font-size: 12px; }
  .stats-bar { gap: 28px; padding: 26px 20px; }
  .stat .num { font-size: 30px; }
  .service-item { flex-wrap: wrap; gap: 10px; }
  .service-item .info { flex: 1 1 100%; min-width: 0; }
  .service-item .price-wrap { flex: 1; min-width: 0; }
  .service-item .price { width: 100%; }
  .service-item .qty { flex: 0 0 70px; }
  /* ⚠️ REFONTE MOBILE (2026-09) : avec 3 champs (prix/qté/coût) sur une seule
     ligne de 260 px, prix tombait à 24 px et qté à 24 px = illisible.
     Solution : grille 2 colonnes sur 2 lignes -> chaque champ fait ~140 px. */
  .service-item .price-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
  }
  .service-item .field { justify-content: space-between; }
  .service-item .field-price, .service-item .field-qty { grid-column: span 1; }
  .service-item .field-cost { grid-column: 1 / -1; }
  .service-item .price, .service-item .qty, .service-item .cost {
    width: 100%; flex: 1 1 auto; min-width: 0;
  }
  .service-item .field-input { flex: 1; min-width: 0; }
  .service-item .remove { align-self: center; }
  /* Dashboard : barre du panneau passe en 2 lignes -> plus de bouton tronqué */
  .panel-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .panel-head > div:last-child { justify-content: space-between; }
  .panel-head .btn { flex: 1; justify-content: center; }
  /* Stats : 2x2 au lieu de 4 cartes empilées */
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card { padding: 16px; }
  .stat-card .value { font-size: 24px; }
  .summary { padding: 22px; }
  .summary-totals .grand { font-size: 23px; }
}
/* Tableaux larges : toujours un scroll interne propre, jamais de débordement page */
@media (max-width: 600px) {
  .result .card { overflow: hidden; }
}

/* ============ BUILDER MOBILE : ergonomie tactile & clavier ============ */
@media (max-width: 820px) {
  /* Le builder passe en 1 colonne : le récap est en flux (pas collant) */
  .builder { gap: 14px; }
  /* Cartes plus compactes : on garde de la place pour la saisie */
  .builder .card { padding: 18px 16px; }
  /* Chaque ligne de prestation devient une carte aérée, lisible au doigt.
     On empile l'info (nom) puis les champs prix/qté, pour éviter que les
     champs se serrent sur 2 lignes de label. */
  .service-item { flex-wrap: wrap; gap: 12px; padding: 14px 14px; }
  .service-item .info { flex: 1 1 100%; }
  .service-item .price-wrap {
    flex: 1 1 100%; width: 100%; gap: 14px; justify-content: space-between;
  }
  .service-item .field { flex: 1; justify-content: flex-start; gap: 8px; }
  .service-item .field-input { flex: 1; }
  .service-item .field-label { font-size: 12.5px; }
  /* ⚠️ flex-basis de la règle 820px (flex: 0 0 70px) écrase width:100% →
     il faut explicitement redéfinir flex pour que les champs s'élargissent. */
  .service-item .price, .service-item .qty { width: 100%; flex: 1 1 auto; }
  .service-item .field-input { flex: 1 1 auto; }
  .service-item .remove { align-self: center; }
  /* Boutons d'action en pleine largeur pour une cible tactile large */
  .svc-actions { flex-direction: column; gap: 8px; }
  .svc-actions .add-service, .svc-actions .clear-draft { width: 100%; min-height: 46px; }
  /* Le sélecteur de client s'empile proprement */
  .client-pick { flex-direction: column; align-items: stretch; }
  .client-pick .btn { min-height: 42px; }
  /* Champ de recherche métier bien dimensionné */
  .trade-search-wrap { flex-direction: column; }
  .trade-search-wrap input, .trade-search-wrap select { min-height: 46px; }
  /* Champs client : hauteur tactile */
  .client-fields input { min-height: 46px; }
  /* Boutons du récap : hauteur tactile confortable */
  .summary-actions .btn { min-height: 46px; }
}

/* ============ LIENS DANS LE TEXTE ============
   ⚠️ Aucun style global n'existait : tout lien posé dans un paragraphe héritait
   du BLEU PAR DÉFAUT du navigateur (mesuré : rgb(0,0,238), souligné) — un défaut
   brut qui n'appartient à aucune charte. Les liens de citation dans le corps
   sont maintenant en or, soulignés d'un filet fin et discret.
   ⚠️ On cible `p a` / `li a` : les liens de navigation, de cartes et de boutons
   gardent leur style propre (ils ne sont pas dans un <p>). */
.why-block a, .faq-acc-body a, .pain-item p a, .section-head a, .legal-card a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold-line);
  transition: text-decoration-color .15s, color .15s;
}
.why-block a:hover, .faq-acc-body a:hover, .pain-item p a:hover,
.section-head a:hover, .legal-card a:hover {
  color: var(--ink);
  text-decoration-color: var(--accent);
}

/* ============ ACCESSIBILITÉ / FOCUS ============ */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ============ MOTION REDUCED ============ */
/* La 3D est purement décorative : coupée si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce) {
  .mock-glow, .mock-window::after { animation: none; }
  .hero-mock.mock-static .mock-window { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ============ MODE APP ANDROID (WebView Devisaly) ============
   Interface optimisée smartphone, visible UNIQUEMENT via l'app
   (détectée par User-Agent "DevisalyApp"). Masque la nav/footer
   et optimise le builder pour un usage plein écran natif.
   TOUTES les fonctionnalités du site sont conservées (récap,
   TVA, PDF, upsell) — seule la présentation est adaptée. */
body.app-mode .topbar { display: none; }
body.app-mode .footer { display: none; }
body.app-mode .footer-inline { display: none; }
body.app-mode { padding-bottom: 96px; background: var(--paper); }

/* En-tête app : titre + sous-titre, style natif */
body.app-mode .page-head {
  padding: 24px 20px 4px;
  text-align: left;
}
body.app-mode .page-head h1 { font-size: 26px; letter-spacing: -0.01em; }
body.app-mode .page-head p { font-size: 14px; margin-top: 6px; }

/* Builder : 1 colonne, cartes espacées, coins doux */
body.app-mode .builder {
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 16px;
}
body.app-mode .builder .main-col { min-width: 0; }
body.app-mode .builder .summary-col { position: static; min-width: 0; }
body.app-mode .card {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
  border: 1px solid var(--line-soft);
  padding: 20px;
}
body.app-mode .card-title { font-size: 16px; font-weight: 600; }
body.app-mode .card-sub { font-size: 13px; margin-top: 3px; }

/* Champs : pleine largeur, confortables au doigt */
body.app-mode .card input,
body.app-mode .card select {
  font-size: 16px; /* évite le zoom iOS */
  padding: 13px 14px;
  border-radius: 10px;
  width: 100%;
}
body.app-mode .add-service {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  border-radius: 10px;
  border: 1px dashed var(--gold);
  background: var(--gold-bg);
  color: var(--gold-2);
  font-weight: 600;
}

/* Récap : carte dédiée, totaux bien lisibles */
body.app-mode .summary {
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
  padding: 20px;
  background: var(--card);
}
body.app-mode .summary-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
body.app-mode .summary-totals { margin-top: 12px; }
body.app-mode .summary-totals > div { padding: 8px 0; font-size: 15px; }
body.app-mode .summary-totals .grand { font-size: 18px; font-weight: 700; }
body.app-mode .tva-input { width: 64px !important; text-align: center; }

/* Upsell : carte bien présentée */
body.app-mode .upsell-banner {
  border-radius: 12px;
  padding: 16px;
  margin-top: 14px;
  background: linear-gradient(165deg, var(--gold-bg), #f3ead6);
  border: 1px solid var(--gold-line);
}
body.app-mode .upsell-banner .btn { width: 100%; margin-top: 10px; }

/* Boutons d'action : pleine largeur, hauteur confortable */
body.app-mode .summary-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
body.app-mode .summary-actions .btn {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  border-radius: 10px;
  justify-content: center;
}

/* Barre d'action fixe en bas : les 2 actions principales */
body.app-mode .app-action-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  display: flex; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,253,249,.96);
  backdrop-filter: blur(16px) saturate(1.2);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(0,0,0,.05);
}
body.app-mode .app-action-bar .btn {
  flex: 1;
  padding: 14px;
  font-size: 15px;
  border-radius: 10px;
  justify-content: center;
}
body.app-mode .app-action-bar .btn.primary { font-weight: 600; }

/* Résultat du devis : bien présenté */
body.app-mode .quote-doc { max-width: 100%; border-radius: 14px; }
body.app-mode .result { padding: 0 16px; }
body.app-mode .result .card { border-radius: 14px; }

/* Erreurs : lisibles */
body.app-mode .error { margin: 0 16px; border-radius: 10px; }

/* ===== Popup d'abonnement Pro (app) ===== */
body.app-mode .app-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(25,23,19,.5);
  backdrop-filter: blur(4px);
  animation: appFadeIn .2s ease;
}
body.app-mode .app-modal {
  width: 100%; max-width: 420px;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 28px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px rgba(0,0,0,.15);
  animation: appSlideUp .3s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
body.app-mode .app-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--paper-2);
  color: var(--muted); display: grid; place-items: center;
  cursor: pointer;
}
body.app-mode .app-modal-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(165deg, var(--gold), var(--gold-2));
  color: #fff; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 20px;
}
body.app-mode .app-modal-title {
  font-family: var(--font-serif);
  font-size: 24px; font-weight: 600; color: var(--ink);
  margin: 16px 0 6px;
}
body.app-mode .app-modal-sub { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
body.app-mode .app-modal-features { list-style: none; padding: 0; margin: 0 0 20px; }
body.app-mode .app-modal-features li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; font-size: 14px; color: var(--ink);
}
body.app-mode .app-modal-features li svg { color: var(--gold-2); flex-shrink: 0; }
body.app-mode .app-modal-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 18px;
}
body.app-mode .app-modal-amount { font-family: var(--font-mono); font-size: 32px; font-weight: 700; color: var(--ink); }
body.app-mode .app-modal-period { font-size: 15px; color: var(--muted); }
body.app-mode .app-modal-cta { width: 100%; padding: 15px; font-size: 15px; border-radius: 12px; }
body.app-mode .app-modal-note { text-align: center; font-size: 12px; color: var(--faint); margin-top: 12px; }

@keyframes appFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes appSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }




/* ============ ÉPUREMENT GLOBAL (2026-09) ============
   Objectif : hiérarchie plus claire, moins de bruit visuel, même palette.
   On ne touche PAS aux couleurs (SEO/identité intacts) : uniquement les
   espacements, bordures et ombres. */
.card, .panel {
  border-color: var(--line-soft);
  box-shadow: 0 1px 2px rgba(25,23,19,.03);
}
.card:hover, .panel:hover { box-shadow: 0 2px 10px rgba(25,23,19,.05); }
.card-sub, .panel-sub { margin-bottom: 18px; }
/* Titres de section : moins de poids visuel, plus d'air */
.section-head { margin-bottom: 28px; }
.section-head h2 { letter-spacing: -.015em; }
/* Champs : bordures plus douces, focus or net */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=date], input[type=search], select, textarea {
  border-color: var(--line-soft);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
/* Boutons secondaires plus discrets */
.btn.ghost { border-color: var(--line-soft); color: var(--muted); }
.btn.ghost:hover { border-color: var(--gold-line); color: var(--gold-2); }
/* Tableaux : allègement des séparateurs */
.quote-table th { font-weight: 600; letter-spacing: .02em; }
.quote-table tbody tr:hover { background: var(--paper); }
/* Lien « j'ai un code promo » */
.promo-link { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.promo-link:hover { color: var(--gold-2); }
/* Page hors-ligne (PWA) */
.offline-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 40px 28px; text-align: center; margin-top: 40px; }
.offline-icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-2); display: grid; place-items: center; }
.offline-card h1 { font-family: var(--font-serif); font-size: 24px; margin-bottom: 10px; }
.offline-card p { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 22px; }
.offline-card .btn { display: block; width: 100%; margin-bottom: 10px; }
/* Espacement vertical plus régulier des blocs d'action */
.summary-actions, .billing-actions { gap: 10px; }
/* Réduction du bruit : on retire le halo au survol des cartes statiques */
.no-hover .card:hover { box-shadow: 0 1px 2px rgba(25,23,19,.03); }

/* Badge « en retard » (échéance dépassée) */
.badge-late { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(154,59,46,.12); color: var(--danger); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

/* ============ BARRE D'ACTION FIXE (mobile) : chiffrer sans scroller ============
   Problème mesuré : sur 390px le bouton « Chiffrer le devis » était à 2100px de
   haut (3,5 écrans) -> l'utilisateur croyait que ça ne marchait pas.
   Solution : barre collante en bas sur mobile, visible dès qu'une prestation existe. */
@media (max-width: 820px) {
  .builder-action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; gap: 8px; align-items: center;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,253,249,.97);
    border-top: 1px solid var(--gold-line);
    backdrop-filter: blur(8px);
    box-shadow: 0 -6px 20px rgba(25,23,19,.07);
  }
  .builder-action-bar .btn { flex: 1; min-height: 46px; font-size: 14px; }
  .builder-action-bar .bab-total {
    font-family: var(--font-mono); font-weight: 700; font-size: 14px;
    color: var(--gold-2); white-space: nowrap;
  }
  body:not(.app-mode) .builder { padding-bottom: 78px; }
}
@media (min-width: 821px) { .builder-action-bar { display: none; } }

/* ============================================================
   DASHBOARD « pilotage » (refonte 2026-09)
   ============================================================ */

/* --- Hero --- */
.dash-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding: 8px 0 26px;
}
.dash-hero-main h1 { font-family: var(--font-serif); font-size: 30px; letter-spacing: -.02em; margin: 6px 0 4px; color: var(--ink); }
.dash-hero-main p { color: var(--muted); font-size: 14px; }
.dash-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-hero .plan-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.dash-hero .plan-badge.pro { background: var(--gold-bg); border-color: var(--gold-line); color: var(--gold-2); }
.dash-hero .plan-badge a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 2px; }

/* --- Alerte --- */
.dash-alert {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 16px; margin-bottom: 22px; border-radius: var(--radius);
  background: rgba(154,59,46,.07); border: 1px solid rgba(154,59,46,.22);
  color: var(--danger); font-size: 13.5px;
}
.dash-alert svg { flex: 0 0 auto; }
.dash-alert a { color: var(--danger); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; margin-left: auto; }

/* --- KPI --- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.kpi {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 18px 20px; position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(25,23,19,.03);
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.kpi-gold::before { background: linear-gradient(180deg, var(--gold), var(--gold-2)); }
.kpi-warn::before { background: var(--danger); }
.kpi-label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.kpi-hint { font-size: 9.5px; color: var(--faint); letter-spacing: .5px; }
.kpi-value { font-family: var(--font-mono); font-size: 25px; font-weight: 700; color: var(--ink); margin: 10px 0 5px; letter-spacing: -.5px; }
.kpi-gold .kpi-value { color: var(--gold-2); }
.kpi-warn .kpi-value { color: var(--danger); }
.kpi-foot { font-size: 11.5px; color: var(--muted); }

/* --- Deux colonnes --- */
.dash-two-col { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; margin-bottom: 24px; }

/* --- Graphique --- */
.chart { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding: 8px 0 0; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.chart-bar-wrap { flex: 1; width: 100%; max-width: 46px; display: flex; flex-direction: column-reverse; align-items: stretch; }
.chart-bar-paid { background: linear-gradient(180deg, var(--gold), var(--gold-2)); border-radius: 5px 5px 0 0; min-height: 2px; }
.chart-bar-rest { background: var(--gold-soft); border-top: 1px solid var(--gold-line); min-height: 2px; }
.chart-label { font-size: 11px; color: var(--muted); margin-top: 7px; font-family: var(--font-mono); }
.chart-count { font-size: 10px; color: var(--faint); }
.chart-legend { display: flex; gap: 16px; margin-top: 14px; font-size: 11.5px; color: var(--muted); }
.chart-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.dot-gold { background: var(--gold); }
.dot-soft { background: var(--gold-soft); border: 1px solid var(--gold-line); }

/* --- Répartition --- */
.status-list { display: flex; flex-direction: column; gap: 9px; }
.status-row { display: grid; grid-template-columns: 78px 1fr 34px; align-items: center; gap: 10px; text-decoration: none; }
.sr-name { font-size: 12.5px; color: var(--muted); }
.sr-bar { height: 9px; background: var(--paper); border-radius: 999px; overflow: hidden; border: 1px solid var(--line-soft); }
.sr-fill { display: block; height: 100%; border-radius: 999px; }
.sr-fill.status-draft { background: var(--faint); }
.sr-fill.status-sent { background: #3B5680; }
.sr-fill.status-accepted { background: var(--gold); }
.sr-fill.status-en_cours { background: #C08A2E; }
.sr-fill.status-partial { background: #C08A2E; }
.sr-fill.status-paid { background: #2E7D32; }
.sr-fill.status-refused { background: var(--danger); }
.sr-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); text-align: right; font-weight: 600; }
.dash-empty-mini { font-size: 13px; color: var(--faint); padding: 14px 0; }
.dash-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.dash-mini-stats div { text-align: center; }
.dash-mini-stats span { display: block; font-family: var(--font-mono); font-size: 19px; font-weight: 700; color: var(--gold-2); }
.dash-mini-stats small { font-size: 11px; color: var(--muted); }

/* --- Listes compactes (relances, top clients) --- */
.mini-list { display: flex; flex-direction: column; }
.mini-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.mini-row:last-child { border-bottom: none; }
.mini-main { flex: 1; min-width: 0; }
.mini-main b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-main small { font-size: 11.5px; color: var(--muted); }
.mini-amount { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; color: var(--gold-2); white-space: nowrap; }

/* --- Cartes de devis --- */
.quote-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.qcard { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 16px; position: relative; }
.qcard:hover { border-color: var(--gold-line); }
.qcard-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.qcard-id { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.qbadge { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; }
.qbadge.status-draft { background: var(--paper); color: var(--muted); border-color: var(--line); }
.qbadge.status-sent { background: #EDF1F7; color: #3B5680; }
.qbadge.status-accepted { background: var(--gold-soft); color: var(--gold-2); }
.qbadge.status-en_cours { background: #FDF4E3; color: #8A6A2A; }
.qbadge.status-partial { background: #FDF4E3; color: #8A6A2A; }
.qbadge.status-paid { background: #EAF3EA; color: #2E7D32; }
.qbadge.status-refused { background: rgba(154,59,46,.1); color: var(--danger); }
.qcard-client { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.qcard-meta { font-size: 12px; color: var(--muted); margin: 5px 0 12px; }
.qcard-amounts { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.qcard-total { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--ink); }
.qcard-balance { font-size: 12px; color: var(--danger); font-weight: 600; }
.qcard-balance.paid { color: #2E7D32; }
.qcard-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.qcard-actions .q-status { flex: 1; min-width: 0; font-size: 12.5px; padding: 8px 10px; }
.qcard-icons { display: flex; gap: 4px; }
.qcard-more { display: none; flex-wrap: wrap; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.qcard-more.open { display: flex; }
.qcard-more .btn { font-size: 12px; padding: 8px 12px; }
.danger-text { color: var(--danger) !important; }
.panel-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel-hint { font-size: 12px; color: var(--faint); margin-top: 2px; }
.dash-reset { font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; padding: 8px 4px; }
.btn.btn-sm { padding: 8px 14px; font-size: 12.5px; }
.dash-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.dash-filters .dash-search { flex: 1; min-width: 180px; }

/* --- Responsive --- */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dash-hero { flex-direction: column; align-items: stretch; padding-bottom: 14px; }
  .dash-hero-main h1 { font-size: 22px; }
  .dash-hero-main p { font-size: 13px; }
  .dash-hero-actions { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
  .dash-hero-actions .btn { flex: 1; justify-content: center; }
  .dash-hero .plan-badge { font-size: 11.5px; padding: 6px 11px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .kpi { padding: 12px; }
  .kpi-value { font-size: 17px; margin: 6px 0 3px; }
  .kpi-label { font-size: 9.5px; letter-spacing: .8px; }
  .kpi-foot { font-size: 10.5px; }
  .quote-cards { grid-template-columns: 1fr; gap: 10px; }
  /* Cartes devis compactées : l'essentiel tient sur ~150px */
  .qcard { padding: 12px; }
  .qcard-client { font-size: 15.5px; }
  .qcard-meta { font-size: 11.5px; margin: 4px 0 8px; }
  .qcard-amounts { padding: 7px 0; }
  .qcard-total { font-size: 15px; }
  .qcard-actions { margin-top: 9px; }
  .status-row { grid-template-columns: 60px 1fr 26px; gap: 7px; }
  .sr-name { font-size: 11.5px; }
  .chart { height: 110px; gap: 5px; }
  .chart-label { font-size: 10px; }
  .chart-count { display: none; }
  .chart-legend { font-size: 10.5px; gap: 10px; margin-top: 10px; }
  .dash-alert { font-size: 12.5px; padding: 11px 13px; }
  .dash-alert a { margin-left: 0; }
  .dash-mini-stats { margin-top: 14px; padding-top: 12px; }
  .dash-mini-stats span { font-size: 16px; }
  .panel { padding: 16px; }
  .panel-head { gap: 10px; }
  .mini-row { padding: 9px 0; gap: 9px; }
  .mini-main b { font-size: 13px; }
  .mini-amount { font-size: 12.5px; }
  .dash-filters { gap: 8px; }
  .dash-filters .dash-search { width: 100%; }
  .dash-filters select { flex: 1; min-width: 0; }
}

/* ===== Rapprochement bancaire ===== */
.bank-import { margin-top: 6px; }
.bank-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.bank-row:last-child { border-bottom: none; }
.bank-main { min-width: 240px; flex: 1 1 240px; }
.bank-date { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.bank-label { font-size: 13.5px; color: var(--ink); word-break: break-word; }
.bank-amount { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--gold-2); white-space: nowrap; }
.bank-match { display: flex; gap: 8px; align-items: center; flex: 0 1 auto; }
.bank-match select { min-width: 240px; max-width: 340px; font-size: 12.5px; padding: 8px 10px; }
.bank-suggest { flex: 1 1 100%; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
@media (max-width: 700px) {
  .bank-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .bank-main { min-width: 0; }
  .bank-match { flex-direction: column; align-items: stretch; }
  .bank-match select { min-width: 0; max-width: none; width: 100%; }
  .bank-match .btn { width: 100%; }
}
/* ===== Refonte conversion (2026-09) : bloc Visibilité dominant + chiffres réels ===== */
.visi-block { display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;
  /* FOND CLAIR (demande utilisateur : le fond noir #17150f jurait avec le reste
     du site ivoire). La dominance de l'offre vient d'une BORDURE DOREE et d'une
     ombre portee, pas d'un aplat sombre. */
  background:var(--card); border:1px solid var(--gold-line); border-radius:var(--radius-lg);
  padding:50px 48px; color:var(--ink); position:relative; overflow:hidden;
  box-shadow:0 10px 30px rgba(25,23,19,.06), 0 30px 70px rgba(176,138,62,.10);
}
/* Liseré doré en haut = signature de l'offre (remplace le voile sombre). */
.visi-block::before { content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent); pointer-events:none; }
/* Halo doré très discret (remplace le radial sombre). */
.visi-block::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 80% at 88% 6%, rgba(176,138,62,.10), transparent 68%); }
.visi-copy { position:relative; z-index:1; }
.visi-block .eyebrow { color:var(--gold-2); letter-spacing:.14em; font-size:11.5px; text-transform:uppercase; font-weight:600; }
.visi-block h2 { font-family:var(--font-serif); font-size:36px; line-height:1.14; font-weight:600; color:var(--ink); margin:14px 0 16px; }
.visi-block p { color:var(--muted); font-size:15.5px; line-height:1.7; margin-bottom:20px; max-width:520px; }
.visi-points { list-style:none; margin-bottom:22px; }
.visi-points li { position:relative; padding:7px 0 7px 26px; font-size:14.5px; color:var(--ink); }
.visi-points li::before { content:""; position:absolute; left:0; top:14px; width:14px; height:14px; border-radius:50%; background:var(--gold); opacity:.9; }
.visi-points li::after { content:""; position:absolute; left:4.5px; top:17.5px; width:5px; height:3px;
  border-left:1.6px solid #fff; border-bottom:1.6px solid #fff; transform:rotate(-45deg); }
.visi-price-box { margin:4px 0 20px; }
.vpb-line { display:flex; align-items:baseline; gap:7px; }
.vpb-now { font-family:var(--font-serif); font-size:46px; font-weight:600; color:var(--gold-2); line-height:1; letter-spacing:-.01em; }
.vpb-per { font-size:15px; color:var(--muted); }
.vpb-promo { margin-top:8px; font-size:13px; color:var(--gold-2); font-weight:600; }
.visi-cta-row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.visi-trust { margin-top:18px; font-size:12.5px; color:var(--faint); }
.visi-shots { position:relative; height:340px; z-index:1; }
.shot-mini { position:absolute; top:4px; left:0; width:74%; background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 12px 30px rgba(25,23,19,.14); border:1px solid var(--line); }
.shot-bar { display:flex; align-items:center; gap:5px; padding:10px 13px; background:#f4f1ec; border-bottom:1px solid #e7e2d8; }
.shot-bar span { width:8px; height:8px; border-radius:50%; background:#d9d3c7; }
.shot-bar em { margin-left:9px; font-style:normal; font-size:11px; color:#8b8477; }
.shot-body { padding:18px 18px 20px; }
.shot-h { font-family:var(--font-serif); font-size:18px; color:#1c1a17; line-height:1.2; }
.shot-sub { font-size:11.5px; color:#8b8477; margin-top:4px; }
.shot-cta { display:inline-block; margin-top:14px; background:var(--gold); color:#fff; font-size:11.5px; font-weight:600; padding:7px 14px; border-radius:6px; }
.shot-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:16px; }
.shot-grid i { height:34px; border-radius:6px; background:#f0ece4; display:block; }
.shot-rank { position:absolute; right:0; bottom:0; width:56%; background:#fff; border-radius:10px; padding:15px 16px;
  box-shadow:0 12px 28px rgba(25,23,19,.13); border:1px solid var(--line); }
.rank-cap { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); margin-bottom:9px; font-weight:600; }
.rank-row { display:flex; align-items:center; gap:9px; padding:6px 0; }
.rank-dot { width:21px; height:21px; border-radius:50%; background:var(--gold); color:#fff; font-size:10.5px;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.rank-dot.dim { background:#ece8e0; color:#a89f8e; }
.rank-bar { height:9px; border-radius:5px; background:#ece8e0; flex:1; }
.rank-bar.s { flex:.62; }
.rank-row.you .rank-bar { background:rgba(176,138,62,.30); }
.rank-row.you b { font-size:11px; color:var(--gold-2); white-space:nowrap; font-weight:700; }
@media (max-width:900px) {
  .visi-block { grid-template-columns:1fr; padding:34px 24px; gap:30px; }
  .visi-block h2 { font-size:27px; }
  .visi-shots { height:300px; }
  .shot-mini { width:80%; }
  .shot-rank { width:64%; }
}

/* Bandeau de chiffres réels (remplace les faux avis) */
.stats-real { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--card);
  display:grid; grid-template-columns:repeat(4,1fr); margin:26px 0 10px; overflow:hidden; }
.stats-real .sr-item { padding:22px 18px; text-align:center; border-right:1px solid var(--line); }
.stats-real .sr-item:last-child { border-right:0; }
.stats-real .sr-num { font-family:var(--font-serif); font-size:30px; font-weight:600; color:var(--ink); line-height:1; }
.stats-real .sr-lab { font-size:12.5px; color:var(--muted); margin-top:6px; letter-spacing:.02em; }
@media (max-width:700px) {
  .stats-real { grid-template-columns:1fr 1fr; }
  .stats-real .sr-item:nth-child(2) { border-right:0; }
  .stats-real .sr-item:nth-child(1), .stats-real .sr-item:nth-child(2) { border-bottom:1px solid var(--line); }
}

/* ============================================================
   RESTAURATION (2026-09-28) — règles supprimées par erreur dans
   le commit 83d5989 ("Landing épurée") alors que 4 templates les
   utilisent encore : trade.html (160 pages /devis/<slug>),
   results.html, software.html, about.html.
   Symptôme : bandeaux de stats en texte brut empilé, cartes
   "features" pleine largeur non stylées.
   ============================================================ */

/* Bandeau de statistiques (3-4 chiffres alignés) */
.stats-bar {
  display: flex; justify-content: center; gap: 64px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px 40px; box-shadow: var(--shadow-sm); margin-bottom: 20px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.stats-bar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.stat { text-align: center; }
.stat .num { font-family: var(--font-serif); font-size: 40px; font-weight: 600; color: var(--gold-2); line-height: 1; }
.stat .lbl { font-size: 12px; color: var(--faint); margin-top: 9px; letter-spacing: 1.5px; text-transform: uppercase; }

/* Grille de cartes "features" (icône + titre + texte) */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.feature {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px;
  box-shadow: var(--shadow-sm); transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative; overflow: hidden;
}
.feature::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent); opacity: 0; transition: opacity .2s;
}
.feature:hover { transform: translateY(-3px); border-color: var(--gold-line); box-shadow: var(--shadow-md); }
.feature:hover::before { opacity: 1; }
.feature .icon-wrap {
  width: 52px; height: 52px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--gold-bg); border: 1px solid var(--gold-line); margin-bottom: 18px; color: var(--gold-2);
}
.feature h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.feature p { color: var(--muted); font-size: 14px; line-height: 1.7; }

@media (max-width: 700px) {
  .stats-bar { gap: 28px; padding: 22px 20px; }
  .stat .num { font-size: 30px; }
  .features { grid-template-columns: 1fr; }
  .feature { padding: 22px; }
}

/* Menu latéral : le bloc nom/plan doit pouvoir se réduire (noms longs) */
.drawer-user-info { min-width: 0; }
.drawer-user-name, .drawer-user-plan { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   MINI-BUILDER DE DÉMONSTRATION (hero de la landing)
   Remplace le mockup statique : le visiteur chiffre un vrai devis
   avant de s'inscrire. Objectif conversion.
   ============================================================ */
.mock-control {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 14px; color: var(--ink);
  background: var(--card); font-family: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6459' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 34px;
}
.mock-control:focus { outline: none; border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--gold-bg); }

.demo-services { max-height: 190px; overflow-y: auto; margin-top: 2px; }
.demo-hint { font-size: 13px; color: var(--faint); padding: 14px 0; text-align: center; }
.demo-line {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-2);
  transition: background .15s;
}
.demo-line.on { background: var(--gold-bg); }
.demo-line:last-child { border-bottom: none; }
.dl-name { flex: 1; min-width: 0; line-height: 1.35; }
.dl-price { font-family: var(--font-mono); color: var(--gold-2); font-weight: 600; white-space: nowrap; }
.dl-qty { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.dl-qty button {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-size: 15px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; padding: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.dl-qty button:hover { border-color: var(--gold-line); color: var(--gold-2); background: var(--gold-bg); }
.dl-qty b { min-width: 18px; text-align: center; font-size: 13px; font-weight: 600; }
.mock-note { text-align: center; font-size: 11px; color: var(--faint); margin-top: 10px; }
.mock-btn { cursor: pointer; text-decoration: none; display: block; }

@media (max-width: 700px) {
  /* ⚠️ Le mini-builder est LE point cle de l'accueil : sur mobile, on affiche
     TOUTES les prestations dans le flux de la page (la page defile deja).
     Avant : max-height 150px pour 317px de contenu -> seules 2 prestations sur
     6 visibles, la 3e coupee en plein milieu (ressenti « textes qui se
     chevauchent »). */
  .demo-services { max-height: none; overflow: visible; }
  .demo-line { font-size: 12px; padding: 7px 0; gap: 8px; }
  .dl-price { font-size: 12px; }
  .dl-name { line-height: 1.3; }
  /* Cible tactile : un artisan clique au pouce. 26px est trop petit (norme
     d'accessibilite tactile : ~44px). On agrandit les +/- sans casser la ligne. */
  .dl-qty button { width: 40px; height: 40px; font-size: 18px; border-radius: 8px; }
  .dl-qty b { min-width: 22px; font-size: 14px; }
  .demo-line { padding: 6px 0; }
}

/* ============================================================
   BANDEAU INVITÉ (builder) — s'affiche après que le visiteur a
   chiffré, pour l'inviter à créer un compte gratuit.
   Non bloquant : il voit d'abord son résultat, l'invitation vient après.
   ============================================================ */
.guest-cta {
  display: none; margin-top: 14px; padding: 16px;
  border: 1px solid var(--gold-line); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--gold-bg), rgba(176,138,62,.03));
  text-align: center;
}
.guest-cta.show { display: block; animation: gcIn .35s ease-out; }
@keyframes gcIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.guest-cta .gc-head {
  font-family: var(--font-serif); font-size: 17px; font-weight: 600;
  color: var(--gold-2); margin-bottom: 6px;
}
.guest-cta p { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.guest-cta .btn { width: 100%; }
.guest-cta .gc-link {
  display: inline-block; margin-top: 10px; font-size: 12.5px;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}

/* ============================================================
   VISIBILITÉ PRO — preuve (sites réels) + objections (FAQ)
   La page vend 2 388 €/an : elle doit prouver, pas seulement promettre.
   ============================================================ */
.visi-proof { margin: 34px 0 30px; }
.visi-proof-head { text-align: center; margin-bottom: 24px; }
.visi-proof-head .eyebrow { justify-content: center; margin-bottom: 10px; }
.visi-proof-head h2 {
  font-family: var(--font-serif); font-size: 30px; font-weight: 500;
  letter-spacing: -.02em; color: var(--ink); line-height: 1.18;
}
.visi-proof-head p { color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 620px; margin: 12px auto 0; }
.visi-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.proof-card {
  margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.proof-card:hover { transform: translateY(-3px); border-color: var(--gold-line); box-shadow: var(--shadow-md); }
.proof-card img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line-soft); }
.proof-card figcaption { padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.proof-name { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink); }
.proof-desc { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 120px; }
.proof-live {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-2); background: var(--gold-bg); border: 1px solid var(--gold-line);
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.visi-proof-note {
  margin-top: 16px; text-align: center; font-size: 13px; color: var(--faint);
  line-height: 1.6; max-width: 640px; margin-inline: auto;
}

/* FAQ objections */
.visi-faq { display: flex; flex-direction: column; }
.visi-q { border-bottom: 1px solid var(--line-soft); }
.visi-q:last-child { border-bottom: none; }
.visi-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none; padding: 12px 0;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.visi-q summary::-webkit-details-marker { display: none; }
.visi-q .vq-plus { position: relative; width: 12px; height: 12px; flex-shrink: 0; }
.visi-q .vq-plus::before,
.visi-q .vq-plus::after {
  content: ""; position: absolute; background: var(--gold-2); transition: transform .2s;
}
.visi-q .vq-plus::before { left: 0; top: 5.5px; width: 12px; height: 1.5px; }
.visi-q .vq-plus::after { left: 5.5px; top: 0; width: 1.5px; height: 12px; }
.visi-q[open] .vq-plus::after { transform: scaleY(0); }
.visi-q p { font-size: 13px; color: var(--muted); line-height: 1.65; padding: 0 22px 14px 0; }

/* Repli sous la carte de paiement */
.visi-alt {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.6;
}
.visi-alt a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold-line); }

@media (max-width: 820px) {
  .visi-proof-grid { grid-template-columns: 1fr; }
  .visi-proof-head h2 { font-size: 24px; }
  .proof-card figcaption { padding: 12px 14px; }
}

/* La preuve principale (le site Devisaly lui-même) occupe toute la largeur */
.visi-proof-grid .proof-card-lead { grid-column: 1 / -1; }
.visi-proof-grid .proof-card-lead img { max-height: 420px; object-fit: cover; object-position: top; }
@media (max-width: 820px) { .visi-proof-grid .proof-card-lead img { max-height: 220px; } }

/* ============================================================
   VISIBILITÉ PRO — le calculateur de devis intégré (argument)
   Le client ne paie pas un site, il paie un site qui chiffre.
   ============================================================ */
.visi-calc {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center;
  margin: 34px 0 8px; padding: 34px 36px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.visi-calc .eyebrow { margin-bottom: 10px; }
.visi-calc h2 {
  font-family: var(--font-serif); font-size: 30px; font-weight: 500;
  letter-spacing: -.02em; color: var(--ink); line-height: 1.18; margin-bottom: 14px;
}
.visi-calc-copy p { color: var(--muted); font-size: 15px; line-height: 1.68; max-width: 54ch; }
.visi-calc-points { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.visi-calc-points li {
  position: relative; padding-left: 26px; font-size: 14.5px; color: var(--ink-2, var(--muted));
  line-height: 1.55;
}
.visi-calc-points li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 10px; height: 6px;
  border-left: 2px solid var(--gold-2); border-bottom: 2px solid var(--gold-2);
  transform: rotate(-45deg);
}
.visi-calc-cta { margin-top: 24px; }

.visi-calc-shot {
  background: #fff; border: 1px solid var(--line2, var(--line)); border-radius: 10px;
  overflow: hidden; box-shadow: 0 20px 44px -26px rgba(28, 26, 23, .5);
}
.vcs-bar { display: flex; align-items: center; gap: 5px; padding: 10px 13px; background: #f4f1ec; border-bottom: 1px solid #e7e2d8; }
.vcs-bar span { width: 8px; height: 8px; border-radius: 50%; background: #d9d3c7; }
.vcs-bar em { margin-left: 9px; font-style: normal; font-size: 11px; color: #8b8477; }
.vcs-body { padding: 18px 18px 20px; }
.vcs-t { font-family: var(--font-serif); font-size: 16px; color: #1c1a17; margin-bottom: 14px; }
.vcs-l {
  display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px dotted #ded8cc; font-size: 13.5px; color: #6b6459;
}
.vcs-l i { width: 14px; height: 14px; border: 1.5px solid #c8c1b4; display: block; }
.vcs-l.on i { background: #c2410c; border-color: #c2410c; }
.vcs-l.on { color: #1c1a17; font-weight: 500; }
.vcs-l b { font-weight: 600; color: #1c1a17; }
.vcs-l:last-of-type { border-bottom: 0; }
.vcs-tot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 14px; padding-top: 13px; border-top: 2px solid #1c1a17; font-size: 13.5px; color: #6b6459;
}
.vcs-tot b { font-size: 22px; letter-spacing: -.03em; color: #1c1a17; }

@media (max-width: 960px) {
  .visi-calc { grid-template-columns: 1fr; gap: 28px; padding: 26px 22px; }
  .visi-calc h2 { font-size: 25px; }
  .proof-card img { max-height: 340px; object-fit: cover; object-position: top; }
}

/* ============================================================
   INSCRIPTION — formulaire allégé.
   Le compte est gratuit : on ne demande que l'essentiel (email +
   mot de passe). Les coordonnées deviennent un bloc repliable.
   ============================================================ */
.form-micro {
  margin-top: 12px; text-align: center; font-size: 12.5px;
  color: var(--faint); line-height: 1.55;
}
.opt-fields {
  margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 14px;
}
.opt-fields > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600;
  color: var(--gold-2);
}
.opt-fields > summary::-webkit-details-marker { display: none; }
.opt-fields .of-plus { position: relative; width: 12px; height: 12px; flex-shrink: 0; }
.opt-fields .of-plus::before,
.opt-fields .of-plus::after { content: ""; position: absolute; background: var(--gold-2); transition: transform .2s; }
.opt-fields .of-plus::before { left: 0; top: 5.5px; width: 12px; height: 1.5px; }
.opt-fields .of-plus::after { left: 5.5px; top: 0; width: 1.5px; height: 12px; }
.opt-fields[open] .of-plus::after { transform: scaleY(0); }
.opt-fields .opt-body { margin-top: 14px; }
.opt-fields .opt-body label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 6px; }
.opt-fields .opt-body input { width: 100%; }

/* ============================================================
   TUNNEL DE CONVERSION (admin analytics)
   Barres proportionnelles : on voit d'un coup d'oeil où le
   visiteur décroche, de la visite à l'inscription.
   ============================================================ */
.funnel { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.fn-step { position: relative; }
.fn-bar {
  height: 34px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
  opacity: .16; position: absolute; left: 0; top: 0;
  transition: width .4s ease;
}
.fn-row {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 34px; padding: 0 12px;
}
.fn-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fn-val { font-size: 15px; font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: 10px; }
.fn-val em {
  font-style: normal; font-size: 12px; font-weight: 700; color: var(--gold-2);
  background: var(--gold-bg); border: 1px solid var(--gold-line);
  padding: 2px 8px; border-radius: 20px;
}
.fn-note { margin-top: 14px; font-size: 12.5px; color: var(--faint); line-height: 1.6; }
@media (max-width: 700px) {
  .fn-row { height: auto; min-height: 34px; padding: 8px 10px; flex-wrap: wrap; gap: 6px; }
  .fn-bar { height: 100%; }
}

/* ============================================================
   MINI-BUILDER UNIVERSEL (hero) — 2026-09-28
   Le visiteur saisit ses prestations et SES prix. Les prix de marché sont des
   repères cliquables, jamais des valeurs imposées.
   ============================================================ */
.demo-add {
  margin-top: 8px; width: 100%; padding: 9px 12px; cursor: pointer;
  background: var(--card); border: 1px dashed var(--gold-line); border-radius: var(--radius);
  color: var(--gold-2); font-size: 12.5px; font-weight: 600; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.demo-add:hover { background: var(--gold-bg); border-color: var(--gold); }

.demo-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.demo-line:last-child { border-bottom: none; }
.dl-label {
  flex: 1 1 100%; min-width: 0; padding: 8px 10px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card);
  color: var(--ink); font-family: inherit;
}
.dl-label:focus { outline: none; border-color: var(--gold-line); }
.dl-right { display: flex; align-items: center; gap: 6px; width: 100%; }
.dl-price-input, .dl-qty-input {
  padding: 8px 9px; font-size: 12.5px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--card); color: var(--ink);
  font-family: var(--font-mono); text-align: right;
}
.dl-price-input { flex: 1 1 auto; min-width: 0; }
.dl-qty-input { width: 54px; flex: 0 0 54px; }
.dl-price-input:focus, .dl-qty-input:focus { outline: none; border-color: var(--gold-line); }
.dl-eur { font-size: 12px; color: var(--faint); }
.dl-del {
  width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--card); color: var(--faint); cursor: pointer;
  font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.dl-del:hover { color: var(--danger, #b3261e); border-color: var(--danger, #b3261e); }
.dl-sug {
  flex: 1 1 100%; text-align: left; padding: 3px 0 0; border: none; background: none;
  color: var(--gold-2); font-size: 11px; font-family: var(--font-mono); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.dl-sug:hover { color: var(--gold); }

@media (max-width: 700px) {
  .dl-price-input, .dl-qty-input, .dl-label { font-size: 13px; }
  .dl-qty-input { width: 48px; flex: 0 0 48px; }
  .dl-del { width: 34px; height: 34px; flex: 0 0 34px; }
  .demo-add { padding: 11px; font-size: 13px; }
}