/* =====================
   TYPOGRAPHIES
   ===================== */
:root {
  --font-title: "Cinzel Decorative", "Almendra SC", serif;   /* Titres et en-têtes */
  --font-ui:    "Almendra SC", serif;                        /* Badges, kicker */
  --font-body:  "EB Garamond", Georgia, serif;               /* Texte courant */
  --font-note:  "IM Fell English SC", "Almendra SC", serif;  /* Nomenclature verte */
}

/* ==================== BASE ==================== */
body {
  margin: 0;
  padding: 0;
  background: #0a0a0a;
  color: #eaeaea;
  font-family: var(--font-body);
  font-size: 0.85rem;        /* plus petit par défaut */
  line-height: 1.45;
}

h2{
  text-align:right;
  font: 400 1rem var(--font-title);
  margin:20px 30px 10px;
  color:#cfcce7;
}

h1, h3, h4 {
  font-family: var(--font-title);
  color: #cfcce7;
  margin: 0;
}

/* Sous-titres type kicker */
.kicker {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}

/* Corps de texte (dans colonnes, modales, flux) */
.dlg-col p,
.dlg-col li,
.dlg-col small {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0 0 .6rem;
}

/* ==================== NOMENCLATURE VERTE (préservée) ==================== */
.nomenclature {
  font-family: var(--font-note);
  font-size: 0.7rem;
  line-height: 1.3;
  color: #9aff67; /* vert acide */
  opacity: 0.85;
  display: block;
  margin-bottom: 0.25rem;
}

/* ==================== FLUX TEXTE (journal) ==================== */
.text-flow {
  column-count: 5;
  column-gap: 20px;
  padding: 30px;
}

.text-flow p {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0 0 1rem;
}

/* Images dans le flux multicolonnes */
.codex-columns img,
.text-flow img {
  display: block;
  max-width: 100%;
  width: 100%;      /* force la largeur de la colonne */
  height: auto;     /* garde les proportions */
  border-radius: 4px;   /* optionnel, petit arrondi */
  margin: 0.5rem 0;
}

/* Responsive : colonnes qui se réduisent */
@media (max-width: 1100px) { .text-flow { column-count: 3; } }
@media (max-width: 820px)  { .text-flow { column-count: 2; } }
@media (max-width: 520px)  { .text-flow { column-count: 1; } }

/* Métadonnées du Codex (dates, références) */
.codex-meta{
  display:block;
  font-size:.68rem;
  line-height:1.2;
  margin:0 0 .25rem;
  color:#a8ff60;             /* vert acide */
  font-family:monospace;     /* contraste avec le texte classique */
  opacity:.85;
  letter-spacing:.02em;
}

