/* =========================
   assets/styles.css
   ========================= */

:root{
  --bg: #0b0f16;
  --panel: #0f1522;
  --card: rgba(255,255,255,0.06);
  --card-strong: rgba(255,255,255,0.09);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --muted2: rgba(255,255,255,0.55);
  --line: rgba(255,255,255,0.10);
  --accent: #7aa7ff;

  --radius: 16px;
  --radius-sm: 12px;

  --shadow: 0 10px 30px rgba(0,0,0,0.25);
  --shadow-soft: 0 6px 18px rgba(0,0,0,0.18);

  --wrap: 1080px;
}

html[data-theme="light"]{
  --bg: #f6f7fb;
  --panel: #ffffff;
  --card: rgba(0,0,0,0.04);
  --card-strong: rgba(0,0,0,0.06);
  --text: rgba(10,12,18,0.92);
  --muted: rgba(10,12,18,0.70);
  --muted2: rgba(10,12,18,0.55);
  --line: rgba(10,12,18,0.10);
  --accent: #2b67ff;

  --shadow: 0 14px 34px rgba(0,0,0,0.12);
  --shadow-soft: 0 8px 18px rgba(0,0,0,0.10);
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(122,167,255,0.14), transparent 60%),
              radial-gradient(1200px 600px at 100% 0%, rgba(255,255,255,0.07), transparent 55%),
              var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.35;
}

/* links */
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* =========================
   Topbar
========================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--line);
}

.topbar .brand{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#siteTitle{
  font-weight: 700;
  letter-spacing: 0.2px;
}

.actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#searchInput{
  width: min(320px, 60vw);
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  border: 1px solid var(--line);
  color: var(--text);
  outline: none;
}
#searchInput::placeholder{ color: var(--muted2); }
#searchInput:focus{
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}

/* =========================
   Buttons
========================= */
.btn{
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel) 65%, transparent);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{
  background: color-mix(in oklab, var(--panel) 80%, transparent);
  border-color: color-mix(in oklab, var(--line) 60%, var(--accent) 40%);
}
.btn:active{ transform: translateY(1px); }
.btn.primary{
  background: color-mix(in oklab, var(--accent) 35%, var(--panel));
  border-color: color-mix(in oklab, var(--accent) 55%, var(--line));
}
.btn.primary:hover{
  background: color-mix(in oklab, var(--accent) 42%, var(--panel));
}

/* =========================
   Layout
========================= */
main{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px 16px 24px;
}

.hero{
  padding: 18px 0 12px;
}
.hero h1{
  margin: 0 0 6px;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: 0.2px;
}
.hero p{
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
}

/* =========================
   Grid of cards
========================= */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
  justify-content: center;
}

@media (max-width: 880px){
  .grid{ grid-template-columns: 1fr; }
}

/* =========================
   Card / Item (MAX 150px)
   - vignette à gauche
   - texte à droite
   - aucun texte sur l'image
========================= */
.item{
  display: grid;
  grid-template-columns: 150px 1fr; /* vignette fixe + contenu */
  gap: 14px;
  align-items: stretch;

  overflow: hidden;
  max-width: 520px;   /* largeur maximale */
  width: 100%;
  margin: 0 auto;     /* centre la carte dans sa colonne */

  padding: 12px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

/* --- Carte 150px : on réserve une zone pour les boutons --- */
.item{
  min-height: 150px;
  overflow: hidden;

  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: auto 1fr auto; /* badge+title / desc / footer */
  gap: 10px 14px;
  align-items: stretch;
}

/* la vignette occupe toute la hauteur utile à gauche */
.item .thumb{
  grid-row: 1 / span 3;
  width: 150px;
  height: 126px; /* reste cohérent avec 150px total */
}

/* zone texte */
.item-body{
  grid-column: 2;
  grid-row: 1 / span 2;
  overflow: hidden;
  min-width: 0;
}


/* TAGS : on limite (sinon ça mange la place des boutons) */
.tags{
  display: none; /* <- option simple : on masque les tags en mode compact */
}

/* footer visible et collé en bas */
.item-footer{
  grid-column: 2;
  grid-row: 3;
  display: flex !important;
  gap: 8px;
  align-items: center;
  margin-top: 0;
}


/* vignette */
.item .thumb{
  width: 150px;
  height: 126px;          /* laisse de la place aux paddings */
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in oklab, var(--panel) 75%, transparent);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.item .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* badge = dans le texte, pas sur l'image */
.item .badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 6px;
}

