/* ==========================================================================
   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).
   ========================================================================== */

/* -------- HERO COMPACT -------- */
.cal-year-hero {
    position: relative;
    overflow: hidden;
    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%);
    margin-bottom: 24px;
}
.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: 1700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box;
    width: 100%;
}

/* Le calendrier annuel garde sa proportion actuelle : cap et centrage. */
body.cal-year-wide #annual-calendar-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

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

/* ==========================================================================
   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;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    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);
}

/* -------- Year nav : prev | year (gros display) | next -------- */
body.cal-year-wide .cal-year-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
body.cal-year-wide .cal-year-nav__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: transparent;
    color: #1d1d1f;
    text-decoration: none;
    transition: background-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
}
body.cal-year-wide .cal-year-nav__arrow:hover {
    background: #f5f5f7;
    color: #007aff;
}
body.cal-year-wide .cal-year-nav__arrow:active {
    transform: scale(0.92);
}
body.cal-year-wide .cal-year-nav__arrow.is-disabled {
    color: #d2d2d7;
    pointer-events: none;
}
body.cal-year-wide .cal-year-nav__picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 100px;
    justify-content: center;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.14s ease;
}
body.cal-year-wide .cal-year-nav__picker:hover {
    background: #f5f5f7;
}
body.cal-year-wide .cal-year-nav__label {
    font-size: 1.22rem;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
body.cal-year-wide .cal-year-nav__caret {
    color: #86868b;
    flex-shrink: 0;
    transition: color 0.14s ease, transform 0.14s ease;
}
body.cal-year-wide .cal-year-nav__picker:hover .cal-year-nav__caret {
    color: #007aff;
    transform: translateY(1px);
}
body.cal-year-wide .cal-year-nav__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 : ghost larges -------- */
body.cal-year-wide .cal-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #1d1d1f;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
}
body.cal-year-wide .cal-action-btn:hover {
    background: #f5f5f7;
    color: #007aff;
}
body.cal-year-wide .cal-action-btn:hover .cal-action-btn__icon {
    color: #007aff;
}
body.cal-year-wide .cal-action-btn:active {
    transform: scale(0.95);
}
body.cal-year-wide .cal-action-btn:focus-visible {
    outline: 2px solid #007aff;
    outline-offset: 2px;
}
body.cal-year-wide .cal-action-btn__icon {
    flex-shrink: 0;
    color: #1d1d1f;
    transition: color 0.14s ease;
}
body.cal-year-wide .cal-action-btn__label {
    line-height: 1;
    white-space: nowrap;
}
body.cal-year-wide .cal-action-btn--icon-only {
    width: 38px;
    padding: 0;
    gap: 0;
}

/* -------- Bouton "Personnaliser" : action primaire, solide systemBlue -------- */
body.cal-year-wide .cal-action-btn--accent {
    background: #007aff;
    color: #ffffff;
    box-shadow:
        0 1px 2px rgba(0, 122, 255, 0.25),
        0 4px 12px -4px rgba(0, 122, 255, 0.45);
}
body.cal-year-wide .cal-action-btn--accent .cal-action-btn__icon {
    color: #ffffff;
}
body.cal-year-wide .cal-action-btn--accent:hover {
    background: #0862c9;
    color: #ffffff;
    box-shadow:
        0 2px 4px rgba(0, 122, 255, 0.3),
        0 6px 16px -4px rgba(0, 122, 255, 0.55);
}
body.cal-year-wide .cal-action-btn--accent:hover .cal-action-btn__icon {
    color: #ffffff;
}
body.cal-year-wide .cal-action-btn--accent[aria-expanded="true"] {
    background: #003c87;
    color: #ffffff;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.18),
        0 1px 2px rgba(0, 0, 0, 0.08);
}

/* -------- Mobile : cache les labels texte des 3 actions non-accent -------- */
@media (max-width: 720px) {
    body.cal-year-wide .cal-toolbar__row {
        gap: 8px;
        padding: 6px;
    }
    body.cal-year-wide .cal-year-nav__label { font-size: 1.1rem; }
    body.cal-year-wide .cal-action-btn:not(.cal-action-btn--accent) .cal-action-btn__label {
        display: none;
    }
    body.cal-year-wide .cal-action-btn:not(.cal-action-btn--accent) {
        width: 38px;
        padding: 0;
        gap: 0;
    }
    body.cal-year-wide .cal-toolbar-actions__sep { display: none; }
}

