/* ── Skip link accessibilité (WCAG 2.4.1 Level A) ───────────────────────── */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
  background:var(--r,#C0182A);color:#fff;padding:12px 20px;font-size:.9rem;font-weight:600;
  border-radius:0 0 4px 4px;z-index:9999;text-decoration:none;
}
.skip-link:focus{
  position:fixed;left:50%;transform:translateX(-50%);top:0;width:auto;height:auto;overflow:visible;
  outline:3px solid #fff;outline-offset:2px;
}

:root {

  --r:#C0182A; --r-d:#8B0E1C; --r-l:#D4293C;
  --r-g:rgba(192,24,42,.14); --r-g2:rgba(192,24,42,.22);
  --r-s:rgba(192,24,42,.07); --r-b:rgba(192,24,42,.22);
  --r-txt:#f47585;

  
  --bg:#08080d; --bg2:#0d0d14; --bg3:#12121a; --bg4:#1a1a24;
  --sf:rgba(255,255,255,.04); --sf2:rgba(255,255,255,.07); --sf3:rgba(255,255,255,.11);
  --bd:rgba(255,255,255,.08); --bd2:rgba(255,255,255,.14);
  --tx:#ecedf5; --tx2:#878aa2; --tx3:#44475c;
  --sh:0 4px 24px rgba(0,0,0,.5); --sh2:0 16px 56px rgba(0,0,0,.65);
  --gl:rgba(8,8,13,.8);

  
  --tar-r1:rgba(192,24,42,.22); --tar-r2:rgba(192,24,42,.12); --tar-r3:rgba(192,24,42,.08);
  --tar-dk:rgba(0,0,0,.35);     --tar-bd:rgba(139,14,28,.2);

  /* ── Palette Royal Stewart — accents partagés sur tout le site ── */
  --rs-red:#B81525;          /* Rouge Stewart dominant */
  --rs-red-deep:#7C0E18;     /* Rouge profond — ombres, hover */
  --rs-gold:#C49A24;         /* Or — accents premium */
  --rs-gold-soft:rgba(196,154,36,.34);
  --rs-navy:#0E1E46;         /* Bleu nuit — accents nobles */
  --rs-navy-soft:rgba(14,30,70,.44);
  --rs-green:#103820;        /* Vert forêt — accents subtils */
  --rs-green-soft:rgba(16,56,32,.40);
  --rs-ivory:#E8E0D4;        /* Blanc cassé chaud — texte sur rouge */
  --rs-onyx:#06040A;         /* Noir profond Stewart */


  --f-d:'Cormorant Garamond',Georgia,serif;
  --f-b:'Outfit',system-ui,-apple-system,sans-serif;

  
  --r2:8px;--r3:12px;--r4:16px;--r5:24px;--r6:32px;--rp:9999px;
}

[data-theme="light"] {
  /* Blancs froids · gris minéraux · aucune warmth visible */
  --bg:#f7f7fb; --bg2:#f0f0f6; --bg3:#e6e6ef; --bg4:#d8d8e6;

  /* Surfaces — légèrement bleutées plutôt que neutres */
  --sf:rgba(0,0,20,.022); --sf2:rgba(0,0,20,.042); --sf3:rgba(0,0,20,.066);

  /* Bordures */
  --bd:rgba(0,0,24,.065); --bd2:rgba(0,0,24,.12);

  /* Texte — légèrement tirant vers le bleu·nuit pour cohérence avec les blancs froids */
  --tx:#0a0a12; --tx2:#4c4c66; --tx3:#8e8ea8;

  /* Ombres froides */
  --sh:0 4px 24px rgba(0,0,24,.058); --sh2:0 16px 56px rgba(0,0,24,.088);

  /* Nav glassmorphism — blanc froid */
  --gl:rgba(247,247,251,.93);

  /* Tartan rouge Optinove — identité préservée, opacités light mode
     Lisible sur blanc · raffiné · pas aussi dense qu'en dark          */
  --tar-r1:rgba(192,24,42,.13);
  --tar-r2:rgba(192,24,42,.07);
  --tar-r3:rgba(192,24,42,.04);
  --tar-dk:rgba(120,8,18,.22);
  --tar-bd:rgba(192,24,42,.11);

  /* Royal Stewart palette — light mode (légèrement plus saturé pour visibilité sur blanc) */
  --rs-red:#C3192B;
  --rs-red-deep:#8B1019;
  --rs-gold:#B08A20;
  --rs-gold-soft:rgba(176,138,32,.30);
  --rs-navy:#142246;
  --rs-navy-soft:rgba(20,34,70,.36);
  --rs-green:#1A3D26;
  --rs-green-soft:rgba(26,61,38,.32);
  --rs-ivory:#FBFCFE;
  --rs-onyx:#08060E;
}

/* ══════════════════════════════════════════════════════════════════════════
   ROYAL STEWART TARTAN — Source officielle Scottish Register of Tartans
   ──────────────────────────────────────────────────────────────────────────
   Le motif réel — threadcount exact 316 fils — vit dans
   /assets/images/royal-stewart-tartan.svg (warp opaque + weft translucide
   pour reproduire le tissage authentique).
   Ici on l'enveloppe de couches premium : vignette cinéma, sheen lumière,
   grain noble — pour transformer la nappe en identité visuelle royale.
   Variables :
     --rs-tartan-url     : SVG officiel
     --rs-tile           : taille de répétition (modulable par contexte)
     --rs-tartan-bright  : luminosité finale (filter)
     --rs-tartan-sat     : saturation finale (filter)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --rs-tartan-url: url('/assets/images/royal-stewart-seamless.png');
  --rs-tile: auto;
  --rs-tartan-bright: 0.92;
  --rs-tartan-sat: 1.06;
  --rs-tartan-contrast: 1.04;
}
[data-theme="light"] {
  /* Light mode royal : tartan PLUS vif que le dark, jamais délavé.
     saturation > 1, luminosité pleine, contraste relevé. */
  --rs-tartan-bright: 1.02;
  --rs-tartan-sat: 1.10;
  --rs-tartan-contrast: 1.06;
}

/* Grain royal — fines micro-imperfections textile pour le côté vivant.
   Pseudo-element ::after pour ne pas casser le rendu si ::before est utilisé ailleurs. */
.tartan::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,215,170,0.08) 0%, transparent 38%),
    radial-gradient(circle at 82% 72%, rgba(0,0,0,0.18) 0%, transparent 42%);
  mix-blend-mode: soft-light;
  z-index: 1;
}

/* Light mode — AUCUN voile blanc. Le tartan Royal Stewart s'affiche dans
   ses couleurs naturelles, pleines et éclatantes. Seul un très léger
   approfondissement rouge profond en périphérie donne du relief textile
   (signature de luxe), jamais une perte de saturation. */
[data-theme="light"] .tartan {
  background-color: #b9202f;
  background-image:
    radial-gradient(
      ellipse 130% 100% at 50% 45%,
      rgba(124,14,24,0)    58%,
      rgba(124,14,24,0.10) 90%,
      rgba(90,6,14,0.20)  100%
    ),
    var(--rs-tartan-url);
  background-blend-mode: multiply, normal;
}
[data-theme="light"] .tartan::after {
  background:
    radial-gradient(circle at 20% 28%, rgba(255,236,200,0.10) 0%, transparent 40%),
    radial-gradient(circle at 82% 74%, rgba(70,4,12,0.16) 0%, transparent 44%);
  mix-blend-mode: soft-light;
}

/* ──────────────────────────────────────────────────────────────────────────
   .tartan-light : variante OVERLAY translucide — pour superposer le motif
   sur une carte/section déjà colorée (le motif respire sans dominer).
   ────────────────────────────────────────────────────────────────────────── */
.tartan-light {
  position: relative;
  background-image: var(--rs-tartan-url);
  background-size: clamp(160px, 22vw, 400px) clamp(160px, 22vw, 400px);
  background-repeat: repeat;
  opacity: 0.85;
  mix-blend-mode: multiply;
}
[data-theme="light"] .tartan-light {
  opacity: 0.55;
  mix-blend-mode: multiply;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* Scrollbar Royal Stewart — premium, présente sur toute la page */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--bg2)}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--r) 0%,var(--rs-red-deep) 100%);
  border-radius:6px;
  border:2px solid var(--bg2);
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,var(--rs-gold) 0%,var(--r) 50%,var(--rs-red-deep) 100%);
}
*{scrollbar-width:thin;scrollbar-color:var(--r) var(--bg2)}
body{
  font-family:var(--f-b);background:var(--bg);color:var(--tx);
  line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;transition:background .35s,color .35s;
}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:var(--f-b);border:none;background:none}
img{display:block;max-width:100%}
::selection{background:var(--r);color:#fff}
:focus-visible{outline:2px solid var(--r);outline-offset:3px;border-radius:4px}

.disp{
  font-family:var(--f-d);font-size:clamp(3rem,8vw,6.5rem);
  line-height:.96;font-weight:400;letter-spacing:-.5px;
}
/* Italique éditoriale : rouge Stewart + accent or subtil au underline — signature royale */
.disp em{
  font-style:italic;color:var(--r);
  background:linear-gradient(180deg,transparent 86%,var(--rs-gold-soft) 86%,var(--rs-gold-soft) 92%,transparent 92%);
  padding:0 .04em;
}
.h1{font-family:var(--f-d);font-size:clamp(2.4rem,6vw,4.5rem);line-height:1.02;font-weight:400}
.h2{font-family:var(--f-d);font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.06;font-weight:400}
.h3{font-family:var(--f-d);font-size:clamp(1.3rem,2.5vw,1.8rem);line-height:1.2;font-weight:400}
.body-l{font-size:clamp(1rem,1.8vw,1.1rem);color:var(--tx2);line-height:1.75}
.eye{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--r-txt);
}
/* Filet eyebrow Royal Stewart : or → noir thin → rouge. Signature noble présente sur chaque section. */
.eye::before{
  content:'';width:36px;height:1.5px;flex-shrink:0;
  background:linear-gradient(90deg,
    var(--rs-gold) 0%, var(--rs-gold) 32%,
    var(--rs-onyx) 32%, var(--rs-onyx) 38%,
    var(--r) 38%, var(--r) 100%);
}

.w{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.w-xl{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,64px)}
section{padding:clamp(80px,10vw,140px) 0}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 28px;border-radius:var(--rp);
  font-family:var(--f-b);font-weight:600;font-size:.88rem;letter-spacing:.015em;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn-r{
  background:var(--r);color:#fff;
  box-shadow:0 2px 20px rgba(192,24,42,.35);
}
.btn-r::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 55%);pointer-events:none}
/* Hover royal : bagage noble — anneau or interne + glow rouge profond Stewart */
.btn-r:hover{
  background:var(--rs-red-deep);
  transform:translateY(-2px);
  box-shadow:
    0 10px 36px rgba(124,14,24,.55),
    0 0 0 1px var(--rs-gold-soft) inset,
    0 1px 0 rgba(255,235,210,.16) inset;
}
.btn-r:active{transform:none}
.btn-o{border:1px solid var(--bd2);color:var(--tx);background:var(--sf)}
.btn-o:hover{border-color:var(--r-b);color:var(--r);background:var(--r-s);transform:translateY(-2px)}
.btn-lg{padding:18px 36px;font-size:.95rem}
.btn-sm{padding:9px 18px;font-size:.8rem}

.card{
  background:var(--sf);border:1px solid var(--bd);border-radius:var(--r4);
  padding:28px;transition:all .24s cubic-bezier(.4,0,.2,1);
}
.card:hover{border-color:var(--bd2);transform:translateY(-4px);box-shadow:var(--sh)}
.card-r{border-left:3px solid var(--r)}
.card-r:hover{border-color:var(--r);box-shadow:0 0 40px var(--r-g),var(--sh)}

.badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border-radius:var(--rp);font-size:.72rem;font-weight:600;
  border:1px solid var(--bd);background:var(--sf);color:var(--tx2);
}
.badge-r{background:var(--r-s);border-color:var(--r-b);color:var(--r-txt)}
.live-dot{width:7px;height:7px;background:var(--r);border-radius:50%;animation:ld 1.8s infinite;flex-shrink:0}
@keyframes ld{0%,100%{opacity:1}50%{opacity:.3}}

#prog{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--r-d),var(--r));z-index:2000;pointer-events:none;box-shadow:0 0 8px var(--r-g2)}

#nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:80px;
  display:flex;align-items:center;transition:all .3s ease;
}
#nav.scrolled{
  background:var(--gl);
  backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  border-bottom:1px solid var(--bd);
  box-shadow:var(--sh);
}

#nav.scrolled::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  opacity:.5;
}
#nav.scrolled::before{
  background-image:
    repeating-linear-gradient(90deg,var(--tar-r3) 0,var(--tar-r3) 2px,transparent 2px,transparent 36px),
    repeating-linear-gradient(0deg,var(--tar-r3) 0,var(--tar-r3) 2px,transparent 2px,transparent 68px);
}

.nav-i{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}

.logo{display:flex;align-items:center;flex-shrink:0;position:relative;height:60px}

.brand-img{
  height:60px;width:auto;display:block;
  transition:opacity .4s ease, filter .3s ease, transform .3s ease;
  pointer-events:none;will-change:opacity;
}
.brand-dark{filter:drop-shadow(0 0 14px rgba(192,24,42,.38))}
.brand-light{position:absolute;left:0;top:0;opacity:0;filter:drop-shadow(0 2px 6px rgba(192,24,42,.22))}
[data-theme="light"] .brand-dark{opacity:0;position:absolute;left:0;top:0}
[data-theme="light"] .brand-light{opacity:1;position:relative}
.logo:hover .brand-img{transform:scale(1.03)}
.logo:hover .brand-dark{filter:drop-shadow(0 0 20px rgba(192,24,42,.6))}
[data-theme="light"] .logo:hover .brand-light{filter:drop-shadow(0 3px 10px rgba(192,24,42,.38))}

/* legacy classes kept for footer reuse if needed */
.logo-img{width:40px;height:40px;object-fit:contain;flex-shrink:0}
.logo-sq{
  width:40px;height:40px;border-radius:10px;overflow:hidden;
  position:relative;flex-shrink:0;background:var(--r);
}
.logo-sq::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.12) 2px,transparent 2px,transparent 10px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.12) 2px,transparent 2px,transparent 10px);
}
.logo-sq::after{
  content:'O';position:absolute;inset:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-d);font-size:1.5rem;font-weight:500;color:#fff;line-height:1;
}
.logo-name{
  font-family:var(--f-d);font-size:1.35rem;font-weight:600;
  letter-spacing:-.3px;color:var(--tx);
}
.logo-name b{color:var(--r);font-weight:600}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-a{padding:7px 13px;border-radius:var(--r2);font-size:.86rem;font-weight:500;color:var(--tx2);transition:all .18s}
.nav-a:hover{color:var(--tx);background:var(--sf2)}
.nav-r{display:flex;align-items:center;gap:10px;flex-shrink:0}

#thBtn{
  width:40px;height:40px;border-radius:var(--r2);border:1px solid var(--bd);
  background:var(--sf);color:var(--tx2);display:flex;align-items:center;justify-content:center;transition:all .2s;
}
#thBtn:hover{border-color:var(--bd2);color:var(--tx)}
#thBtn svg{width:16px;height:16px}

#mbBtn{
  display:none;width:40px;height:40px;border-radius:var(--r2);border:1px solid var(--bd);
  background:var(--sf);color:var(--tx);align-items:center;justify-content:center;
  flex-direction:column;gap:5px;transition:all .2s;
}
#mbBtn span{width:16px;height:1.5px;background:currentColor;display:block;transition:all .24s;transform-origin:center}
#mbBtn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#mbBtn.open span:nth-child(2){opacity:0}
#mbBtn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

#drw{
  position:fixed;inset:80px 0 0;background:var(--bg2);z-index:999;
  padding:24px 24px 120px;overflow-y:auto;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  border-top:1px solid var(--bd);
}
#drw.open{transform:none}
.drw-a{display:block;padding:16px 0;border-bottom:1px solid var(--bd);color:var(--tx);font-size:1rem;font-weight:500}
.drw-a:hover{color:var(--r)}

#hero{
  min-height:100vh;padding-top:80px;
  position:relative;overflow:hidden;display:flex;align-items:center;
}

.hero-logo-deco{
  position:absolute;right:6%;top:50%;transform:translateY(-50%);
  width:clamp(220px,28vw,400px);
  opacity:.13;pointer-events:none;z-index:1;
  filter:drop-shadow(0 0 40px rgba(192,24,42,.35));
  animation:heroDecoFloat 8s ease-in-out infinite;
}
@keyframes heroDecoFloat{
  0%,100%{transform:translateY(-50%)}
  50%{transform:translateY(-53%)}
}
@media(max-width:900px){.hero-logo-deco{display:none}}
.hero-tartan-panel{
  position:absolute;right:0;top:0;bottom:0;width:45%;
  overflow:hidden;pointer-events:none;
}
.hero-tartan-panel::before{
  content:'';position:absolute;inset:0;
  pointer-events:none;
}
.hero-tartan-inner{
  position:absolute;inset:0;pointer-events:none;
}
.hero-tartan-inner .tartan{position:absolute;inset:-10%;opacity:1;pointer-events:none}

.hero-tartan-panel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,transparent 30%);
  pointer-events:none;z-index:1;
}

.hero-tartan-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 60% 50%,rgba(192,24,42,.18) 0%,transparent 65%),
    radial-gradient(ellipse 50% 40% at 78% 30%,rgba(192,24,42,.14) 0%,transparent 70%);
  z-index:2;pointer-events:none;
}
[data-theme="light"] .hero-tartan-glow{background:none}

.hero-content{
  position:relative;z-index:10;width:100%;
  padding:clamp(48px,8vw,100px) 0;
}
.hero-tag{margin-bottom:28px}
.hero-h{margin-bottom:26px}
.hero-sub{max-width:520px;margin-bottom:42px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:64px}

.hero-creds{
  display:flex;flex-wrap:wrap;align-items:center;gap:0;
  background:var(--sf);border:1px solid var(--bd);
  border-radius:var(--r4);overflow:hidden;
  width:fit-content;
  backdrop-filter:blur(8px);
}
.hc-item{
  padding:16px 24px;border-right:1px solid var(--bd);
  display:flex;flex-direction:column;gap:3px;
}
.hc-item:last-child{border-right:none}
/* Hero creds — chiffres royaux : dégradé rouge Stewart → or, signature noble */
.hc-val{
  font-family:var(--f-d);font-size:1.95rem;font-weight:600;line-height:1;
  background:linear-gradient(135deg,var(--r) 0%,var(--rs-gold) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  letter-spacing:-.5px;
}
.hc-lbl{font-size:.7rem;color:var(--tx3);letter-spacing:.04em}

.ticker-wrap{
  overflow:hidden;padding:0;
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
  
  position:relative;
}
.ticker-wrap::before{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,var(--tar-r3) 0,var(--tar-r3) 1.5px,transparent 1.5px,transparent 28px);
  pointer-events:none;opacity:.6;
}
.ticker-track{
  display:flex;gap:0;animation:tick 40s linear infinite;
  width:max-content;position:relative;z-index:1;
}

.ti{
  display:flex;align-items:center;gap:14px;padding:14px 44px;
  font-size:.8rem;font-weight:500;color:var(--tx3);white-space:nowrap;
  transition:color .3s;
}
.ti:hover{color:var(--r)}
.ti::before{content:'';width:4px;height:4px;background:var(--r);border-radius:50%;flex-shrink:0}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.sit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin-top:48px}
.sit-card{
  border:1px solid var(--bd);border-radius:var(--r4);padding:22px;
  background:var(--sf);cursor:pointer;transition:all .22s;
  display:flex;align-items:flex-start;gap:14px;position:relative;overflow:hidden;
}
.sit-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--r);transform:scaleY(0);transition:transform .22s;transform-origin:bottom;
}
.sit-card:hover::before{transform:scaleY(1)}
.sit-card:hover{border-color:var(--r-b);background:var(--sf2);transform:translateX(5px)}
.sit-ic{
  width:42px;height:42px;border-radius:var(--r3);border:1px solid var(--bd);
  background:var(--sf);display:flex;align-items:center;justify-content:center;
  color:var(--r);flex-shrink:0;transition:all .22s;
}
.sit-card:hover .sit-ic{background:var(--r);color:#fff;border-color:var(--r)}
.sit-txt h3{font-size:.9rem;font-weight:600;color:var(--tx);margin-bottom:3px}
.sit-txt p{font-size:.78rem;color:var(--tx2);line-height:1.5}

.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:48px}
.svc-card{
  background:var(--sf);border:1px solid var(--bd);border-radius:var(--r4);padding:26px;
  transition:all .24s;position:relative;overflow:hidden;
}
.svc-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--r-s),transparent 50%);
  opacity:0;transition:opacity .24s;pointer-events:none;
}
.svc-card:hover::after{opacity:1}
.svc-card:hover{border-color:var(--r-b);transform:translateY(-5px);box-shadow:0 20px 48px rgba(0,0,0,.3),0 0 36px var(--r-g)}
.svc-ic{
  width:46px;height:46px;border-radius:var(--r3);
  background:var(--r-s);border:1px solid var(--r-b);
  display:flex;align-items:center;justify-content:center;
  color:var(--r);margin-bottom:18px;transition:all .22s;position:relative;z-index:1;
}
.svc-card:hover .svc-ic{background:var(--r);color:#fff;border-color:var(--r)}
.svc-t{font-family:var(--f-d);font-size:1.1rem;font-weight:500;color:var(--tx);margin-bottom:7px;position:relative;z-index:1}
.svc-d{font-size:.82rem;color:var(--tx2);line-height:1.6;position:relative;z-index:1}
.svc-tag{
  display:inline-block;margin-top:14px;padding:3px 10px;border-radius:var(--rp);
  font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:var(--sf3);color:var(--tx3);position:relative;z-index:1;
}

#ci{position:relative;overflow:hidden}

.ci-tartan-bg{position:absolute;inset:0;opacity:.55;pointer-events:none}
.ci-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,transparent 15%,transparent 85%,var(--bg) 100%);
  z-index:1;
}
.ci-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:800px;height:400px;
  background:radial-gradient(ellipse,rgba(192,24,42,.18) 0%,transparent 65%);
  border-radius:50%;pointer-events:none;z-index:1;
  animation:ciGlow 6s ease-in-out infinite;
}
@keyframes ciGlow{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}

.ci-content{position:relative;z-index:2}
.ci-card{
  max-width:840px;margin:0 auto;
  background:rgba(8,8,13,.75);
  border:1px solid var(--r-b);border-radius:var(--r6);
  padding:clamp(44px,6vw,80px);text-align:center;
  backdrop-filter:blur(24px);
  box-shadow:0 0 100px rgba(192,24,42,.12),var(--sh2);
  position:relative;overflow:hidden;
}

.ci-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:.8;
}
.ci-card-tartan{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.ci-card-tartan .tartan-light{position:absolute;inset:0;opacity:.4}
.ci-card-mask{
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(8,8,13,.92) 0%,rgba(8,8,13,.78) 50%,rgba(8,8,13,.88) 100%);
  pointer-events:none;z-index:1;
}
[data-theme="light"] .ci-card{background:rgba(247,247,251,.92)}
[data-theme="light"] .ci-card-mask{background:linear-gradient(135deg,rgba(247,247,251,.94),rgba(247,247,251,.82),rgba(247,247,251,.90))}

.ci-card-inner{position:relative;z-index:2}

.ci-status{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--rp);
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);margin-bottom:22px;
}
.ci-status-dot{width:7px;height:7px;background:#10b981;border-radius:50%;animation:ld 2s infinite}
.ci-status span{font-size:.74rem;font-weight:600;color:#10b981}

.ci-title{
  font-family:var(--f-d);
  font-size:clamp(2rem,5vw,3.5rem);
  line-height:1.05;font-weight:400;color:var(--tx);margin-bottom:16px;
}
.ci-sub{font-size:clamp(.9rem,1.8vw,1.05rem);color:var(--tx2);max-width:560px;margin:0 auto 32px;line-height:1.7}

.ci-btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--r);color:#fff;
  padding:clamp(18px,3vw,24px) clamp(32px,5vw,56px);
  border-radius:var(--rp);
  font-size:clamp(1rem,2vw,1.15rem);font-weight:700;
  box-shadow:0 4px 40px rgba(192,24,42,.5),0 0 80px rgba(192,24,42,.15);
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
  animation:btnPulse 3.5s ease-in-out infinite;
}
.ci-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%);pointer-events:none}
.ci-btn:hover{
  background:var(--rs-red-deep);
  transform:translateY(-3px) scale(1.02);
  box-shadow:
    0 14px 60px rgba(124,14,24,.62),
    0 0 0 1px var(--rs-gold-soft) inset,
    0 1px 0 rgba(255,235,210,.18) inset;
  animation:none;
}
.ci-btn:active{transform:none}
@keyframes btnPulse{
  0%,100%{box-shadow:0 4px 40px rgba(192,24,42,.5),0 0 80px rgba(192,24,42,.15)}
  50%{box-shadow:0 4px 40px rgba(192,24,42,.6),0 0 100px rgba(192,24,42,.22)}
}

.ci-steps{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  gap:8px;align-items:center;margin-top:52px;
}
.ci-step{text-align:center}
.ci-sn{
  width:48px;height:48px;border-radius:50%;border:1.5px solid var(--r-b);
  background:var(--r-s);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-d);font-size:1.1rem;color:var(--r);margin:0 auto 12px;
}
.ci-st{font-family:var(--f-d);font-size:1rem;color:var(--tx);margin-bottom:4px}
.ci-sd{font-size:.78rem;color:var(--tx2);line-height:1.5}
.ci-arr{color:var(--r-b)}

.ci-secure{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--bd);
}
.ci-si{display:flex;align-items:center;gap:5px;font-size:.75rem;color:var(--tx3)}
.ci-si svg{color:var(--r);width:13px;height:13px;flex-shrink:0}

.ci-pricing{
  margin-top:20px;padding:16px 20px;border-radius:var(--r3);
  background:var(--sf2);border:1px solid var(--bd);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 20px;font-size:.78rem;color:var(--tx2);
}
.ci-pr-item{display:flex;align-items:center;gap:7px;line-height:1.45}
.ci-pr-item strong{color:var(--tx);font-weight:500}
.ci-pr-ico{width:13px;height:13px;flex-shrink:0;color:var(--r);opacity:.85}
.ci-pr-sep{width:1px;height:20px;background:var(--bd);flex-shrink:0}
@media(max-width:540px){
  .ci-pricing{flex-direction:column;gap:10px;text-align:left}
  .ci-pr-sep{width:100%;height:1px}
}
.ci-pricing-item{
  flex:1;display:flex;align-items:center;gap:12px;padding:16px 20px;
  text-align:left;
}
.ci-pricing-item:first-child{border-right:1px solid var(--bd)}
.ci-pricing-ic{
  width:34px;height:34px;border-radius:var(--r2);
  border:1px solid var(--bd);background:var(--sf3);
  display:flex;align-items:center;justify-content:center;
  color:var(--r);flex-shrink:0;pointer-events:none;
}
.ci-pricing-ic svg{width:15px;height:15px;pointer-events:none}
.ci-pricing-label{font-size:.84rem;font-weight:600;color:var(--tx);display:block;margin-bottom:2px}
.ci-pricing-desc{font-size:.76rem;color:var(--tx3);display:block}

/* ── Trust Bar ─────────────────────────────────────────── */
#trust-bar{
  position:relative;overflow:hidden;
  border-top:1px solid rgba(192,24,42,.2);
  border-bottom:1px solid rgba(192,24,42,.2);
  padding:clamp(28px,4vw,48px) 0;
}
.tb-bg{position:absolute;inset:0;pointer-events:none}
.tb-tartan{position:absolute;inset:-20%;opacity:.9}
.tb-veil{position:absolute;inset:0;background:rgba(8,3,5,.48)}
[data-theme="light"] .tb-tartan{opacity:1}
[data-theme="light"] .tb-veil{background:rgba(0,0,16,.03)}
.tb-strip{
  position:relative;z-index:1;
  display:flex;align-items:center;
  max-width:1080px;margin:0 auto;
}
.tb-item{
  flex:1;display:flex;align-items:center;gap:22px;
  padding:clamp(18px,2.5vw,32px) clamp(20px,3vw,40px);
  border-radius:12px;
  transition:background .3s;
}
.tb-item:hover{background:none}
.tb-sep{
  width:1px;height:64px;flex-shrink:0;
  background:linear-gradient(180deg,transparent,rgba(192,24,42,.5) 50%,transparent);
}
.tb-icon{
  width:74px;height:74px;border-radius:50%;flex-shrink:0;
  background:rgba(192,24,42,.25);
  border:1px solid rgba(192,24,42,.5);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  transition:background .3s,transform .3s;
}
.tb-icon svg{width:30px;height:30px}
.tb-item:hover .tb-icon{
  background:rgba(192,24,42,.4);
  transform:scale(1.06);
}
.tb-title{
  font-family:var(--f-d);font-size:1.42rem;font-weight:600;
  color:#fff;margin-bottom:6px;letter-spacing:.01em;
}
.tb-text{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.6}
[data-theme="light"] .tb-title{color:#1a0508;font-weight:700}
[data-theme="light"] .tb-text{color:#1a0508}
[data-theme="light"] .tb-icon{background:rgba(192,24,42,.22);border-color:rgba(192,24,42,.75);color:#1a0508}

.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.trust-card{
  background:var(--sf);border:1px solid var(--bd);border-radius:var(--r4);
  padding:28px;transition:all .22s;
}
.trust-card:hover{border-color:var(--bd2);transform:translateY(-4px);box-shadow:var(--sh)}
.trust-em{font-size:2rem;margin-bottom:16px;display:block}
.trust-t{font-family:var(--f-d);font-size:1.15rem;color:var(--tx);margin-bottom:8px}
.trust-d{font-size:.83rem;color:var(--tx2);line-height:1.65}

.secteur-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:48px}
[data-theme="light"] .secteur-card{border-color:rgba(0,0,0,.08)}
.secteur-card{
  background:transparent;border:1px solid rgba(255,255,255,.06);border-radius:var(--r4);
  padding:clamp(26px,3.5vw,40px);transition:all .24s;cursor:pointer;
  position:relative;overflow:hidden;
}

.secteur-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(192,24,42,.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(30,50,102,.04) 0%, transparent 50%);
  opacity:0;transition:opacity .35s cubic-bezier(.4,0,.2,1);
}
.secteur-card:hover::before{opacity:1}

.secteur-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(
    135deg,
    rgba(255,255,255,.025) 0%,
    transparent 40%,
    transparent 60%,
    rgba(192,24,42,.04) 100%
  );
  opacity:0;transition:opacity .35s;
}
.secteur-card:hover::after{opacity:1}
.secteur-card:hover{border-color:var(--r-b);transform:translateY(-4px);box-shadow:var(--sh)}
.sec-ico{width:40px;height:40px;border-radius:var(--r2);background:rgba(192,24,42,.08);border:1px solid rgba(192,24,42,.15);display:flex;align-items:center;justify-content:center;color:var(--r);margin-bottom:16px;transition:all .24s;flex-shrink:0;}
.secteur-card:hover .sec-ico{background:var(--r);color:#fff;border-color:var(--r)}
.sec-t{font-family:var(--f-d);font-size:1.3rem;color:var(--tx);margin-bottom:8px}
.sec-d{font-size:.84rem;color:var(--tx2);line-height:1.65;margin-bottom:14px}
.sec-chips{display:none}
.sec-chip{padding:3px 10px;border:1px solid var(--bd);border-radius:var(--rp);font-size:.7rem;color:var(--tx3);background:var(--sf2)}

.trust-editorial{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:48px;
  align-items:start;
}
.te-col-left,.te-col-right{display:flex;flex-direction:column;gap:14px}

.te-card-large{
  background:var(--sf);border:1px solid var(--bd);border-radius:var(--r5);
  padding:36px 36px 32px;transition:all .25s;
  position:relative;overflow:hidden;
}
.te-card-large::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(192,24,42,.06) 0%,transparent 55%);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.te-card-large:hover::before{opacity:1}
.te-card-large:hover{
  border-color:rgba(192,24,42,.25);
  transform:translateY(-4px);
  box-shadow:0 24px 64px rgba(0,0,0,.4);
}
.te-icon{
  width:44px;height:44px;border-radius:var(--r3);
  border:1px solid var(--bd);background:var(--sf2);
  display:flex;align-items:center;justify-content:center;
  color:var(--r);margin-bottom:22px;flex-shrink:0;
  transition:all .25s;
}
.te-card-large:hover .te-icon,
.te-card-sm:hover .te-icon{background:var(--r);color:#fff;border-color:var(--r)}
.te-big-num{display:flex;align-items:baseline;gap:0;margin-bottom:10px;line-height:1}
.te-num{
  font-family:var(--f-d);
  font-size:clamp(4rem,7vw,5.5rem);
  line-height:.95;color:var(--r);font-weight:400;letter-spacing:-2px;
}
.te-unit{
  font-family:var(--f-d);font-size:1.3rem;color:var(--tx3);
  font-weight:300;margin-left:6px;padding-bottom:4px;
}
.te-card-t{
  font-family:var(--f-d);font-size:1.15rem;color:var(--tx);
  margin-bottom:10px;font-weight:400;
}
.te-card-d{font-size:.84rem;color:var(--tx2);line-height:1.7}

.te-card-sm{
  background:var(--sf);border:1px solid var(--bd);border-radius:var(--r4);
  padding:26px;transition:all .25s;position:relative;overflow:hidden;
}
.te-card-sm::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(192,24,42,.04),transparent);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.te-card-sm:hover::before{opacity:1}
.te-card-sm:hover{
  border-color:rgba(192,24,42,.22);
  transform:translateY(-3px);
  box-shadow:var(--sh);
}
.te-card-sm .te-icon{margin-bottom:16px}
.te-card-sm .te-card-t{
  font-family:var(--f-d);font-size:1.05rem;color:var(--tx);
  margin-bottom:8px;font-weight:400;
}
.te-card-sm .te-card-d{font-size:.82rem;color:var(--tx2);line-height:1.65}

.te-card-row{
  background:var(--sf);border:1px solid var(--bd);border-radius:var(--r4);
  padding:20px 24px;display:flex;align-items:center;gap:0;transition:all .25s;
}
.te-card-row:hover{border-color:rgba(192,24,42,.2);box-shadow:var(--sh)}
.te-row-item{flex:1;display:flex;align-items:flex-start;gap:12px;padding:4px 0}
.te-row-divider{width:1px;height:44px;background:var(--bd);flex-shrink:0;margin:0 20px}
.te-icon-sm{
  width:36px;height:36px;border-radius:var(--r2);border:1px solid var(--bd);
  background:var(--sf2);display:flex;align-items:center;justify-content:center;
  color:var(--r);flex-shrink:0;
}
.te-row-t{font-size:.88rem;font-weight:600;color:var(--tx);margin-bottom:3px}
.te-row-d{font-size:.75rem;color:var(--tx2);line-height:1.5}

@media(max-width:768px){
  .trust-editorial{grid-template-columns:1fr}
  .te-card-row{flex-direction:column;gap:16px;align-items:flex-start}
  .te-row-divider{width:100%;height:1px;margin:8px 0}
}

/* ── Section logiciels métiers ─────────────────────────────────── */
.sw-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:48px;
}
.sw-card{
  background:var(--sf);
  border:1px solid var(--bd);
  border-radius:var(--r4);
  padding:28px;
  transition:border-color .25s,transform .25s,box-shadow .25s;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:0;
}
.sw-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(192,24,42,.05) 0%,transparent 55%);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.sw-card:hover::before{opacity:1}
.sw-card:hover{
  border-color:rgba(192,24,42,.28);
  transform:translateY(-3px);
  box-shadow:0 16px 48px rgba(0,0,0,.35);
}
.sw-icon{
  width:44px;height:44px;border-radius:var(--r3);
  border:1px solid var(--bd);background:var(--sf2);
  display:flex;align-items:center;justify-content:center;
  color:var(--r);margin-bottom:18px;flex-shrink:0;
  transition:background .25s,border-color .25s,color .25s;
}
.sw-card:hover .sw-icon{background:var(--r);color:#fff;border-color:var(--r)}
.sw-card-t{
  font-family:var(--f-d);font-size:1.05rem;
  color:var(--tx);margin-bottom:14px;font-weight:400;
}
.sw-tags{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:16px;
}
.sw-tag{
  padding:3px 10px;
  border:1px solid var(--bd);
  border-radius:var(--rp);
  font-size:.69rem;color:var(--tx3);
  background:var(--sf2);
  font-family:var(--f-s);letter-spacing:.01em;
  transition:border-color .2s,color .2s;
}
.sw-card:hover .sw-tag{border-color:rgba(192,24,42,.2);color:var(--tx2)}
/* Tags localisation : légèrement distincts */
.sw-tag--loc{
  color:var(--r);
  border-color:rgba(192,24,42,.25);
  background:rgba(192,24,42,.06);
}
.sw-card-d{display:none}
/* Card zone : accent rouge subtil */
.sw-card--zone{border-color:rgba(192,24,42,.15)}
.sw-card--zone:hover{border-color:rgba(192,24,42,.4)}

@media(max-width:1100px){.sw-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.sw-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.sw-grid{grid-template-columns:1fr;gap:12px}.sw-card{padding:22px}}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION ZONES D'INTERVENTION — Défilement cinématique perspective
   Inspiré du générique Star Wars — version sobre, premium, sans parodie.
   ══════════════════════════════════════════════════════════════════════════ */
#zones{
  position:relative;
  /* En dark mode : ne revient PLUS à var(--bg) en bas.
     Le fond reste #050509 jusqu'au bord — le fondu est
     géré par .s-atm--zones-exit qui chevauche #secteurs.  */
  background:linear-gradient(180deg,var(--bg) 0%,#050509 20%,#050509 100%);
  overflow:hidden;
  padding:clamp(80px,10vw,140px) 0 clamp(40px,6vw,80px);
}
[data-theme="light"] #zones{
  /* Blanc cassé froid · gris perle minéral · aucune warmth visible */
  background:linear-gradient(180deg,
    var(--bg)    0%,
    #f3f3f7     14%,
    #ebebf2     38%,
    #ebebf2     62%,
    #f3f3f7     86%,
    var(--bg)  100%
  );
}
.zn-glow{display:none}
.zn-head{position:relative;z-index:2}
/* dark mode : texte clair sur fond très sombre */
.zn-head .eye,.zn-head .h2,.zn-head .body-l{color:#ecedf5}
.zn-head .body-l{color:rgba(236,237,245,.62)}
/* light mode : texte sombre standard, l'eye récupère sa couleur rouge */
[data-theme="light"] .zn-head .eye{color:var(--r)}
[data-theme="light"] .zn-head .h2{color:var(--tx)}
[data-theme="light"] .zn-head .body-l{color:var(--tx2)}

.zn-stage{
  position:relative;
  margin-top:clamp(36px,5vw,68px);
  /* Plus haut = plus d'espace pour la profondeur cinématique */
  height:clamp(500px,66vh,740px);
  /* Perspective plus courte = effet de profondeur plus dramatique */
  perspective:240px;
  /* Point de fuite légèrement à l'intérieur — horizon cinéma */
  perspective-origin:50% 8%;
  overflow:hidden;
  isolation:isolate;
}

/* ── Horizon · fondu très agressif — le texte disparaît dans l'infini ── */
.zn-stage::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:48%;
  background:linear-gradient(to bottom,
    #050509  0%,
    #050509  22%,
    rgba(5,5,9,.97) 42%,
    rgba(5,5,9,.82) 60%,
    rgba(5,5,9,.45) 78%,
    rgba(5,5,9,.10) 92%,
    transparent    100%);
  z-index:4;pointer-events:none;
}
/* ── Sol · grand fondu bas — masque totalement l'entrée du texte ── */
.zn-stage::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;
  height:40%;
  background:linear-gradient(to top,
    #050509  0%,
    #050509  18%,
    rgba(5,5,9,.95) 38%,
    rgba(5,5,9,.72) 58%,
    rgba(5,5,9,.30) 78%,
    rgba(5,5,9,.06) 92%,
    transparent    100%);
  z-index:4;pointer-events:none;
}
/* Light mode — mêmes proportions, couleurs section */
[data-theme="light"] .zn-stage::before{
  background:linear-gradient(to bottom,
    #f3f3f7  0%,
    #f3f3f7  22%,
    rgba(243,243,247,.97) 42%,
    rgba(243,243,247,.82) 60%,
    rgba(243,243,247,.45) 78%,
    rgba(243,243,247,.10) 92%,
    transparent          100%);
}
[data-theme="light"] .zn-stage::after{
  background:linear-gradient(to top,
    #ebebf2  0%,
    #ebebf2  18%,
    rgba(235,235,242,.95) 38%,
    rgba(235,235,242,.72) 58%,
    rgba(235,235,242,.30) 78%,
    rgba(235,235,242,.06) 92%,
    transparent          100%);
}

.zn-tilt{
  position:absolute;inset:0;
  /* Plus d'inclinaison = vrai effet de table inclinée cinéma */
  transform:rotateX(30deg);
  transform-origin:50% 100%;
  /* overflow:hidden et transform-style:preserve-3d supprimés
     (cf. note compatibilité OVH — gérés par .zn-stage)          */
}

.zn-track{
  position:absolute;top:0;left:0;right:0;
  display:flex;flex-direction:column;
  /* -30s = démarre 30s dans la boucle, jamais au début de la liste */
  animation:znCrawl 165s linear -30s infinite;
  will-change:transform;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

.zn-list{
  list-style:none;margin:0;
  text-align:center;
  /* La liste 1 se termine avec une zone tampon —
     la liste 2 commence avec une zone tampon symétrique.
     Total : ~640px de vide autour de la jonction, toujours
     caché par les fades. La boucle est mathématiquement correcte
     (les deux listes ont la même hauteur totale = loop parfait). */
}
/* Zone tampon fin de liste 1 */
.zn-list:first-child{padding:0 0 320px}
/* Zone tampon début de liste 2 (aria-hidden) */
.zn-list+.zn-list{padding:320px 0 0}

.zn-list li{
  font-family:var(--f-d);
  font-size:clamp(1.45rem,2.7vw,2.15rem);
  font-weight:400;font-style:italic;
  color:#f47585;
  line-height:2.6;
  letter-spacing:.06em;
  text-shadow:0 0 28px rgba(192,24,42,.28),0 0 2px rgba(192,24,42,.18);
}
[data-theme="light"] .zn-list li{
  color:#9b1422;
  text-shadow:none;
  font-weight:300;
  letter-spacing:.08em;
}

/* Light mode .zn-stage : géré par les overlays ::before/::after */

@keyframes znCrawl{
  from{transform:translateY(0)}
  to  {transform:translateY(-50%)}
}

@media(prefers-reduced-motion:reduce){
  .zn-track{animation-duration:260s}
}
@media(max-width:760px){
  .zn-stage{height:clamp(400px,56vh,540px);perspective:200px}
  .zn-tilt{transform:rotateX(26deg)}
  .zn-list li{line-height:2.2}
}
@media(max-width:480px){
  .zn-stage{height:400px;perspective:180px}
  .zn-tilt{transform:rotateX(24deg)}
  .zn-list li{font-size:1.2rem;line-height:2}
}

/* ── Section témoignages — fond tartan premium ─────────────────── */
#temoignages{
  position:relative;overflow:hidden;
  background:var(--bg); /* base sombre — le tartan s'y superpose */
}
.testi-tartan-bg{position:absolute;inset:0;pointer-events:none}
.testi-tartan-bg .tartan{position:absolute;inset:-8%;opacity:.65}
/* Overlay dégradé : fondu haut/bas pour continuité avec les sections adjacentes */
.testi-tartan-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,
      var(--bg) 0%,
      transparent 18%,
      transparent 82%,
      var(--bg) 100%
    );
}
/* Glow rouge discret centré */
.testi-tartan-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 65% at 50% 50%,rgba(192,24,42,.13) 0%,transparent 65%),
    radial-gradient(ellipse 50% 40% at 20% 60%,rgba(192,24,42,.07) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 40%,rgba(192,24,42,.07) 0%,transparent 70%);
  z-index:0;
}
/* Light mode : tartan encore plus subtil + overlay plus opaque */
[data-theme="light"] #temoignages{background:var(--bg)}
[data-theme="light"] .testi-tartan-bg .tartan{opacity:.3}
[data-theme="light"] .testi-tartan-glow{
  background:radial-gradient(ellipse 90% 65% at 50% 50%,rgba(192,24,42,.06) 0%,transparent 65%);
}

/* ══════════════════════════════════════════════════════════════════════════
   CAROUSEL TÉMOIGNAGES — Architecture propre
   ──────────────────────────────────────────────────────────────────────────
   Structure : .ts-outer (flex row)
                ├── .ts-arrow.ts-prev (bouton)
                ├── .ts-viewport (overflow:hidden, flex:1)
                │    └── .ts-track (flex row, translateX par JS)
                │         └── .testi-card × N
                └── .ts-arrow.ts-next (bouton)
   ══════════════════════════════════════════════════════════════════════════ */

.ts-outer{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:48px;
  position:relative;
  isolation:isolate; /* stacking context propre — isole le carousel du reste */
}

/* Fondus sur les bords du viewport — purement visuels, ne capturent pas les clics */
.ts-outer::before,
.ts-outer::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:56px;
  pointer-events:none; /* CRITIQUE : ne jamais capturer les clics */
  z-index:3;
}
.ts-outer::before{
  left:60px;
  background:linear-gradient(90deg,var(--bg),transparent);
}
.ts-outer::after{
  right:60px;
  background:linear-gradient(-90deg,var(--bg),transparent);
}

/* Viewport : masque les cartes hors zone visible */
.ts-viewport{
  flex:1;
  min-width:0;
  overflow:hidden;
  position:relative;
  z-index:1;
}

/* Track : conteneur flex des cartes, animé en translateX */
.ts-track{
  display:flex;
  gap:20px;
  transition:transform .55s cubic-bezier(.22,.61,.36,1); /* easing premium */
  will-change:transform;
}

/* Cartes — largeur définie par JS */
.testi-card{
  flex:none;
  background:rgba(20,16,14,.72);
  border:1px solid rgba(192,24,42,.2);
  border-radius:var(--r4);
  padding:26px;
  transition:border-color .3s,box-shadow .3s,transform .3s;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.testi-card:hover{
  border-color:rgba(192,24,42,.5);
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 24px rgba(192,24,42,.14);
  transform:translateY(-2px);
}

/* Flèches — z-index élevé garantit qu'elles sont toujours cliquables */
.ts-arrow{
  width:46px;
  height:46px;
  border-radius:50%;
  flex-shrink:0;
  background:rgba(20,5,8,.78);
  border:1px solid rgba(192,24,42,.4);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .25s,border-color .25s,box-shadow .25s,transform .15s;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  position:relative;
  z-index:10; /* au-dessus de tout : viewport (z:1), pseudo fades (z:3) */
  pointer-events:auto;
}
.ts-arrow:hover:not(:disabled){
  background:rgba(192,24,42,.32);
  border-color:rgba(192,24,42,.85);
  box-shadow:0 0 24px rgba(192,24,42,.45);
}
.ts-arrow:active:not(:disabled){
  transform:scale(.94);
}
.ts-arrow:disabled{
  opacity:.3;
  cursor:default;
  pointer-events:none;
}
.ts-arrow svg{
  pointer-events:none; /* le SVG n'intercepte pas les clics — ils vont au bouton */
}

/* Ancien markup HTML (.ts-fade) — masqué, remplacé par les ::before/::after */
.ts-fade{display:none}
/* Light mode */
[data-theme="light"] .testi-card{
  background:rgba(252,252,255,.90);
  border-color:rgba(0,0,44,.10);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
[data-theme="light"] .testi-card:hover{
  background:rgba(255,255,255,.97);
  border-color:rgba(192,24,42,.32);
  box-shadow:0 10px 32px rgba(0,0,30,.08);
}
[data-theme="light"] .ts-arrow{
  background:rgba(247,247,251,.92);
  border-color:rgba(0,0,44,.14);
  color:var(--r);
}
.stars{display:none}
.testi-q{font-family:var(--f-d);font-style:italic;font-size:1.05rem;color:var(--tx);line-height:1.65;margin-bottom:18px}
.testi-by{display:flex;align-items:center;gap:10px}
.testi-av{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--r-d),var(--r));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-d);font-size:.95rem;color:#fff;
}
.testi-nm{font-size:.85rem;font-weight:600;color:var(--tx)}
.testi-rl{font-size:.74rem;color:var(--tx3)}
.testi-sr{font-size:.68rem;color:var(--r);font-weight:600;margin-top:1px}

.team-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:48px}
.team-card{
  flex:1;min-width:280px;background:var(--sf);border:1px solid var(--bd);
  border-radius:var(--r4);padding:32px;
  display:flex;flex-direction:column;
  transition:border-color .24s,transform .24s,box-shadow .24s;
}
.team-card:hover{border-color:var(--r-b);transform:translateY(-4px);box-shadow:0 0 40px var(--r-g),var(--sh)}
.team-av{
  width:72px;height:72px;border-radius:50%;
  background:var(--bg4);border:2px solid var(--r-b);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-d);font-size:1.8rem;color:var(--r);
  margin-bottom:16px;position:relative;
}
.team-on{position:absolute;bottom:2px;right:2px;width:14px;height:14px;background:#10b981;border-radius:50%;border:2px solid var(--bg2)}
.team-nm{font-family:var(--f-d);font-size:1.4rem;color:var(--tx);margin-bottom:2px}
.team-rl{font-size:.78rem;color:var(--r);font-weight:600;letter-spacing:.04em;margin-bottom:14px}
.team-bio{font-size:.84rem;color:var(--tx2);line-height:1.65;margin-bottom:18px}
.team-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.team-btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border:1px solid var(--bd);border-radius:var(--rp);font-size:.77rem;font-weight:600;
  color:var(--tx2);background:var(--sf2);
  transition:border-color .18s,color .18s,background .18s;
  cursor:pointer;position:relative;z-index:2;text-decoration:none;
  pointer-events:auto !important;
}
.team-btn:hover{border-color:var(--r-b);color:var(--r);background:var(--r-s)}
.team-btn:focus-visible{outline:2px solid var(--r);outline-offset:3px;border-color:var(--r-b);color:var(--r);background:var(--r-s)}

.faq-wrap{max-width:820px;margin:48px auto 0}
.faq-item{border-bottom:1px solid var(--bd)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:22px 4px;cursor:pointer;user-select:none;
  -webkit-user-select:none;text-align:left;
  background:none;border:none;color:inherit;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s;
  border-radius:8px;
}
.faq-q:hover{background:var(--r-s)}
.faq-q:hover .faq-icon{border-color:var(--r-b);color:var(--r)}
.faq-q:focus-visible{outline:2px solid var(--r);outline-offset:4px}
.faq-qt{
  font-size:.95rem;font-weight:600;color:var(--tx);
  transition:color .2s;flex:1;
}
.faq-icon{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--tx3);
  transition:background .25s,border-color .25s,color .25s,transform .35s;
}
.faq-q[aria-expanded="true"] .faq-icon,
.faq-item.open .faq-icon{
  background:var(--r);border-color:var(--r);color:#fff;
}
.faq-icon svg{
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.faq-q[aria-expanded="true"] .faq-icon svg,
.faq-item.open .faq-icon svg{transform:rotate(45deg)}
.faq-a{
  overflow:hidden;
  height:0;
  transition:height .38s cubic-bezier(.4,0,.2,1);
}
.faq-a-inner{
  padding-bottom:20px;
  font-size:.87rem;color:var(--tx2);line-height:1.75;
}

.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:48px;align-items:start}
.fg{margin-bottom:18px}
.fl{display:block;font-size:.78rem;font-weight:600;color:var(--tx);margin-bottom:7px}
.fi{
  width:100%;background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r3);
  padding:13px 15px;color:var(--tx);font-family:var(--f-b);font-size:.88rem;transition:all .2s;
}
.fi:focus{outline:none;border-color:var(--r);box-shadow:0 0 0 3px var(--r-g)}
.fi:focus-visible{outline:none;border-color:var(--r);box-shadow:0 0 0 3px var(--r-g)}
.fi::placeholder{color:var(--tx3)}
/* Validation native — visible UNIQUEMENT si le champ contient un contenu invalide
   (pas affichée pour les champs vides — la validation HTML5 native s'occupe du "required") */
.fi:user-invalid:not(:placeholder-shown){border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.fi:user-invalid:not(:placeholder-shown):focus{box-shadow:0 0 0 3px rgba(220,38,38,.22)}
.fi:user-valid:not(:placeholder-shown){border-color:rgba(16,185,129,.45)}
textarea.fi{resize:vertical;min-height:110px;line-height:1.6}
select.fi{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23878aa2' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fcheck{display:flex;align-items:flex-start;gap:10px;font-size:.77rem;color:var(--tx2);margin-bottom:16px}
.fcheck input{accent-color:var(--r);margin-top:2px;flex-shrink:0}
.fcheck input:focus-visible{outline:2px solid var(--r);outline-offset:2px}
.c-blocks{display:flex;flex-direction:column;gap:14px}
.cblk{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r3);padding:20px;transition:border-color .2s}
.cblk:hover{border-color:var(--bd2)}
.c-lbl{font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-bottom:6px}
.c-val{font-size:.95rem;font-weight:600;color:var(--tx)}
.c-lnk{color:var(--r);transition:opacity .18s}
.c-lnk:hover{opacity:.8}
.c-sub{font-size:.73rem;color:var(--tx3);margin-top:3px}
.c-map{height:160px;border-radius:var(--r3);border:1px solid var(--bd);overflow:hidden;background:var(--bg3);margin-top:10px}
.c-map iframe{width:100%;height:100%;border:none;filter:grayscale(.8) opacity(.65)}
.c-sos{background:var(--r-s);border:1px solid var(--r-b);border-radius:var(--r3);padding:18px}
.c-sos h4{font-family:var(--f-d);font-size:.95rem;color:var(--r);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.c-sos p{font-size:.8rem;color:var(--tx2);margin-bottom:12px}

footer{position:relative;overflow:hidden;border-top:1px solid var(--bd);padding:72px 0 32px}
.ft-tartan-bg{position:absolute;inset:0;pointer-events:none}
.ft-tartan-bg .tartan{position:absolute;inset:0;opacity:.35}
.ft-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:var(--bg2);opacity:.82;
}
[data-theme="light"] .ft-overlay{background:var(--bg2);opacity:.88}
.ft-content{position:relative;z-index:1}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(20px,4vw,48px);margin-bottom:48px}
.ft-brand .logo{margin-bottom:14px}
.ft-desc{font-size:.83rem;color:var(--tx2);line-height:1.7;max-width:260px;margin-bottom:18px}
.ft-soc{display:flex;gap:8px}
.fsoc{width:36px;height:36px;border-radius:var(--r2);border:1px solid var(--bd);background:var(--sf);display:flex;align-items:center;justify-content:center;color:var(--tx2);transition:all .18s}
.fsoc:hover{background:var(--r);border-color:var(--r);color:#fff}
.ft-col h4{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx);margin-bottom:14px}
.ft-lnks{display:flex;flex-direction:column;gap:9px}
.ft-lnks a{font-size:.83rem;color:var(--tx2);transition:color .18s}
.ft-lnks a:hover{color:var(--r)}
.ft-bottom{border-top:1px solid var(--bd);padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.74rem;color:var(--tx3)}
.ft-bottom a{color:var(--tx3);transition:color .18s}
.ft-bottom a:hover{color:var(--tx2)}

.ft-cert{display:flex;flex-direction:column;gap:10px}
.ft-cert-eye{
  font-family:var(--f-d);font-size:.68rem;letter-spacing:2px;
  text-transform:uppercase;color:var(--r);font-weight:600;
}
.ft-cert-badge{
  display:block;padding:10px 12px;border-radius:var(--r2);
  background:rgba(255,255,255,.04);border:1px solid var(--bd);
  transition:background .25s, border-color .25s, transform .35s, box-shadow .35s;
  max-width:230px;
}
.ft-cert-badge img{
  display:block;height:auto;width:100%;max-width:200px;
  filter:drop-shadow(0 2px 8px rgba(0,0,30,.3));
  transition:filter .35s;
}
.ft-cert-badge:hover{
  background:rgba(255,255,255,.07);border-color:var(--r-b);
  transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(192,24,42,.18);
}
.ft-cert-badge:hover img{filter:drop-shadow(0 4px 14px rgba(80,60,200,.45))}
.ft-cert-sub{font-size:.72rem;color:var(--tx3);line-height:1.5;max-width:230px}
[data-theme="light"] .ft-cert-badge{background:rgba(255,255,255,.55);border-color:var(--bd2)}
[data-theme="light"] .ft-cert-badge:hover{background:#fff;border-color:var(--r-b)}

/* CRITIQUE : pointer-events:none sur le wrapper du chatbot (tous écrans).
   Sinon, son conteneur (qui s'étend en hauteur à cause de #cb-win masqué)
   intercepte les clics sur tous les éléments en dessous (ex: flèche droite du carousel).
   Les enfants interactifs (toggle bouton, fenêtre ouverte) ré-activent pointer-events:auto. */
#cb-wrap{
  position:fixed;
  bottom:calc(92px + env(safe-area-inset-bottom));
  right:24px;
  z-index:800;
  pointer-events:none;
}
#cb-wrap > *{pointer-events:auto}
#cb-win:not(.open){pointer-events:none}
@media(max-width:480px){
  #cb-wrap{bottom:calc(86px + env(safe-area-inset-bottom));right:14px;left:14px}
  #cb-win{width:calc(100vw - 28px);max-width:100%;border-radius:18px}
  .cb-msgs{max-height:55vh;min-height:200px}
}

#cb-win{
  width:min(360px,calc(100vw - 48px));
  background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r5);
  box-shadow:var(--sh2);overflow:hidden;display:flex;flex-direction:column;
  transform:scale(.85) translateY(18px);opacity:0;pointer-events:none;
  transition:all .28s cubic-bezier(.4,0,.2,1);transform-origin:bottom right;
}
#cb-win.open{transform:none;opacity:1;pointer-events:all}

.cb-head{position:relative;overflow:hidden;padding:14px 18px;display:flex;align-items:center;gap:12px}
.cb-head-tartan{position:absolute;inset:0;pointer-events:none}
.cb-head-tartan .tartan{position:absolute;inset:-5%;opacity:.8}
.cb-head-overlay{position:absolute;inset:0;background:linear-gradient(135deg,var(--r-d),var(--r));pointer-events:none}
.cb-head-content{position:relative;z-index:1;display:flex;align-items:center;gap:12px;width:100%}
.cb-av{width:42px;height:42px;border-radius:50%;background:rgba(192,24,42,.22);border:1.5px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;box-shadow:0 0 0 1px rgba(192,24,42,.35),inset 0 1px 0 rgba(255,255,255,.18),0 0 14px rgba(192,24,42,.2)}
.cb-av-logo{width:66%;height:66%;object-fit:contain;filter:brightness(0) invert(1);display:block}
[data-theme="light"] .cb-av{background:rgba(192,24,42,.18);box-shadow:0 0 0 1px rgba(192,24,42,.3),inset 0 1px 0 rgba(255,255,255,.3),0 0 10px rgba(192,24,42,.15)}
.cb-online-dot{position:absolute;bottom:0;right:0;width:11px;height:11px;background:#10b981;border-radius:50%;border:2px solid var(--r)}
.cb-info h4{font-size:.88rem;font-weight:700;color:#fff}
.cb-info p{font-size:.7rem;color:rgba(255,255,255,.65)}
.cb-close-btn{margin-left:auto;background:rgba(255,255,255,.15);border:none;color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s;flex-shrink:0}
.cb-close-btn:hover{background:rgba(255,255,255,.28)}
.cb-api-note{background:var(--r-s);border:1px solid var(--r-b);border-radius:var(--r2);padding:9px 13px;margin:12px;font-size:.73rem;color:var(--r-txt);line-height:1.5;display:none}
.cb-msgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:250px;max-height:340px;scroll-behavior:smooth}
.cb-msgs::-webkit-scrollbar{width:3px}
.cb-msgs::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px}
.cb-m{max-width:88%;min-width:0;animation:mIn .26s ease}
@keyframes mIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.cb-m.bot{align-self:flex-start}
.cb-m.user{align-self:flex-end}
.cb-bub{padding:9px 13px;border-radius:var(--r3);font-size:.82rem;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;overflow:hidden}
.cb-m.bot .cb-bub{background:var(--sf3);border:1px solid var(--bd);color:var(--tx);border-bottom-left-radius:4px}
.cb-m.user .cb-bub{background:var(--r);color:#fff;border-bottom-right-radius:4px}
/* Lien texte standard dans une bulle */
.cb-bub a.cb-lnk{color:var(--r-txt);text-decoration:underline;text-decoration-color:rgba(192,24,42,.35);text-underline-offset:2px;transition:text-decoration-color .18s}
.cb-bub a.cb-lnk:hover{text-decoration-color:var(--r-txt)}
.cb-m.user .cb-bub a.cb-lnk{color:rgba(255,255,255,.9);text-decoration-color:rgba(255,255,255,.4)}
/* Bouton-lien premium pour les URLs importantes (Connect'Inove, etc.) */
.cb-lnk-btn{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:6px 12px;background:var(--r-s);border:1px solid var(--r-b);border-radius:var(--r2);color:var(--r-txt);font-size:.76rem;font-weight:600;letter-spacing:.02em;text-decoration:none;transition:background .18s,border-color .18s;cursor:pointer}
.cb-lnk-btn:hover{background:var(--r);color:#fff;border-color:var(--r)}
[data-theme="light"] .cb-lnk-btn:hover{background:var(--r);color:#fff}
.cb-ts{font-size:.64rem;color:var(--tx3);margin-top:3px;padding:0 3px}
.cb-m.user .cb-ts{text-align:right}
.cb-quick{padding:12px 14px;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--bd)}
.cb-qb{padding:7px 14px;border:1px solid var(--bd);border-radius:var(--rp);font-size:.74rem;font-weight:500;letter-spacing:.1px;color:var(--tx2);background:var(--sf);cursor:pointer;transition:all .2s}
.cb-qb:hover{border-color:var(--r-b);color:var(--r);background:var(--r-s)}
.cb-foot{padding:10px 14px;border-top:1px solid var(--bd);display:flex;gap:8px}
#cbInp{flex:1;background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r2);padding:9px 13px;color:var(--tx);font-family:var(--f-b);font-size:.83rem;transition:border-color .18s}
#cbInp:focus{outline:none;border-color:var(--r-b)}
#cbSnd{width:36px;height:36px;background:var(--r);color:#fff;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;transition:background .18s;flex-shrink:0}
#cbSnd:hover{background:var(--r-d)}
.tdot{width:6px;height:6px;background:var(--tx3);border-radius:50%;animation:tdB 1.1s ease-in-out infinite}
.tdot:nth-child(2){animation-delay:.15s}.tdot:nth-child(3){animation-delay:.3s}
@keyframes tdB{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}

#pill{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);
  z-index:700;width:min(520px,calc(100vw - 32px));
  display:flex;align-items:center;gap:10px;
  border-radius:var(--rp);padding:8px 10px 8px 18px;
  opacity:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s;
  
  background:var(--gl);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  border:1px solid var(--r-b);
  box-shadow:0 0 50px var(--r-g2),var(--sh2);
  overflow:hidden;
}

.pill-tartan{position:absolute;inset:0;pointer-events:none;z-index:0}
.pill-tartan .tartan-light{position:absolute;inset:0;opacity:.7}

.pill-stripe{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--r),var(--r-l),var(--r),transparent);pointer-events:none;z-index:1}
#pill{pointer-events:none}
#pill.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}

/* ============================================================
   MOBILE FOOTER SAFETY — links must NEVER be in the unsafe zone
   ============================================================ */
@media (max-width: 900px){
  /* 1) Big padding-bottom: footer links pushed far from screen edge */
  footer{
    padding:60px 0 calc(160px + env(safe-area-inset-bottom)) !important;
  }
  /* 2) Pill stays, but cannot cover footer because of (1) padding + JS hide-near-footer */
  /* 3) Chat wrapper protection — déjà géré globalement par #cb-wrap{pointer-events:none} */
  /* 4) Every footer link forced to its own stacking layer + tap target */
  .ft-lnks a, .ft-bottom a{
    position:relative;
    z-index:1;
    display:block;
    min-height:44px;
    padding:6px 0;
    pointer-events:auto !important;
  }
  /* 5) Footer columns stack with breathing room */
  .ft-grid{gap:32px !important}
}
.pill-txt{flex:1;min-width:0;position:relative;z-index:2}
.pill-txt strong{font-size:.82rem;font-weight:700;color:var(--tx);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill-txt span{font-size:.72rem;color:var(--tx2)}
.pill-dl{
  display:flex;align-items:center;gap:8px;
  background:var(--r);color:#fff;padding:10px 20px;border-radius:var(--rp);
  font-size:.84rem;font-weight:700;white-space:nowrap;flex-shrink:0;
  box-shadow:0 2px 16px rgba(192,24,42,.4);
  transition:background .18s;position:relative;z-index:2;
}
.pill-dl:hover{background:var(--r-d)}
.pill-chat{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--bd2);
  background:var(--sf2);display:flex;align-items:center;justify-content:center;
  color:var(--tx2);transition:all .18s;flex-shrink:0;position:relative;z-index:2;
}
.pill-chat:hover{border-color:var(--r-b);color:var(--r)}

.sr{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
.sr.v{opacity:1;transform:none}

/* ── H1 hero : reveal CSS pur, indépendant du scroll/JS (LCP optimisé) ──────
   Le H1 n'utilise PAS .sr (qui attend l'IntersectionObserver JS ~200ms).
   Animation déclenchée immédiatement au parse CSS → LCP enregistré dès la
   1ère frame (opacity > 0), sans attente JavaScript ni scroll.
   Élégance conservée : léger fondu + montée de 16px sur 0.6s. */
.hero-h-in{
  /* opacity:1 en permanence → le H1 (plus grand élément) est "contentful"
     dès la 1ère frame → LCP = First Paint, jamais retardé.
     Seul le transform (montée) est animé → n'affecte PAS la candidature LCP. */
  opacity:1;
  animation: heroHIn .6s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes heroHIn{
  from{ transform:translateY(18px) }
  to  { transform:none }
}
@media (prefers-reduced-motion: reduce){
  .hero-h-in{ animation:none; transform:none }
}

/* MOBILE: scroll-reveal — short slide-up (12px instead of 28px) + fast fade.
   Animation is brief enough that taps are reliable. JS safety timer (1.5s)
   force-shows anything the observer missed. */
@media (max-width: 900px){
  .sr{
    transform: translateY(12px) !important;
    transition: opacity .45s ease, transform .45s ease !important;
  }
  .sr.v{transform: none !important}
  .sr.d1, .sr.d2, .sr.d3{transition-delay:.05s !important}
  .sr.d4, .sr.d5{transition-delay:.1s !important}
  .sr.d6, .sr.d7, .sr.d8{transition-delay:.1s !important}
  body.page-leaving{ pointer-events: auto !important; }
}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
.d4{transition-delay:.4s}.d5{transition-delay:.5s}
.d6{transition-delay:.6s}.d7{transition-delay:.7s}.d8{transition-delay:.8s}

@media(max-width:900px){
  .nav-links{display:none}
  #mbBtn{display:flex}
  #nav{height:68px}
  #hero{padding-top:68px}
  #drw{inset:68px 0 0}
  .brand-img{height:48px}
  .logo{height:48px}
  /* MOBILE-FIRST SIMPLIFICATION:
     The decorative tartan panel is removed entirely on mobile.
     Replaced by a single CSS background-image on #hero — no positioned
     layers, no pseudo-elements, no stacking gymnastics, no possible tap interception.
     ✦ Pattern tartan complet (identique à la classe .tartan) appliqué sur tout le hero. */
  .hero-tartan-panel,
  .hero-tartan-panel *,
  .hero-tartan-panel::before,
  .hero-tartan-panel::after{
    display:none !important;
  }
  #hero{
    background-color:var(--bg);
    background-image:
      /* 1) Vignette : assombrit les bords pour lisibilité du texte */
      radial-gradient(ellipse 130% 100% at 50% 50%,transparent 18%,rgba(4,2,2,.62) 100%),
      /* 2) Glow rouge central : ambiance premium */
      radial-gradient(ellipse 100% 60% at 50% 40%,rgba(192,24,42,.14) 0%,transparent 70%),
      /* 3) Tartan horizontal — bandes rouges multi-épaisseurs */
      repeating-linear-gradient(0deg,
        transparent 0px,
        var(--tar-r1) 0px, var(--tar-r1) 8px,
        transparent 8px, transparent 12px,
        var(--tar-r2) 12px, var(--tar-r2) 20px,
        transparent 20px, transparent 24px,
        var(--tar-r1) 24px, var(--tar-r1) 32px,
        transparent 32px, transparent 34px,
        var(--tar-dk) 34px, var(--tar-dk) 36px,
        transparent 36px, transparent 48px,
        var(--tar-r2) 48px, var(--tar-r2) 52px,
        transparent 52px, transparent 60px,
        var(--tar-dk) 60px, var(--tar-dk) 62px,
        transparent 62px, transparent 68px,
        var(--tar-r1) 68px, var(--tar-r1) 76px,
        transparent 76px, transparent 80px,
        var(--tar-r2) 80px, var(--tar-r2) 88px,
        transparent 88px, transparent 96px,
        var(--tar-r1) 96px, var(--tar-r1) 104px,
        transparent 104px, transparent 112px
      ),
      /* 4) Tartan vertical — même pattern croisé pour effet écossais */
      repeating-linear-gradient(90deg,
        transparent 0px,
        var(--tar-r1) 0px, var(--tar-r1) 8px,
        transparent 8px, transparent 12px,
        var(--tar-r2) 12px, var(--tar-r2) 20px,
        transparent 20px, transparent 24px,
        var(--tar-r1) 24px, var(--tar-r1) 32px,
        transparent 32px, transparent 34px,
        var(--tar-dk) 34px, var(--tar-dk) 36px,
        transparent 36px, transparent 48px,
        var(--tar-r2) 48px, var(--tar-r2) 52px,
        transparent 52px, transparent 60px,
        var(--tar-dk) 60px, var(--tar-dk) 62px,
        transparent 62px, transparent 68px,
        var(--tar-r1) 68px, var(--tar-r1) 76px,
        transparent 76px, transparent 80px,
        var(--tar-r2) 80px, var(--tar-r2) 88px,
        transparent 88px, transparent 96px,
        var(--tar-r1) 96px, var(--tar-r1) 104px,
        transparent 104px, transparent 112px
      );
  }
  [data-theme="light"] #hero{
    background-color:var(--bg);
    background-image:
      radial-gradient(ellipse 130% 100% at 50% 50%,transparent 22%,rgba(240,240,248,.55) 100%),
      repeating-linear-gradient(0deg,
        transparent 0px,
        var(--tar-r1) 0px, var(--tar-r1) 8px,
        transparent 8px, transparent 12px,
        var(--tar-r2) 12px, var(--tar-r2) 20px,
        transparent 20px, transparent 24px,
        var(--tar-r1) 24px, var(--tar-r1) 32px,
        transparent 32px, transparent 34px,
        var(--tar-dk) 34px, var(--tar-dk) 36px,
        transparent 36px, transparent 48px,
        var(--tar-r2) 48px, var(--tar-r2) 52px,
        transparent 52px, transparent 60px,
        var(--tar-dk) 60px, var(--tar-dk) 62px,
        transparent 62px, transparent 68px,
        var(--tar-r1) 68px, var(--tar-r1) 76px,
        transparent 76px, transparent 80px,
        var(--tar-r2) 80px, var(--tar-r2) 88px,
        transparent 88px, transparent 96px,
        var(--tar-r1) 96px, var(--tar-r1) 104px,
        transparent 104px, transparent 112px
      ),
      repeating-linear-gradient(90deg,
        transparent 0px,
        var(--tar-r1) 0px, var(--tar-r1) 8px,
        transparent 8px, transparent 12px,
        var(--tar-r2) 12px, var(--tar-r2) 20px,
        transparent 20px, transparent 24px,
        var(--tar-r1) 24px, var(--tar-r1) 32px,
        transparent 32px, transparent 34px,
        var(--tar-dk) 34px, var(--tar-dk) 36px,
        transparent 36px, transparent 48px,
        var(--tar-r2) 48px, var(--tar-r2) 52px,
        transparent 52px, transparent 60px,
        var(--tar-dk) 60px, var(--tar-dk) 62px,
        transparent 62px, transparent 68px,
        var(--tar-r1) 68px, var(--tar-r1) 76px,
        transparent 76px, transparent 80px,
        var(--tar-r2) 80px, var(--tar-r2) 88px,
        transparent 88px, transparent 96px,
        var(--tar-r1) 96px, var(--tar-r1) 104px,
        transparent 104px, transparent 112px
      );
  }
  .hero-content{padding:clamp(36px,8vw,56px) 0 clamp(24px,6vw,40px)}
  .hero-tag{margin-bottom:18px}
  .hero-h{margin-bottom:16px}
  .hero-sub{margin-bottom:24px;font-size:.93rem;line-height:1.76;max-width:100%}
  .hero-ctas{margin-bottom:36px;gap:10px}
  .hero-creds{width:100%}
  .trust-grid{grid-template-columns:1fr}
  .contact-layout{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ci-steps{grid-template-columns:1fr;gap:20px}
  .ci-arr{display:none}
  #pill{width:calc(100vw - 32px)}
  .pill-txt span{display:none}
}
/* Tailles gérées par JS — pas de règles CSS ici */
@media(max-width:640px){
  .ts-arrow{width:38px;height:38px}
  .ts-outer{gap:8px}
  /* Repositionne les fades : flèche 38px + gap 8px = 46px */
  .ts-outer::before{left:46px}
  .ts-outer::after{right:46px}
}
@media(max-width:640px){
  .disp{font-size:clamp(2rem,8.5vw,2.75rem);line-height:1.1;letter-spacing:-.1px}
  .tb-strip{flex-direction:column}
  .tb-sep{width:80%;height:1px;background:linear-gradient(90deg,transparent,var(--bd) 50%,transparent)}
  .secteur-grid{grid-template-columns:1fr}
  .fr{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr}
  .nav-r .btn{display:none}
  .ci-pricing{flex-direction:column}
  .ci-pricing-item:first-child{border-right:none;border-bottom:1px solid var(--bd)}
}
@supports(padding-bottom:env(safe-area-inset-bottom)){
  #pill{bottom:calc(20px + env(safe-area-inset-bottom))}
  #cb-wrap{bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

@keyframes pageFadeIn{
  from{opacity:0;transform:scale(1.01)}
  to{opacity:1;transform:none}
}
body.page-entering{animation:pageFadeIn .6s cubic-bezier(.4,0,.2,1) both}
body.page-leaving{
  animation:none;
  transition:opacity .35s ease,transform .35s ease;
  opacity:0;transform:scale(.99);pointer-events:none;
}

.histoire-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--tx);font-weight:600;
  border-bottom:1px solid rgba(192,24,42,.4);
  padding-bottom:1px;
  cursor:pointer;
  transition:all .22s cubic-bezier(.4,0,.2,1);
  text-decoration:none;
  position:relative;
}
.histoire-link::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:var(--r);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.histoire-link:hover::after{transform:scaleX(1)}
.histoire-link:hover{color:var(--r)}
.histoire-link svg{
  width:13px;height:13px;flex-shrink:0;
  opacity:.6;transition:all .22s;
  transform:translateX(0);
}
.histoire-link:hover svg{opacity:1;transform:translateX(3px)}

/* — Hero CTAs hardening (mobile click reliability) — */
.hero-content,
.hero-content > *{
  position:relative;
  z-index:11;
}
.hero-ctas{
  position:relative;
  z-index:12;
  pointer-events:auto;
}
.hero-ctas .btn,
.hero-ctas a,
.histoire-link,
.btn,
.ci-btn{
  position:relative;
  z-index:12;
  touch-action:manipulation;          /* removes 300ms tap delay on mobile */
  -webkit-tap-highlight-color:rgba(192,24,42,.18);
  pointer-events:auto;
  cursor:pointer;
}
/* Make sure children (SVG, span) don't steal taps from the anchor/button */
.hero-ctas .btn *,
.histoire-link *,
.btn *,
.ci-btn *{
  pointer-events:none;
}

/* — Defensive: any decorative full-cover overlay must NOT capture taps. — */
.tartan,
.tartan-light,
[class*="-tartan"],
[class*="-tartan"]::before,
[class*="-tartan"]::after,
[class*="-overlay"],
[class*="-overlay"]::before,
[class*="-overlay"]::after,
[class*="-glow"],
[class*="-glow"]::before,
[class*="-glow"]::after,
[class*="-mask"],
[class*="-mask"]::before,
[class*="-mask"]::after,
[class*="-veil"],
[class*="-veil"]::before,
[class*="-veil"]::after,
.hero-tartan-panel,
.hero-tartan-panel *,
.hero-tartan-panel::before,
.hero-tartan-panel::after,
.ft-tartan-bg,
.ft-tartan-bg *,
.hh-bg,
.hh-bg *,
.hh-orb-r,
.hh-orb-n,
#prog{
  pointer-events:none;
}

/* — But interactive elements ALWAYS receive taps — */
a,button,input,textarea,select,label,
[role="button"],[role="link"],[role="switch"],[role="dialog"]{
  pointer-events:auto;
}

/* =========================================================================
   MOBILE INTERACTIONS HARDENING
   Goal: every interactive element responds instantly on touch, regardless of
   theme, layer or stacking. No 300ms delay, no iOS hover ghost, no dead zones.
   ========================================================================= */

/* 1) Touch responsiveness on every interactive element */
a, button, input, textarea, select, label,
[role="button"], [role="link"], [role="switch"], [role="tab"],
.btn, .nav-a, .drw-a, .faq-q, .ci-btn, .sec-chip, .testi-card,
.secteur-card, .te-card, .sit-card, .vm-card,
.pill-dl, .pill-chat, .cb-qb, .cb-close-btn, .cb-snd, .fsoc,
.histoire-link, .legal-back, .nav-back, .ft-cert-badge, .ft-lnks a,
.team-btn,
#mbBtn, #thBtn, .ck-toggle, .ck-btn{
  touch-action: manipulation;                        /* removes 300ms tap delay */
  -webkit-tap-highlight-color: rgba(192,24,42,.16);  /* visible tap feedback */
}

/* 2) Disable hover effects on touch-only devices (iOS double-tap fix) */
@media (hover: none){
  .btn-r:hover{background:var(--r);transform:none;box-shadow:0 2px 20px rgba(192,24,42,.35)}
  .btn-o:hover{border-color:var(--bd2);color:var(--tx);background:var(--sf);transform:none}
  .nav-a:hover{color:var(--tx2);background:transparent}
  .drw-a:hover{color:var(--tx)}
  .tb-item:hover{background:transparent}
  .tb-item:hover .tb-icon{transform:none}
  .secteur-card:hover,
  .te-card:hover,
  .sit-card:hover,
  .testi-card:hover,
  .vm-card:hover,
  .ft-cert-badge:hover{transform:none;box-shadow:none}
  .secteur-card:hover .sec-ico{background:transparent;color:var(--r);border-color:var(--bd)}
  .faq-q:hover{background:transparent}
  .histoire-link:hover{color:var(--tx)}
  .histoire-link:hover::after{transform:scaleX(0)}
  .logo:hover .brand-img{transform:none}
  .fsoc:hover{border-color:var(--bd);color:var(--tx2);background:var(--sf)}
  .team-btn:hover{border-color:var(--bd);color:var(--tx2);background:var(--sf2)}
  .ci-btn:hover{background:var(--r);transform:none}
}

/* 3) Minimum tap target — Apple HIG / Material requires 44x44 minimum */
@media (max-width: 900px){
  .btn{min-height:48px;padding:14px 24px}
  .btn-lg{min-height:52px;padding:16px 28px}
  .btn-sm{min-height:40px}
  .nav-a, .drw-a, .ft-lnks a{min-height:44px;display:flex;align-items:center}
  .faq-q{min-height:56px;padding:18px 4px}
  #mbBtn, #thBtn{min-width:44px;min-height:44px}
  .cb-qb{min-height:38px;padding:9px 16px}
  .fsoc{min-width:40px;min-height:40px}
  .team-btn{min-height:44px;padding:10px 14px}
  .ck-toggle{min-width:46px;min-height:30px}
  .ck-btn{min-height:46px}
}

/* 4) Critical CTAs — explicit layering + tap reliability */
.hero-content,
.hero-content > *,
.hero-sub,
.hero-ctas,
.histoire-link,
.btn,
.ci-btn{
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

/* 5) Active state — instant visual confirmation on tap */
.btn:active,
.ci-btn:active,
.histoire-link:active,
.cb-qb:active,
.ck-btn:active,
.nav-back:active,
.legal-back:active{
  transform: scale(.98);
  transition: transform .06s ease;
}

/* — Typography polish — secondary text legibility (subtle premium bump) — */
:root{--tx2:#b3a3a3;--tx3:#7e6e74}
[data-theme="light"]{--tx2:#4c4c66;--tx3:#8e8ea8}

.sec-d{font-size:.92rem;line-height:1.7}
.te-card-d{font-size:.9rem;line-height:1.72}
.te-card-sm .te-card-d{font-size:.88rem;line-height:1.68}
.testi-q{font-size:1.02rem;line-height:1.75}
.team-bio{font-size:.92rem;line-height:1.72}
.svc-d{font-size:.9rem;line-height:1.7}
.ci-sd{font-size:.86rem;line-height:1.65}
.trust-d{font-size:.9rem;line-height:1.72}
.sit-txt p{font-size:.85rem;line-height:1.6}

.sec-chip{font-size:.74rem;padding:4px 11px}
.team-tag{font-size:.78rem}

.hc-lbl{font-size:.76rem;letter-spacing:.05em}

/* ================================================================
   CONTINUITÉ VISUELLE — Système atmosphérique Optinove
   Deux couches uniquement : grain de fond · vignettes neutres.
   Aucune couleur visible. Aucun effet lumineux. Aucune animation.
   ================================================================ */

/* ── 1. Grain cinématographique global ──────────────────────────
   Texture pellicule imperceptible en isolation.
   Présente partout, elle unifie l'espace sans attirer l'œil.     */
#atm-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
  opacity: .016;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: grainDrift 1.1s steps(3) infinite;
  will-change: background-position;
}
@keyframes grainDrift {
  0%   { background-position: 0 0 }
  33%  { background-position: -66px 32px }
  66%  { background-position: 42px -58px }
  100% { background-position: 0 0 }
}
[data-theme="light"] #atm-grain { display: none }

/* ── 2. Ponts de jonction inter-sections ────────────────────────
   Les divs .s-atm sont présents dans le HTML mais invisibles.
   Seul leur impact est conservé : les fonds de sections se
   fondent naturellement via les gradients inline (logiciels, faq).
   Les enfants .s-atm-h/.s-atm-v ne sont plus que des shims vides. */
.s-atm          { position: relative; height: 0; pointer-events: none }
.s-atm-h        { display: none }
.s-atm-v        { display: none }
.s-atm--hot .s-atm-h { display: none }

/* ── 3. Vignette de jonction — ombre neutre très subtile ────────
   Légère assombrissement centré à la frontière des sections.
   Crée de la profondeur sans couleur — comme un pli de page.
   Opacity ≈ 6% : visible uniquement si cherché activement.         */
.s-atm::before {
  content: '';
  display: block;
  position: absolute;
  left: 0; right: 0;
  top: -60px;
  height: 120px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,8,.055) 45%,
    rgba(0,0,8,.055) 55%,
    transparent 100%);
  pointer-events: none;
}
[data-theme="light"] .s-atm::before { display: none }

/* ── Transition cinématique spéciale : zones → secteurs ─────────────
   Le crawl Star Wars s'évanouit dans l'obscurité — la section suivante
   "émerge" lentement comme une scène qui apparaît dans le noir.

   Mécanique :
   · height réelle → crée du volume visuel au lieu du height:0 habituel
   · margin-bottom négatif → chevauchement sur le début de #secteurs
   · z-index:5 → s'affiche PAR-DESSUS le début statique de #secteurs
   · pointer-events:none → #secteurs reste entièrement interactif
   · Gradient 9 paliers → fondu très progressif sans saut visible       */
.s-atm--zones-exit {
  height: clamp(260px, 34vw, 380px);
  /* Tire #secteurs vers le haut : crée le chevauchement */
  margin-bottom: clamp(-130px, -17vw, -190px);
  position: relative;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to bottom,
    #050509                  0%,
    #050509                  14%,
    rgba(5,5,9,.96)          26%,
    rgba(5,5,9,.84)          38%,
    rgba(5,5,9,.64)          52%,
    rgba(5,5,9,.38)          66%,
    rgba(5,5,9,.16)          80%,
    rgba(5,5,9,.04)          92%,
    transparent             100%
  );
}
/* Neutralise le vignette générique — ce pont a ses propres règles */
.s-atm--zones-exit::before { display: none }

/* Light mode : CORRECTION SOURCE de la "bande grise".
   Ce pont remplit un vide de ~50px entre #zones et #secteurs. En light, les
   deux sections sont le MÊME blanc var(--bg) (#FBFCFE) ; l'ancien dégradé
   gris froid (rgba(247,247,251)) y peignait une bande grise qui jurait avec
   le bas crème de #zones → rupture nette.
   On peint donc le pont avec le MÊME blanc que les sections : il comble le
   vide sans introduire aucune couleur → jonction strictement continue.
   (Le dégradé sombre du dark mode, lui, reste inchangé.) */
[data-theme="light"] .s-atm--zones-exit {
  height: clamp(100px, 12vw, 160px);
  margin-bottom: clamp(-50px, -6vw, -80px);
  background: linear-gradient(to bottom,
    var(--bg)            0%,
    var(--bg)           50%,   /* couvre tout le vide en blanc plein */
    rgba(251,252,254,0) 100%   /* var(--bg) → transparent : se fond dans #secteurs */
  );
}

/* ── 4. Fondu bas du hero → ticker ──────────────────────────────
   Le hero se dissout dans le fond. Neutre, sans couleur ajoutée.  */
#hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(0deg,
    var(--bg) 0%,
    rgba(8,8,13,.55) 38%,
    transparent 100%);
  pointer-events: none;
  z-index: 5;
}
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg,
    var(--bg) 0%,
    rgba(240,240,248,.40) 38%,
    transparent 100%);
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #atm-grain { animation: none }
}

.ft-desc{font-size:.92rem;line-height:1.72}
.ft-lnks a{font-size:.92rem;letter-spacing:.1px}
.ft-bottom{font-size:.82rem;gap:14px;line-height:1.6}
.ft-col h4{font-size:1rem;margin-bottom:16px}

.faq-qt{font-size:1.02rem}
.faq-a{font-size:.95rem;line-height:1.75}

.c-val{font-size:1rem;line-height:1.55}
.c-sub{font-size:.78rem;line-height:1.5}
.c-sos p{font-size:.88rem;line-height:1.65}
.fl{font-size:.82rem}
.fcheck{font-size:.82rem;line-height:1.55}

.cb-bub{font-size:.9rem;line-height:1.6}
.cb-qb{font-size:.8rem;padding:8px 15px}
.cb-info h4{font-size:.92rem}
.cb-info p{font-size:.74rem}
.cb-ts{font-size:.68rem}

.eye{letter-spacing:.18em}

@media(max-width:640px){
  body{font-size:16.5px;line-height:1.62}
  .sec-d,.te-card-d,.svc-d,.team-bio,.ft-desc,.ft-lnks a{font-size:.96rem;line-height:1.72}
  .testi-q{font-size:1.04rem;line-height:1.75}
  .ft-bottom{font-size:.86rem;line-height:1.65}
  .faq-qt{font-size:1.04rem}
  .faq-a{font-size:.98rem;line-height:1.78}
  .cb-bub{font-size:.94rem}
}
/* — Signature "Fait avec ♥ en France" — */
.ft-made{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.68rem;color:var(--tx3);letter-spacing:.06em;
  opacity:.6;white-space:nowrap;
}
/* Cœur tartan — background-clip:text, motif fidèle au .tartan-light */
.ft-heart{
  display:inline-block;
  flex-shrink:0;
  font-size:14px;
  line-height:1;
  /* Bandes horizontal + vertical croisées (structure tartan-light, échelle 30px)
     r-light  = équivalent --tar-r2 sur fond crimson  → filet clair
     r-faint  = équivalent --tar-r3                   → filet plus subtil
     bd-line  = équivalent --tar-bd                   → fil sombre 2px         */
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255,188,158,.28) 0px,  rgba(255,188,158,.28) 2px,
      transparent            2px,  transparent            3px,
      rgba(255,168,140,.16) 3px,  rgba(255,168,140,.16) 5px,
      transparent            5px,  transparent            6px,
      rgba(255,188,158,.28) 6px,  rgba(255,188,158,.28) 8px,
      transparent            8px,  transparent            9px,
      rgba(18,0,4,.32)       9px,  rgba(18,0,4,.32)      10px,
      transparent           10px,  transparent           24px,
      rgba(18,0,4,.32)      24px,  rgba(18,0,4,.32)      25px,
      transparent           25px,  transparent           26px,
      rgba(255,188,158,.28) 26px,  rgba(255,188,158,.28) 28px,
      transparent           28px,  transparent           30px
    ),
    repeating-linear-gradient(90deg,
      rgba(255,188,158,.28) 0px,  rgba(255,188,158,.28) 2px,
      transparent            2px,  transparent            3px,
      rgba(255,168,140,.16) 3px,  rgba(255,168,140,.16) 5px,
      transparent            5px,  transparent            6px,
      rgba(255,188,158,.28) 6px,  rgba(255,188,158,.28) 8px,
      transparent            8px,  transparent            9px,
      rgba(18,0,4,.32)       9px,  rgba(18,0,4,.32)      10px,
      transparent           10px,  transparent           24px,
      rgba(18,0,4,.32)      24px,  rgba(18,0,4,.32)      25px,
      transparent           25px,  transparent           26px,
      rgba(255,188,158,.28) 26px,  rgba(255,188,158,.28) 28px,
      transparent           28px,  transparent           30px
    ),
    linear-gradient(135deg,#8b0f1c 0%,#c0182a 40%,#a81525 60%,#8c0f1c 100%);
  background-size:30px 30px, 30px 30px, cover;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:hbeat 5.5s ease-in-out infinite;
}
@keyframes hbeat{
  0%,100%{transform:scale(1);   filter:drop-shadow(0 0 2px rgba(192,24,42,.3))}
  50%    {transform:scale(1.12);filter:drop-shadow(0 0 5px rgba(192,24,42,.7))}
}
@media(min-width:641px){
  /* Footer bottom — groupe compact centré : copyright | ❤️ | SIRET
     Colonnes auto = chaque élément prend sa largeur naturelle
     justify-content:center = tout est ancré au centre, zéro étirement */
  .ft-bottom{
    display:grid;
    grid-template-columns:auto auto auto;
    grid-template-rows:auto auto;
    justify-content:center;
    align-items:baseline;
    gap:0 clamp(20px,2.8vw,48px);
    border-top:none;
    padding-top:18px;
    margin-top:0;
  }
  /* ❤️ — Row 1, Col 2 : pont visuel centré entre les deux textes */
  .ft-made{
    grid-column:2;
    grid-row:1;
    width:auto;
    padding:0 0 14px;
    border-bottom:1px solid var(--bd);
    justify-content:center;
    opacity:.72;
  }
  /* Copyright — Row 2, Col 1 */
  .ft-bottom > span:first-child{
    grid-column:1;
    grid-row:2;
  }
  /* SIRET — Row 2, Col 3 — une seule ligne */
  .ft-bottom > span:last-child{
    grid-column:3;
    grid-row:2;
    white-space:nowrap;
    font-size:.68rem;
    letter-spacing:-.01em;
  }
}
@media(max-width:640px){
  /* Footer bottom — restructuration mobile */
  .ft-bottom{
    flex-direction:column;
    align-items:center;
    text-align:center;
    border-top:none;          /* supprimé ici — déplacé sur le span SIRET */
    padding-top:16px;
    gap:0;
  }
  /* 1 — Copyright */
  .ft-bottom > span:first-child{
    order:1;
    width:100%;
    padding-bottom:16px;
  }
  /* 2 — "Fait avec ♥ en France" — transition élégante avant le trait */
  .ft-made{
    order:2;
    width:100%;
    justify-content:center;
    padding:10px 0 20px;
    font-size:.72rem;
    letter-spacing:.08em;
    opacity:.72;
  }
  /* 3 — Trait séparateur + infos légales */
  .ft-bottom > span:last-child{
    order:3;
    width:100%;
    border-top:1px solid var(--bd);
    padding-top:18px;
    line-height:1.9;
    text-align:center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RYTHME VISUEL — allègement global
   Moins de densité, plus de respiration, mêmes sections, même DA.
   Ajuste : gaps, fonds, bordures, ombres, espacements internes, tags.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Grilles : plus d'air entre les cartes ─────────────────────────── */
.svc-grid    { gap:22px }
.sit-grid    { gap:18px }
.secteur-grid{ gap:22px }
.sw-grid     { gap:20px }

/* ── 2. Cartes services : padding interne + espacement icône/titre/texte ─ */
.svc-card{ padding:30px }
.svc-ic  { margin-bottom:22px; border-color:rgba(192,24,42,.12) }
.svc-t   { margin-bottom:11px }
/* Ombre hover plus douce — moins "dashboard" */
.svc-card:hover{
  box-shadow:0 12px 32px rgba(0,0,0,.22),0 0 22px rgba(192,24,42,.1);
  transform:translateY(-4px);
}

/* ── 3. Tags services : moins dominants, plus fins ────────────────────── */
.svc-tag{
  font-weight:500;
  background:transparent;
  border:1px solid var(--bd2);
  color:var(--tx3);
  letter-spacing:.09em;
  margin-top:18px;
  padding:2px 9px;
  opacity:.82;
}

/* ── 4. Cartes situations : léger gain d'air intérieur ───────────────── */
.sit-card{ padding:20px 22px }
.sit-ic  { width:40px; height:40px }

/* ── 5. Cartes logiciels (sw) : ombre hover plus subtile ─────────────── */
.sw-card:hover{ box-shadow:0 8px 28px rgba(0,0,0,.2) }
.sw-icon{ margin-bottom:20px }
.sw-card-t{ margin-bottom:16px }

/* ── 6. Cartes secteurs : padding généreux + icône allégée ───────────── */
.secteur-card{ padding:clamp(28px,3.8vw,44px) }
.sec-ico{ border-color:rgba(192,24,42,.12); background:rgba(192,24,42,.06) }
.sec-t  { margin-bottom:10px }

/* ── 7. Témoignages : plus transparents, moins enfermés, bordure douce ── */
.testi-card{
  background:rgba(20,16,14,.50);
  border-color:rgba(192,24,42,.1);
  padding:28px;
}
.testi-card:hover{
  border-color:rgba(192,24,42,.30);
  box-shadow:0 8px 24px rgba(0,0,0,.30),0 0 18px rgba(192,24,42,.10);
  transform:translateY(-2px);
}
/* Light mode — légèrement plus aéré */
[data-theme="light"] .testi-card{
  background:rgba(252,252,255,.78);
  border-color:rgba(0,0,44,.08);
}
[data-theme="light"] .testi-card:hover{
  background:rgba(255,255,255,.95);
  border-color:rgba(192,24,42,.26);
  box-shadow:0 8px 24px rgba(0,0,30,.07);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION SERVICES — VIVANTE (DESKTOP UNIQUEMENT)
   • Flottement permanent asynchrone (chaque carte respire à son rythme)
   • Reveal au scroll plus marqué (blur 5px + translateY 24px)
   • Hover : lift +7px, bordure éclairée, glow rouge + ombre profonde
   • Variations de profondeur entre cartes (nth-child) — pas de grille figée
   • Glow ambiant qui pulse derrière la section (12s, presque imperceptible)
   • @property pour composer 3 sources de transform sans conflit
   ═══════════════════════════════════════════════════════════════════════════ */

/* Composition de 3 sources Y indépendantes — float + hover + reveal */
@property --float-y  { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --hover-y  { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --reveal-y { syntax:'<length>'; inherits:false; initial-value:0px; }

@media(min-width:901px){

  /* ─────────────────────────────────────────────────────────────────
     Lumière naturelle de section — comme une fenêtre d'atelier
     un seul rayon chaud venant du haut-gauche. Pas d'animation.
     ───────────────────────────────────────────────────────────────── */
  #services{ position:relative; isolation:isolate }
  #services::before{
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(ellipse 75% 50% at 18% 22%, rgba(80,15,20,.055), transparent 55%);
    z-index:-1;
    pointer-events:none;
  }

  /* ─────────────────────────────────────────────────────────────────
     CARTES — MATIÈRE TARTAN INTÉGRÉE
     ─────────────────────────────────────────────────────────────────
     Le tartan n'est plus posé dessus : c'est le tissu MÊME de la carte.
     Cross-hatch micro-échelle (5px / 1.8%) qui se ressent comme du tissu
     fin, pas comme un motif. Catch-light + sheen + ombre = panneau physique.
     ───────────────────────────────────────────────────────────────── */
  #services .svc-card{
    /* Système d'animation (float + hover + reveal) */
    --float-y:0px; --hover-y:0px; --reveal-y:0px;
    transform:translate3d(0, calc(var(--float-y) + var(--hover-y) + var(--reveal-y)), 0);
    animation:svc-float 7s ease-in-out infinite;
    will-change:transform, opacity, filter;

    /* MATIÈRE — 5 couches blendées :
       1. Catch-light haut-gauche (lampe d'atelier)
       2. Matière verticale (sheen → ombre bordeaux)
       3. Trame tartan VERTICALE (fils warp, 1px @ 5px, .020)
       4. Trame tartan HORIZONTALE (fils weft, 1px @ 5px, .018)
       5. Surface de base */
    background:
      radial-gradient(ellipse 95% 70% at 18% 8%, rgba(255,255,255,.032), transparent 55%),
      linear-gradient(180deg,
        rgba(255,255,255,.012) 0%,
        transparent 14%,
        transparent 66%,
        rgba(20,4,8,.22) 100%),
      repeating-linear-gradient(90deg,
        rgba(192,24,42,.020) 0px, rgba(192,24,42,.020) 1px,
        transparent 1px, transparent 5px),
      repeating-linear-gradient(0deg,
        rgba(192,24,42,.018) 0px, rgba(192,24,42,.018) 1px,
        transparent 1px, transparent 5px),
      var(--sf);

    /* Bord de panneau : bordeaux profond presque noir */
    border-color:rgba(60,10,18,.6);

    /* Biseau matériel : highlight top + dark bottom + vignette inset + poids physique */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -1px 0 rgba(0,0,0,.22),
      inset 0 0 32px rgba(20,4,8,.16),
      0 8px 22px rgba(0,0,0,.18);

    transition:
      --hover-y .42s cubic-bezier(.22,.61,.36,1),
      border-color .35s ease,
      box-shadow .4s cubic-bezier(.22,.61,.36,1),
      background .4s ease;
  }
  @keyframes svc-float{
    0%,100%{ --float-y:0px }
    50%    { --float-y:-4px }
  }

  /* Light mode : blanc froid, tartan rouge Optinove subtil mais visible */
  [data-theme="light"] #services .svc-card{
    background:
      radial-gradient(ellipse 95% 70% at 18% 8%, rgba(255,255,255,.70), transparent 55%),
      linear-gradient(180deg,
        rgba(255,255,255,.45) 0%,
        transparent 14%,
        transparent 66%,
        rgba(192,24,42,.03) 100%),
      repeating-linear-gradient(90deg,
        rgba(192,24,42,.014) 0px, rgba(192,24,42,.014) 1px,
        transparent 1px, transparent 5px),
      repeating-linear-gradient(0deg,
        rgba(192,24,42,.012) 0px, rgba(192,24,42,.012) 1px,
        transparent 1px, transparent 5px),
      var(--sf);
    border-color:rgba(192,24,42,.14);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.78),
      inset 0 -1px 0 rgba(192,24,42,.06),
      inset 0 0 24px rgba(192,24,42,.04),
      0 6px 18px rgba(0,0,30,.05);
  }

  /* HOVER — la matière s'approfondit, la trame se révèle légèrement
     comme du tissu qu'on rapproche de la lumière */
  #services .svc-card:hover{
    --hover-y:-6px;
    background:
      radial-gradient(ellipse 95% 70% at 18% 8%, rgba(255,255,255,.045), transparent 55%),
      linear-gradient(180deg,
        rgba(255,255,255,.02) 0%,
        transparent 14%,
        transparent 66%,
        rgba(40,8,14,.30) 100%),
      repeating-linear-gradient(90deg,
        rgba(192,24,42,.030) 0px, rgba(192,24,42,.030) 1px,
        transparent 1px, transparent 5px),
      repeating-linear-gradient(0deg,
        rgba(192,24,42,.028) 0px, rgba(192,24,42,.028) 1px,
        transparent 1px, transparent 5px),
      var(--sf);
    border-color:rgba(192,24,42,.28);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -1px 0 rgba(0,0,0,.28),
      inset 0 0 40px rgba(20,4,8,.22),
      0 16px 36px rgba(0,0,0,.28);
  }
  [data-theme="light"] #services .svc-card:hover{
    background:
      radial-gradient(ellipse 95% 70% at 18% 8%, rgba(255,255,255,.82), transparent 55%),
      linear-gradient(180deg,
        rgba(255,255,255,.55) 0%,
        transparent 14%,
        transparent 66%,
        rgba(192,24,42,.05) 100%),
      repeating-linear-gradient(90deg,
        rgba(192,24,42,.022) 0px, rgba(192,24,42,.022) 1px,
        transparent 1px, transparent 5px),
      repeating-linear-gradient(0deg,
        rgba(192,24,42,.020) 0px, rgba(192,24,42,.020) 1px,
        transparent 1px, transparent 5px),
      var(--sf);
    border-color:rgba(192,24,42,.22);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 -1px 0 rgba(192,24,42,.09),
      inset 0 0 30px rgba(192,24,42,.05),
      0 12px 28px rgba(0,0,30,.09);
  }

  /* Icône : très légère mise à l'échelle au hover (pas de glow) */
  #services .svc-ic{
    transition:background .25s, color .25s, border-color .25s, transform .35s ease;
  }
  #services .svc-card:hover .svc-ic{ transform:scale(1.04) }

  /* Reveal au scroll : opacity + blur + montée via --reveal-y */
  #services .svc-card.sr{
    opacity:0;
    filter:blur(5px);
    --reveal-y:24px;
    transition:
      opacity .85s cubic-bezier(.22,.61,.36,1),
      filter .85s cubic-bezier(.22,.61,.36,1),
      --reveal-y .85s cubic-bezier(.22,.61,.36,1),
      --hover-y .42s cubic-bezier(.22,.61,.36,1),
      border-color .35s ease,
      box-shadow .4s cubic-bezier(.22,.61,.36,1),
      background .4s ease;
  }
  #services .svc-card.sr.v{
    opacity:1;
    filter:blur(0);
    --reveal-y:0px;
  }

  /* Flottement asynchrone par carte (chaque panneau respire à son rythme) */
  #services .svc-card:nth-child(1){ animation-duration:6.2s; animation-delay:0s    }
  #services .svc-card:nth-child(2){ animation-duration:7.4s; animation-delay:-1.2s }
  #services .svc-card:nth-child(3){ animation-duration:5.8s; animation-delay:-2.6s }
  #services .svc-card:nth-child(4){ animation-duration:6.8s; animation-delay:-0.5s }
  #services .svc-card:nth-child(5){ animation-duration:7.2s; animation-delay:-3.1s }
  #services .svc-card:nth-child(6){ animation-duration:5.5s; animation-delay:-1.8s }
  #services .svc-card:nth-child(7){ animation-duration:7.0s; animation-delay:-0.9s }
  #services .svc-card:nth-child(8){ animation-duration:6.5s; animation-delay:-2.3s }

  /* Reduced motion */
  @media(prefers-reduced-motion:reduce){
    #services .svc-card{ animation:none }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION LOGICIELS — MÊME ADN, PERSONNALITÉ ÉDITORIALE
   ═══════════════════════════════════════════════════════════════════════════
   Si #services = panneau de cuir architectural (massif, fondation),
   alors #logiciels = parchemin/lin raffiné (atelier expert, précision).
   • Trame tartan plus serrée (4px vs 5px) — comme du tissage soie/lin
   • Vignette inset plus douce (24px vs 32px) — matière plus fine
   • Catch-light plus concentré — éclairage de loupe d'expert
   • Drop shadow plus léger — pose, pas masse
   • Border bordeaux plus subtile (.42 vs .60) — papier épais, pas plaque
   ═══════════════════════════════════════════════════════════════════════════ */

@media(min-width:901px){

  /* Lumière de section — même métaphore atelier, intensité plus retenue */
  #logiciels{ position:relative; isolation:isolate }
  #logiciels::before{
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(ellipse 70% 45% at 22% 18%, rgba(80,15,20,.04), transparent 55%);
    z-index:0;
    pointer-events:none;
  }
  /* S'assurer que le contenu reste au-dessus */
  #logiciels > .w{ position:relative; z-index:1 }

  /* CARTES LOGICIELS — matière fine éditoriale */
  #logiciels .sw-card{
    /* Mêmes 5 couches que #services mais ajustées pour matière plus raffinée */
    background:
      /* Catch-light plus concentré (loupe d'expert) */
      radial-gradient(ellipse 85% 60% at 20% 10%, rgba(255,255,255,.026), transparent 55%),
      /* Sheen vertical plus retenu (matière plus fine) */
      linear-gradient(180deg,
        rgba(255,255,255,.010) 0%,
        transparent 16%,
        transparent 70%,
        rgba(20,4,8,.14) 100%),
      /* Trame tartan VERTICALE plus serrée (4px = tissage fin) */
      repeating-linear-gradient(90deg,
        rgba(192,24,42,.016) 0px, rgba(192,24,42,.016) 1px,
        transparent 1px, transparent 4px),
      /* Trame tartan HORIZONTALE plus serrée */
      repeating-linear-gradient(0deg,
        rgba(192,24,42,.014) 0px, rgba(192,24,42,.014) 1px,
        transparent 1px, transparent 4px),
      var(--sf);

    /* Bord bordeaux plus subtil — papier épais vs panneau cuir */
    border-color:rgba(60,10,18,.42);

    /* Biseau plus délicat */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.038),
      inset 0 -1px 0 rgba(0,0,0,.16),
      inset 0 0 24px rgba(20,4,8,.11),
      0 5px 16px rgba(0,0,0,.13);

    transition:
      border-color .35s ease,
      box-shadow .4s cubic-bezier(.22,.61,.36,1),
      background .4s ease,
      transform .35s cubic-bezier(.22,.61,.36,1);
  }

  /* Light mode — tartan rouge Optinove, micro-trame visible sur blanc froid */
  [data-theme="light"] #logiciels .sw-card{
    background:
      radial-gradient(ellipse 85% 60% at 20% 10%, rgba(255,255,255,.68), transparent 55%),
      linear-gradient(180deg,
        rgba(255,255,255,.38) 0%,
        transparent 16%,
        transparent 70%,
        rgba(192,24,42,.025) 100%),
      repeating-linear-gradient(90deg,
        rgba(192,24,42,.012) 0px, rgba(192,24,42,.012) 1px,
        transparent 1px, transparent 4px),
      repeating-linear-gradient(0deg,
        rgba(192,24,42,.010) 0px, rgba(192,24,42,.010) 1px,
        transparent 1px, transparent 4px),
      var(--sf);
    border-color:rgba(192,24,42,.12);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.74),
      inset 0 -1px 0 rgba(192,24,42,.05),
      inset 0 0 18px rgba(192,24,42,.03),
      0 4px 14px rgba(0,0,30,.045);
  }

  /* HOVER — lift plus délicat (-4px vs -6px), matière s'approfondit */
  #logiciels .sw-card:hover{
    transform:translateY(-4px);
    background:
      radial-gradient(ellipse 85% 60% at 20% 10%, rgba(255,255,255,.038), transparent 55%),
      linear-gradient(180deg,
        rgba(255,255,255,.018) 0%,
        transparent 16%,
        transparent 70%,
        rgba(40,8,14,.21) 100%),
      repeating-linear-gradient(90deg,
        rgba(192,24,42,.024) 0px, rgba(192,24,42,.024) 1px,
        transparent 1px, transparent 4px),
      repeating-linear-gradient(0deg,
        rgba(192,24,42,.022) 0px, rgba(192,24,42,.022) 1px,
        transparent 1px, transparent 4px),
      var(--sf);
    border-color:rgba(192,24,42,.24);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.052),
      inset 0 -1px 0 rgba(0,0,0,.20),
      inset 0 0 30px rgba(20,4,8,.16),
      0 12px 28px rgba(0,0,0,.22);
  }
  [data-theme="light"] #logiciels .sw-card:hover{
    background:
      radial-gradient(ellipse 85% 60% at 20% 10%, rgba(255,255,255,.82), transparent 55%),
      linear-gradient(180deg,
        rgba(255,255,255,.50) 0%,
        transparent 16%,
        transparent 70%,
        rgba(192,24,42,.04) 100%),
      repeating-linear-gradient(90deg,
        rgba(192,24,42,.020) 0px, rgba(192,24,42,.020) 1px,
        transparent 1px, transparent 4px),
      repeating-linear-gradient(0deg,
        rgba(192,24,42,.018) 0px, rgba(192,24,42,.018) 1px,
        transparent 1px, transparent 4px),
      var(--sf);
    border-color:rgba(192,24,42,.20);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.82),
      inset 0 -1px 0 rgba(192,24,42,.08),
      inset 0 0 22px rgba(192,24,42,.04),
      0 9px 22px rgba(0,0,30,.07);
  }

  /* Neutraliser l'overlay rouge ::before existant — remplacé par background composition */
  #logiciels .sw-card::before{ content:none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION SITUATIONS — PARCOURS UTILISATEUR OUVERT
   Rupture visuelle délibérée avec les 2 autres sections "grille de cartes".
   Les chemins flottent dans le tartan — ouverts, typographiques, sans boîte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La section devient un espace avec fond vivant */
#situations{ position:relative; overflow:hidden }

/* Tartan de fond — texture qui vit derrière les chemins */
.sit-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.sit-bg .tartan-light{
  position:absolute; inset:-8%;
  opacity:.42;
}
[data-theme="light"] .sit-bg .tartan-light{ opacity:.6 }

/* Fondu radial qui intègre le tartan au fond de page sans coupure brutale */
.sit-bg-fade{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 100% 55% at 50% 50%, transparent 5%, var(--bg) 88%),
    linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%);
}

/* Grille 2 colonnes très aérée — pas une grille de cartes */
.sit-paths{
  display:grid;
  grid-template-columns:1fr 1fr;
  row-gap:clamp(38px,5.5vw,58px);
  column-gap:clamp(48px,7vw,96px);
  margin-top:clamp(44px,5.5vw,68px);
}

/* Chaque chemin — ouvert, sans fond, sans radius, sans ombre */
.sit-path{
  padding-left:20px;
  border-left:2px solid rgba(192,24,42,.18);
  cursor:pointer;
  transition:border-color .26s, transform .26s;
  position:relative;
}
.sit-path:hover { border-color:var(--r); transform:translateX(7px) }
.sit-path:focus-visible { outline:2px solid var(--r); outline-offset:6px; border-radius:2px }

[data-theme="light"] .sit-path{ border-color:rgba(192,24,42,.15) }
[data-theme="light"] .sit-path:hover{ border-color:var(--r) }

/* Icône — petite, sans boîte, juste la couleur */
.sit-path-ic{
  color:var(--r);
  margin-bottom:11px;
  opacity:.6;
  display:inline-flex;
  transition:opacity .26s, transform .26s;
}
.sit-path:hover .sit-path-ic{ opacity:1; transform:scale(1.1) }

/* Titre serif + flèche → qui apparaît au hover */
.sit-path-t{
  font-family:var(--f-d);
  font-size:1.12rem;
  font-weight:500;
  color:var(--tx);
  margin:0 0 8px;
  line-height:1.28;
  display:flex;
  align-items:center;
  gap:8px;
  transition:color .26s;
}
.sit-path-t::after{
  content:'→';
  font-family:var(--f-b);
  font-size:.76em;
  color:var(--r);
  opacity:0;
  transform:translateX(-5px);
  transition:opacity .26s, transform .26s;
  flex-shrink:0;
}
.sit-path:hover .sit-path-t         { color:var(--r) }
.sit-path:hover .sit-path-t::after  { opacity:1; transform:translateX(0) }

/* Description */
.sit-path-d{
  font-size:.81rem;
  color:var(--tx2);
  line-height:1.64;
  margin:0;
}

@media(max-width:700px){
  .sit-paths{
    grid-template-columns:1fr;
    row-gap:clamp(28px,6vw,38px);
  }
}

/* ==========================================================================
   Royal Stewart direction art -- premium digital system
   CSS-only identity layer, robust for FTP hosting.
   ========================================================================== */
:root{
  --r:#b91527;--r-d:#750814;--r-l:#df3044;--gold:#b99435;--navy:#08152d;--green:#113820;--ivory:#e9edf3;
  --bg:#05070d;--bg2:#090c14;--bg3:#10131d;--bg4:#171b27;
  --sf:rgba(235,239,247,.045);--sf2:rgba(235,239,247,.075);--sf3:rgba(235,239,247,.115);
  --bd:rgba(226,232,242,.09);--bd2:rgba(226,232,242,.16);
  --tx:#f2f5fb;--tx2:#a5acbc;--tx3:#687084;--gl:rgba(5,7,13,.78);
  --r-g:rgba(185,21,39,.16);--r-g2:rgba(185,21,39,.28);--r-s:rgba(185,21,39,.085);--r-b:rgba(185,21,39,.28);--r-txt:#ff7888;
  --sh:0 18px 54px rgba(0,0,0,.34);--sh2:0 28px 90px rgba(0,0,0,.52);
}
[data-theme="light"]{
  --bg:#f6f8fb;--bg2:#eef2f7;--bg3:#e5eaf2;--bg4:#d8dfeb;
  --sf:rgba(6,12,25,.035);--sf2:rgba(6,12,25,.055);--sf3:rgba(6,12,25,.085);
  --bd:rgba(9,19,39,.085);--bd2:rgba(9,19,39,.15);
  --tx:#080b12;--tx2:#485165;--tx3:#7f889c;--gl:rgba(246,248,251,.88);
  --r-s:rgba(185,21,39,.07);--r-b:rgba(185,21,39,.22);--r-txt:#8f101d;
  --sh:0 18px 48px rgba(8,18,38,.10);--sh2:0 28px 90px rgba(8,18,38,.16);
}
body{
  background:
    radial-gradient(ellipse 82% 48% at 72% -10%,rgba(185,21,39,.18),transparent 62%),
    radial-gradient(ellipse 58% 42% at 12% 8%,rgba(8,21,45,.55),transparent 64%),
    linear-gradient(180deg,var(--bg),var(--bg2) 48%,var(--bg));
}
[data-theme="light"] body{
  background:
    radial-gradient(ellipse 82% 44% at 76% -12%,rgba(185,21,39,.105),transparent 64%),
    radial-gradient(ellipse 58% 42% at 10% 8%,rgba(8,21,45,.08),transparent 66%),
    linear-gradient(180deg,var(--bg),var(--bg2) 48%,var(--bg));
}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(185,21,39,.12) 0 2px,transparent 2px 76px,rgba(5,7,13,.40) 76px 84px,rgba(185,148,53,.16) 84px 88px,rgba(232,237,245,.15) 88px 91px,rgba(8,21,45,.24) 91px 120px,rgba(17,56,32,.18) 120px 148px,rgba(5,7,13,.38) 148px 156px,transparent 156px 192px),
    linear-gradient(0deg,rgba(185,21,39,.10) 0 2px,transparent 2px 76px,rgba(5,7,13,.32) 76px 84px,rgba(185,148,53,.13) 84px 88px,rgba(232,237,245,.12) 88px 91px,rgba(8,21,45,.20) 91px 120px,rgba(17,56,32,.15) 120px 148px,rgba(5,7,13,.30) 148px 156px,transparent 156px 192px);
  background-size:192px 192px;opacity:.38;
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
[data-theme="light"] body::before{opacity:.22}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,var(--bg) 0%,transparent 16%,transparent 84%,var(--bg) 100%),
    radial-gradient(ellipse 68% 70% at 50% 18%,transparent 0%,rgba(0,0,0,.36) 100%);
}
[data-theme="light"] body::after{
  background:
    linear-gradient(180deg,rgba(246,248,251,.88),transparent 18%,transparent 82%,rgba(246,248,251,.88)),
    radial-gradient(ellipse 70% 70% at 50% 18%,transparent 0%,rgba(246,248,251,.58) 100%);
}
/* ── anciens gradients tartan supprimés — voir règle unique en fin de fichier ── */
.btn,.ci-btn,.fbtn{transition:transform .42s cubic-bezier(.2,.7,.2,1),border-color .42s,background .42s,box-shadow .42s,color .42s}
.btn-r,.ci-btn,.fbtn{
  background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 34%),linear-gradient(90deg,var(--r-d),var(--r) 52%,#cf2033);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 46px rgba(185,21,39,.26),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-r::after,.ci-btn::after,.fbtn::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.38;
  background-image:linear-gradient(90deg,transparent 0 26%,rgba(8,21,45,.35) 26% 29%,rgba(185,148,53,.32) 29% 31%,transparent 31% 100%),linear-gradient(0deg,transparent 0 46%,rgba(255,255,255,.16) 46% 47%,transparent 47% 100%);
  mix-blend-mode:screen;
}
.btn-o,#thBtn,#mbBtn,.badge,.card,.svc-card,.sit-path,.sit-card,.trust-card,.secteur-card,.te-card-large,.te-card-sm,.te-card-row,.sw-card,.testi-card,.team-card,.faq-item,.cblk,.ci-pricing{
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),var(--sf);
  border-color:var(--bd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
[data-theme="light"] .btn-o,[data-theme="light"] #thBtn,[data-theme="light"] #mbBtn,[data-theme="light"] .badge,[data-theme="light"] .card,[data-theme="light"] .svc-card,[data-theme="light"] .sit-path,[data-theme="light"] .sit-card,[data-theme="light"] .trust-card,[data-theme="light"] .secteur-card,[data-theme="light"] .te-card-large,[data-theme="light"] .te-card-sm,[data-theme="light"] .te-card-row,[data-theme="light"] .sw-card,[data-theme="light"] .testi-card,[data-theme="light"] .team-card,[data-theme="light"] .faq-item,[data-theme="light"] .cblk,[data-theme="light"] .ci-pricing{
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(246,248,251,.52));
}
section{position:relative}
section::before{content:'';position:absolute;left:0;right:0;top:-1px;height:120px;pointer-events:none;background:linear-gradient(180deg,var(--bg),transparent);opacity:.72}
section::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:120px;pointer-events:none;background:linear-gradient(0deg,var(--bg),transparent);opacity:.62}
section > *{position:relative;z-index:1}
#nav.scrolled{background:var(--gl);border-bottom-color:rgba(185,21,39,.18);box-shadow:0 18px 60px rgba(0,0,0,.26)}
#nav.scrolled::before{
  opacity:.34;
  background-image:linear-gradient(90deg,transparent 0 72px,rgba(185,21,39,.22) 72px 74px,rgba(3,5,10,.32) 74px 82px,rgba(185,148,53,.20) 82px 86px,transparent 86px 192px),linear-gradient(0deg,transparent 0 84px,rgba(255,255,255,.08) 84px 86px,transparent 86px 192px);
  background-size:192px 192px;
}
#hero{
  min-height:100svh;
  background:radial-gradient(ellipse 70% 54% at 24% 45%,rgba(185,21,39,.13),transparent 66%),linear-gradient(100deg,var(--bg) 0%,rgba(5,7,13,.96) 42%,rgba(8,21,45,.50) 100%);
}
[data-theme="light"] #hero{
  background:
    radial-gradient(ellipse 70% 54% at 20% 42%,rgba(185,21,39,.095),transparent 66%),
    linear-gradient(100deg,#f6f8fb 0%,rgba(246,248,251,.96) 46%,rgba(216,223,235,.64) 100%);
}
#hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(5,7,13,.82) 42%,transparent 78%),radial-gradient(ellipse 80% 60% at 82% 40%,rgba(185,21,39,.20),transparent 68%);
}
[data-theme="light"] #hero::before{
  background:
    linear-gradient(90deg,rgba(246,248,251,.98) 0%,rgba(246,248,251,.90) 42%,rgba(246,248,251,.20) 76%),
    radial-gradient(ellipse 82% 62% at 84% 40%,rgba(185,21,39,.085),transparent 68%);
}
.hero-tartan-panel{width:min(52%,760px);transform:skewX(-6deg) translateX(7%);transform-origin:center;opacity:.95}
.hero-tartan-inner{transform:skewX(6deg) scale(1.08)}
.hero-tartan-inner .tartan{opacity:.78;animation:tartanDrift 26s ease-in-out infinite alternate}
/* Voiles hero supprimés — le tartan doit rester pleinement lisible.
   Seul un fondu doux au bord gauche (vers le texte) et haut/bas (intégration section). */
.hero-tartan-panel::before{background:none;z-index:2}
.hero-tartan-panel::after{
  background:
    linear-gradient(90deg,var(--bg) 0%,transparent 22%),
    linear-gradient(180deg,var(--bg) 0%,transparent 12%,transparent 88%,var(--bg) 100%);
}
[data-theme="light"] .hero-tartan-panel::before{background:none}
[data-theme="light"] .hero-tartan-panel::after{
  background:
    linear-gradient(90deg,#f6f8fb 0%,transparent 22%),
    linear-gradient(180deg,#f6f8fb 0%,transparent 12%,transparent 88%,#f6f8fb 100%);
}
.hero-tartan-glow{background:radial-gradient(ellipse 66% 54% at 64% 42%,rgba(185,21,39,.22),transparent 66%),radial-gradient(ellipse 42% 34% at 78% 30%,rgba(185,148,53,.10),transparent 72%);mix-blend-mode:screen}
[data-theme="light"] .hero-tartan-glow{
  background:
    radial-gradient(ellipse 66% 54% at 64% 42%,rgba(185,21,39,.12),transparent 66%),
    radial-gradient(ellipse 42% 34% at 78% 30%,rgba(185,148,53,.08),transparent 72%);
  mix-blend-mode:multiply;
}
.hero-logo-deco{opacity:.09;filter:drop-shadow(0 0 56px rgba(185,21,39,.42))}
.hero-creds{background:rgba(9,12,20,.66);border-color:rgba(232,237,245,.12);backdrop-filter:blur(18px)}
[data-theme="light"] .hero-creds{background:rgba(246,248,251,.72)}
@keyframes tartanDrift{from{transform:translate3d(-10px,-8px,0) scale(1)}to{transform:translate3d(18px,12px,0) scale(1.035)}}
.ticker-wrap{background:rgba(5,7,13,.72);border-color:rgba(185,21,39,.18);backdrop-filter:blur(10px)}
[data-theme="light"] .ticker-wrap{background:rgba(246,248,251,.76)}
.ticker-wrap::before{background-image:linear-gradient(90deg,transparent 0 70px,rgba(185,21,39,.16) 70px 72px,rgba(3,5,10,.20) 72px 80px,rgba(185,148,53,.16) 80px 84px,transparent 84px 160px),linear-gradient(0deg,transparent 0 20px,rgba(255,255,255,.08) 20px 21px,transparent 21px 42px);background-size:192px 42px}
#ci,#trust-bar,#temoignages,footer{isolation:isolate}
.ci-tartan-bg{opacity:.46;filter:saturate(.88) contrast(1.1)}
/* — Veils repensés : plus de bandes verticales sombres écrasant le tartan.
   On garde uniquement : (a) fondu haut/bas vers la couleur de fond (intégration section)
                         (b) vignette radiale douce derrière le contenu (lisibilité texte) — */
.ci-overlay{
  background:
    linear-gradient(180deg,var(--bg) 0%,transparent 14%,transparent 86%,var(--bg) 100%),
    radial-gradient(ellipse 60% 75% at 50% 50%,rgba(5,7,13,.42) 0%,transparent 75%);
}
.ci-card{background:rgba(7,10,18,.78);border-color:rgba(185,21,39,.30);box-shadow:0 30px 110px rgba(0,0,0,.52),0 0 120px rgba(185,21,39,.14),inset 0 1px 0 rgba(255,255,255,.08)}
.ci-card-mask{background:linear-gradient(135deg,rgba(7,10,18,.96),rgba(7,10,18,.78) 52%,rgba(7,10,18,.94)),radial-gradient(ellipse 90% 80% at 50% 0%,rgba(185,21,39,.14),transparent 70%)}
[data-theme="light"] .ci-card{background:rgba(246,248,251,.86)}
[data-theme="light"] .ci-card-mask{background:linear-gradient(135deg,rgba(246,248,251,.96),rgba(246,248,251,.84) 52%,rgba(246,248,251,.94)),radial-gradient(ellipse 90% 80% at 50% 0%,rgba(185,21,39,.08),transparent 70%)}

.tb-veil{
  background:
    linear-gradient(180deg,var(--bg) 0%,transparent 18%,transparent 82%,var(--bg) 100%),
    radial-gradient(ellipse 56% 78% at 50% 50%,rgba(5,7,13,.48) 0%,transparent 72%);
}
[data-theme="light"] .tb-veil{
  background:
    linear-gradient(180deg,#f6f8fb 0%,transparent 18%,transparent 82%,#f6f8fb 100%),
    radial-gradient(ellipse 56% 78% at 50% 50%,rgba(246,248,251,.62) 0%,transparent 72%);
}
.tb-tartan{opacity:.80;filter:saturate(.94) contrast(1.06)}

.testi-tartan-bg .tartan{opacity:.62;filter:saturate(.92) contrast(1.04)}
.testi-tartan-overlay{
  background:
    linear-gradient(180deg,var(--bg) 0%,transparent 14%,transparent 86%,var(--bg) 100%),
    radial-gradient(ellipse 60% 72% at 50% 50%,rgba(5,7,13,.38) 0%,transparent 78%);
}
[data-theme="light"] .testi-tartan-bg .tartan{opacity:.30}
@media(max-width:900px){
  .hero-tartan-panel{width:100%;transform:none;opacity:.34}
  .hero-tartan-inner{transform:none}
  .hero-tartan-panel::after{background:linear-gradient(180deg,rgba(5,7,13,.90),rgba(5,7,13,.72),var(--bg))}
}
@media(prefers-reduced-motion:reduce){
  .hero-tartan-inner .tartan,.ci-glow,.ci-btn,.ticker-track,.hero-logo-deco{animation:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v3 — LUXE ÉCOSSAIS MODERNE · Royal Stewart Premium
   ──────────────────────────────────────────────────────────────────────────
   Direction artistique : club privé écossais · whisky vieilli · tailleur
   Rouge millésimé, jamais gaming · Or : touche de luxe · Marine : noblesse
   Ivoire chaud en light mode · Tartan : texture, pas motif de surface
   ════════════════════════════════════════════════════════════════════════ */

/* ── Palette finale unifiée ─────────────────────────────────────────── */
:root{
  --r:#B81525;--r-d:#7C0E18;--r-l:#CE2336;
  --r-g:rgba(184,21,37,.15);--r-g2:rgba(184,21,37,.26);
  --r-s:rgba(184,21,37,.08);--r-b:rgba(184,21,37,.26);--r-txt:#f07080;
  --gold:#C49A24;--gold-s:rgba(196,154,36,.26);--gold-b:rgba(196,154,36,.44);
  --navy:#0E1E46;--navy-s:rgba(14,30,70,.38);
  --forest:#103820;--forest-s:rgba(16,56,32,.32);
  --ivory:#E8DFD0;
  /* Noirs profonds — quasi sans teinte, juste une respiration */
  --bg:#050608;--bg2:#07090E;--bg3:#0D0F18;--bg4:#141622;
  --sf:rgba(238,236,255,.038);--sf2:rgba(238,236,255,.065);--sf3:rgba(238,236,255,.10);
  --bd:rgba(218,222,255,.08);--bd2:rgba(218,222,255,.14);
  --tx:#EEF0F8;--tx2:#8890AA;--tx3:#464C64;
  --sh:0 8px 32px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.04) inset;
  --sh2:0 24px 80px rgba(0,0,0,.70),0 1px 0 rgba(255,255,255,.06) inset;
  --gl:rgba(5,6,8,.82);
}

/* Light mode — ivoire chaud, parchemin premium */
[data-theme="light"]{
  --bg:#FBFCFE;--bg2:#EBEFF6;--bg3:#E4EAF3;--bg4:#DBE2EC;
  --sf:rgba(28,20,10,.028);--sf2:rgba(28,20,10,.048);--sf3:rgba(28,20,10,.078);
  --bd:rgba(40,28,16,.07);--bd2:rgba(40,28,16,.13);
  --tx:#1A1208;--tx2:#4C4438;--tx3:#88806E;
  --sh:0 8px 32px rgba(40,24,12,.09);--sh2:0 24px 80px rgba(40,24,12,.15);
  --gl:rgba(246,242,234,.93);
  --r-txt:#8F1020;--r-s:rgba(184,21,37,.07);--r-b:rgba(184,21,37,.22);
  --gold-s:rgba(196,154,36,.22);--gold-b:rgba(196,154,36,.38);
}

/* ── Corps atmosphérique ────────────────────────────────────────────── */
body{background:var(--bg)}

/* Grille tartan fantôme — watermark du tissu dans le fond de page */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(90deg,
      transparent 0 46px,
      rgba(184,21,37,.09) 46px 48px,
      transparent 48px 114px,
      rgba(14,30,70,.13) 114px 118px,
      transparent 118px 158px,
      rgba(196,154,36,.07) 158px 160px,
      transparent 160px 192px),
    linear-gradient(0deg,
      transparent 0 46px,
      rgba(184,21,37,.07) 46px 48px,
      transparent 48px 114px,
      rgba(14,30,70,.10) 114px 118px,
      transparent 118px 158px,
      rgba(196,154,36,.05) 158px 160px,
      transparent 160px 192px);
  background-size:192px 192px;
  opacity:.45;
  mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
}
[data-theme="light"] body::before{opacity:.15}

/* Halos d'ambiance — rouge haut-droit · marine bas-gauche */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 82% 52% at 72% -10%,rgba(184,21,37,.18),transparent 64%),
    radial-gradient(ellipse 56% 46% at 10% 8%,rgba(14,30,70,.50),transparent 66%),
    linear-gradient(180deg,var(--bg),var(--bg2) 50%,var(--bg));
}
[data-theme="light"] body::after{
  background:
    radial-gradient(ellipse 82% 52% at 72% -10%,rgba(184,21,37,.09),transparent 64%),
    radial-gradient(ellipse 56% 46% at 10% 8%,rgba(14,30,70,.07),transparent 66%),
    linear-gradient(180deg,var(--bg),var(--bg2) 50%,var(--bg));
}

/* ── Scrollbar — or → rouge · signature premium ─────────────────────── */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:var(--bg2)}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold) 0%,var(--r) 55%,var(--r-d) 100%);
  border-radius:4px;border:2px solid var(--bg2);
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#d4aa2c 0%,var(--r) 50%,var(--r-d) 100%);
}
*{scrollbar-color:var(--r) var(--bg2)}

/* ── Sélection de texte ─────────────────────────────────────────────── */
::selection{background:var(--r-d);color:var(--ivory)}

/* ── Eyebrow — or premium · filet or–navy–rouge ─────────────────────── */
.eye{color:var(--gold)}
.eye::before{
  width:44px;height:1.5px;flex-shrink:0;
  background:linear-gradient(90deg,
    var(--gold) 0%,var(--gold) 40%,
    rgba(14,30,70,.55) 40%,rgba(14,30,70,.55) 44%,
    var(--r) 44%,var(--r) 100%);
}
[data-theme="light"] .eye{color:var(--r)}

/* ── Navigation ─────────────────────────────────────────────────────── */
#nav.scrolled{
  background:var(--gl);
  backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  border-bottom:1px solid var(--bd);
  /* Liseré or discret — signature du club privé */
  box-shadow:0 1px 0 rgba(196,154,36,.20),0 16px 56px rgba(0,0,0,.42);
}
[data-theme="light"] #nav.scrolled{
  box-shadow:0 1px 0 rgba(196,154,36,.24),0 8px 32px rgba(40,24,12,.08);
}
#nav.scrolled::before{
  opacity:.28;
  background-image:
    linear-gradient(90deg,
      transparent 0 74px,
      rgba(184,21,37,.20) 74px 76px,
      rgba(5,6,8,.30) 76px 82px,
      rgba(196,154,36,.18) 82px 85px,
      transparent 85px 192px),
    linear-gradient(0deg,
      transparent 0 36px,
      rgba(255,255,255,.06) 36px 37px,
      transparent 37px 192px);
  background-size:192px 192px;
}

/* ── Bouton primaire — dégradé rouge métallisé ──────────────────────── */
.btn-r,.ci-btn,.fbtn{
  background:
    linear-gradient(160deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 28%,transparent 58%),
    linear-gradient(180deg,var(--r-l) 0%,var(--r) 48%,var(--r-d) 100%);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 8px 32px rgba(184,21,37,.28),0 1px 0 rgba(255,255,255,.16) inset,0 -1px 0 rgba(0,0,0,.18) inset;
  color:#fff;
}
.btn-r:hover,.ci-btn:hover,.fbtn:hover{
  background:
    linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 28%,transparent 58%),
    linear-gradient(180deg,var(--r) 0%,var(--r-d) 100%);
  box-shadow:0 14px 48px rgba(124,14,24,.52),0 0 0 1px rgba(196,154,36,.40) inset,0 1px 0 rgba(255,240,210,.16) inset;
  transform:translateY(-2px);
}
/* Filet tartan en transparence sur les CTA — signal subliminal du tissu */
.btn-r::after,.ci-btn::after,.fbtn::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  opacity:.22;border-radius:inherit;
  background-image:
    linear-gradient(90deg,
      transparent 0 28%,
      rgba(14,30,70,.45) 28% 30.5%,
      rgba(196,154,36,.38) 30.5% 32%,
      transparent 32% 100%),
    linear-gradient(0deg,
      transparent 0 42%,
      rgba(255,255,255,.14) 42% 43%,
      transparent 43% 100%);
  mix-blend-mode:screen;
}
/* Bouton secondaire — verre noble */
.btn-o{
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--bd2);color:var(--tx2);backdrop-filter:blur(8px);
}
.btn-o:hover{
  border-color:var(--gold-b);color:var(--gold);
  background:linear-gradient(135deg,rgba(196,154,36,.10),rgba(196,154,36,.04));
  transform:translateY(-2px);box-shadow:0 4px 20px rgba(196,154,36,.14);
}

/* ── Cards — verre chaud, liseré or au survol ────────────────────────── */
.card,.svc-card,.sit-card,.trust-card,.secteur-card,
.te-card-large,.te-card-sm,.te-card-row,
.sw-card,.testi-card,.team-card,.faq-item,.cblk,.ci-pricing,.btn-o,#thBtn,#mbBtn,.badge{
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),var(--sf);
  border-color:var(--bd);
  box-shadow:0 2px 12px rgba(0,0,0,.32),0 1px 0 rgba(255,255,255,.04) inset;
}
[data-theme="light"] .card,[data-theme="light"] .svc-card,[data-theme="light"] .sit-card,
[data-theme="light"] .trust-card,[data-theme="light"] .secteur-card,
[data-theme="light"] .te-card-large,[data-theme="light"] .te-card-sm,[data-theme="light"] .te-card-row,
[data-theme="light"] .sw-card,[data-theme="light"] .testi-card,[data-theme="light"] .team-card,
[data-theme="light"] .faq-item,[data-theme="light"] .cblk,[data-theme="light"] .ci-pricing,
[data-theme="light"] .btn-o,[data-theme="light"] #thBtn,[data-theme="light"] #mbBtn,[data-theme="light"] .badge{
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(246,242,234,.60));
}
.card:hover,.svc-card:hover,.sit-card:hover,.trust-card:hover,.secteur-card:hover,
.te-card-large:hover,.te-card-sm:hover,.sw-card:hover,.team-card:hover{
  border-color:rgba(196,154,36,.28);
  box-shadow:0 16px 56px rgba(0,0,0,.46),0 0 0 1px rgba(196,154,36,.16) inset,0 1px 0 rgba(255,255,255,.06) inset;
  transform:translateY(-4px);
}
/* Filet or — variante premium card */
.card-r{border-left:2px solid var(--gold)}

/* ── Témoignages — verre sombre, bordure or subtile ─────────────────── */
.testi-card{
  background:rgba(10,8,16,.82);
  border:1px solid rgba(196,154,36,.14);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.testi-card:hover{
  border-color:rgba(196,154,36,.36);
  box-shadow:0 16px 56px rgba(0,0,0,.52),0 0 32px rgba(196,154,36,.10);
}
[data-theme="light"] .testi-card{background:rgba(255,252,248,.88);border-color:rgba(40,28,16,.10)}
[data-theme="light"] .testi-card:hover{background:#fff;border-color:rgba(184,21,37,.26);box-shadow:0 10px 32px rgba(40,24,12,.10)}

/* ── Chiffres hero — dégradé rouge → or ─────────────────────────────── */
.hc-val{
  background:linear-gradient(135deg,var(--r) 0%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ── Barre de progression — or → rouge → bordeaux ───────────────────── */
#prog{
  background:linear-gradient(90deg,var(--r-d),var(--r) 50%,var(--gold));
  box-shadow:0 0 12px rgba(184,21,37,.45);
}

/* ── Trust bar — séparateurs et icônes harmonisés ───────────────────── */
#trust-bar{
  border-top-color:rgba(196,154,36,.22);
  border-bottom-color:rgba(196,154,36,.22);
}
.tb-sep{background:linear-gradient(180deg,transparent,rgba(196,154,36,.40) 50%,transparent)}
.tb-icon{background:rgba(184,21,37,.22);border-color:rgba(184,21,37,.48)}
.tb-item:hover .tb-icon{background:rgba(184,21,37,.38);box-shadow:0 0 24px rgba(184,21,37,.32)}

/* ── CTA — glassmorphism profond, cadre or imperceptible ─────────────── */
.ci-card{
  background:rgba(5,6,8,.84);
  border-color:rgba(184,21,37,.28);
  box-shadow:
    0 40px 120px rgba(0,0,0,.62),
    0 0 120px rgba(184,21,37,.12),
    0 0 0 1px rgba(196,154,36,.08) inset,
    0 1px 0 rgba(255,255,255,.07) inset;
}
[data-theme="light"] .ci-card{background:rgba(246,242,234,.88)}

/* ── Footer — liseré or, ivoire ou marine selon thème ───────────────── */
footer{border-top:1px solid rgba(196,154,36,.18)}
footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(196,154,36,.55) 25%,rgba(196,154,36,.55) 75%,transparent 100%);
  pointer-events:none;z-index:2;
}
.fsoc:hover{background:var(--r-d);border-color:rgba(196,154,36,.32);box-shadow:0 0 16px rgba(184,21,37,.24)}
.ft-lnks a:hover{color:var(--gold)}

/* ── Formulaire — focus or premium ──────────────────────────────────── */
.fi:focus,.fi:focus-visible{
  border-color:var(--gold-b);
  box-shadow:0 0 0 3px rgba(196,154,36,.12);
  outline:none;
}

/* ── FAQ — icône active rouge→bordeaux, anneau or ────────────────────── */
.faq-q[aria-expanded="true"] .faq-icon,.faq-item.open .faq-icon{
  background:linear-gradient(135deg,var(--r),var(--r-d));
  border-color:rgba(196,154,36,.32);
  box-shadow:0 0 16px rgba(184,21,37,.26);
}

/* ── Pill sticky — bordure or ────────────────────────────────────────── */
#pill{border-color:rgba(196,154,36,.30);box-shadow:0 0 56px rgba(184,21,37,.16),var(--sh2)}

/* ── Sections — fondus de raccord affinés ───────────────────────────── */
section::before{background:linear-gradient(180deg,var(--bg),transparent);opacity:.70}
section::after{background:linear-gradient(0deg,var(--bg),transparent);opacity:.60}

/* ── Hero light mode — ivoire chaud ─────────────────────────────────── */
[data-theme="light"] #hero{
  background:
    radial-gradient(ellipse 70% 54% at 20% 42%,rgba(184,21,37,.08),transparent 66%),
    linear-gradient(100deg,var(--bg) 0%,rgba(246,242,234,.96) 46%,rgba(214,207,196,.64) 100%);
}
[data-theme="light"] #hero::before{
  background:
    linear-gradient(90deg,rgba(246,242,234,.98) 0%,rgba(246,242,234,.90) 42%,rgba(246,242,234,.20) 76%),
    radial-gradient(ellipse 82% 62% at 84% 40%,rgba(184,21,37,.07),transparent 68%);
}
[data-theme="light"] .hero-tartan-panel::after{
  background:
    linear-gradient(90deg,#FBFCFE 0%,transparent 22%),
    linear-gradient(180deg,#FBFCFE 0%,transparent 12%,transparent 88%,#FBFCFE 100%);
}
[data-theme="light"] .ticker-wrap{background:rgba(246,242,234,.76)}

/* ── Zones — texte rouge profond selon thème ─────────────────────────── */
.zn-list li{color:rgba(184,21,37,.88);text-shadow:0 0 32px rgba(184,21,37,.22),0 0 2px rgba(184,21,37,.15)}
[data-theme="light"] .zn-list li{color:#8B1020;text-shadow:none;letter-spacing:.08em}

/* ── Zones section — fonds ivoire chaud en light mode ───────────────── */
[data-theme="light"] #zones{
  background:linear-gradient(180deg,var(--bg) 0%,#EBEFF6 14%,#E8E2D6 38%,#E8E2D6 62%,#EBEFF6 86%,var(--bg) 100%);
}
[data-theme="light"] .zn-stage::before{
  background:linear-gradient(to bottom,#EBEFF6 0%,#EBEFF6 22%,rgba(237,232,222,.97) 42%,rgba(237,232,222,.82) 60%,rgba(237,232,222,.45) 78%,rgba(237,232,222,.10) 92%,transparent 100%);
}
[data-theme="light"] .zn-stage::after{
  background:linear-gradient(to top,#EBEFF6 0%,#EBEFF6 18%,rgba(237,232,222,.95) 38%,rgba(237,232,222,.72) 58%,rgba(237,232,222,.30) 78%,rgba(237,232,222,.06) 92%,transparent 100%);
}

/* ── Contact info blocks — ivoire chaud ─────────────────────────────── */
.fi{background:var(--bg3)}
[data-theme="light"] .fi{background:rgba(255,255,255,.65);border-color:var(--bd)}

/* ── Sidebar contact — liseré rouge chaud ───────────────────────────── */
.c-sos{background:rgba(184,21,37,.07);border-color:rgba(184,21,37,.22)}
[data-theme="light"] .c-sos{background:rgba(184,21,37,.05);border-color:rgba(184,21,37,.18)}


/* ══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v4 — Intégration Royal Stewart complète
   ──────────────────────────────────────────────────────────────────────────
   Navy + forêt actifs · Icônes contrastes garantis · Sections différenciées
   Tartan texture premium · Boutons raffinés · Footer navy · Typographie
   Fichiers statiques purs — zéro dépendance serveur, déployable via FileZilla
   ════════════════════════════════════════════════════════════════════════ */

/* ── Nouvelles variables actives — navy · forêt · or éclairés ──────────── */
:root{
  --navy-hi:#4E78D4;   /* bleu visible sur fond sombre */
  --forest-hi:#3E8A58; /* vert visible sur fond sombre */
  --gold-hi:#D4AA30;   /* or visible sur fond sombre */
  --navy-bg:rgba(14,30,70,.14); --navy-bd:rgba(14,30,70,.30);
  --forest-bg:rgba(16,56,32,.14); --forest-bd:rgba(16,56,32,.28);
}
[data-theme="light"]{
  --navy-hi:#1E3A8A; --forest-hi:#1A5C38; --gold-hi:#7A5C00;
  --navy-bg:rgba(14,30,70,.08); --navy-bd:rgba(14,30,70,.22);
  --forest-bg:rgba(16,56,32,.08); --forest-bd:rgba(16,56,32,.20);
}

/* ── Navigation — fond navy profond au scroll ────────────────────────────── */
#nav.scrolled{background:rgba(4,6,14,.92)}
[data-theme="light"] #nav.scrolled{background:rgba(246,242,234,.97)}
/* Lien actif — or discret */
.nav-a:hover{color:var(--gold);background:rgba(196,154,36,.08)}

/* ── Sections — signature couleur Royal Stewart ──────────────────────────── */
/* Navy (structure, tech, confiance) */
#services{background:linear-gradient(180deg,var(--bg),rgba(14,30,70,.09) 50%,var(--bg))}
#contact{background:linear-gradient(180deg,var(--bg),rgba(14,30,70,.08) 50%,var(--bg))}
#secteurs{background:linear-gradient(180deg,var(--bg),rgba(14,30,70,.06) 50%,var(--bg))}
/* Forêt (humain, proximité, qualité) */
#situations{background:linear-gradient(180deg,var(--bg),rgba(16,56,32,.07) 50%,var(--bg))}
#equipe{background:linear-gradient(180deg,var(--bg),rgba(16,56,32,.07) 50%,var(--bg))}

/* ── Footer — navy profond : ancrage premium ─────────────────────────────── */
footer{
  background:linear-gradient(180deg,var(--bg),rgba(6,10,24,.88) 22%,rgba(6,10,24,.88) 78%,var(--bg) 100%);
  border-top-color:rgba(196,154,36,.20);
}
[data-theme="light"] footer{
  background:linear-gradient(180deg,var(--bg),rgba(14,30,70,.07) 22%,rgba(14,30,70,.07) 78%,var(--bg) 100%);
}

/* ── Icônes — fond opaque garanti · contraste sur tartan ─────────────────── */
/* Base solide pour tous les conteneurs — lisibles sur n'importe quel fond */
.svc-ic,.sit-ic,.te-icon,.te-icon-sm,.sw-icon,.sec-ico{
  background:rgba(6,8,16,.82);
  border-color:rgba(218,222,255,.13);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
[data-theme="light"] .svc-ic,[data-theme="light"] .sit-ic,[data-theme="light"] .te-icon,
[data-theme="light"] .te-icon-sm,[data-theme="light"] .sw-icon,[data-theme="light"] .sec-ico{
  background:rgba(246,242,234,.92);
  border-color:rgba(40,28,16,.15);
}

/* Trust bar — icônes sur tartan : fond navy opaque garantissant la lisibilité */
.tb-icon{
  background:rgba(5,8,22,.86);
  border:1px solid rgba(14,30,70,.48);
  color:#7090D8;
}
.tb-item:hover .tb-icon{
  background:rgba(14,30,70,.80);
  color:#b8cef2;
  border-color:rgba(14,30,70,.72);
  box-shadow:0 0 24px rgba(14,30,70,.38);
}
[data-theme="light"] .tb-icon{background:rgba(246,242,234,.92);border-color:rgba(14,30,70,.22);color:var(--navy-hi)}
[data-theme="light"] .tb-item:hover .tb-icon{background:rgba(14,30,70,.12);border-color:rgba(14,30,70,.38)}
[data-theme="light"] .tb-title{color:var(--tx)}
[data-theme="light"] .tb-text{color:var(--tx2)}

/* ── Service cards — palette tricolore rouge/navy/forêt/or ───────────────── */
.svc-grid .svc-card:nth-child(4n+1) .svc-ic{color:var(--r)}
.svc-grid .svc-card:nth-child(4n+2) .svc-ic{color:var(--navy-hi);border-color:var(--navy-bd)}
.svc-grid .svc-card:nth-child(4n+3) .svc-ic{color:var(--forest-hi);border-color:var(--forest-bd)}
.svc-grid .svc-card:nth-child(4n+4) .svc-ic{color:var(--gold-hi);border-color:rgba(196,154,36,.28)}
/* Hover — fill couleur correspondante */
.svc-grid .svc-card:nth-child(4n+1):hover .svc-ic{background:var(--r);color:#fff;border-color:var(--r)}
.svc-grid .svc-card:nth-child(4n+2):hover .svc-ic{background:var(--navy);color:#fff;border-color:var(--navy)}
.svc-grid .svc-card:nth-child(4n+3):hover .svc-ic{background:var(--forest);color:#fff;border-color:var(--forest)}
.svc-grid .svc-card:nth-child(4n+4):hover .svc-ic{background:rgba(196,154,36,.88);color:rgba(5,6,8,.95);border-color:var(--gold)}
/* Hover top-border colorée */
.svc-grid .svc-card:nth-child(4n+2):hover{border-color:var(--navy-bd);box-shadow:0 16px 56px rgba(0,0,0,.46),0 0 28px rgba(14,30,70,.18),0 0 0 1px var(--navy-bg) inset}
.svc-grid .svc-card:nth-child(4n+3):hover{border-color:var(--forest-bd);box-shadow:0 16px 56px rgba(0,0,0,.46),0 0 28px rgba(16,56,32,.18),0 0 0 1px var(--forest-bg) inset}
.svc-grid .svc-card:nth-child(4n+4):hover{border-color:rgba(196,154,36,.36);box-shadow:0 16px 56px rgba(0,0,0,.46),0 0 28px rgba(196,154,36,.12),0 0 0 1px rgba(196,154,36,.12) inset}

/* Situations cards — navy/forêt alternance */
.sit-grid .sit-card:nth-child(2n) .sit-ic{color:var(--navy-hi);border-color:var(--navy-bd)}
.sit-grid .sit-card:nth-child(2n):hover .sit-ic{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Software cards — rotation palette */
.sw-grid .sw-card:nth-child(3n+2) .sw-icon{color:var(--navy-hi);border-color:var(--navy-bd)}
.sw-grid .sw-card:nth-child(3n+3) .sw-icon{color:var(--forest-hi);border-color:var(--forest-bd)}
.sw-grid .sw-card:nth-child(3n+2):hover .sw-icon{background:var(--navy);color:#fff;border-color:var(--navy)}
.sw-grid .sw-card:nth-child(3n+3):hover .sw-icon{background:var(--forest);color:#fff;border-color:var(--forest)}

/* Trust editorial — rouge / navy / forêt */
.te-col-right .te-card-large .te-icon{color:var(--navy-hi);border-color:var(--navy-bd)}
.te-col-right .te-card-large:hover .te-icon{background:var(--navy);color:#fff;border-color:var(--navy)}
.te-col-right .te-card-large:hover{border-color:var(--navy-bd);box-shadow:0 16px 56px rgba(0,0,0,.46),0 0 28px rgba(14,30,70,.16),0 0 0 1px var(--navy-bg) inset}
.te-col-left .te-card-sm:last-child .te-icon{color:var(--forest-hi);border-color:var(--forest-bd)}
.te-col-left .te-card-sm:last-child:hover .te-icon{background:var(--forest);color:#fff;border-color:var(--forest)}

/* Secteurs — icônes navy */
.sec-ico{color:var(--navy-hi);border-color:var(--navy-bd)}
.secteur-card:hover .sec-ico{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Steps CI — alternance navy */
.ci-step:nth-child(odd) .ci-sn{color:var(--navy-hi);border-color:var(--navy-bd);background:var(--navy-bg)}

/* ── Boutons — premium dense · moins gaming ──────────────────────────────── */
/* Réguliers : plus rectangulaires que pills — feeling tailoring */
.btn{border-radius:var(--r3)}
.btn-r,.btn-o{border-radius:var(--r3)}
/* CTA principal garde la pill — appel à l'action reste approchable */
.ci-btn,.pill-dl{border-radius:var(--rp)}
/* Glow réduit — ni gaming ni agressif */
.btn-r:hover,.fbtn:hover{
  box-shadow:0 10px 36px rgba(124,14,24,.38),0 0 0 1px rgba(196,154,36,.36) inset,0 1px 0 rgba(255,240,210,.14) inset;
  transform:translateY(-2px);
}
/* Secondaire — hover navy au lieu d'or (plus sobre) */
.btn-o:hover{
  border-color:var(--navy-bd);
  color:var(--navy-hi);
  background:linear-gradient(135deg,var(--navy-bg),rgba(14,30,70,.03));
  box-shadow:0 4px 16px rgba(14,30,70,.16);
  transform:translateY(-2px);
}

/* ── Typographie — hiérarchie Cormorant affinée ──────────────────────────── */
.disp{letter-spacing:-1px;font-weight:300;line-height:.93}
.h1{letter-spacing:-.4px;font-weight:300}
.body-l{line-height:1.80;font-weight:300}
/* Italic — plus dramatique */
.disp em{letter-spacing:-.4px}

/* ── Séparateurs or entre sections ──────────────────────────────────────── */
/* Liseré horizontal or ultra-subtil — signal premium */
#situations::after,#services::after,#logiciels::after,
#secteurs::after,#equipe::after,#faq::after{
  height:1px;opacity:1;
  background:linear-gradient(90deg,transparent,rgba(196,154,36,.14) 25%,rgba(196,154,36,.14) 75%,transparent);
}

/* ── Chatbot header — navy premium au lieu de rouge dominé ─────────────── */
.cb-head-overlay{
  background:linear-gradient(135deg,rgba(5,8,20,.96),rgba(12,22,52,.85));
}

/* ── Scintillement de cours d'eau — CI glow enrichi navy + rouge ─────────── */
.ci-glow{
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%,rgba(184,21,37,.16) 0%,transparent 65%),
    radial-gradient(ellipse 55% 45% at 30% 55%,rgba(14,30,70,.20) 0%,transparent 62%),
    radial-gradient(ellipse 45% 35% at 70% 35%,rgba(16,56,32,.14) 0%,transparent 60%);
}

/* ── FAQ section — hover navy ────────────────────────────────────────────── */
.faq-q:hover{background:var(--navy-bg);border-radius:8px}

/* ── Filtres wrapper tartan — harmonisation ──────────────────────────────── */
/* Supprimer les anciens filtres de wrapper — le .tartan s'en occupe désormais */
.ci-tartan-bg{filter:none}
.tb-tartan{filter:none}
/* Testimonials — règle spécifique existante : ajouter brightness pour cohérence */
.testi-tartan-bg .tartan{filter:saturate(.55) brightness(.72) contrast(1.04)}
[data-theme="light"] .testi-tartan-bg .tartan{filter:saturate(.68) brightness(.84) contrast(1.02)}
/* Hero — déjà filtré par règle finale .tartan ; ici on ajuste l'opacité */
.hero-tartan-inner .tartan{opacity:.88}

/* ── Responsive — mobile ────────────────────────────────────────────────── */
@media(max-width:900px){
  /* Sections uniformes sur mobile */
  #services,#contact,#situations,#equipe,#secteurs{background:var(--bg)}
  /* Tartan encore plus discret sur mobile */
  .tartan{filter:saturate(.50) brightness(.62) contrast(1.06)}
  .tartan-light{filter:saturate(.38) brightness(.70)}
}

/* ══ DESIGN SYSTEM v5 — Balance Colorimétrique Royale ══════════════════════
   Recalibration: navy + forest plus proches du vrai Royal Stewart textile.
   Réduction drastique des overlays bleus globaux.
   Néons contextuels diffus — premium cinématique, pas gaming.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Palette recalibrée — bleu et vert nobles, non électriques */
:root{
  --navy:      #1F2F6B;  /* bleu tartan réel — profond, noble */
  --navy-hi:   #3A52A8;  /* accent visible sur fond sombre    */
  --navy-bg:   rgba(31,47,107,.11); --navy-bd: rgba(31,47,107,.26);
  --forest:    #1F4A36;  /* vert tartan réel — profond, textile */
  --forest-hi: #2E6649;  /* accent visible sur fond sombre      */
  --forest-bg: rgba(31,74,54,.12);  --forest-bd: rgba(31,74,54,.26);
  --gold-hi:   #C8A228;
}
[data-theme="light"]{
  --navy-hi:   #1A2B68; --forest-hi: #1B4A32; --gold-hi: #7A5E00;
  --navy-bg:   rgba(31,47,107,.07); --navy-bd: rgba(31,47,107,.20);
  --forest-bg: rgba(31,74,54,.07);  --forest-bd: rgba(31,74,54,.20);
}

/* Halos atmosphériques — rouge dominant, bleu + vert subtils (max 22%) */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 72% -8%,  rgba(184,21,37,.17),   transparent 62%),
    radial-gradient(ellipse 48% 42% at 8%   8%,  rgba(31,47,107,.22),   transparent 62%),
    radial-gradient(ellipse 44% 38% at 92%  88%, rgba(31,74,54,.14),    transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2) 50%,var(--bg));
}
[data-theme="light"] body::after{
  background:
    radial-gradient(ellipse 80% 50% at 72% -8%,  rgba(184,21,37,.10),   transparent 62%),
    radial-gradient(ellipse 48% 42% at 8%   8%,  rgba(31,47,107,.09),   transparent 60%),
    radial-gradient(ellipse 44% 38% at 92%  88%, rgba(31,74,54,.08),    transparent 58%),
    linear-gradient(180deg,var(--bg),var(--bg2) 50%,var(--bg));
}

/* Nav — neutre, jamais navy dominant */
#nav.scrolled{background:rgba(5,5,9,.90);border-bottom-color:rgba(218,222,255,.07)}

/* Balance colorimétrique des sections : rouge / vert / bleu / neutre */
#services  {background:linear-gradient(180deg,var(--bg),rgba(184,21,37,.07) 50%,var(--bg))}
#situations{background:linear-gradient(180deg,var(--bg),rgba(31,74,54,.08)  50%,var(--bg))}
#equipe    {background:linear-gradient(180deg,var(--bg),rgba(31,74,54,.07)  50%,var(--bg))}
#secteurs  {background:linear-gradient(180deg,var(--bg),rgba(31,47,107,.07) 50%,var(--bg))}
#contact   {background:none}

/* Footer — tempéré, pas de teinture bleue */
footer{
  background:linear-gradient(180deg,var(--bg),rgba(5,6,14,.72) 18%,rgba(5,6,14,.88) 60%,rgba(5,6,14,.96));
}

/* ── Néons contextuels diffus — icônes de service ───────────────────────── */
/* Principe : halo très doux (~18px), 1px ring intérieur, luminosité ambiante */
.svc-grid .svc-card:nth-child(4n+1) .svc-ic{
  color:var(--r);
  box-shadow:0 0 0 1px rgba(184,21,37,.22),0 0 20px rgba(184,21,37,.16),0 0 40px rgba(184,21,37,.06);
}
.svc-grid .svc-card:nth-child(4n+2) .svc-ic{
  color:var(--navy-hi);
  border-color:var(--navy-bd);
  box-shadow:0 0 0 1px rgba(31,47,107,.26),0 0 20px rgba(31,47,107,.18),0 0 40px rgba(31,47,107,.07);
}
.svc-grid .svc-card:nth-child(4n+3) .svc-ic{
  color:var(--forest-hi);
  border-color:var(--forest-bd);
  box-shadow:0 0 0 1px rgba(31,74,54,.26),0 0 20px rgba(31,74,54,.18),0 0 40px rgba(31,74,54,.07);
}
.svc-grid .svc-card:nth-child(4n+4) .svc-ic{
  color:var(--gold-hi);
  border-color:rgba(196,154,36,.28);
  box-shadow:0 0 0 1px rgba(196,154,36,.22),0 0 20px rgba(196,154,36,.14),0 0 36px rgba(196,154,36,.06);
}

/* ── Trust bar — bleu noble doux ─────────────────────────────────────────── */
.tb-icon{
  background:rgba(5,8,20,.86);
  border:1px solid rgba(31,47,107,.38);
  color:#6A8CCC;
  box-shadow:0 0 0 1px rgba(31,47,107,.18),0 0 14px rgba(31,47,107,.13);
}
.tb-item:hover .tb-icon{
  background:rgba(31,47,107,.70);
  color:#b0c6f0;
  border-color:rgba(31,47,107,.52);
  box-shadow:0 0 0 1px rgba(31,47,107,.28),0 0 20px rgba(31,47,107,.20);
}

/* ── CI glow — tricolore équilibré ──────────────────────────────────────── */
.ci-glow{
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(184,21,37,.13)  0%,transparent 62%),
    radial-gradient(ellipse 50% 40% at 25% 55%, rgba(31,47,107,.16)  0%,transparent 58%),
    radial-gradient(ellipse 40% 32% at 75% 35%, rgba(31,74,54,.12)   0%,transparent 56%);
}

/* Hover service cards — halo contextuel cohérent */
.svc-card:nth-child(4n+1):hover{box-shadow:var(--sh),0 0 40px rgba(184,21,37,.08)}
.svc-card:nth-child(4n+2):hover{box-shadow:var(--sh),0 0 40px rgba(31,47,107,.10)}
.svc-card:nth-child(4n+3):hover{box-shadow:var(--sh),0 0 40px rgba(31,74,54,.10)}
.svc-card:nth-child(4n+4):hover{box-shadow:var(--sh),0 0 40px rgba(196,154,36,.08)}

/* Mobile — pas de halos (performance + lisibilité) */
@media(max-width:900px){
  .svc-ic,.sit-ic,.te-icon,.te-icon-sm,.sw-icon,.sec-ico,.tb-icon{box-shadow:none !important}
  .svc-card:hover{box-shadow:var(--sh) !important}
  #services,#situations,#equipe,#secteurs,#contact{background:var(--bg) !important}
  footer{background:rgba(5,6,14,.92)}
}


/* ══════════════════════════════════════════════════════════════════════════
   ROYAL STEWART TARTAN — /assets/images/royal-stewart-seamless.png
   ──────────────────────────────────────────────────────────────────────────
   Fix 1 — background-attachment:fixed : référence viewport commune à toutes
            les sections → lignes du motif alignées pixel-perfect d'un bloc
            à l'autre, aucun décalage horizontal.
   Fix 2 — background-size:160px : ~9 tuiles/rangée sur 1440px desktop,
            motif tartan complet visible, échelle fond textile naturel.
   ════════════════════════════════════════════════════════════════════════ */
.tartan,
.tartan-light {
  background-image:      url('/assets/images/royal-stewart-seamless.png');
  background-repeat:     repeat;
  background-size:       clamp(76px, 7vw, 108px) clamp(76px, 7vw, 108px);
  background-position:   center center;
  background-attachment: scroll;
  background-color:      transparent;
  /* Assombri · désaturé → texture premium, jamais wallpaper criard */
  filter:                saturate(0.56) brightness(0.66) contrast(1.04);
}

/* Variante légère — encore plus subtile */
.tartan-light {
  filter: saturate(0.45) brightness(0.76);
}

/* Light mode — atténuation différente sur fond ivoire */
[data-theme="light"] .tartan {
  filter: saturate(0.70) brightness(0.84) contrast(1.02);
}
[data-theme="light"] .tartan-light {
  filter: saturate(0.52) brightness(0.90);
}

/* iOS Safari : background-attachment:fixed non supporté sur éléments.
   Fallback propre via @supports. */
@supports (-webkit-touch-callout: none) {
  .tartan, .tartan-light {
    background-attachment: scroll;
    background-size: 88px 88px;
  }
}

[data-theme="light"] .tartan,
[data-theme="light"] .tartan-light { opacity: 0.88; }
.tartan-light                       { opacity: 0.40; }
[data-theme="light"] .tartan-light  { opacity: 0.22; }

.hero-tartan-inner{transform:none}
.hero-tartan-inner .tartan{
  animation:none !important;
  transform:none !important;
  background-size:clamp(82px, 7.5vw, 116px) clamp(82px, 7.5vw, 116px);
  background-position:center center;
}

.hero-tartan-panel{
  transform:translateX(4%) !important;
}
.hero-tartan-inner{
  transform:none !important;
}

/* ==========================================================================
   Optinove Royal Edition — global art direction polish
   --------------------------------------------------------------------------
   Static CSS only: OVH/FileZilla friendly. This layer shifts the UI away from
   startup-tech codes toward a royal, cinematic, heritage-premium identity.
   ========================================================================== */
:root{
  --royal-red:#a90f1f;
  --royal-red-deep:#5d0810;
  --royal-navy:#071225;
  --royal-navy-2:#0c1b34;
  --royal-green:#123520;
  --royal-gold:#b68b2d;
  --royal-gold-soft:rgba(182,139,45,.22);
  --royal-ivory:#f1eadf;
  --royal-parchment:#d8cbb8;
  --royal-ink:#03060c;
  --bg:#04070e;
  --bg2:#07101e;
  --bg3:#0d1829;
  --bg4:#142139;
  --sf:rgba(241,234,223,.045);
  --sf2:rgba(241,234,223,.07);
  --sf3:rgba(241,234,223,.105);
  --bd:rgba(216,203,184,.11);
  --bd2:rgba(216,203,184,.18);
  --tx:#f4efe7;
  --tx2:#b9afa1;
  --tx3:#817766;
  --r:#a90f1f;
  --r-d:#5d0810;
  --r-l:#c81f31;
  --r-txt:#e16d78;
  --r-s:rgba(169,15,31,.10);
  --r-b:rgba(169,15,31,.28);
  --sh:0 22px 70px rgba(0,0,0,.42);
  --sh2:0 34px 110px rgba(0,0,0,.58);
  --gl:rgba(4,7,14,.78);
}
[data-theme="light"]{
  --bg:#FBFCFE;
  --bg2:#e9dfd1;
  --bg3:#ded1bf;
  --bg4:#cfc0ab;
  --sf:rgba(38,27,20,.035);
  --sf2:rgba(38,27,20,.055);
  --sf3:rgba(38,27,20,.085);
  --bd:rgba(58,39,28,.11);
  --bd2:rgba(58,39,28,.18);
  --tx:#160f0d;
  --tx2:#5b5046;
  --tx3:#8b7a68;
  --gl:rgba(242,234,223,.86);
  --r:#9e1020;
  --r-d:#650b13;
  --r-l:#bf2433;
  --r-txt:#8f101d;
  --r-s:rgba(158,16,32,.08);
  --r-b:rgba(158,16,32,.22);
  --sh:0 18px 55px rgba(57,42,28,.14);
  --sh2:0 30px 90px rgba(57,42,28,.18);
}
html{background:var(--bg)}
body{
  background:
    radial-gradient(ellipse 80% 50% at 78% -8%,rgba(169,15,31,.16),transparent 62%),
    radial-gradient(ellipse 70% 48% at 16% 4%,rgba(7,18,37,.72),transparent 66%),
    radial-gradient(ellipse 70% 56% at 50% 100%,rgba(18,53,32,.20),transparent 70%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 46%,var(--bg) 100%);
  color:var(--tx);
}
[data-theme="light"] body{
  background:
    radial-gradient(ellipse 82% 42% at 74% -10%,rgba(169,15,31,.075),transparent 64%),
    radial-gradient(ellipse 62% 42% at 12% 4%,rgba(7,18,37,.07),transparent 70%),
    linear-gradient(180deg,#f5eee5 0%,var(--bg) 46%,#eadfce 100%);
}
body::after{
  background:
    radial-gradient(ellipse 80% 60% at 74% 22%,rgba(182,139,45,.045),transparent 62%),
    linear-gradient(180deg,rgba(4,7,14,.88) 0%,transparent 16%,transparent 78%,rgba(4,7,14,.72) 100%);
}
[data-theme="light"] body::after{
  background:
    radial-gradient(ellipse 70% 50% at 72% 18%,rgba(182,139,45,.08),transparent 66%),
    linear-gradient(180deg,rgba(245,238,229,.76) 0%,transparent 24%,transparent 78%,rgba(233,223,209,.62) 100%);
}
.disp{
  letter-spacing:0;
  text-wrap:balance;
  text-shadow:0 24px 70px rgba(0,0,0,.38);
}
.disp em{
  color:var(--r);
  text-shadow:0 10px 34px rgba(169,15,31,.22);
}
.body-l,.hero-sub{
  color:var(--tx2);
  letter-spacing:.005em;
}
.eye{
  color:var(--royal-gold);
  letter-spacing:.18em;
}
.eye::before{
  background:linear-gradient(90deg,var(--royal-gold),var(--royal-red) 58%,var(--royal-green));
  width:38px;
}
#nav{
  height:82px;
}
#nav.scrolled,#nav{
  background:linear-gradient(180deg,rgba(7,18,37,.82),rgba(4,7,14,.68));
  border-bottom:1px solid rgba(216,203,184,.12);
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
[data-theme="light"] #nav.scrolled,
[data-theme="light"] #nav{
  background:linear-gradient(180deg,rgba(242,234,223,.92),rgba(242,234,223,.78));
  border-bottom-color:rgba(58,39,28,.10);
}
.nav-a{
  color:var(--tx2);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.02em;
  padding:8px 14px;
}
.nav-a:hover{
  color:var(--royal-gold);
  background:rgba(182,139,45,.08);
}
#thBtn,#mbBtn,.btn-o{
  background:linear-gradient(135deg,rgba(241,234,223,.075),rgba(241,234,223,.025));
  border-color:rgba(216,203,184,.14);
}
#hero{
  background:
    radial-gradient(ellipse 58% 52% at 20% 40%,rgba(169,15,31,.10),transparent 66%),
    radial-gradient(ellipse 64% 60% at 82% 42%,rgba(7,18,37,.74),transparent 70%),
    linear-gradient(100deg,var(--bg) 0%,rgba(4,7,14,.97) 42%,rgba(7,18,37,.72) 100%);
}
[data-theme="light"] #hero{
  background:
    radial-gradient(ellipse 58% 52% at 18% 40%,rgba(169,15,31,.055),transparent 66%),
    linear-gradient(100deg,#f5eee5 0%,rgba(245,238,229,.94) 42%,rgba(225,212,195,.70) 100%);
}
#hero::before{
  background:
    linear-gradient(90deg,var(--bg) 0%,rgba(4,7,14,.88) 40%,rgba(4,7,14,.28) 78%),
    radial-gradient(ellipse 70% 58% at 82% 44%,rgba(182,139,45,.07),transparent 70%);
}
[data-theme="light"] #hero::before{
  background:
    linear-gradient(90deg,rgba(245,238,229,.98) 0%,rgba(245,238,229,.90) 44%,rgba(245,238,229,.26) 78%),
    radial-gradient(ellipse 70% 58% at 82% 44%,rgba(182,139,45,.08),transparent 70%);
}
.hero-tartan-panel{
  opacity:.88;
}
.hero-tartan-glow{
  background:
    radial-gradient(ellipse 64% 52% at 66% 44%,rgba(182,139,45,.10),transparent 68%),
    radial-gradient(ellipse 58% 46% at 72% 60%,rgba(7,18,37,.32),transparent 70%);
}
.hero-creds{
  background:
    linear-gradient(135deg,rgba(7,18,37,.78),rgba(4,7,14,.58)),
    rgba(7,18,37,.72);
  border:1px solid rgba(216,203,184,.16);
  box-shadow:0 22px 80px rgba(0,0,0,.30),inset 0 1px 0 rgba(241,234,223,.08);
}
[data-theme="light"] .hero-creds{
  background:linear-gradient(135deg,rgba(255,250,241,.74),rgba(233,223,209,.58));
  border-color:rgba(58,39,28,.12);
}
.hc-val{
  color:var(--royal-gold);
  font-size:1.95rem;
  letter-spacing:0;
}
.hc-lbl{
  color:var(--tx3);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.btn-r,.ci-btn,.fbtn{
  background:
    linear-gradient(180deg,rgba(241,234,223,.14),transparent 42%),
    linear-gradient(135deg,var(--royal-red-deep),var(--royal-red) 54%,#7d0c17);
  border:1px solid rgba(216,203,184,.18);
  box-shadow:0 16px 46px rgba(73,6,14,.34),inset 0 1px 0 rgba(241,234,223,.18);
}
.btn-r:hover,.ci-btn:hover,.fbtn:hover{
  background:
    linear-gradient(180deg,rgba(241,234,223,.18),transparent 42%),
    linear-gradient(135deg,#6a0a14,var(--royal-red) 54%,#57070f);
  box-shadow:0 20px 60px rgba(73,6,14,.42),0 0 0 1px rgba(182,139,45,.20) inset;
}
.btn-o:hover{
  border-color:rgba(182,139,45,.28);
  color:var(--royal-gold);
  background:rgba(182,139,45,.07);
}
.card,.svc-card,.sit-path,.trust-card,.secteur-card,.te-card-large,.te-card-sm,.te-card-row,.sw-card,.testi-card,.team-card,.faq-item,.cblk,.ci-card,.ct-card,.ct-form,.legal-info-card,.ck-card{
  background:
    linear-gradient(145deg,rgba(241,234,223,.060),rgba(241,234,223,.018)),
    rgba(7,18,37,.46);
  border-color:rgba(216,203,184,.12);
  box-shadow:inset 0 1px 0 rgba(241,234,223,.055);
}
[data-theme="light"] .card,[data-theme="light"] .svc-card,[data-theme="light"] .sit-path,[data-theme="light"] .trust-card,[data-theme="light"] .secteur-card,[data-theme="light"] .te-card-large,[data-theme="light"] .te-card-sm,[data-theme="light"] .te-card-row,[data-theme="light"] .sw-card,[data-theme="light"] .testi-card,[data-theme="light"] .team-card,[data-theme="light"] .faq-item,[data-theme="light"] .cblk,[data-theme="light"] .ci-card,[data-theme="light"] .ct-card,[data-theme="light"] .ct-form,[data-theme="light"] .legal-info-card,[data-theme="light"] .ck-card{
  background:linear-gradient(145deg,rgba(255,250,241,.72),rgba(233,223,209,.44));
  border-color:rgba(58,39,28,.11);
}
.card:hover,.svc-card:hover,.trust-card:hover,.secteur-card:hover,.te-card-large:hover,.te-card-sm:hover,.sw-card:hover,.testi-card:hover,.team-card:hover{
  border-color:rgba(182,139,45,.25);
  box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(241,234,223,.09);
}
.svc-ic,.sit-ic,.te-icon,.te-icon-sm,.sw-icon,.sec-ico,.ct-card-ico{
  background:rgba(7,18,37,.54);
  border-color:rgba(216,203,184,.14);
  color:var(--royal-gold);
}
.svc-grid .svc-card:nth-child(3n+1) .svc-ic,
.sw-grid .sw-card:nth-child(3n+1) .sw-icon{color:var(--r)}
.svc-grid .svc-card:nth-child(3n+2) .svc-ic,
.sw-grid .sw-card:nth-child(3n+2) .sw-icon{color:#7b91bd}
.svc-grid .svc-card:nth-child(3n+3) .svc-ic,
.sw-grid .sw-card:nth-child(3n+3) .sw-icon{color:#6a9b78}
.svc-card:hover .svc-ic,.sw-card:hover .sw-icon,.secteur-card:hover .sec-ico,.te-card-large:hover .te-icon,.te-card-sm:hover .te-icon{
  background:var(--royal-navy-2);
  color:var(--royal-ivory);
  border-color:rgba(182,139,45,.26);
}
.ticker-wrap,#trust-bar{
  border-color:rgba(216,203,184,.12);
  background:rgba(7,18,37,.58);
}
.tb-veil{
  background:
    linear-gradient(90deg,rgba(4,7,14,.90),rgba(7,18,37,.58),rgba(4,7,14,.90)),
    radial-gradient(ellipse 70% 90% at 50% 50%,rgba(182,139,45,.10),transparent 72%);
}
.tb-icon{
  background:rgba(7,18,37,.64);
  border-color:rgba(182,139,45,.26);
  color:var(--royal-gold);
}
.tb-item:hover .tb-icon{
  background:rgba(18,53,32,.54);
  border-color:rgba(182,139,45,.34);
}
section{
  padding-top:clamp(88px,10vw,150px);
  padding-bottom:clamp(88px,10vw,150px);
}
section::before{
  background:linear-gradient(180deg,var(--bg),transparent);
  opacity:.82;
}
section::after{
  background:linear-gradient(0deg,var(--bg),transparent);
  opacity:.72;
}
.tartan,.tartan-light{
  filter:saturate(.46) brightness(.58) contrast(1.02);
}
[data-theme="light"] .tartan{
  filter:saturate(.58) brightness(.90) contrast(.98);
}
@media(prefers-reduced-motion:no-preference){
  .btn,.card,.svc-card,.sw-card,.secteur-card,.team-card,.nav-a{
    transition-duration:.42s;
    transition-timing-function:cubic-bezier(.2,.7,.2,1);
  }
}

/* ══ DESIGN SYSTEM v6 — PURGE DÉFINITIVE DU VOILE BLEU ════════════════════
   Contexte : le bloc "Royal Edition" (fin de fichier) avait réintroduit du
   navy massif sur body (72%), hero (74%), nav (82%), chaque carte (46%),
   chaque icône (54%), trust-bar (58%). Ce bloc DS6 placé en dernière position
   écrase toutes ces sources et rend le bleu purement contextuel.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables de fond — chauds, profonds, zéro teinte froide ──────────── */
:root{
  --bg:  #070706;   /* quasi-noir chaud               */
  --bg2: #0B0A09;   /* fond secondaire warm           */
  --bg3: #100E0C;   /* fond profond warm              */
  --bg4: #181412;   /* fond modal/overlay warm        */
  --gl:  rgba(7,7,6,.86);
}
/* Light mode ivoire chaud — inchangé */

/* ── Corps — suppression du radial navy 72% ────────────────────────────── */
body{
  background:
    radial-gradient(ellipse 82% 50% at 78% -8%,  rgba(169,15,31,.16), transparent 62%),
    radial-gradient(ellipse 50% 42% at 94%  96%,  rgba(31,74,54,.10),  transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 46%,var(--bg) 100%);
  color:var(--tx);
}
[data-theme="light"] body{
  background:
    radial-gradient(ellipse 82% 42% at 74% -10%,rgba(169,15,31,.08),transparent 64%),
    linear-gradient(180deg,#f5eee5 0%,var(--bg) 46%,#eadfce 100%);
}

/* ── Ghost grid — rouge + or uniquement, navy supprimé ─────────────────── */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(90deg,
      transparent 0 46px,
      rgba(184,21,37,.08) 46px 48px,
      transparent 48px 158px,
      rgba(196,154,36,.05) 158px 160px,
      transparent 160px 192px),
    linear-gradient(0deg,
      transparent 0 46px,
      rgba(184,21,37,.06) 46px 48px,
      transparent 48px 158px,
      rgba(196,154,36,.04) 158px 160px,
      transparent 160px 192px);
  background-size:192px 192px;
  opacity:.28;
  mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
}
[data-theme="light"] body::before{opacity:.11}

/* ── Nav — fond neutre, zéro navy ──────────────────────────────────────── */
#nav.scrolled,#nav{
  background:linear-gradient(180deg,rgba(5,5,7,.88),rgba(4,4,6,.72));
  border-bottom:1px solid rgba(216,203,184,.12);
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
[data-theme="light"] #nav.scrolled,[data-theme="light"] #nav{
  background:linear-gradient(180deg,rgba(242,234,223,.92),rgba(242,234,223,.78));
  border-bottom-color:rgba(58,39,28,.10);
}

/* ── Héro — vert profond remplace navy 74% en contre-champ ─────────────── */
#hero{
  background:
    radial-gradient(ellipse 58% 52% at 20% 40%,rgba(169,15,31,.10),transparent 66%),
    radial-gradient(ellipse 64% 60% at 82% 42%,rgba(31,74,54,.11), transparent 70%),
    linear-gradient(100deg,var(--bg) 0%,rgba(4,4,6,.97) 42%,rgba(5,6,8,.90) 100%);
}
#hero::before{
  background:
    linear-gradient(90deg,var(--bg) 0%,rgba(4,4,6,.88) 40%,rgba(4,4,6,.26) 78%),
    radial-gradient(ellipse 70% 58% at 82% 44%,rgba(182,139,45,.07),transparent 70%);
}
.hero-creds{
  background:
    linear-gradient(135deg,rgba(241,234,223,.056),rgba(241,234,223,.016)),
    rgba(6,6,7,.62);
  border:1px solid rgba(216,203,184,.16);
  box-shadow:0 22px 80px rgba(0,0,0,.30),inset 0 1px 0 rgba(241,234,223,.08);
}
.hero-tartan-glow{
  background:
    radial-gradient(ellipse 64% 52% at 66% 44%,rgba(182,139,45,.09),transparent 68%),
    radial-gradient(ellipse 50% 40% at 72% 62%,rgba(31,74,54,.11),  transparent 68%);
}

/* ── Cartes — fond neutre warm, sans navy ───────────────────────────────── */
.card,.svc-card,.sit-path,.trust-card,.secteur-card,
.te-card-large,.te-card-sm,.te-card-row,.sw-card,
.testi-card,.team-card,.faq-item,.cblk,.ci-card,
.ct-card,.ct-form,.legal-info-card,.ck-card{
  background:
    linear-gradient(145deg,rgba(241,234,223,.058),rgba(241,234,223,.016)),
    rgba(8,7,6,.42);
  border-color:rgba(216,203,184,.12);
  box-shadow:inset 0 1px 0 rgba(241,234,223,.055);
}

/* ── Icônes — fond sombre neutre, sans navy ─────────────────────────────── */
.svc-ic,.sit-ic,.te-icon,.te-icon-sm,.sw-icon,.sec-ico,.ct-card-ico{
  background:rgba(6,5,5,.88);
  border-color:rgba(216,203,184,.14);
}
/* Hover icône — contexte warm, pas navy-2 */
.svc-card:hover .svc-ic,.sw-card:hover .sw-icon,
.secteur-card:hover .sec-ico,
.te-card-large:hover .te-icon,.te-card-sm:hover .te-icon{
  background:rgba(10,8,7,.88);
  color:var(--royal-ivory);
  border-color:rgba(182,139,45,.26);
}

/* ── Trust bar — fond neutre, sans navy ─────────────────────────────────── */
.ticker-wrap,#trust-bar{
  border-color:rgba(216,203,184,.12);
  background:rgba(5,5,6,.56);
}
.tb-veil{
  background:
    linear-gradient(90deg,rgba(4,4,5,.90),rgba(5,5,7,.52),rgba(4,4,5,.90)),
    radial-gradient(ellipse 70% 90% at 50% 50%,rgba(182,139,45,.09),transparent 72%);
}
.tb-icon{
  background:rgba(6,5,5,.88);
  border-color:rgba(182,139,45,.26);
  color:var(--royal-gold);
  box-shadow:none;
}
.tb-item:hover .tb-icon{
  background:rgba(31,74,54,.48);
  border-color:rgba(182,139,45,.34);
  color:var(--royal-ivory);
}

/* ── Tartan — filtre final (priorité maximale) ──────────────────────────── */
.tartan,.tartan-light{
  filter:saturate(.52) brightness(.64) contrast(1.03);
}
.tartan-light{filter:saturate(.42) brightness(.74)}
[data-theme="light"] .tartan{filter:saturate(.68) brightness(.86) contrast(1.01)}
[data-theme="light"] .tartan-light{filter:saturate(.50) brightness(.90)}

/* ══ DESIGN SYSTEM v7 — Système Lumineux Cohérent ══════════════════════════
   Règle fondamentale : chaque couleur génère uniquement son propre spectre.
   Rouge → halo rouge · Navy → lueur bleue noble · Forest → halo vert profond
   Or → lumière chaude · Ivoire → glow doux
   Aucun glow générique · Aucun effet RGB · Cinématique premium.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Palette canonique du système lumineux ──────────────────────────────── */
:root{
  /* Bleu Royal Stewart authentique — noble, pas électrique */
  --navy:      #1F2F6B;
  --navy-hi:   #4E70CC;   /* lumineux sur fond sombre  */
  --navy-bg:   rgba(31,47,107,.10); --navy-bd: rgba(31,47,107,.28);
  /* Vert Royal Stewart authentique — profond, textile */
  --forest:    #1F4A36;
  --forest-hi: #3E7A56;   /* lumineux sur fond sombre  */
  --forest-bg: rgba(31,74,54,.10);  --forest-bd: rgba(31,74,54,.26);
  /* Or premium */
  --gold-hi:   #C8A228;
}
[data-theme="light"]{
  --navy-hi:   #1E3070;  --forest-hi: #1C4A38;  --gold-hi: #7A5E00;
  --navy-bg:   rgba(31,47,107,.06); --navy-bd: rgba(31,47,107,.18);
  --forest-bg: rgba(31,74,54,.06);  --forest-bd: rgba(31,74,54,.18);
}

/* ══════════════════════════════════════════════════════════════════════════
   ICÔNES — HALO RING + LUEUR AMBIANTE (contextuels par couleur)
   ══════════════════════════════════════════════════════════════════════════ */

/* Services — rotation 4 couleurs */
.svc-grid .svc-card:nth-child(4n+1) .svc-ic{
  color:var(--r); border-color:rgba(184,21,37,.26);
  box-shadow:0 0 0 1px rgba(184,21,37,.18),0 0 18px rgba(184,21,37,.14),0 0 36px rgba(184,21,37,.05);
}
.svc-grid .svc-card:nth-child(4n+2) .svc-ic{
  color:var(--navy-hi); border-color:var(--navy-bd);
  box-shadow:0 0 0 1px rgba(31,47,107,.22),0 0 18px rgba(31,47,107,.15),0 0 36px rgba(31,47,107,.05);
}
.svc-grid .svc-card:nth-child(4n+3) .svc-ic{
  color:var(--forest-hi); border-color:var(--forest-bd);
  box-shadow:0 0 0 1px rgba(31,74,54,.22),0 0 18px rgba(31,74,54,.16),0 0 36px rgba(31,74,54,.05);
}
.svc-grid .svc-card:nth-child(4n+4) .svc-ic{
  color:var(--gold-hi); border-color:rgba(196,154,36,.28);
  box-shadow:0 0 0 1px rgba(196,154,36,.18),0 0 18px rgba(196,154,36,.12),0 0 36px rgba(196,154,36,.04);
}

/* Situations — rouge (impair) / navy (pair) */
.sit-grid .sit-card:nth-child(2n+1) .sit-ic{
  color:var(--r); border-color:rgba(184,21,37,.26);
  box-shadow:0 0 0 1px rgba(184,21,37,.18),0 0 18px rgba(184,21,37,.13);
}
.sit-grid .sit-card:nth-child(2n) .sit-ic{
  color:var(--navy-hi); border-color:var(--navy-bd);
  box-shadow:0 0 0 1px rgba(31,47,107,.22),0 0 18px rgba(31,47,107,.14);
}

/* Logiciels — rouge / navy / forest */
.sw-grid .sw-card:nth-child(3n+1) .sw-icon{
  color:var(--r); border-color:rgba(184,21,37,.26);
  box-shadow:0 0 0 1px rgba(184,21,37,.18),0 0 18px rgba(184,21,37,.13);
}
.sw-grid .sw-card:nth-child(3n+2) .sw-icon{
  color:var(--navy-hi); border-color:var(--navy-bd);
  box-shadow:0 0 0 1px rgba(31,47,107,.22),0 0 18px rgba(31,47,107,.14);
}
.sw-grid .sw-card:nth-child(3n+3) .sw-icon{
  color:var(--forest-hi); border-color:var(--forest-bd);
  box-shadow:0 0 0 1px rgba(31,74,54,.22),0 0 18px rgba(31,74,54,.14);
}

/* Trust editorial — gauche:rouge, droite:navy, gauche-dernier:forest */
.te-col-left .te-card-large .te-icon,
.te-col-left .te-card-sm:not(:last-child) .te-icon{
  color:var(--r); border-color:rgba(184,21,37,.26);
  box-shadow:0 0 0 1px rgba(184,21,37,.18),0 0 18px rgba(184,21,37,.13);
}
.te-col-right .te-card-large .te-icon,
.te-col-right .te-card-sm .te-icon{
  color:var(--navy-hi); border-color:var(--navy-bd);
  box-shadow:0 0 0 1px rgba(31,47,107,.22),0 0 18px rgba(31,47,107,.14);
}
.te-col-left .te-card-sm:last-child .te-icon{
  color:var(--forest-hi); border-color:var(--forest-bd);
  box-shadow:0 0 0 1px rgba(31,74,54,.22),0 0 18px rgba(31,74,54,.14);
}

/* Secteurs — navy cohérent */
.sec-ico{
  color:var(--navy-hi); border-color:var(--navy-bd);
  box-shadow:0 0 0 1px rgba(31,47,107,.20),0 0 16px rgba(31,47,107,.13);
}

/* Steps CI — navy (impair) / rouge (pair) */
.ci-step:nth-child(odd) .ci-sn{
  color:var(--navy-hi); border-color:var(--navy-bd); background:rgba(31,47,107,.10);
  box-shadow:0 0 0 1px rgba(31,47,107,.20),0 0 14px rgba(31,47,107,.12);
}
.ci-step:nth-child(even) .ci-sn{
  color:var(--r); border-color:rgba(184,21,37,.28); background:rgba(184,21,37,.08);
  box-shadow:0 0 0 1px rgba(184,21,37,.18),0 0 14px rgba(184,21,37,.11);
}

/* Trust bar — thème or complet (base + hover or) */
.tb-icon{
  background:rgba(6,5,5,.88); border-color:rgba(182,139,45,.28);
  color:var(--royal-gold);
  box-shadow:0 0 0 1px rgba(182,139,45,.14),0 0 14px rgba(182,139,45,.10);
}
.tb-item:hover .tb-icon{
  background:rgba(182,139,45,.16); border-color:rgba(182,139,45,.44);
  color:#e8c84a;
  box-shadow:0 0 0 1px rgba(182,139,45,.22),0 0 18px rgba(182,139,45,.16);
}
[data-theme="light"] .tb-icon{
  background:rgba(246,242,234,.94); border-color:rgba(182,139,45,.28);
  color:var(--gold-hi); box-shadow:none;
}
[data-theme="light"] .tb-item:hover .tb-icon{
  background:rgba(182,139,45,.11); border-color:rgba(182,139,45,.36);
}

/* ══════════════════════════════════════════════════════════════════════════
   HOVER STATES DES CARTES — GLOW EXTERNE CONTEXTUEL
   Même spécificité que DS4 + position postérieure → override garanti
   ══════════════════════════════════════════════════════════════════════════ */

/* Services — outer glow par couleur d'icône */
.svc-grid .svc-card:nth-child(4n+1):hover{
  border-color:rgba(184,21,37,.28);
  box-shadow:0 20px 64px rgba(0,0,0,.38),0 0 32px rgba(184,21,37,.11),0 0 0 1px rgba(184,21,37,.07) inset;
}
.svc-grid .svc-card:nth-child(4n+2):hover{
  border-color:rgba(31,47,107,.32);
  box-shadow:0 20px 64px rgba(0,0,0,.38),0 0 32px rgba(31,47,107,.13),0 0 0 1px rgba(31,47,107,.06) inset;
}
.svc-grid .svc-card:nth-child(4n+3):hover{
  border-color:rgba(31,74,54,.32);
  box-shadow:0 20px 64px rgba(0,0,0,.38),0 0 32px rgba(31,74,54,.13),0 0 0 1px rgba(31,74,54,.06) inset;
}
.svc-grid .svc-card:nth-child(4n+4):hover{
  border-color:rgba(196,154,36,.28);
  box-shadow:0 20px 64px rgba(0,0,0,.38),0 0 32px rgba(196,154,36,.10),0 0 0 1px rgba(196,154,36,.06) inset;
}
/* Hover fill icône services */
.svc-grid .svc-card:nth-child(4n+1):hover .svc-ic{
  background:var(--r);color:#fff;border-color:rgba(184,21,37,.55);
  box-shadow:0 0 20px rgba(184,21,37,.28);
}
.svc-grid .svc-card:nth-child(4n+2):hover .svc-ic{
  background:var(--navy);color:#fff;border-color:rgba(31,47,107,.55);
  box-shadow:0 0 20px rgba(31,47,107,.26);
}
.svc-grid .svc-card:nth-child(4n+3):hover .svc-ic{
  background:var(--forest);color:#fff;border-color:rgba(31,74,54,.55);
  box-shadow:0 0 20px rgba(31,74,54,.24);
}
.svc-grid .svc-card:nth-child(4n+4):hover .svc-ic{
  background:rgba(196,154,36,.84);color:rgba(5,4,3,.95);border-color:rgba(196,154,36,.55);
  box-shadow:0 0 20px rgba(196,154,36,.20);
}

/* Situations — outer glow par couleur */
.sit-grid .sit-card:nth-child(2n+1):hover{
  border-color:rgba(184,21,37,.26);
  box-shadow:0 20px 64px rgba(0,0,0,.36),0 0 28px rgba(184,21,37,.10);
}
.sit-grid .sit-card:nth-child(2n):hover{
  border-color:rgba(31,47,107,.30);
  box-shadow:0 20px 64px rgba(0,0,0,.36),0 0 28px rgba(31,47,107,.12);
}
/* Hover fill icône situations */
.sit-grid .sit-card:nth-child(2n+1):hover .sit-ic{
  background:var(--r);color:#fff;border-color:rgba(184,21,37,.55);
  box-shadow:0 0 16px rgba(184,21,37,.26);
}
.sit-grid .sit-card:nth-child(2n):hover .sit-ic{
  background:var(--navy);color:#fff;border-color:rgba(31,47,107,.55);
  box-shadow:0 0 16px rgba(31,47,107,.24);
}

/* Logiciels — outer glow */
.sw-grid .sw-card:nth-child(3n+1):hover{
  border-color:rgba(184,21,37,.26);
  box-shadow:0 20px 64px rgba(0,0,0,.36),0 0 28px rgba(184,21,37,.10);
}
.sw-grid .sw-card:nth-child(3n+2):hover{
  border-color:rgba(31,47,107,.30);
  box-shadow:0 20px 64px rgba(0,0,0,.36),0 0 28px rgba(31,47,107,.12);
}
.sw-grid .sw-card:nth-child(3n+3):hover{
  border-color:rgba(31,74,54,.30);
  box-shadow:0 20px 64px rgba(0,0,0,.36),0 0 28px rgba(31,74,54,.12);
}
/* Hover fill icône logiciels */
.sw-grid .sw-card:nth-child(3n+1):hover .sw-icon{
  background:var(--r);color:#fff;border-color:rgba(184,21,37,.55);
  box-shadow:0 0 16px rgba(184,21,37,.26);
}
.sw-grid .sw-card:nth-child(3n+2):hover .sw-icon{
  background:var(--navy);color:#fff;border-color:rgba(31,47,107,.55);
  box-shadow:0 0 16px rgba(31,47,107,.24);
}
.sw-grid .sw-card:nth-child(3n+3):hover .sw-icon{
  background:var(--forest);color:#fff;border-color:rgba(31,74,54,.55);
  box-shadow:0 0 16px rgba(31,74,54,.22);
}

/* Trust editorial — outer glow contextuel */
.te-col-right .te-card-large:hover{
  border-color:rgba(31,47,107,.30);
  box-shadow:0 20px 64px rgba(0,0,0,.36),0 0 28px rgba(31,47,107,.12),0 0 0 1px rgba(31,47,107,.06) inset;
}
.te-col-right .te-card-large:hover .te-icon{
  background:var(--navy);color:#fff;border-color:rgba(31,47,107,.55);
  box-shadow:0 0 16px rgba(31,47,107,.24);
}
.te-col-left .te-card-sm:last-child:hover{
  border-color:rgba(31,74,54,.30);
  box-shadow:0 20px 64px rgba(0,0,0,.36),0 0 28px rgba(31,74,54,.12);
}
.te-col-left .te-card-sm:last-child:hover .te-icon{
  background:var(--forest);color:#fff;border-color:rgba(31,74,54,.55);
  box-shadow:0 0 16px rgba(31,74,54,.22);
}

/* Secteurs — navy cohérent */
.secteur-card:hover{
  border-color:rgba(31,47,107,.30);
  box-shadow:0 20px 64px rgba(0,0,0,.36),0 0 28px rgba(31,47,107,.12);
}
.secteur-card:hover .sec-ico{
  background:var(--navy);color:#fff;border-color:rgba(31,47,107,.55);
  box-shadow:0 0 16px rgba(31,47,107,.24);
}

/* ══════════════════════════════════════════════════════════════════════════
   BOUTONS — HALOS CONTEXTUELS COHÉRENTS
   ══════════════════════════════════════════════════════════════════════════ */
.btn-r:hover,.ci-btn:hover,.fbtn:hover{
  box-shadow:0 12px 40px rgba(124,14,24,.36),0 0 0 1px rgba(196,154,36,.32) inset,0 1px 0 rgba(255,240,210,.12) inset;
  transform:translateY(-2px);
}
.btn-o:hover{
  border-color:rgba(182,139,45,.36);
  color:var(--royal-gold);
  background:rgba(182,139,45,.08);
  box-shadow:0 4px 20px rgba(182,139,45,.12);
  transform:translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════════════
   CI GLOW — TRICOLORE ROYAL COHÉRENT
   ══════════════════════════════════════════════════════════════════════════ */
.ci-glow{
  background:
    radial-gradient(ellipse 62% 58% at 50% 44%,rgba(184,21,37,.12) 0%,transparent 64%),
    radial-gradient(ellipse 44% 36% at 22% 56%,rgba(31,47,107,.10) 0%,transparent 58%),
    radial-gradient(ellipse 38% 30% at 78% 34%,rgba(31,74,54,.09)  0%,transparent 56%);
}

/* ══════════════════════════════════════════════════════════════════════════
   DIVERS — MICRO-INTERACTIONS COHÉRENTES
   ══════════════════════════════════════════════════════════════════════════ */
/* Nav — hover gold, aucune teinte froide */
.nav-a:hover{color:var(--royal-gold);background:rgba(182,139,45,.07)}
/* FAQ — warm ivoire, pas navy */
.faq-q:hover{background:rgba(241,234,223,.04);border-radius:8px}
/* Chatbot — neutre sombre warm */
.cb-head-overlay{background:linear-gradient(135deg,rgba(4,4,5,.97),rgba(7,6,8,.90))}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — SUPPRESSION COMPLÈTE DES HALOS (performance + lisibilité)
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .svc-ic,.sit-ic,.te-icon,.te-icon-sm,.sw-icon,.sec-ico,.tb-icon,.ci-sn{
    box-shadow:none !important;
  }
  .svc-grid .svc-card:hover,.sit-grid .sit-card:hover,
  .sw-grid .sw-card:hover,.secteur-card:hover,
  .te-card-large:hover,.te-card-sm:hover{
    box-shadow:0 8px 24px rgba(0,0,0,.28) !important;
    border-color:rgba(216,203,184,.12) !important;
  }
}

/* ══ DESIGN SYSTEM v8 — Identité Colorimétrique Complète des Cartes ════════
   Diagnostic : les pseudo-éléments ::before / ::after codés en dur (rouge)
   dans la CSS de base (lignes ~472–873) survivaient à tous les overrides DS7
   car DS7 ne ciblait que les états hover du container, pas les pseudo-éléments.
   DS8 neutralise ces sources rouges et bâtit une identité cohérente :
   bordure + glow ambiant + pseudo-déco + hover → dérivés de la couleur icon.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   1. PSEUDO-ÉLÉMENTS — NEUTRALISER LE ROUGE SYSTÉMIQUE
   Chaque pseudo-déco hérite de la couleur de son icône
   ══════════════════════════════════════════════════════════════════════════ */

/* Service cards — coin gradient contextuel */
.svc-grid .svc-card:nth-child(4n+1)::after{
  background:linear-gradient(135deg,rgba(184,21,37,.07),transparent 52%);
}
.svc-grid .svc-card:nth-child(4n+2)::after{
  background:linear-gradient(135deg,rgba(31,47,107,.07),transparent 52%);
}
.svc-grid .svc-card:nth-child(4n+3)::after{
  background:linear-gradient(135deg,rgba(31,74,54,.07),transparent 52%);
}
.svc-grid .svc-card:nth-child(4n+4)::after{
  background:linear-gradient(135deg,rgba(196,154,36,.06),transparent 52%);
}

/* Situations — filet latéral gauche contextuel */
.sit-grid .sit-card:nth-child(2n+1)::before{background:var(--r)}
.sit-grid .sit-card:nth-child(2n)::before  {background:var(--navy)}

/* Software cards — coin gradient contextuel */
.sw-grid .sw-card:nth-child(3n+1)::before{
  background:linear-gradient(135deg,rgba(184,21,37,.06),transparent 52%);
}
.sw-grid .sw-card:nth-child(3n+2)::before{
  background:linear-gradient(135deg,rgba(31,47,107,.06),transparent 52%);
}
.sw-grid .sw-card:nth-child(3n+3)::before{
  background:linear-gradient(135deg,rgba(31,74,54,.06),transparent 52%);
}

/* Secteur cards — overlay navy (tous navy d'icônes) */
.secteur-card::before{
  background:
    radial-gradient(ellipse 80% 60% at 100% 100%,rgba(31,47,107,.06) 0%,transparent 55%),
    radial-gradient(ellipse 60% 80% at 0%   0%,  rgba(31,74,54,.04)  0%,transparent 50%);
}
.secteur-card::after{
  background:linear-gradient(135deg,rgba(255,255,255,.022) 0%,transparent 40%,transparent 60%,rgba(31,47,107,.04) 100%);
}

/* ══════════════════════════════════════════════════════════════════════════
   2. BORDURES REPOS — IDENTITÉ VISIBLE SANS HOVER
   Très subtiles (.07–.09) : fondues, semi-transparentes, premium
   ══════════════════════════════════════════════════════════════════════════ */

/* Services */
.svc-grid .svc-card:nth-child(4n+1){
  border-color:rgba(184,21,37,.10);
  box-shadow:0 3px 18px rgba(0,0,0,.20),0 0 0 1px rgba(184,21,37,.05) inset;
}
.svc-grid .svc-card:nth-child(4n+2){
  border-color:rgba(31,47,107,.09);
  box-shadow:0 3px 18px rgba(0,0,0,.20),0 0 0 1px rgba(31,47,107,.05) inset;
}
.svc-grid .svc-card:nth-child(4n+3){
  border-color:rgba(31,74,54,.09);
  box-shadow:0 3px 18px rgba(0,0,0,.20),0 0 0 1px rgba(31,74,54,.05) inset;
}
.svc-grid .svc-card:nth-child(4n+4){
  border-color:rgba(196,154,36,.08);
  box-shadow:0 3px 18px rgba(0,0,0,.20),0 0 0 1px rgba(196,154,36,.04) inset;
}

/* Situations */
.sit-grid .sit-card:nth-child(2n+1){border-color:rgba(184,21,37,.09)}
.sit-grid .sit-card:nth-child(2n)  {border-color:rgba(31,47,107,.08)}

/* Software */
.sw-grid .sw-card:nth-child(3n+1){border-color:rgba(184,21,37,.09)}
.sw-grid .sw-card:nth-child(3n+2){border-color:rgba(31,47,107,.08)}
.sw-grid .sw-card:nth-child(3n+3){border-color:rgba(31,74,54,.08)}

/* Secteurs */
.secteur-card{border-color:rgba(31,47,107,.09)}

/* Trust editorial */
.te-col-right .te-card-large{border-color:rgba(31,47,107,.09)}
.te-col-left  .te-card-sm:last-child{border-color:rgba(31,74,54,.09)}

/* ══════════════════════════════════════════════════════════════════════════
   3. HOVER — RENFORCEMENT PROGRESSIF (base DS7 amplifiée)
   Border × 2–3 · box-shadow · pas de flash brutal
   ══════════════════════════════════════════════════════════════════════════ */

/* Services hover override (::after color + border strength) */
.svc-grid .svc-card:nth-child(4n+1):hover{
  border-color:rgba(184,21,37,.26);
  box-shadow:0 20px 64px rgba(0,0,0,.38),0 0 32px rgba(184,21,37,.11),0 0 0 1px rgba(184,21,37,.07) inset;
}
.svc-grid .svc-card:nth-child(4n+2):hover{
  border-color:rgba(31,47,107,.26);
  box-shadow:0 20px 64px rgba(0,0,0,.38),0 0 32px rgba(31,47,107,.12),0 0 0 1px rgba(31,47,107,.06) inset;
}
.svc-grid .svc-card:nth-child(4n+3):hover{
  border-color:rgba(31,74,54,.26);
  box-shadow:0 20px 64px rgba(0,0,0,.38),0 0 32px rgba(31,74,54,.12),0 0 0 1px rgba(31,74,54,.06) inset;
}
.svc-grid .svc-card:nth-child(4n+4):hover{
  border-color:rgba(196,154,36,.24);
  box-shadow:0 20px 64px rgba(0,0,0,.38),0 0 32px rgba(196,154,36,.09),0 0 0 1px rgba(196,154,36,.05) inset;
}

/* Situations hover */
.sit-grid .sit-card:nth-child(2n+1):hover{
  border-color:rgba(184,21,37,.24);
  box-shadow:0 18px 56px rgba(0,0,0,.36),0 0 26px rgba(184,21,37,.10);
}
.sit-grid .sit-card:nth-child(2n):hover{
  border-color:rgba(31,47,107,.24);
  box-shadow:0 18px 56px rgba(0,0,0,.36),0 0 26px rgba(31,47,107,.11);
}

/* Software hover */
.sw-grid .sw-card:nth-child(3n+1):hover{
  border-color:rgba(184,21,37,.24);
  box-shadow:0 18px 56px rgba(0,0,0,.36),0 0 26px rgba(184,21,37,.10);
}
.sw-grid .sw-card:nth-child(3n+2):hover{
  border-color:rgba(31,47,107,.24);
  box-shadow:0 18px 56px rgba(0,0,0,.36),0 0 26px rgba(31,47,107,.11);
}
.sw-grid .sw-card:nth-child(3n+3):hover{
  border-color:rgba(31,74,54,.24);
  box-shadow:0 18px 56px rgba(0,0,0,.36),0 0 26px rgba(31,74,54,.11);
}

/* Secteurs hover */
.secteur-card:hover{
  border-color:rgba(31,47,107,.26);
  box-shadow:0 18px 56px rgba(0,0,0,.36),0 0 26px rgba(31,47,107,.12);
}

/* ══════════════════════════════════════════════════════════════════════════
   4. ICÔNES — TEINTURE DE FOND SUBTILE (repos)
   Renforce l'identité colorimétrique même sans hover
   ══════════════════════════════════════════════════════════════════════════ */

.svc-grid .svc-card:nth-child(4n+1) .svc-ic{background:rgba(184,21,37,.13)}
.svc-grid .svc-card:nth-child(4n+2) .svc-ic{background:rgba(31,47,107,.15)}
.svc-grid .svc-card:nth-child(4n+3) .svc-ic{background:rgba(31,74,54,.14)}
.svc-grid .svc-card:nth-child(4n+4) .svc-ic{background:rgba(196,154,36,.13)}

.sit-grid .sit-card:nth-child(2n+1) .sit-ic{background:rgba(184,21,37,.12)}
.sit-grid .sit-card:nth-child(2n)   .sit-ic{background:rgba(31,47,107,.14)}

.sw-grid .sw-card:nth-child(3n+1) .sw-icon{background:rgba(184,21,37,.12)}
.sw-grid .sw-card:nth-child(3n+2) .sw-icon{background:rgba(31,47,107,.14)}
.sw-grid .sw-card:nth-child(3n+3) .sw-icon{background:rgba(31,74,54,.13)}

/* Secteurs — tous navy */
.sec-ico{background:rgba(31,47,107,.14);border-color:rgba(31,47,107,.26)}

/* Trust editorial */
.te-col-right .te-card-large .te-icon{background:rgba(31,47,107,.14)}
.te-col-left  .te-card-sm:last-child .te-icon{background:rgba(31,74,54,.13)}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — SUPPRIMER TOUS LES GLOWS (performance)
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .svc-grid .svc-card,
  .sit-grid .sit-card,
  .sw-grid .sw-card,
  .secteur-card{border-color:rgba(216,203,184,.10) !important;box-shadow:none !important}
  .svc-ic,.sit-ic,.sw-icon,.sec-ico,.te-icon,.te-icon-sm{
    background:rgba(6,5,5,.88) !important;box-shadow:none !important;
  }
}

/* ══ DESIGN SYSTEM v10 — Spécificité ID : Override Complet des Cartes ══════
   CAUSE RACINE FINALE :
   ┌─────────────────────────────────────────────────────────────────────────┐
   │ #services .svc-card:hover  → spécificité 1-2-0                         │
   │ #logiciels .sw-card:hover  → spécificité 1-2-0                         │
   │ #services .svc-card        → spécificité 1-1-0                         │
   │ #logiciels .sw-card        → spécificité 1-1-0                         │
   │ #logiciels .sw-card::before{content:none} → 1-1-1 (désactive ::before) │
   │                                                                         │
   │ Nos règles DS7/DS8/DS9 : max 0-4-0 — toujours écrasées par l'ID.      │
   │ Un ID (1-0-0) bat INFINIMENT de classes.                                │
   └─────────────────────────────────────────────────────────────────────────┘
   DS10 monte à 1-3-0 (repos) et 1-4-0 (hover) pour gagner.
   Stratégie : remplacer la trame tartan rouge générique par une trame de
   la couleur de chaque carte (rouge/navy/forest/or).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   A. LOGICIELS — sw-card REPOS   (1-3-0 bat #logiciels .sw-card → 1-1-0)
   ══════════════════════════════════════════════════════════════════════════ */
#logiciels .sw-grid .sw-card:nth-child(3n+1){
  border-color:rgba(184,21,37,.34);
  background:
    radial-gradient(ellipse 85% 60% at 20% 10%,rgba(255,255,255,.026),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.010) 0%,transparent 16%,transparent 70%,rgba(20,4,8,.14) 100%),
    repeating-linear-gradient(90deg,rgba(184,21,37,.016) 0px,rgba(184,21,37,.016) 1px,transparent 1px,transparent 4px),
    repeating-linear-gradient(0deg,rgba(184,21,37,.014) 0px,rgba(184,21,37,.014) 1px,transparent 1px,transparent 4px),
    var(--sf);
}
#logiciels .sw-grid .sw-card:nth-child(3n+2){
  border-color:rgba(31,47,107,.28);
  background:
    radial-gradient(ellipse 85% 60% at 20% 10%,rgba(255,255,255,.026),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.010) 0%,transparent 16%,transparent 70%,rgba(4,8,20,.14) 100%),
    repeating-linear-gradient(90deg,rgba(31,47,107,.016) 0px,rgba(31,47,107,.016) 1px,transparent 1px,transparent 4px),
    repeating-linear-gradient(0deg,rgba(31,47,107,.014) 0px,rgba(31,47,107,.014) 1px,transparent 1px,transparent 4px),
    var(--sf);
}
#logiciels .sw-grid .sw-card:nth-child(3n+3){
  border-color:rgba(31,74,54,.24);
  background:
    radial-gradient(ellipse 85% 60% at 20% 10%,rgba(255,255,255,.026),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.010) 0%,transparent 16%,transparent 70%,rgba(4,14,8,.14) 100%),
    repeating-linear-gradient(90deg,rgba(31,74,54,.016) 0px,rgba(31,74,54,.016) 1px,transparent 1px,transparent 4px),
    repeating-linear-gradient(0deg,rgba(31,74,54,.014) 0px,rgba(31,74,54,.014) 1px,transparent 1px,transparent 4px),
    var(--sf);
}

/* ══════════════════════════════════════════════════════════════════════════
   B. LOGICIELS — sw-card HOVER   (1-4-0 bat #logiciels .sw-card:hover → 1-2-0)
   ══════════════════════════════════════════════════════════════════════════ */
#logiciels .sw-grid .sw-card:nth-child(3n+1):hover{
  border-color:rgba(184,21,37,.54);
  background:
    radial-gradient(ellipse 85% 60% at 20% 10%,rgba(255,255,255,.038),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.018) 0%,transparent 16%,transparent 70%,rgba(40,8,14,.21) 100%),
    repeating-linear-gradient(90deg,rgba(184,21,37,.026) 0px,rgba(184,21,37,.026) 1px,transparent 1px,transparent 4px),
    repeating-linear-gradient(0deg,rgba(184,21,37,.024) 0px,rgba(184,21,37,.024) 1px,transparent 1px,transparent 4px),
    var(--sf);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.052),
    inset 0 -1px 0 rgba(0,0,0,.20),
    inset 0 0 30px rgba(20,4,8,.10),
    0 12px 28px rgba(0,0,0,.22),
    0 0 32px rgba(184,21,37,.14);
}
#logiciels .sw-grid .sw-card:nth-child(3n+2):hover{
  border-color:rgba(31,47,107,.46);
  background:
    radial-gradient(ellipse 85% 60% at 20% 10%,rgba(255,255,255,.038),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.018) 0%,transparent 16%,transparent 70%,rgba(8,14,40,.21) 100%),
    repeating-linear-gradient(90deg,rgba(31,47,107,.026) 0px,rgba(31,47,107,.026) 1px,transparent 1px,transparent 4px),
    repeating-linear-gradient(0deg,rgba(31,47,107,.024) 0px,rgba(31,47,107,.024) 1px,transparent 1px,transparent 4px),
    var(--sf);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.052),
    inset 0 -1px 0 rgba(0,0,0,.20),
    inset 0 0 30px rgba(4,8,20,.10),
    0 12px 28px rgba(0,0,0,.22),
    0 0 32px rgba(31,47,107,.16);
}
#logiciels .sw-grid .sw-card:nth-child(3n+3):hover{
  border-color:rgba(31,74,54,.42);
  background:
    radial-gradient(ellipse 85% 60% at 20% 10%,rgba(255,255,255,.038),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.018) 0%,transparent 16%,transparent 70%,rgba(8,40,20,.21) 100%),
    repeating-linear-gradient(90deg,rgba(31,74,54,.026) 0px,rgba(31,74,54,.026) 1px,transparent 1px,transparent 4px),
    repeating-linear-gradient(0deg,rgba(31,74,54,.024) 0px,rgba(31,74,54,.024) 1px,transparent 1px,transparent 4px),
    var(--sf);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.052),
    inset 0 -1px 0 rgba(0,0,0,.20),
    inset 0 0 30px rgba(4,14,8,.10),
    0 12px 28px rgba(0,0,0,.22),
    0 0 32px rgba(31,74,54,.14);
}

/* ══════════════════════════════════════════════════════════════════════════
   C. SERVICES — svc-card REPOS   (1-3-0 bat #services .svc-card → 1-1-0)
   Carte rouge (4n+1) : trame native conservée, uniquement border ajustée
   ══════════════════════════════════════════════════════════════════════════ */
#services .svc-grid .svc-card:nth-child(4n+2){
  border-color:rgba(31,47,107,.42);
  background:
    radial-gradient(ellipse 95% 70% at 18% 8%,rgba(255,255,255,.032),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.012) 0%,transparent 14%,transparent 66%,rgba(8,14,40,.22) 100%),
    repeating-linear-gradient(90deg,rgba(31,47,107,.020) 0px,rgba(31,47,107,.020) 1px,transparent 1px,transparent 5px),
    repeating-linear-gradient(0deg,rgba(31,47,107,.018) 0px,rgba(31,47,107,.018) 1px,transparent 1px,transparent 5px),
    var(--sf);
}
#services .svc-grid .svc-card:nth-child(4n+3){
  border-color:rgba(31,74,54,.36);
  background:
    radial-gradient(ellipse 95% 70% at 18% 8%,rgba(255,255,255,.032),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.012) 0%,transparent 14%,transparent 66%,rgba(8,40,20,.22) 100%),
    repeating-linear-gradient(90deg,rgba(31,74,54,.020) 0px,rgba(31,74,54,.020) 1px,transparent 1px,transparent 5px),
    repeating-linear-gradient(0deg,rgba(31,74,54,.018) 0px,rgba(31,74,54,.018) 1px,transparent 1px,transparent 5px),
    var(--sf);
}
#services .svc-grid .svc-card:nth-child(4n+4){
  border-color:rgba(120,72,8,.44);
  background:
    radial-gradient(ellipse 95% 70% at 18% 8%,rgba(255,255,255,.032),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.012) 0%,transparent 14%,transparent 66%,rgba(30,20,4,.22) 100%),
    repeating-linear-gradient(90deg,rgba(196,154,36,.018) 0px,rgba(196,154,36,.018) 1px,transparent 1px,transparent 5px),
    repeating-linear-gradient(0deg,rgba(196,154,36,.016) 0px,rgba(196,154,36,.016) 1px,transparent 1px,transparent 5px),
    var(--sf);
}

/* ══════════════════════════════════════════════════════════════════════════
   D. SERVICES — svc-card HOVER   (1-4-0 bat #services .svc-card:hover → 1-2-0)
   ══════════════════════════════════════════════════════════════════════════ */
#services .svc-grid .svc-card:nth-child(4n+1):hover{
  /* Rouge natif — on garde le tartan rouge existant, on ajuste juste le glow */
  border-color:rgba(192,24,42,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.28),
    inset 0 0 40px rgba(20,4,8,.18),
    0 16px 36px rgba(0,0,0,.28),
    0 0 32px rgba(184,21,37,.14);
}
#services .svc-grid .svc-card:nth-child(4n+2):hover{
  border-color:rgba(31,47,107,.52);
  background:
    radial-gradient(ellipse 95% 70% at 18% 8%,rgba(255,255,255,.045),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.020) 0%,transparent 14%,transparent 66%,rgba(8,14,40,.30) 100%),
    repeating-linear-gradient(90deg,rgba(31,47,107,.030) 0px,rgba(31,47,107,.030) 1px,transparent 1px,transparent 5px),
    repeating-linear-gradient(0deg,rgba(31,47,107,.028) 0px,rgba(31,47,107,.028) 1px,transparent 1px,transparent 5px),
    var(--sf);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.28),
    inset 0 0 40px rgba(4,8,20,.18),
    0 16px 36px rgba(0,0,0,.28),
    0 0 32px rgba(31,47,107,.16);
}
#services .svc-grid .svc-card:nth-child(4n+3):hover{
  border-color:rgba(31,74,54,.48);
  background:
    radial-gradient(ellipse 95% 70% at 18% 8%,rgba(255,255,255,.045),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.020) 0%,transparent 14%,transparent 66%,rgba(8,40,20,.30) 100%),
    repeating-linear-gradient(90deg,rgba(31,74,54,.030) 0px,rgba(31,74,54,.030) 1px,transparent 1px,transparent 5px),
    repeating-linear-gradient(0deg,rgba(31,74,54,.028) 0px,rgba(31,74,54,.028) 1px,transparent 1px,transparent 5px),
    var(--sf);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.28),
    inset 0 0 40px rgba(4,14,8,.18),
    0 16px 36px rgba(0,0,0,.28),
    0 0 32px rgba(31,74,54,.14);
}
#services .svc-grid .svc-card:nth-child(4n+4):hover{
  border-color:rgba(196,154,36,.38);
  background:
    radial-gradient(ellipse 95% 70% at 18% 8%,rgba(255,255,255,.045),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.020) 0%,transparent 14%,transparent 66%,rgba(30,20,4,.30) 100%),
    repeating-linear-gradient(90deg,rgba(196,154,36,.028) 0px,rgba(196,154,36,.028) 1px,transparent 1px,transparent 5px),
    repeating-linear-gradient(0deg,rgba(196,154,36,.026) 0px,rgba(196,154,36,.026) 1px,transparent 1px,transparent 5px),
    var(--sf);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.28),
    inset 0 0 40px rgba(14,10,2,.16),
    0 16px 36px rgba(0,0,0,.28),
    0 0 24px rgba(196,154,36,.12);
}

/* ══════════════════════════════════════════════════════════════════════════
   E. SECTEURS — secteur-card contextuel par position
   (secteurs n'a pas de règles ID, nos 0-3-0 gagnent déjà —
    mais on renforce les glows AT-HOVER via le box-shadow)
   ══════════════════════════════════════════════════════════════════════════ */
/* L'icône de Professions médicales (d2 = 2e = nth-child(2) = navy) */
.secteur-grid .secteur-card:nth-child(3n+1):hover{
  border-color:rgba(184,21,37,.28);
  box-shadow:0 20px 56px rgba(0,0,0,.36),0 0 32px rgba(184,21,37,.12);
}
.secteur-grid .secteur-card:nth-child(3n+2):hover{
  border-color:rgba(31,47,107,.30);
  box-shadow:0 20px 56px rgba(0,0,0,.36),0 0 32px rgba(31,47,107,.14);
}
.secteur-grid .secteur-card:nth-child(3n+3):hover{
  border-color:rgba(31,74,54,.28);
  box-shadow:0 20px 56px rgba(0,0,0,.36),0 0 32px rgba(31,74,54,.12);
}
/* Secteur-card resting : rotation 3 couleurs */
.secteur-grid .secteur-card:nth-child(3n+1){border-color:rgba(184,21,37,.10)}
.secteur-grid .secteur-card:nth-child(3n+2){border-color:rgba(31,47,107,.10)}
.secteur-grid .secteur-card:nth-child(3n+3){border-color:rgba(31,74,54,.10)}
/* Icons secteur : rotation 3 couleurs */
.secteur-grid .secteur-card:nth-child(3n+1) .sec-ico{
  color:var(--r);border-color:rgba(184,21,37,.26);background:rgba(184,21,37,.12);
  box-shadow:0 0 0 1px rgba(184,21,37,.16),0 0 14px rgba(184,21,37,.10);
}
.secteur-grid .secteur-card:nth-child(3n+2) .sec-ico{
  color:var(--navy-hi);border-color:var(--navy-bd);background:rgba(31,47,107,.14);
  box-shadow:0 0 0 1px rgba(31,47,107,.20),0 0 14px rgba(31,47,107,.12);
}
.secteur-grid .secteur-card:nth-child(3n+3) .sec-ico{
  color:var(--forest-hi);border-color:var(--forest-bd);background:rgba(31,74,54,.12);
  box-shadow:0 0 0 1px rgba(31,74,54,.18),0 0 14px rgba(31,74,54,.10);
}
/* Icons secteur hover */
.secteur-grid .secteur-card:nth-child(3n+1):hover .sec-ico{
  background:var(--r);color:#fff;border-color:rgba(184,21,37,.55);
  box-shadow:0 0 20px rgba(184,21,37,.28);
}
.secteur-grid .secteur-card:nth-child(3n+2):hover .sec-ico{
  background:var(--navy);color:#fff;border-color:rgba(31,47,107,.55);
  box-shadow:0 0 20px rgba(31,47,107,.26);
}
.secteur-grid .secteur-card:nth-child(3n+3):hover .sec-ico{
  background:var(--forest);color:#fff;border-color:rgba(31,74,54,.55);
  box-shadow:0 0 20px rgba(31,74,54,.22);
}
/* Pseudo-éléments secteur : contextuel */
.secteur-grid .secteur-card:nth-child(3n+1)::before{
  background:radial-gradient(ellipse 80% 60% at 100% 100%,rgba(184,21,37,.06) 0%,transparent 55%),
             radial-gradient(ellipse 60% 80% at 0%   0%,  rgba(184,21,37,.03) 0%,transparent 50%);
}
.secteur-grid .secteur-card:nth-child(3n+2)::before{
  background:radial-gradient(ellipse 80% 60% at 100% 100%,rgba(31,47,107,.06) 0%,transparent 55%),
             radial-gradient(ellipse 60% 80% at 0%   0%,  rgba(31,74,54,.04)  0%,transparent 50%);
}
.secteur-grid .secteur-card:nth-child(3n+3)::before{
  background:radial-gradient(ellipse 80% 60% at 100% 100%,rgba(31,74,54,.06) 0%,transparent 55%),
             radial-gradient(ellipse 60% 80% at 0%   0%,  rgba(31,47,107,.04) 0%,transparent 50%);
}

/* ══ DESIGN SYSTEM v9 — Bordures Dynamiques sit-path + te-card ══════════
   Diagnostic : DS7 & DS8 ciblaient `.sit-card` / `.sit-grid` — inexistants
   dans index.html. La vraie structure HTML est `.sit-paths > .sit-path`.
   Le filet gauche (border-left:2px solid rgba(192,24,42,.18)) et toutes les
   couleurs d'icônes (.sit-path-ic{color:var(--r)}) restaient donc rouge.
   DS9 cible les vraies classes avec spécificité 0-3-0 à 0-5-0.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   1. SIT-PATH — FILET LATÉRAL REPOS (rotation 3 couleurs)
   Spécificité 0-3-0  vs base .sit-path{} → 0-1-0  → WIN
   ══════════════════════════════════════════════════════════════════════════ */
.sit-paths .sit-path:nth-child(3n+1){border-left-color:rgba(184,21,37,.22)}
.sit-paths .sit-path:nth-child(3n+2){border-left-color:rgba(31,47,107,.22)}
.sit-paths .sit-path:nth-child(3n+3){border-left-color:rgba(31,74,54,.20)}

/* ══════════════════════════════════════════════════════════════════════════
   2. SIT-PATH — ICÔNES REPOS (items 1&4 restent rouge Optinove)
   Spécificité 0-4-0  vs base .sit-path-ic{} → 0-1-0  → WIN
   ══════════════════════════════════════════════════════════════════════════ */
.sit-paths .sit-path:nth-child(3n+2) .sit-path-ic{color:var(--navy-hi)}
.sit-paths .sit-path:nth-child(3n+3) .sit-path-ic{color:var(--forest-hi)}

/* ══════════════════════════════════════════════════════════════════════════
   3. SIT-PATH — FLÈCHE ::after CONTEXTUELLE
   Spécificité 0-4-1  vs base .sit-path-t::after{} → 0-1-1  → WIN
   ══════════════════════════════════════════════════════════════════════════ */
.sit-paths .sit-path:nth-child(3n+2) .sit-path-t::after{color:var(--navy-hi)}
.sit-paths .sit-path:nth-child(3n+3) .sit-path-t::after{color:var(--forest-hi)}

/* ══════════════════════════════════════════════════════════════════════════
   4. SIT-PATH — HOVER FILET + FOND SUBTIL
   Spécificité 0-4-0  vs base .sit-path:hover{} → 0-2-0  → WIN
   ══════════════════════════════════════════════════════════════════════════ */
.sit-paths .sit-path:nth-child(3n+1):hover{
  border-left-color:rgba(184,21,37,.65);
  background:rgba(184,21,37,.04);
}
.sit-paths .sit-path:nth-child(3n+2):hover{
  border-left-color:rgba(31,47,107,.65);
  background:rgba(31,47,107,.04);
}
.sit-paths .sit-path:nth-child(3n+3):hover{
  border-left-color:rgba(31,74,54,.60);
  background:rgba(31,74,54,.04);
}

/* ══════════════════════════════════════════════════════════════════════════
   5. SIT-PATH — TITRE HOVER CONTEXTUEL
   Spécificité 0-5-0  vs base .sit-path:hover .sit-path-t{} → 0-3-0  → WIN
   ══════════════════════════════════════════════════════════════════════════ */
.sit-paths .sit-path:nth-child(3n+2):hover .sit-path-t{color:var(--navy-hi)}
.sit-paths .sit-path:nth-child(3n+3):hover .sit-path-t{color:var(--forest-hi)}

/* ══════════════════════════════════════════════════════════════════════════
   6. SIT-PATH — ICÔNE HOVER LUMINEUX
   ══════════════════════════════════════════════════════════════════════════ */
.sit-paths .sit-path:nth-child(3n+1):hover .sit-path-ic{
  color:var(--r);
  text-shadow:0 0 14px rgba(184,21,37,.42);
}
.sit-paths .sit-path:nth-child(3n+2):hover .sit-path-ic{
  color:var(--navy-hi);
  text-shadow:0 0 14px rgba(31,47,107,.40);
}
.sit-paths .sit-path:nth-child(3n+3):hover .sit-path-ic{
  color:var(--forest-hi);
  text-shadow:0 0 14px rgba(31,74,54,.38);
}

/* ══════════════════════════════════════════════════════════════════════════
   7. TE-CARD HOVER — NEUTRALISER LE ROUGE GLOBAL (histoire.html + autres)
   Le base CSS a .te-card-large:hover{border-color:rgba(192,24,42,.25)} etc.
   ══════════════════════════════════════════════════════════════════════════ */
.te-card-large:hover{border-color:rgba(216,203,184,.18)}
.te-col-right .te-card-large:hover{border-color:rgba(31,47,107,.28)}
.te-col-left  .te-card-sm:hover{border-color:rgba(184,21,37,.22)}
.te-col-left  .te-card-sm:last-child:hover{border-color:rgba(31,74,54,.26)}
.te-card-row:hover{border-color:rgba(216,203,184,.16)}

/* ══════════════════════════════════════════════════════════════════════════
   8. TE-CARD PSEUDO-ÉLÉMENTS — NEUTRALISER LE ROUGE
   ══════════════════════════════════════════════════════════════════════════ */
.te-card-large::before{
  background:linear-gradient(135deg,rgba(216,203,184,.04),transparent 55%);
}
.te-col-right .te-card-large::before{
  background:linear-gradient(135deg,rgba(31,47,107,.05),transparent 55%);
}
.te-card-sm::before{
  background:linear-gradient(135deg,rgba(216,203,184,.03),transparent);
}
.te-col-left .te-card-sm:last-child::before{
  background:linear-gradient(135deg,rgba(31,74,54,.04),transparent);
}
.te-card-row::before{
  background:linear-gradient(135deg,rgba(216,203,184,.03),transparent 50%);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — SIT-PATH SIMPLIFIÉ (pas de fond coloré sur petit écran)
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .sit-paths .sit-path:nth-child(3n+1):hover,
  .sit-paths .sit-path:nth-child(3n+2):hover,
  .sit-paths .sit-path:nth-child(3n+3):hover{
    background:transparent !important;
  }
  .sit-paths .sit-path:nth-child(3n+1) .sit-path-ic,
  .sit-paths .sit-path:nth-child(3n+2) .sit-path-ic,
  .sit-paths .sit-path:nth-child(3n+3) .sit-path-ic{
    text-shadow:none !important;
  }
}

/* ══ DESIGN SYSTEM v11 — Services Premium : Verre Fumé & Direction Éditoriale
   Problème : body::before (tartan, position:fixed) traverse les cartes car
   celles-ci ont background:var(--sf) = rgba(255,255,255,.04) — quasi-transparent.
   Résultat : "rectangles gris flottants sur fond tartan fort".

   Solution :
   1. Overlay sombre chaud sur #services  → atténue le tartan sans le supprimer
   2. Fond verre fumé opaque par carte    → masque définitivement le tartan
   3. Tint ambiant contextuel subtil      → identité lumineuse par couleur d'icône
   4. Typographie éditoriale renforcée    → hiérarchie premium
   5. Hover profond + glow fondu          → matière cinéma, pas dashboard

   Spécificités utilisées :
   - #services::before          → 1-0-1  bat section::before → 0-1-1 ✓
   - #services > .w             → 1-1-0  z-index:1 au-dessus de l'overlay ✓
   - #services .svc-grid .svc-card            → 1-2-0  bat #services .svc-card → 1-1-0 ✓
   - #services .svc-grid .svc-card:nth-child  → 1-3-0  contextuel repos ✓
   - #services .svc-grid .svc-card:nth-child:hover → 1-4-0  hover ✓
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   1. SECTION — contexte de stacking + overlay atténuateur de tartan
   ══════════════════════════════════════════════════════════════════════════ */
#services{
  position:relative;
  overflow:hidden;
  /* Supprime le léger gradient rouge DS5 (remplacé par l'overlay ci-dessous) */
  background:none;
}
#services::before{
  content:'';
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* Voile chaud dense : masque 82–88% du tartan body::before */
  background:
    radial-gradient(ellipse 80% 55% at 15% 50%,rgba(184,21,37,.04),transparent 70%),
    linear-gradient(180deg,
      rgba(7,6,5,.90) 0%,
      rgba(7,6,5,.82) 20%,
      rgba(7,6,5,.78) 50%,
      rgba(7,6,5,.82) 80%,
      rgba(7,6,5,.90) 100%);
}
/* Contenu au-dessus du voile */
#services > .w{position:relative;z-index:1}

/* ══════════════════════════════════════════════════════════════════════════
   2. GRILLE — respiration éditoriale
   ══════════════════════════════════════════════════════════════════════════ */
#services .svc-grid{gap:20px;margin-top:60px}

/* ══════════════════════════════════════════════════════════════════════════
   3. BASE CARTE — verre fumé chaud, opaque, premium
   Spécificité 1-2-0 bat #services .svc-card → 1-1-0
   ══════════════════════════════════════════════════════════════════════════ */
#services .svc-grid .svc-card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.042) 0%,rgba(255,255,255,.006) 55%,transparent 100%),
    linear-gradient(to bottom,transparent 58%,rgba(0,0,0,.22) 100%),
    rgba(10,9,8,.76);
  border:1px solid rgba(216,203,184,.08);
  border-radius:18px;
  padding:clamp(22px,2.6vw,30px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 4px 22px rgba(0,0,0,.30);
}

/* ══════════════════════════════════════════════════════════════════════════
   4. IDENTITÉ COLORIMÉTRIQUE AU REPOS — tint ambiant par couleur (1-3-0)
   ══════════════════════════════════════════════════════════════════════════ */
#services .svc-grid .svc-card:nth-child(4n+1){
  border-color:rgba(184,21,37,.16);
  background:
    radial-gradient(ellipse 62% 52% at 6% 10%,rgba(184,21,37,.09),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.040) 0%,rgba(255,255,255,.006) 55%,transparent 100%),
    linear-gradient(to bottom,transparent 58%,rgba(0,0,0,.24) 100%),
    rgba(10,9,8,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 4px 22px rgba(0,0,0,.32),
    0 0 0 1px rgba(184,21,37,.04) inset;
}
#services .svc-grid .svc-card:nth-child(4n+2){
  border-color:rgba(31,47,107,.18);
  background:
    radial-gradient(ellipse 62% 52% at 6% 10%,rgba(31,47,107,.10),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.040) 0%,rgba(255,255,255,.006) 55%,transparent 100%),
    linear-gradient(to bottom,transparent 58%,rgba(0,0,0,.24) 100%),
    rgba(10,9,8,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 4px 22px rgba(0,0,0,.32),
    0 0 0 1px rgba(31,47,107,.05) inset;
}
#services .svc-grid .svc-card:nth-child(4n+3){
  border-color:rgba(31,74,54,.16);
  background:
    radial-gradient(ellipse 62% 52% at 6% 10%,rgba(31,74,54,.10),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.040) 0%,rgba(255,255,255,.006) 55%,transparent 100%),
    linear-gradient(to bottom,transparent 58%,rgba(0,0,0,.24) 100%),
    rgba(10,9,8,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 4px 22px rgba(0,0,0,.32),
    0 0 0 1px rgba(31,74,54,.04) inset;
}
#services .svc-grid .svc-card:nth-child(4n+4){
  border-color:rgba(196,154,36,.14);
  background:
    radial-gradient(ellipse 62% 52% at 6% 10%,rgba(196,154,36,.08),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.040) 0%,rgba(255,255,255,.006) 55%,transparent 100%),
    linear-gradient(to bottom,transparent 58%,rgba(0,0,0,.24) 100%),
    rgba(10,9,8,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 4px 22px rgba(0,0,0,.32),
    0 0 0 1px rgba(196,154,36,.04) inset;
}

/* ══════════════════════════════════════════════════════════════════════════
   5. HOVER — profondeur matérielle + glow contextuel fondu (1-4-0)
   ══════════════════════════════════════════════════════════════════════════ */
#services .svc-grid .svc-card:nth-child(4n+1):hover{
  border-color:rgba(184,21,37,.40);
  background:
    radial-gradient(ellipse 70% 58% at 6% 10%,rgba(184,21,37,.16),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.052) 0%,rgba(255,255,255,.008) 55%,transparent 100%),
    linear-gradient(to bottom,transparent 58%,rgba(0,0,0,.28) 100%),
    rgba(10,9,8,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 24px 64px rgba(0,0,0,.44),
    0 0 40px rgba(184,21,37,.14),
    0 0 0 1px rgba(184,21,37,.08) inset;
}
#services .svc-grid .svc-card:nth-child(4n+2):hover{
  border-color:rgba(31,47,107,.44);
  background:
    radial-gradient(ellipse 70% 58% at 6% 10%,rgba(31,47,107,.18),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.052) 0%,rgba(255,255,255,.008) 55%,transparent 100%),
    linear-gradient(to bottom,transparent 58%,rgba(0,0,0,.28) 100%),
    rgba(10,9,8,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 24px 64px rgba(0,0,0,.44),
    0 0 40px rgba(31,47,107,.16),
    0 0 0 1px rgba(31,47,107,.08) inset;
}
#services .svc-grid .svc-card:nth-child(4n+3):hover{
  border-color:rgba(31,74,54,.40);
  background:
    radial-gradient(ellipse 70% 58% at 6% 10%,rgba(31,74,54,.18),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.052) 0%,rgba(255,255,255,.008) 55%,transparent 100%),
    linear-gradient(to bottom,transparent 58%,rgba(0,0,0,.28) 100%),
    rgba(10,9,8,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 24px 64px rgba(0,0,0,.44),
    0 0 40px rgba(31,74,54,.14),
    0 0 0 1px rgba(31,74,54,.06) inset;
}
#services .svc-grid .svc-card:nth-child(4n+4):hover{
  border-color:rgba(196,154,36,.34);
  background:
    radial-gradient(ellipse 70% 58% at 6% 10%,rgba(196,154,36,.14),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.052) 0%,rgba(255,255,255,.008) 55%,transparent 100%),
    linear-gradient(to bottom,transparent 58%,rgba(0,0,0,.28) 100%),
    rgba(10,9,8,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 24px 64px rgba(0,0,0,.44),
    0 0 32px rgba(196,154,36,.12),
    0 0 0 1px rgba(196,154,36,.06) inset;
}

/* ══════════════════════════════════════════════════════════════════════════
   6. ICÔNES — raffinées, identité stricte par position
   Spécificité : repos 1-3-0 · hover 1-4-0+
   ══════════════════════════════════════════════════════════════════════════ */
#services .svc-ic{
  width:48px;height:48px;border-radius:14px;
  background:rgba(8,7,6,.90);
  border:1px solid rgba(216,203,184,.10);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;flex-shrink:0;
  position:relative;z-index:1;
}
#services .svc-grid .svc-card:nth-child(4n+1) .svc-ic{
  color:var(--r);border-color:rgba(184,21,37,.24);
  box-shadow:0 0 0 1px rgba(184,21,37,.14),0 0 18px rgba(184,21,37,.12),0 0 36px rgba(184,21,37,.05);
}
#services .svc-grid .svc-card:nth-child(4n+2) .svc-ic{
  color:var(--navy-hi);border-color:var(--navy-bd);
  box-shadow:0 0 0 1px rgba(31,47,107,.18),0 0 18px rgba(31,47,107,.13),0 0 36px rgba(31,47,107,.05);
}
#services .svc-grid .svc-card:nth-child(4n+3) .svc-ic{
  color:var(--forest-hi);border-color:var(--forest-bd);
  box-shadow:0 0 0 1px rgba(31,74,54,.18),0 0 18px rgba(31,74,54,.13),0 0 36px rgba(31,74,54,.05);
}
#services .svc-grid .svc-card:nth-child(4n+4) .svc-ic{
  color:var(--gold-hi);border-color:rgba(196,154,36,.26);
  box-shadow:0 0 0 1px rgba(196,154,36,.16),0 0 16px rgba(196,154,36,.11),0 0 30px rgba(196,154,36,.04);
}
/* Hover fill icône */
#services .svc-grid .svc-card:nth-child(4n+1):hover .svc-ic{
  background:var(--r);color:#fff;border-color:rgba(184,21,37,.62);
  box-shadow:0 0 0 1px rgba(184,21,37,.28),0 0 24px rgba(184,21,37,.32);
}
#services .svc-grid .svc-card:nth-child(4n+2):hover .svc-ic{
  background:var(--navy);color:#fff;border-color:rgba(31,47,107,.62);
  box-shadow:0 0 0 1px rgba(31,47,107,.28),0 0 24px rgba(31,47,107,.30);
}
#services .svc-grid .svc-card:nth-child(4n+3):hover .svc-ic{
  background:var(--forest);color:#fff;border-color:rgba(31,74,54,.62);
  box-shadow:0 0 0 1px rgba(31,74,54,.26),0 0 24px rgba(31,74,54,.28);
}
#services .svc-grid .svc-card:nth-child(4n+4):hover .svc-ic{
  background:rgba(196,154,36,.90);color:rgba(5,4,3,.96);border-color:rgba(196,154,36,.62);
  box-shadow:0 0 0 1px rgba(196,154,36,.24),0 0 22px rgba(196,154,36,.24);
}

/* ══════════════════════════════════════════════════════════════════════════
   7. TYPOGRAPHIE — hiérarchie éditoriale premium
   ══════════════════════════════════════════════════════════════════════════ */
#services .svc-t{
  font-family:var(--f-d);font-size:1.14rem;font-weight:500;
  color:rgba(238,228,216,.96);letter-spacing:.012em;
  margin-bottom:10px;position:relative;z-index:1;
}
#services .svc-d{
  font-size:.80rem;color:rgba(180,172,162,.70);line-height:1.70;
  position:relative;z-index:1;
}
#services .svc-tag{
  display:inline-flex;align-items:center;
  margin-top:18px;padding:3px 12px;border-radius:var(--rp);
  font-size:.65rem;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  background:rgba(255,255,255,.036);
  border:1px solid rgba(216,203,184,.09);
  color:rgba(180,172,162,.55);
  position:relative;z-index:1;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. MOBILE — glow allégé sur petit écran
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  #services::before{
    background:linear-gradient(180deg,rgba(7,6,5,.88) 0%,rgba(7,6,5,.80) 50%,rgba(7,6,5,.88) 100%);
  }
  #services .svc-grid{gap:14px;margin-top:40px}
  #services .svc-grid .svc-card:nth-child(4n+1),
  #services .svc-grid .svc-card:nth-child(4n+2),
  #services .svc-grid .svc-card:nth-child(4n+3),
  #services .svc-grid .svc-card:nth-child(4n+4){
    box-shadow:0 3px 14px rgba(0,0,0,.28) !important;
    border-radius:14px;
  }
  #services .svc-grid .svc-card:nth-child(4n+1) .svc-ic,
  #services .svc-grid .svc-card:nth-child(4n+2) .svc-ic,
  #services .svc-grid .svc-card:nth-child(4n+3) .svc-ic,
  #services .svc-grid .svc-card:nth-child(4n+4) .svc-ic{
    box-shadow:none !important;
  }
}

/* ══ TICKER — Rééquilibrage Royal Stewart 4 couleurs ════════════════════════
   CAUSE RACINE :
   ┌──────────────────────────────────────────────────────────────────────────┐
   │ .ticker-wrap::before (l.2868) : grille avec rouge seul + mince filet or │
   │ .ti::before (l.463) : tous les bullets = var(--r) = rouge               │
   │ Résultat : bandeau visuellement monochrome rouge.                        │
   └──────────────────────────────────────────────────────────────────────────┘
   Ce bloc est le dernier → cascade maximale → override garanti.
   Objectif : grille tissu tartan 4 couleurs + bullets en rotation
   chromatique (rouge · navy · forest · or).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Fond du bandeau — voile sombre + halos colorés discrets ─────────── */
.ticker-wrap{
  background:
    /* Navy — halo gauche discret */
    radial-gradient(ellipse 32% 100% at 16% 50%, rgba(31,47,107,.06),  transparent 72%),
    /* Forest — halo droit discret */
    radial-gradient(ellipse 26% 100% at 82% 50%, rgba(31,74,54,.05),   transparent 70%),
    /* Or — halo centre très fin */
    radial-gradient(ellipse 20% 100% at 50% 50%, rgba(196,154,36,.04), transparent 65%),
    /* Base sombre */
    rgba(5,5,6,.62);
  border-color:rgba(216,203,184,.10);
}

/* ── 2. Grille tartan — 4 couleurs Royal Stewart tissées ────────────────── */
/* Remplace l.2868 (rouge + or uniquement).
   Tuile 180×180px — proportions du vrai Royal Stewart :
   rouge dominant > navy = forest > or (filet fin). */
.ticker-wrap::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    /* Chaîne (warp) — stries verticales */
    linear-gradient(90deg,
      transparent             0     28px,
      rgba(163,21,33,.13)    28px   30px,   /* rouge — dominant */
      transparent            30px   56px,
      rgba(31,47,107,.10)    56px   58px,   /* navy */
      transparent            58px   84px,
      rgba(31,74,54,.09)     84px   86px,   /* forest */
      transparent            86px  120px,
      rgba(163,21,33,.10)   120px  122px,   /* rouge — 2e bande */
      transparent           122px  148px,
      rgba(196,154,36,.08)  148px  150px,   /* or — filet fin */
      transparent           150px  180px),
    /* Trame (weft) — stries horizontales */
    linear-gradient(0deg,
      transparent             0     28px,
      rgba(163,21,33,.09)    28px   30px,
      transparent            30px   56px,
      rgba(31,47,107,.07)    56px   58px,
      transparent            58px   84px,
      rgba(31,74,54,.06)     84px   86px,
      transparent            86px  120px,
      rgba(163,21,33,.07)   120px  122px,
      transparent           122px  148px,
      rgba(196,154,36,.06)  148px  150px,
      transparent           150px  180px);
  background-size:180px 180px;
  background-repeat:repeat;
  opacity:.62;
}

/* ── 3. Bullets séparateurs — rotation 4 couleurs tartan ───────────────── */
/* Remplace .ti::before (l.463) tous rouges.
   Spécificité 0-3-1 > base 0-1-1 → override garanti. */
.ticker-track .ti:nth-child(4n+1)::before{ background:rgba(163,21,33,.72) }
.ticker-track .ti:nth-child(4n+2)::before{ background:rgba(31,47,107,.68) }
.ticker-track .ti:nth-child(4n+3)::before{ background:rgba(31,74,54,.64)  }
.ticker-track .ti:nth-child(4n+4)::before{ background:rgba(196,154,36,.58)}

/* ── 4. Texte — ivoire chaud, hover neutre élégant ─────────────────────── */
/* Remplace le hover rouge générique (l.462). */
.ti{ color:rgba(200,190,178,.52) }
.ti:hover{ color:rgba(230,220,206,.88) }

/* ── 5. Light theme ─────────────────────────────────────────────────────── */
[data-theme="light"] .ticker-wrap{
  background:rgba(246,242,234,.82);
  border-color:rgba(163,21,33,.10);
}
[data-theme="light"] .ticker-wrap::before{ opacity:.20 }
[data-theme="light"] .ti{ color:rgba(60,44,28,.52) }
[data-theme="light"] .ti:hover{ color:rgba(60,44,28,.82) }
[data-theme="light"] .ticker-track .ti:nth-child(4n+1)::before{ background:rgba(163,21,33,.55) }
[data-theme="light"] .ticker-track .ti:nth-child(4n+2)::before{ background:rgba(31,47,107,.50)  }
[data-theme="light"] .ticker-track .ti:nth-child(4n+3)::before{ background:rgba(31,74,54,.46)   }
[data-theme="light"] .ticker-track .ti:nth-child(4n+4)::before{ background:rgba(196,154,36,.44) }

/* ══ PILL "Les OptiBoys disponibles" — Tailoring tartan premium v2 ══════════
   ÉQUILIBRE :
   ┌──────────────────────────────────────────────────────────────────────────┐
   │ v1 (opacity:.7) → tartan trop dominant, effet wallpaper                  │
   │ v1b (opacity:.13 + overlay .72) → trop sobre, identité perdue           │
   │                                                                           │
   │ v2 : accents LOCALISÉS — selvedge gauche, stripe multicolore,            │
   │      halo directionnel, tartan comme texture de fond à .26               │
   │      Le regard : 1. bouton rouge  2. texte  3. tissu découvert           │
   └──────────────────────────────────────────────────────────────────────────┘
   Hiérarchie z-index au sein de #pill (backdrop-filter = stacking context) :
   .pill-tartan(0) < .pill-stripe(1) < .pill-txt,.pill-dl,.pill-chat(2)
   .pill-tartan::after(z:1) reste dans le contexte de .pill-tartan(0) ✓
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Fond pill — verre sombre + halo rouge directionnel gauche ────────── */
/* Halo rouge côté gauche : suggère le tissu sans l'afficher.
   Sheen diagonal préserve l'effet premium.
   inset box-shadow or sur le bord gauche = selvedge lumineuse. */
#pill{
  background:
    radial-gradient(ellipse 44% 88% at -2% 50%, rgba(100,10,18,.24), transparent 72%),
    linear-gradient(145deg,rgba(255,255,255,.050) 0%,rgba(255,255,255,.010) 52%,transparent 100%),
    rgba(5,4,9,.88);
  border-color:rgba(163,21,33,.26);
  box-shadow:
    inset  0  1px 0 rgba(255,255,255,.065),
    inset  0 -1px 0 rgba(0,0,0,.22),
    /* Selvedge or — filet lumineux sur le bord gauche */
    inset  1px 0  0 rgba(196,154,36,.18),
    0  8px 32px rgba(0,0,0,.50),
    0  2px  8px rgba(0,0,0,.28),
    0  0   42px rgba(163,21,33,.13);
  padding:11px 12px 11px 20px;
  backdrop-filter:blur(28px) saturate(1.4);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
}

/* ── 2. Tartan — remonté à .26, filter textile "ombre de tissu" ──────────── */
/* opacity(.26) × brightness(.38) ≈ 10% visible effectif.
   Contraste légèrement affaissé → stries fondues, pas coupantes. */
.pill-tartan .tartan-light{
  opacity:.26;
  filter:saturate(.14) brightness(.38) contrast(.78);
}

/* Overlay directionnel — laisse respirer le tissu en bas-gauche,
   protège la lisibilité au centre/droite.
   5px "selvedge" colorée sur le bord gauche : rouge → or → navy → vert.
   Coin bas-gauche : chaleur bordeaux profond. */
.pill-tartan::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    /* Bande textile gauche — selvedge 5px, 4 couleurs Royal Stewart */
    linear-gradient(90deg,
      rgba(163,21,33,.22)  0    1.5px,
      rgba(196,154,36,.14) 1.5px 2.5px,
      rgba(31,47,107,.16)  2.5px 4px,
      rgba(31,74,54,.10)   4px   5px,
      transparent          5px  100%),
    /* Halo bas-gauche — bordeaux profond, ancrage du tissu */
    radial-gradient(ellipse 62% 72% at -8% 110%, rgba(70,5,10,.32), transparent 62%),
    /* Voile central directionnel — clair à gauche (tissu visible),
       plus sombre à droite (lisibilité texte/bouton) */
    linear-gradient(100deg,
      rgba(4,4,8,.42) 0%,
      rgba(4,4,8,.52) 45%,
      rgba(4,4,8,.62) 100%);
}

/* ── 3. Stripe haut — multicolore Royal Stewart au lieu du rouge uniforme ── */
/* 1.5px → finesse tailoring. Rouge dominant + or + navy + forest. */
.pill-stripe{
  height:1.5px;
  background:linear-gradient(90deg,
    transparent              0%,
    rgba(163,21,33,.60)     12%,
    rgba(196,154,36,.38)    30%,
    rgba(163,21,33,.55)     50%,
    rgba(31,47,107,.30)     68%,
    rgba(31,74,54,.22)      82%,
    transparent             100%);
}

/* ── 4. Texte — blanc priorité, hiérarchie claire ──────────────────────── */
.pill-txt strong{
  color:#fff;
  font-size:.84rem;
  font-weight:700;
  letter-spacing:-.012em;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.pill-txt span{
  font-size:.68rem;
  color:rgba(190,178,165,.50);
  font-weight:400;
  letter-spacing:.01em;
}

/* ── 5. Bouton Connect'Inove — pop rouge, 3 couches de relief ───────────── */
.pill-dl{
  box-shadow:
    0 2px 14px rgba(163,21,33,.44),
    0 1px  0 rgba(255,255,255,.09) inset,
    0 -1px 0 rgba(0,0,0,.18) inset;
  font-size:.82rem;
  font-weight:700;
  padding:9px 18px;
  letter-spacing:-.01em;
}

/* ── 6. Bouton chat — discret, hover accessible ─────────────────────────── */
.pill-chat{
  background:rgba(255,255,255,.052);
  border-color:rgba(255,255,255,.082);
  color:rgba(190,178,165,.48);
}
.pill-chat:hover{
  border-color:rgba(163,21,33,.36);
  color:rgba(255,255,255,.76);
  background:rgba(163,21,33,.11);
}

/* ── 7. Light theme ──────────────────────────────────────────────────────── */
[data-theme="light"] #pill{
  background:
    linear-gradient(145deg,rgba(255,255,255,.94) 0%,rgba(246,242,238,.90) 100%);
  border-color:rgba(163,21,33,.14);
  box-shadow:0 8px 32px rgba(0,0,0,.10),0 0 28px rgba(163,21,33,.06),inset 1px 0 0 rgba(163,21,33,.12);
}
[data-theme="light"] .pill-tartan .tartan-light{opacity:.08;filter:saturate(.18) brightness(.60)}
[data-theme="light"] .pill-tartan::after{
  background:
    linear-gradient(90deg,rgba(163,21,33,.08) 0 2px,transparent 2px 100%),
    rgba(246,242,238,.84);
}
[data-theme="light"] .pill-stripe{background:linear-gradient(90deg,transparent 0%,rgba(163,21,33,.40) 30%,rgba(163,21,33,.35) 50%,rgba(31,47,107,.18) 70%,transparent 100%)}
[data-theme="light"] .pill-txt strong{color:rgba(18,8,8,.92);text-shadow:none}
[data-theme="light"] .pill-txt span{color:rgba(72,52,52,.46)}
[data-theme="light"] .pill-chat{background:rgba(0,0,0,.042);border-color:rgba(0,0,0,.076);color:rgba(60,44,44,.40)}

/* ══ CHATBOT — Royal Stewart glassmorphism premium ══════════════════════════
   CAUSE RACINE :
   ┌──────────────────────────────────────────────────────────────────────────┐
   │ .cb-head-overlay (l.4293) : rgba(4,4,5,.97) → 97% opaque               │
   │ → tartan{opacity:.8} entièrement caché, header = bloc noir mort          │
   │ #cb-win : var(--bg2) plat, aucune matière, aucune profondeur            │
   │ Tous les accents = rouge uniforme (hover, focus, bulles)                 │
   └──────────────────────────────────────────────────────────────────────────┘
   Stratégie : même philosophie que le pill v2 — accents LOCALISÉS.
   Pas de wallpaper. Selvedge gauche, séparateurs veines tartan, halos
   directionnels, overlay à 80% (respire le tartan) au lieu de 97%.
   Hiérarchie visuelle : avatar+titre → message → tissue → fond.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Fenêtre principale — verre sombre avec halos Royal Stewart ──────── */
/* Halo rouge bas-gauche + navy haut-droit : profondeur directionnelle.
   Selvedge or sur le bord gauche via inset box-shadow. */
#cb-win{
  background:
    radial-gradient(ellipse 55% 28% at  0% 100%, rgba(70,6,12,.16),   transparent 66%),
    radial-gradient(ellipse 42% 24% at 100%   0%, rgba(31,47,107,.09), transparent 58%),
    var(--bg2);
  border-color:rgba(163,21,33,.24);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.055),
    inset 1px 0  0 rgba(196,154,36,.10),
    0 20px 60px rgba(0,0,0,.55),
    0  4px 16px rgba(0,0,0,.35),
    0  0   48px rgba(163,21,33,.13);
}

/* ── 2. Header — tartan feutré + overlay riche (pas opaque mort) ──────────── */
/* Le tartan{opacity:.8} reste en base CSS. On filtre ici.
   Désaturation forte + noircissement → tissu dans l'ombre. */
.cb-head-tartan .tartan{
  filter:saturate(.22) brightness(.40) contrast(.80);
}
/* Overlay : 80% au lieu de 97% → tartan respire.
   Selvedge gauche 5px + coins de couleur + voile directionnel. */
.cb-head-overlay{
  background:
    /* Selvedge gauche — bande tissée 5px Royal Stewart */
    linear-gradient(90deg,
      rgba(163,21,33,.24) 0    2px,
      rgba(196,154,36,.15) 2px  3.5px,
      rgba(31,47,107,.17)  3.5px 5px,
      transparent          5px 100%),
    /* Coin haut-droit — lueur navy */
    radial-gradient(ellipse 45% 60% at 100% 0%, rgba(31,47,107,.14), transparent 68%),
    /* Coin bas-gauche — chaleur bordeaux profond */
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(80,6,12,.20), transparent 65%),
    /* Voile principal — sombre mais pas noir mort */
    linear-gradient(135deg,
      rgba(6,5,10,.80) 0%,
      rgba(9,7,16,.74) 50%,
      rgba(7,6,12,.78) 100%);
}

/* ── 3. Séparateur header → messages — veine tartan 4 couleurs ───────────── */
/* ::after sur .cb-head (overflow:hidden → at bottom:0, 1px, reste dans bounds) */
.cb-head::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(163,21,33,.30) 0%,
    rgba(196,154,36,.20) 22%,
    rgba(163,21,33,.24) 50%,
    rgba(31,47,107,.16) 78%,
    rgba(31,74,54,.12) 100%);
}

/* ── 4. Avatar — navy premium, dot vert Stewart avec bordure or ───────────── */
.cb-av{
  background:rgba(31,47,107,.26);
  border-color:rgba(255,255,255,.22);
  box-shadow:
    0 0 0 1px rgba(196,154,36,.20),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 16px rgba(31,47,107,.22);
}
/* Online dot — vert profond Royal Stewart + bord or */
.cb-online-dot{
  background:#1a7a52;
  border-color:rgba(196,154,36,.55);
  box-shadow:0 0 6px rgba(26,122,82,.45);
}

/* ── 5. Zone messages — fond warm très subtil ────────────────────────────── */
.cb-msgs{
  background:
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(70,6,12,.05), transparent 68%),
    transparent;
}
/* Bulles bot — glass warm */
.cb-m.bot .cb-bub{
  background:rgba(255,255,255,.044);
  border-color:rgba(216,203,184,.07);
}
/* Scrollbar — filet or discret */
.cb-msgs::-webkit-scrollbar-thumb{
  background:rgba(196,154,36,.18);
}

/* ── 6. Quick buttons — séparateur veine + hover navy ───────────────────── */
.cb-quick{
  border-top-color:rgba(216,203,184,.06);
  background:
    linear-gradient(90deg,
      rgba(163,21,33,.022) 0%,
      rgba(31,47,107,.018) 50%,
      transparent 100%),
    transparent;
}
.cb-qb{
  border-color:rgba(216,203,184,.07);
  color:rgba(190,178,165,.54);
}
/* Hover navy Royal Stewart au lieu du rouge uniforme */
.cb-qb:hover{
  border-color:rgba(31,47,107,.32);
  color:rgba(160,175,220,.88);
  background:rgba(31,47,107,.10);
}

/* ── 7. Footer — séparateur veine + focus or + send premium ─────────────── */
.cb-foot{
  border-top:none;
  /* Veine tartan 1px en bord haut + fond légèrement assombri */
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(163,21,33,.10) 20%,
      rgba(196,154,36,.08) 50%,
      rgba(31,47,107,.07) 78%,
      transparent 100%) top / 100% 1px no-repeat,
    rgba(3,3,7,.20);
}
/* Focus input — or au lieu de rouge */
#cbInp:focus{
  outline:none;
  border-color:rgba(196,154,36,.32);
  box-shadow:0 0 0 2px rgba(196,154,36,.05),inset 0 1px 0 rgba(255,255,255,.02);
}
/* Send button — rouge premium avec relief */
#cbSnd{
  box-shadow:
    0 2px 10px rgba(163,21,33,.38),
    0 1px  0 rgba(255,255,255,.08) inset;
}

/* ── 8. Light theme ──────────────────────────────────────────────────────── */
[data-theme="light"] #cb-win{
  background:rgba(250,248,244,.95);
  border-color:rgba(163,21,33,.14);
  box-shadow:0 20px 60px rgba(0,0,0,.12),inset 1px 0 0 rgba(163,21,33,.08);
}
[data-theme="light"] .cb-head-tartan .tartan{
  opacity:.55;
  filter:saturate(.28) brightness(.60) contrast(.80);
}
[data-theme="light"] .cb-head-overlay{
  background:
    linear-gradient(90deg,rgba(163,21,33,.14) 0 2px,rgba(196,154,36,.08) 2px 3.5px,transparent 3.5px 100%),
    linear-gradient(135deg,rgba(175,18,34,.84),rgba(138,14,26,.78));
}
[data-theme="light"] .cb-head::after{background:linear-gradient(90deg,rgba(163,21,33,.22) 0%,rgba(196,154,36,.16) 50%,transparent 100%)}
[data-theme="light"] .cb-av{background:rgba(192,24,42,.18);box-shadow:0 0 0 1px rgba(192,24,42,.28),inset 0 1px 0 rgba(255,255,255,.28)}
[data-theme="light"] .cb-online-dot{background:#178c4e;border-color:rgba(196,154,36,.45)}
[data-theme="light"] .cb-msgs{background:transparent}
[data-theme="light"] .cb-m.bot .cb-bub{background:rgba(0,0,0,.038);border-color:rgba(0,0,0,.06)}
[data-theme="light"] .cb-quick{background:transparent;border-top-color:rgba(0,0,0,.06)}
[data-theme="light"] .cb-qb{color:rgba(60,52,48,.56);border-color:rgba(60,44,28,.08)}
[data-theme="light"] .cb-qb:hover{border-color:rgba(31,47,107,.22);color:rgba(31,47,107,.82);background:rgba(31,47,107,.06)}
[data-theme="light"] .cb-foot{background:rgba(0,0,0,.024) top / 100% 1px no-repeat}
[data-theme="light"] #cbInp:focus{border-color:rgba(163,21,33,.28);box-shadow:0 0 0 2px rgba(163,21,33,.05)}

/* ══ FAQ — Cartes glassmorphism Royal Stewart premium ═══════════════════════
   CAUSE RACINE :
   ┌──────────────────────────────────────────────────────────────────────────┐
   │ .faq-item : border-bottom seul → lignes plates, pas de cartes           │
   │ Pas de position:relative → aucun accent absolu possible                 │
   │ .faq-icon : fade neutre, actif rouge uni seul                           │
   │ Hover quasi-invisible rgba(.04) → aucun feedback premium                │
   └──────────────────────────────────────────────────────────────────────────┘
   Stratégie : chaque .faq-item → vraie carte glassmorphism.
   Tartan : selvedge gauche 3px avec 4 couleurs Royal Stewart + nth-child
   cycling (rouge/navy/forest/or) → chaque carte sa propre identité textile.
   Icône : navy au repos, rouge bordeaux+or actif.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Conteneur — gap entre cartes (remplace border-bottom) ────────────── */
.faq-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:48px;
}

/* ── 2. Carte FAQ — glassmorphism premium full-border ────────────────────── */
.faq-item{
  border-bottom:none;
  border:1px solid rgba(163,21,33,.14);
  border-radius:14px;
  background:
    radial-gradient(ellipse 48% 72% at 0% 50%, rgba(80,6,12,.08), transparent 66%),
    linear-gradient(145deg,rgba(255,255,255,.048) 0%,rgba(255,255,255,.010) 55%,transparent 100%),
    rgba(6,5,9,.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.048),
    0 4px 16px rgba(0,0,0,.28),
    0 1px  4px rgba(0,0,0,.16);
  overflow:hidden;
  position:relative;
  transition:border-color .28s,box-shadow .28s,background .28s,transform .22s;
}

/* Selvedge gauche — bande tissée 3px Royal Stewart (rouge dominant base) */
.faq-item::before{
  content:'';
  position:absolute;top:0;left:0;bottom:0;width:3px;
  background:linear-gradient(180deg,
    rgba(163,21,33,.30),
    rgba(196,154,36,.16) 30%,
    rgba(31,47,107,.20)  60%,
    rgba(31,74,54,.14));
  pointer-events:none;
}

/* ── 3. Cycling nth-child — chaque carte sa couleur tartan dominante ──────── */
/* Navy */
.faq-item:nth-child(4n+2){border-color:rgba(31,47,107,.14)}
.faq-item:nth-child(4n+2)::before{
  background:linear-gradient(180deg,
    rgba(31,47,107,.30),
    rgba(31,47,107,.18) 30%,
    rgba(163,21,33,.18) 60%,
    rgba(31,74,54,.14));
}
/* Forest */
.faq-item:nth-child(4n+3){border-color:rgba(31,74,54,.14)}
.faq-item:nth-child(4n+3)::before{
  background:linear-gradient(180deg,
    rgba(31,74,54,.28),
    rgba(31,74,54,.16) 30%,
    rgba(163,21,33,.18) 60%,
    rgba(31,47,107,.14));
}
/* Or */
.faq-item:nth-child(4n+4){border-color:rgba(196,154,36,.14)}
.faq-item:nth-child(4n+4)::before{
  background:linear-gradient(180deg,
    rgba(196,154,36,.26),
    rgba(196,154,36,.14) 30%,
    rgba(163,21,33,.18) 60%,
    rgba(31,47,107,.14));
}

/* ── 4. Hover carte — montée lumineuse, pas de glow gaming ──────────────── */
.faq-item:hover{
  border-color:rgba(163,21,33,.26);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.060),
    0 8px 28px rgba(0,0,0,.36),
    0 0   22px rgba(163,21,33,.09);
  background:
    radial-gradient(ellipse 52% 72% at 0% 50%, rgba(80,6,12,.12), transparent 66%),
    linear-gradient(145deg,rgba(255,255,255,.058) 0%,rgba(255,255,255,.012) 55%,transparent 100%),
    rgba(7,5,10,.76);
}
.faq-item:nth-child(4n+2):hover{border-color:rgba(31,47,107,.26)}
.faq-item:nth-child(4n+3):hover{border-color:rgba(31,74,54,.26)}
.faq-item:nth-child(4n+4):hover{border-color:rgba(196,154,36,.26)}

/* ── 5. État ouvert — carte active, glow de confirmation ───────────────── */
.faq-item.open{
  border-color:rgba(163,21,33,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.068),
    0 8px 32px rgba(0,0,0,.40),
    0 0   28px rgba(163,21,33,.11);
  background:
    radial-gradient(ellipse 55% 72% at 0% 50%, rgba(80,6,12,.14), transparent 66%),
    linear-gradient(145deg,rgba(255,255,255,.060) 0%,rgba(255,255,255,.012) 55%,transparent 100%),
    rgba(7,5,10,.80);
}
.faq-item.open:nth-child(4n+2){border-color:rgba(31,47,107,.28)}
.faq-item.open:nth-child(4n+3){border-color:rgba(31,74,54,.28)}
.faq-item.open:nth-child(4n+4){border-color:rgba(196,154,36,.28)}

/* ── 6. Bouton question — padding ajusté pour selvedge + aération ────────── */
.faq-q{
  padding:20px 18px 20px 22px;
  border-radius:0;
}
.faq-q:hover{
  background:rgba(255,255,255,.018);
  border-radius:0;
}
.faq-q:hover .faq-icon{
  background:rgba(31,47,107,.24);
  border-color:rgba(31,47,107,.40);
  color:rgba(160,175,220,.92);
  box-shadow:0 0 10px rgba(31,47,107,.20);
}

/* ── 7. Texte question — ivoire chaud priorité ──────────────────────────── */
.faq-qt{
  color:rgba(235,225,212,.88);
  font-weight:600;
}
.faq-q[aria-expanded="true"] .faq-qt,
.faq-item.open .faq-qt{color:#fff}

/* ── 8. Icône + — navy au repos, rouge bordeaux+or actif ────────────────── */
.faq-icon{
  width:28px;height:28px;
  background:rgba(31,47,107,.14);
  border-color:rgba(31,47,107,.26);
  color:rgba(160,175,220,.62);
  box-shadow:0 0 0 1px rgba(31,47,107,.07);
  transition:background .25s,border-color .25s,color .25s,box-shadow .25s,transform .35s;
}
.faq-q[aria-expanded="true"] .faq-icon,
.faq-item.open .faq-icon{
  background:linear-gradient(135deg,rgba(163,21,33,.92),rgba(90,6,14,.88));
  border-color:rgba(196,154,36,.28);
  color:#fff;
  box-shadow:
    0 0 16px rgba(163,21,33,.28),
    0 0  0 1px rgba(196,154,36,.14);
}

/* ── 9. Zone réponse — séparateur veine + fond warm ─────────────────────── */
.faq-a-inner{
  padding:16px 22px 22px 22px;
  color:rgba(188,176,162,.65);
  font-size:.86rem;
  line-height:1.78;
  border-top:1px solid rgba(216,203,184,.048);
  background:rgba(255,255,255,.012);
}

/* ── 10. Light theme ─────────────────────────────────────────────────────── */
[data-theme="light"] .faq-item{
  background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(246,240,234,.74));
  border-color:rgba(163,21,33,.10);
  box-shadow:0 4px 16px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);
}
[data-theme="light"] .faq-item::before{
  background:linear-gradient(180deg,rgba(163,21,33,.18),rgba(196,154,36,.10) 30%,rgba(31,47,107,.12) 60%,rgba(31,74,54,.08));
}
[data-theme="light"] .faq-item:nth-child(4n+2){border-color:rgba(31,47,107,.10)}
[data-theme="light"] .faq-item:nth-child(4n+3){border-color:rgba(31,74,54,.10)}
[data-theme="light"] .faq-item:nth-child(4n+4){border-color:rgba(196,154,36,.10)}
[data-theme="light"] .faq-item:hover{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(250,244,238,.82));
  border-color:rgba(163,21,33,.18);
  box-shadow:0 8px 24px rgba(0,0,0,.09),0 0 14px rgba(163,21,33,.04);
}
[data-theme="light"] .faq-item.open{border-color:rgba(163,21,33,.22)}
[data-theme="light"] .faq-q:hover{background:rgba(0,0,0,.018)}
[data-theme="light"] .faq-qt{color:rgba(22,12,12,.82)}
[data-theme="light"] .faq-q[aria-expanded="true"] .faq-qt,
[data-theme="light"] .faq-item.open .faq-qt{color:rgba(10,4,4,.92)}
[data-theme="light"] .faq-icon{background:rgba(31,47,107,.09);border-color:rgba(31,47,107,.18);color:rgba(31,47,107,.52)}
[data-theme="light"] .faq-q:hover .faq-icon{background:rgba(31,47,107,.14);border-color:rgba(31,47,107,.28);color:rgba(31,47,107,.76)}
[data-theme="light"] .faq-a-inner{color:rgba(58,48,44,.66);border-top-color:rgba(0,0,0,.048);background:rgba(0,0,0,.018)}

/* ══════════════════════════════════════════════════════════════════════════════
   SITUATIONS — Cartes premium Royal Stewart
   Diagnostic : tartan .42 opacity sur fond transparent = papier peint illisible
   Fix : calmer le tartan, transformer .sit-path en cartes glassmorphism opaques,
         selvedge 3px, nth-child 3-couleurs (rouge / navy / forest), hover lift
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tartan de fond — calmer à "ressenti, pas vu" ────────────────────── */
.sit-bg .tartan-light{
  opacity:.10;
  filter:saturate(.20) brightness(.30) contrast(.75);
}

/* Fondu plus opaque — le centre ne laisse plus passer le tartan brut */
.sit-bg-fade{
  background:
    radial-gradient(ellipse 100% 60% at 50% 50%, rgba(4,3,8,.72) 0%, rgba(4,3,8,.42) 38%, transparent 68%),
    linear-gradient(180deg, var(--bg) 0%, rgba(4,3,8,.55) 22%, rgba(4,3,8,.55) 78%, var(--bg) 100%);
}

/* ── 2. Grille — resserrée pour cartes côte à côte ──────────────────────── */
.sit-paths{
  row-gap:clamp(10px,1.8vw,16px);
  column-gap:clamp(14px,2.4vw,24px);
  margin-top:clamp(32px,4vw,48px);
}

/* ── 3. Carte de base — opaque, matérielle, avec profondeur ─────────────── */
.sit-path{
  padding:22px 20px 22px 24px;
  border-left:none;
  border:1px solid rgba(163,21,33,.14);
  border-radius:14px;
  background:
    radial-gradient(ellipse 52% 70% at 0% 50%, rgba(80,6,12,.08), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.046) 0%, rgba(255,255,255,.010) 52%, transparent 100%),
    rgba(6,5,9,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.046),
    0 4px 16px rgba(0,0,0,.30),
    0 1px 4px rgba(0,0,0,.18);
  overflow:hidden;
  position:relative;
  transition:border-color .28s, box-shadow .28s, background .28s, transform .22s;
}

/* ── 4. Selvedge 3px — bord textile tartan à gauche ─────────────────────── */
.sit-path::before{
  content:'';
  position:absolute; top:0; left:0; bottom:0; width:3px;
  background:linear-gradient(180deg,
    rgba(163,21,33,.32),
    rgba(196,154,36,.18) 30%,
    rgba(31,47,107,.22)  60%,
    rgba(31,74,54,.16));
  pointer-events:none;
}

/* ── 5. Cycling 3 couleurs — rouge / navy / forest ──────────────────────── */
/* Navy */
.sit-paths .sit-path:nth-child(3n+2){
  border-color:rgba(31,47,107,.14);
  background:
    radial-gradient(ellipse 52% 70% at 0% 50%, rgba(6,12,38,.10), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.046) 0%, rgba(255,255,255,.010) 52%, transparent 100%),
    rgba(6,5,9,.86);
}
.sit-paths .sit-path:nth-child(3n+2)::before{
  background:linear-gradient(180deg,
    rgba(31,47,107,.32),
    rgba(31,47,107,.20) 30%,
    rgba(163,21,33,.18) 60%,
    rgba(31,74,54,.14));
}
/* Forest */
.sit-paths .sit-path:nth-child(3n+3){
  border-color:rgba(31,74,54,.14);
  background:
    radial-gradient(ellipse 52% 70% at 0% 50%, rgba(8,22,14,.10), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.046) 0%, rgba(255,255,255,.010) 52%, transparent 100%),
    rgba(6,5,9,.86);
}
.sit-paths .sit-path:nth-child(3n+3)::before{
  background:linear-gradient(180deg,
    rgba(31,74,54,.30),
    rgba(31,74,54,.18) 30%,
    rgba(163,21,33,.18) 60%,
    rgba(31,47,107,.14));
}

/* ── 6. Icône — boîte colorée en écho à la couleur de la carte ──────────── */
.sit-path-ic{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px;
  background:rgba(163,21,33,.12);
  border:1px solid rgba(163,21,33,.22);
  color:rgba(200,130,140,.82);
  margin-bottom:14px;
  opacity:1;
  transition:background .26s, border-color .26s, color .26s, box-shadow .26s, transform .26s;
}
.sit-paths .sit-path:nth-child(3n+2) .sit-path-ic{
  background:rgba(31,47,107,.14); border-color:rgba(31,47,107,.26); color:rgba(140,158,210,.82);
}
.sit-paths .sit-path:nth-child(3n+3) .sit-path-ic{
  background:rgba(31,74,54,.12); border-color:rgba(31,74,54,.24); color:rgba(100,178,130,.76);
}

/* ── 7. Texte — blanc chaud bien contrasté ──────────────────────────────── */
.sit-path-t{
  color:rgba(235,225,212,.88);
  font-size:1.05rem;
  margin-bottom:6px;
}
.sit-path-t::after{
  color:rgba(196,154,36,.80);
}
.sit-path-d{
  color:rgba(180,168,154,.56);
  font-size:.80rem;
  line-height:1.68;
}

/* ── 8. Hover — la carte se lève, glow doux selvedge ────────────────────── */
.sit-path:hover{
  border-color:rgba(163,21,33,.26);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.060),
    0 8px 28px rgba(0,0,0,.38),
    0 0   22px rgba(163,21,33,.09);
  background:
    radial-gradient(ellipse 55% 70% at 0% 50%, rgba(80,6,12,.13), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.058) 0%, rgba(255,255,255,.012) 52%, transparent 100%),
    rgba(7,5,10,.90);
}
.sit-paths .sit-path:nth-child(3n+2):hover{ border-color:rgba(31,47,107,.26) }
.sit-paths .sit-path:nth-child(3n+3):hover{ border-color:rgba(31,74,54,.26) }

/* Hover icône — illuminée */
.sit-path:hover .sit-path-ic{
  background:linear-gradient(135deg, rgba(163,21,33,.88), rgba(90,6,14,.84));
  border-color:rgba(196,154,36,.28);
  color:#fff;
  box-shadow:0 0 14px rgba(163,21,33,.26), 0 0 0 1px rgba(196,154,36,.12);
  transform:scale(1.08);
  opacity:1;
}
.sit-paths .sit-path:nth-child(3n+2):hover .sit-path-ic{
  background:linear-gradient(135deg, rgba(31,47,107,.92), rgba(16,28,72,.88));
  border-color:rgba(196,154,36,.24); color:#fff;
  box-shadow:0 0 14px rgba(31,47,107,.28), 0 0 0 1px rgba(196,154,36,.10);
}
.sit-paths .sit-path:nth-child(3n+3):hover .sit-path-ic{
  background:linear-gradient(135deg, rgba(31,74,54,.92), rgba(14,40,24,.88));
  border-color:rgba(196,154,36,.22); color:#fff;
  box-shadow:0 0 14px rgba(31,74,54,.24), 0 0 0 1px rgba(196,154,36,.08);
}

/* Hover texte */
.sit-path:hover .sit-path-t{ color:rgba(235,225,212,.96) }
.sit-paths .sit-path:nth-child(3n+2):hover .sit-path-t{ color:rgba(200,215,255,.94) }
.sit-paths .sit-path:nth-child(3n+3):hover .sit-path-t{ color:rgba(160,220,185,.94) }

/* Hover flèche → */
.sit-path:hover .sit-path-t::after{
  opacity:1; transform:translateX(0); color:rgba(196,154,36,.88);
}

/* ── 9. Light theme ──────────────────────────────────────────────────────── */
[data-theme="light"] .sit-bg .tartan-light{
  opacity:.08;
  filter:saturate(.15) brightness(.50) contrast(.70);
}
[data-theme="light"] .sit-bg-fade{
  background:
    radial-gradient(ellipse 100% 60% at 50% 50%, rgba(245,241,236,.85) 0%, rgba(245,241,236,.55) 38%, transparent 68%),
    linear-gradient(180deg, var(--bg) 0%, rgba(245,241,236,.70) 22%, rgba(245,241,236,.70) 78%, var(--bg) 100%);
}
[data-theme="light"] .sit-path{
  border-color:rgba(163,21,33,.10);
  background:linear-gradient(145deg, rgba(255,255,255,.90), rgba(246,240,234,.74));
  box-shadow:0 4px 16px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
}
[data-theme="light"] .sit-path::before{
  background:linear-gradient(180deg,
    rgba(163,21,33,.18),
    rgba(196,154,36,.10) 30%,
    rgba(31,47,107,.12) 60%,
    rgba(31,74,54,.08));
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2){ border-color:rgba(31,47,107,.10) }
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3){ border-color:rgba(31,74,54,.10) }
[data-theme="light"] .sit-path-ic{
  background:rgba(163,21,33,.08); border-color:rgba(163,21,33,.16); color:rgba(163,21,33,.70);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2) .sit-path-ic{
  background:rgba(31,47,107,.08); border-color:rgba(31,47,107,.18); color:rgba(31,47,107,.66);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3) .sit-path-ic{
  background:rgba(31,74,54,.08); border-color:rgba(31,74,54,.16); color:rgba(31,74,54,.64);
}
[data-theme="light"] .sit-path-t{ color:rgba(22,12,12,.82) }
[data-theme="light"] .sit-path-d{ color:rgba(58,48,44,.56) }
[data-theme="light"] .sit-path:hover{
  border-color:rgba(163,21,33,.20);
  background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(250,244,238,.86));
  box-shadow:0 8px 24px rgba(0,0,0,.09), 0 0 14px rgba(163,21,33,.04);
  transform:translateY(-2px);
}
[data-theme="light"] .sit-path:hover .sit-path-t{ color:rgba(163,21,33,.90) }
[data-theme="light"] .sit-path:hover .sit-path-ic{
  background:rgba(163,21,33,.14); border-color:rgba(163,21,33,.28); color:rgba(163,21,33,.90);
  box-shadow:0 0 10px rgba(163,21,33,.12); transform:scale(1.08);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE PREMIUM — Direction artistique définitive
   Burberry boutique × papier haut-de-gamme × tailoring écossais × technologie
   Bloc final — priorité maximale sur tous les blocs précédents.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   § 1. VARIABLES — Palette ivoire premium, Royal Stewart textile
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Fonds ivoire warm — papier luxe, lin, champagne */
  --bg:  #FBFCFE;
  --bg2: #F3EDE0;
  --bg3: #EAE0CE;
  --bg4: #DDD0B8;

  /* Surfaces warm */
  --sf:  rgba(255,248,230,.06);
  --sf2: rgba(255,248,230,.10);
  --sf3: rgba(255,248,230,.18);

  /* Bordures warm sépia — zéro teinte bleue */
  --bd:  rgba(88,55,22,.082);
  --bd2: rgba(88,55,22,.152);

  /* Texte noble et éditorial */
  --tx:  #180E06;
  --tx2: #5C4230;
  --tx3: #9A7C60;

  /* Ombres warm */
  --sh:  0 4px 24px rgba(80,45,14,.08);
  --sh2: 0 16px 56px rgba(80,45,14,.13);

  /* Glassmorphism nav — ivoire translucide */
  --gl:  rgba(250,246,238,.96);

  /* Rouge textile mat — identité Stewart */
  --r:     #AC1820;
  --r-d:   #780A14;
  --r-l:   #CB2838;
  --r-g:   rgba(172,24,32,.11);
  --r-g2:  rgba(172,24,32,.19);
  --r-s:   rgba(172,24,32,.06);
  --r-b:   rgba(172,24,32,.19);
  --r-txt: #8C1018;

  /* Tartan — opacités premium */
  --tar-r1: rgba(172,24,32,.14);
  --tar-r2: rgba(172,24,32,.08);
  --tar-r3: rgba(172,24,32,.04);
  --tar-dk: rgba(104,10,18,.16);
  --tar-bd: rgba(172,24,32,.12);

  /* Royal Stewart palette — mode textile */
  --rs-red:        #B01820;
  --rs-red-deep:   #780A14;
  --rs-gold:       #9A7210;
  --rs-gold-soft:  rgba(154,114,16,.26);
  --rs-navy:       #0C1840;
  --rs-navy-soft:  rgba(12,24,64,.28);
  --rs-green:      #163420;
  --rs-green-soft: rgba(22,52,32,.26);
  --rs-ivory:      #F9F4EA;
  --rs-onyx:       #100808;

  /* Accents contextuels */
  --navy-hi:   #1C3278;
  --forest-hi: #1A4C38;
  --gold-hi:   #7A5A04;
  --navy-bg:   rgba(14,26,62,.06);
  --navy-bd:   rgba(14,26,62,.18);
  --forest-bg: rgba(22,52,32,.06);
  --forest-bd: rgba(22,52,32,.16);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § 2. CORPS — Fond ivoire chaud, halos ambiants textiles
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] body {
  background:
    radial-gradient(ellipse 80% 42% at 74% -8%,  rgba(172,24,32,.058), transparent 62%),
    radial-gradient(ellipse 56% 36% at 6% 96%,   rgba(22,52,32,.034),  transparent 56%),
    linear-gradient(180deg, #FCF9F2 0%, var(--bg) 30%, var(--bg2) 62%, var(--bg) 100%);
  color: var(--tx);
}
/* Ghost grid tartan — fil fantôme dans le fond, très subtil */
[data-theme="light"] body::before { opacity: .18; }
/* Halos page — rougeâtre haut droit, vert très doux bas gauche */
[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 80% 44% at 72% -10%, rgba(172,24,32,.065), transparent 62%),
    radial-gradient(ellipse 52% 40% at 6% 96%,   rgba(22,52,32,.038), transparent 56%),
    linear-gradient(180deg, var(--bg), var(--bg2) 50%, var(--bg));
}

/* ─────────────────────────────────────────────────────────────────────────────
   § 3. TARTAN PREMIUM — Tissu écossais photographié
   ───────────────────────────────────────────────────────────────────────────── */
/* Plus vivace qu'avant — couleurs riches, pas lavées */
[data-theme="light"] .tartan {
  filter: saturate(.82) brightness(.93) contrast(1.07);
}
[data-theme="light"] .tartan-light {
  opacity: .42;
  mix-blend-mode: multiply;
  filter: saturate(.65) brightness(.88) contrast(1.04);
}
/* Grain sheen ivoire — lumière rasante sur tissu */
[data-theme="light"] .tartan::after {
  background:
    radial-gradient(circle at 22% 28%, rgba(255,248,225,.14) 0%, transparent 44%),
    radial-gradient(circle at 78% 68%, rgba(104,10,18,.09) 0%,  transparent 42%);
  mix-blend-mode: soft-light;
}

/* ─────────────────────────────────────────────────────────────────────────────
   § 4. NAVIGATION — Verre ivoire, signature selvedge
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #nav,
[data-theme="light"] #nav.scrolled {
  background:
    linear-gradient(180deg, rgba(250,246,238,.97), rgba(243,237,224,.92));
  border-bottom: 1px solid rgba(88,55,22,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 4px 24px rgba(80,45,14,.10);
}
[data-theme="light"] .nav-a         { color: var(--tx2); }
[data-theme="light"] .nav-a:hover   { color: var(--r); background: rgba(172,24,32,.052); }
[data-theme="light"] .nav-a.active  { color: var(--r); }
[data-theme="light"] #thBtn,
[data-theme="light"] #mbBtn,
[data-theme="light"] .btn-o {
  background:   rgba(255,252,244,.72);
  border-color: rgba(88,55,22,.13);
  color:        var(--tx2);
  box-shadow:   0 1px 4px rgba(80,45,14,.06), inset 0 1px 0 rgba(255,255,255,.82);
}
[data-theme="light"] .btn-o:hover {
  background:   rgba(255,252,244,.94);
  border-color: rgba(172,24,32,.22);
  color:        var(--r);
  box-shadow:   0 4px 16px rgba(172,24,32,.08);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § 5. HÉRO — Panorama ivoire noble, contre-jour textile
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #hero {
  background:
    radial-gradient(ellipse 50% 48% at 18% 42%, rgba(172,24,32,.042), transparent 64%),
    radial-gradient(ellipse 40% 36% at 88% 28%, rgba(14,26,62,.042), transparent 58%),
    linear-gradient(108deg, #FCF9F2 0%, var(--bg) 45%, rgba(235,222,198,.78) 100%);
}
[data-theme="light"] #hero::before {
  background:
    linear-gradient(90deg, rgba(252,249,242,.98) 0%, rgba(250,246,236,.95) 44%, rgba(243,236,220,.34) 78%),
    radial-gradient(ellipse 68% 55% at 82% 44%, rgba(154,114,16,.06), transparent 68%);
}
[data-theme="light"] .hero-tartan-panel::before { background: none; }
[data-theme="light"] .hero-tartan-panel::after  {
  background: linear-gradient(270deg, rgba(250,246,238,.06) 0%, rgba(250,246,238,.86) 64%, rgba(252,249,242,.98) 100%);
}
[data-theme="light"] .hero-tartan-glow {
  background:
    radial-gradient(ellipse 58% 46% at 66% 44%, rgba(154,114,16,.055), transparent 64%),
    radial-gradient(ellipse 42% 34% at 72% 62%, rgba(22,52,32,.044), transparent 64%);
}
[data-theme="light"] .hero-creds {
  background:   rgba(255,252,244,.80);
  border-color: rgba(88,55,22,.10);
  box-shadow:   0 8px 32px rgba(80,45,14,.09), inset 0 1px 0 rgba(255,255,255,.86);
}
/* Héro — supprimer ::after froid sur mobile */
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg, rgba(250,246,238,.72) 0%, transparent 28%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § 6. CARTES UNIVERSELLES — Papier luxe, profondeur noble
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .card,
[data-theme="light"] .svc-card,
[data-theme="light"] .trust-card,
[data-theme="light"] .secteur-card,
[data-theme="light"] .te-card-large,
[data-theme="light"] .te-card-sm,
[data-theme="light"] .te-card-row,
[data-theme="light"] .sw-card,
[data-theme="light"] .team-card,
[data-theme="light"] .cblk,
[data-theme="light"] .ct-card,
[data-theme="light"] .ct-form,
[data-theme="light"] .legal-info-card,
[data-theme="light"] .ck-card {
  background:
    linear-gradient(145deg, rgba(255,252,244,.93), rgba(246,240,228,.84));
  border-color: rgba(88,55,22,.085);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 2px 10px rgba(80,45,14,.06),
    0 6px 28px rgba(80,45,14,.05);
}
/* Hover cards — lift noble, halo doux (aucun RGB) */
[data-theme="light"] .card:hover,
[data-theme="light"] .svc-card:hover,
[data-theme="light"] .trust-card:hover,
[data-theme="light"] .secteur-card:hover,
[data-theme="light"] .te-card-large:hover,
[data-theme="light"] .te-card-sm:hover,
[data-theme="light"] .sw-card:hover,
[data-theme="light"] .team-card:hover {
  border-color: rgba(172,24,32,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 34px rgba(80,45,14,.11),
    0 0 18px rgba(172,24,32,.042);
  transform: translateY(-2px);
}
/* Hover services — nuance par couleur d'icône */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1):hover { border-color:rgba(172,24,32,.18);  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 34px rgba(80,45,14,.10),0 0 16px rgba(172,24,32,.055); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2):hover { border-color:rgba(14,26,62,.16);   box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 34px rgba(80,45,14,.10),0 0 16px rgba(14,26,62,.048); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3):hover { border-color:rgba(22,52,32,.15);   box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 34px rgba(80,45,14,.10),0 0 16px rgba(22,52,32,.044); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4):hover { border-color:rgba(154,114,16,.17); box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 34px rgba(80,45,14,.10),0 0 16px rgba(154,114,16,.050); }
/* Hover logiciels */
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1):hover { border-color:rgba(172,24,32,.18);  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 34px rgba(80,45,14,.10),0 0 16px rgba(172,24,32,.050); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2):hover { border-color:rgba(14,26,62,.16);   box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 34px rgba(80,45,14,.10),0 0 16px rgba(14,26,62,.044); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3):hover { border-color:rgba(22,52,32,.15);   box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 34px rgba(80,45,14,.10),0 0 16px rgba(22,52,32,.042); }

/* ─────────────────────────────────────────────────────────────────────────────
   § 7. ICÔNES — Boîtes warm, halos doux (aucun néon gaming)
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .svc-ic,
[data-theme="light"] .sit-ic,
[data-theme="light"] .te-icon,
[data-theme="light"] .te-icon-sm,
[data-theme="light"] .sw-icon,
[data-theme="light"] .sec-ico {
  background:    rgba(255,252,244,.90);
  border-color:  rgba(88,55,22,.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 4px rgba(80,45,14,.06);
}
/* Services — rotation 4 couleurs, doux */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1) .svc-ic { color:var(--r);           border-color:rgba(172,24,32,.20); box-shadow:0 0 0 1px rgba(172,24,32,.10),0 2px 10px rgba(172,24,32,.06); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2) .svc-ic { color:var(--navy-hi);     border-color:rgba(14,26,62,.18);  box-shadow:0 0 0 1px rgba(14,26,62,.08),0 2px 10px rgba(14,26,62,.05); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3) .svc-ic { color:var(--forest-hi);   border-color:rgba(22,52,32,.16);  box-shadow:0 0 0 1px rgba(22,52,32,.08),0 2px 10px rgba(22,52,32,.05); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4) .svc-ic { color:var(--gold-hi);     border-color:rgba(154,114,16,.20);box-shadow:0 0 0 1px rgba(154,114,16,.10),0 2px 10px rgba(154,114,16,.05); }
/* Hover fill services */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1):hover .svc-ic { background:var(--r);        color:#fff; border-color:rgba(172,24,32,.40); box-shadow:0 2px 14px rgba(172,24,32,.20); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2):hover .svc-ic { background:var(--rs-navy);  color:#fff; border-color:rgba(14,26,62,.36);  box-shadow:0 2px 14px rgba(14,26,62,.16); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3):hover .svc-ic { background:var(--rs-green); color:#fff; border-color:rgba(22,52,32,.36);  box-shadow:0 2px 14px rgba(22,52,32,.14); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4):hover .svc-ic { background:var(--rs-gold);  color:#fff; border-color:rgba(154,114,16,.36);box-shadow:0 2px 14px rgba(154,114,16,.16); }
/* Logiciels */
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1) .sw-icon { color:var(--r);         border-color:rgba(172,24,32,.20); box-shadow:0 0 0 1px rgba(172,24,32,.10); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2) .sw-icon { color:var(--navy-hi);   border-color:rgba(14,26,62,.18);  box-shadow:0 0 0 1px rgba(14,26,62,.08); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3) .sw-icon { color:var(--forest-hi); border-color:rgba(22,52,32,.16);  box-shadow:0 0 0 1px rgba(22,52,32,.08); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1):hover .sw-icon { background:var(--r);        color:#fff; box-shadow:0 2px 12px rgba(172,24,32,.18); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2):hover .sw-icon { background:var(--rs-navy);  color:#fff; box-shadow:0 2px 12px rgba(14,26,62,.14); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3):hover .sw-icon { background:var(--rs-green); color:#fff; box-shadow:0 2px 12px rgba(22,52,32,.12); }
/* Trust editorial */
[data-theme="light"] .te-col-left .te-card-large .te-icon,
[data-theme="light"] .te-col-left .te-card-sm:not(:last-child) .te-icon { color:var(--r);         border-color:rgba(172,24,32,.20); box-shadow:0 0 0 1px rgba(172,24,32,.10); }
[data-theme="light"] .te-col-right .te-card-large .te-icon,
[data-theme="light"] .te-col-right .te-card-sm .te-icon               { color:var(--navy-hi);   border-color:rgba(14,26,62,.18);  box-shadow:0 0 0 1px rgba(14,26,62,.08); }
[data-theme="light"] .te-col-left .te-card-sm:last-child .te-icon      { color:var(--forest-hi); border-color:rgba(22,52,32,.16);  box-shadow:0 0 0 1px rgba(22,52,32,.08); }
[data-theme="light"] .te-col-right .te-card-large:hover .te-icon        { background:var(--rs-navy);  color:#fff; box-shadow:0 2px 12px rgba(14,26,62,.14); }
[data-theme="light"] .te-col-left .te-card-sm:last-child:hover .te-icon { background:var(--rs-green); color:#fff; box-shadow:0 2px 12px rgba(22,52,32,.12); }
/* Secteurs */
[data-theme="light"] .sec-ico { color:var(--navy-hi); border-color:rgba(14,26,62,.18); box-shadow:0 0 0 1px rgba(14,26,62,.08); }
[data-theme="light"] .secteur-card:hover { border-color:rgba(14,26,62,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 34px rgba(80,45,14,.10),0 0 14px rgba(14,26,62,.044); }
[data-theme="light"] .secteur-card:hover .sec-ico { background:var(--rs-navy); color:#fff; box-shadow:0 2px 12px rgba(14,26,62,.14); }
/* CI steps */
[data-theme="light"] .ci-step:nth-child(odd)  .ci-sn { color:var(--navy-hi);   border-color:rgba(14,26,62,.20);  background:rgba(14,26,62,.06);  box-shadow:0 0 0 1px rgba(14,26,62,.10); }
[data-theme="light"] .ci-step:nth-child(even) .ci-sn { color:var(--r);         border-color:rgba(172,24,32,.22); background:rgba(172,24,32,.07); box-shadow:0 0 0 1px rgba(172,24,32,.12); }

/* ─────────────────────────────────────────────────────────────────────────────
   § 8. SECTIONS — Teintes textiles ultra-subtiles, pas d'aplat vide
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #services   { background:linear-gradient(180deg,var(--bg),rgba(172,24,32,.026)  50%,var(--bg)); }
[data-theme="light"] #logiciels  { background:linear-gradient(180deg,var(--bg),rgba(14,26,62,.026)   50%,var(--bg)); }
[data-theme="light"] #situations { background:linear-gradient(180deg,var(--bg),rgba(22,52,32,.022)   50%,var(--bg)); }
[data-theme="light"] #equipe     { background:linear-gradient(180deg,var(--bg),rgba(22,52,32,.022)   50%,var(--bg)); }
[data-theme="light"] #secteurs   { background:linear-gradient(180deg,var(--bg),rgba(14,26,62,.022)   50%,var(--bg)); }
[data-theme="light"] #contact    { background:linear-gradient(180deg,var(--bg),rgba(154,114,16,.020) 50%,var(--bg)); }
[data-theme="light"] #faq        { background:linear-gradient(180deg,var(--bg),rgba(172,24,32,.022)  50%,var(--bg)); }
[data-theme="light"] #temoignages{ background:var(--bg); }
[data-theme="light"] #trust      { background:linear-gradient(180deg,var(--bg),rgba(14,26,62,.020)   50%,var(--bg)); }
/* Separateurs section */
[data-theme="light"] #services::after,
[data-theme="light"] #logiciels::after,
[data-theme="light"] #situations::after,
[data-theme="light"] #secteurs::after,
[data-theme="light"] #equipe::after,
[data-theme="light"] #contact::after { opacity:.38; }

/* ─────────────────────────────────────────────────────────────────────────────
   § 9. TRUST BAR — Fond ivoire, icônes or nobles, veil warm
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #trust-bar {
  background:
    linear-gradient(180deg, rgba(250,246,238,.95), rgba(243,237,224,.90));
  border-color: rgba(88,55,22,.10);
}
[data-theme="light"] .tb-veil {
  background:
    linear-gradient(90deg, rgba(250,246,238,.96), rgba(243,237,224,.82) 50%, rgba(250,246,238,.96)),
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(154,114,16,.04), transparent 70%);
}
[data-theme="light"] .tb-icon {
  background:    rgba(255,252,244,.90);
  border-color:  rgba(154,114,16,.26);
  color:         var(--gold-hi);
  box-shadow:    0 1px 4px rgba(80,45,14,.06);
}
[data-theme="light"] .tb-item:hover .tb-icon {
  background:   rgba(154,114,16,.10);
  border-color: rgba(154,114,16,.36);
  color:        #5E4600;
  box-shadow:   0 2px 10px rgba(154,114,16,.10);
}
[data-theme="light"] .tb-title { color: var(--tx); }
[data-theme="light"] .tb-text  { color: var(--tx2); }

/* ─────────────────────────────────────────────────────────────────────────────
   § 10. TICKER — Fond ivoire, séparateurs 4-couleurs
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .ticker-wrap {
  background:
    radial-gradient(ellipse 40% 100% at 18% 50%, rgba(172,24,32,.028), transparent 70%),
    radial-gradient(ellipse 30% 100% at 82% 50%, rgba(14,26,62,.022),  transparent 68%),
    rgba(250,246,238,.90);
  border-color: rgba(88,55,22,.10);
}
[data-theme="light"] .ticker-wrap::before { opacity: .18; }
[data-theme="light"] .ti           { color: rgba(92,66,48,.52); }
[data-theme="light"] .ti:hover     { color: rgba(92,66,48,.85); }
[data-theme="light"] .ticker-track .ti:nth-child(4n+1)::before { background:rgba(172,24,32,.55); }
[data-theme="light"] .ticker-track .ti:nth-child(4n+2)::before { background:rgba(14,26,62,.48);  }
[data-theme="light"] .ticker-track .ti:nth-child(4n+3)::before { background:rgba(22,52,32,.44);  }
[data-theme="light"] .ticker-track .ti:nth-child(4n+4)::before { background:rgba(154,114,16,.42); }

/* ─────────────────────────────────────────────────────────────────────────────
   § 11. PILL BAR — Verre ivoire premium, selvedge warm
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #pill {
  background:
    radial-gradient(ellipse 44% 88% at -2% 50%, rgba(172,24,32,.08), transparent 72%),
    linear-gradient(145deg, rgba(255,255,255,.70) 0%, rgba(250,246,238,.58) 52%, rgba(243,237,224,.50) 100%),
    rgba(250,246,238,.92);
  border-color: rgba(88,55,22,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(88,55,22,.08),
    inset 1px 0 0 rgba(154,114,16,.14),
    0 8px 32px rgba(80,45,14,.12),
    0 0 42px rgba(172,24,32,.06);
  backdrop-filter: blur(24px) saturate(1.3);
}
[data-theme="light"] .pill-tartan .tartan-light {
  opacity: .08;
  filter: saturate(.18) brightness(.60) contrast(.94);
}
[data-theme="light"] .pill-tartan::after {
  background:
    linear-gradient(90deg,
      rgba(172,24,32,.18) 0 1.5px, rgba(154,114,16,.11) 1.5px 2.5px,
      rgba(14,26,62,.13) 2.5px 4px, rgba(22,52,32,.08) 4px 5px,
      transparent 5px 100%),
    linear-gradient(100deg, rgba(250,246,238,.24) 0%, rgba(250,246,238,.10) 45%, transparent 100%);
}
[data-theme="light"] .pill-stripe {
  background: linear-gradient(90deg,
    transparent 0%, rgba(172,24,32,.38) 15%, rgba(154,114,16,.26) 32%,
    rgba(172,24,32,.34) 50%, rgba(14,26,62,.18) 68%, rgba(22,52,32,.14) 82%, transparent 100%);
}
[data-theme="light"] .pill-txt strong { color: var(--tx);  font-size:.84rem; text-shadow: none; }
[data-theme="light"] .pill-txt span   { color: var(--tx3); }
[data-theme="light"] .pill-chat { background:rgba(0,0,0,.038); border-color:rgba(0,0,0,.072); color:var(--tx3); }

/* ─────────────────────────────────────────────────────────────────────────────
   § 12. CHATBOT — Verre ivoire, header noble
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #cb-win {
  background:
    radial-gradient(ellipse 55% 28% at 0% 100%, rgba(172,24,32,.04), transparent 62%),
    radial-gradient(ellipse 42% 24% at 100% 0%,  rgba(14,26,62,.04),  transparent 55%),
    rgba(252,249,242,.96);
  border-color: rgba(88,55,22,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 1px 0 0 rgba(154,114,16,.08),
    0 20px 60px rgba(80,45,14,.14),
    0 0 48px rgba(172,24,32,.06);
}
[data-theme="light"] .cb-head-tartan .tartan {
  filter: saturate(.52) brightness(.78) contrast(1.04);
  opacity: .55;
}
[data-theme="light"] .cb-head-overlay {
  background:
    linear-gradient(90deg,
      rgba(172,24,32,.18) 0 2px, rgba(154,114,16,.11) 2px 3.5px,
      rgba(14,26,62,.13) 3.5px 5px, transparent 5px 100%),
    radial-gradient(ellipse 42% 55% at 100% 0%, rgba(14,26,62,.07), transparent 65%),
    linear-gradient(135deg, rgba(250,246,238,.88) 0%, rgba(243,237,224,.84) 50%, rgba(247,242,232,.88) 100%);
}
[data-theme="light"] .cb-head::after {
  background: linear-gradient(90deg,
    rgba(172,24,32,.24) 0%, rgba(154,114,16,.16) 22%,
    rgba(172,24,32,.18) 50%, rgba(14,26,62,.12) 78%, rgba(22,52,32,.10) 100%);
}
[data-theme="light"] .cb-av {
  background: rgba(172,24,32,.15);
  box-shadow: 0 0 0 1px rgba(172,24,32,.26), inset 0 1px 0 rgba(255,255,255,.30);
}
[data-theme="light"] .cb-online-dot   { background: #168f4e; border-color: rgba(154,114,16,.45); }
[data-theme="light"] .cb-msgs         { background: transparent; }
[data-theme="light"] .cb-m.bot .cb-bub{
  background:   rgba(255,252,244,.82);
  border-color: rgba(88,55,22,.09);
  color:        var(--tx2);
}
[data-theme="light"] .cb-quick        { background: transparent; border-top-color: rgba(88,55,22,.07); }
[data-theme="light"] .cb-qb           { color:rgba(92,66,48,.56); border-color:rgba(88,55,22,.09); }
[data-theme="light"] .cb-qb:hover     { border-color:rgba(14,26,62,.20); color:rgba(14,26,62,.80); background:rgba(14,26,62,.05); }
[data-theme="light"] .cb-foot {
  border-top: none;
  background:
    linear-gradient(90deg,transparent 0%,rgba(172,24,32,.08) 20%,rgba(154,114,16,.06) 50%,rgba(14,26,62,.05) 78%,transparent 100%)
    top / 100% 1px no-repeat,
    rgba(250,246,238,.40);
}
[data-theme="light"] #cbInp:focus { border-color:rgba(172,24,32,.30); box-shadow:0 0 0 2px rgba(172,24,32,.06); }

/* ─────────────────────────────────────────────────────────────────────────────
   § 13. FAQ — Cartes papier premium, selvedge warm
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .faq-item {
  background: linear-gradient(145deg, rgba(255,252,244,.93), rgba(246,240,228,.84));
  border-color: rgba(88,55,22,.09);
  box-shadow:   inset 0 1px 0 rgba(255,255,255,.88), 0 4px 16px rgba(80,45,14,.06), 0 1px 4px rgba(80,45,14,.04);
}
[data-theme="light"] .faq-item::before {
  background: linear-gradient(180deg,
    rgba(172,24,32,.20), rgba(154,114,16,.11) 30%, rgba(14,26,62,.14) 60%, rgba(22,52,32,.09));
}
[data-theme="light"] .faq-item:nth-child(4n+2) { border-color:rgba(14,26,62,.09); }
[data-theme="light"] .faq-item:nth-child(4n+3) { border-color:rgba(22,52,32,.09); }
[data-theme="light"] .faq-item:nth-child(4n+4) { border-color:rgba(154,114,16,.09); }
[data-theme="light"] .faq-item:hover {
  background:    linear-gradient(145deg, rgba(255,252,244,.97), rgba(250,244,238,.88));
  border-color:  rgba(172,24,32,.18);
  box-shadow:    inset 0 1px 0 rgba(255,255,255,.92), 0 8px 28px rgba(80,45,14,.09), 0 0 14px rgba(172,24,32,.04);
}
[data-theme="light"] .faq-item.open  { border-color:rgba(172,24,32,.22); }
[data-theme="light"] .faq-q:hover    { background:rgba(0,0,0,.016); border-radius:0; }
[data-theme="light"] .faq-qt         { color:rgba(24,14,6,.82); }
[data-theme="light"] .faq-q[aria-expanded="true"] .faq-qt,
[data-theme="light"] .faq-item.open .faq-qt { color:rgba(12,5,2,.94); }
[data-theme="light"] .faq-icon       { background:rgba(14,26,62,.08); border-color:rgba(14,26,62,.18); color:rgba(28,50,120,.52); }
[data-theme="light"] .faq-q:hover .faq-icon{ background:rgba(14,26,62,.12); border-color:rgba(14,26,62,.26); color:rgba(28,50,120,.78); }
[data-theme="light"] .faq-a-inner    { color:rgba(92,66,48,.66); border-top-color:rgba(88,55,22,.06); background:rgba(0,0,0,.016); }

/* ─────────────────────────────────────────────────────────────────────────────
   § 14. SITUATIONS — Cartes papier warm, selvedge textile
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .sit-bg .tartan-light {
  opacity: .07;
  filter: saturate(.15) brightness(.55) contrast(.92);
}
[data-theme="light"] .sit-bg-fade {
  background:
    radial-gradient(ellipse 100% 60% at 50% 50%, rgba(250,246,238,.88) 0%, rgba(250,246,238,.58) 38%, transparent 68%),
    linear-gradient(180deg, var(--bg) 0%, rgba(250,246,238,.76) 22%, rgba(250,246,238,.76) 78%, var(--bg) 100%);
}
[data-theme="light"] .sit-path {
  background: linear-gradient(145deg, rgba(255,252,244,.93), rgba(246,240,228,.84));
  border-color: rgba(88,55,22,.09);
  box-shadow:   inset 0 1px 0 rgba(255,255,255,.88), 0 4px 16px rgba(80,45,14,.06);
}
[data-theme="light"] .sit-path::before {
  background: linear-gradient(180deg,
    rgba(172,24,32,.20), rgba(154,114,16,.11) 30%, rgba(14,26,62,.13) 60%, rgba(22,52,32,.09));
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2) { border-color:rgba(14,26,62,.09); }
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3) { border-color:rgba(22,52,32,.09); }
[data-theme="light"] .sit-path-ic {
  background:rgba(172,24,32,.08); border-color:rgba(172,24,32,.17); color:rgba(172,24,32,.72);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2) .sit-path-ic {
  background:rgba(14,26,62,.07); border-color:rgba(14,26,62,.17); color:rgba(28,50,120,.66);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3) .sit-path-ic {
  background:rgba(22,52,32,.07); border-color:rgba(22,52,32,.16); color:rgba(26,76,56,.64);
}
[data-theme="light"] .sit-path-t  { color:rgba(24,14,6,.82); }
[data-theme="light"] .sit-path-d  { color:rgba(92,66,48,.56); }
[data-theme="light"] .sit-path:hover {
  background:    linear-gradient(145deg, rgba(255,252,244,.97), rgba(250,244,238,.90));
  border-color:  rgba(172,24,32,.18);
  box-shadow:    inset 0 1px 0 rgba(255,255,255,.92), 0 8px 28px rgba(80,45,14,.10), 0 0 14px rgba(172,24,32,.04);
  transform:     translateY(-2px);
}
[data-theme="light"] .sit-path:hover .sit-path-t  { color:rgba(172,24,32,.92); }
[data-theme="light"] .sit-path:hover .sit-path-ic {
  background:rgba(172,24,32,.13); border-color:rgba(172,24,32,.26); color:rgba(172,24,32,.90);
  box-shadow:0 0 10px rgba(172,24,32,.10); transform:scale(1.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § 15. TÉMOIGNAGES — Cartes ivoire, citations nobles
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .testi-tartan-bg .tartan {
  opacity: .22;
  filter: saturate(.58) brightness(.86) contrast(1.04);
}
[data-theme="light"] .testi-tartan-glow {
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(250,246,238,.78), transparent 70%);
}
[data-theme="light"] .testi-card {
  background:    linear-gradient(145deg, rgba(255,252,244,.93), rgba(246,240,228,.84));
  border-color:  rgba(88,55,22,.09);
  box-shadow:    inset 0 1px 0 rgba(255,255,255,.88), 0 4px 20px rgba(80,45,14,.07);
}
[data-theme="light"] .testi-card:hover {
  background:    rgba(255,252,244,.97);
  border-color:  rgba(172,24,32,.17);
  box-shadow:    inset 0 1px 0 rgba(255,255,255,.92), 0 10px 36px rgba(80,45,14,.12);
}
[data-theme="light"] .ts-arrow {
  background:   rgba(255,252,244,.88);
  border-color: rgba(88,55,22,.12);
  color:        var(--tx2);
}
[data-theme="light"] .ts-arrow:hover { background:var(--r); border-color:var(--r); color:#fff; }

/* ─────────────────────────────────────────────────────────────────────────────
   § 16. ZONES — Scène ivoire, points warm
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #zones {
  background:
    radial-gradient(ellipse 100% 48% at 50% 0%, rgba(172,24,32,.038), transparent 56%),
    radial-gradient(ellipse 60% 56% at 8% 50%,  rgba(14,26,62,.030), transparent 62%),
    var(--bg);
}
[data-theme="light"] .zn-stage::before {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(172,24,32,.09), transparent 72%);
}
[data-theme="light"] .zn-stage::after  {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(14,26,62,.06), transparent 72%);
}
[data-theme="light"] .zn-list li { color:var(--r); text-shadow:none; letter-spacing:.06em; }
[data-theme="light"] .zn-head .eye    { color: var(--gold-hi); }
[data-theme="light"] .zn-head .h2     { color: var(--tx); }
[data-theme="light"] .zn-head .body-l { color: var(--tx2); }

/* ─────────────────────────────────────────────────────────────────────────────
   § 17. FOOTER — Ivoire feutré, selvedge discret
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] footer {
  background:
    radial-gradient(ellipse 72% 36% at 50% 0%, rgba(172,24,32,.036), transparent 54%),
    radial-gradient(ellipse 38% 44% at 6% 50%,  rgba(14,26,62,.026), transparent 60%),
    var(--bg2);
  border-top: 1px solid rgba(88,55,22,.10);
}
[data-theme="light"] .ft-overlay    { background: var(--bg2); opacity: .91; }
[data-theme="light"] .ft-col        { border-left-color: rgba(88,55,22,.07); padding-left: clamp(18px,2.4vw,32px); }
[data-theme="light"] .ft-bottom     { border-top-color: rgba(88,55,22,.08); }
[data-theme="light"] .ft-cert-badge { background: rgba(255,252,244,.70); border-color: rgba(88,55,22,.13); }
[data-theme="light"] .ft-cert-badge:hover { background: rgba(255,252,244,.94); border-color: rgba(172,24,32,.20); }

/* ─────────────────────────────────────────────────────────────────────────────
   § 18. BOUTONS — Rouge mat textile, halos nobles
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .btn-r {
  background: var(--r);
  box-shadow: 0 2px 14px rgba(172,24,32,.26), inset 0 1px 0 rgba(255,255,255,.14);
}
[data-theme="light"] .btn-r:hover,
[data-theme="light"] .ci-btn:hover,
[data-theme="light"] .fbtn:hover {
  box-shadow: 0 8px 28px rgba(172,24,32,.30), 0 0 0 1px rgba(154,114,16,.26) inset, 0 1px 0 rgba(255,225,160,.10) inset;
}

/* ─────────────────────────────────────────────────────────────────────────────
   § 19. FORMULAIRES — Input warm, focus élégant
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .fi {
  background:   rgba(255,252,244,.82);
  border-color: rgba(88,55,22,.13);
  color:        var(--tx);
}
[data-theme="light"] .fi:focus {
  border-color: rgba(172,24,32,.32);
  box-shadow:   0 0 0 3px rgba(172,24,32,.07);
  background:   rgba(255,252,244,.96);
}
[data-theme="light"] .fi::placeholder { color: var(--tx3); }
[data-theme="light"] .c-sos  { background:rgba(172,24,32,.048); border-color:rgba(172,24,32,.16); }
[data-theme="light"] select.fi {
  /* Flèche dropdown unique à droite.
     background-repeat est resetté à 'repeat' par le shorthand background: de .fi
     (spécificité 0,2,0 > 0,1,1 de la règle de base) — la flèche se répétait en mosaïque.
     On restaure ici les 3 sous-propriétés pour contrer ce reset. */
  background-image:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A7C60' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat:   no-repeat !important;
  background-position: right 14px center !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   § 20. CI / PRICING CARDS — Papier premium
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .ci-card {
  background:    linear-gradient(145deg, rgba(255,252,244,.93), rgba(246,240,228,.84));
  border-color:  rgba(88,55,22,.09);
  box-shadow:    inset 0 1px 0 rgba(255,255,255,.88), 0 4px 20px rgba(80,45,14,.07);
}
[data-theme="light"] .ci-card-mask {
  background:
    linear-gradient(135deg, rgba(255,252,244,.96), rgba(246,240,228,.88) 52%, rgba(255,252,244,.96)),
    radial-gradient(ellipse 90% 80% at 50% 0%, rgba(172,24,32,.055), transparent 66%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § 21. TYPOGRAPHIE ÉDITORIALE — Hiérarchie raffinée
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .disp em   { color:var(--r); text-shadow:0 2px 14px rgba(172,24,32,.10); }
[data-theme="light"] .eye       { color:var(--gold-hi); }
[data-theme="light"] .eye::before {
  background: linear-gradient(90deg,
    var(--rs-gold) 0%, var(--rs-gold) 38%,
    rgba(14,26,62,.48) 38%, rgba(14,26,62,.48) 44%,
    var(--r) 44%, var(--r) 100%);
}
/* Scrollbar warm sépia */
[data-theme="light"] *::-webkit-scrollbar-track { background: var(--bg3); }
[data-theme="light"] *::-webkit-scrollbar-thumb {
  background:    linear-gradient(180deg, var(--rs-gold) 0%, var(--r) 55%, var(--rs-red-deep) 100%);
  border-color:  var(--bg3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § 22. BADGES — Warm, pas de fond sombre
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .badge {
  background:   rgba(255,252,244,.82);
  border-color: rgba(88,55,22,.12);
  color:        var(--tx2);
  box-shadow:   inset 0 1px 0 rgba(255,255,255,.88);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § 23. SECTEUR CARDS — Fond warm, border discret
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .secteur-card {
  background:    linear-gradient(145deg, rgba(255,252,244,.93), rgba(246,240,228,.84));
  border-color:  rgba(88,55,22,.085);
  box-shadow:    inset 0 1px 0 rgba(255,255,255,.88), 0 2px 10px rgba(80,45,14,.06);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE CORRECTION v2 — Mat éditorial premium
   Diagnostic: le bloc précédent ajoutait des fog blancs (opacity .88-.98) et
   des inset white glows sur CHAQUE élément → "brûlure lumineuse" généralisée.
   Philosophie: LE PAPIER EST LÀ. Ne pas ajouter de lumière par-dessus.
   Principe: fond dense, pas blanc — tartan plus profond — ombres naturelles.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   § A. VARIABLES — Lin dense, pas ivoire blanc
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:  #EBEFF6;   /* lin écossais dense — fond principal */
  --bg2: #E4D9C6;   /* parchemin chaud */
  --bg3: #D8CAAF;   /* kraft premium */
  --bg4: #C8B898;   /* chamois */
  --gl:  rgba(237,228,210,.97);
  /* Ombres naturelles — sépia fort, pas fade */
  --sh:  0 2px 10px rgba(60,35,12,.11);
  --sh2: 0 12px 42px rgba(60,35,12,.15);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § B. CORPS — Fond lin, halos quasi invisibles
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] body {
  /* STOP les radial-gradients lumineux qui "brûlent" la page */
  background:
    radial-gradient(ellipse 70% 32% at 72% -6%, rgba(172,24,32,.038), transparent 58%),
    var(--bg);
  color: var(--tx);
}
/* Ghost grid — minuscule */
[data-theme="light"] body::before { opacity: .10; }
/* Halos — fantômes, pas des projecteurs */
[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 68% 32% at 72% -8%, rgba(172,24,32,.042), transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg2) 50%, var(--bg));
}

/* ─────────────────────────────────────────────────────────────────────────────
   § C. TARTAN — Profond, riche, textile réel
   ───────────────────────────────────────────────────────────────────────────── */
/* Plus de lumière dessus → les couleurs du tissu ressortent */
[data-theme="light"] .tartan {
  filter: saturate(.80) brightness(.82) contrast(1.10);
}
[data-theme="light"] .tartan-light {
  opacity: .54;
  mix-blend-mode: multiply;
  filter: saturate(.72) brightness(.78) contrast(1.08);
}
/* STOP le sheen blanc sur le tartan — il brûlait le motif */
[data-theme="light"] .tartan::after {
  background: none;
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   § D. NAVIGATION — Dense, ancré, pas transparent
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #nav,
[data-theme="light"] #nav.scrolled {
  background: linear-gradient(180deg, rgba(237,228,210,.98), rgba(228,217,198,.96));
  border-bottom: 1px solid rgba(88,55,22,.14);
  /* STOP l'inset white glow */
  box-shadow: 0 4px 22px rgba(60,35,12,.11);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § E. HÉRO — Tartan visible, fog retiré
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #hero {
  background:
    radial-gradient(ellipse 46% 42% at 18% 42%, rgba(172,24,32,.06), transparent 60%),
    linear-gradient(108deg, var(--bg) 0%, var(--bg) 46%, var(--bg2) 100%);
}
/* Le fog était à .98/.95 → maintenant .78/.48 : le tartan respire */
[data-theme="light"] #hero::before {
  background:
    linear-gradient(90deg,
      rgba(237,228,210,.80) 0%,
      rgba(237,228,210,.52) 40%,
      rgba(237,228,210,.18) 68%,
      transparent 84%);
}
/* Panel tartan — plus opaque qu'avant (.06 → transparent) mais fog réduit */
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(270deg,
    transparent 0%,
    rgba(237,228,210,.42) 58%,
    rgba(237,228,210,.76) 100%);
}
[data-theme="light"] .hero-tartan-glow {
  background:
    radial-gradient(ellipse 52% 42% at 66% 44%, rgba(154,114,16,.06), transparent 62%),
    radial-gradient(ellipse 38% 30% at 72% 60%, rgba(22,52,32,.05), transparent 62%);
}
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg, rgba(237,228,210,.52) 0%, transparent 22%);
}
[data-theme="light"] .hero-creds {
  background:   rgba(228,217,198,.72);
  border-color: rgba(88,55,22,.14);
  box-shadow:   0 6px 24px rgba(60,35,12,.10);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § F. CARTES — Surfaces solides, ombres naturelles, ZÉRO white glow
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .card,
[data-theme="light"] .svc-card,
[data-theme="light"] .trust-card,
[data-theme="light"] .secteur-card,
[data-theme="light"] .te-card-large,
[data-theme="light"] .te-card-sm,
[data-theme="light"] .te-card-row,
[data-theme="light"] .sw-card,
[data-theme="light"] .team-card,
[data-theme="light"] .cblk,
[data-theme="light"] .ct-card,
[data-theme="light"] .ct-form,
[data-theme="light"] .legal-info-card,
[data-theme="light"] .ck-card {
  /* SURFACE SOLIDE — papier dense, pas transparent */
  background: #F2E8D5;
  border-color: rgba(88,55,22,.12);
  /* OMBRE NATURELLE — sépia, direction, pas de glow blanc */
  box-shadow:
    0 1px 3px rgba(60,35,12,.10),
    0 4px 18px rgba(60,35,12,.08);
}
/* Hover: lift naturel, ombre plus profonde — aucun néon */
[data-theme="light"] .card:hover,
[data-theme="light"] .svc-card:hover,
[data-theme="light"] .trust-card:hover,
[data-theme="light"] .secteur-card:hover,
[data-theme="light"] .te-card-large:hover,
[data-theme="light"] .te-card-sm:hover,
[data-theme="light"] .sw-card:hover,
[data-theme="light"] .team-card:hover {
  background:   #F5ECD8;
  border-color: rgba(172,24,32,.18);
  box-shadow:
    0 2px 6px rgba(60,35,12,.12),
    0 8px 32px rgba(60,35,12,.12);
  transform: translateY(-2px);
}
/* Hover couleur services — border seule change, pas de glow */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1):hover { border-color:rgba(172,24,32,.22); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2):hover { border-color:rgba(14,26,62,.20);  }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3):hover { border-color:rgba(22,52,32,.18);  }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4):hover { border-color:rgba(154,114,16,.20); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1):hover { border-color:rgba(172,24,32,.22); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2):hover { border-color:rgba(14,26,62,.20);  }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3):hover { border-color:rgba(22,52,32,.18);  }
[data-theme="light"] .secteur-card:hover { border-color:rgba(14,26,62,.22); box-shadow:0 2px 6px rgba(60,35,12,.12),0 8px 32px rgba(60,35,12,.12); }

/* ─────────────────────────────────────────────────────────────────────────────
   § G. ICÔNES — Fond lin, couleurs Royal Stewart franches
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .svc-ic,
[data-theme="light"] .sit-ic,
[data-theme="light"] .te-icon,
[data-theme="light"] .te-icon-sm,
[data-theme="light"] .sw-icon,
[data-theme="light"] .sec-ico {
  background:      #EBEFF6;
  border-color:    rgba(88,55,22,.16);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow:      0 1px 3px rgba(60,35,12,.09);
}
/* Couleurs par rotation — franches, pas délavées */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1) .svc-ic { color:rgba(172,24,32,.88); border-color:rgba(172,24,32,.24); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2) .svc-ic { color:rgba(28,50,120,.80); border-color:rgba(14,26,62,.22); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3) .svc-ic { color:rgba(26,76,56,.78);  border-color:rgba(22,52,32,.20); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4) .svc-ic { color:rgba(122,90,4,.80);  border-color:rgba(154,114,16,.24); }
/* Hover fill — plein, solide, pas glowing */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1):hover .svc-ic { background:rgba(172,24,32,.92); color:#fff; border-color:rgba(172,24,32,.50); box-shadow:0 2px 10px rgba(172,24,32,.18); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2):hover .svc-ic { background:rgba(12,24,64,.88);  color:#fff; border-color:rgba(14,26,62,.44);  box-shadow:0 2px 10px rgba(14,26,62,.14); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3):hover .svc-ic { background:rgba(22,52,32,.88);  color:#fff; border-color:rgba(22,52,32,.44);  box-shadow:0 2px 10px rgba(22,52,32,.12); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4):hover .svc-ic { background:rgba(154,114,16,.88);color:#fff; border-color:rgba(154,114,16,.46);box-shadow:0 2px 10px rgba(154,114,16,.14); }
/* Logiciels */
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1) .sw-icon { color:rgba(172,24,32,.88); border-color:rgba(172,24,32,.24); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2) .sw-icon { color:rgba(28,50,120,.80); border-color:rgba(14,26,62,.22); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3) .sw-icon { color:rgba(26,76,56,.78);  border-color:rgba(22,52,32,.20); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1):hover .sw-icon { background:rgba(172,24,32,.92); color:#fff; box-shadow:0 2px 10px rgba(172,24,32,.16); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2):hover .sw-icon { background:rgba(12,24,64,.88);  color:#fff; box-shadow:0 2px 10px rgba(14,26,62,.12); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3):hover .sw-icon { background:rgba(22,52,32,.88);  color:#fff; box-shadow:0 2px 10px rgba(22,52,32,.10); }
/* Trust editorial + secteurs */
[data-theme="light"] .te-col-left .te-card-large .te-icon,
[data-theme="light"] .te-col-left .te-card-sm:not(:last-child) .te-icon { color:rgba(172,24,32,.88); border-color:rgba(172,24,32,.24); }
[data-theme="light"] .te-col-right .te-card-large .te-icon,
[data-theme="light"] .te-col-right .te-card-sm .te-icon               { color:rgba(28,50,120,.80); border-color:rgba(14,26,62,.22); }
[data-theme="light"] .te-col-left .te-card-sm:last-child .te-icon      { color:rgba(26,76,56,.78);  border-color:rgba(22,52,32,.20); }
[data-theme="light"] .te-col-right .te-card-large:hover .te-icon        { background:rgba(12,24,64,.88);  color:#fff; box-shadow:0 2px 10px rgba(14,26,62,.12); }
[data-theme="light"] .te-col-left .te-card-sm:last-child:hover .te-icon { background:rgba(22,52,32,.88);  color:#fff; box-shadow:0 2px 10px rgba(22,52,32,.10); }
[data-theme="light"] .sec-ico { color:rgba(28,50,120,.80); border-color:rgba(14,26,62,.22); }
[data-theme="light"] .secteur-card:hover .sec-ico { background:rgba(12,24,64,.88); color:#fff; box-shadow:0 2px 10px rgba(14,26,62,.12); }

/* ─────────────────────────────────────────────────────────────────────────────
   § H. SECTIONS — Teintes minimes, fond lin présent
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #services   { background:linear-gradient(180deg,var(--bg),rgba(172,24,32,.020)  50%,var(--bg)); }
[data-theme="light"] #logiciels  { background:linear-gradient(180deg,var(--bg),rgba(14,26,62,.018)   50%,var(--bg)); }
[data-theme="light"] #situations { background:linear-gradient(180deg,var(--bg),rgba(22,52,32,.016)   50%,var(--bg)); }
[data-theme="light"] #equipe     { background:linear-gradient(180deg,var(--bg),rgba(22,52,32,.016)   50%,var(--bg)); }
[data-theme="light"] #secteurs   { background:linear-gradient(180deg,var(--bg),rgba(14,26,62,.016)   50%,var(--bg)); }
[data-theme="light"] #contact    { background:linear-gradient(180deg,var(--bg),rgba(154,114,16,.014) 50%,var(--bg)); }
[data-theme="light"] #faq        { background:linear-gradient(180deg,var(--bg),rgba(172,24,32,.016)  50%,var(--bg)); }
[data-theme="light"] #temoignages{ background:var(--bg); }

/* ─────────────────────────────────────────────────────────────────────────────
   § I. TRUST BAR — Lin dense, icônes franches
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #trust-bar {
  background: rgba(228,217,198,.96);
  border-color: rgba(88,55,22,.12);
}
[data-theme="light"] .tb-veil {
  background:
    linear-gradient(90deg, rgba(228,217,198,.97), rgba(228,217,198,.82) 50%, rgba(228,217,198,.97));
}
[data-theme="light"] .tb-icon {
  background:   #EBEFF6;
  border-color: rgba(154,114,16,.28);
  color:        rgba(122,90,4,.88);
  box-shadow:   0 1px 4px rgba(60,35,12,.08);
}
[data-theme="light"] .tb-item:hover .tb-icon {
  background:   rgba(154,114,16,.14);
  border-color: rgba(154,114,16,.40);
  color:        #5E4600;
  box-shadow:   0 2px 8px rgba(154,114,16,.12);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § J. TICKER — Lin dense, séparateurs couleurs franches
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .ticker-wrap {
  background: rgba(228,217,198,.94);
  border-color: rgba(88,55,22,.12);
}
[data-theme="light"] .ticker-wrap::before { opacity: .14; }
[data-theme="light"] .ti       { color: rgba(88,62,38,.56); }
[data-theme="light"] .ti:hover { color: rgba(88,62,38,.88); }

/* ─────────────────────────────────────────────────────────────────────────────
   § K. PILL BAR — Lin translucide, selvedge chaud
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #pill {
  background:
    radial-gradient(ellipse 44% 88% at -2% 50%, rgba(172,24,32,.07), transparent 72%),
    rgba(237,228,210,.94);
  border-color: rgba(88,55,22,.14);
  box-shadow:
    0 8px 28px rgba(60,35,12,.12),
    0 1px 0 rgba(255,255,255,.40) inset,
    0 0 0 rgba(0,0,0,0);
  backdrop-filter: blur(20px) saturate(1.2);
}
[data-theme="light"] .pill-tartan .tartan-light {
  opacity: .06;
  filter: saturate(.18) brightness(.60) contrast(.94);
}
[data-theme="light"] .pill-tartan::after {
  background:
    linear-gradient(90deg,
      rgba(172,24,32,.16) 0 1.5px, rgba(154,114,16,.10) 1.5px 2.5px,
      rgba(14,26,62,.12) 2.5px 4px, rgba(22,52,32,.08) 4px 5px,
      transparent 5px 100%),
    linear-gradient(100deg, rgba(228,217,198,.14) 0%, transparent 40%);
}
[data-theme="light"] .pill-txt strong { color: var(--tx);  text-shadow: none; }
[data-theme="light"] .pill-txt span   { color: var(--tx3); }
[data-theme="light"] .pill-dl {
  box-shadow: 0 2px 12px rgba(172,24,32,.30), 0 1px 0 rgba(255,255,255,.22) inset;
}
[data-theme="light"] .pill-chat {
  background:   rgba(60,35,12,.06);
  border-color: rgba(60,35,12,.10);
  color:        var(--tx3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § L. CHATBOT — Lin dense, header riche
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #cb-win {
  background:   #F0E7D4;
  border-color: rgba(88,55,22,.13);
  box-shadow:
    0 20px 56px rgba(60,35,12,.16),
    0 4px 12px rgba(60,35,12,.10);
}
[data-theme="light"] .cb-head-tartan .tartan {
  filter:  saturate(.62) brightness(.76) contrast(1.06);
  opacity: .62;
}
/* Header overlay — dense mais pas blanc opaque */
[data-theme="light"] .cb-head-overlay {
  background:
    linear-gradient(90deg,
      rgba(172,24,32,.18) 0 2px, rgba(154,114,16,.11) 2px 3.5px,
      rgba(14,26,62,.12) 3.5px 5px, transparent 5px 100%),
    radial-gradient(ellipse 42% 50% at 100% 0%, rgba(14,26,62,.06), transparent 62%),
    linear-gradient(135deg, rgba(228,217,198,.82) 0%, rgba(218,205,182,.78) 50%, rgba(224,212,190,.82) 100%);
}
[data-theme="light"] .cb-head::after {
  background: linear-gradient(90deg,
    rgba(172,24,32,.22) 0%, rgba(154,114,16,.15) 22%,
    rgba(172,24,32,.18) 50%, rgba(14,26,62,.12) 78%, rgba(22,52,32,.10) 100%);
}
[data-theme="light"] .cb-m.bot .cb-bub {
  background:   #EBEFF6;
  border-color: rgba(88,55,22,.12);
  color:        var(--tx2);
}
[data-theme="light"] .cb-foot {
  background:
    linear-gradient(90deg, transparent 0%, rgba(172,24,32,.07) 20%, rgba(154,114,16,.05) 50%, transparent 78%)
    top / 100% 1px no-repeat,
    rgba(237,228,210,.60);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § M. FAQ — Cartes lin solides, selvedge fort
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .faq-item {
  background:   #F2E8D5;
  border-color: rgba(88,55,22,.11);
  box-shadow:   0 1px 4px rgba(60,35,12,.09), 0 4px 14px rgba(60,35,12,.07);
}
[data-theme="light"] .faq-item:hover {
  background:   #F5ECD8;
  border-color: rgba(172,24,32,.20);
  box-shadow:   0 2px 6px rgba(60,35,12,.11), 0 8px 24px rgba(60,35,12,.10);
}
[data-theme="light"] .faq-item.open { border-color:rgba(172,24,32,.24); }
[data-theme="light"] .faq-q:hover   { background:rgba(0,0,0,.025); }
[data-theme="light"] .faq-a-inner   { background:rgba(0,0,0,.025); border-top-color:rgba(88,55,22,.08); }

/* ─────────────────────────────────────────────────────────────────────────────
   § N. SITUATIONS — Lin solide, fade réduit
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .sit-bg .tartan-light {
  opacity: .06;
  filter: saturate(.14) brightness(.52) contrast(.90);
}
/* Fondu centre réduit — plus de brouillard blanc */
[data-theme="light"] .sit-bg-fade {
  background:
    radial-gradient(ellipse 100% 58% at 50% 50%, rgba(237,228,210,.44) 0%, transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%);
}
[data-theme="light"] .sit-path {
  background:   #F2E8D5;
  border-color: rgba(88,55,22,.11);
  box-shadow:   0 1px 4px rgba(60,35,12,.09), 0 4px 14px rgba(60,35,12,.07);
}
[data-theme="light"] .sit-path:hover {
  background:   #F5ECD8;
  border-color: rgba(172,24,32,.20);
  box-shadow:   0 2px 6px rgba(60,35,12,.11), 0 8px 24px rgba(60,35,12,.10);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § O. TÉMOIGNAGES — Lin, tartan présent
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .testi-tartan-bg .tartan {
  opacity: .36;
  filter: saturate(.70) brightness(.80) contrast(1.06);
}
[data-theme="light"] .testi-tartan-glow {
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(237,228,210,.50), transparent 68%);
}
[data-theme="light"] .testi-card {
  background:   #F2E8D5;
  border-color: rgba(88,55,22,.11);
  box-shadow:   0 1px 4px rgba(60,35,12,.09), 0 4px 18px rgba(60,35,12,.07);
}
[data-theme="light"] .testi-card:hover {
  background:   #F5ECD8;
  border-color: rgba(172,24,32,.20);
  box-shadow:   0 2px 6px rgba(60,35,12,.11), 0 10px 30px rgba(60,35,12,.11);
}
[data-theme="light"] .ts-arrow {
  background:   #EBEFF6;
  border-color: rgba(88,55,22,.14);
  color:        var(--tx2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § P. FOOTER — Lin feutré, pas de navy
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] footer {
  background:
    radial-gradient(ellipse 70% 32% at 50% 0%, rgba(172,24,32,.032), transparent 52%),
    var(--bg2);
  border-top: 1px solid rgba(88,55,22,.12);
}
[data-theme="light"] .ft-overlay { background:var(--bg2); opacity:.94; }
[data-theme="light"] .ft-col     { border-left-color: rgba(88,55,22,.09); }
[data-theme="light"] .ft-bottom  { border-top-color:  rgba(88,55,22,.09); }
[data-theme="light"] .ft-cert-badge {
  background:   rgba(242,232,213,.70);
  border-color: rgba(88,55,22,.14);
}
[data-theme="light"] .ft-cert-badge:hover {
  background:   rgba(242,232,213,.94);
  border-color: rgba(172,24,32,.22);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § Q. CI / PRICING — Lin solide
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .ci-card {
  background:   #F2E8D5;
  border-color: rgba(88,55,22,.11);
  box-shadow:   0 1px 4px rgba(60,35,12,.09), 0 4px 18px rgba(60,35,12,.07);
}
[data-theme="light"] .ci-card-mask {
  background:
    linear-gradient(135deg, rgba(242,232,213,.94), rgba(234,221,197,.88) 52%, rgba(242,232,213,.94)),
    radial-gradient(ellipse 88% 76% at 50% 0%, rgba(172,24,32,.052), transparent 64%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § R. FORMULAIRES — Lin chaud, focus mat
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .fi {
  background:   #EBEFF6;
  border-color: rgba(88,55,22,.15);
  color:        var(--tx);
}
[data-theme="light"] .fi:focus {
  border-color: rgba(172,24,32,.34);
  box-shadow:   0 0 0 3px rgba(172,24,32,.06);
  background:   #F2E8D5;
}
[data-theme="light"] .fi::placeholder { color:var(--tx3); }
[data-theme="light"] .c-sos { background:rgba(172,24,32,.052); border-color:rgba(172,24,32,.18); }

/* ─────────────────────────────────────────────────────────────────────────────
   § S. BOUTONS — Rouge franc, ombres mat
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .btn-r {
  background: rgba(172,24,32,.94);
  box-shadow: 0 2px 10px rgba(172,24,32,.24), 0 1px 3px rgba(172,24,32,.16);
}
[data-theme="light"] .btn-r:hover,
[data-theme="light"] .ci-btn:hover,
[data-theme="light"] .fbtn:hover {
  background: rgba(120,10,20,.96);
  box-shadow: 0 6px 22px rgba(172,24,32,.28), 0 0 0 1px rgba(154,114,16,.24) inset;
}
[data-theme="light"] #thBtn,
[data-theme="light"] #mbBtn,
[data-theme="light"] .btn-o {
  background:   rgba(237,228,210,.82);
  border-color: rgba(88,55,22,.16);
  color:        var(--tx2);
  box-shadow:   0 1px 3px rgba(60,35,12,.08);
}
[data-theme="light"] .btn-o:hover {
  background:   rgba(242,232,213,.96);
  border-color: rgba(172,24,32,.24);
  color:        var(--r);
  box-shadow:   0 3px 12px rgba(172,24,32,.10);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § T. BADGES + DIVERS
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .badge {
  background:   #EBEFF6;
  border-color: rgba(88,55,22,.14);
  color:        var(--tx2);
  box-shadow:   0 1px 3px rgba(60,35,12,.08);
}
[data-theme="light"] .secteur-card {
  background:   #F2E8D5;
  border-color: rgba(88,55,22,.11);
  box-shadow:   0 1px 4px rgba(60,35,12,.09), 0 4px 14px rgba(60,35,12,.07);
}


/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE v3 — Blanc premium · Apple × Burberry × Royal Stewart
   Diagnostic v2 : fond beige + règles DS3 à spécificité 1-2-0 qui battaient
   les overrides généraux → cartes quasi-transparentes = bug noir/blanc.
   Fix : fond blanc pur, spécificité ID pour cartes, zéro beige.
   ══════════════════════════════════════════════════════════════════════════════ */

/* § A. VARIABLES — Blanc pur, perle, gris premium · zéro beige */
[data-theme="light"] {
  --bg:  #F7F8F5;
  --bg2: #F0F1EE;
  --bg3: #E5E6E2;
  --bg4: #D8D9D4;
  --sf:  rgba(255,255,255,.60);
  --sf2: rgba(255,255,255,.80);
  --sf3: rgba(255,255,255,.92);
  --bd:  rgba(0,0,0,.07);
  --bd2: rgba(0,0,0,.12);
  --tx:  #111118;
  --tx2: #4A4A5C;
  --tx3: #8A8A9E;
  --sh:  0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
  --sh2: 0 2px 8px rgba(0,0,0,.07), 0 12px 40px rgba(0,0,0,.08);
  --gl:  rgba(247,248,245,.97);
  --r:     #B51C2C;
  --r-d:   #7E1220;
  --r-l:   #D0283A;
  --r-g:   rgba(181,28,44,.09);
  --r-g2:  rgba(181,28,44,.16);
  --r-s:   rgba(181,28,44,.06);
  --r-b:   rgba(181,28,44,.18);
  --r-txt: #8C1020;
  --rs-red:        #B51C2C;
  --rs-red-deep:   #7E1220;
  --rs-gold:       #8A6410;
  --rs-gold-soft:  rgba(138,100,16,.22);
  --rs-navy:       #0C1840;
  --rs-navy-soft:  rgba(12,24,64,.20);
  --rs-green:      #163420;
  --rs-green-soft: rgba(22,52,32,.20);
  --rs-ivory:      #F9F9F7;
  --rs-onyx:       #111118;
  --navy-hi:   #1A2E80;
  --forest-hi: #164A34;
  --gold-hi:   #6E5006;
  --navy-bg:   rgba(12,24,64,.05);
  --navy-bd:   rgba(12,24,64,.15);
  --forest-bg: rgba(22,52,32,.05);
  --forest-bd: rgba(22,52,32,.14);
}

/* § B. CORPS */
[data-theme="light"] body {
  background:
    radial-gradient(ellipse 70% 30% at 72% -5%, rgba(181,28,44,.028), transparent 56%),
    var(--bg);
  color: var(--tx);
}
[data-theme="light"] body::before { opacity: .08; }
[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 64% 28% at 72% -8%, rgba(181,28,44,.026), transparent 56%),
    linear-gradient(180deg, var(--bg), var(--bg2) 50%, var(--bg));
}

/* § C. TARTAN — Subtil sur fond blanc */
[data-theme="light"] .tartan {
  filter: saturate(.76) brightness(.88) contrast(1.08);
}
[data-theme="light"] .tartan-light {
  opacity: .36;
  mix-blend-mode: multiply;
  filter: saturate(.64) brightness(.84) contrast(1.06);
}
[data-theme="light"] .tartan::after { display: none; }

/* § D. NAVIGATION */
[data-theme="light"] #nav,
[data-theme="light"] #nav.scrolled {
  background: linear-gradient(180deg, rgba(247,248,245,.98), rgba(240,241,238,.96));
  border-bottom: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.80) inset, 0 4px 20px rgba(0,0,0,.07);
}
[data-theme="light"] .nav-a        { color: var(--tx2); }
[data-theme="light"] .nav-a:hover  { color: var(--r); background: rgba(181,28,44,.048); }
[data-theme="light"] .nav-a.active { color: var(--r); }
[data-theme="light"] #thBtn,
[data-theme="light"] #mbBtn,
[data-theme="light"] .btn-o {
  background:   rgba(255,255,255,.70);
  border-color: rgba(0,0,0,.10);
  color:        var(--tx2);
  box-shadow:   0 1px 3px rgba(0,0,0,.06);
}
[data-theme="light"] .btn-o:hover {
  background:   #fff;
  border-color: rgba(181,28,44,.20);
  color:        var(--r);
  box-shadow:   0 3px 12px rgba(181,28,44,.08);
  transform: translateY(-1px);
}

/* § E. HERO */
[data-theme="light"] #hero {
  background:
    radial-gradient(ellipse 46% 40% at 18% 44%, rgba(181,28,44,.038), transparent 62%),
    linear-gradient(108deg, var(--bg) 0%, var(--bg) 46%, var(--bg2) 100%);
}
[data-theme="light"] #hero::before {
  background:
    linear-gradient(90deg,
      rgba(247,248,245,.76) 0%,
      rgba(247,248,245,.48) 40%,
      rgba(247,248,245,.12) 68%,
      transparent 84%);
}
[data-theme="light"] .hero-tartan-panel::before { background: none; }
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(270deg,
    transparent 0%,
    rgba(247,248,245,.36) 55%,
    rgba(247,248,245,.74) 100%);
}
[data-theme="light"] .hero-tartan-glow {
  background:
    radial-gradient(ellipse 50% 40% at 66% 44%, rgba(138,100,16,.052), transparent 60%),
    radial-gradient(ellipse 36% 28% at 72% 60%, rgba(22,52,32,.040), transparent 60%);
}
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg, rgba(247,248,245,.46) 0%, transparent 20%);
}
[data-theme="light"] .hero-creds {
  background:   rgba(255,255,255,.72);
  border-color: rgba(0,0,0,.08);
  box-shadow:   0 4px 20px rgba(0,0,0,.08);
}

/* § F. CARTES — Blanc pur uniforme
   Spécificité ID (#services .svc-card = 1-2-0) pour écraser DS3 */
[data-theme="light"] .card,
[data-theme="light"] .svc-card,
[data-theme="light"] .trust-card,
[data-theme="light"] .secteur-card,
[data-theme="light"] .te-card-large,
[data-theme="light"] .te-card-sm,
[data-theme="light"] .te-card-row,
[data-theme="light"] .sw-card,
[data-theme="light"] .team-card,
[data-theme="light"] .cblk,
[data-theme="light"] .ct-card,
[data-theme="light"] .ct-form,
[data-theme="light"] .legal-info-card,
[data-theme="light"] .ck-card,
[data-theme="light"] .testi-card {
  background:   #FFFFFF;
  border-color: rgba(0,0,0,.07);
  box-shadow:   0 1px 3px rgba(0,0,0,.05), 0 4px 18px rgba(0,0,0,.06);
}
/* Sélecteurs ID — spécificité 1-2-0 pour écraser les règles DS3 */
[data-theme="light"] #services .svc-card,
[data-theme="light"] #services .card {
  background: #FFFFFF; border-color:rgba(0,0,0,.07);
  box-shadow: 0 1px 3px rgba(0,0,0,.05),0 4px 18px rgba(0,0,0,.06);
}
[data-theme="light"] #logiciels .sw-card {
  background: #FFFFFF; border-color:rgba(0,0,0,.07);
  box-shadow: 0 1px 3px rgba(0,0,0,.05),0 4px 18px rgba(0,0,0,.06);
}
[data-theme="light"] #contact .ct-card,
[data-theme="light"] #contact .ct-form  { background:#FFFFFF; border-color:rgba(0,0,0,.07); }
[data-theme="light"] #trust .te-card-large,
[data-theme="light"] #trust .te-card-sm,
[data-theme="light"] #trust .te-card-row { background:#FFFFFF; border-color:rgba(0,0,0,.07); }
/* Hover universel */
[data-theme="light"] .card:hover,
[data-theme="light"] .svc-card:hover,
[data-theme="light"] .trust-card:hover,
[data-theme="light"] .secteur-card:hover,
[data-theme="light"] .te-card-large:hover,
[data-theme="light"] .te-card-sm:hover,
[data-theme="light"] .sw-card:hover,
[data-theme="light"] .team-card:hover,
[data-theme="light"] .testi-card:hover {
  background:   #FFFFFF;
  border-color: rgba(181,28,44,.16);
  box-shadow:   0 2px 6px rgba(0,0,0,.07), 0 10px 36px rgba(0,0,0,.09);
  transform:    translateY(-2px);
}
[data-theme="light"] #services .svc-card:hover  { background:#FFFFFF; border-color:rgba(181,28,44,.18); box-shadow:0 2px 6px rgba(0,0,0,.07),0 10px 36px rgba(0,0,0,.10); transform:translateY(-2px); }
[data-theme="light"] #logiciels .sw-card:hover   { background:#FFFFFF; border-color:rgba(181,28,44,.16); box-shadow:0 2px 6px rgba(0,0,0,.07),0 10px 36px rgba(0,0,0,.09); transform:translateY(-2px); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1):hover { border-color:rgba(181,28,44,.18); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2):hover { border-color:rgba(12,24,64,.16); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3):hover { border-color:rgba(22,52,32,.14); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4):hover { border-color:rgba(138,100,16,.16); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1):hover   { border-color:rgba(181,28,44,.18); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2):hover   { border-color:rgba(12,24,64,.16); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3):hover   { border-color:rgba(22,52,32,.14); }
/* Selvedge réduit sur fond blanc */
[data-theme="light"] .faq-item::before,
[data-theme="light"] .sit-path::before { opacity: .52; }

/* § G. ICÔNES — Fond blanc, couleurs Stewart sobres */
[data-theme="light"] .svc-ic,
[data-theme="light"] .sit-ic,
[data-theme="light"] .te-icon,
[data-theme="light"] .te-icon-sm,
[data-theme="light"] .sw-icon,
[data-theme="light"] .sec-ico {
  background: #F7F8F5; border-color:rgba(0,0,0,.10);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1) .svc-ic { color:rgba(181,28,44,.80); border-color:rgba(181,28,44,.18); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2) .svc-ic { color:rgba(26,46,128,.72); border-color:rgba(12,24,64,.16); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3) .svc-ic { color:rgba(22,74,52,.72);  border-color:rgba(22,52,32,.15); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4) .svc-ic { color:rgba(110,80,6,.72);  border-color:rgba(138,100,16,.18); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1):hover .svc-ic { background:rgba(181,28,44,.90); color:#fff; border-color:rgba(181,28,44,.40); box-shadow:0 2px 10px rgba(181,28,44,.16); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2):hover .svc-ic { background:rgba(12,24,64,.86);  color:#fff; border-color:rgba(12,24,64,.36);  box-shadow:0 2px 10px rgba(12,24,64,.12); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3):hover .svc-ic { background:rgba(22,52,32,.86);  color:#fff; border-color:rgba(22,52,32,.36);  box-shadow:0 2px 10px rgba(22,52,32,.10); }
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4):hover .svc-ic { background:rgba(138,100,16,.86);color:#fff; border-color:rgba(138,100,16,.38);box-shadow:0 2px 10px rgba(138,100,16,.12); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1) .sw-icon { color:rgba(181,28,44,.80); border-color:rgba(181,28,44,.18); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2) .sw-icon { color:rgba(26,46,128,.72); border-color:rgba(12,24,64,.16); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3) .sw-icon { color:rgba(22,74,52,.72);  border-color:rgba(22,52,32,.15); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1):hover .sw-icon { background:rgba(181,28,44,.90); color:#fff; box-shadow:0 2px 8px rgba(181,28,44,.14); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2):hover .sw-icon { background:rgba(12,24,64,.86);  color:#fff; box-shadow:0 2px 8px rgba(12,24,64,.10); }
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3):hover .sw-icon { background:rgba(22,52,32,.86);  color:#fff; box-shadow:0 2px 8px rgba(22,52,32,.08); }
[data-theme="light"] .te-col-left .te-card-large .te-icon,
[data-theme="light"] .te-col-left .te-card-sm:not(:last-child) .te-icon { color:rgba(181,28,44,.80); border-color:rgba(181,28,44,.18); }
[data-theme="light"] .te-col-right .te-card-large .te-icon,
[data-theme="light"] .te-col-right .te-card-sm .te-icon                { color:rgba(26,46,128,.72); border-color:rgba(12,24,64,.16); }
[data-theme="light"] .te-col-left .te-card-sm:last-child .te-icon       { color:rgba(22,74,52,.72);  border-color:rgba(22,52,32,.15); }
[data-theme="light"] .te-col-right .te-card-large:hover .te-icon         { background:rgba(12,24,64,.86);  color:#fff; }
[data-theme="light"] .te-col-left .te-card-sm:last-child:hover .te-icon  { background:rgba(22,52,32,.86);  color:#fff; }
[data-theme="light"] .sec-ico { color:rgba(26,46,128,.72); border-color:rgba(12,24,64,.16); }
[data-theme="light"] .secteur-card:hover .sec-ico { background:rgba(12,24,64,.86); color:#fff; }
[data-theme="light"] .ci-step:nth-child(odd)  .ci-sn { color:rgba(26,46,128,.80); border-color:rgba(12,24,64,.18); background:rgba(12,24,64,.05); }
[data-theme="light"] .ci-step:nth-child(even) .ci-sn { color:rgba(181,28,44,.80); border-color:rgba(181,28,44,.18); background:rgba(181,28,44,.05); }

/* § H. SECTIONS */
[data-theme="light"] #services   { background:linear-gradient(180deg,var(--bg),rgba(181,28,44,.016)  50%,var(--bg)); }
[data-theme="light"] #logiciels  { background:linear-gradient(180deg,var(--bg),rgba(12,24,64,.014)   50%,var(--bg)); }
[data-theme="light"] #situations { background:linear-gradient(180deg,var(--bg),rgba(22,52,32,.013)   50%,var(--bg)); }
[data-theme="light"] #equipe     { background:linear-gradient(180deg,var(--bg),rgba(22,52,32,.013)   50%,var(--bg)); }
[data-theme="light"] #secteurs   { background:linear-gradient(180deg,var(--bg),rgba(12,24,64,.013)   50%,var(--bg)); }
[data-theme="light"] #contact    { background:linear-gradient(180deg,var(--bg),rgba(138,100,16,.011) 50%,var(--bg)); }
[data-theme="light"] #faq        { background:linear-gradient(180deg,var(--bg),rgba(181,28,44,.013)  50%,var(--bg)); }
[data-theme="light"] #temoignages{ background:var(--bg); }

/* § I. TRUST BAR */
[data-theme="light"] #trust-bar  { background:rgba(240,241,238,.96); border-color:rgba(0,0,0,.07); }
[data-theme="light"] .tb-veil    { background:linear-gradient(90deg,rgba(240,241,238,.97),rgba(240,241,238,.82) 50%,rgba(240,241,238,.97)); }
[data-theme="light"] .tb-icon    { background:#FFFFFF; border-color:rgba(138,100,16,.24); color:rgba(110,80,6,.82); box-shadow:0 1px 4px rgba(0,0,0,.06); }
[data-theme="light"] .tb-item:hover .tb-icon { background:rgba(138,100,16,.09); border-color:rgba(138,100,16,.34); color:#5E4400; }
[data-theme="light"] .tb-title   { color:var(--tx); }
[data-theme="light"] .tb-text    { color:var(--tx2); }

/* § J. TICKER */
[data-theme="light"] .ticker-wrap         { background:rgba(240,241,238,.94); border-color:rgba(0,0,0,.07); }
[data-theme="light"] .ticker-wrap::before { opacity:.10; }
[data-theme="light"] .ti                  { color:rgba(74,74,92,.52); }
[data-theme="light"] .ti:hover            { color:rgba(74,74,92,.88); }
[data-theme="light"] .ticker-track .ti:nth-child(4n+1)::before { background:rgba(181,28,44,.52); }
[data-theme="light"] .ticker-track .ti:nth-child(4n+2)::before { background:rgba(12,24,64,.46); }
[data-theme="light"] .ticker-track .ti:nth-child(4n+3)::before { background:rgba(22,52,32,.42); }
[data-theme="light"] .ticker-track .ti:nth-child(4n+4)::before { background:rgba(138,100,16,.40); }

/* § K. PILL BAR */
[data-theme="light"] #pill {
  background: radial-gradient(ellipse 44% 88% at -2% 50%, rgba(181,28,44,.054), transparent 72%), rgba(247,248,245,.94);
  border-color:rgba(0,0,0,.09);
  box-shadow: 0 8px 28px rgba(0,0,0,.09), 0 1px 0 rgba(255,255,255,.90) inset;
  backdrop-filter:blur(20px) saturate(1.2);
}
[data-theme="light"] .pill-tartan .tartan-light { opacity:.06; filter:saturate(.16) brightness(.60); }
[data-theme="light"] .pill-txt strong { color:var(--tx); text-shadow:none; }
[data-theme="light"] .pill-txt span   { color:var(--tx3); }
[data-theme="light"] .pill-chat { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); color:var(--tx3); }
[data-theme="light"] .pill-dl   { box-shadow:0 2px 12px rgba(181,28,44,.28), 0 1px 0 rgba(255,255,255,.18) inset; }

/* § L. CHATBOT */
[data-theme="light"] #cb-win {
  background:#FFFFFF; border-color:rgba(0,0,0,.09);
  box-shadow:0 20px 56px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.07);
}
[data-theme="light"] .cb-head-tartan .tartan { filter:saturate(.62) brightness(.80) contrast(1.06); opacity:.58; }
[data-theme="light"] .cb-head-overlay {
  background:
    linear-gradient(90deg,rgba(181,28,44,.16) 0 2px,rgba(138,100,16,.10) 2px 3.5px,rgba(12,24,64,.12) 3.5px 5px,transparent 5px 100%),
    linear-gradient(135deg,rgba(247,248,245,.84) 0%,rgba(238,240,236,.80) 50%,rgba(244,245,242,.84) 100%);
}
[data-theme="light"] .cb-head::after {
  background:linear-gradient(90deg,rgba(181,28,44,.20) 0%,rgba(138,100,16,.13) 22%,rgba(181,28,44,.16) 50%,rgba(12,24,64,.10) 78%,rgba(22,52,32,.08) 100%);
}
[data-theme="light"] .cb-m.bot .cb-bub { background:#F7F8F5; border-color:rgba(0,0,0,.07); color:var(--tx2); }
[data-theme="light"] .cb-quick    { background:transparent; border-top-color:rgba(0,0,0,.06); }
[data-theme="light"] .cb-qb       { color:rgba(74,74,92,.56); border-color:rgba(0,0,0,.07); }
[data-theme="light"] .cb-qb:hover { border-color:rgba(12,24,64,.18); color:rgba(12,24,64,.82); background:rgba(12,24,64,.04); }
[data-theme="light"] .cb-foot {
  background:
    linear-gradient(90deg,transparent,rgba(181,28,44,.06) 20%,rgba(138,100,16,.05) 50%,transparent 78%)
    top / 100% 1px no-repeat,
    rgba(247,248,245,.50);
}
[data-theme="light"] #cbInp:focus { border-color:rgba(181,28,44,.28); box-shadow:0 0 0 3px rgba(181,28,44,.06); }

/* § M. FAQ */
[data-theme="light"] .faq-item { background:#FFFFFF; border-color:rgba(0,0,0,.07); box-shadow:0 1px 3px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.06); }
[data-theme="light"] .faq-item:nth-child(4n+2) { border-color:rgba(12,24,64,.07); }
[data-theme="light"] .faq-item:nth-child(4n+3) { border-color:rgba(22,52,32,.06); }
[data-theme="light"] .faq-item:nth-child(4n+4) { border-color:rgba(138,100,16,.07); }
[data-theme="light"] .faq-item:hover  { background:#FFFFFF; border-color:rgba(181,28,44,.16); box-shadow:0 2px 6px rgba(0,0,0,.07),0 8px 24px rgba(0,0,0,.08); }
[data-theme="light"] .faq-item.open   { border-color:rgba(181,28,44,.20); }
[data-theme="light"] .faq-q:hover     { background:rgba(0,0,0,.018); }
[data-theme="light"] .faq-qt          { color:rgba(17,17,24,.82); }
[data-theme="light"] .faq-q[aria-expanded="true"] .faq-qt,
[data-theme="light"] .faq-item.open .faq-qt { color:rgba(17,17,24,.94); }
[data-theme="light"] .faq-icon { background:rgba(12,24,64,.07); border-color:rgba(12,24,64,.16); color:rgba(26,46,128,.52); }
[data-theme="light"] .faq-q:hover .faq-icon { background:rgba(12,24,64,.11); border-color:rgba(12,24,64,.24); color:rgba(26,46,128,.78); }
[data-theme="light"] .faq-a-inner { color:rgba(74,74,92,.68); border-top-color:rgba(0,0,0,.05); background:rgba(0,0,0,.016); }

/* § N. SITUATIONS */
[data-theme="light"] .sit-bg .tartan-light { opacity:.06; filter:saturate(.14) brightness(.55) contrast(.92); }
[data-theme="light"] .sit-bg-fade {
  background: radial-gradient(ellipse 100% 55% at 50% 50%,rgba(247,248,245,.42) 0%,transparent 62%),linear-gradient(180deg,var(--bg) 0%,transparent 16%,transparent 84%,var(--bg) 100%);
}
[data-theme="light"] .sit-path { background:#FFFFFF; border-color:rgba(0,0,0,.07); box-shadow:0 1px 3px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.06); }
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2) { border-color:rgba(12,24,64,.07); }
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3) { border-color:rgba(22,52,32,.06); }
[data-theme="light"] .sit-path-ic { background:rgba(181,28,44,.07); border-color:rgba(181,28,44,.15); color:rgba(181,28,44,.76); }
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2) .sit-path-ic { background:rgba(12,24,64,.06); border-color:rgba(12,24,64,.14); color:rgba(26,46,128,.70); }
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3) .sit-path-ic { background:rgba(22,52,32,.06); border-color:rgba(22,52,32,.13); color:rgba(22,74,52,.68); }
[data-theme="light"] .sit-path-t { color:rgba(17,17,24,.82); }
[data-theme="light"] .sit-path-d { color:rgba(74,74,92,.58); }
[data-theme="light"] .sit-path:hover { background:#FFFFFF; border-color:rgba(181,28,44,.16); box-shadow:0 2px 6px rgba(0,0,0,.07),0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
[data-theme="light"] .sit-path:hover .sit-path-t  { color:rgba(181,28,44,.90); }
[data-theme="light"] .sit-path:hover .sit-path-ic { background:rgba(181,28,44,.12); border-color:rgba(181,28,44,.24); color:rgba(181,28,44,.92); transform:scale(1.08); }

/* § O. TEMOIGNAGES */
[data-theme="light"] .testi-tartan-bg .tartan { opacity:.28; filter:saturate(.64) brightness(.86) contrast(1.05); }
[data-theme="light"] .testi-tartan-glow { background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(247,248,245,.46),transparent 66%); }
[data-theme="light"] .testi-card { background:#FFFFFF; border-color:rgba(0,0,0,.07); box-shadow:0 1px 3px rgba(0,0,0,.05),0 4px 18px rgba(0,0,0,.06); }
[data-theme="light"] .testi-card:hover { background:#FFFFFF; border-color:rgba(181,28,44,.16); box-shadow:0 2px 6px rgba(0,0,0,.07),0 10px 32px rgba(0,0,0,.09); }
[data-theme="light"] .ts-arrow { background:#FFFFFF; border-color:rgba(0,0,0,.09); color:var(--tx2); box-shadow:0 2px 8px rgba(0,0,0,.07); }
[data-theme="light"] .ts-arrow:hover { background:var(--r); border-color:var(--r); color:#fff; }

/* § P. ZONES */
[data-theme="light"] #zones { background:radial-gradient(ellipse 90% 44% at 50% 0%,rgba(181,28,44,.028),transparent 54%),var(--bg); }
[data-theme="light"] .zn-head .h2     { color:var(--tx); }
[data-theme="light"] .zn-head .body-l { color:var(--tx2); }
[data-theme="light"] .zn-list li { color:var(--r); text-shadow:none; }

/* § Q. FOOTER */
[data-theme="light"] footer {
  background: radial-gradient(ellipse 70% 28% at 50% 0%,rgba(181,28,44,.022),transparent 50%),var(--bg2);
  border-top:1px solid rgba(0,0,0,.07);
}
[data-theme="light"] .ft-overlay    { background:var(--bg2); opacity:.96; }
[data-theme="light"] .ft-col        { border-left-color:rgba(0,0,0,.06); }
[data-theme="light"] .ft-bottom     { border-top-color:rgba(0,0,0,.06); }
[data-theme="light"] .ft-cert-badge { background:rgba(255,255,255,.72); border-color:rgba(0,0,0,.09); }
[data-theme="light"] .ft-cert-badge:hover { background:#FFFFFF; border-color:rgba(181,28,44,.18); }

/* § R. CI PRICING */
[data-theme="light"] .ci-card { background:#FFFFFF; border-color:rgba(0,0,0,.07); box-shadow:0 1px 3px rgba(0,0,0,.05),0 4px 18px rgba(0,0,0,.06); }
[data-theme="light"] .ci-card-mask {
  background:
    linear-gradient(135deg,rgba(255,255,255,.94),rgba(247,248,245,.88) 52%,rgba(255,255,255,.94)),
    radial-gradient(ellipse 86% 72% at 50% 0%,rgba(181,28,44,.042),transparent 62%);
}

/* § S. FORMULAIRES */
[data-theme="light"] .fi { background:#FFFFFF; border-color:rgba(0,0,0,.12); color:var(--tx); }
[data-theme="light"] .fi:focus { border-color:rgba(181,28,44,.32); box-shadow:0 0 0 3px rgba(181,28,44,.06); background:#FFFFFF; }
[data-theme="light"] .fi::placeholder { color:var(--tx3); }
[data-theme="light"] .c-sos { background:rgba(181,28,44,.045); border-color:rgba(181,28,44,.16); }

/* § T. BOUTONS */
[data-theme="light"] .btn-r { background:var(--r); box-shadow:0 2px 10px rgba(181,28,44,.22),0 1px 3px rgba(181,28,44,.14); }
[data-theme="light"] .btn-r:hover,
[data-theme="light"] .ci-btn:hover,
[data-theme="light"] .fbtn:hover { background:var(--r-d); box-shadow:0 6px 20px rgba(181,28,44,.26),0 0 0 1px rgba(138,100,16,.22) inset; }

/* § U. BADGES + SECTEUR CARD */
[data-theme="light"] .badge { background:#F7F8F5; border-color:rgba(0,0,0,.09); color:var(--tx2); box-shadow:0 1px 3px rgba(0,0,0,.05); }
[data-theme="light"] .secteur-card { background:#FFFFFF; border-color:rgba(0,0,0,.07); box-shadow:0 1px 3px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.06); }

/* § V. TYPOGRAPHIE + SCROLLBAR */
[data-theme="light"] .disp em { color:var(--r); text-shadow:0 2px 12px rgba(181,28,44,.08); }
[data-theme="light"] .eye     { color:rgba(110,80,6,.82); }
[data-theme="light"] .eye::before {
  background:linear-gradient(90deg,var(--rs-gold) 0%,var(--rs-gold) 38%,rgba(12,24,64,.44) 38%,rgba(12,24,64,.44) 44%,var(--r) 44%,var(--r) 100%);
}
[data-theme="light"] *::-webkit-scrollbar-track { background:var(--bg2); }
[data-theme="light"] *::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,var(--rs-gold) 0%,var(--r) 55%,var(--rs-red-deep) 100%);
  border-color:var(--bg2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE v4 — Royal Stewart sous lumière naturelle
   Direction : Burberry flagship × tailoring écossais × editorial premium
   Système   : Stewart palette comme lumière et accents chromatiques
   Base      : blanc perle #F7F7F5, cartes #FFFFFF, accents tartan
   Technique : inset 0 2px 0 [color] = accent top par carte
               colored shadows on hover = richesse visuelle
               multiply tartan sur blanc = couleurs vraies
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   § A. VARIABLES — Système Royal Stewart
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:   #F7F7F5;
  --bg2:  #F0F0EE;
  --bg3:  #E4E4E0;
  --bg4:  #D5D5D0;
  --sf:   rgba(255,255,255,.95);
  --bd:   rgba(0,0,0,.07);
  --bd2:  rgba(0,0,0,.12);
  --tx:   #0D0D14;
  --tx2:  #38384A;
  --tx3:  #7E7E90;
  --gl:   rgba(247,247,245,.97);
  /* Stewart actifs */
  --r:         #B51C2C;
  --r-d:       #7E1220;
  --rs-red:       #B51C2C;
  --rs-red-deep:  #7E1220;
  --rs-gold:      #8A6410;
  --rs-navy:      #0C1840;
  --rs-green:     #163420;
  --navy-hi:      #1A2E80;
  --forest-hi:    #164A34;
  --gold-hi:      #6E5006;
}

/* ─────────────────────────────────────────────────────────────────────────────
   § B. BASE — Fond vivant, halos stewart imperceptibles
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] body {
  background:
    radial-gradient(ellipse 70% 40% at 50% -8%,  rgba(181,28,44,.032),  transparent 60%),
    radial-gradient(ellipse 50% 30% at -10% 60%, rgba(12,24,64,.026),   transparent 55%),
    radial-gradient(ellipse 40% 28% at 110% 80%, rgba(22,52,32,.022),   transparent 55%),
    var(--bg);
  color: var(--tx);
}
[data-theme="light"] body::before {
  opacity: .09;
  mix-blend-mode: multiply;
}

/* ─────────────────────────────────────────────────────────────────────────────
   § C. TARTAN — Multiply sur blanc : couleurs Stewart vraies
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .tartan {
  filter:  saturate(.88) brightness(.78) contrast(1.14);
  opacity: 1;
}
[data-theme="light"] .tartan-light {
  opacity:          .38;
  mix-blend-mode:   multiply;
  filter:           saturate(.76) brightness(.80) contrast(1.10);
}
[data-theme="light"] .tartan::after {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   § D. NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #nav,
[data-theme="light"] #nav.scrolled {
  background:   rgba(247,247,245,.97);
  border-bottom: 1px solid rgba(0,0,0,.07);
  box-shadow:
    0 1px 0   rgba(0,0,0,.04),
    0 4px 24px rgba(0,0,0,.07);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
}
[data-theme="light"] .nav-link       { color: var(--tx2); }
[data-theme="light"] .nav-link:hover { color: var(--tx);  }
[data-theme="light"] .nav-link.active { color: var(--r);  }

/* ─────────────────────────────────────────────────────────────────────────────
   § E. HÉRO — Tartan visible, fog minimal
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #hero {
  background:
    radial-gradient(ellipse 48% 44% at 16% 44%, rgba(181,28,44,.05), transparent 62%),
    linear-gradient(110deg, var(--bg) 0%, var(--bg) 48%, var(--bg2) 100%);
}
[data-theme="light"] #hero::before {
  background:
    linear-gradient(90deg,
      rgba(247,247,245,.72) 0%,
      rgba(247,247,245,.44) 40%,
      rgba(247,247,245,.12) 68%,
      transparent 84%);
}
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(270deg,
    transparent 0%,
    rgba(247,247,245,.36) 55%,
    rgba(247,247,245,.68) 100%);
}
[data-theme="light"] .hero-tartan-glow {
  background:
    radial-gradient(ellipse 52% 42% at 66% 44%, rgba(138,100,16,.07), transparent 62%),
    radial-gradient(ellipse 38% 30% at 72% 60%, rgba(22,52,32,.06),   transparent 62%);
}
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg, rgba(247,247,245,.48) 0%, transparent 22%);
}
[data-theme="light"] .hero-creds {
  background:   rgba(255,255,255,.82);
  border-color: rgba(0,0,0,.08);
  box-shadow:   0 6px 24px rgba(0,0,0,.08);
}
[data-theme="light"] .hero-creds .cred-val   { color: var(--tx);  }
[data-theme="light"] .hero-creds .cred-label { color: var(--tx3); }

/* ─────────────────────────────────────────────────────────────────────────────
   § F. CARTES — Système chromatique Royal Stewart
   Technique : inset 0 2px 0 [color] = accent top couleur
               box-shadow colorée au hover = richesse visuelle
   ───────────────────────────────────────────────────────────────────────────── */

/* Base universelle — blanc pur, ombre naturelle */
[data-theme="light"] .card,
[data-theme="light"] .svc-card,
[data-theme="light"] .trust-card,
[data-theme="light"] .secteur-card,
[data-theme="light"] .te-card-large,
[data-theme="light"] .te-card-sm,
[data-theme="light"] .te-card-row,
[data-theme="light"] .sw-card,
[data-theme="light"] .team-card,
[data-theme="light"] .cblk,
[data-theme="light"] .ct-card,
[data-theme="light"] .ct-form,
[data-theme="light"] .legal-info-card,
[data-theme="light"] .ck-card,
[data-theme="light"] .faq-item {
  background:   #FFFFFF;
  border-color: rgba(0,0,0,.07);
  box-shadow:
    0 1px 2px  rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}

/* Services — accent top Stewart par rotation 4 couleurs */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1) {
  box-shadow:
    inset 0 2px 0 rgba(181,28,44,.54),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2) {
  box-shadow:
    inset 0 2px 0 rgba(12,24,64,.48),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3) {
  box-shadow:
    inset 0 2px 0 rgba(22,52,32,.46),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4) {
  box-shadow:
    inset 0 2px 0 rgba(138,100,16,.48),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}

/* Logiciels — accent top Stewart 3 couleurs */
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1) {
  box-shadow:
    inset 0 2px 0 rgba(181,28,44,.54),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2) {
  box-shadow:
    inset 0 2px 0 rgba(12,24,64,.48),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3) {
  box-shadow:
    inset 0 2px 0 rgba(22,52,32,.46),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}

/* Hover universel */
[data-theme="light"] .card:hover,
[data-theme="light"] .svc-card:hover,
[data-theme="light"] .trust-card:hover,
[data-theme="light"] .te-card-large:hover,
[data-theme="light"] .te-card-sm:hover,
[data-theme="light"] .sw-card:hover,
[data-theme="light"] .team-card:hover {
  background:   #FFFFFF;
  border-color: rgba(0,0,0,.09);
  box-shadow:
    0 2px 4px  rgba(0,0,0,.05),
    0 12px 40px rgba(0,0,0,.10);
  transform: translateY(-3px);
}

/* Hover services — ombre COLORÉE Stewart = richesse visuelle */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1):hover {
  border-color: rgba(181,28,44,.14);
  box-shadow:
    inset 0 2px 0 rgba(181,28,44,.68),
    0 2px 6px  rgba(181,28,44,.08),
    0 14px 44px rgba(181,28,44,.13);
  transform: translateY(-3px);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2):hover {
  border-color: rgba(12,24,64,.12);
  box-shadow:
    inset 0 2px 0 rgba(12,24,64,.62),
    0 2px 6px  rgba(12,24,64,.07),
    0 14px 44px rgba(12,24,64,.11);
  transform: translateY(-3px);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3):hover {
  border-color: rgba(22,52,32,.12);
  box-shadow:
    inset 0 2px 0 rgba(22,52,32,.60),
    0 2px 6px  rgba(22,52,32,.07),
    0 14px 44px rgba(22,52,32,.11);
  transform: translateY(-3px);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4):hover {
  border-color: rgba(138,100,16,.12);
  box-shadow:
    inset 0 2px 0 rgba(138,100,16,.62),
    0 2px 6px  rgba(138,100,16,.07),
    0 14px 44px rgba(138,100,16,.12);
  transform: translateY(-3px);
}

/* Hover logiciels */
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1):hover {
  border-color: rgba(181,28,44,.14);
  box-shadow:
    inset 0 2px 0 rgba(181,28,44,.65),
    0 14px 44px rgba(181,28,44,.12);
  transform: translateY(-3px);
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2):hover {
  border-color: rgba(12,24,64,.12);
  box-shadow:
    inset 0 2px 0 rgba(12,24,64,.58),
    0 14px 44px rgba(12,24,64,.10);
  transform: translateY(-3px);
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3):hover {
  border-color: rgba(22,52,32,.12);
  box-shadow:
    inset 0 2px 0 rgba(22,52,32,.56),
    0 14px 44px rgba(22,52,32,.10);
  transform: translateY(-3px);
}

[data-theme="light"] .secteur-card:hover {
  border-color: rgba(12,24,64,.12);
  box-shadow:
    0 2px 4px rgba(0,0,0,.05),
    0 12px 40px rgba(12,24,64,.10);
  transform: translateY(-3px);
}

/* Selvedge gauche — visible et vivant sur blanc */
[data-theme="light"] .svc-card::before,
[data-theme="light"] .sw-card::before,
[data-theme="light"] .faq-item::before,
[data-theme="light"] .sit-path::before {
  opacity: .60;
}

/* ─────────────────────────────────────────────────────────────────────────────
   § G. OVERRIDE DS3 — Spécificité 1-2-0, position finale gagne
   Ces règles matchent EXACTEMENT [data-theme=light] #id .class du bloc DS3
   Étant en FIN de fichier, elles gagnent par position à spécificité égale
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #services .svc-card,
[data-theme="light"] #services .card {
  background:   #FFFFFF;
  border-color: rgba(0,0,0,.07);
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+1) {
  box-shadow:
    inset 0 2px 0 rgba(181,28,44,.54),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+2) {
  box-shadow:
    inset 0 2px 0 rgba(12,24,64,.48),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+3) {
  box-shadow:
    inset 0 2px 0 rgba(22,52,32,.46),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+4) {
  box-shadow:
    inset 0 2px 0 rgba(138,100,16,.48),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] #logiciels .sw-card {
  background:   #FFFFFF;
  border-color: rgba(0,0,0,.07);
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+1) {
  box-shadow:
    inset 0 2px 0 rgba(181,28,44,.54),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+2) {
  box-shadow:
    inset 0 2px 0 rgba(12,24,64,.48),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+3) {
  box-shadow:
    inset 0 2px 0 rgba(22,52,32,.46),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § H. ICÔNES — Stewart palette franche, pas gris fade
   ───────────────────────────────────────────────────────────────────────────── */
/* Base reset */
[data-theme="light"] .svc-ic,
[data-theme="light"] .sit-ic,
[data-theme="light"] .te-icon,
[data-theme="light"] .te-icon-sm,
[data-theme="light"] .sw-icon,
[data-theme="light"] .sec-ico {
  background:       rgba(0,0,0,.04);
  border-color:     rgba(0,0,0,.10);
  backdrop-filter:  none;
  -webkit-backdrop-filter: none;
  box-shadow:       none;
}

/* Icônes services — couleurs Stewart franches */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1) .svc-ic {
  background:   rgba(181,28,44,.09);
  border-color: rgba(181,28,44,.22);
  color:        #B51C2C;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2) .svc-ic {
  background:   rgba(12,24,64,.08);
  border-color: rgba(12,24,64,.20);
  color:        #1A2E80;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3) .svc-ic {
  background:   rgba(22,52,32,.08);
  border-color: rgba(22,52,32,.20);
  color:        #164A34;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4) .svc-ic {
  background:   rgba(138,100,16,.08);
  border-color: rgba(138,100,16,.22);
  color:        #6E5006;
}

/* Hover icônes services — remplissage solide premium */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1):hover .svc-ic {
  background:   #B51C2C;
  color:        #FFFFFF;
  border-color: rgba(181,28,44,.50);
  box-shadow:   0 4px 14px rgba(181,28,44,.30);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2):hover .svc-ic {
  background:   #0C1840;
  color:        #FFFFFF;
  border-color: rgba(12,24,64,.46);
  box-shadow:   0 4px 14px rgba(12,24,64,.24);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3):hover .svc-ic {
  background:   #163420;
  color:        #FFFFFF;
  border-color: rgba(22,52,32,.46);
  box-shadow:   0 4px 14px rgba(22,52,32,.22);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4):hover .svc-ic {
  background:   #6E5006;
  color:        #FFFFFF;
  border-color: rgba(138,100,16,.46);
  box-shadow:   0 4px 14px rgba(138,100,16,.24);
}

/* Icônes logiciels */
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1) .sw-icon {
  background: rgba(181,28,44,.09); border-color: rgba(181,28,44,.22); color: #B51C2C;
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2) .sw-icon {
  background: rgba(12,24,64,.08);  border-color: rgba(12,24,64,.20);  color: #1A2E80;
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3) .sw-icon {
  background: rgba(22,52,32,.08);  border-color: rgba(22,52,32,.20);  color: #164A34;
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1):hover .sw-icon {
  background: #B51C2C; color: #FFFFFF;
  border-color: rgba(181,28,44,.50); box-shadow: 0 4px 14px rgba(181,28,44,.28);
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2):hover .sw-icon {
  background: #0C1840; color: #FFFFFF;
  border-color: rgba(12,24,64,.44);  box-shadow: 0 4px 14px rgba(12,24,64,.22);
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3):hover .sw-icon {
  background: #163420; color: #FFFFFF;
  border-color: rgba(22,52,32,.44);  box-shadow: 0 4px 14px rgba(22,52,32,.20);
}

/* Trust éditorial */
[data-theme="light"] .te-col-left  .te-icon {
  color: #B51C2C; background: rgba(181,28,44,.09); border-color: rgba(181,28,44,.22);
}
[data-theme="light"] .te-col-right .te-icon {
  color: #1A2E80; background: rgba(12,24,64,.08);  border-color: rgba(12,24,64,.20);
}
[data-theme="light"] .te-col-left .te-card-sm:last-child .te-icon {
  color: #164A34; background: rgba(22,52,32,.08);  border-color: rgba(22,52,32,.20);
}
[data-theme="light"] .te-col-left  .te-card-large:hover .te-icon {
  background: #B51C2C; color: #FFFFFF;
  border-color: rgba(181,28,44,.50); box-shadow: 0 4px 14px rgba(181,28,44,.28);
}
[data-theme="light"] .te-col-right .te-card-large:hover .te-icon {
  background: #0C1840; color: #FFFFFF;
  border-color: rgba(12,24,64,.44);  box-shadow: 0 4px 14px rgba(12,24,64,.22);
}
[data-theme="light"] .te-col-left .te-card-sm:last-child:hover .te-icon {
  background: #163420; color: #FFFFFF;
  border-color: rgba(22,52,32,.44);  box-shadow: 0 4px 14px rgba(22,52,32,.20);
}

/* Secteurs */
[data-theme="light"] .sec-ico {
  color: #1A2E80; background: rgba(12,24,64,.08); border-color: rgba(12,24,64,.20);
}
[data-theme="light"] .secteur-card:hover .sec-ico {
  background: #0C1840; color: #FFFFFF;
  border-color: rgba(12,24,64,.44); box-shadow: 0 4px 14px rgba(12,24,64,.22);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § I. SECTIONS — Halos colorés Stewart très discrets
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #services {
  background: linear-gradient(180deg,
    var(--bg) 0%, rgba(181,28,44,.022) 50%, var(--bg) 100%);
}
[data-theme="light"] #logiciels {
  background: linear-gradient(180deg,
    var(--bg) 0%, rgba(12,24,64,.018) 50%, var(--bg) 100%);
}
[data-theme="light"] #situations {
  background: linear-gradient(180deg,
    var(--bg) 0%, rgba(22,52,32,.016) 50%, var(--bg) 100%);
}
[data-theme="light"] #equipe {
  background: linear-gradient(180deg, var(--bg) 0%, rgba(22,52,32,.014) 50%, var(--bg) 100%);
}
[data-theme="light"] #secteurs {
  background: linear-gradient(180deg, var(--bg) 0%, rgba(12,24,64,.016) 50%, var(--bg) 100%);
}
[data-theme="light"] #contact {
  background: linear-gradient(180deg, var(--bg) 0%, rgba(138,100,16,.012) 50%, var(--bg) 100%);
}
[data-theme="light"] #faq {
  background: linear-gradient(180deg, var(--bg) 0%, rgba(181,28,44,.016) 50%, var(--bg) 100%);
}
[data-theme="light"] #temoignages {
  background: var(--bg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § J. TRUST BAR
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #trust-bar {
  background:   rgba(255,255,255,.94);
  border-color: rgba(0,0,0,.07);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}
[data-theme="light"] .tb-veil {
  background: linear-gradient(90deg,
    rgba(247,247,245,.97),
    rgba(247,247,245,.80) 50%,
    rgba(247,247,245,.97));
}
[data-theme="light"] .tb-icon {
  background:   rgba(138,100,16,.08);
  border-color: rgba(138,100,16,.24);
  color:        #6E5006;
  box-shadow:   0 1px 4px rgba(0,0,0,.06);
}
[data-theme="light"] .tb-item:hover .tb-icon {
  background:   rgba(138,100,16,.15);
  border-color: rgba(138,100,16,.38);
  color:        #5A4004;
  box-shadow:   0 2px 8px rgba(138,100,16,.14);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § K. TICKER
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .ticker-wrap {
  background:   rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.07);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
[data-theme="light"] .ticker-wrap::before { opacity: .10; }
[data-theme="light"] .ti       { color: rgba(56,56,74,.50); }
[data-theme="light"] .ti:hover { color: rgba(56,56,74,.86); }

/* ─────────────────────────────────────────────────────────────────────────────
   § L. PILL BAR
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #pill {
  background:
    radial-gradient(ellipse 44% 88% at -2% 50%, rgba(181,28,44,.06), transparent 68%),
    rgba(255,255,255,.96);
  border-color: rgba(0,0,0,.08);
  box-shadow:
    0 8px 28px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.60);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
}
[data-theme="light"] .pill-tartan .tartan-light {
  opacity: .06;
  filter: saturate(.18) brightness(.60) contrast(.94);
}
[data-theme="light"] .pill-txt strong { color: var(--tx);  text-shadow: none; }
[data-theme="light"] .pill-txt span   { color: var(--tx3); }
[data-theme="light"] .pill-dl {
  box-shadow: 0 2px 12px rgba(181,28,44,.30), inset 0 1px 0 rgba(255,255,255,.22);
}
[data-theme="light"] .pill-chat {
  background:   rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.09);
  color:        var(--tx3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § M. CHATBOT
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #cb-win {
  background:   #FFFFFF;
  border-color: rgba(0,0,0,.09);
  box-shadow:
    0 20px 56px rgba(0,0,0,.14),
    0 4px 12px  rgba(0,0,0,.08);
}
[data-theme="light"] .cb-head-tartan .tartan {
  filter:  saturate(.72) brightness(.74) contrast(1.10);
  opacity: .68;
}
[data-theme="light"] .cb-head-overlay {
  background:
    linear-gradient(90deg,
      rgba(181,28,44,.20) 0 2px,
      rgba(138,100,16,.12) 2px 3.5px,
      rgba(12,24,64,.14) 3.5px 5px,
      transparent 5px 100%),
    radial-gradient(ellipse 42% 50% at 100% 0%, rgba(12,24,64,.06), transparent 62%),
    linear-gradient(135deg, rgba(247,247,245,.84) 0%, rgba(240,240,238,.80) 100%);
}
[data-theme="light"] .cb-head::after {
  background: linear-gradient(90deg,
    rgba(181,28,44,.24) 0%,
    rgba(138,100,16,.16) 22%,
    rgba(181,28,44,.20) 50%,
    rgba(12,24,64,.14) 78%,
    rgba(22,52,32,.12) 100%);
}
[data-theme="light"] .cb-m.bot .cb-bub {
  background:   var(--bg2);
  border-color: rgba(0,0,0,.08);
  color:        var(--tx2);
}
[data-theme="light"] .cb-foot {
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(181,28,44,.06) 20%,
      rgba(138,100,16,.04) 50%,
      transparent 78%)
    top / 100% 1px no-repeat,
    rgba(247,247,245,.60);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § N. FAQ — Blanc premium, accent rouge à l'ouverture
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .faq-item {
  background:   #FFFFFF;
  border-color: rgba(0,0,0,.07);
  box-shadow:   0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.06);
}
[data-theme="light"] .faq-item:hover {
  background:   #FFFFFF;
  border-color: rgba(181,28,44,.14);
  box-shadow:
    inset 0 2px 0 rgba(181,28,44,.44),
    0 2px 6px rgba(0,0,0,.05),
    0 8px 28px rgba(181,28,44,.08);
}
[data-theme="light"] .faq-item.open {
  border-color: rgba(181,28,44,.20);
  box-shadow:
    inset 0 2px 0 rgba(181,28,44,.58),
    0 2px 6px rgba(0,0,0,.05),
    0 8px 28px rgba(181,28,44,.10);
}
[data-theme="light"] .faq-q:hover   { background: rgba(0,0,0,.018); }
[data-theme="light"] .faq-a-inner   {
  background:       rgba(0,0,0,.018);
  border-top-color: rgba(0,0,0,.06);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § O. SITUATIONS
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .sit-bg .tartan-light {
  opacity: .08;
  filter: saturate(.14) brightness(.52) contrast(.90);
}
[data-theme="light"] .sit-bg-fade {
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(247,247,245,.60), transparent);
}
[data-theme="light"] .sit-path {
  background:   #FFFFFF;
  border-color: rgba(0,0,0,.07);
  box-shadow:   0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.06);
}
[data-theme="light"] .sit-path::before {
  opacity: .62;
}
/* Icônes situations par rotation */
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+1) .sit-path-ic {
  background: rgba(181,28,44,.09); border-color: rgba(181,28,44,.22); color: #B51C2C;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2) .sit-path-ic {
  background: rgba(12,24,64,.08);  border-color: rgba(12,24,64,.20);  color: #1A2E80;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3) .sit-path-ic {
  background: rgba(22,52,32,.08);  border-color: rgba(22,52,32,.20);  color: #164A34;
}
[data-theme="light"] .sit-path:hover {
  border-color: rgba(181,28,44,.14);
  box-shadow:
    inset 0 2px 0 rgba(181,28,44,.46),
    0 2px 6px rgba(0,0,0,.05),
    0 8px 28px rgba(181,28,44,.09);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § P. FOOTER
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] footer {
  background:
    radial-gradient(ellipse 52% 38% at 50% 0%,   rgba(181,28,44,.025), transparent 55%),
    radial-gradient(ellipse 38% 28% at 100% 100%, rgba(12,24,64,.022),  transparent 55%),
    var(--bg2);
  border-top: 1px solid rgba(0,0,0,.07);
  color: var(--tx2);
}
[data-theme="light"] .ft-link       { color: var(--tx3); }
[data-theme="light"] .ft-link:hover { color: var(--r);   }
[data-theme="light"] .ft-sep        { background: rgba(0,0,0,.08); }
[data-theme="light"] .ft-copy       { color: var(--tx3); }

/* ─────────────────────────────────────────────────────────────────────────────
   § Q. FORMULAIRES
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .ct-form,
[data-theme="light"] .ct-card {
  background:   #FFFFFF;
  border-color: rgba(0,0,0,.08);
  box-shadow:   0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
}
[data-theme="light"] .ct-field,
[data-theme="light"] .ct-input,
[data-theme="light"] .ct-textarea,
[data-theme="light"] .ct-select {
  background:   var(--bg);
  border-color: rgba(0,0,0,.10);
  color:        var(--tx);
}
[data-theme="light"] .ct-field:focus,
[data-theme="light"] .ct-input:focus,
[data-theme="light"] .ct-textarea:focus {
  border-color: var(--r);
  box-shadow:   0 0 0 3px rgba(181,28,44,.10);
  background:   #FFFFFF;
}
[data-theme="light"] .ct-label { color: var(--tx2); }
[data-theme="light"] ::placeholder { color: var(--tx3); opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────────────
   § R. BOUTONS
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .btn-r,
[data-theme="light"] .ci-btn,
[data-theme="light"] .fbtn {
  background: var(--r);
  box-shadow:  0 2px 10px rgba(181,28,44,.22), 0 1px 3px rgba(181,28,44,.14);
}
[data-theme="light"] .btn-r:hover,
[data-theme="light"] .ci-btn:hover,
[data-theme="light"] .fbtn:hover {
  background: var(--r-d);
  box-shadow:  0 6px 20px rgba(181,28,44,.28), inset 0 0 0 1px rgba(138,100,16,.22);
}
[data-theme="light"] .btn-ghost {
  border-color: rgba(0,0,0,.16);
  color:        var(--tx2);
}
[data-theme="light"] .btn-ghost:hover {
  border-color: rgba(181,28,44,.28);
  color:        var(--r);
  background:   rgba(181,28,44,.04);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § S. BADGES + SECTEUR CARD
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .badge {
  background:   rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.09);
  color:        var(--tx2);
  box-shadow:   0 1px 3px rgba(0,0,0,.05);
}
[data-theme="light"] .secteur-card {
  background:   #FFFFFF;
  border-color: rgba(0,0,0,.07);
  box-shadow:   0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.06);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § T. TYPOGRAPHIE + SCROLLBAR
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 { color: var(--tx); }
[data-theme="light"] p,
[data-theme="light"] li  { color: var(--tx2); }
[data-theme="light"] .disp em {
  color:       var(--r);
  text-shadow: 0 2px 12px rgba(181,28,44,.10);
}
[data-theme="light"] .eye {
  color: rgba(110,80,6,.82);
}
[data-theme="light"] .eye::before {
  background: linear-gradient(90deg,
    var(--rs-gold)        0%,   var(--rs-gold)        38%,
    rgba(12,24,64,.44)    38%,  rgba(12,24,64,.44)    44%,
    var(--r)              44%,  var(--r)              100%);
}
[data-theme="light"] *::-webkit-scrollbar-track {
  background: var(--bg2);
}
[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    var(--rs-gold)     0%,
    var(--r)           55%,
    var(--rs-red-deep) 100%);
  border-color: var(--bg2);
}

/* ══ FIX SPÉCIFICITÉ sit-path — nth-child dark backgrounds ══
   .sit-paths .sit-path:nth-child(3n+2/3n+3) avait spec. 0-3-0 (dark)
   [data-theme="light"] .sit-path était 0-2-0 → perdait.
   Solution : [data-theme="light"] .sit-paths .sit-path = 0-3-0 (tie, position gagne)
   + nth-child explicites = 0-4-0 pour garantie absolue.
   ════════════════════════════════════════════════════════════ */

/* 0-3-0 — tie avec les nth-child dark, gagne par position (fin de fichier) */
[data-theme="light"] .sit-paths .sit-path {
  background:   #FFFFFF;
  border-color: rgba(0,0,0,.07);
  box-shadow:   0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.06);
}

/* 0-4-0 — garanti au-dessus des nth-child dark (0-3-0) */
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+1),
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2),
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3) {
  background:   #FFFFFF;
  border-color: rgba(0,0,0,.07);
}

/* Hover — blanc + accent rouge + ombre colorée */
[data-theme="light"] .sit-paths .sit-path:hover {
  background:   #FFFFFF;
  border-color: rgba(181,28,44,.14);
  box-shadow:
    inset 0 2px 0 rgba(181,28,44,.46),
    0 2px 6px  rgba(0,0,0,.05),
    0 8px 28px rgba(181,28,44,.09);
  transform: translateY(-2px);
}

/* Texte — lisible sur fond blanc */
[data-theme="light"] .sit-path-t { color: var(--tx);  }
[data-theme="light"] .sit-path-d { color: var(--tx3); }
[data-theme="light"] .sit-path:hover .sit-path-t { color: var(--r); }

/* ══ FIX mobile icônes — !important dark override ══
   @media(max-width:900px) ligne ~4487 force rgba(6,5,5,.88) !important
   sur les icônes. Seul un !important plus spécifique peut gagner.
   [data-theme="light"] .svc-ic = spec. 0-2-0 > 0-1-0 → gagne.
   ═════════════════════════════════════════════════════════════════ */
@media(max-width:900px) {
  [data-theme="light"] .svc-ic,
  [data-theme="light"] .sit-ic,
  [data-theme="light"] .te-icon,
  [data-theme="light"] .te-icon-sm,
  [data-theme="light"] .sw-icon,
  [data-theme="light"] .sec-ico,
  [data-theme="light"] .ct-card-ico {
    background:   rgba(0,0,0,.04) !important;
    border-color: rgba(0,0,0,.10) !important;
    box-shadow:   none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE v5 — MAISON ROYALE ÉCOSSAISE LUMINEUSE
   ══════════════════════════════════════════════════════════════════════════════
   Direction : Burberry flagship · hôtel écossais contemporain · whisky premium
   Principe  : MÊME PROFONDEUR que le dark mode, traduite en tons clairs.
               Pas de flat blanc — satin, halos, glow Stewart, reflets nobles.

   Palette utilisateur :
     Fond       #FBFCFE (blanc chaud) · #F3F6FB (perle) · #EBEFF6 (ivoire)
                #FAF8F3 (satin)
     Stewart    #C8102E (rouge) · #1C2C5B (navy) · #0B5D4B (vert) · #C6A85B (or)

   Techniques :
     · Cards : radial catch-light + linear satin + halo coin coloré nth-child
     · Sections : halos radiaux Stewart diffus (.04–.08 opacity)
     · Hover : shadow COLORÉE Stewart (pas noire)
     · Tartan : mix-blend-mode multiply → couleurs vraies sur blanc
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   § A. VARIABLES — Palette royale écossaise lumineuse
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:   #FBFCFE;
  --bg2:  #F3F6FB;
  --bg3:  #EBEFF6;
  --bg4:  #E5DEC8;
  --sf:   rgba(255,255,255,.94);
  --sf2:  rgba(255,255,255,.78);
  --sf3:  rgba(255,255,255,.96);
  --bd:   rgba(28,44,91,.08);
  --bd2:  rgba(28,44,91,.14);
  --tx:   #1A1B22;
  --tx2:  #4A4C5A;
  --tx3:  #8A8C9B;
  --gl:   rgba(248,247,244,.96);
  /* Stewart royal palette */
  --r:            #C8102E;
  --r-d:          #9A0D24;
  --r-l:          #DC3349;
  --r-s:          rgba(200,16,46,.06);
  --r-b:          rgba(200,16,46,.22);
  --r-g:          rgba(200,16,46,.10);
  --rs-red:       #C8102E;
  --rs-red-deep:  #9A0D24;
  --rs-navy:      #1C2C5B;
  --rs-navy-soft: rgba(28,44,91,.30);
  --rs-green:     #0B5D4B;
  --rs-green-soft: rgba(11,93,75,.28);
  --rs-gold:      #C6A85B;
  --rs-gold-soft: rgba(198,168,91,.32);
  --rs-ivory:     #FAF8F3;
  --navy-hi:      #1C2C5B;
  --forest-hi:    #0B5D4B;
  --gold-hi:      #C6A85B;
}

/* ─────────────────────────────────────────────────────────────────────────────
   § B. BASE BODY — Halos Stewart ambiants diffus
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] body {
  background:
    radial-gradient(ellipse 65% 40% at 12% -2%,  rgba(200,16,46,.055), transparent 62%),
    radial-gradient(ellipse 50% 30% at 95% 18%,  rgba(198,168,91,.042), transparent 58%),
    radial-gradient(ellipse 45% 35% at 88% 78%,  rgba(28,44,91,.040),   transparent 60%),
    radial-gradient(ellipse 38% 30% at 6% 88%,   rgba(11,93,75,.034),   transparent 58%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg2) 100%);
  color: var(--tx);
}
[data-theme="light"] body::before {
  opacity:        .10;
  mix-blend-mode: multiply;
}

/* ─────────────────────────────────────────────────────────────────────────────
   § C. TARTAN — Multiply sur blanc révèle les vraies couleurs Stewart
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .tartan {
  filter:  saturate(1.05) brightness(.74) contrast(1.22);
  opacity: 1;
}
[data-theme="light"] .tartan-light {
  opacity:        .46;
  mix-blend-mode: multiply;
  filter:         saturate(.96) brightness(.76) contrast(1.16);
}
[data-theme="light"] .tartan::after { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   § D. NAVIGATION — Verre perle satiné
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #nav,
[data-theme="light"] #nav.scrolled {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,248,243,.88));
  border-bottom: 1px solid rgba(28,44,91,.09);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    0    1px 0    rgba(28,44,91,.04),
    0    4px 24px rgba(28,44,91,.08);
  backdrop-filter: blur(22px) saturate(1.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
}
[data-theme="light"] .nav-link        { color: var(--tx2); }
[data-theme="light"] .nav-link:hover  { color: var(--r);   }
[data-theme="light"] .nav-link.active { color: var(--r);   }

/* ─────────────────────────────────────────────────────────────────────────────
   § E. HÉRO — Halos Stewart riches + tartan vivant
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #hero {
  background:
    /* Rouge royal bloom gauche */
    radial-gradient(ellipse 52% 56% at 16% 44%, rgba(200,16,46,.085), transparent 62%),
    /* Or accent haut-droite */
    radial-gradient(ellipse 42% 38% at 78% 20%, rgba(198,168,91,.064), transparent 58%),
    /* Navy profondeur bas */
    radial-gradient(ellipse 48% 32% at 68% 88%, rgba(28,44,91,.052),   transparent 62%),
    /* Vert forêt accent */
    radial-gradient(ellipse 36% 26% at 95% 62%, rgba(11,93,75,.042),   transparent 58%),
    /* Base satin */
    linear-gradient(135deg, #FAF8F3 0%, var(--bg) 48%, #F3F6FB 100%);
}
/* Fog très réduit — tartan respire */
[data-theme="light"] #hero::before {
  background:
    linear-gradient(90deg,
      rgba(248,247,244,.62) 0%,
      rgba(248,247,244,.32) 38%,
      rgba(248,247,244,.08) 66%,
      transparent 82%);
}
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(270deg,
    transparent 0%,
    rgba(248,247,244,.26) 55%,
    rgba(248,247,244,.58) 100%);
}
[data-theme="light"] .hero-tartan-glow {
  background:
    radial-gradient(ellipse 54% 44% at 64% 42%, rgba(198,168,91,.095), transparent 64%),
    radial-gradient(ellipse 40% 32% at 72% 62%, rgba(11,93,75,.075),   transparent 62%),
    radial-gradient(ellipse 36% 28% at 84% 30%, rgba(200,16,46,.055),  transparent 60%);
}
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg, rgba(248,247,244,.42) 0%, transparent 24%);
}
[data-theme="light"] .hero-creds {
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(250,248,243,.72));
  border-color: rgba(28,44,91,.10);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    0    6px 28px rgba(28,44,91,.10),
    0    2px 8px  rgba(28,44,91,.06);
}
[data-theme="light"] .hero-creds .cred-val   { color: var(--tx);  }
[data-theme="light"] .hero-creds .cred-label { color: var(--tx3); }

/* ─────────────────────────────────────────────────────────────────────────────
   § F. CARTES — Base satin multi-couches (annule le flat de v4)
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .card,
[data-theme="light"] .svc-card,
[data-theme="light"] .trust-card,
[data-theme="light"] .secteur-card,
[data-theme="light"] .te-card-large,
[data-theme="light"] .te-card-sm,
[data-theme="light"] .te-card-row,
[data-theme="light"] .sw-card,
[data-theme="light"] .team-card,
[data-theme="light"] .cblk,
[data-theme="light"] .ct-card,
[data-theme="light"] .ct-form,
[data-theme="light"] .legal-info-card,
[data-theme="light"] .ck-card,
[data-theme="light"] .faq-item {
  /* Satin multi-couches : catch-light + diagonale ivoire + base perle */
  background:
    radial-gradient(ellipse 85% 65% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 58%, #F3F6FB 100%);
  border:        1px solid rgba(28,44,91,.09);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  28px rgba(200,16,46,.022),
    0    1px 2px   rgba(28,44,91,.04),
    0    8px 24px  rgba(28,44,91,.07);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § G. SVC-CARD — Rotation 4 couleurs Stewart : halo + glow coloré
   Spécificité : [data-theme="light"] #services .svc-grid .svc-card:nth-child(...)
                = 0-1-0 + 1-0-0 + 0-1-0 + 0-1-0 + 0-1-0 = 1-4-0
                → bat DS10 #services .svc-grid .svc-card:nth-child(...) = 1-3-0
   ───────────────────────────────────────────────────────────────────────────── */

/* 4n+1 — ROUGE Stewart */
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+1) {
  background:
    radial-gradient(ellipse 85% 65% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(200,16,46,.055), transparent 60%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 58%, #F3F6FB 100%);
  border-color: rgba(200,16,46,.16);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  36px rgba(200,16,46,.040),
    0    1px 2px   rgba(200,16,46,.06),
    0    8px 24px  rgba(200,16,46,.08);
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+1):hover {
  border-color: rgba(200,16,46,.32);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  48px rgba(200,16,46,.075),
    0    4px 12px  rgba(200,16,46,.12),
    0    24px 56px rgba(200,16,46,.16),
    0    0 32px    rgba(200,16,46,.10);
  transform: translateY(-5px);
}

/* 4n+2 — NAVY Stewart */
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+2) {
  background:
    radial-gradient(ellipse 85% 65% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(28,44,91,.052), transparent 60%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 58%, #F3F6FB 100%);
  border-color: rgba(28,44,91,.18);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  36px rgba(28,44,91,.034),
    0    1px 2px   rgba(28,44,91,.05),
    0    8px 24px  rgba(28,44,91,.07);
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+2):hover {
  border-color: rgba(28,44,91,.34);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  48px rgba(28,44,91,.066),
    0    4px 12px  rgba(28,44,91,.10),
    0    24px 56px rgba(28,44,91,.14),
    0    0 32px    rgba(28,44,91,.08);
  transform: translateY(-5px);
}

/* 4n+3 — VERT forêt Stewart */
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+3) {
  background:
    radial-gradient(ellipse 85% 65% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(11,93,75,.052), transparent 60%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 58%, #F3F6FB 100%);
  border-color: rgba(11,93,75,.16);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  36px rgba(11,93,75,.032),
    0    1px 2px   rgba(11,93,75,.05),
    0    8px 24px  rgba(11,93,75,.07);
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+3):hover {
  border-color: rgba(11,93,75,.32);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  48px rgba(11,93,75,.062),
    0    4px 12px  rgba(11,93,75,.10),
    0    24px 56px rgba(11,93,75,.14),
    0    0 32px    rgba(11,93,75,.08);
  transform: translateY(-5px);
}

/* 4n+4 — OR doux Stewart */
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+4) {
  background:
    radial-gradient(ellipse 85% 65% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(198,168,91,.058), transparent 60%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 58%, #F3F6FB 100%);
  border-color: rgba(198,168,91,.22);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  36px rgba(198,168,91,.040),
    0    1px 2px   rgba(198,168,91,.06),
    0    8px 24px  rgba(198,168,91,.08);
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+4):hover {
  border-color: rgba(198,168,91,.40);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  48px rgba(198,168,91,.075),
    0    4px 12px  rgba(198,168,91,.12),
    0    24px 56px rgba(198,168,91,.16),
    0    0 32px    rgba(198,168,91,.10);
  transform: translateY(-5px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § H. SW-CARD LOGICIELS — Rotation 3 couleurs Stewart
   Spécificité 1-4-0 → bat DS10 #logiciels .sw-grid .sw-card:nth-child = 1-3-0
   ───────────────────────────────────────────────────────────────────────────── */

[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+1) {
  background:
    radial-gradient(ellipse 85% 65% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(200,16,46,.055), transparent 60%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 58%, #F3F6FB 100%);
  border-color: rgba(200,16,46,.16);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  32px rgba(200,16,46,.038),
    0    1px 2px   rgba(200,16,46,.06),
    0    8px 22px  rgba(200,16,46,.07);
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+1):hover {
  border-color: rgba(200,16,46,.32);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  42px rgba(200,16,46,.070),
    0    20px 48px rgba(200,16,46,.14),
    0    0 28px    rgba(200,16,46,.10);
  transform: translateY(-4px);
}

[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+2) {
  background:
    radial-gradient(ellipse 85% 65% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(28,44,91,.052), transparent 60%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 58%, #F3F6FB 100%);
  border-color: rgba(28,44,91,.18);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  32px rgba(28,44,91,.034),
    0    1px 2px   rgba(28,44,91,.05),
    0    8px 22px  rgba(28,44,91,.07);
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+2):hover {
  border-color: rgba(28,44,91,.34);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  42px rgba(28,44,91,.062),
    0    20px 48px rgba(28,44,91,.12),
    0    0 28px    rgba(28,44,91,.08);
  transform: translateY(-4px);
}

[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+3) {
  background:
    radial-gradient(ellipse 85% 65% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(11,93,75,.052), transparent 60%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 58%, #F3F6FB 100%);
  border-color: rgba(11,93,75,.16);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  32px rgba(11,93,75,.032),
    0    1px 2px   rgba(11,93,75,.05),
    0    8px 22px  rgba(11,93,75,.07);
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+3):hover {
  border-color: rgba(11,93,75,.32);
  box-shadow:
    inset 0 1px 0   rgba(255,255,255,1),
    inset 0 0  42px rgba(11,93,75,.060),
    0    20px 48px rgba(11,93,75,.12),
    0    0 28px    rgba(11,93,75,.08);
  transform: translateY(-4px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § I. ICÔNES — Boîtes Stewart contextuelles, satinées
   ───────────────────────────────────────────────────────────────────────────── */
/* Reset base */
[data-theme="light"] .svc-ic,
[data-theme="light"] .sit-ic,
[data-theme="light"] .te-icon,
[data-theme="light"] .te-icon-sm,
[data-theme="light"] .sw-icon,
[data-theme="light"] .sec-ico {
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,247,244,.86));
  border:        1px solid rgba(28,44,91,.10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0  rgba(255,255,255,1),
    0    1px 3px  rgba(28,44,91,.05);
}

/* SVC icônes Stewart */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1) .svc-ic {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(200,16,46,.08));
  border-color: rgba(200,16,46,.22);
  color:        #C8102E;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0    2px 8px rgba(200,16,46,.10);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2) .svc-ic {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(28,44,91,.07));
  border-color: rgba(28,44,91,.22);
  color:        #1C2C5B;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0    2px 8px rgba(28,44,91,.09);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3) .svc-ic {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(11,93,75,.07));
  border-color: rgba(11,93,75,.22);
  color:        #0B5D4B;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0    2px 8px rgba(11,93,75,.09);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4) .svc-ic {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(198,168,91,.10));
  border-color: rgba(198,168,91,.28);
  color:        #8A6F2A;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0    2px 8px rgba(198,168,91,.12);
}

/* SVC hover : icône remplie + glow Stewart */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1):hover .svc-ic {
  background:   linear-gradient(145deg, #DC3349, #C8102E);
  color:        #FFFFFF;
  border-color: #C8102E;
  box-shadow:
    inset 0 1px 0  rgba(255,255,255,.30),
    0    4px 14px rgba(200,16,46,.35),
    0    0 18px   rgba(200,16,46,.20);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2):hover .svc-ic {
  background:   linear-gradient(145deg, #2A3D72, #1C2C5B);
  color:        #FFFFFF;
  border-color: #1C2C5B;
  box-shadow:
    inset 0 1px 0  rgba(255,255,255,.30),
    0    4px 14px rgba(28,44,91,.30),
    0    0 18px   rgba(28,44,91,.18);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3):hover .svc-ic {
  background:   linear-gradient(145deg, #157760, #0B5D4B);
  color:        #FFFFFF;
  border-color: #0B5D4B;
  box-shadow:
    inset 0 1px 0  rgba(255,255,255,.30),
    0    4px 14px rgba(11,93,75,.28),
    0    0 18px   rgba(11,93,75,.16);
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4):hover .svc-ic {
  background:   linear-gradient(145deg, #D9BB6B, #C6A85B);
  color:        #FFFFFF;
  border-color: #C6A85B;
  box-shadow:
    inset 0 1px 0  rgba(255,255,255,.40),
    0    4px 14px rgba(198,168,91,.40),
    0    0 18px   rgba(198,168,91,.22);
}

/* SW icônes Stewart */
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1) .sw-icon {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(200,16,46,.08));
  border-color: rgba(200,16,46,.22); color: #C8102E;
  box-shadow:   inset 0 1px 0 rgba(255,255,255,1), 0 2px 8px rgba(200,16,46,.10);
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2) .sw-icon {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(28,44,91,.07));
  border-color: rgba(28,44,91,.22); color: #1C2C5B;
  box-shadow:   inset 0 1px 0 rgba(255,255,255,1), 0 2px 8px rgba(28,44,91,.09);
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3) .sw-icon {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(11,93,75,.07));
  border-color: rgba(11,93,75,.22); color: #0B5D4B;
  box-shadow:   inset 0 1px 0 rgba(255,255,255,1), 0 2px 8px rgba(11,93,75,.09);
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1):hover .sw-icon {
  background: linear-gradient(145deg, #DC3349, #C8102E); color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 4px 14px rgba(200,16,46,.32);
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2):hover .sw-icon {
  background: linear-gradient(145deg, #2A3D72, #1C2C5B); color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 4px 14px rgba(28,44,91,.28);
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3):hover .sw-icon {
  background: linear-gradient(145deg, #157760, #0B5D4B); color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 4px 14px rgba(11,93,75,.26);
}

/* Trust éditorial + Secteurs */
[data-theme="light"] .te-col-left  .te-icon {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(200,16,46,.08));
  border-color: rgba(200,16,46,.22); color: #C8102E;
}
[data-theme="light"] .te-col-right .te-icon {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(28,44,91,.07));
  border-color: rgba(28,44,91,.22); color: #1C2C5B;
}
[data-theme="light"] .te-col-left .te-card-sm:last-child .te-icon {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(11,93,75,.07));
  border-color: rgba(11,93,75,.22); color: #0B5D4B;
}
[data-theme="light"] .te-col-left .te-card-large:hover .te-icon {
  background: linear-gradient(145deg, #DC3349, #C8102E); color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(200,16,46,.30);
}
[data-theme="light"] .te-col-right .te-card-large:hover .te-icon {
  background: linear-gradient(145deg, #2A3D72, #1C2C5B); color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(28,44,91,.26);
}
[data-theme="light"] .te-col-left .te-card-sm:last-child:hover .te-icon {
  background: linear-gradient(145deg, #157760, #0B5D4B); color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(11,93,75,.24);
}

[data-theme="light"] .sec-ico {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(28,44,91,.07));
  border-color: rgba(28,44,91,.22); color: #1C2C5B;
  box-shadow:   inset 0 1px 0 rgba(255,255,255,1), 0 2px 8px rgba(28,44,91,.08);
}
[data-theme="light"] .secteur-card:hover .sec-ico {
  background: linear-gradient(145deg, #2A3D72, #1C2C5B); color: #FFFFFF;
  border-color: #1C2C5B;
  box-shadow: 0 4px 14px rgba(28,44,91,.28);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § J. SECTIONS — Halos Stewart ambiants
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #services {
  background:
    radial-gradient(ellipse 60% 45% at 12% 18%,  rgba(200,16,46,.055), transparent 60%),
    radial-gradient(ellipse 50% 35% at 88% 78%,  rgba(198,168,91,.040), transparent 56%),
    radial-gradient(ellipse 45% 30% at 95% 22%,  rgba(28,44,91,.032),  transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%);
}
[data-theme="light"] #logiciels {
  background:
    radial-gradient(ellipse 60% 45% at 92% 22%,  rgba(28,44,91,.052),   transparent 60%),
    radial-gradient(ellipse 50% 35% at 8% 78%,   rgba(200,16,46,.038),  transparent 56%),
    radial-gradient(ellipse 42% 28% at 50% 92%,  rgba(11,93,75,.030),   transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%);
}
[data-theme="light"] #situations {
  background:
    radial-gradient(ellipse 60% 45% at 18% 24%,  rgba(11,93,75,.055),   transparent 60%),
    radial-gradient(ellipse 48% 35% at 84% 76%,  rgba(28,44,91,.040),  transparent 56%),
    radial-gradient(ellipse 42% 30% at 95% 20%,  rgba(198,168,91,.034), transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%);
}
[data-theme="light"] #equipe {
  background:
    radial-gradient(ellipse 55% 40% at 50% 30%,  rgba(28,44,91,.044),   transparent 60%),
    radial-gradient(ellipse 45% 32% at 12% 80%,  rgba(200,16,46,.034),  transparent 56%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%);
}
[data-theme="light"] #secteurs {
  background:
    radial-gradient(ellipse 60% 45% at 88% 28%,  rgba(28,44,91,.048),   transparent 60%),
    radial-gradient(ellipse 48% 35% at 12% 78%,  rgba(11,93,75,.036),   transparent 56%),
    radial-gradient(ellipse 42% 30% at 95% 90%,  rgba(198,168,91,.032), transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%);
}
[data-theme="light"] #contact {
  background:
    radial-gradient(ellipse 60% 45% at 20% 30%,  rgba(200,16,46,.045),  transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 72%,  rgba(198,168,91,.038), transparent 56%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%);
}
[data-theme="light"] #faq {
  background:
    radial-gradient(ellipse 55% 40% at 50% 22%,  rgba(200,16,46,.045),  transparent 60%),
    radial-gradient(ellipse 45% 32% at 8% 78%,   rgba(28,44,91,.034),   transparent 56%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%);
}
[data-theme="light"] #temoignages {
  background:
    radial-gradient(ellipse 55% 38% at 88% 30%,  rgba(198,168,91,.042), transparent 60%),
    radial-gradient(ellipse 45% 32% at 12% 76%,  rgba(28,44,91,.034),   transparent 56%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § K. TRUST BAR — Verre perle riche
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #trust-bar {
  background:
    radial-gradient(ellipse 70% 100% at 50% 50%, rgba(198,168,91,.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,248,243,.88));
  border-color: rgba(28,44,91,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0    2px 12px rgba(28,44,91,.06);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
[data-theme="light"] .tb-veil {
  background: linear-gradient(90deg,
    rgba(248,247,244,.96),
    rgba(248,247,244,.74) 50%,
    rgba(248,247,244,.96));
}
[data-theme="light"] .tb-icon {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(198,168,91,.10));
  border-color: rgba(198,168,91,.30);
  color:        #8A6F2A;
  box-shadow:   inset 0 1px 0 rgba(255,255,255,1), 0 1px 4px rgba(198,168,91,.10);
}
[data-theme="light"] .tb-item:hover .tb-icon {
  background:   linear-gradient(145deg, #D9BB6B, #C6A85B);
  border-color: #C6A85B;
  color:        #FFFFFF;
  box-shadow:   0 4px 14px rgba(198,168,91,.34);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § L. TICKER — Perle satiné
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .ticker-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,248,243,.86));
  border-color: rgba(28,44,91,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0    2px 8px rgba(28,44,91,.05);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
}
[data-theme="light"] .ticker-wrap::before { opacity: .14; }
[data-theme="light"] .ti       { color: rgba(74,76,90,.58); }
[data-theme="light"] .ti:hover { color: rgba(74,76,90,.92); }

/* ─────────────────────────────────────────────────────────────────────────────
   § M. PILL BAR — Verre perle + halo rouge
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #pill {
  background:
    radial-gradient(ellipse 46% 90% at -2% 50%, rgba(200,16,46,.08), transparent 68%),
    radial-gradient(ellipse 40% 80% at 102% 50%, rgba(198,168,91,.06), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,248,243,.92));
  border-color: rgba(28,44,91,.10);
  box-shadow:
    inset 0 1px 0  rgba(255,255,255,1),
    0    8px 32px rgba(28,44,91,.10);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
}
[data-theme="light"] .pill-tartan .tartan-light {
  opacity: .10;
  filter:  saturate(.40) brightness(.65) contrast(.96);
}
[data-theme="light"] .pill-txt strong { color: var(--tx);  text-shadow: none; }
[data-theme="light"] .pill-txt span   { color: var(--tx3); }
[data-theme="light"] .pill-dl {
  background: linear-gradient(145deg, #DC3349, #C8102E);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0    2px 12px rgba(200,16,46,.34),
    0    0 18px   rgba(200,16,46,.20);
}
[data-theme="light"] .pill-chat {
  background:   linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,247,244,.84));
  border-color: rgba(28,44,91,.10);
  color:        var(--tx2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § N. CHATBOT — Perle riche + tartan vivant
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] #cb-win {
  background:
    linear-gradient(160deg, #FFFFFF 0%, #FAF8F3 60%, #F3F6FB 100%);
  border-color: rgba(28,44,91,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0    24px 56px rgba(28,44,91,.16),
    0    4px 12px  rgba(28,44,91,.08);
}
[data-theme="light"] .cb-head-tartan .tartan {
  filter:  saturate(1.10) brightness(.70) contrast(1.18);
  opacity: .82;
}
[data-theme="light"] .cb-head-overlay {
  background:
    linear-gradient(90deg,
      rgba(200,16,46,.22) 0 2px,
      rgba(198,168,91,.16) 2px 3.5px,
      rgba(28,44,91,.18) 3.5px 5px,
      transparent 5px 100%),
    radial-gradient(ellipse 42% 50% at 100% 0%, rgba(28,44,91,.10), transparent 62%),
    linear-gradient(135deg, rgba(250,248,243,.82) 0%, rgba(244,241,234,.78) 100%);
}
[data-theme="light"] .cb-head::after {
  background: linear-gradient(90deg,
    rgba(200,16,46,.28) 0%,
    rgba(198,168,91,.22) 22%,
    rgba(200,16,46,.24) 50%,
    rgba(28,44,91,.18) 78%,
    rgba(11,93,75,.16) 100%);
}
[data-theme="light"] .cb-m.bot .cb-bub {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,247,244,.92));
  border-color: rgba(28,44,91,.10);
  color:        var(--tx2);
  box-shadow:   inset 0 1px 0 rgba(255,255,255,1), 0 1px 3px rgba(28,44,91,.05);
}
[data-theme="light"] .cb-foot {
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(200,16,46,.08) 20%,
      rgba(198,168,91,.06) 50%,
      transparent 78%)
    top / 100% 1px no-repeat,
    rgba(250,248,243,.72);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § O. FAQ — Cartes perle + accent rouge à l'ouverture
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .faq-item {
  background:
    radial-gradient(ellipse 80% 60% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 60%, #F3F6FB 100%);
  border: 1px solid rgba(28,44,91,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0    1px 2px rgba(28,44,91,.04),
    0    6px 18px rgba(28,44,91,.06);
}
[data-theme="light"] .faq-item:hover {
  border-color: rgba(200,16,46,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 32px rgba(200,16,46,.04),
    0    2px 6px rgba(200,16,46,.06),
    0    12px 32px rgba(200,16,46,.10);
}
[data-theme="light"] .faq-item.open {
  border-color: rgba(200,16,46,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 42px rgba(200,16,46,.06),
    0    2px 6px rgba(200,16,46,.08),
    0    12px 36px rgba(200,16,46,.14);
}
[data-theme="light"] .faq-q:hover { background: rgba(200,16,46,.025); }
[data-theme="light"] .faq-a-inner {
  background:       rgba(200,16,46,.020);
  border-top-color: rgba(200,16,46,.10);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § P. SITUATIONS — sit-path rotation Stewart riche
   Spec. 0-3-0 → bat .sit-paths .sit-path:nth-child(...) = 0-3-0 par position
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .sit-bg .tartan-light {
  opacity: .12;
  filter:  saturate(.36) brightness(.62) contrast(.96);
}
[data-theme="light"] .sit-bg-fade {
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(248,247,244,.55), transparent),
    linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%);
}

[data-theme="light"] .sit-paths .sit-path {
  background:
    radial-gradient(ellipse 85% 65% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(200,16,46,.055), transparent 60%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 58%, #F3F6FB 100%);
  border: 1px solid rgba(200,16,46,.16);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 28px rgba(200,16,46,.030),
    0    1px 2px  rgba(200,16,46,.05),
    0    8px 22px rgba(200,16,46,.07);
}

[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2) {
  background:
    radial-gradient(ellipse 85% 65% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(28,44,91,.052), transparent 60%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 58%, #F3F6FB 100%);
  border-color: rgba(28,44,91,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 28px rgba(28,44,91,.028),
    0    1px 2px  rgba(28,44,91,.04),
    0    8px 22px rgba(28,44,91,.06);
}

[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3) {
  background:
    radial-gradient(ellipse 85% 65% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(11,93,75,.052), transparent 60%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 58%, #F3F6FB 100%);
  border-color: rgba(11,93,75,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 28px rgba(11,93,75,.028),
    0    1px 2px  rgba(11,93,75,.04),
    0    8px 22px rgba(11,93,75,.06);
}

/* Hover */
[data-theme="light"] .sit-paths .sit-path:hover {
  border-color: rgba(200,16,46,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 42px rgba(200,16,46,.060),
    0    4px 12px  rgba(200,16,46,.10),
    0    18px 44px rgba(200,16,46,.14);
  transform: translateY(-3px);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2):hover {
  border-color: rgba(28,44,91,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 42px rgba(28,44,91,.055),
    0    4px 12px  rgba(28,44,91,.09),
    0    18px 44px rgba(28,44,91,.12);
  transform: translateY(-3px);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3):hover {
  border-color: rgba(11,93,75,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 42px rgba(11,93,75,.055),
    0    4px 12px  rgba(11,93,75,.09),
    0    18px 44px rgba(11,93,75,.12);
  transform: translateY(-3px);
}

/* Sit-path icônes Stewart contextuelles */
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+1) .sit-path-ic {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(200,16,46,.10));
  border-color: rgba(200,16,46,.24); color: #C8102E;
  box-shadow:   inset 0 1px 0 rgba(255,255,255,1), 0 2px 8px rgba(200,16,46,.10);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2) .sit-path-ic {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(28,44,91,.08));
  border-color: rgba(28,44,91,.22); color: #1C2C5B;
  box-shadow:   inset 0 1px 0 rgba(255,255,255,1), 0 2px 8px rgba(28,44,91,.09);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3) .sit-path-ic {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(11,93,75,.08));
  border-color: rgba(11,93,75,.22); color: #0B5D4B;
  box-shadow:   inset 0 1px 0 rgba(255,255,255,1), 0 2px 8px rgba(11,93,75,.09);
}
/* Sit-path hover icônes : remplissage Stewart */
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+1):hover .sit-path-ic {
  background: linear-gradient(145deg, #DC3349, #C8102E); color: #FFFFFF;
  border-color: #C8102E;
  box-shadow: 0 4px 14px rgba(200,16,46,.32); transform: scale(1.06);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2):hover .sit-path-ic {
  background: linear-gradient(145deg, #2A3D72, #1C2C5B); color: #FFFFFF;
  border-color: #1C2C5B;
  box-shadow: 0 4px 14px rgba(28,44,91,.28); transform: scale(1.06);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3):hover .sit-path-ic {
  background: linear-gradient(145deg, #157760, #0B5D4B); color: #FFFFFF;
  border-color: #0B5D4B;
  box-shadow: 0 4px 14px rgba(11,93,75,.26); transform: scale(1.06);
}

/* Textes sit-path */
[data-theme="light"] .sit-path-t { color: var(--tx);  font-weight: 600; }
[data-theme="light"] .sit-path-d { color: var(--tx2); }
[data-theme="light"] .sit-path:hover .sit-path-t { color: var(--r); }

/* Selvedge */
[data-theme="light"] .sit-path::before { opacity: .56; }

/* ─────────────────────────────────────────────────────────────────────────────
   § Q. FOOTER — Perle riche multi-halos
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] footer {
  background:
    radial-gradient(ellipse 55% 42% at 50% 0%,   rgba(200,16,46,.045), transparent 60%),
    radial-gradient(ellipse 42% 32% at 95% 100%, rgba(28,44,91,.038),  transparent 56%),
    radial-gradient(ellipse 38% 28% at 5% 100%,  rgba(11,93,75,.034),  transparent 56%),
    radial-gradient(ellipse 30% 22% at 50% 100%, rgba(198,168,91,.030), transparent 58%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg3) 100%);
  border-top:
    1px solid rgba(198,168,91,.24);
  color: var(--tx2);
}
[data-theme="light"] .ft-link       { color: var(--tx3); }
[data-theme="light"] .ft-link:hover { color: var(--r);   }
[data-theme="light"] .ft-sep        { background: rgba(28,44,91,.10); }
[data-theme="light"] .ft-copy       { color: var(--tx3); }

/* ─────────────────────────────────────────────────────────────────────────────
   § R. FORMULAIRES
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .ct-form,
[data-theme="light"] .ct-card {
  background:
    radial-gradient(ellipse 80% 60% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 60%, #F3F6FB 100%);
  border: 1px solid rgba(28,44,91,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0    1px 2px rgba(28,44,91,.04),
    0    8px 24px rgba(28,44,91,.07);
}
[data-theme="light"] .ct-field,
[data-theme="light"] .ct-input,
[data-theme="light"] .ct-textarea,
[data-theme="light"] .ct-select {
  background:   rgba(255,255,255,.84);
  border-color: rgba(28,44,91,.14);
  color:        var(--tx);
  box-shadow:   inset 0 1px 2px rgba(28,44,91,.04);
}
[data-theme="light"] .ct-field:focus,
[data-theme="light"] .ct-input:focus,
[data-theme="light"] .ct-textarea:focus {
  border-color: var(--r);
  box-shadow:
    inset 0 1px 2px rgba(28,44,91,.04),
    0 0 0 3px rgba(200,16,46,.10);
  background:   #FFFFFF;
}
[data-theme="light"] .ct-label    { color: var(--tx2); }
[data-theme="light"] ::placeholder { color: var(--tx3); opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────────────
   § S. BOUTONS — Glow rouge royal
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .btn-r,
[data-theme="light"] .ci-btn,
[data-theme="light"] .fbtn {
  background:  linear-gradient(145deg, #DC3349, #C8102E);
  border-color: transparent;
  color:        #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0    2px 10px rgba(200,16,46,.28),
    0    1px 3px  rgba(200,16,46,.18);
}
[data-theme="light"] .btn-r:hover,
[data-theme="light"] .ci-btn:hover,
[data-theme="light"] .fbtn:hover {
  background:  linear-gradient(145deg, #C8102E, #9A0D24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0    6px 24px rgba(200,16,46,.36),
    0    0 24px   rgba(200,16,46,.20),
    inset 0 0 0 1px rgba(198,168,91,.28);
}
[data-theme="light"] .btn-ghost {
  border-color: rgba(28,44,91,.20);
  color:        var(--tx2);
  background:   rgba(255,255,255,.50);
}
[data-theme="light"] .btn-ghost:hover {
  border-color: rgba(200,16,46,.36);
  color:        var(--r);
  background:   rgba(200,16,46,.06);
  box-shadow:   0 2px 12px rgba(200,16,46,.12);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § T. BADGES + SECTEUR CARD
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .badge {
  background:   linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,247,244,.82));
  border-color: rgba(28,44,91,.12);
  color:        var(--tx2);
  box-shadow:   inset 0 1px 0 rgba(255,255,255,1), 0 1px 3px rgba(28,44,91,.05);
}
[data-theme="light"] .secteur-card {
  background:
    radial-gradient(ellipse 85% 65% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(28,44,91,.045), transparent 60%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 58%, #F3F6FB 100%);
  border-color: rgba(28,44,91,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 28px rgba(28,44,91,.025),
    0    1px 2px rgba(28,44,91,.04),
    0    8px 22px rgba(28,44,91,.06);
}
[data-theme="light"] .secteur-card:hover {
  border-color: rgba(28,44,91,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 38px rgba(28,44,91,.055),
    0    4px 12px rgba(28,44,91,.08),
    0    18px 44px rgba(28,44,91,.12);
  transform: translateY(-3px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § U. TÉMOIGNAGES
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .testi-card {
  background:
    radial-gradient(ellipse 80% 60% at 14% 8%, rgba(255,255,255,.98), transparent 56%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 60%, #F3F6FB 100%);
  border:        1px solid rgba(198,168,91,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 28px rgba(198,168,91,.025),
    0    1px 2px rgba(28,44,91,.04),
    0    8px 22px rgba(28,44,91,.06);
}
[data-theme="light"] .testi-card:hover {
  border-color: rgba(198,168,91,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 38px rgba(198,168,91,.06),
    0    4px 12px rgba(198,168,91,.10),
    0    18px 44px rgba(198,168,91,.14);
  transform: translateY(-2px);
}
[data-theme="light"] .ts-arrow {
  background:   linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,247,244,.88));
  border-color: rgba(28,44,91,.14);
  color:        var(--tx2);
  box-shadow:   inset 0 1px 0 rgba(255,255,255,1), 0 2px 8px rgba(28,44,91,.07);
}
[data-theme="light"] .ts-arrow:hover {
  background:   linear-gradient(145deg, #DC3349, #C8102E);
  border-color: #C8102E;
  color:        #FFFFFF;
  box-shadow:   0 4px 14px rgba(200,16,46,.30);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § V. CI-CARD (CTA)
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .ci-card {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(200,16,46,.045), transparent 65%),
    radial-gradient(ellipse 80% 60% at 12% 8%, rgba(255,255,255,.98), transparent 56%),
    linear-gradient(158deg, #FFFFFF 0%, #FAF8F3 60%, #F3F6FB 100%);
  border-color: rgba(200,16,46,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 60px rgba(200,16,46,.040),
    0    1px 2px  rgba(200,16,46,.06),
    0    20px 56px rgba(200,16,46,.12);
}
[data-theme="light"] .ci-glow {
  background: radial-gradient(ellipse, rgba(200,16,46,.10) 0%, transparent 65%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   § W. TYPOGRAPHIE + SCROLLBAR
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 { color: var(--tx); }
[data-theme="light"] p,
[data-theme="light"] li  { color: var(--tx2); }
[data-theme="light"] .disp em {
  color:       var(--r);
  text-shadow: 0 2px 14px rgba(200,16,46,.14);
}
[data-theme="light"] .eye { color: rgba(138,111,42,.86); }
[data-theme="light"] .eye::before {
  background: linear-gradient(90deg,
    var(--rs-gold) 0%,   var(--rs-gold) 38%,
    var(--rs-navy) 38%,  var(--rs-navy) 44%,
    var(--r)       44%,  var(--r)       100%);
}
[data-theme="light"] *::-webkit-scrollbar-track {
  background: var(--bg2);
}
[data-theme="light"] *::-webkit-scrollbar-thumb {
  background:   linear-gradient(180deg, var(--rs-gold) 0%, var(--r) 55%, var(--rs-red-deep) 100%);
  border-color: var(--bg2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE v6 — SURFACES SOLIDES (anti-ghost, anti-fog)
   ══════════════════════════════════════════════════════════════════════════════
   Diagnostic v5 :
     · backdrop-filter + rgba(.94) sur nav/pill/ticker = effet "ghost"
     · halos cumulés trop nombreux = effet "brume sale"
     · ombres rgba(0,0,0,...) = grises non chaudes
     · règles dark @media !important non couvertes

   Principes v6 :
     · SURFACES SOLIDES — hex pur (#FBFCFE, #FAF8F3, #FFFFFF), zéro rgba .X
     · AUCUN backdrop-filter (suppression du glass)
     · OMBRES CHAUDES — teintées Stewart (rouge/or/navy), jamais noires pures
     · !important sur backgrounds critiques pour battre @media + DS10
     · Halos RARES — un seul par section, pas de cumul
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── § A. VARIABLES — Palette propre, pas de transparence ─────────────────── */
[data-theme="light"] {
  --bg:   #FBFCFE;
  --bg2:  #F3F6FB;
  --bg3:  #EBEFF6;
  --bg4:  #E5DEC8;
  --sf:   #FFFFFF;       /* SOLIDE — fini var(--sf) translucide */
  --sf2:  #FAF8F3;
  --sf3:  #FBFCFE;
  --bd:   #E2E8F1;       /* bordure ivoire warm */
  --bd2:  #D4C9B0;
  --tx:   #1A1B22;
  --tx2:  #4A4C5A;
  --tx3:  #8A8C9B;
  --gl:   #FBFCFE;       /* nav SOLIDE */
  --r:            #C8102E;
  --r-d:          #9A0D24;
  --r-l:          #DC3349;
  --r-s:          rgba(200,16,46,.06);
  --r-b:          rgba(200,16,46,.22);
  --r-g:          rgba(200,16,46,.10);
  --rs-red:       #C8102E;
  --rs-red-deep:  #9A0D24;
  --rs-navy:      #1C2C5B;
  --rs-green:     #0B5D4B;
  --rs-gold:      #C6A85B;
  --rs-gold-deep: #8A6F2A;
  --rs-ivory:     #FAF8F3;
  --navy-hi:      #1C2C5B;
  --forest-hi:    #0B5D4B;
  --gold-hi:      #8A6F2A;
}

/* ─── § B. BODY — Halo unique discret ─────────────────────────────────────── */
[data-theme="light"] body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(200,16,46,.040), transparent 65%),
    #FBFCFE !important;
  color: var(--tx);
}
[data-theme="light"] body::before {
  opacity: .06;
  mix-blend-mode: multiply;
}

/* ─── § C. TARTAN — Ultra-subtil ──────────────────────────────────────────── */
[data-theme="light"] .tartan {
  filter:  saturate(.90) brightness(.82) contrast(1.10);
  opacity: 1;
}
[data-theme="light"] .tartan-light {
  opacity:        .26 !important;
  mix-blend-mode: multiply;
  filter:         saturate(.70) brightness(.86) contrast(1.04);
}
[data-theme="light"] .tartan::after { display: none !important; }

/* ─── § D. NAV — SOLIDE, pas de blur ─────────────────────────────────────── */
[data-theme="light"] #nav,
[data-theme="light"] #nav.scrolled {
  background:      #FBFCFE !important;
  border-bottom:   1px solid #E2E8F1 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 0    rgba(22,30,58,.10),
    0    4px 20px rgba(22,30,58,.08) !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .nav-link        { color: var(--tx2) !important; }
[data-theme="light"] .nav-link:hover  { color: var(--r)   !important; }
[data-theme="light"] .nav-link.active { color: var(--r)   !important; }

/* ─── § E. HERO — Halos très limités, fog supprimé ───────────────────────── */
[data-theme="light"] #hero {
  background:
    radial-gradient(ellipse 48% 50% at 18% 44%, rgba(200,16,46,.075), transparent 64%),
    radial-gradient(ellipse 38% 30% at 80% 24%, rgba(198,168,91,.060), transparent 60%),
    linear-gradient(135deg, #FAF8F3 0%, #FBFCFE 50%, #F3F6FB 100%) !important;
}
[data-theme="light"] #hero::before {
  background:
    linear-gradient(90deg,
      rgba(248,247,244,.42) 0%,
      rgba(248,247,244,.18) 38%,
      transparent 68%) !important;
}
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(270deg,
    transparent 0%,
    rgba(248,247,244,.20) 60%,
    rgba(248,247,244,.46) 100%) !important;
}
[data-theme="light"] .hero-tartan-glow {
  background:
    radial-gradient(ellipse 50% 40% at 64% 42%, rgba(198,168,91,.080), transparent 62%),
    radial-gradient(ellipse 38% 30% at 76% 64%, rgba(11,93,75,.060),   transparent 60%) !important;
}
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg, rgba(248,247,244,.30) 0%, transparent 28%) !important;
}
[data-theme="light"] .hero-creds {
  background:    #FAF8F3 !important;
  border:        1px solid #E2E8F1 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    6px 22px rgba(22,30,58,.14),
    0    2px 6px  rgba(22,30,58,.08) !important;
}
[data-theme="light"] .hero-creds .cred-val   { color: var(--tx)  !important; }
[data-theme="light"] .hero-creds .cred-label { color: var(--tx3) !important; }

/* ─── § F. CARTES — SOLIDES, ombres chaudes Stewart ──────────────────────── */
[data-theme="light"] .card,
[data-theme="light"] .svc-card,
[data-theme="light"] .trust-card,
[data-theme="light"] .secteur-card,
[data-theme="light"] .te-card-large,
[data-theme="light"] .te-card-sm,
[data-theme="light"] .te-card-row,
[data-theme="light"] .sw-card,
[data-theme="light"] .team-card,
[data-theme="light"] .cblk,
[data-theme="light"] .ct-card,
[data-theme="light"] .ct-form,
[data-theme="light"] .legal-info-card,
[data-theme="light"] .ck-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .testi-card,
[data-theme="light"] .ci-card,
[data-theme="light"] .sit-path {
  background: #FFFFFF !important;
  border:     1px solid #E8DFCB !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px  rgba(22,30,58,.06),
    0    8px 24px rgba(22,30,58,.10) !important;
}

/* ─── § G. SVC-CARD — Rotation Stewart : halo coin + ombre teintée ──────── */
/* 4n+1 ROUGE */
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+1) {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(200,16,46,.06), transparent 65%),
    #FFFFFF !important;
  border-color: #F2D5DA !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px  rgba(200,16,46,.05),
    0    8px 22px rgba(200,16,46,.09) !important;
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+1):hover {
  background:
    radial-gradient(ellipse 60% 50% at 96% 96%, rgba(200,16,46,.10), transparent 62%),
    #FFFFFF !important;
  border-color: #DC3349 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    4px 14px rgba(200,16,46,.16),
    0    20px 44px rgba(200,16,46,.20) !important;
  transform: translateY(-5px);
}

/* 4n+2 NAVY */
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+2) {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(28,44,91,.055), transparent 65%),
    #FFFFFF !important;
  border-color: #D2D6E3 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px  rgba(28,44,91,.05),
    0    8px 22px rgba(28,44,91,.10) !important;
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+2):hover {
  background:
    radial-gradient(ellipse 60% 50% at 96% 96%, rgba(28,44,91,.09), transparent 62%),
    #FFFFFF !important;
  border-color: #2A3D72 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    4px 14px rgba(28,44,91,.14),
    0    20px 44px rgba(28,44,91,.18) !important;
  transform: translateY(-5px);
}

/* 4n+3 VERT */
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+3) {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(11,93,75,.055), transparent 65%),
    #FFFFFF !important;
  border-color: #C8DDD6 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px  rgba(11,93,75,.05),
    0    8px 22px rgba(11,93,75,.10) !important;
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+3):hover {
  background:
    radial-gradient(ellipse 60% 50% at 96% 96%, rgba(11,93,75,.09), transparent 62%),
    #FFFFFF !important;
  border-color: #157760 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    4px 14px rgba(11,93,75,.14),
    0    20px 44px rgba(11,93,75,.18) !important;
  transform: translateY(-5px);
}

/* 4n+4 OR */
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+4) {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(198,168,91,.075), transparent 65%),
    #FFFFFF !important;
  border-color: #E8DCB6 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px  rgba(198,168,91,.06),
    0    8px 22px rgba(198,168,91,.12) !important;
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+4):hover {
  background:
    radial-gradient(ellipse 60% 50% at 96% 96%, rgba(198,168,91,.12), transparent 62%),
    #FFFFFF !important;
  border-color: #C6A85B !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    4px 14px rgba(198,168,91,.20),
    0    20px 44px rgba(198,168,91,.22) !important;
  transform: translateY(-5px);
}

/* ─── § H. SW-CARD (Logiciels) ───────────────────────────────────────────── */
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+1) {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(200,16,46,.06), transparent 65%),
    #FFFFFF !important;
  border-color: #F2D5DA !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px  rgba(200,16,46,.05),
    0    8px 22px rgba(200,16,46,.09) !important;
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+1):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(200,16,46,.10), transparent 62%), #FFFFFF !important;
  border-color: #DC3349 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 40px rgba(200,16,46,.18) !important;
  transform: translateY(-4px);
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+2) {
  background: radial-gradient(ellipse 50% 40% at 96% 96%, rgba(28,44,91,.055), transparent 65%), #FFFFFF !important;
  border-color: #D2D6E3 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(28,44,91,.05), 0 8px 22px rgba(28,44,91,.10) !important;
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+2):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(28,44,91,.09), transparent 62%), #FFFFFF !important;
  border-color: #2A3D72 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 40px rgba(28,44,91,.16) !important;
  transform: translateY(-4px);
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+3) {
  background: radial-gradient(ellipse 50% 40% at 96% 96%, rgba(11,93,75,.055), transparent 65%), #FFFFFF !important;
  border-color: #C8DDD6 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(11,93,75,.05), 0 8px 22px rgba(11,93,75,.10) !important;
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+3):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(11,93,75,.09), transparent 62%), #FFFFFF !important;
  border-color: #157760 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 40px rgba(11,93,75,.16) !important;
  transform: translateY(-4px);
}

/* ─── § I. ICÔNES — CAPSULES IVOIRE Stewart (anti-noir) ──────────────────── */
/* Base reset universel — IVOIRE LUMINEUX, jamais noir */
[data-theme="light"] .svc-ic,
[data-theme="light"] .sit-ic,
[data-theme="light"] .te-icon,
[data-theme="light"] .te-icon-sm,
[data-theme="light"] .sw-icon,
[data-theme="light"] .sec-ico,
[data-theme="light"] .ct-card-ico,
[data-theme="light"] .tb-icon,
[data-theme="light"] .sit-path-ic {
  background:      #FAF8F3 !important;
  border:          1px solid #E8DFCB !important;
  color:           var(--tx2) !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 3px rgba(22,30,58,.08) !important;
}

/* Mobile force aussi !important (battre @media max-width:900px line 4487) */
@media(max-width:900px) {
  [data-theme="light"] .svc-ic,
  [data-theme="light"] .sit-ic,
  [data-theme="light"] .te-icon,
  [data-theme="light"] .te-icon-sm,
  [data-theme="light"] .sw-icon,
  [data-theme="light"] .sec-ico,
  [data-theme="light"] .ct-card-ico,
  [data-theme="light"] .tb-icon {
    background: #FAF8F3 !important;
    border:     1px solid #E8DFCB !important;
    box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 3px rgba(22,30,58,.08) !important;
  }
}

/* SVC icônes Stewart — capsule ivoire + halo coloré au coin */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1) .svc-ic {
  background:
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(200,16,46,.18), transparent 70%),
    #FAF8F3 !important;
  border-color: #F2D5DA !important;
  color:        #C8102E !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    2px 10px rgba(200,16,46,.14) !important;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2) .svc-ic {
  background:
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(28,44,91,.16), transparent 70%),
    #FAF8F3 !important;
  border-color: #D2D6E3 !important;
  color:        #1C2C5B !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    2px 10px rgba(28,44,91,.12) !important;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3) .svc-ic {
  background:
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(11,93,75,.16), transparent 70%),
    #FAF8F3 !important;
  border-color: #C8DDD6 !important;
  color:        #0B5D4B !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    2px 10px rgba(11,93,75,.12) !important;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4) .svc-ic {
  background:
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(198,168,91,.22), transparent 70%),
    #FAF8F3 !important;
  border-color: #E8DCB6 !important;
  color:        #8A6F2A !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    2px 10px rgba(198,168,91,.16) !important;
}

/* SVC hover — remplissage solide Stewart */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1):hover .svc-ic {
  background:   #C8102E !important;
  color:        #FFFFFF !important;
  border-color: #C8102E !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0    4px 14px rgba(200,16,46,.40),
    0    0 22px   rgba(200,16,46,.24) !important;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2):hover .svc-ic {
  background:   #1C2C5B !important;
  color:        #FFFFFF !important;
  border-color: #1C2C5B !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0    4px 14px rgba(28,44,91,.34),
    0    0 22px   rgba(28,44,91,.20) !important;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3):hover .svc-ic {
  background:   #0B5D4B !important;
  color:        #FFFFFF !important;
  border-color: #0B5D4B !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0    4px 14px rgba(11,93,75,.32),
    0    0 22px   rgba(11,93,75,.18) !important;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4):hover .svc-ic {
  background:   #C6A85B !important;
  color:        #FFFFFF !important;
  border-color: #C6A85B !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0    4px 14px rgba(198,168,91,.46),
    0    0 22px   rgba(198,168,91,.26) !important;
}

/* SW icônes Stewart — capsule ivoire + halo coloré */
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1) .sw-icon {
  background:
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(200,16,46,.18), transparent 70%),
    #FAF8F3 !important;
  border-color: #F2D5DA !important;
  color:        #C8102E !important;
  box-shadow:   inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(200,16,46,.14) !important;
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2) .sw-icon {
  background:
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(28,44,91,.16), transparent 70%),
    #FAF8F3 !important;
  border-color: #D2D6E3 !important;
  color:        #1C2C5B !important;
  box-shadow:   inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(28,44,91,.12) !important;
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3) .sw-icon {
  background:
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(11,93,75,.16), transparent 70%),
    #FAF8F3 !important;
  border-color: #C8DDD6 !important;
  color:        #0B5D4B !important;
  box-shadow:   inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(11,93,75,.12) !important;
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1):hover .sw-icon {
  background: #C8102E !important; color: #FFFFFF !important; border-color: #C8102E !important;
  box-shadow: 0 4px 14px rgba(200,16,46,.38), 0 0 22px rgba(200,16,46,.22) !important;
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2):hover .sw-icon {
  background: #1C2C5B !important; color: #FFFFFF !important; border-color: #1C2C5B !important;
  box-shadow: 0 4px 14px rgba(28,44,91,.32), 0 0 22px rgba(28,44,91,.18) !important;
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3):hover .sw-icon {
  background: #0B5D4B !important; color: #FFFFFF !important; border-color: #0B5D4B !important;
  box-shadow: 0 4px 14px rgba(11,93,75,.30), 0 0 22px rgba(11,93,75,.16) !important;
}

/* Trust éditorial icônes */
[data-theme="light"] .te-col-left  .te-icon {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(200,16,46,.18), transparent 70%), #FAF8F3 !important;
  border-color: #F2D5DA !important; color: #C8102E !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(200,16,46,.14) !important;
}
[data-theme="light"] .te-col-right .te-icon {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(28,44,91,.16), transparent 70%), #FAF8F3 !important;
  border-color: #D2D6E3 !important; color: #1C2C5B !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(28,44,91,.12) !important;
}
[data-theme="light"] .te-col-left .te-card-sm:last-child .te-icon {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(11,93,75,.16), transparent 70%), #FAF8F3 !important;
  border-color: #C8DDD6 !important; color: #0B5D4B !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(11,93,75,.12) !important;
}
[data-theme="light"] .te-col-left .te-card-large:hover .te-icon {
  background: #C8102E !important; color: #FFFFFF !important; border-color: #C8102E !important;
  box-shadow: 0 4px 14px rgba(200,16,46,.34) !important;
}
[data-theme="light"] .te-col-right .te-card-large:hover .te-icon {
  background: #1C2C5B !important; color: #FFFFFF !important; border-color: #1C2C5B !important;
  box-shadow: 0 4px 14px rgba(28,44,91,.28) !important;
}
[data-theme="light"] .te-col-left .te-card-sm:last-child:hover .te-icon {
  background: #0B5D4B !important; color: #FFFFFF !important; border-color: #0B5D4B !important;
  box-shadow: 0 4px 14px rgba(11,93,75,.26) !important;
}

/* Secteurs icône */
[data-theme="light"] .sec-ico {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(28,44,91,.16), transparent 70%), #FAF8F3 !important;
  border-color: #D2D6E3 !important; color: #1C2C5B !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(28,44,91,.10) !important;
}
[data-theme="light"] .secteur-card:hover .sec-ico {
  background: #1C2C5B !important; color: #FFFFFF !important; border-color: #1C2C5B !important;
  box-shadow: 0 4px 14px rgba(28,44,91,.30) !important;
}

/* Trust bar icône — or doux */
[data-theme="light"] .tb-icon {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(198,168,91,.20), transparent 70%), #FAF8F3 !important;
  border-color: #E8DCB6 !important; color: #8A6F2A !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 4px rgba(198,168,91,.14) !important;
}
[data-theme="light"] .tb-item:hover .tb-icon {
  background: #C6A85B !important; color: #FFFFFF !important; border-color: #C6A85B !important;
  box-shadow: 0 4px 14px rgba(198,168,91,.40) !important;
}

/* ─── § J. SECTIONS — Halo unique discret par section ────────────────────── */
[data-theme="light"] #services {
  background:
    radial-gradient(ellipse 60% 45% at 12% 22%, rgba(200,16,46,.045), transparent 64%),
    #FBFCFE !important;
}
[data-theme="light"] #logiciels {
  background:
    radial-gradient(ellipse 60% 45% at 88% 22%, rgba(28,44,91,.042), transparent 64%),
    #FBFCFE !important;
}
[data-theme="light"] #situations {
  background:
    radial-gradient(ellipse 60% 45% at 18% 26%, rgba(11,93,75,.045), transparent 64%),
    #FBFCFE !important;
}
[data-theme="light"] #equipe {
  background:
    radial-gradient(ellipse 55% 40% at 50% 28%, rgba(28,44,91,.038), transparent 64%),
    #FBFCFE !important;
}
[data-theme="light"] #secteurs {
  background:
    radial-gradient(ellipse 60% 45% at 84% 26%, rgba(28,44,91,.040), transparent 64%),
    #FBFCFE !important;
}
[data-theme="light"] #contact {
  background:
    radial-gradient(ellipse 60% 45% at 22% 30%, rgba(200,16,46,.038), transparent 64%),
    #FBFCFE !important;
}
[data-theme="light"] #faq {
  background:
    radial-gradient(ellipse 55% 40% at 50% 22%, rgba(200,16,46,.038), transparent 64%),
    #FBFCFE !important;
}
[data-theme="light"] #temoignages {
  background:
    radial-gradient(ellipse 55% 38% at 50% 30%, rgba(198,168,91,.038), transparent 64%),
    #FBFCFE !important;
}

/* ─── § K. TRUST BAR — SOLIDE ────────────────────────────────────────────── */
[data-theme="light"] #trust-bar {
  background:    #FAF8F3 !important;
  border-color:  #E2E8F1 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    2px 12px rgba(22,30,58,.08) !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .tb-veil {
  background: linear-gradient(90deg, #FAF8F3, rgba(250,248,243,.70) 50%, #FAF8F3) !important;
}

/* ─── § L. TICKER — SOLIDE ──────────────────────────────────────────────── */
[data-theme="light"] .ticker-wrap {
  background:    #FAF8F3 !important;
  border-color:  #E2E8F1 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    2px 8px rgba(22,30,58,.06) !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .ticker-wrap::before { opacity: .10 !important; }
[data-theme="light"] .ti       { color: rgba(74,76,90,.62) !important; }
[data-theme="light"] .ti:hover { color: rgba(74,76,90,.94) !important; }

/* ─── § M. PILL BAR — SOLIDE + glow rouge bouton ─────────────────────────── */
[data-theme="light"] #pill {
  background:    #FAF8F3 !important;
  border-color:  #E2E8F1 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    8px 28px rgba(22,30,58,.14) !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .pill-tartan .tartan-light {
  opacity: .08 !important;
  filter:  saturate(.30) brightness(.70) contrast(.94);
}
[data-theme="light"] .pill-txt strong { color: var(--tx)  !important; text-shadow: none !important; }
[data-theme="light"] .pill-txt span   { color: var(--tx3) !important; }
[data-theme="light"] .pill-dl {
  background: #C8102E !important;
  color:      #FFFFFF !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0    2px 12px rgba(200,16,46,.38),
    0    0 18px   rgba(200,16,46,.20) !important;
}
[data-theme="light"] .pill-chat {
  background:   #FAF8F3 !important;
  border-color: #E2E8F1 !important;
  color:        var(--tx2) !important;
}

/* ─── § N. CHATBOT — SOLIDE ─────────────────────────────────────────────── */
[data-theme="light"] #cb-win {
  background:    #FFFFFF !important;
  border-color:  #E2E8F1 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    24px 56px rgba(22,30,58,.18),
    0    4px 12px  rgba(22,30,58,.10) !important;
}
[data-theme="light"] .cb-head-tartan .tartan {
  filter:  saturate(1.05) brightness(.74) contrast(1.14);
  opacity: .65 !important;
}
[data-theme="light"] .cb-head-overlay {
  background:
    linear-gradient(90deg,
      rgba(200,16,46,.20) 0 2px,
      rgba(198,168,91,.16) 2px 3.5px,
      rgba(28,44,91,.16) 3.5px 5px,
      transparent 5px 100%),
    #FAF8F3 !important;
}
[data-theme="light"] .cb-head::after {
  background: linear-gradient(90deg,
    rgba(200,16,46,.26) 0%,
    rgba(198,168,91,.20) 22%,
    rgba(200,16,46,.22) 50%,
    rgba(28,44,91,.16) 78%,
    rgba(11,93,75,.14) 100%) !important;
}
[data-theme="light"] .cb-m.bot .cb-bub {
  background:    #FAF8F3 !important;
  border-color:  #E2E8F1 !important;
  color:         var(--tx2) !important;
  box-shadow:    inset 0 1px 0 #FFFFFF, 0 1px 3px rgba(22,30,58,.06) !important;
}
[data-theme="light"] .cb-foot {
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(200,16,46,.08) 20%,
      rgba(198,168,91,.06) 50%,
      transparent 78%) top / 100% 1px no-repeat,
    #FAF8F3 !important;
}

/* ─── § O. FAQ — Cartes solides + glow rouge à l'ouverture ──────────────── */
[data-theme="light"] .faq-item {
  background:    #FFFFFF !important;
  border:        1px solid #E8DFCB !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px rgba(22,30,58,.05),
    0    6px 18px rgba(22,30,58,.08) !important;
}
[data-theme="light"] .faq-item:hover {
  border-color: #F2D5DA !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    2px 6px  rgba(200,16,46,.08),
    0    12px 32px rgba(200,16,46,.14) !important;
}
[data-theme="light"] .faq-item.open {
  border-color: #DC3349 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    2px 6px  rgba(200,16,46,.10),
    0    12px 36px rgba(200,16,46,.18) !important;
}
[data-theme="light"] .faq-q:hover { background: rgba(200,16,46,.030) !important; }
[data-theme="light"] .faq-a-inner {
  background:       rgba(200,16,46,.020) !important;
  border-top-color: rgba(200,16,46,.10)  !important;
}
[data-theme="light"] .faq-icon {
  background:   #FAF8F3 !important;
  border-color: #E2E8F1 !important;
  color:        var(--tx3) !important;
}
[data-theme="light"] .faq-q:hover .faq-icon,
[data-theme="light"] .faq-item.open .faq-icon {
  background:   #C8102E !important;
  border-color: #C8102E !important;
  color:        #FFFFFF !important;
}

/* ─── § P. SITUATIONS — sit-path rotation Stewart ────────────────────────── */
[data-theme="light"] .sit-bg .tartan-light {
  opacity: .08 !important;
  filter:  saturate(.30) brightness(.70) contrast(.96);
}
[data-theme="light"] .sit-bg-fade {
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(248,247,244,.50), transparent),
    linear-gradient(180deg, #FBFCFE 0%, transparent 18%, transparent 82%, #FBFCFE 100%) !important;
}

[data-theme="light"] .sit-paths .sit-path {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(200,16,46,.055), transparent 65%),
    #FFFFFF !important;
  border: 1px solid #F2D5DA !important;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px  rgba(200,16,46,.05),
    0    8px 22px rgba(200,16,46,.08) !important;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2) {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(28,44,91,.052), transparent 65%),
    #FFFFFF !important;
  border-color: #D2D6E3 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px  rgba(28,44,91,.04),
    0    8px 22px rgba(28,44,91,.08) !important;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3) {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(11,93,75,.052), transparent 65%),
    #FFFFFF !important;
  border-color: #C8DDD6 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px  rgba(11,93,75,.04),
    0    8px 22px rgba(11,93,75,.08) !important;
}

[data-theme="light"] .sit-paths .sit-path:hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(200,16,46,.10), transparent 62%), #FFFFFF !important;
  border-color: #DC3349 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 4px 12px rgba(200,16,46,.12), 0 18px 44px rgba(200,16,46,.16) !important;
  transform: translateY(-3px);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(28,44,91,.09), transparent 62%), #FFFFFF !important;
  border-color: #2A3D72 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 4px 12px rgba(28,44,91,.10), 0 18px 44px rgba(28,44,91,.14) !important;
  transform: translateY(-3px);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(11,93,75,.09), transparent 62%), #FFFFFF !important;
  border-color: #157760 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 4px 12px rgba(11,93,75,.10), 0 18px 44px rgba(11,93,75,.14) !important;
  transform: translateY(-3px);
}

/* Sit-path icônes Stewart contextuelles */
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+1) .sit-path-ic {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(200,16,46,.20), transparent 70%), #FAF8F3 !important;
  border: 1px solid #F2D5DA !important; color: #C8102E !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(200,16,46,.12) !important;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2) .sit-path-ic {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(28,44,91,.18), transparent 70%), #FAF8F3 !important;
  border: 1px solid #D2D6E3 !important; color: #1C2C5B !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(28,44,91,.10) !important;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3) .sit-path-ic {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(11,93,75,.18), transparent 70%), #FAF8F3 !important;
  border: 1px solid #C8DDD6 !important; color: #0B5D4B !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(11,93,75,.10) !important;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+1):hover .sit-path-ic {
  background: #C8102E !important; color: #FFFFFF !important; border-color: #C8102E !important;
  box-shadow: 0 4px 14px rgba(200,16,46,.36) !important; transform: scale(1.06);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2):hover .sit-path-ic {
  background: #1C2C5B !important; color: #FFFFFF !important; border-color: #1C2C5B !important;
  box-shadow: 0 4px 14px rgba(28,44,91,.32) !important; transform: scale(1.06);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3):hover .sit-path-ic {
  background: #0B5D4B !important; color: #FFFFFF !important; border-color: #0B5D4B !important;
  box-shadow: 0 4px 14px rgba(11,93,75,.30) !important; transform: scale(1.06);
}

[data-theme="light"] .sit-path-t { color: var(--tx)  !important; font-weight: 600; }
[data-theme="light"] .sit-path-d { color: var(--tx2) !important; }
[data-theme="light"] .sit-path:hover .sit-path-t { color: var(--r) !important; }
[data-theme="light"] .sit-path::before { opacity: .52 !important; }

/* ─── § Q. FOOTER — SOLIDE perle ─────────────────────────────────────────── */
[data-theme="light"] footer {
  background:
    radial-gradient(ellipse 50% 35% at 50% 0%, rgba(200,16,46,.040), transparent 60%),
    radial-gradient(ellipse 40% 30% at 95% 100%, rgba(28,44,91,.034), transparent 58%),
    #F3F6FB !important;
  border-top: 1px solid #C6A85B !important;
  color:      var(--tx2) !important;
}
[data-theme="light"] .ft-link       { color: var(--tx3) !important; }
[data-theme="light"] .ft-link:hover { color: var(--r)   !important; }
[data-theme="light"] .ft-sep        { background: #D4C9B0 !important; }
[data-theme="light"] .ft-copy       { color: var(--tx3) !important; }
[data-theme="light"] .ft-cert-badge {
  background:   #FAF8F3 !important;
  border-color: #E2E8F1 !important;
}
[data-theme="light"] .ft-cert-badge:hover {
  background:   #FFFFFF !important;
  border-color: #DC3349 !important;
}

/* ─── § R. FORMULAIRES ───────────────────────────────────────────────────── */
[data-theme="light"] .ct-form,
[data-theme="light"] .ct-card {
  background:    #FFFFFF !important;
  border:        1px solid #E8DFCB !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px rgba(22,30,58,.05),
    0    8px 24px rgba(22,30,58,.10) !important;
}
[data-theme="light"] .ct-field,
[data-theme="light"] .ct-input,
[data-theme="light"] .ct-textarea,
[data-theme="light"] .ct-select {
  background:   #FAF8F3 !important;
  border:       1px solid #D4C9B0 !important;
  color:        var(--tx) !important;
  box-shadow:   inset 0 1px 2px rgba(22,30,58,.06) !important;
}
[data-theme="light"] .ct-field:focus,
[data-theme="light"] .ct-input:focus,
[data-theme="light"] .ct-textarea:focus {
  border-color: var(--r) !important;
  background:   #FFFFFF !important;
  box-shadow:
    inset 0 1px 2px rgba(22,30,58,.04),
    0 0 0 3px rgba(200,16,46,.12) !important;
}
[data-theme="light"] .ct-label     { color: var(--tx2) !important; }
[data-theme="light"] ::placeholder { color: var(--tx3) !important; opacity: 1; }

/* ─── § S. BOUTONS — Rouge royal solide + glow ───────────────────────────── */
[data-theme="light"] .btn-r,
[data-theme="light"] .ci-btn,
[data-theme="light"] .fbtn {
  background:   #C8102E !important;
  border-color: transparent !important;
  color:        #FFFFFF !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0    2px 10px rgba(200,16,46,.32),
    0    1px 3px  rgba(200,16,46,.20) !important;
}
[data-theme="light"] .btn-r:hover,
[data-theme="light"] .ci-btn:hover,
[data-theme="light"] .fbtn:hover {
  background:   #9A0D24 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0    6px 24px rgba(200,16,46,.42),
    0    0 24px   rgba(200,16,46,.26),
    inset 0 0 0 1px rgba(198,168,91,.34) !important;
}
[data-theme="light"] .btn-ghost {
  background:   #FAF8F3 !important;
  border:       1px solid #D4C9B0 !important;
  color:        var(--tx2) !important;
}
[data-theme="light"] .btn-ghost:hover {
  background:   #FFFFFF !important;
  border-color: #DC3349 !important;
  color:        var(--r) !important;
  box-shadow:   0 2px 12px rgba(200,16,46,.14) !important;
}

/* ─── § T. BADGES + SECTEUR + TÉMOIGNAGES + CTA ──────────────────────────── */
[data-theme="light"] .badge {
  background:   #FAF8F3 !important;
  border:       1px solid #E2E8F1 !important;
  color:        var(--tx2) !important;
  box-shadow:   inset 0 1px 0 #FFFFFF, 0 1px 3px rgba(22,30,58,.06) !important;
}
[data-theme="light"] .secteur-card {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(28,44,91,.045), transparent 65%),
    #FFFFFF !important;
  border-color: #D2D6E3 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px rgba(28,44,91,.04),
    0    8px 22px rgba(28,44,91,.08) !important;
}
[data-theme="light"] .secteur-card:hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(28,44,91,.09), transparent 62%), #FFFFFF !important;
  border-color: #2A3D72 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 4px 12px rgba(28,44,91,.10), 0 18px 44px rgba(28,44,91,.14) !important;
  transform: translateY(-3px);
}
[data-theme="light"] .testi-card {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(198,168,91,.058), transparent 65%),
    #FFFFFF !important;
  border: 1px solid #E8DCB6 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px rgba(198,168,91,.06),
    0    8px 22px rgba(198,168,91,.12) !important;
}
[data-theme="light"] .testi-card:hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(198,168,91,.12), transparent 62%), #FFFFFF !important;
  border-color: #C6A85B !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 4px 12px rgba(198,168,91,.16), 0 18px 44px rgba(198,168,91,.20) !important;
  transform: translateY(-2px);
}
[data-theme="light"] .ts-arrow {
  background:   #FAF8F3 !important;
  border:       1px solid #D4C9B0 !important;
  color:        var(--tx2) !important;
  box-shadow:   inset 0 1px 0 #FFFFFF, 0 2px 8px rgba(22,30,58,.08) !important;
}
[data-theme="light"] .ts-arrow:hover {
  background:   #C8102E !important;
  border-color: #C8102E !important;
  color:        #FFFFFF !important;
  box-shadow:   0 4px 14px rgba(200,16,46,.34) !important;
}
[data-theme="light"] .ci-card {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(200,16,46,.052), transparent 65%),
    #FFFFFF !important;
  border-color: #F2D5DA !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px  rgba(200,16,46,.06),
    0    20px 56px rgba(200,16,46,.14) !important;
}
[data-theme="light"] .ci-card-mask {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(200,16,46,.040), transparent 65%),
    #FFFFFF !important;
}
[data-theme="light"] .ci-glow {
  background: radial-gradient(ellipse, rgba(200,16,46,.12) 0%, transparent 65%) !important;
}

/* ─── § U. TYPOGRAPHIE + SCROLLBAR ───────────────────────────────────────── */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 { color: var(--tx) !important; }
[data-theme="light"] p,
[data-theme="light"] li  { color: var(--tx2) !important; }
[data-theme="light"] .svc-t,
[data-theme="light"] .sw-card-t,
[data-theme="light"] .te-card-t  { color: var(--tx) !important; }
[data-theme="light"] .svc-d,
[data-theme="light"] .sw-card-d,
[data-theme="light"] .te-card-d  { color: var(--tx2) !important; }
[data-theme="light"] .disp em {
  color:       var(--r) !important;
  text-shadow: 0 2px 14px rgba(200,16,46,.16);
}
[data-theme="light"] .eye { color: #8A6F2A !important; }
[data-theme="light"] .eye::before {
  background: linear-gradient(90deg,
    #C6A85B 0%,   #C6A85B 38%,
    #1C2C5B 38%,  #1C2C5B 44%,
    #C8102E 44%,  #C8102E 100%) !important;
}
[data-theme="light"] *::-webkit-scrollbar-track {
  background: #F3F6FB !important;
}
[data-theme="light"] *::-webkit-scrollbar-thumb {
  background:   linear-gradient(180deg, #C6A85B 0%, #C8102E 55%, #9A0D24 100%) !important;
  border-color: #F3F6FB !important;
}

/* ══ FIX CRITIQUE — Bande noire #services::before ══════════════════════════
   Cause : #services::before ligne 4885 + mobile ligne 5112 utilisent un
   voile linear-gradient(180deg, rgba(7,6,5,.90)...) à 78-90% d'opacité —
   non scopé dark mode → bande gris/noir traverse la section en light mode.
   Spec. originale : 1-0-1 (ID + ::before). Mon override : 1-1-1 → gagne.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] #services::before {
  background:
    radial-gradient(ellipse 80% 55% at 15% 50%, rgba(200,16,46,.040), transparent 70%),
    linear-gradient(180deg,
      rgba(248,247,244,.18) 0%,
      transparent 22%,
      transparent 78%,
      rgba(248,247,244,.18) 100%) !important;
}
@media(max-width:900px) {
  [data-theme="light"] #services::before {
    background:
      radial-gradient(ellipse 80% 55% at 15% 50%, rgba(200,16,46,.040), transparent 70%),
      linear-gradient(180deg,
        rgba(248,247,244,.18) 0%,
        transparent 22%,
        transparent 78%,
        rgba(248,247,244,.18) 100%) !important;
  }
}

/* Au passage : #services base background = solid clair (au cas où) */
[data-theme="light"] #services {
  background:
    radial-gradient(ellipse 60% 45% at 12% 22%, rgba(200,16,46,.045), transparent 64%),
    #FBFCFE !important;
}

/* ══ FIX — body::after ne doit jamais introduire du sombre en light ═══════ */
[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 70% 50% at 72% 18%, rgba(198,168,91,.06), transparent 66%),
    linear-gradient(180deg,
      rgba(248,247,244,.40) 0%,
      transparent 24%,
      transparent 78%,
      rgba(244,241,234,.36) 100%) !important;
}

/* ══ FIX — Tartan ENCORE plus subtil (intégré à la matière) ═══════════════ */
[data-theme="light"] .tartan-light {
  opacity:        .14 !important;
  mix-blend-mode: multiply;
  filter:         saturate(.60) brightness(.92) contrast(.96) !important;
}
[data-theme="light"] .tartan {
  filter:  saturate(.70) brightness(.92) contrast(.96) !important;
  opacity: .68 !important;
}
[data-theme="light"] body::before {
  opacity:        .04 !important;
  mix-blend-mode: multiply;
}

/* ══ FIX — #services .svc-grid .svc-card BASE (sans nth-child) ═════════════
   Spec. 1-2-0 — bat #services .svc-grid .svc-card = 1-2-0 par position.
   Le bloc DS noir à ligne 4910 fait rgba(10,9,8,.76) sur les cartes —
   on l'écrase ici en blanc.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] #services .svc-grid .svc-card {
  background: #FFFFFF !important;
  border:     1px solid #E8DFCB !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px rgba(22,30,58,.06),
    0    8px 22px rgba(22,30,58,.10) !important;
}
[data-theme="light"] #logiciels .sw-grid .sw-card {
  background: #FFFFFF !important;
  border:     1px solid #E8DFCB !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    1px 2px rgba(22,30,58,.06),
    0    8px 22px rgba(22,30,58,.10) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIX TARTAN — De fade à vivant, Stewart noble révélé
   ══════════════════════════════════════════════════════════════════════════════
   Problème : v6 + fix précédent avaient trop baissé l'opacité (.14) et la
   saturation (.60) → tartan invisible, fade, sans richesse Stewart.

   Principe :
     · mix-blend-mode: multiply sur blanc → couleurs vraies révélées
     · opacity .44-.52 → présence textile noble (pas dominante)
     · saturate(1.15) → rouges, bleus, verts vifs
     · brightness(.84) → garde la profondeur (sans laver)
     · contrast(1.16) → motif net, pas flou
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── TARTAN — Couleurs Stewart révélées ──────────────────────────────────── */
[data-theme="light"] .tartan {
  filter:  saturate(1.12) brightness(.80) contrast(1.20) !important;
  opacity: 1 !important;
}
[data-theme="light"] .tartan-light {
  opacity:        .48 !important;
  mix-blend-mode: multiply !important;
  filter:         saturate(1.10) brightness(.82) contrast(1.18) !important;
}

/* Body tartan — discret mais présent */
[data-theme="light"] body::before {
  opacity:        .10 !important;
  mix-blend-mode: multiply !important;
}

/* ─── HERO TARTAN PANEL — Pièce de textile sous lumière satinée ────────── */
/* Le panneau de droite du hero doit montrer une vraie matière Stewart */
[data-theme="light"] .hero-tartan-panel {
  position: relative;
}

/* Tartan plus vivant dans le panneau hero spécifiquement */
[data-theme="light"] .hero-tartan-panel .tartan,
[data-theme="light"] .hero-tartan-panel .tartan-light {
  opacity:        .56 !important;
  mix-blend-mode: multiply !important;
  filter:         saturate(1.18) brightness(.78) contrast(1.22) !important;
}

/* Voile satin réduit pour laisser respirer le tartan */
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(270deg,
    transparent 0%,
    rgba(248,247,244,.10) 60%,
    rgba(248,247,244,.32) 100%) !important;
}

/* ─── HERO PANEL — Halos Stewart riches (rouge / navy / vert / or) ─────── */
[data-theme="light"] .hero-tartan-glow {
  background:
    /* Or chaud — fil principal */
    radial-gradient(ellipse 50% 42% at 62% 40%, rgba(198,168,91,.22), transparent 64%),
    /* Vert forêt profond */
    radial-gradient(ellipse 38% 32% at 76% 64%, rgba(11,93,75,.18),   transparent 62%),
    /* Bleu Stewart noble */
    radial-gradient(ellipse 35% 28% at 82% 28%, rgba(28,44,91,.16),   transparent 60%),
    /* Rouge royal accent */
    radial-gradient(ellipse 30% 24% at 90% 50%, rgba(200,16,46,.14),  transparent 58%) !important;
  opacity: 1 !important;
  mix-blend-mode: multiply !important;
}

/* Hero global — halos Stewart plus présents */
[data-theme="light"] #hero {
  background:
    radial-gradient(ellipse 50% 56% at 16% 44%, rgba(200,16,46,.105), transparent 64%),
    radial-gradient(ellipse 40% 36% at 78% 20%, rgba(198,168,91,.088), transparent 60%),
    radial-gradient(ellipse 38% 28% at 70% 88%, rgba(28,44,91,.062),  transparent 62%),
    radial-gradient(ellipse 32% 22% at 95% 64%, rgba(11,93,75,.054),  transparent 60%),
    linear-gradient(135deg, #FAF8F3 0%, #FBFCFE 48%, #F3F6FB 100%) !important;
}

/* Fog hero réduit pour laisser tartan respirer */
[data-theme="light"] #hero::before {
  background:
    linear-gradient(90deg,
      rgba(248,247,244,.32) 0%,
      rgba(248,247,244,.12) 40%,
      transparent 68%) !important;
}

/* ─── SELVEDGE — Fil tartan visible (cards / situations / faq) ─────────── */
/* Les lignes verticales tartan sur le côté des cartes doivent vivre */
[data-theme="light"] .svc-card::before,
[data-theme="light"] .sw-card::before,
[data-theme="light"] .faq-item::before,
[data-theme="light"] .sit-path::before {
  opacity: .82 !important;
}

/* ─── SECTIONS — Variations textiles plus riches ──────────────────────── */
/* On garde les fonds clairs mais on intensifie les halos Stewart */
[data-theme="light"] #services {
  background:
    radial-gradient(ellipse 55% 42% at 10% 22%, rgba(200,16,46,.080), transparent 64%),
    radial-gradient(ellipse 42% 32% at 88% 78%, rgba(198,168,91,.058), transparent 58%),
    #FBFCFE !important;
}
[data-theme="light"] #logiciels {
  background:
    radial-gradient(ellipse 55% 42% at 88% 22%, rgba(28,44,91,.070),  transparent 64%),
    radial-gradient(ellipse 42% 32% at 12% 78%, rgba(200,16,46,.052), transparent 58%),
    #FBFCFE !important;
}
[data-theme="light"] #situations {
  background:
    radial-gradient(ellipse 55% 42% at 18% 26%, rgba(11,93,75,.080),  transparent 64%),
    radial-gradient(ellipse 42% 32% at 84% 74%, rgba(28,44,91,.055),  transparent 58%),
    #FBFCFE !important;
}
[data-theme="light"] #equipe {
  background:
    radial-gradient(ellipse 50% 38% at 50% 28%, rgba(28,44,91,.066),  transparent 64%),
    radial-gradient(ellipse 40% 30% at 12% 80%, rgba(200,16,46,.048), transparent 58%),
    #FBFCFE !important;
}
[data-theme="light"] #secteurs {
  background:
    radial-gradient(ellipse 55% 42% at 84% 26%, rgba(28,44,91,.072),  transparent 64%),
    radial-gradient(ellipse 42% 32% at 12% 76%, rgba(11,93,75,.052),  transparent 58%),
    radial-gradient(ellipse 36% 28% at 95% 90%, rgba(198,168,91,.044), transparent 60%),
    #FBFCFE !important;
}
[data-theme="light"] #contact {
  background:
    radial-gradient(ellipse 55% 42% at 22% 30%, rgba(200,16,46,.064),  transparent 64%),
    radial-gradient(ellipse 42% 32% at 78% 72%, rgba(198,168,91,.050), transparent 58%),
    #FBFCFE !important;
}
[data-theme="light"] #faq {
  background:
    radial-gradient(ellipse 50% 38% at 50% 22%, rgba(200,16,46,.062),  transparent 64%),
    radial-gradient(ellipse 40% 30% at 8% 78%,  rgba(28,44,91,.048),   transparent 58%),
    #FBFCFE !important;
}
[data-theme="light"] #temoignages {
  background:
    radial-gradient(ellipse 50% 38% at 88% 30%, rgba(198,168,91,.062), transparent 64%),
    radial-gradient(ellipse 42% 32% at 12% 76%, rgba(28,44,91,.044),   transparent 58%),
    #FBFCFE !important;
}

/* ─── HERO::before tartan body retiré sur le panneau (laissons respirer) ─ */
[data-theme="light"] .hero-tartan-panel::before {
  opacity: .14 !important;
}

/* ─── EYE (sous-titre) — fil tartan tricolore Stewart vif ──────────────── */
[data-theme="light"] .eye::before {
  background: linear-gradient(90deg,
    #C6A85B 0%,   #C6A85B 32%,
    #0B5D4B 32%,  #0B5D4B 40%,
    #1C2C5B 40%,  #1C2C5B 48%,
    #C8102E 48%,  #C8102E 100%) !important;
  width: 44px !important;
  height: 2px !important;
  box-shadow: 0 1px 4px rgba(198,168,91,.22);
}

/* ─── HERO CREDS — Plus de matière satinée ─────────────────────────────── */
[data-theme="light"] .hero-creds {
  background:
    linear-gradient(145deg, #FFFFFF 0%, #FAF8F3 60%, #F3F6FB 100%) !important;
  border:        1px solid #E2E8F1 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 0 24px rgba(198,168,91,.06),
    0    6px 24px rgba(22,30,58,.16),
    0    2px 6px  rgba(22,30,58,.10) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESTAURATION HERO LIGHT MODE — Identité Optinove premium
   ══════════════════════════════════════════════════════════════════════════════
   Scope strict : [data-theme="light"] uniquement. Dark mode intact.

   Restaure :
     · .hero-logo-deco — logo Optinove flottant à droite (animation heroDecoFloat 8s)
     · .hero-tartan-panel + .hero-tartan-inner — panneau tartan Stewart vivant
     · .hero-tartan-glow — halos Stewart rouge/or/navy/vert
     · #hero — profondeur et accents rouges
     · .hero-creds — bandeau crédibilité satin premium
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. LOGO FLOTTANT — Restauration visibilité + drop-shadow rouge ──────── */
[data-theme="light"] .hero-logo-deco {
  opacity: .14 !important;
  filter:
    drop-shadow(0 0 56px rgba(200,16,46,.32))
    drop-shadow(0 0 24px rgba(200,16,46,.22))
    drop-shadow(0 8px 32px rgba(22,30,58,.18)) !important;
  z-index: 2 !important;
}
/* L'animation heroDecoFloat est conservée (non scopée theme) */

/* ─── 2. HERO BACKGROUND — Profondeur Stewart, accents rouges dominants ───── */
[data-theme="light"] #hero {
  background:
    /* Rouge royal bloom gauche — accent fort */
    radial-gradient(ellipse 56% 62% at 14% 46%, rgba(200,16,46,.115), transparent 64%),
    /* Or chaud haut-droite */
    radial-gradient(ellipse 42% 36% at 78% 18%, rgba(198,168,91,.085), transparent 60%),
    /* Vert forêt accent mid-right */
    radial-gradient(ellipse 32% 26% at 88% 50%, rgba(11,93,75,.055),   transparent 60%),
    /* Bleu Stewart profondeur bas */
    radial-gradient(ellipse 40% 30% at 64% 86%, rgba(28,44,91,.060),   transparent 62%),
    /* Rouge accent bas-gauche (reconnexion identité) */
    radial-gradient(ellipse 30% 22% at 22% 92%, rgba(200,16,46,.055),  transparent 60%),
    /* Base satin */
    linear-gradient(135deg, #FAF8F3 0%, #FBFCFE 46%, #F3F6FB 100%) !important;
}

/* ─── 3. HERO PANEL — Tartan vivant, Stewart révélé sous lumière satinée ─── */
/* Réduire le voile pour laisser respirer le tartan */
[data-theme="light"] #hero::before {
  background:
    linear-gradient(90deg,
      rgba(248,247,244,.38) 0%,
      rgba(248,247,244,.14) 40%,
      transparent 66%) !important;
}

[data-theme="light"] .hero-tartan-panel {
  /* Conservation transform/skew du dark mode — pas de surcharge */
  opacity: 1;
}

/* Tartan dans le panneau — couleurs Stewart vivantes (multiply sur clair) */
[data-theme="light"] .hero-tartan-inner .tartan {
  opacity: .68 !important;
  mix-blend-mode: multiply !important;
  filter:  saturate(1.20) brightness(.76) contrast(1.24) !important;
}

/* Fade du panneau — gradient ivoire élégant vers le contenu, sans écraser */
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(90deg,
    rgba(248,247,244,.94) 0%,
    rgba(248,247,244,.42) 22%,
    rgba(248,247,244,.08) 50%,
    transparent 78%) !important;
  z-index: 2;
}

/* ─── 4. HERO TARTAN GLOW — Halos Stewart riches multiply ──────────────── */
[data-theme="light"] .hero-tartan-glow {
  background:
    /* Rouge royal — accent principal couture */
    radial-gradient(ellipse 50% 52% at 60% 46%, rgba(200,16,46,.28),  transparent 64%),
    /* Or chaud — fil noble */
    radial-gradient(ellipse 38% 32% at 76% 28%, rgba(198,168,91,.22), transparent 62%),
    /* Bleu Stewart — profondeur */
    radial-gradient(ellipse 34% 28% at 86% 62%, rgba(28,44,91,.16),   transparent 60%),
    /* Vert forêt — sous-jacent */
    radial-gradient(ellipse 28% 22% at 72% 78%, rgba(11,93,75,.14),   transparent 58%) !important;
  mix-blend-mode: multiply !important;
  opacity: 1 !important;
}

/* ─── 5. HERO::after fondu bas — ivoire ────────────────────────────────── */
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg, rgba(248,247,244,.40) 0%, transparent 26%) !important;
}

/* ─── 6. HERO CREDS — Bandeau satin premium ────────────────────────────── */
[data-theme="light"] .hero-creds {
  background:
    linear-gradient(145deg, #FFFFFF 0%, #FAF8F3 56%, #F3F6FB 100%) !important;
  border:        1px solid #E2E8F1 !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 0 28px rgba(198,168,91,.07),
    0    1px 3px  rgba(22,30,58,.08),
    0    8px 28px rgba(22,30,58,.16),
    0    2px 6px  rgba(200,16,46,.06) !important;
}
[data-theme="light"] .hc-val {
  color: var(--tx) !important;
  text-shadow: 0 1px 0 #FFFFFF;
}
[data-theme="light"] .hc-lbl {
  color: var(--tx3) !important;
}

/* ─── 7. ACCENTS ROUGES — Titre + badge "live" ─────────────────────────── */
[data-theme="light"] .hero-h em {
  color: #C8102E !important;
  text-shadow:
    0 1px 0  #FFFFFF,
    0 2px 18px rgba(200,16,46,.22),
    0 8px 30px rgba(200,16,46,.12) !important;
}
[data-theme="light"] .badge-r {
  background:
    linear-gradient(145deg, #FFFFFF 0%, rgba(200,16,46,.06) 100%) !important;
  border:    1px solid rgba(200,16,46,.32) !important;
  color:     #9A0D24 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    2px 10px rgba(200,16,46,.14) !important;
}
[data-theme="light"] .live-dot {
  background: #C8102E !important;
  box-shadow:
    0 0 0 3px rgba(200,16,46,.18),
    0 0 12px rgba(200,16,46,.46) !important;
}

/* ─── 8. HISTOIRE-LINK — Lien rouge royal ──────────────────────────────── */
[data-theme="light"] .histoire-link {
  color: #C8102E !important;
}
[data-theme="light"] .histoire-link:hover {
  color: #9A0D24 !important;
  text-shadow: 0 1px 8px rgba(200,16,46,.20);
}

/* ─── 9. HERO SUBTITLE — Texte éditorial ───────────────────────────────── */
[data-theme="light"] .hero-sub {
  color: var(--tx2) !important;
}

/* ─── 10. MOBILE — Logo masqué (comme dark mode), tartan plus discret ──── */
@media(max-width:900px) {
  [data-theme="light"] .hero-tartan-inner .tartan {
    opacity: .42 !important;
  }
  [data-theme="light"] .hero-tartan-glow {
    opacity: .82 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO LIGHT MODE — Tartan visible + logo flottant + identité Optinove
   ══════════════════════════════════════════════════════════════════════════════
   Diagnostic des correctifs précédents :
     · .hero-tartan-panel::after avec rgba(.94) à 0% → voile blanc opaque
       qui masquait 78% du panel tartan
     · brightness(.76) + opacity(.68) + multiply → tartan assombri puis dilué
     · .hero-logo-deco opacity .14 trop faible sur fond clair

   Approche v7 :
     · Tartan opacity .92, filter ivoire-éclairci (pas multiply qui assombrit)
     · Panel fade : seulement les 18% gauche (la zone du texte)
     · Logo opacity .22 avec triple drop-shadow rouge royal
     · Sheen satin par-dessus pour effet "tartan sous vitre satinée"
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. TARTAN PANEL — Visible, lumineux, intégré satin ───────────────────── */
/* Le panneau lui-même : pas de transform supplémentaire (laisse DS dark) */

/* Le tartan : LUMINEUX en light mode, pas multiply (qui assombrit) */
[data-theme="light"] .hero-tartan-inner .tartan {
  opacity:        .92 !important;
  mix-blend-mode: normal !important;
  filter:
    saturate(.92)
    brightness(1.04)
    contrast(.98) !important;
}

/* Sheen satiné par-dessus le tartan — effet "vitre claire" premium */
[data-theme="light"] .hero-tartan-inner::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    /* Lumière satinée diagonale haut-gauche */
    linear-gradient(160deg,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.20) 22%,
      rgba(255,253,248,.08) 45%,
      transparent 62%),
    /* Reflet doux bas-droite */
    radial-gradient(ellipse 70% 50% at 78% 88%, rgba(255,250,240,.16), transparent 64%);
  mix-blend-mode: screen;
  z-index: 1;
}

/* FADE du panneau réduit — seulement les 18% gauche (transition vers texte) */
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(90deg,
    rgba(248,247,244,.92) 0%,
    rgba(248,247,244,.62) 8%,
    rgba(248,247,244,.18) 16%,
    transparent 24%) !important;
  z-index: 3 !important;
}

/* Voile haut-bas du panneau pour intégration avec sections suivantes */
[data-theme="light"] .hero-tartan-panel::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(248,247,244,.36) 0%,
      transparent 12%,
      transparent 86%,
      rgba(248,247,244,.42) 100%);
  z-index: 2;
  opacity: 1 !important;
}

/* ─── 2. HERO TARTAN GLOW — Halos Stewart subtils sur tartan ─────────────── */
[data-theme="light"] .hero-tartan-glow {
  background:
    /* Or chaud — fil principal noble */
    radial-gradient(ellipse 50% 50% at 62% 44%, rgba(198,168,91,.20), transparent 64%),
    /* Rouge royal accent */
    radial-gradient(ellipse 36% 32% at 76% 32%, rgba(200,16,46,.18),  transparent 60%),
    /* Bleu Stewart profondeur */
    radial-gradient(ellipse 30% 26% at 84% 62%, rgba(28,44,91,.12),   transparent 58%) !important;
  mix-blend-mode: multiply !important;
  opacity: .80 !important;
}

/* ─── 3. LOGO FLOTTANT OPTINOVE — Visible, drop-shadow rouge royal ─────── */
[data-theme="light"] .hero-logo-deco {
  opacity: .22 !important;
  filter:
    drop-shadow(0 0 64px rgba(200,16,46,.42))
    drop-shadow(0 0 28px rgba(200,16,46,.32))
    drop-shadow(0 12px 36px rgba(22,30,58,.24))
    drop-shadow(0 2px 8px rgba(0,0,0,.06)) !important;
  z-index: 2 !important;
}
/* L'animation heroDecoFloat 8s continue (non-scopée theme) */

/* ─── 4. HERO BACKGROUND — Profondeur Stewart, rouge dominant ─────────── */
[data-theme="light"] #hero {
  background:
    /* Rouge royal accent gauche fort */
    radial-gradient(ellipse 58% 64% at 12% 46%, rgba(200,16,46,.110), transparent 62%),
    /* Rouge accent bas-gauche (reconnexion identité site) */
    radial-gradient(ellipse 36% 28% at 22% 92%, rgba(200,16,46,.068), transparent 60%),
    /* Or chaud haut-droite */
    radial-gradient(ellipse 42% 36% at 78% 18%, rgba(198,168,91,.088), transparent 60%),
    /* Vert forêt mid-droite */
    radial-gradient(ellipse 30% 24% at 88% 50%, rgba(11,93,75,.052),   transparent 60%),
    /* Bleu Stewart bas-centre */
    radial-gradient(ellipse 38% 28% at 60% 88%, rgba(28,44,91,.054),   transparent 62%),
    /* Lumière diffuse blanc cassé */
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(255,253,248,.40), transparent 55%),
    /* Base satin chaude */
    linear-gradient(135deg, #FAF8F3 0%, #FBFCFE 46%, #F3F6FB 100%) !important;
}

/* Voile hero réduit pour ne pas mater les halos */
[data-theme="light"] #hero::before {
  background:
    linear-gradient(90deg,
      rgba(248,247,244,.18) 0%,
      transparent 30%) !important;
}

/* Fondu bas hero — vers ivoire (transition section suivante) */
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg,
    rgba(248,247,244,.46) 0%,
    rgba(248,247,244,.12) 12%,
    transparent 28%) !important;
}

/* ─── 5. HERO CREDS — Bandeau satin warm doré ─────────────────────────── */
[data-theme="light"] .hero-creds {
  background:
    linear-gradient(145deg, #FFFFFF 0%, #FAF8F3 56%, #F3F6FB 100%) !important;
  border:    1px solid #E2E8F1 !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0  #FFFFFF,
    inset 0 0 28px rgba(198,168,91,.06),
    0    1px 3px  rgba(22,30,58,.08),
    0    8px 28px rgba(22,30,58,.18),
    0    2px 8px  rgba(200,16,46,.07) !important;
}
[data-theme="light"] .hc-val { color: var(--tx)  !important; text-shadow: 0 1px 0 #FFFFFF; }
[data-theme="light"] .hc-lbl { color: var(--tx3) !important; }

/* ─── 6. ACCENTS ROUGES IDENTITÉ — Titre em + badge + dot ─────────────── */
[data-theme="light"] .hero-h em {
  color: #C8102E !important;
  text-shadow:
    0 1px 0 #FFFFFF,
    0 2px 22px rgba(200,16,46,.26),
    0 8px 38px rgba(200,16,46,.16) !important;
}
[data-theme="light"] .badge-r {
  background:
    linear-gradient(145deg, #FFFFFF 0%, rgba(200,16,46,.07) 100%) !important;
  border:    1px solid rgba(200,16,46,.34) !important;
  color:     #9A0D24 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    2px 12px rgba(200,16,46,.16) !important;
}
[data-theme="light"] .live-dot {
  background: #C8102E !important;
  box-shadow:
    0 0 0 3px rgba(200,16,46,.20),
    0 0 14px  rgba(200,16,46,.52) !important;
}
[data-theme="light"] .histoire-link {
  color: #C8102E !important;
}
[data-theme="light"] .histoire-link:hover {
  color: #9A0D24 !important;
  text-shadow: 0 1px 10px rgba(200,16,46,.22);
}

/* ─── 7. MOBILE — Tartan plus discret, logo retiré ─────────────────────── */
@media(max-width:900px) {
  [data-theme="light"] .hero-tartan-inner .tartan {
    opacity: .58 !important;
  }
  [data-theme="light"] .hero-tartan-glow {
    opacity: .68 !important;
  }
  [data-theme="light"] .hero-tartan-panel::after {
    background: linear-gradient(90deg,
      rgba(248,247,244,.94) 0%,
      rgba(248,247,244,.56) 28%,
      rgba(248,247,244,.20) 56%,
      transparent 78%) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO LIGHT MODE v8 — Version lumineuse du dark mode (même présence tartan)
   ══════════════════════════════════════════════════════════════════════════════
   Bug v7 identifié :
     .hero-tartan-inner::after avec mix-blend-mode: screen + rgba(255,255,255,.42)
     → voile blanc ultra-brillant qui masquait le tartan.

   Correction :
     · Sheen : screen → soft-light, opacity .42 → .12
     · Tartan : filter saturate(.92) → 1.06 (légère hausse vs dark mode)
     · Inner vignette warm pour framer le panneau (depth premium)
     · Logo opacity .22 → .26
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── TARTAN — Présence dark-mode-like sur clair ──────────────────────────── */
[data-theme="light"] .hero-tartan-inner .tartan {
  opacity:        1 !important;
  mix-blend-mode: normal !important;
  filter:
    saturate(1.06)
    brightness(.94)
    contrast(1.08) !important;
}

/* ─── SHEEN SATIN — soft-light (intégré au tartan, pas par-dessus) ──────── */
[data-theme="light"] .hero-tartan-inner::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    /* Sheen diagonal très subtil */
    linear-gradient(160deg,
      rgba(255,253,248,.16) 0%,
      rgba(255,253,248,.06) 32%,
      transparent 58%),
    /* Vignette warm inférieure pour depth */
    radial-gradient(ellipse 80% 60% at 50% 100%,
      rgba(120,80,40,.10),
      transparent 56%);
  mix-blend-mode: soft-light !important;
  opacity: .85 !important;
  z-index: 1;
}

/* ─── PANEL FADE — Seulement les 16% gauche (transition vers texte) ──── */
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(90deg,
    rgba(248,247,244,.88) 0%,
    rgba(248,247,244,.50) 7%,
    rgba(248,247,244,.14) 14%,
    transparent 22%) !important;
  z-index: 3 !important;
}

/* ─── VIGNETTE INTERNE — Framing premium du panneau tartan ─────────────── */
[data-theme="light"] .hero-tartan-panel::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    /* Vignette warm aux extrémités haut/bas */
    linear-gradient(180deg,
      rgba(120,80,40,.10) 0%,
      transparent 12%,
      transparent 88%,
      rgba(120,80,40,.12) 100%),
    /* Léger glow rouge centre-droit (cohérence Stewart) */
    radial-gradient(ellipse 50% 60% at 86% 50%,
      rgba(200,16,46,.06),
      transparent 60%);
  z-index: 2 !important;
  mix-blend-mode: multiply !important;
  opacity: 1 !important;
}

/* ─── HERO TARTAN GLOW — Halos Stewart en multiply (depth couleur) ──── */
[data-theme="light"] .hero-tartan-glow {
  background:
    /* Or chaud — fil principal */
    radial-gradient(ellipse 52% 52% at 60% 44%, rgba(198,168,91,.24), transparent 64%),
    /* Rouge royal accent */
    radial-gradient(ellipse 38% 32% at 76% 32%, rgba(200,16,46,.20),  transparent 62%),
    /* Bleu Stewart profondeur */
    radial-gradient(ellipse 30% 26% at 84% 64%, rgba(28,44,91,.14),   transparent 60%),
    /* Vert forêt sous-jacent */
    radial-gradient(ellipse 24% 20% at 72% 78%, rgba(11,93,75,.10),   transparent 58%) !important;
  mix-blend-mode: multiply !important;
  opacity: .90 !important;
}

/* ─── LOGO FLOTTANT — Visible premium ────────────────────────────────── */
[data-theme="light"] .hero-logo-deco {
  opacity: .26 !important;
  filter:
    drop-shadow(0 0 72px rgba(200,16,46,.48))
    drop-shadow(0 0 32px rgba(200,16,46,.36))
    drop-shadow(0 12px 40px rgba(22,30,58,.26))
    drop-shadow(0 2px 8px rgba(0,0,0,.08)) !important;
  z-index: 2 !important;
}

/* ─── HERO BACKGROUND — Profondeur + identité rouge Optinove ─────────── */
[data-theme="light"] #hero {
  background:
    /* Rouge royal accent gauche fort */
    radial-gradient(ellipse 58% 64% at 12% 46%, rgba(200,16,46,.115), transparent 62%),
    /* Rouge accent bas-gauche (reconnexion identité) */
    radial-gradient(ellipse 36% 28% at 22% 92%, rgba(200,16,46,.072), transparent 60%),
    /* Or chaud haut-droite */
    radial-gradient(ellipse 42% 36% at 78% 18%, rgba(198,168,91,.090), transparent 60%),
    /* Vert forêt mid-droite */
    radial-gradient(ellipse 30% 24% at 88% 50%, rgba(11,93,75,.054),   transparent 60%),
    /* Bleu Stewart bas-centre */
    radial-gradient(ellipse 38% 28% at 60% 88%, rgba(28,44,91,.056),   transparent 62%),
    /* Lumière diffuse blanc cassé */
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(255,253,248,.36), transparent 55%),
    /* Base satin chaude */
    linear-gradient(135deg, #FAF8F3 0%, #FBFCFE 46%, #F3F6FB 100%) !important;
}

/* Voile hero gauche réduit (laisse halos respirer) */
[data-theme="light"] #hero::before {
  background:
    linear-gradient(90deg,
      rgba(248,247,244,.14) 0%,
      transparent 28%) !important;
}

/* Fondu bas hero — ivoire */
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg,
    rgba(248,247,244,.42) 0%,
    rgba(248,247,244,.10) 12%,
    transparent 26%) !important;
}

/* ─── HERO CREDS — Satin warm doré ───────────────────────────────────── */
[data-theme="light"] .hero-creds {
  background:
    linear-gradient(145deg, #FFFFFF 0%, #FAF8F3 56%, #F3F6FB 100%) !important;
  border:    1px solid #E2E8F1 !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0  #FFFFFF,
    inset 0 0 28px rgba(198,168,91,.07),
    0    1px 3px  rgba(22,30,58,.08),
    0    10px 32px rgba(22,30,58,.20),
    0    2px 8px  rgba(200,16,46,.08) !important;
}
[data-theme="light"] .hc-val { color: var(--tx)  !important; text-shadow: 0 1px 0 #FFFFFF; }
[data-theme="light"] .hc-lbl { color: var(--tx3) !important; }

/* ─── ACCENTS ROUGES — Titre + badge + dot + link ──────────────────── */
[data-theme="light"] .hero-h em {
  color: #C8102E !important;
  text-shadow:
    0 1px 0 #FFFFFF,
    0 2px 22px rgba(200,16,46,.28),
    0 8px 38px rgba(200,16,46,.16) !important;
}
[data-theme="light"] .badge-r {
  background:
    linear-gradient(145deg, #FFFFFF 0%, rgba(200,16,46,.08) 100%) !important;
  border:    1px solid rgba(200,16,46,.36) !important;
  color:     #9A0D24 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0    2px 14px rgba(200,16,46,.18) !important;
}
[data-theme="light"] .live-dot {
  background: #C8102E !important;
  box-shadow:
    0 0 0 3px rgba(200,16,46,.22),
    0 0 16px  rgba(200,16,46,.56) !important;
}
[data-theme="light"] .histoire-link {
  color: #C8102E !important;
}
[data-theme="light"] .histoire-link:hover {
  color: #9A0D24 !important;
  text-shadow: 0 1px 10px rgba(200,16,46,.22);
}

/* ─── MOBILE ─────────────────────────────────────────────────────────── */
@media(max-width:900px) {
  [data-theme="light"] .hero-tartan-inner .tartan {
    opacity: .72 !important;
    filter: saturate(.92) brightness(.96) contrast(1.04) !important;
  }
  [data-theme="light"] .hero-tartan-glow { opacity: .70 !important; }
  [data-theme="light"] .hero-tartan-inner::after { opacity: .65 !important; }
  [data-theme="light"] .hero-tartan-panel::before { opacity: .80 !important; }
  [data-theme="light"] .hero-tartan-panel::after {
    background: linear-gradient(90deg,
      rgba(248,247,244,.90) 0%,
      rgba(248,247,244,.56) 26%,
      rgba(248,247,244,.20) 56%,
      transparent 76%) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO LIGHT MODE v9 — Contraste tartan via fond ivoire foncé sous le panel
   ══════════════════════════════════════════════════════════════════════════════
   Insight clé :
     En dark mode, le tartan rouge tranche sur fond noir → forte présence.
     En light mode sur fond crème, le tartan rouge contraste mal → semble fade.
   Solution :
     Donner au panneau tartan SON PROPRE FOND ivoire-foncé warm (#D8CFB6),
     pour que le tartan ait un "support" qui le fait ressortir.
     Le reste du hero garde sa base claire premium.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── PANEL TARTAN — Fond ivoire-foncé warm pour donner contraste tartan ─── */
[data-theme="light"] .hero-tartan-panel {
  background:
    /* Vignette warm aux bords pour framing */
    radial-gradient(ellipse 120% 100% at 50% 50%,
      #D8CFB6 0%,
      #CFC4A4 60%,
      #C4B894 100%) !important;
  opacity: 1 !important;
  /* Conservation transform skew du dark mode (non-overrided) */
}

/* TARTAN — Pleine présence sur fond warm */
[data-theme="light"] .hero-tartan-inner .tartan {
  opacity:        1 !important;
  mix-blend-mode: normal !important;
  filter:
    saturate(.96)
    brightness(.92)
    contrast(1.06) !important;
}

/* SHEEN satin doux par-dessus le tartan — soft-light pour intégrer */
[data-theme="light"] .hero-tartan-inner::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(160deg,
      rgba(255,253,248,.18) 0%,
      rgba(255,253,248,.06) 36%,
      transparent 62%) !important;
  mix-blend-mode: soft-light !important;
  opacity: 1 !important;
  z-index: 1;
}

/* FADE GAUCHE — Transition douce ivoire vers le contenu texte */
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(90deg,
    #FBFCFE 0%,
    rgba(248,247,244,.84) 6%,
    rgba(248,247,244,.32) 14%,
    rgba(248,247,244,.06) 22%,
    transparent 28%) !important;
  z-index: 3 !important;
}

/* VIGNETTE — Frame premium haut/bas + glow rouge centre-droit */
[data-theme="light"] .hero-tartan-panel::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(80,50,20,.18) 0%,
      transparent 14%,
      transparent 86%,
      rgba(80,50,20,.20) 100%),
    radial-gradient(ellipse 50% 60% at 88% 50%,
      rgba(200,16,46,.10),
      transparent 64%) !important;
  z-index: 2 !important;
  mix-blend-mode: multiply !important;
  opacity: 1 !important;
}

/* ─── HERO TARTAN GLOW — Halos Stewart sur tartan (multiply) ──────────── */
[data-theme="light"] .hero-tartan-glow {
  background:
    radial-gradient(ellipse 56% 54% at 60% 44%, rgba(198,168,91,.28), transparent 64%),
    radial-gradient(ellipse 40% 34% at 76% 32%, rgba(200,16,46,.22),  transparent 62%),
    radial-gradient(ellipse 32% 28% at 84% 64%, rgba(28,44,91,.16),   transparent 60%),
    radial-gradient(ellipse 26% 22% at 72% 78%, rgba(11,93,75,.12),   transparent 58%) !important;
  mix-blend-mode: multiply !important;
  opacity: 1 !important;
}

/* ─── LOGO FLOTTANT — TRÈS VISIBLE en light mode ─────────────────────── */
[data-theme="light"] .hero-logo-deco {
  display: block !important;
  visibility: visible !important;
  opacity: .32 !important;
  filter:
    drop-shadow(0 0 80px rgba(200,16,46,.62))
    drop-shadow(0 0 36px rgba(200,16,46,.42))
    drop-shadow(0 0 18px rgba(200,16,46,.32))
    drop-shadow(0 14px 44px rgba(22,30,58,.30))
    drop-shadow(0 4px 12px rgba(0,0,0,.08))
    brightness(.92) contrast(1.04) !important;
  z-index: 3 !important;
  mix-blend-mode: multiply !important;
}

/* ─── HERO BACKGROUND — Crème warm + halos rouges + lumière diffuse ──── */
[data-theme="light"] #hero {
  background:
    /* Rouge royal accent gauche fort (identité Optinove) */
    radial-gradient(ellipse 58% 64% at 12% 46%, rgba(200,16,46,.115), transparent 62%),
    /* Rouge accent bas-gauche */
    radial-gradient(ellipse 36% 28% at 22% 92%, rgba(200,16,46,.075), transparent 60%),
    /* Or chaud haut */
    radial-gradient(ellipse 42% 36% at 50% 12%, rgba(198,168,91,.080), transparent 60%),
    /* Bleu Stewart bas */
    radial-gradient(ellipse 38% 28% at 40% 92%, rgba(28,44,91,.058),  transparent 62%),
    /* Lumière diffuse blanc cassé centre */
    radial-gradient(ellipse 80% 60% at 35% 35%, rgba(255,253,248,.42), transparent 55%),
    /* Base satin chaude */
    linear-gradient(135deg, #FAF8F3 0%, #FBFCFE 46%, #F3F6FB 100%) !important;
}

/* Hero::before — fog ultra-minimal */
[data-theme="light"] #hero::before {
  background: linear-gradient(90deg,
    rgba(248,247,244,.10) 0%,
    transparent 28%) !important;
}

/* Hero::after — fondu bas vers section suivante */
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg,
    rgba(248,247,244,.40) 0%,
    rgba(248,247,244,.10) 12%,
    transparent 26%) !important;
}

/* ─── HERO CREDS — Satin warm doré premium ────────────────────────────── */
[data-theme="light"] .hero-creds {
  background: linear-gradient(145deg, #FFFFFF 0%, #FAF8F3 56%, #F3F6FB 100%) !important;
  border: 1px solid #E2E8F1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 0 32px rgba(198,168,91,.08),
    0 1px 3px rgba(22,30,58,.10),
    0 10px 36px rgba(22,30,58,.22),
    0 2px 8px rgba(200,16,46,.08) !important;
}
[data-theme="light"] .hc-val { color: var(--tx)  !important; text-shadow: 0 1px 0 #FFFFFF; }
[data-theme="light"] .hc-lbl { color: var(--tx3) !important; }

/* ─── ACCENTS IDENTITÉ ROUGE ──────────────────────────────────────────── */
[data-theme="light"] .hero-h em {
  color: #C8102E !important;
  text-shadow:
    0 1px 0 #FFFFFF,
    0 2px 22px rgba(200,16,46,.30),
    0 8px 42px rgba(200,16,46,.18) !important;
}
[data-theme="light"] .badge-r {
  background: linear-gradient(145deg, #FFFFFF 0%, rgba(200,16,46,.08) 100%) !important;
  border: 1px solid rgba(200,16,46,.38) !important;
  color: #9A0D24 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 14px rgba(200,16,46,.20) !important;
}
[data-theme="light"] .live-dot {
  background: #C8102E !important;
  box-shadow: 0 0 0 3px rgba(200,16,46,.24), 0 0 18px rgba(200,16,46,.60) !important;
}
[data-theme="light"] .histoire-link { color: #C8102E !important; }
[data-theme="light"] .histoire-link:hover {
  color: #9A0D24 !important;
  text-shadow: 0 1px 10px rgba(200,16,46,.24);
}

/* ─── MOBILE ─────────────────────────────────────────────────────────── */
@media(max-width:900px) {
  [data-theme="light"] .hero-tartan-panel {
    background: linear-gradient(180deg, #E2D9BD 0%, #D6CDB0 100%) !important;
  }
  [data-theme="light"] .hero-tartan-inner .tartan {
    opacity: .85 !important;
    filter: saturate(.88) brightness(.94) contrast(1.04) !important;
  }
  [data-theme="light"] .hero-tartan-glow { opacity: .80 !important; }
  [data-theme="light"] .hero-tartan-panel::after {
    background: linear-gradient(90deg,
      #FBFCFE 0%,
      rgba(248,247,244,.68) 22%,
      rgba(248,247,244,.22) 50%,
      transparent 72%) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO LIGHT v10 — Conversion DIRECTE du dark mode (force absolue)
   ══════════════════════════════════════════════════════════════════════════════
   Approche : prendre les valeurs exactes du dark mode et UNIQUEMENT remapper
   les couleurs. Pas de nouveau design. La même architecture.

   Spécificité maximale + !important sur tout pour battre les 11000+ lignes.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── HERO STRUCTURE — Identique au dark mode ────────────────────────────── */
[data-theme="light"] #hero {
  background:
    radial-gradient(ellipse 70% 54% at 64% 42%, rgba(200,16,46,.13),  transparent 64%),
    radial-gradient(ellipse 42% 34% at 78% 30%, rgba(198,168,91,.10), transparent 70%),
    radial-gradient(ellipse 52% 42% at 18% 56%, rgba(200,16,46,.07),  transparent 66%),
    linear-gradient(108deg, #FBFCFE 0%, #FAF8F3 46%, #F3F6FB 100%) !important;
}

/* ─── PANNEAU TARTAN — Existe, position dark mode conservée ──────────────── */
[data-theme="light"] .hero-tartan-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* width + transform skewX(-6deg) translateX(7%) : héritage dark mode line 2838 */
}

[data-theme="light"] .hero-tartan-inner {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ─── TARTAN ÉLÉMENT — Rouge Stewart vivant ─────────────────────────────── */
[data-theme="light"] .hero-tartan-inner .tartan {
  display:        block !important;
  visibility:     visible !important;
  opacity:        .92 !important;
  mix-blend-mode: normal !important;
  filter:
    saturate(.94)
    brightness(1.00)
    contrast(1.04) !important;
}

/* ─── FADE GAUCHE PANEL — Court (laisse 80% tartan visible) ─────────────── */
[data-theme="light"] .hero-tartan-panel::after {
  content: '' !important;
  display: block !important;
  background: linear-gradient(90deg,
    #FBFCFE 0%,
    rgba(248,247,244,.74) 8%,
    rgba(248,247,244,.20) 18%,
    transparent 26%) !important;
  z-index: 3 !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

/* Pas de pseudo-element supplémentaire qui masque (annule mes v8/v9) */
[data-theme="light"] .hero-tartan-panel::before {
  display: none !important;
}

/* Pas de sheen sur tartan-inner (annule mon v8 qui pouvait écraser) */
[data-theme="light"] .hero-tartan-inner::after {
  display: none !important;
}

/* ─── GLOW STEWART — Comme dark mode mais multiply pour révéler couleurs ─ */
[data-theme="light"] .hero-tartan-glow {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background:
    radial-gradient(ellipse 66% 54% at 64% 42%, rgba(200,16,46,.22),  transparent 66%),
    radial-gradient(ellipse 42% 34% at 78% 30%, rgba(198,168,91,.16), transparent 72%) !important;
  mix-blend-mode: multiply !important;
}

/* ─── LOGO FLOTTANT — IDENTIQUE dark mode (right:6%, size, animation) ──── */
[data-theme="light"] .hero-logo-deco {
  display: block !important;
  visibility: visible !important;
  opacity: .28 !important;
  filter:
    drop-shadow(0 0 56px rgba(200,16,46,.50))
    drop-shadow(0 0 24px rgba(200,16,46,.34))
    drop-shadow(0 8px 28px rgba(22,30,58,.20)) !important;
  z-index: 2 !important;
  /* Position right:6%, top:50%, width clamp(220,28vw,400) : dark mode line 369 */
  /* Animation heroDecoFloat 8s : continue */
}

/* ─── HERO::before fog ultra-réduit ────────────────────────────────────── */
[data-theme="light"] #hero::before {
  background: none !important;
}

/* ─── HERO::after fondu bas minimal ────────────────────────────────────── */
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg, rgba(248,247,244,.32) 0%, transparent 18%) !important;
}

/* ─── HERO CREDS satin ────────────────────────────────────────────────── */
[data-theme="light"] .hero-creds {
  background: linear-gradient(145deg, #FFFFFF 0%, #FAF8F3 60%, #F3F6FB 100%) !important;
  border: 1px solid #E2E8F1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 10px 32px rgba(22,30,58,.18),
    0 2px 6px rgba(200,16,46,.06) !important;
}

/* ─── ACCENTS ROUGES ──────────────────────────────────────────────────── */
[data-theme="light"] .hero-h em {
  color: #C8102E !important;
  text-shadow:
    0 1px 0 #FFFFFF,
    0 2px 20px rgba(200,16,46,.28) !important;
}
[data-theme="light"] .badge-r {
  background: linear-gradient(145deg, #FFFFFF, rgba(200,16,46,.06)) !important;
  border: 1px solid rgba(200,16,46,.32) !important;
  color: #9A0D24 !important;
}
[data-theme="light"] .live-dot {
  background: #C8102E !important;
  box-shadow: 0 0 0 3px rgba(200,16,46,.20), 0 0 14px rgba(200,16,46,.50) !important;
}
[data-theme="light"] .histoire-link { color: #C8102E !important; }
[data-theme="light"] .hc-val { color: #1A1B22 !important; }
[data-theme="light"] .hc-lbl { color: #8A8C9B !important; }

/* ══ TEST DEBUG v10.1 — Cadre vert fluo sur le panneau tartan en light mode ══
   Si tu vois le cadre vert : le CSS est chargé + le panneau existe.
   Si pas de cadre : soit cache, soit le panneau n'existe pas sur cette vue.
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .hero-tartan-panel {
  outline: 6px solid #00FF00 !important;
  outline-offset: -3px !important;
}
[data-theme="light"] .hero-logo-deco {
  outline: 4px solid #FF00FF !important;
  outline-offset: 4px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO LIGHT v11 — Fix logo invisible + amélioration tartan
   ══════════════════════════════════════════════════════════════════════════════
   Confirmé via debug visuel :
     · Panneau tartan : EXISTE (cadre vert visible)
     · Logo flottant : INVISIBLE (cadre magenta absent)

   Causes du logo invisible :
     1. mix-blend-mode: multiply de v9 hérité → PNG transparent rendu invisible
     2. outline-offset: 4px (extérieur) clippé par overflow:hidden du panel
     3. Possibles filtres trop agressifs cumulés

   Fix :
     · mix-blend-mode: normal !important (annule v9)
     · z-index élevé pour passer au-dessus du tartan
     · filtres simplifiés (un seul drop-shadow rouge fort)
     · Debug outline INSIDE (négatif) pour ne pas être clippé
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── LOGO FLOTTANT — Restauration normale ──────────────────────────────── */
[data-theme="light"] .hero-logo-deco {
  display:        block !important;
  visibility:     visible !important;
  opacity:        .28 !important;
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 0 56px rgba(200,16,46,.45))
    drop-shadow(0 0 24px rgba(200,16,46,.30)) !important;
  z-index:        10 !important;
  position:       absolute !important;
  pointer-events: none !important;

  /* DEBUG TEMPORAIRE — outline INSIDE pour ne pas être clippé par overflow */
  outline: 4px solid #FF00FF !important;
  outline-offset: -2px !important;

  /* Background lime visible si l'image ne charge pas */
  background: rgba(0,255,0,.15) !important;
}

/* ─── TARTAN PANEL — Plus de contraste, fond ivoire chaud sous le tartan ── */
[data-theme="light"] .hero-tartan-panel {
  background: linear-gradient(135deg, #DACFB0 0%, #C9D2E0 100%) !important;

  /* DEBUG temporaire — outline INSIDE */
  outline: 4px solid #00FF00 !important;
  outline-offset: -2px !important;
}

/* ─── TARTAN — Présence forte (moins de filtre) ────────────────────────── */
[data-theme="light"] .hero-tartan-inner .tartan {
  display:        block !important;
  visibility:     visible !important;
  opacity:        .95 !important;
  mix-blend-mode: normal !important;
  filter:
    saturate(.96)
    brightness(.96)
    contrast(1.06) !important;
}

/* ─── FADE GAUCHE — Seulement 20% pour exposer 80% du tartan ───────────── */
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(90deg,
    #FBFCFE 0%,
    rgba(248,247,244,.62) 8%,
    rgba(248,247,244,.16) 16%,
    transparent 22%) !important;
  z-index: 3 !important;
}

/* ─── ANNULE TOUT pseudo-element qui pourrait masquer ──────────────────── */
[data-theme="light"] .hero-tartan-panel::before {
  display: none !important;
}
[data-theme="light"] .hero-tartan-inner::after {
  display: none !important;
}

/* ─── GLOW — Multiply Stewart sur tartan (couleurs vivantes) ───────────── */
[data-theme="light"] .hero-tartan-glow {
  background:
    radial-gradient(ellipse 66% 54% at 64% 42%, rgba(200,16,46,.24),  transparent 66%),
    radial-gradient(ellipse 42% 34% at 78% 30%, rgba(198,168,91,.18), transparent 72%) !important;
  mix-blend-mode: multiply !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO LIGHT v12 — VERSION FINALE PROPRE (suppression debugs + clean)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── Suppression des debugs ─────────────────────────────────────────────── */
[data-theme="light"] .hero-tartan-panel {
  outline: none !important;
  background: linear-gradient(135deg, #DACFB0 0%, #CFC4A4 50%, #C4B894 100%) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

[data-theme="light"] .hero-logo-deco {
  outline: none !important;
  background: transparent !important;
  display: block !important;
  visibility: visible !important;
  opacity: .32 !important;
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 0 56px rgba(200,16,46,.50))
    drop-shadow(0 0 26px rgba(200,16,46,.34))
    drop-shadow(0 8px 32px rgba(22,30,58,.22)) !important;
  z-index: 10 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Mobile : forcer logo display block en light mode (override ligne 380) */
@media(max-width:900px) {
  [data-theme="light"] .hero-logo-deco {
    display: block !important;
  }
  [data-theme="light"] .hero-tartan-panel {
    background: linear-gradient(180deg, #E0D6BE 0%, #D2C8AA 100%) !important;
    opacity: 1 !important;
  }
}

/* ─── Tartan rendu propre, présence forte ───────────────────────────────── */
[data-theme="light"] .hero-tartan-inner {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
[data-theme="light"] .hero-tartan-inner .tartan {
  display: block !important;
  visibility: visible !important;
  opacity: .95 !important;
  mix-blend-mode: normal !important;
  filter: saturate(.94) brightness(.96) contrast(1.06) !important;
}

/* Fade gauche court (20% seulement) */
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(90deg,
    #FBFCFE 0%,
    rgba(248,247,244,.66) 8%,
    rgba(248,247,244,.18) 16%,
    transparent 22%) !important;
  z-index: 3 !important;
}

/* Aucun pseudo-element qui masque */
[data-theme="light"] .hero-tartan-panel::before { display: none !important; }
[data-theme="light"] .hero-tartan-inner::after  { display: none !important; }

/* Glow Stewart sur tartan */
[data-theme="light"] .hero-tartan-glow {
  background:
    radial-gradient(ellipse 66% 54% at 64% 42%, rgba(200,16,46,.22),  transparent 66%),
    radial-gradient(ellipse 42% 34% at 78% 30%, rgba(198,168,91,.16), transparent 72%) !important;
  mix-blend-mode: multiply !important;
  opacity: 1 !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE v13 — MAISON ROYALE ÉCOSSAISE LUMINEUSE (REFONTE TOTALE)
   ══════════════════════════════════════════════════════════════════════════════
   Palette utilisateur (exacte) :
     --bg:   #FBFCFE   fond principal (ivoire chaud)
     --bg2:  #F3F6FB   fond secondaire
     --sf:   #FFFFFF   blanc cassé premium (cartes)
     --tx:   #0C0E16   texte principal
     --tx2:  #3B414F   texte secondaire
     --r:    #C8102E   rouge Stewart
     --navy: #1C2C5B   bleu Stewart
     --green:#0B5D4B   vert Stewart
     --gold: #C6A85B   or textile

   Principes :
     · SOLIDES — pas de rgba(.X), hex pur partout
     · NO backdrop-filter (anti-ghost)
     · Stewart glows par catégorie (icône rouge → glow rouge subtil)
     · Tartan visible mais textile (multiply, opacity .42-.55)
     · Animations du dark mode CONSERVÉES (jamais override animation)
     · Ombres warm beige (jamais rgba(0,0,0))
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── § A. VARIABLES — Palette royale exacte ──────────────────────────────── */
[data-theme="light"] {
  --bg:   #FBFCFE;
  --bg2:  #F3F6FB;
  --bg3:  #EBEFF6;
  --bg4:  #E2E8F1;
  --sf:   #FFFFFF;
  --sf2:  #F3F6FB;
  --sf3:  #FBFCFE;
  --bd:   #E2E8F1;
  --bd2:  #C9D2E0;
  --tx:   #0C0E16;
  --tx2:  #3B414F;
  --tx3:  #6F7689;
  --gl:   #FBFCFE;
  --r:            #C8102E;
  --r-d:          #9A0D24;
  --r-l:          #DC3349;
  --r-s:          rgba(200,16,46,.06);
  --r-b:          rgba(200,16,46,.22);
  --r-g:          rgba(200,16,46,.10);
  --rs-red:       #C8102E;
  --rs-red-deep:  #9A0D24;
  --rs-navy:      #1C2C5B;
  --rs-green:     #0B5D4B;
  --rs-gold:      #C6A85B;
  --rs-gold-deep: #8A6F2A;
  --rs-ivory:     #F3F6FB;
  --navy-hi:      #1C2C5B;
  --forest-hi:    #0B5D4B;
  --gold-hi:      #8A6F2A;
}

/* ─── § B. BODY — Ivoire chaud avec halo unique ────────────────────────── */
[data-theme="light"] body {
  background:
    radial-gradient(ellipse 70% 40% at 50% -8%, rgba(200,16,46,.035), transparent 62%),
    #FBFCFE !important;
  color: #0C0E16 !important;
}
[data-theme="light"] body::before {
  opacity: .08 !important;
  mix-blend-mode: multiply !important;
}
[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 70% 50% at 72% 18%, rgba(198,168,91,.05), transparent 66%),
    linear-gradient(180deg, rgba(251,252,254,.32) 0%, transparent 22%, transparent 80%, rgba(235,239,246,.36) 100%) !important;
}

/* ─── § C. TARTAN — Textile élégant, vivant ──────────────────────────── */
[data-theme="light"] .tartan {
  filter: saturate(.96) brightness(.90) contrast(1.10) !important;
  opacity: 1 !important;
}
[data-theme="light"] .tartan-light {
  opacity: .42 !important;
  mix-blend-mode: multiply !important;
  filter: saturate(.92) brightness(.86) contrast(1.08) !important;
}
[data-theme="light"] .tartan::after { display: none !important; }

/* ─── § D. NAVIGATION — Ivoire solide ────────────────────────────────── */
[data-theme="light"] #nav,
[data-theme="light"] #nav.scrolled {
  background:      #F3F6FB !important;
  border-bottom:   1px solid #E2E8F1 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 1px 0 rgba(22,30,58,.08),
    0 4px 22px rgba(22,30,58,.10) !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .nav-link        { color: #3B414F !important; }
[data-theme="light"] .nav-link:hover  { color: #C8102E !important; }
[data-theme="light"] .nav-link.active { color: #C8102E !important; }

/* ─── § E. HÉRO — Panneau tartan visible + logo + halos Stewart ─────── */
[data-theme="light"] #hero {
  background:
    radial-gradient(ellipse 50% 56% at 18% 46%, rgba(200,16,46,.08),  transparent 62%),
    radial-gradient(ellipse 38% 32% at 78% 22%, rgba(198,168,91,.07), transparent 60%),
    radial-gradient(ellipse 32% 26% at 88% 64%, rgba(11,93,75,.05),   transparent 60%),
    radial-gradient(ellipse 80% 60% at 35% 35%, rgba(255,255,255,.42), transparent 56%),
    linear-gradient(135deg, #F3F6FB 0%, #FBFCFE 50%, #EBEFF6 100%) !important;
}
[data-theme="light"] #hero::before {
  background:
    linear-gradient(90deg,
      rgba(251,252,254,.36) 0%,
      rgba(251,252,254,.10) 30%,
      transparent 56%) !important;
}
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg,
    rgba(251,252,254,.42) 0%,
    rgba(251,252,254,.10) 14%,
    transparent 28%) !important;
}

/* PANNEAU TARTAN — fond ivoire chaud pour contraste tartan */
[data-theme="light"] .hero-tartan-panel {
  background: linear-gradient(135deg, #EDF1F8 0%, #DFE6F1 50%, #C9D2E0 100%) !important;
  display:    block !important;
  visibility: visible !important;
  opacity:    1 !important;
}

[data-theme="light"] .hero-tartan-inner {
  display:    block !important;
  visibility: visible !important;
  opacity:    1 !important;
}

[data-theme="light"] .hero-tartan-inner .tartan {
  display:        block !important;
  visibility:     visible !important;
  opacity:        .96 !important;
  mix-blend-mode: normal !important;
  filter:         saturate(.96) brightness(.94) contrast(1.06) !important;
}

/* Fade gauche du panneau — court (laisse 80% tartan visible) */
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(90deg,
    #FBFCFE 0%,
    rgba(251,252,254,.62) 8%,
    rgba(251,252,254,.18) 16%,
    transparent 22%) !important;
  z-index: 3 !important;
}

/* Annule pseudo-elements parasites */
[data-theme="light"] .hero-tartan-panel::before { display: none !important; }
[data-theme="light"] .hero-tartan-inner::after  { display: none !important; }

/* Glow Stewart sur tartan — multiply pour révéler couleurs */
[data-theme="light"] .hero-tartan-glow {
  background:
    radial-gradient(ellipse 60% 54% at 60% 42%, rgba(200,16,46,.22),  transparent 66%),
    radial-gradient(ellipse 42% 36% at 78% 30%, rgba(198,168,91,.16), transparent 70%) !important;
  mix-blend-mode: multiply !important;
  opacity:        1 !important;
}

/* LOGO FLOTTANT — visible avec halo rouge royal */
[data-theme="light"] .hero-logo-deco {
  display:        block !important;
  visibility:     visible !important;
  opacity:        .32 !important;
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 0 56px rgba(200,16,46,.50))
    drop-shadow(0 0 26px rgba(200,16,46,.34))
    drop-shadow(0 8px 32px rgba(22,30,58,.22)) !important;
  z-index:        10 !important;
  position:       absolute !important;
}

/* Hero creds — satin warm doré */
[data-theme="light"] .hero-creds {
  background:    linear-gradient(145deg, #FFFFFF 0%, #F3F6FB 56%, #FBFCFE 100%) !important;
  border:        1px solid #E2E8F1 !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 0 28px rgba(198,168,91,.07),
    0 8px 28px rgba(22,30,58,.18),
    0 2px 6px rgba(200,16,46,.06) !important;
}
[data-theme="light"] .hc-val { color: #0C0E16 !important; text-shadow: 0 1px 0 #FFFFFF; }
[data-theme="light"] .hc-lbl { color: #6F7689 !important; }

/* ─── § F. CARTES — Système Stewart glow par catégorie ──────────────── */
[data-theme="light"] .card,
[data-theme="light"] .svc-card,
[data-theme="light"] .trust-card,
[data-theme="light"] .secteur-card,
[data-theme="light"] .te-card-large,
[data-theme="light"] .te-card-sm,
[data-theme="light"] .te-card-row,
[data-theme="light"] .sw-card,
[data-theme="light"] .team-card,
[data-theme="light"] .cblk,
[data-theme="light"] .ct-card,
[data-theme="light"] .ct-form,
[data-theme="light"] .legal-info-card,
[data-theme="light"] .ck-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .testi-card,
[data-theme="light"] .ci-card,
[data-theme="light"] .sit-path {
  background: #FFFFFF !important;
  border:     1px solid #E2E8F1 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 1px 2px rgba(22,30,58,.06),
    0 8px 22px rgba(22,30,58,.10) !important;
}

/* ─── § G. SERVICES — Stewart rotation 4 couleurs (spec. 1-4-0) ──────── */
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+1) {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(200,16,46,.060), transparent 65%),
    #FFFFFF !important;
  border-color: #F2D5DA !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 1px 2px rgba(200,16,46,.05),
    0 8px 22px rgba(200,16,46,.08) !important;
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+1):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(200,16,46,.10), transparent 62%), #FFFFFF !important;
  border-color: #DC3349 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 4px 12px rgba(200,16,46,.14),
    0 18px 44px rgba(200,16,46,.18) !important;
  transform: translateY(-4px);
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+2) {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(28,44,91,.055), transparent 65%),
    #FFFFFF !important;
  border-color: #D2D6E3 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 1px 2px rgba(28,44,91,.05),
    0 8px 22px rgba(28,44,91,.09) !important;
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+2):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(28,44,91,.09), transparent 62%), #FFFFFF !important;
  border-color: #2A3D72 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 4px 12px rgba(28,44,91,.12),
    0 18px 44px rgba(28,44,91,.16) !important;
  transform: translateY(-4px);
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+3) {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(11,93,75,.055), transparent 65%),
    #FFFFFF !important;
  border-color: #C8DDD6 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 1px 2px rgba(11,93,75,.05),
    0 8px 22px rgba(11,93,75,.09) !important;
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+3):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(11,93,75,.09), transparent 62%), #FFFFFF !important;
  border-color: #157760 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 4px 12px rgba(11,93,75,.12),
    0 18px 44px rgba(11,93,75,.16) !important;
  transform: translateY(-4px);
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+4) {
  background:
    radial-gradient(ellipse 50% 40% at 96% 96%, rgba(198,168,91,.080), transparent 65%),
    #FFFFFF !important;
  border-color: #E8DCB6 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 1px 2px rgba(198,168,91,.07),
    0 8px 22px rgba(198,168,91,.12) !important;
}
[data-theme="light"] #services .svc-grid .svc-card:nth-child(4n+4):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(198,168,91,.12), transparent 62%), #FFFFFF !important;
  border-color: #C6A85B !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 4px 12px rgba(198,168,91,.18),
    0 18px 44px rgba(198,168,91,.22) !important;
  transform: translateY(-4px);
}

/* SERVICES SECTION ::before — Annule le voile noir DS3 ligne 4885 */
[data-theme="light"] #services::before {
  background:
    radial-gradient(ellipse 80% 55% at 15% 50%, rgba(200,16,46,.04), transparent 70%),
    linear-gradient(180deg, rgba(251,252,254,.14) 0%, transparent 24%, transparent 76%, rgba(251,252,254,.14) 100%) !important;
}
@media(max-width:900px) {
  [data-theme="light"] #services::before {
    background:
      radial-gradient(ellipse 80% 55% at 15% 50%, rgba(200,16,46,.04), transparent 70%),
      linear-gradient(180deg, rgba(251,252,254,.14) 0%, transparent 24%, transparent 76%, rgba(251,252,254,.14) 100%) !important;
  }
}

/* ─── § H. LOGICIELS — Stewart rotation 3 couleurs ──────────────────── */
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+1) {
  background: radial-gradient(ellipse 50% 40% at 96% 96%, rgba(200,16,46,.060), transparent 65%), #FFFFFF !important;
  border-color: #F2D5DA !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(200,16,46,.05), 0 8px 22px rgba(200,16,46,.08) !important;
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+1):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(200,16,46,.10), transparent 62%), #FFFFFF !important;
  border-color: #DC3349 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 44px rgba(200,16,46,.16) !important;
  transform: translateY(-4px);
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+2) {
  background: radial-gradient(ellipse 50% 40% at 96% 96%, rgba(28,44,91,.055), transparent 65%), #FFFFFF !important;
  border-color: #D2D6E3 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(28,44,91,.05), 0 8px 22px rgba(28,44,91,.09) !important;
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+2):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(28,44,91,.09), transparent 62%), #FFFFFF !important;
  border-color: #2A3D72 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 44px rgba(28,44,91,.14) !important;
  transform: translateY(-4px);
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+3) {
  background: radial-gradient(ellipse 50% 40% at 96% 96%, rgba(11,93,75,.055), transparent 65%), #FFFFFF !important;
  border-color: #C8DDD6 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(11,93,75,.05), 0 8px 22px rgba(11,93,75,.09) !important;
}
[data-theme="light"] #logiciels .sw-grid .sw-card:nth-child(3n+3):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(11,93,75,.09), transparent 62%), #FFFFFF !important;
  border-color: #157760 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 44px rgba(11,93,75,.14) !important;
  transform: translateY(-4px);
}

/* ─── § I. ICÔNES — Capsules Stewart colorées (jamais noires) ──────── */
/* Base reset universelle — capsule ivoire */
[data-theme="light"] .svc-ic,
[data-theme="light"] .sit-ic,
[data-theme="light"] .te-icon,
[data-theme="light"] .te-icon-sm,
[data-theme="light"] .sw-icon,
[data-theme="light"] .sec-ico,
[data-theme="light"] .ct-card-ico,
[data-theme="light"] .tb-icon,
[data-theme="light"] .sit-path-ic,
[data-theme="light"] .faq-icon {
  background: #F3F6FB !important;
  border: 1px solid #E2E8F1 !important;
  color: #3B414F !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 3px rgba(22,30,58,.08) !important;
}

/* Force aussi en mobile (anti !important ligne 4487) */
@media(max-width:900px) {
  [data-theme="light"] .svc-ic,
  [data-theme="light"] .sit-ic,
  [data-theme="light"] .te-icon,
  [data-theme="light"] .te-icon-sm,
  [data-theme="light"] .sw-icon,
  [data-theme="light"] .sec-ico,
  [data-theme="light"] .ct-card-ico,
  [data-theme="light"] .tb-icon,
  [data-theme="light"] .sit-path-ic {
    background: #F3F6FB !important;
    border: 1px solid #E2E8F1 !important;
  }
}

/* SVC icônes par catégorie Stewart */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1) .svc-ic {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(200,16,46,.18), transparent 70%), #F3F6FB !important;
  border-color: #F2D5DA !important; color: #C8102E !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(200,16,46,.14) !important;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2) .svc-ic {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(28,44,91,.16), transparent 70%), #F3F6FB !important;
  border-color: #D2D6E3 !important; color: #1C2C5B !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(28,44,91,.12) !important;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3) .svc-ic {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(11,93,75,.16), transparent 70%), #F3F6FB !important;
  border-color: #C8DDD6 !important; color: #0B5D4B !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(11,93,75,.12) !important;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4) .svc-ic {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(198,168,91,.22), transparent 70%), #F3F6FB !important;
  border-color: #E8DCB6 !important; color: #8A6F2A !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(198,168,91,.16) !important;
}

/* SVC hover icônes — remplissage solide Stewart */
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+1):hover .svc-ic {
  background: #C8102E !important; color: #FFFFFF !important; border-color: #C8102E !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 4px 14px rgba(200,16,46,.42), 0 0 22px rgba(200,16,46,.26) !important;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+2):hover .svc-ic {
  background: #1C2C5B !important; color: #FFFFFF !important; border-color: #1C2C5B !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 4px 14px rgba(28,44,91,.36), 0 0 22px rgba(28,44,91,.22) !important;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+3):hover .svc-ic {
  background: #0B5D4B !important; color: #FFFFFF !important; border-color: #0B5D4B !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 4px 14px rgba(11,93,75,.34), 0 0 22px rgba(11,93,75,.20) !important;
}
[data-theme="light"] .svc-grid .svc-card:nth-child(4n+4):hover .svc-ic {
  background: #C6A85B !important; color: #FFFFFF !important; border-color: #C6A85B !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 4px 14px rgba(198,168,91,.48), 0 0 22px rgba(198,168,91,.28) !important;
}

/* SW icônes par catégorie */
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1) .sw-icon {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(200,16,46,.18), transparent 70%), #F3F6FB !important;
  border-color: #F2D5DA !important; color: #C8102E !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(200,16,46,.14) !important;
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2) .sw-icon {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(28,44,91,.16), transparent 70%), #F3F6FB !important;
  border-color: #D2D6E3 !important; color: #1C2C5B !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(28,44,91,.12) !important;
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3) .sw-icon {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(11,93,75,.16), transparent 70%), #F3F6FB !important;
  border-color: #C8DDD6 !important; color: #0B5D4B !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(11,93,75,.12) !important;
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+1):hover .sw-icon {
  background: #C8102E !important; color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(200,16,46,.40), 0 0 22px rgba(200,16,46,.24) !important;
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+2):hover .sw-icon {
  background: #1C2C5B !important; color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(28,44,91,.34), 0 0 22px rgba(28,44,91,.20) !important;
}
[data-theme="light"] .sw-grid .sw-card:nth-child(3n+3):hover .sw-icon {
  background: #0B5D4B !important; color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(11,93,75,.32), 0 0 22px rgba(11,93,75,.18) !important;
}

/* Trust éditorial + Secteurs */
[data-theme="light"] .te-col-left .te-icon {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(200,16,46,.18), transparent 70%), #F3F6FB !important;
  border-color: #F2D5DA !important; color: #C8102E !important;
}
[data-theme="light"] .te-col-right .te-icon {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(28,44,91,.16), transparent 70%), #F3F6FB !important;
  border-color: #D2D6E3 !important; color: #1C2C5B !important;
}
[data-theme="light"] .te-col-left .te-card-sm:last-child .te-icon {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(11,93,75,.16), transparent 70%), #F3F6FB !important;
  border-color: #C8DDD6 !important; color: #0B5D4B !important;
}
[data-theme="light"] .te-col-left .te-card-large:hover .te-icon  { background: #C8102E !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(200,16,46,.36) !important; }
[data-theme="light"] .te-col-right .te-card-large:hover .te-icon { background: #1C2C5B !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(28,44,91,.32) !important; }
[data-theme="light"] .te-col-left .te-card-sm:last-child:hover .te-icon { background: #0B5D4B !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(11,93,75,.28) !important; }

[data-theme="light"] .sec-ico {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(28,44,91,.16), transparent 70%), #F3F6FB !important;
  border-color: #D2D6E3 !important; color: #1C2C5B !important;
}
[data-theme="light"] .secteur-card:hover .sec-ico {
  background: #1C2C5B !important; color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(28,44,91,.32) !important;
}

/* Trust bar icône = or */
[data-theme="light"] .tb-icon {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(198,168,91,.22), transparent 70%), #F3F6FB !important;
  border-color: #E8DCB6 !important; color: #8A6F2A !important;
}
[data-theme="light"] .tb-item:hover .tb-icon {
  background: #C6A85B !important; color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(198,168,91,.44) !important;
}

/* ─── § J. SECTIONS — Halos Stewart subtils sur ivoire ─────────────── */
[data-theme="light"] #services {
  background: radial-gradient(ellipse 60% 45% at 12% 22%, rgba(200,16,46,.045), transparent 64%),
              radial-gradient(ellipse 42% 32% at 88% 78%, rgba(198,168,91,.040), transparent 58%),
              #FBFCFE !important;
}
[data-theme="light"] #logiciels {
  background: radial-gradient(ellipse 60% 45% at 88% 22%, rgba(28,44,91,.045), transparent 64%),
              radial-gradient(ellipse 42% 32% at 12% 78%, rgba(200,16,46,.038), transparent 58%),
              #FBFCFE !important;
}
[data-theme="light"] #situations {
  background: radial-gradient(ellipse 60% 45% at 18% 26%, rgba(11,93,75,.045), transparent 64%),
              radial-gradient(ellipse 42% 32% at 84% 74%, rgba(28,44,91,.034), transparent 58%),
              #FBFCFE !important;
}
[data-theme="light"] #equipe {
  background: radial-gradient(ellipse 55% 40% at 50% 28%, rgba(28,44,91,.040), transparent 64%),
              #FBFCFE !important;
}
[data-theme="light"] #secteurs {
  background: radial-gradient(ellipse 60% 45% at 84% 26%, rgba(28,44,91,.044), transparent 64%),
              radial-gradient(ellipse 42% 32% at 12% 76%, rgba(11,93,75,.034), transparent 58%),
              #FBFCFE !important;
}
[data-theme="light"] #contact {
  background: radial-gradient(ellipse 60% 45% at 22% 30%, rgba(200,16,46,.040), transparent 64%),
              radial-gradient(ellipse 42% 32% at 78% 72%, rgba(198,168,91,.034), transparent 58%),
              #FBFCFE !important;
}
[data-theme="light"] #faq {
  background: radial-gradient(ellipse 50% 38% at 50% 22%, rgba(200,16,46,.040), transparent 64%),
              radial-gradient(ellipse 40% 30% at 8% 78%, rgba(28,44,91,.032), transparent 58%),
              #FBFCFE !important;
}
[data-theme="light"] #temoignages {
  background: radial-gradient(ellipse 55% 38% at 50% 30%, rgba(198,168,91,.040), transparent 64%),
              #FBFCFE !important;
}

/* ─── § K. TRUST BAR + TICKER + PILL + CHATBOT (SOLIDES) ──────────── */
[data-theme="light"] #trust-bar,
[data-theme="light"] .ticker-wrap,
[data-theme="light"] #pill {
  background: #F3F6FB !important;
  border-color: #E2E8F1 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 12px rgba(22,30,58,.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .tb-veil {
  background: linear-gradient(90deg, #F3F6FB, rgba(243,246,251,.74) 50%, #F3F6FB) !important;
}
[data-theme="light"] .ticker-wrap::before { opacity: .12 !important; }
[data-theme="light"] .ti       { color: rgba(74,70,82,.62) !important; }
[data-theme="light"] .ti:hover { color: rgba(74,70,82,.92) !important; }
[data-theme="light"] .pill-txt strong { color: #0C0E16 !important; text-shadow: none !important; }
[data-theme="light"] .pill-txt span   { color: #6F7689 !important; }
[data-theme="light"] .pill-dl {
  background: #C8102E !important; color: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 2px 12px rgba(200,16,46,.38), 0 0 18px rgba(200,16,46,.22) !important;
}
[data-theme="light"] .pill-chat {
  background: #F3F6FB !important; border-color: #E2E8F1 !important; color: #3B414F !important;
}

[data-theme="light"] #cb-win {
  background: #FFFFFF !important;
  border-color: #E2E8F1 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 24px 56px rgba(22,30,58,.18), 0 4px 12px rgba(22,30,58,.10) !important;
}
[data-theme="light"] .cb-head-tartan .tartan { opacity: .68 !important; filter: saturate(1.0) brightness(.86) contrast(1.10) !important; }
[data-theme="light"] .cb-head-overlay {
  background:
    linear-gradient(90deg, rgba(200,16,46,.20) 0 2px, rgba(198,168,91,.16) 2px 3.5px, rgba(28,44,91,.18) 3.5px 5px, transparent 5px 100%),
    #F3F6FB !important;
}
[data-theme="light"] .cb-head::after {
  background: linear-gradient(90deg, rgba(200,16,46,.26), rgba(198,168,91,.20) 22%, rgba(200,16,46,.22) 50%, rgba(28,44,91,.18) 78%, rgba(11,93,75,.14) 100%) !important;
}
[data-theme="light"] .cb-m.bot .cb-bub {
  background: #F3F6FB !important; border-color: #E2E8F1 !important; color: #3B414F !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 3px rgba(22,30,58,.06) !important;
}
[data-theme="light"] .cb-foot {
  background: linear-gradient(90deg, transparent 0%, rgba(200,16,46,.08) 20%, rgba(198,168,91,.06) 50%, transparent 78%) top / 100% 1px no-repeat, #F3F6FB !important;
}

/* ─── § L. FAQ — Cartes ivoire premium ─────────────────────────────── */
[data-theme="light"] .faq-item {
  background: #FFFFFF !important; border: 1px solid #E2E8F1 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(22,30,58,.04), 0 6px 18px rgba(22,30,58,.08) !important;
}
[data-theme="light"] .faq-item:hover {
  border-color: #F2D5DA !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 6px rgba(200,16,46,.08), 0 12px 32px rgba(200,16,46,.14) !important;
}
[data-theme="light"] .faq-item.open {
  border-color: #DC3349 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 6px rgba(200,16,46,.10), 0 12px 36px rgba(200,16,46,.18) !important;
}
[data-theme="light"] .faq-q:hover { background: rgba(200,16,46,.030) !important; }
[data-theme="light"] .faq-a-inner { background: rgba(200,16,46,.020) !important; border-top-color: rgba(200,16,46,.10) !important; }
[data-theme="light"] .faq-q:hover .faq-icon,
[data-theme="light"] .faq-item.open .faq-icon {
  background: #C8102E !important; border-color: #C8102E !important; color: #FFFFFF !important;
}

/* ─── § M. SITUATIONS — Stewart rotation ─────────────────────────── */
[data-theme="light"] .sit-bg .tartan-light { opacity: .12 !important; filter: saturate(.40) brightness(.78) contrast(1.02) !important; }
[data-theme="light"] .sit-bg-fade {
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(251,252,254,.50), transparent),
              linear-gradient(180deg, #FBFCFE 0%, transparent 18%, transparent 82%, #FBFCFE 100%) !important;
}
[data-theme="light"] .sit-paths .sit-path {
  background: radial-gradient(ellipse 50% 40% at 96% 96%, rgba(200,16,46,.055), transparent 65%), #FFFFFF !important;
  border: 1px solid #F2D5DA !important; border-radius: 14px;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(200,16,46,.05), 0 8px 22px rgba(200,16,46,.08) !important;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2) {
  background: radial-gradient(ellipse 50% 40% at 96% 96%, rgba(28,44,91,.055), transparent 65%), #FFFFFF !important;
  border-color: #D2D6E3 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(28,44,91,.04), 0 8px 22px rgba(28,44,91,.09) !important;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3) {
  background: radial-gradient(ellipse 50% 40% at 96% 96%, rgba(11,93,75,.055), transparent 65%), #FFFFFF !important;
  border-color: #C8DDD6 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(11,93,75,.04), 0 8px 22px rgba(11,93,75,.09) !important;
}
[data-theme="light"] .sit-paths .sit-path:hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(200,16,46,.10), transparent 62%), #FFFFFF !important;
  border-color: #DC3349 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 44px rgba(200,16,46,.16) !important;
  transform: translateY(-3px);
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(28,44,91,.09), transparent 62%), #FFFFFF !important;
  border-color: #2A3D72 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 44px rgba(28,44,91,.14) !important;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3):hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(11,93,75,.09), transparent 62%), #FFFFFF !important;
  border-color: #157760 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 44px rgba(11,93,75,.14) !important;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+1) .sit-path-ic {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(200,16,46,.20), transparent 70%), #F3F6FB !important;
  border: 1px solid #F2D5DA !important; color: #C8102E !important;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2) .sit-path-ic {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(28,44,91,.18), transparent 70%), #F3F6FB !important;
  border: 1px solid #D2D6E3 !important; color: #1C2C5B !important;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3) .sit-path-ic {
  background: radial-gradient(ellipse 70% 60% at 80% 80%, rgba(11,93,75,.18), transparent 70%), #F3F6FB !important;
  border: 1px solid #C8DDD6 !important; color: #0B5D4B !important;
}
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+1):hover .sit-path-ic { background: #C8102E !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(200,16,46,.38) !important; transform: scale(1.06); }
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+2):hover .sit-path-ic { background: #1C2C5B !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(28,44,91,.32) !important; transform: scale(1.06); }
[data-theme="light"] .sit-paths .sit-path:nth-child(3n+3):hover .sit-path-ic { background: #0B5D4B !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(11,93,75,.30) !important; transform: scale(1.06); }
[data-theme="light"] .sit-path-t { color: #0C0E16 !important; font-weight: 600; }
[data-theme="light"] .sit-path-d { color: #3B414F !important; }
[data-theme="light"] .sit-path:hover .sit-path-t { color: #C8102E !important; }

/* ─── § N. FOOTER — Ivoire avec halos Stewart ────────────────────── */
[data-theme="light"] footer {
  background: radial-gradient(ellipse 55% 42% at 50% 0%, rgba(200,16,46,.040), transparent 60%),
              radial-gradient(ellipse 42% 32% at 95% 100%, rgba(28,44,91,.034), transparent 58%),
              radial-gradient(ellipse 38% 28% at 5% 100%, rgba(11,93,75,.030), transparent 58%),
              linear-gradient(180deg, #FBFCFE 0%, #EBEFF6 100%) !important;
  border-top: 1px solid #C6A85B !important;
  color: #3B414F !important;
}
[data-theme="light"] .ft-link       { color: #6F7689 !important; }
[data-theme="light"] .ft-link:hover { color: #C8102E !important; }
[data-theme="light"] .ft-sep        { background: #E2E8F1 !important; }
[data-theme="light"] .ft-copy       { color: #6F7689 !important; }
[data-theme="light"] .ft-cert-badge { background: #F3F6FB !important; border-color: #E2E8F1 !important; }
[data-theme="light"] .ft-cert-badge:hover { background: #FFFFFF !important; border-color: #DC3349 !important; }

/* ─── § O. FORMULAIRES ──────────────────────────────────────────── */
[data-theme="light"] .ct-form,
[data-theme="light"] .ct-card {
  background: #FFFFFF !important; border: 1px solid #E2E8F1 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(22,30,58,.04), 0 8px 24px rgba(22,30,58,.10) !important;
}
[data-theme="light"] .ct-field,
[data-theme="light"] .ct-input,
[data-theme="light"] .ct-textarea,
[data-theme="light"] .ct-select {
  background: #F3F6FB !important; border: 1px solid #C9D2E0 !important; color: #0C0E16 !important;
  box-shadow: inset 0 1px 2px rgba(22,30,58,.06) !important;
}
[data-theme="light"] .ct-field:focus,
[data-theme="light"] .ct-input:focus,
[data-theme="light"] .ct-textarea:focus {
  border-color: #C8102E !important; background: #FFFFFF !important;
  box-shadow: inset 0 1px 2px rgba(22,30,58,.04), 0 0 0 3px rgba(200,16,46,.12) !important;
}
[data-theme="light"] .ct-label     { color: #3B414F !important; }
[data-theme="light"] ::placeholder { color: #6F7689 !important; opacity: 1; }

/* ─── § P. BOUTONS — Rouge royal premium ───────────────────────── */
[data-theme="light"] .btn-r,
[data-theme="light"] .ci-btn,
[data-theme="light"] .fbtn {
  background: #C8102E !important; border-color: transparent !important; color: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 2px 10px rgba(200,16,46,.32), 0 1px 3px rgba(200,16,46,.20) !important;
}
[data-theme="light"] .btn-r:hover,
[data-theme="light"] .ci-btn:hover,
[data-theme="light"] .fbtn:hover {
  background: #9A0D24 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 6px 24px rgba(200,16,46,.42), 0 0 24px rgba(200,16,46,.26), inset 0 0 0 1px rgba(198,168,91,.34) !important;
}
[data-theme="light"] .btn-ghost {
  background: #F3F6FB !important; border: 1px solid #C9D2E0 !important; color: #3B414F !important;
}
[data-theme="light"] .btn-ghost:hover {
  background: #FFFFFF !important; border-color: #DC3349 !important; color: #C8102E !important;
  box-shadow: 0 2px 12px rgba(200,16,46,.14) !important;
}

/* ─── § Q. ACCENTS IDENTITÉ + TYPOGRAPHIE ──────────────────────── */
[data-theme="light"] .hero-h em {
  color: #C8102E !important;
  text-shadow: 0 1px 0 #FFFFFF, 0 2px 22px rgba(200,16,46,.28), 0 8px 38px rgba(200,16,46,.16) !important;
}
[data-theme="light"] .badge-r {
  background: linear-gradient(145deg, #FFFFFF, rgba(200,16,46,.08)) !important;
  border: 1px solid rgba(200,16,46,.36) !important; color: #9A0D24 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 12px rgba(200,16,46,.18) !important;
}
[data-theme="light"] .live-dot {
  background: #C8102E !important;
  box-shadow: 0 0 0 3px rgba(200,16,46,.22), 0 0 16px rgba(200,16,46,.54) !important;
}
[data-theme="light"] .histoire-link { color: #C8102E !important; }
[data-theme="light"] .histoire-link:hover { color: #9A0D24 !important; text-shadow: 0 1px 10px rgba(200,16,46,.22); }
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 { color: #0C0E16 !important; }
[data-theme="light"] p,
[data-theme="light"] li  { color: #3B414F !important; }
[data-theme="light"] .svc-t,
[data-theme="light"] .sw-card-t,
[data-theme="light"] .te-card-t { color: #0C0E16 !important; }
[data-theme="light"] .svc-d,
[data-theme="light"] .sw-card-d,
[data-theme="light"] .te-card-d { color: #3B414F !important; }
[data-theme="light"] .badge {
  background: #F3F6FB !important; border: 1px solid #E2E8F1 !important;
  color: #3B414F !important; box-shadow: inset 0 1px 0 #FFFFFF !important;
}
[data-theme="light"] .secteur-card {
  background: radial-gradient(ellipse 50% 40% at 96% 96%, rgba(28,44,91,.045), transparent 65%), #FFFFFF !important;
  border-color: #D2D6E3 !important;
}
[data-theme="light"] .secteur-card:hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(28,44,91,.09), transparent 62%), #FFFFFF !important;
  border-color: #2A3D72 !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 44px rgba(28,44,91,.14) !important;
  transform: translateY(-3px);
}
[data-theme="light"] .testi-card {
  background: radial-gradient(ellipse 50% 40% at 96% 96%, rgba(198,168,91,.060), transparent 65%), #FFFFFF !important;
  border: 1px solid #E8DCB6 !important;
}
[data-theme="light"] .testi-card:hover {
  background: radial-gradient(ellipse 60% 50% at 96% 96%, rgba(198,168,91,.12), transparent 62%), #FFFFFF !important;
  border-color: #C6A85B !important;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 44px rgba(198,168,91,.20) !important;
  transform: translateY(-2px);
}
[data-theme="light"] .ts-arrow {
  background: #F3F6FB !important; border: 1px solid #C9D2E0 !important; color: #3B414F !important;
}
[data-theme="light"] .ts-arrow:hover {
  background: #C8102E !important; border-color: #C8102E !important; color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(200,16,46,.34) !important;
}
[data-theme="light"] .ci-card {
  background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(200,16,46,.052), transparent 65%), #FFFFFF !important;
  border-color: #F2D5DA !important;
}
[data-theme="light"] .ci-glow {
  background: radial-gradient(ellipse, rgba(200,16,46,.12), transparent 65%) !important;
}
[data-theme="light"] .disp em {
  color: #C8102E !important;
  text-shadow: 0 2px 14px rgba(200,16,46,.18) !important;
}
[data-theme="light"] .eye { color: #8A6F2A !important; }
[data-theme="light"] .eye::before {
  background: linear-gradient(90deg, #C6A85B 0%, #C6A85B 32%, #0B5D4B 32%, #0B5D4B 40%, #1C2C5B 40%, #1C2C5B 48%, #C8102E 48%, #C8102E 100%) !important;
  width: 44px !important; height: 2px !important;
}
[data-theme="light"] *::-webkit-scrollbar-track { background: #FBFCFE !important; }
[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #C6A85B 0%, #C8102E 55%, #9A0D24 100%) !important;
  border-color: #FBFCFE !important;
}

/* ─── § R. MOBILE — Logo flottant forcé block + tartan adapté ──── */
@media(max-width:900px) {
  [data-theme="light"] .hero-logo-deco { display: block !important; }
  [data-theme="light"] .hero-tartan-panel {
    background: linear-gradient(180deg, #EDF1F8 0%, #C9D2E0 100%) !important;
    opacity: 1 !important;
  }
  [data-theme="light"] .hero-tartan-inner .tartan {
    opacity: .72 !important;
    filter: saturate(.90) brightness(.96) contrast(1.04) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO LIGHT v14 — Tartan DOUBLE SÉCURITÉ
   ══════════════════════════════════════════════════════════════════════════════
   Approche radicale : si .hero-tartan-panel se rend pas correctement,
   on l'a aussi en background-image direct sur #hero (côté droit).
   Plus un logo flottant en pseudo-element backup si l'<img> ne se voit pas.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── #hero — Tartan en background-image direct (côté droit) ──────────── */
[data-theme="light"] #hero {
  position: relative !important;
  background:
    /* Mask gauche → transparent à droite (révèle le tartan) */
    linear-gradient(90deg,
      #F3F6FB 0%,
      #FBFCFE 40%,
      rgba(251,252,254,.86) 50%,
      rgba(251,252,254,.16) 60%,
      transparent 68%) ,
    /* Tartan PNG sur la moitié droite */
    url('/assets/images/royal-stewart-seamless.png') right top / 50vw 100% repeat-y,
    /* Halos Stewart sur fond */
    radial-gradient(ellipse 50% 56% at 16% 46%, rgba(200,16,46,.085), transparent 62%),
    radial-gradient(ellipse 38% 32% at 78% 22%, rgba(198,168,91,.07), transparent 60%),
    radial-gradient(ellipse 30% 26% at 88% 64%, rgba(11,93,75,.05),   transparent 60%),
    radial-gradient(ellipse 80% 60% at 35% 35%, rgba(255,255,255,.36), transparent 55%),
    linear-gradient(135deg, #F3F6FB 0%, #FBFCFE 50%, #EBEFF6 100%) !important;
  background-blend-mode: normal, multiply, normal, normal, normal, normal, normal !important;
}

/* Layer halos premium par-dessus le tartan */
[data-theme="light"] #hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    /* Glow rouge royal côté droit sur tartan */
    radial-gradient(ellipse 30% 50% at 78% 50%, rgba(200,16,46,.22), transparent 60%),
    /* Glow or chaud */
    radial-gradient(ellipse 22% 34% at 82% 28%, rgba(198,168,91,.18), transparent 64%),
    /* Reflet satin diagonal */
    linear-gradient(160deg, rgba(255,255,255,.22) 0%, transparent 30%) !important;
  mix-blend-mode: multiply !important;
  opacity: 1 !important;
}

/* Fondu bas hero */
[data-theme="light"] #hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: linear-gradient(0deg,
    rgba(251,252,254,.46) 0%,
    rgba(251,252,254,.10) 14%,
    transparent 28%) !important;
}

/* Contenu .w toujours par-dessus */
[data-theme="light"] #hero > .w {
  position: relative !important;
  z-index: 10 !important;
}

/* ─── Cache l'ancien panneau qui posait problème ──────────────────────── */
[data-theme="light"] .hero-tartan-panel {
  display: none !important;
}

/* ─── LOGO FLOTTANT — Image + animation préservée ─────────────────────── */
[data-theme="light"] .hero-logo-deco {
  display:        block !important;
  visibility:     visible !important;
  opacity:        .28 !important;
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 0 56px rgba(200,16,46,.50))
    drop-shadow(0 0 26px rgba(200,16,46,.34))
    drop-shadow(0 8px 32px rgba(22,30,58,.22)) !important;
  z-index:        20 !important;
  position:       absolute !important;
  /* Override le containing block — passe au #hero parent */
  right:          6% !important;
  top:            50% !important;
  /* PAS de transform ici : laissé à l'animation heroDecoFloat. Un transform en
     !important écrase la keyframe dans la cascade → logo figé. Cause racine du
     "logo statique" en light mode. */
  width:          clamp(220px, 28vw, 400px) !important;
  pointer-events: none !important;
}

/* Repositionner le logo en dehors du panneau caché — il est enfant du panneau */
/* On le sort visuellement via fixed positioning relative au viewport */

/* Animation float préservée (héritée du dark mode keyframe heroDecoFloat) */

/* ─── Hero creds satin ────────────────────────────────────────────────── */
[data-theme="light"] .hero-creds {
  background:    linear-gradient(145deg, #FFFFFF 0%, #F3F6FB 56%, #FBFCFE 100%) !important;
  border:        1px solid #E2E8F1 !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 0 28px rgba(198,168,91,.07),
    0 8px 28px rgba(22,30,58,.18),
    0 2px 6px rgba(200,16,46,.06) !important;
  position: relative !important;
  z-index: 11 !important;
}

/* ─── Mobile : pas de tartan en background pour le hero ──────────────── */
@media(max-width:900px) {
  [data-theme="light"] #hero {
    background:
      radial-gradient(ellipse 50% 56% at 50% 30%, rgba(200,16,46,.06), transparent 62%),
      linear-gradient(135deg, #F3F6FB 0%, #FBFCFE 100%) !important;
  }
  [data-theme="light"] #hero::before {
    background:
      url('/assets/images/royal-stewart-seamless.png') center bottom / 100% 40% no-repeat,
      transparent !important;
    opacity: .22 !important;
    mix-blend-mode: multiply !important;
  }
}

/* ══ FIX v14.1 — Panneau visible (parent du logo) avec bg transparent ══════ */
[data-theme="light"] .hero-tartan-panel {
  display:    block !important;
  visibility: visible !important;
  opacity:    1 !important;
  background: transparent !important;
}
/* L'ancien panneau reste là (parent du logo + tartan element) mais ne masque
   pas le tartan en background-image du hero. Le .tartan enfant rend SON propre
   tartan dessus. Double sécurité. */

[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 70%,
    rgba(251,252,254,.20) 90%,
    rgba(251,252,254,.40) 100%) !important;
  z-index: 3 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO LIGHT v15 — Structure dark mode RESPECTÉE, version lumineuse
   ══════════════════════════════════════════════════════════════════════════════
   Annule l'erreur v14 (tartan en bg énorme sur #hero) et revient à la
   structure originale : panneau tartan à droite avec skewX, tartan à
   l'intérieur, glow halos. Adapté en clair.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── ANNULE le tartan en background énorme du hero v14 ──────────────── */
[data-theme="light"] #hero {
  background:
    radial-gradient(ellipse 50% 56% at 16% 46%, rgba(200,16,46,.085), transparent 62%),
    radial-gradient(ellipse 38% 32% at 78% 22%, rgba(198,168,91,.07), transparent 60%),
    radial-gradient(ellipse 30% 26% at 88% 64%, rgba(11,93,75,.05),   transparent 60%),
    radial-gradient(ellipse 80% 60% at 35% 35%, rgba(255,255,255,.36), transparent 55%),
    linear-gradient(135deg, #F3F6FB 0%, #FBFCFE 50%, #EBEFF6 100%) !important;
  background-blend-mode: normal !important;
}

/* Reset hero::before — pas de glow par-dessus tout */
[data-theme="light"] #hero::before {
  background:
    linear-gradient(90deg,
      rgba(251,252,254,.20) 0%,
      transparent 30%) !important;
  z-index: 0 !important;
  opacity: 1 !important;
}

/* Reset hero::after — fondu bas léger */
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg,
    rgba(251,252,254,.36) 0%,
    rgba(251,252,254,.10) 14%,
    transparent 28%) !important;
  z-index: 0 !important;
}

/* ─── PANNEAU TARTAN — Structure dark mode conservée ─────────────────── */
/* width: min(52%,760px); transform: skewX(-6deg) translateX(7%) du dark mode */
/* Panneau lui-même : background ivoire warm très subtil pour donner du contraste */
[data-theme="light"] .hero-tartan-panel {
  display:    block !important;
  visibility: visible !important;
  opacity:    1 !important;
  background: linear-gradient(135deg, #EDF1F8 0%, #DFE6F1 50%, #C9D2E0 100%) !important;
}

[data-theme="light"] .hero-tartan-inner {
  display:    block !important;
  visibility: visible !important;
  opacity:    1 !important;
}

/* ─── TARTAN ÉLÉMENT — Couleurs Stewart vraies (red bg + PNG) ──────────── */
/* La règle ligne 122 définit déjà : background-color: #b9202f + tartan PNG
   + gradients. On override juste opacity + filter pour le light mode. */
[data-theme="light"] .hero-tartan-inner .tartan {
  display:        block !important;
  visibility:     visible !important;
  opacity:        .92 !important;
  mix-blend-mode: normal !important;
  filter:
    saturate(.96)
    brightness(.94)
    contrast(1.08) !important;
}

/* Animation tartanDrift préservée (héritée du @media min-width:901px) */

/* ─── FADE GAUCHE PANEL — Transition douce vers le texte ─────────────── */
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(90deg,
    #FBFCFE 0%,
    rgba(251,252,254,.78) 8%,
    rgba(251,252,254,.32) 16%,
    rgba(251,252,254,.06) 24%,
    transparent 32%) !important;
  z-index: 3 !important;
}

/* Pas de pseudo-element parasite */
[data-theme="light"] .hero-tartan-panel::before {
  display: none !important;
}

/* ─── GLOW STEWART — Sur tartan en multiply ──────────────────────────── */
[data-theme="light"] .hero-tartan-glow {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background:
    radial-gradient(ellipse 60% 54% at 60% 42%, rgba(200,16,46,.22),  transparent 66%),
    radial-gradient(ellipse 42% 36% at 78% 30%, rgba(198,168,91,.18), transparent 72%),
    radial-gradient(ellipse 30% 28% at 86% 64%, rgba(28,44,91,.12),   transparent 60%) !important;
  mix-blend-mode: multiply !important;
}

/* ─── LOGO FLOTTANT — Visible avec halo rouge royal ────────────────── */
[data-theme="light"] .hero-logo-deco {
  display:        block !important;
  visibility:     visible !important;
  opacity:        .32 !important;
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 0 64px rgba(200,16,46,.55))
    drop-shadow(0 0 28px rgba(200,16,46,.38))
    drop-shadow(0 8px 36px rgba(22,30,58,.26)) !important;
  z-index:        10 !important;
  position:       absolute !important;
  /* Position héritée du dark mode line 369-374 : right:6%, top:50%, width clamp */
  /* Animation heroDecoFloat 8s : continue */
}

/* ─── Hero creds : satin warm ────────────────────────────────────────── */
[data-theme="light"] .hero-creds {
  background:    linear-gradient(145deg, #FFFFFF 0%, #F3F6FB 56%, #FBFCFE 100%) !important;
  border:        1px solid #E2E8F1 !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 0 28px rgba(198,168,91,.07),
    0 8px 28px rgba(22,30,58,.18),
    0 2px 6px rgba(200,16,46,.06) !important;
  position: relative !important;
  z-index: 11 !important;
}

/* ─── MOBILE — Le panneau a déjà display:none ligne 1583 ─────────────── */
/* On laisse la gestion mobile native (panneau masqué par .htaccess CSS).
   Pas d'override pour ne pas perturber. */
@media(max-width:900px) {
  [data-theme="light"] #hero {
    background:
      radial-gradient(ellipse 60% 50% at 50% 30%, rgba(200,16,46,.06), transparent 64%),
      linear-gradient(135deg, #F3F6FB 0%, #FBFCFE 100%) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO LIGHT v16 — Force panel VISIBLE avec debug temporaire
   ══════════════════════════════════════════════════════════════════════════════
   But : vérifier visuellement que .hero-tartan-panel rend bien dans le DOM.
   Cadre rouge = panneau visible. Si pas de cadre rouge = panneau caché par
   autre chose ou viewport mobile.
   ══════════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .hero-tartan-panel {
  display:    block !important;
  visibility: visible !important;
  opacity:    1 !important;
  background: linear-gradient(135deg, #EDF1F8 0%, #C9D2E0 100%) !important;

  /* DEBUG TEMPORAIRE — cadre rouge épais pour visibilité */
  outline:        6px solid #C8102E !important;
  outline-offset: -3px !important;
  box-shadow:     inset 0 0 0 2px rgba(200,16,46,.50) !important;
}

[data-theme="light"] .hero-tartan-inner {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  outline: 4px solid #1C2C5B !important;
  outline-offset: -8px !important;
}

[data-theme="light"] .hero-tartan-inner .tartan {
  display: block !important;
  visibility: visible !important;
  opacity: .95 !important;
  outline: 4px solid #0B5D4B !important;
  outline-offset: -14px !important;
}

[data-theme="light"] .hero-logo-deco {
  display: block !important;
  visibility: visible !important;
  opacity: .50 !important;
  outline: 4px solid #C6A85B !important;
  outline-offset: -3px !important;
  background: rgba(0,255,0,.15) !important;
}

/* Forcer panneau visible aussi en mobile pour debug */
@media(max-width:900px) {
  [data-theme="light"] .hero-tartan-panel {
    display: block !important;
  }
  [data-theme="light"] .hero-logo-deco {
    display: block !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO LIGHT v17 — Force toutes les propriétés de positionnement du panel
   ══════════════════════════════════════════════════════════════════════════════
   Cause confirmée : utilisateur voit "ligne rouge horizontale à gauche".
   → panel rendu mais position cassée (probable rule non-scopée qui écrase
     right:0 ou width au niveau cascade).
   Solution : forcer EXPLICITEMENT toutes les propriétés layout.
   ══════════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .hero-tartan-panel {
  /* POSITIONNEMENT — force colonne droite */
  position:   absolute !important;
  right:      0 !important;
  left:       auto !important;
  top:        0 !important;
  bottom:     0 !important;
  width:      min(52%, 760px) !important;
  height:     100% !important;
  max-width:  none !important;
  min-width:  0 !important;

  /* TRANSFORM — même que dark mode (skew + translate droite) */
  transform:        skewX(-6deg) translateX(7%) !important;
  transform-origin: center !important;

  /* VISIBILITÉ */
  display:    block !important;
  visibility: visible !important;
  opacity:    1 !important;

  /* OVERFLOW */
  overflow:        hidden !important;
  pointer-events:  none !important;

  /* BACKGROUND — ivoire warm pour contraste tartan */
  background: linear-gradient(135deg, #EDF1F8 0%, #DFE6F1 50%, #C9D2E0 100%) !important;

  /* Debug cadre rouge — temporaire */
  outline:        6px solid #C8102E !important;
  outline-offset: -3px !important;
}

/* INNER — restaure counter-skew du dark mode (ligne 2839) */
[data-theme="light"] .hero-tartan-inner {
  position:   absolute !important;
  inset:      0 !important;
  transform:  skewX(6deg) scale(1.08) !important;
  display:    block !important;
  visibility: visible !important;
  opacity:    1 !important;
  pointer-events: none !important;
}

/* TARTAN ÉLÉMENT — animation préservée */
[data-theme="light"] .hero-tartan-inner .tartan {
  position:       absolute !important;
  inset:          -10% !important;
  display:        block !important;
  visibility:     visible !important;
  opacity:        .92 !important;
  mix-blend-mode: normal !important;
  filter:
    saturate(.96)
    brightness(.94)
    contrast(1.08) !important;
  animation:      tartanDrift 26s ease-in-out infinite alternate !important;
  background-size: auto !important;
  background-position: center center !important;
}

/* MOBILE — panel reste à droite (override .hero-tartan-panel{width:100%} ligne 2904) */
@media(max-width:900px) {
  [data-theme="light"] .hero-tartan-panel {
    width:     min(52%, 760px) !important;
    transform: skewX(-6deg) translateX(7%) !important;
    opacity:   1 !important;
    display:   block !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIX SECTION ZONES — Défilé des villes royal Stewart (light mode UNIQUEMENT)
   ══════════════════════════════════════════════════════════════════════════════
   Cible : section #zones (ligne 429 HTML)
   PROBLÈME résolu :
     · ::before #f3f3f7 sur 48% haut = voile blanc qui cache les villes
     · ::after #ebebf2 sur 40% bas = voile blanc qui cache les villes
     · Texte sans glow donc invisible
   SOLUTION :
     · Fades champagne/or chaud très réduits (28% au lieu de 48%)
     · Texte rouge Stewart profond #b11217 avec stroke or + glow doré
   Ne touche : que .zn-list li + .zn-stage::before/after en light mode
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── FADE HAUT — Champagne chaud, hauteur réduite ───────────────────────── */
[data-theme="light"] .zn-stage::before {
  height: 28% !important;
  background: linear-gradient(to bottom,
    rgba(246,240,228,.94) 0%,
    rgba(246,240,228,.78) 28%,
    rgba(246,240,228,.46) 56%,
    rgba(246,240,228,.18) 80%,
    transparent 100%) !important;
}

/* ─── FADE BAS — Champagne chaud, hauteur réduite ───────────────────────── */
[data-theme="light"] .zn-stage::after {
  height: 28% !important;
  background: linear-gradient(to top,
    rgba(238,228,206,.92) 0%,
    rgba(238,228,206,.74) 28%,
    rgba(238,228,206,.42) 56%,
    rgba(238,228,206,.14) 80%,
    transparent 100%) !important;
}

/* ─── TEXTE VILLES — Rouge Stewart royal + stroke or + glow champagne ──── */
[data-theme="light"] .zn-list li {
  color: #B11217 !important;
  font-weight: 500 !important;
  font-style: italic !important;
  letter-spacing: .08em !important;

  /* Stroke or très fin (Webkit) */
  -webkit-text-stroke: 0.5px rgba(198,168,91,.62) !important;

  /* Glow doré subtil + halo rouge profond + contraste blanc */
  text-shadow:
    0 0 1px rgba(255,253,247,.85),
    0 0 14px rgba(198,168,91,.42),
    0 0 28px rgba(198,168,91,.22),
    0 1px 2px rgba(120,8,18,.30),
    0 0 36px rgba(177,18,23,.18) !important;
}

/* Effet hover sur les villes — accent or chaud (premium aristocratique) */
[data-theme="light"] .zn-list li:hover {
  color: #9E0B0F !important;
  -webkit-text-stroke: 0.5px rgba(198,168,91,.86) !important;
  text-shadow:
    0 0 1px rgba(255,253,247,1),
    0 0 16px rgba(198,168,91,.66),
    0 0 32px rgba(198,168,91,.36),
    0 1px 3px rgba(120,8,18,.42) !important;
}

/* ─── ZN-GLOW — Si présent, réduire au minimum chaud ─────────────────── */
[data-theme="light"] .zn-glow {
  background: radial-gradient(ellipse 60% 40% at 50% 50%,
    rgba(198,168,91,.10),
    transparent 64%) !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO LIGHT v19 — Nettoyage debug + tartan dezoomé + logo discret
   ══════════════════════════════════════════════════════════════════════════════
   Corrections demandées :
     1. Tartan dezoomé → background-size identique au dark mode
        (clamp(82px,7.5vw,116px) = tuiles répétées élégantes)
     2. Logo flottant → semi-transparent, sans container visible, sans outline
     3. Suppression debug v16 (outlines rouge/bleu/vert/or + bg lime)
     4. Réduction halos blancs → lueurs champagne/or subtiles
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── PANEL — Suppression debug v16 outline rouge, garde positionnement ─── */
[data-theme="light"] .hero-tartan-panel {
  /* Positionnement v17 conservé */
  position:   absolute !important;
  right:      0 !important;
  left:       auto !important;
  top:        0 !important;
  bottom:     0 !important;
  width:      min(52%, 760px) !important;
  height:     100% !important;
  transform:  skewX(-6deg) translateX(7%) !important;
  transform-origin: center !important;
  overflow:   hidden !important;
  pointer-events: none !important;

  display:    block !important;
  visibility: visible !important;
  opacity:    .95 !important;

  /* Background ivoire warm subtil pour contraste tartan */
  background: linear-gradient(135deg, #EAE0C2 0%, #DDD2AE 100%) !important;

  /* SUPPRESSION DEBUG v16 */
  outline:      none !important;
  outline-offset: 0 !important;
  box-shadow:   none !important;
}

/* ─── INNER — Suppression debug v16 outline bleu ──────────────────────── */
[data-theme="light"] .hero-tartan-inner {
  position:   absolute !important;
  inset:      0 !important;
  transform:  skewX(6deg) scale(1.08) !important;
  display:    block !important;
  visibility: visible !important;
  opacity:    1 !important;
  pointer-events: none !important;

  outline: none !important;
}

/* ─── TARTAN — Scale identique au dark mode (multiples répétitions) ──── */
[data-theme="light"] .hero-tartan-inner .tartan {
  position:       absolute !important;
  inset:          -10% !important;
  display:        block !important;
  visibility:     visible !important;
  opacity:        .85 !important;
  mix-blend-mode: normal !important;
  filter:
    saturate(.96)
    brightness(.96)
    contrast(1.04) !important;

  /* SCALE COMME DARK MODE — tuiles répétées élégantes */
  background-size:     clamp(82px, 7.5vw, 116px) clamp(82px, 7.5vw, 116px) !important;
  background-position: center center !important;
  background-repeat:   repeat !important;

  /* Animation préservée */
  animation: tartanDrift 26s ease-in-out infinite alternate !important;

  outline: none !important;
}

/* ─── FADE GAUCHE PANEL — Doux ivoire ─────────────────────────────────── */
[data-theme="light"] .hero-tartan-panel::after {
  background: linear-gradient(90deg,
    #FBFCFE 0%,
    rgba(251,252,254,.78) 8%,
    rgba(251,252,254,.32) 16%,
    rgba(251,252,254,.08) 24%,
    transparent 30%) !important;
  z-index: 3 !important;
}

/* Pas de pseudo parasite */
[data-theme="light"] .hero-tartan-panel::before {
  display: none !important;
}

/* ─── GLOW STEWART — Sur tartan en multiply (champagne/or dominant) ──── */
[data-theme="light"] .hero-tartan-glow {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background:
    radial-gradient(ellipse 55% 50% at 60% 42%, rgba(198,168,91,.22), transparent 64%),
    radial-gradient(ellipse 38% 32% at 78% 30%, rgba(198,168,91,.16), transparent 70%),
    radial-gradient(ellipse 32% 26% at 82% 64%, rgba(200,16,46,.10),  transparent 60%) !important;
  mix-blend-mode: multiply !important;
}

/* ─── LOGO FLOTTANT — Discret, sans contour, intégré au tartan ────────── */
[data-theme="light"] .hero-logo-deco {
  display:        block !important;
  visibility:     visible !important;
  /* Logo watermark premium — présence identifiable dès le premier regard.
     - opacity .21 = +40% vs .15, centre de la plage .18–.24 demandée
     - Imprimé dans le tissu : ni autocollant ni image indépendante
     - AUCUN filtre, AUCUN halo, blend normal, z-index 1 (derrière le contenu)
     - Dark mode effectif = .09 (ligne 2861) — ce bloc light mode uniquement */
  opacity:        .22 !important;
  mix-blend-mode: normal !important;

  background:     transparent !important;
  border:         none !important;
  outline:        none !important;
  outline-offset: 0 !important;
  box-shadow:     none !important;
  filter:         none !important;

  z-index:  1 !important;
  position: absolute !important;
}
/* Animation heroDecoFloat 8s préservée — flottement lent naturel, comme en dark */

/* ─── HERO BACKGROUND — Halos champagne/or (réduire blancs) ──────────── */
[data-theme="light"] #hero {
  background:
    radial-gradient(ellipse 50% 56% at 16% 46%, rgba(200,16,46,.075), transparent 62%),
    radial-gradient(ellipse 38% 32% at 78% 22%, rgba(198,168,91,.085), transparent 60%),
    radial-gradient(ellipse 30% 26% at 88% 64%, rgba(198,168,91,.040), transparent 60%),
    radial-gradient(ellipse 68% 50% at 28% 35%, rgba(255,255,255,.24), transparent 58%),
    linear-gradient(135deg, #F3F6FB 0%, #FBFCFE 50%, #EBEFF6 100%) !important;
}

/* Hero::before — voile très réduit (évite brouillard blanc) */
[data-theme="light"] #hero::before {
  background:
    linear-gradient(90deg,
      rgba(251,252,254,.16) 0%,
      transparent 26%) !important;
}

/* Hero::after — fondu bas léger */
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg,
    rgba(251,252,254,.36) 0%,
    rgba(251,252,254,.10) 14%,
    transparent 28%) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIX SECTION ZONES v2 — Villes royal Stewart, style ÉDITORIAL net
   ══════════════════════════════════════════════════════════════════════════════
   Annule v18 (glow doré flou cheap) — garde seulement stroke or net.
   Inspiration : défilé royal écossais, gravure premium, texte de magazine luxe.
   ══════════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .zn-list li {
  color: #9E0B0F !important;
  font-weight: 500 !important;
  font-style: italic !important;
  letter-spacing: .08em !important;

  /* Contour or fin et propre (filet de gravure) */
  -webkit-text-stroke: 0.6px #C6A85B !important;

  /* AUCUN glow — juste une micro-ombre très courte pour relief */
  text-shadow:
    0 1px 0 rgba(255,253,247,.42),
    0 1px 1.5px rgba(120,8,18,.36) !important;

  filter: none !important;
}

/* Hover — couleur plus profonde, stroke or intensifié, toujours net */
[data-theme="light"] .zn-list li:hover {
  color: #7E0A0E !important;
  -webkit-text-stroke: 0.7px #B89540 !important;
  text-shadow:
    0 1px 0 rgba(255,253,247,.50),
    0 1px 1.5px rgba(120,8,18,.46) !important;
}

/* Pas de glow ambiant sur le ::before/::after non plus */
[data-theme="light"] .zn-glow {
  background: none !important;
  opacity: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Villes (#zones) : sobre, filet or discret, AUCUN halo / néon
   ──────────────────────────────────────────────────────────────────────────────
   Sélecteur [data-theme="light"] UNIQUEMENT → le DARK MODE n'est jamais touché
   (sa règle .zn-list li reste strictement identique : couleur, glow rouge, etc.).
   On conserve la couleur, la typo, les tailles et les animations existantes ;
   on supprime seulement l'effet lumineux/diffus (text-shadow) et on garde un
   filet doré net et discret (pas de glow → plus d'effet néon).
   Dernier bloc .zn-list li du fichier → priorité de cascade maximale.
   ══════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .zn-list li {
  -webkit-text-stroke: 0.5px #C6A85B !important;   /* filet or net et discret */
  text-shadow: none !important;                    /* plus de halo / glow / ombre diffuse */
  filter: none !important;
}
[data-theme="light"] .zn-list li:hover {
  -webkit-text-stroke: 0.6px #B89540 !important;   /* or à peine appuyé au survol */
  text-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Villes (#zones) : lumière dorée DIFFUSE, fondus haut/bas
   ──────────────────────────────────────────────────────────────────────────────
   Problème : le fond de section est blanc, mais la chaleur dorée démarrait par
   une bande champagne à bord franc (top du .zn-stage) → séparation horizontale
   nette, effet "bloc posé".
   Correctif (LIGHT MODE uniquement, dark intact) :
   • La chaleur dorée est désormais portée par la SECTION entière via un dégradé
     vertical transparent → doux → transparent : elle APPARAÎT puis DISPARAÎT
     progressivement, se fond dans les sections voisines (blanches). Aucun
     rectangle, on ne perçoit plus le début ni la fin de la zone lumineuse.
   • Les fondus du stage (::before/::after) reprennent EXACTEMENT la même teinte
     champagne → ils ne créent plus de bande de couleur différente, ils ne font
     que masquer en douceur l'entrée/sortie de la liste 3D.
   Glow doré, couleur, intensité et animation : conservés.
   Dernier bloc #zones du fichier → priorité de cascade maximale.
   ══════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] #zones {
  background:
    /* Lumière dorée diffuse traversant la section : fondu haut + fondu bas,
       plateau large et doux → on ne perçoit ni début ni fin. */
    linear-gradient(180deg,
      rgba(247,240,224,0)    0%,
      rgba(247,240,224,0)    5%,
      rgba(247,240,224,.13) 20%,
      rgba(248,238,216,.21) 38%,
      rgba(248,238,216,.20) 54%,
      rgba(248,239,220,.14) 70%,
      rgba(249,243,231,.08) 83%,
      rgba(250,250,252,.03) 93%,   /* vire doucement vers le blanc froid de la suivante */
      rgba(251,252,254,0)  100%),
    /* Cœur doré : nettement plus petit ET plus discret (plus de "projecteur") */
    radial-gradient(ellipse 60% 26% at 50% 42%, rgba(198,168,91,.05), transparent 62%),
    /* Trace rouge Stewart d'origine en haut, conservée */
    radial-gradient(ellipse 90% 44% at 50% 0%, rgba(181,28,44,.018), transparent 54%),
    var(--bg) !important;
}
/* Fondus du stage — MÊME teinte que la lueur de section, et opacité de départ
   ALIGNÉE sur le plateau (~.5) pour qu'aucun ressaut n'apparaisse au bord du
   stage. Ils ne font que masquer en douceur l'entrée/sortie de la liste 3D. */
[data-theme="light"] .zn-stage::before {
  height: 50% !important;
  background: linear-gradient(to bottom,
    rgba(247,240,224,.30) 0%,
    rgba(247,240,224,.24) 26%,
    rgba(247,240,224,.15) 50%,
    rgba(247,240,224,.06) 74%,
    transparent          100%) !important;
}
[data-theme="light"] .zn-stage::after {
  /* Fondu NEUTRE (var(--bg)) — surtout PAS de champagne ici : sinon il
     ré-ajoute de la chaleur au bas du stage là où la section est déjà
     redevenue neutre → ressaut chaud/blanc. Avec du blanc, le bas de la
     liste se dissout en blanc sur ~300px : aucun bord, raccord parfait avec
     le pont et #secteurs (tous blancs). */
  height: 64% !important;
  background: linear-gradient(to top,
    var(--bg)             0%,
    var(--bg)            18%,
    rgba(251,252,254,.72) 42%,
    rgba(251,252,254,.34) 66%,
    transparent          100%) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIX SECTION TÉMOIGNAGES — Tartan en décor discret (light mode uniquement)
   ══════════════════════════════════════════════════════════════════════════════
   Cible : section #temoignages
   PROBLÈME :
     · Tartan trop fort derrière, rouge agressif écrase les cartes
     · Titre "Ce que disent nos clients" peu lisible
     · Cartes ne ressortent pas
   SOLUTION :
     · Tartan désaturé + assombri + opacité réduite
     · Overlay bordeaux/sombre par-dessus le tartan
     · Cards renforcées (contraste + ombre)
     · Backdrop sombre derrière le titre
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── TARTAN — Désaturé, plus sombre, fond textile noble ─────────────── */
[data-theme="light"] #temoignages .testi-tartan-bg .tartan {
  opacity: .22 !important;
  filter:
    saturate(.42)
    brightness(.70)
    contrast(1.08) !important;
}

/* ─── OVERLAY — Voile bordeaux/sombre subtil au-dessus du tartan ────── */
[data-theme="light"] #temoignages .testi-tartan-overlay {
  background:
    linear-gradient(180deg,
      var(--bg) 0%,
      rgba(251,252,254,.82) 8%,
      rgba(251,252,254,.36) 20%,
      transparent 30%,
      transparent 70%,
      rgba(251,252,254,.36) 80%,
      rgba(251,252,254,.82) 92%,
      var(--bg) 100%),
    radial-gradient(ellipse 100% 70% at 50% 50%,
      rgba(40,18,12,.16),
      transparent 70%) !important;
  z-index: 1 !important;
}

/* ─── GLOW SECTION — Champagne discret, pas de rouge agressif ─────── */
[data-theme="light"] #temoignages .testi-tartan-glow {
  background:
    radial-gradient(ellipse 50% 40% at 30% 30%, rgba(198,168,91,.10), transparent 64%),
    radial-gradient(ellipse 50% 40% at 70% 70%, rgba(120,8,18,.06), transparent 60%) !important;
  mix-blend-mode: multiply !important;
  opacity: 1 !important;
}

/* ─── HEADING ZONE — Backdrop subtil pour ressortir le titre ─────── */
[data-theme="light"] #temoignages .w {
  position: relative !important;
  z-index: 2 !important;
}
[data-theme="light"] #temoignages .eye {
  color: #8A6F2A !important;
  text-shadow: 0 1px 0 rgba(255,253,247,.84) !important;
}
[data-theme="light"] #temoignages h2,
[data-theme="light"] #temoignages .h2 {
  color: #0C0E16 !important;
  text-shadow:
    0 1px 0 rgba(255,253,247,.62),
    0 2px 8px rgba(251,252,254,.56) !important;
  position: relative !important;
  z-index: 3 !important;
}

/* ─── CARTES TÉMOIGNAGES — Renforcement contraste + ombre warm ───── */
[data-theme="light"] #temoignages .testi-card {
  background:
    linear-gradient(145deg, #FFFFFF 0%, #F3F6FB 60%, #FBFCFE 100%) !important;
  border: 1px solid #E2E8F1 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 0 28px rgba(198,168,91,.06),
    0 1px 3px rgba(120,8,18,.12),
    0 12px 36px rgba(80,40,20,.18),
    0 4px 14px rgba(120,8,18,.10) !important;
  position: relative !important;
  z-index: 2 !important;
}
[data-theme="light"] #temoignages .testi-card:hover {
  border-color: #C6A85B !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 0 32px rgba(198,168,91,.10),
    0 2px 6px rgba(120,8,18,.16),
    0 18px 48px rgba(80,40,20,.24) !important;
  transform: translateY(-2px);
}

/* ─── TEXTE CARTES — Lisibilité maximale ────────────────────────── */
[data-theme="light"] #temoignages .testi-q  { color: #0C0E16 !important; }
[data-theme="light"] #temoignages .testi-nm { color: #0C0E16 !important; }
[data-theme="light"] #temoignages .testi-rl { color: #3B414F !important; }
[data-theme="light"] #temoignages .testi-sr { color: #8A6F2A !important; }
[data-theme="light"] #temoignages .testi-av {
  background: linear-gradient(145deg, #C8102E, #9A0D24) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(200,16,46,.30) !important;
}

/* ─── FLÈCHES NAV — Élégantes sur tartan apaisé ──────────────────── */
[data-theme="light"] #temoignages .ts-arrow {
  background: #FFFFFF !important;
  border: 1px solid #C9D2E0 !important;
  color: #3B414F !important;
  box-shadow: 0 2px 10px rgba(120,8,18,.16) !important;
}
[data-theme="light"] #temoignages .ts-arrow:hover {
  background: #C8102E !important;
  border-color: #C8102E !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(200,16,46,.40) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIX TÉMOIGNAGES v2 — TARTAN ASSUMÉ, contenu adapté
   ══════════════════════════════════════════════════════════════════════════════
   Annule v21 (tartan désaturé + voile blanc).
   Restaure tartan Stewart vif et vivant. Le contenu s'adapte AU tartan.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── TARTAN — VIF, RICHE, ASSUMÉ ─────────────────────────────────────── */
[data-theme="light"] #temoignages .testi-tartan-bg .tartan {
  opacity: .92 !important;
  filter:
    saturate(1.05)
    brightness(.98)
    contrast(1.08) !important;
}

/* ─── OVERLAY — Fade SECTION uniquement (haut/bas), pas de voile centre ─ */
[data-theme="light"] #temoignages .testi-tartan-overlay {
  background:
    linear-gradient(180deg,
      var(--bg) 0%,
      rgba(251,252,254,.74) 6%,
      rgba(251,252,254,.18) 14%,
      transparent 22%,
      transparent 78%,
      rgba(251,252,254,.18) 86%,
      rgba(251,252,254,.74) 94%,
      var(--bg) 100%) !important;
  z-index: 1 !important;
}

/* ─── GLOW SECTION — Or chaud seul, pas de bordeaux qui mate ────────── */
[data-theme="light"] #temoignages .testi-tartan-glow {
  background:
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(198,168,91,.10), transparent 64%) !important;
  mix-blend-mode: overlay !important;
  opacity: 1 !important;
}

/* ─── HEADING — Ivoire SOLIDE en sous-bloc pour lisibilité ─────────── */
[data-theme="light"] #temoignages .w {
  position: relative !important;
  z-index: 2 !important;
}
[data-theme="light"] #temoignages .eye {
  color: #FFFFFF !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.45),
    0 2px 10px rgba(0,0,0,.36) !important;
  -webkit-text-stroke: 0.4px rgba(198,168,91,.65) !important;
}
[data-theme="light"] #temoignages h2,
[data-theme="light"] #temoignages .h2 {
  color: #FFFFFF !important;
  text-shadow:
    0 1px 0   rgba(0,0,0,.55),
    0 2px 4px rgba(0,0,0,.40),
    0 4px 18px rgba(0,0,0,.30) !important;
  -webkit-text-stroke: 0.5px rgba(198,168,91,.55) !important;
  position: relative !important;
  z-index: 3 !important;
}

/* ─── CARTES TÉMOIGNAGES — Ivoire SOLIDE, ombre épaisse, bord or fin ──── */
[data-theme="light"] #temoignages .testi-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(198,168,91,.46) !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 0 0 1px rgba(255,253,247,.65),
    0 2px 6px  rgba(60,12,18,.22),
    0 14px 36px rgba(40,8,12,.28),
    0 4px 14px rgba(120,8,18,.18) !important;
  position: relative !important;
  z-index: 2 !important;
}
[data-theme="light"] #temoignages .testi-card:hover {
  border-color: #C6A85B !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 0 0 1px rgba(198,168,91,.36),
    0 2px 6px  rgba(60,12,18,.26),
    0 18px 48px rgba(40,8,12,.34),
    0 6px 18px rgba(200,16,46,.18) !important;
  transform: translateY(-3px);
}

/* ─── TEXTE CARTES — Noir riche, ultra-lisible ──────────────────────── */
[data-theme="light"] #temoignages .testi-q  { color: #0C0E16 !important; font-weight: 400 !important; }
[data-theme="light"] #temoignages .testi-nm { color: #0C0E16 !important; font-weight: 600 !important; }
[data-theme="light"] #temoignages .testi-rl { color: #3B414F !important; }
[data-theme="light"] #temoignages .testi-sr { color: #8A6F2A !important; }
[data-theme="light"] #temoignages .testi-av {
  background: linear-gradient(145deg, #C8102E, #9A0D24) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(200,16,46,.36) !important;
}

/* ─── FLÈCHES NAV — Or champagne sur tartan vif ───────────────────── */
[data-theme="light"] #temoignages .ts-arrow {
  background: #FFFFFF !important;
  border: 1px solid rgba(198,168,91,.62) !important;
  color: #3B414F !important;
  box-shadow: 0 2px 10px rgba(40,8,12,.24) !important;
}
[data-theme="light"] #temoignages .ts-arrow:hover {
  background: #C8102E !important;
  border-color: #C6A85B !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(200,16,46,.46), 0 0 0 1px rgba(198,168,91,.42) !important;
}

/* ─── TS-FADE (côtés viewport) — réduit, ivoire chaud léger ──────── */
[data-theme="light"] #temoignages .ts-fade {
  background: linear-gradient(90deg, rgba(251,252,254,.62), transparent) !important;
}
[data-theme="light"] #temoignages .ts-fade-r {
  background: linear-gradient(270deg, rgba(251,252,254,.62), transparent) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PHILOSOPHIE GLOBALE LIGHT MODE v23 — Royal Stewart assumé partout
   ══════════════════════════════════════════════════════════════════════════════
   Principe : le tartan est l'identité. Le contenu s'adapte au tartan.
   Aucun layout modifié. Aucune règle dark mode touchée.

   Actions :
     · Tartan global : saturate(1.0) brightness(.96) — vivacité maximale en clair
     · Suppression voiles blancs : body::after, fades sections, tb-veil
     · Cartes : ivoire solide + bordure champagne fine + ombre warm bordeaux
     · Titres sur tartan : ivoire + stroke or + ombre sombre nette
     · Typographie luxe écossais
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── § 1. TARTAN GLOBAL — Vif, riche, assumé partout ─────────────────── */
[data-theme="light"] .tartan {
  filter:  saturate(1.02) brightness(.96) contrast(1.08) !important;
  opacity: 1 !important;
}
[data-theme="light"] .tartan-light {
  opacity:        .70 !important;
  mix-blend-mode: multiply !important;
  filter:         saturate(.98) brightness(.94) contrast(1.08) !important;
}

/* ─── § 2. SUPPRESSION VOILES BLANCS — Body & overlays globaux ─────── */
[data-theme="light"] body::after {
  background: none !important;
  opacity: 0 !important;
}
[data-theme="light"] body::before {
  opacity: .16 !important;
  mix-blend-mode: multiply !important;
}

/* Hero::before fog réduit au strict transition gauche */
[data-theme="light"] #hero::before {
  background: linear-gradient(90deg,
    rgba(251,252,254,.16) 0%,
    transparent 26%) !important;
}
[data-theme="light"] #hero::after {
  background: linear-gradient(0deg,
    rgba(251,252,254,.32) 0%,
    rgba(251,252,254,.08) 14%,
    transparent 26%) !important;
}

/* Trust bar veil — léger, intégration douce */
[data-theme="light"] .tb-veil {
  background: linear-gradient(90deg,
    rgba(243,246,251,.62),
    rgba(243,246,251,.42) 50%,
    rgba(243,246,251,.62)) !important;
}

/* Sit-bg-fade — minimal, ne mate plus le tartan situations */
[data-theme="light"] .sit-bg-fade {
  background: linear-gradient(180deg,
    rgba(251,252,254,.62) 0%,
    transparent 18%,
    transparent 82%,
    rgba(251,252,254,.62) 100%) !important;
}
[data-theme="light"] .sit-bg .tartan-light {
  opacity: .28 !important;
  filter:  saturate(.86) brightness(.94) contrast(1.06) !important;
}

/* ─── § 3. CARTES GLOBALES — Ivoire solide + bord champagne + ombre warm ─ */
[data-theme="light"] .card,
[data-theme="light"] .svc-card,
[data-theme="light"] .trust-card,
[data-theme="light"] .secteur-card,
[data-theme="light"] .te-card-large,
[data-theme="light"] .te-card-sm,
[data-theme="light"] .te-card-row,
[data-theme="light"] .sw-card,
[data-theme="light"] .team-card,
[data-theme="light"] .cblk,
[data-theme="light"] .ct-card,
[data-theme="light"] .ct-form,
[data-theme="light"] .legal-info-card,
[data-theme="light"] .ck-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .testi-card,
[data-theme="light"] .ci-card,
[data-theme="light"] .sit-path {
  background: #FFFFFF !important;
  border:     1px solid rgba(198,168,91,.34) !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 0 0 1px rgba(255,253,247,.48),
    0 1px 3px  rgba(60,12,18,.10),
    0 8px 24px rgba(40,8,12,.14),
    0 2px 8px  rgba(120,8,18,.06) !important;
}

/* ─── § 4. TITRES — Sur sections tartan : ivoire stroke or, sinon noir ─ */
[data-theme="light"] #temoignages h2,
[data-theme="light"] #temoignages .h2,
[data-theme="light"] #hero .hero-h {
  /* Conservé du fix v22 témoignages — pas de double override */
}

/* Autres titres (sections sans tartan dominant) — noir riche éditorial */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 {
  color: #0C0E16 !important;
  font-weight: 400;
}

/* ─── § 5. SECTIONS HALOS — Champagne/or chaud (jamais blancs purs) ─── */
[data-theme="light"] #services {
  background:
    radial-gradient(ellipse 60% 45% at 12% 22%, rgba(200,16,46,.055), transparent 64%),
    radial-gradient(ellipse 42% 32% at 88% 78%, rgba(198,168,91,.062), transparent 58%),
    #FBFCFE !important;
}
[data-theme="light"] #logiciels {
  background:
    radial-gradient(ellipse 60% 45% at 88% 22%, rgba(28,44,91,.052), transparent 64%),
    radial-gradient(ellipse 42% 32% at 12% 78%, rgba(198,168,91,.046), transparent 58%),
    #FBFCFE !important;
}
[data-theme="light"] #situations {
  background:
    radial-gradient(ellipse 60% 45% at 18% 26%, rgba(11,93,75,.055), transparent 64%),
    radial-gradient(ellipse 42% 32% at 84% 74%, rgba(198,168,91,.044), transparent 58%),
    #FBFCFE !important;
}
[data-theme="light"] #equipe {
  background:
    radial-gradient(ellipse 55% 40% at 50% 28%, rgba(28,44,91,.052), transparent 64%),
    radial-gradient(ellipse 40% 30% at 12% 80%, rgba(198,168,91,.040), transparent 58%),
    #FBFCFE !important;
}
[data-theme="light"] #secteurs {
  background:
    radial-gradient(ellipse 60% 45% at 84% 26%, rgba(28,44,91,.054), transparent 64%),
    radial-gradient(ellipse 42% 32% at 12% 76%, rgba(198,168,91,.042), transparent 58%),
    #FBFCFE !important;
}
[data-theme="light"] #contact {
  background:
    radial-gradient(ellipse 60% 45% at 22% 30%, rgba(200,16,46,.048), transparent 64%),
    radial-gradient(ellipse 42% 32% at 78% 72%, rgba(198,168,91,.046), transparent 58%),
    #FBFCFE !important;
}
[data-theme="light"] #faq {
  background:
    radial-gradient(ellipse 50% 38% at 50% 22%, rgba(200,16,46,.048), transparent 64%),
    radial-gradient(ellipse 40% 30% at 8% 78%, rgba(198,168,91,.040), transparent 58%),
    #FBFCFE !important;
}

/* ─── § 6. NAV/PILL/TICKER/TRUST — Solides ivoire, pas de glass blanc ─ */
[data-theme="light"] #nav,
[data-theme="light"] #nav.scrolled {
  background: #F3F6FB !important;
  border-bottom: 1px solid rgba(198,168,91,.32) !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 1px 0 rgba(198,168,91,.18),
    0 4px 22px rgba(40,8,12,.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] #trust-bar,
[data-theme="light"] .ticker-wrap,
[data-theme="light"] #pill {
  background: #F3F6FB !important;
  border-color: rgba(198,168,91,.32) !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 2px 12px rgba(40,8,12,.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ─── § 7. FOOTER — Tartan visible si présent, sinon ivoire warm ─── */
[data-theme="light"] footer {
  background:
    radial-gradient(ellipse 55% 42% at 50% 0%, rgba(200,16,46,.045), transparent 60%),
    radial-gradient(ellipse 42% 32% at 95% 100%, rgba(28,44,91,.038), transparent 58%),
    radial-gradient(ellipse 38% 28% at 5% 100%, rgba(11,93,75,.034), transparent 58%),
    linear-gradient(180deg, #FBFCFE 0%, #EBEFF6 100%) !important;
  border-top: 1px solid #C6A85B !important;
}

/* ─── § 8. BOUTONS — Rouge Stewart royal partout ──────────────────── */
[data-theme="light"] .btn-r,
[data-theme="light"] .ci-btn,
[data-theme="light"] .fbtn {
  background: #C8102E !important;
  color:      #FFFFFF !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 2px 10px rgba(200,16,46,.32),
    0 1px 3px  rgba(200,16,46,.20) !important;
}
[data-theme="light"] .btn-r:hover,
[data-theme="light"] .ci-btn:hover,
[data-theme="light"] .fbtn:hover {
  background: #9A0D24 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 6px 24px rgba(200,16,46,.42),
    0 0 24px   rgba(200,16,46,.24),
    inset 0 0 0 1px rgba(198,168,91,.36) !important;
}

/* ─── § 9. ANIMATIONS — Préservées (jamais override animation property) ─ */
/* Le tartan, les cards, le logo gardent leurs keyframes du dark mode. */

/* ─── § 10. TYPOGRAPHIE — Accents éditoriaux luxe ─────────────────── */
[data-theme="light"] .eye {
  color: #8A6F2A !important;
  letter-spacing: .14em !important;
}
[data-theme="light"] .disp em {
  color: #C8102E !important;
  font-style: italic;
}
[data-theme="light"] *::-webkit-scrollbar-track {
  background: #FBFCFE !important;
}
[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #C6A85B 0%, #C8102E 55%, #9A0D24 100%) !important;
  border-color: #FBFCFE !important;
}

/* ─── § 11. FAQ — Cartes ivoire + accent rouge à l'ouverture ────── */
[data-theme="light"] .faq-item:hover {
  border-color: rgba(200,16,46,.36) !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 2px 6px rgba(200,16,46,.08),
    0 12px 32px rgba(40,8,12,.18) !important;
}
[data-theme="light"] .faq-item.open {
  border-color: #DC3349 !important;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 2px 6px rgba(200,16,46,.12),
    0 16px 40px rgba(200,16,46,.18) !important;
}
[data-theme="light"] .faq-icon {
  background: #F3F6FB !important;
  border: 1px solid rgba(198,168,91,.42) !important;
  color: #3B414F !important;
}
[data-theme="light"] .faq-q:hover .faq-icon,
[data-theme="light"] .faq-item.open .faq-icon {
  background: #C8102E !important;
  border-color: #C8102E !important;
  color: #FFFFFF !important;
}

/* ─── § 12. FORMS — Ivoire + bord champagne + focus rouge ────────── */
[data-theme="light"] .ct-field,
[data-theme="light"] .ct-input,
[data-theme="light"] .ct-textarea,
[data-theme="light"] .ct-select {
  background: #F3F6FB !important;
  border: 1px solid rgba(198,168,91,.42) !important;
  color: #0C0E16 !important;
}
[data-theme="light"] .ct-field:focus,
[data-theme="light"] .ct-input:focus,
[data-theme="light"] .ct-textarea:focus {
  border-color: #C8102E !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(200,16,46,.14) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIX HERO CREDS — Stats sous le hero (light mode uniquement)
   ══════════════════════════════════════════════════════════════════════════════
   PROBLÈME identifié :
     · .hc-val ligne 3132 utilise background-clip:text + fill transparent
       → chiffres en outline-only délavé sur fond clair
     · .hc-lbl utilise var(--tx3) = gris très clair → invisible
   SOLUTION :
     · Chiffres : rouge Stewart SOLIDE + stroke or champagne fin
     · Labels : noir encre ultra-contrasté
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── CHIFFRES — Rouge Stewart profond, plein, premium ─────────────── */
[data-theme="light"] .hc-val {
  /* Force REMPLISSAGE solide (annule background-clip:text + fill transparent) */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #9E0B0F !important;
  color: #9E0B0F !important;

  /* Stroke or champagne fin pour joaillerie */
  -webkit-text-stroke: 0.6px rgba(198,168,91,.62) !important;

  /* Micro-relief net (pas de glow) */
  text-shadow:
    0 1px 0 rgba(255,253,247,.42),
    0 1px 1.5px rgba(80,8,12,.32) !important;

  font-weight: 500 !important;
  filter: none !important;
}

/* ─── LABELS — Noir encre ultra-contrasté ───────────────────────────── */
[data-theme="light"] .hc-lbl {
  color: #0C0E16 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
  text-shadow: 0 1px 0 rgba(255,253,247,.62) !important;
  opacity: 1 !important;
}

/* ─── HC-ITEM séparateurs — Champagne or fin ─────────────────────── */
[data-theme="light"] .hc-item {
  border-right: 1px solid rgba(198,168,91,.36) !important;
}
[data-theme="light"] .hc-item:last-child {
  border-right: none !important;
}

/* Alias variantes — cred-val / cred-label peuvent aussi exister */
[data-theme="light"] .cred-val {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #9E0B0F !important;
  color: #9E0B0F !important;
  -webkit-text-stroke: 0.6px rgba(198,168,91,.62) !important;
  text-shadow:
    0 1px 0 rgba(255,253,247,.42),
    0 1px 1.5px rgba(80,8,12,.32) !important;
  font-weight: 500 !important;
}
[data-theme="light"] .cred-label {
  color: #0C0E16 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
  text-shadow: 0 1px 0 rgba(255,253,247,.62) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ROYAL PREMIUM — FINALE LIGHT MODE (priorité cascade maximale)
   ──────────────────────────────────────────────────────────────────────────────
   Identité : blanc royal lumineux · tartan Royal Stewart comme signature.
   RÈGLE ABSOLUE : en light mode le tartan n'est JAMAIS désaturé, blanchi,
   voilé ni délavé. saturation ≥ 1, luminosité pleine, contraste relevé.
   Ce bloc est le dernier du fichier → il gagne sur toutes les règles tartan
   dispersées plus haut (hero, chatbot, situations, témoignages, pill, ci…).
   L'opacité reste contextuelle : forte pour les moments tartan (hero, bannières),
   plus discrète derrière du texte — mais TOUJOURS en couleurs pleines.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Tartan générique : vif, lumineux, royal ─────────────────────────────── */
[data-theme="light"] .tartan {
  filter: saturate(1.14) brightness(1.0) contrast(1.07) !important;
  opacity: 1 !important;
}
[data-theme="light"] .tartan-light {
  filter: saturate(1.10) brightness(1.0) contrast(1.05) !important;
}

/* ── HERO — le grand moment tartan : couleurs pleines, présence maximale ── */
[data-theme="light"] .hero-tartan-inner .tartan {
  filter: saturate(1.16) brightness(1.02) contrast(1.07) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
@media (max-width: 900px) {
  [data-theme="light"] .hero-tartan-inner .tartan {
    filter: saturate(1.14) brightness(1.0) contrast(1.06) !important;
    opacity: .94 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHATBOT HEADER — LIGHT MODE FINAL
   Identité Optinove : rouge #B81525, or #C49A24, marine #0E1E46.
   Fond paper warm blanc. Tartan discret (10%). Avatar rouge avec logo blanc.
   Filet or en bas. Texte foncé lisible.
   ══════════════════════════════════════════════════════════════════════════ */

/* Tartan : présent mais discret — 10%, couleurs naturelles légèrement atténuées */
[data-theme="light"] .cb-head-tartan .tartan {
  filter:  saturate(.65) brightness(1.08) contrast(.95) !important;
  opacity: .10 !important;
}

/* Overlay : fond blanc chaud semi-transparent sur le tartan */
[data-theme="light"] .cb-head-overlay {
  background:
    radial-gradient(ellipse 80% 100% at 100% 0%, rgba(14,30,70,.06), transparent 60%),
    rgba(250,248,244,.92) !important;
}

/* Filet séparateur : veine or discrète — comme un filet de reliure */
[data-theme="light"] .cb-head::after {
  background: linear-gradient(90deg,
    transparent            0%,
    rgba(196,154,36,.30)  20%,
    rgba(196,154,36,.52)  50%,
    rgba(196,154,36,.30)  80%,
    transparent           100%
  ) !important;
}

/* Avatar : rouge Optinove + logo blanc — identité forte, contraste maximal */
[data-theme="light"] .cb-av {
  background:  #B81525 !important;
  border:      1.5px solid rgba(196,154,36,.50) !important;
  box-shadow:
    0 0 0 2px rgba(184,21,37,.12),
    0 2px 8px rgba(20,10,5,.14),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* Logo : blanc (contraste parfait sur rouge) — identique au dark mode */
[data-theme="light"] .cb-av-logo {
  filter: brightness(0) invert(1) !important;
}

/* Pastille "en ligne" */
[data-theme="light"] .cb-online-dot {
  background:   #168f4e !important;
  border-color: rgba(196,154,36,.55) !important;
}

/* Titre */
[data-theme="light"] .cb-info h4 {
  color: #141210 !important;
}

/* Sous-titre */
[data-theme="light"] .cb-info p {
  color: rgba(30,20,14,.55) !important;
}

/* Bouton fermer */
[data-theme="light"] .cb-close-btn {
  background:  rgba(20,10,5,.08) !important;
  color:       rgba(20,10,5,.60) !important;
  border:      none !important;
}
[data-theme="light"] .cb-close-btn:hover {
  background:  rgba(20,10,5,.15) !important;
}

/* ── Témoignages — voile tartan en couleurs pleines, opacité maîtrisée ──── */
[data-theme="light"] .testi-tartan-bg .tartan {
  filter: saturate(1.10) brightness(1.0) contrast(1.05) !important;
  opacity: .34 !important;
}

/* ── Situations — fond tartan discret mais NON délavé (couleurs vraies) ─── */
[data-theme="light"] .sit-bg .tartan-light {
  filter: saturate(1.06) brightness(1.0) contrast(1.04) !important;
  opacity: .26 !important;
}

/* ── Pill flottant — léger derrière texte, mais saturation pleine ────────── */
[data-theme="light"] .pill-tartan .tartan-light {
  filter: saturate(1.04) brightness(1.0) contrast(1.03) !important;
  opacity: .16 !important;
}

/* ── Cartes / bannières CI — tartan d'accent vif ─────────────────────────── */
[data-theme="light"] .ci-tartan-bg .tartan,
[data-theme="light"] .ci-tartan-bg .tartan-light {
  filter: saturate(1.10) brightness(1.0) contrast(1.05) !important;
}

/* ── Trust-bar tartan ────────────────────────────────────────────────────── */
[data-theme="light"] .tb-tartan .tartan,
[data-theme="light"] .tb-tartan {
  filter: saturate(1.10) brightness(1.0) contrast(1.05) !important;
}

/* ── Aucun pseudo-voile blanc résiduel sur le tartan ────────────────────── */
[data-theme="light"] .hero-tartan-panel::before,
[data-theme="light"] .hero-tartan-inner::before {
  background: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Section #situations (« Votre situation ») : le tartan accompagne
   les cartes puis s'estompe avant la barre de confiance.
   ──────────────────────────────────────────────────────────────────────────────
   Les cartes finissent à ~90% de la section ; le tartan (.tartan-light dans
   .sit-bg) remplissait jusqu'en bas + débordait → bande colorée vide sous les
   cartes. Masque vertical : plein derrière les cartes, fondu, disparition avant
   #trust-bar. Light mode uniquement (dark inchangé). Cartes/espacements intacts.
   ══════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] #situations .sit-bg {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,0) 97%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,0) 97%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

/* ── Barre « Relation directe… » (#trust-bar) : tartan vif → fondu haut/bas ──
   Le tartan plein faisait un bloc coloré franc. On fait APPARAÎTRE le tartan en
   fondu en haut et DISPARAÎTRE en fondu en bas (plein derrière le contenu au
   centre) → plus de bloc tranché, enchaînement doux avec les sections voisines.
   Le contenu (3 piliers) n'est pas masqué (il est hors de .tb-bg). Light only. */
[data-theme="light"] #trust-bar .tb-bg {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 26%, #000 74%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 26%, #000 74%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOGO FLOTTANT HERO (.hero-logo-deco) — Cohérence finale LIGHT = DARK
   ──────────────────────────────────────────────────────────────────────────────
   Le dark mode masque le logo sur mobile (règle de base : @media max-width:900px
   → display:none). D'anciens correctifs light le forçaient visible sur mobile.
   On rétablit la MÊME philosophie : pas de logo décoratif sur petit écran.
   Dernier bloc du fichier → priorité de cascade maximale.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  [data-theme="light"] .hero-logo-deco { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HEADER LIGHT MODE — Suppression bandes tartan + séparations dorées collector
   ──────────────────────────────────────────────────────────────────────────────
   Cause : #nav.scrolled::before (ligne 3033) génère des bandes 192px rouge+sombre
   +or sans override light mode → sur fond #F3F6FB, 7 bandes visibles par écran
   donnant l'effet "tissu découpé en lanières".
   Fix 1 : écraser ce ::before en light mode → background:none.
   Fix 2 : remplacer par de fins filets or verticaux entre liens (::after sur
   .nav-a), gradient fondu haut/bas = référence reliure / dorure de couverture.
   DARK MODE : strictement intact (règles non scopées inchangées).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Supprimer les bandes tartan du ::before header ─────────────────── */
[data-theme="light"] #nav::before,
[data-theme="light"] #nav.scrolled::before {
  background: none    !important;
  opacity:    0       !important;
}

/* ─── 2. Filets or verticaux entre liens de nav — filigrane de reliure ───── */
/* Position : dans le gap:2px existant entre items. Gradient fondu top/bottom
   pour éviter l'effet bord franc — imite un filet de gravure ou de dorure. */
[data-theme="light"] .nav-links .nav-a:not(:last-child) {
  position: relative !important;
}
[data-theme="light"] .nav-links .nav-a:not(:last-child)::after {
  content:        '';
  position:       absolute;
  right:          -2px;      /* centré dans le gap de 2px */
  top:            20%;
  height:         60%;       /* court = discret, proportion de reliure */
  width:          1px;
  background:     linear-gradient(
                    to bottom,
                    transparent                0%,
                    rgba(196,154,36,.28)       20%,
                    rgba(196,154,36,.34)       50%,
                    rgba(196,154,36,.28)       80%,
                    transparent               100%
                  );
  border-radius:  1px;
  pointer-events: none;
  z-index:        1;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTEURS LIGHT MODE — Palette tartan individuelle par secteur
   Palette Royal Stewart : Or #B78A2F · Rouge #C62828 · Marine #243B6B ·
                           Vert sapin #1F5B47 · Bordeaux #7D1919
   !important requis : le CSS accumulé contient des règles contradictoires dont
   certaines avec !important que la spécificité seule ne peut pas battre.
   DARK MODE : sélecteurs [data-theme="light"] → dark mode intact.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Cabinets d'avocats — Or ─────────────────────────────────────────── */
[data-theme="light"] .secteur-grid .secteur-card:nth-child(1) .sec-ico {
  color:        rgba(183,138,47,.88) !important;
  background:   rgba(183,138,47,.08) !important;
  border-color: rgba(183,138,47,.24) !important;
  box-shadow:   0 1px 3px rgba(60,35,12,.08) !important;
}
[data-theme="light"] .secteur-grid .secteur-card:nth-child(1):hover .sec-ico {
  background:   rgba(160,118,28,.90) !important;
  color:        #fff !important;
  border-color: rgba(160,118,28,.50) !important;
  box-shadow:   0 2px 10px rgba(183,138,47,.22) !important;
}

/* ─── 2. Professions médicales — Rouge Optinove ───────────────────────────── */
[data-theme="light"] .secteur-grid .secteur-card:nth-child(2) .sec-ico {
  color:        rgba(198,40,40,.88) !important;
  background:   rgba(198,40,40,.08) !important;
  border-color: rgba(198,40,40,.24) !important;
  box-shadow:   0 1px 3px rgba(60,10,10,.08) !important;
}
[data-theme="light"] .secteur-grid .secteur-card:nth-child(2):hover .sec-ico {
  background:   rgba(180,28,28,.90) !important;
  color:        #fff !important;
  border-color: rgba(180,28,28,.50) !important;
  box-shadow:   0 2px 10px rgba(198,40,40,.22) !important;
}

/* ─── 3. Études notariales — Bleu marine ──────────────────────────────────── */
[data-theme="light"] .secteur-grid .secteur-card:nth-child(3) .sec-ico {
  color:        rgba(36,59,107,.85) !important;
  background:   rgba(36,59,107,.08) !important;
  border-color: rgba(36,59,107,.22) !important;
  box-shadow:   0 1px 3px rgba(10,18,50,.08) !important;
}
[data-theme="light"] .secteur-grid .secteur-card:nth-child(3):hover .sec-ico {
  background:   rgba(24,42,88,.90) !important;
  color:        #fff !important;
  border-color: rgba(24,42,88,.50) !important;
  box-shadow:   0 2px 10px rgba(36,59,107,.18) !important;
}

/* ─── 4. Artisans & entreprises terrain — Vert sapin ─────────────────────── */
[data-theme="light"] .secteur-grid .secteur-card:nth-child(4) .sec-ico {
  color:        rgba(31,91,71,.85) !important;
  background:   rgba(31,91,71,.08) !important;
  border-color: rgba(31,91,71,.22) !important;
  box-shadow:   0 1px 3px rgba(8,28,18,.08) !important;
}
[data-theme="light"] .secteur-grid .secteur-card:nth-child(4):hover .sec-ico {
  background:   rgba(22,72,54,.90) !important;
  color:        #fff !important;
  border-color: rgba(22,72,54,.50) !important;
  box-shadow:   0 2px 10px rgba(31,91,71,.18) !important;
}

/* ─── 5. Mairies & collectivités — Or ────────────────────────────────────── */
[data-theme="light"] .secteur-grid .secteur-card:nth-child(5) .sec-ico {
  color:        rgba(183,138,47,.88) !important;
  background:   rgba(183,138,47,.08) !important;
  border-color: rgba(183,138,47,.24) !important;
  box-shadow:   0 1px 3px rgba(60,35,12,.08) !important;
}
[data-theme="light"] .secteur-grid .secteur-card:nth-child(5):hover .sec-ico {
  background:   rgba(160,118,28,.90) !important;
  color:        #fff !important;
  border-color: rgba(160,118,28,.50) !important;
  box-shadow:   0 2px 10px rgba(183,138,47,.22) !important;
}

/* ─── 6. Professions libérales — Bordeaux (rouge foncé) ──────────────────── */
[data-theme="light"] .secteur-grid .secteur-card:nth-child(6) .sec-ico {
  color:        rgba(125,25,25,.88) !important;
  background:   rgba(125,25,25,.08) !important;
  border-color: rgba(125,25,25,.22) !important;
  box-shadow:   0 1px 3px rgba(40,8,8,.08) !important;
}
[data-theme="light"] .secteur-grid .secteur-card:nth-child(6):hover .sec-ico {
  background:   rgba(100,15,15,.90) !important;
  color:        #fff !important;
  border-color: rgba(100,15,15,.50) !important;
  box-shadow:   0 2px 10px rgba(125,25,25,.18) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTEURS LIGHT MODE — Hover card : contour + ombre par couleur d'accent
   ──────────────────────────────────────────────────────────────────────────────
   Source du bleu : ligne 12467
   [data-theme="light"] .secteur-card:hover { border-color:#2A3D72 !important }
   → navy appliqué à TOUTES les cartes. Spécificité (0,3,0) + !important.
   Fix : règles nth-child(N) → spécificité (0,5,0) + !important → gagne.
   Chaque carte reprend sa couleur d'accent sur border + box-shadow + bg gradient.
   ══════════════════════════════════════════════════════════════════════════════ */

/* 1. Avocats — Or */
[data-theme="light"] .secteur-grid .secteur-card:nth-child(1):hover {
  border-color: rgba(183,138,47,.55) !important;
  box-shadow:   inset 0 1px 0 #fff, 0 18px 44px rgba(183,138,47,.14) !important;
  background:   radial-gradient(ellipse 60% 50% at 96% 96%, rgba(183,138,47,.09), transparent 62%), #fff !important;
}

/* 2. Médical — Rouge */
[data-theme="light"] .secteur-grid .secteur-card:nth-child(2):hover {
  border-color: rgba(198,40,40,.50) !important;
  box-shadow:   inset 0 1px 0 #fff, 0 18px 44px rgba(198,40,40,.13) !important;
  background:   radial-gradient(ellipse 60% 50% at 96% 96%, rgba(198,40,40,.08), transparent 62%), #fff !important;
}

/* 3. Notaires — Bleu marine */
[data-theme="light"] .secteur-grid .secteur-card:nth-child(3):hover {
  border-color: rgba(36,59,107,.50) !important;
  box-shadow:   inset 0 1px 0 #fff, 0 18px 44px rgba(36,59,107,.13) !important;
  background:   radial-gradient(ellipse 60% 50% at 96% 96%, rgba(36,59,107,.08), transparent 62%), #fff !important;
}

/* 4. Artisans — Vert sapin */
[data-theme="light"] .secteur-grid .secteur-card:nth-child(4):hover {
  border-color: rgba(31,91,71,.50) !important;
  box-shadow:   inset 0 1px 0 #fff, 0 18px 44px rgba(31,91,71,.13) !important;
  background:   radial-gradient(ellipse 60% 50% at 96% 96%, rgba(31,91,71,.08), transparent 62%), #fff !important;
}

/* 5. Mairies — Or */
[data-theme="light"] .secteur-grid .secteur-card:nth-child(5):hover {
  border-color: rgba(183,138,47,.55) !important;
  box-shadow:   inset 0 1px 0 #fff, 0 18px 44px rgba(183,138,47,.14) !important;
  background:   radial-gradient(ellipse 60% 50% at 96% 96%, rgba(183,138,47,.09), transparent 62%), #fff !important;
}

/* 6. Professions libérales — Bordeaux */
[data-theme="light"] .secteur-grid .secteur-card:nth-child(6):hover {
  border-color: rgba(125,25,25,.50) !important;
  box-shadow:   inset 0 1px 0 #fff, 0 18px 44px rgba(125,25,25,.13) !important;
  background:   radial-gradient(ellipse 60% 50% at 96% 96%, rgba(125,25,25,.08), transparent 62%), #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   #SITUATIONS — Rendu premium light mode
   ──────────────────────────────────────────────────────────────────────────
   Problèmes identifiés :
   · Tartan saturate(1.06) brightness(1.0) → motif vivant agressif
   · .sit-path background:#FFFFFF → cartes blanches opaques sur tartan brut
   · .sit-bg-fade sans vignette latérale → centre sans profondeur
   Solution :
   · Tartan désaturé + atténué → texture noble, pas motif dominant
   · Vignette radiale sur le fade → profondeur, intégration
   · .sit-path semi-transparent → tartan respire sous le contenu
   · Section : tint champagne chaud subtil
   Dark mode : non touché (sélecteurs #situations scoped à light).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tartan : texture désaturée, couleurs atténuées, présence discrète ── */
[data-theme="light"] .sit-bg .tartan-light {
  opacity: .15 !important;
  filter:  saturate(.48) brightness(.88) contrast(1.02) !important;
}

/* ── 2. Fade : vignette radiale + fondu vertical ─────────────────────────── */
/* Le radial estompe les bords du tartan → il semble émerger du fond plutôt
   que d'y être plaqué. Le linear gère haut/bas. Résultat : profondeur. */
[data-theme="light"] .sit-bg-fade {
  background:
    radial-gradient(ellipse 95% 85% at 50% 50%,
      transparent              18%,
      rgba(251,252,254,.52)   58%,
      rgba(251,252,254,.84)   88%,
      rgba(251,252,254,.96)  100%),
    linear-gradient(180deg,
      rgba(251,252,254,.82)   0%,
      transparent             16%,
      transparent             84%,
      rgba(251,252,254,.82)  100%)
  !important;
}

/* ── 3. Section : fond champagne chaud subtil (remplace le blanc froid) ──── */
[data-theme="light"] #situations {
  background:
    radial-gradient(ellipse 70% 50% at 18% 28%, rgba(11,93,75,.040), transparent 62%),
    radial-gradient(ellipse 50% 40% at 84% 72%, rgba(196,154,36,.038), transparent 58%),
    #F9F8F5 !important;
}

/* ── 4. Cartes : semi-transparentes → le tartan transparaît légèrement ───── */
/* background blanc à .88 : les cartes sont nettes mais pas "posées dessus".
   Ombre réduite : on perd la profondeur de carte pour gagner l'intégration. */
[data-theme="light"] #situations .sit-path {
  background:  rgba(250,250,252,.88) !important;
  border:      1px solid rgba(196,154,36,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 1px 3px  rgba(30,10,5,.06),
    0 6px 20px rgba(30,10,5,.08) !important;
}
[data-theme="light"] #situations .sit-path:hover {
  background:  rgba(255,255,255,.96) !important;
  border-color: rgba(184,21,37,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 2px 6px  rgba(30,10,5,.08),
    0 10px 30px rgba(30,10,5,.12) !important;
  transform: translateX(6px);
}


/* ══════════════════════════════════════════════════════════════════════════
   CHATBOT HEADER — DARK MODE · Variante C "Cuir sombre"
   Inspiration : reliure ancienne, cuir noble, chaleur sourde.
   Pas de halo, pas de néon — profondeur et discrétion.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tartan : fondu dans le cuir, couleurs chaudes atténuées ────────────── */
.cb-head-tartan .tartan {
  filter:  saturate(.22) brightness(.34) hue-rotate(8deg) !important;
  opacity: .80 !important;
}

/* ── Overlay : fond cuir sombre + selvedge discrète ────────────────────── */
.cb-head-overlay {
  background:
    /* Selvedge gauche — 3 couleurs tartan, très discrètes */
    linear-gradient(90deg,
      rgba(184,21,37,.18) 0    2px,
      rgba(196,154,36,.12) 2px  3.5px,
      rgba(14,30,70,.14)   3.5px 5px,
      transparent          5px  100%),
    /* Fond cuir sombre — chaud et profond */
    linear-gradient(145deg,
      rgba(10,6,4,.88)  0%,
      rgba(8,5,3,.84)  100%) !important;
}

/* ── Séparateur : filet tranche de livre rouge→or ───────────────────────── */
.cb-head::after {
  background: linear-gradient(90deg,
    rgba(184,21,37,.28)  0%,
    rgba(196,154,36,.34) 35%,
    rgba(196,154,36,.34) 65%,
    rgba(184,21,37,.20)  85%,
    transparent          100%) !important;
}

/* ── Avatar : rouge très profond, aucun halo ───────────────────────────── */
.cb-av {
  background:  rgba(60,6,12,.95) !important;
  border:      1.5px solid rgba(196,154,36,.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 1px 4px rgba(0,0,0,.40) !important;
}

/* ── Logo : blanc inchangé ──────────────────────────────────────────────── */
.cb-av-logo {
  filter: brightness(0) invert(1) !important;
}

/* ── Pastille "en ligne" : vert sobre + border or ───────────────────────── */
.cb-online-dot {
  background:   #1a6e48 !important;
  border-color: rgba(196,154,36,.45) !important;
  box-shadow:   none !important;
}

/* ── Titre + sous-titre ────────────────────────────────────────────────── */
.cb-info h4 { color: rgba(255,248,235,.92) !important; }
.cb-info p  { color: rgba(255,248,235,.42) !important; }

/* ── Bouton fermer : intégré, discret, cohérent ─────────────────────────── */
.cb-close-btn {
  background:  rgba(255,255,255,.06) !important;
  border:      1px solid rgba(196,154,36,.18) !important;
  color:       rgba(255,248,235,.50) !important;
}
.cb-close-btn:hover {
  background:  rgba(255,255,255,.12) !important;
  border-color: rgba(196,154,36,.34) !important;
  color:       rgba(255,248,235,.80) !important;
}