/* ============================================================
   UNLIDOT · DESIGN SYSTEM (source unique, 12 pages + chat)
   Identité v1 : nuit profonde, grille fine, mono-accent bleu
   de marque, angles vifs. Deux thèmes : dark (défaut) et light.
   ------------------------------------------------------------
   Échelle d'espacement : 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128
   Échelle typo : 11.5 / 13.5 / 15 / 16.5 / 20 / 28-42 (h2) / 42-84 (h1)
   Rayons : 0 (angles vifs, signature v1)
   Filets : 1px var(--hair) · séparateur lumineux var(--sep-glow)
   ============================================================ */
:root{
  /* espacement */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
  --s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  /* typo */
  --t-xs:11.5px;--t-sm:13.5px;--t-base:15px;--t-md:16.5px;--t-lg:20px;
  --t-h2:clamp(28px,3.4vw,42px);--t-h1:clamp(42px,6.6vw,84px);
  /* rayons */
  --r-0:0;
  /* familles */
  --grotesk:'Space Grotesk',sans-serif;
  --mono:'Space Mono',monospace;
  --serif:'Newsreader',serif;

  /* ---------- thème sombre (défaut) ---------- */
  color-scheme:dark;
  --nuit:#070A12;
  --nuit-2:#0B101C;
  --nuit-3:#101728;
  --ivoire:#EAEDF5;
  --dim:#9AA3B8;
  --faint:rgba(234,237,245,.12);
  --hair:rgba(234,237,245,.10);
  --bleu:#3613FA;
  --bleu-hover:#4B2FFF;
  --bleu-clair:#6E86FF;
  --on-bleu:#FFFFFF;
  --err:#FF8A8A;
  /* surfaces et filets dérivés */
  --nav-bg:rgba(7,10,18,.86);
  --nav-bg-solid:rgba(7,10,18,.96);
  --grid-line:rgba(234,237,245,.045);
  --grid-line-soft:rgba(234,237,245,.03);
  --ghost-border:rgba(234,237,245,.28);
  --ask-border:rgba(234,237,245,.22);
  --ask-bg:rgba(11,16,28,.88);
  --sep-glow:rgba(110,134,255,.3);
  /* lumière et ombres */
  --ring:rgba(110,134,255,.22);
  --halo:rgba(110,134,255,.14);
  --halo-strong:rgba(54,19,250,.7);
  --glow-strong:rgba(54,19,250,.6);
  --card-glow:rgba(54,19,250,.45);
  --dim-overlay:rgba(4,6,14,.5);
  --overlay-bg:rgba(2,3,8,.62);
  --scrim:rgba(2,3,8,.6);
  --shadow-soft:rgba(0,0,0,.4);
  --shadow-deep:rgba(0,0,0,.5);
  --shadow-deeper:rgba(0,0,0,.7);
  /* mark en fond */
  --wm-op:.035;
  --wm-op-soft:.03;
}
html[data-theme="light"]{
  color-scheme:light;
  --nuit:#F6F8FC;
  --nuit-2:#FFFFFF;
  --nuit-3:#EEF2F9;
  --ivoire:#0B1220;
  --dim:#55607A;
  --faint:rgba(11,18,32,.14);
  --hair:rgba(11,18,32,.10);
  --bleu:#3613FA;
  --bleu-hover:#2B0DD6;
  --bleu-clair:#3D2AE0;
  --on-bleu:#FFFFFF;
  --err:#C22B2B;
  --nav-bg:rgba(246,248,252,.86);
  --nav-bg-solid:rgba(246,248,252,.97);
  --grid-line:rgba(11,18,32,.05);
  --grid-line-soft:rgba(11,18,32,.035);
  --ghost-border:rgba(11,18,32,.32);
  --ask-border:rgba(11,18,32,.22);
  --ask-bg:rgba(255,255,255,.92);
  --sep-glow:rgba(54,19,250,.22);
  --ring:rgba(54,19,250,.16);
  --halo:rgba(54,19,250,.10);
  --halo-strong:rgba(54,19,250,.35);
  --glow-strong:rgba(54,19,250,.28);
  --card-glow:rgba(54,19,250,.18);
  --dim-overlay:rgba(226,232,244,.55);
  --overlay-bg:rgba(16,23,40,.38);
  --scrim:rgba(16,23,40,.35);
  --shadow-soft:rgba(16,23,40,.12);
  --shadow-deep:rgba(16,23,40,.16);
  --shadow-deeper:rgba(16,23,40,.25);
  --wm-op:.05;
  --wm-op-soft:.04;
}
/* ============================================================
   UNLIDOT · IDENTITÉ "V1 DARK"
   Nuit profonde, grille fine, mark du logo en fond, mono-accent
   bleu de marque. Space Grotesk (titres/UI), Space Mono (labels),
   Newsreader (accents serif italique). Sobre, premium, technique.
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--nuit);
  color:var(--ivoire);
  font-family:var(--grotesk);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--bleu);color:#FFFFFF}
a{color:inherit;text-decoration:none}
svg{display:block}
button{font-family:inherit}
[id]{scroll-margin-top:76px}
:focus-visible{outline:2px solid var(--bleu-clair);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- chrome commun ---------- */
.logo{display:flex;align-items:center;gap:12px;color:var(--ivoire)}
.logo .mark{height:30px;width:auto;color:var(--bleu)}
.logo .word{height:19px;width:auto;color:var(--ivoire)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--grotesk);font-weight:600;font-size:15.5px;letter-spacing:.01em;
  padding:15px 26px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  background:none;color:var(--ivoire);text-align:center;
  transition:background .2s,border-color .2s,color .2s,transform .2s,opacity .2s;
}
.btn .chevs{display:inline-flex;gap:2px}
.btn .chevs svg{width:9px;height:13px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn-primary{background:var(--bleu);color:var(--on-bleu)}
.btn-primary:hover{background:var(--bleu-hover)}
.btn-primary:hover .chevs svg:nth-child(1){transform:translateX(3px)}
.btn-primary:hover .chevs svg:nth-child(2){transform:translateX(6px)}
.btn-ghost{border-color:var(--ghost-border);color:var(--ivoire)}
.btn-ghost:hover{border-color:var(--bleu-clair);color:var(--bleu-clair)}
.btn-sm{padding:9px 18px;font-size:13.5px}
.btn:disabled{opacity:.4;cursor:not-allowed}

.kicker{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bleu-clair);
}
.status{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--faint);padding:6px 12px;
}
.status .dot{width:7px;height:7px;background:var(--bleu-clair);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  padding:16px clamp(18px,4vw,48px);
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
}
/* le fond de la barre reste pleine largeur ; son contenu s'aligne
   sur le même conteneur centré que le hero et les sections */
