/* public/slug.css */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=VT323');

:root{
  color-scheme: light dark;
  --font-family:'Satoshi',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-bold:700;

  --radius:20px;
  --shadow:0 16px 48px rgba(0,0,0,.25);

  --page-bg:#111;
  --card-bg: rgba(22, 22, 22, 0.40);
  --text:#eee;
  --muted:#bdbdbd;
  --link:#4da3ff;

  --btn-h:46px;
}

body.slug-wrap{
  margin:0; background:var(--page-bg); color:var(--text);
  font:var(--fw-regular) 16px/1.45 var(--font-family);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh;

  --pad: clamp(16px, 4vw, 32px);
  padding: var(--pad);
  padding-left:  calc(env(safe-area-inset-left)  + var(--pad));
  padding-right: calc(env(safe-area-inset-right) + var(--pad));
  padding-bottom:calc(env(safe-area-inset-bottom)+ var(--pad));

  position: relative;
  overflow-x: hidden;
}

*{ box-sizing:border-box; }
a{ color:inherit; text-decoration:none; }
.inline-link{ color:var(--link); text-decoration:underline; font-weight:var(--fw-medium); }
.inline-link:hover{ filter:brightness(1.08); }
:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }

.crt-flow{
  position: relative;
  width:100%;
  display:flex; flex-direction:column; align-items:center;
}

.crt-hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:20px;
  margin-top: clamp(6px, 3vh, 24px);
  margin-bottom: clamp(12px, 3.2vh, 24px);
  font-family:'VT323', var(--font-family);
  color:#FF6053;
  font-size: clamp(18px, 2.2vw, 26px);
  position: relative; z-index:5;
}

#logo-v{ width: clamp(120px, 9.5vw, 150px); height:auto; display:block; }

