/*
 * DA « Mobbin » de lburdier.fr : fond blanc, tuiles en aplats gris neutres, aucune bordure ni verre dépoli,
 * accent noir. Le mode clair est le thème par défaut (attribut posé dans <head> avant le premier affichage).
 * Chargée après le CSS principal : elle ne fait que surcharger ses variables et ses effets.
 */

/* ---------- Couleurs : clair (par défaut), gris neutres au lieu des gris chauds ---------- */
html[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f4f4f5;
  --surface-deep: #ececef;
  --surface-2: #ebebee;
  --surface-3: #e4e4e7;
  --hover: #dcdce0;
  --accent: #0b0b0d;
  --on-accent: #ffffff;
  --header-bg: rgba(255,255,255,0.86);
  --header-bg-loose: rgba(255,255,255,0.8);
  --header-bg-tight: rgba(255,255,255,0.92);
  --scroll-track: #f4f4f5;
  --scroll-thumb: #d4d4d8;
  --ink: #0b0b0d;
  --danger: #c0262d;
}

/* ---------- Couleurs : sombre, mêmes principes (noir neutre, tuiles grises) ---------- */
html:not([data-theme="light"]) {
  --bg: #0b0b0d;
  --surface: #161619;
  --surface-deep: #111114;
  --surface-2: #1f1f23;
  --surface-3: #27272b;
  --hover: #2e2e33;
  --scroll-track: #0b0b0d;
  --scroll-thumb: #2e2e33;
}

