/* Tokens repris de tc-annuaire (hub A à Z) pour une cohérence visuelle totale. */
.tccal-wrap {
    --tc-green: #2D4A2D;
    --tc-green-light: #3D6B3D;
    --tc-gold: #C9973A;
    --tc-terracotta: #8B3A1A;
    --tc-sand: #D4B84A;
    --tc-bg: #f9f7f4;
    --tc-border: #e0d8cc;
    --tc-text: #2b2318;
    --tc-muted: #857a6d;
    --tc-radius: 10px;
    --tc-shadow: 0 3px 12px rgba(45, 35, 20, .10);
    --tc-shadow-hover: 0 8px 24px rgba(45, 35, 20, .16);
    padding: 8px 0 48px;
    color: var(--tc-text);
}
.tccal-inner { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* ── Navigation mois ──────────────────────────────────────────────────────── */
.tccal-months-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--tc-border);
}
.tccal-month-pill {
    border: 1px solid var(--tc-border);
    background: #fff;
    color: var(--tc-text);
    border-radius: 20px;
    padding: 8px 18px;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
}
.tccal-month-pill:hover { border-color: var(--tc-green-light); color: var(--tc-green); }
.tccal-month-pill.is-active { background: var(--tc-green); border-color: var(--tc-green); color: #fff; box-shadow: var(--tc-shadow); }

/* ── Panel ─────────────────────────────────────────────────────────────────── */
.tccal-panel { animation: tccal-fade-in .4s ease; }
@keyframes tccal-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .tccal-panel { animation: none; } }

/* ── Bannière mois — photo réelle du lieu le plus proche, ou dégradé si aucune photo n'est disponible ── */
.tccal-banner {
    position: relative;
    border-radius: var(--tc-radius);
    overflow: hidden;
    aspect-ratio: 21 / 8;
    background: linear-gradient(135deg, var(--tc-sand), var(--tc-gold));
    margin-bottom: 24px;
    box-shadow: var(--tc-shadow);
}
.tccal-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tccal-banner-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 15, 8, .78), rgba(20, 15, 8, 0) 60%); }
.tccal-banner-title { position: absolute; left: 24px; bottom: 40px; z-index: 2; color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); margin: 0; }
.tccal-banner-ref {
    position: absolute; left: 24px; bottom: 14px; z-index: 2;
    display: inline-block; background: rgba(255,255,255,.92); color: var(--tc-terracotta);
    font-size: .78rem; font-weight: 700; letter-spacing: .02em;
    padding: 4px 12px; border-radius: 20px;
}

/* ── Météo — bandeau centré ───────────────────────────────────────────────── */
.tccal-climate-strip { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 0 0 22px; }
.tccal-climate-stat {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 32px; min-width: 150px; background: #fff; border: 1px solid var(--tc-border);
    border-radius: 16px; box-shadow: var(--tc-shadow); animation: tccal-pop-in .45s ease backwards;
}
.tccal-climate-stat:nth-child(2) { animation-delay: .08s; }
@keyframes tccal-pop-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.tccal-climate-icon { font-size: 1.8rem; line-height: 1; }
.tccal-climate-value { font-size: 1.7rem; font-weight: 700; color: var(--tc-green); font-variant-numeric: tabular-nums; }
.tccal-climate-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tc-muted); font-weight: 600; }

.tccal-a-faire { font-size: 1.05rem; line-height: 1.65; color: var(--tc-text); max-width: 760px; margin: 0 auto 32px; text-align: left; }

