/* home.css : sections propres à la page d'accueil. Le reste (nav, footer, liens CTA,
   cartes, hairlines) vient de base.css, chargé avant celui-ci. */

.page-frame{margin:0 32px; border-left:1px solid var(--line); border-right:1px solid var(--line);}
@media (min-width:1464px){ .page-frame{max-width:1400px; margin:0 auto;} }
@media (max-width:640px){ .page-frame{margin:0 14px;} }

/* ── Hero ── */
.hero{position:relative; overflow:hidden; padding:120px 0 0; text-align:center; background:var(--ink); color:#fff;}
.hero-inner{position:relative; z-index:2; padding-bottom:72px;}
.blob{position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none;}
.blob-2{width:480px; height:480px; background:radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); top:-160px; right:-120px; opacity:.9;}
.hero-giant{position:absolute; left:0; right:0; bottom:0; z-index:1; pointer-events:none; user-select:none; text-align:center; overflow:hidden; line-height:1;}
.hero-giant span{
  font-family:var(--sans); font-weight:900;
  font-size:clamp(70px,16vw,220px); letter-spacing:-0.03em; color:transparent;
  background:linear-gradient(0deg, rgba(255,255,255,.12) 0%, transparent 70%);
  -webkit-background-clip:text; background-clip:text; white-space:nowrap;
}

.badge{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.3); border-radius:4px; padding:9px 20px; margin-bottom:28px;
  background:rgba(255,255,255,.05); position:relative; color:rgba(255,255,255,.9);
}

h1{
  font-family:var(--sans); font-weight:900; line-height:1.04; letter-spacing:-0.02em;
  font-size:clamp(30px, 4.2vw, 64px); max-width:880px; margin:0 auto 24px; position:relative; color:#fff;
  text-wrap:pretty;
}
h1 em{font-style:normal;}

.lede{font-family:var(--sans); font-size:17px; line-height:1.5; color:rgba(255,255,255,.6); max-width:520px; margin:0 auto 32px; position:relative;}

.cta-row{display:flex; align-items:center; justify-content:center; margin-bottom:24px; position:relative;}
.hero-cta-avatar{width:26px; height:26px; border-radius:50%; object-fit:cover; border:1.5px solid rgba(255,255,255,.4); flex-shrink:0;}

