:root{
  --ink:#11110f;
  --paper:#f4f1eb;
  --paper2:#ebe7de;
  --white:#ffffff;
  --accent:#f15a24;
  --muted:#6e6b65;
  --radius:30px;
  --max:1380px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

button{
  font:inherit;
}

a{
  color:inherit;
  text-decoration:none;
}

.topbar{
  position:fixed;
  z-index:100;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:min(calc(100% - 28px),var(--max));
  height:70px;
  padding:0 14px 0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid rgba(0,0,0,.07);
  border-radius:22px;
  background:rgba(244,241,235,.82);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 10px 40px rgba(0,0,0,.05);
}

.brand img{
  display:block;
  width:88px;
}

nav{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:13px;
}

nav a{
  opacity:.6;
  transition:opacity .2s ease;
}

nav a:hover{
  opacity:1;
}

.mini-cta{
  padding:13px 18px;
  border-radius:999px;
  background:var(--ink);
  color:white;
  font-size:13px;
  font-weight:700;
}

.section{
  padding:130px max(5vw,20px);
}

.section-dark{
  padding:140px max(5vw,20px);
  background:var(--ink);
  color:white;
}

.section-head{
  width:min(var(--max),100%);
  margin:0 auto 65px;
}

.eyebrow{
  margin:0 0 22px;
  color:var(--accent);
  font-size:11px;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.18em;
}

h1,h2,h3,p{
  text-wrap:pretty;
}

h1{
  margin:0;
  max-width:1200px;
  font-size:clamp(72px,10.3vw,158px);
  line-height:.84;
  font-weight:820;
  letter-spacing:-.07em;
}

h2{
  margin:0;
  max-width:1200px;
  font-size:clamp(48px,6.6vw,96px);
  line-height:.92;
  letter-spacing:-.055em;
}

.hero{
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:150px max(5vw,20px) 90px;
}

.hero-inner{
  width:min(var(--max),100%);
  margin:auto;
}

.hero-copy{
  margin:45px 0 0;
  font-size:clamp(24px,3vw,42px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.hero-sub{
  max-width:720px;
  margin:24px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.55;
}

.speed-pill{
  display:inline-flex;
  margin-top:30px;
  padding:11px 16px;
  border-radius:999px;
  background:rgba(241,90,36,.11);
  color:var(--accent);
  font-size:14px;
  font-weight:750;
}

.hero-meta{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:18px;
}

.hero-meta span{
  padding:10px 13px;
  border:1px solid rgba(0,0,0,.1);
  border-radius:999px;
  font-size:12px;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:35px;
}

.primary,
.secondary{
  display:inline-flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border-radius:999px;
  font-weight:750;
}

.primary{
  background:var(--ink);
  color:white;
}

.secondary{
  border:1px solid rgba(0,0,0,.15);
}

.situation-grid{
  width:min(var(--max),100%);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.situation-card{
  min-height:580px;
  padding:32px;
  display:flex;
  flex-direction:column;
  border-radius:var(--radius);
  background:white;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
}

.situation-card:hover{
  transform:translateY(-7px);
  box-shadow:0 24px 70px rgba(0,0,0,.08);
}

.situation-number{
  color:var(--accent);
  font-size:11px;
  font-weight:800;
}

.situation-card h3{
  margin:85px 0 28px;
  font-size:clamp(38px,4vw,58px);
  line-height:.93;
  letter-spacing:-.05em;
}

.situation-promise{
  margin-bottom:16px;
  font-size:17px;
}

.situation-card p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.55;
}

.situation-note{
  font-size:14px;
}

.card-link{
  margin-top:auto;
  padding-top:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #eee;
  font-weight:750;
}

.card-link span{
  color:var(--accent);
  font-size:24px;
}

.goals{
  background:#ebe7de;
}

.goal-tabs{
  width:min(var(--max),100%);
  margin:0 auto 14px;
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:none;
}

.goal-tabs::-webkit-scrollbar{
  display:none;
}

.goal-tab{
  flex:0 0 auto;
  min-height:64px;
  padding:0 28px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  font-size:16px;
  cursor:pointer;
  font-weight:700;
  transition:.25s ease;
}

.goal-tab.active{
  background:var(--accent);
  color:white;
}

.goal-showcase{
  width:min(var(--max),100%);
  min-height:560px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border-radius:34px;
  background:var(--ink);
  color:white;
}

.goal-copy{
  padding:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.goal-index{
  margin-bottom:35px;
  color:var(--accent);
  font-size:12px;
  font-weight:800;
}

.goal-copy h3{
  margin:0;
  max-width:620px;
  font-size:clamp(40px,5vw,70px);
  line-height:.96;
  letter-spacing:-.05em;
}

.goal-copy > p{
  max-width:540px;
  margin:28px 0 0;
  color:#aaa;
  font-size:18px;
  line-height:1.55;
}

.goal-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:32px;
}

.goal-tags span{
  padding:9px 12px;
  border:1px solid #383838;
  border-radius:999px;
  font-size:12px;
}

.demo-stage{
  margin:18px;
  min-height:524px;
  padding:35px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:25px;
  background:#f7f4ed;
  color:var(--ink);
}

.mini-product,
.mini-booking,
.mini-quote,
.mini-signup,
.mini-guide{
  width:min(380px,100%);
  padding:22px;
  border-radius:23px;
  background:white;
  box-shadow:0 25px 70px rgba(0,0,0,.13);
}

.mini-product-photo{
  height:180px;
  margin-bottom:20px;
  display:flex;
  align-items:flex-end;
  padding:18px;
  border-radius:17px;
  background:linear-gradient(145deg,var(--accent),#ffb195);
  color:white;
  font-weight:750;
}

.mini-product-info{
  display:grid;
  gap:7px;
}

.mini-product-info small,
.mini-result span{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.12em;
}

.mini-product-info strong,
.mini-booking strong,
.mini-quote strong,
.mini-signup strong,
.mini-guide strong{
  font-size:22px;
}

.mini-price{
  color:#777;
}

.demo-stage button,
.demo-stage input,
.demo-stage select{
  min-height:45px;
  font:inherit;
}

.demo-stage input,
.demo-stage select{
  width:100%;
  padding:11px;
  border:1px solid #ddd;
  border-radius:12px;
  background:white;
}

.demo-stage label{
  display:block;
  margin:15px 0 6px;
  color:#777;
  font-size:12px;
}

.demo-stage button{
  border:0;
  border-radius:12px;
  cursor:pointer;
}

.mini-product-info button,
.mini-main{
  width:100%;
  margin-top:12px;
  padding:12px;
  background:var(--ink);
  color:white;
  font-weight:750;
}

.mini-days,
.mini-times{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:14px;
}

.mini-days button,
.mini-times button{
  background:#eee;
}

.mini-days .selected,
.mini-times .selected{
  background:var(--accent);
  color:white;
}

.mini-signup,
.mini-guide{
  display:grid;
  gap:13px;
}

.mini-event-date{
  display:inline-block;
  width:max-content;
  padding:8px 10px;
  border-radius:10px;
  background:var(--accent);
  color:white;
  font-size:11px;
  font-weight:800;
}

.mini-result{
  padding:15px;
  border-radius:13px;
  background:#f2efe9;
}

.mini-result p{
  margin:7px 0 0;
  line-height:1.4;
}

.ownership{
  display:grid;
  gap:80px;
}

.ownership-intro{
  width:min(var(--max),100%);
  margin:auto;
}

.ownership-intro p:last-child{
  max-width:700px;
  margin:35px 0 0;
  color:#aaa;
  font-size:19px;
  line-height:1.6;
}

.ownership-grid{
  width:min(var(--max),100%);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.ownership-grid article{
  min-height:260px;
  padding:30px;
  border:1px solid #2d2d2d;
  border-radius:25px;
}

.ownership-grid span{
  color:var(--accent);
  font-size:11px;
}

.ownership-grid h3{
  margin:90px 0 12px;
  font-size:32px;
  letter-spacing:-.04em;
}

.ownership-grid p{
  margin:0;
  color:#999;
  line-height:1.5;
}

.price-grid{
  width:min(1120px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:1fr;
  gap:15px;
  justify-items:center;
}

.price-grid .price-card{
  width:min(760px,100%);
}

.price-card{
  position:relative;
  padding:40px;
  border-radius:30px;
  background:white;
}

.price-card.plus{
  background:var(--accent);
  color:white;
}

.plus-badge{
  position:absolute;
  top:24px;
  right:24px;
  padding:8px 11px;
  border-radius:999px;
  background:white;
  color:var(--accent);
  font-size:11px;
  font-weight:800;
}

.price-name{
  margin:0;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
}

.price{
  margin-top:25px;
  font-size:clamp(64px,7vw,92px);
  line-height:.9;
  font-weight:820;
  letter-spacing:-.065em;
}

.price span{
  margin-left:7px;
  font-size:15px;
  letter-spacing:0;
}

.launch-offer{
  display:inline-block;
  margin:0 0 24px;
  padding:10px 14px;
  border:1px solid rgba(230,83,47,.25);
  border-radius:12px;
  background:#fff7f3;
  color:#623426;
  font-size:14px;
  line-height:1.45;
}
.launch-offer code{
  color:#171717;
  font-weight:800;
  font-family:inherit;
}

.price-card h3{
  margin:38px 0 13px;
  font-size:30px;
  letter-spacing:-.04em;
}

.price-desc{
  min-height:80px;
  color:#777;
  line-height:1.55;
}

.plus .price-desc{
  color:rgba(255,255,255,.76);
}

.price-card ul{
  margin:35px 0;
  padding:0;
  list-style:none;
}

.price-card li{
  padding:12px 0;
  border-bottom:1px solid #eee;
  font-size:14px;
}

.plus li{
  border-color:rgba(255,255,255,.2);
}

.price-button{
  display:flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--ink);
  color:white;
  font-weight:800;
}

.price-button.light{
  background:white;
  color:var(--accent);
}

.ai-example{
  margin:30px 0 20px;
  padding:18px;
  border-radius:17px;
  background:rgba(0,0,0,.11);
}

.ai-example span{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.ai-example p{
  margin:9px 0 0;
  line-height:1.45;
}

.ai-capabilities{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.ai-capabilities span{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  font-size:11px;
}

.ai-service{
  font-size:12px;
  opacity:.75;
}

.ai-service-box{
  margin:28px 0 30px;
  padding:22px;
  border-radius:20px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
}

.ai-service-label{
  display:block;
  margin-bottom:8px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.15em;
  opacity:.78;
}

.ai-service-box strong{
  display:block;
  margin-bottom:14px;
  font-size:24px;
  line-height:1.1;
}

.ai-service-box p{
  margin:0 0 10px;
  line-height:1.5;
  font-size:14px;
  opacity:.88;
}

.ai-service-box p:last-child{
  margin-bottom:0;
}

.ai-credit{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.28);
}

.ai-credit > span{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.75;
}

.ai-credit > strong{
  display:block;
  margin-bottom:10px;
  font-size:28px;
  line-height:1.1;
}

.ai-credit p{
  margin:0;
}

.price-card.plus{
  padding-bottom:48px;
}

.content-help{
  width:min(var(--max),100%);
  margin:18px auto 0;
  padding:34px;
  border-radius:24px;
  background:white;
}

.content-help > span{
  display:block;
  color:var(--accent);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.15em;
}

.content-help h3{
  margin:14px 0 12px;
  font-size:34px;
  letter-spacing:-.04em;
}

.content-help p{
  max-width:850px;
  margin:0;
  color:#777;
  line-height:1.55;
}

.price-note{
  max-width:800px;
  margin:28px auto 0;
  text-align:center;
  color:#777;
  font-size:13px;
}

.technical{
  background:white;
}

.technical-grid{
  width:min(var(--max),100%);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.technical-grid article{
  min-height:200px;
  padding:28px;
  border-radius:24px;
  background:var(--paper);
}

.technical-grid span{
  display:block;
  margin-top:60px;
  font-size:25px;
  font-weight:800;
  letter-spacing:-.035em;
}

.technical-grid p{
  max-width:320px;
  margin:10px 0 0;
  color:#777;
  line-height:1.45;
}

.steps{
  width:min(var(--max),100%);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.steps article{
  min-height:280px;
  padding:30px;
  border-radius:25px;
  background:white;
}

.steps span{
  color:var(--accent);
  font-size:11px;
}

.steps h3{
  margin:100px 0 12px;
  font-size:30px;
  letter-spacing:-.04em;
}

.steps p{
  margin:0;
  color:#777;
  line-height:1.5;
}

.process-speed{
  width:min(var(--max),100%);
  margin:16px auto 0;
  padding:23px;
  border-radius:20px;
  background:rgba(241,90,36,.1);
  color:var(--accent);
  text-align:center;
  font-weight:800;
}

.contact{
  padding:150px max(5vw,20px);
  background:var(--accent);
  color:white;
}

.contact-inner{
  width:min(var(--max),100%);
  margin:auto;
}

.contact .eyebrow{
  color:white;
  opacity:.7;
}

.contact h2{
  max-width:1100px;
}

.contact-inner > p:not(.eyebrow){
  max-width:650px;
  margin:30px 0 0;
  font-size:18px;
  line-height:1.55;
  opacity:.78;
}

.contact-choices{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:38px;
}

.contact-choices a{
  min-height:52px;
  padding:0 19px;
  display:flex;
  align-items:center;
  border-radius:999px;
  background:white;
  color:var(--ink);
  font-weight:750;
}

footer{
  padding:45px max(5vw,20px);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:30px;
  align-items:center;
  background:white;
}

footer img{
  width:80px;
}

footer p{
  margin:0;
  color:#777;
  font-size:13px;
}

.legal-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  color:#777;
  font-size:12px;
}

.legal-page{
  width:min(900px,calc(100% - 40px));
  margin:auto;
  padding:100px 0 140px;
}

.legal-logo{
  width:90px;
  margin-bottom:60px;
}

.legal-page h1{
  margin-bottom:65px;
  font-size:clamp(55px,8vw,100px);
}

.legal-page h2{
  margin:50px 0 14px;
  font-size:27px;
  letter-spacing:-.03em;
}

.legal-page p,
.legal-page li{
  font-size:16px;
  line-height:1.7;
  opacity:.75;
}

.legal-back{
  display:block;
  margin-bottom:40px;
  color:var(--accent);
  font-weight:800;
}

/* apparition douce */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity .75s cubic-bezier(.2,.8,.2,1),
    transform .75s cubic-bezier(.2,.8,.2,1);
}

.reveal.visible{
  opacity:1;
  transform:none;
}


/* TABLETTE */
@media(max-width:1000px){

  nav{
    display:none;
  }

  .situation-grid,
  .ownership-grid,
  .technical-grid{
    grid-template-columns:1fr 1fr;
  }

  .situation-card:first-child{
    grid-column:1 / -1;
  }

  .goal-showcase{
    grid-template-columns:1fr;
  }

  .demo-stage{
    min-height:430px;
  }

  .steps{
    grid-template-columns:1fr;
  }
}


/* MOBILE */
/* MOBILE / TABLETTE KAFK : masquer mini-cta */
@media (max-width:1200px), (hover:none) {
  .mini-cta{
    display:none !important;
  }
}

@media(max-width:700px){

  html{
    scroll-padding-top:76px;
  }

  .topbar{
    top:8px;
    width:calc(100% - 16px);
    height:62px;
    padding:0 8px 0 15px;
    border-radius:18px;
  }

  .brand img{
    width:72px;
  }

  .mini-cta{
    min-height:44px;
    padding:0 15px;
  }

  .hero{
    min-height:auto;
    padding:120px 20px 85px;
  }

  h1{
    font-size:clamp(62px,18vw,92px);
    line-height:.87;
  }

  h2{
    font-size:clamp(45px,13vw,68px);
  }

  .hero-copy{
    margin-top:34px;
    font-size:27px;
  }

  .hero-sub{
    font-size:16px;
  }

  .speed-pill{
    border-radius:16px;
    line-height:1.4;
  }

  .hero-meta{
    display:grid;
    grid-template-columns:1fr;
  }

  .hero-meta span{
    width:max-content;
    max-width:100%;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .primary,
  .secondary{
    width:100%;
  }

  .section,
  .section-dark{
    padding:90px 20px;
  }

  .section-head{
    margin-bottom:42px;
  }

  .situation-grid,
  .ownership-grid,
  .technical-grid,
  .price-grid{
    grid-template-columns:1fr;
  }

  .situation-card:first-child{
    grid-column:auto;
  }

  .situation-card{
    min-height:520px;
    padding:25px;
  }

  .situation-card h3{
    margin-top:65px;
  }

  .goal-tabs{
    margin-right:-20px;
    width:calc(100% + 20px);
    padding-right:20px;
  }

  .goal-showcase{
    min-height:auto;
    border-radius:27px;
  }

  .goal-copy{
    padding:32px 25px 25px;
  }

  .goal-copy h3{
    font-size:42px;
  }

  .goal-copy > p{
    font-size:16px;
  }

  .demo-stage{
    min-height:390px;
    margin:8px;
    padding:20px;
  }

  .ownership{
    gap:55px;
  }

  .ownership-grid article{
    min-height:210px;
  }

  .ownership-grid h3{
    margin-top:65px;
  }

  .price-card{
    padding:27px 23px;
  }

  .price-card.plus{
    padding-bottom:34px;
  }

  .ai-service-box{
    padding:18px;
  }

  .ai-service-box strong{
    font-size:22px;
  }

  .content-help{
    padding:24px;
  }

  .content-help h3{
    font-size:30px;
  }

  .price{
    font-size:68px;
  }

  .price-desc{
    min-height:auto;
  }

  .technical-grid article{
    min-height:160px;
  }

  .technical-grid span{
    margin-top:35px;
  }

  .steps article{
    min-height:220px;
  }

  .steps h3{
    margin-top:65px;
  }

  .contact{
    padding:100px 20px;
  }

  .contact-choices{
    display:grid;
    grid-template-columns:1fr;
  }

  .contact-choices a{
    justify-content:center;
    text-align:center;
  }

  footer{
    grid-template-columns:1fr;
    gap:18px;
  }

  .legal-links{
    gap:12px;
  }
}


/* accessibilité mouvement */
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

  *{
    animation:none !important;
    transition:none !important;
  }
}

/* KAFK — correction CTA navigation */
.nav-cta,
a.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1;
}

/* MOBILE: masquer bouton Mon projet */
@media (max-width: 768px) {
  .project-btn,
  .header-cta,
  a[href="#projet"] {
    display: none !important;
  }
}



/* === KAFK AGENT HERO VISUAL === */

.kafk-agent-visual{
  width:min(920px, 100%);
  height:360px;
  margin:10px auto 42px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f7f4ee;
  overflow:visible;
  perspective:1200px;
}

.kafk-device{
  width:min(620px, 78vw);
  position:relative;
  z-index:2;
  transform-origin:center center;
  animation:kafk-device-float 6s ease-in-out infinite;
}

.kafk-screen{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border:9px solid #111;
  border-radius:17px;
  background:#f7f4ee;
  overflow:hidden;
  box-shadow:
    0 25px 55px rgba(0,0,0,.10),
    0 4px 10px rgba(0,0,0,.08);
}

.kafk-screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.18),
      transparent 28%,
      transparent 72%,
      rgba(255,255,255,.08)
    );
}

.kafk-stand{
  height:70px;
  position:relative;
}

.kafk-neck{
  position:absolute;
  left:50%;
  top:0;
  width:78px;
  height:51px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#bbb,#eee 35%,#bbb);
  clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);
}

.kafk-foot{
  position:absolute;
  left:50%;
  bottom:5px;
  width:210px;
  height:11px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#aaa,#eee 45%,#aaa);
  border-radius:50%;
}

.agent-ui{
  position:absolute;
  inset:0;
  background:#f7f4ee;
}

.agent-top{
  position:absolute;
  left:5%;
  right:5%;
  top:8%;
  height:12%;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid rgba(0,0,0,.10);
}

.agent-top span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#111;
  opacity:.28;
}

