/* ============================================================================
   HANTOUT.BE · CHARTE v4 « tout » · homes FR/EN/NL
   Palette : crème #F3EFE6 · carte #FBF8F1 · encre #181510 · orange #E0521F
   Typo    : Bricolage Grotesque (titres/logo) · Instrument Sans (corps)
   Réf.    : design-refonte/README.md (local)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   FILET DE COMPATIBILITÉ (header unifié v4.1)
   Toute page HTML servie depuis un cache antérieur au 2026-08-25 ne référence
   pas encore <link nav.css> : sans cet @import elle recevrait ce fichier privé
   de ses règles de nav et afficherait un header sans style. L'@import garantit
   que nav.css arrive TOUJOURS avec v4.css / style.css, quel que soit l'âge du
   HTML. Les pages à jour la chargent aussi via <link> : même URL, le navigateur
   dédoublonne la requête, et nav.css n'entre en conflit avec rien ici puisque
   les blocs nav/footer ont été retirés de ce fichier.
   ---------------------------------------------------------------------------- */
@import url("/assets/css/nav.css?v=20260825b");

:root{
  --bg:#F3EFE6;
  --card:#FBF8F1;
  --ink:#181510;
  --accent:#E0521F;
  --accent-hover:#C8451A;
  --secondary:#5C564A;
  --faint:#8A8375;
  --accent-deep:#B93B25;
  --ph:#E9E3D4;
  --row-hover:#ECE7D9;
  --line:rgba(24,21,16,.15);
  --line2:rgba(24,21,16,.2);
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --display:'Bricolage Grotesque','Instrument Sans',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --pad:clamp(22px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--accent-deep);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a:hover{color:var(--accent-hover)}
h1,h2,h3{font-family:var(--display)}
button{font-family:inherit}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:0 0 8px 0;z-index:2000}
.skip-link:focus{left:0;color:var(--bg)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Fil rouge « tout » */
.tout{color:var(--accent)}

/* ── SYMBOLE « TROIS POINTS » (typing indicator · réf. README Marque) ── */
.mark{flex:none;display:block}
.hero-kicker{display:flex;align-items:center;gap:10px}
.hero-kicker .mark{width:22px;height:9px}
@keyframes markPulse{0%,100%{opacity:.25}50%{opacity:1}}
.mark--anim circle{animation:markPulse 1.3s ease-in-out infinite}
.mark--anim circle:nth-child(2){animation-delay:.18s}
.mark--anim circle:nth-child(3){animation-delay:.36s}
@media(prefers-reduced-motion:reduce){.mark--anim circle{animation:none}}

/* ── ENTRÉE HERO (fondu + translation 16px, échelonnée) ── */
@keyframes hfade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── RÉVÉLATION AU SCROLL ── */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
[data-reveal][data-revealed]{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none}
  .hero-kicker,.hero h1,.hero-sub,.hero-actions,.hero-id{animation:none !important}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* 1 · NAVIGATION → déplacée dans /assets/css/nav.css (header unifié v4.1) */

/* ============================================================================
   2 · HERO
   ============================================================================ */
.hero{padding:120px var(--pad) 100px;max-width:calc(960px + 2*var(--pad))}
.hero-kicker{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:30px;animation:hfade .7s ease both}
.hero h1{margin:0;font-size:clamp(52px,7vw,88px);line-height:1.02;font-weight:800;letter-spacing:-.035em;animation:hfade .8s .08s ease both}
.hero-sub{font-size:18.5px;line-height:1.7;color:var(--secondary);max-width:560px;margin:30px 0 42px;animation:hfade .8s .16s ease both}
.hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;animation:hfade .8s .24s ease both}
.btn-primary{background:var(--accent);color:var(--ink);padding:17px 36px;font-size:15.5px;font-weight:600;border-radius:999px;transition:background .25s ease;display:inline-block}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--ink);color:var(--bg)}
.btn-ghost{border:1.5px solid rgba(24,21,16,.25);color:var(--ink);padding:16px 36px;font-size:15.5px;font-weight:500;border-radius:999px;transition:border-color .25s ease;display:inline-block}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--ink);color:var(--ink)}
.hero-id{display:flex;align-items:center;gap:14px;margin-top:56px;animation:hfade .8s .32s ease both}
.hero-id img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:top;background:var(--ph)}
.hero-id div{font-size:14.5px;line-height:1.5;color:var(--secondary)}
.hero-id strong{color:var(--ink);font-weight:600}

