:root{
  --navy:#030F25;
  --blue:#0089E6;
  --blue-700:#0068B3;
  --bg:#F6F8FC;
  --surface:#FFFFFF;
  --border:#E5E9F1;
  --border-strong:#D3DAE6;
  --text:#0B1120;
  --text-dim:#5B6478;
  --text-faint:#8C93A6;

  --p-blue-bg:#E2F0FF;   --p-blue-tx:#0B63B0;
  --p-teal-bg:#DFF6EE;   --p-teal-tx:#0E7C5D;
  --p-amber-bg:#FFF2D6;  --p-amber-tx:#8A5B00;
  --p-coral-bg:#FFE3DE;  --p-coral-tx:#C23B26;

  --font-display:'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ui:'Inter', system-ui, sans-serif;

  --radius-md:10px; --radius-lg:16px; --radius-xl:22px; --radius-full:999px;
  --t-base:250ms; --t-slow:420ms; --ease-out:cubic-bezier(.2,0,0,1);
  --t-nav-out:560ms; --t-nav-hold:380ms; --t-nav-in:460ms;

  --shadow-sm:0 1px 2px rgba(3,15,37,.06);
  --shadow-md:0 8px 24px -8px rgba(3,15,37,.14), 0 2px 8px rgba(3,15,37,.06);
  --shadow-lg:0 24px 60px -18px rgba(3,15,37,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}

/* ============ FOND ANIMÉ ============
   Reprend la grille de points déjà utilisée dans le hero et les maquettes, étendue à toute la page.
   Fixe à l'écran (ne défile pas avec le contenu) et anime très lentement en diagonale : un effet
   d'ambiance discret, pas un décor qu'on remarque consciemment. Derrière tout (z-index:-1) : les
   cartes, panneaux et le footer sont opaques et le recouvrent sans rien changer visuellement pour eux.
   Un léger dégradé radial (mask-image) l'estompe vers les bords, pour un rendu moins uniforme/plat. */
body::before{
  content:"";
  position:fixed;
  inset:-4% ;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(circle, var(--border-strong) 1.3px, transparent 1.3px);
  background-size:28px 28px;
  opacity:.85;
  -webkit-mask-image:radial-gradient(ellipse 100% 90% at 50% 35%, #000 60%, transparent 100%);
  mask-image:radial-gradient(ellipse 100% 90% at 50% 35%, #000 60%, transparent 100%);
}
@media (prefers-reduced-motion:no-preference){
  body::before{ animation:bgDrift 130s linear infinite; }
}
@keyframes bgDrift{
  0%  { background-position:0 0; }
  50% { background-position:120px 70px; }
  100%{ background-position:0 0; }
}
@media (max-width:640px){
  body::before{ background-size:22px 22px; opacity:.5; }
}
img{max-width:100%;display:block}
.wrap{margin:0 auto;padding:0 32px}
a{color:inherit}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}
.skip-link:focus{left:16px;top:16px}

h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0;color:var(--navy)}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  height:48px;padding:0 24px;border-radius:var(--radius-lg);
  font:600 15px var(--font-ui);text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px -10px rgba(0,137,230,.55)}
.btn-primary:hover{background:var(--blue-700);transform:translateY(-2px)}
.btn-outline{background:var(--surface);color:var(--navy);border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-sm{height:44px;padding:0 20px;font-size:14.5px;border-radius:var(--radius-md)}

/* ============ NAV ============ */
.site-header{position:fixed;top:18px;left:0;right:0;z-index:100;display:flex;justify-content:center}
/* Entrée de page : le menu descend du haut (n'affecte pas les timings du menu au scroll) */
@keyframes headerIn{from{transform:translateY(calc(-100% - 40px));opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .site-header{animation:headerIn 900ms cubic-bezier(.22,1,.36,1) 150ms backwards}
}
.nav-pill{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  padding:10px 14px;
  box-shadow:var(--shadow-sm);
  transition:padding var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out), gap var(--t-slow) var(--ease-out);
}
.nav-pill.is-scrolled{padding:8px 10px 8px 14px;box-shadow:var(--shadow-md);gap:4px}
.nav-brand{
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  max-width:56px;opacity:1;transform:scale(1);overflow:hidden;
  transition:opacity 320ms var(--ease-out), transform 320ms var(--ease-out), max-width 320ms var(--ease-out), margin 320ms var(--ease-out);
}
.nav-brand img{height:30px;width:auto;flex:none}
.nav-pill.is-scrolled .nav-brand{
  opacity:0;transform:scale(.6);max-width:0;pointer-events:none;margin:0;
  transition:opacity var(--t-nav-out) var(--ease-out), transform var(--t-nav-out) var(--ease-out), max-width var(--t-nav-out) var(--ease-out), margin var(--t-nav-out) var(--ease-out);
}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  padding:10px 16px;border-radius:var(--radius-full);
  font:500 15px var(--font-ui);color:var(--text-dim);text-decoration:none;
  transition:background var(--t-base), color var(--t-base);
}
.nav-links a:hover{background:var(--bg);color:var(--navy)}
.nav-cta{
  margin-left:4px;
  opacity:0;transform:scale(.85);max-width:0;overflow:hidden;
  pointer-events:none;
  transition:opacity 220ms var(--ease-out), transform 220ms var(--ease-out), max-width 220ms var(--ease-out), margin 220ms var(--ease-out);
  white-space:nowrap;
}
.nav-pill.is-scrolled .nav-cta{
  opacity:1;transform:scale(1);max-width:260px;pointer-events:auto;margin-left:8px;
  transition:opacity var(--t-nav-in) var(--ease-out) calc(var(--t-nav-out) + var(--t-nav-hold)),
             transform var(--t-nav-in) var(--ease-out) calc(var(--t-nav-out) + var(--t-nav-hold)),
             max-width var(--t-nav-in) var(--ease-out) calc(var(--t-nav-out) + var(--t-nav-hold)),
             margin-left var(--t-nav-in) var(--ease-out) calc(var(--t-nav-out) + var(--t-nav-hold));
}
.nav-toggle{display:none}