.agent-left{
  position:absolute;
  left:6%;
  top:28%;
  width:21%;
  bottom:10%;
  padding:18px;
  border-radius:12px;
  background:rgba(255,255,255,.56);
}

.ui-line{
  height:8px;
  background:#111;
  border-radius:20px;
  margin-bottom:15px;
  opacity:.14;
  transform-origin:left center;
  animation:ui-lines 6s ease-in-out infinite;
}

.line-1{width:82%;}
.line-2{width:61%; animation-delay:.08s;}
.line-3{width:72%; animation-delay:.16s;}

.agent-flow{
  position:absolute;
  left:32%;
  right:6%;
  top:28%;
  bottom:14%;
  display:grid;
  grid-template-columns:1fr .45fr 1fr .45fr 1fr;
  align-items:center;
}

.agent-step{
  height:100px;
  border-radius:17px;
  background:#fff;
  padding:18px 17px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 8px 28px rgba(0,0,0,.055);
  opacity:0;
  transform:translateY(22px) scale(.94);
}

.agent-step small{
  font-size:10px;
  letter-spacing:.15em;
  opacity:.38;
}

.agent-step strong{
  font-size:12px;
  letter-spacing:.08em;
  color:#111;
}

.step-1{
  animation:agent-step-one 6s ease-in-out infinite;
}

