/* ===== Plugin accessibilité Joomla (ba-accessibility) ===== */ body { hyphens: none !important; -webkit-hyphens: none !important; -ms-hyphens: none !important; } :root{ --ba-awidth:25em; --ba-abutton-size:6.4em; --ba-aradius: .6em; --ba-abg: #eff5ff; --ba-acolor: #37446a; --ba-aborder: #fff; --ba-abox-shadow: -1px -1px 0 0 rgba(0,0,0,.2), 1px 1px 0 0 rgba(255,255,255,.8); --ba-aprimary: #007aff; --ba-aprimary-shadow: rgba(0, 122, 255, 0.5); } @font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: 400; src: url('../fonts/opendyslexic/OpenDyslexic-Regular.woff2') format('woff2'), url('../fonts/opendyslexic/OpenDyslexic-Regular.woff') format('woff'); font-display: swap; } .ba__accessibility-dark-mode{ --ba-abg: #242a35; --ba-acolor: #fff; --ba-aborder: rgba(127, 149, 187, 0.31); --ba-abox-shadow: -1px -1px 0 0 rgba(0,0,0,.3), 1px 1px 0 0 rgba(255,255,255,.2); } .ba__accessibility{display:flex;position:fixed; z-index:999999;left:auto;right:15px;top:30px;bottom: 30px;font-size: 1rem; -webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none} .ba__accessibility *{box-sizing:border-box; font-size: inherit;} .ba__accessibility svg{max-width: 100%; max-height: 100%; height: auto; display: block;} .ba__accessibility-container{background: var(--ba-abg); color: var(--ba-acolor); border-radius:var(--ba-aradius); border: 1px solid var(--ba-aborder); box-shadow:0 0 2em rgba(29, 81, 164, 0.35);overflow:hidden; padding: .7em; display: block; width:var(--ba-awidth); height:100%; position: absolute; left: auto; right:calc(var(--ba-awidth) * -1.5); top: 0; transition: left .5s ease .1s, right .5s ease .1s;} .ba__accessibility-body{overflow: auto; display: block;width: 100%; height: calc(100% - 3.2em);} .ba__accessibility-body > *{display: flex; flex-wrap: wrap; border-radius:var(--ba-aradius); background: rgba(14, 36, 89, 0.1);box-shadow:var(--ba-abox-shadow); margin:.5em .2em .2em; padding: .5em;} .ba__accessibility-body > * > :only-child{display: none !important;} .ba__accessibility-body > * > :first-child{margin-top:0;} .ba__accessibility-body > * > .ba__accessibility-title{display: block; width: 100%;font-weight:500;font-size: 1.2em;padding: 0 .3em .2em;} .ba__accessibility [class*="-button"], .ba__accessibility [class$="-slider"], .ba__accessibility [class*="-color"]{width:calc(33.33% - .6em); height: var(--ba-abutton-size); border-radius:var(--ba-aradius); display: flex; justify-content: center;background: rgba(255, 255, 255, 0.2); margin: .3em; padding: .5em; flex-direction:column; text-align: center; cursor: pointer;border: 1px solid var(--ba-aborder); box-shadow: 0 0 2px rgba(0,0,0,.3);} .ba__accessibility [class*="-button"] :last-child, .ba__accessibility [class$="-slider"] label, .ba__accessibility [class*="-color"] label{display: block; width: 100%; font-size:.8em;font-style: normal;text-transform: capitalize; margin: 0;} .ba__accessibility [class$="-slider"] label, .ba__accessibility [class*="-color"] label{width: 12em;display: flex;align-items: center; padding:0 .5em;} .ba__accessibility [class*="-button"] svg{width: auto; height:2em;} .ba__accessibility [class*="-button"]:hover{box-shadow:0 0 1em var(--ba-aprimary-shadow);} .ba__accessibility [class$="-slider"], .ba__accessibility [class*="-color"]{width:calc(100% - .5em); height: 3.6em; text-align: left;flex-direction: row; padding: 0;} .ba__accessibility [class$="-slider"] svg{height:3em;} .ba__accessibility .ba__accessibility-header{display: flex; justify-content: space-between; align-items: center;} .ba__accessibility .ba__accessibility-header > *, .ba__accessibility .ba__accessibility-header > *:hover{background: none !important; border: 0; box-shadow: none; width: 48px; height: 48px; padding: 0; margin: 0; font-size: 1.2em;display: flex; align-items: center; color: inherit !important; position: relative;} .ba__accessibility .ba__accessibility-header > * i{display: none !important; position: absolute; left:50%; top:0; z-index: 5; background: rgba(110, 123, 157, 0.3);color: var(--ba-acolor); padding: .2em .5em; border-radius: var(--ba-aradius);width:auto !important;font-size: .6em !important;transform: translate(-50%, -45%);white-space: nowrap;} .ba__accessibility .ba__accessibility-header > .ba__accessibility-logo-button{order: -1;} .ba__accessibility .ba__accessibility-header > .ba__accessibility-title{width: 100%;padding: 0 .3em;font-weight: 600;text-transform: uppercase;} .ba__accessibility > .ba__accessibility-action-button{background:var(--ba-aprimary); border-radius: 50%;display: flex;justify-content: center;align-items: center;color: #fff; fill:currentColor; border: 0;width: 4.3em;height: 4.3em;box-shadow: 0 0 2em rgba(0, 0, 0, .3); position: relative;} .ba__accessibility > .ba__accessibility-action-button svg{height: 3em;} .ba__accessibility .ba__accessibility-header .ba__accessibility-action-button:hover{color:#c61a1a !important;} .ba__accessibility .ba__accessibility-reset-button:hover{color: var(--ba-aprimary) !important;} .ba__accessibility .ba__accessibility-reset-button > svg, .ba__accessibility .ba__accessibility-dark-mode-button > svg{width: 1.1em; height:1.1em;} .ba__accessibility .ba__accessibility-reset-button:hover > i, .ba__accessibility .ba__accessibility-dark-mode-button:hover > i, .ba__accessibility .ba__accessibility-action-button:hover > i{display: block !important;} .ba__accessibility-open .ba__accessibility-container{left: auto; right: 0;} .ba__accessibility-open > [class*="-button"]{display: none !important;} .ba__accessibility-slider-body > div{position: static; display: flex;align-items: center;} .ba__accessibility-slider-body > div > i{position:relative;right:0;top:0;left: auto; background:rgba(95, 118, 153, 0.2);display: block;font-size: .6em;padding:.3em .5em;border-radius:1em;line-height: 1;width:8em;text-align: center;font-weight: bold;color:var(--ba-acolor); box-shadow: 1px 1px 0 rgba(255,255,255,.3),-1px -1px 0 rgba(0,0,0,.2);} .ba__accessibility-slider-body[data-enable]> div > i{background:var(--ba-aprimary);color:#fff;} .ba__accessibility-slider-body{display: flex; align-items: center; position: relative;} .ba__accessibility-slider-body > i[class*="-button"]{width:3em; height:3em; padding: .3em 0;background: none;border: 0;box-shadow: none !important;} .ba__accessibility-colour-body{display: flex; align-items: center; position: relative; padding-right: .5em;} .ba__accessibility-colour-body > i[class*="-button"]{width:1.5em; height:1.5em; display: block;border-radius: 50%;margin: 0 3px 0 0; position: relative;} .ba__accessibility-colour-body > .ba__accessibility-active::before, .ba__accessibility-colour-body > .selected::before{position: absolute; left:9%; top:10%; width:80%; height:80%;content: '';z-index: 3; border-radius: 50%; border: 2px solid #fff; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%234AF90B' stroke-width='2' d='m5 12l5 5L20 7'/%3E%3C/svg%3E");} .ba__accessibility-range-input{width:100%;height:1.5em;padding:0 .2em;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border: 0; outline: 0; box-shadow:none !important; border-radius: 1em; margin:.3em 0 0; display: none;} .ba__accessibility-range-input:focus{border: 0; outline: 0 none;} .ba__accessibility-range-input:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25em var(--ba-aprimary-shadow)} .ba__accessibility-range-input:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25em var(--ba-aprimary-shadow)} .ba__accessibility-range-input::-moz-focus-outer{border:0} .ba__accessibility-range-input::-webkit-slider-thumb{width:1em;height:1em;margin-top:-.25em;-webkit-appearance:none;appearance:none;background-color:var(--ba-aprimary);border:0;border-radius:1em;cursor:-webkit-grab;cursor:grab;} .ba__accessibility-range-input::-webkit-slider-thumb:active{-webkit-filter: sepia(30%);filter: sepia(30%);} .ba__accessibility-range-input::-webkit-slider-runnable-track{width:100%;height:.5em;color:transparent;cursor:pointer;border:1px solid rgba(150,150,150,.15);border-radius:1em;background:linear-gradient(0deg,rgba(255, 255, 255, 0.2) 0%, rgba(56, 66, 88, 0.2) 100%);} .ba__accessibility-range-input::-moz-range-thumb{width:1em;height:1em;-moz-appearance:none;appearance:none;background-color:var(--ba-aprimary);border:0;border-radius:1em;cursor:grab;} .ba__accessibility-range-input::-moz-range-thumb:active{-webkit-filter: sepia(30%);filter: sepia(30%);} .ba__accessibility-range-input::-moz-range-track{width:100%;height:.5em;color:transparent;cursor:pointer;border:1px solid rgba(150,150,150,.15);border-radius:1em;background:linear-gradient(0deg,rgba(255, 255, 255, 0.2) 0%, rgba(56, 66, 88, 0.2) 100%);} .ba__accessibility-range-input[disabled]{background: none; opacity: .5;} .ba__accessibility .ba__accessibility-active:not([class*="-color"]){background: var(--ba-aprimary); color: #fff;} .ba__accessibility-left-font{text-align: left !important;} .ba__accessibility-center-font{text-align: center !important;} .ba__accessibility-right-font{text-align: right !important;} .ba__accessibility-heading{outline: 2px solid #10c2fd !important;} .ba__accessibility-link{outline:2px solid #ce16a9 !important;} .ba__accessibility-hover:hover{background: rgba(250, 225, 1, 0.5) !important;} .ba__accessibility-dyslexia-font, .ba__accessibility-dyslexia-font *{font-family: OpenDyslexic,Arial,sans-serif !important;} .ba__accessibility-readable-font, .ba__accessibility-readable-font *{font-family: Tahoma,Arial,Helvetica,Verdana,sans-serif !important} .ba__accessibility-hide-image body img, .ba__accessibility-hide-image body > :not(.ba__accessibility) svg{display: none !important; opacity: 0 !important; visibility: hidden !important;} .ba__accessibility-stop-animation, .ba__accessibility-stop-animation *{transition: none !important;-webkit-animation-fill-mode: forwards !important;animation-fill-mode: forwards !important;-webkit-animation-iteration-count: 1 !important;animation-iteration-count: 1 !important;-webkit-animation-duration: 0.01s !important;animation-duration: 0.01s !important;} .ba__accessibility-cursor, .ba__accessibility-tip{position: fixed;z-index: 999999999;pointer-events: none;top:5em;left:5em;display: none;} .ba__accessibility-big-cursor *{cursor: none !important;} .ba__accessibility-big-cursor .ba__accessibility-cursor{width:4em;height:4em;background:rgba(255,0,0,.3);border-radius:50%;display: block;mix-blend-mode:difference; transform: translate(-50%, -50%);} .ba__accessibility-mask-cursor .ba__accessibility-cursor{width:100%;height:15vh;background:transparent;border:10px solid #fff;border-left:0;border-right:0;box-shadow:0 0 0 100vh rgba(0, 0, 0, .8);transition:none;transform:translate(0,-50%);left:0 !important; display: block;} .ba__accessibility-guide-cursor .ba__accessibility-cursor{width:25vw;height:8px;background:#000;border:#ff0 2px solid;transition:all .1s ease;transform-origin:center;transform:translate(-50%,50%); display: block;} .ba__accessibility-guide-cursor .ba__accessibility-cursor::before{width:1.6em; height:1.6em; border: .8em solid; border-color: transparent transparent #ff0 transparent; position: absolute; left: calc(50% - .8em); top: auto; bottom: 100%; display: block; content: '';} .ba__accessibility-read-mode body{background: #e3e6ec !important;} .ba__accessibility-read-mode body > .ba__accessibility-readability{margin:0 auto;max-width:40em;font-size: 16px !important;line-height: 1.5 !important;background: #fff;color: #000;padding:1.5em;border-radius:var(--ba-aradius);overflow: hidden; box-shadow:0 0 1em var(--ba-aprimary-shadow);} .ba__accessibility-magnifier .ba__accessibility-tip{background: rgba(0, 0, 0, .8); color: #fff; border-radius: 5px; padding: .3em .5em;display: none;font-size: 2em;line-height: 1;transform: translate(-50%, 15px);max-width: 650px;} .ba__accessibility-blend-invert-blend{-webkit-filter: invert(1);filter: invert(1);} .ba__accessibility-blend-grayscale-blend{-webkit-filter: grayscale(100%);filter: grayscale(100%);} .ba__accessibility-blend-low-saturation-blend{-webkit-filter: saturate(50%);filter: saturate(50%);} .ba__accessibility-blend-high-saturation-blend{-webkit-filter: saturate(200%);filter: saturate(200%);} .ba__accessibility-blend-dark-contrast-blend > body, .ba__accessibility-blend-dark-contrast-blend > body > .ba__accessibility-readability, .ba__accessibility-blend-dark-contrast-blend .ba__accessibility-contrast{background: #000 !important; color: #fff !important; border-color: #fff !important;} .ba__accessibility-blend-light-contrast-blend > body, .ba__accessibility-blend-light-contrast-blend > body > .ba__accessibility-readability, .ba__accessibility-blend-light-contrast-blend .ba__accessibility-contrast{background: #fff !important; color: #000 !important; border-color: #000 !important;} .ba__accessibility-dark-mode-button.ba__accessibility-active{color: var(--ba-aprimary) !important;} .ba__accessibility-iconpos-start .ba__accessibility{align-items: flex-start;} .ba__accessibility-iconpos-end .ba__accessibility{align-items: flex-end;} .ba__accessibility-iconpos-center .ba__accessibility{align-items: center;} .ba__accessibility.ba__accessibility-hide{display:none !important;} .ba__accessibility-static .ba__accessibility{position: static !important;} .ba__accessibility-static .ba__accessibility > *{position: relative !important;} .ba__accessibility-position-left .ba__accessibility{left: 15px; right: auto;} .ba__accessibility-position-left .ba__accessibility .ba__accessibility-container{left: calc(var(--ba-awidth) * -1.5);} .ba__accessibility-position-left .ba__accessibility-open .ba__accessibility-container{left:0; right: auto;} .ba__accessibility:not(.ba__accessibility-open) > [class*="-button"]::after{content:'';width:0;height:0;border:.5em solid #0980ff; border-radius:50%;position:absolute;z-index:-1;top:50%;left:50%;transform:translate(-50%,-50%); opacity:0;-webkit-animation:ring 1.5s infinite;animation:ring 1.5s infinite; display: block;} .ba__accessibility:not(.ba__accessibility-open) > [class*="-button"]:hover::after, .ba__accessibility.ba__accessibility-open > [class*="-button"]::after{-webkit-animation: none;animation: none; display: none;} @-webkit-keyframes ring { 0%{width:1em;height:1em;opacity:1;border-width:.5em} 100%{width:10em;height:10em;opacity:0;border-width:5em} } @keyframes ring { 0%{width:1em;height:1em;opacity:1;border-width:.5em} 100%{width:10em;height:10em;opacity:0;border-width:5em} } @media (max-width: 575px) { .ba__accessibility{--ba-awidth: 10rem !important;} .ba__accessibility [class*=title], .ba__accessibility-logo-button{display: none !important;} .ba__accessibility > * [class*="-button"]{width: calc(99% - .6em) !important;} .ba__accessibility [class$="-slider"], .ba__accessibility [class*="-color"]{height: auto !important;} .ba__accessibility-slider-body > i[class*="-button"]{width:1.8rem !important;} .ba__accessibility-colour-body > i[class*="-button"]{width: 1.5em !important;height: 1.5em !important;margin: 0 3px 3px 0 !important;} .ba__accessibility-colour-body{flex-wrap: wrap; padding: .5rem; justify-content: center;} .ba__accessibility-slider-body{flex-wrap: wrap;justify-content: center;padding: .5rem .5rem 0;} .ba__accessibility-slider-body > div{order: -1;} .ba__accessibility [class$="-slider"], .ba__accessibility [class*="-color"]{flex-wrap: wrap;} .ba__accessibility [class$="-slider"] label, .ba__accessibility [class*="-color"] label{font-size: .7em !important; margin-top: .3em !important;text-align: center !important;display: block !important;} } /* ===== Gestimark — thème visuel du site (gtm_template_5.1) ===== */ /* #region STRUCTURE ----------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------ STRUCTURE ------------------------------------------------------------------------------------------------------------------------ --------------------------------------------------------------------------------------------------------------------- */ /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// RESET ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* annule le zoom au double tap sur mobile */ * { touch-action: manipulation; } [id] { scroll-margin-top: 80px; /* Ajustez selon la hauteur de votre menu */ } html { max-width: 2560px; height: 100%; margin: 0 auto; font-size: 22px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { display: flex; flex-direction: column; min-height: 100dvh; font-family: var(--font-primary); background-color: var(--color-background-body); color: var(--color-font); } body, div, span, applet, iframe, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, ::before, ::after { margin: 0; padding: 0; border: 0; box-sizing: border-box; } .gtm-wrapper { flex-grow: 1; margin-top: var(--space-2xl); margin-bottom: var(--space-lg); padding-left: var(--space-lg); padding-right: var(--space-lg); position: relative; } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// TYPOGRAPHIES ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ @font-face { font-family: 'poppins-regular'; src: url('../fonts/lato-regular.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'poppins-bold'; src: url('../fonts/lato-bold.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'ayar-juno'; src: url('../fonts/Ayar_juno.woff2') format('woff2'); font-display: swap; } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VARIABLES ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* -------------------------------------------------- TYPOGRAPHIES -------------------------------------------------- */ :root { /* Polices ------------------------------------- */ --font-primary: 'poppins-regular', sans-serif; /* police principale */ --font-primary-bold: 'poppins-bold', sans-serif; /* police principale */ --font-secondary: 'poppins', sans-serif; /* police secondaire */ --font-secondary-bold: 'poppins-bold', sans-serif; /* police secondaire */ --font-heading: 'poppins', sans-serif; /* police titre */ --font-gestion-com: 'ayar-juno', sans-serif; /* police titre */ /* Tailles des polices ------------------------------------- */ /* Typographie responsive - Mobile (320px) à Desktop XL (1920px+) */ --font-size-xs: clamp(0.625rem, 0.5rem + 0.5vw, 0.875rem); /* 10-14px */ --font-size-sm: clamp(0.75rem, 0.625rem + 0.5vw, 1rem); /* 12-16px */ --font-size-md: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem); /* 14-18px */ --font-size-lg: clamp(1rem, 0.875rem + 0.5vw, 1.375rem); /* 16-22px */ --font-size-xl: clamp(1.125rem, 0.875rem + 1vw, 1.75rem); /* 18-28px */ --font-size-2xl: clamp(1.25rem, 0.875rem + 1.5vw, 2.25rem); /* 20-36px */ --font-size-3xl: clamp(1.5rem, 1rem + 2vw, 3rem); /* 24-48px */ --font-size-4xl: clamp(1.875rem, 1rem + 3vw, 3.75rem); /* 30-60px */ --font-size-5xl: clamp(2rem, 1rem + 4vw, 4rem); /* 32-64px */ --font-size-slogan: clamp(1.125rem, 0.875rem + 1vw, 1.75rem); /* 18-28px */ } /* -------------------------------------------------- COULEURS -------------------------------------------------- */ /* Palette de couleurs ---------------------------- */ :root { /* Body -------------------- */ --color-background-body: transparent; /* Gestimark ----------------- */ --color-gestimark-primary: #f19e1f; --color-gestimark-secondary: #ef5245; /* Général ----------------- */ --color-primary: #f19e1f; --color-secondary: #ef5245; /* Fonts ----------------- */ --color-font: #000; --color-light: white; --color-heading: #000000; --color-heading-intro-accueil: #000000; --color-form: #000; /* Liens ----------------- */ --color-link: #2443ab; --color-link-hover: #3765fb; --color-link-visited: #2443ab; --color-link-light: whitesmoke; /* Boutons ----------------- */ --color-button: #606B33; --color-button-hover: #000; --color-texte-button: #ffffff; /* Background ----------------- */ --color-background-classic: #feb513; --color-background-opacity: rgba(255, 255, 255, .5); --color-background-opacity-logo: rgba(255, 255, 255, .75); --color-background-gradient: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%); --color-background-1: #f0f0f0; --color-background-2: #b9dfb9; --color-background-3: #9b9a99; /* Menu ----------------- */ --color-background-menu: transparent; --color-background-menu-mobile: #fff; --color-background-menu-accueil: #fff; --color-background-sub-menu: #fff; --color-background-burger: black; --color-background-burger-line: #fff; --color-menu-contact: #606B33; --color-menu-texte-contact: whitesmoke; --color-menu-contact-hover: grey; --color-link-menu: #606B33; --color-link-menu-hover: #000; --color-link-menu-active: #000; --color-link-sub-menu: #606B33; --color-link-sub-menu-hover: #000; --color-link-sub-menu-active: #000; /* FAQ ----------------- */ --color-background-question-faq: #feb513; --color-background-reponse-faq: whitesmoke; --color-texte-question-faq: whitesmoke; --color-texte-reponse-faq: #202020; /* Copyright ----------------- */ --color-background-copyright: grey; /* Dark mode ----------------- */ /* Switch */ --color-background-switch-light: #4869e0; --color-background-switch-dark: #f1d710; --color-switch: whitesmoke; /* Background */ --color-background-dark-mode: #202020; } /* -------------------------------------------------- ESPACEMENTS -------------------------------------------------- */ /* Marges et paddings ------------------------------------- */ :root { --space-xs: clamp(0.25rem, 0.5vw, 0.5rem); /* 4px → 8px */ --space-sm: clamp(0.5rem, 1vw, 1rem); /* 8px → 16px */ --space-md: clamp(1rem, 2vw, 1.5rem); /* 16px → 24px */ --space-lg: clamp(1.5rem, 3vw, 2.5rem); /* 24px → 40px */ --space-xl: clamp(2rem, 4vw, 3.5rem); /* 32px → 56px */ --space-2xl: clamp(2.5rem, 5vw, 5rem); /* 40px → 80px */ --space-3xl: clamp(3rem, 6vw, 6rem); /* 48px → 96px */ --space-4xl: clamp(4rem, 8vw, 8rem); /* 64px → 128px */ --space-5xl: clamp(5rem, 10vw, 12rem); /* 80px → 192px */ } /* -------------------------------------------------- ESPACEMENTS -------------------------------------------------- */ /* Bordures ------------------------------------- */ :root { --border: 2px solid red; /* Bordure tout autour de l'élément */ --border-top: 2px solid red; /* Bordure top */ --border-right: 2px solid red; /* Bordure right */ --border-bottom: 2px solid red; /* Bordure bottom */ --border-left: 2px solid red; /* Bordure left */ --border-form: 1px solid #000; /* Bordure tout autour de l'élément */ --border-form-top: 1px solid #000; /* Bordure du formulaire top */ --border-form-right: 1px solid #000; /* Bordure du formulaire right */ --border-form-bottom: 1px solid #000; /* Bordure du formulaire bottom */ --border-form-left: 1px solid #000; /* Bordure du formumaire left */ } /* Bord arrondis ------------------------------------- */ :root { --border-radius: 2vw; /* Tous les bords arrondis */ --border-radius-button: 99px; /* Bords arrondis des boutons */ --border-radius-circle: 50%; /* Crée un cerle à partir d'un élément carré */ --border-radius-top-left: 2vw; /* Bord arrondi en haut à gauche */ --border-radius-top-right: 2vw; /* Bord arrondi en haut à droite */ --border-radius-bottom-left: 2vw; /* Bord arrondi en bas à gauche */ --border-radius-bottom-right: 2vw; /* Bord arrondi en bas à droite */ } /* -------------------------------------------------- MEDIA QUERIES -------------------------------------------------- */ /* Grandes tablettes ------------------------------------- */ @media screen and (min-width: 1024px) and (max-width:1200px) { :root { --font-size-2xl: clamp(1.35rem, 2rem + 0.35vw, 2.5rem); --font-size-5xl: clamp(2rem, 3.05rem + 0.6vw, 3.5rem); } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// DARK MODE ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* SWitch --------------------------------- */ .gtm-dark-mode { position: fixed; bottom: 10px; right: 10px; } .dark-mode-toggle { position: fixed; bottom: 10px; right: 10px; z-index: 1000; } .switch { position: relative; display: inline-block; width: 34px; height: 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var( --color-background-switch-dark); transition: background-color 0.4s; border-radius: var(--border-radius); } .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: var(--color-switch); transition: transform 0.4s; border-radius: 50%; } input:checked+.slider { background-color: #007bff; } input:checked+.slider:before { transform: translateX(14px); } body.dark-mode input:checked+.slider { background-color: var( --color-background-switch-light); } [data-theme="light"] { /* Gestimark ----------------- */ --color-gestimark-primary: #f19e1f; --color-gestimark-secondary: #ef5245; /* Général ----------------- */ --color-primary: #f19e1f; --color-secondary: #ef5245; /* Fonts ----------------- */ --color-font: #000; --color-light: white; --color-heading: #000000; --color-heading-intro-accueil: #000000; --color-form: #000; /* Liens ----------------- */ --color-link: #2443ab; --color-link-hover: #3765fb; --color-link-visited: #2443ab; /* Boutons ----------------- */ --color-button: #2443ab; --color-button-hover: #3765fb; --color-texte-button: #ffffff; /* Background ----------------- */ --color-background-classic: #feb513; --color-background-opacity: rgba(255, 255, 255, .5); --color-background-opacity-logo: rgba(255, 255, 255, .75); --color-background-gradient: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%); --color-background-1: #D5DBDB; --color-background-2: #b9dfb9; --color-background-3: #9b9a99; /* Menu ----------------- */ --color-background-menu: transparent; --color-background-menu-mobile: #fff; --color-background-menu-accueil: #fff; --color-background-sub-menu: #fff; --color-background-burger: #2443ab; --color-background-burger-line: #fff; --color-menu-contact: #2443ab; --color-menu-texte-contact: whitesmoke; --color-menu-contact-hover: #3765fb; --color-link-menu: #2443ab; --color-link-menu-hover: #3765fb; --color-link-menu-active: #315ae5; --color-link-sub-menu: #2443ab; --color-link-sub-menu-hover: #3765fb; --color-link-sub-menu-active: #315ae5; /* FAQ ----------------- */ --color-background-question-faq: #feb513; --color-background-reponse-faq: whitesmoke; --color-texte-question-faq: whitesmoke; --color-texte-reponse-faq: #202020; /* Copyright ----------------- */ --color-background-copyright: grey; } [data-theme="dark"] { /* Body ----------------- */ --color-background-body: #202020; /* Gestimark ----------------- */ --color-gestimark-primary: #bd7913; --color-gestimark-secondary: #a93a30; /* Général ----------------- */ --color-primary: #bd7913; --color-secondary: #a93a30; /* Fonts ----------------- */ --color-font: #fff; --color-heading: #fff; --color-heading-intro-accueil: #fff; --color-form: #000; /* Liens ----------------- */ --color-link: #feb513; --color-link-hover: #FFD745; --color-link-visited: #feb513; /* Boutons ----------------- */ --color-button: #feb513; --color-button-hover: #FFD745; --color-texte-button: #fff; /* Background ----------------- */ --color-background-classic: #feb513; --color-background-opacity: rgba(32, 32, 32, .5); --color-background-opacity-logo: rgba(32, 32, 32, .75); --color-background-gradient: linear-gradient(0deg, rgb(15, 95, 96) 0%, rgb(122, 88, 17) 100%); --color-background-1: #D5DBDB; --color-background-2: #728c72; --color-background-3: #9b9a99; /* Menu ----------------- */ --color-background-menu: transparent; --color-background-menu-mobile: #202020; --color-background-menu-accueil: #202020; --color-background-sub-menu: #3d3d3d; --color-background-burger: #feb513; --color-background-burger-line: #fff; --color-menu-contact: #feb513; --color-menu-texte-contact: #feb513; --color-menu-contact-hover: #FFD745; --color-link-menu: #feb513; --color-link-menu-hover: #FFD745; --color-link-menu-active: #FFD745; --color-link-sub-menu: #feb513; --color-link-sub-menu-hover: #FFD745; --color-link-sub-menu-active: #FFD745; /* FAQ ----------------- */ --color-background-question-faq: #feb513; --color-background-reponse-faq: whitesmoke; --color-texte-question-faq: whitesmoke; --color-texte-reponse-faq: #202020; /* Copyright ----------------- */ --color-background-copyright: #3d3d3d; } [data-theme="dark"] .gtm-logo-light { display: none; } [data-theme="dark"] .gtm-logo-dark { display: block; } [data-theme="dark"] .gtm-menu-centre .menu-item.default { display: none; } [data-theme="dark"] .gtm-copyright-standard { filter: grayscale(1) brightness(2.5); } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// MATRICE ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* GRILLE VERSION STRICTE ------------------------------------- */ .gtm-box-top-2-3, .gtm-box-top-4-5-6, .gtm-box-top-7-8-9-10, .gtm-box-bottom-2-3, .gtm-box-bottom-4-5-6, .gtm-box-bottom-7-8-9-10, .gtm-box-article { display: grid; grid-template-columns: repeat(12, 1fr); } .moduletable, .com-content-article, form, .sitemap, .com-users-login { grid-column: span 12; } .com-content-category-blog { grid-column: span 12; } .gtm-1{grid-column:span 1}.gtm-2{grid-column:span 2}.gtm-3{grid-column:span 3}.gtm-4{grid-column:span 4}.gtm-5{grid-column:span 5}.gtm-6{grid-column:span 6}.gtm-7{grid-column:span 7}.gtm-8{grid-column:span 8}.gtm-9{grid-column:span 9}.gtm-10{grid-column:span 10}.gtm-11{grid-column:span 11}.gtm-12{grid-column:span 12}@media screen and (min-width:768px){.gtm-tablette-1{grid-column:span 1}.gtm-tablette-2{grid-column:span 2}.gtm-tablette-3{grid-column:span 3}.gtm-tablette-4{grid-column:span 4}.gtm-tablette-5{grid-column:span 5}.moduletable.gtm-tablette-6{grid-column:span 6}.gtm-tablette-7{grid-column:span 7}.gtm-tablette-8{grid-column:span 8}.gtm-tablette-9{grid-column:span 9}.gtm-tablette-10{grid-column:span 10}.gtm-tablette-11{grid-column:span 11}.gtm-tablette-12{grid-column:span 12}}@media screen and (min-width:1024px){.gtm-tablette-plus-1{grid-column:span 1}.gtm-tablette-plus-2{grid-column:span 2}.gtm-tablette-plus-3{grid-column:span 3}.gtm-tablette-plus-4{grid-column:span 4}.gtm-tablette-plus-5{grid-column:span 5}.gtm-tablette-plus-6{grid-column:span 6}.gtm-tablette-plus-7{grid-column:span 7}.gtm-tablette-plus-8{grid-column:span 8}.gtm-tablette-plus-9{grid-column:span 9}.gtm-tablette-plus-10{grid-column:span 10}.gtm-tablette-plus-11{grid-column:span 11}.gtm-tablette-plus-12{grid-column:span 12}}@media screen and (min-width:1200px){.gtm-ordinateur-1{grid-column:span 1}.gtm-ordinateur-2{grid-column:span 2}.gtm-ordinateur-3{grid-column:span 3}.gtm-ordinateur-4{grid-column:span 4}.gtm-ordinateur-5{grid-column:span 5}.gtm-ordinateur-6{grid-column:span 6}.gtm-ordinateur-7{grid-column:span 7}.gtm-ordinateur-8{grid-column:span 8}.gtm-ordinateur-9{grid-column:span 9}.gtm-ordinateur-10{grid-column:span 10}.gtm-ordinateur-11{grid-column:span 11}.gtm-ordinateur-12{grid-column:span 12}} /* GRILLE VERSION FLEXIBLE ------------------------------------- */ .gtm-top1-free, .gtm-top2-free, .gtm-top3-free, .gtm-bottom1-free, .gtm-bottom2-free, .gtm-bottom3-free {display: grid;grid-template-columns: repeat(12, 1fr);}.moduletable.gtm-free-1 {grid-column: span 1 }.moduletable.gtm-free-2 {grid-column: span 2 }.moduletable.gtm-free-3 {grid-column: span 3 }.moduletable.gtm-free-4 {grid-column: span 4 }.moduletable.gtm-free-5 {grid-column: span 5 }.moduletable.gtm-free-6 {grid-column: span 6 }.moduletable.gtm-free-7 {grid-column: span 7 }.moduletable.gtm-free-8 {grid-column: span 8 }.moduletable.gtm-free-9 {grid-column: span 9 }.moduletable.gtm-free-10 {grid-column: span 10 }.moduletable.gtm-free-11 {grid-column: span 11 }.moduletable.gtm-free-12 {grid-column: span 12 }@media (min-width : 768px) {.moduletable.gtm-tablette-free-1 {grid-column: span 1 }.moduletable.gtm-tablette-free-2 {grid-column: span 2 }.moduletable.gtm-tablette-free-3 {grid-column: span 3 }.moduletable.gtm-tablette-free-4 {grid-column: span 4 }.moduletable.gtm-tablette-free-5 {grid-column: span 5 }.moduletable.gtm-tablette-free-6 {grid-column: span 6 }.moduletable.gtm-tablette-free-7 {grid-column: span 7 }.moduletable.gtm-tablette-free-8 {grid-column: span 8 }.moduletable.gtm-tablette-free-9 {grid-column: span 9 }.moduletable.gtm-tablette-free-10 {grid-column: span 10 }.moduletable.gtm-tablette-free-11 {grid-column: span 11 }.moduletable.gtm-tablette-free-12 {grid-column: span 12 }}@media (min-width : 1024px) {.moduletable.gtm-tablette-plus-free-1 {grid-column: span 1 }.moduletable.gtm-tablette-plus-free-2 {grid-column: span 2 }.moduletable.gtm-tablette-plus-free-3 {grid-column: span 3 }.moduletable.gtm-tablette-plus-free-4 {grid-column: span 4 }.moduletable.gtm-tablette-plus-free-5 {grid-column: span 5 }.moduletable.gtm-tablette-plus-free-6 {grid-column: span 6 }.moduletable.gtm-tablette-plus-free-7 {grid-column: span 7 }.moduletable.gtm-tablette-plus-free-8 {grid-column: span 8 }.moduletable.gtm-tablette-plus-free-9 {grid-column: span 9 }.moduletable.gtm-tablette-plus-free-10 {grid-column: span 10 }.moduletable.gtm-tablette-plus-free-11 {grid-column: span 11 }.moduletable.gtm-tablette-plus-free-12 {grid-column: span 12 }}@media (min-width : 1200px) {.moduletable.gtm-desktop-free-1 {grid-column: span 1 }.moduletable.gtm-desktop-free-2 {grid-column: span 2 }.moduletable.gtm-desktop-free-3 {grid-column: span 3 }.moduletable.gtm-desktop-free-4 {grid-column: span 4 }.moduletable.gtm-desktop-free-5 {grid-column: span 5 }.moduletable.gtm-desktop-free-6 {grid-column: span 6 }.moduletable.gtm-desktop-free-7 {grid-column: span 7 }.moduletable.gtm-desktop-free-8 {grid-column: span 8 }.moduletable.gtm-desktop-free-9 {grid-column: span 9 }.moduletable.gtm-desktop-free-10 {grid-column: span 10 }.moduletable.gtm-desktop-free-11 {grid-column: span 11 }.moduletable.gtm-desktop-free-12 {grid-column: span 12 }} /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// OPTIONS DE STRUCTURE ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* -------------------------------------------------- Marges et Padding -------------------------------------------------- */ /* Padding ------------------------------------- */ .gtm-no-padding { padding: 0; } .gtm-no-padding-top { padding-top: 0; } .gtm-no-padding-right { padding-right: 0; } .gtm-no-padding-bottom { padding-bottom: 0; } .gtm-no-padding-left { padding-left: 0; } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// GENERAL ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* -------------------------------------------------- Images -------------------------------------------------- */ img { max-width: 100%; height: auto; } p img.float-start { display: inline; float: left; margin-right: 15px; } /* -------------------------------------------------- Titres, texte, liens, listes... -------------------------------------------------- */ /* Titres ------------------------------------- */ h1 { font-size: var(--font-size-5xl); margin: 0 0 var(--space-md) 0; font-family: var(--font-gestion-com); color: var(--color-heading); /* Gestion des mots longs */ word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } h2 { font-size: var(--font-size-4xl); font-family: var(--font-primary); color: var(--color-heading); margin-bottom: var(--space-md); /* Gestion des mots longs */ word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } h3 { font-size: var(--font-size-3xl); font-family: var(--font-heading); color: var(--color-heading-secondary); margin-bottom: var(--space-xs); /* Gestion des mots longs */ word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } h4 { font-size: var(--font-size-xl); font-family: var(--font-primary); color: var(--color-heading-secondary); margin-bottom: var(--space-sm); /* Gestion des mots longs */ word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } h5 { font-size: var(--font-size-lg); font-family: var(--font-heading); color: var(--color-heading-secondary); margin-bottom: var(--space-sm); /* Gestion des mots longs */ word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } h6 { font-size: var(--font-size-md); font-family: var(--font-primary); color: var(--color-heading-secondary); margin-bottom: var(--space-xs); /* Gestion des mots longs */ word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } /* Textes ------------------------------------- */ p { margin-bottom: var(--space-sm); } blockquote { font-size: var(--font-size-lg); font-family: var(--font-secondary); margin-bottom: var(--space-sm); } figcaption { font-size: 12px; } /* Liens ------------------------------------- */ a { position: relative; display: inline-block; text-decoration: none; cursor: pointer; color: var(--color-link); transition: color .5s ease-in-out; margin-bottom: var(--space-xs); } a:visited { color: var(--color-link-visited); } a:hover { color: var(--color-link-hover); } a.gtm-lien-secondary { color: var(--color-link-light); } a.gtm-lien-secondary:hover { color: var(--color-link-light-hover); } a.gtm-lien-secondary:visited { color: var(--color-link-light-visited); } /* Boutons ------------------------------------- */ /* Version 01 */ a.gtm-btn-v1 { border-radius: var(--border-radius-button); margin-top: var(--space-xs); margin-bottom: var(--space-xs); box-sizing: border-box; color: var(--color-texte-button); background-color: var(--color-button); padding: var(--space-xs) var(--space-sm); touch-action: manipulation; display: inline-block; text-align: center; cursor: pointer; transition: background .2s ease-in-out, color .2s ease-in-out; } a.gtm-btn-v1:hover { color: var(--color-light); background-color: var(--color-button-hover); } /* Boutons lire la suite */ .readmore a.btn { border-radius: var(--border-radius-button); margin-top: var(--space-xs); margin-bottom: var(--space-xs); box-sizing: border-box; color: var(--color-texte-button); background-color: var(--color-button); padding: var(--space-xs) var(--space-sm); touch-action: manipulation; display: inline-block; text-align: center; cursor: pointer; transition: background .2s ease-in-out, color .2s ease-in-out; } .readmore a.btn:hover { color: var(--color-light); background-color: var(--color-button-hover); } /* Boutons de joomla */ .btn.btn-primary, .btn.btn-secondary { border: none; border-radius: var(--border-radius-button); margin-top: var(--space-xs); margin-bottom: var(--space-xs); box-sizing: border-box; color: var(--color-texte-button); background-color: var(--color-button); padding: var(--space-xs) var(--space-sm); touch-action: manipulation; display: inline-block; text-align: center; font-size: 22px; cursor: pointer; transition: background .2s ease-in-out, color .2s ease-in-out; } .btn.btn-primary:hover, .btn.btn-secondary:hover { color: var(--color-light); background-color: var(--color-button-hover); } /* Listes ------------------------------------- */ ul, ol { margin-left: var(--space-md); margin-bottom: var(--space-sm); font-size: var(--font-size-base); } ul li, ol li { margin-bottom: var(--space-xs); } ol li a { display: unset; } /* Liste compte */ ul.mod-login__options { list-style-type: none; margin-left: 0; } ul.mod-login__options li a { font-size: var(--font-size-base); } /* -------------------------------------------------- OPTIONS DESIGN -------------------------------------------------- */ /* Background --------------------------------------------- */ .gtm-bg-classic, .gtm-bg-opacity, .gtm-bg-gradient, .gtm-bg-1, .gtm-bg-2, .gtm-bg-3 { margin-left: calc(-1 * var(--space-lg)); margin-right: calc(-1 * var(--space-lg)); width: calc(100% + 2 * var(--space-lg)); padding: var(--space-lg); } .gtm-bg-classic { background-color: var(--color-background-classic); } .gtm-bg-opacity { background-color: var(--color-background-opacity); } .gtm-bg-gradient { background-color: var(--color-background-gradient); } .gtm-bg-1 { background-color: var(--color-background-1); } .gtm-bg-2 { background-color: var(--color-background-2); } .gtm-bg-3 { background-color: var(--color-background-3); } /* Permet de changer la couleur du texte selon la couleur du background */ /* .gtm-bg-1 * { color: var(--color-light); } .gtm-bg-2 * { color: var(--color-light); } .gtm-bg-3 * { color: var(--color-light); } */ /* Animations --------------------------------------------- */ /* Fade In */ .gtm-anim-1 { opacity: 0; transition: opacity 0.6s ease-out; } .gtm-anim-1.visible { opacity: 1; } /* Fade In Up */ .gtm-anim-2 { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .gtm-anim-2.visible { opacity: 1; transform: translateY(0); } /* Zoom In */ .gtm-anim-3 { opacity: 0; transform: scale(0.8); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .gtm-anim-3.visible { opacity: 1; transform: scale(1); } /* Fade In Up au chargement (avec délai, sans scroll) */ .gtm-anim-4 { opacity: 0; animation: gtm-fade-in-up 0.6s ease-out 0.2s forwards; } @keyframes gtm-fade-in-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .gtm-anim-4 { animation: none; opacity: 1; } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// FORMULAIRES ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .gtm-formulaire h2 { font-size: var(--font-size-3xl); } .gtm-formulaire.gtm-form-contact { margin-top: var(--space-2xl); } .gtm-formulaire.gtm-form-contact h2 { font-size: var(--font-size-xl); } .formResponsive .formRow { display: flex; column-gap: 20px; } .formResponsive .formRow::before, .formResponsive .formRow::after { display: none; } .formResponsive .formRow [class*=formSpan] { float: none; margin-left: 0; } .formSpan6 { width: calc(50% - 10px) !important; } .formResponsive input, .formResponsive textarea { width: 100%; } .formResponsive input[type=email], .formResponsive input[type=number], .formResponsive input[type=password], .formResponsive input[type=tel], .formResponsive input[type=text], .formResponsive input[type=url], .formResponsive select, .formResponsive textarea { font-family: var(--font-primary); font-size: var(--font-size-xs); color: var(--color-form); box-sizing: border-box; } .formResponsive input[type=email], .formResponsive input[type=number], .formResponsive input[type=password], .formResponsive input[type=tel], .formResponsive input[type=text], .formResponsive input[type=url], .formResponsive textarea { background-color: #fff; border: var(--border-form); border-radius: 0; box-shadow: none; transition: none; } .formResponsive input[type=email], .formResponsive input[type=number], .formResponsive input[type=password], .formResponsive input[type=tel], .formResponsive input[type=text], .formResponsive input[type=url] { height: 35px; } .formControlLabel { font-size: 16px; display: inline-block; margin-bottom: 5px; } .formResponsive button[type=reset], .formResponsive button[type=submit], .formResponsive input[type=reset], .formResponsive input[type=submit] { /* Reset du bouton d'origine */ background-image: none; background-repeat: unset; border: none; border-color: transparent; text-shadow: none; box-shadow: none; border-radius: var(--border-radius-button); margin-top: var(--space-xs); margin-bottom: var(--space-xs); box-sizing: border-box; color: var(--color-texte-button); font-size: 22px; background-color: var(--color-button); padding: var(--space-sm) var(--space-sm); touch-action: manipulation; display: inline-block; text-align: center; cursor: pointer; transition: background .2s ease-in-out, color .2s ease-in-out !important; } .formResponsive button[type=reset]:hover, .formResponsive button[type=submit]:hover, .formResponsive input[type=reset]:hover, .formResponsive input[type=submit]:hover { color: var(--color-light); background-color: var(--color-button-hover); /* Reset du bouton d'origine */ text-shadow: none; } @media screen and (min-width: 768px) { .gtm-formulaire.gtm-form-contact { margin-top: 0; } } @media screen and (min-width:768px) { .gtm-formulaire { max-width: 90%; margin: auto; } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// COMPTE ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .com-users-login { text-align: center; max-width: 400px; margin: auto; padding-top: var(--space-3xl); } .com-users-login input { height: 25px; border-radius: 0px; border: 1px solid; margin-top: 8px; } .com-users-login .control-group { margin-bottom: var(--space-sm); } .com-users-login .password-group .input-group { display: flex; flex-direction: column; align-items: center; } .com-users-login .btn-secondary.input-password-toggle { font-size: 16px; } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// COPYRIGHT ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .gtm-copyright-dark { display: none; } .gtm-copyright { text-align: center; padding-left: var(--space-sm); padding-right: var(--space-sm); color: var(--color-text); font-size: 16px; margin-bottom: var(--space-xs); } .gtm-flinks { text-align: center; margin-bottom: var(--space-xs); } .gtm-flinks a { margin-top: var(--space-xs); color: var(--color-link); font-size: 16px; } .gtm-flinks a:hover { color: var(--color-link-hover); } .gtm-copyright-separator { font-size: 16px; } /* Liens du pied de page : même marge latérale que la ligne du copyright ; chaque « | » reste collé au lien qui le suit (jamais seul en fin de ligne quand la ligne passe à la suivante). */ .gtm-flinks { padding-left: var(--space-sm); padding-right: var(--space-sm); } .gtm-flinks-item { white-space: nowrap; } .gtm-flinks-debut .gtm-flinks-sep { display: none; } .gtm-flinks-garde .gtm-flinks-sep { visibility: hidden; } .gtm-copyright .moduletable.gtm-copyright-content { padding: var(--space-0); } .gtm-copy-anim-logo { margin: auto; max-width: 400px; } .gtm-copy-anim-logo .gtm-lien-gestimark { display: flex; justify-content: center; align-items: center; } a.gtm-lien-gestimark span { color: var(--color-text); letter-spacing: 1px; font-size: var(--font-size-xs); padding-right: var(--space-xs); } .gtm-copy-anim-logo .gtm-lien-gestimark img.gtm-g-gestimark { width: 35px; transform-origin: center; transition: all .2s ease-in-out; } .gtm-copy-anim-logo .gtm-lien-gestimark img.gtm-creation-de { width: 100px; padding-right: var(--space-xs); } .gtm-copy-anim-logo:hover .gtm-lien-gestimark img.gtm-g-gestimark { transform: rotate(-30deg); } .gtm-copyright-bg { padding: var(--space-md) var(--space-xs); background-color: var(--color-background-copyright); } .gtm-copyright-bg .gtm-flinks a { color: var(--color-link-light); } .gtm-copyright-bg .gtm-flinks a:hover { color: var(--color-link-light-hover); } .gtm-copyright-bg .gtm-copyright-separator { color: var(--color-light); } .gtm-copyright-bg .gtm-copyright { color: var(--color-light); } .gtm-copyright-dark { display: none; } .gtm-copyright-bg .gtm-copyright-standard { display: none; } .gtm-copyright-bg .gtm-copyright-dark { display: block; } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// COOKIE ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* image de cookie */ .cc-revoke.cc-bottom { position: relative; bottom: 0; left: 50%; transform: translateX(-50%) !important; width: 30px; height: 40px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; background-color: transparent !important; order: 999999; -webkit-animation: cookie 0.4ss .8s both; animation: cookie 0.4s .8s both; transition: background-image 0.3s ease; } .cc-revoke.cc-bottom:hover { background-image: url("data:image/svg+xml;utf8,"); } @keyframes cookie { 0% { visibility: hidden; transform: translate(0%, 100%); } 100% { visibility: visible; transform: translate(0%, 0%); } } /* grille du pop up */ .cc-message-text { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); grid-column-gap: 0px; grid-row-gap: 0px; } .cc-message-text .p1 { grid-area: 1 / 1 / 2 / 2; } .cc-message-text .cc-checkboxes-container { grid-area: 2 / 1 / 3 / 2; margin-top: var(--space-xs); margin-bottom: var(--space-xs); } .cc-message-text .cc-compliance { grid-area: 3 / 1 / 4 / 2; } /* bouton fermeture popup */ .cc-close { top: 0.8em; right: 0.6em; font-size: var(--font-size-xs); } /* boutons */ span.cc-cookie-settings-toggle, div.cc-window a.cc-btn { border-radius: var(--border-radius-button) !important; text-decoration: none !important; font-size: inherit; } span.cc-cookie-settings-toggle, .cc-btn.cc-allowall, .cc-btn.cc-deny, a.cc-btn.cc-allow { font-weight: 500; padding: var(--space-xs) !important; line-height: 1.2; height: inherit !important; font-size: inherit; } span.cc-cookie-settings-toggle:hover, .cc-btn.cc-allowall:hover, .cc-btn.cc-deny:hover, a.cc-btn.cc-allow:hover { background-color: var(--color-background-button-hover) !important; color: var(--color-text-light) !important; } /* lien politique de confidentialité et catégories de cookies */ a.cc-link.cc-privacy:hover { color: var(--color-link-hover); } a.cc-link.cc-cookie-checkbox:hover label { color: var(--color-text-light); } /* alignement */ div.cc-checkboxes-container { align-items: center; } input.cc-cookie-checkbox+span:after, input.cc-cookie-checkbox+span:before { display: none; } input.cc-cookie-checkbox { appearance: auto !important; opacity: 1; } .cc-cookie-settings-toggler { display: none !important; } input.cc-cookie-checkbox:checked+span:after, input.cc-cookie-checkbox:checked+span:before { display: none !important; } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// SITEMAP ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .sitemap .folder { display: inline-block; padding-bottom: var(--space-sm); } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ACCESSIBILITE ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .ba__accessibility [class*="-button"] :last-child, .ba__accessibility [class$="-slider"] label, .ba__accessibility [class*="-color"] label { text-transform: inherit; } .ba__accessibility { z-index: 0; bottom: 15px; top: unset; } .ba__accessibility.ba__accessibility-open { top: 30px; z-index: 9999999; } .ba__accessibility > .ba__accessibility-action-button { width: 2.5em; height: 2.5em; } .ba__accessibility:not(.ba__accessibility-open) > [class*="-button"]::after { animation: none !important; -webkit-animation: none !important; } .ba__accessibility { height: 3em; /* hauteur du SVG */ /* overflow: hidden; */ transition: height 0.4s ease; } .ba__accessibility.ba__accessibility-open { height: calc(100% - 60px); /* hauteur totale de la section quand ouverte */ } /* #endregion */ /* #region STYLE ----------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------ STYLE ------------------------------------------------------------------------------------------------------------------------ --------------------------------------------------------------------------------------------------------------------- */ /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// LOGO HEADER ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .gtm-logo-dark { display: none; } .gtm-logo-header { position: fixed; z-index: 11; top: 0px; left: 0px; /* padding: var(--space-sm); */ transition: top .2s ease-in-out; } .gtm-logo-header .mod-custom .mod-custom { line-height: 0; } .gtm-logo-header a { margin-bottom: 0; } .gtm-logo-header img { max-width: 200px; background: var(--color-background-opacity-logo); padding: 20px 25px; border-radius: 0 0 20% 0; } .gtm-logo-header .gtm-footer-1-slogan { display: none; } @media screen and (min-width: 1200px) { .gtm-logo-header { /* top: 20px; left: 20px; */ padding: 0px; background-color: unset; } /* body.gtm-scrolled .gtm-logo-header { top: 10px; } */ } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// HEROS ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* -------------------------------------------------- Hero 01 -------------------------------------------------- */ .gtm-hero-1 { padding: 0px; } .gtm-hero-1 .mod-custom .gtm-hero-container { display: flex; flex-direction: column; justify-content: center; } .gtm-hero-1 .gtm-hero-texte-content { display: flex; flex-direction: column; justify-content: center; padding: var(--space-xl); margin-top: var(--space-lg); } .gtm-hero-1 .gtm-hero-texte-content .gtm-slogan { display: block; font-size: var(--font-size-slogan); margin-bottom: var(--space-md); } .gtm-hero-1 .gtm-hero-images { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; grid-column-gap: var(--space-lg); grid-row-gap: var(--space-lg); } /* TABLETTE ------------------------------------- */ @media screen and (min-width: 1024px) { .gtm-hero-1 .mod-custom .gtm-hero-container { flex-direction: row; justify-content: space-between; align-items: center; min-height: 100dvh; } .gtm-hero-1 .gtm-hero-texte-content { width: 60%; } .gtm-hero-1 .gtm-hero-images { width: 40%; } .gtm-hero-1 .gtm-hero-images { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); grid-column-gap: var(--space-lg); grid-row-gap: var(--space-lg); } .gtm-hero-1 .gtm-hero-img-1 { grid-area: 1 / 1 / 5 / 5; } .gtm-hero-1 .gtm-hero-img-2 { grid-area: 5 / 1 / 9 / 5; } .gtm-hero-1 .gtm-hero-img-3 { grid-area: 3 / 5 / 7 / 9; } } /* Texte : fade in up (rapide) */ .gtm-hero-1 h1, .gtm-hero-1 .gtm-slogan, .gtm-hero-1 .gtm-field-button { opacity: 0; transform: translateY(20px); animation: fadeUp 0.4s forwards; /* encore plus rapide */ } /* Ordre et délais */ .gtm-hero-1 h1 { animation-delay: 0.1s; } .gtm-hero-1 .gtm-slogan { animation-delay: 0.3s; /* après h1 */ } .gtm-hero-1 .gtm-field-button { animation-delay: 0.5s; /* commence après gtm-slogan, pas après les images */ } /* Images : fade in simple */ .gtm-hero-1 .gtm-hero-img-1, .gtm-hero-1 .gtm-hero-img-2, .gtm-hero-1 .gtm-hero-img-3 { opacity: 0; animation: fadeIn 0.5s forwards; /* images légèrement plus lentes */ } /* Début animation images juste après gtm-slogan */ .gtm-hero-1 .gtm-hero-img-1 { animation-delay: 0.5s; } .gtm-hero-1 .gtm-hero-img-2 { animation-delay: 0.7s; } .gtm-hero-1 .gtm-hero-img-3 { animation-delay: 0.9s; } /* Keyframes */ @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: 1; } } /* -------------------------------------------------- Hero 02 -------------------------------------------------- */ .gtm-hero-2 { padding: 0px; } .gtm-hero-2 .mod-custom .gtm-hero-container { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 80dvh; } .gtm-hero-2 .gtm-hero-texte-content { position: relative; z-index: 2; padding: var(--space-xl); text-align: center; max-width: 768px; margin: auto; } .gtm-hero-2 .gtm-hero-texte-content h1 { color: var(--color-light); } .gtm-hero-2 .gtm-hero-texte-content .gtm-slogan { display: block; font-size: var(--font-size-slogan); margin-bottom: var(--space-md); color: var(--color-light); } .gtm-hero-2 .gtm-hero-images { width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 0; top: 0; left: 0; } .gtm-hero-2 .gtm-hero-images img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .gtm-hero-2 .mod-custom .gtm-hero-images::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: var(--color-background); } /* Image : fade in simple (arrive en premier) */ .gtm-hero-2 .gtm-hero-images { opacity: 0; animation: fadeIn 0.5s forwards; /* durée identique aux images précédentes */ animation-delay: 0.1s; /* commence en premier */ } /* Texte : fade in up (rapide) */ .gtm-hero-2 h1, .gtm-hero-2 .gtm-slogan, .gtm-hero-2 .gtm-field-button { opacity: 0; transform: translateY(20px); animation: fadeUp 0.4s forwards; /* rapide */ } /* Ordre et délais des textes */ .gtm-hero-2 h1 { animation-delay: 0.6s; /* après l'image */ } .gtm-hero-2 .gtm-slogan { animation-delay: 0.8s; } .gtm-hero-2 .gtm-field-button { animation-delay: 1s; } /* Keyframes */ @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: 1; } } /* -------------------------------------------------- Hero 03 -------------------------------------------------- */ .gtm-hero-3 { padding: var(--space-3xl) 0 0; } .gtm-hero-3 .mod-custom .gtm-hero-container { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .gtm-hero-3 .gtm-hero-texte-content { width: 100%; padding: var(--space-md); } .gtm-hero-3 .gtm-hero-texte-content .gtm-groupe-slogan { display: flex; flex-direction: column; } .gtm-hero-3 .gtm-hero-texte-content .gtm-slogan { font-size: var(--font-size-slogan); margin-bottom: var(--space-sm); } .gtm-hero-3 .gtm-hero-images { width: 100%; height: 35dvh; overflow: hidden; position: relative; } .gtm-hero-3 .gtm-hero-images img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* DESKTOP ------------------------------------- */ @media screen and (min-width: 1200px) { .gtm-hero-3 { padding: var(--space-4xl) 0 0; } .gtm-hero-3 .gtm-hero-texte-content { display: flex; justify-content: space-around; align-items: flex-end; column-gap: var(--space-lg); } .gtm-hero-3 .gtm-hero-texte-content .gtm-groupe-slogan { flex-direction: column-reverse; width: 50%; text-align: right; } .gtm-hero-3 .gtm-hero-images { height: 45dvh; } } /* Texte : fade in up (rapide) */ .gtm-hero-3 h1, .gtm-hero-3 .gtm-slogan, .gtm-hero-3 .gtm-field-button { opacity: 0; transform: translateY(20px); animation: fadeUp 0.4s forwards; /* rapide */ } /* Ordre et délais des textes */ .gtm-hero-3 h1 { animation-delay: 0.1s; /* arrive en premier */ } .gtm-hero-3 .gtm-field-button { animation-delay: 0.3s; /* après h1 */ } .gtm-hero-3 .gtm-slogan { animation-delay: 0.5s; /* après le bouton */ } /* Image : fade in simple */ .gtm-hero-3 .gtm-hero-images { opacity: 0; animation: fadeIn 0.5s forwards; /* durée identique aux autres images */ animation-delay: 0.7s; /* après le texte */ } /* Keyframes */ @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: 1; } } /* -------------------------------------------------- Hero 04 -------------------------------------------------- */ .gtm-hero-4 { padding: var(--space-2xl) 0 0; } /* Texte */ .gtm-hero-4 .gtm-hero-texte-content .gtm-slogan { display: block; font-size: var(--font-size-slogan); margin-bottom: var(--space-md); } /* -------------------------------------------------- GROUPE TEXTE – MOBILE / TABLETTE (<1200px) Descend depuis le haut + chevauche image -------------------------------------------------- */ .gtm-hero-4 .gtm-texte-groupe { position: relative; z-index: 0; /* au-dessus de l'image */ padding: var(--space-lg); background-color: var(--color-background-classic); max-width: 90%; margin: auto; border-radius: 50px; opacity: 0; animation: fadeDownGroup 0.6s forwards; animation-delay: 0.1s; /* ombre subtile */ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); } .gtm-texte-groupe a.gtm-btn-v1, .gtm-action-bg a.gtm-btn-v1 { background: #000; } /* Images */ .gtm-hero-4 .gtm-hero-images { position: relative; z-index: -1; /* en dessous du texte */ width: 100%; height: 35vh; overflow: hidden; opacity: 0; animation: fadeIn 0.5s forwards; animation-delay: 1.3s; } .gtm-hero-4 .gtm-hero-images img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Textes internes – cascade */ .gtm-hero-4 h1, .gtm-hero-4 .gtm-slogan, .gtm-hero-4 .gtm-field-button { opacity: 0; transform: translateY(20px); animation: fadeUp 0.4s forwards; } .gtm-hero-4 h1 { animation-delay: 0.7s; font-family: var(--font-gestion-com); font-size: clamp(2rem, 1rem + 5vw, 5rem); } .gtm-hero-4 .gtm-slogan { animation-delay: 0.9s; } .gtm-hero-4 .gtm-field-button { animation-delay: 1.1s; } /* Desktop ≥1200px : slide horizontal */ @media screen and (min-width: 1200px) { .gtm-hero-4 { min-height: 100dvh; padding: 0; } .gtm-hero-4 .mod-custom .gtm-hero-container { min-height: 100dvh; display: flex; align-items: center; justify-content: center; } .gtm-hero-4 .mod-custom .gtm-hero-container .gtm-hero-texte-content { width: 48%; } .gtm-hero-4 .gtm-texte-groupe { max-width: 100%; margin: auto; /* Slide horizontal desktop */ animation: fadeLeftGroup 0.5s forwards; animation-delay: 0.1s; /* supprime chevauchement et ombre desktop */ box-shadow: none; } .gtm-hero-4 .gtm-hero-images { width: 55%; height: 100dvh; } } /* -------------------------------------------------- ANIMATIONS -------------------------------------------------- */ /* Mobile / tablette : descend depuis le haut vers position chevauchante renforcée */ @keyframes fadeDownGroup { from { opacity: 0; transform: translateY(-100px); /* commence en haut */ } to { opacity: 1; transform: translateY(40px); /* position finale au-dessus de l'image */ } } /* Desktop : fade + slide horizontal */ @keyframes fadeLeftGroup { from { opacity: 0; transform: translateX(0); } to { opacity: 1; transform: translateX(12vw); } } /* Textes cascade */ @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } /* Image fade simple */ @keyframes fadeIn { to { opacity: 1; } } /* -------------------------------------------------- Hero LIGHT -------------------------------------------------- */ .gtm-hero-light { padding: 0px; } .gtm-hero-light .mod-custom .gtm-hero-container { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 40vh; } .gtm-hero-light .gtm-hero-texte-content { position: relative; z-index: 2; padding: var(--space-5xl) var(--space-lg) var(--space-lg); text-align: center; max-width: 900px; margin: auto; } .gtm-hero-light .gtm-hero-texte-content h1 { color: var(--color-heading); } .gtm-hero-light .gtm-hero-texte-content .gtm-slogan { display: block; font-size: var(--font-size-slogan); margin-bottom: var(--space-md); color: var(--color-heading); } .gtm-hero-light .gtm-hero-images { width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 0; top: 0; left: 0; } .gtm-hero-light .gtm-hero-images img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; } .gtm-hero-light .mod-custom .gtm-hero-images::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: var(--color-background-opacity); } #carriere .gtm-hero-light .gtm-hero-images img, #nous-joindre .gtm-hero-light .gtm-hero-images img { transform: rotate(180deg); } .mod-articlesnews__item:first-of-type .gtm-emploi-equipe { max-width: 210px; margin-left: auto; margin-right: auto; } #nos-services .gtm-hero-light .gtm-hero-images img { transform: rotate(180deg) scaleX(-1); } #devenir-membre .gtm-hero-light .gtm-hero-images img { transform: rotate(180deg) scaleY(-1); } /* animation */ .gtm-hero-light { opacity: 0; animation: fadeIn 0.8s forwards; /* animation au chargement */ } .gtm-hero-light { animation-delay: 0.2s; /* optionnel, pour un petit délai */ } @media screen and (min-width: 768px) { .gtm-hero-light .gtm-hero-texte-content { position: relative; z-index: 2; padding: var(--space-4xl) var(--space-lg) var(--space-lg); text-align: center; max-width: 900px; margin: auto; } } @keyframes fadeIn { to { opacity: 1; } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ARTICLES ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* Retour en arrière */ .gtm-retour { text-align: center; padding: var(--space-5xl) var(--space-md) 0; } /* Introduction */ .gtm-article-introduction { text-align: center; padding-bottom: var(--space-xl); } .gtm-article-introduction .gtm-titre-introduction { color : var(--color-heading-text-intro); } .gtm-article-introduction .gtm-texte-introduction { font-size: var(--font-size-lg); color : var(--color-heading-text-intro); } #gestion-com .gtm-article-introduction .gtm-titre-introduction { color : var(--color-heading-intro-accueil); } #gestion-com .gtm-article-introduction .gtm-texte-introduction { font-size: var(--font-size-lg); color : var(--color-heading-intro-accueil); } /* Section */ .gtm-article-section { display: flex; justify-content: center; flex-direction: column-reverse; gap: var(--space-md); margin-bottom: var(--space-2xl); } .gtm-legende-image-section { font-size: 10px; } /* Description */ .gtm-article-description { margin-bottom: var(--space-2xl); } .com-content-article.item-page figure.left.item-image, .com-content-article__body { position: sticky; top: var(--space-2xl); } /* Appel à l'action */ .gtm-appel-action { display: grid; gap: var(--space-md, 20px); margin: 0 auto; text-align: center; position: relative; z-index: 0; justify-items: center; } .gtm-appel-action.gtm-nb-btn-3 { grid-template-columns: repeat(3, 1fr); } .gtm-appel-action.gtm-nb-btn-2 { grid-template-columns: repeat(2, 1fr); } .gtm-appel-action.gtm-nb-btn-1 { grid-template-columns: auto; } .gtm-appel-action > div { display: flex; flex-direction: column; align-items: center; } .gtm-bouton1-wrapper.gtm-action-bg, .gtm-bouton2-wrapper.gtm-action-bg, .gtm-bouton3-wrapper.gtm-action-bg { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm); width: 100%; max-width: 400px; /* optionnel */ margin-top: var(--space-xl); min-width: 0; /* il faut déclaré la min-width sinon bug sur IPAD et ne descend pas plus bas que la gradeur de l'image */ } /* Jusqu'à 991px : le bouton est sous l'image. Dès 992px : le bouton est posé au bas de l'image. */ .gtm-bouton1-wrapper.gtm-action-bg .img-btn-background, .gtm-bouton2-wrapper.gtm-action-bg .img-btn-background, .gtm-bouton3-wrapper.gtm-action-bg .img-btn-background { width: 100%; } .gtm-bouton1-wrapper.gtm-action-bg .img-btn-background a, .gtm-bouton2-wrapper.gtm-action-bg .img-btn-background a, .gtm-bouton3-wrapper.gtm-action-bg .img-btn-background a { display: block; margin: 0; } .gtm-bouton1-wrapper.gtm-action-bg .img-btn-background img, .gtm-bouton2-wrapper.gtm-action-bg .img-btn-background img, .gtm-bouton3-wrapper.gtm-action-bg .img-btn-background img { display: block; width: 100%; height: auto; aspect-ratio: 1.5 / 1; object-fit: cover; /* équivalent background-size: cover */ object-position: center; border-radius: var(--border-radius); } .gtm-bouton1-wrapper.gtm-action-bg h4, .gtm-bouton2-wrapper.gtm-action-bg h4, .gtm-bouton3-wrapper.gtm-action-bg h4, .gtm-bouton1-wrapper.gtm-action-bg .custom-button-wrapper, .gtm-bouton2-wrapper.gtm-action-bg .custom-button-wrapper, .gtm-bouton3-wrapper.gtm-action-bg .custom-button-wrapper { position: relative; z-index: 2; color: #fff; } @media (min-width: 992px) { .gtm-bouton1-wrapper.gtm-action-bg .custom-button-wrapper, .gtm-bouton2-wrapper.gtm-action-bg .custom-button-wrapper, .gtm-bouton3-wrapper.gtm-action-bg .custom-button-wrapper { position: absolute; left: 0; right: 0; bottom: 30px; } .gtm-bouton1-wrapper.gtm-action-bg .custom-button-wrapper a, .gtm-bouton2-wrapper.gtm-action-bg .custom-button-wrapper a, .gtm-bouton3-wrapper.gtm-action-bg .custom-button-wrapper a { margin-bottom: 0; } } /* Mode sombre : bouton jaune tant qu'il est sous l'image (jusqu'à 991px) ; posé sur l'image, il reste noir. */ @media (max-width: 991px) { [data-theme="dark"] .gtm-action-bg a.gtm-btn-v1 { background: var(--color-button); } [data-theme="dark"] .gtm-action-bg a.gtm-btn-v1:hover { background: var(--color-button-hover); } } /* .gtm-bouton1-wrapper.gtm-action-bg .img-btn-background::after, .gtm-bouton2-wrapper.gtm-action-bg .img-btn-background::after, .gtm-bouton3-wrapper.gtm-action-bg .img-btn-background::after { content: ""; position: absolute; inset: 0; background: rgba(254, 181, 19, 0.4); z-index: 1; border-radius: var(--border-radius); } */ @media (max-width: 600px) { .gtm-appel-action { display: flex; flex-direction: column; align-items: center; column-gap: var(--space-xl); } } /* DESKTOP ------------------------------------- */ @media screen and (min-width: 992px) { /* Section */ .gtm-article-section { flex-direction: row; } .gtm-article-section { flex-direction: row; } .gtm-contenu-texte-section { width: 60%; } .gtm-article-image-section { width: 40%; } /* Contenu de l'article de blogue */ .gtm-texte-carriere { padding-bottom: var(--space-lg); } figure.left.item-image { float: left; max-width: 50%; padding: 0 var(--space-md) var(--space-md) 0; } img.float-start { float: left; max-width: 300px; } } .gtm-alert:has(*) { padding-top: 30px !important; } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CHAMPS GENERAUX ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .gtm-article-introduction, .gtm-article-section, .gtm-article-description, .gtm-appel-action { margin-bottom: var(--space-4xl); } .gtm-container-footer { margin-bottom: var(--space-lg); } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// BLOGUE VERSION MODULE ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .gtm-blog-col > h3 { text-align: center; margin-bottom: var(--space-lg); } .mod-articlesnews__item { margin: 0 auto var(--space-4xl); } #faq .mod-articlesnews__item { margin: 0 auto var(--space-sm); } .mod-articlesnews__item .gtm-texte-carriere { padding-bottom: 0; } .gtm-blog-col { padding-bottom: var(--space-2xl); } .mod-articlesnews__item figure { max-width: 400px; margin: 0 auto var(--space-sm); } .mod-articlesnews__item figure img { border-radius: 50%; } .gtm-rond .mod-articlesnews__item figure img { border-radius: 50%; } .gtm-blog-col .mod-articlesnews__item, .gtm-blog-col .mod-articlesnews__item a { text-align: center; } .gtm-liens-champs { display: block; max-width: fit-content; margin-left: auto; margin-right: auto; } .gtm-blog-ligne .mod-articlesnews__item { max-width: 550px; text-align: center; align-items: center; } /* DESKTOP ------------------------------------- */ @media screen and (min-width: 992px) { .gtm-blog-ligne, .gtm-blog-col { max-width: 80%; margin: auto; } /* Design en ligne ---------------- */ .gtm-blog-ligne .mod-articlesnews__item { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: auto; grid-column-gap: var(--space-sm); grid-row-gap: 0px; margin-bottom: var(--space-md); max-width: unset; text-align: unset; } .gtm-blog-ligne .mod-articlesnews__item figure { max-width: 200px; line-height: 0; margin-bottom: 0; } .gtm-blog-ligne .mod-articlesnews__item .gtm-champs { align-content: center; } /* Design du blogue 2 colonnes ---------------- */ .gtm-blog-col.gtm-blog-col-2 .mod-articlesnews { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-column-gap: var(--space-xl); grid-row-gap: var(--space-xl); } /* Design du blogue 3 colonne --------------- */ .gtm-blog-col.gtm-blog-col-3 .mod-articlesnews { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; grid-column-gap: var(--space-xl); grid-row-gap: var(--space-xl); } /* Design du blogue 4 colonne ---------------- */ .gtm-blog-col.gtm-blog-col-4 .mod-articlesnews { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; grid-column-gap: var(--space-lg); grid-row-gap: var(--space-lg); } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// SERVICES ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* -------------------------------------------------- Service 01 -------------------------------------------------- */ .gtm-intro-service-1 { margin-bottom: var(--space-xl); } .gtm-dev-service-1 { display: flex; justify-content: center; flex-direction: column-reverse; gap: var(--space-md); padding-bottom: var(--space-xl); } @media screen and (min-width: 992px) { .gtm-dev-service-1 { flex-direction: row; } .gtm-content-dev-service-1 { width: 50%; } .gtm-wrap-img-service-1 { width: 50%; } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// DEVENIR MEMBRE ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .gtm-intro-membre { padding-bottom: var(--space-xl); } .gtm-dev-membre { display: flex; justify-content: center; flex-direction: column-reverse; gap: var(--space-md); padding-bottom: var(--space-xl); } @media screen and (min-width: 992px) { .gtm-dev-membre { flex-direction: row; } .gtm-content-dev-membre { width: 50%; } .gtm-wrap-img-membre { width: 50%; } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// NOUS SOUTENIR ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .gtm-intro-soutenir, .gtm-dons-intro-soutenir { padding-bottom: var(--space-xl); } .gtm-dev-soutenir, .gtm-dons-dev-soutenir { display: flex; justify-content: center; flex-direction: column-reverse; gap: var(--space-md); padding-bottom: var(--space-xl); } @media screen and (min-width: 992px) { .gtm-dev-soutenir, .gtm-dons-dev-soutenir { flex-direction: row; } .gtm-content-dev-soutenir, .gtm-content-dev-dons { width: 50%; } .gtm-wrap-img-soutenir, .gtm-wrap-img-dons { width: 50%; } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// NOUS JOINDRE ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .gtm-adresse-nous-joindre { margin-bottom: var(--space-md); } .gtm-nous-joindre .gtm-adresse-num a { display: block; width: fit-content; margin-bottom: var(--space-sm); } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ACCORDÉONS ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* Style du conteneur de la question */ .faq-item { margin-bottom: 15px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: box-shadow 0.3s ease; } .faq-item:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .faq-item h3 { font-size: var(--font-size-lg); } /* Le titre enveloppe le bouton : sa marge passe au texte de la question, à l'intérieur du bouton */ .faq-item .faq-titre { margin-bottom: 0; } /* Style du bouton question */ .faq-question { width: 100%; padding: var(--space-sm); cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: var(--color-background-question-faq); color: var(--color-texte-question-faq); font: inherit; border: none; text-align: left; transition: background 0.3s ease; } .faq-question > [itemprop="name"] { margin-bottom: var(--space-xs); } /* Icône + dessinée en CSS (2 barres) : la barre verticale pivote à l'ouverture et le + devient un − */ .faq-icon { position: relative; width: 24px; height: 24px; flex-shrink: 0; margin-left: var(--space-xs); font-size: 0; color: var(--color-texte-question-faq); } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 1px; background-color: currentColor; transition: transform 0.3s ease; } .faq-icon::after { transform: rotate(90deg); } .faq-item.faq-ouvert .faq-icon::after { transform: rotate(180deg); } /* Style de la réponse (cachée par défaut) */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; background: var(--color-background-reponse-faq); color: var(--color-texte-reponse-faq); font-size: var(--font-size-sm); } .faq-answer-content { padding: 0 var(--space-sm); } /* Réponse visible quand ouvert */ .faq-item.faq-ouvert .faq-answer { max-height: 500px; padding: var(--space-sm) 0; } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// FOOTER ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* -------------------------------------------------- Footer 01 | 02 | 03 | 04 -------------------------------------------------- */ .gtm-footer-v1 { justify-content: center; } .gtm-footer-col-1 { max-width: 500px; padding-bottom: var(--space-lg); } .gtm-footer-col-1 .mod-custom, .gtm-footer-col-3 .mod-custom { display: flex; flex-direction: column; } .gtm-footer-col-1 .mod-custom img { padding-bottom: var(--space-sm); } .gtm-footer-col-3 a { margin-bottom: var(--space-sm); } .gtm-picto-ms { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--space-sm); } .gtm-picto-ms a { line-height: 0; } .gtm-picto-ms a svg { fill: var(--color-link); transition: fill .2s ease-in-out; } .gtm-picto-ms a:hover svg { fill: var(--color-link-hover); } .gtm-picto-ms svg { width: 30px; } /* -------------------------------------------------- Footer 01 | 02 | 03 (sans la photo) -------------------------------------------------- */ .gtm-footer-v1 { padding: var(--space-lg); } .gtm-footer-col-1 .gtm-logo-footer { width: 300px; } .gtm-footer-col-1, .gtm-footer-col-2, .gtm-footer-col-3 { margin-bottom: var(--space-lg); } .gtm-footer-col-1 .gtm-footer-1-slogan { display: block; font-size: var(--font-size-lg); } .gtm-footer-1-title-section { display: block; font-family: var(--font-primary-bold); font-size: var(--font-size-lg); text-transform: uppercase; margin-bottom: var(--space-sm); } .gtm-footer-col-4 ul { list-style: none; margin-left: 0px; font-size: var(--font-size-xs); } .gtm-footer-liste-horaire { font-family: var(--font-primary); list-style: none; margin-left: 0; } .gtm-footer-liste-horaire .gtm-footer-jour { font-family: var(--font-primary-bold); } .gtm-footer-ligne-img .mod-custom { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: auto; grid-column-gap: var(--space-md); justify-content: center; } .gtm-footer-ligne-img .mod-custom img:nth-child(1), .gtm-footer-ligne-img .mod-custom img:nth-child(3) { display: none; } /* TABLETTE ------------------------------------- */ @media screen and (min-width: 767px) { .gtm-footer-v1 { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, auto); grid-column-gap: var(--space-lg); grid-row-gap: var(--space-lg); } .gtm-footer-col-1 { grid-area: 1 / 1 / 2 / 2; } .gtm-footer-col-2 { grid-area: 1 / 2 / 2 / 3; } .gtm-footer-col-3 { grid-area: 2 / 1 / 3 / 2; } .gtm-footer-col-4 { grid-area: 2 / 2 / 3 / 3; } .gtm-footer-col-1, .gtm-footer-col-2, .gtm-footer-col-3 { margin-bottom: 0px; } .gtm-footer-ligne-img .mod-custom img:nth-child(1), .gtm-footer-ligne-img .mod-custom img:nth-child(3) { display: block; } } /* DESKTOP ------------------------------------- */ @media screen and (min-width: 1200px) { .gtm-footer-v1 { grid-template-columns: 1.5fr 1fr 1.5fr 1.5fr; grid-template-rows: auto; grid-column-gap: var(--space-lg); } .gtm-footer-col-1 { grid-area: 1 / 1 / 2 / 2;} .gtm-footer-col-2 { grid-area: 1 / 2 / 2 / 3;} .gtm-footer-col-3 { grid-area: 1 / 3 / 2 / 4;} .gtm-footer-col-4 { grid-area: 1 / 4 / 2 / 5;} .gtm-footer-col-1 .gtm-logo-footer { width: 100%; } } /* -------------------------------------------------- Footer 03 (photo) -------------------------------------------------- */ .gtm-footer-3 { padding: 0px; } .gtm-footer-3-img .mod-custom { width: 100%; height: 35dvh; overflow: hidden; position: relative; } .gtm-footer-3-img .mod-custom img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* -------------------------------------------------- Footer 04 -------------------------------------------------- */ .gtm-footer-4 { padding: 0px; } .gtm-footer-4 .mod-custom { display: flex; flex-direction: column-reverse; justify-content: center; } .gtm-footer-4-img .mod-custom{ width: 100%; height: 100dvh; overflow: hidden; position: relative; } .gtm-footer-4-img .mod-custom img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .gtm-footer-4-right { padding: var(--space-lg); } .gtm-footer-4-right .gtm-footer-col-1 .mod-custom, .gtm-footer-4-right .gtm-footer-col-3 .mod-custom, .gtm-footer-4-right .gtm-footer-col-4 .mod-custom { display: block; } /* TABLETTE ------------------------------------- */ @media screen and (min-width: 768px) { .gtm-footer-4-right { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: var(--space-lg); grid-row-gap: var(--space-lg); padding: var(--space-lg); width: 100%; } .gtm-footer-4 .gtm-footer-col-1 { grid-area: 1 / 1 / 2 / 2; } .gtm-footer-4 .gtm-footer-col-2 { grid-area: 1 / 2 / 2 / 3; } .gtm-footer-4 .gtm-footer-col-3 { grid-area: 2 / 1 / 3 / 2; } .gtm-footer-4 .gtm-footer-col-4 { grid-area: 2 / 2 / 3 / 3; } } /* DESKTOP ------------------------------------- */ @media screen and (min-width: 1200px) { .gtm-footer-4 .mod-custom { flex-direction: row; } .gtm-footer-4-img { width: 50%; height: 100dvh; } .gtm-footer-4-right { width: 50%; } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// MERCI / OUPS ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .gtm-texte-merci { display: flex; align-items: center; padding-top: var(--space-2xl); } .gtm-img-merci .mod-custom, .gtm-img-oups .mod-custom { background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 50dvh; margin-right: calc(var(--space-lg) * -1); margin-left: calc(var(--space-lg) * -1); } @media screen and (min-width: 768px) { .gtm-texte-merci { padding-top: 0; padding-right: var(--space-2xl); } .gtm-img-merci .mod-custom, .gtm-img-oups .mod-custom { min-height: 100dvh; margin-right: calc(var(--space-lg) * -1); margin-left: auto; margin-top: calc(var(--space-lg) * -1); } } /* .com-content-article.item-page { margin-top: var(--space-5xl); } */ /* #endregion */ /* #region MENU ----------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------ MENU ------------------------------------------------------------------------------------------------------------------------ --------------------------------------------------------------------------------------------------------------------- */ #gtm-menu .moduletable { padding: 0; } /* Menu centré ---------------------------------------- */ .gtm-logo-menu-header { max-width: 100px; } .gtm-menu-standard .menu-item.default { display: none; } /* Masqué le titre du lien de menu Accueil */ .image-title.visually-hidden { display: none; } /* -------------------------------------------------- MENU MOBILE -------------------------------------------------- */ /* Menu burger ------------------------------------- */ .gtmHeader .gtm-open-nav-menu { display: flex; position: fixed; top: var(--space-sm); right: var(--space-sm); height: 40px; width: 40px; border-radius: 50%; background-color: var(--color-background-burger); align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; z-index: 10000000; } /* Barres du burger */ .gtmHeader .gtm-open-nav-menu span, .gtmHeader .gtm-open-nav-menu span:before, .gtmHeader .gtm-open-nav-menu span:after { display: block; position: relative; height: 2px; width: 20px; background-color: var(--color-background-burger-line); border-radius: var(--border-radius); transition: all 0.2s ease; } .gtmHeader .gtm-open-nav-menu span:before { content: ""; top: -7px; position: absolute; } .gtmHeader .gtm-open-nav-menu span:after { content: ""; top: 7px; position: absolute; } /* Burger transformé en croix */ .gtm-hidden-scrolling .gtmHeader .gtm-open-nav-menu span { background-color: transparent !important; } .gtm-hidden-scrolling .gtmHeader .gtm-open-nav-menu span:before { transform: rotate(45deg); top: 0; } .gtm-hidden-scrolling .gtmHeader .gtm-open-nav-menu span:after { transform: rotate(-45deg); top: 0; } /* Navigation principale ------------------------------------- */ .gtmHeader { position: fixed; width: 100%; min-height: 100dvh; display: flex; justify-content: center; align-items: center; top: -100%; z-index: 1; background-color: var(--color-background-menu-mobile); transition: all 0.5s ease; } .gtmHeader.gtmOpen { top: 0; z-index: 100; } .menu { display: flex; flex-direction: column; align-items: center; list-style: none; } .menu .menu-item a, span.mod-menu__separator.separator { text-decoration: none; font-size: var(--font-size-xl); color: var(--color-link-menu); margin-bottom: 0; padding-bottom: 0; } .menu-item.current > a, .menu-item.gtm-sous-menu-actif > a, .menu .menu-item.gtm-sous-menu-actif > span { color: var(--color-link-menu-active); } /* Sous-menu ------------------------------------- */ .gtm-menu-item-has-children .gtm-sub-menu { position: relative; max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; margin-left: 0; margin-bottom: 0; transition: all 0.2s ease-in-out; text-align: center; } .gtm-menu-item-has-children.gtm-active .gtm-sub-menu { visibility: visible; opacity: 1; } .gtm-menu-item-has-children .gtm-sub-menu li { margin: var(--space-sm) 0 0 0; } .gtm-menu-item-has-children.gtm-active .gtm-sub-menu li:last-child { padding: 0 0 var(--space-sm) 0; } .gtm-menu-item-has-children .gtm-sub-menu li a { font-size: var(--font-size-md); } .gtm-menu-item-has-children.gtm-sous-menu-actif .gtm-sub-menu li { color: var(--color-link-menu-active); } /* Icône + ------------------------------------- */ .gtm-menu-item-has-children .separator { position: relative; cursor: pointer; } /* Icône "+" : lignes horizontale et verticale */ .gtm-menu-item-has-children .separator::before, .gtm-menu-item-has-children .separator::after { content: ""; position: absolute; width: 10px; height: 1.5px; background-color: var(--color-link-menu); transition: all .3s ease; } /* Ligne verticale (avant) */ .gtm-menu-item-has-children .separator::before { top: 48%; right: -15px; transform: translateY(48%) rotate(-90deg); } /* Ligne horizontale */ .gtm-menu-item-has-children .separator::after { top: 48%; right: -15px; transform: translateY(48%); } /* Icône "+" transformée en "-" (lorsqu'actif) */ .gtm-menu-item-has-children.gtm-active .separator::before { transform: rotate(0deg); } /* Changement de couleur lorsqu'actif */ .gtm-menu-item-has-children.gtm-sous-menu-actif .separator::after, .gtm-menu-item-has-children.gtm-sous-menu-actif .separator::before { background-color: var(--color-link-menu-active); } /* Pour les cas actifs supplémentaires */ .gtm-menu-item-has-children.gtm-sous-menu-actif .separator::after, .gtm-menu-item-has-children.gtm-sous-menu-actif .separator::before { background-color: var(--color-link-menu-active); } /* -------------------------------------------------- MEDIA QUERIES -------------------------------------------------- */ /* TABLETTE ------------------------------------- */ @media screen and (min-width: 768px) { .menu .menu-item a, span.mod-menu__separator.separator { font-size: var(--font-size-4xl); } .gtm-menu-item-has-children .gtm-sub-menu li a { font-size: var(--font-size-2xl); } /* Icône + ------------------------------------- */ /* Icône "+" : lignes horizontale et verticale */ .gtm-menu-item-has-children .separator::before, .gtm-menu-item-has-children .separator::after { width: 25px; height: 3.5px; } /* Ligne verticale (avant) */ .gtm-menu-item-has-children .separator::before { right: -35px; } /* Ligne horizontale */ .gtm-menu-item-has-children .separator::after { right: -35px; } } /* DESKTOP ------------------------------------- */ @media screen and (min-width: 1200px) { .gtm-menu-item-has-children .gtm-sub-menu { position: absolute; top: 100%; left: 0; min-width: 200px; background-color: #fff; opacity: 0; visibility: hidden; max-height: none; transition: opacity 0.3s ease, visibility 0.3s ease; } .gtm-menu-item-has-children:hover .gtm-sub-menu, .gtm-menu-item-has-children:focus-within .gtm-sub-menu { opacity: 1; visibility: visible; } /* Masquer burger */ .gtmHeader .gtm-open-nav-menu { display: none; z-index: 9; } .gtmHeader { position: absolute; top: 0; left: 0; min-height: auto; background-color: transparent; display: flex; z-index: 10; } /* #gestion-com .gtmHeader { background-color: #fff; } */ .gtmHeader .gtmContainer { width: 100%; } .menu { display: flex; align-items: center; flex-direction: row; width: 100%; height: 80px; column-gap: 20px; list-style: none; margin: 0px; padding: 0 var(--space-sm); background-color: var(--color-background-menu); transition: all .3s ease-in-out; } #gestion-com .menu, #oups .menu, #merci .menu { background-color: var(--color-background-menu-accueil); } body.gtm-scrolled .menu { height: 60px; } /* Alignement de menu -------------------------------------- */ .gtm-menu-gauche { justify-content: flex-start; } .gtm-menu-centre { justify-content: center; } .gtm-menu-droit { justify-content: flex-end; } .gtm-logo-header.gtm-logo-droit { /* right: 20px; */ left: auto; } .gtm-logo-header.gtm-logo-gauche { right: auto; /* left: 20px; */ } .gtm-logo-header.gtm-logo-none { display: none; } /* Navigation principale ------------------------------------- */ .menu .menu-item { height: 100%; display: flex; align-items: center; margin-bottom: 0px; } .menu .menu-item > a, .menu .menu-item > span { font-family: var(--font-primary); color: var(--color-link-menu); font-size: var(--font-size-sm); text-decoration: none; transition: color 0.2s ease-in-out; } .menu .menu-item > a:hover, .menu .menu-item > span:hover { color: var(--color-link-menu-hover); } .menu .menu-item.current > a, .menu-item.gtm-sous-menu-actif > a, .menu .menu-item.gtm-sous-menu-actif > span { color: var(--color-link-menu-active); } .gtm-menu-bouton > li:last-child { background-color: var(--color-menu-contact); border-radius: var(--border-radius); height: auto; padding: var(--space-xs) var(--space-sm); transition: background .2s ease-in-out, color .2s ease-in-out; } .gtm-menu-bouton > li:last-child a { color: #fff !important; } .gtm-menu-bouton > li:last-child:hover { background-color: var(--color-menu-contact-hover); } .gtm-menu-bouton > li:last-child a { color: var(--color-menu-texte-contact); } .gtm-menu-bouton > li:last-child:hover a { color: var(--color-menu-texte-contact-hover); } /* Navigation secondaire ------------------------------------- */ .gtm-menu-item-has-children { position: relative; padding-right: var(--space-sm); } .gtm-menu-item-has-children .gtm-sub-menu { position: absolute; z-index: 10; top: 100%; left: 0; min-width: 250px; max-height: 10000px; background-color: var(--color-background-sub-menu); padding: var(--space-sm); opacity: 0; visibility: hidden; list-style: none; text-align: left; transition: all 0.3s ease; } .gtm-menu-item-has-children:hover .gtm-sub-menu, .gtm-menu-item-has-children:focus-within .gtm-sub-menu { opacity: 1; visibility: visible; } .gtm-menu-item-has-children .gtm-sub-menu li { margin: var(--space-sm) 0 0 0; } .gtm-menu-item-has-children .gtm-sub-menu li:nth-child(1) { margin-top: 0px; } .gtm-sub-menu .menu-item a { color: var(--color-link-sub-menu); padding-bottom: var(--space-xs); } .gtm-sub-menu .menu-item a:hover { color: var(--color-link-sub-menu-hover); } .gtm-menu-item-has-children .gtm-sub-menu li a { font-size: var(--font-size-xs); } /* Icône + ------------------------------------- */ /* Icône "+" : lignes horizontale et verticale */ .gtm-menu-item-has-children .separator::before, .gtm-menu-item-has-children .separator::after { width: 10px; height: 1.5px; } /* Ligne verticale (avant) */ .gtm-menu-item-has-children .separator::before { right: -15px; } /* Ligne horizontale */ .gtm-menu-item-has-children .separator::after { right: -15px; } .gtm-menu-item-has-children .separator::before, .gtm-menu-item-has-children .separator::after { background-color: var(--color-link-menu); } .gtm-menu-item-has-children:hover .separator::before, .gtm-menu-item-has-children:hover .separator::after { transform: rotate(0deg); background-color: var(--color-link-menu-hover); } .gtm-menu-item-has-children.active .separator::after, .gtm-menu-item-has-children.active .separator::before { background-color: var(--color-link-menu-active); } } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// MENU FOOTER ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ #mod-custom230 { display: flex; flex-direction: column; } #mod-custom230 a { font-size: 16px; font-family: var(--font-primary); } #mod-custom230 a[href="/"] { display: none; } /* #endregion */ /* ===== Additions Gestimark — site statique ===== */ /* Police 'poppins' — le gabarit source la référence (--font-heading, --font-secondary, ex. les titres h3/h5 et les questions de la FAQ) mais ne l'a jamais chargée nulle part (aucune balise Google Fonts, aucun @font-face) : sur le site Joomla en ligne, elle ne s'affiche donc QUE chez les visiteurs qui ont Poppins déjà installée sur leur ordinateur — les autres reçoivent en silence la police système par défaut, différente (le 'a' en particulier). Auto-hébergée ici (licence SIL OFL, libre de redistribution — même principe que Lato/Roboto/Ayar Juno) pour un rendu identique et fiable chez tout le monde, y compris la cliente. Sous-ensemble « latin » de Google Fonts (Poppins v24) : couvre les caractères français accentués. */ @font-face { font-family: 'poppins'; font-style: normal; font-weight: 400; src: url('../fonts/poppins-regular.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'poppins'; font-style: normal; font-weight: 700; src: url('../fonts/poppins-bold.woff2') format('woff2'); font-display: swap; } /* Remplace l'attribut style="display:none" du gabarit RSForm (norme : pas de style= en HTML). */ .gbf-hidden { display: none; } .gbf-form-todo { background: #fff3cd; border: 1px solid #ffe69c; color: #664d03; padding: 0.75em 1em; margin-bottom: 1em; border-radius: 4px; font-size: var(--font-size-sm, 0.9rem); } /* Bandeau affiché : l'icône du widget d'accessibilité reste au-dessus de lui, dans le coin gauche laissé libre par la marge des boutons (le gabarit la met en z-index 0 quand le widget est fermé). */ body:has(.gbf-cc) .ba__accessibility:not(.ba__accessibility-open) { z-index: 10000; } .gbf-cc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; justify-content: center; padding: 1rem; pointer-events: none; } .gbf-cc__box { max-width: 760px; width: 100%; background: #fff; color: #202020; border-radius: 10px; box-shadow: 0 12px 40px rgba(32, 32, 32, 0.22); padding: 1.25rem 1.4rem; font-family: var(--font-primary, "Lato", system-ui, sans-serif); pointer-events: auto; position: relative; } /* X de fermeture (2026-09-28) — même effet que Refuser (voir site.js). */ .gbf-cc__close { appearance: none; position: absolute; top: 0.4rem; right: 0.4rem; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: color 0.2s ease-in-out; } .gbf-cc__close:hover { color: var(--color-link, #2443ab); } .gbf-cc__close:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } .gbf-cc__text { margin: 0 0 0.9rem; padding-right: 1.75rem; font-size: 0.95rem; line-height: 1.5; } .gbf-cc__text a { color: var(--color-link, #2443ab); text-decoration: underline; /* Le gabarit met TOUS les liens en display:inline-block + margin-bottom (règle `a` de gtm-style.css) : sur petit mobile, le lien passait à la ligne en bloc et le point final de la phrase se retrouvait seul sur la ligne suivante (corrigé 2026-09-30). */ display: inline; margin: 0; } .gbf-cc__cats[hidden] { display: none; } .gbf-cc__cats { display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 1rem; font-size: 0.92rem; } .gbf-cc__cats label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .gbf-cc__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; } .gbf-cc__btn { appearance: none; border: 1px solid #feb513; background: #feb513; color: #202020; font: inherit; font-weight: 700; font-size: 0.9rem; padding: 0.6rem 1.15rem; border-radius: 6px; cursor: pointer; line-height: 1; } .gbf-cc__btn:hover { background: #e6a300; border-color: #e6a300; } .gbf-cc__btn--ghost { background: transparent; color: #202020; border-color: #d8d3c4; } .gbf-cc__btn--ghost:hover { background: #f3f2ee; color: #202020; } .gbf-cc__btn:focus-visible { outline: 3px solid #feb513; outline-offset: 2px; } /* Page /sitemap/ — mêmes deux règles (minimales) que le site en ligne ; le reste (liste à puces imbriquées) reprend les styles par défaut du navigateur, sans habillage Gestimark. */ #jmap_sitemap { overflow: hidden; } .jmapcolumn { float: left; width: 100%; } /* Pages /oups/ et /merci/ — image de droite du module "gtm-img-merci" (voir gtm-style.css). Sous Joomla, chaque module HTML personnalisé peut recevoir une image de fond via un