/* contenu */
.item-body{
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.item-title{
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.item-desc{
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;

  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.tags{
  margin-top: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  overflow: hidden;
}
.tag{
  font-size: 11px;
  color: var(--muted);
  background: color-mix(in oklab, var(--panel) 75%, transparent);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 999px;
}

/* footer boutons dans la carte */
.item-footer{
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

/* Mobile: image au-dessus, texte en dessous */
@media (max-width: 600px){
  .item{
    grid-template-columns: 1fr;
    max-height: none;
  }
  .item .thumb{
    width: 100%;
    height: 170px;
  }
}

/* =========================
   Footer
========================= */
footer{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px 16px 30px;
  color: var(--muted2);
  border-top: 1px solid var(--line);
}

/* =========================
   Modal (viewer)
========================= */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 100;
  background: rgba(0,0,0,0.55);
  padding: 18px;
}
.modal[open]{ display: grid; place-items: center; }

.modal-panel{
  width: min(980px, 100%);
  max-height: min(86vh, 900px);
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel) 86%, transparent);
  box-shadow: var(--shadow);
}

.modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 14px;
  border-bottom: 1px solid var(--line);

  background: color-mix(in oklab, var(--panel) 92%, transparent);
  position: sticky;
  top: 0;
  z-index: 5;
}

.modal-body{
  padding: 12px 14px 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.note{
  color: var(--muted2);
  font-size: 12px;
}

.viewer{
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: color-mix(in oklab, var(--panel) 75%, transparent);
}
#viewerFrame{
  width: 100%;
  height: 62vh;
  border: 0;
  display: block;
  background: transparent;
}
#viewerAudio{
  padding: 10px;
}

/* =========================
   Admin panel (mobile friendly)
========================= */
.admin-panel{
  display: none;
  max-width: 600px;
  position: fixed;
  inset: 18px;
  z-index: 200;
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-panel[open]{ display: block; }

.admin-panel .card{
  height: 100%;
  display: flex;
  flex-direction: column;
  background: color-mix(in oklab, var(--panel) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* on mobile: full screen */
@media (max-width: 640px){
  .admin-panel{ inset: 0; border-radius: 0; }
  .admin-panel .card{ border-radius: 0; }
}

/* Tabs */
.tabs{
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel) 92%, transparent);
}
.tab{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.tab:hover{
  border-color: color-mix(in oklab, var(--line) 55%, var(--accent) 45%);
}
.tab[aria-selected="true"]{
  background: color-mix(in oklab, var(--accent) 20%, var(--panel));
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
}

.tabpanel{ display: none; }
.tabpanel[open]{ display: block; }

/* Admin body scroll */
.admin-panel .modal-body{
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Forms */
.form{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
label{
  font-size: 12px;
  color: var(--muted2);
}
input, textarea, select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel) 75%, transparent);
  color: var(--text);
  outline: none;
}
textarea{ min-height: 90px; resize: vertical; }
input:focus, textarea:focus, select:focus{
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}

.row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Admin items list */
.admin-list{
  display: grid;
  gap: 10px;
  margin: 10px 0 16px;
}
.admin-list button{
  width: 100%;
  text-align: left;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel) 75%, transparent);
  color: var(--text);
  cursor: pointer;
}
.admin-list button[aria-current="true"]{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent);
}

hr{
  border: 0;
  border-top: 1px solid var(--line);
  margin: 14px 0;
}

/* Accessibility */
:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--accent) 70%, white 0%);
  outline-offset: 2px;
}

