/* ═══════════════════════════════════════════════════════════════════
   Cité de la Chicorée — CSS complémentaire
   Couleur principale : brun chicorée #7a4a1e
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --chic:         #7a4a1e;
    --chic-dark:    #4a2a0a;
    --chic-pale:    #f5ece0;
    --chic-mid:     #a0622a;
    --chic-gold:    #c8963c;
}

/* col2 desktop */
@media (min-width: 900px) {
    .col2 { width: 120%; }
}

/* ── Sidebar chicorée ──────────────────────────────────────────── */
.sidebar--chic { background: var(--chic-dark); }
.sidebar--chic .s-val { color: #f0d080; }
.sidebar--chic .nav-item.active { background: rgba(255,255,255,0.15); }
.sidebar--chic .nav-item:hover  { background: rgba(255,255,255,0.08); }

/* ── Mobile header ─────────────────────────────────────────────── */
.mobile-header--chic { background: var(--chic-dark); }
.bottom-nav--chic .bnav-item.active { color: var(--chic); }

/* ── Bouton retour ─────────────────────────────────────────────── */
.nav-item--back {
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    border: 1px solid rgba(255,255,255,0.12);
}
.nav-item--back:hover { color: white; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }
.nav-item--back .nav-icon { font-size: 16px; }
.nav-separator { height: 1px; background: rgba(255,255,255,0.1); margin: 4px 12px 8px; }

/* ── Hero ──────────────────────────────────────────────────────── */
.hero--chic {
    background-color: #c8a87a;
    background-image: url('banniere.png');
    background-size: cover;
    background-position: center 75%;
}
.hero--chic .hero-title span { color: #f0d080; }
.hero--chic .hero-badge-pill { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.25); }

/* ── Card accent ────────────────────────────────────────────────── */
.card-accent--chic {
    background: var(--chic-pale);
    border-left-color: var(--chic);
}
.card-accent--chic .anecdote-text { color: var(--chic-dark); }

/* ── Stats bar ──────────────────────────────────────────────────── */
.chic-stats-bar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; margin-bottom: 20px;
}
@media (max-width: 899px) { .chic-stats-bar { grid-template-columns: repeat(2, 1fr); } }
.chic-stat-item {
    background: var(--white); border-radius: var(--radius);
    padding: 14px 10px; text-align: center; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 4px;
}
.csi-val { font-size: 20px; font-weight: 700; color: var(--chic); }
.csi-lbl { font-size: 11px; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.3px; }

/* ── Note / avis ────────────────────────────────────────────────── */
.avis-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 10px; margin-bottom: 16px;
}
@media (min-width: 900px) { .avis-grid { grid-template-columns: 1fr 1fr; } }
.avis-card {
    background: var(--white); border-radius: var(--radius);
    padding: 14px 16px; box-shadow: var(--shadow);
    border-left: 3px solid var(--chic);
}
.avis-author { font-size: 13px; font-weight: 600; color: var(--chic); margin-bottom: 4px; }
.avis-date   { font-size: 11px; color: var(--gray-400); margin-bottom: 6px; }
.avis-text   { font-size: 13px; color: var(--gray-600); line-height: 1.55; font-style: italic; }

/* ── Note globale ───────────────────────────────────────────────── */
.note-card {
    display: flex; align-items: center; gap: 20px;
    background: var(--chic-pale); border-radius: var(--radius);
    padding: 16px 20px; margin-bottom: 16px;
    border: 1.5px solid rgba(122,74,30,0.2);
}
.note-big { font-size: 48px; font-weight: 800; color: var(--chic); line-height: 1; }
.note-stars { font-size: 22px; margin-bottom: 4px; }
.note-count { font-size: 13px; color: var(--gray-600); }

/* ── Totemus CTA ────────────────────────────────────────────────── */
.totemus-cta {
    display: flex; align-items: center; gap: 16px;
    background: var(--chic-dark); border-radius: var(--radius);
    padding: 18px 20px; text-decoration: none;
    transition: opacity 0.2s;
    margin-bottom: 12px;
}
.totemus-cta:hover { opacity: 0.88; }
.totemus-icon { font-size: 36px; flex-shrink: 0; }
.totemus-body { flex: 1; }
.totemus-title { font-size: 15px; font-weight: 700; color: white; margin-bottom: 4px; }
.totemus-desc  { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.4; }
.totemus-arrow { font-size: 20px; color: #f0d080; font-weight: 700; flex-shrink: 0; transition: transform 0.2s; }
.totemus-cta:hover .totemus-arrow { transform: translateX(4px); }

/* ── Urgences ───────────────────────────────────────────────────── */
.urgences-card { display: flex; gap: 0; padding: 0; overflow: hidden; }
.urgence-item  { flex: 1; text-align: center; padding: 16px 8px; border-right: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: 4px; }
.urgence-item--last { border-right: none; }
.urgence-num { font-size: 24px; font-weight: 700; color: #c0392b; }
.urgence-lbl { font-size: 10px; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.3px; }

/* ── Crédit ─────────────────────────────────────────────────────── */
.chic-credit {
    font-size: 13px; color: var(--gray-600); line-height: 1.6;
    background: var(--gray-100); box-shadow: none;
    border: 0.5px solid var(--gray-200);
}

/* ── Desktop hero override ──────────────────────────────────────── */
@media (min-width: 900px) {
    .section.active { display: block; width: 100%; }
    .hero--chic {
        min-height: 380px;
        background-position: center 75%;
    }
}