.step-2{
  animation:agent-step-two 6s ease-in-out infinite;
}

.step-3{
  background:#e6532f;
  animation:agent-step-three 6s ease-in-out infinite;
}

.step-3 small,
.step-3 strong{
  color:white;
}

.flow-link{
  height:2px;
  background:rgba(0,0,0,.10);
  position:relative;
  overflow:hidden;
}

.flow-link i{
  display:block;
  width:15px;
  height:15px;
  position:absolute;
  top:50%;
  left:-15px;
  border-radius:50%;
  background:#e6532f;
  transform:translateY(-50%);
}

.link-1 i{
  animation:flow-dot-one 6s ease-in-out infinite;
}

.link-2 i{
  animation:flow-dot-two 6s ease-in-out infinite;
}

.visual-shadow{
  position:absolute;
  z-index:1;
  width:430px;
  height:40px;
  bottom:8px;
  border-radius:50%;
  background:rgba(0,0,0,.08);
  filter:blur(18px);
  animation:kafk-shadow 6s ease-in-out infinite;
}


/* mouvement général */

@keyframes kafk-device-float{
  0%,100%{
    transform:translateY(12px) rotateX(1deg) scale(.97);
  }
  20%{
    transform:translateY(0) rotateX(0) scale(1);
  }
  75%{
    transform:translateY(-5px) rotateX(-1deg) scale(1.01);
  }
}

@keyframes kafk-shadow{
  0%,100%{transform:scale(.88);opacity:.45;}
  50%{transform:scale(1);opacity:.72;}
}


/* apparition des 3 étapes */

@keyframes agent-step-one{
  0%,8%{opacity:0;transform:translateY(22px) scale(.94);}
  17%,82%{opacity:1;transform:translateY(0) scale(1);}
  94%,100%{opacity:0;transform:translateY(-8px) scale(.98);}
}

@keyframes agent-step-two{
  0%,25%{opacity:0;transform:translateY(22px) scale(.94);}
  34%,82%{opacity:1;transform:translateY(0) scale(1);}
  94%,100%{opacity:0;transform:translateY(-8px) scale(.98);}
}

@keyframes agent-step-three{
  0%,43%{opacity:0;transform:translateY(22px) scale(.94);}
  52%,82%{opacity:1;transform:translateY(0) scale(1);}
  94%,100%{opacity:0;transform:translateY(-8px) scale(.98);}
}


/* circulation de l'information */

@keyframes flow-dot-one{
  0%,25%{left:-15px;opacity:0;}
  29%{opacity:1;}
  40%{left:calc(100% + 2px);opacity:1;}
  41%,100%{opacity:0;}
}

@keyframes flow-dot-two{
  0%,44%{left:-15px;opacity:0;}
  48%{opacity:1;}
  59%{left:calc(100% + 2px);opacity:1;}
  60%,100%{opacity:0;}
}

@keyframes ui-lines{
  0%,100%{transform:scaleX(.62);opacity:.08;}
  20%,78%{transform:scaleX(1);opacity:.16;}
}


