/* ==========================================================================
   calendar-year.css
   Hero compact + layout large pour /calendrier/{year}.
   Reutilise la grammaire visuelle du jfhub-hero (breadcrumb + H1 dans un
   bandeau full-bleed avec gradient bleu), mais en version "slim" (padding
   reduit, pas de lede, pas de countdown, pas de stats-strip en dessous).
   Les elements sous le calendrier passent a la largeur des bands de la
   homepage (inner 1700px). Le calendrier lui-meme garde sa proportion
   actuelle (cap a 1200px, centre).
   ========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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: 1700px !important;
}
body.cal-year-wide .calendar-month-editorial,
body.cal-year-wide .calendar-month-faq,
body.cal-year-wide .calendar-month-year-grid,
body.cal-year-wide .calendar-month-page > .shortcuts-panel {
    max-width: 1080px;
    margin-left: auto !important;
    margin-right: auto !important;
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* -------- Grille des jours -------- */
body.cal-year-wide #annual-calendar-container .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.9em;
    gap: 3px;
    margin-bottom: 10px;
    padding: 0;
    background: transparent;
    border: none;
    font-variant-numeric: tabular-nums;
    grid-auto-rows: auto;
}
body.cal-year-wide #annual-calendar-container .calendar-header-day {
    font-weight: 700;
    color: #6e6e73;
    font-size: 0.75em;
    text-transform: none;
    letter-spacing: 0;
    padding: 0 0 6px;
    background: transparent;
    position: static;
}
body.cal-year-wide #annual-calendar-container .calendar-header-day:nth-child(6),
body.cal-year-wide #annual-calendar-container .calendar-header-day:nth-child(7) {
    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 */
body.cal-year-wide #annual-calendar-container .calendar-day {
    position: relative;
    padding: 5px 0;
    border-radius: 6px;
    font-size: 0.95em;
    color: #1d1d1f;
    background: transparent;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background-color 0.14s ease, color 0.14s ease;
    cursor: default;
    min-height: 32px;
}
body.cal-year-wide #annual-calendar-container .calendar-day time {
    position: relative;
    z-index: 1;
    display: inline-block;
}
body.cal-year-wide #annual-calendar-container .calendar-day.weekend {
    background: #f2f2f5;
    color: #6e6e73;
    font-weight: 400;
}
body.cal-year-wide #annual-calendar-container .calendar-day.holiday {
    background: #ffe5e3;
    color: #ff3b30;
    font-weight: 700;
    cursor: help;
}
body.cal-year-wide #annual-calendar-container .calendar-day.holiday::after { content: none; }
body.cal-year-wide #annual-calendar-container .calendar-day.weekend.holiday {
    background: #ffe5e3;
    color: #ff3b30;
}
body.cal-year-wide #annual-calendar-container .calendar-day.today {
    background: #007aff;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 8px -2px rgba(0, 122, 255, 0.45);
}
body.cal-year-wide #annual-calendar-container .calendar-day.today time { color: #ffffff; }
body.cal-year-wide #annual-calendar-container .calendar-day.today.weekend,
body.cal-year-wide #annual-calendar-container .calendar-day.today.holiday {
    background: #007aff;
    color: #ffffff;
}
body.cal-year-wide #annual-calendar-container .calendar-day:not(.today):not(.holiday):not(.weekend):hover {
    background: #f5f5f7;
}
body.cal-year-wide #annual-calendar-container .calendar-day.weekend:not(.today):hover { background: #e8e8ed; }
body.cal-year-wide #annual-calendar-container .calendar-day.holiday:not(.today):hover { background: #ffd1cd; }

