:root{
  --bg:#f6fbff;
  --bg2:#eef6ff;
  --surface:#ffffff;
  --text:#081425;
  --muted:#3f556e;
  --line: rgba(8,20,37,.10);

  --blue:#0b5cff;
  --cyan:#16c7ff;
  --green:#14c77a;

  --shadow: 0 18px 60px rgba(8,20,37,.10);
  --shadow2: 0 10px 30px rgba(8,20,37,.08);

  --r14:14px;
  --r18:18px;
  --r20:20px;
  --r22:22px;
  --r26:26px;

  --container: 1160px;
  --tickerH: 42px;

  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --sans2: "Inter", var(--sans);

  --ease: cubic-bezier(.2,.8,.2,1);

  /* ✅ ratios pilotables */
  --media-ratio: 16 / 9;
  --hero-ratio: 16 / 9;

  /* ✅ FX (futuriste) — inactif tant que tu n’ajoutes pas les classes */
  --fx-grid: rgba(11,92,255,.12);
  --fx-grid2: rgba(20,199,122,.10);
  --fx-aurora1: rgba(11,92,255,.22);
  --fx-aurora2: rgba(22,199,255,.18);
  --fx-aurora3: rgba(20,199,122,.16);
  --fx-noise: .055;
  --fx-glow: 0 26px 90px rgba(11,92,255,.14);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--sans2);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(11,92,255,.16), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(20,199,122,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
p{margin:0 0 14px}

h1,h2,h3{
  margin:0 0 12px;
  letter-spacing:-.02em;
  font-weight:600;
}
h1{font-size:clamp(1.9rem, 3.7vw, 3.1rem); line-height:1.08}
h2{font-size:clamp(1.25rem, 2.3vw, 1.95rem); line-height:1.18}
h3{font-size:1.05rem; line-height:1.25; font-weight:600}

.container{width:min(var(--container), calc(100% - 40px)); margin:0 auto;}
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.skip{
  position:absolute; left:-999px; top:10px; background:var(--surface);
  border:1px solid var(--line); padding:10px 14px; border-radius:10px; z-index:999;
}
.skip:focus{left:10px}

/* Focus premium */
:focus-visible{
  outline: 3px solid rgba(11,92,255,.25);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(246,251,255,.72);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; letter-spacing:.10em;}
.brand__mark{
  width:12px; height:12px; border-radius:999px;
  background: conic-gradient(from 180deg, var(--blue), var(--cyan), var(--green), var(--blue));
  box-shadow: 0 0 0 6px rgba(11,92,255,.10);
}
.brand__name{font-size:.98rem; font-weight:700}

.nav{display:flex; align-items:center; gap:16px; color:var(--muted); font-weight:600;}
.nav a{padding:8px 10px; border-radius:10px; transition: background .16s var(--ease), color .16s var(--ease);}
.nav a:hover{background:rgba(11,92,255,.06); color:var(--text)}

.lang{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px; border-radius:999px;
  border:1px solid var(--line); background: rgba(255,255,255,.70);
}
.lang__btn{
  border:none; background:transparent; cursor:pointer;
  font-weight:600; padding:8px 10px; border-radius:999px; color:rgba(8,20,37,.72);
  transition: background .16s var(--ease), box-shadow .16s var(--ease);
}
.lang__btn[aria-pressed="true"]{
  background: rgba(11,92,255,.10);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(11,92,255,.18);
}

.burger{
  display:none;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:12px;
  padding:10px;
  box-shadow: var(--shadow2);
}
.drawer{display:none; padding:14px 0 18px; gap:8px;}
.drawer a{
  display:block; padding:12px 12px; border:1px solid var(--line);
  background:rgba(255,255,255,.75); border-radius:12px;
}
.drawer.is-open{display:grid}
.drawer__langs{display:flex; gap:10px; padding-top:10px}

@media (max-width: 940px){
  .nav{display:none}
  .burger{display:inline-flex}
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:14px; font-weight:600;
  border:1px solid transparent; cursor:pointer;
  transition: transform .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease), filter .14s var(--ease), box-shadow .18s var(--ease);
  user-select:none;
  position:relative;
  overflow:hidden;
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color:white;
  box-shadow: 0 14px 40px rgba(11,92,255,.22);
}
.btn--primary:hover{filter:saturate(1.06)}
.btn--ghost{
  background: rgba(255,255,255,.75);
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover{background:rgba(11,92,255,.06); border-color: rgba(11,92,255,.18)}

/* Neo shimmer */
.btn--neo{ box-shadow: 0 16px 48px rgba(11,92,255,.14); }
.btn__spark{
  position:absolute; inset:-50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-55%) rotate(12deg);
  opacity:0; pointer-events:none;
}
.btn--neo:hover .btn__spark{
  opacity:.55;
  animation: shimmer 1.05s var(--ease) forwards;
}
@keyframes shimmer{ to{ transform: translateX(55%) rotate(12deg); opacity:0; } }

