/* ==========================================================================
   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;
    box-sizing: border-box;
    /* 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, #005bb5) 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,
/* Bump 26.8.0.24 : Phase 1 SEO niche calculateurs (depth>breadth). Sans ces
   2 entries supplementaires, /calcul-jours-ouvres et /jours-ouvrables-calcul
   ne recevaient pas le cap 1000px max-width sur containers > container, laissant
   article-wrapper/howto-wrapper/related-wrapper/faq-section visuellement
   desalignes vs hero. User a reporte "sans style, sans css, ne calcule pas". */
body.tool-calcul-jours-ouvres main#main > .container > .container,
body.tool-calcul-jours-ouvres main#main > .container > .result-area-refactored,
body.tool-jours-ouvrables-calcul main#main > .container > .container,
body.tool-jours-ouvrables-calcul 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;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    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 dans le hero : titre sec "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. */

/* Bump 26.8.0.96: aumenta largura modo ano somente no calendario COMUM
   (nao afeta tool-jours-ouvres nem tool-jours-ouvrables).
   Referencia: regra 1200px acima (linhas 313-322) : esta override soh
   bate quando body tem .tool-calendrier (calendrier/index.php).
   Validacao: tool-calendrier confirmado em core/site-config.php como
   bodyClass do calendrier (resolve_tool_from_url + flatYearMonth regex). */
body.cal-year-wide.tool-calendrier #annual-calendar-container,
body.cal-year-wide.tool-calendrier .container.cal-toolbar-wrapper,
body.cal-year-wide.tool-calendrier .container > .cal-toolbar,
body.cal-year-wide.tool-calendrier .container.tool-aux-wrapper,
body.cal-year-wide.tool-calendrier .container.year-content-wrapper,
body.cal-year-wide.tool-calendrier .container.holiday-list-container {
    max-width: 2000px !important;
}

/* Bump 26.8.0.97: forca 3-col em desktop largo no calendario COMUM modo ano.
   Sem isso, o auto-fit minmax(360px) da linha 1501 reflua de 3 cols pra 4 cols
   quando o cap sobe pra 1500px, ENCOLHENDO o mini-mes (oposto do que owner pediu).
   Combinado com cap 1500px: cada mini-mes ~500px (vs ~400px antes do bump 96). */
@media (min-width: 1080px) {
    body.cal-year-wide.tool-calendrier #annual-calendar-container {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Bump XX: paridade de largura modo ano para tool-jours-ouvres + tool-jours-ouvrables.
   Owner pediu (2026-05-11) aumentar largura do calendario E corpo abaixo nesses 2
   tools, igual feito no calendrier comum (bumps 96/97). Mesma regra cap 1500px +
   3-col em desktop largo. Referencia: bloco tool-calendrier acima (linhas 328-351).
   Validacao: tool-jours-ouvres e tool-jours-ouvrables confirmados como bodyClass
   gerados pelo registry (header.php:819 + tools_manager.php). */
body.cal-year-wide.tool-jours-ouvres #annual-calendar-container,
body.cal-year-wide.tool-jours-ouvres .container.cal-toolbar-wrapper,
body.cal-year-wide.tool-jours-ouvres .container > .cal-toolbar,
body.cal-year-wide.tool-jours-ouvres .container.tool-aux-wrapper,
body.cal-year-wide.tool-jours-ouvres .container.year-content-wrapper,
body.cal-year-wide.tool-jours-ouvres .container.holiday-list-container,
body.cal-year-wide.tool-jours-ouvrables #annual-calendar-container,
body.cal-year-wide.tool-jours-ouvrables .container.cal-toolbar-wrapper,
body.cal-year-wide.tool-jours-ouvrables .container > .cal-toolbar,
body.cal-year-wide.tool-jours-ouvrables .container.tool-aux-wrapper,
body.cal-year-wide.tool-jours-ouvrables .container.year-content-wrapper,
body.cal-year-wide.tool-jours-ouvrables .container.holiday-list-container {
    max-width: 2000px !important;
}
@media (min-width: 1080px) {
    body.cal-year-wide.tool-jours-ouvres #annual-calendar-container,
    body.cal-year-wide.tool-jours-ouvrables #annual-calendar-container {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Bump 26.8.0.114 (owner fez 3a vez): ferramenta + elementos abaixo devem ter
   a largura do article-wrapper SEM o padding, alinhado com cal-toolbar.
   article-wrapper original = 1200px outer (linhas 451+). Owner: tudo abaixo do
   hero deve ficar nessa largura, NAO maior. Voltei --tool-body-max-width: 1200. */
body.tool-calendrier .cdp-tool-shift--article,
body.tool-jours-ouvres .cdp-tool-shift--article,
body.tool-jours-ouvrables .cdp-tool-shift--article {
    --tool-body-max-width: 1200px;
}
/* Bump 26.8.0.116 (owner pediu de novo): SSR imprimer/pdf : body 1500 com
   sidebar 320 ao lado (NAO removida). Bump 115 errei e empurrei sidebar pra
   row 2 (essencialmente sumindo). Owner: "vc soh removeu o sidebar ads, nao
   aumentou a largura... refaça e volte o sidebar ads". CORRETO: aumentar
   --tool-body-max-width 1200 → 1500 EXCLUSIVAMENTE em cal-intent-mode (default
   view mantem 1200 : calendar OK conforme bump 114). Outer cdp-tool-shift
   max-width ampliado 1600 → 1900 para acomodar 1500 body + 32 gap + 320
   sidebar + 16 padding = 1868. Grid 2-col mantido (default sidebar.css). */
body.cal-intent-mode .cdp-tool-shift--article {
    --tool-body-max-width: 1500px;
    max-width: 1900px !important;
}
/* Bump 114: forca 3-col com selectores agressivos cobrindo TODOS os pathways
   (cal-year-wide tool-*, cal-intent-mode imprimer/pdf, data-mode atributos).
   Bumps 97-112 nao bateram em /calendrier-2026-imprimer e /calendrier-2026-pdf
   por algum motivo de cascade : owner reportou 3 vezes seguidas. Esta versao
   usa html body para max specificity + cobre todos os data-mode SSR. */
@media (min-width: 900px) {
    body.cal-year-wide #annual-calendar-container,
    body.cal-intent-mode #annual-calendar-container,
    html body #annual-calendar-container[data-mode="imprimer"],
    html body #annual-calendar-container[data-mode="pdf"],
    html body #annual-calendar-container[data-mode="default"] {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Bump XX: aspect-ratio 1/1 nas day-cells para alinhar ao .calendar-week-cell
   que ja tem aspect-ratio 1/1 (linha ~2755). Sem isso, days ficavam achatados
   (min-height 32px) vs week-cells quadrados. Combinado com edicao da regra
   .calendar-grid--with-weeks (grid 8x1fr) garante cells uniformes. Owner: "todos
   quadrados dos dias devem ser iguais ao quadrado da semana". */
body.cal-year-wide #annual-calendar-container .calendar-day {
    aspect-ratio: 1 / 1;
    min-height: 0;
}

/* 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: #005bb5;
    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. */
/* Bump 26.8.0.114 (owner pediu 3a vez): max-width revertido 1500 → 1200 (original).
   Padding lateral REMOVIDO (owner: "remova esse padding absurdo"). Padding vertical
   reduzido 24 → 16. Resultado: article-wrapper agora se comporta como referencia
   visual de largura (1200 outer ≈ cal-toolbar outer) e o conteudo dentro se extende
   ate as bordas do card sem padding lateral. */
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: 0 !important;
    padding-right: 0 !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    margin-top: 32px !important;
    margin-bottom: 32px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Conteudo interno do article/howto/faq mantem padding lateral discreto para
   texto nao colar nas bordas do card. */
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 > * {
    padding-left: 20px;
    padding-right: 20px;
}
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;
    }
}