/* mobile */

@media(max-width:700px){

  .kafk-agent-visual{
    height:245px;
    margin:0 auto 28px;
  }

  .kafk-device{
    width:90vw;
  }

  .kafk-screen{
    border-width:6px;
    border-radius:12px;
  }

  .kafk-stand{
    height:48px;
  }

  .kafk-neck{
    width:55px;
    height:35px;
  }

  .kafk-foot{
    width:145px;
    height:8px;
  }

  .agent-left{
    display:none;
  }

  .agent-flow{
    left:7%;
    right:7%;
    top:28%;
  }

  .agent-step{
    height:76px;
    padding:12px 9px;
    border-radius:11px;
  }

  .agent-step strong{
    font-size:8px;
  }

  .agent-step small{
    font-size:8px;
  }

  .visual-shadow{
    width:250px;
    height:25px;
    bottom:8px;
  }
}

@media(prefers-reduced-motion:reduce){
  .kafk-device,
  .visual-shadow,
  .agent-step,
  .flow-link i,
  .ui-line{
    animation:none !important;
  }

  .agent-step{
    opacity:1;
    transform:none;
  }
}


/* === KAFK HERO SCENE TWO === */


/* HERO PLUS CENTRÉ */

.hero-inner{
  text-align:center;
}

.hero-inner .kafk-agent-visual{
  margin-left:auto;
  margin-right:auto;
}

.hero-inner .hero-copy,
.hero-inner .hero-sub{
  margin-left:auto;
  margin-right:auto;
}

.hero-meta{
  justify-content:center;
}

.hero-actions{
  justify-content:center;
}

.speed-pill{
  display:inline-flex;
}

.kafk-agent-visual{
  height:330px;
  margin-top:0;
  margin-bottom:22px;
}


/* ------------------------------------------------
   ALTERNANCE DES DEUX SCÈNES
------------------------------------------------ */

.scene-one{
  animation:scene-one-cycle 10s ease-in-out infinite;
}

.agent-scene-two{
  position:absolute;
  inset:0;
  background:#f7f4ee;
  opacity:0;
  pointer-events:none;
  animation:scene-two-cycle 10s ease-in-out infinite;
}


/* ------------------------------------------------
   DEMANDE CLIENT
------------------------------------------------ */

.quote-request{
  position:absolute;
  left:8%;
  top:20%;
  width:38%;
  bottom:15%;
  padding:24px;
  border-radius:18px;
  background:white;
  box-shadow:0 12px 30px rgba(0,0,0,.06);

  opacity:0;
  transform:translateX(-25px);
  animation:quote-request-in 10s ease-in-out infinite;
}

.quote-label{
  display:block;
  margin-bottom:24px;

  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;

  color:#e6532f;
}

.quote-line{
  height:8px;
  margin-bottom:14px;

  border-radius:20px;
  background:#111;
  opacity:.12;
}

.quote-line.q1{
  width:85%;
}

.quote-line.q2{
  width:62%;
}

.quote-line.q3{
  width:74%;
}

.quote-details{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;

  margin-top:27px;
}

.quote-details span{
  padding:9px 4px;

  text-align:center;
  font-size:8px;

  border-radius:8px;

  background:#f7f4ee;
  color:#555;
}


/* ------------------------------------------------
   TRAITEMENT
------------------------------------------------ */

.quote-processing{
  position:absolute;

  left:49%;
  top:48%;

  display:flex;
  gap:7px;

  transform:translate(-50%,-50%);
}

.quote-processing span{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#e6532f;

  opacity:0;

  animation:processing-dot 10s ease-in-out infinite;
}

.quote-processing span:nth-child(2){
  animation-delay:.12s;
}

.quote-processing span:nth-child(3){
  animation-delay:.24s;
}


/* ------------------------------------------------
   RÉSULTAT
------------------------------------------------ */

.quote-result{
  position:absolute;

  right:8%;
  top:23%;

  width:34%;

  padding:23px;

  border-radius:18px;

  background:#e6532f;
  color:white;

  box-shadow:0 15px 35px rgba(230,83,47,.18);

  opacity:0;
  transform:translateX(25px) scale(.96);

  animation:quote-result-in 10s ease-in-out infinite;
}

.quote-result small{
  display:block;

  margin-bottom:18px;

  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;

  opacity:.75;
}

.quote-result strong{
  display:block;

  margin-bottom:24px;

  font-size:18px;
}

.result-line{
  width:100%;
  height:6px;

  margin-bottom:10px;

  border-radius:20px;

  background:white;

  opacity:.25;
}

.result-line.short{
  width:62%;
}

.result-status{
  display:inline-block;

  margin-top:20px;
  padding:8px 11px;

  border-radius:999px;

  background:white;
  color:#e6532f;

  font-size:9px;
  font-weight:800;
}


/* ------------------------------------------------
   TIMELINE
------------------------------------------------ */

@keyframes scene-one-cycle{

  0%,42%{
    opacity:1;
  }

  48%,94%{
    opacity:0;
  }

  100%{
    opacity:1;
  }
}


@keyframes scene-two-cycle{

  0%,43%{
    opacity:0;
  }

  50%,92%{
    opacity:1;
  }

  100%{
    opacity:0;
  }
}


@keyframes quote-request-in{

  0%,47%{
    opacity:0;
    transform:translateX(-25px);
  }

  54%,85%{
    opacity:1;
    transform:translateX(0);
  }

  94%,100%{
    opacity:0;
  }
}


@keyframes processing-dot{

  0%,57%{
    opacity:0;
    transform:scale(.5);
  }

  61%{
    opacity:1;
    transform:scale(1.3);
  }

  65%{
    opacity:.25;
    transform:scale(.8);
  }

  69%{
    opacity:1;
    transform:scale(1.3);
  }

  74%,100%{
    opacity:0;
  }
}


@keyframes quote-result-in{

  0%,65%{
    opacity:0;
    transform:translateX(25px) scale(.96);
  }

  73%,89%{
    opacity:1;
    transform:translateX(0) scale(1);
  }

  96%,100%{
    opacity:0;
  }
}


/* MOBILE */

@media(max-width:700px){

  .kafk-agent-visual{
    height:235px;
    margin-bottom:18px;
  }

  .quote-request{
    left:5%;
    width:41%;
    padding:13px;
  }

  .quote-result{
    right:5%;
    width:38%;
    padding:13px;
  }

  .quote-result strong{
    font-size:11px;
  }

  .quote-details{
    display:none;
  }

  .quote-processing{
    left:50%;
  }
}


/* === KAFK HERO POLISH === */

/* Plus d'air dans le hero */

.hero{
  padding-top:90px;
  padding-bottom:110px;
}

.kafk-agent-visual{
  height:390px;
  margin-top:10px;
  margin-bottom:70px;
}

.hero h1{
  margin-top:0;
}

.hero-copy{
  margin-top:24px;
}


/* Lévitation plus naturelle */

.kafk-device{
  animation:kafk-levitate 7s ease-in-out infinite;
}

.visual-shadow{
  animation:kafk-shadow-breathe 7s ease-in-out infinite;
}

@keyframes kafk-levitate{
  0%,100%{
    transform:translateY(12px) rotateX(1deg) scale(.985);
  }

  25%{
    transform:translateY(-4px) rotateX(0deg) scale(1);
  }

  50%{
    transform:translateY(-13px) rotateX(-.5deg) scale(1.005);
  }

  75%{
    transform:translateY(-3px) rotateX(.3deg) scale(1);
  }
}

@keyframes kafk-shadow-breathe{
  0%,100%{
    transform:scale(.82);
    opacity:.28;
    filter:blur(20px);
  }

  50%{
    transform:scale(1);
    opacity:.52;
    filter:blur(15px);
  }
}


/* Transition plus douce entre les scènes */

.scene-one{
  animation:scene-one-cycle 12s ease-in-out infinite;
}

.agent-scene-two{
  animation:scene-two-cycle 12s ease-in-out infinite;
}

.quote-request{
  animation:quote-request-in 12s ease-in-out infinite;
}

.quote-processing span{
  animation:processing-dot 12s ease-in-out infinite;
}

