/*
Theme Name: SLMUC
Theme URI: https://qodeinteractive.com/qi/
Description: Child theme for Qi (Qode Interactive) — all SLMUC customisation lives here.
Author: nvision
Template: qi
Version: 1.0.0
Text Domain: qi-child
*/
/* Add SLMUC custom styles below. */
/* ElegantIcons icon font (used by the Qode demo icons) */
@font-face {
font-family: 'ElegantIcons';
src: url('assets/fonts/ElegantIcons.woff') format('woff'),
url('assets/fonts/ElegantIcons.ttf') format('truetype'),
url('assets/fonts/ElegantIcons.eot');
font-weight: normal;
font-style: normal;
font-display: block;
}
/* "Back to top" button: white arrow on blue background */
#qodef-back-to-top .qodef-back-to-top-icon { color: #fff; }
#qodef-back-to-top svg,
#qodef-back-to-top svg path { fill: #fff !important; }
/* Mobile burger: keep the ratio (the setting only forces the width -> stretching) */
.qodef-mobile-header-opener svg { height: auto !important; }
/* solid bars */
.qodef-mobile-header-opener svg rect,
.qodef-mobile-header-opener svg path { fill: #1e2837 !important; }
/* no ugly focus outline */
.qodef-mobile-header-opener:focus,
.qodef-mobile-header-opener:focus-visible,
.qodef-mobile-header-opener:active { outline: none !important; box-shadow: none !important; }
/* Logo: no focus outline on click */
.qodef-header-logo-link:focus,
.qodef-header-logo-link:focus-visible,
.qodef-header-logo-link:active { outline: none !important; box-shadow: none !important; }
/* Mobile header: smaller logo (Qi sets it to 80px, a bit tall on phones). */
#qodef-page-mobile-header .qodef-mobile-header-logo-link {
height: 55px !important;
}
#qodef-page-mobile-header .qodef-mobile-header-logo-link img {
height: 100% !important;
width: auto !important;
}
/* Page title banner ("À PROPOS", "NOTRE ÉQUIPE"…): Qi uses a fixed 400px
height, too tall on phones — shorten it on mobile (desktop keeps 400px). */
@media only screen and (max-width: 768px) {
.qodef-page-title {
height: 240px !important;
}
.qodef-page-title .qodef-m-title,
.qodef-page-title h1 {
font-size: 40px !important;
line-height: 1.15 !important;
}
/* Less vertical padding around the page content on mobile
(Qi uses 130px top / 100px bottom). */
#qodef-page-inner {
padding: 0 0 40px !important;
}
}
/* User icon before the Login / My account link */
.qodef-login-link a::before {
content: "";
display: inline-block;
width: .85em;
height: .85em;
margin-right: 7px;
vertical-align: -0.08em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* "Become a member": item shown in the MOBILE menu only (desktop already has the button) */
.qodef-header-navigation .qodef-cta-mobile { display: none !important; }
/* highlight in the mobile menu */
.qodef-mobile-header-navigation .qodef-cta-mobile > a { color: #e3242b !important; font-weight: 700; }
/* "Become a member" button (header + sticky): clearly visible CTA */
.widget_qode_essential_addons_button .qodef-theme-button.qodef--filled {
background-color: #e3242b !important;
color: #fff !important;
border-radius: 6px !important; /* rounded corners (use 999px for a pill button) */
}
.widget_qode_essential_addons_button .qodef-theme-button.qodef--filled:hover {
background-color: #b81d23 !important;
color: #fff !important;
}
/* News cards: hide the author + the "/" separator that precedes it */
.qodef-e-info-author { display: none !important; }
.qodef-e-info-category::after,
.qodef-e-info--top .qodef-e-info-item:not(:last-child)::after,
.qodef-e-info--top .qodef-e-info-item:not(:last-child)::before { content: none !important; }
/* News cards: hide the category label above the title (it duplicates the title
on some posts, e.g. "Assemblée générale"). The single-post page keeps it. */
.qodef-addons-blog-list .qodef-e-info.qodef-info--top {
display: none !important;
}
/* News grid: 3 cards per row, centered */
.page-template-page-actualites .qodef-blog {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 30px !important;
}
.page-template-page-actualites .qodef-blog .qodef-blog-item {
display: flex !important;
flex: 0 1 calc(33.333% - 30px) !important;
max-width: calc(33.333% - 30px) !important;
width: calc(33.333% - 30px) !important;
margin: 0 0 32px !important;
align-items: stretch !important;
}
.page-template-page-actualites .qodef-blog .qodef-blog-item .qodef-e-inner {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
@media only screen and (max-width: 860px) {
.page-template-page-actualites .qodef-blog .qodef-blog-item {
flex: 0 1 calc(50% - 30px) !important;
max-width: calc(50% - 30px) !important;
width: calc(50% - 30px) !important;
}
}
@media only screen and (max-width: 620px) {
.page-template-page-actualites .qodef-blog {
gap: 24px !important;
}
.page-template-page-actualites .qodef-blog .qodef-blog-item {
flex: 0 1 100% !important;
max-width: 100% !important;
width: 100% !important;
}
}
/* "Read more" arrow in flash blue (real SVG icon, e.g. homepage block) */
.qodef-e-read-more .qodef-m-icon,
.qodef-e-read-more .qodef-m-icon svg,
.qodef-e-read-more .qodef-m-icon svg * { color: #1C6EA4 !important; fill: #1C6EA4 !important; }
/* ====================================================================
News block: styles taken IDENTICALLY from the homepage Qi Blog List
widget (CSS generated by Elementor for .elementor-element-896f1a6),
re-scoped to the news page. Title + excerpt already inherit the theme
global styles, so there is nothing to duplicate for them.
==================================================================== */
/* Category (info top): Oswald 13px, grey #A3AEBA, uppercase */
.page-template-page-actualites .qodef-e-info.qodef-info--top .qodef-e-info-item {
color: #A3AEBA;
font-family: "Oswald", Sans-serif;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1.4px;
}
.page-template-page-actualites .qodef-e-info.qodef-info--top .qodef-e-info-item a:hover { color: #1E1E1E; }
.page-template-page-actualites .qodef-e-info.qodef-info--top { margin-bottom: 9px; }
/* No real category (post in "Uncategorized"): hide the label but keep the
space (visibility) so the titles stay aligned */
.page-template-page-actualites .category-uncategorized .qodef-e-info.qodef-info--top { visibility: hidden !important; }
/* Uniform image height: same ratio for every card (centered crop),
otherwise a taller image unbalances the grid */
.page-template-page-actualites .qodef-e-media-image,
.page-template-page-actualites .qodef-e-media-image a { display: block; }
.page-template-page-actualites .qodef-e-media-image img {
width: 100%;
aspect-ratio: 1300 / 743;
object-fit: cover;
display: block;
}
/* "Read more" always stuck to the bottom of the card, aligned across cards
(cards in a row already have the same height via the grid).
NB: the plugin forces .qodef-e-inner/.qodef-e-content to display:inline-block
at equal specificity -> we add .qodef-addons-blog-list + !important to
enforce flex, otherwise the chain breaks and margin-top:auto has no effect. */
.page-template-page-actualites .qodef-addons-blog-list .qodef-blog-item { display: flex; flex-direction: column; }
.page-template-page-actualites .qodef-addons-blog-list .qodef-blog-item .qodef-e-inner,
.page-template-page-actualites .qodef-addons-blog-list .qodef-blog-item .qodef-e-content {
display: flex !important;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
}
/* The read-more sits inside .qodef-e-info--bottom: it is THIS block (direct
child of the flex content) that we push to the bottom to align the buttons */
.page-template-page-actualites .qodef-addons-blog-list .qodef-blog-item .qodef-e-info.qodef-info--bottom { margin-top: auto !important; }
/* "Read more" button: Oswald 14px/600, uppercase, #1E2837 */
.page-template-page-actualites .qodef-e-read-more .qodef-qi-button,
.page-template-page-actualites .qodef-e-read-more .qodef-qi-button:hover {
font-family: "Oswald", Sans-serif;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
line-height: 28px;
letter-spacing: 1.4px;
color: #1E2837;
}
/* Arrow: the shortcode's textual button has no icon, so we add the SAME
SVG arrow as the homepage (simple-button-arrow.svg), in blue #1C6EA4 */
.page-template-page-actualites .qodef-e-read-more .qodef-qi-button .qodef-m-text::after {
content: "";
display: inline-block;
width: 16px;
height: 11px;
margin-left: 8px;
vertical-align: middle;
background-color: #1C6EA4;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11'%3E%3Cpath d='M1.49,7.52H15.35l-3-3.36a.7.7,0,0,1,0-1.09.58.58,0,0,1,1,0l4.25,4.67a.51.51,0,0,1,.18.24,1,1,0,0,1,0,.3,1,1,0,0,1,0,.29.47.47,0,0,1-.18.24L13.31,13.5a.58.58,0,0,1-1,0,.7.7,0,0,1,0-1.09l3-3.36H1.49A.64.64,0,0,1,1,8.85a.79.79,0,0,1-.2-.55V8L1,7.74A.64.64,0,0,1,1.49,7.52Z' transform='translate(-0.78 -2.8)'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11'%3E%3Cpath d='M1.49,7.52H15.35l-3-3.36a.7.7,0,0,1,0-1.09.58.58,0,0,1,1,0l4.25,4.67a.51.51,0,0,1,.18.24,1,1,0,0,1,0,.3,1,1,0,0,1,0,.29.47.47,0,0,1-.18.24L13.31,13.5a.58.58,0,0,1-1,0,.7.7,0,0,1,0-1.09l3-3.36H1.49A.64.64,0,0,1,1,8.85a.79.79,0,0,1-.2-.55V8L1,7.74A.64.64,0,0,1,1.49,7.52Z' transform='translate(-0.78 -2.8)'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ====================================================================
Reusable "Lire la suite →" link — same look as the news read-more
(Oswald 14px/600, uppercase, #1E2837, blue #1C6EA4 arrow).
Usage: on an Elementor Button widget, add the CSS class `slmuc-read-more`
(Avancé → Classes CSS). It flattens the button into a text link + arrow.
==================================================================== */
.slmuc-read-more .elementor-button {
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
color: #1E2837 !important;
font-family: "Oswald", Sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 28px !important;
letter-spacing: 1.4px !important;
text-transform: uppercase !important;
}
.slmuc-read-more .elementor-button:hover { color: #1C6EA4 !important; }
/* Keep a group of words on the same line (e.g. "médecine d'urgence" in the
hero title). Wrap them in …. */
.slmuc-nowrap { white-space: nowrap; }
/* Justify text — add the class `slmuc-justify` to a block (Qi Section Title
"Custom Class", or Elementor Text Editor "Advanced → CSS Classes").
Covers the Qi text element and plain paragraphs. */
.slmuc-justify,
.slmuc-justify .qodef-m-text,
.slmuc-justify .qodef-m-text p,
.slmuc-justify .qodef-m-subtitle,
.slmuc-justify .elementor-widget-container,
.slmuc-justify .elementor-widget-container p,
.slmuc-justify p {
text-align: justify !important;
text-justify: inter-word;
}
/* Justified text looks bad on narrow columns (big gaps) — fall back to left
on mobile for readability. */
@media only screen and (max-width: 620px) {
.slmuc-justify,
.slmuc-justify .qodef-m-text,
.slmuc-justify .qodef-m-text p,
.slmuc-justify .qodef-m-subtitle,
.slmuc-justify .elementor-widget-container,
.slmuc-justify .elementor-widget-container p,
.slmuc-justify p {
text-align: left !important;
}
}
/* Generic center utility — add the class `slmuc-center` to ANY widget/element
(Custom Class, or Advanced → CSS Classes) to center its text and everything
inside it. */
.slmuc-center,
.slmuc-center * {
text-align: center !important;
}
/* also center common flex rows inside it (social icons, buttons) */
.slmuc-center .qodef-m-social-icons,
.slmuc-center .elementor-button-wrapper {
justify-content: center !important;
}
/* Bulleted lists in Qi text: hanging indent — wrapped lines align with the
text, not tucked under the bullet. */
.qodef-m-text ul,
.qodef-m-text ol {
list-style-position: outside !important;
padding-left: 1.3em;
margin-left: 0;
}
.qodef-m-text ul li,
.qodef-m-text ol li {
padding-left: 0.3em;
margin-bottom: 0.4em;
}
/* Blue arrow after the label (same SVG as the news read-more) */
.slmuc-read-more .elementor-button .elementor-button-text::after {
content: "";
display: inline-block;
width: 16px;
height: 11px;
margin-left: 8px;
vertical-align: middle;
background-color: #1C6EA4;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11'%3E%3Cpath d='M1.49,7.52H15.35l-3-3.36a.7.7,0,0,1,0-1.09.58.58,0,0,1,1,0l4.25,4.67a.51.51,0,0,1,.18.24,1,1,0,0,1,0,.3,1,1,0,0,1,0,.29.47.47,0,0,1-.18.24L13.31,13.5a.58.58,0,0,1-1,0,.7.7,0,0,1,0-1.09l3-3.36H1.49A.64.64,0,0,1,1,8.85a.79.79,0,0,1-.2-.55V8L1,7.74A.64.64,0,0,1,1.49,7.52Z' transform='translate(-0.78 -2.8)'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11'%3E%3Cpath d='M1.49,7.52H15.35l-3-3.36a.7.7,0,0,1,0-1.09.58.58,0,0,1,1,0l4.25,4.67a.51.51,0,0,1,.18.24,1,1,0,0,1,0,.3,1,1,0,0,1,0,.29.47.47,0,0,1-.18.24L13.31,13.5a.58.58,0,0,1-1,0,.7.7,0,0,1,0-1.09l3-3.36H1.49A.64.64,0,0,1,1,8.85a.79.79,0,0,1-.2-.55V8L1,7.74A.64.64,0,0,1,1.49,7.52Z' transform='translate(-0.78 -2.8)'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ====================================================================
Single post page
==================================================================== */
/* No real category (link to /category/uncategorized/): hide the
"Uncategorized" label AND the "/" separator that precedes it */
.single-post .qodef-e-info-category:has(a[href*="/category/uncategorized/"]) { display: none !important; }
.single-post .qodef-e-info .qodef-e-info-item:has(~ .qodef-e-info-category a[href*="/category/uncategorized/"])::after { content: '' !important; }
/* Featured image: crop every image to the SAME landscape rectangle (centered
crop) so a portrait image doesn't become huge. Same ratio as the news cards
(1300 / 743). object-fit:cover trims the overflow, centered by default. */
.single-post .qodef-e-media-image img {
width: 100% !important;
aspect-ratio: 1300 / 743;
height: auto !important;
max-height: 600px !important;
object-fit: cover;
object-position: center;
display: block;
}
/* ==================================================================== */
/* Membership page: a single plan ("Membre - 50 €") is auto-selected, so we hide
its visible label. The hidden input (plan id) stays, so the form still works. */
.page-id-1007 .pms-subscription-plan-name,
.page-id-1007 .pms-subscription-plan-price { display: none !important; }
/* ==================================================================== */
/* News: container centered at the SAME width as the homepage
(.elementor-container = max-width 1140px) instead of full width */
.slmuc-actualites-page {
max-width: 1140px;
margin: 0 auto;
padding: 50px 20px 80px;
}
.slmuc-actualites-header {
margin-bottom: 40px;
text-align: center;
}
.slmuc-actualites-header h1 {
font-size: 3rem;
letter-spacing: .2em;
text-transform: uppercase;
margin: 0;
}
.slmuc-actualites-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
justify-items: center;
}
.slmuc-actualites-card {
position: relative;
width: 100%;
max-width: 360px;
background: transparent;
border: none;
border-radius: 0;
overflow: hidden;
box-shadow: none;
transition: transform .15s ease;
}
.slmuc-actualites-card:hover {
transform: translateY(-2px);
}
.slmuc-actualites-card-link {
position: absolute;
inset: 0;
z-index: 1;
}
.slmuc-actualites-card-visual {
position: relative;
width: 100%;
min-height: 220px;
overflow: hidden;
background: transparent;
}
.slmuc-actualites-card-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.slmuc-actualites-card-image--placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #edf1f6 0%, #f9fbfd 100%);
}
.slmuc-actualites-card-body {
position: relative;
z-index: 2;
padding: 26px 24px 28px;
}
.slmuc-actualites-card-meta {
display: block;
margin-bottom: 12px;
color: #6d7584;
font-size: 0.9rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.slmuc-actualites-card-title {
margin: 0 0 14px;
font-size: 1.35rem;
line-height: 1.2;
}
.slmuc-actualites-card-title a {
color: #151b2c;
text-decoration: none;
}
.slmuc-actualites-card-excerpt {
margin-bottom: 22px;
color: #4a5363;
font-size: 0.95rem;
line-height: 1.6;
min-height: 96px;
}
.slmuc-actualites-card-footer {
display: flex;
align-items: center;
}
.slmuc-actualites-card-readmore {
font-weight: 700;
color: #1C6EA4;
letter-spacing: .08em;
text-transform: uppercase;
}
.slmuc-actualites-pagination {
margin-top: 40px;
text-align: center;
}
.slmuc-actualites-pagination .page-numbers {
display: inline-block;
margin: 0 6px;
padding: 10px 14px;
min-width: 44px;
border-radius: 8px;
border: 1px solid rgba(30, 40, 55, .12);
color: #151b2c;
text-decoration: none;
}
.slmuc-actualites-pagination .page-numbers.current {
background: #1e2837;
color: #fff;
border-color: #1e2837;
}
@media only screen and (max-width: 1200px) {
.slmuc-actualites-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media only screen and (max-width: 920px) {
.slmuc-actualites-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media only screen and (max-width: 640px) {
.slmuc-actualites-grid {
grid-template-columns: 1fr;
}
.slmuc-actualites-card {
max-width: 100%;
}
}
/* ====================================================================
Polylang language switcher (nav menu, dropdown mode)
Toggle = current language (FR), dropdown = other languages (EN/DE).
Labels are forced to 2-letter uppercase codes in functions.php.
==================================================================== */
/* Scope to the DESKTOP header nav — the mobile header keeps Qi's own
chevron button, so we don't touch it. */
/* Toggle (FR) + caret on ONE line.
Qi sets `.qodef-menu-item-text { flex-direction: column }`, which stacks
our ::after caret UNDER the text — force a row instead. */
.qodef-header-navigation .pll-parent-menu-item {
width: auto !important;
}
.qodef-header-navigation .pll-parent-menu-item > a {
white-space: nowrap;
}
.qodef-header-navigation .pll-parent-menu-item > a .qodef-menu-item-text {
flex-direction: row !important;
align-items: center;
}
/* Down-caret to the RIGHT of the toggle */
.qodef-header-navigation .pll-parent-menu-item > a .qodef-menu-item-text::after {
content: "";
display: inline-block;
width: .36em;
height: .36em;
margin-left: .5em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform .15s ease;
}
.qodef-header-navigation .pll-parent-menu-item:hover > a .qodef-menu-item-text::after,
.qodef-header-navigation .pll-parent-menu-item:focus-within > a .qodef-menu-item-text::after {
transform: translateY(1px) rotate(-135deg);
}
/* Compact dropdown, right-aligned under FR.
Qi default: width:220px; padding:26px 0; li padding:0 36px; left:-26px. */
.qodef-header-navigation .pll-parent-menu-item > .sub-menu {
width: auto !important;
min-width: 0 !important;
left: auto !important;
right: 0 !important;
/* Qi opens the dropdown at the bottom of the full-height header item,
leaving a big gap under "FR" — pull it back up toward the text. */
margin-top: -30px !important;
padding: 12px 0 !important;
}
.qodef-header-navigation .pll-parent-menu-item > .sub-menu > li {
padding: 0 18px !important;
}
.qodef-header-navigation .pll-parent-menu-item > .sub-menu > li > a {
margin: 6px 0 !important;
white-space: nowrap;
}
/* The dropdown must list only the OTHER languages: the toggle already shows the
current one, so hide the current language (Polylang adds `.current-lang`)
from the sub-menu — desktop AND mobile. */
.qodef-header-navigation .pll-parent-menu-item > .sub-menu > li.current-lang,
.qodef-mobile-header-navigation .pll-parent-menu-item .current-lang {
display: none !important;
}
/* --- Mobile menu: move the language switcher to the TOP ---
The mobile nav is a separate element (.qodef-mobile-header-navigation),
so this is mobile-only by nature. Qi renders its top-level as a
block; make it a flex column so we can reorder just the switcher item
without touching its position in the desktop menu. */
.qodef-mobile-header-navigation > ul {
display: flex;
flex-direction: column;
}
/* Move the switcher to the top, and keep FR + arrow packed to the left
(Qi's li is justify-content:space-between, which pushes the arrow far right). */
.qodef-mobile-header-navigation > ul > li.pll-parent-menu-item {
order: -1;
justify-content: flex-start;
gap: .15em;
}
/* Replace Qi's chunky right-pointing SVG chevron with the SAME thin
down-caret as desktop, right next to "FR". The button stays (it's the
tap target that expands EN/DE); we just swap its glyph. */
.qodef-mobile-header-navigation > ul > li.pll-parent-menu-item > .qodef-mobile-menu-item-icon svg {
display: none !important;
}
.qodef-mobile-header-navigation > ul > li.pll-parent-menu-item > .qodef-mobile-menu-item-icon::after {
content: "";
display: inline-block;
width: .36em;
height: .36em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform .15s ease;
}
/* Flip the caret up when the item is expanded */
.qodef-mobile-header-navigation > ul > li.pll-parent-menu-item.qodef--opened > .qodef-mobile-menu-item-icon::after {
transform: translateY(1px) rotate(-135deg);
}
/* ====================================================================
Contact Form 7 — compact fields + space between label and its input
==================================================================== */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="password"],
.wpcf7 input[type="number"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="search"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
padding: 7px !important; /* theme forces 17px, so !important is needed */
}
.wpcf7 label {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Submit button: rounded corners + darker blue on hover */
.wpcf7 input[type="submit"] {
border-radius: 6px;
transition: background-color .15s ease;
}
.wpcf7 input[type="submit"]:hover {
background-color: #10161E;
color: #fff;
}
/* The contact form sits inside a gray (#F3F3F3) Elementor column whose padding
the design zeroes below 1024px (padding_tablet = 0) — so the form cramps
against the card edges on tablet/mobile. Restore breathing room. The column id
is shared by the FR/EN/DE contact pages (same design), so one rule covers all
three; !important is needed to beat Elementor's own generated rule. */
@media (max-width: 1024px) {
.elementor-element.elementor-element-79441f7 > .elementor-element-populated {
padding: 20px !important;
}
}
/* ====================================================================
FluentForm (adhésion) — lighter option labels
The theme forces bold on radio/checkbox choice labels, which is heavy
on a long list; bring them back to normal weight.
==================================================================== */
.fluentform .ff-el-form-check-label,
.fluentform .ff-el-form-check-label span {
font-weight: 400 !important;
}
/* Consent-style checkboxes (RGPD + auto-renewal): full sentences, so drop
the theme's forced uppercase — keep the short choices (profession, etc.)
as-is. */
.fluentform .slmuc-consent .ff-el-form-check-label,
.fluentform .slmuc-consent .ff-el-form-check-label span {
text-transform: none !important;
}
/* Adhésion page: breathing room between the intro text and the form.
The wrapper div carries the `fluentform` class (fluentform_wrapper_N is
suffixed with the form id, so we target the stable `fluentform` class). */
.page-id-1007 .fluentform {
margin-top: 32px;
}
/* "Autre — précisez" text fields: hidden until the matching "Autre" is ticked
(JS adds .slmuc-show). */
.fluentform .slmuc-autre-field { display: none; }
.fluentform .slmuc-autre-field.slmuc-show { display: block; }
/* Adhésion form: keep text/email inputs at a contained width (not stretched
full-width), consistent across all fields. */
.fluentform .ff-el-form-control { max-width: 350px !important; }
/* Renouvellement: the "no refund mid-year" note shown inline under the checkbox
(moved out of the tooltip by JS). */
.fluentform .slmuc-renew-note {
margin-top: 6px;
font-size: 13px;
line-height: 1.4;
color: #6d7584;
}
/* Footer "Légal" menu (FR/EN/DE): links on one line instead of stacked. */
ul[id^="menu-footer-legal-"] {
display: flex !important;
flex-wrap: wrap;
gap: 4px 20px;
margin: 0;
padding: 0;
}
ul[id^="menu-footer-legal-"] > li {
margin: 0;
}
/* Legal pages (mentions légales, CGA, confidentialité, cookies + their FR/EN/DE
translations) carry the `slmuc-legal-page` body class (set in functions.php).
Format their content consistently — normal-case readable headings + 16px text —
whether the content is Gutenberg blocks or the Complianz document. Scoped to
`.qodef-page-content-section` so the page-title banner is untouched. */
.slmuc-legal-page .qodef-page-content-section h2 {
text-transform: uppercase !important;
font-size: 24px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
margin: 34px 0 12px !important;
}
.slmuc-legal-page .qodef-page-content-section h3 {
text-transform: uppercase !important;
font-size: 19px !important;
line-height: 1.3 !important;
margin: 26px 0 8px !important;
}
.slmuc-legal-page .qodef-page-content-section p,
.slmuc-legal-page .qodef-page-content-section li {
font-size: 16px !important;
line-height: 1.7;
}
.slmuc-legal-page .qodef-page-content-section ul,
.slmuc-legal-page .qodef-page-content-section ol {
padding-left: 1.4em;
margin: 0 0 1em;
}
.slmuc-legal-page .qodef-page-content-section li {
margin-bottom: 0.4em;
}
/* Lift the reCAPTCHA v3 badge above the Complianz "manage consent" button:
both float bottom-right and were overlapping. Keeps the badge visible (so no
extra reCAPTCHA legal notice is required). */
.grecaptcha-badge {
bottom: 90px !important;
}