
:root,.arriereplanclair{--bg:#f7f9fc;--surface:#ffffff;--panel:#f1f5f9;--ink:#0b1220;--muted:#5b657a;--primary:#0ea5a5;--on-primary:#001218;--ring: rgba(14,165,165,.35);--shadow: 0 10px 30px rgba(2,6,23,.06)}
:root[data-theme="dark"],.arriereplansombre{--bg:#0b1020;--surface:#0f1428;--panel:#0c1222;--ink:#e7ecf6;--muted:#a2acc2;--primary:#22d3ee;--on-primary:#001018;--ring: rgba(34,211,238,.35);--shadow: 0 10px 30px rgba(0,0,0,.35)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.theme-transition *{transition: background-color 1.2s ease, color 1.2s ease, border-color 1.2s ease, box-shadow 1.2s ease}
body{margin:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";color:var(--ink);background:var(--bg);line-height:1.6;min-height:100vh}
#bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
.bg-layer{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease}
.bg-light{background-image:url('arriereplanclair.png')}
.bg-dark{background-image:url('arriereplansombre.png')}
:root[data-theme="light"] .bg-light, .arriereplanclair .bg-light{opacity:1}
:root[data-theme="dark"] .bg-dark, .arriereplansombre .bg-dark{opacity:1}
#bg.bg-animate .bg-layer{transform:scale(1.03);filter:saturate(1.08)}

.container{max-width:1040px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.skip-link{position:fixed;left:50%;transform:translate(-50%,-200%);top:10px;background:#000;color:#fff;padding:.6rem 1rem;border-radius:999px;z-index:1000}
.skip-link:focus{transform:translate(-50%,0)}

.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid rgba(2,6,23,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.2px}
.brand-name{font-family:"Plus Jakarta Sans", Inter, sans-serif}
nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-link{padding:.55rem .8rem;border-radius:10px;opacity:.95}
.nav-link:hover{background:var(--panel)}
.nav-link.active{outline:1px solid var(--ring); background:rgba(255,255,255,.06)}

.theme-toggle{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-radius:12px;border:1px solid rgba(2,6,23,.12);background:var(--surface);box-shadow:var(--shadow);font-weight:700;cursor:pointer}
.theme-toggle .icon-sun{display:inline-block}
.theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:inline-block}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1rem;border-radius:12px;border:1px solid rgba(2,6,23,.16);background:var(--surface);box-shadow:var(--shadow);font-weight:700;color:var(--ink)}
.btn:hover{box-shadow:0 8px 24px rgba(2,6,23,.08)}
.btn.primary{background:linear-gradient(180deg, var(--primary), var(--primary));color:var(--on-primary);border-color:transparent}
.btn.ghost{background:transparent;border:1px solid rgba(2,6,23,.20)}
.btn.small{padding:.55rem .8rem;font-weight:700}

.hero{padding:64px 0 24px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.eyebrow{display:inline-block;padding:.3rem .6rem;border-radius:999px;background:rgba(0,0,0,.06);border:1px solid rgba(14,165,165,.25);color:#0b3a3a;font-weight:700}
:root[data-theme="dark"] .eyebrow{background:rgba(255,255,255,.08);color:#bfe8ea}

.headline{color:var(--ink);font-family:"Plus Jakarta Sans", Inter, sans-serif;font-size:clamp(36px,6vw,56px);line-height:1.05;margin:12px 0 10px 0;letter-spacing:.2px}


.headline{color:var(--ink);font-family:"Plus Jakarta Sans", Inter, sans-serif;font-size:clamp(36px,6vw,56px);line-height:1.05;margin:12px 0 10px 0;letter-spacing:.2px}


.lead{color:var(--muted);font-size:1.05rem}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0 0;padding:0;list-style:none}
.pill{padding:.35rem .7rem;border-radius:999px;background:rgba(0,0,0,.06);border:1px solid rgba(2,6,23,.06);font-weight:600;color:#123}
:root[data-theme="dark"] .pill{background:rgba(255,255,255,.08);color:#d8e7ff;border-color:rgba(255,255,255,.12)}

.hero-aside{display:grid;gap:12px}
.stat{display:grid;gap:2px}
.stat-value{font-weight:800;font-size:1.6rem}
.stat-label{color:var(--muted)}

section{padding:48px 0;border-top:1px solid rgba(2,6,23,.06)}
.page-hero{padding:56px 0 12px}
.center{text-align:center}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.card{background:var(--surface);border:1px solid rgba(2,6,23,.06);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.two-col{display:grid;grid-template-columns:1.4fr .8fr;gap:20px;align-items:start}
.note p{color:var(--muted)}

.list{padding-left:18px;margin:8px 0 0 0}
.list li{margin:6px 0}
.meta{list-style:none;padding:0;margin:0 0 8px 0;display:flex;gap:12px;flex-wrap:wrap;color:var(--muted)}

.steps{display:grid;gap:16px;max-width:760px}
.step{display:grid;grid-template-columns:38px 1fr;gap:12px}
.num{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(0,0,0,.06);border:1px solid rgba(14,165,165,.3);font-weight:800;color:#0b3a3a}
:root[data-theme="dark"] .num{background:rgba(255,255,255,.08);color:#bfe8ea}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.price-tag{font-weight:800;font-size:1.2rem}
.price.highlight{outline:2px solid var(--ring)}

.cta-center{display:flex;justify-content:center;margin-top:16px}

.contact{display:grid;grid-template-columns:1fr .9fr;gap:16px}
label{display:grid;gap:6px;font-weight:600}
input, textarea, select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(2,6,23,.12);
  background:#fff;color:#0b1220;outline:none;transition:border-color .25s ease, box-shadow .25s ease
}
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select{
  background:#0f172a;color:#e7ecf6;border-color:rgba(255,255,255,.12)
}
input:focus, textarea:focus, select:focus{border-color:var(--ring);box-shadow:0 0 0 4px var(--ring)}
textarea{min-height:140px;resize:vertical}
.note{color:var(--muted);font-size:.95rem}
.form-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.cases{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.case h3{margin:0 0 4px 0}

.site-footer{border-top:1px solid rgba(2,6,23,.06);padding:28px 0;color:var(--muted)}
.footer-inner{display:grid;gap:12px}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-brand strong{color:var(--ink)}
.foot-copy{font-size:.95rem}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .two-col{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}



/* Safe gradient titles: default solid text, gradient only when supported AND correctly split */


/* Case 1: SplitType active (.is-split) — apply gradient per-character/word (no background rectangles) */



/* Case 2: Not split — apply gradient on the element itself */



/* Robust dark-theme overrides (works if `
[data-theme="dark"]

/* SAFETY: if someone adds `.can-gradient` on a wrapper, keep solid text */
.can-gradient:not(html) .headline,
.can-gradient:not(html) .headline .char,
.can-gradient:not(html) .headline .word{background:none !important;-webkit-text-fill-color:initial !important;color:var(--ink) !important}

/* JS-controlled gradient: only when <html> has .grad-ok */
html.grad-ok .headline.is-split .char,
html.grad-ok .headline.is-split .word{
  background:linear-gradient(90deg,#0b1220,#1f2a44);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent
}
html.grad-ok[data-theme="dark"] .headline.is-split .char,
html.grad-ok[data-theme="dark"] .headline.is-split .word{
  background:linear-gradient(90deg,#cfe7ff,#aee9ff)
}
html.grad-ok .headline:not(.is-split){
  background:linear-gradient(90deg,#0b1220,#1f2a44);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent
}
html.grad-ok[data-theme="dark"] .headline:not(.is-split){
  background:linear-gradient(90deg,#cfe7ff,#aee9ff)
}

/* Force solid titles everywhere (kill any gradient/transparent text) */
.headline,
.headline .char,
.headline .word{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--ink) !important;
}
:root[data-theme="dark"] .headline,
:root[data-theme="dark"] .headline .char,
:root[data-theme="dark"] .headline .word{
  color:var(--ink) !important;
}

/* === Mobile navbar enhancements (non-intrusive) === */
.nav-toggle{display:none}
@media (max-width: 860px){
  .header-inner{gap:8px}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:12px;border:1px solid var(--panel);
    background:var(--surface);box-shadow:var(--shadow);
  }
  .nav-toggle .bar{display:block;width:18px;height:2px;margin:2px 0;background:currentColor;transition:transform .2s ease,opacity .2s ease}
  /* Turn the inline nav into a sheet */
  .site-header nav{
    position:fixed;top:64px;right:16px;left:16px;z-index:60;
    background:var(--surface);border:1px solid var(--panel);border-radius:16px;
    padding:12px;display:none;flex-direction:column;gap:6px;box-shadow:var(--shadow)
  }
  .site-header nav .nav-link{display:block;padding:.9rem 1rem;border-radius:12px}
  html.nav-open .site-header nav{display:flex}
  /* Backdrop and scroll lock */
  html.nav-open::before{content:"";position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.28);backdrop-filter:blur(1px)}
  html.nav-open body{overflow:hidden}
  /* Animate burger into an X */
  html.nav-open .nav-toggle .bar:nth-child(2){opacity:0}
  html.nav-open .nav-toggle .bar:nth-child(1){transform:translateY(4px) rotate(45deg)}
  html.nav-open .nav-toggle .bar:nth-child(3){transform:translateY(-4px) rotate(-45deg)}
}

/* === Glass effect for LIGHT mode on content boxes ===
   Applies a translucent, blurred background to .card elements
   without changing forms or buttons. */
@media (prefers-color-scheme: light) {
  .card {
    background: rgba(255,255,255,0.45) !important;
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border: 1px solid rgba(2,6,23,0.06);
  }
}

/* Also support explicit light theme toggles used by the site */
:root[data-theme="light"] .card,
.arriereplanclair .card {
  background: rgba(255,255,255,0.45) !important;
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid rgba(2,6,23,0.06);
}

/* === Mobile-only: éviter que le logo "Aurea Nexus" et le bouton touchent les bords === */
@media (max-width: 640px) {
  /* Plus d’air sur les côtés + support encoche/iPhone */
  .site-header .container {
    padding-left: max(24px, calc(env(safe-area-inset-left, 0px) + 12px));
    padding-right: max(24px, calc(env(safe-area-inset-right, 0px) + 12px));
  }

  /* Feuille du menu mobile: respecter les safe areas */
  .site-header nav {
    left: calc(env(safe-area-inset-left, 0px) + 16px);
    right: calc(env(safe-area-inset-right, 0px) + 16px);
  }
}
/* =========================================================
   VISIBILITÉ — BURGER & BOUTON THÈME (PC + mobile)
   (n’écrase pas la logique d’affichage: le burger reste
   visible uniquement là où le site l’affiche déjà)
   ========================================================= */

/* ---------- BURGER ( .nav-toggle ) ---------- */

/* Style clair */
:root:not([data-theme="dark"]) .nav-toggle {
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(2,6,23,.18);
  color: #0b1220; /* rend les barres bien visibles */
  box-shadow: var(--shadow);
}

/* Style sombre */
:root[data-theme="dark"] .nav-toggle,
.arriereplansombre .nav-toggle {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  color: rgba(255,255,255,.96);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* Hover / Focus */
.nav-toggle:hover {
  filter: saturate(1.05);
}
:root:not([data-theme="dark"]) .nav-toggle:hover {
  background: rgba(255,255,255,.9);
}
:root[data-theme="dark"] .nav-toggle:hover,
.arriereplansombre .nav-toggle:hover {
  background: rgba(255,255,255,.20);
}
.nav-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring, rgba(255,255,255,.28)), var(--shadow);
}

/* S’assure que les 3 barres suivent la couleur du bouton */
.nav-toggle .bar { background: currentColor; }

/* Confort mobile : zone cliquable >= 44px */
@media (max-width: 640px){
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------- BOUTON THÈME ( #theme-toggle ) ---------- */

#theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:.5rem .6rem;
  border-radius:10px;
  border:1px solid rgba(2,6,23,.18);
  background: rgba(255,255,255,.6);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  color: var(--ink);
}
#theme-toggle svg{
  width:18px; height:18px; flex:0 0 auto;
  stroke: currentColor; fill: none;
}

/* Hover/Focus clair */
:root:not([data-theme="dark"]) #theme-toggle:hover,
.arriereplanclair #theme-toggle:hover{ background: rgba(255,255,255,.8); }
:root:not([data-theme="dark"]) #theme-toggle:focus-visible,
.arriereplanclair #theme-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring, rgba(2,6,23,.25));
}

/* Sombre */
:root[data-theme="dark"] #theme-toggle,
.arriereplansombre #theme-toggle{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.24);
  color: rgba(255,255,255,.96);
}
:root[data-theme="dark"] #theme-toggle:hover,
.arriereplansombre #theme-toggle:hover{ background: rgba(255,255,255,.18); }
:root[data-theme="dark"] #theme-toggle:focus-visible,
.arriereplansombre #theme-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring, rgba(255,255,255,.30));
}

/* Confort mobile */
@media (max-width: 640px){
  #theme-toggle{
    min-width: 44px;
    min-height: 44px;
    padding: .65rem .7rem;
  }
}
/* ===========================
   PC UNIQUEMENT — Thème toggle
   =========================== */
@media (min-width: 861px){

  /* 1) En mode sombre, lune bien blanche */
  :root[data-theme="dark"] #theme-toggle .icon-moon{
    color: #fff !important;   /* icône SVG utilise stroke: currentColor */
    /* Optionnel: lune un peu plus "épaisse" */
    stroke-width: 2 !important;
  }

  /* (Optionnel) En mode clair, garder un soleil bien visible */
  :root:not([data-theme="dark"]) #theme-toggle .icon-sun{
    color: #0b1220 !important;
  }

  /* 2) Contours du bouton plus marqués */
  #theme-toggle{
    border-width: 2px; /* plus present sur desktop */
  }

  /* Clair: bord plus sombre, léger relief */
  :root:not([data-theme="dark"]) #theme-toggle{
    border-color: rgba(2,6,23,.40);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
  }

  /* Sombre: bord plus clair + un peu de profondeur */
  :root[data-theme="dark"] #theme-toggle{
    border-color: rgba(255,255,255,.55);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08) inset,
      0 8px 24px rgba(0,0,0,.5);
  }

  /* Hover / Focus (desktop) */
  #theme-toggle:hover{
    filter: saturate(1.05);
  }
  #theme-toggle:focus-visible{
    outline: none;
    box-shadow:
      0 0 0 3px var(--ring, rgba(255,255,255,.32)),
      0 8px 24px rgba(0,0,0,.45);
  }
}
/* Desktop uniquement : lune du bouton thème bien blanche */
@media (min-width: 861px){
  :root[data-theme="dark"] #theme-toggle .icon-moon,
  .arriereplansombre #theme-toggle .icon-moon{
    color: #fff !important;   /* l’icône utilise currentColor */
    stroke: #fff !important;  /* ceinture et bretelles */
    fill: none !important;
  }
}
/* ============================
   PC uniquement : lune blanche
   ============================ */
