:root{
  --ink:#171717;
  --muted:#6f716f;
  --paper:#f7f5f0;
  --white:#ffffff;

  --peach:#efd9ca;
  --orange:#eed0b9;
  --green:#cfdfd5;
  --blue:#ccdfe6;
  --steel:#d3dce6;
  --pink:#efd5e3;
  --sand:#dfd0c4;
  --mint:#cde4da;
  --rose:#edd4cf;

  --radius:28px;
  --max:1320px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
}

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

a{color:inherit}

.site-header{
  width:min(var(--max),calc(100% - 40px));
  margin:18px auto 0;
  min-height:70px;
  padding:10px 12px 10px 22px;

  display:flex;
  align-items:center;
  gap:28px;

  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(14px);

  position:relative;
  z-index:100;
}

.brand,
.footer-brand{
  font-size:22px;
  font-weight:950;
  letter-spacing:-.04em;
  text-decoration:none;
}

.desktop-nav{
  margin-left:auto;
  display:flex;
  gap:20px;
}

.nav-link{
  color:#555;
  text-decoration:none;
  font-size:14px;
}

.nav-link:hover,
.nav-link.active{
  color:#111;
}

.header-cta,
.mobile-cta{
  padding:14px 18px;
  border-radius:999px;
  background:#171717;
  color:white;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
}

.menu-button{
  display:none;
}

.mobile-nav{
  width:calc(100% - 32px);
  margin:8px auto;
  padding:18px;
  border-radius:22px;
  background:#fff;
}

.mobile-nav a{
  display:block;
  padding:12px;
  text-decoration:none;
}

main{
  min-height:60vh;
}

.hero,
.page-hero,
.section,
.price-strip{
  width:min(var(--max),calc(100% - 40px));
  margin-left:auto;
  margin-right:auto;
}

.hero{
  margin-top:18px;
}

.home-hero{
  min-height:690px;
  padding:64px;
  border-radius:var(--radius);
  background:#e8eee9;

  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  gap:70px;
  align-items:center;
}

.eyebrow{
  margin:0;
  font-size:11px;
  line-height:1.2;
  letter-spacing:.17em;
  font-weight:900;
}

.hero-copy h1,
.page-hero h1{
  margin:20px 0 0;
  max-width:900px;
  font-size:clamp(60px,7.4vw,110px);
  line-height:.88;
  letter-spacing:-.075em;
}

.hero-copy h1 em{
  display:block;
  font-family:Georgia,serif;
  font-weight:400;
}

.hero-lead,
.page-hero>p:last-child{
  max-width:720px;
  margin:30px 0 0;
  font-size:20px;
  line-height:1.55;
  color:#474d49;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:34px;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:54px;
  padding:0 22px;
  border-radius:999px;

  text-decoration:none;
  font-weight:850;
}

.button.primary{
  background:#171717;
  color:white;
}

.button.ghost{
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.45);
}

.button.large{
  min-height:62px;
  padding:0 28px;
}

.hero-proof{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}

.hero-proof span{
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.64);
  font-size:12px;
  font-weight:800;
}

.hero-copy small{
  display:block;
  margin-top:10px;
  color:#777;
}

.hero-tool{
  padding:28px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 35px 80px rgba(0,0,0,.11);
}

.mini-label{
  margin:0 0 18px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.15em;
}

.request{
  padding:19px;
  border-radius:16px;
}

.request span{
  display:block;
  margin-bottom:8px;
  font-size:11px;
  font-weight:900;
  color:#777;
}

.request strong{
  display:block;
  font-size:19px;
  line-height:1.3;
}

.request.bad{
  background:#f3e4df;
}

.request.good{
  background:#d9ebe1;
}

.request.good small{
  display:block;
  margin-top:10px;
}

.arrow-flow{
  padding:12px;
  text-align:center;
  font-size:24px;
}

.section{
  padding:100px 0;
}

.section-head{
  max-width:900px;
  margin-bottom:46px;
}

.section-head h2,
.split h2,
.ownership h2,
.final-cta h2,
.contact-main h2{
  margin:18px 0 0;
  font-size:clamp(46px,5.5vw,82px);
  line-height:.94;
  letter-spacing:-.06em;
}

.section-head>p:last-child{
  max-width:680px;
  font-size:18px;
  line-height:1.5;
}

.entrance-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.entrance-card{
  min-height:370px;
  padding:28px;
  border-radius:24px;
  text-decoration:none;

  display:flex;
  flex-direction:column;

  transition:transform .2s ease, box-shadow .2s ease;
}

.entrance-card:hover,
.realisation-card:hover,
.example-mini:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.entrance-card span{
  font-size:11px;
  font-weight:900;
}

.entrance-card h3{
  margin:65px 0 14px;
  font-size:34px;
  line-height:1;
}

.entrance-card p{
  max-width:350px;
  line-height:1.55;
}

.entrance-card b{
  margin-top:auto;
}

.peach{background:var(--peach)}
.orange{background:var(--orange)}
.green{background:var(--green)}
.blue{background:var(--blue)}
.steel{background:var(--steel)}
.pink{background:var(--pink)}
.sand{background:var(--sand)}
.mint{background:var(--mint)}
.rose{background:var(--rose)}

.dark-section{
  padding-left:60px;
  padding-right:60px;
  border-radius:var(--radius);
  background:#1d2421;
  color:#fff;
}