/* Ticker */
.ticker{
  height:var(--tickerH);
  display:flex; align-items:center;
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.65);
  overflow:hidden;
}
.ticker__track{
  display:flex; gap:10px; white-space:nowrap; will-change: transform;
  animation: ticker 18s linear infinite;
  padding-left:12px;
}
.ticker__item{font-weight:600; letter-spacing:.12em; font-size:.78rem; color:rgba(8,20,37,.82)}
.ticker__sep{opacity:.35}
.ticker__spacer{width:36px}
@keyframes ticker{from{transform: translateX(0)} to{transform: translateX(-50%)}}

/* ===========================================================
   MEDIA SYSTEM
=========================================================== */
.media{
  border-radius: var(--r26);
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  box-shadow: var(--shadow2);
  aspect-ratio: var(--media-ratio);
}
.media > img,
.media .img--cover,
.img--cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ===========================================================
   HOME HERO — anti-coupe iPad
=========================================================== */
.heroMedia{padding:18px 0 8px}
.heroMedia__frame{
  border-radius: var(--r26);
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(255,255,255,.65);
  box-shadow: var(--shadow);
}
.heroMedia__figure{
  margin:0;
  aspect-ratio: var(--hero-ratio);
  width:100%;
}
.heroMedia__img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 50% 32%;
  transform: none;
  display:block;
}

/* ===========================================================
   COMMON TYPO BLOCKS
=========================================================== */
.kicker{
  font-weight:600;
  letter-spacing:.18em;
  font-size:.78rem;
  color: rgba(8,20,37,.62);
}
.lead{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.65;
  max-width: 72ch;
  font-weight:400;
}
.sublead{
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.6;
  max-width: 78ch;
  font-weight:400;
}
.metaLine{
  margin-top:8px;
  color: rgba(8,20,37,.62);
  font-size:.98rem;
  line-height:1.55;
  max-width: 78ch;
}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 10px}
.actions--center{justify-content:center}

/* ===========================================================
   HOME INTRO + WHY (home)
=========================================================== */
.intro{padding:28px 0 10px}
.intro__grid{display:grid; gap:16px; align-items:start}
@media (min-width: 980px){ .intro__grid{grid-template-columns: 1.1fr .9fr} }

.whyCard{
  background: rgba(255,255,255,.78);
  border:1px solid rgba(8,20,37,.10);
  border-radius: var(--r22);
  padding:18px;
  box-shadow: var(--shadow2);
}
.whyCard__k{
  margin:0 0 8px;
  font-weight:600;
  letter-spacing:.18em;
  font-size:.78rem;
  color: rgba(8,20,37,.60);
}
.whyCard__t{margin:0 0 8px; font-weight:600;}
.whyCard__p{
  margin:0 0 12px;
  color: rgba(8,20,37,.78);
  line-height:1.65;
  font-weight:400;
}
.whyList{
  margin:0; padding-left:18px;
  color: rgba(8,20,37,.74);
  line-height:1.65;
}
.whyList li{ margin:6px 0; }

/* Teaser (home) */
.teaser{padding: 26px 0 34px}
.sectionHead{margin: 0 0 14px}
.grid3{display:grid; gap:16px}
@media (min-width: 860px){ .grid3{grid-template-columns: repeat(3, 1fr)} }

