/* =========================================================
   BASELINE-VEILLE.CSS
   Feuille complémentaire à assets/css/crayola.css
   Ne redéfinit jamais les règles d'origine : n'ajoute que
   les composants absents du template (stats, timeline,
   signaux faibles, agenda) et deux correctifs liés à
   l'absence des assets image (logo, icône de citation).
   Charger APRÈS crayola.css.
   ========================================================= */

/* ── CORRECTIF : hero à une colonne (pas de visuel 7metatrends.svg équivalent) ── */
.cr-hero--solo {
    grid-template-columns: 1fr;
    max-width: 900px;
}

/* ── CORRECTIF : guillemet de citation en CSS (pas de quote_open.svg fourni) ── */
.cr-quote--dark::before,
.cr-quote--white::before {
    content: '\201C';
    background-image: none;
    width: auto;
    height: auto;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 74px;
    font-weight: 900;
    line-height: 1;
    color: var(--cr-red);
    opacity: .35;
    top: -18px;
    left: -6px;
}
.cr-quote--white::before { color: var(--cr-white); opacity: .5; }

/* ── COMPOSANT : bandeau de chiffres clés (dans le hero) ── */
.cr-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,.15);
}
.cr-stats__num {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 900;
    color: var(--cr-red);
    line-height: 1;
    margin-bottom: 10px;
}
.cr-stats__lab { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.8); }
.cr-stats__src { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 8px; text-transform: uppercase; letter-spacing: .04em; }

/* ── COMPOSANT : encart "Ce que ça change pour Baseline" (variante carte) ── */
.cr-action {
    background: #FBEDEF;
    border-radius: 16px;
    padding: 26px 28px;
}

/* ── COMPOSANT : frise des sorties modèles ── */
.cr-timeline { width: 100%; margin: 6px 0 4px; }
.cr-timeline__wrap { position: relative; padding-top: 8px; }
.cr-timeline svg { width: 100%; height: auto; display: block; }
.cr-timeline__cap {
    display: flex; justify-content: space-between;
    font-size: 11px; font-weight: 800; color: var(--cr-dark); opacity: .4;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}
.tl-date { font-size: 12.5px; font-weight: 900; fill: var(--cr-red); }
.tl-label { font-size: 11.5px; font-weight: 700; fill: var(--cr-dark); }

/* ── COMPOSANT : signaux faibles ── */
.cr-signals { padding: 0 var(--cr-pad) 100px; }
.cr-signals__label {
    font-size: 12px; font-weight: 900; color: var(--cr-red);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px;
}
.cr-signals__title {
    font-size: clamp(22px, 2.8vw, 32px); font-weight: 900; color: var(--cr-dark);
    margin-bottom: 36px; max-width: 700px;
}
.cr-signal-item {
    display: flex; gap: 28px; padding: 22px 0;
    border-top: 1px solid rgba(0,42,50,.12);
}
.cr-signal-item:last-child { border-bottom: 1px solid rgba(0,42,50,.12); }
.cr-signal-item__date {
    font-size: 12px; font-weight: 800; color: var(--cr-red);
    text-transform: uppercase; letter-spacing: .03em;
    width: 120px; flex-shrink: 0; padding-top: 3px;
}
.cr-signal-item h4 { font-size: 17px; font-weight: 800; color: var(--cr-dark); margin-bottom: 6px; }
.cr-signal-item p { font-size: 14.5px; line-height: 1.5; color: #3a3a3a; }

/* ── COMPOSANT : agenda août ── */
.cr-watch {
    background: var(--cr-dark);
    color: var(--cr-white);
    padding: 70px var(--cr-pad);
}
.cr-watch__label {
    font-size: 12px; font-weight: 900; color: var(--cr-red);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px;
}
.cr-watch__title { font-size: clamp(24px, 3vw, 34px); font-weight: 900; margin-bottom: 40px; }
.cr-watch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 48px; }
.cr-watch-item { display: flex; gap: 16px; }
.cr-watch-item__date {
    font-size: 12px; font-weight: 800; color: var(--cr-red);
    width: 76px; flex-shrink: 0; padding-top: 2px; text-transform: uppercase;
}
.cr-watch-item p { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.85); }
.cr-watch-item p b { color: var(--cr-white); font-weight: 800; }

/* ── RESPONSIVE (composants ajoutés uniquement) ── */
@media (max-width: 900px) {
    .cr-stats { grid-template-columns: 1fr 1fr; }
    .cr-watch-grid { grid-template-columns: 1fr; }
    .cr-signal-item { flex-direction: column; gap: 6px; }
    .cr-signal-item__date { width: auto; }
}