/* =========================
   FONDS ÉDITORIAUX
   Mode sombre = salle de rédaction
   Mode clair  = papier journal
   ========================= */

:root{
  --bg: #0b0f16;
  --panel: rgba(15, 21, 34, 0.88);
  --card: rgba(255,255,255,0.06);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.68);
  --line: rgba(255,255,255,0.10);
}

html[data-theme="light"]{
  --bg: #f4efe6;
  --panel: rgba(255, 250, 242, 0.92);
  --card: rgba(255,255,255,0.72);
  --text: rgba(22,18,14,0.92);
  --muted: rgba(22,18,14,0.68);
  --line: rgba(22,18,14,0.10);
}

/* Fond global */
body{
  position: relative;
  background-color: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* Couche principale */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* Couche texture / ambiance */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
}

/* =========================
   MODE SOMBRE : salle de rédaction
   ========================= */
html[data-theme="dark"] body::before,
html:not([data-theme="light"]) body::before{
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(59, 83, 122, 0.18), transparent 60%),
    radial-gradient(900px 600px at 100% 20%, rgba(255,255,255,0.04), transparent 65%),
    linear-gradient(180deg, #0b0f16 0%, #0d1118 42%, #090c12 100%);
}

html[data-theme="dark"] body::after,
html:not([data-theme="light"]) body::after{
  background:
    /* colonnes très subtiles */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.018) 0px,
      rgba(255,255,255,0.018) 1px,
      transparent 1px,
      transparent 120px
    ),
    /* lignes rédaction / papier */
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 34px
    ),
    /* vignettage */
    radial-gradient(circle at center, transparent 48%, rgba(0,0,0,0.34) 100%);
  mix-blend-mode: soft-light;
  opacity: 0.75;
  filter: blur(0.2px);
}

/* =========================
   MODE CLAIR : papier journal
   ========================= */
html[data-theme="light"] body::before{
  background:
    radial-gradient(1000px 600px at 15% -10%, rgba(120, 98, 67, 0.08), transparent 58%),
    radial-gradient(1200px 700px at 100% 10%, rgba(0,0,0,0.03), transparent 64%),
    linear-gradient(180deg, #f7f1e6 0%, #f2ebdf 44%, #ece3d5 100%);
}

html[data-theme="light"] body::after{
  background:
    /* texture papier */
    repeating-linear-gradient(
      0deg,
      rgba(80,60,35,0.018) 0px,
      rgba(80,60,35,0.018) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(80,60,35,0.012) 0px,
      rgba(80,60,35,0.012) 1px,
      transparent 1px,
      transparent 4px
    ),
    /* colonnes de journal très légères */
    repeating-linear-gradient(
      90deg,
      rgba(40,30,20,0.02) 0px,
      rgba(40,30,20,0.02) 1px,
      transparent 1px,
      transparent 110px
    );
  opacity: 0.35;
  mix-blend-mode: multiply;
  filter: blur(0.15px);
}

/* =========================
   PANNEAUX / CARTES pour bien se détacher du fond
   ========================= */
.topbar,
.modal-panel,
.admin-panel .card,
.item,
.card,
.viewer{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.item,
.card,
.modal-panel,
.admin-panel .card{
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}

html[data-theme="light"] .item,
html[data-theme="light"] .card,
html[data-theme="light"] .modal-panel,
html[data-theme="light"] .admin-panel .card{
  box-shadow: 0 10px 24px rgba(70,50,20,0.08);
}

/* =========================
   MOTS JOURNALISTIQUES FANTÔMES
========================= */

body::marker{ content:""; } /* sécurité navigateur */

/* couche supplémentaire */
body::after{
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* -------- MODE SOMBRE -------- */
html[data-theme="dark"] body::after,
html:not([data-theme="light"]) body::after{

  background:
  radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.35) 100%),

  /* texte fantôme */
  repeating-linear-gradient(
    -12deg,
    transparent 0px,
    transparent 140px,
    rgba(255,255,255,0.03) 140px,
    rgba(255,255,255,0.03) 141px
  );

  opacity: .65;
}

/* -------- MODE CLAIR -------- */
html[data-theme="light"] body::after{

  background:
  radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.08) 100%),

  repeating-linear-gradient(
    -12deg,
    transparent 0px,
    transparent 150px,
    rgba(0,0,0,0.025) 150px,
    rgba(0,0,0,0.025) 151px
  );

  opacity: .45;
}