/* ============ SECTION HEADER (reusable) ============ */
.section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);
  padding:7px 16px 7px 10px;border-radius:var(--radius-full);
  font:600 13px var(--font-ui);color:var(--text-dim);
  box-shadow:var(--shadow-sm);margin-bottom:18px;
}
.section-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.section-head{max-width:640px;margin:0 auto 52px;text-align:center}
.section-head h2{font-size:clamp(1.6rem, 3.2vw, 2.3rem);line-height:1.2;letter-spacing:-.01em}
.section-head p{margin:16px auto 0;max-width:52ch;font-size:1.02rem;line-height:1.6;color:var(--text-dim)}

/* ============ FOOTER ============ */
.site-footer{position:relative;overflow:hidden;background:var(--navy);color:rgba(255,255,255,.74);border-radius:32px 32px 0 0;font-size:14.5px}
.site-footer .wrap{position:relative;z-index:1;max-width:1280px}
/* Filigrane "360" en fond, coupé par le bas du pied de page (inspiré des grands footers de marque) */
.ft-mark{position:absolute;z-index:0;left:50%;bottom:-6%;width:min(1400px,132%);transform:translateX(-50%);pointer-events:none;user-select:none}
.ft-mark text{font-family:var(--font-display);font-weight:800;font-size:420px;letter-spacing:-.03em;fill:rgba(255,255,255,.045)}

.ft-grid{display:grid;grid-template-columns:1.5fr .85fr .85fr 1.1fr 1.15fr;gap:28px;padding:68px 0 52px}
.ft-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font:800 1.15rem var(--font-display)}
.ft-logo img{width:44px;height:44px;border-radius:50%}
.ft-brand p{margin:16px 0 0;max-width:32ch;line-height:1.65}
.ft-h{margin:0 0 16px;font:700 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ft-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.site-footer a{color:inherit;text-decoration:none;transition:color var(--t-base) var(--ease-out)}
.site-footer a:hover{color:#fff}
.site-footer a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.ft-link{display:inline-flex;align-items:center;gap:10px}
.ft-link svg{width:17px;height:17px;flex:none;color:rgba(255,255,255,.55)}
.ft-link.is-wa svg{color:#25D366}
.ft-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0 30px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.55)}
@media (max-width:1100px){
  .ft-grid{grid-template-columns:1.4fr 1fr 1fr;gap:32px 28px}
  .ft-real{grid-column:1 / -1}
  .ft-contact{grid-column:1 / -1}
}
@media (max-width:860px){
  .site-footer{border-radius:26px 26px 0 0}
  .ft-mark text{font-size:300px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:34px 28px;padding:52px 0 38px}
  .ft-brand,.ft-real,.ft-contact{grid-column:1 / -1}
}
@media (max-width:480px){
  .ft-mark{bottom:-4%}
  .ft-mark text{font-size:180px}
  .ft-grid{grid-template-columns:1fr}
}

/* Pages intérieures courtes : le pied de page reste en bas de l'écran */
.inner{display:flex;flex-direction:column;min-height:100vh}
.inner main{flex:1}


@media (prefers-reduced-motion: reduce){
  *{transition-duration:1ms !important; animation-duration:1ms !important}
}

/* Nav : page active + mobile (commun à toutes les pages) */
.nav-links a[aria-current="page"]{background:var(--bg);color:var(--navy);font-weight:600}
@media (max-width:640px){
  .site-header{top:10px}
  .nav-pill{gap:2px;padding:6px 8px;max-width:calc(100vw - 24px)}
  .nav-links{gap:0}
  .nav-links a{padding:8px 9px;font-size:12px}
  .nav-cta{display:none}
}

/* ============ PAGES INTÉRIEURES ============ */
.page-hero{padding:150px 0 40px;text-align:center}
.page-hero h1{font-size:clamp(2rem, 4.2vw, 3.1rem);line-height:1.15;letter-spacing:-.015em;max-width:860px;margin:0 auto}
.page-lead{margin:18px auto 0;max-width:58ch;font-size:1.1rem;line-height:1.6;color:var(--text-dim)}
.wip{max-width:880px;margin:32px auto 96px;padding:34px 32px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-xl);background:var(--surface);text-align:center}
.wip h2{font-size:1.1rem;margin-bottom:8px}
.wip p{margin:0 auto;max-width:56ch;color:var(--text-dim);line-height:1.6;font-size:.98rem}
.wip ul{list-style:none;padding:0;margin:18px auto 0;display:inline-flex;flex-direction:column;gap:8px;text-align:left;font:500 14.5px var(--font-ui);color:var(--text)}
.wip li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:10px;vertical-align:middle}
@media (max-width:640px){.page-hero{padding-top:110px}.wip{margin:24px 20px 72px;padding:26px 20px}}