/* ============================================================================
   3 · BANDEAU SERVICES (statique)
   ============================================================================ */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:10px 18px;flex-wrap:wrap;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* Séparateur « trois points » statique (SVG inline · gris #8A8375 + orange) */
.band-sep{width:15px;height:7px;flex:none}

/* ============================================================================
   4 · SERVICES
   ============================================================================ */
.services{padding:100px var(--pad) 60px}
.h2{margin:0;font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.services-head{margin-bottom:44px}
.svc-row{display:grid;grid-template-columns:40px minmax(180px,340px) minmax(220px,1fr) 96px;align-items:baseline;gap:28px;padding:30px 0;border-top:1px solid var(--line2);transition:background .3s ease}
.svc-row:last-child{border-bottom:1px solid var(--line2)}
.svc-row:hover{background:var(--row-hover)}
.svc-num{font-size:13px;color:var(--accent);font-weight:600}
.svc-title{font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:-.01em;min-width:0}
.svc-desc{font-size:15px;line-height:1.65;color:var(--secondary)}
.svc-price{font-size:13.5px;font-weight:600;text-align:right;white-space:nowrap}

/* ============================================================================
   5 · PROJETS
   ============================================================================ */
.projects{padding:70px var(--pad) 50px}
.projects-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:38px}
.projects-all{font-size:14.5px;font-weight:600;color:var(--accent);white-space:nowrap}
.projects-all:hover{color:var(--accent-hover)}
.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.proj{color:inherit;display:block}
.proj:hover{color:inherit}
.proj-media{aspect-ratio:16/10;background:var(--ph);border-radius:14px;overflow:hidden}
.proj-media img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s ease}
.proj:hover .proj-media img{transform:scale(1.02)}
.proj-caption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px}
.proj-name{font-family:var(--display);font-weight:600;font-size:18px}
.proj-cat{font-size:13.5px;color:var(--faint);white-space:nowrap}

/* ============================================================================
   6 · TÉMOIGNAGE
   ============================================================================ */
.quote{padding:90px var(--pad);text-align:center}
.quote-inner{max-width:740px;margin:0 auto}
.quote blockquote{margin:0;font-family:var(--display);font-size:30px;line-height:1.45;font-weight:600}
.quote figcaption{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:22px}

/* ============================================================================
   7 · TARIFS
   ============================================================================ */
.pricing{padding:0 var(--pad) 80px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.price-card{border:1px solid var(--line2);border-radius:16px;padding:36px;transition:border-color .3s ease}
.price-card:hover{border-color:var(--ink)}
.price-label{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--faint);margin-bottom:16px}
.price-value{font-family:var(--display);font-size:44px;font-weight:800}
.price-desc{font-size:14.5px;line-height:1.65;color:var(--secondary);margin-top:10px}
.price-card--dark{background:var(--ink);color:var(--bg);border:none}
.price-card--dark:hover{border:none}
.price-card--dark .price-label{color:var(--accent)}
.price-card--dark .price-desc{color:#B8B2A4}
.pricing-note{text-align:center;font-size:14px;color:var(--faint);margin-top:24px}

/* ============================================================================
   8 · MÉTHODE
   ============================================================================ */
.method{padding:10px var(--pad) 80px}
.method-head{margin-bottom:38px}
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;border-top:1px solid var(--line2);padding-top:40px}
.method-label{font-family:var(--display);font-weight:800;font-size:16px;color:var(--accent);margin-bottom:10px}
.method-text{font-size:14.5px;line-height:1.65;color:var(--secondary)}

/* ============================================================================
   9 · FAQ (accordéon, un ouvert, défaut 0)
   ============================================================================ */
