/* ============================================================
   Insight Digital Factory — insightdf.com
   Thème « violet nacré » — palette charte graphique V2 2024
   ============================================================ */

@font-face{font-family:'Publico';src:url(/assets/fonts/Publico-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Publico Text';src:url(/assets/fonts/PublicoText-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Manrope';src:url(/assets/fonts/Manrope.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --bg:#F8F5F9;
  --ligne:#EAE0EC;
  --txt:#231326;
  --txt2:#5E4B61;
  --muted:#9A86A0;
  --orange:#EC661A;
  --rouge:#E52421;
  --violet:#501D50;
  --grad:linear-gradient(92deg,#EC661A 0%,#E52421 45%,#501D50 100%);
  --maxw:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--txt);line-height:1.7;font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#D9C9DC;border-radius:8px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--orange)}
h2{font-weight:800;font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.02em;line-height:1.12;margin:14px 0 10px}
.sub{color:var(--txt2);max-width:560px}
.gradtx{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:#fff;font-weight:700;font-size:.97rem;padding:15px 30px;border-radius:999px;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{background:#d95a12;transform:translateY(-2px);box-shadow:0 14px 36px rgba(236,102,26,.32)}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translate(3px,-3px)}
.btn.ghost{background:#fff;border:1px solid var(--ligne);color:var(--violet)}
.btn.ghost:hover{background:#fff;border-color:var(--violet);box-shadow:0 10px 28px rgba(80,29,80,.14)}

/* ---------- Nav pill ---------- */
.nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:30px;background:rgba(255,255,255,.88);border:1px solid var(--ligne);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:999px;padding:9px 12px 9px 18px;box-shadow:0 12px 34px rgba(80,29,80,.12)}
.nav img{height:34px;width:auto}
.nav ul{display:flex;gap:26px;list-style:none;font-size:.9rem;font-weight:600}
.nav ul a{color:var(--txt2);transition:color .2s}
.nav ul a:hover{color:var(--txt)}
.nav .btn{padding:10px 20px;font-size:.86rem}

/* ---------- Hero nacré ---------- */
.hero{position:relative;min-height:94vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:150px 0 90px;overflow:hidden;background:
  radial-gradient(760px 560px at 16% 24%,rgba(80,29,80,.10),transparent 60%),
  radial-gradient(680px 520px at 84% 18%,rgba(236,102,26,.12),transparent 55%),
  radial-gradient(720px 560px at 62% 88%,rgba(229,36,33,.07),transparent 60%),
  linear-gradient(180deg,#FDFCFE 0%,var(--bg) 100%)}
.hero .spot{position:absolute;inset:0;background:radial-gradient(620px at var(--mx,50%) var(--my,35%),rgba(236,102,26,.09),transparent 62%);pointer-events:none}
.ring{position:absolute;width:900px;height:900px;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.42;pointer-events:none}
.hero .wrap{position:relative;z-index:2;max-width:900px}
.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--ligne);background:rgba(255,255,255,.8);border-radius:999px;padding:8px 18px;font-size:.82rem;font-weight:600;color:var(--txt2);box-shadow:0 6px 20px rgba(80,29,80,.07)}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(236,102,26,.55)}
@media (prefers-reduced-motion:no-preference){
  .badge i{animation:pulse 2.2s infinite}
  @keyframes pulse{70%{box-shadow:0 0 0 9px rgba(236,102,26,0)}100%{box-shadow:0 0 0 0 rgba(236,102,26,0)}}
  .ring .spin{animation:spin 110s linear infinite;transform-origin:450px 450px}
  @keyframes spin{to{transform:rotate(360deg)}}
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s ease}
  .reveal.in{opacity:1;transform:none}
  .mq-track{animation:mq 30s linear infinite}
  @keyframes mq{to{transform:translateX(-50%)}}
}
.hero h1{font-weight:800;font-size:clamp(2.6rem,6.4vw,4.9rem);line-height:1.06;letter-spacing:-.03em;margin:30px 0 26px}
.hero h1 .it{font-family:'Publico Text',Georgia,serif;font-style:italic;font-weight:400;font-size:1.05em;letter-spacing:0;color:var(--violet)}
.hero p.sub{margin:0 auto;font-size:1.14rem;max-width:620px}
.hero-cta{display:flex;gap:16px;justify-content:center;margin-top:42px;flex-wrap:wrap}

/* ---------- Marquee ---------- */
.mq{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);padding:20px 0;overflow:hidden;background:#fff}
.mq-track{display:flex;width:max-content}
.mq span{display:inline-flex;align-items:center;gap:34px;padding-right:34px;font-size:.86rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.mq b{color:var(--orange);font-weight:400}

/* ---------- Sections ---------- */
section{padding:110px 0;position:relative}
.sec-head{margin-bottom:54px}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.bcard{position:relative;background:#fff;border:1px solid var(--ligne);border-radius:22px;padding:36px;box-shadow:0 12px 34px rgba(80,29,80,.06);transition:transform .25s,border-color .25s,box-shadow .25s}
.bcard:hover{transform:translateY(-5px);border-color:rgba(236,102,26,.55);box-shadow:0 26px 60px rgba(80,29,80,.13)}
.bcard.s7{grid-column:span 7}
.bcard.s5{grid-column:span 5}
.bcard h3{font-size:1.42rem;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.bcard>p{color:var(--txt2);font-size:.97rem;max-width:480px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chip{font-size:.8rem;font-weight:600;color:var(--txt2);background:#F7F1F8;border:1px solid #EBDFED;border-radius:999px;padding:7px 15px;transition:color .2s,border-color .2s}
.bcard:hover .chip{color:var(--txt)}
.bcard .k{font-family:'Publico Text',serif;font-style:italic;font-size:1rem;position:absolute;top:34px;right:34px;color:var(--muted)}
.aussi{margin-top:26px;color:var(--muted);font-size:.95rem}
.aussi strong{color:var(--txt2);font-weight:700}

/* Vision — le moment violet */
.vision{text-align:center;background:var(--violet);color:#fff;overflow:hidden;position:relative}
.vision .deco{position:absolute;width:460px;height:460px;border-radius:50%;border:36px solid rgba(255,255,255,.05);top:-180px;left:-180px}
.vision .deco.b{top:auto;left:auto;bottom:-210px;right:-190px;border-color:rgba(236,102,26,.14)}
.vision .wrap{position:relative;z-index:2}
.vision .eyebrow{color:#F0A876}
.vision blockquote{font-family:'Publico Text',Georgia,serif;font-style:italic;font-size:clamp(1.45rem,3vw,2.15rem);line-height:1.45;max-width:880px;margin:26px auto 0}
.vision blockquote::before{content:'« ';color:#F0A876}
.vision blockquote::after{content:' »';color:#F0A876}

/* Confiance */
.trust{padding:76px 0;background:#fff;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.trust .eyebrow,.trust h2{text-align:center;display:block}
.trust .row{display:flex;gap:20px 58px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:34px}
.trust .name{font-weight:800;font-size:1.12rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.trust .name:hover{color:var(--txt)}
.trust .logos{display:flex;gap:28px 54px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:34px}
.trust .logos img{height:52px;width:auto;filter:grayscale(1);opacity:.65;transition:filter .25s,opacity .25s}
.trust .logos img:hover{filter:none;opacity:1}

/* À propos */
.grid-about{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:start}
.about p+p{margin-top:16px}
.about .lead{font-size:1.28rem;font-weight:500;color:var(--txt);line-height:1.55}
.about p{color:var(--txt2)}
.about p.lead{color:var(--txt)}
.facts{display:flex;flex-direction:column;gap:16px}
.fact{background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:24px 28px;display:flex;gap:22px;align-items:baseline;box-shadow:0 10px 28px rgba(80,29,80,.06)}
.fact .n{font-family:'Publico',serif;font-weight:700;font-size:1.7rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:86px}
.fact div p{font-weight:700;font-size:.98rem}
.fact div span{font-size:.86rem;color:var(--muted)}

/* Valeurs */
.grid-val{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.val{border-top:3px solid;border-image:var(--grad) 1;padding-top:22px}
.val h3{font-size:1.04rem;font-weight:800;margin-bottom:8px}
.val p{font-size:.9rem;color:var(--txt2);line-height:1.65}

/* Contact */
.contact{text-align:center;background:
  radial-gradient(640px 420px at 22% 30%,rgba(80,29,80,.08),transparent 60%),
  radial-gradient(600px 420px at 80% 70%,rgba(236,102,26,.09),transparent 55%)}
.mail{display:inline-block;font-weight:800;font-size:clamp(1.4rem,4.4vw,3.1rem);letter-spacing:-.02em;margin:30px 0 34px;word-break:break-all;position:relative}
.mail::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:3px;background:var(--grad);border-radius:2px;transform:scaleX(.35);transform-origin:left;transition:transform .3s}
.mail:hover::after{transform:scaleX(1)}
.cinfos{display:flex;gap:16px 44px;justify-content:center;flex-wrap:wrap;color:var(--txt2);font-size:.98rem}
.cinfos b{color:var(--orange);font-weight:700;margin-right:8px}

/* Pages internes (mentions légales, 404) */
.page{max-width:820px;margin:0 auto;padding:170px 28px 100px}
.page h1{font-weight:800;font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.02em;line-height:1.1;margin:12px 0 30px}
.page h2{font-size:1.25rem;margin:38px 0 8px}
.page p,.page li{color:var(--txt2);font-size:.98rem}
.page ul{padding-left:22px;margin:10px 0}
.err{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:140px 28px 80px}
.err .big{font-family:'Publico',serif;font-weight:700;font-size:clamp(5rem,16vw,10rem);line-height:1}
.err p{color:var(--txt2);margin:14px 0 32px;max-width:440px}

/* Footer sombre */
footer{background:var(--txt);color:#CBB9CD;padding:56px 0 40px;font-size:.9rem}
footer .top{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
footer img{height:36px;width:auto;opacity:.95}
footer ul{list-style:none;display:flex;gap:26px;flex-wrap:wrap}
footer ul a:hover{color:#fff}
footer .legal{margin-top:36px;padding-top:24px;border-top:1px solid #3A2A3D;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:#8F7A92}
footer .legal a{text-decoration:underline;text-underline-offset:3px}
footer .legal a:hover{color:#CBB9CD}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .bcard.s7,.bcard.s5{grid-column:span 12}
  .grid-about{grid-template-columns:1fr;gap:48px}
  .grid-val{grid-template-columns:1fr 1fr;gap:34px 26px}
  .nav ul{display:none}
  .ring{width:640px;height:640px;opacity:.3}
}
@media (max-width:640px){
  section{padding:80px 0}
  .grid-val{grid-template-columns:1fr}
  .nav{gap:14px;padding:8px 10px 8px 14px}
  .hero{padding:140px 0 70px}
}