/* ==========================================================================
   My89 — Style site public
   Fichier : style-site-public-my89-2025-v1.css
   Version humaine : 2025-v1
   NB : Le “cache-busting” réel est assuré par l’URL avec ?v=filemtime() côté PHP.
   ========================================================================== */

:root{
  --brand:#003366; --bg:#f6f7f9; --card:#ffffff; --line:#e6e7eb; --fg:#000; --muted:#60646c; --ok:#339900; --past:#9aa0a6;
  --chip-bg:#eeeeee; --chip-border:#cccccc; --chip-fg:#000;
  --tile-w: 210px;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial}
a{text-decoration:none;color:inherit}
.shell{max-width:1100px;margin:0 auto;padding:1rem}

/* Accessibilité */
.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* Calendrier + filtres */
.search-block{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:1rem;align-items:start;margin:1rem 0}
@media (max-width:900px){.search-block{grid-template-columns:1fr}}
.cal{border-collapse:collapse;width:100%;max-width:360px;background:#fff;border:1px solid var(--chip-border);border-radius:12px;overflow:hidden}
.cal th,.cal td{border:1px solid var(--line);text-align:center}
.-cal-head{padding:.6rem .5rem;background:var(--chip-bg);border-bottom:1px solid var(--chip-border)}
.-cal-title{font-weight:700;font-size:1.34rem}
.-cal-nav{margin-top:.2rem;font-size:.95rem;font-weight:400}
.-dow{padding:.5rem;background:#fbfbfc;font-weight:700}
.-empty{height:42px}
.-cell{height:42px}
.-cell a{display:block;padding:.35rem .2rem}
.-cell.-past a{color:var(--past)}
.-cell.-future a{color:var(--ok);font-weight:700}
.-cell.-today{background:#ffff99}
.label{font-weight:700;margin:.2rem 0 .35rem 0;font-size:1.05rem;color:var(--fg)}
.controls .row{display:flex;gap:.5rem;flex-wrap:wrap;margin:.3rem 0}
.controls input[type=number]{padding:.55rem .7rem;border:1px solid var(--line);border-radius:.6rem;min-width:72px}
.controls input[type=text]{padding:.7rem .9rem;border:1px solid var(--line);border-radius:.6rem;min-width:260px;font-size:1.08rem}

/* Boutons génériques */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem .9rem;border:1px solid var(--line);border-radius:.6rem;background:#fff;transition:all .15s ease}
.btn-ok{color:#666;cursor:pointer;font-size:1.05rem;font-weight:700}
.btn-primary{background:#ffff99;border-color:#ccc}

/* Chips catégories */
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:.3rem 0 1rem 0}
.chips a{display:inline-flex;align-items:center;padding:.55rem .85rem;border:1px solid var(--chip-border);border-radius:.6rem;background:var(--chip-bg);color:var(--chip-fg)}
.chips a.-active{background:#e2e2e2;border-color:#9c9c9c}

/* Posters (mode Blocs) */
.poster-grid{display:grid;gap:.8rem;margin-top:.6rem}
@media (min-width:1100px){.poster-grid{grid-template-columns:repeat(6,1fr)}}
@media (min-width:800px) and (max-width:1099px){.poster-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:600px) and (max-width:799px){.poster-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:599px){.poster-grid{grid-template-columns:repeat(2,1fr)}}
.tile{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:background-color .2s ease}
.tile img{width:100%;height:auto;object-fit:contain;background:#fff;display:block}
.tile .cap{padding:.55rem .6rem .7rem}
.tile .cap h4{margin:0 0 .15rem 0;font-size:1rem;line-height:1.15;font-weight:700}
.tile .cap .w{color:var(--ok);font-weight:700;font-size:1rem;margin-bottom:.15rem}
.tile .cap .where{color:#222;font-weight:400;font-size:.95rem}
.tile .cap .where .ville{font-weight:600}
.tile .plus{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:999px;background:var(--chip-bg);color:var(--chip-fg);
  display:flex;align-items:center;justify-content:center;font-weight:400;font-size:15px;line-height:1;border:1px solid var(--chip-border)}

/* List (mode Liste) */
.card{border:1px solid var(--line);border-radius:16px;background:var(--card);display:flex;gap:.75rem;padding:.9rem;margin:0 0 1rem 0}
.card img{width:160px;height:auto;object-fit:contain;background:#fff;border-radius:.5rem;flex:none}
.meta{flex:1}
.meta h3{margin:.1rem 0 .2rem 0;font-size:1.04rem;font-weight:700}
.meta .when{color:var(--ok);font-weight:700;margin:.1rem 0 .15rem 0;font-size:1.02rem}
.meta .where{color:#222;font-weight:400}
.meta .where .ville{font-weight:600}
.meta .info{color:var(--muted);font-size:.95rem}

/* Rails (mode Défil.) */
.rail-wrap{margin:1rem 0}
.rail-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.rail{display:flex;gap:.8rem;overflow-x:auto;overflow-y:hidden;padding:.2rem .1rem}
.rail::-webkit-scrollbar{height:10px}
.rail::-webkit-scrollbar-thumb{background:#cfd3d8;border-radius:10px}
.rail .tile{flex:0 0 var(--tile-w)}
.nav-arrows{display:flex;gap:.6rem;margin-left:auto}
.nav-btn{border:1px solid var(--line);background:#fff;border-radius:999px;width:56px;height:56px;font-size:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}

/* Divers */
.sep{height:1px;background:var(--line);margin:1.25rem 0}
.note{color:var(--muted)}
.view{display:none;opacity:0;transition:opacity .2s ease}
.view.-active{display:block;opacity:1}

/* === Lazy loading (fallback sans JS) === */
.lazy{
  opacity:1;
  transform:none;
  transition:opacity .25s ease, transform .25s ease;
}
.js .lazy{
  opacity:0;
  transform:translateY(8px);
}
.lazy.-show{
  opacity:1;
  transform:none;
}

/* ===== Top Agenda ===== */
.topagenda-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:.2rem}
.topagenda-header h2{margin:0;font-size:1.5rem}

/* Barre compteur + modes */
.topagenda-bar{
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;margin:.2rem 0 1rem 0;
}
.topagenda-bar .count{font-size:1rem}
.topagenda-bar .modes{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.topagenda-bar .modes .btn{padding:.35rem .65rem;font-size:.9rem;border-radius:.6rem}

/* Mobile : boutons en dessous si étroit */
@media (max-width:600px){
  .topagenda-bar{align-items:flex-start}
  .topagenda-bar .modes{margin-top:.3rem}
}
@media (max-width:360px){
  .topagenda-bar .modes{gap:.3rem}
  .topagenda-bar .modes .btn{flex:1 1 auto}
}

/* ===== Effets de survol (cohérents partout) ===== */
.cal a:hover,
.controls a:hover,
.chips a:hover,
.topagenda-bar a:hover,
a.btn:hover{ text-decoration: underline; }

a.btn:hover{ background:#ffff99; border-color:#ccc }
.nav-btn:hover{ background:#ffff99; border-color:#ccc }
.tile:hover{ background:#ffff99 }

/* ===== Mode LISTE : image à droite (non croppée) + compact ===== */
#view-list .card{ flex-direction:row-reverse; align-items:flex-start; gap:.75rem; padding:.7rem .85rem }
#view-list .card img{ width:160px; height:auto !important; object-fit:contain; border-radius:.5rem }
#view-list .card > div[style*="width:160px"]{ width:160px !important; height:auto !important }
#view-list .meta h3{ font-size:1.0rem; margin:0 0 .25rem 0 }
#view-list .meta .when{ font-size:.98rem; margin:.05rem 0 .2rem 0 }
#view-list .meta .info{ font-size:.92rem }
#view-list .card .btn{ padding:.45rem .7rem; font-size:.9rem; border-radius:.55rem }

@media (max-width:1099px){
  #view-list .card img{ width:140px }
  #view-list .card > div[style*="width:160px"]{ width:140px !important }
}
@media (max-width:900px){
  #view-list .card img{ width:120px }
  #view-list .card > div[style*="width:160px"]{ width:120px !important }
}
@media (max-width:600px){
  #view-list .card img{ width:100px }
  #view-list .card > div[style*="width:160px"]{ width:100px !important }
}
@media (max-width:420px){
  #view-list .card img{ width:90px }
  #view-list .card > div[style*="width:160px"]{ width:90px !important }
}

#view-list .card{
  display:block !important;
  padding:.7rem .85rem;
}
#view-list .card::after{
  content:""; display:block; clear:both;
}
#view-list .card > a:first-child{
  float:left;
  margin-right:.75rem;
}
#view-list .card img{
  width:160px;
  height:auto !important;
  object-fit:contain;
  display:block;
  border-radius:.5rem;
}
#view-list .card > div[style*="width:160px"]{
  float:left;
  width:160px !important;
  height:auto !important;
  margin-right:.75rem;
  border-radius:.5rem;
}
#view-list .meta h3{ font-size:1.0rem; margin:0 0 .25rem 0; }
#view-list .meta .when{ font-size:.98rem; margin:.05rem 0 .2rem 0; }
#view-list .meta .info{ font-size:.92rem; }
#view-list .card .btn{ padding:.45rem .7rem; font-size:.9rem; border-radius:.55rem; }

@media (max-width:1099px),
       (max-width:900px),
       (max-width:600px),
       (max-width:420px){
  #view-list .card img,
  #view-list .card > div[style*="width:160px"]{
    width:150px !important;
    height:auto !important;
  }
}