.quote-result{
  animation:quote-result-in 12s ease-in-out infinite;
}

.step-1{
  animation:agent-step-one 12s ease-in-out infinite;
}

.step-2{
  animation:agent-step-two 12s ease-in-out infinite;
}

.step-3{
  animation:agent-step-three 12s ease-in-out infinite;
}

.link-1 i{
  animation:flow-dot-one 12s ease-in-out infinite;
}

.link-2 i{
  animation:flow-dot-two 12s ease-in-out infinite;
}

.ui-line{
  animation:ui-lines 12s ease-in-out infinite;
}


/* Mobile */

@media(max-width:700px){

  .hero{
    padding-top:55px;
    padding-bottom:75px;
  }

  .kafk-agent-visual{
    height:270px;
    margin-bottom:42px;
  }
}


/* === KAFK HERO 3D POLISH === */

/* phrase du haut */
.hero{
  padding-top:70px;
}

.hero .eyebrow{
  position:relative;
  z-index:20;
  display:block;
  margin:0 0 20px;
  font-size:18px;
  font-weight:800;
  letter-spacing:.18em;
}

/* on baisse légèrement l'animation pour ne plus cacher le texte */
.kafk-agent-visual{
  position:relative;
  z-index:5;
  margin-top:26px;
  margin-bottom:82px;
}

/* pseudo-3D plus marquée */
.kafk-device{
  transform-style:preserve-3d;
}

.kafk-screen{
  transform:rotateX(7deg) rotateY(-7deg);
  box-shadow:
    0 38px 70px rgba(0,0,0,.10),
    0 18px 30px rgba(0,0,0,.08),
    0 4px 10px rgba(0,0,0,.08);
}

.agent-ui{
  transform:translateZ(18px);
}

.kafk-stand{
  transform:translateZ(-8px);
}

.visual-shadow{
  width:470px;
  height:46px;
  opacity:.45;
}

/* mobile */
@media(max-width:700px){
  .hero{
    padding-top:52px;
  }

  .hero .eyebrow{
    font-size:14px;
    margin-bottom:14px;
  }

  .kafk-agent-visual{
    margin-top:18px;
    margin-bottom:44px;
  }
}


/* === KAFK HERO FINAL ALIGN === */

.hero-inner{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
  text-align:center;
}

/* phrase orange plus haute */
.hero .eyebrow{
  margin-top:-32px;
  margin-bottom:18px;
  text-align:center;
}

/* animation parfaitement centrée */
.kafk-agent-visual{
  margin-left:auto;
  margin-right:auto;
  margin-bottom:76px;
}