/* En-tetes de colonnes Lun-Dim : Sam/Dim en rouge tradition */
body.cal-year-wide .calendar-month-grid .calendar-month-weekday.weekend-header,
body.cal-year-wide .calendar-month-grid .calendar-month-weekday:nth-child(6):not(.weekend-header):not(.calendar-month-grid--with-weeks *),
body.cal-year-wide .calendar-month-grid .calendar-month-weekday:nth-child(7):not(.weekend-header):not(.calendar-month-grid--with-weeks *) {
    color: #c0392b;
}

/* 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: 2000px !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, #005bb5);
    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, #005bb5);
    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: #005bb5;
    border-color: #005bb5;
    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;
}
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:not([hidden]) {
    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;
}
/* F1.4 fix mirror DE: gating display:flex com :not([hidden]) +
   regra explicita [hidden] pra vencer especificidade do scope cal-year-wide.
   Razao: regra acima tem specificity (0,2,1) com display:flex que sobrepunha
   o atributo [hidden] do panel fechado. */
body.cal-year-wide .cal-dashboard[hidden] {
    display: none !important;
}

/* -------- 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); }

/* =====================================================================
   Bump 26.8.0.21 : Tarefa C : close bar embaixo no Personnaliser modal
   mobile. Pattern espelhado em du-nav-advanced-modal-footer (jours-ouvres.css
   linha 2681-2695) que ja tem o "Fermer" button sticky bottom.
   Causa raiz: cal-dashboard mobile so tem X no header (canto superior); user
   pediu "todos modais no mobile deve ter uma barra de fechar embaixo".
   Referencia: jours-ouvres.css:2681 .du-nav-advanced-modal-footer +
   :2691 .du-nav-advanced-close-bottom (markup ja existente em jours-ouvres
   funcionando).
   Validacao: abrir Personnaliser em mobile (cal/mois) → ver botao "Fermer"
   sticky no rodape do panel.
   ===================================================================== */
/* Default: close-bottom button hidden em desktop. */
body.cal-year-wide .cal-dashboard__close-bottom {
    display: none;
}
/* En mois.php le footer ne contient QUE le close-bottom (pas de reset). En desktop
   le close-bottom est hidden, donc le footer serait vide avec padding/border.
   :has() cache footer sans children visibles. Fallback si :has non supporte:
   le footer reste avec hauteur minimale (juste border-top + padding) : visuellement
   neutre. */
