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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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: 960px;
    margin-left: auto !important;
    margin-right: auto !important;
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Dark mode : flat aussi (le wrapper-article extérieur fournit la surface). */
body.dark-mode .dynamic-facts-box,
body.dark-mode .dynamic-facts-box--blue,
body.dark-mode .dynamic-facts-box--green,
body.dark-mode .dynamic-facts-box--orange,
body.dark-mode .dynamic-facts-box--gray,
body.dark-mode .dynamic-facts-box--red,
body.dark-mode .dynamic-facts-box--yellow,
body.dark-mode .dynamic-facts-box--pink,
body.dark-mode .dynamic-facts-box--purple {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
body.dark-mode .dynamic-facts-box:hover {
    border-color: transparent;
    box-shadow: none;
}
body.dark-mode .dynamic-facts-box > h3 { color: #f5f5f7; }
body.dark-mode .dynamic-facts-box > p { color: #aeaeb2; }
body.dark-mode .dynamic-facts-box .facts-list li {
    color: #f5f5f7;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode .dynamic-facts-box .facts-list li > strong:first-child { color: #aeaeb2; }
body.dark-mode .dynamic-facts-box ol > li {
    background: rgba(255, 255, 255, 0.04);
    color: #f5f5f7;
}
body.dark-mode .two-col-grid-list > li {
    background: rgba(255, 255, 255, 0.04);
    color: #f5f5f7;
}
body.dark-mode .two-col-grid-list > li:hover { background: rgba(255, 255, 255, 0.07); }
body.dark-mode .two-col-grid-list > li ul li {
    background: rgba(255, 255, 255, 0.05);
}
body.dark-mode .two-col-grid-list > li ul { color: #aeaeb2; }
body.dark-mode .holiday-date { background: #0a84ff; color: #ffffff; }

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