.nav-inner{
  max-width:1180px;margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links .nlink{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);transition:color .2s;background:none;border:none;cursor:pointer;padding:4px 2px;
}
.nav-links .nlink:hover{color:var(--bleu-clair)}
#navBtn{display:none;background:none;border:1px solid var(--faint);color:var(--ivoire);
  width:36px;height:36px;place-items:center;cursor:pointer}
#navBtn svg{width:17px;height:17px}
@media (max-width:900px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--nav-bg-solid);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--hair);
    padding:8px 18px 16px;
  }
  .nav-links .nlink{text-align:left;padding:12px 6px;border-bottom:1px solid var(--hair)}
  .nav-links .btn{margin-top:12px}
  body.nav-open .nav-links{display:flex}
  #navBtn{display:grid}
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:calc(100svh - 70px);
  display:flex;flex-direction:column;justify-content:center;
  padding:88px clamp(18px,4vw,48px) 72px;overflow:hidden;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:72px 72px;
}
.watermark{
  position:absolute;z-index:1;right:-140px;bottom:-120px;
  width:760px;color:var(--ivoire);opacity:var(--wm-op);pointer-events:none;
}
.hero-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%}
.hero h1{
  font-weight:600;line-height:1.04;letter-spacing:-.025em;
  font-size:clamp(42px,6.6vw,84px);
  margin-top:30px;max-width:16ch;
}
.hero h1 .acc{color:var(--bleu-clair)}
.hero .sub{
  color:var(--dim);font-size:clamp(17px,1.6vw,20px);max-width:56ch;
  margin:26px 0 40px;
}
.cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* zone de saisie façon chat : le coeur du funnel, visible d'entrée */
.hero-ask{margin:0 0 18px;max-width:860px}
.ha-shell{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--ask-border);background:var(--ask-bg);
  padding:9px 9px 9px 20px;
  transition:border-color .25s,box-shadow .25s;
}
.ha-shell:hover,.ha-shell:focus-within{
  border-color:var(--bleu-clair);
  box-shadow:0 0 0 3px var(--ring),0 22px 60px -34px var(--glow-strong);
}
.hero-ask input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--ivoire);font-family:inherit;font-size:16px;line-height:1.5;
  padding:11px 0;cursor:pointer;
}
.hero-ask input::placeholder{color:var(--dim);text-overflow:ellipsis}
.hero-ask .btn{flex:none}
.hero-assure{
  margin-top:12px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:var(--dim);
}
@media (max-width:700px){
  .hero-ask{max-width:none}
  .ha-shell{flex-direction:column;align-items:stretch;gap:8px;padding:12px}
  .hero-ask input{padding:9px 4px}
  .hero-ask .btn{width:100%}
}
.proof-inline{
  margin-top:56px;display:flex;align-items:center;gap:14px;
  font-family:var(--serif);font-style:italic;font-size:17px;
  color:var(--dim);flex-wrap:wrap;
}
.proof-inline .chev-b{width:10px;height:15px;color:var(--bleu);flex:none}
.anim-in{opacity:0;transform:translateY(18px);animation:risein .8s cubic-bezier(.2,.8,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}
@keyframes risein{to{opacity:1;transform:none}}

/* ---------- barre de confiance ---------- */
.trust{
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:var(--nuit-2);
  padding:30px clamp(18px,4vw,48px);
}
.trust-inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.trust-top{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.trust-chips{display:flex;gap:10px;flex-wrap:wrap;list-style:none}
.trust-chips li{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ivoire);border:1px solid var(--faint);padding:7px 13px;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.trust-chips li::before{content:"";width:6px;height:6px;background:var(--bleu);flex:none}
.trust-line{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--dim);
  border-top:1px solid var(--hair);padding-top:14px;line-height:1.8;
}

/* ---------- bandes de sections ---------- */
.band{padding:96px clamp(18px,4vw,48px);border-top:1px solid var(--hair);position:relative;overflow:hidden}
.band-inner{max-width:1180px;margin:0 auto;position:relative;z-index:1}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:52px;flex-wrap:wrap}
.band-head h2{font-size:clamp(28px,3.4vw,42px);font-weight:600;letter-spacing:-.02em}
.band-head h2 .dimmed{color:var(--dim)}
.band-lead{margin-top:-38px;margin-bottom:48px;color:var(--dim);font-size:16px;max-width:60ch}
.band.alt{background:var(--nuit-2)}

/* cartes v1 : grille à filets */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--nuit);padding:32px 28px 38px;
  transition:background .25s;position:relative;display:flex;flex-direction:column;
}
.band.alt .card{background:var(--nuit-2)}
.card:hover{background:var(--nuit-3)}
.card .idx{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.1em}
.card .cb{width:15px;height:22px;color:var(--bleu);margin:26px 0 18px;transition:transform .25s}
.card:hover .cb{transform:translateX(5px);color:var(--bleu-clair)}
.card h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:12px}
.card p{font-size:15px;color:var(--dim);line-height:1.65}
.card .ek{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bleu-clair);margin-bottom:14px;
}
.card .ptags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:18px}
.card .ptags span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--dim);
  border:1px solid var(--faint);padding:4px 8px;white-space:nowrap;
}
.card .pcat{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:14px;
}

/* résultats : métriques + témoignages serif */
.tres{
  font-size:clamp(22px,2.4vw,28px);font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--bleu-clair);margin-bottom:14px;
}
.card blockquote{
  font-family:var(--serif);font-style:italic;font-size:16.5px;color:var(--ivoire);
  line-height:1.6;margin:0 0 18px;
}
.card figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.twho{font-size:14px;font-weight:600}
.tmeta{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.04em}
.tnote{margin-top:40px;font-family:var(--mono);font-size:10px;color:var(--dim);opacity:.45;letter-spacing:.05em}

.sctarow{margin-top:44px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sctahint{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.04em}

/* ---------- fondateurs ---------- */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.founder{background:var(--nuit-2);padding:34px 30px;display:flex;gap:22px;align-items:flex-start}
.band:not(.alt) .founder{background:var(--nuit)}
.fbadge{
  flex:none;width:58px;height:58px;display:grid;place-items:center;
  border:1px solid var(--bleu);color:var(--bleu-clair);
  font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:.08em;
}
.founder h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.frole{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bleu-clair);margin:6px 0 10px;
}
.founder p{font-size:14.5px;color:var(--dim);line-height:1.65}
@media (max-width:700px){.founders{grid-template-columns:1fr}.founder{padding:26px 20px}}

/* ---------- blog : cartes-liens ---------- */
a.card{cursor:pointer}
.card .rlink{
  margin-top:auto;padding-top:20px;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bleu-clair);
}
.card .rlink svg{width:9px;height:13px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
a.card:hover .rlink svg{transform:translateX(4px)}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--hair)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 2px;cursor:pointer;font-size:16.5px;font-weight:500;
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--bleu-clair)}
.fplus{flex:none;width:15px;height:15px;color:var(--dim);transition:transform .25s ease}
.faq-item[open] .fplus{transform:rotate(45deg)}
.faq-item p{padding:0 2px 22px;font-size:15px;color:var(--dim);line-height:1.7;max-width:66ch}

