/* =====================================================================
   JD SOLUTIONS — Design System 2026
   Brand: rouge #D60A2D · encre #1B1B22 · diagonales & hexagones (cf. PDF)
   ===================================================================== */
:root{
  /* Couleur de marque = mauve/framboise du logo JDDEV (#FA225B) */
  --jd-red:#FA225B; --jd-red-deep:#C50E45; --jd-red-soft:rgba(250,34,91,.08);
  --jd-ink:#15151B; --jd-ink-2:#23232C; --jd-ink-3:#33333E;
  --jd-paper:#FFFFFF; --jd-mist:#F5F6F8; --jd-mist-2:#EEF0F3;
  --jd-line:#E4E7EC; --jd-muted:#5B6068; --jd-muted-2:#878d97;
  --grad-red:linear-gradient(120deg,#FF4D7E,#FA225B 55%,#C50E45);
  --grad-dark:linear-gradient(135deg,#23232C,#15151B);
  --shadow:0 24px 60px -24px rgba(21,21,27,.40);
  --shadow-sm:0 12px 30px -16px rgba(21,21,27,.28);
  --shadow-red:0 18px 40px -16px rgba(250,34,91,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:16px; --r-lg:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--jd-ink);background:var(--jd-paper);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:'Montserrat',sans-serif;line-height:1.07;margin:0;letter-spacing:-.015em}
p{margin:0}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.wrap{width:min(1200px,92vw);margin-inline:auto}
.relative{position:relative}

/* Hexagone & eyebrow (rappel PDF) */
.hex{width:14px;height:16px;flex:0 0 auto;background:var(--jd-red);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.eyebrow{font-family:'Montserrat';font-weight:700;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--jd-red);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--jd-red)}
.eyebrow.light{color:#FF6E96}.eyebrow.light::before{background:#FF6E96}
.red{color:var(--jd-red)} .thin{font-weight:500}

/* Buttons */
.btn{font-family:'Montserrat';font-weight:700;font-size:.95rem;border:none;cursor:pointer;border-radius:12px;
  padding:.85rem 1.5rem;display:inline-flex;align-items:center;gap:.55rem;line-height:1;position:relative;
  transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s}
.btn svg{width:18px;height:18px}
.btn-red{background:var(--grad-red);color:#fff;box-shadow:var(--shadow-red);background-size:160% 160%}
.btn-red:hover{transform:translateY(-3px);background-position:100% 0}
.btn-dark{background:var(--jd-ink);color:#fff}
.btn-dark:hover{transform:translateY(-3px);background:var(--jd-ink-2)}
.btn-ghost{background:transparent;color:var(--jd-ink);border:1.6px solid var(--jd-line)}
.btn-ghost:hover{border-color:var(--jd-ink);transform:translateY(-3px)}
.btn-light{background:#fff;color:var(--jd-ink);box-shadow:var(--shadow-sm)}
.btn-light:hover{transform:translateY(-3px)}

/* =================== HEADER =================== */
.topbar{background:var(--jd-ink);color:#cfd2d8;font-size:.82rem}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0;flex-wrap:wrap}
.topbar a{color:#e7e9ed;transition:color .2s}.topbar a:hover{color:#fff}
.topbar .tb-left{display:flex;gap:1.4rem;flex-wrap:wrap}
.topbar .tb-left span{display:inline-flex;align-items:center;gap:.45rem}
.topbar svg{width:14px;height:14px;stroke:var(--jd-red);fill:none;stroke-width:2}
.topbar .tb-social{display:flex;gap:.7rem}

.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--jd-line);transition:box-shadow .3s}
.hdr.scrolled{box-shadow:0 10px 30px -18px rgba(21,21,27,.3)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.logo{display:flex;align-items:center;gap:.6rem;font-family:'Montserrat';font-weight:900;font-size:1.2rem;
  letter-spacing:.02em;color:var(--jd-ink)}
.logo .bar{width:6px;height:28px;background:var(--jd-red);border-radius:2px}
.logo span{font-weight:700}
.nav{display:flex;align-items:center;gap:.3rem}
.nav .item{position:relative}
.nav .item>a{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:.93rem;color:var(--jd-ink-2);
  padding:.6rem .85rem;border-radius:9px;transition:color .2s,background .2s}
.nav .item>a:hover{color:var(--jd-red);background:var(--jd-red-soft)}
.nav .item>a .caret{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .25s}
.nav .item:hover>a .caret{transform:rotate(180deg)}
.nav .drop{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:#fff;border:1px solid var(--jd-line);
  border-radius:14px;box-shadow:var(--shadow);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s,transform .22s,visibility .22s;z-index:5}
.nav .item:hover .drop{opacity:1;visibility:visible;transform:none}
.nav .drop a{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:9px;font-size:.9rem;
  font-weight:600;color:var(--jd-ink-2);transition:background .2s,color .2s}
.nav .drop a:hover{background:var(--jd-mist);color:var(--jd-red)}
.nav .drop a .hex{width:10px;height:12px}
.hdr-cta{display:flex;align-items:center;gap:.6rem}
.hdr-cta .btn{padding:.62rem 1.15rem;font-size:.9rem}
.burger{display:none;background:none;border:none;cursor:pointer;padding:.4rem}
.burger svg{width:28px;height:28px;stroke:var(--jd-ink);fill:none;stroke-width:2;stroke-linecap:round}

/* mobile nav */
.mobile-nav{position:fixed;inset:0;z-index:80;background:var(--jd-ink);transform:translateX(100%);
  transition:transform .4s var(--ease);visibility:hidden;padding:5.5rem 8vw 3rem;overflow-y:auto}
.mobile-nav.open{transform:none;visibility:visible}
.mobile-nav a{display:block;color:#fff;font-family:'Montserrat';font-weight:700;font-size:1.25rem;
  padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-nav .sub a{font-size:1rem;font-weight:600;color:#c9ccd3;padding:.55rem 0 .55rem 1.2rem;border:none}
.mobile-nav .btn{margin-top:1.6rem;width:100%;justify-content:center;padding:1rem}
.mobile-close{position:absolute;top:1.5rem;right:8vw;background:none;border:none;cursor:pointer}
.mobile-close svg{width:32px;height:32px;stroke:#fff;stroke-width:2;stroke-linecap:round}

/* announce */
.announce{background:var(--grad-red);color:#fff;font-size:.85rem;background-size:200% 200%;animation:slideGrad 8s linear infinite}
@keyframes slideGrad{0%{background-position:0 0}100%{background-position:200% 0}}
.announce-in{display:flex;align-items:center;justify-content:center;gap:.7rem;padding:.6rem 1rem;text-align:center;flex-wrap:wrap}
.announce a{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* =================== HERO =================== */
.hero{position:relative;overflow:hidden;background:var(--jd-mist);isolation:isolate}
.hero::after{content:"";position:absolute;inset:0 -8% 0 46%;background:var(--grad-dark);
  clip-path:polygon(16% 0,100% 0,100% 100%,0 100%);z-index:-1}
.hero::before{content:"";position:absolute;top:-20%;right:-5%;width:50%;height:140%;z-index:-1;opacity:.5;
  background:radial-gradient(closest-side,rgba(250,34,91,.5),transparent);filter:blur(10px);
  animation:floaty 9s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}
.hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:3rem;align-items:center;padding:clamp(2.8rem,6vw,5.2rem) 0}
.hero-copy{max-width:640px}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.3rem);font-weight:900;margin:1.1rem 0 0}
.hero h1 .thin{font-weight:500;display:block}
.hero-sub{margin-top:1.3rem;font-size:1.1rem;color:var(--jd-muted);max-width:34rem}
.hero-cta{display:flex;gap:.8rem;margin-top:1.8rem;flex-wrap:wrap}
.hero-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.7rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--jd-line);
  border-radius:999px;padding:.45rem .9rem;font-size:.82rem;font-weight:600;color:var(--jd-ink-2);box-shadow:var(--shadow-sm)}
.chip .hex{width:11px;height:13px}
/* hero visuel droit */
.hero-card{position:relative;z-index:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:2rem;color:#fff;backdrop-filter:blur(6px);box-shadow:var(--shadow)}
.hero-card h3{font-size:1.3rem;font-weight:800;margin-bottom:.3rem}
.hero-card .lead{color:#c9ccd3;font-size:.95rem}
.badge-float{position:absolute;background:#fff;color:var(--jd-ink);border-radius:14px;padding:.7rem 1rem;
  box-shadow:var(--shadow);font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:.5rem;z-index:2}
.badge-float .hex{width:13px;height:15px}
.badge-1{top:-18px;left:-18px;animation:floaty 6s ease-in-out infinite}
.badge-2{bottom:-16px;right:-12px;animation:floaty 7s ease-in-out infinite .6s}

/* =================== STATS =================== */
.stats{background:var(--jd-ink);color:#fff}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:2.4rem 0}
.stat{text-align:center;padding:.4rem 1rem;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:16%;height:68%;width:1px;background:rgba(255,255,255,.14)}
.stat .num{font-family:'Montserrat';font-weight:900;font-size:clamp(2rem,4vw,2.9rem);line-height:1}
.stat .num .u{color:var(--jd-red)}
.stat .lab{font-size:.84rem;color:#b9bcc4;margin-top:.5rem}

/* =================== SECTIONS =================== */
section.block{padding:clamp(3.6rem,7vw,6rem) 0}
.sec-head{max-width:48rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:900;margin-top:1rem}
.sec-head p{color:var(--jd-muted);margin-top:1rem;font-size:1.06rem}

/* services grid */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.8rem}
.svc{background:#fff;border:1px solid var(--jd-line);border-radius:var(--r-lg);padding:2rem 1.9rem;position:relative;
  overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.svc::before{content:"";position:absolute;inset:0;background:var(--grad-dark);opacity:0;transition:opacity .3s;z-index:0}
.svc>*{position:relative;z-index:1}
.svc:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.svc:hover::before{opacity:1}
.svc:hover h3,.svc:hover p,.svc:hover .svc-link{color:#fff}
.svc .ico{width:58px;height:58px;border-radius:15px;background:var(--grad-red);display:grid;place-items:center;
  box-shadow:var(--shadow-red);transition:transform .3s}
.svc:hover .ico{transform:rotate(-8deg) scale(1.06)}
.svc .ico svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8}
.svc h3{font-size:1.3rem;font-weight:800;margin-top:1.2rem;transition:color .3s}
.svc p{color:var(--jd-muted);margin-top:.55rem;font-size:.95rem;transition:color .3s}
.svc .svc-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;font-family:'Montserrat';
  font-weight:700;font-size:.88rem;color:var(--jd-red);transition:color .3s,gap .2s}
.svc:hover .svc-link{color:#FF6E96}.svc .svc-link:hover{gap:.7rem}
.svc .svc-link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}

/* duo why */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:2.6rem}
.duo h3{font-size:1.4rem;font-weight:800;margin-bottom:1rem}
.duo p{color:var(--jd-muted);margin-bottom:1rem}
.ticklist{list-style:none;padding:0;margin:.4rem 0 0;display:grid;gap:.75rem}
.ticklist li{display:flex;gap:.7rem;align-items:flex-start;color:var(--jd-ink-2);font-size:.98rem}
.ticklist li .hex{margin-top:.28rem}

/* philosophy (valeurs PDF) */
.philo{background:var(--jd-ink);color:#fff;position:relative;overflow:hidden}
.philo::before{content:"";position:absolute;top:-25%;right:-8%;width:48%;height:150%;opacity:.16;
  background:var(--grad-red);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
.philo .sec-head h2{color:#fff}.philo .sec-head p{color:#b9bcc4}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2.8rem;position:relative;z-index:1}
.value{border-top:2px solid rgba(255,255,255,.14);padding-top:1.3rem;transition:border-color .3s}
.value:hover{border-color:var(--jd-red)}
.value .vhead{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.value h3{font-size:1.15rem;font-weight:800}
.value p{color:#aeb2bb;font-size:.92rem}

/* CTA + contact */
.contact{background:var(--jd-mist)}
.contact-box{display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:#fff;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow)}
.contact-left{background:var(--grad-dark);color:#fff;padding:clamp(2.2rem,4vw,3.4rem);position:relative;overflow:hidden}
.contact-left::after{content:"";position:absolute;right:-30%;top:0;bottom:0;width:75%;background:var(--grad-red);
  clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);opacity:.9}
.contact-left .inner{position:relative;z-index:1;max-width:25rem}
.contact-left h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:900;color:#fff}
.contact-left p{color:#d4d6db;margin-top:1rem}
.contact-info{margin-top:1.8rem;display:grid;gap:1rem}
.contact-info a{display:flex;align-items:center;gap:.7rem;color:#fff;font-weight:600;transition:color .2s}
.contact-info a:hover{color:#ffd2da}
.contact-info .ic{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex:0 0 auto}
.contact-info svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
.contact-right{padding:clamp(2rem,4vw,3rem)}
.contact-right h3{font-size:1.4rem;font-weight:800}
.contact-right .lead{color:var(--jd-muted);margin-top:.4rem;font-size:.95rem}

/* form */
.field{margin-top:1rem}
.field-row{margin-top:1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.field-row .field{margin-top:0}
.field label{font-size:.8rem;font-weight:600;color:var(--jd-ink-2);display:block;margin-bottom:.4rem}
.inp{width:100%;border:1.6px solid var(--jd-line);border-radius:12px;outline:none;padding:.85rem 1rem;
  font-size:1rem;font-family:inherit;background:#fff;transition:border-color .2s,box-shadow .2s}
.inp:focus{border-color:var(--jd-red);box-shadow:0 0 0 4px rgba(250,34,91,.12)}
textarea.inp{resize:vertical;min-height:90px}
.select-wrap{position:relative}
.select-wrap select{width:100%;border:1.6px solid var(--jd-line);border-radius:12px;background:#fff;
  padding:.85rem 2.4rem .85rem 1rem;font-size:1rem;font-family:inherit;color:var(--jd-ink);appearance:none;
  -webkit-appearance:none;cursor:pointer;outline:none;transition:border-color .2s,box-shadow .2s}
.select-wrap select:focus{border-color:var(--jd-red);box-shadow:0 0 0 4px rgba(250,34,91,.12)}
.select-wrap select.ph{color:var(--jd-muted)}
.select-wrap::after{content:"";position:absolute;right:1.05rem;top:50%;width:8px;height:8px;
  border-right:2px solid var(--jd-muted);border-bottom:2px solid var(--jd-muted);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.input-phone{display:flex;align-items:stretch;border:1.6px solid var(--jd-line);border-radius:12px;position:relative;background:#fff;
  transition:border-color .2s,box-shadow .2s}
.input-phone:focus-within{border-color:var(--jd-red);box-shadow:0 0 0 4px rgba(250,34,91,.12)}
.input-phone .flag{display:flex;align-items:center;gap:.4rem;padding:0 .7rem 0 .85rem;background:var(--jd-mist);
  font-weight:600;color:var(--jd-ink-2);font-size:.95rem;border:none;border-right:1px solid var(--jd-line);cursor:pointer;
  font-family:inherit;border-radius:11px 0 0 11px;white-space:nowrap}
.input-phone .flag:hover{background:var(--jd-mist-2)}
.input-phone .flag .fflag{font-size:1.15rem;line-height:1}
.input-phone .flag .chev{width:12px;height:12px;stroke:var(--jd-muted);fill:none;stroke-width:2.4;transition:transform .2s}
.input-phone .flag[aria-expanded="true"] .chev{transform:rotate(180deg)}
.input-phone input{flex:1;min-width:0;border:none;outline:none;padding:.85rem 1rem;font-size:1rem;font-family:inherit;background:transparent;border-radius:0 11px 11px 0}
.cc-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:min(330px,86vw);background:#fff;border:1px solid var(--jd-line);
  border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:none;opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s}
.cc-pop.open{display:block;opacity:1;transform:none}
.cc-search-wrap{padding:.6rem;border-bottom:1px solid var(--jd-line)}
.cc-search{width:100%;border:1.4px solid var(--jd-line);border-radius:9px;outline:none;padding:.55rem .7rem;font-size:.92rem;font-family:inherit;background:var(--jd-mist)}
.cc-search:focus{border-color:var(--jd-red);background:#fff}
.cc-list{list-style:none;margin:0;padding:.35rem;max-height:240px;overflow-y:auto}
.cc-list li{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:8px;cursor:pointer;font-size:.92rem;color:var(--jd-ink-2)}
.cc-list li:hover{background:var(--jd-mist)}
.cc-list li .em{font-size:1.15rem;flex:0 0 auto}.cc-list li .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-list li .dc{color:var(--jd-muted);font-weight:600;font-size:.85rem}
.cc-empty{padding:1rem;text-align:center;color:var(--jd-muted);font-size:.88rem}
.cap-field{margin-top:.85rem}
.cap-field .cap-lbl{font-size:.72rem;font-weight:500;color:var(--jd-muted);display:block;margin-bottom:.3rem}
.captcha{display:inline-flex;align-items:center;gap:.45rem}
.captcha .q{display:inline-flex;align-items:center;gap:.35rem;background:var(--jd-mist);border:1px solid var(--jd-line);
  border-radius:8px;padding:.32rem .55rem;font-family:'Montserrat';font-weight:700;font-size:.86rem;color:var(--jd-ink-2);white-space:nowrap;user-select:none}
.captcha .q .reload{width:20px;height:20px;border-radius:5px;border:none;cursor:pointer;background:transparent;display:grid;place-items:center;color:var(--jd-muted);transition:color .2s,transform .3s var(--ease);padding:0}
.captcha .q .reload:hover{color:var(--jd-red)}.captcha .q .reload:active{transform:rotate(-180deg)}
.captcha .q .reload svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}
.captcha .ans{width:62px;border:1px solid var(--jd-line);border-radius:8px;outline:none;padding:.4rem .5rem;font-size:.9rem;font-family:inherit;background:#fff;text-align:center;transition:border-color .2s,box-shadow .2s}
.captcha .ans:focus{border-color:var(--jd-red);box-shadow:0 0 0 3px rgba(250,34,91,.1)}
.captcha .ans.invalid,.inp.invalid,.input-phone.invalid,.select-wrap select.invalid{border-color:var(--jd-red)}
.err{color:var(--jd-red);font-size:.8rem;font-weight:600;margin-top:.4rem;display:none}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-btn{width:100%;justify-content:center;margin-top:1.2rem;padding:.95rem;font-size:1rem}
.consent{font-size:.74rem;color:var(--jd-muted);margin-top:.8rem;line-height:1.5}
.consent a{color:var(--jd-red);font-weight:600}
.success-msg{display:none;text-align:center;padding:1rem .5rem}
.success-msg.show{display:block}
.success-msg .tick{width:60px;height:60px;border-radius:50%;background:var(--jd-red-soft);display:grid;place-items:center;margin:0 auto 1rem}
.success-msg .tick svg{width:30px;height:30px;stroke:var(--jd-red);fill:none;stroke-width:2.2}

/* =================== FOOTER =================== */
.ftr{background:#101015;color:#9a9ea7;padding:3.5rem 0 2rem}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.4rem;border-bottom:1px solid rgba(255,255,255,.08)}
.ftr .logo{color:#fff;margin-bottom:1rem}
.ftr-col h4{color:#fff;font-size:.95rem;font-weight:800;margin-bottom:1rem;letter-spacing:.02em}
.ftr-col a{display:block;font-size:.9rem;padding:.3rem 0;transition:color .2s}
.ftr-col a:hover{color:#fff}
.ftr-about{font-size:.9rem;max-width:22rem}
.ftr-contact{display:grid;gap:.6rem;margin-top:1rem;font-size:.9rem}
.ftr-contact a{display:flex;align-items:center;gap:.6rem}
.ftr-contact svg{width:16px;height:16px;stroke:var(--jd-red);fill:none;stroke-width:2}
.ftr-social{display:flex;gap:.7rem;margin-top:1.2rem}
.ftr-social a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;transition:background .2s,transform .2s}
.ftr-social a:hover{background:var(--jd-red);transform:translateY(-3px)}
.ftr-social svg{width:18px;height:18px;fill:#fff}
.ftr-bot{padding-top:1.6rem;font-size:.82rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem}

/* =================== PAGE INTÉRIEURE =================== */
.page-hero{position:relative;overflow:hidden;background:var(--grad-dark);color:#fff;isolation:isolate}
.page-hero::before{content:"";position:absolute;top:-30%;right:-6%;width:48%;height:160%;z-index:-1;opacity:.18;
  background:var(--grad-red);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
.page-hero::after{content:"";position:absolute;left:-10%;bottom:-60%;width:40%;height:120%;z-index:-1;opacity:.5;
  background:radial-gradient(closest-side,rgba(250,34,91,.35),transparent);filter:blur(8px)}
.page-hero-in{padding:clamp(2.6rem,6vw,4.6rem) 0;max-width:54rem}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:900;margin-top:1rem}
.page-hero p{color:#c9ccd3;margin-top:1rem;font-size:1.08rem;max-width:40rem}
.page-hero .hero-cta{margin-top:1.7rem}
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.82rem;color:#aeb2bb;flex-wrap:wrap}
.crumbs a{color:#aeb2bb;transition:color .2s}.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.5}
.crumbs .cur{color:#fff;font-weight:600}

/* bande CTA */
.cta-band{background:var(--grad-red);color:#fff;background-size:200% 200%;animation:slideGrad 10s linear infinite}
.cta-band-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:2.4rem 0;flex-wrap:wrap}
.cta-band h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;color:#fff;max-width:40rem}
.cta-band .btn-light{flex:0 0 auto}

/* liste de features (fiches services / modules) */
.feat-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2.6rem}
.fcard{background:#fff;border:1px solid var(--jd-line);border-radius:var(--r);padding:1.8rem;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.fcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.fcard .fico{width:48px;height:48px;border-radius:12px;background:var(--jd-red-soft);display:grid;place-items:center;margin-bottom:1rem}
.fcard .fico svg{width:24px;height:24px;stroke:var(--jd-red);fill:none;stroke-width:1.9}
.fcard h3{font-size:1.15rem;font-weight:800}
.fcard p{color:var(--jd-muted);margin-top:.5rem;font-size:.94rem}
.checklist{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.7rem}
.checklist li{display:flex;gap:.65rem;align-items:flex-start;color:var(--jd-ink-2);font-size:.97rem}
.checklist li svg{width:18px;height:18px;stroke:var(--jd-red);fill:none;stroke-width:2.4;flex:0 0 auto;margin-top:.18rem}

/* lecteur vidéo de démo (fiches modules) */
.video-wrap{max-width:940px;margin:2.6rem auto 0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);background:#000;border:1px solid var(--jd-line)}
.video-wrap video{width:100%;height:auto;display:block}
/* vidéo intégrée dans le hero (page module) */
.page-hero-in.hero-with-media{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2rem,4vw,3rem);
  align-items:center;max-width:none}
.hero-with-media .ph-copy{max-width:600px}
.hero-with-media .ph-media{position:relative;z-index:1}
.hero-with-media .ph-video{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  background:#000;border:1px solid rgba(255,255,255,.14)}
.hero-with-media .ph-video video{width:100%;height:auto;display:block}
@media (max-width:900px){.page-hero-in.hero-with-media{grid-template-columns:1fr}.hero-with-media .ph-copy{max-width:none}}

/* galerie vidéos + lightbox */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.6rem}
.vcard{background:#fff;border:1px solid var(--jd-line);border-radius:var(--r);overflow:hidden;display:flex;
  flex-direction:column;color:inherit;text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.vcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--jd-red)}
.vthumb-link{position:relative;display:block;background:#000;overflow:hidden}
.vthumb-link .vthumb{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;opacity:.95;transition:opacity .25s,transform .4s var(--ease)}
.vcard:hover .vthumb{opacity:1;transform:scale(1.05)}
.vthumb-link .vplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .25s}
.vcard:hover .vplay{transform:translate(-50%,-50%) scale(1.1)}
.vthumb-link .vplay svg{width:22px;height:22px;fill:var(--jd-red);margin-left:3px}
.vc-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.vc-name{font-size:1.05rem;font-weight:800;line-height:1.25;color:var(--jd-ink)}
.vc-link{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;font-family:'Montserrat';font-weight:700;
  font-size:.85rem;color:var(--jd-red);transition:gap .2s}
.vcard:hover .vc-link{gap:.75rem}
.vc-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
.vlb{position:fixed;inset:0;z-index:100;background:rgba(10,10,14,.93);display:none;place-items:center;padding:4vw}
.vlb.open{display:grid}
.vlb video{width:min(1000px,94vw);max-height:86vh;border-radius:14px;background:#000;box-shadow:var(--shadow)}
.vlb-close{position:absolute;top:1.3rem;right:1.6rem;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.14);display:grid;place-items:center;transition:background .2s}
.vlb-close:hover{background:var(--jd-red)}
.vlb-close svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
@media(max-width:900px){.vgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vgrid{grid-template-columns:1fr}}

/* nuage de liens modules (maillage interne) */
.mod-links{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.4rem}
.mod-links a{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--jd-line);
  border-radius:999px;padding:.6rem 1.1rem;font-size:.92rem;font-weight:600;color:var(--jd-ink-2);
  transition:transform .2s var(--ease),box-shadow .2s,border-color .2s,color .2s}
.mod-links a:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--jd-red);color:var(--jd-red)}
.mod-links a .hex{width:11px;height:13px}

/* prose (articles / contenu riche) */
.prose{max-width:50rem;font-size:1.05rem;color:var(--jd-ink-2)}
.prose>*+*{margin-top:1.1rem}
.prose h2{font-size:1.6rem;font-weight:800;margin-top:2.2rem;color:var(--jd-ink)}
.prose h3{font-size:1.25rem;font-weight:800;margin-top:1.8rem;color:var(--jd-ink)}
.prose p{color:var(--jd-muted)}
.prose ul,.prose ol{padding-left:1.2rem;color:var(--jd-muted)}
.prose li{margin-top:.4rem}
.prose a{color:var(--jd-red);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose img{border-radius:var(--r);margin:1.6rem 0}
.prose blockquote{border-left:4px solid var(--jd-red);padding:.4rem 0 .4rem 1.2rem;color:var(--jd-ink-2);font-style:italic}

/* grille d'articles / réalisations */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.6rem}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--jd-line);border-radius:var(--r);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s;position:relative;cursor:pointer}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--jd-red)}
/* toute la carte cliquable (lien étendu) */
.post-card .pc-link::after{content:"";position:absolute;inset:0;z-index:1}
.post-card:hover .pc-link{gap:.7rem}
.post-card .thumb img{transition:transform .4s var(--ease)}
.post-card:hover .thumb img{transform:scale(1.05)}
.post-card .thumb{aspect-ratio:16/10;background:var(--grad-dark);position:relative;overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .thumb .tag{position:absolute;top:.8rem;left:.8rem;background:var(--jd-red);color:#fff;font-size:.72rem;font-weight:700;padding:.3rem .6rem;border-radius:6px;font-family:'Montserrat'}
.post-card .pc-body{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:1.1rem;font-weight:800;line-height:1.25}
.post-card p{color:var(--jd-muted);font-size:.9rem;margin-top:.5rem;flex:1}
.post-card .pc-link{margin-top:1rem;font-family:'Montserrat';font-weight:700;font-size:.85rem;color:var(--jd-red);display:inline-flex;align-items:center;gap:.4rem}
.post-card .pc-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
@media (max-width:1000px){.feat-grid2{grid-template-columns:1fr}.post-grid{grid-template-columns:1fr 1fr}.cta-band-in{flex-direction:column;text-align:center}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}

/* =================== ANIMATIONS =================== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}

/* =================== RESPONSIVE =================== */
@media (max-width:1000px){
  .nav,.hdr-cta .btn-ghost{display:none}
  .burger{display:inline-flex}
  .hero::after{inset:auto 0 0 0;top:56%;clip-path:polygon(0 20%,100% 0,100% 100%,0 100%)}
  .hero-in{grid-template-columns:1fr;gap:2.4rem}
  .svc-grid{grid-template-columns:1fr 1fr}
  .duo{grid-template-columns:1fr;gap:2.4rem}
  .values{grid-template-columns:1fr 1fr}
  .contact-box{grid-template-columns:1fr}
  .contact-left::after{clip-path:polygon(0 58%,100% 42%,100% 100%,0 100%);right:-40%;width:90%}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .svc-grid{grid-template-columns:1fr}
  .stats-in{grid-template-columns:1fr 1fr;gap:1.6rem 1rem}
  .stat+.stat::before{display:none}
  .values{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .topbar .tb-left{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}