/* ==========
   Base / reset
   ========== */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
body { background:#f5f7fb; color:#1f2937; }

/* ==========
   Variables & Header mince + logo agrandi
   ========== */
:root {
  --logo-size: 140px;   /* ajuste 120–160 selon ton goût */
  --header-thin: 115px;  /* hauteur visuelle de la barre bleue */
}

header {
  background:#0d2b57; color:#fff;
  position: relative;
  min-height: var(--header-thin);
  padding: 8px 0;               /* barre plus fine */
  text-align:center;
}

header .logo {
  width: var(--logo-size);
  height: var(--logo-size);
  object-fit:contain;
  display:block;
  position:absolute;
  left:50%;
  top: calc(50% - var(--logo-size) * 0.55); /* remonte légèrement le logo */
  transform: translateX(-50%);
}

header h1 { margin:0; font-size:20px; font-weight:700; }
header nav { margin-top:6px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
header nav a { color:#e6edf7; text-decoration:none; padding:6px 10px; border-radius:999px; }
header nav a:hover { background:rgba(255,255,255,.12); }

/* ==========
   Layout
   ========== */
.container { width:min(1100px, 92vw); margin:-18px auto 32px; background:#fff; border-radius:14px; box-shadow:0 10px 25px rgba(0,0,0,.06); padding:18px; }

/* Toolbar / titres */
.toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.section-title { margin:0; font-size:22px; font-weight:800; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ==========
   Formulaires / UI
   ========== */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  width:100%; padding:10px 12px; border:1px solid #e0e6ee; border-radius:10px; background:#fff;
  outline:none; transition:border .15s ease, box-shadow .15s ease;
}
textarea { resize:vertical; }
input:focus, textarea:focus, select:focus { border-color:#73b3ff; box-shadow:0 0 0 3px rgba(115,179,255,.25); }

button, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:#1aa36f; color:#fff; border:0; padding:10px 14px; border-radius:999px; cursor:pointer;
  font-weight:700; text-decoration:none; box-shadow:0 2px 6px rgba(26,163,111,.28);
}
button:hover, .btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
button[disabled] { opacity:.6; cursor:not-allowed; }

.badge {
  display:inline-block; padding:6px 10px; border:1px solid #e0e6ee; border-radius:999px; background:#f5fbf7;
  color:#174a2b; font-size:12px; font-weight:700;
}

/* ==========
   Grille d’albums / cartes
   ========== */
.album-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:18px;
}
.card {
  background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.06);
  border:1px solid #eef2f6;
}

/* -- VIGNETTES ENTIERES (portrait/paysage) -- */
.thumb-card { padding:10px; }
.thumb-card .thumb-box{
  width:100%;
  aspect-ratio: 4 / 3;               /* cadre régulier */
  background:#eef2f6;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.thumb-card img.photo-thumb{
  width:100%; height:100%;
  object-fit: contain;                /* pas de recadrage, photo entière */
  display:block;
  cursor:pointer;
}

/* Pour les autres usages d'image dans .card (ex: cartes d'albums) */
.card img { width:100%; height:auto; object-fit:contain; display:block; }

/* ==========
   Pagination
   ========== */
.pagination { display:flex; gap:8px; margin:16px 0 0; flex-wrap:wrap; }
.pagination a {
  display:inline-block; padding:8px 12px; border:1px solid #e0e6ee; border-radius:10px; text-decoration:none; color:#0d2b57;
  background:#fff;
}
.pagination a.active { background:#0d2b57; color:#fff; border-color:#0d2b57; }

/* ==========
   Dropzone upload
   ========== */
.dropzone {
  border:2px dashed #c7d3e6; background:#f7fbff; padding:18px; text-align:center; border-radius:12px;
  color:#214b7a; font-weight:700;
}
.dropzone.dragover { background:#ecf5ff; border-color:#73b3ff; }
.progress { width:100%; height:8px; background:#e9eef6; border-radius:999px; overflow:hidden; margin:10px 0 0; }
#bar { width:0%; height:100%; background:#1aa36f; transition:width .2s linear; }

/* ==========
   Commentaires
   ========== */
.comments .comment { border-top:1px solid #eef2f6; padding:8px 0; }
.comments .comment strong { font-weight:800; }

/* ==========
   EXIF
   ========== */
.exif { margin:10px 0; }
.exif > summary {
  list-style:none; cursor:pointer; display:inline-block;
  padding:8px 12px; border:1px solid #e0e6ee; border-radius:999px; background:#eef9f5; font-weight:700;
}
.exif[open] > summary { background:#dff3ec; border-color:#cde9dc; }
.exif-table { width:100%; border-collapse:collapse; margin-top:8px; font-size:13px; }
.exif-table th, .exif-table td { padding:8px 10px; border-top:1px solid #eef2f6; text-align:left; }
.exif-table th { width:40%; color:#374151; font-weight:700; }

/* ==========
   Lightbox : image gauche / infos droite
   ========== */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:9999;padding:16px}
.lightbox.open{display:flex}

/* Contenu en 2 colonnes */
.lightbox .content.two-cols{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:16px;
  max-width:95vw;
  max-height:92vh;
  align-items:start;
  position:relative;
}

/* Zone image */
.lb-media{display:flex;align-items:center;justify-content:center;max-height:92vh;overflow:hidden}
.lb-media img{max-height:92vh;max-width:100%;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* Panneau d'infos */
.lb-meta{
  width:380px; max-width:380px;
  height:92vh; overflow:auto;
  background:#fff;border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
  padding:12px;
}
.lb-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.lb-actions .like{cursor:pointer}

/* Boutons de contrôle visibles en haut droite */
.lightbox .controls{
  position:fixed; top:16px; right:16px;
  display:flex; gap:10px; z-index:10000;
}
.iconbtn{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:999px;
  background:#ffffff; color:#0d2b57; font-weight:900; font-size:22px; line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.25); cursor:pointer;
}
.iconbtn:hover{ transform:translateY(-1px); }
.iconbtn.danger{ color:#b00020; }

/* ==========
   Responsive
   ========== */
@media (max-width: 980px){
  :root { --logo-size: 100px; --header-thin: 56px; } /* header fin + logo un peu réduit */
  .lightbox .content.two-cols{ grid-template-columns:1fr; max-width:95vw; }
  .lb-meta{ width:auto; max-width:95vw; height:auto; max-height:60vh; }
  .lb-media img{ max-height:60vh; }
}

/* === Logo à gauche + conteneur plus grand (largeur & hauteur) === */
:root{
  --logo-size: 140px;        /* taille du logo */
  --header-thin: 64px;       /* épaisseur de la barre bleue */
  --container-max: 1400px;   /* largeur max de la zone blanche */
  --container-vw: 96vw;      /* largeur relative à l'écran */
}

header{
  position: relative;
  min-height: var(--header-thin);
  padding: 8px 0;
  background:#0d2b57; color:#fff; text-align:center;
}

/* LOGO collé à gauche, centré verticalement */
header .logo{
  position:absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--logo-size);
  height: var(--logo-size);
  object-fit: contain;
}

/* Zone blanche plus large et plus haute (remplit l'écran sous le header) */
.container{
  width: min(var(--container-max), var(--container-vw));
  min-height: calc(100vh - var(--header-thin) - 40px); /* -40 pour garder un peu d’air bas */
  padding: 24px;                 /* un peu plus d’air intérieur */
  margin: -18px auto 40px;       /* marge bas augmentée */
}

/* Optionnel : petit ajustement des espacements du titre/nav */
header h1{ margin:0; font-size:20px; font-weight:700; }
header nav{ margin-top:6px; }

/* Mobile : barre très fine + logo réduit */
@media (max-width: 520px){
  :root{ --logo-size: 100px; --header-thin: 56px; --container-vw: 98vw; }
}