/*
 * ═══════════════════════════════════════════════════════
 *  ARTEFAKT — Light Mode Theme Override
 *  Loaded after app-DZbACm4C.css — last declaration wins.
 * ═══════════════════════════════════════════════════════
 *
 *  Strategy: swap --color-black <-> --color-white at :root level.
 *  Tailwind utility classes (bg-black, text-white…) reference these
 *  variables, so the entire palette inverts with two redeclarations.
 */

/* ══════════════════════════════════════════════════════════
 *  1. CORE PALETTE
 * ══════════════════════════════════════════════════════════ */

:root {
  --color-black: #fff;   /* bg-black → white  */
  --color-white: #000;   /* text-white → black */
  --hover-color: #000;
}

html {
  background-color: #fff;
  color:            #000;
}

/* #app a class="isolate" → isolation:isolate.
 * Sans background, le canvas du groupe composite démarre transparent.
 * mix-blend-mode:difference contre transparent = couleur source inchangée.
 * Fix : initialiser le canvas en blanc. */
#app {
  background-color: #fff !important;
}


/* ══════════════════════════════════════════════════════════
 *  2. HEADER
 * ══════════════════════════════════════════════════════════ */

/* Mobile (< xl) : normal + #000. Desktop (≥ xl) : difference + #fff.
 * opacity:1 override les inline opacity:0 laissés par GSAP/Taxi.js. */
.header {
  background-color: transparent !important;
  background:       transparent !important;
  width:            100%        !important;
  z-index:          101         !important;
  opacity:          1           !important;
  color:            #000        !important;
  mix-blend-mode:   normal      !important;
}

@media (min-width: 1280px) {
  .header {
    mix-blend-mode: difference !important;
    color:          #fff       !important;
  }
}

/* Aucun enfant du header ne doit apporter de fond opaque. */
.header > *,
.header a,
.header div,
.header span,
.header button,
.header-toggler,
.header-menu,
.header-link,
.header-item {
  background-color: transparent !important;
  background:       transparent !important;
}

/* Mobile menu : texte noir sur fond givré */
.header-menu,
.header-menu a {
  color: #000 !important;
}

/* Logo SVG : le markup source a fill="none" sur le <svg>, donc les <path>
 * héritent et restent invisibles. On force le fill via currentColor pour
 * suivre la couleur du header (noir mobile / blanc desktop via difference). */
.header-logo svg,
.header-logo svg path {
  fill: currentColor !important;
}

/* Bouton burger : tint sombre léger */
.header-toggler,
[class*="bg-white\/16"] {
  background-color: rgba(0, 0, 0, 0.10) !important;
}


/* ══════════════════════════════════════════════════════════
 *  3. LOADER / FADE
 * ══════════════════════════════════════════════════════════ */

.loader,
.fade {
  background-color: #fff !important;
}

/* Effet ASCII de transition de page désactivé (visuellement perturbant).
 * Le fondu blanc de .fade reste actif pour la transition Taxi.js. */