/* ============ CURSEUR PERSONNALISÉ (souris uniquement ; créé par site.js) ============
   Un point suit la souris, un anneau le suit avec un léger retard. Sur un élément « étiqueté »
   (data-cursor="Mot" ou une règle de site.js), le point et l'anneau s'effacent au profit d'une bulle avec le mot.
   Point et anneau sont en mode « différence » : visibles sur fond clair comme sur fond sombre.
   Aucun enveloppe commune : un conteneur positionné casserait le mode de fusion. */
html.has-cur, html.has-cur *{cursor:none !important}
html.has-cur :is(input,textarea,select,[contenteditable="true"],video[controls],[data-cursor="off"],[data-cursor="off"] *){cursor:auto !important}

.cur-dot,.cur-ring,.cur-bubble,.cur-halo{position:fixed;left:0;top:0;pointer-events:none;will-change:transform}
.cur-dot,.cur-ring,.cur-bubble{z-index:10000}
.cur-dot,.cur-ring{mix-blend-mode:difference;opacity:0;transition:opacity 220ms var(--ease-out)}
html.cur-on .cur-dot,html.cur-on .cur-ring{opacity:1}
html.cur-on[data-cur="label"] .cur-dot,html.cur-on[data-cur="label"] .cur-ring,
html.cur-on[data-cur="native"] .cur-dot,html.cur-on[data-cur="native"] .cur-ring{opacity:0}

.cur-dot i{display:block;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;transition:transform 260ms var(--ease-out)}
.cur-ring i{
  display:block;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  border:1.5px solid #fff;background:rgba(255,255,255,0);
  transition:transform 360ms var(--ease-out), background-color 260ms var(--ease-out);
}
html[data-cur="hover"] .cur-ring i{transform:scale(1.5);background:rgba(255,255,255,.14)}
html[data-cur="hover"] .cur-dot i{transform:scale(.5)}
html[data-cur-down] .cur-ring i{transform:scale(.78)}
html[data-cur="hover"][data-cur-down] .cur-ring i{transform:scale(1.25)}

.cur-bubble i{
  display:flex;align-items:center;justify-content:center;
  width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;
  background:#fff;color:var(--navy);
  font:700 12.5px var(--font-ui);letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(3,15,37,.07), 0 14px 34px -8px rgba(3,15,37,.38);
  transform:scale(0);transition:transform 380ms cubic-bezier(.34,1.45,.64,1);
}
html.cur-on[data-cur="label"] .cur-bubble i{transform:scale(1)}
html.cur-on[data-cur="label"][data-cur-down] .cur-bubble i{transform:scale(.9)}

/* Halo : lueur bleue très douce qui suit la souris, derrière le contenu (visible sur le fond, pas sur les cartes) */
.cur-halo{
  z-index:-1;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,137,230,.16) 0%, rgba(0,137,230,.07) 36%, rgba(0,137,230,0) 68%);
  opacity:0;transition:opacity 600ms var(--ease-out);
}
html.cur-on .cur-halo{opacity:1}

@media (prefers-reduced-motion:reduce){
  .cur-dot i,.cur-ring i,.cur-bubble i{transition:none}
  .cur-halo{display:none}
}

/* Pages « bientôt » (Solutions, Réalisations, Design) : message pour les visiteurs */
.wip.is-soon{border-style:solid;border-color:var(--border);box-shadow:var(--shadow-md);padding:40px 32px}
.wip.is-soon h2{font-size:1.35rem;margin-bottom:10px}
.soon-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}