/* =========================================================
   BIZCREATOR — COMMENT UTILISER TON AGENT PERSONNEL
   Complément à /BizCreator/landing.css
========================================================= */

:root{
  --use-bg:#05070b;
  --use-panel:rgba(12,18,27,.82);
  --use-panel-2:rgba(7,11,17,.95);
  --use-line:rgba(255,255,255,.10);
  --use-text:#f6f8fb;
  --use-muted:#9aa8ba;
  --use-cyan:#72ecff;
  --use-green:#62f3b5;
  --use-gold:#ffb82e;
  --use-gold-2:#ff8b18;
  --use-violet:#9b8cff;
}

body{
  background:var(--use-bg);
  color:var(--use-text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.use-shell{
  width:min(1220px,calc(100% - 36px));
  margin-inline:auto;
}

.use-hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(390px,.94fr);
  gap:54px;
  align-items:center;
  padding:138px 0 86px;
}

.use-eyebrow,
.use-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#b7c9de;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.use-eyebrow{
  padding:8px 11px;
  border:1px solid rgba(114,236,255,.18);
  border-radius:999px;
  background:rgba(13,22,31,.55);
}

.use-eyebrow i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--use-green);
  box-shadow:0 0 14px var(--use-green);
  animation:usePulse 1.8s ease-in-out infinite;
}

@keyframes usePulse{50%{opacity:.42;transform:scale(.72)}}

.use-hero h1{
  margin:22px 0 24px;
  max-width:820px;
  font-size:clamp(44px,5.7vw,78px);
  line-height:.98;
  letter-spacing:-.055em;
}

.use-hero h1 span,
.use-heading h2 span,
.final-use-cta h2 span{
  color:transparent;
  background:linear-gradient(100deg,#fff 0%,var(--use-gold) 48%,var(--use-cyan) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.use-hero-copy>p{
  max-width:760px;
  margin:0;
  color:#c4ccda;
  font-size:clamp(16px,1.55vw,20px);
  line-height:1.72;
}

.use-hero-copy>p strong{color:#fff}

.use-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.use-actions.center{justify-content:center}

.use-btn{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  transition:.2s ease;
}

.use-btn:hover{transform:translateY(-2px)}

.use-btn-main{
  color:#160f08;
  background:linear-gradient(135deg,var(--use-gold),var(--use-gold-2));
  box-shadow:0 15px 38px rgba(255,145,25,.18);
}

.use-btn-soft{
  color:#eef8ff;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(14,21,31,.8);
}

.quick-points{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}

.quick-points span{
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(11,17,25,.68);
  color:#aeb9ca;
  font-size:9px;
  font-weight:800;
}

.use-console{
  overflow:hidden;
  border:1px solid rgba(114,236,255,.18);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 30%,rgba(38,184,225,.08),transparent 38%),
    linear-gradient(180deg,rgba(10,18,27,.88),rgba(5,9,14,.96));
  box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 0 60px rgba(75,219,255,.03);
}

.console-head{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 17px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(5,10,16,.65);
}

.console-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--use-green);
  box-shadow:0 0 12px var(--use-green);
}

.console-head strong{
  font-size:9px;
  letter-spacing:.12em;
}

.console-head small{
  margin-left:auto;
  color:var(--use-cyan);
  font-size:7px;
  letter-spacing:.14em;
  font-weight:900;
}

.conversation-demo{
  padding:20px;
}

.demo-user,
.demo-agent{
  max-width:85%;
  padding:13px 14px;
  border-radius:15px;
  font-size:11px;
  line-height:1.6;
}

.demo-user{
  margin-left:auto;
  color:#fff;
  background:#1c2633;
  border-bottom-right-radius:5px;
}

.demo-agent{
  margin-top:14px;
  color:#daf8fd;
  background:rgba(20,65,78,.33);
  border:1px solid rgba(114,236,255,.12);
  border-bottom-left-radius:5px;
}

.demo-agent.result{
  margin-top:16px;
  color:#d9ffed;
  border-color:rgba(98,243,181,.2);
  background:rgba(29,91,66,.2);
}