.trust{
  display:inline-flex; align-items:center; gap:12px; background:rgba(255,255,255,0.06);
  border:1px solid var(--line-dark); border-radius:4px; padding:10px 20px; position:relative;
  text-decoration:none; color:inherit; transition:border-color .2s ease;
}
.trust:hover{border-color:rgba(255,255,255,.5);}
.trust .stack{display:flex;}
.trust .count, .trust .count-sub{font-size:12.5px; font-weight:600; color:rgba(255,255,255,.85);}
.trust-stars{color:#fff; font-size:13px; letter-spacing:2px; line-height:1; margin-bottom:4px;}

.section-break{position:relative; height:56px; width:100%; padding:0 32px; box-sizing:border-box;}
.section-break.standalone{width:auto; margin:0 32px; padding:0;}
@media (min-width:1464px){ .section-break.standalone{max-width:1400px; margin:0 auto;} }
@media (max-width:640px){ .section-break.standalone{margin:0 14px;} }
.section-break::before{content:''; position:absolute; top:28px; left:0; right:0; height:1px; background:var(--line);}
.section-break .mark{position:absolute; top:40px; width:14px; height:14px; border-top:1.5px solid var(--ink-40);}
.section-break .mark.left{left:0; border-left:1.5px solid var(--ink-40);}
.section-break .mark.right{right:0; border-right:1.5px solid var(--ink-40);}

/* ── Marquee logos clients : règles communes dans base.css ── */
@media (max-width:640px){ .testimonial-wrap{padding-left:0; padding-right:0;} }

section{padding:80px 0;}
.section-head{margin-bottom:48px;}
.section-head h2{font-family:var(--sans); font-weight:900; font-size:clamp(28px,5vw,64px); letter-spacing:-0.02em; margin-top:10px; max-width:820px; line-height:1;}
.section-head p.section-intro{color:var(--ink-60); font-size:16px; max-width:520px; margin-top:14px; line-height:1.6;}

/* ── Preuve chiffrée ── */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
@media (max-width:760px){ .stat-row{grid-template-columns:1fr;} }
.stat-tile{position:relative; background:#fff; padding:52px 32px 44px; border-bottom:2px solid transparent;}
.stat-tile:hover{border-bottom-color:var(--ink);}
.stat-tile .corner{position:absolute; top:22px; right:22px; width:13px; height:13px; border-top:1.5px solid var(--ink-40); border-right:1.5px solid var(--ink-40); opacity:.5;}
.stat-num{font-family:var(--sans); font-weight:900; font-size:clamp(40px,6vw,80px); line-height:.92; letter-spacing:-0.02em; color:var(--ink);}
.stat-label{font-family:var(--sans); font-size:14px; color:var(--ink-40); margin-top:14px;}

/* ── Cartes "pourquoi" (4 colonnes) ── */
.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); overflow:hidden;}
@media (max-width:960px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .card-grid{grid-template-columns:1fr;} }
.card-grid .card{background:#fff; padding:32px 28px; border:none; border-radius:0; margin:0;}
.card-grid .card svg{display:block; color:var(--ink); margin-bottom:14px;}
.card-grid .card h3{font-family:var(--sans); font-weight:700; font-size:18px; margin-bottom:10px;}
.card-grid .card p{color:var(--ink-60); font-size:14.5px; line-height:1.6;}

/* ── Méthode : scroll bloqué ── */
.scroll-method{display:grid; grid-template-columns:140px 1fr; gap:48px;}
@media (max-width:760px){ .scroll-method{grid-template-columns:1fr;} .scroll-side{display:none;} }
.scroll-side{position:sticky; top:96px; align-self:start; height:fit-content;}
.scroll-rail{position:relative; width:2px; height:180px; background:var(--line); border-radius:2px; margin-bottom:20px; overflow:hidden;}
.scroll-rail-fill{position:absolute; top:0; left:0; width:100%; background:var(--ink); border-radius:2px; height:0%;}
.scroll-num{font-family:var(--sans); font-weight:900; font-size:clamp(56px,6vw,96px); line-height:1; margin-top:8px; color:var(--line);}
.scroll-block{padding:48px 0; border-top:1px solid var(--line); transition:background .3s ease;}
.scroll-block:last-child{border-bottom:1px solid var(--line);}
.scroll-block.active{background:#fafafa;}
.scroll-block-inner{padding:8px 28px;}
.step-duration{font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink); font-weight:700;}
.scroll-block h3{font-family:var(--sans); font-weight:900; font-size:26px; letter-spacing:-0.01em; margin:10px 0 14px;}
.scroll-block p{color:var(--ink-60); font-size:15.5px; line-height:1.5; max-width:480px; margin-bottom:14px;}
.deliverable{margin-top:4px; font-size:12.5px; color:var(--ink); font-weight:600;}

/* ── Offres : onglets + panneau ── */
.offer-tabs{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); overflow:hidden; margin-bottom:40px;}
@media (max-width:760px){ .offer-tabs{grid-template-columns:1fr;} }
.offer-tab-card{background:#fff; border:none; border-right:1px solid var(--line); padding:28px 20px; text-align:center; cursor:pointer; font-family:var(--sans);}
.offer-tab-card:last-child{border-right:none;}
.offer-tab-card.active{position:relative; box-shadow:inset 0 -3px 0 var(--ink);}
.offer-icon{display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:var(--ink-40);}
.offer-tab-card.active .offer-icon{color:var(--ink);}
.offer-tab-card h4{font-family:var(--sans); font-weight:700; font-size:16px; color:var(--ink-40); margin-bottom:4px;}
.offer-tab-card.active h4{color:var(--ink);}
.offer-tab-card p{font-size:12.5px; color:var(--ink-40); margin-bottom:12px;}
.offer-mini-stats{font-size:12px; color:var(--ink-40);}
.offer-tab-card.active .offer-mini-stats{color:var(--ink); font-weight:600;}
.offer-panel{display:none; grid-template-columns:1fr 1.1fr 0.8fr; gap:32px; padding-bottom:24px;}
.offer-panel.active{display:grid;}
@media (max-width:960px){ .offer-panel.active{grid-template-columns:1fr;} }
.offer-col h3{font-family:var(--sans); font-weight:900; font-size:30px; letter-spacing:-0.01em; margin:10px 0 22px; color:var(--ink);}
.offer-block{margin-bottom:18px;}
.offer-block h4{font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-40); margin-bottom:6px;}
.offer-block p{font-size:14.5px; line-height:1.6; color:var(--ink); margin:0;}
.offer-tags{display:flex; flex-wrap:wrap; font-size:12px; letter-spacing:0.02em; color:var(--ink-60);}
.offer-tags span{display:inline-flex; align-items:center;}
.offer-tags span:not(:first-child)::before{content:"·"; margin:0 10px; color:var(--ink-40);}
.offer-included-title{font-family:var(--sans); font-weight:700; font-size:15px; margin-bottom:14px;}
.offer-check{display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); padding:11px 2px; font-size:13.5px; color:var(--ink);}
.offer-check svg{color:var(--ink); flex-shrink:0;}
.offer-stats{background:var(--ink); color:#fff; border-radius:6px; padding:26px; display:flex; flex-direction:column; gap:18px;}
.offer-stat-num{font-family:var(--sans); font-weight:900; font-size:30px;}
.offer-stat-label{font-size:11.5px; color:var(--paper-60); margin-top:2px;}

/* ── Cas clients (aperçu homepage) ── */
.case-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:36px;}
@media (max-width:640px){ .case-grid{grid-template-columns:1fr; gap:48px;} .case-wrap{padding-left:12px; padding-right:12px;} }
.case-card{display:block;}
.case-preview{position:relative; border-radius:6px; overflow:hidden; aspect-ratio:1/1; background:radial-gradient(135% 100% at 20% 0%, rgba(255,255,255,.14), var(--ink) 65%); margin-bottom:16px; box-shadow:var(--glow-shadow);}
@media (max-width:640px){ .case-preview{aspect-ratio:3/4;} }
.case-preview img{transition:transform .5s cubic-bezier(.16,1,.3,1);}
.case-preview video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s ease, transform .5s cubic-bezier(.16,1,.3,1);}
.case-preview.hovering video{opacity:1;}
.case-card:hover .case-preview img, .case-card:hover .case-preview video{transform:scale(1.06);}
.case-tags{display:flex; margin-bottom:12px; flex-wrap:wrap; font-size:12px; letter-spacing:0.02em; color:var(--ink-60);}
.case-tag:not(:first-child)::before{content:"·"; margin:0 10px; color:var(--ink-40);}
.case-card h3{font-family:var(--sans); font-weight:900; font-size:26px; letter-spacing:-0.01em; margin-bottom:8px;}
@media (max-width:640px){ .case-card h3{font-size:24px;} }
.case-card p{color:var(--ink-60); font-size:14px; line-height:1.6; margin-bottom:12px;}
@media (max-width:640px){ .case-card p{font-size:15.5px;} }
.case-link{font-size:14px; font-weight:600; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:8px;}
.case-link-icon{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; color:var(--ink); font-size:16px; flex-shrink:0; transition:transform .2s ease;}
.case-card:hover .case-link-icon{transform:translate(3px,-3px);}
.case-more{text-align:center;}