.faq{padding:30px var(--pad) 100px}
.faq-head{margin-bottom:34px}
.faq-list{border-bottom:1px solid var(--line2);max-width:880px}
.faq-item{border-top:1px solid var(--line2)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:24px 2px;cursor:pointer;background:none;border:none;text-align:left;color:var(--ink);transition:color .25s ease}
.faq-q:hover,.faq-q:focus-visible{color:var(--accent)}
.faq-q span:first-child{font-family:var(--display);font-size:19px;font-weight:600}
.faq-icon{font-family:var(--display);font-size:24px;font-weight:600;color:var(--accent);width:24px;text-align:center;flex:none}
.faq-a{padding:0 2px 26px;max-width:700px;font-size:15px;line-height:1.75;color:var(--secondary)}
.faq-a[hidden]{display:none}

/* ============================================================================
   10 · CTA FINAL + CONTACT (formulaire Formspree préservé, restylé)
   ============================================================================ */
.cta{padding:110px var(--pad);border-top:1px solid var(--line);text-align:center}
.cta-title{margin:0;font-family:var(--display);font-size:clamp(40px,5vw,62px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.cta-sub{font-size:15.5px;color:var(--faint);margin:18px 0 36px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-actions .btn-primary,.cta-actions .btn-ghost{padding:17px 38px;font-size:15px}
.cta-actions .btn-ghost{padding:16px 38px;font-weight:400}

.contact-form{max-width:680px;margin:64px auto 0;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:36px}
.cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cf-field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.cf-field label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--secondary)}
.cf-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--faint)}
.cf-field input,.cf-field textarea{background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:13px 15px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;transition:border-color .25s ease}
.cf-field input:focus,.cf-field textarea:focus{border-color:var(--accent)}
.cf-field [aria-invalid="true"]{border-color:var(--accent-hover)}
.cf-field textarea{resize:vertical;min-height:120px}
.cf-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--secondary);margin:4px 0 22px;cursor:pointer}
.cf-consent input{margin-top:3px;accent-color:var(--accent)}
.cf-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cf-submit{border:none;cursor:pointer;background:var(--accent);color:var(--ink);padding:16px 34px;font-size:15px;font-weight:600;border-radius:999px;transition:background .25s ease}
.cf-submit:hover:not(:disabled),.cf-submit:focus-visible{background:var(--ink);color:var(--bg)}
.cf-submit:disabled{opacity:.6;cursor:wait}
.cf-wa{border:1.5px solid rgba(24,21,16,.25);color:var(--ink);padding:15px 34px;font-size:15px;font-weight:500;border-radius:999px;transition:border-color .25s ease;display:inline-block}
.cf-wa:hover,.cf-wa:focus-visible{border-color:var(--ink);color:var(--ink)}
.cf-status{min-height:1.4em;font-size:14px;margin:14px 0 0}
.cf-status.is-success{color:var(--ink);font-weight:600}
.cf-status.is-error{color:var(--accent-hover)}
.cf-status a{color:var(--accent-deep);border-bottom:1px dotted var(--accent-deep)}
.contact-meta{margin-top:26px;font-size:14px;color:var(--secondary)}
.contact-meta .sep{margin:0 10px;opacity:.5}
.contact-meta a{color:var(--secondary)}
.contact-meta a:hover{color:var(--ink)}

/* 11 · PIED DE PAGE → déplacé dans /assets/css/nav.css (footer unifié v4.1) */

/* ============================================================================
   COMPOSANTS PRÉSERVÉS : chatbot « Reda IA » + cookie bar (restylés « tout »)
   Markup/JS inchangés (/assets/js/chatbot.js), habillage aux nouveaux tokens.
   ============================================================================ */