.card{
  background: rgba(255,255,255,.82);
  border:1px solid var(--line);
  border-radius: var(--r18);
  padding:18px;
  box-shadow: var(--shadow2);
  transition: transform .16s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 70px rgba(8,20,37,.10);
  border-color: rgba(11,92,255,.18);
}
.card__icon{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:14px; margin-bottom:10px;
  background: linear-gradient(135deg, rgba(11,92,255,.10), rgba(20,199,122,.08));
  border:1px solid rgba(11,92,255,.12);
  font-weight:600;
}
.closing{
  margin: 18px auto 0;
  max-width: 78ch;
  text-align:center;
  color: rgba(8,20,37,.70);
  font-weight:500;
}

/* ===========================================================
   PAGES INTERNES — PAGE HERO + SECTIONS
=========================================================== */
.pageHero{ padding: 26px 0 10px; }
.pageHero__grid{
  display:grid;
  gap: 18px;
  align-items: start;
}
@media (min-width: 980px){
  .pageHero__grid{ grid-template-columns: 1.1fr .9fr; }
}
.pageHero__media{
  border-radius: var(--r26);
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(255,255,255,.55);
  box-shadow: var(--shadow);
}

.section{
  padding: 26px 0 34px;
}
.section--soft{
  background: rgba(255,255,255,.45);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ===========================================================
   VISION — bloc “points”
=========================================================== */
.visionPoints{
  display:grid;
  gap: 12px;
  margin: 18px 0 6px;
}
@media (min-width: 860px){
  .visionPoints{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}
.visionPoint{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  border-radius: var(--r20);
  padding: 14px 14px;
  box-shadow: var(--shadow2);
  min-width:0;
}
.visionPoint__k{
  margin:0 0 6px;
  font-weight:700;
  letter-spacing:.08em;
  color: rgba(8,20,37,.78);
}
.visionPoint__t{
  margin:0;
  color: rgba(8,20,37,.78);
  line-height:1.55;
}

/* ===========================================================
   VISION — Steps
=========================================================== */
.steps{
  display:grid;
  gap: 12px;
}
.step{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  border-radius: var(--r22);
  padding: 16px;
  box-shadow: var(--shadow2);
  min-width:0;
}
.step__num{
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-weight:800;
  letter-spacing:.06em;
  color: rgba(8,20,37,.90);
  background: linear-gradient(135deg, rgba(11,92,255,.12), rgba(20,199,122,.08));
  border: 1px solid rgba(11,92,255,.14);
}

/* ===========================================================
   VISION — Grid cards + quote wide
=========================================================== */
.visionGrid{
  display:grid;
  gap: 14px;
}
@media (min-width: 980px){
  .visionGrid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.visionCard{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  border-radius: var(--r22);
  padding: 16px;
  box-shadow: var(--shadow2);
  min-width:0;
}
.visionCard h3{ margin:0 0 6px; }

.quoteWide{
  margin-top: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(11,92,255,.16);
  border-radius: var(--r26);
  padding: 18px;
  box-shadow: 0 26px 90px rgba(8,20,37,.10);
}
.quoteWide__k{
  margin:0 0 8px;
  font-weight:700;
  letter-spacing:.18em;
  font-size:.78rem;
  color: rgba(8,20,37,.62);
}
.quoteWide__t{
  margin:0;
  color: rgba(8,20,37,.82);
  line-height:1.65;
  font-size: 1.02rem;
}

/* ===========================================================
   FOOTER
=========================================================== */
.footer{
  padding: 26px 0 30px;
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.55);
}
.footer__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.footer__links{
  display:grid;
  gap:8px;
  color:var(--muted);
  font-weight:500;
}
.footer__right{
  color:var(--muted);
  font-weight:500;
  display:grid;
  gap:8px;
}
.footer__tag{ color: rgba(8,20,37,.68); margin:8px 0 0; }

/* ===========================================================
   REVEAL
=========================================================== */
[data-reveal]{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal="fade"]{ transform: none; }
.reveal-in{ opacity:1 !important; transform:none !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ticker__track{animation:none}
  .btn, .card{transition:none}
  [data-reveal]{opacity:1; transform:none; transition:none}
  .btn__spark{display:none}
}

/* Mobile spacing */
@media (max-width: 520px){
  .container{width: calc(100% - 26px)}
  .heroMedia{padding-top:14px}
  :root{ --hero-ratio: 16 / 10; }
}

/* ===========================================================
   PATCH PAGES INTERNES
=========================================================== */
body[data-page] section,
body[data-page] [id]{
  scroll-margin-top: 110px;
}
body[data-page] .pageHero__grid > *,
body[data-page] .sectorGrid > *,
body[data-page] .case__grid > *,
body[data-page] .contactGrid > *,
body[data-page] .splitBlock > *{
  min-width: 0;
}
body[data-page] h1,
body[data-page] h2,
body[data-page] h3,
body[data-page] p,
body[data-page] a{
  overflow-wrap: anywhere;
}
body[data-page] .pageHero .actions a,
body[data-page] .pageHero .actions .btn{
  white-space: nowrap;
}

/* ===========================================================
   TABLETTE (iPad) — HERO HOME: plus aucune coupe
=========================================================== */
@media (min-width: 768px) and (max-width: 1180px){
  :root{ --hero-ratio: 4 / 3; }
  .heroMedia__img{ object-position: 50% 18%; }

  body[data-page="secteurs"] .pageHero__media img,
  body[data-page="secteurs"] .case__media img,
  body[data-page="secteurs"] .media > img{
    object-position: 50% 35%;
  }
}

/* Desktop large */
@media (min-width: 1181px){
  :root{ --hero-ratio: 16 / 9; }
}

/* ===========================================================
   ✅ FUTURISTIC FX LAYER (OFF par défaut)
   -> Active en ajoutant : class="fxHero" sur un bloc (heroMedia__frame / pageHero__media / contactHero etc.)
=========================================================== */
.fxHero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--fx-glow);
}