.fade-ascii {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════
 *  4. ASCII LOGO (c-logo)
 * ══════════════════════════════════════════════════════════
 *
 *  Renderer THREE.js alpha:true → canvas transparent.
 *  Chars patchés en vec3(0.0) = noir dans le shader.
 *  background:#fff = filet de sécurité pour les gaps/bords. */

c-logo {
  background-color: #fff !important;
  display:          block;
  overflow:         hidden;
}
c-logo canvas {
  background-color: #fff;
  filter:           none  !important;
  display:          block;
}


/* ══════════════════════════════════════════════════════════
 *  5. ÉLÉMENTS DÉCORATIFS
 * ══════════════════════════════════════════════════════════ */

/* Carrés décoratifs : bg-white → #000 via swap, force explicite */
.square {
  background-color: #000 !important;
}

/* Overlay hover des cards works (bg-black → bg-white via swap) */
.works-card-overlay {
  background-color: rgba(0, 0, 0, 0.5) !important;
}


/* ══════════════════════════════════════════════════════════
 *  6. C-WORKS — section scroll home page
 * ══════════════════════════════════════════════════════════
 *
 *  isolation:isolate : protège les blends difference internes
 *  du stacking context créé par body::after { multiply }.
 *
 *  background:#fff : initialise le canvas du groupe composite
 *  en blanc. Sans ça, difference blende contre transparent.
 *    |#fff − #fff canvas| = #000 → texte noir sur fond blanc ✓
 *    |#fff − #000 vidéo | = #fff → texte blanc sur vidéo    ✓  */

c-works {
  isolation:        isolate;
  background-color: #fff;
}

/* Overlay sticky (titre/client/type/date) :
 * difference sur le CONTENEUR uniquement. Les enfants héritent
 * color:#fff sans blend propre — un seul niveau de blend. */
c-works .sticky {
  mix-blend-mode: difference !important;
  color:          #fff       !important;
}
c-works .works-title,
c-works .works-client,
c-works .works-type,
c-works .works-date {
  mix-blend-mode: normal !important;
  color:          #fff   !important;
}

/* Titres des cards (vue grille /works/) :
 * Scoped à .card-work-title pour éviter de toucher
 * tous les c-shuffle de la card. */
c-card-work .card-work-title h2,
c-card-work .card-work-title c-shuffle,
c-card-work .card-work-title c-shuffle > div {
  mix-blend-mode: difference;
  color:          #fff !important;
}


/* ══════════════════════════════════════════════════════════
 *  7. WORKS PAGE — vue liste
 * ══════════════════════════════════════════════════════════
 *
 *  Fond blanc, texte noir.
 *  Hover xl : bg #000 / texte #fff (inversion explicite car
 *  xl:hover:bg-white → #000 via swap = déjà correct, mais
 *  xl:hover:text-black → #fff via swap = aussi correct).
 *  Les overrides ci-dessous sont un filet de sécurité. */

.works-list-bg {
  background-color: #fff !important;
}

.works-list-item,
.works-list-item > div {
  color: #000 !important;
}

@media (min-width: 1280px) {
  .works-list-item:hover,
  .works-list-item:hover > div {
    background-color: #000 !important;
    color:            #fff !important;
  }
}


/* ══════════════════════════════════════════════════════════
 *  8. SINGLE-WORK — pages projets individuelles
 * ══════════════════════════════════════════════════════════
 *
 *  Le div overlay a la classe "mix-blend-difference" HTML.
 *  Le swap :root a cassé la technique :
 *    text-white → color:#000  (difference ne fonctionne plus)
 *    xl:bg-white → #000       (pilule noire sur le titre)
 *
 *  Fix :
 *  – isolation:auto sur .single-work : les blends opèrent
 *    directement contre la vidéo, pas contre un canvas isolé.
 *  – color:#fff restauré sur l'overlay → difference opère :
 *      |#fff − #000 vidéo sombre| = #fff → blanc ✓
 *      |#fff − #fff frame claire| = #000 → noir  ✓
 *  – background:transparent sur .single-work-title :
 *    supprime la pilule noire (xl:bg-white → #000 via swap).
 *  – Dropdown items : pilule noire explicite pour lisibilité
 *    sur tous les fonds. */

.single-work {
  isolation: auto;
}

/* opacity:1 override le inline style opacity:0 mis par GSAP
 * au chargement avant l'animation de reveal. */
.single-work .mix-blend-difference,
.single-work [class*="mix-blend-difference"] {
  color:   #fff !important;
  opacity: 1    !important;
}

.single-work .mix-blend-difference *,
.single-work [class*="mix-blend-difference"] * {
  color: #fff !important;
}

.single-work-title {
  background-color: transparent !important;
  background:       transparent !important;
  color:            #fff        !important;
}

.single-work-dropdown .single-work-project span {
  background-color: #000    !important;
  color:            #fff    !important;
  padding:          1px 4px !important;
}


/* ══════════════════════════════════════════════════════════
 *  9. POLISH UI/UX
 * ══════════════════════════════════════════════════════════ */

/* Back to top / Back to video : bg-grey (#292929) reste sombre,
 * texte hérite #000 via swap → illisible. Force #fff. */
.back-to-top,
.back-to-top c-shuffle-chars {
  color: #fff !important;
}

/* Bouton "Contact us" (mailto backdrop-blur) */
a[href^="mailto:"][class*="backdrop-blur"] {
  color: #fff !important;
}

/* Compteur "04" hardcodé non-CMS — masqué jusqu'à intégration BDD */
.suptitle-middle {
  display: none;
}


/* ══════════════════════════════════════════════════════════
 *  10. TEXTURE CINÉMATOGRAPHIQUE
 *  body::before → dithering Bayer  z-9997
 *  body::after  → grain animé      z-9998
 * ══════════════════════════════════════════════════════════ */

@keyframes grain-shift {
  0%   { background-position:   0px   0px; }
  11%  { background-position:  -6px -12px; }
  22%  { background-position:  12px  -3px; }
  33%  { background-position:  -3px   9px; }
  44%  { background-position:   9px  -9px; }
  55%  { background-position: -12px   6px; }
  66%  { background-position:   3px  12px; }
  77%  { background-position:  -9px  -3px; }
  88%  { background-position:   6px   9px; }
  100% { background-position:   0px   0px; }
}

/* Tramage ordonné : repeating-conic-gradient — aucun PNG.
 * mode normal (pas de blend) → zéro stacking context. */
body::before {
  content:          '';
  position:         fixed;
  inset:            0;
  pointer-events:   none;
  z-index:          9997;
  background-image: repeating-conic-gradient(rgba(0,0,0,0.08) 0% 25%, transparent 0% 50%);
  background-size:  2px 2px;
}

/* Grain cinétique : multiply sur fond blanc → seules les zones
 * sombres du feTurbulence sont visibles.
 * c-works { isolation:isolate } l'empêche de capturer les
 * blends difference internes à c-works. */
body::after {
  content:          '';
  position:         fixed;
  inset:            0;
  pointer-events:   none;
  z-index:          9998;
  opacity:          0.35;
  mix-blend-mode:   multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:  300px 300px;
  background-repeat: repeat;
  animation:        grain-shift 0.5s steps(9, end) infinite;
}