/* On cible les écrans desktop OU les pointeurs "souris" (fenêtre étroite sur PC incluse) */
@media (min-width: 861px), (hover: hover) and (pointer: fine) {

  /* 1) En mode sombre, forcer la lune en blanc (et la couleur du bouton) */
  :root[data-theme="dark"] #theme-toggle,
  html.arriereplansombre #theme-toggle {
    color: #fff !important; /* currentColor = blanc pour l'icône */
  }

  :root[data-theme="dark"] #theme-toggle .icon-moon,
  html.arriereplansombre #theme-toggle .icon-moon,
  :root[data-theme="dark"] #theme-toggle .icon-moon *,
  html.arriereplansombre #theme-toggle .icon-moon * {
    stroke: #fff !important;   /* force le trait blanc */
    color: #fff !important;    /* ceinture et bretelles */
    fill: none !important;     /* on garde un pictogramme creux */
  }

  /* 2) (Optionnel) Renforcer le contour du bouton sur PC */
  #theme-toggle { border-width: 2px; }
  :root[data-theme="dark"] #theme-toggle,
  html.arriereplansombre #theme-toggle {
    border-color: rgba(255,255,255,.65) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 24px rgba(0,0,0,.45);
  }
}

/* Patch 2025-08-14 : PC uniquement — lune blanche en mode sombre (couverture des éléments enfants SVG) */
@media (min-width: 861px){
  :root[data-theme="dark"] #theme-toggle .icon-moon,
  .arriereplansombre #theme-toggle .icon-moon,
  :root[data-theme="dark"] #theme-toggle .icon-moon *,
  .arriereplansombre #theme-toggle .icon-moon *{
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }
}

/* Patch 2025-08-14 v2 : PC uniquement — lune pleine blanche en mode sombre (cible le <path>) */
@media (min-width: 861px){
  :root[data-theme="dark"] #theme-toggle .icon-moon path,
  .arriereplansombre #theme-toggle .icon-moon path{
    fill: #fff !important;
    stroke: none !important;
  }
}

/* Patch 2025-08-14 v3 : override direct sur le SVG (desktop + dark) */
@media (min-width: 861px){
  :root[data-theme="dark"] #theme-toggle .icon-moon,
  .arriereplansombre #theme-toggle .icon-moon{
    /* On force le SVG entier au blanc */
    color: #fff !important;   /* pour stroke: currentColor fallback */
  }
  :root[data-theme="dark"] #theme-toggle .icon-moon path,
  .arriereplansombre #theme-toggle .icon-moon path{
    fill: #fff !important;
    stroke: none !important;
  }
  :root[data-theme="dark"] #theme-toggle svg.icon-moon,
  .arriereplansombre #theme-toggle svg.icon-moon{
    fill: #fff !important;
    stroke: none !important;
  }
}