.demo-work{
  display:grid;
  gap:7px;
  margin:18px 0;
  padding:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:17px;
  background:rgba(4,9,14,.58);
}

.demo-step{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:10px;
  align-items:center;
  padding:8px 4px;
}

.demo-step>b{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #324252;
  color:#708198;
  font-size:9px;
}

.demo-step span{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.demo-step strong{font-size:10px}
.demo-step small{color:#8191a5;font-size:8px}

.demo-step.done>b{
  color:var(--use-green);
  border-color:rgba(98,243,181,.23);
  background:rgba(98,243,181,.08);
}

.demo-step.active>b{
  border-color:var(--use-cyan);
  border-top-color:transparent;
  animation:demoSpin .8s linear infinite;
}

@keyframes demoSpin{to{transform:rotate(360deg)}}

.principle-strip{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:12px;
  align-items:center;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  background:rgba(9,14,21,.68);
}

.principle-strip>div{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:9px 11px;
}

.principle-strip small{
  color:#74869d;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
}

.principle-strip strong{
  font-size:12px;
}

.principle-strip>i{
  color:var(--use-cyan);
  font-style:normal;
  font-weight:1000;
}

.principle-brain{
  border-radius:13px;
  background:rgba(255,184,46,.045);
}

.principle-result{
  border-radius:13px;
  background:rgba(98,243,181,.045);
}

.use-section{
  padding:105px 0;
}

.use-heading{
  max-width:850px;
  margin:0 auto 46px;
  text-align:center;
}

.use-heading h2{
  margin:14px 0 16px;
  font-size:clamp(32px,4.3vw,54px);
  line-height:1.05;
  letter-spacing:-.04em;
}

.use-heading p{
  max-width:760px;
  margin:0 auto;
  color:var(--use-muted);
  font-size:14px;
  line-height:1.75;
}

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

.setup-card{
  position:relative;
  min-height:240px;
  padding:23px;
  border:1px solid var(--use-line);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(14,20,30,.84),rgba(8,12,19,.94));
  transition:.24s ease;
}

.setup-card:hover{
  transform:translateY(-4px);
  border-color:rgba(114,236,255,.23);
}

.setup-num{
  position:absolute;
  top:18px;
  right:18px;
  color:#627287;
  font-size:9px;
  font-weight:1000;
}

.setup-icon{
  margin:6px 0 24px;
  font-size:34px;
}

.setup-card h3{
  margin:0 0 10px;
  font-size:19px;
}

.setup-card p{
  margin:0;
  color:#94a3b7;
  font-size:11px;
  line-height:1.7;
}

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

.prompt-card{
  padding:22px;
  border:1px solid var(--use-line);
  border-radius:21px;
  background:rgba(10,16,24,.76);
}

.prompt-card small{
  color:var(--use-cyan);
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}

.prompt-card p{
  min-height:58px;
  margin:12px 0 18px;
  color:#f4f7fb;
  font-size:13px;
  font-weight:700;
  line-height:1.55;
}

.prompt-card span{
  display:block;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#8998ab;
  font-size:9px;
}

.resource-layout{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:24px;
  align-items:center;
  padding:30px;
  border:1px solid var(--use-line);
  border-radius:26px;
  background:
    radial-gradient(circle at 82% 50%,rgba(114,236,255,.06),transparent 34%),
    rgba(9,14,21,.76);
}

.resource-copy h3{
  margin:0 0 13px;
  font-size:27px;
  line-height:1.1;
}

.resource-copy>p{
  margin:0;
  color:var(--use-muted);
  font-size:12px;
  line-height:1.75;
}

.resource-rules{
  display:grid;
  gap:7px;
  margin-top:21px;
}

.resource-rules span{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:#b8c3d0;
  font-size:9px;
}

.resource-rules b{
  color:var(--use-cyan);
  font-size:8px;
}

.resource-example{
  padding:18px;
  border:1px solid rgba(114,236,255,.13);
  border-radius:20px;
  background:rgba(3,8,13,.68);
}

.file-line{
  display:grid;
  grid-template-columns:36px 1fr 28px;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.file-line>span{
  font-size:24px;
}

.file-line div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.file-line strong{font-size:10px}
.file-line small{color:#8191a4;font-size:8px}

.file-line>b{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--use-green);
  border:1px solid rgba(98,243,181,.22);
  background:rgba(98,243,181,.07);
  font-size:9px;
}

.file-line.active{
  border-color:rgba(114,236,255,.2);
  box-shadow:inset 0 0 26px rgba(114,236,255,.03);
}

.resource-arrow{
  padding:5px 0;
  text-align:center;
  color:var(--use-cyan);
  font-size:12px;
}

.mission-timeline{
  position:relative;
  max-width:900px;
  margin:0 auto;
  display:grid;
  gap:12px;
}

.timeline-line{
  position:absolute;
  left:23px;
  top:23px;
  bottom:23px;
  width:1px;
  background:linear-gradient(var(--use-cyan),rgba(114,236,255,.08));
}

.mission-timeline article{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:14px;
  align-items:center;
}

.mission-timeline article>span{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#041013;
  background:linear-gradient(135deg,#dffcff,var(--use-cyan));
  font-size:10px;
  font-weight:1000;
  box-shadow:0 0 18px rgba(114,236,255,.14);
}

.mission-timeline article>div{
  padding:16px 18px;
  border:1px solid var(--use-line);
  border-radius:17px;
  background:rgba(10,16,24,.75);
}

.mission-timeline small{
  color:#7c8da2;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}

.mission-timeline strong{
  display:block;
  margin:6px 0 5px;
  font-size:13px;
}

.mission-timeline p{
  margin:0;
  color:#8f9eb1;
  font-size:9px;
  line-height:1.55;
}

.control-card{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:34px;
  align-items:center;
  padding:36px;
  border:1px solid rgba(98,243,181,.2);
  border-radius:28px;
  background:
    radial-gradient(circle at 88% 45%,rgba(98,243,181,.07),transparent 34%),
    linear-gradient(145deg,rgba(12,22,20,.72),rgba(7,11,17,.94));
}

.control-card h2{
  margin:14px 0;
  font-size:clamp(30px,3.8vw,48px);
  line-height:1.06;
  letter-spacing:-.04em;
}

.control-card p{
  margin:0;
  color:var(--use-muted);
  font-size:12px;
  line-height:1.75;
}

.control-list{
  display:grid;
  gap:8px;
}

.control-list>div{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:center;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
  background:rgba(255,255,255,.035);
}

.control-list>div>span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:10px;
  font-weight:1000;
}

.control-list div div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.control-list strong{font-size:10px}
.control-list small{color:#8291a4;font-size:8px}

.control-ok>span{
  color:var(--use-green);
  background:rgba(98,243,181,.08);
  border:1px solid rgba(98,243,181,.2);
}

.control-warn{
  border-color:rgba(255,184,46,.18)!important;
  background:rgba(255,184,46,.045)!important;
}

.control-warn>span{
  color:#ffd58b;
  background:rgba(255,184,46,.08);
  border:1px solid rgba(255,184,46,.2);
}

.tool-builder{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:28px;
  align-items:center;
  max-width:980px;
  margin:0 auto;
}

.tool-terminal{
  overflow:hidden;
  border:1px solid rgba(155,140,255,.23);
  border-radius:18px;
  background:#070912;
}

.terminal-head{
  height:43px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 13px;
  border-bottom:1px solid rgba(255,255,255,.07);
  color:#7f8ba0;
  font-size:8px;
  letter-spacing:.12em;
}

.terminal-head i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff6678;
}

.terminal-head i:nth-child(2){background:#ffc45c}
.terminal-head i:nth-child(3){background:#5ee9a5}
.terminal-head span{margin-left:6px}

.tool-terminal pre{
  margin:0;
  padding:22px;
  overflow:auto;
}

.tool-terminal code{
  color:#a6b3c7;
  font:600 11px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;
}

.tool-terminal code span{color:var(--use-violet)}
.tool-terminal code .ok{color:var(--use-green)}

.tool-builder-copy>span{
  font-size:40px;
}

.tool-builder-copy h3{
  margin:14px 0 12px;
  font-size:28px;
  line-height:1.1;
}

.tool-builder-copy p{
  margin:0;
  color:var(--use-muted);
  font-size:12px;
  line-height:1.75;
}

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

.ecosystem-grid article{
  min-height:145px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:20px;
  border:1px solid var(--use-line);
  border-radius:18px;
  background:rgba(10,16,24,.73);
  text-align:center;
}

.ecosystem-grid article>span{
  font-size:30px;
}

.ecosystem-grid strong{
  font-size:12px;
}

.ecosystem-grid small{
  color:#8392a5;
  font-size:8px;
}

.final-use-cta{
  margin-top:40px;
  margin-bottom:80px;
  padding:70px 24px;
  text-align:center;
  border:1px solid var(--use-line);
  border-radius:32px;
  background:
    radial-gradient(circle at 50% 28%,rgba(64,186,226,.09),transparent 38%),
    linear-gradient(180deg,rgba(14,20,30,.84),rgba(6,9,14,.95));
  box-shadow:0 30px 90px rgba(0,0,0,.38);
}

.final-use-cta img{
  margin-bottom:20px;
  filter:drop-shadow(0 0 24px rgba(255,176,35,.24));
}

.final-use-cta h2{
  max-width:800px;
  margin:16px auto;
  font-size:clamp(36px,5vw,60px);
  line-height:1.03;
  letter-spacing:-.05em;
}

.final-use-cta p{
  max-width:680px;
  margin:0 auto;
  color:var(--use-muted);
  font-size:13px;
  line-height:1.7;
}

.use-footer{
  width:min(1220px,calc(100% - 36px));
  margin:0 auto;
  padding:28px 0 42px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.use-footer div{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.use-footer a{
  color:#8997aa;
  text-decoration:none;
  font-size:10px;
}

.use-footer p{
  margin:0;
  color:#718096;
  font-size:9px;
}

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease,transform .7s ease;
}

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

#top-nav [aria-current="page"]{
  color:#fff!important;
  background:rgba(114,236,255,.08)!important;
  box-shadow:inset 0 0 0 1px rgba(114,236,255,.18)!important;
}

@media(max-width:1050px){
  .use-hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:120px;
  }

  .use-hero-copy{text-align:center}
  .use-hero-copy>p{margin-inline:auto}
  .use-actions{justify-content:center}
  .quick-points{justify-content:center}
  .use-console{
    width:min(690px,100%);
    margin-inline:auto;
  }

  .setup-grid{grid-template-columns:repeat(2,1fr)}
  .ecosystem-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .use-shell{
    width:min(100% - 22px,1220px);
  }

  .use-hero{
    padding:52px 0 65px;
  }

  .use-hero h1{
    font-size:clamp(38px,12vw,55px);
  }

  .use-hero-copy>p{
    font-size:15px;
  }

  .use-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .use-btn{width:100%}

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

  .quick-points span{text-align:center}

  .principle-strip{
    grid-template-columns:1fr;
    text-align:center;
  }

  .principle-strip>i{
    transform:rotate(90deg);
  }

  .use-section{
    padding:72px 0;
  }

  .use-heading{
    margin-bottom:32px;
  }

  .use-heading h2{
    font-size:34px;
  }

  .use-heading p{
    font-size:13px;
  }

  .setup-grid,
  .prompt-grid,
  .ecosystem-grid{
    grid-template-columns:1fr;
  }

  .setup-card{min-height:0}

  .prompt-card p{min-height:0}

  .resource-layout,
  .control-card,
  .tool-builder{
    grid-template-columns:1fr;
  }

  .resource-layout{
    padding:20px;
  }

  .resource-copy h3{
    font-size:24px;
  }

  .control-card{
    padding:24px;
  }

  .tool-builder{
    gap:20px;
  }

  .tool-builder-copy{
    text-align:center;
  }

  .final-use-cta{
    padding:54px 18px;
  }

  .final-use-cta h2{
    font-size:39px;
  }

  .use-footer{
    display:block;
    text-align:center;
  }

  .use-footer div{
    justify-content:center;
  }

  .use-footer p{
    margin-top:15px;
  }
}

@media(prefers-reduced-motion:reduce){
  *{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}