/* =========================================================
   CABINET 47 – CSS GLOBAL (assets/cabinet47.css)
   Objectif: même rendu desktop + correction flou iPhone (mobile only)
   ========================================================= */

:root{
  --bg-main:#030409;
  --accent:#c11119;
  --accent-soft:#f0474d;
  --accent-dark:#7c080f;
  --panel-bg:#070912;
  --panel-bg-soft:#050611;
  --panel-border:rgba(148,163,184,.3);
  --text-main:#f9fafb;
  --text-muted:#e5e7eb;
  --text-soft:#9ca3af;
}

html{ scroll-behavior:smooth; }

body{
  font-family:'Roboto Condensed',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background-color:var(--bg-main);
  color:var(--text-main);
  overflow-x:hidden;
}

/* =========================================================
   DESKTOP BACKGROUND (parallax)
   - Le CSS est dans /assets/ donc l'image se référence sans "assets/"
   ========================================================= */
.page-bg{
  min-height:100vh;
  background-color:#000;
  background-image:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("Chateau-Meudon-1.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* =========================================================
   MOBILE FIX (iPhone/Safari blur) – MOBILE ONLY
   - On désactive le background-image et on utilise une <img> fixed
   - L'image est injectée dans header.php (uniquement front-page)
   ========================================================= */
.mobile-hero-bg{ display:none; }

@media (max-width: 767px){

  /* Retire le background rasterisé par iOS */
  .page-bg{
    background-image:none !important;
    background-attachment:scroll !important;
    background-color:#000;
    position:relative;
  }

  /* Image hero mobile – viewport STABLE (évite le micro-zoom iOS) */
  .mobile-hero-bg{
    display:block;
    position:fixed;
    inset:0;

    width:100vw;
    height:100vh;   /* fallback */
    height:100svh;  /* viewport stable iOS */

    object-fit:cover;
    object-position:center;

    z-index:-2;

    /* IMPORTANT : on supprime les triggers de rescale */
    transform:none !important;
    backface-visibility:visible !important;
    -webkit-backface-visibility:visible !important;
  }

  /* Overlay sombre aligné sur le même viewport stable */
  body.page-bg::before{
    content:"";
    position:fixed;
    inset:0;

    height:100vh;   /* fallback */
    height:100svh;

    background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
    z-index:-1;
    pointer-events:none;
  }
}


/* ===================== HITMAN BAR ===================== */
.hitman-bar{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1200px,100%);
  height:4px;
  background:linear-gradient(to right,transparent,var(--accent),transparent);
  box-shadow:0 0 25px rgba(193,17,25,.9);
  z-index:50;
  pointer-events:none;
}

/* ===================== SCROLL PROGRESS ===================== */
#scroll-progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:linear-gradient(to right,var(--accent-dark),var(--accent-soft));
  box-shadow:0 0 18px rgba(193,17,25,.9);
  z-index:60;
}

/* ===================== PANELS ===================== */
.backdrop-panel{
  background:
    radial-gradient(circle at top left,rgba(193,17,25,.18),transparent 55%),
    var(--panel-bg);
  border:1px solid var(--panel-border);
  box-shadow:
    0 22px 50px rgba(0,0,0,.85),
    0 0 0 1px rgba(15,23,42,.7);
}
.panel-accent{ border-top:2px solid rgba(193,17,25,.85); }
.soft-shadow{ box-shadow:0 22px 50px rgba(0,0,0,.9); }

/* ===================== NAV ===================== */
.nav-link{
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  font-size:.7rem;
  position:relative;
}
.nav-link-active{ color:#fff!important; }
.nav-link-active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-.35rem;
  width:100%;
  height:2px;
  background:linear-gradient(to right,var(--accent),var(--accent-soft));
  border-radius:999px;
  box-shadow:0 0 14px rgba(193,17,25,.9);
}

/* ===================== SECTIONS ===================== */
.section-header{
  border-left:3px solid rgba(193,17,25,.9);
  padding-left:1rem;
}

/* ===================== INTERACTIVE ===================== */
.interactive-card{
  position:relative;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.interactive-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 20px 40px rgba(0,0,0,.8),
    0 0 0 1px rgba(193,17,25,.6);
  border-color:rgba(193,17,25,.6)!important;
}

/* ===================== REVEAL ===================== */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease,transform .8s ease;
}
.reveal-visible{ opacity:1; transform:translateY(0); }

/* ===================== TIMELINE ===================== */
.timeline-step{
  position:relative;
  padding-left:1.6rem;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .6s ease,transform .6s ease;
}
.timeline-step-visible{ opacity:1; transform:none; }

/* ===================== MODALS ===================== */
.modal-overlay{ display:none; }
.modal-overlay.active{ display:flex; }

/* ===================== COPY TOAST ===================== */
#copy-toast{
  background-color:var(--accent);
  box-shadow:0 8px 22px rgba(193,17,25,.8);
}

/* ===================== TAILWIND OVERRIDES ===================== */
.bg-red-600{background-color:var(--accent)!important;}
.hover\:bg-red-700:hover{background-color:var(--accent-dark)!important;}
.text-red-400{color:var(--accent-soft)!important;}
.text-red-500{color:var(--accent)!important;}

.text-gray-300{color:var(--text-muted)!important;}
.text-gray-400{color:var(--text-soft)!important;}

.bg-black\/40{background-color:rgba(3,4,10,.88)!important;}
.bg-black\/60{background-color:rgba(3,5,12,.96)!important;}
.bg-black\/70{background-color:rgba(2,4,10,.98)!important;}
.bg-black\/80{background-color:rgba(1,3,8,.99)!important;}

.rounded-3xl,.rounded-2xl{border-radius:1.25rem;}

/* ===================== GLASS UNIFIÉ – VERSION CLAIRE ===================== */

.glass-pill,
.glass-panel{
  background: rgba(20, 24, 38, 0.40) !important; /* <-- PLUS CLAIR */
  border: 1px solid rgba(255,255,255,0.18) !important;

  backdrop-filter: blur(8px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(135%) !important;

  box-shadow:
    0 14px 32px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset !important;
}

/* reflet doux (verre lisible) */
.glass-pill::before,
.glass-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02) 40%,
    rgba(255,255,255,0.00) 100%
  );
  pointer-events:none;
}


.text-justify {
  text-align: justify;
  hyphens: auto;
}