/* ---------- CTA final ---------- */
.ctasec{position:relative;overflow:hidden}
.ctasec .watermark{right:auto;left:-160px;bottom:-160px;width:640px}
.ctasec .band-inner{display:flex;flex-direction:column;align-items:flex-start}
.ctasec h2{font-size:clamp(30px,4vw,52px);font-weight:600;letter-spacing:-.02em}
.ctasec .ctalead{
  font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.8vw,22px);
  color:var(--dim);margin:18px 0 34px;max-width:46ch;
}
.ctarow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ctassure{margin-top:18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dim)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair);padding:56px clamp(18px,4vw,48px)}
.fin{
  max-width:1180px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;justify-content:space-between;
}
.fbrand .logo .mark{height:24px}
.fbrand .logo .word{height:15px}
.fbrand p{font-size:13.5px;color:var(--dim);margin-top:14px;line-height:1.7;max-width:32ch}
.flinks{display:flex;gap:26px;flex-wrap:wrap}
.flinks a{
  font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);transition:color .2s;
}
.flinks a:hover{color:var(--bleu-clair)}
.fcopy{
  width:100%;border-top:1px solid var(--hair);padding-top:18px;
  font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.04em;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.fcopy svg{width:8px;height:12px;color:var(--bleu)}

/* ---------- apparitions au scroll ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(24px) scale(.985);
    transition:opacity .65s ease var(--d,0s),transform .8s cubic-bezier(.22,1,.36,1) var(--d,0s)}
  .reveal.in{opacity:1;transform:none}
}

/* ============================================================
   VUE IMMERSIVE : l'outil sort du flux de page.
   Transition "sheet rise + blur" conservée : la home se floute,
   s'assombrit et recule (scale .965) pendant que la feuille
   monte depuis le bas. Easing sheet, ~520ms.
   ============================================================ */
body.view-open{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  #homeShell{transition:transform .52s cubic-bezier(.32,.72,0,1)}
}
body.view-open #homeShell{transform:scale(.965)}
#homeDim{
  position:fixed;inset:0;z-index:58;pointer-events:none;
  background:var(--dim-overlay);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;
  transition:opacity .52s ease,visibility 0s linear .52s;
}
body.view-open #homeDim{opacity:1;visibility:visible;transition:opacity .52s ease}
#estimateView{
  position:fixed;inset:0;top:14px;z-index:64;display:none;flex-direction:column;
  background:var(--nuit);overflow:hidden;
  border-top:1px solid var(--hair);
  box-shadow:0 -12px 60px var(--shadow-deep);
  padding:0 clamp(14px,4vw,28px) clamp(8px,1.6vh,16px);
  will-change:transform;
  background-image:
    linear-gradient(var(--grid-line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line-soft) 1px,transparent 1px);
  background-size:96px 96px;
}
#estimateView::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:5;
  background:linear-gradient(90deg,transparent,var(--bleu),var(--bleu-clair),transparent);
  opacity:.9;pointer-events:none;
}
#estimateView .vmark{
  position:absolute;z-index:0;right:-120px;bottom:-140px;
  width:620px;color:var(--ivoire);opacity:var(--wm-op-soft);pointer-events:none;
  transition:opacity 1.4s ease;
}
/* aura ambiante : le fond s'éveille doucement dès qu'une estimation existe */
#estimateView::before{
  content:"";position:absolute;z-index:0;right:-16%;top:6%;width:58%;height:82%;
  background:radial-gradient(closest-side,var(--halo),transparent 72%);
  opacity:0;transition:opacity 1.6s ease;pointer-events:none;
}
body.has-estimate #estimateView::before{opacity:1}
body.has-estimate #estimateView .vmark{opacity:calc(var(--wm-op-soft)*1.9)}
@media (prefers-reduced-motion:no-preference){
  #estimateView .vmark{animation:vdrift 30s ease-in-out infinite alternate}
}
@keyframes vdrift{to{transform:translate3d(-22px,-16px,0) rotate(-1.1deg)}}
#estimateView.open{display:flex}
@media (prefers-reduced-motion:no-preference){
  #estimateView.open{animation:sheetin .52s cubic-bezier(.32,.72,0,1) both}
  #estimateView.closing{animation:sheetout .46s cubic-bezier(.5,.05,.65,.4) both}
}
@keyframes sheetin{from{transform:translateY(103%)}to{transform:translateY(0)}}
@keyframes sheetout{from{transform:translateY(0)}to{transform:translateY(103%)}}
.viewbar{
  flex:none;position:relative;z-index:2;
  display:flex;align-items:center;gap:12px;
  padding:14px 0 10px;
}
#viewClose{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim);
  background:var(--nuit-2);border:1px solid var(--faint);
  padding:8px 14px;cursor:pointer;
  transition:color .2s,border-color .2s;
}
#viewClose:hover{color:var(--bleu-clair);border-color:var(--bleu-clair)}
#viewClose svg{width:14px;height:14px}
.viewtitle{
  position:absolute;left:50%;transform:translateX(-50%);
  font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
}
.viewfree{
  margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap;
}
@media (max-width:600px){.viewtitle{display:none}}
.column{
  position:relative;z-index:1;margin:0 auto;
  width:min(1260px,100%);display:flex;flex-direction:row;align-items:stretch;
  gap:clamp(14px,2vw,22px);flex:1;min-height:0;
}
.panel{
  flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;
  background:var(--nuit-2);
  border:1px solid var(--hair);
  padding:0 clamp(18px,3vw,40px);
}

/* ---------- fil de messages ---------- */
#thread{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:26px 2px 12px;
  scrollbar-width:thin;scrollbar-color:var(--faint) transparent;
}
#thread::-webkit-scrollbar{width:8px}
#thread::-webkit-scrollbar-thumb{background:var(--faint)}
.msg{margin:0 0 26px;font-size:16.5px;line-height:1.7;
  animation:msgin .55s cubic-bezier(.22,1,.36,1) both}