/* ====== Grille de tiroirs ====== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  padding:20px 30px 60px;
  max-width:1200px;margin:auto;
}
.drawer{
  display:block;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.15));
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px; overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .3s ease;
}
.drawer:hover{ transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.6),0 0 20px rgba(184,163,255,.12)}
.drawer .thumb{width:100%;height:120px;background:#111 center/cover no-repeat}
.drawer .body{padding:12px 14px}
.drawer .kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin-bottom:2px}
.drawer .title{font-size:.9rem;line-height:1.3;font-weight:600;margin:0 0 4px}
.drawer .meta{font-size:.75rem;opacity:.65;line-height:1.2em}
.drawer .badge{
  display:inline-block;margin-top:6px;padding:2px 8px;font-size:.7rem;border-radius:6px;
  background:rgba(184,163,255,.15);color:#b8a3ff;border:1px solid rgba(184,163,255,.3);font-weight:600;text-transform:uppercase;
}

/* ====== Modale ====== */
.dialog{ position:fixed; inset:0; display:none; }
.dialog:target{ display:block; }
.dialog__back{
  position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(3px);
  display:block; text-decoration:none;
}
.dialog__panel{
  position:relative; z-index:1; max-width:1100px; margin:8vh auto;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.08); border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(184,163,255,.08) inset;
  padding:14px 16px 16px;
  max-height:86vh; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.dialog__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 6px 10px; border-bottom:1px solid rgba(255,255,255,.06);
}
.dialog__title{ margin:0; font-size:1rem; color:#cfcce7; font-weight:600 }
.dialog__close{
  text-decoration:none; font-size:.8rem; padding:4px 10px; border-radius:6px;
  border:1px solid rgba(184,163,255,.35); color:#b8a3ff; background:rgba(184,163,255,.10);
}
.dialog__close:hover{ filter:brightness(1.06) }

/* Colonnes responsive (modales) */
.dlg-columns{
  display:grid; gap:12px; padding:12px 4px 2px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width:1100px){ .dlg-columns{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:820px){ .dlg-columns{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:520px){ .dlg-columns{ grid-template-columns: 1fr; } }

.dlg-col{
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px; padding:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.01),rgba(0,0,0,.18));
}
.dlg-col h4{ margin:.2rem 0 .4rem; font-size:.85rem; color:#cfcce7 }
.dlg-col p, .dlg-col li, .dlg-col small{ font-size:.8rem; color:#eaeaea; line-height:1.45 }
.dlg-col ul{ margin:.2rem 0 .6rem; padding-left:16px }
.dlg-col img{ display:block; width:100%; height:auto; border-radius:6px; margin:.25rem 0 .4rem }

/* Formulaire mot de passe */
.password-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:.25rem 0 .4rem }
.password-form input{
  flex:1 1 220px; padding:6px 10px; border-radius:6px;
  border:1px solid rgba(184,163,255,.35); background:#111; color:#eaeaea;
  font-family: var(--font-ui);
  font-size:.85rem;
}
.password-form button{
  padding:6px 12px; border-radius:6px; border:1px solid rgba(184,163,255,.35);
  background:rgba(184,163,255,.15); color:#b8a3ff; font-family: var(--font-ui); cursor:pointer; font-size:.85rem;
}
.password-form button:hover{ filter:brightness(1.08) }
.pw-hint{ font-size:.75rem; color:#b8a3ff; opacity:.8; margin-top:2px }
.pw-error{ font-size:.75rem; color:#ff7b9e; margin-top:4px; display:none }

/* États d’accès */
.gate-locked{ display:block }
.gate-open{ display:none }
.gate-open.is-open{ display:block }
.gate-locked.is-hidden{ display:none }

/* Scroll body bloqué quand modale ouverte */
body.modal-open{ overflow:hidden; touch-action:none; }

/* ============= CODEX (journal aligné à la grille) ============= */
:root{
  --grid-max: 1200px;
  --gap: 20px;
}
@media (min-width: 1280px){
  .grid{
    max-width: var(--grid-max);
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap);
  }
}

.codex{
  max-width: var(--grid-max);
  margin: 30px auto 80px;
  padding: 0 30px;
}
.codex h3{
  margin: 0 0 12px;
  font-size: .95rem;
  color: #cfcce7;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: left;
  opacity: .9;
}
.codex-columns{
  column-count: 5;
  column-gap: var(--gap);
}
.codex-columns p,
.codex-columns li{
  font-size: .82rem;
  line-height: 1.45;
  margin: 0 0 .75rem;
  color: #eaeaea;
  hyphens: auto;
}
.codex-fig{
  margin: 0 0 .9rem;
  break-inside: avoid;
  background: linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.25);
}
.codex-fig img{ display:block; width:100%; height:auto; }
.codex-fig figcaption{
  font-size:.72rem; line-height:1.35; color:#cfcce7;
  padding:.45rem .6rem; border-top:1px solid rgba(255,255,255,.06);
  opacity:.9;
}
.codex-fig.portrait img {
  width: 100%;
  height: auto;
  object-fit: contain;   /* l’image s’ajuste dans la colonne */
  aspect-ratio: auto;    /* pas de ratio forcé */
}
.codex-fig.wide     img{ aspect-ratio:16/9; object-fit:cover; }
.codex-quote{
  break-inside: avoid;
  margin:0 0 .9rem; padding:.75rem .9rem;
  border-left:3px solid #b8a3ff;
  background:rgba(184,163,255,.06);
  font-size:.86rem; color:#eaeaea;
}
.codex-sep{
  height:1px; margin:1rem 0; break-inside:avoid;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
@media (max-width: 1280px){ .codex-columns{ column-count:4; } }
@media (max-width: 1024px){ .codex-columns{ column-count:3; } }
@media (max-width: 820px) { .codex-columns{ column-count:2; } }
@media (max-width: 560px) { .codex-columns{ column-count:1; } }

/* Séparateur image dans le flux codex */
.codex-separator {
  display: block;
  margin: 1.2rem auto;   /* espace autour + centrage */
  max-width: 120px;      /* limite facultative, à adapter */
  height: auto;
}

.drawer .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- FIX tiroirs : image + texte visibles --- */
.drawer{
  display: flex;           /* empile l'image puis le texte */
  flex-direction: column;
}

.drawer .thumb{
  display: block;          /* <picture> devient bloc */
  width: 100%;
  aspect-ratio: 16/9;      /* ou 1/1 si tu préfères carré */
  height: auto;            /* laisse le ratio gérer la hauteur */
  background: #111;        /* fallback si pas d'image */
  overflow: hidden;
}

.drawer .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* remplit la vignette sans déformer */
  object-position: center;
  display: block;
}

.drawer .body{
  padding: 12px 14px;      /* ton style existant, assuré visible */
}

/* --- Drawer en colonne --- */
.drawer{
  display:flex;
  flex-direction:column;
}

/* --- Vignette vidéo/image avec ratio contrôlé --- */
.drawer .thumb{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:16/9;   /* mets 1/1 si tu veux carré */
  overflow:hidden;
  background:#111;
}

/* annule l’ancienne règle si tu avais height fixe */
.drawer .thumb{ height:auto; background-size:cover; }

/* Média plein cadre et cliquable via <a> */
.drawer .thumb video,
.drawer .thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  pointer-events:none;   /* laisse le clic au <a> parent */
}

/* Optionnel : petite touche au hover */
.drawer:hover .thumb .thumb-media{ filter:brightness(1.02); }


body.modal-open {
  overflow: visible;
  touch-action: auto;
}
/* Empêche les scrollbars horizontales indésirables */
html, body {
  overflow-x: hidden;
}

/* Sécurise les images/vidéos dans le flux */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Si certaines modales dépassent légèrement */
.dialog__panel,
.grid,
.dlg-columns {
  box-sizing: border-box;
  max-width: 100vw;
  overflow-x: hidden;
}
/* 1) Tout en border-box pour neutraliser le padding qui ajoute de la largeur */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Les conteneurs ne doivent pas dépasser le viewport réel */
.dialog__panel,
.grid,
.dlg-columns {
  max-width: 100%;   /* au lieu de 100vw */
  width: 100%;
  overflow-x: hidden;
}

/* 3) Bloque le scroll du body quand la modale est ouverte (et pas "visible") */
body.modal-open {
  overflow: hidden;
  touch-action: none;
}

/* 4) Autorise la contraction des enfants (flex / grid) */
.dialog__head > *,
.dlg-columns > .dlg-col,
.grid > .drawer {
  min-width: 0;
}

/* 5) Coupe les contenus trop longs qui forcent la ligne */
h1, h2, h3, h4,
.drawer .title,
.dialog__title,
p, li, a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 6) Sécurité médias (pas plus large que leur parent) */
img, video { max-width: 100%; height: auto; display: block; }

