/* ================= Aries-Tech — SAFE BASE ================== */
/* Theme */
:root{ --accent:#00bcd4; --accent-2:#6600cc; --bg1:#000047; --bg2:#360863; --text: #f7fbff; }

/* Page accents */
body.page-home{ --accent:#00d5ea; --accent-2:#6a00ff; }
body.page-creer{ --accent:#00ffc6; --accent-2:#008aff; }
body.page-build{ --accent:#00c3ff; --accent-2:#ff00c8; }
body.page-contact{ --accent:#00e0ff; --accent-2:#9c27ff; }
body.page-merci{ --accent:#00bcd4; --accent-2:#6a00ff; }

/* Base */
html,body{height:100%}
body{ color:var(--text); background:#0f1117; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* NAVBAR (uniforme) */
.custom-navbar{ position:fixed; left:0; right:0; top:0; z-index:1100; background:#111319; }
.navbar-brand .logo-img{ height:44px; width:auto; display:block; }
.custom-navbar .nav-link{ position:relative; }
.custom-navbar .nav-link::after{
  content:""; position:absolute; left:10%; right:10%; bottom:6px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.custom-navbar .nav-link:hover::after, .custom-navbar .nav-link.active::after{ transform:scaleX(1); }
.custom-navbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
  background-size:200% 100%; animation:navLine 12s linear infinite; opacity:.55;
}
@keyframes navLine{ to{ background-position:-200% 0; } }
@media (max-width:991.98px){
  .custom-navbar{ height:56px; }
  .navbar-brand .logo-img{ height:36px; }
  .custom-navbar .navbar-collapse{
    position:static; width:100%; background:#1b1b1b;
    border-top:1px solid rgba(255,255,255,.12); padding:12px 16px;
  }
  .navbar-nav .nav-link{ padding:.35rem .25rem; font-size:.95rem; }
}

/* HERO */
.hero-section{ position:relative; background:linear-gradient(90deg, var(--bg1), var(--bg2)); overflow:hidden; }
.hero-section::before,.hero-section::after{
  content:""; position:absolute; width:38vmin; height:38vmin; border-radius:50%;
  filter:blur(28px); opacity:.35; pointer-events:none; animation:heroFloat 16s ease-in-out infinite alternate;
}
.hero-section::before{ left:-6vmin; top:12vmin; background:var(--accent); }
.hero-section::after{ right:-8vmin; top:18vmin; background:var(--accent-2); animation-delay:.6s; }
body.page-home .hero-section::before, body.page-home .hero-section::after{ display:none!important; }
@keyframes heroFloat{ from{transform:translateY(-12px)} to{transform:translateY(12px)} }

.hero-content{ padding: clamp(80px, 16vw, 180px) 0 32px; position:relative; z-index:2; text-align:center; }
.hero-title{ font-size: clamp(28px, 5vw, 52px); font-weight:800; letter-spacing:.4px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 24px rgba(0,0,0,.35);
}
.hero-subtitle{ max-width:900px; margin:0 auto 16px; text-shadow:0 1px 10px rgba(0,0,0,.35); }
.cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:12px 28px;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#001018 !important;font-weight:800;letter-spacing:.2px;box-shadow:0 10px 28px rgba(0,0,0,.35);border:0;transition:transform .2s ease,filter .2s ease}

/* Particles */
#particleCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:.9; }
@media (max-width:1024px){ #particleCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:.9; } }

/* HERO CARDS */
.card-container{ display:grid; grid-template-columns:repeat(2, minmax(300px,420px)); justify-content:center; gap:28px; }
@media (max-width:991.98px){ .card-container{ grid-template-columns:1fr; gap:18px; } }
.card{ min-height:200px; display:flex; flex-direction:column; justify-content:center; border-radius:20px; position:relative; }
.card.blue{ border:1px solid #2b93ff; box-shadow:0 0 10px #000047, 0 0 18px rgba(0,0,71,.8), 0 0 24px rgba(0,255,224,.55); }
.card.purple{ border:1px solid #c83bff; box-shadow:0 0 10px #320066, 0 0 18px rgba(50,0,102,.9), 0 0 24px rgba(102,0,204,.55); }
@media (hover:hover) and (pointer:fine){
  .card-link .card{ transition:transform .18s ease, box-shadow .2s ease; }
  .card-link:hover .card{ transform: translateY(-3px); }
}
.card.hover-border::after{
  content:""; position:absolute; inset:-1px; border-radius:20px; pointer-events:none;
  background:conic-gradient(from 180deg, var(--accent), transparent 30%, var(--accent-2) 60%, transparent 90%, var(--accent));
  opacity:.28; transition:opacity .35s ease; padding:1px; animation:conicSpin 14s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.card-link:hover .hover-border::after{ opacity:.55; }
@keyframes conicSpin{ to{ transform:rotate(1turn); } }

/* SECTION separators (subtils) */
section{ position:relative; padding-top:clamp(1.25rem, 2vw, 2rem); }
section::before{
  content:""; position:absolute; left:6%; right:6%; top:-10px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 15%, var(--accent) 50%, rgba(255,255,255,.18) 85%, transparent);
  opacity:.22; pointer-events:none;
}
section::after{
  content:""; position:absolute; left:15%; right:15%; top:-14px; height:10px;
  background: radial-gradient(40% 120% at 50% 120%, rgba(0,188,212,.18), transparent 60%);
  opacity:.18; filter: blur(6px); pointer-events:none;
}

/* ABOUT */
.about-card{
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius:18px;
}
.value-chip{
  display:inline-flex; gap:.4rem; align-items:center;
  font-weight:600; letter-spacing:.2px;
  padding:.35rem .7rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 45%),
              linear-gradient(90deg, rgba(0,188,212,.18), rgba(102,0,204,.18));
}
.value-chip i{ font-size:1rem; opacity:.9; }
.about-illustration .about-img{ max-width:420px; filter: drop-shadow(0 12px 40px rgba(0,0,0,.35)); }

/* SERVICES */
.services-section .service-card{
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius:16px; position:relative; overflow:hidden;
  transition: transform .18s ease, box-shadow .22s ease;
}
.services-section .service-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.28); }
.services-section .service-card .icon-wrap{
  width:46px; height:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 46px;
  border:1px solid transparent;
  background:
    linear-gradient(#181b22, #181b22) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 26px rgba(0,0,0,.28);
  color:#dfe7ee;
}
.services-section .service-card .icon-wrap i{ font-size:1.15rem; }
.services-section .service-card .icon-wrap img{ width:22px; height:22px; object-fit:contain; display:block; }

/* EXPERTISE marquee */
.expertise-section{ padding:60px 0; background: linear-gradient(180deg, #1c1c1c, #1f1f1f); }
.expertise-sub{ color:#9bb4bd; }
.expertise-marquee{ overflow:hidden; position:relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.expertise-track{ display:flex; gap:22px; width:max-content; animation:expertiseScroll 26s linear infinite; }
@keyframes expertiseScroll{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .expertise-track{ animation:none; } }
.brand-plate{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-width:190px; height:70px; padding:0 18px; border-radius:16px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 26px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.brand-plate:hover{ transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,.28); border-color: rgba(0,188,212,.35); }
.brand-plate img{ height:28px; width:auto; object-fit:contain; filter: drop-shadow(0 2px 10px rgba(0,0,0,.2)); }
.brand-plate .label{ font-weight:600; letter-spacing:.2px; }

/* BOX FX (spotlight + sheen, simple & safe) */
.fx-spot{ position:relative; overflow:hidden; border-radius:18px; }
.fx-spot::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background: radial-gradient(320px 220px at var(--mx,50%) var(--my,50%), rgba(0,188,212,.18), transparent 45%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.fx-spot:hover::before{ opacity:.9; }
.fx-spot::after{
  content:""; position:absolute; top:-120%; left:-40%; width:60%; height:300%; transform:rotate(25deg);
  background: linear-gradient(to right, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%); opacity:0; pointer-events:none;
}
@media (hover:hover){ .fx-spot:hover::after{ animation: sheen .9s ease; opacity:1; } }
@keyframes sheen{ from{ transform:translateX(-30%) rotate(25deg) } to{ transform:translateX(220%) rotate(25deg) } }

/* FOOTER */
.footer .footer-grid{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.social-3d-sm{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#e0e0e0; text-decoration:none;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease; }
.social-3d-sm:hover{ transform:translateY(-2px); background:rgba(0,188,212,.12); box-shadow:0 6px 20px rgba(0,0,0,.3); color:#fff; }

/* Reveal + Focus */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Buttons ripple */
.btn{ position:relative; overflow:hidden; }
.btn::after{ content:""; position:absolute; left:var(--rx,50%); top:var(--ry,50%); width:0; height:0; border-radius:50%;
  background:rgba(255,255,255,.35); transform:translate(-50%,-50%); opacity:0; pointer-events:none; }
.btn.rippling::after{ animation:btnRipple .6s ease-out; }
@keyframes btnRipple{ from{ width:0; height:0; opacity:.45; } to{ width:240px; height:240px; opacity:0; } }

/* --- hero layering (content above particles) --- */
.hero-section > .container{ position: relative; z-index: 2; }

/* --- scroll progress under navbar --- */
#progressContainer{
  position: fixed; left: 0; right: 0; height: 3px;
  z-index: 1029; /* just under the navbar */
}
#progressBar{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .2s ease;
}

:root{ --muted: #d9e5f2; }

/* enforce muted color */
.text-muted{ color: var(--muted) !important; }

/* about section readability */
.about-section p{ color: #dfeaf7; }

/* ensure hero children stay above the canvas */
.hero-section h1,
.hero-section p,
.hero-section .btn,
.hero-section .card,
.hero-section .card *,
.hero-section .hero-actions{ position: relative; z-index: 4; }

#expertise .section-head p{ color: var(--muted) !important; opacity: .95; }
#apropos p{ color: var(--muted) !important; opacity: .95; }

/* ensure hero header creates stacking context */
header.hero-section{ position: relative; }

.hero-section .hero-title,
.hero-section .hero-actions,
.hero-section .card-container,
.hero-section .card{ position: relative; z-index: 4; }

.about-badge{ max-width: min(560px, 45vw); width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 12px 40px rgba(0,0,0,.35)); }

/* title shadows */
h1, .hero-title{ text-shadow: 0 3px 14px rgba(0,0,0,.55), 0 0 30px rgba(0,0,0,.35); }
h2{ text-shadow: 0 2px 10px rgba(0,0,0,.45); }
h3{ text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.cta-btn:hover{ filter:brightness(1.08); transform:translateY(-2px); text-decoration:none }

.btn-outline-cyan{
  border:2px solid var(--accent); color:var(--accent);
  padding:10px 24px; border-radius:12px; font-weight:700; transition:all .2s ease;
}
.btn-outline-cyan:hover{ background:var(--accent); color:#001018; box-shadow:0 8px 22px rgba(0,188,212,.35) }

/* hero cards as colored buttons */
.card{ min-height:200px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.card.blue{
  background: radial-gradient(120% 120% at 20% 20%, rgba(0,213,234,.22), rgba(0,32,64,.25)),
              linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color:#eaf6ff;
  border:1px solid rgba(0,213,234,.45);
  box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 24px rgba(0,213,234,.35);
}
.card.purple{
  background: radial-gradient(120% 120% at 80% 20%, rgba(102,0,204,.22), rgba(32,0,64,.25)),
              linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color:#f2e9ff;
  border:1px solid rgba(102,0,204,.45);
  box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 24px rgba(102,0,204,.35);
}
.card.blue h3, .card.purple h3{ color:inherit; margin-bottom:.35rem; }
.card.blue p, .card.purple p{ color:rgba(255,255,255,.92); margin:0 }


/* === Hero CTA cards (improved) === */
.hero-cta-link{ display:block; }
.card{ min-height: 240px; padding: 22px; }
.card h3{ font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: .4px; text-transform: none; }
.card p{ max-width: 36ch; }
.card.blue{
  background:
    radial-gradient(140% 140% at 0% 0%, rgba(0,213,234,.25), transparent 55%),
    linear-gradient(180deg, rgba(16,29,48,.85), rgba(16,29,48,.72));
  border: 1px solid rgba(0,213,234,.55);
  box-shadow:
    0 10px 32px rgba(0,0,0,.35),
    0 0 24px rgba(0,213,234,.35) inset,
    0 0 26px rgba(0,213,234,.25);
}
.card.purple{
  background:
    radial-gradient(140% 140% at 100% 0%, rgba(102,0,204,.25), transparent 55%),
    linear-gradient(180deg, rgba(30,16,48,.85), rgba(30,16,48,.72));
  border: 1px solid rgba(128,64,255,.55);
  box-shadow:
    0 10px 32px rgba(0,0,0,.35),
    0 0 24px rgba(128,64,255,.28) inset,
    0 0 26px rgba(128,64,255,.25);
}
.card-link .card{ transition: transform .18s ease, box-shadow .22s ease; cursor: pointer; }
.card-link:hover .card{ transform: translateY(-4px); }
.card-link:focus-visible .card{ outline: 2px solid var(--accent); outline-offset: 4px; }


/* === Expertise (improved pills) === */
.expertise-section{ padding: 70px 0; background: linear-gradient(180deg, #191c22, #1f2430); }
.expertise-sub{ color: rgba(231,243,255,.85); }
.brand-plate{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-width: 200px; height: 72px; padding: 0 20px; border-radius: 16px;
  background: radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.08), rgba(255,255,255,.05)),
              linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.brand-plate:hover{
  transform: translateY(-4px);
  border-color: rgba(0,188,212,.45);
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
}
.brand-plate i{
  font-size: 1.4rem;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
.brand-plate .label{ font-weight: 700; letter-spacing: .2px; color: #f2f7ff; }


/* === Services polish === */
.services-section{ position:relative; }
.services-section h2{ letter-spacing:.3px; margin-bottom: 1.25rem; }
.services-section .service-card h3{ font-weight:700; letter-spacing:.2px; }
.services-section .service-card p{ color:rgba(240,248,255,.85) }
.services-section .service-card:hover .icon-wrap{ transform: translateY(-3px); }
.services-section .service-card .icon-wrap{ transition: transform .18s ease; }

/* ===================== */
/*  Build-to-Order (BTO) */
/* ===================== */

/* utilitaires pour la page creerSonPC */
.section-padding{ padding: clamp(56px, 8vw, 96px) 0; }
.bg-surface{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* cartes Étapes / Tarifs / Objectifs */
.bto-steps .step-card,
.bto-price .price-card,
.bto-goals .goal-card{
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius:16px; padding:18px;
  transition: transform .18s ease, box-shadow .22s ease;
}
.bto-steps .step-card:hover,
.bto-price .price-card:hover,
.bto-goals .goal-card:hover{
  transform: translateY(-3px);
  box-shadow:0 12px 36px rgba(0,0,0,.28);
}

.step-card .step-icon,
.price-card .price-icon,
.goal-card .goal-icon{
  width:46px; height:46px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#001018; font-size:1.25rem; margin-bottom:.35rem;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.price-card .price{ color:#eaf6ff; }

/* FAQ néo-glass */
.faq-neo .accordion-item{ background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; }
.faq-neo .accordion-button{ background:rgba(255,255,255,.04); color:#e8f5ff; }
.faq-neo .accordion-button:focus{ box-shadow:none; }
.faq-neo .accordion-button:not(.collapsed){ color:#fff; background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.faq-neo .accordion-body{ color:#dfeaf7; }

/* ===== BTO Process & Infos ===== */
.bto-step,
.info-card{
  position:relative;
  border-radius:16px;
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 8px 26px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.bto-step:hover,
.info-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,188,212,.35);
  box-shadow: 0 12px 34px rgba(0,0,0,.30);
}
.bto-step-number{
  position:absolute; top:-12px; left:-12px;
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#001018;
  background: linear-gradient(135deg, var(--accent, #00bcd4), var(--accent-2, #6600cc));
  box-shadow: 0 10px 26px rgba(0,0,0,.28), 0 0 0 3px rgba(0,188,212,.25);
}
.bto-step h5, .info-card h5{ font-weight:700; letter-spacing:.2px; margin-bottom:.35rem }
.bto-step p, .info-card p{ color: rgba(240,248,255,.9); margin:0 }

/* Animations utilisées par la page (si absentes) */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease }
.reveal.is-visible{ opacity:1; transform:none }
.fx-spot{ position:relative; overflow:hidden; border-radius:16px }
.fx-spot::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background: radial-gradient(320px 220px at var(--mx,50%) var(--my,50%), rgba(0,188,212,.18), transparent 45%),
             linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.fx-spot:hover::before{ opacity:.9 }