/* ---------- Cartes : aplats, sans verre dépoli, liseré ni reflet ---------- */
html body [data-glass] {
  background: var(--surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html body a[data-glass]:hover, html body [data-glass-hover]:hover { background: var(--surface-2) !important; box-shadow: none !important; }
html body [data-glass="inner"] { background: var(--bg) !important; }
html body [data-glass="strong"] { background: var(--surface) !important; }
/* Menus déroulants : seule exception, une ombre douce pour les détacher du contenu */
html body [data-glass="menu"] { background: var(--bg) !important; box-shadow: 0 18px 50px rgba(11,11,13,0.14), 0 2px 8px rgba(11,11,13,0.06) !important; }
html:not([data-theme="light"]) body [data-glass="menu"] { background: var(--surface-2) !important; box-shadow: 0 18px 50px rgba(0,0,0,0.5) !important; }

/* ---------- Effets bleus retirés : fumée, halos, dégradés animés ---------- */
[data-mist] { display: none !important; }
[data-case-stage]::before { display: none !important; }
[data-case-shots]::after { display: none !important; }
/* La carte « Professionnel » garde son dégradé bleu animé (gradient.js) ; les autres blocs passent en noir uni. */
html body [data-gradient]:not([data-gradient="plan"]), html body [data-gradient]:not([data-gradient="plan"])[data-gradient-fallback] { background: #0b0b0d !important; }
html:not([data-theme="light"]) body [data-gradient]:not([data-gradient="plan"]) { background: var(--surface-3) !important; }
[data-gradient]:not([data-gradient="plan"]) canvas { display: none !important; }

/* Bandeau de promotion (promo.js) : noir uni au lieu du dégradé bleu */
#lb-promo-bar { background: #0b0b0d !important; }
html:not([data-theme="light"]) #lb-promo-bar { background: var(--surface-2) !important; }

/* Newsletter (newsletter.js) : tuile grise unie, sans halos ni contour animé */
html body .lbnl { background: var(--surface) !important; box-shadow: none !important; }
html body .lbnl-fx, html body .lbnl-edge { display: none !important; }
html[data-theme="light"] body .lbnl-row { background: var(--bg) !important; }

/* Barres de défilement et sélection, assorties */
html[data-theme="light"] ::selection { background: #0b0b0d; color: #ffffff; }

/* Exemple Nathan (« Comment se passe une commande ») : fond gris uni au lieu des halos bleus */
html body [data-case-stage] { background: var(--surface) !important; }

/* Pastille « −40 % » du bandeau de promotion : texte noir au lieu de bleu */
#lb-promo-bar > strong { color: #0b0b0d !important; }

/* « Toutes les créations » (tourbillon de rendus) : bloc incrusté dans la page, aux marges du contenu,
   avec de grands coins arrondis en haut et en bas plutôt qu'une bande noire bord à bord */
section[aria-labelledby="vortex-cta"] {
  margin: 72px 26px 0 !important;
  border-radius: 34px;
  clip-path: inset(0 round 34px);
}
@media (max-width: 760px) {
  section[aria-labelledby="vortex-cta"] { margin: 56px 14px 0 !important; border-radius: 26px; clip-path: inset(0 round 26px); }
}

/* Hero de l'accueil : grands coins arrondis en bas, l'image se détache de la page blanche */
[data-hero-sticky] { border-radius: 0 0 34px 34px; overflow: hidden; clip-path: inset(0 round 0 0 34px 34px); }
@media (max-width: 760px) { [data-hero-sticky] { border-radius: 0 0 26px 26px; clip-path: inset(0 round 0 0 26px 26px); } }

/* « Une sélection de mes meilleurs projets » (index noir) : bloc incrusté aux marges, coins arrondis en haut et en bas */
[data-index-block] { margin: 0 26px; border-radius: 34px; overflow: hidden; clip-path: inset(0 round 34px); }
@media (max-width: 760px) { [data-index-block] { margin: 0 14px; border-radius: 26px; clip-path: inset(0 round 26px); } }

/* En-tête fondu dans le hero de l'accueil : le hero remonte sous l'en-tête ; tant qu'il est dessous
   (classe lb-over-hero posée par la page), en-tête transparent avec un léger voile, textes et boutons en blanc */
[data-hero-pin] { margin-top: calc(-1 * var(--hdr-h, 74px)); }
[data-header] { transition: background 0.35s ease, box-shadow 0.35s ease, -webkit-backdrop-filter 0.35s ease, backdrop-filter 0.35s ease; }
html.lb-over-hero [data-header] {
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 60%, rgba(0,0,0,0) 100%) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
}
html.lb-over-hero [data-header] > a { color: #ffffff !important; }
html.lb-over-hero [data-header] [data-nav-links] > a { color: rgba(255,255,255,0.78) !important; }
html.lb-over-hero [data-header] [data-nav-links] > a:hover { color: #0b0b0d !important; background-image: linear-gradient(#ffffff, #ffffff) !important; }
html.lb-over-hero [data-header] button:not([role="listbox"] *) { background: rgba(255,255,255,0.16) !important; color: #ffffff !important; }
html.lb-over-hero [data-header] button:not([role="listbox"] *):hover { background: rgba(255,255,255,0.28) !important; }

/* Exemple Nathan (« Comment se passe une commande ») : fenêtres en 3D, inclinées à des profondeurs différentes,
   qui pivotent en suivant le curseur (--cx / --cy, de -1 à 1, posés par la page) */
[data-case-stage] { perspective: 1400px; perspective-origin: 50% 40%; }
[data-case-win] { transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1), rotate 0.7s cubic-bezier(0.2,0.8,0.2,1), scale 0.7s cubic-bezier(0.2,0.8,0.2,1) !important; }
[data-case-win="back"] {
  transform: translate3d(calc(var(--cx, 0) * 10px), calc(var(--cy, 0) * 8px), -70px)
             rotateX(calc(12deg + var(--cy, 0) * -7deg)) rotateY(calc(-18deg + var(--cx, 0) * 12deg)) !important;
}
[data-case-win="left"] {
  transform: translate3d(calc(var(--cx, 0) * 14px), calc(var(--cy, 0) * 12px), 10px)
             rotateX(calc(10deg + var(--cy, 0) * -7deg)) rotateY(calc(-14deg + var(--cx, 0) * 12deg)) !important;
}
[data-case-win="front"] {
  transform: translate3d(calc(var(--cx, 0) * -18px), calc(var(--cy, 0) * -14px), 90px)
             rotateX(calc(8deg + var(--cy, 0) * -9deg)) rotateY(calc(-12deg + var(--cx, 0) * 14deg)) !important;
}