/* ── FLOAT WHATSAPP (canal principal mobile · vert conservé, ombres encre) ── */
.whatsapp-float{
  position:fixed;right:1.5rem;bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));z-index:900;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#FBF8F1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(24,21,16,.22),0 0 0 0 rgba(37,211,102,.45);
  transition:transform .3s ease,box-shadow .3s ease,opacity .4s ease;
  animation:waPulse 2.5s ease-out infinite;
}
.whatsapp-float:hover,.whatsapp-float:focus-visible{transform:scale(1.08);box-shadow:0 14px 40px rgba(24,21,16,.3)}
.whatsapp-float svg{width:28px;height:28px}
@keyframes waPulse{
  0%,100%{box-shadow:0 10px 30px rgba(24,21,16,.22),0 0 0 0 rgba(37,211,102,.45)}
  50%{box-shadow:0 10px 30px rgba(24,21,16,.22),0 0 0 12px rgba(37,211,102,0)}
}
@media(prefers-reduced-motion:reduce){.whatsapp-float{animation:none}}
.whatsapp-float.floating-hidden{opacity:0;transform:translateY(20px) scale(.85);pointer-events:none;animation:none}

/* ── BOUTON FLOTTANT Reda IA (à gauche du float WhatsApp) ── */
.chatbot-btn{
  position:fixed;right:calc(1.5rem + 68px);bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));z-index:901;
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;color:var(--bg);
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(24,21,16,.22),0 0 0 0 rgba(224,82,31,.4);
  transition:transform .3s ease,box-shadow .3s ease,opacity .4s ease,filter .3s ease;
  animation:chatPulse 2.5s ease-out infinite;
}
.chatbot-btn:hover,.chatbot-btn:focus-visible{transform:scale(1.08);background:var(--accent-hover)}
.chatbot-btn.is-active{animation:none;filter:brightness(1.06)}
.chatbot-btn svg{width:26px;height:26px}
@keyframes chatPulse{
  0%,100%{box-shadow:0 10px 30px rgba(24,21,16,.22),0 0 0 0 rgba(224,82,31,.4)}
  50%{box-shadow:0 10px 30px rgba(24,21,16,.22),0 0 0 12px rgba(224,82,31,0)}
}
@media(prefers-reduced-motion:reduce){.chatbot-btn{animation:none}}
.chatbot-btn.floating-hidden{opacity:0;transform:translateY(20px) scale(.85);pointer-events:none;animation:none}

