/* ===========================================================================
   Imagizer — feuille de style web (increment 2 : balisage moderne)
   Responsive (mobile d'abord), sombre par défaut + variante claire.
   100 % statique, aucune dépendance externe (police système, pas de CDN).
   =========================================================================== */

/* Galerie sombre par defaut (comme les versions precedentes d'imagizer) :
   fond #17171a quel que soit le reglage clair/sombre du systeme. Le palette
   clair est conservee ci-dessous mais volontairement inactive (elle ne
   s'active plus via prefers-color-scheme) ; la reactiver = restaurer le
   bloc @media. color-scheme:dark aligne aussi les widgets natifs (scrollbars). */
:root {
    color-scheme:dark;
    --bg:#17171a; --surface:#212127; --surface-2:#2b2b32;
    --text:#e8e8ea; --muted:#9a9aa4; --line:#383840;
    --accent:#6db3f2; --accent-2:#a9d3f8;
    --radius:12px; --gap:clamp(.6rem,2vw,1.2rem); --maxw:1200px;
    --shadow:0 6px 24px rgba(0,0,0,.45);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
    margin:0 auto; max-width:var(--maxw);
    padding:clamp(.7rem,3vw,1.5rem);
    background:var(--bg); color:var(--text);
    font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a { color:var(--accent); text-decoration:none; }
a:hover,a:focus { color:var(--accent-2); text-decoration:underline; }
img { max-width:100%; height:auto; }

/* --- En-tête de page / fil d'Ariane --------------------------------------- */
.pagehead { margin:0 0 var(--gap); }
.pagehead h1 { margin:.2rem 0; font-size:clamp(1.3rem,5vw,2rem); }
.crumbs { color:var(--muted); font-size:.9rem; margin-bottom:.3rem; }
.subtitle { margin:.1rem 0 .5rem; }
.daycomment { color:var(--muted); margin:.2rem 0 .8rem; max-width:70ch; }
.muted { color:var(--muted); }

.btn {
    display:inline-block; padding:.55rem 1.1rem;
    background:var(--surface-2); color:var(--accent);
    border:1px solid var(--line); border-radius:var(--radius);
    font-weight:600; cursor:pointer;
}
.btn:hover,.btn:focus { border-color:var(--accent); color:var(--accent-2); text-decoration:none; }

/* Barre d'actions : navigation laterale (jour/annee prec. et suiv.) de part et
   d'autre des boutons Diaporama et Telechargement. Le lien "prec." est pousse a
   gauche, "suiv." a droite ; les boutons du centre sont injectes entre les deux
   (le bouton Telechargement est ajoute par zip.js apres #slideshow). */
.pagenav { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.6rem 0 0; }
.pagenav .prev { margin-right:auto; }
.pagenav .next { margin-left:auto; }
.navday { min-width:0; max-width:16rem; overflow:hidden;
          text-overflow:ellipsis; white-space:nowrap; }

/* --- Grilles (jours & miniatures) ----------------------------------------- */
.grid {
    list-style:none; margin:0; padding:0; display:grid; gap:var(--gap);
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.days { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); align-items:start; }

.tile {
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    color:inherit; text-decoration:none; transition:transform .15s, box-shadow .15s;
}
.tile:hover,.tile:focus { transform:translateY(-2px); box-shadow:var(--shadow); text-decoration:none; }
/* Cadre de proportion fixe (technique du padding %, universelle) : l'image le
   remplit en object-fit:cover. Robuste sur tous navigateurs, mobile inclus. */
.tile-img { position:relative; display:block; padding-top:100%; height:0;
            overflow:hidden; background:var(--surface-2); }
.days .tile-img { padding-top:75%; }   /* 4:3 pour les couvertures de jour */
.tile-img img { position:absolute; top:0; left:0; width:100%; height:100%;
                object-fit:cover; display:block; }
.tile-cap { padding:.5rem .6rem; font-size:.9rem; color:var(--muted); text-align:center; }
.days .tile-cap { color:var(--text); }
.cardnote { display:block; margin-top:.3rem; font-size:.82rem; color:var(--muted); text-align:left; }

/* --- Page image ----------------------------------------------------------- */
.photo { max-width:1000px; margin-inline:auto; }
.stage { position:relative; margin:var(--gap) 0; }
.viewer { display:block; }
.image { display:block; max-width:100%; height:auto; margin:0 auto;
         border-radius:var(--radius); box-shadow:var(--shadow); }

/* Grandes zones de navigation : colonnes cliquables sur toute la hauteur de
   l'image, a gauche (precedente) et a droite (suivante). Transparentes au
   repos (aucune teinte sur l'image) ; seul le chevron reste visible, lisible
   grace a son ombre portee. Un fond leger n'apparait qu'au survol/focus. */
.navbtn {
    position:absolute; top:0; bottom:0; z-index:2;
    width:clamp(56px, 15%, 130px);
    display:flex; align-items:center; justify-content:center;
    font-size:2.4rem; line-height:1; color:#fff;
    text-shadow:0 1px 4px rgba(0,0,0,.7);
    background:transparent; border:0; text-decoration:none; transition:background .15s;
}
.navbtn:hover,.navbtn:focus {
    background:color-mix(in srgb, var(--surface) 55%, transparent); text-decoration:none;
}
.navbtn.prev { left:0; border-radius:var(--radius) 0 0 var(--radius); }
.navbtn.next { right:0; border-radius:0 var(--radius) var(--radius) 0; }

.title { font-size:clamp(1.2rem,4vw,1.5rem); text-align:center; margin:var(--gap) 0 .2rem; }
.description { text-align:center; color:var(--muted); margin:.2rem 0; }
.backlink { text-align:center; margin:var(--gap) 0; }

.exif {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.3rem .9rem;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:.8rem 1rem; margin:var(--gap) 0; font-size:.85rem;
}
.exif div { display:flex; gap:.4rem; }
.exif dt { color:var(--muted); margin:0; }
.exif dd { margin:0; font-weight:600; }

/* --- Diaporama (lightbox, construit en JS) -------------------------------- */
.lightbox {
    position:fixed; inset:0; z-index:1000; display:none;
    align-items:center; justify-content:center; background:rgba(0,0,0,.93);
}
.lightbox.open { display:flex; }
.lightbox img { max-width:96vw; max-height:82vh; object-fit:contain; border-radius:6px; }
.lb-caption {
    position:absolute; left:0; right:0; bottom:3.4rem; text-align:center;
    color:#f0f0f0; padding:0 1rem; font-size:1rem; text-shadow:0 1px 3px #000;
    white-space:pre-line;   /* respecte les retours à la ligne des légendes */
}
.lb-exif {
    position:absolute; top:.6rem; left:.6rem; max-width:min(80vw, 340px);
    background:rgba(0,0,0,.62); color:#eee; padding:.6rem .8rem; border-radius:8px;
    font-size:.85rem; line-height:1.45; white-space:pre-line; text-shadow:0 1px 2px #000;
}
.lb-exif[hidden] { display:none; }
.lb-bar { position:absolute; left:0; right:0; bottom:.7rem; display:flex; gap:.6rem; justify-content:center; }
.lb-btn {
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; color:#fff; background:rgba(255,255,255,.14);
    border:0; border-radius:50%; cursor:pointer;
}
.lb-btn:hover,.lb-btn:focus { background:rgba(255,255,255,.28); }
.lb-prev { position:absolute; left:.6rem; top:50%; transform:translateY(-50%); }
.lb-next { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); }
.lb-close { position:absolute; top:.6rem; right:.6rem; }