/* titre */
.hero h1{
  max-width:1050px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* sous-titre */
.hero-copy{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.hero-sub{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* bloc orange */
.speed-pill{
  margin-left:auto;
  margin-right:auto;
}

/* petits badges */
.hero-meta{
  width:100%;
  justify-content:center;
  align-items:center;
}

/* boutons */
.hero-actions{
  width:100%;
  justify-content:center;
  align-items:center;
}

/* mobile */
@media(max-width:700px){

  .hero-inner{
    width:min(100% - 28px, 1180px);
  }

  .hero .eyebrow{
    margin-top:-18px;
  }

  .kafk-agent-visual{
    margin-bottom:48px;
  }
}


/* === KAFK HERO SPACING === */

.hero h1{
  margin-bottom:34px;
}

.hero-copy{
  margin-top:0;
  margin-bottom:28px;
}

.hero-sub{
  margin-top:0;
  margin-bottom:34px;
  line-height:1.65;
}

.speed-pill{
  margin-top:0;
  margin-bottom:24px;
}

.hero-meta{
  margin-top:0;
  margin-bottom:34px;
  gap:12px;
}

.hero-actions{
  margin-top:0;
  gap:14px;
}

@media(max-width:700px){

  .hero h1{
    margin-bottom:26px;
  }

  .hero-copy{
    margin-bottom:22px;
  }

  .hero-sub{
    margin-bottom:28px;
  }

  .speed-pill{
    margin-bottom:20px;
  }

  .hero-meta{
    margin-bottom:28px;
  }
}

/* === KAFK PROJET REASSURANCE === */

.project-reassurance{
  max-width:720px;
  margin:28px 0 38px;
  padding:22px 24px;
  border-radius:20px;
  background:#f7f4ee;
}

.project-reassurance strong{
  display:block;
  margin-bottom:8px;
  font-size:17px;
}

.project-reassurance p{
  margin:0;
  line-height:1.6;
  color:#666;
}



/* === KAFK AGENT GOAL DEMOS === */

.agent-demo{
  width:min(660px,100%);
  display:grid;
  grid-template-columns:1fr 82px 1fr;
  align-items:center;
  gap:16px;
}

.agent-demo-input,
.agent-demo-result{
  min-height:210px;
  padding:25px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 35px rgba(0,0,0,.055);
}

.agent-demo-input{
  animation:kafk-demo-input .65s cubic-bezier(.2,.8,.2,1) both;
}

.agent-demo-input small,
.agent-demo-result small{
  display:block;
  margin-bottom:18px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  opacity:.48;
}

.agent-demo-input strong,
.agent-demo-result strong{
  display:block;
  font-size:20px;
  line-height:1.25;
}

.agent-demo-result{
  animation:kafk-demo-result .7s .55s cubic-bezier(.2,.8,.2,1) both;
}

.agent-demo-result.orange{
  background:#e6532f;
  color:#fff;
}

.agent-demo-result p{
  margin:14px 0 20px;
  font-size:13px;
  line-height:1.5;
  opacity:.65;
}

.agent-demo-result button{
  border:0;
  padding:11px 15px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-weight:700;
}

.agent-demo-result.orange button{
  background:#fff;
  color:#e6532f;
}

.agent-demo-process{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.agent-demo-process::before,
.agent-demo-process::after{
  content:"";
  position:absolute;
  top:21px;
  width:28px;
  height:1px;
  background:rgba(0,0,0,.14);
}

.agent-demo-process::before{
  right:calc(50% + 18px);
}

.agent-demo-process::after{
  left:calc(50% + 18px);
}

.agent-demo-process span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#e6532f;
  animation:kafk-demo-dot 1.15s ease-in-out infinite;
}

.agent-demo-process span:nth-child(2){
  animation-delay:.15s;
}

.agent-demo-process span:nth-child(3){
  animation-delay:.3s;
}

.agent-demo-process small{
  margin-top:5px;
  font-size:8px;
  text-align:center;
  line-height:1.3;
  color:#777;
}

.agent-chips,
.agent-checks{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:25px;
}

.agent-chips span,
.agent-checks span{
  padding:8px 10px;
  border-radius:999px;
  background:#f7f4ee;
  font-size:10px;
  color:#555;
}

.fake-lines{
  margin-top:28px;
}

.fake-lines i{
  display:block;
  height:7px;
  margin-top:9px;
  border-radius:20px;
  background:#111;
  opacity:.10;
}

.fake-lines i:nth-child(1){width:86%;}
.fake-lines i:nth-child(2){width:63%;}
.fake-lines i:nth-child(3){width:74%;}


@keyframes kafk-demo-input{
  from{
    opacity:0;
    transform:translateX(-20px) scale(.97);
  }
  to{
    opacity:1;
    transform:translateX(0) scale(1);
  }
}

@keyframes kafk-demo-result{
  from{
    opacity:0;
    transform:translateX(22px) scale(.96);
  }
  to{
    opacity:1;
    transform:translateX(0) scale(1);
  }
}

@keyframes kafk-demo-dot{
  0%,100%{
    opacity:.25;
    transform:scale(.7);
  }
  50%{
    opacity:1;
    transform:scale(1.35);
  }
}


@media(max-width:760px){

  .agent-demo{
    grid-template-columns:1fr;
    gap:14px;
  }

  .agent-demo-input,
  .agent-demo-result{
    min-height:auto;
  }

  .agent-demo-process{
    flex-direction:row;
    min-height:35px;
  }

  .agent-demo-process::before,
  .agent-demo-process::after{
    display:none;
  }

  .agent-demo-process small{
    margin:0 0 0 7px;
  }
}


/* === KAFK AGENT DEMO OPEN STAGE === */

/* On ouvre complètement la scène de droite */
.demo-stage{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:28px 0 !important;
  margin:0 !important;
  overflow:visible !important;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* La grande zone noire reste côté texte seulement */
.goal-showcase{
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.15fr);
  overflow:visible;
}

/* Démo plus grande */
.agent-demo{
  width:min(760px, 100%);
  grid-template-columns:1fr 110px 1fr;
  gap:22px;
  overflow:visible;
}

/* Cartes plus présentes */
.agent-demo-input,
.agent-demo-result{
  min-height:250px;
  padding:30px;
  border-radius:28px;
  box-shadow:
    0 24px 55px rgba(0,0,0,.08),
    0 8px 18px rgba(0,0,0,.05);
}

/* Lévitation */
.agent-demo-input{
  animation:
    kafk-demo-input .65s cubic-bezier(.2,.8,.2,1) both,
    kafk-demo-float-left 5.5s 1s ease-in-out infinite;
}

.agent-demo-result{
  animation:
    kafk-demo-result .7s .55s cubic-bezier(.2,.8,.2,1) both,
    kafk-demo-float-right 5.5s 1.2s ease-in-out infinite;
}

/* Traitement beaucoup plus visible */
.agent-demo-process{
  transform:scale(1.12);
}

.agent-demo-process span{
  width:11px;
  height:11px;
  box-shadow:0 0 0 0 rgba(230,83,47,.24);
  animation:kafk-demo-dot-strong 1.05s ease-in-out infinite;
}

.agent-demo-process span:nth-child(2){
  animation-delay:.14s;
}

.agent-demo-process span:nth-child(3){
  animation-delay:.28s;
}

.agent-demo-process small{
  margin-top:8px;
  font-size:9px;
  font-weight:700;
  color:#666;
}

/* Ligne de circulation */
.agent-demo-process::before,
.agent-demo-process::after{
  top:24px;
  width:38px;
  height:2px;
  background:rgba(230,83,47,.28);
}

/* Effet de circulation visuelle */
.agent-demo-process::before{
  animation:kafk-link-left 2.6s ease-in-out infinite;
}

.agent-demo-process::after{
  animation:kafk-link-right 2.6s .45s ease-in-out infinite;
}


/* Mouvements */

@keyframes kafk-demo-float-left{
  0%,100%{
    transform:translateY(0) rotate(-.4deg);
  }
  50%{
    transform:translateY(-10px) rotate(.4deg);
  }
}

@keyframes kafk-demo-float-right{
  0%,100%{
    transform:translateY(-4px) rotate(.4deg);
  }
  50%{
    transform:translateY(8px) rotate(-.4deg);
  }
}

@keyframes kafk-demo-dot-strong{
  0%,100%{
    opacity:.30;
    transform:scale(.72);
    box-shadow:0 0 0 0 rgba(230,83,47,.20);
  }

  50%{
    opacity:1;
    transform:scale(1.45);
    box-shadow:0 0 0 10px rgba(230,83,47,0);
  }
}

@keyframes kafk-link-left{
  0%,100%{
    opacity:.18;
    transform:scaleX(.45);
    transform-origin:right center;
  }

  50%{
    opacity:.7;
    transform:scaleX(1);
  }
}

@keyframes kafk-link-right{
  0%,100%{
    opacity:.18;
    transform:scaleX(.45);
    transform-origin:left center;
  }

  50%{
    opacity:.7;
    transform:scaleX(1);
  }
}


/* Responsive */
@media(max-width:900px){

  .goal-showcase{
    grid-template-columns:1fr;
  }

  .demo-stage{
    min-height:auto;
    padding:30px 0 10px !important;
  }

  .agent-demo{
    width:min(680px,100%);
  }
}

@media(max-width:760px){

  .agent-demo{
    grid-template-columns:1fr;
    gap:18px;
  }

  .agent-demo-input,
  .agent-demo-result{
    min-height:auto;
  }

  .agent-demo-process{
    transform:none;
  }

  .agent-demo-process::before,
  .agent-demo-process::after{
    display:none;
  }
}


/* === KAFK AGENT FLOW BOOST === */

.agent-demo-process{
  width:120px;
  min-width:120px;
  min-height:120px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* grande ligne de circulation */
.agent-demo-process::before{
  content:"";
  position:absolute;
  left:-18px;
  right:-18px;
  top:50%;
  width:auto;
  height:4px;
  background:rgba(230,83,47,.16);
  border-radius:999px;
  transform:translateY(-50%);
  animation:none;
}

/* ligne orange qui se dessine */
.agent-demo-process::after{
  content:"";
  position:absolute;
  left:-18px;
  top:50%;
  width:0;
  height:4px;
  background:#e6532f;
  border-radius:999px;
  transform:translateY(-50%);
  animation:kafk-flow-line 2.4s ease-in-out infinite;
}

/* paquet d'information qui traverse */
.agent-demo-process > span:first-child{
  position:absolute;
  left:-14px;
  top:50%;
  width:18px;
  height:18px;
  margin:0;
  border-radius:50%;
  background:#e6532f;
  box-shadow:
    0 0 0 7px rgba(230,83,47,.12),
    0 0 25px rgba(230,83,47,.38);
  transform:translateY(-50%);
  animation:kafk-flow-packet 2.4s cubic-bezier(.4,0,.2,1) infinite;
  z-index:5;
}

/* les deux autres points deviennent le coeur de traitement */
.agent-demo-process > span:nth-child(2),
.agent-demo-process > span:nth-child(3){
  position:absolute;
  left:50%;
  top:50%;
  margin:0;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#e6532f;
  transform:translate(-50%,-50%);
  animation:kafk-process-pulse 2.4s ease-in-out infinite;
  z-index:4;
}

.agent-demo-process > span:nth-child(2){
  margin-left:-12px;
  animation-delay:.12s;
}

.agent-demo-process > span:nth-child(3){
  margin-left:12px;
  animation-delay:.24s;
}

.agent-demo-process small{
  position:absolute;
  top:calc(50% + 28px);
  left:50%;
  width:130px;
  transform:translateX(-50%);
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
  text-align:center;
  color:#777;
}

/* résultat plus spectaculaire à l'arrivée */
.agent-demo-result{
  animation:
    kafk-demo-result .7s .55s cubic-bezier(.2,.8,.2,1) both,
    kafk-demo-result-react 2.4s 1s ease-in-out infinite;
}

/* entrée légèrement vivante aussi */
.agent-demo-input{
  animation:
    kafk-demo-input .65s cubic-bezier(.2,.8,.2,1) both,
    kafk-demo-input-react 2.4s .35s ease-in-out infinite;
}


@keyframes kafk-flow-line{
  0%{
    width:0;
    opacity:0;
  }

  15%{
    opacity:1;
  }

  65%{
    width:calc(100% + 36px);
    opacity:1;
  }

  85%,100%{
    width:calc(100% + 36px);
    opacity:0;
  }
}

@keyframes kafk-flow-packet{
  0%{
    left:-14px;
    opacity:0;
    transform:translateY(-50%) scale(.65);
  }

  12%{
    opacity:1;
  }

  48%{
    left:50%;
    transform:translate(-50%,-50%) scale(1.25);
  }

  75%{
    left:calc(100% + 2px);
    opacity:1;
    transform:translateY(-50%) scale(1);
  }

  88%,100%{
    left:calc(100% + 2px);
    opacity:0;
    transform:translateY(-50%) scale(.65);
  }
}

@keyframes kafk-process-pulse{
  0%,30%,100%{
    opacity:.18;
    transform:translate(-50%,-50%) scale(.7);
    box-shadow:0 0 0 0 rgba(230,83,47,0);
  }

  48%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.45);
    box-shadow:0 0 0 12px rgba(230,83,47,.09);
  }

  62%{
    opacity:.55;
    transform:translate(-50%,-50%) scale(1);
  }
}

@keyframes kafk-demo-result-react{
  0%,60%,100%{
    transform:translateY(-4px) scale(1);
    box-shadow:
      0 24px 55px rgba(0,0,0,.08),
      0 8px 18px rgba(0,0,0,.05);
  }

  72%{
    transform:translateY(-10px) scale(1.035);
    box-shadow:
      0 32px 70px rgba(230,83,47,.16),
      0 10px 24px rgba(0,0,0,.08);
  }
}

@keyframes kafk-demo-input-react{
  0%,20%,100%{
    transform:translateY(0) scale(1);
  }

  32%{
    transform:translateY(-6px) scale(1.015);
  }
}


/* mobile */
@media(max-width:760px){

  .agent-demo-process{
    width:100%;
    min-width:0;
    min-height:70px;
  }

  .agent-demo-process::before{
    left:20%;
    right:20%;
  }

  .agent-demo-process::after{
    left:20%;
  }

  .agent-demo-process > span:first-child{
    left:20%;
  }

  @keyframes kafk-flow-line{
    0%{
      width:0;
      opacity:0;
    }

    15%{
      opacity:1;
    }

    65%{
      width:60%;
      opacity:1;
    }

    85%,100%{
      width:60%;
      opacity:0;
    }
  }

  @keyframes kafk-flow-packet{
    0%{
      left:20%;
      opacity:0;
      transform:translateY(-50%) scale(.65);
    }

    12%{
      opacity:1;
    }

    48%{
      left:50%;
      transform:translate(-50%,-50%) scale(1.25);
    }

    75%{
      left:80%;
      opacity:1;
      transform:translateY(-50%) scale(1);
    }

    88%,100%{
      left:80%;
      opacity:0;
      transform:translateY(-50%) scale(.65);
    }
  }
}


/* === KAFK GOALS LIGHT REFRAME === */

/* largeur et centrage global */
.goal-tabs,
.goal-showcase{
  width:min(1320px, 100%);
  margin-left:auto;
  margin-right:auto;
}

/* on enlève le gros bloc noir */
.goal-showcase{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:10px 0 0 !important;
  overflow:visible !important;
  grid-template-columns:minmax(360px, 520px) minmax(620px, 1fr);
  gap:48px;
  align-items:center;
}

/* colonne texte */
.goal-copy{
  background:transparent !important;
  color:#111111 !important;
  padding:0 !important;
}

.goal-copy h3{
  color:#111111 !important;
}

.goal-copy > p{
  color:#444444 !important;
}

.goal-copy .eyebrow,
#goal-index{
  color:#e6532f !important;
}

#goal-tags{
  gap:10px;
}