.light h2{color:#fff}

.problem-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.problem-grid article{
  min-height:280px;
  padding:26px;
  border-radius:20px;
  background:#29322e;
}

.problem-grid article span{
  font-size:11px;
  color:#9ab0a4;
}

.problem-grid h3{
  margin:48px 0 12px;
  font-size:28px;
}

.problem-grid p{
  color:#c9d0cc;
  line-height:1.5;
}

.examples-preview{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.example-mini{
  min-height:270px;
  padding:24px;
  border-radius:22px;
  text-decoration:none;
  display:flex;
  flex-direction:column;
}

.example-mini span{
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}

.example-mini h3{
  margin:auto 0 8px;
  font-size:32px;
}

.example-mini p{
  margin:0;
}

.text-link{
  display:inline-block;
  margin-top:26px;
  font-weight:900;
  text-decoration:none;
}

.ownership,
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}

.ownership-copy{
  font-size:18px;
  line-height:1.6;
}

.ownership-copy a{
  display:inline-block;
  margin-top:15px;
  font-weight:900;
}

.price-strip{
  padding:40px;
  border-radius:var(--radius);
  background:#efd7c6;

  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:40px;
  align-items:center;
}

.price-strip strong{
  display:block;
  margin-top:6px;
  font-size:44px;
  letter-spacing:-.05em;
}

.price-strip>p{
  max-width:650px;
  line-height:1.5;
}

.final-cta{
  padding-top:120px;
  padding-bottom:120px;
  text-align:center;
}

.final-cta h2{
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

.final-cta .button{
  margin-top:32px;
}

.page-hero{
  margin-top:18px;
  padding:70px 60px;
  border-radius:var(--radius);
}

.page-hero h1{
  max-width:950px;
}

.pastel-green{background:#dbe9e0}
.pastel-blue{background:#dce7ed}
.pastel-peach{background:#f0ded1}
.pastel-pink{background:#efdae5}
.pastel-sand{background:#e5d7cb}

.process-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.process-grid article{
  min-height:340px;
  padding:28px;
  border-radius:22px;
  background:#fff;
}

.process-grid article span{
  font-size:11px;
  font-weight:900;
}

.process-grid h2{
  margin:65px 0 12px;
  font-size:31px;
  line-height:1;
}

.process-grid p{
  line-height:1.55;
}

.check-list{
  display:grid;
}

.check-list span{
  padding:18px 0;
  border-bottom:1px solid #ccc;
  font-size:18px;
}

.offer-card{
  padding:38px;
  border-radius:var(--radius);
  background:#171717;
  color:white;

  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
}

.offer-price span{
  font-size:11px;
  font-weight:900;
}

.offer-price strong{
  display:block;
  margin-top:18px;
  font-size:clamp(60px,7vw,100px);
  line-height:.9;
}

.offer-list{
  display:grid;
}

.offer-list span{
  padding:15px 0;
  border-bottom:1px solid #3b3b3b;
}

.module-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.module-grid article{
  min-height:250px;
  padding:24px;
  border-radius:22px;
  background:#fff;
}

.module-grid h3{
  margin-top:70px;
  font-size:25px;
}

.module-grid p{
  color:#666;
  line-height:1.5;
}

.realisations-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.realisation-card{
  min-height:360px;
  padding:27px;
  border-radius:24px;
  text-decoration:none;

  display:flex;
  flex-direction:column;

  transition:transform .2s ease,box-shadow .2s ease;
}

.realisation-card>div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.realisation-card h2{
  margin:auto 0 8px;
  font-size:38px;
}

.realisation-card b{
  margin-top:18px;
}

.ownership-block{
  padding-left:50px;
  padding-right:50px;
  border-radius:var(--radius);
  background:#171717;
  color:white;
}

.ownership-points{
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.ownership-points article{
  min-height:280px;
  padding:25px;
  border-radius:20px;
  background:#292929;
}

.ownership-points h3{
  margin-top:55px;
  font-size:26px;
}

.ownership-points p{
  color:#c9c9c9;
  line-height:1.5;
}

.faq{
  max-width:1000px;
}

.faq details{
  padding:24px 0;
  border-bottom:1px solid #ccc;
}

.faq summary{
  cursor:pointer;
  font-size:24px;
  font-weight:850;
}

.faq details p{
  max-width:780px;
  font-size:17px;
  line-height:1.6;
  color:#555;
}

.contact-choice{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:70px;
}

.contact-main{
  padding:48px;
  border-radius:var(--radius);
  background:#fff;
}

.contact-main p{
  max-width:650px;
  font-size:18px;
  line-height:1.55;
}

.contact-side{
  display:grid;
  gap:12px;
}

.contact-side article{
  padding:24px;
  border-radius:20px;
  background:#dbe9e0;
}

.contact-side article span{
  display:block;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.contact-side article strong{
  display:block;
  margin-top:10px;
  font-size:30px;
}

.site-footer{
  width:min(var(--max),calc(100% - 40px));
  margin:40px auto 20px;
  padding:45px;

  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:50px;

  border-radius:var(--radius);
  background:#171717;
  color:#fff;
}

.site-footer p{
  max-width:420px;
  color:#aaa;
  line-height:1.5;
}

.footer-links{
  display:grid;
  align-content:start;
  gap:10px;
}

.footer-links a{
  color:#ddd;
  text-decoration:none;
}

@media(max-width:980px){

  .desktop-nav{
    display:none;
  }

  .menu-button{
    display:block;
    margin-left:auto;
    border:0;
    background:transparent;
    font-weight:900;
  }

  .header-cta{
    display:none;
  }

  .home-hero,
  .ownership,
  .split,
  .contact-choice,
  .offer-card{
    grid-template-columns:1fr;
  }

  .home-hero{
    padding:44px;
  }

  .entrance-grid,
  .problem-grid,
  .process-grid,
  .realisations-grid{
    grid-template-columns:1fr;
  }

  .examples-preview,
  .module-grid{
    grid-template-columns:1fr 1fr;
  }

  .price-strip{
    grid-template-columns:1fr;
  }

  .ownership-points{
    grid-template-columns:1fr;
  }

}

@media(max-width:680px){

  .site-header{
    width:calc(100% - 20px);
    min-height:60px;
    margin-top:10px;
  }

  .hero,
  .page-hero,
  .section,
  .price-strip,
  .site-footer{
    width:calc(100% - 20px);
  }

  .home-hero{
    min-height:auto;
    padding:35px 20px;
    gap:35px;
  }

  .hero-copy h1,
  .page-hero h1{
    font-size:clamp(54px,16vw,76px);
  }

  .hero-lead{
    font-size:17px;
  }

  .hero-actions{
    display:grid;
  }

  .button{
    width:100%;
  }

  .section{
    padding-top:65px;
    padding-bottom:65px;
  }

  .dark-section,
  .ownership-block{
    padding-left:20px;
    padding-right:20px;
  }

  .entrance-grid,
  .problem-grid,
  .examples-preview,
  .module-grid,
  .realisations-grid{
    grid-template-columns:1fr;
  }

  .page-hero{
    padding:45px 22px;
  }

  .offer-card{
    padding:25px;
  }

  .site-footer{
    grid-template-columns:1fr;
    padding:30px 22px;
  }

}

.kafk-enter{
  animation:kafkEnter .55s ease-out both;
}

@keyframes kafkEnter{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .kafk-enter{
    animation:none;
  }
}


/* ===========================================================
   KAFK — POSITIONNEMENT COMMERCIAL 990
   =========================================================== */

.hero-reassurance{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid rgba(0,0,0,.12);
}

.hero-reassurance span{
  position:relative;
  padding-left:17px;
  font-size:13px;
  font-weight:850;
}

.hero-reassurance span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#507363;
  transform:translateY(-50%);
}

.hero-speed{
  max-width:600px;
  margin:15px 0 0;
  color:#6d746f;
  font-size:13px;
  line-height:1.5;
}


/* entrepreneurs */

.entrepreneur-section{
  padding-top:110px;
  padding-bottom:110px;
}

.entrepreneur-intro{
  max-width:900px;
}

.entrepreneur-intro h2{
  margin:18px 0 25px;
  font-size:clamp(58px,7vw,100px);
  line-height:.88;
  letter-spacing:-.07em;
}

.entrepreneur-intro>p:not(.eyebrow){
  max-width:760px;
  font-size:19px;
  line-height:1.55;
}

.entrepreneur-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:55px;
}

.entrepreneur-grid article{
  min-height:300px;
  padding:27px;
  border-radius:23px;
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
}

.entrepreneur-grid span{
  font-size:11px;
  font-weight:900;
  color:#788d83;
}

.entrepreneur-grid h3{
  margin:60px 0 12px;
  font-size:30px;
  line-height:1;
}

.entrepreneur-grid p{
  color:#626863;
  line-height:1.55;
}


/* Agent IA */

.agent-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.agent-copy h2{
  margin:18px 0 25px;
  font-size:clamp(50px,5.5vw,80px);
  line-height:.92;
  letter-spacing:-.06em;
}

.agent-copy>p:not(.eyebrow){
  max-width:650px;
  font-size:18px;
  line-height:1.6;
}

.agent-demo{
  padding:26px;
  border-radius:26px;
  background:#202923;
  color:#fff;
}

.agent-step,
.agent-result{
  margin-top:10px;
  padding:17px;
  border-radius:14px;
}

.agent-step{
  display:grid;
  grid-template-columns:35px 1fr;
  gap:10px;
  align-items:center;
  background:#2d3931;
}

.agent-step span,
.agent-result span{
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  color:#9fb7aa;
}

.agent-result{
  margin-top:18px;
  background:#d6e7dd;
  color:#172019;
}

.agent-result span{
  display:block;
  color:#49705c;
  margin-bottom:8px;
}


/* Offre */

.kafk-offer{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:16px;
}

.offer-main{
  padding:38px;
  border-radius:28px;
  background:#171717;
  color:#fff;
}

.offer-big-price{
  display:block;
  margin:22px 0;
  font-size:clamp(65px,7vw,104px);
  line-height:.85;
  letter-spacing:-.07em;
}

.offer-main>p{
  color:#ccc;
  line-height:1.5;
}

.offer-main .button{
  margin-top:22px;
  background:#fff;
  color:#171717;
}

.offer-benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.offer-benefits article{
  min-height:330px;
  padding:25px;
  border-radius:23px;
  background:#e1ece6;
  display:flex;
  flex-direction:column;
}

.offer-benefits article:nth-child(2){
  background:#efdcd0;
}

.offer-benefits article:nth-child(3){
  background:#d9e4eb;
}

.offer-benefits span,
.included-card>span{
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
}

.offer-benefits h3{
  margin:55px 0 12px;
  font-size:28px;
}

.offer-benefits p{
  line-height:1.5;
}

.offer-benefits small{
  margin-top:auto;
  color:#60645f;
  line-height:1.4;
}


/* Tarifs */

.included-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.included-card{
  min-height:420px;
  padding:30px;
  border-radius:25px;
}

.included-card h3{
  margin:60px 0 15px;
  font-size:37px;
  line-height:1;
}

.included-card p{
  font-size:18px;
  line-height:1.55;
}

.included-card small{
  display:block;
  margin-top:25px;
  color:#5f6862;
  line-height:1.5;
}

.volume-list{
  display:grid;
  margin-top:24px;
}

.volume-list b{
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.12);
  font-size:16px;
}


@media(max-width:980px){

  .agent-section,
  .kafk-offer{
    grid-template-columns:1fr;
  }

  .offer-benefits{
    grid-template-columns:1fr;
  }

}


@media(max-width:700px){

  .hero-reassurance{
    display:grid;
    gap:10px;
  }

  .entrepreneur-section{
    padding-top:70px;
    padding-bottom:70px;
  }

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

  .agent-section{
    gap:35px;
  }

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

  .offer-benefits article{
    min-height:260px;
  }

}


/* ============================================================
   KAFK PASS 2 — MOUVEMENT / HUMANISATION
   ============================================================ */

.brand-logo{
  display:flex;
  align-items:center;
}

.brand-logo img{
  display:block;
  max-width:110px;
  max-height:34px;
  object-fit:contain;
}

.client-link{
  margin-left:auto;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}

.header-cta{
  margin-left:0;
}


/* typographie : éviter les cassures sauvages */

.hero-copy h1,
.page-hero h1,
.section-head h2,
.entrepreneur-intro h2,
.agent-copy h2,
.ownership h2,
.final-cta h2,
.human-copy h2{
  text-wrap:balance;
}

.hero-copy,
.agent-copy,
.entrepreneur-intro,
.human-copy{
  min-width:0;
}

.price-ht{
  display:inline-block;
  font-size:.34em;
  font-weight:850;
  letter-spacing:-.02em;
  vertical-align:.18em;
}

.free-word{
  display:inline-block;
  font-size:1.35em;
  font-weight:950;
  letter-spacing:-.025em;
}


/* phrase liberté */

.freedom-line{
  max-width:900px;
}

.freedom-line span,
.freedom-line em{
  display:block;
}

.freedom-line em,
.freedom-inline em{
  font-family:Georgia,serif;
  font-weight:400;
  color:#596c62;
}


/* Agent IA */

.agent-section{
  position:relative;
  overflow:hidden;
  padding-top:120px;
  padding-bottom:120px;
}

.agent-section::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:#dcebe3;
  filter:blur(40px);
  opacity:.55;
  right:-120px;
  top:20px;
  pointer-events:none;
}

.agent-lead{
  font-size:21px !important;
}

.agent-capabilities{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:30px;
}

.agent-capabilities article{
  padding:18px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
}

.agent-capabilities span{
  display:block;
  margin-bottom:28px;
  color:#7b8e84;
  font-size:10px;
  font-weight:900;
}

.agent-capabilities strong{
  display:block;
  font-size:17px;
}

.agent-capabilities p{
  margin-bottom:0;
  color:#666;
  line-height:1.45;
  font-size:14px;
}

.agent-note{
  margin-top:23px;
  color:#666;
  font-size:14px !important;
}

.agent-live-card{
  position:relative;
  z-index:2;
  padding:28px;
  border-radius:26px;
  background:#19211d;
  color:white;
  box-shadow:0 35px 80px rgba(0,0,0,.16);
}

.ai-chat{
  display:grid;
  gap:10px;
  margin-top:22px;
}

.ai-message{
  max-width:88%;
  padding:13px 16px;
  border-radius:15px;
  line-height:1.4;
}

.ai-message.visitor{
  justify-self:end;
  background:#f0ddd2;
  color:#171717;
  border-bottom-right-radius:4px;
}

.ai-message.agent{
  justify-self:start;
  background:#303c35;
  border-bottom-left-radius:4px;
}

.ai-summary{
  margin-top:22px;
  padding:18px;
  border-radius:15px;
  background:#d7e7de;
  color:#172019;
}

.ai-summary span{
  display:block;
  margin-bottom:7px;
  font-size:9px;
  letter-spacing:.14em;
  font-weight:950;
}


/* humanisation */

.human-section{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  align-items:center;
}

.human-photo-placeholder{
  aspect-ratio:4/5;
  border-radius:26px;
  background:#dedbd3;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#888;
  font-size:11px;
  letter-spacing:.15em;
  font-weight:900;
}

.human-copy h2{
  margin:18px 0 25px;
  font-size:clamp(48px,5.4vw,76px);
  line-height:.93;
  letter-spacing:-.06em;
}

.human-copy p{
  max-width:700px;
  font-size:17px;
  line-height:1.6;
}

.social-placeholder{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:26px;
}

.social-placeholder span{
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  font-size:13px;
  font-weight:850;
}


/* animations */

.reveal-section{
  animation:sectionIn .75s cubic-bezier(.2,.8,.2,1) both;
}

.float-card{
  animation:floatCard 5.5s ease-in-out infinite;
}

.entrance-card,
.example-mini,
.realisation-card,
.offer-benefits article,
.entrepreneur-grid article,
.agent-capabilities article{
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    filter .28s ease;
}

.entrance-card:hover,
.example-mini:hover,
.realisation-card:hover,
.offer-benefits article:hover,
.entrepreneur-grid article:hover,
.agent-capabilities article:hover{
  transform:translateY(-7px);
  box-shadow:0 22px 48px rgba(0,0,0,.09);
}

@keyframes sectionIn{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@keyframes floatCard{
  0%,100%{
    transform:translateY(0) rotate(.15deg);
  }
  50%{
    transform:translateY(-10px) rotate(-.15deg);
  }
}


/* mobile */

@media(max-width:980px){

  .human-section{
    grid-template-columns:1fr;
  }

  .agent-capabilities{
    grid-template-columns:1fr;
  }

  .client-link{
    margin-left:auto;
  }

}

@media(max-width:680px){

  .client-link{
    display:none;
  }

  .brand-logo img{
    max-width:90px;
  }

  .agent-section{
    padding-top:70px;
    padding-bottom:70px;
  }

  .agent-copy h2,
  .human-copy h2,
  .entrepreneur-intro h2{
    font-size:clamp(44px,13vw,64px);
    line-height:.95;
  }

  .agent-live-card{
    padding:20px;
  }

  .human-photo-placeholder{
    aspect-ratio:16/11;
  }

}

@media(prefers-reduced-motion:reduce){

  .float-card,
  .reveal-section{
    animation:none!important;
  }

  *{
    scroll-behavior:auto!important;
  }

}


.scroll-reveal{
  opacity:0;
  transform:translateY(16px);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.8,.2,1);
}

.scroll-reveal.is-visible{
  opacity:1;
  transform:none;
}

@media(prefers-reduced-motion:reduce){
  .scroll-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


.human-photo img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center;
  border-radius:26px;
}

@media(max-width:680px){
  .human-photo img{
    aspect-ratio:16/11;
  }
}


/* KAFK — portrait Nathaniel */

.human-name{
  margin-top:28px;
  font-size:20px !important;
}

.human-name strong{
  font-weight:900;
}

.human-direct{
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid rgba(0,0,0,.12);
  font-size:19px !important;
  font-weight:800;
}

.linkedin-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:24px;
  padding:10px 15px 10px 10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:#fff;
  color:#171717;
  text-decoration:none;
  font-size:14px;
  font-weight:850;
  transition:transform .2s ease, box-shadow .2s ease;
}

.linkedin-link:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.linkedin-icon{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:#0a66c2;
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:16px;
  font-weight:900;
  letter-spacing:-.08em;
}


/* ============================================================
   KAFK — RÉFÉRENCEMENT GOOGLE + CHATGPT
   ============================================================ */

.seo-home{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:start;

  padding-top:110px;
  padding-bottom:110px;
}

.seo-home-title h2{
  margin:18px 0 0;
  max-width:650px;
  font-size:clamp(54px,6vw,88px);
  line-height:.92;
  letter-spacing:-.065em;
  text-wrap:balance;
}

.seo-home-copy{
  padding:34px;
  border-radius:26px;
  background:#dce8ee;
}

.seo-home-copy p{
  max-width:680px;
  line-height:1.6;
}

.seo-home-copy .seo-lead{
  margin-top:0;
  font-size:22px;
  line-height:1.45;
  font-weight:800;
  letter-spacing:-.025em;
}

.seo-home-copy .text-link{
  margin-top:15px;
}


/* page comment ça marche */

.seo-detail{
  padding-top:120px;
  padding-bottom:120px;
}

.seo-detail-head{
  max-width:1000px;
}

.seo-detail-head h2{
  margin:18px 0 22px;
  font-size:clamp(58px,6.5vw,96px);
  line-height:.9;
  letter-spacing:-.07em;
  text-wrap:balance;
}

.seo-detail-head>p:last-child{
  max-width:700px;
  font-size:20px;
  line-height:1.55;
}

.seo-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:55px;
}

.seo-detail-grid article{
  min-height:330px;
  padding:28px;
  border-radius:24px;
}

.seo-detail-grid article:nth-child(1){
  background:#dbe7ee;
}

.seo-detail-grid article:nth-child(2){
  background:#dce9df;
}

.seo-detail-grid article:nth-child(3){
  background:#eedfd2;
}

.seo-detail-grid span{
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
}

.seo-detail-grid h3{
  margin:65px 0 14px;
  font-size:32px;
  letter-spacing:-.04em;
}

.seo-detail-grid p{
  color:#555;
  line-height:1.55;
}

.seo-detail-bottom{
  margin-top:16px;
  padding:36px;
  border-radius:24px;
  background:#171717;
  color:#fff;
}

.seo-detail-bottom p{
  max-width:950px;
  margin:0;
  font-size:20px;
  line-height:1.55;
}

.seo-detail-bottom .seo-honest{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.15);
  color:#bfc4c1;
  font-size:15px;
}


@media(max-width:900px){

  .seo-home{
    grid-template-columns:1fr;
    gap:30px;
  }

  .seo-detail-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:680px){

  .seo-home,
  .seo-detail{
    padding-top:70px;
    padding-bottom:70px;
  }

  .seo-home-title h2,
  .seo-detail-head h2{
    font-size:clamp(46px,13vw,64px);
  }

  .seo-home-copy{
    padding:24px;
  }

  .seo-home-copy .seo-lead{
    font-size:19px;
  }

  .seo-detail-grid article{
    min-height:260px;
  }

}


/* ============================================================
   KAFK — ESPACE PRIVÉ / FIX SEO / RESPIRATION
   ============================================================ */


/* ------------------------------------------------------------
   SEO HOME — force la bonne composition
   ------------------------------------------------------------ */

.seo-home{
  display:grid !important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important;
  gap:70px !important;
  align-items:start !important;

  padding-top:105px !important;
  padding-bottom:105px !important;
}

.seo-home-title{
  min-width:0;
}

.seo-home-title h2{
  margin:18px 0 0;
  max-width:620px;

  font-size:clamp(52px,5.6vw,82px) !important;
  line-height:.93 !important;
  letter-spacing:-.06em !important;
}

.seo-home-copy{
  display:block !important;

  padding:34px !important;
  border-radius:26px !important;

  background:#dce8ee !important;
}

.seo-home-copy .seo-lead{
  margin-top:0 !important;

  font-size:21px !important;
  font-weight:800 !important;
  line-height:1.45 !important;
}

.seo-home-copy p{
  line-height:1.6 !important;
}


/* ------------------------------------------------------------
   ESPACE PRIVÉ
   ------------------------------------------------------------ */

.private-space{
  position:relative;

  padding-top:115px;
  padding-bottom:115px;
}

.private-intro{
  max-width:930px;
}

.private-intro h2{
  margin:18px 0 24px;

  max-width:850px;

  font-size:clamp(54px,6vw,88px);
  line-height:.91;
  letter-spacing:-.065em;

  text-wrap:balance;
}

.private-intro>p:last-child{
  max-width:720px;

  font-size:19px;
  line-height:1.55;

  color:#555;
}

.private-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:13px;

  margin-top:48px;
}

.private-steps article{
  min-height:330px;

  display:flex;
  flex-direction:column;

  padding:27px;

  border-radius:24px;

  background:#fff;
  border:1px solid rgba(0,0,0,.06);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.private-steps article:nth-child(1){
  background:#eedfd3;
}

.private-steps article:nth-child(2){
  background:#dce8e1;
}

.private-steps article:nth-child(3){
  background:#dce6ed;
}

.private-steps article:hover{
  transform:translateY(-6px);

  box-shadow:
    0 22px 48px
    rgba(0,0,0,.08);
}

.private-steps>article>span{
  font-size:11px;
  font-weight:950;
}

.private-label{
  margin:50px 0 9px;

  font-size:10px !important;
  font-weight:950;
  letter-spacing:.14em;
}

.private-steps h3{
  margin:0 0 14px;

  font-size:29px;
  line-height:1.05;
  letter-spacing:-.04em;
}

.private-steps article>p:last-child{
  margin-top:auto;

  color:#555;
  line-height:1.5;
}


/* ------------------------------------------------------------
   PORTRAIT NATHANIEL
   ------------------------------------------------------------ */

.human-name em{
  font-family:Georgia,serif;
  font-size:1.1em;
  font-weight:400;
}

.human-direct{
  font-weight:400 !important;
}

.human-direct em{
  font-family:Georgia,serif;
  font-size:1.08em;
  line-height:1.5;
  font-weight:400;
}


/* ------------------------------------------------------------
   POURQUOI KAFK — BLOCS DÉCOLLÉS
   ------------------------------------------------------------ */

.ownership-block{
  margin-bottom:30px !important;
}

.ownership-block + section{
  margin-top:30px !important;
}

section.pastel-pink{
  border-radius:28px !important;
}


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

.private-cta{
  white-space:nowrap;
}


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

@media(max-width:900px){

  .seo-home{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }

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

}

@media(max-width:680px){

  .seo-home{
    padding-top:70px !important;
    padding-bottom:70px !important;
  }

  .seo-home-title h2,
  .private-intro h2{
    font-size:clamp(44px,13vw,62px) !important;
  }

  .seo-home-copy{
    padding:23px !important;
  }

  .private-space{
    padding-top:70px;
    padding-bottom:70px;
  }

  .private-steps article{
    min-height:265px;
  }

}


/* KAFK — respiration Pourquoi KAFK */

body:has(.ownership-block) .ownership-block{
  margin-bottom:36px !important;
}

body:has(.ownership-block) .ownership-block + section{
  margin-top:0 !important;
}

body:has(.ownership-block) section.pastel-pink{
  margin-top:36px !important;
  border-radius:28px !important;
}

body:has(.ownership-block) section.pastel-blue{
  margin-top:36px !important;
  border-radius:28px !important;
}

@media(max-width:680px){
  body:has(.ownership-block) .ownership-block{
    margin-bottom:22px !important;
  }

  body:has(.ownership-block) section.pastel-pink,
  body:has(.ownership-block) section.pastel-blue{
    margin-top:22px !important;
  }
}


/* KAFK — logo header légèrement agrandi */
.brand-logo img{
  max-width:128px !important;
  max-height:40px !important;
  width:auto;
  height:auto;
}

@media(max-width:680px){
  .brand-logo img{
    max-width:104px !important;
    max-height:34px !important;
  }
}


/* KAFK — logo header taille finale */
.brand-logo img{
  max-width:160px !important;
  max-height:46px !important;
  width:auto;
  height:auto;
}

@media(max-width:680px){
  .brand-logo img{
    max-width:122px !important;
    max-height:38px !important;
  }
}


/* ============================================================
   KAFK — HERO V2
   ============================================================ */

.home-hero{
  overflow:hidden;
}

.home-hero .hero-copy h1{
  max-width:760px;
  font-size:clamp(64px,7vw,104px);
  line-height:.88;
}

.home-hero .hero-copy h1 em{
  display:block;
  margin-top:8px;
  font-family:Georgia,serif;
  font-weight:400;
  font-size:.76em;
  line-height:.95;
}

.hero-tool-ai{
  position:relative;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.hero-tool-ai .mini-label{
  margin:0 0 16px 6px;
}

.request-chaos,
.request-summary{
  position:relative;
  padding:24px 26px !important;
  border-radius:22px !important;

  box-shadow:
    0 18px 45px rgba(0,0,0,.08);
}

.request-chaos{
  background:#f1dfd7 !important;
  transform:rotate(-1deg);
}

.request-summary{
  background:#d4e6dc !important;
  transform:rotate(.7deg);
}

.request-chaos span,
.request-summary span{
  display:block;
  margin-bottom:10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
}

.request-chaos strong{
  font-size:17px !important;
  line-height:1.48 !important;
  font-weight:700 !important;
}

.request-summary strong{
  font-size:20px !important;
  line-height:1.35 !important;
}

.request-summary small{
  display:block;
  margin-top:12px;
  font-size:13px;
  line-height:1.4;
  color:#53645b;
}

.ai-arrow{
  margin:3px 0 6px;
  padding:6px 0 !important;

  font-size:34px !important;

  animation:aiArrowFloat 1.9s ease-in-out infinite;
}

@keyframes aiArrowFloat{
  0%,100%{
    transform:translateY(0);
    opacity:.75;
  }
  50%{
    transform:translateY(5px);
    opacity:1;
  }
}

.hero-tool-ai::before{
  content:"";
  position:absolute;

  width:230px;
  height:230px;

  right:-70px;
  top:-50px;

  border-radius:50%;
  background:#d8e8df;

  filter:blur(35px);
  opacity:.5;

  pointer-events:none;
}

@media(max-width:980px){

  .hero-tool-ai{
    max-width:700px;
  }

}

@media(max-width:680px){

  .home-hero .hero-copy h1{
    font-size:clamp(50px,15vw,72px);
  }

  .home-hero .hero-copy h1 em{
    font-size:.8em;
  }

  .request-chaos,
  .request-summary{
    padding:20px !important;
    transform:none;
  }

  .request-chaos strong{
    font-size:16px !important;
  }

  .request-summary strong{
    font-size:18px !important;
  }

}


/* KAFK — HERO FINAL */

.home-hero .hero-copy h1{
  max-width:760px;
  font-size:clamp(66px,7vw,106px);
  line-height:.89;
  letter-spacing:-.07em;
}

.home-hero .hero-copy h1 em{
  display:block;
  margin-top:10px;
  max-width:720px;

  font-family:Georgia,serif;
  font-size:.68em;
  font-weight:400;
  line-height:1;
  letter-spacing:-.045em;
}

.hero-tool-ai{
  background:transparent !important;
  box-shadow:none !important;
}

.request-chaos{
  transform:rotate(-.8deg);
}

.request-summary{
  transform:rotate(.35deg);
}

.ai-summary-lines{
  display:grid;
  gap:7px;
}

.ai-summary-lines strong{
  display:block;
  font-size:16px !important;
  line-height:1.35 !important;
  font-weight:750 !important;
}

@media(max-width:680px){

  .home-hero .hero-copy h1{
    font-size:clamp(50px,14vw,70px);
  }

  .home-hero .hero-copy h1 em{
    font-size:.78em;
  }

  .ai-summary-lines strong{
    font-size:15px !important;
  }

}


/* ============================================================
   KAFK — COMMENT ÇA MARCHE V2
   ============================================================ */

.page-comment .unified-hero{
  min-height:500px;
  padding:65px 58px !important;

  display:flex;
  flex-direction:column;
  justify-content:center;

  border-radius:30px;
  overflow:hidden;
}

.page-comment .unified-hero h1{
  max-width:1000px;

  margin:20px 0 0;

  font-size:clamp(68px,7vw,108px) !important;
  line-height:.88 !important;
  letter-spacing:-.075em !important;

  text-wrap:balance;
}

.page-comment .unified-hero h1 em{
  display:block;

  margin-top:7px;

  font-family:Georgia,serif;
  font-size:.72em;
  font-weight:400;
  font-style:italic;

  line-height:1;
  letter-spacing:-.045em;
}

.page-comment .unified-hero>p:last-child{
  max-width:660px;

  margin-top:30px;

  font-size:19px;
  line-height:1.5;
}


/* 3 étapes */

.page-comment .process-grid{
  gap:14px;
}

.page-comment .process-grid article{
  min-height:350px;

  padding:29px;

  border:0;
  border-radius:26px;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.page-comment .process-grid article:nth-child(1){
  background:#efd9ca !important;
}

.page-comment .process-grid article:nth-child(2){
  background:#d3e3d9 !important;
}

.page-comment .process-grid article:nth-child(3){
  background:#d2e2e9 !important;
}

.page-comment .process-grid article:hover{
  transform:translateY(-6px);

  box-shadow:
    0 20px 45px
    rgba(0,0,0,.08);
}

.page-comment .process-grid article span{
  font-size:11px;
  font-weight:950;
}

.page-comment .process-grid h2{
  margin-top:72px;

  max-width:330px;

  font-size:34px;
  line-height:1;
  letter-spacing:-.045em;
}

.page-comment .process-grid p{
  color:#505651;

  line-height:1.55;
}


/* section éléments à fournir */

.page-comment .split{
  padding-left:55px;
  padding-right:55px;

  border-radius:28px;

  background:#fff;
}

.page-comment .check-list span{
  transition:
    padding-left .2s ease,
    opacity .2s ease;
}

.page-comment .check-list span:hover{
  padding-left:10px;
}


/* respiration */

.page-comment main>section + section{
  margin-top:26px;
}


/* SEO Google + ChatGPT */

.page-comment .seo-detail-grid article{
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.page-comment .seo-detail-grid article:hover{
  transform:translateY(-6px);

  box-shadow:
    0 20px 45px
    rgba(0,0,0,.08);
}


/* mobile */

@media(max-width:800px){

  .page-comment .unified-hero{
    min-height:auto;

    padding:48px 23px !important;
  }

  .page-comment .unified-hero h1{
    font-size:clamp(50px,14vw,72px) !important;
  }

  .page-comment .unified-hero h1 em{
    font-size:.8em;
  }

  .page-comment .split{
    padding-left:23px;
    padding-right:23px;
  }

}


/* ============================================================
   KAFK — TARIFS V3
   ============================================================ */


/* HERO */

.page-tarifs .tariff-hero{
  min-height:460px;

  padding:62px 58px !important;

  display:flex;
  flex-direction:column;
  justify-content:center;

  background:#f0d7c5 !important;
  border-radius:30px;
}

.page-tarifs .tariff-hero h1{
  max-width:900px;

  margin:20px 0 0;

  font-size:clamp(68px,7vw,108px) !important;
  line-height:.87 !important;
  letter-spacing:-.075em !important;
}

.page-tarifs .tariff-hero h1 em{
  display:block;

  margin-top:7px;

  font-family:Georgia,serif;
  font-size:.72em;
  font-weight:400;
  font-style:italic;

  line-height:1;
}

.page-tarifs .tariff-hero>p:last-child{
  margin-top:28px;

  font-size:20px !important;
}

.page-tarifs .tariff-hero>p:last-child strong{
  font-weight:900;
}


/* OFFRE */

.tariff-main{
  display:grid;
  grid-template-columns:.72fr 1.28fr;

  gap:14px;
}

.tariff-price-card,
.tariff-included{
  border-radius:28px;
}

.tariff-price-card{
  min-height:510px;

  padding:38px;

  display:flex;
  flex-direction:column;

  background:#171717;
  color:#fff;
}

.tariff-price{
  margin-top:65px;

  font-size:clamp(72px,7vw,112px);
  font-weight:900;
  line-height:.85;
  letter-spacing:-.075em;
}

.tariff-price small{
  font-size:.25em;
  letter-spacing:0;
  vertical-align:.25em;
}

.tariff-payment{
  color:#aaa;
}

.tariff-cta{
  width:max-content;
  margin-top:auto;

  background:#fff !important;
  color:#171717 !important;
}

.tariff-included{
  padding:38px;

  background:#d6e5dc;
}

.tariff-line{
  min-height:59px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:25px;

  border-bottom:1px solid rgba(0,0,0,.12);
}

.tariff-line:first-of-type{
  margin-top:40px;
}

.tariff-line span{
  font-size:17px;
}

.tariff-line b{
  white-space:nowrap;

  font-size:12px;
  letter-spacing:.04em;
}

.tariff-line.highlight{
  margin-top:11px;
  padding:0 16px;

  border:0;
  border-radius:14px;

  background:#fff;
}

.tariff-line.highlight b{
  font-size:14px;
}


/* POURQUOI 990 */

.tariff-why{
  padding:80px 55px !important;

  border-radius:30px;

  background:#d5e4eb;
}

.tariff-why-head{
  max-width:880px;
}

.tariff-why-head h2{
  margin:18px 0 22px;

  font-size:clamp(50px,5.4vw,80px);
  line-height:.92;
  letter-spacing:-.06em;

  text-wrap:balance;
}

.tariff-why-head h2 em{
  display:block;

  margin-top:8px;

  font-family:Georgia,serif;
  font-size:.78em;
  font-weight:400;
  line-height:1;
}

.tariff-why-head>p:last-child{
  max-width:700px;

  font-size:18px;
  line-height:1.55;
}

.tariff-why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:12px;

  margin-top:46px;
}

.tariff-why-grid article{
  min-height:290px;

  padding:25px;

  border-radius:22px;

  background:#fff;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.tariff-why-grid article:nth-child(1){
  background:#efd9ca;
}

.tariff-why-grid article:nth-child(2){
  background:#d8e7de;
}

.tariff-why-grid article:nth-child(3){
  background:#ecd8e3;
}

.tariff-why-grid article:hover{
  transform:translateY(-6px);

  box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.tariff-why-grid span{
  font-size:10px;
  font-weight:950;
}

.tariff-why-grid h3{
  margin:58px 0 12px;

  font-size:26px;
  line-height:1.05;
  letter-spacing:-.04em;
}

.tariff-why-grid p{
  color:#555;
  line-height:1.5;
}


/* COULEURS PLUS VIVANTES SUR LE RESTE */

.page-tarifs .included-card.green{
  background:#cfe1d5 !important;
}

.page-tarifs .included-card.blue{
  background:#cadfe8 !important;
}

.page-tarifs .module-grid article:nth-child(1){
  background:#efd6c3 !important;
}

.page-tarifs .module-grid article:nth-child(2){
  background:#cee0d5 !important;
}

.page-tarifs .module-grid article:nth-child(3){
  background:#cbdee8 !important;
}

.page-tarifs .module-grid article:nth-child(4){
  background:#edd3e1 !important;
}


/* RESPIRATION */

.page-tarifs main>section + section{
  margin-top:28px;
}


/* MOBILE */

@media(max-width:850px){

  .tariff-main{
    grid-template-columns:1fr;
  }

  .tariff-why-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:680px){

  .page-tarifs .tariff-hero{
    min-height:auto;
    padding:46px 23px !important;
  }

  .page-tarifs .tariff-hero h1{
    font-size:clamp(50px,14vw,70px) !important;
  }

  .tariff-price-card{
    min-height:400px;
  }

  .tariff-included{
    padding:25px;
  }

  .tariff-line{
    align-items:flex-start;
    flex-direction:column;

    gap:5px;

    padding:15px 0;
  }

  .tariff-line.highlight{
    padding:15px;
  }

  .tariff-why{
    padding:55px 23px !important;
  }

}


/* ============================================================
   KAFK — RÉALISATIONS HERO
   ============================================================ */

.realisations-hero{
  min-height:520px;

  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:60px;
  align-items:center;

  padding:62px 58px !important;

  border-radius:30px;

  background:#cfdfe8 !important;

  overflow:hidden;
}

.realisations-hero-copy{
  min-width:0;
}

.realisations-hero h1{
  max-width:900px;

  margin:20px 0 0;

  font-size:clamp(64px,6.6vw,102px) !important;
  line-height:.88 !important;
  letter-spacing:-.07em !important;

  text-wrap:balance;
}

.realisations-hero h1 em{
  display:block;

  margin-top:8px;

  font-family:Georgia,serif;
  font-size:.68em;
  font-weight:400;
  line-height:1;
  letter-spacing:-.04em;
}

.realisations-hero-copy>p:last-child{
  max-width:680px;

  margin-top:28px;

  font-size:18px;
  line-height:1.55;

  color:#47535a;
}

.realisations-hero-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;

  transform:rotate(1deg);
}

.realisations-hero-actions span{
  min-height:120px;

  display:flex;
  align-items:flex-end;

  padding:18px;

  border-radius:20px;

  font-size:11px;
  font-weight:950;
  letter-spacing:.13em;

  box-shadow:0 18px 38px rgba(0,0,0,.06);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.realisations-hero-actions span:nth-child(1){
  background:#efd7c5;
}

.realisations-hero-actions span:nth-child(2){
  background:#d3e3d9;
}

.realisations-hero-actions span:nth-child(3){
  background:#ecd4df;
}

.realisations-hero-actions span:nth-child(4){
  background:#e5ddd0;
}

.realisations-hero-actions span:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 45px rgba(0,0,0,.09);
}

@media(max-width:900px){

  .realisations-hero{
    grid-template-columns:1fr;
    gap:35px;
  }

}

@media(max-width:680px){

  .realisations-hero{
    min-height:auto;

    padding:46px 23px !important;
  }

  .realisations-hero h1{
    font-size:clamp(48px,13vw,68px) !important;
  }

  .realisations-hero-actions{
    grid-template-columns:1fr 1fr;
    transform:none;
  }

  .realisations-hero-actions span{
    min-height:90px;
  }

}


/* ============================================================
   KAFK — POURQUOI KAFK V3
   ============================================================ */


/* HERO */

.why-hero{
  min-height:520px;

  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:65px;
  align-items:center;

  padding:62px 58px !important;

  overflow:hidden;

  border-radius:30px;

  background:#eadbce !important;
}

.why-hero-copy{
  min-width:0;
}

.why-hero h1{
  max-width:900px;

  margin:20px 0 0;

  font-size:clamp(64px,6.6vw,102px) !important;
  line-height:.88 !important;
  letter-spacing:-.07em !important;

  text-wrap:balance;
}

.why-hero h1 em{
  display:block;

  margin-top:8px;

  font-family:Georgia,serif;
  font-size:.7em;
  font-weight:400;
  line-height:1;
  letter-spacing:-.04em;
}

.why-hero-copy>p:last-child{
  max-width:650px;

  margin-top:28px;

  font-size:18px;
  line-height:1.55;

  color:#5b514a;
}


/* mini carte droite hero */

.why-hero-side{
  position:relative;

  padding:30px;

  border-radius:25px;

  background:#fff;

  box-shadow:
    0 24px 60px
    rgba(65,50,40,.08);

  animation:whyFloat 5.5s ease-in-out infinite;
}

.why-hero-side>span{
  display:block;

  margin-bottom:55px;

  font-size:10px;
  font-weight:950;
  letter-spacing:.15em;
}

.why-hero-side strong{
  display:block;

  max-width:430px;

  font-size:33px;
  line-height:1.04;
  letter-spacing:-.045em;
}

.why-hero-side strong em{
  display:block;

  margin-top:5px;

  font-family:Georgia,serif;
  font-weight:400;
  line-height:1.05;

  color:#527363;
}

.why-hero-side>p{
  margin-top:28px;
  margin-bottom:0;

  color:#666;
}

@keyframes whyFloat{
  0%,100%{
    transform:translateY(0) rotate(.15deg);
  }

  50%{
    transform:translateY(-8px) rotate(-.15deg);
  }
}


/* INTERLOCUTEUR */

.page-pourquoi .split h2 em{
  display:block;

  margin-top:6px;

  font-family:Georgia,serif;
  font-size:.65em;
  font-weight:400;
  line-height:1;

  color:#66776e;
}


/* LIBERTÉ */

.why-freedom{
  padding:68px 50px !important;

  border-radius:30px !important;

  background:#24372e !important;
  color:#fff;
}

.why-freedom-head{
  max-width:920px;
}

.why-freedom-head h2{
  margin:18px 0 20px;

  font-size:clamp(50px,5.5vw,82px);
  line-height:.91;
  letter-spacing:-.06em;

  text-wrap:balance;
}

.why-freedom-head h2 em{
  display:block;

  margin-top:6px;

  font-family:Georgia,serif;
  font-weight:400;
  line-height:1;

  color:#bad0c4;
}

.why-freedom-head>p:last-child{
  max-width:700px;

  color:#d1dad5;

  font-size:17px;
  line-height:1.55;
}

.why-freedom .ownership-points{
  margin-top:48px;
}

.why-freedom .ownership-points article{
  border:0 !important;

  color:#171717;

  box-shadow:none;
}

.why-freedom .ownership-points article:nth-child(1){
  background:#efd8c6 !important;
}

.why-freedom .ownership-points article:nth-child(2){
  background:#d5e5db !important;
}

.why-freedom .ownership-points article:nth-child(3){
  background:#d4e2e9 !important;
}

.why-freedom .ownership-points article p{
  color:#555 !important;
}


/* TECHNOLOGIE */

.why-tech{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;

  align-items:center;

  padding:75px 55px !important;

  border-radius:30px;

  background:#efd7e4;
}

.why-tech h2{
  margin:18px 0 0;

  font-size:clamp(52px,5.6vw,82px);
  line-height:.9;
  letter-spacing:-.06em;

  text-wrap:balance;
}

.why-tech h2 em{
  display:block;

  margin-top:7px;

  font-family:Georgia,serif;
  font-size:.72em;
  font-weight:400;
  line-height:1;

  color:#69545f;
}

.why-tech-text p{
  max-width:650px;

  font-size:18px;
  line-height:1.55;
}


/* PLUS DE VIE SUR LA PAGE */

.page-pourquoi .ownership-points article,
.page-pourquoi .human-section,
.page-pourquoi .why-tech{
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.page-pourquoi .ownership-points article:hover{
  transform:translateY(-6px);

  box-shadow:
    0 20px 45px
    rgba(0,0,0,.10);
}


/* RESPIRATION */

.page-pourquoi main>section + section{
  margin-top:30px !important;
}


/* MOBILE */

@media(max-width:900px){

  .why-hero,
  .why-tech{
    grid-template-columns:1fr;
  }

}

@media(max-width:680px){

  .why-hero{
    min-height:auto;

    padding:46px 23px !important;
  }

  .why-hero h1{
    font-size:clamp(48px,13vw,68px) !important;
  }

  .why-hero-side{
    padding:23px;
  }

  .why-hero-side strong{
    font-size:28px;
  }

  .why-freedom,
  .why-tech{
    padding:52px 23px !important;
  }

  .why-freedom-head h2,
  .why-tech h2{
    font-size:clamp(44px,12vw,62px);
  }

}

@media(prefers-reduced-motion:reduce){

  .why-hero-side{
    animation:none;
  }

}


/* ============================================================
   KAFK — POURQUOI KAFK : CENTRAGE + COULEURS
   ============================================================ */

.why-hero{
  min-height:500px !important;
  align-items:center !important;

  background:#f1d7c5 !important;
}

.why-hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.why-hero-copy>p:last-child{
  max-width:620px;
}

.why-hero-side{
  align-self:center !important;

  padding:27px 30px !important;

  background:#fffaf6 !important;

  transform:translateY(-18px);

  box-shadow:
    0 22px 55px
    rgba(90,58,38,.09);
}

.why-hero-side>span{
  margin-bottom:34px !important;

  color:#6d5143;
}

.why-hero-side strong{
  max-width:420px;

  font-size:31px !important;
  line-height:1.02 !important;
}

.why-hero-side strong em{
  margin-top:3px !important;

  color:#5f806f !important;
}

.page-pourquoi .split h2 em{
  color:#6f897b !important;
}

.why-freedom{
  background:#29473a !important;
}

.why-tech{
  background:#f0d1df !important;
}

@media(max-width:900px){
  .why-hero-side{
    transform:none;
  }
}


/* KAFK — petits correctifs 17h34 */

/* Tarif : remplacer le noir dur par un vert pastel */
.tariff-price-card{
  background:#c9ded2 !important;
  color:#17231d !important;
}

.tariff-price-card .eyebrow{
  color:#314a3d !important;
}

.tariff-price{
  color:#17231d !important;
}

.tariff-payment{
  color:#56685f !important;
}

.tariff-price-card .tariff-cta{
  background:#171717 !important;
  color:#fff !important;
}

/* Pourquoi KAFK : remonter légèrement l'accroche */
.why-hero-side strong{
  transform:translateY(-10px);
}



/* KAFK — couleur bloc prix finale */

.tariff-price-card{
  background:#486457 !important;
  color:#fffaf4 !important;
}

.tariff-price-card .eyebrow{
  color:#eef5f0 !important;
}

.tariff-price{
  color:#fffaf4 !important;
}

.tariff-payment{
  color:#d8e4dd !important;
}

.tariff-price-card .tariff-cta{
  background:#fff7ef !important;
  color:#1c2923 !important;
}

.tariff-price-card .tariff-cta:hover{
  background:#ffffff !important;
}



/* ============================================================
   KAFK — FAQ V3
   ============================================================ */

.faq-hero{
  min-height:470px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:62px 58px !important;

  border-radius:30px;

  background:#efd3e1 !important;
}

.faq-hero h1{
  max-width:1000px;

  margin:20px 0 0;

  font-size:clamp(64px,6.6vw,102px) !important;
  line-height:.88 !important;
  letter-spacing:-.07em !important;

  text-wrap:balance;
}

.faq-hero h1 em{
  display:block;

  margin-top:8px;

  font-family:Georgia,serif;
  font-size:.7em;
  font-weight:400;
  line-height:1;

  color:#6d5a64;
}


/* FAQ cards */

.page-faq .faq{
  max-width:1100px;
}

.page-faq .faq details{
  margin-bottom:12px;

  padding:24px 26px;

  border:0 !important;
  border-radius:20px;

  background:#fff;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.page-faq .faq details:nth-child(4n+1){
  background:#efd9ca;
}

.page-faq .faq details:nth-child(4n+2){
  background:#d5e5db;
}

.page-faq .faq details:nth-child(4n+3){
  background:#d3e2e9;
}

.page-faq .faq details:nth-child(4n){
  background:#ecd6e2;
}

.page-faq .faq details:hover{
  transform:translateX(5px);
  box-shadow:0 15px 35px rgba(0,0,0,.06);
}

.page-faq .faq summary{
  cursor:pointer;

  font-size:23px;
  font-weight:850;
  letter-spacing:-.025em;
}

.page-faq .faq details p{
  max-width:850px;

  font-size:16px;
  line-height:1.6;

  color:#4f5551;
}

.page-faq main>section + section{
  margin-top:28px;
}

@media(max-width:680px){

  .faq-hero{
    min-height:auto;
    padding:46px 23px !important;
  }

  .faq-hero h1{
    font-size:clamp(48px,13vw,68px) !important;
  }

  .page-faq .faq details{
    padding:20px;
  }

  .page-faq .faq summary{
    font-size:20px;
  }

}


/* KAFK — conditions services évolutifs */

.service-evolution-note{
  max-width:760px;
  margin:18px 0 0;
  padding:15px 17px;

  border-radius:14px;
  background:rgba(255,255,255,.55);

  font-size:13px;
  line-height:1.5;
  color:#59615c;
}



/* ============================================================
   KAFK — animation démonstration Agent IA
   ============================================================ */

.client-typing{
  display:block;
  min-height:7.5em;
  white-space:normal;
}

.client-typing::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:3px;
  vertical-align:-.08em;
  background:currentColor;
  animation:typingCursor .7s steps(1) infinite;
}

.client-typing.typing-done::after{
  opacity:0;
  animation:none;
}

.ai-arrow{
  opacity:.18;
  transform:translateY(-4px);
  transition:
    opacity .35s ease,
    transform .35s ease;
}

.ai-arrow.is-active{
  opacity:1;
  animation:aiArrowPulse .75s ease 2;
}

.ai-summary-line{
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity .38s ease,
    transform .38s ease;
}

.ai-summary-line.is-visible{
  opacity:1;
  transform:none;
}

.request-summary{
  transition:
    box-shadow .4s ease,
    transform .4s ease;
}

.request-summary.is-processing{
  box-shadow:
    0 22px 55px rgba(59,93,75,.14);
}

@keyframes typingCursor{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

@keyframes aiArrowPulse{
  0%{
    transform:translateY(-4px);
  }
  50%{
    transform:translateY(7px);
  }
  100%{
    transform:translateY(0);
  }
}

@media(prefers-reduced-motion:reduce){

  .client-typing::after{
    display:none;
  }

  .ai-arrow,
  .ai-summary-line{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }

}


.nav-create-space{
  color:#4f4f4f;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
}

.nav-create-space:hover{
  color:#171717;
}

@media(max-width:900px){
  .nav-create-space{
    display:none;
  }
}

/* KAFK PAYMENT AREA — START */

.payment-launch{
  display:grid;
  grid-template-columns:minmax(320px,.75fr) minmax(580px,1.25fr);
  gap:72px;
  align-items:start;
  padding:58px;
  background:#fff;
  color:#171717;
  border-radius:30px;
}

.payment-launch > div:first-child{
  padding-top:28px;
}

.payment-launch h2{
  color:#171717;
}

.payment-launch > div:first-child p{
  color:#666;
  max-width:520px;
}

.launch-payment{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.launch-price{
  align-self:flex-end;
  margin:0 0 8px;
  padding:18px 22px;
  border-radius:18px;
  background:#f1dfd3;
  text-align:right;
}

.launch-price strong{
  display:block;
  color:#171717;
  font-size:48px;
  line-height:.95;
  letter-spacing:-.045em;
}

.launch-price strong small{
  font-size:.32em;
  vertical-align:.22em;
}

.launch-price span{
  display:block;
  margin-top:8px;
  color:#6c625d;
  font-size:14px;
}

.bank-pending{
  padding:30px 32px;
  border-radius:24px;
  background:#dce9e1;
  color:#171717;
}

.bank-pending-label{
  margin-bottom:8px;
  color:#486457;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
}

.bank-pending > strong{
  display:block;
  margin-bottom:14px;
  font-size:32px;
  line-height:1;
}

.bank-pending p{
  margin:0;
  max-width:650px;
  font-size:16px;
  line-height:1.65;
}

.bank-pending-note{
  margin-top:14px !important;
  color:#5f6963;
}

.bank-email{
  color:#29473a;
  font-weight:900;
  text-decoration:underline;
  text-underline-offset:3px;
}

.payment-alternative{
  margin:8px 0 0;
  color:#666;
  font-size:14px;
}

.stripe-button{
  align-self:flex-start;
  width:auto;
  min-width:380px;
  min-height:52px;
  padding:0 28px;
  border:0;
  border-radius:999px;
  background:#171717;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

.stripe-security{
  margin:0;
  color:#777;
  font-size:12px;
}

.payment-choice-title{
  margin:6px 0 0;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.payment-choice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.payment-method-card{
  min-width:0;
  padding:28px;
  border-radius:24px;
  border:0;
}

.bank-method{
  background:#dce9e1;
  color:#171717;
}

.stripe-method{
  background:#e6edf2;
  color:#171717;
}

.payment-kicker{
  display:block;
  margin-bottom:24px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
}

.payment-method-card > strong{
  display:block;
  font-size:24px;
  line-height:1.08;
}

.payment-method-card p{
  margin:14px 0 24px;
  font-size:15px;
  line-height:1.6;
}

.bank-button{
  width:100%;
  min-height:50px;
  border:0;
  border-radius:999px;
  background:#29473a;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

@media(max-width:1000px){

  .payment-launch{
    grid-template-columns:1fr;
    gap:32px;
    padding:38px 30px;
  }

  .payment-launch > div:first-child{
    padding-top:0;
  }

  .launch-price{
    align-self:flex-start;
    text-align:left;
  }

}

@media(max-width:700px){

  .payment-launch{
    padding:26px 20px;
  }

  .payment-choice-grid{
    grid-template-columns:1fr;
  }

  .stripe-button{
    width:100%;
    min-width:0;
  }

  .bank-pending{
    padding:24px;
  }

}

/* KAFK PAYMENT AREA — END */



.kafk-example-price-proof{
  max-width:760px;
  margin:18px 0 34px;
  color:#666;
  font-size:16px;
  line-height:1.6;
}

.kafk-example-price-proof strong{
  color:#171717;
}

/* KAFK SUPPORT PRICING — START */

.kafk-support{
  max-width:1180px;
  margin:88px auto;
  padding:0 24px;
  color:#252525;
}

.kafk-support__intro{
  max-width:800px;
  margin:0 auto 44px;
  text-align:center;
}

.kafk-support__intro .eyebrow{
  margin-bottom:14px;
}

.kafk-support__intro h2{
  margin:0 0 18px;
  font-size:clamp(2.2rem,4vw,3.5rem);
  line-height:1.05;
  letter-spacing:-.045em;
}

.kafk-support__intro h2 em{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}

.kafk-support__intro > p:last-child{
  max-width:720px;
  margin:0 auto;
  color:#666;
  font-size:1.05rem;
  line-height:1.7;
}

.kafk-support__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}

.kafk-support__card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:32px 28px;
  border-radius:24px;
}

.kafk-support__card--included{
  background:#dce9e1;
}

.kafk-support__card--single{
  background:#f1dfd3;
}

.kafk-support__card--custom{
  background:#e7e2f5;
}

.kafk-support__badge{
  align-self:flex-start;
  display:inline-flex;
  margin-bottom:26px;
  padding:7px 12px;
  border-radius:999px;
  background:#fffaf4;
  color:#486457;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.kafk-support__badge--warm{
  color:#a54c31;
}

.kafk-support__badge--purple{
  color:#645b88;
}

.kafk-support__card h3{
  margin:0 0 12px;
  font-size:1.45rem;
  line-height:1.12;
  letter-spacing:-.025em;
}

.kafk-support__price{
  margin:0 0 22px;
  font-size:1.05rem;
  font-weight:900;
  line-height:1.35;
}

.kafk-support__card p,
.kafk-support__card li{
  font-size:.96rem;
  line-height:1.6;
}

.kafk-support__card > p:last-child{
  margin-top:auto;
  padding-top:10px;
}

.kafk-support__card ul{
  margin:18px 0 24px;
  padding-left:20px;
}

.kafk-support__card li + li{
  margin-top:6px;
}

.kafk-support__notice{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:24px;
  padding:20px 24px;
  border-radius:18px;
  background:#f6f3ed;
  text-align:center;
  line-height:1.55;
}

.kafk-support__notice strong{
  font-weight:900;
}

@media(max-width:900px){

  .kafk-support{
    margin:64px auto;
  }

  .kafk-support__grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:600px){

  .kafk-support{
    padding:0 18px;
  }

  .kafk-support__card{
    padding:26px 22px;
  }

  .kafk-support__intro{
    text-align:left;
  }

  .kafk-support__intro > p:last-child{
    margin:0;
  }

  .kafk-support__notice{
    text-align:left;
    justify-content:flex-start;
  }

}

/* KAFK SUPPORT PRICING — END */

/* KAFK CMS BLOG — START */

.kafk-client-blog-access{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:32px;
  background:#e7e2f5;
}

.kafk-client-blog-copy h2{
  margin:4px 0 8px;
}

.kafk-client-blog-copy p:last-child{
  margin:0;
  max-width:650px;
}

.kafk-client-blog-button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 24px;
  border-radius:999px;
  background:#171717;
  color:#fff;
  text-decoration:none;
  font-weight:900;
}


/* MANAGER */

.kafk-blog-manager-page{
  margin:0;
  background:#f7f4ee;
  color:#171717;
}

.kafk-blog-topbar{
  max-width:1240px;
  margin:0 auto;
  padding:26px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.kafk-blog-brand{
  color:#e6532f;
  text-decoration:none;
  font-size:30px;
  font-weight:900;
}

.kafk-blog-back{
  color:#555;
  text-decoration:none;
  font-weight:700;
}

.kafk-blog-manager{
  max-width:1240px;
  margin:0 auto;
  padding:30px 24px 90px;
}

.kafk-blog-hero{
  max-width:800px;
  margin-bottom:48px;
}

.kafk-blog-hero h1{
  margin:8px 0 16px;
  font-size:clamp(2.7rem,6vw,5rem);
  line-height:.95;
  letter-spacing:-.055em;
}

.kafk-blog-hero h1 em{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}

.kafk-blog-hero > p:last-child{
  max-width:680px;
  color:#666;
  font-size:18px;
  line-height:1.6;
}

.kafk-blog-flash{
  margin-bottom:24px;
  padding:16px 20px;
  border-radius:16px;
  background:#dce9e1;
  font-weight:800;
}

.kafk-blog-flash--error{
  background:#f1dfd3;
}

.kafk-blog-layout{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:24px;
  align-items:start;
}

.kafk-blog-editor,
.kafk-blog-list{
  padding:32px;
  border-radius:28px;
  background:#fff;
}

.kafk-blog-editor h2,
.kafk-blog-list h2{
  margin:8px 0 26px;
  font-size:32px;
  letter-spacing:-.04em;
}

.kafk-blog-form{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.kafk-blog-form label > span:first-child{
  display:block;
  margin-bottom:8px;
  font-weight:900;
}

.kafk-blog-form input[type="text"],
.kafk-blog-form textarea,
.kafk-blog-form input[type="file"]{
  width:100%;
  border:1px solid #dedbd5;
  border-radius:16px;
  background:#faf9f6;
  font:inherit;
}

.kafk-blog-form input[type="text"]{
  min-height:52px;
  padding:0 16px;
}

.kafk-blog-form textarea{
  padding:16px;
  resize:vertical;
  line-height:1.6;
}

.kafk-blog-form input[type="file"]{
  padding:13px;
}

.kafk-blog-form small{
  display:block;
  margin-top:7px;
  color:#777;
}

.kafk-blog-current-image{
  overflow:hidden;
  border-radius:18px;
  background:#f6f3ed;
}

.kafk-blog-current-image img{
  display:block;
  width:100%;
  max-height:250px;
  object-fit:cover;
}

.kafk-blog-current-image span{
  display:block;
  padding:9px 12px;
  color:#777;
  font-size:12px;
}

.kafk-blog-status-choice{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.kafk-blog-status-choice label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:17px;
  border-radius:17px;
  background:#f6f3ed;
  cursor:pointer;
}

.kafk-blog-status-choice strong{
  display:block;
  margin-bottom:3px;
}

.kafk-blog-save{
  min-height:52px;
  border:0;
  border-radius:999px;
  background:#171717;
  color:#fff;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}

.kafk-blog-cancel{
  text-align:center;
  color:#666;
}

.kafk-blog-list-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.kafk-blog-new{
  padding:11px 16px;
  border-radius:999px;
  background:#e7e2f5;
  color:#171717;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
}

.kafk-blog-empty{
  padding:28px;
  border-radius:20px;
  background:#f6f3ed;
}

.kafk-blog-empty p{
  margin-bottom:0;
  color:#666;
  line-height:1.55;
}

.kafk-blog-articles{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.kafk-blog-article-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  padding:20px;
  border-radius:20px;
  background:#f7f4ee;
}

.kafk-blog-state{
  display:inline-block;
  margin-bottom:8px;
  padding:5px 9px;
  border-radius:999px;
  background:#f1dfd3;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.kafk-blog-state--published{
  background:#dce9e1;
}

.kafk-blog-article-main h3{
  margin:0 0 7px;
  font-size:20px;
}

.kafk-blog-article-main p{
  margin:0;
  color:#666;
  line-height:1.5;
}

.kafk-blog-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.kafk-blog-actions a,
.kafk-blog-actions button{
  border:0;
  background:none;
  color:#555;
  text-decoration:underline;
  cursor:pointer;
  font:inherit;
  font-size:13px;
}

.kafk-blog-actions button{
  color:#9b4432;
}


@media(max-width:900px){

  .kafk-client-blog-access{
    align-items:flex-start;
    flex-direction:column;
  }

  .kafk-blog-layout{
    grid-template-columns:1fr;
  }

}

@media(max-width:600px){

  .kafk-blog-manager{
    padding-left:18px;
    padding-right:18px;
  }

  .kafk-blog-editor,
  .kafk-blog-list{
    padding:24px 20px;
  }

  .kafk-blog-status-choice{
    grid-template-columns:1fr;
  }

  .kafk-blog-article-row{
    grid-template-columns:1fr;
  }

  .kafk-blog-actions{
    align-items:flex-start;
    flex-direction:row;
  }

}

/* KAFK CMS BLOG — END */


/* KAFK — HERO SENSIBLE 2026 */

.hero-sense{
  position:relative;
  min-height:500px;
  width:100%;
  overflow:hidden;
  border-radius:34px;
  background:
    radial-gradient(circle at 72% 22%, rgba(241,223,215,.92), transparent 30%),
    radial-gradient(circle at 24% 75%, rgba(212,230,220,.95), transparent 34%),
    rgba(255,255,255,.42);
}

.sense-center{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:min(310px,68%);
  padding:34px 30px;
  transform:translate(-50%,-50%) rotate(-1deg);
  border-radius:28px;
  background:rgba(255,255,255,.84);
  box-shadow:0 28px 70px rgba(0,0,0,.08);
  backdrop-filter:blur(8px);
}

.sense-center>span{
  display:block;
  margin-bottom:16px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
}

.sense-center strong{
  display:block;
  font-size:30px;
  line-height:1.08;
  letter-spacing:-.045em;
}

.sense-center strong em{
  font-family:Georgia,serif;
  font-size:1.08em;
  font-weight:400;
}

.sense-fragment{
  position:absolute;
  z-index:2;
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 28px rgba(0,0,0,.045);
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  animation:senseFloat 7s ease-in-out infinite;
}

.sense-fragment em{
  font-family:Georgia,serif;
  font-size:1.08em;
  font-weight:400;
}

.s1{left:8%;top:13%;animation-delay:-1.2s}
.s2{right:12%;top:11%;animation-delay:-4.1s}
.s3{left:4%;top:42%;animation-delay:-2.7s}
.s4{right:5%;top:37%;animation-delay:-5.4s}
.s5{left:10%;bottom:15%;animation-delay:-3.3s}
.s6{right:17%;bottom:12%;animation-delay:-.8s}
.s7{left:36%;top:5%;animation-delay:-4.8s}
.s8{right:5%;bottom:34%;animation-delay:-2.1s}

.sense-line{
  position:absolute;
  z-index:1;
  display:block;
  height:1px;
  width:180px;
  background:rgba(20,20,20,.12);
  transform-origin:left center;
}

.l1{
  left:20%;
  top:33%;
  transform:rotate(18deg);
}

.l2{
  right:12%;
  top:62%;
  transform:rotate(-18deg);
}

.l3{
  left:19%;
  bottom:25%;
  transform:rotate(-12deg);
}

@keyframes senseFloat{
  0%,100%{
    transform:translate3d(0,0,0) rotate(-1deg);
  }
  50%{
    transform:translate3d(0,-9px,0) rotate(1deg);
  }
}

@media(max-width:980px){
  .hero-sense{
    min-height:430px;
  }
}

@media(max-width:680px){
  .hero-sense{
    min-height:390px;
    margin-top:15px;
    border-radius:26px;
  }

  .sense-center{
    width:65%;
    padding:25px 22px;
  }

  .sense-center strong{
    font-size:24px;
  }

  .sense-fragment{
    padding:8px 12px;
    font-size:12px;
  }

  .s3,
  .s8{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .sense-fragment{
    animation:none;
  }
}

/* ============================================================
   KAFK — HERO SENSIBLE V2
   ============================================================ */

.hero-sense{
  background:
    radial-gradient(circle at 68% 18%, rgba(241,223,215,.82), transparent 27%),
    radial-gradient(circle at 30% 68%, rgba(212,230,220,.88), transparent 31%),
    radial-gradient(circle at 72% 72%, rgba(221,232,238,.78), transparent 30%),
    rgba(255,255,255,.28);
}

.sense-center{
  width:min(330px,70%);
  padding:38px 34px;
  transform:translate(-50%,-50%) rotate(-1.3deg);
  background:rgba(255,255,255,.9);
  box-shadow:
    0 28px 65px rgba(0,0,0,.08),
    0 8px 18px rgba(0,0,0,.035);
}

.sense-center strong{
  font-size:32px;
}

.sense-fragment{
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 14px 35px rgba(0,0,0,.07);
  backdrop-filter:blur(7px);
  font-size:15px;
}

.s1{
  left:11%;
  top:13%;
  background:rgba(246,224,216,.92);
  transform:rotate(-8deg);
}

.s2{
  right:11%;
  top:13%;
  background:rgba(221,233,224,.94);
  transform:rotate(-7deg);
}

.s3{
  left:5%;
  top:39%;
  background:rgba(218,231,241,.94);
  transform:rotate(-7deg);
}

.s4{
  right:4%;
  top:36%;
  background:rgba(248,224,218,.94);
  transform:rotate(10deg);
}

.s5{
  left:10%;
  bottom:16%;
  background:rgba(218,236,226,.94);
  transform:rotate(6deg);
}

.s6{
  right:13%;
  bottom:12%;
  background:rgba(248,235,215,.94);
  transform:rotate(-5deg);
}

.s7{
  left:38%;
  bottom:7%;
  top:auto;
  background:rgba(248,226,219,.94);
  transform:rotate(-9deg);
}

.s8{
  right:3%;
  bottom:34%;
  background:rgba(219,232,241,.94);
  transform:rotate(-8deg);
}

.sense-blob{
  position:absolute;
  z-index:0;
  border-radius:44% 56% 61% 39% / 48% 38% 62% 52%;
  filter:blur(.2px);
  opacity:.58;
  animation:blobDrift 11s ease-in-out infinite;
}

.blob-a{
  width:190px;
  height:270px;
  right:11%;
  top:7%;
  background:rgba(218,229,223,.62);
  transform:rotate(18deg);
}

.blob-b{
  width:210px;
  height:190px;
  left:22%;
  top:18%;
  background:rgba(246,228,216,.58);
  transform:rotate(-14deg);
  animation-delay:-4s;
}

.blob-c{
  width:185px;
  height:250px;
  right:12%;
  bottom:4%;
  background:rgba(217,229,237,.54);
  transform:rotate(8deg);
  animation-delay:-7s;
}

.sense-orbit{
  position:absolute;
  z-index:1;
  border:1px solid rgba(85,130,135,.36);
  border-radius:50%;
  pointer-events:none;
}

.orbit-a{
  width:410px;
  height:210px;
  left:7%;
  top:21%;
  transform:rotate(14deg);
}

.orbit-b{
  width:370px;
  height:240px;
  right:2%;
  bottom:9%;
  transform:rotate(-22deg);
}

.sense-orbit::before,
.sense-orbit::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#94c8c6;
  box-shadow:0 0 0 5px rgba(148,200,198,.09);
}

.sense-orbit::before{
  left:12%;
  top:-5px;
}

.sense-orbit::after{
  right:18%;
  bottom:-5px;
  background:#e6aa90;
}

@keyframes blobDrift{
  0%,100%{
    translate:0 0;
    scale:1;
  }
  50%{
    translate:8px -10px;
    scale:1.035;
  }
}

@keyframes senseFloat{
  0%,100%{
    translate:0 0;
  }
  50%{
    translate:0 -11px;
  }
}


/* KAFK — ajustement carte centrale hero */

.hero-sense .sense-center{
  width:min(265px,58%);
  padding:27px 27px 29px;
  border-radius:24px;
}

.hero-sense .sense-center>span{
  margin-bottom:12px;
  font-size:9px;
}

.hero-sense .sense-center strong{
  font-size:26px;
  line-height:1.05;
}

.hero-sense .sense-center strong em{
  font-size:1.06em;
}


/* KAFK — carte centrale hero responsive */

.hero-sense .sense-center{
  width:clamp(190px, 34vw, 245px);
  padding:
    clamp(18px, 2.2vw, 24px)
    clamp(18px, 2.4vw, 24px)
    clamp(20px, 2.5vw, 26px);

  border-radius:clamp(18px, 2vw, 22px);
}

.hero-sense .sense-center>span{
  margin-bottom:clamp(8px, 1vw, 10px);
  font-size:clamp(7px, .75vw, 9px);
}

.hero-sense .sense-center strong{
  font-size:clamp(20px, 2vw, 24px);
  line-height:1.04;
}

.hero-sense .sense-center strong em{
  font-size:1.04em;
}


/* tablette */

@media(max-width:980px){

  .hero-sense .sense-center{
    width:clamp(185px, 40vw, 225px);
  }

  .hero-sense .sense-center strong{
    font-size:clamp(19px, 2.5vw, 22px);
  }

}


/* mobile */

@media(max-width:680px){

  .hero-sense .sense-center{
    width:clamp(160px, 54vw, 195px);
    padding:18px 17px 19px;
    border-radius:18px;
  }

  .hero-sense .sense-center>span{
    font-size:7px;
    margin-bottom:7px;
  }

  .hero-sense .sense-center strong{
    font-size:clamp(17px, 5.2vw, 20px);
    line-height:1.02;
  }

}



/* ============================================================
   KAFK — HERO SENSIBLE V3 VOUS
   ============================================================ */

.hero-sense{
  position:relative;
  min-height:500px;
  width:100%;
  overflow:hidden;
  border-radius:34px;

  background:
    radial-gradient(circle at 22% 25%, rgba(248,224,214,.42), transparent 28%),
    radial-gradient(circle at 73% 18%, rgba(210,234,222,.48), transparent 29%),
    radial-gradient(circle at 73% 68%, rgba(210,228,241,.5), transparent 31%),
    radial-gradient(circle at 28% 72%, rgba(220,239,228,.42), transparent 30%),
    rgba(255,255,255,.36);
}


/* ---------- centre ---------- */

.sense-you{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;

  width:clamp(125px,18vw,175px);
  aspect-ratio:1;

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

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.96), rgba(255,255,255,.68) 48%, rgba(225,239,238,.76) 100%);

  border:1px solid rgba(255,255,255,.92);

  box-shadow:
    0 24px 55px rgba(0,0,0,.075),
    inset 0 0 35px rgba(255,255,255,.7);

  animation:youBreathe 5.8s ease-in-out infinite;
}

.sense-you span{
  font-family:Georgia,serif;
  font-style:italic;
  font-size:clamp(34px,4.2vw,52px);
  line-height:1;
  letter-spacing:-.045em;
}


/* ---------- blobs ---------- */

.sense-blob{
  position:absolute;
  z-index:0;
  opacity:.7;
  filter:blur(.2px);

  border-radius:
    45% 55% 61% 39% /
    48% 39% 61% 52%;

  animation:blobDriftStrong 11s ease-in-out infinite;
}

.blob-a{
  width:34%;
  height:42%;
  left:8%;
  top:6%;
  background:rgba(247,220,207,.54);
  transform:rotate(-10deg);
}

.blob-b{
  width:31%;
  height:43%;
  right:5%;
  top:3%;
  background:rgba(197,228,213,.58);
  transform:rotate(17deg);
  animation-delay:-3s;
}

.blob-c{
  width:37%;
  height:43%;
  right:2%;
  bottom:3%;
  background:rgba(194,220,239,.52);
  transform:rotate(-7deg);
  animation-delay:-6s;
}

.blob-d{
  width:35%;
  height:38%;
  left:2%;
  bottom:4%;
  background:rgba(201,234,216,.51);
  transform:rotate(13deg);
  animation-delay:-8s;
}


/* ---------- orbites ---------- */

.sense-orbit{
  position:absolute;
  z-index:1;

  border:1.3px solid rgba(74,137,145,.42);
  border-radius:50%;

  pointer-events:none;
}

.orbit-a{
  width:74%;
  height:43%;
  left:5%;
  top:17%;
  transform:rotate(13deg);
  animation:orbitPulseA 10s ease-in-out infinite;
}

.orbit-b{
  width:66%;
  height:45%;
  right:2%;
  bottom:10%;
  transform:rotate(-20deg);
  animation:orbitPulseB 12s ease-in-out infinite;
}

.orbit-c{
  width:48%;
  height:58%;
  left:27%;
  top:19%;
  transform:rotate(17deg);
  opacity:.38;
  animation:orbitPulseC 14s ease-in-out infinite;
}


/* ---------- dots ---------- */

.sense-dot{
  position:absolute;
  z-index:3;

  width:12px;
  height:12px;

  border-radius:50%;

  box-shadow:
    0 0 0 6px rgba(255,255,255,.14),
    0 7px 15px rgba(0,0,0,.05);

  animation:dotPulse 3.6s ease-in-out infinite;
}

.d1{
  left:10%;
  top:22%;
  background:#72c8ad;
}

.d2{
  left:36%;
  top:34%;
  background:#ef9b80;
  animation-delay:-1s;
}

.d3{
  right:18%;
  top:20%;
  background:#77c8b3;
  animation-delay:-2s;
}

.d4{
  right:15%;
  bottom:28%;
  background:#74b9df;
  animation-delay:-.5s;
}

.d5{
  left:32%;
  bottom:15%;
  background:#79c8ac;
  animation-delay:-2.6s;
}

.d6{
  right:5%;
  bottom:20%;
  background:#ef9a7d;
  animation-delay:-1.8s;
}


/* ---------- pastilles ---------- */

.sense-fragment{
  position:absolute;
  z-index:4;

  display:inline-block;

  padding:
    clamp(9px,1.1vw,13px)
    clamp(14px,1.6vw,21px);

  border-radius:999px;

  border:1px solid rgba(255,255,255,.85);

  box-shadow:
    0 14px 34px rgba(0,0,0,.08),
    inset 0 0 18px rgba(255,255,255,.28);

  backdrop-filter:blur(6px);

  font-size:clamp(12px,1.25vw,16px);
  font-weight:750;

  white-space:nowrap;

  animation:senseFloatStrong 5.6s ease-in-out infinite;
}

.sense-fragment em{
  font-family:Georgia,serif;
  font-size:1.08em;
  font-weight:400;
}


/* positions + couleurs */

.s1{
  left:9%;
  top:9%;
  background:rgba(247,221,212,.95);
  rotate:-8deg;
  animation-delay:-.4s;
}

.s2{
  right:10%;
  top:9%;
  background:rgba(214,233,222,.95);
  rotate:-7deg;
  animation-delay:-1.4s;
}

.s3{
  left:2%;
  top:34%;
  background:rgba(210,228,242,.95);
  rotate:-8deg;
  animation-delay:-2.4s;
}

.s4{
  right:1%;
  top:31%;
  background:rgba(248,219,216,.95);
  rotate:10deg;
  animation-delay:-3.3s;
}

.s5{
  left:6%;
  bottom:16%;
  background:rgba(210,235,221,.96);
  rotate:7deg;
  animation-delay:-1.7s;
}

.s6{
  right:11%;
  bottom:10%;
  background:rgba(248,230,195,.96);
  rotate:-6deg;
  animation-delay:-4.1s;
}

.s7{
  left:37%;
  bottom:7%;
  background:rgba(248,220,214,.96);
  rotate:-8deg;
  animation-delay:-2.8s;
}

.s8{
  right:1%;
  bottom:33%;
  background:rgba(211,228,242,.96);
  rotate:-8deg;
  animation-delay:-.9s;
}


/* ---------- animation ---------- */

@keyframes senseFloatStrong{
  0%,100%{
    translate:0 0;
    scale:1;
  }

  35%{
    translate:8px -13px;
    scale:1.025;
  }

  70%{
    translate:-5px 7px;
    scale:.99;
  }
}

@keyframes blobDriftStrong{
  0%,100%{
    translate:0 0;
    scale:1;
  }

  50%{
    translate:14px -16px;
    scale:1.07;
  }
}

@keyframes youBreathe{
  0%,100%{
    scale:1;
    box-shadow:
      0 24px 55px rgba(0,0,0,.075),
      inset 0 0 35px rgba(255,255,255,.7);
  }

  50%{
    scale:1.055;
    box-shadow:
      0 30px 65px rgba(0,0,0,.09),
      inset 0 0 48px rgba(255,255,255,.9);
  }
}

@keyframes dotPulse{
  0%,100%{
    scale:.85;
    opacity:.65;
  }

  50%{
    scale:1.2;
    opacity:1;
  }
}

@keyframes orbitPulseA{
  0%,100%{
    transform:rotate(13deg) scale(1);
    opacity:.5;
  }

  50%{
    transform:rotate(16deg) scale(1.025);
    opacity:.8;
  }
}

@keyframes orbitPulseB{
  0%,100%{
    transform:rotate(-20deg) scale(1);
    opacity:.45;
  }

  50%{
    transform:rotate(-17deg) scale(1.035);
    opacity:.75;
  }
}

@keyframes orbitPulseC{
  0%,100%{
    transform:rotate(17deg) scale(1);
  }

  50%{
    transform:rotate(21deg) scale(.97);
  }
}


/* ---------- tablette ---------- */

@media(max-width:980px){

  .hero-sense{
    min-height:430px;
  }

  .sense-fragment{
    font-size:13px;
  }

}


/* ---------- mobile ---------- */

@media(max-width:680px){

  .hero-sense{
    min-height:390px;
    border-radius:26px;
  }

  .sense-you{
    width:125px;
  }

  .sense-you span{
    font-size:34px;
  }

  .sense-fragment{
    padding:8px 11px;
    font-size:11px;
  }

  .s1{left:5%;top:9%}
  .s2{right:5%;top:9%}
  .s3{left:0;top:35%}
  .s4{right:-2%;top:32%}
  .s5{left:3%;bottom:16%}
  .s6{right:6%;bottom:10%}
  .s7{left:34%;bottom:5%}
  .s8{right:-3%;bottom:32%}

  .sense-dot{
    width:8px;
    height:8px;
  }

}


/* ---------- accessibilité ---------- */

@media(prefers-reduced-motion:reduce){

  .sense-fragment,
  .sense-blob,
  .sense-you,
  .sense-dot,
  .sense-orbit{
    animation:none !important;
  }

}



/* ============================================================
   KAFK — HERO SENSIBLE V4 CALME
   ============================================================ */

/* centre plus léger */

.hero-sense .sense-you{
  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255,255,255,.58),
      rgba(255,255,255,.28) 52%,
      rgba(225,239,238,.36) 100%
    );

  border:1px solid rgba(255,255,255,.62);

  box-shadow:
    0 18px 42px rgba(0,0,0,.045),
    inset 0 0 32px rgba(255,255,255,.34);

  backdrop-filter:blur(4px);

  animation:youBreatheSoft 7.5s ease-in-out infinite;
}


/* pastilles : mouvement plus doux */

.hero-sense .sense-fragment{
  animation:senseFloatSoft 7.8s ease-in-out infinite;
}


/* blobs : respiration lente */

.hero-sense .sense-blob{
  animation:blobDriftSoft 15s ease-in-out infinite;
}


/* orbites : quasiment imperceptibles */

.hero-sense .orbit-a{
  animation:orbitSoftA 16s ease-in-out infinite;
}

.hero-sense .orbit-b{
  animation:orbitSoftB 18s ease-in-out infinite;
}

.hero-sense .orbit-c{
  animation:orbitSoftC 20s ease-in-out infinite;
}


/* points */

.hero-sense .sense-dot{
  animation:dotPulseSoft 5.5s ease-in-out infinite;
}


/* ---------------- ANIMATIONS ---------------- */

@keyframes senseFloatSoft{

  0%,100%{
    translate:0 0;
    scale:1;
  }

  50%{
    translate:4px -6px;
    scale:1.012;
  }

}


@keyframes blobDriftSoft{

  0%,100%{
    translate:0 0;
    scale:1;
  }

  50%{
    translate:7px -8px;
    scale:1.035;
  }

}


@keyframes youBreatheSoft{

  0%,100%{
    scale:1;
    opacity:.86;
  }

  50%{
    scale:1.025;
    opacity:.98;
  }

}


@keyframes dotPulseSoft{

  0%,100%{
    scale:.92;
    opacity:.62;
  }

  50%{
    scale:1.08;
    opacity:.9;
  }

}


@keyframes orbitSoftA{

  0%,100%{
    transform:rotate(13deg) scale(1);
    opacity:.44;
  }

  50%{
    transform:rotate(14.5deg) scale(1.012);
    opacity:.58;
  }

}


@keyframes orbitSoftB{

  0%,100%{
    transform:rotate(-20deg) scale(1);
    opacity:.42;
  }

  50%{
    transform:rotate(-18.5deg) scale(1.015);
    opacity:.56;
  }

}


@keyframes orbitSoftC{

  0%,100%{
    transform:rotate(17deg);
    opacity:.30;
  }

  50%{
    transform:rotate(18.5deg);
    opacity:.40;
  }

}



/* ============================================================
   KAFK — SECTIONS EDITORIALES V1
   ============================================================ */


/* ------------------------------------------------------------
   Titres
   ------------------------------------------------------------ */

.entrepreneur-section h2,
.agent-section h2,
.seo-home h2,
.proof h2{
  max-width:1050px;
}

.entrepreneur-section h2 em,
.agent-section h2 em,
.seo-home h2 em,
.proof h2 em{
  display:block;
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.045em;
  color:#5f756b;
}


/* ------------------------------------------------------------
   UNE MATIÈRE · PLUSIEURS FORMES
   ------------------------------------------------------------ */

.entrepreneur-section{
  padding-top:clamp(80px,10vw,150px);
  padding-bottom:clamp(90px,11vw,160px);
}

.entrepreneur-intro{
  max-width:1050px;
}

.entrepreneur-intro h2{
  margin-bottom:28px;
}

.entrepreneur-intro p:last-child{
  max-width:820px;
  font-size:clamp(18px,1.5vw,23px);
  line-height:1.48;
}

.entrepreneur-grid{
  gap:20px;
  margin-top:64px;
}

.entrepreneur-grid article{
  position:relative;
  min-height:280px;
  padding:32px;
  border-radius:28px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(20,20,20,.045);
  box-shadow:0 18px 45px rgba(0,0,0,.035);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.entrepreneur-grid article span{
  position:absolute;
  top:30px;
  left:30px;
  opacity:.55;
}

.entrepreneur-grid article h3{
  font-size:clamp(27px,2.4vw,38px);
  margin-bottom:14px;
}

.entrepreneur-grid article p{
  max-width:360px;
}


/* ------------------------------------------------------------
   ACCOMPAGNER
   ------------------------------------------------------------ */

.agent-section{
  gap:clamp(50px,7vw,110px);
  align-items:center;
  padding-top:clamp(90px,11vw,160px);
  padding-bottom:clamp(90px,11vw,160px);
}

.agent-copy h2{
  max-width:720px;
}

.agent-lead{
  max-width:700px;
  font-size:clamp(18px,1.45vw,22px);
  line-height:1.52;
}

.agent-capabilities{
  margin-top:42px;
  gap:14px;
}

.agent-capabilities article{
  border-radius:22px;
  padding:24px;
  min-height:145px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(20,20,20,.04);
}

.agent-live-card{
  border-radius:30px;
  padding:34px;
  box-shadow:0 30px 70px rgba(0,0,0,.08);
  transform:rotate(1deg);
}

.ai-message{
  border-radius:18px !important;
}

.ai-summary{
  border-radius:18px;
}


/* ------------------------------------------------------------
   BTP / ARCHITECTURE / URBANISME / INDUSTRIE
   ------------------------------------------------------------ */

.seo-home{
  padding-top:clamp(110px,13vw,190px);
  padding-bottom:clamp(110px,13vw,190px);
  gap:clamp(55px,8vw,130px);
  align-items:center;
}

.seo-home-title{
  max-width:700px;
}

.seo-home-copy{
  position:relative;
  padding:42px 46px;
  border-radius:30px;
  background:
    linear-gradient(
      135deg,
      rgba(211,229,239,.88),
      rgba(224,236,232,.68)
    );
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 24px 60px rgba(0,0,0,.035);
}

.seo-home-copy::before{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  border-radius:50%;
  right:26px;
  top:-32px;
  background:rgba(244,211,198,.42);
  filter:blur(2px);
  z-index:-1;
}

.seo-lead{
  font-size:clamp(22px,2vw,31px);
  line-height:1.32;
  letter-spacing:-.025em;
}

.seo-home-copy p:last-child{
  margin-top:28px;
  max-width:780px;
  font-size:clamp(17px,1.3vw,21px);
  line-height:1.55;
}


/* ------------------------------------------------------------
   TECHNOLOGIE
   ------------------------------------------------------------ */

.proof{
  padding-top:clamp(100px,12vw,180px);
  padding-bottom:clamp(100px,12vw,170px);
}

.proof .section-head{
  max-width:1150px;
}

.proof .section-head h2{
  max-width:1100px;
  margin-bottom:30px;
}

.proof .section-head p{
  max-width:960px;
  font-size:clamp(18px,1.4vw,22px);
  line-height:1.5;
}

.proof .section-head p:first-of-type{
  margin-top:30px;
}

.proof .section-head p:first-of-type strong,
.proof .section-head p:first-of-type em{
  color:#5f756b;
}

.examples-preview{
  margin-top:62px;
  gap:16px;
}

.example-mini{
  min-height:300px;
  border-radius:26px;
  padding:28px;
  position:relative;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}

.example-mini:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 50px rgba(0,0,0,.06);
}

.example-mini span{
  opacity:.72;
}

.example-mini h3{
  font-size:clamp(28px,2.3vw,38px);
}

.example-mini p{
  max-width:300px;
}


/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media(max-width:900px){

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

  .entrepreneur-grid article{
    min-height:220px;
  }

  .seo-home{
    grid-template-columns:1fr;
  }

  .seo-home-copy{
    padding:30px;
  }

  .agent-section{
    grid-template-columns:1fr;
  }

  .agent-live-card{
    transform:none;
  }

}




/* ============================================================
   KAFK — ARCHITECTURE EXPERIENCE V1
   ============================================================ */

.seo-home{
  grid-template-columns:minmax(0,.9fr) minmax(520px,1.25fr);
  gap:clamp(60px,7vw,120px);
  align-items:center;
}

.seo-home-title{
  max-width:720px;
}

.seo-home-title h2{
  margin-bottom:38px;
}

.seo-home-title h2 em{
  display:block;
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:400;
  color:#60776c;
}


/* texte */

.archi-intro{
  max-width:680px;
  font-size:clamp(18px,1.35vw,22px);
  line-height:1.52;
}

.archi-highlight{
  position:relative;
  margin:34px 0 30px;
  padding:25px 28px 25px 38px;
  border-radius:22px;
  background:
    linear-gradient(
      120deg,
      rgba(211,229,239,.82),
      rgba(228,238,234,.6)
    );
}

.archi-highlight::before{
  content:"";
  position:absolute;
  left:20px;
  top:24px;
  bottom:24px;
  width:3px;
  border-radius:5px;
  background:#60776c;
}

.archi-highlight p{
  margin:0;
  font-size:clamp(17px,1.22vw,20px);
  line-height:1.48;
}

.archi-highlight strong{
  font-weight:800;
}

.archi-conclusion{
  max-width:660px;
  font-size:clamp(17px,1.25vw,20px);
  line-height:1.52;
}

.archi-conclusion em{
  font-family:Georgia,serif;
  font-style:italic;
  color:#60776c;
}


/* ============================================================
   VISUALISATION ARCHITECTURALE
   ============================================================ */

.archi-visual{
  padding:22px;
  border-radius:34px;
  background:rgba(220,232,239,.58);
  box-shadow:0 28px 70px rgba(0,0,0,.055);
}

.archi-stage{
  position:relative;
  height:460px;
  overflow:hidden;
  border-radius:26px;
  background:
    linear-gradient(
      160deg,
      #dcebf3 0%,
      #edf2ef 43%,
      #f5f2eb 100%
    );
}


/* horizon */

.archi-stage::after{
  content:"";
  position:absolute;
  z-index:0;
  left:-5%;
  right:-5%;
  bottom:2%;
  height:32%;
  background:
    linear-gradient(
      170deg,
      rgba(189,213,193,.62),
      rgba(220,230,215,.18)
    );
  clip-path:polygon(0 50%,18% 36%,37% 52%,55% 28%,76% 45%,100% 22%,100% 100%,0 100%);
}


/* toolbar */

.archi-toolbar{
  position:absolute;
  z-index:9;
  top:24px;
  right:22px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.archi-toolbar span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 18px rgba(0,0,0,.05);
}


/* bâtiment */

.archi-building{
  position:absolute;
  z-index:3;
  left:8%;
  bottom:11%;
  width:62%;
  height:60%;
}

.building-mass{
  position:absolute;
  box-shadow:0 18px 35px rgba(0,0,0,.10);
}

.mass-back{
  width:48%;
  height:42%;
  right:0;
  bottom:17%;
  background:#d7d2c7;
  transform:skewY(-4deg);
}

.mass-main{
  width:68%;
  height:46%;
  left:5%;
  bottom:8%;
  background:#e9e4da;
  border-top:15px solid #f3f0e9;
}

.mass-top{
  width:47%;
  height:29%;
  left:15%;
  bottom:52%;
  background:#eeeae2;
  border-bottom:10px solid #d8d2c7;
}

.window{
  position:absolute;
  top:23%;
  bottom:12%;
  width:17%;
  background:
    linear-gradient(
      140deg,
      rgba(98,132,145,.9),
      rgba(183,205,207,.78)
    );
  border-left:3px solid #464d4e;
}

.w1{left:7%}
.w2{left:27%}
.w3{left:47%}
.w4{left:67%}

.building-green{
  position:absolute;
  border-radius:50%;
  background:#6e9278;
  box-shadow:0 8px 15px rgba(0,0,0,.08);
}

.green-1{
  width:44px;
  height:44px;
  left:5%;
  bottom:3%;
}

.green-2{
  width:32px;
  height:32px;
  left:53%;
  bottom:47%;
}


/* wireframe */

.wireframe{
  position:absolute;
  z-index:4;
  width:48%;
  height:58%;
  right:4%;
  bottom:10%;
  opacity:.48;
}

.wire{
  position:absolute;
  display:block;
  background:#566d73;
  transform-origin:left center;
}

.wire.h1{width:100%;height:1px;top:28%}
.wire.h2{width:92%;height:1px;top:51%}
.wire.h3{width:85%;height:1px;top:73%}

.wire.v1{height:90%;width:1px;left:18%;top:4%}
.wire.v2{height:88%;width:1px;left:51%;top:5%}
.wire.v3{height:78%;width:1px;left:78%;top:10%}

.wire.diag1{
  width:110%;
  height:1px;
  left:0;
  top:13%;
  transform:rotate(27deg);
}

.wire.diag2{
  width:100%;
  height:1px;
  left:3%;
  bottom:4%;
  transform:rotate(-28deg);
}


/* petites légendes */

.archi-caption{
  position:absolute;
  z-index:8;
  font-size:12px;
  line-height:1.25;
  max-width:130px;
}

.archi-caption span{
  display:block;
  width:7px;
  height:7px;
  margin-bottom:6px;
  border-radius:50%;
  background:#60776c;
}

.cap-1{left:16%;top:12%}
.cap-2{left:45%;top:10%}
.cap-3{right:13%;top:18%}


/* signature */

.archi-signature{
  position:absolute;
  z-index:8;
  right:8%;
  bottom:13%;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:27px;
  line-height:.95;
  transform:rotate(-7deg);
}

.archi-signature span{
  font-size:31px;
}


/* miniatures */

.archi-thumbs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:12px;
}

.archi-thumb{
  position:relative;
  height:88px;
  overflow:hidden;
  border-radius:15px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.9);
}

.archi-thumb > span{
  position:absolute;
  z-index:5;
  left:10px;
  top:8px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
}


/* plan */

.archi-thumb.plan i{
  position:absolute;
  border:1px solid rgba(79,101,105,.35);
}

.archi-thumb.plan i:nth-of-type(1){
  width:65%;
  height:45%;
  left:18%;
  top:30%;
}

.archi-thumb.plan i:nth-of-type(2){
  width:35%;
  height:65%;
  left:30%;
  top:18%;
}

.archi-thumb.plan i:nth-of-type(3){
  width:75%;
  height:1px;
  left:13%;
  top:58%;
}


/* render */

.archi-thumb.render div{
  position:absolute;
  left:10%;
  right:10%;
  bottom:10%;
  height:52%;
  background:
    linear-gradient(
      145deg,
      #7f9f87 0 25%,
      #d7c1a3 25% 48%,
      #708793 48% 72%,
      #e5ddd0 72%
    );
}


/* coupe */

.archi-thumb.coupe i{
  position:absolute;
  left:12%;
  right:12%;
  height:1px;
  background:#69777a;
}

.archi-thumb.coupe i:first-of-type{
  top:47%;
}

.archi-thumb.coupe i:last-of-type{
  top:67%;
}

.archi-thumb.coupe::after{
  content:"";
  position:absolute;
  left:22%;
  top:25%;
  width:52%;
  height:50%;
  border:1px solid rgba(65,81,84,.5);
}


/* film */

.archi-thumb.film{
  display:grid;
  place-items:center;
  background:
    linear-gradient(
      145deg,
      rgba(219,229,225,.9),
      rgba(196,215,225,.85)
    );
}

.archi-thumb.film b{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#60776c;
  color:#fff;
  font-size:12px;
  padding-left:2px;
}


/* très léger mouvement */

.archi-building{
  animation:archiFloat 9s ease-in-out infinite;
}

.wireframe{
  animation:wireBreath 8s ease-in-out infinite;
}

@keyframes archiFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-5px);}
}

