/* ══ MDLM EVENTS — DESIGN SYSTEM (jetons) ══════════════════════════════════ * * Feuille commune des pages d'événements. Elle ne porte QUE des jetons : * aucune règle de mise en page, aucune couleur appliquée. Les écrans * (aujourd'hui la seule fiche individuelle, mdlm-events-single.css) les * consomment. * * Chargée uniquement sur les pages d'événements (fiche, liste, catégorie) et * sur une page qui porte le widget Event View marqué .mdlm-events-view (ou * l'ancien .mdlm-events-list), jamais sur le reste du site. * * Jetons posés sur #tribe-events-pg-template — le conteneur de page de * The Events Calendar — et non sur :root : rien ne fuit vers l'en-tête, le pied * de page ou un autre plugin. Une variable n'est qu'une valeur disponible : la * sidebar en hérite sans qu'aucune règle ne l'emploie sur elle. * * Et sur .mdlm-events-view — la classe posée UNE FOIS dans Elementor sur le * widget Event View de la page des événements (0.1.19), quelle que soit la vue * affichée. Cette page est une page WordPress ordinaire : * #tribe-events-pg-template n'y existe pas. .mdlm-events-list, son ancien nom * (0.1.14 → 0.1.18), est conservé en compatibilité. * * Et sur .mdlm-events-category — classe de corps posée par le plugin sur les * archives de catégorie TEC (0.1.27), et sur .mdlm-events-tag-view — son * pendant pour les vues étiquette TEC (0.1.30) —, où ni #tribe-events-pg-template ni * .mdlm-events-view n'existent. Variables seules : rien n'est appliqué au reste * de la page. * * Et sur .mdlm-past-events — le bloc du shortcode [mdlm_past_events] (0.1.34), posé * dans une page WordPress ordinaire. Variables seules, comme ci-dessus. * * Et sur .tribe-events-tooltip-theme — l'infobulle de TEC, que Tooltipster * déplace dans , hors du widget : sans jetons propres, elle n'hériterait * d'aucun. Une variable seule est inerte ; les règles qui l'emploient sont * scopées dans mdlm-events-month.css. * * Même principe, même bloc : les valeurs restent écrites une seule fois. * * Palette : celle du site et du plugin Espace adhérents (même valeurs, jamais * de teinte concurrente). Trois bleus supplémentaires existent pour une raison * d'ACCESSIBILITÉ, pas de goût : #178FE6 sur blanc n'atteint que 3,4:1, sous * le seuil AA d'un texte courant. * --mdlm-ev-blue bordures, icônes, anneau de focus (non textuel) * --mdlm-ev-blue-strong fond plein sous un texte blanc (≈ 4,9:1) * --mdlm-ev-blue-ink texte bleu sur blanc ou bleu très clair (≥ 5,5:1) * * Surfaces : la fiche est BLANCHE, posée sur le fond clair du site. Les deux * cartes internes (informations, lieu) portent --mdlm-ev-panel, un bleu ultra * pâle franchement perceptible sur le blanc. Le bleu très clair (--mdlm-ev-tint) * ne sert qu'aux pastilles. * * Typographie : Nunito pour les titres, Nunito Sans (la typographie * fonctionnelle du site) pour le texte, avec repli de l'une sur l'autre. * Aucune police n'est chargée par le plugin. */ #tribe-events-pg-template, .mdlm-events-view, .mdlm-events-list, .mdlm-events-category, .mdlm-events-tag-view, .mdlm-past-events, .tribe-events-tooltip-theme { /* ── Décalage sous l'en-tête du site ────────────────────────────────────── * L'en-tête sticky du thème est hors du flux : la page ne lui réserve * aucune place. Ce jeton est le SEUL endroit où cette hauteur est écrite ; * il est consommé une fois, en rembourrage haut du conteneur de page. * À AJUSTER après vérification dans le navigateur, par palier ci-dessous. */ --mdlm-ev-page-offset: 164px; /* Couleurs */ --mdlm-ev-navy: #0B3D82; --mdlm-ev-navy-deep: #082E63; --mdlm-ev-ink: #1B3656; --mdlm-ev-blue: #178FE6; --mdlm-ev-blue-strong: #0B74C2; --mdlm-ev-blue-ink: #0A63B0; /* Bleu très clair : pastilles (date, heure, catégories), état ouvert. */ --mdlm-ev-tint: #EAF5FE; --mdlm-ev-tint-strong: #D6EBFC; /* Survol très léger des cartes et des lignes de menu. */ --mdlm-ev-hover: #F2F8FE; /* Panneau des cartes internes (informations, lieu) posées sur la fiche blanche : un bleu ultra pâle franchement perceptible, avec sa bordure. #F7FBFE (0.1.3) se confondait avec le blanc. */ --mdlm-ev-panel: #F1F7FD; --mdlm-ev-panel-line: #D3E6F6; /* Fond d'attente de la carte Google, avant chargement de l'iframe. */ --mdlm-ev-map-placeholder: #EDF4FA; --mdlm-ev-line: #D9ECFA; /* Bordure d'un élément interactif posé sur blanc : --mdlm-ev-line y serait presque invisible. */ --mdlm-ev-line-strong: #BBD7EF; --mdlm-ev-muted: #50677F; --mdlm-ev-slate-tint: #EEF2F7; --mdlm-ev-slate-line: #DCE4EE; --mdlm-ev-white: #FFFFFF; /* Tarif : jaune / beige doux, texte brun lisible (≈ 7:1 sur son fond). */ --mdlm-ev-amber: #F2A900; --mdlm-ev-amber-tint: #FFF4D9; --mdlm-ev-amber-line: #F3D993; --mdlm-ev-amber-ink: #6B4A00; /* Prix (page Événements, toutes vues) : vert doux, texte ≈ 4,7:1 sur son fond. Déplacés de mdlm-events-list.css en 0.1.19 (--mdlm-el-green-*). */ --mdlm-ev-green-tint: #ECF7E4; --mdlm-ev-green-line: #D3EAC2; --mdlm-ev-green-ink: #3F7A12; /* Typographie */ --mdlm-ev-font-title: "Nunito", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mdlm-ev-font-text: "Nunito Sans", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Espacements — un rythme de base, trois écarts de zone. flow : entre éléments liés (statut, titre, pastilles, bouton) 12 px media : de l'en-tête à l'image — l'image appartient à l'en-tête 24 px reading : de l'image au texte — la respiration la plus large 36 → 48 px zone : entre informations, lieu, navigation 32 → 44 px col : entre deux colonnes d'un conteneur Elementor 16 px */ --mdlm-ev-space-flow: .75rem; --mdlm-ev-space-media: 1.5rem; --mdlm-ev-space-reading: clamp(2.25rem, 1.6rem + 1.2vw, 3rem); --mdlm-ev-space-zone: clamp(2rem, 1.4rem + 1.4vw, 2.75rem); --mdlm-ev-space-col: 1rem; /* Rembourrage de la fiche : 36 px, 28 px en tablette, 18 px sur téléphone. */ --mdlm-ev-shell-padding: 2.25rem; /* Rembourrage BAS de la fiche, à toutes les largeurs (0.1.17) : le vide sous la navigation précédent / suivant, dernier bloc. */ --mdlm-ev-shell-padding-end: 1.5rem; /* Rembourrage des cartes internes (informations, organisateur, lieu). */ --mdlm-ev-card-padding: 1.5rem; /* Rayons */ --mdlm-ev-radius-btn: 9px; --mdlm-ev-radius-sm: 10px; --mdlm-ev-radius-md: 12px; --mdlm-ev-radius-map: 14px; --mdlm-ev-radius-card: 16px; --mdlm-ev-radius-lg: 18px; --mdlm-ev-radius-shell: 22px; --mdlm-ev-radius-pill: 999px; /* Ombres — trois seulement, toutes très discrètes. */ --mdlm-ev-shadow-shell: 0 10px 32px rgba(11, 61, 130, .05); --mdlm-ev-shadow-raised: 0 10px 26px rgba(11, 61, 130, .12); --mdlm-ev-shadow-hover: 0 3px 12px rgba(11, 61, 130, .06); /* Mouvement */ --mdlm-ev-transition: .18s ease; } /* Paliers — alignés sur les points de rupture d'Elementor. */ @media (max-width: 1024px) { #tribe-events-pg-template, .mdlm-events-view, .mdlm-events-list, .mdlm-events-category, .mdlm-events-tag-view, .mdlm-past-events, .tribe-events-tooltip-theme { --mdlm-ev-page-offset: 140px; --mdlm-ev-shell-padding: 1.75rem; } } @media (max-width: 767px) { #tribe-events-pg-template, .mdlm-events-view, .mdlm-events-list, .mdlm-events-category, .mdlm-events-tag-view, .mdlm-past-events, .tribe-events-tooltip-theme { --mdlm-ev-page-offset: 112px; --mdlm-ev-shell-padding: 1.125rem; --mdlm-ev-card-padding: 1.125rem; } }