@media (min-width: 769px) {
    body.cal-year-wide .cal-dashboard__footer:has(> .cal-dashboard__close-bottom:only-child) {
        display: none;
    }
}
/* Mobile : sticky en bas, full width. Pattern Apple iOS modal action. */
@media (max-width: 768px) {
    body.cal-year-wide .cal-dashboard__close-bottom {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        padding: 12px 16px;
        background: #007aff;
        color: #ffffff;
        border: 0;
        border-radius: 10px;
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        cursor: pointer;
        transition: background-color 0.15s ease, transform 0.12s ease;
    }
    body.cal-year-wide .cal-dashboard__close-bottom:hover {
        background: #0062cc;
    }
    body.cal-year-wide .cal-dashboard__close-bottom:active {
        transform: scale(0.98);
    }
    /* Footer no mobile vira flex column + sticky bottom pra agrupar reset
       (acima) + fermer (abaixo). Cresce pra receber 2 botoes. */
    body.cal-year-wide .cal-dashboard__footer {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        position: sticky;
        bottom: 0;
        background: #ffffff;
        padding-top: 12px;
    }
    body.cal-year-wide.dark-mode .cal-dashboard__footer {
        background: #1c1c1e;
    }
    /* Reset button : full width em mobile pra alinhar com close-bottom */
    body.cal-year-wide .cal-dashboard__footer .cal-dashboard__reset {
        width: 100%;
        text-align: center;
        padding: 10px 16px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 10px;
    }
    body.cal-year-wide.dark-mode .cal-dashboard__footer .cal-dashboard__reset {
        border-color: rgba(255, 255, 255, 0.10);
    }
}
body.cal-year-wide.dark-mode .cal-dashboard__close-bottom {
    background: #0a84ff;
}
body.cal-year-wide.dark-mode .cal-dashboard__close-bottom:hover {
    background: #2e9bff;
}
/* TODO bump futuro : aplicar mesmo pattern pra .refactored-modal generico
   do site (modais de detalhes do mes, contact form, etc). Markup atual
   nao tem footer modal, precisaria injecao JS minimal. */

/* ==========================================================================
   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;
    /* Port DE (2026-05-11): auto-fit unique au lieu de force repeat(3,1fr) en
       desktop. Permet reflow 3 -> 2 -> 1 col selon largeur viewport. minmax
       360px (vs 280px ancien) garantit cells lisibles. */
    grid-template-columns: repeat(auto-fit, minmax(360px, 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;
}

/* -------- Carte de mois --------
   Port DE (2026-05-11): overflow:hidden -> visible (cells ne sont plus clippees
   en squeeze viewport); padding lateral asymetrique 15px 20px 15px 15px pour
   respiro a droite; min-width:0 permet shrinking dans le parent grid. */
body.cal-year-wide #annual-calendar-container .month-container {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 15px 20px 15px 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: visible;
    min-width: 0;
    z-index: 1;
}
body.cal-year-wide #annual-calendar-container .month-container::before { content: none; }
/* Bump 26.8.0.117 (owner): hover/focus de meses REMOVIDOS : nao mais translate
   nem shadow no hover. Apenas focus-visible mantido para acessibilidade. */
body.cal-year-wide #annual-calendar-container .month-container:focus-visible {
    outline: 2px solid rgba(120, 130, 145, 0.35);
    outline-offset: 2px;
}

/* Bump 26.8.0.120: removido o bloco .cdp-ad-banner-top do bump 119 : markup
   foi removida porque header_banner ja e emitido automaticamente por header.php
   sob o marker .banner-ad-below-header (com .cdp-ad-label "Publicité" + ad). */

/* Bump 26.8.0.118: estilo dedicado para botoes na intent-action-row das SSR
   imprimer/pdf views. Antes os botoes herdavam .cm-tool-actions__buttons
   .btn-action que tem width:100% : virava barras esticadas. Agora botoes
   inline com cores solidas (azul AdSense pra imprimer/back, vermelho pra pdf). */
.intent-action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 16px auto 24px !important;
}
.intent-action-row .btn-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}
.intent-action-row .btn-action i {
    font-size: 0.95em !important;
}
.intent-action-row .btn-action.btn-print {
    background: #005bb5 !important;
    color: #fff !important;
    border-color: #005bb5 !important;
}
.intent-action-row .btn-action.btn-print:hover,
.intent-action-row .btn-action.btn-print:focus-visible {
    background: #0061c2 !important;
    border-color: #0061c2 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.25) !important;
    transform: translateY(-1px) !important;
}
.intent-action-row .btn-action.btn-custom-pdf {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
}
.intent-action-row .btn-action.btn-custom-pdf:hover,
.intent-action-row .btn-action.btn-custom-pdf:focus-visible {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
    transform: translateY(-1px) !important;
}
.intent-action-row .btn-action.btn-back-calendar {
    background: #fff !important;
    color: #005bb5 !important;
    border-color: rgba(0, 113, 227, 0.4) !important;
}
.intent-action-row .btn-action.btn-back-calendar:hover,
.intent-action-row .btn-action.btn-back-calendar:focus-visible {
    background: #f0f7ff !important;
    border-color: #005bb5 !important;
    color: #005bb5 !important;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.18) !important;
    transform: translateY(-1px) !important;
}
/* Dark mode counterparts */
body.dark-mode .intent-action-row .btn-action.btn-back-calendar {
    background: #1c1c1e !important;
    color: #64b1ff !important;
    border-color: rgba(100, 177, 255, 0.35) !important;
}
body.dark-mode .intent-action-row .btn-action.btn-back-calendar:hover,
body.dark-mode .intent-action-row .btn-action.btn-back-calendar:focus-visible {
    background: #2a2a2c !important;
    border-color: #64b1ff !important;
    color: #64b1ff !important;
}

/* -------- 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: #005bb5;
    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 --------
   Port DE (2026-05-11): minmax(0, 1fr) au lieu de 1fr permet shrinking,
   min-width: 0 pour reflow correct dans le parent grid. */