/* ── PANEL ── */
.chatbot-panel{
  position:fixed;z-index:998;right:1.5rem;bottom:calc(1.5rem + 56px + 12px);
  width:400px;max-width:calc(100vw - 3rem);height:600px;max-height:calc(100vh - 6rem);
  background:var(--card);border:1px solid var(--line2);
  box-shadow:0 30px 80px rgba(24,21,16,.25),0 10px 30px rgba(24,21,16,.14);
  display:flex;flex-direction:column;opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1);
  pointer-events:none;border-radius:14px;overflow:hidden;font-family:var(--sans);
}
.chatbot-panel.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
@media(prefers-reduced-motion:reduce){.chatbot-panel{transition:none}}
.chatbot-header{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;background:var(--bg);border-bottom:1px solid var(--line)}
.chatbot-avatar{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  background:var(--accent);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.05rem;font-weight:800;
}
.chatbot-title{display:flex;flex-direction:column;gap:.1rem;flex:1 1 auto;min-width:0}
.chatbot-title-name{font-size:1rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.chatbot-title-tagline{font-size:.72rem;color:var(--faint);line-height:1.2;margin-top:1px}
.chatbot-title-status{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:.35rem;margin-top:2px}
.chatbot-status-dot{width:7px;height:7px;border-radius:50%;background:#2E9E5B;box-shadow:0 0 0 0 rgba(46,158,91,.5);animation:chatStatusDot 2s ease-out infinite}
@keyframes chatStatusDot{0%,100%{box-shadow:0 0 0 0 rgba(46,158,91,.5)}50%{box-shadow:0 0 0 5px rgba(46,158,91,0)}}
@media(prefers-reduced-motion:reduce){.chatbot-status-dot{animation:none}}
.chatbot-header-actions{display:flex;align-items:center;gap:.25rem;position:relative}
.chatbot-iconbtn{width:36px;height:36px;border:none;background:transparent;cursor:pointer;color:var(--faint);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s}
.chatbot-iconbtn:hover,.chatbot-iconbtn:focus-visible{color:var(--accent);background:var(--row-hover)}
.chatbot-iconbtn svg{width:18px;height:18px}
.chatbot-kebab-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--card);border:1px solid var(--line2);min-width:240px;padding:.35rem;box-shadow:0 12px 40px rgba(24,21,16,.18);display:flex;flex-direction:column;border-radius:10px;z-index:2}
.chatbot-kebab-menu[hidden],.chatbot-suggestions[hidden],.chatbot-demo-badge[hidden]{display:none !important}
.chatbot-kebab-menu button{border:none;background:transparent;cursor:pointer;text-align:left;padding:.6rem .75rem;color:var(--ink);font-size:.85rem;border-radius:8px;transition:background .2s,color .2s;font-family:var(--sans)}
.chatbot-kebab-menu button:hover,.chatbot-kebab-menu button:focus-visible{background:var(--row-hover);color:var(--accent)}
.chatbot-demo-badge{font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:rgba(224,82,31,.08);padding:.45rem 1rem;border-bottom:1px solid var(--line);text-align:center}
.chatbot-body{flex:1 1 auto;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem;scroll-behavior:smooth;background:var(--card)}
.chatbot-body::-webkit-scrollbar{width:6px}
.chatbot-body::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.chat-msg{display:flex;flex-direction:column;gap:.25rem;max-width:85%}
.chat-msg--user{align-self:flex-end;align-items:flex-end}
.chat-msg--assistant{align-self:flex-start;align-items:flex-start}
.chat-bubble{padding:.7rem .95rem;font-size:.92rem;line-height:1.55;border-radius:12px;overflow-wrap:anywhere;word-break:break-word}
.chat-msg--user .chat-bubble{background:var(--ink);color:var(--bg);border-bottom-right-radius:4px}
.chat-msg--assistant .chat-bubble{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px}
.chat-time{font-size:.66rem;letter-spacing:.05em;color:var(--faint);opacity:.6;padding:0 .25rem}
.chat-msg--in{animation:chatMsgIn .28s cubic-bezier(.16,1,.3,1) both}
@keyframes chatMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.chat-msg--in{animation:none}}
.chat-bubble--typing{display:inline-flex;align-items:center;gap:.3rem;padding:.85rem .95rem}
.chat-dot{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:chatDot 1.2s ease-in-out infinite}
.chat-dot:nth-child(2){animation-delay:.15s}
.chat-dot:nth-child(3){animation-delay:.3s}
@keyframes chatDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.chat-dot{animation:none;opacity:.6}}
.chatbot-suggestions{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1rem .25rem;background:var(--card)}
.chatbot-suggestions button{border:1px solid var(--line2);background:var(--card);color:var(--secondary);font-family:var(--sans);font-size:.78rem;padding:.5rem .85rem;border-radius:999px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.chatbot-suggestions button:hover,.chatbot-suggestions button:focus-visible{border-color:var(--accent);color:var(--accent);background:rgba(224,82,31,.06)}
.chatbot-footer{border-top:1px solid var(--line);background:var(--bg);padding:.6rem .75rem}
.chatbot-form{display:flex;align-items:flex-end;gap:.5rem;position:relative}
.chatbot-input{flex:1 1 auto;background:var(--card);border:1px solid var(--line2);color:var(--ink);font-family:var(--sans);font-size:.92rem;line-height:1.4;padding:.7rem .85rem;border-radius:10px;resize:none;outline:none;min-height:48px;max-height:120px;transition:border-color .2s}
.chatbot-input::placeholder{color:var(--faint)}
.chatbot-input:focus{border-color:var(--accent)}
.chatbot-input:disabled{opacity:.5;cursor:not-allowed}
.chatbot-send{flex:0 0 auto;width:42px;height:42px;border-radius:10px;border:none;cursor:pointer;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s,opacity .2s}
.chatbot-send:hover:not(:disabled),.chatbot-send:focus-visible:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)}
.chatbot-send:disabled{opacity:.35;cursor:not-allowed}
.chatbot-send svg{width:18px;height:18px}
.chat-miniform-wrap{max-width:100% !important}
.chat-miniform{background:var(--bg);border:1px solid var(--line2);padding:1rem;border-radius:12px;border-bottom-left-radius:4px;display:flex;flex-direction:column;gap:.65rem;width:100%}
.chat-miniform-title{font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:.25rem}
.chat-miniform-field{display:flex;flex-direction:column;gap:.25rem}
.chat-miniform-field > span{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.chat-miniform input,.chat-miniform textarea{background:var(--card);border:1px solid var(--line2);color:var(--ink);font-family:var(--sans);font-size:.88rem;padding:.55rem .7rem;border-radius:8px;outline:none;transition:border-color .2s}
.chat-miniform textarea{min-height:64px;resize:vertical}
.chat-miniform input:focus,.chat-miniform textarea:focus{border-color:var(--accent)}
.chat-miniform-submit{margin-top:.25rem;background:var(--accent);color:var(--ink);border:none;cursor:pointer;font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.04em;padding:.65rem 1rem;border-radius:999px;transition:background .2s}
.chat-miniform-submit:hover:not(:disabled){background:var(--ink);color:var(--bg)}
.chat-miniform-submit:disabled{opacity:.5;cursor:not-allowed}
.chat-miniform-status{font-size:.72rem;color:var(--faint);min-height:1em}
.chat-miniform-status--ok{color:var(--accent)}
.chat-miniform-status--err{color:var(--accent-hover)}

/* ── COOKIE BAR ── */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  background:var(--card);border-top:1px solid var(--line2);
  padding:1rem var(--pad) calc(1rem + env(safe-area-inset-bottom,0px));
  display:none;align-items:center;justify-content:center;gap:1rem 1.5rem;flex-wrap:wrap;
  box-shadow:0 -10px 40px rgba(24,21,16,.12);
}
.cookie-bar.visible{display:flex}
.cookie-bar p{margin:0;font-size:.85rem;color:var(--secondary);line-height:1.6;max-width:640px}
.cookie-bar a{color:var(--accent-deep);border-bottom:1px dotted var(--accent-deep);text-decoration:none}
.cookie-bar button{padding:.6rem 1.5rem;background:var(--ink);color:var(--bg);font-size:.82rem;font-weight:600;border:none;cursor:pointer;border-radius:999px;transition:background .25s ease}
.cookie-bar button:hover{background:var(--accent)}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media(max-width:1060px){
  .projects-grid{gap:28px}
}
@media(max-width:900px){
  .hero{padding-top:80px;padding-bottom:72px}
  .h2{font-size:34px}
  .svc-row{grid-template-columns:40px 1fr auto;grid-template-rows:auto auto;row-gap:8px}
  .svc-desc{grid-column:2/3;grid-row:2}
  .svc-price{grid-column:3/4;grid-row:1}
  .projects-grid{grid-template-columns:1fr}
  .quote blockquote{font-size:24px}
  .pricing-grid{grid-template-columns:1fr}
  .method-grid{grid-template-columns:1fr 1fr}
  .band{justify-content:center}
}
@media(max-width:560px){
  .hero h1{font-size:44px}
  .hero-sub{font-size:16.5px}
  .hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;text-align:center}
  .svc-row{grid-template-columns:40px 1fr}
  .svc-price{grid-column:2/3;grid-row:3;text-align:left}
  .svc-desc{grid-column:2/3}
  .method-grid{grid-template-columns:1fr}
  .cf-row{grid-template-columns:1fr}
  .contact-form{padding:26px 20px}
  .cta-actions .btn-primary,.cta-actions .btn-ghost{width:100%}
  .quote{padding:64px var(--pad)}
}
@media(max-width:480px){
  .chatbot-panel{right:0;left:0;bottom:0;top:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;transform:translateY(10%)}
  .chatbot-panel.is-open{transform:translateY(0)}
  .chatbot-header{padding:1rem}
  .chatbot-iconbtn{width:40px;height:40px}
  .chatbot-iconbtn svg{width:20px;height:20px}
  .whatsapp-float{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .whatsapp-float svg{width:26px;height:26px}
  .chatbot-btn{right:calc(16px + 68px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}