/* ── AGENDA & CALENDRIER ── Extrait de index.css le 2026-08-27. contact.html et espace-salarie.html chargeaient les 31 Ko d'index.css pour cette seule section : elles embarquaient le hero de l'accueil, les cartes de domaines, le bloc « Qui sommes-nous » et les partenaires, sans en afficher une ligne. Chargé par index.html, contact.html et espace-salarie.html. */ /* ── CHROME DU CALENDRIER : TOKENS FIXES ── La grille vit dans un bezel dont le fond est `--cream-fixed`, c'est-à-dire CLAIR dans les deux thèmes. Le chrome doit donc l'être aussi : en thème sombre, `--ink` devenait clair et le titre du mois passait à 1,19:1 — littéralement invisible, comme les libellés des jours. Ces trois valeurs sont dérivées de --ink-fixed pour rester dans la palette. */ :root{ --cal-ink:var(--ink-fixed); --cal-muted:color-mix(in srgb,var(--ink-fixed) 70%,var(--cream-fixed)); --cal-case:color-mix(in srgb,var(--ink-fixed) 6%,var(--cream-fixed)); --cal-case-active:var(--cream-fixed); } /* ── AGENDA : double-bezel sur fond teinté sea (le corail est réservé aux actions) ── */ .hv-agenda{ background:color-mix(in srgb,var(--sea) 5%,var(--cream-fixed)); padding:clamp(96px,12vw,160px) clamp(20px,6vw,80px); position:relative;overflow:hidden; } .hv-agenda::before{ content:'';position:absolute;top:-180px;right:-180px;width:560px;height:560px; background:radial-gradient(circle,color-mix(in srgb,var(--sea) 18%,transparent) 0%,transparent 60%); pointer-events:none; } .hv-agenda::after{ content:'';position:absolute;bottom:-180px;left:-160px;width:480px;height:480px; background:radial-gradient(circle,color-mix(in srgb,var(--teal) 14%,transparent) 0%,transparent 60%); pointer-events:none; } .hv-agenda>*{position:relative;z-index:1;} .hv-agenda-inner{ max-width:var(--max);margin:0 auto; } .hv-agenda-inner .hv-eyebrow{margin-bottom:14px;} .hv-agenda-inner .hv-h2{margin-bottom:14px;} .hv-agenda-inner .hv-h2-sub{margin:0 0 48px;max-width:520px;} .hv-agenda-bezel{margin-bottom:32px;} .hv-agenda-bezel.hv-bezel{padding:8px;border-radius:32px;} .hv-agenda-bezel .hv-bezel-inner{padding:0;border-radius:24px;overflow:hidden;} .hv-agenda .agenda-calendar{box-shadow:none;background:transparent;} .hv-agenda .cal-grid{padding:32px;} .hv-agenda .cal-events{padding:32px;} .hv-agenda .cal-title{font-style:italic;font-weight:600;font-size:1.3rem;} .hv-agenda .cal-events-title{font-size:1.15rem;font-style:italic;} .hv-agenda .cal-day{border-radius:12px;} .hv-agenda .cal-event{border-radius:12px;} .hv-agenda .cal-legend{margin-top:32px;justify-content:flex-start;} @media(max-width:600px){ .hv-agenda{padding:64px 16px;} .hv-agenda .cal-grid,.hv-agenda .cal-events{padding:20px;} } /* ── CTA — Editorial massive ── */ .hv-cta{ background:var(--ink-fixed); padding:clamp(96px,14vw,180px) clamp(20px,6vw,80px); position:relative;overflow:hidden; text-align:center; color:var(--cream-fixed); } .hv-cta::before{ content:'';position:absolute;top:-200px;left:-200px;width:680px;height:680px; background:radial-gradient(circle,color-mix(in srgb,var(--teal) 24%,transparent) 0%,transparent 60%); pointer-events:none; } .hv-cta::after{ content:'';position:absolute;bottom:-200px;right:-200px;width:560px;height:560px; background:radial-gradient(circle,color-mix(in srgb,var(--sea) 22%,transparent) 0%,transparent 60%); pointer-events:none; } .hv-cta-inner{ max-width:880px;margin:0 auto; position:relative;z-index:1; } .hv-cta-h{ font-family:'Fraunces',serif;font-style:italic;font-weight:600; font-size:clamp(2rem,5vw,4rem); letter-spacing:-.04em;line-height:1.02; color:var(--cream-fixed); margin:0 0 22px; text-wrap:balance; } /* Sea éclairci (le corail est réservé aux actions « appeler » et « adhérer ») : 8,1:1 sur l'encre. */ .hv-cta-h em{font-style:italic;color:color-mix(in srgb,var(--sea) 70%,#fff);} .hv-cta-p{ font-family:'Outfit',sans-serif;font-weight:300; font-size:1.1rem;line-height:1.5; color:color-mix(in srgb,#fff 70%,transparent); margin:0 0 36px;max-width:540px;margin-left:auto;margin-right:auto; } /* Bouton de la bande : variante claire sur fond sombre (comme .cta-equipe). Il était corail ; le corail est désormais réservé à « appeler » et « adhérer » (DESIGN.md §2). Ciblé par le contexte : la classe historique hv-btn--coral reste dans le HTML. */ .hv-cta .hv-btn{ background:var(--cream-fixed);color:var(--ink-fixed); box-shadow:0 12px 32px color-mix(in srgb,#000 28%,transparent); } .hv-cta .hv-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px color-mix(in srgb,#000 34%,transparent);} .hv-cta .hv-btn:active{transform:translateY(0) scale(.98);opacity:.95;} .hv-cta .hv-btn .hv-btn-icon{background:color-mix(in srgb,var(--ink-fixed) 10%,transparent);} .hv-cta .hv-btn:hover .hv-btn-icon{transform:translate(3px,-3px) scale(1.06);background:color-mix(in srgb,var(--ink-fixed) 16%,transparent);} /* ── AGENDA — calendar layout (used by .hv-agenda wrapper) ── */ .agenda-calendar{display:grid;grid-template-columns:1.45fr 1fr;overflow:hidden;text-align:left;} .cal-grid{padding:clamp(20px,3vw,32px);border-right:1px solid rgba(128,128,128,.14);} .cal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;} .cal-title{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:700;color:var(--cal-ink);text-transform:capitalize;text-align:center;flex:1;margin:0;} .cal-nav{background:transparent;border:none;font-size:1.5rem;color:var(--teal);cursor:pointer;padding:0 14px;min-width:44px;min-height:44px;border-radius:8px;line-height:1;transition:background .15s;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;} .cal-nav:hover{background:color-mix(in srgb,var(--teal) 10%,transparent);} .cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;} .cal-weekdays span{font-size:.7rem;font-weight:600;color:var(--cal-muted);text-align:center;letter-spacing:.6px;text-transform:uppercase;padding:4px 0;} .cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;} .cal-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--cal-case);border:1px solid transparent;border-radius:8px;font-size:.88rem;color:var(--cal-ink);font-family:'Outfit',sans-serif;font-weight:500;font-variant-numeric:tabular-nums;position:relative;transition:transform .15s,border-color .15s,background .15s;} .cal-day.empty{background:transparent;} .cal-day.has-events{cursor:pointer;background:var(--cal-case-active);border-color:color-mix(in srgb,var(--teal) 20%,transparent);box-shadow:0 1px 4px rgba(0,0,0,.04);} .cal-day.has-events:hover{border-color:var(--teal);transform:translateY(-1px);} /* focus calendrier : la règle 3px de common.css (.cal-day.has-events:focus-visible) est le standard global — pas de redéclaration 2px ici (elle l'écrasait en CSS mort). */ .cal-day.today{outline:2px solid var(--coral);outline-offset:-2px;font-weight:700;color:var(--cal-ink);} .cal-day.selected{background:var(--teal);color:white;border-color:var(--teal);} .cal-day.selected.today{color:white;outline-color:white;} .cal-day.selected .cal-dots i{background:white!important;} .cal-dots{display:flex;gap:3px;margin-top:4px;justify-content:center;height:6px;align-items:center;} .cal-dots i{width:5px;height:5px;border-radius:50%;display:inline-block;} .cal-events{padding:clamp(20px,3vw,32px);background:var(--sand);} .cal-events-title{font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 14px;line-height:1.3;} /* « Lundi 26 octobre » : majuscule à la première lettre seulement, pas au mois. */ .cal-events-title::first-letter{text-transform:uppercase;} .cal-events-empty{color:var(--muted);font-size:.88rem;line-height:1.6;margin:0;} .cal-events-list{list-style:none;display:flex;flex-direction:column;gap:14px;padding:0;margin:0;} .cal-event{background:var(--cream);border-left:3px solid var(--teal);padding:14px 16px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.04);} .cal-event[data-d="logement"]{border-left-color:var(--logement);} .cal-event[data-d="budget"]{border-left-color:var(--budget);} .cal-event[data-d="droits"]{border-left-color:var(--droits);} .cal-event[data-d="insertion"]{border-left-color:var(--insertion);} .cal-event[data-d="asso"]{border-left-color:var(--coral);} .cal-event-time{font-size:.72rem;font-weight:700;color:var(--teal-ink);letter-spacing:.6px;} .cal-event[data-d="logement"] .cal-event-time{color:var(--teal-ink);} .cal-event[data-d="budget"] .cal-event-time{color:var(--sea-ink);} .cal-event[data-d="droits"] .cal-event-time{color:var(--droits-ink);} .cal-event[data-d="insertion"] .cal-event-time{color:var(--insertion-ink);} .cal-event[data-d="asso"] .cal-event-time{color:var(--coral-ink);} .cal-event-title{font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--ink);margin:4px 0 6px;line-height:1.3;} .cal-event-meta{font-size:.83rem;color:var(--muted);line-height:1.55;} .cal-event-meta strong{color:var(--slate);font-weight:600;} .cal-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 22px;margin-top:24px;font-size:.78rem;color:var(--muted);} .cal-legend-item{display:inline-flex;align-items:center;gap:6px;} .cal-legend-item i{width:9px;height:9px;border-radius:50%;display:inline-block;} .cal-dot--logement{background:var(--logement);} .cal-dot--budget{background:var(--budget);} .cal-dot--droits{background:var(--droits);} .cal-dot--insertion{background:var(--insertion);} .cal-dot--asso{background:var(--coral);} @media(max-width:768px){ .agenda-calendar{grid-template-columns:1fr;} .cal-grid{border-right:none;border-bottom:1px solid rgba(128,128,128,.14);} .cal-day{font-size:.8rem;} .cal-dots i{width:4px;height:4px;} } /* La section entière a un fond `--cream-fixed` teinté, donc CLAIR dans les deux thèmes. Ses textes doivent l'être aussi : en thème sombre, --ink et --muted devenaient clairs sur ce fond clair — titre à 1,93:1, légende à 2,57:1. Même défaut que le chrome du calendrier, à l'échelle de la section. */ .hv-agenda .hv-h2, .hv-agenda .hv-h2 em{color:var(--cal-ink);} .hv-agenda .hv-h2-sub, .hv-agenda .cal-legend, .hv-agenda .cal-legend-item{color:var(--cal-muted);} .hv-agenda .hv-eyebrow{color:var(--cal-ink);} /* Sans JavaScript, le calendrier ne peut rien afficher : seule reste la note