@keyframes msgin{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(5px)}}
.msg.ai{color:var(--ivoire);max-width:100%;overflow-wrap:anywhere}
.msg.user{display:flex;justify-content:flex-end}
.msg.user .bubble{
  max-width:74%;background:var(--bleu);color:var(--on-bleu);
  padding:11px 18px;overflow-wrap:anywhere;
}
.msg strong{font-weight:600}
.msg em{color:var(--dim);font-style:italic}
.msg .li{display:flex;gap:9px;margin:3px 0}
.msg .li::before{content:"·";color:var(--dim);font-weight:600}
.msg .caret{
  display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.18em;
  background:var(--bleu-clair);transform-origin:bottom;
  box-shadow:0 0 9px var(--halo-strong);
  animation:caret .9s ease-in-out infinite;
}
@keyframes caret{50%{opacity:.15;transform:scaleY(.8)}}
.msg.sys{
  font-family:var(--mono);font-size:13px;color:var(--err);
  border-left:2px solid var(--err);padding-left:12px;
}
/* invite e-mail douce après l'estimation : jamais bloquante */
.msg.mailask{
  border:1px solid var(--faint);border-left:2px solid var(--bleu);
  background:var(--nuit);padding:16px 18px;max-width:520px;
}
.msg.mailask p{font-size:14.5px;color:var(--ivoire);margin-bottom:12px}
.mailask-form{display:flex;gap:8px;flex-wrap:wrap}
.mailask-form input{
  flex:1;min-width:180px;padding:10px 12px;
  border:1px solid var(--faint);background:var(--nuit-2);
  color:var(--ivoire);font-family:inherit;font-size:14px;outline:none;
  transition:border-color .2s;
}
.mailask-form input:focus{border-color:var(--bleu-clair)}
.mailask-form input[aria-invalid="true"]{border-color:var(--err)}
.ma-send{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  background:var(--bleu);color:var(--on-bleu);border:none;padding:10px 16px;cursor:pointer;
  transition:background .2s;
}
.ma-send:hover{background:var(--bleu-hover)}
.ma-skip{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  background:none;color:var(--dim);border:1px solid var(--faint);padding:10px 14px;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.ma-skip:hover{color:var(--ivoire);border-color:var(--dim)}

/* ---------- attente ---------- */
.thinking{margin:0 0 26px;display:flex;gap:6px;align-items:center;height:22px;
  animation:msgin .5s cubic-bezier(.22,1.25,.36,1) both}
.thinking span{
  width:7px;height:7px;background:var(--bleu-clair);
  box-shadow:0 0 8px var(--halo-strong);
  animation:dot 1.05s ease-in-out infinite;
}
.thinking span:nth-child(2){animation-delay:.15s;background:var(--bleu)}
.thinking span:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* ---------- composer ---------- */
.dock{flex:none;padding:6px 0 18px}
.cshell{
  border:1px solid var(--faint);background:var(--nuit);
  transition:border-color .3s ease;
}
.cshell:focus-within{border-color:var(--bleu-clair)}
#composer{display:flex;align-items:flex-end;gap:8px;padding:9px 9px 9px 18px}
#input{
  flex:1;background:none;border:none;outline:none;resize:none;
  color:var(--ivoire);font-family:inherit;font-size:16px;line-height:1.5;
  max-height:180px;min-height:24px;padding:5px 0;
}
#input::placeholder{color:var(--dim)}
#send{
  flex:none;width:38px;height:38px;border:none;cursor:pointer;
  display:grid;place-items:center;color:var(--on-bleu);background:var(--bleu);
  transition:background .2s,opacity .2s;
}
#send:hover:not(:disabled){background:var(--bleu-hover)}
#send:disabled{opacity:.35;cursor:not-allowed}
#send svg{width:17px;height:17px}
.dockmeta{margin-top:9px;display:flex;justify-content:center;align-items:center;gap:14px}
.hint{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.03em}
#resetBtn{
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--dim);
  background:none;border:none;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;padding:2px 4px;
  transition:color .2s;
}
#resetBtn:hover{color:var(--ivoire)}

/* ---------- suggestions (toujours affichées, régénérées à chaque tour) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 2px 2px}
.chips[hidden]{display:none}
.chip{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--dim);line-height:1.3;
  border:1px solid var(--faint);background:var(--nuit);
  animation:chipin .45s cubic-bezier(.22,1.25,.36,1) both;
  padding:8px 14px;cursor:pointer;white-space:nowrap;
  transition:color .2s,border-color .2s,
    translate .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease;
}
/* cascade : chaque tour de conversation fait pleuvoir les puces une à une */
.chips .chip:nth-child(1){animation-delay:.04s}
.chips .chip:nth-child(2){animation-delay:.11s}
.chips .chip:nth-child(3){animation-delay:.18s}
.chips .chip:nth-child(4){animation-delay:.25s}
.chips .chip:nth-child(5){animation-delay:.32s}
.chips .chip:nth-child(6){animation-delay:.39s}
.chips .chip:nth-child(n+7){animation-delay:.46s}
.chip:hover,.chip:focus-visible{color:var(--bleu-clair);border-color:var(--bleu-clair)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .chip:hover{translate:0 -1px;box-shadow:0 8px 20px -12px var(--card-glow)}
}
@keyframes chipin{from{opacity:0;transform:translateY(9px) scale(.94);filter:blur(3px)}}
/* puce d'action : recevoir le devis exact (coordonnées) */
.chip-cta{
  position:relative;overflow:hidden;
  color:var(--on-bleu);background:var(--bleu);border-color:var(--bleu);
  box-shadow:0 8px 24px -12px var(--halo-strong);
}
.chip-cta:hover,.chip-cta:focus-visible{
  color:var(--on-bleu);background:var(--bleu-hover);border-color:var(--bleu-hover);
}
/* reflet vivant qui balaie la puce CTA à intervalle régulier */
.chip-cta::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:55%;
  background:linear-gradient(105deg,transparent,var(--on-bleu),transparent);
  opacity:.22;transform:skewX(-16deg);pointer-events:none;
  animation:ctasheen 3.4s cubic-bezier(.55,0,.3,1) 1.2s infinite;
}
@keyframes ctasheen{0%{transform:translateX(0) skewX(-16deg)}
  55%,100%{transform:translateX(360%) skewX(-16deg)}}
@media (prefers-reduced-motion:reduce){.chip{animation:none}.chip-cta::after{display:none}}
@media (max-width:700px){
  .chips{flex-wrap:nowrap;overflow-x:auto;padding:10px 2px 8px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
}

/* ---------- panneau estimation ----------
   masqué tant qu'aucune estimation n'existe : le chat occupe alors
   toute la largeur. Il apparaît (has-estimate) dès la 1re fourchette. */
.quote{
  flex:none;width:clamp(300px,26vw,336px);min-height:0;
  display:none;flex-direction:column;
  background:var(--nuit-2);border:1px solid var(--hair);
  padding:22px 22px 20px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--faint) transparent;
}
/* LE moment : l'estimation se matérialise — glissé + zoom léger,
   flou -> net, halo bleu qui s'installe, puis cascade interne */
