@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   GALAXEOS — base commune (variables, reset, header, footer, sections partagées)
   Direction : « La constellation qu'ils gardent stable »
   Typo : Space Grotesk (titres) + Inter (corps) · Palette : marine + turquoise-signal
   ========================================================================== */

:root{
  /* --- 7 clés exactes --- */
  --color-primary:    #1E2B3F;  /* marine profond : titres, header, sections sombres */
  --color-accent:     #18B5C4;  /* turquoise-signal : CTA, liens, nœuds actifs */
  --color-background: #FFFFFF;  /* fond clair */
  --color-surface:    #F1F5FA;  /* gris bleuté froid : cartes, sections alternées */
  --color-text:       #17222F;  /* encre marine */
  --color-muted:      #5E6E82;  /* ardoise désaturée : texte secondaire */
  --color-border:     #D8E1EC;  /* filets, séparateurs */

  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --header-h: 76px;
  --maxw: 1180px;
  --radius: 12px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ overflow-x:hidden; }        /* garde-fou anti-débordement horizontal */
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-background);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-heading); font-weight:600; line-height:1.1; margin:0; letter-spacing:-.02em; }
h1{ font-size:clamp(2.4rem,5.4vw,4rem); }
h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
h3{ font-size:1.28rem; }
p{ margin:0 0 1rem; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ padding:clamp(64px,9vw,120px) 0; }
.eyebrow{
  font-family:var(--font-heading); font-weight:500; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--color-accent);
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem;
}
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%;
  background:var(--color-accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--color-accent) 22%,transparent); }
.lead{ font-size:1.15rem; color:var(--color-muted); max-width:56ch; }