/* -------- Dark mode -------- */
body.cal-year-wide.dark-mode .cal-toolbar__row {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 12px 32px -18px rgba(0, 0, 0, 0.6);
}
body.cal-year-wide.dark-mode .cal-year-nav__arrow { color: #f5f5f7; }
body.cal-year-wide.dark-mode .cal-year-nav__arrow:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #64b1ff;
}
body.cal-year-wide.dark-mode .cal-year-nav__arrow.is-disabled { color: #48484a; }
body.cal-year-wide.dark-mode .cal-year-nav__picker:hover { background: rgba(255, 255, 255, 0.08); }
body.cal-year-wide.dark-mode .cal-year-nav__label { color: #f5f5f7; }
body.cal-year-wide.dark-mode .cal-year-nav__caret { color: #98989d; }
body.cal-year-wide.dark-mode .cal-year-nav__picker:hover .cal-year-nav__caret { color: #64b1ff; }

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-action-btn { color: #f5f5f7; }
body.cal-year-wide.dark-mode .cal-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #64b1ff;
}
body.cal-year-wide.dark-mode .cal-action-btn:hover .cal-action-btn__icon { color: #64b1ff; }
body.cal-year-wide.dark-mode .cal-action-btn__icon { color: #f5f5f7; }

body.cal-year-wide.dark-mode .cal-action-btn--accent {
    background: #0a84ff;
    color: #ffffff;
    box-shadow:
        0 1px 2px rgba(10, 132, 255, 0.3),
        0 4px 12px -4px rgba(10, 132, 255, 0.55);
}
body.cal-year-wide.dark-mode .cal-action-btn--accent:hover {
    background: #2995ff;
}
body.cal-year-wide.dark-mode .cal-action-btn--accent[aria-expanded="true"] {
    background: #003e8a;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   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)
   ========================================================================== */

body.cal-year-wide #annual-calendar-container {
    gap: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Inter", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -------- Carte de mois : surface blanche, bordure hairline, motion au hover -------- */
body.cal-year-wide .month-container {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 18px 16px 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 0.18s ease;
}
body.cal-year-wide .month-container:hover,
body.cal-year-wide .month-container:focus,
body.cal-year-wide .month-container:focus-visible {
    transform: translateY(-4px);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 18px 36px -14px rgba(0, 0, 0, 0.18);
    border-color: rgba(0, 0, 0, 0.12);
}
body.cal-year-wide .month-container:focus-visible {
    outline: 2px solid #007aff;
    outline-offset: 3px;
}
body.cal-year-wide .month-container::before {
    content: none;
}

/* -------- Header du mois : section integree (section header editorial) --------
   Pas de glass, pas de tarja fine. On fait une vraie "section" en haut de la
   carte, comme l'en-tete d'un ticket de caisse ou d'une fiche : meme famille
   chromatique que la carte, un ton plus fonce, occupe toute la largeur via
   marges negatives, divider fin en bas, chiffres d'annee en typographie
   secondaire (pas de pill decoratif). */
/* -------- Micro-header du mois : capsule bleu clair, annee en badge a droite,
   notch d'ancrage vers la grille (idiome iPadOS Calendar). */
body.cal-year-wide .month-title {
    position: relative;
    margin: -6px -4px 14px;
    padding: 11px 14px 12px;
    background: #e8f0ff;
    border: 1px solid rgba(0, 113, 227, 0.18);
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
body.cal-year-wide .month-title::after { content: none; }
body.cal-year-wide .month-title::before { content: none; }
body.cal-year-wide .month-title__sep { display: none; }
body.cal-year-wide .month-title__name {
    font-size: 1.32rem;
    font-weight: 600;
    color: #0b3d7a;
    letter-spacing: -0.025em;
    text-transform: capitalize;
    line-height: 1.1;
    flex: 1;
    text-align: left;
}
/* Annee en badge aligne a droite : pill blanche avec contour bleu leger */
body.cal-year-wide .month-title__year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 24px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid rgba(0, 113, 227, 0.28);
    color: #0071e3;
    font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px rgba(0, 113, 227, 0.08);
    line-height: 1;
    text-transform: none;
}
body.cal-year-wide .month-link-seo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}
body.cal-year-wide .month-link-seo:hover .month-title__name,
body.cal-year-wide .month-link-seo:focus-visible .month-title__name {
    color: #0071e3;
}
body.cal-year-wide .month-link-seo:hover,
body.cal-year-wide .month-link-seo:focus-visible {
    text-decoration: none;
}

/* -------- Grille : chaque jour est un squircle independant -------- */
/* -------- Grille : toutes les rangees ont la meme hauteur --------
   grid-auto-rows fixe garantit que les semaines sans icone de lune restent
   alignees avec celles qui en ont une (sinon la rangee sans contenu "enfle"
   moins que ses voisines, comme sur octobre semaine 19-25). */
body.cal-year-wide .calendar-grid {
    gap: 2px;
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 4px;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    grid-auto-rows: 40px;
}
body.cal-year-wide .calendar-grid > .calendar-header-day {
    height: auto;
}

/* En-tetes de colonnes : minuscules francaises (lun/mar/mer...) — respecte la
   typographie francaise (les jours ne prennent pas de majuscule) et leve
   l'ambiguite entre mardi et mercredi. */
body.cal-year-wide .calendar-header-day {
    background: transparent;
    color: #86868b;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.02em;
    padding: 6px 0 10px;
}
body.cal-year-wide .calendar-header-day:nth-child(6),
body.cal-year-wide .calendar-header-day:nth-child(7) {
    color: #ff3b30;
}

/* Cellule de jour : square arrondi, hauteur fixe alignee sur grid-auto-rows,
   contenu centre verticalement (numero + icone lune sans decalage vertical). */
body.cal-year-wide .calendar-day {
    position: relative;
    background: transparent;
    border-radius: 8px;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 400;
    color: #1d1d1f;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.14s ease, color 0.14s ease;
    cursor: default;
}
body.cal-year-wide .calendar-day time {
    position: relative;
    z-index: 1;
    display: inline-block;
    min-width: 1.4em;
}

/* Week-end : square gris clair Apple (systemGray5), numero secondaire */
body.cal-year-wide .calendar-day.weekend {
    background: #f2f2f5;
    color: #3a3a3c;
    font-weight: 400;
}

/* Jour ferie : square rouge clair, numero systemRed gras */
body.cal-year-wide .calendar-day.holiday {
    background: #ffe5e3;
    color: #ff3b30;
    font-weight: 600;
}
body.cal-year-wide .calendar-day.holiday::after {
    content: none;
}
body.cal-year-wide .calendar-day.weekend.holiday {
    background: #ffe5e3;
    color: #ff3b30;
}

/* Aujourd'hui : square plein systemBlue (standard Google Calendar / Outlook /
   Notion / Windows : le bleu est universel pour "today"). Le rouge reste pour
   feries / week-end, zero confusion visuelle. */
body.cal-year-wide .calendar-day.today {
    background: #007aff;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 8px -2px rgba(0, 122, 255, 0.45);
}
body.cal-year-wide .calendar-day.today time { color: #ffffff; }
body.cal-year-wide .calendar-day.today.weekend { background: #007aff; color: #ffffff; }
body.cal-year-wide .calendar-day.today.holiday { background: #007aff; color: #ffffff; }

/* Hover : square gris clair (non-feries / jours ouvres) */
body.cal-year-wide .calendar-day:not(.today):not(.holiday):not(.weekend):hover {
    background: #f5f5f7;
}
body.cal-year-wide .calendar-day.weekend:not(.today):hover {
    background: #e8e8ed;
}
body.cal-year-wide .calendar-day.holiday:not(.today):hover {
    background: #ffd1cd;
}

/* -------- Liste des feries du mois (sous la grille) --------
   Apple : hairline + typographie secondaire SF Text. */
body.cal-year-wide .month-holiday-list-screen {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 12px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: #6e6e73;
    line-height: 1.5;
}
body.cal-year-wide .month-holiday-list-screen strong {
    color: #1d1d1f;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* -------- Dark mode -------- */
body.cal-year-wide.dark-mode .month-container {
    background: #111827;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 12px 32px -14px rgba(0, 0, 0, 0.55);
}
/* -------- Dark mode : Apple dark Calendar aesthetic -------- */
body.cal-year-wide.dark-mode .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 .month-container:hover,
body.cal-year-wide.dark-mode .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 .month-title {
    background: rgba(10, 132, 255, 0.14);
    border-color: rgba(10, 132, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.cal-year-wide.dark-mode .month-title__name { color: #dbe6fa; }
body.cal-year-wide.dark-mode .month-title__year {
    background: #1c1c1e;
    border-color: rgba(10, 132, 255, 0.4);
    color: #64b1ff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
body.cal-year-wide.dark-mode .calendar-header-day { color: #98989d; }
body.cal-year-wide.dark-mode .calendar-header-day:nth-child(6),
body.cal-year-wide.dark-mode .calendar-header-day:nth-child(7) { color: #ff453a; }
body.cal-year-wide.dark-mode .calendar-day { background: transparent; color: #f5f5f7; }
body.cal-year-wide.dark-mode .calendar-day.weekend { background: rgba(255, 255, 255, 0.06); color: #d1d1d6; }
body.cal-year-wide.dark-mode .calendar-day.holiday {
    background: rgba(255, 69, 58, 0.18);
    color: #ff9a94;
}
body.cal-year-wide.dark-mode .calendar-day.weekend.holiday { background: rgba(255, 69, 58, 0.18); color: #ff9a94; }
body.cal-year-wide.dark-mode .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 .calendar-day.today.weekend { background: #0a84ff; }
body.cal-year-wide.dark-mode .calendar-day.today.holiday { background: #0a84ff; color: #ffffff; }
body.cal-year-wide.dark-mode .calendar-day:not(.today):not(.holiday):not(.weekend):hover {
    background: rgba(255, 255, 255, 0.08);
}
body.cal-year-wide.dark-mode .calendar-day.weekend:not(.today):hover { background: rgba(255, 255, 255, 0.12); }
body.cal-year-wide.dark-mode .calendar-day.holiday:not(.today):hover { background: rgba(255, 69, 58, 0.26); }
body.cal-year-wide.dark-mode .month-holiday-list-screen {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: #98989d;
}
body.cal-year-wide.dark-mode .month-holiday-list-screen strong { color: #f5f5f7; }