body.has-estimate .quote{
  display:flex;
  animation:quotein .7s cubic-bezier(.22,1,.36,1) both;
  box-shadow:0 0 0 1px var(--ring),0 24px 90px -42px var(--glow-strong);
}
@keyframes quotein{
  0%{opacity:0;transform:translateX(30px) scale(.965);filter:blur(10px)}
  62%{filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}
/* cascade : les blocs internes apparaissent l'un après l'autre */
body.has-estimate .quote :is(.qhead,.qrow,.qmail,.qactions){
  animation:qrise .55s cubic-bezier(.22,1,.36,1) both;
}
body.has-estimate .quote .qhead{animation-delay:.16s}
body.has-estimate .quote .qrow:nth-child(1){animation-delay:.24s}
body.has-estimate .quote .qrow:nth-child(2){animation-delay:.31s}
body.has-estimate .quote .qrow:nth-child(3){animation-delay:.38s}
body.has-estimate .quote .qrow:nth-child(4){animation-delay:.45s}
body.has-estimate .quote .qmail{animation-delay:.62s}
body.has-estimate .quote .qactions{animation-delay:.7s}
@keyframes qrise{from{opacity:0;transform:translateY(12px);filter:blur(4px)}}
@media (prefers-reduced-motion:reduce){
  body.has-estimate .quote,
  body.has-estimate .quote :is(.qhead,.qrow,.qmail,.qactions){animation:none}
}
.quote.nudge{animation:qnudge .45s ease}
@keyframes qnudge{35%{transform:translateY(-3px)}}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.qhead h2{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-right:auto}
#qClose{
  display:none;width:28px;height:28px;border:none;
  background:none;color:var(--dim);font-size:14px;cursor:pointer;line-height:1;
  transition:color .2s;
}
#qClose:hover{color:var(--ivoire)}
.qstatus{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;
}
.qdot{flex:none;position:relative;width:7px;height:7px;background:var(--bleu-clair);animation:pulse 1.8s ease-in-out infinite}
/* onde radar : le point de statut respire vers l'extérieur */
.qdot::after{
  content:"";position:absolute;inset:0;background:var(--bleu-clair);
  opacity:0;animation:qping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes qping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3);opacity:0}}
.qrows{display:flex;flex-direction:column;margin:0}
.qrow{
  position:relative;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--hair);
}
/* filet lumineux qui balaie la ligne quand sa valeur vient d'être posée */
.qrow::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--bleu-clair),var(--sep-glow),transparent);
  transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none;
}
.qrow:has(.qv.pop)::after{animation:qhairline .9s cubic-bezier(.22,1,.36,1)}
@keyframes qhairline{
  0%{transform:scaleX(0);opacity:1}
  55%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}
.qrow dt{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--dim);white-space:nowrap}
.qrow dd{font-size:13px;font-weight:500;text-align:right;color:var(--dim);overflow-wrap:anywhere}
.qrow dd.isset{color:var(--ivoire)}
.qv.pop{animation:qpop .6s cubic-bezier(.22,1,.36,1)}
@keyframes qpop{
  0%{opacity:0;transform:translateY(6px);filter:blur(3px);color:var(--bleu-clair)}
  55%{color:var(--bleu-clair);filter:none}
  100%{opacity:1;transform:none}
}
.qcard{
  display:none;position:relative;margin-top:16px;
  border:1px solid var(--bleu);border-left:3px solid var(--bleu);
  background:var(--nuit);padding:16px 17px 15px;
}
/* halo qui respire derrière la carte prix */
.qcard::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;
  box-shadow:0 0 30px -6px var(--card-glow),0 0 72px -18px var(--halo-strong);
}
.qcard.on::before{animation:qbreathe 5s ease-in-out infinite}
@keyframes qbreathe{0%,100%{opacity:.35}50%{opacity:.8}}
/* rai de lumière qui parcourt l'arête haute de la carte */
.qcard::after{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:2px;
  pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--bleu-clair) 45%,var(--bleu-clair) 55%,transparent);
  background-size:40% 100%;background-repeat:no-repeat;background-position:-100% 0;
}
.qcard.on::after{opacity:.9;animation:qsweep 3.2s cubic-bezier(.55,0,.3,1) infinite}
@keyframes qsweep{0%{background-position:-100% 0}60%,100%{background-position:200% 0}}
/* entrée du prix : montée + flou -> net, après la cascade des lignes */
.qcard.on{
  display:block;
  box-shadow:0 12px 34px -18px var(--card-glow);
  animation:qcardin .75s cubic-bezier(.22,1,.36,1) .45s both;
}
@keyframes qcardin{
  0%{opacity:0;transform:translateY(16px) scale(.96);filter:blur(8px)}
  100%{opacity:1;transform:none;filter:none}
}
/* mise à jour du prix en cours de conversation : pulse de halo… */
.qcard.on.priceflash{animation:qflash .8s cubic-bezier(.2,.8,.2,1)}
@keyframes qflash{
  0%{box-shadow:0 0 0 0 var(--halo-strong),0 0 46px -4px var(--halo-strong)}
  100%{box-shadow:0 0 0 14px transparent,0 12px 34px -18px var(--card-glow)}
}
.qlabel{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bleu-clair);margin-bottom:6px;
}
.qprice{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ivoire)}
/* …et le chiffre bascule : flou + glissé, flash bleu qui se pose en ivoire */
.qprice.swap{animation:qswap .65s cubic-bezier(.22,1,.36,1)}
@keyframes qswap{
  0%{opacity:0;transform:translateY(-9px);filter:blur(7px);color:var(--bleu-clair)}
  45%{color:var(--bleu-clair);filter:none}
  100%{opacity:1;transform:none}
}
.qcarddelay{margin-top:4px;font-size:12.5px;color:var(--dim)}
.qcarddelay:empty{display:none}
.qcardmail{
  margin-top:11px;padding-top:10px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--bleu-clair);display:flex;align-items:center;gap:7px;
}
.qcardmail::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--bleu-clair);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bleu-clair) 22%,transparent);
}
/* e-mail FACULTATIF, capté au moment de la valeur : jamais bloquant */
.qmail{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.qmail label{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);margin-bottom:8px;
}
.qmail-row{display:flex;gap:6px}
.qmail-row input{
  flex:1;min-width:0;padding:9px 11px;
  border:1px solid var(--faint);background:var(--nuit);
  color:var(--ivoire);font-family:inherit;font-size:13.5px;outline:none;
  transition:border-color .2s;
}
.qmail-row input:focus{border-color:var(--bleu-clair)}
.qmail-row input[aria-invalid="true"]{border-color:var(--err)}
.qmail-row button{
  flex:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  background:none;color:var(--bleu-clair);border:1px solid var(--bleu-clair);
  padding:9px 13px;cursor:pointer;transition:background .2s,color .2s;
}
.qmail-row button:hover{background:var(--bleu);border-color:var(--bleu);color:var(--on-bleu)}
/* le modèle demande les coordonnées : le champ e-mail appelle l'œil */
body.want-contact .qmail{border-top-color:var(--bleu)}
body.want-contact .qmail label{color:var(--bleu-clair)}
body.want-contact .qmail-row input{
  border-color:var(--bleu);
  animation:qbeckon 2.2s ease-in-out infinite;
}
@keyframes qbeckon{
  0%,100%{box-shadow:0 0 0 0 var(--ring)}
  50%{box-shadow:0 0 0 4px var(--ring),0 0 26px -8px var(--halo-strong)}
}
@media (prefers-reduced-motion:reduce){
  body.want-contact .qmail-row input{animation:none;box-shadow:0 0 0 3px var(--ring)}
}
.qmail-ok{font-size:12.5px;color:var(--dim);line-height:1.55}
.qmail-ok b{color:var(--ivoire);font-weight:600;overflow-wrap:anywhere}
.qactions{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:9px}
.qactions .btn{width:100%;font-size:14px;padding:12px 16px}
/* CTA vivant au moment du payoff : halo qui respire + reflet qui balaie */
.qactions .btn-primary{position:relative;overflow:hidden}
body.want-contact .qactions .btn-primary{animation:ctabreathe 2.6s ease-in-out infinite}
@keyframes ctabreathe{
  0%,100%{box-shadow:0 0 0 0 var(--halo),0 10px 30px -12px var(--halo-strong)}
  50%{box-shadow:0 0 0 5px var(--halo),0 16px 40px -10px var(--halo-strong)}
}
body.want-contact .qactions .btn-primary::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:55%;
  background:linear-gradient(105deg,transparent,var(--on-bleu),transparent);
  opacity:.2;transform:skewX(-16deg);pointer-events:none;
  animation:ctasheen 3.4s cubic-bezier(.55,0,.3,1) .6s infinite;
}
@media (prefers-reduced-motion:reduce){
  body.want-contact .qactions .btn-primary{animation:none}
  body.want-contact .qactions .btn-primary::after{display:none}
}
.qcall{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--dim);
  text-align:center;padding:4px;transition:color .2s;
}
.qcall:hover{color:var(--bleu-clair)}
#quoteToggle{display:none}
#quoteToggle.nudge{animation:qnudge .45s ease}
@media (max-width:980px){
  .column{flex-direction:column}
  .quote{
    position:fixed;left:0;right:0;bottom:0;z-index:60;width:auto;
    max-height:72dvh;border-bottom:none;
    background:var(--nuit-2);
    padding-bottom:max(20px,env(safe-area-inset-bottom));
    transform:translateY(105%);
    transition:transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s ease;
  }
  /* sur mobile le panneau est un tiroir : pas d'anim de glissé latéral */
  body.has-estimate .quote{animation:none;transform:translateY(105%)}
  body.has-estimate .quote :is(.qhead,.qrow,.qmail,.qactions){animation:none}
  body.has-estimate.quote-open .quote{transform:translateY(0)}
  body.quote-open .quote{
    transform:translateY(0);
    box-shadow:0 0 0 100vmax var(--scrim),0 -18px 50px var(--shadow-soft);
  }
  .quote.nudge{animation:none}
  #qClose{display:grid;place-items:center}
  #quoteToggle{
    position:fixed;right:14px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:66;
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--ivoire);
    background:var(--nuit-3);
    border:1px solid var(--faint);
    padding:9px 15px;box-shadow:0 12px 40px var(--shadow-deep);cursor:pointer;
    transition:opacity .2s;
    opacity:0;pointer-events:none;
  }
  #quoteToggle .qdot{width:6px;height:6px}
  body.view-open.has-estimate #quoteToggle{opacity:1;pointer-events:auto}
  body.quote-open #quoteToggle{opacity:0;pointer-events:none}
}

