/* vitrines.css — famille d'affichages « Vitrine » (voir vitrines.js)
   Toutes les classes commencent par « vit- ». Une couleur par Vitrine : --vit. */

.vit-section{
  --vit:#3d6b4b;
  --vit-ink:color-mix(in srgb, var(--vit) 72%, var(--text));
  --vit-soft:color-mix(in srgb, var(--vit) 14%, var(--panel));
  position:relative;
  padding:18px 20px 22px;
  border-radius:18px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--vit) 10%, var(--bg)), color-mix(in srgb, var(--vit) 3%, var(--bg)));
}
.vit-nature{--vit:#3d6b4b;}
.vit-musique{--vit:#b5502b;}
.vit-famille{--vit:#3e7c93;}
.vit-culture{--vit:#5b4b9a;}
.vit-gastro{--vit:#55803f;}
.vit-sport{--vit:#c8641e;}
.vit-section + .vit-section, .vit-section + .category-section{margin-top:18px;}

/* ---- En-tête commun ---- */
.vit-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.vit-num{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--vit);color:#fff;
  font-weight:600;font-size:15px;
}
.vit-icon{
  flex:none;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--vit);color:#fff;
  box-shadow:0 4px 10px color-mix(in srgb, var(--vit) 30%, transparent);
}
.vit-icon svg{width:24px;height:24px;display:block;}
.vit-head-text{min-width:0;flex:1 1 220px;}
.vit-name{
  margin:0;
  font-family:'Source Serif 4',Georgia,serif;
  font-size:23px;font-weight:600;line-height:1.15;
  color:var(--vit-ink);
}
.vit-sub{margin:3px 0 0;font-size:13px;color:var(--text-muted);}
.vit-all{
  flex:none;margin-left:auto;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;
  background:var(--panel);color:var(--vit-ink);
  border:1px solid color-mix(in srgb, var(--vit) 35%, var(--divider));
  border-radius:999px;
  font:inherit;font-size:13px;font-weight:500;cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.vit-all:hover{background:var(--vit-soft);border-color:var(--vit);}
.vit-all:focus-visible, .vit-card:focus-visible, .vit-hero:focus-visible, .vit-tl-item:focus-visible, .vit-row:focus-visible, .vit-mus-hero:focus-visible{outline:2px solid var(--vit);outline-offset:2px;}
.vit-all .vit-ico svg{width:14px;height:14px;}

/* Barre de couleur à gauche du contenu */
.vit-body{position:relative;margin-top:16px;padding-left:18px;}
.vit-body::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px;background:var(--vit);}

/* ---- Éléments communs ---- */
.vit-ico{display:inline-flex;flex:none;color:var(--vit);}
.vit-ico svg{width:13px;height:13px;display:block;}
.vit-tag{
  display:inline-block;max-width:100%;
  padding:3px 10px;border-radius:999px;
  background:var(--panel);color:var(--vit-ink);
  border:1px solid color-mix(in srgb, var(--vit) 45%, transparent);
  font-size:11.5px;font-weight:600;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vit-tag-solid{background:var(--vit);color:#fff;border-color:transparent;}
.vit-tag-float{position:absolute;left:10px;bottom:-11px;z-index:2;box-shadow:var(--shadow-sm);}
.vit-title{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:16px;font-weight:600;line-height:1.28;
  color:var(--text);
  margin:6px 0 4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vit-meta{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12px;color:var(--text-muted);min-width:0;}
.vit-meta span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vit-date{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);}
.vit-desc{
  margin:8px 34px 0 0;font-size:12.5px;line-height:1.45;color:var(--text-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vit-meta-row{display:flex;flex-wrap:wrap;gap:2px 14px;}

/* Carré de date */
.vit-badge{
  flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:64px;padding:9px 0 8px;
  background:var(--panel);color:var(--text);
  border-radius:12px;box-shadow:var(--shadow-md);
  line-height:1;text-align:center;
}
.vit-badge-dow{font-size:11.5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;}
.vit-badge-day{font-family:'Source Serif 4',Georgia,serif;font-size:32px;font-weight:600;margin:4px 0 3px;}
.vit-badge-mon{font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--vit-ink);}
.vit-badge-sm{width:46px;padding:6px 0 5px;border-radius:9px;box-shadow:var(--shadow-sm);border:1px solid var(--divider);}
.vit-badge-sm .vit-badge-day{font-size:21px;margin:3px 0 2px;}
.vit-badge-sm .vit-badge-dow, .vit-badge-sm .vit-badge-mon{font-size:9.5px;}

/* Images */
.vit-media{position:relative;overflow:hidden;background:var(--panel-alt);aspect-ratio:16/9;}
.vit-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.vit-media .photo-date{display:none;}
.vit-media.placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg, hsl(var(--tile-h,150) 32% 74%), hsl(var(--tile-h,150) 38% 56%));
  color:#fff;font-weight:600;font-size:28px;
}
.vit-media.placeholder .tile-day{font-family:'Source Serif 4',Georgia,serif;font-size:34px;line-height:1;}
.vit-media.placeholder .tile-dow, .vit-media.placeholder .tile-mon{font-size:12px;text-transform:uppercase;letter-spacing:0.06em;}

/* ---- Grilles ---- */
.vit-grid{display:grid;gap:16px;align-items:start;}
.vit-grid-hero{grid-template-columns:minmax(0,2.4fr) repeat(var(--k,3), minmax(0,1fr));}
.vit-grid-hero.is-solo{grid-template-columns:minmax(0,1fr);}
.vit-grid-eq{grid-template-columns:repeat(var(--cols,4), minmax(0,1fr));}

/* Carte « image en haut » */
.vit-card{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--divider);border-radius:12px;
  box-shadow:var(--shadow-sm);
  color:inherit;text-decoration:none;
  transition:box-shadow 0.18s ease, border-color 0.18s ease;
}
.vit-card:hover{box-shadow:var(--shadow-md);border-color:color-mix(in srgb, var(--vit) 55%, var(--divider));}
.vit-media-wrap{position:relative;}
.vit-card .vit-media{border-radius:11px 11px 0 0;}
.vit-card-body{padding:18px 14px 14px;min-width:0;}
.vit-card-body.is-inline{padding-top:12px;}
.vit-card-body .vit-title{margin-top:5px;}
.vit-row-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* Grande une */
.vit-hero{
  display:flex;flex-direction:column;height:100%;
  border-radius:16px;overflow:hidden;
  background:var(--panel);color:inherit;
  box-shadow:var(--shadow-md);
}
.vit-hero-visual{position:relative;flex:1;min-height:300px;color:#fff;}
.vit-hero .vit-media{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;}
.vit-hero-inner{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;align-items:flex-end;gap:12px;}
.vit-hero-panel .vit-panel{
  position:relative;flex:1;min-width:0;
  background:var(--panel);color:var(--text);
  border-radius:12px;padding:16px 18px 14px;
  box-shadow:var(--shadow-md);
}
.vit-hero-panel .vit-tag-float{left:14px;top:-12px;bottom:auto;}
.vit-hero-panel .vit-title{font-size:19px;margin-top:2px;-webkit-line-clamp:2;}
.vit-go{
  position:absolute;right:14px;bottom:14px;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--vit-soft);color:var(--vit);
}
.vit-go .vit-ico svg{width:15px;height:15px;}
.vit-hero-overlay .vit-hero-visual::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg, rgba(8,12,8,0.9) 0%, rgba(8,12,8,0.5) 48%, rgba(8,12,8,0) 100%);
}
.vit-hero-overlay .vit-hero-text{flex:1;min-width:0;}
.vit-hero-overlay .vit-title{color:#fff;font-size:22px;margin:0 0 6px;text-shadow:0 1px 6px rgba(0,0,0,0.35);-webkit-line-clamp:3;}
.vit-hero-overlay .vit-meta{color:rgba(255,255,255,0.92);}
.vit-hero-overlay .vit-meta .vit-ico{color:#fff;}
.vit-hero-end{flex:none;align-self:flex-end;}
.vit-tag-flat{box-shadow:none;}
.vit-hero-text .vit-tag{margin-top:10px;}
.vit-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  background:#fff;color:#262b24;
  font-size:13px;font-weight:600;
}
.vit-cta .vit-ico{color:var(--vit);}
.vit-cta .vit-ico svg{width:14px;height:14px;}
div.vit-hero:hover .vit-media img, .vit-card:hover .vit-media img{transform:scale(1.03);}
.vit-media img{transition:transform 0.4s ease;}

/* ---- Musique : grande une + frise ---- */
.vit-mus{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,3fr);gap:20px;align-items:start;}
.vit-mus.is-solo{grid-template-columns:minmax(0,1fr);}
.vit-mus-hero{
  position:relative;display:grid;grid-template-columns:40% minmax(0,1fr);
  min-height:170px;
  background:var(--panel);border:1px solid var(--divider);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-sm);color:inherit;text-decoration:none;
}
.vit-mus-hero .vit-media{aspect-ratio:auto;height:100%;min-height:170px;}
.vit-mus-hero > .vit-badge{position:absolute;top:14px;left:calc(40% - 32px);z-index:2;}
.vit-mus-hero-body{padding:14px 14px 14px 40px;min-width:0;align-self:center;}
.vit-mus-hero:hover{border-color:color-mix(in srgb, var(--vit) 55%, var(--divider));box-shadow:var(--shadow-md);}
.vit-tl{
  position:relative;display:grid;grid-template-columns:repeat(var(--k,3), minmax(0,1fr));gap:16px;
  padding-top:20px;align-items:start;
}
.vit-tl::before{content:"";position:absolute;top:5px;left:0;right:0;height:2px;background:color-mix(in srgb, var(--vit) 50%, transparent);}
.vit-tl-item{
  position:relative;display:block;
  padding:10px 12px 12px;
  background:var(--panel);border:1px solid var(--divider);border-radius:12px;box-shadow:var(--shadow-sm);
  color:inherit;text-decoration:none;
  transition:box-shadow 0.18s ease, border-color 0.18s ease;
}
.vit-tl-item:hover{box-shadow:var(--shadow-md);border-color:color-mix(in srgb, var(--vit) 55%, var(--divider));}
.vit-tl-item::before{
  content:"";position:absolute;top:-19px;left:18px;
  width:10px;height:10px;border-radius:50%;
  background:var(--vit);box-shadow:0 0 0 4px color-mix(in srgb, var(--vit) 22%, transparent);
}
.vit-tl-head{display:flex;gap:10px;align-items:flex-start;}
.vit-tl-headtext{min-width:0;flex:1;}
.vit-tl-headtext .vit-title{font-size:14.5px;margin:5px 0 0;}
.vit-tl-row{display:flex;gap:10px;align-items:center;margin-top:10px;}
.vit-tl-row .vit-media{flex:none;width:52px;height:52px;aspect-ratio:auto;border-radius:9px;}
.vit-tl-row .vit-media.placeholder{font-size:18px;}
.vit-tl-row .vit-media.placeholder .tile-day{font-size:20px;}
.vit-tl-row .vit-media.placeholder .tile-dow, .vit-tl-row .vit-media.placeholder .tile-mon{font-size:9px;}
.vit-tl-meta{min-width:0;flex:1;}
.vit-tl-meta .vit-meta{align-items:flex-start;}
.vit-tl-meta .vit-meta span:last-child{white-space:normal;overflow:visible;}

/* ---- Sport : grande une + liste ---- */
.vit-sportwrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:stretch;}
.vit-sportwrap.is-solo{grid-template-columns:minmax(0,1fr);}
.vit-list{
  background:var(--panel);border:1px solid var(--divider);border-radius:14px;
  padding:4px 14px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;justify-content:center;
}
.vit-row{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--divider);
  color:inherit;text-decoration:none;
}
.vit-row:last-child{border-bottom:none;}
.vit-row .vit-media{width:64px;height:52px;aspect-ratio:auto;border-radius:8px;}
.vit-row .vit-media.placeholder{font-size:18px;}
.vit-row .vit-media.placeholder .tile-day{font-size:20px;}
.vit-row .vit-media.placeholder .tile-dow, .vit-row .vit-media.placeholder .tile-mon{font-size:9px;}
.vit-row .vit-title{font-size:14.5px;margin:0 0 2px;-webkit-line-clamp:1;}
.vit-row:hover .vit-title{color:var(--vit-ink);}

