/* ==========================
   Guerre 14–18 – styles spécifiques
   ========================== */

/* Variables (rail + thème) */
.g1418-page{
  --page-max-w: 1400px;
  --page-pad: 16px;
  --grid-gap: 16px;
  --grid-cols: 2;
  --box-radius: 12px;
  --box-border: 1px solid var(--bordure, #e6e6e6);
  --box-bg: #fafafa;

  /* Scrollbar sépia */
  --scroll-track: #f0e9de;
  --scroll-thumb: #b48a54;
  --scroll-thumb-hover: #996633;
  --scroll-thumb-active: #704214;
  --scroll-width: 14px;

  --card-h: clamp(300px, 32vw, 560px); /* hauteur standard cartes */
}

/* ===== Rail & Layout ===== */
.g1418-page{
  max-width: var(--page-max-w);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* header, intro, grille, pager */
  gap: 20px;
  box-sizing: border-box;
}

.g1418-page .g1418-header{ margin-top:.5rem; } /* petit espace sous le menu */
.g1418-page .g1418-header h1{ margin:0; font-size:clamp(1.4rem, 1vw + 1rem, 2rem); }
.g1418-page .g1418-intro{ color:#555; margin:0; font-size:clamp(1rem, .8vw + .7rem, 1.125rem); }

.g1418-page .g1418-grid{
  display:grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
  max-width: 100%;
  box-sizing: border-box;
}

/* ===== Header (titre aligné rail + badge Page x/x) ===== */
.g1418-page .g1418-header{
  grid-column:1 / -1;
  width:100%;
  box-sizing:border-box;
}

.g1418-page .g1418-header .page-title{
  display:block;
  width:100%;
  margin:0;
  text-align:center;
  line-height:1.25;
  background: var(--bleu, #1f4f7a);
  color:#fff;
  border-radius:.5rem;
  padding:.5rem .75rem;
  position:relative;
  box-sizing:border-box;
}

.g1418-page .g1418-header .page-title::after{
  content: attr(data-page);
  position:absolute;
  right:.75rem; top:50%;
  transform: translateY(-50%);
  font-size:.95em; opacity:.85; white-space:nowrap; pointer-events:none;
}

/* ===== Cartes/boîtes ===== */
.g1418-page .g1418-box{
  border: var(--box-border);
  border-radius: var(--box-radius);
  background: var(--box-bg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:260px;
  box-sizing:border-box;
}

.g1418-page .g1418-media{ width:100%; display:block; }
.g1418-page .g1418-body{ padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.g1418-page .g1418-title{ margin:0; font-size:clamp(1.05rem, .6vw + .8rem, 1.25rem); }
.g1418-page .g1418-text{ margin:0; color:#444; line-height:1.45; }

/* Rectangles (photos/documents) */
.g1418-box.rect{
  font-size:1.1em;
  min-height: var(--card-h);
  overflow:hidden;            /* évite tout débordement horizontal */
}

.g1418-box.rect figure{ display:flex; flex-direction:column; margin:0; }

.g1418-box.rect img,
.g1418-box.rect .g1418-media{
  display:block; width:100%; height:auto; max-width:100%; object-fit:contain;
}

.g1418-box.rect figcaption,
.g1418-caption{
  display:block; margin-top:.5em; text-align:center; font-size:.9em; color:#555;
}

/* Carrés (vignettes) */
.g1418-box.square{ aspect-ratio:1/1; }

/* Cadre “fit” pour centrage vertical si utilisé */
.fit-box{
  display:flex; align-items:center; justify-content:center;
  height:100%; margin:0; overflow:hidden; background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.fit-box img.g1418-media{ max-height:100%; width:auto; object-fit:contain; display:block; }

/* ===== Scroll (ascenseurs sépia) ===== */
.scroll-view{
  overflow:scroll;
  scrollbar-gutter: stable both-edges;
  height:100%;
  padding:1rem;
  box-sizing:border-box;

  /* Firefox */
  scrollbar-width:auto;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
/* WebKit */
.scroll-view::-webkit-scrollbar{ width: var(--scroll-width); }
.scroll-view::-webkit-scrollbar-track{ background: var(--scroll-track); }
.scroll-view::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb); border-radius:10px; border:3px solid var(--scroll-track);
}
.scroll-view:hover::-webkit-scrollbar-thumb{ background: var(--scroll-thumb-hover); }
.scroll-view:active::-webkit-scrollbar-thumb{ background: var(--scroll-thumb-active); }

/* ===== Bloc document (image + actions) ===== */
.doc-frame{ margin:0; display:flex; flex-direction:column; height:100%; }
.doc-full{ display:block; width:100%; height:auto; }
.doc-actions{ display:flex; gap:.5rem; justify-content:center; align-items:center; margin:.6rem 0 0; }
.btn{
  display:inline-block; padding:.4rem .7rem; border-radius:8px;
  background:#f0f0f0; border:1px solid rgba(0,0,0,.1);
  text-decoration:none; color:#333; font-size:.95rem;
}
.btn:hover{ background:#e7e7e7; }

/* ===== Note (entête fiche) ===== */
.fiche-note h2{ text-align:center; margin-bottom:.6em; }
.fiche-note .note-items{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;
}
.fiche-note .note-items p{
  margin:0; padding:.6rem .8rem; border:1px solid var(--bordure, #e6e6e6);
  border-radius:.5rem; background:#fff;
}
.fiche-note .note-left{ text-align:left; }
.fiche-note .note-right{ text-align:right; }

/* ===== Pagination (rectangle bleu) ===== */
.g1418-pager{
  width:100%;
  margin:6px auto;
  padding:6px 0;                 /* pas de padding latéral → suit le rail */
  background: var(--bleu, #1f4f7a);
  border-radius:.5rem;
  display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap;
  box-sizing:border-box;
}
.g1418-pager a{
  color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.25);
  padding:.28rem .55rem; line-height:1.15; border-radius:.45rem;
}
.g1418-page .g1418-grid + .g1418-pager{ margin-top:-12px; }
.g1418-page .g1418-pager{ margin-bottom:-10px; }

/* ===== Titres internes ===== */
.g1418-box h2, .g1418-box h3, .g1418-note h2, .g1418-note h3{
  font-family: var(--font-title, 'EB Garamond', serif);
  font-weight:600; line-height:1.3; color:#3a3a3a;
  margin:0 0 .5em 0;
}
.g1418-box h2, .g1418-note h2{ font-size:1.4em; border-bottom:2px solid #888; padding-bottom:.2em; }
.g1418-box h3, .g1418-note h3{ font-size:1.2em; color:#555; }

/* ===== Lightbox minimale (si utilisée) ===== */
.lightbox-overlay{
  position:fixed; inset:0; z-index:9999; background:rgba(10,8,5,.96);
  display:flex; align-items:center; justify-content:center;
}
.lightbox-content{ position:relative; max-width:90vw; max-height:90vh; overflow:hidden; cursor:zoom-in; }
.lightbox-img{
  display:block; max-width:90vw; max-height:90vh;
  background:#fff; border:1px solid rgba(0,0,0,.2); box-shadow:0 10px 40px rgba(0,0,0,.5);
  will-change:transform; transition: transform 120ms ease;
}
.lightbox-close{
  position:absolute; top:10px; right:10px; width:38px; height:38px; border:none; cursor:pointer;
  border-radius:999px; background:#b48a54; color:#fff; font-size:22px; line-height:1;
  display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.lightbox-close:hover{ background:#996633; }
.lightbox-close:active{ background:#704214; }
.lightbox-close:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* ===== Sécurités largeur (empêche tout débordement) ===== */
.g1418-section > .g1418-grid{ padding-inline:0; }          /* pas de double padding */
.g1418-grid, .g1418-box, .g1418-box.rect, .g1418-box .scroll-view{
  min-width:0; box-sizing:border-box;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .g1418-page{ --grid-cols:1; padding: 0 12px; }
  .fiche-note .note-items{ grid-template-columns:1fr; }
  .fiche-note .note-right{ text-align:left; }
}

/* === FIX débordement des 2 images côte à côte (pages Guerre) === */

/* 1) Le rail de la SECTION est exact (même que titre/pager) */
.g1418-page .g1418-section{
  width: min(100%, calc(var(--page-max-w) + 2 * var(--page-pad)));
  margin-inline: auto;
  padding-inline: var(--page-pad);
  box-sizing: border-box;
}

/* 2) La grille n’ajoute AUCUN padding et ses colonnes peuvent se réduire */
.g1418-page .g1418-section > .g1418-grid{
  width: 100%;
  padding-inline: 0;                      /* ← enlève tout re-padding */
  margin: 0;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); /* compressible */
  justify-items: stretch;
  box-sizing: border-box;
}

/* 3) Les items n’imposent jamais une largeur mini qui ferait “pousser” la grille */
.g1418-page .g1418-grid > *{ min-width: 0; }

/* 4) Sécurité côté médias rectangulaires */
.g1418-box.rect{ overflow: hidden; max-width: 100%; box-sizing: border-box; }
.g1418-box.rect img.g1418-media{ display:block; width:100%; height:auto; max-width:100%; object-fit:contain; }

/* 5) (optionnel) Ceinture et bretelles si un pixel traîne encore */
.g1418-page{ overflow-x: hidden; }

/* Aligner pile-poil le titre et la nav au rail du contenu */
.g1418-page .g1418-header,
.g1418-page .g1418-pager {
  padding-inline: 0 !important;
  width: min(100%, calc(var(--page-max-w) + 2 * var(--page-pad))) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

/* Empêche la grille d'étirer les cartes en hauteur (pas de bande) */
.g1418-page .g1418-grid {
  align-items: start;            /* au lieu de stretch */
}

/* Les cadres rect suivent la hauteur réelle de l'image */
.g1418-box.rect {
  min-height: auto;              /* plus de hauteur imposée */
  overflow: hidden;
  box-sizing: border-box;
}
.g1418-box.rect .g1418-media {
  display: block;
  width: 100%;
  height: auto;                  /* respecte le ratio 1400×1050 */
  object-fit: contain;
}