/* --- Boutons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-heading); font-weight:500; font-size:.98rem;
  padding:.85rem 1.5rem; border-radius:10px; border:1px solid transparent;
  cursor:pointer; transition:transform .2s var(--ease), background .2s, box-shadow .2s;
  min-height:48px;
}
.btn-primary{ background:var(--color-accent); color:#07242a;
  box-shadow:0 8px 26px -10px color-mix(in srgb,var(--color-accent) 70%,transparent); }
.btn-primary:hover{ transform:translateY(-2px); background:color-mix(in srgb,var(--color-accent) 88%,white); }
.btn-ghost{ background:transparent; border-color:color-mix(in srgb,currentColor 34%,transparent); }
.btn-ghost:hover{ border-color:currentColor; }
.btn-light{ background:#fff; color:var(--color-primary); }
.btn-light:hover{ transform:translateY(-2px); }

/* --- Motif constellation (fond des sections sombres) --- */
.dark{ background:var(--color-primary); color:#EAF1F8; position:relative; overflow:hidden; }
.dark h1,.dark h2,.dark h3{ color:#fff; }
.dark .lead{ color:#A7B7CA; }
.starfield::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background-image:
    radial-gradient(circle at 12% 22%, var(--color-accent) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 16%, #6fd8e2 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 68% 74%, var(--color-accent) 0 2px, transparent 3px),
    radial-gradient(circle at 26% 82%, #ffffff 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 46% 40%, #ffffff 0 1px, transparent 2px),
    radial-gradient(circle at 92% 62%, var(--color-accent) 0 1.5px, transparent 2.5px);
  background-repeat:no-repeat;
}
.starfield::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:
    linear-gradient(to right, color-mix(in srgb,#fff 40%,transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb,#fff 40%,transparent) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 80% 10%, #000 0%, transparent 62%);
          mask-image:radial-gradient(120% 90% at 80% 10%, #000 0%, transparent 62%);
}
.dark .wrap{ position:relative; z-index:1; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--color-primary);
  border-bottom:1px solid color-mix(in srgb,#fff 10%,transparent);
  height:var(--header-h);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:100%; gap:1.5rem; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; flex-shrink:0; }
.brand img{ height:44px; width:auto; display:block; border-radius:6px; }
.main-nav{ display:flex; align-items:center; gap:.35rem; }
.main-nav a{
  font-family:var(--font-heading); font-weight:400; font-size:.96rem; color:#CBD8E6;
  padding:.55rem .85rem; border-radius:8px; transition:color .18s, background .18s;
}
.main-nav a:hover{ color:#fff; background:color-mix(in srgb,#fff 8%,transparent); }
.main-nav a.active{ color:#fff; }
.main-nav a.active::after{ content:""; display:block; height:2px; margin-top:3px; border-radius:2px;
  background:var(--color-accent); }
.header-cta{ display:flex; align-items:center; gap:1rem; }
.header-tel{ font-family:var(--font-heading); font-size:.95rem; color:#EAF1F8; white-space:nowrap; }
.header-tel:hover{ color:var(--color-accent); }

.burger{ display:none; background:none; border:0; cursor:pointer; padding:10px; margin:-10px;
  width:48px; height:48px; }
.burger span{ display:block; width:24px; height:2px; background:#fff; border-radius:2px; margin:5px auto; transition:.25s; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:#16212F; color:#AEBED0; padding:clamp(56px,7vw,84px) 0 2rem; }
.site-footer .cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.4rem; }
.site-footer h4{ font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:#8DA0B6;
  font-weight:500; margin-bottom:1.1rem; }
.site-footer a{ color:#AEBED0; transition:color .18s; }
.site-footer a:hover{ color:var(--color-accent); }
.footer-brand img{ height:52px; width:auto; margin-bottom:1rem; border-radius:6px; }
.footer-brand p{ font-size:.95rem; color:#8DA0B6; max-width:34ch; }
.footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.96rem; }
.footer-contact{ font-style:normal; font-size:.96rem; line-height:1.9; }
.footer-contact strong{ color:#EAF1F8; font-weight:600; }
.footer-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid color-mix(in srgb,#fff 8%,transparent); margin-top:2.8rem; padding-top:1.6rem;
  font-size:.85rem; color:#7B8DA3; }
.footer-bottom a{ color:#7B8DA3; }

/* ==========================================================================
   COMPOSANTS PARTAGÉS (réutilisés sur toutes les pages)
   ========================================================================== */
/* -- Bandeau d'en-tête de page interne -- */
.page-hero{ padding:clamp(64px,9vw,120px) 0 clamp(48px,6vw,72px); }
.page-hero h1{ max-width:18ch; margin:.4rem 0 1.1rem; }
.page-hero .lead{ max-width:60ch; }

/* -- Cartes "douleurs" / points -- */
.pain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.6rem; }
.pain{ background:var(--color-background); border:1px solid var(--color-border); border-radius:var(--radius);
  padding:1.5rem 1.4rem; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.pain:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -26px rgba(30,43,63,.4); border-color:color-mix(in srgb,var(--color-accent) 45%,var(--color-border)); }
.pain .num{ font-family:var(--font-heading); font-size:.8rem; letter-spacing:.12em; color:var(--color-accent);
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.7rem; }
.pain .num::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--color-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--color-accent) 20%,transparent); }
.pain h3{ font-size:1.08rem; margin-bottom:.4rem; }
.pain p{ margin:0; font-size:.95rem; color:var(--color-muted); }

/* -- Bande audit -- */
.audit-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.audit-card{ background:color-mix(in srgb,#fff 6%,transparent); border:1px solid color-mix(in srgb,#fff 14%,transparent);
  border-radius:16px; padding:2rem; }
.audit-list{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.audit-list li{ display:flex; gap:.8rem; align-items:flex-start; color:#DCE7F1; font-size:.98rem; }
.audit-list svg{ flex-shrink:0; margin-top:2px; }
.audit-badge{ display:inline-flex; gap:.5rem; align-items:center; font-family:var(--font-heading);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#07242a; background:var(--color-accent);
  padding:.35rem .8rem; border-radius:999px; margin-bottom:1.2rem; font-weight:600; }
.audit-meta{ margin-top:1.4rem; font-size:.85rem; color:#8DA0B6; }

/* -- Cartes services -- */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.6rem; }
.svc{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius);
  padding:1.7rem 1.5rem; display:flex; flex-direction:column; gap:.7rem;
  transition:transform .2s var(--ease), box-shadow .2s; }
.svc:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -28px rgba(30,43,63,.45); }
.svc-ico{ width:46px; height:46px; border-radius:11px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--color-accent) 14%,#fff); color:var(--color-primary); margin-bottom:.4rem; }
.svc h3{ font-size:1.14rem; }
.svc p{ margin:0; font-size:.95rem; color:var(--color-muted); }
.svc .more{ margin-top:auto; font-family:var(--font-heading); font-size:.9rem; color:var(--color-accent);
  font-weight:500; padding-top:.6rem; }
.svc ul{ margin:.2rem 0 0; padding-left:1.1rem; color:var(--color-muted); font-size:.93rem; }
.svc ul li{ margin-bottom:.35rem; }

/* -- Grille "pourquoi" / bénéfices -- */
.why-inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2rem; }
.why-item{ padding-left:1.4rem; border-left:2px solid var(--color-accent); }
.why-item h3{ font-size:1.1rem; margin-bottom:.4rem; }
.why-item p{ margin:0; font-size:.95rem; color:var(--color-muted); }

/* -- Logos / références -- */
.logos-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.2rem; }
.logo-chip{ display:grid; place-items:center; text-align:center; min-height:92px; padding:1rem;
  background:var(--color-background); border:1px solid var(--color-border); border-radius:var(--radius);
  font-family:var(--font-heading); font-weight:500; color:var(--color-primary); font-size:1.02rem; }
.logo-chip small{ display:block; color:var(--color-muted); font-family:var(--font-body); font-size:.8rem; font-weight:400; margin-top:.25rem; }
.partners{ margin-top:2.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.6rem; }
.partners span{ color:var(--color-muted); font-size:.85rem; letter-spacing:.04em; }
.partners b{ font-family:var(--font-heading); font-weight:500; color:var(--color-text); font-size:1rem; }

/* -- Étapes (vrai process → nœuds numérotés) -- */
.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.6rem; position:relative; }
.step{ position:relative; padding:1.8rem 1.5rem; background:color-mix(in srgb,#fff 5%,transparent);
  border:1px solid color-mix(in srgb,#fff 12%,transparent); border-radius:var(--radius); }
.step .dot{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-heading); font-weight:600; color:#07242a; background:var(--color-accent); margin-bottom:1rem;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--color-accent) 18%,transparent); }
.step h3{ color:#fff; font-size:1.12rem; margin-bottom:.4rem; }
.step p{ margin:0; color:#A7B7CA; font-size:.95rem; }

/* -- CTA final centré -- */
.finale{ text-align:center; }
.finale .wrap{ max-width:760px; }
.finale h2{ margin-bottom:1rem; }
.finale .lead{ margin:0 auto 2rem; }
.finale-actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

/* ==========================================================================
   MOBILE — une SEULE bascule listant TOUTES les grilles multi-colonnes
   (leçon L'Incanto : ne jamais éparpiller les media queries)
   ========================================================================== */
@media (max-width:900px){
  /* -- toutes les grilles repassent en 1 colonne -- */
  .site-footer .cols,
  .grid-2, .grid-3, .grid-4,
  .hero-inner, .audit-inner, .why-inner, .contact-inner,
  .pain-grid, .services-grid, .why-grid, .steps-grid, .split, .logos-grid{
    grid-template-columns:1fr !important;
  }

  /* -- nav → menu burger -- */
  .burger{ display:block; }
  .header-tel{ display:none; }
  .main-nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--color-primary); padding:1rem clamp(20px,5vw,40px) 1.6rem;
    border-bottom:1px solid color-mix(in srgb,#fff 12%,transparent);
    transform:translateY(-140%); transition:transform .3s var(--ease); box-shadow:0 24px 40px -24px #000;
  }
  .main-nav.open{ transform:translateY(0); }
  .main-nav a{ padding:.9rem .5rem; font-size:1.05rem; }
  .header-cta .btn{ display:none; }
}

/* --- Helpers intégration (fonds de section par classe au lieu d'inline, carte CTA services) --- */
.bg-surface{ background:var(--color-surface); }
.svc-highlight{ background:var(--color-primary); color:#EAF1F8; border-color:transparent; justify-content:center; }
.svc-highlight h3{ color:#fff; }
.svc-highlight p{ color:#A7B7CA; }