#goal-tags span{
  background:#ffffff !important;
  color:#111111 !important;
  border:1px solid rgba(0,0,0,.10);
}

/* scène à droite : légère structure blanche */
.demo-stage{
  background:#fbfaf7 !important;
  border:1px solid rgba(0,0,0,.06) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.04),
    0 8px 18px rgba(0,0,0,.03) !important;
  border-radius:34px !important;
  min-height:460px;
  padding:28px !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* démo plus propre et mieux centrée */
.agent-demo{
  width:min(760px, 100%);
  margin:0 auto;
}

/* cartes un peu moins massives */
.agent-demo-input,
.agent-demo-result{
  min-height:230px;
}

/* recentrage du traitement */
.agent-demo-process{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* mobile / tablette */
@media(max-width:980px){

  .goal-showcase{
    grid-template-columns:1fr;
    gap:32px;
  }

  .goal-copy{
    max-width:760px;
    margin:0 auto;
  }

  .demo-stage{
    min-height:auto;
  }
}



/* ============================================================
   KAFK MOBILE V2
   01/09/2026
============================================================ */

.mobile-menu-button{
  display:none;
}


/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 760px){

  html{
    overflow-x:hidden;
  }

  body{
    overflow-x:hidden;
  }


  /* ==========================================================
     HEADER
  ========================================================== */

  header{
    position:relative !important;
    min-height:0 !important;
    height:auto !important;
    padding:12px 16px !important;

    display:grid !important;
    grid-template-columns:1fr auto auto !important;
    align-items:center !important;
    gap:10px !important;

    border-radius:0 0 22px 22px !important;
  }

  header > a:first-child,
  header .logo,
  header .brand{
    margin:0 !important;
    padding:0 !important;
  }

  header .brand,
  header .logo{
    font-size:28px !important;
    line-height:1 !important;
  }

  header .brand img,
  header .logo img{
    width:auto !important;
    max-width:105px !important;
    height:auto !important;
  }


  /* ----------------------------------------------------------
     BURGER
  ---------------------------------------------------------- */

  .mobile-menu-button{
    display:flex !important;
    width:44px;
    height:44px;

    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;

    padding:0;
    margin:0;

    border:0;
    border-radius:50%;

    background:#111;
    cursor:pointer;

    order:2;
  }

  .mobile-menu-button span{
    display:block;
    width:18px;
    height:2px;

    border-radius:2px;
    background:#fff;

    transition:
      transform .2s ease,
      opacity .2s ease;
  }

  header.mobile-menu-open
  .mobile-menu-button span:nth-child(1){
    transform:
      translateY(7px)
      rotate(45deg);
  }

  header.mobile-menu-open
  .mobile-menu-button span:nth-child(2){
    opacity:0;
  }

  header.mobile-menu-open
  .mobile-menu-button span:nth-child(3){
    transform:
      translateY(-7px)
      rotate(-45deg);
  }


  /* ----------------------------------------------------------
     MON ESPACE
  ---------------------------------------------------------- */

  header .mini-cta{
    position:static !important;

    width:auto !important;
    min-width:0 !important;

    margin:0 !important;
    padding:12px 15px !important;

    font-size:12px !important;
    line-height:1 !important;

    order:3;
  }


  /* ----------------------------------------------------------
     NAV MOBILE
  ---------------------------------------------------------- */

  header nav{
    display:none !important;

    grid-column:1 / -1;

    width:100%;
    padding:14px 0 5px !important;
    margin:0 !important;

    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;

    order:4;
  }

  header.mobile-menu-open nav{
    display:flex !important;
  }

  header nav a{
    display:block !important;

    width:100% !important;
    padding:14px 4px !important;

    border-top:1px solid rgba(0,0,0,.08);

    font-size:15px !important;
    text-align:left !important;
  }


  /* ==========================================================
     TYPOGRAPHIE GÉNÉRALE
  ========================================================== */

  h1{
    overflow-wrap:normal;
    word-break:normal;
  }


  /* ==========================================================
     HERO
  ========================================================== */

  .hero,
  #hero{
    min-height:0 !important;
    height:auto !important;

    padding-top:34px !important;
    padding-bottom:55px !important;
  }

  .hero h1,
  #hero h1{
    font-size:clamp(
      58px,
      16vw,
      82px
    ) !important;

    line-height:.9 !important;
  }


  /* ==========================================================
     ANIMATION ORDINATEUR
     → plus compacte
     → descendue
     → pas collée au header
  ========================================================== */

  .kafk-mobile-computer{
    margin-top:42px !important;
    margin-bottom:28px !important;

    transform-origin:center top;
  }

  .hero-visual,
  .hero-animation,
  .hero-monitor,
  .monitor-scene,
  .computer-stage,
  .agent-monitor,
  .screen-demo{
    min-height:0 !important;
    height:auto !important;

    margin-top:42px !important;
  }

  /*
   * On limite le conteneur de l'ordinateur
   * à la largeur du téléphone.
   */
  .hero-visual > *,
  .hero-animation > *,
  .computer-stage > *,
  .agent-monitor > *{
    max-width:100% !important;
  }


  /* ==========================================================
     SECTION OBJECTIFS
  ========================================================== */

  #objectifs{
    overflow:hidden;
  }

  #objectifs h2{
    font-size:clamp(
      54px,
      15vw,
      78px
    ) !important;

    line-height:.92 !important;
  }


  /* ----------------------------------------------------------
     BOUTONS OBJECTIFS
     Vendre / Réserver / Devis...
     On passe en grille 2 colonnes,
     le dernier prend toute la largeur.
  ---------------------------------------------------------- */

  .kafk-mobile-goal-tabs{
    display:grid !important;
    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;

    width:100% !important;

    gap:10px !important;

    overflow:visible !important;
    white-space:normal !important;

    padding:0 !important;
    margin:28px 0 32px !important;
  }

  .kafk-mobile-goal-tabs > *{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    margin:0 !important;
    padding:17px 12px !important;

    justify-content:center !important;

    font-size:16px !important;
    line-height:1.15 !important;

    white-space:normal !important;
    text-align:center !important;
  }

  .kafk-mobile-goal-tabs > *:last-child:nth-child(odd){
    grid-column:1 / -1;
  }


  /* ==========================================================
     VISUEL OBJECTIF / DÉMO AGENT
  ========================================================== */

  #objectifs .goal-showcase,
  #objectifs .goal-content,
  #objectifs .goal-demo{
    display:block !important;

    min-height:0 !important;
    height:auto !important;

    padding-bottom:25px !important;
  }

  #objectifs .goal-stage,
  #objectifs .demo-stage{
    min-height:0 !important;
    height:auto !important;

    margin-top:30px !important;
  }


  /* ==========================================================
     RECUEILLE / TRAITE / AGIT
     Suppression des cartes gigantesques
  ========================================================== */

  .kafk-process-mobile-card{
    min-height:0 !important;
    height:auto !important;

    padding-top:38px !important;
    padding-bottom:42px !important;
  }

  .kafk-process-mobile-card h2,
  .kafk-process-mobile-card h3{
    margin-top:52px !important;
  }

  .kafk-process-mobile-card p:last-child{
    margin-bottom:0 !important;
  }

  /*
   * Autres cartes de cette section si le markup
   * ne porte pas les classes détectées.
   */
  #agent .card,
  #fonctionnement .card,
  .process .card,
  .process-card{
    min-height:0 !important;
    height:auto !important;
  }


  /* ==========================================================
     CARTES NOIR / PROPRIÉTAIRE / HÉBERGÉ / LIBRE
  ========================================================== */

  .ownership-card,
  .benefit-card,
  .included-card{
    min-height:0 !important;
    height:auto !important;
  }


  /* ==========================================================
     SECTIONS
     On resserre verticalement l'ensemble du site
  ========================================================== */

  main > section{
    margin-top:0 !important;
  }

  section{
    scroll-margin-top:90px;
  }

}


