/* ══ MDLM EVENTS — FICHE ÉVÉNEMENT INDIVIDUELLE ════════════════════════════ * * Habillage de la fiche single de The Events Calendar rendue par un gabarit * Elementor. Visuel UNIQUEMENT : aucun contenu n'est ajouté, retiré ou * réécrit, aucun gabarit n'est surchargé, aucun script n'est employé. * * ── LOGIQUE VISUELLE ────────────────────────────────────────────────────── * fond clair du site → grande fiche BLANCHE → en-tête, image et texte * directement sur le blanc → deux cartes internes sur panneau bleu ultra pâle * (informations + organisateur réunis, lieu) → navigation discrète. Le bleu * très clair plein ne sert qu'aux pastilles. * * ── SCOPE ───────────────────────────────────────────────────────────────── * Le gabarit contient la fiche ET une sidebar TEC (vue « événements à venir »). * Toute règle de design commence donc par : * * body.single-tribe_events #tribe-events-pg-template .mdlm-event-main * * .mdlm-event-main est une classe CSS posée À LA MAIN dans Elementor sur le * conteneur de la fiche (Avancé → Classes CSS). La sidebar en est la sœur : * aucun sélecteur de cette feuille ne peut l'atteindre. Sans cette classe, * rien ne s'applique à la fiche — échec sans dégât, rendu TEC d'origine. * * Carte d'informations : la classe .mdlm-event-infos (ou .mdlm-event-info) est * une ANCRE posée sur la colonne gauche d'une section interne Elementor ; la * carte est la SECTION qui la contient (§ 11). * * DEUX règles de mise en page seulement sortent de .mdlm-event-main (§ 1) : le * conteneur de page (largeur, décalage sous l'en-tête) et la rangée des deux * grandes colonnes fiche / sidebar (gouttière de 30 px, largeurs). C'est de la * mise en page, pas du design ; aucun style interne de la sidebar n'est posé * ici. * * Poids : l'identifiant fait passer ces règles devant TEC, Elementor et le * thème SANS !important — aucune n'est employée. Aucun identifiant Elementor * (.elementor-element-xxxx) n'est un socle. * * ── MARQUAGE ET STYLES TEC — relevés dans la source, pas supposés ───────── * (the-events-calendar : src/views/integrations/elementor/widgets/ et * src/resources/postcss/integrations/plugins/elementor/widgets/) * * - widget-base.pcss : tout élément TEC imbriqué dans un autre élément TEC * reçoit margin: inherit ET padding: inherit, et impose sa propre police * (--tec-font-family-sans-serif). Neutralisé au § 3. * - export.pcss : c'est la LISTE (__export-dropdown-list) que TEC place en * position: absolute, pas le contenu. Le script en ligne de TEC écrit * style.display sur __export-dropdown-content et aria-expanded sur le * bouton. Cette feuille ne définit JAMAIS « display » sur ce contenu. * - venue.pcss : widget en flex ROW dès 767 px, carte en width: fit-content, * max-width: 580px, grille 1fr 1fr même sans carte. * - skeleton/_single-event.pcss et tribe-events-full.pcss : conteneur de page * plafonné à 1048 px ou 1200 px, rembourré. * - navigation.pcss : liste en flex, justify-content: space-between. * - date : @ - . * - catégories : liens séparés par des nœuds TEXTE « , » ; étiquettes : par * un dont l'attribut class est malformé côté TEC. * - lieu : un seul lieu → conteneur sans modificateur ; plusieurs lieux → * chaque conteneur porte __venue-multiple. * - navigation : SVG sans viewBox (12 × 20). * - Event_Venue.php : réglages de style Elementor du widget Lieu écrits sur * __venue-map — « Width » par défaut 50 % (desktop, tablette) / 100 % * (téléphone) en max-width + width, « Height » en calc(100% - …). * Neutralisés au § 12. * * Elementor (assets/dev/scss/frontend/_container.scss) emploie ::before sur * .e-con pour la superposition de fond : ne jamais y poser un ::before. * * ── SOMMAIRE ────────────────────────────────────────────────────────────── * 1. Conteneur de page : largeur libre, décalage sous l'en-tête * 2. Fiche blanche (.mdlm-event-main) * 3. Typographie, rythme et remises à zéro * 4. En-tête : statut, titre, pastilles date et heure * 5. Ajouter au calendrier * 6. Tarif * 7. Image * 8. Contenu éditorial * 9. Titres de carte, catégories, étiquettes, site * 10. Organisateur * 11. Informations complémentaires (section interne ancrée par .mdlm-event-infos) * 12. Lieu et carte * 13. Navigation précédent / suivant * 14. Commentaires (widget Post Comments) * 15. Mouvement réduit * 16. Points de rupture */ /* ══ 1. CONTENEUR DE PAGE ══════════════════════════════════════════════════ * * LARGEUR : TEC plafonne #tribe-events-pg-template (1048 ou 1200 px selon la * feuille chargée). Plafond levé : le conteneur Elementor (≈ 1400 px) décide. * * DÉCALAGE : l'en-tête sticky est hors du flux. Un seul rembourrage haut, * --mdlm-ev-page-offset, posé ici et nulle part ailleurs. Posé sur le * conteneur de page et non sur la fiche : la sidebar descend du même * décalage, les deux colonnes restent alignées, et son réglage sticky * Elementor n'est pas touché. */ body.single-tribe_events #tribe-events-pg-template { box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: var(--mdlm-ev-page-offset) 0 var(--mdlm-ev-space-zone); } /* ── Rangée fiche / sidebar ──────────────────────────────────────────────── * * DOM : section.elementor-top-section > .elementor-container * > .elementor-column.mdlm-event-main * > .elementor-column.mdlm-event-sidebar * * Cible : le seul conteneur qui a les DEUX colonnes pour enfants directs, par * :has() — aucun identifiant Elementor. * * Desktop et tablette (≥ 768 px, colonnes côte à côte) : le plugin ne pose * QUE la gouttière de 30 px (column-gap). Les LARGEURS appartiennent à * Elementor (réglages de colonne, classes .elementor-col-*, CSS responsive * généré) : aucune proportion, aucun flex-basis, aucune width n'est imposée * ici. Chaque colonne garde sa width Elementor comme base (flex-basis: auto) * et peut seulement RÉTRÉCIR (flex: 0 1 auto ; min-width: 0) : 70 % + 30 % + * 30 px se résorbe en rétrécissant les deux colonnes au prorata de leur * largeur, sans débordement ni changement de ratio notable. * * La fiche porte sa carte blanche sur la colonne elle-même : la gouttière * commence au bord de cette carte. La carte de la sidebar est posée À * L'INTÉRIEUR de sa colonne, derrière le rembourrage horizontal de 10 px de la * gouttière Elementor (.elementor-element-populated) : ce rembourrage, et lui * seul, est retiré sur la colonne sidebar, pour que l'espace visible entre les * deux cartes soit bien 30 px. Rien d'autre n'est touché dans la sidebar, et * le rembourrage intérieur de la fiche ne change pas. * * Téléphone (≤ 767 px) : colonnes empilées, 24 px entre elles (§ 16). */ @media (min-width: 768px) { body.single-tribe_events #tribe-events-pg-template .elementor-top-section > .elementor-container:has(> .mdlm-event-main):has(> .mdlm-event-sidebar) { display: flex; flex-wrap: nowrap; column-gap: 30px; } body.single-tribe_events #tribe-events-pg-template .elementor-top-section > .elementor-container:has(> .mdlm-event-main):has(> .mdlm-event-sidebar) > :is(.mdlm-event-main, .mdlm-event-sidebar) { flex: 0 1 auto; min-width: 0; } body.single-tribe_events #tribe-events-pg-template .elementor-top-section > .elementor-container:has(> .mdlm-event-main):has(> .mdlm-event-sidebar) > .mdlm-event-sidebar > :is(.elementor-widget-wrap, .elementor-column-wrap) { padding-left: 0; padding-right: 0; } } /* ══ 2. FICHE BLANCHE ══════════════════════════════════════════════════════ * Blanc net, bordure légère, rayon 22 px, ombre très discrète. Rembourrage * 36 / 28 / 18 px par le jeton --mdlm-ev-shell-padding ; en BAS, 24 px à * toutes les largeurs par --mdlm-ev-shell-padding-end (0.1.17) : c'est le * vide sous la navigation précédent / suivant, dernier bloc de la fiche. * * Jamais d'overflow: hidden ici : il couperait le menu « Ajouter au * calendrier ». min-width: 0 : colonne flexible à côté de la sidebar, elle ne * doit jamais pousser la rangée au-delà du conteneur. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main { box-sizing: border-box; min-width: 0; max-width: 100%; padding: var(--mdlm-ev-shell-padding); padding-block-end: var(--mdlm-ev-shell-padding-end); border: 1px solid var(--mdlm-ev-line); border-radius: var(--mdlm-ev-radius-shell); background: var(--mdlm-ev-white); box-shadow: var(--mdlm-ev-shadow-shell); color: var(--mdlm-ev-ink); } /* ══ 3. TYPOGRAPHIE, RYTHME ET REMISES À ZÉRO ══════════════════════════════ */ /* Police du texte sur TOUTE la fiche. Le kit Elementor ou le thème peuvent imposer leur police (« Cuba ») aux titres, paragraphes et liens ; TEC impose la sienne à ses widgets. Cette règle les remplace dans la fiche seulement, avec un poids faible (:where) : chaque composant peut encore choisir Nunito. Les icônes à police (, Font Awesome) sont exclues. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main, body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :where(div, p, ul, ol, li, dl, dt, dd, a, strong, b, em, small, blockquote, figcaption, address, table, th, td, label, button, h1, h2, h3, h4, h5, h6, span:not([class*="icon"], [class*="fa-"])) { font-family: var(--mdlm-ev-font-text); } /* Héritage TEC (widget-base.pcss) : margin et padding « inherit » sur tout élément TEC imbriqué. Ramenés à zéro avec un poids FAIBLE (:where) : plus fort que TEC, plus faible que chaque composant ci-dessous. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :where([class*="tec-events-elementor-event-widget__"] [class*="tec-events-elementor-event-widget__"]) { margin: 0; padding: 0; } /* Deux rythmes seulement. flow entre éléments liés : c'est la gouttière de tous les conteneurs de la fiche. Les rembourrages des conteneurs imbriqués sont retirés : la fiche porte seule la marge intérieure. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main, body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :where(.e-con, .e-con-inner) { row-gap: var(--mdlm-ev-space-flow); column-gap: var(--mdlm-ev-space-col); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :where(.e-con) { padding: 0; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main > :where(.elementor-widget, .e-con), body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :where(.e-con, .e-con-inner) > :where(.elementor-widget, .e-con) { margin-block: 0; } /* Écarts de zone : supplément de marge sur chaque zone qui n'est pas la première de son conteneur. Même poids faible que la remise à zéro ci-dessus, donc écrit APRÈS elle. Une zone est reconnue par l'élément lui-même OU par ce qu'elle CONTIENT (:has) : un conteneur Elementor qui enveloppe le texte, les informations ou le lieu reçoit l'écart, et plus seulement le widget. En 0.1.3, le widget de texte n'était reconnu que lui-même : posé dans son propre conteneur, il ne recevait aucun écart, d'où l'image « collée » au texte. Un conteneur qui réunit plusieurs zones prend l'écart de la PREMIÈRE qu'il contient : les trois règles sont écrites de la dernière zone à la première, la plus haute dans la page l'emportant à poids égal. La carte d'informations n'est PAS dans cette liste : elle porte son propre écart, posé sur la carte elle-même (§ 11), pour ne dépendre ni de sa place dans son conteneur ni de la reconnaissance d'un parent. 1. zone — lieu, navigation 32 → 44 px */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main > :where(.elementor-widget, .e-con):where(:not(:first-child)):where(:has(.tec-events-elementor-event-widget__venue, .tec-events-elementor-event-widget__navigation)), body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :where(.e-con, .e-con-inner) > :where(.elementor-widget, .e-con):where(:not(:first-child)):where(:has(.tec-events-elementor-event-widget__venue, .tec-events-elementor-event-widget__navigation)) { margin-block-start: calc(var(--mdlm-ev-space-zone) - var(--mdlm-ev-space-flow)); } /* 2. reading — de l'image au texte 36 → 48 px */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main > :where(.elementor-widget, .e-con):where(:not(:first-child)):where(.elementor-widget-theme-post-content, :has(.elementor-widget-theme-post-content)), body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :where(.e-con, .e-con-inner) > :where(.elementor-widget, .e-con):where(:not(:first-child)):where(.elementor-widget-theme-post-content, :has(.elementor-widget-theme-post-content)) { margin-block-start: calc(var(--mdlm-ev-space-reading) - var(--mdlm-ev-space-flow)); } /* 3. media — de l'en-tête (tarif, bouton) à l'image 24 px En 0.1.3, l'image recevait l'écart de zone complet (32 → 44 px) : trop d'espace sous « Entrée libre ». */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main > :where(.elementor-widget, .e-con):where(:not(:first-child)):where(:has(.tec-events-elementor-event-widget__image)), body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :where(.e-con, .e-con-inner) > :where(.elementor-widget, .e-con):where(:not(:first-child)):where(:has(.tec-events-elementor-event-widget__image)) { margin-block-start: calc(var(--mdlm-ev-space-media) - var(--mdlm-ev-space-flow)); } /* Les zones occupent toute la largeur de la fiche, même si leur conteneur aligne ses enfants au début. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :where(.elementor-widget):is(.elementor-widget-theme-post-content, :has(.tec-events-elementor-event-widget__image, .tec-events-elementor-event-widget__venue, .tec-events-elementor-event-widget__navigation)) { align-self: stretch; box-sizing: border-box; width: 100%; max-width: 100%; } /* Widget d'événement TEC qui n'a rien rendu : enveloppe masquée pour ne pas coûter un espacement. « _event_ » exclut les vues (events_view). Une donnée est toujours rendue dans un élément TEC : rien de réel ne peut disparaître. EXCEPTION .tec-events-back (0.1.17) : le widget « Event Calendar Link » (tec_events_elementor_widget_event_calendar_link) contient « tec_ » et « _event_ », mais son gabarit rend

