@charset "UTF-8"; /* CSS Document */ /* ========================================================= BASE STYLES – Hello Child (palette lumineuse + typo Barlow) ========================================================= */ /* === 0) Variables globales =================================== */ /* Couleurs, typo, échelles, radius, ombres, focus ring */ /* === 1) Reset & fondations =================================== */ /* box-sizing, body, images, selection */ /* === 2) Typo globale (titres, paragraphes, listes) =========== */ /* H1 → H6, p, ul/ol, small, muted */ /* === 3) Liens ================================================= */ /* a, hover/focus */ /* === 4) Boutons (WP + Elementor + WooCommerce) =============== */ /* .button, submit, .elementor-button, outline, hover/focus */ /* === 5) Blocs / cartes / helpers ============================= */ /* .card, .box, .panel, .section-muted, helpers .bg-primary, etc. */ /* === 6) Formulaires ========================================== */ /* input, textarea, select, focus styles */ /* === 7) WooCommerce (rapides, pour cohérence boutons) === */ /* === 8) Helpers === */ /* ========================================================= HEADER (pre-header + header + mega-menu) ========================================================= */ /* === 9) Pre-header =========================================== */ /* .cal-preheader, nav, séparateurs, icônes réseaux sociaux */ /* === 10) Header principal ===================================== */ /* .cal-header, .cal-brand img */ /* === 11) Navigation principale (mega-menu, niveau 1) ========== */ /* .nav-cal, styles items, hover/active, bordures colorées */ /* === 12) Mega-menu : panneau global ========================== */ /* .e-n-menu-content → transparence, radius, ombre */ /* === 13) Mega-menu : templates sous-menus ==================== */ /* .submenu-cal → titres (sub-title), intro (sub-intro), liens (sub-info), paddings */ /* === 14) Mega-menu : loops (actus, feedzy, etc.) ============= */ /* .sub-loop (image + texte), .sub-post-media, .sub-post-body, .sub-post-title, .sub-post-meta, variantes responsive, feedzy overrides */ /* === 15) Responsive global =================================== */ /* media queries spécifiques (tablet/mobile), ajustements */ /* ========================================================= BASE STYLES – Hello Child (palette lumineuse + typo Barlow) ========================================================= */ /* === 0) Variables globales =================================== */ /* Couleurs, typo, échelles, radius, ombres, focus ring */ :root { /* Palette – Proposition 2 (lumineuse) */ --color-primary-100: #F3A6AC; --color-primary: #D8515C; /* rouge framboise */ --color-primary-900: #9A2D36; --color-secondary-100:#A5C4D1; --color-secondary: #3D6C82; /* bleu pétrole */ --color-secondary-900:#23404D; --color-accent-100: #D2E1DB; --color-accent: #A6C1B6; /* vert amande */ --color-accent-900: #5B746A; --color-text: #222222; --color-text-muted: #777777; --color-black: #000000; --color-white: #FFFFFF; --color-laicite: #CA5860; --color-mvt: #696393; --color-combats: #EEC680; --color-action: #7AACC5; --color-medias: #D67DA9; --color-pub: #B6BE95; /* Fonds */ --color-bg: #ffffff; /* blanc */ --color-bg-muted: #F4F8F7; /* fond secondaire */ --color-bg-alt: #D2E1DB; /* plus contrasté */ /* Typo */ --font-headings: "Barlow Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-body: "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Échelle (tu peux ajuster) */ --h1-size: clamp(2rem, 1.2rem + 2.5vw, 3rem); /* ~32–48px */ --h2-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.25rem); --h3-size: clamp(1.5rem, 1rem + 1.2vw, 1.75rem); --h4-size: 1.5rem; /* 24px */ --h5-size: 1.25rem; /* 20px */ --h6-size: 1.125rem;/* 18px */ --body-size: 1rem; /* 16px */ --lh-tight: 1.2; --lh-title: 1.3; --lh-body: 1.65; /* UI */ --radius: 0px; --shadow-1: 0 1px 2px rgba(0,0,0,.06); --shadow-2: 0 4px 14px rgba(0,0,0,.08); /* Focus (accessibilité) */ --focus-ring: 0 0 0 3px rgba(216,81,92,.25); /* primary translucide */ /* Espacements */ --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; /* Main (articles & pages) */ --cal-main-max: 1140px; /* largeur de contenu desktop */ --cal-gap-top: clamp(24px, 6vw, 64px); /* respiration sous le header */ --cal-pad-x: clamp(16px, 4vw, 32px); /* padding latéral mobile/tablette */ --cal-gap-bc: clamp(8px, 2.5vw, 20px); /* espace sous le fil d’Ariane */ --space-main-bottom: clamp(24px, 6vw, 64px); /* espace interne bas fluide */ } /* === 1) Reset & fondations =================================== */ /* box-sizing, body, images, selection */ html { box-sizing: border-box; font-size: 16px; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; color: var(--color-text); background: var(--color-bg); font-family: var(--font-body); font-size: var(--body-size); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } ::selection { background: var(--color-primary-100); color: var(--color-black); } /* === 2) Typo globale (titres, paragraphes, listes) =========== */ /* H1 → H6, p, ul/ol, small, muted */ h1, h2 { font-family: var(--font-headings); line-height: var(--lh-tight); color: var(--color-secondary); /* H1/H2 en secondaire */ margin: 0 0 .6em; } h1 { font-size: var(--h1-size); font-weight: 800; letter-spacing: .01em; } h2 { font-size: var(--h2-size); font-weight: 600; } h3, h4 { font-family: var(--font-headings); color: var(--color-secondary); /* H3/H4 en secondaire */ line-height: var(--lh-title); margin: 0 0 .6em; } h3 { font-size: var(--h3-size); font-weight: 500; } h4 { font-size: var(--h4-size); font-weight: 500; } h5, h6 { font-family: var(--font-body); color: var(--color-text); margin: 0 0 .5em; } h5 { font-size: var(--h5-size); font-weight: 600; } h6 { font-size: var(--h6-size); font-weight: 500; } p { margin: 0 0 1.1em; } small, .text-muted { color: var(--color-text-muted); } ul, ol { padding-left: 1.2em; margin: 0 0 1.1em; } /* Titres Elementor (si un widget forçait autre chose) */ .elementor-widget-heading h1, .elementor-widget-heading h2, .elementor-widget-heading h3, .elementor-widget-heading h4, .elementor-widget-heading h5, .elementor-widget-heading h6 { margin: 0 0 .6em; line-height: 1em; /* hérite de nos règles */ color: inherit; /* évite les couleurs figées par widget */ } .cap { text-transform: uppercase; margin-top: var(--space-2); } .border-title { border-bottom: 1px solid var(--color-accent-100); margin-bottom: 2rem !important; } /* ========================================================= Respiration sous les grands titres (pages, archives, sections) ========================================================= */ /* H1 global + titres Elementor de niveau équivalent */ /*.cal-main h1, .cal-main .elementor-widget-heading h1.elementor-heading-title, .cal-main .elementor-widget-theme-archive-title h1.elementor-heading-title, .cal-main .elementor-page-title h1.elementor-heading-title { margin-bottom: 2rem !important; /* respiration généreuse */ /*}*/ /* Optionnel : si tu veux que les H2 de section respirent aussi, mais un peu moins (ex. 2rem ≈ 32px) */ .cal-main h2, .cal-main .elementor-widget-heading h2.elementor-heading-title { margin-top: 3rem; margin-bottom: 1.5rem !important; } .cal-home h2, .cal-home .elementor-widget-heading h2.elementor-heading-title { margin-top: 3rem; padding-bottom: 1rem; margin-bottom: 2.5rem !important; text-align: center; border-bottom: 1px solid var(--color-accent-100); } /* === 3) Liens ================================================= */ /* a, hover/focus */ a { color: var(--color-secondary); /* bleu pétrole pour les liens */ } a:hover, a:focus { color: var(--color-secondary-900); } a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; } .main-content a, .brochure-content a, .news-main a, .event-media a, .event-content a, .column-text-page a{ color: var(--color-text); /* bleu pétrole pour les liens */ text-decoration: underline; text-decoration-style: dashed; } .main-content a:hover, .main-content a:focus, .brochure-content a:hover, .brochure-content a:focus, .news-main a:hover, .news-main a:focus, .event-media a:hover, .event-media a:focus, .event-content a:hover, .event-content a:focus, .column-text-page a:hover, .column-text-page a:focus { color: var(--color-primary); } /* === 4) Boutons (WP + Elementor + WooCommerce) =============== */ /* .button, submit, .elementor-button, outline, hover/focus */ .button, .wp-block-button__link, input[type="submit"], input[type="button"], button, .elementor a.elementor-button, .elementor .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .6em 1.2em; /* ≈ 12–14px / 24–28px */ border-radius: var(--radius); border: none; background: var(--color-primary); color: var(--color-white) !important; text-decoration: none !important; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1; cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; } .button:hover, .wp-block-button__link:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover, .elementor a.elementor-button:hover, .elementor .elementor-button:hover { background: var(--color-primary-900); color: var(--color-white); text-decoration: none; } .button:focus-visible, .wp-block-button__link:focus-visible, input[type="submit"]:focus-visible, input[type="button"]:focus-visible, button:focus-visible, .elementor a.elementor-button:focus-visible, .elementor .elementor-button:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Aération autour de tous les groupes de boutons Gutenberg */ .wp-block-buttons { margin-block: clamp(12px, 2vw, 24px); /* ajuste la valeur selon ton goût */ gap: 0 24px; } /* Bouton secondaire (outline) */ .button-secondary, .is-style-outline .wp-block-button__link, .elementor .elementor-button.elementor-button--link, /* si tu utilises un style “link” */ .btn-secondary { background: transparent; color: var(--color-secondary); border: 2px solid var(--color-secondary); } .button-secondary:hover, .is-style-outline .wp-block-button__link:hover, .btn-secondary:hover { background: var(--color-secondary); color: var(--color-white); } /* === Boutons téléchargement (Gutenberg) ====================== */ /* Fonctionne si .btn-download est sur : - le groupe .wp-block-buttons - OU le bloc .wp-block-button - OU directement sur l’ancre .wp-block-button__link */ /* Base : rien à changer, tes .wp-block-button__link sont déjà en inline-flex avec gap dans base.css. On ajoute juste l’icône avant le texte. */ /* Sélecteurs robustes pour toutes les variantes de placement */ .btn-download .wp-block-button__link, .wp-block-buttons.btn-download .wp-block-button__link, .wp-block-button.btn-download .wp-block-button__link, .wp-block-button__link.btn-download { /* optionnel : tu peux ajuster la taille de l’icône ici */ --btn-icon-size: 1.05em; } /* Icône “download” avant le texte — uniquement si le lien pointe vers un PDF */ .btn-download .wp-block-button__link[href$=".pdf" i]::before, .wp-block-buttons.btn-download .wp-block-button__link[href$=".pdf" i]::before, .wp-block-button.btn-download .wp-block-button__link[href$=".pdf" i]::before, .wp-block-button__link.btn-download[href$=".pdf" i]::before { content: ""; display: inline-block; inline-size: var(--btn-icon-size); block-size: var(--btn-icon-size); flex: 0 0 auto; /* ne pas s’étirer */ background-color: currentColor; /* icône suit la couleur du texte */ /* Icône via mask (compatible Chromium/Firefox/Safari iOS) */ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Hover cohérent avec ta palette globale */ .btn-download .wp-block-button__link:hover, .wp-block-buttons.btn-download .wp-block-button__link:hover, .wp-block-button.btn-download .wp-block-button__link:hover, .wp-block-button__link.btn-download:hover { background: var(--color-primary-900); color: var(--color-white); } /* === Boutons site web (Gutenberg) ====================== */ /* Fonctionne si .btn-website est sur : - le groupe .wp-block-buttons - OU le bloc .wp-block-button - OU directement sur l’ancre .wp-block-button__link */ /* Base */ .btn-website .wp-block-button__link, .wp-block-buttons.btn-website .wp-block-button__link, .wp-block-button.btn-website .wp-block-button__link, .wp-block-button__link.btn-website { --btn-icon-size: 1.05em; display: inline-flex; align-items: center; justify-content: center; gap: .5em; background: var(--color-bg); /* fond neutre */ color: var(--color-primary) !important; /* texte */ border: 2px solid var(--color-primary); /* contour */ border-radius: var(--radius); padding: .7em 1.4em; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* Icône "site web" avant le texte */ .btn-website .wp-block-button__link::before, .wp-block-buttons.btn-website .wp-block-button__link::before, .wp-block-button.btn-website .wp-block-button__link::before, .wp-block-button__link.btn-website::before { content: ""; display: inline-block; inline-size: var(--btn-icon-size); block-size: var(--btn-icon-size); flex: 0 0 auto; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M0 352a160 160 0 0 0 160 160h64a160 160 0 0 0 160-160V224H0zM176 0h-16A160 160 0 0 0 0 160v32h176zm48 0h-16v192h176v-32A160 160 0 0 0 224 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M0 352a160 160 0 0 0 160 160h64a160 160 0 0 0 160-160V224H0zM176 0h-16A160 160 0 0 0 0 160v32h176zm48 0h-16v192h176v-32A160 160 0 0 0 224 0z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Hover cohérent */ .btn-website .wp-block-button__link:hover, .wp-block-buttons.btn-website .wp-block-button__link:hover, .wp-block-button.btn-website .wp-block-button__link:hover, .wp-block-button__link.btn-website:hover { background: var(--color-primary); color: var(--color-white) !important; border-color: var(--color-primary); } /* === Boutons infos (Gutenberg) ====================== */ /* Fonctionne si .btn-infos est sur : - le groupe .wp-block-buttons - OU le bloc .wp-block-button - OU directement sur l’ancre .wp-block-button__link */ /* Base */ .btn-infos .wp-block-button__link, .wp-block-buttons.btn-infos .wp-block-button__link, .wp-block-button.btn-infos .wp-block-button__link, .wp-block-button__link.btn-infos { --btn-icon-size: 1.05em; background: transparent !important; color: var(--color-secondary) !important; } /* Icône "chevron droit" avant le texte */ .btn-infos .wp-block-button__link::before, .wp-block-buttons.btn-infos .wp-block-button__link::before, .wp-block-button.btn-infos .wp-block-button__link::before, .wp-block-button__link.btn-website::before { content: ""; display: inline-block; inline-size: var(--btn-icon-size); block-size: var(--btn-icon-size); flex: 0 0 auto; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Hover cohérent */ .btn-infos .wp-block-button__link:hover, .wp-block-buttons.btn-infos .wp-block-button__link:hover, .wp-block-button.btn-infos .wp-block-button__link:hover, .wp-block-button__link.btn-website:hover { color: var(--color-primary) !important; } /* === Boutons infos (Elementor) ====================== */ .cal-main .btn-infos .elementor-button, .cal-main .loop-item .item-content .btn-infos .elementor-button, .cal-home .btn-infos .elementor-button, .cal-home .loop-item .item-content .btn-infos .elementor-button{ background: transparent !important; font-family: var(--font-headings) !important; font-size: var(--h5-size) !important; border: none !important; padding-left: 0 !important; padding-right: 0; box-shadow: none !important; text-transform: uppercase; font-weight: 500; letter-spacing: .02em; line-height: 1.3; display: inline-flex; align-items: center; gap: .35em; /* écart texte/icone */ } .cal-main .btn-infos .elementor-button, .cal-main .loop-item .item-content .btn-infos .elementor-button, .cal-home .btn-infos .elementor-button, .cal-home .loop-item .item-content .btn-infos .elementor-button { color: var(--color-secondary); } .emissions .btn-infos .elementor-button, .emissions .loop-item .item-content .btn-infos .elementor-button, .agenda .btn-infos .elementor-button, .agenda .loop-item .item-content .btn-infos .elementor-button, .videos-home .btn-infos .elementor-button, .videos-home .loop-item .item-content .btn-infos .elementor-button{ color: var(--color-bg); } /* Icône "chevron droit" après le texte */ .cal-main .btn-infos .elementor-button::after, .cal-home .btn-infos .elementor-button::after{ content: ""; display: inline-block; inline-size: 1em; block-size: 1em; flex: 0 0 auto; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Hover/focus */ .cal-main .btn-infos .elementor-button:hover, .cal-main .btn-infos .elementor-button:focus, .cal-main .loop-item .item-content .btn-infos .elementor-button:hover, .cal-main .loop-item .item-content .btn-infos .elementor-button:focus{ color: var(--color-primary); background: transparent !important; text-decoration: none; } .cal-home .btn-infos .elementor-button:hover, .cal-home .btn-infos .elementor-button:focus { color: var(--color-primary); } .emissions .btn-infos .elementor-button:hover, .emissions .btn-infos .elementor-button:focus, .agenda .btn-infos .elementor-button:hover, .agenda .btn-infos .elementor-button:focus, .videos-home .btn-infos .elementor-button:hover, .videos-home .btn-infos .elementor-button:focus { color: var(--color-accent-100); } /* === Boutons infos petits (Elementor) ====================== */ .cal-main .btn-infos-small .elementor-button { background: transparent !important; color: var(--color-secondary) !important; font-family: var(--font-headings) !important; font-size: var(--h6-size, 0.95rem) !important; /* plus petit que h4 */ border: none !important; padding-left: 0 !important; padding-right: 0; box-shadow: none !important; text-transform: uppercase; font-weight: 500; letter-spacing: .02em; line-height: 1.2; display: inline-flex; align-items: center; gap: .3em; /* écart texte/icone un peu réduit */ margin-top: 0 !important; /* supprime respiration en haut */ margin-block: 0 !important; /* supprime marge haut/bas héritée */ } /* Icône "chevron droit" après le texte */ .cal-main .btn-infos-small .elementor-button::after { content: ""; display: inline-block; inline-size: 0.9em; /* légèrement plus petit */ block-size: 0.9em; flex: 0 0 auto; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Hover/focus = couleur primaire */ .cal-main .btn-infos-small .elementor-button:hover, .cal-main .btn-infos-small .elementor-button:focus { color: var(--color-primary) !important; background: transparent !important; text-decoration: none; } /* === 5) Blocs / cartes / helpers ============================= */ /* .card, .box, .panel, .section-muted, helpers .bg-primary, etc. */ .card, .box, .panel, .widget, .widget-box { /* nouvelle classe utilitaire */ background: var(--color-bg-alt); border-radius: var(--radius); box-shadow: var(--shadow-1); } .section-muted { background: var(--color-bg-muted); } /* Pages – titre principal */ .cal-main .elementor-widget-theme-archive-title h1.elementor-heading-title, .cal-main .elementor-page-title h1.elementor-heading-title { text-align: left; font-family: var(--font-headings); font-size: var(--h1-size); font-weight: 800; color: var(--color-secondary); line-height: var(--lh-tight); margin: 0 0 4rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-secondary-100); /* filet discret */ } .cal-main .children { margin-top: var(--cal-gap-top); } /* === Ligne discrète + aération en bas ======================== */ /* À appliquer sur n’importe quel conteneur dans .cal-main */ .cal-main .border-bottom { border-bottom: 1px solid var(--color-accent-100); margin-bottom: clamp(16px, 3vw, 32px); /* respiration fluide */ padding-bottom: clamp(8px, 1.5vw, 16px); /* optionnel : air interne */ } .emissions { background-color: var(--color-laicite); } .agenda { background-color: var(--color-mvt); } .videos-home { background-color: var(--color-combats); } .emissions h2, .agenda h2, .videos-home h2 { color:var(--color-bg); border-bottom-color: var(--color-bg); } /* === 6) Formulaires ========================================== */ /* input, textarea, select, focus styles */ input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="search"], input[type="password"], textarea, select { width: 100%; padding: .65em .8em; border: 1px solid var(--color-accent-100); background: #FFFFFF; color: var(--color-text); font: inherit; transition: border-color .2s ease, box-shadow .2s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-accent-100); } /* === 7) WooCommerce (rapides, pour cohérence boutons) === */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { background: var(--color-primary); color: var(--color-white); border-radius: var(--radius); padding: .6em 1.2em; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background: var(--color-primary-900); } /* === 8) Helpers === */ .text-primary { color: var(--color-primary) !important; } .text-secondary { color: var(--color-secondary) !important; } .bg-primary { background: var(--color-primary) !important; color: var(--color-white); } .bg-secondary { background: var(--color-secondary) !important; color: var(--color-white); } .bg-accent { background: var(--color-accent) !important; color: var(--color-black); } /* === Compatibilité Gutenberg – forcer les couleurs choisies === */ .has-text-color.has-text-color { color: var(--color-text) !important; } .has-text-color.has-text-muted-color { color: var(--color-text-muted) !important; } .has-text-color.has-primary-900-color { color: var(--color-primary-900) !important; } .has-text-color.has-primary-color { color: var(--color-primary) !important; } .has-text-color.has-primary-100-color { color: var(--color-primary-100) !important; } .has-text-color.has-secondary-color { color: var(--color-secondary) !important; } .has-text-color.has-secondary-100-color { color: var(--color-secondary-100) !important; } .has-text-color.has-secondary-900-color { color: var(--color-secondary-900) !important; } .has-text-color.has-accent-color { color: var(--color-accent) !important; } .has-text-color.has-accent-100-color { color: var(--color-accent-100) !important; } .has-text-color.has-accent-900-color { color: var(--color-accent-900) !important; } .has-text-color.has-white-color { color: var(--color-white) !important; } .has-text-color.has-black-color { color: var(--color-black) !important; } .has-text-color.has-bg-color { color: var(--color-bg) !important; } .has-text-color.has-bg-muted-color { color: var(--color-bg-muted) !important; } .has-text-color.has-bg-muted-alt { color: var(--color-bg-alt) !important; } /* ========================================================= HEADER (pre-header + header + mega-menu) ========================================================= */ /* === 9) Pre-header =========================================== */ /* .cal-preheader, nav, séparateurs, icônes réseaux sociaux */ /* Conteneur pre-header (section Elementor) */ .cal-preheader { background: var(--color-primary); /* D8515C */ } /* NAV pré-header – style par défaut (desktop/tablette) */ .cal-nav-preheader .elementor-nav-menu, .cal-nav-preheader .elementor-nav-menu a, .cal-nav-preheader .elementor-nav-menu a:hover{ font-family: var(--font-body); font-weight: 400; /* Regular */ font-size: 0.8rem; /* ~12.8px */ line-height: 0.8; letter-spacing: .01em; color: var(--color-white) !important; text-decoration: none; } /* Séparateurs menu pre-header horizontal */ /* Active et règle le séparateur via les variables Elementor */ .cal-nav-preheader .elementor-nav-menu { --e-nav-menu-divider-content: ""; /* IMPORTANT : sinon rien ne s’affiche */ --e-nav-menu-divider-color: var(--color-white); --e-nav-menu-divider-style: solid; --e-nav-menu-divider-width: 1px; --e-nav-menu-divider-height: 33%; /* hauteur du trait versus la ligne */ } /* Supprime l’air inutile autour du séparateur dans le pré-header */ .cal-nav-preheader .elementor-nav-menu > li > a, .cal-nav-preheader .elementor-nav-menu > li > a:hover { padding-left: .4em; /* ajuste à ton goût */ padding-right: .4em; } .cal-nav-preheader .elementor-nav-menu > li:not(:last-child)::after { margin: 0; /* espace gauche/droite */ display: inline-block; /* pour que height fonctionne */ } /* Icônes réseaux sociaux uniquement dans le pré-header */ .cal-preheader .elementor-social-icon { background-color: transparent !important; /* pas de fond */ color: #ffffff !important; /* icône blanche */ font-size: 0.9rem !important; /* hauteur icône */ line-height: 1; width: auto; height: auto; display: inline-flex; align-items: center; justify-content: center; transition: none; } /* Même couleur au survol */ .cal-preheader .elementor-social-icon:hover { background-color: transparent !important; color: #ffffff !important; } //* ===10) Header principal ===================================== */ /* .cal-header, .cal-brand img */ /* HEADER simple et transparent */ .cal-header { background: transparent !important; border: none !important; box-shadow: none !important; z-index: 1000; } /* Contenu général du header */ .cal-header .elementor-container, .cal-header .elementor-row { min-height: 72px; /* hauteur cible desktop */ } /* Zone marque (logo texte éventuel) */ .cal-brand img { width: clamp(160px, 20vw, 300px); /* min 160px, max 300px, sinon 20% de la largeur */ height: auto; display: block; } /* === 11) Navigation principale (mega-menu, niveau 1) ========== */ /* .nav-cal, styles items, hover/active, bordures colorées */ /* Mega menu – 1er niveau : Barlow Condensed, flat, sans effets */ .nav-cal .e-n-menu-heading > .e-n-menu-item > [id^="e-n-menu-title-"], .nav-cal .e-n-menu-heading > .e-n-menu-item > [id^="e-n-menu-title-"] a, .nav-cal .e-n-menu-heading > .e-n-menu-item > a, .nav-cal .e-n-menu-heading > .e-n-menu-item > button { font-family: var(--font-headings) !important; /* Barlow Condensed */ font-weight: 600; /* 600 ou 700 selon ton goût */ font-size: var(--size-h4) !important; letter-spacing: .01em; line-height: 1.2; text-transform: uppercase; text-decoration: none !important; color: var(--color-text) !important; background: transparent !important; transition: none !important; } /* États (hover/active/focus) = identiques */ .nav-cal .e-n-menu-heading > .e-n-menu-item > a:hover, .nav-cal .e-n-menu-heading > .e-n-menu-item > a:active, .nav-cal .e-n-menu-heading > .e-n-menu-item > a:focus, .nav-cal .e-n-menu-heading > .e-n-menu-item > button:hover, .nav-cal .e-n-menu-heading > .e-n-menu-item > button:active, .nav-cal .e-n-menu-heading > .e-n-menu-item > button:focus, .nav-cal .e-n-menu-heading > .e-n-menu-item.current-menu-item > a, .nav-cal .e-n-menu-heading > .e-n-menu-item.current-menu-ancestor > a { color: var(--color-text) !important; background: transparent !important; text-decoration: none !important; } /* Réduit l’espace horizontal entre les items du 1er niveau */ .nav-cal .e-n-menu-heading > .e-n-menu-item > a, .nav-cal .e-n-menu-heading > .e-n-menu-item > button, .nav-cal .e-n-menu-heading > .e-n-menu-item > [id^="e-n-menu-title-"] { padding-left: .6em; padding-right: .6em; padding-bottom: 1em; /* ajuste la valeur à ton goût */ } /* Bordure arc-en-ciel du menu */ .nav-cal .e-n-menu-item { border-bottom: 2px solid #CA5860; } .nav-cal .e-n-menu-item:nth-child(2) { border-bottom: 2px solid #696393; } .nav-cal .e-n-menu-item:nth-child(3) { border-bottom: 2px solid #EEC680; } .nav-cal .e-n-menu-item:nth-child(4) { border-bottom: 2px solid #7AACC5; } .nav-cal .e-n-menu-item:nth-child(5) { border-bottom: 2px solid #D67DA9; } .nav-cal .e-n-menu-item:nth-child(6) { border-bottom: 2px solid #B6BE95; } /* === Navigation CAL – taille police ================== */ .nav-cal .e-n-menu-title-text { font-size: 1.2em; /* ~5% plus grand que la base */ line-height: 1.2; /* garder une bonne respiration */ } /* === 12) Mega-menu : panneau global ========================== */ /* .e-n-menu-content → transparence, radius, ombre */ /* Laisse passer l’ombre/arrondi et neutralise les fonds forcés */ .elementor-location-header .e-n-menu-content, .elementor-location-header .e-n-menu-content > .e-con { overflow: visible !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } /* Le fond réel + arrondi bas + ombre sont posés sur l’inner */ .elementor-location-header .e-n-menu-content > .e-con > .e-con-inner { background: var(--color-bg) !important; /* ex: #FFFFFF */ border-radius: 0 0 12px 12px; box-shadow: 0 12px 28px rgba(0,0,0,.12); padding: 1.2rem; } /* Annule les "cartons" globaux UNIQUEMENT dans le panneau */ .elementor-location-header .e-n-menu-content .elementor .elementor-widget-container { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } /* Fallback si le panneau est rendu hors du header (mobile/certaines configs) */ .e-n-menu-content, .e-n-menu-content > .e-con { overflow: visible !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } .e-n-menu-content > .e-con > .e-con-inner { background: var(--color-bg) !important; /* tu peux mettre --color-bg-muted si tu préfères */ border-radius: 0 0 12px 12px; box-shadow: 0 12px 28px rgba(0,0,0,.12); padding: 1.2rem; } /* Neutralise les “cartons” globaux seulement dans le panneau */ .e-n-menu-content .elementor .elementor-widget-container { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } /* ===== BOUTON HAMBURGER (uniquement mobile) ======================= */ /* Desktop + tablette : cacher le burger */ .nav-cal .e-n-menu-toggle { display: none !important; } /* Apparence du bouton burger */ .nav-cal .e-n-menu-toggle { background: transparent !important; border: none; box-shadow: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: none; color: var(--color-primary) !important; } .nav-cal .e-n-menu-toggle svg, .nav-cal .e-n-menu-toggle svg path { stroke: var(--color-primary) !important; fill: var(--color-primary) !important; stroke-width: 2.5px !important; width: 28px !important; height: 28px !important; } .nav-cal .e-n-menu-toggle:hover, .nav-cal .e-n-menu-toggle:active, .nav-cal .e-n-menu-toggle:focus { background: transparent !important; color: var(--color-primary) !important; box-shadow: none !important; } /* === 13) Mega-menu : templates sous-menus ==================== */ /* .submenu-cal → titres (sub-title), intro (sub-intro), liens (sub-info), paddings */ /* Padding uniforme sur tous les blocs enfants d’une grille de sous-menu */ .e-n-menu-content .submenu-cal .e-con.e-child { padding: var(--space-3) var(--space-6) !important; } /* Sous-menu – Titre (classe sub-title) */ .e-n-menu-content .sub-title .elementor-heading-title { font-family: var(--font-headings) !important; /* Barlow Condensed */ font-weight: 500; text-transform: uppercase; font-size: 1rem; /* ajuste si besoin */ line-height: 1.3; margin: 0 0 .4rem 0; color: var(--color-text) !important; border-bottom: 1px solid var(--color-accent-100); /* fine bordure */ padding-bottom: .25rem; } .e-n-menu-content .sub-title .elementor-heading-title a { color: inherit !important; text-decoration: none !important; display: inline-block; /* pour hériter proprement du padding */ } .e-n-menu-content .sub-title .elementor-heading-title a:hover { color: var(--color-primary) !important; } /* Respiration entre colonnes/lignes de la grille */ .e-n-menu-content .submenu-cal { display: grid; gap: 1rem 1.25rem; /* vertical / horizontal */ } /* Texte intro .sub-intro sur le widget Texte */ .e-n-menu-content .submenu-cal .sub-intro .elementor-widget-container, .e-n-menu-content .submenu-cal .sub-intro p { font-family: var(--font-body); font-size: 0.75rem; line-height: 1.25; color: var(--color-text-muted, #555); margin: .25rem 0 .5rem 0; } /* Sous-menu – Liens "Plus d'infos" (un par ligne) */ .e-n-menu-content .submenu-cal .sub-info .elementor-icon-list-item { display: flex; /* au lieu de inline-flex */ font-family: var(--font-headings); font-size: 1rem; font-weight: 500; color: var(--color-secondary) !important; text-decoration: none !important; transition: color .2s ease; } /* Icône (reste inchangé) */ .e-n-menu-content .submenu-cal .sub-info .elementor-icon-list-icon { font-size: 0.90rem; color: inherit; line-height: 1; display: flex; align-items: center; } /* Texte */ .e-n-menu-content .submenu-cal .sub-info .elementor-icon-list-text { color: inherit; font-size: inherit; font-weight: inherit; } /* Base du lien (structure
  • …
    • ) */ .e-n-menu-content .submenu-cal .sub-info .elementor-icon-list-item a { display: flex; color: var(--color-secondary) !important; /* couleur au repos */ text-decoration: none !important; } /* Le texte du lien ne doit jamais être souligné */ .e-n-menu-content .submenu-cal .sub-info .elementor-icon-list-text { text-decoration: none !important; } /* L’icône suit la couleur du lien */ .e-n-menu-content .submenu-cal .sub-info .elementor-icon-list-icon, .e-n-menu-content .submenu-cal .sub-info .elementor-icon-list-icon svg, .e-n-menu-content .submenu-cal .sub-info .elementor-icon-list-icon svg path { color: inherit !important; fill: currentColor !important; stroke: currentColor !important; } /* Hover / Focus : couleur primaire, pas de souligné */ .e-n-menu-content .submenu-cal .sub-info .elementor-icon-list-item a:hover, .e-n-menu-content .submenu-cal .sub-info .elementor-icon-list-item a:focus { color: var(--color-primary) !important; text-decoration: none !important; } /* === 14) Mega-menu : loops (actus, feedzy, etc.) ============= */ /* .sub-loop (image + texte), .sub-post-media, .sub-post-body, .sub-post-title, .sub-post-meta, variantes responsive, feedzy overrides */ /* 0) Neutraliser le padding hérité sur les 2 colonnes de la loop */ .e-n-menu-content .submenu-cal .sub-post-media.e-con.e-child, .e-n-menu-content .submenu-cal .sub-post-body.e-con.e-child { padding: 0 !important; } /* 1) Poser le layout au bon niveau : l’inner porte le flex + gap */ .e-n-menu-content .submenu-cal .sub-loop > .e-con-inner { display: flex; align-items: flex-start; /* gap modern */ gap: var(--space-3, 12px); } /* Fallback si flex-gap n’est pas supporté */ .e-n-menu-content .submenu-cal .sub-loop > .e-con-inner > * + * { margin-left: var(--space-3, 12px); } @supports (gap: 1rem) { .e-n-menu-content .submenu-cal .sub-loop > .e-con-inner > * + * { margin-left: 0; } } /* 2) Colonne image : carré fixe 50×50 */ .e-n-menu-content .submenu-cal .sub-post-media { flex: 0 0 50px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; overflow: hidden; /* évite tout débordement */ } /* Image qui remplit le carré (toutes variantes Elementor) */ .e-n-menu-content .submenu-cal .sub-post-media img, .e-n-menu-content .submenu-cal .sub-post-media .elementor-image img, .e-n-menu-content .submenu-cal .sub-post-media .wp-post-image { width: 100%; height: 100%; object-fit: cover; display: block; } /* Neutralise un max-width par défaut du widget Image */ .e-n-menu-content .submenu-cal .sub-post-media .elementor-widget-image img { max-width: none !important; } /* 3) Colonne texte : occupe le reste, pile verticale propre */ .e-n-menu-content .submenu-cal .sub-post-body { flex: 1 1 auto; min-width: 0; /* évite “une lettre par ligne” */ display: flex; flex-direction: column; } /* 4) Titre : anti-césure moche sur mots longs */ .e-n-menu-content .submenu-cal .sub-post-title .elementor-heading-title { overflow-wrap: anywhere; } /* ============== LOOP – Titre + Meta ================= */ /* Titre de l’article (sub-post-title) */ .e-n-menu-content .submenu-cal .sub-post-title .elementor-heading-title, .e-n-menu-content .submenu-cal .sub-post-title .elementor-heading-title a { font-family: var(--font-body); /* police texte */ font-size: 0.9rem; /* ≈16px */ font-weight: 600; /* un peu marqué */ color: var(--color-secondary); /* bleu pétrole */ line-height: 1.2; margin: 0; text-decoration: none !important; /* jamais souligné */ transition: color .2s ease; } /* Hover : couleur primaire, toujours sans souligné */ .e-n-menu-content .submenu-cal .sub-post-title .elementor-heading-title a:hover { color: var(--color-primary); text-decoration: none !important; } /* Méta (sub-post-meta : date, auteur…) */ .e-n-menu-content .submenu-cal .sub-post-meta, .e-n-menu-content .submenu-cal .sub-post-meta .elementor-widget-container, .e-n-menu-content .submenu-cal .sub-post-meta p { font-family: var(--font-body); /* police texte */ font-size: 0.85rem; /* légèrement plus petit */ color: var(--color-text-muted, #777); /* même teinte que sub-intro */ line-height: 1.4; margin: 0; } /* ============== Feedzy RSS – titres homogènes ================= */ /* Supprime le padding/marge par défaut des listes Feedzy */ .submenu-cal .feedzy-rss-1 ul.feedzy-default { list-style: none; /* pas de puce */ padding-left: 0; /* enlève le retrait à gauche */ margin: 0; /* reset margin */ } /* Chaque item : reset éventuels styles */ .submenu-cal .feedzy-rss-1 .rss_item { margin: 0 0 12px 0; /* un peu d’air entre les articles */ padding: 0; } @media (max-width: 767px) { .submenu-cal .feedzy-rss-1 .rss_item { margin: 0 0 12px 0; } } /* Feedzy dans le sous-menu — titres compacts */ .submenu-cal .feedzy-rss-1 .title, .submenu-cal .feedzy-rss-1 .title a { display: block; /* force une boîte propre */ line-height: 1.2 !important; /* ↓ ajuste à 1.15 / 1.1 si tu veux */ padding: 0 !important; /* retire l’air ajouté par le thème/plugin */ margin: 0 !important; } /* Optionnel : compacter l’item lui-même */ .submenu-cal .feedzy-rss-1 .rss_item { line-height: normal; /* évite un line-height hérité trop grand */ padding: 0 !important; margin: 0 0 .45rem 0; /* respiration minimale entre items */ } /* Ton style homogène avec sub-post-title (reaffirmé après le reset) */ .submenu-cal .feedzy-rss-1 .title a { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--color-secondary); text-decoration: none !important; transition: color .2s ease; } .submenu-cal .feedzy-rss-1 .title a:hover { color: var(--color-primary); text-decoration: none !important; } /* ================================ Main encadré + respirations globales ================================ */ /* Conteneur principal (applique la classe `cal-main` dans Elementor) */ .cal-main, .cal-home { /* encadrement + centrage */ max-width: var(--cal-main-max); margin-inline: auto; /* respiration latérale (mobile/tablette) */ padding-inline: var(--cal-pad-x); /* layout interne par défaut */ display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); padding-block-end: var(--space-main-bottom); } .cal-main { padding-block-start: var(--cal-gap-top); } .no-padding-top { padding-block-start: 0; } /* Aération des boutons — uniquement dans le contenu principal */ .cal-main .button, .cal-main .wp-block-button__link, .cal-main input[type="submit"], .cal-main input[type="button"], .cal-main button, .cal-main .elementor .elementor-button { margin-block: clamp(12px, 2vw, 24px); } /* Rétablir l’aération des widgets Bouton dans le contenu (override le margin-block-end:0 d’Elementor Containers) */ .cal-main .e-con > .elementor-element.elementor-widget.elementor-widget-button, .cal-main .elementor-container > .elementor-element.elementor-widget.elementor-widget-button { /*margin-block: clamp(12px, 2vw, 24px) !important;*/ } /* Pas de marge interne sur le lien, pour éviter le “double espace” */ .cal-main .elementor-widget-button .elementor-button { margin: 0 !important; } /* Safety: Elementor met parfois la marge sur .elementor-widget-container à 0 */ .cal-main .elementor-widget-button .elementor-widget-container { margin: 0 !important; } /* === 15) Responsive global =================================== */ /* media queries spécifiques (tablet/mobile), ajustements */ /* NAV pré-header – plus petit en mobile (<768px) */ @media (max-width: 767px) { .cal-nav-preheader .elementor-nav-menu, .cal-nav-preheader .elementor-nav-menu a { font-size: 0.7rem; /* ~11.2px */ line-height: 0.7; /* garde de l’air */ } } /* MOBILE – fond sur les items 1er niveau du hamburger */ @media (max-width: 767px) { .nav-cal .e-n-menu-item { background: var(--color-bg) !important; /* ex: #FFFFFF */ } .elementor-location-header .e-n-menu-content > .e-con > .e-con-inner { border-radius: 0; box-shadow: 0 12px 28px rgba(0,0,0,.12); padding: 1rem; } } /* Mobile : montrer le burger */ @media (max-width: 767px) { .nav-cal .e-n-menu-toggle { display: flex !important; } } /* Padding uniforme sur tous les blocs enfants d’une grille de sous-menu */ @media (max-width: 767px) { .e-n-menu-content .submenu-cal .e-con.e-child { padding: 12px !important; } } /* Respiration entre colonnes/lignes de la grille */ @media (max-width: 767px) { .e-n-menu-content .submenu-cal { gap: .75rem 1rem; } } /* ============== LOOP ============== */ @media (max-width: 1024px) { /* Masquer l’image en mobile + tablette */ .e-n-menu-content .submenu-cal .sub-post-media { display: none !important; } /* Masquer les métadonnées en mobile + tablette */ .e-n-menu-content .submenu-cal .sub-post-meta { display: none !important; } /* Le parent devient une pile simple (colonne texte seule) */ .e-n-menu-content .submenu-cal .sub-loop > .e-con-inner { flex-direction: column; row-gap: var(--space-3, 12px); } } /*=== FEEDZY submenu ===*/ @media (max-width: 767px) { .submenu-cal .feedzy-rss-1 .rss_item { margin: 0 0 12px 0; } } /* ================================ Fil d'Ariane (Rank Math) ================================ */ .rank-math-breadcrumb { font-family: var(--font-body); font-size: 0.9rem; /* un poil plus petit que le body (16px → ~14.4px) */ line-height: 1.4; color: var(--color-text-muted); } .rank-math-breadcrumb a { color: var(--color-secondary); text-decoration: none; } .rank-math-breadcrumb a:hover { color: var(--color-accent); text-decoration: none; } /* ===== Fil d’Ariane – alignement à droite (robuste) ===== */ /* Cas général (nav/p/…) */ .cal-main .rank-math-breadcrumb { display: block; text-align: right; } /* Si le breadcrumb est rendu via un widget Elementor (shortcode/texte), Elementor peut imposer un text-align : on force à droite. */ .elementor .elementor-widget-shortcode .rank-math-breadcrumb, .elementor .elementor-widget-text-editor .rank-math-breadcrumb { text-align: right !important; } /* Fallback si Rank Math sort une liste UL/LI */ .rank-math-breadcrumb ul { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .25em .4em; margin: 0; padding: 0; list-style: none; } .rank-math-breadcrumb li { display: inline; } /* Espacement / aspect du séparateur */ .rank-math-breadcrumb .separator { margin: 0 .35em; color: var(--color-text-muted); } /* Séparateur (»), réduit un peu l'air */ .rank-math-breadcrumb .separator { margin: 0 .25em; color: var(--color-text-muted); } /* Responsive : on diminue encore un peu sur tablette/mobile */ @media (max-width: 1024px) { .rank-math-breadcrumb { font-size: 0.85rem; } /* ≈13.6px */ } @media (max-width: 767px) { .rank-math-breadcrumb { font-size: 0.8rem; } /* ≈12.8px */ } /* ===== Fil d’Ariane – respiration vers le contenu ===== */ .cal-main .rank-math-breadcrumb { margin-bottom: var(--space-6); /* ~24px d’air sous le fil */ } @media (min-width: 1024px) { .cal-main .rank-math-breadcrumb { margin-bottom: 48px; /* un peu plus généreux en desktop */ } } /* ========================================================= BROCHURE & EVENT – 2 colonnes (media + infos/texte) Scope: .cal-main .cal-brochure - .cal-event ========================================================= */ /* === Variables dédiées (brochure) ====================== */ :root{ --brochure-col1-min: 260px; /* min largeur colonne image */ --brochure-col1-max: 360px; /* max largeur colonne image */ --brochure-gap: clamp(16px, 4vw, 40px); /* espace entre colonnes */ --brochure-radius: 0; /* pas d’arrondi par défaut */ --brochure-sticky-top: 96px; /* top sticky si header sticky */ } /* === Wrapper 2 colonnes ================================ */ .cal-main .cal-brochure, .cal-main .cal-event{ display: grid; grid-template-columns: minmax(var(--brochure-col1-min), var(--brochure-col1-max)) 1fr; gap: var(--brochure-gap); align-items: start; } /* === Colonne 1 : image mise en avant =================== */ .cal-main .cal-brochure .brochure-media, .cal-main .cal-event .event-media{ position: relative; } /* Image portrait propre (sans border-radius) */ .cal-main .cal-brochure .brochure-media img, .cal-main .cal-event .event-media img{ display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--brochure-radius); box-shadow: var(--shadow-1); margin-bottom: clamp(12px, 3vw, 24px); } /* Option sticky (active si souhaité) */ .cal-main .cal-brochure .brochure-media, .cal-main .cal-event .event-media{ position: sticky; top: var(--brochure-sticky-top); } /* Cas sans image : repasse en 1 colonne */ .cal-main .cal-brochure.has-no-thumb, .cal-main .cal-event.has-no-thumb{ grid-template-columns: 1fr; } /* En pratique */ .cal-main .cal-event .event-media .en-pratique-title { font-size: var(--h2-size); font-family: var(--font-headings); color: var(--color-secondary); font-weight: 600; padding: 1rem 0; } /* === Colonne 2 : infos + texte ========================= */ .cal-main .cal-brochure .brochure-body, .cal-main .cal-event .event-body{ display: flex; flex-direction: column; gap: clamp(10px, 2.2vw, 18px); /*text-align: center; /* centrage global */ /*align-items: center; /* centre aussi les éléments flex */ } /* Date (centrée comme les tags) */ .cal-main .cal-brochure .brochure-date, .cal-main .cal-event .event-meta{ display: flex; /* même logique que les tags */ justify-content: center; /* centre horizontalement */ flex-wrap: wrap; /* si jamais multi-lignes */ font-family: var(--font-headings); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem); color: var(--color-secondary); line-height: 1.2; } /* Tags – texte simple (pas de pastilles) */ .cal-main .cal-brochure .brochure-tags, .cal-main .cal-event .brochure-tags{ display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; margin-bottom: clamp(6px, 1.2vw, 10px); } .cal-main .cal-brochure .brochure-tags a, .cal-main .cal-brochure .brochure-tags span, .cal-main .cal-event .brochure-tags a, .cal-main .cal-event .brochure-tags span{ font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--color-secondary); text-decoration: none; } .cal-main .cal-brochure .brochure-tags a:hover, .cal-main .cal-brochure .brochure-tags a:focus, .cal-main .cal-event .brochure-tags a:hover, .cal-main .cal-event .brochure-tags a:focus{ color: var(--color-primary); text-decoration: none; } /* Séparateur Elementor entre items (version border-left) */ .cal-main .cal-brochure .brochure-tags .elementor-inline-items .elementor-icon-list-item:not(:last-child)::after, .cal-main .cal-event .brochure-tags .elementor-inline-items .elementor-icon-list-item:not(:last-child)::after{ content: ""; display: inline-block; vertical-align: middle; height: 1em; /* hauteur du texte */ border-left: 1px solid var(--color-secondary) !important; margin: 0 .4em; } /* Fin bloc méta → séparateur discret avant titres */ .cal-main .cal-brochure .brochure-tags + *, .cal-main .cal-event .brochure-tags + *{ border-top: 1px solid rgba(0,0,0,.06); padding-top: clamp(8px, 1.6vw, 14px); } /* Titre (H1 widget) */ .cal-main .cal-brochure .brochure-title .elementor-heading-title, .cal-main .cal-brochure .brochure-title h1, .cal-main .cal-event .brochure-title .elementor-heading-title, .cal-main .cal-event .brochure-title h1{ text-align: center; font-family: var(--font-headings); font-weight: 800; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.6rem); line-height: var(--lh-tight); color: var(--color-secondary); margin: 0; border-bottom: 0; } /* Sous-titre = H2 global */ .cal-main .cal-brochure .brochure-subtitle .elementor-heading-title, .cal-main .cal-brochure .brochure-subtitle h2, .cal-main .cal-event .brochure-subtitle .elementor-heading-title, .cal-main .cal-event .brochure-subtitle h2{ font-family: var(--font-headings); font-size: var(--h2-size); font-weight: 600; line-height: var(--lh-tight); color: var(--color-secondary); margin: 0 0 .6em; text-align: center; } /* Bouton (téléchargement / action) */ .cal-main .cal-brochure .brochure-cta{ margin-top: clamp(16px, 3vw, 32px); /* aération au-dessus */ } .cal-main .cal-brochure .brochure-cta .elementor-button, .cal-main .cal-brochure .brochure-cta a.elementor-button{ padding: .78em 1.35em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* Contenu Gutenberg */ .cal-main .cal-brochure .brochure-content, .cal-main .cal-event .event-content{ margin-top: clamp(12px, 3vw, 24px); margin-bottom: clamp(12px, 3vw, 24px); text-align: justify; } /* Infos complémentaires */ .event-infos { border-top:1px solid var(--color-accent-100); margin-top: clamp(12px, 3vw, 24px); padding-top: clamp(12px, 3vw, 24px); font-size: 0.8em; } /* Images/figures dans le contenu */ .cal-main .cal-brochure .brochure-content figure, .cal-main .cal-event .event-content figure{ margin: 0 0 1.1em; } .cal-main .cal-brochure .event-content .wp-block-image img, .cal-main .cal-event .event-content .wp-block-image img{ border-radius: 0; /* pas d’arrondi par défaut */ } /* Citations sobres */ .cal-main .cal-brochure .brochure-content .wp-block-quote{ border-left: 4px solid var(--color-accent); padding-left: .9em; } /* === Responsive ======================================= */ /* Tablet – conserver 2 colonnes (image un peu réduite) */ @media (max-width: 1024px) and (min-width: 768px){ .cal-main .cal-brochure, .cal-main .cal-event{ grid-template-columns: minmax(220px, 38%) 1fr; gap: clamp(14px, 3vw, 28px); align-items: start; } } /* Mobile – empiler + désactiver sticky */ @media (max-width: 767px){ .cal-main .cal-brochure, .cal-main .cal-event{ grid-template-columns: 1fr; } .cal-main .cal-brochure .brochure-media, .cal-main .cal-event .event-media{ position: static !important; top: auto !important; } /* tags un peu plus compacts */ .cal-main .cal-brochure .brochure-tags a, .cal-main .cal-brochure .brochure-tags span, .cal-main .cal-event .brochure-tags a, .cal-main .cal-event .brochure-tags span{ font-size: 0.9rem; } } /* ====================================================================== FIN PACK BROCHURES ====================================================================== */ /* ====================================================================== ARCHIVES Publications – Grille d’items (robuste) ====================================================================== */ /* ====================================================================== ARCHIVES Publications – Grille d’items (robuste) ====================================================================== */ /* === Parent en ligne (flex) + espace entre colonnes === */ .cal-main .pub-item{ display: flex !important; /* Elementor met déjà e-flex, on force au besoin */ flex-direction: row !important; /* sécurité */ align-items: flex-start; gap: clamp(16px, 3vw, 32px); } /* === Colonne gauche = 25% === */ .cal-main .pub-item > .pub-media{ flex: 0 0 25% !important; max-width: 25% !important; margin: 0; padding: 0; /* pas d’espace latéral */ } /* Image = pleine largeur de sa colonne, sans bord */ .cal-main .pub-item > .pub-media img{ display: block; width: 100%; height: auto; object-fit: cover; border-radius: 0; box-shadow: var(--shadow-1); } /* === Colonne droite = 75% – corrigé avec calc() pour inclure le gap === */ .cal-main .pub-item > .pub-body{ flex: 0 0 calc(75% - clamp(16px, 3vw, 32px)) !important; max-width: calc(75% - clamp(16px, 3vw, 32px)) !important; min-width: 0; /* évite les débordements de texte */ display: flex; /* pile interne */ flex-direction: column; gap: .25rem; } /* === Responsive : 2 colonnes aussi en mobile === */ @media (max-width: 767px){ .cal-main .pub-item { flex-direction: row !important; /* reste en ligne */ gap: 12px; /* un peu moins d’air */ } .cal-main .pub-item > .pub-media { flex: 0 0 35% !important; /* un peu plus large qu’en desktop */ max-width: 35% !important; } .cal-main .pub-item > .pub-body { flex: 0 0 calc(65% - 12px) !important; max-width: calc(65% - 12px) !important; } } /* ====================================================================== Publications – Kicker (catégorie + date) & Tags (style commun) ====================================================================== */ /* Wrapper commun (ligne compacte, items sur une ligne puis wrap) */ .cal-main .pub-body .pub-meta, .cal-main .pub-body .pub-tags{ display: flex; flex-wrap: wrap; gap: .5em; font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--color-secondary); line-height: 1.3; margin: 0; /* reset */ } /* un petit air seulement entre meta et tags */ .cal-main .pub-body .pub-meta{ margin-bottom: 0px; /* ≈0.25rem */ } /* Couvre le widget Post Info d’Elementor (structure en