/* 7) Le Codex : reste dans la largeur disponible même avec padding */
.codex { width: min(100%, var(--grid-max)); }
.codex-columns { max-width: 100%; overflow-x: hidden; }

/* 1) Modèle de boîte global : évite que le padding élargisse le bloc */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* 2) Empêche tout débordement horizontal du document */
html, body { overflow-x: hidden; }

/* 3) Les wrappers pleine largeur ne dépassent jamais le viewport */
.grid,
.codex,
.dialog__panel {
  max-width: 100vw;
}

/* 4) Ajuste .codex pour petits écrans (padding fluide + largeur sûre) */
.codex{
  width: 100%;
  max-width: var(--grid-max);
  padding-inline: clamp(12px, 4vw, 30px);
  box-sizing: border-box; /* double sécurité */
}

/* 5) Evite que les enfants de la grid forcent une largeur minimale */
.grid > * { min-width: 0; }

/* 6) Petits écrans : réduit un peu les espacements latéraux de la grid & du titre */
@media (max-width: 420px){
  .grid { padding-left: clamp(12px,4vw,20px); padding-right: clamp(12px,4vw,20px); }
  h2 { margin-left: clamp(12px,4vw,20px); margin-right: clamp(12px,4vw,20px); }
}

.pdf-link {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdf-link a {
  color: #a8ff60; /* ton vert acide */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.pdf-link a:hover {
  color: #b8a3ff; /* violet Manoirs au survol */
}

.icon-pdf {
  width: 16px;
  height: 16px;
  opacity: 0.8;
  flex-shrink: 0;
}