/* vrai texte fantôme */
/* =========================
   TEXTE FANTÔME MULTILIGNES
========================= */

/* =========================
   TEXTE JOURNALISTIQUE IRRÉGULIER
========================= */

body::before{
  content:
  "REPORTAGE   INTERVIEW   ENQUÊTE   TERRAIN   ANALYSE   \A"
  "DOCUMENTAIRE   PRESSE   ARCHIVES   REPORTAGE   \A"
  "ENQUÊTE   TERRAIN   ANALYSE   INTERVIEW   PRESSE   \A"
  "REPORTAGE   DOCUMENTAIRE   TERRAIN   ARCHIVES   \A"
  "REPORTAGE   INTERVIEW   ENQUÊTE   TERRAIN   ANALYSE   \A"
  "DOCUMENTAIRE   PRESSE   ARCHIVES   REPORTAGE   \A"
  "REPORTAGE   INTERVIEW   ENQUÊTE   TERRAIN   ANALYSE   \A"
  "DOCUMENTAIRE   PRESSE   ARCHIVES   REPORTAGE   \A"
  "ENQUÊTE   TERRAIN   ANALYSE   INTERVIEW   PRESSE   \A"
  "REPORTAGE   DOCUMENTAIRE   TERRAIN   ARCHIVES   \A"
  "REPORTAGE   INTERVIEW   ENQUÊTE   TERRAIN   ANALYSE   \A"
  "DOCUMENTAIRE   PRESSE   ARCHIVES   REPORTAGE   \A"
  "REPORTAGE   INTERVIEW   ENQUÊTE   TERRAIN   ANALYSE   \A"
  "DOCUMENTAIRE   PRESSE   ARCHIVES   REPORTAGE   \A"
  "ENQUÊTE   TERRAIN   ANALYSE   INTERVIEW   PRESSE   \A"
  "REPORTAGE   DOCUMENTAIRE   TERRAIN   ARCHIVES   \A"
  "REPORTAGE   INTERVIEW   ENQUÊTE   TERRAIN   ANALYSE   \A"
  "DOCUMENTAIRE   PRESSE   ARCHIVES   REPORTAGE   \A"
  "REPORTAGE   INTERVIEW   ENQUÊTE   TERRAIN   ANALYSE   \A"
  "DOCUMENTAIRE   PRESSE   ARCHIVES   REPORTAGE   \A"
  "ENQUÊTE   TERRAIN   ANALYSE   INTERVIEW   PRESSE   \A"
  "REPORTAGE   DOCUMENTAIRE   TERRAIN   ARCHIVES   \A"
  "REPORTAGE   INTERVIEW   ENQUÊTE   TERRAIN   ANALYSE   \A"
  "DOCUMENTAIRE   PRESSE   ARCHIVES   REPORTAGE   \A"
  "ENQUÊTE   TERRAIN   ANALYSE   INTERVIEW   PRESSE   \A";
  position: fixed;
  inset: 0;
  pointer-events: none;

  white-space: pre;
  line-height: 1.3;

  font-size: clamp(70px, 9vw, 150px);
  font-weight: 700;

  letter-spacing: 8px;
  text-align: left;

  opacity: .03;

  transform: rotate(-12deg) translateX(-5%);
}

/* variations par ligne */

body::before{
  background:
    linear-gradient(transparent 0%, transparent 25%, rgba(0,0,0,0) 25%);
}


/* ajustements clair / sombre */
html[data-theme="light"] body::before{
  opacity: .04;
}

html[data-theme="dark"] body::before{
  opacity: .025;
}