/* ---------- CTA collant mobile ---------- */
#stickyCta{display:none}
@media (max-width:820px){
  #stickyCta{
    position:fixed;left:14px;right:14px;
    bottom:calc(12px + env(safe-area-inset-bottom));z-index:55;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--grotesk);font-size:14.5px;font-weight:600;color:var(--on-bleu);
    background:var(--bleu);border:none;
    padding:15px 20px;cursor:pointer;
    box-shadow:0 12px 32px -12px var(--halo-strong);
    opacity:0;pointer-events:none;transform:translateY(10px);
    transition:opacity .25s ease,transform .25s ease;
  }
  body.show-sticky-cta #stickyCta{opacity:1;pointer-events:auto;transform:none}
  body.quote-open #stickyCta,body.view-open #stickyCta{opacity:0;pointer-events:none}
}

/* ---------- modale devis ---------- */
#overlay{
  position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  padding:18px;background:var(--overlay-bg);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
#overlay.open{display:flex}
#modal{
  width:min(520px,100%);max-height:88dvh;overflow-y:auto;
  border:1px solid var(--faint);background:var(--nuit-2);
  box-shadow:0 28px 80px -22px var(--shadow-deeper);
  padding:26px clamp(18px,4vw,28px);
  animation:msgin .4s cubic-bezier(.22,1.25,.36,1) both;
}
#modal h2{font-size:19px;font-weight:600;letter-spacing:-.01em}
#modal .msub{color:var(--dim);font-size:13.5px;margin:8px 0 18px;line-height:1.55}
.recap{
  border:1px solid var(--hair);background:var(--nuit);padding:12px 14px;margin-bottom:18px;
  font-family:var(--mono);font-size:11.5px;line-height:1.8;color:var(--dim);
  white-space:pre-wrap;max-height:160px;overflow-y:auto;overflow-wrap:anywhere;
}
.recap b{color:var(--ivoire);font-weight:700}
.field{margin-bottom:12px}
.field label{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);margin-bottom:6px;
}
.field input{
  width:100%;padding:10px 13px;
  border:1px solid var(--faint);background:var(--nuit);
  color:var(--ivoire);font-family:inherit;font-size:14.5px;outline:none;
  transition:border-color .2s;
}
.field input:focus{border-color:var(--bleu-clair)}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mfoot{display:flex;gap:10px;margin-top:20px}
.mfoot .btn{flex:1;font-size:14px;padding:12px 16px}
#modalClose{
  float:right;width:30px;height:30px;border:none;
  background:none;color:var(--dim);font-size:15px;cursor:pointer;line-height:1;
  transition:color .2s;
}
#modalClose:hover{color:var(--ivoire)}
#confirm{text-align:center;padding:22px 6px 8px;display:none}
#confirm .ring{
  width:58px;height:58px;margin:0 auto 16px;
  border:2px solid var(--bleu);
  display:grid;place-items:center;color:var(--bleu-clair);
}
#confirm h3{font-size:17px;font-weight:600;margin-bottom:8px}
#confirm p{color:var(--dim);font-size:13.5px;line-height:1.6}