.fxHero::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(520px 320px at 18% 18%, var(--fx-aurora1), transparent 60%),
    radial-gradient(540px 340px at 82% 30%, var(--fx-aurora2), transparent 62%),
    radial-gradient(520px 360px at 52% 86%, var(--fx-aurora3), transparent 64%);
  filter: blur(22px) saturate(1.05);
  opacity: .70;
  transform: translateZ(0);
  z-index: 0;
  animation: fxAurora 10.5s var(--ease) infinite alternate;
}

.fxHero::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(255,255,255,.70), rgba(255,255,255,.18)),
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  z-index: 1;
  pointer-events:none;
}

/* Grille futuriste (optionnelle) : ajoute class="fxGrid" en plus */
.fxGrid::marker{ content:""; }
.fxGrid{
  position: relative;
}
.fxGrid::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    linear-gradient(to right, var(--fx-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--fx-grid2) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .25;
  z-index: 1;
  pointer-events:none;
  mask-image: radial-gradient(60% 55% at 50% 35%, #000 0 55%, transparent 80%);
}

/* Canvas “Flow” (sera ajouté via HTML + JS à l’étape suivante) */
.heroFlow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index: 1;
  opacity: .35;
  mix-blend-mode: soft-light;
}
@supports not (mix-blend-mode: soft-light){
  .heroFlow{ opacity: .22; }
}

@keyframes fxAurora{
  from{ transform: translate3d(-1.5%, -1.0%, 0) scale(1.02); }
  to  { transform: translate3d( 1.5%,  1.2%, 0) scale(1.03); }
}

/* Noise léger (optionnel) : ajoute class="fxNoise" */
.fxNoise{
  position:relative;
}
.fxNoise::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index: 2;
  opacity: var(--fx-noise);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06), rgba(0,0,0,.06) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.04) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}
@supports not (mix-blend-mode: overlay){
  .fxNoise::after{ opacity: .03; }
}

/* Reduced motion : stop FX */
@media (prefers-reduced-motion: reduce){
  .fxHero::before{ animation:none; }
}