.crt-hero nav{ margin:0; }
.crt-hero ul{ list-style:none; padding:0; margin:0; }
.crt-hero li{ display:inline-block; }
.crt-hero a{
  position:relative; display:inline-block; line-height:1;
  color:#fff; text-decoration:none;
}
.crt-hero a::before{ content:' [ '; color:#FF6053; }
.crt-hero a::after { content:' ] '; color:#FF6053; }
.crt-hero a:hover{ color:#FF6053; }
.crt-hero a:focus-visible{ outline:2px solid #FF6053; outline-offset:2px; }

.slug-main{
  width: min(92vw, 760px);
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  position: relative; z-index:7;
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  border-color: rgba(255,255,255,0.10);
}

@media (max-height:640px){
  .slug-main{ margin-top:12px; }
}

.slug-title{ margin:0 0 6px; font-weight:var(--fw-bold); font-size:28px; line-height:1.2; }
.slug-meta{ margin:0 0 12px; color:#bbb; font-style:italic; }
.slug-address{ margin:0 0 14px; color:#e9e9e9; }
.muted{ color:var(--muted); }

.pill-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--btn-h); padding:12px 18px;
  border-radius:9999px; font-weight:var(--fw-medium); font-size:.95rem;
  line-height:1; cursor:pointer; text-decoration:none;
  border:1px solid transparent;
  transition:filter .15s ease, transform .02s ease, background-color .15s ease, color .15s ease;
  user-select:none;
}
.pill-btn:active{ transform:translateY(1px); }
.white-btn{ background:#fff; color:#111; border-color:#ddd; }
.white-btn:hover{ filter:brightness(.98); }
.black-btn{ background:#000; color:#fff; border-color:#000; }
.black-btn:hover{ filter:brightness(1.05); }
.slug-wrap .black-btn{ background:#000; color:#fff; border-color:#000; }
.pill-btn.small{ min-height:36px; padding:8px 12px; font-size:.9rem; }
.slug-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }

.slug-list{
  list-style:none; padding:0; margin:16px 0 0;
  display:flex; flex-direction:column; gap:8px;
}
.slug-list-item{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.slug-list-item:last-child{ border-bottom:none; }

.crt-footer{
  margin: clamp(20px, 6vh, 60px) 0 6px;
  font-family:'VT323', var(--font-family);
  font-size: clamp(14px, 1.6vw, 20px);
  color:#FF6053;
  letter-spacing:.02em;
  opacity:.95;
  text-align:center;
  position: relative; z-index:5;
}

/* ===== Map/Media embeds ===== */
.map-embed,
.map-embed iframe{
  width:100%;
  aspect-ratio: 16 / 9;
  border:0;
  border-radius: 12px;
  display:block;
}

@media (max-width:600px){
  html{ font-size:16px; }
  #logo-v{ width:140px; }
  .crt-hero{ gap:18px; margin-bottom:20px; }
  .slug-main{ width:min(96vw, 760px); padding:16px; border-radius:10px; }
  .slug-title{ font-size:22px; }
  .slug-actions .pill-btn{ min-height:40px; padding:10px 14px; font-size:.95rem; }
}

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }
@media print{
  body.slug-wrap{ background:#fff; color:#000; }
  .slug-main{ background:#fff; box-shadow:none; border:1px solid #ddd; }
  .inline-link{ color:#0645ad; text-decoration:underline; }
}

/* ===== CRT layers (global) ===== */
@keyframes crt-scroll { from { top: -8%; } to { top: 100%; } }
@keyframes crt-flicker {
  0% { opacity: .16 } 5% { opacity: .32 } 10% { opacity: .95 } 15% { opacity: .25 }
  20% { opacity: .62 } 25% { opacity: .03 } 30% { opacity: .01 } 35% { opacity: .53 }
  40% { opacity: .13 } 45% { opacity: .52 } 50% { opacity: .38 } 55% { opacity: .22 }
  60% { opacity: .94 } 65% { opacity: .87 } 70% { opacity: .69 } 75% { opacity: .56 }
  80% { opacity: .97 } 85% { opacity: .04 } 90% { opacity: .24 } 95% { opacity: .08 }
  100% { opacity: .55 }
}
@keyframes crt-jitter {
  0% { background-position: 0 0, 0 0, 0 0, 50% 50%; }
  50%{ background-position: 0 .5px, 0 0, 0 0, 50% 50%; }
  100%{ background-position: 0 0, 0 0, 0 0, 50% 50%; }
}

.overlay,
.scanline{
  position:fixed; inset:0; z-index:2; pointer-events:none;
}

.overlay::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.48) 0 1px, rgba(0,0,0,0) 1px 2px),
    repeating-linear-gradient(90deg, rgba(255,0,0,.055) 0 1px, rgba(0,255,0,.055) 1px 2px, rgba(0,0,255,.055) 2px 3px, transparent 3px 6px),
    radial-gradient(circle at 0 0, rgba(255,255,255,.035) 0 1px, transparent 1px) 0 0/2px 2px,
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
  animation: crt-jitter .6s steps(2, end) infinite;
}
.overlay::after{
  content:""; position:absolute; inset:0;
  background: rgba(16,16,16,.20);
  animation: crt-flicker .30s infinite;
}

.scanline{
  height:90px; opacity:.12; top:-8%;
  background: linear-gradient(to bottom, rgba(255,96,83,0) 0%, #FF6053 30%, rgba(255,96,83,0) 100%);
  animation: crt-scroll 8s 3s infinite linear;
}
.scanline::before{
  content:""; position:absolute; inset:-18px 0;
  background: inherit; filter: blur(12px); opacity:.55;
}

/* ===== Responsive mobile (≤600px) ===== */
@media (max-width: 600px){
  :root{ --pad: 16px; --card-radius: 12px; }
  html{ font-size: 15px; }
  body.slug-wrap{
    padding: var(--pad);
    padding-left:  calc(env(safe-area-inset-left)  + var(--pad));
    padding-right: calc(env(safe-area-inset-right) + var(--pad));
    padding-bottom:calc(env(safe-area-inset-bottom)+ var(--pad));
  }
  .crt-flow{ display:flex; flex-direction:column; align-items:center; }
  #logo-v{ width:100px; height:auto; }
  .crt-hero{ gap:10px; margin-top:8px; margin-bottom:12px; text-align:center; font-size:16px; }
  .crt-hero nav a{ font-size: 15px; }
  .slug-main{
    width:100%; max-width:640px; margin:0 auto;
    padding:14px; border-radius: var(--card-radius); box-sizing:border-box;
  }
  .slug-title{ font-size: clamp(18px, 5vw, 22px); line-height: 1.22; margin: 0 0 6px; word-break: break-word; }
  .slug-meta, .slug-address{ font-size: 13.5px; line-height: 1.45; }
  .slug-actions{ display:flex; gap:8px; margin-top:8px; }
  .slug-actions .pill-btn{ flex: 1 1 100%; min-height:42px; padding:10px 12px; font-size:.95rem; }
  .slug-list{ display:grid; grid-template-columns:1fr; gap:7px; margin-top:10px; }
  .slug-list-item{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:7px 0; }
  .crt-footer{ margin:18px 0 6px; font-size:13px; text-align:center; }
  #faq-panel h2{ font-size:16px; }
  #faq-panel summary{ font-size:15px; }
  .scanline{ height:90px; top:-6%; opacity:.10; animation-duration:7s; }
  .scanline::before{ filter: blur(10px); opacity:.5; }
}

/* =========================================================
   EMBED MODE (fiche ouverte dans le drawer via ?embed=1)
   ========================================================= */
html.embed,
body.embed{
  background: transparent !important; /* le drawer a son propre fond */
}

/* on garde l’effet CRT dans l’iframe */
html.embed .overlay,
html.embed .scanline{
  display:block !important;
  z-index:2;                 /* sous le contenu de la fiche */
  opacity:1;
}

/* un peu moins agressif dans le panneau */
html.embed .overlay::after{ background: rgba(16,16,16,.16); }
html.embed .scanline{ opacity:.18; }

/* on masque seulement le chrome plein-écran */
html.embed .crt-hero,
html.embed .crt-footer,
html.embed nav.site{
  display:none !important;
}

/* wrapper plus neutre dans le panneau */
html.embed .crt-flow{
  padding:0 !important;
  margin:0 !important;
  background: transparent !important;
  box-shadow:none !important;
  max-width:none !important;
}

/* body plus compact et transparent */
html.embed body.slug-wrap{
  padding:12px !important;
  padding-left:12px !important;
  padding-right:12px !important;
  padding-bottom:12px !important;
  min-height:auto !important;
  background: transparent !important;
  overflow-x: visible !important;
}

/* carte de contenu compacte */
html.embed .slug-main{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:14px !important;
  border-radius:12px !important;
  /* si tu préfères sans translucide :
   background: transparent !important;
   border: 0 !important;
   box-shadow: none !important;
   backdrop-filter: none !important;
  */
  z-index:3; /* au-dessus des calques CRT */
}

/* boutons plus compacts */
html.embed .slug-actions .pill-btn{
  min-height:40px !important;
  padding:10px 14px !important;
  font-size:.95rem !important;
}

/* médias : bords doux */
html.embed .maplite,
html.embed .map-embed,
html.embed .map-embed iframe{
  border-radius:10px !important;
  border:1px solid #2a2a2a !important;
}

/* listes resserrées */
html.embed .slug-list .slug-list-item{ padding:8px 0 !important; }

/* éviter les débordements horizontaux */
html.embed .slug-wrap,
html.embed .slug-main{
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}