/* Theme Name: Champniers-et-Reilhac Description: Thème enfant de Twenty Twenty-Five pour la mairie de Champniers-et-Reilhac Template: twentytwentyfive Version: 1.4.0 Author: Mairie de Champniers-et-Reilhac */ /* ============================================================= PALETTE CHROMATIQUE — 5 SECTIONS Chaque section reçoit 3 variables CSS : --section-clair : fond clair (textes sombres dessus) --section-base : couleur principale (boutons, icônes) --section-sombre : textes et hover WordPress ajoute automatiquement les classes page-id-XX et parent-pageid-XX sur le . ============================================================= */ /* ── Variables globales ───────────────────────────────────────── */ :root { --sarcelle-clair: #e1f5f6; --sarcelle: #11777e; --sarcelle-sombre: #044e5f; --gris-clair: #f3f4f2; --gris: #878b87; --gris-sombre: #3d403d; --vert-clair: #eaf6d9; --vert: #56b713; --vert-sombre: #2d6b07; --olive-clair: #f0f5ea; --olive: #77a25c; --olive-sombre: #3d5c27; --chartreuse-clair: #f8f9d8; --chartreuse: #c3c53d; --chartreuse-sombre: #6b6d14; } /* ── 1. Notre commune — Sarcelle ─────────────────────────────── */ .page-id-91, .parent-pageid-91, .ancestor-page-id-91 { --section-clair: var(--sarcelle-clair); --section-base: var(--sarcelle); --section-sombre: var(--sarcelle-sombre); } /* ── 2. Services — Gris chaud ────────────────────────────────── */ .page-id-92, .parent-pageid-92, .ancestor-page-id-92 { --section-clair: var(--gris-clair); --section-base: var(--gris); --section-sombre: var(--gris-sombre); } /* ── 3. Vie locale — Vert vif ────────────────────────────────── */ .page-id-96, .parent-pageid-96, .ancestor-page-id-96 { --section-clair: var(--vert-clair); --section-base: var(--vert); --section-sombre: var(--vert-sombre); } /* ── 4. Environnement — Vert olive ──────────────────────────── */ .page-id-108, .parent-pageid-108, .ancestor-page-id-108 { --section-clair: var(--olive-clair); --section-base: var(--olive); --section-sombre: var(--olive-sombre); } /* ── 5. Tourisme — Chartreuse ────────────────────────────────── */ .page-id-99, .parent-pageid-99, .ancestor-page-id-99 { --section-clair: var(--chartreuse-clair); --section-base: var(--chartreuse); --section-sombre: var(--chartreuse-sombre); } /* ── Application aux éléments ────────────────────────────────── */ .page-id-91, .parent-pageid-91, .ancestor-page-id-91, .page-id-92, .parent-pageid-92, .ancestor-page-id-92, .page-id-96, .parent-pageid-96, .ancestor-page-id-96, .page-id-108, .parent-pageid-108, .ancestor-page-id-108, .page-id-99, .parent-pageid-99, .ancestor-page-id-99 { /* H1 : sombre */ & h1, & .wp-block-post-title { color: var(--section-sombre); } /* H2 : base */ & h2 { color: var(--section-base); } /* Barre latérale sur le titre */ & .wp-block-post-title { border-left: 4px solid var(--section-base); padding-left: 0.75rem; } /* Liens dans le contenu */ & .entry-content a, & .wp-block-post-content a { color: var(--section-base); } & .entry-content a:hover, & .wp-block-post-content a:hover { color: var(--section-sombre); } /* Boutons plein */ & .wp-block-button__link { background-color: var(--section-base) !important; border-color: var(--section-base) !important; color: #fff !important; } & .wp-block-button__link:hover, & .wp-block-button__link:focus { background-color: var(--section-sombre) !important; border-color: var(--section-sombre) !important; } /* Boutons outline */ & .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent !important; color: var(--section-base) !important; border-color: var(--section-base) !important; } & .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: var(--section-clair) !important; color: var(--section-sombre) !important; border-color: var(--section-sombre) !important; } /* Séparateur */ & .wp-block-separator { border-color: var(--section-base); opacity: 0.35; } /* Blockquote */ & blockquote, & .wp-block-pullquote { border-left-color: var(--section-base); background-color: var(--section-clair); } /* Fil d'Ariane */ & .breadcrumbs a, & nav[aria-label="Breadcrumb"] a { color: var(--section-base); } /* Pastilles de termes/catégories */ & .wp-block-post-terms a { background-color: var(--section-clair); color: var(--section-sombre); padding: 0.15em 0.55em; border-radius: 4px; text-decoration: none; } } /* ── Exception Tourisme : chartreuse + texte sombre ─────────── */ /* La chartreuse (#c3c53d) n'a pas assez de contraste avec blanc */ .page-id-99 .wp-block-button__link, .parent-pageid-99 .wp-block-button__link, .ancestor-page-id-99 .wp-block-button__link { color: var(--chartreuse-sombre) !important; } /* ============================================================= BANNIÈRES DE PAGE — couleur par section Classes appliquées via les templates (banner-{section}) ============================================================= */ .section-banner { color: #ffffff; } .section-banner .wp-block-post-title { color: #ffffff; } .banner-notre-commune { background-color: var(--sarcelle); } .banner-services { background-color: var(--gris-sombre); } .banner-vie-locale { background-color: var(--vert-sombre); } .banner-environnement { background-color: var(--olive-sombre); } /* Tourisme : chartreuse claire → texte sombre */ .banner-tourisme { background-color: var(--chartreuse); color: var(--chartreuse-sombre); } .banner-tourisme .wp-block-post-title { color: var(--chartreuse-sombre); } /* ============================================================= FOOTER SOMBRE — Sarcelle sombre #044e5f Cible le template-part footer de Twenty Twenty-Five ============================================================= */ footer.wp-block-template-part, .wp-site-blocks > footer { background-color: #044e5f; color: #e1f5f6; } /* Fond du groupe interne */ .site-footer-inner { background-color: #044e5f; } /* Textes */ .site-footer-inner p, .site-footer-inner li, .site-footer-inner address { color: #e1f5f6; } /* Nom du site */ .site-footer-inner .wp-block-site-title, .site-footer-inner .wp-block-site-title a { color: #ffffff; font-size: 1.1rem; font-weight: 600; text-decoration: none; } /* En-têtes de colonnes */ .footer-col-title { color: #ffffff !important; font-size: 0.75rem !important; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; } /* Liens */ .site-footer-inner a { color: #9fe1cb; text-decoration: none; } .site-footer-inner a:hover { color: #ffffff; text-decoration: underline; } /* Séparateur */ .site-footer-inner .wp-block-separator { border-color: #11777e; opacity: 0.5; margin: 1.5rem 0; } /* Listes de navigation */ .footer-nav { list-style: none !important; padding-left: 0 !important; margin: 0; } .footer-nav li { padding: 0.2rem 0; } /* Infos mairie */ .footer-adresse, .footer-horaires { font-size: 0.875rem; margin-bottom: 0.5rem; } /* Barre basse */ .footer-bottom { font-size: 0.8rem; padding-top: 0.5rem; } .footer-bottom p, .footer-bottom p a { font-size: 0.8rem !important; color: #9fe1cb; } /* Logo dans le footer */ .footer-logo { max-width: 160px; margin: 0 0 1rem; } .footer-logo img { width: 100%; height: auto; } /* Mention officielle */ .footer-mention { font-size: 0.8rem !important; font-style: italic; color: #9fe1cb !important; margin-bottom: 0.75rem; line-height: 1.4; } /* Adresse et horaires */ .footer-adresse { font-size: 0.8rem !important; color: #e1f5f6 !important; line-height: 1.6; margin-bottom: 0.5rem; } /* Lien coordonnées */ .footer-lien-contact a::before { content: "→ "; } /* Flèches sur liens externes */ .footer-nav-externe a::after { content: " ↗"; font-size: 0.75em; opacity: 0.7; } /* Force la taille des liens de nav footer */ .footer-nav a, .footer-nav li { font-size: 0.875rem !important; } /* Lien Espace équipe — discret, visible au survol */ .footer-equipe a { opacity: 0.35; font-size: 0.8rem !important; transition: opacity 0.2s; } .footer-equipe a:hover { opacity: 1; text-decoration: none; } /* ============================================================= HEADER — fond blanc, logo, navigation ============================================================= */ .site-header-inner { background-color: #ffffff; border-bottom: 1px solid #e8eae8; } /* Logo dans le header */ .site-logo { max-width: 280px; margin: 0; flex-shrink: 0; } .site-logo img { width: auto; height: 110px; object-fit: contain; } /* Navigation dans le header */ .site-header-inner .wp-block-navigation { font-size: 0.9rem; } .site-header-inner .wp-block-navigation a { color: var(--gris-sombre); text-decoration: none; font-weight: 500; } .site-header-inner .wp-block-navigation a:hover { color: var(--sarcelle); } /* Bouton hamburger mobile */ .site-header-inner .wp-block-navigation__responsive-container-open, .site-header-inner .wp-block-navigation__responsive-container-close { color: var(--sarcelle-sombre); } /* Champ de recherche dans le header */ .header-search .wp-block-search__inside-wrapper { border: 1px solid #ccc; border-radius: 4px; overflow: hidden; display: flex; } .header-search .wp-block-search__input { border: none; outline: none; padding: 0.35rem 0.6rem; font-size: 0.875rem; width: 180px; background: #fff; color: var(--gris-sombre); } .header-search .wp-block-search__input::placeholder { color: #aaa; } .header-search .wp-block-search__button { background: transparent; border: none; border-left: 1px solid #ccc; padding: 0.35rem 0.6rem; cursor: pointer; color: var(--sarcelle); } .header-search .wp-block-search__button:hover { background-color: var(--sarcelle-clair); } /* Mobile : recherche en 2e ligne, pleine largeur */ @media (max-width: 600px) { .site-header-inner { flex-wrap: wrap !important; } .site-logo { order: 1; flex: 0 0 auto; } .site-header-inner > .wp-block-navigation { order: 2; flex: 0 0 auto; margin-left: auto; } .header-search { order: 3; flex: 0 0 100%; padding-bottom: 0.5rem; } .header-search .wp-block-search__inside-wrapper { width: 100%; } .header-search .wp-block-search__input { width: 100%; flex: 1; } .site-logo img { height: 65px; } } /* ============================================================= FORMULAIRE RÉFÉRENCEMENT — compatibilité Twenty Twenty-Five Contact Form 7 — page Référencement (espace équipe) ============================================================= */ .wpcf7 fieldset { border: 1px solid var(--wp--preset--color--contrast-3, #ddd); border-radius: 4px; padding: var(--wp--preset--spacing--40, 1.5rem); margin-bottom: var(--wp--preset--spacing--40, 1.5rem); } .wpcf7 legend { font-family: var(--wp--preset--font-family--heading, inherit); font-size: var(--wp--preset--font-size--small, 0.875rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0.5rem; color: var(--wp--preset--color--contrast-2, #555); } .wpcf7 label { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: var(--wp--preset--spacing--30, 1rem); font-size: var(--wp--preset--font-size--small, 0.875rem); color: var(--wp--preset--color--contrast, #000); } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"], .wpcf7 select, .wpcf7 textarea { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--wp--preset--color--contrast-3, #ccc); border-radius: 2px; background: var(--wp--preset--color--base, #fff); color: var(--wp--preset--color--contrast, #000); font-family: var(--wp--preset--font-family--body, inherit); font-size: var(--wp--preset--font-size--small, 0.9rem); transition: border-color 0.2s; } .wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--wp--preset--color--contrast, #000); } .wpcf7 textarea { min-height: 140px; resize: vertical; } /* Case RGPD */ .wpcf7 .wpcf7-acceptance label { flex-direction: row; align-items: flex-start; gap: 0.625rem; font-size: var(--wp--preset--font-size--small, 0.875rem); line-height: 1.5; cursor: pointer; } .wpcf7 .wpcf7-acceptance input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; flex-shrink: 0; accent-color: var(--wp--preset--color--contrast, #000); } /* Bouton envoi */ .wpcf7 input[type="submit"] { background: var(--wp--preset--color--contrast, #000); color: var(--wp--preset--color--base, #fff); border: none; padding: 0.75rem 2rem; font-family: var(--wp--preset--font-family--body, inherit); font-size: var(--wp--preset--font-size--small, 0.9rem); font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: opacity 0.2s; } .wpcf7 input[type="submit"]:hover { opacity: 0.75; } /* Messages de validation */ .wpcf7 .wpcf7-not-valid-tip { color: #c0392b; font-size: 0.8rem; margin-top: 0.25rem; } .wpcf7 .wpcf7-response-output { border-radius: 2px; padding: 0.875rem 1rem; margin-top: 1.5rem; font-size: var(--wp--preset--font-size--small, 0.875rem); border-left: 3px solid; } .wpcf7 .wpcf7-mail-sent-ok { border-color: #27ae60; background: #f0faf4; color: #1e7e34; } .wpcf7 .wpcf7-mail-sent-ng, .wpcf7 .wpcf7-spam-blocked { border-color: #c0392b; background: #fdf3f2; color: #922b21; } /* Mention légale reCAPTCHA en pied de formulaire à la place du badge */ .grecaptcha-badge { visibility: hidden; } .wpcf7-form::after { display: block; margin-top: 1rem; font-size: 0.75rem; color: var(--wp--preset--color--contrast-2, #666); content: "Ce formulaire est protégé par reCAPTCHA (politique de confidentialité et conditions d'utilisation de Google)."; } /* ============================================================ THE EVENTS CALENDAR — Harmonisation thème champniers-child Bloc à ajouter à la fin de style.css Version : 1.3.1 — 2026-06-29 Catégories : Salle des fêtes, Cantine municipale, Maison des associations, Bibliothèque municipale, Vie municipale, Équipements sportifs, City stade, Stade ============================================================ */ /* ---------------------------------------------------------- 1. Typographie héritée du thème ---------------------------------------------------------- */ .tribe-common, .tribe-events { font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; } /* ---------------------------------------------------------- 2. Liens TEC ---------------------------------------------------------- */ .tribe-common a, .tribe-events a { color: var(--sarcelle); text-decoration: none; } .tribe-common a:hover, .tribe-events a:hover { color: var(--sarcelle-sombre); text-decoration: underline; } /* ---------------------------------------------------------- 3. En-tête navigation (mois précédent/suivant, titre) ---------------------------------------------------------- */ .tribe-events-header { border-bottom: 2px solid var(--sarcelle); padding-bottom: 0.75rem; margin-bottom: 1.5rem; } .tribe-common-c-btn, .tribe-common-c-btn-border, .tribe-events-c-nav__prev, .tribe-events-c-nav__next { border-color: var(--sarcelle); color: var(--sarcelle); border-radius: 4px; font-family: inherit; } .tribe-common-c-btn:hover, .tribe-common-c-btn-border:hover, .tribe-events-c-nav__prev:hover, .tribe-events-c-nav__next:hover { background-color: var(--sarcelle); color: #fff; } /* ---------------------------------------------------------- 4. Vue Liste — structure générale ---------------------------------------------------------- */ /* Séparateur de mois */ .tribe-events-calendar-list__month-separator-title { display: inline-block; background-color: var(--sarcelle); color: #fff; padding: 0.3rem 1rem; border-radius: 4px; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 0.75rem; } /* Carte événement */ .tribe-events-calendar-list__event .tribe-events-calendar-list__event-wrapper { border-left: 4px solid var(--sarcelle); background-color: var(--sarcelle-clair); border-radius: 0 6px 6px 0; padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease; } .tribe-events-calendar-list__event .tribe-events-calendar-list__event-wrapper:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); } /* Titre de l'événement */ .tribe-events-calendar-list__event-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.2rem; } .tribe-events-calendar-list__event-title-link { color: var(--gris-sombre); text-decoration: none; } .tribe-events-calendar-list__event-title-link:hover { color: var(--sarcelle-sombre); text-decoration: underline; } /* Date et heure */ .tribe-events-calendar-list__event-datetime { font-size: 0.85rem; color: var(--gris); margin-bottom: 0.4rem; } /* Description (extrait) */ .tribe-events-calendar-list__event-description p { font-size: 0.9rem; color: var(--gris-sombre); margin-top: 0.4rem; } /* ---------------------------------------------------------- 5. Vue Liste — couleurs par catégorie Rien à écrire ici. Les couleurs des catégories d'évènement sont gérées par The Events Calendar (fonction « Category Colors ») : elles se choisissent dans l'interface, à Évènements > Catégories d'Évènement, en modifiant une catégorie. TEC génère lui-même les variables --tec-color-category-primary, --tec-color-category-secondary et --tec-color-category-text sur les classes .tribe_events_cat-. Les anciennes règles écrites ici (v1.3.x) ont été retirées en v1.4.0 : elles ciblaient un préfixe de classe erroné (.tribe-event-category-) que The Events Calendar ne produit pas, et ne s'appliquaient donc à aucun élément de la page. Deux de leurs slugs, vie-municipale et repas-festif, n'existaient dans aucune catégorie. Couleurs en place au 17/08/2026, contraste texte sur fond vérifié conforme au RGAA (supérieur à 4,5:1) : Salle des fêtes .............. #c0392b / #f9e0de / #7a1a11 Cantine municipale ........... #d4680a / #fdebd8 / #7a3a06 Maison des associations ...... #2471a3 / #d6eaf8 / #0d3d63 Bibliothèque municipale ...... #7d3c98 / #ead9f5 / #4a1f5e Place des vignes ............. #2d6b07 / #dff0d4 / #1a3e04 (anciennement « Terrain des marchés », renommé le 17/08/2026) Équipements sportifs ......... #1a6b8a / #d0eaf5 / #0a3d52 Stade ........................ #2e7d32 / #dcedc8 / #1b5e20 Église Saint-Paul de Reilhac . #7b5e57 / #f2e9e6 / #4a332e Place de la mairie ........... #34495e / #e4e8ec / #1c2833 Étang de Pouyol .............. #0f7173 / #d8eeee / #0a4344 Église Saint-Paixent ......... #8e3b5c / #f6e2ea / #5c1f39 (ordre : couleur principale / fond / texte) Les catégories de la branche « Type d'évènement » n'ont volontairement pas de couleur : c'est le lieu qui colore l'évènement dans la vue Liste. ---------------------------------------------------------- */ /* --------------------------------------------------------- 9. Articles d'alerte — habillage rouge (v1.3.12) Palette reprise du bandeau d'alertes (v1.3.4) : #c0392b / #fdf3f2 / #922b21 — aucune nouvelle couleur. --------------------------------------------------------- */ /* Titre de l'article en rouge foncé (classe body ajoutee par functions.php) */ .article-alerte h1.wp-block-post-title { color: #922b21; } /* Banniere en tete d'article (injectee par functions.php) */ .cr-alerte-banniere { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; background: #fdf3f2; border-left: 4px solid #c0392b; border-radius: 4px; padding: 14px 18px; margin: 0 0 28px; color: #922b21; } .cr-alerte-banniere strong { font-weight: 700; } .cr-alerte-banniere span { font-size: 15px; opacity: 0.9; } /* Alerte expiree : la banniere passe en gris neutre */ .cr-alerte-banniere.est-terminee { background: #f4f4f4; border-left-color: #8a8a8a; color: #555; } /* ============================================================= 10. NAVIGATION & CONTACTS — v1.3.14 Fil d'Ariane, cartes des pages filles, contacts, mails. Les couleurs de section (--section-*) s'appliquent seules sur les pages des 5 rubriques ; ailleurs, repli gris neutre. ============================================================= */ /* ── Fil d'Ariane ─────────────────────────────────────────────── */ .cr-fil-ariane { max-width: var(--wp--style--global--content-size, 800px); margin-inline: auto; padding: 10px 1.5rem 0; font-size: 0.85rem; } .cr-fil-ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; } .cr-fil-ariane li { display: flex; align-items: baseline; } .cr-fil-ariane li + li::before { content: "›"; margin: 0 8px; color: #767570; } .cr-fil-ariane a { color: var(--section-sombre, #3d403d); text-decoration: underline; text-underline-offset: 2px; } .cr-fil-ariane a:hover, .cr-fil-ariane a:focus { color: var(--section-base, #11777e); } .cr-fil-ariane [aria-current="page"] { color: #555; } /* ── Cartes des pages filles ─────────────────────────────────── */ .cr-pages-filles { margin-top: 2.5rem; } .cr-pages-filles h2 { color: var(--section-sombre, #3d403d); font-size: 1.3rem; margin-bottom: 1rem; } .cr-pages-filles ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .cr-pages-filles li a { display: block; background: var(--section-clair, #f3f4f2); color: var(--section-sombre, #3d403d); border-radius: 8px; padding: 18px 16px; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .cr-pages-filles li a:hover, .cr-pages-filles li a:focus { background: var(--section-base, #3d403d); color: #fff; } /* ── Cartes contacts (page Contact) ──────────────────────────── */ .cr-contacts { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-block: 1.5rem; } .cr-contact-carte { background: #fff; border: 1px solid #dcdbd5; border-top-width: 4px; padding: 18px 18px 20px; margin: 0 !important; } .cr-contact-carte h3 { font-size: 1.05rem; margin: 0 0 8px; } .cr-contact-carte p { font-size: 0.9rem; margin: 0 0 10px; } .cr-contact-carte p:last-child { margin-bottom: 0; } .cr-contact-secretariat { border-top-color: var(--sarcelle); } .cr-contact-secretariat h3, .cr-contact-secretariat .cr-mail { color: var(--sarcelle-sombre); } .cr-contact-maire { border-top-color: var(--olive); } .cr-contact-maire h3, .cr-contact-maire .cr-mail { color: var(--olive-sombre); } .cr-contact-communication { border-top-color: var(--vert); } .cr-contact-communication h3, .cr-contact-communication .cr-mail { color: var(--vert-sombre); } .cr-contact-webmestre { border-top-color: var(--gris); } .cr-contact-webmestre h3, .cr-contact-webmestre .cr-mail { color: var(--gris-sombre); } /* ── Liens mail protégés ─────────────────────────────────────── */ a.cr-mail { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* ============================================================= 11. BANDEAUX PHOTO — haut (feuillage) et bas (étang) Présents sur toutes les pages via parts/header.html et parts/footer.html (y compris pages Agenda grâce au pont header.php / footer.php). Images embarquées dans le thème enfant : dossier img/ (URLs relatives à style.css). Le voile sarcelle sombre (opacité .78) garantit un contraste texte blanc ≥ 4,5:1 (RGAA) même sur les zones claires des photos ; le text-shadow renforce la lisibilité. ============================================================= */ .bandeau-haut, .bandeau-bas { /* Layout flex explicite : sur les pages rendues via le pont PHP (accueil, fiches événement), WordPress ne génère pas les règles wp-container-* des blocs — sans ceci, tout se tasse d'un côté */ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background-size: cover; background-position: center; color: #ffffff; font-size: 0.85rem; padding: 0.5rem 1.5rem; gap: 0.5rem 1.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } .bandeau-haut { background-image: linear-gradient(rgba(4, 78, 95, 0.78), rgba(4, 78, 95, 0.78)), url('img/bandeau-haut-feuillage.jpg'); } .bandeau-bas { background-image: linear-gradient(rgba(4, 78, 95, 0.78), rgba(4, 78, 95, 0.78)), url('img/bandeau-bas-etang.jpg'); } .bandeau-haut p, .bandeau-bas p { margin: 0; color: #ffffff; } .bandeau-haut a, .bandeau-bas a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; } .bandeau-haut a:hover, .bandeau-bas a:hover { text-decoration-thickness: 2px; } .bandeau-haut a:focus-visible, .bandeau-bas a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } /* Menu de droite du bandeau haut : liens + recherche */ .bandeau-haut .bandeau-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; } /* La recherche garde son style .header-search (fond blanc), lisible sur le fond sombre ; pas de text-shadow dans le champ */ .bandeau-haut .header-search { margin: 0; text-shadow: none; } /* Mobile : padding réduit, recherche pleine largeur */ @media (max-width: 600px) { .bandeau-haut, .bandeau-bas { padding-left: 1.25rem; padding-right: 1.25rem; } .bandeau-haut .bandeau-menu { flex: 0 0 100%; justify-content: flex-start; } .bandeau-haut .header-search { flex: 0 0 100%; padding-bottom: 0; } } /* ============================================================= 12. IMPRESSION — ne restent que le contenu et les 2 bandeaux, qui servent d'en-tête et de signature aux documents imprimés (le bandeau bas porte l'adresse et le téléphone de la mairie). print-color-adjust force l'impression des fonds photo, que les navigateurs ignorent par défaut. v1.3.16. ============================================================= */ @media print { .bandeau-haut, .bandeau-bas { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Masqués sur papier : header (logo + menu), liens du bandeau haut (recherche comprise), fil d'Ariane, footer */ .site-header-inner, .bandeau-haut .bandeau-menu, .cr-fil-ariane, .site-footer-inner { display: none !important; } } /* ============================================================= 13. FICHES ÉVÈNEMENT — bandeau statut + infos pratiques (v1.3.17). Le pont PHP (single-tribe_events.php) affiche lui-même le statut Annulé/Reporté et le bloc date/lieu, que les filtres de TEC ne rendent pas sur ces pages. Palette existante réutilisée : rouge des alertes (#c0392b / #fdf3f2 / #922b21) pour « annulé », orange cantine (#d4680a / #fdebd8 / #7a3a06) pour « reporté ». L'information passe par le texte, pas seulement par la couleur (RGAA). ============================================================= */ .cr-event-statut { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; border-left: 4px solid; border-radius: 4px; padding: 14px 18px; margin: 0 0 20px; } .cr-event-statut strong { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .cr-event-statut span { font-size: 15px; opacity: 0.9; } .cr-event-statut.est-annule { background: #fdf3f2; border-left-color: #c0392b; color: #922b21; } .cr-event-statut.est-reporte { background: #fdebd8; border-left-color: #d4680a; color: #7a3a06; } /* Bloc date / horaires / lieu */ .cr-event-infos { background: var(--sarcelle-clair); border-left: 4px solid var(--sarcelle); border-radius: 0 4px 4px 0; padding: 12px 18px; margin: 0 0 28px; font-size: 0.95rem; } .cr-event-infos p { margin: 0.2rem 0; color: var(--sarcelle-sombre); }