body.cal-year-wide #annual-calendar-container .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
    font-size: 0.9em;
    gap: 3px;
    margin-bottom: 10px;
    padding: 0 8px 0 4px;
    background: transparent;
    min-width: 0;
    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;
}
/* Grille annuelle = toujours .calendar-grid--with-weeks : 1re colonne = numero de
   semaine (S). Les jours sont donc en nth-child 2..8 (lun=2 ... sam=7, dim=8).
   Sam/Dim en rouge = nth-child(7) et (8), pas (6)/(7). */
body.cal-year-wide #annual-calendar-container .calendar-header-day:nth-child(7),
body.cal-year-wide #annual-calendar-container .calendar-header-day:nth-child(8) {
    color: #ff3b30;
}
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
   Bump 26.8.0.104: skill moderna Apple-style : quadrado visivel + aspect-ratio 1/1
   forcado para alinhar ao .calendar-week-cell. Owner: "calendario muito feiinho,
   dias retangulares e soltos". Fix: bg #fafafd off-white sutil + box-shadow inset
   1px rgba 0.05 dando definicao crisp de borda sem peso visual. Combinado com
   cap container 1700px + 3-col forçado em desktop ≥1080px, cada cell vira ~63px
   quadrado real (vs ~55px retangular antes). */
body.cal-year-wide #annual-calendar-container .calendar-day {
    position: relative;
    padding: 0;
    border-radius: 6px;
    font-size: 0.95em;
    color: #1d1d1f;
    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, box-shadow 0.14s ease;
    cursor: default;
    aspect-ratio: 1 / 1;
    min-height: 0;
}
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: #e8e8ed;
    color: #3c3c43;
    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;
}
/* Issue 3 (suite, vue annuelle) : le separateur unique vit sur le conteneur
   .mycity-month-meta-layout. Les listes internes (feries + lune) ne portent PAS
   leur propre border-top, sinon on voit 3 traits au lieu d'un seul (le superieur).
   La regle ID #annual-calendar-container l'emportait sur l'override de calendrier.css,
   d'ou ce neutralisant a specificite egale (border-top:0 tue largeur+style en light ET
   dark, la regle dark ne fixant que border-top-color). */
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: #005bb5;
    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;
}
/* WCAG dark-mode pour le calendrier annuel large : meme palette eclaircie que la version mensuelle. */
body.cal-year-wide.dark-mode #annual-calendar-container .month-holiday-list-screen li[data-item-type="holiday"] strong,
body.cal-year-wide.dark-mode #annual-calendar-container .month-holiday-list-screen li[data-item-type="holiday"] span {
    color: #fca5a5;
}
body.cal-year-wide.dark-mode #annual-calendar-container .month-holiday-list-screen li[data-item-type="season"] strong,
body.cal-year-wide.dark-mode #annual-calendar-container .month-holiday-list-screen li[data-item-type="season"] span {
    color: #fcd34d;
}
body.cal-year-wide.dark-mode #annual-calendar-container .month-holiday-list-screen li[data-item-type="event"] strong,
body.cal-year-wide.dark-mode #annual-calendar-container .month-holiday-list-screen li[data-item-type="event"] span {
    color: #cbd5e1;
}
body.cal-year-wide.dark-mode #annual-calendar-container .month-holiday-list-screen li[data-item-type="moon"] strong,
body.cal-year-wide.dark-mode #annual-calendar-container .month-holiday-list-screen li[data-item-type="moon"] span {
    color: #a5b4fc;
}