@media (max-width:760px){ .compare-visual-grid{grid-template-columns:1fr !important;} }

/* ── FAQ accordion ── */
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:22px 4px; font-family:var(--sans); font-size:17px; font-weight:700; display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:var(--ink);}
.faq-q .chevron{transition:transform .25s ease; color:var(--ink);}
.faq-item.open .faq-q .chevron{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{padding:0 4px 22px; color:var(--ink-60); font-size:15px; line-height:1.6; max-width:640px;}

/* ── Ask IA — barre flottante ── */
.ask-box{
  position:fixed; left:50%; bottom:48px; width:min(640px, calc(100% - 32px));
  transform:translateX(-50%) translateY(16px); opacity:0; pointer-events:none;
  border:1px solid var(--line); border-radius:6px; background:#fff; overflow:hidden;
  box-shadow:var(--glow-shadow); z-index:70;
  transition:opacity .3s ease, transform .3s ease;
}
.ask-box.visible{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.ask-chips{display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; padding:10px 14px 0; max-width:100%; scrollbar-width:none;}
.ask-chips::-webkit-scrollbar{display:none;}
.ask-chip{font-size:11.5px; padding:7px 12px; border-radius:3px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; font-family:var(--sans); transition:border-color .2s ease, color .2s ease; white-space:nowrap; flex-shrink:0; scroll-snap-align:start;}
.ask-chip:hover{border-color:var(--ink); color:var(--ink);}
.ask-answer:not(:empty){padding:10px 14px 0; font-size:13.5px; line-height:1.5; color:var(--ink); max-height:150px; overflow-y:auto;}
.ask-answer.loading{color:var(--ink-40); font-style:italic;}
.ask-answer.error{color:#dc2626;}
.ask-form{display:flex; align-items:center; gap:10px; padding:10px 10px 10px 16px;}
.ask-spark{color:var(--ink); font-size:16px; flex-shrink:0;}
.ask-input{flex:1; min-width:0; border:none; outline:none; font-family:var(--sans); font-size:14px; background:transparent; color:var(--ink);}
.ask-input::placeholder{color:var(--ink-40);}
.ask-submit{width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .2s ease;}
.ask-submit:hover{background:#242424;}
.ask-submit:disabled{opacity:0.5; cursor:not-allowed;}
.ask-disclaimer{font-size:10.5px; color:var(--ink-40); text-align:center; padding:0 14px 10px;}
@media (max-width:480px){ .ask-chips{display:none;} }

/* ── Final CTA ── */
.final-cta{position:relative; overflow:hidden; background:linear-gradient(115deg, var(--ink) 0%, var(--ink) 40%, #262626 100%); color:#fff; text-align:center; padding:120px 0;}
.final-cta h2{font-family:var(--sans); font-weight:900; font-size:clamp(26px,3.6vw,48px); line-height:1.08; letter-spacing:-0.015em; color:#fff; margin:0 auto 20px; max-width:760px;}
.final-cta p{font-family:var(--sans); color:rgba(255,255,255,0.75); max-width:440px; margin:0 auto 36px;}
.final-cta .link-cta{color:#fff; border-color:rgba(255,255,255,.4); justify-content:center;}

/* ── Cookie banner ── */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; max-width:520px; margin:0 auto;
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:22px 24px;
  box-shadow:var(--glow-shadow); z-index:1000; display:none;
}
.cookie-banner p{font-size:13.5px; line-height:1.6; color:var(--ink); margin-bottom:16px;}
.cookie-banner p a{color:var(--ink); border-bottom:1px solid currentColor;}
.cookie-banner .cookie-actions{display:flex; gap:10px;}
.cookie-banner .cookie-actions button{flex:1; font-size:13.5px; padding:11px 16px; border-radius:4px; cursor:pointer; font-family:var(--sans); font-weight:600;}
.cookie-banner .btn-refuse{background:transparent; border:1px solid var(--line); color:var(--ink);}
.cookie-banner .btn-accept{background:var(--ink); border:none; color:#fff;}

body.menu-open .ask-box{display:none !important;}