/* ██████ █████ ███████ ███████ ██ ██ ██ ██ ██ ██ ██████ ███████ ███████ █████ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ███████ ███████ */ /* ── Breakpoints reference ─────────────────────────────── xs 480px sm 600px md 782px lg 920px xl 1226px xxl 1380px max 1546px 2xl 1920px ──────────────────────────────────────────────────────── */ :root{ --body-background: var(--wp--preset--color--white); --eco-badge-light-background: var(--wp--preset--color--brand); --eco-badge-dark-background: var(--wp--preset--color--dark); --header-height: 110px; --header-height-xs: 49px; --header-items-size: 49px; --logo-width-min: 100px; --logo-height: 110px; --logo-content: 150px; --logo-width-max: 300px; --block-bridge-min-height: 360px; --block-bridge-max-height: 500px; --banner-xs-min-height: 60vh; --banner-xs-max-height: 60vh; --banner-min-height: 90vh; --banner-max-height: 90vh; --global-gap: 10px; --global-radius: 0px; --nav-submenu-width: 320px; --nav-pannel-bg: var(--wp--preset--color--brand); --error: #dc3232; --btn-default-height: 52px; --btn-picto-size: 1em; --btn-picto-gap: var(--space-xs); --topbanner-min-height: 44px; --topbanner-max-height: var(--topbanner-min-height); --thumbnail: 150px; /* Largeurs et hauteur des blocks */ --block-min-height: 650px; /* Image dans la colonne */ --block-img-xl-width: 40%; --block-img-max-width: 35%; --img-max-height: 747px; /* Texte dans la colonne */ --block-text-xl-width: 60%; --block-text-max-width: 65%; /* Overide les couleurs du badge en version sombre */ --eco-badge-dark-background: var(--wp--preset--color--brand-dark-60); --shadow-color-rgb: 76 105 235; /* Ne pas modifier les valeurs en clamp */ --container-padding-x: clamp(16px, 3vw, 60px); --logo-width-fluid: clamp(var(--logo-width-min), 15vw, var(--logo-width-max)); --btn-default-ff: var(--font-titles); /* Si inutilisé, supprimer*/ --img-deco: url(../../../../uploads/2026/07/feuille-fixed.svg); --img-deco-height: 325px; --img-deco-width: 283px; --title-deco: url(../../../../uploads/2026/07/deco-fixed.svg); --title-deco-height: 123px; --title-deco-width: 56px; --img-deco-svg: path("M0 0h59.4l1.2 1c.5.3 1.6-.6 1.7-1h149.3l1.8 4.1c3 8.5-6.6 19.3-16.6 22.2-7 2-13.8 3.7-21.1 3.4l-17.3-.6a74 74 0 0 1-17-2.1l-23.1-6.2-18-5.5-6.2-1-.9-.4c-.2 0-.2.9 0 1h.7l7.8 5.3q8.2 5.5 15.3 12.4l6.6 6.5q6.3 5.8 11.8 12.6l7.4 9.3c1 1.3.8 2.4 3 2.6l9.7.6 7.2.5 22.1 2.4q9.7 1 18.7 4.4l20.8 7.9 18.4 8.6 13.5 9.6a61 61 0 0 1 12.2 11.3l6.5 8c1.5 1.9 3.3 3.9 4.2 6.2q2.8 7 3.8 14.5c.5 3.4-1.3 10.7-3.4 13.4-1.3 1.8-2.7 3.9-4.3 5.3-3.2 2.6-8 2.8-11.9 2.7a52 52 0 0 1-15.8-3.7c-9.7-3.6-18.4-8.3-27-14L212 136l-15.3-11.6L179 110l-13.5-11.4c1.7 5.7 4.4 9.6 6.7 14.3l4.8 12.5 5.2 22 .6 8.9c.2 3.5 1.4 7 2.3 10.4l4.6 18.9 4.2 21.6 2.5 15.8.7 11 .7 10.5.4 9.7-1 30.5a134 134 0 0 1-4.4 17.6l-2.4 4.9-6.8 9a21 21 0 0 1-20.2 8.6c-3.7-.4-8-3.3-9.5-6.4l-3.1-6.2q-3.7-7.2-4.2-15.4L146 280a96 96 0 0 1 2.2-16.6l3.2-13.5 2.7-13c.8-8 2.8-15.5 5.2-23l6-19q3.2-10 4.4-20.3l1.7-8.2-1.2-13.3c0-8.3-1-16.5-4-24.4l-3.2-8.6c-1.2-3.2-2-6.3-3.5-9.3l-4.6-9.4-3.2-6.2 1.1 9.4v14.6c.2 14-.4 27.4-3.3 41.1l-1.8 11.7a80 80 0 0 1-18 36.2c-4 4.1-14.6 10.3-19.5 10.6-9.1.5-15.5-2.7-18.3-11.5-2-6.4-2-13-1-19.6 2-14.3 4.4-28 9-41.7 3-8.6 7.6-15.8 12-23.6l3.3-8.2 2.8-7.7c1-2.9 1-5.8 2.3-8.8l8.6-20.2q0-4.3 1.6-8.5l-1.1-4a140 140 0 0 0-16.9-19.2c-7-6.4-13.5-12.8-21.4-18l-7.8-4.2a60 60 0 0 0-14-5.8l-2.1 1.7 3.5 4.2 10.9 20.8Q84 49 85 53.6l1.8 9.7L89 87.7q.8 8.8-.3 17.8c-.4 4.5-.5 8.8-2.3 13l-4 9a23 23 0 0 1-12.5 13c-4 1.5-9.2 1.2-12.8-1-9.7-6.2-11.8-19.1-13.3-30.4-1.3-9.9-.2-19.4.3-29.3L46 45A107 107 0 0 0 41 11.3l-2.8-5.8c-2.5-1-5.7-1.5-8.7-1.7L14.7 2.3 2.2 1.7C1.5 1.7.2.7 0 0m165.5 98.4-.3.3zm-.6-.1.2-.2-.2-.3-.3.3zm-.4-.8-.2.2zM92.2 13.8l.3-.3zm-.5-.5v-.2q-.9 0 0 .2"); --title-deco-svg: path("M51.6 58.5c-1.2-8.3-7-13.6-15.8-12.8 0-10 4.3-13.1 6.9-15.8 1.6-1.6.7-2.6 1.9-3.1s1.3-1.2 1.3-2 .6-.4.7-1.2c.2-.8 0-1 .2-1.8.1-.9-.1-.5-.4-1.4s0 0 .8-.8-.3-.5-1.6-1.6 0-.7-.6-.9-.6-.4-1.1-1.4 0-.5-.6-.5-1.6-.1-1.8-.6-.4-.7-1.4-.6-2.1.2-2.6-.4c-.5-.5 0 0-1.1 1-.9.7-3.5 2-5 7q.1-4.1.5-6.5c.7-5.6-.2-4-.6-5.8S30.3 7 30 5.7s-.4-.9-1.8-2.3-.3-.7-2-1-1-.4-1.4-1.1 0 0-1.8-.7L22 .3c-.8-.3-.7-.6-1.4.1s-1 .6-2.6-.1 0 0-1.6.8c-1.5.9 0 0-1.2 0s-.6.5-1.3 1.3-.7-.1-1.7.6 0 0-.4 1-1-.3-1.4.4c-.5.7 1 1.5-.9 1.5s0 0-.5.5 0 0 0 1.5l-.2 2.6c-.1 2.5 1.1 7.2 6.8 14.3-2.2-2.2-3-2-4.2-2.2-1.4-.2-1.3-.4-2.4-1s-1.4.4-2.2.7c-.8.4-1.6 0-2-.3-.3-.5-.3.5-.6 1.2s-1.4 0-2-.1q-.8 0-.4 1.7c.1 1-.5 1-1.5 1s0 .9.5 1.3 0 1.6-.6 1.6.1.5.7 1.1.3 1.6-.6 1.6 1.7 1 1.7 1 3.7 6.1 12.4 7.7a20 20 0 0 1 12.3 8.4c-9.3 4.9-9.2 13.9-1.9 25.2 9.8 15.2 28 47.5 31.5 49.9 0 0-3.5-55.3-4.9-65.1M44.9 56s-2.2 1.7-6 3.9q-1.6 1-4 1.9L28.8 64c2.1-1.8 16-7.9 16-7.9M34.7 33c2.3-6.6 4-8 4-8s-5.5 13-5.5 19.5c0 0-.4-6.2 1.5-11.5m-4.5 12.7S24.9 33.2 23 25.2c-1.8-8-2-12-2-12s8.6 29.4 9.2 32.5M12.3 33.6S20 38 24.1 42.3a38 38 0 0 1 4.5 5.3h-.1c-2.1-1.7-14-12.3-16.2-14m31.7 33s-2.5 1.2-8.2 2.4c-5.7 1.3-8.6 1.2-8.6 1.2 5.2-1.5 16.8-3.5 16.8-3.5m7.4 6.6s-1 1.2-4.7 3.5c-3.8 2.4-9.4 4.4-9.4 4.4 1.7-1.5 14-8 14-8m-9.5 18.4s3.3-.3 6.2-1.6-.5 2.6-6.2 1.6m2.5 8s4.6-2.3 6.4-4.3 1.2 3-6.4 4.2"); /*--bridge-bg*/ --block-bg: url(../../../../uploads/2026/07/parallax-min-scaled.webp); .is-style-light{ --b-heading: var(--wp--preset--color--brand-dark-20)!important; --b-heading-alt: var(--wp--preset--color--accent-1-dark-20)!important; --b-nav-hover: var(--wp--preset--color--brand-dark-50); --b-link: var(--wp--preset--color--brand-dark-20); --b-link-hover: var(--wp--preset--color--brand-dark-50); } .is-style-accent-1{ --b-btn-bg: var(--wp--preset--color--brand-dark-20); --b-btn-text-hover: var(--wp--preset--color--dark-dark-50); } .is-style-dark{ --b-btn-text: var(--wp--preset--color--dark-dark-50); --b-btn-text-hover: var(--wp--preset--color--dark-dark-50); } .is-style-brand{ --b-heading: var(--wp--preset--color--dark-dark-50); --b-text: var(--wp--preset--color--dark-dark-50); --b-link: var(--wp--preset--color--dark-dark-50); --b-nav: var(--wp--preset--color--dark-dark-50); --b-btn-secondary-outline: var(--wp--preset--color--dark-dark-50); --b-btn-secondary-text: var(--wp--preset--color--dark-dark-50); --b-btn-text: var(--wp--preset--color--dark-dark-50); --b-btn-text-hover: var(--wp--preset--color--dark-dark-50); --b-btn-secondary-text-hover: var(--wp--preset--color--dark-dark-50); --b-nav-hover: var(--wp--preset--color--text-dark-50); } .is-style-switcher-dark{ --b-btn-text-hover: var(--wp--preset--color--dark-dark-50); --b-btn-secondary-text-hover: var(--wp--preset--color--dark-dark-50); --b-btn-text: var(--wp--preset--color--brand-dark-50); } .is-style-switcher-brand{ --b-btn-text-hover: var(--wp--preset--color--dark-dark-50); --b-btn-secondary-text-hover: var(--wp--preset--color--dark-dark-50); --b-btn-text: var(--wp--preset--color--brand-dark-50); } /* Formulaire */ --cf7-accent: var(--wp--preset--color--brand); /*#8fae7c;*/ --cf7-accent-dark: var(--wp--preset--color--brand-dark-80); /*#6b8a5a;*/ --cf7-accent-darker: var(--wp--preset--color--brand-dark-90); /*#4f6b40;*/ --cf7-border: var(--wp--preset--color--brand-light-20); /*#d7e2d2;*/ --cf7-border-light: var(--wp--preset--color--brand-light-40); /*#eef2ea;*/ --cf7-border-soft: var(--wp--preset--color--brand-light-60); /* #e3e9de;*/ --cf7-bg-soft: var(--wp--preset--color--brand-light-80); /* #f4f7f1;*/ --cf7-text-muted : var(--wp--preset--color--text-light-50); /*#8a938a;*/ --cf7-bg-disabled: #f0f2ee; --cf7-radius: 6px; --cf7-radius-sm: 4px; /* ███████ ██ ███████ ██ ██ ███████ ██ ██ ███████ █████ ██████ ██ ██ ██ ███ ███ ██ ███ ██ ██ ██ ██ ██ ██ █████ ██ █████ ██ █ ██ █████ ██ █ ██ ██ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ███████ ███████ ███████ ██ ██ ███████ ██ ██ ██ █████ ██ ██ */ /* Override Elementor */ --e-global-typography-primary-font-family: var(--font-titles); --e-global-typography-primary-font-weight: 800; --e-global-typography-accent-font-family: var(--font-titles); --e-global-typography-accent-font-weight: 800; } .e-con:not([class*=is-style-]):not([class*=is-style-] *){ --b-heading: var(--wp--preset--color--brand-dark-20); --b-heading-alt: var(--wp--preset--color--accent-1-dark-20); --b-nav-hover: var(--wp--preset--color--brand-dark-50); --b-link: var(--wp--preset--color--brand-dark-20); --b-link-hover: var(--wp--preset--color--brand-dark-50); } /* ───────────────────────────────────────────────────── Resets des fichiers Elementor ──────────────────────────────────────────────────────── */ header#site-header.site-header{ padding-block-end: 0; padding-block-start: 0; padding-inline-start: 0; padding-inline-end:0; } body a{ color:unset; } .e-con[class*=is-style]{ [type=button], [type=submit], button{ color:inherit !important; border:1px solid inherit !important; } } [type=button], [type=submit], button{ color:inherit !important; border:1px solid inherit !important; } /* ───────────────────────────────────────────────────── Paramétrages du thème ──────────────────────────────────────────────────────── */ .eco-badge-container-light{ background-color: var(--body-background); } .bg, .bridge, .parallax{ --background-overlay: ""; &:not(.is-reverse){ > *{ @media (max-width: 1023px){ --flex-direction: column; } } } } .e-con.e-grid > .e-con-inner:has(.logo img) { padding-top: 0; padding-bottom: 0; } body{ background-color: var(--body-background); } main{ @media (max-width:782px) { padding-inline: var(--container-padding-x); } /* img:is([sizes=auto i],[sizes^="auto," i]){ contain-intrinsic-size:revert; }*/ } .e-con.e-parent{ .logo{ width: var(--logo-content); height: var(--logo-content); align-items: center; align-content: center; margin: 0 auto; background-color: var(--wp--preset--color--accent-1-light-40); img{ border-radius: 0; background-color: transparent; padding: var(--space-sm); } } } /* ───────────────────────────────────────────────────── Paramétrages du border radius du bandeau menu isboxed si topbar existant ──────────────────────────────────────────────────────── */ body:has(.site-topbar), body.has-topbar{ .bandeau.is-sticky-header.is-boxed{ border-radius: 0; } #banner.is-boxed{ border-top-left-radius: 0; border-top-right-radius: 0; .image-switcher, .image-switcher__item{ border-top-left-radius: 0; border-top-right-radius: 0; } } } body:has(.signature.is-boxed){ .site-footer.is-boxed{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .signature.is-boxed{ border-top-left-radius: 0; border-top-right-radius: 0; } } body.has-signature{ .site-footer.is-boxed{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .signature.is-boxed{ border-top-left-radius: 0; border-top-right-radius: 0; } } /* ───────────────────────────────────────────────────── Paramétrages de la signature ──────────────────────────────────────────────────────── */ .eco-badge-dark{ background-color: var(--eco-badge-dark-background); border: 1px solid var(--eco-badge-dark-background); box-shadow: 0 0 15px rgba(128 182 233, 0.1); } /* Topbanner en mode boxed */ .signature.is-boxed { border-top-left-radius:0; border-top-right-radius:0; } /* ───────────────────────────────────────────────────── Paramétrages de la top banner ──────────────────────────────────────────────────────── */ .site-topbar-inner { justify-content:center; gap: var(--space-xs); } /* Topbanner en mode boxed */ .site-topbar.is-boxed { border-bottom-left-radius:0; border-bottom-right-radius:0; } /* ───────────────────────────────────────────────────── Paramétrages du footer ──────────────────────────────────────────────────────── */ body footer.site-footer.is-boxed, .site-footer{ @media (max-width: 782px) { padding-top: var(--space-xl); } padding-inline: var(--container-padding-x); padding: var(--container-padding-x); } body footer.site-footer.is-boxed:not(.dynamic-footer){ overflow: visible; } /* Modifier l'ordre des colonnes de footer section */ .footer-contact-info{ order:1; } .footer-cta{ order:2; } .footer-social-wrap{ order:4; } .footer-hours{ order:3; } /* Alignement des textes */ .site-footer h3, .site-footer p{ @media (max-width: 919px) { text-align: center; } @media (min-width: 920px) { text-align: left; } } .footer-cta .btn{ min-width:230px; } /* Styles du logo footer */ .site-footer img { @media (max-width: 919px) { height: auto; margin: 0 auto; width: var(--logo-width-max); } @media (min-width: 920px) { height: auto; width: var(--logo-width-fluid); } } /* Styles du fallback logo footer */ .site-footer .mag-logo-text { font-family: var(--font-titles); font-size: var(--space-md); font-weight: 600; justify-content:center; } /* Taille des titres */ .footer-title{ @media (max-width: 919px) { font-size: calc(1 * var(--wp--preset--font-size--lg)); } @media (min-width: 920px) { font-size: var(--wp--preset--font-size--md); } } /* Taille des textes */ .site-footer p, .footer-address .adress, .footer-tel a, .footer-email a{ font-size: calc(0.9 * var(--wp--preset--font-size--xs)); @media (max-width: 919px) { justify-content: center; } } .site-footer .footer-tel, .site-footer .footer-email { display: flex; align-items: center; @media (max-width: 919px) { justify-content: center; } } .footer-tel .btn-wrap{ @media (max-width: 919px) { text-align: center; } .btn{ min-width:250px; } } /* Taille des icones */ .footer-contact-info { .footer-icon { width: 16px; height: 16px; svg { width: 16px; height: 16px; } } } .footer-brand{ @media (max-width: 919px) { gap: var(--space-md); flex-direction: column; margin-top: var(--space-xl); } @media (min-width: 920px) { gap: var(--space-md); justify-content: space-between; } } .footer-config-wrap { flex-grow: 0.8; @media (max-width: 919px) { flex-direction: column; } @media (min-width: 920px) { display: grid; grid-auto-flow: row; gap: var(--space-md); /* Par défaut : marque + 1 colonne optionnelle (2 colonnes) */ grid-template-columns: repeat(2, auto); /* 2 colonnes optionnelles présentes → 3 colonnes */ &:has(.footer-contact-info):has(.footer-cta):has(.footer-hours):not(:has(.footer-social-wrap)), &:has(.footer-contact-info):has(.footer-cta):has(.footer-social-wrap):not(:has(.footer-hours)), &:has(.footer-contact-info):has(.footer-hours):has(.footer-social-wrap):not(:has(.footer-cta)) { grid-template-columns: repeat(3, auto); } /* 3 colonnes optionnelles présentes → 4 colonnes (dès 920px, pas besoin d'un 2e breakpoint) */ &:has(.footer-contact-info):has(.footer-cta):has(.footer-hours):has(.footer-social-wrap) { grid-template-columns: repeat(4, auto); } } /* Si 4 colonnes deviennent trop serrées sur écran moyen, on peut les repasser à 2 lignes de 2 */ @media (min-width: 920px) and (max-width: 1224px) { &:has(.footer-contact-info):has(.footer-cta):has(.footer-hours):has(.footer-social-wrap) { grid-template-columns: repeat(2, auto); } } } /* les 4 colonnes s'empilent aussi .footer-brand .footer-config-wrap { grid-template-columns: 1fr; }*/ /* Colonnes dans le footer */ .footer-section{ display: flex; flex-direction: column; margin: 0 auto; gap: var(--space-xs); @media (max-width: 919px) { align-items:center; } @media (min-width: 920px) { align-items:flex-start; } } /* Styles des colonnes d'adresse */ .footer-address, .footer-tel, .footer-email, .social-links-wrap { gap: var(--global-gap); @media (max-width: 919px) { justify-content:center; } @media (min-width: 920px) { justify-content:flex-start; } } /* Styles de la colonne d'adresse */ .footer-address{ .footer-icon { margin-top: 6px; @media (max-width: 782px) { left: calc(-1 * var(--space-sm)); } } .adress { min-width: 0; width:auto; } } /* 100% de largeur sur les colonnes d'adresse et d'horaire */ .footer-section{ @media (max-width: 919px) { padding-block: var(--space-md); } width:100%; } /* Barre de footer */ .footer-bar { padding-block: var(--space-xs); #footer-navigation { text-align: center; padding: var(--space-xs) 0; } .footer-signature { justify-content: center; } } header #barre-menu { min-height: var(--header-height); } /* Réduire la taille des boutons header #barre-menu .header-elements-wrapper, footer .footer-config-wrap .footer-cta { .btn, .is-primary, .is-secondary { @media (max-width: 919px) { font-size: var(--wp--preset--font-size--sm); } @media (min-width: 920px) and (max-width: 1225px) { font-size: calc(0.8 * var(--btn-default-fz)); } } } */ /* Hauteurs */ header .site-banner { /*margin-top: calc(var(--header-height) - 2px);*/ @media (max-width: 1379px){ max-height: var(--banner-max-height); min-height: var(--banner-min-height); } @media (min-width: 1380px) and (max-width: 1545px){ max-height: calc(var(--banner-max-height) - 6vh); min-height: calc(var(--banner-max-height) - 6vh); } @media (min-width: 1546px){ max-height: calc(var(--banner-max-height) - (var(--banner-max-height)) / 4); min-height: calc(var(--banner-max-height) - (var(--banner-max-height)) / 4); } } /* Taille des boutons toggle */ .nav-toggle-open, .nav-toggle-close { color: var(--b-btn-text); background-color: var(--b-btn-bg); width: var(--header-items-size); height: var(--header-items-size); > svg { fill: var(--b-bg); stroke: var(--b-bg); } &:hover, &:focus { background-color: var(--b-btn-bg-hover); color: var(--b-btn-text-hover); } } .bandeau { .mag-logo-wrap { position: relative; } &.scrolled #barre-menu{ @media (max-width: 919px) { justify-content: space-between; } } #barre-menu { padding-inline: var(--container-padding-x); justify-content: space-around; @media (max-width: 919px) { gap: var(--global-gap); } @media (min-width: 920px) and (max-width: 1225px){ gap: calc(var(--global-gap) / 2); } @media (min-width: 1226px) { gap: var(--global-gap); } } #barre-menu .site-navigation-wrapper { @media (max-width: 1225px) { gap: var(--global-gap); } @media (min-width: 1226px) { gap: var(--space-sm); } .header-elements-wrapper { gap: var(--global-gap); .header-cta { gap: var(--global-gap); } } } .nav-menu, .menu-item > a { text-decoration: none; font-weight: 800; font-family: var(--font-titles); @media (max-width: 919px) { font-size: var(--wp--preset--font-size--sm); gap: var(--global-gap); } @media (min-width: 920px) and (max-width: 1225px) { font-size: calc(1 * var(--wp--preset--font-size--sm)); gap: 0; } @media (min-width: 1226px) and (max-width: 2559px){ font-size: calc(1 * var(--wp--preset--font-size--md)); gap: var(--space-xs); } @media (min-width: 2560px) { font-size: var(--wp--preset--font-size--lg); gap: var(--space-xs); } } .sub-menu { gap: var(--global-gap); .menu-item-has-children & { min-width: var(--nav-submenu-width); } } #site-navigation.is-open { align-items: center; .nav-menu, .sub-menu { gap: var(--global-gap); } .menu-item > a { font-size: var(--wp--preset--font-size--lg); padding: 0; text-align: center; justify-content: center; } } } body header .site-banner { .banner-content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; @media (max-width: 782px) { width: 100%; padding-left: var(--space-md); padding-top: 0; padding-right: var(--space-md); padding-bottom: var(--space-md); position: absolute; text-align: center; gap: var(--space-sm); } @media (min-width: 783px) { /*padding: var(--space-xxl) var(--space-md) 0 var(--space-md);*/ position: absolute; gap: var(--space-sm); } .diapo-cta-buttons { display: flex; flex-wrap: wrap; gap: var(--global-gap); @media (max-width: 782px) { justify-content: center; } @media (min-width: 783px) { justify-content: center; } .btn{ min-width:200px; display: flex; justify-content: center; } } .banner-diapo-text { @media (max-width: 782px) { font-size: var(--wp--preset--font-size--sm); } @media (min-width: 783px) { font-size: var(--wp--preset--font-size--sm); } } } } header .site-banner.has-parallax { .image-switcher__item img { @media (min-width: 783px) { mask-image: linear-gradient(to bottom, black 75%, transparent 90%); -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 90%); } } } header .site-banner .banner-content { h1{ font-weight: 400; font-size: var(--wp--preset--font-size--xl); line-height: normal; font-family: var(--font-titles); span { font-family: var(--font-body); font-size: var(--wp--preset--font-size--xxl); } } .banner-title { @media (max-width: 782px) { align-items: center; text-align: center; } @media (min-width: 783px) { align-items: center; text-align: center; } } .banner-cta { margin-top: var(--global-gap); @media (max-width: 782px) { justify-content: center; } @media (min-width: 783px) { justify-content: flex-start; } } .banner-diapo-text, .diapo-cta-container{ @media (max-width: 782px) { margin:0 auto; } @media (min-width: 783px) { margin:0 auto; } } .diapo-cta-container{ padding-top: var(--space-xs); } } header { .mag-logo-wrap { height: var(--header-height); width: var(--logo-width-fluid); } .site-brand-text{ font-family: var(--font-titles); font-size: var(--wp--preset--font-size--md); font-weight: 600; } .mag-logo-wrap .mag-logo-wrap__default { width: var(--logo-width-fluid); } .mag-logo-wrap .mag-logo-wrap__scroll { height: var(--logo-height); padding: calc(var(--space-md) - var(--space-xs)) 0; .mag-logo--scroll{ width: auto; height: calc(var(--logo-height) - calc(calc(var(--space-md) - var(--space-xs))) * 2); } } .bandeau.is-sticky-header.scrolled { .mag-logo-wrap__scroll { height: var(--logo-height); .mag-logo--scroll{ width: auto; height: var(--logo-height); padding: calc(var(--space-md) - var(--space-xs)) 0; } } } } .header-social-wrap{ flex-direction: column; .social-links-wrap { flex-direction: row; } } body header#site-header.site-header.is-boxed { @media (min-width: 783px) { .banner-content, .image-switcher__nav { padding-inline: var(--container-padding-x); } #barre-menu { padding-inline: var(--container-padding-x); } } @media (min-width: 920px) { margin-top: var(--space-md); } } @media (max-width: 900px) { body:not(header, footer) .e-grid.e-con-boxed > .e-con-inner { grid-template-columns: 1fr; } .e-con-full.e-flex:has(.elementor-widget-button) { flex-wrap: wrap; } .e-grid:has(.elementor-widget-tm-accordion-card), .e-con.e-flex:has(.elementor-widget-tm-accordion-card) { align-items: start; } } body{ &.page-id-48, &.page-id-65, &.page-id-355, &.page-id-363, &.page-id-371{ header{ .site-banner { @media (max-width: 1379px){ max-height: calc(var(--banner-max-height) / 1.6); min-height: calc(var(--banner-min-height) / 1.6); } @media (min-width: 1380px){ max-height: calc(var(--banner-max-height) / 1.6); min-height: calc(var(--banner-min-height) / 1.6); } & .banner-content { @media (min-width: 783px) { padding-top: calc(var(--space-xxl) * 1); } } } @media (min-width: 782px) { .mag-logo-wrap { height: calc(var(--header-height) / 2); width: calc(var(--logo-width-fluid) / 2); } .bandeau:not(.scrolled) { & .site-logo-wrapper { @media (min-width: 920px) { top: calc(1.6 * var(--space-xl)); } } } } } } } /* Image switcher */ .image-switcher__nav { position: absolute; display: flex; justify-content: center; padding-block: 1rem; width: 100%; left: 0; bottom: 3vh; z-index: 3; } .image-switcher__dots { gap: 1rem; } .image-switcher__dot { width: 1rem; height: 1rem; border-radius: 50%; } /* Picto réseaux sociaux */ .header-social-wrap{ .social-links-wrap { justify-content: space-around; gap: var(--global-gap); } } .elementor-button span, .elementor-button a, .elementor-button .elementor-button-text, .card-link.is-style-filled, .card-link.is-style-secondary{ font-family: var(--font-titles); font-weight: 800; } /* ───────────────────────────────────────────────────── Classe d'animation ──────────────────────────────────────────────────────── */ .reveal-on-scroll { opacity: 0; transform: translateY(100px); transition: opacity 0.6s ease-out 0.30s, transform 0.6s ease-out 0.30s; } .reveal-on-scroll.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal-on-scroll { transition: none; opacity: 1; transform: none; } } /* ██████ ██ ██████ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ██ ██ █████ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ███████ ██████ ██████ ██ ██ */ .text-left, .text-right{ min-height: var(--block-min-height); } /* Gestion du bridge */ .e-con.bridge{ @media (max-width: 1545px){ gap: var(--space-sm); min-height: var(--block-bridge-min-height); } @media (min-width: 1546px){ gap: var(--space-md); min-height: var(--block-bridge-max-height); } overflow: hidden; position: relative; border-radius: 0; align-items: center; justify-content: center; &::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: var(--b-bg-alt); mask-image: var(--bridge-bg); mask-repeat: repeat; mask-size: calc(2 * var(--space-xl)); opacity: .3; } > * { position: relative; z-index: 1; text-align: center;} .text{ @media (max-width: 919px){ width: 100%; } @media (min-width: 920px) and (max-width: 1023px){ width: 80%; } @media (min-width: 1226px) and (max-width: 1545px){ width: var(--block-text-xl-width, 60%)!important; } @media (min-width: 1546px){ width: var(--block-text-max-width, 65%)!important; } @media (min-width: 2560px){ padding-right: var(--space-xl); } } h2, h2.elementor-heading-title { text-align: center; } .e-con { justify-content: center; } } /* Formulaires */ .wpcf7-form { --card-shadow: none; background-color: var(--wp--preset--color--accent-1-light-80); margin: var(--space-sm) auto; padding: calc(var(--space-md) - (var(--space-xs) / 2)); border-radius: var(--card-radius); box-shadow: var(--card-shadow); font-family: var(--font-body); label { display: block; margin-bottom: var(--space-xs); font-weight: 800; font-size: calc(var(--wp--preset--font-size--xs) - 0.2rem); color: var(--wp--preset--color--text); } input[type="text"], input[type="email"], input[type="tel"], select, textarea { --global-radius: 4px; padding: calc(var(--space-xs) / 2) calc(var(--space-sm) / 2); margin-top: calc(var(--space-xs) / 2); min-height: 50px; /*var(--space-md);*/ font-size: var(--wp--preset--font-size--xs); border: 1px solid var(--wp--preset--color--text); border-radius: var(--global-radius); background-color: var(--wp--preset--color--white); &:focus { border-color: var(--wp--preset--color--black); } } textarea { max-height: var(--space-xl); } input[type="submit"] { font-family:var(--font-titles); font-size: var(--wp--preset--font-size--md); line-height:0; width: 100%; cursor: pointer; transition: background-color 0.3s ease, outline 0.2s ease, box-shadow 0.2s ease; } } /* Messages d'erreur formulaire */ .wpcf7-not-valid-tip { color: var(--error); font-size: 0.9em; font-weight: normal; display: block; margin-top: var(--space-xs); } /* Exceptions formulaires */ .wpcf7-response-output{ color: var(--b-text); background-color: transparent!important; border:none!important; } .wpcf7 form.sent .wpcf7-response-output{ --b-heading: var(--wp--preset--color--brand-dark-50); color: var(--b-heading)!important; } .mentions{ /* 1. On retire la puce par défaut et on gère l'alignement */ .wp-block-list, ul { list-style-type: none; padding-left: 0; /* Aligne la liste avec le reste du texte */ color: var(--b-text)!important; } /* 2. On configure le conteneur du texte pour le décoller de la puce */ .wp-block-list li, ul li { position: relative; margin-left: 1.5em; /* Espace pour laisser la puce s'afficher */ margin-bottom: 0.5em; /* Espacement léger entre les éléments */ color: var(--b-text)!important; &::before{ content: "→"; /* Le symbole de votre choix (ex: "•", "→", "■", ou "" pour une icône) */ position: absolute; left: -1.5em; top: 0; color: var(--b-heading-alt); /* La couleur de la puce */ font-weight: bold; } } } /* ███████ ████████ ██ ██ ██ ███████ ███████ ██ ██ ██ ██ ██ ██ ██ ███████ ██ ████ ██ █████ ███████ ██ ██ ██ ██ ██ ██ ███████ ██ ██ ███████ ███████ ███████ */ main{ margin:0 auto; padding-inline: 0; } h1, h2, h3, h4, h5, h6{ font-weight: 800; } h3{ font-size: calc(1 * var(--wp--preset--font-size--md)); } .bandeau:not(.scrolled){ background-color: transparent; } /* Mettre les classes override ici */ @media (max-width: 781px) { .bandeau:not(.scrolled){ .site-logo-wrapper{ .mag-logo-wrap.has-mobile-logo{ .mag-logo-wrap__scroll{ filter:invert(1) brightness(100)!important; } } } } } @media (min-width: 782px) { .bandeau:not(.scrolled){ .site-logo-wrapper{ position:absolute; left: 50%; @media (max-width: 919px) { top: var(--space-xxl); } @media (min-width: 920px) { top: calc(1.5 * var(--space-xxl)); } transform: translateX(-50%); .mag-logo-wrap__default{ position:relative; .mag-logo.mag-logo--default{ position:absolute; will-change: transform; } } } } .bandeau.scrolled { &.is-style-switcher-brand{ --b-heading: var(--wp--preset--color--dark-dark-50); --b-text: var(--wp--preset--color--dark-dark-50); --b-link: var(--wp--preset--color--dark-dark-50); --b-nav: var(--wp--preset--color--dark-dark-50); --b-btn-secondary-outline: var(--wp--preset--color--dark-dark-50); --b-btn-secondary-text: var(--wp--preset--color--dark-dark-50); --b-btn-text: var(--wp--preset--color--dark-dark-50); --b-btn-text-hover: var(--wp--preset--color--dark-dark-50); --b-btn-secondary-text-hover: var(--wp--preset--color--dark-dark-50); --b-nav-hover: var(--wp--preset--color--text-dark-50); } .site-logo-wrapper{ .mag-logo-wrap__default{ .mag-logo.mag-logo--default{ position: absolute; top: calc(-3 * var(--space-xxl)); } } } } } body header .site-banner { & .banner-content { @media (max-width: 782px) { padding-top: var(--topbanner-min-height); } @media (min-width: 783px) { padding-top: calc(var(--space-xxl) * 2.6); } } } .bandeau { .nav-menu, .menu-item > a { padding: var(--btn-default-pv, var(--space-xs)) var(--btn-default-ph, var(--space-md))!important; border-radius: 0; background-color: var(--wp--preset--color--transparent); &:hover{ background-color: var(--wp--preset--color--transparent); } } .menu-item { padding: var(--btn-default-pv, var(--space-xs)) 0 !important; a{ border-bottom: solid 3px var(--wp--preset--color--transparent); &:hover{ border-bottom: solid 3px var(--wp--preset--color--white); } } } } .elementor-button, .social-link, .btn, .wpcf7-response-output, .wpcf7-submit{ font-weight: 800; } #menu-footer{ font-family: var(--font-titles); font-weight:800; display:flex; flex-direction: row; gap: var(--space-sm); justify-content: center; } .bridge{ position:relative; overflow:hidden; @media (max-width: 782px) { min-height: 600px; } @media (min-width: 783px) { min-height: var(--block-bridge-min-height); max-height: var(--block-bridge-max-height); } .e-con-inner{ max-width: 100%!important; width: 100%!important; } .elementor-widget:not(.elementor-widget-image){ max-width: var(--content-narrow)!important; margin:0 auto; } h2{ font-size: var(--wp--preset--font-size--xxl); } .elementor-widget-image.bg{ position: absolute!important; z-index: -1; background-size:cover; border-radius: 0; @media (max-width: 782px) { min-height: 600px; } @media (min-width: 783px) { min-height: var(--block-bridge-min-height); } img{ @media (max-width: 782px) { min-height: 600px; } @media (min-width: 783px) { min-height: var(--block-bridge-min-height); } } } } /* ---------- Forme "deco" ---------- */ .deco { width: 56.4px; height: 123.6px; clip-path: var(--img-deco-svg); } /* ---------- Forme "feuille" ---------- */ .feuille { width: 283px; height: 325px; clip-path: var(--title-deco-svg); } .img-deco:not(.img-broken){ position:relative; img{ background-color:transparent; } /* img { @media (max-width: 1225px){ mask-position: 240% 160%, center; } @media (min-width: 1226px) and (max-width: 2559.98px){ mask-position: 180% 160%, center; } @media (min-width: 2560px){ mask-position: 120% 160%, center; } }*/ &::after{ position:absolute; content:""; } } .bg{ &::before{ content: var(--background-overlay); width: 100%; height: 100%; clip-path: var(--img-deco-svg); background-repeat: no-repeat; background-position: top; background-size: cover; top: 0; left: 40%; } } .is-style-accent-1.bg{ &::before{ background-color: var(--wp--preset--color--brand-dark-10); } } .is-style-light.bg{ &::before{ background-color: var(--wp--preset--color--brand); opacity:.5; } } .is-style-brand.bg{ &::before{ background-color: var(--wp--preset--color--white); opacity:.5; } } .elementor-widget-heading.title{ position:relative; h2{ @media (max-width: 1545px) { font-size: var(--wp--preset--font-size--xl); } @media (min-width: 1546px) { font-size: var(--wp--preset--font-size--xxl); } &::before{ content: ""; position: absolute; width: 283px; height: 325px; clip-path: var(--title-deco-svg); background-color: var(--wp--preset--color--brand); top: 50%; left: 0; opacity: .5; z-index: -1; } } } .is-style-brand.lighten{ --b-bg: var(--wp--preset--color--brand-light-50); } .is-style-light{ .elementor-widget-tm-flexible-card{ .tm-card-item.card-theme-default.card-style-default{ border-radius:0; } } } .elementor-widget-tm-flexible-card{ &.team{ .tm-card-item{ gap: var(--space-xs)!important; } h3{ font-size: calc(0.8 * var(--wp--preset--font-size--lg)); } .card-title span{ display:block; font-size: calc(1 * var(--wp--preset--font-size--xl)); margin-block-end:1rem; } } h3{ font-size: calc(1 * var(--wp--preset--font-size--md)); } .card-title span{ display:block; } } .flex-dir-row .elementor-widget-tm-flexible-card{ overflow:visible; .tm-card-item{ padding:0; &:hover{ box-shadow: none; } @media (max-width: 782px) { flex-direction: column; } @media (min-width: 783px) { gap: var(--space-lg); } .card-image{ @media (max-width: 782px) { width: var(--thumbnail); height: var(--thumbnail); } @media (min-width: 783px) { width: calc(var(--thumbnail) * 2); height: auto; } } } } .center.elementor-widget-tm-flexible-card{ .tm-card-item{ text-align: center; display: flex; align-items: center; .card-image{ margin: 0 auto; width: var(--thumbnail); } } } .elementor-button, .social-link, .btn, .wpcf7-response-output, .wpcf7-submit{ @media (max-width: 782px) { --btn-default-fz: calc(1.4 * var(--wp--preset--font-size--md)); } } .col-picto{ gap: var(--space-sm); } /* =========================================================== Formulaire compact =========================================================== */ .wpcf7-form { max-width: 860px; margin: 0 auto; } .wpcf7-form h3 { margin-bottom: 20px; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border: solid 2px #ffb900 !important; color: var(--b-text); margin: 0; height: max-content; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="number"], .wpcf7-form input[type="date"], .wpcf7-form select, .wpcf7-form textarea { width: 100%; padding: 8px 10px; margin-top: 4px; border-radius: var(--cf7-radius-sm); box-sizing: border-box; } .wpcf7-form input[type="submit"] { padding: 10px 28px; border-radius: var(--cf7-radius-sm); cursor: pointer; } /* Radios en ligne */ .wpcf7-radio .wpcf7-list-item { display: inline-block; margin-right: 20px; font-weight: 400; } .wpcf7-list-item.first.last{ margin-left:0; } /* =========================================================== Utilitaire : ligne flex de champs (remplace .cf7-row et .cf7-row-uneven, qui étaient identiques) =========================================================== */ .cf7-row, .cf7-row-uneven { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; } .cf7-row > label { flex: 1 1 200px; margin-bottom: 0; } /* =========================================================== Utilitaire : label étroit / large (remplace les 2 versions dupliquées dans .cf7-row-uneven et .cf7-subrow) =========================================================== */ .cf7-row-uneven > label.cf7-narrow, .cf7-subrow > label.cf7-narrow { flex: 0 1 180px; margin-bottom: 0; } .cf7-row-uneven > label.cf7-wide, .cf7-subrow > label.cf7-wide { flex: 1 1 260px; margin-bottom: 0; } /* le subrow garde son propre gap plus resserré */ .cf7-subrow { display: flex; gap: 14px; margin-bottom: 14px; } .cf7-subrow > label { flex: 1 1 0; margin-bottom: 0; min-width: 0; } .cf7-subrow > label.cf7-narrow { flex: 0 1 110px; } .cf7-subrow > label.cf7-wide { flex: 1 1 auto; } /* =========================================================== Fil d'Ariane =========================================================== */ .cf7-steps { display: flex; justify-content: space-between; max-width: 640px; margin: 0 auto 36px; position: relative; } .cf7-steps::before { content: ""; position: absolute; top: 18px; left: 8%; right: 8%; height: 2px; background: var(--cf7-border); z-index: 0; } .cf7-step { position: relative; z-index: 1; text-align: center; flex: 1; } .cf7-step-circle { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--cf7-accent); background: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; font-weight: 600; color: var(--cf7-accent); } .cf7-step.is-active .cf7-step-circle, .cf7-step.is-done .cf7-step-circle { background: var(--cf7-accent); color: #fff; } .cf7-step-label { font-size: 0.85em; color: var(--cf7-accent-dark); } /* =========================================================== Planning =========================================================== */ .cf7-planning { display: grid; border: 1px solid var(--cf7-border); border-radius: var(--cf7-radius); overflow: hidden; margin-bottom: 20px; } .cf7-planning-row { display: grid; grid-template-columns: 140px 1fr 1fr; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--cf7-border-light); gap: var(--space-sm); } .cf7-planning-row:last-child { border-bottom: none; } .cf7-planning-head { background: var(--cf7-bg-soft); font-size: 0.8em; font-weight: 600; color: var(--cf7-accent-dark); text-transform: uppercase; letter-spacing: .03em; } .cf7-planning-head span:first-child { visibility: hidden; } .cf7-planning-day { margin-top: var(--space-xs); font-weight: 600; display: flex; align-items: center; gap: var(--space-xs); } .cf7-planning-day .wpcf7-list-item { display: flex; margin: 0 0 0 1em; line-height: 0; gap: var(--space-xs); align-content: center; align-items: center; } .cf7-time-wrap { margin: 0; } .cf7-time { width: 100%; max-width: 130px; padding: 6px 8px; border-radius: var(--cf7-radius-sm); box-sizing: border-box; } /* Grise visuellement les horaires quand le jour n'est pas coché */ .cf7-planning-row:has(input[type="checkbox"]:not(:checked)) .cf7-time-wrap { opacity: 0.35; pointer-events: none; } .cf7-planning-copy { padding: 4px 14px 12px; background: var(--cf7-bg-soft); border-bottom: 1px solid var(--cf7-border-light); } .cf7-planning-copy button { background: none; border: none; color: var(--cf7-accent-dark); font-size: 0.82em; font-weight: 600; cursor: pointer; padding: 4px 0; text-decoration: underline; } .cf7-planning-copy button:hover { color: var(--cf7-accent-darker); } @media (max-width: 480px) { .cf7-planning-row { grid-template-columns: 100px 1fr 1fr; gap: 6px; padding: 8px; } .cf7-time { max-width: 100%; } } /* =========================================================== Colonnes Premier / Second parent =========================================================== */ .cf7-parents-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-bottom: 10px; } .cf7-parents-grid > div { min-width: 0; /* évite les débordements sur mobile */ } .cf7-parent-col-1 { border-right: 1px solid var(--cf7-border-soft); padding-right: 40px; } .cf7-parents-grid h4 { color: var(--cf7-accent-dark); font-size: calc(1 * var(--wp--preset--font-size--sm)); /*1em;*/ text-transform: uppercase; letter-spacing: .03em; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--cf7-accent); } /* Séparateur discret entre sous-sections */ .cf7-divider { border: none; border-top: 1px dashed var(--cf7-border-soft); margin: 18px 0; } /* Responsive : les 2 colonnes passent en 1 sur mobile */ @media (max-width: 700px) { .cf7-parents-grid { grid-template-columns: 1fr; gap: 0; } .cf7-parent-col-1 { border-right: none; padding-right: 0; border-bottom: 1px solid var(--cf7-border-soft); padding-bottom: 24px; margin-bottom: 24px; } .cf7-subrow { flex-wrap: wrap; } } /* =========================================================== Utilitaire : encadré "callout" (remplace le style dupliqué de .cf7-same-address, .cf7-single-parent et .cf7-consent) =========================================================== */ .cf7-callout { display: block; background: var(--cf7-bg-soft); border: 1px solid var(--cf7-border); border-radius: var(--cf7-radius); padding: 10px 14px; cursor: pointer; } .cf7-callout input[type="checkbox"] { accent-color: var(--cf7-accent); margin-right: 6px; vertical-align: middle; } .cf7-same-address { margin-bottom: 18px !important; font-weight: 400 !important; font-size: 0.9em; } .cf7-single-parent { margin-bottom: 24px !important; font-weight: 400 !important; font-size: 0.9em; } .cf7-consent { display: flex; align-items: flex-start; gap: 10px; font-weight: 400 !important; font-size: 0.9em; line-height: 1.5; padding: 14px 16px; margin: 20px 0 !important; } .cf7-consent input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--cf7-accent); cursor: pointer; } .cf7-consent a { color: var(--cf7-accent-dark); font-weight: 600; text-decoration: underline; } /* État verrouillé : champs grisés visuellement (mais toujours soumis) */ .cf7-address-block-2.is-locked input, .cf7-address-block-2.is-locked select { background: var(--cf7-bg-disabled); color: var(--cf7-text-muted); pointer-events: none; } /* Mode parent unique : la grille repasse en 1 colonne pleine largeur */ .cf7-parents-grid.is-single-parent { grid-template-columns: 1fr; } .cf7-parents-grid.is-single-parent .cf7-parent-col-1 { border-right: none; padding-right: 0; max-width: 640px; } .cf7-parents-grid.is-single-parent .cf7-parent-col-2 { display: none; } /* =========================================================== Confirmation d'envoi =========================================================== */ .wpcf7-form[data-status="mail-sent"] > *:not(.wpcf7-response-output) { display: none !important; } .wpcf7-form[data-status="mail-sent"] .wpcf7-response-output { display: block; text-align: center; font-size: 1.05em; padding: 32px 24px; background: var(--cf7-bg-soft); border: 1px solid var(--cf7-border); border-radius: var(--cf7-radius); color: var(--cf7-accent-darker); margin: 0; } .wpcf7-response-output:not(.is-secondary):not(.has-gradient):hover{ border: solid 2px var(--error) !important; color: var(--b-text); margin: 0; height: max-content; }