/* -------- Liste de feriados/eventos sous la grille -------- */
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen {
    list-style: none;
    padding: 10px 0 0 0;
    margin: auto 0 0 0;
    font-size: 0.8em;
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
    color: #6e6e73;
    line-height: 1.4;
}
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li {
    margin-bottom: 4px;
    line-height: 1.3;
}
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen strong {
    color: #0071e3;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="holiday"] strong,
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="holiday"] span {
    color: #b14949;
}
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="season"] strong,
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="season"] span {
    color: #b7791f;
}
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="event"] strong,
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="event"] span {
    color: #8b95a3;
}
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="moon"] strong,
body.cal-year-wide #annual-calendar-container .month-holiday-list-screen li[data-item-type="moon"] span {
    color: #4f46e5;
}
/* 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);
}
body.cal-year-wide.dark-mode #annual-calendar-container .month-container:hover,
body.cal-year-wide.dark-mode #annual-calendar-container .month-container:focus-visible {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 18px 36px -14px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.14);
}
body.cal-year-wide.dark-mode #annual-calendar-container .month-title {
    color: #64b1ff;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: transparent;
}
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-header-day { color: #98989d; }
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-header-day:nth-child(6),
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-header-day:nth-child(7) { color: #ff453a; }
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day { background: transparent; color: #f5f5f7; }
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.weekend { background: rgba(255, 255, 255, 0.06); color: #d1d1d6; }
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.holiday {
    background: rgba(255, 69, 58, 0.18);
    color: #ff9a94;
}
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.weekend.holiday { background: rgba(255, 69, 58, 0.18); color: #ff9a94; }
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.today {
    background: #0a84ff;
    color: #ffffff;
    box-shadow: 0 2px 8px -2px rgba(10, 132, 255, 0.55);
}
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.today.weekend,
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.today.holiday {
    background: #0a84ff;
    color: #ffffff;
}
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day:not(.today):not(.holiday):not(.weekend):hover {
    background: rgba(255, 255, 255, 0.08);
}
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.weekend:not(.today):hover { background: rgba(255, 255, 255, 0.12); }
body.cal-year-wide.dark-mode #annual-calendar-container .calendar-day.holiday:not(.today):hover { background: rgba(255, 69, 58, 0.26); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body.dark-mode .year-sectoral-section {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

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, #0071e3, #5ab2ff);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.86rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px -2px rgba(0, 113, 227, 0.5);
}

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

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

/* Vues "intent" calendrier (imprimer/pdf) : page dépouillée pour rendu A4/PDF.
   On masque le banner ad auto-injecté après le hero — incompatible avec le
   focus de ces pages (objectif : impression / téléchargement clean). */
body.cal-intent-mode .banner-ad-after-hero,
body.cal-intent-mode .ad-slot-preview {
    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: #0071e3;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
    vertical-align: baseline;
}
.holiday-date time { color: inherit; }

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

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

/* Dark mode : flat aussi (le wrapper-article extérieur fournit la surface). */
body.dark-mode .dynamic-facts-box,
body.dark-mode .dynamic-facts-box--blue,
body.dark-mode .dynamic-facts-box--green,
body.dark-mode .dynamic-facts-box--orange,
body.dark-mode .dynamic-facts-box--gray,
body.dark-mode .dynamic-facts-box--red,
body.dark-mode .dynamic-facts-box--yellow,
body.dark-mode .dynamic-facts-box--pink,
body.dark-mode .dynamic-facts-box--purple {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
body.dark-mode .dynamic-facts-box:hover {
    border-color: transparent;
    box-shadow: none;
}
body.dark-mode .dynamic-facts-box > h3 { color: #f5f5f7; }
body.dark-mode .dynamic-facts-box > p { color: #aeaeb2; }
body.dark-mode .dynamic-facts-box .facts-list li {
    color: #f5f5f7;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode .dynamic-facts-box .facts-list li > strong:first-child { color: #aeaeb2; }
body.dark-mode .dynamic-facts-box ol > li {
    background: rgba(255, 255, 255, 0.04);
    color: #f5f5f7;
}
/* 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; }
body.dark-mode .container.serp-wrapper.cm-resumo,
body.dark-mode .container.serp-wrapper.cm-fechamento {
    background: #1e293b;
    border-color: #334155;
}
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. */