/* ==========================================================================
   calendar-year-shared.css — patterns visuais compartilhados (BR)
   Porte fiel do calendar-year.css/calendrier.css/climate-heatmap.css do site
   piloto FR (joursouvrables.fr) para o contadordeprazo.com.br.

   Inclui:
   - .cm-tool-actions (barra de exportação Imprimir/PDF/Compartilhar)
   - .cal-section-title (título de seção sem decoração)
   - .cal-table-data (tabela rica para listagens)
   - .year-sectoral-section (seção setorial flat)
   - .cal-months-with-holidays + .cf-month-cell (rowspan agrupado)
   - .dynamic-facts-box (override flat — sem card por seção)
   - .facts-list, .two-col-grid-list, .holiday-date
   - .agro-badge, .agro-legend
   - .lunar-year-grid, .lunar-month-card (override harmonizado com FR)
   - .cal-year-hero (hero azul pleno — usado em dias-uteis.php?modo=mes)
   - .climate-heatmap (heatmap 5 regiões BR)

   Carregado APENAS pelas páginas reformadas (calendario.php?ano,
   dias-uteis.php?ano, dias-uteis.php?mes). Não impacta o resto do site.
   ========================================================================== */


/* ==========================================================================
   CAL-SECTION-TITLE — título de seção sobrio, sem sublinhado decorativo.
   ========================================================================== */
.cal-section-title {
    margin-top: 0;
    margin-bottom: 14px;
    padding-bottom: 0;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--text-color, #1d1d1f);
}
.cal-section-title::after { content: none; }


/* ==========================================================================
   CAL-TABLE-DATA — tabela rica para listagens (feriados, prolongados, etc).
   ========================================================================== */
.cal-table-data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #d9e4f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.cal-table-data thead th {
    background: linear-gradient(180deg, #edf6ff 0%, #dcecff 100%);
    color: #143252;
    font-weight: 800;
    font-size: 0.92rem;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid #c9dbef;
}

.cal-table-data th,
.cal-table-data td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #e6eef7;
}

.cal-table-data tbody tr:nth-child(even) {
    background: #f9fcff;
}

.cal-table-data tbody tr:last-child td {
    border-bottom: 0;
}

.cal-table-data .cal-table-date {
    font-weight: 600;
    white-space: nowrap;
    color: #0071e3;
}

.cal-table-data td:first-child {
    width: 80px;
    min-width: 80px;
}