/* ── Sections génériques ──────────────────────────────────────────────────── */
.tccal-section { margin-bottom: 36px; }
.tccal-section-title { font-size: 1.25rem; font-weight: 700; color: var(--tc-green); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.tccal-section-note { font-size: .85rem; color: var(--tc-muted); margin: 0 0 16px; }

.tccal-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

/* Card sagra — v1.5.2 : devient un <a> cliquable vers la fiche TC Lieu Registry
   dès qu'une fiche existe (sinon reste un <div> non cliquable, comportement
   identique à .tccal-lieu-card / .tcann-card pour cohérence visuelle).
   v1.5.3 : score IA + verdict + 1 point fort/faible, tirés des metas de la
   fiche générée (_tcfl_score_global, _tcfl_verdict, _tcfl_points_forts/
   _points_faibles) — voir tccal_render_sagre_card(). */
.tccal-sagre-card {
    display: block; background: #fff; border: 1px solid var(--tc-border); border-radius: var(--tc-radius);
    overflow: hidden; box-shadow: var(--tc-shadow); text-decoration: none; color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
a.tccal-sagre-card:hover { transform: translateY(-3px); box-shadow: var(--tc-shadow-hover); }
.tccal-sagre-card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tc-bg); }
.tccal-sagre-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
a.tccal-sagre-card:hover .tccal-sagre-card-img img { transform: scale(1.04); }
.tccal-sagre-score {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(20,15,8,.78); color: #fff; backdrop-filter: blur(2px);
    font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
    padding: 3px 9px; border-radius: 20px;
}
.tccal-sagre-score::before { content: "★"; color: var(--tc-gold); font-size: .85em; }
.tccal-sagre-card-body { padding: 18px 20px; }
.tccal-sagre-nom { margin: 0 0 6px; font-size: 1.05rem; color: var(--tc-text); }
.tccal-sagre-village { margin: 0 0 8px; font-size: .85rem; color: var(--tc-terracotta); font-weight: 600; }
.tccal-sagre-desc { margin: 0; font-size: .9rem; color: var(--tc-muted); line-height: 1.5; }
.tccal-sagre-point { margin: 8px 0 0; font-size: .82rem; line-height: 1.4; }
.tccal-sagre-point--fort { color: var(--tc-green); }
.tccal-sagre-point--faible { color: var(--tc-terracotta); }
.tccal-sagre-cta { display: block; margin-top: 10px; font-size: .82rem; font-weight: 700; color: var(--tc-green); }

.tccal-lieu-card {
    display: block; background: #fff; border: 1px solid var(--tc-border); border-radius: var(--tc-radius);
    overflow: hidden; box-shadow: var(--tc-shadow); text-decoration: none; color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
.tccal-lieu-card:hover { transform: translateY(-3px); box-shadow: var(--tc-shadow-hover); }
.tccal-lieu-card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tc-bg); }
.tccal-lieu-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tccal-lieu-card:hover .tccal-lieu-card-img img { transform: scale(1.04); }
.tccal-lieu-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 700; color: var(--tc-gold); background: var(--tc-bg); }
.tccal-lieu-card-body { padding: 14px 16px; }
.tccal-lieu-chip { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; background: var(--tc-bg); color: var(--tc-terracotta); border-radius: 4px; padding: 2px 8px; margin-bottom: 6px; font-weight: 600; }
.tccal-lieu-card-title { margin: 0; font-size: 1rem; color: var(--tc-text); }

/* ── Récapitulatif annuel des sagre — classé par mois (grille de cartes-mois) ──
   v1.5.4 : chaque sagra devient un lien vers sa fiche quand elle existe (voir
   tccal_get_lieu_for_sagre() côté PHP, même logique que la card). ── */
.tccal-recap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.tccal-recap-month {
    background: #fff; border: 1px solid var(--tc-border); border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow); padding: 18px 20px;
}
.tccal-recap-month-title {
    margin: 0 0 12px; font-size: 1.05rem; color: var(--tc-green);
    border-bottom: 2px solid var(--tc-gold); padding-bottom: 8px;
}
.tccal-recap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tccal-recap-list li { font-size: .88rem; color: var(--tc-text); line-height: 1.45; }
.tccal-recap-periode { color: var(--tc-muted); font-size: .9em; }
.tccal-recap-link { color: var(--tc-green); text-decoration: none; }
.tccal-recap-link:hover { color: var(--tc-terracotta); text-decoration: underline; }

.tccal-related-card {
    display: block; background: #fff; border: 1px solid var(--tc-border); border-radius: var(--tc-radius);
    overflow: hidden; box-shadow: var(--tc-shadow); text-decoration: none; color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
.tccal-related-card:hover { transform: translateY(-3px); box-shadow: var(--tc-shadow-hover); }
.tccal-related-card-img { aspect-ratio: 16 / 10; overflow: hidden; }
.tccal-related-card-img img { width: 100%; height: 100%; object-fit: cover; }
.tccal-related-card-title { margin: 0; padding: 14px 16px; font-size: .98rem; color: var(--tc-text); }

.tccal-hub-card-grid { align-items: stretch; }
.tccal-widget-block { border-radius: var(--tc-radius); overflow: hidden; box-shadow: var(--tc-shadow); }

.tccal-faq-block { margin: 8px 0 0; }
.tccal-affil-notice { font-size: .8rem; color: var(--tc-muted); margin-top: 24px; }

@media (max-width: 640px) {
    .tccal-banner { aspect-ratio: 16 / 9; }
    .tccal-climate-stat { min-width: 130px; padding: 14px 22px; }
    .tccal-card-grid { grid-template-columns: 1fr; }
    .tccal-recap-grid { grid-template-columns: 1fr; }
}