/* ---------- responsive sections ---------- */
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards.three{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  header.nav{padding:16px 18px}
  .hero{padding:72px 18px 60px}
  .band{padding:72px 18px}
  footer{padding:48px 18px}
  .trust{padding:26px 18px}
}
@media (max-width:700px){
  .cards,.cards.three{grid-template-columns:1fr}
  .watermark{width:440px;right:-150px;bottom:-90px;opacity:var(--wm-op-soft)}
  .ctasec .watermark{width:380px;left:-130px}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
  .trust-top{flex-direction:column;align-items:flex-start}
  #estimateView{top:10px;padding:0 0 6px}
  #estimateView .vmark{width:380px;right:-120px}
  .viewbar{padding:10px 14px 8px}
  .viewfree{display:none}
  .column{width:100%}
  .panel{border:none;background:transparent;padding:0 14px}
  #thread{padding-top:14px}
  .msg{font-size:15.5px;line-height:1.65;margin-bottom:22px}
  .msg.user .bubble{max-width:88%}
  .dock{padding-bottom:6px}
  .hint{display:none}
}

/* ---------- reduced motion : états finaux lisibles ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .anim-in{opacity:1;transform:none}
  .thinking span{opacity:.6}
}

.nav-links .nlink[aria-current="page"]{color:var(--ivoire)}

/* ---------- entete de page ---------- */
.pagehead{
  position:relative;overflow:hidden;
  padding:84px clamp(18px,4vw,48px) 64px;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:72px 72px;
}
.pagehead .watermark{
  position:absolute;right:-140px;bottom:-160px;
  width:560px;color:var(--ivoire);opacity:var(--wm-op);pointer-events:none;
}
.ph-inner{position:relative;max-width:1180px;margin:0 auto}
.pagehead h1{
  font-weight:600;line-height:1.06;letter-spacing:-.025em;
  font-size:clamp(36px,5vw,62px);margin-top:22px;max-width:22ch;
}
.pagehead h1 .acc{color:var(--bleu-clair)}
.pagehead .lead{color:var(--dim);font-size:clamp(16px,1.5vw,19px);max-width:60ch;margin-top:20px}


.watermark{position:absolute;z-index:0;right:-140px;bottom:-120px;width:760px;color:var(--ivoire);opacity:var(--wm-op);pointer-events:none}

/* ---------- listes a puces carrees ---------- */
.sqlist{list-style:none}
.sqlist li{display:flex;gap:10px;font-size:14.5px;color:var(--dim);line-height:1.6;padding:5px 0}
.sqlist li::before{content:"";flex:none;width:6px;height:6px;background:var(--bleu);margin-top:8px}

/* ---------- prose (articles + legal) ---------- */
.prose{max-width:72ch}
.prose h2{font-size:21px;font-weight:600;letter-spacing:-.01em;margin:38px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--dim);font-size:15.5px;line-height:1.8;margin-bottom:16px}
.prose p strong{color:var(--ivoire);font-weight:600}
.prose ul{list-style:none;margin:0 0 16px}
.prose li{display:flex;gap:10px;color:var(--dim);font-size:15px;line-height:1.7;padding:3px 0}
.prose li::before{content:"";flex:none;width:6px;height:6px;background:var(--bleu);margin-top:8px}
.prose a{color:var(--bleu-clair)}
.prose a:hover{text-decoration:underline;text-underline-offset:3px}
.chapo{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(18px,1.9vw,22px);color:var(--dim);line-height:1.6;max-width:56ch;
}
.artmeta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-top:26px;
}


@media (max-width:900px){.pagehead{padding:64px 18px 52px}}

/* ============================================================
   CRO · RYTHME & SCANNABILITÉ (additif, identité v1 préservée)
   - eyebrows mono en accent AU-DESSUS de chaque h2
   - plus d'air vertical entre sections
   - fin séparateur lumineux entre sections
   ============================================================ */
.band{padding-top:112px;padding-bottom:112px}
.band::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--sep-glow),transparent);
  pointer-events:none;
}
.pagehead + .band::before{display:none}
.band-head{flex-direction:column-reverse;align-items:flex-start;justify-content:flex-start;gap:14px}
.band-head .kicker::before{content:"";width:20px;height:1px;background:var(--bleu-clair);flex:none}
@media (max-width:900px){.band{padding-top:84px;padding-bottom:84px}}

/* ============================================================
   BASCULE DE THÈME · soleil / lune dans le header
   ============================================================ */
.nav-inner{justify-content:flex-start;gap:14px}
.nav-links{margin-left:auto}
.theme-toggle{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;background:none;
  border:1px solid var(--faint);color:var(--dim);cursor:pointer;
  transition:color .2s,border-color .2s;
}
.theme-toggle:hover{color:var(--bleu-clair);border-color:var(--bleu-clair)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .ico-moon{display:none}
html[data-theme="light"] .theme-toggle .ico-sun{display:none}
html[data-theme="light"] .theme-toggle .ico-moon{display:block}
@media (max-width:900px){.theme-toggle{margin-left:auto}}

/* ============================================================
   HOVERS PREMIUM · cartes, boutons, liens (transform/opacity)
   ============================================================ */
.card{
  transition:opacity .65s ease var(--d,0s),
    transform .8s cubic-bezier(.22,1,.36,1) var(--d,0s),
    translate .35s cubic-bezier(.22,1,.36,1),
    background .25s ease,box-shadow .35s ease;
}
.card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--bleu),var(--bleu-clair));
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card:hover{translate:0 -4px;box-shadow:0 18px 44px -24px var(--card-glow);z-index:2}
  .card:hover::after{transform:scaleX(1)}
}
.btn{transition:background .2s,border-color .2s,color .2s,transform .2s,
  translate .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,opacity .2s}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn-primary:hover{translate:0 -1px;box-shadow:0 0 0 4px var(--halo),0 12px 30px -12px var(--halo-strong)}
  .btn-ghost:hover{box-shadow:0 0 0 3px var(--halo)}
}
.nav-links .nlink,.flinks a{position:relative}
.nav-links .nlink::after,.flinks a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--bleu-clair);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.nav-links .nlink:hover::after,.flinks a:hover::after{transform:scaleX(1)}
.svc,.proj{transition:box-shadow .35s ease}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .svc:hover,.proj:hover{box-shadow:0 22px 50px -30px var(--card-glow)}
}

/* ============================================================
   ICÔNES MAISON · trait currentColor + détail bleu de marque
   Draw-on du trait à l'apparition, détail qui réagit au hover.
   ============================================================ */