— AUCUNE classe tec-events-elementor-event-widget__. Cette règle le prenait pour un widget vide et masquait « Tous les Évènements » depuis la 0.1.x. Toute exception future se déclare ici, par la classe réellement rendue. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget[class*="elementor-widget-tec_"][class*="_event_"]:not(:has([class*="tec-events-elementor-event-widget__"], .tec-events-back)) { display: none; } /* Widget Shortcode qui n'a rien rendu (0.1.32) — [mdlm_event_recap] renvoie une chaîne vide quand le retour est désactivé : le widget ne coûte alors aucun espacement. Markup Elementor relevé : div.elementor-widget-shortcode > div.elementor-shortcode (vide), avec ou sans .elementor-widget-container. Même chose pour une section interne ou un conteneur qui ne contient QUE des widgets Shortcode, tous vides : aucun rembourrage orphelin. Un widget qui rend quoi que ce soit n'est jamais masqué. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-shortcode:has(.elementor-shortcode):not(:has(.elementor-shortcode:not(:empty))), body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :is(.elementor-inner-section, .e-con):has(.elementor-widget-shortcode .elementor-shortcode):not(:has(.elementor-widget:not(.elementor-widget-shortcode))):not(:has(.elementor-shortcode:not(:empty))) { display: none; } /* ══ 4. EN-TÊTE ════════════════════════════════════════════════════════════ */ /* ── Bouton retour « Tous les Évènements » (0.1.17, bouton en 0.1.18) ──────── * Widget TEC « Event Calendar Link » :

« …. * L'URL est posée côté PHP (MDLM_Events_Back_Link), jamais ici. * * PETIT BOUTON SECONDAIRE, pas une pastille : fond blanc, bordure bleue, * rayon 10 — rien de commun avec le badge d'état « Cet évènement est passé » * (fond gris-bleu, forme en pilule), qui le suit et n'est pas modifié. * * Le chevron « « » est un nœud texte collé au libellé dans le gabarit TEC : * aucun sélecteur ne l'isole (::first-letter ne s'applique pas à un conteneur * flex, et l'espace qui le suit le rend imprévisible). Il est conservé tel * quel, sans animation séparée ; aucun gabarit n'est surchargé pour lui. * * DOM : widget retour → widget statut (événement passé seulement) → titre, * trois widgets frères. L'écart retour → statut (16 px) est la SEULE marge * basse de ce widget ; statut → titre reste l'espacement Elementor. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-tec_events_elementor_widget_event_calendar_link { margin-block-end: 1rem; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-back { margin: 0; padding: 0; line-height: 1; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-back a, body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-back a:visited { display: inline-flex; align-items: center; gap: .375rem; box-sizing: border-box; max-width: 100%; min-height: 2.25rem; margin: 0; padding: .5rem .8125rem; border: 1px solid var(--mdlm-ev-blue); border-radius: 10px; background: var(--mdlm-ev-white); box-shadow: none; color: var(--mdlm-ev-blue-ink); font-family: var(--mdlm-ev-font-text); font-size: .875rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color var(--mdlm-ev-transition), border-color var(--mdlm-ev-transition), color var(--mdlm-ev-transition); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-back a:is(:hover, :focus) { border-color: var(--mdlm-ev-blue-strong); background: var(--mdlm-ev-tint); color: var(--mdlm-ev-navy); text-decoration: none; outline: none; } /* Focus clavier : anneau bleu, jamais le contour noir + ombre blanche du thème. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-back a:focus-visible { outline: 2px solid var(--mdlm-ev-blue); outline-offset: 2px; box-shadow: none; } /* ── Statut « Cet évènement est passé » ──────────────────────────────────── */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__status-passed { display: flex; align-items: center; gap: .4375rem; box-sizing: border-box; width: fit-content; max-width: 100%; min-height: 1.875rem; margin: 0; padding: .25rem .75rem .25rem .625rem; border: 1px solid var(--mdlm-ev-slate-line); border-radius: var(--mdlm-ev-radius-pill); background: var(--mdlm-ev-slate-tint); color: var(--mdlm-ev-muted); font-size: .8125rem; font-weight: 600; line-height: 1.2; } /* Point décoratif : content vide, rien n'est annoncé. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__status-passed::before { content: ""; flex: 0 0 auto; width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; opacity: .7; } /* ── Titre : Nunito, bleu marine, affirmé ──────────────────────────────── */ /* Le rythme flow est resserré à 12 px (pastilles, tarif, bouton) : le titre garde 8 px de plus sous lui pour rester nettement détaché. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__title { margin: 0 0 .5rem; padding: 0; color: var(--mdlm-ev-navy); font-family: var(--mdlm-ev-font-title); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: break-word; } /* ── Date et horaires : de vraies pastilles ───────────────────────────────── * * ( 📅 12 septembre ) ( 🕑 2:00 pm – 8:00 pm ) * * La date et chaque heure sont des distincts : chacun devient une * pastille bleu très clair. Quand deux heures se suivent (« 2:00 pm - 8:00 pm »), * les deux pastilles et le « - » qui les sépare sont SOUDÉS en une seule — * coins intérieurs à zéro, séparateur au même fond. Sans :has(), les heures * restent deux pastilles voisines, sans dégât. * * Le « @ » est masqué VISUELLEMENT (il reste lu). L'écart entre pastilles est * une marge, pas une gouttière, pour pouvoir souder les heures. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__datetime-wrapper { margin: 0; padding: 0; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__datetime { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 0; box-sizing: border-box; width: fit-content; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--mdlm-ev-blue-ink); font-size: .875rem; font-weight: 600; line-height: 1.2; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :is(.tec-events-elementor-event-widget__datetime-date, .tec-events-elementor-event-widget__datetime-time) { display: inline-flex; align-items: center; gap: .4375rem; box-sizing: border-box; min-height: 2.125rem; margin: 0 .5rem 0 0; padding: .375rem .875rem; border: 1px solid var(--mdlm-ev-line); border-radius: var(--mdlm-ev-radius-pill); background: var(--mdlm-ev-tint); color: var(--mdlm-ev-blue-ink); font-size: inherit; line-height: inherit; white-space: nowrap; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__datetime-date { font-weight: 700; } /* Pictogrammes décoratifs de 16 px : calendrier devant la première date, horloge devant toute heure qui suit « @ ». content vide, jamais annoncés. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__datetime > .tec-events-elementor-event-widget__datetime-date:first-of-type::before, body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__datetime-date + .tec-events-elementor-event-widget__datetime-separator + .tec-events-elementor-event-widget__datetime-time::before { content: ""; flex: 0 0 auto; width: 1rem; height: 1rem; background-position: center; background-repeat: no-repeat; background-size: contain; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__datetime > .tec-events-elementor-event-widget__datetime-date:first-of-type::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A63B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='3'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E"); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__datetime-date + .tec-events-elementor-event-widget__datetime-separator + .tec-events-elementor-event-widget__datetime-time::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A63B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); } /* Séparateur hors pastille (événement de plusieurs jours) : texte discret. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__datetime-separator { margin: 0 .5rem 0 0; padding: 0; color: var(--mdlm-ev-muted); font-weight: 500; } /* Heure suivie d'un « - » et d'une seconde heure : moitié gauche soudée. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__datetime-time:has(+ .tec-events-elementor-event-widget__datetime-separator + .tec-events-elementor-event-widget__datetime-time) { margin-inline-end: 0; padding-inline-end: .375rem; border-inline-end: 0; border-start-end-radius: 0; border-end-end-radius: 0; } /* Le « - » entre deux heures : même fond, mêmes bordures haute et basse. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__datetime-time + .tec-events-elementor-event-widget__datetime-separator:has(+ .tec-events-elementor-event-widget__datetime-time) { display: inline-flex; align-self: stretch; align-items: center; box-sizing: border-box; margin: 0; padding: 0 .125rem; border-block: 1px solid var(--mdlm-ev-line); background: var(--mdlm-ev-tint); color: var(--mdlm-ev-blue-ink); font-weight: 600; } /* Seconde heure : moitié droite soudée. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__datetime-time + .tec-events-elementor-event-widget__datetime-separator + .tec-events-elementor-event-widget__datetime-time { padding-inline-start: .375rem; border-inline-start: 0; border-start-start-radius: 0; border-end-start-radius: 0; } /* « @ » : le seul séparateur PRÉCÉDÉ d'une date et SUIVI d'une heure. Sans :has(), la règle est ignorée et le « @ » reste affiché. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__datetime-date + .tec-events-elementor-event-widget__datetime-separator:has(+ .tec-events-elementor-event-widget__datetime-time) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__datetime-timezone { color: var(--mdlm-ev-muted); font-size: .8125rem; } /* ══ 5. AJOUTER AU CALENDRIER ══════════════════════════════════════════════ * * Correctif fonctionnel de la 0.1.1, conservé à l'identique : TEC place la * LISTE en absolu ; le CONTENU est le panneau (absolu, JAMAIS d'overflow), la * liste revient dans le flux. Toujours aucun « display » posé sur le contenu : * ouverture, fermeture et aria-expanded restent au script de TEC. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export { margin: 0; padding: 0; } /* Prévention : chaque conteneur de la fiche qui porte le menu passe au-dessus de ses frères (image, contenu), même si l'un d'eux crée un contexte d'empilement. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :where(.e-con, .e-con-inner, .elementor-widget):has(.tec-events-elementor-event-widget__export-dropdown) { position: relative; z-index: 5; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown { position: relative; display: inline-block; max-width: 100%; margin: 0; padding: 0; vertical-align: top; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; box-sizing: border-box; width: auto; max-width: 100%; min-height: 40px; margin: 0; padding: .4375rem 1rem; border: 1px solid var(--mdlm-ev-blue); border-radius: var(--mdlm-ev-radius-btn); background: var(--mdlm-ev-white); box-shadow: none; color: var(--mdlm-ev-blue-ink); font-size: .875rem; font-weight: 600; line-height: 1.2; letter-spacing: normal; text-align: center; text-decoration: none; text-transform: none; cursor: pointer; transition: background-color var(--mdlm-ev-transition), border-color var(--mdlm-ev-transition), color var(--mdlm-ev-transition); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-button :is(i, span, svg) { color: inherit; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-export-icon { flex: 0 0 auto; margin: 0; font-size: 1rem; line-height: 1; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-icon { flex: 0 0 auto; width: .625rem; height: .375rem; margin: 0; fill: currentColor; transition: transform var(--mdlm-ev-transition); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-icon--active { transform: rotate(180deg); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-button[aria-expanded="true"] { background: var(--mdlm-ev-hover); } /* Survol : fond plein --mdlm-ev-blue-strong, sous lequel le blanc atteint AA. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-button:hover { border-color: var(--mdlm-ev-blue-strong); background: var(--mdlm-ev-blue-strong); color: var(--mdlm-ev-white); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-button:focus { outline: none; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-button:focus-visible { outline: 2px solid var(--mdlm-ev-blue); outline-offset: 2px; } /* ── Panneau ───────────────────────────────────────────────────────────── */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-content { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; box-sizing: border-box; min-width: 100%; width: max-content; max-width: min(17.5rem, calc(100vw - 2rem)); margin: 0; padding: 0; border: 1px solid var(--mdlm-ev-line); border-radius: var(--mdlm-ev-radius-sm); background: var(--mdlm-ev-white); box-shadow: var(--mdlm-ev-shadow-raised); } /* La liste revient dans le flux du panneau : c'est elle qui lui donne sa hauteur. Tout ce que TEC lui donnait de visuel passe au panneau. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-list { position: static; z-index: auto; box-sizing: border-box; width: auto; margin: 0; padding: .375rem .3125rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; list-style: none; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-list-item { margin: 0; padding: 0; border: 0; background: none; list-style: none; font-size: .875rem; line-height: 1.35; text-wrap: wrap; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-link { display: block; margin: 0; padding: .4375rem .75rem; border: 0; border-radius: 7px; background: transparent; color: var(--mdlm-ev-navy); font-size: .875rem; font-weight: 500; line-height: 1.35; text-align: left; text-decoration: none; transition: background-color var(--mdlm-ev-transition), color var(--mdlm-ev-transition); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-link:hover, body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-link:focus-visible { background: var(--mdlm-ev-hover); color: var(--mdlm-ev-blue-ink); text-decoration: none; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-link:focus { outline: none; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__export-dropdown-link:focus-visible { outline: 2px solid var(--mdlm-ev-blue); outline-offset: -2px; } /* ══ 6. TARIF ══════════════════════════════════════════════════════════════ * Même gabarit que les pastilles de date, teinte chaude : jaune / beige doux, * texte brun lisible. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__cost { display: flex; align-items: center; gap: .5rem; box-sizing: border-box; width: fit-content; max-width: 100%; min-height: 2.125rem; margin: 0; padding: .375rem .875rem .375rem .75rem; border: 1px solid var(--mdlm-ev-amber-line); border-radius: var(--mdlm-ev-radius-pill); background: var(--mdlm-ev-amber-tint); color: var(--mdlm-ev-amber-ink); font-size: .875rem; font-weight: 700; line-height: 1.2; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__cost::before { content: ""; flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%; background: var(--mdlm-ev-amber); } /* ══ 7. IMAGE ══════════════════════════════════════════════════════════════ * Pleine largeur de la fiche, ratio naturel, rayon 16 px, sans ombre. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__image { width: 100%; margin: 0; line-height: 0; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__image img { display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: auto; margin: 0; border: 0; border-radius: var(--mdlm-ev-radius-card); box-shadow: none; } /* ══ 8. CONTENU ÉDITORIAL ══════════════════════════════════════════════════ * Directement sur la fiche blanche, sans carte. Nunito Sans pour le texte, * Nunito pour les intertitres. Texte plafonné à 50 rem (≈ 800 px), aligné à * gauche, interligne 1,75. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content { color: var(--mdlm-ev-ink); font-size: clamp(1rem, .95rem + .2vw, 1.0625rem); line-height: 1.75; overflow-wrap: break-word; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content :is(p, ul, ol, blockquote, h2, h3, h4) { max-width: 50rem; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content :is(p, ul, ol, blockquote) { margin: 0 0 1.25em; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content :is(p, ul, ol, blockquote):last-child { margin-bottom: 0; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content :is(h2, h3, h4) { margin: 1.6em 0 .6em; color: var(--mdlm-ev-navy); font-family: var(--mdlm-ev-font-title); font-weight: 800; line-height: 1.25; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content :is(h2, h3, h4):first-child { margin-top: 0; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content h2 { font-size: 1.375rem; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content h3 { font-size: 1.1875rem; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content h4 { font-size: 1.0625rem; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content :is(strong, b) { color: var(--mdlm-ev-navy); font-weight: 700; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content a { color: var(--mdlm-ev-blue-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content a:hover { color: var(--mdlm-ev-navy); text-decoration-thickness: 2px; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content :is(ul, ol) { padding-inline-start: 1.4em; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content ul { list-style: disc; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content li { margin: 0 0 .55em; padding-inline-start: .25em; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content li:last-child { margin-bottom: 0; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content li::marker { color: var(--mdlm-ev-blue); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content li > :is(ul, ol) { margin: .55em 0 0; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-widget-theme-post-content img { max-width: 100%; height: auto; border-radius: var(--mdlm-ev-radius-md); } /* ══ 9. TITRES DE CARTE, CATÉGORIES, ÉTIQUETTES, SITE ══════════════════════ */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :is(.tec-events-elementor-event-widget__categories, .tec-events-elementor-event-widget__tags, .tec-events-elementor-event-widget__website, .tec-events-elementor-event-widget__organizer, .tec-events-elementor-event-widget__venue) { margin: 0; padding: 0; } /* Titres des cartes et de leurs rubriques : Nunito, bleu marine, lisibles — plus de petites capitales grises. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :is(.tec-events-elementor-event-widget__categories-header, .tec-events-elementor-event-widget__tags-header, .tec-events-elementor-event-widget__website-header, .tec-events-elementor-event-widget__organizer-header, .tec-events-elementor-event-widget__venue-header) { margin: 0 0 .625rem; padding: 0; color: var(--mdlm-ev-navy); font-family: var(--mdlm-ev-font-title); font-size: .9375rem; font-weight: 800; line-height: 1.3; letter-spacing: .005em; text-transform: none; } /* ── Pastilles EN LIGNE, qui passent à la ligne ──────────────────────────── * flex + flex-wrap. Les virgules de TEC (texte ou ) sont réduites à * font-size: 0 et restent dans le document. L'écart de 8 px entre pastilles * est une MARGE et non un gap : chaque virgule devient un élément flex de * largeur nulle, qu'un gap compterait deux fois. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :is(.tec-events-elementor-event-widget__categories-link-wrapper, .tec-events-elementor-event-widget__tags-links) { display: flex; flex-wrap: wrap; align-items: center; row-gap: .5rem; column-gap: 0; min-width: 0; max-width: 100%; margin: 0; padding: 0; font-size: 0; line-height: 0; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :is(.tec-events-elementor-event-widget__categories-link-wrapper, .tec-events-elementor-event-widget__tags-links) a { display: inline-flex; flex: 0 0 auto; align-items: center; box-sizing: border-box; width: auto; max-width: 100%; min-height: 2rem; margin: 0 .5rem 0 0; padding: .375rem .75rem; border: 1px solid transparent; border-radius: var(--mdlm-ev-radius-pill); font-size: .8125rem; font-weight: 600; overflow-wrap: break-word; line-height: 1.2; text-decoration: none; transition: background-color var(--mdlm-ev-transition), border-color var(--mdlm-ev-transition), color var(--mdlm-ev-transition); } /* Catégories : pastilles pleines. Posées sur le panneau bleu ultra pâle, le bleu très clair (#EAF5FE) s'y confondait : un cran plus soutenu (--mdlm-ev-tint-strong), texte bleu marine (≈ 11:1). */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__categories-link-wrapper a { border-color: transparent; background: var(--mdlm-ev-tint-strong); color: var(--mdlm-ev-navy-deep); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__categories-link-wrapper a:hover { border-color: var(--mdlm-ev-blue); background: var(--mdlm-ev-white); color: var(--mdlm-ev-blue-ink); } /* Étiquettes : pastilles blanches au contour. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__tags-links a { border-color: var(--mdlm-ev-line-strong); background: var(--mdlm-ev-white); color: var(--mdlm-ev-muted); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__tags-links a:hover { border-color: var(--mdlm-ev-blue); color: var(--mdlm-ev-blue-ink); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :is(.tec-events-elementor-event-widget__categories-link-wrapper, .tec-events-elementor-event-widget__tags-links) a:focus-visible { outline: 2px solid var(--mdlm-ev-blue); outline-offset: 2px; } /* ── Site : URL inchangée, coupée seulement si elle déborde ──────────────── * break-word et non anywhere : « anywhere » réduisait la largeur minimale du * bloc à un caractère. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__website-link { margin: 0; padding: 0; font-size: .9375rem; line-height: 1.5; overflow-wrap: break-word; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__website-link a { color: var(--mdlm-ev-blue-ink); font-weight: 600; text-decoration: none; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__website-link a:hover { color: var(--mdlm-ev-navy); text-decoration: underline; text-underline-offset: .18em; } /* ══ 10. ORGANISATEUR ══════════════════════════════════════════════════════ * Rythme : titre de carte → nom → téléphone → e-mail. La carte qui l'entoure * est portée par la grille des informations (§ 11). */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__organizer { border: 0; background: none; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__organizer-header { margin-bottom: .625rem; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__organizer-name { margin: 0 0 .375rem; color: var(--mdlm-ev-navy); font-size: 1rem; font-weight: 700; line-height: 1.35; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__organizer-details { display: grid; gap: .25rem; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :is(.tec-events-elementor-event-widget__organizer-phone-wrapper, .tec-events-elementor-event-widget__organizer-email-wrapper, .tec-events-elementor-event-widget__organizer-website-wrapper) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .375rem; min-width: 0; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :is(.tec-events-elementor-event-widget__organizer-phone-header, .tec-events-elementor-event-widget__organizer-email-header, .tec-events-elementor-event-widget__organizer-website-header) { color: var(--mdlm-ev-muted); font-size: .8125rem; font-weight: 700; line-height: 1.5; letter-spacing: normal; text-transform: none; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :is(.tec-events-elementor-event-widget__organizer-phone, .tec-events-elementor-event-widget__organizer-email, .tec-events-elementor-event-widget__organizer-website) { min-width: 0; color: var(--mdlm-ev-ink); font-size: .9375rem; line-height: 1.5; overflow-wrap: break-word; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__organizer-details a { color: var(--mdlm-ev-blue-ink); font-weight: 600; text-decoration: none; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__organizer-details a:hover { color: var(--mdlm-ev-navy); text-decoration: underline; text-underline-offset: .18em; } /* ── Coordonnées vides : masquées sans intitulé orphelin ────────────────── * Critères STRUCTURELS tirés des gabarits TEC, jamais une supposition : * - site : TEC le rend toujours sous forme de lien (tribe_get_organizer_ * website_link) ; une enveloppe sans aucun lien n'a pas de site ; * - téléphone lié sans numéro : href="" ; e-mail lié sans adresse : * href="mailto:" ; * - valeur :empty. * Limite : un téléphone ou un e-mail NON lié et vide ne laisse que des espaces, * que CSS ne sait pas distinguer d'une donnée. Il reste affiché. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__organizer-website-wrapper:not(:has(a)), body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__organizer-phone-wrapper:has(> .tec-events-elementor-event-widget__organizer-phone:empty, a[href=""]), body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__organizer-email-wrapper:has(> .tec-events-elementor-event-widget__organizer-email:empty, a[href="mailto:"]), body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__organizer-details:empty { display: none; } /* ══ 11. INFORMATIONS COMPLÉMENTAIRES ══════════════════════════════════════ * * DOM réel : sections Elementor classiques, pas de conteneurs Flexbox. * * section.elementor-inner-section ← LA CARTE * > .elementor-container ← deux colonnes * > .elementor-column.mdlm-event-infos ← ancre : Catégories, Étiquettes, Site * > .elementor-column ← Organisateur * * La classe .mdlm-event-infos (ou .mdlm-event-info) est posée sur la COLONNE * gauche. Elle n'est plus qu'une ANCRE : aucun fond, aucune bordure, aucune * grille n'est posé sur elle. La carte est la SECTION qui la contient, * retrouvée par :has(). Aucun identifiant Elementor n'est employé. * * Remplace toute la logique 0.1.4 (grille sur le wrapper, display: contents, * reconnaissance par .e-con) : elle supposait des conteneurs Flexbox et, sur ce * DOM, ne trouvait que la colonne gauche — d'où une carte limitée à elle. * * ┌───────────────────────────────────────────────────────────────┐ * │ Catégories │ Organisateur │ * │ (..) (..) │ Nom │ * │ Étiquettes │ Téléphone … │ * │ (..) (..) │ E-mail … │ * │ Site villecresnes.fr │ │ * └───────────────────────────────────────────────────────────────┘ * colonne gauche : flex 1 1 0 24 px │ 24 px colonne droite : 34 % * * La structure flex d'Elementor est conservée : seuls les 50 % / 50 %, le * plafond « boxed » et les rembourrages de colonne sont neutralisés, et * uniquement dans cette section. */ /* ── La carte : la section interne qui porte l'ancre ─────────────────────── * Écart avant la carte : Elementor sépare déjà deux éléments d'une même * colonne par l'espacement des widgets du kit (--kit-widget-spacing, 20 px * par défaut). La carte n'ajoute que le complément : ≈ 32 px au total. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-section:has(> .elementor-container > .elementor-column:is(.mdlm-event-infos, .mdlm-event-info)) { box-sizing: border-box; width: 100%; max-width: 100%; margin-block-start: calc(2rem - var(--kit-widget-spacing, 20px)); padding: 1.5rem 1.75rem; border: 1px solid var(--mdlm-ev-panel-line); border-radius: var(--mdlm-ev-radius-lg); background: var(--mdlm-ev-panel); box-shadow: none; } /* ── Conteneur à deux colonnes ─────────────────────────────────────────── */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-section:has(> .elementor-container > .elementor-column:is(.mdlm-event-infos, .mdlm-event-info)) > .elementor-container { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 0 1.5rem; box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 0; } /* Colonnes : ni fond, ni bordure, ni rembourrage Elementor (gouttière « default » de 10 px sur .elementor-element-populated). */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-section:has(> .elementor-container > .elementor-column:is(.mdlm-event-infos, .mdlm-event-info)) > .elementor-container > .elementor-column { box-sizing: border-box; width: auto; min-width: 0; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-section:has(> .elementor-container > .elementor-column:is(.mdlm-event-infos, .mdlm-event-info)) > .elementor-container > .elementor-column > .elementor-widget-wrap { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: normal; row-gap: 1.125rem; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; } /* Rubriques : l'écart vertical est la gouttière du widget-wrap (18 px) — un widget masqué ne laisse donc pas d'espace orphelin. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-section:has(> .elementor-container > .elementor-column:is(.mdlm-event-infos, .mdlm-event-info)) .elementor-widget { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 0; } /* Colonne gauche : prend le reste. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-section:has(> .elementor-container > .elementor-column:is(.mdlm-event-infos, .mdlm-event-info)) > .elementor-container > .elementor-column:first-child { flex: 1 1 0; } /* Colonne droite (organisateur) : 34 %, filet vertical très léger. 34 % + 24 px de gouttière + le reste pour la gauche = 100 %, sans débordement. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .elementor-section:has(> .elementor-container > .elementor-column:is(.mdlm-event-infos, .mdlm-event-info)) > .elementor-container > .elementor-column:not(:first-child) { flex: 0 0 34%; padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--mdlm-ev-panel-line); } /* ══ 12. LIEU ET CARTE ═════════════════════════════════════════════════════ * * CAUSE DE LA CARTE « CARRÉE ET ISOLÉE » (0.1.3) — relevée dans la source TEC * (src/Events/Integrations/Plugins/Elementor/Widgets/Event_Venue.php) : * le widget Lieu expose un réglage de style « Width » dont la valeur PAR * DÉFAUT est 50 % en desktop et en tablette, 100 % sur téléphone, écrit par * Elementor en « max-width: 50%; width: 50% » sur __venue-map. La 0.1.3 * forçait width: 100% mais pas max-width : la carte restait plafonnée à la * moitié de sa colonne, et son cadre 16:9 retombait sur sa hauteur minimale de * 240 px — un carré. CE CORRECTIF NE DOIT JAMAIS ÊTRE RETIRÉ. Sur téléphone, le défaut est 100 % : d'où un rendu * mobile correct. Le réglage « Height » écrit aussi * « height: calc(100% - var(--tec-spacer-2)) ». * * Correctif : max-width: none et height: auto sur __venue-map (le poids * d'identifiant l'emporte sur la règle Elementor), plus de rapport imposé en * desktop : la carte S'ÉTIRE sur toute la hauteur de la carte du lieu, avec * 270 px au minimum, et sur toute la largeur de sa colonne. * * ┌──────────────────────────────────────────────────────────────────┐ * │ │ * │ Lieu ╭──────────────────────────────────────╮ │ * │ Parc de la │ │ │ * │ Ludothèque │ GOOGLE MAP │ │ * │ 57 rue de Mandres │ │ │ * │ ( + Google Map ) ╰──────────────────────────────────────╯ │ * │ │ * └──────────────────────────────────────────────────────────────────┘ * 31 % 69 %, gouttière 18 px, rembourrage 20 / 22 px * * UN SEUL LIEU (cas courant) : la carte est le widget lui-même, le titre TEC * y entre en haut de la colonne de gauche, le conteneur TEC est neutralisé * (display: contents). Titre et informations sont centrés verticalement par * deux pistes 1fr qui les encadrent. * PLUSIEURS LIEUX (__venue-multiple) : le titre reste au-dessus, chaque * conteneur devient sa propre carte, même grille. * * Disposition horizontale au-delà de 1024 px seulement ; en dessous, pile * simple (§ 16). Styles venue.pcss de TEC neutralisés : flex row, * fit-content, 580 px. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue { display: block; width: 100%; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue-header { margin: 0 0 .625rem; } /* ── Carte : plusieurs lieux (et socle commun) ─────────────────────────── */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 1.125rem; box-sizing: border-box; width: 100%; max-width: none; height: auto; margin: 0; padding: 1.25rem 1.375rem; border: 1px solid var(--mdlm-ev-panel-line); border-radius: var(--mdlm-ev-radius-lg); background: var(--mdlm-ev-panel); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue-container + .tec-events-elementor-event-widget__venue-container { margin-top: 1rem; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue-container:has(> .tec-events-elementor-event-widget__venue-map) { grid-template-columns: minmax(0, 31fr) minmax(0, 69fr); align-items: center; } /* ── Carte : un seul lieu ──────────────────────────────────────────────── */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue:not(:has(.tec-events-elementor-event-widget__venue-multiple)) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.125rem; box-sizing: border-box; padding: 1.25rem 1.375rem; border: 1px solid var(--mdlm-ev-panel-line); border-radius: var(--mdlm-ev-radius-lg); background: var(--mdlm-ev-panel); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue:not(:has(.tec-events-elementor-event-widget__venue-multiple)) > .tec-events-elementor-event-widget__venue-container { display: contents; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue:not(:has(.tec-events-elementor-event-widget__venue-multiple)):has(.tec-events-elementor-event-widget__venue-map) { grid-template-columns: minmax(0, 31fr) minmax(0, 69fr); grid-template-rows: 1fr auto auto 1fr; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue:not(:has(.tec-events-elementor-event-widget__venue-multiple)):has(.tec-events-elementor-event-widget__venue-map) > .tec-events-elementor-event-widget__venue-header { grid-column: 1; grid-row: 2; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue:not(:has(.tec-events-elementor-event-widget__venue-multiple)):has(.tec-events-elementor-event-widget__venue-map) .tec-events-elementor-event-widget__venue-details { grid-column: 1; grid-row: 3; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue:not(:has(.tec-events-elementor-event-widget__venue-multiple)):has(.tec-events-elementor-event-widget__venue-map) .tec-events-elementor-event-widget__venue-map { grid-column: 2; grid-row: 1 / -1; } /* ── Informations : bloc adresse / bouton ──────────────────────────────── */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue-details { display: flex; flex-direction: column; gap: .5rem; box-sizing: border-box; min-width: 0; margin: 0; padding: 0; font-size: .9375rem; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue-details > * { margin: 0; padding: 0; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue-name { color: var(--mdlm-ev-navy); font-family: var(--mdlm-ev-font-title); font-size: 1.25rem; font-weight: 800; line-height: 1.25; overflow-wrap: break-word; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :is(.tec-events-elementor-event-widget__venue-address, .tec-events-elementor-event-widget__venue-phone, .tec-events-elementor-event-widget__venue-website) { color: var(--mdlm-ev-muted); font-size: .9375rem; line-height: 1.6; overflow-wrap: break-word; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue-details :is(address, p) { margin: 0; font-style: normal; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main :is(.tec-events-elementor-event-widget__venue-address-header, .tec-events-elementor-event-widget__venue-phone-header, .tec-events-elementor-event-widget__venue-website-header) { margin: 0 0 .125rem; color: var(--mdlm-ev-muted); font-size: .8125rem; font-weight: 700; line-height: 1.4; letter-spacing: normal; text-transform: none; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue-details a:not(.tribe-events-gmap) { color: var(--mdlm-ev-blue-ink); font-weight: 600; text-decoration: none; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue-details a:not(.tribe-events-gmap):hover { color: var(--mdlm-ev-navy); text-decoration: underline; text-underline-offset: .18em; } /* ── Lien Google Maps : petit bouton secondaire ─────────────────────────── * Libellé natif conservé : il ne se change proprement que par le filtre PHP * tribe_get_map_link_html, hors de ce lot. Détaché de l'adresse par 14 px. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue-address-map-link { margin: .875rem 0 0; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue a.tribe-events-gmap { display: inline-flex; align-items: center; gap: .3125rem; box-sizing: border-box; min-height: 2rem; padding: .3125rem .75rem .3125rem .625rem; border: 1px solid var(--mdlm-ev-line-strong); border-radius: var(--mdlm-ev-radius-pill); background: var(--mdlm-ev-white); color: var(--mdlm-ev-blue-ink); font-size: .8125rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color var(--mdlm-ev-transition), border-color var(--mdlm-ev-transition), color var(--mdlm-ev-transition); } /* Repère de carte décoratif : content vide, jamais annoncé. */ body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue a.tribe-events-gmap::before { content: ""; flex: 0 0 auto; width: .875rem; height: .875rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A63B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue a.tribe-events-gmap:hover { border-color: var(--mdlm-ev-blue); background: var(--mdlm-ev-hover); color: var(--mdlm-ev-navy); } body.single-tribe_events #tribe-events-pg-template .mdlm-event-main .tec-events-elementor-event-widget__venue a:focus-visible { outline: 2px solid var(--mdlm-ev-blue); outline-offset: 2px; } /* ── Carte Google : remplit sa colonne, iframe TEC jamais recomposée ─────── * max-width: none et height: auto neutralisent les réglages par défaut du * widget Elementor (50 % de large, hauteur en calc). align-self: stretch fait * occuper à la carte toute la hauteur de la carte du lieu ; 270 px au * minimum en desktop. * * TEC rend soit une