/* -------- 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);
}
/* Bump 26.8.0.117: dark-mode hover de mes REMOVIDO. Apenas :focus-visible mantido
   para acessibilidade keyboard. */
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-header-day:nth-child(7),
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-header-day:nth-child(8) { color: #ff453a; }
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.10); 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: #005bb5; }
.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;
    color: #0f172a !important;
}
.cm-tool-actions__buttons .btn-action .icon {
    flex-shrink: 0;
    color: #005bb5;
    display: inline-flex;
    align-items: center;
    font-size: 1em !important;
}
.cm-tool-actions__buttons .btn-action.btn-print .icon { color: #005bb5; }
.cm-tool-actions__buttons .btn-action.btn-custom-pdf .icon { color: #dc2626; }
.cm-tool-actions__buttons .btn-action.btn-share .icon { color: #005bb5; }
.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; }

/* Bump 26.8.0.19 : mobile fit des 3 boutons (Imprimer/PDF/Partager). User a reporte
   "les 3 ne tiennent pas sur la meme ligne, debordent, desconfigures". Item 2c du feedback
   (couvre TOUS les outils avec .cm-tool-actions__buttons + .btn-action isoles).
   <=720px : 1 colonne stack (texte reste visible complet, ergonomie mobile).
   <=380px : padding/font reduits. */
@media (max-width: 720px) {
    .cm-tool-actions__buttons {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .cm-tool-actions__buttons .btn-action {
        padding: 12px 14px !important;
        font-size: 0.95rem !important;
    }
    .cm-tool-actions__label strong { font-size: 0.95rem; }
    .cm-tool-actions__label small { font-size: 0.78rem; }
    .cm-tool-actions {
        padding: 12px 12px 10px;
    }
}
/* .btn-action standalone (sans .cm-tool-actions__buttons wrapping): deborde aussi
   en mobile car flex-row sans max-width. Force wrap+full
   width quand frere d'un autre .btn-action. Couvre /calendrier-{y} (lignes 1567/1576/1588),
   calculateur-de-delai (630/637/644), compteur-de-jours, etc. */
@media (max-width: 720px) {
    .btn-action {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Container flex/grid de .btn-action isoles: stack vertical en mobile */
    .btn-action + .btn-action {
        margin-top: 0;
    }
    /* Parents communs qui regroupent .btn-action isoles */
    .calendar-actions-row,
    .actions-row,
    .calendar-action-buttons,
    .calendar-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .calendar-actions-row > .btn-action,
    .actions-row > .btn-action,
    .calendar-action-buttons > .btn-action,
    .calendar-actions > .btn-action {
        width: 100% !important;
        max-width: 100% !important;
    }
}
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;
    /* Pas de sous-boite : les boutons (Imprimer/PDF/Partager) sont poses directement
       sous le calendrier, alignes aux memes bords que #annual-calendar-container, sans
       le fond/bordure/radius/padding du pattern .cm-tool-actions (evite box-dans-box,
       coherent avec le mode mois .cm-tool-actions--flush). background !important bat les
       overrides dark-mode .cm-tool-actions #111827 (jours-ouvres.css:2887 + calendar-year:2110). */
    background: transparent !important;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* ==========================================================================
   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--H { background: #ff9500; } /* Pleine saison = orange */
.agro-badge--A { background: #34c759; } /* Disponible = vert */
.agro-badge--L { background: #d97706; } /* Conservation/entreposage = ambre */
.agro-badge--idle { background: #e5e5ea; color: #8e8e93; }

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

/* Bump 2026-05-16: Matrice agricole compacte (réduit largeur des colonnes mois). */
.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 : 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);
}

/* Bump 2026-05-16: cards "Mois avec fériés" — substitui tabela rowspan ruim de scan. */
.cf-months-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin: 16px 0;
}
.cf-month-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}
.cf-month-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}
.cf-month-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    text-transform: capitalize;
}
.cf-month-card__count {
    font-size: 0.78rem;
    font-weight: 600;
    color: #ffffff;
    background: #005bb5;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.cf-month-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cf-month-card__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px dashed #f1f5f9;
}
.cf-month-card__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.cf-month-card__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
}
.cf-month-card__name a {
    color: #005bb5;
    text-decoration: none;
}
.cf-month-card__name a:hover { text-decoration: underline; }
.cf-month-card__date {
    font-size: 0.82rem;
    color: #64748b;
}
body.dark-mode .cf-month-card {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
body.dark-mode .cf-month-card__header { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.dark-mode .cf-month-card__title { color: #f5f5f7; }
body.dark-mode .cf-month-card__count { background: #0a84ff; }
body.dark-mode .cf-month-card__item { border-bottom-color: rgba(255, 255, 255, 0.04); }
body.dark-mode .cf-month-card__name { color: #e5e5ea; }
body.dark-mode .cf-month-card__name a { color: #64b5ff; }
body.dark-mode .cf-month-card__date { color: #98989d; }

body.dark-mode .year-sectoral-section {
    /* Pas de capsule grise en dark : titre + texte sur le fond de la page (comme en
       clair). Seule la table garde un fond. */
    background: transparent;
    border: 0;
    box-shadow: none;
}
/* Separateur ENTRE les topics: border-BOTTOM en fin de chaque topic (apres le contenu),
   PAS apres le dernier (:not(:last-of-type)). Couvre les deux conteneurs selon le site:
   .tool-aux-wrapper (ocalendario/CDP) et .cal-year-article (joursouvrables).
   (Avant: border-top, colle au titre suivant.) */
.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;
}

/* WCAG dark-mode: les sections sectorielles utilisent des inline-styles
   `color:#555` / `color:#666` (notes et legendes baked dans index.php).
   Ces overrides eclairent ces gris pour atteindre 4.5:1 sur fond sombre. */
body.dark-mode .year-sectoral-section > p[style*="#666"],
body.dark-mode .year-sectoral-section .cal-table-data td[style*="#555"],
body.dark-mode .year-sectoral-section .cal-table-data td[style*="#666"] {
    color: #aeaeb2 !important;
}

/* WCAG dark-mode: cellules avec couleurs inline (rouge feries, violet ponts).
   #dc2626 et #7c3aed echouent sur fond sombre, on eclaircit. */
body.dark-mode .year-sectoral-section .cal-table-data td[style*="#dc2626"] {
    color: #fca5a5 !important;
}
body.dark-mode .year-sectoral-section .cal-table-data td[style*="#7c3aed"] {
    color: #c4b5fd !important;
}

/* WCAG dark-mode: lignes mises en evidence (background:#eff6ff inline) gardent
   un texte fonce en mode sombre, ce qui echoue. On force fond + texte coherents. */
body.dark-mode .year-sectoral-section .cal-table-data tr[style*="#eff6ff"] {
    background: rgba(96, 165, 250, 0.18) !important;
}
body.dark-mode .year-sectoral-section .cal-table-data tr[style*="#eff6ff"] td,
body.dark-mode .year-sectoral-section .cal-table-data tr[style*="#eff6ff"] strong {
    color: #dbeafe !important;
}

@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, #005bb5, #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; }
}

/* Vues "intent" calendrier (imprimer/pdf) : page dépouillée pour rendu A4/PDF.
   Bump 26.8.0.122 (owner): regra que escondia .ad-slot-preview em cal-intent-mode
   REMOVIDA : owner pediu o preview ad "Annonce (prévisualisation) Mode noads=1 actif"
   visivel nessas paginas. .no-print intrinseco continua protegendo print/PDF. */
body.cal-intent-mode .banner-ad-after-hero {
    display: none !important;
}

/* Fil d'Ariane visible (vues imprimer/pdf) : anchors discrets, séparateur lisible. */
body.cal-intent-mode .breadcrumb-visible a {
    color: var(--secondary-color, #5f6368);
    text-decoration: none;
}
body.cal-intent-mode .breadcrumb-visible a:hover { text-decoration: underline; }
body.cal-intent-mode .breadcrumb-visible [aria-hidden="true"] { color: rgba(15, 23, 42, 0.35); }
body.cal-intent-mode .breadcrumb-visible [aria-current="page"] { color: var(--text-color, #0f172a); font-weight: 600; }
body.dark-mode.cal-intent-mode .breadcrumb-visible [aria-hidden="true"] { color: rgba(255, 255, 255, 0.35); }
body.dark-mode.cal-intent-mode .breadcrumb-visible [aria-current="page"] { color: #e2e8f0; }

/* Bouton "Retour au calendrier" : variante neutre du btn-action.
   .btn-action utilise color:#fff !important + box-shadow ; on override en
   conservant la même spécificité avec !important pour les propriétés qui
   bougent (color, background, box-shadow), sans perdre layout/padding. */
.btn-action.btn-back-calendar {
    background: transparent !important;
    color: var(--text-color, #0f172a) !important;
    border: 1px solid rgba(15, 23, 42, 0.25) !important;
    box-shadow: none !important;
}
.btn-action.btn-back-calendar:hover {
    background: rgba(15, 23, 42, 0.05) !important;
    color: var(--text-color, #0f172a) !important;
    transform: translateY(-2px);
}
body.dark-mode .btn-action.btn-back-calendar {
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
body.dark-mode .btn-action.btn-back-calendar:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f5f5f7 !important;
}

/* Tableau simple pour la liste des jours fériés en mode imprimer/pdf :
   conçu pour être lisible à l'impression A4 et clean en PDF. */
.holiday-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 0.95rem;
}
.holiday-list-table thead th {
    text-align: left;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.05);
    border-bottom: 2px solid rgba(15, 23, 42, 0.15);
    font-weight: 700;
    color: #0f172a;
}
.holiday-list-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    color: #1d1d1f;
    line-height: 1.45;
}
.holiday-list-table tbody td:first-child {
    font-weight: 600;
    white-space: nowrap;
    width: 110px;
}
.holiday-list-table tbody tr:last-child td {
    border-bottom: 0;
}
@media print {
    .holiday-list-table thead th,
    .holiday-list-table tbody td {
        padding: 6px 10px;
        font-size: 11pt;
    }
    .holiday-list-table thead th {
        background: #f5f5f5;
    }
}

/* 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: #005bb5;
    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;
}
/* WCAG: les <ul> heritaient sup/strong en couleur sombre. */
body.dark-mode .dynamic-facts-box ul,
body.dark-mode .dynamic-facts-box ul > li,
body.dark-mode .dynamic-facts-box ul > li sup,
body.dark-mode .dynamic-facts-box ul > li strong {
    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; }

@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; }

/* =====================================================================
   "En bref" (cm-resumo) et Fermeture (cm-fechamento) : containers
   dédiés style serp-wrapper. Aligné avec le modo ano BR (ocalendario).
   Selectors avec `main#main > .container .container` pour vaincre la
   règle générique de la ligne ~282 et ~357 sans escalada de !important.
   ===================================================================== */
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 {
    max-width: 1200px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Bump 65: removido !important do background/border para permitir override
       da regra body.dark-mode (specificity normal vence). White-on-white em
       dark mode era 1.09:1 invisivel. */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px !important;
    padding: 28px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !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 en dark : la regle claire a `background:#fff !important`
   avec main#main (haute specificite), donc l'override sombre doit egaler la
   specificite + !important pour gagner (sinon la carte reste blanche en sombre). */
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; }

/* =====================================================================
   FR mois : calendar-month-faq alignee avec editorial-shell.
   Garantit box-sizing: border-box et width: 100% pour que la FAQ ait
   exactement la meme largeur outer que le calendar-month-editorial-shell
   (1080px), sans deborder a cause de padding/border.
   ===================================================================== */
body.cal-year-wide .calendar-month-faq,
.calendar-month-faq {
    max-width: 1080px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =====================================================================
   Bump 26.8.0.21 : audit dark-mode missing variants (Tache A) : calendar
   year mode. User a reporte "plusieurs elements sans mode dark" en /calendrier-{y}.
   Cause racine: certains elements editoriaux utilisaient fonds/couleurs hardcoded sans
   contrepartie dark visible.
   Reference: palette consistante du projet (calendar-year.css:2406+
   .lunar-month-card dark = #1c1c1e + rgba(255,255,255,0.08)).
   Validation: toggle dark mode en /calendrier-{y} → toutes hairlines/borders
   visibles, holiday-link avec hover lisible, calendar-day border du mode
   mois (annee-wide) sans invisible.
   ===================================================================== */
/* (1) holiday-link inline : light hover bg bleu clair n'apparait pas en dark.
   Renforce avec bg bleu clair ajuste pour dark + couleur du lien plus claire. */
body.dark-mode .holiday-link {
    border-bottom-color: rgba(255, 255, 255, 0.32);
}
body.dark-mode .holiday-link:hover {
    color: #64b5ff !important;
    background-color: rgba(100, 177, 255, 0.14);
    box-shadow: 0 0 0 1px rgba(100, 177, 255, 0.18);
}
/* (2) Standalone .calendar-month-single-card border (mode mois single-card
   wrapper) : utilise var(--border-color), thème OK via global, mais hover override
   force border-color var qui se cale bien en dark. Renforce contraste hairline. */
body.cal-year-wide.dark-mode .calendar-month-single-card {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.10);
}
/* (3) annual cal cell border (light side: rgba(0,0,0,0.08) hardcoded en
   calendrier.css:319 → invisible en dark). Ajoute ici pour garantir. */
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day {
    border-color: transparent;
}
/* (4) cal-year-hero breadcrumb sep est decoration mais en dark devient invisible
   contre fond gradient sombre. Light utilise rgba(255,255,255,0.55) : deja blanc
   sur bleu, OK dans les deux. */

/* ============================================================================
   Bump XX : Colonne semaine ISO 8601 (port werktagerechner.de/css/kalender-de-overrides.css:40-220)
   ============================================================================ */
.calendar-grid.calendar-grid--with-weeks {
    display: grid;
    grid-template-columns: 44px repeat(7, 1fr);
    column-gap: 4px;
    row-gap: 4px;
    padding: 0 14px 0 6px;
}
body.cal-year-wide #annual-calendar-container .calendar-grid.calendar-grid--with-weeks {
    /* Bump XX: 44px+7×1fr -> 8×1fr para que week-cell e day-cell tenham
       largura identica (e, combinado com aspect-ratio 1/1, fiquem quadrados
       iguais : owner 2026-05-11). */
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    text-align: center;
    font-size: 0.92em;
    margin-bottom: 10px;
    padding: 0 8px 0 4px !important;
    background: transparent;
}
body.cal-year-wide #annual-calendar-container .calendar-header-day.calendar-week-header {
    font-weight: 800;
    color: #005bb5;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0 0 6px;
    text-align: center;
}
body.cal-year-wide #annual-calendar-container .calendar-week-cell {
    /* Bump 26.8.0.106: trocado border 1px solid #cbd5e1 por box-shadow inset
       mesmo treatment do .calendar-day (bump 104) : owner reportou que tamanhos
       visuais ficavam diferentes apesar do aspect-ratio igual. */
    background: #f1f5f9;
    color: #005bb5;
    box-shadow: inset 0 0 0 1px rgba(0, 113, 227, 0.18);
    border-radius: 6px;
    padding: 0;
    text-align: center;
    font-weight: 700;
    font-size: 0.78em;
    cursor: default;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    aspect-ratio: 1 / 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bump 26.8.0.106: row-hover lighten azul nas day-cells quando JS adiciona .row-hover
   (acionado por hover na .calendar-week-cell : porte werktagerechner.de). Owner: "nao
   esta fazendo lighten azul na linha onde ela eh referente". CSS estava ausente : o JS
   ja injetava a classe mas sem regra visual associada. */
body.cal-year-wide #annual-calendar-container .calendar-day.row-hover {
    background: rgba(0, 113, 227, 0.10) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 113, 227, 0.30) !important;
}
body.cal-year-wide #annual-calendar-container .calendar-week-cell.row-hover,
body.cal-year-wide #annual-calendar-container .calendar-week-cell:hover {
    background: #dbe7ff !important;
    box-shadow: inset 0 0 0 1px rgba(0, 113, 227, 0.45) !important;
}
body.dark-mode.cal-year-wide #annual-calendar-container .calendar-day.row-hover {
    background: rgba(100, 177, 255, 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(100, 177, 255, 0.40) !important;
}
body.dark-mode.cal-year-wide #annual-calendar-container .calendar-week-cell.row-hover {
    background: rgba(100, 177, 255, 0.24) !important;
    box-shadow: inset 0 0 0 1px rgba(100, 177, 255, 0.50) !important;
}
body.cal-year-wide #annual-calendar-container .calendar-week-cell:hover,
body.cal-year-wide #annual-calendar-container .calendar-week-cell:focus-visible {
    background: #e0e7ff;
    color: #1e40af;
    transform: scale(1.06);
}
/* Dark mode */
body.dark-mode.cal-year-wide #annual-calendar-container .calendar-header-day.calendar-week-header { color: #67b1ff; }
body.dark-mode.cal-year-wide #annual-calendar-container .calendar-week-cell {
    background: #1e293b;
    color: #93c5fd;
    border: 1px solid #334155;
}
body.dark-mode.cal-year-wide #annual-calendar-container .calendar-week-cell:hover,
body.dark-mode.cal-year-wide #annual-calendar-container .calendar-week-cell:focus-visible {
    background: #1e3a5f;
    color: #bfdbfe;
    transform: scale(1.06);
}
/* Mobile : masquer la colonne semaine et revenir a 7 colonnes (analogue au DE). */
@media (max-width: 768px) {
    body.cal-year-wide #annual-calendar-container .calendar-grid.calendar-grid--with-weeks {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        padding: 0 4px !important;
    }
    body.cal-year-wide #annual-calendar-container .calendar-week-header,
    body.cal-year-wide #annual-calendar-container .calendar-week-cell {
        display: none !important;
    }
}