@keyframes wireBreath{
  0%,100%{opacity:.40;transform:translateX(0);}
  50%{opacity:.58;transform:translateX(4px);}
}


/* responsive */

@media(max-width:1050px){

  .seo-home{
    grid-template-columns:1fr;
  }

  .seo-home-title{
    max-width:850px;
  }

  .archi-visual{
    max-width:850px;
  }

}

@media(max-width:680px){

  .archi-stage{
    height:370px;
  }

  .archi-caption{
    display:none;
  }

  .archi-building{
    width:78%;
    left:2%;
  }

  .wireframe{
    width:55%;
    right:-8%;
  }

  .archi-thumbs{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(prefers-reduced-motion:reduce){

  .archi-building,
  .wireframe{
    animation:none !important;
  }

}



/* ============================================================
   KAFK — ARCHITECTURE IMAGE V2
   ============================================================ */

.archi-visual-image{
  padding:0;
  background:transparent;
  box-shadow:none;
  border-radius:32px;
  overflow:hidden;
  align-self:center;
}

.archi-visual-image img{
  display:block;
  width:100%;
  height:auto;
  border-radius:32px;
  box-shadow:0 28px 70px rgba(0,0,0,.07);
  transform:scale(1);
  transition:transform 1.2s ease;
}

.archi-visual-image:hover img{
  transform:scale(1.012);
}


/* MOBILE FIRST / TABLETTE */

@media(max-width:1050px){

  .seo-home{
    grid-template-columns:1fr;
  }

  .archi-visual-image{
    width:100%;
    max-width:760px;
    margin-top:18px;
  }

}


/* MOBILE */

@media(max-width:680px){

  .seo-home{
    gap:38px;
  }

  .archi-visual-image{
    width:100%;
    margin:0;
    border-radius:22px;
  }

  .archi-visual-image img{
    border-radius:22px;
    box-shadow:0 18px 44px rgba(0,0,0,.06);
  }

}


/* petit mobile */

@media(max-width:420px){

  .archi-visual-image{
    margin-left:0;
    margin-right:0;
  }

  .archi-visual-image img{
    width:100%;
  }

}


@media(prefers-reduced-motion:reduce){

  .archi-visual-image img{
    transition:none;
  }

  .archi-visual-image:hover img{
    transform:none;
  }

}



/* ============================================================
   KAFK — PROGRESS SCROLL V1
   ============================================================ */

.kafk-progress-section{
  align-items:center;
}

.progress-capabilities article{
  transition:
    transform .55s ease,
    background .55s ease,
    box-shadow .55s ease;
}

.kafk-progress-section.is-progress-visible
.progress-capabilities article{
  animation:capabilityReveal .7s ease both;
}

.kafk-progress-section.is-progress-visible
.progress-capabilities article:nth-child(2){
  animation-delay:.10s;
}

.kafk-progress-section.is-progress-visible
.progress-capabilities article:nth-child(3){
  animation-delay:.20s;
}

.kafk-progress-section.is-progress-visible
.progress-capabilities article:nth-child(4){
  animation-delay:.30s;
}


/* ------------------------------------------------------------
   VISUEL
   ------------------------------------------------------------ */

.progress-visual{
  position:relative;
  overflow:hidden;
  min-height:570px;
  padding:34px;
  border-radius:32px;

  background:
    radial-gradient(circle at 16% 15%, rgba(247,220,209,.62), transparent 27%),
    radial-gradient(circle at 83% 25%, rgba(202,229,218,.62), transparent 31%),
    radial-gradient(circle at 68% 75%, rgba(201,222,238,.68), transparent 32%),
    #f4f3ed;

  border:1px solid rgba(255,255,255,.82);

  box-shadow:
    0 30px 70px rgba(0,0,0,.055);
}

.progress-label{
  position:relative;
  z-index:10;
}

.progress-scene{
  position:relative;
  height:380px;
  margin-top:14px;
}


/* ------------------------------------------------------------
   MATIÈRE DE DÉPART
   ------------------------------------------------------------ */

.progress-source{
  position:absolute;
  z-index:3;

  display:inline-flex;
  align-items:center;

  padding:10px 15px;

  border-radius:999px;

  background:rgba(255,255,255,.72);

  border:1px solid rgba(255,255,255,.9);

  box-shadow:
    0 12px 28px rgba(0,0,0,.055);

  backdrop-filter:blur(7px);

  font-size:13px;
  font-weight:750;

  opacity:.9;

  transition:
    transform 1.25s cubic-bezier(.2,.8,.2,1),
    opacity .8s ease;
}


.ps1{left:3%;top:8%; transform:rotate(-7deg);}
.ps2{right:7%;top:5%; transform:rotate(6deg);}
.ps3{left:0;top:44%; transform:rotate(5deg);}
.ps4{right:0;top:40%; transform:rotate(-7deg);}
.ps5{left:11%;bottom:5%; transform:rotate(-5deg);}
.ps6{right:8%;bottom:8%; transform:rotate(7deg);}


/* ------------------------------------------------------------
   CENTRE KAFK
   ------------------------------------------------------------ */

.progress-core{
  position:absolute;
  z-index:5;

  left:50%;
  top:48%;

  width:178px;
  aspect-ratio:1;

  transform:
    translate(-50%,-50%)
    scale(.84);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(255,255,255,.9),
      rgba(255,255,255,.56) 55%,
      rgba(215,232,226,.68)
    );

  border:1px solid rgba(255,255,255,.9);

  box-shadow:
    0 20px 45px rgba(0,0,0,.07);

  opacity:0;

  transition:
    opacity .7s ease .35s,
    transform .9s cubic-bezier(.2,.8,.2,1) .35s;
}

.progress-core span{
  font-size:27px;
  font-weight:900;
  letter-spacing:-.04em;
}

.progress-core small{
  max-width:115px;
  margin-top:5px;

  color:#61746b;

  font-size:10px;
  line-height:1.25;
}


/* ------------------------------------------------------------
   RÉSULTATS
   ------------------------------------------------------------ */

.progress-results{
  position:absolute;
  z-index:7;

  inset:0;

  pointer-events:none;
}

.progress-result{
  position:absolute;

  padding:10px 15px;

  border-radius:999px;

  box-shadow:
    0 14px 30px rgba(0,0,0,.055);

  border:1px solid rgba(255,255,255,.82);

  font-size:13px;
  font-weight:800;

  opacity:0;

  transform:
    translate(-50%,-50%)
    scale(.75);

  transition:
    opacity .65s ease,
    transform .85s cubic-bezier(.2,.8,.2,1);
}

.pr1{
  left:25%;
  top:19%;
  background:rgba(244,216,204,.96);
}

.pr2{
  left:74%;
  top:22%;
  background:rgba(208,231,219,.96);
}

.pr3{
  left:27%;
  top:78%;
  background:rgba(204,224,239,.96);
}

.pr4{
  left:75%;
  top:77%;
  background:rgba(244,229,196,.96);
}


/* ------------------------------------------------------------
   PAYOFF
   ------------------------------------------------------------ */

.progress-payoff{
  position:relative;
  z-index:10;

  padding:21px 24px;

  border-radius:20px;

  background:rgba(255,255,255,.68);

  border:1px solid rgba(255,255,255,.82);

  opacity:0;

  transform:translateY(16px);

  transition:
    opacity .75s ease 1.55s,
    transform .75s ease 1.55s;
}

.progress-payoff span{
  display:block;

  margin-bottom:6px;

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

.progress-payoff strong{
  display:block;

  font-size:clamp(25px,2.3vw,35px);
  line-height:1;
}

.progress-payoff em{
  display:block;

  margin-top:7px;

  font-family:Georgia,serif;
  font-size:clamp(16px,1.35vw,20px);
  font-weight:400;
  color:#60776c;
}


/* ============================================================
   ÉTAT APRÈS ENTRÉE DANS L'ÉCRAN
   ============================================================ */

.kafk-progress-section.is-progress-visible
.progress-core{
  opacity:1;

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


/* les éléments initiaux convergent vers KAFK */

.kafk-progress-section.is-progress-visible .ps1{
  transform:translate(128px,95px) rotate(-2deg) scale(.82);
  opacity:0;
}

.kafk-progress-section.is-progress-visible .ps2{
  transform:translate(-125px,100px) rotate(2deg) scale(.82);
  opacity:0;
}

.kafk-progress-section.is-progress-visible .ps3{
  transform:translate(135px,-5px) rotate(0) scale(.82);
  opacity:0;
}

.kafk-progress-section.is-progress-visible .ps4{
  transform:translate(-135px,0) rotate(0) scale(.82);
  opacity:0;
}

.kafk-progress-section.is-progress-visible .ps5{
  transform:translate(110px,-105px) rotate(0) scale(.82);
  opacity:0;
}

.kafk-progress-section.is-progress-visible .ps6{
  transform:translate(-110px,-105px) rotate(0) scale(.82);
  opacity:0;
}


/* puis les résultats ressortent */

.kafk-progress-section.is-progress-visible
.progress-result{
  opacity:1;

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

.kafk-progress-section.is-progress-visible .pr1{
  transition-delay:.90s;
}

.kafk-progress-section.is-progress-visible .pr2{
  transition-delay:1.02s;
}

.kafk-progress-section.is-progress-visible .pr3{
  transition-delay:1.14s;
}

.kafk-progress-section.is-progress-visible .pr4{
  transition-delay:1.26s;
}

.kafk-progress-section.is-progress-visible
.progress-payoff{
  opacity:1;
  transform:translateY(0);
}


/* léger mouvement après apparition */

.kafk-progress-section.is-progress-visible
.progress-core{
  animation:progressCoreBreathe 5.5s ease-in-out 2.1s infinite;
}


/* ------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------ */

@keyframes capabilityReveal{

  from{
    opacity:.45;
    transform:translateY(14px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

@keyframes progressCoreBreathe{

  0%,100%{
    translate:0 0;
  }

  50%{
    translate:0 -4px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:900px){

  .kafk-progress-section{
    grid-template-columns:1fr;
  }

  .progress-visual{
    min-height:auto;
    padding:24px 18px;
  }

  .progress-scene{
    height:355px;
  }

  .progress-core{
    width:145px;
  }

  .progress-source,
  .progress-result{
    font-size:11px;
    padding:8px 11px;
  }

}


@media(max-width:520px){

  .progress-visual{
    border-radius:25px;
  }

  .progress-scene{
    height:335px;
  }

  .progress-core{
    top:49%;
    width:128px;
  }

  .progress-core span{
    font-size:22px;
  }

  .progress-core small{
    font-size:8px;
  }

  .ps1{left:1%;top:7%;}
  .ps2{right:1%;top:8%;}
  .ps3{left:-2%;top:39%;}
  .ps4{right:-2%;top:39%;}
  .ps5{left:3%;bottom:5%;}
  .ps6{right:2%;bottom:5%;}

  .pr1{left:24%;top:19%;}
  .pr2{left:75%;top:20%;}
  .pr3{left:25%;top:80%;}
  .pr4{left:73%;top:79%;}

  .progress-payoff{
    padding:18px;
  }

}


/* accessibilité */

@media(prefers-reduced-motion:reduce){

  .progress-source,
  .progress-core,
  .progress-result,
  .progress-payoff,
  .progress-capabilities article{
    transition:none !important;
    animation:none !important;
  }

}



/* ============================================================
   KAFK — BENEFIT TRANSFORMATION V1
   ============================================================ */

.benefit-visual{
  position:relative;
  overflow:hidden;
  min-height:560px;
  padding:34px;
  border-radius:32px;
  background:
    radial-gradient(circle at 15% 18%, rgba(246,220,208,.55), transparent 28%),
    radial-gradient(circle at 82% 25%, rgba(206,231,219,.55), transparent 31%),
    radial-gradient(circle at 72% 78%, rgba(203,224,239,.62), transparent 31%),
    #f3f2ed;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 30px 70px rgba(0,0,0,.055);
}

.benefit-stage{
  display:grid;
  grid-template-columns:1fr 70px 1fr;
  align-items:center;
  gap:18px;
  min-height:390px;
  margin-top:18px;
}

.benefit-tag{
  display:block;
  margin-bottom:12px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
}


/* ============================================================
   AVANT
   ============================================================ */

.raw-sheet{
  position:relative;
  min-height:285px;
  padding:26px;
  border-radius:24px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 20px 45px rgba(0,0,0,.05);
  overflow:hidden;

  transform:rotate(-2deg);
  transition:
    transform .9s ease,
    opacity .8s ease,
    filter .8s ease;
}

.raw-line{
  height:9px;
  margin-bottom:11px;
  border-radius:999px;
  background:rgba(25,25,25,.14);
}

.raw-line.long{width:82%}
.raw-line.medium{width:64%}
.raw-line.short{width:45%}

.raw-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:28px;
}

.raw-grid i{
  display:block;
  height:52px;
  border-radius:8px;
  border:1px solid rgba(70,90,95,.24);
  background:
    linear-gradient(
      135deg,
      rgba(209,225,235,.5),
      rgba(241,235,224,.5)
    );
}

.raw-note{
  position:absolute;
  padding:7px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

.n1{
  left:20px;
  bottom:18px;
  transform:rotate(-7deg);
}

.n2{
  right:18px;
  top:94px;
  transform:rotate(5deg);
}

.n3{
  right:28px;
  bottom:32px;
  transform:rotate(-4deg);
}


/* ============================================================
   FLÈCHE
   ============================================================ */

.benefit-arrow{
  display:grid;
  place-items:center;
}

.benefit-arrow span{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 12px 28px rgba(0,0,0,.05);

  font-size:22px;
  color:#60776c;

  opacity:.35;
  transform:translateX(-8px);

  transition:
    opacity .6s ease .35s,
    transform .6s ease .35s;
}


/* ============================================================
   APRÈS
   ============================================================ */

.result-stack{
  position:relative;
  min-height:300px;
}

.result-card{
  position:absolute;
  left:50%;
  width:88%;
  min-height:118px;
  padding:20px;
  border-radius:21px;
  box-shadow:0 18px 38px rgba(0,0,0,.07);
  border:1px solid rgba(255,255,255,.88);

  opacity:0;
  transform:
    translate(-50%,24px)
    scale(.92);

  transition:
    opacity .7s ease,
    transform .85s cubic-bezier(.2,.8,.2,1);
}

.result-card span{
  display:block;
  margin-bottom:10px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}

.result-card strong{
  display:block;
  max-width:220px;
  font-size:18px;
  line-height:1.1;
}

.result-card i{
  position:absolute;
  right:20px;
  bottom:18px;
  width:56px;
  height:32px;
  border-radius:8px;
  opacity:.55;
}

.rc1{
  top:0;
  background:rgba(244,220,208,.96);
  transform:
    translate(-50%,40px)
    rotate(-4deg)
    scale(.92);
}

.rc1 i{
  background:
    linear-gradient(
      rgba(105,125,122,.55) 0 4px,
      transparent 4px 10px,
      rgba(105,125,122,.35) 10px 14px,
      transparent 14px 20px,
      rgba(105,125,122,.24) 20px 24px
    );
}

.rc2{
  top:55px;
  background:rgba(204,225,239,.97);
  transform:
    translate(-50%,40px)
    rotate(3deg)
    scale(.92);
}

.rc2 i{
  background:
    linear-gradient(
      135deg,
      #6c8a94 0 32%,
      #d7bd99 32% 58%,
      #88a38f 58%
    );
}

.rc3{
  top:112px;
  background:rgba(208,231,220,.98);
  transform:
    translate(-50%,40px)
    rotate(-2deg)
    scale(.92);
}

.rc3 i{
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(70,87,83,.48) 0 3px,
      transparent 3px 8px
    );
}

.rc4{
  top:168px;
  background:rgba(246,229,197,.98);
  transform:
    translate(-50%,40px)
    rotate(2deg)
    scale(.92);
}

.rc4 b{
  position:absolute;
  right:22px;
  bottom:20px;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#60776c;
  color:#fff;
  font-size:11px;
  padding-left:2px;
}


/* ============================================================
   PAYOFF
   ============================================================ */

.benefit-payoff{
  margin-top:8px;
  padding:21px 24px;
  border-radius:20px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.88);

  opacity:0;
  transform:translateY(15px);

  transition:
    opacity .7s ease 1.4s,
    transform .7s ease 1.4s;
}

.benefit-payoff strong{
  display:block;
  font-size:clamp(24px,2.15vw,34px);
  letter-spacing:-.03em;
}

.benefit-payoff p{
  margin:7px 0 0;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:clamp(15px,1.25vw,19px);
  line-height:1.35;
  color:#60776c;
}


/* ============================================================
   ANIMATION AU SCROLL
   ============================================================ */

.kafk-progress-section.is-progress-visible .raw-sheet{
  transform:rotate(0deg) scale(.96);
  opacity:.52;
  filter:blur(.4px);
}

.kafk-progress-section.is-progress-visible .benefit-arrow span{
  opacity:1;
  transform:translateX(0);
}

.kafk-progress-section.is-progress-visible .result-card{
  opacity:1;
}

.kafk-progress-section.is-progress-visible .rc1{
  transform:
    translate(-50%,0)
    rotate(-4deg)
    scale(1);
  transition-delay:.55s;
}

.kafk-progress-section.is-progress-visible .rc2{
  transform:
    translate(-50%,0)
    rotate(3deg)
    scale(1);
  transition-delay:.72s;
}

.kafk-progress-section.is-progress-visible .rc3{
  transform:
    translate(-50%,0)
    rotate(-2deg)
    scale(1);
  transition-delay:.89s;
}

.kafk-progress-section.is-progress-visible .rc4{
  transform:
    translate(-50%,0)
    rotate(2deg)
    scale(1);
  transition-delay:1.06s;
}

.kafk-progress-section.is-progress-visible .benefit-payoff{
  opacity:1;
  transform:translateY(0);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:900px){

  .benefit-visual{
    padding:24px 18px;
    min-height:auto;
  }

  .benefit-stage{
    grid-template-columns:1fr;
    gap:18px;
    min-height:auto;
  }

  .benefit-arrow{
    transform:rotate(90deg);
  }

  .raw-sheet{
    min-height:220px;
  }

  .result-stack{
    min-height:340px;
  }

}

@media(max-width:520px){

  .benefit-visual{
    border-radius:24px;
  }

  .raw-sheet{
    min-height:190px;
    padding:20px;
  }

  .result-card{
    width:94%;
    min-height:108px;
    padding:17px;
  }

  .result-card strong{
    font-size:16px;
  }

  .result-stack{
    min-height:320px;
  }

}


/* accessibilité */

@media(prefers-reduced-motion:reduce){

  .raw-sheet,
  .benefit-arrow span,
  .result-card,
  .benefit-payoff{
    transition:none !important;
  }

}



/* ============================================================
   KAFK — ACCOMPAGNEMENT SANS VISUEL V1
   ============================================================ */

.kafk-progress-section{
  display:block;
}

.kafk-progress-section .agent-copy{
  width:100%;
  max-width:1180px;
}

.kafk-progress-section .agent-copy h2{
  max-width:900px;
}

.kafk-progress-section .agent-lead{
  max-width:820px;
}

.kafk-progress-section .progress-capabilities{
  max-width:1040px;
  grid-template-columns:repeat(4,1fr);
  margin-top:50px;
}

.kafk-progress-section .progress-capabilities article{
  min-height:210px;
}

@media(max-width:900px){

  .kafk-progress-section .progress-capabilities{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:560px){

  .kafk-progress-section .progress-capabilities{
    grid-template-columns:1fr;
  }

  .kafk-progress-section .progress-capabilities article{
    min-height:auto;
  }

}



/* ============================================================
   KAFK — NAVIGATION UNIFIÉE V1
   ============================================================ */

.kafk-main-nav{
  display:flex;
  align-items:center;
  gap:22px;
}

.nav-item{
  position:relative;
}

.nav-item > .nav-link{
  display:block;
}

.nav-submenu{
  position:absolute;
  z-index:100;
  left:50%;
  top:calc(100% + 14px);

  min-width:230px;
  padding:10px;

  transform:
    translateX(-50%)
    translateY(7px);

  opacity:0;
  visibility:hidden;

  border-radius:18px;

  background:rgba(255,255,255,.96);

  border:1px solid rgba(20,20,20,.06);

  box-shadow:
    0 22px 60px rgba(0,0,0,.10);

  backdrop-filter:blur(14px);

  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
}

.nav-submenu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-18px;
  height:20px;
}

.nav-submenu a{
  display:block;

  padding:11px 13px;

  border-radius:11px;

  color:#171717;
  text-decoration:none;

  font-size:13px;
  font-weight:700;

  white-space:nowrap;
}

.nav-submenu a:hover{
  background:#f4f2ec;
}

.nav-item:hover .nav-submenu,
.nav-item:focus-within .nav-submenu{
  opacity:1;
  visibility:visible;

  transform:
    translateX(-50%)
    translateY(0);
}


/* ------------------------------------------------------------
   Sous-pages
   ------------------------------------------------------------ */

.subpage-hero{
  padding-top:clamp(110px,12vw,180px);
  padding-bottom:clamp(70px,8vw,110px);
}

.subpage-hero h1{
  max-width:1050px;

  margin:22px 0 30px;

  font-size:clamp(58px,7vw,112px);
  line-height:.9;
  letter-spacing:-.065em;
}

.subpage-hero h1 em{
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:400;
  color:#60776c;
}

.subpage-lead{
  max-width:820px;

  font-size:clamp(19px,1.6vw,24px);
  line-height:1.5;
}

.subpage-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:20px;

  padding-bottom:clamp(100px,12vw,170px);
}

.subpage-card{
  min-height:300px;

  padding:34px;

  border-radius:28px;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.subpage-card > span{
  margin-bottom:auto;

  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.subpage-card h2{
  margin:50px 0 14px;

  font-size:clamp(30px,3vw,48px);
  letter-spacing:-.045em;
}

.subpage-card p{
  max-width:520px;
  line-height:1.55;
}

.subpage-card a{
  margin-top:18px;

  color:#171717;
  font-weight:800;
}

.subpage-card.peach{
  background:#efd8c8;
}

.subpage-card.green{
  background:#d6e5dc;
}

.subpage-card.blue{
  background:#d4e4ed;
}

.subpage-card.pink{
  background:#ecd2df;
}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media(max-width:1100px){

  .kafk-main-nav{
    gap:14px;
  }

  .kafk-main-nav .nav-link{
    font-size:13px;
  }

}

@media(max-width:900px){

  .desktop-nav{
    display:none;
  }

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

}

@media(max-width:600px){

  .subpage-hero{
    padding-top:90px;
  }

  .subpage-hero h1{
    font-size:clamp(50px,15vw,74px);
  }

  .subpage-card{
    min-height:250px;
    padding:26px;
  }

}



/* ============================================================
   KAFK — PAGE SECTEURS V2
   ============================================================ */

.sector-page h1 em,
.sector-page h2 em{
  display:block;
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:400;
  color:#60776c;
}


/* HERO */

.sector-hero{
  padding-top:clamp(110px,12vw,180px);
  padding-bottom:clamp(100px,11vw,160px);
}

.sector-hero h1{
  max-width:1150px;
  margin:24px 0 40px;
  font-size:clamp(65px,8vw,128px);
  line-height:.88;
  letter-spacing:-.07em;
}

.sector-hero-lead{
  max-width:850px;
  font-size:clamp(21px,1.8vw,28px);
  line-height:1.45;
}

.sector-hero-note{
  max-width:760px;
  margin-top:24px;
  font-size:17px;
  line-height:1.6;
  color:#555;
}


/* BTP */

.sector-focus{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr);
  gap:clamp(55px,7vw,110px);
  align-items:center;
  padding-top:clamp(90px,10vw,150px);
  padding-bottom:clamp(100px,11vw,170px);
}

.sector-focus-copy h2{
  margin:22px 0 34px;
  font-size:clamp(48px,5.4vw,88px);
  line-height:.94;
  letter-spacing:-.06em;
}

.sector-focus-copy > p{
  max-width:680px;
  font-size:clamp(18px,1.35vw,21px);
  line-height:1.55;
}

.sector-focus-highlight{
  max-width:700px;
  margin:32px 0;
  padding:25px 30px;
  border-radius:22px;
  background:linear-gradient(120deg,#d8e7ee,#e0ebe5);
  font-size:clamp(17px,1.25vw,20px);
  line-height:1.5;
}

.sector-focus-highlight strong{
  font-weight:850;
}

.sector-focus-last em{
  font-family:Georgia,serif;
  font-style:italic;
  color:#60776c;
}

.sector-archi-image{
  margin:0;
}

.sector-archi-image img{
  display:block;
  width:100%;
  height:auto;
  border-radius:32px;
  box-shadow:0 30px 70px rgba(0,0,0,.07);
}


/* GAINS */

.sector-gains{
  padding-top:clamp(100px,11vw,170px);
  padding-bottom:clamp(100px,11vw,170px);
}

.sector-gains > h2{
  max-width:950px;
  margin:22px 0 60px;
  font-size:clamp(55px,6.5vw,100px);
  line-height:.92;
  letter-spacing:-.065em;
}

.sector-gain-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.sector-gain-grid article{
  min-height:300px;
  padding:28px;
  border-radius:26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.sector-gain-grid article > span{
  margin-bottom:auto;
  font-size:9px;
  font-weight:900;
}

.sector-gain-grid h3{
  margin:50px 0 12px;
  font-size:clamp(27px,2.3vw,38px);
}

.sector-gain-grid p{
  line-height:1.5;
}

.sector-gain-grid .peach{background:#efd9ca;}
.sector-gain-grid .green{background:#d5e5dc;}
.sector-gain-grid .blue{background:#d2e4ee;}
.sector-gain-grid .pink{background:#ecd4e0;}


/* MATIÈRE */

.sector-material{
  padding-top:clamp(110px,12vw,180px);
  padding-bottom:clamp(110px,12vw,180px);
}

.sector-material-title h2{
  max-width:1000px;
  margin:22px 0 60px;
  font-size:clamp(52px,6vw,94px);
  line-height:.92;
  letter-spacing:-.06em;
}

.sector-material-grid{
  display:grid;
  grid-template-columns:1fr 90px 1fr;
  gap:20px;
  align-items:center;
}

.sector-material-grid article{
  min-height:280px;
  padding:34px;
  border-radius:28px;
  background:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,.04);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.sector-material-grid article.result{
  background:#18221e;
  color:#fff;
}

.sector-material-grid article span{
  margin-bottom:auto;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}

.sector-material-grid article strong{
  font-size:clamp(28px,2.5vw,40px);
  line-height:1.05;
}

.sector-material-grid article p{
  margin-top:16px;
  max-width:480px;
  line-height:1.55;
}

.sector-material-arrow{
  font-size:40px;
  text-align:center;
  color:#60776c;
}


/* AUDIENCES */

.sector-audiences{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(50px,8vw,130px);
  padding-top:clamp(100px,12vw,180px);
  padding-bottom:clamp(100px,12vw,180px);
}

.sector-audiences h2{
  margin-top:22px;
  font-size:clamp(50px,5vw,82px);
  line-height:.95;
  letter-spacing:-.06em;
}

.sector-audience-list{
  display:grid;
  gap:12px;
}

.sector-audience-list article{
  padding:24px 26px;
  border-radius:20px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.04);
}

.sector-audience-list span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}

.sector-audience-list p{
  margin:8px 0 0;
  font-size:17px;
  line-height:1.45;
}


/* URBANISME / INDUSTRIE */

.sector-industry{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(55px,8vw,130px);
  align-items:center;
  padding-top:clamp(110px,12vw,180px);
  padding-bottom:clamp(110px,12vw,180px);
}

.sector-industry h2{
  margin-top:22px;
  font-size:clamp(52px,5.5vw,90px);
  line-height:.92;
  letter-spacing:-.06em;
}

.sector-industry-copy{
  padding:40px;
  border-radius:30px;
  background:linear-gradient(135deg,#d5e5dc,#d6e5ed);
}

.sector-industry-copy p,
.sector-industry-copy strong{
  display:block;
  font-size:clamp(18px,1.4vw,22px);
  line-height:1.55;
}

.sector-industry-copy strong{
  margin-top:28px;
}


/* TECHNOLOGIE */

.sector-tech{
  padding-top:clamp(110px,12vw,180px);
  padding-bottom:clamp(110px,12vw,180px);
}

.sector-tech h2{
  max-width:1050px;
  margin:22px 0 32px;
  font-size:clamp(55px,6vw,96px);
  line-height:.92;
  letter-spacing:-.065em;
}

.sector-tech-lead{
  max-width:850px;
  font-size:clamp(19px,1.5vw,23px);
  line-height:1.55;
}

.sector-tech-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:55px;
}

.sector-tech-grid article{
  min-height:220px;
  padding:27px;
  border-radius:25px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.sector-tech-grid article:nth-child(1){background:#efd9ca;}
.sector-tech-grid article:nth-child(2){background:#d2e4ee;}
.sector-tech-grid article:nth-child(3){background:#d5e5dc;}
.sector-tech-grid article:nth-child(4){background:#ecd4e0;}

.sector-tech-grid span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}

.sector-tech-grid strong{
  font-size:clamp(27px,2.4vw,38px);
}

.sector-tech-note{
  margin-top:30px;
  max-width:800px;
  font-size:15px;
  line-height:1.55;
  color:#666;
}


/* FINAL */

.sector-final{
  padding-top:clamp(110px,13vw,190px);
  padding-bottom:clamp(120px,14vw,200px);
}

.sector-final h2{
  max-width:1000px;
  margin:22px 0 32px;
  font-size:clamp(60px,7vw,110px);
  line-height:.9;
  letter-spacing:-.07em;
}

.sector-final > p{
  max-width:720px;
  margin-bottom:32px;
  font-size:clamp(19px,1.5vw,23px);
  line-height:1.55;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:950px){

  .sector-focus,
  .sector-audiences,
  .sector-industry{
    grid-template-columns:1fr;
  }

  .sector-gain-grid,
  .sector-tech-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .sector-material-grid{
    grid-template-columns:1fr;
  }

  .sector-material-arrow{
    transform:rotate(90deg);
  }

}

@media(max-width:600px){

  .sector-hero h1{
    font-size:clamp(54px,15vw,76px);
  }

  .sector-focus-copy h2,
  .sector-gains > h2,
  .sector-material-title h2,
  .sector-audiences h2,
  .sector-industry h2,
  .sector-tech h2,
  .sector-final h2{
    font-size:clamp(44px,13vw,66px);
  }

  .sector-gain-grid,
  .sector-tech-grid{
    grid-template-columns:1fr;
  }

  .sector-gain-grid article{
    min-height:230px;
  }

  .sector-archi-image img{
    border-radius:22px;
  }

}



/* ============================================================
   KAFK — PAGE SERVICES V2
   ============================================================ */

.services-page h1 em,
.services-page h2 em{
  display:block;
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:400;
  color:#60776c;
}


/* HERO */

.services-hero{
  padding-top:clamp(110px,12vw,180px);
  padding-bottom:clamp(100px,11vw,160px);
}

.services-hero h1{
  max-width:1100px;
  margin:22px 0 38px;
  font-size:clamp(65px,8vw,125px);
  line-height:.88;
  letter-spacing:-.07em;
}

.services-hero-lead{
  max-width:820px;
  font-size:clamp(21px,1.8vw,28px);
  line-height:1.45;
}

.services-hero-note{
  max-width:720px;
  margin-top:24px;
  font-size:17px;
  line-height:1.6;
  color:#5d5d5d;
}


/* MÉTHODE */

.services-method{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(60px,8vw,130px);
  padding-top:clamp(110px,12vw,180px);
  padding-bottom:clamp(110px,12vw,180px);
}

.services-method h2{
  margin-top:22px;
  font-size:clamp(52px,5.6vw,92px);
  line-height:.92;
  letter-spacing:-.06em;
}

.services-method-copy{
  align-self:center;
  padding:40px;
  border-radius:30px;
  background:linear-gradient(135deg,#f0d9ca,#dfeae4);
}

.services-method-copy p,
.services-method-copy strong{
  display:block;
  font-size:clamp(18px,1.4vw,22px);
  line-height:1.55;
}

.services-method-copy strong{
  margin-top:28px;
}


/* TRANSFORMATION */

.services-transform{
  padding-top:clamp(100px,11vw,170px);
  padding-bottom:clamp(100px,11vw,170px);
}

.services-transform > h2{
  max-width:950px;
  margin:22px 0 60px;
  font-size:clamp(55px,6.4vw,100px);
  line-height:.92;
  letter-spacing:-.065em;
}

.services-transform-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.services-transform-grid article{
  min-height:300px;
  padding:28px;
  border-radius:26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.services-transform-grid article > span{
  margin-bottom:auto;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}

.services-transform-grid h3{
  margin:50px 0 12px;
  font-size:clamp(27px,2.3vw,38px);
}

.services-transform-grid p{
  line-height:1.5;
}

.services-transform-grid .peach{background:#efd9ca;}
.services-transform-grid .green{background:#d5e5dc;}
.services-transform-grid .blue{background:#d2e4ee;}
.services-transform-grid .pink{background:#ecd4e0;}


/* BÉNÉFICES */

.services-benefits{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(60px,8vw,130px);
  padding-top:clamp(110px,12vw,180px);
  padding-bottom:clamp(110px,12vw,180px);
}

.services-benefits h2{
  margin-top:22px;
  font-size:clamp(52px,5.5vw,90px);
  line-height:.92;
  letter-spacing:-.06em;
}

.services-benefit-list{
  display:grid;
  gap:12px;
}

.services-benefit-list article{
  padding:24px 26px;
  border-radius:20px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(0,0,0,.04);
}

.services-benefit-list article > span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
  color:#60776c;
}

.services-benefit-list strong{
  display:block;
  margin-top:10px;
  font-size:clamp(22px,1.8vw,29px);
}

.services-benefit-list p{
  margin:7px 0 0;
  font-size:16px;
  line-height:1.5;
  color:#555;
}


/* OUTILS */

.services-tools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(60px,8vw,120px);
  padding-top:clamp(110px,12vw,180px);
  padding-bottom:clamp(110px,12vw,180px);
}

.services-tools-copy h2{
  margin:22px 0 32px;
  font-size:clamp(50px,5.3vw,88px);
  line-height:.92;
  letter-spacing:-.06em;
}

.services-tools-copy p,
.services-tools-copy > strong{
  display:block;
  max-width:720px;
  font-size:clamp(18px,1.35vw,21px);
  line-height:1.55;
}

.services-tools-copy > strong{
  margin-top:26px;
}

.services-tools-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  align-self:center;
}

.services-tools-grid article{
  min-height:210px;
  padding:26px;
  border-radius:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.services-tools-grid article:nth-child(1){background:#efd9ca;}
.services-tools-grid article:nth-child(2){background:#d2e4ee;}
.services-tools-grid article:nth-child(3){background:#d5e5dc;}
.services-tools-grid article:nth-child(4){background:#ecd4e0;}

.services-tools-grid span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}

.services-tools-grid strong{
  font-size:clamp(24px,2vw,32px);
  line-height:1.05;
}


/* ÉCHELLE D’INTERVENTION */

.services-scale{
  padding-top:clamp(110px,12vw,180px);
  padding-bottom:clamp(110px,12vw,180px);
}

.services-scale h2{
  max-width:950px;
  margin:22px 0 60px;
  font-size:clamp(55px,6vw,96px);
  line-height:.92;
  letter-spacing:-.065em;
}

.services-scale-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.services-scale-grid article{
  min-height:300px;
  padding:30px;
  border-radius:26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.services-scale-grid article > span{
  margin-bottom:auto;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}

.services-scale-grid h3{
  margin:48px 0 12px;
  font-size:clamp(27px,2.3vw,38px);
}

.services-scale-grid p{
  line-height:1.5;
}

.services-scale-grid a{
  margin-top:18px;
  color:#171717;
  font-weight:850;
}

.services-scale-grid .peach{background:#efd9ca;}
.services-scale-grid .green{background:#d5e5dc;}
.services-scale-grid .blue{background:#d2e4ee;}


/* FINAL */

.services-final{
  padding-top:clamp(120px,13vw,190px);
  padding-bottom:clamp(130px,14vw,210px);
}

.services-final h2{
  max-width:1000px;
  margin:22px 0 32px;
  font-size:clamp(60px,7vw,110px);
  line-height:.9;
  letter-spacing:-.07em;
}

.services-final > p{
  max-width:720px;
  margin-bottom:32px;
  font-size:clamp(19px,1.5vw,23px);
  line-height:1.55;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:950px){

  .services-method,
  .services-benefits,
  .services-tools{
    grid-template-columns:1fr;
  }

  .services-transform-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .services-scale-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:600px){

  .services-hero h1{
    font-size:clamp(54px,15vw,76px);
  }

  .services-method h2,
  .services-transform > h2,
  .services-benefits h2,
  .services-tools-copy h2,
  .services-scale h2,
  .services-final h2{
    font-size:clamp(44px,13vw,66px);
  }

  .services-transform-grid,
  .services-tools-grid{
    grid-template-columns:1fr;
  }

  .services-transform-grid article,
  .services-scale-grid article{
    min-height:230px;
  }

  .services-method-copy{
    padding:28px;
    border-radius:24px;
  }

}



/* ============================================================
   KAFK — POURQUOI PAGE REFINEMENT V1
   ============================================================ */

/* petits titres / chapeaux */

body .eyebrow,
.pourquoi-page .eyebrow,
.why-page .eyebrow,
.page-hero .eyebrow{
  font-size:clamp(12px, .9vw, 15px);
  line-height:1.2;
  letter-spacing:.22em;
  font-weight:900;
  margin-bottom:24px;
}


/* page pourquoi : plus de respiration générale */

body:has(.why-hero) .section,
body:has(.pourquoi-hero) .section{
  padding-top:clamp(90px,10vw,150px);
  padding-bottom:clamp(90px,10vw,150px);
}


/* premier gros bloc */

.why-hero,
.pourquoi-hero{
  padding:clamp(70px,7vw,110px);
  border-radius:34px;
}

.why-hero h1,
.pourquoi-hero h1{
  margin-top:8px;
  margin-bottom:34px;
  max-width:900px;
}

.why-hero p,
.pourquoi-hero p{
  max-width:780px;
  font-size:clamp(18px,1.35vw,22px);
  line-height:1.55;
}


/* sections éditoriales */

.why-section,
.pourquoi-section{
  padding-top:clamp(110px,12vw,180px);
  padding-bottom:clamp(110px,12vw,180px);
}

.why-section h2,
.pourquoi-section h2{
  margin-top:18px;
  margin-bottom:32px;
}


/* paragraphes plus confortables */

.why-section p,
.pourquoi-section p{
  font-size:clamp(17px,1.25vw,21px);
  line-height:1.6;
}


/* blocs colorés */

.why-card,
.pourquoi-card{
  padding:clamp(36px,4vw,58px);
  border-radius:30px;
}


/* petits titres à l'intérieur des cartes */

.why-card .eyebrow,
.pourquoi-card .eyebrow{
  margin-bottom:28px;
}


/* éviter effet tassé entre deux sections */

.why-section + .why-section,
.pourquoi-section + .pourquoi-section{
  margin-top:20px;
}


/* mobile */

@media(max-width:700px){

  body .eyebrow,
  .pourquoi-page .eyebrow,
  .why-page .eyebrow,
  .page-hero .eyebrow{
    font-size:11px;
    letter-spacing:.18em;
    margin-bottom:18px;
  }

  .why-hero,
  .pourquoi-hero{
    padding:34px 24px;
    border-radius:24px;
  }

  .why-section,
  .pourquoi-section{
    padding-top:75px;
    padding-bottom:75px;
  }

}



/* ============================================================
   KAFK — NAV FIX SITE PRO V2
   Harmonisation définitive des sous-menus
   ============================================================ */

.site-header{
  position:relative;
  z-index:1000;
}

.site-header .desktop-nav.kafk-main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(15px,1.45vw,26px);
  flex:1 1 auto;
}

.site-header .kafk-main-nav .nav-item{
  position:relative !important;
  display:block !important;
  width:auto !important;
}

.site-header .kafk-main-nav .nav-item > .nav-link{
  display:block;
  white-space:nowrap;
}


/* ------------------------------------------------------------
   Sous-menu caché par défaut
   ------------------------------------------------------------ */

.site-header .kafk-main-nav .nav-submenu{
  position:absolute !important;
  z-index:2000 !important;

  top:calc(100% + 12px) !important;
  left:50% !important;

  display:block !important;

  width:max-content !important;
  min-width:220px !important;
  max-width:300px;

  padding:9px !important;
  margin:0 !important;

  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;

  transform:
    translateX(-50%)
    translateY(7px) !important;

  background:rgba(255,255,255,.97) !important;
  border:1px solid rgba(20,20,20,.06) !important;
  border-radius:17px !important;

  box-shadow:
    0 24px 60px rgba(0,0,0,.11) !important;

  backdrop-filter:blur(16px);

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s ease !important;
}


/* pont invisible pour éviter que le menu se ferme
   en passant la souris du lien vers le sous-menu */

.site-header .kafk-main-nav .nav-submenu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-15px;
  height:17px;
}


/* ------------------------------------------------------------
   Liens internes
   ------------------------------------------------------------ */

.site-header .kafk-main-nav .nav-submenu a{
  display:block !important;

  width:100% !important;

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

  border-radius:10px;

  color:#171717 !important;

  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.25 !important;

  text-decoration:none !important;
  white-space:nowrap !important;
}

.site-header .kafk-main-nav .nav-submenu a:hover{
  background:#f3f1ec !important;
}


/* ------------------------------------------------------------
   Ouverture
   ------------------------------------------------------------ */

.site-header .kafk-main-nav .nav-item:hover > .nav-submenu,
.site-header .kafk-main-nav .nav-item:focus-within > .nav-submenu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;

  transform:
    translateX(-50%)
    translateY(0) !important;
}


/* ------------------------------------------------------------
   Desktop étroit
   ------------------------------------------------------------ */

@media(min-width:901px) and (max-width:1200px){

  .site-header .desktop-nav.kafk-main-nav{
    gap:12px;
  }

  .site-header .kafk-main-nav > .nav-link,
  .site-header .kafk-main-nav .nav-item > .nav-link{
    font-size:12px;
  }

}


/* ------------------------------------------------------------
   Mobile : le desktop menu ne doit jamais déborder
   ------------------------------------------------------------ */

@media(max-width:900px){

  .site-header .desktop-nav.kafk-main-nav{
    display:none !important;
  }

}


/* =========================================================
   KAFK ÉCOUTE — TUNNEL PRINCIPAL V1
   ========================================================= */

.kafk-listen{
  position:relative;
  padding:110px 28px 120px;
  overflow:hidden;
}

.kafk-listen::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,221,196,.52), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(208,234,224,.55), transparent 28%),
    radial-gradient(circle at 78% 78%, rgba(216,225,246,.52), transparent 30%);
  opacity:.9;
}

.listen-shell{
  position:relative;
  z-index:1;
  max-width:1240px;
  margin:0 auto;
}

.listen-intro{
  max-width:860px;
  margin-bottom:54px;
}

.listen-intro h2{
  margin:10px 0 24px;
  max-width:920px;
  font-size:clamp(52px,7vw,96px);
  line-height:.94;
  letter-spacing:-.065em;
}

.listen-intro h2 em{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.045em;
}

.listen-intro-lead{
  max-width:800px;
  margin:0;
  font-size:21px;
  line-height:1.5;
}

.listen-intro-note{
  margin:18px 0 0;
  max-width:720px;
  color:#777;
  font-size:15px;
  line-height:1.55;
}

.listen-experience{
  position:relative;
  border:1px solid rgba(23,23,23,.09);
  border-radius:34px;
  background:rgba(255,255,255,.72);
  box-shadow:0 26px 90px rgba(23,23,23,.075);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
}

.listen-start{
  padding:50px;
}

.listen-question{
  margin:0 0 30px;
  font-size:clamp(28px,3.4vw,46px);
  line-height:1.05;
  letter-spacing:-.04em;
  max-width:760px;
}

.listen-choices{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.listen-choice{
  position:relative;
  min-height:150px;
  padding:28px 30px;
  border:1px solid rgba(23,23,23,.08);
  border-radius:24px;
  background:rgba(247,244,238,.72);
  text-align:left;
  cursor:pointer;
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.listen-choice::after{
  content:"↗";
  position:absolute;
  right:24px;
  top:22px;
  font-size:22px;
  opacity:.32;
  transition:transform .28s ease, opacity .28s ease;
}

.listen-choice:hover{
  transform:translateY(-3px);
  border-color:rgba(23,23,23,.16);
  box-shadow:0 18px 46px rgba(23,23,23,.07);
  background:rgba(255,255,255,.9);
}

.listen-choice:hover::after{
  transform:translate(2px,-2px);
  opacity:.7;
}

.listen-choice span{
  display:block;
  margin-bottom:6px;
  color:#777;
  font-size:13px;
  letter-spacing:.04em;
}

.listen-choice strong{
  display:block;
  max-width:360px;
  font-size:23px;
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.025em;
}

.listen-choice-open{
  grid-column:1 / -1;
  min-height:116px;
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(229,83,47,.055);
}

.listen-choice-open span{
  margin:0;
  color:#171717;
  font-size:19px;
}

.listen-choice-open strong{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  font-size:21px;
}

.listen-conversation{
  padding:46px 50px 52px;
}

.listen-agent{
  display:flex;
  align-items:flex-start;
  gap:18px;
  max-width:840px;
  margin-bottom:28px;
}

.listen-agent-mark{
  flex:0 0 auto;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#171717;
  color:#fff;
  font-size:15px;
  font-weight:700;
}

.listen-agent-copy span{
  display:block;
  margin:2px 0 7px;
  color:#777;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
}

.listen-agent-copy p{
  margin:0;
  font-size:20px;
  line-height:1.5;
}

.listen-thread{
  display:grid;
  gap:14px;
  margin:10px 0 22px;
}

.listen-thread-message{
  max-width:78%;
  padding:18px 20px;
  border-radius:20px;
  font-size:16px;
  line-height:1.5;
}

.listen-thread-message.user{
  justify-self:end;
  background:#171717;
  color:#fff;
  border-bottom-right-radius:7px;
}

.listen-thread-message.agent{
  justify-self:start;
  background:#f1eee7;
  color:#171717;
  border-bottom-left-radius:7px;
}

.listen-form{
  border:1px solid rgba(23,23,23,.11);
  border-radius:24px;
  background:#fff;
  box-shadow:0 14px 42px rgba(23,23,23,.06);
  overflow:hidden;
}

.listen-form textarea{
  display:block;
  width:100%;
  min-height:138px;
  resize:vertical;
  border:0;
  outline:0;
  background:transparent;
  padding:24px 26px 14px;
  color:#171717;
  font:inherit;
  font-size:18px;
  line-height:1.5;
}

.listen-form textarea::placeholder{
  color:#aaa;
}

.listen-form-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:12px 14px 14px 26px;
}

.listen-form-hint{
  color:#8a8a8a;
  font-size:12px;
}

.listen-send{
  flex:0 0 auto;
  border:0;
  border-radius:999px;
  background:#171717;
  color:#fff;
  padding:14px 20px;
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s ease, opacity .2s ease;
}

.listen-send:hover{
  transform:translateY(-1px);
}

.listen-send:disabled{
  opacity:.45;
  cursor:wait;
}

.listen-loading{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:24px;
  color:#777;
}

.listen-loading[hidden]{
  display:none;
}

.listen-loading span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#171717;
  animation:kafkListenPulse 1.1s infinite ease-in-out;
}

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

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

.listen-loading p{
  margin:0 0 0 7px;
  font-size:13px;
}

@keyframes kafkListenPulse{
  0%,100%{opacity:.22;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-3px)}
}

.listen-result{
  margin-top:34px;
  padding-top:34px;
  border-top:1px solid rgba(23,23,23,.09);
}

.listen-result[hidden]{
  display:none;
}

.listen-result-head{
  margin-bottom:24px;
}

.listen-result-head span,
.listen-human span{
  display:block;
  margin-bottom:7px;
  color:#888;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
}

.listen-result-head h3{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(34px,4vw,58px);
  line-height:1;
  letter-spacing:-.035em;
}

.listen-result-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.listen-result-grid article{
  min-height:210px;
  padding:25px;
  border-radius:22px;
  background:#f4f1eb;
}

.listen-result-grid article:nth-child(2){
  background:#edf2ef;
}

.listen-result-grid article:nth-child(3){
  background:#eef1f7;
}

.listen-result-grid article > span{
  display:block;
  margin-bottom:17px;
  color:#777;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.listen-result-grid p{
  margin:0;
  font-size:16px;
  line-height:1.55;
}

.listen-followup{
  margin-top:26px;
  padding:25px;
  border-radius:22px;
  background:rgba(229,83,47,.055);
}

.listen-followup[hidden]{
  display:none;
}

.listen-followup > p{
  margin:0 0 15px;
  font-size:14px;
  font-weight:600;
}

.listen-followup-questions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.listen-followup-question{
  border:1px solid rgba(23,23,23,.1);
  border-radius:999px;
  background:#fff;
  padding:11px 15px;
  color:#171717;
  font:inherit;
  font-size:13px;
  cursor:pointer;
}

.listen-human{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:34px;
  padding:30px 0 0;
}

.listen-human p{
  margin:0;
  max-width:600px;
  font-size:17px;
  line-height:1.5;
}

.listen-error{
  margin-top:20px;
  padding:15px 18px;
  border-radius:15px;
  background:#fff0ec;
  font-size:14px;
  line-height:1.45;
}

.listen-error[hidden]{
  display:none;
}

.listen-philosophy{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:28px;
  padding:0 8px;
}

.listen-philosophy div{
  padding-top:18px;
  border-top:1px solid rgba(23,23,23,.11);
}

.listen-philosophy strong{
  display:block;
  margin-bottom:8px;
  font-size:14px;
}

.listen-philosophy span{
  display:block;
  max-width:230px;
  color:#777;
  font-size:12px;
  line-height:1.5;
}

@media (max-width:900px){

  .kafk-listen{
    padding:80px 20px 92px;
  }

  .listen-start,
  .listen-conversation{
    padding:30px;
  }

  .listen-result-grid,
  .listen-philosophy{
    grid-template-columns:1fr 1fr;
  }

}

@media (max-width:640px){

  .kafk-listen{
    padding:66px 16px 78px;
  }

  .listen-intro{
    margin-bottom:32px;
  }

  .listen-intro h2{
    font-size:48px;
  }

  .listen-intro-lead{
    font-size:18px;
  }

  .listen-experience{
    border-radius:26px;
  }

  .listen-start,
  .listen-conversation{
    padding:22px;
  }

  .listen-question{
    font-size:31px;
  }

  .listen-choices,
  .listen-result-grid,
  .listen-philosophy{
    grid-template-columns:1fr;
  }

  .listen-choice{
    min-height:120px;
  }

  .listen-choice-open{
    grid-column:auto;
    display:block;
  }

  .listen-choice-open span{
    margin-bottom:6px;
  }

  .listen-agent-copy p{
    font-size:17px;
  }

  .listen-thread-message{
    max-width:92%;
  }

  .listen-form-bottom{
    align-items:flex-end;
    padding-left:18px;
  }

  .listen-form-hint{
    max-width:180px;
  }

  .listen-human{
    align-items:flex-start;
    flex-direction:column;
  }

  .listen-human .button{
    width:100%;
    text-align:center;
  }

}

@media (prefers-reduced-motion:reduce){

  .listen-choice,
  .listen-choice::after,
  .listen-send{
    transition:none;
  }

  .listen-loading span{
    animation:none;
  }

}

/* =========================================================
   KAFK ÉCOUTE — COULEURS + RÉFLEXION V2
   ========================================================= */

.kafk-listen::before{
  background:
    radial-gradient(circle at 10% 16%, rgba(247,190,153,.68), transparent 31%),
    radial-gradient(circle at 88% 14%, rgba(166,216,198,.62), transparent 29%),
    radial-gradient(circle at 78% 82%, rgba(180,195,235,.62), transparent 31%);
  opacity:1;
}

.listen-experience{
  background:rgba(255,255,255,.82);
  border-color:rgba(23,23,23,.11);
  box-shadow:0 28px 90px rgba(23,23,23,.09);
}

.listen-choice:nth-child(1){
  background:rgba(247,210,184,.60);
}

.listen-choice:nth-child(2){
  background:rgba(199,228,217,.64);
}

.listen-choice:nth-child(3){
  background:rgba(219,214,239,.64);
}

.listen-choice:nth-child(4){
  background:rgba(201,220,240,.66);
}

.listen-choice-open{
  background:rgba(244,188,172,.52);
}

.listen-choice:hover{
  background:#fff;
}

.listen-result-grid article:nth-child(1){
  background:rgba(244,220,191,.72);
}

.listen-result-grid article:nth-child(2){
  background:rgba(195,224,211,.72);
}

.listen-result-grid article:nth-child(3){
  background:rgba(202,214,240,.76);
}

.listen-followup{
  background:rgba(246,199,185,.58);
}


/* --- réflexion en cours --- */

.listen-loading{
  position:relative;
  margin-top:28px;
  padding:22px 24px 22px 78px;
  min-height:76px;
  border-radius:22px;
  background:
    linear-gradient(
      135deg,
      rgba(244,220,191,.72),
      rgba(199,228,217,.64) 48%,
      rgba(202,214,240,.72)
    );
  overflow:hidden;
}

.listen-loading::before{
  content:"";
  position:absolute;
  left:24px;
  top:50%;
  width:34px;
  height:34px;
  margin-top:-17px;
  border-radius:50%;
  border:2px solid rgba(23,23,23,.16);
  border-top-color:#171717;
  animation:kafkThinkingSpin 1.05s linear infinite;
}

.listen-loading::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle, rgba(255,255,255,.52), transparent 32%);
  animation:kafkThinkingGlow 2.6s ease-in-out infinite;
  pointer-events:none;
}

.listen-loading > span{
  display:none;
}

.listen-thinking-copy{
  position:relative;
  z-index:1;
}

.listen-thinking-copy strong{
  display:block;
  margin-bottom:4px;
  font-size:15px;
  letter-spacing:-.01em;
}

.listen-thinking-copy p{
  margin:0;
  color:#5f5f5f;
  font-size:13px;
  line-height:1.45;
}

@keyframes kafkThinkingSpin{
  to{
    transform:rotate(360deg);
  }
}

@keyframes kafkThinkingGlow{
  0%,100%{
    transform:translateX(-8%);
    opacity:.34;
  }
  50%{
    transform:translateX(8%);
    opacity:.68;
  }
}

@media (prefers-reduced-motion:reduce){
  .listen-loading::before,
  .listen-loading::after{
    animation:none;
  }
}

/* =========================================================
   KAFK ÉCOUTE — BULLES CONVERSATION V3
   ========================================================= */

.listen-thread{
  margin:18px 0 26px;
  gap:18px;
}

.listen-thread-message{
  position:relative;
  max-width:76%;
  padding:17px 19px 18px;
  border-radius:22px;
  box-shadow:0 10px 26px rgba(23,23,23,.045);
}

.listen-thread-message p{
  margin:0;
  font-size:16px;
  line-height:1.52;
  white-space:pre-line;
}

.listen-thread-label{
  display:block;
  margin-bottom:7px;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.58;
}

.listen-thread-message.user{
  justify-self:end;
  background:rgba(245,196,172,.78);
  color:#171717;
  border:1px solid rgba(193,112,80,.12);
  border-bottom-right-radius:8px;
}

.listen-thread-message.agent{
  justify-self:start;
  background:rgba(196,224,214,.78);
  color:#171717;
  border:1px solid rgba(85,139,119,.10);
  border-bottom-left-radius:8px;
}

.listen-thread-message.user .listen-thread-label{
  color:#8b4f37;
}

.listen-thread-message.agent .listen-thread-label{
  color:#476f60;
}

.listen-agent{
  padding-bottom:18px;
  margin-bottom:22px;
  border-bottom:1px solid rgba(23,23,23,.07);
}

.listen-agent-mark{
  background:rgba(192,220,210,.9);
  color:#171717;
  border:1px solid rgba(23,23,23,.08);
}

.listen-agent-copy span{
  color:#537164;
}

.listen-agent-copy p{
  max-width:850px;
}

@media (max-width:640px){

  .listen-thread-message{
    max-width:94%;
  }

}

/* =========================================================
   KAFK ÉCOUTE — UX CONVERSATION V4
   ========================================================= */

/* Le label reste accessible mais devient réellement invisible */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Conversation plus resserrée */
.listen-thread{
  gap:10px;
  margin:14px 0 14px;
}

.listen-thread-message{
  max-width:72%;
  padding:14px 16px 15px;
  border-radius:18px;
  box-shadow:0 7px 20px rgba(23,23,23,.035);
}

.listen-thread-message p{
  font-size:15px;
  line-height:1.48;
}

.listen-thread-label{
  margin-bottom:5px;
  font-size:9px;
}

/* Le champ suit immédiatement l'échange */
.listen-form{
  margin-top:10px;
}

.listen-form textarea{
  min-height:108px;
  padding:20px 22px 10px;
  font-size:17px;
}

.listen-form-bottom{
  padding:9px 12px 12px 22px;
}

/* KAFK et VOUS restent proches visuellement */
.listen-thread-message.agent + .listen-thread-message.user,
.listen-thread-message.user + .listen-thread-message.agent{
  margin-top:2px;
}

/* Moins d'espace avant la restitution finale */
.listen-result{
  margin-top:24px;
  padding-top:28px;
}

/* L'indicateur de réflexion reste collé à la conversation */
.listen-loading{
  margin-top:14px;
}

@media (max-width:640px){

  .listen-thread{
    gap:8px;
  }

  .listen-thread-message{
    max-width:94%;
  }

  .listen-form textarea{
    min-height:96px;
  }

}


/* =========================================================
   KAFK — HOME LIGHT V1
   ========================================================= */

.home-activity-light{
  padding:96px max(5vw,32px) 72px;
  background:#f8f5ef;
}

.home-activity-inner{
  max-width:1240px;
  margin:0 auto;
}

.home-activity-light .eyebrow{
  margin:0 0 22px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
}

.home-activity-light h2{
  max-width:1020px;
  margin:0;
  font-size:clamp(44px,5.6vw,76px);
  line-height:.98;
  letter-spacing:-.055em;
}

.home-activity-light h2 em{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}

.home-activity-lead{
  max-width:660px;
  margin:24px 0 0;
  font-size:18px;
  line-height:1.5;
  color:#666;
}

.home-activity-points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:58px;
}

.home-activity-points article{
  position:relative;
  padding:12px 42px 12px 0;
}

.home-activity-points article + article{
  padding-left:42px;
  border-left:1px solid rgba(23,23,23,.10);
}

.home-activity-points span{
  display:block;
  margin-bottom:24px;
  font-size:11px;
  font-weight:800;
  opacity:.42;
}

.home-activity-points h3{
  margin:0 0 10px;
  font-size:28px;
  letter-spacing:-.035em;
}

.home-activity-points p{
  max-width:300px;
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:#666;
}

/* CTA principal sous le bloc */

.home-talk{
  max-width:1240px;
  margin:72px auto 0;
  padding:32px 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  border-radius:28px;
  background:
    linear-gradient(
      110deg,
      rgba(244,200,179,.72),
      rgba(247,231,220,.82)
    );
  border:1px solid rgba(23,23,23,.06);
}

.home-talk-kicker{
  margin:0 0 8px;
  font-size:10px !important;
  font-weight:800;
  letter-spacing:.18em;
}

.home-talk h3{
  margin:0;
  font-size:34px;
  letter-spacing:-.04em;
}

.home-talk p{
  margin:7px 0 0;
  color:#666;
  line-height:1.45;
}

.home-talk-button{
  flex:0 0 auto;
  padding:17px 28px;
  border-radius:999px;
  background:#e96a49;
  color:white;
  text-decoration:none;
  font-weight:800;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.home-talk-button:hover{
  transform:translateY(-2px);
  background:#df5d3e;
  box-shadow:0 14px 30px rgba(105,52,36,.13);
}

/* Parlons-en du header : fini le gros bouton noir */

header a[href="/parlons-en.html"],
.mobile-cta[href="/parlons-en.html"]{
  background:#e96a49 !important;
  color:#fff !important;
  border-color:#e96a49 !important;
}

header a[href="/parlons-en.html"]:hover,
.mobile-cta[href="/parlons-en.html"]:hover{
  background:#df5d3e !important;
  border-color:#df5d3e !important;
}

/* Hero : un seul CTA, donc respiration */

.hero-actions{
  gap:12px;
}

.hero-actions:has(a:only-child){
  justify-content:flex-start;
}

/* MOBILE */

@media(max-width:760px){

  .home-activity-light{
    padding:68px 20px 52px;
  }

  .home-activity-light h2{
    font-size:clamp(40px,12vw,58px);
  }

  .home-activity-points{
    grid-template-columns:1fr;
    margin-top:42px;
  }

  .home-activity-points article{
    padding:25px 0;
    border-top:1px solid rgba(23,23,23,.09);
  }

  .home-activity-points article + article{
    padding-left:0;
    border-left:0;
  }

  .home-activity-points span{
    margin-bottom:12px;
  }

  .home-talk{
    margin-top:42px;
    padding:26px 24px;
    align-items:flex-start;
    flex-direction:column;
    gap:24px;
    border-radius:24px;
  }

  .home-talk-button{
    width:100%;
    text-align:center;
  }

}


/* =========================================================
   KAFK — GRANDS TITRES + ESPACE PRIVÉ FINAL
   ========================================================= */

:root{
  --kafk-title-gradient:
    linear-gradient(
      100deg,
      #171717 0%,
      #171717 28%,
      #6f8b80 66%,
      #8caab5 100%
    );
}

/* Dégradé homogène sur les grands titres de la home */

.hero h1,
.home-activity-light h2,
.accompaniment h2,
.services h2,
.sectors h2,
.restitution h2{
  background:var(--kafk-title-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.hero h1 em,
.home-activity-light h2 em,
.accompaniment h2 em,
.services h2 em,
.sectors h2 em,
.restitution h2 em{
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* Espace privé */

.nav-create-space{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 15px;
  margin-left:8px;
  border:1px solid rgba(23,23,23,.13);
  border-radius:999px;
  background:rgba(255,255,255,.62);
  color:#171717;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.nav-create-space:hover{
  background:#fff;
  border-color:rgba(23,23,23,.24);
  transform:translateY(-1px);
}

/* Site pro reste clairement distinct */

.site-header .header-cta[href="/site-pro-990.html"]{
  background:#e96a49 !important;
  border-color:#e96a49 !important;
  color:#fff !important;
}

.site-header .header-cta[href="/site-pro-990.html"]:hover{
  background:#df5d3e !important;
  border-color:#df5d3e !important;
}

/* Mobile */

.mobile-private-link{
  font-weight:700 !important;
}

@media(max-width:900px){

  .site-header > .nav-create-space{
    display:none;
  }

}


/* KAFK — VISIBLE TITLE GRADIENT V2 START */

/*
   Dégradé réellement visible :
   noir → sauge → bleu.
   fit-content évite que le dégradé soit dilué
   sur toute la largeur de la section.
*/

.home-hero h1,
.home-activity-light h2,
.entrepreneur-section h2,
.agent-section h2,
.seo-home h2,
.proof h2,
.final-cta h2{
  width:fit-content;
  max-width:100%;

  background:
    linear-gradient(
      100deg,
      #151515 0%,
      #151515 24%,
      #617d75 61%,
      #76a4ae 100%
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

/*
   Les parties italiques participent au même traitement
   au lieu de reprendre leur ancienne couleur fixe.
*/

.home-hero h1 em,
.home-activity-light h2 em,
.entrepreneur-section h2 em,
.agent-section h2 em,
.seo-home h2 em,
.proof h2 em,
.final-cta h2 em{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

/*
   On descend légèrement le bloc
   "Échangeons simplement".
*/

.home-talk{
  margin-top:70px !important;
}

@media(max-width:900px){

  .home-talk{
    margin-top:58px !important;
  }

}

/* KAFK — VISIBLE TITLE GRADIENT V2 END */



/* =========================================================
   KAFK — 4 AGENTS SHOWCASE
   ========================================================= */

.kafk-agent-showcase{
  padding-top:110px;
  padding-bottom:110px;
}

.kafk-agent-showcase-head{
  max-width:850px;
  margin-bottom:55px;
}

.kafk-agent-showcase-head h2{
  margin:12px 0 22px;
  font-size:clamp(54px,6.2vw,96px);
  line-height:.92;
  letter-spacing:-.055em;
}

.kafk-agent-showcase-head>p:last-child{
  max-width:720px;
  font-size:19px;
  line-height:1.55;
  color:#555;
}


.kafk-agent-tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-bottom:14px;
}

.kafk-agent-tab{
  appearance:none;
  border:0;
  border-radius:18px;
  padding:22px;
  background:#eeeae3;
  color:#171717;
  font:inherit;
  font-weight:900;
  text-align:left;
  cursor:pointer;
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.kafk-agent-tab span{
  display:block;
  margin-bottom:28px;
  font-size:10px;
  opacity:.55;
}

.kafk-agent-tab:hover{
  transform:translateY(-2px);
}

.kafk-agent-tab.active{
  background:#17221d;
  color:#fff;
}


.kafk-agent-stage{
  position:relative;
}

.kafk-agent-demo{
  display:none;
  grid-template-columns:.78fr 1.22fr;
  gap:70px;
  align-items:center;
  min-height:600px;
  padding:70px;
  border-radius:32px;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(210,232,221,.9),
      transparent 38%
    ),
    #f2f0ea;
}

.kafk-agent-demo.active{
  display:grid;
}

.kafk-agent-demo-copy h3{
  margin:12px 0 20px;
  max-width:520px;
  font-size:clamp(38px,4vw,64px);
  line-height:.96;
  letter-spacing:-.045em;
}

.kafk-agent-demo-copy>p:not(.eyebrow){
  max-width:480px;
  margin-bottom:28px;
  font-size:18px;
  line-height:1.55;
  color:#555;
}


.kafk-agent-animation{
  min-height:460px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.kafk-agent-label{
  margin:0 0 24px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.18em;
}


.kafk-agent-message,
.kafk-agent-result{
  border-radius:27px;
  padding:30px 34px;
}

.kafk-agent-message{
  background:#f2dcd3;
}

.kafk-agent-result{
  background:#d4e7dd;
}

.kafk-agent-message small,
.kafk-agent-result small{
  display:block;
  margin-bottom:16px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  opacity:.55;
}

.kafk-agent-message strong{
  display:block;
  font-size:clamp(22px,2vw,32px);
  line-height:1.35;
}

.kafk-agent-result strong{
  display:block;
  margin-bottom:9px;
  font-size:clamp(21px,2vw,29px);
}

.kafk-agent-result span{
  display:block;
  margin-top:7px;
  font-size:16px;
  font-weight:700;
}

.kafk-agent-arrow{
  padding:13px 0;
  font-size:42px;
  line-height:1;
  text-align:center;
}


/* ANIMATION */

.kafk-agent-demo.active .kafk-agent-step{
  opacity:0;
  transform:translateY(15px);
  animation:kafkAgentReveal .55s ease forwards;
}

.kafk-agent-demo.active .s1{
  animation-delay:.15s;
}

.kafk-agent-demo.active .s2{
  animation-delay:.85s;
}

.kafk-agent-demo.active .s3{
  animation-delay:1.45s;
}

@keyframes kafkAgentReveal{
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* FRONTIERE DES OFFRES */

.kafk-agent-boundary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}

.kafk-agent-boundary>div{
  padding:27px 30px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
}

.kafk-agent-boundary span{
  display:block;
  margin-bottom:8px;
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
  color:#72887d;
}

.kafk-agent-boundary strong{
  display:block;
  font-size:17px;
  line-height:1.35;
}


@media(max-width:800px){

  .kafk-agent-showcase{
    padding-top:70px;
    padding-bottom:70px;
  }

  .kafk-agent-tabs{
    grid-template-columns:1fr 1fr;
  }

  .kafk-agent-tab{
    padding:18px;
  }

  .kafk-agent-tab span{
    margin-bottom:14px;
  }

  .kafk-agent-demo{
    grid-template-columns:1fr;
    gap:35px;
    min-height:0;
    padding:28px 20px;
  }

  .kafk-agent-animation{
    min-height:390px;
  }

  .kafk-agent-message,
  .kafk-agent-result{
    padding:24px;
    border-radius:22px;
  }

  .kafk-agent-boundary{
    grid-template-columns:1fr;
  }

}

@media(prefers-reduced-motion:reduce){

  .kafk-agent-demo.active .kafk-agent-step{
    opacity:1;
    transform:none;
    animation:none;
  }

}

/* =========================================================
   KAFK AGENT — RESET + ANIMATION DE TRAVAIL
   ========================================================= */

/* Neutralise les anciennes rotations du site */
.kafk-agent-showcase .kafk-agent-message,
.kafk-agent-showcase .kafk-agent-result,
.kafk-agent-showcase .kafk-agent-arrow,
.kafk-agent-showcase .kafk-agent-step{
  rotate:0deg !important;
  transform:translateY(0) !important;
}

/* On abandonne l'ancien reveal */
.kafk-agent-demo.active .kafk-agent-step{
  animation:none;
}

/* Message */
.kafk-agent-message{
  position:relative;
}

/* Texte tapé */
.kafk-agent-message strong{
  display:block;
}

/* Curseur machine à écrire */
.kafk-agent-message strong::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:5px;
  background:currentColor;
  vertical-align:-.08em;
  animation:kafkCursor .7s steps(1) infinite;
}

/* Le résultat est caché avant traitement */
.kafk-agent-result{
  opacity:0;
  transform:translateY(12px) !important;
}

/* Flèche */
.kafk-agent-arrow{
  opacity:0;
}

/* Quand le JS a fini d'écrire */
.kafk-agent-demo.agent-message-done .kafk-agent-arrow{
  animation:kafkArrowIn .35s ease forwards;
}

.kafk-agent-demo.agent-message-done .kafk-agent-result{
  animation:kafkResultIn .55s .35s ease forwards;
}

.kafk-agent-demo.agent-message-done .kafk-agent-message strong::after{
  display:none;
}

@keyframes kafkCursor{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

@keyframes kafkArrowIn{
  from{
    opacity:0;
    transform:translateY(-8px) !important;
  }
  to{
    opacity:1;
    transform:translateY(0) !important;
  }
}

@keyframes kafkResultIn{
  from{
    opacity:0;
    transform:translateY(12px) !important;
  }
  to{
    opacity:1;
    transform:translateY(0) !important;
  }
}



/* =========================================================
   KAFK AGENT — ANALYSE + RESULTAT FINAL
   ========================================================= */

.kafk-agent-result{
  position:relative;
  overflow:hidden;
}

.kafk-agent-result span{
  min-height:1.3em;
}

.kafk-agent-result span.agent-line-visible::before{
  content:"✓";
  display:inline-block;
  margin-right:9px;
  font-weight:900;
}


/* TRAITEMENT */

.kafk-agent-processing{
  display:flex;
  align-items:center;
  gap:12px;

  margin-top:22px;
  padding-top:18px;

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

  font-size:14px;
  font-weight:700;

  opacity:.65;
}


.kafk-agent-dots{
  display:flex !important;
  gap:4px;
  margin:0 !important;
}

.kafk-agent-dots i{
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#18372c;

  animation:kafkAgentDot 1s infinite;
}

.kafk-agent-dots i:nth-child(2){
  animation-delay:.15s;
}

.kafk-agent-dots i:nth-child(3){
  animation-delay:.30s;
}

@keyframes kafkAgentDot{

  0%,60%,100%{
    opacity:.25;
    transform:translateY(0);
  }

  30%{
    opacity:1;
    transform:translateY(-4px);
  }

}


/* RESULTAT FINAL */

.kafk-agent-final{

  margin-top:22px;
  padding:20px 22px;

  border-radius:16px;

  background:rgba(255,255,255,.68);

  opacity:0;
  transform:translateY(10px);

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

.kafk-agent-final.visible{
  opacity:1;
  transform:translateY(0);
}

.kafk-agent-final small{
  display:block;
  margin-bottom:8px;

  font-size:9px;
  font-weight:950;
  letter-spacing:.14em;
  opacity:.55;
}

.kafk-agent-final strong{
  display:block;
  margin:0 0 7px;

  font-size:18px;
  line-height:1.25;
}

.kafk-agent-final span{
  display:block;
  margin:0;

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


/* CURSEUR PENDANT LA FRAPPE */

.kafk-agent-message strong::after,
.kafk-agent-processing + *::after{
  animation:kafkCursor .65s steps(1) infinite;
}


/* MOBILE */

@media(max-width:800px){

  .kafk-agent-final{
    padding:17px;
  }

  .kafk-agent-processing{
    margin-top:17px;
  }

}



/* =========================================================
   KAFK AGENT — FIX MESSAGE ENTRANT
   ========================================================= */

.kafk-agent-demo.active .kafk-agent-message{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
}

.kafk-agent-demo.active .kafk-agent-message small,
.kafk-agent-demo.active .kafk-agent-message strong{
  opacity:1 !important;
  visibility:visible !important;
}



/* =========================================================
   KAFK AGENT — RESULTAT FLUIDE V2
   ========================================================= */

/* On allège les blocs : moins "cartes empilées" */

.kafk-agent-showcase .kafk-agent-message{
  border-radius:18px;
  padding:26px 30px;
  box-shadow:none;
}

.kafk-agent-showcase .kafk-agent-result{
  border-radius:0;
  padding:30px 34px 24px;
  background:transparent;
  border-top:1px solid rgba(20,40,30,.14);
  box-shadow:none;
}

/* La flèche devient une transition, pas une carte */

.kafk-agent-showcase .kafk-agent-arrow{
  padding:16px 0 12px;
  background:transparent !important;
  font-size:34px;
}

/* Hiérarchie du résultat */

.kafk-agent-result > small{
  margin-bottom:12px;
}

.kafk-agent-result > strong{
  margin-bottom:20px;
  font-size:clamp(27px,2.4vw,38px);
  line-height:1.05;
}

.kafk-agent-result > span{
  position:relative;
  display:block;
  margin:0;
  padding:7px 0 7px 22px;
  font-size:16px;
  line-height:1.35;
  font-weight:650;
}

.kafk-agent-result > span::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#789488;
}

/* PROCHAINE ETAPE : intégrée au flux */

.kafk-agent-next{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid rgba(20,40,30,.18);
}

.kafk-agent-next small{
  display:block;
  margin-bottom:9px;
  font-size:10px;
  font-weight:950;
  letter-spacing:.15em;
  color:#70867b;
}

.kafk-agent-next > b{
  display:block;
  margin-bottom:13px;
  font-size:20px;
  line-height:1.2;
}

.kafk-agent-next span{
  display:block;
  margin-top:6px;
  font-size:15px;
  line-height:1.35;
  font-weight:750;
}

/* apparition progressive de la recommandation */

.kafk-agent-demo.agent-message-done .kafk-agent-next{
  animation:kafkNextIn .5s 1.05s ease both;
}

@keyframes kafkNextIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:800px){

  .kafk-agent-showcase .kafk-agent-result{
    padding:25px 4px 18px;
  }

  .kafk-agent-result > strong{
    font-size:27px;
  }

  .kafk-agent-result > span{
    font-size:15px;
  }

}



/* =========================================================
   KAFK AGENT — FRONTIERE TARIFAIRE V2
   ========================================================= */

.kafk-agent-boundary{
  gap:16px;
  margin-top:22px;
}

.kafk-agent-boundary .kafk-agent-offer{
  position:relative;
  min-height:210px;
  padding:30px 34px 32px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  border-radius:24px;
}

.kafk-agent-offer-main{
  background:#17241e !important;
  color:#fff;
  border-color:#17241e !important;
}

.kafk-agent-offer-advanced{
  background:#fff !important;
}

.kafk-agent-boundary .kafk-agent-offer > span{
  margin:0 0 16px;
  font-size:10px;
  font-weight:950;
  letter-spacing:.16em;
  color:#789186;
}

.kafk-agent-offer-main > span{
  color:#a9c4b8 !important;
}

.kafk-agent-price{
  display:block !important;
  margin:0 0 20px;
  font-size:clamp(38px,3.7vw,58px) !important;
  line-height:.95 !important;
  letter-spacing:-.045em;
}

.kafk-agent-price small{
  font-size:.34em;
  letter-spacing:.02em;
  opacity:.62;
}

.kafk-agent-offer p{
  margin:auto 0 0;
  font-size:16px;
  line-height:1.45;
}

.kafk-agent-offer p b{
  font-size:18px;
}

.kafk-agent-offer-main p{
  color:rgba(255,255,255,.82);
}

.kafk-agent-offer-main p b{
  color:#fff;
}

@media(max-width:800px){

  .kafk-agent-boundary .kafk-agent-offer{
    min-height:180px;
    padding:26px;
  }

  .kafk-agent-price{
    font-size:42px !important;
  }

}


/* =========================================================
   AGENT IA — CONTRASTE FINAL
   ========================================================= */

.kafk-agent-demo{
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(185, 222, 204, .78),
      transparent 42%
    ),
    #f1eee7;
}

.kafk-agent-message{
  background:#f1d3c8;
}

.kafk-agent-result{
  background:#c9e2d6;
}

.kafk-agent-final{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(20,55,42,.10);
}

.kafk-agent-offer-main{
  background:#13281f !important;
}

.kafk-agent-offer-advanced{
  background:#f7f5ef !important;
  border:1px solid rgba(20,40,30,.12) !important;
}


/* =========================================================
   HERO — AGENT IA LUDIQUE
   ========================================================= */

.home-hero h1 em{
  display:block;
}

.hero-ai-play{
  margin-top:18px;
  padding:20px 22px;
  border-radius:22px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(18,40,31,.10);
}

.hero-ai-play-copy{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:14px;
}

.hero-ai-play-copy span{
  font-size:10px;
  font-weight:950;
  letter-spacing:.17em;
  color:#71877c;
}

.hero-ai-play-copy strong{
  font-size:18px;
}

.hero-ai-examples{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}

.hero-ai-examples button{
  appearance:none;
  border:1px solid rgba(20,40,32,.12);
  border-radius:999px;
  padding:11px 10px;
  background:#f4f1eb;
  color:#17231e;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.hero-ai-examples button:hover{
  background:#14271f;
  color:#fff;
  transform:translateY(-2px);
}

.hero-ai-hint{
  margin:10px 2px 0;
  font-size:11px;
  font-weight:700;
  color:#748078;
}


/* MOBILE */

@media(max-width:800px){

  .home-hero h1 br{
    display:none;
  }

  .hero-ai-play{
    margin-top:14px;
    padding:17px;
    border-radius:18px;
  }

  .hero-ai-play-copy{
    display:block;
  }

  .hero-ai-play-copy span{
    display:block;
    margin-bottom:5px;
  }

  .hero-ai-play-copy strong{
    font-size:17px;
  }

  .hero-ai-examples{
    grid-template-columns:1fr 1fr;
  }

  .hero-ai-examples button{
    min-height:44px;
    padding:10px 8px;
  }

}

@media(max-width:420px){

  .hero-ai-examples{
    gap:6px;
  }

  .hero-ai-examples button{
    font-size:12px;
  }

}

/* HERO IA — hauteur naturelle du message */

.hero-tool-ai .request-chaos{
  min-height:0 !important;
  height:auto !important;
  padding:26px 28px;
}

.hero-tool-ai .client-typing{
  min-height:0 !important;
}

/* Mobile */
@media(max-width:800px){

  .hero-tool-ai .request-chaos{
    padding:24px;
  }

}


/* =========================================================
   HERO IA — RETOUR DISCRET
   ========================================================= */

.hero-ai-hint{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.hero-ai-reset{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;

  font:inherit;
  font-size:13px;
  font-weight:800;
  color:#6f837a;

  cursor:pointer;
  transition:
    color .18s ease,
    transform .18s ease;
}

.hero-ai-reset:hover{
  color:#111;
  transform:translateX(-2px);
}

.hero-ai-reset::before{
  content:"↺";
  display:inline-block;
  margin-right:5px;
}


/* MOBILE */

@media(max-width:800px){

  .hero-ai-hint{
    justify-content:space-between;
    gap:8px;
  }

  .hero-ai-reset{
    font-size:12px;
  }

}


/* =========================================================
   KAFK OFFRES — LAYOUT FINAL
   ========================================================= */

.kafk-offer.section{
  display:block !important;
  background:#f5f2ec !important;
  color:#171717 !important;
  padding:80px 4vw 55px !important;
}

.kafk-offer .kafk-offer-head{
  width:100% !important;
  max-width:760px !important;
  margin:0 0 42px !important;
}

.kafk-offer .kafk-offer-levels{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
}

.kafk-offer .kafk-offer-level{
  width:auto !important;
  min-width:0 !important;
  min-height:520px !important;

  display:flex !important;
  flex-direction:column !important;

  padding:30px !important;
  margin:0 !important;

  border:0 !important;
  border-radius:28px !important;
  box-sizing:border-box !important;
}


/* 990 */

.kafk-offer .kafk-offer-level-main{
  background:#dcebe4 !important;
}


/* 2490 */

.kafk-offer .kafk-offer-level-advanced{
  background:#dce6ef !important;
}


/* SUR DEVIS */

.kafk-offer .kafk-offer-level-custom{
  background:#f0ddd3 !important;
}


.kafk-offer .kafk-offer-kicker{
  display:block !important;
  margin:0 0 22px !important;

  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
}


.kafk-offer .kafk-offer-level-price{
  display:block !important;

  margin:0 0 32px !important;

  font-size:58px !important;
  line-height:.92 !important;
  font-weight:900 !important;
  letter-spacing:-.055em !important;

  color:#171717 !important;
}


.kafk-offer .kafk-offer-level-price small{
  font-size:14px !important;
  letter-spacing:0 !important;
}


.kafk-offer .kafk-offer-level-quote{
  font-size:49px !important;
}


.kafk-offer .kafk-offer-level h3{
  margin:0 0 14px !important;

  font-size:25px !important;
  line-height:1.08 !important;
  font-weight:850 !important;
}


.kafk-offer .kafk-offer-level > p{
  margin:0 0 23px !important;

  font-size:15px !important;
  line-height:1.5 !important;
  color:#4f514f !important;
}


.kafk-offer .kafk-offer-level ul{
  list-style:none !important;
  padding:0 !important;
  margin:0 0 28px !important;
}


.kafk-offer .kafk-offer-level li{
  display:block !important;

  padding:9px 0 !important;
  margin:0 !important;

  border-bottom:1px solid rgba(23,23,23,.10) !important;

  font-size:14px !important;
  line-height:1.3 !important;
  font-weight:700 !important;
}


.kafk-offer .kafk-offer-level .button,
.kafk-offer .kafk-offer-level .text-link{
  margin-top:auto !important;
  align-self:flex-start !important;
}


/* INFOS COMMUNES */

.kafk-offer .kafk-offer-included{
  width:100% !important;

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

  gap:14px !important;
  margin:14px 0 0 !important;
}


.kafk-offer .kafk-offer-included p{
  margin:0 !important;
  padding:20px 24px !important;

  background:rgba(255,255,255,.72) !important;
  border-radius:18px !important;

  font-size:13px !important;
  line-height:1.4 !important;
}


.kafk-offer .kafk-offer-included strong{
  display:block !important;
  margin-bottom:4px !important;

  color:#171717 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:800px){

  .kafk-offer.section{
    padding:55px 18px 35px !important;
  }

  .kafk-offer .kafk-offer-head{
    margin-bottom:28px !important;
  }

  .kafk-offer .kafk-offer-levels,
  .kafk-offer .kafk-offer-included{
    grid-template-columns:1fr !important;
  }

  .kafk-offer .kafk-offer-level{
    min-height:0 !important;
    padding:26px 23px !important;
  }

  .kafk-offer .kafk-offer-level-price{
    font-size:50px !important;
    margin-bottom:27px !important;
  }

  .kafk-offer .kafk-offer-level-quote{
    font-size:42px !important;
  }

}


/* =========================================================
   REALISATIONS — CTA SITE
   ========================================================= */

.realisations-site-cta{
  grid-column:1 / -1;

  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  box-sizing:border-box;
  padding:18px 22px;
  margin-bottom:4px;

  border-radius:999px;
  background:#ef694c;
  color:#fff !important;

  font-size:15px;
  line-height:1;
  font-weight:850;
  text-decoration:none;

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

.realisations-site-cta:hover{
  transform:translateY(-2px);
  opacity:.92;
}

@media(max-width:800px){

  .realisations-site-cta{
    padding:17px 18px;
    font-size:14px;
  }

}

/* =========================================================
   TARIFS — NOUVELLE STRUCTURE
   ========================================================= */

.tariff-new{
  padding-top:80px;
  padding-bottom:80px;
}

.tariff-new-head{
  max-width:760px;
  margin-bottom:40px;
}

.tariff-new-head h2{
  margin:10px 0 0;
  font-size:clamp(38px,4.5vw,64px);
  line-height:1;
  letter-spacing:-.04em;
}

.tariff-new-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.tariff-new-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:540px;
  padding:32px;
  border-radius:28px;
  box-sizing:border-box;
}

.tariff-new-card--base{
  background:#dcebe4;
}

.tariff-new-card--advanced{
  background:#dce6ef;
}

.tariff-new-card--custom{
  background:#f0ddd3;
}

.tariff-new-kicker{
  display:block;
  margin-bottom:24px;
  font-size:11px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.14em;
}

.tariff-new-price{
  display:block;
  margin-bottom:32px;
  font-size:clamp(48px,4.3vw,66px);
  line-height:.9;
  font-weight:900;
  letter-spacing:-.055em;
}

.tariff-new-price small{
  font-size:14px;
  letter-spacing:0;
}

.tariff-new-price--quote{
  font-size:clamp(40px,3.5vw,55px);
}

.tariff-new-card h3{
  margin:0 0 14px;
  font-size:25px;
  line-height:1.08;
}

.tariff-new-card > p{
  margin:0 0 24px;
  font-size:15px;
  line-height:1.5;
  color:#515451;
}

.tariff-new-card ul,
.tariff-after-card ul{
  list-style:none;
  padding:0;
  margin:0 0 30px;
}

.tariff-new-card li,
.tariff-after-card li{
  padding:9px 0;
  border-bottom:1px solid rgba(0,0,0,.09);
  font-size:14px;
  font-weight:700;
}

.tariff-new-card .button,
.tariff-new-card .text-link{
  margin-top:auto;
  align-self:flex-start;
}


/* =========================================================
   TARIFS — COMPRIS
   ========================================================= */

.tariff-common{
  background:#e4eee9;
  border-radius:34px;
}

.tariff-common .section-head{
  max-width:720px;
  margin-bottom:40px;
}

.tariff-common .section-head h2{
  font-size:clamp(40px,4.5vw,64px);
  line-height:1;
  letter-spacing:-.04em;
}

.tariff-common .section-head h2 em{
  display:block;
  font-weight:400;
}

.tariff-common-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.tariff-common-grid article{
  padding:28px;
  border-radius:22px;
  background:rgba(255,255,255,.65);
}

.tariff-common-grid article > span{
  display:block;
  margin-bottom:50px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  opacity:.55;
}

.tariff-common-grid h3{
  margin:0 0 12px;
  font-size:24px;
}

.tariff-common-grid p{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:#555;
}


/* =========================================================
   TARIFS — APRÈS LIVRAISON
   ========================================================= */

.tariff-after{
  padding-top:90px;
  padding-bottom:80px;
}

.tariff-after .section-head{
  max-width:780px;
  margin-bottom:42px;
}

.tariff-after .section-head h2{
  margin-bottom:20px;
  font-size:clamp(40px,4.5vw,64px);
  line-height:1;
  letter-spacing:-.04em;
}

.tariff-after .section-head h2 em{
  display:block;
  font-weight:400;
}

.tariff-after .section-head > p:last-child{
  max-width:680px;
  font-size:17px;
  line-height:1.55;
  color:#62625f;
}

.tariff-after-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.tariff-after-card{
  min-width:0;
  padding:30px;
  border-radius:26px;
  box-sizing:border-box;
}

.tariff-after-card--simple{
  background:#dcebe4;
}

.tariff-after-card--plus{
  background:#f0ddd3;
}

.tariff-after-card--custom{
  background:#dce6ef;
}

.tariff-after-price{
  display:block;
  margin:0 0 30px;
  font-size:52px;
  line-height:.9;
  font-weight:900;
  letter-spacing:-.05em;
}

.tariff-after-price small{
  font-size:13px;
  letter-spacing:0;
}

.tariff-after-price--quote{
  font-size:43px;
}

.tariff-after-card h3{
  margin:0 0 14px;
  font-size:24px;
  line-height:1.08;
}

.tariff-after-card > p{
  margin:0 0 22px;
  font-size:15px;
  line-height:1.5;
  color:#555;
}

.tariff-after-note{
  margin:14px 0 0;
  padding:18px 22px;
  border-radius:16px;
  background:#f2f0eb;
  font-size:13px;
  color:#62625f;
}


/* =========================================================
   TARIFS — MOBILE
   ========================================================= */

@media(max-width:800px){

  .tariff-new,
  .tariff-after{
    padding-top:55px;
    padding-bottom:55px;
  }

  .tariff-new-grid,
  .tariff-common-grid,
  .tariff-after-grid{
    grid-template-columns:1fr;
  }

  .tariff-new-card{
    min-height:0;
    padding:26px 23px;
  }

  .tariff-new-price{
    font-size:50px;
    margin-bottom:27px;
  }

  .tariff-new-price--quote{
    font-size:42px;
  }

  .tariff-common{
    border-radius:25px;
  }

  .tariff-common-grid article{
    padding:24px;
  }

  .tariff-common-grid article > span{
    margin-bottom:30px;
  }

  .tariff-after-card{
    padding:26px 23px;
  }

  .tariff-after-price{
    font-size:48px;
  }

  .tariff-after-price--quote{
    font-size:40px;
  }

}


/* =========================================================
   TARIFS — NOUVELLE STRUCTURE
   ========================================================= */

.tariff-new{
  padding-top:80px;
  padding-bottom:80px;
}

.tariff-new-head{
  max-width:760px;
  margin-bottom:40px;
}

.tariff-new-head h2{
  margin:10px 0 0;
  font-size:clamp(38px,4.5vw,64px);
  line-height:1;
  letter-spacing:-.04em;
}

.tariff-new-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.tariff-new-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:540px;
  padding:32px;
  border-radius:28px;
  box-sizing:border-box;
}

.tariff-new-card--base{
  background:#dcebe4;
}

.tariff-new-card--advanced{
  background:#dce6ef;
}

.tariff-new-card--custom{
  background:#f0ddd3;
}

.tariff-new-kicker{
  display:block;
  margin-bottom:24px;
  font-size:11px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.14em;
}

.tariff-new-price{
  display:block;
  margin-bottom:32px;
  font-size:clamp(48px,4.3vw,66px);
  line-height:.9;
  font-weight:900;
  letter-spacing:-.055em;
}

.tariff-new-price small{
  font-size:14px;
  letter-spacing:0;
}

.tariff-new-price--quote{
  font-size:clamp(40px,3.5vw,55px);
}

.tariff-new-card h3{
  margin:0 0 14px;
  font-size:25px;
  line-height:1.08;
}

.tariff-new-card > p{
  margin:0 0 24px;
  font-size:15px;
  line-height:1.5;
  color:#515451;
}

.tariff-new-card ul,
.tariff-after-card ul{
  list-style:none;
  padding:0;
  margin:0 0 30px;
}

.tariff-new-card li,
.tariff-after-card li{
  padding:9px 0;
  border-bottom:1px solid rgba(0,0,0,.09);
  font-size:14px;
  font-weight:700;
}

.tariff-new-card .button,
.tariff-new-card .text-link{
  margin-top:auto;
  align-self:flex-start;
}


/* =========================================================
   TARIFS — COMPRIS
   ========================================================= */

.tariff-common{
  background:#e4eee9;
  border-radius:34px;
}

.tariff-common .section-head{
  max-width:720px;
  margin-bottom:40px;
}

.tariff-common .section-head h2{
  font-size:clamp(40px,4.5vw,64px);
  line-height:1;
  letter-spacing:-.04em;
}

.tariff-common .section-head h2 em{
  display:block;
  font-weight:400;
}

.tariff-common-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.tariff-common-grid article{
  padding:28px;
  border-radius:22px;
  background:rgba(255,255,255,.65);
}

.tariff-common-grid article > span{
  display:block;
  margin-bottom:50px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  opacity:.55;
}

.tariff-common-grid h3{
  margin:0 0 12px;
  font-size:24px;
}

.tariff-common-grid p{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:#555;
}


/* =========================================================
   TARIFS — APRÈS LIVRAISON
   ========================================================= */

.tariff-after{
  padding-top:90px;
  padding-bottom:80px;
}

.tariff-after .section-head{
  max-width:780px;
  margin-bottom:42px;
}

.tariff-after .section-head h2{
  margin-bottom:20px;
  font-size:clamp(40px,4.5vw,64px);
  line-height:1;
  letter-spacing:-.04em;
}

.tariff-after .section-head h2 em{
  display:block;
  font-weight:400;
}

.tariff-after .section-head > p:last-child{
  max-width:680px;
  font-size:17px;
  line-height:1.55;
  color:#62625f;
}

.tariff-after-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.tariff-after-card{
  min-width:0;
  padding:30px;
  border-radius:26px;
  box-sizing:border-box;
}

.tariff-after-card--simple{
  background:#dcebe4;
}

.tariff-after-card--plus{
  background:#f0ddd3;
}

.tariff-after-card--custom{
  background:#dce6ef;
}

.tariff-after-price{
  display:block;
  margin:0 0 30px;
  font-size:52px;
  line-height:.9;
  font-weight:900;
  letter-spacing:-.05em;
}

.tariff-after-price small{
  font-size:13px;
  letter-spacing:0;
}

.tariff-after-price--quote{
  font-size:43px;
}

.tariff-after-card h3{
  margin:0 0 14px;
  font-size:24px;
  line-height:1.08;
}

.tariff-after-card > p{
  margin:0 0 22px;
  font-size:15px;
  line-height:1.5;
  color:#555;
}

.tariff-after-note{
  margin:14px 0 0;
  padding:18px 22px;
  border-radius:16px;
  background:#f2f0eb;
  font-size:13px;
  color:#62625f;
}


/* =========================================================
   TARIFS — MOBILE
   ========================================================= */

@media(max-width:800px){

  .tariff-new,
  .tariff-after{
    padding-top:55px;
    padding-bottom:55px;
  }

  .tariff-new-grid,
  .tariff-common-grid,
  .tariff-after-grid{
    grid-template-columns:1fr;
  }

  .tariff-new-card{
    min-height:0;
    padding:26px 23px;
  }

  .tariff-new-price{
    font-size:50px;
    margin-bottom:27px;
  }

  .tariff-new-price--quote{
    font-size:42px;
  }

  .tariff-common{
    border-radius:25px;
  }

  .tariff-common-grid article{
    padding:24px;
  }

  .tariff-common-grid article > span{
    margin-bottom:30px;
  }

  .tariff-after-card{
    padding:26px 23px;
  }

  .tariff-after-price{
    font-size:48px;
  }

  .tariff-after-price--quote{
    font-size:40px;
  }

}


/* TARIFS — BLOG MIS EN AVANT */

.tariff-common-blog{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:.65fr 1.35fr 2fr;
  align-items:center;
  gap:30px;
  padding:34px 38px !important;
  background:#e7ddf5 !important;
}

.tariff-common-blog > span{
  margin:0 !important;
  opacity:1 !important;
  font-size:11px !important;
  font-weight:900;
  letter-spacing:.14em;
}

.tariff-common-blog h3{
  margin:0;
  font-size:clamp(25px,2.4vw,36px);
  line-height:1.05;
}

.tariff-common-blog p{
  margin:0;
  max-width:600px;
  font-size:16px;
  line-height:1.5;
}

@media(max-width:800px){

  .tariff-common-blog{
    grid-column:auto;
    display:block;
    padding:28px 24px !important;
  }

  .tariff-common-blog > span{
    display:block;
    margin-bottom:28px !important;
  }

  .tariff-common-blog h3{
    margin-bottom:16px;
    font-size:29px;
  }

}

/* =========================================================
   TARIFS — OFFRES ENRICHIES
   ========================================================= */

.tariff-new-head{
  max-width:900px;
}

.tariff-new-head h2 em{
  display:block;
  font-weight:400;
}

.tariff-new-intro{
  max-width:720px;
  margin:22px 0 0;
  font-size:18px;
  line-height:1.5;
  color:#5c5c59;
}

.tariff-new-card{
  min-height:660px;
}

.tariff-new-card > p{
  min-height:92px;
}

.tariff-new-card li{
  position:relative;
  padding:10px 0 10px 27px;
}

.tariff-new-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:9px;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  font-size:10px;
  font-weight:900;
}

.tariff-outline-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  margin-top:auto;
  padding:15px 20px;
  border:1.5px solid #171717;
  border-radius:999px;
  color:#171717 !important;
  background:transparent;
  text-decoration:none;
  font-weight:850;
}

.tariff-card-note{
  display:block;
  margin-top:18px;
  font-size:12px;
  line-height:1.45;
  color:#666;
}


/* =========================================================
   TARIFS — PRESSÉ ?
   ========================================================= */

.tariff-fast{
  display:grid;
  grid-template-columns:1.15fr 2fr auto;
  gap:36px;
  align-items:center;
  margin-top:18px;
  padding:34px 38px;
  border-radius:28px;
  background:#e7ddf5;
}

.tariff-fast-copy h3{
  margin:8px 0 10px;
  font-size:clamp(28px,2.6vw,40px);
  line-height:1;
  letter-spacing:-.035em;
}

.tariff-fast-copy > p:last-child{
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:#5e5b64;
}

.tariff-fast-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.tariff-fast-steps > div{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px;
  align-items:start;
}

.tariff-fast-steps span{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  font-size:11px;
  font-weight:900;
}

.tariff-fast-steps p{
  margin:0;
  font-size:12px;
  line-height:1.4;
}

.tariff-fast-steps strong{
  display:block;
  margin-bottom:3px;
}

.tariff-fast-action{
  text-align:center;
}

.tariff-fast-action .button{
  white-space:nowrap;
}

.tariff-fast-action small{
  display:block;
  margin-top:12px;
  font-size:11px;
  line-height:1.4;
  color:#666;
}


/* =========================================================
   TARIFS — ESPACE PRIVÉ
   ========================================================= */

.tariff-space{
  margin-top:20px;
  border-radius:34px;
  background:#f0ece5;
}

.tariff-space-head{
  max-width:800px;
  margin-bottom:45px;
}

.tariff-space-head h2{
  margin:10px 0 12px;
  font-size:clamp(42px,4.5vw,66px);
  line-height:1;
  letter-spacing:-.045em;
}

.tariff-space-head > p:last-child{
  margin:0;
  font-size:17px;
  color:#5d5b57;
}

.tariff-space-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}

.tariff-space-grid article{
  padding:10px 34px 30px;
  border-right:1px solid rgba(0,0,0,.1);
}

.tariff-space-grid article:first-child{
  padding-left:0;
}

.tariff-space-grid article:last-child{
  border-right:0;
  padding-right:0;
}

.tariff-space-number{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:28px;
  border-radius:50%;
  background:#dcebe4;
  font-size:13px;
  font-weight:900;
}

.tariff-space-grid article:nth-child(2) .tariff-space-number{
  background:#dce6ef;
}

.tariff-space-grid article:nth-child(3) .tariff-space-number{
  background:#f0ddd3;
}

.tariff-space-grid h3{
  margin:0 0 12px;
  font-size:21px;
}

.tariff-space-grid p{
  margin:0;
  max-width:390px;
  font-size:14px;
  line-height:1.55;
  color:#5b5955;
}

.tariff-space-reassurance{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:30px;
  padding:20px 24px;
  border-radius:18px;
  background:rgba(255,255,255,.7);
}

.tariff-space-reassurance p{
  margin:0;
  font-size:14px;
}

.tariff-space-reassurance strong{
  margin-right:4px;
}

.tariff-space-reassurance a:not(.button){
  color:#171717;
  font-weight:800;
  text-decoration:underline;
}


/* =========================================================
   TARIFS — MOBILE
   ========================================================= */

@media(max-width:800px){

  .tariff-new-card{
    min-height:0;
  }

  .tariff-new-card > p{
    min-height:0;
  }

  .tariff-new-card .button,
  .tariff-outline-button{
    width:100%;
    box-sizing:border-box;
  }

  .tariff-fast{
    grid-template-columns:1fr;
    gap:28px;
    padding:28px 23px;
  }

  .tariff-fast-steps{
    grid-template-columns:1fr;
    gap:18px;
  }

  .tariff-fast-action{
    text-align:left;
  }

  .tariff-fast-action .button{
    width:100%;
    box-sizing:border-box;
  }

  .tariff-space{
    border-radius:25px;
  }

  .tariff-space-grid{
    grid-template-columns:1fr;
  }

  .tariff-space-grid article,
  .tariff-space-grid article:first-child,
  .tariff-space-grid article:last-child{
    padding:25px 0;
    border-right:0;
    border-bottom:1px solid rgba(0,0,0,.1);
  }

  .tariff-space-grid article:last-child{
    border-bottom:0;
  }

  .tariff-space-number{
    margin-bottom:18px;
  }

  .tariff-space-reassurance{
    display:block;
    padding:22px;
  }

  .tariff-space-reassurance p{
    line-height:1.5;
    margin-bottom:18px;
  }

  .tariff-space-reassurance .button{
    width:100%;
    box-sizing:border-box;
  }

}


/* =========================================================
   RESPIRATION GÉNÉRALE DES SECTIONS
   ========================================================= */

.section{
  padding-left:clamp(34px,4.5vw,72px);
  padding-right:clamp(34px,4.5vw,72px);
  box-sizing:border-box;
}

@media(max-width:800px){
  .section{
    padding-left:22px;
    padding-right:22px;
  }
}



/* =========================================================
   OFFRE DE LANCEMENT — 990 / PRIX NORMAL 1490
   ========================================================= */

.launch-label{
  display:block;
  width:max-content;
  margin:0 0 12px;
  padding:6px 10px;

  border:1px solid rgba(23,23,23,.16);
  border-radius:999px;

  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;

  color:#171717;
  background:rgba(255,255,255,.55);
}

.regular-price{
  display:block;
  margin:-20px 0 28px;

  font-size:13px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:.01em;

  color:#777;
}

.regular-price s{
  text-decoration-thickness:1px;
  text-decoration-color:#777;
}


/* Page SITE PRO */

.kafk-offer .kafk-offer-level-main .kafk-offer-level-price{
  margin-bottom:26px !important;
}

.kafk-offer .kafk-offer-level-main .regular-price{
  margin-top:-14px;
  margin-bottom:28px;
}


/* Page TARIFS */

.tariff-new-card--base .tariff-new-price{
  margin-bottom:26px;
}

.tariff-new-card--base .regular-price{
  margin-top:-14px;
  margin-bottom:28px;
}


/* Mobile */

@media (max-width:700px){

  .launch-label{
    margin-bottom:11px;
    padding:6px 9px;
    font-size:10px;
  }

  .regular-price{
    margin-top:-15px;
    margin-bottom:24px;
    font-size:12px;
  }

  .kafk-offer .kafk-offer-level-main .regular-price,
  .tariff-new-card--base .regular-price{
    margin-top:-12px;
    margin-bottom:25px;
  }

}


/* Ajustement espacement offre de lancement */

.tariff-new-card--base .regular-price,
.kafk-offer .kafk-offer-level-main .regular-price{
  margin-top:-6px !important;
}


/* Espacement final prix de lancement */

.tariff-new-card--base .regular-price,
.kafk-offer .kafk-offer-level-main .regular-price{
  margin-top:10px !important;
  margin-bottom:28px !important;
}



/* =========================================================
   ACCUEIL — BLOC SITE / OFFRE DE LANCEMENT
   ========================================================= */

/* Remplace le grand bloc noir */
.home-site-main,
.home-site-feature,
.home-site-card--main{
  background:#dbe5ec !important;
  color:#171717 !important;
}

/* Tous les textes du bloc repassent foncés */
.home-site-main *,
.home-site-feature *,
.home-site-card--main *{
  color:#171717;
}

/* Badge */
.home-site-main .launch-label,
.home-site-feature .launch-label,
.home-site-card--main .launch-label{
  background:rgba(255,255,255,.65);
  border-color:rgba(23,23,23,.14);
  color:#171717 !important;
}

/* Prix normal : vraie ligne sous le 990 */
.home-site-main .regular-price,
.home-site-feature .regular-price,
.home-site-card--main .regular-price{
  display:block !important;
  margin:12px 0 32px !important;

  font-size:13px !important;
  line-height:1.3 !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;

  color:#687078 !important;
}

/* Barré */
.home-site-main .regular-price s,
.home-site-feature .regular-price s,
.home-site-card--main .regular-price s{
  color:#687078 !important;
}

/* Bouton : reste très lisible */
.home-site-main .button,
.home-site-feature .button,
.home-site-card--main .button{
  background:#171717 !important;
  color:#fff !important;
  border-color:#171717 !important;
}


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

  .home-site-main .regular-price,
  .home-site-feature .regular-price,
  .home-site-card--main .regular-price{
    margin:10px 0 26px !important;
    font-size:12px !important;
  }

}



/* =========================================================
   ACCUEIL — OFFRE SITE
   ========================================================= */

.kafk-offer .offer-main{
  background:#dbe5ec !important;
  color:#171717 !important;
}

.kafk-offer .offer-main .eyebrow,
.kafk-offer .offer-main h2,
.kafk-offer .offer-main .offer-price-intro,
.kafk-offer .offer-main > p{
  color:#171717 !important;
}


/* Badge lancement */

.kafk-offer .offer-main .launch-label{
  display:block !important;
  width:max-content !important;

  margin:18px 0 18px !important;
  padding:6px 10px !important;

  background:rgba(255,255,255,.7) !important;
  border:1px solid rgba(23,23,23,.14) !important;
  border-radius:999px !important;

  font-size:11px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.13em !important;

  color:#171717 !important;
}


/* Prix 990 */

.kafk-offer .offer-main .offer-big-price{
  color:#171717 !important;
}


/* Prix normal — annule l'héritage du prix géant */

.kafk-offer .offer-main .offer-big-price .regular-price{
  display:block !important;

  margin:14px 0 34px !important;

  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;

  color:#687078 !important;
}

.kafk-offer .offer-main .offer-big-price .regular-price s{
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;

  color:#687078 !important;
}


/* Bouton */

.kafk-offer .offer-main .button{
  background:#171717 !important;
  color:#fff !important;
  border-color:#171717 !important;
}


/* Mobile */

@media (max-width:700px){

  .kafk-offer .offer-main .launch-label{
    margin:15px 0 15px !important;
    font-size:10px !important;
  }

  .kafk-offer .offer-main .offer-big-price .regular-price{
    margin:12px 0 28px !important;
    font-size:12px !important;
  }

  .kafk-offer .offer-main .offer-big-price .regular-price s{
    font-size:12px !important;
  }

}


/* Séparation bloc principal / petites cartes */

.kafk-offer .offer-benefits{
  margin-top:16px !important;
}

@media (max-width:700px){
  .kafk-offer .offer-benefits{
    margin-top:12px !important;
  }
}

/* =========================================================
   KAFK MOBILE — CLEAN 20260920
   Une seule source de vérité
   ========================================================= */

@media (max-width:980px){

  /* ---------- HEADER ---------- */

  html body .site-header{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;
    min-height:0 !important;

    margin:0 !important;
    padding:30px 32px !important;

    box-sizing:border-box !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    z-index:1000 !important;
  }


  html body .site-header .desktop-nav,
  html body .site-header .header-cta{
    display:none !important;
  }


  /* ---------- LOGO ---------- */

  html body .site-header .brand,
  html body .site-header .brand-logo{
    display:flex !important;
    align-items:center !important;

    margin:0 !important;
    padding:0 !important;

    width:auto !important;
    height:34px !important;
  }

  html body .site-header .brand-logo img{
    display:block !important;

    width:100px !important;
    height:auto !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;
  }


  /* ---------- MENU ---------- */

  html body .site-header .menu-button{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    background:transparent !important;

    color:#171714 !important;

    font-family:inherit !important;
    font-size:18px !important;
    font-weight:800 !important;

    line-height:34px !important;

    letter-spacing:.12em !important;
    text-transform:uppercase !important;

    cursor:pointer !important;
  }


  /*
     Si la HOME utilise encore le déclencheur isolé créé
     précédemment, même rendu.
  */

  html body .site-header .home-menu-trigger{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    color:#fff !important;

    font-family:inherit !important;
    font-size:18px !important;
    font-weight:700 !important;

    line-height:34px !important;

    letter-spacing:-.02em !important;
    text-transform:none !important;

    text-decoration:none !important;
  }


  /* ---------- HERO PAGES INTERNES ---------- */

  html body main .page-hero{
    padding-top:145px !important;
  }

}


/* =========================================================
   SECTEURS UNIQUEMENT
   ========================================================= */

@media (max-width:680px){

  html body.page-secteurs main .page-hero{
    padding:
      145px
      32px
      80px !important;
  }


  html body.page-secteurs .page-hero > .eyebrow{
    margin:0 0 36px !important;

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

    letter-spacing:.22em !important;
  }


  /*
     On arrête l'effet affiche.
     Le titre reste fort mais devient éditorial.
  */

  html body.page-secteurs .page-hero h1{
    display:block !important;

    width:100% !important;
    max-width:410px !important;

    margin:0 !important;
    padding:0 !important;

    font-size:36px !important;
    line-height:.96 !important;

    letter-spacing:-.05em !important;
  }


  html body.page-secteurs .page-hero h1 em{
    display:block !important;

    width:100% !important;
    max-width:390px !important;

    margin:16px 0 0 !important;

    font-size:27px !important;
    line-height:1.02 !important;

    letter-spacing:-.03em !important;
  }


  html body.page-secteurs .page-hero > p:not(.eyebrow){
    width:100% !important;
    max-width:520px !important;

    margin:48px 0 0 !important;

    font-size:17px !important;
    line-height:1.55 !important;

    letter-spacing:-.01em !important;
  }


  html body.page-secteurs .page-hero > p:not(.eyebrow) + p{
    margin-top:25px !important;
  }

}


@media (max-width:390px){

  html body .site-header{
    padding-left:26px !important;
    padding-right:26px !important;
  }

  html body .site-header .brand-logo img{
    width:94px !important;
  }

  html body.page-secteurs main .page-hero{
    padding-left:26px !important;
    padding-right:26px !important;
  }

  html body.page-secteurs .page-hero h1{
    font-size:34px !important;
  }

  html body.page-secteurs .page-hero h1 em{
    font-size:26px !important;
  }

}





/* =========================================================
   KAFK MOBILE — UNIQUE
   ========================================================= */

.kafk-mobile-trigger,
.kafk-mobile-panel{
  display:none;
}


@media (max-width:980px){

  /* HEADER UNIQUE */

  html body .site-header{
    position:absolute !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;
    min-height:0 !important;

    margin:0 !important;
    padding:30px 32px !important;

    box-sizing:border-box !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    background:transparent !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    z-index:5000 !important;
  }


  html body .site-header .desktop-nav,
  html body .site-header .header-cta,
  html body .site-header .menu-button,
  html body .site-header .home-menu-trigger{
    display:none !important;
  }


  /* LOGO */

  html body .site-header .brand-logo{
    display:flex !important;
    align-items:center !important;

    width:auto !important;
    height:38px !important;

    margin:0 !important;
    padding:0 !important;
  }


  html body .site-header .brand-logo img{
    display:block !important;

    width:110px !important;
    height:auto !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;
  }


  /* MENU */

  html body .site-header .kafk-mobile-trigger{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    background:none !important;

    color:#171714 !important;

    font:inherit !important;

    font-size:18px !important;
    font-weight:800 !important;

    line-height:38px !important;

    letter-spacing:.12em !important;

    cursor:pointer !important;

    position:relative !important;
    z-index:2 !important;
  }


  /* HOME SUR IMAGE */

  html body:has(.hero-media)
  .site-header .kafk-mobile-trigger{
    color:#fff !important;
  }


  /* ======================================================
     PANNEAU
     ====================================================== */

  html body .kafk-mobile-panel{
    display:flex !important;

    position:fixed !important;
    inset:0 !important;

    width:100% !important;
    height:100dvh !important;

    box-sizing:border-box !important;

    flex-direction:column !important;

    padding:
      30px
      32px
      32px !important;

    background:#f5f2ea !important;

    z-index:2147483647 !important;

    overflow-y:auto !important;

    opacity:0 !important;
    visibility:hidden !important;

    pointer-events:none !important;

    transform:translateY(-8px) !important;

    transition:
      opacity .2s ease,
      transform .25s ease,
      visibility .2s ease !important;
  }


  html body.kafk-menu-open{
    overflow:hidden !important;
  }


  html body.kafk-menu-open .kafk-mobile-panel{
    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto !important;

    transform:none !important;
  }


  html body.kafk-menu-open .kafk-mobile-panel *{
    pointer-events:auto !important;
  }


  /* TÊTE DU PANNEAU */

  html body .kafk-mobile-panel-head{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;

    min-height:38px !important;
  }


  html body .kafk-mobile-panel-logo{
    display:flex !important;
    align-items:center !important;

    height:38px !important;
  }


  html body .kafk-mobile-panel-logo img{
    display:block !important;

    width:110px !important;
    height:auto !important;
  }


  html body .kafk-mobile-close{
    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    background:none !important;

    color:#171714 !important;

    font:inherit !important;

    font-size:18px !important;
    font-weight:800 !important;

    line-height:38px !important;

    letter-spacing:.12em !important;

    cursor:pointer !important;
  }


  /* NAVIGATION */

  html body .kafk-mobile-panel-nav{
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;

    margin-top:64px !important;

    border-top:
      1px solid rgba(23,23,20,.14) !important;
  }


  html body .kafk-mobile-panel-nav > a{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;
    min-height:66px !important;

    box-sizing:border-box !important;

    border-bottom:
      1px solid rgba(23,23,20,.14) !important;

    color:#171714 !important;

    font-size:24px !important;
    font-weight:650 !important;

    line-height:1.05 !important;

    letter-spacing:-.035em !important;

    text-decoration:none !important;
  }


  html body .kafk-mobile-panel-nav > a span:last-child{
    margin-left:20px !important;

    font-size:22px !important;
    font-weight:400 !important;
  }


  /* CTA */

  html body .kafk-mobile-panel-cta{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;

    box-sizing:border-box !important;

    margin-top:28px !important;

    padding:19px 23px !important;

    border-radius:999px !important;

    background:#f26a42 !important;
    color:#fff !important;

    font-size:18px !important;
    font-weight:750 !important;

    line-height:1 !important;

    text-decoration:none !important;
  }


  /* PAGES INTERNES */

  html body main .page-hero{
    padding-top:145px !important;
  }

}


/* ==========================================================
   KAFK — MOBILE FINAL CORRECTIONS
   ========================================================== */

@media (max-width:980px){

  /* ---------- HEADER ---------- */

  html body .site-header{
    min-height:54px !important;
    align-items:center !important;
  }


  /* ---------- LOGO ---------- */

  html body .site-header .brand,
  html body .site-header .brand-logo{
    display:flex !important;

    align-items:center !important;
    justify-content:flex-start !important;

    width:120px !important;
    height:54px !important;

    min-width:120px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }

  html body .site-header .brand-logo img{
    display:block !important;

    width:110px !important;
    height:auto !important;

    max-width:none !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:contain !important;
  }


  /* ---------- MENU ---------- */

  html body .site-header .kafk-mobile-trigger{
    display:block !important;

    margin:0 0 0 auto !important;
    padding:0 !important;

    line-height:54px !important;

    pointer-events:auto !important;
    cursor:pointer !important;
  }

}


/* ==========================================================
   SECTEURS — MOBILE
   ========================================================== */

@media (max-width:680px){

  html body.page-secteurs main .page-hero{
    min-height:auto !important;

    padding:
      178px
      32px
      76px !important;
  }


  html body.page-secteurs .page-hero > .eyebrow{
    margin:
      0
      0
      38px !important;

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

    letter-spacing:.22em !important;
  }


  /*
     On réduit réellement le titre.
     Le noir reste dominant,
     mais ne mange plus tout l'écran.
  */

  html body.page-secteurs .page-hero h1{
    width:100% !important;
    max-width:360px !important;

    margin:0 !important;

    font-size:34px !important;
    line-height:.94 !important;

    letter-spacing:-.055em !important;
  }


  /*
     La phrase serif devient une respiration,
     pas un deuxième titre géant.
  */

  html body.page-secteurs .page-hero h1 em{
    display:block !important;

    width:100% !important;
    max-width:355px !important;

    margin-top:17px !important;

    font-size:25px !important;
    line-height:1.01 !important;

    letter-spacing:-.035em !important;
  }


  /* ---------- TEXTES ---------- */

  html body.page-secteurs .page-hero > p:not(.eyebrow){
    width:100% !important;
    max-width:430px !important;

    margin-top:46px !important;

    font-size:17px !important;
    line-height:1.5 !important;

    letter-spacing:-.015em !important;
  }

  html body.page-secteurs
  .page-hero > p:not(.eyebrow) + p{
    margin-top:24px !important;
  }

}


@media (max-width:390px){

  html body.page-secteurs main .page-hero{
    padding-left:26px !important;
    padding-right:26px !important;
  }

  html body.page-secteurs .page-hero h1{
    font-size:32px !important;
  }

  html body.page-secteurs .page-hero h1 em{
    font-size:23px !important;
  }

}

/* ==========================================================
   KAFK — MOBILE CANONIQUE
   Un seul header / un seul menu / toutes les pages
   ========================================================== */

.kafk-mobile-trigger,
.kafk-mobile-panel{
  display:none;
}


@media (max-width:980px){

  /* --------------------------------------------------------
     HEADER
     -------------------------------------------------------- */

  html body .site-header{
    position:absolute !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;
    max-width:none !important;

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

    box-sizing:border-box !important;

    margin:0 !important;

    padding:
      34px
      32px
      0 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    gap:20px !important;

    background:transparent !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    z-index:10000 !important;
  }


  /* --------------------------------------------------------
     LOGO
     -------------------------------------------------------- */

  html body .site-header .brand,
  html body .site-header .brand-logo{
    display:block !important;

    position:relative !important;

    width:auto !important;
    height:auto !important;

    flex:0 0 auto !important;

    margin:0 !important;
    padding:0 !important;

    line-height:0 !important;

    z-index:2 !important;
  }


  html body .site-header .brand-logo img{
    display:block !important;

    width:110px !important;
    max-width:none !important;

    height:auto !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;
  }


  /* --------------------------------------------------------
     ÉLÉMENTS DESKTOP
     -------------------------------------------------------- */

  html body .site-header .desktop-nav,
  html body .site-header .header-cta,
  html body .site-header .menu-button{
    display:none !important;
  }


  /* --------------------------------------------------------
     BOUTON MENU
     -------------------------------------------------------- */

  html body .site-header .kafk-mobile-trigger{
    display:block !important;

    position:relative !important;

    flex:0 0 auto !important;

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

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

    margin:0 0 0 auto !important;

    padding:0 !important;

    border:0 !important;
    outline:0 !important;
    border-radius:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    appearance:none !important;
    -webkit-appearance:none !important;

    color:#171714 !important;

    font-family:inherit !important;

    font-size:18px !important;
    font-weight:800 !important;

    line-height:1 !important;

    letter-spacing:.12em !important;

    text-transform:uppercase !important;

    cursor:pointer !important;

    z-index:3 !important;
  }


  /* HOME : texte blanc sur l'image */

  html body:has(.hero-media)
  .site-header .kafk-mobile-trigger{
    color:#fff !important;
  }


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

  html body .kafk-mobile-panel{
    display:flex !important;

    position:fixed !important;

    inset:0 !important;

    width:100% !important;
    height:100dvh !important;

    box-sizing:border-box !important;

    flex-direction:column !important;

    padding:
      34px
      32px
      32px !important;

    background:#f5f2ea !important;

    overflow-y:auto !important;

    z-index:20000 !important;

    opacity:0 !important;
    visibility:hidden !important;

    pointer-events:none !important;

    transform:translateY(-8px) !important;

    transition:
      opacity .18s ease,
      visibility .18s ease,
      transform .22s ease !important;
  }


  html body.kafk-menu-open{
    overflow:hidden !important;
  }


  html body.kafk-menu-open .kafk-mobile-panel{
    opacity:1 !important;

    visibility:visible !important;

    pointer-events:auto !important;

    transform:none !important;
  }


  /* --------------------------------------------------------
     TÊTE DU PANNEAU
     -------------------------------------------------------- */

  html body .kafk-mobile-panel-head{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;

    flex:0 0 auto !important;
  }


  html body .kafk-mobile-panel-logo{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    line-height:0 !important;
  }


  html body .kafk-mobile-panel-logo img{
    display:block !important;

    width:110px !important;
    max-width:none !important;

    height:auto !important;
  }


  html body .kafk-mobile-close{
    display:block !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    outline:0 !important;

    background:transparent !important;

    color:#171714 !important;

    font-family:inherit !important;

    font-size:18px !important;
    font-weight:800 !important;

    line-height:1 !important;

    letter-spacing:.12em !important;

    cursor:pointer !important;
  }


  /* --------------------------------------------------------
     NAVIGATION DU PANNEAU
     -------------------------------------------------------- */

  html body .kafk-mobile-panel-nav{
    display:flex !important;

    flex-direction:column !important;

    width:100% !important;

    margin-top:58px !important;

    border-top:
      1px solid rgba(23,23,20,.14) !important;
  }


  html body .kafk-mobile-panel-nav > a{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;

    min-height:66px !important;

    box-sizing:border-box !important;

    border-bottom:
      1px solid rgba(23,23,20,.14) !important;

    color:#171714 !important;

    font-size:24px !important;
    font-weight:650 !important;

    line-height:1.05 !important;

    letter-spacing:-.035em !important;

    text-decoration:none !important;
  }


  html body .kafk-mobile-panel-nav > a span:last-child{
    margin-left:20px !important;

    font-size:22px !important;
    font-weight:400 !important;
  }


  /* --------------------------------------------------------
     CTA
     -------------------------------------------------------- */

  html body .kafk-mobile-panel-cta{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;

    box-sizing:border-box !important;

    margin-top:28px !important;

    padding:
      19px
      23px !important;

    border-radius:999px !important;

    background:#f26a42 !important;
    color:#fff !important;

    font-size:18px !important;
    font-weight:750 !important;

    line-height:1 !important;

    text-decoration:none !important;
  }


  /* --------------------------------------------------------
     PAGES INTERNES
     Le contenu commence clairement sous le header.
     HOME non concernée.
     -------------------------------------------------------- */

  html body:not(:has(.hero-media)) main .page-hero{
    padding-top:175px !important;
  }

}


/* ==========================================================
   SECTEURS — TYPO MOBILE UNIQUEMENT
   ========================================================== */

@media (max-width:680px){

  html body.page-secteurs main .page-hero{
    padding:
      175px
      32px
      80px !important;
  }


  html body.page-secteurs .page-hero > .eyebrow{
    margin:
      0
      0
      38px !important;

    font-size:13px !important;

    line-height:1 !important;

    letter-spacing:.22em !important;
  }


  html body.page-secteurs .page-hero h1{
    width:100% !important;

    max-width:430px !important;

    margin:0 !important;

    font-size:44px !important;

    line-height:.94 !important;

    letter-spacing:-.055em !important;
  }


  html body.page-secteurs .page-hero h1 em{
    display:block !important;

    width:100% !important;

    max-width:430px !important;

    margin-top:15px !important;

    font-size:34px !important;

    line-height:.98 !important;

    letter-spacing:-.035em !important;
  }


  html body.page-secteurs
  .page-hero > p:not(.eyebrow){
    width:100% !important;

    max-width:560px !important;

    margin-top:52px !important;

    font-size:18px !important;

    line-height:1.5 !important;
  }


  html body.page-secteurs
  .page-hero > p:not(.eyebrow) + p{
    margin-top:26px !important;
  }

}


/* ==========================================================
   FIN KAFK MOBILE CANONIQUE
   ========================================================== */

/* KAFK GLOBAL SHELL 2026 START */

/* =========================================================
   VARIABLES
   ========================================================= */

:root{
  --kafk-shell-bg:#f5f3ed;
  --kafk-shell-ink:#171717;
  --kafk-shell-muted:#66645f;
  --kafk-shell-line:rgba(23,23,23,.14);
  --kafk-shell-orange:#ef4b2f;
}


/* =========================================================
   HEADER — DESKTOP
   ========================================================= */

html body .kafk-shell-header{
  position:relative;
  z-index:5000;

  width:100%;
  min-height:92px;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  gap:34px;

  padding:22px clamp(28px,4vw,72px);

  background:var(--kafk-shell-bg);
}

html body .kafk-shell-header .brand-logo{
  display:flex;
  flex:0 0 auto;
  align-items:center;

  margin:0;
  padding:0;

  text-decoration:none;
}

html body .kafk-shell-header .brand-logo img{
  display:block;
  width:92px;
  height:auto;
  max-width:none;
}

html body .kafk-shell-header .kafk-main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;

  margin-left:auto;
}

html body .kafk-shell-header .nav-link{
  display:block;

  color:var(--kafk-shell-ink);
  text-decoration:none;

  font-size:14px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}

html body .kafk-shell-header .nav-item{
  position:relative;
}

html body .kafk-shell-header .nav-submenu{
  position:absolute;
  top:calc(100% + 15px);
  left:-20px;

  min-width:245px;
  box-sizing:border-box;

  padding:12px;

  border:1px solid var(--kafk-shell-line);
  border-radius:18px;

  background:var(--kafk-shell-bg);

  box-shadow:0 18px 50px rgba(0,0,0,.09);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateY(6px);

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
}

html body .kafk-shell-header .nav-item:hover .nav-submenu,
html body .kafk-shell-header .nav-item:focus-within .nav-submenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}

html body .kafk-shell-header .nav-submenu a{
  display:block;

  padding:11px 12px;

  border-radius:10px;

  color:var(--kafk-shell-ink);
  text-decoration:none;

  font-size:14px;
  line-height:1.25;
}

html body .kafk-shell-header .nav-submenu a:hover{
  background:rgba(0,0,0,.045);
}

html body .kafk-shell-header .header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  min-height:46px;
  box-sizing:border-box;

  padding:0 20px;

  border-radius:999px;

  background:var(--kafk-shell-ink);

  color:#fff;
  text-decoration:none;

  font-size:14px;
  font-weight:700;
  line-height:1;
}

html body .kafk-shell-header .kafk-mobile-trigger{
  display:none;
}


/* =========================================================
   MENU MOBILE — BASE
   ========================================================= */

html body .kafk-mobile-panel{
  position:fixed !important;
  inset:0 !important;

  z-index:100000 !important;

  display:flex !important;
  flex-direction:column !important;

  width:100% !important;
  height:100dvh !important;
  box-sizing:border-box !important;

  overflow:auto !important;
  overscroll-behavior:contain;

  padding:
    max(32px,env(safe-area-inset-top))
    30px
    max(28px,env(safe-area-inset-bottom)) !important;

  background:var(--kafk-shell-bg) !important;

  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;

  transform:translateY(-10px) !important;

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s ease !important;
}

html body.kafk-menu-open{
  overflow:hidden !important;
}

html body.kafk-menu-open .kafk-mobile-panel{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
}

html body .kafk-mobile-panel-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  width:100% !important;
  flex:0 0 auto;
}

html body .kafk-mobile-panel-logo{
  display:flex !important;
  align-items:center !important;

  margin:0 !important;
  padding:0 !important;
}

html body .kafk-mobile-panel-logo img{
  display:block !important;

  width:112px !important;
  height:auto !important;
  max-width:none !important;
}

html body .kafk-mobile-close{
  display:block !important;

  margin:0 !important;
  padding:8px 0 !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;
  box-shadow:none !important;

  color:var(--kafk-shell-ink) !important;

  font-family:Arial,Helvetica,sans-serif !important;
  font-size:18px !important;
  font-weight:600 !important;
  line-height:1 !important;

  appearance:none !important;
  -webkit-appearance:none !important;

  cursor:pointer !important;
}

html body .kafk-mobile-panel-nav{
  display:flex !important;
  flex-direction:column !important;

  width:100% !important;

  margin:42px 0 36px !important;
  padding:0 !important;
}

html body .kafk-mobile-panel-nav a{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;

  width:100% !important;
  box-sizing:border-box !important;

  margin:0 !important;
  padding:14px 0 !important;

  border:0 !important;
  border-bottom:1px solid var(--kafk-shell-line) !important;
  border-radius:0 !important;

  background:transparent !important;

  color:var(--kafk-shell-ink) !important;
  text-decoration:none !important;

  font-size:21px !important;
  font-weight:500 !important;
  line-height:1.1 !important;
}

html body .kafk-mobile-panel-nav a span:last-child{
  flex:0 0 auto;
}

html body .kafk-mobile-panel-cta{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;

  width:100% !important;
  box-sizing:border-box !important;

  margin:auto 0 0 !important;
  padding:19px 22px !important;

  border-radius:999px !important;

  background:var(--kafk-shell-ink) !important;

  color:#fff !important;
  text-decoration:none !important;

  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
}


/* =========================================================
   FOOTER GLOBAL
   ========================================================= */

html body .kafk-shell-footer{
  position:relative;

  width:100%;
  box-sizing:border-box;

  margin:0;
  padding:
    70px
    clamp(28px,6vw,90px)
    28px;

  background:#171717;

  color:#f5f3ed;
}

html body .kafk-footer-inner{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(480px,1.5fr);
  gap:70px;

  max-width:1400px;
  margin:0 auto;
}

html body .kafk-footer-brand img{
  display:block;
  width:105px;
  height:auto;

  filter:none;
}

html body .kafk-footer-brand p{
  max-width:320px;

  margin:28px 0 0;

  color:rgba(245,243,237,.68);

  font-size:17px;
  line-height:1.5;
}

html body .kafk-footer-nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(130px,1fr));
  gap:38px;
}

html body .kafk-footer-nav > div{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}

html body .kafk-footer-nav strong{
  margin-bottom:7px;

  color:#fff;

  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

html body .kafk-footer-nav a{
  color:rgba(245,243,237,.76);
  text-decoration:none;

  font-size:15px;
  line-height:1.3;
}

html body .kafk-footer-nav a:hover{
  color:#fff;
}

html body .kafk-footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  max-width:1400px;

  margin:65px auto 0;
  padding-top:22px;

  border-top:1px solid rgba(255,255,255,.14);

  color:rgba(245,243,237,.48);

  font-size:12px;
  line-height:1.3;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:980px){

  html body .kafk-shell-header{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;

    z-index:5000 !important;

    width:100% !important;
    min-height:118px !important;
    box-sizing:border-box !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    margin:0 !important;

    /*
      Plus bas que les anciennes versions :
      on laisse respirer le haut du téléphone.
    */
    padding:
      max(34px,env(safe-area-inset-top))
      30px
      24px !important;

    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    background:var(--kafk-shell-bg) !important;
  }

  html body .kafk-shell-header .brand-logo{
    display:flex !important;
    align-items:center !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;
  }

  html body .kafk-shell-header .brand-logo img{
    display:block !important;

    width:112px !important;
    height:auto !important;
    max-width:none !important;

    margin:0 !important;
  }

  html body .kafk-shell-header .desktop-nav,
  html body .kafk-shell-header .header-cta,
  html body .kafk-shell-header .menu-button,
  html body .kafk-shell-header .home-menu-trigger{
    display:none !important;
  }

  html body .kafk-shell-header .kafk-mobile-trigger{
    position:relative !important;

    display:block !important;

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

    margin:0 !important;
    padding:8px 0 !important;

    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;

    background:transparent !important;
    box-shadow:none !important;

    color:var(--kafk-shell-ink) !important;

    font-family:Arial,Helvetica,sans-serif !important;
    font-size:20px !important;
    font-weight:600 !important;
    line-height:1 !important;
    letter-spacing:-.02em !important;

    text-decoration:none !important;
    text-transform:none !important;

    appearance:none !important;
    -webkit-appearance:none !important;

    cursor:pointer !important;
  }

  /*
    Les anciens headers absolus faisaient remonter le contenu
    sous le menu. Le nouveau header participe au flux.
    On neutralise donc les anciens énormes paddings de compensation.
  */
  html body main > .page-hero:first-child{
    padding-top:54px !important;
  }

  html body .page-hero{
    box-sizing:border-box !important;
  }

  html body .page-hero > *,
  html body main > section > .shell,
  html body main > section > .container{
    max-width:100%;
  }

  html body .kafk-shell-footer{
    padding:
      54px
      30px
      max(26px,env(safe-area-inset-bottom));
  }

  html body .kafk-footer-inner{
    display:block;
  }

  html body .kafk-footer-brand p{
    margin-top:22px;
  }

  html body .kafk-footer-nav{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:42px 30px;

    margin-top:50px;
  }

  html body .kafk-footer-bottom{
    align-items:flex-start;
    flex-direction:column;

    margin-top:48px;
  }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media (max-width:560px){

  html body .kafk-shell-header{
    min-height:112px !important;

    padding:
      max(32px,env(safe-area-inset-top))
      28px
      22px !important;
  }

  html body .kafk-shell-header .brand-logo img{
    width:104px !important;
  }

  html body .kafk-shell-header .kafk-mobile-trigger{
    font-size:19px !important;
  }

  html body main > .page-hero:first-child{
    padding-top:48px !important;
  }

  html body .kafk-mobile-panel{
    padding:
      max(30px,env(safe-area-inset-top))
      28px
      max(24px,env(safe-area-inset-bottom)) !important;
  }

  html body .kafk-mobile-panel-logo img{
    width:104px !important;
  }

  html body .kafk-mobile-panel-nav{
    margin-top:34px !important;
  }

  html body .kafk-mobile-panel-nav a{
    padding:12px 0 !important;
    font-size:19px !important;
  }

  html body .kafk-mobile-panel-cta{
    padding:17px 20px !important;
    font-size:17px !important;
  }

  html body .kafk-footer-nav{
    grid-template-columns:1fr;
    gap:36px;
  }

}

/* KAFK GLOBAL SHELL 2026 END */

/* KAFK SHELL HARDENING START */


/* =========================================================
   COUCHE INTERFACE GLOBALE

   Le header et le menu sont une interface.
   Aucun contenu de page ne doit pouvoir passer devant.
   ========================================================= */

html body .kafk-shell-header{
  isolation:isolate !important;
  z-index:2147483000 !important;
}

html body .kafk-shell-header,
html body .kafk-shell-header *{
  pointer-events:auto;
}

html body .kafk-shell-header .kafk-mobile-trigger{
  position:relative !important;
  z-index:2147483002 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

html body .kafk-mobile-panel{
  position:fixed !important;
  inset:0 !important;

  z-index:2147483640 !important;

  pointer-events:none !important;
}

html body.kafk-menu-open .kafk-mobile-panel{
  pointer-events:auto !important;
}

html body .kafk-mobile-panel,
html body .kafk-mobile-panel *{
  box-sizing:border-box;
}

html body.kafk-menu-open .kafk-mobile-panel *,
html body.kafk-menu-open .kafk-mobile-panel a,
html body.kafk-menu-open .kafk-mobile-panel button{
  pointer-events:auto !important;
}


/* =========================================================
   MOBILE : HEADER IDENTIQUE PARTOUT
   ========================================================= */

@media (max-width:980px){

  html body .kafk-shell-header{
    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    width:100% !important;
    min-height:122px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    margin:0 !important;

    padding:
      max(38px,env(safe-area-inset-top))
      30px
      26px !important;

    overflow:visible !important;

    border:0 !important;
    border-radius:0 !important;

    background:#f5f3ed !important;
    box-shadow:none !important;
  }

  html body .kafk-shell-header .brand-logo{
    position:relative !important;

    display:flex !important;
    align-items:center !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    z-index:2 !important;
  }

  html body .kafk-shell-header .brand-logo img{
    display:block !important;

    width:112px !important;
    height:auto !important;
    max-width:none !important;

    margin:0 !important;
  }

  html body .kafk-shell-header .desktop-nav,
  html body .kafk-shell-header .header-cta,
  html body .kafk-shell-header .menu-button,
  html body .kafk-shell-header .home-menu-trigger{
    display:none !important;
  }

  html body .kafk-shell-header .kafk-mobile-trigger{
    position:relative !important;

    display:block !important;

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

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

    margin:0 !important;
    padding:10px 0 !important;

    border:0 !important;
    outline:0 !important;
    border-radius:0 !important;

    background:transparent !important;
    box-shadow:none !important;

    color:#171717 !important;

    font-family:Arial,Helvetica,sans-serif !important;
    font-size:21px !important;
    font-weight:600 !important;
    line-height:1 !important;

    text-decoration:none !important;
    text-transform:none !important;

    appearance:none !important;
    -webkit-appearance:none !important;

    pointer-events:auto !important;
    cursor:pointer !important;
  }


  /* -------------------------------------------------------
     CONTENU

     Le header reste dans le flux.
     Les anciens systèmes ne peuvent donc plus faire remonter
     les pages derrière lui.
     ------------------------------------------------------- */

  html body main{
    position:relative;
    z-index:1;
  }

  html body main > .page-hero:first-child{
    padding-top:58px !important;
  }


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

  html body .kafk-mobile-panel{
    position:fixed !important;
    inset:0 !important;

    display:flex !important;
    flex-direction:column !important;

    width:100vw !important;
    max-width:none !important;

    height:100dvh !important;
    min-height:100dvh !important;

    margin:0 !important;

    padding:
      max(38px,env(safe-area-inset-top))
      30px
      max(28px,env(safe-area-inset-bottom)) !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    background:#f5f3ed !important;

    opacity:0 !important;
    visibility:hidden !important;

    transform:translateY(-8px) !important;

    pointer-events:none !important;
  }

  html body.kafk-menu-open .kafk-mobile-panel{
    opacity:1 !important;
    visibility:visible !important;

    transform:none !important;

    pointer-events:auto !important;
  }

  html body .kafk-mobile-panel-head{
    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    flex:0 0 auto !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;
  }

  html body .kafk-mobile-panel-logo img{
    display:block !important;

    width:112px !important;
    height:auto !important;
  }

  html body .kafk-mobile-close{
    position:relative !important;

    display:block !important;

    margin:0 !important;
    padding:10px 0 !important;

    border:0 !important;
    outline:0 !important;

    background:transparent !important;

    color:#171717 !important;

    font-family:Arial,Helvetica,sans-serif !important;
    font-size:19px !important;
    font-weight:600 !important;
    line-height:1 !important;

    appearance:none !important;
    -webkit-appearance:none !important;

    cursor:pointer !important;
  }

  html body .kafk-mobile-panel-nav{
    display:flex !important;
    flex-direction:column !important;

    flex:0 0 auto !important;

    width:100% !important;

    margin:42px 0 34px !important;
    padding:0 !important;
  }

  html body .kafk-mobile-panel-nav a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;

    margin:0 !important;
    padding:13px 0 !important;

    border:0 !important;
    border-bottom:1px solid rgba(23,23,23,.14) !important;
    border-radius:0 !important;

    background:transparent !important;

    color:#171717 !important;

    font-size:20px !important;
    font-weight:500 !important;
    line-height:1.1 !important;

    text-decoration:none !important;
  }

  html body .kafk-mobile-panel-cta{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;

    margin:auto 0 0 !important;
    padding:18px 21px !important;

    border-radius:999px !important;

    background:#171717 !important;

    color:#fff !important;

    font-size:17px !important;
    font-weight:700 !important;
    line-height:1.1 !important;

    text-decoration:none !important;
  }

}


/* =========================================================
   FOOTER — VERSION ÉDITORIALE LÉGÈRE
   ========================================================= */

html body .kafk-shell-footer{
  width:100% !important;

  margin:0 !important;

  padding:
    58px
    clamp(30px,6vw,88px)
    26px !important;

  border-top:1px solid rgba(23,23,23,.12) !important;
  border-radius:0 !important;

  background:#f5f3ed !important;

  color:#171717 !important;
}

html body .kafk-footer-inner{
  display:grid !important;

  grid-template-columns:minmax(220px,.8fr) minmax(500px,1.5fr) !important;

  gap:70px !important;

  width:100% !important;
  max-width:1400px !important;

  margin:0 auto !important;
}

html body .kafk-footer-brand img{
  display:block !important;

  width:96px !important;
  height:auto !important;

  margin:0 !important;
}

html body .kafk-footer-brand p{
  max-width:310px !important;

  margin:22px 0 0 !important;

  color:#5e5d59 !important;

  font-size:15px !important;
  line-height:1.5 !important;
}

html body .kafk-footer-nav{
  display:grid !important;

  grid-template-columns:repeat(3,minmax(130px,1fr)) !important;

  gap:42px !important;

  margin:0 !important;
  padding:0 !important;
}

html body .kafk-footer-nav > div{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;

  gap:9px !important;
}

html body .kafk-footer-nav strong{
  margin:0 0 9px !important;

  color:#171717 !important;

  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;

  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}

html body .kafk-footer-nav a{
  margin:0 !important;
  padding:0 !important;

  color:#5e5d59 !important;

  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.5 !important;

  text-decoration:none !important;
}

html body .kafk-footer-nav a:hover{
  color:#171717 !important;
}

html body .kafk-footer-bottom{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  gap:20px !important;

  width:100% !important;
  max-width:1400px !important;

  margin:44px auto 0 !important;
  padding:18px 0 0 !important;

  border-top:1px solid rgba(23,23,23,.12) !important;

  color:#77746e !important;

  font-size:11px !important;
  line-height:1.3 !important;
}


/* =========================================================
   FOOTER MOBILE
   ========================================================= */

@media (max-width:980px){

  html body .kafk-shell-footer{
    padding:
      44px
      30px
      max(24px,env(safe-area-inset-bottom)) !important;
  }

  html body .kafk-footer-inner{
    display:block !important;
  }

  html body .kafk-footer-brand img{
    width:92px !important;
  }

  html body .kafk-footer-brand p{
    max-width:280px !important;

    margin-top:18px !important;

    font-size:14px !important;
  }

  html body .kafk-footer-nav{
    display:grid !important;

    grid-template-columns:1fr 1fr !important;

    gap:34px 28px !important;

    margin-top:40px !important;
  }

  html body .kafk-footer-bottom{
    align-items:flex-start !important;
    flex-direction:column !important;

    gap:5px !important;

    margin-top:38px !important;
  }

}

@media (max-width:520px){

  html body .kafk-footer-nav{
    grid-template-columns:1fr 1fr !important;
  }

  html body .kafk-footer-nav > div:last-child{
    grid-column:1 / -1 !important;
  }

}

/* KAFK SHELL HARDENING END */

/* KAFK HOME HERO SHELL START */


/* =========================================================
   HOME
   Le header appartient visuellement au hero.
   Aucun cadre autour de l'image.
   ========================================================= */

body.kafk-home{
  margin:0 !important;
  padding:0 !important;
}


/* ---------------------------------------------------------
   HEADER HOME
   --------------------------------------------------------- */

body.kafk-home > .kafk-shell-header{
  position:absolute !important;

  top:0 !important;
  left:0 !important;
  right:0 !important;

  width:100% !important;
  max-width:none !important;

  min-height:104px !important;

  margin:0 !important;

  padding:
    28px
    clamp(38px,6vw,96px) !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;
  box-shadow:none !important;

  z-index:2147483000 !important;
}


/* logo */

body.kafk-home > .kafk-shell-header .brand-logo img{
  width:100px !important;
  height:auto !important;
}


/* navigation */

body.kafk-home > .kafk-shell-header .nav-link{
  color:#fff !important;

  text-shadow:
    0 1px 12px rgba(0,0,0,.22) !important;
}

body.kafk-home > .kafk-shell-header .nav-link:hover{
  opacity:.72 !important;
}


/* sous-menus : restent lisibles */

body.kafk-home > .kafk-shell-header .nav-submenu{
  background:#f5f3ed !important;

  box-shadow:
    0 18px 50px rgba(0,0,0,.14) !important;
}

body.kafk-home > .kafk-shell-header .nav-submenu a{
  color:#171717 !important;
  text-shadow:none !important;
}


/* CTA */

body.kafk-home > .kafk-shell-header .header-cta{
  background:#ee6848 !important;
  color:#fff !important;

  border:0 !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.12) !important;
}


/* ---------------------------------------------------------
   HERO BORD À BORD
   --------------------------------------------------------- */

body.kafk-home > main{
  margin:0 !important;
  padding:0 !important;

  width:100% !important;
  max-width:none !important;
}

body.kafk-home .hero{
  position:relative !important;

  width:100% !important;
  max-width:none !important;

  min-height:100svh !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  overflow:hidden !important;
}


/* image réellement plein écran */

body.kafk-home .hero .hero-media{
  position:absolute !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  overflow:hidden !important;
}

body.kafk-home .hero .hero-media img{
  display:block !important;

  width:100% !important;
  height:100% !important;

  max-width:none !important;

  object-fit:cover !important;
  object-position:center center !important;

  margin:0 !important;
  padding:0 !important;

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


/* aucun arrondi hérité */

body.kafk-home .hero,
body.kafk-home .hero::before,
body.kafk-home .hero::after,
body.kafk-home .hero-media,
body.kafk-home .hero-media img,
body.kafk-home .hero-overlay{
  border-radius:0 !important;
}


/* contenu hero au-dessus de l'image */

body.kafk-home .hero .hero-overlay{
  position:absolute !important;
  inset:0 !important;

  z-index:1 !important;
}

body.kafk-home .hero .hero-inner,
body.kafk-home .hero .hero-bottom{
  position:relative !important;

  z-index:2 !important;
}


/* ---------------------------------------------------------
   MOBILE HOME
   Logo + MENU directement sur la photographie.
   --------------------------------------------------------- */

@media (max-width:980px){

  body.kafk-home > .kafk-shell-header{
    position:absolute !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

    min-height:100px !important;

    padding:
      max(28px,env(safe-area-inset-top))
      24px
      20px !important;

    background:transparent !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;
  }

  body.kafk-home > .kafk-shell-header .brand-logo img{
    width:96px !important;
  }

  body.kafk-home > .kafk-shell-header .kafk-mobile-trigger{
    color:#fff !important;

    font-size:19px !important;
    font-weight:600 !important;

    text-shadow:
      0 1px 12px rgba(0,0,0,.30) !important;
  }

  body.kafk-home .hero{
    min-height:100svh !important;
  }

  body.kafk-home .hero .hero-media img{
    object-position:center center !important;
  }

}


/* KAFK HOME HERO SHELL END */

/* =========================================================
   HOME — LISIBILITÉ DU TITRE HERO
   ========================================================= */

body.kafk-home .hero-clean-copy h1,
body.kafk-home .hero-clean-copy h1 strong,
body.kafk-home .hero-clean-copy h1 em,
body.kafk-home .hero-clean-copy .hero-serif{
  color:#fff !important;

  text-shadow:
    0 2px 18px rgba(0,0,0,.28),
    0 1px 3px rgba(0,0,0,.18) !important;
}

/* Le petit surtitre reste blanc également */
body.kafk-home .hero-kicker{
  color:#fff !important;
  text-shadow:0 1px 8px rgba(0,0,0,.25) !important;
}

/* Texte sous le titre */
body.kafk-home .hero-clean-statement,
body.kafk-home .hero-clean-detail{
  color:#fff !important;
  text-shadow:0 1px 10px rgba(0,0,0,.30) !important;
}


/* =========================================================
   HOME HERO — TITRE BLANC + POSITION HAUTE
   ========================================================= */

/* Remonter le bloc éditorial */
body.kafk-home .hero .hero-inner{
  transform:translateY(-105px) !important;
}

/* Forcer absolument tout le titre en blanc */
body.kafk-home .hero .hero-clean-copy h1,
body.kafk-home .hero .hero-clean-copy h1 *,
body.kafk-home .hero h1,
body.kafk-home .hero h1 *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;

  text-shadow:
    0 2px 20px rgba(0,0,0,.22),
    0 1px 3px rgba(0,0,0,.20) !important;
}

/* Surtitre */
body.kafk-home .hero .hero-kicker{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Textes sous le titre */
body.kafk-home .hero .hero-clean-statement,
body.kafk-home .hero .hero-clean-statement *,
body.kafk-home .hero .hero-clean-detail,
body.kafk-home .hero .hero-clean-detail *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Mobile : déplacement plus modéré */
@media (max-width:980px){
  body.kafk-home .hero .hero-inner{
    transform:translateY(-55px) !important;
  }
}

/* KAFK REALISATIONS V5 START */

body.kafk-realisations{
  --r5-cream:#f4f0e7;
  --r5-paper:#fbfaf6;
  --r5-sand:#e9e4d9;
  --r5-dark:#172321;
  --r5-ink:#181817;
  --r5-muted:#716e67;
  --r5-line:rgba(24,24,23,.18);
  --r5-orange:#ef603c;

  background:var(--r5-cream);
  color:var(--r5-ink);
}

.rea5{
  overflow:hidden;
}

.rea5 *,
.rea5 *::before,
.rea5 *::after{
  box-sizing:border-box;
}

.rea5-shell{
  width:min(1480px,calc(100% - 9vw));
  margin-inline:auto;
}

.rea5 h1,
.rea5 h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:.95;
  letter-spacing:-.045em;
}

.rea5 h1 em,
.rea5 h2 em{
  font-weight:400;
  font-style:italic;
}

.rea5-eyebrow{
  display:flex;
  align-items:center;
  gap:15px;
  margin:0 0 27px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.21em;
}

.rea5-eyebrow > span{
  width:43px;
  height:1px;
  background:currentColor;
}


/* =========================================================
   OPENING
   ========================================================= */

.rea5-opening{
  background:var(--r5-cream);
}

.rea5-opening-head{
  min-height:470px;
  padding-top:105px;
  padding-bottom:70px;

  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:9vw;
  align-items:end;
}

.rea5-opening h1{
  font-size:clamp(68px,6.7vw,116px);
}

.rea5-opening-side{
  max-width:470px;
  padding-bottom:8px;
}

.rea5-opening-text{
  margin:0;
  font-size:18px;
  line-height:1.5;
  color:var(--r5-muted);
}

.rea5-universes{
  display:flex;
  gap:25px;
  margin-top:37px;
}

.rea5-universes span{
  font-size:9px;
  font-weight:700;
  letter-spacing:.22em;
}


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

.rea5-hero-visual{
  position:relative;
  width:100%;
  margin:0;
  overflow:hidden;
  background:#d9ddd7;
}

.rea5-hero-visual img{
  display:block;
  width:100%;
  height:auto;
  min-height:560px;
  max-height:84vh;
  object-fit:cover;
}


/* technical markers */

.rea5-tech-marker{
  position:absolute;
  z-index:2;
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}

.rea5-tech-marker::before{
  content:"";
  position:absolute;
  width:1px;
  background:rgba(255,255,255,.8);
}

.rea5-tech-marker i{
  position:absolute;
  width:7px;
  height:7px;
  border:1px solid #fff;
  border-radius:50%;
}

.rea5-tech-marker span,
.rea5-tech-marker small{
  display:block;
}

.rea5-tech-marker span{
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
}

.rea5-tech-marker small{
  margin-top:3px;
  font-size:10px;
}

.rea5-marker-a{
  left:7%;
  top:26%;
}

.rea5-marker-a::before{
  left:0;
  top:35px;
  height:110px;
}

.rea5-marker-a i{
  left:-3px;
  top:142px;
}

.rea5-marker-b{
  left:48%;
  top:66%;
}

.rea5-marker-b::before{
  left:0;
  bottom:32px;
  height:90px;
}

.rea5-marker-b i{
  left:-3px;
  bottom:119px;
}

.rea5-marker-c{
  right:7%;
  top:20%;
}

.rea5-marker-c::before{
  right:0;
  top:35px;
  height:105px;
}

.rea5-marker-c i{
  right:-3px;
  top:137px;
}


/* =========================================================
   PROJECT CAPTION
   ========================================================= */

.rea5-project-caption{
  display:grid;
  grid-template-columns:170px 1.05fr .75fr;
  gap:55px;

  padding-top:75px;
  padding-bottom:190px;
}

.rea5-project-id{
  display:flex;
  align-items:flex-start;
  gap:20px;
}

.rea5-project-id > span{
  min-width:28px;
  padding-top:1px;
  font-size:9px;
  letter-spacing:.16em;
  color:var(--r5-muted);
}

.rea5-project-id > p{
  margin:0;
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
}

.rea5-project-caption h2{
  font-size:clamp(43px,4.3vw,76px);
}

.rea5-project-copy{
  padding-top:3px;
}

.rea5-project-copy > p{
  max-width:480px;
  margin:0;
  color:var(--r5-muted);
  font-size:15px;
  line-height:1.65;
}

.rea5-capabilities{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:30px;
}

.rea5-capabilities span{
  padding:8px 12px;
  border:1px solid var(--r5-line);
  border-radius:999px;
  font-size:10px;
}


/* =========================================================
   PROJECT SECTIONS
   ========================================================= */

.rea5-project{
  padding:190px 0 210px;
}

.rea5-section-head{
  display:grid;
  grid-template-columns:170px 1.15fr .55fr;
  gap:55px;
  align-items:end;
  margin-bottom:80px;
}

.rea5-section-head h2{
  font-size:clamp(52px,5.2vw,92px);
}

.rea5-section-intro{
  max-width:390px;
  margin:0;
  padding-bottom:7px;
  color:var(--r5-muted);
  font-size:15px;
  line-height:1.65;
}


/* =========================================================
   BIG IMAGES
   ========================================================= */

.rea5-image-stage{
  position:relative;
  width:min(1760px,96vw);
  margin:0 auto;
}

.rea5-image-stage img{
  display:block;
  width:100%;
  height:auto;
  max-height:88vh;
  object-fit:contain;
}

.rea5-stage-index{
  position:absolute;
  left:22px;
  bottom:20px;

  padding:8px 11px;
  background:rgba(250,248,243,.9);

  font-size:8px;
  font-weight:700;
  letter-spacing:.18em;
}


/* =========================================================
   INNOVATION
   ========================================================= */

.rea5-innovation{
  background:var(--r5-paper);
}

.rea5-detail-row{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:11vw;
  padding-top:65px;
}

.rea5-detail-row > p{
  max-width:510px;
  margin:0;

  font-family:Georgia,serif;
  font-size:31px;
  line-height:1.22;
  letter-spacing:-.02em;
}

.rea5-detail-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--r5-line);
}

.rea5-detail-list span{
  padding:15px 0;
  border-bottom:1px solid var(--r5-line);
  font-size:12px;
}

.rea5-detail-list span:nth-child(even){
  padding-left:25px;
}


/* =========================================================
   INDUS
   ========================================================= */

.rea5-indus{
  background:var(--r5-dark);
  color:#fff;
}

.rea5-indus .rea5-project-id > span,
.rea5-indus .rea5-section-intro{
  color:rgba(255,255,255,.6);
}

.rea5-indus-stage{
  width:100%;
}

.rea5-indus-stage img{
  width:100%;
  max-height:none;
  object-fit:contain;
}

.rea5-digital-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:75px;
  border-top:1px solid rgba(255,255,255,.2);
}

.rea5-digital-strip > div{
  min-height:210px;
  padding:27px 30px 20px;
  border-right:1px solid rgba(255,255,255,.2);
}

.rea5-digital-strip > div:first-child{
  padding-left:0;
}

.rea5-digital-strip > div:last-child{
  border-right:0;
}

.rea5-digital-strip span{
  display:block;
  margin-bottom:50px;
  font-size:8px;
  color:rgba(255,255,255,.45);
}

.rea5-digital-strip strong{
  display:block;
  margin-bottom:13px;
  font-family:Georgia,serif;
  font-size:26px;
  font-weight:400;
}

.rea5-digital-strip p{
  max-width:240px;
  margin:0;
  color:rgba(255,255,255,.62);
  font-size:12px;
  line-height:1.55;
}


/* =========================================================
   MULTISUPPORT
   ========================================================= */

.rea5-multisupport{
  background:var(--r5-cream);
}

.rea5-multi-stage{
  width:min(1680px,92vw);
}

.rea5-multi-caption{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw;
  padding-top:70px;
}

.rea5-multi-caption > p{
  max-width:650px;
  margin:0;

  font-family:Georgia,serif;
  font-size:34px;
  line-height:1.2;
  letter-spacing:-.025em;
}

.rea5-multi-caption > div{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:8px;
}

.rea5-multi-caption span{
  padding:9px 13px;
  border:1px solid var(--r5-line);
  border-radius:999px;
  font-size:9px;
  letter-spacing:.08em;
}


/* =========================================================
   CLIENT CASE
   ========================================================= */

.rea5-case{
  padding-bottom:200px;
  background:#e8e3d8;
}

.rea5-case-intro{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:10vw;
  margin-bottom:85px;
}

.rea5-case-intro h2{
  margin-top:45px;
  font-size:clamp(55px,5.7vw,100px);
}

.rea5-case-lead{
  align-self:end;
  padding-bottom:8px;
}

.rea5-case-lead p{
  max-width:430px;
  margin:0 0 17px;
  color:var(--r5-muted);
  font-size:15px;
  line-height:1.6;
}

.rea5-case-lead p:first-child{
  color:var(--r5-ink);
  font-family:Georgia,serif;
  font-size:25px;
  line-height:1.25;
}

.rea5-case-image{
  width:100%;
  margin:0;
}

.rea5-case-image img{
  display:block;
  width:100%;
  height:auto;
  max-height:90vh;
  object-fit:cover;
}

.rea5-case-process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:75px;
  border-top:1px solid var(--r5-line);
}

.rea5-case-process > div{
  min-height:230px;
  padding:27px 30px 20px;
  border-right:1px solid var(--r5-line);
}

.rea5-case-process > div:first-child{
  padding-left:0;
}

.rea5-case-process > div:last-child{
  border-right:0;
}

.rea5-case-process span{
  display:block;
  margin-bottom:50px;
  font-size:8px;
  color:var(--r5-muted);
}

.rea5-case-process strong{
  display:block;
  margin-bottom:13px;
  font-family:Georgia,serif;
  font-size:27px;
  font-weight:400;
}

.rea5-case-process p{
  max-width:240px;
  margin:0;
  color:var(--r5-muted);
  font-size:12px;
  line-height:1.55;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.rea5-final{
  padding:170px 0;
  background:var(--r5-paper);
}

.rea5-final-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:10vw;
  align-items:end;
}

.rea5-final h2{
  font-size:clamp(62px,6.5vw,112px);
}

.rea5-final-side{
  padding-bottom:8px;
}

.rea5-final-side p{
  max-width:410px;
  margin:0 0 32px;
  color:var(--r5-muted);
  font-size:15px;
  line-height:1.6;
}

.rea5-final-side a{
  display:inline-flex;
  padding:15px 24px;

  border-radius:999px;
  background:var(--r5-orange);
  color:#fff;

  text-decoration:none;
  font-size:13px;
  font-weight:700;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:980px){

  .rea5-shell{
    width:calc(100% - 56px);
  }

  .rea5-opening-head{
    min-height:0;
    grid-template-columns:1fr;
    padding-top:95px;
  }

  .rea5-opening-side{
    margin-top:45px;
  }

  .rea5-project-caption,
  .rea5-section-head{
    grid-template-columns:1fr;
  }

  .rea5-project-caption{
    gap:30px;
  }

  .rea5-section-head{
    gap:28px;
  }

  .rea5-project{
    padding:140px 0 160px;
  }

  .rea5-detail-row,
  .rea5-multi-caption,
  .rea5-case-intro,
  .rea5-final-grid{
    grid-template-columns:1fr;
  }

  .rea5-detail-list{
    margin-top:20px;
  }

  .rea5-digital-strip,
  .rea5-case-process{
    grid-template-columns:1fr 1fr;
  }

  .rea5-digital-strip > div:nth-child(2),
  .rea5-case-process > div:nth-child(2){
    border-right:0;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:640px){

  .rea5-shell{
    width:calc(100% - 40px);
  }

  .rea5-opening-head{
    padding-top:70px;
    padding-bottom:55px;
  }

  .rea5-opening h1{
    font-size:14vw;
  }

  .rea5-opening-text{
    font-size:15px;
  }

  .rea5-hero-visual img{
    min-height:390px;
  }

  .rea5-tech-marker{
    display:none;
  }

  .rea5-project-caption{
    padding-top:48px;
    padding-bottom:110px;
  }

  .rea5-project-caption h2{
    font-size:11vw;
  }

  .rea5-project{
    padding:100px 0 115px;
  }

  .rea5-section-head{
    margin-bottom:48px;
  }

  .rea5-section-head h2{
    font-size:12vw;
  }

  .rea5-image-stage{
    width:100%;
  }

  .rea5-detail-row{
    padding-top:45px;
  }

  .rea5-detail-row > p{
    font-size:26px;
  }

  .rea5-detail-list{
    grid-template-columns:1fr;
  }

  .rea5-detail-list span:nth-child(even){
    padding-left:0;
  }

  .rea5-digital-strip,
  .rea5-case-process{
    grid-template-columns:1fr;
  }

  .rea5-digital-strip > div,
  .rea5-case-process > div{
    min-height:0;
    padding:28px 0;
    border-right:0;
    border-bottom:1px solid currentColor;
  }

  .rea5-digital-strip span,
  .rea5-case-process span{
    margin-bottom:25px;
  }

  .rea5-multi-caption{
    padding-top:45px;
  }

  .rea5-multi-caption > p{
    font-size:27px;
  }

  .rea5-case-intro{
    margin-bottom:55px;
  }

  .rea5-case-intro h2{
    margin-top:30px;
    font-size:12vw;
  }

  .rea5-case-image img{
    max-height:none;
    object-fit:contain;
  }

  .rea5-final{
    padding:105px 0;
  }

  .rea5-final h2{
    font-size:13vw;
  }

  .rea5-final-side{
    margin-top:45px;
  }

}

/* KAFK REALISATIONS V5 END */

/* KAFK REALISATIONS V6 START */

/* ---------------------------------------------------------
   INTRO : plus courte, la démonstration arrive plus vite
   --------------------------------------------------------- */

.rea5-opening-head{
  min-height:360px !important;
  padding-top:78px !important;
  padding-bottom:58px !important;
}

.rea5-opening h1{
  font-size:clamp(60px,5.8vw,100px) !important;
}

.rea5-opening-text{
  max-width:390px;
  font-size:15px !important;
  letter-spacing:.01em;
}


/* ---------------------------------------------------------
   LES IMAGES DEVIENNENT DES PIÈCES
   Elles ne servent plus de fond de section.
   --------------------------------------------------------- */

.rea5-hero-visual,
.rea5-image-stage,
.rea5-case-image{
  width:min(1680px,92vw) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  background:#fff;

  box-shadow:
    0 34px 80px rgba(29,35,31,.13),
    0 8px 24px rgba(29,35,31,.07);

  overflow:hidden;
}

.rea5-hero-visual{
  border-radius:2px;
}

.rea5-hero-visual img{
  min-height:0 !important;
  max-height:none !important;
  width:100%;
  height:auto;
  object-fit:contain !important;
}

.rea5-image-stage img{
  max-height:none !important;
  object-fit:contain !important;
}

.rea5-case-image img{
  max-height:none !important;
  object-fit:contain !important;
}


/* ---------------------------------------------------------
   RESPIRATION AUTOUR DES VISUELS
   --------------------------------------------------------- */

.rea5-project-caption{
  padding-top:95px !important;
  padding-bottom:230px !important;
}

.rea5-project{
  padding-top:210px !important;
  padding-bottom:230px !important;
}

.rea5-section-head{
  margin-bottom:95px !important;
}

.rea5-detail-row,
.rea5-digital-strip,
.rea5-multi-caption,
.rea5-case-process{
  margin-top:95px !important;
}


/* ---------------------------------------------------------
   TITRES : moins "affiche", davantage cartel éditorial
   --------------------------------------------------------- */

.rea5-project-caption h2,
.rea5-section-head h2{
  max-width:900px;
  font-size:clamp(42px,4.1vw,72px) !important;
  line-height:1.01 !important;
}

.rea5-section-head{
  grid-template-columns:150px minmax(0,1fr) minmax(280px,.55fr) !important;
}


/* ---------------------------------------------------------
   TEXTE : on renforce les réalisations
   --------------------------------------------------------- */

.rea5-project-copy > p,
.rea5-section-intro,
.rea5-case-lead p{
  color:#4f4d48 !important;
  font-size:16px !important;
  line-height:1.68 !important;
}

.rea5-project-copy > p{
  max-width:530px !important;
}

.rea5-section-intro{
  max-width:430px !important;
}

.rea5-detail-row > p{
  max-width:590px !important;
  font-size:30px !important;
  line-height:1.28 !important;
}


/* ---------------------------------------------------------
   INDUS
   L'image flotte aussi dans la section sombre.
   --------------------------------------------------------- */

.rea5-indus-stage{
  width:min(1680px,92vw) !important;
  background:#f8f7f3;
}

.rea5-indus-stage img{
  width:100%;
  height:auto;
}


/* ---------------------------------------------------------
   CAS CLIENT : véritable final de démonstration
   --------------------------------------------------------- */

.rea5-case-intro{
  margin-bottom:100px !important;
}

.rea5-case-image{
  width:min(1740px,94vw) !important;
}

.rea5-case-lead p:first-child{
  font-size:13px !important;
  font-family:inherit !important;
  font-weight:700;
  letter-spacing:.14em;
}


/* ---------------------------------------------------------
   OMBRE PLUS DISCRÈTE SUR LES ÉCRANS PETITS
   --------------------------------------------------------- */

@media(max-width:980px){

  .rea5-opening-head{
    min-height:0 !important;
  }

  .rea5-section-head{
    grid-template-columns:1fr !important;
  }

  .rea5-hero-visual,
  .rea5-image-stage,
  .rea5-case-image,
  .rea5-indus-stage{
    width:calc(100% - 48px) !important;
  }

  .rea5-project{
    padding-top:140px !important;
    padding-bottom:155px !important;
  }

}


@media(max-width:640px){

  .rea5-opening-head{
    padding-top:55px !important;
    padding-bottom:45px !important;
  }

  .rea5-opening h1{
    font-size:13vw !important;
  }

  .rea5-hero-visual,
  .rea5-image-stage,
  .rea5-case-image,
  .rea5-indus-stage{
    width:calc(100% - 24px) !important;

    box-shadow:
      0 18px 45px rgba(29,35,31,.12),
      0 4px 14px rgba(29,35,31,.06);
  }

  .rea5-project-caption{
    padding-top:55px !important;
    padding-bottom:130px !important;
  }

  .rea5-project{
    padding-top:110px !important;
    padding-bottom:130px !important;
  }

  .rea5-section-head{
    margin-bottom:55px !important;
  }

  .rea5-project-caption h2,
  .rea5-section-head h2{
    font-size:11vw !important;
  }

  .rea5-detail-row,
  .rea5-digital-strip,
  .rea5-multi-caption,
  .rea5-case-process{
    margin-top:55px !important;
  }

}

/* KAFK REALISATIONS V6 END */

/* =========================================================
   REALISATIONS V7 — WHITE / MINERAL / TECHNICAL
   ========================================================= */

body:has(.rea5-opening){
  background:#f7f8f7;
}

/* ---------- INTRO ---------- */

.rea5-opening{
  background:#f7f8f7 !important;
}

.rea5-opening-head{
  background:#f7f8f7 !important;
  min-height:390px !important;
  padding-top:90px !important;
  padding-bottom:72px !important;
}

.rea5-opening h1{
  color:#111311 !important;
}

.rea5-opening-text{
  color:#555b57 !important;
}


/* ---------- GRANDE IMAGE D'OUVERTURE ---------- */

.rea5-hero-visual{
  width:min(1540px,90vw) !important;
  margin:0 auto !important;

  background:#fff !important;

  box-shadow:
    0 24px 55px rgba(18,28,24,.09),
    0 3px 10px rgba(18,28,24,.04) !important;
}

.rea5-hero-visual img{
  display:block;
  width:100% !important;
  height:min(650px,55vw) !important;
  object-fit:cover !important;
}


/* ---------- SECTIONS ---------- */

.rea5-project{
  background:#fff !important;
  padding-top:180px !important;
  padding-bottom:190px !important;
}

.rea5-project:nth-of-type(even){
  background:#f3f5f4 !important;
}


/* ---------- PREMIER CARTEL ---------- */

.rea5-project-caption{
  background:#fff !important;

  padding-top:110px !important;
  padding-bottom:190px !important;
}

.rea5-project-caption .rea5-section-head{
  align-items:start !important;
}


/* ---------- TITRES ---------- */

.rea5-project-caption h2,
.rea5-section-head h2{
  color:#101210 !important;
  letter-spacing:-.045em !important;
}

.rea5-project-caption h2 em,
.rea5-section-head h2 em{
  color:#202824 !important;
}


/* ---------- PETITS LABELS TECHNIQUES ---------- */

.rea5-index,
.rea5-kicker,
.rea5-project-label{
  color:#58645f !important;
}

.rea5-tags span,
.rea5-project-tags span{
  background:transparent !important;
  border:1px solid #cbd1ce !important;
  color:#48514d !important;
}


/* ---------- TEXTE ---------- */

.rea5-project-copy > p,
.rea5-section-intro,
.rea5-case-lead p{
  color:#4b514e !important;
}


/* ---------- IMAGES / PLANCHES ---------- */

.rea5-image-stage,
.rea5-case-image,
.rea5-indus-stage{
  width:min(1540px,90vw) !important;

  margin-left:auto !important;
  margin-right:auto !important;

  background:#fff !important;

  box-shadow:
    0 28px 65px rgba(17,28,23,.10),
    0 4px 12px rgba(17,28,23,.04) !important;

  border:1px solid rgba(30,45,38,.06);
}


/* On évite l'effet "image collée au texte" */

.rea5-section-head{
  margin-bottom:120px !important;
}

.rea5-image-stage{
  margin-top:0 !important;
  margin-bottom:0 !important;
}


/* ---------- GRANDES RESPIRATIONS ---------- */

.rea5-detail-row{
  margin-top:120px !important;
}

.rea5-digital-strip{
  margin-top:120px !important;
}

.rea5-multi-caption{
  margin-top:120px !important;
}

.rea5-case-process{
  margin-top:130px !important;
}


/* ---------- FILETS ---------- */

.rea5-project *,
.rea5-project-caption *{
  border-color:rgba(25,37,31,.13);
}


/* ---------- SECTION SOMBRE INDUS ---------- */
/* on conserve un seul vrai changement d'ambiance */

.rea5-project.rea5-dark{
  background:#18201d !important;
  color:#f6f7f5 !important;
}

.rea5-project.rea5-dark h2,
.rea5-project.rea5-dark h2 em{
  color:#fff !important;
}

.rea5-project.rea5-dark p{
  color:rgba(255,255,255,.72) !important;
}


/* ---------- CAS CLIENT ---------- */

.rea5-case{
  background:#eef2f0 !important;
}

.rea5-case-image{
  width:min(1600px,92vw) !important;
}


/* ---------- CTA FINAL ---------- */

.rea5-cta{
  background:#fff !important;
}


/* =========================================================
   DESKTOP : sensation galerie / exposition
   ========================================================= */

@media(min-width:981px){

  .rea5-project-caption,
  .rea5-project{
    min-height:680px;
  }

  .rea5-section-head{
    width:min(1320px,84vw) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .rea5-project-caption > *:not(.rea5-image-stage){
    width:min(1320px,84vw);
    margin-left:auto;
    margin-right:auto;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:980px){

  .rea5-opening-head{
    min-height:0 !important;
    padding-top:65px !important;
    padding-bottom:65px !important;
  }

  .rea5-hero-visual,
  .rea5-image-stage,
  .rea5-case-image,
  .rea5-indus-stage{
    width:calc(100% - 36px) !important;
  }

  .rea5-hero-visual img{
    height:auto !important;
  }

  .rea5-project,
  .rea5-project-caption{
    padding-top:110px !important;
    padding-bottom:120px !important;
  }

}


/* =========================================================
   KAFK — LOGO HEADER — FINAL
   ========================================================= */

html body .kafk-shell-header .brand-logo img {
  width: 120px !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
}

@media (max-width: 900px) {
  html body .kafk-shell-header .brand-logo img {
    width: 105px !important;
  }
}

@media (max-width: 600px) {
  html body .kafk-shell-header .brand-logo img {
    width: 95px !important;
  }
}


/* KAFK — FINAL CTA TITLE ALIGNMENT */

/*
   Les deux parties du titre partagent exactement
   le même axe gauche.
*/
.final-cta h2 > span,
.final-cta h2 > em{
  display:block;
  margin-left:0 !important;
  padding-left:0 !important;
  transform:none !important;
  text-indent:0 !important;
}



/* KAFK — FINAL CTA TITLE POSITION */
.final-cta h2{
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left !important;
}

.final-cta h2 > span,
.final-cta h2 > em{
  display:block !important;
  width:100%;
  margin:0 !important;
  padding:0 !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  text-align:left !important;
}

/* KAFK — REALISATIONS GABARIT START */

/*
   Réalisations — même largeur générale que KAFK.
   On neutralise ici les anciens comportements full-width
   sans modifier la composition éditoriale.
*/

body.kafk-realisations-v9 .rea-editorial{
  width:min(var(--max),calc(100% - 40px)) !important;
  max-width:var(--max) !important;
  margin:48px auto 0 !important;
  overflow:hidden;
}

/* Les grands blocs restent dans le conteneur KAFK */

body.kafk-realisations-v9 .rea-board,
body.kafk-realisations-v9 .rea-case-result,
body.kafk-realisations-v9 .rea-case-head,
body.kafk-realisations-v9 .rea-dark-head,
body.kafk-realisations-v9 .rea-digital-gallery,
body.kafk-realisations-v9 .rea-digital-result,
body.kafk-realisations-v9 .rea-client{
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Images : jamais au-delà du gabarit */

body.kafk-realisations-v9 .rea-editorial img{
  max-width:100% !important;
}

/* On neutralise les éventuels débordements 100vw */

body.kafk-realisations-v9 .rea-territory,
body.kafk-realisations-v9 .rea-construction,
body.kafk-realisations-v9 .rea-digital,
body.kafk-realisations-v9 .rea-client,
body.kafk-realisations-v9 .rea-end{
  max-width:100% !important;
}

/* Tablette */

@media(max-width:980px){
  body.kafk-realisations-v9 .rea-editorial{
    width:calc(100% - 32px) !important;
    margin-top:32px !important;
  }
}

/* Mobile */

@media(max-width:600px){
  body.kafk-realisations-v9 .rea-editorial{
    width:calc(100% - 28px) !important;
    margin-top:24px !important;
  }
}

/* KAFK — REALISATIONS GABARIT END */


/* KAFK GLOBAL BACK TO TOP */

#kafk-back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9999;

  width:38px;
  height:38px;
  padding:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(20,20,20,.16);
  border-radius:50%;

  background:rgba(255,255,255,.88);
  color:#181818;

  font:400 18px/1 Arial,sans-serif;

  cursor:pointer;

  opacity:0;
  visibility:hidden;
  transform:translateY(8px);

  box-shadow:0 5px 20px rgba(0,0,0,.08);

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

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease,
    background .2s ease;
}

#kafk-back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

#kafk-back-to-top:hover{
  background:#fff;
}

@media(max-width:680px){
  #kafk-back-to-top{
    right:16px;
    bottom:16px;
    width:36px;
    height:36px;
  }
}

/* END KAFK GLOBAL BACK TO TOP */


/* KAFK BACK TO TOP — LINK FIX */
#kafk-back-to-top{
  text-decoration:none !important;
}