` * intérieur et non par la cellule. * * Le sélecteur n'est volontairement pas ancré sur une classe de page : il vaut * pour `body.page` (Agenda) comme pour `body.single-calendar`, et pour tout * calendrier Simple Calendar qui serait posé ailleurs plus tard. * * Aucune couleur inventée : toutes viennent de CHARTE-GRAPHIQUE.md. */ /* Déclarées sur le et non sur le conteneur du calendrier : c'est le piège relevé sur les pages précédentes, une variable déclarée sur un frère de l'élément qui l'utilise rend la déclaration invalide au calcul. */ body { --bd-vert: #08403f; --bd-terracotta: #c0623e; --bd-noir: #282828; --bd-creme: #f6f7e9; --bd-filet: #ededed; --bd-hors: #fbfbf4; --bd-complet: #8a8a8a; } /* --------------------------------------------------------------------------- * 1. Conteneur * La grille déborde sous ~620 px : elle défile dans sa propre boîte plutôt que * de faire défiler la page entière (bd-agenda.css, §5). Les infobulles qtip * sont injectées dans le , l'`overflow` ne les rogne donc pas. * ------------------------------------------------------------------------ */ body .simcal-calendar.simcal-default-calendar-grid { margin-top: 26px; overflow-x: auto; } body .simcal-default-calendar-grid > table { width: 100%; min-width: 620px; table-layout: fixed; border-collapse: collapse; margin: 0; background-color: #fff; border: 1px solid var(--bd-filet); border-radius: 15px; font-family: "Roboto", sans-serif; color: var(--bd-noir); } /* Angles posés sur les cellules d'angle, pas par un `overflow: hidden` sur la table — même raison que dans bd-agenda.css : un `overflow` sur un rogne ce qui est rendu hors de sa boîte de bordure. */ body .simcal-default-calendar-grid > table thead tr:first-child > td:first-child { border-top-left-radius: 15px; } body .simcal-default-calendar-grid > table thead tr:first-child > td:last-child { border-top-right-radius: 15px; } body .simcal-default-calendar-grid > table tbody tr:last-child > td:first-child { border-bottom-left-radius: 15px; } body .simcal-default-calendar-grid > table tbody tr:last-child > td:last-child { border-bottom-right-radius: 15px; } /* --------------------------------------------------------------------------- * 2. Barre de navigation (mois précédent / suivant) * Absente du bloc `[bd_agenda]`, qui n'affiche que le mois courant. Elle est * conservée — c'est la seule façon de voir la suite — et habillée en bandeau * crème, avec le titre du mois dans l'Oswald majuscule de la charte. * ------------------------------------------------------------------------ */ body .simcal-default-calendar-grid .simcal-calendar-head .simcal-nav { padding: 14px 12px; vertical-align: middle; background-color: var(--bd-creme); border: 0; border-bottom: 1px solid var(--bd-filet); } body .simcal-default-calendar-grid .simcal-calendar-head .simcal-current h3 { margin: 0; padding: 0; font-family: "Oswald", sans-serif; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; color: var(--bd-vert); } /* L'année en mention secondaire : le mois porte l'information, l'année la situe. */ body .simcal-default-calendar-grid .simcal-calendar-head .simcal-current-year { color: rgba(40, 40, 40, .7); } body .simcal-default-calendar-grid .simcal-nav-button { color: var(--bd-terracotta); font-size: 18px; line-height: 1; } body .simcal-default-calendar-grid .simcal-nav-button:focus, body .simcal-default-calendar-grid .simcal-nav-button:hover { color: var(--bd-vert); } body .simcal-default-calendar-grid .simcal-nav-button:disabled, body .simcal-default-calendar-grid .simcal-nav-button:disabled:hover { /* Le plugin met du blanc quasi opaque, invisible sur le bandeau crème. */ color: var(--bd-complet) !important; } /* --------------------------------------------------------------------------- * 3. Jours de la semaine * Bandeau vert profond, libellés en majuscules espacées, alignés à gauche comme * dans la grille du bloc `[bd_agenda]`. * ------------------------------------------------------------------------ */ body .simcal-default-calendar-grid > table thead th.simcal-week-day { font-family: "Roboto", sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: left; vertical-align: middle; padding: 11px 8px; background-color: var(--bd-vert); color: #fff; border: 0; } /* --------------------------------------------------------------------------- * 4. Cases du mois * Le plugin impose `padding: 0 !important` aux

: la respiration est portée * par le

qu'il place à l'intérieur de chaque jour. * ------------------------------------------------------------------------ */ body .simcal-default-calendar-grid > table tbody td { width: 14.28%; text-align: left; vertical-align: top; border: 1px solid var(--bd-filet); background-color: #fff; } body .simcal-default-calendar-grid .simcal-day > div { box-sizing: border-box; min-height: 88px; height: auto; padding: 9px 9px 11px; /* Neutralise le `border: 1px solid #084041` que le plugin écrit en ligne sur le jour courant : le repère du jour est un cerne intérieur terracotta posé sur la cellule (§5), pas un filet vert. Transparent et non retiré, pour que la case garde la même hauteur utile que ses voisines. */ border-color: transparent !important; } /* Survol : le plugin assombrit de 10 % de noir, ce qui grise la case. Le crème de la charte dit la même chose sans salir la couleur. */ body .simcal-default-calendar-grid.simcal-default-calendar-light .simcal-day:hover { background-color: var(--bd-hors); } /* Cases hors mois. */ body .simcal-default-calendar-grid.simcal-default-calendar-light .simcal-day-void, body .simcal-default-calendar-grid.simcal-default-calendar-light .simcal-day-void:hover { background-color: var(--bd-hors); border-color: var(--bd-filet); } /* Numéro du jour : Oswald vert sur fond de case, jamais la pastille sombre que le plugin pose en ligne dès qu'un événement tombe ce jour-là. */ body .simcal-default-calendar-grid .simcal-day-number { display: block; padding: 0; font-family: "Oswald", sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background: none !important; color: var(--bd-vert) !important; } /* Le plugin réserve 32 px sous un jour vide ; la hauteur minimale de la case s'en charge déjà. */ body .simcal-default-calendar-grid .simcal-no-events { min-height: 0; } /* --------------------------------------------------------------------------- * 5. Jour courant * Cerne intérieur : une bordure changerait la largeur de la cellule et * décalerait toute la colonne (bd-agenda.css, §5). * ------------------------------------------------------------------------ */ body .simcal-default-calendar-grid > table tbody td.simcal-today { box-shadow: inset 0 0 0 2px var(--bd-terracotta); } /* --------------------------------------------------------------------------- * 6. Événements de la case * Puce ronde terracotta de 6 px et texte de 12 px, comme les entrées du bloc * `[bd_agenda]`. Les filets de séparation du plugin sautent : la puce suffit à * distinguer deux entrées, et la charte fait porter la hiérarchie aux aplats. * ------------------------------------------------------------------------ */ body .simcal-default-calendar-grid .simcal-events { display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 6px 0 0; padding: 0; text-align: left; font-size: 12px; } body .simcal-default-calendar-grid .simcal-events > .simcal-event { position: relative; margin: 0; padding: 0 0 0 12px; border-bottom: 0; font-size: 12px; line-height: 1.35; color: rgba(40, 40, 40, .85); } body .simcal-default-calendar-grid .simcal-events > .simcal-event::before { content: ""; position: absolute; left: 0; top: 5px; width: 6px; height: 6px; border-radius: 100px; background-color: var(--bd-terracotta); } /* Le soulignement au survol est conservé : ces entrées ouvrent une infobulle, l'affordance est utile. */ body .simcal-default-calendar-grid .simcal-events > .simcal-event:hover { color: var(--bd-noir); } /* Les pastilles de couleur d'événement (noir d'usine, hors charte) sont masquées par le plugin lui-même en vue grille ; on les neutralise aussi si un réglage venait à les rendre. */ body .simcal-default-calendar-grid .simcal-event-color, body .simcal-default-calendar-grid .simcal-event-color-dot { background-color: var(--bd-terracotta) !important; } /* --------------------------------------------------------------------------- * 7. Petit écran * La grille garde ses 620 px et défile ; on resserre seulement la case pour que * le défilement reste court. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { body .simcal-default-calendar-grid .simcal-day > div { min-height: 72px; padding: 7px 7px 9px; } body .simcal-default-calendar-grid .simcal-calendar-head .simcal-current h3 { font-size: 17px; } } /* --------------------------------------------------------------------------- * 8. Mise en page du post `calendar` seul (/calendar/agenda-du-club/) * * La sidebar de ce gabarit est vide (aucun widget déclaré) : elle est retirée * côté PHP par les filtres `ocean_post_layout_meta_value` / * `ocean_post_layout_class` (« full-width »), le titre H2 du corps l'est par * `ocean_blog_single_elements_positioning` — il doublonnait le H1 de la * page-header. Ne reste ici que le centrage de l'article dans le conteneur, * posé en garde-fou : si le layout du thème revenait un jour à * « right-sidebar », #primary garderait sa largeur et son centrage. * * Le `body` de tête vaut (1,1,1) ou mieux, comme dans tout le reste de la * feuille : on ne compte pas sur l'ordre de chargement. * ------------------------------------------------------------------------ */ body.single-calendar #primary { float: none; width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; } body.single-calendar #content-wrap { margin-left: auto; margin-right: auto; } /* L'article n'a plus d'en-tête : la grille est le premier élément du corps. On lui laisse la même respiration sous la page-header que dans le bloc « Le mois en un coup d'œil ». */ body.single-calendar .entry-content { margin: 0 auto; }