.uico{flex:none;width:32px;height:32px;color:var(--ivoire)}
.uico .acc2{stroke:var(--bleu-clair)}
.uico .acc2f{fill:var(--bleu-clair);stroke:none}
.card .uico{margin:26px 0 18px}
.svc-head .uico{margin:18px 0 2px;width:34px;height:34px}
@media (prefers-reduced-motion:no-preference){
  .reveal.in .uico .d{
    stroke-dasharray:1.05;
    animation:uidraw .8s cubic-bezier(.45,0,.2,1) backwards;
    animation-delay:calc(var(--d,0s) + .15s);
  }
  .reveal.in .uico .acc2f{
    transform-box:fill-box;transform-origin:center;
    animation:uipop .55s cubic-bezier(.22,1.25,.36,1) backwards;
    animation-delay:calc(var(--d,0s) + .55s);
  }
}
@keyframes uidraw{from{stroke-dashoffset:1.05}}
@keyframes uipop{from{opacity:0;transform:scale(.4)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .uico .acc2,.uico .acc2f{
    transition:transform .35s cubic-bezier(.22,1,.36,1);
    transform-box:fill-box;transform-origin:center;
  }
  :is(.card,.svc):hover .uico .acc2{transform:translateY(-1.5px)}
  :is(.card,.svc):hover .uico .acc2f{transform:scale(1.28)}
}

/* ============================================================
   HERO · réseau discret qui vit un peu (mark + constellation)
   ============================================================ */
.hero-net{
  position:absolute;z-index:1;pointer-events:none;
  right:clamp(-40px,3vw,80px);top:50%;transform:translateY(-56%);
  width:min(44vw,540px);color:var(--ivoire);opacity:.6;
}
.hero-net .nl{stroke:currentColor;stroke-width:.6;opacity:.14}
.hero-net .nd{fill:currentColor;opacity:.32}
.hero-net .na{fill:var(--bleu-clair);opacity:.85}
@media (prefers-reduced-motion:no-preference){
  .hero-net .na{animation:netpulse 6s ease-in-out infinite}
  .hero-net .na2{animation-delay:1.6s}
  .hero-net .na3{animation-delay:3.4s}
  .hero-net .na4{animation-delay:4.7s}
}
@keyframes netpulse{0%,100%{opacity:.85}50%{opacity:.2}}
@media (max-width:1000px){.hero-net{display:none}}

/* ============================================================
   MINI-MOCKUPS · réalisations en CSS/SVG, sobres, charte v1
   ============================================================ */
.mock{
  border:1px solid var(--hair);background:var(--nuit-3);
  margin-bottom:20px;overflow:hidden;user-select:none;
}
.proj .mock{margin:22px 0 0}
.mk-bar{display:flex;gap:5px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--hair)}
.mk-bar i{width:6px;height:6px;background:var(--faint)}
.mk-bar i:first-child{background:var(--bleu)}
.mk-body{display:flex;min-height:118px}
.mk-side{flex:none;width:34px;border-right:1px solid var(--hair);padding:10px 8px;display:flex;flex-direction:column;gap:7px}
.mk-side i{height:4px;background:var(--faint)}
.mk-side i.on{background:var(--bleu-clair)}
.mk-main{flex:1;padding:10px 12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.mk-kpis{display:flex;gap:8px;flex-wrap:wrap}
.mk-kpis b{
  font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.03em;
  color:var(--ivoire);border:1px solid var(--hair);background:var(--nuit-2);
  padding:4px 7px;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.mk-kpis b.up{color:var(--bleu-clair)}
.mk-chart{flex:1;display:flex;align-items:flex-end;gap:6px;min-height:44px;padding-bottom:2px;border-bottom:1px solid var(--hair)}
.mk-chart i{flex:1;height:var(--h,40%);background:var(--faint)}
.mk-chart i.on{background:var(--bleu)}
@media (prefers-reduced-motion:no-preference){
  .reveal.in .mk-chart i{
    transform-origin:bottom;
    animation:mkgrow .7s cubic-bezier(.22,1,.36,1) backwards;
  }
  .reveal.in .mk-chart i:nth-child(2){animation-delay:.07s}
  .reveal.in .mk-chart i:nth-child(3){animation-delay:.14s}
  .reveal.in .mk-chart i:nth-child(4){animation-delay:.21s}
  .reveal.in .mk-chart i:nth-child(5){animation-delay:.28s}
  .reveal.in .mk-chart i:nth-child(6){animation-delay:.35s}
}
@keyframes mkgrow{from{transform:scaleY(0)}}
/* téléphone (app de réservation) */
.mock-phone{display:flex;justify-content:center;background:
  linear-gradient(var(--grid-line-soft) 1px,transparent 1px),
  linear-gradient(90deg,var(--grid-line-soft) 1px,transparent 1px);
  background-size:24px 24px;background-color:var(--nuit-3);padding:14px 0 0}
.mk-screen{
  width:118px;border:1px solid var(--faint);border-bottom:none;
  background:var(--nuit-2);padding:9px 9px 8px;
  display:flex;flex-direction:column;gap:6px;
}
.mk-ph-head{display:flex;align-items:center;gap:5px;padding-bottom:5px;border-bottom:1px solid var(--hair)}
.mk-ph-head i{height:5px;background:var(--faint);flex:1}
.mk-ph-head i:first-child{flex:none;width:10px;height:10px;background:var(--bleu)}
.mk-slot{display:flex;align-items:center;gap:6px;border:1px solid var(--hair);padding:5px 7px}
.mk-slot span{font-family:var(--mono);font-size:8.5px;color:var(--dim);letter-spacing:.03em}
.mk-slot i{flex:1;height:4px;background:var(--faint)}
.mk-slot.on{border-color:var(--bleu)}
.mk-slot.on span{color:var(--bleu-clair)}
.mk-ph-cta{
  margin-top:2px;background:var(--bleu);color:var(--on-bleu);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
  text-align:center;padding:5px 0;
}
/* site + agenda (verticale dentaire) */
.mk-nav{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--hair)}
.mk-nav .mk-logo{width:12px;height:8px;background:var(--bleu)}
.mk-nav i{width:16px;height:4px;background:var(--faint)}
.mk-hero{padding:10px 12px 4px}
.mk-hero b{display:block;width:64%;height:7px;background:var(--ivoire);opacity:.8}
.mk-hero i{display:block;width:44%;height:4px;background:var(--faint);margin-top:5px}
.mk-hero .mk-btn{display:inline-block;width:34px;height:9px;background:var(--bleu);margin-top:7px}
.mk-agenda{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:10px 12px 12px}
.mk-agenda i{height:12px;border:1px solid var(--hair)}
.mk-agenda i.on{background:var(--bleu);border-color:var(--bleu)}
.mk-agenda i.mid{background:var(--faint);border-color:transparent}

/* ============================================================
   REDUCED MOTION · complément : jamais de délai résiduel
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-delay:0s !important;transition-delay:0s !important}
  .hero-net .na{animation:none}
  /* micro-interactions du devis : tout est neutralisé, états finaux nets */
  .qdot::after,.qcard.on::before,.qcard.on::after,
  .qprice.swap,.qcard.on.priceflash,.qv.pop,.qrow::after,
  #estimateView .vmark{animation:none}
}