/* ------------------------------------------------------------
   PETITS TÉLÉPHONES
------------------------------------------------------------ */

@media (max-width: 430px){

  header{
    padding:
      10px 12px
      !important;
  }

  header .mini-cta{
    padding:
      11px 12px
      !important;

    font-size:11px !important;
  }

  .mobile-menu-button{
    width:40px;
    height:40px;
  }

  .kafk-mobile-goal-tabs > *{
    padding:
      15px 9px
      !important;

    font-size:15px !important;
  }

}





/* ============================================================
   KAFK OBJECTIFS MOBILE V3
============================================================ */

@media (max-width:760px){

  /* ----------------------------------------------------------
     BOUTONS OBJECTIFS :
     restent visibles pendant la démo
  ---------------------------------------------------------- */

  .kafk-mobile-goal-tabs{
    position:sticky !important;
    top:8px !important;
    z-index:40 !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    gap:8px !important;

    width:calc(100% + 8px) !important;
    margin:20px -4px 20px !important;
    padding:8px !important;

    background:rgba(247,244,238,.94) !important;

    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);

    border-radius:22px !important;
  }

  .kafk-mobile-goal-tabs > *{
    min-height:52px !important;

    padding:12px 8px !important;

    border-radius:18px !important;

    font-size:14px !important;
    line-height:1.15 !important;
  }

  .kafk-mobile-goal-tabs > *:last-child:nth-child(odd){
    grid-column:1 / -1;
  }


  /* ----------------------------------------------------------
     SECTION DÉMO
  ---------------------------------------------------------- */

  #objectifs .goal-showcase{
    margin-top:0 !important;
  }

  #objectifs .goal-content{
    padding-top:10px !important;
  }

  #objectifs .goal-demo,
  #objectifs .demo-stage,
  #objectifs .goal-stage{
    margin-top:18px !important;
    min-height:0 !important;
    height:auto !important;
  }


  /* ----------------------------------------------------------
     TITRE DU SCÉNARIO
  ---------------------------------------------------------- */

  #objectifs .goal-content h3,
  #objectifs .goal-content h2{
    font-size:clamp(36px,10vw,50px) !important;
    line-height:.98 !important;
    letter-spacing:-.035em !important;

    margin-bottom:18px !important;
  }

  #objectifs .goal-content p{
    font-size:17px !important;
    line-height:1.45 !important;
  }


  /* ----------------------------------------------------------
     TAGS Question / Contenus / Orientation
  ---------------------------------------------------------- */

  #objectifs .goal-content .tags,
  #objectifs .goal-content .chips,
  #objectifs .goal-tags{
    gap:8px !important;
    margin:18px 0 24px !important;
  }

  #objectifs .goal-content .tags *,
  #objectifs .goal-content .chips *,
  #objectifs .goal-tags *{
    font-size:13px !important;
    padding:10px 13px !important;
  }


  /* ----------------------------------------------------------
     CARTE QUESTION
  ---------------------------------------------------------- */

  #objectifs .demo-stage{
    padding:24px 18px !important;
    border-radius:28px !important;
  }

  #objectifs .demo-stage .request-card,
  #objectifs .demo-stage .input-card,
  #objectifs .demo-stage .question-card,
  #objectifs .goal-stage .request-card,
  #objectifs .goal-stage .input-card{
    min-height:0 !important;
    height:auto !important;

    padding:26px 22px !important;
    border-radius:24px !important;
  }

  #objectifs .demo-stage .request-card strong,
  #objectifs .demo-stage .input-card strong,
  #objectifs .demo-stage .question-card strong,
  #objectifs .goal-stage .request-card strong,
  #objectifs .goal-stage .input-card strong{
    font-size:24px !important;
    line-height:1.18 !important;
  }


  /* ----------------------------------------------------------
     ÉTAPE "L'agent recherche"
  ---------------------------------------------------------- */

  #objectifs .process,
  #objectifs .processing,
  #objectifs .agent-process{
    margin:20px 0 !important;
    padding:0 !important;

    min-height:0 !important;
  }

  #objectifs .process *,
  #objectifs .processing *,
  #objectifs .agent-process *{
    font-size:13px !important;
  }


  /* ----------------------------------------------------------
     CARTE RÉPONSE ORANGE
     beaucoup plus interface / beaucoup moins affiche
  ---------------------------------------------------------- */

  #objectifs .result-card,
  #objectifs .response-card,
  #objectifs .demo-result{
    min-height:0 !important;
    height:auto !important;

    padding:26px 22px !important;
    border-radius:26px !important;
  }

  #objectifs .result-card h3,
  #objectifs .result-card strong,
  #objectifs .response-card h3,
  #objectifs .response-card strong,
  #objectifs .demo-result h3,
  #objectifs .demo-result strong{
    font-size:26px !important;
    line-height:1.15 !important;
  }

  #objectifs .result-card p,
  #objectifs .response-card p,
  #objectifs .demo-result p{
    font-size:15px !important;
    line-height:1.45 !important;
  }

  #objectifs .result-card a,
  #objectifs .result-card button,
  #objectifs .response-card a,
  #objectifs .response-card button,
  #objectifs .demo-result a,
  #objectifs .demo-result button{
    padding:13px 17px !important;

    font-size:14px !important;

    border-radius:999px !important;
  }


  /* ----------------------------------------------------------
     RÉDUCTION DES GROSSES MARGES
  ---------------------------------------------------------- */

  #objectifs .goal-showcase,
  #objectifs .goal-content,
  #objectifs .goal-demo,
  #objectifs .demo-stage,
  #objectifs .goal-stage{
    padding-bottom:18px !important;
  }

}


/* PETITS IPHONES */

@media (max-width:430px){

  .kafk-mobile-goal-tabs > *{
    font-size:13px !important;
  }

  #objectifs .demo-stage .request-card strong,
  #objectifs .demo-stage .input-card strong,
  #objectifs .demo-stage .question-card strong{
    font-size:22px !important;
  }

  #objectifs .result-card h3,
  #objectifs .result-card strong,
  #objectifs .response-card h3,
  #objectifs .response-card strong,
  #objectifs .demo-result h3,
  #objectifs .demo-result strong{
    font-size:24px !important;
  }

}