body.dark-mode .cal-table-data {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
body.dark-mode .cal-table-data thead th {
    background: linear-gradient(180deg, rgba(100, 181, 255, 0.12) 0%, rgba(100, 181, 255, 0.06) 100%);
    color: #f5f5f7;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .cal-table-data th,
body.dark-mode .cal-table-data td {
    border-bottom-color: rgba(255, 255, 255, 0.05);
    color: #f5f5f7;
}
body.dark-mode .cal-table-data tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}
body.dark-mode .cal-table-data .cal-table-date { color: #64b5ff; }

/* Wrapper para scroll horizontal em mobile */
.cal-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
    margin: 12px 0 20px;
}

@media (max-width: 720px) {
    .cal-table-data {
        font-size: 0.92rem;
    }
    .cal-table-data th,
    .cal-table-data td {
        padding: 10px 12px;
    }
}


/* ==========================================================================
   CM-TOOL-ACTIONS — barra de exportação sob o calendário.
   Padrão unificado: 3 botões CTA em grid, head label discreto.
   ========================================================================== */
.cm-tool-actions {
    margin-top: 18px;
    padding: 14px 14px 12px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    box-sizing: border-box;
}
.cm-tool-actions__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.cm-tool-actions__head i { color: #0071e3; }
.cm-tool-actions__buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
/* Override .btn-action legacy para padrão FR */
.cm-tool-actions__buttons .btn-action {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    color: #0f172a !important;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease !important;
    text-align: left;
    box-shadow: none !important;
    width: auto !important;
    min-height: 0 !important;
    font-weight: 400 !important;
    font-size: inherit !important;
}
.cm-tool-actions__buttons .btn-action:hover,
.cm-tool-actions__buttons .btn-action:focus-visible {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-color: rgba(0, 113, 227, 0.4) !important;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.12) !important;
    transform: translateY(-1px) !important;
    outline: none;
    color: #0f172a !important;
}
.cm-tool-actions__buttons .btn-action .icon {
    flex-shrink: 0;
    color: #0071e3;
    display: inline-flex;
    align-items: center;
    font-size: 1em !important;
}
.cm-tool-actions__buttons .btn-action.btn-print .icon { color: #0071e3; }
.cm-tool-actions__buttons .btn-action.btn-custom-pdf .icon { color: #dc2626; }
.cm-tool-actions__buttons .btn-action.btn-share .icon { color: #0071e3; }
.cm-tool-actions__label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.cm-tool-actions__label strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}
.cm-tool-actions__label small {
    font-size: 0.72rem;
    font-weight: 500;
    color: #64748b;
    margin-top: 2px;
}

body.dark-mode .cm-tool-actions {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .cm-tool-actions__head { color: #aeaeb2; }
body.dark-mode .cm-tool-actions__head i { color: #64b5ff; }
body.dark-mode .cm-tool-actions__buttons .btn-action,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-print,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-custom-pdf,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-share {
    background: #1c1c1e !important;
    background-color: #1c1c1e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f5f7 !important;
}
body.dark-mode .cm-tool-actions__buttons .btn-action:hover,
body.dark-mode .cm-tool-actions__buttons .btn-action:focus-visible,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-print:hover,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-custom-pdf:hover,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-share:hover {
    background: #2c2c2e !important;
    background-color: #2c2c2e !important;
    border-color: rgba(100, 177, 255, 0.4) !important;
    box-shadow: 0 4px 12px rgba(100, 177, 255, 0.18) !important;
    color: #f5f5f7 !important;
}
body.dark-mode .cm-tool-actions__buttons .btn-action .icon { color: #64b5ff; }
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-custom-pdf .icon { color: #ff6b6b; }
body.dark-mode .cm-tool-actions__label strong { color: #f5f5f7; }
body.dark-mode .cm-tool-actions__label small { color: #aeaeb2; }

@media (max-width: 720px) {
    .cm-tool-actions__buttons { grid-template-columns: 1fr; }
}

/* Variante --year : mode ano, alinhada ao calendário (full width). */
.cm-tool-actions--year {
    width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
    box-sizing: border-box;
}


/* ==========================================================================
   AGRO-BADGE — pastilhas para calendário agrícola (mode ano).
   ========================================================================== */
.agro-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
}

.agro-badge--S { background: #34c759; } /* Semeadura = verde */
.agro-badge--C { background: #ff9500; } /* Colheita = laranja */
.agro-badge--F { background: #af52de; } /* Floração = roxo */
.agro-badge--D { background: #007aff; } /* Desenvolvimento = azul */
/* Bump 2026-05-16: corrige BUG - dados PT usam P (Plantio) mas CSS so tinha S. */
.agro-badge--P { background: #34c759; } /* Plantio = verde (mesma cor que S/Semeadura) */
/* Saisonal Alimentos: H=alta safra (laranja), A=disponivel (verde), L=entressafra (ambar). */
.agro-badge--H { background: #ff9500; } /* Pico/Alta safra */
.agro-badge--A { background: #34c759; } /* Disponivel/regional */
.agro-badge--L { background: #d97706; color: #fff8e6; } /* Entressafra/estoque */
.agro-badge--idle { background: #e5e5ea; color: #8e8e93; }

body.dark-mode .agro-badge--idle { background: #3a3a3c; color: #98989d; }

/* Bump 2026-05-16: Matriz agricola compacta (porting werktagerechner.de + joursouvrables.fr). */
.agro-matrix-compact { font-size: 0.85rem; }
.agro-matrix-compact thead th { padding: 6px 3px; font-size: 0.78rem; }
.agro-matrix-compact tbody td { padding: 4px 3px; text-align: center; }
.agro-matrix-compact tbody td:first-child { text-align: left; padding-left: 8px; }
.agro-matrix-compact .agro-badge { width: 22px; height: 22px; font-size: 0.68rem; }
.agro-matrix-compact .agro-regions-col {
    font-size: 0.74rem;
    text-align: left;
    color: #475569;
    padding-left: 8px;
    max-width: 220px;
    white-space: normal;
    line-height: 1.3;
}
.agro-matrix-compact .agro-col-current { background: #fff7e6; }
body.dark-mode .agro-matrix-compact .agro-regions-col { color: #94a3b8; }
body.dark-mode .agro-matrix-compact .agro-col-current { background: rgba(255, 149, 0, 0.08); }

.agro-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin: 6px 0 16px;
    font-size: 0.86rem;
    color: var(--secondary-color, #6e6e73);
    align-items: center;
}

.agro-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.dark-mode .agro-legend { color: #aeaeb2; }


/* ==========================================================================
   YEAR-SECTORAL-SECTION — espacamento entre seções setoriais.
   Flat (sem card próprio). O wrapper-article externo fornece o cadre visual.
   ========================================================================== */
.year-sectoral-section {
    margin: 36px 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.year-sectoral-section > h2.cal-section-title {
    margin-top: 0;
    margin-bottom: 14px;
}

.year-sectoral-section > p {
    margin-top: 0;
    margin-bottom: 14px;
    line-height: 1.55;
    color: #475569;
}

body.dark-mode .year-sectoral-section > p {
    color: #aeaeb2;
}


/* ==========================================================================
   CAL-MONTHS-WITH-HOLIDAYS — tabela com rowspan agrupando por mês.
   ========================================================================== */
.cal-months-with-holidays .cf-month-cell {
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 700;
    text-align: left;
    padding: 14px 16px;
    vertical-align: middle;
    border-right: 2px solid #cbd5e1;
}
.cal-months-with-holidays .cf-month-group--first td {
    border-top: 2px solid #cbd5e1;
}
.cal-months-with-holidays tbody tr:first-child td,
.cal-months-with-holidays tbody tr:first-child .cf-month-cell {
    border-top: 0;
}
body.dark-mode .cal-months-with-holidays .cf-month-cell {
    background: rgba(255, 255, 255, 0.06);
    color: #f5f5f7;
    border-right-color: rgba(255, 255, 255, 0.16);
}
body.dark-mode .cal-months-with-holidays .cf-month-group--first td {
    border-top-color: rgba(255, 255, 255, 0.16);
}


/* ==========================================================================
   DYNAMIC-FACTS-BOX (override) — flat, sem card por seção.
   BR tinha card com border-left azul; agora o wrapper-article externo
   fornece o cadre. Cada bloco fica plano para fluxo continuo.
   ========================================================================== */
.dynamic-facts-box {
    background: transparent !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 36px 0 !important;
    box-shadow: none !important;
    transition: none !important;
}
.dynamic-facts-box:hover {
    border-color: transparent;
    box-shadow: none;
}

.dynamic-facts-box > h3 {
    margin: 0 0 6px !important;
    font-size: 1.18rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dynamic-facts-box > p {
    margin: 0 0 16px;
    color: #475569;
    line-height: 1.6;
    font-size: 0.94rem;
}

.dynamic-facts-box ul,
.dynamic-facts-box ol {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.dynamic-facts-box ol {
    counter-reset: facts-counter;
    padding-left: 0;
    list-style: none;
}

.dynamic-facts-box ol > li {
    counter-increment: facts-counter;
    position: relative;
    padding: 12px 14px 12px 52px;
    margin-bottom: 8px;
    background: rgba(15, 23, 42, 0.025);
    border-radius: 10px;
    line-height: 1.5;
    font-size: 0.96rem;
    color: #0f172a;
}
.dynamic-facts-box ol > li::before {
    content: counter(facts-counter);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0071e3, #5ab2ff);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.86rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px -2px rgba(0, 113, 227, 0.5);
}


/* ==========================================================================
   FACTS-LIST — flex rows label/valor, divider hairline.
   ========================================================================== */
.dynamic-facts-box .facts-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    line-height: 1.4;
    color: #1d1d1f;
    font-size: 0.96rem;
}
.dynamic-facts-box .facts-list li:last-child { border-bottom: 0; }
.dynamic-facts-box .facts-list li > strong:first-child {
    flex: 0 0 auto;
    min-width: 200px;
    color: #475569;
    font-weight: 600;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dynamic-facts-box .facts-list li > strong + * {
    color: #0f172a;
}

@media (max-width: 600px) {
    .dynamic-facts-box .facts-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .dynamic-facts-box .facts-list li > strong:first-child { min-width: 0; }
}


/* ==========================================================================
   TWO-COL-GRID-LIST — listas em grid (feriados, datas).
   ========================================================================== */
.two-col-grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
}

.two-col-grid-list > li {
    padding: 12px 14px;
    background: rgba(15, 23, 42, 0.025);
    border-radius: 10px;
    line-height: 1.45;
    color: #1d1d1f;
    font-size: 0.94rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.two-col-grid-list > li:hover {
    background: rgba(15, 23, 42, 0.05);
    transform: translateX(2px);
}
.two-col-grid-list > li > strong {
    color: #0f172a;
    display: inline;
    font-weight: 700;
}

.two-col-grid-list > li ul {
    padding-left: 0;
    margin: 6px 0 0;
    color: #475569;
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.two-col-grid-list > li ul li {
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    line-height: 1.4;
}

/* Pill para a data */
.holiday-date {
    display: inline-block;
    padding: 2px 9px;
    background: #0071e3;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
    vertical-align: baseline;
}
.holiday-date time { color: inherit; }

/* Variantes thematic flat — sem card colorido */
.dynamic-facts-box--blue,
.dynamic-facts-box--green,
.dynamic-facts-box--orange,
.dynamic-facts-box--gray,
.dynamic-facts-box--red,
.dynamic-facts-box--yellow,
.dynamic-facts-box--pink,
.dynamic-facts-box--purple { background: transparent !important; }


/* Dark mode dynamic-facts-box */
body.dark-mode .dynamic-facts-box,
body.dark-mode .dynamic-facts-box--blue,
body.dark-mode .dynamic-facts-box--green,
body.dark-mode .dynamic-facts-box--orange,
body.dark-mode .dynamic-facts-box--gray,
body.dark-mode .dynamic-facts-box--red,
body.dark-mode .dynamic-facts-box--yellow,
body.dark-mode .dynamic-facts-box--pink,
body.dark-mode .dynamic-facts-box--purple {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.dark-mode .dynamic-facts-box > h3 { color: #f5f5f7; }
body.dark-mode .dynamic-facts-box > p { color: #aeaeb2; }
body.dark-mode .dynamic-facts-box .facts-list li {
    color: #f5f5f7;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode .dynamic-facts-box .facts-list li > strong:first-child { color: #aeaeb2; }
body.dark-mode .dynamic-facts-box ol > li {
    background: rgba(255, 255, 255, 0.04);
    color: #f5f5f7;
}
body.dark-mode .two-col-grid-list > li {
    background: rgba(255, 255, 255, 0.04);
    color: #f5f5f7;
}
body.dark-mode .two-col-grid-list > li:hover { background: rgba(255, 255, 255, 0.07); }
body.dark-mode .two-col-grid-list > li ul li {
    background: rgba(255, 255, 255, 0.05);
}
body.dark-mode .two-col-grid-list > li ul { color: #aeaeb2; }
body.dark-mode .holiday-date { background: #0a84ff; color: #ffffff; }
/* DARK FIX (audit 2026-06-02): o strong dos itens (ex.: nomes das fases em "Fase principal e dias
   intermediarios") usava color:#0f172a sem override dark, ficando quase preto sobre fundo escuro = ilegivel. */
body.dark-mode .two-col-grid-list > li > strong { color: #f5f5f7; }
body.dark-mode .dynamic-facts-box .facts-list li > strong + * { color: #e2e8f0; }

@media (max-width: 720px) {
    .two-col-grid-list { grid-template-columns: 1fr; }
}


/* ==========================================================================
   LUNAR-YEAR-GRID — cartões mensais das fases da Lua (override harmonizado).
   ========================================================================== */
.lunar-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    margin-top: 16px !important;
}

.lunar-month-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lunar-month-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border-color: rgba(88, 86, 214, 0.4);
}

.lunar-month-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: #5856d6;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.lunar-phase-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
    font-size: 0.88rem;
    color: #475569;
    gap: 8px;
}
.lunar-phase-row:last-child { border-bottom: 0; }

.lunar-phase-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.lunar-icon {
    font-size: 1.18rem;
    line-height: 1;
    flex-shrink: 0;
}

.lunar-info { display: flex; flex-direction: column; min-width: 0; }

.lunar-name {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.86rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lunar-date {
    font-size: 0.82em;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.lunar-phase-row.is-full-moon .lunar-name {
    color: #5856d6;
    font-weight: 700;
}

body.dark-mode .lunar-month-card {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .lunar-month-card:hover {
    border-color: rgba(120, 119, 230, 0.5);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
body.dark-mode .lunar-month-title {
    color: #a5a3f0;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode .lunar-phase-row {
    color: #aeaeb2;
    border-bottom-color: rgba(255, 255, 255, 0.05);
}
body.dark-mode .lunar-name { color: #f5f5f7; }
body.dark-mode .lunar-date { color: #98989d; }
body.dark-mode .lunar-phase-row.is-full-moon .lunar-name { color: #a5a3f0; }


/* ==========================================================================
   CAL-YEAR-HERO — hero azul pleno (usado em dias-uteis.php?modo=mes).
   Para BR não usamos full-bleed (não há body.cal-year-wide); o hero é um
   bloco padrão dentro do container existente.
   ========================================================================== */
/* Neutraliza apenas o CARD VISIVEL do .container automatico de header.php
   (background, border, shadow, padding) — mantem max-width 1000px para que
   toolbar+calendar herdem a mesma largura padrao das secoes editoriais
   (serp-wrapper, tool-aux-wrapper, article-wrapper). O hero escapa para
   full-bleed via 100vw + margin negativa. */
body.tool-calendario main#main > .container,
body.tool-dias-uteis main#main > .container,
body.tool-quinto-dia-util main#main > .container {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
/* Containers internos explicitos (serp-wrapper, tool-aux-wrapper, article-wrapper,
   related-wrapper) voltam ao card branco padrao (background + border + shadow). */
body.tool-calendario main#main > .container > .container,
body.tool-dias-uteis main#main > .container > .container,
body.tool-quinto-dia-util main#main > .container > .container {
    background-color: var(--content-bg, #ffffff) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid var(--border-color, #e5e5e5) !important;
    border-radius: 12px !important;
    padding: 25px !important;
}

/* Suprime o breadcrumb global de header.php quando o hero ja injeta o seu.
   Mantem aria/SEO porque o hero contem o breadcrumb completo com aria-current. */
body.tool-calendario main#main > .container > nav.breadcrumb,
body.tool-dias-uteis main#main > .container > nav.breadcrumb,
body.tool-quinto-dia-util main#main > .container > nav.breadcrumb {
    display: none !important;
}

/* Hero full-bleed: escapa do <div class="container"> via width 100vw + margin
   negativa, igual jfhub-hero do FR. */
.cal-year-hero {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 56px 28px 64px;
    color: #ffffff;
    background:
        radial-gradient(900px 420px at 90% -10%, rgba(255,255,255,0.10) 0, transparent 55%),
        radial-gradient(700px 360px at 0% 110%, rgba(255,255,255,0.06) 0, transparent 55%),
        linear-gradient(135deg, rgba(0, 60, 135, 0.92) 0%, rgba(0, 40, 95, 0.96) 100%),
        linear-gradient(135deg, var(--primary-color, #0071e3) 0%, var(--primary-hover, #005bb5) 100%);
    margin-top: -20px;
    margin-bottom: 24px;
    border-radius: 0;
}
/* Evita scroll horizontal causado pelo 100vw em telas com scrollbar */
html { overflow-x: clip; }
body { overflow-x: clip; }
.cal-year-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 25% 60%, rgba(255,255,255,0.05) 2px, transparent 3px),
        radial-gradient(circle at 75% 30%, rgba(255,255,255,0.04) 2px, transparent 3px);
    background-size: 80px 80px, 100px 100px;
    opacity: 0.6;
    pointer-events: none;
}
.cal-year-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb capsule horizontal (pill glassmorphic) */
.cal-year-hero__breadcrumb {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 5px 13px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 999px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.88);
}
.cal-year-hero__breadcrumb ol {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.cal-year-hero__breadcrumb li {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}
.cal-year-hero__breadcrumb a {
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.18s ease;
}
.cal-year-hero__breadcrumb a:hover,
.cal-year-hero__breadcrumb a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255,255,255,0.6);
}
.cal-year-hero__breadcrumb [aria-current="page"] {
    color: #fff;
    font-weight: 700;
}
.cal-year-hero__breadcrumb-sep {
    color: rgba(255,255,255,0.55);
    font-size: 0.88rem;
    user-select: none;
    line-height: 1;
}

/* Badge capsule (igual breadcrumb FR) */
.cal-year-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 5px 13px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.92);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cal-year-hero__badge i {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85em;
}

.cal-year-hero__title {
    color: #fff;
    font-size: clamp(1.8rem, 3vw + 0.8rem, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 14px;
    text-wrap: balance;
}

.cal-year-hero__lede {
    color: rgba(255,255,255,0.92);
    font-size: clamp(0.96rem, 0.6vw + 0.85rem, 1.08rem);
    line-height: 1.6;
    max-width: 78ch;
    margin: 0;
    font-weight: 400;
}

@media (max-width: 720px) {
    .cal-year-hero { padding: 36px 18px 40px; }
    .cal-year-hero__title { font-size: clamp(1.55rem, 6vw, 2.1rem); }
    .cal-year-hero__lede { font-size: 0.94rem; }
}


/* ==========================================================================
   CLIMATE-HEATMAP — heatmap de 5 macrorregiões do Brasil.
   Tabela aérea, scroll horizontal em mobile.
   ========================================================================== */
.climate-heatmap-wrap {
    margin: 8px 0 22px;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
.climate-heatmap-wrap::-webkit-scrollbar { height: 8px; }
.climate-heatmap-wrap::-webkit-scrollbar-track { background: transparent; }
.climate-heatmap-wrap::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.16);
    border-radius: 8px;
}

.climate-heatmap {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
                 "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}

.climate-heatmap--year {
    /* 240px região + 12 colunas × 64px = 1008px mínimo */
    min-width: 1008px;
}

.climate-heatmap--month {
    min-width: 480px;
}

.climate-heatmap thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 12px 4px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
    text-transform: uppercase;
    vertical-align: middle;
}

.climate-heatmap__corner {
    text-align: left !important;
    padding-left: 16px !important;
    width: 240px;
    min-width: 240px;
}

.climate-heatmap--year .climate-heatmap__col-header {
    width: 64px;
    min-width: 64px;
}

.climate-heatmap__row-header {
    background: #ffffff;
    color: #1d1d1f;
    text-align: left;
    font-weight: 600;
    padding: 14px 16px;
    width: 240px;
    min-width: 240px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    vertical-align: middle;
}

.climate-heatmap tbody tr:last-child .climate-heatmap__row-header,
.climate-heatmap tbody tr:last-child .climate-heatmap__cell {
    border-bottom: 0;
}

.climate-heatmap__region {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.climate-heatmap__city {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: #64748b;
    margin-top: 3px;
    letter-spacing: 0.01em;
}

.climate-heatmap__cell {
    text-align: center;
    padding: 12px 4px;
    font-size: 0.84rem;
    color: #0f172a;
    line-height: 1.18;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.55);
    transition: filter 0.15s ease;
}

.climate-heatmap tbody tr:hover .climate-heatmap__row-header {
    background: #eef2ff;
    color: #1e1b4b;
}
.climate-heatmap tbody tr:hover .climate-heatmap__cell {
    filter: brightness(0.94) saturate(1.15);
}
body.dark-mode .climate-heatmap tbody tr:hover .climate-heatmap__row-header {
    background: rgba(165, 163, 240, 0.12);
    color: #f5f5f7;
}
body.dark-mode .climate-heatmap tbody tr:hover .climate-heatmap__cell {
    filter: brightness(1.05);
}

.climate-heatmap--year .climate-heatmap__cell {
    width: 64px;
    min-width: 64px;
}

.climate-heatmap__max,
.climate-heatmap__min {
    display: block;
    font-variant-numeric: tabular-nums;
}
.climate-heatmap__max {
    font-weight: 800;
    color: #0f172a;
    font-size: 1.05em;
    letter-spacing: -0.02em;
}
.climate-heatmap__min {
    font-weight: 500;
    color: rgba(15, 23, 42, 0.55);
    font-size: 0.78em;
    margin-top: 1px;
}

.climate-heatmap__cell--empty {
    background: #f8fafc;
    color: #cbd5e1;
}

.climate-heatmap--month .climate-heatmap__cell {
    padding: 14px 18px;
    font-size: 0.96rem;
    text-align: center;
}

.climate-heatmap--month .climate-heatmap__cell--label {
    font-weight: 700;
    text-align: left;
    padding-left: 18px;
    letter-spacing: 0.01em;
}

.climate-heatmap__legend {
    margin: 14px 16px 4px;
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.5;
}

.climate-heatmap__legend strong {
    color: #0f172a;
    font-weight: 700;
}

.climate-heatmap__source {
    margin: 4px 0 14px;
    padding: 0 16px;
    font-size: 0.74rem;
    color: #94a3b8;
    font-style: italic;
}

body.dark-mode .climate-heatmap-wrap {
    background: transparent;
    border-color: transparent;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

body.dark-mode .climate-heatmap thead th {
    background: rgba(255, 255, 255, 0.04);
    color: #aeaeb2;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .climate-heatmap__row-header {
    background: #1c1c1e;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .climate-heatmap__region { color: #f5f5f7; }
body.dark-mode .climate-heatmap__city { color: #98989d; }

body.dark-mode .climate-heatmap__cell {
    color: #1d1d1f;
    border-bottom-color: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.06);
}

body.dark-mode .climate-heatmap__legend { color: #aeaeb2; }
body.dark-mode .climate-heatmap__legend strong { color: #f5f5f7; }
body.dark-mode .climate-heatmap__source { color: #6b7280; }

@media (max-width: 880px) {
    .climate-heatmap--year { min-width: 960px; }
    .climate-heatmap__corner,
    .climate-heatmap__row-header { width: 200px; min-width: 200px; }
    .climate-heatmap__region { font-size: 0.84rem; }
    .climate-heatmap__cell { padding: 12px 3px; font-size: 0.78rem; }
    .climate-heatmap--year .climate-heatmap__cell { width: 60px; min-width: 60px; }
}

@media (max-width: 600px) {
    .climate-heatmap--year { min-width: 880px; }
    .climate-heatmap__corner,
    .climate-heatmap__row-header { width: 180px; min-width: 180px; padding: 12px 12px; }
    .climate-heatmap__cell { padding: 10px 2px; font-size: 0.74rem; }
    .climate-heatmap--year .climate-heatmap__cell { width: 56px; min-width: 56px; }
    .climate-heatmap--month .climate-heatmap__cell { font-size: 0.86rem; padding: 11px 12px; }
}

@media print {
    .climate-heatmap-wrap {
        overflow: visible;
        border: 1px solid rgba(0, 0, 0, 0.3);
        box-shadow: none;
        page-break-inside: avoid;
    }
    .climate-heatmap--year,
    .climate-heatmap--month {
        min-width: 0;
        width: 100%;
    }
    .climate-heatmap__cell {
        font-size: 0.74rem;
        padding: 6px 2px;
    }
}


/* ==========================================================================
   CM-TOOL-SHELL — wrapper unificado da ferramenta em mes mode
   (toolbar + 2-col layout de calendar+resumo). Card branco com padding
   interno e separador hairline entre toolbar e calendar.
   ========================================================================== */
.cm-tool-shell {
    margin-top: 16px;
    margin-bottom: 24px;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
.cm-tool-shell__inner {
    background: var(--content-bg, #ffffff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.cm-tool-shell__toolbar {
    margin: 0 0 22px !important;
    padding: 0 0 18px !important;
    /* Hairline separadora entre toolbar e o layout do calendario abaixo */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.cm-tool-shell__body { padding: 0; }
/* Garante margem entre cm-tool-shell e o cm-tool-actions abaixo */
.cm-tool-shell + .cm-tool-actions,
.cm-tool-shell + .container + .cm-tool-actions {
    margin-top: 18px;
}

body.dark-mode .cm-tool-shell__inner {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
body.dark-mode .cm-tool-shell__toolbar {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Override do card branco padrao quando o cm-tool-shell.container existe:
   ele ja eh card por conta propria, evita double-card. */
body.tool-dias-uteis main#main > .container > .container.cm-tool-shell {
    max-width: 1080px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}


/* ==========================================================================
   CM-SERP-INLINE — chips inline para busca SERP (BR).
   ========================================================================== */
.cm-serp-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.cm-serp-inline > li {
    margin: 0;
}
.cm-serp-inline a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: rgba(0, 113, 227, 0.06);
    border: 1px solid rgba(0, 113, 227, 0.2);
    border-radius: 999px;
    color: #0071e3;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.cm-serp-inline a:hover,
.cm-serp-inline a:focus-visible {
    background: rgba(0, 113, 227, 0.12);
    border-color: rgba(0, 113, 227, 0.4);
    transform: translateY(-1px);
    text-decoration: none;
    outline: none;
}

body.dark-mode .cm-serp-inline a {
    background: rgba(100, 181, 255, 0.1);
    border-color: rgba(100, 181, 255, 0.25);
    color: #64b5ff;
}
body.dark-mode .cm-serp-inline a:hover,
body.dark-mode .cm-serp-inline a:focus-visible {
    background: rgba(100, 181, 255, 0.18);
    border-color: rgba(100, 181, 255, 0.5);
}
/* =========================================================================
   tool-article-modern.css — 2026-04-21
   Estilos modernos para as páginas de ferramentas novas (prochain-jour-ouvre,
   dernier-jour-ouvre-du-mois, compte-a-rebours). Complementa legal-visuals.css.
   ========================================================================= */

/* Wrapper principal do conteúdo abaixo do hero */
.tam-article {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 20px;
    color: #1f2937;
    line-height: 1.7;
    font-size: 1.02rem;
}
.tam-article p {
    margin: 0 0 1.1em;
}
.tam-article strong { color: #0b2545; }
.tam-article a {
    color: #0071e3;
    text-decoration: underline;
    text-decoration-color: rgba(0,113,227,0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s;
}
.tam-article a:hover { text-decoration-color: #0071e3; }
.tam-article code {
    background: #f1f5f9;
    color: #0b2545;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.92em;
    font-family: ui-monospace, 'Roboto Mono', Monaco, Consolas, monospace;
    border: 1px solid #e2e8f0;
}
.tam-article pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 18px 22px;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 1.4em 0;
}
.tam-article pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
}

/* H2 moderno com barra lateral em gradiente */
.tam-article h2 {
    position: relative;
    font-size: 1.6rem;
    font-weight: 700;
    color: #0b2545;
    margin: 2.4em 0 0.8em;
    padding: 10px 0 10px 22px;
    line-height: 1.3;
}
.tam-article h2::before {
    content: '';
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, #0071e3 0%, #003f87 100%);
}

/* Tabelas modernas */
.tam-article .table-data,
.tam-article table {
    width: 100%;
    margin: 1.6em 0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    background: #fff;
    border: 1px solid #e2e8f0;
}
.tam-article table thead th {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    color: #0b2545;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 2px solid #dbe3ed;
}
.tam-article table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
}
.tam-article table tbody tr:last-child td { border-bottom: 0; }
.tam-article table tbody tr:hover { background: #f8fbff; }
.tam-article table tbody td strong { color: #0b2545; }

/* Callout boxes — diferenciadas por cor */
.tam-article .info-box--amber,
.tam-article .info-box--blue,
.tam-article .info-box--green,
.tam-article .info-box--red {
    margin: 1.6em 0;
    padding: 18px 22px 18px 60px;
    border-radius: 12px;
    position: relative;
    line-height: 1.6;
}
.tam-article .info-box--amber {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
}
.tam-article .info-box--blue {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #0b2545;
}
.tam-article .info-box--green {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #064e3b;
}
.tam-article .info-box--red {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #7f1d1d;
}
.tam-article [class*='info-box--']::before {
    content: '';
    position: absolute;
    left: 18px; top: 20px;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #fff;
    font-size: 0.95rem;
}
.tam-article .info-box--amber::before { background: #d97706; content: '!'; }
.tam-article .info-box--blue::before  { background: #0071e3; content: 'i'; }
.tam-article .info-box--green::before { background: #059669; content: '✓'; }
.tam-article .info-box--red::before   { background: #dc2626; content: '⚠'; }

.tam-article [class*='info-box--'] h4 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: inherit;
}
.tam-article [class*='info-box--'] p:last-child { margin-bottom: 0; }

/* Steps modernos v3 — grid numerado com gradiente */
.tam-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 2em 0;
    counter-reset: step;
}
.tam-steps__card {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 26px 22px 22px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    counter-increment: step;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tam-steps__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.12);
    border-color: #0071e3;
}
.tam-steps__card::before {
    content: counter(step);
    position: absolute;
    top: -14px; left: 20px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0071e3 0%, #003f87 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(0, 113, 227, 0.3);
}
.tam-steps__title {
    margin: 6px 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0b2545;
}
.tam-steps__desc {
    margin: 0;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.55;
}

/* "What is" header com ícone grande e fundo em gradiente */
.tam-hero-card {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f1ff 50%, #ddeaff 100%);
    border: 1px solid #c7ddfa;
    border-radius: 18px;
    padding: 28px 30px;
    margin: 24px 0 32px;
    box-shadow: 0 4px 20px rgba(0, 113, 227, 0.08);
}
.tam-hero-card__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.tam-hero-card__icon {
    width: 52px; height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #0071e3 0%, #003f87 100%);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 6px 14px rgba(0, 113, 227, 0.25);
}
.tam-hero-card__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0b2545;
}
.tam-hero-card__lead {
    margin: 0 0 18px;
    font-size: 1.08rem;
    line-height: 1.65;
    color: #1e3a5f;
}
.tam-hero-card__lead strong { color: #003f87; }

.tam-hero-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.tam-hero-card__fact {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #d8e4f3;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.94rem;
}
.tam-hero-card__fact-icon {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #dff0ff;
    color: #0071e3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 900;
    margin-top: 1px;
}
.tam-hero-card__fact strong {
    display: block;
    color: #0b2545;
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 0.92rem;
}

/* Dark mode */
body.dark-mode .tam-article { color: #cbd5e1; }
body.dark-mode .tam-article strong { color: #f1f5f9; }
body.dark-mode .tam-article h2 { color: #f1f5f9; }
body.dark-mode .tam-article code {
    background: #1e293b;
    color: #93c5fd;
    border-color: #334155;
}
body.dark-mode .tam-article table {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .tam-article table thead th {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: #f1f5f9;
    border-bottom-color: #334155;
}
body.dark-mode .tam-article table tbody td {
    border-bottom-color: #334155;
    color: #cbd5e1;
}
body.dark-mode .tam-article table tbody tr:hover { background: #273548; }
body.dark-mode .tam-article table tbody td strong { color: #f1f5f9; }
body.dark-mode .tam-steps__card {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .tam-steps__title { color: #f1f5f9; }
body.dark-mode .tam-steps__desc  { color: #94a3b8; }
body.dark-mode .tam-hero-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
}
body.dark-mode .tam-hero-card__title { color: #f1f5f9; }
body.dark-mode .tam-hero-card__lead { color: #cbd5e1; }
body.dark-mode .tam-hero-card__lead strong { color: #f1f5f9; }
body.dark-mode .tam-hero-card__fact {
    background: #273548;
    border-color: #3b4a61;
    color: #cbd5e1;
}
body.dark-mode .tam-hero-card__fact strong { color: #f1f5f9; }
body.dark-mode .tam-hero-card__fact-icon { background: #1d3a5f; color: #93c5fd; }

body.dark-mode .tam-article .info-box--amber { background: #3d2e05; border: 1px solid #92710a; color: #fcd34d; }
body.dark-mode .tam-article .info-box--blue  { background: #0a1d3a; border: 1px solid #1e4a8a; color: #93c5fd; }
body.dark-mode .tam-article .info-box--green { background: #052e25; border: 1px solid #0a6b52; color: #6ee7b7; }
body.dark-mode .tam-article .info-box--red   { background: #3a0a0a; border: 1px solid #8a1f1f; color: #fca5a5; }

/* =========================================================================
   lv-what-is — upgrade visuel moderne (fiches info + résumé « Zoom »).
   Remplace les puces plates par des cartes individuelles avec icône colorée,
   fond dégradé, effet hover et meilleure hiérarchie typographique.
   ========================================================================= */

.lv-what-is {
    position: relative;
    margin: 28px 0;
    padding: 28px 30px;
    background: linear-gradient(140deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05);
}
.lv-what-is::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, #0071e3 0%, #0b57d0 50%, #003f87 100%);
}

.lv-what-is__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.lv-what-is__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0071e3 0%, #003f87 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.3);
    flex-shrink: 0;
}
.lv-what-is__title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0b2545;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.01em;
}
.lv-what-is__lead {
    font-size: 1.02rem;
    line-height: 1.7;
    color: #334155;
    margin: 0 0 18px;
}
.lv-what-is__lead strong {
    color: #0071e3;
    font-weight: 700;
}

/* Cartes d'info individuelles — la vraie amélioration visuelle */
.lv-what-is__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}
.lv-what-is__fact {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    font-size: 0.93rem;
    line-height: 1.5;
    color: #475569;
    transition: transform 0.18s, box-shadow 0.18s;
}
.lv-what-is__fact:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 113, 227, 0.1);
}
.lv-what-is__fact-icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    color: #0071e3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-top: 1px;
}
.lv-what-is__fact > div {
    flex: 1;
    min-width: 0;
}
.lv-what-is__fact strong {
    display: block;
    color: #0b2545;
    font-weight: 700;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
    line-height: 1.25;
}

/* Variations de couleur par position (accent visuel doux sans surcharger) */
.lv-what-is__fact:nth-child(4n+1) .lv-what-is__fact-icon { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #0b57d0; }
.lv-what-is__fact:nth-child(4n+2) .lv-what-is__fact-icon { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #059669; }
.lv-what-is__fact:nth-child(4n+3) .lv-what-is__fact-icon { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; }
.lv-what-is__fact:nth-child(4n+4) .lv-what-is__fact-icon { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #7c3aed; }

/* Dark mode */
body.dark-mode .lv-what-is {
    background: linear-gradient(140deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
}
body.dark-mode .lv-what-is__title { color: #f1f5f9; }
body.dark-mode .lv-what-is__lead { color: #cbd5e1; }
body.dark-mode .lv-what-is__lead strong { color: #60a5fa; }
body.dark-mode .lv-what-is__facts { border-top-color: #334155; }
body.dark-mode .lv-what-is__fact {
    background: #273548;
    border-color: #3b4a61;
    color: #cbd5e1;
}
body.dark-mode .lv-what-is__fact strong { color: #f1f5f9; }
body.dark-mode .lv-what-is__fact-icon {
    background: linear-gradient(135deg, #1d3a5f, #1e3a8a);
    color: #93c5fd;
}

/* Mobile — single column, less padding */
@media (max-width: 640px) {
    .lv-what-is { padding: 22px 18px; margin: 22px 0; }
    .lv-what-is__title { font-size: 1.15rem; }
    .lv-what-is__icon { width: 42px; height: 42px; font-size: 1.2rem; }
    .lv-what-is__lead { font-size: 0.95rem; }
    .lv-what-is__facts { grid-template-columns: 1fr; gap: 10px; }
    .lv-what-is__fact { padding: 12px 14px; }
}

/* =========================================================================
   Standardized Hero Result — applies outside #resultAreaCalc too.
   Used by /dans-*, /il-y-a-* programmatic pages where the original styles
   were scoped only to the main calculator.
   ========================================================================= */
.result-box-highlight {
    width: 100%;
    margin: 0 auto 28px;
}
.result-box-highlight .screen-result-layout {
    width: 100%;
}
.result-summary-block.standardized-result-hero.prazo-standardized-hero {
    width: 100%;
    max-width: 100%;
    min-height: 186px;
    border-radius: 18px;
    border: 1px solid rgba(18, 89, 170, 0.24);
    background: linear-gradient(138deg, #e7f1ff 0%, #f1f7ff 52%, #fbfdff 100%);
    box-shadow: 0 16px 34px rgba(18, 57, 108, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 32px 28px;
    text-align: center;
    box-sizing: border-box;
}
.result-summary-block.standardized-result-hero.prazo-standardized-hero .result-hero-prelude {
    font-size: 1.05rem;
    font-weight: 600;
    color: #355c88;
    text-align: center;
    line-height: 1.4;
}
.result-summary-block.standardized-result-hero.prazo-standardized-hero .result-hero-main-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.result-summary-block.standardized-result-hero.prazo-standardized-hero .highlight-value-refactored {
    font-family: "Noto Sans", "Segoe UI", Roboto, sans-serif;
    font-size: clamp(2.4rem, 5.2vw, 3.5rem);
    font-weight: 800;
    color: #0d47a1;
    line-height: 1;
    letter-spacing: -0.02em;
}
.result-summary-block.standardized-result-hero.prazo-standardized-hero .result-hero-unit,
.result-summary-block.standardized-result-hero.prazo-standardized-hero .weekday-small {
    font-size: 1.08rem;
    font-weight: 700;
    color: #275083;
}
.result-summary-block.standardized-result-hero.prazo-standardized-hero .result-hero-hint {
    font-size: 0.95rem;
    color: #6b84a5;
    font-weight: 500;
}
body.dark-mode .result-summary-block.standardized-result-hero.prazo-standardized-hero {
    background: linear-gradient(138deg, #0f2033 0%, #142a42 52%, #0b1b2e 100%);
    border-color: rgba(147, 197, 253, 0.2);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}
body.dark-mode .result-summary-block.standardized-result-hero.prazo-standardized-hero .result-hero-prelude { color: #93c5fd; }
body.dark-mode .result-summary-block.standardized-result-hero.prazo-standardized-hero .highlight-value-refactored { color: #dbeafe; }
body.dark-mode .result-summary-block.standardized-result-hero.prazo-standardized-hero .result-hero-unit,
body.dark-mode .result-summary-block.standardized-result-hero.prazo-standardized-hero .weekday-small { color: #bfdbfe; }
body.dark-mode .result-summary-block.standardized-result-hero.prazo-standardized-hero .result-hero-hint { color: #9cb4d1; }

@media (max-width: 640px) {
    .result-summary-block.standardized-result-hero.prazo-standardized-hero {
        padding: 24px 18px;
        min-height: 160px;
    }
    .result-summary-block.standardized-result-hero.prazo-standardized-hero .result-hero-prelude { font-size: 0.95rem; }
}

/* Mobile tweaks */
@media (max-width: 640px) {
    .tam-article { padding: 0 16px; font-size: 1rem; }
    .tam-article h2 { font-size: 1.35rem; margin-top: 2em; padding-left: 18px; }
    .tam-hero-card { padding: 22px 18px; }
    .tam-hero-card__header { gap: 12px; }
    .tam-hero-card__icon { width: 44px; height: 44px; font-size: 1.2rem; }
    .tam-hero-card__title { font-size: 1.25rem; }
    .tam-hero-card__lead { font-size: 1rem; }
    .tam-article table thead th,
    .tam-article table tbody td { padding: 10px 12px; font-size: 0.92rem; }
    .tam-steps__card { padding: 22px 18px 18px; }
}
.calendar-month-page { margin-top: 0; }

/* CM-SERP-CARD : panneau « X en bref » au-dessus de l'outil. Direct-answer
   visuel (lead phrase + chips). Focus calendrier (saison, fériés, lune,
   événements) — différencié de jours-ouvres (chiffres business). 100%
   évergreen, valeurs SSR. Largeur ajustée comme le wrapper de l'outil. */
.cm-serp-card {
    margin-top: 14px;
    margin-bottom: 14px;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
body.cal-year-wide main#main > .container .container.cm-serp-card,
body.cal-year-wide > main > .container .container.cm-serp-card {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.cm-serp-card__inner {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 246, 255, 0.94) 100%);
    border: 1px solid rgba(0, 113, 227, 0.18);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 16px rgba(0, 113, 227, 0.06);
}
.cm-serp-card__title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color, #0071e3);
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.cm-serp-card__title i {
    color: var(--primary-color, #0071e3);
    font-size: 0.95em;
}
.cm-serp-card__lead {
    margin: 0 0 14px;
    font-size: 0.96rem;
    line-height: 1.55;
    color: #1f2937;
}
.cm-serp-card__lead strong {
    color: #0f172a;
    font-weight: 700;
}
.cm-serp-card__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cm-serp-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 113, 227, 0.18);
    border-radius: 100px;
    font-size: 0.85rem;
    color: #1f2937;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.cm-serp-card__chip-icon {
    font-size: 0.95em;
    line-height: 1;
}
.cm-serp-card__chip-text strong {
    color: #0f172a;
    font-weight: 700;
}
.cm-serp-card__chip--holiday {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.22);
}
.cm-serp-card__chip--holiday .cm-serp-card__chip-text strong {
    color: #b91c1c;
}
.cm-serp-card__chip--season {
    background: rgba(255, 149, 0, 0.08);
    border-color: rgba(255, 149, 0, 0.24);
}

body.dark-mode .cm-serp-card__inner {
    background: linear-gradient(135deg, rgba(28, 28, 30, 0.92) 0%, rgba(24, 30, 42, 0.94) 100%);
    border-color: rgba(100, 177, 255, 0.22);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
body.dark-mode .cm-serp-card__title { color: #64b5ff; }
body.dark-mode .cm-serp-card__title i { color: #64b5ff; }
body.dark-mode .cm-serp-card__lead { color: #e5eaf2; }
body.dark-mode .cm-serp-card__lead strong { color: #f5f5f7; }
body.dark-mode .cm-serp-card__chip {
    background: #1c1c1e;
    border-color: rgba(100, 177, 255, 0.2);
    color: #e5eaf2;
}
body.dark-mode .cm-serp-card__chip-text strong { color: #f5f5f7; }
body.dark-mode .cm-serp-card__chip--holiday {
    background: rgba(255, 69, 58, 0.12);
    border-color: rgba(255, 69, 58, 0.28);
}
body.dark-mode .cm-serp-card__chip--holiday .cm-serp-card__chip-text strong { color: #fca5a5; }
body.dark-mode .cm-serp-card__chip--season {
    background: rgba(255, 149, 0, 0.14);
    border-color: rgba(255, 149, 0, 0.32);
}

@media (max-width: 720px) {
    .cm-serp-card__inner { padding: 14px; }
    .cm-serp-card__title { font-size: 1rem; }
    .cm-serp-card__lead { font-size: 0.92rem; }
    .cm-serp-card__chip { font-size: 0.82rem; padding: 5px 10px; }
}

/* CM-TOOL-SHELL : wrapper unifié toolbar + calendrier + résumé.
   Largeur ajustée à la combinaison calendrier (660px) + résumé (~340px) +
   gap pour que le wrapper et le toolbar interne alignent visuellement avec
   le contenu (pas de "card vide" qui s'étend trop large). */
.cm-tool-shell {
    margin-top: 16px;
    margin-bottom: 24px;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
/* En cal-year-wide la règle .container .container fixe normalement à 1700px.
   On surcharge avec une spécificité supérieure (ID + classe + body class) pour
   ramener le wrapper de l'outil à la largeur réelle de son contenu. */
body.cal-year-wide main#main > .container .container.cm-tool-shell,
body.cal-year-wide > main > .container .container.cm-tool-shell,
body.cal-year-wide main#main > .container .container.calendar-month-editorial-shell,
body.cal-year-wide > main > .container .container.calendar-month-editorial-shell {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.cm-tool-shell__inner {
    background: var(--content-bg, #ffffff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.cm-tool-shell__toolbar {
    margin: 0 0 14px;
    padding-bottom: 14px;
    /* Hairline plus visible (0.1 au lieu de 0.06) pour bien dessiner la ligne
       séparatrice entre la toolbar et le calendrier dans la shell unifiée. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.cm-tool-shell__body { padding: 0; }

body.dark-mode .cm-tool-shell__inner {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
body.dark-mode .cm-tool-shell__toolbar {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 820px) {
    .cm-tool-shell__inner { padding: 14px; }
}
.calendar-month-nav-shell {
    margin-top: 10px;
    margin-bottom: 14px;
}
.calendar-month-nav-shell .nav-controls {
    justify-content: center;
    margin-bottom: 0;
}
.calendar-month-nav-shell .nav-year-btn span {
    text-transform: none;
    white-space: nowrap;
}
.calendar-month-nav-shell .nav-year-btn-center {
    min-width: 88px;
    justify-content: center;
}
.calendar-month-single-shell {
    margin-top: 0;
    min-width: 0;
    width: 100%;
    max-width: 660px;
}
.calendar-month-single-card {
    margin-bottom: 0;
    padding: 14px;
    overflow: visible;
    cursor: default;
    transition: none;
}
.calendar-month-single-card::before,
.calendar-month-single-card:hover::before {
    display: none !important;
}
.calendar-month-single-card:hover,
.calendar-month-single-card:focus,
.calendar-month-single-card:focus-visible {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border-color: var(--border-color) !important;
    outline: none !important;
    cursor: default;
}
.calendar-month-main-layout {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(300px, 360px);
    column-gap: 24px;
    row-gap: 20px;
    align-items: start;
    justify-content: center;
    width: 100%;
}
body.cal-year-wide .calendar-month-main-layout {
    grid-template-columns: minmax(0, 660px) minmax(300px, 360px) !important;
    column-gap: 24px !important;
    justify-content: center !important;
}
body.cal-year-wide .calendar-month-single-shell {
    max-width: none !important;
    width: 100% !important;
}
.calendar-month-single-shell {
    min-width: 0;
    align-self: start;
}
.calendar-month-summary-col {
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
.calendar-month-grid {
    width: 100%;
    column-gap: 9px;
    row-gap: 9px;
    margin-bottom: 18px;
    padding-right: 0;
    overflow: visible;
}
.calendar-month-grid .calendar-month-weekday {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    padding-bottom: 12px;
    box-sizing: border-box;
    min-width: 0;
    position: relative;
}
/* Faixa azul sous la ligne des en-têtes Lun-Dim (+ Semaine).
   Utilise un ::after positionne qui deborde legerement a gauche/droite
   pour couvrir le column-gap et creer une ligne visuellement continue. */
.calendar-month-grid .calendar-month-weekday::after,
.calendar-month-week-header::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    bottom: 3px;
    height: 2px;
    background: #5ba3f5;
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.7;
}
/* La premiere cellule (Semaine) : faixa commence a l'intérieur pour
   que la ligne n'entre pas dans le bord du card. */
.calendar-month-week-header::after {
    left: 0;
    right: -6px;
}
/* La derniere cellule (Dim) : faixa s'arrete a l'intérieur pour la
   meme raison. */
.calendar-month-grid .calendar-month-weekday:last-of-type::after {
    right: 0;
}
.calendar-month-week-header {
    position: relative;
}
body.dark-mode .calendar-month-grid .calendar-month-weekday::after,
body.dark-mode .calendar-month-week-header::after {
    background: #64b5ff;
    opacity: 0.7;
}
.calendar-month-grid .calendar-month-day {
    min-height: 0; /* copia francês: célula = quadrado do tamanho da coluna (sem 64px fixo que estourava ao estreitar) */
    aspect-ratio: 1;
    border-radius: 6px;
    /* Fundo sutil (igual francês) pra dar contraste ao dia comum sobre o container. */
    background: #f8fafc;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 2px 20px;
    line-height: 1;
    font-size: 1.1rem;
    text-align: center;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    position: relative;
}
body.dark-mode .calendar-month-grid .calendar-month-day {
    background: #28282b;
}
body.cal-year-wide .calendar-month-grid .calendar-month-day {
    aspect-ratio: 1 !important;
    border-radius: 6px !important;
    padding: 5px 2px 20px !important;
    font-size: 1.1rem !important;
}
/* Numéro du jour centré géométriquement, comme dans jours-ouvres mode mes. */
.calendar-month-grid .calendar-month-day > time {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    font-weight: 700;
    display: block;
    width: auto;
    text-align: center;
}
.calendar-month-grid .calendar-month-day {
    position: relative;
}
.calendar-month-grid .calendar-month-day time {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.calendar-month-grid .calendar-month-day.moon-phase-day time {
    font-weight: 700;
}
/* Footer absolu : label férié et badges lune sont tous deux positionnés
   en absolu au bas de la cellule. Le numéro du jour reste centré géométriquement,
   aucune compétition pour l'espace interne. */
.calendar-month-day .calendar-month-day-footer {
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 3px;
    min-height: 0;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    pointer-events: none;
    z-index: 1;
}
.calendar-month-day .holiday-day-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(194, 59, 59, 0.16);
    background: rgba(194, 59, 59, 0.08);
    color: #b33131;
    font-size: 0.52rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
/* Date importante (Épiphanie, Chandeleur, Saint-Valentin...) : pill ambre,
   meme taille que holiday-day-label mais couleur distincte pour eviter la
   confusion avec un ferie. Priorite basse : ne s'affiche que si pas de ferie. */
.calendar-month-day .event-day-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(180, 83, 9, 0.2);
    background: rgba(245, 158, 11, 0.12);
    color: #9a4b05;
    font-size: 0.52rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
body.dark-mode .calendar-month-day .event-day-label {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.14);
}
.calendar-month-day .moon-phase-badges {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
}
.calendar-month-day .moon-phase-badge {
    display: inline-flex;
    /* Só o ícone (emoji), sem círculo: sem fundo, borda, sombra. Menor pra não
       sobrepor o número do dia. Pedido do owner. */
    width: auto;
    height: auto;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
body.dark-mode .calendar-month-day .holiday-day-label {
    color: #ffb0b0;
    border-color: rgba(255, 138, 138, 0.22);
    background: rgba(255, 138, 138, 0.12);
}
body.dark-mode .calendar-month-day .moon-phase-badge {
    border: 0;
    background: transparent;
}
.calendar-month-grid .calendar-month-day.empty {
    background: transparent;
    border: 0;
}

/* Fim de semana (Sab/Dom): bg ligeiramente mais frio (azulado) pra distinguir
   sem ofuscar. Valores portados de joursouvrables calendar-month.css. Usa a
   CLASSE .weekend (locale-safe BR: marca Sab/Dom corretamente), nunca nth-child. */
.calendar-month-grid .calendar-month-day.weekend {
    background: #e8edf3;
    border-color: rgba(15, 23, 42, 0.10);
}
body.dark-mode .calendar-month-grid .calendar-month-day.weekend {
    /* #34343a (igual francês): claramente mais claro que o dia normal #28282b no dark,
       p/ destacar. rgba(255,255,255,0.06) ficava quase igual ao normal depois que o dia
       comum ganhou fundo #28282b. */
    background: #34343a;
    border-color: rgba(255, 255, 255, 0.16);
}

/* ── Colonne Semaine (optionnelle, quand --with-weeks actif) ──────────── */
/* Colonne Semaine élargie (72px) — reste DANS le card, à gauche des 7
   colonnes jours. Largeur suffisante pour le numéro "S52" sans serrer. */
.calendar-month-grid--with-weeks {
    /* Copiado EXATAMENTE do site francês (calendar-month.css): 8 colunas iguais
       minmax(0,1fr). Antes a coluna-semana era minmax(78px/82px,...), cujo MÍNIMO
       de 78/82px estourava o container ao estreitar (encavalamento). Com minmax(0,1fr)
       as 8 colunas encolhem juntas, sem overflow. */
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 9px;
    row-gap: 9px;
}
body.cal-year-wide .calendar-month-grid--with-weeks {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
}
.calendar-month-week-header,
.calendar-month-week-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    color: #64748b;
    border: 0;
    background: transparent;
    padding: 0;
    box-sizing: border-box;
    min-height: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.calendar-month-week-header {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    /* Title case (cohérent avec Lun/Mar/Mer/...) au lieu de UPPERCASE */
    text-transform: none;
    letter-spacing: 0.02em;
    padding-bottom: 10px;
}
.calendar-month-week-cell {
    font-size: 1rem;
    font-weight: 700;
    font-style: normal;
    aspect-ratio: auto;
    min-height: 0;
    cursor: pointer;
    letter-spacing: -0.01em;
    border-radius: 6px;
    /* Tint azul + texto azul claro discreto (#93c5fd) pedido pelo owner em vez do
       azul forte. Valores portados de joursouvrables calendar-month.css. */
    color: #93c5fd;
    background: rgba(0, 113, 227, 0.18);
    border: 1px solid rgba(0, 113, 227, 0.32);
}
.calendar-month-week-cell:hover,
.calendar-month-week-cell:focus-visible {
    background: rgba(0, 113, 227, 0.14);
    color: #0071e3;
    outline: none;
}
/* Row hover effect : JS adds .row-active to week cell + its 7 day cells */
.calendar-month-grid--with-weeks .calendar-month-day.row-active {
    background-color: rgba(0, 113, 227, 0.06);
    border-color: rgba(0, 113, 227, 0.25);
}
.calendar-month-grid--with-weeks .calendar-month-week-cell.row-active {
    background-color: rgba(0, 113, 227, 0.18);
    color: #0071e3;
}
body.dark-mode .calendar-month-week-header,
body.dark-mode .calendar-month-week-cell {
    color: #8e8e93;
}
body.dark-mode .calendar-month-week-cell {
    /* Tint azul mais forte + texto saturado (portado de joursouvrables) :
       segrega a coluna da semana dos dias em dark mode. */
    color: #93c5fd;
    background: rgba(100, 177, 255, 0.20);
    border-color: rgba(100, 177, 255, 0.30);
}
body.dark-mode .calendar-month-week-header {
    color: #aeaeb2;
}
body.dark-mode .calendar-month-week-cell:hover,
body.dark-mode .calendar-month-week-cell:focus-visible {
    background: rgba(100, 177, 255, 0.14);
    color: #64b5ff;
}
body.dark-mode .calendar-month-grid--with-weeks .calendar-month-week-cell.row-active,
body.dark-mode .calendar-month-grid--with-weeks .calendar-month-day.row-active {
    background-color: rgba(100, 177, 255, 0.08);
}
body.dark-mode .calendar-month-grid--with-weeks .calendar-month-week-cell.row-active {
    background-color: rgba(100, 177, 255, 0.2);
    color: #64b5ff;
}

/* ── Bloc « Mois voisins » (sidebar droite) ─────────────────────────── */
.minis-header {
    padding: 2px 0 2px;
    text-align: left;
}
.minis-header__kicker {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0071e3;
    background: rgba(0, 113, 227, 0.08);
    padding: 4px 10px;
    border-radius: 100px;
    margin-bottom: 8px;
}
.minis-header__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1d1d1f;
    letter-spacing: -0.02em;
}

/* ── Groupes mois précédents / suivants ──────────────────────────────── */
.minis-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.minis-group__legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6e6e73;
    padding: 0 2px;
}
.minis-group__arrow {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0071e3;
    line-height: 1;
}
.minis-group__label {
    color: #475569;
}

/* Séparateur fin entre groupes */
.minis-sep {
    border: 0;
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        var(--border-color, rgba(0, 0, 0, 0.12)) 20%,
        var(--border-color, rgba(0, 0, 0, 0.12)) 80%,
        transparent 100%);
    margin: 4px 0;
}

/* ── Mini calendriers (mois précédent + suivant) dans la sidebar ─────── */
.mini-cals-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 0;
}
.mini-cal {
    display: block;
    background: var(--content-bg, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    padding: 12px 12px 14px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.mini-cal:hover {
    border-color: rgba(0, 113, 227, 0.35);
    box-shadow: 0 4px 14px -6px rgba(0, 113, 227, 0.25);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}
.mini-cal__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    text-transform: capitalize;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.mini-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    font-variant-numeric: tabular-nums;
}
.mini-cal__wd {
    font-size: 0.64rem;
    font-weight: 700;
    color: #94a3b8;
    text-align: center;
    padding: 2px 0 6px;
    text-transform: uppercase;
}
.mini-cal__wd--we {
    color: #94a3b8;
}
.mini-cal__day {
    font-size: 0.8rem;
    font-weight: 500;
    color: #1f2937;
    text-align: center;
    border-radius: 5px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.mini-cal__day--empty {
    visibility: hidden;
}
.mini-cal__day--sat,
.mini-cal__day--sun {
    color: #1f2937;
    background: transparent;
}
.mini-cal__day--hol {
    background: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
    font-weight: 700;
}
body.dark-mode .mini-cal {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .mini-cal:hover {
    border-color: rgba(100, 177, 255, 0.45);
    box-shadow: 0 4px 14px -6px rgba(10, 132, 255, 0.4);
}
body.dark-mode .mini-cal__title { color: #f5f5f7; }
body.dark-mode .mini-cal__wd,
body.dark-mode .mini-cal__wd--we { color: #8e8e93; }
body.dark-mode .mini-cal__day--sat,
body.dark-mode .mini-cal__day--sun { color: #e5eaf2; background: transparent; }
body.dark-mode .mini-cal__day { color: #e5eaf2; }
body.dark-mode .mini-cal__day--hol {
    background: rgba(255, 69, 58, 0.2);
    color: #ff9a94;
}
body.dark-mode .minis-header__title { color: #f5f5f7; }
body.dark-mode .minis-header__kicker {
    color: #64b5ff;
    background: rgba(100, 177, 255, 0.14);
}
body.dark-mode .minis-group__legend { color: #aeaeb2; }
body.dark-mode .minis-group__label { color: #d1d1d6; }
body.dark-mode .minis-group__arrow { color: #64b5ff; }
body.dark-mode .minis-sep {
    background: linear-gradient(to right,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 20%,
        rgba(255, 255, 255, 0.12) 80%,
        transparent 100%);
}

/* ── Quicklinks sous les mini-mois ───────────────────────────────────── */
.minis-quicklinks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}
.minis-quicklink {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    background: var(--content-bg, #fff);
    color: inherit;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.minis-quicklink:hover,
.minis-quicklink:focus-visible {
    border-color: rgba(0, 113, 227, 0.4);
    background: rgba(0, 113, 227, 0.04);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
    outline: none;
}
.minis-quicklink__icon {
    font-size: 1.05rem;
    line-height: 1;
}
.minis-quicklink__label {
    letter-spacing: -0.01em;
    color: #1d1d1f;
}
body.dark-mode .minis-quicklink {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .minis-quicklink:hover,
body.dark-mode .minis-quicklink:focus-visible {
    border-color: rgba(100, 177, 255, 0.45);
    background: rgba(100, 177, 255, 0.06);
}
body.dark-mode .minis-quicklink__label { color: #f5f5f7; }

.calendar-month-side-summary {
    margin-top: 0;
    align-self: start;
    min-width: 0;
}

/* ========================================================================
   CMSUMM : Résumé du mois — pattern glass card (clone du contadordeprazo
   .du-glass-summary). Card avec rows en micro-cards : label uppercase
   gauche / valeur bold droite. 2 rows linkées vers outils dédiés (jours
   ouvrés du mois, jours fériés de l'année). Ne canibalize aucune ferramenta.
   ======================================================================== */
.cmsumm-card {
    background: #f7faff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 4px 18px rgba(0, 113, 227, 0.09), 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.cmsumm-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-color, #0071e3);
    margin: 0 0 12px;
    padding-bottom: 9px;
    border-bottom: 2px solid rgba(0, 113, 227, 0.1);
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cmsumm-card__title i {
    color: var(--primary-color, #0071e3);
}
.cmsumm-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(110px, 1.05fr);
    align-items: center;
    gap: 10px;
    /* Densité accrue : 6px/10px au lieu de 8px/12px, marge 4px au lieu de 6px,
       pour ramener la hauteur d'une row de ~50px à ~40px (cf. feedback UX). */
    padding: 6px 10px;
    margin-bottom: 4px;
    border: 1px solid rgba(0, 113, 227, 0.11);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    color: inherit;
}
.cmsumm-row:last-child { margin-bottom: 0; }
.cmsumm-row__label {
    font-size: 0.72rem;
    line-height: 1.28;
    color: #5f6b7f;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cmsumm-row__value {
    font-size: 0.92rem;
    line-height: 1.32;
    font-weight: 700;
    text-align: right;
    justify-self: end;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.cmsumm-row__hint {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0;
    text-transform: none;
}
body.dark-mode .cmsumm-row__hint { color: #9ca3af; }
.cmsumm-row--link {
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}
.cmsumm-row--link:hover,
.cmsumm-row--link:focus-visible {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 113, 227, 0.3);
    transform: translateY(-1px);
    text-decoration: none;
    outline: none;
}
.cmsumm-row--link .cmsumm-row__value {
    color: var(--primary-color, #0071e3);
}
.cmsumm-row__chev {
    display: inline-block;
    margin-left: 4px;
    color: rgba(0, 113, 227, 0.5);
    font-weight: 700;
    transition: transform 0.15s ease, color 0.15s ease;
}
.cmsumm-row--link:hover .cmsumm-row__chev,
.cmsumm-row--link:focus-visible .cmsumm-row__chev {
    transform: translateX(3px);
    color: var(--primary-color, #0071e3);
}

/* Dark mode */
body.dark-mode .cmsumm-card {
    background: linear-gradient(135deg, rgba(28, 28, 30, 0.82) 0%, rgba(24, 30, 42, 0.92) 100%);
    border-color: rgba(100, 177, 255, 0.18);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
body.dark-mode .cmsumm-card__title {
    color: #64b5ff;
    border-bottom-color: rgba(100, 177, 255, 0.18);
}
body.dark-mode .cmsumm-card__title i { color: #64b5ff; }
body.dark-mode .cmsumm-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(100, 177, 255, 0.14);
}
body.dark-mode .cmsumm-row__label { color: #aeaeb2; }
body.dark-mode .cmsumm-row__value { color: #f5f5f7; }
body.dark-mode .cmsumm-row--link:hover,
body.dark-mode .cmsumm-row--link:focus-visible {
    background: rgba(100, 177, 255, 0.08);
    border-color: rgba(100, 177, 255, 0.32);
}
body.dark-mode .cmsumm-row--link .cmsumm-row__value { color: #64b5ff; }
body.dark-mode .cmsumm-row__chev { color: rgba(100, 177, 255, 0.5); }
body.dark-mode .cmsumm-row--link:hover .cmsumm-row__chev { color: #64b5ff; }
.calendar-month-summary-box.dynamic-facts-box {
    margin: 0;
    border-left: 0;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    position: sticky;
    top: 14px;
    background:
        radial-gradient(circle at 100% 0, rgba(0, 113, 227, 0.08), transparent 44%),
        var(--light-bg);
}
.calendar-month-summary-box.dynamic-facts-box h3 {
    margin: 0 0 12px;
    font-size: 1.02rem;
    line-height: 1.35;
}
.calendar-month-summary-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: grid;
    gap: 7px;
}
.calendar-month-summary-list li {
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.84);
    font-size: 0.91rem;
    line-height: 1.35;
}
.calendar-month-summary-list li strong {
    color: #1b4f8a;
}
.calendar-month-timeline-list {
    margin-top: 12px;
    margin-bottom: 0;
}
.calendar-month-timeline-layout.has-moon-column {
    grid-template-columns: minmax(0, 1fr) minmax(128px, 32%);
    align-items: start;
}
.calendar-month-timeline-layout .calendar-month-timeline-moon {
    border-left: 1px dashed rgba(0, 0, 0, 0.16);
    border-right: 0;
    padding-left: 12px;
    padding-right: 0;
}
body.cal-hide-luas .calendar-month-timeline-layout.has-moon-column {
    grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 680px) {
    .calendar-month-timeline-layout.has-moon-column {
        grid-template-columns: minmax(0, 1fr);
    }
    .calendar-month-timeline-layout .calendar-month-timeline-moon {
        border-left: 0;
        border-top: 1px dashed rgba(0, 0, 0, 0.16);
        padding-left: 0;
        padding-top: 8px;
    }
}
.calendar-month-seo {
    margin-top: 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card);
    padding: 16px;
}
.calendar-month-seo h2 {
    margin: 0 0 8px;
}
.calendar-month-seo p {
    margin: 8px 0;
    line-height: 1.65;
}
.calendar-month-seo ol {
    margin: 8px 0 0;
    padding-left: 20px;
    line-height: 1.6;
}
.calendar-month-seo ul {
    margin: 8px 0 0;
    padding-left: 20px;
    line-height: 1.6;
}
.calendar-month-seo .calendar-month-history-list {
    list-style: none;
    padding-left: 0;
}
.calendar-month-seo .calendar-month-history-list li {
    margin-bottom: 8px;
}
.calendar-month-seo .calendar-month-history-list strong {
    color: var(--primary-color);
}
.calendar-month-external-tools {
    margin-top: 18px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
    padding: 14px;
}
.calendar-month-external-tools .calendar-month-external-tools-title {
    margin: 0 0 4px;
    font-size: 0.95rem;
    line-height: 1.4;
}
.calendar-month-external-tools .external-note {
    margin: 0 0 12px;
    color: var(--text-muted, #6b7280);
    font-size: 0.8rem;
}
.calendar-month-tools-group,
.calendar-month-see-more-group {
    margin-top: 12px;
}
.calendar-month-tools-group:first-of-type,
.calendar-month-see-more-group:first-of-type {
    margin-top: 0;
}
.calendar-month-external-tools-group-title,
.calendar-month-see-more-group-title {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
}
.calendar-month-external-tools-row,
.calendar-month-see-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.calendar-month-external-tools .calendar-month-link-btn,
.calendar-month-see-more-link {
    display: block;
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 10px 12px;
    text-decoration: none;
    color: #fff !important;
    background: #1f6feb;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
    box-sizing: border-box;
    margin: 0 !important;
    border-bottom: 0 !important;
    overflow-wrap: anywhere;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.calendar-month-external-tools .calendar-month-link-btn .calendar-month-link-label,
.calendar-month-external-tools .calendar-month-link-btn .calendar-month-link-helper {
    display: block;
}
.calendar-month-external-tools .calendar-month-link-btn .calendar-month-link-helper {
    opacity: 0.92;
    font-size: 0.72rem;
    font-weight: 500;
}
.calendar-month-external-tools .calendar-month-link-btn:hover,
.calendar-month-see-more-link:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}
.calendar-month-external-tools .calendar-month-link-btn:focus-visible,
.calendar-month-see-more-link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.calendar-month-external-tools .calendar-month-link-btn.business-days {
    background: #2563eb;
}
.calendar-month-external-tools .calendar-month-link-btn.fifth-day {
    background: #16a34a;
}
.calendar-month-external-tools .calendar-month-link-btn.moon-link {
    background: #5856d6;
}
.calendar-month-external-tools .calendar-month-link-btn.month-holidays-link {
    background: #007aff;
}
.calendar-month-external-tools .calendar-month-link-btn.year-calendar-link {
    background: #334155;
}
.calendar-month-external-tools .calendar-month-link-btn.year-holidays-link {
    background: #0f766e;
}
.calendar-month-external-tools-row--internal {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
body.dark-mode .calendar-month-external-tools {
    background: #1c1f23;
    border-color: #32373e;
}
body.dark-mode .calendar-month-summary-box.dynamic-facts-box {
    border-color: #32373e;
    background:
        radial-gradient(circle at 100% 0, rgba(10, 132, 255, 0.14), transparent 44%),
        #1c1f23;
}
body.dark-mode .calendar-month-summary-list li {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}
body.dark-mode .calendar-month-summary-list li strong {
    color: #8ec4ff;
}
body.dark-mode .calendar-month-external-tools .external-note,
body.dark-mode .calendar-month-external-tools-group-title,
body.dark-mode .calendar-month-see-more-group-title {
    color: #a3acb8;
}
body.dark-mode .calendar-month-external-tools .calendar-month-link-btn {
    color: #eef2f8 !important;
    border-color: rgba(255, 255, 255, 0.16);
}
body.dark-mode .calendar-month-external-tools .calendar-month-link-btn.business-days {
    background: #1d4ed8;
}
body.dark-mode .calendar-month-external-tools .calendar-month-link-btn.fifth-day {
    background: #15803d;
}
body.dark-mode .calendar-month-external-tools .calendar-month-link-btn.moon-link {
    background: #4f46e5;
}
body.dark-mode .calendar-month-external-tools .calendar-month-link-btn.month-holidays-link {
    background: #0369a1;
}
body.dark-mode .calendar-month-external-tools .calendar-month-link-btn.year-calendar-link {
    background: #475569;
}
body.dark-mode .calendar-month-external-tools .calendar-month-link-btn.year-holidays-link {
    background: #0f766e;
}
body.dark-mode .calendar-month-external-tools-row--internal {
    border-top-color: #32373e;
}
body.dark-mode .calendar-month-year-grid {
    background: #1c1f23;
    border-color: #32373e;
}
body.dark-mode .calendar-month-year-link {
    background: rgba(10, 132, 255, 0.14);
    border-color: rgba(10, 132, 255, 0.28);
    color: #8ec4ff;
}
body.dark-mode .calendar-month-year-link.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #eef2f8;
}
body.dark-mode .calendar-month-see-more-link {
    border-color: #3a3f47;
    color: #eef2f8;
    background: transparent;
}
body.dark-mode .calendar-month-see-more-link:hover {
    background: rgba(255, 255, 255, 0.06);
}
.calendar-month-seo .calendar-month-other-dates-list {
    list-style: none;
    padding-left: 0;
}
.calendar-month-seo .calendar-month-other-dates-list li {
    margin-bottom: 7px;
}
.calendar-month-seo .calendar-month-other-dates-list strong {
    color: #0f766e;
}
.calendar-month-seo .calendar-month-other-dates-note {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--text-muted, #6b7280);
}
.calendar-month-seo .calendar-month-journey-list li {
    margin-bottom: 8px;
}
.calendar-month-seo .calendar-month-journey-list a {
    font-weight: 700;
}
.calendar-month-faq {
    margin-top: 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card);
    padding: 16px;
}
.calendar-month-faq h2 {
    margin-top: 0;
    margin-bottom: 8px;
}
.calendar-month-faq details {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--bg-color);
}
.calendar-month-faq summary {
    cursor: pointer;
    font-weight: 700;
    padding: 10px 12px;
}
.calendar-month-faq p {
    margin: 0;
    padding: 0 12px 12px;
    line-height: 1.6;
}
.calendar-month-related-tools {
    margin-top: 24px;
    padding-left: 2px;
    padding-right: 2px;
}
.calendar-month-year-grid {
    margin-top: 18px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card);
    padding: 16px;
}
.calendar-month-year-grid h2 {
    margin: 0 0 10px;
}
.calendar-month-year-grid p {
    margin: 0 0 12px;
    line-height: 1.6;
}
.calendar-month-year-grid-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.calendar-month-year-link {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(0, 113, 227, 0.04);
    color: var(--primary-color, #0071e3);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.calendar-month-year-link:hover {
    transform: translateY(-1px);
    filter: brightness(0.98);
}
.calendar-month-year-link.is-active {
    background: #1f6feb;
    border-color: #1f6feb;
    color: #fff;
}
@media (max-width: 768px) {
    .container.calendar-month-nav-shell,
    .container.calendar-month-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .calendar-month-external-tools-row {
        grid-template-columns: 1fr;
    }
    .calendar-month-nav-shell .nav-controls {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .calendar-month-nav-shell .nav-year-btn {
        min-width: 44px !important;
        padding: 0 10px !important;
    }
    .calendar-month-nav-shell .nav-year-btn span {
        font-size: 0.88rem !important;
    }
    .calendar-month-nav-shell .nav-year-btn-center {
        min-width: 76px !important;
    }
    /* Anti-encavalamento mobile (portado de joursouvrables calendar-month.css).
       Causa raiz: em mobile o grid 8-col (coluna Semana + 7 dias) com a coluna
       Semana de largura fixa (minmax 78px) estoura a largura, e posicoes
       implicitas de grid-column/aria-colindex empilham as celulas. Solucao em
       4 passos: (1) remove a coluna Semana do fluxo, (2) forca grid 7-col com
       minmax(0,1fr), (3) reseta grid-column/grid-row para auto em TODOS os
       filhos, (4) re-dimensiona a celula como quadrado. Locale-safe: nao usa
       nth-child, so display:none nas classes da coluna Semana. */
    /* (1) Remove a coluna Semana do fluxo do grid */
    .calendar-month-week-header,
    .calendar-month-week-cell {
        display: none !important;
    }
    /* (2) Forca grid 7-col (sobrepoe a regra 8-col do bloco --with-weeks) */
    .calendar-month-grid,
    .calendar-month-grid--with-weeks,
    body.cal-year-wide .calendar-month-grid,
    body.cal-year-wide .calendar-month-grid--with-weeks {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        column-gap: 4px !important;
        row-gap: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* (3) Reseta grid-column/grid-row auto em todos os filhos. Sem isso o
       auto-flow respeita a posicao das celulas via aria-colindex quando o
       container tem aria-colcount diferente, causando o empilhamento. */
    .calendar-month-grid > *,
    .calendar-month-grid--with-weeks > * {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* (4) Dimensao da celula: quadrado real + altura minima pequena */
    .calendar-month-grid .calendar-month-day,
    body.cal-year-wide .calendar-month-grid .calendar-month-day {
        aspect-ratio: 1 / 1 !important;
        min-height: 38px !important;
        max-height: none !important;
        gap: 3px;
        padding: 4px 2px 14px !important;
    }
    .calendar-month-day .calendar-month-day-footer {
        min-height: 16px;
    }
    .calendar-month-day .moon-phase-badges {
        gap: 2px;
    }
    .calendar-month-day .moon-phase-badge {
        width: auto;
        height: auto;
        font-size: 12px;
    }
}
/* Scaling intermédiaire : quand la colonne calendrier se retrouve serrée
   (résumé ~340px + gap ~24-28px à côté), réduire proportionnellement
   card/cells pour éviter overflow/desalignement. Les décorations (lune
   + label) étant en position absolue, elles ne cassent pas la mise en
   page — seule leur taille se réduit progressivement. */
/* Masque le pill texte du férié sur cellules étroites — le fond coloré
   .holiday + la lista sous le calendrier suffisent. */
@media (max-width: 1180px) {
    .calendar-month-day .holiday-day-label {
        display: none !important;
    }
}
@media (max-width: 820px) {
    .calendar-month-main-layout {
        grid-template-columns: 1fr !important;
    }
    body.cal-year-wide .calendar-month-main-layout {
        grid-template-columns: 1fr !important;
    }
    .calendar-month-side-summary {
        margin-top: 10px;
    }
}

/* ── Panorama: section headings ── */
.calendar-month-seo h2 {
    margin-top: 40px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color, #e2e8f0);
}
.calendar-month-seo h2:first-child {
    margin-top: 0;
}
.calendar-month-seo > p {
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 1rem;
}

/* ── Panorama: season callout — flat (pas de carte propre) ── */
.panorama-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 0;
    border-radius: 0;
    margin: 16px 0;
    background: transparent;
    border: 0;
    color: #173e72;
}
.panorama-callout svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #0c56c8;
}
.panorama-callout strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0c56c8;
    margin-bottom: 3px;
}
.panorama-callout p {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.55;
}
body.dark-mode .panorama-callout {
    background: rgba(26, 58, 110, 0.30);
    border-color: rgba(96, 165, 250, 0.30);
    color: #dcecff;
}
body.dark-mode .panorama-callout strong {
    color: #7cc4ff;
}

/* ── Panorama: stats grid ── */
.panorama-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 20px 0 8px;
}
.panorama-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    border-radius: 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--light-bg, #f8fafc);
    text-align: center;
}
.panorama-stat__icon {
    font-size: 1.5rem;
    line-height: 1;
}
.panorama-stat__value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-color, #0071e3);
    line-height: 1.2;
}
.panorama-stat__label {
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    font-weight: 500;
}
body.dark-mode .panorama-stat {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.2);
}
body.dark-mode .panorama-stat__value {
    color: #7cc4ff;
}

/* ── Panorama: info-boxes — flat (pas de carte propre, fluent dans l'article) ── */
.calendar-month-seo .seo-info-box {
    margin: 16px 0;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.calendar-month-seo .seo-info-box h4 {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 800;
}
.calendar-month-seo .seo-info-box ul,
.calendar-month-seo .seo-info-box ol {
    margin: 0;
    padding-left: 1.3rem;
}
.calendar-month-seo .seo-info-box li {
    margin-bottom: 6px;
    line-height: 1.6;
}
/* Variantes de couleur conservent juste la couleur d'accent du h4/strong
   pour identifier visuellement le type d'info, sans wrapper de carte. */
.calendar-month-seo .seo-info-box--green h4,
.calendar-month-seo .seo-info-box--green strong { color: #0f6d2f; }
.calendar-month-seo .seo-info-box--blue h4,
.calendar-month-seo .seo-info-box--blue strong { color: #0c56c8; }
.calendar-month-seo .seo-info-box--amber h4,
.calendar-month-seo .seo-info-box--amber strong { color: #9a5b00; }
body.dark-mode .calendar-month-seo .seo-info-box--green h4,
body.dark-mode .calendar-month-seo .seo-info-box--green strong { color: #6ee298; }
body.dark-mode .calendar-month-seo .seo-info-box--blue h4,
body.dark-mode .calendar-month-seo .seo-info-box--blue strong { color: #7cc4ff; }
body.dark-mode .calendar-month-seo .seo-info-box--amber h4,
body.dark-mode .calendar-month-seo .seo-info-box--amber strong {
    color: #f5c260;
}

/* ── Panorama: tables ── */
.calendar-month-seo .seo-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0;
}
.calendar-month-seo .seo-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #d9e4f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.calendar-month-seo .seo-table thead th {
    background: linear-gradient(180deg, #edf6ff 0%, #dcecff 100%);
    color: #143252;
    font-weight: 800;
    font-size: 0.93rem;
    text-align: left;
    border-bottom: 1px solid #c9dbef;
    padding: 16px 20px;
}
.calendar-month-seo .seo-table th,
.calendar-month-seo .seo-table td {
    padding: 14px 20px;
    vertical-align: middle;
    border-bottom: 1px solid #e6eef7;
    font-size: 0.92rem;
    line-height: 1.5;
}
.calendar-month-seo .seo-table tbody tr:nth-child(even) {
    background: #f9fcff;
}
.calendar-month-seo .seo-table tbody tr:last-child td {
    border-bottom: 0;
}
body.dark-mode .calendar-month-seo .seo-table {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.25);
}
body.dark-mode .calendar-month-seo .seo-table thead th {
    background: linear-gradient(180deg, #153056 0%, #112544 100%);
    color: #e3efff;
    border-bottom-color: rgba(147, 197, 253, 0.25);
}
body.dark-mode .calendar-month-seo .seo-table th,
body.dark-mode .calendar-month-seo .seo-table td {
    border-bottom-color: rgba(148, 163, 184, 0.18);
    color: #d7e6f7;
}
body.dark-mode .calendar-month-seo .seo-table tbody tr:nth-child(even) {
    background: rgba(148, 163, 184, 0.06);
}

/* ── Panorama: content-card (Como usar) ── */
.calendar-month-seo .content-card {
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--light-bg, #f8fafc);
    margin: 16px 0;
}
.calendar-month-seo .content-card ol {
    margin: 0;
    padding-left: 1.3rem;
}
.calendar-month-seo .content-card li {
    margin-bottom: 8px;
    line-height: 1.65;
}

@media (max-width: 768px) {
    .panorama-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    .calendar-month-seo .seo-table th,
    .calendar-month-seo .seo-table td {
        min-width: 120px;
        padding: 11px 12px;
    }
}

/* ── FAQ styled ── */
.calendar-month-faq h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e5e5;
}
.calendar-month-faq details {
    background: #fff;
    border: 1px solid #e6eef7;
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.calendar-month-faq details[open] {
    border-color: #c5daf8;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.calendar-month-faq summary {
    padding: 14px 18px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1d1d1f;
}
.calendar-month-faq summary::-webkit-details-marker { display: none; }
.calendar-month-faq summary::after {
    content: '+';
    font-size: 1.2rem;
    font-weight: 300;
    color: #0071e3;
    transition: transform 0.2s;
}
.calendar-month-faq details[open] summary::after {
    content: '-';
}
.calendar-month-faq details p {
    padding: 0 18px 14px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #555;
}
body.dark-mode .calendar-month-faq details {
    background: #1c1c1e;
    border-color: #333;
}
body.dark-mode .calendar-month-faq summary {
    color: #f5f5f7;
}
body.dark-mode .calendar-month-faq details p {
    color: #aaa;
}
body.dark-mode .calendar-month-faq summary::after {
    color: #0a84ff;
}
/* ==========================================================================
   calendar-year.css
   Hero compact + layout large pour /calendrier/{year}.
   Reutilise la grammaire visuelle du jfhub-hero (breadcrumb + H1 dans un
   bandeau full-bleed avec gradient bleu), mais en version "slim" (padding
   reduit, pas de lede, pas de countdown, pas de stats-strip en dessous).
   Les elements sous le calendrier passent a la largeur des bands de la
   homepage (inner 1700px). Le calendrier lui-meme garde sa proportion
   actuelle (cap a 1200px, centre).
   ========================================================================== */

/* Empeche le scroll horizontal cause par le hero full-bleed (width: 100vw +
   margin negatif breakout). Applique site-wide sur toute page chargeant ce
   fichier CSS — sans danger pour les pages sans hero. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* -------- HERO COMPACT (full-bleed natif via body.cal-year-wide) --------
   Meme mecanisme que /calendrier/{year} : la page ajoute cal-year-wide
   au body, ce qui libere main + outer container (100%) et permet au hero
   d'occuper 100vw naturellement, colle au subheader sans gap. */
.cal-year-hero {
    position: relative;
    overflow: hidden;
    /* Full-bleed standalone : 100vw + margin negative pour casser le .container
       parent. Fonctionne sans body.cal-year-wide. Pages cal-year-wide gardent
       leur layout (container neutralise) ; pages sans cal-year-wide preservent
       le card du tool (.container reste blanc et seulement le hero deborde). */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* margin-top: 0 — le .container parent retire son padding-top via la regle
       :has(.cal-year-hero), donc le hero colle naturellement au top sans gap. */
    margin-top: 0;
    /* margin-bottom genereux : laisse respirer entre hero et tool, et la
       bordure top du .container reste visible au-dessus du hero (le hero deborde
       horizontalement via 100vw mais respecte le top du container). */
    margin-bottom: 36px;
    padding: 56px 20px 64px;
    color: #ffffff;
    background:
        radial-gradient(900px 420px at 90% -10%, rgba(255,255,255,0.10) 0, transparent 55%),
        radial-gradient(700px 360px at 0% 110%, rgba(255,255,255,0.06) 0, transparent 55%),
        linear-gradient(135deg, rgba(0, 60, 135, 0.92) 0%, rgba(0, 40, 95, 0.96) 100%),
        url("/feriados/assets/hero-bg/hero-homepage.webp") center / cover no-repeat,
        linear-gradient(135deg, var(--primary-color, #0071e3) 0%, var(--hover-color, #005bb5) 100%);
}

/* Quand un cal-year-hero est present dans le .container parent, on cache le
   breadcrumb global de header.php (le hero contient son propre breadcrumb pill
   complet avec aria-current). Evite la duplication. */
main#main > .container:has(.cal-year-hero) > nav.breadcrumb,
main#main > .container:has(.cal-year-hero) > .breadcrumb {
    display: none !important;
}

/* Sur les pages outils sans cal-year-wide : le .container parent devient
   completement transparent (pas de card propre). Le hero colle au subheader
   et le tool interne (calc-main-container, modern-calc-shell, tool-container)
   porte sa propre carte avec ses 4 bordures + radius + shadow. Le card visible
   apparait UNIQUEMENT sous le hero, autour du tool. */
main#main > .container:has(.cal-year-hero) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: none !important;
}

/* Garantit un descollement visuel clair entre le hero et le tool wrapper qui
   suit immediatement (calc-main-container, modern-calc-shell, ou autre conteneur
   interne). Le hero a deja margin-bottom 36px ; on ajoute margin-top sur le tool
   pour eviter tout collapse et offrir un breathing room genereux. */
.cal-year-hero + .container,
.cal-year-hero + .modern-calc-shell,
.cal-year-hero + section,
.cal-year-hero + div {
    margin-top: 32px !important;
}

/* Card styling pour les tool wrappers immédiatement apres cal-year-hero.
   .tool-container (calculateur-heures) a deja son card via style-hub.css.
   .calc-main-container (calculateur-de-delai), .modern-calc-shell (jours-
   ouvrables, jours-francs, calculateur-age) et .calculator-section
   (compteur-de-jours, nombre-de-jours-entre-deux-dates) n'avaient pas de
   card propre, resultaient en "colado" avec le hero. On leur applique le
   meme pattern visuel : background blanc, border subtil, shadow, padding. */
.cal-year-hero ~ .container.calc-main-container,
.cal-year-hero ~ .modern-calc-shell,
.cal-year-hero ~ section.calculator-section {
    background: var(--card-bg, var(--content-bg, #ffffff)) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 18px !important;
    padding: 30px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    max-width: 1000px !important;
    margin: 32px auto 40px !important;
    box-sizing: border-box;
    width: auto !important;
}

@media (max-width: 768px) {
    .cal-year-hero ~ .container.calc-main-container,
    .cal-year-hero ~ .modern-calc-shell,
    .cal-year-hero ~ section.calculator-section {
        padding: 20px 15px !important;
        border-radius: 12px !important;
        margin-top: 24px !important;
    }
}

/* Elements below the tool (result-area, article-wrapper, howto-wrapper,
   related-wrapper, faq-section, etc.) follow the same width as the tool
   (1000px max). Pas de cards visibles obligatoires — seulement l'alignement
   de largeur. Selector aggressif via parent :has(.cal-year-hero) + child direct
   pour garantir le match meme avec specificite/cascade conflits. */
/* Body-class targeted selectors (specificite maximale) — applique aux 7 outils
   non-cal-year-wide ou la cal-year-hero presente. Garantit que tous les
   containers/sections sous le tool s'alignent a 1000px max comme le tool. */
body.tool-calculateur-de-delai main#main > .container > .container,
body.tool-calculateur-de-delai main#main > .container > .result-area-refactored,
body.tool-compteur-de-jours main#main > .container > .container,
body.tool-compteur-de-jours main#main > .container > .result-area-refactored,
body.tool-nombre-de-jours-entre-deux-dates main#main > .container > .container,
body.tool-nombre-de-jours-entre-deux-dates main#main > .container > .result-area-refactored,
body.tool-calculateur-heures main#main > .container > .container,
body.tool-calculateur-heures main#main > .container > .result-area-refactored,
body.tool-jours-ouvrables main#main > .container > .container,
body.tool-jours-ouvrables main#main > .container > .result-area-refactored,
body.tool-jours-francs main#main > .container > .container,
body.tool-jours-francs main#main > .container > .result-area-refactored,
body.tool-calculateur-age main#main > .container > .container,
body.tool-calculateur-age main#main > .container > .result-area-refactored {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    box-sizing: border-box;
}

/* Selectors complementaires :has() + sibling pour browsers/cas qui n'ont pas
   le body class de tool actif. */
main#main > .container:has(.cal-year-hero) > .result-area-refactored,
main#main > .container:has(.cal-year-hero) > .container,
.cal-year-hero ~ .result-area-refactored,
.cal-year-hero ~ .container {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
.cal-year-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 25% 60%, rgba(255,255,255,0.05) 2px, transparent 3px),
        radial-gradient(circle at 75% 30%, rgba(255,255,255,0.04) 2px, transparent 3px);
    background-size: 80px 80px, 100px 100px;
    opacity: 0.6;
    pointer-events: none;
}
.cal-year-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1700px;
    margin: 0 auto;
}

/* Breadcrumb capsule (meme langage que jfhub-hero) */
.cal-year-hero__breadcrumb {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 5px 13px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 999px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.88);
}
.cal-year-hero__breadcrumb ol {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.cal-year-hero__breadcrumb li {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}
.cal-year-hero__breadcrumb a {
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.18s ease;
}
.cal-year-hero__breadcrumb a:hover,
.cal-year-hero__breadcrumb a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255,255,255,0.6);
}
.cal-year-hero__breadcrumb [aria-current="page"] {
    color: #fff;
    font-weight: 700;
}
.cal-year-hero__breadcrumb-sep {
    color: rgba(255,255,255,0.55);
    font-size: 0.88rem;
    user-select: none;
    line-height: 1;
}

/* H1 dentro do hero — titulo seco "Calendrier YYYY" */
.cal-year-hero__title {
    color: #fff;
    font-size: clamp(2.1rem, 3.2vw + 1rem, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 14px;
    text-wrap: balance;
}

.cal-year-hero__lede {
    color: rgba(255,255,255,0.92);
    font-size: clamp(1rem, 0.85vw + 0.75rem, 1.15rem);
    line-height: 1.6;
    max-width: 78ch;
    margin: 0;
    font-weight: 400;
}

@media (max-width: 720px) {
    .cal-year-hero { padding: 40px 16px 44px; }
    .cal-year-hero__title { font-size: clamp(1.8rem, 6vw, 2.4rem); }
    .cal-year-hero__lede { font-size: 0.98rem; }
}

/* -------- LAYOUT (body.cal-year-wide) --------
   PIEGE : header.php ouvre `<main id="main"><div class="container">` et ne
   ferme JAMAIS ce .container — tout le contenu de la page (hero inclus) est
   donc nested a l'interieur. Il faut traiter ce container-shell direct-enfant
   de main differemment des `.container` internes.

   - main#main           : shell libere (aucune boite)
   - main > .container   : container-shell = 100% → hero plein (100vw)
   - main > .container .container : wrappers de sections = 1700px inner */
body.cal-year-wide main#main,
body.cal-year-wide > main {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

body.cal-year-wide main#main > .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

body.cal-year-wide main#main > .container .container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Padding lateral 0 par défaut : assure l'alignement strict de tous les
       blocs (toolbar, calendrier, sections sectoriales, ad slots, premier
       topic SERP) sur la même borne 1200px. Les wrappers décoratifs en
       cartes (article-wrapper, howto-wrapper, faq-section) réimposent leur
       propre padding 28px via une règle dédiée plus bas. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box;
    width: 100%;
}

/* Le calendrier annuel et tous les blocs frères (toolbar, sections sous le
   calendrier, article, FAQ, navigation années) partagent la même largeur,
   cap 1200px, centrés. C'est la largeur de référence de la page année. */
body.cal-year-wide #annual-calendar-container,
body.cal-year-wide .container.cal-toolbar-wrapper,
body.cal-year-wide .container > .cal-toolbar,
body.cal-year-wide .container.tool-aux-wrapper,
body.cal-year-wide .container.year-content-wrapper,
body.cal-year-wide .container.holiday-list-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Note : le padding 0 par défaut s'applique à tous les .container. Les
   wrappers décoratifs en cartes (article, howto, faq) re-imposent leur
   padding 28px via la règle plus bas. */

/* Breadcrumb global natif (hors hero) : masque sur cette page pour eviter
   la duplication avec le breadcrumb du hero. */
body.cal-year-wide main#main > .container > .breadcrumb {
    display: none;
}

/* Liens contextuels vers feries / dates dans le contenu editorial. */
body.cal-year-wide .cal-content-link {
    color: #0071e3;
    text-decoration: none;
    border-bottom: 1px dotted rgba(0, 113, 227, 0.4);
    transition: color 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}
body.cal-year-wide .cal-content-link:hover {
    color: #0062cc;
    border-bottom-color: #0062cc;
    background: rgba(0, 113, 227, 0.06);
}
body.cal-year-wide .cal-content-link--date {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
body.cal-year-wide.dark-mode .cal-content-link {
    color: #64b1ff;
    border-bottom-color: rgba(100, 177, 255, 0.4);
}
body.cal-year-wide.dark-mode .cal-content-link:hover {
    color: #8ec5ff;
    background: rgba(10, 132, 255, 0.12);
}

/* Blocs editoriaux (article, how-to, FAQ, navigation annees) : largeur de
   lecture confortable (~960px) + look de "carte" blanche (restauree apres
   que body.cal-year-wide ait neutralise le bg/border/shadow des .container).
   Utilise les variables de theme pour suivre dark mode automatiquement. */
/* Wrappers décoratifs en cartes : ils re-imposent leur padding 28px
   par-dessus le padding 0 du .container générique. Scope main#main
   pour avoir une spécificité au moins égale à la règle base. */
body.cal-year-wide main#main > .container .container.article-wrapper,
body.cal-year-wide main#main > .container .container.howto-wrapper,
body.cal-year-wide main#main > .container .container.faq-section,
body.cal-year-wide main#main > .container .container.years-navigation-section,
body.cal-year-wide main#main > .container .container.serp-wrapper {
    max-width: 1200px !important;
    background: var(--content-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    margin-top: 32px !important;
    margin-bottom: 32px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.cal-year-wide.dark-mode main#main > .container .container.article-wrapper,
body.cal-year-wide.dark-mode main#main > .container .container.howto-wrapper,
body.cal-year-wide.dark-mode main#main > .container .container.faq-section,
body.cal-year-wide.dark-mode main#main > .container .container.years-navigation-section,
body.cal-year-wide.dark-mode main#main > .container .container.serp-wrapper {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Vue mensuelle : header du mois — pas de capsule colorée, juste un
   titre net + badge année, avec séparateur hairline sous le titre pour
   visuellement isoler le header de la grille. */
body.cal-year-wide .calendar-month-single-card .month-title {
    position: relative;
    /* Etend jusqu'aux bords du card (compense padding 22px 24px) et
       raccorde ses coins sup au border-radius du card (12px - 1 border). */
    margin: -14px -14px 14px;
    padding: 14px 20px;
    background: #5ba3f5;
    border: 0;
    border-radius: 11px 11px 0 0;
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
body.cal-year-wide .calendar-month-single-card .month-title__name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    line-height: 1.1;
    flex: 1;
    text-align: left;
}
body.cal-year-wide .calendar-month-single-card .month-title__year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 28px;
    padding: 0 14px;
    background: #ffffff;
    border: 0;
    color: #2a7fd4;
    font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 1;
}
body.cal-year-wide.dark-mode .calendar-month-single-card .month-title {
    background: #4a94e0;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
body.cal-year-wide.dark-mode .calendar-month-single-card .month-title__name {
    color: #ffffff;
}
body.cal-year-wide.dark-mode .calendar-month-single-card .month-title__year {
    background: #1c1c1e;
    color: #64b1ff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Wrapper layout mois + sidebar : une seule carte unifiee au lieu de 2
   elements separes flottants. Donne un ensemble visuellement coherent. */
/* Layout mois + sidebar : sans wrapper englobant (ils sont 2 cards
   independents cote a cote). Centre dans le container 1700px. */
body.cal-year-wide .calendar-month-main-layout {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(340px, 400px) !important;
    column-gap: 32px !important;
    row-gap: 20px !important;
    align-items: start !important;
    justify-content: center !important;
    max-width: 1700px;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (max-width: 820px) {
    body.cal-year-wide .calendar-month-main-layout {
        grid-template-columns: 1fr !important;
    }
}

/* Cabecalhos de coluna Seg-Dom no modo ano: cor neutra herdada do
   .calendar-month-weekday (sem destaque vermelho de fim de semana). */

/* Vue mensuelle (/calendrier/{year}/{mois}) : la layout principale
   (.calendar-month-main-layout) reste centree a sa largeur naturelle,
   mais les sections editoriales qui suivent doivent rester en largeur
   de lecture (~960px centrees). */
body.cal-year-wide .calendar-month-page {
    max-width: 1700px !important;
}
body.cal-year-wide .calendar-month-editorial,
body.cal-year-wide .calendar-month-faq,
body.cal-year-wide .calendar-month-year-grid,
body.cal-year-wide .calendar-month-page > .shortcuts-panel {
    max-width: 1080px;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* Tableau "Jours ouvres par mois" : les styles inline (row de mois courant
   bg #f0f7ff, row total bg #f5f5f5) ne suivent pas le dark mode. On les
   corrige ici via selecteurs d'attribut. */
body.cal-year-wide.dark-mode .cal-table-data tr[style*="#f0f7ff"] {
    background: rgba(10, 132, 255, 0.15) !important;
}
body.cal-year-wide.dark-mode .cal-table-data tr[style*="#f5f5f5"] {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #e5eef9;
}

/* ==========================================================================
   CM-SERP-CARD : panneau « X en bref » au-dessus de l'outil. Direct-answer
   visuel avec lead phrase + chips. Focus calendrier (saison, fériés, lune,
   événements) — différencié de jours-ouvres (chiffres business).
   100% évergreen, valeurs SSR. Largeur ajustée au wrapper (1080px).
   Présent dans calendrier/mois.php (CSS inline) et calendrier/index.php
   (loaded depuis calendar-year.css). Cette règle sert le year mode.
   ========================================================================== */
.cm-serp-card {
    margin-top: 14px;
    margin-bottom: 14px;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
body.cal-year-wide main#main > .container .container.cm-serp-card,
body.cal-year-wide > main > .container .container.cm-serp-card {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.cm-serp-card__inner {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 246, 255, 0.94) 100%);
    border: 1px solid rgba(0, 113, 227, 0.18);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 16px rgba(0, 113, 227, 0.06);
}
.cm-serp-card__title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color, #0071e3);
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.cm-serp-card__title i {
    color: var(--primary-color, #0071e3);
    font-size: 0.95em;
}
.cm-serp-card__lead {
    margin: 0 0 14px;
    font-size: 0.96rem;
    line-height: 1.55;
    color: #1f2937;
}
.cm-serp-card__lead strong {
    color: #0f172a;
    font-weight: 700;
}
.cm-serp-card__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cm-serp-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 113, 227, 0.18);
    border-radius: 100px;
    font-size: 0.85rem;
    color: #1f2937;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.cm-serp-card__chip-icon {
    font-size: 0.95em;
    line-height: 1;
}
.cm-serp-card__chip-text strong {
    color: #0f172a;
    font-weight: 700;
}
.cm-serp-card__chip--holiday {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.22);
}
.cm-serp-card__chip--holiday .cm-serp-card__chip-text strong { color: #b91c1c; }
.cm-serp-card__chip--season {
    background: rgba(255, 149, 0, 0.08);
    border-color: rgba(255, 149, 0, 0.24);
}
/* Variante business (jours-ouvres) : tonalité verte (productivité) au lieu
   de bleue, et chip "primary" pour mettre en avant le chiffre principal
   (jours ouvrés) — c'est l'answer-first du SERP. */
.cm-serp-card--business .cm-serp-card__inner {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(236, 250, 240, 0.94) 100%);
    border-color: rgba(16, 185, 129, 0.22);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.06);
}
.cm-serp-card--business .cm-serp-card__title {
    color: #047857;
}
.cm-serp-card--business .cm-serp-card__title i {
    color: #047857;
}
.cm-serp-card__chip--primary {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    font-size: 0.92rem;
    padding: 7px 14px;
}
.cm-serp-card__chip--primary .cm-serp-card__chip-text strong {
    color: #047857;
    font-size: 1.05em;
}
body.dark-mode .cm-serp-card--business .cm-serp-card__inner {
    background: linear-gradient(135deg, rgba(28, 28, 30, 0.94) 0%, rgba(20, 38, 30, 0.94) 100%);
    border-color: rgba(52, 211, 153, 0.26);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
body.dark-mode .cm-serp-card--business .cm-serp-card__title { color: #6ee7b7; }
body.dark-mode .cm-serp-card--business .cm-serp-card__title i { color: #6ee7b7; }
body.dark-mode .cm-serp-card__chip--primary {
    background: rgba(52, 211, 153, 0.16);
    border-color: rgba(52, 211, 153, 0.32);
}
body.dark-mode .cm-serp-card__chip--primary .cm-serp-card__chip-text strong { color: #6ee7b7; }
body.dark-mode .cm-serp-card__inner {
    background: linear-gradient(135deg, rgba(28, 28, 30, 0.92) 0%, rgba(24, 30, 42, 0.94) 100%);
    border-color: rgba(100, 177, 255, 0.22);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
body.dark-mode .cm-serp-card__title { color: #64b5ff; }
body.dark-mode .cm-serp-card__title i { color: #64b5ff; }
body.dark-mode .cm-serp-card__lead { color: #e5eaf2; }
body.dark-mode .cm-serp-card__lead strong { color: #f5f5f7; }
body.dark-mode .cm-serp-card__chip {
    background: #1c1c1e;
    border-color: rgba(100, 177, 255, 0.2);
    color: #e5eaf2;
}
body.dark-mode .cm-serp-card__chip-text strong { color: #f5f5f7; }
body.dark-mode .cm-serp-card__chip--holiday {
    background: rgba(255, 69, 58, 0.12);
    border-color: rgba(255, 69, 58, 0.28);
}
body.dark-mode .cm-serp-card__chip--holiday .cm-serp-card__chip-text strong { color: #fca5a5; }
body.dark-mode .cm-serp-card__chip--season {
    background: rgba(255, 149, 0, 0.14);
    border-color: rgba(255, 149, 0, 0.32);
}
@media (max-width: 720px) {
    .cm-serp-card__inner { padding: 14px; }
    .cm-serp-card__title { font-size: 1rem; }
    .cm-serp-card__lead { font-size: 0.92rem; }
    .cm-serp-card__chip { font-size: 0.82rem; padding: 5px 10px; }
}

/* Variante --inline : utilisée quand le cm-serp-card est posé en premier
   topic à l'intérieur de l'article éditorial. Il ne porte plus de container
   grid externe : on reset le margin et on aère le bloc dans son article. */
.cm-serp-card--inline {
    margin: 0 0 28px;
    width: 100%;
    max-width: 100%;
}
.cm-serp-card--inline .cm-serp-card__inner {
    padding: 22px 24px;
}

/* Tableau lunaire mensuel (12 lignes, 4 colonnes phases). */
.cal-moon-monthly { width: 100%; }
.cal-moon-monthly th { white-space: nowrap; font-size: 0.92rem; }
.cal-moon-monthly td { padding: 8px 10px; }
.cal-moon-monthly td strong { font-weight: 700; color: #1d1d1f; }
body.dark-mode .cal-moon-monthly td strong { color: #f5f5f7; }
@media (max-width: 720px) {
    .cal-moon-monthly { font-size: 0.84rem; }
    .cal-moon-monthly th, .cal-moon-monthly td { padding: 6px 4px; }
}

/* ==========================================================================
   CM-TOOL-SHELL : wrapper unifié pour les outils en mode mes (calendrier
   et jours-ouvres). Toolbar + calendrier + résumé regroupés visuellement
   dans un même cadre. Largeur ajustée à la combinaison calendrier (660px)
   + résumé (~340px) + gap = 1080px max.
   ========================================================================== */
.cm-tool-shell {
    margin-top: 16px;
    margin-bottom: 24px;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
.cm-tool-shell__inner {
    background: var(--content-bg, #ffffff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.cm-tool-shell__toolbar {
    margin: 0 0 14px;
    padding-bottom: 14px;
    /* Hairline plus visible (0.1 au lieu de 0.06) pour bien dessiner la ligne
       séparatrice entre la toolbar et le calendrier dans la shell unifiée. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.cm-tool-shell__body { padding: 0; }

/* Spécificité haute pour battre la règle cal-year-wide qui force 1700px
   sur les .container imbriqués. Applique à la fois au shell de l'outil et
   à la shell éditoriale qui suit (FAQ, year grid, etc.). */
body.cal-year-wide main#main > .container .container.cm-tool-shell,
body.cal-year-wide > main > .container .container.cm-tool-shell,
body.cal-year-wide main#main > .container .container.calendar-month-editorial-shell,
body.cal-year-wide > main > .container .container.calendar-month-editorial-shell {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.dark-mode .cm-tool-shell__inner {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
body.dark-mode .cm-tool-shell__toolbar {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 820px) {
    .cm-tool-shell__inner { padding: 14px; }
}

/* ==========================================================================
   BARRE DE CONTROLE (cal-toolbar) — v2 : unified command bar
   Un seul grand capsule avec 3 segments internes separes par hairlines
   verticales. Hauteur 52px, ombre flottante, personnalite premium.
   ========================================================================== */

body.cal-year-wide .cal-toolbar {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 "Inter", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    position: relative;
}
/* Le panneau .calendar-customize-panel-floating est position: absolute avec
   top: calc(100% + 10px) + right: 0. Il a besoin d'un ancetre positionne pour
   se caler correctement sous le bouton Personnaliser. On rend .cal-toolbar
   position: relative (ci-dessus) et on assure aussi .cal-toolbar-actions
   position: relative pour que le panneau colle a droite du cluster d'actions,
   sous le bouton accent. */
body.cal-year-wide .cal-toolbar-actions {
    position: relative;
}
body.cal-year-wide .cal-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 12px 32px -18px rgba(15, 35, 70, 0.18);
}

/* Pour TOUTES les pages cal-year-wide (mode mes ET mode ano), la cal-toolbar
   ne porte pas sa propre carte (bg/border/shadow). Décision design : les
   year-pills et action-icons ont déjà leur identité visuelle individuelle
   (border + bg propres) ; un wrapper-card autour fait double-emploi. Pattern
   moderne calendar-app (Apple/Google/Notion) — la toolbar flotte sur le
   fond de page, sans moldure.
   Mode mes : toolbar dans cm-tool-shell, séparée de la grille par le
              border-bottom natif de cm-tool-shell__toolbar.
   Mode ano : toolbar directement sur le fond, espacement par margin. */
body.cal-year-wide .cal-toolbar__row {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
body.cal-year-wide .cal-toolbar__row > .cal-year-nav {
    /* Aligné à gauche, prend sa largeur naturelle */
    margin-right: auto;
}
body.cal-year-wide .cal-toolbar__row > .cal-toolbar-actions {
    /* Aligné à droite (margin-right:auto sur le frère pousse celui-ci à droite) */
    margin-left: 0;
}

/* -------- Year nav : 3 pills blanches separees -------- */
body.cal-year-wide .cal-year-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
body.cal-year-wide .cal-year-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    min-width: 90px;
    padding: 0 20px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.14s ease, border-color 0.14s ease,
                color 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease;
}
/* Pill des annees adjacentes (prev/next) : texte systemBlue */
body.cal-year-wide .cal-year-pill--side {
    color: #007aff;
}
body.cal-year-wide .cal-year-pill--side:hover {
    background: #f5f8ff;
    border-color: rgba(0, 122, 255, 0.3);
    color: #0062cc;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.1);
}
body.cal-year-wide .cal-year-pill--side:active { transform: scale(0.97); }
body.cal-year-wide .cal-year-pill--side.is-disabled {
    color: #c7c7cc;
    border-color: rgba(0, 0, 0, 0.06);
    pointer-events: none;
    background: #fafafa;
}
/* Pill de l'annee en cours : texte noir gras + ombre legere */
body.cal-year-wide .cal-year-pill--current {
    position: relative;
    color: #1d1d1f;
    font-weight: 700;
    font-size: 1.02rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
body.cal-year-wide .cal-year-pill--current:hover {
    border-color: rgba(0, 0, 0, 0.18);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
body.cal-year-wide .cal-year-pill__label { line-height: 1; }

/* Version lien (CTA « Voir année 2026 ») : pill bleu, icone fleche, hover
   qui eleve legerement + fleche qui glisse. Remplace l'ancien picker select. */
body.cal-year-wide .cal-year-pill--link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    background: #0071e3;
    border-color: #0071e3;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
}
body.cal-year-wide .cal-year-pill--link:hover,
body.cal-year-wide .cal-year-pill--link:focus-visible {
    background: #0062c4;
    border-color: #0062c4;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(0, 113, 227, 0.3);
    transform: translateY(-1px);
    text-decoration: none;
    outline: none;
}
body.cal-year-wide .cal-year-pill__see {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.92);
    text-transform: none;
    line-height: 1;
}
body.cal-year-wide .cal-year-pill--link .cal-year-pill__label {
    color: #ffffff;
    font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
body.cal-year-wide .cal-year-pill__arrow {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
body.cal-year-wide .cal-year-pill--link:hover .cal-year-pill__arrow,
body.cal-year-wide .cal-year-pill--link:focus-visible .cal-year-pill__arrow {
    transform: translateX(3px);
}
body.cal-year-wide .cal-year-pill__select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 16px; /* empeche le zoom iOS */
    border: 0;
    margin: 0;
    padding: 0;
}

/* -------- Separateurs internes verticaux -------- */
body.cal-year-wide .cal-toolbar__row::before,
body.cal-year-wide .cal-toolbar-actions__sep {
    content: none;
}
/* Separateur entre year-nav et actions, et entre actions et accent */
body.cal-year-wide .cal-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    position: relative;
    padding-left: 8px;
    margin-left: 4px;
}
body.cal-year-wide .cal-toolbar-actions::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.08);
}
body.cal-year-wide .cal-toolbar-actions__sep {
    content: "";
    display: inline-block;
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 6px;
}

/* -------- Boutons d'action : icon-only, couleurs semantiques -------- */
body.cal-year-wide .cal-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.14s ease, transform 0.12s ease;
}
body.cal-year-wide .cal-icon-btn:hover { background: #f5f5f7; }
body.cal-year-wide .cal-icon-btn:active { transform: scale(0.94); }
body.cal-year-wide .cal-icon-btn:focus-visible {
    outline: 2px solid #007aff;
    outline-offset: 2px;
}
/* Couleurs semantiques par type d'action (cf. iOS system colors) */
body.cal-year-wide .cal-icon-btn--neutral { color: #5f6368; }
body.cal-year-wide .cal-icon-btn--pdf     { color: #ff3b30; }
body.cal-year-wide .cal-icon-btn--share   { color: #007aff; }
body.cal-year-wide .cal-icon-btn--accent  { color: #007aff; }
body.cal-year-wide .cal-icon-btn--accent[aria-expanded="true"] {
    background: rgba(0, 122, 255, 0.12);
}

/* Variante avec label texte (ex. "Personnaliser" en toutes lettres) */
body.cal-year-wide .cal-icon-btn--with-label {
    width: auto;
    gap: 8px;
    padding: 0 14px 0 12px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
}
body.cal-year-wide .cal-icon-btn__label {
    line-height: 1;
    white-space: nowrap;
}
/* Accent + label : pill bleu rempli, bien visible comme action primaire */
body.cal-year-wide .cal-icon-btn--accent.cal-icon-btn--with-label {
    background: rgba(0, 122, 255, 0.1);
    border: 1px solid rgba(0, 122, 255, 0.22);
}
body.cal-year-wide .cal-icon-btn--accent.cal-icon-btn--with-label:hover {
    background: rgba(0, 122, 255, 0.18);
    border-color: rgba(0, 122, 255, 0.35);
    color: #0062cc;
}
body.cal-year-wide .cal-icon-btn--accent.cal-icon-btn--with-label[aria-expanded="true"] {
    background: #007aff;
    border-color: #007aff;
    color: #ffffff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* -------- Mobile -------- */
@media (max-width: 720px) {
    body.cal-year-wide .cal-toolbar__row {
        gap: 10px;
        padding: 8px;
        justify-content: center;
    }
    body.cal-year-wide .cal-toolbar__row > .cal-year-nav,
    body.cal-year-wide .cal-toolbar__row > .cal-toolbar-actions {
        margin: 0;
        justify-content: center;
    }
    body.cal-year-wide .cal-year-nav { gap: 6px; }
    body.cal-year-wide .cal-year-pill {
        min-width: 68px;
        padding: 0 12px;
        font-size: 0.92rem;
    }
    body.cal-year-wide .cal-icon-btn { width: 36px; height: 36px; }
    body.cal-year-wide .cal-icon-btn--with-label { width: auto; }
    body.cal-year-wide .cal-toolbar-actions__sep { display: none; }
}

/* -------- Dark mode -------- */
/* Pas de carte autour de la toolbar (cohérent avec light mode). Les
   year-pills et icon-buttons gardent leurs propres styles dark ci-dessous. */
body.cal-year-wide.dark-mode .cal-toolbar__row {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
body.cal-year-wide.dark-mode .cal-year-pill {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
}
body.cal-year-wide.dark-mode .cal-year-pill--side { color: #64b1ff; }
body.cal-year-wide.dark-mode .cal-year-pill--side:hover {
    background: #2c2c2e;
    border-color: rgba(10, 132, 255, 0.38);
    color: #8ec5ff;
}
body.cal-year-wide.dark-mode .cal-year-pill--side.is-disabled {
    color: #48484a;
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.05);
}
body.cal-year-wide.dark-mode .cal-year-pill--current {
    color: #f5f5f7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
body.cal-year-wide.dark-mode .cal-year-pill--current:hover {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
body.cal-year-wide.dark-mode .cal-year-pill--link {
    background: #0a84ff;
    border-color: #0a84ff;
    color: #ffffff;
}
body.cal-year-wide.dark-mode .cal-year-pill--link:hover,
body.cal-year-wide.dark-mode .cal-year-pill--link:focus-visible {
    background: #2e9bff;
    border-color: #2e9bff;
    box-shadow: 0 3px 10px rgba(10, 132, 255, 0.45);
}
body.cal-year-wide.dark-mode .cal-year-pill--link .cal-year-pill__label,
body.cal-year-wide.dark-mode .cal-year-pill__see {
    color: #ffffff;
}

/* Pulse animation quand "Aujourd'hui" clicque : flash doux sur la cellule
   today et scroll vers son mois. */
@keyframes cal-today-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.55); }
    60%  { box-shadow: 0 0 0 14px rgba(0, 122, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0); }
}
body.cal-year-wide #annual-calendar-container .calendar-day.today.is-today-pulse {
    animation: cal-today-pulse 1.4s ease-out;
}

body.cal-year-wide.dark-mode .cal-toolbar-actions::before { background: rgba(255, 255, 255, 0.1); }
body.cal-year-wide.dark-mode .cal-toolbar-actions__sep { background: rgba(255, 255, 255, 0.1); }

body.cal-year-wide.dark-mode .cal-icon-btn:hover { background: rgba(255, 255, 255, 0.08); }
body.cal-year-wide.dark-mode .cal-icon-btn--neutral { color: #98989d; }
body.cal-year-wide.dark-mode .cal-icon-btn--pdf     { color: #ff453a; }
body.cal-year-wide.dark-mode .cal-icon-btn--share   { color: #64b1ff; }
body.cal-year-wide.dark-mode .cal-icon-btn--accent  { color: #64b1ff; }
body.cal-year-wide.dark-mode .cal-icon-btn--accent[aria-expanded="true"] {
    background: rgba(10, 132, 255, 0.22);
}

/* ==========================================================================
   DASHBOARD (Personnaliser panel) — v2 Apple
   Header avec titre + close, sections separees par hairlines, rows avec
   label + sublabel + iOS switch, footer avec reset.
   Scope : body.cal-year-wide .cal-dashboard (surcharge l'ancien .calendar-customize-panel)
   ========================================================================== */

body.cal-year-wide .cal-dashboard {
    width: min(92vw, 360px);
    padding: 0;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 20px 48px -16px rgba(15, 35, 70, 0.25);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 "Inter", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #1d1d1f;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* -------- Header -------- */
body.cal-year-wide .cal-dashboard__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.cal-year-wide .cal-dashboard__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 4px;
}
body.cal-year-wide .cal-dashboard__sub {
    font-size: 0.82rem;
    font-weight: 400;
    color: #86868b;
    line-height: 1.35;
    margin: 0;
}
body.cal-year-wide .cal-dashboard__close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #86868b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
}
body.cal-year-wide .cal-dashboard__close:hover {
    background: #f5f5f7;
    color: #1d1d1f;
}
body.cal-year-wide .cal-dashboard__close:active {
    transform: scale(0.92);
}

/* -------- Sections -------- */
body.cal-year-wide .cal-dashboard__section {
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.cal-year-wide .cal-dashboard__section:last-of-type {
    border-bottom: none;
}
body.cal-year-wide .cal-dashboard__section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
}

/* -------- Row (label + sub + switch) -------- */
body.cal-year-wide .cal-dashboard__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.14s ease;
}
body.cal-year-wide .cal-dashboard__row:hover {
    background: rgba(0, 0, 0, 0.02);
}
body.cal-year-wide .cal-dashboard__row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
body.cal-year-wide .cal-dashboard__row-label {
    font-size: 0.92rem;
    font-weight: 500;
    color: #1d1d1f;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
body.cal-year-wide .cal-dashboard__row-sub {
    font-size: 0.78rem;
    font-weight: 400;
    color: #86868b;
    line-height: 1.35;
}

/* -------- iOS switch --------
   Piste 42x26px qui bascule #e9e9eb ↔ systemGreen #34c759.
   Le thumb est un disque blanc 22px avec ombre douce, qui glisse de 2px a 18px
   quand la checkbox est checked. Entierement accessible (label + input[type=checkbox]
   natif, focus-visible pris en compte). */
body.cal-year-wide .cal-switch {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
    width: 42px;
    height: 26px;
}
body.cal-year-wide .cal-switch__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}
body.cal-year-wide .cal-switch__track {
    position: absolute;
    inset: 0;
    background: #e9e9eb;
    border-radius: 999px;
    transition: background-color 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}
body.cal-year-wide .cal-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 1px 1px rgba(0, 0, 0, 0.06);
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.cal-year-wide .cal-switch__input:checked ~ .cal-switch__track {
    background: #34c759;
}
body.cal-year-wide .cal-switch__input:checked ~ .cal-switch__track .cal-switch__thumb {
    transform: translateX(16px);
}
body.cal-year-wide .cal-switch__input:focus-visible ~ .cal-switch__track {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35);
}
body.cal-year-wide .cal-switch__input:active ~ .cal-switch__track .cal-switch__thumb {
    width: 26px;
}

/* -------- Footer (reset button) -------- */
body.cal-year-wide .cal-dashboard__footer {
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: flex-end;
}
body.cal-year-wide .cal-dashboard__reset {
    background: transparent;
    border: none;
    color: #007aff;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}
body.cal-year-wide .cal-dashboard__reset:hover {
    background: rgba(0, 122, 255, 0.1);
}
body.cal-year-wide .cal-dashboard__reset:active {
    transform: scale(0.97);
}

/* -------- Dark mode -------- */
body.cal-year-wide.dark-mode .cal-dashboard {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
    color: #f5f5f7;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 20px 48px -16px rgba(0, 0, 0, 0.65);
}
body.cal-year-wide.dark-mode .cal-dashboard__header,
body.cal-year-wide.dark-mode .cal-dashboard__section,
body.cal-year-wide.dark-mode .cal-dashboard__footer {
    border-color: rgba(255, 255, 255, 0.08);
}
body.cal-year-wide.dark-mode .cal-dashboard__title { color: #f5f5f7; }
body.cal-year-wide.dark-mode .cal-dashboard__sub,
body.cal-year-wide.dark-mode .cal-dashboard__section-title,
body.cal-year-wide.dark-mode .cal-dashboard__row-sub { color: #98989d; }
body.cal-year-wide.dark-mode .cal-dashboard__row-label { color: #f5f5f7; }
body.cal-year-wide.dark-mode .cal-dashboard__close {
    color: #98989d;
}
body.cal-year-wide.dark-mode .cal-dashboard__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f5f5f7;
}
body.cal-year-wide.dark-mode .cal-dashboard__row:hover { background: rgba(255, 255, 255, 0.04); }
body.cal-year-wide.dark-mode .cal-switch__track { background: #3a3a3c; }
body.cal-year-wide.dark-mode .cal-switch__input:checked ~ .cal-switch__track { background: #30d158; }
body.cal-year-wide.dark-mode .cal-switch__input:focus-visible ~ .cal-switch__track {
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.4);
}
body.cal-year-wide.dark-mode .cal-dashboard__reset { color: #64b1ff; }
body.cal-year-wide.dark-mode .cal-dashboard__reset:hover { background: rgba(10, 132, 255, 0.16); }

/* ==========================================================================
   CALENDRIER ANNUEL — POLISSAGE VISUEL (v3, squircles + glass header)
   Scope : body.cal-year-wide uniquement.

   Philosophie : chaque jour est un squircle individuel (avec son propre
   fond, separe des autres par un vrai gap) ; l'entete du mois est un
   bandeau glass (translucide, rounded) qui englobe nom + annee ; les
   entetes de colonne (L M M J V S D) cohabitent dessous, S/D en rouge.
   ========================================================================== */

/* ==========================================================================
   APPLE CALENDAR 2027 — annual grid (v2 : cartes + squares + motion)
   SF Pro Display/Text, systemRed feries, gris clair weekend, hover releve.
   Couleurs :
     label primaire   #1d1d1f     (Apple text)
     label secondaire #86868b     (Apple secondary)
     hairline         rgba(0,0,0,0.08)
     surface soft     #f5f5f7
     systemRed        #ff3b30
     systemBlue       #007aff
     holiday bg       #ffe5e3     (rouge clair lisse)
     weekend bg       #f2f2f5     (gris Apple)
   ========================================================================== */

/* ==========================================================================
   GRID ANUEL DU CALENDRIER (port direct depuis ocalendario.com.br)
   Layout abandonne (faixa azul) -> design sobre BR : carte blanche, titre
   bleu en MAJ centré, divider fin sous le titre, contenu qui respire.
   ========================================================================== */

body.cal-year-wide #annual-calendar-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Inter", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1024px) {
    body.cal-year-wide #annual-calendar-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* -------- Carte de mois -------- */
body.cal-year-wide #annual-calendar-container .month-container {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 15px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
body.cal-year-wide #annual-calendar-container .month-container::before { content: none; }
body.cal-year-wide #annual-calendar-container .month-container:hover,
body.cal-year-wide #annual-calendar-container .month-container:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.14);
}
body.cal-year-wide #annual-calendar-container .month-container:focus-visible {
    outline: 2px solid rgba(120, 130, 145, 0.35);
    outline-offset: 2px;
}

/* -------- Titre du mois (sobre, MAJ, bleu, centré, hairline en bas) -------- */
body.cal-year-wide #annual-calendar-container .month-title {
    position: static;
    text-align: center;
    font-weight: 700;
    margin: 0 0 12px;
    padding: 0 0 8px;
    background: transparent;
    text-transform: uppercase;
    color: #0071e3;
    font-size: 1em;
    letter-spacing: 0.5px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0;
    box-shadow: none;
    display: block;
}
body.cal-year-wide #annual-calendar-container .month-title::after { content: none; }
body.cal-year-wide #annual-calendar-container .month-title::before { content: none; }
body.cal-year-wide #annual-calendar-container .month-title__name,
body.cal-year-wide #annual-calendar-container .month-title__year,
body.cal-year-wide #annual-calendar-container .month-title__sep {
    display: inline;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    box-shadow: none;
    border: 0;
    padding: 0;
    margin: 0;
    height: auto;
    min-width: 0;
    border-radius: 0;
}
body.cal-year-wide #annual-calendar-container .month-link-seo {
    color: inherit;
    text-decoration: none;
    display: block;
}
body.cal-year-wide #annual-calendar-container .month-link-seo:hover,
body.cal-year-wide #annual-calendar-container .month-link-seo:focus-visible {
    text-decoration: underline;
}

/* -------- Grille des jours -------- */
body.cal-year-wide #annual-calendar-container .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.9em;
    gap: 3px;
    margin-bottom: 10px;
    padding: 0;
    background: transparent;
    border: none;
    font-variant-numeric: tabular-nums;
    grid-auto-rows: auto;
}
body.cal-year-wide #annual-calendar-container .calendar-header-day {
    font-weight: 700;
    color: #6e6e73;
    font-size: 0.75em;
    text-transform: none;
    letter-spacing: 0;
    padding: 0 0 6px;
    background: transparent;
    position: static;
}
body.cal-year-wide #annual-calendar-container .calendar-header-day::after { content: none; }
body.cal-year-wide #annual-calendar-container .calendar-header-day::before { content: none; }

/* Cellule de jour */
body.cal-year-wide #annual-calendar-container .calendar-day {
    position: relative;
    padding: 5px 0;
    border-radius: 6px;
    font-size: 0.95em;
    color: #1d1d1f;
    /* Bg off-white sutil + box-shadow inset 1px : da definicao crisp de borda
       (mais contraste, igual joursouvrables) em vez de transparent sem peso. */
    background: #fafafd;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background-color 0.14s ease, color 0.14s ease;
    cursor: default;
    min-height: 32px;
}
body.cal-year-wide #annual-calendar-container .calendar-day time {
    position: relative;
    z-index: 1;
    display: inline-block;
}
body.cal-year-wide #annual-calendar-container .calendar-day.weekend {
    background: #e6e6ec;
    color: #6e6e73;
    font-weight: 400;
}
body.cal-year-wide #annual-calendar-container .calendar-day.holiday {
    background: #ffe5e3;
    color: #ff3b30;
    font-weight: 700;
    cursor: help;
}
body.cal-year-wide #annual-calendar-container .calendar-day.holiday::after { content: none; }
body.cal-year-wide #annual-calendar-container .calendar-day.weekend.holiday {
    background: #ffe5e3;
    color: #ff3b30;
}
body.cal-year-wide #annual-calendar-container .calendar-day.today {
    background: #007aff;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 8px -2px rgba(0, 122, 255, 0.45);
}
body.cal-year-wide #annual-calendar-container .calendar-day.today time { color: #ffffff; }
body.cal-year-wide #annual-calendar-container .calendar-day.today.weekend,
body.cal-year-wide #annual-calendar-container .calendar-day.today.holiday {
    background: #007aff;
    color: #ffffff;
}
body.cal-year-wide #annual-calendar-container .calendar-day:not(.today):not(.holiday):not(.weekend):hover {
    background: #f5f5f7;
}
body.cal-year-wide #annual-calendar-container .calendar-day.weekend:not(.today):hover { background: #e8e8ed; }
body.cal-year-wide #annual-calendar-container .calendar-day.holiday:not(.today):hover { background: #ffd1cd; }

/* -------- Liste de feriados/eventos sous la grille -------- */
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen {
    list-style: none;
    padding: 10px 0 0 0;
    margin: auto 0 0 0;
    font-size: 0.8em;
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
    color: #6e6e73;
    line-height: 1.4;
}
/* Vista anual: o separador unico vive no container .mycity-month-meta-layout.
   As listas internas (feriados + lua) NAO carregam border-top, senao aparecem 3
   tracos em vez de um (o superior). A regra ID #annual-calendar-container vencia o
   override de calendario.css, dai este neutralizante de igual especificidade
   (border-top:0 mata largura+estilo em light E dark). */
body.cal-year-wide #annual-calendar-container .mycity-month-meta-layout .month-holiday-list-screen {
    border-top: 0;
    padding-top: 0;
}
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li {
    margin-bottom: 4px;
    line-height: 1.3;
}
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen strong {
    color: #0071e3;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="holiday"] strong,
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="holiday"] span {
    color: #b14949;
}
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="season"] strong,
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="season"] span {
    color: #b7791f;
}
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="event"] strong,
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="event"] span {
    color: #8b95a3;
}
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="moon"] strong,
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="moon"] span {
    color: #4f46e5;
}

/* -------- Dark mode (port BR avec adaptation Apple Calendar) -------- */
body.cal-year-wide.dark-mode #annual-calendar-container .month-container {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
body.cal-year-wide.dark-mode #annual-calendar-container .month-container:hover,
body.cal-year-wide.dark-mode #annual-calendar-container .month-container:focus-visible {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 18px 36px -14px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.14);
}
body.cal-year-wide.dark-mode #annual-calendar-container .month-title {
    color: #64b1ff;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: transparent;
}
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-header-day { color: #98989d; }
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); color: #f5f5f7; }
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.weekend { background: rgba(255, 255, 255, 0.12); color: #d1d1d6; }
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.holiday {
    background: rgba(255, 69, 58, 0.18);
    color: #ff9a94;
}
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.weekend.holiday { background: rgba(255, 69, 58, 0.18); color: #ff9a94; }
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.today {
    background: #0a84ff;
    color: #ffffff;
    box-shadow: 0 2px 8px -2px rgba(10, 132, 255, 0.55);
}
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.today.weekend,
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.today.holiday {
    background: #0a84ff;
    color: #ffffff;
}
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day:not(.today):not(.holiday):not(.weekend):hover {
    background: rgba(255, 255, 255, 0.08);
}
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.weekend:not(.today):hover { background: rgba(255, 255, 255, 0.12); }
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.holiday:not(.today):hover { background: rgba(255, 69, 58, 0.26); }

/* -------- Section "Jours feries de France en YYYY" : dark-mode --------
   Les cartes sont rendues avec des styles inline (background: #fff; border: ...;
   color: inherit). On force les couleurs dark avec !important. */
body.cal-year-wide.dark-mode .holiday-list-container .cal-holiday-card {
    background: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f5f5f7 !important;
}
body.cal-year-wide.dark-mode .holiday-list-container .cal-holiday-card:hover {
    background: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
/* Sous-texte "jour de la semaine" (inline style color: #6e6e73) */
body.cal-year-wide.dark-mode .holiday-list-container .cal-holiday-card [style*="#6e6e73"] {
    color: #98989d !important;
}
/* Titre de section */
body.cal-year-wide.dark-mode .holiday-list-container .cal-section-title {
    color: #f5f5f7;
}
body.cal-year-wide.dark-mode #annual-calendar-container .month-holiday-list-screen {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: #98989d;
}
body.cal-year-wide.dark-mode #annual-calendar-container .month-holiday-list-screen strong { color: #f5f5f7; }

/* ==========================================================================
   CM-TOOL-ACTIONS — barre d'export sous le calendrier (mode mes et ano).
   Pattern unifié avec jours-ouvres : 3 boutons CTA en grille, head label
   discret, micro-cards blanches avec sous-label. Identique visuellement
   pour les 4 pages (calendrier mes/ano, jours-ouvres mes/ano).
   ========================================================================== */
.cm-tool-actions {
    margin-top: 18px;
    padding: 14px 14px 12px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    box-sizing: border-box;
}
.cm-tool-actions__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.cm-tool-actions__head i { color: #0071e3; }
.cm-tool-actions__buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Override styles legacy .btn-action / .btn-print / .btn-custom-pdf / .btn-share
   (qui forcent un fond bleu sombre + color #fff !important via calendrier.css).
   On force ici fond blanc + texte sombre pour cohérence avec jours-ouvres. */
.cm-tool-actions__buttons .btn-action {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    color: #0f172a !important;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease !important;
    text-align: left;
    box-shadow: none !important;
    /* width: 100% pour remplir la grid-cell — sans cela les boutons se
       collapse a la largeur du contenu et apparaissent alignes a gauche. */
    width: 100% !important;
    min-height: 0 !important;
    font-weight: 400 !important;
    font-size: inherit !important;
    justify-content: flex-start !important;
}
.cm-tool-actions__buttons .btn-action:hover,
.cm-tool-actions__buttons .btn-action:focus-visible {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-color: rgba(0, 113, 227, 0.4) !important;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.12) !important;
    transform: translateY(-1px) !important;
    outline: none;
    color: #0f172a !important;
}
.cm-tool-actions__buttons .btn-action .icon {
    flex-shrink: 0;
    color: #0071e3;
    display: inline-flex;
    align-items: center;
    font-size: 1em !important;
}
.cm-tool-actions__buttons .btn-action.btn-print .icon { color: #0071e3; }
.cm-tool-actions__buttons .btn-action.btn-custom-pdf .icon { color: #dc2626; }
.cm-tool-actions__buttons .btn-action.btn-share .icon { color: #0071e3; }
.cm-tool-actions__label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.cm-tool-actions__label strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}
.cm-tool-actions__label small {
    font-size: 0.72rem;
    font-weight: 500;
    color: #64748b;
    margin-top: 2px;
}

body.dark-mode .cm-tool-actions {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .cm-tool-actions__head { color: #aeaeb2; }
body.dark-mode .cm-tool-actions__head i { color: #64b5ff; }
body.dark-mode .cm-tool-actions__buttons .btn-action,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-print,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-custom-pdf,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-share {
    background: #1c1c1e !important;
    background-color: #1c1c1e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f5f5f7 !important;
}
body.dark-mode .cm-tool-actions__buttons .btn-action:hover,
body.dark-mode .cm-tool-actions__buttons .btn-action:focus-visible,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-print:hover,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-custom-pdf:hover,
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-share:hover {
    background: #2c2c2e !important;
    background-color: #2c2c2e !important;
    border-color: rgba(100, 177, 255, 0.4) !important;
    box-shadow: 0 4px 12px rgba(100, 177, 255, 0.18) !important;
    color: #f5f5f7 !important;
}
body.dark-mode .cm-tool-actions__buttons .btn-action .icon { color: #64b5ff; }
body.dark-mode .cm-tool-actions__buttons .btn-action.btn-custom-pdf .icon { color: #ff6b6b; }
body.dark-mode .cm-tool-actions__label strong { color: #f5f5f7; }
body.dark-mode .cm-tool-actions__label small { color: #aeaeb2; }

@media (max-width: 720px) {
    .cm-tool-actions__buttons { grid-template-columns: 1fr; }
}

/* Variante --year : utilisée en mode ano (calendrier/jours-ouvres) où le
   bloc est posé hors d'un cm-tool-shell, directement après le calendrier.
   Largeur 1200px (border-box, donc padding/border inclus) — alignement
   strict aux mêmes bords latéraux que #annual-calendar-container. */
body.cal-year-wide .cm-tool-actions--year {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    margin-bottom: 24px;
    box-sizing: border-box;
    /* Sem sub-box: botoes assentados direto no container do calendario.
       background !important + especificidade 0-3-0 vencem o override
       dark-mode body.dark-mode .cm-tool-actions (0-2-1, sem !important). */
    background: transparent !important;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* Variante --flush : mode mes (mes.php). Remove o sub-box (background cinza
   + border + radius + padding) para os botoes assentarem direto no container
   do calendario. !important + override dark-mode sao necessarios porque
   body.dark-mode .cm-tool-actions define background:#111827. */
.cm-tool-actions.cm-tool-actions--flush {
    background: transparent !important;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-top: 16px;
}
body.dark-mode .cm-tool-actions.cm-tool-actions--flush {
    background: transparent !important;
}

/* ==========================================================================
   AGRO-BADGE — pastilles pour le calendrier agricole (mode ano).
   Port du pattern ocalendario.com.br : 4 phases × 4 couleurs distinctes,
   pastille carrée arrondie 22px, texte blanc, lecture rapide ligne par ligne.
   ========================================================================== */

.agro-badge {
    /* inline-flex pour forcer le centrage horizontal ET vertical du caractère
       à l'intérieur du carré coloré, indépendamment de la métrique de la
       police choisie. Plus fiable que line-height + text-align. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
}

.agro-badge--S { background: #34c759; } /* Semis = vert */
.agro-badge--R { background: #ff9500; } /* Récolte = orange */
.agro-badge--F { background: #af52de; } /* Floraison = violet */
.agro-badge--D { background: #007aff; } /* Développement = bleu */
.agro-badge--idle { background: #e5e5ea; color: #8e8e93; }

body.dark-mode .agro-badge--idle { background: #3a3a3c; color: #98989d; }

.agro-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin: 6px 0 16px;
    font-size: 0.86rem;
    color: var(--secondary-color, #6e6e73);
    align-items: center;
}

.agro-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.dark-mode .agro-legend { color: #aeaeb2; }

/* ==========================================================================
   YEAR-SECTORAL-SECTION — espacement entre sections sectoriales.
   ========================================================================== */

/* Section sectoriale : flat (pas de carte propre). Le wrapper-article
   externe (article-wrapper, déjà en carte blanche avec bordure + ombre)
   fournit le cadre visuel global. Chaque section ne porte qu'un espacement
   vertical pour la lisibilité du flux, jamais sa propre boîte. */
.year-sectoral-section {
    margin: 36px 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.year-sectoral-section > h2.cal-section-title {
    margin-top: 0;
    margin-bottom: 14px;
}

.year-sectoral-section > p {
    margin-top: 0;
    margin-bottom: 14px;
    line-height: 1.55;
    color: #475569;
}

/* Table « Mois avec fériés » : la première colonne (mois) utilise rowspan
   pour grouper visuellement les fériés du même mois. On la teinte légèrement
   et on met un séparateur fort entre groupes pour que le lecteur voie d'un
   coup que les lignes successives appartiennent au même mois. */
.cal-months-with-holidays .cf-month-cell {
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 700;
    text-align: left;
    padding: 14px 16px;
    vertical-align: middle;
    border-right: 2px solid #cbd5e1;
}
.cal-months-with-holidays .cf-month-group--first td {
    border-top: 2px solid #cbd5e1;
}
.cal-months-with-holidays tbody tr:first-child td,
.cal-months-with-holidays tbody tr:first-child .cf-month-cell {
    border-top: 0;
}
body.dark-mode .cal-months-with-holidays .cf-month-cell {
    background: rgba(255, 255, 255, 0.06);
    color: #f5f5f7;
    border-right-color: rgba(255, 255, 255, 0.16);
}
body.dark-mode .cal-months-with-holidays .cf-month-group--first td {
    border-top-color: rgba(255, 255, 255, 0.16);
}

body.dark-mode .year-sectoral-section {
    /* Sem a caixa cinza no dark: titulo+texto ficam sobre o fundo da pagina (igual ao
       light). So a TABELA (.cal-table-data) mantem fundo proprio (#1c1c1e sobre o preto). */
    background: transparent;
    border: 0;
    box-shadow: none;
}
/* Separador ENTRE os topicos do resumo do ano: border-BOTTOM no FIM de cada topico
   (depois do conteudo), nao no topo (que ficava colado ao titulo seguinte = parecia separar
   titulo/conteudo). Cobre os dois containers conforme o site: .tool-aux-wrapper (ocalendario/CDP)
   e .cal-year-article (joursouvrables). :not(:last-of-type) evita linha apos o ultimo topico. */
.tool-aux-wrapper > .year-sectoral-section:not(:last-of-type),
.cal-year-article > .year-sectoral-section:not(:last-of-type) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 28px;
}
body.dark-mode .tool-aux-wrapper > .year-sectoral-section:not(:last-of-type),
body.dark-mode .cal-year-article > .year-sectoral-section:not(:last-of-type) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

body.dark-mode .year-sectoral-section > p {
    color: #aeaeb2;
}

@media (max-width: 720px) {
    .year-sectoral-section { padding: 18px 18px; }
}

/* ==========================================================================
   DYNAMIC-FACTS-BOX — cartes informatives "calendar facts" (port BR adapté).
   Chaque variante a une bordure-gauche colorée pour identifier le thème.
   ========================================================================== */

/* Section éditoriale flat : pas de carte propre. Le wrapper-article externe
   (article-wrapper / article-content, déjà en carte avec bordure et ombre)
   fournit le cadre visuel global. Chaque section ne porte qu'un espacement
   vertical pour la lisibilité du flux. */
.dynamic-facts-box {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 36px 0;
    box-shadow: none;
    transition: none;
}
.dynamic-facts-box:hover {
    border-color: transparent;
    box-shadow: none;
}

.dynamic-facts-box > h3 {
    margin: 0 0 6px;
    font-size: 1.18rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dynamic-facts-box > p {
    margin: 0 0 16px;
    color: #475569;
    line-height: 1.6;
    font-size: 0.94rem;
}

.dynamic-facts-box ul,
.dynamic-facts-box ol {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.dynamic-facts-box ol {
    counter-reset: facts-counter;
    padding-left: 0;
    list-style: none;
}

.dynamic-facts-box ol > li {
    counter-increment: facts-counter;
    position: relative;
    padding: 12px 14px 12px 52px;
    margin-bottom: 8px;
    background: rgba(15, 23, 42, 0.025);
    border-radius: 10px;
    line-height: 1.5;
    font-size: 0.96rem;
    color: #0f172a;
}
.dynamic-facts-box ol > li::before {
    content: counter(facts-counter);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0071e3, #5ab2ff);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.86rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px -2px rgba(0, 113, 227, 0.5);
}

/* Liste de chiffres-clés (Vue d'ensemble) : flex rows label/valeur, divider
   en hairline, valeurs en pill quand numériques. */
.dynamic-facts-box .facts-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    line-height: 1.4;
    color: #1d1d1f;
    font-size: 0.96rem;
}
.dynamic-facts-box .facts-list li:last-child { border-bottom: 0; }
.dynamic-facts-box .facts-list li > strong:first-child {
    flex: 0 0 auto;
    min-width: 200px;
    color: #475569;
    font-weight: 600;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dynamic-facts-box .facts-list li > strong + * {
    color: #0f172a;
}

@media (max-width: 600px) {
    .dynamic-facts-box .facts-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .dynamic-facts-box .facts-list li > strong:first-child { min-width: 0; }
}

/* Listes en grille pour fériés / dates : chaque item mini-carte avec pill
   pour la date et le nom du jour à droite. Cohérent visuellement avec les
   cartes lunaires et les chips du SERP. */
.two-col-grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
}

.two-col-grid-list > li {
    padding: 12px 14px;
    background: rgba(15, 23, 42, 0.025);
    border-radius: 10px;
    line-height: 1.45;
    color: #1d1d1f;
    font-size: 0.94rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.two-col-grid-list > li:hover {
    background: rgba(15, 23, 42, 0.05);
    transform: translateX(2px);
}
.two-col-grid-list > li > strong {
    color: #0f172a;
    display: inline;
    font-weight: 700;
}

.two-col-grid-list > li ul {
    padding-left: 0;
    margin: 6px 0 0;
    color: #475569;
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.two-col-grid-list > li ul li {
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    line-height: 1.4;
}

/* Pill pour la date (used inside two-col-grid-list and elsewhere) */
.holiday-date {
    display: inline-block;
    padding: 2px 9px;
    background: #0071e3;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
    vertical-align: baseline;
}
.holiday-date time { color: inherit; }

/* Variantes thématiques neutralisées : aucune carte ni dégradé de fond. */
.dynamic-facts-box--blue,
.dynamic-facts-box--green,
.dynamic-facts-box--orange,
.dynamic-facts-box--gray,
.dynamic-facts-box--red,
.dynamic-facts-box--yellow,
.dynamic-facts-box--pink,
.dynamic-facts-box--purple { background: transparent; }

/* Les variantes thématiques utilisent uniquement un dégradé subtil de fond
   (défini juste au-dessus). Pas de bordure latérale colorée. */

/* Dark mode : flat aussi (le wrapper-article extérieur fournit la surface). */
body.dark-mode .dynamic-facts-box,
body.dark-mode .dynamic-facts-box--blue,
body.dark-mode .dynamic-facts-box--green,
body.dark-mode .dynamic-facts-box--orange,
body.dark-mode .dynamic-facts-box--gray,
body.dark-mode .dynamic-facts-box--red,
body.dark-mode .dynamic-facts-box--yellow,
body.dark-mode .dynamic-facts-box--pink,
body.dark-mode .dynamic-facts-box--purple {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
body.dark-mode .dynamic-facts-box:hover {
    border-color: transparent;
    box-shadow: none;
}
body.dark-mode .dynamic-facts-box > h3 { color: #f5f5f7; }
body.dark-mode .dynamic-facts-box > p { color: #aeaeb2; }
body.dark-mode .dynamic-facts-box .facts-list li {
    color: #f5f5f7;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode .dynamic-facts-box .facts-list li > strong:first-child { color: #aeaeb2; }
body.dark-mode .dynamic-facts-box ol > li {
    background: rgba(255, 255, 255, 0.04);
    color: #f5f5f7;
}
body.dark-mode .two-col-grid-list > li {
    background: rgba(255, 255, 255, 0.04);
    color: #f5f5f7;
}
body.dark-mode .two-col-grid-list > li:hover { background: rgba(255, 255, 255, 0.07); }
body.dark-mode .two-col-grid-list > li ul li {
    background: rgba(255, 255, 255, 0.05);
}
body.dark-mode .two-col-grid-list > li ul { color: #aeaeb2; }
body.dark-mode .holiday-date { background: #0a84ff; color: #ffffff; }
/* DARK FIX (audit 2026-06-02): o strong dos itens (ex.: nomes das fases em "Fase principal e dias
   intermediarios") usava color:#0f172a sem override dark, ficando quase preto sobre fundo escuro = ilegivel. */
body.dark-mode .two-col-grid-list > li > strong { color: #f5f5f7; }
body.dark-mode .dynamic-facts-box .facts-list li > strong + * { color: #e2e8f0; }

@media (max-width: 720px) {
    .dynamic-facts-box { padding: 16px 18px; }
    .dynamic-facts-box > h3 { font-size: 1.06rem; }
    .two-col-grid-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LUNAR-YEAR-GRID — cartes mensuelles des phases de la Lune (pattern BR).
   ========================================================================== */

.lunar-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.lunar-month-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lunar-month-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border-color: rgba(88, 86, 214, 0.4);
}

.lunar-month-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: #5856d6;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.lunar-phase-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
    font-size: 0.88rem;
    color: #475569;
    gap: 8px;
}
.lunar-phase-row:last-child { border-bottom: 0; }

.lunar-phase-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.lunar-icon {
    font-size: 1.18rem;
    line-height: 1;
    flex-shrink: 0;
}

.lunar-info { display: flex; flex-direction: column; min-width: 0; }

.lunar-name {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.86rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lunar-date {
    font-size: 0.82em;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.lunar-phase-row.is-full-moon .lunar-name {
    color: #5856d6;
    font-weight: 700;
}

body.dark-mode .lunar-month-card {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .lunar-month-card:hover {
    border-color: rgba(120, 119, 230, 0.5);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
body.dark-mode .lunar-month-title {
    color: #a5a3f0;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode .lunar-phase-row {
    color: #aeaeb2;
    border-bottom-color: rgba(255, 255, 255, 0.05);
}
body.dark-mode .lunar-name { color: #f5f5f7; }
body.dark-mode .lunar-date { color: #98989d; }
body.dark-mode .lunar-phase-row.is-full-moon .lunar-name { color: #a5a3f0; }

/* === REFORMA 2026-04-26: ocalendario fixes === */

/* Coluna "Mês" das tabelas climate-heatmap--inverted (year mode): largura controlada */
body.cal-year-wide .climate-heatmap--inverted .climate-heatmap__row-header,
body.cal-year-wide .climate-heatmap--inverted .climate-heatmap__corner,
.climate-heatmap--inverted .climate-heatmap__row-header,
.climate-heatmap--inverted .climate-heatmap__corner {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    padding: 12px 10px !important;
    text-align: center !important;
}

.climate-heatmap--inverted .climate-heatmap__row-header strong {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Largura natural pras colunas das regiões (proporcional, sem coluna mês expandindo) */
.climate-heatmap--inverted .climate-heatmap__col-header,
.climate-heatmap--inverted .climate-heatmap__cell {
    width: auto !important;
    min-width: 100px !important;
}

@media (max-width: 768px) {
    .climate-heatmap--inverted .climate-heatmap__row-header,
    .climate-heatmap--inverted .climate-heatmap__corner {
        width: 60px !important;
        min-width: 60px !important;
        padding: 8px 4px !important;
    }
    .climate-heatmap--inverted .climate-heatmap__col-header,
    .climate-heatmap--inverted .climate-heatmap__cell {
        min-width: 70px !important;
    }
}

/* Coluna "Região · Cidade" das tabelas climate-heatmap--month: largura controlada */
.climate-heatmap--month .climate-heatmap__row-header,
.climate-heatmap--month .climate-heatmap__corner {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 240px !important;
}

/* === ARTICLE WIDTH: deixar texto na largura do calendário (não full-bleed) === */
body.cal-year-wide .container.article-wrapper,
body.cal-year-wide .container.howto-wrapper,
body.cal-year-wide .container.years-navigation-section,
body.cal-year-wide .container.related-tools-section,
body.cal-year-wide .container.faq-section,
body.cal-year-wide .container.calendar-month-article-shell {
    max-width: 1400px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(16px, 2vw, 32px) !important;
    padding-right: clamp(16px, 2vw, 32px) !important;
    box-sizing: border-box !important;
}

body.cal-year-wide .container.article-wrapper .article-content,
body.cal-year-wide .container.faq-section .faq-interactive-section,
body.cal-year-wide .container.calendar-month-article-shell .calendar-month-seo {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* === REFORMA 2026-04-26 v2: ocalendario tem estrutura FLAT (sem outer container) === */
/* Override FR rules that expect main > .container > .container nesting */

/* Force max-width nas seções principais (article + tool shells + faq + sectoral) */
body.cal-year-wide main#main > .container.cm-tool-shell,
body.cal-year-wide main#main > .container.calendar-month-article-shell,
body.cal-year-wide main#main > .container.tool-aux-wrapper,
body.cal-year-wide main#main > .container.faq-section,
body.cal-year-wide main#main > .container.serp-wrapper,
body.cal-year-wide main#main > .container.no-print {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(16px, 2vw, 24px) !important;
    padding-right: clamp(16px, 2vw, 24px) !important;
    box-sizing: border-box !important;
}

/* cm-tool-shell visual frame: cadre visível */
body.cal-year-wide main#main > .container.cm-tool-shell {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04) !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
}
body.dark-mode.cal-year-wide main#main > .container.cm-tool-shell {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* article-shell do mes: cadre branco com padding generoso */
body.cal-year-wide main#main > .container.calendar-month-article-shell {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 16px !important;
    padding: clamp(20px, 3vw, 40px) !important;
    margin-top: 24px !important;
    box-sizing: border-box !important;
}
body.dark-mode.cal-year-wide main#main > .container.calendar-month-article-shell {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* O artigo SEO interno fica restrito a 900px pra leitura confortável */
body.cal-year-wide main#main > .container.calendar-month-article-shell .calendar-month-seo {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* FAQ section: cadre branco padronizado */
body.cal-year-wide main#main > .container.faq-section {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 16px !important;
    padding: clamp(20px, 3vw, 40px) !important;
    margin-top: 24px !important;
}
body.dark-mode.cal-year-wide main#main > .container.faq-section {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* tool-aux-wrapper (year-sectoral-section parent): mesma largura */
body.cal-year-wide main#main > .container.tool-aux-wrapper {
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Tabelas Clima/Precipitação invertidas: coluna mês compacta */
.climate-heatmap--inverted .climate-heatmap__row-header,
.climate-heatmap--inverted .climate-heatmap__corner {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 90px !important;
    padding: 12px 8px !important;
    text-align: center !important;
}
.climate-heatmap--inverted .climate-heatmap__col-header,
.climate-heatmap--inverted .climate-heatmap__cell {
    width: auto !important;
    min-width: 90px !important;
}

/* Tabelas Clima do MÊS (climate-heatmap--month): coluna Região mais compacta */
.climate-heatmap--month .climate-heatmap__row-header,
.climate-heatmap--month .climate-heatmap__corner {
    width: 200px !important;
    min-width: 180px !important;
    max-width: 240px !important;
}

/* (rule removida 2026-04-26 v5: a constraint de largura é só no container, não em cada filho) */

/* === REFORMA 2026-04-26 v4: largura uniforme do article-shell === */
/* Container tem largura fixa, todos os filhos 100% */
body.cal-year-wide main#main > .container.calendar-month-article-shell {
    max-width: 1100px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(20px, 3vw, 36px) clamp(20px, 4vw, 56px) !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04) !important;
    box-sizing: border-box !important;
    margin-top: 24px !important;
}

/* Heading spacing controlado */
body.cal-year-wide main#main > .container.calendar-month-article-shell > h2 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
}
body.cal-year-wide main#main > .container.calendar-month-article-shell > h3 {
    margin-top: 24px;
    margin-bottom: 10px;
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
}
body.cal-year-wide main#main > .container.calendar-month-article-shell > p {
    margin-bottom: 14px;
    line-height: 1.7;
}


/* =====================================================================
   MES — refinos pos-port FR (2026-04-26.021)
   ===================================================================== */

/* Tabelas SEO arredondadas, sombra suave */
.calendar-month-seo .seo-table-wrap {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin: 14px 0 22px;
    background: #fff;
}
.calendar-month-seo .seo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.calendar-month-seo .seo-table thead th {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    color: #1e3a8a;
    font-weight: 700;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 2px solid #bfdbfe;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.calendar-month-seo .seo-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}
.calendar-month-seo .seo-table tbody tr:last-child td {
    border-bottom: none;
}
.calendar-month-seo .seo-table tbody tr:nth-child(even) {
    background: #fafbfc;
}
.calendar-month-seo .seo-table tbody tr:hover {
    background: #f0f7ff;
}

/* Heatmaps clima e precipitacao — round corners + sombra */
.calendar-month-seo .climate-heatmap,
.calendar-month-seo .precipitation-heatmap,
.calendar-month-seo .climate-heatmap--inverted {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin: 14px 0 24px;
    background: #fff;
}
.calendar-month-seo .climate-heatmap table,
.calendar-month-seo .precipitation-heatmap table,
.calendar-month-seo .climate-heatmap--inverted table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.calendar-month-seo .climate-heatmap th,
.calendar-month-seo .precipitation-heatmap th,
.calendar-month-seo .climate-heatmap--inverted th {
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 10px 8px;
    font-weight: 700;
    color: #334155;
    border-bottom: 2px solid #cbd5e1;
}
.calendar-month-seo .climate-heatmap td,
.calendar-month-seo .precipitation-heatmap td,
.calendar-month-seo .climate-heatmap--inverted td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
    border-right: 1px solid #f1f5f9;
}
.calendar-month-seo .climate-heatmap td:last-child,
.calendar-month-seo .precipitation-heatmap td:last-child,
.calendar-month-seo .climate-heatmap--inverted td:last-child {
    border-right: none;
}
.calendar-month-seo .climate-heatmap tr:last-child td,
.calendar-month-seo .precipitation-heatmap tr:last-child td,
.calendar-month-seo .climate-heatmap--inverted tr:last-child td {
    border-bottom: none;
}

/* Curiosidades — info box bonita */
.calendar-month-seo .seo-info-box.seo-info-box--amber {
    border-radius: 14px;
    border: 1px solid #fde68a;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    padding: 18px 22px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
    margin: 14px 0 24px;
}
.calendar-month-seo .seo-info-box.seo-info-box--amber h4 {
    margin: 0 0 12px;
    color: #92400e;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.calendar-month-seo .seo-info-box.seo-info-box--amber ol {
    margin: 0;
    padding-left: 24px;
    color: #78350f;
}
.calendar-month-seo .seo-info-box.seo-info-box--amber ol li {
    margin-bottom: 10px;
    line-height: 1.6;
    padding-left: 4px;
}
.calendar-month-seo .seo-info-box.seo-info-box--amber ol li::marker {
    color: #d97706;
    font-weight: 700;
}

/* Como usar (lv-steps--v2) — grade de 4 cards */
.calendar-month-seo .lv-steps--v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 18px 0 22px;
}
@media (max-width: 900px) {
    .calendar-month-seo .lv-steps--v2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .calendar-month-seo .lv-steps--v2 { grid-template-columns: 1fr; }
}
.calendar-month-seo .lv-steps__card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px 16px 16px;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.calendar-month-seo .lv-steps__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-color: #bfdbfe;
}
.calendar-month-seo .lv-steps__card::before {
    content: attr(data-step);
    position: absolute;
    top: -10px;
    left: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0b5bd3;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(11, 91, 211, 0.3);
}
.calendar-month-seo .lv-steps__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1e40af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 10px;
}
.calendar-month-seo .lv-steps__card-title {
    margin: 0 0 6px;
    font-size: 1rem;
    color: #0f172a;
    font-weight: 700;
}
.calendar-month-seo .lv-steps__card-desc {
    margin: 0;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.5;
}

/* FAQ — corrigir largura para acompanhar o shell editorial */
body.cal-year-wide main#main > .container.calendar-month-editorial-shell .calendar-month-faq {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}
.calendar-month-faq summary {
    list-style: none;
}
.calendar-month-faq summary::-webkit-details-marker { display: none; }
.calendar-month-faq summary::after {
    content: '+';
    float: right;
    font-size: 1.3rem;
    color: #64748b;
    transition: transform 0.2s ease;
}
.calendar-month-faq details[open] summary::after {
    content: '−';
    color: #0b5bd3;
}

/* =====================================================================
   MES — refinos pos-port FR (2026-04-26.022)
   ===================================================================== */

/* lv-what-is removed: clean any leftover left-border or top-stripe accents */
.calendar-month-seo .lv-what-is,
.calendar-month-seo .lv-what-is *::before,
.calendar-month-seo .lv-what-is *::after {
    border-left: none !important;
    border-top: none !important;
    background-image: none !important;
    box-shadow: none !important;
}
.calendar-month-seo .lv-what-is { display: none !important; }
.calendar-month-seo .cm-serp-inline { display: none !important; }

/* Topic 11 — Cultivos: legenda das fases */
.calendar-month-seo .agro-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin: 10px 0 16px;
    font-size: 0.92rem;
    color: #334155;
}
.calendar-month-seo .agro-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

/* Force FAQ width to match the editorial shell */
body.cal-year-wide main#main > .container.calendar-month-editorial-shell .calendar-month-faq,
body.cal-year-wide .calendar-month-editorial-shell .calendar-month-faq {
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
}
.calendar-month-faq {
    max-width: none !important;
    width: 100% !important;
}

/* Como usar (lv-steps--v2) — reforco de specificity para nao ser sobrescrito */
.calendar-month-editorial-shell .lv-steps--v2,
.calendar-month-seo .lv-steps--v2 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 18px 0 22px;
    list-style: none;
    padding: 0;
}
@media (max-width: 900px) {
    .calendar-month-editorial-shell .lv-steps--v2,
    .calendar-month-seo .lv-steps--v2 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
    .calendar-month-editorial-shell .lv-steps--v2,
    .calendar-month-seo .lv-steps--v2 { grid-template-columns: 1fr !important; }
}
.calendar-month-editorial-shell .lv-steps__card,
.calendar-month-seo .lv-steps__card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 22px 16px 16px !important;
    position: relative !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    margin: 0 !important;
}
.calendar-month-editorial-shell .lv-steps__card:hover,
.calendar-month-seo .lv-steps__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
    border-color: #bfdbfe !important;
}
.calendar-month-editorial-shell .lv-steps__card[data-step]::before,
.calendar-month-seo .lv-steps__card[data-step]::before {
    content: attr(data-step);
    position: absolute;
    top: -10px;
    left: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0b5bd3;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(11, 91, 211, 0.3);
}

/* Bottom-page ad: full bleed (sai do .container) */
.googleads-bottom-page {
    width: 100vw;
    max-width: none; /* anula max-width:1000px de style.css; sem isso a largura cai p/ 1000
                        mas a margem negativa do full-bleed permanece e joga a barra p/ esquerda */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    text-align: center;
    padding: 16px 0;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}
.googleads-bottom-page > * {
    max-width: 1280px;
    margin: 0 auto;
}

/* =====================================================================
   MES — feriados pintados de vermelho (consistencia com modo ano)
   ===================================================================== */
.calendar-month-grid .calendar-month-day.holiday,
.calendar-month-grid .calendar-month-day.calendar-day.holiday {
    background: #fdebec !important;
    border-color: #f6c6cc !important;
    color: #c0392b !important;
}
.calendar-month-grid .calendar-month-day.holiday > time {
    color: #c0392b !important;
    font-weight: 700 !important;
}
.calendar-month-grid .calendar-month-day.weekend.holiday {
    background: #fbd6da !important;
}
body.dark-mode .calendar-month-grid .calendar-month-day.holiday {
    background: rgba(255, 69, 58, 0.12) !important;
    border-color: rgba(255, 69, 58, 0.35) !important;
    color: #ff9a94 !important;
}
body.dark-mode .calendar-month-grid .calendar-month-day.holiday > time {
    color: #ff9a94 !important;
}

/* =====================================================================
   MES — Como usar (cm-howto) — versao limpa, sem heranca de lv-steps
   ===================================================================== */
.calendar-month-seo .cm-howto,
.calendar-month-editorial-shell .cm-howto {
    list-style: none;
    margin: 18px 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    counter-reset: cmhowto;
}
@media (max-width: 900px) {
    .calendar-month-seo .cm-howto,
    .calendar-month-editorial-shell .cm-howto { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .calendar-month-seo .cm-howto,
    .calendar-month-editorial-shell .cm-howto { grid-template-columns: 1fr; }
}
.calendar-month-seo .cm-howto__step,
.calendar-month-editorial-shell .cm-howto__step {
    counter-increment: cmhowto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 26px 16px 16px;
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    margin: 0;
    list-style: none;
    display: block;
}
.calendar-month-seo .cm-howto__step::before,
.calendar-month-editorial-shell .cm-howto__step::before {
    content: counter(cmhowto);
    position: absolute;
    top: -12px;
    left: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b5bd3 0%, #1d4ed8 100%);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(11, 91, 211, 0.35);
}
.calendar-month-seo .cm-howto__step:hover,
.calendar-month-editorial-shell .cm-howto__step:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: #bfdbfe;
}
.calendar-month-seo .cm-howto__icon,
.calendar-month-editorial-shell .cm-howto__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1e40af;
    font-size: 1.05rem;
    margin-bottom: 10px;
}
.calendar-month-seo .cm-howto__title,
.calendar-month-editorial-shell .cm-howto__title {
    margin: 0 0 6px;
    font-size: 1rem;
    color: #0f172a;
    font-weight: 700;
    line-height: 1.3;
}
.calendar-month-seo .cm-howto__desc,
.calendar-month-editorial-shell .cm-howto__desc {
    margin: 0;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.55;
}
body.dark-mode .calendar-month-seo .cm-howto__step,
body.dark-mode .calendar-month-editorial-shell .cm-howto__step {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .calendar-month-seo .cm-howto__title,
body.dark-mode .calendar-month-editorial-shell .cm-howto__title { color: #e2e8f0; }
body.dark-mode .calendar-month-seo .cm-howto__desc,
body.dark-mode .calendar-month-editorial-shell .cm-howto__desc { color: #cbd5e1; }

/* =====================================================================
   ANO/MES — Links dentro das tabelas (cal-table-data, seo-table)
   Visual limpo: azul forte do site, sem sublinhado fraco e cor pálida.
   ===================================================================== */
.cal-table-data a,
.cal-table-wrap a,
.calendar-month-seo .seo-table a,
.calendar-month-seo .seo-table-wrap a,
body.cal-year-wide .article-content a,
body.cal-year-wide .calendar-month-article-shell a,
body.cal-year-wide .year-sectoral-section a {
    color: #0b5bd3;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cal-table-data a:hover,
.cal-table-wrap a:hover,
.calendar-month-seo .seo-table a:hover,
.calendar-month-seo .seo-table-wrap a:hover,
body.cal-year-wide .article-content a:hover,
body.cal-year-wide .calendar-month-article-shell a:hover,
body.cal-year-wide .year-sectoral-section a:hover {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
    background: rgba(11, 91, 211, 0.06);
}
.cal-table-data a:visited,
.cal-table-wrap a:visited,
.calendar-month-seo .seo-table a:visited,
.calendar-month-seo .seo-table-wrap a:visited {
    color: #0b5bd3;
}
body.dark-mode .cal-table-data a,
body.dark-mode .cal-table-wrap a,
body.dark-mode .calendar-month-seo .seo-table a,
body.dark-mode .calendar-month-seo .seo-table-wrap a,
body.dark-mode.cal-year-wide .article-content a,
body.dark-mode.cal-year-wide .calendar-month-article-shell a,
body.dark-mode.cal-year-wide .year-sectoral-section a {
    color: #60a5fa;
}
body.dark-mode .cal-table-data a:hover,
body.dark-mode .cal-table-wrap a:hover,
body.dark-mode .calendar-month-seo .seo-table a:hover,
body.dark-mode .calendar-month-seo .seo-table-wrap a:hover {
    color: #93c5fd;
    border-bottom-color: #93c5fd;
    background: rgba(96, 165, 250, 0.10);
}

/* =====================================================================
   MES — Filtros do "Personalizar" (client-side, sem reload)
   Body classes: cal-hide-luas, cal-hide-estacoes, cal-hide-estaduais,
   cal-hide-municipais. Aplicadas pelo JS antes do paint.
   ===================================================================== */

/* Lua: os badges dentro dos dias ficam sempre visíveis; o toggle controla
   apenas as listas abaixo do calendário, alinhado ao modo ano. */
body.cal-hide-luas .month-holiday-list-screen li[data-item-type="moon"],
body.cal-hide-luas .mycity-month-meta-moon {
    display: none !important;
}
body.cal-hide-luas .calendar-month-day.moon-phase-day {
    /* destaque mantido no quadrado do dia */
}

/* Estações: esconde o bloco "🌸 Estação em [mês]" */
body.cal-hide-estacoes .calendar-month-seo [data-section="estacoes"] {
    display: none !important;
}
body.cal-hide-estacoes .calendar-month-timeline-list li[data-item-type="season"] {
    display: none !important;
}
/* Esconde o stat de Estação no panorama */
body.cal-hide-estacoes .panorama-stats-grid [data-stat="estacao"] {
    display: none !important;
}

/* Estaduais/Municipais: ainda não há dados renderizados, mas reservamos
   os hooks. Se no futuro o SSR injetar feriados estaduais com classes
   .holiday--estadual / .holiday--municipal, basta esconder/mostrar aqui. */
body.cal-hide-estaduais .calendar-month-day.holiday--estadual,
body.cal-hide-estaduais .calendar-month-day .holiday-day-label--estadual {
    display: none !important;
}
body.cal-hide-municipais .calendar-month-day.holiday--municipal,
body.cal-hide-municipais .calendar-month-day .holiday-day-label--municipal {
    display: none !important;
}

/* =====================================================================
   PERSONALIZAR — filtro de profundidade (Padrão/Todas), client-side
   body[data-cal-depth="1"] esconde linhas com data-event-depth >= 2.
   ===================================================================== */
body[data-cal-depth="1"] [data-event-depth="2"],
body[data-cal-depth="1"] [data-event-depth="3"] {
    display: none !important;
}
body[data-cal-depth="2"] [data-event-depth="3"] {
    display: none !important;
}

/* Feriados estaduais e municipais — quando o motor de localização traz
   o JSON e o CalendarPrefs.applyToCells() adiciona as classes nas células.
   Cores diferenciadas para distinguir do feriado nacional (vermelho). */
.calendar-month-grid .calendar-month-day.holiday--estadual:not(.holiday--municipal) {
    background: #fff7ed !important;     /* laranja claríssimo */
    border-color: #fdba74 !important;
    color: #9a3412 !important;
}
.calendar-month-grid .calendar-month-day.holiday--estadual:not(.holiday--municipal) > time {
    color: #9a3412 !important;
}
.calendar-month-grid .calendar-month-day.holiday--municipal {
    background: #fef9c3 !important;     /* amarelo claríssimo */
    border-color: #fde047 !important;
    color: #854d0e !important;
}
.calendar-month-grid .calendar-month-day.holiday--municipal > time {
    color: #854d0e !important;
}
/* Quando o usuário desliga o filtro, esconde/normaliza as células locais. */
body.cal-hide-estaduais .calendar-month-grid .calendar-month-day.holiday--estadual:not(.holiday) {
    background: inherit !important;
    border-color: inherit !important;
    color: inherit !important;
}
body.cal-hide-municipais .calendar-month-grid .calendar-month-day.holiday--municipal:not(.holiday) {
    background: inherit !important;
    border-color: inherit !important;
    color: inherit !important;
}

/* =====================================================================
   ANO — Tabela "Meses com feriados nacionais": hover linka ao mês
   no calendário acima. JS adiciona .cf-month-hover no .month-container
   correspondente; fica com glow azul.
   ===================================================================== */
.cal-months-with-holidays tbody tr.cf-month-group {
    cursor: pointer;
    transition: background 0.15s ease;
}
/* O realce de hover da linha (uniforme, dark-aware) vive no bloco de redesign 2026-06-01
   (tr.cf-month-group:hover > *). O antigo "background:#eff6ff !important" foi removido:
   nao tinha variante dark (estourava azul claro no escuro) e, junto com o hover por-celula,
   iluminava os dois lados com cores diferentes. A feature de glow no calendario (cf-month-hover
   no #annual-calendar-container, via JS) permanece abaixo. */
#annual-calendar-container .month-container.cf-month-hover {
    outline: 3px solid #0b5bd3;
    outline-offset: 4px;
    border-radius: 12px;
    box-shadow: 0 0 0 6px rgba(11, 91, 211, 0.18);
    transition: outline-color 0.15s ease, box-shadow 0.15s ease;
}
#annual-calendar-container .calendar-day.cf-date-hover {
    outline: 2px solid #0b5bd3;
    outline-offset: -2px;
    background: #dbeafe !important;
    color: #0f3f8f !important;
    font-weight: 800;
}

/* Estações do ano — célula do ícone centralizada e tipográfica */
.year-sectoral-section .seo-table td:first-child {
    font-variant-emoji: emoji;
}
.year-sectoral-section .cal-season-name {
    display: flex;
    align-items: center;
    gap: 10px;
}
.year-sectoral-section .cal-season-icon {
    width: 1.7rem;
    min-width: 1.7rem;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1;
}
.cal-section-title .fas {
    color: #0b5bd3;
    margin-right: 8px;
}

.calendar-year-summary-card {
    border: 1px solid rgba(11, 91, 211, 0.14);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
    padding: 14px;
}
.calendar-year-summary-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.calendar-year-summary-row {
    display: grid;
    grid-template-columns: minmax(145px, 0.85fr) minmax(0, 1fr);
    gap: 8px 12px;
    align-items: baseline;
    padding: 11px 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
}
.calendar-year-summary-row > span {
    color: #475569;
    font-weight: 650;
}
.calendar-year-summary-row > strong {
    color: #0f172a;
    font-size: 1.02rem;
}
.calendar-year-summary-row > small {
    grid-column: 2;
    color: #64748b;
    line-height: 1.35;
}
@media (max-width: 820px) {
    .calendar-year-summary-card__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .calendar-year-summary-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .calendar-year-summary-row > small {
        grid-column: 1;
    }
}

/* =====================================================================
   "Em resumo" e Fechamento — containers dedicados (estilo serp-wrapper).
   Padrão CPP: card de answer-style ao topo do artigo (em resumo) e
   de wrap-up ao final (fechamento), ambos com largura unificada.
   Selectors com `main#main > .container .container` para vencer as regras
   genéricas de linha ~3797 com a mesma especificidade.
   ===================================================================== */
/* Visual base do card (background, borda, sombra, padding). A largura é
   definida em regras específicas por modo (FLAT no ano, NESTED no mês). */
body.cal-year-wide main#main > .container.serp-wrapper.cm-resumo,
body.cal-year-wide main#main > .container.serp-wrapper.cm-fechamento,
body.cal-year-wide main#main > .container .container.serp-wrapper.cm-resumo,
body.cal-year-wide main#main > .container .container.serp-wrapper.cm-fechamento,
body.cal-year-wide > main > .container .container.serp-wrapper.cm-resumo,
body.cal-year-wide > main > .container .container.serp-wrapper.cm-fechamento,
body.cal-year-wide .container.serp-wrapper.cm-resumo,
body.cal-year-wide .container.serp-wrapper.cm-fechamento,
.container.serp-wrapper.cm-resumo,
.container.serp-wrapper.cm-fechamento {
    margin-left: auto !important;
    margin-right: auto !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 22px clamp(20px, 3vw, 36px) 18px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

/* MODO ANO (FLAT, $isFullWidthPage=true): cm-tool-shell renderiza em 1200px
   via regra body.cal-year-wide main#main > .container.cm-tool-shell. Aqui
   alinha cm-resumo/cm-fechamento à mesma largura. */
body.cal-year-wide main#main > .container.serp-wrapper.cm-resumo,
body.cal-year-wide main#main > .container.serp-wrapper.cm-fechamento {
    max-width: 1200px !important;
    width: 100% !important;
}

/* MODO MÊS (NESTED, $isFullWidthPage NÃO setado): a header.php abre
   .container externa, cm-tool-shell e calendar-month-editorial-shell ficam
   em 1080px (regras linha ~1980). Mesma largura aqui. */
body.cal-year-wide main#main > .container .container.serp-wrapper.cm-resumo,
body.cal-year-wide main#main > .container .container.serp-wrapper.cm-fechamento,
body.cal-year-wide > main > .container .container.serp-wrapper.cm-resumo,
body.cal-year-wide > main > .container .container.serp-wrapper.cm-fechamento {
    max-width: 1080px !important;
    width: 100% !important;
}
.container.serp-wrapper.cm-resumo,
.container.serp-wrapper.cm-fechamento {
    background: #fff;
}
.container.serp-wrapper.cm-fechamento {
    margin-top: 30px;
}
.container.serp-wrapper.cm-resumo .article-content > h2,
.container.serp-wrapper.cm-fechamento .article-content > h2 {
    margin: 0 0 10px;
    font-size: clamp(1.1rem, 1.4vw, 1.35rem);
    color: #0f172a;
    font-weight: 700;
}
.container.serp-wrapper.cm-resumo p,
.container.serp-wrapper.cm-fechamento p {
    margin: 0 0 10px;
    line-height: 1.65;
    color: #1f2937;
}
.container.serp-wrapper.cm-resumo p:last-child,
.container.serp-wrapper.cm-fechamento p:last-child {
    margin-bottom: 0;
}
/* cm-resumo/cm-fechamento no dark: a regra light (linha ~6764) tem `background:#fff
   !important` com seletor main#main (alta especificidade), entao o override dark precisa
   de igual especificidade + !important pra vencer (senao o card fica branco no dark). */
body.cal-year-wide.dark-mode main#main > .container.serp-wrapper.cm-resumo,
body.cal-year-wide.dark-mode main#main > .container.serp-wrapper.cm-fechamento,
body.cal-year-wide.dark-mode main#main > .container .container.serp-wrapper.cm-resumo,
body.cal-year-wide.dark-mode main#main > .container .container.serp-wrapper.cm-fechamento,
body.dark-mode .container.serp-wrapper.cm-resumo,
body.dark-mode .container.serp-wrapper.cm-fechamento {
    background: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .container.serp-wrapper.cm-resumo .article-content > h2 { color: #e2e8f0; }
body.dark-mode .container.serp-wrapper.cm-fechamento .article-content > h2 { color: #6ee7b7; }
body.dark-mode .container.serp-wrapper.cm-resumo p,
body.dark-mode .container.serp-wrapper.cm-fechamento p { color: #cbd5e1; }

/* =====================================================================
   📊 Resumo do ano — lista de uma coluna: rótulo à esquerda, valor à
   direita. Linhas separadas por borda; tabela enquadrada.
   ===================================================================== */
.cf-summary-list {
    margin: 14px 0 22px;
    padding: 0;
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    font-size: 0.95rem;
}
.cf-summary-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
    margin: 0;
}
.cf-summary-list > div:last-child {
    border-bottom: none;
}
.cf-summary-list > div:nth-child(even) {
    background: #fafbfc;
}
.cf-summary-list dt {
    color: #475569;
    font-weight: 500;
    margin: 0;
    flex: 0 0 auto;
}
.cf-summary-list dd {
    margin: 0;
    color: #0f172a;
    font-weight: 700;
    text-align: right;
    line-height: 1.4;
}
body.dark-mode .cf-summary-list {
    border-color: #334155;
    background: #1e293b;
}
body.dark-mode .cf-summary-list > div {
    border-bottom-color: #334155;
}
body.dark-mode .cf-summary-list > div:nth-child(even) {
    background: #243044;
}
body.dark-mode .cf-summary-list dt { color: #94a3b8; }
body.dark-mode .cf-summary-list dd { color: #e2e8f0; }

/* Margem topo do fechamento (separação após FAQ). */
body.cal-year-wide main#main > .container.serp-wrapper.cm-fechamento,
body.cal-year-wide main#main > .container .container.serp-wrapper.cm-fechamento,
.container.serp-wrapper.cm-fechamento {
    margin-top: 30px !important;
}

/* =====================================================================
   Callout "🌕 Fases da Lua" — visual em destaque, alta legibilidade.
   ===================================================================== */
.cal-moon-callout {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 18px 24px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    text-align: left !important;
}
.cal-moon-callout__icon {
    flex: 0 0 auto;
    font-size: 2rem;
    line-height: 1;
}
.cal-moon-callout p {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #0f172a !important;
}
.cal-moon-callout__link {
    color: #0b5bd3 !important;
    font-weight: 700 !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
    margin-left: 4px;
}
.cal-moon-callout__link:hover,
.cal-moon-callout__link:focus {
    color: #1d4ed8 !important;
    border-bottom-color: #1d4ed8;
}
body.dark-mode .cal-moon-callout {
    background: #1e293b !important;
    border-color: #475569 !important;
}
body.dark-mode .cal-moon-callout p { color: #e2e8f0 !important; }
body.dark-mode .cal-moon-callout__link { color: #60a5fa !important; }

/* =====================================================================
   Climate / Precipitation heatmaps — alinhar com o padrão visual de
   .cal-table-data (Aniversários históricos): cantos arredondados,
   borda fina, sombra suave. Sai do estilo "flat" original.
   ===================================================================== */
.climate-heatmap-wrap {
    border-radius: 18px !important;
    border: 1px solid #d9e4f0 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;
    overflow-x: auto !important;
    margin: 14px 0 22px !important;
}
.climate-heatmap {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.climate-heatmap thead th {
    background: linear-gradient(180deg, #edf6ff 0%, #dcecff 100%) !important;
    color: #143252 !important;
    font-weight: 800 !important;
    border-bottom: 1px solid #c9dbef !important;
    text-transform: uppercase;
}
.climate-heatmap__corner,
.climate-heatmap__row-header {
    background: #ffffff !important;
}
.climate-heatmap tbody tr:nth-child(even) .climate-heatmap__row-header {
    background: #f9fcff !important;
}
.climate-heatmap tbody tr:last-child .climate-heatmap__cell:first-child,
.climate-heatmap tbody tr:last-child .climate-heatmap__row-header {
    border-bottom-left-radius: 0;
}

body.dark-mode .climate-heatmap-wrap {
    background: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .climate-heatmap thead th {
    background: linear-gradient(180deg, rgba(100, 181, 255, 0.12) 0%, rgba(100, 181, 255, 0.06) 100%) !important;
    color: #f5f5f7 !important;
}
body.dark-mode .climate-heatmap__row-header,
body.dark-mode .climate-heatmap__corner {
    background: #1c1c1e !important;
    color: #f5f5f7 !important;
}
body.dark-mode .climate-heatmap tbody tr:nth-child(even) .climate-heatmap__row-header {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* =====================================================================
   Image credit (Orion/Artemis NASA): hide on mobile to avoid horizontal
   overflow in the hero figcaption. Visible on desktop only.
   ===================================================================== */
@media (max-width: 768px) {
    .img-credit-hide-mobile {
        display: none !important;
    }
}

/* ==========================================================================
   MESES COM FERIADOS — cards separados (um por mes) em grid responsivo.
   Owner: "separe os meses, ao inves de fazer uma tabela unica, faca separado".
   Substitui a antiga tabela unica .cal-months-with-holidays (rowspan agrupado).
   Hover/foco no card -> realce do card + glow do mes no calendario (JS em calendario/index.php). */
.cal-months-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 6px 0 2px; }
.cal-month-card { border: 1px solid #e6e6eb; border-radius: 12px; background: #ffffff; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.cal-month-card:hover, .cal-month-card.is-hover { border-color: #c8d3e8; box-shadow: 0 6px 18px rgba(15,23,42,0.10); }
.cal-month-card__title { margin: 0; padding: 10px 14px; font-size: 0.95rem; font-weight: 700; color: #1d1d1f; background: #f6f6f8; border-bottom: 1px solid #ececf0; }
.cal-month-card__list { list-style: none; margin: 0; padding: 4px 0; }
.cal-month-card__item { display: grid; grid-template-columns: max-content 1fr; grid-template-areas: "date holiday" "date dow"; column-gap: 12px; row-gap: 1px; padding: 9px 14px; align-items: baseline; }
.cal-month-card__item + .cal-month-card__item { border-top: 1px solid #f2f2f5; }
.cal-month-card__date { grid-area: date; font-weight: 700; font-variant-numeric: tabular-nums; color: #1d1d1f; font-size: 0.92rem; white-space: nowrap; }
.cal-month-card__holiday { grid-area: holiday; font-size: 0.95rem; color: #1d1d1f; line-height: 1.3; }
.cal-month-card__holiday a { color: #0b5bd3; text-decoration: none; }
.cal-month-card__holiday a:hover { text-decoration: underline; }
.cal-month-card__dow { grid-area: dow; font-size: 0.8rem; color: #6e6e73; }
body.dark-mode .cal-month-card { background: #1c1c1e; border-color: #38383a; box-shadow: none; }
body.dark-mode .cal-month-card:hover, body.dark-mode .cal-month-card.is-hover { border-color: #5a5a5e; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
body.dark-mode .cal-month-card__title { background: rgba(255,255,255,0.045); color: #f5f5f7; border-bottom-color: #38383a; }
body.dark-mode .cal-month-card__item + .cal-month-card__item { border-top-color: rgba(255,255,255,0.06); }
body.dark-mode .cal-month-card__date { color: #f5f5f7; }
body.dark-mode .cal-month-card__holiday { color: #f5f5f7; }
body.dark-mode .cal-month-card__holiday a { color: #60a5fa; }
body.dark-mode .cal-month-card__dow { color: #aeaeb2; }

/* === Bump 2026-05-16: Fix icon+nome wrap em Estacoes do ano ===
   Tabela usa td.cal-season-name dentro de .cal-table-data (year-sectoral-section).
   Primeira coluna nao quebra; ficone+nome ficam em linha unica. */
.year-sectoral-section .cal-table-data td:first-child { white-space: nowrap; }
.year-sectoral-section .cal-table-data td.cal-season-name { white-space: nowrap; }

/* ============================================================
   LARGURA MODO ANO = 1200px (padrao cross-site, alinhado ao FR) +
   CALENDARIO NU (sem caixa cm-tool-shell).
   Gate unico de largura: .cdp-tool-body via --tool-body-max-width.
   Bumpar a var alinha calendario + editorial + FAQ + barra de acoes na
   mesma borda 1200px, centrados, flex no shrink (cdp-tool-shift padding
   16px = respiro lateral identico aos outros sites).
   Escopo body.cal-year-mode = SO pagina de ano; modo mes mantem a caixa
   cm-tool-shell e suas larguras proprias.
   ============================================================ */
body.cal-year-mode .cdp-tool-shift--cal,
body.cal-year-mode .cdp-tool-shift--article {
    --tool-body-max-width: 1200px;
}
/* Todos os blocos irmaos (calendario, resumo SERP, aux, howto, FAQ, navegacao
   de anos, fechamento) seguem a MESMA borda 1200px, centrados, igual ao FR
   (referencia). Sem este reset alguns wrappers caiam a 1000/1052. */
body.cal-year-mode .cdp-tool-body > .container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Neutraliza a caixa branca cm-tool-shell so no modo ano: vira 1200px nu,
   sem fundo/borda/sombra/raio/padding, igual CDP e FR. */
body.cal-year-mode .container.cm-tool-shell {
    max-width: 1200px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
body.cal-year-mode.dark-mode .container.cm-tool-shell {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* Toolbar e corpo internos alinham a borda 1200 (sem o padding 20px da caixa). */
body.cal-year-mode .cm-tool-shell__toolbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.cal-year-mode .cm-tool-shell__body { padding: 0 !important; }

/* ============================================================
   MODO MES: unificacao cross-site (largura 1200 + resumo preenche +
   editorial flush + lua no tamanho do CDP). Escopo
   body.cal-year-wide:not(.cal-year-mode) = pagina de MES. Visual padrao = CDP.
   ============================================================ */
body.cal-year-wide:not(.cal-year-mode) .cdp-tool-shift--cal-mes,
body.cal-year-wide:not(.cal-year-mode) .cdp-tool-shift--cal,
body.cal-year-wide:not(.cal-year-mode) .cdp-tool-shift--article {
    --tool-body-max-width: 1200px;
}
body.cal-year-wide:not(.cal-year-mode) .container.cm-tool-shell,
body.cal-year-wide:not(.cal-year-mode) .container.calendar-month-editorial-shell {
    max-width: 1200px !important;
}
body.cal-year-wide:not(.cal-year-mode) .calendar-month-editorial-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
@media (min-width: 821px) {
    body.cal-year-wide:not(.cal-year-mode) .calendar-month-maion-layout,
    body.cal-year-wide:not(.cal-year-mode) .calendar-month-main-layout {
        grid-template-columns: minmax(0, 660px) minmax(340px, 1fr) !important;
        column-gap: 24px !important;
    }
}
/* <=820px: colapsa para 1 coluna (regra existente @media max-width:820 1fr). */
/* Lua no tamanho do CDP (padrao cross-site): 14px renderizado, sem contorno. */
body.cal-year-wide:not(.cal-year-mode) .calendar-month-day .moon-phase-badge {
    font-size: 14px !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ===== DARK MODE: componentes editoriais que faltavam tema escuro (owner:
   "a maioria dos elementos nao tem dark"). Tabelas SEO, heatmap climatico,
   legenda agro e linha-cabecalho zebra (inline #eff6ff). Celulas coloridas do
   heatmap sao data-viz e permanecem (so o container escurece). ===== */
body.dark-mode .seo-table-wrap {
    background: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .climate-heatmap { background: #1c1c1e !important; }
body.dark-mode .agro-legend {
    background: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .seo-table tr[style*="eff6ff"],
body.dark-mode .cal-table-data tr[style*="eff6ff"],
body.dark-mode .seo-table tr[style*="f0f7ff"],
body.dark-mode .cal-table-data tr[style*="f5f5f5"] {
    background: #2c2c2e !important;
}

/* === Editorial FLAT no modo mes (owner: wrapper de texto "muito carregado").
   So a ferramenta (cm-tool-shell__inner) tem card; wrappers de texto ficam
   transparentes, sem borda/sombra/raio. Topicos separados pelo border-bottom
   dos h2. Padrao = joursouvrables /jours-ouvrables-2026. === */
body.cal-year-wide:not(.cal-year-mode) .calendar-month-editorial-shell,
body.cal-year-wide:not(.cal-year-mode) .calendar-month-seo,
body.cal-year-wide:not(.cal-year-mode) .cm-resumo,
body.cal-year-wide:not(.cal-year-mode) .cm-resumo .article-content,
body.cal-year-wide:not(.cal-year-mode) .cm-serp-card,
body.cal-year-wide:not(.cal-year-mode) .cm-serp-card__inner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* cm-resumo (serp-wrapper) flat tambem: existe regra com id (main#main) +
   !important que da borda/fundo a todo serp-wrapper; preciso de id pra vencer.
   cm-fechamento NAO entra: e o card de fechamento (igual a referencia FR). */
body.cal-year-wide:not(.cal-year-mode) main#main .container.serp-wrapper.cm-resumo,
body.dark-mode.cal-year-wide:not(.cal-year-mode) main#main .container.serp-wrapper.cm-resumo {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* Separador ANTES de cada topico (border-top no h2), nao depois: o titulo
   inicia um novo topico em vez de parecer fechar o anterior. Primeiro h2 sem linha. */
body.cal-year-wide:not(.cal-year-mode) .calendar-month-seo h2 {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
    padding-top: 28px !important;
    margin-top: 32px !important;
}
body.dark-mode.cal-year-wide:not(.cal-year-mode) .calendar-month-seo h2 {
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}
/* Owner: "Curiosidades e marcos do mes" (seo-info-box) e demais celulas editoriais
   ficavam com TEXTO ESCURO (ex.: marrom #78350f) no dark, ilegivel. Texto claro no
   dark; heatmap fica de fora (fundo pastel exige texto escuro). */
body.dark-mode .calendar-month-seo .seo-info-box li,
body.dark-mode .calendar-month-seo .seo-info-box ol,
body.dark-mode .calendar-month-seo .seo-info-box ul,
body.dark-mode .calendar-month-seo .seo-info-box p,
body.dark-mode .calendar-month-seo .seo-info-box strong,
body.dark-mode .calendar-month-seo td:not(.climate-heatmap__cell),
body.dark-mode .calendar-month-seo th,
body.dark-mode .calendar-month-seo .dynamic-facts-box li,
body.dark-mode .calendar-month-seo .dynamic-facts-box span {
    color: #e8e8e8 !important;
}

/* === Owner 02/Jun: editorial/FAQ com wrapper TRANSPARENTE (mantem o titulo da
   secao, sem caixa). Tabelas e info-box continuam com card+separador. === */
/* (1) MODO ANO: remove o container tool-aux-wrapper (solta o conteudo p/ a largura
   plena 1200). Escopo cal-year-mode = so o ano. @media screen preserva impressao. */
body.cal-year-mode .container.tool-aux-wrapper {
    max-width: 100% !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* Secoes editoriais soltas no modo ano (container no-print direto no cdp-tool-body,
   ex.: "Estrategia de emendas", "O que e uma ponte") herdavam o card padrao do
   .container global; ficam flat tambem. */
body.cal-year-mode .cdp-tool-body > .container.no-print {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* (2) MODO MES: cm-fechamento e FAQ transparentes (wrapper mantido, titulo e
   separadores internos preservados). id (main#main) para vencer o card. */
body.cal-year-wide:not(.cal-year-mode) main#main .calendar-month-faq,
body.cal-year-wide:not(.cal-year-mode) main#main .container.serp-wrapper.cm-fechamento,
body.dark-mode.cal-year-wide:not(.cal-year-mode) main#main .calendar-month-faq,
body.dark-mode.cal-year-wide:not(.cal-year-mode) main#main .container.serp-wrapper.cm-fechamento {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}