/* Événements supplémentaires (après « Voir tous ») */
.vit-extra{display:grid;grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));gap:14px;margin-top:18px;align-items:start;}

/* ---- Mobile / tablette ---- */
@media (max-width:900px){
  .vit-grid-hero{grid-template-columns:repeat(2, minmax(0,1fr));}
  .vit-grid-hero > .vit-hero{grid-column:1 / -1;}
  .vit-hero-visual{min-height:260px;}
  .vit-grid-eq{grid-template-columns:repeat(2, minmax(0,1fr));}
  .vit-mus, .vit-sportwrap{grid-template-columns:minmax(0,1fr);}
  .vit-tl{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:560px){
  .vit-section{padding:14px 12px 18px;border-radius:14px;}
  .vit-body{padding-left:12px;}
  .vit-icon{width:40px;height:40px;}
  .vit-name{font-size:20px;}
  .vit-all{margin-left:0;}
  .vit-grid{gap:12px;}
  .vit-hero-panel .vit-panel{padding-right:52px;}
  .vit-card-body{padding:16px 10px 12px;}
  .vit-title{font-size:15px;}
  .vit-hero-inner{left:10px;right:10px;bottom:10px;flex-wrap:wrap;}
  .vit-hero-overlay .vit-hero-text{flex:1 1 120px;}
  .vit-hero-overlay .vit-title{font-size:18px;}
  .vit-hero-end{flex:1 0 100%;display:flex;justify-content:flex-end;}
  .vit-desc{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .vit-media img{transition:none;}
  div.vit-hero:hover .vit-media img, .vit-card:hover .vit-media img{transform:none;}
}

/* ================= v2 : infos bien lisibles + extrait au clic ================= */
.vit-card, .vit-hero, .vit-mus-hero, .vit-tl-item, .vit-row{cursor:pointer;}
.vit-card:focus-visible, .vit-hero:focus-visible, .vit-mus-hero:focus-visible, .vit-tl-item:focus-visible, .vit-row:focus-visible{outline:2px solid var(--vit);outline-offset:2px;}

/* Titre : plus grand, jusqu'à 3 lignes */
.vit-title{font-size:17.5px;line-height:1.28;-webkit-line-clamp:3;margin:7px 0 6px;}
.vit-hero-panel .vit-title{font-size:21px;}
.vit-hero-overlay .vit-title{font-size:25px;-webkit-line-clamp:4;}
.vit-tl-headtext .vit-title{font-size:16px;}
.vit-row .vit-title{font-size:16px;-webkit-line-clamp:2;margin:0 0 4px;}

/* Heure et lieu : plus gros, plus foncés, jamais coupés */
.vit-meta{font-size:14px;line-height:1.35;gap:7px;margin-top:4px;align-items:flex-start;color:var(--text);}
.vit-meta .vit-ico{margin-top:2px;}
.vit-meta .vit-ico svg{width:15px;height:15px;}
.vit-meta span:last-child{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;}
.vit-meta-clock{font-weight:600;}
.vit-date{font-size:13.5px;font-weight:600;color:var(--vit-ink);}
.vit-date .vit-ico svg{width:15px;height:15px;}
.vit-tag{font-size:12.5px;}
.vit-hero-overlay .vit-meta{font-size:15px;color:#fff;}
.vit-hero-overlay .vit-meta-clock{font-weight:600;}
.vit-hero-overlay .vit-meta span:last-child{text-shadow:0 1px 4px rgba(0,0,0,0.5);}
.vit-tl-meta .vit-meta{font-size:13.5px;}
.vit-row .vit-meta{font-size:13.5px;}
.vit-row{grid-template-columns:72px minmax(0,1fr) auto;}
.vit-row .vit-media{width:72px;height:60px;}
.vit-card-body{padding:20px 15px 16px;}
.vit-card-body.is-inline{padding-top:14px;}

/* Panneau d'extrait : pleine largeur de la catégorie, sous les cartes */
.vit-open{outline:2px solid var(--vit);outline-offset:2px;}
.vit-detail{
  position:relative;margin-top:18px;overflow:hidden;
  background:var(--panel);border:1px solid var(--vit);border-radius:14px;
  box-shadow:var(--shadow-md);
}
.vit-detail:not([hidden]){display:grid;grid-template-columns:minmax(200px,34%) minmax(0,1fr);}
.vit-detail-media{position:relative;min-height:230px;background:var(--panel-alt);}
.vit-detail-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.vit-detail-media.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg, hsl(var(--tile-h,150) 32% 74%), hsl(var(--tile-h,150) 38% 56%));color:#fff;}
.vit-detail-body{padding:20px 56px 22px 24px;min-width:0;}
.vit-detail-title{
  margin:8px 0 8px;
  font-family:'Source Serif 4',Georgia,serif;font-size:24px;font-weight:600;line-height:1.25;color:var(--text);
}
.vit-detail .vit-meta{font-size:15px;}
.vit-detail .vit-meta .vit-ico svg{width:16px;height:16px;}
.vit-detail-text{margin:14px 0 18px;font-size:15.5px;line-height:1.6;color:var(--text);}
.vit-detail-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.vit-readmore{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:999px;
  background:var(--vit);color:#fff;
  font-size:14px;font-weight:600;line-height:1.25;text-decoration:none;
}
.vit-readmore:hover{filter:brightness(1.1);}
.vit-readmore:focus-visible{outline:2px solid var(--vit-ink);outline-offset:2px;}
.vit-readmore .vit-ico{color:#fff;}
.vit-readmore .vit-ico svg{width:15px;height:15px;}
.vit-detail-close{
  position:absolute;top:10px;right:12px;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--vit-soft);color:var(--vit-ink);
  border:none;font:inherit;font-size:22px;line-height:1;cursor:pointer;
}
.vit-detail-close:hover{background:color-mix(in srgb, var(--vit) 28%, var(--panel));}
@media (max-width:700px){
  .vit-detail:not([hidden]){grid-template-columns:minmax(0,1fr);}
  .vit-detail-media{min-height:0;aspect-ratio:16/9;}
  .vit-detail-body{padding:16px 16px 18px;}
  .vit-detail-title{font-size:21px;padding-right:34px;}
  .vit-detail-close{background:rgba(255,255,255,0.92);}
}