/* ==========================================================================
   CF-HOLIDAYS-TIMELINE (Bump 27.16.2.0): timeline cronologica dos ferie
   ========================================================================== */
.cf-holidays-timeline {
    list-style: none;
    margin: 20px 0 8px;
    padding: 0 0 0 4px;
    position: relative;
}
.cf-holidays-timeline::before {
    content: "";
    position: absolute;
    left: 38px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: linear-gradient(to bottom, transparent 0%, #d1d5db 8%, #d1d5db 92%, transparent 100%);
    border-radius: 1px;
    z-index: 0;
}
.cf-tl-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 0;
    position: relative;
    z-index: 1;
}
.cf-tl-stamp {
    flex: 0 0 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid #1d1d1f;
    border-radius: 14px;
    padding: 8px 6px;
    min-width: 74px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cf-tl-item:hover .cf-tl-stamp {
    transform: scale(1.04);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.cf-tl-stamp__day {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.cf-tl-stamp__month {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
    line-height: 1;
}
.cf-tl-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cf-tl-name { font-size: 1.05rem; font-weight: 600; color: #1d1d1f; line-height: 1.25; }
.cf-tl-name a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; }
.cf-tl-name a:hover { color: #005bb5; border-bottom-color: #005bb5; }
.cf-tl-dow { font-size: 0.88rem; color: #6e6e73; font-weight: 500; }

@media (max-width: 540px) {
    .cf-holidays-timeline { padding-left: 0; }
    .cf-holidays-timeline::before { left: 32px; }
    .cf-tl-item { gap: 12px; padding: 8px 0; }
    .cf-tl-stamp { flex-basis: 64px; min-width: 60px; padding: 6px 4px; border-radius: 12px; }
    .cf-tl-stamp__day { font-size: 1.35rem; }
    .cf-tl-stamp__month { font-size: 0.66rem; margin-top: 3px; }
    .cf-tl-name { font-size: 0.98rem; }
    .cf-tl-dow { font-size: 0.82rem; }
}

body.dark-mode .cf-holidays-timeline::before { background: linear-gradient(to bottom, transparent 0%, #3a3a3c 8%, #3a3a3c 92%, transparent 100%); }
body.dark-mode .cf-tl-stamp { background: #1c1c1e; border-color: #f5f5f7; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
body.dark-mode .cf-tl-item:hover .cf-tl-stamp { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); }
body.dark-mode .cf-tl-stamp__day { color: #f5f5f7; }
body.dark-mode .cf-tl-name { color: #f5f5f7; }
body.dark-mode .cf-tl-name a:hover { color: #4f9cf6; border-bottom-color: #4f9cf6; }
body.dark-mode .cf-tl-dow { color: #98989d; }


/* ============================================================
   Strong separator entre mois no rowspan table (Bump 2026-05-16)
   Aplicado quando cp_cf_render_months_with_holidays voltar
   para o pattern PT rowspan + .cal-months-with-holidays.
   ============================================================ */
/* ==========================================================================
   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).
   ========================================================================== */
.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; }

/* Saisons: ícone+nome nunca quebra */
.cal-table-data .season-row-name { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================
   MODE MOIS : unification cross-site (largeur 1200 + resume remplit +
   editorial flush + cellule/lune au format CDP). Scope
   body.cal-year-wide:not(.cal-year-mode) = page de MOIS. Reference visuelle = 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;
}
/* Resume lateral remplit le reste de la largeur (calendrier 660 fixe). */
@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 : 1 colonne (regle existante @media max-width:820 1fr). */
/* Cellule au format CDP (respiro bas pour la lune, jour 1.1rem). */
body.cal-year-wide:not(.cal-year-mode) .calendar-month-grid .calendar-month-day {
    padding: 5px 2px 20px !important;
    font-size: 1.1rem !important;
}
/* Lune au format CDP : 14px rendu, SANS contour (FR avait un cercle border+fond+ombre). */
body.cal-year-wide:not(.cal-year-mode) .calendar-month-day .moon-phase-badge {
    width: auto !important;
    height: auto !important;
    font-size: 14px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ===== DARK MODE : composants editoriaux sans theme sombre (owner). Tables SEO,
   heatmap climatique, legende agro et la ligne-entete zebree (inline #eff6ff).
   Les cellules colorees du heatmap sont de la data-viz et restent (seul le
   conteneur s'assombrit). ===== */
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 en mode mois (owner: wrapper de texte "trop charge").
   Seul l'outil (cm-tool-shell__inner) a un card; les wrappers de texte sont
   transparents, sans bordure/ombre/radius. Topics separes par le border-bottom
   des h2. Reference = /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) aplati aussi : une regle avec id (main#main) +
   !important donne bordure/fond a tout serp-wrapper; il faut un id pour gagner.
   cm-fechamento N'ENTRE PAS : c'est le card de cloture (comme la reference 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;
}
/* Separateur AVANT chaque topic (border-top sur le h2), pas apres : le titre
   commence un nouveau topic au lieu de sembler fermer le precedent. 1er h2 sans ligne. */
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 02/Jun: editorial/FAQ avec wrapper TRANSPARENT (garde le titre de la
   section, sans carte). Tables et info-box gardent card+separateur. === */
/* (1) MODE ANNEE: retire le container tool-aux-wrapper (libere le contenu a 1200).
   Scope cal-year-mode = annee seulement. @media screen preserve l'impression. */
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;
}
/* Sections editoriales libres en mode annee (container no-print enfant direct du
   cdp-tool-body) heritaient du card par defaut du .container global; flat aussi. */
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) MODE MOIS: cm-fechamento et FAQ transparents (wrapper garde, titre et
   separateurs internes preserves). id (main#main) pour battre la carte. */
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;
}