/* ===========================================================
   CYBERTECH QUANTUM — Cyber Teck Q
   =========================================================== */

:root{
  --primary:#2563EB;
  --secondary:#8B5CF6;
  --accent:#06B6D4;
  --bg:#0B1530;
  --text:#0F172A;
  --text-on-dark:#FFFFFF;
  --text-soft:#475569;
  --text-soft-on-dark:#FFFFFF;
  --border:#E2E8F0;
  --border-on-dark:rgba(255,255,255,.14);
  --surface:#FFFFFF;
  --surface-on-dark:rgba(255,255,255,.07);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 8px 24px rgba(37,99,235,.10);
  --shadow-lg: 0 20px 50px rgba(37,99,235,.16);
  --radius: 18px;
  --radius-sm: 12px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --header-h: 84px;
}

[hidden]{display:none !important;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  position:relative;
  margin:0;
  font-family:var(--font-body);
  color:var(--text-on-dark);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background-color:#070c1c;
  min-height:100vh;
}
body::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 8%, #fff 100%, transparent),
    radial-gradient(1px 1px at 22% 4%, #fff 100%, transparent),
    radial-gradient(1.2px 1.2px at 35% 14%, #fff 100%, transparent),
    radial-gradient(1px 1px at 48% 6%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 62% 11%, #fff 100%, transparent),
    radial-gradient(1px 1px at 75% 3%, #fff 100%, transparent),
    radial-gradient(1.3px 1.3px at 88% 16%, #fff 100%, transparent),
    radial-gradient(1px 1px at 5% 25%, #fff 100%, transparent),
    radial-gradient(1.4px 1.4px at 18% 32%, #fff 100%, transparent),
    radial-gradient(1px 1px at 30% 40%, #fff 100%, transparent),
    radial-gradient(1.2px 1.2px at 44% 28%, #fff 100%, transparent),
    radial-gradient(1px 1px at 58% 36%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 70% 45%, #fff 100%, transparent),
    radial-gradient(1px 1px at 82% 30%, #fff 100%, transparent),
    radial-gradient(1.3px 1.3px at 95% 40%, #fff 100%, transparent),
    radial-gradient(1px 1px at 12% 50%, #fff 100%, transparent),
    radial-gradient(1px 1px at 92% 55%, #fff 100%, transparent),
    radial-gradient(1.4px 1.4px at 25% 62%, #fff 100%, transparent),
    radial-gradient(1px 1px at 50% 70%, #fff 100%, transparent),
    radial-gradient(1.2px 1.2px at 78% 68%, #fff 100%, transparent),
    radial-gradient(1px 1px at 10% 78%, #fff 100%, transparent),
    radial-gradient(1.3px 1.3px at 40% 85%, #fff 100%, transparent),
    radial-gradient(1px 1px at 65% 90%, #fff 100%, transparent),
    radial-gradient(1.4px 1.4px at 88% 88%, #fff 100%, transparent),
    radial-gradient(1px 1px at 95% 95%, #fff 100%, transparent);
  background-repeat:no-repeat;
  background-size:100% 100%;
  opacity:.75;
  animation:twinkle-field 5s ease-in-out infinite;
}
@keyframes twinkle-field{0%,100%{opacity:.5;} 50%{opacity:.9;}}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-0.01em;}

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

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  border:1.5px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.btn-primary{
  background:linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff;
  box-shadow:0 4px 16px rgba(37,99,235,.35);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(37,99,235,.45);}
.btn-gradient{
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff;
  box-shadow:0 6px 20px rgba(99,82,235,.32);
}
.btn-gradient:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(99,82,235,.42);}
.btn-outline{
  border-color:var(--border);
  color:var(--primary);
  background:#fff;
  width:100%;
  margin-top:auto;
}
.btn-outline:hover{border-color:var(--primary); background:rgba(37,99,235,.05); transform:translateY(-1px);}

/* ---------- Background layer (image statique fixe) — toutes les pages du site ---------- */
.bg-cover-layer{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  background-image:url('assets/cover-full.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.bg-grid{display:none;}

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  background:rgba(15,28,64,.32);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:box-shadow .3s ease, background .3s ease;
}
.site-header.is-scrolled{
  box-shadow:0 4px 24px rgba(8,15,38,.25);
  background:rgba(15,28,64,.55);
}
.header-inner{
  max-width:1360px; margin:0 auto; height:100%;
  display:flex; align-items:center; gap:28px;
  padding:0 32px;
}
.brand{display:flex; align-items:center; gap:14px; margin-right:auto;}
.brand-logo{position:relative; width:52px; height:52px; flex-shrink:0;}
.logo-svg{width:100%; height:100%; filter:drop-shadow(0 0 8px rgba(6,182,212,.5));}
.logo-img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 8px rgba(6,182,212,.5));}
.logo-orbit{animation:spin-slow 14s linear infinite;}
.logo-particle{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 6px var(--accent);
}
.logo-particle.p1{top:2px; left:50%; animation:orbit-rotate 6s linear infinite;}
.logo-particle.p2{top:50%; left:2px; animation:orbit-rotate 8s linear infinite reverse;}
.logo-particle.p3{bottom:4px; right:6px; animation:orbit-rotate 10s linear infinite;}
.brand-text{display:flex; flex-direction:column; line-height:1.25;}
.brand-name{font-family:var(--font-display); font-size:1.05rem; font-weight:500; color:var(--text-on-dark); letter-spacing:.01em;}
.brand-name strong{font-weight:700;}
.brand-tagline{font-size:.68rem; color:var(--text-soft-on-dark); letter-spacing:.04em; text-transform:uppercase;}

.main-nav{display:flex; align-items:center; gap:22px; flex-wrap:nowrap;}
.nav-link{
  white-space:nowrap;
  font-size:.92rem; font-weight:500; color:var(--text-soft-on-dark);
  position:relative; padding:6px 0; transition:color .2s ease;
}
.nav-link::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-link:hover{color:#fff;}
.nav-link:hover::after, .nav-link.is-active::after{transform:scaleX(1);}
.nav-link.is-active{color:#fff;}
.nav-link-cta-text{color:var(--accent); font-weight:600; display:inline-flex; align-items:center; gap:6px;}
.nav-link-cta-text::after{background:linear-gradient(90deg, var(--accent), var(--secondary));}
.nav-link-cta-text .nav-account-icon{width:15px; height:15px; flex-shrink:0;}

.header-cta{flex-shrink:0; padding:11px 22px; font-size:.88rem;}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; padding:0;
}
.nav-toggle span{width:100%; height:2px; background:#fff; border-radius:2px; transition:.3s;}

/* ---------- Hero ---------- */
.hero{
  position:relative; z-index:1;
  padding:calc(var(--header-h) + 64px) 32px 80px;
  margin:0;
  overflow:hidden;
}
.hero-inner{
  position:relative; z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  min-height:560px;
  max-width:1360px; margin:0 auto;
  padding-top:18vh;
}
@keyframes twinkle-field{0%,100%{opacity:.55;} 50%{opacity:1;}}

.hero-content{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; width:100%; max-width:620px; margin:0 auto;}
.hero-title{
  font-size:clamp(2rem, 3.1vw, 3.05rem);
  font-weight:700; line-height:1.12;
  color:#FFFFFF;
  text-align:center;
}
.hero-title .line{display:block;}
.typed-wrap{
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 24px rgba(139,92,246,.25);
}
.typed-cursor{
  color:var(--secondary); -webkit-text-fill-color:var(--secondary);
  animation:blink 1s step-start infinite;
}
.hero-divider{width:64px; height:4px; border-radius:4px; margin:22px auto 0; background:linear-gradient(90deg, var(--primary), var(--accent));}
.hero-subtitle{font-size:1.08rem; color:#FFFFFF; max-width:460px; margin:0 auto 30px; line-height:1.55; text-align:center;}

@keyframes blink{50%{opacity:0;}}

/* ---------- Service Cards ---------- */
.cards-section{
  position:relative; z-index:1;
  max-width:1360px; margin:0 auto; padding:10px 32px 90px;
}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:22px;
}
.service-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px 24px;
  display:flex; flex-direction:column;
  box-shadow:0 12px 36px rgba(8,15,38,.28);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 46px rgba(8,15,38,.38);
  border-color:rgba(37,99,235,.25);
}
.card-icon{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(139,92,246,.10));
  color:var(--primary);
}
.icon-star{color:var(--secondary);}
.icon-dollar{color:var(--secondary);}
.service-card h3{font-size:1.15rem; margin-bottom:10px; color:var(--text);}
.card-desc{font-size:.9rem; color:var(--text-soft); line-height:1.5; margin:0 0 16px;}
.card-list{margin-bottom:20px; flex-grow:1;}
.card-list li{
  font-size:.86rem; color:var(--text-soft); padding:5px 0 5px 22px;
  position:relative;
}
.card-list li::before{
  content:'✓'; position:absolute; left:0; top:5px;
  color:var(--accent); font-weight:700; font-size:.8rem;
}
.success-preview{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin-bottom:20px; flex-grow:1; justify-content:center;
}
.success-preview-img{
  width:100%; aspect-ratio:16/10; border-radius:10px;
  background:linear-gradient(135deg, #C084A8, #E8C5D8);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:#fff;
  letter-spacing:.05em;
}
.success-preview-name{font-size:.82rem; color:var(--text-soft);}
.price-display{
  display:flex; flex-direction:column; margin:6px 0 22px; flex-grow:1; justify-content:center;
}
.price-label{font-size:.8rem; color:var(--text-soft);}
.price-value{font-family:var(--font-display); font-size:2.1rem; font-weight:700; color:var(--secondary);}

/* ---------- Trust bar ---------- */
.trust-bar-wrap{
  position:relative; z-index:1;
}
.signature-stamp{
  position:absolute; right:32px; bottom:-34px; width:90px; height:90px;
  z-index:2; opacity:.92;
  animation:spin-slow 40s linear infinite;
}
.signature-stamp svg{width:100%; height:100%;}
.trust-bar{
  position:relative; z-index:1;
  max-width:1360px; margin:0 auto 90px; padding:0 32px;
  display:flex; justify-content:space-between; gap:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px 36px;
  box-shadow:0 12px 36px rgba(8,15,38,.28);
}
.trust-item{
  display:flex; align-items:center; gap:12px;
  font-size:.82rem; font-weight:600; color:var(--text);
  white-space:nowrap;
}
.trust-item svg{width:26px; height:26px; color:var(--primary); flex-shrink:0;}

/* ---------- Section heads (shared) ---------- */
.section-head{text-align:center; max-width:620px; margin:0 auto 50px;}
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.section-head h2{font-size:clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom:12px;}
.section-sub{color:var(--text-soft-on-dark); font-size:1rem; line-height:1.6; margin:0;}
.client-announce{
  font-weight:600; color:#fff; font-size:1.02rem; line-height:1.5;
  margin:0 0 10px; max-width:520px; margin-inline:auto;
}

/* ---------- FAQ ---------- */
.faq-section{
  position:relative; z-index:1;
  max-width:840px; margin:0 auto; padding:40px 32px 100px;
}
.faq-item{
  border-bottom:1px solid var(--border-on-dark);
}
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; padding:22px 4px;
  font-size:1rem; font-weight:600; color:var(--text-on-dark); text-align:left;
}
.faq-question svg{width:20px; height:20px; color:var(--accent); flex-shrink:0; transition:transform .3s ease;}
.faq-question[aria-expanded="true"] svg{transform:rotate(180deg);}
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.faq-answer p{margin:0 4px 20px; color:var(--text-soft-on-dark); font-size:.94rem; line-height:1.6;}

/* ---------- Client section ---------- */
.client-section{
  position:relative; z-index:1;
  max-width:1360px; margin:0 auto; padding:10px 32px 100px;
}
.client-inner{max-width:460px; margin:0 auto;}
.client-tabs{
  display:flex; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:5px; margin-bottom:28px;
}
.client-tab{
  flex:1; background:none; border:none; padding:11px; border-radius:999px;
  font-size:.9rem; font-weight:600; color:var(--text-soft); transition:.25s;
}
.client-tab.is-active{
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff;
}
.client-form, .contact-form{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:32px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:18px;
}
.client-form[hidden], .contact-form[hidden]{display:none;}
.field{display:flex; flex-direction:column; gap:7px; flex:1;}
.field span{font-size:.85rem; font-weight:600; color:var(--text);}
.field input, .field textarea{
  font-family:inherit; font-size:.94rem; padding:12px 14px;
  border:1.5px solid var(--border); border-radius:10px; color:var(--text);
  background:#fff; transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.field-row{display:flex; gap:16px;}
.password-field{position:relative; display:flex;}
.password-field input{flex:1; padding-right:44px;}
.toggle-password{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-soft); padding:6px;
  display:flex; align-items:center;
}
.toggle-password svg{width:19px; height:19px;}
.forgot-link{font-size:.85rem; color:var(--primary); align-self:flex-end; margin-top:-8px;}
.field-error{color:#DC2626; font-size:.8rem;}
.form-success{
  text-align:center; color:#16A34A; font-weight:600; font-size:.9rem; margin:0;
}
.form-message{
  text-align:center; font-weight:600; font-size:.88rem; margin:0 0 14px;
  padding:10px 14px; border-radius:10px;
}
.form-message-error{ color:#B91C1C; background:rgba(220,38,38,.08); }
.form-message-success{ color:#15803D; background:rgba(22,163,74,.1); }

/* ---------- Contact ---------- */
.contact-section{
  position:relative; z-index:1;
  max-width:1360px; margin:0 auto; padding:10px 32px 110px;
}
.contact-inner{max-width:560px; margin:0 auto;}
.page-hero + .contact-section{padding-top:50px;}
.contact-alt{
  margin-top:28px; padding-top:24px; border-top:1px solid var(--border-on-dark);
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
}
.contact-alt .footer-email{color:var(--accent); font-size:1rem;}

/* ---------- Footer ---------- */
.site-footer{
  position:relative; z-index:1;
  border-top:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
}
.footer-inner{
  max-width:1360px; margin:0 auto; padding:34px 32px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.footer-brand{display:flex; flex-direction:column; gap:4px;}
.footer-name{font-family:var(--font-display); font-weight:700; font-size:1rem;}
.footer-italic{font-style:italic; color:var(--text-soft); font-size:.85rem;}
.footer-email{font-size:.9rem; color:var(--primary); font-weight:600;}
.footer-bottom{
  border-top:1px solid var(--border);
  text-align:center; padding:18px 32px; font-size:.78rem; color:var(--text-soft);
}

/* ===========================================================
   INNER PAGES — page hero, detail cards, process, pricing, CTA
   =========================================================== */
.page-hero{
  position:relative; z-index:1;
  padding:calc(var(--header-h) + 90px) 32px 60px;
  max-width:900px; margin:0 auto 0 38%; text-align:left;
}
.page-hero-inner{max-width:480px;}
.page-hero h1{font-size:clamp(2.1rem, 4vw, 3rem); margin:14px 0 16px; color:var(--text-on-dark);}
.page-hero-sub{font-size:1.08rem; color:var(--text-soft-on-dark); max-width:480px; margin:0; line-height:1.6;}

.detail-section{
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto; padding:10px 32px 70px;
}
.detail-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
}
.detail-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 26px; box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.detail-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(37,99,235,.25);}
.detail-card h3{font-size:1.1rem; margin:0 0 10px; color:var(--text);}

.services-grid-4{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
}
.service-card-full{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 26px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card-full:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(37,99,235,.25);}
.service-card-full h3{font-size:1.08rem; margin:0 0 10px; color:var(--text);}
.service-card-full > p{font-size:.88rem; color:var(--text-soft); line-height:1.55; margin:0 0 16px;}
.detail-card p{font-size:.92rem; color:var(--text-soft); line-height:1.6; margin:0;}
.icon-cart, .icon-search, .icon-automation, .icon-refresh, .icon-backup{color:var(--accent);}

.process-section{
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; padding:30px 32px 80px;
}
.process-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
}
.process-step{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 22px; position:relative;
}
.step-num{
  font-family:var(--font-display); font-weight:700; font-size:1.6rem;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block; margin-bottom:10px;
}
.process-step h4{font-size:1.02rem; margin:0 0 8px; color:var(--text);}
.process-step p{font-size:.88rem; color:var(--text-soft); line-height:1.55; margin:0;}

.cta-band{
  position:relative; z-index:1;
  max-width:1000px; margin:0 auto 100px; padding:54px 40px;
  text-align:center; border-radius:var(--radius);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 14px 40px rgba(8,15,38,.3);
}
.cta-band h2{font-size:clamp(1.5rem, 2.4vw, 2rem); margin:0 0 10px; color:var(--text);}
.cta-band p{color:var(--text-soft); margin:0 0 26px;}

/* ---------- Pricing ---------- */
.pricing-section{
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; padding:10px 32px 60px;
}
.pricing-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-bottom:36px;
}
.pricing-grid-single{
  grid-template-columns:minmax(280px, 420px); justify-content:center;
}
.pricing-card{
  position:relative;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius);
  padding:34px 28px; display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease;
}
.pricing-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
.pricing-card-featured{
  border-color:var(--secondary);
  box-shadow:0 14px 40px rgba(139,92,246,.18);
}
.pricing-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff; font-size:.74rem; font-weight:700; letter-spacing:.03em;
  padding:5px 16px; border-radius:999px;
}
.pricing-card h3{font-size:1.1rem; margin:0 0 14px; color:var(--text);}
.pricing-amount{display:flex; flex-direction:column; margin-bottom:22px;}
.pricing-from{font-size:.8rem; color:var(--text-soft);}
.pricing-value{font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--text);}
.pricing-value small{font-size:.95rem; font-weight:500; color:var(--text-soft);}
.pricing-features{margin-bottom:26px; flex-grow:1;}
.pricing-features li{
  font-size:.88rem; color:var(--text-soft); padding:6px 0 6px 22px; position:relative;
}
.pricing-features li::before{
  content:'✓'; position:absolute; left:0; top:6px; color:var(--accent); font-weight:700; font-size:.8rem;
}
.pricing-note{
  text-align:center; max-width:680px; margin:0 auto; color:var(--text-soft-on-dark);
  font-size:.86rem; line-height:1.6;
}
.payment-conditions{
  max-width:560px; margin:38px auto 0;
  background:rgba(255,255,255,.06); border:1px solid var(--border-on-dark);
  border-radius:var(--radius-sm); padding:28px 30px; text-align:center;
}
.payment-conditions h3{font-size:1.02rem; color:#fff; margin:0 0 14px;}
.payment-conditions ul{margin:0 0 16px; padding:0; list-style:none;}
.payment-conditions li{
  font-size:.9rem; color:var(--text-soft-on-dark); line-height:1.6; margin-bottom:6px;
}
.payment-email{font-size:.92rem; font-weight:600; color:var(--accent);}

/* ---------- Portfolio Showcase (Home) ---------- */
.portfolio-showcase{
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; padding:90px 32px 80px;
}
.portfolio-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-bottom:46px;
}
.portfolio-grid-single{
  grid-template-columns:1fr; max-width:420px; margin-inline:auto;
}
.portfolio-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .35s ease, box-shadow .35s ease;
  opacity:0; transform:translateY(28px);
  animation:portfolio-reveal .7s ease forwards;
  animation-delay:var(--reveal-delay, 0ms);
}
.portfolio-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
}
@keyframes portfolio-reveal{
  to{ opacity:1; transform:translateY(0); }
}
.portfolio-card-media{
  position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(135deg, #C084A8, #E8C5D8);
}
.portfolio-card-media-placeholder{
  background:linear-gradient(135deg, #2563EB, #06B6D4);
}
.portfolio-card-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.portfolio-card-badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:#fff; letter-spacing:.05em;
}
.portfolio-card-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(15,23,42,.72); color:#fff; font-weight:600; font-size:.92rem;
  opacity:0; transition:opacity .3s ease;
}
.portfolio-card-media:hover .portfolio-card-overlay{opacity:1;}
.portfolio-card-body{padding:24px;}
.portfolio-card-body h3{font-size:1.1rem; margin:0 0 10px; color:var(--text);}
.portfolio-card-body p{font-size:.9rem; color:var(--text-soft); line-height:1.55; margin:0 0 16px;}
.portfolio-card-tags{display:flex; flex-wrap:wrap; gap:8px;}
.portfolio-card-tags span{
  font-size:.74rem; font-weight:600; color:var(--primary);
  background:rgba(37,99,235,.08); padding:5px 12px; border-radius:999px;
}
.portfolio-cta{text-align:center;}

/* ---------- Portfolio (legacy single-project page) ---------- */
.portfolio-section{
  position:relative; z-index:1;
  max-width:1100px; margin:0 auto; padding:10px 32px 70px;
}
.portfolio-feature{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:40px; box-shadow:var(--shadow-sm);
}
.portfolio-media-placeholder{
  width:100%; aspect-ratio:4/3; border-radius:14px;
  background:linear-gradient(135deg, #C084A8, #E8C5D8);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:3.4rem; font-weight:700; color:#fff;
  letter-spacing:.05em;
}
.portfolio-info h2{font-size:1.7rem; margin:8px 0 14px; color:var(--text);}
.portfolio-desc{color:var(--text-soft); line-height:1.65; font-size:.96rem; margin:0 0 20px;}
.portfolio-tags{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px;}
.portfolio-tags li{
  font-size:.78rem; font-weight:600; color:var(--primary);
  background:rgba(37,99,235,.08); padding:6px 14px; border-radius:999px;
}

/* ---------- Notre histoire ---------- */
.story-section{
  position:relative; z-index:1;
  max-width:760px; margin:0 auto; padding:20px 32px 70px;
}
.story-timeline{
  position:relative;
  display:flex; flex-direction:column; gap:42px;
}
.story-timeline::before{
  content:''; position:absolute; top:6px; bottom:6px; left:27px;
  width:2px; background:linear-gradient(180deg, var(--primary), var(--accent), var(--secondary));
  opacity:.35;
}
.story-step{
  position:relative;
  display:grid; grid-template-columns:56px 1fr; gap:22px; align-items:flex-start;
  opacity:0; transform:translateY(22px);
  animation:story-reveal .7s ease forwards;
  animation-delay:var(--reveal-delay, 0ms);
}
@keyframes story-reveal{ to{ opacity:1; transform:translateY(0); } }
.story-step-icon{
  position:relative; z-index:1;
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  color:var(--primary); box-shadow:var(--shadow-sm);
}
.story-step-icon svg{width:24px; height:24px;}
.story-step-tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px;
}
.story-step-content p{color:var(--text-soft-on-dark); line-height:1.7; font-size:.98rem; margin:0;}
.story-step-content em{color:#fff; font-style:italic;}
.story-step-quote .story-step-icon{color:var(--secondary);}
.story-quote{
  margin:0 0 16px; padding:18px 22px; border-left:3px solid var(--accent);
  background:rgba(255,255,255,.06); border-radius:0 12px 12px 0;
  font-family:var(--font-display); font-size:1.08rem; font-weight:600; color:#fff;
  line-height:1.5;
}

.story-mission{
  position:relative; z-index:1;
  background:var(--surface); padding:70px 32px;
}
.story-mission-inner{max-width:680px; margin:0 auto; text-align:center;}
.story-mission-inner h2{font-size:clamp(1.6rem, 2.4vw, 2.1rem); margin:10px 0 22px; color:var(--text);}
.story-mission-lead{font-size:1.05rem; font-weight:600; color:var(--text); line-height:1.6; margin:0 0 18px;}
.story-mission-inner p{color:var(--text-soft); line-height:1.7; font-size:.96rem; margin:0 0 18px;}
.story-values{
  display:flex; justify-content:center; gap:36px; margin:34px 0 30px; flex-wrap:wrap;
}
.story-value{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.86rem; font-weight:600; color:var(--text-soft);
}
.story-value svg{width:30px; height:30px; color:var(--primary);}
.story-closing{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  color:var(--secondary) !important; margin:0;
}

@media (max-width:980px){
  .detail-grid{grid-template-columns:repeat(2, 1fr);}
  .services-grid-4{grid-template-columns:repeat(2, 1fr);}
  .process-grid{grid-template-columns:repeat(2, 1fr);}
  .pricing-grid{grid-template-columns:1fr; max-width:420px; margin-inline:auto;}
  .portfolio-feature{grid-template-columns:1fr; padding:28px;}
  .portfolio-grid{grid-template-columns:1fr 1fr;}
  .portfolio-grid-single{grid-template-columns:1fr; max-width:420px;}
}
@media (max-width:560px){
  .detail-grid{grid-template-columns:1fr;}
  .services-grid-4{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  .detail-section, .process-section, .pricing-section, .portfolio-section, .portfolio-showcase, .cta-band{padding-left:18px; padding-right:18px;}
  .cta-band{padding:40px 24px;}
  .portfolio-grid{grid-template-columns:1fr;}
  .story-step{grid-template-columns:44px 1fr; gap:14px;}
  .story-step-icon{width:44px; height:44px;}
  .story-step-icon svg{width:20px; height:20px;}
  .story-timeline::before{left:21px;}
  .story-values{gap:22px;}
  .story-mission{padding:50px 18px;}
}
@media (max-width:1100px){
  .cards-grid{grid-template-columns:repeat(3, 1fr);}
  .trust-bar{flex-wrap:wrap; justify-content:center; gap:24px;}
}

@media (max-width:980px){
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .header-cta{display:none;}
  .hero-inner{text-align:center; gap:30px; align-items:center; padding-top:0;}
  .hero-content{align-items:center; max-width:100%;}
  .hero-title{text-align:center;}
  .hero-subtitle{margin-inline:auto; text-align:center;}
  .hero-divider{margin-inline:auto;}
  .page-hero{text-align:center; margin:0 auto;}
  .page-hero-inner{max-width:100%; margin-inline:auto;}
  .page-hero-sub{margin-inline:auto;}

  .main-nav.is-open{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:rgba(248,250,252,.98); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border); padding:14px 32px 24px; gap:16px;
  }
}

@media (max-width:760px){
  .cards-grid{grid-template-columns:1fr 1fr;}
  .field-row{flex-direction:column;}
}

@media (max-width:560px){
  .header-inner{padding:0 18px;}
  .hero{padding:calc(var(--header-h) + 36px) 18px 56px;}
  .hero-title{font-size:1.7rem;}
  .cards-section, .faq-section, .client-section, .contact-section{padding-left:18px; padding-right:18px;}
  .cards-grid{grid-template-columns:1fr;}
  .trust-bar{padding:22px;}
  .footer-inner{flex-direction:column; align-items:flex-start;}
}