/* =========================================================
   Start Consulting — Feuille de style unique
   Thème clair, mobile-first, accessible
   ========================================================= */

:root{
  --bg:        #F7F8FC;
  --surface:   #FFFFFF;
  --text:      #0B0D12;
  --muted:     #525A6B;
  --line:      rgba(11,13,18,.12);
  --line-soft: rgba(11,13,18,.08);

  --accent:  #6C4CFF;
  --accent2: #14C2C8;

  --shadow:    0 18px 50px rgba(10,14,25,.10);
  --shadow-sm: 0 8px 24px rgba(10,14,25,.06);

  --radius:  16px;
  --radius2: 24px;
  --container: 1120px;
  --header-h: 72px;
}

@font-face{
  font-family:"Montserrat";
  src:url("/font/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("/font/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight:100 900; font-style:italic; font-display:swap;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  padding-top:var(--header-h);
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:400;
  color:var(--text);
  background:
    radial-gradient(900px 420px at 8% -5%, rgba(108,76,255,.12), transparent 60%),
    radial-gradient(900px 420px at 95% 8%, rgba(20,194,200,.10), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{ margin:0 0 10px; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
h1{ font-size:clamp(34px,5vw,60px); font-weight:800; line-height:1.05; }
h2{ font-size:clamp(26px,3.2vw,40px); }
h3{ font-size:19px; }
p{ margin:0 0 4px; }

.lead{ font-size:clamp(16px,1.6vw,19px); color:var(--muted); max-width:60ch; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }
.center{ text-align:center; }
.center-lead{ margin-left:auto; margin-right:auto; }

.container{ width:min(var(--container), calc(100% - 40px)); margin-inline:auto; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--text); color:#fff; padding:10px 16px; border-radius:0 0 12px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid rgba(108,76,255,.45); outline-offset:2px; border-radius:6px; }

/* ---------- Sections spacing ---------- */
section{ padding:56px 0; }
.sectionHead{ margin:0 0 24px; }
.sectionHead--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; }

/* ---------- Pills / badges ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface);
  font-size:13px; font-weight:600; box-shadow:var(--shadow-sm);
}
.badge{
  display:inline-flex; padding:6px 12px; border-radius:999px;
  background:rgba(108,76,255,.12); border:1px solid rgba(108,76,255,.20);
  font-size:12px; font-weight:600; color:var(--accent);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:46px; padding:0 20px; border-radius:999px;
  font-size:15px; font-weight:700; line-height:1; white-space:nowrap; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn__icon{ width:18px; height:18px; flex:0 0 18px; }
.btn--primary{
  background:linear-gradient(135deg, var(--accent2), var(--accent));
  color:#fff; border-color:transparent;
  box-shadow:0 12px 28px rgba(108,76,255,.28);
}
.btn--primary:hover{ box-shadow:0 18px 40px rgba(108,76,255,.36); filter:brightness(1.05); }
.btn--ghost{ background:transparent; }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.full{ width:100%; }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(247,248,252,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:transform .25s ease;
}
.header--hidden{ transform:translateY(-100%); }
.header__inner{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:16px; }

.logo{ display:flex; align-items:center; }
.logo__img{ height:36px; width:auto; }

.nav{ display:flex; align-items:center; gap:22px; }
.nav__group{ position:relative; display:flex; align-items:center; }
.nav__link,.nav__trigger{
  appearance:none; background:transparent; border:0; padding:0; margin:0;
  font:inherit; font-weight:600; color:var(--text); opacity:.82; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; line-height:1; white-space:nowrap;
  transition:opacity .2s ease, color .2s ease;
}
.nav__link:hover,.nav__trigger:hover{ opacity:1; color:var(--accent); }
.nav__chev{ width:12px; height:12px; opacity:.8; transition:transform .2s ease; pointer-events:none; }

/* "pont" invisible pour le hover */
.nav__group::after{ content:""; position:absolute; left:0; top:100%; width:340px; height:14px; }

.dropdown{
  position:absolute; left:0; top:calc(100% + 12px);
  width:340px; padding:10px; display:none; z-index:120;
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow);
}
.nav__group:hover .dropdown,
.nav__group.is-open .dropdown{ display:block; }
.nav__group:hover .nav__chev,
.nav__group.is-open .nav__chev{ transform:rotate(180deg); }

.dropdown__item{ display:block; padding:12px 14px; border-radius:12px; border:1px solid transparent; transition:background .15s ease, border-color .15s ease; }
.dropdown__item:hover{ background:rgba(108,76,255,.07); border-color:rgba(108,76,255,.18); }
.dropdown__title{ display:block; font-weight:700; }
.dropdown__desc{ display:block; font-size:13px; color:var(--muted); margin-top:3px; }

.header__actions{ display:flex; align-items:center; gap:12px; }

.burger{
  display:none; width:46px; height:46px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Menu mobile */
.mobile{ border-top:1px solid var(--line-soft); background:rgba(247,248,252,.97); backdrop-filter:blur(14px); }
.mobile[hidden]{ display:none; }
.mobile__inner{ padding:16px 0 22px; display:grid; gap:8px; }
.mobile__inner a:not(.btn){ padding:13px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line-soft); font-weight:600; }
.mobile__cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.mobile__cta .btn{ flex:1; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding:clamp(32px,6vw,72px) 0; }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center; }
.kicker{
  display:inline-flex; padding:8px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  color:var(--accent); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px;
}
.accent{ background:linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.hero__proof{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }

.hero__visual{ width:100%; max-width:440px; margin-left:auto; }
.hero__mockup{ border-radius:22px; overflow:hidden; box-shadow:var(--shadow); }
.hero__mockup img{ width:100%; transition:transform .3s ease; }
.hero__mockup:hover img{ transform:translateY(-6px); }
.glass{
  margin-top:18px; padding:22px; border-radius:18px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
}
.glass__title{ font-weight:800; font-size:18px; margin:0 0 6px; }
.glass__text{ margin:0 0 14px; color:var(--muted); font-size:14px; }

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews__head{ max-width:760px; margin:0 auto 28px; }
.reviews__summary{
  display:inline-flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap;
  padding:12px 18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm);
}
.reviews__score{ font-size:26px; font-weight:800; }
.reviews__stars{ font-size:18px; letter-spacing:2px; color:#FFB400; }
.star{ opacity:.25; }
.star.isOn{ opacity:1; color:#FFB400; }

.reviews__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:8px; }
.reviewCard{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow-sm); }
.reviewCard__stars{ color:#FFB400; font-size:16px; letter-spacing:2px; margin-bottom:8px; }
.reviewCard__title{ font-size:16px; margin:0 0 8px; }
.reviewCard__text{ margin:0 0 12px; font-size:14px; }
.reviewCard__meta{ margin:0; font-size:13px; }
.reviews__actions{ display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }

/* =========================================================
   ABOUT / STATS
   ========================================================= */
.about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.about__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.stat{ padding:22px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.stat__num{ font-weight:800; font-size:30px; color:var(--accent); }
.stat__label{ color:var(--muted); font-size:13px; margin-top:4px; }

/* =========================================================
   CARDS (expertises / stack / process)
   ========================================================= */
.gridCards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card{ display:block; padding:24px; border-radius:var(--radius2); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); color:inherit; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card:hover .card__link{ gap:8px; }
.card p{ margin:8px 0 0; color:var(--muted); }
.card__link{ display:inline-block; margin-top:16px; font-weight:700; color:var(--accent); }

.stack__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.miniCard{ padding:20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.miniCard p{ margin:8px 0 0; color:var(--muted); font-size:14px; }

.process__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:step; }
.processCard{ position:relative; padding:24px; border-radius:var(--radius2); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.processCard__step{ display:inline-flex; font-size:14px; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--accent2), var(--accent)); width:38px; height:38px; align-items:center; justify-content:center; border-radius:12px; margin-bottom:14px; }
.processCard p{ margin:6px 0 0; }

/* =========================================================
   PROJECTS
   ========================================================= */
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filter{ padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-weight:600; cursor:pointer; transition:all .15s ease; }
.filter:hover{ border-color:var(--accent); color:var(--accent); }
.filter.is-active{ background:rgba(108,76,255,.12); border-color:rgba(108,76,255,.3); color:var(--accent); }

.projectGrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.project{ border-radius:var(--radius2); background:var(--surface); border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.project:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.project__thumb{ display:block; width:100%; height:210px; background:#EEF0F7; }
.project__meta{ padding:18px; }
.project__meta p{ margin:8px 0 0; color:var(--muted); }
.project__meta h3{ margin:8px 0 0; }

/* =========================================================
   CTA
   ========================================================= */
.cta__box{
  border-radius:var(--radius2); padding:32px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(108,76,255,.10), rgba(20,194,200,.10)), var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.cta__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* =========================================================
   BLOG
   ========================================================= */
.blog__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.post{ display:block; border-radius:var(--radius2); background:var(--surface); border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow-sm); color:inherit; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.post:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.post__thumb{ display:block; width:100%; height:170px; background:#EEF0F7; }
.post__meta{ padding:18px; }
.post__meta h3{ margin:10px 0 0; font-size:17px; }
.post__meta p{ margin:8px 0 0; }
.post .card__link{ margin-top:14px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:28px; align-items:start; }
.accordion details{ border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.accordion summary{ cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{ content:"+"; font-size:22px; color:var(--accent); line-height:1; }
.accordion details[open] summary::after{ content:"–"; }
.accordion p{ margin:12px 0 0; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.contact__cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:20px; }
.infoCard{ padding:16px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .15s ease, border-color .15s ease; }
.infoCard:hover{ transform:translateY(-2px); border-color:var(--accent); }
.infoCard__title{ font-weight:700; margin-bottom:4px; }

.form{ padding:24px; border-radius:var(--radius2); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form label{ display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--text); }
.form input,.form select,.form textarea{
  width:100%; padding:13px 14px; border-radius:12px; font:inherit;
  border:1px solid var(--line); background:#FbFbFe; color:var(--text); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(108,76,255,.14); }
.form .full{ grid-column:1 / -1; }
.form .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form--success{ display:block; }
.form__error{ color:#C0392B; font-weight:600; margin:0; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ padding:48px 0; border-top:1px solid var(--line); background:var(--surface); }
.footer__top{ display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:28px; align-items:start; }
.footer__brand .logo{ margin-bottom:12px; }
.footer__nav{ display:grid; gap:10px; }
.footer__nav a{ color:var(--muted); font-weight:600; }
.footer__nav a:hover{ color:var(--accent); }
.footer__cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.footer__bottom{ margin-top:28px; padding-top:20px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:14px; }
.footer__legal{ display:flex; gap:16px; flex-wrap:wrap; }

/* =========================================================
   WHATSAPP FLOAT
   ========================================================= */
.whatsapp-float{ position:fixed; bottom:22px; right:22px; width:54px; height:54px; z-index:150; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease, transform .2s ease; }
.whatsapp-float.is-visible{ opacity:1; }
.whatsapp-float img{ width:100%; height:100%; filter:drop-shadow(0 6px 16px rgba(0,0,0,.22)); transition:transform .2s ease; }
.whatsapp-float:hover img{ transform:scale(1.08); }

/* =========================================================
   HERO LOAD ANIMATION
   ========================================================= */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }
.hero .hero__content > *, .hero .hero__visual > *{ opacity:0; }
.hero.is-loaded .hero__content > *{ animation:fadeUp .7s ease-out forwards; }
.hero.is-loaded .hero__visual > *{ animation:fadeUp .7s ease-out forwards; }
.hero.is-loaded .hero__content > *:nth-child(1){ animation-delay:.05s; }
.hero.is-loaded .hero__content > *:nth-child(2){ animation-delay:.13s; }
.hero.is-loaded .hero__content > *:nth-child(3){ animation-delay:.21s; }
.hero.is-loaded .hero__content > *:nth-child(4){ animation-delay:.29s; }
.hero.is-loaded .hero__content > *:nth-child(5){ animation-delay:.37s; }
.hero.is-loaded .hero__visual > *:nth-child(1){ animation-delay:.18s; }
.hero.is-loaded .hero__visual > *:nth-child(2){ animation-delay:.30s; }

/* =========================================================
   SUBPAGES (expertises)
   ========================================================= */
.breadcrumb{ font-size:14px; color:var(--muted); margin-bottom:14px; }
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb span[aria-hidden]{ margin:0 6px; opacity:.6; }

.subpage-hero{
  padding:64px 0 40px;
  background:linear-gradient(135deg, rgba(108,76,255,.08), rgba(20,194,200,.07)), var(--surface);
  border-bottom:1px solid var(--line);
}
.subpage-hero h1{ margin:6px 0 14px; }
.subpage-hero .lead{ max-width:60ch; }
.center-lead{ margin-left:auto; margin-right:auto; }

.subpage-block{ padding:56px 0; }
.subpage-block + .subpage-block{ border-top:1px solid var(--line); }

.article-meta{ font-size:14px; margin:0 0 16px; }
.article-meta span{ margin:0 6px; opacity:.6; }
.article-body{ max-width:760px; }
.article-body h2{ margin:36px 0 12px; }
.article-body h2:first-child{ margin-top:0; }
.article-body p{ margin:0 0 14px; line-height:1.7; color:var(--text); }
.article-body .checklist{ margin:8px 0 22px; }

.checklist{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
.checklist li{ position:relative; padding-left:34px; color:var(--text); line-height:1.5; }
.checklist li::before{
  content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent2), var(--accent));
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/16px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/16px no-repeat;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .nav, .header__actions .btn{ display:none; }
  .header__actions .burger{ display:flex; }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ margin:0 auto; }
  .about__grid{ grid-template-columns:1fr; }
  .gridCards{ grid-template-columns:1fr 1fr; }
  .stack__grid{ grid-template-columns:repeat(2,1fr); }
  .process__grid{ grid-template-columns:repeat(2,1fr); }
  .projectGrid{ grid-template-columns:1fr; }
  .reviews__grid{ grid-template-columns:repeat(2,1fr); }
  .blog__grid{ grid-template-columns:1fr; }
  .faq__grid{ grid-template-columns:1fr; }
  .checklist{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__cta{ justify-content:flex-start; }
}
@media (max-width:560px){
  section{ padding:44px 0; }
  .gridCards{ grid-template-columns:1fr; }
  .stack__grid{ grid-template-columns:1fr; }
  .process__grid{ grid-template-columns:1fr; }
  .reviews__grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .contact__cards{ grid-template-columns:1fr; }
  .cta__box{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .hero .hero__content > *, .hero .hero__visual > *{ opacity:1 !important; }
}