/* ============================================================
   KO KORNER© — styles.css (feuille de style unique du site)
   Contient : base, header, boutons, layout, cartes, tarifs,
   étapes, book, CTA, formulaires, footer, mentions légales,
   page contact, page d'accueil (animation encre) et responsive.
   ============================================================ */

:root{
  --bg:#E4E6ED;
  --ink:#0a0a0a;
  --sh-d:#c0c3cd;
  --sh-l:#ffffff;
  --grad:linear-gradient(145deg,#f1f2f7,#dbdde5);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Montserrat',sans-serif;-webkit-font-smoothing:antialiased}

/* © du logo : réduit et centré verticalement */
.cmark{font-size:.45em;vertical-align:.62em;margin-left:.12em;font-weight:800}

/* ── Header ── */
.site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:44px;padding:0 48px;height:72px;background:var(--bg);box-shadow:0 10px 30px rgba(156,160,176,.28)}
.logo{font-weight:900;font-size:15px;letter-spacing:.15em;text-decoration:none;color:inherit;white-space:nowrap}
.hnav{display:flex;gap:32px;font-weight:800;font-size:11px;letter-spacing:.2em;overflow-x:auto;scrollbar-width:none}
.hnav::-webkit-scrollbar{display:none}
.hnav a{position:relative;text-decoration:none;color:inherit;opacity:.5;transition:opacity .2s;white-space:nowrap;padding:6px 0}
.hnav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.hnav a:hover,.hnav a.active{opacity:1}
.hnav a:hover::after,.hnav a.active::after{transform:scaleX(1)}
.header-cta{margin-left:auto}

/* ── Boutons ── */
.neo-btn{display:inline-block;position:relative;font-family:inherit;font-weight:800;font-size:11px;letter-spacing:.22em;cursor:pointer;border:none;text-decoration:none;text-align:center;color:var(--ink);padding:17px 40px;border-radius:50px;width:fit-content;background:var(--grad);box-shadow:7px 7px 14px var(--sh-d),-7px -7px 14px var(--sh-l);transition:box-shadow .4s cubic-bezier(.4,0,.2,1),transform .15s}
.neo-btn span{display:inline-block;transition:letter-spacing .4s cubic-bezier(.4,0,.2,1)}
.neo-btn:hover span{letter-spacing:.3em}
.neo-btn:hover{box-shadow:inset 5px 5px 10px var(--sh-d),inset -5px -5px 10px var(--sh-l);transform:scale(.98)}
.neo-btn--dark{background:linear-gradient(160deg,#232327 0%,#121215 45%,#050506 100%);color:var(--bg);box-shadow:7px 7px 16px #bfc2cc,-7px -7px 16px #ffffff,inset 1px 1px 1px rgba(255,255,255,.09),inset -1px -1px 2px rgba(0,0,0,.8)}
.neo-btn--dark:hover{box-shadow:4px 4px 10px #c6c9d3,-4px -4px 10px #ffffff,inset 4px 4px 10px rgba(0,0,0,.9),inset -4px -4px 10px rgba(70,72,84,.35);transform:scale(.98)}
.neo-btn:disabled{opacity:.55;cursor:wait;transform:none}
.btn-sm{padding:13px 28px;font-size:10px}

/* ── Layout & typo ── */
.wrap{max-width:1180px;margin:0 auto;padding:0 48px}
section{padding:88px 0}
.hero{padding:96px 0 26px}
.eyebrow{font-weight:300;font-size:11px;letter-spacing:.35em;opacity:.45;text-transform:uppercase}
.hero-picto{width:76px;margin-bottom:26px;filter:drop-shadow(4px 4px 8px #bcbfca) drop-shadow(-4px -4px 8px #ffffff)}
.page-title{font-weight:900;font-size:clamp(34px,6.5vw,84px);letter-spacing:.05em;line-height:1.05;margin:14px 0 26px;white-space:nowrap;color:#e8eaf1;text-shadow:1px 1px 2px rgba(168,172,186,.85),-1px -1px 2px rgba(255,255,255,.95),4px 4px 8px rgba(168,172,186,.6),-4px -4px 8px rgba(255,255,255,.85),9px 9px 20px rgba(168,172,186,.4),-9px -9px 20px rgba(255,255,255,.65)}
.lead{max-width:640px;font-size:15px;line-height:2;opacity:.65}
.hero-actions{display:flex;gap:20px;flex-wrap:wrap;margin-top:38px}
.sec-head{margin-bottom:46px}
.sec-title2{font-weight:900;font-size:clamp(24px,3.6vw,40px);letter-spacing:.05em;margin-top:10px}
.sec-note{margin-top:16px;font-size:12.5px;line-height:1.8;opacity:.45;max-width:560px}

/* ── Cartes ── */
.grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid-2{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.neo-card{background:var(--grad);border-radius:26px;padding:38px 34px;box-shadow:9px 9px 20px #c2c5cf,-9px -9px 20px #ffffff;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1)}
.neo-card:hover{transform:translateY(-5px);box-shadow:12px 12px 26px #bfc2cc,-12px -12px 26px #ffffff}
.num-chip{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:12px;letter-spacing:.06em;opacity:.55;box-shadow:inset 4px 4px 9px #c4c7d1,inset -4px -4px 9px #ffffff}
.card-t{font-weight:900;font-size:14px;letter-spacing:.16em;margin:24px 0 14px;text-transform:uppercase}
.card-p{font-size:13.5px;line-height:1.95;opacity:.62}

/* ── Tarifs ── */
.tarif-card{text-align:center;display:flex;flex-direction:column;align-items:center}
.tarif-name{font-weight:900;font-size:11px;letter-spacing:.22em;opacity:.4;margin-bottom:14px}
.tarif-sub{font-size:10px;letter-spacing:.18em;opacity:.35;margin-bottom:26px;text-transform:uppercase}
.tarif-features{list-style:none;font-size:13px;line-height:2.3;opacity:.6;margin-bottom:30px}
.tarif-card .neo-btn{margin-top:auto}

/* ── Méthode (étapes) ── */
.steps{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{padding:34px 28px;border-radius:24px;box-shadow:inset 6px 6px 14px #c6c9d3,inset -6px -6px 14px #ffffff}
.step .num-chip{box-shadow:5px 5px 10px #c2c5cf,-5px -5px 10px #ffffff;opacity:.7}

/* ── Book / images ── */
.book-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.book-slot{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border-radius:22px;background:var(--bg);box-shadow:inset 6px 6px 12px rgba(163,177,198,.5),inset -6px -6px 12px rgba(255,255,255,.8);text-align:center;padding:16px}
.book-slot span{font-weight:800;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.35}
.book-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:22px;box-shadow:8px 8px 16px rgba(163,177,198,.5),-8px -8px 16px rgba(255,255,255,.8)}

/* ── Bande CTA ── */
.cta-band{border-radius:34px;padding:76px 40px;text-align:center;box-shadow:inset 9px 9px 22px #c4c7d1,inset -9px -9px 22px #ffffff;display:flex;flex-direction:column;align-items:center;gap:26px}
.cta-band h2{font-weight:900;font-size:clamp(22px,3.4vw,36px);letter-spacing:.06em}
.cta-band p{font-size:13.5px;line-height:1.95;opacity:.6;max-width:540px}

/* ── Formulaires ── */
.f-group{display:flex;flex-direction:column}
.f-label{font-weight:800;font-size:10px;letter-spacing:.2em;opacity:.5;margin:0 0 10px 4px}
.neo-input{width:100%;font-family:inherit;font-weight:400;font-size:13.5px;letter-spacing:.04em;color:var(--ink);background:var(--bg);border:none;outline:none;border-radius:18px;padding:17px 22px;box-shadow:inset 5px 5px 11px #c2c5cf,inset -5px -5px 11px #ffffff;transition:box-shadow .3s}
.neo-input::placeholder{font-weight:800;font-size:10px;letter-spacing:.22em;color:var(--ink);opacity:.35}
.neo-input:focus{box-shadow:inset 7px 7px 14px #bcbfca,inset -7px -7px 14px #ffffff}
select.neo-input{cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 49%,rgba(10,10,10,.45) 50%),linear-gradient(135deg,rgba(10,10,10,.45) 50%,transparent 51%);background-position:calc(100% - 26px) 55%,calc(100% - 20px) 55%;background-size:6px 6px;background-repeat:no-repeat}
textarea.neo-input{resize:vertical;min-height:140px}
.form-row{display:grid;gap:22px;grid-template-columns:1fr 1fr}
.captcha{display:flex;align-items:center;gap:18px;padding:20px 26px;border-radius:18px;background:var(--grad);box-shadow:7px 7px 15px #c2c5cf,-7px -7px 15px #ffffff;width:fit-content;cursor:pointer;user-select:none;position:relative}
.captcha input{position:absolute;opacity:0;pointer-events:none}
.captcha .box{width:26px;height:26px;border-radius:8px;box-shadow:inset 4px 4px 8px #c2c5cf,inset -4px -4px 8px #ffffff;display:grid;place-items:center;font-size:15px;font-weight:900;color:transparent;transition:color .2s}
.captcha input:checked ~ .box{color:var(--ink)}
.cap-text{font-size:12.5px;font-weight:800;letter-spacing:.06em;opacity:.6}
.cap-brand{margin-left:14px;font-size:8.5px;letter-spacing:.14em;opacity:.32;font-weight:800;text-align:right;line-height:1.6;text-transform:uppercase}
.honeypot{position:absolute;left:-9999px;opacity:0}
.form-error{display:none;font-size:12.5px;font-weight:800;letter-spacing:.06em;color:#8a2222;padding:16px 22px;border-radius:16px;box-shadow:inset 4px 4px 9px #c2c5cf,inset -4px -4px 9px #ffffff}
.form-error.show{display:block}

/* ── Page contact ── */
.contact-grid{display:grid;gap:34px;grid-template-columns:1.6fr 1fr;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:24px}
.aside-steps{display:flex;flex-direction:column;gap:22px}
.captcha-row{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap}
.success-card{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.success-card .big{font-weight:900;font-size:clamp(20px,2.6vw,30px);letter-spacing:.05em}

/* ── Mentions légales ── */
.legal{max-width:820px}
.legal-block{background:var(--grad);border-radius:24px;padding:34px 38px;margin-bottom:24px;box-shadow:9px 9px 20px #c2c5cf,-9px -9px 20px #ffffff}
.legal-block h2{font-weight:900;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.legal-block p{font-size:13.5px;line-height:1.95;opacity:.68;margin-bottom:12px}
.legal-block p:last-child{margin-bottom:0}
.legal-block a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.legal-block .row{display:flex;gap:10px;font-size:13.5px;line-height:1.95;margin-bottom:8px}
.legal-block .row .k{font-weight:800;letter-spacing:.04em;opacity:.55;min-width:150px}
.legal-block .row .v{opacity:.72;flex:1}
.legal-note{font-size:11px;letter-spacing:.06em;opacity:.4;margin-top:8px}

/* ── Footer ── */
.site-footer{margin-top:30px;padding:46px 0 56px;box-shadow:0 -10px 30px rgba(156,160,176,.22)}
.foot{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.foot small{font-size:11px;letter-spacing:.08em;opacity:.4;font-weight:400}
.foot .hnav{gap:24px}
.foot .hnav a{font-size:10px}

/* ── Bandeau cookies ── */
#kk-cookie{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;justify-content:center;padding:20px;pointer-events:none;font-family:'Montserrat',sans-serif}
#kk-cookie .kk-cookie-card{pointer-events:auto;max-width:940px;width:100%;display:flex;align-items:center;gap:28px;flex-wrap:wrap;background:var(--grad);color:var(--ink);border-radius:22px;padding:24px 30px;box-shadow:10px 10px 26px #b9bcc6,-10px -10px 26px #ffffff;transform:translateY(18px);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s}
#kk-cookie.kk-in .kk-cookie-card{transform:translateY(0);opacity:1}
#kk-cookie .kk-cookie-txt{flex:1 1 340px;font-size:12.5px;line-height:1.85;opacity:.72;font-weight:400}
#kk-cookie .kk-cookie-txt strong{display:block;font-weight:900;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:1;margin-bottom:8px}
#kk-cookie .kk-cookie-txt a{color:inherit;text-decoration:underline;text-underline-offset:2px;opacity:.9}
#kk-cookie .kk-cookie-actions{display:flex;gap:14px;flex-wrap:wrap}
#kk-cookie .kk-btn{font-family:inherit;font-weight:800;font-size:10px;letter-spacing:.2em;cursor:pointer;border:none;text-decoration:none;text-align:center;color:var(--ink);padding:14px 26px;border-radius:50px;background:var(--grad);box-shadow:6px 6px 12px #bcbfca,-6px -6px 12px #ffffff;transition:box-shadow .35s,transform .15s}
#kk-cookie .kk-btn:hover{box-shadow:inset 4px 4px 9px #bcbfca,inset -4px -4px 9px #ffffff;transform:scale(.98)}
#kk-cookie .kk-btn--dark{background:linear-gradient(160deg,#232327 0%,#121215 45%,#050506 100%);color:var(--bg);box-shadow:6px 6px 14px #bfc2cc,-6px -6px 14px #ffffff,inset 1px 1px 1px rgba(255,255,255,.09),inset -1px -1px 2px rgba(0,0,0,.8)}
#kk-cookie .kk-btn--dark:hover{box-shadow:3px 3px 9px #c6c9d3,-3px -3px 9px #ffffff,inset 4px 4px 10px rgba(0,0,0,.9),inset -4px -4px 10px rgba(70,72,84,.35);transform:scale(.98)}

/* ============================================================
   PAGE D'ACCUEIL (body.home) — animation encre plein écran
   ============================================================ */
.home{--light:#E4E6ED;--dark:#0a0a0a;height:1220vh;background:var(--light)}
html{overflow-x:hidden}
.home{overflow-x:hidden}
.home #stage{position:fixed;inset:0;width:100vw;height:100vh;overflow:hidden}
.home #ink-canvas{position:absolute;inset:0;width:100%;height:100%}
.home nav{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:flex-start;gap:52px;padding:0 48px;height:64px}
.home .nav-logo{font-weight:900;font-size:16px;letter-spacing:.15em;cursor:pointer;transition:color .5s}
.home .nav-links{display:flex;gap:36px;font-weight:800;font-size:11px;letter-spacing:.2em}
.home .nav-links a{position:relative;text-decoration:none;color:inherit;opacity:.5;cursor:pointer;transition:opacity .2s,color .5s}
.home .nav-links a::after{content:"";position:absolute;left:0;bottom:-7px;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.home .nav-links a:hover{opacity:1}
.home .nav-links a:hover::after{transform:scaleX(1)}
.home .nav-light{color:var(--dark)}
.home .nav-dark{color:var(--light)}
.home .sec-content{position:absolute;z-index:10;display:flex;flex-direction:column;gap:32px;opacity:0;pointer-events:none;transition:opacity .5s}
.home .sec-content.visible{opacity:1;pointer-events:auto}
.home #sec-hero{top:50%;left:50%;transform:translate(-50%,-50%);align-items:center;text-align:center}
.home #sec-design{bottom:12%;left:7%;align-items:flex-start}
.home #sec-web{bottom:12%;right:7%;align-items:flex-end;text-align:right}
.home #sec-vfx{bottom:12%;left:7%;align-items:flex-start}
.home .sec-label{font-weight:300;font-size:11px;letter-spacing:.35em;opacity:.4;margin-bottom:-16px}
.home .sec-title{font-weight:900;letter-spacing:.06em;line-height:1;white-space:nowrap}
.home .title-xl{font-size:clamp(34px,9vw,110px)}
.home .title-lg{font-size:clamp(26px,7vw,88px)}
.home .neo-btn{padding:17px 44px;background:var(--grad);color:var(--dark);box-shadow:7px 7px 14px #c0c3cd,-7px -7px 14px #ffffff;transition:box-shadow .45s cubic-bezier(.4,0,.2,1),color .45s cubic-bezier(.4,0,.2,1),transform .15s}
.home .neo-btn::before{content:"";position:absolute;inset:0;border-radius:50px;background:linear-gradient(160deg,#232327 0%,#121215 45%,#050506 100%);box-shadow:inset 1px 1px 1px rgba(255,255,255,.09),inset -1px -1px 2px rgba(0,0,0,.8);opacity:0;transition:opacity .45s cubic-bezier(.4,0,.2,1),box-shadow .45s cubic-bezier(.4,0,.2,1);pointer-events:none}
.home .neo-btn span{position:relative;z-index:1;transition:letter-spacing .45s cubic-bezier(.4,0,.2,1)}
.home .neo-btn:hover span{letter-spacing:.3em}
.home .on-dark .neo-btn{color:var(--light);box-shadow:6px 6px 16px rgba(0,0,0,.95),-6px -6px 16px rgba(52,54,63,.5),12px 12px 32px rgba(0,0,0,.6),-12px -12px 32px rgba(52,54,63,.22)}
.home .on-dark .neo-btn::before{opacity:1}
.home .on-light .neo-btn:hover{box-shadow:inset 5px 5px 10px #c0c3cd,inset -5px -5px 10px #ffffff;transform:scale(.98)}
.home .on-dark .neo-btn:hover{box-shadow:3px 3px 8px rgba(0,0,0,.7),-3px -3px 8px rgba(52,54,63,.3);transform:scale(.98)}
.home .on-dark .neo-btn:hover::before{box-shadow:inset 4px 4px 10px rgba(0,0,0,.95),inset -4px -4px 10px rgba(70,72,84,.35)}
.home .sec-picto{transition:filter .45s cubic-bezier(.4,0,.2,1)}
@keyframes riseFade{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.home .sec-content .sec-picto,.home .sec-content .neo-btn{opacity:0}
.home .sec-content.visible .sec-picto{animation:riseFade .55s cubic-bezier(.22,1,.36,1) .12s both}
.home .sec-content.visible .neo-btn{animation:riseFade .55s cubic-bezier(.22,1,.36,1) .28s both}
.home .ch{white-space:pre;display:inline-block}
.home .sec-title .ch{opacity:0;translate:0 .35em;filter:blur(5px);transition:opacity .55s cubic-bezier(.22,1,.36,1),translate .55s cubic-bezier(.22,1,.36,1),filter .55s cubic-bezier(.22,1,.36,1),color .22s ease,text-shadow .22s ease;transition-delay:calc(var(--i)*35ms),calc(var(--i)*35ms),calc(var(--i)*35ms),0s,0s}
.home .sec-content.visible .sec-title .ch{opacity:1;translate:0 0;filter:blur(0)}
.home .sec-label .ch{opacity:0;transition:opacity .45s ease,color .22s ease;transition-delay:calc(var(--i)*18ms + 150ms),0s}
.home .sec-content.visible .sec-label .ch{opacity:1}
@keyframes inkPop{0%{transform:scale(1)}40%{transform:translateY(-.06em) scale(1.08) rotate(-2deg)}100%{transform:scale(1)}}
.home .ch.ink-pop{animation:inkPop .45s cubic-bezier(.34,1.56,.64,1)}
.home .ch-light{color:#e8eaf1;text-shadow:1px 1px 2px rgba(168,172,186,.85),-1px -1px 2px rgba(255,255,255,.95),4px 4px 8px rgba(168,172,186,.6),-4px -4px 8px rgba(255,255,255,.85),9px 9px 20px rgba(168,172,186,.4),-9px -9px 20px rgba(255,255,255,.65),18px 18px 40px rgba(150,155,172,.25)}
.home .ch-dark{color:#101013;text-shadow:1px 1px 2px rgba(0,0,0,.95),-1px -1px 2px rgba(64,66,74,.8),4px 4px 8px rgba(0,0,0,.8),-4px -4px 8px rgba(60,62,70,.5),9px 9px 20px rgba(0,0,0,.7),-9px -9px 20px rgba(58,60,68,.3),18px 18px 40px rgba(0,0,0,.5)}
.home .sec-label .ch-light{color:var(--dark);text-shadow:none}
.home .sec-label .ch-dark{color:var(--light);text-shadow:none}
.home .on-light .sec-picto{filter:invert(0) brightness(1) drop-shadow(4px 4px 8px #bcbfca) drop-shadow(-4px -4px 8px #ffffff)}
.home .on-dark .sec-picto{filter:invert(1) brightness(.55) drop-shadow(4px 4px 8px #000000) drop-shadow(-4px -4px 8px #26262b)}
.home #scroll-hint{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:800;font-size:11px;letter-spacing:.3em;opacity:0;transition:opacity .5s,color .6s cubic-bezier(.4,0,.2,1);animation:bounceY 2s ease-in-out infinite}
.home #scroll-hint.visible{opacity:.8}
.home .hint-orb{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);box-shadow:6px 6px 12px #c0c3cd,-6px -6px 12px #ffffff;transition:background .6s,box-shadow .6s}
.home #scroll-hint.hint-dark .hint-orb{background:linear-gradient(145deg,#18181b,#080809);box-shadow:6px 6px 12px #010102,-6px -6px 12px #222226}
@keyframes bounceY{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* ── Responsive ── */
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .wrap{padding:0 22px}
  .site-header{padding:0 22px;gap:22px}
  .header-cta{display:none}
  section{padding:60px 0}
  .hero{padding:64px 0 16px}
  .form-row{grid-template-columns:1fr}
  .home nav{padding:0 22px;gap:24px}
}
@media(max-width:620px){
  #kk-cookie .kk-cookie-card{padding:22px}
  #kk-cookie .kk-cookie-actions{width:100%}
  #kk-cookie .kk-btn{flex:1}
}